/* ============================================================
   thewritersbox.com

   Built 2026-08-04 from SITE-CONTENT.md.

   THE RULES. Read these before changing anything.

   1. FLAT. No gradients anywhere. Not in a button, not in a
      background, not clipped to text. One flat ink per shape.
   2. HARD EDGES. Elevation is a solid offset block with no blur.
      No soft drop shadows. Ever.
   3. TWO INKS AND PAPER. Royal blue, deep black, and white.
      Greys are for secondary text, not for decoration.
   4. TYPE DOES THE WORK. Big, confident, well set. If a section
      looks empty, the type is too small, not the graphics too few.
   5. PRINTER'S MARKS, NOT EFFECTS. Crop marks, registration
      marks and rules are the motif. They belong to no genre and
      they match the app.

   The last version of this site was a dark starfield with a
   glowing translucent cube and gradient text. That is the house
   style of every AI-generated landing page, and it is the exact
   thing V5 spent months removing from the app. If anything below
   ever grows a blur radius or a colour ramp, it has gone wrong
   the same way.

   Everything is local. No CDN, no font service, no analytics,
   no library. Same rule as the app.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/Inter-400.woff2') format('woff2-variations'),
       url('assets/fonts/Inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/SpaceGrotesk-500.woff2') format('woff2-variations'),
       url('assets/fonts/SpaceGrotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/SourceSerif4-400i.woff2') format('woff2-variations'),
       url('assets/fonts/SourceSerif4-400i.woff2') format('woff2');
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/CourierPrime-400.woff2') format('woff2');
}

:root {
  --black:   #08080a;   /* the page */
  --ink:     #000000;   /* the deepest block, for full-bleed panels */
  --panel:   #101014;   /* a panel on the page */
  --panel-2: #16161c;   /* a panel on a panel */

  /* Sampled straight out of the logo file rather than guessed: #004cfb is the
     most common saturated pixel in the mark, and #142c63 is the navy of the
     box itself. The lighter blue exists only because #004cfb on near-black
     measures about 3:1, which is fine for a large block and not enough for
     body text or a link. */
  --blue:    #004cfb;   /* the one ink, straight off the logo */
  --blue-lt: #6d94ff;   /* the same ink, lifted, for links and small text */
  --blue-dk: #0039c4;   /* the same ink, pressed */
  --navy:    #142c63;   /* the box */

  --paper:   #ffffff;
  --text:    #f4f5f8;
  --text-2:  #b6bac6;
  --text-3:  #878c9c;
  --rule:    #26262e;
  --rule-2:  #3a3a46;

  --ok:      #35c46a;
  --warn:    #ffb020;

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-read: 'Source Serif 4', Georgia, serif;
  --font-mono: 'Courier Prime', 'Courier New', monospace;

  --page: 1200px;
  --gutter: clamp(20px, 4.5vw, 60px);

  /* Elevation. A solid block, offset, no blur. This is the only
     shadow in the file and every other one is a mistake. */
  --block: 5px 5px 0 var(--blue);
  --block-sm: 3px 3px 0 var(--blue);
  --block-w: 5px 5px 0 var(--paper);
}

* { box-sizing: border-box; }

html {
  overflow-x: clip;              /* `clip`, not `hidden`, and on html, not body.
                                    `hidden` computes the other axis to `auto`,
                                    which makes body its own scroll container and
                                    freezes window.scrollY at 0 for good. */
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue-lt); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--paper); }

:focus-visible { outline: 3px solid var(--blue-lt); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .98;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(44px, 8.5vw, 116px); }
h2 { font-size: clamp(32px, 5.6vw, 66px); }
h3 { font-size: clamp(19px, 2.1vw, 23px); letter-spacing: -.02em; line-height: 1.15; }
h4 { font-size: 17px; letter-spacing: -.01em; }

p { margin: 0 0 1em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- bands -------------------------------------------------------------
   A band is a horizontal stripe of the page. They alternate by value, and
   the blue one is used sparingly: twice a page at most, or it stops meaning
   anything. */

.band { border-top: 1px solid var(--rule); }
.band > .wrap { padding-block: clamp(56px, 8vw, 116px); }
.band-black { background: var(--black); }
.band-panel { background: var(--panel); }
.band-ink   { background: var(--ink); }
.band-blue  { background: var(--blue); border-top-color: var(--blue); color: var(--paper); }
.band-blue h1, .band-blue h2, .band-blue h3 { color: var(--paper); }
.band-blue p { color: #ffffffdd; }
.band-blue a { color: var(--paper); }
.band-blue .eyebrow { color: #ffffffcc; }
.band-blue .eyebrow::before { background: var(--paper); }

/* ---- header ------------------------------------------------------------ */

.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--black);
  border-bottom: 1px solid var(--rule);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 12px 30px;
  flex-wrap: wrap;
  min-height: 70px;
  padding-block: 12px;
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--text);
  text-decoration: none;
}
.mark:hover { color: var(--text); }
.mark img { width: 26px; height: 26px; }

/* One word, one flex item.
   `.mark` is a flex container with a 10px gap for the icon, and "Writers" and
   "<b>Box</b>" were two separate children, so the gap was landing between them
   and printing the name as "Writers Box". Wrapping the whole wordmark makes it
   a single item and the gap goes back to doing only its one job. */
.mark .wm { display: inline; white-space: nowrap; }

/* Box, in the brand blue, ramped. The flat rule governs objects: panels,
   cards, buttons and edges. The wordmark is type, and it is the one place the
   logo's own treatment wins over the site's. */
.mark b {
  font-weight: 700;
  background: linear-gradient(100deg, #2f6bff 0%, #004cfb 45%, #7ea3ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--blue-lt);   /* fallback wherever background-clip is unsupported */
  text-shadow: none;
}

.site-nav { display: flex; align-items: center; gap: 6px 26px; flex-wrap: wrap; }
.site-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--blue); }

/* ---- buttons -----------------------------------------------------------
   A button is a solid rectangle that moves into its own shadow when pressed,
   which is what a stamp does. Nothing fades. */

.btn {
  display: inline-block;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: 15px 30px;
  border: 2px solid var(--paper);
  background: transparent;
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--block-w);
  transition: transform .09s linear, box-shadow .09s linear, background .12s linear;
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--paper); }

.btn-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--paper);
  box-shadow: var(--block-w);
}
.btn-primary:hover { background: var(--blue-dk); border-color: var(--blue-dk); color: var(--paper); }
.btn-primary:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--paper); }

/* On a blue band the emphasis inverts: white block on blue ground. */
.band-blue .btn { border-color: var(--paper); box-shadow: 5px 5px 0 var(--ink); }
.band-blue .btn:hover { background: var(--paper); color: var(--blue); }
.band-blue .btn-primary { background: var(--paper); color: var(--blue); }
.band-blue .btn-primary:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 38px; }

/* ---- section furniture ------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-lt);
  margin: 0 0 26px;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--blue); flex: 0 0 auto; }

.lede { font-size: clamp(18px, 2.1vw, 23px); line-height: 1.5; color: var(--text-2); max-width: 60ch; }
h1 + .lede, h2 + .lede { margin-top: 26px; }
.lede b, .lede strong { color: var(--text); font-weight: 600; }

.rule { height: 1px; background: var(--rule); border: 0; margin: clamp(40px, 6vw, 72px) 0; }

/* ---- printer's marks ---------------------------------------------------
   The motif. Crop marks at the corners of a block, and a registration mark
   in the footer. Decoration that belongs to no genre. */

.cropped { position: relative; }
.cropped::before, .cropped::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  pointer-events: none;
}
.cropped::before { top: -1px; left: -1px; border-top: 2px solid var(--blue); border-left: 2px solid var(--blue); }
.cropped::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--blue); border-right: 2px solid var(--blue); }
.regmark { width: 26px; height: 26px; color: var(--rule-2); }

/* ---- hero --------------------------------------------------------------- */

/* The hero has to fit a 1280x720 laptop, which is the supported minimum.
   Sized only against viewport WIDTH, a 116px headline plus 120px of padding
   ate the whole screen and the artwork started below the fold: the reader
   landed on a hero whose subject was off-screen. Every vertical measure here
   is therefore bounded by vh as well. */
.hero { border-bottom: 1px solid var(--rule); }
.hero > .wrap { padding-block: clamp(40px, 7vh, 110px); }
/* The 96px ceiling is measured, not chosen. The wrap stops growing at --page,
   so past about 1700px wide the viewport keeps getting bigger while the type
   column does not, and at 116px "Write the script. / Keep the world." picked up
   a third line on a 1920 screen. 96px is the largest size that still sets it in
   two on the narrower of the two hero columns. */
.hero h1 { max-width: 18ch; font-size: clamp(40px, min(8.5vw, 9.6vh), 96px); }
.hero .lede { margin-top: clamp(16px, 2.4vh, 30px); font-size: clamp(18px, 2.3vw, 25px); }
.hero .btn-row { margin-top: clamp(20px, 3.4vh, 38px); }
.hero-line { margin-top: clamp(18px, 3vh, 34px); padding-top: clamp(12px, 2vh, 22px); }
.hero-line {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--text-3);
}
.hero-line b { color: var(--text-2); font-weight: 400; }

/* The one-line claim, set huge. Type as the graphic. */
.shout {
  font-family: var(--font-display);
  font-size: clamp(30px, 5.4vw, 62px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.02;
  max-width: 20ch;
}
.shout em { font-style: normal; color: var(--blue-lt); }
.band-blue .shout em { color: var(--ink); }

/* ---- screenshots --------------------------------------------------------
   Real screenshots of the real app. Set square, on a hard blue block, with no
   rounding and no glow. The frame is a printed frame. */

figure.shot { margin: 0; }
figure.shot img { border: 1px solid var(--rule-2); box-shadow: var(--block); background: var(--panel); }
figure.shot figcaption {
  margin-top: 18px;
  font-family: var(--font-read);
  font-style: italic;
  font-size: 15px;
  color: var(--text-3);
  max-width: 60ch;
}
.band-blue figure.shot img { box-shadow: 5px 5px 0 var(--ink); border-color: var(--ink); }

/* ---- two column --------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.split.wide-left  { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.wide-right { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split.top { align-items: start; }
.split.flip > *:first-child { order: 2; }
h2 + .split, .lede + .split { margin-top: clamp(34px, 5vw, 58px); }

/* ---- lists -------------------------------------------------------------- */

.ticks { list-style: none; margin: 30px 0 0; padding: 0; max-width: 58ch; }
.ticks li { position: relative; padding-left: 30px; margin-bottom: 16px; color: var(--text-2); }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 10px; height: 10px;
  background: var(--blue);
}
.band-blue .ticks li { color: #ffffffe0; }
.band-blue .ticks li::before { background: var(--ink); }
.ticks b { color: var(--text); font-weight: 650; }
.band-blue .ticks b { color: var(--paper); }

/* ---- cards --------------------------------------------------------------
   A card is a bordered rectangle. On hover it lifts by moving up and left
   into a hard blue block. No blur, no scale, no glow. */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 20px;
  margin-top: 42px;
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.card {
  border: 1px solid var(--rule-2);
  background: var(--panel);
  padding: 28px 26px;
  transition: transform .12s linear, box-shadow .12s linear, border-color .12s linear;
}
.card:hover { transform: translate(-4px, -4px); box-shadow: var(--block); border-color: var(--blue); }
.card h3 { margin-bottom: 12px; }
.card p { font-size: 15.5px; color: var(--text-2); margin-bottom: 0; }
.card .num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.05em;
  color: var(--blue-lt);
  display: block;
  line-height: 1;
  margin-bottom: 12px;
}
.band-blue .card { background: var(--ink); border-color: #ffffff3d; }
.band-blue .card:hover { box-shadow: 5px 5px 0 var(--paper); border-color: var(--paper); }

/* ---- the numbers -------------------------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  border: 1px solid var(--rule-2);
  margin-top: 48px;
}
.figures div { padding: 30px 26px; border-right: 1px solid var(--rule-2); }
.figures div:last-child { border-right: 0; }
.figures b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 68px);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .9;
  color: var(--blue-lt);
}
.figures span { display: block; margin-top: 14px; font-size: 14.5px; color: var(--text-3); line-height: 1.45; }
@media (max-width: 720px) {
  .figures div { border-right: 0; border-bottom: 1px solid var(--rule-2); }
  .figures div:last-child { border-bottom: 0; }
}

/* ---- "what's coming" ----------------------------------------------------
   This has to be impossible to mistake for a shipped feature. Outlined
   rather than filled, every item stamped NOT BUILT YET, and the whole block
   labelled. SITE-CONTENT.md section 0 is the reason: a site advertising
   features the product does not have fails the Paddle review and earns
   chargebacks from people who paid for them. */

.soon {
  border: 2px dashed var(--rule-2);
  padding: clamp(26px, 3.4vw, 40px);
  margin-top: 42px;
}
.soon > h3 {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--warn);
  margin-bottom: 26px;
}
.soon-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 24px; }
.soon-list h4 { margin-bottom: 8px; color: var(--text-2); }
.soon-list p { font-size: 15px; color: var(--text-3); margin: 0; }
.notyet {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid var(--warn);
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---- numbered steps ----------------------------------------------------- */

.steps { list-style: none; counter-reset: s; margin: 46px 0 0; padding: 0; }
.steps > li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 8px 24px;
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--rule);
}
.steps > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.steps > li::before {
  content: counter(s, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .85;
  color: var(--blue);
}
.steps h3 { margin-bottom: 10px; }
.steps p { font-size: 16px; color: var(--text-2); }
@media (max-width: 640px) {
  .steps > li { grid-template-columns: minmax(0, 1fr); }
  .steps > li::before { grid-row: auto; font-size: 34px; }
}

/* ---- the comparison table ----------------------------------------------- */

.cmp { margin-top: 40px; border: 1px solid var(--rule-2); overflow-x: auto; }
.cmp table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; }
.cmp th, .cmp td {
  text-align: left;
  padding: 17px 20px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  vertical-align: top;
}
.cmp thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel-2);
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -.02em;
  border-bottom: 2px solid var(--rule-2);
  white-space: nowrap;
}
.cmp thead th.us { background: var(--blue); color: var(--paper); }
.cmp tbody th {
  position: sticky; left: 0; z-index: 1;
  background: var(--panel);
  font-weight: 500;
  color: var(--text);
  min-width: 230px;
}
.cmp td { color: var(--text-2); }
.cmp td.us { background: #2b4bff1f; color: var(--text); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp .y { color: var(--ok); font-weight: 650; }
.cmp .n { color: var(--text-3); }
.cmp .soon-cell { color: var(--warn); }
/* The rows that carry the whole argument. */
.cmp tr.key th, .cmp tr.key td { background: var(--panel-2); }
.cmp tr.key td.us { background: var(--blue); color: var(--paper); font-weight: 650; }
.cmp tr.key th { color: var(--paper); font-weight: 650; }

.checked {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-3);
  border-left: 2px solid var(--blue);
  padding-left: 14px;
  margin-top: 24px;
}

/* ---- verdict blocks ----------------------------------------------------- */

.verdict { border-left: 4px solid var(--blue); padding: 4px 0 4px 26px; margin-top: 34px; }
.verdict h3 { margin-bottom: 10px; }
.verdict p { color: var(--text-2); font-size: 16.5px; }

/* ---- notes and placeholders --------------------------------------------- */

.note { border: 1px solid var(--rule-2); border-left: 4px solid var(--blue); padding: 24px 26px; margin-top: 40px; }
.note p { font-size: 16px; color: var(--text-2); }
.note strong { color: var(--text); }

.todo { border: 2px dashed var(--warn); padding: 20px 22px; margin-top: 30px; }
.todo p { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; color: var(--text-2); max-width: none; }
.todo p + p { margin-top: 10px; }
.todo b { color: var(--warn); }

/* ---- inline monospace ---------------------------------------------------- */

.f {
  font-family: var(--font-mono);
  font-size: .93em;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  padding: 1px 7px;
  color: var(--blue-lt);
  white-space: nowrap;
}
.band-blue .f { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---- a page of screenplay ------------------------------------------------
   White, because that is what a screenplay is printed on, and no theme gets
   an opinion about it. */

.page {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.32;
  background: var(--paper);
  color: #111;
  padding: 40px clamp(20px, 4vw, 54px);
  box-shadow: var(--block);
  overflow-x: auto;
}
.page .sh { font-weight: 700; margin: 0 0 1em; }
.page .ac { margin: 0 0 1em; max-width: none; }
.page .ch { margin: 0; padding-left: 36%; }
.page .pa { margin: 0; padding-left: 29%; }
.page .di { margin: 0 0 1em; padding-left: 22%; padding-right: 18%; max-width: none; }
.page .more { padding-left: 22%; margin: 0; }
.page .brk { display: flex; align-items: center; gap: 14px; margin: 1.5em 0; color: #7b8296; font-size: 11px; letter-spacing: .2em; }
.page .brk::before, .page .brk::after { content: ''; flex: 1; height: 1px; background: #ccd2e0; }
.page .star { color: #c42a1c; font-weight: 700; }

/* ---- download block ------------------------------------------------------ */

.getbox { border: 2px solid var(--blue); background: var(--panel); padding: clamp(26px, 3.4vw, 40px); margin-top: 42px; }
.getbox .file { font-family: var(--font-mono); font-size: clamp(15px, 1.8vw, 19px); color: var(--text); word-break: break-all; margin-bottom: 10px; }
.getbox .meta { font-family: var(--font-mono); font-size: 13.5px; color: var(--text-3); margin-bottom: 28px; }
.facts { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 30px 0 0; }
.facts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
.facts dd { margin: 0; font-family: var(--font-mono); font-size: 15px; color: var(--text); }

/* ---- the Windows warning --------------------------------------------------
   A diagram, and it says so on its face. Kept in Microsoft's blue rather than
   the brand blue, because the entire point is that the reader recognises it
   when it appears in front of them. The only place on this site allowed to use
   a colour that is not ours. */

.smartscreen { background: #0d47a1; color: var(--paper); padding: clamp(24px, 3vw, 34px); border: 1px solid #ffffff2e; }
.smartscreen .ss-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #ffffffb0; margin-bottom: 20px;
}
.smartscreen h3 { color: var(--paper); font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 12px; }
.smartscreen p { color: #ffffffdb; font-size: 15px; max-width: none; margin-bottom: .8em; }
.smartscreen .ss-app { font-size: 13.5px; color: #ffffffab; }
.smartscreen .ss-more {
  display: inline-block; font-size: 15px; font-weight: 600; color: var(--paper);
  border-bottom: 2px solid #ffd54f; padding-bottom: 2px; margin: 8px 0 22px;
}
.smartscreen .ss-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.smartscreen .ss-btn {
  font-size: 14px; font-weight: 600; padding: 11px 20px;
  border: 1px solid #ffffff8c; background: #ffffff1f; color: var(--paper);
}
.smartscreen .ss-btn.is-it { background: #ffd54f; border-color: var(--paper); color: #1a1300; }
.ss-point { margin-top: 22px; font-size: 14px; color: #ffffffdb; border-top: 1px solid #ffffff33; padding-top: 18px; }
.ss-point b { color: var(--paper); }
@media (max-width: 640px) {
  .smartscreen .ss-btns { flex-direction: column; }
  .smartscreen .ss-btn { width: 100%; text-align: center; }
}

/* ---- pricing plans --------------------------------------------------------
   Four flat rectangles. The founders one is filled with the brand blue rather
   than scaled up or given a glow, because on this site emphasis is a colour
   swap, never a size or a shadow. */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.plan {
  border: 1px solid var(--rule-2);
  background: var(--panel);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
}
.plan.is-founder { background: var(--blue); border-color: var(--blue); box-shadow: var(--block-w); }
.plan-flag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  border: 1px solid #ffffff66;
  padding: 4px 9px;
  align-self: flex-start;
  margin-bottom: 18px;
}
.plan-name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.plan.is-founder .plan-name { color: #ffffffcc; }
.plan-price {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .9;
  color: var(--text);
  margin-bottom: 14px;
}
.plan.is-founder .plan-price { color: var(--paper); }
.plan-price span {
  display: block;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-3);
  margin-top: 10px;
}
.plan.is-founder .plan-price span { color: #ffffffcc; }
.plan-note { font-size: 14.5px; color: var(--text-3); margin-bottom: 24px; min-height: 3em; }
.plan.is-founder .plan-note { color: #ffffffdd; }
.plan .btn { width: 100%; text-align: center; padding: 13px 18px; }
.plan-list { list-style: none; margin: 26px 0 0; padding: 26px 0 0; border-top: 1px solid var(--rule); }
.plan.is-founder .plan-list { border-top-color: #ffffff44; }
.plan-list li { position: relative; padding-left: 24px; margin-bottom: 11px; font-size: 14.5px; color: var(--text-2); }
.plan.is-founder .plan-list li { color: #ffffffe6; }
.plan-list li:last-child { margin-bottom: 0; }
.plan-list li::before { content: ''; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; background: var(--blue); }
.plan.is-founder .plan-list li::before { background: var(--paper); }

/* The trial leads the pricing page, so it is one wide card standing above the
   grid rather than a fifth column squeezed in beside the paid plans. */
.plan.is-trial {
  border-color: var(--blue);
  box-shadow: var(--block);
  margin-bottom: 46px;
  padding: 34px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0 44px;
  align-items: start;
}
.plan.is-trial .plan-flag { color: var(--blue-lt); border-color: var(--blue); }
.plan.is-trial .plan-price { color: var(--blue-lt); text-shadow: 0 0 38px rgba(0, 76, 251, .55); }
.plan.is-trial .plan-note { min-height: 0; }
.plan.is-trial .btn { width: auto; justify-self: start; }
.plan.is-trial .plan-list {
  grid-column: 2; grid-row: 1 / span 5;
  margin: 0; padding: 4px 0 4px 44px;
  border-top: 0; border-left: 1px solid var(--rule);
}
@media (max-width: 760px) {
  .plan.is-trial { display: flex; }
  .plan.is-trial .btn { width: 100%; text-align: center; }
  .plan.is-trial .plan-list {
    margin-top: 26px; padding: 26px 0 0;
    border-left: 0; border-top: 1px solid var(--rule);
  }
}

/* ============================================================
   THE HERO VIDEO

   It gets the whole width. In the old two-column hero it landed
   at 366px, where the interface is unreadable - and a recording
   nobody can read is worse than the still it replaced, because
   it costs half a megabyte to say nothing.

   So the headline stacks ABOVE it and the video runs the full
   measure of the page. The type column is capped separately, so
   the headline still reads at a sane line length.
   ============================================================ */

.hero-stacked > .wrap { padding-block: clamp(34px, 5vh, 68px) clamp(30px, 4vh, 54px); }
.hero-say { max-width: 62ch; }
.hero-stacked h1 { max-width: 20ch; }
.hero-stacked .macline { margin-top: 24px; }

.herostage {
  margin: clamp(30px, 4vw, 52px) 0 0;
  position: relative;
}
.herovid {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule-2);
  box-shadow: var(--block);
  background: var(--panel);
}
.hero-stacked .hero-line { margin-top: clamp(26px, 3vw, 40px); }

/* Past about 1500px the video would get bigger than it was ever recorded and
   start to soften. Cap it and centre it rather than letting it stretch. */
@media (min-width: 1500px) { .herostage { max-width: 1240px; margin-inline: auto; } }

/* A pull quote, for the half of a split layout that would otherwise be a
   column of nothing. Type doing the work, which is the whole house style. */
.pull {
  margin: 30px 0 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.9vw, 38px);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.08;
  color: var(--blue-lt);
  text-shadow: 0 0 38px rgba(0, 76, 251, .45);
  max-width: 18ch;
}
.pull + .pull-by {
  margin-top: 18px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}

/* ============================================================
   THE FOUNDERS EDITION

   The one deliberate break from blue and black in the whole
   stylesheet, and it earns it: this is the only thing being sold,
   it is a limited run of 150, and it should feel like a ticket
   rather than a row in a pricing table.

   Red carpet and gold leaf. Still flat, still hard-edged, still
   one offset block for elevation - the rules hold, only the ink
   changes. Nothing else on the site may use these two colours,
   or they stop meaning "founders".
   ============================================================ */

:root {
  --red:      #7d0f1c;   /* deep carpet red, dark enough for white type */
  --red-dk:   #4a0810;
  --gold:     #e3bd6b;
  --gold-dim: #b8934a;
}

.founders {
  position: relative;
  background: var(--red);
  border: 1px solid var(--gold-dim);
  box-shadow: 10px 10px 0 var(--red-dk);
  padding: clamp(34px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
@media (max-width: 820px) { .founders { grid-template-columns: minmax(0, 1fr); } }

/* the gold hairline that runs the full width just inside the edge */
.founders::before {
  content: '';
  position: absolute; inset: 9px;
  border: 1px solid rgba(227, 189, 107, .28);
  pointer-events: none;
}

.founders .flag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: 6px 12px; margin-bottom: 22px;
}
.founders h2 {
  color: var(--paper);
  font-size: clamp(30px, 3.6vw, 46px);
  margin-bottom: 8px;
}
.founders .price {
  font-family: var(--font-display);
  font-size: clamp(66px, 9vw, 118px);
  font-weight: 700; letter-spacing: -.05em; line-height: .9;
  color: var(--gold);
  margin: 18px 0 6px;
}
.founders .price small {
  display: block; margin-top: 12px;
  font-family: var(--font-ui); font-size: 16px; font-weight: 400;
  letter-spacing: 0; color: rgba(255, 255, 255, .82);
}
.founders p { color: rgba(255, 255, 255, .88); max-width: 42ch; }
.founders .gets { list-style: none; margin: 0; padding: 0; }
.founders .gets li {
  position: relative; padding-left: 30px; margin-bottom: 15px;
  color: var(--paper); font-size: 16.5px; line-height: 1.6;
}
.founders .gets li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 10px; height: 10px; background: var(--gold);
}
.founders .gets li b { color: var(--gold); font-weight: 600; }

.founders .btn {
  border-color: var(--gold); color: var(--paper);
  box-shadow: 5px 5px 0 var(--red-dk);
}
.founders .btn::before { background: var(--gold); }
.founders .btn:hover { color: var(--red-dk); }

/* The badge itself, drawn rather than described, because "a founder badge"
   means nothing until somebody can see one. */
.badge {
  width: 92px; height: 92px; flex: none;
  display: grid; place-items: center;
  border: 2px solid var(--gold);
  background: var(--red-dk);
  box-shadow: 0 0 34px rgba(227, 189, 107, .22);
}
.badge span {
  font-family: var(--font-display); font-size: 34px; font-weight: 700;
  color: var(--gold); line-height: 1; letter-spacing: -.03em;
}
.badge-row { display: flex; align-items: center; gap: 22px; margin-top: 34px;
  padding-top: 30px; border-top: 1px solid rgba(227, 189, 107, .28); }
.badge-row p { margin: 0; font-size: 15.5px; }

/* ============================================================
   LEGAL PAGES

   Terms, privacy and the beta terms are long unbroken prose, and
   they were running at the full 1160px container with default
   spacing, which is unreadable: the eye loses the line coming
   back. Nobody reads a privacy notice for pleasure, so the least
   this can do is not fight them.

   A real measure, air between the sections, and headings that
   actually separate rather than sitting flush against the
   paragraph above.
   ============================================================ */

.legal { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 120px); }
.legal > * { max-width: 68ch; }
.legal h1 { font-size: clamp(34px, 5vw, 58px); margin-bottom: 10px; }
.legal h2 {
  font-size: clamp(21px, 2.4vw, 27px);
  margin: clamp(44px, 5vw, 64px) 0 16px;
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--rule);
  max-width: 68ch;
}
.legal h2:first-of-type { margin-top: clamp(34px, 4vw, 48px); }
.legal h3 { margin: 30px 0 10px; }
.legal p { font-size: 16.5px; line-height: 1.72; margin-bottom: 1.15em; color: var(--text-2); }
.legal p strong, .legal li strong { color: var(--text); font-weight: 600; }
.legal ul, .legal ol { margin: 0 0 1.4em; padding-left: 0; list-style: none; max-width: 68ch; }
.legal li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  font-size: 16.5px; line-height: 1.7; color: var(--text-2);
}
.legal ul > li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--blue);
}
.legal ol { counter-reset: l; }
.legal ol > li { counter-increment: l; }
.legal ol > li::before {
  content: counter(l) '.'; position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 13px; color: var(--blue-lt);
}
.legal a { color: var(--blue-lt); }
.legal table { max-width: 68ch; margin: 0 0 1.6em; border-collapse: collapse; }
.legal th, .legal td {
  text-align: left; padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--rule); font-size: 16px; color: var(--text-2);
}
.legal th { color: var(--text); font-weight: 600; }

/* The consent line under every email box.
   Normal reading size on purpose. This sentence is what makes an address
   lawful to email later, and a permission nobody could read is not one. Never
   shrink it, never grey it out, and never pre-tick anything near it. */
.consent {
  font-size: 15px; line-height: 1.5; color: var(--text-2);
  margin: 0 0 22px; max-width: 46ch;
  border-left: 3px solid var(--blue); padding-left: 14px;
}
.consent a { color: var(--blue-lt); }

/* ---- the 404 uses this name for its button row --------------------------- */
.hero-cta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 38px; }
@media (max-width: 640px) { .hero-cta { gap: 14px; } .hero-cta .btn { width: 100%; text-align: center; } }

/* ============================================================
   THE TWO WAYS IN

   The front door is no longer Download. A Mac visitor has no
   installer and never will, so the fork has to be visible above
   the fold and both halves have to look like real choices.
   Neither is "the lesser one".
   ============================================================ */

.forks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 38px; }
.fork {
  border: 1px solid var(--rule-2);
  background: var(--panel);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}
.fork.is-lead { border-color: var(--blue); box-shadow: var(--block); }
.fork .ico { width: 30px; height: 30px; color: var(--blue-lt); margin-bottom: 18px; }
.fork h3 { margin-bottom: 10px; }
.fork .who {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-lt); margin-bottom: 16px;
}
.fork p { font-size: 15.5px; color: var(--text-2); margin-bottom: 22px; flex: 1; }
.fork .btn { width: 100%; text-align: center; }
.fork .under { margin-top: 14px; font-size: 13.5px; color: var(--text-3); }

/* One line, above the fold, that a Mac visitor cannot miss.
   SITE-AT-LAUNCH.md section 1 asks for exactly this and it is the
   only reason the home hero was re-cut, so the margins here are
   measured rather than eyeballed: at 1440x900 the whole box has to
   finish before 900px with the buttons already above it. */
.macline {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid var(--rule-2); border-left: 3px solid var(--blue);
  padding: 11px 18px; margin-top: 18px;
  font-size: 15.5px; line-height: 1.45; color: var(--text-2);
}
.macline b { color: var(--text); }
.hero .macline { max-width: 60ch; }

/* ============================================================
   THE FOUNDERS COUNTER

   Hidden until the service answers. It never falls back to a
   guess, a remembered value, or zero: if the call fails the whole
   block stays out of the document. A number that might be wrong
   is worse here than no number at all.

   js/account.js adds .is-live, and only does so once at least one
   founder place has actually been claimed - so on launch day this
   block is simply absent rather than announcing a zero.
   ============================================================ */

.counter { display: none; border: 1px solid var(--rule-2); background: var(--panel); padding: 26px 28px; margin-top: 30px; }
.counter.is-live { display: block; }
.counter .figs { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.counter b {
  font-family: var(--font-display); font-size: clamp(38px, 5vw, 54px); font-weight: 700;
  letter-spacing: -.05em; line-height: 1; color: var(--blue-lt);
  text-shadow: 0 0 34px rgba(0,76,251,.5); font-variant-numeric: tabular-nums;
}
.counter .of { font-size: 17px; color: var(--text-3); }
.counter .track { height: 10px; background: var(--panel-2); border: 1px solid var(--rule); margin-top: 18px; }
.counter .track i { display: block; height: 100%; background: var(--blue); box-shadow: var(--lit); }
.counter .say { margin-top: 14px; font-size: 14.5px; color: var(--text-3); }

/* ============================================================
   FORMS

   Used by sign up, sign in, forgot and reset. The service answers
   identically whether an address is already registered or not, so
   the UI must never imply otherwise: every success reads "check
   your email", whatever actually happened underneath.
   ============================================================ */

.formcard { border: 1px solid var(--rule-2); background: var(--panel); padding: clamp(28px, 4vw, 44px); max-width: 560px; }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }
.field input {
  width: 100%; font: inherit; font-size: 16px;
  padding: 14px 16px;
  background: var(--black); color: var(--text);
  border: 1px solid var(--rule-2);
}
.field input:focus { outline: none; border-color: var(--blue); box-shadow: var(--lit-sm, 0 0 0 3px rgba(0,76,251,.25)); }
.field input:disabled { opacity: .5; }
.field .hint { margin-top: 9px; font-size: 13.5px; color: var(--text-3); }
.field.bad input { border-color: var(--warn); }
.field.bad .hint { color: var(--warn); }
.formcard .btn { width: 100%; text-align: center; }
.formcard .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.formalt { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--text-3); }

/* What the form says back. Never dismissed automatically, because a writer
   may have looked away, and never coloured green for a failure. */
.said { display: none; padding: 20px 22px; margin-bottom: 26px; font-size: 15.5px; }
.said.on { display: block; }
.said.good { border: 1px solid var(--ok); border-left: 4px solid var(--ok); background: rgba(53,196,106,.08); color: var(--text); }
.said.bad  { border: 1px solid var(--warn); border-left: 4px solid var(--warn); background: rgba(255,176,32,.08); color: var(--text); }
.said b { display: block; margin-bottom: 6px; }

/* ============================================================
   THE FEATURE GALLERY AND THE THEME SWITCHER
   ============================================================ */

.shot-wide { margin: 38px 0 0; }
.shot-wide img { width: 100%; border: 1px solid var(--rule-2); box-shadow: var(--block); background: var(--panel); }
.shot-wide figcaption { margin-top: 16px; font-family: var(--font-read); font-style: italic; font-size: 15px; color: var(--text-3); max-width: 64ch; }

.themes { margin-top: 38px; }
.theme-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.theme-tab {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 18px; cursor: pointer;
  background: transparent; color: var(--text-3);
  border: 1px solid var(--rule-2);
}
.theme-tab:hover { color: var(--text); border-color: var(--blue); }
.theme-tab[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: var(--paper); box-shadow: var(--lit); }
.theme-stage { position: relative; border: 1px solid var(--rule-2); box-shadow: var(--block); background: var(--panel); }
.theme-stage img { display: block; width: 100%; }
/* Every frame is stacked; only the chosen one is opaque. Same screen, same
   project, same scroll position in all eight, so it reads as one app changing
   rather than eight different pictures. */
.theme-stage img { position: absolute; inset: 0; opacity: 0; transition: opacity .35s linear; }
.theme-stage img:first-child { position: relative; }
.theme-stage img.on { opacity: 1; z-index: 1; }

/* ---- question and answer -------------------------------------------------- */

.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 30px 48px; margin-top: 44px; }
.qa h3 { margin-bottom: 10px; }
.qa p { font-size: 15.5px; color: var(--text-2); margin-bottom: 0; }

/* ---- footer --------------------------------------------------------------- */

.site-foot { background: var(--ink); border-top: 1px solid var(--rule); padding-block: 56px 44px; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 30px 64px; justify-content: space-between; align-items: flex-start; }
.site-foot p { color: var(--text-3); font-size: 15px; max-width: 44ch; }
.site-foot nav { display: flex; flex-direction: column; gap: 12px; }
.site-foot nav a { color: var(--text-3); text-decoration: none; font-size: 15px; }
.site-foot nav a:hover { color: var(--paper); }
.foot-bar {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-3);
}

/* ============================================================
   MOTION

   The brief rejected "a dark starfield with a glowing translucent
   cube", and it was right to. That is not an argument against
   movement, it is an argument against a particular kind: soft,
   floaty, ambient, blurred.

   So everything here is the opposite of that. Things SNAP, SLIDE,
   REGISTER and STAMP, the way a printing plate locks into place.
   Nothing fades in from nowhere, nothing drifts, nothing loops for
   decoration, and no animated thing ever grows a blur radius.

   Rules:
     - Every transform is on a straight or near-straight easing.
       No springs, no bounce, no float.
     - Motion is short. 200 to 500ms. A slow animation is a slow site.
     - Only transform and opacity are animated, so the compositor
       does the work and nothing reflows.
     - All of it stops for prefers-reduced-motion, and content that
       was waiting to be revealed simply appears.
   ============================================================ */

/* ---- scroll reveal ------------------------------------------------------
   Blocks arrive by sliding up a short distance and squaring off. The
   un-revealed state only exists when the script is running, so with
   JavaScript off the whole page is simply visible. */

/* Quick, and it starts before you get there. Logan scrolled at a normal speed
   and arrived at sections that were still invisible, reading them as an empty
   page. Halved from .42s, and the stagger cut from 70ms a step to 45ms: the
   whole point is that the page feels assembled, not that anybody watches it
   assemble. If in doubt, faster. */
.js [data-rise] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .22s linear, transform .26s cubic-bezier(.2, .7, .3, 1);
}
.js [data-rise].seen { opacity: 1; transform: none; }
.js [data-rise="2"] { transition-delay: .045s; }
.js [data-rise="3"] { transition-delay: .09s; }
.js [data-rise="4"] { transition-delay: .135s; }

/* A rule that draws itself across as it comes into view. */
.js [data-draw] { transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.js [data-draw].seen { transform: scaleX(1); }

/* A block that wipes in from the left behind a hard edge. Used on the blue
   bands, so the colour arrives like ink hitting paper rather than fading up. */
.js [data-wipe] { clip-path: inset(0 100% 0 0); transition: clip-path .55s cubic-bezier(.2,.7,.3,1); }
.js [data-wipe].seen { clip-path: inset(0 0 0 0); }

/* ---- page transitions ---------------------------------------------------
   A blue plate wipes across, the next page loads behind it, the plate wipes
   off. It is short on purpose: 260ms out, 260ms back. Anything longer and it
   stops feeling fast and starts feeling like waiting. */

#plate {
  position: fixed;
  inset: 0;
  background: var(--blue);
  z-index: 200;
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
#plate.out { transform: scaleY(1); transform-origin: bottom; transition: transform .26s cubic-bezier(.5,0,.75,0); }
#plate.in  { transform: scaleY(0); transform-origin: top;    transition: transform .26s cubic-bezier(.25,1,.5,1); }

/* ---- buttons that do something ------------------------------------------
   The press already moves the button into its own shadow. This adds a hard
   block of colour that wipes across the face on hover, with no blur and no
   glow, so it reads as a second impression rather than a light. */

.btn { position: relative; overflow: hidden; z-index: 0; }
.btn > span { position: relative; z-index: 2; }
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s cubic-bezier(.2,.7,.3,1);
  z-index: 1;
}
.btn:hover::before { transform: scaleX(1); }
.btn-primary::before { background: var(--ink); }
.band-blue .btn::before { background: var(--paper); }
.band-blue .btn-primary::before { background: var(--ink); }
/* The label has to sit above the wipe and change with it. */
.btn:hover { color: var(--ink); background: transparent; }
.btn-primary:hover { color: var(--paper); background: var(--blue); }
.band-blue .btn:hover { color: var(--blue); }
.band-blue .btn-primary:hover { color: var(--paper); }

/* ---- the counting figures ------------------------------------------------ */
.figures b { font-variant-numeric: tabular-nums; }

/* ============================================================
   THE BOX

   Logan's logo, rebuilt as a real object in three dimensions:
   six faces, four open flaps, the W on the front, and a script
   page standing inside it.

   Two reasons it is built rather than dropped in as the picture.

   1. The supplied artwork has garbled text on its page. At logo
      size that is illegible and harmless, but the hero wants it
      big, and big is exactly where "INT. WRTIEN'S ROWN" becomes
      a problem on a screenwriting product. Rebuilt, the page
      carries real, correctly formatted screenplay.

   2. Every face is a flat fill of a brand colour with a hard
      edge. No gradient, no gloss, no glow. It is the logo as a
      printed object, which is the whole design language.
   ============================================================ */

/* ============================================================
   THE HERO OBJECT

   This was a box assembled out of CSS 3D transforms. It is now a
   path-traced render from Blender, because CSS cannot do occlusion,
   bevelled edges or real shading, and it showed: flaps fought each
   other for depth order, the page kept losing the z-test against the
   front face, and it read as choppy however the numbers were tuned.

   The render solves all of that at source. What is left for CSS is
   the one thing it is good at: moving the finished object.
   ============================================================ */

.heroart {
  position: relative;
  display: block;
  width: 100%;
  max-width: min(560px, 46vh);
  margin-inline: auto;
  /* The render carries its own contact shadow and lit rim, so it needs
     no filter, no border and no drop shadow. */
}
.heroart img { width: 100%; height: auto; display: block; }

/* The pool of light it stands in. Light may glow; objects may not. */
.heroart::before {
  content: '';
  position: absolute;
  left: 50%; top: 52%;
  width: 116%; height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0,76,251,.26), rgba(0,76,251,.07) 55%, transparent 72%);
  z-index: -1;
  pointer-events: none;
}

/* It arrives once: rises, settles, and is then still. */
.js .heroart img { animation: arrive .95s cubic-bezier(.16,.9,.28,1) both .15s; }
@keyframes arrive {
  from { opacity: 0; transform: translateY(46px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* And it leans a little towards the pointer, which is the whole reason to
   keep it in the page rather than bake it into the background. */
.heroart { transition: transform .5s cubic-bezier(.2,.7,.3,1); transform-style: preserve-3d; }

.stage {
  perspective: 1500px;
  perspective-origin: 50% 40%;
  /* Top-heavy on purpose. The page stands more than a box-height proud of the
     rim, so the room it needs is all above centre. Measured: at even padding
     the sheet cleared the top of the stage and the hero, which is
     overflow:hidden, took the top off it. */
  padding-top: clamp(60px, 14vh, 190px);
  padding-bottom: clamp(16px, 3vh, 40px);
}
/* The pool of light the object stands in. This is the one place a soft edge
   is allowed, because it is light rather than an object, and it is what makes
   the box read as sitting in a room. */
.stage { position: relative; }
.stage::before {
  content: '';
  position: absolute;
  left: 50%; top: 46%;
  width: 118%; height: 78%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0,76,251,.30), rgba(0,76,251,.08) 55%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.boxwrap {
  position: relative;
  z-index: 1;
  /* Sized against the viewport HEIGHT as well as its width. The supported
     minimum is 1280x720, and on a 720px-tall screen a box scaled only by width
     put the page below the fold: the reader arrived at a hero whose whole
     point was hanging off the bottom of the screen. 28vh keeps the object and
     its page inside a short laptop screen and it still grows on a big one. */
  width: min(500px, 84vw, 62vh);
  height: min(430px, 74vw, 54vh);
  margin-inline: auto;
  transform-style: preserve-3d;
  transform: rotateX(-16deg) rotateY(-26deg);
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
  /* half the box, so every face can refer to it */
  --d: calc(min(500px, 84vw, 62vh) * .27);
}
.boxwrap > * { position: absolute; transform-style: preserve-3d; }

.bx {
  width: calc(var(--d) * 2);
  height: calc(var(--d) * 2);
  left: 50%; top: 62%;
  margin-left: calc(var(--d) * -1);
  margin-top: calc(var(--d) * -1);
  border: 2px solid #061024;
}
.bx-front  { background: #16274f; transform: translateZ(var(--d)); box-shadow: inset 0 0 0 2px rgba(0,76,251,.35); }
.bx-back   { background: #0b1428; transform: rotateY(180deg) translateZ(var(--d)); }
.bx-right  { background: #0f1c3a; transform: rotateY(90deg) translateZ(var(--d)); }
.bx-left   { background: #0b1428; transform: rotateY(-90deg) translateZ(var(--d)); }
.bx-bottom { background: #080f20; transform: rotateX(-90deg) translateZ(var(--d)); }

/* the W, flat, on the front face, lit */
.bx-front .w {
  position: absolute;
  inset: 20%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: calc(var(--d) * .8);
  font-weight: 700;
  color: var(--paper);
  background: var(--blue);
  letter-spacing: -.06em;
  line-height: 1;
  box-shadow: 0 0 34px rgba(0,76,251,.75);
}

/* ---- the flaps ----------------------------------------------------------
   These were the bug. They were hinged at `top` while positioned from the
   box centre, so they folded about the wrong line and read as barely moving.
   Each one now sits ON the rim, hinges along the rim edge it belongs to, and
   folds outward past ninety degrees so it visibly hangs down the outside of
   the box. */
.flap {
  width: calc(var(--d) * 2);
  /* Shortened from .9. At that length adjacent flaps met at the corners and
     overlapped each other in 3D, which is what read as choppy: four quads
     fighting for the same pixels rather than four flaps hanging off a rim. */
  height: calc(var(--d) * .58);
  left: 50%;
  top: 62%;
  margin-left: calc(var(--d) * -1);
  margin-top: calc(var(--d) * -1);
  background: #16274f;
  border: 2px solid #061024;
  box-shadow: inset 0 -3px 0 var(--blue);
  transform-origin: center top;
  backface-visibility: visible;
}
.flap-n { transform: translateZ(calc(var(--d) * -1)) rotateX(-128deg); }
.flap-s { transform: translateZ(var(--d)) rotateX(128deg); }
.flap-w { transform: translateX(calc(var(--d) * -1)) rotateY(90deg) rotateX(128deg); }
.flap-e { transform: translateX(var(--d)) rotateY(-90deg) rotateX(128deg); }

/* ---- the page -----------------------------------------------------------
   Made much bigger and lifted much further out of the box, because the whole
   point is that you can read it. It sits proud of the rim by more than a
   full box height. */
/* Sized by measurement, not by eye. At 1.62 wide the dialogue wrapped to four
   lines and the block ran 37px past the bottom of the page. Wider, a little
   taller, slightly smaller type and shallower indents: the eight lines of
   screenplay now fit with room to spare, which is the entire point of putting
   a readable page in the hero. */
.sheet {
  /* Base size allows for perspective. Sitting 1.25d nearer the camera at a
     1500px perspective magnifies it by about 13%, which pushed the bottom of
     the page below the fold at the previous size. */
  width: calc(var(--d) * 1.85);
  height: calc(var(--d) * 2.28);
  left: 50%; top: 62%;
  margin-left: calc(var(--d) * -.925);
  margin-top: calc(var(--d) * -1);
  background: var(--paper);
  border: 1px solid #b9c2d4;
  padding: calc(var(--d) * .13) calc(var(--d) * .11);
  font-family: var(--font-mono);
  font-size: calc(var(--d) * .096);
  line-height: 1.46;
  color: #10131a;
  /* Lifted by measurement. The page is 2.6d tall and hangs from a container
     whose top sits 1d above the box centre, so at -1.78d its bottom 0.8d sat
     BELOW the rim, where the front face draws over it. That is why the script
     was cut off mid-line in the middle of a word.

     At -2.45d the bottom of the page tucks just inside the rim and everything
     above it, which is all eight lines, is clear of the box. */
  /* The page sits NEARER the camera than the front face.
     Lifting it in Y was not enough: at z = 0 it shares the box's centre plane,
     so wherever it overlapped the front face in projection the front face won
     the depth test and ate the bottom of the script, mid-word. Measured at
     4% of the page clear of the box.
     At z = 1.25d it is in front of the front face (z = 1d), so it cannot be
     occluded by anything, whatever the Y maths does. It reads as the page
     rising out of the box and leaning towards you. */
  transform: translateY(calc(var(--d) * -2.35)) translateZ(calc(var(--d) * 1.25)) rotateX(4deg);
  text-align: left;
  box-shadow: 0 0 50px rgba(120,170,255,.35);
}
.sheet p { margin: 0 0 .62em; max-width: none; }
.sheet .c { padding-left: 30%; }
.sheet .p { padding-left: 22%; }
.sheet .d { padding-left: 12%; padding-right: 4%; }
.sheet .r { text-align: right; }

/* ---- the intro ----------------------------------------------------------
   Staged rather than all at once, because "it just kind of shows up" was the
   note. Box arrives, flaps unfold, page climbs out, W stamps on. About 1.9s
   end to end, which is long for a web animation and right for one that only
   ever plays once. */
.js .boxwrap { animation: land .85s cubic-bezier(.16,.9,.3,1) both .1s; }
@keyframes land {
  from { transform: rotateX(-16deg) rotateY(-26deg) translateY(-70px) scale(.86); opacity: 0; }
  to   { transform: rotateX(-16deg) rotateY(-26deg) translateY(0) scale(1); opacity: 1; }
}

/* Each flap starts closed, flat across the rim, and folds out in turn. */
.js .flap { animation: fold .62s cubic-bezier(.2,.8,.26,1) both; }
.js .flap-n { animation-delay: .70s; }
.js .flap-e { animation-delay: .80s; }
.js .flap-w { animation-delay: .90s; }
.js .flap-s { animation-delay: 1.0s; }
@keyframes fold { from { transform: var(--shut); } }
.js .flap-n { --shut: translateZ(calc(var(--d) * -1)) rotateX(-4deg); }
.js .flap-s { --shut: translateZ(var(--d)) rotateX(4deg); }
.js .flap-w { --shut: translateX(calc(var(--d) * -1)) rotateY(90deg) rotateX(4deg); }
.js .flap-e { --shut: translateX(var(--d)) rotateY(-90deg) rotateX(4deg); }

/* The page climbs out of the box after the flaps are clear. */
.js .sheet { animation: climb .8s cubic-bezier(.16,.9,.3,1) both 1.15s; }
@keyframes climb {
  from { transform: translateY(calc(var(--d) * .1)) translateZ(calc(var(--d) * 1.25)) rotateX(4deg); opacity: 0; }
}
/* And the W stamps on last, hard, the way a press hits. */
.js .bx-front .w { animation: stamp .3s cubic-bezier(.3,1.5,.5,1) both 1.55s; }
@keyframes stamp {
  from { transform: scale(1.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* The type column takes the larger share. At an even split on a 1440x900
   laptop the column came out 508px, the headline needed 629px at its clamped
   size, and "Write the script. / Keep the world." silently became FOUR lines
   instead of two - 339px of headline, which pushed the Mac sentence and then
   the buttons below the fold. Both of those are load-bearing: SITE-AT-LAUNCH.md
   section 1 requires the Mac line above the fold, and the primary call to
   action has to be up there with it. */
.hero-3d { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); gap: clamp(30px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) {
  .hero-3d { grid-template-columns: minmax(0, 1fr); }
  .stage { order: -1; }
}

/* ============================================================
   GLOW

   Logan asked for the site to glow more. The flat rule stands for
   everything that is an OBJECT: panels, cards, tables and buttons
   still have hard edges and solid offset shadows, no soft drop
   shadows and no colour ramps.

   What is allowed to glow is LIGHT. There is a real precedent in
   print for exactly this: a riso fluorescent ink looks like it is
   lit from behind while everything around it stays flat. So the
   brand blue, and only the brand blue, gets to throw light. Grey
   never glows. Black never glows. Text never glows except the one
   headline accent.

   If this ever spreads to a card border or a body paragraph it has
   gone wrong and it will start looking like the AI landing page
   the brief threw out.
   ============================================================ */

:root {
  --lit:    0 0 30px rgba(0, 76, 251, .55);
  --lit-lg: 0 0 60px rgba(0, 76, 251, .45);
}

/* the primary button is the brightest thing on any page */
.btn-primary { box-shadow: var(--block-w), var(--lit); }
.btn-primary:hover { box-shadow: var(--block-w), var(--lit-lg); }
.btn-primary:active { box-shadow: 0 0 0 var(--paper), var(--lit); }

/* the eyebrow rule, the tick squares and the step numerals are lit ink */
.eyebrow::before { box-shadow: var(--lit); }
.ticks li::before, .plan-list li::before { box-shadow: 0 0 14px rgba(0, 76, 251, .7); }
.steps > li::before { text-shadow: 0 0 34px rgba(0, 76, 251, .8); }
.figures b { text-shadow: 0 0 40px rgba(0, 76, 251, .55); }
.card .num { text-shadow: 0 0 30px rgba(0, 76, 251, .6); }

/* a card lifts into a lit block */
.card:hover { box-shadow: var(--block), var(--lit); }

/* the blue bands carry a band of light along the top edge, so a solid colour
   block arrives as something switched on rather than something painted */
.band-blue { position: relative; box-shadow: 0 0 90px rgba(0, 76, 251, .35); }
.band-blue::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: #7ea3ff;
  box-shadow: 0 0 26px 3px rgba(126, 163, 255, .9);
}

/* the founders plan is the one card that is switched on */
.plan.is-founder { box-shadow: var(--block-w), var(--lit-lg); }

/* the mark in the header, and the accent in a headline */
.mark b { text-shadow: 0 0 26px rgba(0, 76, 251, .8); }
.lit { color: var(--blue-lt); text-shadow: 0 0 38px rgba(0, 76, 251, .8); }

/* the hero sits in a pool of light rather than on a flat ground */
.hero { position: relative; overflow: hidden; }
/* Light from above, and it has to reach nothing before it runs out of box.
   Two goes at this now. The first was a 900px disc that read as a strange blue
   circle behind the headline. The second still had a visible horizontal seam,
   because the gradient was only down to `transparent 72%` when the element's
   own edge arrived and cut it off. A gradient that has not finished fading when
   its box ends is a hard line, every time.
   So: the fade completes at 55% of a box that is 900px tall, which puts the
   last visible blue a long way above the bottom edge. Nothing to see. */
.hero::before {
  content: '';
  position: absolute;
  left: 50%; top: -320px;
  width: 170%; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 45% 42% at 50% 42%,
              rgba(0, 76, 251, .17), rgba(0, 76, 251, 0) 55%);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }

/* a hairline of light under the sticky header once it is doing its job */
.site-head { box-shadow: 0 1px 0 rgba(0, 76, 251, .35); }

@media (prefers-reduced-motion: reduce) {
  /* the light stays, only the movement stops */
  .js .boxwrap, .js .flap, .js .sheet, .js .bx-front .w { animation: none !important; }
}

/* ---- narrower windows ------------------------------------------------------ */

@media (max-width: 900px) {
  .split, .split.wide-left, .split.wide-right { grid-template-columns: minmax(0, 1fr); }
  .split.flip > *:first-child { order: 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-head .wrap { min-height: 58px; }
  .site-nav { gap: 4px 18px; }
  .site-nav a { font-size: 14px; padding: 10px 0; }
  .btn { width: 100%; text-align: center; }
  .btn-row { gap: 14px; }
  .site-foot nav { gap: 2px; }
  .site-foot nav a { padding: 11px 0; }
  .page { font-size: 11.5px; }
  .page .di { padding-right: 6%; }
  /* A long path in a nowrap span pushed the download page 114px wider than the
     phone it was being read on. Nothing is worth a sideways scroll, so on a
     narrow screen these break mid-token. */
  .f { white-space: normal; overflow-wrap: anywhere; }
}
@media (min-width: 1800px) { :root { --page: 1340px; } }

/* ---- reduced motion ---------------------------------------------------------
   There is almost nothing to switch off, which is the point. What remains is
   the press on a button and the lift on a card, and both stop here. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}