@font-face{font-family:"ImperumSans";src:url("/fonts/imperum-sans.73894e04.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"ImperumDisplay";src:url("/fonts/imperum-display.29c2a2a8.woff2") format("woff2");font-weight:100 900;font-display:swap}
/* ============ TOKENS ============ */
:root{color-scheme:dark;
/* v42 (D5): hero-v39's "Navy Paper" tokens verbatim — every ratio was measured there.
v41's names are kept as aliases so the cascade below keeps working. */
--paper:#F1F4FA; /* the hero's ground */
--surface-0:#FAFAFA; /* gutters, wells, grey bands */
--surface-1:#FFFFFF; /* cards */
--surface-2:#EEF2F8; /* chips, inset fields */
--band-white:#FFFFFF;
--band-gray:#FAFAFA;
--bg:#FFFFFF;
--bg-soft:#FAFAFA;
--ink:#091324; /* 16.86:1 on paper */
--ink-2:#3A465C; /* 8.62:1 */
--ink-3:#4C586D; /* 6.44:1 — meta labels */
--caption-ink:#454F63;
--line:#E2E8F0; /* hairline-strong: card borders, band rules */
--line-soft:rgba(9,19,36,.07);/* in-card separators */
--line-strong:#D8E0EC; /* frame lines on paper, quiet button border */
--red:#EF3341;
--red-deep:#D9202E; /* red as text on white, 5.00:1 */
--cyan-t:#0E7490;--green-t:#15803D;--amber-t:#B45309;
--ring:#0E7490;
--r-sm:10px;--r-md:16px;--r-lg:24px;
--sh-1:0 1px 2px rgba(9,19,36,.04),0 10px 28px -12px rgba(9,19,36,.18); /* v39 --pill-shadow */
--sh-2:0 2px 4px rgba(9,19,36,.05),0 16px 38px -12px rgba(9,19,36,.22);
--ease:cubic-bezier(.22,1,.36,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-snap:cubic-bezier(.2,.8,.2,1);
--dur-micro:150ms;
color-scheme:light;
}
.grain::before{
content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background-image:url("data:image/svg+xml;utf8,");
background-size:140px 140px;mix-blend-mode:overlay;opacity:.07;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
background:var(--surface-0);color:var(--ink-2);
font-family:"ImperumSans",system-ui,-apple-system,sans-serif;
font-size:16px;line-height:1.6;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
/* v42 (D2): .meta is the AI Studio reference's .label-sm — a sans caption, not mono.
.mono is for values only now: IDs, timestamps, counts. */
.meta{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.mono{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;letter-spacing:0;font-variant-numeric:tabular-nums;font-weight:500}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
/* reveals — quiet: 12px, 600ms */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(12px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--rd,0ms)}
/* ============ NAV ============
v42 round 2 (26 Aug): hero-v39's floating glass pill ported (ob-nav lineage).
v42's full-width fixed bar is gone. Differences from v39, all deliberate:
- FIXED, not sticky. v39's header sat inside .hero and only stayed pinned
while the fold was in view. Here the header is outside .hero, so the pill
rides the whole page. Centred with left/right + margin auto, never a
transform (a transformed header would become the containing block for the
fixed mobile panel and backdrop).
- Logo and CTA are ink over the hero (Simeon, 26 Aug). Once the hero has
scrolled out, initNav() sets data-past-hero and the CTA turns into the
D6 red pair (#E00030/#E31E42, 4.99/4.64:1 on white at 15px) so the page
CTAs and the nav CTA agree below the fold.
- Links hide under 1000px (v39: 1200). The pill is min(1140, 100% - 32px)
and the row needs ~810px of content; 1000 is the first house-safe stop.
- .nav-links carries its own mono/uppercase rules: v42's .mono is
sentence-case 11px (D2), so the v39 ".mono + 12.5px" trick no longer
yields caps. */
.nav{position:fixed;top:clamp(10px,1.6svh,16px);left:0;right:0;z-index:50;
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
gap:32px;width:min(1240px,calc(100% - 32px));margin:0 auto;
padding:10px 12px 10px 28px}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;
background:linear-gradient(120deg,rgba(255,255,255,.72),rgba(255,255,255,.58) 55%,rgba(255,255,255,.68));
box-shadow:inset 0 0 0 1px rgba(9,19,36,.10),0 10px 30px rgba(9,19,36,.12);
-webkit-backdrop-filter:blur(14px) saturate(1.2);
backdrop-filter:blur(14px) saturate(1.2);
pointer-events:none;
transition:box-shadow var(--dur-micro) var(--ease-snap)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.nav::before{background:rgba(255,255,255,.94)}
}
/* scrolled state — set by initNav()'s IntersectionObserver on a sentinel 40px
down the document (no scroll listener). One step deeper than the resting shadow. */
.nav[data-scrolled]::before{
box-shadow:inset 0 0 0 1px rgba(9,19,36,.12),0 16px 44px rgba(9,19,36,.18)}
/* the wordmark carries the CTA red (#E00030 = the left stop of the .btn-solid /
.nav-btn.solid pair). Every path in the lockup is fill="currentColor", so one
colour declaration paints the mark and the type together. */
.nav-logo{display:block;line-height:0;color:#E00030;justify-self:start}
/* overflow:visible + a padded viewBox: the wordmark's last path ends exactly on
the viewBox edge (x=858.23), so the outer svg's default overflow:hidden shaved
the anti-aliased column off the final m. */
.nav-logo svg{display:block;width:150px;height:auto;overflow:visible}
.nav-links{display:flex;gap:36px;justify-self:center;
font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;
text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums;font-weight:500}
.nav-links a{position:relative;color:var(--ink-3);text-decoration:none;transition:color var(--dur-micro)}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
background:currentColor;transform:scaleX(0);transform-origin:left;
transition:transform 180ms var(--ease-snap)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-ctas{display:flex;align-items:center;justify-self:end;grid-column:3} /* stays in column 3 when .nav-links is display:none */
.nav-btn{display:inline-flex;align-items:center;text-decoration:none;font-size:15px;font-weight:500;
height:40px;padding:0 20px;border-radius:999px;letter-spacing:-.01em;white-space:nowrap;
transition:background var(--dur-micro),transform var(--dur-micro) var(--ease-snap),box-shadow var(--dur-micro),color var(--dur-micro)}
.nav-btn.solid{background:var(--ink);color:var(--paper)}
.nav-btn.solid:hover{background:#1B2740;transform:translateY(-1px);box-shadow:0 4px 14px -6px rgba(9,19,36,.35)}
.nav-btn.solid:active{transform:translateY(0)}
/* past the hero: the D6 red pair (same stops as .btn-solid) */
.nav[data-past-hero] .nav-btn.solid{background:linear-gradient(90deg,#E00030,#E31E42);color:#fff;
box-shadow:0 1px 2px rgba(9,19,36,.06),0 10px 24px -10px rgba(224,0,48,.45)}
.nav[data-past-hero] .nav-btn.solid:hover{background:linear-gradient(90deg,#C9002B,#CF1A3B);
box-shadow:0 1px 2px rgba(9,19,36,.06),0 14px 30px -10px rgba(224,0,48,.5)}
/* the hamburger — two plain strokes that morph to an x. Shown wherever the links hide. */
.mb-btn{display:none;position:relative;align-items:center;justify-content:center;
width:40px;height:40px;margin-left:8px;padding:0;border:0;border-radius:999px;
background:transparent;cursor:pointer;color:var(--ink);flex:none;
transition:background var(--dur-micro)}
.mb-btn:hover{background:rgba(9,19,36,.06)}
.mb-s{position:absolute;left:11px;width:18px;height:2px;border-radius:1px;
background:currentColor;
transition:transform var(--dur-micro) var(--ease-snap),translate var(--dur-micro) var(--ease-snap)}
.mb-s:nth-child(1){translate:0 -3.5px}
.mb-s:nth-child(2){translate:0 3.5px}
.mb-btn[aria-expanded="true"] .mb-s:nth-child(1){translate:0 0;transform:rotate(45deg)}
.mb-btn[aria-expanded="true"] .mb-s:nth-child(2){translate:0 0;transform:rotate(-45deg)}
@media (max-width:999px){
.nav-links{display:none}
.mb-btn{display:inline-flex}
}
@media (max-width:740px){
.nav{width:calc(100% - 24px);top:10px;padding:7px 8px 7px 18px;gap:10px}
.nav-logo svg{width:122px}
.mb-btn{width:36px;margin-left:2px}
.mb-s{left:9px}
}
/* the backdrop. z:-2 inside the header's stacking context: under the glass
::before (-1) and every grid item, but the whole context sits at z-index:50,
so it still veils the page below. */
.mb-backdrop{position:fixed;inset:0;z-index:-2;background:rgba(9,19,36,.28)}
.mb-backdrop[hidden]{display:none}
/* the panel — a full-width sheet under the pill. initNav() sets top from the
header's live rect on open. Closed = visibility (transitions only, keyed off
aria-hidden; hidden content leaves the focus order). */
.mb-panel{position:fixed;left:12px;right:12px;z-index:1;
display:flex;flex-direction:column;
max-height:calc(100svh - 96px);overflow:auto;
background:var(--surface-1);border-radius:20px;
box-shadow:inset 0 0 0 1px rgba(9,19,36,.08),0 24px 64px -16px rgba(9,19,36,.30);
padding:10px 18px 18px;
visibility:hidden;opacity:0;translate:0 -6px;
transition:opacity var(--dur-micro) var(--ease-snap),
translate var(--dur-micro) var(--ease-snap),
visibility 0s var(--dur-micro)}
.mb-panel[aria-hidden="false"]{visibility:visible;opacity:1;translate:0 0;
transition:opacity var(--dur-micro) var(--ease-snap),
translate var(--dur-micro) var(--ease-snap),
visibility 0s 0s}
.mb-links{display:flex;flex-direction:column}
.mb-links a{display:block;padding:15px 6px;font-size:17px;font-weight:500;
letter-spacing:-.01em;color:var(--ink);text-decoration:none;
border-bottom:1px solid var(--line-soft);border-radius:10px;
transition:background var(--dur-micro)}
.mb-links a:hover{background:var(--surface-2)}
.mb-links a:last-child{border-bottom:0}
.mb-cta{justify-content:center;margin-top:12px}
/* ---- nav round 3 (26 Aug pm): functional menu from content/10 Structure Map.html ---- */
.nav-links .nl{appearance:none;background:none;border:0;padding:0 0 2px;margin:0;cursor:pointer;
font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink-3);position:relative;
transition:color var(--dur-micro)}
.nav-links .nl:hover,.nav-links .nl[aria-expanded="true"]{color:var(--ink)}
.nav-links .nl::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 180ms var(--ease-snap)}
.nav-links .nl:hover::after,.nav-links .nl[aria-expanded="true"]::after{transform:scaleX(1)}
.nav-links .nl:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
.nav-ctas{gap:6px}
/* the mega panel. Absolute inside the fixed header (which is never transformed),
so left/right 0 = the pill's own edges. */
.mm{position:absolute;top:100%;left:0;right:0;z-index:1;padding-top:8px;pointer-events:none}
.mm-panel{position:absolute;left:0;right:0;top:8px;
display:grid;gap:8px 28px;padding:22px 26px 24px;
background:var(--surface-1);border-radius:22px;
box-shadow:inset 0 0 0 1px rgba(9,19,36,.08),0 24px 64px -16px rgba(9,19,36,.30);
visibility:hidden;opacity:0;translate:0 -6px;pointer-events:none;
transition:opacity var(--dur-micro) var(--ease-snap),translate var(--dur-micro) var(--ease-snap),visibility 0s var(--dur-micro)}
.mm-panel[aria-hidden="false"]{visibility:visible;opacity:1;translate:0 0;pointer-events:auto;
transition:opacity var(--dur-micro) var(--ease-snap),translate var(--dur-micro) var(--ease-snap),visibility 0s 0s}
.mm-cols-1{grid-template-columns:repeat(4,minmax(0,1fr))}
.mm-cols-1 .mm-col{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 16px}
.mm-cols-1 .mm-h{grid-column:1/-1}
.mm-cols-2{grid-template-columns:1.1fr 1fr}
.mm-cols-3{grid-template-columns:1fr .85fr 1.15fr}
.mm-cols-4{grid-template-columns:1fr 1.25fr .85fr .9fr}
.mm-h.mm-h2{margin-top:28px}
.mm-col{min-width:0}
.mm-h{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:0;
text-transform:none;color:var(--ink-4,#8A97AD);margin:0 0 8px;padding:0 10px}
.mm-item{display:block;padding:9px 10px 10px;border-radius:12px;text-decoration:none;color:var(--ink);
transition:background var(--dur-micro)}
.mm-item:hover,.mm-item:focus-visible{background:var(--surface-2);outline:none}
.mm-item b{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:530;letter-spacing:-.005em;line-height:1.25;text-transform:none}
.mm-item span{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--ink-3);text-transform:none;letter-spacing:0;font-family:"ImperumSans",Inter,system-ui,sans-serif}
.mm-tag{font-style:normal;font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;letter-spacing:0;
text-transform:none;color:var(--ink-3);background:var(--surface-2);border-radius:4px;padding:2px 6px;line-height:1.3;white-space:nowrap;font-weight:500}
.mm-item:hover .mm-tag{background:#fff}
.mm-sub{display:block;position:relative;margin:0 0 1px;padding:4px 10px 4px 26px;border-radius:8px;
text-decoration:none;color:var(--ink-2);font-size:12.5px;font-weight:500;letter-spacing:0;line-height:1.35;
font-family:"ImperumSans",Inter,system-ui,sans-serif;text-transform:none}
.mm-sub::before{content:"";position:absolute;left:13px;top:50%;transform:translateY(-50%);
width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.45}
.mm-sub:hover,.mm-sub:focus-visible{background:var(--surface-2);color:var(--ink);outline:none}
a.mm-item.has-subs{padding-bottom:4px}
.mm-subs{margin:0 0 8px}
/* mobile accordion */
.mb-sec{border-bottom:1px solid var(--line-soft)}
.mb-sec:last-child{border-bottom:0}
.mb-acc{display:flex;width:100%;align-items:center;justify-content:space-between;appearance:none;background:none;border:0;
padding:15px 6px;font:inherit;font-size:17px;font-weight:500;letter-spacing:-.01em;color:var(--ink);cursor:pointer;border-radius:10px}
.mb-acc:hover{background:var(--surface-2)}
.mb-chev{width:16px;height:16px;transition:transform var(--dur-micro) var(--ease-snap)}
.mb-acc[aria-expanded="true"] .mb-chev{transform:rotate(180deg)}
.mb-body{padding:0 6px 12px}
.mb-body[hidden]{display:none}
.mb-h{font-family:"ImperumSans",system-ui,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:0;
text-transform:none;color:var(--ink-4,#8A97AD);margin:22px 0 4px;padding:0 8px}
.mb-body>.mb-h:first-child{margin-top:2px}
.mb-links .mb-item{display:block;padding:9px 8px;border:0;border-radius:8px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.mb-links .mb-item:hover{background:var(--surface-2)}
.mb-links .mb-sub{display:block;position:relative;margin:0 0 1px;padding:5px 8px 5px 24px;border:0;border-radius:8px;
text-decoration:none;color:var(--ink-2);font-size:13px;font-weight:500;line-height:1.35}
.mb-links .mb-sub::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);
width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.45}
.mb-links .mb-sub:hover{background:var(--surface-2);color:var(--ink)}
.mb-links .mb-item b{display:flex;align-items:center;gap:8px;font-weight:500}
.mb-links .mb-item span{display:block;font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:1px}
.mb-ctas{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.mb-ctas .nav-btn{justify-content:center;margin:0}
/* ---- nav round 4 (26 Aug night): the glass extends. One surface: the pill's own
::before grows down over the panel (--mm-h set by openMenu = 8px gap + panel
height), radius 999 -> 28, fill .72 -> .88 so 12.5px body holds on the lattice.
.mm is height:--mm-h + overflow:hidden so the text is clipped to the glass as
it grows; columns rise in 90ms after the glass starts, 40ms apart. Close is
asymmetric: text out 120ms, glass retracts 220ms after a 100ms hold. ---- */
/* radius is a FIXED 28px: on the 56px pill the browser clamps it to a capsule, so
the shape never morphs, it only grows. (999px -> 28px interpolated as a swelling
blob: the closed radius stays a capsule until the box is tall enough, then snaps.) */
.nav::before{bottom:calc(-1 * var(--mm-h,0px));border-radius:28px;
transition:box-shadow var(--dur-micro) var(--ease-snap),
bottom 240ms var(--ease-snap) 100ms,
background 240ms var(--ease-snap) 100ms}
.nav[data-menu-open]::before{
background:linear-gradient(120deg,rgba(255,255,255,.90),rgba(255,255,255,.86) 55%,rgba(255,255,255,.89));
-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
box-shadow:inset 0 0 0 1px rgba(9,19,36,.10),0 24px 64px -16px rgba(9,19,36,.30);
transition:box-shadow var(--dur-micro) var(--ease-snap),
bottom 420ms var(--ease-grow) 0ms,
background 300ms var(--ease-snap) 0ms}
/* hairline under the pill row once open, so the top row still reads as the nav */
.nav::after{content:"";position:absolute;left:24px;right:24px;top:100%;height:1px;z-index:1;
background:var(--line-soft);opacity:0;pointer-events:none;transition:opacity 160ms var(--ease-snap) 60ms}
.nav[data-menu-open]::after{opacity:1;transition-delay:180ms}
.mm{height:var(--mm-h,0px);overflow:hidden;padding-top:0;
transition:height 240ms var(--ease-snap) 100ms}
.nav[data-menu-open] .mm{transition:height 420ms var(--ease-grow) 0ms}
.nav{--ease-grow:cubic-bezier(.16,1,.3,1)}
.mm-panel{background:none;box-shadow:none;border-radius:0;translate:0 0;
transition:opacity 120ms var(--ease-snap),visibility 0s 120ms}
.mm-panel[aria-hidden="false"]{translate:0 0;transition:opacity 120ms var(--ease-snap),visibility 0s 0s}
.mm-col{opacity:0;translate:0 8px;transition:opacity 120ms var(--ease-snap),translate 120ms var(--ease-snap)}
.mm-panel[aria-hidden="false"] .mm-col{opacity:1;translate:0 0;
transition:opacity 260ms var(--ease-snap),translate 260ms var(--ease-snap);
transition-delay:calc(140ms + var(--i,0) * 50ms)}
.mm-col:nth-child(2){--i:1}.mm-col:nth-child(3){--i:2}.mm-col:nth-child(4){--i:3}
@media (prefers-reduced-motion:reduce){
.nav::before,.nav[data-menu-open]::before,.mm,.nav[data-menu-open] .mm{transition:none}
.mm-col,.mm-panel[aria-hidden="false"] .mm-col{translate:0 0;transition:opacity 120ms;transition-delay:0ms}
}
/* ============ BUTTONS ============ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-size:16px;font-weight:530;letter-spacing:-.005em;line-height:1;
padding:16px 28px;border-radius:999px;
transition:background .15s,border-color .15s,transform .15s var(--ease),box-shadow .15s;
white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
/* v42 (D6): the v20 nav pair. A 16px/530 label is normal-size text, so the light stop must
clear 4.5:1 on white — #E31E42 is 4.64:1, #E00030 4.99:1. The old #FF3961 stop was 3.49:1. */
.btn-solid{position:relative;overflow:hidden;background:linear-gradient(90deg,#E00030,#E31E42);color:#fff;box-shadow:0 1px 2px rgba(9,19,36,.06),0 10px 24px -10px rgba(224,0,48,.45)}
.btn-solid:hover{background:linear-gradient(90deg,#C9002B,#CF1A3B);box-shadow:0 1px 2px rgba(9,19,36,.06),0 14px 30px -10px rgba(224,0,48,.5)}
.btn-quiet{background:#fff;color:var(--ink);border:1px solid var(--line-strong)}
.btn-quiet:hover{border-color:#B9C4D3}
.btn-sm{padding:12px 20px;font-size:15px}
/* on crimson */
.btn-white{background:#fff;color:var(--crimson-2)}
.btn-white:hover{background:#F4F4F6}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32)}
.btn-outline:hover{border-color:rgba(255,255,255,.55)}
/* ============ REACTIVE BUTTONS (26 Aug pm) ============
Two references. (1) A dark glass pill whose only motion is a specular
highlight travelling around the rim. (2) A bevelled gradient pill that lifts
on hover, sinks with an inset shadow on press and springs back on release,
sat in a wide pill nav. Recipe:
- rest: v38's brighter pair #F90033 -> #FF3961, a 1px top bevel (inset white)
and a 1px bottom shade so the pill reads as a raised object, coloured
drop shadow.
- hover: lift 2px + 2% scale on a spring curve, the shadow lengthens, a sheen
sweeps once (::before) and the rim light starts orbiting (::after, conic
ring, @property so the angle animates). Arrow nudges 4px.
- press: 60ms drop to y+1 / .97 with an inset shadow: the object sinks
into the surface under the finger.
- release: JS adds .is-released for 480ms, a keyframe overshoots to y-3 /
1.035 then settles on the hover pose, and a coloured ring expands and
dissolves off the edge. That ring is the "it took" signal.
Contrast: the light stop #FF3961 is 3.49:1 on white, so the label is sized as
LARGE text: 19px/600 on .btn (v38 rule: >= 14pt bold = 18.67px). .btn-sm (16.5px, normal
text) keeps the D6 pair #E00030/#E31E42 instead, 4.99/4.64:1. .nav-btn is
16.5px/600, under the 14pt-bold line, and only carries this gradient past
the hero; in the hero it stays ink. */
@property --rim-a{syntax:'';inherits:false;initial-value:0deg}
.btn,.nav-btn{
--lift:0px;--sc:1;
position:relative;isolation:isolate;overflow:hidden;
-webkit-tap-highlight-color:transparent;cursor:pointer;
transform:translateY(var(--lift)) scale(var(--sc));
transition:transform 260ms cubic-bezier(.34,1.45,.64,1),box-shadow 260ms var(--ease),
background 200ms var(--ease),border-color 200ms,color 200ms;
will-change:transform}
.btn{font-size:19px;font-weight:600;letter-spacing:-.01em;padding:18px 34px;gap:10px}
.btn-sm{font-size:16.5px;padding:14px 26px}
.btn svg{width:16px;height:16px;transition:transform 260ms cubic-bezier(.34,1.45,.64,1)}
.nav-btn{height:46px;padding:0 26px;font-size:16.5px;font-weight:600}
.btn:hover,.nav-btn:hover{--lift:-2px;--sc:1.02}
.btn:hover svg,.nav-btn:hover svg{transform:translateX(4px)}
.btn:active,.nav-btn:active{--lift:1px;--sc:.97;transition-duration:60ms}
.btn:focus-visible,.nav-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* sheen (::before) and rim light (::after) */
.btn-solid::before,.nav-btn.solid::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
transform:translateX(-120%);opacity:0}
.btn-solid:hover::before,.nav-btn.solid:hover::before{animation:btn-sheen 720ms var(--ease) 60ms forwards}
@keyframes btn-sheen{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:1}}
.btn-solid::after,.nav-btn.solid::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
border-radius:inherit;padding:1.25px;
background:conic-gradient(from var(--rim-a),transparent 0 62%,rgba(255,255,255,.95) 78%,transparent 92%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
opacity:0;transition:opacity 300ms var(--ease)}
.btn-solid:hover::after,.nav-btn.solid:hover::after{opacity:1;animation:btn-rim 1.8s linear infinite}
@keyframes btn-rim{to{--rim-a:360deg}}
/* solid: v38 colours + bevel */
.btn-solid,.nav[data-past-hero] .nav-btn.solid{
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 45%),linear-gradient(90deg,#F90033,#FF3961);color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(120,0,25,.28),
0 1px 2px rgba(120,0,25,.18),0 10px 24px -10px rgba(249,0,51,.50)}
.btn-solid:hover,.nav[data-past-hero] .nav-btn.solid:hover{
background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%),linear-gradient(90deg,#FF0F44,#FF4E72);
box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(120,0,25,.28),
0 2px 4px rgba(120,0,25,.16),0 18px 34px -10px rgba(249,0,51,.58)}
.btn-solid:active,.nav[data-past-hero] .nav-btn.solid:active{
background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,0) 50%),linear-gradient(90deg,#E4002F,#F02F57);
box-shadow:inset 0 2px 6px rgba(120,0,25,.38),inset 0 1px 0 rgba(120,0,25,.20),
0 1px 2px rgba(120,0,25,.16),0 4px 10px -6px rgba(249,0,51,.40)}
/* release: overshoot + ring. --rp = ring colour, set per variant. */
.btn-solid,.nav[data-past-hero] .nav-btn.solid{--rp:249,0,51}
.nav-btn.solid{--rp:9,19,36}
.btn-quiet{--rp:9,19,36}
.is-released{animation:btn-spring 480ms cubic-bezier(.34,1.56,.64,1) both}
.is-released:hover{animation-name:btn-spring-hover}
@keyframes btn-spring{
0%{transform:translateY(1px) scale(.97);box-shadow:0 0 0 0 rgba(var(--rp),.42),0 1px 2px rgba(120,0,25,.16)}
40%{transform:translateY(-3px) scale(1.035)}
100%{transform:translateY(0) scale(1);box-shadow:0 0 0 14px rgba(var(--rp),0),0 10px 24px -10px rgba(var(--rp),.50)}}
@keyframes btn-spring-hover{
0%{transform:translateY(1px) scale(.97);box-shadow:0 0 0 0 rgba(var(--rp),.42),0 1px 2px rgba(120,0,25,.16)}
40%{transform:translateY(-3.5px) scale(1.04)}
100%{transform:translateY(-2px) scale(1.02);box-shadow:0 0 0 14px rgba(var(--rp),0),0 18px 34px -10px rgba(var(--rp),.58)}}
/* small solids (16.5px = normal text) keep the D6 pair, 4.99/4.64:1 on white */
.path .btn{font-size:16.5px;padding:14px 26px}
.btn-solid.btn-sm,.path .btn-solid{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 45%),linear-gradient(90deg,#E00030,#E31E42)}
.btn-solid.btn-sm:hover,.path .btn-solid:hover{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%),linear-gradient(90deg,#E8153F,#EA3556)}
.btn-solid.btn-sm:active,.path .btn-solid:active{background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,0) 50%),linear-gradient(90deg,#C9002B,#CF1A3B)}
/* nav CTA in the hero: ink, same mechanics, white rim light */
.nav-btn.solid{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 45%),var(--ink);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(9,19,36,.18),0 8px 20px -10px rgba(9,19,36,.45)}
.nav-btn.solid:hover{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 45%),#1B2740;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 4px rgba(9,19,36,.14),0 14px 30px -10px rgba(9,19,36,.45)}
.nav-btn.solid:active{background:#0B1528;box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 2px 6px -4px rgba(9,19,36,.4)}
/* quiet: lifts and sinks too, no sheen */
.btn-quiet{box-shadow:0 1px 2px rgba(9,19,36,.04),0 8px 20px -12px rgba(9,19,36,.18)}
.btn-quiet:hover{border-color:#B9C4D3;box-shadow:0 2px 4px rgba(9,19,36,.05),0 14px 30px -12px rgba(9,19,36,.22)}
.btn-quiet:active{background:#F4F6F9;box-shadow:inset 0 2px 5px rgba(9,19,36,.10)}
.btn-ghost,.btn-arrow{overflow:visible}
.btn-ghost:hover,.btn-arrow:hover,.btn-ghost:active,.btn-arrow:active{--lift:0px;--sc:1}
.mb-ctas .nav-btn{height:48px}
@media (prefers-reduced-motion:reduce){
.btn,.nav-btn,.btn svg,.nav-btn svg{transition:none;transform:none}
.btn::before,.btn::after,.nav-btn::before,.nav-btn::after,.is-released{animation:none!important}
}
/* text link */
.tlink{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:530;color:var(--ink)}
.tlink svg{width:14px;height:14px;transition:transform .18s var(--ease)}
.tlink:hover svg{transform:translateX(2px)}
.tlink.red{color:var(--red-deep)}
.arr-i{width:14px;height:14px}
/* ============ HERO — v45: centred copy, 100svh, sphere 60% above the fold line, recognitions docked on the line ============ */
/* the hero is one viewport tall (v38's rule). The copy sits at the top, .atom-slot takes the rest, and
the fold line (.bp) with the docked recognitions (.recog) sits 80px above the hero's bottom edge. The
sphere is sized off the slot in JS: top = slot top + 28, the line cuts it at 60% of its diameter
(cy + .2R), and its lower 40% blurs and fades out by the hero's bottom edge. */
.hero{position:relative;overflow:hidden;background:var(--paper);min-height:100svh;display:flex;flex-direction:column;padding:150px 0 0;text-align:center}
.hero-grid{display:flex;flex-direction:column;align-items:center;gap:0;flex:1 1 auto;width:100%}
.hero-copy{max-width:980px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.h1{
margin:0;
font-size:clamp(38px,4.4vw,64px);line-height:1.06;letter-spacing:-.028em;white-space:nowrap;
font-weight:500;color:var(--ink);
}
.sub{margin:20px auto 0;max-width:62ch;font-size:clamp(14px,1.2vw,16.5px);line-height:1.65;color:var(--ink-2)}
.cta-row{display:flex;justify-content:center;align-items:center;gap:12px;margin:36px 0 0;flex-wrap:wrap}
.hero .cta-row{justify-content:center;margin-top:30px}
/* the slot: everything under the copy down to the hero's bottom edge. min-height keeps the sphere from
collapsing on short viewports (the hero then grows past 100svh). */
.atom-slot{width:100%;flex:1 1 auto;min-height:380px;margin-top:0}
/* the fold line — v38 round 3: a hairline 80px above the hero's bottom, "+" crop marks on the rails, and
the line dissolves under the docked recognitions (50% ± --recog-half, --recog-fade run either side) so
the marks sit in a gap the line opens for them. rgba of the line colour, not `transparent`, so
non-premultiplied interpolators can't drift grey. */
.bp{position:absolute;left:0;right:0;bottom:62px;height:1px;z-index:2;pointer-events:none;
--recog-half:410px;--recog-fade:120px;
background:linear-gradient(to right,
var(--line) 0,
var(--line) calc(50% - var(--recog-half) - var(--recog-fade)),
rgba(226,232,240,0) calc(50% - var(--recog-half)),
rgba(226,232,240,0) calc(50% + var(--recog-half)),
var(--line) calc(50% + var(--recog-half) + var(--recog-fade)),
var(--line) 100%)}
.bp .cm{position:absolute;top:-5px;width:11px;height:11px;color:rgba(9,19,36,.30)}
.bp .cm-l{left:max(20px,calc(50% - 625px))}
.bp .cm-r{right:max(20px,calc(50% - 625px))}
.bp .cm svg{display:block;width:11px;height:11px;stroke:currentColor;stroke-width:1}
/* the recognitions, centred ON the line: the row's centre line is the .bp line (bottom 62 = 33 + 58/2).
26 Aug pm: row scaled 1.4x (marks 15/16/42 -> 21/22/58, gap 28, label 15px) and the line dropped 80 -> 62. */
.recog{position:absolute;left:50%;bottom:47px;transform:translateX(-50%);z-index:3;margin:0;
display:flex;align-items:center;justify-content:center;gap:28px;white-space:nowrap}
.recog .meta{color:rgba(0,0,0,.45);font-size:15px} /* recog round: same grey as the marks (brightness(0) at .45) */
/* v42 (D9): hero-v38's recognitions grammar — five marks, one colour via brightness(0),
the ECSO lockup last and held at 42px (it smudges under ~40px at 1:1). */
.recog .r-mark{display:block}
.recog .r-mark svg{display:block;height:21px;width:auto;filter:brightness(0);opacity:.45;transition:opacity var(--dur-micro)}
.recog .r-mark:hover svg{opacity:.7}
.recog .r-gartner svg{height:22px}
.recog .r-gigaom svg{height:21px}
.recog .r-idc svg{height:21px}
.recog .r-qks svg{height:21px}
.recog .r-ecso svg{height:29px} /* recog round (26 Aug eve): viewBox cut to the top lockup (DIGITAL SME plate dropped), helmet keeps its 58px-era size */
/* the reveal must not move the row off the line while the transform runs: translateX only */
.js .recog.rv{transform:translate(-50%,12px)}
.js .recog.rv.in{transform:translate(-50%,0)}
/* the blurred colour field behind the right half — the one from the footer family */
/* v42 (D7): the colour field fades out before .hero's overflow clip can cut it.
v42 mesh round (26 Aug pm): the field is v43's coral one (#FF6A4E / #FF5A48 at .22 / .12); the
dark #A31120 blob is gone. Measured in v43: a brand-red blob at low alpha over this bluish paper
composites magenta, a coral one lands on the brand hue. */
.hero-aura{position:absolute;inset:0;pointer-events:none;-webkit-mask:linear-gradient(180deg,#000 62%,rgba(0,0,0,.45) 100%);mask:linear-gradient(180deg,#000 62%,rgba(0,0,0,.45) 100%)}
.hero-aura i{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;display:none} /* 26 Aug eve: Simeon dropped both colour blobs; the dot mesh (::after) stays */
.hero-aura .a1{width:680px;height:680px;right:-100px;top:-60px;opacity:.22;
background:radial-gradient(circle,#FF6A4E,transparent 66%);animation:drift1 24s ease-in-out infinite alternate}
/* bg round (26 Aug eve): a2 moved to the bottom-left corner to mirror a1 top-right; .hero::after's white seam still owns the last 260px */
.hero-aura .a2{width:720px;height:720px;left:-180px;bottom:-140px;opacity:.26;
background:radial-gradient(circle,#FF5A48,transparent 66%);animation:drift2 30s ease-in-out infinite alternate}
.hero-aura::after{
content:"";position:absolute;inset:0;
background-image:radial-gradient(rgba(9,19,36,.4) .7px,transparent 1px);
background-size:3px 3px;
/* bg round (26 Aug eve): the dot mesh now spans the whole hero (was masked to the right 62%); alpha dropped .12 -> .085 so it stays under notice */
opacity:.085;
}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(-110px,80px) scale(1.14)}}
@keyframes drift2{from{transform:translate(0,0) scale(.96)}to{transform:translate(90px,-70px) scale(1.1)}}
@keyframes drift3{from{transform:translate(0,0) scale(1.08)}to{transform:translate(-70px,-90px) scale(.94)}}
.hero .wrap{position:relative;z-index:1}
/* seam fix (26 Aug): the hero ground fades to white over its last 260px so S2 (white) continues it with no step.
Sits above the canvases and aura, below the fold line (.bp z2) and the recognitions (z3). */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:260px;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
/* the canvas spans the whole hero so the cables can leave from the corners; .atom-slot only reserves the space */
.atom-stage{position:absolute;inset:0;z-index:0;pointer-events:none;margin:0}
.atom-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* three stops, set from JS: crisp to --fade0 (just above the core's centre), crossfading to the blurred twin
by --fade1 (the fold line), the blur fading out to --fade2 (the hero's bottom edge) */
.atom-stage{--fade0:60%;--fade1:80%;--fade2:100%}
#atom{-webkit-mask:linear-gradient(180deg,#000 var(--fade0),transparent var(--fade1));mask:linear-gradient(180deg,#000 var(--fade0),transparent var(--fade1))}
#atom-blur{filter:blur(16px);-webkit-mask:linear-gradient(180deg,transparent var(--fade0),rgba(0,0,0,.7) var(--fade1),transparent var(--fade2));mask:linear-gradient(180deg,transparent var(--fade0),rgba(0,0,0,.7) var(--fade1),transparent var(--fade2))}
/* S2 head, centred to match the hero */
.sec-head.center{text-align:center}
.sec-head.center .lead{margin:18px auto 0;max-width:62ch}
/* ============ BDA — stage columns, loop arc, proof band, stage sections, new-slot ============ */
/* Stage accent, one place. Set on any element that carries data-stage, so the hero
columns and the body sections cannot drift out of agreement. */
[data-stage]{--sc:var(--ink-3)}
[data-stage="before"]{--sc:#0E7490}
[data-stage="during"]{--sc:#D9202E}
[data-stage="after"]{--sc:#15803D}
/* ---- PCB hero (9 Sep 2026, Simeon, round 1): ONE screen again (v45's 100svh), the copy on top and the board
under it, full-bleed on the hero's own paper. The board is a static svg from _hp/pcb_hero.py; the three
stage columns and their sequencer are gone. ---- */
.hero{min-height:100svh;padding:118px 0 40px;justify-content:center}
.hero .wrap{max-width:1420px;flex:0 0 auto}
.hero .h1{white-space:normal;font-size:clamp(30px,3.3vw,48px);letter-spacing:-.024em}
.hero .h1 em{font-style:normal;color:inherit} /* KC6 made it red; 8 Sep typography: red is for buttons only */
.hero .sub{margin-top:14px;font-size:clamp(15px,1.2vw,17.5px);color:var(--ink-2);max-width:52ch}
.hero .cta-row{margin-top:24px}
.hero-copy{max-width:1100px}
.hero-grid{gap:0;justify-content:flex-start}
.hero .btn{font-size:17px;padding:15px 30px}
/* the H1 gradient off Figma node 199:7409 (#93A4AC -> #424C5E -> #091324, handles (.84,1.00) -> (.09,.11) of the text box), projected
onto the H1's measured 548.2x100.7 box at 1440. The light stop is clamped from #93A4AC (2.34:1 on paper) to #808F9A (3.02:1),
Simeon's D3: large text needs 3:1. */
.hero .h1{background-image:linear-gradient(102.4deg,#808F9A 8.7%,#424C5E 46.5%,#091324 84.3%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* the slot: as wide as the viewport up to 1600 (so the board never scales past 1:1), height from the board's aspect
but never more than what the screen leaves under the copy; the svg letterboxes inside (xMidYMid meet). The taps
are drawn 600 past the viewBox and overflow:visible lets them reach the frame at any width; .hero clips them. */
.pcb-slot{position:relative;z-index:2;width:100%;max-width:1600px;margin:40px auto 0;aspect-ratio:1600/524;max-height:calc(100svh - 420px);min-height:260px;contain:layout paint}
.pcb-slot .pcb{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
/* D1: under 1220px the board keeps its 1220px design width and scrolls inside the slot (the tab strip's precedent
at 390); JS_PCB centres the chip. The page itself never scrolls sideways. 1220/1600 = 0.7625, which is the
same rendered scale round 1 had at 1100/1440. The hover layer is off here: 21 targets on a board you have to
drag sideways is a bad touch UX, and the card would be inside the scrolling box. */
@media (max-width:1219px){
.pcb-slot{aspect-ratio:auto;max-height:none;min-height:0;max-width:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pcb-slot::-webkit-scrollbar{display:none}
.pcb-slot .pcb{position:static;width:1220px;height:auto}
.pcb-hits{display:none}
}
/* the board's own grammar: the tab strip's trace values on the hero's paper. r2 lightens the neutrals
toward the reference file (~/Downloads/index.html: wire #EEEEEE, joint #E1E3E7, pin #B7C2D1) but stops
at #D7DDE7 -- #EEEEEE measures a luminance drop of 3.2 against the paper after the 0.90 downscale and
FAILS the gate's pixel test, which needs 4. One accent, declared once. */
.pcb{--pcb-acc:#D9202E}
.pcb text{font-family:"ImperumSans",system-ui,sans-serif}
.pcb .lbl{fill:var(--ink);font-weight:500}
.pcb .ico{fill:none;stroke:var(--ink-2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pcb .cap{fill:#fff;stroke:var(--line);stroke-width:1}
.pcb .pillr{fill:#fff;stroke:var(--line-strong);stroke-width:1} /* the two anchors keep the heavier edge */
.pcb .chipr{fill:url(#pcb-chip)}
.pcb .pillt{fill:var(--ink);font-weight:700}
.pcb .pills{fill:var(--ink-2);font-weight:500}
.pcb .chipt{fill:#fff;font-weight:700}
.pcb .chips{fill:#B9C0CC;font-weight:500}
.pcb .tr{fill:none;stroke:#D7DDE7;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.pcb .tr.acc{stroke:var(--pcb-acc);stroke-width:1.5}
.pcb .via{fill:none;stroke:#CBD3DF;stroke-width:1}
.pcb .via.acc{stroke:var(--pcb-acc)}
.pcb .pad,.pcb .dot{fill:#CBD3DF}
.pcb .pad.acc{fill:var(--pcb-acc)}
.pcb .pin{fill:#B7C2D1}
.pcb .pin.acc{fill:var(--pcb-acc)}
/* ---- the animated layer. EVERY node the JS creates carries .acc, so the gate's "nothing red outside
the .acc set" check holds even if it measures mid-flight; and none of them reuses a counted class
(tr / via / pad / dot / pin), so the element counts are untouched too. ---- */
.pcb .pk{fill:none;stroke:var(--pcb-acc);stroke-linecap:round}
.pcb .pkh{fill:var(--pcb-acc)}
.pcb .rdot{fill:#A9B4C6} /* the quiet net's flow: a shade under the pins, never red */
.pcb .rdot.acc{fill:var(--pcb-acc)} /* only the four crimson traces carry red flow */
.pcb .ring,.pcb .rip,.pcb .hl{fill:none;stroke:var(--pcb-acc);stroke-linecap:round}
.pcb .tr.lit{stroke:var(--ink-2);stroke-width:1.4} /* hover: darken, never redden --
a red path.tr without .acc trips the gate's stray-red rule, and adding .acc would make the
crimson-route count 5 instead of 4. The capsule's own border carries the accent instead. */
.pcb-fx,.pcb-fx2{will-change:opacity}
/* ---- the hover layer: 21 real buttons over the board, sized from the svg by JS ---- */
.pcb-hits{position:absolute;inset:0;pointer-events:none}
.pcb-hit{position:absolute;margin:0;padding:0;border:0;background:none;border-radius:12px;
cursor:pointer;pointer-events:auto;-webkit-appearance:none;appearance:none}
.pcb-hit:focus{outline:none}
.pcb-hit:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.pcb-hit .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* ---- the card. A POPOVER, not an accordion: opacity + transform + visibility only, no height and no
grid track. hero-v45.html:4555 records why -- a 0fr->1fr track was rejected twice because WebKit sizes
the grid container taller than the collapsing track. A popover has no reason to reflow the page. ---- */
.pcb-card{position:absolute;z-index:6;left:0;top:0;width:max-content;max-width:268px;text-align:left;
background:var(--surface-1);border:1px solid var(--line);border-radius:12px;padding:11px 14px 12px;
box-shadow:0 2px 4px -2px rgba(9,19,36,.08),0 18px 44px -20px rgba(9,19,36,.22);
opacity:0;visibility:hidden;pointer-events:none;transform:translateY(var(--pc-dy,-4px))}
.pcb-card.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.pcb-card .pc-k{margin:0 0 3px;font-size:11.5px;font-weight:600;letter-spacing:.055em;color:var(--ink-3)}
.pcb-card .pc-d{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.pcb-card .pc-l{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:12.5px;
font-weight:600;color:var(--red-deep);text-decoration:none}
.pcb-card .pc-l i{font-style:normal;transition:transform .2s var(--ease-snap)}
.pcb-card .pc-l:hover i{transform:translateX(3px)}
.pcb-card .pc-l:hover span{text-decoration:underline}
.pcb-card [hidden]{display:none}
/* focal + reciprocal dim, the v31 grammar (hero-v31.html:1281,1289): CONTENT only, never the whole
plate -- the plates carry a drop-shadow filter and fading the group would fade the shadow with it. */
.pcb .capg.is-on rect.cap{stroke:var(--pcb-acc)}
.pcb.is-focused .capg:not(.is-on) rect.cap,
.pcb.is-focused .capg:not(.is-on) text,
.pcb.is-focused .capg:not(.is-on) .ico{opacity:.5}
@media (prefers-reduced-motion:no-preference){
.pcb-card{transition:opacity 160ms var(--ease-snap),transform 220ms var(--ease-out),visibility 0s 220ms}
.pcb-card.is-open{transition:opacity 160ms var(--ease-snap),transform 220ms var(--ease-out),visibility 0s}
.pcb-card-in>*{opacity:0;transform:translateY(4px);
transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
.pcb-card.is-open .pcb-card-in>*{opacity:1;transform:none}
/* the delays sit on the OPEN selector ONLY, so closing snaps with no reverse lag (hero-v31.html:1515) */
.pcb-card.is-open .pcb-card-in>:nth-child(1){transition-delay:60ms}
.pcb-card.is-open .pcb-card-in>:nth-child(2){transition-delay:120ms}
.pcb-card.is-open .pcb-card-in>:nth-child(3){transition-delay:180ms}
.pcb .capg rect.cap{transition:stroke 150ms var(--ease-snap)}
.pcb .capg rect.cap,.pcb .capg text,.pcb .capg .ico{transition:opacity var(--dur-micro),stroke 150ms var(--ease-snap)}
}
/* ---- the proof band: RECOGNIZED BY + TRUSTED BY, one grammar.
8 Sep (Simeon): the band is a full-width table, not a centred block. The labels sit on the
same x as the "Before the attack" heading text below (.wrap 32 + .stgsec-side border 2 +
padding 20 = 54px), the marks of BOTH rows spread space-between over one shared track that
ends at the wrap's right edge, so the first and last marks of the two rows line up and
RECOGNIZED BY's five marks take a wider gap than TRUSTED BY's eight. Nothing wraps above
1080px: Infrasis stays on the TRUSTED BY line. ---- */
/* Equal vertical spacing keeps recognition text and logos centered between the rules. */
.sec.pfband{padding:64px 0}
@media(max-width:840px){.sec.pfband{padding:80px 0}}
.pfband .wrap{display:grid;grid-template-columns:minmax(0,1fr);row-gap:30px;padding-left:32px}
/* .recog ships absolutely docked on the hero fold line; here it is a static row */
.pfband .recog{position:static;transform:none;display:flex;flex-wrap:nowrap;
justify-content:flex-start;align-items:center;gap:0 30px;white-space:normal;margin:0}
.pfband .recog .meta{flex:0 0 152px}
.pfband .marks{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;
justify-content:space-between;align-items:center}
.js .pfband .recog.rv{transform:translateY(10px)}
.js .pfband .recog.rv.in{transform:none}
.pfband .t-mark{display:block}
.pfband .t-mark img{display:block;max-height:32px;max-width:150px;width:auto;height:auto;
filter:brightness(0);opacity:.45;transition:opacity var(--dur-micro)}
.pfband .t-mark:hover img{opacity:.7}
/* ---- the three body stage sections: sticky side, module rows ---- */
.stgsec-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;align-items:start}
.stgsec-side{position:sticky;top:118px;padding-left:20px;border-left:2px solid var(--sc)}
.stgsec-side .h2{font-size:clamp(26px,2.6vw,36px)}
.stgsec-side .lead{margin-top:14px;font-size:16px;max-width:44ch}
.stgsec-side .tlink{margin-top:22px;display:inline-flex}
.tlink.red,.tlink.red:hover{color:var(--ink)} /* 8 Sep: red is for buttons only */
/* 8 Sep later (Simeon): in the panel section the Explore links and the nav bar take the button's gradient */
.pnsec .tlink.red,.pnsec .tlink.red:hover{background:linear-gradient(90deg,#E00030,#E31E42);-webkit-background-clip:text;background-clip:text;color:transparent}
.pnsec .tlink.red svg{color:#E31E42}
.stgsec-rows{margin:0;padding:0;list-style:none;counter-reset:mrow}
.stgsec-rows>li+li{border-top:1px solid var(--line)} /* dividers only, no rule above the first or below the last (Simeon, 8 Sep) */
.mrow{
display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);gap:24px;
padding:18px 4px;text-decoration:none;color:inherit;
transition:background-color .16s linear;
}
a.mrow:hover{background:var(--surface-0)}
.mrow-h{min-width:0}
.mrow-h b{display:block;font-size:16.5px;font-weight:590;letter-spacing:-.014em;color:var(--ink);line-height:1.28}
a.mrow:hover .mrow-h b{color:var(--red-deep)}
.mrow-h em{
display:block;margin-top:5px;font-style:normal;
font-size:12.5px;color:var(--ink-3);font-weight:500}
.mrow-c{margin:0;font-size:14.8px;line-height:1.62;color:var(--ink-2);min-width:0}
.mrow-c .arr-i{margin-left:6px;vertical-align:-2px;color:var(--red-deep);opacity:0;
transition:opacity .16s linear,transform .26s var(--ease)}
a.mrow:hover .mrow-c .arr-i{opacity:1;transform:translateX(3px)}
span.mrow{cursor:default}
span.mrow .mrow-h b{color:var(--ink-3)}
span.mrow .mrow-c{color:var(--ink-3);opacity:.82}
/* the loop callout that closes the AFTER section */
.loopcard{
margin:44px 0 0;padding:22px 26px;border:1px solid var(--line);border-radius:16px;
background:var(--surface-1);box-shadow:var(--sh-1);
display:flex;gap:16px;align-items:flex-start;
}
.loopcard svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--sc)}
.loopcard p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.loopcard b{color:var(--ink);font-weight:590}
/* ---- the dynamic new-product slot, Attio dark-section rebuild (9 Sep, Simeon: "follow Attio's design
principles... the lines connected everywhere properly"). THREE parts on one full-bleed band:
(1) the flag + the product NAME, then the radar DOME whose rim runs rail corner to rail corner;
(2) the "Signals" block: inside the rails, two columns split by a hairline, label + two-tone heading +
ghost link + an auto-advancing list with a 1px progress line, one dark scene per item on the right;
(3) a bordered closer card with the lead and the CTA.
Band #0C1019: Attio's ground is #0F0F0F; ours keeps a blue cast at the same depth (D1, 9 Sep). ---- */
.sec.newpsec{--band:#0C1019;--hair:rgba(246,247,251,.10);padding:0;position:relative;z-index:2;background:var(--band);overflow-x:clip}
/* 9 Sep r2c (Simeon: "we don't have lines on the left"). #frame's two rails are `#frame::before/::after`
at z-index 0. A section that is position:static paints its background BELOW positioned content, so the
rails show through it - which is why every stage band has them. But a section that is position:relative
with z-index:auto paints in the SAME z-index-0 group, after the pseudo in tree order, so its opaque
background covers the rails. .newpsec and .findark already worked around that by redrawing their own;
.qt and .sc did not, and the rails died across both. Lifting the rails one level fixes every such
section at once, and still leaves them under the two dark bands (z-index 2) that redraw their own. */
div#frame::before,div#frame::after{z-index:1}
/* the page's two frame rails, redrawn inside the band so they do not vanish across it (Simeon: "nedostigaat linii") */
.sec.newpsec::before,.sec.newpsec::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--hair);pointer-events:none;z-index:3}
.sec.newpsec::before{left:max(20px,calc(50% - 620px))}
.sec.newpsec::after{left:min(calc(100% - 21px),calc(50% + 620px))}
div.xrule{z-index:3} /* the + markers ride ABOVE the dark band (Simeon, 8 Sep) */
/* 8 Sep (Simeon): the glass nav goes muddy over the dark band; JS_BENTO adds .over-dark while the pill overlaps .newpsec */
.nav.over-dark::before{background:rgba(255,255,255,.97);box-shadow:inset 0 0 0 1px rgba(9,19,36,.10),0 10px 30px rgba(0,0,0,.35)}
/* ---- part 1: flag + name, then the dome ---- */
.newp{position:relative;padding:72px 0 0;border-radius:0;background:var(--band);color:#F6F7FB;overflow:hidden} /* overflow: clips the disc at the horizon */
.newp-body{padding:0 max(20px,calc(50% - 620px))} /* the dome box IS the rail span, so the rim ends land on the rails at every width */
.newp-head{max-width:820px;margin:0 auto;padding:0 40px;text-align:center;position:relative;z-index:1}
.newp-flag{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12.5px;color:rgba(246,247,251,.62);font-weight:500}
.newp-flag .pn-glyph{color:var(--red)} /* the BEFORE/DURING ring glyph, in red, replaces the static dot */
/* the name is the whole heading (Simeon, 9 Sep: "NEW IN IMPERUM - NAME and nothing else"). 64 at 1440 = 1.5x the site H2 cap; 78 was "pregolem" */
.newp .newp-name{margin:16px 0 0;max-width:none;color:#fff;font-weight:400;font-size:clamp(40px,4.4vw,64px);line-height:1.02;letter-spacing:-.024em;text-wrap:balance}
/* 9 Sep round 2 (Simeon: the red-on-red ghost "is really ugly"): both band CTAs are the base sheet's
.btn-outline - transparent fill, WHITE label, a white .32 ring that lifts to .55 on hover. White on
#0C1019 is 18:1; the red gradient stays on the accent lines only. The arrow inherits currentColor,
so it paints (background-clip:text never painted an svg stroke) and gets .btn:hover svg's nudge. */
/* Two base rules have to be undone here. `.btn-quiet,.btn-outline{border:1px solid transparent}`
wipes .btn-outline's own ring, and `.btn-quiet::before,.btn-outline::before` paints the red
gradient ring back on - which IS the thing Simeon rejected. Both are overridden at 0,2,0. */
.newpsec .btn-outline::before{display:none}
.newpsec .btn-outline{border:1px solid rgba(246,247,251,.32);background:transparent;color:#fff}
.newpsec .btn-outline:hover{border-color:rgba(246,247,251,.58);background:rgba(246,247,251,.06)}
.newpsec .btn-outline:focus-visible{outline:2px solid #fff;outline-offset:3px}
.newpsec .btn-outline .arr-i{width:14px;height:14px}
/* the dome. viewBox 1200 x HY, the disc centre below the fold so the horizon at y HY is exactly the 1200 chord:
the rim's two ends are the box's two bottom corners = the rails. aspect-ratio + sweep origin come from
newest_css() so they can never drift from NEWP_CX/CY/R. */
.newp-viz{position:relative;width:100%;margin:12px 0 0;min-width:0;clip-path:inset(-140px 0 0 0)} /* the glow may rise above the apex, never into the side margins */
.newp-viz svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.newp-viz text{fill:rgba(246,247,251,.78);font-weight:500}
.newp-viz .nrn{stroke:rgba(246,247,251,.05);stroke-width:1} /* Attio's vertical rain behind the dome */
.newp-viz .rr{fill:none;stroke:rgba(246,247,251,.12);stroke-width:1}
.newp-viz .rs{stroke:rgba(246,247,251,.07);stroke-width:1}
.newp-viz .rim{fill:none;stroke:url(#nrim);stroke-width:1.6;stroke-linecap:round}
/* the glow sits on a warm dark under-stroke, never straight on the navy: red at low alpha over
navy composites violet, so the fade passes through warm brown instead */
.newp-viz .rim-u{fill:none;stroke:url(#nrimu);stroke-width:26;filter:url(#nblur2);opacity:.9}
.newp-viz .rim-g{fill:none;stroke:url(#nrim);stroke-width:7;filter:url(#nblur1);opacity:.72}
.newp-viz .nsweep{transform-box:view-box;animation:nsweep 12s linear infinite}
.newp-viz .nsweep path{fill:url(#nwedge)}
.newp-viz .nsweep line{stroke:var(--red);stroke-width:1.4;stroke-linecap:round}
@keyframes nsweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.newp-viz .nb{fill:rgba(246,247,251,.32);transform-box:fill-box;transform-origin:center;animation:12s var(--ease) infinite}
.newp-viz .nb.hot{fill:rgba(246,247,251,.32)}
.newp-viz .nl{opacity:0;animation:12s var(--ease) infinite}
.newp-viz .nl .c{font-size:11px}
.newp-viz .nl .v{font-size:10px;fill:rgba(246,247,251,.5)}
.newp-viz .nl.hot .c{fill:var(--red)}
.newp-viz .nl .tick{stroke:rgba(246,247,251,.28);stroke-width:1}
.newp-viz .nl.hot .tick{stroke:rgba(239,51,65,.7)}
/* ---- part 2: the "Signals" block. Side hairlines ON the rails, top/bottom rules viewport edge to edge
(the top one is the horizon carried past the rim's ends), a vertical divider at the midpoint. ---- */
.nf-wrap{padding:0 max(20px,calc(50% - 620px))}
.nf{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-left:1px solid var(--hair);border-right:1px solid var(--hair)}
.nf::before,.nf::after{content:"";position:absolute;left:-100vw;right:-100vw;height:1px;background:var(--hair);pointer-events:none}
.nf::before{top:0}.nf::after{bottom:0}
.nf-copy{min-width:0;padding:64px 48px 56px 40px}
.nf-media{position:relative;display:grid;min-width:0;align-items:center;padding:40px 24px;border-left:1px solid var(--hair)}
.nf-label{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:12.5px;font-weight:500;color:rgba(246,247,251,.55)}
.nf-label .pn-glyph{color:rgba(246,247,251,.55)}
.nf-h2{margin:18px 0 0;max-width:520px;font-size:clamp(28px,2.9vw,40px);line-height:1.12;letter-spacing:-.02em;font-weight:400;color:#fff;text-wrap:balance}
.nf-h2 b{font-weight:500}
.nf-h2 span{display:block;color:rgba(246,247,251,.5);font-family:"ImperumSans",system-ui,sans-serif;letter-spacing:-.015em}
.nf-more{margin-top:22px;font-size:13.5px;padding:9px 16px;gap:8px}
.nf-list{list-style:none;margin:44px 0 0;padding:0}
.nf-item{position:relative;border-top:1px solid var(--hair)}
.nf-item:last-child{border-bottom:1px solid var(--hair)}
.nf-t{appearance:none;display:block;width:100%;text-align:left;background:none;border:0;margin:0;padding:18px 0;font:inherit;font-size:16.5px;font-weight:500;letter-spacing:-.01em;
color:rgba(246,247,251,.5);cursor:pointer;transition:color .25s var(--ease)}
.nf-item.is-on .nf-t,.nf-t:hover{color:#fff}
.nf-t:focus-visible{outline:2px solid #E31E42;outline-offset:3px;border-radius:4px}
/* open/close by height: never a 0fr/1fr grid track (the FAQ trap). --nf-open is the TALLEST
description, measured by JS_NEWF, so every item opens to the same height and the block never
moves (9 Sep r2: max-height is a cap, so the four items were opening 45px apart). */
.nf-d{height:0;overflow:hidden;transition:height .45s var(--ease)}
.nf-item.is-on .nf-d{height:var(--nf-open,96px)}
.nf-desc{margin:0 0 22px;max-width:46ch;font-size:14.5px;line-height:1.58;color:rgba(246,247,251,.62);opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.nf-item.is-on .nf-desc{opacity:1;transform:none;transition-delay:.12s}
/* the progress line IS the clock (JS_NEWF advances on its animationend); rest = the hairline, fill #8F99A8 as measured on attio.com */
.nf-bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--hair);overflow:hidden;pointer-events:none}
.nf-bar i{position:absolute;inset:0;background:#8F99A8;transform:scaleX(0);transform-origin:left center}
.nf-item.is-on .nf-bar i{animation:nfbar var(--nf-step,7s) linear both}
@keyframes nfbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.nf:not(.on) .nf-bar i{animation-play-state:paused}
.nf-fig{grid-area:1/1;margin:0;min-width:0;display:flex;align-items:center;justify-content:center;
opacity:0;transform:translateY(6px);visibility:hidden;
transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s}
.nf-fig.is-on{opacity:1;transform:none;visibility:visible;transition:opacity .4s var(--ease) .1s,transform .4s var(--ease) .1s,visibility 0s}
.nf-fig .pn-svg{width:100%;max-width:620px;height:auto}
.nf-fig:not(.is-on) .pn-svg *,.nf:not(.on) .pn-svg *{animation-play-state:paused!important}
/* ---- part 3: the closer card ---- */
/* 9 Sep r2c (Simeon: "remove these 2 parts - top and bottom since they don't make sense"): NO dead
band above or below the card. It sits flush between the features block's bottom rule and the end of
the dark band. Any vertical space here has to be padding, never a margin on .nc - a margin collapses
out through this wrapper and escapes the section entirely. */
.nc-wrap{padding:0 max(20px,calc(50% - 620px))}
/* 9 Sep r2b (Simeon: "make this full height ... don't half it"): the card is TALL and the field
covers all of it. The copy is laid top-to-bottom - lead at the top, CTA at the bottom - so the
text fills the height too instead of clumping in the middle of an empty box. */
.nc{margin:0;position:relative;overflow:hidden;min-height:300px;display:grid;grid-template-columns:minmax(0,1fr);
align-content:stretch;padding:48px;border:1px solid rgba(246,247,251,.12);border-radius:16px}
.nc-copy{position:relative;z-index:1;max-width:660px;display:flex;flex-direction:column;justify-content:space-between}
.nc-lead{margin:0;max-width:44ch;font-size:clamp(18px,1.55vw,22px);line-height:1.42;letter-spacing:-.012em;color:#fff;font-weight:500}
.nc-lead span{color:rgba(246,247,251,.55);font-weight:400}
.nc-cta{margin:28px 0 0} /* the floor when the card is shorter than its content; space-between wins above it */
.nc .btn{font-size:16px;padding:14px 26px}
/* the dot field is a BLEEDING layer, not a grid track: it runs to the card's top, right and bottom
edges (clipped by the 16px radius) so the block is filled, and fades out to the left so the 88px
gutter between the copy and the first dot column stops reading as a hole. */
.nc-fig{position:absolute;inset:0;width:100%;margin:0;min-width:0;pointer-events:none}
.nc-grid{display:block;width:100%;height:100%}
/* TRAP: a