/* boxd.work
   Static, no framework, no build step, no third-party host. Everything it loads
   it serves itself: a privacy position for a product that holds companies'
   books, and the reason the page renders the same whether or not anything else
   on the internet is up.

   ── the direction ────────────────────────────────────────────────────────────
   The first light version of this page was light and nothing else. Every band
   was the same shape — eyebrow, heading, a grid of bordered cards — nine times
   down the page, all on the same white, at the same measure, at nearly the same
   type size. That reads as a template even when every individual part is
   correct, and it was.

   So the rules here are about RANGE rather than about colour:

   · The ground is warm paper (#FBFAF9) with a grain over it, not white. Pure
     white is the default nobody chose.
   · Two full-bleed near-black bands break the page — the one about being left
     behind and the one about the people. A page that never changes ground has
     no rhythm to give a reader.
   · The type scale is wide on purpose: a 4.35rem hero, 3.9rem statements, and
     one section that is a single line of serif italic. If every heading is
     2.6rem the page has no idea what it thinks is important.
   · No two consecutive sections have the same layout. Statement, then two
     columns, then a dark split, then three priced options, then a drawing,
     then flat prose, then a quiet dark band.
   · Depth is real: the hero is three stacked surfaces with two-stage shadows,
     not one flat rectangle with a border.
   · Things arrive as you scroll. It is eight lines of JavaScript and it is most
     of the difference between a page that feels made and a page that feels
     generated. Everything is visible without it — see the `.js` guard at the
     bottom — because a crawler does not scroll.

   Boxd's deck colours are kept and inverted: #0C0D11 stops being the ground and
   becomes the type, #0A99FA stays the accent. Single theme on purpose — one
   committed visual world, so there is no prefers-color-scheme block and every
   colour is painted explicitly. */

/* Outfit, self-hosted. SIL Open Font Licence 1.1 — see fonts/OFL.txt, which
   travels with it because the licence requires the notice to. Display only,
   27 KB for both weights; body text uses faces already on the machine so the
   page has type before any font arrives. The one serif line uses the reader's
   own serif rather than a third face — 40 KB for one sentence is not a trade
   worth making, and Georgia italic at that size is genuinely good. */
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --paper:  #fbfaf9;
  --card:   #ffffff;
  --sand:   #f4f2ee;
  --rule:   #e7e4de;
  --rule-2: #d6d2ca;

  --ink:   #0c0d11;
  --body:  #4a5059;
  --dim:   #767d86;
  --faint: #a3a8b0;

  --accent:      #0a99fa;
  --accent-deep: #0569b4;   /* 5.4:1 on paper — safe for links and small text */
  --accent-wash: #ecf5fe;
  --accent-line: #c3e0fb;

  --night:      #0c0d11;
  --night-2:    #14161c;
  --night-rule: #24272f;
  --night-body: #a8aeb7;
  --night-dim:  #767d86;

  --f-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, sans-serif;
  --f-body:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --f-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --f-serif:   ui-serif, Georgia, "Times New Roman", serif;

  --measure: 36rem;
  --wide: 70rem;
  --gutter: 24px;
  --r: 12px;

  --lift-1: 0 1px 2px rgba(12,13,17,0.05), 0 8px 20px -10px rgba(12,13,17,0.13);
  --lift-2: 0 2px 4px rgba(12,13,17,0.06), 0 24px 56px -20px rgba(12,13,17,0.24);
}

* { box-sizing: border-box; }

/* `hidden` has to outrank any class that sets `display`. Without this the
   confirmation panel renders to everybody who has not signed up. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain. A 90-byte turbulence tile at four per cent, fixed so it does not
   travel with the scroll. It is the difference between paper and a screen. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--accent);
        color: #fff; padding: 10px 16px; z-index: 30; border-radius: 0 0 var(--r) 0; }
.skip:focus { left: 0; }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3 {
  font-family: var(--f-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  font-weight: 600;
  letter-spacing: -0.035em;
}
h1 { font-size: clamp(2.6rem, 5.6vw, 4.35rem); line-height: 1.0;
     letter-spacing: -0.045em; hyphens: none; }
/* "co-founder" must never break at its own hyphen. At this size the split is
   the first thing anybody sees and it reads as a typesetting accident. */
.nb { white-space: nowrap; }
h2 { font-size: clamp(1.95rem, 4.4vw, 3rem); line-height: 1.06; max-width: 24ch; }
h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }
p { margin: 0; }

/* The statement heading: a section that is only a sentence. Bigger than an
   ordinary h2 and with no measure cap, because it is meant to fill the width. */
.statement { font-size: clamp(2.1rem, 5.4vw, 3.9rem); max-width: none; line-height: 1.02; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--faint);
}

.lede { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.55;
        color: var(--body); max-width: 33rem; }
.sub { color: var(--dim); max-width: var(--measure); font-size: 1.0625rem; }
.sub strong { color: var(--ink); font-weight: 600; }
.micro { font-family: var(--f-mono); font-size: 0.75rem; color: var(--faint);
         letter-spacing: 0.02em; }

/* ── chrome ─────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 32px;
  padding-inline: max(var(--gutter), calc((100vw - var(--wide)) / 2));
  padding-block: 15px;
  background: rgba(251,250,249,0.82);
  backdrop-filter: saturate(1.7) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}
.nav.stuck { border-bottom-color: var(--rule); background: rgba(251,250,249,0.93); }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.mark { width: 25px; height: 25px; flex: none; }
.wordmark { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem;
            letter-spacing: -0.05em; color: var(--ink); }
.nav nav { display: flex; gap: 26px; margin-left: auto; }
.nav nav a { color: var(--dim); font-size: 0.9375rem; }
.nav nav a:hover { color: var(--ink); text-decoration: none; }

.btn {
  display: inline-block;
  font-family: var(--f-body); font-size: 0.9375rem; font-weight: 500;
  color: #fff; background: var(--ink);
  border: 1px solid var(--ink); border-radius: 100px;
  padding: 12px 24px; cursor: pointer;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.btn:hover { background: #262a33; border-color: #262a33; text-decoration: none;
             transform: translateY(-1px); box-shadow: var(--lift-1); }
.btn[disabled] { opacity: 0.32; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-sm { padding: 8px 17px; font-size: 0.875rem; flex: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn-ghost:hover { background: var(--card); border-color: var(--rule-2); }

/* ── bands ──────────────────────────────────────────────────────────────── */
.band {
  max-width: var(--wide); margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: clamp(72px, 10vw, 130px);
  display: flex; flex-direction: column; gap: 22px;
}
.band-sand { max-width: none; background: var(--sand);
             border-block: 1px solid var(--rule); }
.band-sand > * { max-width: var(--wide); margin-inline: auto; width: 100%; }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero-wrap { position: relative; overflow: hidden; }
/* A hairline grid and one soft wash of accent behind the product. Both are
   atmosphere: they say the page was art-directed without saying anything. */
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(60rem 34rem at 78% 24%, rgba(10,153,250,0.10), transparent 62%),
    linear-gradient(to right, rgba(12,13,17,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12,13,17,0.045) 1px, transparent 1px);
  background-size: 100% 100%, 68px 68px, 68px 68px;
  -webkit-mask-image: radial-gradient(90% 78% at 50% 22%, #000 38%, transparent 100%);
          mask-image: radial-gradient(90% 78% at 50% 22%, #000 38%, transparent 100%);
}
.hero {
  position: relative;
  max-width: var(--wide); margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: clamp(60px, 9vw, 110px) clamp(72px, 10vw, 124px);
  display: flex; flex-direction: column; gap: 52px;
}
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.cta-row { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 8px; }
@media (min-width: 64rem) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.9fr);
          align-items: center; gap: 48px; }
}

/* The hero headline is a question and questions are long. It gets its own
   scale rather than the global h1 one, which was set for a three-word line and
   put this at six lines in a column built for three. `balance` then does the
   line-breaking, because hand-placed breaks in a sentence this length are a
   promise about a viewport width nobody can keep. */
.hero-copy h1 { font-size: clamp(2.05rem, 3.3vw, 3.05rem); line-height: 1.04;
                letter-spacing: -0.036em; max-width: 15.5ch; }
@media (min-width: 64rem) { .hero-copy h1 { max-width: none; } }
.hero-copy .lede { max-width: 34rem; }

/* ── the product, as three stacked surfaces ─────────────────────────────── */
/* Flat and square. A tilted perspective mock was tried here and looked ten
   years old; the reference set puts the product straight on and lets the
   shadow do the work. */
.deck { position: relative; padding: 56px 0 0 0; }
.pane {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 13px;
  overflow: hidden;
  font-size: 0.8125rem;
}
/* One consistent step, up and to the right, so the three read as a stack
   rather than as three rectangles that missed each other. Only the title bars
   of the two behind are ever visible, which is the point: they say there is
   more underneath without competing with the thing in front. */
.pane-back, .pane-mid { position: absolute; right: 0; }
.pane-back { top: 0;    width: 84%; box-shadow: var(--lift-1); opacity: 0.9; }
.pane-mid  { top: 28px; width: 92%; box-shadow: var(--lift-1); opacity: 0.96; }
.pane-front { position: relative; box-shadow: var(--lift-2); }

.pane-bar { display: flex; align-items: center; gap: 6px; padding: 11px 15px;
            border-bottom: 1px solid var(--rule); background: #fafafa; }
.pane-bar .d { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-2); }
.pane-name { font-family: var(--f-mono); font-size: 0.6875rem; color: var(--dim);
             margin-left: 8px; }
.pill { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
        font-family: var(--f-mono); font-size: 0.625rem; text-transform: uppercase;
        letter-spacing: 0.1em; color: var(--accent-deep); background: var(--accent-wash);
        border: 1px solid var(--accent-line); border-radius: 100px; padding: 3px 10px; }
.live { width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
        box-shadow: 0 0 0 0 rgba(10,153,250,0.55); animation: ping 2.4s ease-out infinite; }
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(10,153,250,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(10,153,250,0); }
  100% { box-shadow: 0 0 0 0 rgba(10,153,250,0); }
}

.rows-mono { list-style: none; margin: 0; padding: 6px 0; font-family: var(--f-mono);
             font-size: 0.6875rem; color: var(--dim); }
.rows-mono li { display: flex; gap: 12px; padding: 6px 15px; }
.rows-mono li span:nth-child(2) { flex: 1; }
.rows-mono .num { font-variant-numeric: tabular-nums; color: var(--body); }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); }
.kpis > div { padding: 13px 15px; display: flex; flex-direction: column; gap: 1px; }
.kpis > div + div { border-left: 1px solid var(--rule); }
.kpis .k { font-family: var(--f-mono); font-size: 0.5625rem; letter-spacing: 0.1em;
           text-transform: uppercase; color: var(--faint); }
.kpis .v { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem;
           letter-spacing: -0.03em; color: var(--ink); }

.pane-head { font-family: var(--f-mono); font-size: 0.5625rem; letter-spacing: 0.13em;
             text-transform: uppercase; color: var(--faint); padding: 14px 15px 5px; }
.queue { list-style: none; margin: 0; padding: 0 0 9px; }
.queue li { display: flex; align-items: center; gap: 10px; padding: 9px 15px;
            color: var(--body); }
.queue .bul { width: 5px; height: 5px; border-radius: 50%; background: var(--rule-2); flex: none; }
.queue .what { flex: 1; }
.queue .state { font-family: var(--f-mono); font-size: 0.5625rem; text-transform: uppercase;
                letter-spacing: 0.09em; color: var(--faint); }
.queue li.wait { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }
.queue li.wait .bul { background: var(--accent); }
.queue li.wait .what { color: var(--ink); font-weight: 500; }
.queue li.wait .state { color: var(--accent-deep); font-weight: 600; }

/* ── prose layouts ──────────────────────────────────────────────────────── */
.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
          gap: 22px 56px; margin-top: 14px; }
.two-up p { max-width: 30rem; }
.two-up > div { display: flex; flex-direction: column; gap: 10px; }
.lead-in { font-family: var(--f-display); font-weight: 600; font-size: 1.1875rem;
           color: var(--ink); letter-spacing: -0.02em; }
.aside { color: var(--faint); font-size: 0.9375rem; max-width: var(--measure);
         border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 6px; }

.plain { display: flex; flex-direction: column; gap: 18px; margin-top: 10px;
         max-width: 44rem; }
.plain p { color: var(--dim); font-size: 1.0625rem; }
.plain strong { color: var(--ink); font-weight: 600; }

.pull { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.02em;
        font-size: clamp(1.2rem, 2.3vw, 1.6rem); line-height: 1.32;
        color: var(--ink); max-width: 40rem; margin-top: 10px;
        border-left: 3px solid var(--accent); padding-left: 22px; }

/* ── the dark bands ─────────────────────────────────────────────────────── */
.night { background: var(--night); color: var(--night-body); }
.night-in { max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter);
            padding-block: clamp(76px, 10vw, 136px);
            display: flex; flex-direction: column; gap: 24px; }
.night h2, .night h3 { color: #fff; }
.night .eyebrow { color: var(--night-dim); }
.night p { color: var(--night-body); }
.night-cols { display: grid; grid-template-columns: 1fr; gap: 44px; margin-top: 18px; }
@media (min-width: 58rem) {
  .night-cols { grid-template-columns: minmax(0,1fr) minmax(0,0.95fr); gap: 72px; }
}
.night-cols > div { display: flex; flex-direction: column; gap: 16px; }
.night-cols p { max-width: 32rem; }
.lift { color: #fff !important; font-family: var(--f-display); font-weight: 500;
        font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.02em;
        border-left: 2px solid var(--accent); padding-left: 20px; margin-top: 6px; }

.figures { display: flex; flex-direction: column; gap: 26px; }
.fig-big { display: flex; flex-direction: column; gap: 12px;
           border-top: 1px solid var(--night-rule); padding-top: 22px; }
.fig { font-family: var(--f-display); font-weight: 600; color: #fff;
       font-size: clamp(4rem, 11vw, 7rem); line-height: 0.84;
       letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.fig .unit { font-size: 0.42em; letter-spacing: -0.02em; color: var(--accent); }
.fig-big p { font-size: 1rem; max-width: 26rem; }
.src { font-family: var(--f-mono); font-size: 0.6875rem; color: var(--night-dim) !important;
       line-height: 1.6; }
.fig-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
           background: var(--night-rule); border: 1px solid var(--night-rule); border-radius: 10px;
           overflow: hidden; }
.fig-row > div { background: var(--night-2); padding: 18px 20px;
                 display: flex; flex-direction: column; gap: 4px; }
.fig-sm { font-family: var(--f-display); font-weight: 600; font-size: 1.7rem;
          color: #fff; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.fig-lbl { font-size: 0.8125rem; color: var(--night-dim); line-height: 1.45; }

/* the quiet one */
.night-quiet .night-in { gap: 20px; }
.serif { font-family: var(--f-serif); font-style: italic; color: #fff;
         font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.12;
         letter-spacing: -0.015em; max-width: 20ch; }
.night-lede { font-size: 1.125rem; max-width: 38rem; line-height: 1.58; margin-top: 4px; }
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
          gap: 34px; margin-top: 34px; border-top: 1px solid var(--night-rule);
          padding-top: 34px; }
.person { display: flex; flex-direction: column; gap: 7px; }
.person .role { font-family: var(--f-mono); font-size: 0.625rem; text-transform: uppercase;
                letter-spacing: 0.13em; color: var(--accent) !important; }
.person p:last-child { font-size: 0.9375rem; color: var(--night-dim) !important; }

/* ── the three options ──────────────────────────────────────────────────── */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
           gap: 18px; margin-top: 22px; }
.opt { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
       padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 6px; }
.opt-lit { border-color: var(--ink); background: var(--ink); box-shadow: var(--lift-2); }
.opt-name { font-family: var(--f-mono); font-size: 0.6875rem; text-transform: uppercase;
            letter-spacing: 0.14em; color: var(--faint); }
.opt-lit .opt-name { color: var(--accent); }
.opt-fig { font-family: var(--f-display); font-weight: 600; font-size: 2.7rem;
           line-height: 1; letter-spacing: -0.05em; color: var(--ink);
           font-variant-numeric: tabular-nums; margin-top: 10px; }
.opt-lit .opt-fig { color: #fff; }
.opt-fig .cur { font-size: 0.42em; letter-spacing: 0; color: var(--faint); margin-left: 4px; }
.opt-lit .opt-fig .cur { color: var(--night-dim); }
.opt-per { font-size: 0.875rem; color: var(--dim); margin-bottom: 12px; }
.opt-lit .opt-per { color: var(--night-dim); }
.opt-body { font-size: 0.9375rem; color: var(--dim); border-top: 1px solid var(--rule);
            padding-top: 14px; margin-top: auto; }
.opt-lit .opt-body { color: var(--night-body); border-top-color: var(--night-rule); }

/* ── the box ────────────────────────────────────────────────────────────── */
.box-fig { margin-top: 26px; overflow-x: auto; }
svg.box { display: block; width: 100%; min-width: 40rem; max-width: 58rem;
          height: auto; margin-inline: auto; }
/* Faces. Light from the upper left, so the left face is lighter than the
   right one and the tops are lightest — the whole reason a flat drawing reads
   as an object. */
.f-top      { fill: #fff;     stroke: var(--rule-2); stroke-width: 1; }
.f-top-deep { fill: #fff;     stroke: var(--ink);    stroke-width: 1.4; }
.f-top-lit  { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 1.2; }
.f-side     { fill: #e5e1d9; stroke: #c2bdb2; stroke-width: 1; }
.f-side-lt  { fill: #f0eee8; stroke: #c2bdb2; stroke-width: 1; }
/* The box itself is drawn harder than the layers. It was so pale in the first
   render that the thing the section is named after read as a smudge. */
.f-side-dk  { fill: #d3cec4; stroke: #a8a296; stroke-width: 1.2; }
.f-floor    { fill: #dcd7cd; stroke: #a8a296; stroke-width: 1.2; }
.f-rim      { fill: none;    stroke: #a8a296; stroke-width: 1.2; }
.lead { stroke: var(--rule-2); stroke-width: 1; }
svg.box .l-n { font-family: var(--f-mono); font-size: 12px; fill: var(--accent-deep); }
svg.box .l-t { font-family: var(--f-display); font-weight: 600; font-size: 17px;
               fill: var(--ink); letter-spacing: -0.4px; }
svg.box .l-d { font-family: var(--f-body); font-size: 13px; fill: var(--dim); }

/* ── how it arrives ─────────────────────────────────────────────────────── */
.arrive { display: flex; flex-direction: column; gap: 18px; margin-top: 52px;
          border-top: 1px solid var(--rule); padding-top: 44px; }
.steps { list-style: none; margin: 0; padding: 0;
         display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 26px; }
.steps li { display: flex; flex-direction: column; gap: 5px;
            border-top: 2px solid var(--ink); padding-top: 14px; }
.steps li:nth-child(4) { border-top-color: var(--accent); }
.steps .n { font-family: var(--f-mono); font-size: 0.6875rem; color: var(--faint); }
.steps .t { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem;
            color: var(--ink); letter-spacing: -0.02em; }
.steps .d { font-size: 0.9375rem; color: var(--dim); }

/* ── the form ───────────────────────────────────────────────────────────── */
.band-cta { max-width: none; background: var(--sand); border-top: 1px solid var(--rule); }
.band-cta > * { max-width: var(--wide); margin-inline: auto; width: 100%; }
.cta-head { display: flex; flex-direction: column; gap: 16px; }
.signup { background: var(--card); border: 1px solid var(--rule);
          border-radius: 16px; padding: 30px; max-width: 44rem;
          box-shadow: var(--lift-1);
          display: flex; flex-direction: column; gap: 20px; margin-top: 10px; }
.fields { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 34rem) { .fields { grid-template-columns: repeat(2, 1fr); } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
label { font-family: var(--f-mono); font-size: 0.625rem; text-transform: uppercase;
        letter-spacing: 0.13em; color: var(--faint); }
input[type="email"], input[type="text"], textarea {
  font-family: var(--f-body); font-size: 0.9375rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-2);
  border-radius: 9px; padding: 12px 13px; width: 100%;
}
input:focus, textarea:focus { border-color: var(--accent); background: #fff; }
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { resize: vertical; min-height: 4.5rem; }

.consent { display: flex; gap: 11px; align-items: flex-start; }
.consent input { margin-top: 4px; flex: none; accent-color: var(--accent); }
.consent label { font-family: var(--f-body); font-size: 0.875rem; line-height: 1.55;
                 text-transform: none; letter-spacing: 0; color: var(--dim); }
.signup .btn { align-self: flex-start; background: var(--accent); border-color: var(--accent); }
.signup .btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.note { font-family: var(--f-mono); font-size: 0.6875rem; color: var(--faint); }
.note.bad { color: #c0392b; }
.done { gap: 14px; }
.kept { font-family: var(--f-mono); font-size: 0.75rem; color: var(--body);
        background: var(--paper); border: 1px solid var(--rule);
        border-radius: 9px; padding: 14px 16px; line-height: 1.7;
        overflow-wrap: anywhere; white-space: pre-wrap; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot { max-width: var(--wide); margin: 0 auto;
        padding-inline: var(--gutter); padding-block: 44px 68px;
        border-top: 1px solid var(--rule);
        display: flex; flex-direction: column; gap: 8px;
        color: var(--faint); font-size: 0.875rem; }
.foot-brand { display: flex; align-items: center; gap: 9px; color: var(--ink);
              margin-bottom: 6px; }
.foot .mark { width: 21px; height: 21px; }
.foot .wordmark { font-size: 1.1rem; }

/* ── arriving ───────────────────────────────────────────────────────────── */
/* Guarded on `.js`, which the script sets on the first line it runs. Without
   JavaScript nothing is hidden and nothing moves, which is the state a crawler
   and a screen reader both see. */
.js .reveal { opacity: 0; transform: translateY(16px);
              transition: opacity 0.62s cubic-bezier(0.22,0.61,0.36,1),
                          transform 0.62s cubic-bezier(0.22,0.61,0.36,1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media (max-width: 64rem) {
  /* The tilt is a flourish that costs legibility on a small screen, and the
     back panes have nowhere to go. */
  /* Stacked vertically, and the queue goes first: on a phone the panes are
     read in order rather than seen at once, and a column of journal lines is a
     dull thing to meet immediately after the headline. */
  .deck { padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .pane-back, .pane-mid { position: static; width: 100%; opacity: 1; }
  .pane-front { order: -1; }
}
/* The section links wrapped onto a second row of a sticky bar and then
   followed the reader down the page. The brand and the one action stay. */
@media (max-width: 48rem) {
  .nav nav { display: none; }
  .nav .btn-sm { margin-left: auto; }
  .fig-row { grid-template-columns: 1fr; }
}

/* The form is 44rem inside the band's own 70rem column, not 44rem centred in
   the viewport. Without the wrapper it floated to the middle of the page while
   the heading above it stayed left, which reads as two unrelated things. */
.cta-body { display: flex; flex-direction: column; }
.cta-body .signup { margin-inline: 0; }

/* ── where we do not use it ─────────────────────────────────────────────────
   Six refusals as a plain grid. Deliberately not cards with icons: the section
   earns its credibility by being specific and a little dry, and decoration
   would make it read as a features list, which is the one thing it is not. */
.nots { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule);
        border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
        margin-top: 34px; }
@media (min-width: 42rem) { .nots { grid-template-columns: 1fr 1fr; } }
@media (min-width: 66rem) { .nots { grid-template-columns: repeat(3, 1fr); } }
.not { background: var(--card); padding: 24px 26px; display: flex;
       flex-direction: column; gap: 9px; }
.not h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }
.not p { font-size: 0.9375rem; line-height: 1.55; color: var(--body); max-width: none; }

/* ── the films ──────────────────────────────────────────────────────────────
   One stage, two tabs. The stage keeps its 16:9 box whether or not a file has
   loaded, so nothing under it moves when one does — a page that jumps as its
   video arrives is a page that feels broken on a slow line.

   The frame is the app's own near-black rather than paper, because both films
   open and close on a black title card and a white surround would flash at
   both ends. */
.film { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }

.film-tabs { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 42rem) { .film-tabs { grid-template-columns: 1fr 1fr; } }

.film-tab {
  appearance: none; text-align: left; cursor: pointer; font: inherit;
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 14px 18px; display: flex; flex-direction: column; gap: 3px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.film-tab:hover { border-color: var(--rule-2); }
.film-tab.is-on { border-color: var(--accent-line); background: var(--accent-wash); }
.film-tab:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.ft-t { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem;
        letter-spacing: -0.015em; color: var(--ink); }
.ft-d { font-size: 0.875rem; color: var(--dim); }

.film-stage {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--night); border: 1px solid var(--rule);
  box-shadow: var(--lift-2);
}
.film-pane { margin: 0; }
.film-v { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

.film-note { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
             font-size: 0.875rem; color: var(--dim); }
.film-cap { flex: 1 1 auto; }

/* Shown only where autoplay was refused — a phone on low power, a browser with
   it switched off. A play button that is always there is a play button most
   people ignore; one that appears exactly when it is the only way to watch is
   the difference between a still frame and a film. */
.film-play {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.875rem;
  background: var(--ink); color: #fff; border: 0; border-radius: 999px;
  padding: 7px 18px;
}
.film-play:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* Only where the film is too small to read. On a desktop the frame is already
   a thousand pixels wide and a button offering to make it bigger is noise. */
.film-full {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.875rem;
  background: transparent; color: var(--accent-deep);
  border: 1px solid var(--rule-2); border-radius: 999px; padding: 7px 16px;
  display: none;
}
.film-full:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
@media (max-width: 42rem) { .film-full { display: inline-block; } }