/* ═══════════════ TOKENS ═══════════════ */
:root{
  --bg:#F1EBDF;
  --bg-2:#E9E1D0;
  --surface:#F8F4EB;
  --surface-2:#F5F0E5;
  --surface-3:#ECE4D4;

  --text:#121412;
  --dim:#433E37;
  --dim-2:#5D574D;
  /* #4E5E57 measured 2.7-3.0:1 against every ground it actually lands on -
     under AA, and under the 3:1 floor for large text too. It carries about
     thirty things, all of them the quiet register: the marquee note, the
     ROUTE IN "Website" label on 55 rows, the footer column heads and the
     copyright, SWEPT stamps, the Sort label, search placeholders. One token,
     so one fix. #718377 is 4.6-5.1:1 on page, card, footer and surface-2,
     and still reads as the faded tier - it sits clearly below --dim-2
     (#8A9E94) which sits clearly below --dim (#C6D8CE), so the three-step
     hierarchy survives. Re-measure if any surface gets lighter. */
  --dim-3:#665F53;

  --line:rgba(18,20,18,.14);
  --line-2:rgba(18,20,18,.24);
  --line-3:rgba(18,20,18,.40);
  --line-soft:rgba(18,20,18,.08);
  --grid:rgba(18,20,18,.07);

  /* THE WHITE SYSTEM — four values, used everywhere, nowhere improvised.
     edge  : the lit top edge of a surface
     sheen : the diagonal fall of light across it
     wash  : ambient light at the head of a section
     seam  : a bright hairline where two things meet */
  --w-edge:rgba(255,255,255,.46);
  --w-sheen:linear-gradient(152deg,rgba(255,255,255,.175),
            rgba(255,255,255,.06) 36%,rgba(255,255,255,.015) 62%,transparent 80%);
  --w-wash:radial-gradient(ellipse 70% 100% at 50% 0%,
            rgba(255,255,255,.16),rgba(255,255,255,.055) 42%,transparent 76%);
  --w-seam:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  /* light falls on the top of a panel and pools at its foot — one overlay,
     used everywhere, so every card is lit by the same source */
  --w-vault:linear-gradient(180deg,rgba(255,255,255,.085) 0%,
            rgba(255,255,255,.012) 16%,rgba(255,255,255,0) 76%,rgba(0,0,0,.32) 100%);
  /* a broad pool of light, for the places a section needs to lift off
     the page rather than merely be edged */
  --w-pool:radial-gradient(ellipse 60% 74% at 50% 34%,
            rgba(255,255,255,.075),rgba(255,255,255,.022) 48%,transparent 78%);

  /* Brand mint, carried over from ApexRound exactly: #10FFA1.
     It is rationed by MEANING, not by taste — mint appears only where the
     page is asserting live / verified / matched / confirmed. Everything
     else stays monochrome, and primary CTAs stay white so the accent never
     has to compete with them. Add it anywhere else and it stops signifying. */
  --mint:#1F7A4D;
  --mint-ink:#FFFFFF;
  --mint-glow:rgba(31,122,77,.16);
  --g-mint:linear-gradient(180deg,#24885A,#1A6A43);

  --live:var(--mint);

  /* gradients — the only "colour" in the system */
  --g-type:linear-gradient(176deg,#121412 6%,#1C241E 30%,#2E3A33 62%,#49564E 100%);
  --g-type-2:linear-gradient(180deg,#121412,#49564E);
  --g-solid:linear-gradient(180deg,#121412 0%,#3F473F 100%);
  --g-card:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  --g-edge:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 42%,rgba(255,255,255,.02));
  --g-rule:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);

  --display:'Inter Tight',Inter,-apple-system,'Helvetica Neue',sans-serif;
  --mk:url("assets/brand/apexround-mark.png");
  /* The mark's four-point star, symmetric. Decorative: it sits in the hero
     pill and on the provenance link, where it signs rather than points. */
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 14.5 9.5 24 12l-9.5 2.5L12 24l-2.5-9.5L0 12l9.5-2.5Z' fill='%23000'/%3E%3C/svg%3E");
  /* The same star with ONE ARM DRAWN OUT, and that arm runs UP. Centre sits
     at y=24.5 of 38, so the tail above is 24.5 and the point below is 13.5:
     an arrowhead with a tail behind it, head downward. It is the SECTION
     LABEL's mark and nothing else - a label opens a section, so a mark that
     points into it is doing a job. Long-arm-DOWN was tried and reads as a
     dagger hanging rather than an arrow travelling.
     Aspect is 24:38, NOT square - any box carrying it must match that ratio
     or `contain` letterboxes it and the glyph silently shrinks. */
  --star-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 38'%3E%3Cpath d='M12 0L15.1 21.4L24 24.5L15.1 27.6L12 38L8.9 27.6L0 24.5L8.9 21.4Z' fill='%23000'/%3E%3C/svg%3E");

  --r:10px;
  --r-lg:16px;
  --wrap:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
  --nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
/* The artifact build injects this in its own head wrapper, so a missing
   [hidden] rule never showed up there: the standalone file has display
   rules that beat the attribute, which left #more and #gate visible while
   hidden was set. Declared here so both builds behave identically. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01";
  /* clip, not hidden. hidden makes body a scroll container and iOS Safari will
     still rubber-band it sideways; clip refuses the scroll outright. Paired
     with the same on html so the propagation case cannot reintroduce it. */
  overflow-x:clip;
}
html{overflow-x:clip}
body.lock{overflow:hidden}
img,svg{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--mint);color:var(--mint-ink)}

:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:4px}
:focus:not(:focus-visible){outline:none}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 10px}}

/* ═══════════════ TYPE ═══════════════ */
h1,h2,h3,h4{
  font-family:"Inter Tight",Inter,sans-serif;
  font-weight:600; line-height:1.02; letter-spacing:-.035em; margin:0;
}
.grad{
  background:var(--g-type); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.mono{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-ligatures:none;
}
.label{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px; font-weight:500; letter-spacing:.04em; text-transform:none;
  color:var(--dim-2); display:inline-flex; align-items:center; gap:9px;
}
/* Four sections keep the mark and drop the words (How it works, Why ApexRound,
   Provenance, The fine print). The span has to stay - the star is its
   ::before, so removing the element removes the mark. :empty kills the gap,
   which otherwise reserves 9px of nothing after the star. */
.label:empty{gap:0}
.label::before{
  content:""; width:15px; height:24px; flex:none; background:var(--mint);
  /* The arrow star, at roughly double the old 11x11 asterisk. This mark opens
     every section, and at LIVE INDEX it sits directly above the table, so a
     mark with a direction earns its place where a symmetric one only sat
     there. Box matches the glyph's 24:38 ratio - square it and `contain`
     letterboxes it back down to 15x15. */
  -webkit-mask:var(--star-down) center/contain no-repeat;
          mask:var(--star-down) center/contain no-repeat;
  opacity:.85;
}

p{margin:0}
.lede{color:var(--dim); font-size:17px; line-height:1.62; font-weight:350; max-width:60ch}
@media(max-width:640px){.lede{font-size:15.5px}}

/* ═══════════════ THE GLOBE ═══════════════ */
/* Everything decorative in the hero lives here: globe, grid, glows. It is
   overflow:hidden, so at the hero's foot all of it stopped dead on a line
   — and .fade-b could not soften it, because the canvas is z-index 2 and
   the fade is z-index 1, so the globe painted straight over it. Masking
   the whole field means every layer inside dissolves together, and the
   hero text is untouched because it lives in .wrap, outside this. */
.field{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,#000 72%,rgba(0,0,0,.55) 88%,transparent 99%);
  mask:linear-gradient(180deg,#000 72%,rgba(0,0,0,.55) 88%,transparent 99%)}
#globe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(128vh,124vw);height:min(128vh,124vw);display:block;z-index:2}
/* The sphere is a solid body, so it has to occlude the grid rather than let
   it run across its face. This is that occlusion: a soft disc the size of the
   drawn globe, sat between the grid and the canvas. Not fully opaque — a
   little of the far grid reading through keeps the globe feeling like glass
   rather than a hole punched in the page. */
.globe-occl{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  width:min(128vh,124vw);height:min(128vh,124vw);pointer-events:none;
  background:radial-gradient(circle,
    #050506 0 36.6%, rgba(5,5,6,.96) 38%,
    rgba(5,5,6,.55) 39.6%, rgba(5,5,6,.14) 40.8%, transparent 42%);
}

.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.g1{width:92vmin;height:92vmin;left:50%;top:46%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(16,255,161,.13),rgba(16,255,161,0) 66%);
  animation:pulse 15s ease-in-out infinite alternate}
.g2{width:70vmin;height:70vmin;left:12%;top:74%;
  background:radial-gradient(circle,rgba(11,110,74,.5),rgba(11,110,74,0) 68%);
  animation:pulse2 21s ease-in-out infinite alternate-reverse}
.g3{width:60vmin;height:60vmin;right:8%;top:10%;
  background:radial-gradient(circle,rgba(16,255,161,.12),rgba(16,255,161,0) 68%);
  animation:pulse2 26s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.62;transform:translate(-50%,-50%) scale(1)}
                 to{opacity:1;transform:translate(-50%,-50%) scale(1.10)}}
@keyframes pulse2{from{opacity:.5;transform:scale(1)}to{opacity:.95;transform:scale(1.12)}}

/* a white bloom behind the headline: the type reads as lit from behind
   rather than laid on top of a dark plate */
.halo{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  width:min(1000px,88vw);height:min(560px,58vh);z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(255,255,255,.075),rgba(255,255,255,.022) 42%,transparent 70%)}

/* the mark's star, scattered — the same glyph as the pill and the logo,
   so the sparkle is brand rather than decoration */
.sparks{position:absolute;inset:0;z-index:2;pointer-events:none}
.sparks i{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);margin:calc(var(--s) / -2);
  background:var(--mint);
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;
  filter:drop-shadow(0 0 6px rgba(16,255,161,.8)) drop-shadow(0 0 16px rgba(16,255,161,.4));
  animation:twinkle 5.2s ease-in-out infinite;animation-delay:var(--d);opacity:.7;
}
@media(max-width:760px){.sparks i:nth-child(n+5){display:none}}
@media(prefers-reduced-motion:reduce){.sparks i,.spark{animation:none}}

/* the dark pool that lets white type sit on a dotted sphere */
.vig{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 54% 42% at 50% 46%,rgba(5,6,7,.88),rgba(5,6,7,.55) 55%,rgba(5,6,7,0) 78%),
    radial-gradient(ellipse 80% 74% at 50% 46%,transparent 30%,rgba(5,6,7,.9) 100%)}
.fade-b{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(5,5,6,.72) 62%,var(--bg) 96%)}
.fade-t{position:absolute;left:0;right:0;top:0;height:22%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,6,.62),transparent)}

/* ═══════════════ NAV ═══════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  height:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
  display:flex;align-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease),
             backdrop-filter .4s,box-shadow .4s;
  border-bottom:1px solid transparent;
  background:linear-gradient(180deg,
    rgba(5,5,6,.92) 0%,rgba(5,5,6,.74) 38%,rgba(5,5,6,.34) 72%,rgba(5,5,6,0) 100%);
}
/* ── THE HEADER ────────────────────────────────────────────────────
   The page no longer opens on a white plate, so the header has nothing to
   invert against: it is dark from the first pixel. The whole
   .nav:not(.stuck) inversion block that turned the wordmark black is gone
   with the plate that required it. */
.nav{
  background:linear-gradient(180deg,rgba(9,9,11,.96),rgba(7,7,9,.88));
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border-bottom-color:var(--line);
}
.menu .nav{background:linear-gradient(180deg,rgba(5,5,6,.97),rgba(5,5,6,.9))}
.brand,.mark,.lockup,.nav-links a,.btn-gh,.burger,.burger i,
.burger i::before,.burger i::after,.nav::before,.nav::after{
  transition:color .35s var(--ease),background .35s var(--ease),
             border-color .35s var(--ease),filter .35s var(--ease),
             opacity .35s var(--ease)}

.nav::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6) 22%,
             rgba(255,255,255,.6) 78%,transparent);
  box-shadow:0 0 22px rgba(255,255,255,.26)}
/* and pools a little of it onto whatever is underneath */
.nav::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  width:min(960px,86%);height:120px;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 0%,
    rgba(255,255,255,.085),rgba(255,255,255,.022) 46%,transparent 76%)}
.nav.stuck{
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.16),0 18px 44px -30px rgba(0,0,0,.95);
  background:linear-gradient(180deg,rgba(5,5,6,.96),rgba(5,5,6,.86));
}
.nav .wrap{display:flex;align-items:center;gap:34px;width:100%}
.brand{display:flex;align-items:center;gap:9px;font-family:"Inter Tight";font-weight:600;
  font-size:16.5px;letter-spacing:-.03em;flex:none}
.mark{width:26px;height:auto;flex:none;
  filter:drop-shadow(0 0 9px rgba(16,255,161,.22))}
.lockup-link{gap:0}
.lockup{width:146px;height:auto;
  filter:drop-shadow(0 0 14px rgba(16,255,161,.14))}
@media(max-width:640px){.lockup{width:126px}}
.nav-links{display:flex;gap:22px;margin-left:4px}
.nav-links a{font-size:13.5px;color:var(--dim);transition:color .2s;font-weight:450;position:relative;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;
  background:var(--g-solid);transition:right .35s var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{right:0}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 17px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--g-card);color:var(--text);font-size:13.5px;font-weight:500;
  letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
  transition:border-color .22s,background .22s,transform .22s var(--ease),box-shadow .22s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.btn:hover{border-color:var(--line-3);background:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.btn:active{transform:translateY(1px)}
.btn-p{
  background:var(--mint);color:var(--mint-ink);border-color:transparent;font-weight:650;
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset,0 6px 18px -10px rgba(16,255,161,.42);
}
.btn-p:hover{background:#3BFFB4;
  box-shadow:0 1px 0 rgba(255,255,255,.44) inset,0 8px 24px -10px rgba(16,255,161,.58)}
.btn-lg{height:48px;padding:0 24px;font-size:15px;border-radius:9px}
.btn-s{height:32px;padding:0 13px;font-size:12.5px;border-radius:7px}
.btn-gh{background:transparent;border-color:var(--line-2)}
.btn svg{flex:none}

.burger{display:none;width:38px;height:38px;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:8px;background:var(--g-card);cursor:pointer}
.burger i{display:block;width:15px;height:1.5px;background:var(--text);position:relative;transition:.3s var(--ease)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:15px;height:1.5px;
  background:var(--text);transition:.3s var(--ease)}
.burger i::before{top:-5px}.burger i::after{top:5px}
.burger.on i{background:transparent}
.burger.on i::before{top:0;transform:rotate(45deg)}
.burger.on i::after{top:0;transform:rotate(-45deg)}

.sheet{
  position:fixed;inset:var(--nav-h) 0 0;z-index:88;background:rgba(5,5,6,.97);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  padding:26px 28px;display:flex;flex-direction:column;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s,transform .3s var(--ease),visibility .3s;
}
.sheet.on{opacity:1;visibility:visible;transform:none}
.sheet a{padding:15px 0;border-bottom:1px solid var(--line);font-size:19px;
  font-family:"Inter Tight";font-weight:500;letter-spacing:-.02em}
.sheet .btn{margin-top:22px;height:48px}

/* drop the least load-bearing link before the bar ever wraps */
@media(max-width:1080px){.nav-links a[href="#why"]{display:none}}
@media(max-width:980px){.nav-links a[href="#how"]{display:none}}
@media(max-width:900px){
  .nav-links{display:none}
  .nav-right .btn-gh{display:none}
  .burger{display:flex}
}

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative;
  --plate:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  /* Shorter fall. The plate holds white for the header, then the light
     leaves quickly and the tail is a short dissolve rather than a long
     one: the whole transition is now ~160-205px instead of ~260-365px,
     so the page is black by the time the pill appears. */
  --fall:clamp(46px,5.2vh,66px);
  --tail:clamp(50px,6vh,78px);
  padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 76px) 0 74px;
  min-height:min(94vh,980px);display:flex;align-items:center;isolation:isolate;
}
/* A surveyed ground and sky, in one-point perspective. Two flat grids
   rotated on the X axis converge on a shared horizon set just above the
   globe's equator, so the page reads as a measured space rather than
   graph paper. Lines thin out into the horizon and firm up toward the
   viewer — that gradient is the depth cue, so it is never uniform. */
.hero-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  perspective:430px;perspective-origin:50% var(--hz,46%);
  --pg:rgba(255,255,255,.24);
  -webkit-mask:radial-gradient(74% 46% at 50% var(--hz,46%),rgba(0,0,0,.22) 0,rgba(0,0,0,.6) 52%,#000 100%);
  mask:radial-gradient(74% 46% at 50% var(--hz,46%),rgba(0,0,0,.22) 0,rgba(0,0,0,.6) 52%,#000 100%);
}
.hero-grid i{
  position:absolute;left:50%;width:300%;height:220%;margin-left:-150%;
  background:
    repeating-linear-gradient(90deg,var(--pg) 0 1px,transparent 1px 52px),
    repeating-linear-gradient(0deg,var(--pg) 0 1px,transparent 1px 52px);
  backface-visibility:hidden;
}
/* the ground: near edge at the bottom of the frame, far edge at the horizon */
.hero-grid .pg-f{
  top:var(--hz,46%);transform-origin:50% 0;transform:rotateX(72deg);
  -webkit-mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 6%,#000 22%);
  mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 6%,#000 22%);
}
/* the sky: same plane, mirrored, carried lighter so the eye stays down */
.hero-grid .pg-c{
  bottom:calc(100% - var(--hz,46%));transform-origin:50% 100%;transform:rotateX(-72deg);
  opacity:.6;
  -webkit-mask:linear-gradient(0deg,transparent 0,rgba(0,0,0,.6) 6%,#000 22%);
  mask:linear-gradient(0deg,transparent 0,rgba(0,0,0,.6) 6%,#000 22%);
}
/* the horizon itself — one rule, the thing every line is running at */
.hero-grid::after{
  content:"";position:absolute;left:0;right:0;top:var(--hz,46%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22) 26%,
             rgba(255,255,255,.22) 74%,transparent);
}
/* shallower rake and a lower horizon on phones, where the frame is tall */
@media(max-width:760px){
  .hero-grid{--hz:41%;perspective:320px}
  .hero-grid i{background:
    repeating-linear-gradient(90deg,var(--pg) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(0deg,var(--pg) 0 1px,transparent 1px 40px)}
}
/* a single measured rule with ticks, sat under the stat rail */
.hero-rule{position:absolute;left:0;right:0;bottom:34px;z-index:1;pointer-events:none;height:14px}
.hero-rule::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.hero-rule::after{
  content:"";position:absolute;left:0;right:0;top:0;height:7px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 22px);
}
.hero .wrap{position:relative;z-index:2}
.hero-in{max-width:900px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.hero-in .lede,.hero-in .cap,.hero-in .hero-rule-sm{margin-left:auto;margin-right:auto}
.hero-in .cap{justify-content:center}
.hero-in .hero-note{justify-content:center}
.hero-in .rail{width:100%;text-align:left}
h1.hero-h{text-shadow:0 2px 28px rgba(5,6,7,.85),0 0 90px rgba(5,6,7,.7)}
.hero .lede{text-shadow:0 1px 18px rgba(5,6,7,.9)}
.pill{
  display:inline-flex;align-items:center;gap:10px;height:30px;padding:0 13px 0 11px;
  border:1px solid var(--line-2);border-radius:100px;background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:12px;color:var(--dim);letter-spacing:-.005em;
}
.pill b{color:var(--text);font-weight:500}
.dot{width:5px;height:5px;border-radius:50%;background:var(--live);flex:none;position:relative}
/* the star sits inside a lit orb — the glow is a real object behind it,
   not a shadow on it, which is what makes it read as a light source */
.orb{
  position:relative;width:22px;height:22px;flex:none;display:grid;place-items:center;
  border-radius:50%;
  background:radial-gradient(circle,rgba(16,255,161,.42),rgba(16,255,161,.12) 46%,rgba(16,255,161,0) 72%);
}
.orb::after{
  content:"";position:absolute;inset:4px;border-radius:50%;
  border:1px solid rgba(16,255,161,.34);
  animation:orbring 3.4s ease-in-out infinite;
}
@keyframes orbring{
  0%,100%{transform:scale(.82);opacity:.75}
  50%    {transform:scale(1.14);opacity:.25}
}
.pill{padding-left:6px}

/* the four-point star from the mark, lit — a beam rather than a bullet */
.spark{
  width:13px;height:13px;flex:none;display:block;background:var(--mint);
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;
  filter:drop-shadow(0 0 5px rgba(16,255,161,.95)) drop-shadow(0 0 13px rgba(16,255,161,.55));
  animation:twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{opacity:.78;transform:scale(.9) rotate(0deg)}
  50%    {opacity:1;  transform:scale(1.12) rotate(8deg)}
}
.dot{box-shadow:0 0 0 3px var(--mint-glow)}
.dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--live);
  opacity:.5;animation:ping 2.4s var(--ease-2) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(2.1);opacity:0}}

/* Inter Tight, the institutional neo-grotesque: neutral by design, so the
   words carry the page rather than the letterforms. Tracked tight (-.042em)
   because a grotesque at 84px looks loose at its natural spacing. */
h1.hero-h{
  font-family:var(--display);
  font-size:clamp(40px,6.6vw,84px);letter-spacing:-.042em;margin:24px 0 0;
  line-height:1.02;font-weight:600;
}
/* upright, not italic — a grotesque italic is a slant, not a cut, and it
   reads as emphasis rather than as voice */
/* balance, because line 2 is longer than line 1 and will wrap on anything
   narrower than a wide desktop. Left to itself it breaks after "to" and
   orphans "knock." on a line of its own - one italic serif word, alone, in
   mint. Balanced it reads "ApexRound shows / you where to knock." */
h1.hero-h .l2{display:block;color:var(--mint);text-wrap:balance}
/* The record count is a <b> only so one JS writer can find it (the same one
   that fills the stat rail and the index foot, so the three can never
   disagree). A <b> defaults to `bolder`, which against the headline's own 600
   resolves to 900 - the number rendered visibly heavier than the words either
   side of it. It must be invisible as type. */
h1.hero-h b{font-weight:inherit;font-size:inherit;font-variant-numeric:lining-nums}
/* One word in a true italic, and it has to be a real one. Inter Tight ships
   no italic cut, so italicising it yields a synthetic oblique: the upright
   letterforms mechanically sheared. Instrument Serif is drawn italic, so the
   letters actually change shape. Set slightly larger because a serif reads
   smaller than a grotesque at the same point size. */
/* Instrument Serif italic is the page's ONE accent face, and it is now a
   system rather than a one-off: every section heading sets its turn - the
   clause carrying the argument - in it, and the sans states the fact. Inter
   Tight has no italic cut, so italicising it yields a synthetic oblique; the
   serif exists to supply a real one.

   1.06em because a serif at an identical px size optically reads smaller than
   the sans beside it. */
.em{
  font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  font-size:1.06em;
  letter-spacing:-.012em;
}
/* the hero sets its whole second line in it, so the bump is smaller there:
   at 1.1 the serif line outgrew the sans line above it */
h1.hero-h .l2{
  font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:400;font-size:1.04em;letter-spacing:-.012em;
}
/* a rule, not a gradient — it lets the serif sit on something */
.hero-rule-sm{width:74px;height:1px;background:var(--line-3);margin:30px 0 0}
.hero .lede{margin-top:22px;font-size:19px;max-width:52ch;text-wrap:balance}
@media(max-width:640px){.hero .lede{font-size:16px;margin-top:18px}}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;align-items:center}
.hero-note{font-size:12px;color:var(--dim-2);margin-top:16px;display:flex;align-items:center;gap:8px}

/* hero search */
.hsearch{
  margin-top:34px;max-width:620px;position:relative;
  border:1px solid var(--line-2);border-radius:12px;background:rgba(10,10,12,.62);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  display:flex;align-items:center;gap:12px;padding:0 6px 0 16px;height:56px;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.hsearch::before{
  content:"";position:absolute;inset:-1px;border-radius:13px;padding:1px;
  background:var(--g-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7;
}
.hsearch:focus-within{border-color:var(--line-3);box-shadow:0 0 0 4px rgba(255,255,255,.05),0 20px 50px -22px rgba(0,0,0,.9)}
.hsearch input{
  flex:1;min-width:0;background:none;border:0;outline:none;font-size:15px;height:100%;
  color:var(--text);letter-spacing:-.01em;
}
.hsearch input::placeholder{color:var(--dim-3)}
.hsearch .kbd{display:flex;gap:4px;flex:none}
kbd{
  font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--dim-2);
  border:1px solid var(--line);border-radius:5px;padding:3px 6px;background:rgba(255,255,255,.04);
  line-height:1;
}
@media(max-width:640px){.hsearch .kbd{display:none}.hsearch{height:52px}}

/* hero stat rail */
.rail{
  margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-2);
}
.rail div{padding:22px 22px 0 0;border-right:1px solid var(--line)}
.rail div:last-child{border-right:0}
.rail div{position:relative}
.rail div::before{content:"";position:absolute;left:0;top:-1px;width:34px;height:2px;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,.25))}
.rail{position:relative}
.rail::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 60%,transparent)}
.rail b{display:block;font-family:var(--display);font-size:clamp(26px,3vw,36px);font-weight:600;
  letter-spacing:-.036em;line-height:1;font-variant-numeric:tabular-nums lining-nums;
  background:linear-gradient(176deg,#fff 12%,#EDEDF2 40%,#A8A8B4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rail span{display:block;font-size:11.5px;color:var(--dim-2);margin-top:8px;letter-spacing:-.005em}
@media(max-width:760px){
  .rail{grid-template-columns:1fr 1fr;margin-top:44px}
  .rail div{padding:18px 18px 18px 0;border-bottom:1px solid var(--line)}
  .rail div:nth-child(2n){border-right:0}
  .rail div:nth-last-child(-n+2){border-bottom:0}
}

/* ═══════════════ MARQUEE ═══════════════ */
/* The marquee is a seam between the hero and the index, not a panel laid
   over them. A ruled box with a flat fill reads as a cut: the eye lands on
   the border, not the logos. So it starts and ends at the page colour,
   lifts only in the middle, and its rules are hairlines that fade out
   before they reach either edge. */
.marq{
  /* The band used to be drawn with a 1px rule at 26% white across its top
     edge, which is a hard line exactly where the page is meant to be
     easing out of black. Both rules are gone; the lift is carried by the
     vertical ramp alone, with enough stops that it never reads as a step.
     Taller than before so the ramp has room to happen. */
  position:relative;overflow:hidden;padding:52px 0 48px;border:0;
  background:linear-gradient(180deg,
    var(--bg) 0%,
    rgba(255,255,255,.004) 12%,
    rgba(255,255,255,.011) 24%,
    rgba(255,255,255,.019) 36%,
    rgba(255,255,255,.025) 48%,
    rgba(255,255,255,.024) 58%,
    rgba(255,255,255,.017) 70%,
    rgba(255,255,255,.009) 82%,
    rgba(255,255,255,.003) 92%,
    var(--bg) 100%);
}
.marq::before,.marq::after{content:"";position:absolute;top:0;bottom:0;width:190px;z-index:2;pointer-events:none}
.marq::before{left:0;background:linear-gradient(90deg,#050506 12%,rgba(5,5,6,0))}
.marq::after{right:0;background:linear-gradient(270deg,#050506 12%,rgba(5,5,6,0))}
/* The belt is DECORATION, so it takes no pointer events at all. It used to
   pause on hover and brighten the mark under the cursor, which made it look
   interactive when there is nothing to click - the items are spans, not
   links. Worse on touch: a tap LATCHES :hover, so tapping a logo froze the
   belt until the next tap elsewhere, which read as a bug. pointer-events:none
   means neither a cursor nor a finger can reach it, so no state to latch. */
.marq-t{display:flex;width:max-content;animation:slide 51s linear infinite;
  pointer-events:none}
.marq-t span{
  display:inline-flex;align-items:center;padding:0 34px;flex:none;
}
/* Each mark is used as a MASK, not an image. The source files are black,
   grey, red and purple; masking takes only their alpha, so every logo
   arrives as the same white silhouette at the same optical weight. */
.marq-t i{
  display:block;height:23px;background:#fff;opacity:.5;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
}
@media(max-width:640px){.marq-t i{height:19px}.marq-t span{padding:0 24px}}
/* `.marq-note` lived here - "A sample of funds in the index · Marks belong to
   their owners..." - and is deleted. Its margin-bottom was LOAD-BEARING: it
   was a sibling of .marq, #matching below sets padding-top:0, so that margin
   was the only thing holding the belt off the matching card's rounded edge.
   Removing the element without this would butt the two together, so the gap
   moves onto .marq itself. The "marks belong to their owners" disclaimer is
   not lost - the fine print's `sources` tab carries it ("Marks: logos belong
   to their owners. No affiliation implied."). */
.marq{margin-bottom:56px}
@media(max-width:760px){.marq{margin-bottom:40px}}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── WHITE LIGHT ──────────────────────────────────────────────────
   White on a near-black page has to behave like light, not paint. Every
   value here is under 10% — these are sources and lit edges, not fills.
   Anything heavier and the page turns grey. */

/* an ambient wash at the head of each section, so the page breathes
   rather than arriving as a stack of flat bands.

   The mask is not optional. The radial is brightest at `at 50% 0%`, i.e. ON
   its own top edge, and the element starts at top:-10% - so the glow began
   with a hard horizontal line partway up the section above, which read as a
   random band edge cutting across whatever card happened to be there. The
   mask ramps it in over the first fifth and back out at the foot, so the
   wash has no edge of its own anywhere. */
.sec{position:relative}
.sec::before{
  content:"";position:absolute;left:50%;top:-10%;transform:translateX(-50%);
  width:min(1240px,98%);height:68%;pointer-events:none;z-index:0;
  background:var(--w-wash);
  -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 62%,transparent);
          mask:linear-gradient(180deg,transparent,#000 22%,#000 62%,transparent)}
.sec > .wrap{position:relative;z-index:1}

/* every framed block catches light along its top edge and carries a
   faint sheen down from its upper-left corner */
.dir,.steps,.bento,.bento-foot,.claim,.pipe,.vows > div,.cell,.step{
  box-shadow:inset 0 1px 0 var(--w-edge)}
/* …and the same vault of light over the whole panel: lit along the top,
   pooling into shade at the foot. Layered as a background rather than an
   overlay so it can never sit on top of the words. */
.claim,.cell,.vows > div,.step,.pipe li,.dir-bar,.bento-foot div{
  background-image:var(--w-vault),var(--w-sheen)}
.steps,.bento,.pipe{background-image:var(--w-vault)}

/* a broad diagonal beam across the directory — the one place the page
   is allowed a real gesture rather than a hairline */
.dir{overflow:hidden}
.dir > .beam{
  position:absolute;inset:-40% -10%;z-index:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 22%,rgba(255,255,255,.075) 42%,
             rgba(255,255,255,.115) 50%,rgba(255,255,255,.055) 58%,transparent 76%);
  animation:beam 22s ease-in-out infinite alternate}
@keyframes beam{from{transform:translateX(-7%)}to{transform:translateX(7%)}}
.dir-meta,.tscroll,.openrow,.dir-foot{position:relative;z-index:1}
/* the filter bar outranks everything below it, so an open menu is never
   painted over by the meta row or the table */
.dir-bar{position:relative;z-index:5}

/* a lit seam above the directory — the page's centrepiece gets the
   brightest edge on it */
.dir{position:relative}
.dir::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;z-index:9;
  background:var(--w-seam);opacity:.55}

/* the closing section lifts out of the dark rather than sitting in it */
.final::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(900px,92%);height:1px;z-index:3;
  background:var(--w-seam)}
.final .wrap{position:relative;z-index:3}
/* the closing section sits in its own pool of light */
.final::after{
  content:"";position:absolute;left:50%;top:-6%;transform:translateX(-50%);
  width:min(1100px,96%);height:70%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 58% 100% at 50% 0%,
    rgba(255,255,255,.10),rgba(255,255,255,.03) 46%,transparent 76%)}

/* ── WHITE STRUCTURE ──────────────────────────────────────────────
   Surveyor's corner brackets and a pair of full-height gutter rules.
   They are the cheapest way to add white without adding weight: nothing
   fills, everything measures. */
.sec{--gut:clamp(14px,3vw,46px)}
.sec .wrap{position:relative}
.sec .wrap::before,.sec .wrap::after{
  content:"";position:absolute;top:-14px;bottom:-14px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.30) 10%,
             rgba(255,255,255,.30) 90%,transparent);
  pointer-events:none}
.sec .wrap::before{left:calc(var(--gut) * -1 + 28px)}
.sec .wrap::after{right:calc(var(--gut) * -1 + 28px)}
@media(max-width:900px){.sec .wrap::before,.sec .wrap::after{display:none}}

/* corner marks on the framed blocks */
.dir,.steps,.bento,.claim,.pipe,.vows > div{position:relative}
.dir::after,.steps::after,.bento::after,.claim::after,.pipe::after{
  content:"";position:absolute;inset:-1px;pointer-events:none;z-index:8;border-radius:inherit;
  background:
    linear-gradient(90deg,#fff 0 18px,transparent 18px) 0 0/100% 1px no-repeat,
    linear-gradient(90deg,transparent calc(100% - 18px),#fff calc(100% - 18px)) 0 0/100% 1px no-repeat,
    linear-gradient(90deg,#fff 0 18px,transparent 18px) 0 100%/100% 1px no-repeat,
    linear-gradient(90deg,transparent calc(100% - 18px),#fff calc(100% - 18px)) 0 100%/100% 1px no-repeat,
    linear-gradient(180deg,#fff 0 18px,transparent 18px) 0 0/1px 100% no-repeat,
    linear-gradient(180deg,transparent calc(100% - 18px),#fff calc(100% - 18px)) 0 0/1px 100% no-repeat,
    linear-gradient(180deg,#fff 0 18px,transparent 18px) 100% 0/1px 100% no-repeat,
    linear-gradient(180deg,transparent calc(100% - 18px),#fff calc(100% - 18px)) 100% 0/1px 100% no-repeat;
  opacity:1}

/* ONE line per section boundary. There used to be a second here - a white
   "lip" 26px under the seam, starting at full #fff hard against the column
   edge - so every heading arrived under two parallel rules and the brighter
   one looked chopped off. The seam below is the systematic one; this is the
   duplicate, and it is gone. */
.sec-head{position:relative}
/* a seam between every section, so the page reads as plated. Full bleed:
   --w-seam already fades to transparent at both ends, so insetting it to 6%
   only moved the fade inboard and made the line look truncated. */
.sec + .sec::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:var(--w-seam);opacity:.6;
  /* the join is lit, not merely drawn */
  box-shadow:0 0 26px rgba(255,255,255,.20)}

/* The pool token, spent where a section has to lift off the page:
   the index, the reasoning, and the close. */
/* The pool needs the same mask the section wash needs, and for the same
   reason. --w-pool is a radial centred at 34% of the element's height, so at
   the element's own TOP EDGE the gradient is still at roughly half its radius
   and carrying real brightness - it does not start from nothing. Unmasked,
   that edge is a hard full-width step across the page, which is what the
   "cuts right off" band at the head of #why was. Ramp it in and out and the
   pool has no edge of its own. */
#directory::after,#why::after,.final .wrap::after{
  content:"";position:absolute;left:50%;top:8%;transform:translateX(-50%);
  width:min(1320px,100%);height:84%;z-index:0;pointer-events:none;
  background:var(--w-pool);
  -webkit-mask:linear-gradient(180deg,transparent,#000 26%,#000 70%,transparent);
          mask:linear-gradient(180deg,transparent,#000 26%,#000 70%,transparent)}
#directory,#why{position:relative}

/* ═══════════════ SECTIONS ═══════════════ */
.sec{padding:128px 0;position:relative}
.sec.tight{padding:104px 0}
@media(max-width:760px){.sec{padding:88px 0}
  .sec.tight{padding:72px 0}}
.sec-head{max-width:760px;margin-bottom:64px}
.sec-head h2{font-family:var(--display);font-size:clamp(29px,4vw,46px);margin:18px 0 0;
  letter-spacing:-.038em;font-weight:600;line-height:1.06}
.sec-head .lede{margin-top:16px}
.hr{height:1px;background:var(--g-rule);opacity:.6}
.spot{
  /* min(), not a flat 900px: it is centred with left:50% + translateX(-50%),
     so at phone widths a fixed 900 hangs 260px past the right edge and drags
     the whole document with it. #how does not clip (nothing here may clip --
     the shared #tip panel and the fixed filter menus have to escape), so the
     glow has to size itself. */
  position:absolute;left:50%;top:-10%;width:min(900px,100%);height:520px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(255,255,255,.07),transparent 66%);
  pointer-events:none;z-index:0;filter:blur(20px);
}

/* ═══════════════ AI ASSIST ═══════════════ */
.ai-bar{
  display:flex;align-items:center;gap:14px;padding:20px 24px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(16,255,161,.055),rgba(16,255,161,.012));
  position:relative;
}
.ai-badge{
  font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  color:var(--mint-ink);background:var(--g-mint);border-radius:5px;padding:4px 7px;flex:none;
  line-height:1;
}
.ai-bar input{
  flex:1;min-width:0;height:40px;background:var(--bg);border:1px solid var(--line-2);
  border-radius:8px;padding:0 15px;font-size:13.5px;color:var(--text);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.ai-bar input:focus{border-color:rgba(16,255,161,.5);box-shadow:0 0 0 3px var(--mint-glow)}
.ai-bar input::placeholder{color:var(--dim-3)}
.ai-bar .btn{height:40px;flex:none}
@media(max-width:700px){
  .ai-bar{flex-wrap:wrap}
  .ai-bar input{order:3;width:100%;flex-basis:100%}
  .ai-bar .btn{margin-left:auto}
}
/* `.ai-ex`, the TRY row, lived here. It taught the same lesson the input's
   own placeholder already teaches - type a sentence like this one - and cost
   a whole band of the card to do it. Removed with the markup. */
/* Sits between the examples and the filter bar, on the same .07 ground, so
   it reads as another line of the card rather than a banner stuck onto it. */
.swept{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 24px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.055));
  font-size:11.5px;color:var(--dim-2);
}
.swept b{color:var(--text);font-weight:500;letter-spacing:-.01em}
.sw-dot{
  width:6px;height:6px;border-radius:50%;background:var(--live);flex:none;
  box-shadow:0 0 0 3px var(--mint-glow);
}
.sw-c{
  font-size:10px;letter-spacing:.03em;text-transform:none;
  color:var(--mint);border:1px solid rgba(16,255,161,.4);border-radius:5px;
  padding:2px 7px;line-height:1;
}
/* `.sw-w` held the strip's "why it matters" line - "Dead funds and parked
   domains are removed, not left for you to find" - and is DELETED at the
   owner's request. The claim itself survives in the provenance ledger's
   `limits` tab ("Removed: a firm whose domain goes up for sale comes out of
   the index"), so the page keeps the commitment and loses the sentence.
   Its rules go with it: `.sw-w` carried the only `margin-left:auto` in the
   strip, and leaving that behind is exactly how `.dir-foot .right` ended up
   shoving a lone label against empty space once before. */
@media(max-width:520px){.swept{padding:9px 14px;gap:8px}}

.ai-read{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 14px;
  border-bottom:1px solid var(--line);background:rgba(16,255,161,.04);font-size:12px;color:var(--dim);
}
.ai-read b{color:var(--text);font-weight:500}
/* every chip is a BUTTON now, so it has to look like one */
.ai-read button.rd{cursor:pointer;font-family:inherit;background:none}
.ai-read button.rd:hover{
  border-color:rgba(16,255,161,.85);background:rgba(16,255,161,.08);
}
.ai-read button.rd:hover::after{content:" \00D7";opacity:.8}
.ai-read button.rd.neg:hover{
  border-color:rgba(255,183,77,.85);background:rgba(255,183,77,.09);
}
.ai-read button.rd:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.ai-read .rd{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.04em;
  border:1px solid rgba(16,255,161,.45);color:var(--mint);border-radius:5px;padding:2px 7px;
}
.ai-read .miss{border-style:dashed;border-color:var(--line-2);color:var(--dim-2)}
/* An EXCLUSION is not a match, so it must not wear mint - mint is rationed to
   live / verified / matched / confirmed. A struck-through amber chip reads as
   "taken out" at a glance and cannot be mistaken for a thing you asked for. */
.ai-read .rd.neg{
  border-color:rgba(255,183,77,.45);color:#FFB74D;text-decoration:line-through;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,183,77,.6);
}
/* The honest-gap line. Deliberately NOT a chip: a chip reads as a constraint
   that was applied, and this is the opposite - the part of the sentence the
   index cannot answer. Plain amber text, full width, after the chips. */
.ai-read .rd-gap{
  flex-basis:100%;font-size:11.5px;color:#FFB74D;opacity:.92;letter-spacing:-.005em;
}

/* ═══════════════ DIRECTORY ═══════════════ */
.dir{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  position:relative;overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
}
.dir::before{
  content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:1px;
  background:var(--g-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3;
}
.dir-bar{
  display:flex;align-items:center;gap:10px;padding:13px 14px;
  border-bottom:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap;
}
.srch{
  flex:1;min-width:190px;display:flex;align-items:center;gap:9px;height:36px;padding:0 12px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);
  transition:border-color .2s,box-shadow .2s;
}
.srch:focus-within{border-color:var(--line-3);box-shadow:0 0 0 3px rgba(255,255,255,.045)}
.srch input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:13.5px;color:var(--text)}
.srch input::placeholder{color:var(--dim-3)}
.srch svg{color:var(--dim-2);flex:none}
.clr{
  border:0;background:none;color:var(--dim-2);cursor:pointer;padding:2px;display:none;
  line-height:0;border-radius:4px;transition:color .2s;
}
.clr:hover{color:var(--text)}
.clr.on{display:block}

/* dropdown filter */
.dd{position:relative;flex:none}
.dd-t{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 11px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);cursor:pointer;
  font-size:12.5px;color:var(--dim);transition:border-color .2s,color .2s,background .2s;
  font-weight:450;white-space:nowrap;
}
.dd-t:hover{border-color:var(--line-2);color:var(--text)}
.dd.on .dd-t,.dd-t.set{border-color:var(--line-3);color:var(--text);background:rgba(255,255,255,.06)}
.dd-t .cnt{
  font-family:"JetBrains Mono",monospace;font-size:10px;background:var(--g-mint);color:var(--mint-ink);
  border-radius:20px;min-width:16px;height:16px;display:none;align-items:center;justify-content:center;
  padding:0 5px;font-weight:600;
}
.dd-t .cnt.on{display:inline-flex}
.dd-t .cv{transition:transform .25s var(--ease);color:var(--dim-2)}
.dd.on .dd-t .cv{transform:rotate(180deg)}
/* The directory card clips its own overflow so the corners stay round,
   which used to slice the open menu in half. The menu is therefore laid
   out against the viewport and positioned from the trigger in JS, so no
   ancestor can clip it and it can flip up when it runs out of room. */
.dd-m{
  position:fixed;top:0;left:0;min-width:214px;z-index:120;
  border:1px solid var(--line-2);border-radius:11px;background:var(--surface-2);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.95);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top left;
  transition:opacity .2s,transform .2s var(--ease),visibility .2s;
  max-height:290px;overflow-y:auto;overscroll-behavior:contain;
}
.dd-m.up{transform:translateY(6px) scale(.98);transform-origin:bottom left}
.dd-m.on{opacity:1;visibility:visible;transform:none}
/* THE MENU IS MOVED TO <body> WHILE OPEN (see openDD), so the open
   state is a class on the menu itself - `.dd.on .dd-m` stops matching
   the moment it leaves its .dd, and the menu would never appear. */
.dd-m label.cur{background:rgba(255,255,255,.075);color:var(--text)}
.dd-f{position:sticky;top:-6px;z-index:2;margin:-6px -6px 6px;padding:6px;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.dd-f input{
  width:100%;height:30px;padding:0 9px;border-radius:6px;font-size:12.5px;
  border:1px solid var(--line);background:var(--bg);color:var(--text);outline:none}
.dd-f input:focus{border-color:var(--line-3)}
.dd-f input::placeholder{color:var(--dim-3)}
.dd-m label{
  display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:7px;cursor:pointer;
  font-size:13px;color:var(--dim);transition:background .16s,color .16s;user-select:none;
}
.dd-m label:hover{background:rgba(255,255,255,.055);color:var(--text)}
.dd-m input{position:absolute;opacity:0;pointer-events:none}
.bx{
  width:15px;height:15px;border:1px solid var(--line-2);border-radius:4.5px;flex:none;
  display:grid;place-items:center;transition:background .18s,border-color .18s;
}
.bx svg{opacity:0;transform:scale(.6);transition:.18s var(--ease);color:var(--mint-ink)}
.dd-m input:checked + .bx{background:var(--g-mint);border-color:transparent}
.dd-m input:checked + .bx svg{opacity:1;transform:none}
.dd-m input:focus-visible + .bx{outline:2px solid var(--mint);outline-offset:2px}
.dd-m .sep{height:1px;background:var(--line);margin:5px 4px}

.reset{
  height:36px;padding:0 11px;border:1px solid transparent;border-radius:8px;background:none;
  color:var(--dim-2);font-size:12.5px;cursor:pointer;transition:color .2s,border-color .2s;
  display:none;align-items:center;gap:6px;
}
.reset:hover{color:var(--text);border-color:var(--line)}
.reset.on{display:inline-flex}

/* meta strip */
.dir-meta{
  display:flex;align-items:center;gap:18px;padding:14px 24px;border-bottom:1px solid var(--line);
  background:var(--bg-2);font-size:11.5px;color:var(--dim-2);flex-wrap:wrap;
}
.dir-meta .n{color:var(--text);font-weight:500}
.dir-meta .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.srt{
  background:var(--surface-2);border:1px solid var(--line);border-radius:7px;height:28px;
  padding:0 26px 0 9px;font-size:11.5px;color:var(--dim);cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:border-color .2s,color .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B75' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}
.srt:hover{border-color:var(--line-2);color:var(--text)}
.srt option{background:#121216;color:#F7F7F8}

/* table */
.tscroll{overflow-x:auto;overflow-y:auto;max-height:620px;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.16) transparent}
.tscroll::-webkit-scrollbar{width:9px;height:9px}
.tscroll::-webkit-scrollbar-track{background:transparent}
.tscroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:20px;
  border:2px solid var(--surface)}
.tscroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26)}

/* table-layout:FIXED is what makes the <th> percentages mean anything. Under
   the default `auto`, the browser sizes columns from their content and the
   declared widths are only a hint - once the firm name stopped wrapping, the
   Investor column took 427px of a 24% slot and squeezed Stage to 125px, so
   the uniform chips wrapped all over again. Fixed honours 24/19/22/12/14/9
   exactly, which is also what lets the name ellipsis engage. */
/* min-width 1165 and the value sits in a NARROW WINDOW, so do not round it.
   The table already scrolls sideways inside #tscroll on a phone, so a higher
   floor costs nothing there, and it is what keeps rows uniform below desktop:
     LOWER BOUND  the widest Focus cell is Marketplaces(90) + 64 + 64 + 12 gaps
                  = 230px of content, +48 padding = 278px, and Focus is 24%,
                  so the table must be at least 278/0.24 = 1158px.
     UPPER BOUND  at a 1280 viewport the table's own content box measures
                  1171px. A min-width above that makes the DESKTOP scroll
                  sideways, which it must never do.
   1165 clears both. At 990 the Focus column gave 190px against the 204px
   three uniform chips need, and every three-sector row wrapped. */
table{width:100%;border-collapse:collapse;min-width:1010px;table-layout:fixed}
thead th{
  position:sticky;top:0;z-index:5;background:var(--surface-2);
  font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:500;letter-spacing:.03em;
  text-transform:none;color:var(--dim-2);text-align:left;padding:14px 24px;
  border-bottom:1px solid rgba(255,255,255,.26);white-space:nowrap;
  background-image:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
tbody tr.row{border-bottom:1px solid var(--line-soft);transition:background .16s;
  cursor:pointer}
tbody tr.row:hover{background:rgba(255,255,255,.05)}
tbody tr.row.open{background:rgba(255,255,255,.045)}
/* 19px top and bottom, against 14 before. A directory is read by scanning
   DOWN a column, and the eye needs a clear gap between rows to do that
   without re-reading the line above. The 24px gutter matches every band. */
tbody td{padding:19px 24px;vertical-align:middle;font-size:13.5px}

.fname{display:flex;align-items:center;gap:14px;min-width:0}
/* Where a firm has no mark we can source, it gets a monogram rather than
   a hole: a deterministic hue drawn from the name, so the same firm always
   wears the same colour and the column still reads as a set of identifiers
   you can scan. Nothing here pretends to be the firm's own branding. */
.logo{
  width:32px;height:32px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-family:"Inter Tight";font-size:12px;font-weight:650;letter-spacing:-.045em;
  color:#fff;overflow:hidden;position:relative;
  background:
    linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,0) 58%),
    hsl(var(--lh,160) 42% 30%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 0 0 1px rgba(255,255,255,.07) inset;
}
/* Each firm's own square mark, sourced from its site. Kept in full colour
   here — in a data table the logo is an identifier you scan for, so the
   colour is doing work. (The marquee still masks to white, where the job
   is the opposite: one row, one weight.) */
/* Every firm's own mark, fetched from its own site and packed into a
   single sheet: 1,473 separate images would be 1,473 requests, so the
   cell is chosen with background-position instead. */
/* The sheet is 922KB - most of the page's weight - and the table it serves
   starts ~1,400px down. Browsers fetch a background as soon as a VISIBLE
   element matches the rule, and render() paints 120 rows immediately, so this
   used to download before the hero had finished. It is gated on
   html.spr-ready, which an IntersectionObserver sets when the directory comes
   within 800px. Monogram fallback shows meanwhile, and the swap is invisible
   because the cell size never changes. */
.logo.spr{
  background:#fff no-repeat;
  background-size:1344px 1280px;
  background-position:calc(var(--c) * -32px) calc(var(--r) * -32px);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
}
html.spr-ready .logo.spr{background-image:url("assets/marks/sprite.webp")}
.logo.has-pic{background:#fff;padding:0;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.logo.has-pic img{width:100%;height:100%;object-fit:contain;display:block;padding:3px}
/* a real favicon is square and small; contain keeps wordmarks readable */
.logo.has-ico{background:#fff}
.logo.has-ico img{object-fit:contain;padding:4px;image-rendering:auto}
/* The name TRUNCATES, it does not wrap. Uniform chips need the Stage column
   wider, that width comes out of Investor, and a wrapping name is what put
   row heights at 82/89/104/125 - the name block ran to FOUR lines (108px)
   on firms like "Vitosha Venture Partners".

   `.nm` must be BLOCK, not flex. It holds the name as a bare text node with
   the verified tick as a sibling <svg>, so there is no inner element for
   text-overflow to act on while it is a flex container - an earlier attempt
   targeting `.nm > span:first-child` matched nothing and truncated 0 names.
   As a block with nowrap the whole line ellipsises and the tick rides along
   inline. `min-width:0` on the flex parents is the other half: a flex item
   refuses to shrink below its content without it, so the ellipsis would
   never engage however the column is sized. */
.fname .nm{font-weight:500;letter-spacing:-.015em;min-width:0;
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fname .nm .vf{display:inline-block;vertical-align:-2px;margin-left:7px}
/* the last character and the tick, as one unbreakable unit - see nameCell() */
.fname .nm .nm-e{white-space:nowrap}
/* :not(.logo) is load-bearing. The logo IS a <span>, so a bare
   `.fname > span{flex:1}` stretched the 32px mark to 104px and left the name
   104px of a 221px cell - every firm, including "Y Combinator", came out
   ellipsised and lost its verified tick. */
.fname > span:not(.logo){min-width:0;flex:1}
.fname > .logo{flex:none}
/* `display:block` is the load-bearing word here. `.sub` is a <span>, and
   overflow/text-overflow DO NOTHING on an inline box - so for as long as the
   Investor column was 410px wide the line simply painted past the cell and
   nobody saw it. At 182px on a phone it ran under the Stage chip. As a block
   it clips to the parent flex item (which carries min-width:0) and ellipsises
   where it should. */
.fname .sub{display:block;font-size:11.5px;color:var(--dim-2);margin-top:2px;
  letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the geography drops to its REGION on a phone: "Accelerator · MENA · Africa"
   becomes "Accelerator · MENA". The full string is one tap away in the drawer,
   which prints GEO in full, so nothing is lost - and an ellipsis mid-country
   tells a reader less than a clean region does. */
.fname .sub .g-s{display:none}
.vf{width:13px;height:13px;flex:none;color:var(--mint);opacity:.9}
/* An unconfirmed record says so on its face. A blank where the tick goes
   reads as verified, and that is the one lie a directory cannot afford. */
.unconf{
  font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.08em;
  color:var(--dim-2);border:1px dashed var(--line-2);border-radius:4px;
  padding:1px 5px;white-space:nowrap;
}
/* EVERY chip is the same size. Measured across 1,320 rendered rows: the stage
   column holds exactly two labels (Pre-seed 70px, Seed 45px) and the focus
   column 22, most of which already sat at the same width - Software,
   Deeptech, Consumer, Security, Commerce, Devtools. 64px is that shared
   width once the side padding comes down from 9px to 6, and the short ones
   (AI, Bio, +1, +2, Seed) now match it instead of shrinking to their text.

   The 6px padding is not cosmetic. At 9px a Focus cell holding three chips
   needed 222px and a Marketplaces row needed 248, against 233px of column -
   so 90 of 1,560 rows wrapped to a second line and broke uniform row height.
   At 6px the same cases are 204px and 230px, and every row is one line.

   It is min-width, not width, because two labels genuinely exceed it:
   Enterprise 83px and Marketplaces 96px. Forcing those to 70 would need
   either an ellipsis mid-word or a smaller type size, and widening every
   chip to 96 instead would break the two-up layout - 96+96+6 is 198px in a
   180px column, so the focus cell would wrap to three lines and row heights
   would stop being uniform.

   Centred, because a box wider than its word reads as deliberate when the
   word sits in the middle of it and as a mistake when it is jammed left. */
.tag{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:64px;height:20px;padding:0 6px;border-radius:5px;
  border:1px solid var(--line);background:rgba(255,255,255,.045);
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.03em;color:var(--dim);
  white-space:nowrap;
}
/* STACKED, not side by side. Pre-seed above Seed; Software above Fintech
   above the +N. Up to three per fund, which is the real maximum: focus
   renders two sectors plus a +N counter, stage renders at most two.

   min-height reserves all three rows on EVERY row, so a fund with one
   sector does not make a shorter row than one with four. Without it the
   table would have three different row heights (1,631 / 2,238 / 2,527 rows
   respectively) and the uniform height would be gone again. */
.tags{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  min-height:68px;justify-content:center}
.chk{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--text);white-space:nowrap}
.est{color:var(--dim-2);border-bottom:1px dotted var(--line-2);cursor:help}
.th-sub{font-weight:400;opacity:.5;letter-spacing:.06em}
/* the count carries the claim; the dot only grades it */
.ans{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--dim)}
.ans b{color:var(--text);font-weight:600;font-size:12.5px}
.ans i{width:6px;height:6px;border-radius:50%;flex:none}
.ans.hi i{background:var(--mint);box-shadow:0 0 0 3px var(--mint-glow)}
.ans.mid i{background:#E8D48A;box-shadow:0 0 0 3px rgba(232,212,138,.14)}
.ans.lo i{background:#8A8A94}
.ans.none{color:var(--dim-3);font-size:10.5px;letter-spacing:.06em}

/* fit meter */
.fit{display:flex;align-items:center;gap:9px;min-width:96px}
.bar{width:54px;height:4px;border-radius:20px;background:rgba(255,255,255,.1);overflow:hidden;flex:none}
.bar i{display:block;height:100%;border-radius:20px;background:var(--g-mint);
  width:0;transition:width .9s var(--ease);box-shadow:0 0 8px -1px var(--mint-glow)}
.fit b{font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:500;color:var(--text)}

.rt{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim);white-space:nowrap}
.rt.pend{color:var(--dim-3)}
.rt.pend .rdot{background:var(--dim-3);box-shadow:none}
.rt .rdot{width:5px;height:5px;border-radius:50%;flex:none;background:var(--dim-2)}
.rt.open .rdot{background:var(--live);box-shadow:0 0 0 3px var(--mint-glow)}

/* "not stated" / "not scored" - the quiet tier, so an absent value reads as
   absent rather than as a value. --dim-3 is the audited 4.6-5.1:1 token. */
.nov{color:var(--dim-3);font-variant-numeric:normal}
.fit.nov{justify-content:flex-start}
.act{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.ib{
  width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--dim-2);
  transition:color .2s,border-color .2s,background .2s,transform .2s var(--ease);
}
.ib:hover{color:var(--text);border-color:var(--line-2);background:rgba(255,255,255,.05)}
.ib:active{transform:scale(.92)}
.ib.saved{color:var(--mint-ink);background:var(--g-mint);border-color:transparent}
/* applied is a state, not an action — it reads filled and quiet */
.ib.mark{color:var(--dim-3)}
.ib.mark:hover{color:var(--mint);border-color:rgba(16,255,161,.45)}
.ib.mark.applied{color:var(--mint-ink);background:var(--g-mint);border-color:transparent}
.ib .cv{transition:transform .25s var(--ease)}
tr.row.open .ib .cv{transform:rotate(180deg)}

/* expanded drawer */
tr.det td{padding:0;border-bottom:1px solid var(--line)}
.det-in{
  display:grid;grid-template-columns:1.45fr 1fr;gap:30px;padding:22px 16px 26px 59px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
}
.det-in h4{font-size:14px;letter-spacing:-.02em;margin-bottom:9px;font-weight:600}
.det-in p{font-size:13.5px;color:var(--dim);line-height:1.62;max-width:62ch}
.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:12.5px;margin-top:2px}
.kv dt{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.03em;
  text-transform:none;color:var(--dim-3);padding-top:3px}
.kv dd{margin:0;color:var(--dim)}
/* the applied date in a record. Mint for the same reason the tick is. */
.kv .apd{color:var(--mint);font-variant-numeric:tabular-nums}
.det-cta{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}

/* LOCKED CONTROLS
   Everything stays visible and in place; only the action is withheld. The
   padlock is the whole signal, so these keep their normal colour rather than
   being greyed out - a greyed control reads as broken, a padlocked one reads
   as paid. */
.lkg{width:11px;height:11px;flex:none;opacity:.75;margin-left:2px}
.rt.lkr{
  font:inherit;background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.rt.lkr .lkg{width:10px;height:10px;opacity:.6}
.rt.lkr:hover{text-decoration:underline;text-underline-offset:3px}
.btn.lkb{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.lkd{display:inline-flex;align-items:center;gap:7px;color:var(--dim-2)}

/* unused once the drawer opens in full, kept only so an older build that still
   emits .lk rows does not paint raw: */
.lk-in{
  display:flex;align-items:center;gap:18px;padding:20px 22px 20px 59px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
}
.lk-i{width:20px;height:20px;flex:none;color:var(--dim-3)}
.lk-t{min-width:0;flex:1}
.lk-in h4{font-size:13.5px;font-weight:600;letter-spacing:-.015em;margin:0 0 4px}
.lk-in p{font-size:12.5px;color:var(--dim-2);line-height:1.58;margin:0;max-width:66ch}
.lk-cta{flex:none;height:38px;padding:0 16px;font-size:13px}
@media(max-width:760px){
  .lk-in{flex-direction:column;align-items:flex-start;gap:13px;padding:18px 16px}
  .lk-cta{width:100%}
}

@media(max-width:760px){.det-in{grid-template-columns:1fr;gap:22px;padding:20px 16px 24px}}

.empty{padding:70px 20px;text-align:center}
.empty h4{font-size:17px;margin-bottom:8px}
.empty p{font-size:13.5px;color:var(--dim-2);margin-bottom:18px}
.empty-acts{margin-bottom:14px}
.empty-acts:empty{display:none}
/* what you typed, found in what you got */
mark{background:rgba(16,255,161,.16);color:var(--mint);border-radius:3px;
  padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* `.dir-foot` is DELETED - markup and CSS. It carried one line, "Every
   listing verified", which the card already proves: every row shows a tick
   and the sweep strip states the cadence three bands above it. The owner's
   call, and the same reasoning that removed the sweep DATE from it earlier.
   The export strip above is now the card's last band. */

/* locked overlay teaser */
.more{
  display:block;width:100%;padding:15px 16px;border:0;border-top:1px solid var(--line);
  background:var(--surface-2);color:var(--dim);font-size:12.5px;font-family:inherit;
  cursor:pointer;transition:background .2s,color .2s;position:relative;z-index:1}
.more:hover{background:rgba(255,255,255,.05);color:var(--text)}
.more b{color:var(--text);font-weight:600}
.more span{color:var(--dim-3)}
.openrow{
  position:relative;z-index:6;padding:16px;border-top:1px solid var(--line);
  background:var(--surface);display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.openrow p{font-size:12.5px;color:var(--dim-2);margin:0}
.openrow b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
/* `.openrow .quiet` is DELETED with its link. "Get early access and your own
   pipeline" was the FIFTH place on the page asking for the same thing - the
   sticky nav button, the hero form, the handoff, #access itself - and the
   nav one is on screen at every scroll position. The count line stays: it is
   a fact, not a pitch. */

/* ═══════════════ STEPS ═══════════════ */
/* minmax(0,1fr), NOT 1fr. 1fr is minmax(auto,1fr), so a cell holding nowrap
   mono labels pushed its column wider than its neighbours - measured at
   304 / 331 / 345px for three "equal" steps. */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.step{background-color:var(--bg);padding:40px 34px 44px;position:relative;transition:background .4s var(--ease)}
.step:hover{background-color:var(--surface)}
.step .no{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.04em;color:var(--mint);
  display:block;
}
.step h3{font-size:20px;margin:16px 0 10px;letter-spacing:-.03em}
.step p{font-size:14px;color:var(--dim);line-height:1.6}
.step .vis{
  margin-top:24px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);padding:14px 15px;min-height:74px;
  display:flex;align-items:center;
}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
@media(max-width:820px){
  .step{padding:22px 18px 24px}
  .step h3{font-size:17px;margin:12px 0 8px}
  .step p{font-size:12.5px}
}

/* the artifact of each step. `.v-in` lived here - a mono echo of the typed
   sentence with a blinking caret - and went when step 01 stopped being about
   typing. One less animation, which is the direction of travel. */
.v-chips{display:flex;flex-wrap:wrap;gap:6px}
.v-chips span{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:5px;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.03em;
  border:1px solid rgba(16,255,161,.34);color:var(--mint);background:rgba(16,255,161,.07);
  white-space:nowrap;
}
.v-chips span.q{border-color:var(--line);color:var(--dim-2);background:rgba(255,255,255,.03)}

.v-route{display:flex;align-items:center;gap:10px;width:100%}
.v-route .rdot{width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none;
  box-shadow:0 0 0 3px var(--mint-glow)}
.v-route b{font-size:13px;font-weight:500;letter-spacing:-.015em}
.v-route svg{margin-left:auto;color:var(--dim-2);flex:none}

/* Step 03's artifact is the applied state itself, drawn the way the table
   draws it - a mint-filled tick, then the date - so the step and the row
   cannot drift apart. Mint is earned: applied is a confirmed fact about the
   record, which is exactly what mint is rationed for. */
.v-appl{display:flex;align-items:center;gap:10px;width:100%}
.v-appl .va-t{
  width:22px;height:22px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:var(--g-mint);color:var(--mint-ink);
}
.v-appl b{font-size:13px;font-weight:500;letter-spacing:-.015em}
.v-appl .va-d{
  margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px;
  color:var(--dim-2);font-variant-numeric:tabular-nums;
}

/* ═══════════════ THE FLOW DIAGRAMS (How it works) ═══════════════
   Each step's artifact is a small diagram with ONE moment of motion, and
   the three speak DIFFERENT visual languages - the owner's second brief,
   after a first cut where all three were "mono pills, mint slab, thin rails"
   and rhymed even with different layouts:

     01  the index's own FILTER CHIPS converging on a NUMBER that counts
         down 6,401 -> 1,922 -> 334 -> 117 as each chip lands. No slab.
     02  a RECORD CARD and three DOORWAY TILES with glyphs, in sans type;
         the taken door opens - mint edge grows, an arrow slides out.
     03  the index's own ROW; the tick fills and a DATE STAMP slams in.

   What they share is the pulse and the clock. The pulse mechanism is
   yieldcompass.fi's, read off the live page: a dim 1px rail with a 2px
   bright path whose stroke-dashoffset travels its length, then a long
   quiet. `pathLength="100"` on every pulse path makes one keyframe fit any
   geometry: dasharray 18 100 is "about to enter" at offset 18 and "just
   left" at -100, elbow or stub alike. Nothing is JavaScript.

   ONE CLOCK: --cyc 15s, every delay calc(--t0 + offset), --t0 = (n-1)*4.6s.
   The pulse runs step 1, lands, runs 2, lands, runs 3, rests. That carry
   across the row is the carousel; on a phone the row is a scroll-snap strip.

   MINT IS EARNED: the landed number, the opened door, the filled tick and
   the stamp are mint because matched / routed / applied are confirmed
   states. Inputs, the record card and untaken doors never get it. */
.step .vis.fl{
  --cyc:15s;--t0:calc((var(--n) - 1) * 4.6s);
  display:flex;align-items:center;gap:0;
  height:124px;min-height:0;padding:6px 10px;overflow:hidden;
}
/* connectors */
.fl-c{flex:0 0 22px;width:22px;height:100%;display:block;overflow:visible}
.fl-c .rail path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;vector-effect:non-scaling-stroke}
.fl-c .rail .ah{fill:rgba(255,255,255,.22);stroke:none}
.fl-c .pz{
  fill:none;stroke:var(--mint);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:18 100;stroke-dashoffset:18;opacity:0;
  animation:fl-pulse var(--cyc) linear infinite;
  filter:drop-shadow(0 0 3px rgba(16,255,161,.55));
}
.fl-c .p1{animation-delay:var(--t0)}
@keyframes fl-pulse{0%{stroke-dashoffset:18;opacity:0}.8%{opacity:1}3.6%{opacity:1}4.2%,100%{stroke-dashoffset:-100;opacity:0}}

/* ── 01 FUNNEL: chips -> counting number -> rows ─────────────────────── */
.fn-chips{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:0 0 auto}
.fn-chips span{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:5px;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.03em;white-space:nowrap;
  border:1px solid rgba(16,255,161,.34);color:var(--mint);background:rgba(16,255,161,.07);
  animation:fn-chip var(--cyc) linear infinite;animation-delay:calc(var(--t0) + var(--k) * .18s);
}
.fl-c .pc{animation-delay:calc(var(--t0) + var(--k) * .18s)}
/* chip k's pulse lands at .55s + .18k; the number steps on each landing.
   All four digits sit in one grid cell and take turns being visible. */
.fn-count{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.fn-n{display:grid;font-family:"Inter Tight",Inter,sans-serif;font-weight:600;font-size:23px;
  letter-spacing:-.035em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.fn-n i{grid-area:1/1;font-style:normal;text-align:center;opacity:0;animation:var(--cyc) linear infinite;animation-delay:var(--t0)}
.fn-n i[style*="--k:0"]{animation-name:fn-n0}
.fn-n i[style*="--k:1"]{animation-name:fn-n1}
.fn-n i[style*="--k:2"]{animation-name:fn-n2}
.fn-n i.fin{animation-name:fn-n3;color:var(--mint);text-shadow:0 0 18px rgba(16,255,161,.35)}
.fn-count span{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.035em;text-transform:none;color:var(--dim-2)}
.fl-c .p4{animation-delay:calc(var(--t0) + 1.2s + var(--k,0) * .14s)}
.fn-rows{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;max-width:108px}
.fn-rows span{
  display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:-.01em;color:var(--dim-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.6;
  animation:fn-row var(--cyc) linear infinite;animation-delay:calc(var(--t0) + 1.4s + var(--k) * .25s);
}
@keyframes fn-chip{0%{border-color:rgba(16,255,161,.34);background:rgba(16,255,161,.07)}
  3%,100%{border-color:rgba(16,255,161,.9);background:rgba(16,255,161,.16)}}
@keyframes fn-n0{0%,3.6%{opacity:1}3.9%,100%{opacity:0}}
@keyframes fn-n1{0%,3.6%{opacity:0}3.9%,4.8%{opacity:1}5.1%,100%{opacity:0}}
@keyframes fn-n2{0%,4.8%{opacity:0}5.1%,6%{opacity:1}6.3%,100%{opacity:0}}
@keyframes fn-n3{0%,6%{opacity:0;transform:scale(1.18)}6.3%{opacity:1;transform:scale(1.18)}7.2%,100%{opacity:1;transform:none}}
@keyframes fn-row{0%{opacity:.6;color:var(--dim-2)}1.6%,100%{opacity:1;color:var(--text)}}

/* ── 02 DOORS: a record card -> three doorway tiles, one opens ────────── */
.dr-rec{
  /* 104px, and the sub-line is the TYPE alone. At 118px with "Accelerator -
     UK" the card ate the width the door tiles needed, and "Application form"
     clipped - but only once Inter had loaded; the narrower fallback fitted,
     which is why a measurement taken 2.5s after load called it clean.
     Measure after document.fonts.ready, always. */
  flex:0 0 auto;max-width:104px;display:flex;align-items:center;gap:7px;
  padding:7px 8px 7px 7px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  animation:dr-rec var(--cyc) linear infinite;animation-delay:var(--t0);
}
.dr-rec span{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.dr-rec b{font-size:11.5px;font-weight:500;letter-spacing:-.015em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-rec small{font-size:9px;color:var(--dim-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-list{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:6px}
.dr{
  position:relative;display:flex;align-items:center;gap:7px;height:24px;padding:0 8px 0 9px;
  border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  font-size:10.5px;letter-spacing:-.01em;color:var(--dim-2);white-space:nowrap;overflow:hidden;
}
.dr svg{width:11px;height:11px;flex:none;opacity:.8}
.dr b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
/* the exit arrow is OUT OF FLOW. In the row it took 15px that "Application
   form" needed at phone width and the label clipped; as an absolutely placed
   cue on the tile's right edge it costs the text nothing. The open tile
   reserves 18px of right padding so the label never runs under it. */
.dr em{position:absolute;right:7px;top:50%;font-style:normal;font-family:"JetBrains Mono",monospace;font-size:11px;
  color:var(--mint);opacity:0;transform:translate(-5px,-50%)}
.dr.open{padding-right:18px}
.dr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--mint);transform:scaleY(0);transform-origin:top}
.dr.open{animation:dr-open var(--cyc) linear infinite;animation-delay:calc(var(--t0) + .6s)}
.dr.open::before{animation:dr-bar var(--cyc) var(--ease) infinite;animation-delay:calc(var(--t0) + .6s)}
.dr.open em{animation:dr-exit var(--cyc) var(--ease) infinite;animation-delay:calc(var(--t0) + 1s)}
.dr.rest{animation:dr-pass var(--cyc) linear infinite;animation-delay:calc(var(--t0) + .95s + var(--k) * .1s)}
@keyframes dr-rec{0%,100%{border-color:var(--line)}1.5%,5%{border-color:var(--line-3)}8%{border-color:var(--line)}}
@keyframes dr-open{0%{border-color:var(--line);background:rgba(255,255,255,.02);color:var(--dim-2)}
  1.6%,100%{border-color:rgba(16,255,161,.55);background:rgba(16,255,161,.09);color:var(--text)}}
@keyframes dr-bar{0%{transform:scaleY(0)}1.6%,100%{transform:scaleY(1)}}
@keyframes dr-exit{0%{opacity:0;transform:translate(-5px,-50%)}1.5%{opacity:1;transform:translate(0,-50%)}4%,100%{opacity:1;transform:translate(4px,-50%)}}
@keyframes dr-pass{0%,100%{border-color:var(--line)}1.6%,4%{border-color:var(--line-2)}7%{border-color:var(--line)}}

/* ── shared: the real marks. The same files the table serves, at 2x the
   box so they stay crisp on a retina display. White ground + inset ring is
   the table's own treatment of a logo, so the diagram matches the product. */
.fl-mark{flex:none;border-radius:5px;background:#fff;object-fit:contain;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);display:block}
.fn-rows .fl-mark{width:16px;height:16px;border-radius:4px}
.dr-rec .fl-mark{width:22px;height:22px;border-radius:6px}
.fr-row .fl-mark{width:26px;height:26px;border-radius:6px}

/* ── 03 ROW + SENT ────────────────────────────────────────────────────── */
/* A rubber stamp was the wrong register - the owner's word was "corny". The
   moment is a message leaving, so it is drawn as one: the tick fills, a
   paper plane lifts off it and glides up and right on a short arc, and a
   plain mono ledger line prints underneath. Restraint is the design. */
.step .vis.fl.fl-rowv{flex-direction:column;align-items:stretch;justify-content:center;gap:10px}
.fr-row{display:flex;align-items:center;gap:9px;min-width:0}
.fr-name{min-width:0;display:flex;flex-direction:column;line-height:1.15;font-size:12.5px;font-weight:500;
  letter-spacing:-.015em;color:var(--text);white-space:nowrap}
.fr-name i{font-style:normal;font-size:9.5px;color:var(--dim-2);letter-spacing:0;font-weight:400;margin-top:2px}
.fr-line{flex:1 1 20px;width:auto;height:8px;min-width:18px}
.fr-tick{position:relative;flex:none;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--dim-3);background:rgba(255,255,255,.03);
  animation:fl-tickbox var(--cyc) linear infinite;animation-delay:calc(var(--t0) + .75s)}
.fr-tick > svg:first-child{width:12px;height:12px;opacity:.35;animation:fl-tickin var(--cyc) linear infinite;animation-delay:calc(var(--t0) + .75s)}
/* THE SEND-OFF. The plane starts ON the tick and leaves it: 20px, a longer
   rising arc (120 across, 72 up, ~1.4s), and a thin dashed trail that draws
   itself behind the plane and fades. Still one glyph, one colour, one
   glow - larger and more legible, not busier. overflow is visible on this
   step's .vis so the flight is not clipped at the box edge. */
.step .vis.fl.fl-rowv{overflow:visible}
.fr-fly{position:absolute;left:3px;top:3px;width:20px;height:20px;color:var(--mint);opacity:0;pointer-events:none;
  filter:drop-shadow(0 0 5px rgba(16,255,161,.5));
  animation:fr-fly var(--cyc) var(--ease-out) infinite;animation-delay:calc(var(--t0) + 1s)}
.fr-trail{position:absolute;left:4px;bottom:4px;width:120px;height:84px;overflow:visible;pointer-events:none;
  transform:translate(6px,-6px)}
.fr-trail path{fill:none;stroke:var(--mint);stroke-width:1.2;stroke-linecap:round;
  stroke-dasharray:3 4;stroke-dashoffset:0;opacity:0;
  animation:fr-trail var(--cyc) linear infinite;animation-delay:calc(var(--t0) + 1.05s)}
.fr-stamp{display:flex;align-items:center;gap:14px;padding:0 2px 0 35px;min-height:16px;
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.03em;color:var(--dim-2);white-space:nowrap}
.fr-sent{display:inline-flex;align-items:center;gap:6px;color:var(--dim);opacity:0;transform:translateY(3px);
  animation:fl-stamp var(--cyc) var(--ease) infinite;animation-delay:calc(var(--t0) + 1.55s)}
.fr-sent i{width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 2px var(--mint-glow)}
.fr-count{opacity:0;transform:translateY(3px);animation:fl-stamp var(--cyc) var(--ease) infinite;animation-delay:calc(var(--t0) + 1.95s)}
.fr-count b{color:var(--text);font-weight:500}
@keyframes fl-tickbox{0%{border-color:var(--line-2);background:rgba(255,255,255,.03);color:var(--dim-3);box-shadow:none}
  1.5%,100%{border-color:#0AD186;background:var(--g-mint);color:var(--mint-ink);box-shadow:0 0 0 4px var(--mint-glow),0 0 18px rgba(16,255,161,.3)}}
@keyframes fl-tickin{0%{opacity:.35;transform:scale(.8)}1.5%,100%{opacity:1;transform:scale(1)}}
/* ~1.4s of flight on a rising arc, then gone. 15s = 100%, so 9% ≈ 1.35s.
   The trail is a dash pattern revealed by a clip-path sweep: it appears
   behind the plane and lingers a beat after it has left. */
@keyframes fr-fly{
  0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.8)}
  .7%{opacity:1;transform:translate(3px,-3px) rotate(-6deg) scale(1)}
  4.5%{opacity:1;transform:translate(60px,-40px) rotate(-14deg) scale(1.02)}
  9%,100%{opacity:0;transform:translate(118px,-74px) rotate(-18deg) scale(.92)}}
@keyframes fr-trail{
  0%{opacity:0;clip-path:inset(0 100% 0 0)}
  1%{opacity:.9;clip-path:inset(0 100% 0 0)}
  8.5%{opacity:.9;clip-path:inset(0 0 0 0)}
  13%,100%{opacity:0;clip-path:inset(0 0 0 0)}}
@keyframes fl-stamp{0%{opacity:0;transform:translateY(3px)}2%,100%{opacity:1;transform:none}}

/* ── THE SCROLL-DRIVEN TRACK ─────────────────────────────────────────────
   Every size, not a breakpoint: the cards are `min(640px, 100vw - 48px)`
   so the track overflows the viewport on a desktop too, and the overflow
   is what you scroll through. The runway (`.how-stage`) is the pin's height
   plus the travel, set by JS; the pin sticks under the fixed nav; the track
   gets translate3d(-progress * travel) where progress is how far down the
   runway you are. 1:1 - a pixel of wheel is a pixel of slide, which is what
   makes it feel like the page is doing it rather than a script.

   The base `.steps` grid rule above is overridden here for all widths. */
.how-stage{position:relative}
.how-pin{position:sticky;top:var(--nav-h,64px);overflow-x:clip;padding-bottom:32px;transition:none}
.how-pin .sec-head{margin-bottom:40px}
/* `.how-stage .steps`, not `.steps`: three later rules beat a bare class -
   the plate-ramp `background-image`, the shared vault/sheen, and an inset
   lit hairline - so the TRACK kept painting a light rectangle behind the
   cards, and wherever a card's rounded corner cut away, that fill showed as
   a square frame hugging the card. The owner saw it as an empty fourth box.
   `transition:none` matters as much: the track inherited `transition:all`,
   so every per-frame translate was being eased by CSS against the wheel -
   that was the lag, not the maths. */
.how-stage .steps{
  display:flex;gap:20px;width:max-content;
  border:0!important;border-radius:0;background:none!important;background-image:none!important;
  box-shadow:none!important;overflow:visible;transition:none!important;
  transform:translate3d(0,0,0);will-change:transform;
}
/* the reveal has no business on a sliding track: a card fading in from
   blur while it is being translated reads as a dead block arriving. The
   heading keeps its reveal; the track and its cards are always opaque. */
/* THE FOURTH BOX. `.steps::after` is the old grid's lit 1px frame, a
   pseudo-element with content:"" the full width of the track. Reset the
   track's own border and background all you like - the pseudo kept drawing
   a square frame around the union of the three cards, and where a card's
   rounded corner cut away, its corners showed. */
.how-stage .steps::before,.how-stage .steps::after{content:none!important;display:none!important}
.how-stage .steps.rv,.how-stage .step.rv{opacity:1!important;transform:none;filter:none!important;transition:none!important}
.how-stage .steps.rv{transform:translate3d(0,0,0)}
.how-stage .step{
  flex:0 0 min(640px,calc(100vw - 48px));min-width:0;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  padding-left:30px;padding-right:30px;
  transition:background-color .4s var(--ease);
}
.step .vis.fl{height:140px}
.fn-n{font-size:26px}
/* `.how-stage .step` here too - the desktop padding rule above is (0,2,0)
   and a bare `.step` in this query lost to it, so phones kept 30px side
   padding, the box fell to 265px and "Application form" clipped again. */
@media(max-width:640px){.how-stage .step{padding-left:18px;padding-right:18px}.step .vis.fl{height:124px}.fn-n{font-size:22px}
  /* THE DIAGRAM LEADS ON A PHONE. At the foot of the card it sat in the
     bottom 250px of the screen - under the thumb that is doing the
     scrolling - which is why the owner "could not see the progress". First
     in the card it lands mid-screen, and the approach above starts it moving
     the moment it is visible. */
  .how-stage .step{display:flex;flex-direction:column}
  .how-stage .step .vis{order:-1;margin:0 0 22px}
  .how-stage .step .no{order:0}
}

/* no JS, or a reader who asked for less motion: the same track as a plain
   horizontal strip you swipe, snapping card to card. Nothing is lost. */
html:not(.js) .how-pin,.rm .how-pin,.how-flat .how-pin{position:static}
html:not(.js) .how-stage .steps,.rm .how-stage .steps,.how-stage.how-flat .steps{
  width:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;transform:none!important;will-change:auto;
}
html:not(.js) .how-stage .steps::-webkit-scrollbar,.rm .how-stage .steps::-webkit-scrollbar,
.how-stage.how-flat .steps::-webkit-scrollbar{display:none}
html:not(.js) .how-stage .step,.rm .how-stage .step,.how-stage.how-flat .step{scroll-snap-align:start}

/* ── REDUCED MOTION: the diagram at its LANDED frame - 117 in mint, the
   door open, the tick filled, the stamp down - the picture, not the film. */
@media(prefers-reduced-motion:reduce){
  .fl-c .pz,.fn-chips span,.fn-n i,.fn-rows span,.dr-rec,.dr,.dr::before,.dr em,
  .fr-tick,.fr-tick svg,.fr-fly,.fr-trail path,.fr-sent,.fr-count{animation:none}
  .fl-c .pz{opacity:0}
  .fn-n i{opacity:0}.fn-n i.fin{opacity:1}
  .fn-rows span{opacity:1;color:var(--text)}
  .dr.open{border-color:rgba(16,255,161,.55);background:rgba(16,255,161,.09);color:var(--text)}
  .dr.open::before{transform:scaleY(1)}.dr.open em{opacity:1;transform:translate(4px,-50%)}
  .fr-tick{border-color:#0AD186;background:var(--g-mint);color:var(--mint-ink)}.fr-tick > svg:first-child{opacity:1;transform:none}
  .fr-fly,.fr-trail path{opacity:0}.fr-sent,.fr-count{opacity:1;transform:none}
}

/* ═══════════════ BENTO ═══════════════ */
/* One plate divided by hairlines, not four floating cards. Four borders
   and four shadows flatten a hierarchy; a single ruled frame gives the
   quadrant a shape you can actually read.
   The columns stay at two on every screen — the grid is the idea, so it
   does not get to collapse on a phone. Type scales instead. */
.bento{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
/* On a 375px phone two columns left each cell 166px wide - too narrow to
   carry a photo strip, a label, a two-line heading and body copy without
   everything turning into a column of single words. One column below 560. */
@media(max-width:560px){ .bento{grid-template-columns:1fr} }


/* the claim lifted out of the quadrant and placed under the search */
.claim{
  display:grid;grid-template-columns:1.6fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(120deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 46%,transparent);
}
.claim-body{padding:30px 32px 34px}
.claim-body .k{
  font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.04em;
  text-transform:none;color:var(--mint);display:block;margin-bottom:14px}
.claim-body h3{font-size:22px;letter-spacing:-.028em;margin-bottom:11px}
.claim-body p{font-size:14px;color:var(--dim);line-height:1.66;max-width:62ch}
.claim-side{
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:30px 32px;border-left:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}
.cs{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.02em;
  text-transform:none;color:var(--text);display:flex;align-items:center;gap:10px}
.cs::before{content:"";width:16px;height:1px;background:var(--mint);flex:none}
@media(max-width:820px){
  .claim{grid-template-columns:1fr}
  .claim-body{padding:24px 22px 20px}
  /* a wrapping row left the third mark centred on its own line, and the
     side panel's top-light then read as a band across it. One per line,
     aligned to the same edge as the body copy. */
  .claim-side{border-left:0;border-top:1px solid var(--line);padding:18px 22px 22px;
    flex-direction:column;align-items:flex-start;gap:11px;
    background:linear-gradient(180deg,rgba(255,255,255,.028),transparent 60%)}
}
.cell{
  background-color:var(--bg);padding:12px 22px 14px;position:relative;
  transition:background .4s var(--ease);
}
.cell:hover{background-color:var(--surface)}
.cell .k{
  font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:500;letter-spacing:.04em;
  text-transform:none;color:var(--mint);display:block;margin-bottom:6px;
}
.cell h3{font-size:15.5px;letter-spacing:-.028em;margin-bottom:5px;line-height:1.14}
.cell p{font-size:12.5px;color:var(--dim);line-height:1.46}

/* the two claims that do not need a whole quadrant */
/* ONE claim on a thin rule, not a two-up grid. "No pay-to-rank" came out at
   the owner's request - it is already the `never` tab's second line in the
   provenance ledger, so the page was not losing the commitment, only the
   repetition. With a single item the 1fr 1fr grid and its 1px gutter had
   nothing to divide, so this is a plain bar: half the old height. */
.bento-foot{
  background:var(--line);
  border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);
  overflow:hidden;margin-top:-1px;
}
.bento-foot div{background:var(--bg);padding:11px 28px;display:flex;align-items:baseline;gap:9px}
.bento-foot b{font-size:12.5px;font-weight:550;letter-spacing:-.015em;white-space:nowrap}
.bento-foot span{font-size:12px;color:var(--dim-2);line-height:1.45}
.bento{border-radius:var(--r-lg) var(--r-lg) 0 0}

@media(max-width:820px){
  .cell{padding:13px 16px 15px}
  .cell p{margin-top:12px}
  .cell h3{font-size:15px;margin-bottom:8px}
  .cell p{font-size:12px;line-height:1.55}
  .cell .k{font-size:8.5px;letter-spacing:.04em;margin-bottom:12px}
  .bento-foot div{padding:14px 18px;flex-direction:column;gap:3px}
  .bento-foot b{font-size:12px}
  .bento-foot span{font-size:11px}
}
@media(max-width:430px){
  .cell{padding:11px 13px 13px}
  .cell h3{font-size:13.5px;letter-spacing:-.022em}
  .cell p{font-size:11px;line-height:1.5}
  .cell .k{font-size:7.5px;margin-bottom:10px}
}

/* ═══════════════ PROVENANCE ═══════════════ */
/* Roman numerals because this is a real sequence — a record is sourced
   before it is verified before it is scored. Numbering that encodes no
   order is decoration. */
@media(max-width:900px){.pipe{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pipe{grid-template-columns:1fr}}

/* ruled through, the way a ledger voids a line */
.fine{
  font-size:10px !important;letter-spacing:.11em;color:var(--dim-3) !important;line-height:1.7;
  padding-top:14px;border-top:1px solid var(--line);margin-top:16px;
}
@media(max-width:860px){.vows{grid-template-columns:1fr}}

/* ═══════════════ FAQ ═══════════════ */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
/* Every question is short enough to hold ONE line now, and min-height makes
   the rows identical whatever the text does - uneven heights were the ugly
   part, and they came from wrapping, not from the padding. 15.5/14px and
   half the padding turns four slabs into a list. */
.q button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:56px;padding:13px 4px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:"Inter Tight";font-size:15.5px;font-weight:500;letter-spacing:-.022em;
  color:var(--dim);transition:color .22s;
}
.q button:hover,.q.on button{color:var(--text)}
.q .pm{width:13px;height:13px;flex:none;position:relative;color:var(--dim-3)}
.q .pm::before,.q .pm::after{content:"";position:absolute;background:currentColor;
  transition:transform .3s var(--ease),opacity .3s}
.q .pm::before{left:0;right:0;top:6px;height:1.5px}
.q .pm::after{top:0;bottom:0;left:6px;width:1.5px}
.q.on .pm::after{transform:scaleY(0);opacity:0}
.q .a{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}
.q .a p{padding:0 44px 20px 4px;font-size:13.5px;color:var(--dim-2);line-height:1.62;max-width:70ch}

/* ═══════════════ CAPTURE ═══════════════ */
.final{position:relative;overflow:hidden;border-top:1px solid var(--line);isolation:isolate}
.final .wrap{position:relative;z-index:2}
.final-in{max-width:720px;margin:0 auto;text-align:center;padding:110px 0 116px}
.final-in h2{font-family:var(--display);font-size:clamp(31px,4.7vw,56px);letter-spacing:-.04em;
  margin:20px 0 0;font-weight:600;line-height:1.06}
.final-in .lede{margin:20px auto 0;text-align:center}
@media(max-width:760px){.final-in{padding:80px 0 86px}}

.cap{
  display:flex;gap:8px;margin:32px auto 0;max-width:436px;position:relative;
}
.cap .fld{
  flex:1;min-width:0;display:flex;align-items:center;gap:9px;height:48px;padding:0 14px;
  border:1px solid var(--line);border-radius:11px;background:rgba(6,14,11,.66);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:border-color .22s,box-shadow .22s;
}
.cap .fld:focus-within{border-color:rgba(16,255,161,.45);box-shadow:0 0 0 4px var(--mint-glow)}
.cap .fld.err{border-color:rgba(255,255,255,.5);box-shadow:0 0 0 4px rgba(255,255,255,.07)}
.cap input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:15px;color:var(--text);
  letter-spacing:-.005em}
.cap input::placeholder{color:var(--dim-3)}
.cap .btn{height:48px;padding:0 20px;flex:none;border-radius:11px;font-size:14.5px}
@media(max-width:560px){.cap{flex-direction:column}.cap .btn{width:100%}}

/* the honeypot must be invisible but still a real, focusable-looking field:
   display:none and visibility:hidden are both skipped by the bots worth
   catching, so it is moved out of the viewport instead */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.cap-msg{font-size:12.5px;margin-top:14px;min-height:18px;color:var(--dim-2);
  transition:color .2s;text-align:center}
.cap-msg.bad{color:#fff}
.cap-msg.good{color:var(--mint)}
/* A typo suggestion is neither failure nor success - amber, and the correction
   is a BUTTON because asking someone to retype their own address is how you
   lose them twice. */
.cap-msg.warn{color:#FFD9A8}
.cap-msg .typo-fix{
  appearance:none;border:0;background:none;padding:0;cursor:pointer;
  color:var(--mint);font:inherit;text-decoration:underline;text-underline-offset:2px;
}
.cap-msg .typo-fix:hover{color:#3BFFB4}
.trust{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:26px;
  font-size:12px;color:var(--dim-2)}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{color:var(--dim-3);flex:none}

/* A claim the reader can go and check beats a claim they must take on
   faith — and invented avatars now read as a tell, not as proof. */
.assure{margin-top:28px}
.assure a{
  display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--dim);
  border-bottom:1px solid var(--line-2);padding-bottom:4px;transition:color .22s,border-color .22s;
}
.assure a:hover{color:var(--text);border-color:var(--mint)}
.assure .s{width:11px;height:11px;flex:none;background:var(--mint);opacity:.9;
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}

/* ═══════════════ FOOTER ═══════════════ */
.foot{border-top:1px solid var(--line);padding:72px 0 56px;background:var(--bg-2)}
.foot-t{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:44px}
.foot-b{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--dim-3)}
.fcol{display:flex;flex-direction:column;gap:11px;min-width:130px}
.fcol h5{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.035em;
  text-transform:none;color:var(--dim-3);font-weight:500;margin:0 0 3px}
.fcol a{font-size:13.5px;color:var(--dim);transition:color .2s}
.fcol a:hover{color:var(--text)}
.foot-brand{max-width:290px}
.foot-brand p{font-size:13px;color:var(--dim-2);margin-top:14px;line-height:1.6}

/* ═══════════════ TOAST ═══════════════ */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:120;
  display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:10px;
  border:1px solid var(--line-2);background:rgba(18,18,22,.94);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.95);font-size:13px;
  opacity:0;visibility:hidden;transition:opacity .28s,transform .28s var(--ease),visibility .28s;
}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ═══════════════ REVEAL ═══════════════ */
/* Arrival. A long ease-out quint so things settle rather than snap, with
   a touch of blur coming off as they land — the eye reads that as depth,
   not as an effect. Anything that scrolls into view gets it. */
.js .rv{opacity:0;transform:translateY(24px) scale(.994);filter:blur(6px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out),
             filter .6s var(--ease-out)}
.js .rv.in{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js .rv{opacity:1;transform:none;filter:none}
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px)}

/* ── THE PLATE, REPEATED ──────────────────────────────────────────
   The page opens on white and falls into the dark. These boxes do the
   same thing at a smaller scale: each one is lit white across its head,
   falls through the quarter-tones, and arrives at the page colour before
   its body copy starts.

   Two variables set the geometry, so a media query only has to retune
   the numbers rather than restate the ramp:
     --pl  where white stops holding
     --pf  where the fall has finished
   The stops in between follow the same weighted smoothstep as .toplight —
   a straight ramp changes pace at both ends and the eye reads both as
   edges. Everything sitting above --pl is inked dark, because white type
   on a white plate is not a subtle problem. */
:root{
  --ink:#0A0A0C;          /* headings on the plate */
  --ink-2:#55575E;        /* secondary type on the plate */
  --ink-mint:#05563A;     /* the mint labels, taken down to read on white */
  /* The ramp is written in percentages of its own layer, not in pixels,
     because a custom property resolves the var()s inside it on the element
     that DECLARES it — :root here, which has no --pl. So the shape lives in
     this token and each box sets only how tall the layer is, via
     background-size. White holds for the first 63% of the layer (the
     plate), then falls through the quarter-tones over the rest. */
  --w-plate:linear-gradient(180deg,
    rgba(255,255,255,.97) 0,
    rgba(255,255,255,.955) 63%,
    rgba(255,255,255,.90)  66.7%,
    rgba(255,255,255,.80)  70.4%,
    rgba(255,255,255,.66)  74.1%,
    rgba(255,255,255,.50)  77.8%,
    rgba(255,255,255,.35)  81.5%,
    rgba(255,255,255,.22)  85.2%,
    rgba(255,255,255,.13)  88.9%,
    rgba(255,255,255,.065) 92.6%,
    rgba(255,255,255,.025) 96.3%,
    rgba(255,255,255,0)    100%);
  --w-plate-soft:linear-gradient(180deg,
    rgba(255,255,255,.88) 0,
    rgba(255,255,255,.865) 63%,
    rgba(255,255,255,.81)  66.7%,
    rgba(255,255,255,.72)  70.4%,
    rgba(255,255,255,.59)  74.1%,
    rgba(255,255,255,.45)  77.8%,
    rgba(255,255,255,.31)  81.5%,
    rgba(255,255,255,.20)  85.2%,
    rgba(255,255,255,.115) 88.9%,
    rgba(255,255,255,.058) 92.6%,
    rgba(255,255,255,.022) 96.3%,
    rgba(255,255,255,0)    100%);
}

/* The plate is the topmost background layer, so it sits over the vault and
   the sheen — those still do their work down in the dark half. */
.step{
  background-image:var(--w-plate),var(--w-vault),var(--w-sheen);
  background-size:100% var(--pf),100% 100%,100% 100%;
  background-repeat:no-repeat;
}
/* ── THE WHY QUADRANTS CARRY A PHOTOGRAPH, NOT A GRADIENT ───────────────
   The owner's call: a white-to-black ramp is the single clearest tell of a
   generated site, and a real photograph is not. The image is a licensed
   Unsplash peak, and it happens to have exactly the structure the plate had
   - sky at the top (luminance 186-221, so the near-black headings hold) and
   mountain below (34-75, where the light body copy sits). That is why the
   existing ink colours did not have to change.

   It is a ::before rather than a background layer so the 70% is a true
   opacity rather than a composite I would have to recompute every time the
   card colour moves. z-index 0 under content, and .cell is position:relative
   already. */
.cell{background-image:var(--w-vault),var(--w-sheen);background-repeat:no-repeat}
/* ONE photograph behind the WHOLE grid, not one per cell. Four copies of the
   same peak read as a repeating tile; a single image cut by the 1px gaps
   reads as a window onto one scene, which is the point of using a photo at
   all. It lives on .bento, and the cells sit over it with a FLAT scrim - a
   solid rgba, not a ramp - so the quadrants stay legible without
   reintroducing the gradient this replaced. */
.bento{position:relative;isolation:isolate}
.bento::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("assets/img/why-peak.webp");
  background-size:cover;background-position:50% 62%;background-repeat:no-repeat;
  opacity:1;
}
/* The cells are a flat scrim over that one photo. Not a gradient: a single
   rgba value, so the whole grid sits at one legibility level and EVERY
   label, heading and line of copy can use the page's normal light type.
   The 1px gaps show the photo undimmed, which is what cuts it into
   quadrants. */
/* THE SCRIM IS NEARLY GONE - .15, with the photo at FULL opacity - and the
   reason is that the fix moved into the IMAGE FILE rather than the CSS.

   The source spans luminance 27 (mountain) to 224 (sky), and this grid is
   near-square, so `cover` scales by HEIGHT and background-position has no
   vertical effect at all: the bright sky always lands under the top row.
   No scrim value solves that - it was costing a 50% black wash, which left
   the photograph dark and flat, which is what the owner meant by the colour
   not popping.

   So `assets/img/*.webp` are TONE-MAPPED on export: every pixel is remapped
   into V 0.07-0.34 and saturation pushed 1.9x. Measured on the file,
   saturation 0.296 -> 0.513 and mean luminance 158 -> 48. The picture is now
   uniformly dark enough for the page's own light type, and carries far MORE
   colour than it did behind the heavy scrim.

   Swept again on the rendered pixels of all twelve text runs:
       old file, op .70 + scrim .50   colour 0.354   worst 4.74
       new file, op 1.0 + scrim .15   colour 0.507   worst 6.31   <- shipped
   More colour AND more contrast. Re-export with the same tone map if the
   photo is ever replaced; do NOT just drop a raw image in and lower the
   scrim, because the raw sky fails at 1.0:1 against white type. */
.cell{background-color:rgba(8,9,11,.15)}
.cell:hover{background-color:rgba(12,14,18,.06)}
/* The photo occupies THE PLATE STRIP ONLY (var(--pf), 168px), exactly the
   band the white gradient used to cover - not the whole cell.

   That is not a detail, it is the whole reason the type still works. Across
   a full-height photo the body copy crossed the sunset-lit peak and light
   text landed on light pixels: measured 2.12:1, a clear fail. Confined to
   the strip, the dark ink label and heading sit on sky and the light body
   copy sits on the plain dark card below, which is the split the colours
   were mixed for in the first place. Measure after ANY change to --pf or to
   .cell's padding, because both move where the body copy starts. */
/* content has to clear the photo */
.cell > *{position:relative;z-index:1}
@media(max-width:820px){
  /* 560w instead of 1100w: 21KB against 66KB. This MUST target .bento::before -
     the photo moved there when it became one image for the whole grid, and
     left behind a .cell::before rule that silently did nothing because that
     pseudo-element no longer has `content`. Phones were being served the big
     file. */
  .bento::before{background-image:url("assets/img/why-peak-sm.webp")}
}

/* Headings are forced to two lines' worth so every plate in a row ends on
   the same line, whether its heading wraps or not. */
.cell{--pl:108px;--pf:168px}   /* --pf now only spaces the copy; the photo is on .bento */
/* The 2.36em (then 2.1em) floor existed so every white plate ended on the
   same line. There is no plate now, so a one-line heading was reserving a
   second line of nothing - roughly 20px of dead space in each of four cells.
   Gone; the grid aligns on the photo instead. */
/* was 50px to clear the old white plate; there is no plate now */
.cell p{margin-top:8px}
/* --ink-mint (#05563A) was mixed for a WHITE plate and measured 2.54:1 on
   the photograph's mid-blue sky - the one element that failed. The heading
   beside it passes at 6.52 because it is near-black, so the label goes the
   same way: a green so deep it reads as ink, which is what the register
   wants anyway at 9.5px uppercase mono. */
.cell .k{color:var(--mint)}
.cell h3{color:var(--text)}

.step{--pl:116px;--pf:178px}
.step h3{min-height:2.04em}
.step p{margin-top:52px}
.step .no{color:var(--ink-mint)}
.step h3{color:var(--ink)}


/* The grid lines between boxes are the container showing through a 1px gap,
   so the container carries the same ramp: dark where the plates are white,
   back to the page's hairline once they have fallen. */
.steps{--pl:116px;--pf:178px}
.steps{
  background-image:linear-gradient(180deg,
    rgba(10,10,12,.55) 0,rgba(10,10,12,.55) var(--pl),
    var(--line) var(--pf),var(--line) 100%);
  border-color:rgba(122,124,132,.55);
}
/* The bento's own ramp existed ONLY to make the 1px gaps between cells dark
   where the white plates were white. The plates are photographs now, so the
   ramp has nothing to match and just painted a band across the grid's head. */
.bento{background-image:none;border-color:var(--line)}

@media(max-width:820px){
  .cell{--pl:86px;--pf:138px}
  .cell p{margin-top:12px}
  .step{--pl:92px;--pf:146px}
  .step p{margin-top:42px}
  .bento{--pl:86px;--pf:138px}
  .steps{--pl:92px;--pf:146px}
}
@media(max-width:430px){
  .cell{--pl:70px;--pf:116px}
  .cell p{margin-top:10px}
  .bento{--pl:70px;--pf:116px}
}

/* ── THE PLATE ON THE SEARCH ──────────────────────────────────────
   The AI bar is the thing the page is actually selling, so it gets the
   boldest plate: the index card opens on solid white across the prompt
   and its examples, then falls to the page colour before the filter row.

   The fall is painted into the LAST 78px of the examples strip rather than
   at a fixed offset down the card, because the example chips wrap to a
   second row on a narrow screen and any fixed plate height would then cut
   across them. Everything above the fall is flat white, so the seam
   between the two strips is invisible. */
.ai-bar{background:rgba(255,255,255,.97)}
.ai-ex{
  padding-bottom:78px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.97) 0,
    rgba(255,255,255,.97) calc(100% - 78px),
    rgba(255,255,255,.90)  calc(100% - 70px),
    rgba(255,255,255,.80)  calc(100% - 62px),
    rgba(255,255,255,.66)  calc(100% - 54px),
    rgba(255,255,255,.50)  calc(100% - 46px),
    rgba(255,255,255,.35)  calc(100% - 38px),
    rgba(255,255,255,.22)  calc(100% - 30px),
    rgba(255,255,255,.13)  calc(100% - 22px),
    rgba(255,255,255,.065) calc(100% - 15px),
    rgba(255,255,255,.025) calc(100% - 8px),
    rgba(255,255,255,0)    100%);
}
/* the divider inside the plate changes hand; the one at the foot is back
   on the page colour, so it keeps the original hairline */
.ai-bar{border-bottom-color:rgba(10,10,12,.16)}
.ai-ex{border-bottom-color:var(--line)}

/* Type on the plate changes hand. The mint badge and the mint button are
   left alone — both already carry dark ink, and both still signify.
   .ai-read is not touched: it opens below the fall, on the page colour,
   so its original light-on-dark styling is already correct. */
.ai-bar input{
  background:rgba(255,255,255,.72);
  border-color:rgba(10,10,12,.24);
  color:var(--ink);
}
.ai-bar input::placeholder{color:#6A6C73}
.ai-bar input:focus{
  background:#fff;border-color:#0A8F5E;
  box-shadow:0 0 0 3px rgba(4,110,72,.18);
}
.ai-ex > span{color:var(--ink-2)}
.ai-ex button{border-color:rgba(10,10,12,.30);color:var(--ink-2)}
.ai-ex button:hover{color:var(--ink);border-color:var(--ink-mint)}

/* the card's lit inner edge would otherwise glare against the plate */
.dir::before{opacity:.55}

/* ── HINTS ────────────────────────────────────────────────────────
   A directory is full of words that mean something specific here and
   something vaguer everywhere else — "route", "fit", "answers", and three
   different strengths of "checked". Rather than crowd the table with
   parenthetical copy, each of those carries a small mark you can hover or
   focus to get the definition.

   The panel itself is a SINGLE element parked on <body> and moved on
   demand. Two reasons: the table holds 2,098 rows, so a panel per hint
   would be thousands of nodes; and .dir and .tscroll both clip their
   overflow, which would slice a tooltip in half — the same problem the
   filter menus already solve by going position:fixed. */
.hint{
  display:inline-grid;place-items:center;vertical-align:middle;
  width:13px;height:13px;margin-left:5px;padding:0;flex:none;
  border:1px solid var(--line-2);border-radius:50%;background:none;
  color:var(--dim-2);cursor:help;
  font-family:"JetBrains Mono",monospace;font-size:8.5px;line-height:1;
  letter-spacing:0;text-transform:none;
  transition:color .18s,border-color .18s,background .18s;
}
.hint:hover,.hint[aria-expanded="true"]{
  color:var(--mint-ink);border-color:transparent;background:var(--mint)}
.hint:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
/* on the white plates the mark has to change hand like everything else */
.ai-read .hint{border-color:rgba(10,10,12,.30);color:var(--ink-2)}

/* 340, not 290: the sweep hint is the longest body on the page by some way,
   and a seven-sentence explanation in a 290px column is a very tall ribbon.
   max-height matters for the same reason - `place()` flips the panel above
   the trigger when it would overflow the foot, but a panel TALLER than the
   viewport overflows either way and the clamp just pins it at y=10 with the
   end running off the screen. Capped and scrollable instead, which needs
   pointer-events back on while it is open so it can actually be scrolled;
   the mouseover handler already keeps the panel up while the cursor is
   inside it, so hovering it does not dismiss it. */
#tip{
  position:fixed;z-index:200;max-width:340px;padding:11px 13px;
  max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 22px 54px -16px rgba(0,0,0,.95);
  font-size:12.5px;line-height:1.5;color:var(--dim);letter-spacing:-.005em;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s,transform .16s var(--ease),visibility .16s;
  pointer-events:none;text-align:left;font-weight:400;text-transform:none;
}
#tip.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
#tip em{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:11px;
  color:var(--text);background:rgba(255,255,255,.07);border-radius:4px;padding:1px 4px}
#tip b{color:var(--text);font-weight:550;display:block;margin-bottom:4px;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.02em;
  text-transform:none}


/* Route links. The cell was a label before and is a destination now, so it
   has to look clickable without turning the table into a wall of blue. */
a.rt{text-decoration:none;transition:color .18s,border-color .18s}
a.rt:hover{color:var(--text)}
a.rt.open:hover .rdot{box-shadow:0 0 0 3px var(--mint-glow)}
.rt.pend{opacity:.7}
.dlink{color:var(--mint);text-decoration:none;border-bottom:1px solid rgba(16,255,161,.35)}
.dlink:hover{border-bottom-color:var(--mint)}
.rk{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.08em;
  color:var(--dim-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  margin-left:6px;white-space:nowrap}


/* Values: four positions, numbered, in the page's own plate language.
   Deliberately not a bento of icons — these are arguments, not features. */
@media(max-width:820px){
}

/* The export strip. Quiet until there is something on the shortlist, then
   it lifts — the only state change in the directory that rewards you. */
.exportrow{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--line);background:var(--surface);
  font-size:12.5px;color:var(--dim-2);
}
/* The shortlist counter and its hint are gone, so `.exportrow b`,
   `.exportrow.has` and `.sl-hint` match nothing now. `margin-left:auto` on
   `.sl-acts` went with them: it only existed to push the buttons away from
   the counter that used to hold the left, and leaving an orphan auto margin
   shoving a lone control against empty space is exactly the bug that hit
   `.dir-foot .right` when the sweep stamp was removed. */
.sl-acts{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:620px){.sl-acts{margin-left:0;width:100%}.sl-acts .btn{flex:1}}

/* The handoff sits at the foot of the AI plate, on the dark side of the
   fall, so it reads as the result of the match rather than part of the form. */
.handoff{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(16,255,161,.055),rgba(16,255,161,.012));
}
.ho-l b{font-family:"JetBrains Mono",monospace;font-size:17px;color:var(--mint);
  letter-spacing:-.02em}
.ho-l span{font-size:12.5px;color:var(--dim);margin-left:7px}
.ho-f{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.ho-f input{
  height:34px;min-width:190px;padding:0 12px;border-radius:8px;font-size:13px;
  border:1px solid var(--line-2);background:var(--bg);color:var(--text);outline:none;
  transition:border-color .2s,box-shadow .2s}
.ho-f input:focus{border-color:rgba(16,255,161,.5);box-shadow:0 0 0 3px var(--mint-glow)}
.ho-f input::placeholder{color:var(--dim-3)}
.ho-l span{font-size:12.5px;color:var(--text);font-weight:500}
/* empty until the form has something to say - :empty keeps it from reserving
   a line while silent, which is what made this block three rows tall */
.ho-note{flex-basis:100%;font-size:11.5px;color:var(--dim-2);margin-top:2px}
.ho-note:empty{display:none}
.ho-note a{color:var(--mint)}
.ho-note.good{color:var(--mint)}
.ho-note.bad{color:#FFB4A8}
@media(max-width:700px){.ho-f{margin-left:0;width:100%}.ho-f input{flex:1}}

/* ── THE LEDGER ───────────────────────────────────────────────────
   Policies as a spec sheet rather than prose. A mono key in a fixed
   column, one line of answer beside it, three tabs over a single panel.

   The lighting is the fiddly part. --w-vault is tuned for a card a few
   hundred pixels tall; on a 900px panel it spends its whole gradient in
   the first four rows and then stops dead, which reads as a seam across
   the middle of the terms. So this panel lights itself over its own full
   height instead, the frame is a gradient that fades as it descends
   rather than a hard 1px box, and the foot dissolves into the page. */


/* ═══════════════ PROOF ═══════════════ */
/* EVERY SELECTOR HERE IS SCOPED TO `.quotes`, and that is not tidiness.
   `.q` is the FAQ's row class and has been since long before this section
   existed. These rules were written as a bare `.q`, they sit later in the
   file, and the markup they belonged to was held back - so with #proof not
   even on the page, every FAQ row was still being handed a card: 1px border,
   16px radius, 24px padding, a vault gradient and `flex-direction:column`.
   That is exactly why the FAQ read as six uneven slabs instead of a list.
   #proof's markup lives in preview-i.html; if it is ever restored it comes
   back inside `.quotes`, so the scoping costs nothing. */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quotes .q{
  margin:0;padding:24px 22px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);background-image:var(--w-vault),var(--w-sheen);
  box-shadow:inset 0 1px 0 var(--w-edge);display:flex;flex-direction:column;gap:18px;
}
.quotes .q blockquote{margin:0;font-size:14px;line-height:1.6;color:var(--dim);
  letter-spacing:-.008em}
.quotes .q figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.quotes .q figcaption b{font-size:13px;font-weight:550;color:var(--text)}
.quotes .q figcaption span{font-size:11.5px;color:var(--dim-3)}
/* placeholders must LOOK unfinished, so nobody ships them by accident */
.quotes .q[data-slot="quote"]{border-style:dashed;border-color:var(--line-2)}
.quotes .q[data-slot="quote"] blockquote{color:var(--dim-3);font-style:italic}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}


/* ═══════════════ G: THE INDEX AS GLASS, OVER THE GLOBE ═══════════════
   The card is lifted into the hero's lower third and made translucent, so the
   globe carries on behind it instead of stopping at a seam. That is the whole
   idea: the sphere is the atmosphere, the panel is the instrument reading it.

   The white plate on the AI strip had to go. It was opaque #fff over 153px -
   it blocked the globe outright, and the 78px fall from white to black was
   the crude edge. In its place: a thin lit wash at the card's head, the same
   language as every other surface on the page, so the strip reads as the top
   of a glass panel rather than a sheet of paper taped to one. */

/* the globe must survive to the hero's foot now that the card sits on it */
.field{
  -webkit-mask:linear-gradient(180deg,#000 86%,rgba(0,0,0,.72) 95%,rgba(0,0,0,.4) 100%);
          mask:linear-gradient(180deg,#000 86%,rgba(0,0,0,.72) 95%,rgba(0,0,0,.4) 100%);
}
.hero{padding-bottom:300px;min-height:min(86vh,900px)}
.hero .rail{display:none}            /* the stats move below the card */

/* the lift. The marquee has moved BELOW the index: a 153px logo band parked
   between the hero and the card makes the overlap impossible, and the band
   reads better as a footer to the data than as a preface to it. */
#directory{margin-top:-300px;padding-top:0;position:relative;z-index:4}
#directory .sec-head{display:none}   /* the card speaks for itself up here */

/* glass, not a slab - FROM WHEN THE CARD OVERLAPPED THE GLOBE. The ground
   and the overlap are both long gone (the card is opaque cream and
   `margin-top` computes 0), so the blur rendered NOTHING and only did harm:
   see THE FILTER MENUS WERE CLIPPED BY THE CARD in CLAUDE.md. Do not put
   `backdrop-filter` back on `.dir` - it makes the card the containing block
   for every `position:fixed` descendant, which drags the filter menus
   inside its `overflow:hidden` box. If this card ever needs glass again,
   the menus have to move out of it first. */
.dir{
  background:rgba(8,9,11,.58);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.98),
             inset 0 1px 0 rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.22);
}
.dir::before{opacity:.9}
.dir > .beam{opacity:.55}

/* THE AI STRIP, REBUILT. One lit wash instead of a white plate. */
.ai-bar{
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  border-bottom-color:rgba(255,255,255,.13);
  padding:13px 15px;
}
.ai-ex{
  padding:9px 15px;background:rgba(255,255,255,.018);
  border-bottom-color:rgba(255,255,255,.11);
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
}
.ai-ex::-webkit-scrollbar{display:none}
.ai-ex button{white-space:nowrap;flex:none}

/* type goes back to light-on-dark, which the white plate had inverted */
.ai-bar input{
  background:rgba(4,5,7,.55);border-color:rgba(255,255,255,.18);color:var(--text);
  height:40px;
}
.ai-bar input::placeholder{color:var(--dim-3)}
.ai-bar input:focus{
  background:rgba(4,5,7,.75);border-color:rgba(16,255,161,.5);
  box-shadow:0 0 0 3px var(--mint-glow);
}
.ai-ex > span{color:var(--dim-3)}
.ai-ex button{border-color:var(--line-2);color:var(--dim)}
.ai-ex button:hover{color:var(--text);border-color:var(--mint)}

/* the bars below inherit the glass so the card reads as one object */
.dir-bar{background:rgba(255,255,255,.035)}
.dir-meta{background:rgba(4,5,7,.4)}
thead th{background:rgba(10,11,14,.9)}

/* the stat rail, now beneath the card, closes the section */
.rail-under{
  max-width:var(--wrap);margin:30px auto 0;padding:0 28px;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-2);position:relative;z-index:2;
}
@media(max-width:760px){
  .rail-under{grid-template-columns:1fr 1fr}
  #directory{margin-top:-230px}
  .hero{padding-bottom:250px}
}


/* ─── WHITE, BUT AS LIGHT ───────────────────────────────────────────────
   The old plate was opaque #fff over 153px: paper taped to glass. White is
   still wanted at the head of the card, so it comes back as a LIT BAND - a
   strong white wash that falls away through the strip, so the globe keeps
   reading through the lower half while the top genuinely looks white.
   Same intent as the plate, a tenth of the opacity, and it never cuts.

   WHERE THE FALL HAPPENS IS THE WHOLE POINT, and the first version put it in
   the wrong place. The band used to run .90 -> .34 across `.ai-bar` and carry
   on .30 -> 0 across `.ai-ex`, i.e. the examples row sat ON the ramp - and
   that row is nothing BUT bare text ("TRY" plus three chips). Text on a ramp
   has no single correct colour: dark type was chosen for the top of the fall,
   and by 66% down the strip the ground was back to near-black, so the row
   read as dark-on-dark and was effectively unreadable.

   `.ai-bar` carries NO bare text - the input has its own opaque white box,
   the badge and the button are mint with their own ink - so the entire fall
   lives there now, and `.ai-ex` is a flat dark strip with the page's normal
   light-on-dark type. It ends on .07, which is exactly where `.dir-bar`
   begins, so the two strips are continuous and there is no seam to hide. */
.ai-bar{
  background:
    linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.46) 58%,
      rgba(255,255,255,.10) 100%)!important;
  border-bottom-color:rgba(255,255,255,.16)!important;
}
.ai-ex{
  background:linear-gradient(180deg,
    rgba(255,255,255,.085),
    rgba(255,255,255,.07) 100%)!important;
  border-bottom-color:rgba(255,255,255,.12)!important;
}
/* on a white band the type has to change hand again */
.ai-bar .ai-badge{background:var(--g-mint);color:var(--mint-ink)}
.ai-bar input{
  background:rgba(255,255,255,.78)!important;border-color:rgba(10,10,12,.22)!important;
  color:#0A0D0B!important;
}
.ai-bar input::placeholder{color:#6A6C73!important}
.ai-bar input:focus{background:#fff!important;border-color:#0A8F5E!important;
  box-shadow:0 0 0 3px rgba(4,110,72,.18)!important}
/* `.ai-ex` is a dark strip again, so its type goes back to the page's own
   light-on-dark values. Against the strip's ~.085 ground that is about
   5.5:1 for the label and 10:1 for the chips, and it holds even where the
   globe behind the glass is at its brightest. */
.ai-ex > span{color:var(--dim-2)!important}
.ai-ex button{border-color:var(--line-2)!important;color:var(--dim)!important}
.ai-ex button:hover{color:var(--text)!important;border-color:var(--mint)!important;
  background:rgba(255,255,255,.055)!important}

/* ═══════════ THE PROMPT STRIP CARRIES FOOTAGE ═══════════
   `.ai-bar` was a white-to-dark ramp with a WHITE input forced by
   !important, three bands above a dark search field - two search inputs in
   one card styled as opposites, and the loudest "template" signal left on
   the page. The footage replaces the ramp and the input goes back to the
   card's own dark glass, so the two search fields finally match.

   This block has to come AFTER the white-plate block, which is !important
   throughout; overriding it needs both later source order and !important.

   The strip is ~110px tall and the file is 960px wide, so it is always
   cropped hard by `cover`. That is fine - it is texture behind type, not a
   picture anyone reads. */
.dir-top{
  position:relative;isolation:isolate;overflow:hidden;
  background:#070A0C;                    /* the ground under the video */
}
/* every band inside goes transparent so ONE piece of footage runs behind all
   of them. Their bottom hairlines stay - they are what still separates the
   prompt from the sweep from the filters. */
.dir-top > .ai-bar,
.dir-top > .swept,
.dir-top > .ai-read,
.dir-top > .handoff,
.dir-top > .dir-bar,
.dir-top > .dir-meta{background:transparent!important}
.ai-bar{
  position:relative;
  background:transparent!important;
}
/* `.ai-vid` kept its name through the swap from <video> to <img> so the two
   selectors that lift the other children above it did not have to change.
   It is an <img> now: object-fit works the same on both. */
.ai-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  z-index:0;display:block;border:0;pointer-events:none;
  background:#070A0C;
}
/* The scrim spans every band, so it carries MORE text than one strip would -
   but it is LIGHT at the top and heavy at the foot, and that split is the
   whole design. The summit sits in the top third and has to be legible as a
   PICTURE; the lower bands carry the search field and the filter pills on
   their own dark grounds, where the image behind them adds noise and nothing
   else. Swept across five candidate ramps against the brightest pixel in
   each horizontal slice: -0.18 from the first version is the lightest top
   that keeps every run above 5. Re-run that sweep if the image changes. */
.ai-vid-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(5,7,9,.54) 0%,
      rgba(5,7,9,.48) 22%,
      rgba(5,7,9,.68) 46%,
      rgba(5,7,9,.85) 72%,
      rgba(5,7,9,.92) 100%);
}
/* everything that is not the image sits above both layers */
.dir-top > :not(.ai-vid):not(.ai-vid-scrim){position:relative;z-index:2}
/* the input matches `.srch` below it now, instead of inverting against it */
.ai-bar input{
  background:rgba(4,5,7,.62)!important;
  border-color:rgba(255,255,255,.20)!important;
  color:var(--text)!important;
  backdrop-filter:blur(3px);
}
.ai-bar input::placeholder{color:var(--dim-2)!important}
.ai-bar input:focus{
  background:rgba(4,5,7,.80)!important;
  border-color:rgba(16,255,161,.55)!important;
  box-shadow:0 0 0 3px var(--mint-glow)!important;
}
/* No prefers-reduced-motion rule, deliberately: a STILL is not motion, and
   hiding it for a reader who asked for less movement would take away an
   image that never moved. The clip needed that rule; this does not. */

/* ─── GRADIENT THROUGHOUT ───
   Every surface in the card now carries direction, so nothing reads flat. */
.dir-bar{background:linear-gradient(180deg,rgba(255,255,255,.07),
  rgba(255,255,255,.022))!important}
.dir-meta{background:linear-gradient(180deg,rgba(255,255,255,.028),
  rgba(4,5,7,.42))!important}
/* A STICKY HEADER CANNOT BE TRANSLUCENT. This rule used to be
     background: linear-gradient(..., rgba(255,255,255,.075), rgba(10,11,14,.92) 70%)
   and the `background` SHORTHAND with a gradient sets background-image and
   resets background-COLOR to transparent. So the header's only backdrop was a
   ramp starting at 7.5% white - 92.5% see-through at the top - and every row
   scrolling under it painted straight through: the header read as a ghost
   overlapping the first fund's name.

   Longhands now, so the two layers cannot clobber each other: an OPAQUE
   colour does the hiding, the gradient is only a sheen on top of it. #0D0F13
   is the card's own composited ground plus a slight lift, so it still reads
   as part of the glass rather than a slab taped across it - but it is opaque,
   which is the one thing this element is not allowed to compromise on.
   The same trap applies to anything else that becomes position:sticky. */
thead th{
  background-color:#0D0F13!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.075),
    rgba(255,255,255,0) 70%)!important;
}
tbody tr.row{background:linear-gradient(180deg,rgba(255,255,255,.012),
  rgba(255,255,255,0))}
.dir{
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 22%),
    rgba(8,9,11,.58)!important;
}
.rail-under b{background:linear-gradient(176deg,#fff 10%,#E6E9E7 42%,#9AA49E 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}


/* ═══════════════ I: REFINEMENT, BY SUBTRACTION ═══════════════
   Tuch et al. (2012) found visual complexity is the STRONGER of the two
   first-impression factors and that high complexity reads worse, with the
   effect landing inside 17ms. So "more sophisticated" here is not more
   decoration - it is less. Every change below removes something.

   What goes: the animated beam, two of three glows, the twinkling sparks,
   the grid's upper plane. What stays: the globe (the one distinctive asset),
   one glow, one horizon. */
.dir > .beam{display:none}
.g2,.g3{display:none}
.g1{opacity:.55;animation:none}
.sparks{display:none}
.hero-grid .pg-c{display:none}
.hero-grid{--pg:rgba(255,255,255,.14)}

/* type: tighter, and one size smaller everywhere. A display face at 84px
   beside a data table is two voices shouting; at 66px it is one speaking. */
h1.hero-h{font-size:clamp(36px,5.2vw,66px);letter-spacing:-.044em}
.hero .lede{font-size:18px;margin-top:18px;color:var(--dim)}
#directory .sec-head{display:block;max-width:620px;margin-bottom:44px}
#directory .sec-head h2{font-size:clamp(28px,3.5vw,40px)}
#directory .sec-head .lede{font-size:15px;margin-top:11px;max-width:58ch}

/* the white band gets a real edge instead of simply beginning. A hairline at
   full white above it reads as the lit top of a surface; without it the band
   starts nowhere. */
.dir{position:relative}
.dir::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:9;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 18%,
    rgba(255,255,255,.9) 82%,transparent);
}
/* ── THE CARD'S SPACING SCALE ──────────────────────────────────────────
   This block WINS over the base rules above it, so it is the only place
   these values may be set. Changing them earlier in the file does nothing.

   Six bands stack before a single row. Their vertical padding used to run
   15 / 9 / 14 / 10 / 12 / 15px with an 18px gutter everywhere except
   .dir-bar at 16 - no rhythm in either axis, which is most of why the card
   read as generated rather than designed.

   ONE gutter now (24px) and a deliberate vertical order: the prompt gets
   the most air, the thin strips the least, and rows get more than the
   header because a directory is read by scanning DOWN a column. */
.ai-bar{padding:20px 24px;gap:14px}
.ai-ex{padding:13px 24px}
.swept{padding:13px 24px}
.handoff{padding:18px 24px}
.dir-bar{padding:17px 24px;gap:12px}
.dir-meta{padding:14px 24px;gap:18px}
/* The card's full-width BANDS keep the 24px gutter. TABLE CELLS do not:
   six columns x 48px of padding was 288px of a 1171px table, a quarter of
   the width spent on air, and it left Route 116px for a 137px button and
   Fit 57px for a 96px meter - both overflowed their cells. 18px gives the
   columns back 72px. Different job, different value: a band is one wide
   strip, a cell is one of six narrow ones. */
thead th{padding:14px 18px}
/* 14px, down from 19: the stacked chip column is 68px tall on its own, so the
   row no longer needs the padding to feel open. */
tbody td{padding:14px 18px}

/* THIS BLOCK MUST STAY LATE IN THE SHEET. It was first written up beside
   `.wrap`, which is before `.dir-meta{display:flex}` is even defined, so
   the base rule won on source order and two of the four changes silently
   did nothing - the meta strip stayed visible and the header showed both
   "Investor" and the count. Same trap as the spacing override above. */
/* The count lives in the phone's column header only; .dir-meta carries it
   and the Sort control everywhere else. Declared BEFORE the media query:
   put it after and it wins on source order, hiding the count on mobile
   too, which left the header reading just "?". */
thead th .th-count{display:none;font-variant-numeric:tabular-nums}

/* ── THE INDEX CARD ON A PHONE ─────────────────────────────────────────
   Four things the owner asked for, all of them about giving the data more
   of the screen and the chrome less of it. */
@media(max-width:640px){
  /* 1. the card runs nearly edge to edge. The page gutter above halves from
     20px to 10px, which is ~20px of width back on a 375px screen. */

  /* 2. the search takes a whole row; the three filters share the next one,
     Stage then Sector then Geography, equal thirds. */
  .dir-bar{flex-wrap:wrap;gap:8px}
  .dir-bar .srch{flex:0 0 100%;min-width:0;order:1}
  .dir-bar .dd{flex:1 1 0;min-width:0;order:2}
  /* reset has no order, so it sorted FIRST and the Clear button sat ABOVE
     the search field whenever a filter was on. It closes the bar instead,
     on its own line: sharing the line squeezes the three menus to 49px and
     Geography overflows by 26px at 320. */
  .dir-bar .reset{order:3;flex:0 0 100%}
  .dir-bar .dd-t{width:100%;justify-content:space-between;padding:0 9px}

  /* 3. the meta strip goes entirely - it printed "6,396 investors match"
     directly above a column header reading "INVESTOR", which read as the
     word twice, and the Sort control with it. The count moves INTO the
     header instead, so the row says what it is and how many in one place. */
  .dir-meta{display:none}
  thead th .th-count{display:inline}
  thead th .th-lab{display:none}

  /* 5. STAGE HAS TO BE VISIBLE, or nothing says the table scrolls sideways.
     At 35% of a 1010px table the Investor column is 354px, and the viewport
     is 353px - so Stage began at x=365, twelve pixels past the right edge,
     and the first chip at 383. A phone reader saw one column and no reason
     to believe there were five more. Halved to 18%: Stage opens at ~193 and
     its chip at ~211, with Focus peeking in at ~324. The column percentages
     still sum to 100 so the table stays 1010px wide and nothing wraps.

     The widths are inline style="width:N%" on each <th>, which beats any
     stylesheet rule - hence !important. There is no other way to override
     them short of moving all six into CSS. */
  thead th:nth-child(1){width:18%!important}
  thead th:nth-child(2){width:13%!important}
  thead th:nth-child(3){width:17%!important}
  thead th:nth-child(4){width:14%!important}
  thead th:nth-child(5){width:22%!important}
  thead th:nth-child(6){width:16%!important}

  /* the name WRAPS on a phone instead of ellipsising. At 18% it has ~100px,
     which truncates most firms - and the drawer does not print the name, so
     a clipped name has no full form anywhere on the page. Two lines hold
     ~24 characters and cost nothing: the row height is set by the chip
     column's 68px floor, and two 18px lines fit inside it, so rows stay
     uniform at 97px. */
  /* THREE lines, at 1.2. The tick is bound to the name's last character
     (nameCell), so a name that needs a line the clamp does not give it takes
     its tick out of sight with it - 166 of 4,920 rendered rows at a 2-line
     clamp. A third line costs nothing because the row height is set by the
     CHIP column's 68px floor, and 3 x 13.5 x 1.2 plus the sub-line measures
     exactly 68: every row stayed at 97px and hidden ticks fell to 8 (0.16%,
     names like "BMH Beteiligungs-Managementgesellschaft Hessen"). At 1.22 the
     block is 69px and 166 rows went to 98px - one pixel is the whole margin
     here, so re-measure `.fname` height against 68 after ANY change to the
     name or sub-line type.
     overflow-wrap:anywhere is the other half of the tick binding: a
     24-character single token (Beteiligungsgesellschaft) must break rather
     than overflow, or the glued last-character-plus-tick is pushed out of
     the clip. */
  .fname .nm{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:3;line-height:1.2;overflow-wrap:anywhere}
  .fname .sub .g-f{display:none}
  .fname .sub .g-s{display:inline}
  /* buy the sub-line back the width it needs. At 18% it had 100px against
     106-119px of "Accelerator · <region>", so 11 of 120 rows ellipsised a
     region name. A 10px gap and 14px cell padding give it 112px, and 11px
     type fits "Accelerator · Global / MENA / LatAm / Europe" clean. The three
     longest (Australia, Nordics, Canada) still ellipsise - no width short of
     undoing the halving fits an 11-letter type word plus those. */
  tbody td{padding:14px}
  .fname{gap:10px}
  .fname .sub{font-size:11px}
}

/* the marquee stops competing: smaller marks, lower contrast */
.marq-t i{height:19px;opacity:.34}
.marq-t span{padding:0 40px}
.marq{padding:30px 0 26px}

/* ═══════════════ PRICING ═══════════════ */
/* Two columns, not three: there is one decision here and a third option only
   ever makes it slower. The paid column carries the light; the free one is
   stated plainly rather than made to look deficient, because the open index
   is the proof the whole page rests on. */
.price{
  display:grid;grid-template-columns:1fr 1.15fr;gap:1px;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--line);
}
.pcol{background:var(--surface);padding:30px 28px 32px;position:relative;
  background-image:var(--w-vault)}
.pcol.on{background:var(--surface-2);background-image:var(--w-vault),var(--w-sheen)}
.pcol.on::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--g-mint);opacity:.9}
.pk{display:block;font-size:10px;letter-spacing:.035em;text-transform:none;
  color:var(--dim-3)}
.pnum{display:block;font-family:var(--display);font-size:clamp(34px,4.4vw,46px);
  font-weight:600;letter-spacing:-.04em;line-height:1;margin:14px 0 0;
  font-variant-numeric:tabular-nums}
.pnum i{font-style:normal;font-size:.42em;font-weight:450;color:var(--dim-2);
  letter-spacing:-.01em;margin-left:2px}
.pnote{display:block;font-size:12px;color:var(--dim-2);margin-top:9px}
.plist{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px}
.plist li{font-size:13.5px;color:var(--dim);line-height:1.5;
  padding-left:22px;position:relative}
.plist li::before{
  content:"";position:absolute;left:0;top:7px;width:11px;height:1px;
  background:var(--dim-3)}
.pcol.on .plist li::before{background:var(--mint);opacity:.8}
.plist li b{color:var(--text);font-weight:550}
.pcta{width:100%;margin-top:26px;height:44px}
.pfine{display:block;font-size:11.5px;color:var(--dim-2);margin-top:12px;text-align:center}
.pfine b{color:var(--mint);font-weight:550}
.pwhy{margin-top:20px;font-size:12.5px;color:var(--dim-2);max-width:72ch}
@media(max-width:760px){
  .price{grid-template-columns:1fr}
  .pcol{padding:26px 22px 28px}
}

.ledger{
  position:relative;border:0;border-radius:var(--r-lg);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.055) 0%,
      rgba(255,255,255,.028) 18%,
      rgba(255,255,255,.014) 42%,
      rgba(255,255,255,.006) 70%,
      rgba(255,255,255,0)    100%),
    var(--surface);
  box-shadow:0 40px 90px -60px rgba(0,0,0,.95);
}
/* the frame, drawn as a gradient and masked to the edge: brightest where
   the light lands, gone by the foot, so the card has no hard outline */
.ledger::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.34),rgba(255,255,255,.14) 30%,
    rgba(255,255,255,.06) 62%,rgba(255,255,255,.02) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2;
}
/* and the foot fades out, so the panel ends by dissolving rather than by
   stopping on a line */
.ledger::after{
  content:"";position:absolute;left:1px;right:1px;bottom:0;height:120px;
  border-radius:0 0 var(--r-lg) var(--r-lg);pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(5,5,6,0),rgba(5,5,6,.55) 62%,rgba(5,5,6,.9));
}
.lg-tabs{
  position:relative;z-index:3;display:flex;align-items:center;gap:2px;
  padding:11px 12px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.008));
}
/* the rule under the tabs fades out before it reaches either edge, so the
   strip sits on the panel instead of being cut off it */
.lg-tabs::after{
  content:"";position:absolute;left:14px;right:14px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 12%,
    var(--line-2) 88%,transparent);
}
.lg-t{
  appearance:none;border:1px solid transparent;background:none;cursor:pointer;
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.03em;
  text-transform:none;color:var(--dim-2);padding:7px 13px;border-radius:7px;
  transition:color .2s,background .2s,border-color .2s,box-shadow .2s;
}
.lg-t:hover{color:var(--text);background:rgba(255,255,255,.05)}
.lg-t.on{color:var(--mint-ink);background:var(--mint);border-color:transparent;
  font-weight:600;box-shadow:0 8px 22px -10px rgba(16,255,161,.7)}
/* The provenance strip is THREE tabs and must stay on ONE row. Its labels were
   "The front door / What we never do / What it can't tell you" - 492px of
   buttons in 428px of strip at a ~500px measure, so the third tab dropped to a
   second row and the set read as 2+1. Shortened to "Front door / Never /
   Limits" (ids and data-t untouched, so every #values / #never / #limits deep
   link still lands) and wrapping is refused outright.
   NOT applied to #legal's strip: that one carries a margin-left:auto
   .lg-stamp as a fourth item and genuinely needs to wrap on a phone. */
#provenance .lg-tabs{flex-wrap:nowrap}
#provenance .lg-t{padding:7px 11px}
.lg-stamp{margin-left:auto;font-size:9.5px;letter-spacing:.035em;color:var(--dim-3)}
.lg-body{position:relative;z-index:3;margin:0;display:grid;grid-template-columns:186px 1fr;
  padding-bottom:26px}
.lg-body dt{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.03em;
  text-transform:none;color:var(--dim-2);padding:16px 14px 16px 20px;
  position:relative;
}
.lg-body dd{
  margin:0;padding:15px 22px 15px 0;font-size:14px;line-height:1.55;color:var(--dim);
}
/* row rules fade at both ends, so they read as ruling inside a panel
   rather than as the panel being sliced into strips */
.lg-body dt::before{
  content:"";position:absolute;left:20px;top:0;width:calc(100vw - 40px);max-width:1100px;
  height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--line) 6%,var(--line) 82%,transparent);
}
.lg-body dt:first-of-type::before{display:none}
.lg-body dd b{color:var(--text);font-weight:550}
.lg-body dd em{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:12.5px;
  color:var(--text);background:rgba(255,255,255,.07);border-radius:4px;padding:1px 5px}
.lg-body dd a{color:var(--mint);border-bottom:1px solid rgba(16,255,161,.35)}
.lg-body dd a:hover{border-bottom-color:var(--mint)}
.lg-body:not(.on){display:none}
@media(max-width:700px){
  .lg-body{grid-template-columns:1fr}
  .lg-body dt{padding:16px 18px 0}
  .lg-body dd{padding:5px 18px 16px}
  .lg-body dt::before{left:18px;width:calc(100% - 36px)}
  .lg-stamp{width:100%;margin:6px 0 0 3px}
}

/* The lede was breaking into two flat lines of near-equal length, which
   reads as a block of text rather than a sentence. A tighter measure and a
   balanced wrap give it a shape: the first clause holds the line, the
   second sits under it without either looking clipped to fit. */
.hero .lede{max-width:58ch;line-height:1.56;text-wrap:balance}
@media(max-width:640px){.hero .lede{max-width:38ch;line-height:1.54}}

/* One short line, so it only has to break well once, on narrow screens.
   pretty, not balance: balance splits this into two lopsided halves and cuts
   the compound, which is the same trap the old two-tier version fell into.

   Brighter and bigger than the body --dim it inherits. It is the only line
   between the headline and the form, it sits over the globe's busiest band,
   and at 17px/#C6D8CE it was reading as a caption rather than the sentence
   that says what the product is. Still short of the headline's pure white, so
   the hierarchy holds. */
.hero .lede{text-wrap:pretty;font-size:21px;color:rgba(255,255,255,.88)}
@media(max-width:640px){.hero .lede{font-size:17.5px}}


/* ── THE HEADER FIELD ─────────────────────────────────────────────
   A ruled mint field across the top bar. The rings are struck from a
   point well below the header, so what actually crosses it are long
   shallow arcs rather than circles: the same geometry as the globe
   underneath, read at the very top of the page. Masked so it fades out
   before either edge, and pinned under the wordmark and the buttons so
   it can never compete with type. */
.nav-field{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 210%,
    rgba(16,255,161,.22) 0 1px, transparent 1px 9px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  opacity:.6;
}
.nav .wrap{position:relative;z-index:1}
/* the menu sheet is opaque, so the field would show through the header
   above an otherwise flat panel */
.menu .nav-field{opacity:.28}

/* ── FIND US ──────────────────────────────────────────────────────
   Platform marks in the footer, which is where people look for them.
   At rest they sit in the same dim as every other footer link, so the
   column has one texture; the brand colour arrives on hover. Mint is
   never used here: on this page it means live / verified / matched, and
   spending it on somebody else's logo would blunt the only signal the
   palette carries. */
.fcol.social a.soc{display:flex;align-items:center;gap:9px}
.soc svg{flex:none;opacity:.75;transition:opacity .2s,color .2s,transform .2s var(--ease)}
.soc:hover svg{opacity:1;transform:translateY(-1px)}
.soc.ig:hover svg{color:#E1306C}
.soc.li:hover svg{color:#0A66C2}
.soc.xx:hover svg{color:#fff}
/* .mail, not .em: .em is the Instrument Serif accent now, and the two
   collided - the footer email icon was being italicised as a heading turn */
.soc.mail:hover svg{color:var(--mint)}
@media(max-width:900px){.fcol.social a.soc{gap:8px}}

/* ── PREMIUM PASS (2026-10-18) ──────────────────────────────────────
   Measured against Apple (macbook-pro), Linear, Crunchbase and OpenVC at
   1280px with one script, medians per page. What the premium ones share
   and this page lacked:
     BODY COPY     Apple 19 / Linear 15 / Crunchbase 14-16   ours 12.5-13.5
     CARD PADDING  Apple 40 / Linear 32 / Crunchbase 32      ours 22
     BUTTON HEIGHT Apple 44 / Crunchbase 38 / OpenVC 33      ours 36 median
     H2 -> BODY    Linear 40 / Apple 20 / Crunchbase 18      ours 16
   Section rhythm (ours 104/128) already sits between Crunchbase 140 and
   Linear 256, so sections were LEFT ALONE: the air was missing inside the
   cards and under the headings, not between the sections. The TABLE keeps
   13.5px - data density is the product there (Crunchbase's own tables run
   13-14). Late block so it wins on source order; every media variant it
   overrides is restated under it, or phones would inherit desktop values. */
.lede{font-size:18px;line-height:1.6}
.sec-head{margin-bottom:72px}
.sec-head .lede{margin-top:22px}
#directory .sec-head .lede{font-size:16px;margin-top:14px}
.how-pin .sec-head{margin-bottom:48px}
.hero .lede{line-height:1.5}

/* cards: the air goes INSIDE */
.cell{padding:28px 30px 30px}
.cell .k{margin-bottom:10px}
.cell h3{font-size:17.5px;margin-bottom:8px;line-height:1.16}
.cell p{font-size:14.5px;line-height:1.55}
.bento-foot div{padding:16px 30px}
.bento-foot b{font-size:13.5px}
.bento-foot span{font-size:13px}
.step{padding-top:44px;padding-bottom:48px}
.how-stage .step{padding-left:36px;padding-right:36px}
.step h3{font-size:21px;margin:18px 0 12px}
.step p{font-size:15px;line-height:1.6}

/* FAQ, ledgers, drawer, footer: prose at 15 */
.q button{min-height:66px;padding:16px 4px;font-size:17px}
.q .a p{font-size:15px;line-height:1.62;padding:0 44px 26px 4px;max-width:64ch}
.lg-body dt{padding:19px 14px 19px 22px}
.lg-body dd{padding:18px 24px 18px 0;font-size:15px}
.det-in p{font-size:14.5px}
.fcol a{font-size:14px}
.trust{font-size:12.5px}

/* controls: one height family, one radius */
.btn{height:42px;padding:0 19px;font-size:14px;border-radius:10px}
.btn-lg{height:50px;padding:0 26px;font-size:15.5px;border-radius:10px}
.btn-s{height:34px;padding:0 14px;font-size:13px;border-radius:8px}
.cap .fld,.cap .btn{border-radius:10px}

@media(max-width:820px){
  .cell{padding:22px 20px 24px}
  .cell h3{font-size:16.5px}
  .cell p{font-size:14px;line-height:1.55}
  .step h3{font-size:18px;margin:14px 0 10px}
  .step p{font-size:14px}
  .bento-foot div{padding:16px 20px}
}
/* the ledger's one-column phone layout: dt over dd, both on the same 18px
   inset. The 700px rule earlier in the sheet set this and the desktop
   paddings above out-rank it on source order, so it is restated here. */
@media(max-width:700px){
  .lg-body dt{padding:18px 18px 0}
  .lg-body dd{padding:6px 18px 18px}
}
@media(max-width:640px){
  .how-stage .step{padding-left:20px;padding-right:20px}
  .lede{font-size:16px}
  .q button{min-height:60px;font-size:16px}
  .q .a p{font-size:14.5px;padding-right:24px}
}
@media(max-width:430px){
  .cell{padding:20px 18px 22px}
  .cell h3{font-size:15.5px}
  .cell p{font-size:13.5px}
}

/* ── THE PINNED STAGE MUST FIT THE WINDOW ───────────────────
   `.how-pin` is sticky at the header's bottom edge, so the block it pins is
   only ever as tall as `100vh - nav`. At its full size it measures 695px and
   needs a 759px window - which a laptop running Safari with a bookmarks bar
   does not have. Anything past the fold is then UNREACHABLE: the block is
   pinned, so scrolling moves the cards sideways and never reveals it. The
   owner saw the diagrams cut off on a laptop while the phone was fine, which
   is the tell - phones are TALLER in CSS pixels than a short laptop window.

   So the stage answers the window's HEIGHT, not just its width. These are
   max-height queries, which is unusual in this file and deliberate: nothing
   here is about how wide the card is.

   Measured budget at full size: head 179 + its 48 margin + card 435 + the
   pin's 32 bottom padding = 694. Each tier below is sized against that.
   `.how-stage .step` (0,2,0), never a bare `.step`, or the premium block's
   paddings win on source order. */
@media(max-height:820px){
  .how-pin{padding-bottom:26px}
  .how-pin .sec-head{margin-bottom:28px}
  .how-pin .sec-head h2{font-size:clamp(26px,3vw,36px)}
  .how-pin .sec-head .lede{margin-top:14px;font-size:16px}
  .how-stage .step{padding-top:30px;padding-bottom:32px}
  .how-stage .step .vis.fl{height:124px}
}
@media(max-height:690px){
  .how-pin{padding-bottom:18px}
  .how-pin .sec-head{margin-bottom:20px}
  .how-pin .sec-head h2{font-size:clamp(23px,2.6vw,30px)}
  .how-pin .sec-head .lede{margin-top:10px;font-size:14.5px}
  .how-stage .step{padding-top:22px;padding-bottom:24px}
  .how-stage .step h3{font-size:18px;margin:12px 0 8px}
  .how-stage .step p{font-size:13.5px}
  .how-stage .step .vis.fl{height:104px}
  .how-stage .step .no{font-size:9.5px}
}

/* ── AIR, AND NO RAMP ───────────────────────────────────────────────────
   The owner: every peer has more white space; the how-it-works cards still
   ran white-to-black, "which gives away a vibecoded look". Two changes, one
   block, last in the sheet so it wins on source order.

   1. THE STEP PLATE IS GONE. `.step` was the last element carrying
      `--w-plate` after the #why cells lost theirs for exactly this reason.
      The cards are the same dark glass as the ledger and the cells now:
      vault + sheen, a 1px line, light type. `--ink` headings and
      `--ink-mint` labels were mixed for a white plate and are flipped back.
      `.step p{margin-top:52px}` existed only to clear the plate's fixed
      foot; with no plate it was a 40px hole, the same hole `.cell p` had.

   2. ONE SPACING SCALE, 8px based, a step up across the whole page:
          section          128 / 104  ->  160 / 128     (phone 104 / 88)
          heading -> body   72        ->   88
          hero lede/form    22 / 32   ->   28 / 40
          card -> rail      30        ->   48
          marquee -> next   56        ->   88
          capture block    110/116    ->  140/152
          footer            72 / 56   ->   96 / 72
      Measured against the earlier reference pass: Linear sits at 256 per
      section, Crunchbase at 140; 160 is where this page's density reads as
      intent rather than as a template. The how-it-works PIN is untouched -
      its spacing is budgeted against the viewport height (see the
      max-height tiers) and section padding sits outside the pin. */
.step{background-image:var(--w-vault),var(--w-sheen);background-size:100% 100%,100% 100%}
.step .no{color:var(--mint)}
.step h3{color:var(--text);min-height:0}
.step p{margin-top:0;color:var(--dim)}
.how-stage .step{background-color:rgba(255,255,255,.025)}
.how-stage .step:hover{background-color:rgba(255,255,255,.04)}

/* Second pass on the scale. 160/128 was measurably more and visibly not:
   on a black ground a gap does not register as white space the way it does
   on white, so it has to be LARGER to read at all. These sit at Linear's
   measure (256 per section) rather than between Linear and Crunchbase, and
   the air inside the blocks moves with them - a wide gap around a tight
   card only makes the card look tighter. */
.sec{padding:224px 0}
.sec.tight{padding:176px 0}
.sec-head{margin-bottom:104px}
.sec-head .lede{margin-top:26px}
#directory .sec-head{margin-bottom:64px}
.hero .lede{margin-top:32px}
.hero .cap{margin-top:48px}
h1.hero-h{margin-top:36px}
/* ORDER: card -> belt -> numbers -> next section. The belt sits directly
   under the index as the first thing after the data, the figures close the
   block. `will-change:transform` keeps the belt on its own compositor layer
   so main-thread work - the table rendering 120 rows, the scroll-scrubbed
   how-it-works - cannot stutter it. The animation is transform-only and
   infinite; the one thing that stops it is prefers-reduced-motion, by the
   global rule, and that is correct. */
.marq{margin:32px 0 0}
.marq-t{will-change:transform;backface-visibility:hidden}
.rail-under{margin-top:40px;margin-bottom:120px}
/* The gap ABOVE the belt is the index section's own bottom padding plus the
   belt's margin: 224 + 48 = 272px of black between the data and the first
   thing after it, which the owner read as empty. The section's padding is
   cut here so the belt reads as the card's footer: 168 + 48 = 216, a fifth
   less, and the ladder below it is unchanged (belt -> rail 64, rail -> next
   120). Phone: 96 + 36 = 132, from 164. */
#directory{padding-bottom:96px}
.final-in{padding:176px 0 184px}
.foot{padding:120px 0 88px}
.faq{margin-top:8px}
.q button{min-height:76px;padding:20px 4px}
.q .a p{padding-bottom:32px}
.lg-body dt{padding:24px 14px 24px 24px}
.lg-body dd{padding:23px 24px 23px 0}
.cell{padding:36px 36px 40px}
.cell .k{margin-bottom:14px}
.cell h3{margin-bottom:10px}
.bento-foot div{padding:20px 36px}
.step .vis{margin-top:32px}
.how-stage .step{padding-top:48px;padding-bottom:52px}
.how-pin .sec-head{margin-bottom:56px}
@media(max-width:820px){
  .step p{margin-top:0}
  .cell{padding:26px 22px 28px}
}
@media(max-width:760px){
  .sec{padding:128px 0}
  .sec.tight{padding:104px 0}
  .sec-head{margin-bottom:72px}
  .marq{margin:24px 0 0}
  #directory{padding-bottom:56px}
  .final-in{padding:112px 0 120px}
  .foot{padding:88px 0 64px}
  .rail-under{margin-top:28px;margin-bottom:72px}
  .lg-body dt{padding:20px 18px 0}
  .lg-body dd{padding:6px 18px 20px}
}
@media(max-width:700px){
  .lg-body dt{padding:20px 18px 0}
  .lg-body dd{padding:6px 18px 20px}
}

/* ── THE STAT RAIL: a ruled grid, one cell lights at a time ──────────────
   What was there: a 34px bright stub at each cell's top-left, a long top
   hairline fading out to the right, a vertical divider the second column's
   number sat hard against, and a gradient-filled figure. Four different
   edges on one strip. Now: two full-width hairlines (top and bottom), one
   1px divider, equal padding on every cell, and the figure in solid text so
   it can TRANSITION - gradient-clipped type cannot change colour. Hover on a
   cell: its figure goes mint, a 2px mint rule draws in along its top edge
   from the left, and nothing else on the strip moves. The owner's call;
   mint is otherwise rationed to meaning, and a hover highlight is the one
   decorative use allowed here. */
.rail-under{
  margin-top:64px;padding:0 28px;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
.rail-under::after{content:none}
.rail-under div{
  position:relative;padding:30px 28px 30px 28px;border-right:1px solid var(--line);
  transition:background-color .28s var(--ease);
}
.rail-under div:first-child{padding-left:0}
.rail-under div:last-child{border-right:0}
.rail-under div::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;width:auto;
  background:var(--mint);transform:scaleX(0);transform-origin:left center;
  transition:transform .42s var(--ease);
}
.rail-under div:first-child::before{left:0}
.rail-under div:hover{background-color:rgba(255,255,255,.025)}
.rail-under div:hover::before{transform:scaleX(1)}
.rail-under b{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--text);-webkit-text-fill-color:currentColor;
  font-size:clamp(30px,3.2vw,40px);letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums lining-nums;
  transition:color .28s var(--ease);
}
.rail-under div:hover b{color:var(--mint)}
.rail-under span{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.03em;
  text-transform:none;color:var(--dim-2);margin-top:12px;
  transition:color .28s var(--ease);
}
.rail-under div:hover span{color:var(--dim)}
.rail-under span .hint{vertical-align:middle;margin-left:4px}
@media(max-width:760px){
  .rail-under{margin-top:44px}
  .rail-under div{padding:22px 20px;border-bottom:1px solid var(--line)}
  .rail-under div:nth-child(2n+1){padding-left:0}
  .rail-under div:nth-child(2n){border-right:0}
  .rail-under div:nth-last-child(-n+2){border-bottom:0}
}

/* ── THE PINNED STAGE FILLS THE WINDOW ─────────────────────────────────
   While the cards slide, the page does not move vertically - and the pinned
   block was ~560px tall in an 800px window, so for the whole swipe the
   bottom third of the screen was empty black with nothing arriving in it.
   The owner read it as "a whole empty section at the end" and as delay: the
   page looked stuck. The pin is now exactly the viewport below the header
   (svh, so a phone's collapsing URL bar cannot make it taller than the
   screen), the heading stays at the top and the cards sit centred in the
   remaining space. The pin releases the moment its foot - now the viewport's
   foot - reaches the stage's end, and #how carries no bottom padding, so the
   next section starts straight away. The 1px under-measure keeps the fit
   test (`pin.scrollHeight > avail`) from tripping on a rounded calc. */
.how-pin{
  min-height:calc(100vh - var(--nav-h,64px) - 1px);
  min-height:calc(100svh - var(--nav-h,64px) - 1px);
  display:flex;flex-direction:column;box-sizing:border-box;padding-bottom:0;
}
.how-pin > .wrap{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.how-pin .sec-head{flex:none}
.how-stage .steps{margin:auto 0}
#how{padding-bottom:0}
#why{padding-top:144px}
@media(max-height:820px){.how-pin{padding-bottom:0}}
@media(max-height:690px){.how-pin{padding-bottom:0}}
@media(max-width:760px){#why{padding-top:96px}}


/* ── THE HERO EMAIL FIELD: glass, with a lit white edge ────────────────
   Second pass. Solid white was tried and read as too much; the owner wants
   the field as it was - dark, see-through - but with a white hairline border
   and the faintest glow on it, so it is still the thing the eye lands on.
   The halo is on the BORDER, not the box: a 1px white ring at 70% plus a
   22px bloom at 14%, over the original glass background. Type, placeholder
   and icon are the originals. Scoped to the hero form only. */
.hero .cap .fld{
  border-color:rgba(255,255,255,.72);
  box-shadow:0 0 0 1px rgba(255,255,255,.22),0 0 22px rgba(255,255,255,.14),
             inset 0 1px 0 rgba(255,255,255,.12);
}
.hero .cap .fld:focus-within{border-color:#fff;
  box-shadow:0 0 0 3px var(--mint-glow),0 0 26px rgba(255,255,255,.18)}
.hero .cap .fld.err{border-color:rgba(255,255,255,.72);box-shadow:0 0 0 3px rgba(255,120,100,.5)}

/* ── #how KEEPS ITS SEAM ───────────────────────────────────────────────
   The one seam per boundary is `.sec + .sec::after`, and #how only ever got
   one because #matching sat directly above it. With that section deleted,
   #how's previous ELEMENT sibling is the stat-rail div, so the adjacent
   rule no longer matches and the boundary above the how-it-works section
   lost its line. Same declarations, named explicitly. */
#how::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:var(--w-seam);opacity:.6;
  box-shadow:0 0 26px rgba(255,255,255,.20)}

/* (the WHITE BODY block that lived here, 23 Oct, is superseded by THE PAPER
   SYSTEM at the end of the sheet - the page is paper throughout now.) */

/* ── THE HEIGHT TIERS, RESTATED LAST (23 Oct 2026) ──────────────────────
   The max-height tiers at ~2985 were DEAD. The premium block later wrote
   `.how-stage .step{padding-top:48px;padding-bottom:52px}` and
   `.how-pin .sec-head{margin-bottom:56px}` at the same specificity, so at
   every short window the card kept its 100px of vertical padding and the
   head its 56px margin: an iPhone 15 Pro in Safari with the bars showing
   (393x664) measured the pin at 605 against 600 available and fell into
   the flat strip - exactly what the tiers exist to prevent. Restated here,
   last in the sheet, so source order is on their side.
   Phones get the compact tier BY WIDTH as well: on iOS the viewport height
   changes by ~100px as the URL bar collapses, so a height-only tier can
   flip mid-scroll and change the pin's height under a runway that was
   sized for the other one. Width does not move while you scroll. */
@media(max-height:820px){
  .how-pin .sec-head{margin-bottom:28px}
  .how-stage .step{padding-top:30px;padding-bottom:32px}
}
@media(max-height:690px),(max-width:640px){
  .how-pin .sec-head{margin-bottom:20px}
  .how-stage .step{padding-top:22px;padding-bottom:24px}
  .how-stage .step h3{font-size:18px;margin:12px 0 8px}
  .how-stage .step p{font-size:13.5px}
}

/* ══════════════════════════════════════════════════════════════════════
   THE PAPER SYSTEM (23 Oct 2026)
   The page is paper now - a warm off-white, not clinical white - with
   ink type, one deep green, hairlines instead of glows, and BLACK UI.
   Read off four references the owner brought (Giza's stat cards, the
   Egregore stamp, Quantinium, the Threshold hero): mono small-caps
   kickers, thin rules and registration marks, a serif accent, a single
   restrained colour, generous margins, and ink blocks used as punctuation
   rather than as the ground. Processing-fluency research (Reber, Schwarz
   & Winkielman 2004) is the brief behind every subtraction here: contrast,
   symmetry, prototypical structure, nothing competing. Chaparro et al.
   2004 is why the margins grew and nothing else did.

   HOW IT IS BUILT. The :root tokens were swapped to paper, so everything
   written in tokens inverted for free. The blocks that STAY INK - the
   step cards (their diagrams are mint-on-dark), the index card's photo
   head, the close, the footer, the shared tip and toast - re-declare the
   dark token set on themselves (the first rule below), so nothing inside
   them changes at all. Everything else in this block is a hard-coded
   colour that a token never reached: the globe's bed, the beams, the
   fades, the nav, inputs, the table's logo tiles and sticky head.
   `!important` where an earlier block used it; plain where source order
   is enough. */

/* ── the dark token set, for the blocks that stay ink ─────────────────── */
.hero,.how-stage .step,.dir-top,.final,.foot,#tip,#toast,.dd-m{
  --bg:#050506;--bg-2:#08080A;--surface:#0C0C0F;--surface-2:#121216;--surface-3:#18181D;
  --text:#EADFC8;--dim:#CDC2AC;--dim-2:#A69C88;--dim-3:#8C8372;
  --line:rgba(234,223,200,.17);--line-2:rgba(234,223,200,.30);--line-3:rgba(255,255,255,.46);
  --line-soft:rgba(255,255,255,.10);--grid:rgba(255,255,255,.075);
  --mint:#10FFA1;--mint-ink:#04160E;--mint-glow:rgba(16,255,161,.16);
  --g-mint:linear-gradient(180deg,#10FFA1,#0AD186);
  --g-type:linear-gradient(176deg,#FFFFFF 8%,#E4E4E7 34%,#8B8B95 78%,#6A6A74 100%);
  --g-type-2:linear-gradient(180deg,#FFFFFF,#9C9CA6);
  --g-solid:linear-gradient(180deg,#FFFFFF 0%,#D6D6DB 100%);
  color:var(--text)}

/* ── paper grain: the one texture, and it is almost not there ─────────── */
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ── the ground, the seams, and every white-light effect, off ─────────── */
html,body{background:var(--bg)}
.sec::before{display:none}
#directory::after,#why::after,.final .wrap::after{display:none}
#how .spot{display:none}
.sec + .sec::after{background:linear-gradient(90deg,transparent,rgba(18,20,18,.26),transparent);
  box-shadow:none;opacity:1}
#how::after{display:none}
.dir::before,.final::before{background:linear-gradient(90deg,transparent,rgba(31,122,77,.35),transparent)}
.grad{background:none;-webkit-text-fill-color:var(--text);color:var(--text)}

/* ── nav: paper, ink mark, black secondary button ─────────────────────── */
.nav{background:linear-gradient(180deg,rgba(241,235,223,.96),rgba(241,235,223,.88))!important;
  border-bottom-color:rgba(18,20,18,.12)!important}
.nav.stuck{background:rgba(241,235,223,.97)!important;
  box-shadow:0 1px 0 rgba(18,20,18,.08),0 16px 36px -30px rgba(18,20,18,.45)!important}
.nav::before{background:none!important;box-shadow:none!important}
.nav::after{display:none!important}
.nav-field{opacity:.22!important}
.mark{filter:brightness(0)!important;opacity:.9}
.nav .brand{color:var(--text)!important}
.sheet{background:rgba(241,235,223,.98)!important}

/* ── buttons: black is the UI colour on paper; green is kept for meaning ─ */
.btn-p{background:var(--text)!important;color:#EADFC8!important;border-color:var(--text)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 24px -14px rgba(18,20,18,.6)!important}
.btn-p:hover{background:#1F7A4D!important;border-color:#1F7A4D!important}
.btn-gh,.nav-right .btn-gh{background:transparent!important;color:var(--text)!important;
  border-color:rgba(18,20,18,.34)!important}
.btn-gh:hover{background:rgba(18,20,18,.06)!important}
.final .btn-p{background:#10FFA1!important;color:#04160E!important;border-color:#10FFA1!important;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 10px 24px -14px rgba(16,255,161,.5)!important}
.final .btn-p:hover{background:#4CFFB8!important;border-color:#4CFFB8!important}

/* (the Threshold hero that lived here is superseded by THE CANOPY HERO
   at the end of the sheet - the hero is a dark plate again.) */

/* ── inputs and surfaces, paper ───────────────────────────────────────── */
.cap .fld,.srch,.dd-t,.dd-m,.srt,.hsearch{background:#fff!important;border-color:rgba(18,20,18,.18)!important}
.final .cap .fld{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.22)!important}
.final .cap input{color:#EADFC8!important}
.final .cap input::placeholder{color:rgba(234,223,200,.45)!important}
.peek{background:rgba(255,255,255,.96)!important;box-shadow:0 22px 54px -36px rgba(18,20,18,.45),inset 0 1px 0 #fff!important}

/* ── the index card: frosted paper, the photo head kept as the one dark
      object inside it (Giza's card: a picture with a figure on it) ────── */
.dir{background-color:rgba(255,255,255,.86)!important;
  box-shadow:0 1px 2px rgba(18,20,18,.05),0 30px 70px -50px rgba(18,20,18,.5)!important;
  border-color:rgba(18,20,18,.14)!important}
.dir::after{background:linear-gradient(90deg,transparent,rgba(18,20,18,.18),transparent)!important}
thead th{background-color:#F6F5F0!important;background-image:none!important;
  box-shadow:inset 0 -1px 0 rgba(18,20,18,.14)!important}
tbody tr.row:hover{background:rgba(18,20,18,.03)!important}
tbody tr.row.open{background:rgba(31,122,77,.05)!important}
tr.det .det-in{background:linear-gradient(180deg,rgba(31,122,77,.045),rgba(31,122,77,.01))!important}
.tscroll::-webkit-scrollbar-thumb{background:rgba(18,20,18,.18)!important;border-color:#fff!important}
.tscroll{scrollbar-color:rgba(18,20,18,.22) transparent!important}
.logo.spr,.logo.has-pic,.logo.has-ico{background-color:#fff!important;
  box-shadow:0 0 0 1px rgba(18,20,18,.14) inset,0 1px 2px rgba(18,20,18,.06)!important}
.logo{box-shadow:0 0 0 1px rgba(18,20,18,.12)!important}
.tag{background:rgba(18,20,18,.05)!important;border-color:rgba(18,20,18,.14)!important;color:var(--dim)!important}

/* ── the belt: ink marks on paper, fading into paper ──────────────────── */
.marq{background:none!important}
.marq::before{background:linear-gradient(90deg,#F1EBDF 12%,rgba(241,235,223,0))!important}
.marq::after{background:linear-gradient(270deg,#F1EBDF 12%,rgba(241,235,223,0))!important}
.marq-t i{background:#121412!important;opacity:.48!important}

/* ── the stat rail: Giza's figure cards - mono kicker, a big numeral, a
      hairline frame with registration marks at the corners ─────────── */
.rail-under{position:relative;border-top-color:rgba(18,20,18,.22)!important;border-bottom-color:rgba(18,20,18,.22)!important}
.rail-under::after{content:"";position:absolute;inset:-3px;pointer-events:none;
  background-image:linear-gradient(var(--text),var(--text)),linear-gradient(var(--text),var(--text)),
                   linear-gradient(var(--text),var(--text)),linear-gradient(var(--text),var(--text));
  background-size:5px 5px;background-repeat:no-repeat;
  background-position:0 0,100% 0,0 100%,100% 100%}
.rail-under div{border-right-color:rgba(18,20,18,.16)!important;border-bottom-color:rgba(18,20,18,.16)!important}
.rail-under b{color:var(--text)!important}
.rail-under span{color:var(--dim-2)!important}
.rail-under div:hover b{color:#1F7A4D!important}
.rail-under div::before{background:#1F7A4D!important}
.rail-under div:hover{background:rgba(18,20,18,.03)!important}

/* ── how it works: paper section, the cards stay ink (the diagrams) ───── */
.how-stage .step{background-color:#0A0C0E!important;border-color:rgba(18,20,18,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(18,20,18,.05),0 24px 50px -34px rgba(18,20,18,.5)!important}
#how .sec-head .lede{color:var(--dim)!important}

/* ── why: Quantinium's boxed grid - white cells on a hairline grid ─────── */
#why .bento{background-color:rgba(18,20,18,.14)!important;border-color:rgba(18,20,18,.18)!important;
  box-shadow:0 1px 2px rgba(18,20,18,.04),0 24px 50px -38px rgba(18,20,18,.35)!important}
#why .bento::before{display:none!important}
#why .cell{background-color:#F8F4EB!important;background-image:none!important;box-shadow:none!important}
#why .cell:hover{background-color:#F3EDE1!important}
#why .cell h3{color:var(--text)!important}
#why .cell p{color:var(--dim)!important}
#why .cell .k{color:#1F7A4D!important}
#why .bento-foot{background-color:rgba(18,20,18,.14)!important;border-color:rgba(18,20,18,.18)!important;box-shadow:none!important}
#why .bento-foot div{background-color:#F8F4EB!important;background-image:none!important}
#why .bento-foot b{color:var(--text)}
#why .bento-foot span{color:var(--dim-2)}

/* ── the ledgers: a paper card, ruled; the active tab is a black chip ──── */
.ledger{background-color:#F8F4EB!important;background-image:none!important;
  border:1px solid rgba(18,20,18,.16)!important;
  box-shadow:0 1px 2px rgba(18,20,18,.04),0 24px 50px -38px rgba(18,20,18,.35)!important}
.lg-tabs{border-bottom-color:rgba(18,20,18,.12)!important}
.lg-t{color:var(--dim-2)!important}
.lg-t:hover{color:var(--text)!important}
.lg-t.on{background:var(--text)!important;color:#EADFC8!important}
.lg-body dt{color:var(--dim-2)!important}
.lg-body dd{color:var(--text)!important}
.lg-body dd a{color:#1F7A4D!important}
.lg-body dt,.lg-body dd{border-color:rgba(18,20,18,.10)!important}

/* ── FAQ: a ruled list on paper ───────────────────────────────────────── */
#faq .faq{border-top-color:rgba(18,20,18,.18)!important}
#faq .q{border-bottom-color:rgba(18,20,18,.12)!important}
#faq .q button{color:#2E2A24!important}
#faq .q button:hover,#faq .q.on button{color:var(--text)!important}
#faq .q .pm{color:#6B6458!important}
#faq .q .a p{color:#4A453D!important}

/* ── section stars and kickers on paper ───────────────────────────────── */
.label::before{background:#1F7A4D!important;opacity:1!important}
.label{color:var(--dim-2)!important}
.final .label::before{background:#10FFA1!important}
.final .label{color:#8A9E94!important}

/* ── the close: the Threshold hero - a cinematic plate, the photo we
      already own, the type on it ───────────────────────────────────── */
.final{background:#050506!important;border-top:0!important}
.final .field{background:#050506 url("assets/img/prompt-still.webp") center 40%/cover no-repeat!important;opacity:1!important}
.final .field::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,6,.86),rgba(5,5,6,.74) 40%,rgba(5,5,6,.80) 100%)}
.final .glow{display:none!important}
.final-in h2{color:#EADFC8!important;-webkit-text-fill-color:#EADFC8!important;background:none!important}
.final-in .lede{color:rgba(234,223,200,.78)!important}
.final .assure a{color:rgba(234,223,200,.85)!important}
.final .trust{color:rgba(234,223,200,.6)!important}
#access::after{display:none!important}

/* ── footer: ink ──────────────────────────────────────────────────────── */
.foot{background:#0A0907!important;border-top:0!important;color:#EADFC8!important}
.foot a:hover{color:#EADFC8!important}

/* ── tip and toast are overlays and stay ink ──────────────────────────── */
#tip,#toast{background:#0A0D0B!important;color:#EADFC8!important;border-color:rgba(255,255,255,.14)!important}
#tip *,#toast *{color:inherit!important}

/* ── second pass, from the sweep and the screenshots ──────────────────── */
/* the ledger carried a dark pool at its foot (::after) and a lit edge
   (::before) for the dark page; on a white card the pool reads as a stain */
.ledger::before,.ledger::after{display:none!important}
/* the index card's photo head stays ink, so the paper input and button
   rules above must NOT reach into it - they did, and put white pills on
   the photograph and a white Match button with white type */
.dir-top .srch,.dir-top .dd-t,.dir-top .srt,.dir-top .hsearch{
  background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.2)!important}
.dir-top .btn-p{background:#10FFA1!important;color:#04160E!important;border-color:#10FFA1!important;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 10px 24px -14px rgba(16,255,161,.5)!important}
.dir-top .btn-p:hover{background:#4CFFB8!important;border-color:#4CFFB8!important}
/* The filter menus USED TO inherit the card head's ink tokens by sitting
   inside it. They are moved to <body> while open now (see menuOf), so they
   would otherwise inherit the PAPER tokens and render ink `--dim` type on
   this `#0E1114` panel - invisible. `.dd-m` is therefore in the dark token
   set above, beside #tip and #toast, which are fixed panels for the same
   reason. Any new portaled panel needs adding there too. */
.dd-m{background:#0E1114!important;border-color:rgba(255,255,255,.16)!important;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8)!important}
/* the hero's green aura, a notch quieter: a halo reads as decoration */
.g1{background:radial-gradient(circle,rgba(31,122,77,.07),rgba(31,122,77,0) 66%)!important}
.g2,.g3{opacity:.6}

/* ══════════════════════════════════════════════════════════════════════
   THE GRID - the Quantinium block (23 Oct 2026)
   Replaces the stat rail and the how-it-works section head. An ink plate
   on the paper page: three dark boxes (heading / line drawing / copy /
   pill), a thin strip, a wide cream card with the big heading, one black
   button and a drawing. Static by design. */
.qgrid{position:relative;z-index:1;background:#0A0A0A;border-radius:24px;padding:12px;margin:40px 0 0;
  box-shadow:0 1px 2px rgba(18,20,18,.06),0 40px 90px -60px rgba(18,20,18,.6)}
.qg-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.qg-card{background:#161616;border:1px solid #2A2A2A;border-radius:16px;padding:26px 26px 24px;
  display:flex;flex-direction:column;min-height:420px;color:#EADFC8;
  --text:#EADFC8;--dim:#CDC2AC;--dim-2:#A69C88}
.qg-card h3{font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:-.022em;line-height:1.28;margin:0;max-width:16ch;color:#EADFC8}
.qg-card h3 b{font-weight:600;font-variant-numeric:tabular-nums lining-nums}
.qg-card .qg-art{width:150px;height:112px;margin:auto;color:#DED3BC;opacity:.92}
.qg-card p{font-size:11.5px;line-height:1.55;color:#9A907E;margin:0 0 14px;max-width:30ch}
.qg-pills{display:flex;gap:8px;flex-wrap:wrap}
.qg-pill{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;
  background:#262626;border:1px solid #333;color:#DED3BC;font-size:10.5px;font-weight:500;letter-spacing:.01em;
  text-decoration:none;transition:background .2s,border-color .2s}
.qg-pill:hover{background:#333;border-color:#444}
.qg-strip{display:flex;align-items:center;gap:12px;margin:12px 0;padding:0 18px;height:36px;
  border:1px solid #2A2A2A;border-radius:12px;background:#111;color:#B9AE98;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.03em;text-transform:none;white-space:nowrap;overflow:hidden}
.qg-strip i{width:7px;height:7px;border-radius:50%;background:#10FFA1;box-shadow:0 0 0 3px rgba(16,255,161,.16);flex:none}
.qg-strip span{color:#EADFC8}
.qg-strip b{color:#10FFA1;font-weight:600}
.qg-strip em{font-style:normal;color:#9A907E;letter-spacing:.04em;text-transform:none;font-family:"Inter Tight";font-size:12px;
  margin-left:auto;overflow:hidden;text-overflow:ellipsis}
.qg-wide{position:relative;overflow:hidden;background:#EFE7D5;border:1px solid #D9CEB7;border-radius:16px;
  min-height:300px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);color:#121412}
.qg-copy{padding:48px 44px 44px;display:flex;flex-direction:column;align-items:flex-start}
.qg-wide h2{font-family:var(--display);font-size:clamp(28px,3.1vw,38px);letter-spacing:-.034em;line-height:1.1;font-weight:500;
  margin:0;color:#121412;max-width:17ch}
.qg-wide h2 .em{font-size:1.06em}
.qg-wide p{font-size:13px;line-height:1.6;color:#4B534D;max-width:40ch;margin:18px 0 26px}
.qg-btn{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:999px;background:#121412;color:#EADFC8;
  font-size:12px;font-weight:500;text-decoration:none;transition:background .2s}
.qg-btn:hover{background:#1F7A4D}
.qg-coins{position:relative;min-height:240px}
/* the how-it-works head now lives in the wide card */
.how-pin .sec-head{display:none!important}
#how{padding-top:0!important}
@media(max-width:900px){
  .qg-top{grid-template-columns:1fr}
  .qg-card{min-height:0}
  .qg-card .qg-art{margin:22px auto}
  .qg-wide{grid-template-columns:1fr}
  .qg-copy{padding:34px 26px 30px}
  .qg-coins{min-height:200px;margin:0 0 10px}
  .qg-strip em{display:none}
  .qgrid{padding:8px;border-radius:18px;margin-top:28px}
  #how{padding-top:0!important}
}

/* the two generated drawings: the sphere is 160x120 like the funnel; the
   map is wide, so it takes the same slot at a 2.25:1 box */
.qg-card .qg-map{width:168px;height:75px}
/* ── phone: a ROW of three tiles, not three stacked cards. The figure leads
   (22px), the label follows (10px), the drawing is small, and the copy and
   pills are hidden - a stat tile, which is what a 110px-wide box can be. */
@media(max-width:900px){
  .qg-top{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .qg-card{padding:14px 10px 12px;min-height:0;align-items:center;text-align:center;border-radius:12px}
  .qg-card h3{font-size:10px;font-weight:500;letter-spacing:.02em;line-height:1.3;max-width:none;color:#B9AE98;
    display:flex;flex-direction:column;align-items:center;gap:2px}
  .qg-card h3 b{display:block;font-size:22px;letter-spacing:-.03em;color:#EADFC8;line-height:1}
  .qg-card .qg-art{width:84px;height:63px;margin:14px auto 0}
  .qg-card .qg-map{width:96px;height:43px}
  .qg-card p,.qg-pills{display:none}
}
@media(max-width:380px){.qg-card h3 b{font-size:19px}.qg-card .qg-art{width:72px;height:54px}.qg-card .qg-map{width:86px;height:38px}}

/* ── the cream card on a PHONE: the coins stop costing a whole row ──────
   Measured at 375: the card was 475px, and 209 of that was the coin band -
   44% of it spent on decoration that is below the fold of its own card.
   The emblems are pinned to the bottom-right corner instead, bleeding off
   the right edge the way they do on the desktop, sharing the foot row with
   the button (button left, emblems right). The card is then exactly as
   tall as its copy: ~242px, half what it was. Desktop is untouched. */
@media(max-width:900px){
  .qg-wide{min-height:0}
  .qg-copy{padding:28px 24px 24px}
  .qg-wide h2{font-size:26px}
  .qg-wide p{font-size:12.5px;margin:12px 0 26px}
  .qg-btn{height:30px}
  /* out of the flow, so it adds no height at all */
  .qg-coins{position:absolute;right:-14px;bottom:12px;width:160px;height:76px;
    min-height:0;margin:0;pointer-events:none}
}
@media(max-width:380px){
  .qg-coins{width:146px;height:70px;right:-12px}
}

/* ══════════════════════════════════════════════════════════════════════
   THE GLASS TILES (23 Oct 2026)
   The two cream coins read as one thing twice, so they are three dark
   glass squircles now, off the reference the owner brought: a matte
   near-black body, ONE lit top edge, a soft specular falling from the
   top-left corner, and soft translucent shapes inside. Each tile is a
   different object - the INDEX (three stacked plates), the MARK, the
   NETWORK (a hub and four nodes) - so the row reads as a set rather
   than a repeat.

   THE MARK TILE MASKS THE REAL LOGO FILE rather than redrawing it:
   `-webkit-mask:url(apexround-mark.png)` takes the glyph's ALPHA, so the
   mountain is the shape and a glass gradient is the fill. It cannot drift
   from the brand mark, and it needs no second asset - the same trick as
   `.mark{filter:brightness(0)}` in the nav, one level further.

   Dark on CREAM, not dark on black like the reference: the contrast is
   what makes them read as objects sitting on paper rather than holes in
   it. Static, like everything else in this block. */
.qg-tile{position:absolute;display:grid;place-items:center;
  width:138px;height:138px;border-radius:30%;
  background:
    radial-gradient(130% 100% at 24% -4%,rgba(255,255,255,.17),rgba(255,255,255,.045) 40%,transparent 70%),
    linear-gradient(152deg,#2B2F35 0%,#1A1D22 38%,#0C0E11 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.20),
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 -1.5px 0 rgba(0,0,0,.5),
    0 2px 6px -2px rgba(12,14,12,.40),
    0 28px 48px -24px rgba(12,14,12,.80)}
.qg-tile svg,.qg-tile .qg-mark{position:relative;display:block;width:62%;height:62%}
.qg-mark{
  -webkit-mask:url("assets/brand/apexround-mark.png") center/contain no-repeat;
          mask:url("assets/brand/apexround-mark.png") center/contain no-repeat;
  background:linear-gradient(162deg,rgba(242,233,214,.98) 0%,rgba(242,233,214,.64) 44%,rgba(242,233,214,.28) 100%)}
/* EVERY MARK IS MASKED TO ONE GLASS FILL. The source files are brand
   squares (Antler is a white A on red, EF orange on purple) or black
   glyphs (Madrona), so each was reduced to an ALPHA mask by luminance and
   normalised to full opacity - `mask-*.png` in assets/logos, generated,
   not hand-traced. Masking means the firm's own colour is never lent to
   our page, which is the same rule the footer socials and the logo belt
   follow. A wordmark needs a wider box than a glyph: `contain` fits it to
   the width, so Accel gets 76% where a square glyph gets 54%. */
.qg-logo{display:block;width:54%;height:54%;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  background:linear-gradient(162deg,rgba(242,233,214,.97) 0%,rgba(242,233,214,.62) 45%,rgba(242,233,214,.26) 100%)}
.l-madrona{-webkit-mask-image:url("assets/logos/mask-madrona.png");mask-image:url("assets/logos/mask-madrona.png")}
.l-antler{-webkit-mask-image:url("assets/logos/mask-antler.png");mask-image:url("assets/logos/mask-antler.png")}
.l-ef{-webkit-mask-image:url("assets/logos/mask-ef.png");mask-image:url("assets/logos/mask-ef.png");width:50%}
/* ACCEL IS MASKED FROM THE SVG ITSELF, not a raster. It is the one mark
   we hold as a vector (1288x413, five opaque paths, no fills to strip),
   so `contain` resolves it at whatever the device asks for and it can
   never be the soft one again. mask-image on an SVG uses its ALPHA, and
   an unfilled path defaults to opaque black, so the glyph is the mask. */
.l-accel{-webkit-mask-image:url("assets/vc/accel.svg");mask-image:url("assets/vc/accel.svg");width:78%}

/* THE FAN. Anchored from the RIGHT so the last tile bleeds off the card's
   edge whatever the column measures. The four firms sit behind at 118px
   with alternating lift and rotation; ApexRound is larger, square to the
   page and on top - it is our card, so it is the one object not tilted. */
.qg-tile{width:118px;height:118px}
/* WHICH LOGO GETS WHICH SLOT IS NOT ARBITRARY (29 Oct 2026). Slot 4 bleeds
   off the card's edge on purpose, and a GLYPH cut by that edge reads as a
   bleed while a WORDMARK cut by it reads as a mistake - the owner saw
   "Acce" hanging off the side and called it horrible, correctly. So the two
   lockups (Accel, EF) take the inboard slots where they are whole, and the
   two square glyphs (Antler, Madrona) take the outer ones, with Madrona
   doing the bleeding. Markup order is therefore Accel, EF, Antler, Madrona,
   and the phone rule below shows children 3 and 4 - still the two compact
   glyphs, which are the only two that survive 62px. */
.qg-tile:nth-child(1){right:410px;top:50%;transform:translateY(-70%) rotate(-13deg);z-index:1}
.qg-tile:nth-child(2){right:300px;top:50%;transform:translateY(-26%) rotate(-6deg);z-index:2}
.qg-tile:nth-child(3){right:76px;top:50%;transform:translateY(-78%) rotate(6deg);z-index:3}
.qg-tile:nth-child(4){right:-34px;top:50%;transform:translateY(-34%) rotate(13deg);z-index:4}
.qg-apex{right:180px;top:50%;transform:translateY(-50%);z-index:10;
  width:150px;height:150px;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 -1.5px 0 rgba(0,0,0,.5),
    0 3px 8px -3px rgba(12,14,12,.5),
    0 36px 60px -28px rgba(12,14,12,.9)}
@media(max-width:1180px){
  .qg-tile{width:100px;height:100px}
  .qg-tile:nth-child(1){right:348px}
  .qg-tile:nth-child(2){right:256px}
  .qg-tile:nth-child(3){right:66px}
  .qg-tile:nth-child(4){right:-28px}
  .qg-apex{right:152px;width:128px;height:128px}
}
/* phone: a tight stack of three in the corner strip - two firms peeking
   out from behind the mark, which is the whole point of the picture */
@media(max-width:900px){
  .qg-coins{width:188px}
  .qg-tile{width:62px;height:62px;border-radius:28%;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 0 0 1px rgba(255,255,255,.07),
               inset 0 -1px 0 rgba(0,0,0,.5),0 10px 20px -10px rgba(12,14,12,.7)}
  .qg-tile:nth-child(1),.qg-tile:nth-child(2){display:none}
  .qg-tile:nth-child(3){right:116px;top:50%;transform:translateY(-54%) rotate(-10deg)}
  .qg-tile:nth-child(4){right:58px;top:50%;transform:translateY(-44%) rotate(8deg)}
  .qg-apex{right:-6px;top:50%;transform:translateY(-50%);width:70px;height:70px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),
               inset 0 -1px 0 rgba(0,0,0,.5),0 12px 22px -10px rgba(12,14,12,.85)}
}
@media(max-width:380px){
  .qg-coins{width:170px}
  .qg-tile{width:58px;height:58px}
  .qg-tile:nth-child(3){right:104px}
  .qg-tile:nth-child(4){right:52px}
  .qg-apex{width:64px;height:64px}
}


/* (THE BLACK INDEX block lived here, 23 Oct, and is REMOVED 24 Oct: the
   index is the LIGHT band again - see THE RHYTHM at the end of the sheet.
   The live dot on the count is the one piece kept.) */
#count::before,thead th .th-count::before{content:"";display:inline-block;width:6px;height:6px;
  margin:0 8px 1px 0;vertical-align:middle;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 3px rgba(31,122,77,.16)}

/* ══════════════════════════════════════════════════════════════════════
   THE CENTRED NAV (23 Oct 2026)
   The mark alone in the middle, three links either side in small caps,
   evenly spread through each half - read off the owner's reference. The
   wordmark and both buttons are gone from the bar.

   THE MARK IS A MASK, NOT THE PNG: `apexround-mark.png` supplies the
   glyph's alpha and a vertical gradient supplies the fill - solid at the
   star, easing to ~55% at the base - which is the "gradient transparency"
   the owner asked for, while the top half stays fully opaque so it never
   reads as faded. A soft drop-shadow keeps it standing off the sky. */
.nav .wrap{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:0!important}
.nav-l{grid-column:1;justify-content:space-evenly;padding-right:clamp(12px,3vw,48px)}
.nav-r{grid-column:3;justify-content:space-evenly;padding-left:clamp(12px,3vw,48px)}
.nav-links{display:flex;gap:18px;margin:0}
.nav-links a{font-family:"Inter Tight",system-ui,sans-serif;font-size:11.5px!important;font-weight:450!important;
  letter-spacing:.015em;text-transform:none}
.nav-links a::after{bottom:-6px}
/* every link stays until the phone menu takes over - dropping two from
   the left would leave one link balancing three */
@media(min-width:901px){.nav-links a[href="#why"],.nav-links a[href="#how"]{display:inline!important}}

.nav-mark{grid-column:2;grid-row:1;display:grid;place-items:center;width:56px;height:56px;
  justify-self:center;border-radius:14px;transition:transform .3s var(--ease)}
.nav-mark:hover{transform:translateY(-1px)}
.nav-mark i{display:block;width:42px;height:38px;
  -webkit-mask:url("assets/brand/apexround-mark.png") center/contain no-repeat;
          mask:url("assets/brand/apexround-mark.png") center/contain no-repeat;
  background:linear-gradient(180deg,#FFFFFF 0%,rgba(255,255,255,.97) 42%,rgba(255,255,255,.70) 100%);
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.40)) drop-shadow(0 0 16px rgba(255,255,255,.18))}
/* on the cream bar once the photo is behind it: the same gradient in ink */
.nav.stuck .nav-mark i{background:linear-gradient(180deg,#121412 0%,rgba(18,20,18,.95) 42%,rgba(18,20,18,.68) 100%);
  filter:none}
.nav.stuck .nav-links a{color:#433E37!important}
.nav.stuck .nav-links a:hover{color:#121412!important}

.burger{grid-column:3;grid-row:1;justify-self:end}
@media(max-width:900px){
  .nav-l,.nav-r{display:none!important}
  .nav-mark{width:46px;height:46px}
  .nav-mark i{width:32px;height:29px}
}

/* ══════════════════════════════════════════════════════════════════════
   THE ORB HERO (23 Oct 2026)
   Read off the Quantinium reference: black plate, a strip of two small
   statements over a hairline, mark + name top-left, a stacked menu
   top-right, a big LEFT-SET sans headline, a particle sphere drawn behind
   everything, the lede and the form at the foot. Cream on black with the
   green kept to the accents: the live dot, a scatter of lit points in the
   sphere, hover states. */
.hero{position:relative!important;overflow:hidden!important;background:#0A0907!important;
  padding:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;
  min-height:max(680px,min(100svh,980px))!important;color:#EADFC8}
#orb{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.hero > .wrap{position:relative;z-index:2;flex:1 0 auto;display:flex;flex-direction:column;width:100%}

/* THE CREST NAV (23 Oct), from the owner's reference: no bar at all. Small
   spaced capitals float on the plate, three either side, and the MARK sits
   between them as the one object with light in it - a gradient fill (bright
   ivory at the star, cream through the peaks, half-transparent at the base),
   a soft bloom held by a wrapper filter (a filter on the masked element itself
   would be masked away), and a faint halo of light behind it. */
.hq-bar{position:relative;z-index:6;margin:24px auto 0;width:100%;max-width:960px;height:56px;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:clamp(40px,5.5vw,76px)}
.hq-side{display:flex;align-items:center;gap:clamp(36px,5vw,68px);min-width:0}
.hq-l{justify-content:flex-end}.hq-r{justify-content:flex-start}
.hq-side a{font-family:"Inter Tight",system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:.01em;
  text-transform:none;white-space:nowrap;text-decoration:none;color:rgba(244,237,224,.88);
  transition:color .25s,opacity .25s}
.hq-side a:hover{color:#FFFFFF}
.hq-side a.hq-go:hover{color:#10FFA1}

.hq-crest{position:relative;display:grid;place-items:center;width:44px;height:44px;text-decoration:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 0 6px rgba(255,250,240,.22))}
.hq-mark{display:block;width:36px;height:32px;
  background:linear-gradient(160deg,#FFFFFF 0%,#FBF7EF 38%,rgba(236,228,212,.86) 74%,rgba(214,204,186,.72) 100%);
  -webkit-mask:url("assets/brand/apexround-mark.png") center/contain no-repeat;
          mask:url("assets/brand/apexround-mark.png") center/contain no-repeat;
  transition:transform .35s cubic-bezier(.3,.7,.4,1)}
.hq-crest:hover .hq-mark{transform:translateY(-1px)}

/* the menu button and its double X */
.hq-burger{position:absolute;right:0;top:50%;margin-top:-21px;display:none;width:42px;height:42px;padding:0;
  border-radius:50%;cursor:pointer;background:transparent;border:1px solid rgba(234,223,200,.22);
  transition:border-color .2s,background-color .2s}
.hq-burger:hover{border-color:rgba(234,223,200,.5)}
.hq-bar.open .hq-burger{border-color:rgba(234,223,200,.55);background:rgba(234,223,200,.05)}
.hq-burger i,.hq-burger b{position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;
  border-radius:2px;background:#EADFC8;transition:transform .32s cubic-bezier(.3,.7,.4,1),opacity .2s}
.hq-burger .hl1{transform:translateY(-5px)}
.hq-burger .hl3{transform:translateY(5px)}
.hq-burger b{width:20px;margin-left:-10px;background:#10FFA1;opacity:0;transform:rotate(0) scaleX(.2);
  box-shadow:0 0 6px rgba(16,255,161,.6);
  transition:transform .46s cubic-bezier(.34,1.56,.64,1) .07s,opacity .25s .07s}
.hq-bar.open .hq-burger .hl1{transform:rotate(45deg)}
.hq-bar.open .hq-burger .hl2{opacity:0;transform:scaleX(0)}
.hq-bar.open .hq-burger .hl3{transform:rotate(-45deg)}
.hq-bar.open .hq-burger .hx1{opacity:.75;transform:rotate(60deg) scaleX(1)}
.hq-bar.open .hq-burger .hx2{opacity:.75;transform:rotate(-30deg) scaleX(1)}
@media(prefers-reduced-motion:reduce){.hq-burger i,.hq-burger b{transition:opacity .15s}}
.hq-burger:focus-visible,.hq-side a:focus-visible,.hq-crest:focus-visible{outline:2px solid #10FFA1;outline-offset:4px;border-radius:6px}

.hq-panel{position:absolute;top:calc(100% + 6px);right:0;width:min(300px,100%);padding:8px;border-radius:14px;
  display:flex;flex-direction:column;background:rgba(14,13,11,.94);border:1px solid rgba(234,223,200,.18);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 24px 50px -16px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-6px);transform-origin:top right;
  transition:opacity .22s,transform .25s cubic-bezier(.3,.7,.4,1),visibility .22s}
.hq-bar.open .hq-panel{opacity:1;visibility:visible;transform:none}
.hq-panel a{display:flex;align-items:center;height:44px;padding:0 14px;border-radius:8px;
  color:#EADFC8;text-decoration:none;font-size:15.5px;transition:background-color .2s}
.hq-panel a:hover{background:rgba(234,223,200,.06)}
.hq-panel .hq-panel-cta{margin-top:6px;justify-content:center;background:#EADFC8;color:#0A0907;font-weight:500}
.hq-panel .hq-panel-cta:hover{background:#10FFA1;color:#04160E}
@media(max-width:1100px){.hq-side{gap:28px}.hq-bar{column-gap:34px}}
@media(max-width:980px){.hq-side{visibility:hidden}.hq-burger{display:block}}

h1.hq-h{margin:clamp(56px,11vh,120px) 0 0!important;padding:0;max-width:10em;
  font-family:"Inter Tight",system-ui,sans-serif!important;font-style:normal;font-weight:400!important;
  font-size:min(clamp(42px,5.9vw,82px),calc((100vw - 48px) / 11.8))!important;line-height:1.03!important;letter-spacing:-.038em!important;
  color:#EADFC8!important;text-align:left;text-shadow:0 2px 24px rgba(10,9,7,.6)}

/* line 2 is the long one and must hold ONE row: the h1 is sized off it
   (11.5em measured) rather than off the viewport alone */
h1.hq-h{max-width:none!important}
h1.hq-h .hq-l2{white-space:nowrap}
/* the subheading: the scale, in the headline's voice one size down */
.hq-sub{margin:clamp(16px,2.4vh,24px) 0 0;max-width:24em;font-family:"Inter Tight",system-ui,sans-serif;
  font-weight:400;font-size:clamp(17px,1.55vw,21px);line-height:1.4;letter-spacing:-.012em;
  color:rgba(234,223,200,.9);text-shadow:0 1px 16px rgba(10,9,7,.75);text-wrap:pretty}
.hq-sub b{font-weight:500;color:#EADFC8;font-variant-numeric:tabular-nums lining-nums}
.hq-foot{margin-top:auto;padding:48px 0 clamp(40px,7vh,72px);max-width:480px}
.hq-lede{margin:0;font-size:15px;line-height:1.56;color:rgba(234,223,200,.84);text-shadow:0 1px 14px rgba(10,9,7,.7)}

/* the form: one glass pill, as before - field and a cream button inside it */
.hero .hero-cap{margin:22px 0 0!important;width:min(420px,100%);max-width:none!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;gap:0!important;
  padding:5px!important;border-radius:999px;background:rgba(18,17,14,.62);
  border:1px solid rgba(234,223,200,.26);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:border-color .2s}
.hero .hero-cap:focus-within{border-color:rgba(234,223,200,.55)}
.hero .hero-cap:has(.fld.err){border-color:rgba(255,150,130,.85)}
.hero .hero-cap .fld{flex:1 1 auto;min-width:0;height:40px!important;padding:0 8px 0 14px!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.hero .hero-cap .fld svg{color:rgba(234,223,200,.6)!important}
.hero .hero-cap input{color:#EADFC8!important;font-size:14px!important}
.hero .hero-cap input::placeholder{color:rgba(234,223,200,.62)!important}
.hero .hero-cap .btn,.hero .hero-cap .btn-p{flex:none;width:auto!important;height:40px!important;padding:0 18px!important;
  border-radius:999px!important;font-size:13.5px!important;font-weight:500!important;
  background:#EADFC8!important;color:#121412!important;border-color:#EADFC8!important;box-shadow:none!important}
.hero .hero-cap .btn-p:hover{background:#10FFA1!important;border-color:#10FFA1!important;color:#04160E!important}
.hero .cap-msg{margin-top:10px;text-align:left;color:rgba(234,223,200,.82)}

/* the denser orb (13,000 points) runs behind the type, so every hero line
   carries a TIGHT halo in the plate's own black: it clears the dots right
   around each glyph and draws no box. */
.hq-lede{text-shadow:0 0 2px #0A0907,0 0 5px rgba(10,9,7,.95),0 0 12px rgba(10,9,7,.8),0 1px 18px rgba(10,9,7,.7)!important}
.hq-sub{text-shadow:0 0 2px #0A0907,0 0 6px rgba(10,9,7,.95),0 0 14px rgba(10,9,7,.75)}
h1.hq-h{text-shadow:0 0 3px #0A0907,0 0 10px rgba(10,9,7,.9),0 2px 28px rgba(10,9,7,.65)!important}

/* the line over the field is a STATUS, not a sentence: one line, small,
   a live dot, no full stop. */
.hero .hq-lede{display:flex!important;align-items:flex-start;gap:11px;
  font-size:14px!important;line-height:1.5!important;letter-spacing:.003em;color:rgba(234,223,200,.84)!important;
  text-wrap:pretty}
.hq-live{position:relative;flex:none;width:7px;height:7px;margin-top:.5em;border-radius:50%;background:#10FFA1;
  box-shadow:0 0 0 3px rgba(16,255,161,.14),0 0 10px rgba(16,255,161,.55)}
.hq-live::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(16,255,161,.5);
  animation:hq-pulse 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes hq-pulse{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(2.1);opacity:0}}
@media(prefers-reduced-motion:reduce){.hq-live::after{animation:none;display:none}}

/* THE GREEN PATH (23 Oct). One hue, three moments, read top to bottom:
   the figure (what is here), the field's edge (where to start), the button
   (act). Each is a thing that is LIVE or ACTIONABLE, which is what mint is
   rationed for; nothing decorative takes it. Same #10FFA1 as the orb's lit
   points, so the accents and the picture share one light. */
.hq-sub b#hero-count,.hq-sub b.hc-plus{color:#10FFA1;font-weight:500;
  text-shadow:0 0 22px rgba(16,255,161,.28),0 1px 14px rgba(10,9,7,.7)}
.hq-sub b.hc-plus{margin-left:.03em}

/* THE CREAM CONSOLE (23 Oct, owner's pick "mix 1"): the terminal and the
   two-tone fused. A cream field that IS the prompt - an ink ">" and a block
   cursor blinking after the placeholder - joined to a black command key that
   reads "[ sign up ]" in mint. Mono throughout: an address is data.
   The resting cursor sits at 15ch past the prompt because JetBrains Mono is
   fixed-width, so the placeholder is exactly 15ch; it hides once anything
   is typed or the field has focus (the real caret takes over, in ink). */
.hero .hero-cap{display:flex!important;flex-direction:row!important;align-items:stretch!important;gap:0!important;
  width:min(440px,100%)!important;height:48px;padding:0!important;border-radius:8px!important;overflow:hidden;
  background:#0E0D0B!important;border:1px solid rgba(234,223,200,.38)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.9)!important;transition:border-color .2s,box-shadow .2s}
.hero .hero-cap:hover{border-color:rgba(234,223,200,.6)!important}
.hero .hero-cap:focus-within{border-color:#EADFC8!important;box-shadow:0 0 0 3px rgba(234,223,200,.12),0 14px 34px -18px rgba(0,0,0,.9)!important}
.hero .hero-cap:has(.fld.err){border-color:rgba(255,150,130,.9)!important}
.hero .hero-cap .fld{position:relative;flex:1 1 auto!important;min-width:0;height:auto!important;
  display:flex!important;align-items:center;gap:0;padding:0 12px 0 14px!important;border-radius:0!important;
  background:#EADFC8!important;border:0!important;box-shadow:none!important;
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
.hero .hero-cap .fld svg{display:none!important}
.hero .hero-cap .fld::before{content:">";flex:none;margin-right:10px;color:#0A0907;font-weight:500;font-size:13px}
.hero .hero-cap .fld::after{content:"";position:absolute;top:50%;margin-top:-8px;width:7px;height:16px;background:#0A0907;
  left:calc(14px + 1ch + 10px + 15ch + 3px);font-size:13px;animation:hq-blink 1.1s steps(1) infinite;pointer-events:none}
.hero .hero-cap .fld:focus-within::after,.hero .hero-cap .fld:has(input[type=email]:not(:placeholder-shown))::after{display:none}
@keyframes hq-blink{50%{opacity:0}}
.hero .hero-cap input{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace!important;font-size:13px!important;
  color:#0A0907!important;caret-color:#0A0907;letter-spacing:0!important;padding:0!important;background:transparent!important}
.hero .hero-cap input::placeholder{color:rgba(10,9,7,.6)!important}
.hero .hero-cap .btn,.hero .hero-cap .btn-p{flex:none;width:auto!important;height:auto!important;margin:0!important;
  padding:0 18px!important;border-radius:0!important;border:0!important;
  background:#0E0D0B!important;color:#10FFA1!important;box-shadow:none!important;transform:none!important;
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace!important;font-size:13px!important;font-weight:500!important;
  letter-spacing:.03em!important;transition:background-color .15s,color .15s,text-shadow .15s!important}
.hero .hero-cap .btn-p:hover{background:#15140F!important;color:#4DFFBA!important;text-shadow:0 0 12px rgba(16,255,161,.45)}
.hero .hero-cap .btn-p:active{background:#070706!important;color:#0BD98A!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)!important}
.hero .hero-cap .btn-p:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #10FFA1!important}
@media(max-width:400px){.hero .hero-cap .btn-p{padding:0 12px!important;letter-spacing:0!important;font-size:12px!important}
  .hero .hero-cap input,.hero .hero-cap .fld::before,.hero .hero-cap .fld::after{font-size:12px!important}}
@media(max-width:360px){.hero .hero-cap .fld::after{display:none}.hero .hero-cap .fld{padding:0 8px 0 12px!important}
  .hero .hero-cap .fld::before{margin-right:8px}.hero .hero-cap .btn-p{padding:0 10px!important}}
@media(prefers-reduced-motion:reduce){.hero .hero-cap .fld::after{animation:none}}

/* the index starts below the plate */
#directory{margin-top:0!important;padding-top:clamp(96px,12vh,140px)!important}

/* THE FIXED BAR IS HIDDEN WHILE THE HERO IS ON SCREEN - the hero carries
   its own brand and menu, exactly like the reference - and arrives as the
   cream bar once the hero's foot passes (the JS threshold). */
.nav{transition:opacity .3s,transform .3s,visibility .3s,background-color .3s}
.nav:not(.stuck){opacity:0!important;visibility:hidden;transform:translateY(-10px);pointer-events:none}

@media(max-width:760px){
  .hq-bar{margin-top:14px;height:52px;column-gap:0}
  .hq-mark{width:34px;height:30px}
  h1.hq-h{font-size:min(46px,calc((100vw - 24px) / 11.7))!important;margin-top:44px!important}
  .hq-sub{font-size:16.5px;margin-top:14px;max-width:21em}
  .hq-foot{padding-top:32px;max-width:none}
  #directory{padding-top:72px!important}
}

/* two tones, to the last glyph: the monograms are OUR rendering of a
   firm's initials (not its artwork), and the sort menu's options are text
   on the black card - both take the cream like everything else on black */

/* THE FOLD (23 Oct 2026). A visitor decides in ~50ms whether a page is worth
   a scroll, and a hero that fills the screen exactly reads as the whole page.
   So the hero ends ~200px short of the fold (clamped 560-860), the index's
   head collapses to one slim row - its h2 repeated the hero's own subheading,
   so it stays for screen readers and outline and leaves the eye - and the
   top of the index card, its prompt band, lands in the FIRST screen as proof
   that the product is right there. Nothing decorative was added to do it:
   only air taken out where it was air. */
.hero{min-height:clamp(560px,calc(100svh - 200px),860px)!important}
h1.hq-h{margin-top:clamp(36px,6.5vh,92px)!important}
.hero .hq-foot{padding-top:36px!important;padding-bottom:clamp(30px,4.6vh,52px)!important}
#directory{padding-top:36px!important}
#directory .dir-head{display:flex!important;align-items:center;justify-content:space-between;gap:24px;
  margin:0 0 18px!important;padding:0!important;max-width:none!important;text-align:left!important}
#directory .dir-head .label{margin:0!important}
#directory .dir-head .dir-h2{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
#directory .dir-head .lede{margin:0!important;font-size:13.5px!important;line-height:1.4!important;max-width:none!important;
  color:var(--dim-2)!important;text-align:right}
@media(max-width:760px){
  .hero{min-height:max(560px,calc(100svh - 170px))!important}
  h1.hq-h{margin-top:30px!important}
  .hero .hq-foot{padding-top:28px!important;padding-bottom:28px!important}
  #directory{padding-top:26px!important}
  #directory .dir-head{margin-bottom:14px!important}
  #directory .dir-head .lede{display:none}
}

/* THE ECLIPSE RIM replaces the mountain still (23 Oct 2026). The card head is
   flat ink; the light is the arc and one radial bloom above its crest. The
   prompt row gets 30px more air on top so the arc's bright crest sits in
   clear space above the field instead of behind it. */
.dir-top{background:#080A0B!important}
.dir-top .ai-rim{inset:0 0 auto 0!important;height:190px!important;width:100%!important;background:none!important;object-fit:fill}
.dir-top .ai-rim-glow{background:
    radial-gradient(60% 120px at 50% -36px,rgba(16,255,161,.20),rgba(16,255,161,.06) 55%,transparent 80%),
    radial-gradient(40% 90px at 50% 0,rgba(234,223,200,.05),transparent 75%)!important}
.dir-top > .ai-bar{padding-top:50px!important}
@media(max-width:760px){.dir-top > .ai-bar{padding-top:42px!important}}

.pframe{position:fixed;left:0;top:0;width:100%;height:100%;z-index:100;pointer-events:none;display:block}
@media print{.pframe{display:none}}

/* LAPTOP READING ORDER (24 Oct): headline, then the subheading on ONE long
   line, then a quieter sign-up. The two-line subheading and a full-size
   console competed with the headline for the second read. */
@media(min-width:900px){
  .hq-sub{max-width:none!important;white-space:nowrap}
  .hero .hq-foot{padding-top:30px!important}
  .hero .hq-lede{font-size:12.5px!important;gap:9px}
  .hero .hq-live{width:6px;height:6px}
  .hero .hero-cap{width:min(392px,100%)!important;height:42px;margin-top:16px!important}
  .hero .hero-cap .fld::before,.hero .hero-cap input,.hero .hero-cap .btn-p{font-size:12px!important}
  .hero .hero-cap .fld{font-size:12px}
  .hero .hero-cap .fld::after{height:14px;margin-top:-7px;width:6px;font-size:12px}
  .hero .hero-cap .btn-p{padding:0 15px!important}
}

/* THE RHYTHM (24 Oct 2026): dark / light / dark / light / dark.
   hero (ink) -> the index (paper, the one thing people READ: positive
   polarity wins every reading study, and the advantage grows as type gets
   smaller - this table is 13.5px) -> the ink band (belt, figures, "Raise
   from investors", how-it-works: the moments that sell, where dark and
   sparse reads as expensive) -> why / provenance / fine print / FAQ (paper,
   reading again) -> early access + footer (ink). */

/* the index: a paper card with a dark head (the rim), five rows at rest */
#directory .dir{background-color:#F8F4EB!important;background-image:none!important;
  border:1px solid rgba(18,20,18,.14)!important;
  box-shadow:0 1px 2px rgba(18,20,18,.06),0 30px 70px -48px rgba(18,20,18,.45)!important}
#directory .dir::after{background:linear-gradient(90deg,transparent,rgba(18,20,18,.16),transparent)!important}
#directory .dir .tscroll{max-height:var(--five-rows,531px)!important;transition:max-height .45s cubic-bezier(.3,.7,.4,1)}
#directory .dir.tall .tscroll{max-height:min(84vh,1600px)!important}
#directory .openrow{gap:14px}
#directory #expand-index{margin-left:auto;height:32px;padding:0 14px;font-size:12.5px;border-radius:999px;
  color:#121412;border-color:rgba(18,20,18,.28);background:transparent}
#directory #expand-index:hover{background:rgba(18,20,18,.05);border-color:rgba(18,20,18,.5)}

/* the ink band */
.ink-band{position:relative;background:#0A0907;color:#EADFC8;padding:36px 0 0;margin-top:0}
.ink-band .marq{background:none!important;margin:0!important;padding:24px 0!important}
/* every mark on ONE centre line: the track and each cell centre their
   contents, so a 17px mark and a 23px mark share an axis instead of a top */
.marq-t{align-items:center!important}
.marq-t span{display:flex!important;align-items:center!important}
.ink-band .marq::before{background:linear-gradient(90deg,#0A0907 12%,rgba(10,9,7,0))!important}
.ink-band .marq::after{background:linear-gradient(270deg,#0A0907 12%,rgba(10,9,7,0))!important}
.ink-band .marq-t i{background:#EADFC8!important;opacity:.46!important}
.ink-band .qgrid{background:transparent!important;box-shadow:none!important;padding:0!important;margin:28px 0 0!important;border-radius:0!important}
.ink-band .qg-card{background:#131211!important;border-color:rgba(234,223,200,.10)!important}
.ink-band .qg-strip{background:transparent!important;border-top:1px solid rgba(234,223,200,.10);border-bottom:1px solid rgba(234,223,200,.10);border-radius:0!important}
#how{background:#0A0907!important;padding-top:40px!important}
#how::after{display:none!important}
.how-stage .step{background-color:#121110!important;border-color:rgba(234,223,200,.12)!important;
  box-shadow:inset 0 1px 0 rgba(234,223,200,.08),0 30px 60px -40px rgba(0,0,0,.9)!important}
#why{padding-top:136px}
@media(max-width:760px){
  .ink-band{padding-top:22px}
  .ink-band .qgrid{margin-top:18px!important}
  #how{padding-top:24px!important}
  #why{padding-top:96px}
  #directory .openrow{flex-direction:column;align-items:flex-start}
  #directory #expand-index{margin-left:0}
}

/* THE PROMPT ROW'S TWO CHIPS (24 Oct 2026): the AI badge grows ~15% (17 ->
   20px) and the Match button comes DOWN to that same height, so the two
   ends of the row are one weight on one centre line. Badge left, button
   right, the field between them, as before. Phone: both 26px, because a
   20px button is under any tap target. */
.ai-bar .ai-badge{display:inline-flex!important;align-items:center!important;height:20px!important;
  padding:0 9px!important;font-size:11px!important;line-height:1!important;border-radius:6px!important;letter-spacing:.06em}
.ai-bar .btn,.ai-bar .btn-p,#ai-go{height:20px!important;min-height:0!important;padding:0 11px!important;
  font-size:11px!important;font-weight:600!important;line-height:1!important;border-radius:6px!important;
  letter-spacing:.02em;box-shadow:none!important}
@media(max-width:640px){
  .ai-bar .ai-badge{height:26px!important;font-size:12px!important;padding:0 10px!important}
  .ai-bar .btn,.ai-bar .btn-p,#ai-go{height:26px!important;font-size:12px!important;padding:0 13px!important}
}

/* THE QUADRANT HOLDS ON A PHONE (24 Oct 2026). `.bento` used to stack to one
   column under 560px - four full-width slabs, four swipes. The owner wants
   the 2x2 everywhere, so the grid stays two columns and the TYPE and PADDING
   come down instead: at 375 each cell is ~167px wide, and 30px of side
   padding would leave 107px of measure. Copy was cut ~25% in the same pass,
   which is what makes the small cells readable rather than cramped. */
@media(max-width:560px){
  #why .bento{grid-template-columns:1fr 1fr!important}
  #why .cell{padding:17px 14px 19px!important}
  #why .cell .k{font-size:7.5px!important;letter-spacing:.03em!important;margin-bottom:8px!important}
  #why .cell h3{font-size:13px!important;line-height:1.18!important;margin-bottom:6px!important;letter-spacing:-.022em!important}
  #why .cell p{font-size:11.5px!important;line-height:1.45!important;margin-top:7px!important}
  #why .bento-foot div{padding:13px 14px!important}
}
@media(max-width:380px){
  #why .cell{padding:14px 11px 16px!important}
  #why .cell h3{font-size:12.2px!important}
  #why .cell p{font-size:11px!important;line-height:1.42!important}
}

/* ── THE TWO CARDS GO INK (24 Oct 2026) ────────────────────────────────
   The owner: the quadrant and "Where every record comes from" were "too
   light with all the cream". They are CARDS on the paper ground, so they
   take the same treatment the step cards and the index head already have -
   ink as punctuation on paper, not another ground change. The sections
   around them stay cream, so the page rhythm is untouched.
   Both were written by THE PAPER SYSTEM with !important throughout, so this
   block has to be later AND !important itself. */

/* the quadrant */
#why .bento{background-color:rgba(234,223,200,.16)!important;   /* the 1px gutters */
  border:1px solid rgba(18,20,18,.22)!important;
  box-shadow:0 1px 2px rgba(18,20,18,.06),0 30px 64px -40px rgba(18,20,18,.55)!important}
#why .cell{background-color:#0E0D0B!important;background-image:none!important;box-shadow:none!important}
#why .cell:hover{background-color:#141311!important}
#why .cell h3{color:#EADFC8!important}
#why .cell p{color:rgba(234,223,200,.80)!important}
#why .cell .k{color:#10FFA1!important}
#why .bento-foot{background-color:rgba(234,223,200,.16)!important;
  border:1px solid rgba(18,20,18,.22)!important;border-top:0!important;box-shadow:none!important}
#why .bento-foot div{background-color:#0E0D0B!important;background-image:none!important}
#why .bento-foot b{color:#EADFC8!important}
#why .bento-foot span{color:rgba(234,223,200,.72)!important}

/* "Where every record comes from" - the provenance ledger only. The fine
   print's ledger (#legal) is the same component and is still paper. */
#provenance .ledger{background-color:#0E0D0B!important;background-image:none!important;
  border:1px solid rgba(18,20,18,.22)!important;
  box-shadow:0 1px 2px rgba(18,20,18,.06),0 30px 64px -40px rgba(18,20,18,.55)!important}
#provenance .lg-tabs{border-bottom-color:rgba(234,223,200,.14)!important}
#provenance .lg-t{color:rgba(234,223,200,.64)!important}
#provenance .lg-t:hover{color:#EADFC8!important}
#provenance .lg-t.on{background:#EADFC8!important;color:#0A0907!important}
#provenance .lg-body dt{color:rgba(234,223,200,.68)!important}
#provenance .lg-body dd{color:#EADFC8!important}
#provenance .lg-body dd a{color:#10FFA1!important}
#provenance .lg-body dt,#provenance .lg-body dd{border-color:rgba(234,223,200,.12)!important}

/* ── THE FILTER MENUS WERE PAINTED UNDER THE ROW BELOW THEM (24 Oct 2026) ──
   Stage / Sector / Geography opened, but every item that fell over the count
   strip was unclickable and half-hidden, so the filters read as broken.

   `.dir-top > :not(.ai-vid):not(.ai-vid-scrim){z-index:2}` - added when the
   card head carried a photograph, to lift every band above the image - sets
   EVERY direct child of the head to the same z-index. That flattened
   `.dir-bar` (5) and `.dir-meta` (1) onto one level, and `.dir-meta` is
   later in the document, so it won. The menu's own `z-index:120` cannot
   help: `.dir-bar` is positioned, so it opens a stacking context and the
   120 only competes INSIDE it. That rule out-specifies `.dir-bar{z-index:5}`
   (0,3,0 against 0,1,0), which is why the base rule looked right and was not.

   So: the bar is lifted above its siblings, and the whole head above the
   table, since a long menu drops over `#tscroll` (z-index:1). */
.dir-top > .dir-bar{z-index:8!important}
#directory .dir > .dir-top{z-index:6!important}

/* the wider-region divider inside the table */
tr.geo-split > td{padding:14px 18px!important;background:rgba(18,20,18,.05);
  border-top:1px solid rgba(18,20,18,.16)!important;border-bottom:1px solid rgba(18,20,18,.10)!important}
tr.geo-split .gs-k{display:inline-block;margin-right:12px;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-size:9.5px;letter-spacing:.03em;text-transform:none;color:var(--mint);vertical-align:middle}
tr.geo-split .gs-t{font-size:12.5px;color:var(--dim-2);vertical-align:middle}
#geo-note,#q-note{color:var(--dim-2)}
@media(max-width:640px){
  tr.geo-split > td{padding:12px 14px!important}
  tr.geo-split .gs-k{display:block;margin:0 0 3px}
  tr.geo-split .gs-t{font-size:12px}
}

/* the divider's cell spans the whole 1010px table, so on a phone - where the
   table scrolls sideways - its text ran off the edge. The content is STICKY
   to the scroll container's left edge and capped at the viewport, so the
   label stays readable at any horizontal scroll position. */
tr.geo-split .gs-in{position:sticky;left:0;display:block;max-width:calc(100vw - 44px)}
@media(max-width:640px){tr.geo-split .gs-in{max-width:calc(100vw - 28px)}}

/* ── THE STAGE AND FOCUS CHIPS GO INK (24 Oct 2026) ────────────────────
   The index card is cream now, and pale chips on it carried almost no
   weight. Both columns read as solid ink chips with cream type - the same
   "ink on paper" punctuation the quadrant and the ledger use.
   Scoped to `#rows`, which is the table body: all three chip kinds (stage,
   focus and the `+N` counter) are written by render() and live only there,
   so the how-it-works diagrams keep their own styling. */
#rows .tag{background:#0E0D0B!important;border-color:#0E0D0B!important;
  color:#EADFC8!important;box-shadow:none!important}

/* ── THE SLIDES: PAINT WHERE IT MOVES, MOVE WHERE IT PAINTS (24 Oct 2026) ──
   All 32 scrubbed animations live inside the three `.vis` boxes, and they
   animate PAINT properties - background gradients, border colours, box
   shadows, text colour, SVG strokes. Without their own layer, every scrub
   frame invalidated the whole composited track: 1960 x 335 at 2x, about
   2.6 million pixels, re-rasterised with the cards' gradients and 60px
   shadows, sixty times a second. That is the chop.
   Each `.vis` is promoted to its own layer, so a scrub repaints ~566 x 124
   and the cards' paint stays cached while the track slides underneath. No
   `contain:paint` - step 3's plane flies outside its box on purpose. */
.how-stage .step .vis{will-change:transform;transform:translateZ(0)}

/* ── THE BAND BREATHES, THE SLIDES SIT CLOSER (24 Oct 2026) ──
   The owner: crunch the black by ~20%, space the boxes out a tad, bring
   the slides up under the "Raise" card. Black comes off the PADDING
   (band 36->28, belt 24->20, plate 28->22, how 40->0); air goes INTO the
   gaps (the three figure cards 12->20, strip 12->18). The slides stop
   being centred in the pin: two flex spacers split the free height 2:3,
   so the cards sit at 40% - nearer the Raise card above, still clear of
   the foot. The pin keeps its 100svh so the release still lands exactly
   on #why; only where the cards sit inside it moved. */
/* The owner: "they look stuck together". Each piece of the band gets real
   black around it - belt, the three figures, the sweep strip, the Raise
   card - and the band finally gets a FOOT, so the cream card does not butt
   straight into the slides (that gap was literally 0). */
.ink-band{padding-top:68px!important;padding-bottom:116px!important}
.ink-band .marq{padding:22px 0!important}
.ink-band .qgrid{margin-top:120px!important}
.ink-band .qg-top{gap:22px!important}
.ink-band .qg-strip{margin:88px 0!important}
#how{padding-top:0!important}
.how-pin:not(.how-flat .how-pin){display:flex;flex-direction:column}
.how-pin::before,.how-pin::after{content:"";display:block;flex:2 1 0;min-height:0}
.how-pin::before{max-height:clamp(96px,18svh,176px)}
.how-pin::after{flex:3 1 0}
.how-stage .steps{margin:0!important}
.how-flat .how-pin::before,.how-flat .how-pin::after,.rm .how-pin::before,.rm .how-pin::after{display:none}
@media(max-width:760px){
  .ink-band{padding-top:52px!important;padding-bottom:80px!important}
  .ink-band .marq{padding:18px 0!important}
  .ink-band .qgrid{margin-top:80px!important}
  .ink-band .qg-top{gap:10px!important}
  .ink-band .qg-strip{margin:60px 0!important}
}



/* ── THE CLOSE IS A LANDSCAPE (24 Oct 2026) ──────────────────────────
   The owner brought a reference - a full-bleed plate of rolling terrain lit
   by a winding ridge, headline bottom-left in a serif, copy and buttons
   bottom-right - and asked for it in black and cream, nothing else. The
   crest, the wordmark and the photograph before them are all gone; the
   ground is a GENERATED image (gen-terrain.py), so it is exactly two colours
   and it is ours. The FORM STAYS: #access is one of two captures on the
   page. The headline is Instrument Serif upright - the photo hero was the
   other place the accent face went upright, for the same reason: the
   reference is a serif headline, and the turn still gets the italic. */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.final{position:relative;background:#0A0907!important;padding:0!important;overflow:hidden;
  min-height:clamp(470px,66svh,640px);display:flex;align-items:flex-end}
.final-ground{position:absolute;inset:0;z-index:0;margin:0}
.final-ground img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
/* the phone frame is composed for ITS box, so pin it to the top: any crop
   must come off the bottom (which is black) and never off the sky above the
   ridge, which is what pushed the ridge onto the headline */
@media(max-width:760px){.final-ground img{object-position:50% 0%}}
/* a quiet scrim across the foot so the copy never meets the ridge unaided */
.final::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,7,0) 0%,rgba(10,9,7,.18) 60%,rgba(10,9,7,.34) 100%)}
.final .wrap{position:relative;z-index:1;width:100%;padding-top:0;padding-bottom:clamp(18px,2.2vh,30px)}
.final-in{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:56px;max-width:none!important;
  text-align:left!important;padding:0!important}
.final-l .label{margin:0 0 22px!important;justify-content:flex-start}
.final h2.final-h{font-family:"Instrument Serif",Georgia,serif!important;font-weight:400!important;
  font-size:clamp(46px,6.4vw,96px)!important;line-height:.96!important;letter-spacing:-.012em!important;
  color:#F3EBDA!important;margin:0!important;max-width:11em;background:none!important;
  -webkit-text-fill-color:#F3EBDA!important;text-shadow:0 2px 24px rgba(10,9,7,.55)}
.final h2.final-h .em{font-style:italic;color:#EADFC8!important;-webkit-text-fill-color:#EADFC8!important;font-size:1em}
/* the right column sits where the ridge is brightest, so it carries its own
   pool of dark behind it - the same device the hero lede and the old photo
   head used. The worst pixel under the lede measured 1.87 without it. */
.final-r{position:relative;isolation:isolate}
/* NO POOL BEHIND THE COLUMN. It was needed twice and is needed no longer:
   the ridge now sits in the top band of the frame (object-position 72% on
   desktop shows more of the black floor and lifts it) and the copy dropped
   into the space under it, so the brightest pixel under the lede is .018
   against the .163 that forced a scrim. A pool here would be a visible
   smudge over nothing. Re-measure before adding one back. */
.final-r .lede{color:#E6DBC6!important}
.final-r .lede{margin:0 0 20px!important;max-width:none!important;text-align:left!important;font-size:16px!important}
.final-r .cap{margin:0 0 10px!important;max-width:none!important}
.final-r .assure{justify-content:flex-start!important;margin:18px 0 0!important}
.final-r .trust{justify-content:flex-start!important;margin-top:16px!important}
@media(max-width:900px){.final-in{grid-template-columns:1fr;gap:34px}.final-h{max-width:none}}
@media(max-width:760px){
  /* A PHONE STACKS THE COLUMNS, so the copy is ~500px tall and at 545 there
     was no sky left above it - the headline began 46px down and the ridge
     ran straight through it (1.01). 600px gives the ridge its own band and
     is still 26% shorter than the 812 this section used to be. */
  .final{min-height:max(530px,72svh)}
  .final .wrap{padding-bottom:40px}
  .final-h{font-size:clamp(38px,10.5vw,50px)}
  /* and the copy band itself goes to near-black, so nothing below the ridge
     depends on where exactly the image crops */
  .final::after{height:84%;
    background:linear-gradient(180deg,rgba(10,9,7,0) 0%,rgba(10,9,7,.74) 26%,rgba(10,9,7,.92) 60%,rgba(10,9,7,.95) 100%)}
  /* the mono kicker is the ONE run that sits inside the ridge's band on a
     phone (2.39 against the glow). It is 10px small caps, so a scrim big
     enough to fix it would eat the ridge; it takes the page's own halo
     device instead - the same one the hero lines use over the orb. */
  .final-l .label{text-shadow:0 0 5px rgba(10,9,7,.96),0 0 13px rgba(10,9,7,.92),0 1px 2px rgba(10,9,7,1)}
}

/* ── THE BELT ALWAYS RUNS (24 Oct 2026) ──────────────────────────────
   Supersedes the earlier note that prefers-reduced-motion is allowed to
   stop it. The owner's laptop has Reduce motion on, saw a frozen belt, and
   asked that it never happen again. The global reduced-motion rule
   (`*{animation-iteration-count:1;animation-duration:.001ms}`) is what froze
   it; this restores the loop for THIS ONE ELEMENT. A slow, constant,
   transform-only drift of logos is the gentlest motion on the page, and the
   owner has decided it is part of the product rather than decoration. */
@media(prefers-reduced-motion:reduce){
  .marq-t{animation-duration:51s!important;animation-iteration-count:infinite!important;
    animation-play-state:running!important}
}

/* ── SHORTER CARDS (24 Oct 2026) ─────────────────────────────────────
   The owner: the #why quadrant and the how-it-works step cards are too
   tall ("especially the quadrant, jesus"), anywhere from 15 to 22% off.
   The copy was cut in the same pass, which is what makes the smaller
   boxes read as tight rather than cramped - shrinking padding alone
   would have left four dense blocks.
       #why cell   180 -> ~144px   (-20%)   padding 36/36/40 -> 26/28/26
       .step       335 -> ~272px   (-19%)   padding 30/32 -> 22/24, vis 124 -> 104
   The pin gets SHORTER with the step cards, so every max-height tier has
   more room than before, not less - the fit guard cannot newly trip. */
#why .cell{padding:26px 28px 26px!important}
#why .cell h3{font-size:16.5px!important;margin-bottom:8px!important}
#why .cell p{font-size:13.5px!important;line-height:1.5!important;margin-top:8px!important}
#why .cell .k{margin-bottom:7px!important}
.bento-foot{padding:9px 0!important}
.how-stage .step{padding-top:20px!important;padding-bottom:22px!important}
.how-stage .step h3{margin-bottom:8px!important}
.how-stage .step p{font-size:14px!important;line-height:1.5!important}
.how-stage .step .vis{height:140px!important;min-height:0!important}
/* EVERY MEDIA VARIANT A LATE RULE OVERRIDES MUST BE RESTATED UNDER IT, or
   phones inherit the desktop values. It bit here exactly as CLAUDE.md warns:
   the 16.5/13.5px above beat the phone tier's 13/11.5px and the quadrant
   cells went 134 -> 193px, i.e. UP, on the one device the owner complained
   about. */
@media(max-width:640px){
  #why .cell{padding:13px 14px 13px!important}
  #why .cell h3{font-size:13px!important;margin-bottom:6px!important}
  #why .cell p{font-size:11.5px!important;line-height:1.45!important;margin-top:6px!important}
  #why .cell .k{font-size:7.5px!important;margin-bottom:5px!important}
  .how-stage .step{padding-top:18px!important;padding-bottom:20px!important}
  .how-stage .step p{font-size:13px!important}
}
@media(max-width:380px){
  #why .cell{padding:11px 11px 11px!important}
  #why .cell h3{font-size:12.2px!important}
  #why .cell p{font-size:11px!important}
}

/* ── THE BLACK UNDER THE CLOSE WAS THE FOOTER'S (24 Oct 2026) ────────
   The owner: the ridge looks cut off and there is wasted black underneath.
   Both were one problem. `.foot` was given the section's own `#0A0907` when
   the crest shipped, so the boundary is invisible and the footer's 120px of
   top padding reads as the close section's own dead space. Meanwhile the
   close was short enough that `object-position:72%` put the ridge's
   brightest line at -1px: its whole upper half was off the top.
   So the space MOVES from the footer into the section: the close grows to
   clamp(470,66svh,640) and the footer's top padding drops to 44. The page
   is about the same height; the black now does a job. With the extra room
   the crop comes back to 36%, which puts the whole ridge - sky above it and
   all - inside the frame, clear of the copy. */
.foot{padding-top:44px!important}
@media(max-width:760px){.foot{padding-top:36px!important}}

/* ── THE INDEX IS NEVER HIDDEN (24 Oct 2026) ─────────────────────────
   Final state. It faded, then it faded fast, then it popped in at 500ms;
   the owner's call is that it should simply BE THERE, "ready for use and
   loaded instantly the same way the rest of the website is". So the card
   is taken out of the reveal system altogether: never opacity 0, no
   transform, no blur, no transition, no timer. It is painted with the
   first frame.
   Both the `.rv` and `.rv.in` states are written, because the base
   `.js .rv{opacity:0}` would otherwise hide it before any class lands -
   and an ID selector here outranks `.js .rv.in`, which is the bug that
   shipped a blurred card earlier today. */
.js #directory .rv,
.js #directory .rv.in{opacity:1!important;transform:none!important;
  filter:none!important;transition:none!important;transition-delay:0ms!important}

/* ── THE CARD IS CENTRED AND THE DIAGRAM IS BACK (24 Oct 2026) ────
   Two complaints, one cause each, and the first one was MY OWN FIX.

   1. "WHY IS THE GAP STILL THERE ... IT IS LIKE BIGGER, ELONGATED."
      The pass an hour earlier put `min-height:0` on the phone pin so the
      pin would hug its card. It did - black inside the pin went 478 -> 65.
      But the pin is `position:sticky` inside a runway, so SHORTENING IT
      DOES NOT SHORTEN THE RUNWAY: it just moves the emptiness outside the
      pin. Measured at 375x812, every sample from p=0 to p=0.5 of the
      runway: pin stuck at 64-398, stage foot at 820-1243, i.e. **414px of
      empty stage under the pin** for the whole swipe, with the card jammed
      at the top of the screen and 452px of nothing under it. That is worse
      than the symmetric gap it replaced, and it is exactly the bug this
      file already records for the desktop ("the bottom third was black with
      nothing arriving in it"). **A sticky pin must fill the window.** The
      `min-height:0` override is GONE; the only honest way to shrink the
      black is to make the CARD bigger, which is what 2 does.
   2. "WHY IS THE PHOTO OF THE MOVING PIECES CRUNCHED DOWN."
      The card-trim pass took `.vis` from 124px to 98 on desktop and 94 on
      a phone - the smallest the diagrams have ever been, and they are the
      thing the reader is meant to watch. 140 desktop / 190 phone now, both
      ABOVE the pre-trim 124: the phone gets the most because `order:-1`
      makes the diagram lead the card there, and because its extra height
      is what fills the pin.

   So: both spacers go `flex:1 1 0` with no cap, which CENTRES the card in
   the full-height pin the way the desktop does, and the taller diagram
   closes most of the gap by filling it with the diagram instead of air. */
@media(max-width:760px){
  .how-pin::before{max-height:none!important;flex:1 1 0!important}
  .how-pin::after{flex:1 1 0!important}
  /* `.how-pin > .wrap` is `flex:1 1 auto`, so it GREW to absorb the pin's
     spare height and held it as 123px of slack UNDER the top-aligned track -
     the spacers measured 123 each and the card still sat 123/247. Pinning
     the wrap to its content hands the whole remainder to the spacers, which
     is the only way they can centre anything. Phone-scoped: the desktop's
     2:3 ratio was tuned around this slack and reads correctly. */
  .how-pin > .wrap{flex:0 0 auto!important}
  .how-stage .step .vis{height:190px!important}
  .how-stage .step{padding-top:24px!important;padding-bottom:26px!important}
}
/* The diagram leads the card on a phone (`order:-1`), so it is the thing
   that has to shrink on a SHORT one. Both tiers keep the card comfortably
   inside the pin, so no phone newly falls into `.how-flat`. */
@media(max-width:760px) and (max-height:700px){
  .how-stage .step .vis{height:150px!important}
}
@media(max-width:760px) and (max-height:600px){
  .how-stage .step .vis{height:116px!important}
  .how-stage .step{padding-top:18px!important;padding-bottom:20px!important}
}

/* ── THE STEPS STACK, TOP TO BOTTOM (24 Oct 2026) ────────────────────
   The owner: "fix steps 1 to 3 from top to down, not left to right ...
   make their height a little shorter but only just by a little bit."

   The pin, the runway and the horizontal track are gone (see the engine).
   Everything here is UNDOING them, so it must be `!important` and last:
   `.how-pin` is sticky and a flex column with two spacer pseudo-elements,
   `.steps` is `width:max-content` with a transform, and the no-JS /
   reduced-motion / `.how-flat` rules turn `.steps` into a horizontal
   scroll-snap strip. All of those lose to this block, so every reader -
   JS, no-JS, reduced motion - now gets the same vertical column. */
.how-pin{position:static!important;display:block!important;min-height:0!important;
  padding-bottom:0!important;overflow:visible!important}
.how-pin::before,.how-pin::after{display:none!important;content:none!important}
.how-pin > .wrap{display:block!important;flex:none!important;min-height:0!important}
.how-stage{position:relative;height:auto!important}
.how-stage .steps{
  display:flex!important;flex-direction:column!important;
  width:auto!important;max-width:none!important;
  gap:16px!important;margin:0!important;
  transform:none!important;overflow:visible!important;
  scroll-snap-type:none!important}
.how-stage .step{
  flex:0 0 auto!important;width:auto!important;max-width:none!important;
  scroll-snap-align:none!important;overflow:hidden}
/* THE CARD IS THE CLIP NOW. Step 3's `.vis` is deliberately
   `overflow:visible` so the paper plane can leave the diagram box - the pin
   used to be what stopped it leaving the SECTION (`overflow-x:clip`). With
   the pin gone the plane flew out past the card's right edge and sat on the
   page as a stray green glyph. The card clips it instead, so the flight
   still escapes its diagram and still stays inside its own card. */

/* The pin used to end the black: with it gone, `#how{padding-bottom:0}`
   (set when the pinned cards were centred in a 100svh pin) left card 3's
   edge flush against the cream of `#why`, which reads as a cut. */
#how{padding-bottom:88px!important}
@media(max-width:860px){#how{padding-bottom:56px!important}}

/* SIDE BY SIDE ON A WIDE SCREEN, and that is what makes the card SHORTER
   rather than just narrower. Stacked full-width, a card is its text plus
   its diagram end to end; in two columns it is the taller of the two, so
   three of them do not turn the section into a slog ("we don't want to
   bore users"). The four children are placed explicitly, so the markup is
   untouched - `.vis` spans all three text rows and centres against them. */
@media(min-width:861px){
  .how-stage .step{
    display:grid!important;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    grid-template-rows:auto auto auto;
    column-gap:clamp(28px,4vw,56px);align-items:center}
  .how-stage .step > .no{grid-area:1/1/2/2;align-self:end}
  .how-stage .step > h3{grid-area:2/1/3/2}
  .how-stage .step > p{grid-area:3/1/4/2;align-self:start;margin-bottom:0}
  .how-stage .step > .vis{grid-area:1/2/4/3;align-self:center;margin:0!important}
  .how-stage .step .vis{height:132px!important}
}
/* A LITTLE SHORTER, as asked - not a rebuild of the proportions. The
   diagram carries the trim because it is the one box with slack inside it:
   140 -> 132 beside the text on a wide screen, 190 -> 168 above it on a
   phone, with the card padding following by 4px. The short-viewport tiers
   below the phone one keep their smaller values. */
@media(max-width:860px){
  .how-stage .step{display:flex!important;flex-direction:column!important}
  .how-stage .step > .vis{order:-1;margin:0 0 18px!important}
  .how-stage .step > .no{order:0}
  .how-stage .step .vis{height:168px!important}
}
@media(max-width:860px) and (max-height:700px){
  .how-stage .step .vis{height:142px!important}
}
@media(max-width:860px) and (max-height:600px){
  .how-stage .step .vis{height:112px!important}
}

/* ── THE FILTER MENUS MUST NOT BE CLIPPED BY THE CARD (30 Oct 2026) ──
   `.dd-m` is `position:fixed` so it can hang outside the card. That only
   works while NOTHING in its ancestry is a containing block for fixed -
   and `backdrop-filter` IS one, as are transform, filter, perspective,
   `will-change` naming any of them, and `contain:paint/layout/strict`.
   The moment one appears on `.dir` (or `.dir-top`, or `#tscroll`), the
   menu is positioned AND CLIPPED inside that element's `overflow:hidden`
   box, and the clipped part stops taking clicks - silently, with the menu
   still looking open. That is the whole bug this guard exists for. */
.dir,.dir-top,#tscroll{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* ── WHY + PROVENANCE ARE ONE INK PLATE (30 Oct 2026) ─────────────────
   The reference layout, in our two tones. Structure, top to bottom:
   mono kicker / a very large two-line headline whose turn is the serif
   `.em` / a one-line lede / a full-bleed 2-up card grid divided by
   hairlines / a diagonal-hatch band / a second heading / a 4-up row of
   ticked commitments divided by hairlines.

   NEW CLASS NAMES ON PURPOSE. `#why .cell`, `#why .bento` and
   `#provenance .ledger` carry about forty `!important` declarations
   across five earlier blocks (the paper pass, the phone quadrant, the
   ink-card pass, the card-trim pass). Reusing those hooks would have
   meant fighting every one of them; `.vz*` matches none of them, and
   those rules now match nothing and are harmless. `.ledger`'s BASE
   rules must stay - `#legal` is the same component and is still paper.

   THE PLATE JOINS THE DARK TOKEN SET, and that is load-bearing. It sits
   inside a cream section, so without this `--mint` resolves to the paper
   mint `#1F7A4D` - which is the right green on white and close to
   invisible on `#0A0907`. The `.label` star and all four ticks are
   masked `background:var(--mint)`, so they would simply have gone dark.
   Same reason `.dd-m` had to join the list when the filter menus moved
   to `<body>`.

   MINT IS STILL RATIONED. It appears exactly where it means a check
   passed: one of the four dots in card 1 (the four sweep questions), the
   strongest route bar in card 2, the section star, and the four ticks.
   The lit card's wash and the `Read more` hover are CREAM - a glow and a
   link state are decoration, and decoration does not get the brand green. */
.vz{
  --bg:#050506;--bg-2:#08080A;--surface:#0C0C0F;--surface-2:#121216;--surface-3:#18181D;
  --text:#EADFC8;--dim:#CDC2AC;--dim-2:#A69C88;--dim-3:#8C8372;
  --line:rgba(234,223,200,.15);--line-2:rgba(234,223,200,.30);
  --mint:#10FFA1;--mint-ink:#04160E;
  --vz-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12.8L8.9 18.6L21 6' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color:var(--text);
  position:relative;background:#0A0907;overflow:hidden;
}
/* two halves, one object: the gap and the seam between the sections go,
   and each half rounds only its outer end. */
.vz-a{border-radius:20px 20px 0 0}
.vz-b{border-radius:0 0 20px 20px}
#why{padding-bottom:0!important}
#provenance{padding-top:0!important}
#provenance::after{display:none!important}

.vz-head{padding:clamp(34px,4.6vw,62px) clamp(24px,3.4vw,52px) clamp(30px,3.6vw,48px)}
.vz-head .label{color:var(--dim-2)!important;margin-bottom:clamp(16px,1.8vw,24px)}
/* the paper pass sets `.label::before{background:#1F7A4D!important}` because
   the bright mint measures ~1.4:1 on cream. On this plate that star is the
   deep green on near-black and all but vanishes - `.final` already carries
   the same one-line correction for the same reason. */
.vz .label::before{background:var(--mint)!important}
.vz-h{
  font-family:var(--display);font-weight:500;font-size:clamp(27px,4.3vw,54px);
  line-height:1.05;letter-spacing:-.032em;color:var(--text);
  max-width:21ch;margin:0;
}
.vz-hs{font-size:clamp(25px,3.6vw,44px);max-width:18ch}
.vz-l{margin-top:clamp(14px,1.5vw,20px);font-size:clamp(14px,1.18vw,16.5px);
  line-height:1.56;color:var(--dim);font-weight:350;max-width:72ch}

/* the cards: full bleed inside the plate, divided by hairlines */
.vz-cards{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.vz-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(24px,3vw,42px) clamp(24px,3.4vw,52px) clamp(22px,2.6vw,34px)}
.vz-card + .vz-card{border-left:1px solid var(--line)}
/* the wash has to be z-index 0 under children that are LIFTED, not just
   placed: inside one stacking context a positioned pseudo-element paints
   above static inline text, so the copy would sit under the glow. */
.vz-lit::before{content:"";position:absolute;z-index:0;right:-14%;top:4%;
  width:80%;height:88%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(234,223,200,.09),rgba(234,223,200,0) 72%)}
.vz-card > *{position:relative;z-index:1}
.vz-g{display:block;width:clamp(32px,3.3vw,44px);color:rgba(234,223,200,.38);
  margin-bottom:clamp(30px,5vw,76px)}
.vz-g svg{display:block;width:100%;height:auto}
.vz-m{fill:var(--mint)}
.vz-card h3{font-size:clamp(18px,1.85vw,24px);font-weight:550;letter-spacing:-.028em;
  line-height:1.1;margin:0 0 10px;color:var(--text)}
.vz-card p{font-size:clamp(13px,1.08vw,15px);line-height:1.56;color:var(--dim);max-width:33ch}
.vz-more{margin-top:auto;font-size:12.5px;font-weight:500;color:var(--dim);
  border-bottom:1px solid rgba(234,223,200,.30);align-self:flex-start;
  margin-bottom:0;transition:color .2s,border-color .2s}
.vz-card p + .vz-more{margin-top:clamp(20px,2.2vw,32px)}
.vz-more:hover{color:var(--text);border-bottom-color:rgba(234,223,200,.75)}

/* the hatch band, which is also the divider between the two halves. The
   mono line sits on its own ink pad so the hatch never runs under type. */
.vz-band{border-top:1px solid var(--line);height:clamp(36px,3.8vw,52px);
  display:flex;align-items:center;overflow:hidden;
  padding:0 calc(clamp(24px,3.4vw,52px) - 13px);
  background-image:repeating-linear-gradient(135deg,
    rgba(234,223,200,.10) 0 1px,rgba(234,223,200,0) 1px 7px)}
.vz-band span{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;
  font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--dim-2);
  background:#0A0907;padding:5px 13px}

.vz-head-b{padding-top:clamp(34px,4.2vw,58px)}
.vz-ticks{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.vz-ticks li{padding:clamp(20px,2.4vw,32px) clamp(16px,1.9vw,26px) clamp(22px,2.6vw,34px)}
/* the outer two tick columns take the head's own inset, so the plate reads
   with a single left and right edge rather than four boxes floating inside
   one. The grid tracks stay `1fr` each, so only the text box of the first
   and last narrows - never the column. Scoped above the 2-up breakpoint,
   where `:last-child` is the BOTTOM-right cell and the same padding would
   read as a stray indent. */
@media(min-width:861px){
  .vz-ticks li:first-child{padding-left:clamp(24px,3.4vw,52px)}
  .vz-ticks li:last-child{padding-right:clamp(24px,3.4vw,52px)}
}
.vz-ticks li + li{border-left:1px solid var(--line)}
.vz-ticks li::before{content:"";display:block;width:17px;height:17px;
  margin-bottom:clamp(11px,1.4vw,18px);background:var(--mint);
  -webkit-mask:var(--vz-tick) center/contain no-repeat;
          mask:var(--vz-tick) center/contain no-repeat}
.vz-ticks b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.012em;
  line-height:1.22;color:var(--text);margin-bottom:7px}
.vz-ticks p{font-size:12.5px;line-height:1.5;color:var(--dim-2)}

/* ONE COLUMN OF CARDS AND A 2x2 OF TICKS, NEVER FOUR STACKED. Four
   full-width tick rows is four swipes for one picture - the same call the
   `#why` quadrant already made, and the reason it holds 2x2 at every
   width. Below 860 the cards stack and the ticks pair up. */
@media(max-width:860px){
  .vz-cards{grid-template-columns:1fr}
  .vz-card + .vz-card{border-left:0;border-top:1px solid var(--line)}
  .vz-ticks{grid-template-columns:1fr 1fr}
  .vz-ticks li + li{border-left:0}
  .vz-ticks li:nth-child(2n){border-left:1px solid var(--line)}
  .vz-ticks li:nth-child(n+3){border-top:1px solid var(--line)}
  .vz-h,.vz-hs{max-width:none}
  /* the glyph leads the card on one column, so it stays small: the air
     above the title is what makes a wide card read as deliberate, and on
     a narrow one it is just height nobody asked to scroll. */
  .vz-g{margin-bottom:20px}
}
@media(max-width:640px){
  .vz-head{padding:26px 17px 22px}
  .vz-head .label{margin-bottom:13px;font-size:9.5px;letter-spacing:.04em}
  /* the headline is the one thing on this plate that has to carry at
     arm's length, so the phone gets as much of it as the plate's own
     measure allows: at 25.5px the long line is 239 of 327px. */
  .vz-h{font-size:25.5px;line-height:1.08}
  .vz-hs{font-size:24px}
  .vz-l{margin-top:11px;font-size:13px;line-height:1.5}
  .vz-card{padding:18px 17px 19px}
  .vz-g{width:28px;margin-bottom:15px}
  .vz-card h3{font-size:16px;margin-bottom:7px}
  .vz-card p{font-size:12.5px;line-height:1.48;max-width:none}
  .vz-card p + .vz-more{margin-top:14px}
  .vz-more{font-size:11.5px}
  .vz-band{height:33px;padding:0 calc(17px - 9px)}
  .vz-band span{font-size:8px;letter-spacing:.03em;padding:4px 9px}
  .vz-ticks li:nth-child(2n){border-left-width:1px}
  .vz-head-b{padding-top:25px}
  .vz-ticks li{padding:15px 12px 17px}
  .vz-ticks li::before{width:14px;height:14px;margin-bottom:9px}
  .vz-ticks b{font-size:11.5px;margin-bottom:5px}
  .vz-ticks p{font-size:10.8px;line-height:1.42}
  .vz-a{border-radius:14px 14px 0 0}
  .vz-b{border-radius:0 0 14px 14px}
}
@media(max-width:380px){
  .vz-head{padding:22px 14px 19px}
  .vz-h{font-size:22.5px}
  .vz-hs{font-size:21px}
  .vz-card{padding:16px 14px 17px}
  .vz-card h3{font-size:15px}
  .vz-card p{font-size:12px}
  .vz-band{padding:0 calc(14px - 9px)}
  .vz-ticks li{padding:13px 10px 15px}
  .vz-ticks b{font-size:11px}
  .vz-ticks p{font-size:10.3px;line-height:1.4}
}

/* ═══ HOW IT WORKS SITS ON CREAM NOW (30 Oct 2026) ═════════════════════════
   The owner: "keep all steps 1 and 3 all black in their boxes the way it is,
   but the backgorudn is to be creame". So ONLY the ground moves. The three
   step cards keep `#121110`, their cream hairline and their lit top edge, and
   they stay in the dark token set, so every heading, step number, body line
   and all 32 scrubbed diagram animations inside `.vis` are untouched.

   The band above (`.ink-band#raise`) stays ink, so the dark chapter now ends
   at the Raise card and the slides open the paper half of the page. That also
   means the Raise-card -> slides gap no longer needs to be all black to read
   as a break: the COLOUR CHANGE is the break. The owner doubled that gap to
   116px when both sides were ink; it is 128px now, split either side of the
   boundary so neither half reads as a hole.

   `#how::after` stays suppressed for the same reason it always was - a
   boundary where the ground changes needs no line. Below `#how` the ground no
   longer changes (cream to cream), but `.vz`'s full-bleed ink plate is itself
   the boundary, so that one needs no line either; its gap comes down instead.

   The drop shadow was `0 30px 60px -40px rgba(0,0,0,.9)`, drawn for a black
   ground where it is invisible. On paper a 90% black blur reads as a grey
   smudge under the card, so it is ink-tinted and lighter.
   LAST in the sheet and `!important` throughout, because it is undoing the
   ink-band block's own `!important` run. */
#how{background:var(--bg)!important;padding-top:64px!important;padding-bottom:72px!important}
.ink-band{padding-bottom:64px!important}
#why{padding-top:96px!important}
.how-stage .step{box-shadow:inset 0 1px 0 rgba(234,223,200,.08),
  0 20px 44px -30px rgba(10,9,7,.42)!important}
@media(max-width:860px){
  #how{padding-top:44px!important;padding-bottom:48px!important}
}
@media(max-width:760px){
  .ink-band{padding-bottom:44px!important}
  #why{padding-top:64px!important}
}
/* ═══ THE PLATE BREAKS AWAY AT BOTH EDGES (30 Oct 2026, second cut) ═════
   The owner, with two crops of the reference's edges: the first cut (a row
   of cream teeth hanging off a flat edge) was rejected - "professional and
   clean like this". Read off the crops, the device is TWO things, not one:
     1. THE EDGE IS A STEPPED SKYLINE. The plate's own edge rises and falls
        in four broad steps - a low shelf, a long raised plateau, a dip, a
        shelf again - all still joined to the body.
     2. SLIVERS HAVE COME AWAY. Two thin bars float above the plateau,
        climbing to the right like the next steps of a staircase that has
        detached, and a third bleeds off the right edge.
   The same motif sits at BOTH edges, translated not mirrored (both climb
   upward in the reference), with the colours swapped: at the head it is
   plate-ink rising into the page's cream, at the foot it is page-cream
   rising into the plate's ink. One geometry, two colourings.

   `--u` IS THE ONLY DIAL. Every height is a multiple of it; every x is a
   percentage of the plate. So the staircase keeps its proportions at any
   width, and a phone simply gets a finer unit (6px) - the owner's "tiny
   pixels" - rather than a different drawing. The strip is 6u tall: 2u of
   edge at the foot, 4u of air for the slivers.

   THE STRIP BACKGROUND IS THE OTHER SURFACE. The head strip is cream (the
   page continues into the plate's box) and its shapes are ink; the foot
   strip is ink and its shapes are cream. Both are HARDCODED: inside `.vz`
   the dark token set is live, so `var(--bg)` is `#050506` here and would
   paint the cream strip black.

   THE CORNERS ARE SQUARE NOW. A 20px radius on a stepped edge clips the
   outermost step on the diagonal and leaves a notch of the wrong colour in
   the corner; the reference's plate is square at these edges, and the
   skyline IS the edge. */
.vz-a,.vz-b{border-radius:0}
.vz-brk{position:relative;height:calc(6*var(--u));--u:clamp(6px,.78vw,10px)}
.vz-brk i{position:absolute;display:block}
.vz-brk-t{background:#F1EBDF}
.vz-brk-t i{background:#0A0907}
.vz-brk-b{background:#0A0907}
.vz-brk-b i{background:#F1EBDF}
/* the edge: four steps standing on the body */
.vz-brk i:nth-child(1){left:0;width:15.5%;bottom:0;height:calc(1.5*var(--u))}
.vz-brk i:nth-child(2){left:15.5%;width:47.5%;bottom:0;height:calc(2*var(--u))}
.vz-brk i:nth-child(3){left:63%;width:16%;bottom:0;height:calc(.5*var(--u))}
.vz-brk i:nth-child(4){left:79%;width:21%;bottom:0;height:calc(1.5*var(--u))}
/* the slivers that have come away, climbing to the right */
.vz-brk i:nth-child(5){left:31.5%;width:15.5%;top:calc(1.9*var(--u));height:calc(1.1*var(--u))}
.vz-brk i:nth-child(6){left:47%;width:16%;top:calc(.2*var(--u));height:calc(1.2*var(--u))}
.vz-brk i:nth-child(7){left:95%;width:5%;top:calc(.2*var(--u));height:calc(1.2*var(--u))}
/* 4u of each strip is visually PAGE, so the section padding gives that
   back - the gap from the step cards to the visible edge, and from the
   edge down to the fine print, stay what they were. */
#why,#provenance{--u:clamp(6px,.78vw,10px)}
#why{padding-top:calc(96px - 4*var(--u))!important}
#provenance{padding-bottom:calc(104px - 4*var(--u))!important}
@media(max-width:760px){
  #why{padding-top:calc(64px - 4*var(--u))!important}
  #provenance{padding-bottom:calc(88px - 4*var(--u))!important}
}

/* the hatch band is DELETED (owner, 30 Oct) - it carried the hairline
   between the two halves, so the foot half draws it now. */
.vz-b{border-top:1px solid var(--line)}
/* THE TICK ROW IS FOUR LINES NOW. No `<p>`, so the `b` is the whole cell and
   its 7px bottom margin would be a hanging gap; the mark grows 17 -> 19px
   because with the prose gone it is what the row is read by. */
.vz-ticks li{padding:clamp(18px,2vw,26px) clamp(16px,1.9vw,26px) clamp(20px,2.2vw,30px)}
.vz-ticks li::before{width:19px;height:19px;margin-bottom:clamp(12px,1.5vw,18px)}
.vz-ticks b{font-size:13.5px;line-height:1.3;margin-bottom:0;max-width:21ch}
/* with a one-line card body, 76px of air over the title is height nobody
   asked to scroll. Scoped `min-width` so the 860 and 640 rules that already
   set 20px / 15px are untouched - a plain rule here is LATER in the sheet
   and would have beaten both of them. */
@media(min-width:861px){
  .vz-g{margin-bottom:clamp(26px,3.6vw,54px)}
  .vz-head{padding:clamp(34px,4.2vw,54px) clamp(24px,3.4vw,52px) clamp(28px,3.2vw,42px)}
  .vz-head-b{padding-top:clamp(34px,3.8vw,50px)}
}
/* EVERY PHONE VARIANT THE BLOCK ABOVE SETS HAS TO BE RESTATED HERE, or the
   plain rules above - later in the sheet at the same specificity - win on a
   phone and it takes desktop padding. This file records that trap four times
   over; it is restated rather than relied on. */
@media(max-width:640px){
  .vz-ticks li{padding:14px 12px 16px}
  .vz-ticks li::before{width:16px;height:16px;margin-bottom:9px}
  .vz-ticks b{font-size:12px;line-height:1.3;margin-bottom:0;max-width:none}
}
@media(max-width:380px){
  .vz-ticks li{padding:13px 10px 15px}
  .vz-ticks li::before{width:15px;height:15px;margin-bottom:8px}
  .vz-ticks b{font-size:11.5px}
}

/* a member's route in the drawer is a button that asks the server, styled as the link it replaces */
button.dlink{font:inherit;background:none;border:0;padding:0;color:inherit;cursor:pointer;text-align:left}

/* ═══════════════ /investors — THE INDEX AS ITS OWN PAGE (30 Oct 2026) ═══════
   The owner: the index "cant just always be on the home screen". So it has a
   page, and the landing card stays what it has been since the fold pass - a
   working five-row preview with a door to this.

   NOTHING IS REBUILT HERE. Both pages load the same records.js, the same
   app.js and the same card markup (build-pages.py lifts it out of
   index.html), so there is one index with two framings and no way for them
   to disagree. What this block changes is only what the framing demands:
   the table gets the screen instead of 531px, the card's hidden h2 becomes a
   visible h1, and the head stacks instead of sitting on one row.

   `.page-index` is on <body>, so every rule here needs that class to out-rank
   the fold block's own `#directory ...!important` run - which it does,
   (0,4,x) against (0,3,x).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Clear the fixed nav. On the landing page #directory follows the hero and
   the nav is hidden up there; here it is the first thing on the page. */
.page-index #directory{padding-top:calc(var(--nav-h,64px) + 22px)!important;
  padding-bottom:clamp(72px,9vh,112px)!important;margin-top:0!important}

/* The head stacks: label, heading, lede. The landing card runs them as one
   flex row because its heading is hidden; this one has a heading to show. */
.page-index #directory .dir-head{display:block!important;text-align:left!important;
  margin:0 0 22px!important}
.page-index #directory .dir-head .label{margin:0 0 12px!important}
/* SMALLER THAN A SECTION HEADING, ON PURPOSE. Every pixel the head takes is a
   row the reader cannot see, and this page's job is the table - so the
   heading is sized to label the page, not to sell it. */
.page-index .ix-h1{font-family:"Inter Tight",Inter,system-ui,sans-serif;
  font-weight:500;font-size:clamp(24px,2.5vw,33px);line-height:1.1;
  letter-spacing:-.032em;margin:0;max-width:24ch}
.page-index #directory .dir-head .lede.ix-lede{text-align:left!important;
  margin:9px 0 0!important;font-size:13.5px!important;line-height:1.45!important;
  max-width:58ch!important;color:var(--dim-2)!important}

/* THE TABLE GETS THE SCREEN. 531px is five rows, which is the landing page's
   bargain with the fold; here the only reason to stop is the window. The
   figure subtracted is the chrome above and below the scroller - nav, page
   head, the card's own head and its two foot rows - measured, not guessed,
   and floored so a short laptop still shows a usable run of rows. */
.page-index #directory .dir .tscroll,
.page-index #directory .dir.tall .tscroll{
  max-height:max(392px,calc(100svh - 236px))!important;transition:none!important}
/* "Expand the index" has nothing left to expand (it is hidden in the markup
   too, so this is belt and braces) */
.page-index #expand-index{display:none!important}

@media(max-width:860px){
  .page-index #directory{padding-top:calc(var(--nav-h,64px) + 20px)!important}
  .page-index .ix-h1{max-width:none}
}
@media(max-width:760px){
  /* the landing card hides its lede on a phone because the hero said it
     already; here it is the page's own description, so it stays - just
     smaller, and above the card rather than beside it */
  .page-index #directory .dir-head .lede.ix-lede{display:block!important;
    font-size:13px!important;margin-top:10px!important}
  .page-index #directory .dir-head{margin-bottom:16px!important}
  .page-index #directory .dir .tscroll,
  .page-index #directory .dir.tall .tscroll{
    max-height:max(360px,calc(100svh - 300px))!important}
}

/* ═══════════ THE CARD HEAD IS ONE BOX (2 Nov 2026) ═══════════
   The owner, on a screenshot of three stacked bands: "crunch this into 1 or
   max 2 boxes, 3 is too much". Shown both and picked ONE.
   The bands were never drawn by their backgrounds - the paper block already
   forces every child of `.dir-top` transparent over one `#080A0B` ground
   (see `.dir-top > .ai-bar,...{background:transparent!important}`), so what
   made them read as separate boxes was nothing but the `border-bottom`
   hairlines. Taking one off and closing the padding IS the change; no ground
   moved and no colour was added.
   The sweep rode here briefly as a `.sw-in` chip at the right end of the
   filter row and the owner then asked for it gone; its rules are deleted
   rather than left to rot. The claim and its limit still travel together
   lower down the page, in `.qg-strip`. */
.dir-top > .ai-bar{border-bottom:0!important;padding-bottom:11px!important}
.dir-top > .dir-bar{padding-top:0!important}
@media(max-width:760px){
  .dir-top > .ai-bar{padding-bottom:10px!important}
}

/* ═══════════ THE ORB IS GRABBABLE (2 Nov 2026) ═══════════
   The grab area, not the canvas. `#orb` is `inset:0` over the whole hero
   and stays `pointer-events:none`, so this circle is the only thing that
   takes a pointer - `border-radius:50%` means the corners pass straight
   through to the copy behind, and `size()` already keeps the sphere 36px
   clear of the hero's lowest block (28 on a phone), so the circle never
   covers anything readable.
   `pan-y`, never `none`: on a phone the sphere is a big part of the hero
   and swallowing vertical gestures would make the page feel stuck. Up and
   down scrolls; sideways spins.

   IT MUST OUTRANK `.hero > .wrap`, WHICH IS WHY z-index IS 3 AND NOT 1.
   The circle is a SIBLING of `.wrap`, and `.wrap` is `z-index:2` and
   covers the whole hero - so at 1 the circle sat UNDER the copy layer and
   `elementFromPoint` returned `DIV.wrap` at every point inside it. The
   drag was wired correctly and simply never received a pointer: a
   synthetic event dispatched at the element worked, a real cursor could
   not reach it. A hit area is only real if it is the TOPMOST element.
   Nothing visual changes - the circle has no paint, and `.hero` is
   `overflow:hidden`, so it cannot reach past the plate.
   Measured 0 hero controls inside the circle at 1440/1280/1000/820/760
   and at 393/375/320, so being on top costs the copy nothing - EXCEPT
   the phone panel, below. */
.orb-hit{
  position:absolute;border-radius:50%;z-index:3;
  touch-action:pan-y;cursor:grab;
}
.orb-hit.on{cursor:grabbing}
@media(hover:none){.orb-hit{cursor:default}}
/* THE ONE THING THAT DOES LAND ON THE SPHERE IS THE PHONE MENU. The glass
   bar's panel drops over the hero's middle: measured 5 of its links inside
   the circle at 375 and 320. So the circle hands the pointer back while
   the panel is open. `.hq-open` is set on `.hero` by the bar's own
   toggle - a class rather than `:has()`, so a browser without `:has()`
   cannot silently cost someone the menu. */
.hero.hq-open .orb-hit{pointer-events:none}