/* Fonts: self-hosted Latin subsets from Google Fonts (SIL OFL 1.1, licences in fonts/). No request leaves this site.
   Newsreader is variable (weight + optical size) so headings render like the design; Public Sans is variable in weight. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/newsreader-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/newsreader-latin-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/public-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Layout: phone = one left-aligned column (promise > the film > what's next); desktop = promise and what's next on the left, the film on
     the right, in view on load. Look A "Clear": ink on white, the logo is the only brand colour, verdict colours live only
     inside the film. */
  --bg:#FFFFFF; --surface-2:#F4F5F7; --line:#E1E4E8; --ctl-line:#868E99;
  --ink:#1C2128; --ink-2:#444C57; --muted:#6B7480;
  --brand:#1C2128; --brand-hover:#363D47; --on-brand:#FFFFFF; --focus:#1C2128;
  --due:#2F6BD8; --skip:#0F8A6A; --call:#B87800; --glyph:#FFFFFF;
  --due-tint:#E0E9F9; --skip-tint:#DBEDE9; --call-tint:#F4EBD9;
  --card-shadow:0 1px 2px rgba(28,33,40,.05),0 14px 32px -20px rgba(28,33,40,.28);
  --show-light:block; --show-dark:none;
  /* the film's quote is a photo of paper and the avatar is the logo tile: both stay light in either theme */
  --paper:#FFFFFF; --paper-edge:#DDE1E6; --paper-line:#D5D9DE; --paper-ink:#1C2128; --scan:rgba(28,33,40,.10); --tile:#FFFFFF;

  --f-display:'Newsreader',Georgia,'Times New Roman',serif;
  --f-body:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wm:20px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#15181C; --surface-2:#1F2328; --line:#30353C; --ctl-line:#6B737D;
  --ink:#ECEEF1; --ink-2:#C5CAD1; --muted:#9AA2AC;
  --brand:#ECEEF1; --brand-hover:#FFFFFF; --on-brand:#15181C; --focus:#ECEEF1;
  --due:#4D84E4; --skip:#20A07E; --call:#C4861A; --glyph:#0E141A;
  --due-tint:#1D283A; --skip-tint:#172C2B; --call-tint:#2F291C;
  --card-shadow:none; --show-light:none; --show-dark:block;
  --paper:#E6E9ED; --paper-edge:transparent; --paper-line:#B4BBC4; --scan:rgba(28,33,40,.16);
  color-scheme:dark;
}}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,p,ul,ol,dl,dd,blockquote,figure{margin:0}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the one outer wrapper: it owns the side gutter */
#app{padding-inline:clamp(16px,5vw,32px);padding-block:clamp(20px,4vw,48px) 48px}
.site{width:100%;max-width:38rem;margin-inline:auto;min-width:0;display:flex;flex-direction:column;gap:32px}

/* lockup + status */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lockup{display:inline-flex;align-items:center;gap:calc(var(--wm) * .45);min-width:0}
.mark{display:inline-flex;flex:none}
.on-light{display:var(--show-light)}
.on-dark{display:var(--show-dark)}
.mark .ls{display:block;height:calc(var(--wm) * 1.5);width:auto}
.mark .lt{display:block;width:calc(var(--wm) * 2);height:calc(var(--wm) * 2)}
.wm{font:800 var(--wm)/1 var(--f-body);letter-spacing:-.025em;white-space:nowrap}
.soon{flex:none;font:600 13px/1 var(--f-body);color:var(--ink-2);border:1px solid var(--line);border-radius:99px;padding:7px 11px;white-space:nowrap}

/* promise */
.intro{display:grid;gap:16px}
.hero{font:500 clamp(2.25rem,1.35rem + 4.4vw,3.5rem)/1.06 var(--f-display);letter-spacing:-.018em;text-wrap:balance}
.hero em{font-style:italic}
.sub{font-size:1.0625rem;line-height:1.55;color:var(--ink-2);max-width:34em;text-wrap:pretty}

/* the film: Quote Check thinking out loud. The one card on the page and its centrepiece.
   The resting markup is the finished answer; the script rewinds it and plays. Hidden parts keep their space
   (opacity and visibility only), so the card never changes height while it plays. */
.film{display:grid;gap:12px;align-content:start;min-width:0;padding:14px 16px 16px;border:1px solid var(--line);border-radius:16px;background:var(--bg);box-shadow:var(--card-shadow)}
.film-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px}
@media (max-width:1039px){.film-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:2;background:var(--bg);padding-block:8px;margin-block:-8px}}
.fh-title{display:flex;align-items:center;gap:10px;min-width:0}
.fh-title h2{font:600 1.125rem/1.2 var(--f-display);letter-spacing:-.005em;white-space:nowrap}
.ex-tag{flex:none;font:600 13px/1 var(--f-body);color:var(--ink);border:1.5px dashed var(--ink-2);border-radius:99px;padding:5px 10px;white-space:nowrap}
.fh-ctrl{display:flex;gap:6px;flex:none}
.ctl{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--ctl-line);border-radius:50%;background:var(--bg);color:var(--ink);cursor:pointer}
.ctl:hover{background:var(--surface-2)}
.ctl:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ctl svg{width:14px;height:14px}
.ctl .f{fill:currentColor}
.ctl .s{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#film-toggle[aria-pressed="true"] .i-pause,#film-toggle[aria-pressed="false"] .i-play{display:none}

.stage{display:grid;gap:12px;align-content:start;min-width:0;transition:opacity .45s ease}
.stage.fading{opacity:0}
.stage.instant,.stage.instant *{transition:none!important}
.cue{transition:opacity .3s ease,transform .4s cubic-bezier(.22,.8,.24,1)}
.cue.off{opacity:0;visibility:hidden;transform:translateY(5px)}
.w{transition:opacity .2s ease}
.w.off{opacity:0}
.spin{display:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--ink-2);animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}

/* the owner's quote arrives: right-aligned like a sent photo, a scan passes over its job lines */
.msg-in{justify-self:end;display:flex;align-items:center;gap:12px;max-width:min(88%,22rem);padding:6px 14px 6px 6px;border-radius:14px 14px 5px 14px;background:var(--surface-2)}
.paper{position:relative;flex:none;display:flex;flex-direction:column;gap:2px;width:34px;height:46px;padding:5px 4px 4px;border-radius:3px;background:var(--paper);box-shadow:0 0 0 1px var(--paper-edge),0 1px 2px rgba(28,33,40,.12);overflow:hidden}
.paper i{display:block;flex:none;height:2px;border-radius:1px;background:var(--paper-ink);transition:background-color .25s ease}
.paper .ph{height:3px;width:58%;margin:0 auto 2px}
.paper .pl{width:94%}
.paper .pl:nth-child(3n){width:70%}
.paper .pl:nth-child(3n+1){width:84%}
.paper .pl.dim{background:var(--paper-line)}
.paper .pt{width:42%;height:2.5px;margin-top:auto;align-self:flex-end}
.scan{position:absolute;left:0;right:0;top:-10px;height:10px;background:linear-gradient(to bottom,transparent,var(--scan));border-bottom:1.5px solid var(--paper-ink);opacity:0}
.scan.go{opacity:1}
.in-text{display:grid;gap:1px;font-size:.875rem;line-height:1.35}
.in-text b{font-weight:600}
.in-text span{color:var(--ink-2)}

/* the agent's turn: the kid-car avatar beside its step lines (spinner, then a tick and a short result) */
.agent{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;align-items:start}
.avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--tile);box-shadow:0 0 0 1px var(--line)}
.avatar svg{display:block;width:22px;height:auto}
.steps{list-style:none;padding:3px 0 0;display:grid;gap:5px}
.step{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:8px;align-items:start;font-size:.875rem;line-height:1.5}
.st{display:grid;place-items:center;width:16px;height:21px}
.st>*{grid-area:1 / 1}
.ok{width:15px;height:15px;fill:none;stroke:var(--ink-2);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.step.run .spin{display:block}
.step.run .ok{display:none}
.st-text{font-weight:500;margin-right:6px}
.res{display:inline-flex;align-items:center;gap:4px;vertical-align:1px;padding:0 7px;border:1px solid var(--line);border-radius:6px;font-size:.78125rem;font-weight:500;line-height:1.55;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.res svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the verdicts: one row per job, the spinner resolves into the verdict dot, then the why streams in */
.rows{list-style:none;padding:0;display:grid}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:1px;padding-block:7px;border-top:1px solid var(--line)}
.job{font-weight:600;font-size:.9375rem;line-height:1.3}
.slot{display:grid;align-items:center;justify-items:start}
.slot>*{grid-area:1 / 1}
.slot .spin{width:18px;height:18px;margin-left:3px}
.row.look .spin{display:block}
.row.look .vchip{opacity:0;transform:scale(.85)}
.why{grid-column:1 / -1;font-size:.8125rem;line-height:1.4;color:var(--ink-2)}
.due{--vc:var(--due);--vc-tint:var(--due-tint)}
.skip{--vc:var(--skip);--vc-tint:var(--skip-tint)}
.call{--vc:var(--call);--vc-tint:var(--call-tint)}
.vchip{display:inline-flex;align-items:center;gap:6px;padding:2px 11px 2px 2px;border-radius:99px;background:var(--vc-tint);font-size:.8125rem;font-weight:600;line-height:1.35;color:var(--ink);white-space:nowrap;transform-origin:12px 50%;transition:opacity .22s ease,transform .32s cubic-bezier(.22,.8,.24,1)}
.vi{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--vc);color:var(--glyph);flex:none;font-style:normal}
.vi svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

/* the answer: one serif line, then the line to say, filled like the quote bubble it answers */
.sum{font:600 1.125rem/1.3 var(--f-display);letter-spacing:-.008em;text-wrap:balance;padding-top:2px}
.counter{display:grid;gap:2px;padding:10px 14px 11px 16px;border-radius:12px;background:var(--surface-2)}
.counter-label{font-size:.78125rem;font-weight:600;color:var(--ink-2)}
.counter-line{font:500 1.0625rem/1.38 var(--f-display);letter-spacing:-.003em;text-indent:-.4em;text-wrap:pretty}

/* what's next */
.next{display:grid;gap:10px}
.horizon{font:500 1.375rem/1.3 var(--f-display);letter-spacing:-.008em;text-wrap:balance}
.soon-line{font-weight:600}

/* footer */
.foot{padding-top:20px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--muted)}

/* desktop: promise and what's next on the left, the film on the right, both in the first screen */
@media (min-width:1040px){
  #app{padding-block:24px 48px}
  .site{max-width:74rem;display:grid;grid-template-columns:minmax(0,1fr) 34rem;grid-template-rows:auto auto 1fr auto;grid-template-areas:"top film" "intro film" "next film" "foot foot";column-gap:clamp(48px,5.5vw,88px);row-gap:36px;align-items:start}
  .top{grid-area:top}
  .intro{grid-area:intro}
  .film{grid-area:film;padding:14px 20px 16px}
  .row{padding-block:6px}
  .slot{grid-row:1 / span 2;grid-column:2}
  .why{grid-column:1}
  .next{grid-area:next}
  .foot{grid-area:foot}
  .hero{font-size:clamp(2.5rem,1rem + 2.6vw,3.375rem)}
  .counter-line{font-size:1.125rem;line-height:1.36}
}

/* motion: the car drives up to its name once; inside the film the avatar idles while the agent works.
   Critically damped, no overshoot. Reduced motion: no transforms, the film rests on its finished answer. */
@media (prefers-reduced-motion:no-preference){
  .lockup .mark{animation:arrive .9s cubic-bezier(.22,.8,.24,1) .15s backwards;transform-origin:85% 100%}
  .film[data-phase="work"] .avatar svg{animation:idle .4s ease-in-out infinite alternate}
}
@media (prefers-reduced-motion:reduce){
  .cue,.cue.off,.row.look .vchip{transform:none}
  .scan{display:none}
  .spin{animation-duration:1.6s}
}
.film[data-live="off"] *{animation-play-state:paused!important}
@keyframes arrive{
  0%{transform:translateX(-18px)}
  70%{transform:translateX(0)}
  84%{transform:rotate(1.4deg)}
  100%{transform:none}
}
@keyframes idle{to{transform:translateY(-1px)}}
@media (min-width:720px){:root{--wm:22px}}