/* ==========================================================================
   Modueh — marketing site, English and Yiddish from one stylesheet.
   Brand: brown #6f4b22 (logo), cream #fdf7ec and yellow #fbcf2d (tri-fold).
   Geist for English; Heebo for the Yiddish page. Logical properties so the
   Yiddish page mirrors on its own.

   One centered spine: every section opens with dots > heading > lead,
   centered and capped at 680px, and its content sits below on the same
   axis. Spacing, radii and type sizes come from one scale each.
   ========================================================================== */

:root {
  --cream: #fdf7ec;
  --cream-2: #f5ecd9;
  --cream-3: #efe3ca;
  --white: #fffdf8;
  --brown: #6f4b22;
  --brown-2: #5a3b18;
  --ink: #2a1c0c;
  --ink-2: #4b3619;
  --muted: #8a7052;
  --gold: #fbcf2d;
  --gold-2: #e9bb17;
  --line: rgba(111, 75, 34, 0.14);
  --line-2: rgba(111, 75, 34, 0.32);
  --shadow: 0 24px 64px rgba(63, 42, 17, 0.14), 0 2px 6px rgba(63, 42, 17, 0.06);
  --shadow-sm: 0 12px 32px rgba(63, 42, 17, 0.10), 0 1px 3px rgba(63, 42, 17, 0.06);

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-he: "Heebo", "Geist", system-ui, sans-serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --t: 0.7s var(--ease);
  --spring: cubic-bezier(0.22, 1.25, 0.36, 1);   /* a little overshoot */

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px; --s-11: 96px;
  --sec: 64px;         /* section padding */
  --para: 20px;        /* air between paragraphs */
  --r: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;
  --top-h: 64px;
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }
@media (min-width: 900px) { :root { --sec: 96px; --para: 24px; } }
html[lang="yi"] { --font: "Heebo", "Geist", system-ui, sans-serif; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--top-h); -webkit-text-size-adjust: 100%; }
html.lerp { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.6;
  color: var(--ink-2); background: var(--cream);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (min-width: 900px) { body { font-size: 1.125rem; line-height: 1.6; } }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--gold); color: var(--ink); }

h1, h2, h3 { color: var(--ink); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
html[lang="yi"] :is(h1, h2, h3) { font-weight: 700; letter-spacing: 0; }
p { text-wrap: pretty; }
h2 { font-size: 2.25rem; line-height: 1.1; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; }
.lead { font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); max-width: 36rem; }
@media (min-width: 900px) { h2 { font-size: 3rem; line-height: 1.05; } h3 { font-size: 1.5rem; } .lead { font-size: 1.25rem; } }

.container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--s-5); }
@media (min-width: 900px) { .container { padding-inline: var(--s-7); } }

.icon { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
html[dir="rtl"] .icon-arrow { transform: scaleX(-1); }

/* The three-dot mark from the wordmark, used as a small ornament */
.dots { display: inline-flex; gap: 6px; line-height: 0; }
.dots b { width: 7px; height: 7px; border-radius: 50%; background: var(--brown); opacity: 0.85; }
.dots-gold b { background: var(--gold); opacity: 1; }

/* Lead block: dots, heading, lead, centered on the page's spine */
.lead-block { display: grid; gap: var(--s-5); justify-items: center; text-align: center; max-width: 680px; margin-inline: auto; }
.lead-block > h2 { max-width: 20ch; }
.lead-block > .lead { max-width: 34rem; }

.skip {
  position: absolute; inset-inline-start: var(--s-4); top: var(--s-4); z-index: 100;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-full);
  background: var(--brown); color: var(--cream); font-weight: 600;
  transform: translateY(-200%); transition: transform var(--t);
}
.skip:focus { transform: none; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-full);
  font-size: 1rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
  transition: transform var(--t), background-color var(--t), box-shadow var(--t);
}
.btn .icon { transition: transform var(--t); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .icon-arrow { transform: translateX(3px); }
html[dir="rtl"] .btn:hover .icon-arrow { transform: scaleX(-1) translateX(3px); }
.btn:active { transform: scale(0.98); transition-duration: 0.2s; }
.btn-sm { padding: var(--s-2) var(--s-4); font-size: 0.875rem; }
.btn-lg { padding: var(--s-4) var(--s-6); font-size: 1rem; }
.btn-primary { background: var(--brown); color: var(--cream); }
.btn-primary:hover { background: var(--brown-2); box-shadow: 0 12px 32px rgba(111, 75, 34, 0.24); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-2); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); }

.link-quiet {
  display: inline-flex; align-items: center; gap: var(--s-2); position: relative;
  padding: var(--s-3) 0; font-weight: 500; color: var(--brown);
}
.link-quiet::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 6px; height: 1.5px; background: currentColor;
  transform: scaleX(0.35); transform-origin: left; opacity: 0.5;
  transition: transform var(--t), opacity var(--t);
}
html[dir="rtl"] .link-quiet::after { transform-origin: right; }
.link-quiet:hover::after { transform: scaleX(1); opacity: 1; }
.link-cream { color: var(--cream); }

/* ---------- Header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: rgba(253, 247, 236, 0);
  transition: background-color var(--t), box-shadow var(--t);
}
.top.is-scrolled { background: rgba(253, 247, 236, 0.9); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.top-inner {
  height: var(--top-h); max-width: 1280px; margin-inline: auto; padding-inline: var(--s-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
@media (min-width: 900px) { .top-inner { padding-inline: var(--s-7); } }
.top-logo img { width: 84px; height: auto; }
.top-nav { display: none; gap: var(--s-6); font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }
.top-nav a { position: relative; padding-block: var(--s-2); transition: color var(--t); }
.top-nav a:hover, .top-nav a.is-current { color: var(--ink); }
.top-nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
html[dir="rtl"] .top-nav a::after { transform-origin: right; }
.top-nav a:hover::after, .top-nav a.is-current::after { transform: scaleX(1); }
@media (min-width: 900px) { .top-nav { display: flex; } }
.top-actions { display: flex; align-items: center; gap: var(--s-5); }
.top-signin { font-size: 0.875rem; font-weight: 500; color: var(--ink-2); padding-block: var(--s-2); border-bottom: 2px solid transparent; transition: border-color var(--t), color var(--t); }
.top-signin:hover { color: var(--ink); border-color: var(--gold); }
@media (max-width: 480px) { .top-actions { gap: var(--s-3); } .top-logo img { width: 72px; } }
.top-lang {
  font-size: 0.875rem; font-weight: 500; color: var(--ink-2); padding-block: var(--s-2);
  border-bottom: 2px solid transparent; transition: border-color var(--t), color var(--t);
}
.top-lang:hover { color: var(--ink); border-color: var(--gold); }
html[lang="en"] .top-lang { font-family: var(--font-he); }
html[lang="yi"] .top-lang { font-family: "Geist", system-ui, sans-serif; }
.top-progress {
  position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--brown); transform: scaleX(var(--sp, 0)); transform-origin: left;
  opacity: 0; transition: opacity var(--t);
}
html[dir="rtl"] .top-progress { transform-origin: right; }
.top.is-scrolled .top-progress { opacity: 1; }

/* ---------- Reveal on enter: heavy, with a little blur ---------- */
[data-reveal] { opacity: 0; transform: translateY(40px); filter: blur(6px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }
[data-stagger] > * { opacity: 0; transform: translateY(32px); filter: blur(6px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
[data-stagger].in > * { opacity: 1; transform: none; filter: none; }
[data-stagger].in > :nth-child(2) { transition-delay: 90ms; }
[data-stagger].in > :nth-child(3) { transition-delay: 180ms; }
[data-stagger].in > :nth-child(4) { transition-delay: 270ms; }
[data-stagger].in > :nth-child(5) { transition-delay: 360ms; }
[data-stagger].in > :nth-child(6) { transition-delay: 450ms; }

/* ---------- Pinned sections ---------- */
[data-pin] { position: relative; }
.hero-stage, .paid-stage { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
.paid-stage { display: grid; align-content: center; justify-items: center; padding-inline: var(--s-5); }

/* ---------- Hero: the film, scrubbed by scroll ----------
   The film is the whole screen, with a soft blur so it reads as depth of
   field rather than resolution. The copy sits centered over it on a light
   cream wash; at the end of the pin the film settles into a rounded panel. */
.hero { --pin: 3.4; height: calc(var(--vh) * var(--pin)); background: var(--cream); }
.hero-stage { display: block; padding: 0; }
.scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; background: #e9e2d6; filter: blur(5px) contrast(1.06); transform: scale(1.02); transform-origin: center; will-change: transform; }
/* a soft cream glow behind the words, thinning toward the edges so the room stays visible */
.hero-veil { position: absolute; inset: 0; pointer-events: none; opacity: 1; transition: opacity 0.7s var(--ease);
  background: radial-gradient(ellipse 62% 56% at 50% 47%, rgba(253, 247, 236, 0.88) 0%, rgba(253, 247, 236, 0.58) 42%, rgba(253, 247, 236, 0.16) 100%); }
.hero-copy { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(var(--top-h) + var(--s-6)) var(--s-5) var(--s-8); pointer-events: none; }
.beat {
  grid-area: 1 / 1; display: grid; gap: var(--s-6); justify-items: center; text-align: center; max-width: 880px;
  opacity: 0; transform: translateY(24px); filter: blur(6px); pointer-events: none;
  transition: opacity 0.8s var(--ease), transform 0.9s var(--spring), filter 0.8s var(--ease);
}
.beat.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.beat.is-past { transform: translateY(-24px); }
.hero-h, .beat-line { font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; color: var(--ink); text-wrap: balance; }
.beat-line { text-shadow: 0 2px 28px rgba(253, 247, 236, 0.9), 0 0 64px rgba(253, 247, 236, 0.7); }
html[lang="yi"] :is(.hero-h, .beat-line) { font-weight: 700; letter-spacing: 0; }
.hero-h { max-width: 22ch; }
.beat-line { max-width: 16ch; }
.hero-h .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero-h .line > span { display: block; transform: translateY(110%); animation: rise 1s var(--ease) forwards; }
.hero-h .line:nth-child(2) > span { animation-delay: 90ms; }
.hero-h .line:nth-child(3) > span { animation-delay: 180ms; }
.hero-cta { display: flex; align-items: center; justify-content: center; gap: var(--s-6); flex-wrap: wrap; opacity: 0; animation: fade 1s var(--ease) 450ms forwards; }
@keyframes rise { to { transform: none; } }
@keyframes fade { to { opacity: 1; } }
@media (max-width: 899px) { .hero { --pin: 3; } .hero-copy { padding: calc(var(--top-h) + var(--s-5)) var(--s-5) var(--s-6); } .beat { gap: var(--s-5); } }

/* ---------- What a board is ---------- */
.what { padding: var(--sec) 0; background: var(--cream); }
.facts { margin-top: var(--s-10); display: grid; gap: var(--s-7); }
.fact { padding-top: var(--s-5); border-top: 2px solid var(--brown); display: grid; gap: var(--s-3); }
.fact dt { display: grid; gap: var(--s-1); }
.fact-n { font-size: 2.25rem; line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--brown); font-variant-numeric: tabular-nums; }
html[lang="yi"] .fact-n { letter-spacing: 0; font-weight: 700; }
.fact-k { font-weight: 600; color: var(--ink); font-size: 1rem; }
.fact dd { color: var(--ink-2); max-width: 30ch; font-size: 1rem; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(3, 1fr); gap: var(--s-8); } .fact-n { font-size: 3rem; } }

/* ---------- How it works ---------- */
.how { padding: var(--sec) 0; background: var(--cream-2); }
.how-grid { margin-top: var(--s-10); display: grid; gap: var(--s-9); }
.how-side { display: grid; align-content: start; }
.how-vis { position: relative; aspect-ratio: 4 / 3; background: var(--cream); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.how-vis svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(0.96); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.how-vis svg.is-on { opacity: 1; transform: none; }
.steps { position: relative; display: grid; gap: var(--s-9); padding-inline-start: 4.75rem; }
.steps-line { position: absolute; inset-inline-start: 1.375rem; top: 1.5rem; bottom: 1.5rem; width: 2px; background: var(--line); border-radius: 2px; }
.steps-line b { position: absolute; inset: 0; background: var(--brown); transform: scaleY(var(--lp, 0)); transform-origin: top; border-radius: 2px; }
.step { position: relative; display: grid; max-width: 34rem; transition: opacity 0.8s var(--ease); }
.step-body { display: grid; gap: var(--s-3); }
.step-n {
  position: absolute; inset-inline-start: -4.75rem; top: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--cream); border: 2px solid var(--line-2);
  font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.step.is-on .step-n { background: var(--brown); border-color: var(--brown); color: var(--cream); transform: scale(1.06); }
.step h3 { padding-top: 0.45rem; }
.step p { color: var(--ink-2); }
.step:not(.is-on) { opacity: 0.5; }
@media (min-width: 900px) {
  .how-grid { grid-template-columns: 5fr 6fr; gap: var(--s-11); align-items: start; }
  .how-side { position: sticky; top: calc(var(--top-h) + var(--s-8)); }
  .steps { gap: var(--s-10); padding-top: var(--s-4); }
}

/* ---------- Your rules ---------- */
.rules { padding: var(--sec) 0; background: var(--cream); }
.tally { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-2); color: var(--ink-2); font-size: 1rem; }
.tally b { color: var(--brown); font-variant-numeric: tabular-nums; }
.rules-card { margin: var(--s-10) auto 0; max-width: 760px; background: var(--white); border-radius: var(--r-xl); padding: var(--s-3) var(--s-6); box-shadow: var(--shadow); }
.rule { display: grid; gap: var(--s-3); padding-block: var(--s-5); border-top: 1px solid var(--line); }
.rule:first-child { border-top: 0; }
.rule-name { font-weight: 600; color: var(--ink); }
.rule-note { grid-column: 1 / -1; color: var(--muted); font-size: 0.875rem; margin-top: calc(-1 * var(--s-1)); }
.seg { display: flex; padding: 3px; border-radius: var(--r-full); background: var(--cream-2); }
.seg button {
  flex: 1; padding: var(--s-2) var(--s-3); border-radius: var(--r-full); font-size: 0.875rem; font-weight: 500; color: var(--muted);
  transition: background var(--t), color var(--t), transform 0.3s var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button:active { transform: scale(0.97); }
.rule[data-value="auto"] [data-set="auto"] { background: var(--brown); color: var(--cream); }
.rule[data-value="ask"] [data-set="ask"] { background: var(--gold); color: var(--ink); }
.rule[data-value="no"] [data-set="no"] { background: var(--ink); color: var(--cream); }
@media (min-width: 720px) {
  .rules-card { padding-inline: var(--s-7); }
  .rule { grid-template-columns: minmax(10rem, 1fr) auto; align-items: center; }
  .seg button { flex: none; padding-inline: var(--s-4); }
}
@media (max-width: 600px) {
  .rules-card { padding: var(--s-2) var(--s-4); border-radius: var(--r-lg); }
  .rule { gap: var(--s-3); padding-block: var(--s-4); }
  .rule-name { font-size: 1rem; }
  .seg { width: 100%; }
  .seg button { flex: 1; padding: var(--s-2) var(--s-1); font-size: 0.8125rem; white-space: nowrap; text-align: center; }
  .rule-note { font-size: 0.8125rem; margin-top: calc(-1 * var(--s-2)); }
}

/* ---------- Your portal ---------- */
.portal { padding: var(--sec) 0; background: var(--cream); }
.portal-grid { margin-top: var(--s-10); display: grid; gap: var(--s-4) var(--s-9); }
.portal-item { position: relative; display: grid; gap: var(--s-2); padding-block: var(--s-5) var(--s-6); padding-inline-start: 3.25rem; border-top: 1px solid var(--line-2); }
.portal-n { position: absolute; inset-inline-start: 0; top: calc(var(--s-5) + 2px); width: 2rem; height: 2rem; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; font-weight: 600; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.portal-item h3 { font-size: 1.25rem; }
.portal-item p { color: var(--ink-2); max-width: 32ch; font-size: 1rem; }
@media (min-width: 720px) { .portal-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .portal-grid { gap: var(--s-4) var(--s-11); } }

/* ---------- Payment ---------- */
.paid { --pin: 2.6; height: calc(var(--vh) * var(--pin)); background: var(--cream-2); }
.paid-stage { text-align: center; gap: var(--s-7); }
.paid-words { max-width: 18ch; font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.5rem); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
html[lang="yi"] .paid-words { font-weight: 700; letter-spacing: 0; }
.mw { display: block; opacity: 0.14; transition: opacity 0.8s var(--ease), color 0.8s var(--ease); }
.mw.on { opacity: 1; }
.mw:last-child.on { color: var(--brown); }
.paid-p { max-width: 36rem; font-size: 1.125rem; color: var(--ink-2); opacity: 0; transform: translateY(16px); filter: blur(4px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
.paid.is-done .paid-p { opacity: 1; transform: none; filter: none; }

/* ---------- Who does what: the brochure's two panels ---------- */
.handles { padding: var(--sec) 0; background: var(--cream); }
.handles-grid { display: grid; gap: var(--s-6); }
.panel { border-radius: var(--r-xl); padding: var(--s-8) var(--s-6); display: grid; gap: var(--s-5); align-content: start; }
.panel h3 { font-size: 1.5rem; }
.panel li { display: grid; gap: var(--s-1); padding-block: var(--s-5); border-top: 1px solid var(--line-2); }
.panel li b { color: var(--ink); font-size: 1.125rem; }
.panel li span { font-size: 1rem; }
.panel-brown li b { color: var(--cream); }
.panel li:last-child { border-bottom: 1px solid var(--line-2); }
.panel-cream { background: var(--cream-2); }
.panel-brown { background: var(--brown); color: rgba(253, 247, 236, 0.88); }
.panel-brown h3 { color: var(--cream); }
.panel-brown li { border-color: rgba(253, 247, 236, 0.22); }
@media (min-width: 760px) { .handles-grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); } .panel { padding: var(--s-9) var(--s-8); } }

/* ---------- The one condition ---------- */
.cond { padding: var(--sec) 0; background: var(--cream-2); }
.cond-grid { display: grid; gap: var(--s-9); align-items: center; }
.cond-photo { max-width: 22rem; }
.cond-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow); }
.cond-copy { display: grid; gap: var(--s-5); justify-items: start; }
.cond-copy h2 { max-width: 18ch; margin-top: calc(var(--s-1) * -1); }
.cond-copy h3 { margin-top: var(--s-6); max-width: 22ch; }
.cond-copy p { max-width: 36rem; }
@media (min-width: 900px) { .cond-grid { grid-template-columns: 4fr 7fr; gap: var(--s-11); } .cond-photo { max-width: none; } }

/* ---------- For advertisers ---------- */
.adv { padding: var(--sec) 0; background: var(--cream); }
.adv-grid { margin-top: var(--s-10); display: grid; gap: var(--s-7); }
.adv-item { padding-top: var(--s-5); border-top: 2px solid var(--brown); display: grid; gap: var(--s-3); }
.adv-item dt { font-weight: 600; color: var(--ink); font-size: 1.25rem; }
.adv-item dd { color: var(--ink-2); max-width: 30ch; font-size: 1rem; }
.adv-cta { margin-top: var(--s-9); text-align: center; }
@media (min-width: 720px) { .adv-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-8); } }

/* ---------- Questions ---------- */
.faq { padding: var(--sec) 0; background: var(--cream-2); }
.faq-more a { color: var(--brown); font-weight: 500; }
.faq-list { margin: var(--s-10) auto 0; max-width: 760px; }
.faq-item { border-top: 1px solid var(--line-2); }
.faq-item:last-child { border-bottom: 1px solid var(--line-2); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-5) 0; text-align: start; font-size: 1.125rem; font-weight: 600; color: var(--ink); transition: color var(--t); }
.faq-q:hover { color: var(--brown); }
.faq-q .icon { color: var(--brown); transition: transform var(--t); }
.faq-item.is-open .faq-q .icon { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t); }
.faq-a > p { overflow: hidden; color: var(--ink-2); max-width: 40rem; opacity: 0; transition: opacity 0.5s var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a > p { opacity: 1; padding-bottom: var(--s-5); }

/* ---------- Schedule a call ---------- */
.call { padding: var(--sec) 0; background: var(--cream); }
.call-form { position: relative; margin: var(--s-10) auto 0; max-width: 720px; background: var(--white); border-radius: var(--r-xl); padding: var(--s-6); box-shadow: var(--shadow); }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.f-grid { display: grid; gap: var(--s-5); }
.f { display: grid; gap: var(--s-2); }
.f > span { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.f input, .f select, .f textarea {
  width: 100%; margin: 0; padding: var(--s-3) var(--s-4); font: inherit; font-size: 1rem; line-height: 1.5; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--line-2); border-radius: var(--r); outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color var(--t), box-shadow var(--t), background-color var(--t);
}
.f select { padding-inline-end: var(--s-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236f4b22'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-3) center; background-size: 20px; }
html[dir="rtl"] .f select { background-position: left var(--s-3) center; }
.f textarea { resize: vertical; min-height: 6rem; }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--brown); box-shadow: 0 0 0 4px rgba(251, 207, 45, 0.35); background: var(--white); }
.f-err { display: none; font-size: 0.875rem; color: var(--brown); font-weight: 500; }
.f.is-bad input, .f.is-bad select, .f.is-bad textarea { border-color: var(--brown); }
.f.is-bad .f-err { display: block; }
.f-actions { margin-top: var(--s-6); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); flex-wrap: wrap; }
.f-alt { color: var(--ink-2); font-size: 1rem; }
.f-alt a { color: var(--brown); font-weight: 600; }
.f-done, .f-failed { display: none; margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r); background: var(--cream-2); color: var(--ink); font-weight: 500; }
.f-failed a { color: var(--brown); font-weight: 600; }
.call-form.is-sending .btn { opacity: 0.6; pointer-events: none; }
.call-form.is-done .f-grid, .call-form.is-done .f-actions { display: none; }
.call-form.is-done .f-done { display: block; margin-top: 0; }
.call-form.is-failed .f-failed { display: block; }
@media (min-width: 720px) { .call-form { padding: var(--s-8); } .f-grid { grid-template-columns: 1fr 1fr; } .f-wide { grid-column: 1 / -1; } }

/* ---------- The ask: brown, with the brochure's yellow frame ---------- */
.end { padding: var(--sec) 0; background: var(--cream); }
.end-panel {
  position: relative; background: var(--brown); border-radius: var(--r-xl); padding: var(--s-11) var(--s-6);
  display: grid; gap: var(--s-5); justify-items: center; text-align: center; color: rgba(253, 247, 236, 0.86);
}
.end-panel::after { content: ""; position: absolute; inset: 12px; border: 2px solid var(--gold); border-radius: var(--r); pointer-events: none; }
.end-panel h2 { color: var(--cream); max-width: 16ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); }
.end-panel .lead { color: rgba(253, 247, 236, 0.86); text-align: center; }
.end-panel .btn { margin-top: var(--s-4); }
@media (min-width: 900px) { .end-panel { padding: var(--s-11) var(--s-8); } }

/* ---------- Footer: the whole story again, at the bottom ---------- */
.foot { background: var(--cream-2); border-top: 1px solid var(--line); padding: var(--sec) 0 var(--s-8); color: var(--ink-2); }
.foot-top { display: grid; gap: var(--s-5); justify-items: start; padding-bottom: var(--s-10); border-bottom: 1px solid var(--line-2); }
.foot-mark { width: clamp(9rem, 18vw, 14rem); height: auto; }
.foot-big { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); max-width: 22ch; text-wrap: balance; }
html[lang="yi"] .foot-big { font-weight: 700; letter-spacing: 0; }
.foot-tag { font-weight: 600; color: var(--brown); font-size: 1.25rem; }
.foot-cols { display: grid; gap: var(--s-8) var(--s-6); padding-block: var(--s-10); }
.foot-col { display: grid; gap: var(--s-3); align-content: start; justify-items: start; }
.foot-col h3 { font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); }
html[lang="yi"] .foot-col h3 { letter-spacing: 0; text-transform: none; font-size: 1rem; }
.foot-col a { font-weight: 500; color: var(--ink); position: relative; transition: color var(--t); }
.foot-col a:hover { color: var(--brown); }
.foot-col p { color: var(--ink-2); max-width: 22ch; font-size: 0.875rem; margin-top: var(--s-2); }
.foot-small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line-2); color: var(--muted); font-size: 0.875rem; }
@media (min-width: 720px) { .foot-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .foot-cols { grid-template-columns: repeat(4, 1fr); gap: var(--s-8); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero-stage { position: static; height: auto; min-height: var(--vh); }
  .hero-h .line > span, .hero-cta { animation: none; transform: none; opacity: 1; }
  .beat, [data-reveal], [data-stagger] > * { transition: none; }
  [data-reveal], [data-stagger] > * { opacity: 1; transform: none; filter: none; }
  .mw, .paid-p, .step, .how-vis svg { transition: none; }
}