/* SupahPost marketing site — Design System C, at MARKETING volume.
   ============================================================================================

   THE ONE JUDGMENT THIS FILE IS DOWNSTREAM OF (DESIGN-SYSTEM-C.md §1):

     "The marketing page runs the character at full volume. Working software runs the same
      character quieter."

   The app was restyled to Direction C and shipped. This file is the LOUD half of the same
   system, not a different look that happens to share a hue — a visitor who signs up must not
   arrive in a second product. Concretely, and per §1's own numbers:

     • the die-cut edge is 2.5px here and 1.5px in the app  (--dc-edge-w)
     • Archivo runs wdth 112 / wght 800 here and 104 / 700 there
     • screenshots TILT here, because a screenshot is an artifact pinned to a wall.
       §1.2: tilt is the strictest rule in the system and NOTHING in the app tilts except
       .dc-sticker. Nothing on a data surface tilts here either.
     • the 5px plate (--dc-hard-3) is rationed to ONE celebrated object per screen.

   WHAT MUST NOT BE ADDED. §0.1 DELETED three devices from the system and they must not come
   back here under new names: the drawn rule with a punched end, the region item-count, and the
   printed folio (01 / 02 / 03). An earlier draft of this stylesheet had a "signature motion:
   the rule draw" — a periwinkle hairline animating under every eyebrow — which is the deleted
   `.dc-rule` wearing a different word. It is gone. The eyebrow is a `.mark`: a solid ink block
   with paper type, a piece of material punched out of the page.

   THE STRUCTURAL SPINE. §7 records that the homepage runs MAKE / FILL / SEE down the page, and
   that the same object labels a region inside the app. That is the one structural idea Direction
   C carries across the sign-in, so it is load-bearing here rather than decorative.

   COLOUR IS PAIRS, NEVER TOKENS (§3.1). Every background below names its foreground in the same
   rule. The rule exists because the defect it prevents — a fill and a label chosen independently,
   each fine on its own — is invisible to whoever wrote it and unreadable to everyone else.

   LIGHT GROUND, ONE COMMITTED LOOK. No dark variant: the plate is an ink offset and it is
   invisible on a dark page (§4). The app solves that with a periwinkle material edge; a marketing
   page that is only ever one thing does not need to.  */

/* ---------- type: Archivo is SELF-HOSTED, and the width axis is the reason ---------- */
/* A static Google cut has no wdth axis, and the whole volume control of this system is
   wdth 104 (app) vs wdth 112 (here). One file, every weight and width, 90 KB. Byte-identical
   to client/public/fonts/archivo-var-latin.woff2 — copied, never re-exported. */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* Palette — the app's, unchanged. client/src/theme.css is authoritative; these are the light
     theme's resolved values. Direction C adds no colours (§3). */
  --accent:        #5D5FEF;
  --accent-strong: #4B4DE0;
  --accent-deep:   #4547C9;
  --accent-soft:   #EDEEFD;
  --accent-ink:    #FFFFFF;   /* the declared foreground for every accent fill */
  --page:          #F6F6F8;
  --card:          #FFFFFF;
  --ink:           #0F1220;
  --ink-2:         #565C6E;   /* --n400, secondary text */
  --ink-3:         #6A6F80;   /* --n500, the AA floor */
  --border:        #E6E8EE;
  --dark:          #0B0D14;
  --dark-2:        #151826;
  --dark-ink:      #C9CCDA;
  --amber:         #FEF9C3;   /* --gold-tint, the sticker fill */
  --amber-ink:     #854D0E;   /* its declared foreground */
  --amber-deep:    #A16207;

  /* Direction C — the five variables the whole signature is built from (§3). */
  --dc-plate:   15 18 32;
  --dc-plate-a: 1;
  --dc-edge:    15 18 32;
  --dc-edge-w:  2.5px;                 /* MARKETING. The app runs 1.5px. */

  --dc-hard-card: 2px 2px 0 rgb(var(--dc-plate) / var(--dc-plate-a));  /* a surface */
  --dc-hard-1:    2px 2px 0 rgb(var(--dc-plate) / var(--dc-plate-a));  /* a chosen thing */
  --dc-hard-2:    3px 3px 0 rgb(var(--dc-plate) / var(--dc-plate-a));  /* press me */
  --dc-hard-3:    5px 5px 0 rgb(var(--dc-plate) / var(--dc-plate-a));  /* one moment */

  /* Type axes. Loud is the default on this document; the app's quieter pair is not needed here. */
  --dc-wdth-loud: 112;
  --dc-wght-loud: 800;
  --dc-track-micro: 0.09em;

  /* Motion (§5). transform and opacity only, so no state change triggers layout. */
  --dc-dur-fast: 90ms;
  --dc-dur:      140ms;
  --dc-dur-slow: 260ms;
  --dc-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1180px;
  --r: 16px;

  --font-display: 'Archivo', 'Schibsted Grotesk', ui-sans-serif, -apple-system, sans-serif;
  --font-body:    'Onest', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

/* Every heading is Archivo LOUD. On this document that is the default rather than an opt-in —
   which is exactly the inversion of the app, where `.dc-loud` is rationed to three places. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--dc-wdth-loud), 'wght' var(--dc-wght-loud);
  letter-spacing: -0.032em;
  line-height: 0.98;
  margin: 0;
}
p { margin: 0 0 1em; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* Focus is a RING, never a colour change, and it is the same ring on every focusable thing
   (§6). Two-tone so it survives on both the paper ground and an accent fill. */
:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: clamp(64px, 9vw, 120px); }
.section-line { border-top: 1px solid var(--border); }

h1 { font-size: clamp(42px, 6.4vw, 82px); }
h2 { font-size: clamp(30px, 4.2vw, 52px); }
h3 { font-size: clamp(19px, 2.1vw, 25px); letter-spacing: -0.022em; }
.lede { font-size: clamp(18px, 1.4vw, 21px); color: var(--ink-2); max-width: var(--measure); }
.small { font-size: 14px; color: var(--ink-3); }

/* ---------- the die-cut mark (§7, §7.1) ----------
   A piece of material punched out of the page: solid ink block, paper type. It has a FACE, and
   the face is the opposite value of the ground. This replaces the eyebrow-plus-hairline of the
   previous draft, which was the deleted `.dc-rule` under another name. */
.eyebrow, .mark {
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--dc-wdth-loud), 'wght' var(--dc-wght-loud);
  font-size: 11px; line-height: 1;
  text-transform: uppercase; letter-spacing: var(--dc-track-micro);
  padding: 0.55em 0.8em 0.46em;
  border-radius: 6px;
  border: var(--dc-edge-w) solid rgb(var(--dc-edge));
  background: var(--ink);       /* the `inverse` pair: ink ground … */
  color: var(--page);           /* … paper face. 17.25:1. */
  margin: 0 0 20px;
}
/* The outline cut, for the one case a solid block would be a third ink mass in a row that
   already has two — a mark sitting ON a filled or dark surface. */
.mark-ghost { background: transparent; color: var(--ink); border-color: rgb(var(--dc-edge) / .55); }

/* The SPINE. MAKE / FILL / SEE, read down the page, answering the three verbs in the H1. This is
   the one structural idea that crosses the sign-in (§7): the same object labels a region inside
   the app, so the first screen a customer sees is recognisably the page that sold them. */
.spine { font-size: 13px; padding: 0.6em 0.95em 0.5em; letter-spacing: 0.12em; }

/* ---------- the full-volume sticker (§7.1) ----------
   Amber fill, ink edge, plate, tilt. The ONLY tilting element besides a pinned screenshot. */
.sticker {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--dc-wdth-loud), 'wght' var(--dc-wght-loud);
  font-size: 11px; line-height: 1;
  text-transform: uppercase; letter-spacing: .13em;
  padding: .5em .9em .42em;
  border-radius: 999px;
  border: 2px solid rgb(var(--dc-edge));
  background: var(--amber); color: var(--amber-ink);   /* the `sticker` pair, 14.06:1 */
  box-shadow: var(--dc-hard-1);
  transform: rotate(-2deg);
  white-space: nowrap;
}

/* ---------- motion ---------- */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dc-dur-slow) var(--dc-ease), transform var(--dc-dur-slow) var(--dc-ease); }
.reveal.d1.is-in { transition-delay: .06s; }
.reveal.d2.is-in { transition-delay: .12s; }
.reveal.d3.is-in { transition-delay: .18s; }
.no-js .reveal, html:not(.js) .reveal { opacity: 1; transform: none; }

/* Under reduced motion the TRAVEL stops and the durations collapse — but every fill, plate and
   ring change survives, so no state becomes unreachable or indistinguishable (§5). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .01ms !important; transition-duration: 1ms !important; }
  .btn:hover, .btn:active, .stage:hover, .demo-card:hover { transform: none !important; }
}

/* ---------- buttons (§5) ----------
   THE SIGNATURE MOVE: the press travels along the plate's own diagonal until the element is
   seated flat on it. Hover starts the movement, active finishes it. It is a physical explanation
   rather than a decoration — the shadow shrinks because the object is getting closer to the page.

   Among buttons, ONLY primary casts a plate, so within a row of controls the plate still means
   "press this one". */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--dc-wdth-loud), 'wght' var(--dc-wght-loud);
  font-size: 15px; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  padding: 14px 22px; border-radius: 12px;
  border: var(--dc-edge-w) solid rgb(var(--dc-edge));
  transition: transform var(--dc-dur) var(--dc-ease), box-shadow var(--dc-dur) var(--dc-ease),
              background-color var(--dc-dur) var(--dc-ease), color var(--dc-dur) var(--dc-ease);
}
.btn .arw { transition: transform var(--dc-dur) var(--dc-ease); }
.btn:hover .arw { transform: translateX(3px); }

.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--dc-hard-2); }
.btn-primary:hover { background: var(--accent-strong); transform: translate(1px, 1px); box-shadow: var(--dc-hard-1); }
.btn-primary:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 rgb(var(--dc-plate) / var(--dc-plate-a));
  transition-duration: var(--dc-dur-fast);
}

/* Secondary: card fill, ink edge, NO plate. */
.btn-ghost { background: var(--card); color: var(--ink); box-shadow: none; }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-ghost:active { transform: translate(1px, 1px); transition-duration: var(--dc-dur-fast); }

.btn-sm { padding: 9px 15px; font-size: 13px; border-radius: 10px; border-width: 2px; }

/* Disabled is SEATED, not floating. An unavailable control must not look like it is still
   standing off the page waiting to be pressed. */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; box-shadow: none; transform: none; cursor: not-allowed; }

/* The reassurance line under every button (research digest §4.4). Never "free trial" — there
   isn't one. */
.reassure { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3); }
.cta-block { margin-top: clamp(34px, 4vw, 52px); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--page) 90%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dc-dur) var(--dc-ease);
}
.site-header.is-stuck { border-bottom-color: var(--ink); }
.nav { display: flex; align-items: center; gap: 24px; height: 70px; }
.nav-logo { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a {
  font-size: 15px; text-decoration: none; color: var(--ink-2);
  padding: 6px 8px; border-radius: 8px;
  border: 2px solid transparent;
  transition: color var(--dc-dur) var(--dc-ease), background-color var(--dc-dur) var(--dc-ease),
              border-color var(--dc-dur) var(--dc-ease);
}
/* NOT an underline that draws itself — that was the deleted rule device. A hovered nav item
   becomes a chosen thing, which in this system means an edge and a fill. */
.nav-links a:hover { color: var(--ink); background: var(--accent-soft); border-color: rgb(var(--dc-edge) / .28); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; }

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-links.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; left: 0; right: 0; top: 70px;
    background: var(--card); border-bottom: 2px solid var(--ink);
    padding: 14px var(--gutter) 22px;
  }
  .nav-links.is-open a { padding: 10px 8px; font-size: 17px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; background: var(--card);
    border: var(--dc-edge-w) solid rgb(var(--dc-edge)); border-radius: 10px; cursor: pointer;
  }
  .nav-cta .btn-ghost { display: none; }
}

/* ---------- hero ---------- */
.hero { padding-top: clamp(48px, 7vw, 92px); padding-bottom: clamp(48px, 6vw, 84px); }
.hero h1 { max-width: 15ch; }
/* THE ONE 5px PLATE ON THE PAGE, spent on the third line of the promise. --dc-hard-3 is
   rationed to one celebrated moment per screen (§3); this is that moment, and nothing else on
   this document may claim it. `paint-order` keeps the ink edge behind the glyph fill. */
.hero h1 .accent {
  color: var(--accent);
  /* PLATE ONLY, NO STROKE. The first attempt added a 2px ink outline as well, on the reasoning
     that a die-cut object has a cut edge — and on screen the outline plus the offset closed the
     counters of a wdth-112/wght-800 face at 82px and the line read as a smudge. The plate alone
     is the die-cut read: periwinkle material, lifted off the paper, ink beneath it. 4px rather
     than 5px because the offset is measured against the STROKE WEIGHT of the glyph, not against a
     box, and at this size 5 detached into a second word. */
  text-shadow: 4px 4px 0 rgb(var(--dc-plate) / var(--dc-plate-a));
}
.hero .lede { margin-top: 24px; font-size: clamp(18px, 1.5vw, 22px); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
/* A chip is FLAT at rest and earns a plate only when selected — which is what makes the plate
   mean one consistent thing product-wide (§7). Nothing here is selectable, so nothing here is
   plated. */
.chip {
  font-size: 13px; color: var(--ink); background: var(--card);
  border: 2px solid rgb(var(--dc-edge) / .45); border-radius: 999px; padding: 7px 15px;
}
.chip strong { color: var(--accent-deep); font-weight: 700; }

/* ---------- screenshot slots ----------
   A pinned artifact: die-cut edge, the big plate, and a sub-degree tilt. §1.2 permits tilt here
   and nowhere else — never on a row of numbers, never on the calendar, never in the demo player,
   which is a positional surface. */
.shot {
  position: relative;
  background: var(--dark);
  border: var(--dc-edge-w) solid rgb(var(--dc-edge));
  border-radius: var(--r);
  box-shadow: var(--dc-hard-3);
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--dark-ink);
  isolation: isolate;
}
.shot::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(93,95,239,.30), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(161,98,7,.16), transparent 60%);
}
.tilt-l { transform: rotate(-0.6deg); }
.tilt-r { transform: rotate(0.5deg); }
.shot-16x10 { aspect-ratio: 16 / 10; }
.shot-4x3   { aspect-ratio: 4 / 3; }
.shot-1x1   { aspect-ratio: 1 / 1; }
.shot-body { text-align: center; padding: 24px; max-width: 46ch; }
.shot-id {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--dc-wdth-loud), 'wght' var(--dc-wght-loud);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #A9ABFA;   /* on --dark #0B0D14: 8.4:1 */
}
.shot-label { margin: 10px 0 8px; font-size: 16px; color: #EDEEFD; }
.shot-todo {
  display: inline-block; margin-top: 8px;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--dc-wdth-loud), 'wght' var(--dc-wght-loud);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber-ink); background: var(--amber);
  padding: 5px 10px; border-radius: 999px; border: 2px solid rgb(var(--dc-edge));
}

/* ---------- generic blocks ---------- */
.split { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.02fr 1fr; } .split.rev > :first-child { order: 2; } }

.stages { display: grid; gap: 18px; grid-template-columns: 1fr; margin: 28px 0 0; }
@media (min-width: 720px) { .stages { grid-template-columns: repeat(3, 1fr); } }
/* Every section box casts the small plate (§0.2). These are boxes the page is MADE OF, not rows
   of data, which is exactly where §1.2 draws the line. */
.stage {
  background: var(--card); color: var(--ink);
  border: var(--dc-edge-w) solid rgb(var(--dc-edge) / .5); border-radius: var(--r);
  box-shadow: var(--dc-hard-card);
  padding: 24px 22px;
  transition: transform var(--dc-dur) var(--dc-ease), box-shadow var(--dc-dur) var(--dc-ease);
}
.stage:hover { transform: translate(1px, 1px); box-shadow: var(--dc-hard-1); }
.stage h3 { font-size: 19px; margin-bottom: 8px; }
.stage p { margin: 0; font-size: 15px; color: var(--ink-2); }

.notes { margin-top: 26px; }
.notes li {
  padding-left: 26px; position: relative; margin-bottom: 13px;
  color: var(--ink-2); max-width: var(--measure);
}
/* A punched square, not a bullet — the same die-cut idea at 8px. */
.notes li::before {
  content: ""; position: absolute; left: 3px; top: .6em;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--accent); border: 1.5px solid var(--ink);
}
.notes strong { color: var(--ink); font-weight: 700; }

.pull {
  border-left: 5px solid var(--ink);
  padding: 6px 0 6px 20px; margin: 30px 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--dc-wdth-loud), 'wght' var(--dc-wght-loud);
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.16; letter-spacing: -0.028em;
  max-width: 34ch;
}

/* A dated competitive claim, per HOMEPAGE-PLAN.md §1.6. Visible on the page, never a comment:
   a dated specific survives being wrong, an undated one is just wrong. */
.checked {
  display: inline-block; margin-left: .4em;
  font-size: 13px; color: var(--ink-3); font-style: italic;
}
.model-claim {
  margin-top: 30px; max-width: 66ch;
  background: var(--card); color: var(--ink);
  border: var(--dc-edge-w) solid rgb(var(--dc-edge)); border-radius: var(--r);
  box-shadow: var(--dc-hard-card);
  padding: 22px 24px;
}
.model-claim p { margin: 0; }

/* ---------- the scripted demo ----------
   A dark object on the paper, and DELIBERATELY UNTILTED: the player is a positional surface —
   frames advance in place and a caption tracks them — and §1.2 bans tilt on anything positional
   without exception. */
.demo {
  background: var(--dark); color: var(--dark-ink);
  border: var(--dc-edge-w) solid rgb(var(--dc-edge));
  border-radius: 20px;
  box-shadow: var(--dc-hard-3);
  padding: clamp(22px, 3.4vw, 40px);
}
.demo h2, .demo h3 { color: #fff; }
.demo .eyebrow, .demo .mark { background: var(--page); color: var(--ink); border-color: var(--page); }
.demo-cards { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 24px 0 22px; }
@media (min-width: 760px) { .demo-cards { grid-template-columns: repeat(3, 1fr); } }
.demo-card {
  text-align: left; font: inherit; color: var(--dark-ink); cursor: pointer;
  background: var(--dark-2); border: 2px solid #363B57; border-radius: 12px;
  padding: 16px 16px 18px;
  transition: transform var(--dc-dur) var(--dc-ease), border-color var(--dc-dur) var(--dc-ease),
              background-color var(--dc-dur) var(--dc-ease), box-shadow var(--dc-dur) var(--dc-ease);
}
.demo-card:hover { border-color: #A9ABFA; background: #191D2E; }
/* SELECTED earns the plate — the one rule that makes the plate mean the same thing everywhere.
   On a dark ground the plate is a periwinkle material edge rather than invisible ink (§4). */
.demo-card[aria-pressed="true"] {
  border-color: #A9ABFA; background: #191D2E;
  box-shadow: 2px 2px 0 #5D5FEF;
}
.demo-card b {
  display: block; color: #fff; margin-bottom: 6px;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--dc-wdth-loud), 'wght' var(--dc-wght-loud);
  font-size: 16px;
}
.demo-card span { font-size: 14px; }
.demo-stage {
  border: 2px solid #363B57; border-radius: 12px; background: #0E111C;
  min-height: 260px; padding: 0; overflow: hidden;
}
.demo-note { margin-top: 16px; font-size: 14px; color: #9BA1B8; }

/* the player itself — see site.js */
.demo-frame { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; }
.demo-frame img { width: 100%; height: 100%; object-fit: contain; }
.demo-slot { text-align: center; padding: 28px; color: var(--dark-ink); }
.demo-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 2px solid #363B57; background: var(--dark-2); }
.demo-step {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--dc-wdth-loud), 'wght' var(--dc-wght-loud);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--page);
  padding: 5px 9px; border-radius: 6px; white-space: nowrap;
}
.demo-caption { flex: 1; margin: 0; font-size: 14.5px; color: #E3E5EC; }
.demo-ctrl {
  font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); background: var(--page);
  border: 2px solid rgb(var(--dc-edge)); border-radius: 9px; padding: 7px 13px;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--dc-wdth-loud), 'wght' var(--dc-wght-loud);
  transition: transform var(--dc-dur) var(--dc-ease), background-color var(--dc-dur) var(--dc-ease);
}
.demo-ctrl:hover { background: var(--accent-soft); }
.demo-ctrl:active { transform: translate(1px, 1px); }
.demo-ctrl:disabled { opacity: .4; cursor: not-allowed; }
.demo-dots { display: flex; gap: 6px; }
.demo-dots i { width: 8px; height: 8px; border-radius: 2px; background: #363B57; display: block; }
.demo-dots i.on { background: #A9ABFA; }
/* With JS off the player is a stack of captioned figures, not a blank box (digest §4.5-5). */
.demo-static { display: grid; gap: 16px; padding: 20px; }
html.js .demo-static { display: none; }
html:not(.js) .demo-live { display: none; }

/* ---------- gallery ---------- */
.gallery { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-top: 32px; }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery-item { margin: 0; }
/* A gallery is a GRID — many objects, compared against each other — so §1.2's grid rule applies
   and these get the 1px grid plate rather than the section plate, and no tilt at all. */
.gallery-item .shot { box-shadow: 1px 1px 0 rgb(var(--dc-plate) / var(--dc-plate-a)); transform: none; }
.gallery-item figcaption { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.gallery-item .in {
  display: inline-block; margin-right: 8px;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--dc-wdth-loud), 'wght' var(--dc-wght-loud);
  font-size: 10px; letter-spacing: var(--dc-track-micro); text-transform: uppercase;
  background: var(--ink); color: var(--page);
  padding: 4px 7px 3px; border-radius: 5px;
}

/* ---------- letter ---------- */
.letter {
  background: var(--card); color: var(--ink);
  border: var(--dc-edge-w) solid rgb(var(--dc-edge)); border-radius: var(--r);
  box-shadow: var(--dc-hard-card);
  padding: clamp(24px, 3.4vw, 44px); max-width: 62ch;
}
.letter p { text-transform: lowercase; color: var(--ink-2); }
.letter p:last-child { margin-bottom: 0; color: var(--ink); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { margin-top: 32px; max-width: 78ch; }
.faq details { border-bottom: 2px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--dc-wdth-loud), 'wght' var(--dc-wght-loud);
  font-size: clamp(17px, 1.7vw, 20px); letter-spacing: -0.022em;
  padding: 22px 44px 22px 0; position: relative;
  transition: color var(--dc-dur) var(--dc-ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-deep); }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  transform: rotate(45deg); transform-origin: center;
  transition: transform var(--dc-dur) var(--dc-ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .answer { padding: 0 0 24px; max-width: var(--measure); color: var(--ink-2); }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- final CTA + the request-access form ----------
   §1.2: FORMS MID-TASK get no plates, no tilt and no display type on fields or labels. A field
   spends everything it has on an unmistakable focus state instead. That rule holds even though
   this form sits inside the loudest block on the page. */
.final {
  background: var(--dark); color: var(--dark-ink);
  border: var(--dc-edge-w) solid rgb(var(--dc-edge));
  border-radius: 20px; padding: clamp(30px, 5vw, 64px);
  box-shadow: var(--dc-hard-3);
}
.final h2 { color: #fff; max-width: 18ch; }
.final .lede { color: #C9CCDA; }
.final .reassure { color: #9BA1B8; }

.qform { margin-top: 30px; display: grid; gap: 20px; max-width: 62ch; }
.qform .field { display: grid; gap: 8px; }
.qform label { font-size: 15px; color: #E3E5EC; font-weight: 500; }
.qform .hint { font-size: 13px; color: #9BA1B8; }
.qform input, .qform textarea, .qform select {
  background: var(--dark-2); border: 2px solid #363B57; color: #fff;
  border-radius: 11px; padding: 13px 15px; font: inherit; font-size: 16px;
  transition: border-color var(--dc-dur) var(--dc-ease), box-shadow var(--dc-dur) var(--dc-ease);
}
.qform input::placeholder, .qform textarea::placeholder { color: #868C9E; }
.qform input:focus, .qform textarea:focus, .qform select:focus {
  border-color: #A9ABFA; outline: none; box-shadow: 0 0 0 3px rgb(93 95 239 / .45);
}
.qform textarea { min-height: 84px; resize: vertical; }
.qform .optional {
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #9BA1B8;
  margin-left: 8px; font-weight: 600;
}
.qform .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.form-note { margin-top: 14px; font-size: 13.5px; color: #9BA1B8; }
/* One status line, both outcomes, announced to assistive tech. */
.form-status { margin-top: 16px; font-size: 15px; min-height: 1.5em; }
.form-status.ok { color: #BBF7D0; }
.form-status.bad { color: #FECACA; }

/* ---------- footer ---------- */
.site-footer { border-top: 2px solid var(--ink); padding-block: 56px 40px; }
.foot-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.foot-brand img { height: 26px; width: auto; margin-bottom: 16px; }
.foot-brand p { font-size: 14.5px; color: var(--ink-3); max-width: 42ch; }
.site-footer h4 {
  font-size: 11px; letter-spacing: var(--dc-track-micro); text-transform: uppercase;
  color: var(--ink); margin-bottom: 14px;
}
.site-footer li { margin-bottom: 9px; }
.site-footer li a { font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.site-footer li a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.foot-legal {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 13.5px; color: var(--ink-3);
}

/* ---------- comparison table (/vs/*) ----------
   A table is DATA. No tilt, no plate on the rows — §1.2's positional ban, applied to the one
   page whose entire job is being extracted and quoted. The container is a section box and gets
   the section plate; the rows inside it get nothing. */
.vs-wrap { margin-top: 32px; overflow-x: auto; border-radius: var(--r);
  border: var(--dc-edge-w) solid rgb(var(--dc-edge)); box-shadow: var(--dc-hard-card); background: var(--card); }
.vs-table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 15px; }
.vs-table th, .vs-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.vs-table thead th {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--dc-wdth-loud), 'wght' var(--dc-wght-loud);
  font-size: 13px; letter-spacing: var(--dc-track-micro); text-transform: uppercase;
  background: var(--ink); color: var(--page);
}
.vs-table tbody th { font-weight: 600; color: var(--ink); width: 30%; }
.vs-table td { color: var(--ink-2); }
.vs-table tr:last-child th, .vs-table tr:last-child td { border-bottom: 0; }

/* ---------- help centre ---------- */
.help-hero { padding-block: clamp(48px, 6vw, 80px) 0; }
.help-toc { margin: 30px 0 0; columns: 2; column-gap: 32px; }
@media (max-width: 640px) { .help-toc { columns: 1; } }
.help-toc li { margin-bottom: 10px; break-inside: avoid; }
.help-toc a { font-size: 15.5px; color: var(--ink-2); text-decoration: none; }
.help-toc a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.qa { border-top: 1px solid var(--border); padding-block: 40px; scroll-margin-top: 96px; }
.qa h2 { font-size: clamp(22px, 2.6vw, 30px); max-width: 24ch; }
.qa .answer { margin-top: 16px; max-width: var(--measure); color: var(--ink-2); }
.qa .answer ol, .qa .answer ul { margin: 0 0 1em; padding-left: 22px; list-style: revert; }
.qa .answer li { margin-bottom: 8px; }
.qa .answer strong { color: var(--ink); }
.callout {
  background: var(--accent-soft); color: #2C2E7A;
  border: 2px solid rgb(var(--dc-edge) / .35); border-radius: 12px;
  padding: 16px 18px; font-size: 15px; margin: 18px 0;
}
.callout strong { color: #1E2060; }