/* Laya website, v3 (2026-10-20).
   Laya's own design system, taken from the app (laya_flutter/lib/ui/theme/styles/laya.dart):
   graphite ground with two soft glows, hairline glass, Jost Light for display, Hanken Grotesk for
   text, one colour per subject, lilac as the accent, the white pill as the one primary button.
   Craft on top (taste-skill rules that fit Laya): few type sizes, roomy sections, one idea per
   section, varied compositions, real screens, motion on transform and opacity only, and nothing
   hidden if the script never runs. Every component class the pricing and thanks pages use is kept. */

:root {
  --ground: #15161A;
  --card: #212226;
  --raised: #2A2B2F;
  --seg-on: rgba(255, 255, 255, .13);
  --glow-cool: rgba(52, 58, 92, .62);
  --glow-warm: rgba(70, 44, 34, .48);
  --glass-top: rgba(255, 255, 255, .075);
  --glass-bottom: rgba(255, 255, 255, .04);
  --edge: #48494C;
  --hair: rgba(255, 255, 255, .10);
  --hair-soft: rgba(255, 255, 255, .07);
  --track: rgba(255, 255, 255, .06);
  --ink: #F3F3F1;
  --muted: #B6B8BE;
  --faint: #95989F;
  --lilac: #B4BEF5;
  --lilac-ink: #B4BEF5;
  --lilac-soft: rgba(180, 190, 245, .08);
  --lilac-line: rgba(180, 190, 245, .65);
  --violet: #C9AAFF;
  --sleep: #9DA9FF;
  --deep: #7380F0;
  --recovery: #6ED3A3;
  --heart: #FF8F8F;
  --ember: #FFA75F;
  --pill-bg: #F3F3F1;
  --pill-ink: #15161A;
  --pill-hover: #FFFFFF;
  --on-lilac: #15161A;
  --band: rgba(110, 211, 163, .14);
  --shot-edge: rgba(255, 255, 255, .10);
  --shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  --placeholder: #FFC38A;
  color-scheme: dark;
}

/* Light: porcelain ground, the same structure (layaLight in the app). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #F6F6F4; --card: #FFFFFF; --raised: #EFEFEC; --seg-on: #FFFFFF;
    --glow-cool: rgba(180, 190, 245, .42); --glow-warm: rgba(245, 205, 175, .34);
    --glass-top: rgba(255, 255, 255, .92); --glass-bottom: rgba(255, 255, 255, .74);
    --edge: #B9BAB7; --hair: rgba(20, 21, 24, .10); --hair-soft: rgba(20, 21, 24, .07); --track: rgba(20, 21, 24, .06);
    --ink: #141518; --muted: #4A4D54; --faint: #5E6168;
    --lilac: #4A57CC; --lilac-ink: #3B47B5; --lilac-soft: rgba(74, 87, 204, .07); --lilac-line: rgba(74, 87, 204, .6);
    --violet: #8159D0; --sleep: #5463DB; --deep: #3A43A6; --recovery: #1B7F53; --heart: #C03F3F; --ember: #A9560F;
    --pill-bg: #141518; --pill-ink: #FFFFFF; --pill-hover: #2A2B2F; --on-lilac: #FFFFFF;
    --band: rgba(27, 127, 83, .10); --shot-edge: rgba(20, 21, 24, .14);
    --shadow: 0 30px 60px -30px rgba(40, 44, 80, .35); --placeholder: #874407;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ground: #F6F6F4; --card: #FFFFFF; --raised: #EFEFEC; --seg-on: #FFFFFF;
  --glow-cool: rgba(180, 190, 245, .42); --glow-warm: rgba(245, 205, 175, .34);
  --glass-top: rgba(255, 255, 255, .92); --glass-bottom: rgba(255, 255, 255, .74);
  --edge: #B9BAB7; --hair: rgba(20, 21, 24, .10); --hair-soft: rgba(20, 21, 24, .07); --track: rgba(20, 21, 24, .06);
  --ink: #141518; --muted: #4A4D54; --faint: #5E6168;
  --lilac: #4A57CC; --lilac-ink: #3B47B5; --lilac-soft: rgba(74, 87, 204, .07); --lilac-line: rgba(74, 87, 204, .6);
  --violet: #8159D0; --sleep: #5463DB; --deep: #3A43A6; --recovery: #1B7F53; --heart: #C03F3F; --ember: #A9560F;
  --pill-bg: #141518; --pill-ink: #FFFFFF; --pill-hover: #2A2B2F; --on-lilac: #FFFFFF;
  --band: rgba(27, 127, 83, .10); --shot-edge: rgba(20, 21, 24, .14);
  --shadow: 0 30px 60px -30px rgba(40, 44, 80, .35); --placeholder: #874407;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background-color: var(--ground);
  background-image:
    radial-gradient(70vw 60vh at 8% -6%, var(--glow-cool), transparent 70%),
    radial-gradient(60vw 60vh at 100% 70%, var(--glow-warm), transparent 70%);
  background-attachment: fixed; background-repeat: no-repeat;
  font: 500 17px/1.6 "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--lilac-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--lilac); color: var(--on-lilac); }
.num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 10; background: var(--pill-bg); color: var(--pill-ink); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 32px; } }
.narrow { max-width: 800px; }

/* ---------- Header ---------- */
.site-head { position: relative; z-index: 2; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand svg { width: 34px; height: 22px; flex: none; }
.wordmark { font: 300 27px/1 Jost, "Hanken Grotesk", sans-serif; letter-spacing: .02em; transform: translateY(-1px); }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 11px; border-radius: 999px; transition: color .2s ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav .hide-sm { display: none; }
@media (min-width: 640px) { .nav .hide-sm { display: inline-block; } }
.theme-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: 2px; border: 0; border-radius: 999px; background: transparent; color: var(--faint); cursor: pointer; transition: color .2s ease, transform .2s ease; }
.theme-btn:hover { color: var(--ink); }
.theme-btn:active { transform: scale(.92); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .sun { display: none; }
:root[data-theme-resolved="light"] .theme-btn .sun { display: block; }
:root[data-theme-resolved="light"] .theme-btn .moon { display: none; }
.mark-a { stop-color: var(--violet); }
.mark-b { stop-color: var(--lilac); }
.mark-dot { fill: var(--lilac); }

/* ---------- Type: display, title, body, small ---------- */
.micro { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--faint); margin: 0 0 10px; }
.micro.lilac { color: var(--lilac-ink); }
h1, .ttl { font: 300 clamp(44px, 8.4vw, 88px)/1.0 Jost, "Hanken Grotesk", sans-serif; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h2 { font: 300 clamp(34px, 5.2vw, 56px)/1.05 Jost, "Hanken Grotesk", sans-serif; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h3 { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin: 0; }
.sub { color: var(--muted); font-size: clamp(18px, 2vw, 20px); line-height: 1.55; margin: 18px 0 0; max-width: 40ch; text-wrap: pretty; }
.fine { font-size: 14px; color: var(--faint); line-height: 1.5; margin: 0; }
p { margin: 0 0 14px; }

section { padding-block: 72px; }
@media (min-width: 900px) { section { padding-block: 120px; } }
.head { max-width: 680px; margin-bottom: 44px; }

/* ---------- Glass ---------- */
.glass {
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  border: 1px solid var(--hair); border-radius: 24px;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}

/* ---------- Buttons ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--pill-bg); color: var(--pill-ink);
  font: 600 16px/1 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: .005em; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, transform .2s cubic-bezier(.33, 1, .68, 1);
}
.pill:hover { background: var(--pill-hover); text-decoration: none; }
.pill:active { transform: scale(.975); }
.pill svg { width: 20px; height: 20px; flex: none; }
.pill.block { display: flex; width: 100%; }
.pill[disabled], .pill[aria-disabled="true"] { background: var(--track); color: var(--faint); cursor: not-allowed; transform: none; }
.textlink { color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.textlink:hover { color: var(--lilac-ink); }
.textlink svg { width: 14px; height: 14px; transition: transform .2s ease; }
.textlink:hover svg { transform: translateX(3px); }
a[aria-disabled="true"]:not(.pill) { color: inherit; text-decoration: none; cursor: default; }
.soon { color: var(--muted); font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 36px; }

/* ---------- Screens (store shots with made-up data, cropped to the phone) ---------- */
.shot {
  margin: 0; border-radius: 34px; overflow: hidden; border: 1px solid var(--shot-edge); background: #15161A;
  aspect-ratio: 720 / 1499; box-shadow: var(--shadow);
  -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent);
}
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- Home: hero ---------- */
.hero { padding-block: 28px 64px; }
.hero .wrap { display: grid; gap: 56px; align-items: center; }
.hero .mark-big { width: 76px; height: auto; margin-bottom: 24px; overflow: visible; }
@media (min-width: 900px) { .hero .mark-big { width: 104px; margin-bottom: 30px; } }
.hero .shot { max-width: 330px; width: 100%; margin: 0 auto; }
.hero .fine { margin-top: 18px; max-width: 46ch; }
@media (min-width: 900px) {
  .hero { padding-block: 48px 120px; }
  .hero .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 72px; }
  .hero .shot { max-width: 360px; margin: 0 0 0 auto; }
}

/* The settling wave draws itself once: it swings, swings less, ripples, lies flat, and the point lights. */
.wave-line { stroke-dasharray: 100; stroke-dashoffset: 0; }
.wave-dot { transform-box: fill-box; transform-origin: center; }
.wave-line { animation: draw 1.7s cubic-bezier(.2, .7, .2, 1) .15s both; }
.wave-dot { animation: lit .6s cubic-bezier(.2, .7, .2, 1) 1.55s both; }
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes lit { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }

/* ---------- Home: your usual (the one live thing) ---------- */
.usual .wrap { display: grid; gap: 44px; }
@media (min-width: 900px) { .usual .wrap { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 80px; align-items: center; } }
.usual .head { margin-bottom: 0; }
.band-card { padding: 28px 22px 26px; }
@media (min-width: 720px) { .band-card { padding: 40px 40px 34px; } }
.band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 700; font-size: 18px; }
.band-head .word { color: var(--recovery); transition: color .25s ease; }
.band-head .word[data-state="higher"] { color: var(--heart); }
.band-value { font: 300 clamp(64px, 11vw, 92px)/1 Jost, system-ui, sans-serif; letter-spacing: -.02em; margin: 22px 0 6px; font-variant-numeric: tabular-nums; }
.band-value small { font: 500 18px/1 "Hanken Grotesk", system-ui, sans-serif; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
.band-line { color: var(--ink); font-size: 19px; min-height: 3.2em; margin: 0; }
.band-track { position: relative; height: 64px; margin-top: 22px; }
.band-track .rail { position: absolute; left: 0; right: 0; top: 22px; height: 4px; border-radius: 4px; background: var(--track); }
.band-track .zone { position: absolute; top: 9px; height: 30px; border-radius: 10px; background: var(--band); border: 1px solid color-mix(in srgb, var(--recovery) 50%, transparent); left: 36.4%; width: 13.6%; }
.band-track .zone span { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--recovery); }
.band-track .ends { position: absolute; left: 0; right: 0; top: 46px; display: flex; justify-content: space-between; font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.band-track input[type="range"] { position: absolute; left: -2px; right: -2px; top: 0; width: calc(100% + 4px); height: 48px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: grab; touch-action: pan-y; }
.band-track input[type="range"]:active { cursor: grabbing; }
.band-track input[type="range"]::-webkit-slider-runnable-track { height: 48px; background: transparent; }
.band-track input[type="range"]::-moz-range-track { height: 48px; background: transparent; }
.band-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: 9px; border-radius: 50%; background: var(--ink); border: 7px solid var(--ground); box-shadow: 0 0 0 1px var(--edge); transition: transform .15s ease; }
.band-track input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 7px solid var(--ground); box-shadow: 0 0 0 1px var(--edge); }
.band-track input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.band-track input[type="range"]:focus-visible { outline: none; }
.band-track input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--lilac); }
.band-track input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--lilac); }
.band-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hair-soft); font-size: 14px; color: var(--faint); }

/* ---------- Home: a screen beside its words ---------- */
.feature .wrap { display: grid; gap: 48px; align-items: center; }
.feature .shot { max-width: 320px; width: 100%; margin: 0 auto; }
.feature .head { margin-bottom: 0; }
@media (min-width: 900px) {
  .feature .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; }
  .feature.flip .copy { order: 2; }
}
.points { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 16px; }
.points li { padding-left: 28px; position: relative; max-width: 50ch; }
.points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 14px; height: 2px; border-radius: 2px; background: var(--lilac); }
.points li span { color: var(--muted); }

/* ---------- Home: a quiet row of screens ---------- */
.gallery { padding-bottom: 48px; }
.gallery-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 270px); gap: 22px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 8px 16px 32px; scroll-padding-inline: 16px;
  scrollbar-width: thin; scrollbar-color: var(--edge) transparent;
}
@media (min-width: 720px) { .gallery-row { padding-inline: 32px; scroll-padding-inline: 32px; } }
@media (min-width: 1120px) { .gallery-row { padding-left: calc((100vw - 1120px) / 2 + 32px); scroll-padding-left: calc((100vw - 1120px) / 2 + 32px); } }
.gallery-row figure { margin: 0; scroll-snap-align: start; }
.gallery-row .shot { box-shadow: none; }
.gallery-row figcaption { margin-top: 16px; }
.gallery-row figcaption b { display: block; font-weight: 700; font-size: 17px; }
.gallery-row figcaption span { color: var(--muted); font-size: 15px; line-height: 1.5; display: block; margin-top: 4px; }
.gallery-row .plus-tag { color: var(--lilac-ink); font-weight: 600; }

/* ---------- Home: private by design ---------- */
.private .wrap { display: grid; gap: 52px; align-items: start; }
@media (min-width: 900px) { .private .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 96px; } }
.private .shot { max-width: 320px; width: 100%; margin: 0 auto; }
.facts { margin: 36px 0 0; }
.facts div { padding: 22px 0; border-top: 1px solid var(--hair-soft); }
.facts div:last-child { border-bottom: 1px solid var(--hair-soft); }
.facts dt { font-weight: 700; font-size: 18px; }
.facts dd { margin: 6px 0 0; color: var(--muted); max-width: 52ch; }

/* ---------- Home: the plans, side by side ---------- */
.tiers { display: grid; gap: 20px; }
@media (min-width: 860px) { .tiers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } }
.tier-card { padding: 30px 24px 32px; }
@media (min-width: 720px) { .tier-card { padding: 40px 38px 40px; } }
.tier-name { display: flex; align-items: center; gap: 12px; font: 300 32px/1 Jost, "Hanken Grotesk", sans-serif; letter-spacing: .01em; margin: 0; }
.tier-name svg { width: 32px; height: 20px; }
.tier-name em { font-style: normal; color: var(--lilac-ink); }
.tier-card .tag { color: var(--muted); margin: 14px 0 0; }
.tier-card ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.tier-card li { padding-left: 30px; position: relative; }
.tier-card li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--recovery); border-bottom: 2px solid var(--recovery); transform: rotate(-45deg); }
.tier-card.plus { border-color: var(--lilac-line); }
.tier-card.plus li::before { border-color: var(--lilac); }
.tier-card .fine { margin-top: 26px; }
.tiers-note { margin-top: 28px; color: var(--muted); max-width: 66ch; }

/* ---------- Closing ---------- */
.closing { text-align: center; }
.closing .mark-close { width: 92px; height: auto; margin: 0 auto 32px; }
.closing h2 { max-width: 16ch; margin-inline: auto; }
.closing .sub { margin-inline: auto; }
.closing .actions { justify-content: center; }

/* ---------- Pledge band (pricing, home, pledge) ---------- */
.pledge-band { display: flex; gap: 18px; align-items: flex-start; padding: 28px 24px; }
@media (min-width: 720px) { .pledge-band { padding: 40px 44px; align-items: center; } }
.pledge-band svg.shield { width: 28px; height: 28px; flex: none; color: var(--recovery); margin-top: 4px; }
.pledge-band p { font: 300 clamp(24px, 2.8vw, 32px)/1.3 Jost, "Hanken Grotesk", sans-serif; margin: 0; text-wrap: balance; }
.pledge-band .fine { font: 500 14px/1.5 "Hanken Grotesk", sans-serif; margin-top: 12px; }

/* ---------- Segmented switch, plan rows, trial timeline (pricing, thanks) ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--track); border: 1px solid var(--hair-soft); margin: 0; min-width: 0; }
.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { height: 50px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--muted); line-height: 1.15; transition: background-color .25s ease, color .25s ease; }
.seg label small { font-size: 12px; font-weight: 500; color: var(--faint); letter-spacing: .01em; }
.seg input:checked + label { background: var(--seg-on); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair), 0 1px 3px rgba(0, 0, 0, .18); }
.seg input:focus-visible + label { outline: 2px solid var(--lilac); outline-offset: 2px; }

.plans { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.plans legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.plan { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--hair); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.plan[hidden] { display: none; }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan .radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent); flex: none; display: grid; place-items: center; }
.plan:has(input:checked) { border-color: var(--lilac-line); background: var(--lilac-soft); }
.plan:has(input:checked) .radio { border-color: var(--lilac); }
.plan:has(input:checked) .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lilac); }
.plan:has(input:focus-visible) { outline: 2px solid var(--lilac); outline-offset: 2px; }
.plan .pt { flex: 1; min-width: 0; }
.plan .pt b { display: block; font-weight: 600; font-size: 16px; }
.plan .pt span { font-size: 13.5px; color: var(--faint); }
.plan .pp { text-align: right; }
.plan .pp b { display: block; font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.plan .pp span { font-size: 12px; font-weight: 700; color: var(--lilac-ink); }

.timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 30px 1fr; column-gap: 16px; }
.timeline li { display: contents; }
.timeline .node { display: flex; flex-direction: column; align-items: center; }
.timeline .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--lilac); flex: none; }
.timeline .dot svg { width: 12px; height: 12px; color: var(--lilac); }
.timeline li:first-child .dot { background: var(--lilac); }
.timeline li:first-child .dot svg { color: var(--on-lilac); }
.timeline li:last-child .dot { border-color: color-mix(in srgb, var(--lilac) 45%, transparent); }
.timeline .line { flex: 1; width: 2px; min-height: 40px; background: color-mix(in srgb, var(--lilac) 22%, transparent); }
.timeline .copy { padding: 3px 0 28px; }
.timeline li:last-child .copy { padding-bottom: 0; }
.timeline .copy b { display: block; font-size: 17px; font-weight: 600; }
.timeline .copy > span { display: block; color: var(--muted); font-size: 15.5px; margin-top: 2px; }

/* ---------- Questions ---------- */
.faq { display: grid; max-width: 800px; border-top: 1px solid var(--hair-soft); }
.faq details { border-bottom: 1px solid var(--hair-soft); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font-weight: 600; font-size: 18px; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%);
  background: linear-gradient(var(--faint), var(--faint)) center / 14px 1.5px no-repeat, linear-gradient(var(--faint), var(--faint)) center / 1.5px 14px no-repeat;
  transition: transform .25s cubic-bezier(.33, 1, .68, 1); }
.faq summary:hover::after { background: linear-gradient(var(--ink), var(--ink)) center / 14px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 14px no-repeat; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .answer { padding: 0 0 24px; color: var(--muted); max-width: 64ch; }
.faq .answer p:last-child { margin-bottom: 0; }
.faq .answer strong { color: var(--ink); font-weight: 600; }
.faq .answer ol, .faq .answer ul { padding-left: 22px; margin: 0 0 14px; }
.faq .answer li { margin-bottom: 6px; }
.path { color: var(--ink); font-weight: 600; }
.path i { font-style: normal; color: var(--faint); font-weight: 400; padding-inline: 3px; }

/* ---------- Footer: a deliberate close ---------- */
.site-foot { padding-block: 48px 64px; border-top: 1px solid var(--hair-soft); margin-top: 24px; }
.site-foot .wrap { display: grid; gap: 28px; }
@media (min-width: 820px) { .site-foot .wrap { grid-template-columns: 1fr auto; align-items: start; gap: 48px; } }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
@media (min-width: 820px) { .foot-links { max-width: 420px; justify-content: flex-end; } }
.foot-links a { color: var(--muted); text-decoration: none; font-size: 15px; padding-block: 4px; }
.foot-links a:hover { color: var(--ink); }
.site-foot .fine { margin-top: 14px; max-width: 50ch; }

/* ---------- Long-form pages (privacy, terms, support) ---------- */
.doc-hero { padding-block: 32px 28px; }
@media (min-width: 900px) { .doc-hero { padding-block: 56px 40px; } }
.doc-hero h1 { font-size: clamp(44px, 7vw, 76px); }
.doc-meta { margin-top: 20px; font-size: 15px; color: var(--faint); }
.short { padding: 28px 22px; }
@media (min-width: 720px) { .short { padding: 38px 40px; } }
.short h2 { font-size: clamp(28px, 3.4vw, 36px); margin-bottom: 20px; }
.short ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.short li { padding-left: 28px; position: relative; }
.short li::before { content: ""; position: absolute; left: 0; top: .72em; width: 14px; height: 2px; border-radius: 2px; background: var(--lilac); }
.short li b { font-weight: 700; }
.toc { list-style: none; margin: 44px 0 0; padding: 0; columns: 1; }
@media (min-width: 720px) { .toc { columns: 2; column-gap: 44px; } }
.toc li { break-inside: avoid; padding: 5px 0; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.prose { padding-bottom: 96px; }
.prose h2 { font-size: clamp(30px, 4vw, 40px); margin: 72px 0 18px; scroll-margin-top: 24px; }
.prose h3 { margin: 32px 0 10px; }
.prose p, .prose li { max-width: 68ch; }
.prose p { margin: 0 0 14px; }
.prose .muted, .prose .note { color: var(--muted); }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--faint); }
.table-scroll { overflow-x: auto; margin: 18px 0 22px; border: 1px solid var(--hair); border-radius: 18px; background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); }
.prose table { border-collapse: collapse; width: 100%; font-size: 15.5px; min-width: 600px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--hair-soft); }
.prose tr:last-child td { border-bottom: 0; }
.prose th { color: var(--muted); font-weight: 600; }
.prose td:first-child { font-weight: 600; }
.prose td { color: var(--ink); }
.prose td span { color: var(--muted); }
.placeholder { color: var(--placeholder); font-weight: 600; }
.contact-card { padding: 28px 22px; display: grid; gap: 18px; }
@media (min-width: 720px) { .contact-card { padding: 38px 40px; grid-template-columns: 1fr auto; align-items: center; } }
.contact-card .addr { font: 300 clamp(26px, 4vw, 36px)/1.15 Jost, "Hanken Grotesk", sans-serif; word-break: break-word; margin: 6px 0 0; }
.contact-card .addr a { color: var(--ink); text-decoration: none; }
.support-group { margin-top: 64px; }
.closing-note { margin-top: 56px; }
.support-group h2 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 18px; }

/* ---------- 404 ---------- */
.lost { min-height: 64vh; display: grid; place-items: center; text-align: center; }
.lost .mark-big { width: 120px; height: auto; margin: 0 auto 32px; overflow: visible; }
.lost .sub { margin-inline: auto; }
.lost .actions { justify-content: center; }

/* ---------- Motion: sections rise once. Visible without the script. ---------- */
.js .rise { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.2, .7, .2, 1), transform .75s cubic-bezier(.2, .7, .2, 1); }
.js .rise.d1 { transition-delay: 80ms; } .js .rise.d2 { transition-delay: 160ms; } .js .rise.d3 { transition-delay: 240ms; }
.js .rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise { opacity: 1; transform: none; transition: none; }
  .wave-line, .wave-dot { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}