/* ==========================================================================
   MuFeed — marketing site stylesheet
   --------------------------------------------------------------------------
   Every colour, radius, spacing and shadow value here is copied from the app's
   token modules so the site and the app are visually identical:

     ../mu-feed/constants/colors.ts     → --c-* custom properties
     ../mu-feed/constants/typography.ts → Rubik 400/700, --fs-* sizes
     ../mu-feed/constants/spacing.ts    → --s-* scale
     ../mu-feed/constants/radii.ts      → --r-* radii
     ../mu-feed/constants/shadows.ts    → --shadow-card / --shadow-card-gold

   The app is LIGHT-ONLY (app.config.js sets userInterfaceStyle: 'light' and
   there is no useColorScheme / Appearance code anywhere in it). There is
   deliberately NO dark mode here either — a prefers-color-scheme block would
   invent an identity the product does not have.
   ========================================================================== */

/* ── Rubik, self-hosted ────────────────────────────────────────────────────
   NEVER load Rubik from the Google Fonts CDN: that build ships no Arabic
   subset, so Arabic runs silently fall back to a system font and the shadda
   (U+0651) lands in the wrong place. The app hit exactly this bug in its
   lesson-presenter tool. These TTFs are the same files the app bundles, copied
   from node_modules/@expo-google-fonts/rubik/.
   Only 400 and 700 are shipped — the two weights the app actually loads. */
@font-face {
  font-family: 'Rubik';
  src: url('assets/fonts/Rubik_400Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('assets/fonts/Rubik_700Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  /* Surface — colors.ts */
  --c-bg:            #f4f1ea;  /* backgroundPrimary — the dominant surface */
  --c-card:          #ffffff;  /* backgroundCard */
  --c-cream:         #FCF5E3;  /* cream — second tone, header band */
  --c-sheet-cream:   #faf6ec;  /* sheetCream — slightly lighter than bg */

  /* Text */
  --c-text:          #1a1a1a;  /* textPrimary */
  --c-text-2:        #6b7280;  /* textSecondary */
  --c-hint:          #9ca3af;  /* textHint */

  /* Structure */
  --c-border:        #e5e7eb;  /* border */

  /* Brand accent — gold is an ACCENT, never a large surface */
  --c-gold:          #a67c34;  /* goldDark — every filled button */
  --c-gold-2:        #8a6228;  /* goldLight (in fact darker; hover state) */
  --c-gold-tint:     rgba(201, 161, 74, 0.15); /* goldTint */
  --c-gold-line:     rgba(193, 149, 66, 0.2);  /* goldLine — dividers */

  /* Warm heading brown — paragraphTitleSection */
  --c-brown:         #5a3e1a;
  --c-brown-deep:    #5a3e1b;  /* homeButtonColors.feedLabel */

  /* Semantic */
  --c-danger:        #dc2626;
  --c-success:       #16a34a;

  /* Shadows — shadows.ts. The brand shadow colour is the warm #281A08,
     NOT neutral black. shadows.card uses #000 at 0.05; the gold/lesson
     variants use #281A08. Warm is the brand-correct choice for cards on
     cream, so the card shadow here is built from #281A08. */
  --shadow-card:
    0 1px 2px rgba(40, 26, 8, 0.06),
    0 3px 3px rgba(40, 26, 8, 0.10);           /* ≈ shadows.lessonCard, softened */
  --shadow-card-gold:
    0 5px 12px rgba(40, 26, 8, 0.22);          /* shadows.cardGold, lightened
                                                  for a light bg — 0.40 was
                                                  tuned for dark video */
  --shadow-float:
    0 4px 8px rgba(40, 26, 8, 0.16);           /* ≈ shadows.floating */

  /* Radii — radii.ts */
  --r-8:   8px;
  --r-12:  12px;
  --r-16:  16px;
  --r-20:  20px;
  --r-24:  24px;
  --r-pill: 999px;                             /* radius999 */

  /* Spacing — spacing.ts */
  --s-4:  4px;   --s-6:  6px;   --s-8:  8px;   --s-10: 10px;
  --s-12: 12px;  --s-16: 16px;  --s-20: 20px;  --s-24: 24px;
  --s-28: 28px;  --s-32: 32px;  --s-40: 40px;  --s-48: 48px;
  --s-60: 60px;  --s-80: 80px;  --s-96: 96px;

  /* Type scale — typography.ts fontSize */
  --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px;
  --fs-17: 17px; --fs-18: 18px; --fs-20: 20px; --fs-22: 22px;
  --fs-24: 24px; --fs-26: 26px; --fs-28: 28px; --fs-32: 32px;
  --fs-36: 36px; --fs-38: 38px;

  /* Layout */
  --wrap:      1120px;
  --wrap-text: 720px;   /* legal pages' centred column */
  --gutter:    var(--s-16);
}

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

html {
  /* Never allow sideways scroll at any width.
     `clip`, NOT `hidden`: overflow-x:hidden forces the computed overflow-y to
     `auto`, which turns <html> into a scroll container. A position:sticky
     element then pins against THAT box instead of the viewport, so the feed
     section's phone silently stopped sticking. `clip` suppresses the same
     horizontal overflow without creating a scroll container, so sticky keeps
     working. Do not change this back to `hidden`. */
  overflow-x: clip;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.6;
  /* `clip` for the same reason as on <html> above — `hidden` here would also
     make <body> a scroll container and break position:sticky inside it. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--c-gold-2); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Visible keyboard focus everywhere — accessibility baseline. */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: var(--r-8);
}

/* Skip link for keyboard/screen-reader users. */
.skip {
  position: absolute;
  inset-inline-start: var(--s-16);
  top: -100px;
  z-index: 100;
  padding: var(--s-10) var(--s-16);
  background: var(--c-gold);
  color: #fff;
  border-radius: var(--r-8);
  transition: top .15s ease;
}
.skip:focus { top: var(--s-12); text-decoration: none; }

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

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-gold-line);
  position: relative;
  z-index: 20;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  min-height: 64px;
  padding-block: var(--s-10);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
  color: var(--c-text);
  font-weight: 700;
  font-size: var(--fs-18);
}
.brand:hover { text-decoration: none; }
.brand__logo {
  width: 36px;
  height: 36px;
  border-radius: var(--r-8);   /* icon.png is RGB-on-cream, so round it here */
  box-shadow: var(--shadow-card);
}
/* The Latin brand mark set beside the Hebrew one: same font, lighter weight and
   colour so the Hebrew stays primary. Its own lang/dir in the markup keeps bidi
   from reordering it against the surrounding RTL text. */
.brand__latin {
  color: var(--c-text-2);
  font-weight: 400;
  font-size: var(--fs-15);
  letter-spacing: 0.01em;
  /* An inline-block with its own margin: a plain margin on an inline LTR run
     inside RTL text collapses visually against the Hebrew, so the two brand
     marks ran together. This guarantees the gap on both sides. */
  display: inline-block;
  margin-inline-start: var(--s-8);
}
.site-footer__brand .brand__latin {
  font-size: var(--fs-14);
  margin-inline-end: var(--s-4);
}

/* Header nav — hidden on mobile behind a toggle. */
.nav { display: flex; align-items: center; gap: var(--s-20); }
.nav a {
  color: var(--c-text-2);
  font-size: var(--fs-15);
}
.nav a:hover { color: var(--c-brown); text-decoration: none; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--c-gold-line);
  border-radius: var(--r-8);
  padding: var(--s-6) var(--s-10);
  cursor: pointer;
  color: var(--c-brown);
  font-family: inherit;
  font-size: var(--fs-15);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  min-height: 48px;                     /* spacing.space48 — app's button height */
  padding: var(--s-12) var(--s-32);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-gold);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-17);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-card-gold);
  transition: background .15s ease, transform .15s ease;
}
.btn:hover {
  background: var(--c-gold-2);
  text-decoration: none;
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;                     /* clip the ornaments */
  background: var(--c-bg);
  padding-block: var(--s-80) var(--s-60);
  text-align: center;
}

/* Corner ornaments — copied from the app's ScreenCornerOrnaments.tsx:
   120×120, opacity 0.25, anchored to the top corners, the LEFT one mirrored
   with scaleX(-1). Purely decorative, so aria-hidden in the markup. */
.hero__ornament {
  position: absolute;
  top: 0;
  width: 120px;
  height: 120px;
  opacity: 0.25;
  pointer-events: none;
  user-select: none;
}
.hero__ornament--right { right: 0; }
.hero__ornament--left  { left: 0; transform: scaleX(-1); }

.hero__inner { position: relative; z-index: 1; }

.hero__logo {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--s-24);
  border-radius: var(--r-20);
  box-shadow: var(--shadow-card-gold);
}

.hero h1 {
  font-size: clamp(28px, 6vw, var(--fs-38));
  margin-bottom: var(--s-16);
  color: var(--c-text);
}
.hero__sub {
  font-size: clamp(var(--fs-17), 2.4vw, var(--fs-22));
  color: var(--c-text-2);
  max-width: 34ch;
  margin: 0 auto var(--s-32);
}

/* ── Generic section rhythm ─────────────────────────────────────────────── */
.section { padding-block: var(--s-60); }
.section--tint { background: var(--c-sheet-cream); }

.section__head { max-width: 60ch; margin-bottom: var(--s-40); }
.section h2 {
  font-size: clamp(var(--fs-24), 4vw, var(--fs-32));
  color: var(--c-brown);
  margin-bottom: var(--s-16);
}
.section__lede {
  font-size: var(--fs-17);
  color: var(--c-text-2);
}

/* Small gold rule under a heading — mirrors the app's goldLine divider. */
.rule {
  width: 56px;
  height: 3px;
  background: var(--c-gold);
  border-radius: var(--r-pill);
  margin-bottom: var(--s-20);
}

/* ── Two-column: phone beside text ──────────────────────────────────────
   In RTL the first grid child sits on the RIGHT. The brief asks for the
   screenshot on the LEFT, so the text column is declared FIRST in the source
   (landing right, the natural start of an RTL line) and the phone second
   (landing left). Source order therefore also reads correctly when the grid
   collapses to one column on mobile: heading, then image. */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-48);
  align-items: center;
}
.split__text { min-width: 0; }

/* Phone frame — real handset aspect ratio 9:19.5, as specified. */
.phone {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  aspect-ratio: 9 / 19.5;
  background: var(--c-cream);
  border: 10px solid #2a2117;           /* warm near-black bezel */
  border-radius: 38px;
  box-shadow: var(--shadow-card-gold);
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
}
.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Explicit width/height on the <img> gives the browser the intrinsic ratio
     (720×1558) so nothing shifts while the screenshot loads; object-fit then
     crops it into the 9:19.5 frame. */
}
.phone__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 20px;
  background: #2a2117;
  border-radius: var(--r-pill);
  z-index: 2;
}

/* ── Feature rows (section 2) ───────────────────────────────────────────── */
.features { margin-top: var(--s-28); display: grid; gap: var(--s-20); }
.feature {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--s-12);
  align-items: start;
}
.feature__mark {
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--c-gold-tint);
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.feature__mark svg { width: 15px; height: 15px; stroke: var(--c-gold-2); }
.feature p { font-size: var(--fs-16); color: var(--c-text-2); }
.feature b { color: var(--c-text); font-weight: 700; }

/* ── Cards (section 3) ──────────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-20);
}
.card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-16);
  padding: var(--s-24);
  box-shadow: var(--shadow-card);
}
.card h3 {
  font-size: var(--fs-18);
  margin-bottom: var(--s-8);
  color: var(--c-text);
}
.card p { color: var(--c-text-2); font-size: var(--fs-15); }

/* Icon circles — the app's iconCircleColors pattern: a saturated line icon on
   a translucent circle of the SAME hue at ~0.16 alpha. Values lifted from
   colors.ts iconCircleColors. */
.icon-circle {
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  margin-bottom: var(--s-16);
}
.icon-circle svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-circle--pink  { background: rgba(212, 83, 126, 0.16); }
.icon-circle--pink  svg { stroke: #C13A63; }
.icon-circle--amber { background: rgba(186, 117, 23, 0.16); }
.icon-circle--amber svg { stroke: #B5650F; }
.icon-circle--blue  { background: rgba(55, 138, 221, 0.16); }
.icon-circle--blue  svg { stroke: #2E7AC9; }
.icon-circle--teal  { background: rgba(29, 158, 117, 0.16); }
.icon-circle--teal  svg { stroke: #159E6D; }

/* ── Section 3: the three-phone fan ─────────────────────────────────────────
   Desktop: a centred row; the middle phone sits higher and the outer two tilt
   outward once JS adds .is-in (see 3c). Mobile: the track becomes a horizontal
   scroll-snap strip. The strip scrolls WITHIN ITSELF — the page never scrolls
   sideways, which is why .shots carries the overflow, not the page. */
.shots {
  margin: var(--s-40) 0 var(--s-48);
}
.shots__track {
  display: flex;
  gap: var(--s-24);
  justify-content: center;
  align-items: flex-start;
}
.shots .phone {
  max-width: 230px;
  flex: 0 0 auto;
}

/* Resting state of the fan. JS adds .is-in on the container to animate to it;
   without JS these transforms are simply the permanent look — the phones are
   fully visible either way. */
.phone--fan {
  transition:
    transform 700ms cubic-bezier(.22, .61, .36, 1),
    opacity 600ms ease-out;
}
.shots.is-in .phone--fan[data-fan='start'] { transform: rotate(3deg)  translateY(10px); }
.shots.is-in .phone--fan[data-fan='mid']   { transform: translateY(-18px); }
.shots.is-in .phone--fan[data-fan='end']   { transform: rotate(-3deg) translateY(10px); }

/* Pre-animation state — applied ONLY when JS has marked the document, so a JS
   failure or a no-JS browser never leaves the phones invisible. */
.js .shots:not(.is-in) .phone--fan {
  opacity: 0;
  transform: translateY(36px);
}
/* Stagger: right-hand phone first in RTL reading order. */
.js .shots.is-in .phone--fan[data-fan='start'] { transition-delay: 0ms; }
.js .shots.is-in .phone--fan[data-fan='mid']   { transition-delay: 110ms; }
.js .shots.is-in .phone--fan[data-fan='end']   { transition-delay: 220ms; }

/* ══ Scroll story: the feed section (3b) ═══════════════════════════════════
   Desktop ≥860px only. The phone stage is sticky and holds its place while the
   three feature rows scroll past; the active row lights up and the phone
   cross-fades. Everything here is opacity/transform only.
   The mobile fallback and the no-JS state are defined further down. */

.story__stage {
  position: relative;
  display: grid;                 /* both phones occupy the same cell */
  place-items: center;
  min-width: 0;
}
.phone--stage {
  max-width: 290px;
}
/* Stacking into one cell is ONLY correct when JS can cross-fade between them.
   Without `.js` the two phones must not overlap, so the stack is scoped. */
.js .phone--stage { grid-area: 1 / 1; }

/* No-JS / reduced-motion desktop: show both phones side by side instead of
   stacked, so neither is hidden behind the other. */
@media (min-width: 861px) {
  html:not(.js) .story__stage {
    display: flex;
    gap: var(--s-16);
    justify-content: center;
    align-items: flex-start;
  }
  html:not(.js) .phone--stage { max-width: 47%; }
}

@media (min-width: 861px) {
  .split--story { align-items: start; }

  /* The pin is scoped to `.js` alongside the tall row spacing it depends on.
     With JS off the spacing rules below never apply, so a sticky phone would
     pin against a short text column and just sit there — pinning and spacing
     must appear and disappear together. */
  .js .split--story .story__stage {
    position: sticky;
    /* align-self on the STICKY ELEMENT itself (not the column): a grid item
       defaults to stretching to its row's height, and an element stretched to
       the full track has no slack to travel within — it would move with the
       page even with a valid sticky ancestor. `start` keeps it its own height
       so the track above and below it is the distance it sticks for. */
    align-self: start;
    /* Vertically centred while pinned: the offset is half the leftover viewport
       height, so the phone sits in the middle rather than against the top edge.
       The height is clamped so the phone is never taller than a short window. */
    height: min(74vh, 620px);
    top: max(var(--s-40), calc((100vh - min(74vh, 620px)) / 2));
    align-content: center;
  }
  .js .split--story .phone--stage { max-height: 100%; }

  /* Each row gets roughly half a viewport of scroll: long enough to read it and
     watch the phone swap, short enough that the page never feels empty.
     The gap — not a tall per-row min-height — provides that distance.
     The BOTTOM padding is what keeps the phone pinned through the last row: the
     sticky element releases when its containing block's bottom edge reaches it,
     so the column must extend past row 3 by about the phone's own height.
     Without it the phone drifts upward during the final row. */
  .js .split--story .features {
    margin-top: var(--s-32);
    display: grid;
    gap: 50vh;
    padding-block: 10vh 46vh;
  }
  .js .split--story .feature {
    align-content: center;
    padding-inline-start: var(--s-20);
    /* The accent bar is drawn as a pseudo-element rather than a border so it
       spans only the row's own text block. A border-inline-start on a grid item
       that is stretched by `gap` would read as one continuous line down the
       whole column — which is exactly what it looked like before. */
    position: relative;
    transition: opacity 420ms ease;
  }
  .js .split--story .feature::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    /* Inset from the text block's own edges rather than a percentage of the
       row, so the bar is always a short accent beside the copy — never a rule
       running the height of the column. */
    top: 2px;
    bottom: 2px;
    width: 2px;
    background: var(--c-gold);
    border-radius: var(--r-pill);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 420ms ease, opacity 420ms ease;
    opacity: 0;
  }
  /* Inactive rows dim; the active one is full strength and grows a short gold
     accent bar at its START edge — the RIGHT edge in RTL, via the logical
     inset-inline-start property. */
  .js .split--story .feature { opacity: 0.4; }
  .js .split--story .feature.is-active { opacity: 1; }
  .js .split--story .feature.is-active::before {
    transform: scaleY(1);
    opacity: 1;
  }

  /* Cross-fade between the two screenshots. */
  .js .phone--stage {
    transition: opacity 520ms ease, transform 520ms ease;
  }
  .js .phone--stage:not(.is-shown) {
    opacity: 0;
    transform: scale(.985);
    pointer-events: none;
  }
  .js .phone--stage.is-shown { opacity: 1; transform: none; }
}

/* Mobile (<861px): no pinning. Two phones side by side, overlapped and
   offset vertically, as specified. */
@media (max-width: 860px) {
  .story__stage {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: var(--s-8);
  }
  .phone--stage { max-width: 46%; }
  .phone--stage[data-shot='2'] {
    /* Negative inline margin pulls the second phone under the first; in RTL
       `margin-inline-start` is the right edge, so it tucks behind correctly. */
    margin-inline-start: -14%;
    margin-top: var(--s-28);
    z-index: -1;
  }
}

/* ══ Reveal on scroll (3a) ═════════════════════════════════════════════════
   CRITICAL: the hidden state is scoped to `.js`, which script.js puts on
   <html>. With JS disabled, or if script.js fails to parse, none of these
   rules apply and every element renders normally — the page is never blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 600ms ease-out,
    transform 600ms cubic-bezier(.22, .61, .36, 1);
}
/* Cards stagger within their grid; the delay is set inline by JS via a custom
   property so the markup stays free of per-element magic numbers. */
.js .reveal.is-in { transition-delay: var(--reveal-delay, 0ms); }

/* ══ Hero entrance (3d) ════════════════════════════════════════════════════
   Runs on load rather than on scroll — the hero is above the fold. Nothing here
   delays reading: the text is painted immediately and only animates in. */
.js .hero__fade {
  opacity: 0;
  transform: translateY(14px);
}
.js .hero__fade.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms ease-out,
    transform 620ms cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Ornament parallax: JS writes --parallax (a small px value) on each ornament.
   The left one must keep its mirroring, so its transform composes scaleX(-1)
   with the translate rather than replacing it. */
.hero__ornament--right { transform: translateY(var(--parallax, 0px)); }
.hero__ornament--left  { transform: scaleX(-1) translateY(var(--parallax, 0px)); }

/* ── Section 4 — prose ──────────────────────────────────────────────────── */

/* Three-script heading: מופיד · MuFeed · مُفِيد
   The Latin run is lighter so the Hebrew reads as primary; the Arabic keeps the
   heading colour. Separators are their own spans so they cannot be swept into
   either directional run. */
.brand-trio__latin {
  color: var(--c-text-2);
  font-weight: 400;
}
.brand-trio__sep { color: var(--c-gold); font-weight: 400; }

.prose { max-width: 62ch; }
.prose--spaced { margin-top: var(--s-16); }
.prose p + p { margin-top: var(--s-20); }
.prose p { font-size: var(--fs-17); color: var(--c-text-2); }
/* The lead line carries the niqqud-bearing מוּפִיד — give it room to breathe
   so the vowel points are not cramped, and keep it in Rubik (the only font
   here that places niqqud and shadda correctly). */
.prose__lead {
  font-size: clamp(var(--fs-18), 2.6vw, var(--fs-22)) !important;
  color: var(--c-text) !important;
  line-height: 1.75;
}

/* ── Section 5 — waitlist ───────────────────────────────────────────────── */
.signup { text-align: center; }
.signup .section__head { margin-inline: auto; }
/* The Tally form is embedded with transparentBackground=1 so it sits directly
   on the section's cream — hence NO card background or border here, which would
   reintroduce exactly the white box that parameter removes. The wrapper only
   constrains width and centres the form. */
.signup__form {
  max-width: 640px;
  margin: var(--s-28) auto 0;
}
.signup__form iframe {
  width: 100%;
  border: 0;
  display: block;
  /* No min-height: Tally's dynamicHeight drives the height, and a floor would
     leave dead space under a short form. The iframe ships height="200" as the
     pre-resize starting value. */
}
.signup__fallback {
  margin-top: var(--s-16);
  font-size: var(--fs-14);
}
.signup__fallback a { color: var(--c-gold-2); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--c-cream);
  border-top: 1px solid var(--c-gold-line);
  padding-block: var(--s-40);
  margin-top: var(--s-60);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-20);
  align-items: center;
  justify-content: space-between;
}
.site-footer__brand { font-weight: 700; color: var(--c-brown); }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-20);
}
.site-footer__links a { color: var(--c-text-2); font-size: var(--fs-15); }
.site-footer__mail { color: var(--c-text-2); font-size: var(--fs-14); }

/* ── Legal pages ────────────────────────────────────────────────────────── */
.legal { padding-block: var(--s-48) var(--s-40); }
.legal__col { max-width: var(--wrap-text); margin-inline: auto; }
.legal h1 {
  font-size: clamp(var(--fs-24), 5vw, var(--fs-32));
  color: var(--c-text);
  margin-bottom: var(--s-8);
}
.legal__updated {
  color: var(--c-hint);
  font-size: var(--fs-14);
  margin-bottom: var(--s-32);
}
.legal__intro {
  font-size: var(--fs-16);
  color: var(--c-text-2);
  margin-bottom: var(--s-24);
}
/* Each block is one language. dir/lang are set per-block in the markup so a
   second English section can be appended below the Hebrew with no CSS change. */
.legal__block + .legal__block {
  margin-top: var(--s-32);
  border-top: 2px solid var(--c-border);
  padding-top: var(--s-32);
}
.legal__block h2 {
  font-size: var(--fs-24);
  color: var(--c-text);
  margin-bottom: var(--s-16);
}
.legal__section {
  margin-top: var(--s-28);
  border-top: 1px solid var(--c-border);
  padding-top: var(--s-20);
}
.legal__section h3 {
  font-size: var(--fs-16);
  color: var(--c-text);
  margin-bottom: var(--s-10);
}
.legal__section p {
  font-size: var(--fs-14);
  color: var(--c-text-2);
  line-height: 1.75;
}
.legal__mail {
  display: block;
  margin-top: var(--s-8);
  font-size: var(--fs-13);
  color: var(--c-text-2);
}
.legal__note {
  margin-top: var(--s-10);
  font-size: var(--fs-13);
  color: var(--c-text-2);
}
.legal .btn {
  margin-top: var(--s-14);
  min-height: 0;
  padding: var(--s-12) var(--s-20);
  font-size: var(--fs-15);
  font-weight: 600;
  border-radius: var(--r-8);
  box-shadow: none;
}
/* An LTR block inside the RTL page: flip alignment and button placement. */
[dir='ltr'] .legal__section p,
[dir='ltr'] .legal__section h3,
[dir='ltr'] h2,
[dir='ltr'] .legal__intro,
[dir='ltr'] .legal__mail,
[dir='ltr'] .legal__note { text-align: left; }

/* Pending-content notice on the not-yet-written legal pages. */
.pending {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-inline-start: 4px solid var(--c-gold);
  border-radius: var(--r-12);
  padding: var(--s-20) var(--s-24);
  box-shadow: var(--shadow-card);
}
.pending h2 {
  font-size: var(--fs-17);
  color: var(--c-brown);
  margin-bottom: var(--s-8);
}
.pending p { color: var(--c-text-2); font-size: var(--fs-15); }
.pending a { font-weight: 700; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Tablet and below */
@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--s-32);
  }
  /* Heading/text first, phone after — matches the source order. */
  .cards { grid-template-columns: 1fr; }

  /* The three-phone row becomes a horizontal scroll-snap strip. The overflow
     lives HERE, on the strip — the page itself still never scrolls sideways.
     Negative margins let it bleed to the screen edges while the padding keeps
     the first and last phone clear of them. */
  .shots {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .shots::-webkit-scrollbar { display: none; }
  .shots__track {
    justify-content: flex-start;
    gap: var(--s-16);
    width: max-content;
    padding-block: var(--s-8);
  }
  .shots .phone {
    max-width: 200px;
    scroll-snap-align: center;
  }
  /* No fan tilt on a scroll strip — it would fight the snap positions. */
  .shots.is-in .phone--fan[data-fan='start'],
  .shots.is-in .phone--fan[data-fan='mid'],
  .shots.is-in .phone--fan[data-fan='end'] { transform: none; }
}

/* Mobile */
@media (max-width: 680px) {
  :root { --gutter: var(--s-16); }   /* 16px minimum side gutter */

  .nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--c-cream);
    border-bottom: 1px solid var(--c-gold-line);
    box-shadow: var(--shadow-float);
    padding: var(--s-8) var(--gutter) var(--s-16);
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: var(--s-12) 0;
    border-bottom: 1px solid var(--c-gold-line);
    font-size: var(--fs-16);
  }
  .nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: inline-block; }
  .site-header__inner { position: relative; }

  .hero { padding-block: var(--s-48) var(--s-40); }
  .hero__logo { width: 72px; height: 72px; }
  /* Smaller ornaments so they never crowd the logo on a narrow screen. */
  .hero__ornament { width: 84px; height: 84px; }

  .section { padding-block: var(--s-48); }
  .section__head { margin-bottom: var(--s-28); }

  .btn { width: 100%; max-width: 320px; }

  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-16);
  }
}

/* ══ prefers-reduced-motion — the master kill switch ═══════════════════════
   Placed near the end so it wins on specificity ties. Every scroll effect is
   neutralised: elements sit in their final, fully visible state and nothing
   transitions, moves, fades or tilts. The page is complete and readable.
   script.js ALSO checks the same media query and skips its observers entirely,
   so this is belt-and-braces, not the only defence. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* Force every animated element to its resting, visible state. */
  .js .reveal,
  .js .reveal.is-in,
  .js .hero__fade,
  .js .hero__fade.is-in,
  .js .shots:not(.is-in) .phone--fan,
  .js .phone--stage,
  .js .phone--stage:not(.is-shown) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* No fan tilt, no parallax offset. */
  .shots.is-in .phone--fan[data-fan='start'],
  .shots.is-in .phone--fan[data-fan='mid'],
  .shots.is-in .phone--fan[data-fan='end'] { transform: none !important; }
  .hero__ornament--right { transform: none !important; }
  .hero__ornament--left  { transform: scaleX(-1) !important; }

  /* With the cross-fade disabled, BOTH stage phones would overlap in one grid
     cell. Un-stack them into a row so both stay readable. */
  @media (min-width: 861px) {
    .split--story .story__stage {
      position: static;
      height: auto;
      display: flex;
      gap: var(--s-16);
      justify-content: center;
    }
    .phone--stage { grid-area: auto; max-width: 47%; }
    .js .split--story .feature {
      min-height: 0;
      opacity: 1 !important;
      border-inline-start-color: var(--c-gold-line);
    }
  }
}

/* ── Print — legal pages get printed by reviewers ───────────────────────── */
@media print {
  .site-header, .site-footer, .skip, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
  .legal__col { max-width: none; }
}