/* ============================================================
   Scout by My Legal Academy  —  v4
   Palette : forest-ink night floor, cool architectural paper, MLA gold
   Type    : Newsreader (editorial display) / Instrument Sans (body)
             / DM Mono (machine log only)
   Device  : the intake console, and a portrait that breaks the rule
   Rule    : gold speaks on dark, ink speaks on light
   ============================================================ */

:root{
  /* ── surfaces ── */
  --paper:      #F1F4F1;   /* cool architectural white */
  --paper-2:    #E4E9E4;   /* tint band */
  --white:      #FFFFFF;

  --ink:        #0B1A14;   /* forest black, the night floor */
  --ink-2:      #112620;   /* raised surface on dark */
  --ink-3:      #1B352C;   /* hairline on dark */

  /* ── ink on paper ── */
  --text:       #14201B;   /* headings + strong body            14.9:1 */
  --body:       #2F423A;   /* body copy                          9.6:1 */
  --muted:      #55675E;   /* secondary                          5.2:1 */
  --rule:       #CDD6CE;

  /* ── ink on dark ── */
  --on-dark:      #E7EDE8;  /* headings on dark                 14.3:1 */
  --on-dark-body: #BCCAC1;  /* body on dark                      9.4:1 */
  --on-dark-mute: #8CA096;  /* secondary on dark                 5.3:1 */

  /* ── THE ACCENT ──────────────────────────────────────────────
     --accent is the knob. The four companions are hand-tuned to it
     so every use stays AA; swap all five together, never just one.
     Rule: the lit variant speaks on dark, the deep variant on paper. */
  --accent:      #C49A4E;              /* MLA gold, the flat colour     */
  --accent-lit:  #DCB56A;              /* on ink            9.3:1       */
  --accent-deep: #7E5D22;              /* on paper          5.5:1       */
  --accent-dim:  rgba(196,154,78,.30); /* haloes and hairlines          */
  --accent-on:   #20170A;              /* label on an accent fill 6.8:1 */

  /* aliases, so every rule below reads in its own language */
  --gold:      var(--accent);
  --gold-lit:  var(--accent-lit);
  --gold-dim:  var(--accent-dim);
  --bronze:    var(--accent-deep);
  --pine:      #14614A;    /* accent that carries text on paper  6.4:1 */
  --pine-soft: rgba(20,97,74,.12);
  --go:        #7FC8A2;    /* resolved state, on dark */
  --alert:     #9B3412;    /* form error on paper                6.9:1 */

  /* ── legacy aliases: terms.html + thanks.html depend on these ── */
  --paper-tint: var(--paper-2);
  --ink-soft:   var(--ink-2);
  --ink-line:   var(--ink-3);
  --slate:      var(--muted);
  --slate-dim:  var(--on-dark-mute);
  --live:       var(--gold-lit);
  --live-deep:  var(--pine);
  --line:       var(--rule);

  /* ── type ── */
  --f-display: "Newsreader", Georgia, "Times New Roman", serif;
  --f-body:    "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap:  1200px;
  --pad:   clamp(20px, 5vw, 52px);
  --scout-wm: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%22.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M32.5 9.28 A17 17 0 1 1 24 7%22/%3E%3Cpath d=%22M4 28.01 H44%22/%3E%3Cpath d=%22M28.4 7.58 7.48 43.81%22/%3E%3C/svg%3E");
  --scout-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%223.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M32.5 9.28 A17 17 0 1 1 24 7%22/%3E%3Cpath d=%22M4 28.01 H44%22/%3E%3Cpath d=%22M28.4 7.58 7.48 43.81%22/%3E%3C/svg%3E");
  --bandY: clamp(64px, 7.6vw, 112px);

  /* ── motion ── */
  --ease-out: cubic-bezier(.23,1,.32,1);

  /* ── depth ── */
  --z-dock: 30;
  --z-header: 40;
  --z-skip: 60;
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.7;
  font-feature-settings:"ss01" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:var(--z-skip);
  background:var(--ink); color:var(--on-dark);
  padding:14px 20px; font-size:16px; font-weight:600; border-radius:4px;
}
.skip:focus{ left:10px; top:10px; }

a{ color:inherit; }
:focus-visible{ outline:2px solid var(--pine); outline-offset:3px; border-radius:3px; }
.band--dark :focus-visible, .close :focus-visible, .foot :focus-visible{ outline-color:var(--gold-lit); }

::selection{ background:var(--gold); color:var(--ink); }


/* ══════════════════════════════════════════════════════════
   TYPE
   ══════════════════════════════════════════════════════════ */

.display{
  font-family:var(--f-display); font-weight:500; font-optical-sizing:auto;
  font-size:clamp(42px, 5.6vw, 84px);
  line-height:1.02; letter-spacing:-.026em;
  color:var(--text); margin:0 0 28px;
  text-wrap:balance;
}
.display em{ font-style:italic; font-weight:400; }
.display--sm{ font-size:clamp(34px, 4.4vw, 60px); margin-bottom:34px; }

.h2{
  font-family:var(--f-display); font-weight:500; font-optical-sizing:auto;
  font-size:clamp(30px, 3.6vw, 50px);
  line-height:1.08; letter-spacing:-.022em;
  color:var(--text); margin:0 0 clamp(32px,3.6vw,50px);
  text-wrap:balance;
}
.h2 em{ font-style:italic; font-weight:400; }
.h2--onDark{ color:var(--on-dark); }

/* Section label. Set as plain readable text: no caps, no tracking, no mono. */
.eyebrow{
  font-family:var(--f-body); font-size:16px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--pine);
  margin:0 0 16px;
}
.eyebrow--onDark{ color:var(--gold-lit); }

.lede{
  font-size:clamp(19px, 1.5vw, 21.5px); line-height:1.58;
  color:var(--body); max-width:34ch; margin:0 0 32px;
  text-wrap:pretty;
}
.big-body{
  font-size:clamp(19px, 1.6vw, 22px); line-height:1.62;
  color:var(--body); margin:0 0 24px; max-width:62ch; text-wrap:pretty;
}
.big-body strong{ color:var(--text); font-weight:600; }


/* ══════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px;
  font-family:var(--f-body); font-weight:600; font-size:17px; letter-spacing:-.005em;
  background:var(--ink); color:var(--on-dark);
  padding:13px 26px; border:1px solid var(--ink); border-radius:4px;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background .18s var(--ease-out), color .18s var(--ease-out),
             border-color .18s var(--ease-out), transform .14s var(--ease-out);
}
.btn:hover{ background:var(--ink-2); border-color:var(--ink-2); }
.btn:active{ transform:scale(.975); }
.btn--sm{ min-height:42px; padding:9px 17px; font-size:15.5px; }
.btn--lg{ min-height:58px; padding:17px 34px; font-size:18px; }
.btn--full{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:progress; transform:none; }

/* secondary door: legible, obviously clickable, clearly not the primary */
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--text); }
.btn--ghost:hover{ background:var(--text); color:var(--paper); border-color:var(--text); }
.btn--ghost-dark{ background:transparent; color:var(--on-dark); border-color:var(--on-dark-mute); }
.btn--ghost-dark:hover{ background:var(--on-dark); color:var(--ink); border-color:var(--on-dark); }

/* gold primary, used only on dark where gold carries contrast */
.btn--gold{ background:var(--gold); border-color:var(--gold); color:#20170A; }
.btn--gold:hover{ background:var(--gold-lit); border-color:var(--gold-lit); color:#20170A; }

.cta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cta-row--center{ justify-content:center; margin-bottom:22px; }
.cta-row--center .btn{ min-width:228px; }
.cta-note{
  font-size:16px; line-height:1.6; color:var(--muted); margin:18px 0 0;
  font-variant-numeric:tabular-nums;
}
.cta-note--center{ text-align:center; color:var(--on-dark-mute); }


/* ══════════════════════════════════════════════════════════
   HEADER  —  Scout wordmark + MLA lockup
   ══════════════════════════════════════════════════════════ */

.topbar{
  position:sticky; top:0; z-index:var(--z-header);
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:72px; }

.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand__mark{
  width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 1px var(--accent-deep), 0 0 0 5px var(--accent-dim);
  animation:pulse 2.4s ease-in-out infinite;
}
.brand__name{
  font-family:var(--f-body); font-weight:600; font-size:23px;
  letter-spacing:-.032em; color:var(--text); line-height:1;
}
.brand__by{
  display:inline-flex; align-items:center; gap:9px;
  padding-left:12px; border-left:1px solid var(--rule);
  font-size:14px; color:var(--muted); line-height:1;
}
.brand__logo{ display:block; height:15px; width:auto; }

.topbar__right{ display:flex; align-items:center; gap:18px; }
.seatpill{
  font-size:14.5px; color:var(--muted);
  border:1px solid var(--rule); border-radius:999px; padding:6px 14px; white-space:nowrap;
}


/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */

.hero{ padding:clamp(40px,4.4vw,62px) 0 clamp(56px,6.2vw,86px); }
.hero__head{ max-width:1100px; margin-bottom:clamp(34px,3.8vw,52px); }
.hero__head .display{ margin-bottom:0; }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(38px,4.6vw,68px); align-items:start;
}
.hero__copy{ min-width:0; }
.hero .eyebrow{ margin-bottom:20px; }
.hero .lede{ margin-top:0; }
.hero .cta-note{ margin-top:20px; }

/* above-the-fold proof, three facts */
.proof{
  list-style:none; margin:34px 0 0; padding:26px 0 0;
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px 26px;
}
.proof li{ font-size:15.5px; line-height:1.5; color:var(--muted); }
.proof b{
  display:block; font-family:var(--f-display); font-weight:500;
  font-size:30px; line-height:1; letter-spacing:-.03em;
  color:var(--text); margin-bottom:8px; font-variant-numeric:tabular-nums;
}

.hero__panel{ display:flex; flex-direction:column; gap:26px; min-width:0; }

.creed{ margin:0; padding-top:24px; border-top:1px solid var(--rule); }
.creed blockquote{
  margin:0; font-family:var(--f-display); font-weight:400;
  font-size:clamp(20px,1.7vw,24px); line-height:1.32; letter-spacing:-.012em;
  color:var(--text); text-wrap:balance;
}
.creed em{ font-style:italic; }
.creed figcaption{ margin-top:12px; font-size:14.5px; color:var(--muted); }


/* ══════════════════════════════════════════════════════════
   SIGNATURE: the intake console
   ══════════════════════════════════════════════════════════ */

.console{
  background:var(--ink); border-radius:8px; overflow:hidden; min-width:0;
  box-shadow:0 40px 80px -44px rgba(11,26,20,.7), 0 2px 6px -2px rgba(11,26,20,.14);
}
.console__bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 20px; border-bottom:1px solid var(--ink-3);
}
.console__label{ font-size:14px; color:var(--on-dark-mute); letter-spacing:.01em; }
.console__live{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:var(--gold-lit);
}
.console__live i{ width:7px; height:7px; border-radius:50%; background:var(--accent-lit); flex:none; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }

.console__log{ list-style:none; margin:0; padding:8px 0; }
.logrow{
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:baseline;
  padding:12px 20px;
  font-family:var(--f-mono); font-size:14px; line-height:1.5;
  color:var(--on-dark-body); font-variant-numeric:tabular-nums;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
/* Rows are visible by default. JS adds .is-armed only when it can animate,
   so a throttled or failed script never leaves an empty board on screen. */
.console.is-armed .logrow{ opacity:0; transform:translateY(8px); }
.console.is-armed.is-on .logrow{ opacity:1; transform:none; }
.logrow__time{ color:var(--on-dark-mute); font-size:14px; white-space:nowrap; }
.logrow__body{ min-width:0; }
.logrow__tag{
  font-family:var(--f-body); font-size:14px; font-weight:500; white-space:nowrap;
  color:var(--on-dark-mute); border:1px solid var(--ink-3); border-radius:999px; padding:3px 11px;
}
.logrow__tag--wait{ color:var(--gold-lit); border-color:var(--gold-dim); }
.logrow__tag--good{ color:var(--go); border-color:rgba(127,200,162,.34); }

.console__meter{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding:22px 20px; border-top:1px solid var(--ink-3);
  background:var(--ink-2);
}
.console__counter{
  font-family:var(--f-display); font-weight:500; font-variant-numeric:tabular-nums;
  font-size:clamp(40px,4.6vw,54px); line-height:1; letter-spacing:-.03em; color:var(--gold-lit);
}
.console__meterlabel{ font-size:14.5px; line-height:1.4; color:var(--on-dark-mute); max-width:16em; }


/* ══════════════════════════════════════════════════════════
   BANDS
   ══════════════════════════════════════════════════════════ */

.band{ padding:var(--bandY) 0; }
.band--tint{ background:var(--paper-2); }
.band--dark{ background:var(--ink); color:var(--on-dark-body); }
.band--dark .h2{ color:var(--on-dark); }

.sechead{ max-width:820px; }
.sechead--wide{ max-width:1060px; }


/* ══════════════════════════════════════════════════════════
   PROBLEM  —  focal point is the Friday-night log
   ══════════════════════════════════════════════════════════ */

.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:clamp(28px,3.4vw,54px); margin-bottom:clamp(44px,5.4vw,68px);
}
.stat{ border-top:1px solid var(--ink-3); padding-top:24px; }
.stat__num{
  display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(48px,5vw,62px); line-height:1; letter-spacing:-.035em;
  color:var(--gold-lit); margin-bottom:16px; font-variant-numeric:tabular-nums;
}
.stat__unit{ font-size:.66em; }
.stat__body{ margin:0 0 14px; font-size:16.5px; line-height:1.58; color:var(--on-dark-body); max-width:26em; }
.stat__src{ font-size:14px; color:var(--on-dark-mute); }

.deadlog{
  border:1px solid var(--ink-3); border-radius:8px;
  padding:clamp(22px,2.8vw,38px); background:var(--ink-2);
}
.deadlog__cap{ font-size:15.5px; color:var(--on-dark-mute); margin:0 0 22px; }
.deadlog__list{ list-style:none; margin:0 0 26px; padding:0; }
.deadrow{
  display:grid; grid-template-columns:104px 1fr auto; gap:18px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid rgba(27,53,44,.75);
  font-size:16.5px; color:var(--on-dark-body); font-variant-numeric:tabular-nums;
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.deadrow:last-child{ border-bottom:0; }
.deadlog.is-armed .deadrow{ opacity:0; transform:translateY(7px); }
.deadlog.is-armed.is-on .deadrow{ opacity:1; transform:none; }
.deadrow__time{ color:var(--on-dark-mute); white-space:nowrap; font-family:var(--f-mono); font-size:14px; }
.deadrow__name{ min-width:0; }
.deadrow__wait{ white-space:nowrap; font-size:14px; color:var(--on-dark-mute); font-family:var(--f-mono); }
.deadrow--gone{ color:var(--on-dark); }
.deadrow--gone .deadrow__name{ font-weight:500; }
.deadrow--gone .deadrow__wait{ color:var(--gold-lit); }
.deadlog__foot{
  margin:0; padding-top:22px; border-top:1px solid var(--ink-3);
  font-family:var(--f-display); font-size:clamp(19px,1.7vw,23px); line-height:1.45;
  color:var(--on-dark); max-width:40ch; text-wrap:pretty;
}


/* ══════════════════════════════════════════════════════════
   WOVEN TESTIMONIAL  —  the portrait breaks the rule
   ══════════════════════════════════════════════════════════ */

.said{ padding:clamp(42px,4.8vw,66px) 0 clamp(20px,2.4vw,36px); }
.said__fig{
  margin:0; position:relative;
  border-top:1px solid var(--rule);
  padding-top:clamp(58px,6vw,68px);
  display:grid; grid-template-columns:132px minmax(0,1fr); gap:0;
}
.said__face{
  position:absolute; top:0; left:0;
  width:92px; height:92px; border-radius:50%; object-fit:cover;
  transform:translateY(-50%);
  box-shadow:0 0 0 1px var(--rule), 0 0 0 7px var(--paper), 0 0 0 8px var(--gold-dim);
  background:var(--paper-2);
}
.said__body{ grid-column:2; min-width:0; }
.said__quote{
  margin:0 0 18px;
  font-family:var(--f-display); font-weight:400; font-style:italic;
  font-size:clamp(22px,2.2vw,30px); line-height:1.38; letter-spacing:-.012em;
  color:var(--text); max-width:34ch; text-wrap:pretty;
}
.said__who{ font-size:16.5px; font-weight:600; color:var(--text); }
.said__who span{ display:block; font-weight:400; font-size:15.5px; color:var(--muted); margin-top:3px; }


/* ══════════════════════════════════════════════════════════
   SPLIT  (what it is / listen)
   ══════════════════════════════════════════════════════════ */

.split{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,4.6vw,80px); align-items:start; }
.split__head .h2{ margin-bottom:0; font-size:clamp(29px,3.1vw,42px); }
.split__body{ min-width:0; }
.split__body .big-body:last-child{ margin-bottom:0; }


/* ══════════════════════════════════════════════════════════
   SAMPLE CALL
   ══════════════════════════════════════════════════════════ */

.player{ background:var(--white); border:1px solid var(--rule); border-radius:8px; padding:clamp(22px,2.8vw,32px); }
.player__top{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.player__label{ font-size:15px; color:var(--muted); font-variant-numeric:tabular-nums; }
.player .console__live{ color:var(--pine); font-size:15px; }
.player .console__live i{ background:var(--pine); animation:none; }
.player__audio{ width:100%; display:block; margin-bottom:22px; }
.player__marks{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:10px; }
.player__marks li{
  font-size:16.5px; line-height:1.45; color:var(--body);
  display:grid; grid-template-columns:52px 1fr; gap:14px; align-items:baseline;
}
.player__marks b{ font-family:var(--f-mono); font-weight:500; font-size:14px; color:var(--pine); font-variant-numeric:tabular-nums; }
.player__note{ margin:0; padding-top:18px; border-top:1px solid var(--rule); font-size:14.5px; line-height:1.55; color:var(--muted); }


/* ══════════════════════════════════════════════════════════
   STORY
   ══════════════════════════════════════════════════════════ */

.pull{
  margin:0 0 clamp(40px,4.8vw,64px); padding:0;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(34px,4.6vw,64px); line-height:1.1; letter-spacing:-.024em;
  color:var(--text); max-width:16ch; text-wrap:balance;
}
.pull em{ font-style:italic; }
.story-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:clamp(26px,3.2vw,52px); }
.story-cols p{ margin:0; font-size:17.5px; line-height:1.7; color:var(--body); text-wrap:pretty; }
.story-cols strong{ color:var(--text); font-weight:600; }


/* ══════════════════════════════════════════════════════════
   WHAT YOU GET
   ══════════════════════════════════════════════════════════ */

.feature-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:0 clamp(30px,3.6vw,60px);
}
.feature-list li{ border-top:1px solid var(--rule); padding:24px 0 26px; }
.feature-list span{
  display:block; font-family:var(--f-display); font-weight:500; font-size:23px;
  letter-spacing:-.016em; line-height:1.2; color:var(--text); margin-bottom:9px;
}
.feature-list p{ margin:0; font-size:16.5px; line-height:1.6; color:var(--body); }


/* ══════════════════════════════════════════════════════════
   THE FLOW  —  a real sequence, so a timeline is earned
   ══════════════════════════════════════════════════════════ */

.flow{ list-style:none; margin:0; padding:0; }
.flow__step{
  position:relative;
  display:grid; grid-template-columns:150px minmax(0,1fr);
  gap:8px clamp(28px,3.4vw,56px);
  padding:26px 0 28px 0;
  border-top:1px solid var(--rule);
}
/* the bubble: quiet until the step reaches the bottom third of the screen */
.flow__step::before{
  content:""; position:absolute; top:-5px; left:0; z-index:1;
  width:9px; height:9px; border-radius:50%; background:#B7C3B9;
  box-shadow:0 0 0 5px var(--paper);
  transition:background .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.flow__step.is-lit::before{
  background:var(--accent);
  box-shadow:0 0 0 5px var(--paper), 0 0 0 6px var(--accent-deep),
             0 0 16px 3px var(--accent-dim);
}
/* the beam: leaves the bubble, travels the rule, and leaves nothing behind */
.flow__step::after{
  content:""; position:absolute; top:-1px; left:0;
  width:34%; height:1px; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, var(--accent) 46%, var(--accent) 54%, transparent);
}
.flow__step.is-lit::after{ animation:beam 1.5s cubic-bezier(.23,1,.32,1) both; }
@keyframes beam{
  0%   { opacity:0; transform:translateX(-55%); }
  14%  { opacity:1; }
  72%  { opacity:1; }
  100% { opacity:0; transform:translateX(300%); }
}
.flow__t{
  grid-row:1 / span 2; align-self:start;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(24px,2.4vw,32px); line-height:1.1; letter-spacing:-.02em;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.flow__title{
  display:block; font-family:var(--f-display); font-weight:500; font-size:24px;
  letter-spacing:-.018em; line-height:1.2; color:var(--text); margin-bottom:7px;
}
.flow__step p{ margin:0; font-size:16.5px; line-height:1.62; color:var(--body); max-width:64ch; }


/* ══════════════════════════════════════════════════════════
   THE SYSTEM  (dark)
   ══════════════════════════════════════════════════════════ */

.system__lede{ font-size:clamp(19px,1.6vw,22px); line-height:1.6; color:var(--on-dark-body); max-width:44ch; margin:0 0 clamp(40px,5vw,62px); text-wrap:pretty; }
.stack{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  gap:0 clamp(32px,4vw,64px);
}
.stack__item{ border-top:1px solid var(--ink-3); padding:24px 0 28px; }
.stack__tag{
  display:block; font-family:var(--f-mono); font-size:14px;
  color:var(--gold-lit); margin-bottom:10px;
}
.stack__title{
  display:block; font-family:var(--f-display); font-weight:500; font-size:22px;
  letter-spacing:-.018em; line-height:1.22; color:var(--on-dark); margin-bottom:8px;
}
.stack__item p{ margin:0; font-size:16.5px; line-height:1.6; color:var(--on-dark-body); }


/* ══════════════════════════════════════════════════════════
   COMPARE
   ══════════════════════════════════════════════════════════ */

.compare-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule); border-radius:8px;
  background:
    linear-gradient(to right, var(--white) 40%, rgba(255,255,255,0)) 0 0 / 44px 100% no-repeat local,
    linear-gradient(to left,  var(--white) 40%, rgba(255,255,255,0)) 100% 0 / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(11,26,20,.15), rgba(11,26,20,0)) 0 0 / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(11,26,20,.15), rgba(11,26,20,0)) 100% 0 / 16px 100% no-repeat scroll,
    var(--white);
}
.compare{ width:100%; min-width:900px; border-collapse:collapse; font-size:16.5px; table-layout:fixed; }
.compare th, .compare td{ text-align:left; vertical-align:top; padding:18px 18px; border-bottom:1px solid var(--rule); }
.compare thead th{
  font-family:var(--f-display); font-weight:500; font-size:20px; letter-spacing:-.014em;
  color:var(--text); border-bottom:2px solid var(--text); padding-top:22px; padding-bottom:16px;
}
.compare tbody th{ font-weight:500; color:var(--text); font-size:16px; }
.compare col.c-label{ width:23%; } .compare col.c-opt{ width:19.25%; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td{ border-bottom:none; }
.compare__scout{ background:var(--pine-soft); }
.compare thead .compare__scout{ color:var(--pine); border-bottom-color:var(--pine); box-shadow:inset 0 4px 0 var(--gold); }
.compare td b{ display:block; font-family:var(--f-display); font-weight:500; font-size:26px; letter-spacing:-.028em; color:var(--text); font-variant-numeric:tabular-nums; }
.compare td small{ display:block; margin-top:6px; font-size:14.5px; line-height:1.5; color:var(--muted); }
.compare .yes, .compare .no{ display:inline-block; font-size:15px; font-weight:500; padding:4px 11px; border-radius:999px; }
.compare .yes{ color:var(--pine); background:rgba(20,97,74,.14); }
.compare .no{ color:var(--muted); background:var(--paper-2); }
.compare thead th:first-child, .compare tbody th{ position:sticky; left:0; background:var(--white); z-index:1; box-shadow:1px 0 0 var(--rule); }
.compare thead th:first-child{ background:var(--white); }
.compare__foot{ margin:20px 0 0; font-size:14.5px; line-height:1.6; color:var(--muted); max-width:82ch; }
.compare sup{ font-size:.76em; }
.compare__foot sup{ font-size:.8em; }


/* ══════════════════════════════════════════════════════════
   PROOF  —  hairline columns, not a card kit
   ══════════════════════════════════════════════════════════ */

.proof__lede{ font-size:clamp(18px,1.5vw,20px); line-height:1.65; color:var(--body); max-width:52ch; margin:0 0 clamp(38px,4.4vw,56px); }
.proof__lede a{ color:var(--pine); font-weight:600; text-decoration:none; white-space:nowrap; border-bottom:1px solid var(--pine-soft); }
.proof__lede a:hover{ border-bottom-color:var(--pine); }

.reviews{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr)); gap:0 clamp(30px,3.6vw,56px); }
.review{ margin:0; border-top:1px solid var(--rule); padding:26px 0 30px; display:flex; flex-direction:column; }
.review__stars{ color:var(--bronze); font-size:15.5px; letter-spacing:.16em; margin-bottom:16px; }
.review blockquote{ margin:0 0 20px; font-size:17px; line-height:1.62; color:var(--body); flex:1; text-wrap:pretty; }
.review figcaption{ display:flex; align-items:center; gap:14px; }
.review__face{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 1px var(--rule); }
.review__who{ font-size:16px; font-weight:600; color:var(--text); line-height:1.3; }
.review__firm{ display:block; font-weight:400; font-size:15px; color:var(--muted); margin-top:3px; }


/* ══════════════════════════════════════════════════════════
   HOW IT WORKS
   ══════════════════════════════════════════════════════════ */

.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr)); gap:clamp(26px,2.8vw,40px); }
.step{ border-top:2px solid var(--text); padding-top:22px; }
.step__when{ display:block; font-size:15.5px; font-weight:500; color:var(--pine); margin-bottom:14px; }
.step__title{ font-family:var(--f-display); font-weight:500; font-size:25px; letter-spacing:-.02em; margin:0 0 11px; line-height:1.16; color:var(--text); }
.step p{ margin:0; font-size:16.5px; line-height:1.6; color:var(--body); }


/* ══════════════════════════════════════════════════════════
   PRICING + FORM  (dark)
   ══════════════════════════════════════════════════════════ */

.pricing{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.88fr); gap:clamp(38px,5vw,84px); align-items:start; }
.pricing__head .h2{ margin-bottom:24px; }
.pricing__why{ font-size:18px; line-height:1.68; color:var(--on-dark-body); max-width:46ch; margin:0 0 36px; text-wrap:pretty; }
.pricing__head--wide{ max-width:48ch; margin-bottom:clamp(38px,4.4vw,54px); }
.pricing__head--wide .pricing__why{ margin-bottom:0; }

.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:18px; margin-bottom:clamp(44px,5.4vw,70px); }
.plan{
  position:relative; background:var(--white); color:var(--body);
  border-radius:8px; padding:clamp(24px,2.8vw,32px);
  display:flex; flex-direction:column; gap:14px;
}
.plan--featured{ box-shadow:0 0 0 2px var(--gold); }
.plan--note{ background:var(--ink-2); color:var(--on-dark-body); box-shadow:inset 0 0 0 1px var(--ink-3); }
.plan__badge{
  position:absolute; top:-13px; left:clamp(24px,2.8vw,32px);
  font-size:14px; font-weight:600; background:var(--gold); color:#20170A;
  padding:4px 12px; border-radius:999px;
}
.plan__name{ font-size:16px; font-weight:600; color:var(--pine); }
.plan--note .plan__name{ color:var(--gold-lit); }
.plan__price{ display:block; font-variant-numeric:tabular-nums; line-height:1; }
.plan__price s{ font-family:var(--f-display); font-size:22px; color:var(--muted); margin-right:9px; }
.plan__price b{ font-family:var(--f-display); font-weight:500; font-size:clamp(40px,4.2vw,50px); white-space:nowrap; letter-spacing:-.035em; color:var(--text); }
.plan__price i{ font-style:normal; font-family:var(--f-body); font-weight:500; font-size:18px; color:var(--muted); margin-left:4px; white-space:nowrap; }
.plan--note .plan__price s{ color:var(--on-dark-mute); }
.plan--note .plan__price b{ color:var(--on-dark); }
.plan--note .plan__price i{ color:var(--on-dark-mute); }
.plan__desc{ margin:0; font-size:16px; line-height:1.6; color:var(--body); flex:1; }
.plan--note .plan__desc{ color:var(--on-dark-body); }
.plan__desc--terms{ flex:0; padding-top:14px; border-top:1px solid var(--ink-3); font-size:15.5px; }
.plan__desc a{ color:var(--gold-lit); font-weight:600; text-decoration:none; border-bottom:1px solid var(--gold-dim); }
.plan__desc a:hover{ border-bottom-color:var(--gold-lit); }
.plan .btn{ margin-top:2px; }

/* trust line under each payment button */
.plan__fine{ display:block; font-size:15px; line-height:1.5; color:var(--muted); text-align:center; margin:0; }
.plan__fine svg{ display:inline-block; width:13px; height:13px; vertical-align:-1px; margin-right:7px; opacity:.75; }
.plan--note .plan__fine{ color:var(--on-dark-mute); }

.pricing--talk{ padding-top:clamp(36px,4.2vw,56px); border-top:1px solid var(--ink-3); }

/* terms rows on the dark side */
.terms{ border-top:1px solid var(--ink-3); }
.terms__row{ display:grid; grid-template-columns:104px 1fr; gap:22px; padding:20px 0; border-bottom:1px solid var(--ink-3); }
.terms__label{ font-size:15.5px; color:var(--on-dark-mute); padding-top:4px; }
.terms__value{ min-width:0; }
.terms__value s{ font-family:var(--f-display); font-size:19px; color:var(--on-dark-mute); margin-right:8px; }
.terms__value b{ font-family:var(--f-display); font-weight:500; font-size:26px; letter-spacing:-.028em; color:var(--on-dark); }
.terms__value i{ font-style:normal; font-size:17px; color:var(--on-dark); }
.terms__value em{ display:block; margin-top:8px; font-style:normal; font-size:16px; line-height:1.6; color:var(--on-dark-body); max-width:40ch; }

/* the form card */
.card{ background:var(--white); border-radius:8px; padding:clamp(26px,3.2vw,40px); color:var(--body); }
.card__title{ font-family:var(--f-display); font-weight:500; font-size:clamp(28px,2.6vw,36px); letter-spacing:-.026em; line-height:1.12; margin:0 0 14px; color:var(--text); }
.card__lede{ margin:0 0 28px; font-size:17px; line-height:1.6; color:var(--body); }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field--wide{ grid-column:1 / -1; }
.field label{ font-size:15px; font-weight:500; color:var(--text); }
.field input{
  font-family:var(--f-body); font-size:17px; color:var(--text); min-height:50px;
  background:var(--paper); border:1px solid #C0CCC3; border-radius:4px;
  padding:12px 14px; width:100%;
  transition:border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s var(--ease-out);
}
.field input::placeholder{ color:var(--muted); opacity:1; }
.field input:hover{ border-color:var(--muted); }
.field input:focus{ outline:none; border-color:var(--pine); background:var(--white); box-shadow:0 0 0 3px var(--pine-soft); }
.field input[aria-invalid="true"]{ border-color:var(--alert); background:#FCF3F0; }

.form button{ grid-column:1 / -1; margin-top:6px; }
.form__error{ grid-column:1 / -1; margin:0; font-size:15.5px; line-height:1.55; color:var(--alert); font-weight:500; }
.form__fine{ grid-column:1 / -1; margin:4px 0 0; font-size:14.5px; line-height:1.55; color:var(--muted); }

.card__alt{ margin:26px 0 0; padding-top:22px; border-top:1px solid var(--rule); font-size:16.5px; color:var(--body); }
.card__alt a{ color:var(--pine); font-weight:600; text-decoration:none; border-bottom:1px solid var(--pine-soft); padding-block:8px; }
.card__alt a:hover{ border-bottom-color:var(--pine); }

/* submitted state (kept for parity) */
.card--done{ display:flex; flex-direction:column; gap:14px; }
.card__doneTitle{ font-family:var(--f-display); font-weight:500; font-size:30px; letter-spacing:-.028em; line-height:1.12; margin:0; color:var(--text); }
.card__doneBody{ margin:0; font-size:17px; line-height:1.6; color:var(--body); }


/* ══════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════ */

.faq{ border-top:1px solid var(--rule); max-width:940px; }
.qa{ border-bottom:1px solid var(--rule); }
.qa summary{
  cursor:pointer; list-style:none; padding:26px 52px 26px 0; position:relative;
  font-family:var(--f-display); font-weight:500; font-size:clamp(21px,2vw,25px);
  letter-spacing:-.016em; line-height:1.3; color:var(--text);
  min-height:48px;
  transition:color .16s var(--ease-out);
}
.qa summary:hover{ color:var(--pine); }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:""; position:absolute; right:8px; top:50%; margin-top:-1px;
  width:17px; height:2px; background:var(--pine);
}
.qa summary::before{
  content:""; position:absolute; right:15.5px; top:50%; margin-top:-8.5px;
  width:2px; height:17px; background:var(--pine);
  transition:transform .2s var(--ease-out), opacity .2s var(--ease-out);
}
.qa[open] summary::before{ transform:scaleY(0); opacity:0; }
.qa p{ margin:0 0 28px; max-width:66ch; font-size:17.5px; line-height:1.7; color:var(--body); text-wrap:pretty; }
.qa p a{ color:var(--pine); font-weight:600; text-decoration:none; border-bottom:1px solid var(--pine-soft); }
.qa p a:hover{ border-bottom-color:var(--pine); }


/* ══════════════════════════════════════════════════════════
   CLOSE
   ══════════════════════════════════════════════════════════ */

.close{ padding:clamp(64px,7.6vw,106px) 0; background:var(--ink); color:var(--on-dark-body); }
.close__inner{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.close .display{ color:var(--on-dark); max-width:100%; }
.close .display em{ color:var(--gold-lit); font-style:italic; }


/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */

.foot{ background:var(--ink); color:var(--on-dark-mute); padding:0 0 44px; }
.foot__inner{
  display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start;
  padding-top:44px; border-top:1px solid var(--ink-3);
}
.foot__brand{ margin:0; display:flex; flex-direction:column; gap:14px; }
.foot__name{ font-family:var(--f-body); font-weight:600; font-size:22px; letter-spacing:-.03em; color:var(--on-dark); }
.foot__by{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--on-dark-mute); }
.foot__logo{ display:block; height:17px; width:auto; }
.foot__legal{ margin:0; max-width:60ch; font-size:14.5px; line-height:1.65; color:var(--on-dark-mute); }
.foot__legal a{ color:var(--on-dark-body); text-decoration:none; border-bottom:1px solid var(--ink-3); }
.foot__legal a:hover{ color:var(--gold-lit); border-bottom-color:var(--gold-dim); }

/* legacy: thanks.html + terms.html still use .foot__brand span */
.foot__brand > span:not([class]){ font-size:14.5px; font-weight:400; color:var(--on-dark-mute); letter-spacing:0; }


/* ══════════════════════════════════════════════════════════
   MOBILE CTA DOCK
   ══════════════════════════════════════════════════════════ */

.dock{ display:none; }
@media (max-width: 860px){
  .dock{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:var(--z-dock);
    background:color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter:saturate(160%) blur(12px);
    border-top:1px solid var(--rule);
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 30px -22px rgba(11,26,20,.5);
  }
  .dock__row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .dock .btn{ min-height:48px; font-size:16px; padding:11px 12px; }
  .dock__note{ margin:8px 0 0; text-align:center; font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; }
  @media (prefers-reduced-motion: no-preference){
    @supports (animation-timeline: scroll()){
      .dock{
        animation:dock-in linear both;
        animation-timeline:scroll(root block);
        animation-range:340px 620px;
      }
      @keyframes dock-in{
        from{ transform:translateY(115%); }
        to  { transform:translateY(0); }
      }
    }
  }
  body{ padding-bottom:126px; }
  .foot{ padding-bottom:20px; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1040px){
  .hero__grid{ grid-template-columns:1fr; gap:44px; }
  .hero__copy .lede{ max-width:48ch; }
  .split{ grid-template-columns:1fr; }
  .pricing{ grid-template-columns:1fr; }
  .sechead, .sechead--wide{ max-width:34ch; }
}

@media (max-width: 860px){
  .topbar__inner{ min-height:64px; }
  .topbar .seatpill{ display:none; }
  .said__fig{ grid-template-columns:1fr; padding-top:74px; }
  .said__body{ grid-column:1; }
  .said__face{ width:80px; height:80px; }
  .flow__step{ grid-template-columns:1fr; gap:4px; padding:24px 0 26px; }
  .flow__t{ grid-row:auto; margin-bottom:4px; }
}

@media (max-width: 620px){
  body{ font-size:16.5px; line-height:1.68; }
  :root{ --bandY: clamp(50px, 9vw, 70px); }
  .display{ font-size:clamp(36px, 10.4vw, 46px); }
  .display--sm{ font-size:clamp(31px, 8.8vw, 40px); }
  .h2{ font-size:clamp(27px, 7.6vw, 35px); }
  .form{ grid-template-columns:1fr; }
  .terms__row{ grid-template-columns:1fr; gap:6px; }
  .terms__label{ padding-top:0; }
  .brand{ gap:10px; min-width:0; }
  .brand__name{ font-size:19px; }
  .brand__by{ font-size:14px; gap:7px; padding-left:9px; }
  .brand__logo{ height:12px; }
  .topbar__inner{ gap:12px; }
  .topbar .btn--sm{ white-space:nowrap; padding:9px 14px; font-size:15px; }
  .logrow{ grid-template-columns:1fr auto; gap:4px 12px; padding:11px 16px; }
  .logrow__time{ grid-column:1 / -1; }
  .console__bar, .console__meter{ padding-inline:16px; }
  .deadrow{ grid-template-columns:1fr auto; gap:3px 12px; }
  .deadrow__time{ grid-column:1 / -1; }
  .cta-row{ gap:12px; }
  .cta-row .btn--lg{ width:100%; }
  .cta-row--center .btn{ min-width:0; }
  .proof{ grid-template-columns:1fr 1fr; gap:20px 24px; }
  .plans{ display:flex; flex-direction:column; }
  .plan--featured{ order:-1; }
  .qa summary{ padding-right:44px; }
  .review figcaption{ align-items:flex-start; }
}

@media (max-width: 410px){
  .brand__logo{ height:11px; }
  .topbar .btn--sm{ padding:9px 12px; font-size:14.5px; }
}
@media (max-width: 345px){
  .brand__by{ display:none; }
}

@media (max-width: 380px){
  .proof{ grid-template-columns:1fr; }
  .dock__row{ grid-template-columns:1fr; }
  body{ padding-bottom:172px; }
}


/* ══════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .console.is-armed .logrow, .deadlog.is-armed .deadrow{ opacity:1 !important; transform:none !important; }
  .flow__step::before{ background:var(--accent); box-shadow:0 0 0 5px var(--paper), 0 0 0 6px var(--accent-deep); }
  .flow__step::after{ display:none; }
  .btn:active{ transform:none; }
}

/* six-column comparison (10 Sep evening) */
.compare--six{ min-width:1040px; }
.compare--six col.c-label{ width:20%; } .compare--six col.c-opt{ width:16%; }
.compare thead th span{ display:block; font-size:14px; font-weight:400; color:var(--muted); margin-top:4px; letter-spacing:0; }
.compare__lede{ font-size:17px; line-height:1.6; color:var(--muted); max-width:62ch; margin:10px 0 0; }
.compare__lede b{ color:var(--text); font-weight:600; }
.compare .mid{ display:inline-block; font-size:15px; font-weight:500; padding:4px 11px; border-radius:999px; color:var(--text); background:var(--paper-2); border:1px solid var(--rule); }
.compare__price td b{ font-size:28px; }
.compare__per td b{ font-size:22px; }
.compare__hero th, .compare__hero td{ background:rgba(20,97,74,.06); border-top:2px solid var(--pine); border-bottom:2px solid var(--pine); }
.compare__hero th{ font-weight:600; color:var(--pine); }
.compare__hero td.compare__scout{ background:rgba(20,97,74,.14); }
.compare__hero .yes{ background:var(--pine); color:#fff; }
.compare__lede{ margin-bottom:28px; }
.compare--six .yes, .compare--six .no, .compare--six .mid{ border-radius:10px; line-height:1.4; padding:6px 11px; }
/* plan cards: struck regular price on its own line in every card, so the two cards match */
.plan__price s{ display:block; margin:0 0 2px; }
/* comparison: one line per cell; the Scout hero cell is the one allowed to wrap */
.compare--six{ min-width:1240px; }
.compare--six col.c-label{ width:22%; } .compare--six col.c-opt{ width:15.6%; }
.compare--six th, .compare--six td{ padding:14px 14px; white-space:nowrap; }
.compare--six thead th{ white-space:normal; }
.compare--six .yes, .compare--six .no, .compare--six .mid{ font-size:14px; padding:4px 9px; white-space:nowrap; }
.compare--six .compare__price td, .compare--six .compare__price td small{ white-space:normal; }
.compare--six .compare__hero td.compare__scout, .compare--six .compare__hero td.compare__scout .yes{ white-space:normal; }
.compare--six{ min-width:1096px; }
.compare--six col.c-label{ width:21%; } .compare--six col.c-opt{ width:15.8%; }
.compare--six th, .compare--six td{ padding:13px 12px; }
.compare--six tbody th{ font-size:14.5px; }
.compare--six .yes, .compare--six .no, .compare--six .mid{ font-size:13px; padding:3px 7px; letter-spacing:-.005em; }
.compare--six td.compare__scout{ white-space:normal; }
.compare--six td.compare__scout .yes{ white-space:normal; }
@media (min-width: 1240px){ #compare .compare-wrap{ margin-inline:-52px; } .compare--six{ min-width:1200px; } }
.compare--six tbody th{ font-size:14px; }
.compare--six .yes, .compare--six .no, .compare--six .mid{ padding:3px 6px; }
.compare--six col.c-label{ width:20%; } .compare--six col.c-opt{ width:15.25%; } .compare--six col.c-opt:nth-child(2){ width:19%; }
.compare--six col.c-label{ width:22.5%; } .compare--six col.c-opt{ width:14.9%; } .compare--six col.c-opt:nth-child(2){ width:17.9%; }

/* deal bar */
.dealbar{ position:sticky; top:0; z-index:45; background:var(--ink); color:#E9EEEC; border-bottom:1px solid rgba(255,255,255,.08); }
.dealbar[hidden]{ display:none; }
.dealbar__inner{ display:flex; align-items:center; gap:16px; padding-block:9px; }
.dealbar__text{ margin:0; font-size:14.5px; line-height:1.4; flex:1; min-width:0; }
.dealbar__text strong{ color:var(--gold-lit); font-weight:600; }
.dealbar__text [data-seats-line]{ color:var(--gold-lit); white-space:nowrap; }
.dealbar__cta{ flex:none; font-size:13.5px; font-weight:600; color:var(--ink); background:var(--gold); padding:7px 14px; border-radius:999px; text-decoration:none; }
.dealbar__cta:hover{ background:var(--gold-lit); }
.dealbar__close{ flex:none; appearance:none; background:transparent; border:0; color:#9AA6A2; font-size:22px; line-height:1; cursor:pointer; padding:4px 6px; }
.dealbar__close:hover{ color:#fff; }
@media (max-width:700px){ .dealbar__cta{ display:none; } .dealbar__text{ font-size:13.5px; } }

/* deal bar, gold */
.dealbar{ background:var(--gold); color:var(--ink); border-bottom:1px solid rgba(0,0,0,.12); }
.dealbar__text strong{ color:var(--ink); font-weight:700; }
.dealbar__text [data-seats-line]{ color:var(--ink); font-weight:600; }
.dealbar__cta{ background:var(--ink); color:#fff; }
.dealbar__cta:hover{ background:#1f3a33; }
.dealbar__text{ font-size:29px; line-height:1.25; }
.dealbar__inner{ padding-block:12px; }
.dealbar__cta{ font-size:16px; padding:10px 18px; }
@media (max-width:700px){ .dealbar__text{ font-size:20px; } }
.dealbar__text{ font-size:22px; }
@media (max-width:700px){ .dealbar__text{ font-size:16px; } }

/* ══════════════════════════════════════════════════════════
   v12 · THE MARK
   Geometry: media/brand/scout-mark.svg. The ring is 34 of the 48 unit
   field, so a box of 1.0026em carries a ring 1.06x cap height. Margins
   are solved from the Newsreader metrics so the clear space either side
   of the mark is 775 of 2000 units, the average of the two the letter O
   would have had. Chrome drops letter-spacing after an inline element,
   so the right margin carries it.
   ══════════════════════════════════════════════════════════ */

.brand__name, .foot__name{
  font-family:var(--f-display); font-weight:300; line-height:1;
  text-transform:uppercase; letter-spacing:.30em; margin-right:-.30em;
  --cap:.6700em; --box:1.0026em;
}
.brand__o{
  display:inline-block; overflow:visible;
  width:var(--box); height:var(--box);
  vertical-align:calc((var(--cap) - var(--box)) / 2);
  margin-left:-.0075em; margin-right:.3115em;
  color:var(--accent);
}
.brand__o svg{ width:100%; height:100%; display:block; overflow:visible; stroke-width:2.3; }
.foot__name .brand__o, .close__sign, .player .console__live i{ color:var(--accent-lit); }

/* ── the sample call, recorded ── */
.player .console__live i{
  width:14px; height:14px; border-radius:0; background:none; animation:none;
  -webkit-mask:var(--scout-mask) center/contain no-repeat; mask:var(--scout-mask) center/contain no-repeat;
  background-color:var(--pine);
}

/* ── the close, signed off ── */
.close__sign{ display:block; width:34px; height:34px; margin:0 auto 26px; overflow:visible; stroke-width:1.7; }



/* ══════════════════════════════════════════════════════════
   v13 · WATERMARK PREVIEW  ·  /?wm=1
   One fixed ghost of the mark, truly static: it does not move with the
   page and it does not repeat per band. difference blending gives it the
   right polarity on both grounds, dark on paper and light on ink, from a
   single element. Off unless the parameter is present.
   ══════════════════════════════════════════════════════════ */
.watermark{ display:none; }
[data-wm] .watermark{
  display:block; position:fixed; top:50%; left:50%;
  width:72vh; height:72vh; transform:translate(-50%,-50%) translateX(30vw);
  z-index:0; pointer-events:none; overflow:visible;
  color:#FFF; stroke-width:.45; opacity:.055;
  mix-blend-mode:difference;
}
@media (max-width: 900px){ [data-wm] .watermark{ display:none; } }


/* ══════════════════════════════════════════════════════════
   v14 · THE LOCK SCREEN
   Drawn in code, not photographed, so it stays sharp and carries the
   real mark. The four notifications follow the hero console's clock.
   ══════════════════════════════════════════════════════════ */
.lockband{ padding-top:clamp(48px,5.4vw,76px); padding-bottom:clamp(48px,5.4vw,76px); }
.lockband .split{ align-items:center; }
.lockband__stage{ display:flex; justify-content:center; }

.phone{
  width:300px; flex:none; border-radius:46px; padding:11px;
  background:linear-gradient(160deg,#24362E,#0A1611 46%,#1A2C24);
  box-shadow:0 40px 70px -34px rgba(11,26,20,.62), 0 0 0 1px rgba(11,26,20,.16);
}
.phone__screen{
  position:relative; border-radius:36px; overflow:hidden;
  background:
    radial-gradient(120% 62% at 76% 8%, rgba(196,154,78,.16), transparent 62%),
    radial-gradient(90% 48% at 12% 96%, rgba(196,154,78,.07), transparent 60%),
    #08130F;
  padding:16px 13px 22px; color:var(--on-dark);
}
.phone__notch{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:86px; height:20px; border-radius:999px; background:#05100C;
}
.phone__status{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12.5px; color:var(--on-dark-body); padding:0 6px 0 8px; height:20px;
  font-variant-numeric:tabular-nums;
}
.phone__bars{ display:inline-flex; align-items:flex-end; gap:2px; }
.phone__bars i{ width:3px; background:var(--on-dark-body); border-radius:1px; display:block; }
.phone__bars i:nth-child(1){ height:5px; } .phone__bars i:nth-child(2){ height:8px; } .phone__bars i:nth-child(3){ height:11px; }

.phone__clock{ text-align:center; padding:22px 0 26px; }
.phone__lock{ width:17px; height:17px; color:var(--on-dark-body); display:block; margin:0 auto 10px; }
.phone__time{
  display:block; font-family:var(--f-display); font-weight:200; font-size:70px; line-height:.94;
  letter-spacing:-.035em; color:var(--on-dark); font-variant-numeric:tabular-nums;
}
.phone__date{ display:block; margin-top:6px; font-size:14px; color:var(--on-dark-body); }

.phone__notes{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.note{
  background:rgba(241,244,241,.92); color:var(--text);
  border-radius:17px; padding:10px 12px 11px;
  display:grid; gap:2px;
}
.note__app{ display:flex; align-items:center; gap:7px; margin-bottom:3px; }
.note__icon{
  width:20px; height:20px; border-radius:6px; background:var(--ink); flex:none;
  display:flex; align-items:center; justify-content:center; color:var(--accent-lit);
}
.note__icon svg{ width:13px; height:13px; display:block; stroke-width:3.6; }
.note__name{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.note__when{ margin-left:auto; font-size:12px; color:var(--muted); }
.note__title{ font-size:14.5px; font-weight:600; color:var(--text); line-height:1.3; }
.note__body{ font-size:14px; color:var(--body); line-height:1.35; }

.phone__allset{
  margin:16px 0 0; text-align:center; font-family:var(--f-display); font-style:italic;
  font-size:17px; color:var(--accent-lit);
}

@media (max-width: 1040px){
  .lockband .split{ align-items:start; }
}
@media (max-width: 620px){
  .phone{ width:280px; border-radius:42px; padding:10px; }
  .phone__screen{ border-radius:33px; padding:14px 11px 20px; }
  .phone__time{ font-size:64px; }
}
/* night-stand figure: full-bleed ink band, image on the right fading into the band on its left */
.nightband{ background:var(--ink); overflow:hidden; }
.nightband__inner{ position:relative; max-width:var(--wrap); margin-inline:auto; display:flex; justify-content:flex-end; }
.nightband__img{ display:block; height:clamp(420px,56vw,680px); width:auto; max-width:100%; object-fit:cover;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 18%, #000 42%, #000 100%);
  mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 18%, #000 42%, #000 100%); }
@media (max-width:700px){ .nightband__inner{ justify-content:center; } .nightband__img{ height:auto; width:100%; -webkit-mask-image:none; mask-image:none; } }
.nightband__inner{ max-width:none; justify-content:flex-end; }
.nightband__img{ height:clamp(440px,52vw,640px); margin-right:max(0px, calc((100vw - 1500px) / 2)); }
/* night image beside the Meier quote: fades toward the quote and radially top and bottom */
.said--night .said__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,4vw,56px); align-items:center; }
.night{ position:relative; min-width:0; }
.night__img{ display:block; width:100%; height:auto; max-height:640px; object-fit:cover; object-position:center;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 30%, #000 60%), radial-gradient(ellipse 78% 62% at 55% 50%, #000 55%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 30%, #000 60%), radial-gradient(ellipse 78% 62% at 55% 50%, #000 55%, rgba(0,0,0,0) 100%); mask-composite:intersect; }
@media (max-width:900px){ .said--night .said__grid{ grid-template-columns:1fr; } .night__img{ max-height:520px; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, rgba(0,0,0,0) 100%); mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, rgba(0,0,0,0) 100%); } }
.night__img{ max-height:600px; -webkit-mask-composite:initial; mask-composite:initial;
  -webkit-mask-image:radial-gradient(ellipse 62% 66% at 60% 50%, #000 42%, rgba(0,0,0,.6) 62%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(ellipse 62% 66% at 60% 50%, #000 42%, rgba(0,0,0,.6) 62%, rgba(0,0,0,0) 100%); }
.night__img{ -webkit-mask-image:radial-gradient(ellipse 52% 56% at 58% 50%, #000 34%, rgba(0,0,0,.55) 60%, rgba(0,0,0,0) 96%);
  mask-image:radial-gradient(ellipse 52% 56% at 58% 50%, #000 34%, rgba(0,0,0,.55) 60%, rgba(0,0,0,0) 96%); }
/* night band: full-bleed scene flush to the right screen edge, fading across the page to the left edge */
.said--night{ position:relative; background:var(--ink); color:#E9EEEC; overflow:hidden; padding-block:clamp(72px,9vw,120px); isolation:isolate; }
.said--night .wrap{ position:relative; z-index:1; }
.said--night .said__grid{ display:block; }
.said--night .said__quote{ color:#F1F4F2; }
.said--night .said__who{ color:#F1F4F2; } .said--night .said__who span{ color:#AAB6B1; }
.said--night .said__face{ box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 0 0 7px var(--ink), 0 0 0 8px var(--gold-dim); }
.said--night::before{ display:none; }
.night__bg{ position:absolute; inset:0 0 0 auto; height:100%; width:auto; min-width:100%; max-width:none; object-fit:cover; object-position:right center; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 22%, rgba(0,0,0,.55) 46%, #000 68%), linear-gradient(to bottom, rgba(0,0,0,.35) 0%, #000 22%, #000 78%, rgba(0,0,0,.35) 100%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 22%, rgba(0,0,0,.55) 46%, #000 68%), linear-gradient(to bottom, rgba(0,0,0,.35) 0%, #000 22%, #000 78%, rgba(0,0,0,.35) 100%); mask-composite:intersect; }
.night__img, .night{ display:none; }
@media (max-width:900px){ .night__bg{ -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 30%, #000 70%); mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 30%, #000 70%); } }
/* night band: quote sits at the left margin, narrower measure, so the scene has room */
.said--night .said__fig{ margin-left:0; max-width:640px; }
.said--night .said__quote{ max-width:30ch; }
/* night band bleeds into the neighbouring sections: the scene fades over their backgrounds above and below */
.said--night{ overflow:visible; z-index:2; background:transparent; }
.said--night::after{ content:""; position:absolute; inset:0; background:var(--ink); z-index:-1; }
.night__bg{ top:-180px; bottom:-180px; height:calc(100% + 360px); z-index:0;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 22%, rgba(0,0,0,.55) 46%, #000 68%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 26%, #000 74%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 22%, rgba(0,0,0,.55) 46%, #000 68%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 26%, #000 74%, rgba(0,0,0,0) 100%); }
.said--night::after{ -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 18%, #000 82%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 18%, #000 82%, rgba(0,0,0,0) 100%); inset:-180px 0; }
.night__bg{ top:-120px; bottom:-120px; height:calc(100% + 240px); object-position:right 45%; }
.said--night::after{ inset:-120px 0; }
.said--night{ padding-block:clamp(88px,10vw,140px); }

/* NIGHT BAND v8: seamless bleed into neighbours, no section line, no ::after ink */
.said--night{ position:relative; color:#EAF0ED; overflow:visible; padding-block:clamp(140px,15vw,220px); isolation:isolate; z-index:2; }
.said--night::after{ content:none !important; display:none !important; }
.said--night .night__bg{ position:absolute; left:auto; right:0; top:-160px; bottom:-160px; height:calc(100% + 320px); width:auto; min-width:100%; max-width:none; object-fit:cover; object-position:right 42%; z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 24%, rgba(0,0,0,.6) 48%, #000 70%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 30%, #000 70%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 24%, rgba(0,0,0,.6) 48%, #000 70%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 30%, #000 70%, rgba(0,0,0,0) 100%); mask-composite:intersect; }
/* a soft ink wash only under the text half so the quote stays readable, also feathered top/bottom */
.said--night::before{ content:""; display:block; position:absolute; inset:-160px 0; z-index:-2;
  background:linear-gradient(to right, var(--ink) 0%, var(--ink) 40%, rgba(11,20,17,0) 72%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 26%, #000 74%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 26%, #000 74%, rgba(0,0,0,0) 100%); }
.said--night .wrap{ position:relative; z-index:1; }
.said--night .said__quote{ color:#F4F7F5; } .said--night .said__who{ color:#F4F7F5; } .said--night .said__who span{ color:#AEBAB4; }
@media (max-width:900px){ .said--night .night__bg{ object-position:center; -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0), #000 22%, #000 78%, rgba(0,0,0,0)); mask-image:linear-gradient(to bottom, rgba(0,0,0,0), #000 22%, #000 78%, rgba(0,0,0,0)); opacity:.5; } .said--night::before{ background:var(--ink); } }

/* NIGHT BAND v9: the photo is the section background; it emerges from the paper above and sinks into the ink below
   through gradients in the neighbours' exact colours, so there is no edge to see. */
.said--night{ position:relative; overflow:hidden; z-index:auto; color:#EAF0ED; padding-block:clamp(150px,16vw,240px);
  background-color:var(--ink);
  background-image:
    linear-gradient(to bottom, rgba(241,244,241,1) 0%, rgba(241,244,241,0) 26%, rgba(11,26,20,0) 72%, rgba(11,26,20,1) 100%),
    linear-gradient(to right, rgba(11,26,20,.62) 0%, rgba(11,26,20,.42) 30%, rgba(11,26,20,.08) 52%, rgba(11,26,20,0) 64%),
    url("media/night-wide@2x.jpg?v=9");
  background-repeat:no-repeat; background-size:auto 100%, auto 100%, cover; background-position:center, center, right 40%; }
.said--night::before, .said--night::after{ content:none !important; display:none !important; }
.said--night .night__bg{ display:none !important; }
.said--night .wrap{ position:relative; z-index:1; }
.said--night .said__quote{ color:#F4F7F5; } .said--night .said__who{ color:#F4F7F5; } .said--night .said__who span{ color:#AEBAB4; }
@media (max-width:900px){ .said--night{ background-position:center, center, 62% 46%; background-image:
    linear-gradient(to bottom, rgba(241,244,241,1) 0%, rgba(241,244,241,0) 22%, rgba(11,26,20,0) 76%, rgba(11,26,20,1) 100%),
    linear-gradient(to bottom, rgba(11,26,20,.55), rgba(11,26,20,.55)),
    url("media/night-wide.jpg?v=9"); } }