/* =========================================================================
   Coquet — landing page
   Design language: Blush Glass (dark). See coquet-web-design-guide-dark.md.
   Layers: haze (page) · glass (quiet surfaces) · solid (content) · ink (primary action)
   ========================================================================= */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens (Blush Glass) ----------
   Light is the brand default (coquet-web-design-guide-light.md); dark is the
   optional theme (coquet-web-design-guide-dark.md). An inline script in <head>
   always sets data-theme on <html> (saved choice, else the system setting), so
   both themes are keyed off that attribute. Only token values change. */
/* Prompt Medium, only for the top-bar logo (Latin is all "Coquet" needs) */
@font-face { font-family: "Prompt"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/prompt-500-latin.woff2") format("woff2"); }
:root {
  --r-xs: 12px; --r-sm: 16px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-full: 9999px;

  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --blur-haze: 60px;
  --blur-glass: 20px;

  --gutter: clamp(20px, 4vw, 48px);
  --sec-y: clamp(40px, 5vw, 72px);
  --hdr-h: 64px;

  --ease: cubic-bezier(.2, .8, .2, 1);

  /* type and layout of the original header (kept in both themes) */
  --bg-deep: #0B0509;
}

/* ── Light (default) ── */
:root {
  --c-bg:              #FCEAED;
  --haze-cool:         251, 242, 245;   --haze-cool-a: .9;
  --haze-accent:       255, 216, 225;   --haze-accent-a: .7;   --haze-accent-vivid: .95;
  --haze-warm:         253, 224, 226;   --haze-warm-a: .6;     --haze-warm-vivid: .9;
  --haze-wash:         #FBF2F5;
  --haze-veil:         rgba(255, 255, 255, .12);

  --c-glass-fill:      rgba(255, 255, 255, 0.42);
  --c-glass-stroke:    rgba(255, 255, 255, 0.75);
  --c-glass-tint:      rgba(20, 14, 17, 0.28);     /* glass over photos and video */
  --c-glass-strong:    rgba(255, 255, 255, 0.78);
  --glass-filter:      blur(var(--blur-glass)) saturate(140%);
  --c-solid:           #FFFFFF;
  --c-solid-muted:     #F9EEEF;
  --c-ink:             #1E1A1C;
  --c-on-ink:          #FFFFFF;
  --c-hairline:        rgba(30, 26, 28, 0.08);
  --c-card-edge:       transparent;                /* light cards: shadow, no border */
  --c-highlight:       var(--c-ink);
  --c-on-highlight:    #FFFFFF;
  --c-control:         var(--c-solid-muted);       /* fields, toggles and chips that sit on white cards */
  --c-control-stroke:  var(--c-hairline);
  --c-chip-next:       var(--c-solid-muted);
  --c-stroke-hover:    rgba(30, 26, 28, 0.2);
  --c-track:           rgba(0, 0, 0, 0.06);
  --c-strike:          rgba(30, 26, 28, 0.3);
  --c-menu-bg:         rgba(252, 234, 237, 0.97);

  --c-text:            #1D181B;
  --c-text-secondary:  #60565A;
  --c-text-tertiary:   #60565A;
  --c-text-muted:      #897F83;

  --c-accent:          #F7628A;
  --c-accent-pressed:  #EC4E79;
  --c-accent-tint:     rgba(255, 212, 222, 0.46);
  --c-accent-glow:     rgba(247, 98, 138, 0.25);
  --c-on-accent:       #FFFFFF;
  --c-selection:       rgba(247, 98, 138, .25);
  /* pink is ~3:1 on white, so text links are ink with a pink underline */
  --c-link:            var(--c-text);
  --c-link-hover:      var(--c-accent-pressed);
  --c-link-line:       var(--c-accent);
  --link-deco:         underline;

  --c-success:         #3CBF88;
  --c-success-bg:      #E4FFF2;
  --c-success-line:    rgba(60, 191, 136, .35);
  --c-warning:         #D7A11D;
  --c-error:           #E5604D;
  --c-error-bg:        #FFE6E2;
  --c-info:            #32BFD1;

  --shadow-card:       0 12px 28px rgba(58, 34, 40, 0.07);
  --shadow-phone:      0 36px 70px rgba(58, 34, 40, .22), 0 12px 24px rgba(58, 34, 40, .1);
  --fallback-strong:   rgba(255, 255, 255, .96);

  /* original header, recoloured for light */
  --ink-72: rgba(29, 24, 27, .74);
  --ink-60: rgba(29, 24, 27, .64);
  --ink-50: rgba(29, 24, 27, .56);
  --line:   rgba(30, 26, 28, .1);
  --line-3: rgba(30, 26, 28, .2);
  --pink:   #F7628A;
  --hdr-fg: #1D181B;
  --hdr-scrolled: rgba(255, 255, 255, .78);
  --hdr-ghost-line: rgba(30, 26, 28, .3);
  --hdr-ghost-hover: rgba(30, 26, 28, .04);
  --lang-on: rgba(30, 26, 28, .08);
  --hero-shade: linear-gradient(180deg, rgba(252,234,237,.45) 0%, rgba(252,234,237,0) 30%, rgba(30,26,28,0) 65%, rgba(30,26,28,.28) 100%);

  color-scheme: light;
}

/* ── Dark ── */
:root[data-theme="dark"] {
  --c-bg:              #160A0D;
  --haze-cool:         22, 14, 18;      --haze-cool-a: .5;
  --haze-accent:       79, 38, 48;      --haze-accent-a: .5;   --haze-accent-vivid: .7;
  --haze-warm:         56, 32, 38;      --haze-warm-a: .4;     --haze-warm-vivid: .4;
  --haze-wash:         #160E12;
  --haze-veil:         rgba(10, 7, 9, .28);

  --c-glass-fill:      rgba(255, 255, 255, 0.06);
  --c-glass-stroke:    rgba(255, 255, 255, 0.12);
  --c-glass-tint:      rgba(20, 14, 17, 0.28);
  --c-glass-strong:    rgba(24, 16, 20, 0.82);
  --glass-filter:      blur(var(--blur-glass)) brightness(.85);
  --c-solid:           #191114;
  --c-solid-muted:     #1E1519;
  --c-ink:             #F7F2F3;
  --c-on-ink:          #1E1A1C;
  --c-hairline:        rgba(255, 255, 255, 0.08);
  --c-card-edge:       rgba(255, 255, 255, 0.08);
  --c-highlight:       #1E1519;
  --c-on-highlight:    #FBFBFC;
  --c-control:         rgba(255, 255, 255, 0.06);
  --c-control-stroke:  rgba(255, 255, 255, 0.12);
  --c-chip-next:       rgba(255, 255, 255, 0.08);
  --c-stroke-hover:    rgba(255, 255, 255, 0.24);
  --c-track:           rgba(255, 255, 255, 0.08);
  --c-strike:          rgba(255, 255, 255, 0.3);
  --c-menu-bg:         rgba(22, 10, 13, 0.96);

  --c-text:            #FBFBFC;
  --c-text-secondary:  #DFE2E8;
  --c-text-tertiary:   rgba(255, 255, 255, 0.62);
  --c-text-muted:      #BCC1CA;

  --c-accent:          #FF809D;
  --c-accent-pressed:  #FF94AD;
  --c-accent-tint:     rgba(255, 128, 157, 0.14);
  --c-accent-glow:     rgba(255, 128, 157, 0.23);
  --c-on-accent:       #1E1A1C;
  --c-selection:       rgba(255, 128, 157, .35);
  --c-link:            var(--c-accent);
  --c-link-hover:      var(--c-accent-pressed);
  --c-link-line:       rgba(255, 128, 157, .4);
  --link-deco:         none;

  --c-success:         #61E0A3;
  --c-success-bg:      #0F2B1F;
  --c-success-line:    rgba(97, 224, 163, .25);
  --c-warning:         #F6C057;
  --c-error:           #FF896E;
  --c-error-bg:        #3A1513;
  --c-info:            #57D0E6;

  --shadow-card:       0 12px 28px rgba(0, 0, 0, 0.07);
  --shadow-phone:      0 40px 80px rgba(10, 7, 9, .55), 0 14px 28px rgba(10, 7, 9, .3);
  --fallback-strong:   rgba(24, 16, 20, .97);

  /* original header, exactly as before */
  --ink-72: rgba(242,231,228,.72);
  --ink-60: rgba(242,231,228,.6);
  --ink-50: rgba(242,231,228,.5);
  --line:   rgba(242,231,228,.14);
  --line-3: rgba(242,231,228,.26);
  --pink:   #E83C78;
  --hdr-fg: #fff;
  --hdr-scrolled: rgba(14,10,12,.72);
  --hdr-ghost-line: rgba(242,231,228,.38);
  --hdr-ghost-hover: rgba(242,231,228,.06);
  --lang-on: rgba(242,231,228,.14);
  --hero-shade: linear-gradient(180deg, rgba(22,10,13,.5) 0%, rgba(22,10,13,0) 30%, rgba(22,10,13,.15) 60%, rgba(22,10,13,.92) 100%);

  color-scheme: dark;
}

/* the hero video's overlays always sit on dark footage */
.hero__media { --ink-72: rgba(242,231,228,.72); --ink-60: rgba(242,231,228,.6); }

/* cross-fade colours when the visitor switches theme (not on load) */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, fill .2s ease !important;
}

.hdr, .menu, .doc-back { --ease: cubic-bezier(.16, 1, .3, 1); --gutter: clamp(20px, 4vw, 44px); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font: 400 16px/1.5 var(--font-body); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: var(--c-link); text-decoration: none; transition: color .2s, opacity .15s; }
a:hover { color: var(--c-link-hover); }
button { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
em { font-style: italic; }
::selection { background: var(--c-selection); color: var(--c-text); }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.tnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.pink { color: var(--c-accent); }
.w { color: var(--c-text) !important; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: var(--r-full); background: var(--c-ink); color: var(--c-on-ink); font-weight: 600; transition: top .2s; }
.skip:focus, .skip:hover { top: 12px; color: var(--c-on-ink); }

.wrap { max-width: calc(1200px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--md { max-width: calc(1000px + 2 * var(--gutter)); }
.wrap--sm { max-width: calc(760px + 2 * var(--gutter)); }

/* ---------- Haze: one fixed atmosphere behind every page ---------- */
.haze { position: fixed; inset: 0; z-index: -1; background: var(--c-bg); overflow: hidden; pointer-events: none; }
.haze::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(40% 45% at 15% 5%,   rgba(var(--haze-cool), var(--haze-cool-a)), transparent 70%),
    radial-gradient(35% 45% at 100% 35%, rgba(var(--haze-accent), var(--haze-accent-a)), transparent 70%),
    radial-gradient(45% 35% at 10% 100%, rgba(var(--haze-warm), var(--haze-warm-a)), transparent 70%),
    linear-gradient(135deg, var(--haze-wash) 0%, rgba(var(--haze-cool), 0) 60%);
  filter: blur(var(--blur-haze));
}
.haze::after { content: ""; position: absolute; inset: 0; background: var(--haze-veil); }
.haze--vivid { --haze-accent-a: var(--haze-accent-vivid); --haze-warm-a: var(--haze-warm-vivid); }

/* scroll progress */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--c-accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- Surfaces ---------- */
.glass {
  background: var(--c-glass-fill); border: 1px solid var(--c-glass-stroke);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
}
.card {
  padding: 20px; border-radius: var(--r-md);
  background: var(--c-solid); border: 1px solid var(--c-card-edge);
}
@media (min-width: 900px) { .card { padding: 28px; } }
.card--sm { padding: 20px; }
@media (min-width: 900px) { .card--sm { padding: 24px; } }
.card--sm p { font-size: 14px; line-height: 20px; color: var(--c-text-secondary); margin-top: 8px; }
.card--glass {
  background: var(--c-glass-fill); border-color: var(--c-glass-stroke); box-shadow: none;
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
}
.card--pastel { background: var(--c-accent-tint); border-color: var(--c-glass-stroke); box-shadow: none; }
.card--highlight {
  background: var(--c-highlight); color: var(--c-on-highlight); border-color: transparent; border-radius: var(--r-lg);
  /* text inside the highlight card is light in both themes */
  --c-text: var(--c-on-highlight);
  --c-text-secondary: rgba(255, 255, 255, .62);
  --c-text-tertiary: rgba(255, 255, 255, .62);
  --c-text-muted: rgba(255, 255, 255, .4);
  --c-hairline: rgba(255, 255, 255, .14);
  --c-strike: rgba(255, 255, 255, .3);
}

/* open blocks: card markup that reads better as ruled text on the page */
.grid4 .card, .stats .card, .vs .card, .call.card {
  padding: 20px 0 0; border: 0; border-top: 1px solid var(--c-hairline); border-radius: 0;
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---------- Type ---------- */
.h2 {
  font: 400 clamp(32px, 3vw, 46px)/1.1 var(--font-display); letter-spacing: -.01em; color: var(--c-text);
  text-wrap: balance;
}
.h2--xl { font-size: clamp(36px, 3.8vw, 54px); line-height: 1.08; }
.h2--sm { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; margin-bottom: 28px; }
.lede { font-size: 18px; line-height: 28px; color: var(--c-text-secondary); margin-top: 20px; max-width: 560px; text-wrap: pretty; }
.lede.center { margin-inline: auto; }
.label { font: 500 12px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-tertiary); }
.label--pink { color: var(--c-accent); font-weight: 600; }
.label--dim { color: var(--c-text-tertiary); }
.muted-sm { font-size: 12px; line-height: 16px; color: var(--c-text-muted); }
/* titles inside cards read as titles, not kickers */
h3.label, .path__head .label { font-size: 16px; font-weight: 600; line-height: 22px; letter-spacing: 0; text-transform: none; color: var(--c-text); }
h3.label--dim { color: var(--c-text-tertiary); }

/* ---------- Buttons: always pills ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; min-width: 112px; padding: 12px 24px; border-radius: var(--r-full); border: 1px solid transparent; cursor: pointer;
  font: 600 16px/1.2 var(--font-body); letter-spacing: 0; white-space: nowrap; text-align: center;
  color: var(--c-text); background: transparent; -webkit-tap-highlight-color: transparent;
  transition: opacity .15s ease, transform .15s ease, background-color .2s, color .2s, border-color .2s;
}
.btn:hover { opacity: .9; }
.btn:active { opacity: .7; transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary, .btn--primary:hover { background: var(--c-ink); color: var(--c-on-ink); border-color: var(--c-ink); }
.btn--secondary, .btn--secondary:hover { background: var(--c-solid); color: var(--c-text); border-color: var(--c-hairline); }
.btn--ghost, .btn--ghost:hover {
  background: var(--c-glass-fill); color: var(--c-text); border-color: var(--c-glass-stroke);
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
}
/* exception: only inside the highlight card */
.btn--accent, .btn--accent:hover { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.btn--sm { min-height: 44px; min-width: 0; padding: 0 18px; font-size: 15px; gap: 0; }
.btn--lg { padding-inline: 28px; }
.btn--xl { padding-inline: 32px; }
.btn--block { width: 100%; }
.btn__label { position: relative; }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] .btn__label { opacity: 0; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite; }
.ulink { color: var(--c-link); font-weight: 600; text-decoration-line: var(--link-deco); text-decoration-color: var(--c-link-line); text-underline-offset: 3px; }
.ulink::after { content: " ›"; }

.pill {
  display: inline-flex;
  font: 500 12px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-secondary);
}

/* round glass icon button */
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--c-glass-fill); border: 1px solid var(--c-glass-stroke); color: var(--c-text);
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 var(--gutter); padding-top: env(safe-area-inset-top);
  height: calc(var(--hdr-h) + env(safe-area-inset-top));
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s, transform .45s var(--ease), backdrop-filter .35s;
}
.hdr.is-scrolled { background: var(--hdr-scrolled); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-color: var(--line); }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__nav { display: none; gap: 26px; justify-self: start; }
.hdr__nav a, .hdr__tag { font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--ink-60); }
.hdr__nav a { position: relative; padding: 6px 0; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--pink); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.hdr__nav a:hover { color: var(--hdr-fg); }
.hdr__nav a:hover::after, .hdr__nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.hdr__nav a.is-active { color: var(--hdr-fg); }
.hdr__logo {
  justify-self: center; font: 500 clamp(17px, 1.8vw, 20px)/1 "Prompt", var(--font-body); color: var(--hdr-fg);
  letter-spacing: .28em; text-indent: .28em; text-transform: uppercase;
}
.hdr__logo:hover { color: var(--hdr-fg); }
.hdr__end { display: flex; gap: 18px; align-items: center; justify-content: flex-end; }
.hdr__tag { display: none; color: var(--ink-50); }
.hdr__burger { width: 44px; height: 44px; margin-left: -10px; border: 0; background: none; cursor: pointer; position: relative; z-index: 2; -webkit-tap-highlight-color: transparent; }
.hdr__burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--hdr-fg); border-radius: 2px; transition: transform .45s var(--ease), top .45s var(--ease); }
.hdr__burger span:first-child { top: 17px; }
.hdr__burger span:last-child { top: 25px; right: 17px; }
.hdr__burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:last-child { top: 21px; right: 11px; transform: rotate(-45deg); }
.hide-sm { display: none; }
@media (min-width: 560px) { .hide-sm { display: inline; } }
@media (min-width: 960px) {
  .hdr__burger { display: none; }
  .hdr__nav { display: flex; }
}
@media (min-width: 1240px) { .hdr__tag { display: inline; } }

/* language switch */
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-3); }
.lang a { display: grid; place-items: center; min-width: 30px; height: 28px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--ink-60); transition: background .25s, color .25s; }
.lang a:hover { color: var(--hdr-fg); }
.lang a[aria-current="page"] { background: var(--lang-on); color: var(--hdr-fg); }
.lang--menu { justify-self: center; }
.lang--menu a { height: 34px; padding: 0 16px; font-size: 14px; letter-spacing: 0; }
.hdr .lang { display: none; }
.hdr__start { justify-self: start; display: flex; align-items: center; gap: 2px; }
/* Discord shortcut to the community page, first item in the header */
.hdr__dc { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -6px; border-radius: 50%; color: var(--hdr-fg); transition: background .25s, color .25s; }
.hdr__dc:hover { background: var(--c-discord); color: #fff; }
.hdr__dc .dc-i { width: 20px; height: 20px; }
.hdr__nav .hdr__dc { padding: 0; margin-right: -8px; color: var(--hdr-fg); }
.hdr__nav .hdr__dc:hover { color: #fff; }
.hdr__nav .hdr__dc::after { content: none; }
.lang-mini { display: grid; place-items: center; height: 30px; min-width: 34px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-3); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--ink-72); }
.lang-mini:hover { color: var(--hdr-fg); border-color: var(--hdr-fg); }
@media (min-width: 960px) { .hdr__start { display: none; } .hdr .lang { display: inline-flex; } .hdr__end { gap: 16px; } }
.hdr .btn {
  min-height: 0; min-width: 0; height: 36px; padding: 0 16px; gap: 8px; overflow: hidden;
  font: 600 14px/1 var(--font-body); letter-spacing: 0; white-space: nowrap;
  color: var(--hdr-fg); background: transparent; border-color: var(--hdr-ghost-line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform .25s var(--ease), background .25s, border-color .25s, color .25s;
}
.hdr .btn:hover { opacity: 1; color: var(--hdr-fg); transform: translateY(-2px); border-color: var(--hdr-fg); background: var(--hdr-ghost-hover); }
.hdr .btn:active { opacity: 1; transform: translateY(0) scale(.98); }

/* light / dark switch, top-right corner */
.theme-btn {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-3); background: transparent; color: var(--ink-72); cursor: pointer;
  transition: color .25s, border-color .25s, transform .25s var(--ease); -webkit-tap-highlight-color: transparent;
}
.theme-btn:hover { color: var(--hdr-fg); border-color: var(--hdr-fg); }
.theme-btn:active { transform: scale(.94); }
.theme-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .i-sun, :root[data-theme="dark"] .theme-btn .i-moon { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
/* phones: the header CTA makes room for the switch (the bottom dock and hero form carry the CTA) */
@media (max-width: 419px) { .hdr__cta { display: none; } }

/* "prefer the other language?" prompt */
.langtip {
  position: fixed; z-index: 48; left: 50%; top: calc(var(--hdr-h) + env(safe-area-inset-top) + 10px);
  display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 24px);
  padding: 4px 4px 4px 18px; border-radius: var(--r-full);
  background: var(--c-glass-strong); border: 1px solid var(--c-glass-stroke);
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
  opacity: 0; transform: translate(-50%, -8px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.langtip.is-on { opacity: 1; transform: translate(-50%, 0); }
.langtip a { font-size: 14px; color: var(--c-text-secondary); white-space: nowrap; }
.langtip a b { font-weight: 600; color: var(--c-link); margin-left: 4px; }
.langtip button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--c-text-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.langtip button:hover { color: var(--c-text); background: var(--c-glass-fill); }

/* mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--hdr-h) + env(safe-area-inset-top) + 24px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background: var(--c-menu-bg);
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
  display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-hairline);
  font: 400 clamp(32px, 9vw, 44px)/1.1 var(--font-display); letter-spacing: -.01em; color: var(--c-text);
  opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.menu__nav a span { font: 500 13px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--c-text-tertiary); width: 28px; flex: none; }
.menu.is-open .menu__nav a { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 60ms + 60ms); }
.menu__foot { display: grid; gap: 14px; opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease) .3s, transform .35s var(--ease) .3s; }
.menu.is-open .menu__foot { opacity: 1; transform: none; }
.menu__foot .lang { margin: 2px auto 0; }
.menu__foot p { font-size: 12px; line-height: 16px; color: var(--c-text-muted); text-align: center; }

/* ---------- Hero ---------- */
.hero { position: relative; display: grid; padding-top: calc(var(--hdr-h) + env(safe-area-inset-top)); }
.hero__left { display: contents; }
.hero__intro { order: 1; padding: 32px var(--gutter) 28px; }
.hero__media { order: 2; position: relative; overflow: hidden; background: var(--bg-deep); height: min(128vw, 660px); }
.hero__card { order: 3; margin: -64px var(--gutter) 0; position: relative; z-index: 3; border-radius: var(--r-lg); }
.hero__title {
  font: 400 clamp(44px, 5.4vw, 80px)/1.04 var(--font-display); letter-spacing: -.01em; color: var(--c-text); margin-top: 24px;
}
.hero__title span { display: block; }
.hero__lede { font-size: 18px; line-height: 28px; color: var(--c-text-secondary); margin-top: 20px; max-width: 460px; }

.hero__card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero__card-title { font: 400 clamp(28px, 2.4vw, 36px)/1.13 var(--font-display); letter-spacing: -.01em; color: var(--c-text); }
.live {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; line-height: 16px; color: var(--c-text); font-variant-numeric: tabular-nums;
}
.dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); animation: vxpulse 2.4s ease-in-out infinite; }
.hero__card-copy { font-size: 14px; line-height: 20px; color: var(--c-text-secondary); margin: 12px 0 20px; max-width: 480px; }
.hero__recent { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--c-text-muted); min-height: 18px; }
.hero__recent [data-recent] { transition: opacity .3s, transform .3s var(--ease); }
.hero__recent [data-recent].is-swap { opacity: 0; transform: translateY(4px); }
.hero__stores { display: flex; align-items: center; gap: 12px 18px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--c-hairline); flex-wrap: wrap; }
.hero__stores > span { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--c-text-tertiary); }
.hero__stores svg { width: 14px; height: 14px; color: var(--c-text); }
.hero__stores .ulink { margin-left: auto; font-size: 14px; }

.hero__media-inner { position: absolute; inset: -8% 0; will-change: translate; }
.hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; background: var(--hero-shade); }
.hero__orbits { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__orbits ellipse { fill: none; stroke-width: .22; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; stroke-width: 1; }
.hero__orbits .o1 { stroke: rgba(232,60,120,.55); animation: vxorbitrev 6s linear infinite; }
.hero__orbits .o2 { stroke: rgba(242,231,228,.36); animation: vxorbit 8.5s linear infinite; }
.hero__orbits .o3 { stroke: rgba(172,75,205,.55); animation: vxorbitrev 7.5s linear infinite; }
.hero__tags { position: absolute; inset: 0; pointer-events: none; }
.tag {
  position: absolute; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  background: rgba(22,10,13,.72); border: 1px solid rgba(242,231,228,.34);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: clamp(12px, 1.4vw, 16px); line-height: 1.3; color: #fff;
  opacity: 0; animation: vxtag 9s ease-in-out var(--d, 0s) infinite;
}
.tag--pink { border-color: rgba(232,60,120,.55); }
.tag--violet { border-color: rgba(172,75,205,.6); }
.hero__hud { text-shadow: 0 1px 6px rgba(22,10,13,.45); position: absolute; left: clamp(16px, 3vw, 30px); right: clamp(16px, 3vw, 30px); bottom: 92px; pointer-events: none; }
.hero__hud-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; font-size: clamp(12px, 1.4vw, 14px); color: var(--ink-72); }
.hero__move { font-weight: 500; color: #fff; }
.hero__move i { font-style: normal; font-weight: 400; color: var(--ink-60); }
.hero__move [data-move], .hero__move [data-score] { display: inline-block; transition: opacity .35s, transform .35s var(--ease); }
.hero__move.is-swap [data-move], .hero__move.is-swap [data-score] { opacity: 0; transform: translateY(-5px); }
.hero__bar { position: relative; height: 4px; border-radius: 999px; background: rgba(242,231,228,.24); }
.hero__bar-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--pink); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 12px rgba(232,60,120,.6); }
.tick { position: absolute; top: -4px; width: 2px; height: 12px; background: rgba(242,231,228,.75); border-radius: 1px; }
.hero__phases { display: flex; gap: clamp(14px, 2vw, 26px); margin-top: 12px; font-size: clamp(11px, 1.3vw, 13px); color: var(--ink-60); }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(100vh, 980px); }
  .hero__left { display: flex; flex-direction: column; justify-content: space-between; gap: 44px; padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 44px) clamp(36px, 4vw, 56px); border-right: 1px solid var(--line); }
  .hero__intro { padding: 0; }
  .hero__card { margin: 0; padding: 28px 32px; }
  .hero__media { height: auto; }
  .hero__hud { bottom: clamp(18px, 3vw, 34px); }
  .hero__title { font-size: clamp(44px, min(5.4vw, 9vh), 80px); margin-top: clamp(16px, 2.6vh, 28px); }
  .hero__lede { margin-top: clamp(14px, 2.2vh, 20px); }
}
@media (min-width: 900px) and (max-height: 940px) {
  .hero__left { gap: 28px; padding-top: 32px; padding-bottom: 28px; }
  .hero__card { padding: 22px 28px; }
  .hero__card-copy { margin: 8px 0 16px; }
  .hero__stores { margin-top: 14px; }
}
/* large external monitors (wider than any MacBook): bigger headline, card stops stretching */
@media (min-width: 1800px) {
  .hero__title { font-size: clamp(80px, min(5.2vw, 11vh), 116px); }
  .hero__lede { font-size: 21px; line-height: 32px; max-width: 540px; }
  .hero__card { max-width: 800px; padding: 36px 40px; }
  .hero__card-title { font-size: 42px; }
  .hero__card-copy { font-size: 16px; line-height: 24px; max-width: 560px; }
}

/* ---------- Inputs ---------- */
.wl__row { display: flex; gap: 10px; flex-wrap: wrap; }
.wl__field { position: relative; flex: 1 1 200px; min-width: 0; }
.wl input[type="email"], .survey input[type="email"] {
  width: 100%; height: 54px; padding: 12px 20px; border-radius: var(--r-full);
  border: 1px solid var(--c-control-stroke); background: var(--c-control); color: var(--c-text);
  font: 400 16px/1 var(--font-body); outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .2s;
}
.wl input::placeholder, .survey input::placeholder, .survey textarea::placeholder { color: var(--c-text-muted); opacity: 1; }
.wl input:focus, .survey input:focus, .survey textarea:focus { border-color: var(--c-ink); }
.wl input[aria-invalid="true"], .survey input[aria-invalid="true"] { border-color: var(--c-error); animation: shake .4s; }
.wl input:-webkit-autofill, .survey input:-webkit-autofill { -webkit-text-fill-color: var(--c-text); -webkit-box-shadow: 0 0 0 40px var(--c-solid-muted) inset; caret-color: var(--c-text); }
.wl__caret { position: absolute; left: 20px; top: 50%; width: 1px; height: 20px; margin-top: -10px; background: var(--c-accent); animation: vxcaret 1.1s step-end infinite; pointer-events: none; }
.wl__field:focus-within .wl__caret, .wl.has-value .wl__caret { display: none; }
.wl .btn { flex: 1 1 auto; }
.wl__msg { font-size: 14px; line-height: 20px; color: var(--c-error); }
.wl__msg:not(:empty) { margin-top: 10px; }
.wl__done {
  display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-radius: var(--r-md);
  background: var(--c-success-bg); border: 1px solid var(--c-success-line); color: var(--c-success);
  font-size: 15px; font-weight: 600; line-height: 1.4;
  animation: pop .35s var(--ease);
}
.wl--center { max-width: 560px; margin: 0 auto; }
.wl--center .wl__done { justify-content: center; display: inline-flex; }
.wl.is-done .wl__row { display: none; }
@media (min-width: 480px) { .wl .btn { flex: none; } }
@media (min-width: 900px) { .wl__row { flex-wrap: nowrap; } }

/* ---------- Rail ---------- */
.rail { overflow: hidden; padding: 16px 0; border-block: 1px solid var(--c-hairline); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rail__track { display: flex; width: max-content; animation: vxrail 48s linear infinite; }
.rail__set { display: flex; align-items: center; gap: 32px; padding-right: 32px; }
.rail span { font-size: 14px; font-weight: 500; color: var(--c-text-tertiary); white-space: nowrap; }
.rail i { font-style: normal; color: var(--c-accent); font-size: 7px; }

/* ---------- Sections ---------- */
.sec { position: relative; padding: var(--sec-y) 0; }
.eyebrow { display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--c-hairline); }
.eyebrow__n { font: 600 12px/16px var(--font-body); font-variant-numeric: tabular-nums; color: var(--c-accent); }
.eyebrow__t { font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-tertiary); }
.eyebrow__r { margin-left: auto; font-size: 12px; line-height: 16px; color: var(--c-text-muted); }
@media (max-width: 599px) { .eyebrow__r { margin-left: 0; flex-basis: 100%; } }
.split { display: grid; gap: clamp(40px, 5vw, 64px); margin-top: clamp(32px, 4vw, 48px); align-items: center; }
.split--start { align-items: start; }
.split > *, .plans > *, .vs > *, .stats > *, .grid4 > * { min-width: 0; }
.wrap.split { margin-top: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split:has(> .phones) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

/* library */
.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin-top: 32px; border-top: 1px solid var(--c-hairline); }
@media (min-width: 600px) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cats li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--c-hairline); }
.cats span { font-size: 16px; font-weight: 500; line-height: 22px; color: var(--c-text); }
.cats b { font-weight: 500; font-size: 12px; color: var(--c-text-tertiary); font-variant-numeric: tabular-nums; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chips li {
  font-size: 14px; font-weight: 500; line-height: 20px; color: var(--c-text-secondary);
}
.chips { gap: 4px 0; }
.chips li:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--c-text-muted); }
.chips li.is-on { color: var(--c-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* phones */
.phones { display: flex; justify-content: center; }
.phone { container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(350px, 54%); perspective: 900px; }
.phones--one .phone { width: min(360px, 76vw); }
.phone--offset { position: relative; z-index: 1; margin-left: -8%; margin-top: clamp(40px, 8vw, 88px); }

/* iPhone 16 Pro, drawn in CSS. Every size is a % of the phone's width (cqw),
   taken from the real device: 71.5 mm body, 402 x 874 pt screen,
   62 pt display corners, 125 x 37 pt Dynamic Island 11 pt from the top.
   The screen opening has the screenshots' exact 1206 x 2622 ratio,
   so nothing is cropped. */
.phone__frame {
  position: relative; width: 100%;
  --rim: 1.5cqw; --bezel: 2cqw;
  padding: var(--bezel); border: var(--rim) solid transparent; border-radius: 17.8cqw;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(140deg, #4a4643 0%, #1f1d1c 18%, #353230 42%, #141312 62%, #3c3936 82%, #191817 100%) border-box;
  box-shadow: var(--shadow-phone), inset 0 0 0 1px rgba(255,255,255,.05);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); will-change: transform, translate;
}
/* side buttons: Action + volume (left), side button + Camera Control (right) */
.phone__frame::before, .phone__frame::after { content: ""; position: absolute; width: .8cqw; border-radius: .4cqw; }
.phone__frame::before {
  left: calc(-1 * var(--rim) - .7cqw); top: 20%; height: 28.5%;
  background: linear-gradient(to bottom, #2b2927 0 15.8%, transparent 15.8% 35.1%, #2b2927 35.1% 63.2%, transparent 63.2% 71.9%, #2b2927 71.9% 100%);
}
.phone__frame::after {
  right: calc(-1 * var(--rim) - .7cqw); top: 30%; height: 36%;
  background: linear-gradient(to bottom, #2b2927 0 38.9%, transparent 38.9% 77.8%, #232120 77.8% 100%);
}
.phone__screen { position: relative; border-radius: 14.3cqw; overflow: hidden; aspect-ratio: 1206 / 2622; background: #000; transform: translateZ(0); }
.phone__screen img { width: 100%; height: 100%; object-fit: cover; }
/* each phone carries both app themes; show the one matching the site */
.phone__screen .shot--dark, :root[data-theme="dark"] .phone__screen .shot--light { display: none; }
:root[data-theme="dark"] .phone__screen .shot--dark { display: block; }
.phone__screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 32%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.phone__island { position: absolute; z-index: 1; left: 50%; top: 2.55cqw; width: 28.9cqw; height: 8.56cqw; transform: translateX(-50%); border-radius: 999px; background: #000; }
.phone__island::after { content: ""; position: absolute; right: 2.6cqw; top: 50%; width: 2.6cqw; height: 2.6cqw; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a2f45 0 30%, #0b0c12 60%); }
.phone figcaption { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--c-text-tertiary); text-align: center; }

/* combos: one combo, move by move. The steps climb like the combo climbs the pole. */
.reel-intro { display: grid; gap: 0 clamp(40px, 5vw, 64px); margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 900px) {
  .reel-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; }
  .reel-intro .lede { margin-top: 0; }
}
.reel { --stair: clamp(28px, 5vw, 72px); --step-w: 300px; margin-top: clamp(40px, 5vw, 64px); }
.reel__stage { position: relative; }
.reel__track { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, var(--step-w))); justify-content: space-between; align-items: start; gap: 16px; }
.reel__step { position: relative; z-index: 1; }
.reel__step:nth-child(1) { margin-top: calc(var(--stair) * 2); }
.reel__step:nth-child(2) { margin-top: var(--stair); }
.reel__photo {
  position: relative; aspect-ratio: 2 / 3; border-radius: var(--r-lg); overflow: hidden;
  background: var(--c-solid-muted); box-shadow: var(--shadow-card); transition: box-shadow .5s var(--ease);
}
.reel__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .5s var(--ease), filter .5s var(--ease), transform 2s cubic-bezier(.2, .6, .2, 1);
}
.reel__n {
  position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 600 13px/1 var(--font-body); font-variant-numeric: tabular-nums; color: #fff;
  background: var(--c-accent); border: 1px solid transparent; transition: background-color .5s, border-color .5s;
}
.reel__cap { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 8px; margin-top: 14px; }
.reel__cap b { font: 400 clamp(22px, 2vw, 28px)/1.1 var(--font-display); color: var(--c-text); }
.reel__kind { font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-tertiary); }
.reel__how { grid-column: 1 / -1; font-size: 15px; line-height: 22px; color: var(--c-text-secondary); transition: color .5s; }
.reel.is-playing .reel__step.is-active .reel__how { color: var(--c-text); }
.reel__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--c-hairline); font-size: 13px; font-weight: 500; line-height: 18px; color: var(--c-text-tertiary); }
.reel__meta span:first-child { color: var(--c-text); }
.reel__soon { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--c-text); }
.reel__soon i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); animation: vxpulse 2s ease-in-out infinite; }
@media (max-width: 599px) { .reel__soon { margin-left: 0; flex-basis: 100%; } }
/* the thread between the moves, drawn behind the photos */
.reel__svg { position: absolute; left: 0; top: 0; z-index: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.reel__base, .reel__line { fill: none; stroke-linecap: round; }
.reel__base { stroke: var(--c-accent); stroke-opacity: .35; stroke-width: 1.5; stroke-dasharray: 1 7; }
.reel__line { stroke: var(--c-accent); stroke-width: 2; transition: opacity .5s var(--ease); }
.reel__dot { fill: var(--c-accent); opacity: 0; filter: drop-shadow(0 0 6px var(--c-accent)); transition: opacity .5s var(--ease); }
/* while it plays: the current move is lit, the others rest */
.reel.is-playing .reel__dot { opacity: 1; }
.reel.is-playing .reel__step:not(.is-active) .reel__n { background: var(--c-glass-tint); border-color: rgba(255, 255, 255, .3); }
.reel.is-playing:not(.is-done) .reel__step:not(.is-active) img { opacity: .5; filter: saturate(.7); }
.reel.is-playing .reel__step.is-active img { transform: scale(1.05); }
.reel.is-playing .reel__step.is-active .reel__photo { box-shadow: 0 24px 56px var(--c-accent-glow), var(--shadow-card); }
.reel.is-done .reel__n { background: var(--c-accent) !important; border-color: transparent !important; }
.reel.is-reset .reel__line, .reel.is-reset .reel__dot { opacity: 0; }
/* phones: a swipeable strip that also advances on its own */
@media (max-width: 699px) {
  .reel { --stair: 24px; --step-w: 64vw; }
  .reel__stage {
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
    /* room for the lit photo's glow, which the scroller would otherwise clip */
    margin: -32px calc(-1 * var(--gutter)) -40px; padding: 32px var(--gutter) 40px;
  }
  .reel__stage::-webkit-scrollbar { display: none; }
  .reel__track { width: max-content; justify-content: start; gap: 14px; padding-right: var(--gutter); }
  .reel__step { scroll-snap-align: start; }
}

/* programs */
.rows { margin-top: 28px; border-top: 1px solid var(--c-hairline); }
.rows > div { display: grid; grid-template-columns: 128px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-hairline); }
.rows dt { font-size: 16px; font-weight: 600; line-height: 24px; color: var(--c-text); }
.rows dd { font-size: 16px; line-height: 24px; color: var(--c-text-secondary); }
@media (max-width: 420px) { .rows > div { grid-template-columns: 1fr; gap: 4px; } }
.path { display: grid; gap: 0; margin-top: 24px; }
.path__head { display: flex; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding-bottom: 8px; }
.path__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--c-hairline); font-size: 16px; line-height: 22px; color: var(--c-text); }
.path__row i { font-style: normal; color: var(--c-text-tertiary); }
.path__row b { font-weight: 400; font-size: 14px; color: var(--c-text-tertiary); white-space: nowrap; }
.path__row b.pink { font-size: 13px; font-weight: 600; color: var(--c-accent); }

/* road */
.road__img { position: relative; aspect-ratio: 1160 / 829; border-radius: var(--r-lg); overflow: hidden; background: var(--c-solid); }
.road__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.grid4 { display: grid; margin-top: 28px; counter-reset: g4; border-bottom: 1px solid var(--c-hairline); }
.grid4 .card { position: relative; padding: 16px 0 16px 40px; counter-increment: g4; }
.grid4 .card::before { content: "0" counter(g4); position: absolute; left: 0; top: 17px; font: 600 13px/22px var(--font-body); font-variant-numeric: tabular-nums; color: var(--c-accent); }
.grid4 .card p { margin-top: 4px; font-size: 15px; line-height: 22px; }
.seq {
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 24px; padding: 14px 0;
  border-block: 1px solid var(--c-hairline); font-size: 14px;
}
.seq .pink { font-size: 13px; color: var(--c-text-tertiary); }
.seq__t { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--c-text-tertiary); }

/* study */
.dash { counter-reset: dash; display: grid; gap: 0; margin-top: 24px; max-width: 560px; border-top: 1px solid var(--c-hairline); }
.dash li { position: relative; padding: 12px 0 12px 40px; border-bottom: 1px solid var(--c-hairline); font-size: 16px; line-height: 22px; color: var(--c-text-secondary); counter-increment: dash; }
.dash li::before { content: "0" counter(dash); position: absolute; left: 0; top: 12px; font: 600 13px/22px var(--font-body); font-variant-numeric: tabular-nums; color: var(--c-text-tertiary); }
.study { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-hairline); background: var(--c-solid); }
.study__stage { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; }
.study__stage video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.study__badge, .study__frame {
  position: absolute; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-full);
  background: var(--c-glass-tint); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(var(--blur-glass)) brightness(.85); backdrop-filter: blur(var(--blur-glass)) brightness(.85);
  font-size: 12px; font-weight: 600; line-height: 16px; color: #fff;
}
.study__badge { left: 14px; }
.study__frame { right: 14px; }
.study__ctrl { padding: 16px 16px 20px; display: grid; gap: 14px; border-top: 1px solid var(--c-hairline); }
.study__scrub { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; --v: 0%; }
.study__scrub::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--c-accent) var(--v), var(--c-track) var(--v)); }
.study__scrub::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--c-accent) var(--v), var(--c-track) var(--v)); }
.study__scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -6px; border-radius: 50%; background: var(--c-ink); border: 0; }
.study__scrub::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--c-ink); border: 0; }
.study__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ibtn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--c-text);
  background: var(--c-control); border: 1px solid var(--c-control-stroke);
  transition: opacity .15s, transform .15s; -webkit-tap-highlight-color: transparent;
}
.ibtn:hover { opacity: .9; }
.ibtn:active { opacity: .7; transform: scale(.98); }
.ibtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ibtn--main { width: 54px; height: 54px; background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-ink); }
.ibtn .i-pause, .ibtn.is-playing .i-play { display: none; }
.ibtn.is-playing .i-pause { display: block; }
/* segmented control: glass track, solid selected pill */
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-full); background: var(--c-control); border: 1px solid var(--c-control-stroke); margin-left: auto; }
.seg button, .tbtn { min-height: 38px; padding: 0 12px; border-radius: var(--r-full); border: 0; background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--c-text-muted); transition: background-color .2s, color .2s; }
.seg button[aria-checked="true"] { background: var(--c-solid); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-hairline); }
.tbtn { min-height: 44px; padding: 0 16px; background: var(--c-control); border: 1px solid var(--c-control-stroke); color: var(--c-text); }
.tbtn[aria-pressed="true"] { background: var(--c-ink); color: var(--c-on-ink); border-color: var(--c-ink); }
.study__loop { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .14); }
.study__loop::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--w); background: var(--c-accent); }
@media (max-width: 479px) { .seg { margin-left: 0; } .study__row { justify-content: center; } }
.vs { display: grid; gap: 28px 48px; margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 640px) { .vs { grid-template-columns: 1fr 1fr; } }
.vs__list { display: grid; margin-top: 8px; font-size: 16px; line-height: 22px; color: var(--c-text); }
.vs__list li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-hairline); }
.vs__list li:last-child { border-bottom: 0; }
.vs__list li::before { content: "✓"; color: var(--c-accent); }
.vs__list--dim { color: var(--c-text-muted); }
.vs__list--dim li::before { content: "✕"; color: var(--c-text-tertiary); }

/* track */
.stats { display: grid; gap: 28px 32px; margin-top: 32px; }
@media (min-width: 560px) { .stats { grid-template-columns: 1fr 1fr; } .stats > :last-child { grid-column: 1 / -1; } }
.stat { display: flex; flex-direction: column; gap: 14px; }
.stat p { margin: 0; font-size: 14px; line-height: 20px; color: var(--c-text-secondary); }
.stat__big { font: 400 30px/34px var(--font-display); letter-spacing: -.01em; color: var(--c-text); }
.stat__num { display: flex; align-items: baseline; gap: 10px; }
.stat__num b { font: 400 54px/1 var(--font-display); color: var(--c-text); font-variant-numeric: tabular-nums; }
.stat__num span { font-size: 14px; color: var(--c-text-tertiary); }
.streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.streak i { height: 26px; border-radius: 8px; background: var(--c-track); transform: scaleY(.3); opacity: 0; transition: transform .4s var(--ease), opacity .3s, background-color .3s; transition-delay: calc(var(--i, 0) * 60ms); }
.streak i.on { background: var(--c-accent); }
.streak i.today { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-accent); }
.streak.is-in i { transform: none; opacity: 1; }
.meter { height: 8px; border-radius: var(--r-full); background: var(--c-track); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c-accent); transition: width 1.2s var(--ease) .2s; }

/* pricing */
.toggle { position: relative; display: flex; width: max-content; max-width: 100%; gap: 4px; padding: 4px; margin: 40px auto 0; border-radius: var(--r-full); background: var(--c-solid); border: 1px solid var(--c-hairline); box-shadow: 0 6px 24px var(--c-accent-glow); }
.toggle button { position: relative; z-index: 1; min-height: 48px; padding: 0 22px; border-radius: var(--r-full); border: 0; background: transparent; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--c-text-muted); transition: color .2s; white-space: nowrap; }
.toggle button:hover { color: var(--c-text); }
.toggle button[aria-checked="true"] { color: var(--c-on-accent); }
.toggle__pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--r-full); background: var(--c-accent); transition: transform .35s var(--ease), width .35s var(--ease); }
@media (max-width: 380px) { .toggle button { padding: 0 14px; font-size: 14px; } }
.plans { display: grid; gap: 24px; margin-top: 40px; text-align: left; }
@media (min-width: 720px) { .plans { grid-template-columns: 1fr 1fr; gap: 16px; } }
.plan { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 32px); }
.plan .btn { margin-top: auto; }
.plan__top { display: flex; justify-content: space-between; align-items: center; align-self: stretch; }
.plan__price { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; font: 400 60px/1 var(--font-display); letter-spacing: -.01em; color: var(--c-text); font-variant-numeric: tabular-nums; }
.plan__price small { font: 400 14px/1 var(--font-body); letter-spacing: 0; color: var(--c-text-tertiary); }
.plan__price [data-price] { display: inline-block; transition: opacity .2s, transform .3s var(--ease); }
.plan__price.is-swap [data-price] { opacity: 0; transform: translateY(10px); }
.plan__note { font-size: 14px; line-height: 20px; color: var(--c-text-secondary); margin: 12px 0 20px; min-height: 40px; }
.plan__list { display: grid; align-self: stretch; font-size: 16px; line-height: 22px; margin-bottom: 28px; border-top: 1px solid var(--c-hairline); }
.plan__list li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-hairline); color: var(--c-text); }
.plan__list li::before { content: "—"; color: var(--c-text-tertiary); }
.plan__list--pink li::before { content: "✓"; color: var(--c-accent); }
.plan__list li.dim { color: var(--c-text-tertiary); text-decoration: line-through; text-decoration-color: var(--c-strike); }
.plan__list li.dim::before { color: inherit; }

/* survey */
.call { margin-top: 28px; }
.call__title { font: 400 28px/1.13 var(--font-display); letter-spacing: -.01em; color: var(--c-text); }
.call p { font-size: 14px; line-height: 20px; color: var(--c-text-secondary); margin: 8px 0 20px; }
.call .btn { max-width: 100%; white-space: normal; line-height: 1.3; }
.call .btn.is-on { background: var(--c-ink); color: var(--c-on-ink); border-color: var(--c-ink); }
.survey { border-radius: var(--r-lg); display: grid; gap: 24px; }
.q { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.q legend, .q__label { display: block; width: 100%; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--c-text); padding: 0; margin-bottom: 10px; float: left; }
.q label { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.q input[type="radio"], .q input[type="checkbox"] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.q label span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: var(--r-full);
  font-size: 14px; font-weight: 600; line-height: 20px; color: var(--c-text);
  background: var(--c-control); border: 1px solid var(--c-control-stroke);
  transition: background-color .2s, color .2s, border-color .2s, opacity .15s, transform .15s;
}
.q label:hover span { border-color: var(--c-stroke-hover); }
.q input:checked + span { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-ink); }
.q input:active + span { opacity: .7; transform: scale(.98); }
.q input:focus-visible + span { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.check span::before { content: ""; width: 16px; height: 16px; border-radius: 4px; border: 1px solid currentColor; }
.check input:checked + span::before { content: "✓"; display: grid; place-items: center; font-size: 11px; }
.survey textarea {
  width: 100%; min-height: 96px; padding: 12px 16px; border-radius: var(--r-xs);
  border: 1px solid var(--c-control-stroke); background: var(--c-control); color: var(--c-text);
  font: 400 16px/1.5 var(--font-body); resize: vertical; outline: none; transition: border-color .2s;
}
.survey__foot { padding-top: 20px; border-top: 1px solid var(--c-hairline); }
.survey__send { display: flex; flex-wrap: wrap; gap: 10px; }
.survey__send input[type="email"] { flex: 1 1 200px; }
.survey__send .btn { flex: 1 1 160px; }
.survey__meta { font-size: 12px; line-height: 16px; color: var(--c-text-muted); margin-top: 12px; }
.survey.is-done .survey__send, .survey.is-done .survey__meta { display: none; }

/* ---------- Discord community band (home) ---------- */
:root { --c-discord: #5865F2; }
.dc-i { width: 22px; height: 22px; flex: none; fill: currentColor; }
.btn--discord, .btn--discord:hover { background: var(--c-discord); border-color: var(--c-discord); color: #fff; gap: 10px; }
.cband {
  position: relative; display: grid; gap: 16px; align-items: center; overflow: hidden; isolation: isolate;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 4vw, 40px); border-radius: var(--r-xl); background: var(--c-solid); border: 1px solid var(--c-card-edge); box-shadow: var(--shadow-card);
}
.cband::before {
  content: ""; position: absolute; inset: 0; z-index: -2; background: var(--c-accent-tint);
  -webkit-mask: url("/assets/img/community-pattern.svg") 0 0 / 300px 300px repeat; mask: url("/assets/img/community-pattern.svg") 0 0 / 300px 300px repeat;
}
@media (min-width: 900px) { .cband { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; } }
/* The Discord logo sits behind the text as a large, faint watermark. */
.cband__icon { position: absolute; z-index: -1; left: 50%; top: 50%; width: clamp(170px, 22vw, 240px); transform: translate(-50%, -50%) rotate(-10deg); color: var(--c-discord); opacity: .14; pointer-events: none; }
.cband__icon .dc-i { width: 100%; height: auto; }
@media (max-width: 899px) { .cband__icon { left: 62%; } }
.cband__title { margin-top: 6px; font: 400 clamp(26px, 2.6vw, 36px)/1.1 var(--font-display); color: var(--c-text); }
.cband__text p { margin-top: 8px; max-width: 620px; font-size: 16px; line-height: 24px; color: var(--c-text-secondary); }
@media (max-width: 899px) { .cband__btn { justify-self: start; } }

/* faq */
.faq { display: grid; border-top: 1px solid var(--c-hairline); }
.faq details { border-bottom: 1px solid var(--c-hairline); overflow: hidden; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; line-height: 22px; color: var(--c-text); -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 24px; height: 24px; transition: transform .3s var(--ease); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--c-text); border-radius: 1px; transition: transform .3s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq__a { overflow: hidden; }
.faq__a p { padding: 0 0 22px; font-size: 16px; line-height: 24px; color: var(--c-text-secondary); max-width: 640px; }

/* final cta */
.cta .lede { margin-bottom: 28px; }
.cta__meta { font-size: 12px; line-height: 16px; color: var(--c-text-muted); margin-top: 18px; }

/* footer */
.ftr { padding: clamp(48px, 5vw, 64px) 0 calc(clamp(28px, 4vw, 40px) + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-hairline); }
.ftr__grid { display: grid; gap: 36px 24px; grid-template-columns: 1fr 1fr; }
.ftr__grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 820px) { .ftr__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .ftr__grid > :first-child { grid-column: auto; } }
.ftr__logo { font: 600 24px/30px var(--font-body); letter-spacing: .25em; text-transform: uppercase; color: var(--c-text); }
.ftr p { font-size: 14px; line-height: 20px; color: var(--c-text-secondary); margin-top: 16px; max-width: 320px; }
.ftr nav { display: flex; flex-direction: column; gap: 12px; }
.ftr h3 { font-size: 13px; font-weight: 600; line-height: 16px; color: var(--c-text-tertiary); margin-bottom: 2px; }
.ftr nav a { font-size: 15px; color: var(--c-text); width: fit-content; }
.ftr nav a:hover { color: var(--c-text); opacity: .8; }
.ftr__bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--c-hairline); font-size: 12px; line-height: 16px; color: var(--c-text-muted); }
.ftr__bar span { padding: 0; }
.ftr__bar a { color: var(--c-text-secondary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-strike); }
.ftr__bar a:hover { color: var(--c-text); }
.ftr__bar { max-width: 1200px; margin-inline: auto; padding-inline: 0; }
@media (max-width: 1295px) { .ftr__bar { margin-inline: var(--gutter); } }

/* mobile dock: floating glass pill, echoes the app's tab bar */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 6px 6px 20px; border-radius: var(--r-full);
  background: var(--c-glass-strong); border: 1px solid var(--c-glass-stroke);
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
  font-size: 13px; color: var(--c-text-tertiary);
  transform: translateY(140%); transition: transform .4s var(--ease);
}
.dock.is-on { transform: none; }
.dock b { font-weight: 600; color: var(--c-text); letter-spacing: .25em; text-transform: uppercase; font-size: 12px; }
.dock__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-full); background: var(--c-ink); color: var(--c-on-ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.dock:hover { color: var(--c-text-tertiary); }
@media (min-width: 900px) { .dock { display: none !important; } }

/* ---------- Motion: gentle entrances ---------- */
.rise { opacity: 0; animation: vxrise .4s var(--ease) var(--d, 0s) forwards; }
.js [data-reveal], .js [data-stagger] > * { opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: var(--rd, 0s); }
.js [data-stagger] > * { transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].is-in, .js [data-stagger].is-in > * { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes vxrise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes vxrail { to { transform: translateX(-50%); } }
@keyframes vxpulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes vxorbit { to { stroke-dashoffset: -120; } }
@keyframes vxorbitrev { to { stroke-dashoffset: 120; } }
@keyframes vxtag { 0%, 8% { opacity: 0; transform: translateY(6px); } 16%, 40% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes vxcaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes chipin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes nudge {
  0%   { transform: none; box-shadow: 0 0 0 0 rgba(232,60,120,.55); }
  18%  { transform: scale(1.06); }
  36%  { transform: scale(.97); }
  54%  { transform: scale(1.03); box-shadow: 0 0 0 14px rgba(232,60,120,0); }
  55%  { box-shadow: 0 0 0 0 rgba(232,60,120,.45); }
  100% { transform: none; box-shadow: 0 0 0 14px rgba(232,60,120,0); }
}
.btn.is-nudge { animation: nudge 1.1s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .rise, .tag { opacity: 1; }
  .tag:not(:first-child) { display: none; }
  .rail__track { animation: none; }
  [data-parallax] { translate: none !important; }
}

/* fallback where backdrop-filter is unsupported */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hdr.is-scrolled, .langtip, .dock { background: var(--fallback-strong); }
  .tag, .study__badge, .study__frame { background: var(--c-glass-strong); }
}

/* ---------- Simple pages (privacy, safety, 404) ---------- */
.doc-hdr { position: sticky; }
.doc-hdr .lang { display: inline-flex; }
.doc-hdr .hdr__end .btn { display: none; }
@media (min-width: 600px) { .doc-hdr .hdr__end .btn { display: inline-flex; } }
.doc-back { justify-self: start; font-size: 14px; font-weight: 500; color: var(--ink-60); }
.doc { max-width: calc(720px + 2 * var(--gutter)); padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(64px, 8vw, 120px); }
.doc h1 { font: 400 clamp(36px, 3.8vw, 54px)/1.08 var(--font-display); letter-spacing: -.01em; color: var(--c-text); margin: 16px 0 0; }
.doc h2 { font: 400 clamp(26px, 2.2vw, 32px)/1.15 var(--font-display); letter-spacing: -.01em; color: var(--c-text); margin: 48px 0 12px; }
.doc p, .doc li { font-size: 16px; line-height: 26px; color: var(--c-text-secondary); }
.doc ul { display: grid; border-top: 1px solid var(--c-hairline); }
.doc li { position: relative; padding: 12px 0 12px 24px; border-bottom: 1px solid var(--c-hairline); }
.doc li::before { content: "—"; position: absolute; left: 0; color: var(--c-text-tertiary); }
.doc b { font-weight: 600; color: var(--c-text); }
.doc a:not(.btn) { color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-link-line); }
.doc__lede { font-size: 18px !important; line-height: 28px !important; margin-top: 20px; }
.doc h2[id], .doc nav ol { scroll-margin-top: 96px; }
.doc h3 { font-size: 17px; font-weight: 600; line-height: 26px; color: var(--c-text); margin: 32px 0 8px; }
.doc p + p, .doc ul + p { margin-top: 12px; }
.doc__toc { margin-top: 40px; padding: 20px 24px; border: 1px solid var(--c-hairline); border-radius: var(--r-md); }
.doc__toc ol { margin: 8px 0 0; padding-left: 22px; columns: 2 240px; column-gap: 32px; }
.doc__toc li { padding: 3px 0; border: 0; font-size: 15px; line-height: 24px; }
.doc__toc li::before { content: none; }
.doc__table { overflow-x: auto; margin: 16px 0; border: 1px solid var(--c-hairline); border-radius: var(--r-sm); }
.doc table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.doc th, .doc td { padding: 12px 14px; text-align: left; vertical-align: top; color: var(--c-text-secondary); border-bottom: 1px solid var(--c-hairline); }
.doc th { font-weight: 600; color: var(--c-text); }
.doc tbody tr:last-child td { border-bottom: 0; }
.doc__404 { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; }
.doc__404 .btn { margin-top: 28px; }
.doc-page .ftr { padding-top: 0; border-top: 0; }
.doc-page .ftr__bar { margin-top: 0; }

/* Blog (generated by tools/build_blog.py) */
.crumbs { font-size: 13px; line-height: 18px; color: var(--c-text-tertiary); }
.crumbs a { color: var(--c-text-tertiary) !important; text-decoration: none !important; }
.crumbs a:hover { color: var(--c-text) !important; }
.post-meta { font-size: 13px !important; line-height: 18px !important; color: var(--c-text-tertiary) !important; margin-top: 16px; }
.post ol:not(.doc__toc ol) { margin: 12px 0 0; padding-left: 22px; }
.post ol:not(.doc__toc ol) li { padding: 6px 0; border: 0; }
.post ol:not(.doc__toc ol) li::before { content: none; }
.post blockquote { margin: 20px 0; padding: 16px 20px; border-left: 2px solid var(--c-accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--c-accent-tint); }
.post blockquote p { color: var(--c-text); }
.post-cta { margin-top: 56px; padding: 28px; }
.post-cta h2 { margin-top: 0 !important; }
.post-cta .btn { margin-top: 20px; }
.post-list { display: grid; gap: 0; margin-top: 32px; border-top: 1px solid var(--c-hairline); }
.post-list .post-card { padding: 24px 0; }
.post-list .post-card::before { content: none; }
.post-card h2 { font: 400 clamp(24px, 2vw, 28px)/1.2 var(--font-display); margin: 6px 0 8px !important; }
.post-card h2 a { color: var(--c-text) !important; text-decoration: none !important; }
.post-card h2 a:hover { text-decoration: underline !important; }
.post-card .post-meta { margin-top: 0; }
.post-more { margin-top: 56px; }
.post-hero { width: min(var(--w, 1040px), 1040px, calc(100vw - 2 * var(--gutter))); margin: 28px 0 8px; position: relative; left: 50%; transform: translateX(-50%); }
.post-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); background: var(--c-accent-tint); }
.post-hero figcaption, .post figure figcaption { margin-top: 10px; font-size: 13px; line-height: 18px; color: var(--c-text-tertiary); text-align: center; }
.post figure { margin: 32px 0; }
/* Body images keep their own aspect ratio and are never enlarged past the file's width. */
.post img { height: auto; max-width: 100%; }
.post figure > img { display: block; width: auto; margin-inline: auto; border-radius: var(--r-md); }
.post .shots { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.post .shots figcaption { flex-basis: 100%; }
.post img.shot { width: min(300px, calc(50% - 10px)); height: auto; border-radius: 28px; border: 6px solid var(--c-glass-strong); box-shadow: 0 18px 40px -18px rgba(120, 40, 70, .35); }
.post .shots--one img.shot { width: min(300px, 70%); }
.post-cta { display: flex; gap: 28px; align-items: center; }
.post-cta__copy { flex: 1; min-width: 0; }
.post-cta ul { border-top: 0 !important; margin-top: 12px; }
.post-cta li { padding: 6px 0 6px 24px !important; border-bottom: 0 !important; }
.post-cta li::before { content: "✓" !important; color: var(--c-accent) !important; }
.post-cta__note { font-size: 13px !important; line-height: 18px !important; color: var(--c-text-tertiary) !important; margin-top: 10px; }
.post-cta__title { font: 400 clamp(24px, 2.2vw, 30px)/1.15 var(--font-display) !important; color: var(--c-text) !important; margin: 6px 0 8px; }
.post-cta img.shot { width: 180px; flex: none; }
.post-cta--inline { margin: 28px 0; padding: 24px 28px; }
@media (max-width: 599px) { .post-cta img.shot { display: none; } }
.post-card { display: grid; grid-template-columns: 1fr; gap: 0 24px; }
.post-card__img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); margin-bottom: 14px; }
@media (min-width: 700px) { .post-card { grid-template-columns: 240px 1fr; } .post-card__img { grid-row: span 3; } .post-card__img img { margin-bottom: 0; } }
.doc tr.is-pick td { background: var(--c-accent-tint); color: var(--c-text); }
.post .moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (min-width: 700px) { .post .moves { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.post .moves--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px; }
.post .moves--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.post .moves div { margin: 0; }
.post .moves img { width: 100%; height: auto; border-radius: var(--r-sm); }
.post .moves span { display: block; margin-top: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--c-text); text-align: center; }
.post .moves figcaption { grid-column: 1 / -1; }
.doc table.compare { min-width: 680px; }
.compare td.yes, .compare td.no { text-align: center; font-size: 17px; }
.compare th:not(:first-child):not(:last-child) { text-align: center; }
.compare td.yes { color: var(--c-accent); font-weight: 600; }
.compare td.no { color: var(--c-text-muted); }
.compare tr.is-pick td.yes { color: var(--c-accent); }
.compare__legend { font-size: 13px !important; line-height: 18px !important; color: var(--c-text-tertiary) !important; margin-top: 8px; }