/* =========================================================
   INBOX ACCESS · landing page
   Aesthetic: forensic dossier / editorial investigation
   Ink-black evidence sections + warm paper sections
   Red = failure (Rot)  ·  Blue = system / proof (Blau)
   ========================================================= */

:root {
  /* --- surfaces --- */
  --ink:        #0A0B0D;
  --ink-2:      #121418;
  --ink-3:      #1B1E24;
  --paper:      #F2EEE5;
  --paper-2:    #E7E1D4;
  --paper-ink:  #16171A;

  /* --- accents --- */
  --red:        #FF3B21;
  --red-dim:    #C22A15;
  --blue:       #5B8CFF;
  --blue-dim:   #2E5BD1;
  /* white on #FF3B21 is only 3.6:1, under AA for button labels. The buttons
     use this slightly deeper red instead and clear 4.8:1 */
  --red-btn:    #D92D16;

  /* --- text --- */
  --fg:         #F2EEE5;
  --fg-mute:    #A6ACB6;
  --fg-faint:   #868D97;
  --rule:       #262A31;
  --rule-paper: #C3BAA6;
  /* --rule is a hairline for dividers and sits at 1.4:1, which is fine for
     decoration and far too weak for anything you have to aim at. Interactive
     outlines (inputs, ghost buttons) use this instead and clear 3:1 */
  --field-line: #5A616D;

  /* --- type --- */
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body:    "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- metrics --- */
  --gut:    clamp(20px, 5vw, 64px);
  --max:    1240px;
  --narrow: 780px;
}

/* ---------------- reset-ish ---------------- */
* { box-sizing: border-box; }
/* an explicit display: flex/grid otherwise beats the hidden attribute */
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* reserves the scrollbar track so the page doesn't jump sideways when the
     modal locks scrolling */
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.68;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

/* film grain */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 999;
  opacity: .2; mix-blend-mode: overlay;
  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='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------------- layout primitives ---------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: var(--narrow); }
section { position: relative; }
.band       { padding-block: clamp(72px, 11vw, 148px); }
.band--tight { padding-block: clamp(54px, 7vw, 96px); }

/* the light bands. Every muted tone is re-declared darker here: the same grey
   that reads as calm on ink turns into unreadable grey-on-white on paper.
   Measured against #F2EEE5 -> mute 8.0:1, faint 5.4:1 */
.paper {
  background: var(--paper);
  color: var(--paper-ink);
  --fg: var(--paper-ink);
  --fg-mute: #4A473F;
  --fg-faint: #65604F;
  --rule: var(--rule-paper);
  /* the bright red only manages 3.1:1 on paper, and it carries small mono
     labels (§ numbers, module counters, FAQ markers). The dim red does 5:1.
     Same story for blue: it labels "What works instead" and "What you get out
     of it" at 9px, where 2.7:1 is simply not readable */
  --red:  var(--red-dim);
  --blue: var(--blue-dim);
}

/* ---------------- type scale ---------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-faint);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 28px; line-height: 1.6;
}
.eyebrow::after { content: ""; flex: 1 1 40px; height: 1px; background: var(--rule); }
.eyebrow b { color: var(--red); font-weight: 500; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; }
h1 {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.02; letter-spacing: -.034em;
  overflow-wrap: break-word;
}
h2 {
  font-size: clamp(1.95rem, 4.4vw, 3.4rem);
  line-height: 1.1; letter-spacing: -.028em;
}
h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.28; letter-spacing: -.018em;
}

/* highlighted second beat of a headline */
.hl { color: var(--fg-faint); }
.paper .hl { color: #7C7768; }

.lede {
  font-size: clamp(1.08rem, 1.6vw, 1.26rem);
  line-height: 1.62; color: var(--fg-mute); max-width: 62ch;
}
.lede strong { color: var(--fg); font-weight: 600; }
.lede + .lede { margin-top: 18px; }

.small { font-size: .95rem; line-height: 1.6; color: var(--fg-mute); }

/* aside for visitors who arrived from a reply to their own cold email */
.note {
  margin: 28px 0 0; padding: 15px 18px;
  border-left: 2px solid var(--blue);
  background: rgba(91,140,255,.07);
  font-size: .93rem; line-height: 1.6; color: var(--fg-mute);
}

/* short inline chip. nowrap keeps it from breaking mid-word; anything long
   enough to wrap must use .ph--block instead, or it blows out its column */
.ph {
  font-family: var(--mono); font-size: .8em;
  color: var(--blue); background: rgba(91,140,255,.11);
  border: 1px dashed rgba(91,140,255,.5);
  padding: 1px 6px; border-radius: 3px;
  white-space: nowrap;
}
/* multi-line placeholder copy: one calm block instead of a stack of chips */
.ph--block {
  display: block; white-space: normal; overflow-wrap: break-word;
  padding: 13px 15px; font-size: .78rem; line-height: 1.65;
  letter-spacing: .01em;
}
.paper .ph { color: var(--blue-dim); background: rgba(46,91,209,.08); border-color: rgba(46,91,209,.4); }

.red  { color: var(--red); }
.blue { color: var(--blue); }
.paper .blue { color: var(--blue-dim); }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--red-btn); color: #fff;
  border: 0; border-radius: 2px;
  padding: 19px 32px;
  font-family: var(--body); font-weight: 700; font-size: 1rem;
  letter-spacing: -.01em; text-decoration: none;
  cursor: pointer; position: relative;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -12px rgba(255,59,33,.75); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .arw { transition: transform .22s cubic-bezier(.2,.8,.3,1); }
.btn:hover .arw { transform: translateX(5px); }

.btn--ghost {
  background: transparent; color: var(--fg);
  border: 1px solid var(--field-line); box-shadow: none;
}
.btn--ghost:hover { border-color: var(--fg); box-shadow: none; }

.cta-note {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-faint); margin-top: 20px; line-height: 1.9;
}
.cta-note span { color: var(--fg-mute); }

/* ---------------- nav ---------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10,11,13,.84);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; }
.brand {
  display: flex; align-items: baseline; gap: 9px;
  font-family: var(--display); font-weight: 700;
  letter-spacing: -.01em; font-size: 1.02rem; text-decoration: none;
  padding-block: 10px; /* 44px tap target */
}
.brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); display: inline-block;
  box-shadow: 0 0 12px var(--red); animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.brand small {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  color: var(--fg-faint); text-transform: uppercase;
}
.nav__links { display: flex; gap: 30px; align-items: center; }
.nav__links a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-mute);
  text-decoration: none; transition: color .16s;
  /* 11px mono renders an 18px-tall hit area, under the 24px floor. The nav bar
     has a fixed height and centres its children, so padding grows the target
     without moving anything. Same trick as .foot__links a and .brand */
  padding-block: 13px;
}
.nav__links a:hover { color: var(--fg); }
.nav .btn { padding: 12px 22px; font-size: .88rem; }
@media (max-width: 900px) { .nav__links a { display: none; } }
@media (max-width: 700px) { .brand small { display: none; } }

/* ---------------- hero ---------------- */
.hero { padding-block: clamp(36px, 4.4vw, 66px) clamp(56px, 7vw, 92px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90ch 50ch at 82% -8%, rgba(255,59,33,.15), transparent 62%),
    radial-gradient(70ch 46ch at 6% 108%, rgba(91,140,255,.1), transparent 66%);
}
.hero__grid {
  position: relative;
  display: grid; grid-template-columns: 1.18fr .82fr;
  gap: clamp(30px, 4vw, 60px); align-items: center;
}
/* grid items default to min-width:auto and refuse to shrink below their
   content, which pushed the whole hero wider than its container */
.hero__grid > * { min-width: 0; }
@media (max-width: 1020px) { .hero__grid { grid-template-columns: 1fr; } }
.hero .lede { margin-top: 26px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero .cta-note { margin-top: 14px; }

/* hero benefit bullets: one line each, the reader's future state,
   never the seller's story */
.hbul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 15px; }
.hbul li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.hbul li::before {
  content: "→"; color: var(--blue); font-family: var(--mono);
  font-size: .95rem; line-height: 1.45;
}
/* any text node belongs in column 2, or auto-placement drops the second
   one into the narrow marker column on the next row */
.hbul b, .hbul span { grid-column: 2; }
.hbul b {
  display: block; font-weight: 700; font-size: 1.14rem;
  letter-spacing: -.02em; line-height: 1.36;
}
@media (max-width: 480px) { .hbul b { font-size: 1.04rem; } }

/* Small phones. Measured at 360x640 the primary CTA ended at 619px, which
   only clears a 640px viewport because a test harness has no URL bar. A real
   browser takes another 60 to 100px off the top, so the button lands under
   the fold on the exact devices where the sticky dock has not appeared yet.
   Tightening the vertical rhythm buys back ~50px and keeps all four bullets,
   which is the better trade: the bullets are the argument. */
@media (max-width: 420px) {
  .hero          { padding-block: 22px clamp(40px, 7vw, 56px); }
  .hero .eyebrow { margin-bottom: 17px; }
  .hbul          { margin-top: 19px; gap: 11px; }
  .hero__cta     { margin-top: 23px; gap: 10px; }
  .hero .cta-note { margin-top: 12px; line-height: 1.75; }
}

/* strike runs through every wrapped line, not the gap between them */
.strike {
  color: var(--fg-faint);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat; background-position: 0 55%; background-size: 0% 6px;
  animation: strike .8s cubic-bezier(.65,0,.35,1) 1.1s forwards;
}
@keyframes strike { to { background-size: 100% 6px; } }

/* staggered entrance */
.rise { opacity: 0; transform: translateY(22px); animation: rise .8s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.d1 { animation-delay: .06s } .d2 { animation-delay: .16s }
.d3 { animation-delay: .28s } .d4 { animation-delay: .42s }

/* ---------------- fake mail client ---------------- */
.mailbox {
  background: var(--ink-2); border: 1px solid var(--rule);
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 44px 90px -40px rgba(0,0,0,.95);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.mailbox:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(0); }
@media (max-width: 1020px) { .mailbox, .mailbox:hover { transform: none; } }
.mailbox__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 16px; border-bottom: 1px solid var(--rule); background: var(--ink-3);
}
.mailbox__bar i { width: 10px; height: 10px; border-radius: 50%; background: #3A3F47; display: block; }
.mailbox__bar span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--fg-faint); margin-left: 10px; text-transform: uppercase;
}
.mailrow {
  display: grid; grid-template-columns: 20px 1fr auto;
  gap: 14px; align-items: center;
  padding: 15px 18px; border-bottom: 1px solid var(--rule); font-size: .9rem;
}
.mailrow > div { min-width: 0; } /* lets the nowrap subject ellipsis instead of widening the row */
.mailrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); }
.mailrow b { display: block; font-weight: 600; font-size: .86rem; }
.mailrow p { margin: 3px 0 0; color: var(--fg-faint); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mailrow time { font-family: var(--mono); font-size: 10px; color: var(--fg-faint); }
/* the ignored pitches: faint, struck, no stamp so the one reply stands out.
   .5 pushed the struck text under 2:1 and the joke stopped being readable */
.mailrow--dead { opacity: .66; }
.mailrow--dead b, .mailrow--dead p { color: var(--fg-faint); text-decoration: line-through; }

/* the one that got a reply */
.mailrow--live {
  position: relative;
  background: linear-gradient(90deg, rgba(91,140,255,.13), rgba(91,140,255,.03));
  box-shadow: inset 2px 0 0 var(--blue);
}
.mailrow--live .mailrow__dot { background: var(--blue); box-shadow: 0 0 12px var(--blue); }
.mailrow--live b { color: var(--fg); }
.mailrow--live p { color: var(--fg-mute); }
.mailrow--live::after {
  content: "REPLIED"; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%) rotate(-7deg);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; color: var(--blue);
  border: 2px solid var(--blue); padding: 4px 9px; border-radius: 3px;
  opacity: 0; animation: stamp .45s cubic-bezier(.34,1.56,.64,1) 1.5s forwards;
}
@keyframes stamp {
  from { opacity: 0; transform: translateY(-50%) rotate(-7deg) scale(1.9); }
  to   { opacity: 1; transform: translateY(-50%) rotate(-7deg) scale(1); }
}
.mailrow--live time { visibility: hidden; }
.mailbox__foot {
  padding: 15px 18px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; color: var(--fg-faint); text-transform: uppercase; line-height: 1.9;
}

/* ---------------- trust strip, directly under the fold ----------------
   A light shelf, not a dark one. As --ink-2 on --ink it was two near-blacks
   stacked and the band disappeared into the hero. Light gives a hard cut
   under the fold, and the logos render as their own artwork instead of
   needing an invert hack. --paper-2 is a shade deeper than the § 01 band
   below it, so the two light sections stay distinguishable.               */
.trust {
  padding-block: clamp(30px, 4vw, 48px);
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
/* logos differ wildly in aspect ratio, so they get spaced by their own width
   rather than forced into equal columns */
.trust__grid {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: clamp(26px, 5vw, 64px);
}
@media (max-width: 720px) { .trust__grid { justify-content: center; gap: 30px 40px; } }

.trust__item {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; padding-block: 7px; /* tap target */
}
/* one greyscale treatment across all four, same as they run on the Boomerang
   site, so four unrelated brand palettes read as a single row */
.trust__item img {
  height: 30px; width: auto; max-width: 100%;
  filter: grayscale(1);
  opacity: .68; transition: opacity .18s;
}
.trust__item--icon img { height: 34px; }
.trust__item:hover img, .trust__item:focus-visible img { opacity: 1; }
.trust__item span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg-mute); line-height: 1.4;
}

/* ---------------- image placeholders ---------------- */
.imgph {
  position: relative; width: 100%;
  border: 1px dashed var(--rule); border-radius: 4px;
  background:
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(255,255,255,.026) 11px 22px),
    var(--ink-2);
  display: grid; place-items: center; text-align: center; padding: 26px; overflow: hidden;
}
.paper .imgph {
  background:
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(0,0,0,.028) 11px 22px),
    var(--paper-2);
}
.imgph__tag {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue);
  border: 1px solid currentColor; padding: 3px 7px; border-radius: 2px;
}
.imgph p { margin: 0; font-family: var(--mono); font-size: .74rem; line-height: 1.7; color: var(--fg-faint); max-width: 46ch; }
.imgph p b { color: var(--fg-mute); font-weight: 500; }
.r-16-10 { aspect-ratio: 16/10; }
.r-4-5   { aspect-ratio: 4/5; }
.r-21-9  { aspect-ratio: 21/9; }

/* ---------------- annotated email teardown ----------------
   built in CSS rather than shipped as an image: the text stays sharp at
   any density, stays editable, and inherits the palette                */
/* a dark component sitting inside a paper band: it has to opt back out of the
   light-band overrides, or the markers inherit the dim red meant for paper */
.tdown {
  margin-top: 30px;
  --red: #FF3B21; --blue: #5B8CFF;
  background: var(--ink-2); border: 1px solid #262A31; border-radius: 6px;
  overflow: hidden; color: #F2EEE5;
  box-shadow: 0 36px 70px -40px rgba(0,0,0,.7);
}
.tdown__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; border-bottom: 1px solid #262A31; background: var(--ink-3);
}
.tdown__bar i { width: 9px; height: 9px; border-radius: 50%; background: #3A3F47; }
.tdown__bar span {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  color: #868D97; margin-left: 8px; text-transform: uppercase;
}
.tdown__body { padding: 6px 0 14px; }

.tdown__row {
  display: grid; grid-template-columns: 52px 1fr;
  gap: 12px; align-items: start;
  padding: 9px 16px 9px 0;
  font-size: .82rem; line-height: 1.62; color: #A6ACB6;
}
.tdown__row > div { min-width: 0; }
.tdown__row.flag { background: rgba(255,59,33,.055); box-shadow: inset 2px 0 0 var(--red); }
.tdown__row.meta { font-family: var(--mono); font-size: .68rem; color: #868D97; letter-spacing: .02em; }
.tdown__row .subj { font-size: .96rem; font-weight: 700; color: #F2EEE5; letter-spacing: -.01em; }
.tdown__row.sig { color: #868D97; }

.tdown__n {
  justify-self: center; margin-left: 8px;
  width: 26px; height: 26px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--red); color: var(--red);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
@media (max-width: 520px) {
  .tdown__row { grid-template-columns: 42px 1fr; gap: 9px; font-size: .78rem; }
  .tdown__n { width: 23px; height: 23px; font-size: 9px; margin-left: 6px; }
}

/* ---------------- before / after enrichment ---------------- */
.sheets { display: grid; gap: 16px; }
.sheet {
  border: 1px solid var(--rule); border-radius: 5px;
  background: var(--ink-2); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.sheet--rich {
  border-color: rgba(91,140,255,.45);
  background: linear-gradient(180deg, rgba(91,140,255,.07), transparent 60%), var(--ink-2);
}
.sheet__tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; align-self: flex-start;
  padding: 4px 9px; border-radius: 2px; border: 1px solid currentColor;
}
.sheet__tag--raw  { color: var(--fg-faint); }
.sheet__tag--rich { color: var(--blue); }

.sheet__rows { display: grid; gap: 2px; }
.sheet .row {
  padding: 11px 12px; border-radius: 3px;
  background: rgba(255,255,255,.022);
  font-size: .78rem; line-height: 1.5; min-width: 0;
}
.sheet--rich .row { background: rgba(91,140,255,.06); }
.sheet .row > * { display: block; overflow-wrap: break-word; }
.sheet .row b { font-weight: 600; font-size: .82rem; color: var(--fg); font-style: normal; }
.sheet .row i {
  font-family: var(--mono); font-size: .7rem; font-style: normal;
  color: var(--fg-faint); margin-top: 2px;
}
.sheet .row em {
  font-family: var(--mono); font-size: .7rem; font-style: normal;
  color: var(--fg-faint); margin-top: 6px; letter-spacing: .04em;
}
.sheet .row u {
  text-decoration: none; color: var(--blue);
  font-family: var(--mono); font-size: .7rem; margin-top: 6px; letter-spacing: .02em;
}
.sheet .row s {
  text-decoration: none; color: var(--fg); margin-top: 3px; font-size: .76rem;
}
.sheet__foot {
  font-family: var(--mono); font-size: 9px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg-faint); line-height: 1.7;
}
.sheet--rich .sheet__foot { color: var(--blue); }

@media (min-width: 720px) { .sheets { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------------- portrait ---------------- */
.portrait { margin: 0; }
.portrait img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: 50% 22%;
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--paper-2);
}
/* shown by app.js when assets/portrait.jpg is not there yet, so the slot
   explains itself instead of rendering a broken image */
.portrait__missing { display: none; }
.portrait.missing img { display: none; }
.portrait.missing .portrait__missing {
  position: relative; display: grid; place-items: center; text-align: center;
  aspect-ratio: 1/1; padding: 26px; overflow: hidden;
  border: 1px dashed var(--rule); border-radius: 4px;
  background:
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(0,0,0,.028) 11px 22px),
    var(--paper-2);
}
.portrait__missing p {
  margin: 0; font-family: var(--mono); font-size: .74rem;
  line-height: 1.7; color: var(--fg-faint); max-width: 42ch;
}
.portrait__missing p b { color: var(--fg-mute); font-weight: 500; }
.portrait figcaption {
  margin-top: 14px; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 6px 10px;
}
.portrait figcaption b { font-weight: 600; font-size: .95rem; }
.portrait figcaption > span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-faint);
}

/* ---------------- teardown ---------------- */
.tear { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
@media (max-width: 960px) { .tear { grid-template-columns: 1fr; } }
.tear__list { counter-reset: t; list-style: none; margin: 0; padding: 0; }
.tear__list li { counter-increment: t; position: relative; padding: 24px 0 24px 62px; border-bottom: 1px solid var(--rule); }
.tear__list li::before {
  content: counter(t, decimal-leading-zero);
  position: absolute; left: 0; top: 24px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1.5px solid var(--red); color: var(--red); border-radius: 50%;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.tear__list h3 { margin-bottom: 8px; font-size: 1.1rem; }
.tear__list p { margin: 0; color: var(--fg-mute); font-size: .97rem; }
.tear__list .fix {
  display: block; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--rule); color: var(--fg); font-size: .95rem;
}
.tear__list .fix b {
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue); display: block; margin-bottom: 4px; font-weight: 500;
}

/* ---------------- grids / cards ---------------- */
.cols { display: grid; gap: clamp(22px, 3vw, 42px); }
/* grid items default to min-width:auto and refuse to shrink below their content */
.cols > * { min-width: 0; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--rule); border-radius: 4px;
  padding: clamp(24px, 2.6vw, 34px); background: var(--ink-2);
  position: relative; transition: border-color .2s, transform .2s;
}
.paper .card { background: rgba(255,255,255,.5); }
.card:hover { border-color: var(--fg-faint); transform: translateY(-3px); }
.card__n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--red); display: block; margin-bottom: 16px; }
.card h3 { margin-bottom: 10px; font-size: 1.16rem; }
.card p { margin: 0; color: var(--fg-mute); font-size: .97rem; }
.card .gain { display: block; margin-top: 14px; color: var(--fg); font-weight: 600; font-size: .97rem; }

/* ---------------- outcome list ---------------- */
.gains { list-style: none; margin: 0; padding: 0; counter-reset: g; }
.gains li {
  counter-increment: g; display: grid; grid-template-columns: 62px 1fr;
  gap: 22px; align-items: start; padding: 26px 0; border-top: 1px solid var(--rule);
}
.gains li:last-child { border-bottom: 1px solid var(--rule); }
.gains li::before {
  content: counter(g, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--blue); padding-top: .5em;
}
.gains h3 { margin-bottom: 7px; }
.gains p { margin: 0; color: var(--fg-mute); font-size: 1rem; max-width: 62ch; }
@media (max-width: 640px) { .gains li { grid-template-columns: 1fr; gap: 8px; } }

/* ---------------- burn list ---------------- */
.burn { list-style: none; margin: 40px 0 0; padding: 0; }
.burn li {
  display: flex; align-items: baseline; gap: 18px;
  padding: 22px 0; border-top: 1px solid var(--rule);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.3;
}
.burn li span { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--red); flex: 0 0 auto; padding-top: .3em; }

/* ---------------- curriculum ---------------- */
.mod { border-top: 1px solid var(--rule); }
.mod__item { border-bottom: 1px solid var(--rule); }
.mod__head {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 72px 1fr 30px;
  gap: 18px; align-items: center; padding: 26px 0; transition: opacity .18s;
}
.mod__head:hover { opacity: .68; }
.mod__num { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--red); }
.mod__title { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.75rem); letter-spacing: -.026em; line-height: 1.2; }
.mod__pm { position: relative; width: 18px; height: 18px; justify-self: end; }
.mod__pm::before, .mod__pm::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px;
  background: var(--fg-mute); transition: transform .28s cubic-bezier(.2,.8,.3,1);
}
.mod__pm::after { transform: rotate(90deg); }
.mod__item.open .mod__pm::after { transform: rotate(0); }
.mod__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.2,.8,.3,1); }
.mod__item.open .mod__body { grid-template-rows: 1fr; }
.mod__inner { overflow: hidden; }
.mod__inner > div { padding: 0 0 30px 90px; max-width: 80ch; }
@media (max-width: 720px) { .mod__inner > div { padding-left: 0; } .mod__head { grid-template-columns: 58px 1fr 22px; } }
.mod__body ul { margin: 0; padding-left: 20px; color: var(--fg-mute); }
.mod__body li { margin-bottom: 10px; font-size: .98rem; }
.mod__body li::marker { color: var(--red); }
.mod__body .out {
  margin: 18px 0 0; padding: 14px 18px; border-left: 2px solid var(--blue);
  background: rgba(91,140,255,.06); color: var(--fg); font-size: .97rem;
}
.mod__body .out b { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); display: block; margin-bottom: 5px; font-weight: 500; }

/* ---------------- split EU/US ---------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); }
@media (max-width: 840px) { .split { grid-template-columns: 1fr; } }
.split > div { padding: clamp(28px, 3.4vw, 46px); }
.split > div + div { border-left: 1px solid var(--rule); }
@media (max-width: 840px) { .split > div + div { border-left: 0; border-top: 1px solid var(--rule); } }
.split__flag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; display: inline-block;
  padding: 5px 11px; border-radius: 2px; margin-bottom: 22px;
}
.split__eu { color: var(--blue); border: 1px solid currentColor; }
.split__us { color: var(--red); border: 1px solid currentColor; }
.split ul { margin: 0; padding-left: 19px; }
.split li { margin-bottom: 14px; font-size: .98rem; color: var(--fg-mute); }
.split li b { color: var(--fg); font-weight: 600; }
.split > div:first-child li::marker { color: var(--blue); }
.split > div:last-child  li::marker { color: var(--red); }

/* ---------------- qualification ---------------- */
.qual { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.4vw, 56px); }
@media (max-width: 840px) { .qual { grid-template-columns: 1fr; } }
.qual ul { list-style: none; margin: 24px 0 0; padding: 0; }
.qual li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
.qual li i { flex: 0 0 auto; font-style: normal; font-family: var(--mono); font-weight: 700; }
.qual--yes li i { color: var(--blue); }
.qual--no  li i { color: var(--red); }
.qual--no  li  { color: var(--fg-mute); }

/* ---------------- stats ---------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
@media (max-width: 840px) { .stats { grid-template-columns: repeat(2, 1fr); } }
/* labels run to different line counts, so the values are pushed to a shared
   baseline instead of floating at whatever height their label ends */
.stats > div {
  padding: 28px 24px 28px 0; border-bottom: 1px solid var(--rule); min-width: 0;
  display: flex; flex-direction: column;
}
.stats dt { font-family: var(--mono); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 12px; line-height: 1.7; }
/* margin-top:auto pins every value to the bottom of its cell, so they line up
   across columns even though the labels run to different line counts */
.stats dd {
  margin: auto 0 0; padding-top: 14px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: -.03em; line-height: 1;
}
/* the real numbers are short and display-sized; the placeholder chip gets a
   fixed small size so it never wraps inside a narrow stat column */
.stats dd .ph { font-size: 11px; letter-spacing: 0; }

/* ---------------- quotes ---------------- */
.quote {
  border: 1px solid var(--rule); border-radius: 4px;
  padding: clamp(24px, 2.8vw, 34px); background: var(--ink-2);
  display: flex; flex-direction: column; gap: 22px;
}
.paper .quote { background: rgba(255,255,255,.55); }
.quote blockquote { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1.7vw, 1.24rem); line-height: 1.42; letter-spacing: -.02em; }
.quote figcaption { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.quote figcaption .av {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  border: 1px dashed var(--rule); display: grid; place-items: center;
  font-family: var(--mono); font-size: 8px; color: var(--fg-faint);
  background: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(255,255,255,.03) 5px 10px);
}
.quote figcaption b { display: block; font-size: .92rem; font-weight: 600; }
.quote figcaption span { font-size: .82rem; color: var(--fg-faint); }

/* ---------------- investment slab ---------------- */
/* dark slab inside a paper band: same opt-out as .tdown */
.slab {
  --fg: #F2EEE5; --fg-mute: #A6ACB6; --fg-faint: #868D97; --rule: #2B303A;
  --red: #FF3B21; --blue: #5B8CFF;
  color: var(--fg);
  border: 1px solid #2B303A; border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,59,33,.1), transparent 55%), var(--ink-2);
  padding: clamp(30px, 4.2vw, 60px); text-align: center;
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.6);
}
.slab .small { color: var(--fg-mute); }
.slab .ph { color: #8FB0FF; background: rgba(91,140,255,.14); border-color: rgba(91,140,255,.5); }
.slab hr { border: 0; border-top: 1px solid var(--rule); margin: 34px 0; }
.slab__mark {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--red);
}

/* ---------------- FAQ ---------------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 25px 44px 25px 0;
  position: relative; font-weight: 600; font-size: 1.06rem; transition: opacity .16s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { opacity: .68; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 22px;
  font-family: var(--mono); font-size: 1.25rem; color: var(--red);
  transition: transform .26s cubic-bezier(.2,.8,.3,1);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 44px 28px 0; color: var(--fg-mute); max-width: 76ch; }
.faq details > div p { margin: 0 0 12px; }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------------- sticky dock ---------------- */
.dock {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  background: rgba(10,11,13,.93); backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule);
  transform: translateY(110%); transition: transform .34s cubic-bezier(.2,.8,.3,1);
}
.dock.on { transform: none; }
.dock__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 13px; }
.dock p { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-mute); }
.dock .btn { padding: 14px 26px; font-size: .92rem; }
@media (max-width: 640px) { .dock p { display: none; } .dock__in { justify-content: center; } .dock .btn { width: 100%; } }

/* ---------------- footer ---------------- */
.foot { border-top: 1px solid var(--rule); padding-block: 50px 92px; }
.foot__in { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.foot a { color: var(--fg-mute); text-decoration: none; font-size: .9rem; }
.foot a:hover { color: var(--fg); }
/* padding lifts these to a 44px tap target without changing how they look */
.foot__links { display: flex; gap: 26px; flex-wrap: wrap; margin-block: -10px; }
.foot__links a { display: inline-block; padding-block: 10px; }

/* =========================================================
   MODAL · multistep application
   ========================================================= */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(6,7,9,.82); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .26s, visibility .26s;
}
.modal.on { opacity: 1; visibility: visible; }

.modal__panel {
  width: min(620px, 100%); max-height: min(92vh, 100%);
  display: flex; flex-direction: column;
  background: var(--ink-2); border: 1px solid #2B303A; border-radius: 6px;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.95);
  transform: translateY(18px) scale(.985); transition: transform .3s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
.modal.on .modal__panel { transform: none; }

.modal__head { padding: 22px clamp(22px, 4vw, 38px) 0; flex: 0 0 auto; }

/* the form, not the body, is the panel's flex child. Without this it stays a
   rigid block and pushes the footer (submit button) out of the clipped panel */
.modal__panel > form {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
}
.modal__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal__kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 8px; }
.modal__head h3 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin-bottom: 6px; }
.modal__head .small { margin: 0; font-size: .92rem; }

.modal__x {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: transparent; border: 1px solid var(--field-line); color: var(--fg-mute);
  cursor: pointer; font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
  transition: border-color .16s, color .16s;
}
.modal__x:hover { border-color: var(--fg); color: var(--fg); }

.bar { display: flex; gap: 6px; margin: 22px 0 0; }
/* the unfinished steps need to be visible as a track, or the progress bar
   reads as one floating red segment with nothing to measure it against */
.bar i { flex: 1; height: 3px; border-radius: 2px; background: #39404A; transition: background .3s; }
.bar i.done { background: var(--red); }

/* min-height:0 is required: a flex item defaults to min-height:auto, refuses
   to shrink below its content, and pushes the footer (with the submit button)
   outside the clipped panel on short screens */
.modal__body {
  padding: 26px clamp(22px, 4vw, 38px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  flex: 1 1 auto; min-height: 0;
}
.modal__foot {
  padding: 18px clamp(22px, 4vw, 38px); border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: 0 0 auto;
  background: var(--ink-3);
}
.modal__foot .btn { padding: 15px 26px; font-size: .94rem; }
.modal__foot .back {
  background: none; border: 0; cursor: pointer; color: var(--fg-mute);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 4px; transition: color .16s; /* 44px tap target */
}
.modal__foot .back:hover { color: var(--fg); }
.modal__foot .back[hidden] { display: none; }

/* honeypot: off-screen rather than display:none, which some bots skip */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

.step { display: none; gap: 20px; }
.step.on { display: grid; }
.step__q { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-faint); margin: 0; }

/* ---------------- fields ---------------- */
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-mute); }
.field label em { color: var(--red); font-style: normal; }
.field .hint { font-size: .85rem; color: var(--fg-faint); margin: -3px 0 0; line-height: 1.55; }
.field input, .field textarea, .field select {
  background: var(--ink); border: 1px solid var(--field-line);
  border-radius: 3px; padding: 15px 16px; width: 100%;
  /* must stay at 16px or above: iOS Safari auto-zooms the page when a
     focused field is smaller, which breaks the modal layout mid-form */
  font-size: 1rem; transition: border-color .16s, background .16s;
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A6ACB6' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue); background: var(--ink-3); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
.field--bad input, .field--bad textarea, .field--bad select { border-color: var(--red); }
.err { font-size: .8rem; color: var(--red); font-family: var(--mono); letter-spacing: .03em; margin: 0; }

.check {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--field-line); border-radius: 3px; padding: 18px;
  cursor: pointer; transition: border-color .16s;
}
.check:hover { border-color: var(--fg-mute); }
.check input { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--red); }
.check span { font-size: .95rem; color: var(--fg-mute); }
.check span b { color: var(--fg); font-weight: 600; }

.form__status { font-family: var(--mono); font-size: .82rem; letter-spacing: .03em; margin: 0; }
.form__status.bad { color: var(--red); }

.sent { text-align: center; padding: clamp(20px, 4vw, 40px) 0; }
.sent .tick {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 22px;
  border: 1.5px solid var(--blue); color: var(--blue);
  display: grid; place-items: center; font-size: 1.5rem;
}

/* ---------------- scroll reveal ---------------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .rv { opacity: 1; transform: none; }
  .strike { background-size: 100% 6px; }
  .mailrow--dead::after { opacity: .95; }
  html { scroll-behavior: auto; }
}