/* NightPublish — shared stylesheet.
   Extracted from index.html when the site became multi-page. Every page links this,
   so a token or a component is defined once. The small <style> that remains inline in
   each page is only the font shim, which must not wait on a second request.
   Page-specific rules go in that page's own inline <style> AFTER this link. */

/* Pantone 19-4052 Classic Blue, white and black. Every value below was measured
       against WCAG 2.1 before it was used, because the previous palette shipped eleven
       text styles under 4.5:1 and one CTA at 1.54:1.

         white  on black    21.00   body
         white  on surface  18.97
         white  on #0F4C81   8.86   the only safe way to use Classic Blue behind text
         #0F4C81 on black    2.37   FAILS -- Classic Blue is a fill here, never text
         #51A3EB on black    7.79   so the accent is a measured tint of it for text
         #B4B4B4 on black   10.13   secondary
         #949494 on black    6.92   fine print, replaces var(--dim) which was 3.92        */
    :root {
      --black:   #000000;
      --surface: #0A1119;   /* blue-tinted black: separation without becoming grey */
      --panel:   #0D161F;
      --line:    #223040;
      --line-2:  #31435A;
      --fg:      #FFFFFF;
      --muted:   #B4B4B4;
      --dim:     #949494;
      --blue:    #0F4C81;   /* Classic Blue. Fills and strokes. White sits on it. */
      --blue-lit:#51A3EB;   /* the tint that survives on black as text */
      --blue-dim:#16334F;   /* deep fill for inert chips */
      --danger:  #FF8A75;   /* 8.1:1 on black */
      --ok:      var(--ok);
      --display: 'Bricolage Grotesque', 'Bricolage fallback', Georgia, serif;
      --mono:    'IBM Plex Mono', 'Plex fallback', ui-monospace, SFMono-Regular, Menlo, monospace;
      --gut: 16px;
      --max: 1060px;
    }
    /* The film engine only reads --sw-*; without these it renders its own cream default. */
    .sw-root {
      --sw-bg: #000000;
      --sw-ink: #FFFFFF;
      --sw-ink-soft: #B4B4B4;
      --sw-accent: #51A3EB;
      --sw-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
      --sw-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; overflow-x: clip; max-width: 100%; }
    body {
      background: var(--black); color: var(--fg);
      font: 400 17px/1.62 var(--display);
      font-optical-sizing: auto;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    /* grain */
    body::after {
      content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: .05;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
    section { padding: 62px 0; position: relative; }
    a { color: var(--blue-lit); text-decoration-thickness: 1px; text-underline-offset: 3px; }
    p { margin: 0 0 16px; }
    p:last-child { margin-bottom: 0; }
    h1, h2, h3 { margin: 0; letter-spacing: -.035em; font-weight: 800; line-height: 1.02; }
    h1 { font-size: clamp(2.65rem, 12.2vw, 5.6rem); }
    h2 { font-size: clamp(1.9rem, 7.4vw, 3.2rem); }
    h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
    .kicker {
      font: 500 .66rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
      color: var(--blue-lit); display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
    }
    .kicker::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, var(--line-2), transparent); }
    .lead { font-size: clamp(1.08rem, 4.2vw, 1.3rem); color: var(--muted); max-width: 44ch; }
    .fine { font: 400 .84rem/1.6 var(--mono); color: var(--dim); }
    .fine a { color: var(--muted); }
    .mono { font-family: var(--mono); }
    .amber { color: var(--blue-lit); }

    /* ---- header ---- */
    header {
      position: relative; z-index: 4; padding: 18px 0 8px;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); min-width: 0; }
    .brand .mark {
      flex: none; width: 30px; height: 30px; display: block; color: var(--blue-lit);
      transition: color .18s ease;
    }
    .brand:hover .mark { color: #7FBDF0; }
    .brand b { font: 600 .82rem/1.15 var(--display); letter-spacing: -.02em; display: block; }
    .brand small { font: 400 .58rem/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--dim); display: block; }
    .toplink {
      flex: none; font: 500 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
      color: var(--black); background: var(--blue-lit); padding: 11px 13px; border-radius: 3px; text-decoration: none;
    }

    /* ---- hero ---- */
    #hero { padding-top: 34px; padding-bottom: 0; }
    #hero::before {
      content: ""; position: absolute; left: 50%; top: -240px; transform: translateX(-50%);
      width: 140vw; height: 560px; pointer-events: none;
      background: radial-gradient(ellipse 50% 50% at 50% 100%, rgba(15,76,129,.34), transparent 70%);
    }
    #hero h1 { position: relative; }
    #hero h1 em { font-style: normal; color: var(--blue-lit); }
    .hero-sub { margin-top: 22px; }
    .hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
    .badges { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px; }
    .badge {
      font: 500 .67rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
      border: 1px solid var(--line-2); border-radius: 2px; padding: 8px 9px;
    }
    .badge b { color: var(--fg); font-weight: 600; }

    /* ---- run log ---- */
    .log {
      margin: 40px 0 0; border: 1px solid var(--line); border-top: 2px solid var(--blue-lit);
      background: linear-gradient(180deg, var(--panel), var(--surface));
      border-radius: 4px; overflow: clip;
    }
    .log-head {
      display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
      padding: 13px 15px; border-bottom: 1px dashed var(--line-2);
      font: 500 .66rem/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--dim);
    }
    .log-head b { color: var(--fg); font-weight: 600; }
    .log ol { list-style: none; margin: 0; padding: 6px 15px 14px; }
    .log li {
      display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: baseline;
      padding: 10px 0 10px 0; border-bottom: 1px dashed rgba(42,42,62,.55); position: relative;
    }
    .log li:last-child { border-bottom: 0; }
    .log li time { font: 500 .78rem/1.5 var(--mono); color: var(--blue-lit); }
    .log li .what { font: 600 .95rem/1.4 var(--display); letter-spacing: -.02em; }
    .log li .what span { display: block; font: 400 .8rem/1.55 var(--mono); color: var(--muted); letter-spacing: 0; margin-top: 3px; }
    .log li.sleep time, .log li.sleep .what { color: var(--dim); }
    .log li.sleep .what { font-weight: 500; }
    .log-foot { padding: 12px 15px 14px; border-top: 1px dashed var(--line-2); font: 400 .76rem/1.6 var(--mono); color: var(--dim); }

    /* ---- buttons ---- */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      background: var(--blue-lit); color: var(--black); border: 0; cursor: pointer; text-decoration: none;
      font: 600 1rem/1 var(--display); letter-spacing: -.01em; padding: 18px 24px; border-radius: 4px;
      box-shadow: 0 1px 0 rgba(160,205,245,.55) inset, 0 16px 34px -20px rgba(81,163,235,.8);
      transition: transform .14s ease, box-shadow .2s ease;
      max-width: 100%;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn:disabled { opacity: .5; cursor: progress; transform: none; }
    .btn-ghost {
      display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
      font: 500 .78rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
      border: 1px solid var(--line-2); border-radius: 4px; padding: 17px 16px;
    }
    .btn-ghost:hover { color: var(--fg); border-color: var(--dim); }

    /* ---- generic blocks ---- */
    .grid { display: grid; gap: 14px; }
    @media (min-width: 720px) { .grid.c3 { grid-template-columns: repeat(3, 1fr); } .grid.c2 { grid-template-columns: repeat(2, 1fr); } }
    .card {
      border: 1px solid var(--line); background: var(--surface); border-radius: 4px; padding: 20px 18px;
      position: relative;
    }
    .card .n { font: 500 .66rem/1 var(--mono); letter-spacing: .16em; color: var(--blue-lit); display: block; margin-bottom: 14px; }
    .card p { color: var(--muted); font-size: .96rem; margin-top: 10px; }
    .card .src { display: block; margin-top: 14px; font: 400 .72rem/1.5 var(--mono); }
    .card .src a { color: var(--dim); }
    .card .src a:hover { color: var(--blue-lit); }
    .big { font: 800 clamp(1.7rem, 7vw, 2.15rem)/1 var(--display); letter-spacing: -.04em; color: var(--fg); display: block; }
    .big + .u { display: block; margin-top: 7px; font: 400 .74rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }

    /* ---- tables ---- */
    .tbl { width: 100%; max-width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 22px; }
    .tbl caption { text-align: left; font: 500 .66rem/1.5 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--dim); padding-bottom: 10px; }
    .tbl th, .tbl td { text-align: left; padding: 13px 0; border-bottom: 1px dashed var(--line-2); vertical-align: top; overflow-wrap: anywhere; }
    .tbl th { font: 500 .64rem/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--dim); font-weight: 500; padding-top: 0; }
    .tbl td:first-child { padding-right: 14px; font-size: .95rem; }
    .tbl td:last-child { text-align: right; font: 500 .88rem/1.5 var(--mono); color: var(--blue-lit); width: 38%; }
    .tbl td small { display: block; font: 400 .78rem/1.55 var(--mono); color: var(--dim); margin-top: 5px; letter-spacing: 0; }
    .tbl tr.total td { border-bottom: 0; border-top: 1px solid var(--line-2); font-weight: 600; }
    .tbl tr.total td:first-child { font-weight: 600; }

    /* ---- risk ---- */
    .risk {
      border: 1px solid var(--line); border-left: 2px solid var(--blue-lit); background: var(--surface);
      border-radius: 0 4px 4px 0; padding: 20px 18px; margin-bottom: 14px;
    }
    .risk h3 { margin-bottom: 10px; }
    .risk p { color: var(--muted); font-size: .96rem; }
    .risk .answer {
      margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line-2);
      font: 400 .87rem/1.65 var(--mono); color: var(--muted);
    }
    .risk .answer b { color: var(--fg); font-weight: 600; }

    /* ---- offer ---- */
    #offer { scroll-margin-top: 16px; }
    .offer-card {
      border: 1px solid var(--line-2); border-top: 2px solid var(--blue-lit); border-radius: 4px;
      background: linear-gradient(180deg, var(--panel), var(--surface)); padding: 26px 18px;
      box-shadow: 0 50px 90px -60px #000;
    }
    .price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 6px; }
    .price .amt { font: 800 clamp(3rem, 15vw, 4.6rem)/.9 var(--display); letter-spacing: -.05em; }
    .price .per { font: 500 .78rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
    .incl { list-style: none; margin: 22px 0 0; padding: 0; }
    .incl li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 9px 0; border-top: 1px dashed var(--line); font-size: .93rem; color: var(--muted); }
    .incl li::before { content: attr(data-n); font: 500 .68rem/1.9 var(--mono); color: var(--blue-lit); }
    .incl li b { color: var(--fg); font-weight: 600; }
    #cta-main { width: 100%; margin-top: 24px; }
    #cta-error {
      display: none; margin-top: 12px; padding: 12px 13px; border: 1px solid rgba(255,123,99,.4);
      border-radius: 3px; color: var(--danger); font: 400 .85rem/1.55 var(--mono); background: rgba(255,123,99,.05);
    }
    #cta-error a { color: var(--danger); }
    .guarantee { margin-top: 14px; font: 400 .87rem/1.6 var(--mono); color: var(--muted); }
    .guarantee b { color: var(--fg); font-weight: 600; }
    .policy-note {
      margin-top: 18px; padding: 15px 15px; border: 1px dashed var(--line-2); border-radius: 3px;
      font: 400 .85rem/1.65 var(--mono); color: var(--muted);
    }
    .policy-note b { color: var(--blue-lit); font-weight: 600; }

    /* ---- tiers ---- */
    .tier { border: 1px solid var(--line); border-radius: 4px; padding: 20px 18px; background: var(--surface); }
    .tier .tag { font: 500 .64rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
    .tier .p { margin-top: 12px; font: 600 1.45rem/1 var(--display); letter-spacing: -.03em; }
    .tier p { color: var(--muted); font-size: .92rem; margin-top: 10px; }
    form.notify { margin-top: 16px; display: grid; gap: 8px; }
    form.notify input {
      width: 100%; background: var(--black); border: 1px solid var(--line-2); border-radius: 3px; color: var(--fg);
      font: 400 .9rem/1 var(--mono); padding: 14px 12px; min-width: 0;
    }
    form.notify input:focus { outline: 2px solid var(--blue-lit); outline-offset: -1px; border-color: transparent; }
    form.notify button {
      background: transparent; color: var(--fg); border: 1px solid var(--dim); border-radius: 3px; cursor: pointer;
      font: 500 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 14px 12px;
    }
    form.notify button:hover { border-color: var(--blue-lit); color: var(--blue-lit); }
    form.notify button:disabled { opacity: .5; cursor: progress; }
    .msg { font: 400 .8rem/1.5 var(--mono); color: var(--dim); min-height: 1.2em; }
    .msg.ok { color: var(--blue-lit); }
    .msg.err { color: var(--danger); }
    .msg a { color: inherit; }

    /* ---- faq ---- */
    details { border-bottom: 1px dashed var(--line-2); }
    details summary {
      cursor: pointer; list-style: none; padding: 17px 30px 17px 0; position: relative;
      font: 600 1rem/1.4 var(--display); letter-spacing: -.02em;
    }
    details summary::-webkit-details-marker { display: none; }
    details summary::after {
      content: "+"; position: absolute; right: 2px; top: 15px; color: var(--blue-lit);
      font: 400 1.3rem/1 var(--mono);
    }
    details[open] summary::after { content: "−"; }
    details .a { padding: 0 0 20px; color: var(--muted); font-size: .96rem; max-width: 62ch; }
    details .a p { margin-bottom: 12px; }

    /* ---- footer ---- */
    footer { border-top: 1px solid var(--line); padding: 34px 0 44px; }
    footer .cols { display: grid; gap: 22px; }
    @media (min-width: 720px) { footer .cols { grid-template-columns: 1.4fr 1fr; } }
    footer p { font: 400 .83rem/1.65 var(--mono); color: var(--dim); }
    footer a { color: var(--muted); }
    /* Two columns so the link list does not run taller than the brand block beside it. */
    footer .fnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px;
      font: 400 .83rem/1.65 var(--mono); }
    footer .fnav a { color: var(--muted); }

    @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

    /* ── motion + evidence ────────────────────────────────────────────────
       Every animation below is gated on prefers-reduced-motion and on the
       element actually being on screen. Nothing animates above the fold on
       load except the hero dial, which freezes at its last frame. */
    .lottie { display: block; }
    .lottie svg { display: block; width: 100%; height: auto; }
    /* A Lottie container is empty until lottie-web injects its SVG, so it has no height and
       everything under it jumps when the diagram mounts. Measured while scrolling: 0.1802 on
       tablet and 0.3703 on mobile, invisible to a load-only test because these mount on
       scroll. Each box now declares the composition's own aspect ratio, so the space is
       correct before the SVG exists. Keep these in step with scripts/lottie-build.mjs. */
    .lottie[data-lottie$="pipeline.json"]   { aspect-ratio: 980 / 240; }
    .lottie[data-lottie$="nightclock.json"] { aspect-ratio: 1; }
    .lottie[data-lottie$="resume.json"]     { aspect-ratio: 900 / 150; }

    /* hero dial */
    .hero-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
    .dial { display: none; }
    @media (min-width: 900px) {
      .hero-grid { grid-template-columns: minmax(0,1fr) 220px; gap: 40px; align-items: start; }
      .dial { display: block; padding-top: 10px; }
      .dial .lottie { width: 200px; margin: 0 auto; }
      .dial .dial-cap {
        font: 500 .62rem/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase;
        color: var(--dim); text-align: center; margin: 10px 0 0;
      }
      .dial .dial-cap b { color: var(--muted); font-weight: 500; }
      .dial .dial-key { margin: 12px 0 0; display: grid; gap: 6px; }
      .dial .dial-key span {
        font: 400 .68rem/1.4 var(--mono); color: var(--dim);
        display: flex; align-items: center; gap: 8px;
      }
      .dial .dial-key i { flex: none; width: 5px; border-radius: 2px; display: block; }
      .dial .dial-key i.l { height: 15px; background: var(--blue-lit); }
      .dial .dial-key i.s { height: 9px; background: var(--blue-dim); }
    }

    /* the pipeline rail */
    .rail-fig { margin: 30px 0 0; }
    .rail-fig .lottie { max-width: 100%; }
    .rail-fig > div { position: relative; }
    .branch-label, .branch-note {
      position: absolute; left: 54.08%; transform: translateX(-50%);
      font: 500 .6rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
      color: var(--muted); white-space: nowrap; pointer-events: none;
    }
    .branch-label.up { top: 12%; }
    .branch-label.dn { top: 82%; }
    .branch-note { top: 49%; color: var(--blue-lit); font-size: .55rem; }
    .rail-labels {
      position: relative; height: 30px; margin-top: 2px;
      font: 500 .6rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
      color: var(--dim);
    }
    /* each label is centred on its node's real x, which is not an even grid */
    .rail-labels span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
    .rail-labels b { color: var(--muted); font-weight: 500; display: block; }
    @media (max-width: 760px) {
      .rail-fig { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .rail-fig > div { min-width: 680px; }
      .rail-labels { font-size: .55rem; }
    }
    figcaption.mcap {
      font: 400 .78rem/1.6 var(--display); color: var(--dim); margin-top: 14px;
      border-left: 2px solid var(--line); padding-left: 12px;
    }

    /* terminal + artifact panes */
    .term {
      margin-top: 30px; border: 1px solid var(--line); border-radius: 5px;
      background: var(--black); overflow: hidden;
    }
    .term-bar {
      display: flex; align-items: center; gap: 10px; padding: 9px 13px;
      border-bottom: 1px solid var(--line); background: var(--surface);
      font: 500 .68rem/1 var(--mono); color: var(--dim);
    }
    .term-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex: none; }
    .term-bar i:first-child { background: var(--line-2); }
    .term-bar .cmd { color: var(--muted); }
    .term-bar .cmd b { color: var(--blue-lit); font-weight: 500; }
    .term-body {
      margin: 0; padding: 15px 14px 17px; overflow-x: auto;
      font: 400 .72rem/1.5 var(--mono); color: #D8D8D8;
      -webkit-overflow-scrolling: touch;
    }
    .term-body .l { display: block; white-space: pre; }
    .term-body .k { color: var(--blue-lit); }
    .term-body .d { color: var(--dim); }
    .term-body .w { color: var(--danger); }
    .term-body .g { color: var(--ok); }
    /* the reveal: each line lifts in, 34ms apart. Only runs once, on scroll. */
    .reveal .l { opacity: 0; transform: translateY(4px); }
    .reveal.go .l { animation: lineIn .34s cubic-bezier(.2,0,.15,1) both; }
    @keyframes lineIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

    .panes { display: grid; gap: 18px; margin-top: 30px; }
    @media (min-width: 860px) { .panes { grid-template-columns: 1fr 1fr; gap: 22px; } }
    .pane {
      border: 1px solid var(--line); border-radius: 5px; background: var(--surface);
      display: flex; flex-direction: column; min-width: 0;
    }
    .pane > h4 {
      margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--line);
      font: 500 .64rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
      color: var(--muted);
    }
    .pane > h4 em { font-style: normal; color: var(--dim); text-transform: none; letter-spacing: 0; }
    .pane .pane-body { padding: 14px; margin: 0; overflow-x: auto; font: 400 .71rem/1.7 var(--mono); color: #D8D8D8; }
    .pane .pane-note { padding: 0 14px 14px; margin: 0; font: 400 .82rem/1.6 var(--display); color: var(--muted); }
    .pane.verdict-skip { border-left: 2px solid var(--danger); }
    .pane.verdict-pass { border-left: 2px solid var(--blue-lit); }
    .skiplist { list-style: none; margin: 0; padding: 14px; display: grid; gap: 13px; }
    .skiplist li { display: grid; gap: 3px; }
    .skiplist .t { font: 500 .8rem/1.4 var(--mono); color: var(--fg); }
    .skiplist .r { font: 400 .84rem/1.55 var(--display); color: var(--muted); }
    .skiplist .r::before { content: "↳ "; color: var(--danger); }

    /* resume diagram beside the state-machine copy */
    .resume-fig { margin-top: 22px; }
    .resume-fig .lottie { max-width: 100%; }
    .resume-labels {
      position: relative; height: 16px; margin-top: 0;
      font: 500 .55rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
      color: var(--dim);
    }
    .resume-labels span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
    .resume-labels span:nth-child(5) { color: var(--danger); }
    @media (max-width: 620px) {
      .resume-fig { overflow-x: auto; }
      .resume-fig > div { min-width: 520px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal .l, .reveal.go .l { opacity: 1; transform: none; animation: none; }
    }

    /* ── layout arm w: the film opens the page ──────────────────────────────────────── */
    /* Every one of the engine's seven layers is position:fixed, because it was built for a
       page it owns. Embedded, that chrome stays pinned over the offer block once you scroll
       out of the film. Hiding the whole root the moment the film leaves the viewport is the
       only containment that does not change how it behaves while you are inside it —
       wrapping it in a transformed ancestor would fix the layers to the container and break
       the scrub. */
    /* ── film chrome, re-themed for a dark page ────────────────────────────────────────
       scrub-engine.js was written for a light world: it uses `--sw-ink` as a BACKGROUND
       for its buttons and 55-85% white for its glass. With a dark theme --sw-ink is white,
       so .sw-topcta and .sw-btn--primary rendered white-on-white and the nav pills measured
       2.83:1. These override the engine rather than editing it, so a skill update does not
       silently reintroduce the problem. Measured: white on #0F4C81 = 8.86:1. */
    #film .sw-topcta,
    #film .sw-btn--primary {
      color: #FFFFFF !important;
      background: var(--blue) !important;
      border: 1px solid var(--blue-lit);
    }
    #film .sw-topcta:hover,
    #film .sw-btn--primary:hover { background: #14609F !important; }
    #film .sw-nav {
      background: rgba(10, 17, 25, .82) !important;
      border-color: var(--line-2) !important;
    }
    /* The engine's class is .sw-nav__item, not __btn. Its active state is white on
       --sw-accent, and the accent is the LIGHT tint, so that measured 2.07:1. The active
       pill takes Classic Blue proper instead: white on #0F4C81 is 8.86:1. */
    #film .sw-nav__item { color: #FFFFFF; }
    #film .sw-nav__item.is-active { color: #FFFFFF !important; background: var(--blue) !important; }
    #film .sw-nav__item:hover { color: var(--blue-lit); }
    #film .sw-route__label {
      color: #FFFFFF !important;
      background: rgba(10, 17, 25, .9) !important;
      border-color: var(--line-2) !important;
    }
    /* The engine paints a 45% white radial into the sky. On black that is a grey smear. */
    #film .sw-sky__glow { opacity: .35; }
    #film .sw-hint { color: var(--muted); }
    /* The engine renders its brand slot as an empty styled dot. Put the real mark in it. */
    #film .sw-brand__mark {
      background: none !important; border: 0 !important; width: 26px; height: 26px;
      -webkit-mask: url(/logo-mark.svg) center/contain no-repeat;
      mask: url(/logo-mark.svg) center/contain no-repeat;
      background-color: var(--blue-lit) !important; border-radius: 0 !important;
    }

    #film.past .sw-root,
    #film.past .film-skip { visibility: hidden; pointer-events: none; }
    #film { padding: 0; display: none; }
    /* Reserving the film's scroll height BEFORE the engine builds it. The section ships
       `hidden`; revealing it inserted ~12,400px above the fold and pushed the whole page
       down, which measured 0.9344 — the entire CLS of this arm. The engine's track is the
       sum of its per-segment scroll multipliers in viewport units: six dives at
       1.5+1.3+1.3+1.3+1.3+1.6 plus five connectors at 0.9, plus a trailing viewport, so
       ~13.8vh. Reserving that up front means the engine fills space that already existed.
       If the two ever disagree the residual shift is the difference, not the whole film. */
    @media (min-width: 1024px) {
      :root[data-layout="w"] #film { display: block; min-height: 1380vh; }
      :root[data-layout="w"] #film.failed { display: none; min-height: 0; }
    }
    :root[data-layout="w"] #film.on { display: block; }
    /* Arm w hides the static opener. This MUST key off data-layout, which the middleware
       sets server-side before first paint, and not off .on, which JS adds after the engine
       mounts — keying it off .on rendered the hero and then yanked it, measured as a 0.9344
       layout shift, by far the worst thing on the page. The fallback is inverted instead:
       if the engine fails, JS marks the film .failed and the hero comes back. A rare path
       pays the shift; the common path pays nothing. Desktop-only, because below 1024px the
       film never mounts and the hero IS the page. */
    @media (min-width: 1024px) {
      :root[data-layout="w"] #hero .hero-grid { display: none; }
      :root[data-layout="w"] #hero .log { display: none; }
      :root[data-layout="w"] #film.failed ~ #hero .hero-grid { display: grid; }
      :root[data-layout="w"] #film.failed ~ #hero .log { display: block; }
    }
    #film .film-skip {
      position: fixed; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 40;
      font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
      color: var(--dim); background: rgba(7,7,13,.84); border: 1px solid var(--line);
      border-radius: 999px; padding: 9px 14px; text-decoration: none; backdrop-filter: blur(6px);
    }
    #film .film-skip:hover { color: var(--fg); border-color: var(--blue-lit); }
    /* ── the poster film: arm w below 1024px ──────────────────────────────
       The scroll-world engine is desktop-only and always will be: the clip
       chain is 34 MB and a phone cannot scrub it. For a long time that meant
       the hero's "See a night of it" button navigated to ?lay=w on a phone,
       the engine declined to mount, and the visitor landed back on the page
       they were already looking at. The button was not broken in code; it
       just promised something the viewport never delivered.

       So arm w gets a second, honest film below 1024px, built from the six
       poster frames the engine already uses as its video posters: ~118 KB of
       webp total, no mp4 requested, same six beats, same copy. It is a
       different experience from the desktop film, so it reports itself as
       `poster` rather than `full`, and /ab-stats keeps it out of the layout
       comparison exactly as it does `degraded`.

       Height is reserved up front for the same reason the desktop film
       reserves 1380vh: revealing six panels above the fold after load is a
       whole-page shift. Six panels at 100svh each, so 600svh, and the two
       cannot drift because the panel height below is the same token. */
    @media (max-width: 1023px) {
      :root[data-layout="w"] #film { display: block; min-height: 600vh; min-height: 600svh; }
      :root[data-layout="w"] #film.failed { display: none; min-height: 0; }
      /* Same inversion as the desktop rule: the hero is hidden from first
         paint by the server-set data-layout, and comes BACK if JS marks the
         film failed. Keying it off a class JS adds would render the hero and
         then yank it, which is the 0.93 shift we already paid for once. */
      :root[data-layout="w"] #hero .hero-grid { display: none; }
      :root[data-layout="w"] #hero .log { display: none; }
      :root[data-layout="w"] #film.failed ~ #hero .hero-grid { display: grid; }
      :root[data-layout="w"] #film.failed ~ #hero .log { display: block; }
    }
    .pf { scroll-snap-type: y mandatory; }
    .pf__panel {
      position: relative; height: 100vh; height: 100svh; scroll-snap-align: start;
      display: flex; flex-direction: column; justify-content: flex-end;
      overflow: hidden; background: var(--black);
    }
    .pf__img {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; opacity: .5;
    }
    /* The copy sits on the image, so it needs its own floor rather than
       trusting whatever the frame happens to be. */
    .pf__panel::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(180deg, rgba(7,7,13,.55) 0%, rgba(7,7,13,.12) 38%, rgba(7,7,13,.93) 82%, var(--black) 100%);
    }
    .pf__copy {
      position: relative; z-index: 2; padding: 0 20px 92px;
      padding-left: max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
    }
    .pf__label {
      display: block; font: 500 .6rem/1 var(--mono); letter-spacing: .16em;
      text-transform: uppercase; color: var(--dim); margin-bottom: 16px;
    }
    .pf__eyebrow {
      display: block; font: 700 .72rem/1 var(--mono); letter-spacing: .16em;
      text-transform: uppercase; color: var(--blue-lit); margin-bottom: 12px;
    }
    .pf__title { font-size: clamp(1.55rem, 7vw, 2.3rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 12px; }
    .pf__body { color: var(--muted); font-size: 1rem; line-height: 1.55; margin: 0; max-width: 34em; }
    .pf__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
    .pf__tags li {
      font: 500 .66rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
      color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px;
    }
    .pf__cta {
      display: inline-block; margin-top: 22px; background: var(--blue-lit); color: var(--black);
      font: 700 .9rem/1 var(--sans); border-radius: 10px; padding: 14px 20px; text-decoration: none;
    }
    .pf__count {
      position: absolute; top: max(16px, env(safe-area-inset-top)); right: 18px; z-index: 2;
      font: 600 .66rem/1 var(--mono); letter-spacing: .1em; color: var(--dim);
    }
    .pf__hint {
      position: absolute; left: 20px; bottom: 52px; z-index: 2;
      font: 500 .62rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
    }
    @media (prefers-reduced-motion: reduce) { .pf { scroll-snap-type: none; } }
    /* The handoff out of the film into the page proper. */
    :root[data-layout="w"] #film.on ~ #hero { padding-top: 54px; }
    :root[data-layout="w"] #film.failed ~ #hero::before { content: none; }
    :root[data-layout="w"] #film.on ~ #hero::before {
      content: "the licence";
      /* #hero::before is already used, further up, for a decorative glow: absolutely
         positioned, 140vw wide, 560px tall, sitting 240px ABOVE the hero. Setting only
         `content` and `display` here left all of that in place, so the label was painted
         out of flow, off above the film, and the hero collapsed to its 54px of padding —
         a dead black band between the end of the film and "Seven jobs a day". Every
         property the glow sets has to be undone for this to be a line of text in flow. */
      position: static; width: auto; height: auto; transform: none;
      background: none; pointer-events: auto;
      display: block; margin-bottom: 26px;
      font: 500 .62rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
      color: var(--blue-lit); text-align: center;
    }


/* ── multi-page chrome ────────────────────────────────────────────────────
   Added when the single page was split. The landing page was carrying every
   word the product had; the depth now lives on its own pages and the nav is
   how you get there. */
header .topnav {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: flex-end;
  font: 500 .78rem/1 var(--mono); letter-spacing: .02em;
}
header .topnav a { color: var(--muted); text-decoration: none; white-space: nowrap; }
header .topnav a:hover { color: var(--fg); }
header .topnav a.is-active { color: var(--blue-lit); }
/* Below the breakpoint the nav becomes one scrollable row rather than wrapping to
   three lines and pushing the whole page down. */
@media (max-width: 760px) {
  header { flex-wrap: wrap; gap: 12px; }
  header .topnav {
    width: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    gap: 16px; padding-bottom: 4px; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  header .topnav::-webkit-scrollbar { display: none; }
}
#tail { border-top: 1px solid var(--line); }
#tail .btn, #tail .btn-ghost { margin: 0 6px 10px; }

/* "Read the rest" link at the foot of a shortened section on the home page. */
.more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  font: 600 .84rem/1 var(--mono); letter-spacing: .04em; color: var(--blue-lit);
  text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 3px;
}
.more:hover { border-bottom-color: var(--blue-lit); }
.more::after { content: "\2192"; }