/* /software/ page layout: split hero, product bands with bleeding frames, the .ap-* app shell, and the seam rows. Shared system in pylon.css, mockup kit in pylon-mockups.css. Page --acc default is set on . */ a:not([class]):hover{color:var(--t1)} /* balance keeps the long headline from dropping a one-word orphan line */ .hero h1{max-width:13ch;text-wrap:balance} /* ---- bleeding visual frames. .frame gives containment; these give the bleed, so a drawn screen runs off the page edge instead of sitting in a card. ---- */ /* ---- hero: the record drawing sits where a product shot would ---- */ .hr-v{grid-column:6/13;align-self:center} @media(max-width:1024px){.hr-v{grid-column:1/-1;margin-top:2.5rem}} /* ---- app shell for drawn screens: nav rail, top bar, toolbar. A real product has chrome around the content; without it a drawing reads as a diagram. ---- */ .ap-top{display:flex;align-items:center;gap:.75em;padding:.62em .95em;border-bottom:1px solid var(--rule-2);background:linear-gradient(180deg,#1b1b23,#121217);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);flex:none} .ap-top .glyph{width:1.05em;height:1.05em;flex:none} .ap-sr{margin-left:auto;display:flex;align-items:center;gap:.45em;min-width:7em;max-width:22em;flex:1 1 auto;border:1px solid var(--rule-2);background:rgba(255,255,255,.03);padding:.3em .5em;color:var(--t4);font-size:.84em} .ap-sr svg{width:.9em;height:.9em;flex:none;stroke:currentColor} .ap-sr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ap-ic{width:1.55em;height:1.55em;border:1px solid var(--rule-3);display:flex;align-items:center;justify-content:center;color:var(--t4);flex:none} .ap-ic svg{width:.85em;height:.85em;stroke:currentColor} .ap-av{width:1.55em;height:1.55em;border-radius:50%;background:var(--au,#3b6fd4);color:#fff;font-size:.7em;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none;letter-spacing:.02em} .ap-body{display:flex;flex:1;min-height:0} .ap-rail{width:11.5em;flex:none;border-right:1px solid var(--rule-2);background:rgba(255,255,255,.014);padding:.8em .45em;display:flex;flex-direction:column;gap:.08em} .ap-rail u{text-decoration:none;display:block;font-family:var(--mono);font-size:.66em;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);padding:.3em .5em .55em} .ap-nv{display:flex;align-items:center;gap:.55em;padding:.4em .5em;color:var(--t3);min-width:0} .ap-nv i{width:.6em;height:.6em;flex:none;background:rgba(255,255,255,.13)} .ap-nv span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ap-nv em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:.82em;color:var(--t4);flex:none} .ap-nv.on{background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--t1);box-shadow:inset 2px 0 0 var(--acc-txt,var(--indigo-txt))} .ap-nv.on i{background:var(--acc-txt,var(--indigo-txt))} .ap-rail .sp{flex:1;min-height:.5em} .ap-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative} .ap-tb{display:flex;align-items:center;gap:.45em;padding:.6em 1.1em;border-bottom:1px solid var(--rule-2);flex:none;overflow:hidden} .ap-cp{display:inline-flex;align-items:center;gap:.35em;border:1px solid var(--rule-2);padding:.26em .48em;font-family:var(--mono);font-size:.72em;letter-spacing:.06em;color:var(--t3);white-space:nowrap;flex:none} .ap-cp em{font-style:normal;color:var(--t4)} .ap-cp.on{border-color:color-mix(in srgb,var(--acc) 45%,transparent);color:var(--acc-txt,var(--indigo-txt));background:color-mix(in srgb,var(--acc) 8%,transparent)} .ap-tb .sp{flex:1;min-width:.5em} .ap-ct{font-family:var(--mono);font-size:.7em;letter-spacing:.1em;text-transform:uppercase;color:var(--t4);white-space:nowrap;flex:none} .ap-fade{position:absolute;left:0;right:0;bottom:0;height:3em;background:linear-gradient(0deg,#0b0b0e 22%,transparent);pointer-events:none;z-index:3} @container (max-width:660px){.ap-rail{width:2.4em;padding:.8em .3em}.ap-rail u,.ap-nv span,.ap-nv em{display:none}.ap-nv{justify-content:center}.ap-sr{display:none}} /* roadmap: fixed row height so a long plan clips, plus a today line */ .gt.tl .gt-ax,.gt.tl .gt-r{grid-template-columns:13em minmax(0,1fr) 1.7em} .gt.tl .gt-r{flex:none;height:1.95em} .gt.tl .gt-ax div{position:relative} .gt.tl .gt-ax .now{position:absolute;left:var(--now);top:-.1em;transform:translateX(-50%);font-family:var(--mono);font-size:.66em;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);white-space:nowrap} .gt.tl .gt-t::after{content:'';position:absolute;top:-.55em;bottom:-.55em;left:var(--now);width:1px;background:rgba(255,255,255,.2)} .gt-ow{width:1.7em;height:1.7em;border-radius:50%;font-size:.62em;font-weight:600;color:#fff;display:flex;align-items:center;justify-content:center;background:var(--au,#3b6fd4);justify-self:end} /* vendor register rows */ .vr{display:grid;align-items:center;gap:.85em;padding:.5em .5em;margin:0 -.5em;border-bottom:1px solid var(--rule-3);flex:none;height:2.35em} .vr>b{font-weight:400;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vr .tr{font-family:var(--mono);font-size:.76em;color:var(--t4)} .vr .dt{font-family:var(--mono);font-size:.76em;color:var(--t4);white-space:nowrap} .vr .dt.old{color:#e2a84f} .vr.on{background:color-mix(in srgb,var(--acc) 12%,transparent);box-shadow:inset 2px 0 0 var(--acc-txt,var(--teal-txt))} .vr.on>b{color:var(--t1);font-weight:500} .vr .bd{font-family:var(--mono);font-size:.66em;letter-spacing:.1em;text-transform:uppercase;color:#ff7a6b;border:1px solid color-mix(in srgb,#ff7a6b 45%,transparent);padding:.12em .3em;margin-left:.5em;white-space:nowrap} /* deal side panel */ .dl{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;flex:1;min-height:0} .dl-l{min-width:0;display:flex;flex-direction:column;padding-right:1.1em} .dl-r{min-width:0;display:flex;flex-direction:column;border-left:1px solid var(--rule-2);padding-left:1.1em} @container (max-width:700px){.dl{grid-template-columns:1fr}.dl-r{display:none}} .dl-fig{display:flex;align-items:baseline;justify-content:space-between;gap:.7em;padding:.45em 0;border-bottom:1px solid var(--rule-3)} .dl-fig span{font-family:var(--mono);font-size:.72em;letter-spacing:.1em;text-transform:uppercase;color:var(--t4)} .dl-fig b{font-weight:500;color:var(--t1);white-space:nowrap} .dl-fig b.neg{color:#ff8f82} /* one-record figure: a diagram, deliberately without app chrome */ .rc{display:grid;grid-template-columns:minmax(0,1fr) 5.4em 5.2em;align-items:center;gap:.9em;padding:.55em 0;border-bottom:1px solid var(--rule-3)} .rc-o{display:flex;align-items:baseline;gap:.6em;min-width:0} .rc-o b{font-weight:400;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rc-o i{font-style:normal;font-family:var(--mono);font-size:.76em;color:var(--t4);flex:none} .rc-t{font-family:var(--mono);font-size:.74em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);white-space:nowrap} .rc-p{display:flex;gap:.55em;justify-self:end;background:rgba(255,255,255,.022);padding:.32em .45em} .rc-p i{width:.62em;height:.62em;display:block;background:rgba(255,255,255,.075)} .rc-p i.c{background:var(--indigo);box-shadow:0 0 6px color-mix(in srgb,var(--indigo) 65%,transparent)} .rc-p i.s{background:var(--teal);box-shadow:0 0 6px color-mix(in srgb,var(--teal) 65%,transparent)} .rc-p i.a{background:var(--amber);box-shadow:0 0 6px color-mix(in srgb,var(--amber) 65%,transparent)} .rc-lg{display:flex;align-items:center;gap:1.1em;flex:none} .rc-lg span{display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);font-size:.72em;letter-spacing:.1em;text-transform:uppercase;color:var(--t4);white-space:nowrap} .rc-lg i{width:.55em;height:.55em;flex:none} /* ---- product band: copy column beside a bleeding drawing ---- */ .sw-nm .glyph{width:26px;height:26px} .sw-nm b{font-size:1.375rem;font-weight:600;letter-spacing:-.04em;color:var(--t1)} .sw-cl{font-size:clamp(1.5rem,2.5vw,2.125rem);letter-spacing:-.035em;line-height:1.08;font-weight:500;color:var(--t1);margin-bottom:1.125rem;max-width:18ch} .sw-caps{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--rule);display:grid;gap:.625rem} .sw-caps span{display:flex;align-items:baseline;gap:.75rem;font-size:.9375rem;color:var(--t3)} .sw-caps span::before{content:'';width:5px;height:5px;flex:none;background:var(--acc);transform:translateY(-2px)} .sw-act{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-top:1.875rem} .sw-who{color:var(--t4)} /* ---- the seam: work crossing between products ---- */ .xo{margin-top:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--rule)} .xo-r{display:grid;grid-template-columns:11.5rem minmax(0,1fr) minmax(0,1.1fr);align-items:baseline;gap:0 var(--gut);padding:1.625rem clamp(.625rem,1.1vw,1.125rem);margin:0 clamp(-1.125rem,-1.1vw,-.625rem);border-bottom:1px solid var(--rule-2)} .xo-rt{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap} .xo-rt .glyph{width:12px;height:12px;flex:none} .xo-rt em{font-style:normal;display:inline-flex;align-items:center;gap:.4rem} .xo-rt .ar{color:var(--t4);margin:0 .1rem} .xo-rt .f{color:var(--fc)} .xo-rt .t{color:var(--tc)} .xo-o{font-size:1.0625rem;font-weight:500;letter-spacing:-.025em;line-height:1.3;color:var(--t1)} .xo-o span{display:block;margin-top:.3rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t4)} .xo-d{font-size:.875rem;line-height:1.6;color:var(--t3)} .xo-d b{color:var(--t2);font-weight:500} @media(max-width:900px){.xo-r{grid-template-columns:1fr;row-gap:.75rem}} .xo-f{margin-top:1.5rem;color:var(--t4)} /* ---- hudson throughline ---- */ .sw-th{grid-column:8/13;align-self:center;border-top:1px solid var(--rule)} @media(max-width:1024px){.sw-th{grid-column:1/-1;margin-top:2.5rem}} .sw-th span{display:flex;align-items:center;gap:.875rem;padding:1.125rem 0;border-bottom:1px solid var(--rule-2);font-size:1rem;color:var(--t2)} .sw-th b{font-weight:400;flex:1;min-width:0} .sw-th i{width:7px;height:7px;flex:none;background:var(--c)} .sw-th em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t4)}