/* CROWN landing V1 — colour tokens from crown-ios src/design/tokens.ts. Light-only, like the app.
   Layout concept: Apple-style product page — centred statements, generous air, one device as hero,
   SF Pro Display for statements, New York kept for Scripture-flavoured accents. */
:root {
  --white: #FFFFFF;
  --canvas: #F7F6F2;
  --mist: #F5F5F2;            /* card ground: Canvas pulled toward neutral, like Apple's #F5F5F7 */
  --forest: #243F2E;
  --forest-90: #1B3626;
  --forest-60: #2F5A40;
  --forest-10: rgba(36, 63, 46, 0.08);
  --sage: #6D8A74;
  --charcoal: #1F1F1F;
  --stone: #DCD8D1;
  --gold: #B79A64;            /* brand-glyph only */

  --text: var(--charcoal);
  --text-secondary: #5F5E5C;  /* accessible secondary (app BLOCK 22B) */
  --text-sage: #526D5A;       /* Sage as text, 4.5:1+ */
  --text-on-forest: var(--canvas);
  --text-on-forest-2: rgba(247, 246, 242, 0.72);
  --hairline: rgba(31, 31, 31, 0.08);

  --display: -apple-system, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --radius-card: 28px;
  --shadow-soft: 0 1px 1px rgba(31, 31, 31, .03), 0 8px 24px rgba(31, 31, 31, .06);
  --shadow-device: 0 2px 4px rgba(31, 31, 31, .06), 0 24px 48px -12px rgba(31, 31, 31, .22), 0 60px 120px -40px rgba(36, 63, 46, .25);

  --gutter: 22px;
  --section: 88px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
@media (min-width: 768px) { :root { --gutter: 40px; --section: 120px; } }
@media (min-width: 1200px) { :root { --section: 152px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font: 400 17px/1.47 var(--sans);
  letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 8px; }
.final :focus-visible, .trust :focus-visible { outline-color: var(--canvas); }
[hidden] { display: none !important; }

.container { width: 100%; max-width: calc(1080px + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--forest); color: var(--white); padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.skip-link:focus { top: 12px; }
.line { display: block; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--sm { width: 18px; height: 18px; stroke-width: 2; }

/* ---------- type scale (Apple product-page rhythm) ---------- */
.eyebrow { font: 600 15px/1.3 var(--sans); letter-spacing: -.01em; color: var(--text-sage); margin-bottom: 14px; }
.h2 {
  font: 600 clamp(32px, 5.2vw, 56px)/1.07 var(--display);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.h3 { font: 600 21px/1.24 var(--display); letter-spacing: -.022em; }
.lead { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.43; color: var(--text-secondary); max-width: 38em; margin: 18px auto 0; text-wrap: pretty; }
.lead--strong { color: var(--text); font-weight: 600; margin-top: 10px; }
.section { padding-block: var(--section); }
.section-head { text-align: center; margin: 0 auto 56px; max-width: 780px; }
@media (min-width: 1024px) { .section-head { margin-bottom: 80px; } }
.text-link { display: inline-flex; align-items: center; color: var(--forest); font-weight: 500; font-size: 17px; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- brand / buttons ---------- */
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand__mark { width: 30px; height: 30px; }
.brand__word { font: 600 15px/1 var(--serif); letter-spacing: .24em; color: var(--forest); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 16px; border-radius: 999px; font: 500 14px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; transition: background .2s; }
.btn--forest { background: var(--forest); color: var(--white); }
.btn--forest:hover { background: var(--forest-60); }

/* Temporary App Store button. Replace with Apple's official badge artwork (asset slot A08). */
.store-badge {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-width: 168px; min-height: 54px; padding: 7px 22px 8px;
  background: #000; color: var(--white); border-radius: 13px;
  text-decoration: none; line-height: 1.05; letter-spacing: 0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.store-badge:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.store-badge__small { font: 500 11px/1.2 var(--sans); }
.store-badge__big { font: 600 22px/1.1 var(--display); letter-spacing: -.02em; }
.store-badge--light { background: var(--white); color: #000; }
.store-badge[aria-disabled="true"] { cursor: default; }
.store-badge[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
.cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 30px; }
.cta-row--center { justify-content: center; }

/* ---------- NAV ---------- */
.nav { position: sticky; top: 0; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom-color: var(--hairline); }
.nav__inner { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__links { display: none; gap: 30px; margin-left: auto; }
.nav__links a { text-decoration: none; font-size: 14px; color: var(--text-secondary); transition: color .2s; }
.nav__links a:hover { color: var(--text); }
@media (min-width: 768px) { .nav__links { display: flex; } }

/* ---------- DEVICE (titanium iPhone frame, Dynamic Island) ---------- */
.device {
  position: relative;
  border-radius: 17% / 7.9%;
  --dw: 300px;
  width: var(--dw);
  padding: calc(var(--dw) * .036);   /* bezel scales with the phone itself, never with the page */
  background: linear-gradient(145deg, #3A3A3C 0%, #1C1C1E 40%, #2C2C2E 100%);
  box-shadow: var(--shadow-device), inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 4px #0B0B0C;
}
.device__screen {
  position: relative; overflow: hidden;
  border-radius: 14% / 6.5%;
  aspect-ratio: 1179 / 2556;
  background: var(--canvas);
  isolation: isolate;
}
.device__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.device__island {
  position: absolute; z-index: 3; left: 50%; top: 1.5%; transform: translateX(-50%);
  width: 31%; height: 3.6%; border-radius: 999px; background: #000;
}

/* ---------- 1 · HERO ---------- */
.hero { padding-block: 40px 0; text-align: center; }
.hero__inner { display: grid; justify-items: center; }
.hero__title {
  font: 600 clamp(38px, 7.2vw, 80px)/1.04 var(--display);
  letter-spacing: -.045em;
  max-width: 14em;
  text-wrap: balance;
}
.hero__title .line--accent { color: var(--forest); }
.hero__body { margin-top: 20px; font-size: clamp(17px, 1.9vw, 22px); line-height: 1.42; color: var(--text-secondary); max-width: 31em; text-wrap: pretty; }
.hero .cta-row { justify-content: center; margin-top: 30px; }
.hero__media { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; width: 100%; margin-top: 56px; padding-bottom: 0; }
.hero__media::before {   /* soft brand glow behind the device */
  content: ""; position: absolute; left: 50%; top: 14%; transform: translateX(-50%);
  width: min(92vw, 640px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(109, 138, 116, .18), rgba(109, 138, 116, 0));
  pointer-events: none;
}
.device--hero { --dw: min(78vw, 320px); }
.device--hero .frame { opacity: 0; transition: opacity .5s ease, transform .7s var(--ease); }
.device--hero .frame.is-active { opacity: 1; }
.device--hero .frame--rise { transform: translateY(10px) scale(.995); }
.device--hero .frame--slide { transform: translateX(14px); }
.device--hero .frame--rise.is-active, .device--hero .frame--slide.is-active { transform: none; }
@media (min-width: 768px) {
  .hero { padding-top: 72px; }
  .device--hero { --dw: 390px; }
  .hero__media { margin-top: 72px; }
}

/* ---------- 2 · NOISE ---------- */
.noise__stage { position: relative; max-width: 980px; margin: 0 auto; }
.noise__cards { display: grid; gap: 10px; }
.noise-card {
  display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 14px 20px 14px 14px; background: var(--white); border: 1px solid var(--hairline); border-radius: 22px;
  box-shadow: var(--shadow-soft);
  transition: opacity .6s ease, filter .6s ease, transform .6s var(--ease);
}
.noise-card__glyph {
  grid-row: span 2; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(180deg, #F2F1EE, #E6E4DF); color: #48474A;
  box-shadow: inset 0 0 0 1px rgba(31, 31, 31, .05);
}
.noise-card__glyph img { width: 30px; height: 30px; object-fit: contain; }
.noise-card__source { font-size: 13px; font-weight: 600; color: var(--text-secondary); letter-spacing: -.005em; }
.noise-card__result { font: 600 19px/1.25 var(--display); letter-spacing: -.02em; }

.crown-path { position: relative; margin: 36px auto 0; padding: 26px 26px 24px; border-radius: var(--radius-card); background: var(--white); box-shadow: var(--shadow-device); max-width: 340px; border: 1px solid var(--hairline); }
.crown-path__label { display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 12px/1 var(--serif); letter-spacing: .24em; color: var(--forest); margin-bottom: 22px; }
.crown-path__label img { width: 22px; height: 22px; }
.crown-path__nodes { list-style: none; padding: 0; display: grid; gap: 20px; position: relative; z-index: 1; }
.crown-path__nodes li {
  display: flex; align-items: center; gap: 16px;
  font: 600 21px/1.2 var(--display); letter-spacing: -.02em; color: var(--forest);
  transition: opacity .5s ease calc(var(--n) * 160ms + 500ms), transform .5s var(--ease) calc(var(--n) * 160ms + 500ms);
}
.crown-path__nodes li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 5px var(--forest-10); }
.crown-path__line { position: absolute; left: 31px; top: 76px; bottom: 34px; width: 2px; border-radius: 2px; background: linear-gradient(var(--forest), var(--sage)); transform-origin: top; transition: transform .9s var(--ease) .3s; }
.noise__close { margin-top: 56px; text-align: center; font: 400 clamp(26px, 3.4vw, 36px)/1.2 var(--serif); letter-spacing: -.01em; color: var(--forest); }

@media (min-width: 1024px) {
  .noise__stage { height: 460px; }
  .noise__cards { display: block; }
  .noise-card { position: absolute; width: 260px; }
  .noise-card:nth-child(1) { left: 0; top: 6px; transform: rotate(-3deg); }
  .noise-card:nth-child(2) { right: 0; top: 30px; transform: rotate(2.5deg); }
  .noise-card:nth-child(3) { left: 30px; bottom: 16px; transform: rotate(2deg); }
  .noise-card:nth-child(4) { right: 22px; bottom: 0; transform: rotate(-3.5deg); }
  .crown-path { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: 320px; }
}

.js .noise[data-motion] .noise-card { opacity: 0; translate: 0 10px; }
.js .noise[data-motion] .crown-path { opacity: 0; transition: opacity .5s ease .2s; }
.js .noise[data-motion] .crown-path__nodes li { opacity: 0; transform: translateY(6px); }
.js .noise[data-motion] .crown-path__line { transform: scaleY(0); }
.js .noise.is-playing .noise-card { opacity: 1; translate: 0 0; transition: opacity .5s ease calc(var(--i) * 120ms), translate .5s var(--ease) calc(var(--i) * 120ms), filter .6s ease; }
.js .noise.is-playing .noise-card__result { animation: type-in .5s steps(12, end) both; animation-delay: calc(var(--i) * 120ms + 250ms); }
.js .noise.is-resolved .noise-card { opacity: .32; filter: blur(1.5px) saturate(.2); }
.js .noise.is-resolved .crown-path { opacity: 1; }
.js .noise.is-resolved .crown-path__nodes li { opacity: 1; transform: none; }
.js .noise.is-resolved .crown-path__line { transform: scaleY(1); }
@media (max-width: 1023px) { .js .noise.is-resolved .noise-card { opacity: .5; filter: saturate(0); } }
@keyframes type-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- 3 · HOW IT WORKS ---------- */
.how { background: var(--mist); }
.steps { display: grid; gap: 72px; }
.step { display: grid; gap: 32px; justify-items: center; text-align: center; }
.step__copy { max-width: 400px; }
.step__copy .h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -.03em; }
.step__copy p { margin-top: 12px; color: var(--text-secondary); font-size: 17px; }
.step__num { display: inline-block; margin-bottom: 12px; font: 600 13px/1 var(--sans); letter-spacing: -.005em; color: var(--forest); background: var(--white); border: 1px solid var(--hairline); border-radius: 999px; padding: 7px 12px; }
.device--crop { --dw: min(74vw, 300px); }
.device--crop .device__screen { aspect-ratio: 1179 / 1600; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.device--crop .device__screen img { height: auto; bottom: auto; }
.device--crop { padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.device--crop-bottom { padding-bottom: calc(var(--dw) * .036); padding-top: 0; border-radius: 0 0 17% 17% / 0 0 10.5% 10.5%; -webkit-mask-image: linear-gradient(transparent, #000 28%); mask-image: linear-gradient(transparent, #000 28%); }
.device--crop-bottom .device__screen { border-radius: 0 0 14% 14% / 0 0 8.6% 8.6%; }
.device--crop-bottom .device__screen img { top: auto; bottom: 0; }
.device--crop-bottom .device__island { display: none; }
.step__media { order: 2; }
@media (min-width: 1024px) {
  .steps { gap: 120px; }
  .step { grid-template-columns: 1fr 1fr; align-items: center; text-align: left; justify-items: start; gap: 80px; }
  .step__media { order: 0; justify-self: center; }
  .step--flip .step__media { order: 2; }
  .device--crop { --dw: 340px; }
}

/* ---------- 4 · FEATURE SWITCHER ---------- */
.fs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.fs__media { display: grid; justify-items: center; gap: 20px; }
.device--feature { --dw: min(74vw, 300px); touch-action: pan-y; }
.fs-frame { opacity: 0; transform: scale(.985); transition: opacity .3s ease-out, transform .35s var(--ease); }
.fs-frame.is-active { opacity: 1; transform: none; }
.callout {   /* points at the real Understand action in the Bible reader */
  position: absolute; z-index: 2; left: 50.5%; top: 88.6%; width: 22%; height: 7.4%;
  border-radius: 16px; box-shadow: 0 0 0 2px var(--forest), 0 0 0 7px rgba(36, 63, 46, .16);
  opacity: 0; transform: scale(1.12); transition: opacity .35s ease .15s, transform .45s var(--ease) .15s;
}
.callout.is-active { opacity: 1; transform: none; }
.dots { display: flex; gap: 7px; }
.dot { width: 7px; height: 7px; border-radius: 4px; background: var(--stone); transition: background .3s, width .3s var(--ease); }
.dot.is-active { background: var(--forest); width: 22px; }

/* phones: pill tabs + panel */
.fs__tabs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-block: 4px 8px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
.fs__tabs::-webkit-scrollbar { display: none; }
.fs-tab {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px 10px 12px;
  border: 1px solid var(--hairline); border-radius: 999px; background: var(--mist);
  font: 600 15px/1.25 var(--sans); letter-spacing: -.015em; color: var(--text); cursor: pointer; text-align: left;
  transition: background .3s, border-color .3s, box-shadow .3s, color .3s;
}
.fs-tab__icon { width: 20px; height: 20px; color: var(--forest); }
.fs-tab[aria-selected="true"] { background: var(--forest); border-color: var(--forest); color: var(--white); }
.fs-tab[aria-selected="true"] .fs-tab__icon { color: var(--white); }
.fs-panel { padding: 20px 2px 0; }
.fs-panel p { color: var(--text-secondary); font-size: 17px; }
.fs-panel .labels { margin-top: 14px; font: 600 14px/1.4 var(--sans); color: var(--text-sage); letter-spacing: -.005em; }
.bubbles { display: grid; gap: 8px; margin-bottom: 16px; }
.bubbles li { justify-self: start; max-width: 100%; padding: 9px 14px; border-radius: 18px 18px 18px 6px; background: var(--mist); font-size: 15px; letter-spacing: -.01em; color: var(--text); }

@media (min-width: 1024px) {
  .fs { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
  .fs__media { position: sticky; top: 88px; }
  .device--feature { --dw: 350px; }
  .fs__list { display: grid; grid-template-rows: repeat(10, auto); }
  .fs__tabs { display: contents; }
  .fs-tab, .fs-panel { grid-row: var(--row); grid-column: 1; }
  .fs-tab {
    width: 100%; min-height: 68px; padding: 20px 26px; margin-top: 10px; gap: 14px;
    border-radius: 22px; background: var(--mist); border: 0; color: var(--text);
    font: 600 20px/1.25 var(--display); letter-spacing: -.022em;
  }
  .fs-tab__icon { width: 24px; height: 24px; }
  .fs-tab:hover { background: #EFEFEB; }
  .fs-tab[aria-selected="true"] { background: var(--white); color: var(--text); border-radius: 22px 22px 0 0; padding-bottom: 8px; box-shadow: inset 1px 0 0 var(--hairline), inset -1px 0 0 var(--hairline), inset 0 1px 0 var(--hairline); }
  .fs-tab[aria-selected="true"] .fs-tab__icon { color: var(--forest); }
  .fs-panel {
    padding: 4px 26px 26px 64px; background: var(--white);
    border-radius: 0 0 22px 22px; box-shadow: inset 1px 0 0 var(--hairline), inset -1px 0 0 var(--hairline), inset 0 -1px 0 var(--hairline), 0 18px 40px -16px rgba(31, 31, 31, .18);
    clip-path: inset(0 -60px -60px -60px);
  }
  .fs-panel p { font-size: 17px; }
}

/* ---------- 5 · WHY + TRUST ---------- */
.why-cards { display: grid; gap: 14px; }
.why-card { background: var(--mist); border-radius: var(--radius-card); padding: 34px 30px 36px; }
.why-card .h3 { font-size: 24px; letter-spacing: -.028em; }
.why-card p { margin-top: 10px; color: var(--text-secondary); }
.icon-tile {
  width: 54px; height: 54px; border-radius: 15px; margin-bottom: 26px;
  display: grid; place-items: center; color: var(--white);
  background: linear-gradient(160deg, var(--forest-60) 0%, var(--forest) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 18px -8px rgba(36, 63, 46, .55);
}
.icon-tile .icon { width: 28px; height: 28px; stroke-width: 1.6; }
@media (min-width: 1024px) { .why-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.trust { background: var(--forest); color: var(--text-on-forest); padding-block: 88px; }
.trust__title { font: 600 clamp(30px, 4.4vw, 48px)/1.08 var(--display); letter-spacing: -.035em; text-align: center; text-wrap: balance; }
.trust__title .line--soft { color: var(--text-on-forest-2); }
.trust__list { display: grid; gap: 16px; margin: 48px auto 0; max-width: 1000px; }
.trust__list li { display: flex; gap: 12px; align-items: flex-start; padding: 20px 22px; border-radius: 20px; background: rgba(247, 246, 242, .06); box-shadow: inset 0 0 0 1px rgba(247, 246, 242, .1); font-weight: 600; font-size: 17px; line-height: 1.4; }
.trust__list .icon { color: #C9D6CB; width: 22px; height: 22px; margin-top: 1px; }
@media (min-width: 1024px) { .trust { padding-block: 120px; } .trust__list { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* ---------- 6 · FAQ ---------- */
.faq__inner { max-width: calc(760px + 2 * var(--gutter)); }
.faq__inner .h2 { text-align: center; margin-bottom: 44px; }
.faq-item { border-bottom: 1px solid var(--stone); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 72px; padding: 22px 0; font: 600 clamp(18px, 1.9vw, 22px)/1.3 var(--display); letter-spacing: -.022em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__icon { width: 22px; height: 22px; color: var(--forest); transition: transform .3s var(--ease); }
.faq-item[open] .faq-item__icon { transform: rotate(45deg); }
.faq-item p { padding: 0 40px 26px 0; color: var(--text-secondary); font-size: 17px; max-width: 40em; }

/* ---------- 7 · FINAL CTA ---------- */
.final { background: var(--forest); color: var(--text-on-forest); padding-block: 104px 112px; }
@media (min-width: 1024px) { .final { padding-block: 152px; } }
.final__inner { text-align: center; display: grid; justify-items: center; }
.final__mark { width: 92px; height: 92px; border-radius: 22.5%; background: var(--canvas); display: grid; place-items: center; margin-bottom: 30px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .5); }
.final__mark img { width: 66px; height: 66px; }
.final__title { font: 600 clamp(36px, 6vw, 64px)/1.05 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.final__body { margin-top: 18px; font-size: clamp(17px, 1.9vw, 21px); color: var(--text-on-forest-2); max-width: 30em; }
.final .cta-row { margin-top: 34px; }
.final__brandline { margin-top: 40px; font: 400 15px/1 var(--serif); letter-spacing: .02em; color: var(--text-on-forest-2); }

/* ---------- 8 · FOOTER ---------- */
.footer { padding-block: 40px; background: var(--mist); }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.footer__inner .brand__mark { width: 26px; height: 26px; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; font-size: 13px; }
.footer__links a { color: var(--text-secondary); text-decoration: none; display: inline-block; padding: 10px 0; }
.footer__links a:hover { color: var(--text); text-decoration: underline; }
.footer__meta { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hairline); text-align: center; font-size: 12px; color: var(--text-secondary); display: grid; gap: 4px; }
@media (min-width: 768px) {
  .footer__inner { flex-direction: row; justify-content: space-between; }
  .footer__meta { text-align: left; }
}

/* ---------- reveals ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- reduced motion: final states, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}
.noise-card__glyph.has-logo { display: flex; align-items: center; justify-content: center; background: var(--white); box-shadow: inset 0 0 0 1px var(--hairline); }
.noise-card__glyph.has-logo img + img { width: 20px; height: 20px; }

/* founder-supplied App Store badge + Apple glyph */
.store-badge { min-width: 0; min-height: 0; padding: 0; background: none; border-radius: 12px; line-height: 0; }
.store-badge img { height: 54px; width: auto; }
@media (min-width: 768px) { .store-badge img { height: 58px; } }
.btn--black { background: #000; color: var(--white); gap: 7px; }
.btn--black:hover { background: #1C1C1E; }
.btn__apple { width: 15px; height: 15px; margin-top: -2px; }
.nav__cta { min-height: 36px; padding: 0 16px 0 14px; }
.brand--mark-only .brand__mark { width: 38px; height: 38px; }

/* =====================================================================
   LEGAL + SUPPORT PAGES — same tokens and type as the landing, reading-first
   ===================================================================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.legal { padding-block: 56px 96px; }
@media (min-width: 768px) { .legal { padding-block: 96px 128px; } }
.legal__inner { max-width: calc(800px + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.legal__title { font: 600 clamp(36px, 5vw, 52px)/1.08 var(--display); letter-spacing: -.035em; color: var(--text); text-wrap: balance; }
.legal-subtitle { margin-top: 8px; font: 400 22px/1.3 var(--serif); color: var(--text-sage); }
.legal-lead { margin-top: 16px; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.5; color: var(--text-secondary); max-width: 40em; }
.legal-body { margin-top: 32px; font-size: 17px; line-height: 1.65; letter-spacing: -.012em; color: var(--text); }
.legal-body > * + * { margin-top: 16px; }
.legal-body > p:first-child { color: var(--text-secondary); font-size: 15px; }
.legal-body h2 { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--stone); font: 600 clamp(22px, 2.4vw, 26px)/1.25 var(--display); letter-spacing: -.025em; color: var(--forest); scroll-margin-top: 80px; }
.legal-body h2 + * { margin-top: 18px; }
.legal-body h3 { margin-top: 32px; font: 600 19px/1.3 var(--display); letter-spacing: -.02em; }
.legal-body ul, .legal-body ol { padding-left: 1.3em; }
.legal-body li + li { margin-top: 6px; }
.legal-body li::marker { color: var(--sage); }
.legal-body strong { font-weight: 600; }
.legal-body a:not(.btn) { color: var(--forest); text-decoration: underline; text-decoration-color: rgba(36, 63, 46, .35); text-underline-offset: 3px; }
.legal-body a:not(.btn):hover { text-decoration-color: currentColor; }
.legal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--ghost { background: var(--white); color: var(--text); box-shadow: inset 0 0 0 1px var(--stone); }
.btn--ghost:hover { background: var(--mist); }
.legal-btn, .support-card .btn { min-height: 44px; padding: 0 20px; font-size: 15px; }
.legal-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
.legal-dl dt { color: var(--text-secondary); }
.legal-dl dd { margin: 0; }
mark.placeholder { background: #FFF1C2; color: #6B4E00; border-radius: 4px; padding: 0 4px; font: 600 .9em/1.4 var(--sans); }
.draft-banner { margin-bottom: 28px; padding: 14px 16px; border-radius: 14px; background: #FFF8E1; color: #5C4300; font-size: 14px; line-height: 1.45; box-shadow: inset 0 0 0 1px #F1DFA6; }
.legal-toc { margin-top: 28px; border-radius: 16px; background: var(--mist); padding: 4px 20px; }
.legal-toc summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font: 600 15px/1 var(--sans); color: var(--text); }
.legal-toc ol { padding: 0 0 16px; display: grid; gap: 8px; columns: 1; font-size: 15px; }
.legal-toc a { color: var(--forest); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
@media (min-width: 768px) { .legal-toc ol { display: block; columns: 2; column-gap: 32px; } .legal-toc li { break-inside: avoid; margin-bottom: 8px; } }
.legal-related { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--stone); }
.legal-related__title { font: 600 13px/1 var(--sans); letter-spacing: .02em; text-transform: uppercase; color: var(--text-secondary); }
.legal-related ul { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.legal-related a { color: var(--forest); font-weight: 500; }

/* support */
.support-options { margin-top: 40px; display: grid; gap: 12px; }
@media (min-width: 768px) { .support-options { grid-template-columns: 1fr 1fr; gap: 16px; } .support-card:last-child { grid-column: 1 / -1; } }
.support-card { background: var(--mist); border-radius: 22px; padding: 24px; display: grid; align-content: start; gap: 8px; }
.support-card h3 { font: 600 19px/1.3 var(--display); letter-spacing: -.02em; }
.support-card p { color: var(--text-secondary); font-size: 16px; line-height: 1.5; }
.support-card__actions { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.support-card .text-link { font-size: 15px; }
.urgent { margin-top: 40px; padding: 22px 24px; border-radius: 18px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--forest); }
.urgent h2 { font: 600 19px/1.3 var(--display); color: var(--forest); }
.urgent p { margin-top: 8px; font-size: 16px; line-height: 1.5; }
.support-form-wrap { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--stone); scroll-margin-top: 72px; }
.support-form-wrap h2 { font: 600 clamp(26px, 3vw, 32px)/1.15 var(--display); letter-spacing: -.03em; }
.support-form { margin-top: 24px; display: grid; gap: 20px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font: 600 15px/1.3 var(--sans); }
.field__opt { font-weight: 400; color: var(--text-secondary); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 17px/1.4 var(--sans); color: var(--text); background: var(--white);
  border: 1px solid #CFCAC2; border-radius: 12px; padding: 12px 14px; min-height: 48px;
}
.field textarea { resize: vertical; min-height: 160px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; border-color: var(--forest); }
.field [aria-invalid="true"] { border-color: #8C2F27; }
.field__help { font-size: 14px; color: var(--text-secondary); }
.field__error { font-size: 14px; color: #8C2F27; }
.field-row { display: grid; gap: 20px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.support-submit { justify-self: start; min-height: 50px; padding: 0 28px; font-size: 16px; }
.support-submit[disabled] { opacity: .7; cursor: progress; }
.support-consent { font-size: 14px; line-height: 1.5; color: var(--text-secondary); max-width: 44em; }
.support-consent a { color: var(--forest); }
.form-state { display: grid; gap: 10px; justify-items: start; }
.form-state h2 { margin-bottom: 4px; }
.form-state .btn { margin-top: 8px; min-height: 48px; padding: 0 24px; }
.page .nav { position: sticky; }