/* ============================================================
   CoachRocket — "Rack & Ledger" landing system
   v=20260822-rack

   Rules that are load-bearing here (do not casually break):
   - Logical properties ONLY. No left/right anywhere in layout.
     (See docs/landing-design.md §4 "RTL guardrails" — the 2026-08-20
     Farsi-mobile blank-page bug came from physical offsets.)
   - Every colour is a var(). Dark mode is a token swap, nothing else.
   - Non-logical properties (gradients, box-shadow offsets) are collected
     in the "rtl gradient flips" block at the very bottom of this file.
   ============================================================ */

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  /* --- surfaces --- */
  --surface: #f2f4f3;
  --surface-card: #ffffff;
  --surface-sunk: #e8edeb;
  --band: #171d20;
  --band-raised: #212a2d;
  --band-deep: #0e1214;

  /* --- ink --- */
  --ink: #12171a;
  --ink-body: #414b4e;
  --ink-muted: #5f6a6d;
  --on-band: #f2f4f3;
  --on-band-muted: #a9b4b7;

  /* --- brand: amber (= app palette.amber500) --- */
  --amber: #f0a63b;        /* fill only, never text on light */
  --amber-hi: #f5b65c;     /* text on dark bands, hover fill */
  --amber-deep: #b5741a;   /* plate edge + focus ring */
  --amber-ink: #8f550a;    /* amber TEXT on light surfaces */
  --amber-soft: #fbebd2;

  /* --- ledger: teal (money / recorded) --- */
  --teal: #0c6058;
  --teal-hi: #6fc7bc;
  --teal-soft: #d7ebe8;

  /* --- states --- */
  --ok: #1d6f4a;
  --warn: #8f550a;
  --danger: #a32c2c;
  --danger-soft: #f7e2e2;

  /* --- lines & steel --- */
  --rule: #dce1df;
  --rule-strong: #7e8886;   /* >=3:1, use on interactive borders */
  --steel: #c8d0ce;
  --steel-hole: #f2f4f3;
  --shadow-plate: 0 6px 0 var(--amber-deep);
  --shadow-card: 0 1px 2px rgb(18 23 26 / 0.06), 0 8px 24px rgb(18 23 26 / 0.06);

  /* Dark-mode band identity edge (transparent in light, amber in dark). */
  --band-edge: transparent;

  /* --- type: families (RTL redefines these, see below) --- */
  --font-display: Anton, "Arial Narrow", Haettenschweiler, Impact, system-ui, sans-serif;
  --font-body: Manrope, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* --- type: display role modifiers --- */
  --display-weight: 400;
  --display-transform: uppercase;
  --display-tracking: 0.01em;
  --display-leading: 0.95;
  --display-scale: 1;

  /* --- type: scale --- */
  --step--2: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
  --step--1: clamp(0.8125rem, 0.78rem + 0.17vw, 0.9rem);
  --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.07rem + 0.28vw, 1.28rem);
  --step-2:  clamp(1.3rem, 1.18rem + 0.6vw, 1.7rem);
  --step-3:  clamp(1.6rem, 1.36rem + 1.2vw, 2.35rem);
  --step-4:  clamp(2rem, 1.55rem + 2.25vw, 3.4rem);
  --step-5:  clamp(2.4rem, 1.6rem + 4vw, 4.5rem);
  --body-leading: 1.6;
  --measure: 62ch;

  /* --- space (extends app Spacing 4/8/12/16/24/32) --- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --section-y: clamp(3rem, 7vw, 6rem);

  /* --- radii (= app Radii) --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- frame --- */
  --content: 1160px;
  --pad-inline: clamp(1rem, 4vw, 2rem);
  --gutter: 64px;
  --rail-pitch: 44px;

  /* --- motion (= app Durations) --- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light dark;
}

/* ---- RTL: redefine the tokens, not the rules ---- */
html[dir="rtl"] {
  --font-display: Vazirmatn, Tahoma, "Noto Naskh Arabic", system-ui, sans-serif;
  --font-body: Vazirmatn, "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-num: Vazirmatn, ui-monospace, monospace;
  --display-weight: 800;
  --display-transform: none;
  --display-tracking: 0;      /* never track Arabic script */
  --display-leading: 1.25;
  --display-scale: 1.06;
  --body-leading: 1.75;
  --measure: 52ch;
}

/* ---- Dark: token swap only (system preference) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0e1214;
    --surface-card: #171d20;
    --surface-sunk: #0a0d0f;
    --band: #212a2d;
    --band-raised: #2a3437;
    --band-deep: #0a0d0f;
    --ink: #e8ecec;
    --ink-body: #c2cbcd;
    --ink-muted: #a9b4b7;
    --on-band: #e8ecec;
    --on-band-muted: #a9b4b7;
    --amber-ink: #f5b65c;
    --amber-soft: #33240e;
    --teal: #6fc7bc;
    --teal-soft: #0d2b28;
    --ok: #66bb8a;
    --warn: #f5b65c;
    --danger: #f09a9a;
    --danger-soft: #331919;
    --rule: #2c3538;
    --rule-strong: #667275;
    --steel: #394447;
    --steel-hole: #0e1214;
    --band-edge: var(--amber);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 24px rgb(0 0 0 / 0.35);
  }
}

/* ---- Dark: same declarations again behind the explicit toggle hook, so a
        future [data-theme] switch wins in both directions. Duplicated on
        purpose (see docs/landing-design.md §7). ---- */
:root[data-theme="dark"] {
  --surface: #0e1214;
  --surface-card: #171d20;
  --surface-sunk: #0a0d0f;
  --band: #212a2d;
  --band-raised: #2a3437;
  --band-deep: #0a0d0f;
  --ink: #e8ecec;
  --ink-body: #c2cbcd;
  --ink-muted: #a9b4b7;
  --on-band: #e8ecec;
  --on-band-muted: #a9b4b7;
  --amber-ink: #f5b65c;
  --amber-soft: #33240e;
  --teal: #6fc7bc;
  --teal-soft: #0d2b28;
  --ok: #66bb8a;
  --warn: #f5b65c;
  --danger: #f09a9a;
  --danger-soft: #331919;
  --rule: #2c3538;
  --rule-strong: #667275;
  --steel: #394447;
  --steel-hole: #0e1214;
  --band-edge: var(--amber);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 24px rgb(0 0 0 / 0.35);
}

/* ============================================================
   2. Base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;              /* guardrail 2: both html AND body */
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-block-size: 100vh;
  max-inline-size: 100%;
  overflow-x: clip;              /* guardrail 2 */
  background: var(--surface);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
}

img {
  max-inline-size: 100%;
  block-size: auto;
}

/* ---- display role: no rule below ever names a font family ---- */
.display,
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  color: var(--ink);
  margin: 0;
}
h1 { font-size: calc(var(--step-4) * var(--display-scale)); }
h2 { font-size: calc(var(--step-3) * var(--display-scale)); }
h3 { font-size: calc(var(--step-2) * var(--display-scale)); }

p {
  margin: 0;
  max-inline-size: var(--measure);
}

a {
  color: var(--amber-ink);
}

/* ---- ledger / numeral role ---- */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* ---- focus: instant, never animated ---- */
:focus-visible {
  outline: 3px solid var(--amber-deep);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- icons that depict direction get mirrored in RTL ---- */
[dir="rtl"] .icon-dir {
  transform: scaleX(-1);
}

/* Visually hidden until focused. GUARDRAIL 1: never park this off-canvas
   with `inset-inline-start: -999px` — on an RTL page that widens the
   document and mobile browsers paint the void (the Aug-20 blank-page bug). */
.skip {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip:focus {
  position: fixed;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  inset-inline-start: var(--space-3);
  inset-block-start: var(--space-3);
  z-index: 40;
  background: var(--surface-card);
  color: var(--ink);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

/* ============================================================
   3. Frame — .wrap and the section rhythm
   GUARDRAIL 3: full-bleed bands are width:100% + inner .wrap.
   There is not one negative inline margin in this file.
   ============================================================ */
.wrap {
  position: relative;
  max-inline-size: var(--content);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

@media (min-width: 1024px) {
  /* The rail gutter only exists where there is room for it. */
  .wrap {
    padding-inline-start: max(var(--pad-inline), var(--gutter));
  }
}

.section {
  inline-size: 100%;
  padding-block: var(--section-y);
}

.band {
  inline-size: 100%;
  background: var(--band);
  color: var(--on-band);
  border-inline-start: 2px solid var(--band-edge);
  /* Rail steel is re-scoped so the punched holes read against the band. */
  --steel: var(--rule-strong);
  --steel-hole: var(--band);
}
.band h1,
.band h2,
.band h3 {
  color: var(--on-band);
}
.band p {
  color: var(--on-band-muted);
}

.section-lede {
  margin-block-start: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--step-1);
}
.band .section-lede {
  color: var(--on-band-muted);
}

/* ============================================================
   4. Signature element — the rack upright (rail + amber pin)
   Mobile-first: in flow, horizontal. The gutter-positioned form is
   gated behind >=1024px (GUARDRAIL 5).
   ============================================================ */
.rail {
  display: block;
  inline-size: 100%;
  block-size: 10px;
  border-radius: 5px;
  background-color: var(--steel);
  background-image: radial-gradient(circle at 22px 50%, var(--steel-hole) 0 3.5px, transparent 4px);
  background-size: var(--rail-pitch) 100%;
  background-repeat: repeat-x;
  margin-block-end: var(--space-6);
}

.pin {
  position: relative;
}
.pin::before {
  content: "";
  display: block;
  inline-size: 30px;
  block-size: 10px;
  border-radius: 5px;
  background: var(--amber);
  box-shadow: 0 2px 0 var(--amber-deep);
  margin-block-end: var(--space-3);
}

@media (min-width: 1024px) {
  .rail {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 16px;
    block-size: auto;
    border-radius: 8px;
    background-image: radial-gradient(circle at 50% 22px, var(--steel-hole) 0 3.5px, transparent 4px);
    background-size: 100% var(--rail-pitch);
    background-repeat: repeat-y;
    margin-block-end: 0;
  }
  .pin::before {
    position: absolute;
    inset-inline-start: calc(var(--gutter) * -1 + 17px);
    inset-block-start: 0.55em;
    margin-block-end: 0;
  }
}

/* ============================================================
   5. Buttons — amber plates
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-weight: 800;
  font-size: var(--step-0);
  text-decoration: none;
  cursor: pointer;
  transition:
    translate var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    background-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}

.btn.primary {
  background: var(--amber);
  color: var(--ink);
  box-shadow: var(--shadow-plate);
}
.btn.primary:hover {
  background: var(--amber-hi);
}
.btn.primary:active {
  translate: 0 2px;
  box-shadow: 0 4px 0 var(--amber-deep);
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn.ghost:hover {
  border-color: var(--ink);
}
.band .btn.ghost,
.cta-band .btn.ghost {
  color: var(--on-band);
  border-color: var(--on-band-muted);
}
.band .btn.ghost:hover,
.cta-band .btn.ghost:hover {
  border-color: var(--on-band);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}
.cta-row.center {
  justify-content: center;
}

.cta-note {
  margin-block-start: var(--space-4);
  font-size: var(--step--1);
  color: var(--ink-muted);
  max-inline-size: var(--measure);
}
.band .cta-note,
.cta-band .cta-note {
  color: var(--on-band-muted);
}

/* ============================================================
   6. Header — opaque steel, sticky, no glass
   ============================================================ */
.top {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  inline-size: 100%;
  background: var(--band-deep);
  color: var(--on-band);
  border-block-end: 2px solid var(--amber);
}
@supports (backdrop-filter: saturate(1.2)) {
  .top {
    background: color-mix(in srgb, var(--band-deep) 88%, transparent);
    backdrop-filter: saturate(1.2);
  }
}

.top-inner {
  max-inline-size: var(--content);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
  min-block-size: 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--on-band);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-tracking);
  font-size: var(--step-1);
  line-height: 1;
}

.brand-logo {
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--radius-sm);
  display: block;
  flex-shrink: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: nowrap;
}

.nav a,
.lang-toggle {
  color: var(--on-band);
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav a:hover,
.lang-toggle:hover {
  color: var(--amber-hi);
}

.nav-link {
  display: none;
}
@media (min-width: 900px) {
  .nav-link {
    display: inline;
  }
}

.lang-picker {
  position: relative;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--rule-strong);
  background: transparent;
}
.lang-toggle[aria-expanded="true"] {
  border-color: var(--amber);
  color: var(--amber-hi);
}

/* Anchored with inset-inline-end — already direction-correct, keep as-is. */
.lang-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  min-inline-size: 9rem;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--surface-card);
  border: 2px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  z-index: 40;
}
.lang-menu li {
  margin: 0;
}
.lang-menu button {
  display: block;
  inline-size: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
.lang-menu button:hover,
.lang-menu button:focus-visible {
  background: var(--amber-soft);
}

.nav-cta {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--amber);
  color: var(--ink) !important;
  font-weight: 800;
  box-shadow: 0 4px 0 var(--amber-deep);
  transition: translate var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.nav-cta:active {
  translate: 0 2px;
  box-shadow: 0 2px 0 var(--amber-deep);
}

/* Mobile section chips — scroll inside their own container, never the body. */
.chiprow {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--pad-inline);
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  border-block-start: 1px solid var(--band-raised);
}
.chiprow::-webkit-scrollbar {
  display: none;
}
.chiprow a {
  scroll-snap-align: start;
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule-strong);
  color: var(--on-band);
  font-size: var(--step--2);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.chiprow a:hover {
  border-color: var(--amber);
  color: var(--amber-hi);
}
@media (min-width: 900px) {
  .chiprow {
    display: none;
  }
}

/* 320px safety: the header row is the one place brand + language + CTA can
   collide. Shrink rather than let anything push the inline box past the edge. */
.top-inner > * {
  min-inline-size: 0;
}
@media (max-width: 400px) {
  .top-inner {
    gap: var(--space-2);
  }
  .brand {
    font-size: var(--step-0);
  }
  .brand-logo {
    inline-size: 28px;
    block-size: 28px;
  }
  .nav {
    gap: var(--space-2);
  }
  .nav-cta {
    padding-inline: var(--space-3);
  }
}

/* ============================================================
   7. Hero
   ============================================================ */
.hero {
  padding-block: var(--space-7) var(--section-y);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: end;
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-6);
  }
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}

.brand-logo-hero {
  inline-size: clamp(56px, 10vw, 72px);
  block-size: clamp(56px, 10vw, 72px);
  border-radius: var(--radius-lg);
  display: block;
  flex-shrink: 0;
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  font-size: calc(var(--step-3) * var(--display-scale));
  color: var(--ink);
  margin: 0;
}

.hero h1 {
  max-inline-size: 15ch;
}
html[dir="rtl"] .hero h1 {
  max-inline-size: 19ch;
}

.lede {
  margin-block-start: var(--space-5);
  font-size: var(--step-1);
  color: var(--ink-body);
  max-inline-size: var(--measure);
}

.hero-reassurance {
  margin-block-start: var(--space-4);
  font-size: var(--step--1);
  color: var(--teal);
  font-weight: 700;
  max-inline-size: var(--measure);
}

/* ---- the Week Board: flat, structural, no bezel and no glow ---- */
.board {
  background: var(--surface-card);
  border: 2px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  max-inline-size: 420px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .board {
    max-inline-size: none;
    margin-inline: 0;
  }
}

.board-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  font-size: calc(var(--step-1) * var(--display-scale));
  color: var(--ink);
  margin-block-end: var(--space-4);
}

.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
  margin-block-end: var(--space-5);
}
.week span {
  block-size: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  border: 2px solid transparent;
}
.week span.assigned {
  background: var(--amber);
}
.week span.due {
  background: transparent;
  border-color: var(--teal);
}

.ledger {
  border-block-start: 2px solid var(--rule);
}
.ledger-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: 2px solid var(--rule);
}
.ledger-row:nth-child(even) {
  background: var(--surface-sunk);
}
.ledger-text strong {
  display: block;
  font-size: var(--step--1);
  font-weight: 800;
  color: var(--ink);
}
.ledger-text em {
  font-style: normal;
  font-size: var(--step--2);
  color: var(--ink-muted);
}
.recorded {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--teal-soft);
  color: var(--teal);
  font-size: var(--step--2);
  font-weight: 800;
}
.recorded svg {
  inline-size: 14px;
  block-size: 14px;
  flex-shrink: 0;
}

.progress {
  margin-block-start: var(--space-5);
  block-size: 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--surface-sunk);
  overflow: hidden;
}
.progress i {
  display: block;
  block-size: 100%;
  inline-size: var(--p);
  border-radius: inherit;
  background-image: linear-gradient(90deg, var(--amber), var(--amber-hi));
}

/* ============================================================
   8. How it works — four pins on one upright
   ============================================================ */
.steps {
  list-style: none;
  margin: 0;
  margin-block-start: var(--space-7);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  border-inline-start: 2px solid var(--steel);
  padding-inline-start: var(--space-5);
}
@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    border-inline-start: 0;
    padding-inline-start: 0;
    border-block-start: 2px solid var(--steel);
  }
}

.steps li {
  position: relative;
  padding-block-start: var(--space-5);
}

.steps .n {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--band-raised);
  border: 2px solid var(--amber);
  color: var(--amber-hi);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-1);
  letter-spacing: 0;
  margin-block-end: var(--space-3);
  unicode-bidi: isolate;
}

.steps h3 {
  margin-block-end: var(--space-2);
}
.steps p {
  font-size: var(--step-0);
}

/* ============================================================
   9. Benefits — plate cards + extras strip
   ============================================================ */
.plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-7);
  list-style: none;
  padding: 0;
}
@media (max-width: 560px) {
  .plates {
    grid-template-columns: 1fr;
  }
}

.plate {
  position: relative;
  background: var(--surface-card);
  border: 2px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  padding-block-start: var(--space-6);
  transition: border-color var(--dur-base) var(--ease);
}
.plate:hover,
.plate:focus-within {
  border-color: var(--rule-strong);
}
/* Punched hole notch at the block-start / inline-start corner. */
.plate::before {
  content: "";
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--steel);
  transition: background-color var(--dur-base) var(--ease);
}
.plate:hover::before,
.plate:focus-within::before {
  background: var(--amber);
}

.plate-icon {
  display: block;
  inline-size: 24px;
  block-size: 24px;
  color: var(--amber-ink);
  margin-block-end: var(--space-4);
}

.plate h3 {
  margin-block-end: var(--space-3);
  text-align: start;
}
.plate p {
  color: var(--ink-body);
  text-align: start;
  font-size: var(--step-0);
}

.plate-feature {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 2px solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-muted);
  font-weight: 700;
  text-align: start;
}

.extras {
  margin-block-start: var(--space-6);
  background: var(--surface-sunk);
  border: 2px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.extras h3 {
  margin-block-end: var(--space-3);
}
.extras p {
  color: var(--ink-body);
}

/* ============================================================
   10. Social proof (markup is commented out until real quotes exist —
   these rules are here so it can be switched on without a CSS change)
   ============================================================ */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-7);
  list-style: none;
  padding: 0;
}
.quote {
  background: var(--surface-card);
  border: 2px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.quote blockquote {
  margin: 0;
  color: var(--ink-body);
  text-align: start;
}
.quote figcaption {
  margin-block-start: var(--space-4);
  font-size: var(--step--1);
  color: var(--ink-muted);
  font-weight: 700;
  text-align: start;
}
.proof-stat {
  margin-block-start: var(--space-5);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* ============================================================
   11. Pricing — two panels, ledger register
   ============================================================ */
.price-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-block-start: var(--space-7);
  align-items: start;
}
@media (min-width: 900px) {
  .price-split {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.price-col {
  background: var(--surface-card);
  border: 2px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.price-col.dark {
  background: var(--band);
  color: var(--on-band);
  border-color: var(--band-raised);
  border-inline-start: 2px solid var(--band-edge);
}
.price-col.dark h3 {
  color: var(--on-band);
}
.price-col.dark .price-note {
  color: var(--on-band-muted);
}

.price-col h3 {
  margin-block-end: var(--space-2);
}

.price-note {
  color: var(--ink-muted);
  font-size: var(--step--1);
}
.price-note + .price-note {
  margin-block-start: var(--space-4);
}

.tiers,
.facts {
  list-style: none;
  margin: 0;
  margin-block-start: var(--space-5);
  padding: 0;
  display: grid;
  gap: 0;
}

/* Register rows: name at start, price at end, a rule between rows. */
.tier {
  border-block-end: 2px solid var(--rule);
  padding-block: var(--space-4);
  padding-inline: var(--space-3);
  background: transparent;
}
.tier:first-child {
  border-block-start: 2px solid var(--rule);
}
.tier.featured {
  position: relative;
  border: 3px solid var(--amber);
  border-radius: var(--radius-md);
  background: var(--amber-soft);
}
/* The pin tab — "this is where the pin is set". At <1024px it sits inside
   the card rather than protruding into a gutter that does not exist. */
.tier.featured::after {
  content: "";
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-3);
  inline-size: 24px;
  block-size: 8px;
  border-radius: 4px;
  background: var(--amber);
  box-shadow: 0 2px 0 var(--amber-deep);
}
@media (min-width: 1024px) {
  .tier.featured::after {
    inset-inline-start: -10px;
  }
}

.tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-2);
}
.tier-name {
  font-weight: 800;
  color: var(--ink);
}
.tier-price {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  white-space: nowrap;
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--amber-ink);
  text-align: end;
}
.tier-price small {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step--2);
  color: var(--ink-muted);
}
.tier p {
  font-size: var(--step--1);
  color: var(--ink-body);
}

/* Pin bullets on the dark client panel. */
.facts li {
  position: relative;
  padding-inline-start: var(--space-6);
  padding-block: var(--space-2);
  font-size: var(--step--1);
  color: var(--on-band-muted);
}
.facts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.85em;
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--amber);
}

.price-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

.price-disclaimer {
  margin-block-start: var(--space-5);
  font-size: var(--step--2);
  color: var(--ink-muted);
  max-inline-size: var(--measure);
}

/* ============================================================
   12. Money flow — how a payment becomes access
   ============================================================ */
.flow {
  list-style: none;
  counter-reset: flow;
  margin: 0;
  margin-block-start: var(--space-7);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .flow {
    grid-template-columns: repeat(3, 1fr);
  }
}
.flow li {
  counter-increment: flow;
  position: relative;
  background: var(--surface-card);
  border: 2px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  padding-block-start: var(--space-6);
}
.flow li::before {
  content: counter(flow);
  position: absolute;
  inset-block-start: -0.85rem;
  inset-inline-start: var(--space-5);
  inline-size: 1.85rem;
  block-size: 1.85rem;
  border-radius: var(--radius-pill);
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: 0;
  display: grid;
  place-items: center;
  unicode-bidi: isolate;
}
.flow h3 {
  font-size: calc(var(--step-1) * var(--display-scale));
  margin-block-end: var(--space-2);
}
.flow p {
  font-size: var(--step--1);
  color: var(--ink-body);
}

/* ============================================================
   13. FAQ — ruled register, hole/pin marker
   ============================================================ */
.qa-list {
  margin-block-start: var(--space-7);
  margin-inline: auto;
  max-inline-size: 68ch;
  display: grid;
  gap: var(--space-3);
}
.qa-list details {
  background: var(--surface-card);
  border: 2px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.qa-list details[open] {
  background: var(--surface-sunk);
  border-color: var(--rule-strong);
}
@media (max-width: 560px) {
  .qa-list details {
    padding: var(--space-4);
  }
}
.qa-list summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  text-align: start;
}
.qa-list summary::-webkit-details-marker {
  display: none;
}
/* Empty hole -> pinned hole. No rotation, so nothing needs mirroring. */
.qa-list summary::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--steel);
  box-shadow: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.qa-list details[open] summary::after {
  background: var(--amber);
  box-shadow: 0 2px 0 var(--amber-deep);
  animation: pin-pop 140ms var(--ease);
}
@keyframes pin-pop {
  from { scale: 0.6; }
  to { scale: 1; }
}
.qa-list p {
  margin-block-start: var(--space-4);
  color: var(--ink-body);
  text-align: start;
  max-inline-size: none;
}

/* ============================================================
   14. Footer CTA band + footer floor plate
   ============================================================ */
.cta-band {
  inline-size: 100%;
  background: var(--band);
  color: var(--on-band);
  border-inline-start: 2px solid var(--band-edge);
  padding-block: var(--section-y);
  text-align: center;
}
.cta-band h2 {
  color: var(--on-band);
}
.cta-band p {
  color: var(--on-band-muted);
  margin-inline: auto;
  margin-block-start: var(--space-3);
}

.foot {
  inline-size: 100%;
  background: var(--band-deep);
  color: var(--on-band-muted);
  /* The rail is bolted to the floor: the page's full stop. */
  border-block-start: 4px solid var(--amber);
  padding-block: var(--space-7);
  font-size: var(--step--1);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 560px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 900px) {
  .foot-grid {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}

.foot-brand {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
@media (min-width: 560px) {
  .foot-brand {
    grid-column: 1 / -1;
  }
}
@media (min-width: 900px) {
  .foot-brand {
    grid-column: auto;
  }
}
.foot-brand strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-tracking);
  color: var(--on-band);
  margin-block-end: var(--space-1);
}
.foot-brand span {
  display: block;
  color: var(--on-band-muted);
}

.foot-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: start;
}
.foot-col h4 {
  margin: 0;
  margin-block-end: var(--space-1);
  font-size: var(--step--2);
  text-transform: uppercase;
  color: var(--on-band-muted);
  font-family: var(--font-body);
  font-weight: 800;
}
html[dir="rtl"] .foot-col h4 {
  text-transform: none;
}
.foot-col a {
  color: var(--on-band);
  text-decoration: none;
  font-weight: 700;
}
.foot-col a:hover {
  color: var(--amber-hi);
}

.foot-legal {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 2px solid var(--band-raised);
  font-size: var(--step--2);
  color: var(--on-band-muted);
  max-inline-size: none;
}

/* ============================================================
   15. Motion — block axis only, nothing loops
   ============================================================ */
.js-reveal {
  opacity: 0;
  translate: 0 8px;
  transition:
    opacity var(--dur-slow) var(--ease),
    translate var(--dur-slow) var(--ease);
}
.js-reveal.in {
  opacity: 1;
  translate: none;
}
.js-reveal:nth-child(2) { transition-delay: 60ms; }
.js-reveal:nth-child(3) { transition-delay: 120ms; }
.js-reveal:nth-child(n + 4) { transition-delay: 160ms; }

/* Pin seat: the plate drops into its hole just after the heading lands. */
.js-reveal .pin::before,
.pin.js-reveal::before {
  translate: 0 -3px;
  opacity: 0;
  transition:
    translate 180ms var(--ease) 40ms,
    opacity 180ms var(--ease) 40ms;
}
.js-reveal.in .pin::before,
.pin.js-reveal.in::before {
  translate: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Never leave content stuck at opacity: 0 for a reduced-motion reader
     whose IntersectionObserver has not fired. */
  .js-reveal,
  .js-reveal .pin::before,
  .pin.js-reveal::before {
    opacity: 1 !important;
    translate: none !important;
  }
}

/* ============================================================
   16. --- rtl gradient flips ---
   CSS gradients and box-shadow offsets take no logical direction, so every
   one of them that is not symmetric gets its explicit RTL counterpart here.
   Nothing else in this file needs mirroring: the rail's punch pattern is
   horizontally symmetric by design, and every offset above is logical.
   ============================================================ */
html[dir="rtl"] .progress i {
  background-image: linear-gradient(270deg, var(--amber), var(--amber-hi));
  margin-inline-start: auto;
}

/* The rail's radial punch is symmetric about its own axis in both the
   vertical (>=1024px) and horizontal (<1024px) forms, so it is intentionally
   NOT flipped. Documented so nobody "fixes" it later. */