/* ClientCaptor — one stylesheet, no build step, no dependencies.
   Design system: measurement. Every number is mono. The caliper wraps
   measured spans only — never counts, never decoration. */

:root{
  --paper:#F7F7F4;
  --ink:#16181A;
  --muted:#6B7176;
  --rule:#DEDFDA;
  --panel:#EFEFEA;
  --read:#0F5C4E;   /* good reading, links, CTAs */
  --flag:#B01F13;   /* failing reading ONLY */
  --read-soft:#A7CCC3;

  --disp:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --wrap:min(1280px,92vw);
  --measure:66ch;
  --pad-y:clamp(2.6rem,6vw,4.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--disp);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--read);text-underline-offset:.15em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--read);outline-offset:3px}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:var(--paper);padding:.6rem 1rem}

/* ---------- type ---------- */
.lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.025em;line-height:1.06}
h1{font-size:clamp(2.3rem,6.2vw,4.5rem);letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.85rem)}
h4{font-size:1.15rem}
p{margin:0 0 1rem;max-width:var(--measure)}
.lede{font-size:clamp(1.05rem,1.6vw,1.24rem);color:var(--muted);max-width:52ch}
.num{font-family:var(--mono);font-weight:700;letter-spacing:-.03em}
.good{color:var(--read)}
.bad{color:var(--flag)}
.strike{text-decoration:line-through;text-decoration-thickness:2px}
hr{border:0;border-top:1px solid var(--rule);margin:0}
.rule-hard{border:0;border-top:2px solid var(--ink);margin:0}

/* ---------- the mark ---------- */
.mark{display:block;flex:none}

/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:20;background:var(--paper)}
/* The beam IS the caliper, so it spans exactly what its jaws span — the content
   width, not the full bleed. A full-width rule with inset jaws reads as a
   mistake, because it is one. */
.mast .wrap{position:relative;display:flex;align-items:center;gap:1.2rem;
  padding:.8rem 0 .75rem;border-bottom:2px solid var(--ink)}
.mast .wrap::before,.mast .wrap::after{content:"";position:absolute;bottom:-13px;
  width:2px;height:13px;background:var(--ink)}
.mast .wrap::before{left:0}
.mast .wrap::after{right:0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand .wm{font-weight:700;font-size:1.24rem;letter-spacing:-.03em;
  display:inline-block}   /* one flex item — the gap must not split the name */
.brand em{font-style:normal;color:var(--read)}
.brand .mark{margin-bottom:2px}
.mast nav{margin-left:auto;display:none;gap:1.6rem;align-items:center}
.mast nav a{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--muted)}
.mast nav a:hover{color:var(--ink)}
.btn-sm{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  background:var(--ink);color:var(--paper)!important;padding:.6rem .95rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;font-weight:700}
.btn-sm:hover{background:var(--read);color:#fff!important}
@media(min-width:900px){.mast nav{display:flex}}
@media(max-width:899px){
  .mast .wrap{flex-wrap:wrap;padding-bottom:.45rem}
  .mast .btn-sm{margin-left:auto}
  .mast nav{display:flex;order:3;width:100%;margin:.3rem 0 0;gap:1rem;
    padding:0 0 .15rem;justify-content:center;
    overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mast nav a{white-space:nowrap}
}

/* ---------- THE CALIPER DEVICE ----------
   Wraps a measured span. Beam + two jaws + ticks. */
.cal{position:relative;padding-top:2.1rem}
.cal::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--ink)}
.cal .jaw{position:absolute;top:0;width:6px;height:28px;background:var(--ink)}
.cal .jaw-l{left:0}
.cal .jaw-r{right:0}
.cal .ticks{position:absolute;top:10px;left:8px;right:8px;height:9px;
  background:repeating-linear-gradient(to right,
    var(--muted) 0 2px, transparent 2px calc(100% / var(--ticks,8)))}
.cal--sm{padding-top:1.5rem}
.cal--sm::before{height:4px}
.cal--sm .jaw{width:4px;height:16px}
.cal--sm .ticks{top:7px;height:6px}
.cal--light::before,.cal--light .jaw{background:var(--read-soft)}

@keyframes jawIn{from{transform:translateX(48px);opacity:0}to{transform:none;opacity:1}}
.cal .jaw-r{animation:jawIn .75s cubic-bezier(.2,.85,.25,1) both}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cal .jaw-r{animation:none}
  *{transition:none!important}
}

/* the reading inside a caliper */
.reading{display:flex;align-items:flex-end;flex-wrap:wrap;gap:.5rem .9rem;
  padding:.9rem 1.1rem 0}
.reading .from{font-size:clamp(1.3rem,3vw,1.9rem);opacity:.75}
.reading .arrow{font-family:var(--mono);color:var(--muted);padding-bottom:.35rem}
.reading .to{font-size:clamp(2.4rem,6.5vw,3.6rem);line-height:.9}
.reading .unit{font-family:var(--mono);font-size:.85rem;color:var(--muted);
  padding-bottom:.5rem}
.cal-note{font-family:var(--mono);font-size:.72rem;line-height:1.5;
  color:var(--muted);padding:.9rem 1.1rem 0;max-width:52ch}

/* ---------- layout ---------- */
.sec{padding:var(--pad-y) 0}
.two{display:grid;gap:2.2rem}
@media(min-width:960px){.two{grid-template-columns:1fr 1fr;gap:4rem}}
/* Headline and video side by side; the reading spans the full width beneath
   them, so the caliper beam measures the whole hero rather than sitting in a
   column. Mobile stacks in the same order. */
.hero{padding-bottom:0}
@media(max-width:620px){.hero{padding-top:1.6rem}}


.hero-gauge{margin-top:clamp(2.2rem,5vw,3.4rem);
  padding-bottom:clamp(2.6rem,6vw,4.5rem)}
.gauge-row{display:grid;gap:1rem;margin-top:.9rem}
@media(max-width:899px){
  .gauge-row{text-align:center}
  .gauge-row .reading{justify-content:center}
  .gauge-side .cal-note{margin-inline:auto}
  .hero-gauge .lab{text-align:center}
}
@media(min-width:900px){
  .gauge-row{grid-template-columns:1fr 1fr;gap:2.5rem;align-items:end;
    justify-items:center}
  .gauge-read,.gauge-side{width:100%;max-width:25rem}
}
.gauge-read .reading{padding:0;margin:.5rem 0 0}
.gauge-side .cal-note{margin:0;padding:0}
.gauge-side .cal-cta{margin:.8rem 0 0}
.hero-gauge .cal{padding-top:1.7rem}
/* Sized so the headline lands in two lines at phone width. Both the type and
   the container scale with vw, so the line count holds as the screen grows. */
.hero h1{margin:.75rem 0 0;max-width:24ch;
  font-size:clamp(1.35rem,6.55vw,3.05rem);letter-spacing:-.035em;line-height:1.06}
@media(min-width:620px){.hero h1{font-size:clamp(2.2rem,3.9vw,3.05rem)}}
/* One line at phone width, with ~18px of headroom at every common size so
   rounding differences between browsers can't tip it over. */
.doors-head h2{font-size:clamp(1.15rem,5.6vw,2.4rem);letter-spacing:-.032em;
  line-height:1.1;white-space:nowrap}
@media(min-width:620px){
  .doors-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);white-space:normal}
}
@media(min-width:620px){.doors-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}}
.hero h1 em{font-style:normal;color:var(--read)}
.geo{color:var(--read);margin-bottom:0}

/* ---------- doors ---------- */
.doors-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.5rem;
  padding-bottom:.8rem;border-bottom:2px solid var(--ink)}
.doors-head .lab{margin-left:auto}
.doors{display:grid;grid-template-columns:1fr}
@media(min-width:700px){.doors{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.doors{grid-template-columns:repeat(4,1fr)}}
.door{display:flex;flex-direction:column;gap:.5rem;padding:1.6rem 1.3rem 1.5rem;
  text-decoration:none;color:inherit;border-bottom:1px solid var(--rule);
  transition:background .15s ease}
.door:hover,.door:focus-visible{background:var(--panel)}
@media(max-width:699px){.door{padding-left:0;padding-right:0}}
@media(min-width:700px){.door{border-right:1px solid var(--rule)}}
@media(min-width:1080px){.door:last-child{border-right:0}}
.door h3{color:var(--ink)}
.door .benefit{color:var(--read);font-size:1.02rem;font-weight:500;margin:0}
.door p{color:var(--muted);font-size:.94rem;margin:0;flex:1}
.door .read{font-family:var(--mono);font-weight:700;font-size:1.35rem;
  letter-spacing:-.02em;color:var(--ink);margin-top:.6rem}
.door .go{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- proof strip (counts — never the caliper) ---------- */
.proof{background:var(--ink);color:var(--paper);padding:clamp(2rem,4vw,2.8rem) 0}
.proof .lab{color:#9AA3A1}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1rem;margin-top:1.2rem}
@media(min-width:860px){.proof-grid{grid-template-columns:repeat(4,1fr)}}
.stat b{display:block;font-family:var(--mono);font-weight:700;
  font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.04em;line-height:1}
.stat span{display:block;font-size:.86rem;color:#9AA3A1;margin-top:.35rem}

/* ---------- lists ---------- */
.nots{list-style:none;margin:0;padding:0}
.nots li{padding:.75rem 0;border-bottom:1px solid var(--rule)}
.nots li b{font-weight:600}
.nots li span{color:var(--muted)}
.nots li::before{content:"— ";font-family:var(--mono);color:var(--flag)}

/* ---------- case ---------- */
.case-reads{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1.4rem;margin:1.6rem 0}
.case-reads .num{display:block;font-size:1.45rem;color:var(--read);padding-top:.55rem}
.case-reads .lab{display:block;margin-top:.2rem;font-size:.62rem}

/* ---------- steps ---------- */
.steps{display:grid;gap:1.6rem}
@media(min-width:840px){.steps{grid-template-columns:repeat(3,1fr);gap:2rem}}
.step{border-top:2px solid var(--ink);padding-top:1rem}
.step p{color:var(--muted);font-size:.95rem;margin:.4rem 0 0}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;font-size:.94rem}
th,td{text-align:left;padding:.7rem .5rem;border-bottom:1px solid var(--rule);
  vertical-align:top}
th{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:400;
  border-bottom:2px solid var(--ink)}
td:first-child{font-weight:600}
td.n{font-family:var(--mono);white-space:nowrap}

/* ---------- cta ---------- */
.cta{background:var(--read);color:#fff;padding:clamp(2.6rem,6vw,4.5rem) 0}
.cta .lab{color:var(--read-soft)}
.cta h2{margin:.9rem 0 .7rem;max-width:18ch}
.cta p{color:#CFE3DD;max-width:44ch}
.btn{display:inline-block;background:#fff;color:var(--read)!important;
  font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:.9rem 1.5rem;text-decoration:none;border:2px solid #fff}
.btn:hover{background:transparent;color:#fff!important}
.cta small{display:block;margin-top:1.1rem;font-family:var(--mono);
  font-size:.72rem;color:var(--read-soft)}

/* ---------- footer ---------- */
footer{padding:2.2rem 0 3rem;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between}
footer a{color:var(--muted)}

@media print{
  .mast,.cta,.btn{display:none}
  body{font-size:11pt}
}


/* ---------- THE PRICE SCALE ----------
   Caliper spans on a calibrated axis. Ticks are evenly spaced but
   non-linear in value, so a $500 range stays visible next to a $60k one. */
.scale{margin-top:2rem;border-top:2px solid var(--ink)}
.axis{position:relative;height:2.3rem;margin-left:var(--label-w);
  border-bottom:2px solid var(--ink)}
.axis i{position:absolute;left:var(--x);top:0;width:2px;height:.5rem;
  background:var(--ink);transform:translateX(-1px)}
.axis i span{position:absolute;top:.72rem;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.62rem;color:var(--muted);white-space:nowrap}
.axis i:first-child span{left:0;transform:none}
.axis i:last-child span{left:auto;right:0;transform:none}
/* crowded on a phone — keep $0, $5k, $10k, $60k */
@media(max-width:819px){
  .axis i:nth-child(2) span,.axis i:nth-child(3) span,
  .axis i:nth-child(6) span{display:none}
}
@media(min-width:820px){.axis{height:2.6rem}.axis i span{font-size:.68rem}}
:root{--label-w:0}
@media(min-width:820px){:root{--label-w:300px}}

.tier{border-bottom:1px solid var(--rule)}
.tier > summary{list-style:none;cursor:pointer;padding:1.1rem 0 1.2rem;
  display:grid;gap:.15rem .5rem;position:relative}
.tier > summary::-webkit-details-marker{display:none}
.tier > summary:hover{background:var(--panel)}
.tier > summary:focus-visible{outline:2px solid var(--read);outline-offset:-2px}
.t-name{font-weight:600;font-size:1.14rem;letter-spacing:-.015em}
.t-name em{font-style:normal;color:var(--read);font-weight:700;padding-left:.1em}
.t-what{color:var(--muted);font-size:.93rem}

.t-span{position:relative;display:block;height:3.1rem;margin-top:.7rem}
.t-span .bar{position:absolute;left:var(--from);right:calc(100% - var(--to));
  top:0;height:5px;background:var(--ink)}
.t-span .bar::before,.t-span .bar::after{content:"";position:absolute;top:0;
  width:5px;height:22px;background:var(--ink)}
.t-span .bar::before{left:0}
.t-span .bar::after{right:0}
.t-span .lo,.t-span .hi{position:absolute;top:1.75rem;font-family:var(--mono);
  font-weight:700;font-size:.9rem;color:var(--read);white-space:nowrap}
/* On a phone the bars are too short to anchor both values to their ends,
   so read them as one range at the bar's left edge instead. */
.t-span .lo{left:var(--from)}
.t-span .hi{left:var(--from);padding-left:3.9rem}
.t-span .hi::before{content:"– ";color:var(--muted);font-weight:400}
@media(min-width:820px){
  .t-span .hi{left:var(--to);padding-left:0;transform:translateX(-100%)}
  .t-span .hi::before{content:none}
}

@media(min-width:820px){
  .tier > summary{grid-template-columns:var(--label-w) 1fr;
    grid-template-areas:"name span" "what span";align-items:start}
  .t-name{grid-area:name}
  .t-what{grid-area:what;padding-right:1.5rem}
  .t-span{grid-area:span;margin-top:.2rem;align-self:center}
}

/* the detail opens BENEATH the bar — the scale never shifts */
.t-detail{display:grid;gap:1.4rem;background:var(--panel);padding:1.3rem 1.4rem;
  margin-bottom:1.1rem}
@media(min-width:820px){.t-detail{grid-template-columns:1fr 220px;gap:2.5rem}}
.t-detail ul{margin:.5rem 0 0;padding-left:1.1rem}
.t-detail li{margin:.35rem 0;font-size:.94rem}
.t-detail li::marker{color:var(--muted)}
.t-num{font-family:var(--mono);font-weight:700;font-size:1.15rem;margin:.2rem 0 1.1rem}

/* ---------- dark mode ----------
   Tokens flip. Two exceptions need explicit handling: the proof strip
   inverts to a light panel (fine), and the CTA uses the green as a
   BACKGROUND, so its text colour must flip too or it fails contrast. */
:root{--on-read:#ffffff}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#131517;
    --ink:#ECEDE8;
    --muted:#98A09C;
    --rule:#2A2E31;
    --panel:#1B1E20;
    --read:#5FBFA8;      /* lifted for contrast on dark */
    --flag:#E4776A;      /* lifted for contrast on dark */
    --read-soft:#123C33;
    --on-read:#0E1F1A;   /* text ON the green panel */
  }
  .proof{background:var(--panel);color:var(--ink);
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .proof .lab,.stat span{color:var(--muted)}
  .stat b{color:var(--ink)}
  .cta{color:var(--on-read)}
  .cta h2{color:var(--on-read)}
  .cta p{color:#14322B}
  .cta .lab{color:#14322B}
  .cta small{color:#14322B}
  .btn{background:var(--on-read);color:var(--read)!important;border-color:var(--on-read)}
  .btn:hover{background:transparent;color:var(--on-read)!important}
  .btn-sm:hover{color:var(--on-read)!important}
  .mast{background:var(--paper)}
}


/* ---------- THE ASSISTANT ----------
   Mobile: a full-height sheet, not a floating box. Desktop: a panel.
   Bot messages are plain text on paper, not bubbles — reads editorial
   rather than like every other chat widget. */
.cc-launch{position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;
  display:grid;place-items:center;width:4.1rem;height:4.1rem;
  background:var(--read);color:#fff;border:0;cursor:pointer;padding:0;
  box-shadow:0 8px 26px rgba(0,0,0,.28)}
.cc-launch svg{width:25px;height:25px;flex:none}
.cc-launch span{position:absolute;left:-9999px}   /* label kept for screen readers */
.cc-launch:hover{background:var(--ink)}
.cc-open .cc-launch{display:none}

/* A half sheet, not a takeover — the site stays visible behind it.
   Anchored to the bottom so the input sits next to the keyboard; JS then
   lifts it above the keyboard via visualViewport (see chat.js). */
.cc-panel{position:fixed;z-index:61;display:flex;flex-direction:column;
  background:var(--paper);left:0;right:0;bottom:0;top:auto;
  border:0;border-top:2px solid var(--ink);
  height:32rem;max-height:74dvh;
  box-shadow:0 -14px 44px rgba(0,0,0,.24)}
.cc-panel[hidden]{display:none}


.cc-head{display:flex;align-items:center;gap:.75rem;flex:none;
  padding:.9rem 1rem;border-bottom:2px solid var(--ink);background:var(--paper)}
.cc-mk{display:flex;color:var(--ink)}
.cc-mk svg{width:22px;height:22px}
.cc-h-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.cc-h-txt b{font-size:.98rem;font-weight:600;letter-spacing:-.01em}
.cc-h-txt i{font-style:normal;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cc-x{margin-left:auto;background:none;border:0;color:var(--muted);
  cursor:pointer;padding:.4rem;display:flex}
.cc-x:hover{color:var(--ink)}

.cc-log{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;min-height:3rem;
  padding:.9rem 1rem 1.2rem;display:flex;flex-direction:column;gap:1.05rem}
/* Bottom-anchor a short conversation so it sits above the input rather than
   stranded at the top. Doesn't apply while the opening menu is showing —
   a menu should start at its first item. */
.cc-log > :first-child:not(.cc-choice){margin-top:auto}
.cc-msg{font-size:1rem;line-height:1.6;max-width:34rem}
.cc-bot{color:var(--ink)}
.cc-you{align-self:flex-end;background:var(--ink);color:var(--paper);
  padding:.6rem .85rem;max-width:85%;font-size:.95rem}
.cc-wait{color:var(--muted);letter-spacing:.35em}

/* staged progress */
.cc-prog{display:flex;flex-direction:column;gap:.5rem}
.cc-prog-bar{display:block;height:3px;background:var(--rule);position:relative;overflow:hidden}
.cc-prog-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,16%);
  background:var(--read);transition:width .3s ease}
.cc-prog-t{font-family:var(--mono);font-size:.72rem;color:var(--muted)}

/* chips — one scrolling row, never wrapping */
.cc-chips{flex:none;display:flex;gap:.4rem;overflow-x:auto;padding:.15rem 1rem .8rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cc-chips::-webkit-scrollbar{display:none}
/* With a mouse there is no swipe and the scrollbar is hidden, so off-screen
   chips are simply unreachable. Wrap them instead. */
@media(pointer:fine){
  .cc-chips{flex-wrap:wrap;overflow-x:visible;row-gap:.35rem}
  .cc-chip{flex:0 0 auto}
}
.cc-chip{flex:none;background:transparent;border:1px solid var(--rule);
  border-radius:999px;cursor:pointer;font-family:var(--mono);font-size:.68rem;
  padding:.5rem .8rem;color:var(--ink);white-space:nowrap}
.cc-chip:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.cc-form{flex:none;display:flex;align-items:stretch;gap:.5rem;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--rule);background:var(--paper)}
.cc-input{flex:1;min-width:0;border:1px solid var(--rule);background:var(--panel);
  padding:.85rem .9rem;font:inherit;font-size:16px;color:var(--ink)}
.cc-input:focus{outline:none;border-color:var(--ink);background:var(--paper)}
.cc-send{flex:none;width:3.1rem;border:0;background:var(--ink);color:var(--paper);
  cursor:pointer;display:grid;place-items:center}
.cc-send:hover:not(:disabled){background:var(--read)}
.cc-send:disabled{opacity:.4;cursor:default}

/* ---------- the report ---------- */
.cc-report{border:2px solid var(--ink);background:var(--paper)}
.cc-r-head{padding:.85rem 1rem;border-bottom:1px solid var(--rule)}
.cc-r-url{display:block;font-family:var(--mono);font-size:.8rem;
  color:var(--ink);word-break:break-all;font-weight:700}
.cc-r-pills{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.cc-r-pills b{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.25rem .5rem;border:1px solid var(--rule)}
.p-high{color:#fff;background:var(--flag);border-color:var(--flag)!important}
.p-med{color:var(--ink)}
.p-low{color:var(--muted)}

.cc-f{padding:.85rem 1rem;border-bottom:1px solid var(--rule);
  border-left:4px solid var(--rule);display:flex;flex-direction:column;gap:.3rem}
.cc-s-high{border-left-color:var(--flag)}
.cc-s-medium{border-left-color:#C08A2E}
.cc-s-ok{border-left-color:var(--read)}
.cc-f b{font-size:.95rem;line-height:1.35;font-weight:600}
.cc-f-d{font-size:.88rem;color:var(--muted);line-height:1.5}
.cc-f-i{font-size:.88rem;line-height:1.5;color:var(--read);font-weight:500}
.cc-f code{font-family:var(--mono);font-size:.7rem;background:var(--panel);
  padding:.35rem .45rem;word-break:break-all;color:var(--ink);align-self:flex-start}

/* value calculator — visitor supplies the numbers */
.cc-calc{padding:1rem;background:var(--panel);border-bottom:1px solid var(--rule)}
.cc-calc-h{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .7rem}
.cc-calc-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.cc-calc-row label{display:flex;flex-direction:column;gap:.3rem}
.cc-calc-row span{font-size:.76rem;color:var(--muted)}
.cc-calc-row input{border:1px solid var(--rule);background:var(--paper);
  padding:.6rem .55rem;font-family:var(--mono);font-size:16px;color:var(--ink);
  width:100%;min-width:0}
.cc-calc-row input:focus{outline:none;border-color:var(--ink)}
.cc-calc-out{margin:.8rem 0 0;font-size:.92rem;line-height:1.5;color:var(--ink)}
.cc-calc-out .cc-big{font-family:var(--mono);color:var(--read);font-size:1.15rem}

.cc-caveat{font-family:var(--mono);font-size:.68rem;line-height:1.55;
  color:var(--muted);margin:0;padding:.85rem 1rem;max-width:none}
.cc-cta{display:block;text-align:center;background:var(--read);color:#fff;
  text-decoration:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.9rem;font-weight:700}
.cc-cta:hover{background:var(--ink);color:#fff}

/* desktop: a panel rather than a sheet */
@media(min-width:700px){
  /* Height follows content instead of a fixed box, so a short conversation
     isn't surrounded by empty panel. Grows until the cap, then the log scrolls. */
  .cc-panel{inset:auto 1.25rem 1.25rem auto;width:27rem;
    height:auto;max-height:min(38rem,88vh);
    border:2px solid var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.18)}
  .cc-log{flex:0 1 auto}
  .cc-open .cc-launch{display:none}
  .cc-msg{font-size:.95rem}
}
@media print{.cc-launch,.cc-panel{display:none}}

/* two-path opener */
.cc-choice{display:flex;flex-direction:column;gap:.5rem}
.cc-opt{display:flex;flex-direction:column;gap:.2rem;text-align:left;
  background:var(--paper);border:2px solid var(--ink);cursor:pointer;
  padding:.7rem .85rem;color:var(--ink);text-decoration:none;font:inherit;width:100%}
.cc-opt:hover{background:var(--ink);color:var(--paper)}
.cc-opt b{font-size:.98rem;font-weight:600;letter-spacing:-.01em}
.cc-opt span{font-size:.83rem;line-height:1.4;color:var(--muted)}
.cc-opt:hover span,.cc-opt:hover i{color:var(--read-soft)}
.cc-opt i{font-style:normal;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--read);margin-top:.15rem}
.cc-opt-alt{border-color:var(--rule)}
.cc-opt-alt:hover{background:var(--read);border-color:var(--read);color:#fff}
.cc-opt-alt:hover span{color:#D6EAE3}
.cc-opt-alt:hover i{color:#fff}

/* hero trigger */
.cal-cta{margin:.9rem 0 0}
.cal-cta a{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;text-decoration:none;
  border-bottom:2px solid var(--read);padding-bottom:.15rem}
.cal-cta a:hover{color:var(--ink);border-color:var(--ink)}


/* ---------- MOBILE ALIGNMENT FIXES ---------- */

/* 1. Nav strip: give the scroll row real end padding so the last item isn't
      welded to the screen edge, and fade the overflow so it reads as scrollable. */
@media(max-width:899px){
  /* Centred, and sized so all four fit without scrolling on a 360px phone. */
  .mast nav a{font-size:.62rem;letter-spacing:.08em}
}

/* 2. Geo line: break between the two halves, never mid-phrase. */
.geo span{white-space:nowrap}
@media(max-width:560px){
  .geo{letter-spacing:.1em;font-size:.62rem;line-height:1.7}
}

/* 3. Long mono labels shouldn't run to the edge on a phone. */
@media(max-width:560px){
  .lab{letter-spacing:.1em}
  .cal-note{font-size:.68rem}
}

/* 4. Section label under a heading: left-aligned on mobile, not pushed right
      where it overflows. */
@media(max-width:820px){
  .doors-head{display:block}
  .doors-head .lab{margin:.5rem 0 0;letter-spacing:.09em;font-size:.62rem}
}

/* 5. The floating launcher was sitting on top of page text. Reserve room. */
@media(max-width:699px){
  body{padding-bottom:4.5rem}
}

/* ---------- using vs owning ---------- */
.compare{display:grid;gap:0;border-top:2px solid var(--ink)}
@media(min-width:820px){.compare{grid-template-columns:1fr 1fr}}
.cmp{padding:1.4rem 1.3rem 1.5rem;border-bottom:1px solid var(--rule)}
@media(min-width:820px){
  .cmp-a{border-right:1px solid var(--rule);padding-left:0}
  .cmp-b{padding-right:0}
}
@media(max-width:819px){.cmp{padding-left:0;padding-right:0}}
.cmp ul{list-style:none;margin:.9rem 0 0;padding:0}
.cmp li{padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:.95rem;
  line-height:1.5;display:flex;gap:.6rem}
.cmp li:last-child{border-bottom:0}
.cmp-a li{color:var(--muted)}
.cmp-a li::before{content:"\2014";color:var(--flag);flex:none}
.cmp-b li::before{content:"\2014";color:var(--read);flex:none}
.cmp-b .lab{color:var(--read)}
.cmp-foot{margin-top:1.6rem;max-width:60ch;color:var(--muted)}
.cmp-foot a{white-space:nowrap}

/* voice option gets the accent treatment — it's the one we want tapped */
.cc-opt-voice{border-color:var(--read)}
.cc-opt-voice i{color:var(--read)}
.cc-opt-voice:hover{background:var(--read);border-color:var(--read);color:#fff}
.cc-opt-voice:hover span{color:#D6EAE3}
.cc-opt-voice:hover i{color:#fff}

/* real speed result, patched in above the findings */
.cc-speed{border-bottom:1px solid var(--rule);padding:.9rem 1rem;
  display:flex;flex-direction:column;gap:.4rem}
.cc-speed-wait{gap:.5rem}
.cc-prog-slow{display:block;height:3px;background:var(--rule);position:relative;overflow:hidden}
.cc-prog-slow::after{content:"";position:absolute;top:0;bottom:0;width:40%;
  background:var(--read);animation:ccSlide 1.4s ease-in-out infinite}
@keyframes ccSlide{0%{left:-40%}100%{left:100%}}
@media(prefers-reduced-motion:reduce){.cc-prog-slow::after{animation:none;left:0;width:100%}}
.cc-speed-head{display:flex;align-items:center;gap:.7rem}
.cc-speed-score{font-family:var(--mono);font-weight:700;font-size:1.5rem;
  border:2px solid currentColor;padding:.1rem .5rem;flex:none}
.cc-speed-score.good{color:var(--read)}
.cc-speed-score.mid{color:#C08A2E}
.cc-speed-score.bad{color:var(--flag)}
.cc-speed-v{font-size:.86rem;line-height:1.4;color:var(--muted)}
.cc-speed-row{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;
  padding:.25rem 0;border-bottom:1px solid var(--rule)}
.cc-speed-row span{color:var(--muted)}
.cc-speed-row b{font-family:var(--mono)}
.cc-speed-row b.good{color:var(--read)}
.cc-speed-row b.bad{color:var(--flag)}
.cc-speed-op{font-size:.84rem;color:var(--ink);padding-top:.4rem}
.cc-est{font-size:.84rem;line-height:1.5;color:var(--muted);margin:0 0 .8rem}
.cc-est b{color:var(--read);font-family:var(--mono)}

/* ---------- THE SITE CHECKER (a tool on the page, not a chat) ---------- */
.sc-form{display:flex;gap:.6rem;margin:1.8rem 0 0;max-width:34rem;flex-wrap:wrap}
.sc-input{flex:1;min-width:12rem;border:2px solid var(--ink);background:var(--paper);
  padding:.9rem 1rem;font:inherit;font-size:16px;color:var(--ink)}
.sc-input:focus{outline:none;background:var(--panel)}
.sc-btn{border:2px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:0 1.4rem}
.sc-btn:hover:not(:disabled){background:var(--read);border-color:var(--read);color:#fff}
.sc-btn:disabled{opacity:.45;cursor:default}
.sc-out{margin-top:1.4rem}
.sc-note{max-width:52ch;color:var(--muted)}

.sc-prog{display:flex;flex-direction:column;gap:.5rem;max-width:34rem}
.sc-prog-bar{display:block;height:3px;background:var(--rule);position:relative;overflow:hidden}
.sc-prog-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,16%);
  background:var(--read);transition:width .3s ease}
.sc-prog-t{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.sc-prog-slow{display:block;height:3px;background:var(--rule);position:relative;overflow:hidden}
.sc-prog-slow::after{content:"";position:absolute;top:0;bottom:0;width:40%;
  background:var(--read);animation:ccSlide 1.4s ease-in-out infinite}

.sc-report{border:2px solid var(--ink);background:var(--paper);max-width:46rem}
.sc-head{padding:1rem 1.1rem;border-bottom:1px solid var(--rule)}
.sc-url{display:block;font-family:var(--mono);font-size:.86rem;font-weight:700;word-break:break-all}
.sc-pills{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.sc-pills b{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.28rem .55rem;border:1px solid var(--rule)}
.sc-pills .p-high{color:#fff;background:var(--flag);border-color:var(--flag)}
.sc-pills .p-med{color:var(--ink)}
.sc-pills .p-low{color:var(--muted)}

.sc-speed{padding:.9rem 1.1rem;border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:.4rem}
.sc-speed-head{display:flex;align-items:center;gap:.8rem}
.sc-score{font-family:var(--mono);font-weight:700;font-size:1.7rem;
  border:2px solid currentColor;padding:.15rem .6rem;flex:none}
.sc-score.good{color:var(--read)} .sc-score.mid{color:#C08A2E} .sc-score.bad{color:var(--flag)}
.sc-verdict{font-size:.9rem;line-height:1.45;color:var(--muted)}
.sc-speed-row{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;
  padding:.3rem 0;border-bottom:1px solid var(--rule)}
.sc-speed-row span{color:var(--muted)}
.sc-speed-row b{font-family:var(--mono)}
.sc-speed-row b.good{color:var(--read)} .sc-speed-row b.bad{color:var(--flag)}
.sc-speed-op{font-size:.86rem;margin:.4rem 0 0}

.sc-f{padding:.9rem 1.1rem;border-bottom:1px solid var(--rule);
  border-left:4px solid var(--rule);display:flex;flex-direction:column;gap:.3rem}
.sc-s-high{border-left-color:var(--flag)}
.sc-s-medium{border-left-color:#C08A2E}
.sc-s-ok{border-left-color:var(--read)}
.sc-f b{font-size:.98rem;line-height:1.35}
.sc-d{font-size:.9rem;color:var(--muted);line-height:1.5}
.sc-i{font-size:.9rem;color:var(--read);font-weight:500;line-height:1.5}
.sc-f code{font-family:var(--mono);font-size:.72rem;background:var(--panel);
  padding:.3rem .45rem;word-break:break-all;align-self:flex-start}

.sc-calc{padding:1.1rem;background:var(--panel);border-bottom:1px solid var(--rule)}
.sc-est{font-size:.88rem;line-height:1.5;color:var(--muted);margin:.5rem 0 .9rem}
.sc-est b{color:var(--read);font-family:var(--mono)}
.sc-calc-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.sc-calc-row label{display:flex;flex-direction:column;gap:.3rem}
.sc-calc-row span{font-size:.78rem;color:var(--muted)}
.sc-calc-row input{border:1px solid var(--rule);background:var(--paper);padding:.6rem;
  font-family:var(--mono);font-size:16px;color:var(--ink);width:100%;min-width:0}
.sc-calc-out{margin:.9rem 0 0;font-size:.95rem;line-height:1.5}
.sc-calc-out .sc-big{font-family:var(--mono);color:var(--read);font-size:1.2rem}

.sc-caveat{font-family:var(--mono);font-size:.7rem;line-height:1.55;color:var(--muted);
  margin:0;padding:.8rem 1.1rem;max-width:none}
.sc-cta{display:block;text-align:center;background:var(--read);color:#fff;text-decoration:none;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.95rem;font-weight:700}
.sc-cta:hover{background:var(--ink);color:#fff}
.sc-cta-sub{font-size:.82rem;color:var(--muted);margin:0;padding:.8rem 1.1rem;max-width:none}

/* inline callback form — replaces the mailto card */
.cc-lead{display:flex;flex-direction:column;gap:.5rem;border:2px solid var(--ink);
  background:var(--paper);padding:.95rem}
.cc-lead-h{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .2rem}
.cc-lead input{border:1px solid var(--rule);background:var(--panel);
  padding:.75rem .8rem;font:inherit;font-size:16px;color:var(--ink);width:100%}
.cc-lead input:focus{outline:none;border-color:var(--ink);background:var(--paper)}
.cc-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}
.cc-l-send{border:0;background:var(--ink);color:var(--paper);cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:.85rem;margin-top:.15rem}
.cc-l-send:hover:not(:disabled){background:var(--read);color:#fff}
.cc-l-send:disabled{opacity:.5;cursor:default}
.cc-l-note-sm{font-family:var(--mono);font-size:.64rem;color:var(--muted);margin:.2rem 0 0}
.cc-voice-host{border:1px solid var(--rule);padding:.5rem;background:var(--panel)}

/* offered right after a handoff */
.cc-offer{display:flex;flex-direction:column;gap:.2rem;text-align:left;width:100%;
  background:var(--read);border:0;cursor:pointer;padding:.85rem .95rem;color:#fff;font:inherit}
.cc-offer:hover{background:var(--ink)}
.cc-offer b{font-size:.98rem;font-weight:600}
.cc-offer span{font-size:.85rem;color:#D6EAE3}


/* ---------- VIDEO FACADE ---------- */
.vid{position:relative;border:2px solid var(--ink);background:var(--ink);
  aspect-ratio:16/9;overflow:hidden}
.vid-play{display:block;width:100%;height:100%;padding:0;border:0;margin:0;
  background:none;cursor:pointer;position:relative;color:inherit;font:inherit}
.vid-poster{width:100%;height:100%;object-fit:cover;display:block;opacity:.94;
  transition:opacity .2s ease}
.vid-play:hover .vid-poster{opacity:1}
.vid-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:3.4rem;height:3.4rem;display:grid;place-items:center;
  background:rgba(15,92,78,.28);color:#fff;
  border:2px solid rgba(255,255,255,.9);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  transition:background .18s ease,transform .18s ease}
.vid-play:hover .vid-btn{background:var(--read);transform:translate(-50%,-50%) scale(1.05)}
.vid-btn svg{margin-left:2px}
.vid-meta{position:absolute;left:0;right:0;bottom:0;display:flex;
  flex-direction:column;gap:.1rem;text-align:left;padding:.7rem .85rem;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent)}
.vid-meta b{color:#fff;font-size:.92rem;font-weight:600}
.vid-meta i{font-style:normal;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:#B9C4C0}
.vid-el{width:100%;height:100%;display:block;background:#000}
@media(prefers-reduced-motion:reduce){.vid-btn,.vid-poster{transition:none}}

/* A notice stops someone using a feature, so it gets a block of its own —
   a tinted line was too easy to scroll past. */
.cc-notice{position:relative;max-width:100%;
  background:var(--flag);color:#fff;font-weight:500;line-height:1.5;
  padding:.8rem .9rem .8rem 2.6rem;border:0}
.cc-notice::before{content:"!";position:absolute;left:.85rem;top:.78rem;
  width:1.15rem;height:1.15rem;border-radius:50%;
  background:#fff;color:var(--flag);font-family:var(--mono);font-weight:700;
  font-size:.8rem;line-height:1.15rem;text-align:center}
.cc-pick{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .1rem}


/* ---------- DOOR CARDS ----------
   The poster carries the name and the metric, so no text block sits beneath it.
   Tapping the poster plays; everything else routes. */
.doors-sec{padding-top:clamp(1.6rem,4vw,2.6rem)}
.doors-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.4rem}
.doors-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.doors-sec .lede{margin:1rem 0 1.8rem}

/* D4: one featured card, three compact. Posters are 16:9 so the lead card
   wants width — stacking four of them two-up wastes it. */
.door-cards{display:grid;gap:1.4rem}
@media(min-width:960px){
  .door-cards{grid-template-columns:1.45fr 1fr;gap:1.8rem;align-items:start}
}
.door-minis{display:grid;gap:.8rem;align-content:start}

.door-mini{display:grid;gap:.15rem;text-decoration:none;color:inherit;
  border:2px solid var(--ink);padding:.95rem 1.05rem;background:var(--paper);
  transition:background .15s ease}
.door-mini:hover{background:var(--panel)}
.dm-name{font-weight:600;font-size:1.05rem;letter-spacing:-.015em;color:var(--ink)}
.dm-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.dm-metric{font-family:var(--mono);font-weight:700;font-size:1.2rem;
  color:var(--read);letter-spacing:-.02em;margin-top:.15rem}
.dm-go{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:.35rem}
.door-mini:hover .dm-go{color:var(--ink)}

.door-card{border:2px solid var(--ink);background:var(--paper);
  display:flex;flex-direction:column;overflow:hidden}
.dc-stage{position:relative;aspect-ratio:16/9;background:var(--ink)}
.dc-play{display:block;width:100%;height:100%;padding:0;border:0;margin:0;
  background:none;cursor:pointer;position:relative}
.dc-play img{width:100%;height:100%;object-fit:cover;display:block}
.dc-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:3.2rem;height:3.2rem;display:grid;place-items:center;color:#fff;
  background:rgba(15,92,78,.32);border:2px solid rgba(255,255,255,.92);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  transition:background .18s ease,transform .18s ease}
.dc-play:hover .dc-btn{transform:translate(-50%,-50%) scale(1.06)}
.dc-play:hover .dc-btn{background:var(--read)}
.dc-btn svg{margin-left:2px}
.dc-video{width:100%;height:100%;display:block;background:#000}

.dc-body{padding:1.1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.8rem}
.dc-calc .lab{margin:0 0 .6rem}
.dc-fields{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
/* Compact on a phone, but the inputs stay — the calculator is the point of
   the card. Only the working line is dropped; the maths still shows. */
@media(max-width:699px){
  .dc-body{padding:.8rem .9rem .95rem;gap:.55rem}
  .dc-calc .lab{margin:0 0 .45rem;font-size:.58rem}
  .dc-fields{gap:.5rem}
  .dc-fields span{font-size:.66rem;line-height:1.25}
  .dc-fields input{padding:.5rem .55rem;font-size:16px}
  .dc-out{display:none}
  .dc-sum{font-size:1.3rem;margin:.5rem 0 0}
  .dc-note{font-size:.84rem;line-height:1.45}
  .dc-go{font-size:.64rem}
}
.dc-fields label{display:flex;flex-direction:column;gap:.3rem}
.dc-fields span{font-size:.76rem;color:var(--muted);line-height:1.3}
.dc-fields input{border:1px solid var(--rule);background:var(--panel);
  padding:.6rem;font-family:var(--mono);font-size:16px;color:var(--ink);
  width:100%;min-width:0}
.dc-fields input:focus{outline:none;border-color:var(--ink);background:var(--paper)}
.dc-out{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin:.7rem 0 0}
.dc-sum{font-family:var(--mono);font-weight:700;font-size:1.45rem;
  color:var(--read);margin:.15rem 0 0;letter-spacing:-.02em}
.dc-note{font-size:.9rem;color:var(--muted);margin:0;line-height:1.5}
.dc-go{align-self:flex-start;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  text-decoration:none;border-bottom:2px solid var(--read);padding-bottom:.15rem}
.dc-go:hover{color:var(--ink);border-color:var(--ink)}

/* the live gauge now lives with the checker, where speed is the subject */
.check-gauge{margin:1.4rem 0 1.8rem}
.check-gauge .reading{padding:.7rem 0 0}
.check-gauge .cal-note{margin-top:.7rem}

/* straight-to-a-person callout, when the agent hands off on desktop */
.cc-callout{background:var(--read);color:#fff;padding:.9rem 1rem;
  display:flex;flex-direction:column;gap:.25rem}
.cc-callout .lab{color:#CFE3DD;margin:0}
.cc-callout a{font-family:var(--mono);font-weight:700;font-size:1.5rem;
  color:#fff;text-decoration:none;letter-spacing:-.02em}
.cc-callout span{font-size:.85rem;color:#D6EAE3;line-height:1.45}

/* The film sits after the doors: whoever routed themselves has already gone,
   whoever is still deciding gets the whole argument. */
.film-grid{display:grid;gap:1.6rem;align-items:center}
@media(min-width:900px){.film-grid{grid-template-columns:1fr 1.15fr;gap:3rem}}
.film-copy h2{margin:.6rem 0 .8rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.film-copy .lede{margin:0}
.film .vid{border-width:2px}


/* One outcome line under the headline. Concrete before any process word, and
   it seeds "9pm call" so the film's motif isn't assumed knowledge later. */
.hero-out{margin:1.1rem 0 0;max-width:46ch;font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:1.55;color:var(--muted)}
@media(max-width:620px){.hero-out{font-size:1rem;margin-top:.9rem}}

/* The doors heading is an instruction, not a second headline - it must not
   compete with the h1 sitting directly above it. */
.doors-head{align-items:baseline}
.doors-head h2{font-size:clamp(1.3rem,4.6vw,1.9rem)!important;white-space:normal!important;
  letter-spacing:-.025em}
@media(min-width:620px){.doors-head h2{font-size:clamp(1.4rem,2.6vw,1.9rem)!important}}