/* ============================================================
   SRV — THE SCRIPT READER'S VERDICT · storefront stylesheet
   Built 2026-09-02 (lane P2.A) on the house component grammar
   the sister room proved, with this room's own identity.

   THE PALETTE, AND WHERE IT COMES FROM
     The house bed is unchanged — deep navy ink on cream, with
     parchment as the alternating band. What is SRV's own is the
     ACCENT and the ONE dark band beneath it, both read off the
     owner's gate poster: golden-hour brass rather than the sister
     room's sunset gold, and THE SCREENING ROOM — the warm
     near-black of the desk the poster is shot across — for the
     verdict moment and nowhere else.

   CONTRAST, COMPUTED, NOT ASSUMED (WCAG AA, body text >= 4.5:1)
     --ink        #1B2B41 on cream       13.38:1
     --ink-soft   #42536D on cream        7.31:1 · parchment 6.47:1
                                          · parchment-deep 5.74:1
     --brass-deep #7A5312 on cream        6.39:1 · parchment 5.66:1
                                          · parchment-deep 5.03:1
     --brass      #C08A2E on ink-deep     5.47:1 · screening 6.08:1
     --brass-lit  #E0B45F on ink-deep     8.59:1 · screening 9.55:1
     --ember      #9C4A22 on cream        5.75:1 · parchment 5.10:1
     --band-text  #F6F1E6 on ink-deep    14.74:1 · screening 16.40:1
     --band-soft  #C9D3E2 on ink-deep    10.99:1
     --screen-soft#D8C9AE on screening   11.33:1
     Button face: --brass on --ink-deep text = 5.47:1.
   ============================================================ */

:root {
  /* THIS IS A LIGHT DESIGN, AND IT NOW SAYS SO (site polish, 2026-09-05).
     There is no dark variant anywhere in this sheet. Without this declaration a reader whose
     system is set to dark got the browser's OWN dark rendering for the parts the browser
     draws rather than us — the scrollbar, and any native control — sitting against a cream
     page. One line, and the chrome matches the page it belongs to. */
  color-scheme: light;

  /* Colour — the bed */
  --ink: #1B2B41;            /* deep navy — primary text */
  --ink-deep: #141F2E;       /* navy band background */
  --ink-soft: #42536D;       /* muted navy — secondary text */
  --cream: #FBF7EF;          /* page bed */
  --parchment: #F1E9DA;      /* alternating band */
  --parchment-deep: #E7DCC6;

  /* Colour — SRV's own accent, read off the gate poster */
  --brass: #C08A2E;          /* golden-hour brass — rules, buttons */
  --brass-deep: #7A5312;     /* brass dark enough for small text on cream */
  --brass-lit: #E0B45F;      /* brass on a dark band */
  --ember: #9C4A22;          /* the flag accent — findings, never decoration */
  --ember-hair: rgba(156, 74, 34, 0.26);

  /* Colour — THE SCREENING ROOM, this room's one dark surface */
  --screening: #171310;
  --screen-text: #F4EDE0;
  --screen-soft: #D8C9AE;

  --band-text: #F6F1E6;      /* text on the navy band */
  --band-soft: #C9D3E2;      /* secondary text on the navy band */

  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Scale — 1.25 ratio on an 18px base */
  --step--1: 0.9rem;
  --step-0: 1.125rem;
  --step-1: 1.4rem;
  --step-2: 1.75rem;
  --step-3: 2.2rem;
  --step-4: 2.75rem;
  --step-5: 3.4rem;

  /* Space */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4.5rem; --s-9: 6rem;

  /* Layered warm shadows */
  --shadow-1: 0 1px 2px rgba(52, 38, 16, 0.06), 0 2px 6px rgba(52, 38, 16, 0.05);
  --shadow-2: 0 1px 2px rgba(52, 38, 16, 0.07), 0 4px 10px rgba(52, 38, 16, 0.06), 0 12px 28px rgba(52, 38, 16, 0.08);
  --shadow-3: 0 2px 4px rgba(28, 22, 10, 0.08), 0 8px 18px rgba(28, 22, 10, 0.09), 0 24px 48px rgba(28, 22, 10, 0.12);

  --radius: 10px;
  --radius-lg: 16px;
  --measure: 65ch;
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--s-4);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: clamp(var(--step-3), 5vw, var(--step-5)); }
h2 { font-size: clamp(var(--step-2), 4vw, var(--step-4)); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, ul, ol, blockquote { max-width: var(--measure); }
p { margin: 0 0 var(--s-4); }

a { color: var(--ink); text-decoration-color: var(--brass); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--brass-deep); text-decoration-color: var(--brass-deep); }

/* THE KEYBOARD RING (measured 2026-09-05, site polish).
   WCAG 1.4.11 asks a focus indicator to reach 3:1 against what is behind it. The ring was
   --brass, and --brass is a BUTTON FACE and a RULE colour, not an indicator colour: measured
   against the light beds it stands on it made 2.84:1 on cream, 2.52:1 on parchment and
   2.23:1 on parchment-deep — a keyboard reader could lose the ring altogether. It is now
   --brass-deep, the same hue one step down and already this sheet's small-text gold:
   6.39:1 on cream, 5.66:1 on parchment, 5.03:1 on parchment-deep. The dark grounds keep the
   ring they already had (--brass-lit: 8.59:1 on the navy band, 9.55:1 in the screening room)
   and were never the problem. Only the RING moved — --brass is untouched everywhere else,
   because 2.4:1 against cream is correct for a rule and a border. */
:focus-visible {
  outline: 3px solid var(--brass-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.band--navy :focus-visible, .band--screening :focus-visible, .site-head :focus-visible { outline-color: var(--brass-lit); }

::selection { background: var(--brass); color: var(--ink-deep); }

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: var(--s-4); top: -100px;
  z-index: 100;
  background: var(--ink-deep);
  color: var(--band-text);
  font-family: var(--sans);
  font-size: var(--step--1);
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; color: var(--band-text); }

/* ---------- Small-caps UI voice ---------- */

.kicker {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: var(--s-3);
}
.band--navy .kicker, .band--screening .kicker { color: var(--brass-lit); }

/* ---------- Masthead ---------- */
/* SRV's own signature: the title is set in letterspaced capitals, the way the
   owner's poster sets it, rather than in title case. */

.site-head {
  background: var(--ink-deep);
  color: var(--band-text);
  border-bottom: 3px solid var(--brass);
}

.masthead {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--s-5) var(--s-5) var(--s-4);
  text-align: center;
}

.masthead-title {
  font-family: var(--serif);
  font-size: clamp(var(--step-1), 3.2vw, var(--step-3));
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}
.masthead-title a { color: var(--band-text); text-decoration: none; }
.masthead-title a:hover { color: var(--brass-lit); }
.masthead-title .tm { color: var(--brass-lit); }

/* The identity line's second clause. It was three words ("The first-time script beta
   reader.") until the owner retired that claim on 2026-09-02 and replaced it with a full
   sentence. A sentence set in uppercase at 0.22em tracking runs off the measure and wraps
   badly in German and Hindi, so the tracking is eased and the line is given a measure of its
   own to wrap inside. The voice — sans, small, brass on navy — is unchanged. */
.masthead-sub {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-lit);
  margin: var(--s-2) auto 0;
  max-width: 38ch;
  text-wrap: balance;
}

/* ---------- Nav ---------- */

.site-nav { background: var(--ink-deep); }

.nav-toggle {
  display: none;
  margin: 0 auto var(--s-3);
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--band-text);
  border: 1px solid var(--band-soft);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-5);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--brass-lit); color: var(--brass-lit); }

.nav-list {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--s-4) var(--s-4);
  max-width: 72rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1) var(--s-2);
}

.nav-list a {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--band-soft);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: 6px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-list a:hover { color: var(--brass-lit); border-bottom-color: var(--brass-lit); }
.nav-list a[aria-current="page"] {
  color: var(--brass-lit);
  border-bottom-color: var(--brass);
  font-weight: 600;
}

.nav-order a.btn--ordertab {
  background: linear-gradient(180deg, var(--brass-lit), var(--brass));
  color: var(--ink-deep) !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.4rem 1rem;
  border-radius: 8px;
}
.nav-order a.btn--ordertab:hover { background: linear-gradient(180deg, #ecc272, #d09a3e); }

/* ---------- THE PHONE NAVIGATION ---------- */
/* THE DEFECT THIS REPLACES, MEASURED 2026-09-05: the order tab — THE FREE SEATS now, the
   subscribe door the day the owner pastes her links — is the last item of `.nav-list`, and
   `.nav-list` was `display: none` under 760px. So on a phone, on 165 pages, in all eleven
   editions, the storefront's ONE call to action was folded away behind MENU. A reader on a
   phone had to guess that a button existed before they could press it.
   The collapse is now per ITEM rather than per LIST: the list stays in the layout holding
   only the order tab, which rides on the same row as MENU, and pressing MENU drops the full
   list underneath on a row of its own. It costs the first screen NOTHING — the row was
   already there for the MENU button — and no markup and no word moved to do it. */
@media (max-width: 760px) {
  .site-nav {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: var(--s-3);
    padding-bottom: var(--s-4);
  }
  .nav-toggle { display: block; margin: 0; }
  .nav-list {
    display: flex; flex-direction: column; align-items: stretch; text-align: center;
    padding: 0; margin: 0;
  }
  .nav-list > li:not(.nav-order) { display: none; }
  .nav-list.open { flex: 1 0 100%; margin-top: var(--s-2); }
  .nav-list.open > li { display: block; }
  .nav-list a { padding: var(--s-3); }
  .nav-order a.btn--ordertab { display: inline-block; padding: var(--s-2) var(--s-4); }

  /* THE FIRST PHONE SCREEN PAYS FOR ITS OWN CALL TO ACTION. The masthead's phone padding
     was 24/16; the button's row is taller than the bare MENU row it replaces, and this is
     where that height comes from. (The language rail pays for its own targets further down
     the sheet, in a block that has to stand AFTER the rail's base rules to be heard.) */
  .masthead { padding: var(--s-4) var(--s-4) var(--s-3); }
}

/* ---------- Layout primitives ---------- */

main { display: block; }

.band { padding: var(--s-8) var(--s-5); }
.band--tight { padding: var(--s-7) var(--s-5); }
.band--parchment { background: var(--parchment); }
.band--navy { background: var(--ink-deep); color: var(--band-text); }
.band--navy h1, .band--navy h2, .band--navy h3, .band--navy h4 { color: var(--band-text); }
.band--navy p, .band--navy li { color: var(--band-soft); }
.band--navy a { color: var(--band-text); text-decoration-color: var(--brass-lit); }
.band--navy a:hover { color: var(--brass-lit); }
.band--goldenhour {
  background: linear-gradient(160deg, var(--parchment) 0%, var(--parchment-deep) 55%, #DFC8A0 100%);
}

/* THE SCREENING ROOM — this room's one dark surface, for the verdict moment. */
.band--screening {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(192, 138, 46, 0.16) 0%, rgba(23, 19, 16, 0) 62%),
    var(--screening);
  color: var(--screen-text);
  border-top: 4px solid var(--brass);
  border-bottom: 4px solid var(--brass);
}
.band--screening h1, .band--screening h2, .band--screening h3, .band--screening h4 { color: var(--screen-text); }
.band--screening p, .band--screening li { color: var(--screen-soft); }
.band--screening a { color: var(--screen-text); text-decoration-color: var(--brass-lit); }
.band--screening a:hover { color: var(--brass-lit); }

.wrap { max-width: 72rem; margin: 0 auto; }
.wrap--narrow { max-width: 46rem; margin: 0 auto; }

.center { text-align: center; }
.center p, .center ul, .center blockquote { margin-left: auto; margin-right: auto; }

.gold-rule {
  border: 0;
  width: 72px;
  height: 3px;
  background: var(--brass);
  margin: var(--s-5) 0;
}
.center .gold-rule, .gold-rule--center { margin-left: auto; margin-right: auto; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
}
.band--navy .lede { color: var(--band-soft); }
.band--screening .lede { color: var(--screen-soft); }

/* The counts row in the owner's welcome passage. It is written into the page only by
   _wire_counts_row.py, and only once the room lane has confirmed all four counts are
   literally true — so this rule usually styles nothing, by design. It is here in advance so
   the day the gate opens is a copy change and not a layout change. */
/* The limited-time kicker, set over each price figure. Owner emphasis 2026-09-02: a reader
   who scrolls to the second card must meet "for a limited time" attached to the number they
   are about to pay, not once at the top of the pair. */
.kicker--price {
  margin: 0 0 var(--s-1);
  color: var(--brass-lit);
}
.panel--srv .kicker--price { color: var(--brass-lit); }

.counts-row {
  font-size: var(--step-0);
  letter-spacing: 0.01em;
  color: var(--ink);
}

.sub-block {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--parchment-deep);
}

/* ---------- Pull quotes & campaign lines ---------- */

.pull {
  font-family: var(--serif);
  font-size: clamp(var(--step-1), 3vw, var(--step-3));
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
  border-left: 4px solid var(--brass);
  margin: var(--s-6) 0;
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
}
.band--navy .pull { color: var(--band-text); border-left-color: var(--brass-lit); }
.band--screening .pull { color: var(--screen-text); border-left-color: var(--brass-lit); }
.center .pull, .pull--center {
  border-left: 0;
  border-top: 3px solid var(--brass);
  border-bottom: 3px solid var(--brass);
  padding: var(--s-5) var(--s-4);
  text-align: center;
}

.script-accent { font-style: italic; color: var(--brass-deep); }
.band--navy .script-accent, .band--screening .script-accent { color: var(--brass-lit); }

.fineprint {
  font-size: 0.85em;
  opacity: 0.82;
  max-width: 40em;
  margin: 0.8em auto 0;
  text-align: center;
}

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--s-5);
  margin: var(--s-6) 0;
}

.card {
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-top: 4px solid var(--brass);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card h3, .card h4 { margin-bottom: var(--s-3); }
.card p:last-child { margin-bottom: 0; }

.card--navy {
  background: var(--ink);
  border: 0;
  border-top: 4px solid var(--brass);
  color: var(--band-soft);
}
.card--navy h3, .card--navy h4 { color: var(--band-text); }
.card--navy p { color: var(--band-soft); }

.card-link { display: block; text-decoration: none; color: inherit; }
.card-link:hover { color: inherit; }
.card-link .more {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

/* ---------- The litany ---------- */

.litany { list-style: none; padding: 0; margin: var(--s-6) auto; }
.litany li {
  font-size: var(--step-1);
  line-height: 1.4;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--parchment-deep);
}
.band--navy .litany li { border-bottom-color: rgba(201, 211, 226, 0.25); color: var(--band-soft); }
.band--screening .litany li { border-bottom-color: rgba(216, 201, 174, 0.22); color: var(--screen-soft); }
.litany li:last-child { border-bottom: 0; }
.litany .litany-no {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-right: var(--s-3);
}
.band--navy .litany .litany-no, .band--screening .litany .litany-no { color: var(--brass-lit); }

/* ---------- Process walk ---------- */

.walk {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: var(--s-6) 0;
  display: grid;
  gap: var(--s-4);
  max-width: none;
}
.walk li {
  counter-increment: step;
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-left: 4px solid var(--brass);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--s-5) var(--s-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: start;
  text-align: start;
}
.walk li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--sans);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--brass);
  line-height: 1.1;
}
.walk h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.walk p { margin-bottom: 0; color: var(--ink-soft); }
.walk p + p { margin-top: var(--s-3); }

/* ---------- Compare panels ---------- */

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--s-5);
  margin: var(--s-6) 0;
  align-items: stretch;
}
.compare .panel { border-radius: var(--radius); padding: var(--s-6); text-align: start; }
.panel--generic {
  background: var(--parchment);
  border: 1px dashed var(--ink-soft);
  color: var(--ink-soft);
}
.panel--srv {
  background: var(--ink);
  color: var(--band-soft);
  border-top: 4px solid var(--brass);
  box-shadow: var(--shadow-2);
}
.panel--srv h3, .panel--srv h4 { color: var(--band-text); }
.panel--srv ul, .panel--srv li { color: var(--band-soft); }
/* THE SRV PANEL IS A DARK SURFACE, AND EVERY COMPONENT INSIDE IT HAS TO KNOW THAT.
   The panel paints itself --ink and hands its children --band-soft by INHERITANCE. Any
   component that sets a colour of its own therefore wins, and those colours were chosen for
   the light bed (measured in the browser: the price figure on the panel read 1.00:1 — the
   figure painted in the panel's own background). Fixed here, at the surface, so anything
   mounted into the panel inherits the right answer:
     figure 1.00 -> 12.70   quiet label 1.83 -> 9.47   link 1.00 -> 12.70 (underline --brass-lit) */
.panel--srv .price-display { color: var(--band-text); }
.panel--srv .price-period { color: var(--band-soft); }
.panel--srv a { color: var(--band-text); text-decoration-color: var(--brass-lit); }
.panel--srv a:hover { color: var(--brass-lit); text-decoration-color: var(--brass-lit); }
.panel-label {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.panel--generic .panel-label { color: var(--ink-soft); }
.panel--srv .panel-label { color: var(--brass-lit); }

/* ---------- The band ladder (the four verdict bands) ---------- */

.ladder { list-style: none; padding: 0; margin: var(--s-6) 0; display: grid; gap: var(--s-3); max-width: none; }
.ladder li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-left: 5px solid var(--brass);
  text-align: start;
}
.ladder .rung {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brass-deep);
}
.ladder .tier {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.band--screening .ladder li {
  background: rgba(244, 237, 224, 0.05);
  border-color: rgba(216, 201, 174, 0.28);
  border-left-color: var(--brass);
}
.band--screening .ladder .rung { color: var(--brass-lit); }
.band--screening .ladder .tier { color: var(--screen-text); }

/* ---------- The five viewer states ---------- */

.states { list-style: none; padding: 0; margin: var(--s-6) 0; display: grid; gap: var(--s-3); max-width: none; }
.states li {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-left: 5px solid var(--ember);
  text-align: start;
}
.states .state-name {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: var(--s-2);
}
.band--navy .states li { background: rgba(246, 241, 230, 0.05); border-color: rgba(201, 211, 226, 0.25); border-left-color: var(--brass-lit); }
.band--navy .states .state-name { color: var(--brass-lit); }

/* ---------- The pulse map (typographic, exactly as the room prints it) ---------- */

.pulse-wrap { overflow-x: auto; margin: var(--s-6) 0; -webkit-overflow-scrolling: touch; }
.pulse {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.7;
  white-space: pre;
  margin: 0;
  padding: var(--s-5) var(--s-6);
  color: var(--screen-text);
  background: var(--screening);
  border: 1px solid rgba(216, 201, 174, 0.3);
  border-left: 5px solid var(--brass);
  border-radius: var(--radius);
  max-width: none;
}
.pulse b { color: var(--brass-lit); font-weight: 700; }

/* ---------- Checklists / flag lists ---------- */

.checklist { list-style: none; margin: var(--s-5) auto; padding: 0; max-width: 38em; text-align: start; }
.checklist li { position: relative; padding-left: 1.7em; margin: 0 0 0.55em; }
.checklist li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  color: var(--brass-deep); font-weight: 700;
}
.band--navy .checklist li::before, .band--screening .checklist li::before { color: var(--brass-lit); }

.understand { list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-6); max-width: none; }
.understand li {
  position: relative;
  padding: var(--s-2) 0 var(--s-2) 1.9em;
  border-bottom: 1px solid var(--ember-hair);
  text-align: start;
}
.understand li:last-child { border-bottom: 0; }
.understand li::before {
  content: "\2691";
  position: absolute; left: 0.15em; top: var(--s-2);
  color: var(--ember); line-height: inherit;
}
.band--navy .understand li { border-bottom-color: rgba(201, 211, 226, 0.25); }
.band--navy .understand li::before { color: var(--brass-lit); }

/* ---------- Signature strip ---------- */

.signature-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--s-4);
  margin: var(--s-6) 0;
}
.signature-strip .sig {
  background: var(--ink);
  border-top: 4px solid var(--brass);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--s-5);
  text-align: center;
}
.signature-strip .sig-word {
  display: block;
  font-family: var(--sans);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-lit);
  margin-bottom: var(--s-2);
}
.signature-strip .sig p {
  color: var(--band-soft);
  font-family: var(--sans);
  font-size: var(--step--1);
  margin: 0;
}

/* ---------- Pricing ---------- */

.price-display {
  font-family: var(--serif);
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 auto var(--s-5);
}
/* A QUIET LABEL BESIDE A PRICE FIGURE. It rides inside .price-display, at a quieter size and
   weight: the number is what a reader is looking for. Defined once, here, as a component —
   never as inline markup in the band, which is the layout standard's rule 5. (No page prints
   one today; the rule stays so a later label inherits the panel's contrast.) */
.price-period {
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-soft, var(--ink));
  white-space: nowrap;
}
.price-band p { max-width: 62ch; margin-left: auto; margin-right: auto; }
.price-band .kicker { max-width: none; margin-bottom: var(--s-5); }

/* ---------- Language tiers ---------- */

.tier-card {
  border-radius: var(--radius);
  padding: var(--s-6);
  margin: var(--s-5) 0;
  box-shadow: var(--shadow-1);
  text-align: start;
}
.tier-card h3 { margin-bottom: var(--s-2); }
.tier--full { background: var(--ink); }
.tier--full h3 { color: var(--brass-lit); }
.tier--full p { color: var(--band-soft); margin-bottom: 0; }
.tier--tested { background: var(--parchment); border-left: 5px solid var(--brass); }
.tier--tested h3 { color: var(--ink); }
.tier--tested p { color: var(--ink-soft); margin-bottom: 0; }
.tier--expanding { background: var(--cream); border: 1px solid var(--parchment-deep); border-left: 5px solid var(--ink-soft); }
.tier--expanding p { color: var(--ink-soft); margin-bottom: 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-7);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  cursor: pointer;
  border: 0;
}
.btn--gold { background: var(--brass); color: var(--ink-deep); box-shadow: var(--shadow-2); }
.btn--gold:hover { background: var(--brass-lit); color: var(--ink-deep); transform: translateY(-2px); box-shadow: var(--shadow-3); }
.btn--ink { background: var(--ink-deep); color: var(--band-text); box-shadow: var(--shadow-1); }
.btn--ink:hover { background: var(--ink); color: var(--brass-lit); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn--ghost { background: transparent; color: var(--ink); border: 2px solid var(--brass); }
.btn--ghost:hover { background: var(--brass); color: var(--ink-deep); }
.band--navy .btn--ghost, .band--screening .btn--ghost { color: var(--band-text); border-color: var(--brass-lit); }
.band--navy .btn--ghost:hover, .band--screening .btn--ghost:hover { background: var(--brass-lit); color: var(--ink-deep); }

/* A SOLID BUTTON KEEPS ITS OWN LABEL COLOUR INSIDE A DARK BAND (measured 2026-09-05).
   `.band--navy a` and `.band--screening a` are (0,1,1); `.btn--gold` and `.btn--ink` are
   (0,1,0). So every SOLID button standing inside one of this room's dark surfaces was having
   its label repainted in the BAND's light text — on the brass button face that measured
   2.70:1 on the navy band and 2.61:1 in the screening room, against the 4.5:1 floor the top
   of this sheet is certified to. The ghost variant was given this exact override when the
   dark bands were written; the two solid variants were never covered, so the defect shipped
   with them. Restored to the button's own ink: 5.47:1.
   MEASURED IN THE BROWSER, three buttons per edition, thirty-three across the eleven:
     /pricing            "join the waitlist"  2.61 -> 5.47   (the storefront's own door)
     /first-ten          "claim a free seat"  2.70 -> 5.47
     /see-srv-at-work    "what it costs"      2.70 -> 5.47                                */
.band--navy .btn--gold, .band--screening .btn--gold, .verdict-band .btn--gold { color: var(--ink-deep); }
.band--navy .btn--gold:hover, .band--screening .btn--gold:hover, .verdict-band .btn--gold:hover { color: var(--ink-deep); }
.band--navy .btn--ink, .band--screening .btn--ink, .verdict-band .btn--ink { color: var(--band-text); }
.band--navy .btn--ink:hover, .band--screening .btn--ink:hover, .verdict-band .btn--ink:hover { color: var(--brass-lit); }
.btn--big { font-size: 1.2rem; letter-spacing: 0.14em; padding: 0.9rem 2.6rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: var(--s-6) 0 0; }
.center .btn-row { justify-content: center; }

/* ---------- The gate (index) ---------- */

.gate-body { min-height: 100svh; background: var(--screening); display: flex; flex-direction: column; }
.gate-main {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--s-4) var(--s-3);
  gap: var(--s-4);
}
.gate-figure { margin: 0; max-width: 34rem; width: 100%; }
.gate-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(224, 180, 95, 0.28);
}
.gate-enter {
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  padding: var(--s-2) var(--s-6);
  opacity: 0.94;
}
.gate-main .fineprint { color: var(--screen-soft); }


/* ---------- Figures ---------- */

.board-figure { margin: var(--s-7) auto; max-width: 44rem; }
.board-figure img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-3); }
.board-figure figcaption {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-align: center;
  margin-top: var(--s-3);
}
.band--navy .board-figure figcaption { color: var(--band-soft); }
.board-figure--portrait { max-width: 26rem; }
/* THE OWNER'S PAGE ART (2026-09-03). Her words are baked into these pictures, so they are
   shown at a size those words can be read at. Her portrait piece takes the gate's own measure
   — it is the same shape and the same kind of picture — and her landscape pieces take the
   band's, which is 44rem and already narrower than .wrap--narrow, so nothing overflows and
   rule 7 holds at every width. */
.board-figure--art-portrait { max-width: 34rem; margin: var(--s-7) auto; }

/* ---------- The verdict band (the closing moment) ---------- */

.verdict-band {
  background:
    linear-gradient(175deg, rgba(20, 31, 46, 0.95) 0%, rgba(27, 43, 65, 0.97) 55%, rgba(52, 33, 12, 0.95) 100%),
    var(--ink-deep);
  color: var(--band-text);
  text-align: center;
  padding: var(--s-9) var(--s-5);
  border-top: 4px solid var(--brass);
  border-bottom: 4px solid var(--brass);
}
.verdict-band .verdict-eyebrow {
  font-family: var(--sans);
  font-size: var(--step-0);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--band-soft);
  margin-bottom: var(--s-4);
  display: block;
}
.verdict-band .verdict-title {
  font-family: var(--serif);
  font-size: clamp(var(--step-3), 6vw, var(--step-5));
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--band-text);
  margin: 0 0 var(--s-4);
}
.verdict-band .verdict-title .gold { color: var(--brass-lit); }
.verdict-band p { color: var(--band-soft); margin-left: auto; margin-right: auto; }
.verdict-band .verdict-note { max-width: 38em; margin: var(--s-4) auto 0; font-size: var(--step--1); opacity: 0.86; }
.verdict-band .btn--ghost { color: var(--band-text); border-color: var(--brass-lit); }
.verdict-band .btn--ghost:hover { background: var(--brass-lit); color: var(--ink-deep); }

/* ---------- FAQ ---------- */

.faq-item {
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  margin: var(--s-4) 0;
  text-align: start;
}
.faq-item summary {
  font-family: var(--serif);
  font-size: var(--step-1);
  font-weight: 600;
  padding: var(--s-5) var(--s-6);
  cursor: pointer;
  list-style-position: outside;
}
.faq-item summary:hover { color: var(--brass-deep); }
.faq-item[open] summary { border-bottom: 1px solid var(--parchment-deep); }
.faq-item .faq-answer { padding: var(--s-5) var(--s-6); }
.faq-item .faq-answer p:last-child { margin-bottom: 0; }

/* ---------- THE DEMONSTRATION STAGE (see it at work) ---------- */
/* The frame is built here in P2.A; the demonstration script and the stepped
   finding it carries are lane P2.C's, and every placeholder says so on its face. */

.demo-stage {
  border: 1px solid var(--parchment-deep);
  border-top: 4px solid var(--brass);
  border-radius: var(--radius-lg);
  background: var(--cream);
  box-shadow: var(--shadow-2);
  padding: var(--s-6);
  margin: var(--s-6) 0;
  text-align: start;
}
.demo-label {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-deep);
  background: var(--brass-lit);
  border-radius: 6px;
  padding: 0.25rem 0.7rem;
  margin-bottom: var(--s-4);
}
.demo-pending {
  border: 2px dashed var(--ember);
  border-radius: var(--radius);
  background: rgba(156, 74, 34, 0.05);
  padding: var(--s-5) var(--s-6);
  margin: var(--s-5) 0;
  text-align: start;
}
.demo-pending .pending-flag {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: var(--s-3);
}
.demo-pending p:last-child { margin-bottom: 0; }

/* ---------- The demonstration (lane P2.C) ----------
   THE SCREENPLAY PAGE. A screenplay is a typographic object: the indents ARE the
   grammar, and a proportional font destroys them. So the pages are set in the mono
   stack, in their own scrolling container, and nothing at the document level clips
   them (THE LAYOUT STANDARD rule 7). */

.script-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: var(--s-5) 0; }
.script-page {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre;
  margin: 0;
  padding: var(--s-6);
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-left: 5px solid var(--brass);
  border-radius: var(--radius);
  max-width: none;
}
.script-page mark, .proof-quote mark {
  background: rgba(224, 180, 95, 0.42);
  color: inherit;
  box-shadow: 0 0 0 2px rgba(224, 180, 95, 0.42);
  border-radius: 2px;
}

/* The stepped finding. */
.proof-steps { list-style: none; padding: 0; margin: 0; max-width: none; }
.proof-step { margin: var(--s-5) 0; }
.proof-step h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.proof-step h4 { font-size: var(--step-0); margin-bottom: var(--s-2); color: var(--brass-deep); }
.proof-step-n {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--brass-deep);
  margin-bottom: var(--s-2);
}
.proof-where {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}
.proof-flag {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cream);
  background: var(--ember);
  border-radius: 6px;
  padding: 0.2rem 0.65rem;
}
.proof-quote {
  border-left: 4px solid var(--brass);
  background: var(--parchment);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-6);
  margin: var(--s-4) 0 var(--s-5);
  font-size: var(--step-0);
  text-align: start;
}
.proof-quote p { margin-bottom: var(--s-3); }
.proof-quote p:last-child { margin-bottom: 0; }
.proof-src {
  font-family: var(--sans);
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: var(--s-3) 0 0;
}
.band--screening .proof-src { color: var(--screen-soft); }
.proof-demo-label {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ember);
  margin: var(--s-3) 0 0;
}
.band--screening .proof-demo-label { color: var(--brass-lit); }
.proof-opt {
  border: 1px solid var(--parchment-deep);
  border-radius: var(--radius);
  background: var(--cream);
  padding: var(--s-5);
  margin: var(--s-4) 0;
  text-align: start;
}
.proof-example {
  border-left: 4px solid var(--ember);
  background: var(--parchment);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-4);
}
/* THE TWO LABELS. The first is the room's own, verbatim; the second is the site's
   suggestion stamp. Both are load-bearing: they are the wall that keeps the pen the
   writer's, so they are never decoration and never hidden on a narrow screen. */
.proof-illus, .proof-stamp {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-top: var(--s-3);
}
.proof-illus { color: var(--ink-soft); }
.proof-stamp { color: var(--ember); }

/* The fields block — the way a brief's header prints. */
.proof-fields { list-style: none; padding: 0; margin: var(--s-5) 0; max-width: none; }
.proof-fields li {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--ember-hair);
  text-align: start;
}
.proof-fields li:last-child { border-bottom: 0; }
.proof-fieldname {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

.proof-controls {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; justify-content: center;
  margin: var(--s-5) 0 0;
}
.proof-controls button {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink-deep);
  color: var(--band-text);
  border: 0; border-radius: 8px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
}
.proof-controls button:hover { background: var(--brass); color: var(--ink-deep); }
.proof-controls button[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.proof-controls .proof-play { background: var(--brass); color: var(--ink-deep); }
.proof-controls .proof-play:hover { background: var(--brass-lit); color: var(--ink-deep); }
.proof-controls .proof-play[aria-pressed="true"] { background: var(--ember); color: var(--cream); }
.proof-controls .proof-count { font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); }
.proof-hint { font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); text-align: center; margin-top: var(--s-3); }

/* ---------- The evidence figure (derived numbers) ---------- */

.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--s-4);
  margin: var(--s-6) 0;
}
.figure-cell {
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-top: 4px solid var(--brass);
  border-radius: var(--radius);
  padding: var(--s-5);
  text-align: center;
  box-shadow: var(--shadow-1);
}
.figure-cell .figure-n {
  display: block;
  font-family: var(--serif);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}
.figure-cell .figure-what {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: var(--s-2) 0 0;
}

/* ---------- Footer ---------- */

.site-foot {
  background: var(--ink-deep);
  color: var(--band-soft);
  border-top: 3px solid var(--brass);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  font-family: var(--sans);
  font-size: var(--step--1);
}
.site-foot .foot-brand {
  font-family: var(--serif);
  font-size: var(--step-1);
  color: var(--band-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
}
.site-foot .foot-cat {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-lit);
  margin: 0 0 var(--s-4);
}
.site-foot p { max-width: none; margin: 0 0 var(--s-3); }
.site-foot a { color: var(--band-text); text-decoration-color: var(--brass-lit); }
.site-foot a:hover { color: var(--brass-lit); }
/* TAP TARGETS IN THE FOOTER (measured on a 375px phone, 2026-09-05).
   These links were inline, so a finger had the glyph box to aim at and nothing more: 17px
   tall, measured. WCAG 2.5.8 asks 24 x 24, and these are a navigation list, not words inside
   a sentence, so the carve-out for inline text does not apply. They are inline-block with a
   little block padding now — 30px — and the centred rhythm is unchanged, because the list
   item they sit in already reserved 24px of line box. Not one word moved. */
.foot-nav a, .foot-legal-nav a, .foot-rooms a { display: inline-block; padding-block: 0.4rem; }
.foot-nav, .foot-legal-nav {
  list-style: none;
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  padding: 0; margin: 0 0 var(--s-4);
  max-width: none;
}
.foot-legal { color: var(--band-soft); margin-top: var(--s-4); }
.foot-independence { max-width: 46em; margin-left: auto; margin-right: auto; }
.foot-rooms a { color: inherit; text-decoration: underline; }

/* SUPPORT THE GREENHOUSE (house ruling 2026-10-05) — quiet, below the product's own footer, never a checkout */
.foot-support {
  max-width: 46rem; margin: var(--s-5) auto var(--s-4); padding: var(--s-4) var(--s-3) 0;
  border-top: 1px solid rgba(255,255,255,0.14); text-align: center;
}
.site-foot .foot-support-head {
  font-family: var(--serif); font-size: var(--step-0); font-weight: 600; color: var(--band-text);
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--s-2);
}
.foot-support-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-3) var(--s-5); margin: var(--s-3) 0; }
.foot-support-choice { min-width: 0; }
.site-foot .foot-support-choice h3 { font-family: var(--sans); font-size: var(--step--1); font-weight: 600; color: var(--band-text); margin: 0 0 var(--s-2); }
.site-foot a.foot-support-btn {
  display: inline-block; padding: 0.55rem 1.1rem; min-height: 44px; box-sizing: border-box;
  border: 1px solid var(--brass-lit); border-radius: 999px; text-decoration: none; color: var(--band-text);
}
.site-foot a.foot-support-btn:hover, .site-foot a.foot-support-btn:focus-visible { background: rgba(255,255,255,0.08); color: var(--brass-lit); }
.site-foot .foot-support-fine { font-size: 0.85em; color: var(--band-soft); margin: 0 0 var(--s-1); }
.foot-other { margin-top: var(--s-3); }

/* ---------- The language bar and the footer switcher ---------- */

.langbar { background: var(--parchment-deep); border-bottom: 1px solid var(--brass); }
.langbar-in {
  max-width: 72rem; margin: 0 auto;
  padding: var(--s-3) var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  align-items: center; justify-content: center;
  font-family: var(--sans); font-size: var(--step--1);
}
.langbar-lead { letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.langbar-new {
  background: var(--brass); color: var(--ink-deep);
  font-weight: 700; letter-spacing: 0.14em;
  border-radius: 5px; padding: 0.1rem 0.45rem;
}
.langbar-list, .langfoot-links {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--s-2) var(--s-4); padding: 0; margin: 0;
  justify-content: center; max-width: none;
}
/* THE LANGUAGE LINKS ARE THE ONE-CLICK LAW'S OWN CONTROLS, so they are the last place on
   this site that should be hard to hit. Measured at 375px: 17px tall, some of them 28px
   wide. Inline-block with block padding brings the rail's links to 27px and the footer
   switcher's to 30px, both clear of the 24px floor, and the rail is paid for out of the
   masthead below so the first phone screen does not lose a pixel to it. Every edition is
   still listed, still one tap, still in its own language; nothing is hidden or collapsed. */
.langbar-list a { display: inline-block; padding-block: 0.3rem; }
.langfoot-links a { display: inline-block; padding-block: 0.4rem; }
.langbar-here { font-weight: 700; color: var(--brass-deep); }
.langfoot {
  background: var(--parchment);
  border-top: 1px solid var(--parchment-deep);
  padding: var(--s-5);
  text-align: center;
  font-family: var(--sans); font-size: var(--step--1);
}
.langfoot-note { max-width: 46em; margin: var(--s-3) auto 0; color: var(--ink-soft); }

/* THE RAIL PAYS FOR ITS OWN TAP TARGETS, ON THE ONE SCREEN WHERE THAT COSTS ANYTHING.
   Measured on /welcome at 375 x 812: 334px of furniture — 41% of the screen — stood between
   a reader and the page's own first word. Real targets in the rail cost 32px of height; the
   rail's own padding, the gap between its two rows of languages and a slightly tighter link
   give 28 of them back, and every link still measures 30px against a 24px floor.
   THIS BLOCK STANDS HERE, AFTER THE RAIL'S BASE RULES, AND NOT UP IN THE NAVIGATION'S PHONE
   BLOCK, because a media query adds no specificity: written up there it would have been
   overridden by the very rules it is trying to tighten, and would have done nothing at all.
   (It was written up there first, and the browser said so.) */
@media (max-width: 760px) {
  .langbar-in { padding: var(--s-1) var(--s-4); }
  .langbar-list { gap: var(--s-1) var(--s-4); }
  .langbar-list a { padding-block: 0.2rem; }
}

/* ---------- 404 ---------- */

.lost-band {
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--s-9) var(--s-5);
}

/* ---------- Utilities ---------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ---------- THE MOBILE SAFETY BLOCK ---------- */
/* No page on this site may scroll sideways, at any width — 320 / 375 / 768 / 1280 / 1440.

   AND THE RULE IS "DO NOT OVERFLOW", NOT "HIDE THE OVERFLOW". Two versions of this block
   were written and both were wrong, and both were caught in a real browser on 2026-09-02,
   before this site had ever been deployed:

     1. `html, body { max-width: 100%; overflow-x: hidden; }` — `overflow-x: hidden` on the
        ROOT stops the viewport inheriting body's overflow, body becomes the scroll box, and
        the document stops scrolling VERTICALLY. The page sat frozen at 13px of a 7,615px
        document. A rule written to stop sideways scrolling had stopped scrolling.
     2. `overflow-x: clip` with `overflow-y: visible` — by the spec, `visible` beside a
        clipped axis computes to `auto`, so body became a scroll container again and the
        page rendered blank below the fold.

   So nothing here clips anything. Wide content — the Audience Pulse map, any table, any
   code-shaped block — is given its own scrolling container (`.pulse-wrap`), images are
   capped at their container, and every other component is built to fit. An element wider
   than the viewport is a DEFECT to fix in that component, and hiding it is how a defect
   survives a redesign. */

img, video, iframe, pre, table { max-width: 100%; }
.pulse-wrap, .table-wrap, .script-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- THE ELEVEN-EDITION WORD BREAK (lane P2.D, 2026-09-02) ---------- */
/* MEASURED, NOT GUESSED. The full matrix — 188 pages x 5 widths, 940 measurements in a real
   browser engine — was clean in English and overflowed on FIVE measurements, all of them at
   320 or 375 and all of them in a translated edition:

     /de/welcome    320   +22px   the heading word "Zuschauerpsychologie"
     /de/first-ten  320   +41px   the heading word "Drehbuchautorinnen"
     /ru/privacy    320   +74px   the heading word "Конфиденциальность"
     /ru/privacy    375   +19px   the same word
     /zh/first-ten  320    +9px   a step whose min-content is the support address

   Two different defects, and neither one is hidden here:

   1. A SINGLE WORD LONGER THAN THE VIEWPORT. German compounds and Russian nouns are simply
      longer than 320px of display type, and a word that cannot fit must be allowed to break.
      `overflow-wrap: break-word` lets it, and `hyphens: auto` makes the break a typographic
      one rather than a guillotine — which is why every page in this house declares its own
      `lang`: the browser hyphenates German as German and Russian as Russian. English is
      unaffected, because English has no word here that needs it.

   2. A GRID ITEM THAT REFUSES TO SHRINK. A grid item's `min-width` is `auto`, so it will not
      go narrower than its own min-content — and the min-content of a step that contains
      `support@lovingmywords.com` is that unbreakable address. The track was 288px and the
      item insisted on 313px. `min-width: 0` lets the box shrink to its track, and rule 1
      above then breaks the address instead of the layout.

   Nothing is clipped and nothing is hidden. The words are all still there, and they wrap. */
h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, summary,
.masthead-title, .masthead-sub, .kicker, .price-display, .foot-cat,
.foot-independence, .langfoot-note { overflow-wrap: break-word; }
h1, h2, h3, h4 { -webkit-hyphens: auto; hyphens: auto; }
.walk li, .ladder li, .states li, .proof-fields li, .checklist li, .foot-nav li,
.nav-list li, .langbar-list li, .langfoot-links li { min-width: 0; }

@media (max-width: 520px) {
  .band { padding: var(--s-7) var(--s-4); }
  .walk li { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) var(--s-5); }
  .ladder li { grid-template-columns: 1fr; gap: var(--s-1); }
  .pull { font-size: var(--step-1); }
  .gate-enter { width: 100%; text-align: center; letter-spacing: 0.2em; }
  .btn { padding: var(--s-3) var(--s-5); }
  .pulse { font-size: 0.72rem; }
  .script-page { font-size: 0.72rem; padding: var(--s-5); }
  .proof-fields li { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ---------- WHERE AN IN-PAGE LINK LANDS ---------- */
/* A jump to an id used to put the target flush against the top edge of the window, which
   reads as a page that has been cut off rather than a page that has arrived. No visual
   effect at all until something is actually jumped to. */
[id] { scroll-margin-top: var(--s-5); }

/* ============================================================
   THE THREE READERS THIS SHEET HAD NOT ANSWERED
   (site polish, 2026-09-05 — presentation only, no word moved)
   ============================================================ */

/* ---------- 1 · A READER WHO ASKED FOR LESS MOTION ---------- */
/* The block at the top of this sheet already switches transitions and animations off. But
   three hover states also carry a `translateY(-2px)`, and with the TRANSITION gone the
   element still MOVED — it just moved instantly. For a reader who asked not to have motion,
   an instant jump is precisely the thing they asked not to have. The transform is dropped
   here rather than up there because these rules are defined further down the sheet and a
   media query adds no specificity: at equal weight, the later rule wins. */
@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .btn--gold:hover,
  .btn--ink:hover { transform: none; }
}

/* ---------- 2 · A READER IN WINDOWS HIGH CONTRAST ---------- */
/* In forced-colors mode the browser throws our palette away and paints with the reader's
   own. An outline we colour is dropped on the floor with it, so the keyboard path went
   invisible for exactly the reader least able to afford that. The ring is handed back to the
   system, and the solid buttons keep a border so they still read as buttons rather than as
   sentences. Nothing here changes a single pixel for anybody else. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; outline-offset: 3px; }
  .btn, .btn--gold, .btn--ink, .btn--ghost, .nav-order a.btn--ordertab,
  .gate-enter { border: 1px solid ButtonText; }
  .langbar-new, .panel--srv, .card, .faq-item { border: 1px solid CanvasText; }
  .nav-list a[aria-current="page"] { border-bottom: 2px solid Highlight; }
}

/* ---------- 3 · A READER WITH THE PAGE ON PAPER ---------- */
/* This site had no print rules at all. Screenwriters print the pricing page, the terms and
   the FAQ — and printed, the site put the navigation, the language rail and both footer link
   lists on every sheet, in navy ink, and cut cards in half at the page break.

   NO TEXT IS GENERATED HERE. Not a link address after a word, not a label, not a heading —
   nothing. Text on a printed page is copy, and copy on this site is certified in eleven
   editions; a print stylesheet that invents a word invents it in ten languages it was never
   translated into. So this block moves things, drops things and recolours things, and says
   nothing.

   The FAQ's answers and the pages' supporting sections are native <details>. CSS
   cannot open a drawer, so site.js opens every one of them for the print and puts each back
   exactly as the reader left it afterwards. */
@media print {
  :root { color-scheme: light; }
  html { scroll-behavior: auto; }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.45;
  }
  /* The furniture that cannot be pressed on paper. */
  .site-nav, .nav-toggle, .langbar, .langfoot,
  .foot-nav, .foot-legal-nav, .skip-link,
  .proof-controls, .proof-hint { display: none !important; }

  .site-head, .site-foot {
    background: #fff !important;
    color: #000 !important;
    border-color: #000;
  }
  .masthead-title a, .masthead-title, .masthead-sub,
  .site-foot .foot-brand, .site-foot .foot-cat, .site-foot a,
  .site-foot p, .foot-legal { color: #000 !important; }

  .band, .band--parchment, .band--navy, .band--goldenhour, .band--screening,
  .verdict-band, .panel--srv, .panel--generic, .card, .card--navy,
  .faq-item, .tier-card, .demo-pending, .proof-step {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .band { padding: 0 0 12pt; }
  .band--navy h1, .band--navy h2, .band--navy h3, .band--navy h4,
  .band--navy p, .band--navy li, .band--navy a,
  .band--screening h1, .band--screening h2, .band--screening h3, .band--screening h4,
  .band--screening p, .band--screening li, .band--screening a,
  .panel--srv h3, .panel--srv h4, .panel--srv ul, .panel--srv li,
  .panel--srv a, .panel--srv .price-display, .panel--srv .price-period,
  .panel-label, .kicker, .verdict-band .verdict-title, .verdict-band p,
  .price-display, .price-period, .lede, a { color: #000 !important; }
  .btn, .gate-enter {
    background: #fff !important;
    color: #000 !important;
    border: 1pt solid #000 !important;
    box-shadow: none !important;
  }
  .card, .panel--srv, .panel--generic, .faq-item, .tier-card,
  .demo-pending { border: 0.5pt solid #666 !important; }

  /* Keep a thought whole across the page break. */
  h1, h2, h3, h4 { break-after: avoid-page; page-break-after: avoid; }
  .card, .panel, .faq-item, .tier-card, .walk li, .ladder li, .states li,
  .checklist li, .figure-cell, .board-figure, tr, .proof-step, .demo-pending {
    break-inside: avoid; page-break-inside: avoid;
  }
  /* The two scrolling containers print in full instead of clipped at the edge of a box. */
  .pulse-wrap, .table-wrap, .script-wrap { overflow: visible !important; }
  .pulse, .script-page { font-size: 8pt; }
  img { max-width: 100% !important; }
}

/* ---------- THE HOLDING STATE (the CE's first SRV ruling, 2026-09-30) ----------
   While the canon's site.opening is "holding", the seat calls to action are a quiet, unpressable "Opening soon" with one
   plain sentence beneath; the nav tab keeps its place and its brass so the first phone screen does not shift when the
   flag flips to "open". */
.btn--soon, .btn--soon:hover, .btn:disabled, .btn:disabled:hover { cursor: default; transform: none; box-shadow: none; }
.btn.btn--soon, .btn.btn--soon:hover, .btn--gold:disabled { background: var(--brass); color: var(--ink-deep); opacity: 0.85; }
.nav-order .btn--ordertab.btn--soon {
  display: inline-block;
  background: linear-gradient(180deg, var(--brass-lit), var(--brass));
  color: var(--ink-deep);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  opacity: 0.85;
}
.opening-note { margin-top: var(--s-4); font-weight: 600; }
.center .opening-note { text-align: center; }

/* YOUR SCRIPT REMAINS YOURS — the Privacy page's promise, prominent (the CE's sixth ruling) */
.promise { border-left: 4px solid var(--brass); padding-left: 1.25rem; }
.promise-lead { font-weight: 600; }