/* Aureley website — self-hosted fonts (BB-5: replaces the token file's
   Google Fonts CDN import; latin subsets, variable weight axes). */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-var-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: 'DM Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-var-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: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-mono-400-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;
}

/* Aureley — Color Tokens */

:root {
  /* ── Background Gradient ─────────────────────────────────── */
  --color-gradient-violet:     #6A4EC0;   /* 0%  — nav zone, fully legible white */
  --color-gradient-mauve:      #9B5292;   /* 33% — white headings + body safe */
  --color-gradient-blush:      #C46A88;   /* 66% — large white headings safe */
  --color-gradient-coral:      #E08870;   /* 100%— lightest; text via glass only */

  --gradient-bg: linear-gradient(
    180deg,
    var(--color-gradient-violet) 0%,
    var(--color-gradient-mauve)  33%,
    var(--color-gradient-blush)  66%,
    var(--color-gradient-coral)  100%
  );

  /* ── Aureley Accent Palette ──────────────────────────────── */
  --color-aureley-orange:  #E07036;   /* Primary CTA, progress, FAB, active tab */
  --color-aureley-teal:    #4A8A87;   /* Success, saved, secondary buttons */
  --color-aureley-blue:    #3EB4F0;   /* AI features, quota fill, notifications */
  --color-aureley-red:     #C0393C;   /* GRADIENT STOP ONLY — never as UI color */

  /* ── Mascot Color References ─────────────────────────────── */
  --color-mascot-body:    #F0EDE8;   /* Pearl/off-white body */
  --color-mascot-joints:  #3A3A3A;   /* Charcoal articulated connections */

  /* ── Surface Palette ─────────────────────────────────────── */
  --surface-glass-bg:         rgba(255, 255, 255, 0.12);
  --surface-glass-border:     rgba(255, 255, 255, 0.22);
  --surface-glass-blur:       20px;

  --surface-dark-bg:          rgba(10, 5, 25, 0.70);
  --surface-dark-border:      rgba(255, 255, 255, 0.14);

  --surface-nav-bg:           rgba(10, 5, 25, 0.50);
  --surface-nav-blur:         10px;

  /* ── Text Color Scale ────────────────────────────────────── */
  --text-primary:     #FFFFFF;              /* 100% — headings, body, labels */
  --text-secondary:   rgba(255,255,255,0.70); /* Supporting copy, descriptions */
  --text-muted:       rgba(255,255,255,0.45); /* Placeholders, disabled, timestamps */

  /* ── Semantic Aliases ────────────────────────────────────── */
  --color-primary:     var(--color-aureley-orange);
  --color-success:     var(--color-aureley-teal);
  --color-ai:          var(--color-aureley-blue);
  --color-destructive: var(--color-aureley-red);

  --surface-card:      var(--surface-glass-bg);
  --surface-overlay:   var(--surface-dark-bg);

  --text-body:         var(--text-primary);
  --text-caption:      var(--text-secondary);
  --text-placeholder:  var(--text-muted);
}

/* Aureley — Typography Tokens */


:root {
  /* ── Font Families ───────────────────────────────────────── */
  --font-display:   'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:      'DM Sans', system-ui, sans-serif;
  --font-mono:      'DM Mono', 'Courier New', monospace;

  /* ── Font Weights ────────────────────────────────────────── */
  --font-weight-extrabold: 800;
  --font-weight-bold:      700;
  --font-weight-medium:    500;
  --font-weight-regular:   400;

  /* ── Type Scale (sp → px, 1sp ≈ 1px at 1x) ─────────────── */
  --text-size-display:  38px;   /* H1 Display: 32–40sp */
  --text-size-h2:       26px;   /* H2: 24–28sp */
  --text-size-body:     15px;   /* Body: 14–16sp */
  --text-size-label:    12px;   /* Label: 11–13sp */
  --text-size-mono:     13px;   /* Mono: 12–14sp */

  /* ── Line Heights ────────────────────────────────────────── */
  --line-height-display: 1.15;
  --line-height-h2:      1.25;
  --line-height-body:    1.55;
  --line-height-label:   1.3;
  --line-height-mono:    1.4;

  /* ── Letter Spacing ──────────────────────────────────────── */
  --letter-spacing-display: -0.5px;
  --letter-spacing-h2:      -0.25px;
  --letter-spacing-label:    0.4px;
  --letter-spacing-mono:     0px;

  /* ── Semantic Type Aliases ───────────────────────────────── */
  --type-display: var(--font-weight-extrabold) var(--text-size-display)/var(--line-height-display) var(--font-display);
  --type-h2:      var(--font-weight-bold)      var(--text-size-h2)/var(--line-height-h2)      var(--font-display);
  --type-body:    var(--font-weight-regular)   var(--text-size-body)/var(--line-height-body)   var(--font-body);
  --type-label:   var(--font-weight-medium)    var(--text-size-label)/var(--line-height-label) var(--font-body);
  --type-mono:    var(--font-weight-regular)   var(--text-size-mono)/var(--line-height-mono)   var(--font-mono);
}

/* Aureley — Spacing & Layout Tokens */

:root {
  /* ── Base Spacing Scale (4px base) ───────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Corner Radius ───────────────────────────────────────── */
  --radius-sm:   8px;    /* Chips, badges, small tags */
  --radius-md:  12px;    /* Buttons, inputs */
  --radius-lg:  16px;    /* Cards, bottom sheets */
  --radius-xl:  24px;    /* Large cards, modals */
  --radius-full: 9999px; /* Pills, FAB, avatar */

  /* ── Icon & Touch Targets ────────────────────────────────── */
  --icon-size:         24px;    /* Visual icon size */
  --touch-target:      44px;    /* Minimum accessible touch area */
  --icon-btn-size:     44px;    /* Icon button container */

  /* ── Component Sizing ─────────────────────────────────────── */
  --btn-height-sm:   36px;
  --btn-height-md:   44px;
  --btn-height-lg:   52px;

  --input-height:    48px;

  --nav-height:      72px;   /* Bottom navigation bar */
  --player-height:   88px;   /* Persistent player bar */

  /* ── Z-index Scale ────────────────────────────────────────── */
  --z-base:      0;    /* @kind other */
  --z-card:      10;   /* @kind other */
  --z-player:    100;  /* @kind other */
  --z-nav:       200;  /* @kind other */
  --z-modal:     300;  /* @kind other */
  --z-toast:     400;  /* @kind other */
  --z-overlay:   500;  /* @kind other */

  /* ── Animation ────────────────────────────────────────────── */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);       /* @kind other */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);          /* @kind other */
  --duration-fast:   150ms; /* @kind other */
  --duration-base:   250ms; /* @kind other */
  --duration-slow:   400ms; /* @kind other */
}

/* Aureley — Surface & Glass System Tokens */

:root {
  /* ── Glass Card ───────────────────────────────────────────── */
  /* Use for: library items, voice tiles, content cards, onboarding steps */
  --glass-card-background:    rgba(255, 255, 255, 0.12);
  --glass-card-border:        0.5px solid rgba(255, 255, 255, 0.22); /* @kind other */
  --glass-card-backdrop:      blur(20px); /* @kind other */
  --glass-card-radius:        var(--radius-lg);
  /* NOTE: no drop-shadow on glass cards — blur + border only */

  /* ── Dark Overlay ─────────────────────────────────────────── */
  /* Use for: player bar, bottom sheets, modals */
  --dark-overlay-background:  rgba(10, 5, 25, 0.70);
  --dark-overlay-border:      0.5px solid rgba(255, 255, 255, 0.14); /* @kind other */
  --dark-overlay-backdrop:    blur(24px); /* @kind other */

  /* ── Navigation Bar ───────────────────────────────────────── */
  /* Use for: persistent bottom nav */
  --nav-background:           rgba(10, 5, 25, 0.50);
  --nav-backdrop:             blur(10px); /* @kind other */

  /* ── Interaction States ───────────────────────────────────── */
  --hover-glass-bg:           rgba(255, 255, 255, 0.18);
  --pressed-glass-bg:         rgba(255, 255, 255, 0.08);
  --disabled-opacity:         0.4; /* @kind other */

  /* ── Focus Ring ───────────────────────────────────────────── */
  --focus-ring:               0 0 0 3px rgba(62, 180, 240, 0.55);
}

/* Aureley website — site styles on top of the vendored app tokens.
   Web-scale extensions (type clamps, section rhythm) are deliberate
   brand breaks, logged in BRAND-BREAKS.md (BB-1, BB-3, BB-10). */

/* ── Reset-lite ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, video, canvas { display: block; max-width: 100%; height: auto; }
/* the hidden attribute must win over display rules (a poster left showing under its own clip) */
[hidden] { display: none !important; }
input, button, textarea, select { font: inherit; }

/* ── Web-only token extensions ──────────────────────────────── */
:root {
  --space-24: 96px;
  --space-32: 128px;
  --radius-web-xl: 32px;              /* BB-3: large web cards */
  --text-size-body-web: 17px;         /* BB-10: 15px app body reads small at web distance */
  --measure: 62ch;
  --container: min(1120px, 92vw);
  --nav-h: 76px;

  /* ── One type scale (polish pass 12-08-26) ──────────────────
     Every size on the site resolves to one of these. Before this,
     h1 rendered at two sizes and h2 at seven across the 16 pages,
     because each page grew its own clamp. Steps are ~1.4x apart at
     the top so hierarchy survives the smaller ceiling Mel asked for
     (display was 84px, now 56px). Mobile ends are the min values. */
  --fs-display: clamp(2.25rem, 1.35rem + 3vw, 3.5rem);       /* 36 → 56 */
  --fs-h2:      clamp(1.75rem, 1.35rem + 1.35vw, 2.5rem);    /* 28 → 40 */
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);      /* 20 → 24 */
  --fs-h4:      clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);  /* 17 → 19 */
  --fs-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);     /* 17 → 20 */
  --fs-body:    var(--text-size-body-web);                   /* 17 */
  --fs-small:   0.875rem;                                    /* 14 */
  --fs-mono:    0.8125rem;                                   /* 13 */
  --fs-micro:   0.6875rem;                                   /* 11 */

  /* ── One spacing rhythm ─────────────────────────────────────
     Was 11 distinct section paddings and 10 distinct gaps. Tight
     groupings stay tight; only the between-section beat is generous. */
  --sec-y:    clamp(2.5rem, 4vw, 4rem);       /* 40 → 64  between sections */
  --gap-xl:   clamp(2rem, 3.2vw, 3rem);       /* 32 → 48  two-column splits */
  --gap-lg:   var(--space-8);                 /* 32 */
  --gap-md:   var(--space-6);                 /* 24 */
  --gap-sm:   var(--space-4);                 /* 16 */
  --gap-xs:   var(--space-2);                 /*  8 */
  --pad-card: clamp(1.5rem, 2.4vw, 2.25rem);  /* 24 → 36  inside every card */
}

/* Phone: labels and micro-copy get a floor. 13px mono reads fine at a
   desk and badly in one hand; body was already 17px. */
@media (max-width: 699px) {
  :root {
    --fs-mono:  0.875rem;   /* 13 → 14 */
    --fs-micro: 0.75rem;    /* 11 → 12 */
  }
}

/* ── Base ───────────────────────────────────────────────────── */
/* The sunrise gradient lives on html, NOT body: fixed layers with negative
   z-index (aurora canvas, floating pages) paint above the root background
   but would paint BEHIND a body background — a body gradient makes them
   invisible. Learned the hard way 11-08-26. */
html {
  background-image: var(--gradient-bg);
  background-color: var(--color-gradient-violet);
  /* R-179: no smooth scroll. A link to a section jumps straight to it, with no frames in between */
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-size-body-web);
  line-height: var(--line-height-body);
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
/* R-81: nothing inside the page may push it sideways on a phone. iPhone and iPad ignore
   overflow on html/body for panning, so the clip sits on main and the footer. */
main, .footer { overflow-x: clip; }

/* Aurora canvas mount — sits behind everything, painted by aurora.js */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden; /* the canvas bleeds 8% past each edge; never let it widen the page (R-81) */
}

/* ── Pages in the air — documents drifting through the whole page ── */
.pages-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.2;
  perspective: 900px;
}
.pages-sky span {
  position: absolute;
  will-change: transform;
  display: block;
  width: 64px;
  height: 84px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 14px,
      rgba(106, 78, 192, 0.5) 14px 17px) content-box,
    #fff;
  padding: 12px 9px;
  box-shadow: 0 12px 28px rgba(10, 5, 25, 0.25);
  animation: page-toss var(--pd, 26s) linear infinite;
  animation-delay: var(--pdel, 0s);
  left: var(--px, 50%);
  top: 110%;
}
.pages-sky span:nth-child(1)  { --px: 4%;  --pd: 31s; --pdel: -3s;  scale: 0.7; }
.pages-sky span:nth-child(2)  { --px: 12%; --pd: 24s; --pdel: -14s; scale: 1.1; }
.pages-sky span:nth-child(3)  { --px: 21%; --pd: 36s; --pdel: -8s;  scale: 0.5; }
.pages-sky span:nth-child(4)  { --px: 30%; --pd: 27s; --pdel: -20s; scale: 0.9; }
.pages-sky span:nth-child(5)  { --px: 38%; --pd: 33s; --pdel: -5s;  scale: 0.6; }
.pages-sky span:nth-child(6)  { --px: 47%; --pd: 25s; --pdel: -17s; scale: 1.2; }
.pages-sky span:nth-child(7)  { --px: 55%; --pd: 30s; --pdel: -11s; scale: 0.8; }
.pages-sky span:nth-child(8)  { --px: 63%; --pd: 38s; --pdel: -2s;  scale: 0.55; }
.pages-sky span:nth-child(9)  { --px: 71%; --pd: 26s; --pdel: -22s; scale: 1.0; }
.pages-sky span:nth-child(10) { --px: 79%; --pd: 34s; --pdel: -7s;  scale: 0.65; }
.pages-sky span:nth-child(11) { --px: 86%; --pd: 28s; --pdel: -15s; scale: 0.9; }
.pages-sky span:nth-child(12) { --px: 93%; --pd: 32s; --pdel: -4s;  scale: 0.75; }
.pages-sky span:nth-child(13) { --px: 26%; --pd: 40s; --pdel: -28s; scale: 0.45; }
.pages-sky span:nth-child(14) { --px: 60%; --pd: 37s; --pdel: -25s; scale: 0.5; }
@keyframes page-toss {
  0% {
    transform: translateY(0) rotateZ(-8deg) rotateY(12deg) rotateX(8deg);
  }
  50% {
    transform: translateY(-60vh) translateX(4vw) rotateZ(14deg) rotateY(-30deg) rotateX(-12deg);
  }
  100% {
    transform: translateY(-125vh) translateX(-3vw) rotateZ(-12deg) rotateY(24deg) rotateX(10deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pages-sky { display: none; }
}

::selection { background: rgba(224, 112, 54, 0.55); color: #fff; }

/* ── Typography ─────────────────────────────────────────────── */
h1, .display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--fs-display);   /* BB-1, retuned 12-08: 36px → 56px */
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h1-line { display: block; }
h2 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h2);
  line-height: var(--line-height-h2);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h3);
  line-height: 1.3;
}
p { max-width: var(--measure); }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-secondary);
}
.muted { color: var(--text-secondary); }
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--letter-spacing-mono);
}
a { color: inherit; }

/* ── Layout ─────────────────────────────────────────────────── */
.container { width: var(--container); margin-inline: auto; }
.section { padding-block: calc(var(--sec-y) / 2); }

/* ── Glass surfaces (Level-C: luminous, layered, alive) ─────── */
.glass {
  position: relative;
  background: linear-gradient(155deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.14) 100%);
  border: 1px solid transparent;
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  border-radius: var(--radius-xl);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 24px 48px rgba(10, 5, 25, 0.18);
}
.overlay-dark {
  background: linear-gradient(160deg, rgba(30, 14, 54, 0.78) 0%, rgba(10, 5, 25, 0.72) 60%, rgba(26, 10, 44, 0.78) 100%);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  border-radius: var(--radius-xl);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 24px 48px rgba(10, 5, 25, 0.28);
}
.card-web { border-radius: var(--radius-web-xl); }

/* film grain over everything — texture, not noise */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 550;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-height-md);
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring),
              background-color var(--duration-fast) var(--ease-smooth),
              box-shadow var(--duration-base) var(--ease-smooth);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }

/* White-on-orange is 3.21:1 — AA passes at large-text size only,
   so primary CTAs are always ≥19px bold (D-144). */
/* Tinted glass rather than a solid orange block (Mel, 12-08-26 live session):
   the orange reads as an outline and a wash, not a shouted slab. */
/* Tinted glass rather than a solid orange block (Mel, 12-08-26 live session).
   The dark base is load-bearing, not decoration: the approved look was an orange
   wash over the dark nav bar, and without its own base the wash sits straight on
   the coral pricing cards at 1.8:1 contrast. */
.btn-primary {
  background:
    linear-gradient(0deg, rgba(224, 112, 54, 0.18), rgba(224, 112, 54, 0.18)),
    rgba(14, 7, 30, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(224, 112, 54, 0.55);
  color: #ffe3cd;
  font-weight: var(--font-weight-medium);
  font-size: var(--fs-h4);
  min-height: var(--btn-height-lg);
  padding: 0 var(--space-8);
}
.btn-primary:hover {
  background:
    linear-gradient(0deg, rgba(224, 112, 54, 0.30), rgba(224, 112, 54, 0.30)),
    rgba(14, 7, 30, 0.76);
  border-color: rgba(224, 112, 54, 0.85);
}
.btn-glass {
  background: var(--surface-glass-bg);
  border: 0.5px solid var(--surface-glass-border);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #fff;
}
.btn-glass:hover { background: var(--hover-glass-bg); }

/* ── Focus ──────────────────────────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-16));
  z-index: 600;
  padding: var(--space-3) var(--space-5);
  background: var(--surface-dark-bg);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-radius: var(--radius-md);
  color: #fff;
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-4); }

/* ── Nav ────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--surface-nav-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 0.5px solid var(--surface-dark-border);
  transition: translate 280ms var(--ease-out);
}
/* R-79: the bar steps aside while the reader scrolls down and returns on the way up, so the
   menu button never parks over the audio timer or any other control (site.js sets the class) */
.nav.nav-away { translate: 0 -100%; }
.nav:focus-within { translate: none; }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
.nav-inner {
  width: var(--container);
  margin-inline: auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
}
.nav-logo { display: inline-flex; border-radius: var(--radius-sm); }
.nav-logo img { width: 140px; height: auto; }
.nav-links {
  display: flex;
  gap: var(--gap-md);
  margin-left: auto;
}
.nav-links a {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-smooth);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; }
.nav-cta { min-height: var(--btn-height-sm); font-size: var(--fs-h4); }

/* Mobile menu — <details> disclosure, no JS required */
.nav-menu { display: none; position: relative; margin-left: auto; }
.nav-menu summary {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu-bar {
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transition: transform var(--duration-fast) var(--ease-smooth);
}
.nav-menu[open] .nav-menu-bar:first-child { transform: translateY(4px) rotate(45deg); }
.nav-menu[open] .nav-menu-bar:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav-sheet {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-3));
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface-dark-bg);
  border: 0.5px solid var(--surface-dark-border);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-radius: var(--radius-lg);
}
.nav-sheet a {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  color: #fff;
  text-decoration: none;
  padding: var(--space-3);
  border-radius: var(--radius-md);
}
.nav-sheet a:hover { background: var(--hover-glass-bg); }
.nav-sheet .btn { margin-top: var(--space-3); }

@media (max-width: 799px) {
  .nav-links, .nav-cta { display: none; }
  .nav-menu { display: block; }
  .nav-inner { gap: var(--gap-sm); }
}

/* ── Touch devices ───────────────────────────────────────────
   iPad keeps the full nav (it has the width for it), but a 39px
   link and a 36px button are misses under a finger. Height comes
   from padding, so nothing shifts on a mouse-driven desktop.
   44px is the Apple HIG / WCAG 2.5.5 floor. */
@media (pointer: coarse) {
  .nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target);
    min-width: var(--touch-target);   /* "FAQ" is only 39px of word */
    padding-block: var(--space-3);
    padding-inline: var(--space-3);
  }
  .nav-cta { min-height: var(--touch-target); }
  .nav-logo { align-items: center; min-height: var(--touch-target); }
  .nav-sheet a { display: flex; align-items: center; min-height: var(--touch-target); }
  .footer-cols a { display: inline-flex; align-items: center; min-height: var(--touch-target); }
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  margin-top: clamp(1.5rem, 3vw, 2.75rem);
  background: var(--surface-dark-bg);
  border-top: 0.5px solid var(--surface-dark-border);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.footer-inner {
  width: var(--container);
  margin-inline: auto;
  padding-block: var(--sec-y) var(--gap-lg);
  display: grid;
  gap: var(--gap-xl);
}
.footer-brand img { width: 150px; }
.footer-line { margin-top: var(--space-4); color: var(--text-secondary); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap-lg);
}
.footer-h {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.footer-cols a {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  padding-block: var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-smooth);
}
.footer-cols a:hover { color: #fff; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  justify-content: space-between;
  padding-top: var(--space-6);
  border-top: 0.5px solid var(--surface-dark-border);
  color: var(--text-muted);
  font-size: 0.875rem;
}
.footer-legal a { color: var(--text-secondary); }

/* ── Aurora canvas ──────────────────────────────────────────── */
.sky-canvas {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  /* the reset's max-width:100% clamps this back to viewport width, which left the
     canvas offset by its -8% inset and an unpainted band down the right edge */
  max-width: none;
  opacity: 0.9;
}

/* ── Read-along (the centrepiece) ───────────────────────────── */
.readalong .ra-line { margin-top: var(--space-5); }
.ra-word { transition: color 300ms var(--ease-smooth), text-shadow 300ms var(--ease-smooth); }
/* Words dim ONLY while actively playing/paused (a11y: default and ended
   states keep full-contrast copy — the dim is a transient focus effect). */
[data-state="playing"] .ra-word, [data-state="paused"] .ra-word { color: rgba(255, 255, 255, 0.55); }
[data-state="playing"] .lead .ra-word, [data-state="paused"] .lead .ra-word { color: rgba(255, 255, 255, 0.5); }
/* 7.1: the two hero lines added by 6.4 are NOT part of the recorded
   transcript, so they hold no .ra-word spans and the rule above cannot reach
   them: they stayed bright while the transcript dimmed. Dim the paragraph
   itself to the same un-spoken value. The transcript lines match too and are
   unaffected, because their words always carry their own colour while playing
   (0.5 unspoken, 0.95 spoken, #fff current). Only applies once player.js has
   set data-state, so the no-JS page keeps full-contrast copy. */
[data-state="playing"] .lead, [data-state="paused"] .lead { color: rgba(255, 255, 255, 0.5); }
[data-state="playing"] .ra-word.ra-done, [data-state="paused"] .ra-word.ra-done { color: rgba(255, 255, 255, 0.95); }
.ra-word.ra-now {
  color: #fff !important;
  text-shadow: 0 0 24px rgba(224, 112, 54, 0.85), 0 0 6px rgba(255, 255, 255, 0.4);
}

/* Player row */
.player {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-md);
  margin-top: var(--space-10);
}
.play-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-aureley-orange);
  color: #fff;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-slow) var(--ease-smooth),
              background-color var(--duration-fast) var(--ease-smooth);
  animation: play-glow 2.6s var(--ease-smooth) infinite;
}
.play-btn:hover { transform: scale(1.07); background: #E87E45; }
.play-btn:active { transform: scale(0.96); }
.play-btn svg { width: 34px; height: 34px; }
.ic-pause { display: none; }
[data-state="playing"] .ic-pause { display: block; }
[data-state="playing"] .ic-play { display: none; }
[data-state="playing"] .play-btn { animation: none; box-shadow: 0 0 44px 8px rgba(224, 112, 54, 0.5); }
@keyframes play-glow {
  0%, 100% { box-shadow: 0 0 18px 2px rgba(224, 112, 54, 0.35); }
  50% { box-shadow: 0 0 40px 10px rgba(224, 112, 54, 0.55); }
}
.player-hint {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  display: none;
}
/* The invitation player (accepted from /impeccable live, 12-08-26): the disc wears
   a halo that breathes until playback starts, then locks to a quiet white ring.
   State comes from the button's own aria-label, which player.js flips on play. */
.player-invite .play-btn { position: relative; }
.player-invite .play-btn::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(224, 112, 54, 0.88);
  animation: play-halo 2.8s var(--ease-smooth) infinite;
}
.player-invite .play-btn[aria-label="Pause"]::after {
  inset: -8px;
  border-color: rgba(255, 255, 255, 0.48);
  animation: none;
}
.player-invite .player-hint {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.5rem);
}
.player-invite .player-strip {
  opacity: 0.55;
  transition: opacity var(--duration-base) var(--ease-smooth);
}
.player-invite:hover .player-strip,
.player-invite:focus-within .player-strip { opacity: 1; }
@keyframes play-halo {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.09); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .player-invite .play-btn::after { animation: none; }
}
.player-strip { display: none; align-items: center; gap: var(--gap-sm); flex: 1 1 220px; }
.ra-ready .play-btn { display: inline-flex; }
.ra-ready .player-hint { display: inline; }
.ra-ready .player-strip { display: flex; }
.ra-ready .player audio { display: none; }
[data-state] .player-hint { display: none; }
.player-seek {
  flex: 1;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
}
.player-seek::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 0;
}
.player-seek::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 0;
}
.player-time { color: var(--text-muted); white-space: nowrap; }

/* Touch: the seek rail is 6px of paint. Keep the paint, give the finger a
   44px grab area. Must sit after the base rule above — a media query adds
   no specificity, so an earlier block would lose to it. */
@media (pointer: coarse) {
  .player-seek {
    height: var(--touch-target);
    background: none;
  }
  .player-seek::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.22);
  }
  .player-seek::-webkit-slider-thumb { margin-top: -6px; }
  .player-seek::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.22);
  }
}

/* Mascot stage — stacked images cross-fade */
.mascot-stage { position: relative; }
.mascot-stage img {
  width: min(420px, 100%);
  margin-inline: auto;
  transition: opacity 480ms var(--ease-smooth);
  animation: idle-bob 5.2s ease-in-out infinite;
}
.mascot-stage img + img { position: absolute; inset: 0; }
@keyframes idle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ── Features showcase ──────────────────────────────────────── */
.kicker {
  color: var(--color-aureley-orange);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: var(--fs-mono);
  margin-bottom: var(--space-4);
}
.features-title { font-size: var(--fs-h2); }
.feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--gap-xl);
  padding-block: calc(var(--sec-y) / 2);
}
.feature-flip .feature-copy { order: 2; }
.feature-flip .feature-visual { order: 1; }
.feature-ghost {
  position: absolute;
  top: -0.08em;
  right: -2%;
  z-index: 3;   /* foreground layer — the numeral rides OVER the visuals */
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: clamp(7rem, 14vw, 13rem);
  line-height: 1;
  background:
    radial-gradient(120% 90% at 20% 80%, rgba(224, 112, 54, 0.85) 0%, rgba(224, 112, 54, 0) 55%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 60%, rgba(224, 136, 112, 0.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.55;
  filter: drop-shadow(0 4px 20px rgba(10, 5, 25, 0.3));
  pointer-events: none;
  user-select: none;
}
.feature-flip .feature-ghost { right: auto; left: -2%; }
.feature-h { font-size: var(--fs-h3); line-height: 1.2; }
.feature-copy .lead { margin-top: var(--space-5); }

/* reveal on scroll — hidden only while site.js is running the observer (html.reveal-on) */
.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal-on [data-reveal].in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-on [data-reveal] { opacity: 1; transform: none; }
}

/* mini phone — live reader */
.phone {
  width: min(300px, 74vw);
  margin-inline: auto;
  border-radius: 44px;
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: linear-gradient(155deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.16) 100%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  backdrop-filter: blur(26px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 24px 48px rgba(10, 5, 25, 0.22);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}
.phone-top { display: flex; justify-content: center; }
.phone-top .mono { font-size: var(--fs-mono); color: var(--text-secondary); }
.phone-lines { display: grid; gap: 10px; padding-block: var(--space-2); }
.pl {
  height: 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.22);
}
.pl.short { width: 62%; }
.pl-hl {
  background: linear-gradient(90deg,
    var(--color-aureley-orange) 0%, var(--color-aureley-orange) 45%,
    rgba(255, 255, 255, 0.22) 45%, rgba(255, 255, 255, 0.22) 100%);
  background-size: 220% 100%;
  animation: pl-sweep 6s linear infinite;
}
@keyframes pl-sweep {
  0% { background-position: 100% 0; }
  100% { background-position: -20% 0; }
}
.phone-player { display: flex; align-items: center; gap: var(--space-3); }
.phone-play {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-aureley-orange);
  position: relative;
  flex: none;
}
.phone-play::after {
  content: '';
  position: absolute;
  left: 13px; top: 10px;
  border-left: 11px solid #fff;
  border-block: 7px solid transparent;
}
.phone-track { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.18); overflow: hidden; display: block; }
.phone-prog { display: block; height: 100%; width: 40%; background: #fff; border-radius: 3px; animation: prog 12s linear infinite; }
@keyframes prog { 0% { width: 6%; } 100% { width: 96%; } }

/* voice card — equalizer on gradient art */
.voicecard {
  width: min(420px, 100%);
  margin-inline: auto;
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
}
.eq { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.eq span {
  width: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  height: 30%;
  animation: eq-bounce 1.6s ease-in-out infinite;
}
.eq span:nth-child(1) { animation-delay: 0s; }
.eq span:nth-child(2) { animation-delay: 0.15s; }
.eq span:nth-child(3) { animation-delay: 0.3s; }
.eq span:nth-child(4) { animation-delay: 0.45s; }
.eq span:nth-child(5) { animation-delay: 0.6s; }
.eq span:nth-child(6) { animation-delay: 0.75s; }
.eq span:nth-child(7) { animation-delay: 0.9s; }
@keyframes eq-bounce {
  0%, 100% { height: 24%; }
  50% { height: 92%; }
}
.voicecard-label {
  color: #fff;
  background: var(--surface-dark-bg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
}

/* study stack */
.studystack { position: relative; width: min(380px, 100%); margin-inline: auto; }
.studycard {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
}
.studycard + .studycard {
  position: absolute;
  inset-inline: 0;
  bottom: -28%;
  transform: rotate(-3deg) scale(0.94);
  z-index: -1;
}
.studycard .mono { color: var(--color-aureley-blue); font-size: var(--fs-mono); }
.sc-line { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.25); }
.sc-line.short { width: 58%; }

/* honest meter */
.metercard {
  width: min(420px, 100%);
  margin-inline: auto;
  display: grid;
  gap: var(--gap-sm);
  padding: var(--pad-card);
  border-radius: var(--radius-xl);
}
.meter-row { display: flex; justify-content: space-between; gap: var(--gap-sm); }
.meter-row .mono { font-size: var(--fs-mono); }
.meter-val { color: var(--text-secondary); }
.meter-bar { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: var(--color-aureley-orange);
  transition: width 1.4s var(--ease-out) 300ms;
}
.in-view .meter-fill { width: 74%; }
.meter-fill.meter-full { background: var(--color-aureley-teal); }
.in-view .meter-fill.meter-full { width: 100%; }

@media (max-width: 899px) {
  .feature { grid-template-columns: 1fr; padding-block: var(--sec-y); }
  .feature-flip .feature-copy { order: 0; }
  .feature-flip .feature-visual { order: 1; }
  .feature-ghost { font-size: 6rem; right: 0; }
  .feature-flip .feature-ghost { left: 0; }
  .studystack { margin-bottom: 3rem; }
}

/* ── Gradient-art card system (reference: hot mesh panels on dark) ── */
.card-dark {
  background: #180B2E;
  border: 0.5px solid var(--surface-dark-border);
  border-radius: var(--radius-web-xl);
}
.g-art {
  background:
    radial-gradient(120% 90% at 12% 88%, rgba(224, 112, 54, 0.95) 0%, rgba(224, 112, 54, 0) 46%),
    radial-gradient(110% 90% at 88% 12%, rgba(62, 180, 240, 0.75) 0%, rgba(62, 180, 240, 0) 42%),
    radial-gradient(140% 110% at 78% 82%, rgba(196, 57, 60, 0.9) 0%, rgba(196, 57, 60, 0) 52%),
    radial-gradient(120% 120% at 30% 22%, #9B5292 0%, rgba(155, 82, 146, 0) 60%),
    linear-gradient(160deg, #6A4EC0 0%, #9B5292 45%, #C46A88 100%);
  border-radius: var(--radius-xl);
}

/* bubble glass — the light transparent look Mel locked 11-08 */
.glass-bubble {
  background: linear-gradient(155deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.16) 100%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  backdrop-filter: blur(26px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 24px 48px rgba(10, 5, 25, 0.22);
  border-radius: var(--radius-xl);
}

/* ── Cinematic bands — moments spread through the scroll ────── */
.band {
  position: relative;
  margin: clamp(1rem, 2vw, 1.75rem) 0;
  height: clamp(320px, 56vh, 560px);
  overflow: clip;
}
.band video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: object-position;
}
.band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 5, 25, 0.22) 0%, rgba(10, 5, 25, 0) 30%, rgba(10, 5, 25, 0) 60%, rgba(10, 5, 25, 0.34) 100%);
  pointer-events: none;
}
.band-caption {
  position: absolute;
  inset-inline: 0;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.band-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
}
.band-chip .mono { font-size: var(--fs-mono); }

.feature-visual { position: relative; }

/* ── Dynamic image entries — wipe in, settle ────────────────── */
.img-dynamic {
  border-radius: var(--radius-web-xl);
  border: 0.5px solid var(--surface-glass-border);
  box-shadow: 0 28px 56px rgba(10, 5, 25, 0.32);
  clip-path: inset(0 88% 0 0 round var(--radius-web-xl));
  transform: translateX(-44px) rotate(-2.5deg);
  transition: clip-path 950ms var(--ease-out), transform 950ms var(--ease-spring);
}
.img-dynamic-r {
  clip-path: inset(0 0 0 88% round var(--radius-web-xl));
  transform: translateX(44px) rotate(2.5deg);
}
.in-view .img-dynamic, .in-view.img-dynamic {
  clip-path: inset(0 0 0 0 round var(--radius-web-xl));
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .img-dynamic, .img-dynamic-r { clip-path: none; transform: none; transition: none; }
}
/* phones: the wipe stays, the sideways slide goes (it pushed images past the screen edge, R-81) */
@media (max-width: 899px) {
  .img-dynamic, .img-dynamic-r { transform: none; }
}

/* features head: title + jogging figure */
.features-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: var(--gap-xl);
}
.head-figure { position: relative; margin: 0; }
/* layered look (matches the desk scene): offset backing plate behind the photo */
.head-figure::before {
  content: '';
  position: absolute;
  inset: -7% auto auto -6%;
  width: 70%;
  height: 80%;
  background: rgba(10, 5, 25, 0.35);
  border-radius: var(--radius-web-xl);
  transform: rotate(-3deg);
  z-index: -1;
}
.moment-tag {
  position: absolute;
  left: calc(-1 * var(--space-6));
  bottom: calc(-1 * var(--space-4));
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  transform: rotate(-2deg);
}
.moment-tag .mono { font-size: var(--fs-mono); }
@media (max-width: 899px) {
  .moment-tag { left: var(--space-3); bottom: var(--space-3); transform: none; }
}

/* content riding on light bubble glass needs stronger marks */
.glass-bubble .sc-line { background: rgba(255, 255, 255, 0.55); }
.glass-bubble .mono { color: #fff; }
.phone .pl { background: rgba(255, 255, 255, 0.42); }
.phone .pl-hl {
  background: linear-gradient(90deg,
    var(--color-aureley-orange) 0%, var(--color-aureley-orange) 45%,
    rgba(255, 255, 255, 0.42) 45%, rgba(255, 255, 255, 0.42) 100%);
  background-size: 220% 100%;
}
.glass-bubble .meter-bar, .metercard .meter-bar { background: rgba(255, 255, 255, 0.3); }

/* study scene: image with study cards riding it */
.study-scene { position: relative; margin: 0; width: min(460px, 100%); margin-inline: auto; }
.study-over {
  position: absolute;
  right: -6%;
  bottom: -10%;
  width: 62%;
  transform: rotate(2deg);
}
.study-over-2 {
  right: auto;
  left: -6%;
  bottom: auto;
  top: -10%;
  width: 52%;
  transform: rotate(-3deg);
}

/* split band (cooking) — video contained, never cropped */
.band-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: var(--gap-xl);
  padding-block: calc(var(--sec-y) / 2);
}
.band-split-copy { padding: var(--pad-card); }
.band-split-copy .lead { margin-top: var(--space-4); }
.band-split-media { margin: 0; position: relative; } /* anchors the v1.2 caption chip */
.band-split-media video { width: 100%; height: auto; border-radius: var(--radius-web-xl); }

@media (max-width: 899px) {
  .band { height: clamp(260px, 48vw, 380px); }
  .features-head { grid-template-columns: 1fr; align-items: start; }
  .band-split { grid-template-columns: 1fr; }
  .study-scene { width: min(380px, 88vw); }
}

/* ── Meet Aureley (one card, two fields) ─────────────────────
   Chosen from /impeccable layout, 12-08-26. The old build put a glass
   panel INSIDE the gradient card: two containers doing one job, nearly
   the same colour, their paddings stacking so the copy crushed against
   the right edge while the left half sat empty. Now the card bisects
   itself with a hairline — a bright field Aureley stands in, a calm dark
   field the words live in. Each side reaches the card's edge, so it
   reads as one object, not a card within a card. */
/* "Breaks the frame" (Mel's pick, 12-08-26 — labelled C on the preview page
   but coded as variant B; the label sat between cards and read as a caption
   for the card above it, which cost three wrong deploys before the images
   were put side by side). The card is a low band; Aureley stands IN FRONT
   of it, head above the top edge, feet below the bottom. The card stops
   being a container and becomes a backdrop. */
.meet { padding-top: clamp(6rem, 9vw, 9rem); }   /* headroom for the mascot */
.meet-card {
  position: relative;
  overflow: visible;             /* the whole point — nothing clips the mascot */
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(1rem, 2vw, 2rem);
  min-height: clamp(320px, 26vw, 420px);
  padding: clamp(3rem, 4.5vw, 4.5rem) clamp(3rem, 5vw, 5rem) clamp(3rem, 4.5vw, 4.5rem) clamp(1rem, 2vw, 2rem);
  align-items: center;
}
/* directional scrim: darkens only the copy side, so the type passes contrast
   while the mascot's side stays bright */
.meet-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(70% 130% at 78% 50%,
    rgba(14, 7, 30, 0.78) 0%,
    rgba(14, 7, 30, 0.55) 45%,
    rgba(14, 7, 30, 0) 78%);
}
.meet-mascot { min-height: 0; }
.meet-card > .meet-mascot + .meet-copy { grid-column: 2; }
.meet-mascot .wave-mascot {
  position: absolute;
  bottom: clamp(-4rem, -3vw, -2rem);   /* feet below the card's bottom edge */
  left: 19%;
  transform: translateX(-50%);
  width: min(620px, 44vw);             /* tall enough that the head clears the top */
  z-index: 3;
  filter: drop-shadow(0 24px 48px rgba(10, 5, 25, 0.35));
}
/* Mel 15-10-26 (RC2 W1): Aureley's play button made the card taller, and the
   bottom-anchored mascot sat low. Desktop centres it on the card instead; it
   still overflows top and bottom equally, so nothing clips. Stacked layout
   (below 900px) keeps its own rule. */
@media (min-width: 900px) {
  .meet-mascot .wave-mascot { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
}
.meet-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
}
/* Deliberate break from --fs-h2: this headline is the card's centrepiece and
   reads at display scale, not section scale. The 12-08 polish pass flattened
   it once already — keep the clamp. */
.meet-copy h2 { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem); line-height: 1.04; }
.meet-copy .lead { max-width: 34ch; margin-block: var(--space-5) var(--space-8); }
@media (max-width: 899px) {
  .meet { padding-top: clamp(4rem, 12vw, 6rem); }
  .meet-card {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 0;
    padding: clamp(2rem, 6vw, 3rem);
    padding-top: 0;
  }
  /* release the desktop column pin, or the copy claims an implicit second
     column and the mascot's row collapses to nothing */
  .meet-card > .meet-mascot + .meet-copy { grid-column: auto; }
  /* stacked: the mascot's row is pulled up past the card's top edge so the
     frame still breaks on a phone — feet stay inside, no overlap below */
  .meet-mascot {
    position: relative;
    height: clamp(220px, 56vw, 300px);
    margin-top: calc(-1 * clamp(2.5rem, 9vw, 4rem));
  }
  .meet-mascot .wave-mascot { width: min(320px, 64vw); left: 50%; bottom: 0; }
  /* the radial scrim aims at a right-hand column that no longer exists —
     refit it as a floor gradient under the copy */
  .meet-card::after {
    background: linear-gradient(180deg,
      rgba(14, 7, 30, 0) 8%,
      rgba(14, 7, 30, 0.55) 34%,
      rgba(14, 7, 30, 0.80) 100%);
  }
}

/* ── Pricing teaser ─────────────────────────────────────────── */
.teaser-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--gap-xl);
  padding: var(--pad-card);
  align-items: center;
}
.teaser-copy .lead { margin-block: var(--space-5) var(--space-8); }
.teaser-art { padding: clamp(1.25rem, 2.5vw, 2.25rem); }
.teaser-tiers { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap-sm); }
.teaser-tiers li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-dark-bg);
  border: 0.5px solid var(--surface-dark-border);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-radius: var(--radius-lg);
}
.teaser-tiers .tier-name { font-family: var(--font-display); font-weight: var(--font-weight-bold); }
.teaser-tiers .tier-price { font-family: var(--font-display); font-weight: var(--font-weight-bold); text-align: right; }
.teaser-tiers li > .muted:last-child { grid-column: 1 / -1; font-size: var(--fs-small); }
@media (max-width: 899px) {
  .teaser-card { grid-template-columns: 1fr; }
}

/* ── Hero (cinematic) ───────────────────────────────────────── */
.hero { padding-block: calc(var(--sec-y) / 2); }
.hero-cine {
  position: relative;
  overflow: clip;
  min-height: min(78vh, 820px);
  display: flex;
  align-items: center;
  padding-block: var(--sec-y);
}
.hero-bigtype {
  position: absolute;
  inset-inline: 0;
  top: 46%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  /* height-guarded so the letters never run under the nav on short viewports */
  font-size: min(clamp(7rem, 26vw, 26rem), 34vh);
  letter-spacing: -0.04em;
  text-align: center;
  opacity: 0.6;
  user-select: none;
  white-space: nowrap;
  pointer-events: none;
}

/* Light ribbons — depth layers wrapping the mascot (front + back) */
.ribbon {
  position: absolute;
  will-change: transform;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(42px);
  mix-blend-mode: screen;
  animation: ribbon-drift 14s ease-in-out infinite alternate;
}
.ribbon-back {
  width: 130%;
  height: 34%;
  left: -15%;
  top: 16%;
  background: linear-gradient(100deg, rgba(62, 180, 240, 0.5), rgba(155, 82, 146, 0.65), rgba(224, 112, 54, 0.5));
  transform: rotate(-14deg);
  z-index: 0;
}
.ribbon-front {
  width: 120%;
  height: 22%;
  left: -10%;
  bottom: 10%;
  background: linear-gradient(80deg, rgba(224, 112, 54, 0.65), rgba(196, 106, 136, 0.55), rgba(62, 180, 240, 0.4));
  transform: rotate(9deg);
  z-index: 2;
  animation-delay: -6s;
}
/* Aureley stands in front of every hero layer — the ribbons used to blend over
   the top of him (screen blend, z-index 2) and washed him out. */
.hero-mascot { position: relative; z-index: 4; }
@keyframes ribbon-drift {
  0% { transform: rotate(-14deg) translateX(-3%) scaleY(1); }
  100% { transform: rotate(-10deg) translateX(3%) scaleY(1.25); }
}
.ribbon-front { animation-name: ribbon-drift-f; }
@keyframes ribbon-drift-f {
  0% { transform: rotate(9deg) translateX(3%) scaleY(1); }
  100% { transform: rotate(13deg) translateX(-3%) scaleY(1.2); }
}
/* Tornado entrance: letters spiral in from all over, spin, and land.
   Letterforms are filled with the hot gradient art (image-in-text). */
.hero-bigtype span {
  display: inline-block;
  background:
    radial-gradient(120% 90% at 15% 85%, rgba(224, 112, 54, 0.9) 0%, rgba(224, 112, 54, 0) 50%),
    radial-gradient(110% 90% at 85% 15%, rgba(62, 180, 240, 0.65) 0%, rgba(62, 180, 240, 0) 45%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.10) 55%, rgba(224, 136, 112, 0.35) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tornado 3.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.hero-bigtype span:nth-child(odd) { --spin: -2.5turn; --fromx: -60vw; --fromy: 30vh; }
.hero-bigtype span:nth-child(even) { --spin: 2.5turn; --fromx: 60vw; --fromy: -18vh; }
.hero-bigtype span:nth-child(1) { animation-delay: 0.08s; }
.hero-bigtype span:nth-child(2) { animation-delay: 0.24s; }
.hero-bigtype span:nth-child(3) { animation-delay: 0.40s; }
.hero-bigtype span:nth-child(4) { animation-delay: 0.56s; }
.hero-bigtype span:nth-child(5) { animation-delay: 0.72s; }
.hero-bigtype span:nth-child(6) { animation-delay: 0.88s; }
.hero-bigtype span:nth-child(7) { animation-delay: 1.04s; }
@keyframes tornado {
  0% {
    opacity: 0;
    transform: translate(var(--fromx), var(--fromy)) rotate(var(--spin)) scale(0.1);
  }
  40% {
    opacity: 1;
  }
  70% {
    transform: translate(0, -3vh) rotate(0.06turn) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1);
  }
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--gap-xl);
  width: var(--container);
  margin-inline: auto;
}

.hero-copy .lead { margin-top: var(--space-6); }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-top: var(--space-10);
}
.hero-stage { position: relative; }
.hero-mascot img { width: min(560px, 100%); margin-inline: auto; }
.mascot-video {
  display: none;
  width: min(600px, 100%);
  margin-inline: auto;
}
.has-video img { display: none; }
.has-video .mascot-video { display: block; }

/* Floating app-moment chips */
.hero-chips { position: absolute; inset: 0; pointer-events: none; }
.chip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-5);
  background: var(--surface-dark-bg);
  border: 0.5px solid var(--surface-dark-border);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-radius: var(--radius-md);
  animation: chip-float 7s ease-in-out infinite;
}
.chip .mono { font-size: var(--fs-mono); }
.chip-sub { font-size: var(--fs-micro); color: var(--text-muted); font-family: var(--font-body); }
.chip-1 { top: 6%; left: -4%; animation-delay: 0s; }
.chip-2 { bottom: 20%; right: -6%; animation-delay: -2.4s; }
.chip-3 { bottom: -2%; left: 8%; animation-delay: -4.8s; }
/* A flex item won't shrink below its text's intrinsic width unless told to,
   so a long chip label overflowed its own pill and ran across the mascot
   ("3.4 premium hours left" reading as "emium hours"). */
.chip > * { min-width: 0; overflow-wrap: anywhere; }

/* Below desktop the pills stop floating. There isn't room beside the mascot
   at these widths: on iPad the mascot sits in front and swallows the first
   words ("3.4 premium hours left" reading as "premium hours"), and on a
   390px stage anything laid over the figure collides with it. They become a
   wrapped row underneath instead — same facts, no overlap, no clipping. */
@media (max-width: 1199px) {
  .hero-chips {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin-top: var(--space-4);
  }
  .chip {
    position: static;
    max-width: none;
    animation: none;
    flex: 0 1 auto;
  }
}
@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (max-width: 799px) {
  .hero-cine { min-height: 0; }
  .hero-bigtype { top: 26%; }
  .hero-grid { grid-template-columns: 1fr; }
  .player-strip { flex-basis: 100%; }
  .hero-stage { order: -1; }
  .hero-mascot img, .mascot-video { width: min(320px, 68vw); }
  .chip-1 { left: 0; top: 0; }
  .chip-2 { right: 0; }
  .chip-3 { display: none; }
}

/* ── 404 ────────────────────────────────────────────────────── */
.notfound-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-md);
}
.notfound-mascot { width: min(360px, 55vw); }
.notfound-code { color: var(--text-muted); letter-spacing: 0.3em; }
.notfound .hero-actions { margin-top: var(--gap-sm); }

/* ── Pricing page ───────────────────────────────────────────── */

.pricing-hero .lead { margin-block: var(--space-5) var(--space-6); }
.voice-line { gap: var(--space-2); }
/* The plan cards sit on the hottest part of the art gradient, where the standard
   tinted pill measured 4.17:1. Deepen its base on this surface only. */
.tier .btn-primary {
  background:
    linear-gradient(0deg, rgba(224, 112, 54, 0.20), rgba(224, 112, 54, 0.20)),
    rgba(14, 7, 30, 0.84);
}
.tier .btn-primary:hover {
  background:
    linear-gradient(0deg, rgba(224, 112, 54, 0.32), rgba(224, 112, 54, 0.32)),
    rgba(14, 7, 30, 0.88);
}
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-md);
  padding: var(--pad-card);
}
.tier {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border-radius: var(--radius-xl);
}
.tier-h { font-size: var(--fs-h4); }
.tier-big {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--fs-h2);
  line-height: 1;
}
.tier-per { font-size: 1rem; font-weight: var(--font-weight-medium); color: var(--text-secondary); }
.tier-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); flex: 1; }
.tier-list li { color: var(--text-secondary); padding-left: var(--space-5); position: relative; }
.tier-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-aureley-teal);
}
.pricing-note { margin-top: var(--space-6); }
.topups-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-xl);
  align-items: center;
}
.topups { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap-sm); }
.topups li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
}
.topup-price { font-family: var(--font-display); font-weight: var(--font-weight-bold); font-size: var(--fs-lead); }
.honesty { padding: var(--pad-card); }
.honesty-list { list-style: none; padding: 0; margin: var(--space-6) 0; display: grid; gap: var(--gap-md); }
.honesty-list li { color: var(--text-secondary); max-width: 68ch; }
.honesty-list strong { color: #fff; display: block; font-family: var(--font-display); }
.honesty a, .faq-wrap a { color: #fff; }
@media (max-width: 899px) {
  .tiers { grid-template-columns: 1fr; }
  .topups-wrap { grid-template-columns: 1fr; }
}

/* ── Our Story ──────────────────────────────────────────────── */
.story-hero-inner { display: grid; justify-items: start; gap: var(--gap-md); }
.logo-moment {
  position: relative;
  overflow: hidden;
  padding: var(--space-4);
  animation: logo-bloom 1.8s var(--ease-out) backwards;
}
.logo-moment img { width: min(300px, 60vw); }
.logo-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: logo-sweep 1.6s var(--ease-smooth) 0.9s both;
}
@keyframes logo-bloom {
  0% { opacity: 0; transform: scale(0.92); filter: blur(6px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes logo-sweep {
  to { transform: translateX(120%); }
}
.story-body { display: grid; gap: var(--gap-md); }
.story-body p { font-size: var(--fs-lead); line-height: 1.7; max-width: 68ch; }
.maker { padding: var(--pad-card); }
.maker .lead { margin-block: var(--space-4) var(--space-5); }
.maker a { color: #fff; }

/* ── Voice roster tease (§7.3 middle path, Mel 11-08-26) ────── */
.roster { display: grid; justify-items: start; gap: var(--gap-md); }
.roster-strip {
  list-style: none;
  padding: var(--space-6) 0 var(--space-4);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) 0;
}
.roster-strip li {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-inline: -6px;
  transition: transform var(--duration-base) var(--ease-spring);
}
.roster-strip li:hover { transform: translateY(-8px) scale(1.06); z-index: 1; }
.roster-strip img {
  width: clamp(64px, 8vw, 104px);
  height: auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: var(--surface-glass-bg);
  box-shadow: 0 12px 28px rgba(10, 5, 25, 0.28);
}
.roster-strip li:nth-child(even) { translate: 0 14px; }
.roster-strip .mono { font-size: var(--fs-mono); color: var(--text-secondary); }
/* Voice previews (RC2 fix lane W1): the portrait is the play button. */
.roster-voice {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-full);
}
.roster-voice img { transition: border-color var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-slow) var(--ease-smooth); }
.roster-voice[aria-pressed="true"] img {
  border-color: var(--color-aureley-orange);
  box-shadow: 0 0 0 4px rgba(224, 112, 54, 0.45), 0 12px 28px rgba(10, 5, 25, 0.28);
}
.roster-voice[aria-pressed="true"] .mono { color: var(--color-aureley-orange); }
/* Mel 15-10-26 13:31: a note, not a pill; nothing about it may look clickable. */
.roster-note { color: var(--text-secondary); cursor: default; }
/* Aureley's own preview on "The face of the voice." card. */
.voices-ready .voice-play { display: inline-flex; }
.voice-play[aria-pressed="true"] { animation: none; box-shadow: 0 0 44px 8px rgba(224, 112, 54, 0.5); }
.voice-play[aria-pressed="true"] .ic-pause { display: block; }
.voice-play[aria-pressed="true"] .ic-play { display: none; }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-wrap { display: grid; gap: var(--gap-sm); max-width: 800px; }
.faq-group { margin-top: var(--space-8); font-size: var(--fs-h3); }
.faq-group:first-child { margin-top: 0; }
.faq { border-radius: var(--radius-lg); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  position: relative;
  padding-right: var(--space-12);
  border-radius: var(--radius-lg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: var(--space-6);
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-spring);
}
.faq[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq p { padding: 0 var(--space-6) var(--space-5); color: var(--text-secondary); max-width: 62ch; }

/* ── Editorial template (Tier 3) ────────────────────────────── */
.ed-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-lg);
}
.ed-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-web-xl);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-spring);
}
.ed-card:hover { transform: translateY(-4px); }
.ed-lg { grid-column: span 2; flex-direction: row; align-items: stretch; }
.ed-lg .ed-art { flex: 1 1 46%; min-height: 260px; }
.ed-lg .ed-body { flex: 1 1 54%; }
.ed-art { height: 180px; }
.ed-art-img { overflow: hidden; }
.ed-art-img img { width: 100%; height: 100%; object-fit: cover; }
.ed-body { padding: clamp(1.25rem, 2.4vw, 2rem); display: grid; gap: var(--space-3); }
.ed-meta { color: var(--text-secondary); font-size: var(--fs-mono); }
.ed-h { font-size: var(--fs-h3); line-height: 1.2; }
.sample-chip {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--surface-dark-bg);
  border: 0.5px solid var(--surface-dark-border);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* G.2 apply, 21-09-26: real copy replaced the sample cards. Story blocks, article pages. */
.ed-more { color: #fff; font-family: var(--font-display); text-decoration: underline; text-underline-offset: 0.2em; }
.ed-stack { display: grid; gap: var(--gap-lg); }
.ed-grid-after { margin-top: var(--gap-lg); }
.ed-block { padding: var(--pad-card); border-radius: var(--radius-web-xl); display: grid; gap: var(--space-4); }
.ed-block p, .ed-block li { color: var(--text-secondary); max-width: 68ch; line-height: 1.7; }
.ed-block h3 { font-size: var(--fs-h3); margin-top: var(--space-3); }
.ed-block a, .article a { color: #fff; }
.ed-cta { display: grid; justify-items: start; gap: var(--gap-md); }
.ed-close { max-width: 60ch; }
.article-inner { max-width: 46rem; }
.article-inner h1 { margin-bottom: var(--space-4); }
.article-body { margin-top: var(--gap-lg); }
.article-body h2 { font-size: var(--fs-h3); margin-top: var(--space-5); }
.article-body p, .article-list li { line-height: 1.7; max-width: 68ch; }
.article-list { display: grid; gap: var(--space-2); padding-left: 1.25em; color: var(--text-secondary); }
.article-body .article-list li { font-size: var(--fs-lead); }
.article-cta { margin-top: var(--space-4); }
.hero-tagline { color: var(--color-aureley-orange); font-size: var(--fs-mono); letter-spacing: 0.08em; margin-bottom: var(--space-4); }
.pricing-note { display: grid; gap: var(--space-2); }
.tier-year { display: block; margin-top: var(--space-1); }
@media (max-width: 899px) {
  .ed-grid { grid-template-columns: 1fr; }
  .ed-lg { grid-column: span 1; flex-direction: column; }
}

/* ── Tier-2 pages ───────────────────────────────────────────── */
.band-split-rev .band-split-copy { order: 2; }
.band-split-rev .band-split-media { order: 1; }
.usecases-cta { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }

.getapp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--gap-xl);
  align-items: center;
}
.getapp-copy { display: grid; gap: var(--gap-md); justify-items: start; }
.store-badges { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
.store-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  opacity: 0.85;
}
.store-name { font-family: var(--font-display); font-weight: var(--font-weight-bold); }
.qr-slot {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  max-width: 420px;
}
.qr-ph {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  background:
    repeating-conic-gradient(rgba(255,255,255,0.5) 0% 25%, transparent 0% 50%) 0 0 / 21px 21px;
  opacity: 0.5;
}
.getapp-stage { min-height: 320px; display: grid; align-items: center; }

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-lg);
}
.help-card {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--pad-card) var(--pad-card) calc(var(--pad-card) * 1.4);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-spring);
}
.help-card:hover { transform: translateY(-4px); }
.help-card .sample-chip { top: auto; bottom: var(--space-4); right: auto; left: var(--space-6); }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-xl);
  align-items: start;
}
.contact-cards { display: grid; gap: var(--gap-sm); }
.contact-card { padding: var(--gap-md); border-radius: var(--radius-lg); display: grid; gap: var(--space-2); }
.contact-mail { font-family: var(--font-display); font-weight: var(--font-weight-bold); font-size: var(--fs-lead); }
.contact-card a { color: #fff; }
@media (max-width: 899px) {
  .getapp-grid, .contact-grid { grid-template-columns: 1fr; }
  .band-split-rev .band-split-copy { order: 0; }
  .band-split-rev .band-split-media { order: 1; }
  .getapp-stage { min-height: 0; }
}

/* ── Cross-document view transitions (progressive) ──────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 260ms; }
::view-transition-new(root) { animation-duration: 260ms; }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* J29 — buy on the website: sign-in dialog and status lines */
.tier .btn-glass { justify-content: center; }
.buy-status { min-height: 1.5em; text-align: center; color: var(--text-secondary); }
.buy-dialog {
  margin: auto; /* the `* { margin: 0 }` reset removes the browser's own centring of a modal dialog */
  width: min(28rem, calc(100vw - 2rem));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 2rem);
  color: inherit;
}
.buy-dialog::backdrop { background: rgba(10, 5, 25, 0.6); backdrop-filter: blur(6px); }
.buy-dialog form { display: grid; gap: var(--gap-sm); }
.buy-dialog label { display: grid; gap: var(--space-2); font-weight: var(--font-weight-medium); }
.buy-dialog input {
  padding: 0.875rem 1rem;
  font: inherit;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(20, 10, 40, 0.45);
  color: inherit;
}
.buy-dialog input:focus-visible { outline: 2px solid #F0A06A; outline-offset: 2px; }
.buy-error { min-height: 1.25em; color: #FFD0B8; margin: 0; }
.buy-actions { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.buy-small { font-size: var(--fs-small); margin: 0; }
/* Run 3 — the before-you-pay notice. :not([hidden]) because an author display
   value would otherwise beat the hidden attribute and show every block. */
.buy-dialog div[data-notice]:not([hidden]) { display: grid; gap: var(--space-2); }
.buy-dialog h3 { font-size: var(--fs-body); margin: 0; }
.buy-dialog p { margin: 0; }
[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* ---------- v1.2 review build (25-10-26): temp screens, image placeholders, launch-list form ---------- */
/* Temp beta screens: the orange "TEMP · BETA SCREEN" bar is baked into each image (image brief Part 1). */
.temp-screen { margin: 0; display: grid; justify-items: center; gap: var(--space-3); }
.device-frame {
  width: min(260px, 70vw); padding: 10px; border-radius: 40px;
  background: #1c1426; box-shadow: 0 18px 40px rgba(46, 26, 79, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.device-frame img { display: block; width: 100%; height: auto; border-radius: 30px; }
.temp-screen figcaption, .slot-placeholder figcaption {
  font-size: var(--fs-mono); color: var(--text-secondary); text-align: center; max-width: 34ch;
}
/* Part 2 slots with no image yet: neutral box carrying the slot name (image brief, "How this runs" 1). */
.slot-placeholder { margin: 0; display: grid; gap: var(--space-3); }
.slot-box {
  aspect-ratio: 880 / 642; width: 100%; display: grid; place-items: center; padding: var(--space-4);
  border-radius: var(--radius-xl); background: repeating-linear-gradient(135deg, #ebe6ef 0 14px, #e2dce8 14px 28px);
  border: 2px dashed #b3a9bf; color: #4a4057; text-align: center;
}
.screen-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-lg); margin-block: var(--gap-lg); }
.launch-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-block: var(--space-4); }
.launch-form input[type="email"] {
  flex: 1 1 14rem; min-height: var(--touch-target); padding: 0 var(--space-4); font: inherit;
  border-radius: var(--radius-full); border: 1px solid rgba(46, 26, 79, 0.25); background: rgba(255, 255, 255, 0.85);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.screen-row .slot-placeholder { width: min(360px, 100%); }
figure.meet-mascot { margin: 0; }
/* get-the-app: the hero stage now sits in a plain section (v1.2), not the clipped .hero-cine, so its ribbons
   and aurora canvas pushed the phone page 47 px wide. Clip sideways overflow on this page only. */
.page-getapp main { overflow-x: clip; }

/* ── v1.3 hero entrance (R-79, home only) ─────────────────────────
   The AURELEY wordmark tornado starts at once; Aureley arrives over it at 1 s (her clip opens
   side-on, turns forward, then moves; mascot.js holds play until then); the headline and the
   text follow in order. Reduced motion: everything is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .page-home .hero-mascot { animation: hero-mascot-in 600ms var(--ease-out) 1s backwards; }
  .page-home .hero-grid .readalong > * { animation: hero-copy-in 700ms var(--ease-out) backwards; }
  .page-home .hero-grid .readalong > h1 { animation-delay: 1.7s; }
  .page-home .hero-grid .readalong > :nth-child(2) { animation-delay: 1.95s; }
  .page-home .hero-grid .readalong > :nth-child(3) { animation-delay: 2.15s; }
  .page-home .hero-grid .readalong > :nth-child(n+4) { animation-delay: 2.35s; }
}
/* R-179 (v1.6): arriving on a section of the home page (/#get-notified), the hero is already there:
   no entrance, so the reader never lands on an empty sky waiting for the copy to fade in */
html.arrived .page-home .hero-mascot, html.arrived .page-home .hero-grid .readalong > * { animation: none; }
/* a section reached by a link shows at once: its reveal fade is skipped for that jump (js/site.js) */
html.reveal-now [data-reveal] { transition: none !important; }
@keyframes hero-mascot-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(14px); } }

/* R-80: the follow-along caption chip stays on computer, goes on phone */
@media (max-width: 799px) { .hero-chips { display: none; } }

/* ════════════════════════════════════════════════════════════════════════
   v1.3 design polish (review build v1.3, 26-10-26) — Mel's whole-site walk
   R-77 to R-108. One system for the whole site, in the locked brand.
   ════════════════════════════════════════════════════════════════════════ */

/* R-85: every call-to-action is solid Aureley orange with white, large, bold text.
   Supersedes the 12-08-26 tinted-glass look (logged in BRAND-BREAKS.md, BB-v13-1).
   White on #E07036 is 3.21:1, AA for large text only, so the label never drops below
   19 px bold (D-144). */
.btn-primary,
.tier .btn-primary {
  background: var(--color-aureley-orange);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  color: #fff;
  font-weight: var(--font-weight-bold);
  font-size: max(1.1875rem, var(--fs-h4));
  letter-spacing: 0.005em;
  box-shadow: 0 10px 24px rgba(224, 112, 54, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover,
.tier .btn-primary:hover {
  background: #e97d43;
  box-shadow: 0 14px 30px rgba(224, 112, 54, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.btn-primary:focus-visible { box-shadow: var(--focus-ring), 0 10px 24px rgba(224, 112, 54, 0.32); border-radius: var(--radius-full); }

/* R-84: breathing room. A button never sits tight under the text before it. */
p + .btn, p + .hero-actions, .lead + .btn, .muted + .btn, p + .launch-form,
.ed-cta > .btn, .article-cta, .teaser-copy .btn, .meet-copy .ed-more, .usecases-cta, .tier > .btn,
.tier > .launch-form { margin-top: var(--space-6); }
.btn + .muted, .launch-form + p, .hero-actions + .muted { margin-top: var(--space-4); }
.tier { gap: var(--space-4); }

/* R-82: the orange all-caps labels sit in a dark glass tag so they read on every part of the
   gradient (bare orange on mauve measured under 2:1). */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  width: fit-content;
  padding: 0.42em 0.95em 0.42em 0.8em;
  border-radius: var(--radius-full);
  background: rgba(14, 7, 30, 0.62);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #ffb27e;
  font-weight: 500;
}
.kicker::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-aureley-orange);
  box-shadow: 0 0 0 3px rgba(224, 112, 54, 0.25);
  flex: none;
}
.kicker a { color: inherit; text-decoration: none; }

/* R-83: a text link says "tap me". Stand-alone links get a Phosphor Bold arrow that moves on
   hover; links inside a sentence keep their underline, in Aureley orange. */
.link-cue, .ed-more, .article-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-decoration-color: rgba(224, 112, 54, 0.9);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
}
.link-cue::after, .ed-more::after, .article-link a::after {
  content: '';
  flex: none;
  width: 1.05em;
  height: 1.05em;
  background: var(--color-aureley-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate var(--duration-fast) var(--ease-out);
}
.link-cue:hover::after, .ed-more:hover::after, .article-link a:hover::after { translate: 0.22em 0; }
main p a:not(.btn):not(.link-cue):not(.ed-more), main li a:not(.btn):not(.link-cue) {
  text-decoration-color: rgba(224, 112, 54, 0.9);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

/* R-86 (and R-92): pills sit in a neat grid, two equal columns, an odd last one centred,
   every pill fully visible. No separators between them. */
.store-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  width: min(100%, 34rem);
}
.store-badges > * { width: 100%; justify-content: center; text-align: center; }
.store-badges > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - var(--space-3) / 2);
}
.store-badges .btn { min-height: var(--btn-height-md); padding-inline: var(--space-4); white-space: normal; line-height: 1.2; }

/* R-104: question lists read in two columns on a computer and one on a phone. */
.faq-wrap { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-4); }
.faq-wrap > .faq-group, .faq-wrap > h2 { grid-column: 1 / -1; }
@media (max-width: 899px) { .faq-wrap { grid-template-columns: 1fr; } }

/* R-77: the launch-list email field — clearly a field, comfortable to tap, on brand. */
.launch-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: stretch;
  width: min(100%, 36rem);
  margin-block: var(--space-6) var(--space-3);
  padding: 6px;
  border-radius: var(--radius-full);
  background: rgba(14, 7, 30, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 36px rgba(10, 5, 25, 0.25);
}
.launch-form input[type="email"] {
  min-height: var(--btn-height-lg);
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.95);
  color: #2e1a4f;
  font-size: 1.0625rem;
  box-shadow: inset 0 1px 2px rgba(46, 26, 79, 0.18);
}
.launch-form input[type="email"]::placeholder { color: #6d5d86; opacity: 1; }
.launch-form input[type="email"]:focus-visible { outline: 3px solid rgba(224, 112, 54, 0.9); outline-offset: 2px; box-shadow: none; }
.launch-form .btn { margin: 0; min-height: var(--btn-height-lg); padding-inline: var(--space-6); }
.launch-form[aria-invalid="true"] { border-color: rgba(255, 178, 126, 0.9); }
.form-note { font-size: var(--fs-small); color: var(--text-secondary); margin-top: var(--space-2); }
.form-note a { color: #fff; }
.form-done {
  display: flex; gap: var(--space-3); align-items: flex-start;
  width: min(100%, 36rem); margin-block: var(--space-6) var(--space-3);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: rgba(14, 7, 30, 0.6); border: 1px solid rgba(74, 138, 135, 0.7); color: #fff;
}
.form-done::before { content: ''; flex: none; width: 1.4em; height: 1.4em; margin-top: 0.1em; border-radius: 50%;
  background: var(--color-aureley-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / 62% no-repeat; }
@media (max-width: 520px) {
  .launch-form { grid-template-columns: 1fr; border-radius: var(--radius-xl); }
  .launch-form .btn { width: 100%; }
}

/* v1.3 promo legal pages (R-76): the draw rules and the launch list privacy notice */
.legal-body h2 { font-size: var(--fs-h3); margin-top: var(--space-8); }
.legal-body h3 { font-size: var(--fs-h4); margin-top: var(--space-5); }
.legal-body p, .legal-body li { color: var(--text-secondary); }
.legal-body strong { color: #fff; }
.legal-body a { color: #fff; text-decoration-color: rgba(224, 112, 54, 0.9); text-underline-offset: 0.2em; }
.legal-table { overflow-x: auto; margin-block: var(--space-4); border-radius: var(--radius-lg); background: rgba(14, 7, 30, 0.45); border: 0.5px solid rgba(255, 255, 255, 0.16); }
.legal-table table { width: 100%; border-collapse: collapse; }
.legal-table th, .legal-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; color: var(--text-secondary); border-bottom: 0.5px solid rgba(255, 255, 255, 0.12); }
.legal-table th { color: #fff; font-family: var(--font-display); }
.legal-table tr:last-child td { border-bottom: 0; }
/* Go-live run 1: the Privacy tables fit a phone without sideways scrolling */
@media (max-width: 480px) { .legal-table th, .legal-table td { padding: var(--space-2); overflow-wrap: anywhere; } }
.legal-body strong > a, .ed-block > p.muted > a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 480px) { .legal-body strong > a, .ed-block > p.muted > a { min-height: 44px; } }

/* R-89 / R-99: the Monthly / Yearly switch, and the yearly saving line */
[data-period="monthly"] [data-show="yearly"], [data-period="yearly"] [data-show="monthly"] { display: none; }
.period-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-full);
  background: rgba(14, 7, 30, 0.6);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.period-switch button {
  min-height: var(--touch-target);
  min-width: 7.5rem;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.period-switch button[aria-pressed="true"] { background: #fff; color: #2e1a4f; box-shadow: 0 4px 12px rgba(10, 5, 25, 0.25); }
.period-switch[hidden] { display: none; }
.tier-save {
  display: inline-flex;
  width: fit-content;
  padding: 0.3em 0.8em;
  border-radius: var(--radius-full);
  background: rgba(74, 138, 135, 0.9);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: 0.9375rem;
}
.teaser-tiers li { align-items: baseline; }
.teaser-tiers .tier-save { grid-column: 1 / -1; justify-self: start; }
.teaser-tiers .tier-price { white-space: nowrap; }
.teaser-unlimited { margin-top: var(--space-5); color: #fff; font-family: var(--font-display); font-weight: var(--font-weight-bold); }
.price-currency { margin-top: var(--space-3); font-size: var(--fs-small); }
.tiers + .price-currency { text-align: center; }
/* top-ups: three real sizes and prices (PromoLegal pack R2) */
.topups { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.topups li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); }
.topup-size { font-family: var(--font-display); font-weight: var(--font-weight-bold); color: #fff; }
.topup-price { font-family: var(--font-display); font-weight: var(--font-weight-bold); font-size: var(--fs-h4); color: #fff; }

/* R-96: contact form */
.contact-form { display: grid; gap: var(--space-5); margin-top: var(--space-8); padding: var(--pad-card); border-radius: var(--radius-web-xl); max-width: 36rem; }
.contact-form .field { display: grid; gap: var(--space-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.contact-form label, .contact-form legend { font-family: var(--font-display); font-weight: var(--font-weight-bold); color: #fff; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  width: 100%; min-height: var(--touch-target); padding: var(--space-3) var(--space-4); border: 0;
  border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.95); color: #2e1a4f; font-size: 1.0625rem;
  box-shadow: inset 0 1px 2px rgba(46, 26, 79, 0.18);
}
.contact-form textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.contact-form :is(input, textarea):focus-visible { outline: 3px solid rgba(224, 112, 54, 0.9); outline-offset: 2px; box-shadow: none; }
.topic-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.topic-pick legend { margin-bottom: var(--space-2); grid-column: 1 / -1; }
.topic-pick label {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-target);
  border-radius: var(--radius-full); background: var(--surface-glass-bg); border: 0.5px solid var(--surface-glass-border);
  font-weight: var(--font-weight-medium); cursor: pointer;
}
.topic-pick label:has(input:checked) { background: #fff; color: #2e1a4f; }
.topic-pick input { accent-color: var(--color-aureley-orange); }
.contact-form .btn { justify-self: start; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status:empty { display: none; }
.form-status { font-weight: var(--font-weight-medium); }
.form-status[data-kind="done"] { color: #c9f2ee; }
.form-status[data-kind="error"] { color: #ffd0b3; }

/* R-91: the "Who makes Aureley" line lives in the copy column, clear of the mascot */
.meet-caption { color: var(--text-secondary); font-size: var(--fs-small); margin-bottom: var(--space-3); }
/* R-105: Our story's phone photo sits beside "What Aureley does" */
.story-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--gap-xl); align-items: center; }
.story-split .story-body { width: auto; margin: 0; }
.story-split-media { margin: 0; }
@media (max-width: 899px) { .story-split { grid-template-columns: 1fr; } }

/* R-97: home summary card — larger, brighter, the promise in bold */
.summary-card {
  position: relative;
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4.5vw, 3.5rem);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.10) 55%, rgba(224, 112, 54, 0.18) 100%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 28px 60px rgba(10, 5, 25, 0.28);
}
.summary-card::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 4px; border-radius: 4px;
  background: var(--color-aureley-orange);
}
.summary-card p { color: #fff; font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.6; max-width: none; }
.summary-card strong { font-family: var(--font-display); font-weight: var(--font-weight-extrabold); color: #fff; text-decoration: underline; text-decoration-color: var(--color-aureley-orange); text-decoration-thickness: 3px; text-underline-offset: 0.18em; }

/* ── v1.3: nothing overlaps text (R-91, R-81) ─────────────────────────────────
   The ghost numerals still ride over the pictures, but every line of copy and every caption
   sits above them ("the number one behind the text" — R-81). On phones the numerals stop
   drifting with the scroll, which carried them over the next section's captions. */
.feature-copy { position: relative; z-index: 4; }
.moment-tag, .band-caption { z-index: 4; }
@media (max-width: 899px) { .feature-ghost { translate: none !important; } }
/* the hero caption chip sits above Aureley, not under her */
.hero-chips { z-index: 5; }
/* "Meet Aureley" / "The face of the voice": the mascot's box stays inside its own column */
@media (min-width: 900px) {
  .meet-mascot .wave-mascot { width: min(460px, 31vw); }
}
/* phones: voice portraits sit side by side without touching each other's names */
@media (max-width: 599px) {
  .roster-strip { gap: var(--space-4) var(--space-2); }
  .roster-strip li { margin-inline: 0; }
}
/* Get the app: the light ribbons stay behind the copy and the launch form */
.getapp-copy { position: relative; z-index: 5; }

/* ── v1.3 in-context photos (R-100, R-105, R-107) ───────────────────────────────
   Every former bare phone mockup is a photo with the real app capture composited by hand. */
.photo-slot { margin: 0; display: grid; gap: var(--space-3); justify-items: center; }
.photo-slot figcaption { color: var(--text-secondary); font-size: var(--fs-small); text-align: center; }
.inctx-photo {
  width: 100%;
  max-width: 440px;
  height: auto;
  border-radius: var(--radius-web-xl);
  border: 0.5px solid var(--surface-glass-border);
  box-shadow: 0 28px 56px rgba(10, 5, 25, 0.32);
}
.feature-visual .inctx-photo, .band-split-media .inctx-photo, .story-split-media .inctx-photo { max-width: 520px; }
.ed-body .photo-slot .inctx-photo { max-width: none; }
/* G1: the bus photo, with an inset of the real app screen (R-74) */
.g1-pair { position: relative; width: 100%; max-width: 560px; }
.g1-pair .inctx-photo { max-width: none; }
.g1-inset {
  position: absolute; right: -4%; bottom: -8%; width: 34%; height: auto;
  border-radius: var(--radius-lg); border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 18px 40px rgba(10, 5, 25, 0.45);
}
.photo-slot:has(.g1-pair) figcaption { margin-top: var(--space-6); }
@media (max-width: 599px) { .g1-inset { right: 2%; bottom: -6%; width: 36%; } }
/* G3: Aureley beside the voice picker */
.g3-pair { display: grid; grid-template-columns: 0.8fr 1fr; gap: var(--space-4); align-items: center; width: 100%; }
.g3-mascot { width: 100%; height: auto; filter: drop-shadow(0 18px 36px rgba(10, 5, 25, 0.35)); }
/* articles: one hero and two smaller pictures */
.article-hero { margin: var(--space-6) 0 var(--space-2); }
.article-hero img { width: 100%; height: auto; border-radius: var(--radius-web-xl); box-shadow: 0 28px 56px rgba(10, 5, 25, 0.3); }
.article-hero figcaption, .article-pair figcaption { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--fs-small); }
.article-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-block: var(--space-6); }
.article-pair figure { margin: 0; }
.article-pair img { width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: 0 18px 40px rgba(10, 5, 25, 0.28); }
@media (max-width: 599px) { .article-pair { grid-template-columns: 1fr; } }
/* R-84: the home launch block's lines get room to breathe under the form */
#get-notified > p { margin-top: var(--space-3); line-height: 1.55; }
#get-notified > .form-note { margin-top: var(--space-2); }
/* R-79 / R-91: the hero's drifting light ribbons pass behind the copy, never over the audio timer */
.hero-grid .readalong { position: relative; z-index: 5; }

/* ══ v1.4 design pass — UI UX Pro Max (27-10-26) ═════════════════════════════════════════════
   Every rule below names the skill rule it answers (SKILL.md Quick Reference). Measured by
   verify/uiux/ (audit.js + contrast.py) on v1.3 first, then on this build. No copy changes.
   Brand stays locked: palette, type, Phosphor Bold, mascot. Undo = delete this block (and the
   zone-depth lines in site.js); each sub-block also stands alone. */

/* color-contrast + contrast-readability (Accessibility, CRITICAL): the app's 70% / 45% white
   text steps were drawn for dark app surfaces. On the website's violet-to-coral sky they read
   at 1.6–3.7:1. The web steps rise to 88% / 78%; primary stays 100%. (BB-v14-1, proposed) */
:root {
  --text-secondary: rgba(255, 255, 255, 0.88);
  --text-muted: rgba(255, 255, 255, 0.78);
}

/* color-contrast, D-144 ("body text in warm zones sits on dark glass"): every glass card
   carries a dark core whose depth follows where it sits on the sunrise. --zone runs 0 at the
   violet top to 1 at the coral footer (site.js sets it per card from its page position);
   without the script every card takes the safe deep value. The rim, sheen and blur of the
   bubble glass stay as Mel locked them on 11-08. (BB-v14-2, proposed) */
.glass-bubble, .glass {
  --depth: calc(0.24 + var(--zone, 1) * 0.46);
}
.glass-bubble {
  background:
    linear-gradient(155deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.10) 100%),
    rgba(18, 9, 38, var(--depth));
}
.glass {
  background:
    linear-gradient(155deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.10) 100%) padding-box,
    rgba(18, 9, 38, var(--depth)) padding-box;
}

/* touch-target-size + touch-spacing (Touch, CRITICAL): stand-alone text links get a 44 px
   row on touch screens; stacked footer links and the switch buttons get an 8 px gap. */
@media (pointer: coarse) {
  .link-cue, .ed-more, .article-link a { min-height: var(--touch-target); }
  .footer-cols > div { display: grid; justify-items: start; row-gap: var(--space-2); }
  .footer-cols a { padding-block: 0; }
}
.period-switch { gap: var(--space-2); padding: var(--space-1); }
@media (max-width: 599px) { .roster-strip { gap: var(--space-4) var(--space-3); } }

/* web-target-size (Accessibility): the seek rail on a desktop was 6 px of paint and 6 px of
   target. Keep the paint, give the pointer a 24 px band. */
@media (pointer: fine) {
  .player-seek { height: 24px; background: none; }
  .player-seek::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); }
  .player-seek::-webkit-slider-thumb { margin-top: -6px; }
  .player-seek::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); }
}

/* fixed-element-offset (Layout): in-page links (#cancel, the FAQ anchors, #plans) landed
   under the sticky nav. */
html { scroll-padding-top: calc(var(--nav-h) + var(--space-4)); }

/* readable-font-size (Layout + Typography): 16 px floor for running copy on phones, 12 px
   floor everywhere (the 11 px chip lines). */
:root { --fs-micro: 0.75rem; }
@media (max-width: 699px) {
  :root { --fs-small: 1rem; --fs-micro: 0.8125rem; }
}

/* weight-hierarchy (Typography): the footer column headings are h2s at weight 500. */
.footer-h { font-weight: var(--font-weight-bold); }

/* line-length-control (Layout): long lines on the pricing hero and the honesty list. */
.pricing-hero .lead { max-width: 60ch; }
.honesty-list li { max-width: 62ch; }

/* number-tabular (Typography): the Monthly / Yearly switch swaps prices in place. */
.tier-price, .tier-amount, .topup-price, .player-time { font-variant-numeric: tabular-nums; }

/* layout + visual-hierarchy (phone): the home plan lines wrapped one word per line beside
   the price. The line gets its own row under the name and price. */
@media (max-width: 599px) {
  .teaser-tiers li { grid-template-columns: 1fr auto; }
  .teaser-tiers li > .muted { grid-column: 1 / -1; }
}

/* visual-hierarchy (R-81 keeps the numeral behind the heading): on phones the ghost numeral
   sits quieter so the heading reads first. */
@media (max-width: 899px) { .feature-ghost { opacity: 0.32; } }

/* color-contrast, DESIGN.md "dark overlay for text zones": copy that sits straight on the sky
   (feature leads, the voice roster, top-ups, the line under the home plan cards) gets a soft
   dark halo behind it that deepens with the zone, like the cards. The halo has no edge, so the
   sky still reads around the words. */
.feature-copy, .topups-copy, .roster, .pricing-note, .teaser-art > p, .ed-cta, p.ed-grid-after {
  position: relative;
  isolation: isolate;
}
.feature-copy::before, .topups-copy::before, .roster::before, .pricing-note::before, .teaser-art > p::before, .ed-cta::before, p.ed-grid-after::before {
  content: '';
  position: absolute;
  inset: -1.5rem -2rem;
  z-index: -1;
  pointer-events: none;
  border-radius: 3rem;
  background: rgba(14, 7, 30, calc(0.16 + var(--zone, 1) * 0.42));
  filter: blur(18px);
}
.teaser-art > p::before { inset: -0.4rem -0.8rem; border-radius: 1rem; filter: blur(8px); }
/* glass buttons on the sky carry the same dark core as the cards */
.btn-glass { background: rgba(18, 9, 38, 0.46); }
.btn-glass:hover { background: rgba(18, 9, 38, 0.32); }
/* the summary card stays the brightest card (R-97) but gets a thin dark core under its sheen */
.summary-card {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.07) 55%, rgba(224, 112, 54, 0.16) 100%),
    rgba(18, 9, 38, 0.24);
}
/* the player's time and rail were dimmed to 55% until hover; a phone has no hover. Full
   strength always, the rail itself stays quiet. */
.player-invite .player-strip { opacity: 1; }
.player-time { color: #fff; }
/* secondary lines inside the plan cards and under photos read at full strength */
.tier .tier-per, .photo-slot figcaption { color: rgba(255, 255, 255, 0.95); }
.price-currency { position: relative; isolation: isolate; }
main > .section > .container > .price-currency::before {
  content: ''; position: absolute; inset: -0.4rem -0.8rem; z-index: -1; pointer-events: none;
  border-radius: 1rem; filter: blur(8px); background: rgba(14, 7, 30, calc(0.16 + var(--zone, 1) * 0.42));
}
/* the read-along line rests at full white; it dims only while it is being read (R-79 player) */
.readalong .lead { color: #fff; }
/* footer links: a short word ("FAQ", "Blog") is still a 44 px target */
@media (pointer: coarse) { .footer-cols a { min-width: var(--touch-target); } }
.pricing-hero .lead { max-width: 34rem; }
/* touch-spacing: on phones the staggered voice portraits (even ones drop 14 px) sat 2 px from
   the row below. A 24 px row gap leaves 10 px. */
@media (max-width: 599px) { .roster-strip { row-gap: var(--space-6); } }
/* adaptive gutters (Layout): 4vw left 15.6 px a side on a 390 px phone, so hero copy and
   headings ran almost to the glass. Phones get 20 px. */
@media (max-width: 599px) { :root { --container: calc(100vw - 2.5rem); } }
/* color-contrast + line-length (Accessibility, Layout): articles, news and the legal pages ran
   long copy straight on the sky, so the lower half sat on blush and coral at 2–3:1. The body
   gets a reading surface: dark glass that deepens down the page the way the sky warms. */
.article .article-body {
  padding: var(--pad-card);
  border-radius: var(--radius-web-xl);
  background: linear-gradient(180deg, rgba(18, 9, 38, 0.36) 0%, rgba(18, 9, 38, 0.50) 45%, rgba(18, 9, 38, 0.64) 100%);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 48px rgba(10, 5, 25, 0.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
}
@media (max-width: 599px) { .article .article-body { padding: var(--space-5) var(--space-4); border-radius: var(--radius-xl); } }
/* web-target-size + touch-target-size: small stand-alone links (the article kicker's section
   link, the contact cards' links, the 404 list) get a 24 px target, 44 px on touch screens. */
.kicker a, .contact-card a, .notfound-inner li a { display: inline-flex; align-items: center; min-height: 24px; }
@media (pointer: coarse) { .kicker a, .contact-card a, .notfound-inner li a { min-height: var(--touch-target); } }
/* readable-font-size: the contact cards' explanations are running copy, not chip labels */
.contact-card .chip-sub { font-size: var(--fs-small); line-height: 1.55; }
/* line-length-control: card and story paragraphs ran 87–93 characters a line on a computer */
.ed-block p, .ed-block li, .story-body p { max-width: 60ch; }
/* color-contrast on short pages: the sky is fitted to the page height, so on a short page
   (checkout, careers, 404) the warm end sits right behind the hero copy. Page heroes and other
   copy blocks on the sky get the same soft text zone, kept to the width of the text column. */
main > section.section:first-of-type > div[class="container"], .story-hero-inner, .getapp-copy,
.notfound-inner, .section > .story-body:not(.article-body), .faq-wrap > p {
  position: relative;
  isolation: isolate;
}
main > section.section:first-of-type > div[class="container"]::before, .story-hero-inner::before, .getapp-copy::before,
.notfound-inner::before, .section > .story-body:not(.article-body)::before, .faq-wrap > p::before {
  content: '';
  position: absolute;
  inset: -1.25rem auto -1.25rem -1.75rem;
  width: calc(min(100%, 48rem) + 3.5rem);
  z-index: -1;
  pointer-events: none;
  border-radius: 3rem;
  background: rgba(14, 7, 30, calc(0.16 + var(--zone, 1) * 0.42));
  filter: blur(18px);
}
/* links inside sentences and captions read at full white (the orange underline still marks links) */
main p a:not(.btn):not(.link-cue):not(.ed-more), main li a:not(.btn):not(.link-cue) { color: #fff; }
main figcaption { color: #fff; }
/* line-length-control (Layout): DM Sans sets about 1.46 average characters per "ch", so the old
   62ch / 68ch measures ran 87–96 characters a line. 52ch is about 75. */
:root { --measure: 52ch; }
.ed-block p, .ed-block li, .story-body p, .article-body p, .article-list li, .honesty-list li,
.faq p, .legal-body p, .legal-body li, .ed-block ol > li { max-width: 52ch; }
/* touch-spacing: the 404's list of pages to try had its links touching */
.notfound-inner ul { display: grid; gap: var(--space-2); }
/* color-contrast: captions and the contact lines that sit on the sky get a small soft backing */
main figcaption:not(.overlay-dark):not(.moment-tag):not(.band-caption), .contact-cards > p.muted, main > section:not(:first-of-type) > div[class="container"] > p.lead {
  position: relative; isolation: isolate;
}
main figcaption:not(.overlay-dark):not(.moment-tag):not(.band-caption)::before, .contact-cards > p.muted::before {
  content: ''; position: absolute; inset: -0.35rem -0.75rem; z-index: -1; pointer-events: none;
  border-radius: 1rem; filter: blur(8px); background: rgba(14, 7, 30, calc(0.22 + var(--zone, 1) * 0.42));
}
main > section:not(:first-of-type) > div[class="container"] > p.lead::before {
  content: ''; position: absolute; inset: -0.75rem -1.25rem; z-index: -1; pointer-events: none;
  border-radius: 2rem; filter: blur(14px); background: rgba(14, 7, 30, calc(0.16 + var(--zone, 1) * 0.42));
}

/* ══ v1.5 · Mel's phone review of v1.4 (R-111 to R-155) ═══════════════════════════════════════ */
/* R-111: the animated AURELEY wordmark sits above the headline, behind the mascot, and fits the
   screen. Phone: the mascot leads the hero, so the word sits behind her. Computer: a band across
   the top of the hero; the copy starts under it and Aureley stands in front of its right half. */
@media (max-width: 799px) {
  .hero-cine .hero-bigtype { top: calc(var(--sec-y) + min(160px, 34vw)); font-size: 18.5vw; letter-spacing: -0.035em; }
}
@media (min-width: 800px) {
  .page-home .hero-cine { align-items: flex-start; }
  .page-home .hero-bigtype { top: calc(var(--sec-y) * 0.6); transform: none; font-size: min(14.5vw, 15.5rem); line-height: 1; }
  .page-home .hero-grid { padding-top: min(12vw, 12.5rem); }
  .page-home .hero-stage { align-self: start; margin-top: calc(-1 * min(9vw, 9.5rem)); }
}
/* R-112: on the animated route the still poses wait unseen; they return only on fallback */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero-mascot[data-heroseq]:not(.seq-fallback) img { opacity: 0 !important; }
}
/* R-114: a numeral beside a kicker label sits below the label and behind the heading, as 01 does */
@media (max-width: 899px) {
  .feature:has(.feature-copy > .kicker:first-child) .feature-ghost { top: calc(var(--sec-y) + 3.4rem); left: auto; right: 0; }
}
/* R-115: an arrow sits beside its words, never pushed to the far edge of the line */
/* The arrow rides inline after the last word; a flex box went full width once the words wrapped
   on a narrow phone (360 px) and threw the arrow to the far edge. */
.link-cue, .ed-more, .article-link a { display: inline-block; max-width: 100%; }
.link-cue::after, .ed-more::after, .article-link a::after { display: inline-block; vertical-align: -0.16em; margin-left: 0.45em; }
/* R-113 / R-120 / R-148: the launch offer reads as a promotion */
.promo-card {
  position: relative; isolation: isolate; margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(224, 112, 54, 0.30) 0%, rgba(155, 82, 146, 0.30) 55%, rgba(30, 14, 54, 0.62) 100%), rgba(18, 9, 38, 0.55);
  border: 1px solid rgba(255, 176, 128, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 40px rgba(224, 112, 54, 0.22);
}
.promo-card::before {
  content: ''; position: absolute; left: 0; top: var(--space-4); bottom: var(--space-4); width: 4px;
  border-radius: 0 4px 4px 0; background: var(--color-aureley-orange);
}
.promo-card > p:first-child { color: #fff; font-weight: var(--font-weight-semibold, 600); line-height: 1.5; margin: 0; }
.promo-card > p + p { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
#get-notified > .promo-card > p { margin-top: 0; }
#get-notified > .promo-card > p + p { margin-top: var(--space-3); }
.ed-stack > .promo-feature { margin-top: 0; }
/* R-119: the privacy notice is a small link under the button */
.form-note { margin-top: var(--space-2); }
/* R-153: photos added since v1.3 carry the same caption card as the first-round photos, below the
   photo. First-round photos and videos keep theirs on top (.moment-tag, .band-chip, unchanged). */
.photo-slot figcaption, .article-hero figcaption, .article-pair figcaption {
  display: inline-flex; flex-direction: column; gap: 2px; width: fit-content; max-width: min(100%, 34rem);
  margin-top: var(--space-4); padding: var(--space-3) var(--space-5);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: #fff;
  border-radius: var(--radius-md); text-align: left;
  background: linear-gradient(160deg, rgba(30, 14, 54, 0.82) 0%, rgba(10, 5, 25, 0.76) 60%, rgba(26, 10, 44, 0.82) 100%);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 28px rgba(10, 5, 25, 0.24);
}
main .photo-slot figcaption::before, main .article-hero figcaption::before, main .article-pair figcaption::before { content: none; }
.article-hero, .article-pair figure { display: flex; flex-direction: column; align-items: flex-start; }
.photo-slot:has(.g1-pair) figcaption { margin-top: var(--space-8); }
/* R-116 / R-127: still photos take the 5k briefing frame (rounded, hairline edge, deep shadow) */
.article-pair img { border-radius: var(--radius-web-xl); border: 0.5px solid var(--surface-glass-border); box-shadow: 0 28px 56px rgba(10, 5, 25, 0.32); }
.article-hero img { border: 0.5px solid var(--surface-glass-border); }
/* R-144: a single picture in the article flow */
.article-pair-one { grid-template-columns: minmax(0, 1fr); max-width: 30rem; }
/* R-117 / R-118: "Hear the difference" */
.diff-h { margin-top: var(--space-8); font-size: var(--fs-h4); }
.diff-h + .diff-actions { margin-top: var(--space-4); }
.voice-line[aria-pressed="true"] { background: rgba(224, 112, 54, 0.32); border-color: rgba(255, 176, 128, 0.7); }
.voicecard .speak-mascot { width: min(220px, 60%); height: auto; display: none; }
.voicecard[data-state="natural"] .speak-mascot:not([hidden]) { display: block; }
.voicecard[data-state="natural"] .eq { display: none; }
.voicecard[data-state="builtin"] .voicecard-label { visibility: hidden; }
.voicecard .eq span { animation-play-state: paused; }
.voicecard .eq span:nth-child(1) { animation-delay: -0.2s; }
.voicecard .eq span:nth-child(2) { animation-delay: -0.5s; }
.voicecard .eq span:nth-child(3) { animation-delay: -0.75s; }
.voicecard .eq span:nth-child(4) { animation-delay: -0.95s; }
.voicecard .eq span:nth-child(5) { animation-delay: -0.7s; }
.voicecard .eq span:nth-child(6) { animation-delay: -0.45s; }
.voicecard .eq span:nth-child(7) { animation-delay: -0.15s; }
.voicecard[data-state="builtin"] .eq span { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .voicecard .eq span { animation: none; } }
.diff-card-solo { margin-top: var(--space-6); min-height: 14rem; justify-content: center; }
/* R-125 / R-128: plan cards centred on the screen, never running off the right edge */
.teaser-card, .teaser-art, .tiers { min-width: 0; }
@media (max-width: 899px) {
  .teaser-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .teaser-art { width: 100%; max-width: 30rem; margin-inline: auto; box-sizing: border-box; }
  .tiers { max-width: 30rem; margin-inline: auto; }
}
/* R-129: each plan lists what it includes, as the app's paywall does */
.tier-incl { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.tier-incl li { position: relative; padding-left: 1.6em; color: #fff; font-size: var(--fs-small); line-height: 1.45; }
.tier-incl li::before {
  content: ''; position: absolute; left: 0; top: 0.2em; width: 1.05em; height: 1.05em; background: var(--color-aureley-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pricing-launch { max-width: 34rem; margin: var(--space-8) auto 0; }
/* R-130: the AUD line is a plain note: no card, no shadow, no backing */
main .price-currency::before, .teaser-art > p.price-currency::before { content: none !important; }
.price-currency { background: none; box-shadow: none; border: 0; }
/* R-126 / R-133: room between the topic pills and the text above them */
main > .section:first-of-type nav.store-badges { margin-top: var(--space-8); }
/* R-136: space between a page heading and its first paragraph */
main h1 + p, main h1 + .lead { margin-top: var(--space-5); }
/* R-137: Aureley stands as tall as the photo beside her */
.g3-pair { align-items: stretch; grid-template-columns: 0.85fr 1fr; }
/* her square artwork has empty space at the sides: fill the column's height and trim only that */
.g3-mascot { height: 100%; max-height: none; object-fit: cover; object-position: center; }
/* R-134: a note beside Aureley's play button */
.voice-play-row { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.voice-play-row .voice-play { margin: 0; }
.voice-play-note { font-family: var(--font-display); font-weight: var(--font-weight-bold); color: #fff; }
/* R-135 / R-150: the studio's virtual address */
.studio-address { margin-top: var(--space-2); }
/* R-140: the article CTA is one line, centred */
.article-cta { text-align: center; }
.article-cta .btn { white-space: nowrap; }
/* R-149 / R-155: required fields said once; the opt-in sits under the message */
.form-required { font-size: var(--fs-small); color: #fff; margin: 0 0 var(--space-2); }
.optin { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-small); line-height: 1.5; color: #fff; min-height: var(--touch-target, 44px); cursor: pointer; }
.optin input { width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; flex: none; accent-color: var(--color-aureley-orange); }
/* R-132: FAQ scrolls smoothly on a phone. Many stacked live blur layers made every frame repaint
   the blur under each card; on phones the FAQ cards take a solid tint of the same colour instead. */
@media (max-width: 899px) {
  .page-faq .glass-bubble, .page-faq .ed-block, .page-faq .faq .glass-bubble { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(28, 13, 50, 0.74); }
}
/* Pricing's voice card has no label: idle, it shows Aureley's still; the bars move only for the built-in voice */
.diff-card-solo:not([data-state="builtin"]) .speak-mascot:not([hidden]) { display: block; }
.diff-card-solo:not([data-state="builtin"]) .eq { display: none; }
/* the small "Privacy notice" link still gives a 24 px target (WCAG 2.2 target size) */
.form-note a { display: inline-flex; align-items: center; min-height: 24px; }
/* R-130: with no backing behind it, the AUD note reads at full strength (and in the darkest ink on the
   light coral end of the home card) to keep 4.5:1 */
main .price-currency { color: #fff; }
.teaser-card > .price-currency { grid-column: 1 / -1; margin: calc(var(--space-3) - var(--gap-xl)) 0 0; padding-inline: var(--space-2); text-align: right; }
@media (max-width: 899px) { .teaser-card > .price-currency { text-align: center; } .form-note a { min-height: 44px; } }

/* ══ v1.6 · Mel's phone review of v1.5 (R-161 to R-183) and the final polish pass ══════════════ */
/* R-169: the home "Get the app" link breaks after "iPad", so the arrow rides with "or Android" */
.link-cue-split > span { display: block; }
.link-cue-split > span:last-child { display: inline; white-space: nowrap; }
/* R-167: the S9 / S10 spacing standard, site-wide.
   Stacks (S9, Get the app: promo card, store buttons, voice button): 24px between blocks, and a
   block's own margin never adds to the stack's gap (the v1.5 launch blocks ran 44px).
   Cards (S10, "What it reads"): 24px padding, 16px from the heading to the first line. */
#get-notified:not(form), .pricing-launch { display: flex; flex-direction: column; row-gap: var(--space-6); margin-top: var(--space-6); }
:is(.getapp-copy, #get-notified:not(form), .pricing-launch, .container:has(> .launch-form)) > :is(.launch-form, .form-note, .promo-card, .store-badges, .voice-line) { margin-block: 0; }
/* R-172: the privacy notice belongs to its form: it sits 8px under the button, the least the
   touch-spacing rule allows (its link keeps its 44px touch height, so the words land about 18px below) */
:is(.getapp-copy, #get-notified:not(form), .pricing-launch, .container:has(> .launch-form)) > :is(.launch-form, .form-done) + .form-note { margin-top: calc(var(--space-2) - var(--space-6)); }
.honesty > :is(h2, h3) + *, .contact-card > h2 + * { margin-top: var(--space-4); }
.summary-card { padding: var(--space-6); }
.promo-card > p.promo-draw { display: block; font-weight: var(--font-weight-regular, 400); color: #fff; line-height: 1.55; }
/* R-173: Pricing, "The price you see…" sits 24px above the "Every plan includes" card (was 64px) */
.page-pricing main > section:first-of-type { padding-bottom: 0; }
.page-pricing main > section:first-of-type .lead:last-child { margin-bottom: 0; }
.page-pricing main > section:first-of-type + section { padding-top: var(--space-6); }

/* R-170: button words are centred, also when they wrap; the home plan cards and the Monthly / Yearly
   switch sit centred on their backing card instead of running off its right edge */
.btn { text-align: center; }
@media (max-width: 899px) {
  .teaser-art { padding-inline: var(--space-4); }
  .teaser-art > .period-switch { display: flex; width: 100%; box-sizing: border-box; }
  .teaser-art > .period-switch[hidden] { display: none; }
  .teaser-art > .period-switch button { flex: 1 1 0; min-width: 0; }
  /* name and price share a line when they fit; on a narrow phone the price drops under the name */
  .teaser-tiers li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: var(--space-3); padding-inline: var(--space-5); }
  .teaser-tiers li > :is(.muted, .tier-save) { flex-basis: 100%; }
  .teaser-tiers .tier-price { text-align: left; }
}

/* R-171 (replaces R-153's split): one caption style everywhere, the dark pill under the picture, as
   on Press "Aureley on iPad". Photos, videos, the full-width video bands and the home moment tags
   all carry it; none sits on top of its picture. (:nth-child(n) only lifts these over older rules.) */
main figure > figcaption:nth-child(n) {
  position: relative; inset: auto; left: auto; bottom: auto; transform: none; isolation: isolate; z-index: 4; /* above the ghost numerals, as before */
  display: flex; flex-direction: column; gap: 2px; width: fit-content; max-width: min(100%, 34rem);
  margin-top: var(--space-4); padding: var(--space-3) var(--space-5);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: #fff; text-align: left;
  border-radius: var(--radius-md); -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(160deg, rgba(30, 14, 54, 0.82) 0%, rgba(10, 5, 25, 0.76) 60%, rgba(26, 10, 44, 0.82) 100%);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 28px rgba(10, 5, 25, 0.24);
}
main figure > figcaption:nth-child(n)::before {
  content: ''; position: absolute; inset: -0.35rem -0.75rem; z-index: -1; pointer-events: none;
  border-radius: 1rem; filter: blur(8px); background: rgba(14, 7, 30, calc(0.22 + var(--zone, 1) * 0.42));
}
main figure > figcaption:nth-child(n) .mono { font-size: var(--fs-mono); }
main figure > figcaption:nth-child(n) .chip-sub { font-size: 1rem; color: #fff; }
/* the newly converted captions sit centred under their picture, as the Press ones do */
main :is(.band, .head-figure, .band-split-media:not(.photo-slot)) > figcaption:nth-child(n) { margin-inline: auto; }
main .band > figcaption.band-caption > .band-chip { display: contents; }
/* full-width video bands: the height moves from the band to its video, so the caption sits below it */
.band { height: auto; overflow: visible; }
.band video { position: relative; inset: auto; display: block; height: clamp(320px, 56vh, 560px); }
.band::after { bottom: auto; height: clamp(320px, 56vh, 560px); }
@media (max-width: 899px) {
  .band { height: auto; }
  .band video, .band::after { height: clamp(260px, 48vw, 380px); }
}

/* Polish (UI UX Pro Max, performance: reserve space, no layout shift). Both shifted the home page
   after it had shown, so a link to its launch list moved under the reader (R-179):
   1. the read-along player keeps the height of its finished form while its timings load
      (it grew from the native control, 54px, to 124px at about 250 ms) */
@media (scripting: enabled) {
  .readalong:not(.ra-ready) .player-invite { min-height: 124px; align-content: flex-start; }
}
@media (scripting: enabled) and (max-width: 340px) {
  .readalong:not(.ra-ready) .player-invite { min-height: 176px; }
}
/* on a touch screen the finished player is taller (measured: 144px, 196px under 340px wide) */
@media (scripting: enabled) and (hover: none) {
  .readalong:not(.ra-ready) .player-invite { min-height: 144px; }
}
@media (scripting: enabled) and (hover: none) and (max-width: 340px) {
  .readalong:not(.ra-ready) .player-invite { min-height: 196px; }
}
/* 2. Aureley's clip takes her still poses' place without changing the hero's height (the stills
      stay in the layout unseen, the clip sits over them at the same foot line; it was 39px shorter) */
.hero-mascot.has-video img { display: block; visibility: hidden; }
.hero-mascot.has-video .mascot-video { position: absolute; left: 50%; bottom: 0; translate: -50% 0; }
/* 3. a split-section video keeps the box its width/height give it (880 x 660) when its poster loads;
      the poster's own shape made the figure 13px taller after a link had landed (Use cases, R-179) */
.band-split-media > video { aspect-ratio: 880 / 660; height: auto; object-fit: cover; }