/* ==========================================================================
   Outflo — the night shift
   World, tokens, layout, type. See docs/DESIGN.md.

   Rule this file exists to enforce: everything here renders content at full
   opacity. Nothing in styles.css hides anything. All animated initial states
   live in motion.css, which only applies under html.motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — the complete palette on bare :root.
      Nothing has its only definition inside a media query.
   -------------------------------------------------------------------------- */
:root{
  /* grounds */
  --ground:#100E0C;
  --elev:#191510;
  --elev-2:#221C15;

  /* type on dark */
  --cream:#F2EDE3;
  --dim:#A79E90;          /* 7.28:1 on ground */
  --dim-2:#8A8172;        /* 5.01:1 on ground — smallest text in the system */
  --faint:#6E675C;        /* 3.45:1 — NON-TEXT ONLY: dot grids, rule accents */

  /* rules */
  --rule:#2A241C;
  --rule-strong:#3A3228;

  /* the one accent */
  --blue:#7B9BFF;         /* 7.32:1 on ground */
  --blue-deep:#1a44c8;    /* 6.65:1 on cream */
  --blue-wash:rgba(123,155,255,.10);
  --logo-accent:#7B9BFF;

  /* type on a cream (authored) surface */
  --ink:#100E0C;
  --ink-2:#5A5348;

  /* type */
  --display:'Zodiak',Georgia,'Times New Roman',serif;
  --ui:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* measure + rhythm */
  --wrap:1180px;
  --gutter:clamp(20px,5vw,40px);
  --section-y:clamp(84px,10vw,130px);

  /* motion — authored curves, no default ease anywhere */
  --ease-out:cubic-bezier(.22,1,.36,1);
}

/* --------------------------------------------------------------------------
   2. Reset + document
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

body{
  background:var(--ground);
  color:var(--cream);
  font-family:var(--ui);
  font-size:1rem;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}

::selection{background:var(--blue);color:var(--ground)}

/* Authored focus. Never outline:none.
   🔴 `summary` IS IN THIS LIST DELIBERATELY. It is focusable natively, so it
   carries no [tabindex] and matched none of the three selectors below — which
   left the eight FAQ triggers falling back to `.qa summary:focus-visible`
   (a --ground -> --elev background change, 1.06:1, i.e. invisible). A keyboard
   reader tabbing the FAQ could not see where they were. Any element that is
   focusable WITHOUT a tabindex attribute has to be named here explicitly. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:2px;
}

/* Skip link — first thing in the tab order, invisible until focused. */
.skip{
  position:absolute;left:var(--gutter);top:14px;z-index:200;
  transform:translateY(-140%);
  padding:12px 18px;background:var(--cream);color:var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .2s var(--ease-out);
}
.skip:focus{transform:translateY(0)}

/* --------------------------------------------------------------------------
   3. The grain layer — the only texture in the system.
      Fixed, non-interactive, never on scrolling content, never animated.
   -------------------------------------------------------------------------- */
.grain{
  position:fixed;inset:0;z-index:60;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* --------------------------------------------------------------------------
   5. Type scale
   -------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);
  font-size:10px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim-2);
  line-height:1;
}
.eyebrow .sep{color:var(--faint);margin-inline:.55em}

.d1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.32rem,4.05vw,3.8rem);
  line-height:.96;letter-spacing:-.035em;
}
/* 🔴 NO text-wrap:balance on .d1. The two sentences are given their own blocks
   below, which is deterministic and is the break we want anyway: the claim in
   cream, the question in blue. Balance would re-measure once the headline's
   per-character spans are in place (hero.js) and can move a break under a
   reader mid-type. Balance is still correct on .d2 and the ledes.
   The original reason — SplitText freezing line boxes — is gone with it. */
.d1 .clause{display:block}
.d1 em{display:block;font-style:italic;color:var(--blue)}

.lede{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.08rem,1.5vw,1.22rem);
  line-height:1.55;letter-spacing:-.01em;
  color:var(--dim);
  max-width:60ch;
  text-wrap:pretty;
}

.datum{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(1.5rem,2.4vw,2.2rem);
  letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;
}

.note{
  font-family:var(--mono);
  font-size:10.5px;letter-spacing:.11em;
  color:var(--dim-2);
  line-height:1.7;
}

/* --------------------------------------------------------------------------
   6. Nav — floating glass. The only backdrop-filter in the system,
      and it is on a fixed element.
   -------------------------------------------------------------------------- */
.nav{
  position:fixed;z-index:80;
  top:14px;left:0;right:0;
  padding-inline:var(--gutter);
  pointer-events:none;
}
.nav-in{
  pointer-events:auto;
  width:100%;max-width:var(--wrap);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:11px 12px 11px 18px;
  border:1px solid var(--rule);border-radius:7px;
  background:rgba(25,21,16,.72);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
}
.brand{display:flex;align-items:center;gap:0;color:var(--cream)}
/* One mark, never two. The nav carries the wordmark (which contains the flow
   tail); the footer carries the square crop of the same object. */
.brand .word{width:86px;height:auto;flex:none}
.brand-tag{
  display:none;
  padding-left:14px;margin-left:12px;
  border-left:1px solid var(--rule-strong);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim-2);
}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-links{display:none;align-items:center;gap:26px}
.nav-links a{
  font-size:.875rem;font-weight:500;color:var(--dim);
  transition:color .18s var(--ease-out);
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 22px;
  border-radius:5px;border:1px solid transparent;
  font-family:var(--ui);font-size:.9375rem;font-weight:700;
  letter-spacing:-.005em;
  cursor:pointer;
  transition:transform .15s var(--ease-out),background-color .18s var(--ease-out),
             border-color .18s var(--ease-out),color .18s var(--ease-out);
}
.btn svg{flex:none;transition:transform .22s var(--ease-out)}
.btn:active{transform:scale(.975)}

.btn-primary{background:var(--blue);color:var(--ground)}
.btn-ghost{border-color:var(--rule-strong);color:var(--cream)}
.btn-sm{padding:10px 15px;font-size:.875rem;border-radius:4px}

@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:#93AEFF}
  .btn-ghost:hover{border-color:var(--dim-2);background:var(--elev)}
  .btn:hover svg{transform:translateX(3px)}
  .nav-links a:hover{color:var(--cream)}
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex;align-items:center;
  padding-top:clamp(104px,13vh,150px);
  padding-bottom:clamp(48px,7vh,80px);
  overflow:hidden;
}

/* Depth: two radial gradients at very low alpha. No box-shadows on dark. */
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(90% 70% at 12% 4%,rgba(123,155,255,.085),transparent 62%),
    radial-gradient(70% 60% at 92% 96%,rgba(242,237,227,.045),transparent 58%);
}
.hero .wrap{position:relative;z-index:1}

.hero-grid{
  display:flex;flex-direction:column;
  gap:clamp(38px,5vw,56px);
}

.hero-say{display:flex;flex-direction:column;align-items:flex-start}
/* The h1 and lede must fill the column: with align-items:flex-start they are
   shrink-to-fit, and text-wrap:balance then balances against a width it picked
   itself — which made 1728px wrap to MORE lines than 1440px. */
.hero-say .d1,
.hero-say .lede{align-self:stretch}
.hero-say .d1{margin-top:22px}
.hero-say .lede{margin-top:24px}

.actions{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:clamp(24px,2.8vw,32px);
}

/* the one trust line — a count, not a result */
.trust{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  margin-top:22px;padding-top:18px;
  border-top:1px solid var(--rule);
  width:100%;
}
.trust b{
  font-family:var(--mono);font-weight:600;font-size:1.28rem;
  color:var(--cream);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.trust span{font-size:.875rem;color:var(--dim);line-height:1.5}
.trust .geo{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim-2);
}

/* --------------------------------------------------------------------------
   9. The authored surface — cream, because a person reads it.
      "Dark is the machine working. Cream is what a person reads."
   -------------------------------------------------------------------------- */
.sheet{
  --blue-wash:rgba(26,68,200,.11);
  background:var(--cream);
  color:var(--ink);
  border-radius:6px;
  overflow:hidden;
}

.opener{position:relative}
.opener-frame{
  padding:8px;
  border:1px solid var(--rule-strong);border-radius:9px;
  background:var(--elev);
}

.mail-head{
  display:grid;gap:5px;
  padding:16px 22px 15px;
  border-bottom:1px solid rgba(16,14,12,.13);
}
.mail-row{
  display:grid;grid-template-columns:62px 1fr;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  color:var(--ink);
  line-height:1.5;
}
.mail-row .k{
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);
}
.mail-row .withheld{color:var(--ink-2)}
.mail-row b{font-weight:600}

.mail-body{padding:22px 22px 24px}
.mail-body p{
  font-family:var(--display);font-weight:700;
  font-size:1.05rem;line-height:1.5;letter-spacing:-.005em;
  color:var(--ink);
}
.mail-body p+p{margin-top:15px}

/* the researched sentence: wash, never a border */
.mail-body .hl{
  display:inline;
  background:var(--blue-wash);
  box-shadow:0 0 0 4px var(--blue-wash);
  color:var(--blue-deep);
}

.mail-sig{
  margin-top:20px !important;
  font-family:var(--ui) !important;font-weight:500 !important;
  font-size:.875rem !important;line-height:1.5 !important;
  color:var(--ink-2) !important;
}

/* the margin annotation — the v1 conceit, kept as a device on one element */
.annot{
  display:flex;align-items:flex-start;gap:9px;
  margin:0 22px 4px;
}
.annot::before{
  content:'';flex:none;width:2px;align-self:stretch;min-height:15px;
  background:var(--blue-deep);border-radius:1px;
}
.annot span{
  /* 10px, not 9px. This line is the credibility claim the whole card exists to
     make; it was the smallest text on the page, uppercase and tracked out — the
     exact condition this system already identified as hardest to read when it
     lightened --dim-2. Contrast was fixed then and size was not. The labels
     (.k, .oc-k) stay at 9px: those are read as pattern, not as prose. */
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue-deep);line-height:1.6;
}

.opener-cap{
  display:flex;flex-direction:column;gap:3px;
  margin-top:12px;padding-inline:2px;
}
.opener-cap span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim-2);
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.foot{
  border-top:1px solid var(--rule);
  padding-block:clamp(48px,6vw,72px) clamp(32px,4vw,44px);
}
.foot-in{
  display:flex;flex-direction:column;gap:34px;
}
.foot-brand{display:flex;align-items:center;gap:13px;color:var(--cream)}
.foot-brand .mark{width:27px;height:27px;flex:none}
.foot-say{display:flex;flex-direction:column;gap:14px;max-width:52ch}
.foot-say p{font-size:.9375rem;color:var(--dim);line-height:1.6}
.foot-mail{
  font-family:var(--mono);font-size:.9375rem;color:var(--cream);
  border-bottom:1px solid var(--rule-strong);
  align-self:flex-start;padding-bottom:2px;
  transition:border-color .18s var(--ease-out);
}
.foot-meta{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  padding-top:26px;border-top:1px solid var(--rule);
}
@media (hover:hover) and (pointer:fine){
  .foot-mail:hover{border-color:var(--blue)}
}

/* --------------------------------------------------------------------------
   11. Responsive — two breakpoints that matter.

       1020px: the hero splits, and BELOW it the opener card is promoted
       directly under the headline, ahead of the lede and the buttons, so the
       proof is inside the first screen on a phone. Done with flex `order` so
       DOM order stays reading order for a screen reader.
   -------------------------------------------------------------------------- */
@media (max-width:1019px){
  .hero-say{display:contents}
  .hero-grid{gap:clamp(19px,3.4vw,27px)}
  .hero-say .d1,
  .hero-say .lede,
  .hero-say .actions,
  .hero-say .trust{margin-top:0}
  .hero-say .trust{padding-top:clamp(20px,4vw,26px)}
  /* 🔴 EVERY child needs an explicit order, not just the ones being moved.
     `.hero-say` is `display:contents` here, so its children become flex items
     of `.hero-grid` — and an unordered flex item defaults to `order:0`, which
     sorts BEFORE order:1. `.risk` and `.cta-alt` were left out of this list,
     so on every viewport under 1020px the hero opened with the guarantee and
     the email address, above the eyebrow and the headline: a promise and an
     address before the reader had been told what any of it was for.
     If a child is ever added to `.hero-say`, it gets a number here too. */
  .hero-say .eyebrow{order:1}
  .hero-say .d1{order:2;margin-top:22px}
  .hero-proof{order:3}
  .hero-say .lede{order:4}
  .hero-say .actions{order:5}
  .hero-say .risk{order:6}
  .hero-say .cta-alt{order:7}
  .hero-say .trust{order:8}
}

@media (min-width:1020px){
  .hero-grid{
    flex-direction:row;align-items:center;
    gap:clamp(48px,6vw,84px);
  }
  .hero-say{flex:1.14 1 0;min-width:0}
  .hero-proof{flex:1 1 0;min-width:0}
  .brand-tag{display:block}
  .nav-links{display:flex}
  .foot-in{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:64px}
}

@media (max-width:719px){
  .mail-head,.mail-body{padding-inline:16px}
  .mail-head{padding-block:14px 13px}
  .mail-body{padding-block:18px 20px}
  .annot{margin-inline:17px}
  .mail-row{grid-template-columns:54px 1fr;gap:8px;font-size:10.5px}
  .actions .btn{flex:1 1 auto;justify-content:center}
}

/* Long-form safety: if the viewport is very short, the hero stops trying to
   centre itself and simply flows. */
@media (max-height:640px) and (min-width:1020px){
  .hero{min-height:0;padding-block:150px 90px}
}

/* ==========================================================================
   SECTIONS 02–08
   Added 27 Aug. Same rule as everything above: nothing here hides anything.
   ========================================================================== */

/* --------------------------------------------------------------------------
   12. Section scaffold — hairline rules and margin folios, no cards.
   -------------------------------------------------------------------------- */
.section{
  position:relative;
  padding-block:var(--section-y);
  border-top:1px solid var(--rule);
}
.section--tight{padding-block:clamp(64px,7.5vw,96px)}

/* The folio is structure, not decoration: one long scrolling argument, and the
   number tells the reader how far through it they are. */
.folio{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim-2);
  margin-bottom:clamp(22px,2.6vw,30px);
}

.d2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,2.9vw,2.65rem);
  line-height:1.08;letter-spacing:-.03em;
  text-wrap:balance;
}
.d3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.12rem,1.5vw,1.3rem);
  line-height:1.25;letter-spacing:-.02em;
}

.measure{max-width:60ch}
.body{
  font-size:1.0625rem;line-height:1.62;
  color:var(--dim);
  text-wrap:pretty;
}
.body.dim{color:var(--dim-2)}
.d2+.body,.body+.body{margin-top:20px}
.d2+.body{margin-top:26px}

/* --------------------------------------------------------------------------
   13. §03 the mechanism — a numbered sequence on a single hanging rule
   -------------------------------------------------------------------------- */
.steps{
  list-style:none;
  margin-top:clamp(38px,4.4vw,54px);
  display:grid;gap:0;
}
.step{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:0 clamp(18px,2.4vw,34px);
  padding-block:clamp(26px,3vw,34px);
  border-top:1px solid var(--rule);
}
.step:last-child{border-bottom:1px solid var(--rule)}
.step-n{
  font-family:var(--mono);font-weight:600;
  font-size:.8125rem;letter-spacing:.06em;
  color:var(--dim-2);
  padding-top:.28em;
}
.step-say{min-width:0}
.step-h{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.2rem,1.75vw,1.5rem);
  line-height:1.18;letter-spacing:-.025em;
}
.step-b{
  margin-top:12px;max-width:56ch;
  font-size:1rem;line-height:1.6;color:var(--dim);
  text-wrap:pretty;
}
.step-tag{
  margin-top:15px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim-2);
}
.step-tag::before{
  content:'';display:inline-block;
  width:14px;height:1px;margin-right:9px;vertical-align:.32em;
  background:var(--rule-strong);
}

/* --------------------------------------------------------------------------
   14. The film — real poster, embed on click only. Space is reserved by
       aspect-ratio so CLS stays at zero.
   -------------------------------------------------------------------------- */
.film{
  margin-top:clamp(24px,3vw,34px);
  padding:8px;
  border:1px solid var(--rule-strong);border-radius:9px;
  background:var(--elev);
}
.film-btn,.film-frame{
  display:block;position:relative;width:100%;
  aspect-ratio:16/9;
  border-radius:4px;overflow:hidden;
  background:var(--elev-2);
  border:0;padding:0;cursor:pointer;
}
.film-btn img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .24s var(--ease-out),transform .26s var(--ease-out)}
.film-btn::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(16,14,12,.72),transparent 46%);
}
.film-play{
  position:absolute;left:clamp(14px,2vw,22px);bottom:clamp(14px,2vw,20px);z-index:2;
  display:flex;align-items:center;gap:12px;
}
.film-ico{
  width:38px;height:38px;flex:none;border-radius:50%;
  border:1px solid rgba(242,237,227,.28);
  background:rgba(16,14,12,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;place-items:center;
  transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out);
}
.film-ico::before{
  content:'';
  width:0;height:0;margin-left:3px;
  border-left:9px solid var(--cream);
  border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.film-t{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);text-align:left;
}
.film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-cap{margin-top:14px}
.film-fb{margin-top:14px}
.film-fb a{color:var(--blue);display:inline-flex;align-items:center;gap:7px;font-size:.9375rem}

@media (hover:hover) and (pointer:fine){
  .film-btn:hover img{opacity:.95;transform:scale(1.012)}
  .film-btn:hover .film-ico{background:var(--blue);border-color:var(--blue)}
  .film-btn:hover .film-ico::before{border-left-color:var(--ground)}
}

/* --------------------------------------------------------------------------
   15. §04 the openers — the one cream surface per card is the opener itself.
       "Dark is the machine working. Cream is what a person reads."
   -------------------------------------------------------------------------- */
.openers{
  margin-top:clamp(34px,4vw,48px);
  display:grid;gap:2px;
  border:1px solid var(--rule);border-radius:8px;
  overflow:hidden;
  background:var(--rule);
}
.opener-card{
  background:var(--ground);
  padding:clamp(20px,2.3vw,26px);
  display:flex;flex-direction:column;gap:18px;
}
.oc-head{
  display:flex;flex-direction:column;gap:var(--s-3);
  /* Reserved so every card's cream panel starts on the same baseline, even if
     one firm's sector line wraps. */
  min-height:3.4em;
}
.oc-co{
  font-family:var(--display);font-weight:700;
  font-size:1.14rem;letter-spacing:-.02em;color:var(--cream);
}
.oc-sector{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim-2);
  line-height:1.5;
}
.oc-sheet{padding:clamp(16px,1.9vw,21px) clamp(17px,2vw,22px)}
.oc-line{
  max-width:52ch;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1rem,1.2vw,1.075rem);
  line-height:1.46;letter-spacing:-.005em;color:var(--ink);
  text-wrap:pretty;
}
.oc-foot{display:flex;flex-direction:column;gap:13px}
.oc-src,.oc-why{font-size:.9375rem;line-height:1.55;color:var(--dim);text-wrap:pretty}
.oc-why{color:var(--dim-2)}
.oc-k{
  display:block;margin-bottom:5px;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim-2);
}
.oc-link{
  align-self:flex-start;margin-top:var(--s-1);
  /* inline, not inline-flex: the label wraps on a narrow column, and a flex
     row stranded the arrow at the far right of the first line while a long
     domain overshot its own border-bottom. text-decoration follows the wrap. */
  display:inline;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.9;
  color:var(--cream);
  text-decoration:underline;
  text-decoration-color:var(--rule-strong);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:text-decoration-color .18s var(--ease-out),color .18s var(--ease-out);
}
.oc-link svg{display:inline;vertical-align:-.18em;margin-left:.5em}
.opener-card--lead{background:var(--elev)}
@media (hover:hover) and (pointer:fine){
  .oc-link:hover{text-decoration-color:var(--blue);color:var(--blue)}
}

/* --------------------------------------------------------------------------
   16. §05 the funnel + bento
   -------------------------------------------------------------------------- */
.funnel{
  margin-top:clamp(36px,4.2vw,50px);
  border-top:1px solid var(--rule-strong);
}
.funnel-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  grid-template-areas:'lbl step num' 'note note note';
  align-items:center;gap:6px clamp(16px,2.4vw,30px);
  padding-block:clamp(17px,2vw,22px);
  border-bottom:1px solid var(--rule);
}
.funnel-lbl{
  grid-area:lbl;
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);
}
/* --------------------------------------------------------------------------
   THE BARS — what they are, and what they are NOT.

   🔴 They are a COUNTING INDICATOR, not a chart. Every bar fills to the same
   full width, in sync with its own counter. That is deliberate and it is the
   only honest way to have bars here.

   The first version scaled them to the values, log-corrected. At log scale
   5,695,465 against 127,021 renders as roughly 3:1 when the true ratio is 45:1
   — the bars undersold the very claim the section makes, and needed three lines
   of caption explaining why they did not mean what they looked like.

   Because these carry no scale, they make no comparison and need no caveat.
   The percentages and the figures carry the meaning; the bars carry the motion.
   DO NOT tie their width to the values without bringing back the caveat.

   OLD NOTE, kept for the reasoning:
   THE BARS WERE DELETED, not restyled.
   Log-scaled, 5,695,465 vs 127,021 rendered as roughly 3:1 when the true ratio
   is 45:1 — the bars undersold the exact claim the section exists to make, and
   then needed three lines of caption explaining why they did not mean what they
   looked like. A chart that requires an apology is not a chart.

   Replaced by the step ratio: each figure as a percentage of the row ABOVE it,
   which is legible at this dynamic range precisely because it is not measured
   against the maximum. 2.2% -> 20% -> 0.7% tells the narrowing honestly in
   three numbers and needs one short line of explanation instead of three. */
.funnel-step{
  grid-area:step;
  justify-self:end;
  min-width:4.6ch;text-align:right;
  font-family:var(--mono);font-weight:600;
  font-size:.9375rem;letter-spacing:-.01em;
  color:var(--dim-2);
  font-variant-numeric:tabular-nums;
}
.funnel-step--none::after{content:'\00a0'}  /* reserve the line box: row 1 has no percentage and was 4px shorter than the rest */
.funnel-num{
  grid-area:num;justify-self:end;
  /* 9.6ch is the width of "5,695,465" in this mono, so every row reserves the
     same box and the percentage column beside it cannot drift. */
  min-width:9.6ch;text-align:right;
  font-family:var(--mono);font-weight:600;
  font-size:clamp(1.15rem,2vw,1.7rem);
  letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--cream);
}
.funnel-note{
  grid-area:note;
  /* A source citation is a sentence, not a label — see .annot span. */
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim-2);
}
/* The survivor. Blue marks what got through the filter — nothing else. */
.funnel-row--last .funnel-num{color:var(--blue)}
.funnel-row--last .funnel-lbl{color:var(--cream)}
.funnel-scale{margin-top:14px;max-width:62ch}

.bento{
  margin-top:clamp(40px,4.6vw,58px);
  display:grid;gap:2px;
  grid-template-columns:1fr;
  background:var(--rule);
  border:1px solid var(--rule);border-radius:8px;overflow:hidden;
}
.cell{
  background:var(--ground);
  padding:clamp(22px,2.4vw,28px);
  display:flex;flex-direction:column;gap:8px;
  min-height:150px;
}
.cell-n{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(1.5rem,2.4vw,2.05rem);
  letter-spacing:-.035em;line-height:1;
  color:var(--cream);font-variant-numeric:tabular-nums;
}

.cell-l{font-size:.9375rem;line-height:1.5;color:var(--dim);margin-top:2px}
.cell-s{
  margin-top:var(--s-6);
  /* A source citation is a sentence, not a label — see .annot span. */
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim-2);
}
.bento-cap{margin-top:16px;max-width:64ch}

/* --------------------------------------------------------------------------
   17. §06 fit — the refusal above the columns, undecorated
   -------------------------------------------------------------------------- */
.refusal{
  max-width:44ch;
  padding-left:clamp(18px,2.4vw,26px);
  border-left:2px solid var(--rule-strong);
}
.refusal p{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.6rem,2.9vw,2.5rem);
  line-height:1.06;letter-spacing:-.035em;
  color:var(--cream);
  text-wrap:balance;
}
.refusal cite{
  display:block;margin-top:16px;
  font-style:normal;font-size:.9375rem;line-height:1.55;color:var(--dim);
}

.cols{
  margin-top:clamp(46px,5.4vw,68px);
  display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,56px);
}
.col-h{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);
  padding-bottom:14px;border-bottom:1px solid var(--rule-strong);
}
.col-h--no{color:var(--dim-2)}
.col-list{list-style:none;margin-top:4px}
.col-list li{
  display:grid;grid-template-columns:20px 1fr;gap:12px;
  padding-block:15px;
  border-bottom:1px solid var(--rule);
  font-size:1rem;line-height:1.55;color:var(--dim);
  text-wrap:pretty;
}
.col-list li::before{
  content:'';width:11px;height:11px;margin-top:.42em;
  border-radius:50%;
}
.fit-y::before{background:var(--dim-2)}
.fit-n::before{border:1px solid var(--rule-strong);background:transparent}
.fit-n{color:var(--dim-2)}

/* --------------------------------------------------------------------------
   18. §07 questions — native <details>, so it works with no script at all
   -------------------------------------------------------------------------- */
.faq{
  margin-top:clamp(34px,4vw,48px);
  border-top:1px solid var(--rule-strong);
}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;gap:0 clamp(14px,1.8vw,22px);
  padding-block:clamp(19px,2.2vw,24px);
  cursor:pointer;
  list-style:none;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.06rem,1.5vw,1.24rem);
  line-height:1.3;letter-spacing:-.02em;
  color:var(--cream);
  transition:color .18s var(--ease-out);
}
.qa summary::-webkit-details-marker{display:none}
/* The heading promises eight, so the eight are numbered. Same mono register as
   the section folios, so the page has one numbering system rather than two. */
.qa-n{
  font-family:var(--mono);font-weight:400;
  font-size:11px;letter-spacing:.1em;
  color:var(--dim-2);
  font-variant-numeric:tabular-nums;
  padding-top:.55em;
}
.qa[open] .qa-n{color:var(--cream)}
.qa-a{padding-left:calc(11px + 2.4ch + clamp(14px,1.8vw,22px))}
.qa-chev{
  position:relative;flex:none;
  width:13px;height:13px;margin-top:.34em;
}
.qa-chev::before,.qa-chev::after{
  content:'';position:absolute;top:6px;left:0;
  width:13px;height:1.5px;border-radius:1px;
  background:var(--dim);
  transition:transform .26s var(--ease-out),background-color .18s var(--ease-out);
}
.qa-chev::after{transform:rotate(90deg)}
.qa[open] .qa-chev::after{transform:rotate(0deg)}
.qa[open] .qa-chev::before,.qa[open] .qa-chev::after{background:var(--dim)}
.qa-a{padding-bottom:clamp(20px,2.4vw,26px)}
.qa-a p{
  max-width:64ch;
  font-size:1rem;line-height:1.62;color:var(--dim);
  text-wrap:pretty;
}
@media (hover:hover) and (pointer:fine){
  .qa summary:hover{color:var(--cream)}
}

/* --------------------------------------------------------------------------
   19. §08 the closer
   -------------------------------------------------------------------------- */
.closer{position:relative;overflow:hidden}
.closer::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(80% 100% at 8% 100%,rgba(123,155,255,.10),transparent 62%),
    radial-gradient(60% 80% at 96% 0%,rgba(242,237,227,.035),transparent 60%);
}
.closer .wrap{position:relative;z-index:1}
.closer .lede{margin-top:26px}
.closer .body{margin-top:20px}
.closer .actions{margin-top:clamp(30px,3.4vw,40px)}
.btn-lg{padding:17px 28px;font-size:1rem}
.closer-sig{
  margin-top:clamp(34px,4vw,46px);
  font-family:var(--display);font-weight:700;
  font-size:1.24rem;letter-spacing:-.02em;color:var(--dim);
}
.closer-sig::before{
  content:'';display:block;
  width:34px;height:1px;margin-bottom:16px;
  background:var(--rule-strong);
}

.foot-meta a{color:var(--dim);border-bottom:1px solid var(--rule-strong);padding-bottom:1px}
@media (hover:hover) and (pointer:fine){
  .foot-meta a:hover{color:var(--cream);border-color:var(--dim-2)}
}

/* --------------------------------------------------------------------------
   20. Responsive for 02–08
   -------------------------------------------------------------------------- */
@media (min-width:700px) and (max-width:899px){
  /* Between 700 and 900px the horizontal row layout has too little room for the
     label column, so a note wraps and that row grows taller than the rest. The
     stacked layout holds until there is room for all four columns. */
  .funnel-row{
    grid-template-columns:auto 1fr;
    grid-template-areas:'lbl lbl' 'step num' 'note note';
    align-items:baseline;
    gap:9px 16px;
  }
  .funnel-step{justify-self:start}
}
@media (min-width:900px){
  .funnel-row{
    grid-template-columns:minmax(0,1fr) minmax(90px,230px) auto auto;
    grid-template-areas:'lbl step num' 'note step num';
    align-items:center;
    column-gap:clamp(18px,2.4vw,34px);
  }
  .funnel-note{align-self:start}
  .bento{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1020px){
  .cols{grid-template-columns:1fr 1fr;gap:clamp(40px,4.6vw,72px)}
  /* TWO columns, not three. Three left an empty cell (one lead + two cards),
     which read as a large void beside the last card. */
  .openers{grid-template-columns:repeat(2,1fr)}
  .opener-card--lead{grid-column:span 2}
  .opener-card--lead .oc-line{font-size:clamp(1.16rem,1.7vw,1.42rem);max-width:44ch}
  .opener-card--lead .oc-foot{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7) var(--s-10);align-items:start}
  .opener-card--lead .oc-link{grid-column:1 / -1}
  .bento{grid-template-columns:repeat(2,1fr)}
  .step{grid-template-columns:80px 1fr}
}
@media (max-width:699px){
  .step{grid-template-columns:1fr;gap:10px}
  .step-n{padding-top:0}
  .funnel-num{font-size:1.35rem}
}

/* Nav gains weight once the reader has left the hero. Purely additive — the
   base state is the floating bar, and sequence.js only ever adds this class. */
.nav-in--stuck{
  background:rgba(16,14,12,.82);
  border-color:var(--rule-strong);
}

/* ==========================================================================
   21. POLISH PASS — 27 Aug
   ========================================================================== */

/* --- The refusals are NOT set quieter than the positives -------------------
   docs/DESIGN.md: "Refusals are never softened, decorated or moved." Rendering
   them one step down the greyscale from the "this fits" column is softening
   by another route. Only the marker distinguishes the two columns now. */
.fit-n{color:var(--dim)}

/* --- The logarithmic-scale note needs air and a full measure --------------- */
.funnel-scale{
  margin-top:20px;
  max-width:none;
  padding-top:16px;
  border-top:1px solid var(--rule);
}

/* --- Hanging folio margin -------------------------------------------------
   DESIGN.md -> Structure specifies the section number in the LEFT MARGIN. It
   was sitting above the heading, which left two-thirds of the width dead at
   1440px and made the void read as an accident rather than as structure. */
@media (min-width:1020px){
  .section > .wrap{
    display:grid;
    grid-template-columns:130px minmax(0,1fr);
    column-gap:clamp(26px,3.2vw,54px);
    align-items:start;
  }
  .section > .wrap > .folio{
    grid-column:1;grid-row:1;
    margin-bottom:0;
    padding-top:.6em;
    text-align:left;
  }
  .section > .wrap > *:not(.folio){grid-column:2}

  /* §03 becomes a three-column ledger: number | argument | evidence. The tag
     hangs right, which uses the width and stops each step from trailing off
     into empty space. */
  .step{
    grid-template-columns:52px minmax(0,1fr) minmax(150px,210px);
    grid-template-areas:'n say tag';
    align-items:start;
    column-gap:clamp(20px,2.6vw,40px);
  }
  .step-n{grid-area:n}
  .step-say{grid-area:say}
  .step-tag{
    grid-area:tag;
    margin-top:.5em;
    text-align:right;
  }
  .step-tag::before{display:none}
}

/* --- The closer's CTA row and signature share the width ------------------- */
@media (min-width:1020px){
  .closer .lede,.closer .body{max-width:58ch}
}

/* --- Selection and long-word safety -------------------------------------- */
.oc-src,.oc-why,.qa-a p,.body{overflow-wrap:break-word}

/* --- The nav collapses its links before they crowd the CTA ---------------- */
@media (max-width:1140px) and (min-width:1020px){
  .nav-links{gap:18px}
  .nav-links a{font-size:.8125rem}
  .brand-tag{display:none}
}

/* --- Folio sets as a real margin folio: number, then label ---------------- */
.folio b{font-weight:400;color:var(--dim)}
.folio span{display:inline}
.folio b::after{content:' — '}
@media (min-width:1020px){
  .section > .wrap{grid-template-columns:124px minmax(0,1fr)}
  .folio b{display:block;margin-bottom:7px;font-size:11px;color:var(--cream)}
  .folio b::after{content:none}
  .folio span{display:block;letter-spacing:.18em;line-height:1.5}
}

/* --- §03: the evidence note hangs right of the argument. It lives inside
       .step-say, so it is right-aligned in flow rather than placed as a grid
       item — the grid-area it used to declare had no matching item. ---------- */
@media (min-width:1020px){
  .step{grid-template-columns:52px minmax(0,1fr);grid-template-areas:none}
  .step-n,.step-say{grid-area:auto}
  .step-b{max-width:58ch}
  .step-tag{margin-top:14px;text-align:right}
}

/* --- Funnel on narrow screens ---------------------------------------------
   The three-column row crushed the label into "IN / THE / ICP / BAND". Below
   700px the label takes its own full-width line and the track sits beside the
   number, which is the pairing that actually needs to be adjacent. */
@media (max-width:699px){
  .funnel-row{
    grid-template-columns:auto 1fr;
    grid-template-areas:'lbl lbl' 'step num' 'note note';
    align-items:baseline;
    gap:9px 16px;
  }
  .funnel-lbl{grid-area:lbl;color:var(--cream)}
  .funnel-step{grid-area:step;justify-self:start}
  .funnel-num{grid-area:num;justify-self:end}
  .funnel-note{grid-area:note}
}

/* --- Anchor jumps must clear the fixed nav --------------------------------
   The nav is ~62px plus its 14px offset. Without this, jumping to #numbers
   parks the section folio underneath the bar. */
.hero,.section{scroll-margin-top:96px}

/* ==========================================================================
   22. MICROINTERACTIONS — 27 Aug
   Audited with Dan Saffer's four-part structure (trigger / rules / feedback /
   loops). Score before this pass: 6/10. Rows that failed:

     - "Does feedback match the event's significance?"  Everything got the same
       180ms colour change: a nav link and the single conversion action on the
       page were equally loud.
     - "Does the trigger show its current state?"  Nav links changed colour
       only; the FAQ's clickable area is the full row but only the text
       responded, so the hit target was invisible.
     - "Is there immediate feedback?"  The opener cards ARE the objects in §04
       and had no card-level response at all.
     - The brand mark had no hover state of any kind.

   ONE PRINCIPLE DECIDED HERE, because it governs everything below:

     Interactive things get AFFORDANCE feedback — lift, colour, travel, cursor.
     Non-interactive things get AWARENESS feedback only — the pointer spotlight,
     no lift, no cursor change, no colour-as-action.

   A bento cell that lifts like a button is a false affordance, and Saffer is
   explicit that those cost more than they give. But an object that knows where
   your cursor is does not claim to be clickable — it just stops feeling like a
   screenshot. That is the distinction the whole pass rests on.

   Everything here sits behind @media (hover:hover) and (pointer:fine).
   ========================================================================== */

/* --------------------------------------------------------------------------
   The pointer spotlight — awareness, not affordance.
   pointer.js writes --mx/--my in px on the hovered element. The blob is moved
   with `transform` only, never background-position, so it composites and never
   repaints the card's gradient.
   -------------------------------------------------------------------------- */
.spot{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
  border-radius:inherit;
  opacity:0;
  transition:opacity .2s var(--ease-out);

  /* 🔴 THE FADE IS A FIXED DISTANCE, NOT A PERCENTAGE.
     A radial mask was tried first and did nothing horizontally: on a 1050x82px
     funnel row, 130% of the width is a ~1365px radius, so at the left edge the
     mask is still fully opaque and `overflow:hidden` still cut the blob off
     square — landing a hard vertical edge at exactly the x where the label
     begins. A linear gradient in px fades over the same distance whatever the
     element's width, which is the whole point.

     Vertically there is deliberately no fade: the blob is 440px tall in an 82px
     row, so it fills the row completely and the clip coincides with the row's
     own hairline rules — which reads as the row being lit, not as a cut. */
  --spot-fade:110px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--spot-fade),#000 calc(100% - var(--spot-fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--spot-fade),#000 calc(100% - var(--spot-fade)),transparent 100%);
}
/* Funnel rows run the full content column and their label starts hard against
   the left edge, so they need the longest run-up. They are also short and
   full-bleed, which makes the same blob read far stronger than it does on a
   card, hence the damping. */
.funnel-row .spot{--spot-fade:clamp(120px,18vw,260px)}
.funnel-row .spot-blob{opacity:.78}  /* the fade already keeps it off the label, so the blob itself does not need damping twice */
/* Cards carry their own padding, so the glow already starts inside a gutter. */
.opener-card .spot,.cell .spot,.opener-frame .spot{--spot-fade:80px}
.spot-blob{
  position:absolute;left:0;top:0;
  width:440px;height:440px;
  margin:-220px 0 0 -220px;
  border-radius:50%;
  background:radial-gradient(circle closest-side,rgba(123,155,255,.17),rgba(123,155,255,.05) 45%,transparent 72%);
  /* transform is written DIRECTLY on this element by pointer.js — never via a
     custom property on the parent card, which would invalidate style for all
     ~10 of its descendants on every pointermove. will-change is set on enter
     and cleared on leave, never parked in CSS. */
}
/* Content must sit above the blob. */
.opener-card > *:not(.spot),
.cell > *:not(.spot),
.opener-frame > *:not(.spot),
.funnel-row > *:not(.spot){position:relative;z-index:1}

.opener-card,.cell,.opener-frame,.funnel-row{position:relative}

@media (hover:hover) and (pointer:fine){
  .opener-card:hover > .spot,
  .cell:hover > .spot,
  .opener-frame:hover > .spot,
  .funnel-row:hover > .spot{opacity:1}
}

/* --------------------------------------------------------------------------
   §04 opener cards — these ARE the objects, so they get affordance feedback:
   the whole card is the thing you act on, and its link is inside it.
   -------------------------------------------------------------------------- */
.opener-card{
  transition:transform .2s var(--ease-out),background-color .2s var(--ease-out);
}
.opener-card .sheet{
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .opener-card:hover{transform:translate3d(0,-3px,0);background:var(--elev)}
  .opener-card--lead:hover{background:var(--elev-2)}
  /* The cream panel lifts a touch further than its card — the authored surface
     comes forward, which is the world's rule made kinetic. */
  .opener-card:hover .sheet{transform:translate3d(0,-3px,0)}
  .opener-card:hover .oc-link{text-decoration-color:var(--dim-2)}
}

/* --------------------------------------------------------------------------
   Nav links — a colour change alone does not show a STATE. A rule that grows
   from the left does, and it also marks the section you are currently in.
   -------------------------------------------------------------------------- */
.nav-links a{position:relative;padding-bottom:3px}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--blue);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .3s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover::after{transform:scaleX(1)}
}
/* Set by pointer.js from the section in view. Feedback about WHERE YOU ARE,
   which is the one thing an 11,600px page owes the reader. */
.nav-links a[aria-current='true']{color:var(--cream)}
.nav-links a[aria-current='true']::after{transform:scaleX(1);background:var(--dim-2)}

/* --------------------------------------------------------------------------
   Read progress — honest, deterministic, never a fake bar.
   -------------------------------------------------------------------------- */
.nav-in{overflow:hidden}
.nav-prog{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue));
  transform:scaleX(var(--p,0));transform-origin:left center;
  opacity:.9;pointer-events:none;
}

/* --------------------------------------------------------------------------
   Buttons — feedback SCALED to significance.

   .btn-primary is the single conversion action on the page and is the one
   signature moment: a sheen crosses it, the arrow travels, the fill lifts. The
   ghost button beside it gets a quarter of that. A nav-sized button gets less
   again. Same family, three volumes.
   -------------------------------------------------------------------------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn > *{position:relative;z-index:1}
.btn-primary::before{
  content:'';position:absolute;z-index:0;
  top:-60%;bottom:-60%;left:-40%;width:36%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-260%) skewX(-18deg);
  transition:transform .48s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover::before{transform:translateX(560%) skewX(-18deg)}
  .btn-primary:hover{background:#9CB6FF}
  .btn-primary:hover svg{transform:translateX(4px)}
  .btn-ghost:hover svg{transform:translateX(2px)}
}
/* Press is the same on all three: the action is confirmed, not celebrated. */
.btn:active{transform:scale(.975)}
/* Honest loading is not needed — every action here is a mailto or an anchor,
   both of which the browser confirms itself. No fake spinners. */

/* --------------------------------------------------------------------------
   FAQ — the trigger is the full row, so the full row must respond. It was
   text-colour only, which made a 700px-wide hit target invisible.
   -------------------------------------------------------------------------- */
.qa summary{
  padding-inline:14px;
  margin-inline:-14px;
  border-radius:5px;
  transition:color .2s var(--ease-out),background-color .22s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .qa summary:hover{background:var(--elev)}
}
.qa summary:focus-visible{background:var(--elev)}
/* The chevron rotates rather than snapping between + and −. */
.qa-chev::before,.qa-chev::after{transition:transform .3s var(--ease-out),background-color .2s var(--ease-out)}

/* --------------------------------------------------------------------------
   Outbound proof links — these leave the site, and the trigger should say so.
   The plain arrow read as "next"; a corner arrow reads as "opens elsewhere".
   -------------------------------------------------------------------------- */
.oc-link svg,.opener-cap a svg{transition:transform .26s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .oc-link:hover svg{transform:translate3d(2px,-2px,0)}
}
.opener-cap a{
  color:var(--dim);
  border-bottom:1px solid var(--rule-strong);
  transition:color .18s var(--ease-out),border-color .18s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .opener-cap a:hover{color:var(--blue);border-color:var(--blue)}
}

/* --------------------------------------------------------------------------
   The brand — it had no state at all. On hover the flow tail re-draws: the
   page's own signature moment, replayed on demand. pointer.js does the class
   toggle; this only declares that the mark is a live object.
   -------------------------------------------------------------------------- */
.brand{border-radius:4px;transition:opacity .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .brand:hover{opacity:.92}
}
.foot-brand .mark{transition:transform .24s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .foot-brand:hover .mark{transform:rotate(-6deg) scale(1.06)}
}

/* --------------------------------------------------------------------------
   Reduced motion: every transform and transition above is decoration. All of
   it goes. Colour-only state changes stay, because those are information.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .spot{display:none}
  .opener-card,.opener-card .sheet,.btn,.btn svg,.foot-brand .mark,
  .nav-links a::after,.nav-prog,.qa-chev::before,.qa-chev::after,
  .film-btn img,.film-ico,.oc-link svg,.opener-cap a svg,.skip{
    transition:none !important;
    transform:none !important;
  }
  .btn-primary::before{display:none}
  .nav-links a[aria-current='true']::after{transform:scaleX(1) !important}
}

/* ==========================================================================
   23. THE FIELD + THE SIGN-OFF — 27 Aug
   ========================================================================== */

/* --------------------------------------------------------------------------
   The particle field — its own stage, not a background.

   It was first built as an absolute layer behind the section's text: invisible
   where it mattered and a legibility risk where it did not. It is now a block
   between the lede and the funnel, which is what reference/videos.html specced
   — the collapse is the visual, so it gets to be seen.

   The block keeps its height whether or not the canvas ever arrives, so a
   failed WebGL init leaves an empty well with a caption, not a jump.
   -------------------------------------------------------------------------- */
.field{
  position:relative;
  /* No height and no margin until field.js confirms it can actually draw.
     A visitor with no WebGL2 gets no empty box, because there is no box. The
     height is set by .field--live, which field.js adds only after the shader
     has compiled and linked. */
  margin-top:0;
  height:0;
  border:0;border-radius:8px;
  background:
    radial-gradient(70% 100% at 50% 108%,rgba(123,155,255,.09),transparent 68%),
    var(--elev);
  overflow:hidden;
}
/* A quiet dot grid, so the well reads as a considered surface even with no
   canvas on top of it. */
.field::before{
  content:'';position:absolute;inset:0;
  opacity:.4;
  background-image:radial-gradient(circle,var(--faint) .6px,transparent .6px);
  background-size:11px 11px;
  -webkit-mask-image:radial-gradient(76% 120% at 50% 112%,#000 18%,transparent 74%);
  mask-image:radial-gradient(76% 120% at 50% 112%,#000 18%,transparent 74%);
}
.field-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  opacity:0;
  transition:opacity 1.2s var(--ease-out);
  -webkit-mask-image:radial-gradient(78% 86% at 50% 48%,#000 46%,transparent 88%);
  mask-image:radial-gradient(78% 86% at 50% 48%,#000 46%,transparent 88%);
}
.field--live{
  margin-top:clamp(30px,3.6vw,44px);
  height:clamp(260px,34vw,420px);
  border:1px solid var(--rule);
}
.field--live .field-canvas{opacity:1}
/* The caption was cut: it stated 5,695,465 for the third time in one section.
   Kept as a rule in case a labelled variant is ever wanted. */
.field-cap{
  position:absolute;left:clamp(16px,2vw,22px);bottom:clamp(14px,1.8vw,18px);z-index:2;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim-2);
}
.field-cap span{color:var(--dim);font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   The sign-off. Replaces a lone "Temur" with the person the email comes from.
   Space is reserved by aspect-ratio, so CLS stays at zero.
   -------------------------------------------------------------------------- */
.signoff{
  margin-top:clamp(38px,4.4vw,54px);
  padding-top:clamp(26px,3vw,34px);
  border-top:1px solid var(--rule);
  display:flex;align-items:center;gap:clamp(18px,2.4vw,28px);
}
.signoff picture,.signoff img{display:block;flex:none}
.signoff img{
  width:clamp(112px,15vw,152px);
  height:auto;aspect-ratio:618/754;
  object-fit:cover;object-position:50% 30%;
  border-radius:5px;
  /* The photo is already on a near-black ground, so it sits in the world with
     no treatment. A hairline keeps it from bleeding into the page. */
  border:1px solid var(--rule-strong);
  filter:saturate(.92) contrast(1.02);
}
.signoff figcaption{min-width:0}
.signoff-name{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.3rem,1.9vw,1.62rem);
  letter-spacing:-.025em;color:var(--cream);
}
.signoff-role{
  margin-top:9px;max-width:40ch;
  font-size:.9375rem;line-height:1.55;color:var(--dim);
}
@media (min-width:1020px){
  .signoff img{width:196px}
}

/* ==========================================================================
   24. TYPOGRAPHY PASS — 27 Aug
   Measured in the browser against Jason Santa Maria's diagnostic. Score before
   this pass: 7/10. The two rows that genuinely failed:

   1. "Is body text 16px or larger?"  FAIL — seven elements a reader actually
      READS sat at 14-15px: the §04 source and why-it-is-not-a-template prose
      (15px, and that prose IS the argument of the section), the bento labels,
      the sign-off role line, the footer prose, and the hero's proof line at
      14px. The audience is agency and recruitment-firm owners reading cold on
      a laptop mid-working-day; 15px is a designer's size, not a reader's.

   2. "Is line length under 75 characters?"  FAIL — the two Martian Mono notes
      ran to a 126ch container. Mono is the worst face to overrun a measure
      with: every character is the same width, so word silhouettes carry no
      information and the return sweep has nothing to aim at.

   Rows that already passed: 164 KB font payload (under 200), fallbacks on all
   three stacks, no overflow or clipping at 200% zoom, distinct link styling,
   line-height 1.5+ on every prose block, clear four-level hierarchy.
   -------------------------------------------------------------------------- */

/* --- 1. Nothing a person reads is under 16px ------------------------------ */
.oc-src,.oc-why{font-size:1rem;line-height:1.6}
.signoff-role{font-size:1rem;line-height:1.6}
.foot-say p{font-size:1rem}
.cell-l{font-size:1rem;line-height:1.5}
/* The 3em reservation keeps two side-by-side cells on a shared baseline when one
   label wraps. Stacked, there is no neighbour to align to and it is just a 24px
   void under a one-line label, which is most visible on a phone. */
@media (min-width:721px){ .cell-l{min-height:3em} }
.trust span{font-size:1rem;line-height:1.5}
.col-list li{font-size:1.0625rem}
.qa-a p{font-size:1.0625rem}

/* The one deliberate exception: the signature inside the email mock. A real
   mail client renders a signature small, and making it 16px would make the
   mock less convincing, which is the only thing that panel is for. It is two
   words, not reading text. */
.mail-sig{font-size:.9375rem !important}

/* --- 2. Mono notes get a measure ----------------------------------------- */
.note{max-width:72ch}
.film-cap,.funnel-scale,.bento-cap{max-width:72ch}

/* --- 3. Orphan control on the headings that lacked it -------------------- */
.step-h,.signoff-name,.oc-co{text-wrap:balance}
.qa summary > span:first-child{text-wrap:pretty}

/* --- 4. Display leading: 1.08 is tight for a three-line heading ---------- */
.d2{line-height:1.1}

/* --- 5. Mono figures align in a column ----------------------------------- */
.funnel-num,.cell-n,.trust b,.datum{font-variant-numeric:tabular-nums lining-nums}

/* --- 6. Zodiak is a high-contrast serif: its hairlines thin out on a dark
       ground far more than on white, because light-on-dark bleeds. A touch of
       weight back into the smaller Zodiak sizes keeps the joins from breaking
       up without changing the face. ------------------------------------------ */
.oc-line,.mail-body p,.lede{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ==========================================================================
   25. REFACTORING UI PASS — 27 Aug
   Scored 8/10 against Wathan & Schoger's diagnostic, using the two tests the
   book actually prescribes rather than an opinion:

   PASSED
   - Blur test: headline dominates, cream proof panel second, lede third,
     buttons fourth. The hierarchy survives blur(4px).
   - Grayscale test: the primary/secondary button distinction is carried by
     FILL vs OUTLINE, not by the blue, so it survives grayscale(1). Colour is
     not doing hierarchy's job anywhere.
   - White space, de-emphasised labels, constrained measure, contrast.

   FAILED — the two fixed below
   1. "Does spacing follow a consistent scale?"  29 distinct off-scale px
      values across 82 uses (5, 7, 9, 11, 13, 15, 17, 19, 22, 26, 30, 34, 38,
      44, 46, 54...). Hand-tuned one at a time, which is exactly the habit the
      book names as breeding inconsistency.
   2. "Are shadows appropriate for elevation?"  There are deliberately no
      box-shadows — on a near-black ground they read as smudges, and DESIGN.md
      commits to tone steps plus hairlines instead. But the book's own
      no-shadow alternative is "lighter TOP border + darker BOTTOM border",
      which is the strongest depth device on dark and was not being used at all.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The spacing scale. 4px base with two sub-steps (2, 6) because hairline
      gaps between a mono label and its rule genuinely need them, and one
      56 step. Everything new uses these; the fold-critical clamp() values on
      the hero are left alone and marked, because they were tuned against a
      measured 100dvh fit and re-rounding them would move the CTA below the
      fold to buy consistency nobody can see.
   -------------------------------------------------------------------------- */
:root{
  --s-1:2px;  --s-2:4px;  --s-3:6px;  --s-4:8px;  --s-5:12px;
  --s-6:16px; --s-7:20px; --s-8:24px; --s-9:32px; --s-10:40px;
  --s-11:48px;--s-12:56px;--s-13:64px;--s-14:80px;--s-15:96px;
}

/* --------------------------------------------------------------------------
   2. Depth without shadows — a 1px lighter edge along the top of every raised
      surface and a darker one along the bottom. This is how a physical object
      catches light from above, and on a dark ground it does what a shadow does
      on a light one. `inset` box-shadow is used rather than a border so it
      costs no layout and cannot alter the box model.
   -------------------------------------------------------------------------- */
.opener-frame,
.opener-card--lead,
.film,
.field,
.nav-in,
.qa summary:hover,
.cell{
  box-shadow:
    inset 0 1px 0 rgba(242,237,227,.055),
    inset 0 -1px 0 rgba(0,0,0,.34);
}
/* The cream panel catches the same light, from the other direction — a warm
   highlight along its top edge and a soft contact shadow underneath, so it
   reads as a sheet laid ON the dark card rather than a hole cut in it. */
.sheet{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 1px 0 rgba(0,0,0,.5),
    0 14px 34px -18px rgba(0,0,0,.75);
}
/* The primary action is the one element allowed to sit above the page. */
.btn-primary{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 1px 2px rgba(0,0,0,.4),
    0 10px 22px -12px rgba(123,155,255,.5);
}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.42),
      0 2px 4px rgba(0,0,0,.4),
      0 16px 34px -14px rgba(123,155,255,.62);
  }
}
.btn-primary:active{box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}

/* --------------------------------------------------------------------------
   3. The hero's one proof number was blurring into nothing.

      In the blur test "179" — the only figure in the hero and the only piece
      of evidence above the fold — was the weakest element on the screen. It
      supports the headline; it should not be quieter than the caption under a
      photo. Size and weight up, one step, no colour change (blue still means
      only "survived a filter").
   -------------------------------------------------------------------------- */
.trust{
  align-items:flex-start;
  gap:var(--s-2) var(--s-6);
}
.trust b{
  font-size:1.75rem;
  line-height:.95;
  letter-spacing:-.04em;
}
.trust span:not(.geo){padding-top:.32em}
.trust .geo{width:100%;padding-top:var(--s-1)}

/* --------------------------------------------------------------------------
   4. Group spacing must exceed spacing within groups. The bento cells and the
      opener cards sat on a 2px grid gutter, which read as one continuous slab
      rather than as separate objects. A 1px rule with real padding inside each
      cell does the grouping the book asks for.
   -------------------------------------------------------------------------- */
.bento,.openers{gap:1px}

/* --------------------------------------------------------------------------
   5. Section rhythm: more space above a heading than below it. The folio sat
      the same distance from the section rule as the heading sat from the
      folio, so the three read as an evenly-spaced stack instead of a titled
      block.
   -------------------------------------------------------------------------- */
.section{padding-block:var(--section-y)}
.d2+.body{margin-top:var(--s-8)}
.body+.body{margin-top:var(--s-7)}

/* ==========================================================================
   26. CRO PASS — 27 Aug
   Findings acted on, in the order the framework ranks them:

   - CTA COPY. "Send three companies" is the reader's EFFORT; "Get three
     openers, free" is their REWARD. The nav already used the reward framing
     and the hero used the effort framing, so the weaker of the two was on the
     larger button. Both now lead with the reward and the ask is microcopy.

   - FRICTION. The single conversion action is a mailto, which does nothing at
     all — no error, no fallback — on a machine with no mail client configured.
     That is a silent dead end at the exact moment of conversion. The address is
     now always visible as text beside the button, and copyable in one click.

   - CTA REPETITION. There were ~9,000px of mobile scroll between the hero's
     CTA and the closer's with nothing in between. Two were added at the real
     decision points: after §04 (peak persuasion — they have just read three
     openers they can go and check) and after §06 (they have just self-qualified
     against the two lists).

   Not changed, because they are locked product decisions rather than CRO
   findings: no form, no booking tool, no pricing, no borrowed social proof.
   ========================================================================== */

.cta-alt{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-4);
  margin-top:var(--s-6);
}
.cta-alt > span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim-2);
}
.cta-copy{
  position:relative;
  cursor:pointer;
  font-family:var(--mono);font-size:.9375rem;
  color:var(--dim);
  border-bottom:1px dashed var(--rule-strong);
  padding-bottom:2px;
  transition:color .18s var(--ease-out),border-color .18s var(--ease-out);
}
.cta-copy-b{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);
  opacity:0;
  transition:opacity .2s var(--ease-out);
}
.cta-copy.is-copied .cta-copy-a{opacity:0}
.cta-copy.is-copied .cta-copy-b{opacity:1}
.cta-copy-a{transition:opacity .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .cta-copy:hover{color:var(--cream);border-color:var(--dim-2)}
}

/* --------------------------------------------------------------------------
   The two mid-page CTAs. Deliberately quieter than the hero's and the
   closer's — they are a door held open at a decision point, not a second
   pitch. Sized and spaced so they read as part of the section they close, not
   as an interruption dropped into it.
   -------------------------------------------------------------------------- */
.inline-cta{
  margin-top:clamp(34px,4vw,var(--s-11));
  padding-top:clamp(26px,3vw,var(--s-9));
  border-top:1px solid var(--rule);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-6);
}
.inline-cta--tight{margin-top:clamp(30px,3.4vw,var(--s-10))}
.inline-cta-say{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.14rem,1.6vw,1.4rem);
  line-height:1.3;letter-spacing:-.022em;
  color:var(--cream);
  max-width:36ch;text-wrap:balance;
}
.inline-cta-note{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim-2);
  max-width:60ch;line-height:1.7;
}
@media (min-width:760px){
  .inline-cta{
    flex-direction:row;align-items:center;
    flex-wrap:wrap;gap:var(--s-7) var(--s-9);
  }
  .inline-cta-say{flex:1 1 22ch;margin:0}
  .inline-cta-note{flex:1 1 100%}
}

/* ==========================================================================
   27. UX HEURISTICS PASS — 27 Aug
   Heuristic evaluation (Krug + Nielsen). Score before this pass: 7/10.
   Three issues found by keyboard/screen-reader audit, not by looking:

   SEVERITY 3 — Nielsen #3, user control and freedom.
     Click-to-play called btn.replaceWith(frame), which removed the FOCUSED
     element from the document. Focus fell to <body>, so a keyboard reader who
     pressed Enter on the play button lost their position in a 12,800px page.
     Fixed in reveal.js: the frame takes tabindex="-1" and receives focus.

   SEVERITY 3 — Nielsen #1, visibility of system status.
     The copy button's "Copied" swap is aria-hidden (correctly — it is a visual
     affordance). But there was nothing else, so a screen-reader user pressed it
     and got silence, with no way to know whether it worked. Fixed in reveal.js
     with a polite live region, including a distinct message on failure.

   SEVERITY 2 — tiny tap targets.
     Ten interactive elements measured under 44px tall on a 390px viewport, the
     worst at 13px: the outbound proof links, the copy button, the footer mail
     link and the brand. Fixed below, scoped to pointer:coarse so desktop
     layout is untouched.

   Rows that already passed: heading order with no level skips, one <main>, all
   images with alt text, no unnamed buttons or links, every decorative layer
   (grain, WebGL canvas, 12 injected spotlights) aria-hidden, lang="en-GB",
   skip link first in the tab order, "you are here" via aria-current, native
   details/summary for the FAQ so it needs no script at all.
   ========================================================================== */

/* Screen-reader-only, for the copy confirmation. Not display:none — that
   removes it from the accessibility tree and it would never be announced. */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   44px minimum touch targets. Scoped to coarse pointers so the desktop
   rhythm — where these are 13-27px by design and hit with a mouse — does not
   change at all.
   -------------------------------------------------------------------------- */
@media (pointer:coarse){
  .brand,
  .cta-copy,
  .oc-link,
  .foot-mail,
  .opener-cap a,
  .foot-meta a,
  .nav-links a{
    min-height:44px;
    display:inline-flex;align-items:center;
  }
  /* These two are inline in a caption line; padding rather than min-height so
     they do not push their own line box open twice. */
  .opener-cap a,.foot-meta a{padding-block:var(--s-5)}
  .skip{padding-block:var(--s-6)}   /* 44px+ — first thing in the tab order */
}

/* ==========================================================================
   28. CRO PASS 2 — 27 Aug (skill invoked directly)
   One finding dominated: **the strongest promise in the offer was at 91% down.**

   "I don't invoice until it has booked you a meeting" is a pay-on-results
   guarantee — rare in this category, and the only part of the offer a
   competitor cannot copy by sending a free sample. It appeared first in FAQ #8
   at 91% of the page and again in the closer at 96%. Anyone who bounced before
   the FAQ never saw it. Meanwhile the free trial appeared eight times, and a
   free sample is table stakes. The differentiator was hiding behind the
   commodity. It now sits directly under the hero CTA.

   Also: a 5,088px CTA-free stretch on mobile covered the film — peak intent,
   nothing to click. And the film had 30 words supporting the single most
   persuasive asset on the page, with no claim about what was in the 90 seconds,
   so no reason to spend them.

   NOT changed: "free" appears 8 times, but 5 are the same button label
   repeated, which is correct — one action, one label. Varying it would imply
   different actions.
   ========================================================================== */

.risk{
  margin-top:var(--s-6);
  max-width:46ch;
  font-size:1rem;line-height:1.5;
  color:var(--dim);
  text-wrap:pretty;
}
.risk b{
  font-weight:400;
  color:var(--cream);
  /* The clause is the promise. It gets the accent's underline treatment rather
     than the accent itself, because blue is reserved for "survived a filter". */
  border-bottom:1px solid var(--rule-strong);
  padding-bottom:1px;
}
.cta-alt{margin-top:var(--s-5)}

.film-say{margin-top:var(--s-6);max-width:56ch}
.film-cap{margin-top:var(--s-5)}

/* --------------------------------------------------------------------------
   Short-viewport hero. Adding the pay-on-results line pushed the proof count
   below the fold at 1440x800 — a real laptop size. Both earn their place above
   the fold (one is the offer's differentiator, the other is the only evidence
   in the hero), so neither is cut; the hero's internal spacing gives way
   instead. Scoped by height so the common 900px+ case is untouched.
   -------------------------------------------------------------------------- */
@media (min-width:1020px) and (max-height:880px){
  .hero{padding-top:clamp(96px,11vh,132px);padding-bottom:var(--s-9)}
  .hero-say .d1{margin-top:var(--s-6)}
  .hero-say .lede{margin-top:var(--s-7)}
  .actions{margin-top:var(--s-7)}
  .risk{margin-top:var(--s-5)}
  .cta-alt{margin-top:var(--s-4)}
  .trust{margin-top:var(--s-5);padding-top:var(--s-5)}
}
@media (min-width:1020px) and (max-height:800px){
  .hero{padding-top:clamp(88px,10vh,116px)}
  .hero-say .lede{margin-top:var(--s-6)}
  .trust{margin-top:var(--s-4);padding-top:var(--s-4)}
}

/* --------------------------------------------------------------------------
   The film poster was at opacity .82 under a gradient — murky. That footage is
   the n8n canvas with its nodes named and in order (Get Lead → Fetch their
   Website → Read the Page → Write Icebreaker → Save), which IS the mechanism,
   legible, for free. Hiding it behind a scrim to make a play button pop was
   trading the asset for the affordance. The overlay now only darkens the bottom
   strip the play label sits on.
   -------------------------------------------------------------------------- */
.film-btn img{opacity:.97}
.film-btn::after{
  background:linear-gradient(to top,rgba(16,14,12,.86) 0%,rgba(16,14,12,.45) 16%,transparent 38%);
}
@media (hover:hover) and (pointer:fine){
  .film-btn:hover img{opacity:1;transform:scale(1.008)}
}
/* The film is an interstitial, so its folio carries a rule instead of a number.
   The number sequence stays 02-08 and is not renumbered around it. */
.folio b{font-variant-numeric:tabular-nums}
.film-say{color:var(--dim)}
/* The film is an interstitial with no number, so its folio has no <b> to set. */
.folio--plain span{display:block}

/* --------------------------------------------------------------------------
   §04 non-lead cards: the "check it against …" link is the section's action,
   and it was landing at a different height in each card because one firm's
   source note runs longer. Pushed to the bottom of the card so both sit on one
   baseline, which also uses the shorter card's trailing space instead of
   leaving it as a void.
   -------------------------------------------------------------------------- */
@media (min-width:1020px){
  .opener-card:not(.opener-card--lead) .oc-foot{flex:1;display:flex;flex-direction:column}
  .opener-card:not(.opener-card--lead) .oc-link{margin-top:auto;padding-top:var(--s-6)}
}

/* --------------------------------------------------------------------------
   The email is an EXCERPT, and says so.

   The card shows the opening of a real six-paragraph email. Running the first
   three paragraphs straight into the signature implied that WAS the whole
   email — a short, oddly abrupt one — which misrepresents the thing the panel
   exists to show. The marker names what is missing rather than just trailing
   off, because "two more paragraphs, what it does and the ask" is itself
   information: it tells the reader the pitch is not in the part they can see.
   -------------------------------------------------------------------------- */
.mail-cut{
  display:flex;align-items:baseline;gap:10px;
  margin-top:16px !important;
  padding-top:14px;
  border-top:1px dashed rgba(16,14,12,.16);
}
.mail-cut-mark{
  /* A baseline ellipsis, not the midline U+22EF, which mono renders raised and
     tiny enough to read as a stray apostrophe. */
  font-family:var(--mono);font-size:15px;line-height:1;
  color:var(--ink-2);
  letter-spacing:.08em;
}
.mail-cut-say{
  font-family:var(--mono) !important;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);
  line-height:1.6;
}

/* --------------------------------------------------------------------------
   The mobile jump row and back-to-top.

   Below 1020px the three nav anchors were `display:none`, which left a phone
   with no navigation at all on a page that is ten screens tall. The row below
   restores them in the page's own mono register rather than behind a drawer:
   a drawer is a second interaction to reach a link, and this page has four
   destinations, not twenty.
   -------------------------------------------------------------------------- */
.nav-jump{display:none}
@media (max-width:1019px){
  .nav-in{flex-wrap:wrap;row-gap:2px;padding-top:8px;padding-bottom:2px}
  /* The nav carries a second row below 1020px, so the hero has to clear a
     taller fixed header. Without this the eyebrow sat exactly on the nav's
     bottom edge — measured gap: 0px. */
  .hero{padding-top:clamp(132px,17vh,168px)}
  .hero,.section{scroll-margin-top:118px}
  .nav-jump{
    display:flex;flex:1 0 100%;
    gap:clamp(16px,5vw,26px);
    padding-top:2px;
    border-top:1px solid var(--rule);
  }
  .nav-jump a{
    font-family:var(--mono);font-size:10px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--dim-2);
    transition:color .18s var(--ease-out);
    /* 44px of tappable height on a 10px line, without the row opening the
       fixed nav by 44px: the hit area is centred on the text and the nav's
       own padding is tightened below to pay for what is left. */
    display:inline-flex;align-items:center;min-height:34px;
  }
  .nav-jump a[aria-current='true']{color:var(--cream)}
}
@media (hover:hover) and (pointer:fine){
  .nav-jump a:hover{color:var(--cream)}
}

/* Back-to-top. In the markup unconditionally, so with no JS it is just a link
   that always works. pointer.js adds `.totop-managed` to <html> and only then
   is it hidden until the reader is genuinely deep in the page. */
.totop{
  position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);
  z-index:40;
  width:46px;height:46px;
  display:grid;place-items:center;
  color:var(--dim);
  background:rgba(25,21,16,.86);
  border:1px solid var(--rule-strong);border-radius:50%;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out),
             opacity .24s var(--ease-out),transform .24s var(--ease-out);
}
html.totop-managed .totop{
  opacity:0;transform:translateY(8px) scale(.94);pointer-events:none;
}
html.totop-managed .totop.is-on{
  opacity:1;transform:none;pointer-events:auto;
}
@media (hover:hover) and (pointer:fine){
  .totop:hover{color:var(--cream);border-color:var(--dim-2)}
}
.totop:active{transform:scale(.975)}
@media (pointer:coarse){ .totop{width:48px;height:48px} }

/* The jump row's remaining 10px of tap height, taken as an invisible overlay
   rather than as layout — the row is inside a fixed nav and every pixel of its
   height is charged to the reader's viewport on every screen. */
@media (max-width:1019px) and (pointer:coarse){
  .nav-jump a{position:relative}
  .nav-jump a::before{
    content:'';position:absolute;left:-7px;right:-7px;
    top:50%;height:44px;transform:translateY(-50%);
  }
}
@media (prefers-reduced-motion:reduce){
  .totop{transition:none}
  html.totop-managed .totop{transform:none}
}