/* ============================================================
   Love Over Voice — Pre-launch site
   Phase 2 design system tokens + Phase 3 page styles
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Light palette */
  --burgundy: #5A1024;
  --burgundy-deep: #6A142A;
  --gold: #CDA750;
  --almond: #F6EFE3;
  --taupe: #8B7261;
  --charcoal: #2B2B2B;
  /* Dark palette */
  --d-burgundy: #7A1C33;
  --d-burgundy-deep: #8B2540;
  --d-gold: #D8BA6C;
  --onyx: #151515;
  --cloud: #EDE6D9;

  /* Semantic */
  --ink: var(--charcoal);
  --ink-soft: #5d5148;
  --bg-warm: var(--almond);
  --cta-bg: var(--burgundy);
  --cta-bg-hover: var(--burgundy-deep);

  /* Type */
  --serif: "Playfair Display", "Didot", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", cursive;

  /* Scale */
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.2rem + 1.2vw, 2.1rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem);
  --step-4: clamp(2.3rem, 1.6rem + 3.6vw, 4.3rem);

  /* Space */
  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.75rem; --sp-4: 3rem;
  --sp-5: 5rem;  --sp-6: 7.5rem;

  /* Shape + motion */
  --radius: 10px;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 40px rgba(21, 21, 21, 0.18);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-dur: 0.9s;

  --maxw: 72rem;
  --maxw-text: 42rem;
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg-warm);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0 0 var(--sp-2); }
p { margin: 0 0 var(--sp-2); }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--onyx); color: var(--cloud);
  padding: 0.7rem 1.2rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Reveal motion ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.15s; }
.reveal[data-delay="2"] { transition-delay: 0.3s; }
.reveal[data-delay="3"] { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition-duration: 0.01ms !important; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--cta-bg);
  border: 1px solid rgba(205, 167, 80, 0.55);
  border-radius: var(--radius-pill);
  padding: 0.95rem 2.1rem;
  min-height: 48px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:hover { background: var(--cta-bg-hover); transform: translateY(-1px); box-shadow: 0 8px 26px rgba(90, 16, 36, 0.35); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

.btn--ghost {
  background: transparent;
  color: var(--cloud);
  border-color: rgba(237, 230, 217, 0.4);
}
.btn--ghost:hover { background: rgba(237, 230, 217, 0.08); box-shadow: none; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(21, 21, 21, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(216, 186, 108, 0.18);
}
.brand {
  display: flex; align-items: center; gap: 0.65rem;
  text-decoration: none; color: var(--cloud);
}
.brand img { width: 34px; height: auto; border-radius: 8px; }
.brand span {
  font-size: 0.78rem; letter-spacing: 0.32em; font-weight: 600;
}
.site-nav { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.6rem); order: 2; margin-left: auto; margin-right: 1rem; }
[dir="rtl"] .site-nav { margin-left: 1rem; margin-right: auto; }
.site-nav a {
  color: var(--cloud); text-decoration: none; font-size: 0.92rem;
  padding: 0.5rem 0.2rem; border-bottom: 1px solid transparent;
}
.site-nav a:not(.btn):hover { border-bottom-color: var(--d-gold); }
.site-nav .btn { padding: 0.6rem 1.4rem; min-height: 42px; font-size: 0.9rem; }

.nav-toggle {
  display: none;
  background: none; border: 1px solid rgba(237,230,217,0.4);
  border-radius: 8px; color: var(--cloud);
  width: 44px; height: 44px; cursor: pointer; font-size: 1.2rem;
}

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav {
    position: fixed; inset: 0; z-index: 49;
    display: none;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 1.6rem;
    background: rgba(21, 21, 21, 0.97);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { font-size: 1.25rem; }
}

/* ---------- Section shells ---------- */
.section { padding: var(--sp-6) clamp(1.2rem, 5vw, 3rem); }
.section__inner { max-width: var(--maxw); margin: 0 auto; }
.section__inner--narrow { max-width: var(--maxw-text); }
.eyebrow {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--taupe); margin: 0 0 var(--sp-3);
}
.dark .eyebrow { color: var(--d-gold); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex; align-items: center;
  color: var(--cloud);
  background: var(--onyx);
  isolation: isolate;
}
.hero__media, .hero__media picture, .hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 40%;
  z-index: -2;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(13, 5, 8, 0.86) 0%, rgba(13, 5, 8, 0.55) 42%, rgba(13, 5, 8, 0.08) 75%),
    linear-gradient(to top, rgba(13, 5, 8, 0.55) 0%, rgba(13, 5, 8, 0) 30%);
}
.hero__content {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: clamp(6rem, 14vh, 9rem) clamp(1.2rem, 5vw, 3rem) var(--sp-5);
}
.hero__text { max-width: 34rem; }
.hero h1 { font-size: var(--step-4); color: #fff; }
.hero h1 em { font-style: italic; color: var(--d-gold); }
.hero__response {
  font-family: var(--serif); font-size: var(--step-2);
  color: var(--d-gold); margin: 0 0 var(--sp-3);
}
.hero__support { font-size: var(--step-1); color: var(--cloud); max-width: 30rem; }
.hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.hero__status { font-size: 0.9rem; color: rgba(237, 230, 217, 0.75); margin: var(--sp-2) 0 0; }
.hero__status small { display: block; font-size: 0.82rem; color: rgba(237, 230, 217, 0.55); }

@media (max-width: 760px) {
  .hero { min-height: 88svh; align-items: flex-end; }
  .hero__media img { object-position: 60% 30%; }
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(13, 5, 8, 0.94) 12%, rgba(13, 5, 8, 0.62) 48%, rgba(13, 5, 8, 0.14) 78%);
  }
  .hero__content { padding-bottom: var(--sp-4); }
}

/* ---------- Realization (S2) ---------- */
.realization { background: var(--bg-warm); text-align: center; }
.realization p {
  font-family: var(--serif);
  font-size: var(--step-3);
  line-height: 1.25;
  margin: 0 auto clamp(3rem, 9vh, 5.5rem);
  max-width: 26ch;
}
.realization p:last-child { margin-bottom: 0; }
.realization .wrong { font-style: italic; color: var(--burgundy); }

/* ---------- Confession (S3) ---------- */
.confession { background: var(--onyx); color: var(--cloud); padding: 0; }
.confession__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 78vh; }
.confession__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-6) clamp(1.2rem, 5vw, 4rem);
}
.confession blockquote {
  margin: 0 0 var(--sp-2);
  font-family: var(--serif); font-style: italic;
  font-size: var(--step-3); line-height: 1.22; color: #fff;
}
.confession__after { font-family: var(--hand); font-size: 1.7rem; color: var(--d-gold); margin: 0 0 var(--sp-3); }
.confession__label { font-size: 0.82rem; color: rgba(237, 230, 217, 0.55); max-width: 26rem; }
.confession__media { position: relative; overflow: hidden; }
.confession__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
@media (max-width: 900px) {
  .confession__grid { grid-template-columns: 1fr; }
  .confession__media { min-height: 56vw; position: relative; }
  .confession__media img { position: absolute; }
}

/* ---------- Truths (S4) ---------- */
.truths { background: var(--cloud); }
.truths__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); margin-top: var(--sp-4); }
.truth h3 { font-size: var(--step-2); }
.truth p { color: var(--ink-soft); max-width: 30ch; }
.truth__icon { width: 44px; height: 44px; margin-bottom: var(--sp-2); color: var(--burgundy); }
.truth__icon svg { width: 100%; height: 100%; }
@media (max-width: 860px) {
  .truths__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .truth p { max-width: 40ch; }
}

/* ---------- Imagine (S5) ---------- */
.imagine {
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(122, 28, 51, 0.5) 0%, rgba(21, 21, 21, 0) 60%),
    linear-gradient(180deg, #151515 0%, #1d0e14 55%, #241019 100%);
  color: var(--cloud);
  text-align: center;
}
.imagine h2 { font-size: var(--step-3); color: var(--d-gold); font-style: italic; }
.imagine__lines { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.imagine__lines li {
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.3;
  margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
}
.imagine__lines li:last-child { color: #fff; }

/* ---------- Moment (S6) ---------- */
.moment { position: relative; color: #fff; padding: 0; isolation: isolate; }
.moment img.moment__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.moment__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(13, 5, 8, 0.88) 0%, rgba(13, 5, 8, 0.35) 55%, rgba(13, 5, 8, 0.15) 100%);
}
.moment__inner {
  max-width: var(--maxw); margin: 0 auto;
  min-height: 82vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-6) clamp(1.2rem, 5vw, 3rem) var(--sp-5);
}
.moment h2 { font-size: var(--step-3); max-width: 22ch; }
.moment p { max-width: 36rem; color: rgba(255, 255, 255, 0.88); }
.moment__small { font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); margin-top: var(--sp-1); }

/* ---------- Thoughts (S7) ---------- */
.thoughts { background: var(--bg-warm); }
.thoughts h2 { font-family: var(--hand); font-weight: 500; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); color: var(--burgundy); }
.thoughts__note { color: var(--taupe); font-size: 0.85rem; margin-top: var(--sp-3); }
.thoughts__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem); margin-top: var(--sp-4); }
.thought {
  background: #fffdf8;
  border: 1px solid rgba(139, 114, 97, 0.18);
  border-radius: var(--radius);
  padding: var(--sp-3);
  font-family: var(--serif); font-style: italic;
  font-size: var(--step-1); line-height: 1.4;
  color: var(--charcoal);
  box-shadow: 0 4px 18px rgba(43, 43, 43, 0.05);
}
@media (max-width: 720px) { .thoughts__grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { background: var(--cloud); }
.faq h2 { font-size: var(--step-3); }
.faq details {
  border-bottom: 1px solid rgba(139, 114, 97, 0.25);
  padding: var(--sp-2) 0;
}
.faq summary {
  cursor: pointer;
  font-family: var(--serif); font-size: var(--step-1); font-weight: 600;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--burgundy); flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--ink-soft); max-width: 60ch; margin-top: var(--sp-1); }

/* ---------- Final invitation (S8) ---------- */
.final { position: relative; color: #fff; padding: 0; isolation: isolate; }
.final img.final__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; z-index: -2; }
.final__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(13, 5, 8, 0.92) 0%, rgba(13, 5, 8, 0.5) 45%, rgba(13, 5, 8, 0.2) 100%);
}
.final__inner {
  max-width: var(--maxw-text); margin: 0 auto;
  min-height: 90vh;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  text-align: center;
  padding: var(--sp-6) clamp(1.2rem, 5vw, 3rem) var(--sp-5);
}
.final h2 { font-size: var(--step-3); }
.final p { color: rgba(255, 255, 255, 0.88); max-width: 34rem; }

.invite-form { width: 100%; max-width: 30rem; margin-top: var(--sp-3); }
.invite-form__row { display: flex; gap: 0.6rem; }
.invite-form input[type="email"] {
  flex: 1;
  font: inherit;
  padding: 0.9rem 1.2rem;
  min-height: 48px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(237, 230, 217, 0.45);
  background: rgba(21, 21, 21, 0.55);
  color: #fff;
}
.invite-form input::placeholder { color: rgba(237, 230, 217, 0.6); }
.invite-form input:focus-visible { outline-color: var(--d-gold); }
.form-msg { margin-top: var(--sp-2); font-size: 0.95rem; min-height: 1.4em; }
.form-msg.is-error { color: #f0b9b9; }
.form-msg.is-success { font-family: var(--serif); font-size: 1.15rem; color: var(--d-gold); }
.invite-form__privacy { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); margin-top: var(--sp-2); }
.invite-form__privacy a { color: rgba(255, 255, 255, 0.8); }
.final__logo { width: 64px; margin: var(--sp-4) auto 0; opacity: 0.95; border-radius: 14px; }
.final__dev { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin-top: var(--sp-2); }

@media (max-width: 560px) {
  .invite-form__row { flex-direction: column; }
  .invite-form .btn { width: 100%; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--onyx); color: rgba(237, 230, 217, 0.75);
  padding: var(--sp-4) clamp(1.2rem, 5vw, 3rem);
  font-size: 0.85rem;
}
.site-footer__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.site-footer a { color: rgba(237, 230, 217, 0.75); text-decoration: none; padding: 0.4rem 0; }
.site-footer a:hover { color: var(--d-gold); }

/* ---------- Emotional interruption ---------- */
.interrupt {
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(122, 28, 51, 0.35) 0%, rgba(21, 21, 21, 0) 65%),
    var(--onyx);
  color: var(--cloud);
  text-align: center;
  padding-top: clamp(7rem, 22vh, 12rem);
  padding-bottom: clamp(7rem, 22vh, 12rem);
}
.interrupt__q {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--step-3);
  line-height: 1.28;
  max-width: 24ch;
  margin: 0 auto;
  color: #fff;
}

/* ---------- Imagine background ---------- */
.imagine { position: relative; isolation: isolate; }
.imagine img.imagine__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 60%; z-index: -2;
}
.imagine__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(21, 21, 21, 0.9) 0%, rgba(29, 14, 20, 0.82) 55%, rgba(36, 16, 25, 0.86) 100%);
}

/* ---------- Thoughts: open typographic flow ---------- */
.thoughts__flow { margin-top: var(--sp-4); }
.thoughts__flow .thought {
  background: none; border: 0; box-shadow: none; padding: 0;
  font-size: var(--step-2);
  max-width: 22ch;
  margin: 0 0 clamp(2.2rem, 6vh, 3.6rem);
  color: var(--charcoal);
}
.thoughts__flow .thought--right { margin-left: auto; text-align: right; color: var(--burgundy); }
[dir="rtl"] .thoughts__flow .thought--right { margin-left: 0; margin-right: auto; text-align: left; }

/* ---------- Language selector ---------- */
.header-right { display: flex; align-items: center; gap: 0.6rem; order: 3; }
.lang { position: relative; }
.lang__btn {
  background: rgba(21, 21, 21, 0.35);
  border: 1px solid rgba(237, 230, 217, 0.4);
  color: var(--cloud);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.9rem;
  min-height: 40px;
  font: inherit; font-size: 0.85rem;
  cursor: pointer;
}
.lang__btn:hover { border-color: var(--d-gold); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  list-style: none; margin: 0; padding: 0.4rem;
  background: rgba(21, 21, 21, 0.97);
  border: 1px solid rgba(216, 186, 108, 0.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  max-height: 60vh; overflow-y: auto;
  min-width: 13rem;
  z-index: 70;
}
[dir="rtl"] .lang__menu { right: auto; left: 0; }
.lang__menu li { list-style: none; }
.lang__menu button {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; text-align: start;
  background: none; border: 0; color: var(--cloud);
  font: inherit; font-size: 0.9rem;
  padding: 0.55rem 0.8rem; border-radius: 6px;
  cursor: pointer; min-height: 40px;
}
.lang__menu button:hover, .lang__menu button:focus-visible { background: rgba(216, 186, 108, 0.15); }
.lang__menu button[aria-selected="true"] { color: var(--d-gold); }

/* ---------- Sticky signup bar ---------- */
.signup-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.7rem clamp(0.9rem, 3vw, 2rem);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(21, 21, 21, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(216, 186, 108, 0.3);
  color: var(--cloud);
  transform: translateY(110%);
  transition: transform 0.45s var(--ease);
}
.signup-bar.is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) { .signup-bar { transition: none; } }
.signup-bar__text { margin: 0; font-size: 0.9rem; flex: 1; min-width: 0; }
.signup-bar__cta { padding: 0.6rem 1.3rem; min-height: 44px; font-size: 0.88rem; white-space: nowrap; flex-shrink: 0; }
.signup-bar__close {
  background: none; border: 0; color: rgba(237, 230, 217, 0.7);
  font-size: 1rem; cursor: pointer;
  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.signup-bar__close:hover { color: #fff; }
@media (max-width: 480px) {
  .signup-bar__text { display: none; }
  .signup-bar__cta { flex: 1; text-align: center; }
}

/* ---------- Maintenance overlay ---------- */
.maintenance {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  background: var(--onyx); color: var(--cloud);
  font-family: var(--serif); font-size: var(--step-1);
  text-align: center; padding: var(--sp-3);
}

/* ---------- Platform availability (neutral pre-launch treatment) ----------
   LOV-owned generic device symbols. Never Apple/Google artwork. */
.platform { margin-top: clamp(1.25rem, 3vh, 2rem); text-align: center; }
.platform__eyebrow {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(237, 230, 217, 0.65);
  margin: 0 0 0.75rem;
}
.platform__row {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 0.9rem; flex-wrap: wrap;
}
.platform__item {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.95rem; color: var(--cloud);
}
.platform__item svg { width: 20px; height: 20px; flex-shrink: 0; color: rgba(237, 230, 217, 0.8); }
.platform__sep { color: var(--d-gold); opacity: 0.7; font-size: 0.8rem; }
.platform__support {
  font-size: 0.82rem; color: rgba(255, 255, 255, 0.6);
  margin: 0.9rem auto 0; max-width: 30rem;
}
/* Active store links (only ever rendered when a real listing exists) */
.platform__item a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; color: inherit; text-decoration: none;
}
.platform__item a:hover { color: var(--d-gold); }
.platform__badge { height: 40px; width: auto; display: block; }  /* Apple min 40px */
.hero__platform {
  font-size: 0.85rem; color: rgba(237, 230, 217, 0.7);
  margin: 0.6rem 0 0;
}
/* Light sections, if the component is ever placed on Almond/Cloud */
.section.truths .platform__item, .section.realization .platform__item { color: var(--charcoal); }
.section.truths .platform__item svg, .section.realization .platform__item svg { color: var(--burgundy); }
@media (max-width: 420px) {
  .platform__row { flex-direction: column; gap: 0.5rem; }
  .platform__sep { display: none; }
}

/* ---------- Per-language typography (transcreation standard: type adapts per script) ---------- */
:lang(zh-Hans) h1, :lang(zh-Hant) h1, :lang(ja) h1, :lang(ko) h1,
:lang(zh-Hans) .realization p, :lang(zh-Hant) .realization p, :lang(ja) .realization p, :lang(ko) .realization p,
:lang(zh-Hans) .interrupt__q, :lang(zh-Hant) .interrupt__q, :lang(ja) .interrupt__q, :lang(ko) .interrupt__q {
  line-height: 1.32;
  letter-spacing: 0.02em;
  font-style: normal; /* CJK italics render poorly */
}
:lang(th) h1, :lang(hi) h1, :lang(th) .realization p, :lang(hi) .realization p,
:lang(th) .interrupt__q, :lang(hi) .interrupt__q {
  line-height: 1.42;
}
/* Thai has no spaces between words: let the browser break on syllable
   boundaries instead of splitting words at the container edge. */
:lang(th) { line-break: loose; word-break: normal; overflow-wrap: normal; }
:lang(th) h1, :lang(th) h2, :lang(th) h3, :lang(th) p, :lang(th) li { hyphens: none; }
/* Scripts with no italic tradition: synthetic obliques look broken. */
:lang(th) .imagine h2, :lang(th) .interrupt__q, :lang(th) .confession blockquote, :lang(th) .thought,
:lang(hi) .imagine h2, :lang(hi) .interrupt__q, :lang(hi) .confession blockquote, :lang(hi) .thought,
:lang(ar) .imagine h2,
:lang(zh-Hans) .imagine h2, :lang(zh-Hant) .imagine h2, :lang(ja) .imagine h2, :lang(ko) .imagine h2 {
  font-style: normal;
}
:lang(ar) h1, :lang(ar) .realization p, :lang(ar) .interrupt__q {
  line-height: 1.45;
  font-style: normal; /* Arabic has no italic tradition */
}
:lang(ar) .confession blockquote, :lang(ar) .thought { font-style: normal; }

/* ---------- RTL ---------- */
[dir="rtl"] .hero__scrim {
  background:
    linear-gradient(-100deg, rgba(13, 5, 8, 0.86) 0%, rgba(13, 5, 8, 0.55) 42%, rgba(13, 5, 8, 0.08) 75%),
    linear-gradient(to top, rgba(13, 5, 8, 0.55) 0%, rgba(13, 5, 8, 0) 30%);
}
[dir="rtl"] .site-footer nav, [dir="rtl"] .site-nav { direction: rtl; }

/* ---------- Consent banner ---------- */
.consent {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 60;
  width: min(94vw, 34rem);
  background: rgba(21, 21, 21, 0.97);
  color: var(--cloud);
  border: 1px solid rgba(216, 186, 108, 0.35);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  box-shadow: var(--shadow-soft);
  font-size: 0.88rem;
}
.consent p { margin: 0 0 0.8rem; }
.consent__row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.consent .btn { padding: 0.55rem 1.2rem; min-height: 40px; font-size: 0.85rem; }
[hidden] { display: none !important; }

/* ---------- Signup confirmation (headline + body + closing line) ---------- */
.form-success__body {
  font-size: 0.95rem; color: rgba(255, 255, 255, 0.82);
  max-width: 28rem; margin: 0.6rem auto 0;
}
.form-success__close {
  font-family: var(--hand); font-size: 1.35rem; color: var(--d-gold);
  margin: 0.7rem auto 0;
}
:lang(ar) .form-success__close, :lang(th) .form-success__close,
:lang(hi) .form-success__close, :lang(ja) .form-success__close,
:lang(ko) .form-success__close, :lang(zh-Hans) .form-success__close,
:lang(zh-Hant) .form-success__close { font-family: var(--serif); font-style: normal; }

/* ---------- Signature philosophy statement ----------
   Inherits the ivory background, serif scale and .reveal system. The only
   deliberate deviation is vertical rhythm: markedly more room than its
   neighbours so the page asks you to pause. */
.manifesto {
  background: var(--bg-warm);
  text-align: center;
  padding-top: clamp(9rem, 26vh, 16rem);
  padding-bottom: clamp(9rem, 26vh, 16rem);
}
.manifesto__line {
  font-family: var(--serif);
  font-weight: 600;
  /* ~30% larger than the standard heading scale — this is a statement,
     not a heading — with slightly looser leading to match. */
  font-size: clamp(2.5rem, 1.8rem + 3.1vw, 4.15rem);
  line-height: 1.32;
  letter-spacing: 0.045em;
  /* Stored in sentence case for screen readers and SEO; displayed in caps. */
  text-transform: uppercase;
  color: var(--burgundy);
  max-width: 20ch;
  margin: 0 auto;
  text-wrap: balance;
}
/* Scripts without letter case: uppercase is a no-op, but tracking hurts them. */
:lang(ja) .manifesto__line, :lang(ko) .manifesto__line,
:lang(zh-Hans) .manifesto__line, :lang(zh-Hant) .manifesto__line,
:lang(th) .manifesto__line, :lang(hi) .manifesto__line,
:lang(ar) .manifesto__line {
  letter-spacing: normal;
  text-transform: none;
  max-width: 24ch;
}
@media (max-width: 600px) {
  .manifesto { padding-top: clamp(6rem, 18vh, 9rem); padding-bottom: clamp(6rem, 18vh, 9rem); }
  .manifesto__line { max-width: 16ch; letter-spacing: 0.03em; }
}

/* ---------- Language selector: availability states ---------- */
.lang__menu button { justify-content: space-between; }
.lang__name { flex: 1; text-align: start; }
.lang__note {
  font-size: 0.72rem; color: rgba(237, 230, 217, 0.5);
  margin-inline-start: 0.8rem; white-space: nowrap;
}
.lang__menu button.is-updating { cursor: not-allowed; opacity: 0.62; }
.lang__menu button.is-updating:hover { background: none; }
.lang__menu button[aria-selected="true"] .lang__name { color: var(--d-gold); }
.lang__btn { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  /* Bottom-sheet style on phones: comfortable targets, scrollable, safe areas. */
  .lang__menu {
    position: fixed; inset: auto 0 0 0; top: auto;
    max-height: 62svh; border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    min-width: 0;
  }
  .lang__menu button { min-height: 48px; font-size: 1rem; }
}

/* ============================================================
   v10 redesign — editorial layout per approved mockup
   ============================================================ */
.v10hero { position: relative; min-height: 92svh; display: flex; align-items: center; background: var(--onyx); color: var(--cloud); isolation: isolate; }
.v10hero__media, .v10hero__media picture, .v10hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 45%; z-index: -2; }
.v10hero__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(10,4,7,.94) 0%, rgba(10,4,7,.8) 44%, rgba(10,4,7,.34) 68%, rgba(10,4,7,.12) 100%); }
.v10hero__inner { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: clamp(7rem,15vh,10rem) clamp(1.2rem,5vw,3rem) var(--sp-5); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.v10hero__text { max-width: 36rem; }
.v10hero h1 { font-size: clamp(2.1rem,1.4rem + 2.9vw,3.55rem); line-height: 1.2; color: #fff; font-weight: 500; margin-bottom: var(--sp-3); }
.v10hero__rule { display: block; width: 54px; height: 1px; background: rgba(216,186,108,.75); margin: 0 0 var(--sp-3); }
.v10hero__sub { font-size: 1.02rem; color: rgba(237,230,217,.9); margin-bottom: var(--sp-3); }
.v10hero__cta { margin-bottom: var(--sp-2); }
.v10hero__aside { max-width: 12rem; font-size: .92rem; line-height: 1.55; color: rgba(237,230,217,.82); text-align: right; margin: clamp(4rem,12vh,8rem) 0 0; }
[dir="rtl"] .v10hero__aside { text-align: left; }
.audio-moment__btn { display: inline-flex; align-items: center; gap: .7rem; min-height: 48px; padding: .6rem 1.3rem;
  background: rgba(21,21,21,.55); border: 1px solid rgba(237,230,217,.34); border-radius: var(--radius-pill);
  color: var(--cloud); font: inherit; font-size: .92rem; cursor: pointer; }
.audio-moment__btn:hover { border-color: var(--d-gold); }
.audio-moment__icon { color: var(--d-gold); }
.audio-moment__time { color: rgba(237,230,217,.55); font-variant-numeric: tabular-nums; }
@media (max-width:860px) {
  /* The hero photograph is a landscape frame: the window bokeh ends around 21% of
     its width and her face starts around 46%. Any tall cover-crop therefore has to
     throw away either the café lights or her expression, and the brief requires
     both. So the mobile hero stacks instead of overlaying — square photograph on
     top, headline on onyx beneath, blended by a gradient. Nothing sits over her
     face and the crop is authored rather than derived. */
  .v10hero { display: block; min-height: 0; }
  .v10hero__media { position: relative; inset: auto; width: 100%; height: auto; z-index: 0; }
  .v10hero__media picture { position: static; display: block; }
  .v10hero__media img { position: static; width: 100%; height: auto; aspect-ratio: 1/1;
    object-fit: cover; object-position: 50% 42%; z-index: auto; }
  .v10hero__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34%;
    background: linear-gradient(to top, var(--onyx) 30%, rgba(21,21,21,0) 100%); pointer-events: none; }
  .v10hero__scrim { display: none; }
  .v10hero__inner { position: relative; z-index: 1; flex-direction: column; margin-top: -7%;
    padding: 0 clamp(1.2rem,5vw,3rem) var(--sp-4); }
}

.v10manifesto { background: var(--bg-warm); text-align: center; padding-block: clamp(4.5rem,11vh,7rem); }
.v10manifesto__row { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,4vw,3.5rem); }
.v10manifesto__row p { font-family: var(--serif); font-size: clamp(1.05rem,.9rem + .55vw,1.35rem); line-height: 1.45; color: var(--charcoal); margin: 0; }
.v10manifesto__rule { display: block; width: 46px; height: 1px; background: var(--taupe); opacity: .5; margin: clamp(2rem,5vh,3rem) auto; }
@media (max-width:760px) { .v10manifesto__row { grid-template-columns: 1fr; gap: var(--sp-3); } }

.v10panels { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding: 0 14px 14px; background: var(--bg-warm); }
.v10panel { position: relative; margin: 0; overflow: hidden; border-radius: 4px; }
.v10panel img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/5; }
.v10panel figcaption { position: absolute; inset: auto 0 0 0; padding: clamp(1.1rem,3vw,1.7rem); color: #fff;
  background: linear-gradient(to top, rgba(10,4,7,.9) 0%, rgba(10,4,7,.45) 55%, transparent 100%); }
.v10panel--low figcaption { inset: auto 0 0 0; }
.v10panel figcaption span { display: block; font-family: var(--serif); font-size: clamp(1.02rem,.9rem + .4vw,1.28rem); line-height: 1.34; }
.v10panel figcaption em { display: block; margin-top: .3rem; font-family: var(--serif); font-style: italic; color: var(--d-gold); font-size: clamp(.98rem,.9rem + .3vw,1.18rem); }
@media (max-width:900px) { .v10panels { grid-template-columns: 1fr; } }

.v10values { background: var(--almond); padding: clamp(2.6rem,7vh,4rem) clamp(1.2rem,5vw,3rem); border-top: 1px solid rgba(139,114,97,.16); }
.v10values__grid { list-style: none; margin: 0 auto; padding: 0; max-width: var(--maxw); display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1.4rem,3vw,2.6rem); }
.v10values__grid li { display: grid; grid-template-columns: 34px 1fr; gap: .9rem; align-items: start; }
.v10values__grid svg { width: 30px; height: 30px; color: var(--burgundy); grid-row: span 2; }
.v10values__grid h3 { font-family: var(--sans); font-size: .96rem; font-weight: 600; margin: 0 0 .2rem; color: var(--charcoal); }
.v10values__grid p { font-size: .88rem; line-height: 1.45; color: var(--ink-soft); margin: 0; }
@media (max-width:860px) { .v10values__grid { grid-template-columns: repeat(2,1fr); gap: var(--sp-3); } }
@media (max-width:460px) { .v10values__grid { grid-template-columns: 1fr; } }

.v10quotes { background: linear-gradient(180deg, #efe6d8 0%, #e9dfd0 100%); }
.v10quotes__inner { display: grid; grid-template-columns: minmax(14rem,22rem) 1fr; gap: clamp(2rem,5vw,4rem); align-items: start; max-width: var(--maxw); }
.v10quotes h2 { font-size: clamp(1.5rem,1.1rem + 1.5vw,2.15rem); line-height: 1.25; color: var(--charcoal); }
.v10quotes h2 em { font-style: italic; }
.v10quotes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem,2vw,1.4rem); }
.v10quotes blockquote { margin: 0; background: rgba(255,253,248,.82); border: 1px solid rgba(139,114,97,.18);
  border-radius: 3px; padding: clamp(1rem,2.4vw,1.5rem); box-shadow: 0 3px 14px rgba(43,43,43,.05); }
.v10quotes blockquote p { font-family: var(--serif); font-style: italic; font-size: clamp(.98rem,.9rem + .35vw,1.12rem); line-height: 1.45; color: var(--charcoal); margin: 0; }
.v10quotes__disclosure { grid-column: 1/-1; margin-top: var(--sp-3); font-size: .78rem; color: var(--taupe); }
@media (max-width:900px) { .v10quotes__inner { grid-template-columns: 1fr; } .v10quotes__grid { grid-template-columns: 1fr; } }

.v10conversation { position: relative; color: #fff; isolation: isolate; }
.v10conversation img.v10conversation__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.v10conversation__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,4,7,.9) 0%, rgba(10,4,7,.6) 45%, rgba(10,4,7,.2) 100%); }
.v10conversation__inner { max-width: var(--maxw); margin: 0 auto; min-height: 62vh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3.5rem,10vh,6rem) clamp(1.2rem,5vw,3rem); }
.v10conversation h2 { font-size: clamp(1.6rem,1.2rem + 1.7vw,2.5rem); line-height: 1.22; max-width: 20ch; }
.v10conversation h2 em { font-style: italic; color: var(--d-gold); }
.v10conversation p { color: rgba(255,255,255,.86); max-width: 26rem; }

/* ============================================================
   v11 refinement pass
   ============================================================ */

/* --- Editorial cards: copy comes out of the photograph -------------------
   Text baked over the image read as a Pinterest tile and put type over
   high-detail areas. Captions now sit beneath a clean image. */
.v10panels { align-items: start; }
.v10panel { overflow: visible; }
.v10panel img { border-radius: 4px; aspect-ratio: 4/5; }
.v10panel figcaption { position: static; inset: auto; padding: var(--sp-2) .15rem 0; color: var(--ink);
  background: none; text-shadow: none; }
.v10panel figcaption span { display: block; font-family: var(--serif); color: var(--charcoal);
  font-size: clamp(1.02rem,.94rem + .35vw,1.2rem); line-height: 1.4; }
.v10panel figcaption em { display: block; margin-top: .25rem; font-family: var(--serif); font-style: italic;
  color: var(--taupe); font-size: clamp(.98rem,.92rem + .28vw,1.12rem); }
@media (max-width:900px) { .v10panel figcaption { padding-bottom: var(--sp-2); } }

/* --- The pause -----------------------------------------------------------
   One section with nothing in it but a sentence. No image, no icon, no CTA. */
.v10pause { background: var(--onyx); color: var(--cloud);
  padding: clamp(6rem,17vh,10.5rem) clamp(1.2rem,5vw,3rem); }
.v10pause .section__inner { max-width: var(--maxw); }
.v10pause__line { font-family: var(--serif); font-weight: 500; color: var(--cloud);
  font-size: clamp(2rem,1.3rem + 3.1vw,3.6rem); line-height: 1.18; margin: 0; }
.v10pause__sub { margin: var(--sp-2) 0 0; font-size: clamp(1rem,.95rem + .25vw,1.15rem);
  color: rgba(237,230,217,.62); }
@media (max-width:760px) { .v10pause { text-align: center; } }

/* --- Cotton notes ----------------------------------------------------------
   These are the founder's own photographed sheets, cut out of their backdrops.
   The paper, the deckled edge and the tape are all real, so nothing here draws
   them; the CSS only places the sheets with restrained irregularity. The words
   travel as localized alt text because the handwriting itself cannot translate. */
.notes { display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(1.4rem,3.5vw,2.6rem) clamp(1rem,2.5vw,2rem); align-items: start; }
.note { position: relative; margin: 0; transform: rotate(var(--rot,0deg)); }
.note img { width: 100%; height: auto;
  filter: drop-shadow(0 1px 2px rgba(43,43,43,.10)) drop-shadow(0 8px 18px rgba(43,43,43,.08)); }
.note--a { grid-column: 1 / span 5; }
.note--b { grid-column: 7 / span 6; margin-top: clamp(1.5rem,4vh,3rem); }
.note--c { grid-column: 2 / span 4; margin-top: clamp(.5rem,2vh,1.5rem); }
.note--d { grid-column: 7 / span 6; }
@media (max-width:1000px) {
  .note--a, .note--b, .note--c, .note--d { grid-column: span 6; margin-top: 0; }
  .note--b, .note--d { margin-top: clamp(1rem,3vh,2rem); }
}
@media (max-width:640px) {
  .notes { grid-template-columns: 1fr; gap: clamp(1.2rem,4vw,1.8rem); }
  .note--a, .note--b, .note--c, .note--d { grid-column: 1 / -1; margin-top: 0; }
  .note--a { margin-right: 6%; } .note--b { margin-left: 5%; }
  .note--c { margin-right: 4%; } .note--d { margin-left: 3%; }
}

/* --- FAQ -----------------------------------------------------------------
   Button-driven so aria-expanded/aria-controls are explicit. Multiple panels
   may stay open; opening never scrolls the page. */
.faq { background: var(--bg-warm); }
.faq__support { max-width: 34ch; margin: 0 0 var(--sp-4); color: var(--ink-soft); font-size: 1.05rem; }
.faq__list { border-top: 1px solid rgba(139,114,97,.28); }
.faq__item { border-bottom: 1px solid rgba(139,114,97,.28); }
.faq__item h3 { margin: 0; font-family: var(--sans); font-weight: 600; }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; min-height: 56px; padding: 1.15rem 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: clamp(1rem,.96rem + .2vw,1.12rem); line-height: 1.4; color: var(--charcoal);
  text-align: left; }
[dir="rtl"] .faq__q { text-align: right; }
.faq__q:hover { color: var(--burgundy); }
.faq__icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: var(--burgundy); transition: transform .22s var(--ease), opacity .22s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(90deg) scaleX(0); opacity: 0; }
.faq__a { overflow: hidden; }
.faq__a > *:first-child { margin-top: 0; }
.faq__a p { color: var(--ink-soft); max-width: 62ch; font-size: 1.02rem; }
.faq__a > :last-child { margin-bottom: 1.35rem; }
.faq__cta { display: inline-block; margin-top: .35rem; font-weight: 600; color: var(--burgundy);
  text-decoration: none; border-bottom: 1px solid rgba(90,16,36,.4); padding-bottom: 2px; }
.faq__cta:hover { border-bottom-color: var(--burgundy); }
@media (prefers-reduced-motion: no-preference) {
  .faq__a { transition: height .28s var(--ease); }
}
@media (max-width:760px) {
  .faq .section__inner--narrow { max-width: none; }
  .faq__q { font-size: 1.05rem; min-height: 44px; }
}

/* --- Final invitation ----------------------------------------------------- */
.final__line { font-family: var(--serif); font-size: clamp(1.15rem,1rem + .75vw,1.6rem); line-height: 1.35;
  color: var(--cloud); }
.final__status { font-size: .95rem; color: rgba(237,230,217,.62); margin-bottom: var(--sp-3); }

/* --- Type and spacing polish --------------------------------------------- */
.v10values li p { font-size: 1rem; line-height: 1.55; }
.v10values li svg { width: 30px; height: 30px; }
.site-footer { font-size: .9rem; }
.v10quotes__disclosure { font-size: .84rem; max-width: 58ch; }

/* The notes need physical presence — at 300px the handwriting stopped being
   readable, which defeats the point of using real paper. The heading moves above
   them so the sheets get the full measure. */
.v10quotes__inner { grid-template-columns: 1fr; gap: clamp(2rem,4vw,3rem); }
.v10quotes h2 { max-width: 22ch; }
.note--a { grid-column: 1 / span 5; }
.note--b { grid-column: 7 / span 6; }
.note--c { grid-column: 2 / span 5; }
.note--d { grid-column: 8 / span 5; }

/* ============================================================
   Final polish pass — luxury calibration.
   Type sizes up, whitespace tuned to the emotional beat rather than
   applied evenly, notes placed by hand rather than by grid.
   ============================================================ */

/* --- Story-card captions: were too small to read comfortably ------------- */
.v10panel figcaption { padding-top: clamp(1rem, 2vw, 1.5rem); }
.v10panel figcaption span { font-size: clamp(1.24rem, 1.1rem + 0.45vw, 1.46rem); line-height: 1.42; }
.v10panel figcaption em { margin-top: .4rem; font-size: clamp(1.18rem, 1.06rem + 0.36vw, 1.36rem); }

/* --- The pause: one sentence, more air, larger ---------------------------- */
.v10pause { padding-block: clamp(8rem, 22vh, 14rem); }
.v10pause__line { font-size: clamp(2.5rem, 1.6rem + 3.9vw, 4.5rem); line-height: 1.14; }

/* --- Value icons: they were receding into the background ----------------- */
.v10values li svg { width: 36px; height: 36px; }
.v10values li h3 { margin-top: clamp(.75rem, 1.6vw, 1.1rem); }

/* --- Cotton notes: placed by a person, not by a grid ---------------------
   The grid supplies only the coarse position; each note then takes its own
   rotation, its own few-pixel nudge, its own width and its own shadow angle.
   Nothing exceeds ±2.5° or ~14px — it should read as human, not as askew. */
.notes { row-gap: clamp(2rem, 5vw, 3.5rem); }
.note--a { grid-column: 1 / span 5;  width: 100%;   transform: rotate(-1.8deg) translate(0, -6px); }
.note--b { grid-column: 7 / span 6;  width: 94%;    transform: rotate(1.4deg)  translate(10px, 14px); }
.note--c { grid-column: 2 / span 5;  width: 92%;    transform: rotate(-0.9deg) translate(-8px, 0); }
.note--d { grid-column: 8 / span 5;  width: 100%;   transform: rotate(2.1deg)  translate(4px, -10px);
  justify-self: end; }
/* Shadow direction varies by a few degrees per sheet so they read as
   individually laid down rather than stamped from one template. */
.note--a img { filter: drop-shadow(-1px 2px 3px rgba(43,43,43,.09)) drop-shadow(-2px 9px 20px rgba(43,43,43,.07)); }
.note--b img { filter: drop-shadow(1px 2px 3px rgba(43,43,43,.08))  drop-shadow(3px 8px 18px rgba(43,43,43,.065)); }
.note--c img { filter: drop-shadow(0 2px 3px rgba(43,43,43,.085))   drop-shadow(-1px 10px 21px rgba(43,43,43,.06)); }
.note--d img { filter: drop-shadow(2px 2px 3px rgba(43,43,43,.075)) drop-shadow(4px 9px 19px rgba(43,43,43,.07)); }

/* note1 carries no tape in the photograph; two short strips give the set a
   fourth tape treatment without retouching anyone's artwork. Matte, never
   yellow, never glossy — matched to the tape already in the other three. */
.note__tape--split { position: absolute; z-index: 2; top: -.45rem; left: 16%;
  width: 2.6rem; height: .95rem; transform: rotate(-2.5deg);
  background: rgba(226,218,199,.62); box-shadow: 0 1px 2px rgba(43,43,43,.06); }
.note__tape--split::after { content: ""; position: absolute; top: .1rem; left: 3.6rem;
  width: 2.1rem; height: .9rem; transform: rotate(1.8deg);
  background: rgba(226,218,199,.55); box-shadow: 0 1px 2px rgba(43,43,43,.05); }
@media (max-width:1000px) {
  .note--a, .note--b, .note--c, .note--d { width: 100%; justify-self: stretch; }
  .note--a { transform: rotate(-1.8deg) translate(0, -4px); }
  .note--b { transform: rotate(1.4deg)  translate(4px, 8px); }
  .note--c { transform: rotate(-0.9deg) translate(-4px, 0); }
  .note--d { transform: rotate(2.1deg)  translate(2px, -6px); }
}

/* --- FAQ: calmer, more readable, softer rules ---------------------------- */
.faq__q { font-size: clamp(1.1rem, 1.02rem + 0.32vw, 1.28rem); padding: 1.5rem 0; min-height: 64px; }
.faq__a p { line-height: 1.78; font-size: 1.06rem; }
.faq__a > :last-child { margin-bottom: 1.75rem; }
.faq__list { border-top-color: rgba(139,114,97,.18); }
.faq__item { border-bottom-color: rgba(139,114,97,.18); }
@media (prefers-reduced-motion: no-preference) {
  /* Ease-out only — no bounce, no overshoot. */
  .faq__a { transition: height .22s cubic-bezier(0.16, 0.84, 0.44, 1); }
}
@media (max-width:760px) { .faq__q { font-size: 1.12rem; padding: 1.25rem 0; min-height: 56px; } }

/* --- The closing thought: the crescendo ---------------------------------- */
.v10thought { background: #1B0910; color: var(--cloud);
  padding: clamp(9rem, 26vh, 16rem) clamp(1.2rem, 5vw, 3rem) clamp(11rem, 32vh, 20rem); }
.v10thought__line { max-width: 20ch; margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.3rem, 1.4rem + 4vw, 4.6rem); line-height: 1.16; color: var(--cloud); }
@media (max-width:760px) { .v10thought { text-align: center; } .v10thought__line { max-width: none; } }

/* --- Rhythm ---------------------------------------------------------------
   Spacing is no longer uniform. Emotional beats (manifesto, pause, thought)
   breathe; explanatory blocks (values, FAQ) sit closer to what they explain so
   the page reads as continuous paragraphs rather than stacked modules. */
.v10manifesto { padding-block: clamp(6.5rem, 17vh, 10rem); }
.v10values { padding-block: clamp(3.5rem, 8vh, 5rem); }
.v10quotes { padding-block: clamp(5.5rem, 13vh, 8rem); }
.faq { padding-top: clamp(4rem, 9vh, 6rem); padding-bottom: clamp(5.5rem, 13vh, 8rem); }

/* Tape tone matched to the masking tape already photographed on the other three
   sheets — warm matte, never yellow, never glossy. */
.note__tape--split { background: rgba(232,224,203,.86); }
.note__tape--split::after { background: rgba(232,224,203,.8); }

/* The CTA grew to "Request an invitation" everywhere, which overflowed the
   original row: the button wrapped to two lines and the placeholder clipped. */
.invite-form { max-width: 34rem; margin-inline: auto; }
.invite-form__row { gap: .75rem; align-items: stretch; }
.invite-form__row input { flex: 1 1 auto; min-width: 0; }
.invite-form__row .btn { flex: 0 0 auto; white-space: nowrap; padding-inline: 1.7rem; }
@media (max-width:560px) { .invite-form__row .btn { width: 100%; } }

/* ============================================================
   Notes — hand placement, restored.
   The per-note rotations and nudges were being cancelled: `.reveal.is-visible`
   sets `transform: none` and outranks `.note--a` on specificity, so every sheet
   snapped perfectly square the instant it animated in. The placement is now held
   in custom properties and composed into both reveal states, so the reveal moves
   the note without ever discarding how it was laid down.
   ============================================================ */
.note--a { --rot: -1.8deg; --tx: 0px;   --ty: -6px; grid-column: 1 / span 6; width: 90%;  }
.note--b { --rot:  1.4deg; --tx: 10px;  --ty: 14px; grid-column: 8 / span 5; width: 104%; justify-self: end; }
.note--c { --rot: -0.9deg; --tx: -8px;  --ty: 0px;  grid-column: 2 / span 5; width: 100%; }
.note--d { --rot:  2.1deg; --tx: 4px;   --ty: -10px; grid-column: 7 / span 5; width: 106%; }

.note, .note.reveal.is-visible {
  transform: rotate(var(--rot, 0deg)) translate(var(--tx, 0px), var(--ty, 0px));
}
.note.reveal {
  transform: rotate(var(--rot, 0deg)) translate(var(--tx, 0px), calc(var(--ty, 0px) + 22px));
}
@media (prefers-reduced-motion: reduce) {
  .note.reveal { transform: rotate(var(--rot, 0deg)) translate(var(--tx, 0px), var(--ty, 0px)); }
}
@media (max-width: 1000px) {
  .note--a, .note--b, .note--c, .note--d { grid-column: span 6; width: 100%; justify-self: stretch; }
  .note--b { --ty: 8px; } .note--d { --ty: -6px; }
}
@media (max-width: 640px) {
  .note--a, .note--b, .note--c, .note--d { grid-column: 1 / -1; --tx: 0px; --ty: 0px; }
}

/* ============================================================
   Final refinement pass
   ============================================================ */

/* --- Notes: values tuned to the brief's final numbers ---------------------
   Rotations tightened to ±2°, offsets to the specified nudges, and size spread
   pulled from 10% down into the 5–10% band. Shadows lowered so the sheets rest
   on the page instead of hovering above it, and lit from broadly one direction. */
.note--a { --rot: -1.4deg; --tx: -6px; --ty: -3px; grid-column: 1 / span 6; width: 87%; }
.note--b { --rot:  1.1deg; --tx: 10px; --ty:  8px; grid-column: 8 / span 5; width: 100%; justify-self: end; }
.note--c { --rot: -0.7deg; --tx:  4px; --ty: -1px; grid-column: 2 / span 5; width: 101%; }
.note--d { --rot:  1.7deg; --tx: -8px; --ty: 12px; grid-column: 7 / span 5; width: 105%; }
.note img,
.note--a img, .note--b img, .note--c img, .note--d img {
  filter: drop-shadow(0 1px 1px rgba(43,43,43,.055)) drop-shadow(0 5px 14px rgba(43,43,43,.05));
}
/* Small direction differences only — never four separate light sources. */
.note--b img { filter: drop-shadow(1px 1px 1px rgba(43,43,43,.05))  drop-shadow(2px 5px 14px rgba(43,43,43,.048)); }
.note--c img { filter: drop-shadow(0 1px 1px rgba(43,43,43,.058))   drop-shadow(1px 6px 15px rgba(43,43,43,.05)); }
.note--d img { filter: drop-shadow(1px 1px 1px rgba(43,43,43,.052)) drop-shadow(2px 6px 14px rgba(43,43,43,.046)); }
/* note1's tape is CSS (its photograph has none); the brief wants it centred. */
.note__tape--split { left: 50%; transform: translateX(-50%) rotate(-1.6deg); top: -.4rem; width: 3rem; }
.note__tape--split::after { left: 3.3rem; width: 2.2rem; }
@media (max-width: 640px) {
  /* Rotation eases off on a narrow column so nothing reads as skewed. */
  .note--a { --rot: -0.6deg; } .note--b { --rot: 0.5deg; }
  .note--c { --rot: -0.4deg; } .note--d { --rot: 0.6deg; }
}

/* --- Pause: a further ~12% of presence ----------------------------------- */
.v10pause__line { font-size: clamp(2.8rem, 1.7rem + 4.4vw, 5rem); }
.v10pause { padding-block: clamp(9rem, 24vh, 15rem); }

/* --- Burgundy statement: the copy was floating in the top third ---------- */
.v10thought { padding-top: clamp(8rem, 21vh, 13rem); padding-bottom: clamp(7rem, 18vh, 11rem); }

/* --- Value strip on mobile: two columns, not a shrunken row -------------- */
@media (max-width: 760px) {
  .v10values__grid { grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 2.4rem); }
  .v10values li svg { width: 34px; height: 34px; }
}

/* --- Invitation modal ----------------------------------------------------- */
body.is-modal-open { position: fixed; width: 100%; overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center;
  justify-content: center; padding: clamp(1rem, 4vw, 2rem); }
.modal__backdrop { position: absolute; inset: 0; background: rgba(12, 6, 8, .68);
  backdrop-filter: blur(3px); }
.modal__panel { position: relative; width: min(30rem, 100%); max-height: 92svh; overflow-y: auto;
  background: var(--bg-warm); color: var(--ink); border: 1px solid rgba(139,114,97,.24);
  border-radius: 14px; box-shadow: 0 24px 70px rgba(21,21,21,.32);
  padding: clamp(2rem, 5vw, 2.9rem) clamp(1.5rem, 4vw, 2.6rem); text-align: center; }
.modal__close { position: absolute; top: .6rem; inset-inline-end: .6rem;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; color: var(--taupe); cursor: pointer; }
.modal__close:hover { color: var(--burgundy); background: rgba(139,114,97,.1); }
.modal__mark { width: 52px; height: 52px; margin: 0 auto var(--sp-2); border-radius: 12px; }
.modal__title { font-family: var(--serif); font-size: clamp(1.55rem, 1.3rem + 1vw, 2rem);
  line-height: 1.2; margin: 0 0 .65rem; color: var(--charcoal); }
.modal__body { font-size: 1rem; line-height: 1.62; color: var(--ink-soft); margin: 0 auto var(--sp-3);
  max-width: 34ch; }
.modal__form { text-align: start; }
.modal__label { display: block; font-size: .88rem; font-weight: 600; letter-spacing: .02em;
  color: var(--charcoal); margin-bottom: .4rem; }
.modal__input { width: 100%; min-height: 48px; padding: .8rem 1rem; font: inherit;
  color: var(--charcoal); background: #fff; border: 1px solid rgba(139,114,97,.42);
  border-radius: 10px; }
.modal__input:focus-visible { border-color: var(--burgundy); }
.modal__input[aria-invalid="true"] { border-color: #8B2540; }
.modal__error { margin: .5rem 0 0; font-size: .9rem; color: #8B2540; }
.modal__submit { width: 100%; margin-top: var(--sp-2); }
.modal__privacy { margin: var(--sp-2) 0 0; font-size: .84rem; line-height: 1.5; color: var(--taupe);
  text-align: center; }
.modal__status { margin: .45rem 0 0; font-size: .8rem; color: var(--taupe); text-align: center; }
.modal__done .modal__body { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .modal__panel { animation: modalIn .22s cubic-bezier(0.16, 0.84, 0.44, 1); }
  @keyframes modalIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 480px) { .modal { align-items: flex-end; padding: 0; }
  .modal__panel { border-radius: 16px 16px 0 0; max-height: 94svh; width: 100%; } }

/* --- Accessibility corrections -------------------------------------------
   Nav, footer and language controls were between 15px and 41px tall, under the
   44px minimum. Padding does the work so nothing moves visually. */
.site-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.brand { min-height: 44px; }
.lang__btn { min-height: 44px; }
.faq__cta { display: inline-flex; align-items: center; min-height: 44px; }
/* 11.5px is below the accessible floor for real copy. */
.platform__eyebrow { font-size: .8rem; }
/* Short labels ("FAQ", "Terms") were 44px tall but under 44 wide. Horizontal
   padding fixes the target without moving the type. The inline "Privacy Policy"
   link inside a sentence stays as-is — WCAG 2.5.8 exempts links in running text. */
.site-nav a:not(.btn), .site-footer nav a { padding-inline: .55rem; min-width: 44px; justify-content: center; }

/* ============================================================
   Visual corrections pass
   ============================================================ */

/* --- Official mark ------------------------------------------------------
   The heart-and-voice-bars logo is transparent PNG with its own silhouette, so
   the tile treatment (background, radius) that suited the invented square mark
   has to come off or it prints a box around the logo. */
.brand img { width: 38px; height: auto; border-radius: 0; background: none; }
.modal__mark { width: 74px; height: auto; border-radius: 0; background: none; }
.final__logo { width: 72px; height: auto; border-radius: 0; background: none; }
.maintenance img { border-radius: 0; background: none; }

/* --- Cotton notes ~30% larger ------------------------------------------
   Two real columns instead of a 12-column grid: at this size the 12-col spans
   could not give both a large sheet and a 5–10% spread without the lower pair
   colliding. Columns carry the stagger via per-note insets instead. */
.v10quotes .section__inner { max-width: 82rem; }
.notes { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3.5vw, 3rem); }
.note--a { grid-column: 1; width: 100%; }
.note--b { grid-column: 2; width: 96%; justify-self: end; }
.note--c { grid-column: 1; width: 98%; margin-inline-start: 7%; }
.note--d { grid-column: 2; width: 101%; justify-self: end; margin-inline-end: 4%; }
@media (max-width: 1000px) {
  .v10quotes .section__inner { max-width: var(--maxw); }
  .note--a, .note--b, .note--c, .note--d { width: 100%; margin-inline: 0; justify-self: stretch; }
}
@media (max-width: 640px) {
  .notes { grid-template-columns: 1fr; }
  .note--a, .note--b, .note--c, .note--d { grid-column: 1; }
}

/* --- FAQ: a comfortable measure, calmer type --------------------------- */
.faq .section__inner--narrow { max-width: 52rem; }   /* 832px */
.faq__q { font-size: clamp(1.05rem, 1rem + 0.14vw, 1.1rem); }        /* ~17–17.6px */
.faq__a p { font-size: clamp(.95rem, .92rem + 0.1vw, 1rem); line-height: 1.65; }  /* ~15–16px */
.faq { padding-top: clamp(3.5rem, 7vh, 5rem); padding-bottom: clamp(4.5rem, 10vh, 6.5rem); }
.faq__support { margin-bottom: var(--sp-3); }

/* --- Burgundy statement: two balanced lines on desktop ----------------- */
.v10thought .section__inner { max-width: 76rem; }
.v10thought__line { max-width: none; font-size: clamp(2rem, 1.1rem + 3.1vw, 3.5rem); }

/* --- Hero headline +6% ------------------------------------------------- */
.v10hero h1 { font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.76rem); }

/* --- Closing scrim: the new frame has a pale dusk sky behind the copy --- */
.final__scrim { background:
  linear-gradient(to bottom, rgba(10,6,10,.72) 0%, rgba(10,6,10,.45) 38%, rgba(10,6,10,.58) 100%); }
/* The new closing frame puts both faces in the upper band, so the copy starts
   lower than it did over the old skyline — nothing overlays an expression. */
.final__inner { padding-top: clamp(3rem, 12vh, 8rem); }
@media (max-width: 760px) { .final__inner { padding-top: clamp(2rem, 7vh, 4rem); } }

/* ============================================================
   Editorial photography pass
   ============================================================ */

/* Captions read editorial, not promotional. Playfair 400 is now actually loaded —
   previously 400 was requested but only 500 shipped, so it rendered heavier than
   specified. */
.v10panel figcaption span { font-weight: 400; }
.v10panel figcaption em { font-weight: 400; }

/* Footer: mark up ~10%, links given room, text eased back. */
.site-footer .final__logo, .final__logo { width: 79px; }
.site-footer nav { gap: 1.75rem; }
.site-footer { color: rgba(237, 230, 217, .68); }
@media (max-width: 640px) { .site-footer nav { gap: 1.15rem; } }

/* ============================================================
   Final to-do pass
   ============================================================ */

/* Note one leads the read: ~7% larger than its neighbours, placement unchanged. */
.note--a { width: 94%; }

/* Closing copy lifted clear of both faces. */
.final__inner { padding-top: clamp(2.4rem, 11vh, 7.2rem); }
/* Note one must LEAD the read. Percentages are relative to each grid column, and
   column one is the narrower of the two, so 94% made it the smallest note rather
   than the largest. Sized against the others' rendered width instead. */
.note--a { width: 104%; }
.note--b { width: 96%; }
.note--c { width: 97%; }
.note--d { width: 98%; }

/* Value strip is now three observations, not four product values. The lead-in is
   visible because the three lines only read correctly after it. */
.v10values__lead { font-family: var(--serif); font-weight: 400; color: var(--taupe);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); margin: 0 0 clamp(1.5rem, 4vw, 2.4rem); }
.v10values__grid { grid-template-columns: repeat(3, 1fr); }
.v10values li p { font-family: var(--serif); color: var(--charcoal);
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); line-height: 1.45; margin: 0; }
.v10values li svg { margin-bottom: clamp(.7rem, 1.6vw, 1rem); }
@media (max-width: 760px) { .v10values__grid { grid-template-columns: 1fr; gap: clamp(1.4rem, 5vw, 2rem); } }

/* ============================================================
   Image refresh + calm pass
   ============================================================ */

/* The statement needs room to land — ~25% more air above and below. */
.v10pause { padding-block: clamp(11rem, 30vh, 19rem); }

/* Long-form reading gets ~5% more leading. Headlines and captions keep theirs. */
.faq__a p { line-height: 1.73; }
.modal__body { line-height: 1.7; }
.v10values li p { line-height: 1.52; }
.invite-form__privacy, .site-footer { line-height: 1.65; }

/* Calm, not startup-y: slower fades, gentle easing, no dramatic motion. */
:root { --reveal-dur: 0.55s; --ease: cubic-bezier(0.25, 0.6, 0.3, 1); }
.reveal[data-delay="1"] { transition-delay: 0.09s; }
.reveal[data-delay="2"] { transition-delay: 0.18s; }
.reveal[data-delay="3"] { transition-delay: 0.27s; }

/* Hover is a hint, not an effect: 2% at most, no parallax anywhere. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .v10panel img { transition: transform .5s cubic-bezier(0.25, 0.6, 0.3, 1); }
  .v10panel:hover img { transform: scale(1.02); }
}

/* ============================================================
   Gold master
   ============================================================ */
/* Four values again — headings return, so the strip reads as values not slogans. */
.v10values__grid { grid-template-columns: repeat(4, 1fr); }
.v10values li h3 { font-family: var(--sans); font-size: .95rem; font-weight: 600;
  letter-spacing: .01em; color: var(--charcoal); margin: 0 0 .4rem; }
.v10values li p { font-family: var(--sans); font-size: 1rem; line-height: 1.55;
  color: var(--ink-soft); margin: 0; }
@media (max-width: 900px) { .v10values__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .v10values__grid { grid-template-columns: 1fr; } }

/* Breathing room around the three emotional beats; the image row stays tight so
   the three panels read as one sequence. */
.v10manifesto { padding-block: clamp(8rem, 21vh, 12.5rem); }
.v10panels { padding-block: 0 14px; }
.v10thought { padding-top: clamp(9rem, 23vh, 14rem); padding-bottom: clamp(8rem, 20vh, 12rem); }

/* Motion: 450–650ms, ~10px rise, once on entry, hover capped at 2%. */
:root { --reveal-dur: 0.58s; }
.reveal { transform: translateY(10px); }
@media (hover: none) { .v10panel:hover img { transform: none; } }

/* The overlay carries only the headline, the supporting line and the CTA. The
   development notice moves to the foot of the section — still plainly visible,
   no longer one of several small lines stacked over the photograph. */
.final .final__status { margin: var(--sp-2) auto .35rem; font-size: .85rem; letter-spacing: .01em;
  color: rgba(237,230,217,.66); text-align: center; max-width: 34rem; }
.final__line { margin-bottom: var(--sp-3); }

/* Two-part captions: a heading line and a quieter supporting line. The supporting
   line is not italic — three italic lines in one row would read as emphasis rather
   than as the understated second beat it is meant to be. */
.v10panel figcaption em { font-style: normal; color: var(--taupe);
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.14rem); line-height: 1.45; margin-top: .3rem; }

/* --- Notes: keep the hand placement inside its own container ---------------
   The per-note widths above 100% plus the placement nudges pushed the sheets
   8–17px past the grid at every width, so the outer notes ran at (and past) the
   section edge. The grid now reserves exactly that much room, and no note is
   wider than its column — the irregularity comes from the offsets alone. */
.notes { padding-inline: 14px; }
.note--a { width: 100%; }
.note--b { width: 96%; }
.note--c { width: 97%; }
.note--d { width: 98%; }

/* note1 has no photographed tape, so two short strips are drawn. They were
   anchored above the sheet's top edge and read as a detached artefact floating
   over the background; they now overlap the paper the way real tape would. */
.note--a { padding-top: .55rem; }
.note__tape--split { top: .1rem; z-index: 3; }
.note__tape--split::after { top: .12rem; }
/* The drawn strips on note1 sat above the paper rather than on it, reading as a
   pale artefact at the sheet's top edge — which is what made the note look cut.
   Three of the four sheets carry real photographed tape; the fourth having none
   is honest variation, so the drawn substitute is gone rather than faked better. */
.note--a { padding-top: 0; }
.note__tape--split { display: none; }

/* ============================================================
   RTL correctness + per-language typography
   ============================================================ */

/* The header positioned itself with physical margins and an explicit order, so
   under dir="rtl" the language selector was pushed to x ≈ −1100 and dragged the
   whole page into horizontal scroll. Logical properties mirror automatically;
   the [dir=rtl] override is no longer needed and would now fight them. */
.site-nav { margin-inline-start: auto; margin-inline-end: 1rem; margin-left: 0; margin-right: 0; }
[dir="rtl"] .site-nav { margin-inline-start: auto; margin-inline-end: 1rem;
  margin-left: 0; margin-right: 0; }
/* NOT overflow:clip — the language menu is absolutely positioned inside the
   header, so clipping paints 540px of dropdown into a 66px strip. The RTL
   overflow it was meant to stop was really the skip-link, fixed below. */
.header-right { flex: 0 0 auto; }

/* Arabic needs more leading than Latin at the same size — diacritics and
   descenders collide at 1.2. Applied per-language, not globally. */
:lang(ar) .v10hero h1, :lang(ar) .v10pause__line,
:lang(ar) .v10thought__line, :lang(ar) #finalHeading { line-height: 1.42; }
:lang(ar) .v10manifesto__row p, :lang(ar) .manifesto__line { line-height: 1.6; }
:lang(ar) .faq__a p, :lang(ar) .modal__body { line-height: 1.9; }
:lang(ar) .v10panel figcaption span { line-height: 1.55; }

/* Thai stacks tone marks above and below the line; Devanagari hangs from the
   shirorekha. Both need more room than Latin. */
:lang(th) .v10hero h1, :lang(th) .v10pause__line, :lang(th) .v10thought__line { line-height: 1.5; }
:lang(th) .faq__a p, :lang(th) .modal__body { line-height: 1.95; }
:lang(hi) .v10hero h1, :lang(hi) .v10pause__line, :lang(hi) .v10thought__line { line-height: 1.4; }
:lang(hi) .faq__a p, :lang(hi) .modal__body { line-height: 1.85; }

/* German, Dutch, Russian, Polish and Ukrainian build longer words than English;
   the hero must be allowed to shrink rather than push a word off the line. */
:lang(de) .v10hero h1, :lang(nl) .v10hero h1, :lang(ru) .v10hero h1,
:lang(pl) .v10hero h1, :lang(uk) .v10hero h1 { font-size: clamp(1.9rem, 1.2rem + 2.5vw, 3.2rem); }
:lang(de) #finalHeading, :lang(pl) #finalHeading, :lang(uk) #finalHeading { hyphens: auto; }
/* The skip link hid itself at left:-9999px. In LTR that is harmless, but in RTL
   the inline start is on the right, so a negative-left element extends the
   scrollable area — every Arabic page carried ~10,000px of phantom horizontal
   scroll. Clipping hides it without occupying space in either direction. */
.skip-link { left: auto; clip-path: inset(50%); position: absolute; inset-inline-start: 0; top: 0; }
.skip-link:focus { left: auto; clip-path: none; inset-inline-start: 0; }