/* ==========================================================================
   Hymnal Editorial: design tokens (source of truth for CSS consumers)
   Mirror of tokens.json. If you change one, change the other.

   Layers
   1. Primitives  (--p-*)      raw palette, never used directly by components
   2. Semantic    (--bg, --fg…) what components consume; remapped per theme
   3. Component   (--chart-*, --hud-*) a few tokens that need their own knob

   Themes: [data-theme="paper"] (default) · "evening" · "stage" · "daylight"
   ========================================================================== */

:root {
  /* ---------- 1. Primitives ---------- */
  /* Paper (warm, uncoated stock) */
  --p-paper-0: #fffdf8;   /* printed page / band sheet */
  --p-paper-1: #fbf8f2;   /* raised surface: sheets, cards, fields */
  --p-paper-2: #f4eee3;   /* app background */
  --p-paper-3: #ece4d5;   /* sunken fill, pressed rows */
  --p-paper-4: #e2d7c4;   /* strong fill, drag shadow base */
  --p-rule-1:  #ddd1be;   /* hairline */
  --p-rule-2:  #bfae95;   /* strong rule, outlines, double-rule */
  /* Ink */
  --p-ink-1: #2a2119;     /* primary text, 13.7:1 on paper-2 */
  --p-ink-2: #6f604b;     /* secondary text, 5.3:1 */
  --p-ink-3: #857560;     /* tertiary / placeholder (≥ 3:1, never for body) */
  /* Oxblood (the one accent) */
  --p-ox-1: #f6e8e1;
  --p-ox-2: #efdcd2;      /* soft fill */
  --p-ox-5: #a8433b;
  --p-ox-6: #8e2c27;      /* accent, 7.2:1 on paper-2 */
  --p-ox-7: #6e1f1b;      /* pressed / on-soft */
  /* Supporting (status only) */
  --p-moss-6:  #44702f;   /* ok / in tune, 4.9:1 */
  --p-ochre-6: #9a5b0c;   /* warning */
  /* Night ink (Evening + Stage) */
  --p-night-0: #110d09;
  --p-night-1: #15110c;   /* stage background */
  --p-night-2: #1b1610;   /* evening background */
  --p-night-3: #211a13;
  --p-night-4: #2c241b;
  --p-night-5: #3a2f23;   /* night rule */
  --p-cream-1: #f3e9d8;   /* stage ink, 15.6:1 */
  --p-cream-2: #a8957a;   /* stage secondary, 6.5:1 */
  --p-amber-5: #eaa47a;   /* stage chords + accent, 9:1 */
  --p-amber-6: #e39a7a;   /* evening accent */

  /* ---------- Type families ---------- */
  --font-display: 'Fraunces', 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --font-text:    'Source Serif 4', 'Frank Ruhl Libre', Georgia, serif;   /* chart lyrics + chords */
  --font-ui:      'Source Sans 3', 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Source Code Pro', ui-monospace, Menlo, monospace;            /* editor source only */

  /* ---------- Type scale (UI) — size/line-height ---------- */
  --t-display-hero: 600 64px/68px var(--font-display); /* landing page hero, wide screens */
  --t-display-xl: 600 40px/44px var(--font-display);  /* onboarding hero, landing page section titles */
  --t-display-l:  600 32px/36px var(--font-display);  /* large page title */
  --t-display-m:  600 24px/28px var(--font-display);  /* sheet title, song title */
  --t-title:      600 19px/24px var(--font-display);  /* card + row titles that need voice */
  --t-prose:      400 19px/30px var(--font-text);     /* landing page and blog reading text */
  --t-body-l:     400 17px/24px var(--font-ui);       /* primary row text (iOS body) */
  --t-body:       400 15px/22px var(--font-ui);
  --t-label:      600 14px/18px var(--font-ui);       /* buttons, field labels */
  --t-caption:    400 13px/18px var(--font-ui);       /* row meta */
  --t-eyebrow:    600 11px/14px var(--font-ui);       /* SMALL CAPS section labels, +0.12em */
  --t-tab:        600 11px/14px var(--font-ui);       /* tab bar labels, +0.02em */
  --t-seg:        600 13px/16px var(--font-ui);       /* segmented control */
  --t-empty:      italic 500 26px/32px var(--font-display); /* empty-state line */
  --t-song-title: italic 600 30px/34px var(--font-display); /* song header */
  --t-numeral:    italic 600 30px/32px var(--font-display); /* stepper values */
  --t-set-number: italic 500 22px/24px var(--font-display); /* set positions */
  --t-badge:      italic 600 16px/18px var(--font-display); /* key badges */
  --t-hint:       italic 400 15px/22px var(--font-text);    /* hints, margin notes */
  --t-row-title:  600 17px/22px var(--font-ui);             /* list row titles */
  --track-eyebrow: 0.12em;
  --track-display: -0.015em;

  /* ---------- Spacing (4-pt) ---------- */
  --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --gutter: 20px;          /* phone page margin */
  --gutter-tablet: 32px;
  --measure: 38em;         /* max line length for prose */

  /* ---------- Shape ---------- */
  --r-xs: 4px;     /* chips, key badges */
  --r-s: 6px;      /* buttons, fields */
  --r-m: 10px;     /* cards, list groups */
  --r-l: 18px;     /* sheets (top corners) */
  --r-round: 999px;/* only: steppers' round buttons, avatar, beat dots */
  --hair: 1px;

  /* ---------- Elevation: rules first, shadow only for things that float ---------- */
  --e-0: none;
  --e-sheet: 0 -12px 32px rgba(42, 33, 25, 0.14);
  --e-float: 0 6px 18px rgba(80, 40, 20, 0.18);      /* FAB, popover, toast */
  --e-lift:  0 12px 28px rgba(80, 40, 20, 0.24);     /* dragged row */

  /* ---------- Touch ---------- */
  --hit: 44px;          /* minimum target (48 on Android via platform layer) */
  --hit-stage: 56px;    /* minimum target in Perform */

  /* ---------- Motion (see docs/design/MOTION.md) ---------- */
  --d-instant: 0ms;
  --d-quick:   120ms;   /* hover, press, toggles, chip select */
  --d-base:    200ms;   /* most UI transitions, toast in */
  --d-gentle:  280ms;   /* sheets, dialogs, end card */
  --d-page:    360ms;   /* navigation push (custom contexts only) */
  --d-stage-max: 180ms; /* hard cap for anything over the chart in Perform */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);     /* entering */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);         /* leaving */
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);     /* moving in place */
  --ease-ink:    cubic-bezier(0.3, 0.9, 0.3, 1);     /* re-inking chords, numbers */
  --stagger: 12ms;

  /* ---------- Z layers ---------- */
  --z-chart: 0; --z-chrome: 10; --z-hud: 20; --z-rail: 30; --z-scrim: 40; --z-sheet: 50; --z-toast: 60; --z-dialog: 70;
}

/* ---------- 2. Semantic: Paper (default light) ---------- */
:root, [data-theme="paper"] {
  color-scheme: light;
  --bg: var(--p-paper-2);
  --surface: var(--p-paper-1);
  --surface-sunken: var(--p-paper-3);
  --surface-strong: var(--p-paper-4);
  --page: var(--p-paper-0);
  --fg: var(--p-ink-1);
  --fg-muted: var(--p-ink-2);
  --fg-faint: var(--p-ink-3);
  --rule: var(--p-rule-1);
  --rule-strong: var(--p-rule-2);
  --accent: var(--p-ox-6);
  --accent-pressed: var(--p-ox-7);
  --on-accent: #fff8f0;
  --accent-soft: var(--p-ox-2);
  --on-accent-soft: var(--p-ox-7);
  --chord: var(--p-ox-6);
  --section: var(--p-ox-6);
  --ok: var(--p-moss-6);
  --warn: var(--p-ochre-6);
  --danger: var(--p-ox-7);
  --focus: var(--p-ox-5);
  --scrim: rgba(42, 33, 25, 0.38);
  --chord-style: italic;
  --chord-weight: 600;
  --chord-scale: 0.95;
}

/* ---------- Evening: app-wide dark for night use (not the stage) ---------- */
[data-theme="evening"] {
  color-scheme: dark;
  --bg: var(--p-night-2);
  --surface: var(--p-night-3);
  --surface-sunken: #17120d;
  --surface-strong: var(--p-night-4);
  --page: #201912;
  --fg: #efe5d3;
  --fg-muted: #b3a184;
  --fg-faint: #8d7d64;
  --rule: #33291e;
  --rule-strong: #4a3c2c;
  --accent: var(--p-amber-6);
  --accent-pressed: #f0b394;
  --on-accent: #22120a;
  --accent-soft: rgba(227, 154, 122, 0.16);
  --on-accent-soft: #f1c3ab;
  --chord: #e8a27c;
  --section: #d39a7e;
  --ok: #8fbf6e;
  --warn: #e0a24a;
  --danger: #f08b7d;
  --focus: #f0b394;
  --scrim: rgba(0, 0, 0, 0.5);
  --e-sheet: 0 -12px 32px rgba(0, 0, 0, 0.5);
  --e-float: 0 6px 18px rgba(0, 0, 0, 0.5);
  --e-lift: 0 12px 28px rgba(0, 0, 0, 0.6);
}

/* ---------- Stage: Perform mode (always, unless Daylight is chosen) ---------- */
[data-theme="stage"] {
  color-scheme: dark;
  --bg: var(--p-night-1);
  --surface: var(--p-night-3);
  --surface-sunken: var(--p-night-0);
  --surface-strong: var(--p-night-4);
  --page: var(--p-night-1);
  --fg: var(--p-cream-1);
  --fg-muted: var(--p-cream-2);
  --fg-faint: #7d6d57;
  --rule: var(--p-night-5);
  --rule-strong: #54442f;
  --accent: var(--p-amber-5);
  --accent-pressed: #f3bb98;
  --on-accent: #2a150a;
  --accent-soft: rgba(234, 164, 122, 0.15);
  --on-accent-soft: #f5c9ad;
  --chord: var(--p-amber-5);
  --section: var(--p-cream-2);
  --ok: #8fbf6e;
  --warn: #e0a24a;
  --danger: #f08b7d;
  --focus: #f3bb98;
  --scrim: rgba(0, 0, 0, 0.55);
  --chord-style: normal;      /* upright for glanceability at 60–80 cm (decision D-06) */
  --chord-weight: 700;
  --chord-scale: 1.15;
  --e-sheet: 0 -12px 32px rgba(0, 0, 0, 0.6);
  --e-float: 0 6px 18px rgba(0, 0, 0, 0.6);
}

/* ---------- Daylight: Perform outdoors / bright rooms ---------- */
[data-theme="daylight"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: var(--p-paper-1);
  --surface-sunken: var(--p-paper-2);
  --surface-strong: var(--p-paper-3);
  --page: #ffffff;
  --fg: #120d08;
  --fg-muted: #4f4335;
  --fg-faint: #6f604b;
  --rule: var(--p-rule-1);
  --rule-strong: var(--p-rule-2);
  --accent: #7a1f1a;
  --accent-pressed: #5c1713;
  --on-accent: #fff;
  --accent-soft: var(--p-ox-2);
  --on-accent-soft: #5c1713;
  --chord: #7a1f1a;
  --section: #4f4335;
  --ok: #3a6427; --warn: #8a5009; --danger: #7a1f1a; --focus: #a8433b;
  --scrim: rgba(18, 13, 8, 0.4);
  --chord-style: normal;
  --chord-weight: 700;
  --chord-scale: 1.15;
}

/* ---------- 3. Component tokens ---------- */
:root {
  --chart-size: 18px;          /* lyric size in Read mode; user-scalable 14–28 */
  --chart-size-stage: 24px;    /* lyric size in Perform on phones (tablet 28px); user-scalable 18–44 */
  --chart-line: 1.25;          /* lyric line-height (chord row adds its own height) */
  --chart-section-gap: 0.9em;
  --hud-h: 44px;
  --tabbar-h: 56px;
  --songbar-h: 56px;
  --drule-h: 5px;            /* the hymnal double rule */
  --icon-m: 22px;
  --icon-s: 18px;
  --icon-xs: 14px;
  --icon-stroke: 1.6;
  --avatar: 32px;
  --seg-h: 32px;
  --seg-pad: 3px;
  --seg-gap: 2px;
  --chip-h: 30px;
  --badge: 36px;
  --row-min: 60px;
  --search-h: 40px;
  --control-h: 40px;
  --toast-h: 48px;
  --grab-w: 36px;
  --grab-h: 4px;
}

/* Reduced motion: every duration collapses to a short fade budget. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-quick: 0ms; --d-base: 100ms; --d-gentle: 120ms; --d-page: 120ms; --stagger: 0ms; }
}

@font-face{font-family:'Fraunces';font-weight:600;font-style:normal;font-display:swap;src:url(/site/fonts/fraunces-600.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-weight:600;font-style:italic;font-display:swap;src:url(/site/fonts/fraunces-600i.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:400;font-style:normal;font-display:swap;src:url(/site/fonts/serif-400.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:400;font-style:italic;font-display:swap;src:url(/site/fonts/serif-400i.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:600;font-style:normal;font-display:swap;src:url(/site/fonts/serif-600.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:400;font-style:normal;font-display:swap;src:url(/site/fonts/sans-400.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:600;font-style:normal;font-display:swap;src:url(/site/fonts/sans-600.woff2) format('woff2')}
@font-face{font-family:'Frank Ruhl Libre';font-weight:400;font-style:normal;font-display:swap;src:url(/site/fonts/frank-400.woff2) format('woff2')}
@font-face{font-family:'Frank Ruhl Libre';font-weight:600;font-style:normal;font-display:swap;src:url(/site/fonts/frank-600.woff2) format('woff2')}
@font-face{font-family:'Assistant';font-weight:400;font-style:normal;font-display:swap;src:url(/site/fonts/assistant-400.woff2) format('woff2')}
@font-face{font-family:'Assistant';font-weight:600;font-style:normal;font-display:swap;src:url(/site/fonts/assistant-600.woff2) format('woff2')}
/* Landing page and blog, in Hymnal Editorial. Values come from tokens.css (copied in at build time);
   only layout widths live here. Logical properties throughout, so Hebrew mirrors by itself. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: var(--t-prose); -webkit-font-smoothing: antialiased; }
main { flex: 1; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--s-16); }
h2 { font: var(--t-display-l); letter-spacing: var(--track-display); text-wrap: balance; }
h3 { font: var(--t-title); }
p { max-width: var(--measure); }
section p:not(.hint):not(.soon):not(.price):not(.what):not(.reassure):not(.eyebrow) { color: var(--fg-muted); }
section h2 + p { margin-block-start: var(--s-4); }

/* Top and bottom */
.nav { border-block-end: var(--hair) solid var(--rule); }
.nav-row, .foot-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--s-16); flex-wrap: wrap; }
.brand { font: var(--t-song-title); font-size: inherit; color: var(--fg); text-decoration: none; letter-spacing: var(--track-display); }
.nav .brand, .foot .brand { font: var(--t-display-m); font-style: italic; }
.nav-links { display: flex; align-items: center; gap: var(--s-5); font: var(--t-label); flex-wrap: wrap; }
.nav-links a { color: var(--fg-muted); text-decoration: none; min-height: var(--hit); display: inline-flex; align-items: center; }
.nav-links a:hover { color: var(--accent); }
.nav-links .nav-get { color: var(--accent); }
.theme-toggle { font: inherit; color: var(--fg-muted); background: none; border: var(--hair) solid var(--rule); border-radius: 999px; padding-inline: var(--s-4); min-height: var(--hit); cursor: pointer; }
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.foot { border-block-start: var(--hair) solid var(--rule); padding-block: var(--s-4); }

/* Buttons: the one accent, one action */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-block-start: var(--s-8); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hit-stage); padding-inline: var(--s-6); border-radius: var(--r-s); background: var(--accent); color: var(--on-accent); font: var(--t-body-l); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--d-quick) var(--ease-out), transform var(--d-quick) var(--ease-out); }
.btn:hover { background: var(--accent-pressed); }
.btn:active { transform: translateY(1px); }
.cta-web { font: var(--t-label); min-height: var(--hit); display: inline-flex; align-items: center; }
.soon { flex-basis: 100%; font: var(--t-hint); color: var(--fg-muted); }
/* What clicking costs (nothing), right under the button. */
.reassure { flex-basis: 100%; font: var(--t-label); color: var(--fg); }
.reassure + .soon { margin-block-start: calc(-1 * var(--s-2)); }
/* The quieter button partway down: outlined, so the page keeps one filled action per screen. */
.btn-quiet { background: none; color: var(--accent); border: var(--hair) solid var(--accent); min-height: var(--hit); }
.btn-quiet:hover { background: var(--accent-soft); }
.cta-mid { margin-block-start: var(--s-6); }
/* The phone's bottom bar before launch (render.mjs BAR_JS). */
.bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 10; padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--bg); border-block-start: var(--hair) solid var(--rule); box-shadow: var(--e-float); }
.bar[hidden] { display: none; }
.bar .btn { width: 100%; min-height: var(--hit); }
/* On a phone, its own store is the only button. */
[data-os="ios"] .store-android, [data-os="android"] .store-ios { display: none; }

/* Devices */
.phone { aspect-ratio: 9 / 20; background: var(--p-ink-1); padding: var(--s-1); border-radius: calc(var(--r-l) + var(--s-2)); box-shadow: var(--e-lift); }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-l) + var(--s-1)); }
.phone-side { aspect-ratio: 20 / 9; }
.browser { border: var(--hair) solid var(--rule-strong); border-radius: var(--r-m); overflow: hidden; background: var(--surface); box-shadow: var(--e-float); }
.browser-bar { display: flex; justify-content: center; padding-block: var(--s-2); background: var(--surface-sunken); border-block-end: var(--hair) solid var(--rule); }
.browser-bar span { font: var(--t-caption); color: var(--fg-muted); padding: 2px var(--s-8); background: var(--surface); border-radius: var(--r-xs); direction: ltr; }

/* Hero */
.eyebrow { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent); margin-block-end: var(--s-3); }
.hero { padding-block: var(--s-10) var(--s-12); overflow: clip; }
.hero-grid { display: grid; gap: var(--s-10); }
h1 { font: var(--t-display-xl); letter-spacing: var(--track-display); text-wrap: balance; }
.lead { margin-block-start: var(--s-5); color: var(--fg-muted); text-wrap: pretty; }
.hero-art { position: relative; padding-block-end: var(--s-10); padding-inline-end: var(--s-16); }
.hero-art .phone { position: absolute; inset-block-end: 0; inset-inline-end: 0; width: 30%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .hero-art { animation: settle var(--d-page) var(--ease-out) both; }
  .hero-art { animation-delay: var(--d-quick); }
}
@keyframes settle { from { opacity: 0; transform: translateY(8px); } }

/* Stage: the one reversed section. The same page, in ink for a dark room. */
.stage { background: var(--bg); color: var(--fg); }
.stage-grid { display: grid; gap: var(--s-8); margin-block-start: var(--s-8); }
.points li { padding-block: var(--s-5); border-block-start: var(--hair) solid var(--rule); }
.points h3 { color: var(--fg); }
.points p { margin-block-start: var(--s-2); font: var(--t-body-l); }
.stage-check { display: grid; grid-template-columns: minmax(0, 150px) 1fr; gap: var(--s-5); align-items: center; }
.stage-check figcaption { font: var(--t-hint); color: var(--fg-muted); }
.stage { border-block: var(--hair) solid var(--rule); }

/* Song stays safe */
.split-grid { display: grid; gap: var(--s-10); align-items: center; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--s-5); max-width: 520px; margin-inline: auto; width: 100%; }
.pair .phone:last-child { margin-block-start: var(--s-10); }

/* Bring your songs */
.bring { background: var(--surface); border-block: var(--hair) solid var(--rule); }
.bring-list { margin-block-start: var(--s-6); }
.bring-list li { font: var(--t-display-m); padding-block: var(--s-3); border-block-end: var(--hair) solid var(--rule); display: flex; align-items: center; gap: var(--s-4); }
/* The Add sheet's icon box (A4), beside each way in. */
.bring-list .ic { flex: none; box-sizing: content-box; width: var(--icon-m); height: var(--icon-m); padding: calc((var(--search-h) - var(--icon-m)) / 2); stroke-width: var(--icon-stroke); color: var(--accent); border: var(--hair) solid var(--rule-strong); border-radius: var(--r-s); }
.bring .hint { margin-block-start: var(--s-5); font: var(--t-hint); color: var(--fg-muted); }

/* The set, on two screens */
.wide-art { position: relative; margin-block-start: var(--s-8); padding-inline-end: var(--s-12); padding-block-end: var(--s-8); }
.wide-art .browser img { aspect-ratio: 2000 / 1130; object-fit: cover; object-position: top; }
.wide-art .phone { position: absolute; inset-block-end: 0; inset-inline-end: 0; width: 24%; }

/* Every screen */
.screens { padding-block-start: 0; }
.screens-grid { display: grid; gap: var(--s-10); align-items: center; }
.screens-art { max-width: 280px; margin-inline: auto; width: 100%; }

/* Band and ownership */
.two { border-block-start: var(--hair) solid var(--rule); }
.two-grid { display: grid; gap: var(--s-10); }

/* Pricing: rows, not cards */
.pricing .hint { margin-block-start: var(--s-3); font: var(--t-hint); color: var(--fg-muted); }
.plans { margin-block-start: var(--s-6); }
.plans li { display: grid; gap: var(--s-1); padding-block: var(--s-5); border-block-start: var(--hair) solid var(--rule); }
.plans h3 { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-muted); }
.price { font: var(--t-body); color: var(--fg-muted); }
.price b { font: var(--t-numeral); color: var(--accent); }
.what { font: var(--t-body-l); color: var(--fg); }

/* Questions before trying */
.faq { border-block-start: var(--hair) solid var(--rule); }
.faq-list { margin-block-start: var(--s-6); display: grid; gap: 0 var(--s-10); }
.faq-list li { padding-block: var(--s-5); border-block-start: var(--hair) solid var(--rule); }
.faq-list p { margin-block-start: var(--s-2); font: var(--t-body-l); }

/* Last call */
.final { text-align: center; background: var(--surface); border-block-start: var(--hair) solid var(--rule); }
.final h2 { font: var(--t-display-xl); }
.final .cta { justify-content: center; }
.final .soon { text-align: center; max-width: none; }
.rule-double { height: 5px; border-block: var(--hair) solid var(--rule-strong); margin-block-start: var(--s-3); }
.final .rule-double, .empty .rule-double { width: 120px; margin-inline: auto; margin-block-start: var(--s-4); }

/* Blog */
.reading { padding-block: var(--s-8) 0; }
.page-title { font: var(--t-display-xl); }
.post-list li { border-block-end: var(--hair) solid var(--rule); }
.post-list a { display: block; padding-block: var(--s-5); text-decoration: none; color: inherit; }
.post-list a:hover h2 { color: var(--accent); }
.post-list h2 { font: var(--t-display-m); margin-block-start: var(--s-1); }
.post-list time, .meter { font: var(--t-caption); color: var(--fg-muted); }
.post-list p { margin-block-start: var(--s-2); font: var(--t-body-l); color: var(--fg-muted); }
.empty { text-align: center; padding-block: var(--s-16); }
.empty p { margin-inline: auto; color: var(--fg-muted); }
.empty-line { font: var(--t-empty); color: var(--fg) !important; }
.empty .rule-double + p { margin-block-start: var(--s-4); }
.empty .cta { justify-content: center; }
.empty .soon { text-align: center; max-width: none; }
.post { max-width: calc(var(--measure) + 2 * var(--gutter)); padding-block-end: var(--s-12); }
.back { font: var(--t-label); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--hit); }
.post-title { font: var(--t-song-title); margin-block-start: var(--s-2); }
.meter { display: block; margin-block-start: var(--s-3); padding-block-end: var(--s-4); border-block-end: var(--hair) solid var(--rule); }
.prose { margin-block-start: var(--s-6); }
.prose > * + * { margin-block-start: var(--s-5); }
.prose h2 { font: var(--t-display-m); margin-block-start: var(--s-10); }
.prose h3 { margin-block-start: var(--s-8); }
.prose ul, .prose ol { padding-inline-start: var(--s-6); }
.prose ul { list-style: disc; }
.prose li + li { margin-block-start: var(--s-2); }
.prose img { border-radius: var(--r-m); }
.prose blockquote { margin-inline: 0; padding-inline-start: var(--s-5); border-inline-start: 2px solid var(--accent); font-style: italic; color: var(--fg-muted); }
.prose code { font-family: var(--font-mono); font-size: 0.85em; background: var(--surface-sunken); padding: 1px var(--s-1); border-radius: var(--r-xs); }

/* Legal pages (LAUNCH_TODO #8): the blog's reading column, plus a contents box and tables. */
.foot-legal { display: flex; flex-wrap: wrap; column-gap: var(--s-5); font: var(--t-caption); }
.foot-legal a { color: var(--fg-muted); text-decoration: none; min-height: var(--hit); display: inline-flex; align-items: center; }
.foot-legal a:hover { color: var(--accent); }
/* Israeli Consumer Protection Law s.14I: a prominent, dedicated cancellation link on the site. */
.foot-legal .foot-cancel { color: var(--accent); font-weight: 600; }
.legal-intro { margin-block-start: var(--s-4); color: var(--fg-muted); }
.toc { max-width: var(--measure); margin-block-start: var(--s-6); padding: var(--s-4) var(--s-5); background: var(--surface); border: var(--hair) solid var(--rule); border-radius: var(--r-m); }
.toc-title { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-muted); }
.toc ol { margin: var(--s-2) 0 0; padding-inline-start: var(--s-5); font: var(--t-body-l); }
.toc li + li { margin-block-start: var(--s-1); }
.toc li { padding-block: 2px; }
.toc a { text-decoration: none; }
.legal .prose { overflow-wrap: anywhere; }
.legal .prose h2 { scroll-margin-block-start: var(--s-6); }
/* The short version at the top of each document. */
.legal .prose > blockquote:first-child { font-style: normal; color: var(--fg); background: var(--surface); padding: var(--s-4) var(--s-5); border-radius: var(--r-s); }
.legal .prose > blockquote:first-child > * + * { margin-block-start: var(--s-3); }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font: var(--t-body); max-width: 100%; }
.prose th, .prose td { text-align: start; vertical-align: top; padding: var(--s-2) var(--s-3); border-block-end: var(--hair) solid var(--rule); min-width: 8rem; }
.prose th { font-weight: 600; color: var(--fg); border-block-end-color: var(--rule-strong); }
/* On a phone, each table row becomes a card: the first cell leads, the others carry their column's name. */
@media (max-width: 719px) {
  .legal .prose table, .legal .prose tbody, .legal .prose tr, .legal .prose td { display: block; }
  .legal .prose table { overflow: visible; }
  .legal .prose thead { display: none; }
  .legal .prose tr { padding-block: var(--s-3); border-block-end: var(--hair) solid var(--rule); }
  .legal .prose td { border: 0; padding: var(--s-1) 0; min-width: 0; }
  .legal .prose td:first-child { font-weight: 600; color: var(--fg); }
  .legal .prose td:not(:first-child)::before { content: attr(data-label); display: block; font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-muted); margin-block-end: 2px; }
}

@media (min-width: 720px) {
  .wrap { padding-inline: var(--gutter-tablet); }
  .bar { display: none; }
  .faq-list { grid-template-columns: 1fr 1fr; }
  .plans li { grid-template-columns: 120px 220px 1fr; align-items: baseline; gap: var(--s-6); }
  .two-grid { grid-template-columns: 1fr 1fr; gap: var(--s-16); }
  .stage-check { grid-template-columns: 180px 1fr; }
  .points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}

@media (min-width: 1000px) {
  section { padding-block: calc(var(--s-16) + var(--s-8)); }
  .hero { padding-block: var(--s-12) var(--s-16); }
  h1 { font: var(--t-display-hero); letter-spacing: var(--track-display); }
  h2 { font: var(--t-display-xl); }
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--s-12); }
  .stage-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-rows: auto 1fr; align-items: start; gap: var(--s-6) var(--s-12); margin-block-start: var(--s-10); }
  .stage-check { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 1fr; gap: var(--s-4); }
  .points { grid-column: 1; }
  .split-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-16); }
  .screens-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-16); }
  .screens-art { order: -1; }
  .pair .phone:last-child { margin-block-start: var(--s-16); }
  .post-title { font: var(--t-display-xl); font-style: italic; }
  .toc ol { columns: 2; column-gap: var(--s-10); }
  .toc li { break-inside: avoid; }
}

/* Hebrew has no italic face: show it upright instead of a slanted fake (CRO review, 6 Nov). */
html:lang(he) { font-synthesis: weight; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}