/* ---- fonts · fonts-DSN-v1.1 (md5 0812e4f7…) embedded as data URIs ---- */
@font-face{font-family:'Archivo';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/archivo-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/archivo-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/archivo-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:300;font-style:normal;font-display:swap;src:url(fonts/hanken-grotesk-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/hanken-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/hanken-grotesk-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/hanken-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}

/* ---- tokens · DS-v4.2.6 canon values · pinned md5 548eef5f75cc995ca14660758caf3bc2
       (39,332 bytes · 566 lines) · embedded from Spike's transport zip, not from a
       description. The site is the editorial volume. ---- */
:root{
  --ink:#0F0D2E; --ink-2:#37354D; --ink-3:#5D5A69; --ink-4:#8C8996; --ink-5:#B4B1BD;
  --paper:#FFFFFF; --wash:#F7F7F9; --wash-2:#F1F1F4;
  /* DSN R1 · lines darkened in v4.2.6. RULED 13 Sep: KEEP ALL THREE. They hold one
     value today and three jobs — --line structure, --line-2 grouping, --line-3
     controls. A token is a job, not a number. No merge, no rename; all three are
     declared explicitly here, never inherited. */
  --line:#D8D7DD; --line-2:#E7E6EA; --line-3:#D8D7DD;
  --chrome:#0F0D2E; --chrome-2:#1B1839; --chrome-ink:#F3F1EE; --chrome-dim:#B9B6C6; --chrome-mut:#8E8BA8; --chrome-line:rgba(255,255,255,.09);
  --brass:#9A7233; --brass-2:#B08A4A;
  /* --brass-ink is SITE's value, adopted into DS-v4.2.6. Dark ground takes #C29A55;
     the site has no brass on a dark ground today, so only the light value is used. */
  --brass-ink:#8F6A2E;
  --good:#166B53; --warn:#8A5D14; --bad:#A32D26; --info:#1E5390;
  --ai:#5A54CC; --ai-deep:#4A44B8; --ai-line:#D6D0F8; --ai-ink:#4A44B8; --ai-ink-dark:#B3ADF4;
  --ai-on-ink:#8F88E8;
  --ai-grad:linear-gradient(90deg,#C9C4F5,#5A54CC);
  /* DS-v4.2.5 · S2 elevation · S3 answer speed · D-7 the door · D-8 selection · S4 chart trio */
  --t-1:120ms ease-out;
  --elev-1:0 10px 30px -12px rgba(15,13,46,.22);
  --door:#E4EBF3; --door-line:#B7C6D6; --door-ink:#2D3E50; --door-hov:#D7E1ED; --door-line-hov:#A5B8CB;
  --select:#E7E5EF; --select-line:#C6C2D4;
  --c1:#31659C; --c2:#B07314; --c3:#7A4E8E;
  /* mono label register, DS-v4.2.5 line 160. Declared so the walkthrough component
     takes the TOKEN, not its literal fallback — DSN v1.4/v1.5: the file wins. */
  --fs-label:9.5px; --fs-label-2:10.5px;
  /* R-C3, 8 Sep. Six text styles on Home measured below WCAG AA — ink-4 and ink-5
     on paper, worst 2.11:1 at 8px. The ERP lane's answer is canon and this follows it:
     INK-4 AND INK-5 KEEP BORDERS AND FILLS; TEXT MOVES TO INK-3. */
  --display:'Archivo',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* site-local (SITE lane's own; not canon names) */
  --site-nav:72px; --site-wrap:1360px;
  --site-shadow:0 34px 70px -40px rgba(15,13,46,.35);
  --site-shadow-deep:0 70px 120px -50px rgba(0,0,0,.8);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;font-size:15px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-width:var(--site-wrap);margin:0 auto;padding:0 76px}
@media(max-width:900px){.wrap{padding:0 24px}}
.mono{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.site-display{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.02}
.site-display .pay{color:inherit}
.site-display .stop{color:var(--ai)}
.site-display.on-dark .stop{color:var(--ai-ink-dark)}
/* the signature: a 3px gradient hairline under the hero headline — the one place violet is drawn as a line */
/* R-C ruling, 8 Sep: the hero accent takes the width of the headline, not a fixed 96px.
   Measured from the headline's own longest rendered line at runtime, so it holds at every
   width and through a re-wrap. 96px stays as the pre-script value so nothing jumps. */
.ds-ai-hairline{display:block;width:96px;height:3px;background:var(--ai-grad);margin-top:26px;transition:width .3s cubic-bezier(.2,.7,.2,1)}
/* kicker: hairline + mono word (CRM landing grammar) */
.kick{display:flex;align-items:center;gap:14px;color:var(--ink-3)}
.kick .rule{width:24px;height:1px;background:currentColor;opacity:.6}
.kick.on-dark{color:var(--chrome-dim)}

/* ---- buttons · command grammar: ink on paper, paper on ink ---- */
.site-btn{display:inline-flex;align-items:center;gap:10px;padding:0 22px;height:46px;font-family:var(--body);font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .2s,color .2s;line-height:1;white-space:nowrap}
.site-btn--ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.site-btn--ink:hover{background:var(--chrome-2);transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(15,13,46,.6)}
.site-btn--paper{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.site-btn--paper:hover{transform:translateY(-2px);box-shadow:0 24px 44px -18px rgba(0,0,0,.75)}
.site-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.site-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.site-btn--ghost-ink{background:transparent;color:var(--ink);border-color:var(--ink)}
.site-btn--ghost-ink:hover{background:var(--wash)}
.site-btn--sm{height:38px;padding:0 16px;font-size:13.5px}
.r{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.r.in{opacity:1;transform:none}

/* ---- nav · ink bar, the product's own chrome ---- */
/* NAV · three states, 16 Sep. David: "the top navigation bar is not changing colour" and
   the fly-out "is staying stagnant out when hovering out of it". Both fair - the bar was
   one flat ink strip from first paint to last, and a panel that only closes on a click
   traps a pointer that has already left it.
     · REST      - ink, full height, no shadow.
     · SCROLLED  - condenses, gains a hairline and a shadow, so the page reads as moving
                   under a fixed bar instead of the bar being part of the hero.
     · MENU-OPEN - the bar deepens and the panel attaches flush to it, with a scrim over
                   the page behind. Bar and panel become one sheet, which is the thing
                   SAP and ICAT actually do and what makes the fly-out feel attached. */
#nav{position:fixed;inset:0 0 auto 0;height:var(--site-nav);z-index:100;display:flex;align-items:center;
  background:var(--ink);color:#fff;border-bottom:1px solid var(--chrome-line);
  transition:height .28s cubic-bezier(.2,.7,.2,1),background-color .28s ease,box-shadow .28s ease,border-color .28s ease}
/* NAV · TWO STATES, RULED BY DAVID 16 SEP.
   The bar used to read the ground behind it and invert to match. It worked, and it was
   wrong: a fixed bar over an alternating page inverts every time a section boundary
   passes under it, so it flickers dark-light-dark all the way down. His ruling: the
   landing state is stagnant black, and once the page has moved the bar becomes a minimal,
   blurred, light tone and STAYS there. Two states, one transition, no following.
     · REST      · over the hero. Solid ink, no shadow, no hairline.
     · SCROLLED  · frosted light. Ink type, the light lockup, an ink demo button and a
                   hairline. Translucent, so the page reads through it; blurred, so the
                   type on it stays readable over whatever passes underneath.
   Where backdrop-filter is unavailable the bar falls back to a near-opaque white, which
   is the same design one step less elegant rather than an unreadable one. */
#nav.scrolled{
  height:64px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(1.7) blur(16px);
  backdrop-filter:saturate(1.7) blur(16px);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -22px rgba(15,13,46,.32);
  color:var(--ink);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #nav.scrolled{background:rgba(255,255,255,.97)}
}
#nav.scrolled .brand{color:var(--ink)}
/* --ink-3 on the composited frosted bar measured 4.52:1 over the hero - one hundredth
   above AA, which is not a margin, it is a coincidence. A translucent bar has no fixed
   colour, so the type on it needs headroom for whatever passes underneath. --ink-2. */
#nav.scrolled .navlinks > a,#nav.scrolled .navlinks > .dd > a,#nav.scrolled .navright a{color:var(--ink-2)}
#nav.scrolled .navlinks > a:hover,#nav.scrolled .navlinks > .dd > a:hover,
#nav.scrolled .navright a:hover{color:var(--ink)}
#nav.scrolled .navright a.site-btn.site-btn--paper{background:var(--ink);color:#fff;border-color:var(--ink)}
#nav.scrolled .navright a.site-btn.site-btn--paper:hover{background:#000;color:#fff}
#nav.scrolled .navburger span{background:var(--ink)}
.brand .lock-full-light{display:none}
#nav.scrolled .brand .lock-full{display:none}
#nav.scrolled .brand .lock-full-light{display:block}
/* An open mega-menu always wins: the panel is its own sheet and the bar is its head. */
#nav.menu-open{background:#0B0A24;border-bottom-color:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:#fff}
#nav.menu-open .brand{color:#fff}
#nav.menu-open .navlinks > a,#nav.menu-open .navlinks > .dd > a,#nav.menu-open .navright a{color:var(--chrome-dim)}
#nav.menu-open .navlinks > .dd.open > a{color:#fff}
#nav.menu-open .navright a.site-btn.site-btn--paper{background:#fff;color:var(--ink);border-color:#fff}
#nav.menu-open .brand .lock-full{display:block}
#nav.menu-open .brand .lock-full-light{display:none}
#nav.menu-open .navburger span{background:#fff}
#nav.menu-open .navlinks > .dd.open > a{color:#fff}
/* the scrim: everything except the bar and the open panel steps back. It is also the
   click-outside target, so dismissing works with a pointer anywhere on the page. */
.nav-scrim{position:fixed;inset:0;z-index:99;background:rgba(15,13,46,.34);
  opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s}
.nav-scrim.on{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){#nav,.nav-scrim{transition:none}}
#nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{display:flex;align-items:flex-start;gap:6px;cursor:pointer;color:#fff}
.brand .wm{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.2em;line-height:1}
.navlinks{display:flex;gap:28px;font-size:15px;align-items:center;margin-left:44px;margin-right:auto}
.navlinks a{color:var(--chrome-dim);cursor:pointer;transition:color .2s}
/* The dropdown links live INSIDE .navlinks, so this rule reached them too and turned
   them white on hover - white text on the white fly-out panel, invisible. Reported by
   David, 7 Sep. Scoped to the top row only, and the panel gets its own hover colour. */
.navlinks > a:hover, .navlinks > .dd > a:hover{color:#fff}
.navright{display:flex;align-items:center;gap:24px;font-size:15px}
.navright a{color:var(--chrome-dim);transition:color .2s}.navright a:hover{color:#fff}
.navright .site-btn{height:40px;padding:0 18px;font-size:13.5px;box-shadow:none;color:var(--ink)}
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 14px);left:-16px;background:#fff;border:1px solid var(--line);padding:6px;min-width:260px;box-shadow:0 30px 60px -28px rgba(15,13,46,.4);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s;color:var(--ink)}
/* R-C5: opened by class, not by :hover. The hover rule is gone entirely — leaving it
   alongside the click rule would keep the unpredictable behaviour on a mouse. */
.dd.open .dd-menu{opacity:1;visibility:visible;transform:none}
.dd > a{-webkit-user-select:none;user-select:none}
.dd-menu a{display:block;padding:10px 12px;color:var(--ink)}
.dd-menu a:hover{background:var(--wash);color:var(--ink)}
.dd-menu a:hover span{color:var(--ink-2)}
.dd-menu a b{display:block;font-weight:600;font-size:13.5px}
.dd-menu a span{font-size:12.5px;color:var(--ink-3)}
/* ---- MEGA-MENU · the second level, on David's ICAT reference ----
   ICAT's nav does two things ours did not: it shows a whole area at once in columns,
   and it gives each column a heading so the second level is visible without a hover.
   Ours keeps R-C5 exactly as it is - the panel opens on CLICK and stays until dismissed;
   the script is untouched, only the panel inside .dd is wider and has columns. The panel
   anchors to the header's own wrap, not to the toggle, so all four line up on one edge. */
#nav .wrap{position:relative}
.dd.mega{position:static}
.dd-menu.mega{left:0;right:0;min-width:0;width:100%;padding:0;display:grid;gap:0;border-top:0;top:100%;border-left:0;border-right:0;box-shadow:0 26px 50px -30px rgba(15,13,46,.45)}
/* the panel is tagged with its own column count, so a two-column area never paints a
   blank fourth column - the same lesson as the capability grid, one rule up. */
.dd-menu.mega.g3{grid-template-columns:repeat(3,minmax(0,1fr)) .9fr}
.dd-menu.mega.g2{grid-template-columns:repeat(2,minmax(0,1fr)) .9fr}
.dd-menu.mega .mcol{padding:26px 26px 28px;border-right:1px solid var(--line-2)}
.dd-menu.mega .mcol-lab{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line-2)}
.dd-menu.mega .mcol a{padding:11px 0;border-radius:0}
.dd-menu.mega .mcol a:hover{background:transparent}
.dd-menu.mega .mcol a:hover b{color:var(--ink)}
.dd-menu.mega .mcol a b{font-size:14px;transition:color .16s ease}
.dd-menu.mega .mcol a span{margin-top:2px;display:block;line-height:1.5}
.dd-menu.mega .mrail{padding:26px 26px 28px;background:var(--wash)}
.dd-menu.mega .mrail p{margin-top:4px;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.dd-menu.mega .mrail-go{display:inline-block;margin-top:14px;padding:0;font-size:13px;font-weight:600;color:var(--ink)}
.dd-menu.mega .mrail-go:after{content:" \2192"}
.dd-menu.mega .mrail-go:hover{background:transparent;color:var(--ink)}
@media(max-width:1180px){.dd-menu.mega.g3,.dd-menu.mega.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dd-menu.mega .mrail{grid-column:1 / -1}}
@media(max-width:1000px){.navlinks{display:none}}

/* ---- the menu below 1000px · the site had NO navigation under 1000px until v2.6.
   Ink panel, square, mono group labels in the label register, no violet. ---- */
.navburger{display:none;width:40px;height:40px;background:transparent;border:1px solid rgba(255,255,255,.4);cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:border-color .2s}
.navburger:hover{border-color:#fff}
.navburger span{display:block;width:16px;height:1.5px;background:#fff;transition:transform .2s ease,opacity .2s ease}
.navburger.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.navburger.on span:nth-child(2){opacity:0}
.navburger.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mnav{position:fixed;inset:var(--site-nav) 0 0 0;z-index:99;background:var(--ink);color:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--chrome-line)}
.mnav-in{padding:12px 24px 56px}
.mgrp{padding:20px 0;border-bottom:1px solid var(--chrome-line)}
.mgrp:last-child{border-bottom:0}
.mlab{font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--chrome-mut);margin-bottom:12px}
.mnav a{display:block;padding:11px 0;font-size:15px;font-weight:500;color:var(--chrome-dim);transition:color .15s}
.mnav a:hover,.mnav a:focus{color:#fff}
html.mnav-open,html.mnav-open body{overflow:hidden}
@media(max-width:1000px){.navburger{display:flex}.navright{gap:14px}.navlogin{display:none}}
@media(max-width:420px){.navright .site-btn{padding:0 12px;font-size:12.5px}}
/* the orb sits closer to the corner on a phone so it covers less of the page */
@media(max-width:900px){.site-orb{width:44px;height:44px;right:16px;bottom:16px}.site-orb svg{width:15px;height:15px}}


/* ================= THE WHEEL · from the pitch, banded for a landing page =========
   Pitch sent it self-contained; DSN measured every label and ruled three bands.
   Built in CSS ONLY — no script — because a banded graphic that fails silently is
   the same defect class as the carousel that never started. */

/* the nine host tokens the graphic reads, mapped to Verso's own */
.wheel{container-type:inline-size;container-name:wheel;--void:#0F0D2E;--ink:#0F0D2E;--chalk:#F3F1EE;--mist:#B9B6C6;
  --vio:#B3ADF4;--c1:#6FA3DC;--dsp:var(--display);--bd:var(--body);--mn:var(--mono);
  position:relative;padding:0;width:min(880px,100%);margin:0 auto}
/* THE WHEEL · on Who it's for, where it belongs — it is the picture of "the rim".
   Off the landing page on David's ruling, 8 Sep: it fought the photography there. */
.wheelfig{margin:8px auto 0}
.wheel svg{position:relative;display:block;width:100%;height:auto}
/* SITE re-cut of the core, 8 Sep. The glossy highlighted ball with five stacked
   lines in it read as a slide; flat violet, a hairline ring, two calm lines. */
.wheel .core-f{fill:#8F88E8}
.wheel .core-r{fill:none;stroke:rgba(243,241,238,.55);stroke-width:1}
.wheel .core-t{font-family:var(--display);font-size:19px;font-weight:600;fill:#fff;letter-spacing:.005em}
.wheel .ringl{letter-spacing:.15em}
.wheel-entities{margin:18px auto 0;text-align:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--chrome-dim)}

/* BAND C · below 500px — the wheel is a MARK. No text inside it at all. */
@container wheel (max-width:547.98px){
  .wheel svg text,.wheel svg textPath{display:none}
}
/* BAND B · 500-819px — the argument only: drop the six small mono labels and the
   two 15px lines, keep the 22 at 17-19px. At 500px the smallest still reads 9.7px. */
@container wheel (min-width:548px) and (max-width:819.98px){
  .wheel .core-e,.wheel .core-s,.wheel .sect-l,.wheel .ringl,.wheel .hubm,.wheel .wsub{display:none}
}
/* BAND A is every label, >=820px, and needs no rule. */

/* wheel.css from Pitch, verbatim values, every selector scoped to .wheel */
.wheel svg{display:block}
.wheel /* the four hub quadrants — whisper fills,.wheel hardcoded for ink */
.h-eco{fill:rgba(179,173,244,.15);stroke:var(--vio)}
.wheel .h-erp{fill:rgba(111,163,220,.14);stroke:var(--c1)}
.wheel .h-prj{fill:rgba(243,241,238,.11);stroke:var(--chalk);stroke-width:1.1}
.wheel .h-con{fill:rgba(243,241,238,.07);stroke:var(--mist);stroke-width:1}
.wheel /* the flowing spokes — hardcoded for ink */
.spk{stroke-width:1.2;fill:none}
.wheel .spk.t{stroke:rgba(179,173,244,.42)}
.wheel .spk.s{stroke:rgba(111,163,220,.42)}
.wheel /* rim nodes */
.nd-t{fill:var(--void);stroke:var(--vio);stroke-width:1.6}
.wheel .nd-s{fill:var(--void);stroke:var(--c1);stroke-width:1.6}
.wheel /* type */
.sh{font-family:var(--bd);font-size:21px;font-weight:500;fill:var(--chalk)}
.wheel .hub{font-family:var(--dsp);font-size:19px;font-weight:700;letter-spacing:.02em}
.wheel .hubm{font-family:var(--mn);font-size:10.5px;letter-spacing:.2em;font-weight:500}
.wheel .ringl{font-family:var(--mn);font-size:10.5px;letter-spacing:.18em;font-weight:500}
.wheel .sect-l{font-family:var(--mn);font-size:13px;letter-spacing:.3em;font-weight:500}
.wheel /* the two rings and their ticks */
.ring-p{fill:none;stroke:var(--chalk);stroke-width:1;opacity:.55}
.wheel .ring-c{fill:none;stroke:var(--mist);stroke-width:1;opacity:.45;stroke-dasharray:3 4}
.wheel .tick-p{fill:var(--chalk);opacity:.7}
.wheel .tick-c{fill:var(--mist);opacity:.6}
.wheel /* the core — #cg is defined INSIDE wheel.svg,.wheel not here */
.core-f{fill:url(#cg)}
.wheel .core-t{font-family:var(--dsp);font-size:17px;font-weight:700;fill:var(--ink)}
.wheel .core-s{font-family:var(--mn);font-size:9px;letter-spacing:.2em;fill:rgba(15,13,46,.66)}
.wheel .core-e{font-family:var(--mn);font-size:8.5px;letter-spacing:.14em;fill:rgba(15,13,46,.78);font-weight:500}
.wheel /* MOTION — the only deck-only behaviour,.wheel and it is already opt-out.
   Both are decorative: the spokes drift,.wheel the whisper fills breathe. Nothing
   reveals,.wheel nothing sequences,.wheel and the graphic is complete with them off. */
@media (prefers-reduced-motion:no-preference){
  .spk.t,.spk.s{stroke-dasharray:5 7;animation:flow 2.8s linear infinite}
.wheel @keyframes flow{to{stroke-dashoffset:-24}
}
.wheel .pl{animation:p 7s ease-in-out infinite}
.wheel @keyframes p{0%,100%{opacity:.26}
.wheel 50%{opacity:.6}
}
}

/* the list · visible below 500px, and always present for a screen reader so the
   graphic is never the only place a thing is written (R-C5's principle). */
.wheel-list{position:relative;margin-top:20px}
@container wheel (min-width:548px){
  .wheel-list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
.wl-lede{color:var(--chrome-ink);font-size:15px;line-height:1.5;margin-bottom:14px}
.wheel-list h4{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chrome-dim);font-weight:500;margin:16px 0 6px}
.wheel-list h4 span{display:block;letter-spacing:0;text-transform:none;font-family:var(--body);
  font-size:11.5px;color:var(--chrome-dim);margin-top:3px}
.wheel-list ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px}
.wheel-list li{color:var(--chrome-ink);font-size:13px;line-height:1.5}

/* Pitch measured the Projects ring label 7 units over its arc with zero margin.
   .16em instead of .18em buys ~15 units and changes no content. */
.wheel .ringl{letter-spacing:.16em}


/* ---- the Verso icon · DSN's signed mark, 12 bands, currentColor ---- */
/* Coloured with CSS only: paths untouched, no stroke, the right edge leans. */
.verso-mark{display:block;height:24px;width:auto;color:#5A54CC}
.on-ink .verso-mark,.brand .verso-mark{color:#8F88E8}
/* the wordmark until it stops fitting — measured, not guessed: at 320px the full
   lockup sits 10px from the demo button. */
.brand .lock-mark{display:none}
@media(max-width:359.98px){
  .brand .lock-full,.brand .lock-full-light{display:none !important}
  .brand .lock-mark{display:block}
  .brand .verso-mark{height:22px}
}


/* ---- product lockup in a product hero (DSN 18-file set, 14 Sep) ----
   BOTH AXES NAMED. Every one of these files is a different aspect - erp/crm 3.8555,
   connect 4.6733, projects 4.8774, mobile/system 4.4685, ai 3.6514 - so no box is
   reused between products and none is inherited. An inline SVG carries no intrinsic
   width: a flex item holding one with neither axis named resolves to ZERO and paints
   nothing, with no error. That is what cost the ERP four months of unmarked waybills. */
.phero-lock{display:block;margin-bottom:22px}
.phero-lock .plock{display:block;height:40px;width:auto}
@media(max-width:640px){.phero-lock .plock{height:32px}}
/* MEASURED, not chosen: the product TAG is the smallest thing in the lockup and it is
   PATHS, so no font-size sweep can see it. At a 30px lockup the tag's cap height paints
   6.78px — under the 7px mono label floor. 40px puts it at 9.0px; the 640px step holds
   7.2px. A lockup sized for the WORD can leave the TAG illegible with nothing to show
   for it. */


/* ---- capability register · the SAP pattern on our discipline ---------------
   Named capabilities, verb-first, grouped. Hairline grid, no cards, no shadows —
   pristine and calm, not a feature wall. */
/* CAPABILITY REGISTER · rebuilt 16 Sep.
   Was: one bordered box per capability, thirteen of them at identical weight. That is the
   off-the-shelf grid, and David called it exactly what it looked like. Now an index - the
   group on the left with its ordinal and count, the capabilities as hairline rows on the
   right. Fewer rules on the page, a clear place for the eye to land, and the name and the
   sentence on one line instead of stacked in a cell. */
.caps{margin-top:52px;border-top:1px solid var(--line)}
.cap-group{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:0 56px;
  padding:34px 0 30px;border-bottom:1px solid var(--line)}
.cap-group:last-child{border-bottom:0;padding-bottom:0}
.cap-lab{position:relative;padding-left:40px}
.cap-ord{position:absolute;left:0;top:2px;font-size:11.5px;letter-spacing:.1em;color:var(--ink);font-weight:500}
.cap-gname{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.015em;color:var(--ink);line-height:1.2}
.cap-n{display:block;margin-top:8px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.cap-list{list-style:none}
.cap-row{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:0 28px;
  padding:13px 0;border-bottom:1px solid var(--line-2);align-items:baseline}
.cap-row:first-child{padding-top:0}
.cap-row:last-child{border-bottom:0;padding-bottom:0}
.cap-name{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.cap-say{font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.cap-wh{display:inline-block;margin-left:10px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.caps.on-dark{border-top-color:var(--chrome-line)}
.caps.on-dark .cap-group{border-bottom-color:var(--chrome-line)}
.caps.on-dark .cap-ord{color:var(--ai-ink-dark)}
.caps.on-dark .cap-gname,.caps.on-dark .cap-name{color:#fff}
.caps.on-dark .cap-n,.caps.on-dark .cap-say,.caps.on-dark .cap-wh{color:var(--chrome-dim)}
.caps.on-dark .cap-row{border-bottom-color:var(--chrome-line)}
@media(max-width:900px){.cap-group{grid-template-columns:1fr;gap:20px}
  .cap-lab{padding-left:0}.cap-ord{position:static;display:block;margin-bottom:6px}}
@media(max-width:620px){.cap-row{grid-template-columns:1fr;gap:4px}
  .cap-say{margin-top:2px}}

/* ---- what the AI does here · small, underneath, never a panel at the top ---- */
.ai-note{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.ai-note-h{display:flex;align-items:center;gap:8px}
.ai-note-h .mono{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.ai-note .ds-ai-mark{color:var(--ai);font-size:11.5px;line-height:1}
.ai-note ul{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:9px 34px;list-style:none}
.ai-note li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.ai-note li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--ai)}
.ai-note-f{margin-top:18px;font-size:12.5px;line-height:1.55;color:var(--ink-3);max-width:62ch}
.ai-note.on-dark{border-top-color:var(--chrome-line)}
.ai-note.on-dark .ai-note-h .mono,.ai-note.on-dark li,.ai-note.on-dark .ai-note-f{color:var(--chrome-dim)}
.ai-note.on-dark .ds-ai-mark{color:var(--ai-ink-dark)}
@media(max-width:760px){.ai-note ul{grid-template-columns:1fr}}


/* ============================================================
   BLOCK LIBRARY · the seven module types
   One hairline, one ramp, one ink. The SHAPE changes when the job of the block changes;
   nothing else does. No shadow, no rounded card, no violet outside an AI surface.
   ============================================================ */

/* 01 · EXPLORER ------------------------------------------------ */
.explorer{margin-top:44px;border-top:1px solid var(--line)}
.ex-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line)}
.ex-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:16px 22px 14px;font-family:var(--body);font-size:15px;font-weight:600;color:var(--ink-3);
  cursor:pointer;display:flex;align-items:baseline;gap:9px;transition:color .16s ease,border-color .16s ease;margin-bottom:-1px}
.ex-tab .ex-n{font-size:9.5px;letter-spacing:.14em;color:var(--ink-3);font-weight:500}
.ex-tab:hover{color:var(--ink)}
.ex-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.ex-tab[aria-selected="true"] .ex-n{color:var(--ink)}
.ex-pane{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:52px;padding:44px 0 8px;align-items:start}
.ex-pane[hidden]{display:none}
.ex-txt h3{font-size:27px;letter-spacing:-.015em}
.ex-txt p{margin-top:14px;font-size:15px;line-height:1.62;color:var(--ink-2);max-width:52ch}
.ex-pts{margin-top:22px;list-style:none;border-top:1px solid var(--line-2)}
.ex-pts li{position:relative;padding:11px 0 11px 20px;font-size:13.5px;line-height:1.55;
  color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.ex-pts li:before{content:"";position:absolute;left:0;top:19px;width:8px;height:1px;background:var(--ink-3)}
.explorer.no-fig .ex-pane{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px}
.explorer.no-fig .ex-pts{margin-top:0;border-top:1px solid var(--line)}
.explorer.no-fig.on-dark .ex-pts{border-top-color:var(--chrome-line)}
.ex-pts-wide li{font-size:13.5px}
.explorer.on-dark{border-top-color:var(--chrome-line)}
.explorer.on-dark .ex-tabs{border-bottom-color:var(--chrome-line)}
.explorer.on-dark .ex-tab{color:var(--chrome-dim)}
/* the UNSELECTED tab number kept the light-mode token on an ink ground and measured
   2.80:1 - the selected one was fine, so a glance at the block showed nothing wrong. */
.explorer.on-dark .ex-tab .ex-n{color:var(--chrome-dim)}
.explorer.on-dark .ex-tab:hover,.explorer.on-dark .ex-tab[aria-selected="true"]{color:#fff}
.explorer.on-dark .ex-tab[aria-selected="true"]{border-bottom-color:var(--ai-ink-dark)}
.explorer.on-dark .ex-tab[aria-selected="true"] .ex-n{color:var(--ai-ink-dark)}
.explorer.on-dark .ex-txt h3{color:#fff}
.explorer.on-dark .ex-txt p,.explorer.on-dark .ex-pts li{color:var(--chrome-dim)}
.explorer.on-dark .ex-pts,.explorer.on-dark .ex-pts li{border-color:var(--chrome-line)}
.explorer.on-dark .ex-pts li:before{background:var(--chrome-dim)}
@media(max-width:900px){.ex-pane{grid-template-columns:1fr;gap:30px}
  .ex-tab{padding:13px 15px 11px;font-size:13px}}

/* 02 · STEPS --------------------------------------------------- */
.steps{margin-top:44px;list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.steps.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.st-item{padding:24px 26px 30px 0;border-right:1px solid var(--line-2);position:relative}
.st-item:last-child{border-right:0}
.st-item:not(:first-child){padding-left:26px}
.st-item:before{content:"";position:absolute;top:-1px;left:0;width:34px;height:2px;background:var(--ink)}
.st-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.st-n{font-size:11.5px;letter-spacing:.1em;color:var(--ink);font-weight:500}
.st-lab{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.st-item h4{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.st-item p{margin-top:8px;font-size:13.5px;line-height:1.58;color:var(--ink-3)}
.steps.on-dark{border-top-color:var(--chrome-line)}
.steps.on-dark .st-item{border-right-color:var(--chrome-line)}
.steps.on-dark .st-item:before{background:var(--ai-ink-dark)}
.steps.on-dark .st-n{color:var(--ai-ink-dark)}
.steps.on-dark .st-lab,.steps.on-dark .st-item p{color:var(--chrome-dim)}
.steps.on-dark .st-item h4{color:#fff}
@media(max-width:1000px){.steps.c2,.steps.c3,.steps.c4,.steps.c5{grid-template-columns:1fr 1fr}
  .st-item:nth-child(2n){border-right:0}.st-item:nth-child(n+3){margin-top:18px}}
@media(max-width:620px){.steps.c2,.steps.c3,.steps.c4,.steps.c5{grid-template-columns:1fr}
  .st-item{border-right:0;padding-left:0 !important;margin-top:18px}}

/* 03 · COMPARE ------------------------------------------------- */
.cmp-wrap{margin-top:44px;overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;min-width:640px}
.cmp thead th{text-align:left;padding:0 22px 14px;border-bottom:1px solid var(--line);vertical-align:bottom}
.cmp thead th .mono{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.cmp thead th:last-child .mono{color:var(--ink)}
.cmp tbody th{text-align:left;padding:20px 22px 20px 0;font-family:var(--display);font-weight:700;
  font-size:15px;color:var(--ink);border-bottom:1px solid var(--line-2);width:22%;vertical-align:top}
.cmp tbody td{padding:20px 22px;font-size:13.5px;line-height:1.58;color:var(--ink-3);
  border-bottom:1px solid var(--line-2);vertical-align:top}
.cmp td.cmp-b{color:var(--ink-2);background:var(--wash)}
.cmp-wrap.on-dark .cmp thead th{border-bottom-color:var(--chrome-line)}
.cmp-wrap.on-dark .cmp thead th .mono{color:var(--chrome-dim)}
.cmp-wrap.on-dark .cmp thead th:last-child .mono{color:var(--ai-ink-dark)}
.cmp-wrap.on-dark .cmp tbody th{color:#fff;border-bottom-color:var(--chrome-line)}
.cmp-wrap.on-dark .cmp tbody td{color:var(--chrome-dim);border-bottom-color:var(--chrome-line)}
.cmp-wrap.on-dark .cmp td.cmp-b{color:#fff;background:rgba(255,255,255,.045)}

/* 04 · DECK ---------------------------------------------------- */
.deck{margin-top:44px;border-top:1px solid var(--line);padding-top:34px}
.dk-slides{list-style:none}
.dk-slide[hidden]{display:none}
.dk-k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.dk-slide h3{margin-top:14px;font-size:27px;letter-spacing:-.018em;max-width:22ch}
.dk-slide p{margin-top:16px;font-size:15px;line-height:1.62;color:var(--ink-2);max-width:62ch}
.dk-foot{margin-top:20px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.dk-bar{margin-top:32px;padding-top:18px;border-top:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between}
.dk-count{font-size:11.5px;letter-spacing:.14em;color:var(--ink-3)}
.dk-count b{color:var(--ink);font-weight:500}
.dk-btns{display:flex;gap:8px}
.dk-btns button{appearance:none;width:40px;height:40px;border:1px solid var(--line);background:none;
  color:var(--ink);font-size:15px;cursor:pointer;transition:border-color .16s ease,color .16s ease}
.dk-btns button:hover{border-color:var(--ink);}
.deck.on-dark{border-top-color:var(--chrome-line)}
.deck.on-dark .dk-k,.deck.on-dark .dk-foot,.deck.on-dark .dk-count{color:var(--chrome-dim)}
.deck.on-dark .dk-count b{color:#fff}
.deck.on-dark .dk-slide h3{color:#fff}
.deck.on-dark .dk-slide p{color:var(--chrome-dim)}
.deck.on-dark .dk-bar{border-top-color:var(--chrome-line)}
.deck.on-dark .dk-btns button{border-color:var(--chrome-line);color:#fff}
.deck.on-dark .dk-btns button:hover{border-color:#fff}

/* 05 · ARTICLE CARDS ------------------------------------------- */
.acards{margin-top:44px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.acards.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.acards.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
.acards.five{grid-template-columns:repeat(6,minmax(0,1fr))}.acards.five>a{grid-column:span 2}.acards.five>a:nth-child(4),.acards.five>a:nth-child(5){grid-column:span 3}
@media(max-width:900px){.acards.five{grid-template-columns:1fr 1fr}.acards.five>a,.acards.five>a:nth-child(4),.acards.five>a:nth-child(5){grid-column:span 1}}
@media(max-width:620px){.acards.five{grid-template-columns:1fr}}
.acard2{display:block;background:#fff;padding:0 0 26px;color:var(--ink)}
.ac-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.ac-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.acard2:hover .ac-img img{transform:scale(1.035)}
.ac-k{display:block;margin:22px 26px 0;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.acard2 h3{margin:10px 26px 0;font-family:var(--display);font-weight:700;font-size:21px;
  line-height:1.24;letter-spacing:-.014em;transition:color .16s ease}
.acard2:hover h3{color:var(--ink)}
.acard2 p{margin:10px 26px 0;font-size:13.5px;line-height:1.58;color:var(--ink-3)}
.ac-meta{display:block;margin:16px 26px 0;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:900px){.acards.cols3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.acards.cols3,.acards.cols2{grid-template-columns:1fr}}

/* 06 · SPEC TABLE ---------------------------------------------- */
.spec-wrap{margin-top:40px}
.spec-cap{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  font-weight:500;padding-bottom:12px;border-bottom:1px solid var(--line)}
.spec{width:100%;border-collapse:collapse}
.spec thead th{text-align:left;padding:14px 20px 12px 0;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
  border-bottom:1px solid var(--line-2);vertical-align:bottom}
.spec tbody th{text-align:left;padding:16px 20px 16px 0;font-family:var(--display);font-weight:700;
  font-size:15px;color:var(--ink);border-bottom:1px solid var(--line-2);vertical-align:top;width:24%}
.spec tbody td{padding:16px 20px 16px 0;font-size:13.5px;line-height:1.56;color:var(--ink-3);
  border-bottom:1px solid var(--line-2);vertical-align:top}
.spec tbody tr:last-child th,.spec tbody tr:last-child td{border-bottom:0}
.spec-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:76ch}
.spec-wrap.on-dark .spec-cap{color:var(--chrome-dim);border-bottom-color:var(--chrome-line)}
.spec-wrap.on-dark .spec thead th{color:var(--chrome-dim);border-bottom-color:var(--chrome-line)}
.spec-wrap.on-dark .spec tbody th{color:#fff;border-bottom-color:var(--chrome-line)}
.spec-wrap.on-dark .spec tbody td{color:var(--chrome-dim);border-bottom-color:var(--chrome-line)}
.spec-wrap.on-dark .spec-note{color:var(--chrome-dim);border-top-color:var(--chrome-line)}
@media(max-width:760px){.spec-wrap{overflow-x:auto}.spec{min-width:600px}}

/* 07 · PULL ---------------------------------------------------- */
.pull{margin-top:52px;padding:40px 0 0;border-top:2px solid var(--ink)}
.pull p{font-family:var(--display);font-weight:700;font-size:27px;line-height:1.24;
  letter-spacing:-.018em;color:var(--ink);max-width:24ch}
.pull-at{margin-top:20px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.pull.on-dark{border-top-color:#fff}
.pull.on-dark p{color:#fff}
.pull.on-dark .pull-at{color:var(--chrome-dim)}
@media(max-width:620px){.pull p{font-size:21px}.dk-slide h3{font-size:21px}}


/* 08 · ESSAY --------------------------------------------------- */
.essay{margin-top:44px}
.es-lead{position:relative;aspect-ratio:21/9;overflow:hidden;background:var(--ink);margin-bottom:38px}
.es-lead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.es-top{padding-top:32px;border-top:2px solid var(--ink)}
.es-k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.essay h3{margin-top:14px;font-size:38px;line-height:1.08;letter-spacing:-.025em;max-width:26ch}
.es-sf{margin-top:20px;font-size:21px;line-height:1.5;color:var(--ink-2);max-width:56ch}
.es-grid{margin-top:40px;display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:56px;align-items:start}
.es-rail{border-top:1px solid var(--line);padding-top:4px}
.es-rl{padding:14px 0;border-bottom:1px solid var(--line-2)}
.es-rl .mono{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.es-rl p{margin-top:6px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.es-body p{font-size:15px;line-height:1.72;color:var(--ink-2);max-width:68ch}
.es-body p + p{margin-top:20px}
.es-body p:first-child:first-letter{float:left;font-family:var(--display);font-weight:700;
  font-size:38px;line-height:.82;padding:4px 12px 0 0;color:var(--ink)}
.es-by{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);line-height:1.7}
.essay.on-dark .es-top{border-top-color:#fff}
.essay.on-dark h3{color:#fff}
.essay.on-dark .es-k,.essay.on-dark .es-by,.essay.on-dark .es-rl .mono{color:var(--chrome-dim)}
.essay.on-dark .es-sf,.essay.on-dark .es-body p,.essay.on-dark .es-rl p{color:var(--chrome-dim)}
.essay.on-dark .es-body p:first-child:first-letter{color:#fff}
.essay.on-dark .es-by,.essay.on-dark .es-rail{border-color:var(--chrome-line)}
.essay.on-dark .es-rl{border-bottom-color:var(--chrome-line)}
@media(max-width:900px){.es-grid{grid-template-columns:1fr;gap:30px}
  .es-rail{order:2;border-top:0}.es-body{order:1}}
@media(max-width:620px){.essay h3{font-size:27px}.es-sf{font-size:15px}
  .es-body p:first-child:first-letter{font-size:27px}}


/* ============================================================
   VISUAL MODULES · 09 tiles · 10 photo band · 11 showcase · 12 figures
   The page was carried on type. These carry it on pictures.
   ============================================================ */

/* TOKEN CORRECTION 16 Sep · every module I added since v2.34 used var(--ink). There
   is no --accent token in this design system, and there is not supposed to be: the brand
   accent IS the violet #5A54CC, and the standing rule is that violet appears on AI
   surfaces ONLY. So an accent colour on a tab underline, a step rule, a register ordinal
   or a callout dot would have been off-brand even if the token had existed - and because
   it did not exist, every one of them silently painted nothing at all. Marks take ink;
   violet stays with the AI. */
/* 09 · TILES --------------------------------------------------- */
.tiles{margin-top:44px;display:grid;gap:1px;background:var(--line)}
.tiles.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{position:relative;display:block;min-height:420px;overflow:hidden;background:var(--ink);color:#fff}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.05)}
.tile-sh{position:absolute;inset:0;background:linear-gradient(to top,
  rgba(15,13,46,.94) 0%,rgba(15,13,46,.82) 30%,rgba(15,13,46,.42) 62%,rgba(15,13,46,.12) 100%)}
.tile-in{position:absolute;left:0;right:0;bottom:0;padding:30px 30px 32px;display:block}
.tile-k{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--chrome-dim);font-weight:500}
.tile h3{margin-top:10px;font-family:var(--display);font-weight:700;font-size:27px;
  letter-spacing:-.018em;line-height:1.12;color:#fff}
.tile p{margin-top:10px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.82);max-width:34ch}
.tile-go{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:3px;transition:border-color .2s}
.tile:hover .tile-go{border-bottom-color:#fff}
@media(max-width:1000px){.tiles.cols3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tiles.cols3,.tiles.cols2{grid-template-columns:1fr}.tile{min-height:340px}}

/* 10 · PHOTO BAND ---------------------------------------------- */
.pband{position:relative;min-height:440px;display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.pband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* v2.45 · Spike BLOCK: the band's h2 resolved to ink over the photograph (1.0:1). The
   heading is chrome-ink by rule, and the scrim holds .9 across the whole text run. */
.pband-sh{position:absolute;inset:0;background:linear-gradient(90deg,
  rgba(15,13,46,.94) 0%,rgba(15,13,46,.9) 66%,rgba(15,13,46,.55) 86%,rgba(15,13,46,.4) 100%)}
.pband .wrap{position:relative;z-index:2;padding:80px 0}
.pband-in h2{font-size:38px;line-height:1.1;letter-spacing:-.024em;max-width:20ch;color:var(--chrome-ink)}
.band-at{margin-top:22px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--chrome-dim)}
.band-cta{margin-top:28px}
@media(max-width:760px){.pband-in h2{font-size:27px}.pband{min-height:360px}}

/* 11 · SHOWCASE ------------------------------------------------ */
.showcase{margin-top:8px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:0 56px;align-items:start}
.sc-head{grid-column:1 / -1;max-width:60ch;margin-bottom:38px}
.sc-head h2{font-size:38px;line-height:1.1;letter-spacing:-.024em}
.sc-head p{margin-top:16px;font-size:15px;line-height:1.62;color:var(--ink-2)}
.showcase.on-dark .sc-head p{color:var(--chrome-dim)}
.sc-fig{position:relative}
.sc-frame{position:relative;width:100%;border:1px solid var(--chrome-line);background:#fff;line-height:0}
.showcase:not(.on-dark) .sc-frame{border-color:var(--line)}
.sc-frame img{width:100%;display:block}
.sc-cap{padding:11px 16px;background:var(--ink);color:var(--chrome-dim);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--chrome-line);border-top:0}
.showcase:not(.on-dark) .sc-cap{border-color:var(--line)}
.sc-dot{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px rgba(255,255,255,.85);z-index:6;line-height:1}
.sc-dot i{font-style:normal;font-size:9.5px;letter-spacing:.04em;font-weight:500}
.sc-list{list-style:none;margin-top:2px}
.sc-list li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 14px;padding:15px 0;
  border-bottom:1px solid var(--line-2)}
.sc-list li:first-child{padding-top:0}
.sc-list li:last-child{border-bottom:0}
.sc-n{font-size:9.5px;letter-spacing:.06em;color:var(--ink);font-weight:500;padding-top:3px}
.sc-t{font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.sc-t b{display:block;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:4px}
.showcase.on-dark .sc-list li{border-bottom-color:var(--chrome-line)}
.showcase.on-dark .sc-n{color:var(--ai-ink-dark)}
.showcase.on-dark .sc-t{color:var(--chrome-dim)}
.showcase.on-dark .sc-t b{color:#fff}
@media(max-width:1000px){.showcase{grid-template-columns:1fr;gap:34px}
  .sc-dot{width:22px;height:22px}}

/* 12 · FIGURES (large alternating rows) ------------------------ */
.figures{margin-top:44px}
.figrow{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:0 60px;
  align-items:center;padding:52px 0;border-top:1px solid var(--line)}
.figrow:first-child{border-top:0;padding-top:8px}
.figrow.rev .figrow-t{order:2}
.figrow.rev .figrow-f{order:1}
.figrow-t h3{margin-top:14px;font-size:27px;letter-spacing:-.018em;max-width:20ch}
.figrow-t p{margin-top:14px;font-size:15px;line-height:1.62;color:var(--ink-2);max-width:46ch}
.figrow-p{margin-top:20px;list-style:none;border-top:1px solid var(--line-2)}
.figrow-p li{position:relative;padding:10px 0 10px 18px;font-size:13.5px;line-height:1.55;
  color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.figrow-p li:before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--ink-3)}
.figrow-f .shotwin{width:100%}
.figrow-f .shotwin img{width:100%;display:block}
.sec.ink .figrow{border-top-color:var(--chrome-line)}
.sec.ink .figrow-t h3{color:#fff}
.sec.ink .figrow-t p,.sec.ink .figrow-p li{color:var(--chrome-dim)}
.sec.ink .figrow-p,.sec.ink .figrow-p li{border-color:var(--chrome-line)}
.sec.ink .figrow-p li:before{background:var(--chrome-dim)}
@media(max-width:900px){.figrow{grid-template-columns:1fr;gap:30px}
  .figrow.rev .figrow-t,.figrow.rev .figrow-f{order:0}}


/* 13 · CLICK-THROUGH --------------------------------------------
   A sequence of real captures, driven by clicks and by a clock. The step rail is the
   control and the progress indicator at once: the fill under the current step IS the
   time remaining, so the thing that moves tells you what it is doing. */
.ct{margin-top:44px;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:0 52px;align-items:start}
.ct-rail{border-top:1px solid var(--line)}
.ct.on-dark .ct-rail{border-top-color:var(--chrome-line)}
.ct-step{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 12px;
  width:100%;text-align:left;appearance:none;background:none;border:0;
  border-bottom:1px solid var(--line-2);padding:16px 0 17px;cursor:pointer}
.ct.on-dark .ct-step{border-bottom-color:var(--chrome-line)}
.ct-n{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-4);
  font-weight:500;padding-top:3px;transition:color .2s}
.ct-txt b{display:block;font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--ink-3);letter-spacing:-.01em;transition:color .2s}
.ct-txt em{display:block;margin-top:3px;font-style:normal;font-size:12.5px;line-height:1.5;
  color:var(--ink-4);transition:color .2s}
.ct.on-dark .ct-n,.ct.on-dark .ct-txt b,.ct.on-dark .ct-txt em{color:var(--chrome-mut)}
.ct-step:hover .ct-txt b,.ct.on-dark .ct-step:hover .ct-txt b{color:var(--ink)}
.ct.on-dark .ct-step:hover .ct-txt b{color:#fff}
.ct-step[aria-current="true"] .ct-n{color:var(--ink)}
.ct-step[aria-current="true"] .ct-txt b{color:var(--ink)}
.ct-step[aria-current="true"] .ct-txt em{color:var(--ink-3)}
.ct.on-dark .ct-step[aria-current="true"] .ct-n,
.ct.on-dark .ct-step[aria-current="true"] .ct-txt b{color:#fff}
.ct.on-dark .ct-step[aria-current="true"] .ct-txt em{color:var(--chrome-dim)}
.ct-bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:transparent;overflow:hidden}
.ct-bar i{display:block;height:100%;width:0;background:var(--ink)}
.ct.on-dark .ct-bar i{background:#fff}
.ct-step[aria-current="true"] .ct-bar i{width:100%}
.ct-step[aria-current="true"].timing .ct-bar i{width:100%;transition:width var(--ct-dwell,4200ms) linear}
.ct-step[aria-current="true"].timing-reset .ct-bar i{width:0;transition:none}
.ct-ctl{display:flex;gap:8px;align-items:center;padding-top:20px}
.ct-ctl button{appearance:none;height:38px;min-width:38px;padding:0 12px;border:1px solid var(--line);
  background:none;color:var(--ink);cursor:pointer;font-size:15px;display:flex;align-items:center;
  justify-content:center;gap:8px;transition:border-color .16s ease}
.ct.on-dark .ct-ctl button{border-color:var(--chrome-line);color:#fff}
.ct-ctl button:hover{border-color:var(--ink)}
.ct.on-dark .ct-ctl button:hover{border-color:#fff}
.ct-play-t{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.ct-play-i{width:8px;height:9px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.ct.paused .ct-play-i{width:0;height:0;border:0;border-left:8px solid currentColor;
  border-top:5px solid transparent;border-bottom:5px solid transparent}
.ct-stage{position:relative}
.ct-frame{position:relative;margin:0;opacity:0;visibility:hidden;position:absolute;inset:0;
  transition:opacity .45s ease,visibility .45s}
.ct-frame.on{opacity:1;visibility:visible;position:relative}
.ct-frame img{width:100%;display:block;border:1px solid var(--chrome-line)}
.ct:not(.on-dark) .ct-frame img{border-color:var(--line)}
.ct-cap{padding:11px 16px;background:var(--ink);color:var(--chrome-dim);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--chrome-line);border-top:0}
.ct:not(.on-dark) .ct-cap{border-color:var(--line)}
.ct-lines{margin-top:20px;min-height:3.4em}
.ct-line{font-size:15px;line-height:1.62;color:var(--ink-2);max-width:62ch}
.ct.on-dark .ct-line{color:var(--chrome-dim)}
.ct-line[hidden]{display:none}
@media(prefers-reduced-motion:reduce){
  .ct-frame{transition:none}
  .ct-step[aria-current="true"].timing .ct-bar i{transition:none}
}
@media(max-width:1000px){.ct{grid-template-columns:1fr;gap:30px}}


/* KNOWLEDGE DIAGRAMS · pictures of the SUBJECT, never of the product. Ink and hairline,
   no fills beyond a wash, so they read as reference drawings rather than illustration. */
.dg{margin:0;border:1px solid var(--line);background:var(--wash)}
.dg svg{display:block;width:100%;height:auto}
.dg-cap{padding:11px 16px;border-top:1px solid var(--line);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.dg-border{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 4}
.dg-arr{stroke:var(--ink-4);stroke-width:1}
.dg-temp{stroke-dasharray:6 4}
.dg-head{fill:var(--ink)}
.dg-dot{fill:var(--ink)}
.dg-layer{fill:none;stroke:var(--ink-5);stroke-width:1}
.dg-obj{fill:var(--ink);stroke:none}
.dg-face{fill:#fff;stroke:var(--ink-4);stroke-width:1}
.dg-find{fill:var(--ink);stroke:#fff;stroke-width:1.5}
.dg-n{fill:#fff;font-family:var(--mono);font-size:9.5px;font-weight:500}
.dg-name{fill:var(--ink);font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.01em}
.dg-lab{fill:var(--ink-3);font-family:var(--mono);font-size:9.5px;letter-spacing:.2em}
.dg-note{fill:var(--ink-3);font-family:var(--body);font-size:11.5px}
.dg-obj + .dg-name{fill:#fff}
.showcase.on-dark .dg,.sec.ink .dg{background:rgba(255,255,255,.04);border-color:var(--chrome-line)}
.sec.ink .dg-cap{color:var(--chrome-dim);border-top-color:var(--chrome-line)}


/* 14 · FLOW · the pipeline as a control ---------------------------
   The rail is the navigation and the picture at once. A stage that Verso drafts carries
   the violet mark; the stage that commits carries a ring. Violet appears here and nowhere
   else in the module, because this is an AI surface. */
.flow{margin-top:44px}
.fl-rail{position:relative;display:grid;grid-template-columns:repeat(var(--fl-n),minmax(0,1fr));
  gap:0;padding-bottom:6px}
.fl-line{position:absolute;left:0;right:0;top:19px;height:1px;background:var(--line);z-index:0}
.fl-line i{display:block;height:100%;width:0;background:var(--ink);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.flow.on-dark .fl-line{background:var(--chrome-line)}
.flow.on-dark .fl-line i{background:#fff}
.fl-node{position:relative;z-index:1;appearance:none;background:none;border:0;padding:0 8px 0 0;
  text-align:left;cursor:pointer;display:block}
.fl-dot{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);color:var(--ink-4);
  transition:border-color .2s,color .2s,background-color .2s}
.fl-dot{color:var(--ink-3)}  /* v2.45 · first flow on a light ground: ink-4 on paper measured 3.42 */
.flow.on-dark .fl-dot{background:var(--ink);border-color:var(--chrome-line);color:var(--chrome-mut)}
.fl-dot i{font-style:normal;font-size:9.5px;letter-spacing:.04em;font-weight:500}
.fl-node:hover .fl-dot{border-color:var(--ink)}
.flow.on-dark .fl-node:hover .fl-dot{border-color:#fff}
.fl-node[aria-current="true"] .fl-dot{background:var(--ink);border-color:var(--ink);color:#fff}
.flow.on-dark .fl-node[aria-current="true"] .fl-dot{background:#fff;border-color:#fff;color:var(--ink)}
.fl-node.is-ai .fl-dot{border-color:var(--ai)}
.fl-node.is-sign .fl-dot{box-shadow:0 0 0 4px var(--wash)}
.flow.on-dark .fl-node.is-sign .fl-dot{box-shadow:0 0 0 4px rgba(255,255,255,.1)}
.fl-lab{display:block;margin-top:12px;font-family:var(--display);font-weight:700;font-size:13px;
  line-height:1.3;color:var(--ink-3);letter-spacing:-.01em;transition:color .2s;padding-right:10px}
.flow.on-dark .fl-lab{color:var(--chrome-mut)}
.fl-node[aria-current="true"] .fl-lab{color:var(--ink)}
.flow.on-dark .fl-node[aria-current="true"] .fl-lab{color:#fff}
.fl-panes{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.flow.on-dark .fl-panes{border-top-color:var(--chrome-line)}
.fl-pane[hidden]{display:none}
.fl-pane h4{font-size:27px;letter-spacing:-.018em;max-width:26ch}
.flow.on-dark .fl-pane h4{color:#fff}
.fl-io{margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.fl-io > div{padding:0 28px 0 0;border-right:1px solid var(--line-2)}
.fl-io > div:last-child{border-right:0;padding-right:0}
.fl-io > div:not(:first-child){padding-left:28px}
.flow.on-dark .fl-io > div{border-right-color:var(--chrome-line)}
.fl-io .mono{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.flow.on-dark .fl-io .mono{color:var(--chrome-dim)}
.fl-io p{margin-top:10px;font-size:13.5px;line-height:1.58;color:var(--ink-2)}
.flow.on-dark .fl-io p{color:var(--chrome-dim)}
.fl-ai{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:11px;
  align-items:flex-start;font-size:13.5px;line-height:1.58;color:var(--ink-2);max-width:82ch}
.fl-ai .ds-ai-mark{color:var(--ai);font-size:11.5px;line-height:1.5}
/* the label and the line are one sentence - 'Verso drafts the case type and the
   grouping' - so a block label above it read as a fragment starting lowercase. */
.fl-ai b{display:inline;font-family:var(--display);font-size:13.5px;color:var(--ink);margin-right:.35em}
.flow.on-dark .fl-ai{border-top-color:var(--chrome-line);color:var(--chrome-dim)}
.flow.on-dark .fl-ai b{color:#fff}
.fl-ai b:after{content:''}
.flow.on-dark .fl-ai .ds-ai-mark{color:var(--ai-ink-dark)}
.fl-sign{margin-top:16px;font-size:13.5px;line-height:1.58;color:var(--ink-2);max-width:82ch}
.fl-sign b{display:block;font-family:var(--display);font-size:13px;color:var(--ink);margin-bottom:3px}
.flow.on-dark .fl-sign{color:var(--chrome-dim)}
.flow.on-dark .fl-sign b{color:#fff}
@media(max-width:900px){.fl-rail{grid-template-columns:1fr;gap:0}
  .fl-line{display:none}
  .fl-node{display:grid;grid-template-columns:38px minmax(0,1fr);gap:0 14px;align-items:center;
    padding:10px 0;border-bottom:1px solid var(--line-2)}
  .fl-lab{margin-top:0}
  .fl-io{grid-template-columns:1fr;gap:20px}
  .fl-io > div{border-right:0;padding:0 !important}}


/* 15 · LIBRARY · the live surface ---------------------------------
   Search, filters, entries. The page IS the thing, not a description of it. No counts
   anywhere in this module: a directory, a knowledge base, a calendar and a journal all
   grow, and a number printed on the front door is wrong the week after it is printed. */
.lb{margin-top:38px}
.lb-bar{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:0 32px;
  align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line)}
.lb-search{appearance:none;width:100%;height:46px;padding:0 16px;font-family:var(--body);
  font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--line-3)}
.lb-search::placeholder{color:var(--ink-4)}
.lb-search:focus{outline:none;border-color:var(--ink)}
.lb-chips{display:flex;flex-wrap:wrap;gap:8px}
.lb-chip{appearance:none;background:none;border:1px solid var(--line-3);color:var(--ink-3);
  padding:7px 14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;transition:border-color .16s,color .16s,background-color .16s}
.lb-chip:hover{border-color:var(--ink);color:var(--ink)}
.lb-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lb-grid{margin-top:1px;display:grid;gap:1px;background:var(--line)}
.lb-grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lb-grid.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lb-grid.cols1{grid-template-columns:1fr}
.lb-card{background:var(--paper);padding:26px 26px 24px;display:flex;flex-direction:column}
.lb-card[hidden]{display:none}
.lb-meta{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.lb-card h3{margin-top:12px;font-family:var(--display);font-weight:700;font-size:21px;
  line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.lb-card p{margin-top:10px;font-size:13.5px;line-height:1.58;color:var(--ink-3);flex:1}
.lb-open{margin-top:18px;align-self:flex-start;appearance:none;background:none;border:0;
  border-bottom:1px solid var(--ink);padding:0 0 3px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);cursor:pointer}
/* --ink-4 measured 3.42:1. This label is the honest marker on an entry that does not
   exist yet, so it is exactly the line that has to be readable. --ink-3. */
.lb-soon{margin-top:18px;align-self:flex-start;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.lb-body{grid-column:1 / -1;background:var(--wash);padding:40px 34px 44px}
.lb-body[hidden]{display:none}
.eb{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.eb:has(.eb-fig){grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.eb-fig{order:2}
.eb-t p{font-size:15px;line-height:1.66;color:var(--ink-2);max-width:66ch}
.eb-t p + p{margin-top:15px}
.eb-pts{margin-top:20px;list-style:none;border-top:1px solid var(--line-2)}
.eb-pts li{position:relative;padding:11px 0 11px 18px;font-size:13.5px;line-height:1.55;
  color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.eb-pts li:before{content:"";position:absolute;left:0;top:19px;width:8px;height:1px;background:var(--ink-3)}
.eb-foot{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.lb-empty{margin-top:28px;font-size:15px;color:var(--ink-3)}
.lb-note{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:76ch}
.lb-empty[hidden]{display:none}
@media(max-width:1000px){.lb-grid.cols3{grid-template-columns:1fr 1fr}
  .lb-bar{grid-template-columns:1fr;gap:16px}
  .eb:has(.eb-fig){grid-template-columns:1fr}}
@media(max-width:640px){.lb-grid.cols3,.lb-grid.cols2{grid-template-columns:1fr}}

/* ---- hero · the trade's own light, ink scrim ---- */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--ink);min-height:100vh;display:flex;align-items:center}
.hero-stage{position:absolute;inset:0;z-index:0}
.hero-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;transform:scale(1.06);opacity:0;transition:opacity 1.6s ease-in-out}
.hero-stage img.on{opacity:1;animation:kb 26s ease-in-out infinite alternate}
/* REGRESSION, introduced with the carousel in v2.21 and live for eleven cuts:
   the carousel needs its frames to start at opacity 0 and lifts one with .on — but EVERY
   OTHER hero on the site (phero) paints a SINGLE photograph with no .on, so all 27
   product and section heroes went to opacity 0. The image loaded, sized and decoded; it
   simply painted nothing. No instrument caught it: they all measure what IS painted, and
   flat ink measures beautifully. A lone photograph in a stage is always the visible one. */
.hero-stage img:only-child{opacity:1;animation:kb 26s ease-in-out infinite alternate}
@media (prefers-reduced-motion: reduce){.hero-stage img{transition:none}.hero-stage img.on{animation:none;transform:scale(1)}}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.12)}}
.scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,13,46,.94),rgba(15,13,46,.72) 44%,rgba(15,13,46,.42) 72%,rgba(15,13,46,.6)),linear-gradient(to top,rgba(15,13,46,.9),rgba(15,13,46,.1) 55%)}
.grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .wrap{position:relative;z-index:3;width:100%;padding-top:calc(var(--site-nav) + 40px);padding-bottom:72px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* the wheel needs room: a 980px graphic in a half-width column lands in Band C on a
   laptop while a 900px phone-ish width gets Band B, which is non-monotonic nonsense.
   Give it the larger share from the moment the hero is two columns. */
.hero-grid.hero-solo{grid-template-columns:minmax(0,760px)}
.hero h1{font-size:64px;color:#fff;margin-top:24px;max-width:11ch}
.hero .lede{margin-top:26px;font-size:21px;color:rgba(255,255,255,.82);max-width:46ch;line-height:1.5;font-weight:300}
.hero .lede b{font-weight:500;color:#fff}
.hero .cta{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
.hero .credit{margin-top:56px;display:flex;align-items:center;gap:14px;font-size:13px;color:rgba(255,255,255,.62)}
.hero .credit .mono{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:4px}

/* floating product frame · real capture, ink chrome */
.frame{position:relative;justify-self:end;width:100%;max-width:640px;background:var(--ink);border:1px solid rgba(255,255,255,.14);box-shadow:var(--site-shadow-deep);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.frame .bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--chrome-line)}
.frame .bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);display:block}
.frame .bar .url{margin-left:12px;flex:1;height:18px;border:1px solid var(--chrome-line);font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--chrome-mut);display:flex;align-items:center;padding:0 8px}
.frame img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.frame .plate{color:var(--chrome-dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:12px 16px;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--chrome-line)}
.frame .plate b{color:#fff;font-weight:500}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr}.frame{transform:none;max-width:100%}.hero h1{font-size:48px}}

/* orb · the one violet object in the room */
.site-orb{position:fixed;right:28px;bottom:28px;z-index:90;width:52px;height:52px;border-radius:50%;background:var(--ink);box-shadow:0 18px 40px -14px rgba(15,13,46,.7),0 0 0 1px rgba(255,255,255,.18) inset;display:flex;align-items:center;justify-content:center;color:var(--ai-ink-dark);cursor:pointer;border:1px solid rgba(255,255,255,.12);transition:transform .3s}
.site-orb:hover{transform:translateY(-3px)}
.site-orb svg{width:18px;height:18px}

/* marquee · trade words */
.marquee{background:var(--ink);color:#fff;padding:16px 0;overflow:hidden;white-space:nowrap;border-top:1px solid var(--chrome-line);border-bottom:1px solid var(--chrome-line)}
.marquee-track{display:inline-flex;gap:40px;animation:marq 44s linear infinite;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--chrome-dim);text-transform:uppercase;font-weight:500}
.marquee-track .d{color:var(--chrome-mut);margin:0 20px;font-size:9px}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:120px 0;position:relative}
.sec.wash{background:var(--wash)}
.sec.ink{background:var(--ink);color:#fff}
.khead{max-width:820px}
.khead h2{font-size:48px;margin-top:18px}
.khead p{margin-top:20px;color:var(--ink-3);font-size:21px;line-height:1.5;font-weight:300;max-width:56ch}
.sec.ink .khead p{color:var(--chrome-dim)}
.sec.ink .kick{color:var(--chrome-dim)}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}

/* band 1 · three doors — hairline grid, cool plate, D-7 */
.doors{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--door-line);background:var(--door-line)}
.doors{gap:1px}
.door{background:var(--door);padding:36px 34px 34px;display:flex;flex-direction:column;min-height:260px;position:relative;transition:background var(--t-1)}
.door:hover{background:var(--door-hov)}
.door .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--door-ink);font-weight:500;opacity:.8}
.door h3{font-family:var(--display);font-weight:700;font-size:27px;letter-spacing:-.02em;margin-top:16px;line-height:1.1;display:flex;align-items:center;gap:10px}
.door h3 .ai{color:var(--ai);font-size:21px;line-height:1}
.door p{margin-top:14px;color:var(--door-ink);font-size:15px;line-height:1.55;flex:1;max-width:36ch}
.door .go{margin-top:26px;color:var(--ink);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:8px}
.door .go:after{content:'›';transition:transform .2s}
.door:hover .go:after{transform:translateX(3px)}
.door.ai-door:before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--ai-grad)}
.doors-wrap{margin-top:0;position:relative;z-index:4;box-shadow:var(--site-shadow)}
@media(max-width:900px){.doors{grid-template-columns:1fr}.doors-wrap{margin-top:40px}}

/* band 2 · two sides — photographs, ledger lists */
.aud{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:64px}
.acard{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;transition:transform .4s,box-shadow .4s}
.acard:hover{transform:translateY(-4px);box-shadow:var(--site-shadow)}
.acard .head{position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--ink)}
.acard .head img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.acard:hover .head img{transform:scale(1.05)}
/* A21 --photo, measured on real pixels: the kicker on this card read 3.03:1 against a
   bright patch of the photograph (worst pixel rgb(100,97,113)). The scrim reached .9
   only at the very bottom edge, and the label block sits above that. Floor raised so
   the whole label band sits on near-solid ink; the picture is untouched above it. */
.acard .head .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,13,46,.97) 0%,rgba(15,13,46,.93) 22%,rgba(15,13,46,.62) 44%,rgba(15,13,46,.05) 72%)}
.acard .head .lb{position:absolute;left:30px;right:30px;bottom:24px;color:#fff}
.acard .head .lb .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--chrome-dim);text-transform:uppercase;font-weight:500}
.acard .head .lb h3{font-family:var(--display);font-weight:700;font-size:32px;margin-top:8px;letter-spacing:-.025em;line-height:1.05}
.acard .body{padding:30px 32px 34px;flex:1;display:flex;flex-direction:column}
.acard .body>p{color:var(--ink-3);font-size:15px;line-height:1.55}
.acard .who{margin-top:26px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.acard ul{list-style:none}
.acard .roles li{display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--ink);padding:11px 0;border-bottom:1px solid var(--line-2)}
.acard .roles li em{font-style:normal;color:var(--ink-3);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
/* The tick list was only ever styled INSIDE .acard, so every standalone ticks() on the
   page - the who-it's-for pages, Directory, Knowledge - painted as a default browser
   bullet list with a 16px empty square dropped above each line. It has been wrong for as
   long as ticks() has been used outside a card; David caught it on Collectors. Styled on
   its own now, with the card keeping its own spacing. */
.gives{margin-top:18px;display:grid;gap:11px;list-style:none;max-width:78ch}
.gives li{display:flex;gap:13px;align-items:flex-start;font-size:15px;color:var(--ink-2);line-height:1.6}
.on-dark .gives li,.sec.ink .gives li{color:var(--chrome-dim)}
.sec.ink .tick{border-color:var(--chrome-dim);color:#fff}
.acard .gives{margin-top:14px;gap:9px;flex:1}
.acard .gives li{font-size:13.5px;gap:12px;line-height:1.5}
.tick{flex:0 0 16px;width:16px;height:16px;border:1px solid var(--ink);color:var(--ink);display:flex;align-items:center;justify-content:center;margin-top:2px}
.tick svg{width:9px;height:9px}
.acard .site-btn{margin-top:28px;align-self:flex-start}
@media(max-width:900px){.aud{grid-template-columns:1fr}}

/* band 3 · the tools — ink ground, hairline grid, real captures */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--chrome-line);border:1px solid var(--chrome-line);margin-top:64px}
.tool{background:var(--ink);padding:26px 26px 30px;display:flex;flex-direction:column;transition:background .3s}
.tool:hover{background:var(--chrome-2)}
.tool .shot{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -30px rgba(0,0,0,.9);background:#fff;border-top:22px solid var(--chrome-2)}
.tool .shot:before{content:"";position:absolute;top:-15px;left:10px;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);box-shadow:12px 0 0 rgba(255,255,255,.22),24px 0 0 rgba(255,255,255,.22)}
.tool .shot img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tool:hover .shot img{transform:scale(1.03)}
.tool .cap{margin-top:14px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-mut)}
.tool h3{font-family:var(--body);font-weight:600;font-size:21px;letter-spacing:-.01em;margin-top:14px;color:#fff;line-height:1.2}
.tool p{margin-top:8px;color:var(--chrome-dim);font-size:15px;line-height:1.55;flex:1}
.tool .go{margin-top:18px;color:#fff;font-weight:600;font-size:13.5px;display:inline-flex;gap:8px;align-items:center}
.tool .go:after{content:'›'}
.tools--paper{background:var(--line);border-color:var(--line)}
.tool--paper{background:#fff}.tool--paper:hover{background:var(--wash)}
.tool--paper .shot{border-color:var(--line);border-top-color:var(--wash-2);box-shadow:0 30px 60px -34px rgba(15,13,46,.35)}
.tool--paper .shot:before{background:var(--line-3);box-shadow:12px 0 0 var(--line-3),24px 0 0 var(--line-3)}
.tool--paper .cap{color:var(--ink-3)}.tool--paper h3{color:var(--ink)}.tool--paper p{color:var(--ink-3)}.tool--paper .go{color:var(--ink)}
@media(max-width:900px){.tools{grid-template-columns:1fr}}

/* trust band · C6 */
.trust{padding:44px 0;background:#fff;border-bottom:1px solid var(--line)}
.trust .row{display:grid;grid-template-columns:auto repeat(4,1fr);gap:28px;align-items:center}
.trust .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.trust .slot{height:52px;border:1px dashed var(--line-3);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.trust .note{margin-top:16px;font-size:13px;color:var(--ink-3);max-width:70ch}
@media(max-width:900px){.trust .row{grid-template-columns:1fr 1fr}}

/* band 5 · Open Verso · wash */
/* RENAMED 15 Sep: this band's layout class was a bare `.open`, which collided with the
   fly-out's STATE class `.dd.open`. Every time a menu opened, `display:grid` from this
   rule hit the toggle: it became a 165px two-column grid and dropped 32px out of the nav
   row - the movement David reported on the wide backgrounds. State classes stay scoped
   (.dd.open); layout classes get a name of their own. */
.open-band{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;margin-top:64px;align-items:stretch}
.open-band .doors{grid-template-columns:1fr 1fr}
.open-band .door:nth-child(5){grid-column:1/-1;min-height:0}
.open-band .door{min-height:200px}
.open-band .photo{position:relative;overflow:hidden;background:var(--ink);min-height:420px}
.open-band .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.open-band .photo .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,13,46,.97) 0%,rgba(15,13,46,.93) 22%,rgba(15,13,46,.6) 44%,rgba(15,13,46,.05) 70%)}
.open-band .photo .lb{position:absolute;left:28px;right:28px;bottom:24px;color:#fff}
.open-band .photo .lb .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--chrome-dim);font-weight:500}
.open-band .photo .lb p{margin-top:8px;font-size:15px;color:rgba(255,255,255,.85);max-width:40ch}
@media(max-width:900px){.open-band{grid-template-columns:1fr}.open-band .doors{grid-template-columns:1fr}}

/* band 6 · Verso AI · ink · signatures only */
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:0}
.ai-grid .khead h2{max-width:15ch;font-size:48px}
.ai-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--chrome-line);border:1px solid var(--chrome-line);margin-top:56px}
.ai-col{background:var(--ink);padding:26px 26px 30px}
.ai-col .g{font-size:21px;line-height:1;color:var(--ai-ink-dark)}
.ai-col .g.ink{color:#fff}
.ai-col h3{font-family:var(--body);font-weight:600;font-size:21px;color:#fff;margin-top:14px}
.ai-col p{margin-top:8px;color:var(--chrome-dim);font-size:15px;line-height:1.55}
.ai-dial{display:inline-flex;border:1px solid var(--chrome-line);margin-top:26px}
.ai-dial span{padding:9px 14px;font-size:13.5px;color:var(--chrome-dim);border-right:1px solid var(--chrome-line)}
.ai-dial span:last-child{border-right:0}
.ai-dial span.on{background:#fff;color:var(--ink);font-weight:600}
.ai-dial span.pro{color:var(--ai-ink-dark)}
.ai-frame{position:relative;background:var(--ink);border:1px solid rgba(255,255,255,.14);box-shadow:var(--site-shadow-deep)}
.ai-frame img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:right top;display:block}
.ai-frame .plate{color:var(--chrome-dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:12px 16px;display:flex;justify-content:space-between;border-top:1px solid var(--chrome-line)}
.ai-frame .plate b{color:#fff;font-weight:500}
.ai-frame:before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;background:var(--ai-grad)}
@media(max-width:900px){.ai-grid{grid-template-columns:1fr}.ai-cols{grid-template-columns:1fr}}

/* closing band · ink · one sentence, one paper button */
.close{background:var(--ink);color:#fff;padding:120px 0}
.close .row{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.close h2{font-size:40px;max-width:22ch}
.close .ai{color:var(--ai-ink-dark);font-size:21px;margin-top:22px;display:block}

/* footer · paper */
/* ===== multi-page · shared page furniture ===== */
.page{display:none}.page.on{display:block}
.phero{position:relative;color:#fff;background:var(--ink);overflow:hidden;min-height:62vh;display:flex;align-items:flex-end;padding-bottom:72px}
.phero.tall{min-height:86vh}
.phero .hero-stage{position:absolute;inset:0;z-index:0}.phero .hero-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.phero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,13,46,.94),rgba(15,13,46,.7) 50%,rgba(15,13,46,.45)),linear-gradient(to top,rgba(15,13,46,.92),rgba(15,13,46,.15) 60%)}
.phero .wrap{position:relative;z-index:3;width:100%;padding-top:calc(var(--site-nav) + 64px)}
.phero .phero-in{max-width:860px}
.phero h1{font-size:56px;color:#fff;margin-top:22px;max-width:16ch}
.phero .lede{margin-top:22px;font-size:21px;color:rgba(255,255,255,.82);max-width:54ch;line-height:1.5;font-weight:300}
.phero .lede b{font-weight:500;color:#fff}
.phero .cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
/* The crumb sits on the hero PHOTOGRAPH. It measured 3.42-4.01 against 4.5 the moment
   the photographs came back - it had been passing against flat ink, which is the
   defect flattering the measurement. --chrome-mut gives 3.58 on the worst pixel
   found behind it; --chrome-dim gives 5.90 on the same pixel. */
.crumb{color:var(--chrome-dim);margin-bottom:18px}.crumb a{color:var(--chrome-ink)}
.khead.wide{max-width:1000px}
@media(max-width:900px){.phero h1{font-size:40px}}

/* feature grid — hairline cells, mono kickers (DSN-v3.11 board 02) */
.fgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.fgrid.cols3{grid-template-columns:repeat(3,1fr)}.fgrid.cols2{grid-template-columns:repeat(2,1fr)}.fgrid.cols4{grid-template-columns:repeat(4,1fr)}
.fg-cell{background:#fff;padding:30px 28px 32px;position:relative}
.fg-cell .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-ink);font-weight:500}
.fg-cell h3{font-family:var(--body);font-weight:600;font-size:21px;margin-top:12px;line-height:1.2}
.fg-cell p{margin-top:10px;color:var(--ink-3);font-size:15px;line-height:1.55}
.fg-cell .fg-ai{position:absolute;right:24px;top:26px;color:var(--ai);font-size:15px}
.fgrid.on-dark{background:var(--chrome-line);border-color:var(--chrome-line)}
.fgrid.on-dark .fg-cell{background:var(--ink)}.fgrid.on-dark .fg-cell .k{color:var(--brass-2)}.fgrid.on-dark .fg-cell h3{color:#fff}.fgrid.on-dark .fg-cell p{color:var(--chrome-dim)}.fgrid.on-dark .fg-cell .fg-ai{color:var(--ai-ink-dark)}
@media(max-width:900px){.fgrid{grid-template-columns:1fr!important}}

/* single capture */
.frame.cap{margin:56px auto 0;max-width:1100px;justify-self:auto}
.frame.cap img{aspect-ratio:16/10}

/* feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:96px}
.frow:first-of-type{margin-top:64px}
.frow.rev .ftext{order:2}
.ftext h3{font-size:32px;margin-top:16px}
.ftext p{margin-top:16px;color:var(--ink-3);font-size:15px;line-height:1.6;max-width:44ch}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-3);padding:6px 10px}
.shotwin{position:relative;background:#fff;border:1px solid var(--line);border-top:22px solid var(--wash-2);box-shadow:var(--site-shadow)}
.shotwin:before{content:"";position:absolute;top:-15px;left:10px;width:7px;height:7px;border-radius:50%;background:var(--line-3);box-shadow:12px 0 0 var(--line-3),24px 0 0 var(--line-3)}
.shotwin img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;display:block}
.shotwin .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(15,13,46,.92);color:var(--chrome-dim);font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;padding:8px 12px}
.sec.ink .ftext p{color:var(--chrome-dim)}.sec.ink .chip{color:var(--chrome-dim);border-color:var(--chrome-line)}
.sec.ink .shotwin{border-color:rgba(255,255,255,.14);border-top-color:var(--chrome-2);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.sec.ink .shotwin:before{background:rgba(255,255,255,.22);box-shadow:12px 0 0 rgba(255,255,255,.22),24px 0 0 rgba(255,255,255,.22)}
@media(max-width:900px){.frow{grid-template-columns:1fr;gap:28px}.frow.rev .ftext{order:0}}

.doors.cols2{grid-template-columns:1fr 1fr}.doors.cols4{grid-template-columns:repeat(4,1fr)}.doors.cols3{grid-template-columns:repeat(3,1fr)}
.doors-wrap{margin-top:56px;box-shadow:var(--elev-1)}
.sec.ink .doors{background:#405368;border-color:#405368}.sec.ink .door{background:#243040}.sec.ink .door:hover{background:#2B3A4C}.sec.ink .door h3{color:#fff}.sec.ink .door p{color:var(--chrome-dim)}.sec.ink .door .k{color:var(--chrome-dim)}.sec.ink .door .go{color:#fff}
@media(max-width:900px){.doors{grid-template-columns:1fr!important}}

/* photo cards (who it's for) */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.pcard{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;transition:transform .4s,box-shadow .4s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--site-shadow)}
.pcard .head{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.pcard .head img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .head img{transform:scale(1.05)}
.pcard .head .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,13,46,.9),rgba(15,13,46,.05) 65%)}
.pcard .head .lb{position:absolute;left:24px;right:24px;bottom:20px;color:#fff}
.pcard .head .lb .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--chrome-dim);text-transform:uppercase;font-weight:500}
.pcard .head .lb h3{font-size:27px;margin-top:6px}
.pcard .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.pcard .body p{color:var(--ink-3);font-size:15px;line-height:1.55;flex:1}
.pcard .go{margin-top:18px;color:var(--ink);font-weight:600;font-size:13.5px}.pcard .go:after{content:' ›'}
@media(max-width:900px){.pgrid{grid-template-columns:1fr}}

/* trades grid — six chapters, hairline divided (board 04) */
.trades{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.trade{background:#fff;padding:32px 30px 30px;display:flex;flex-direction:column;transition:background .3s}
.trade:hover{background:var(--wash)}
.trade .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.trade h3{font-size:27px;margin-top:14px;line-height:1.1}
.trade p{margin-top:12px;color:var(--ink-3);font-size:15px;line-height:1.55;flex:1}
.trade .tools-line{margin-top:18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.trade .go{margin-top:18px;color:var(--ink);font-weight:600;font-size:13.5px}.trade .go:after{content:' ›'}
@media(max-width:900px){.trades{grid-template-columns:1fr}}

/* pricing — ledger columns (board 03) */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.plan{background:#fff;padding:34px 32px 36px;display:flex;flex-direction:column}
.plan.rec{background:var(--ink);color:#fff}
.plan .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.plan.rec .k{color:var(--chrome-dim)}
.plan h3{font-size:38px;margin-top:10px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.plan.rec h3{border-color:var(--chrome-line)}
.plan .price{margin-top:22px;font-family:var(--display);font-weight:700;font-size:27px;color:var(--brass);letter-spacing:-.02em}
.plan .price .slot-inline{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink);border:1px dashed var(--brass);padding:6px 10px;display:inline-block;margin-top:4px;font-weight:500}
.plan.rec .price .slot-inline{color:var(--brass-2);border-color:var(--brass-2)}
.plan ul{list-style:none;margin-top:22px;display:grid;gap:10px;flex:1}
.plan li{font-size:15px;color:var(--ink-2);padding-left:16px;position:relative}
.plan li:before{content:"";position:absolute;left:0;top:10px;width:6px;height:1px;background:var(--ink-4)}
.plan.rec li{color:var(--chrome-ink)}.plan.rec li:before{background:var(--chrome-dim)}
.plan .site-btn{margin-top:28px;align-self:flex-start}
.money-note{margin-top:28px;padding:22px 26px;border:1px solid var(--line);background:var(--wash);font-size:15px;color:var(--ink-2);max-width:72ch;line-height:1.55}
.money-note b{color:var(--ink)}
@media(max-width:900px){.plans{grid-template-columns:1fr}}

/* stats · faq · slots */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px}
.stat{background:#fff;padding:22px 24px;display:flex;align-items:baseline;gap:14px}
.stat b{font-family:var(--display);font-weight:700;font-size:27px;letter-spacing:-.02em}
.stat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.sec.ink .stats{background:var(--chrome-line);border-color:var(--chrome-line)}.sec.ink .stat{background:var(--ink)}.sec.ink .stat b{color:#fff}.sec.ink .stat span{color:var(--chrome-dim)}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.faq-i{background:#fff;padding:28px 28px 30px}
.faq-i h3{font-family:var(--body);font-weight:600;font-size:21px}
.faq-i p{margin-top:10px;color:var(--ink-3);font-size:15px;line-height:1.55}
.slot-inline{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);border:1px dashed var(--line-3);padding:4px 8px}
.sec.ink .slot-inline,.on-dark .slot-inline,.close .slot-inline{color:var(--chrome-dim);border-color:var(--chrome-line)}
.slot-block{border:1px dashed var(--line-3);padding:40px;text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:24px}
.sec.ink .slot-block{border-color:rgba(255,255,255,.25);color:var(--chrome-mut)}
/* v2.45 · a withheld screen is a small, quiet notice, not a 16:10 dashed void. Seven of
   them down the Ecosystem page at picture size read as "rubbish" (David, 19 Sep). */
.slot-shot{border:1px solid var(--line);background:var(--wash);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:22px 24px}
.slot-shot .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.slot-shot p{font-size:13.5px;color:var(--ink-3);margin:0;max-width:44ch;line-height:1.5}
.frame .slot-shot{border:0;background:var(--chrome-2);padding:26px 24px}
.frame .slot-shot .k{color:var(--chrome-mut)}
.frame .slot-shot p{color:var(--chrome-dim)}
.roles-wrap{margin-top:40px;max-width:720px}
/* the ledger row. This layout was scoped to .acard .roles li, so every ledger OUTSIDE
   the two-sides cards - the rim on Who it's for among them - rendered as a plain list
   with the mono surface label jammed against the name. Pre-existing; found when the
   band moved and the two sat on one page. Now general; .acard keeps its own colours. */
.roles{list-style:none;margin:0;padding:0}
.roles li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;font-size:15px;color:var(--ink);padding:11px 0;border-bottom:1px solid var(--line-2)}
.roles li:last-child{border-bottom:0}

.roles li em{font-family:var(--mono)!important;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-style:normal}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:56px;align-items:start}
.two .col h3{font-size:27px}.two .col p{margin-top:12px;color:var(--ink-3);font-size:15px;line-height:1.6}
@media(max-width:900px){.two{grid-template-columns:1fr}.faq{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}

/* directory / knowledge / events scaffolds — honest, unpopulated */
.dir-tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;align-items:center}
.dir-tools .search{flex:1;min-width:280px;height:46px;border:1px solid var(--line-3);background:#fff;display:flex;align-items:center;padding:0 14px;color:var(--ink-3);font-size:15px}
.chips-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chips-row span{font-size:13.5px;color:var(--ink-2);border:1px solid var(--line-3);padding:8px 12px;background:#fff}
.chips-row span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:28px}
.slot-card{background:#fff;padding:26px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.slot-card .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.slot-card .name{height:16px;width:60%;border-bottom:1px dashed var(--line-3);margin-top:16px}
.slot-card .line{height:12px;width:80%;border-bottom:1px dashed var(--line-2);margin-top:12px}
.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px}
.topic{background:#fff;padding:26px 26px 28px}
.topic h3{font-family:var(--body);font-weight:600;font-size:21px}
.topic ul{list-style:none;margin-top:12px;display:grid;gap:8px}
.topic li{font-size:15px;color:var(--ink-2);display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line-2);padding:8px 0}
.topic li em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.evlist{margin-top:48px;border-top:1px solid var(--ink)}
.evrow{display:grid;grid-template-columns:90px 1fr 1fr auto;gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.evrow .d{font-family:var(--display);font-weight:700;font-size:27px;letter-spacing:-.02em}
.evrow .d small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.evrow .t{font-weight:600;font-size:15px}.evrow .t span{display:block;font-weight:400;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.evrow .m{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:900px){.slot-grid,.topics{grid-template-columns:1fr}.evrow{grid-template-columns:1fr}}

/* AI page · the draft block (board 05) — canon anatomy */
.draft{margin-top:56px;border:1px solid var(--chrome-line);background:var(--ink);padding:28px 30px 30px;position:relative;max-width:820px}
.draft:before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;background:var(--ai-grad)}
.draft .prov{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ai-ink-dark)}
.draft p{margin-top:14px;font-size:15px;line-height:1.6;color:var(--chrome-ink)}
.draft .acts{margin-top:22px;display:flex;gap:10px}
.ai-hair{display:block;width:96px;height:3px;background:var(--ai-grad);margin-top:26px}
.gate-note{margin-top:28px;border:1px dashed rgba(255,255,255,.3);padding:16px 18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-dim);max-width:820px;line-height:1.7}

/* forms (demo · login) — honest, disabled */
.form{margin-top:48px;max-width:640px;display:grid;gap:14px}
.form label{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.form .f{height:46px;border:1px solid var(--line-3);background:#fff;display:flex;align-items:center;padding:0 14px;color:var(--ink-3);font-size:15px}
.form .f.ta{height:120px;align-items:flex-start;padding-top:12px}
.form .note{font-size:13.5px;color:var(--ink-3)}
.mobiles{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:56px;align-items:start}
/* v2.45 · the two phones at true scale. A hairline device on the page, not a bezel
   render: 9:19.5, 300px wide, one pill, one bar. Inside it either a released capture
   or the one honest slot. On ink the frame is a light line; the screen stays paper. */
.phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:64px;justify-items:center;align-items:start}
.dev{margin:0;width:300px;max-width:100%}
.dev-body{position:relative;aspect-ratio:9/19.5;border:1.5px solid rgba(255,255,255,.34);border-radius:44px;padding:10px;background:var(--chrome-2);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.sec:not(.ink) .dev-body{border-color:var(--line-3);background:var(--wash-2);box-shadow:var(--site-shadow)}
.dev-screen{position:absolute;inset:10px;border-radius:34px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.dev-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.dev-pill{position:absolute;top:22px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:12px;background:var(--chrome);z-index:2}
.sec:not(.ink) .dev-pill{background:var(--ink)}
.dev-bar{position:absolute;bottom:20px;left:50%;width:108px;height:4px;margin-left:-54px;border-radius:2px;background:var(--ink);opacity:.55;z-index:2}
.dev-slot{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:64px 26px 48px;background:var(--wash)}
.dev-slot .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.dev-slot b{font-family:var(--display);font-size:21px;font-weight:600;line-height:1.05;color:var(--ink);letter-spacing:-.01em}
.dev-slot .dev-who{font-size:13px;color:var(--ink-3);margin-top:-6px}
.dev-list{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
.dev-list li{padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;color:var(--ink-2)}
.dev-slot p{font-size:12.5px;line-height:1.5;color:var(--ink-3);margin:14px 0 0}
@media(max-width:900px){.phones{grid-template-columns:1fr;gap:40px}}
.phone{border:1px solid var(--line-3);background:#fff;box-shadow:var(--site-shadow);max-width:340px;margin:0 auto}
.phone img{display:block;width:100%}
.mob-cap{margin-top:18px;text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.sec.ink .mob-cap{color:var(--chrome-dim)}
/* v2.47 · Open Verso live surfaces: storefront, thread, jobs, requests, composer, badges */
.lb-body .site-btn--ghost,.req .site-btn--ghost,.compose .site-btn--ghost,.sec:not(.ink) .job-post .site-btn--ghost{color:var(--ink);border-color:var(--ink)}
.lb-body .site-btn--ghost:hover,.req .site-btn--ghost:hover{background:var(--ink);color:#fff}
.badge{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--line);color:var(--ink-3);margin:0 6px 6px 0}
.badge-claimed{border-color:var(--ink);color:var(--ink)}
.badge-unclaimed{border-style:dashed}
.badge-example{color:var(--ink-3)}
.stars{font-size:12px;letter-spacing:.06em;color:var(--ink)}
.es-practice{margin-top:34px;border-top:1px solid var(--line);padding-top:16px;max-width:68ch}
.es-practice .mono{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.es-practice ul{list-style:none;margin:8px 0 0;padding:0}
.es-practice li{padding:10px 0;border-bottom:1px solid var(--line-2);font-size:14px;line-height:1.55;color:var(--ink-2)}
.es-fig{margin-top:30px;max-width:68ch}
.sf{padding:8px 0 4px}
.sf-head{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:20px;align-items:start;padding-bottom:22px;border-bottom:1px solid var(--line)}
.sf-mono{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em}
.sf-id h4{font-family:var(--display);font-size:27px;letter-spacing:-.02em;line-height:1.05;margin:0}
.sf-id p{margin:6px 0 10px;font-size:13.5px;color:var(--ink-3)}
.sf-rate{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.sf-rate b{font-family:var(--display);font-size:27px;line-height:1}
.sf-rate span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sf-ctl{display:flex;flex-wrap:wrap;gap:10px;padding:18px 0;border-bottom:1px solid var(--line)}
.sf-claim{border-style:dashed}
.sf-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;padding:24px 0}
.sf-cols .mono,.sf-reviews > .mono,.ev-win > .mono{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:6px}
.sf-cols ul,.ev-win ul{list-style:none;margin:0 0 18px;padding:0}
.sf-cols li,.ev-win li{padding:8px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.sf-req li{display:grid;grid-template-columns:1fr;gap:2px}
.sf-req b{font-weight:600;color:var(--ink)}
.sf-req span{font-size:12.5px;color:var(--ink-3)}
.sf-req em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.sf-hint{font-size:12.5px;line-height:1.5;color:var(--ink-3);margin:0}
.sf-reviews{padding:8px 0 20px;border-top:1px solid var(--line)}
.sf-rev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:10px}
.sf-rev{background:var(--paper);padding:16px 18px}
.sf-rev p{margin:8px 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.sf-rev .mono{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sf-foot{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0}
.ev-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;font-size:14px;line-height:1.6;color:var(--ink-2)}
.ev-head b{color:var(--ink)}
.ev-org{color:var(--ink-3)}
.ev-note{color:var(--ink-3)}
.ev-ctl{display:flex;flex-wrap:wrap;gap:10px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:18px}
.ev-win{padding-top:20px}
.ev-basis{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:1.7;margin:0}
.th-op,.th-re{padding:18px 0;border-bottom:1px solid var(--line-2)}
.th-op p,.th-re p{font-size:15px;line-height:1.65;color:var(--ink-2);margin:12px 0 0;max-width:68ch}
.th-who{display:flex;gap:12px;align-items:center}
.th-av{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:13px}
.th-who b{display:block;font-size:13.5px;color:var(--ink)}
.th-who .mono{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.th-replies{padding-left:46px}
.th-acts{display:flex;gap:18px;margin-top:10px}
.th-act{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-3);padding-bottom:2px}
.th-compose{padding-top:20px}
.th-compose > .mono,.compose label{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:8px}
.th-compose-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:14px}
.th-note{font-size:12.5px;color:var(--ink-3);max-width:52ch;line-height:1.5}
.th-note.on-dark{color:var(--chrome-dim)}
.compose{margin-top:40px;max-width:760px}
.compose .f{border:1px solid var(--line);background:#fff;min-height:44px;padding:12px 14px;font-size:13.5px;color:var(--ink-3);margin-bottom:18px}
.compose .f.ta{min-height:140px}
.compose-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.jobs,.reqs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--chrome-line);border:1px solid var(--chrome-line);margin-top:44px}
.reqs{background:var(--line);border-color:var(--line)}
.job,.req{padding:24px 24px 22px;display:flex;flex-direction:column;gap:8px}
.job{background:var(--chrome)}
.req{background:var(--paper)}
.job .mono,.req .mono{font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.job .mono{color:var(--chrome-mut)}.req .mono{color:var(--ink-3)}
.job h3,.req h3{font-family:var(--display);font-size:21px;letter-spacing:-.015em;line-height:1.1;margin:2px 0 0}
.job h3{color:#fff}.req h3{color:var(--ink)}
.job-firm{font-size:13.5px;color:var(--chrome-dim);margin:0}
.req-meta{font-size:13.5px;color:var(--ink-3);margin:0}
.job p:not(.job-firm){font-size:13.5px;line-height:1.55;color:var(--chrome-dim);margin:0;flex:1}
.req p:not(.req-meta){font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0;flex:1}
.job-acts{display:flex;gap:10px;margin-top:10px}
.job .site-btn--ink{background:#fff;color:var(--ink);border-color:#fff}
.job .site-btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.job-post{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:24px}
@media(max-width:900px){.sf-cols,.sf-rev-grid,.jobs,.reqs{grid-template-columns:1fr}.sf-head{grid-template-columns:48px 1fr}.sf-rate{grid-column:1/-1;align-items:flex-start;text-align:left}.compose-grid{grid-template-columns:1fr}.th-replies{padding-left:0}}
.qas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--chrome-line);border:1px solid var(--chrome-line);margin-top:48px}
.qa{background:var(--chrome);padding:26px 26px 24px;display:flex;flex-direction:column;gap:10px}
.qa h3{font-size:15px;line-height:1.35;color:var(--chrome-ink);margin:0;font-weight:600}
.qa p{font-size:13.5px;line-height:1.55;color:var(--chrome-dim);margin:0;flex:1}
.qa-go{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-ink);text-decoration:none;border-top:1px solid var(--chrome-line);padding-top:12px}
.qa-go:hover{color:#fff}
@media(max-width:900px){.qas{grid-template-columns:1fr}}
.legal-toc{list-style:none;margin:40px 0 0;padding:0;max-width:640px;border-top:1px solid var(--line)}
.legal-toc li{display:flex;gap:20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line-2);font-family:var(--display);font-size:21px;color:var(--ink)}
.legal-toc li .mono{font-size:10px;letter-spacing:.14em;color:var(--ink-3)}
.legal{max-width:760px;margin-top:40px}
.legal h3{font-size:21px;margin-top:32px}.legal p{margin-top:10px;color:var(--ink-3);font-size:15px;line-height:1.6}
@media(max-width:900px){.mobiles{grid-template-columns:1fr}}

.foot{padding:64px 0 36px;background:#fff;border-top:1px solid var(--line)}
.foot .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.foot .wm{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.2em}
.foot .tag{margin-top:14px;font-size:13.5px;color:var(--ink-3);max-width:32ch;line-height:1.5}
.foot h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot li{font-size:13.5px;color:var(--ink-2)}
.foot li.gate{color:var(--ink-3)}
.foot .base{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.foot .base .slot{border:1px dashed var(--line-3);padding:3px 8px}
@media(max-width:900px){.foot .cols{grid-template-columns:1fr 1fr}}



/* lockup - the v110 mark, currentColor */
.brand .lockup{height:35px;width:auto;display:block}
.foot .wm.lock .lockup{height:32px;width:auto}
#nav [data-top].active{color:#fff}