/* ==========================================================================
   HESIA — design system
   --------------------------------------------------------------------------
   1. Color tokens        6. Buttons & links
   2. Type & space tokens 7. Footer
   3. Base                8. Language toggle / motion
   4. Typography          9. Print
   5. Header & nav       10. Page modules (landing, documents)

   Single source of truth for color lives in §1. Do not hardcode hex values
   below that block — always reference a semantic token.

   Channel tokens (--rgb-*) exist so translucent surfaces, tints, borders and
   shadows stay theme-aware: overriding the channel in dark mode automatically
   re-resolves every derived token that references it.
   ========================================================================== */

/* ==========================================================================
   1. Color
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Brand ------------------------------------------------------------ */
  --color-primary: #99627A;
  --color-secondary: #6C2645;
  --color-tertiary: #FEEBC8;
  --color-soft-pink: #ECC0D3;
  --color-surface: #FFFFFF;

  --rgb-primary: 153 98 122;
  --rgb-secondary: 108 38 69;
  --rgb-tertiary: 254 235 200;
  --rgb-soft-pink: 236 192 211;

  /* --- Typography ------------------------------------------------------- */
  --color-text-primary: #241C21;
  --color-text-secondary: #6E616A;
  --color-text-tertiary: #9C8F96;

  /* --- Backgrounds & surfaces ------------------------------------------- */
  --color-background-primary: #F7F3EF;
  --color-background-secondary: #EFE7E0;
  --color-surface-elevated: #FFFFFF;

  --rgb-background-primary: 247 243 239;
  --rgb-surface-elevated: 255 255 255;

  /* --- Accent / interaction --------------------------------------------- */
  --color-accent: var(--color-primary);
  --color-emphasis: var(--color-secondary);
  --color-accent-pressed: #85526A;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: rgb(var(--rgb-primary) / .12);

  --rgb-on-accent: 255 255 255;

  /* --- Informational hierarchy (reserved) -------------------------------- */
  --color-informational-primary: #302A2D;
  --color-informational-secondary: #6F656A;
  --color-informational-tertiary: #786D72;

  /* --- Status (reserved) -------------------------------------------------- */
  --color-success: #4E7A5B;
  --color-warning: #B07D3C;
  --color-error: #B24A54;

  /* --- Lines & overlays --------------------------------------------------- */
  --color-hairline: rgb(var(--rgb-secondary) / .16);
  --color-separator: rgb(var(--rgb-secondary) / .10);
  --color-divider: rgb(var(--rgb-secondary) / .12);
  --color-border: rgb(var(--rgb-secondary) / .14);
  --color-selection: rgb(var(--rgb-soft-pink) / .42);
  --color-overlay: rgb(42 21 32 / .32);

  /* --- Elevation ---------------------------------------------------------- */
  --rgb-shadow: 108 38 69;
  --color-shadow: rgb(var(--rgb-shadow) / .07);
  --color-shadow-strong: rgb(var(--rgb-shadow) / .16);

  /* --- Decorative brand tints --------------------------------------------- */
  --tint-soft-pink-hero: rgb(var(--rgb-soft-pink) / .14);
  --tint-soft-pink-surface: rgb(var(--rgb-soft-pink) / .42);
  --tint-tertiary-hero: rgb(var(--rgb-tertiary) / .18);
  --tint-tertiary-surface: rgb(var(--rgb-tertiary) / .58);
  --tint-primary-surface: rgb(var(--rgb-primary) / .10);

  /* --- Life-stage marks -----------------------------------------------------
     The four the app actually ships, in the order its own picker lists them.
     Each borrows the hue that stage carries in the app: rose, peach, deeper
     rose, then the pale mauve of postpartum. */
  --surface-stage-cycle: var(--tint-soft-pink-surface);
  --surface-stage-pregnancy: var(--tint-tertiary-surface);
  --surface-stage-birth: rgb(var(--rgb-soft-pink) / .44);
  --surface-stage-postpartum: var(--tint-primary-surface);

  --mark-stage-cycle: var(--color-primary);
  --mark-stage-pregnancy: var(--color-warning);
  --mark-stage-birth: var(--color-soft-pink);
  --mark-stage-postpartum: var(--color-emphasis);

  /* --- Deep band ----------------------------------------------------------
     The one dark anchor on the page. It is NOT `--color-secondary`: that token
     flips to a light mauve in dark mode, which would turn the anchor into the
     brightest band on a near-black page. Declared per scheme instead. */
  --band-deep-bg: #6C2645;
  --band-deep-fg: #FFFFFF;
  --rgb-band-deep-fg: 255 255 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #CE9EB6;
    --color-secondary: #C98BA6;
    --color-tertiary: #5A4A38;
    --color-soft-pink: #5A3B48;
    --color-surface: #241C24;

    --rgb-primary: 206 158 182;
    --rgb-secondary: 201 139 166;
    --rgb-tertiary: 90 74 56;
    --rgb-soft-pink: 90 59 72;

    --color-text-primary: #F2EAEE;
    --color-text-secondary: #B7A8B0;
    --color-text-tertiary: #8A7C84;

    --color-background-primary: #141013;
    --color-background-secondary: #1C161A;
    --color-surface-elevated: #2A222A;

    --rgb-background-primary: 20 16 19;
    --rgb-surface-elevated: 42 34 42;

    --color-accent-pressed: #B487A0;
    --color-on-accent: #1A0F14;
    --rgb-on-accent: 26 15 20;

    --color-informational-primary: #F2EAEE;
    --color-informational-secondary: #B7A8B0;
    --color-informational-tertiary: #9C8F96;

    --color-success: #8FBF9C;
    --color-warning: #E0B36A;
    --color-error: #E6949C;

    --color-overlay: rgb(0 0 0 / .32);
    --rgb-shadow: 0 0 0;

    /* Shadows carry almost no weight on a dark ground; lines do the work. */
    --color-shadow: rgb(0 0 0 / .34);
    --color-shadow-strong: rgb(0 0 0 / .52);
    --color-hairline: rgb(var(--rgb-secondary) / .22);

    /* Raised plum rather than a darker dark — the anchor has to read as a
       band, and nothing is darker than this page's background. */
    --band-deep-bg: #3A1F2C;
    --band-deep-fg: #F7EEF2;
    --rgb-band-deep-fg: 247 238 242;
  }
}

/* ==========================================================================
   2. Type, space, shape, motion
   ========================================================================== */

:root {
  /* --- Families ----------------------------------------------------------- */
  /* Fraunces: display only. Newsreader: reading copy. System UI: wayfinding —
     the same face HESIA's own iOS interface renders in. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
             "Segoe UI", system-ui, "Helvetica Neue", sans-serif;

  /* --- Fluid type scale ---------------------------------------------------- */
  --text-display-1: clamp(2.625rem, 1.55rem + 4.8vw, 4.75rem);  /* 42 → 76 */
  --text-display-2: clamp(2rem, 1.4rem + 2.7vw, 3.25rem);       /* 32 → 52 */
  --text-display-3: clamp(1.5rem, 1.28rem + 1vw, 2rem);         /* 24 → 32 */
  --text-title: clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem);     /* 19 → 23 */
  --text-lead: clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);      /* 18 → 21 */
  --text-body: 1.0625rem;                                        /* 17 */
  --text-sm: .9375rem;                                           /* 15 */
  --text-ui: .875rem;                                            /* 14 */
  --text-caption: .75rem;                                        /* 12 */

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-body: 1.7;

  /* --- Space --------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Vertical rhythm for full-width bands. */
  --band: clamp(var(--space-8), 9vw, var(--space-9));

  /* --- Layout -------------------------------------------------------------- */
  --content: 1180px;
  --shell: var(--content);
  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 40px);
  --header-h: 68px;
  --max: var(--content); /* legacy alias */

  /* --- Shape --------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Elevation ----------------------------------------------------------- */
  --shadow-1: 0 1px 2px var(--color-shadow), 0 4px 10px var(--color-shadow);
  --shadow-2: 0 2px 4px var(--color-shadow), 0 14px 30px var(--color-shadow);
  --shadow-soft: var(--shadow-2); /* legacy alias */

  /* --- Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(.2, .6, .3, 1);
  --dur-fast: 140ms;
  --dur: 200ms;
}

@media (min-width: 48rem) {
  :root { --header-h: 76px; }
}

/* Documents read better in a narrower shell than the landing page. */
.doc-page { --shell: 1040px; }

/* ==========================================================================
   3. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
}

body {
  margin: 0;
  min-height: 100svh;
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; }

::selection { background: var(--color-selection); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.site-shell {
  width: min(calc(100% - var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

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

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-emphasis);
  color: var(--color-on-accent);
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible {
  transform: none;
  color: var(--color-on-accent);
}

/* ==========================================================================
   4. Typography
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 0;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

h1 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-display-1);
  line-height: var(--leading-tight);
  letter-spacing: -.022em;
}

h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-display-2);
  letter-spacing: -.016em;
}

h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-display-3);
  letter-spacing: -.01em;
}

h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-title);
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

.lead {
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

/* Utility face: labels, meta, navigation — anything you scan, not read. */
.eyebrow {
  display: block;
  margin: 0 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.meta {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   5. Header & navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(var(--rgb-background-primary) / .82);
  border-bottom: 1px solid var(--color-separator);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header { backdrop-filter: blur(14px) saturate(1.4); }
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-primary);
  text-decoration: none;
}
.brand:hover { color: var(--color-text-primary); }

.brand-logo {
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: contain;
}

.brand-word {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 0;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-indent: .2em;
  line-height: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* --- Nav links ------------------------------------------------------------ */

.site-nav {
  font-family: var(--font-ui);
  font-size: var(--text-ui);
}

.site-nav a {
  position: relative;
  display: block;
  color: var(--color-text-secondary);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.site-nav a:hover { color: var(--color-text-primary); }
.site-nav a[aria-current="page"] { color: var(--color-emphasis); font-weight: 600; }

/* --- Mobile: dropdown panel ----------------------------------------------- */

.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: grid;
  padding: var(--space-2) var(--gutter) var(--space-5);
  background: var(--color-background-primary);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-2);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

.site-nav[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.site-nav a {
  padding: var(--space-3) 0;
  font-size: 1rem;
}
.site-nav a + a { border-top: 1px solid var(--color-separator); }
.site-nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: calc(var(--space-3) * -1);
  top: 50%;
  width: 3px;
  height: 1.1em;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transform: translateY(-50%);
}

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgb(var(--rgb-surface-elevated) / .6);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.nav-toggle:hover { background: var(--color-surface-elevated); }

.nav-toggle-icon {
  position: relative;
  display: block;
  width: 17px;
  height: 11px;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: var(--radius-pill);
  background: currentColor;
  transition: transform var(--dur) var(--ease), top var(--dur-fast) var(--ease);
}
.nav-toggle-icon::before { top: 0; }
.nav-toggle-icon::after { top: 9.5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { top: 5px; transform: rotate(-45deg); }

/* --- Desktop: inline nav --------------------------------------------------- */

@media (min-width: 48rem) {
  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .site-nav a { padding: var(--space-2) 0; font-size: var(--text-ui); }
  .site-nav a + a { border-top: 0; }

  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }
  .site-nav a:hover::after,
  .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .site-nav a[aria-current="page"]::before { content: none; }
}

/* --- Language switch -------------------------------------------------------- */

.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgb(var(--rgb-surface-elevated) / .6);
}

.lang-switch button {
  min-width: 38px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lang-switch button:hover { color: var(--color-text-primary); }
.lang-switch button.active {
  color: var(--color-on-accent);
  background: var(--color-emphasis);
}

/* ==========================================================================
   6. Links & buttons
   ========================================================================== */

a {
  color: var(--color-emphasis);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(var(--rgb-secondary) / .38);
  transition: color var(--dur-fast) var(--ease),
              text-decoration-color var(--dur-fast) var(--ease);
}
a:hover {
  color: var(--color-accent-pressed);
  text-decoration-color: currentColor;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 50px;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-emphasis);
  color: var(--color-on-accent);
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.button:hover {
  background: var(--color-accent-pressed);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-1);
}
.button:active { transform: translateY(1px); }

.button.secondary {
  background: transparent;
  color: var(--color-emphasis);
  border-color: var(--color-border);
}
.button.secondary:hover {
  background: var(--color-accent-soft);
  color: var(--color-emphasis);
}

.text-link {
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 600;
  text-decoration: none;
}
.text-link:hover { text-decoration: underline; }

/* ==========================================================================
   7. Footer
   ========================================================================== */

.site-footer {
  padding: var(--space-7) 0 var(--space-8);
  border-top: 1px solid var(--color-separator);
  background: var(--color-background-primary);
}

.footer-inner {
  display: grid;
  gap: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  color: var(--color-text-secondary);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-primary);
  text-decoration: none;
}
.footer-brand img { width: 30px; height: 30px; object-fit: contain; }
.footer-brand .brand-word { font-size: 1rem; }

.footer-tagline {
  margin: var(--space-3) 0 0;
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}
.footer-links a {
  color: var(--color-text-secondary);
  font-weight: 500;
  text-decoration: none;
}
.footer-links a:hover { color: var(--color-text-primary); }

.footer-legal {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-separator);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

@media (min-width: 48rem) {
  .footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
  }
  .footer-legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
  }
}

/* ==========================================================================
   8. Language toggle & motion
   ========================================================================== */

[data-lang="en"] { display: none; }
html.lang-en [data-lang="tr"] { display: none; }
html.lang-en [data-lang="en"] { display: revert; }
html.lang-en span[data-lang="en"],
html.lang-en a[data-lang="en"] { display: inline; }

[data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   9. Print
   ========================================================================== */

@media print {
  /* Print is always light: pin the light scheme so dark-mode tokens
     never leak onto paper. */
  :root {
    --color-primary: #99627A;
    --color-secondary: #6C2645;
    --color-tertiary: #FEEBC8;
    --color-soft-pink: #ECC0D3;
    --rgb-primary: 153 98 122;
    --rgb-secondary: 108 38 69;
    --rgb-tertiary: 254 235 200;
    --rgb-soft-pink: 236 192 211;
    --color-text-primary: #241C21;
    --color-text-secondary: #6E616A;
    --color-text-tertiary: #9C8F96;
    --color-background-primary: #FFFFFF;
    --color-background-secondary: #FFFFFF;
    --color-surface-elevated: #FFFFFF;
    --rgb-background-primary: 255 255 255;
    --rgb-surface-elevated: 255 255 255;
    --color-accent-pressed: #85526A;
    --color-on-accent: #FFFFFF;
    --rgb-on-accent: 255 255 255;
    --rgb-shadow: 108 38 69;
    --color-shadow: transparent;
    --color-shadow-strong: transparent;
    --band-deep-bg: #FFFFFF;
    --band-deep-fg: #241C21;
    --rgb-band-deep-fg: 36 28 33;
  }
  .site-header, .site-footer, .lang-switch, .skip-link,
  .nav-toggle, .doc-toc, .breath-halo, .stage-rail { display: none; }
  .hero-device { margin-bottom: 0; }
  .device-shot { filter: none; }
  .hero-band { overflow: visible; }

  /* Nothing pins on paper, and the stage has to show all four cards at once. */
  .tour-stage, .stage-pin { position: static; }
  .stage-scroller.is-pinned { height: auto; }
  .stage-viewport { overflow: visible; }
  .stage-track { flex-wrap: wrap; transform: none; padding-inline: 0; }
  .tour-shot { opacity: 1; position: static; }
  .tour-shot:not(.is-active) { display: none; }
  .tour[data-active] .tour-step { opacity: 1; }
  body { background: #FFFFFF; }
  main { padding: 0; }
  .site-shell { width: 100%; max-width: none; }
  .doc-grid { display: block; }
  .doc-article { max-width: none; }
  .doc-section { break-inside: avoid; }
  .contact-block { background: none; padding: 0; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   10. Page modules
   --------------------------------------------------------------------------
   Landing sections and document layout follow. These are rebuilt on top of
   the tokens above; nothing below should introduce a raw hex value.
   ========================================================================== */

main { padding: var(--space-8) 0 var(--space-9); }
.landing-main { padding: 0; }

/* --- Documents: shared shell ------------------------------------------------
   support / privacy / terms are considered documents, not leftovers. They get
   a real masthead, a measure-capped column, and a navigable structure. ----- */

.doc-header { max-width: var(--measure); margin-bottom: var(--space-7); }
.doc-header h1 { font-size: var(--text-display-2); }
.doc-header .lead { margin-bottom: var(--space-5); }
.doc-header .meta {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-hairline);
}

.doc-grid { display: grid; align-items: start; }
.doc-grid > .doc-header { grid-column: 1 / -1; }
.doc-narrow { max-width: 780px; }

.doc-article { max-width: var(--measure); }

.doc-section {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-hairline);
}
.doc-section:first-child { padding-top: 0; border-top: 0; }

/* The numbers exist in the source text and are referenced elsewhere, so they
   stay — demoted to a utility marker hanging beside the heading. */
.doc-section h2 {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-display-3);
}
.doc-num {
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
.doc-h2-text { display: block; }

.doc-section ul { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.doc-section li + li { margin-top: var(--space-2); }

.callout {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-left: 3px solid var(--color-accent);
  background: var(--tint-tertiary-surface);
  font-size: var(--text-sm);
}
.callout strong { color: var(--color-text-primary); }

/* --- Documents: table of contents -------------------------------------------- */

.doc-toc { margin-bottom: var(--space-7); }

.toc-disclosure {
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}
.toc-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
}
.toc-disclosure > summary::-webkit-details-marker { display: none; }
.toc-disclosure > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.toc-disclosure[open] > summary::after { transform: translateY(2px) rotate(225deg); }

.toc-list {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  font-family: var(--font-ui);
  font-size: var(--text-ui);
}
.toc-list a {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  line-height: 1.45;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.toc-list a:hover { color: var(--color-text-primary); }
.toc-list a[data-active] { color: var(--color-emphasis); font-weight: 600; }
.toc-num { font-variant-numeric: tabular-nums; color: var(--color-accent); }

/* --- Support page ------------------------------------------------------------ */

.contact-block {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-8);
  padding: clamp(var(--space-5), 4vw, var(--space-6));
  border-radius: var(--radius-lg);
  background: var(--color-background-secondary);
}
.contact-copy h2 { font-size: var(--text-display-3); }
.contact-copy p {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.contact-action { white-space: nowrap; }

.help-section { margin-bottom: var(--space-7); }
.help-section h2 { margin-bottom: var(--space-5); font-size: var(--text-display-3); }
.help-section .deflist dt { font-size: var(--text-title); }

/* --- Documents: responsive ---------------------------------------------------- */

@media (min-width: 48rem) {
  .contact-block { grid-template-columns: 1fr auto; gap: var(--space-7); }
  .doc-section h2 { grid-template-columns: 2.5rem 1fr; }
}

@media (min-width: 64rem) {
  .doc-grid {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    column-gap: var(--space-8);
  }

  /* The contents list follows the reader down a long document. */
  .doc-toc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
    margin-bottom: 0;
  }
  .toc-disclosure { border: 0; }
  .toc-disclosure > summary { display: none; }
  .toc-list {
    margin-bottom: 0;
    max-height: calc(100svh - var(--header-h) - var(--space-8));
    overflow-y: auto;
  }
  .toc-list a {
    grid-template-columns: 1.5rem 1fr;
    padding-left: var(--space-4);
    border-left: 1px solid var(--color-hairline);
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .toc-list a[data-active] { border-left-color: var(--color-accent); }
}

/* --- Landing: bands --------------------------------------------------------
   Full-bleed backgrounds alternate paper → sand → paper → sand → deep.
   The deep band appears exactly once, at the end. ------------------------- */

.band {
  padding-block: var(--band);
  border-top: 1px solid var(--color-separator);
}
.band-sand { background: var(--color-background-secondary); }
.band-deep {
  background: var(--band-deep-bg);
  color: var(--band-deep-fg);
  border-top-color: transparent;
}
.band-deep h2 { color: var(--band-deep-fg); }
.band-deep p { color: rgb(var(--rgb-band-deep-fg) / .78); }

.band-head { max-width: var(--measure); margin-bottom: var(--space-7); }
.band-head-narrow { max-width: 32ch; }
.band-head .lead { margin-bottom: 0; }

/* --- Landing: hero ---------------------------------------------------------- */

.hero-band {
  position: relative;
  overflow: hidden;
  padding-top: clamp(var(--space-7), 7vw, var(--space-9));
  padding-bottom: var(--band);
}

.hero-grid {
  display: grid;
  align-items: center;
  gap: clamp(var(--space-7), 6vw, var(--space-8));
}

.hero-copy h1 { margin-bottom: var(--space-5); }
.hero-copy .lead { max-width: 42ch; }

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}

.app-store-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-emphasis);
  color: var(--color-on-accent);
  font-family: var(--font-ui);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.app-store-button:hover { color: var(--color-on-accent); background: var(--color-accent-pressed); }
.app-store-button.disabled { cursor: default; }
.app-store-button small,
.app-store-button strong { display: block; line-height: 1.2; }
.app-store-button small { font-size: var(--text-caption); font-weight: 500; opacity: .78; }
.app-store-button strong { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.apple-mark { display: grid; place-items: center; width: 20px; font-size: 21px; line-height: 1; }

.app-store-button-invert {
  background: var(--band-deep-fg);
  color: var(--band-deep-bg);
}
.app-store-button-invert:hover {
  background: rgb(var(--rgb-band-deep-fg) / .88);
  color: var(--band-deep-bg);
}

/* --- Device shots ------------------------------------------------------------
   Real screen captures, cut out of their studio plate. The app's own cream is
   the same paper as this page, so the device sits in the layout rather than on
   top of it. `src` is swapped by language in site.js — a single request per
   visitor instead of shipping both locales. -------------------------------- */

.device-shot {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 40px var(--color-shadow));
}

@media (prefers-color-scheme: dark) {
  /* The bezel is near-black and would dissolve into the page, so the silhouette
     gets a faint edge instead of relying on the shadow. */
  .device-shot {
    filter:
      drop-shadow(0 0 1px rgb(var(--rgb-primary) / .55))
      drop-shadow(0 22px 44px rgb(0 0 0 / .55));
  }
}

/* The hero device is cut by the band edge — the crop lands on empty screen
   below the week row, so nothing is hidden, and the paper/sand boundary
   becomes the edge rather than a mockup floating in space. */

.hero-device {
  position: relative;
  margin: 0 auto calc((var(--band) + var(--space-7)) * -1);
  align-self: end;
  width: min(100%, 300px);
}
.hero-device .device-shot { position: relative; z-index: 1; }

/* --- Breath halo --------------------------------------------------------------
   A soft bloom behind the hero device on a paced breath — four counts in, one
   held, six out. It is the app's subject rendered as ambience rather than an
   effect looking for a reason.

   Two layers on purpose: the outer element owns the scroll fade site.js writes
   to `--breath-fade`, the inner owns the breath. Sharing one opacity would let
   the animation overwrite the fade. ------------------------------------- */

.breath-halo {
  --halo-a: rgb(var(--rgb-soft-pink) / .36);
  --halo-b: rgb(var(--rgb-tertiary) / .30);

  position: absolute;
  z-index: 0;
  left: 50%;
  top: 42%;
  width: 138%;
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: var(--breath-fade, 1);
  pointer-events: none;
}

.breath-halo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 48% 40%, var(--halo-a), transparent 70%),
    radial-gradient(closest-side at 60% 68%, var(--halo-b), transparent 66%);
  filter: blur(14px);
  animation: hesia-breath 11s cubic-bezier(.42, 0, .58, 1) infinite;
}

@media (prefers-color-scheme: dark) {
  /* The light tints all but vanish on near-black, so the halo borrows the
     brighter mauve and leans on the pink for the second bloom. */
  .breath-halo {
    --halo-a: rgb(var(--rgb-primary) / .20);
    --halo-b: rgb(var(--rgb-soft-pink) / .42);
  }
}

@keyframes hesia-breath {
  0%, 100% { scale: .92; opacity: .55; }
  36%, 45% { scale: 1.06; opacity: 1; }
}

/* --- Landing: approach (definition list, not numbered cards) ---------------- */

.approach-showcase {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  margin-bottom: var(--space-8);
}

.approach-copy { margin-bottom: 0; }

.approach-devices {
  position: relative;
  width: min(100%, 34rem);
  height: clamp(27rem, 68vw, 36rem);
  margin: 0 auto;
  isolation: isolate;
  pointer-events: none;
}

.approach-orbit {
  position: absolute;
  z-index: -1;
  inset: 17% 7% 9%;
  border: 1px solid var(--color-hairline);
  border-radius: 50%;
  transform: rotate(-9deg);
}

.approach-phone {
  position: absolute;
  height: auto;
  transform-origin: 50% 80%;
}

.approach-phone-home {
  z-index: 1;
  left: 2%;
  bottom: 0;
  width: 55%;
}

.approach-phone-player {
  z-index: 2;
  top: 0;
  right: 1%;
  width: 48%;
}

@media (min-width: 48rem) {
  .approach-showcase {
    grid-template-columns: minmax(0, .95fr) minmax(20rem, 1.05fr);
    gap: clamp(var(--space-7), 7vw, var(--space-9));
  }

  .approach-devices { height: clamp(31rem, 48vw, 39rem); }
}

.deflist { margin: 0; border-bottom: 1px solid var(--color-hairline); }
.deflist-row {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-hairline);
}

.deflist dt {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 0;
  font-size: var(--text-display-3);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: var(--leading-snug);
}
.deflist dd {
  margin: 0;
  max-width: 56ch;
  color: var(--color-text-secondary);
}

/* --- Landing: a session ------------------------------------------------------
   Device on the left here, having sat on the right in the hero — the page
   alternates rather than repeating one column arrangement. It also holds
   still: the copy scrolls past it and the screen inside changes at each step,
   so one phone carries three screens instead of stacking three mockups.

   Everything below degrades honestly. With no JS the first screen stays up and
   all three steps are readable; the tour is a swap of which image is opaque,
   never a condition for reading the section. --------------------------- */

.session-intro {
  margin-bottom: var(--space-5);
}

.session-intro .lead {
  max-width: 54ch;
  margin: 0;
}

.tour {
  display: grid;
  gap: var(--space-5);
}

.tour-stage {
  position: relative;
  align-self: start;
  z-index: 1;
  width: 100%;
}

.tour-device { margin: 0; }

/* The frame reserves the shot's aspect so the stacked screens can sit on top
   of one another without the section collapsing.

   Sizing is height-first: the viewport sets the height and the aspect ratio
   derives the width. Driving it from width instead let the phone eat the top
   half of a small screen and squeeze the copy into what was left. */
.tour-frame {
  position: relative;
  width: min(100%, 27rem);
  height: min(27rem, 108vw);
  margin-inline: auto;
}

.tour-shot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 82%;
  max-width: 68%;
  object-fit: contain;
  opacity: var(--deck-opacity, .42);
  z-index: var(--deck-z, 1);
  transform:
    translate(-50%, -50%)
    translateX(var(--deck-x, 0%))
    rotate(var(--deck-rotate, 0deg))
    scale(var(--deck-scale, .82));
  transform-origin: 50% 70%;
  transition: transform 900ms cubic-bezier(.18, .72, .18, 1),
              opacity 560ms var(--ease), filter 560ms var(--ease);
  filter: saturate(.8);
  will-change: transform, opacity;
}

.tour-shot.is-active {
  --deck-opacity: 1;
  --deck-z: 3;
  --deck-x: 0%;
  --deck-rotate: 0deg;
  --deck-scale: 1;
  filter: none;
}

/* The inactive phones keep their physical place in the deck. When a new step
   becomes active they travel around the centre phone instead of dissolving. */
.tour[data-active="0"] .tour-shot:nth-child(2),
.tour[data-active="1"] .tour-shot:nth-child(3),
.tour[data-active="2"] .tour-shot:nth-child(1) {
  --deck-x: 52%;
  --deck-rotate: 8deg;
  --deck-scale: .82;
}

.tour[data-active="0"] .tour-shot:nth-child(3),
.tour[data-active="1"] .tour-shot:nth-child(1),
.tour[data-active="2"] .tour-shot:nth-child(2) {
  --deck-x: -52%;
  --deck-rotate: -8deg;
  --deck-scale: .82;
}

/* --- Steps -------------------------------------------------------------- */

.tour-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-hairline);
}

/* --- Narrow: no pinning, one screen per step ---------------------------------
   Pinning cannot work here. The device would sit across the top and the steps,
   being in normal flow beneath it, have nowhere to go but behind it — the copy
   was reaching the middle of the screen and disappearing under the phone.

   So on a narrow screen each step simply carries its own shot. Same three
   screens, same order, same files (so the second copy is a cache hit and the
   hidden one is never fetched), just stacked instead of swapped. -------- */

.tour-stage { display: block; }

.tour-inline {
  display: none;
}

.tour-step {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-content: center;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-hairline);
  transition: opacity var(--dur) var(--ease);

  /* A flick used to carry straight through all three steps. `always` is the
     part that fixes it: momentum has to come to rest on each step instead of
     skipping over it. */
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Proximity, deliberately, and it has to stay that way. `mandatory` looks like
   the stronger choice and is unusable here: combined with the smooth
   scroll-behavior above it collapses the whole document onto these three
   positions — every scroll past the tour, in either direction, gets dragged
   back to a step, and the page can't even rest at the top. Proximity engages
   only near a step and leaves the rest of the page alone.

   Arming this from JS was the first attempt. It does not work: during a flick
   the observer callback lands long after the scroll has gone by. */
html { scroll-snap-type: y proximity; }

@media (prefers-reduced-motion: reduce) {
  /* Overriding where someone's scroll comes to rest is the wrong thing to do
     to a person who asked for less motion, and the steps read fine unsnapped. */
  html { scroll-snap-type: none; }
}

.tour-num {
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-snug);
  color: var(--color-accent);
}

.tour-step h3 { margin: 0 0 var(--space-2); font-size: var(--text-title); }
.tour-step p { margin: 0; max-width: 44ch; font-size: var(--text-sm); color: var(--color-text-secondary); }

@media (min-width: 48rem) {
  .tour {
    grid-template-columns: minmax(19rem, .92fr) minmax(0, 1.08fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(var(--space-7), 7vw, var(--space-9));
    row-gap: 0;
    align-items: start;
  }

  .session-intro {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: var(--space-4);
  }

  /* Beside the copy there is room for the whole phone, and the steps supply
     the scroll length that makes holding it still worth doing. The device gets
     its own column here, so nothing has to pass behind it. */
  .tour-stage {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .tour-frame {
    width: 100%;
    height: min(42rem, calc(100svh - var(--header-h) - var(--space-8)));
  }

  /* At this height the hairlines that separated short rows read as stray rules
     in a lot of empty space. The numbers and the dimming separate the steps. */
  .tour-steps {
    grid-column: 2;
    grid-row: 2;
    border-bottom: 0;
  }
  .tour-step {
    min-height: 46svh;
    padding-block: clamp(var(--space-6), 7vh, var(--space-8));
  }
  .tour-step:first-child { border-top: 1px solid var(--color-hairline); }

  /* Dimming ties the copy to the screen beside it, so it only makes sense
     where there is one shared screen. Stacked, it would just grey out shots.
     Without JS no step carries `is-active`, so none of them dim either. */
  .tour[data-active] .tour-step { opacity: .42; }
  .tour[data-active] .tour-step.is-active { opacity: 1; }
}

@media (min-width: 60rem) {
  .tour { column-gap: clamp(var(--space-8), 8vw, var(--space-9)); }
  .tour-step { grid-template-columns: 3rem 1fr; }
}

/* --- Landing: Apple Watch ----------------------------------------------------
   Copy left, hardware right, mirroring the hero and inverting the tour — the
   page keeps alternating which side the device sits on. -------------------- */

.watch-grid {
  display: grid;
  gap: clamp(var(--space-6), 6vw, var(--space-8));
  align-items: center;
}

.watch-device { margin: 0 auto; width: min(100%, 380px); }
.watch-motion { transform-origin: 50% 65%; }
.watch-device img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 22px 40px var(--color-shadow));
}

.watch-meta {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-hairline);
}
.watch-meta li {
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-hairline);
}
.watch-meta strong {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 0;
  font-size: var(--text-title);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: var(--leading-snug);
}
.watch-meta li > span {
  max-width: 46ch;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
html:not(.lang-en) .watch-meta li > span[data-lang="tr"],
html.lang-en .watch-meta li > span[data-lang="en"] {
  display: block;
}

@media (min-width: 48rem) {
  .watch-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .watch-device { margin-inline: auto 0; }
}

@media (min-width: 60rem) {
  .watch-grid { column-gap: var(--space-9); }
  .watch-device { width: min(100%, 420px); }
}

/* --- Landing: life stages (a sequence that comes back around) ---------------
   Four stages that loop, so they travel sideways instead of stacking into a
   column that implies an end. The base layer below is a plain snap carousel —
   it works with no JS and is the right thing under a thumb. On a pointer,
   site.js pins the viewport and drives the same track from vertical scroll.
   The rail underneath is the only progress affordance either way. -------- */

.stage-scroller { position: relative; }

/* Align the first card with the shell above it, and let the last one clear the
   same edge, while the track itself still runs full-bleed.

   The insets are margins on the end cards, not padding on the track: a scroll
   container drops its end padding, which silently cost the last card its
   margin and shortened the travel. Percentages here resolve against the track,
   which is the viewport's own width — `100vw` would include the scrollbar and
   drift out of line with .site-shell above. */
.stage-track {
  --stage-inset: max(var(--gutter), (100% - var(--shell)) / 2);

  display: flex;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-1) 0 var(--space-6);
  list-style: none;
}
.stage-track > :first-child { margin-inline-start: var(--stage-inset); }
.stage-track > :last-child { margin-inline-end: var(--stage-inset); }

/* The card is a tinted well with that stage's real screen rising out of the
   bottom of it. The shot is already a cut-out, so letting it run past the
   card's edge reads as the phone sitting in the well rather than an image
   pasted into a box. */
.stage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 min(78vw, 21rem);
  /* Fixed, not min: the shot below is taller than what's left of the card on
     purpose, and the card's own edge is what crops it. */
  height: 29rem;
  padding: var(--space-6) var(--space-5) 0;
  border-radius: var(--radius-lg);
  background: var(--stage-surface, var(--color-surface-elevated));
  overflow: hidden;
  scroll-snap-align: center;
}

/* The shot deliberately overflows the fixed card height, and flex answers that
   by shrinking every item that will give — which flattened the dot to nothing.
   Nothing in this card should shrink. */
.stage-card > * { flex: 0 0 auto; }

.stage-dot {
  display: block;
  width: 10px;
  height: 10px;
  margin-bottom: var(--space-5);
  border-radius: 50%;
  background: var(--stage-mark, var(--color-accent));
}
.stage-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-title); }
.stage-card p { margin: 0; max-width: 30ch; color: var(--color-text-secondary); font-size: var(--text-sm); }

/* Runs past the bottom of the card and gets clipped there. */
.stage-shot {
  display: block;
  width: 76%;
  margin: var(--space-6) auto 0;
  filter: drop-shadow(0 14px 26px var(--color-shadow));
}

.stage-step-cycle { --stage-mark: var(--mark-stage-cycle); --stage-surface: var(--surface-stage-cycle); }
.stage-step-pregnancy { --stage-mark: var(--mark-stage-pregnancy); --stage-surface: var(--surface-stage-pregnancy); }
.stage-step-birth { --stage-mark: var(--mark-stage-birth); --stage-surface: var(--surface-stage-birth); }
.stage-step-postpartum { --stage-mark: var(--mark-stage-postpartum); --stage-surface: var(--surface-stage-postpartum); }

/* --- Base layer: swipeable carousel ---------------------------------------- */

.stage-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.stage-viewport::-webkit-scrollbar { display: none; }

/* --- Rail ------------------------------------------------------------------- */

.stage-rail {
  width: min(calc(100% - var(--gutter) * 2), var(--shell));
  height: 2px;
  margin-inline: auto;
  border-radius: var(--radius-pill);
  background: var(--color-separator);
}
/* A thumb sized to the share of the track in view, positioned by how far along
   it you are — site.js writes both as inline width and translateX. */
.stage-rail > span {
  display: block;
  width: 25%;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
}

/* --- Enhanced layer: vertical scroll drives horizontal travel ---------------
   site.js adds `is-pinned` and sets --stage-span (the tall scroll runway) and
   --stage-x (how far the track has travelled) on the scroller. ---------- */

.stage-scroller.is-pinned {
  height: var(--stage-span, auto);
}
/* Viewport and rail pin together, so the rail keeps its place under the cards
   instead of needing its own offset. */
.is-pinned .stage-pin {
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
}
.is-pinned .stage-viewport {
  overflow: hidden;
  scroll-snap-type: none;
}
.is-pinned .stage-track {
  transform: translate3d(calc(var(--stage-x, 0px) * -1), 0, 0);
  will-change: transform;
}
/* Travel is already frame-by-frame with scroll; easing it again lags. */
.is-pinned .stage-rail > span { transition: none; }
.stage-rail { overflow: hidden; }

@media (min-width: 60rem) {
  /* Wider cards on a wide screen, or the four of them very nearly fit and the
     travel isn't worth pinning for — site.js gives up below 160px of it. */
  .stage-track { gap: var(--space-6); }
  .stage-card {
    flex-basis: min(40vw, 27rem);
    height: 34rem;
    padding: var(--space-7) var(--space-6) 0;
  }
  .stage-card p { max-width: 32ch; font-size: var(--text-body); }
}

/* --- Landing: trust --------------------------------------------------------- */

.trust-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-hairline);
}
.trust-list li {
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-hairline);
}
.trust-list h3 { margin: 0 0 var(--space-2); font-size: var(--text-title); }
.trust-list p { margin: 0; max-width: 44ch; color: var(--color-text-secondary); font-size: var(--text-sm); }

.trust-footnote {
  margin: var(--space-5) 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  color: var(--color-text-secondary);
}

/* --- Landing: final call to action ------------------------------------------ */

.cta-band { border-top: 0; }
.cta-inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
.cta-mark { width: 56px; height: 56px; object-fit: contain; }
.cta-copy h2 { margin: 0 0 var(--space-2); font-size: var(--text-display-3); }
.cta-copy p { margin: 0; max-width: 46ch; }

/* --- Landing: responsive ----------------------------------------------------- */

@media (min-width: 40rem) {
  .deflist-row { grid-template-columns: minmax(9rem, 15rem) 1fr; gap: var(--space-6); }

  .trust-list { grid-template-columns: repeat(3, 1fr); }
  .trust-list li { padding-inline: var(--space-5); }
  .trust-list li:first-child { padding-left: 0; }
  .trust-list li:last-child { padding-right: 0; }
  .trust-list li + li { border-left: 1px solid var(--color-hairline); }
}

@media (min-width: 60rem) {
  .hero-band {
    min-height: calc(100svh - var(--header-h));
    padding-top: var(--space-6);
  }

  .hero-grid {
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    min-height: calc(100svh - var(--header-h) - var(--space-6));
    gap: clamp(var(--space-5), 3vw, var(--space-7));
  }

  .hero-device {
    grid-column: 1;
    grid-row: 1;
    width: clamp(24rem, 32vw, 29rem);
    margin-right: 0;
    margin-left: clamp(-4rem, -3vw, -2rem);
  }

  .hero-copy {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    padding-top: clamp(var(--space-7), 10vh, var(--space-9));
    padding-left: clamp(0px, 2vw, var(--space-6));
  }

  .cta-inner { grid-template-columns: auto 1fr auto; gap: var(--space-7); }
}

/* --- Landing: hero entrance -------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: hesia-rise 620ms var(--ease) backwards; }
  .hero-copy > *:nth-child(1) { animation-delay: 40ms; }
  .hero-copy > *:nth-child(2) { animation-delay: 100ms; }
  .hero-copy > *:nth-child(3) { animation-delay: 160ms; }
  .hero-copy > *:nth-child(4) { animation-delay: 220ms; }
}

@keyframes hesia-rise {
  from { opacity: 0; transform: translateY(10px); }
}

/* --- Landing: scroll choreography -----------------------------------------
   Motion lives in transforms and opacity only, keeping scrolling on the
   compositor. The existing palette remains the single source of color. ---- */

.landing-page .site-header {
  transition: box-shadow 360ms var(--ease), backdrop-filter 360ms var(--ease),
              -webkit-backdrop-filter 360ms var(--ease);
}

.landing-page .site-header.is-scrolled {
  box-shadow: 0 8px 30px var(--color-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

.scroll-progress {
  position: fixed;
  z-index: 200;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
  transform-origin: left center;
}

.scroll-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left center;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .landing-page [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.985);
    transition: opacity 760ms var(--ease), transform 900ms var(--ease);
    transition-delay: calc(var(--reveal-order, 0) * 85ms);
    will-change: transform, opacity;
  }

  .landing-page [data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .hero-phone-motion {
    transform:
      translate3d(calc(var(--hero-scroll, 0) * 72px),
                  calc(var(--hero-scroll, 0) * -92px), 0)
      rotate(calc(-4deg + var(--hero-scroll, 0) * 3deg));
    transform-origin: 50% 80%;
    will-change: transform;
  }

  .hero-phone-motion .device-shot {
    animation: none;
  }

  .hero-copy {
    transform: translate3d(0, calc(var(--hero-scroll, 0) * 24px), 0);
    opacity: calc(1 - var(--hero-scroll, 0) * .72);
    will-change: transform, opacity;
  }

  .tour-frame {
    transform: perspective(1000px)
               translate3d(0, calc((var(--scene-progress, .5) - .5) * -42px), 0)
               rotateZ(calc((var(--scene-progress, .5) - .5) * 1.4deg));
    transition: transform 700ms var(--ease);
    will-change: transform;
  }

  .approach-phone-home {
    transform: translate3d(0, calc((var(--scene-progress, .5) - .5) * -90px), 0)
               rotate(calc(-7deg + (var(--scene-progress, .5) - .5) * 7deg));
    will-change: transform;
  }

  .approach-phone-player {
    transform: translate3d(0, calc((var(--scene-progress, .5) - .5) * 105px), 0)
               rotate(calc(6deg + (var(--scene-progress, .5) - .5) * -8deg));
    will-change: transform;
  }

  .approach-orbit {
    transform: rotate(calc(-15deg + var(--scene-progress, .5) * 22deg));
    will-change: transform;
  }

  .watch-motion {
    transform: translate3d(0, calc((var(--watch-scroll, .5) - .5) * -70px), 0)
               rotate(calc((var(--watch-scroll, .5) - .5) * 4deg));
    will-change: transform;
  }

  .watch-motion img {
    animation: hesia-watch-float 6.4s ease-in-out infinite;
    transform-origin: 50% 55%;
    will-change: transform;
  }

  .stage-card {
    transition: transform 500ms var(--ease), box-shadow 500ms var(--ease);
  }

  .stage-card:nth-child(odd) { transform: translateY(18px); }
  .stage-card:nth-child(even) { transform: translateY(-6px); }
  .stage-card:hover { transform: translateY(-12px) rotate(.5deg); }

  .stage-shot { transition: transform 700ms var(--ease); }
  .stage-card:hover .stage-shot { transform: translateY(-14px) scale(1.025); }

  .cta-mark {
    animation: hesia-mark-float 5s ease-in-out infinite;
    filter: drop-shadow(0 14px 18px var(--color-shadow));
  }
}

@keyframes hesia-screen-arrive {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.975); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes hesia-mark-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-9px) rotate(2deg); }
}

@keyframes hesia-phone-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.35deg); }
  50% { transform: translate3d(0, -11px, 0) rotate(.55deg); }
}

@keyframes hesia-watch-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.7deg); }
  48% { transform: translate3d(0, -13px, 0) rotate(.9deg); }
}

/* Mobile gets the same rhythm with shorter travel and no sticky traps. */
@media (max-width: 47.999rem) {
  :root { --band: clamp(56px, 17vw, 76px); }

  html { scroll-snap-type: none; }

  .header-inner { gap: var(--space-2); }
  .brand { gap: var(--space-2); min-width: 0; }
  .brand-logo { width: 30px; height: 30px; }
  .brand-word { font-size: 1.05rem; letter-spacing: .16em; }
  .header-actions { flex: none; gap: var(--space-1); }
  .lang-switch button { min-width: 32px; }
  .nav-toggle { width: 38px; height: 38px; }

  .hero-band {
    padding-top: var(--space-6);
    padding-bottom: var(--space-8);
  }

  .hero-grid { gap: var(--space-6); }
  .hero-copy { min-width: 0; text-align: left; }
  .hero-copy h1 { font-size: clamp(2.55rem, 12vw, 3.65rem); }
  .hero-copy .lead {
    max-width: 100%;
    font-size: 1.08rem;
    line-height: 1.58;
    overflow-wrap: anywhere;
  }
  .hero-actions { align-items: flex-start; margin-top: var(--space-5); }
  .hero-actions .text-link { padding-block: var(--space-2); }

  .hero-device {
    width: min(78vw, 19rem);
    margin-left: -5vw;
    margin-right: auto;
    margin-top: var(--space-3);
    margin-bottom: calc(var(--space-9) * -.72);
  }

  .hero-phone-motion {
    transform:
      translate3d(calc(var(--hero-scroll, 0) * 34px),
                  calc(var(--hero-scroll, 0) * -48px), 0)
      rotate(calc(-3deg + var(--hero-scroll, 0) * 2deg));
  }

  .approach-showcase {
    gap: var(--space-5);
    margin-bottom: var(--space-7);
  }
  .approach-devices {
    width: min(96vw, 25rem);
    height: min(31rem, 124vw);
    margin-top: calc(var(--space-3) * -1);
  }
  .approach-phone-home { left: 0; width: 57%; }
  .approach-phone-player { right: 0; width: 50%; }

  .band-head { margin-bottom: var(--space-6); }
  .deflist-row { padding-block: var(--space-5); }

  .tour { gap: 0; }
  .tour-stage { display: none; }
  .tour-step {
    grid-template-columns: minmax(0, 1fr);
    min-height: 20rem;
    padding-block: var(--space-6);
  }
  .tour-num { display: none; }
  .tour-step > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 38vw);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-3);
    align-items: center;
  }
  .tour-step h3,
  .tour-step p { grid-column: 1; }
  .tour-step h3 { align-self: end; }
  .tour-step p { align-self: start; }
  .tour-inline {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: auto;
    height: min(18rem, 76vw);
    max-width: 100%;
    margin-inline: auto;
    object-fit: contain;
    opacity: .36;
    transform: translate3d(0, 2rem, 0) scale(.96);
    transition: opacity 520ms var(--ease), transform 760ms cubic-bezier(.18, .72, .18, 1);
  }
  .tour-step.is-active .tour-inline {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .watch-grid { gap: var(--space-7); }
  .watch-device { width: min(86vw, 21rem); }

  .stage-track { gap: var(--space-4); padding-bottom: var(--space-5); }
  .stage-card {
    flex-basis: min(84vw, 20rem);
    height: min(29rem, 122vw);
    padding: var(--space-5) var(--space-5) 0;
  }
  .stage-card:nth-child(n) { transform: none; }
  .stage-shot { width: 72%; margin-top: var(--space-5); }

  .trust-list li { padding-block: var(--space-5); }
  .cta-inner { text-align: left; }
}

@media (max-width: 23rem) {
  .hero-actions { display: grid; justify-items: start; }
  .app-store-button { min-height: 52px; }
}

/* --- Life stages: compact horizontal carousel ----------------------------- */

.stage-carousel { position: relative; min-width: 0; }

.stage-grid {
  display: flex;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-1) 0 var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1px;
  scrollbar-width: none;
  list-style: none;
}
.stage-grid::-webkit-scrollbar { display: none; }

.stage-grid .stage-card {
  position: relative;
  display: block;
  flex: 0 0 min(82vw, 21rem);
  width: auto;
  height: 24rem;
  padding: var(--space-6) var(--space-5) 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--stage-surface, var(--color-surface-elevated));
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  opacity: .88;
  transition: opacity 420ms var(--ease), transform 520ms var(--ease);
}

.stage-grid .stage-card.is-stage-active { opacity: 1; }
.stage-grid .stage-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 var(--space-2);
  font-size: var(--text-display-3);
}
.stage-grid .stage-card p {
  position: relative;
  z-index: 2;
  max-width: 25ch;
  font-size: var(--text-sm);
}

.stage-grid .stage-shot {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -38%;
  width: 58%;
  margin: 0;
  opacity: .58;
  transform: translate3d(-50%, 60px, 0);
  transform-origin: 50% 80%;
  transition: transform 760ms cubic-bezier(.2, .7, .25, 1), opacity 520ms var(--ease);
  will-change: transform, opacity;
}

.stage-carousel:not(.is-carousel-entered) .stage-shot {
  opacity: .35;
  transform: translate3d(-50%, 60px, 0);
}

.stage-carousel.is-carousel-entered .stage-card.is-stage-active .stage-shot {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.stage-grid .stage-card:hover .stage-shot {
  transform: translate3d(-50%, 48px, 0);
}
.stage-carousel.is-carousel-entered .stage-card.is-stage-active:hover .stage-shot {
  transform: translate3d(-50%, 0, 0);
}

.stage-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.stage-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 8rem;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}
.stage-status i { width: 3rem; height: 1px; background: var(--color-hairline); }

.stage-buttons { display: flex; gap: var(--space-2); }
.stage-buttons button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  font-size: 1.1rem;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.stage-buttons button:hover:not(:disabled) { transform: translateY(-2px); }
.stage-buttons button:disabled { opacity: .3; cursor: default; }

@media (min-width: 48rem) {
  .stage-grid .stage-card {
    flex-basis: clamp(21rem, 32vw, 24rem);
    height: 27rem;
    padding: var(--space-6);
  }

  .stage-grid .stage-shot {
    bottom: -40%;
    width: 56%;
  }
}

@media (max-width: 47.999rem) {
  html, body { max-width: 100%; overflow-x: clip; }
  .site-header { width: 100%; }
  .site-header .site-shell { width: calc(100% - 32px); }
  .header-inner, .header-actions { min-width: 0; }
  #stages .band-head { margin-bottom: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .hero-copy, .hero-phone-motion, .hero-phone-motion .device-shot,
  .approach-phone, .approach-orbit, .tour-frame,
  .watch-motion, .watch-motion img,
  .stage-card:nth-child(n) { transform: none; opacity: 1; }

  .hero-phone-motion .device-shot,
  .watch-motion img { animation: none; }

  .stage-grid .stage-shot {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
    transition: none;
    animation: none !important;
  }

  .tour-inline {
    opacity: 1;
    transform: none;
    transition: none;
  }
}