/* ============================================================
   Mentor — landing page stylesheet
   Tokens from ar-lp-design-system.md. Structure and animation
   patterns ported from the KenAI landing (header choreography,
   footer, scroll reveal), restyled for the Mentor system:
   pure black canvas, one green accent, Lora 400 everywhere.
   ============================================================ */

/* ---------- fonts ---------- */

@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/SourceSans3-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  /* foundation */
  --bg-primary: #000000;
  --bg-secondary: #181818;
  --bg-deep: #0a0a0a; /* deep section band — between the black canvas and --bg-secondary */
  --bg-surface: #262626;
  --bg-overlay: #26262680;

  /* accent — scarce by design */
  --accent: #00bf63;
  --accent-20: #00bf6333;
  --accent-30: #00bf634d;
  --accent-50: #00bf6380;
  --accent-70: #00bf63b3;

  /* text */
  --text-primary: #ffffff;
  --text-secondary: #ffffffb2;
  --text-tertiary: #ffffff80;
  --text-disabled: #ffffff4d;
  --text-inverse: #181818;

  /* lines and states */
  --border-default: #262626;
  --border-subtle: #26262680;
  --border-focus: #00bf63;
  --success: #00bf63;
  --error: #ff4757;
  --info: #00bf6333;
  --glass: #808080;

  /* type scale */
  --fs-display: 36px;
  --fs-xxl: 28px;
  --fs-xl: 20px;
  --fs-heading: 18px;
  --fs-lg: 16px;
  --fs-md: 14px;
  --fs-sm: 12px;
  --fs-xs: 11px;
  --lh-tight: 1.2;
  --lh-normal: 1.4;
  --lh-loose: 1.6;

  /* spacing — 4pt scale */
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 48px;

  /* radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* type pairing: Lora carries the voice (headings, countdown),
     Source Sans 3 does the reading (body, UI) */
  --font-display: "Lora", Georgia, serif;
  --font-body: "Source Sans 3", -apple-system, "Segoe UI", sans-serif;

  --header-h: 100px;
}

/* ---------- base ---------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 116px; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
}

/* the display face on everything that speaks with the brand voice */
h1, h2, h3, h4, h5, h6,
.eyebrow,
.cd-digit, .cd-sep, .launch-label {
  font-family: var(--font-display);
}

/* one face, one weight — never let the browser synthesize a bold,
   and no italics: emphasis is size, color, and spacing */
b, strong, h1, h2, h3, h4, h5, h6, th { font-weight: 400; }
em, i { font-style: normal; }

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 840px; }

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

/* ---------- type helpers ---------- */

h1 { font-size: var(--fs-display); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-xxl); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-xl); line-height: var(--lh-tight); }

/* emphasis is size, color, and spacing — not weight */
.eyebrow {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

.lead {
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, filter 0.15s ease, transform 0.18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: var(--text-inverse);
}
.btn--primary:hover { filter: brightness(1.12); }

.btn--secondary {
  background: transparent;
  border-color: var(--accent-50);
  color: var(--accent);
}
.btn--secondary:hover { background: var(--accent-20); border-color: var(--accent); }

.btn--small { padding: var(--space-md) var(--space-lg); font-size: var(--fs-md); }

/* ============================================================
   Header — fixed bar, hidden over the hero; slides in once the
   user scrolls past it (.site-header--visible toggled by main.js)
   and retracts again when the footer comes into view.
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* darker than the cards (#181818) but above the section bands, so the
     bar reads as its own layer — a deliberate tokens-only exception */
  background: #141414;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}
.site-header--visible {
  transform: translateY(0);
  visibility: visible;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.site-header .logo { display: inline-flex; }
.site-header .logo img {
  height: 46px;
  width: auto;
  transition: transform 0.2s ease;
}
.site-header .logo:hover img { transform: scale(1.06); }

.header-cta { display: flex; align-items: center; gap: 12px; }

/* live mini countdown on the header's right side — one color, label
   and digits alike */
.header-count {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  white-space: nowrap;
}
/* fixed-width digits so the line doesn't wobble as numbers change */
.header-count__unit span {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
}
.header-count__unit span.roll { animation: mini-roll 0.35s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes mini-roll {
  from { transform: translateY(0.5em); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- header nav ---------- */

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
@media (min-width: 881px) {
  /* nav and CTA share one axis, dropped to the logo's baseline (the
     lockup's own lettering line); the tall bar keeps padding around both */
  .site-nav { margin-left: auto; margin-right: var(--space-xxl); transform: translateY(14px); }
  .header-cta { transform: translateY(14px); }
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 4px 14px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

/* ---------- hamburger (tablet / mobile) ---------- */

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* open state: bars form an X */
.site-header.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-burger { display: flex; }

  /* keep the countdown text and burger on the logo's bottom line */
  .header-cta { transform: translateY(14px); }

  /* nav becomes a panel dropping from the header bar — same surface */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #141414;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 20px 22px;
  }
  .site-header.nav-open .site-nav { display: flex; }

  .site-nav .nav-link { width: 100%; justify-content: flex-start; }
}

/* small phones: shrink every item until the row fits */
@media (max-width: 520px) {
  .meet__sticky { padding-top: 60px; }
  .scrub__sticky { padding-top: calc(60px + var(--space-lg)); }
  .site-header .container { height: 60px; padding: 0 16px; }
  .site-header .logo img { height: 38px; }
  .header-cta { gap: 6px; transform: translateY(10px); }
  .header-count { font-size: var(--fs-sm); }
  .nav-burger { width: 40px; padding: 10px 8px; flex: none; }
}
@media (max-width: 420px) {
  .header-count__label { display: none; }
}
@media (max-width: 360px) {
  .site-header .container { padding: 0 10px; }
  .site-header .logo img { height: 32px; }
  .nav-burger { width: 36px; padding: 9px 7px; }
}

/* ============================================================
   Sections
   ============================================================ */

.section { padding: var(--space-xxxl) 0; }
@media (min-width: 768px) {
  .section { padding: calc(var(--space-xxxl) * 2) 0; }
}

/* elevation ladder bands — depth is value, not shadow */
body > section:nth-of-type(even) { background: var(--bg-deep); }
/* the Mind/Society/Essence scrub stays on the black canvas so both
   Life Area sections read as one continuous band */
#mind { background: var(--bg-primary); }
/* swap the band between Metrics and Daily guidance: the deep band
   sits on Metrics, Daily guidance returns to the black canvas */
#metrics { background: var(--bg-deep); }
#guidance { background: var(--bg-primary); }
/* the block before the black footer must never be black itself */
body > section:last-of-type { background: var(--bg-deep); }

.section-head { max-width: 720px; margin-bottom: var(--space-xxl); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: var(--space-lg); }
.section-head .lead { color: var(--text-secondary); }

/* two-column split (copy | mockup) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--space-xxxl) + var(--space-lg));
  align-items: center;
}
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: var(--space-xxl); }
}
.split--flip > *:first-child { order: 2; }
@media (max-width: 880px) {
  .split--flip > *:first-child { order: 0; }
}

/* a second split row inside the same section */
.split--follow { margin-top: calc(var(--space-xxxl) * 1.5); }

/* plain screenshot mockup — the renders carry their own phone frame,
   so no border or clipping; vh caps keep them whole on laptop screens */
.mockup {
  width: min(340px, 86vw, 36vh);
  margin: 0 auto;
}
/* a touch dimmer so the screenshots sit into the dark page rather
   than glowing on top of it */
.mockup img { width: 100%; height: auto; filter: brightness(0.8); }
/* the same dim for sections that don't use .mockup: the Life Area
   phones (shell + canvas dim together, so the screen seam calibration
   in .phone__video keeps holding), the metrics filmstrip, and the
   daily-guidance shots */
.phone,
.day-shot__crop,
.day-shot__banner { filter: brightness(0.8); }
.mockup--sm { width: min(260px, 70vw, 30vh); }

/* two mockups side by side — flush with the container's right edge */
.duo {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-xl);
}
.duo .mockup { margin: 0; }
@media (max-width: 880px) {
  .duo { justify-content: center; }
}

/* ---------- life-area chips (Meet Mentor) ---------- */

.area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
@media (min-width: 520px) {
  .area-grid { grid-template-columns: repeat(3, 1fr); }
}
/* same hover language as the Life Area .scrub-card: quiet lift, accent
   rail down the left edge, bullets follow with a small stagger */
.area-chip {
  position: relative;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  overflow: hidden;
  transition: transform 0.25s ease;
}
.area-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-50);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.area-chip:hover { transform: translateY(-4px); }
.area-chip:hover::before { transform: scaleY(1); }
.area-chip h3 { font-size: var(--fs-heading); margin-bottom: var(--space-sm); }
.area-chip ul {
  list-style: none;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.area-chip li {
  position: relative;
  padding-left: var(--space-lg);
  margin-bottom: 2px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.area-chip li::before {
  content: "";
  position: absolute;
  left: var(--space-xs);
  top: 0.55em;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--text-disabled);
  transition: background-color 0.25s ease;
}
/* delays live under :hover only so the release snaps back together */
.area-chip:hover li { transform: translateX(var(--space-xs)); }
.area-chip:hover li:nth-child(2) { transition-delay: 0.06s; }
.area-chip:hover li:nth-child(3) { transition-delay: 0.12s; }
.area-chip:hover li:nth-child(4) { transition-delay: 0.18s; }
.area-chip:hover li:nth-child(5) { transition-delay: 0.24s; }
.area-chip:hover li:nth-child(6) { transition-delay: 0.3s; }
.area-chip:hover li::before { background: var(--accent); }

/* ============================================================
   Meet Mentor — pinned section: the chat mockup scrubs in over
   the home screen; the copy cross-fades under a fixed eyebrow
   ============================================================ */

.meet-scrub { height: 240vh; position: relative; }
.meet__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* the fixed menu overlays the top — center content in what remains */
  padding-top: var(--header-h);
}
.meet__grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  gap: var(--space-xxl);
  align-items: center;
  width: 100%;
}

.meet__steps { position: relative; margin-top: var(--space-lg); }
.meet-step {
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.45s;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
}
.meet-step.is-active { opacity: 1; visibility: visible; transform: none; }
/* the first step stays in the flow so the container keeps its height;
   the second overlays it */
.meet-step--overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.meet-step h2 { margin-bottom: var(--space-lg); }
.meet-step .lead { color: var(--text-secondary); }

/* example questions — quiet chat bubbles, the flattened corner marks
   them as the user's side of the conversation */
.ask-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.ask-list li {
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

.meet__stack {
  position: relative;
  justify-self: end; /* flush with the container's right edge, like the header CTA */
  width: min(340px, 86vw, 36vh);
}
.meet__stack .mockup { width: 100%; margin: 0; }
.meet__mock-a { transition: opacity 0.35s ease; }
.meet__mock-a.is-hidden { opacity: 0; }
/* starts a full viewport below; JS drives it up over the first mockup */
.meet__mock-b {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 100vh, 0);
  will-change: transform;
}

@media (max-width: 880px) {
  /* anchor content to the top so the copy always stays in view;
     the mockup takes whatever the viewport has left below */
  .meet__sticky { align-items: flex-start; }
  .meet__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    justify-items: center;
    text-align: center;
    align-content: start;
  }
  /* same footprint as the Body/Mind phones */
  .meet__stack { width: min(220px, 52vw, 34vh); order: 0; justify-self: center; }
  /* copy block reads from the left, against the centered grid */
  .meet__copy { width: 100%; text-align: left; }
  .meet-step--overlay { align-items: flex-start; }
  .area-chip { text-align: left; }
}

/* the life-area cards can't fit the pinned mobile viewport — they only
   render on mobile once the section falls back to the static layout,
   right under the step-one copy where they live in the markup */
@media (max-width: 880px) {
  .meet__steps .area-grid { display: none; }
  .meet-scrub--static .meet__steps .area-grid { display: grid; }
}

/* static fallback (reduced motion or no JS) */
.meet-scrub--static { height: auto; }
.meet-scrub--static .meet__sticky {
  position: static;
  height: auto;
  padding: var(--space-xxxl) 0;
}
.meet-scrub--static .meet-step {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.meet-scrub--static .meet-step--overlay {
  position: static;
  margin-top: var(--space-xxl);
}
.meet-scrub--static .meet__mock-b {
  position: static;
  transform: none;
  margin-top: var(--space-xl);
}
/* static mobile: the two app mockups sit side by side below the copy */
@media (max-width: 880px) {
  .meet-scrub--static .meet__stack {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: start;
    margin-top: var(--space-xl);
  }
  .meet-scrub--static .meet__mock-b { margin-top: 0; }
}

/* ============================================================
   Hero — the logo reveal, ported from mentor-logo-reveal-soft.html
   ============================================================ */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vh, 44px);
  padding: var(--space-xl);
  overflow: hidden;
  position: relative;
}

.stage {
  position: relative;
  /* the vh cap keeps the reveal comfortable on laptop/tablet heights
     while big screens still get the full 1040px */
  width: min(1040px, 92vw, 78vh);
  aspect-ratio: 2080 / 1300;
  background: var(--bg-primary);
  isolation: isolate;
  /* local glow value from the source animation — not a text token */
  --reveal-light: 247, 248, 248;
  --dur-mark: 1700ms;
  --dur-word: 1500ms;
  --dur-shift: 1000ms;
  --t-shift: 2400ms;
  --t-mark: 600ms;
  --t-word: 3150ms;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ambient bloom behind the mark */
.bloom {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(38% 42% at 25.1% 48%, rgba(var(--reveal-light), 0.13), transparent 68%);
  opacity: 0;
  animation: bloom 6000ms var(--ease) 300ms forwards;
}
@keyframes bloom {
  0% { opacity: 0; transform: scale(0.7); }
  28% { opacity: 1; transform: scale(1); }
  70% { opacity: 0.55; }
  100% { opacity: 0.7; transform: scale(1.02); }
}

.layer { position: absolute; inset: 0; z-index: 1; }
.layer img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* 1. the mark: irises open from the triangle's apex */
.mark {
  opacity: 0;
  transform: scale(1.035);
  filter: blur(16px);
  -webkit-mask-image: radial-gradient(circle, #000 42%, rgba(0, 0, 0, 0) 72%);
          mask-image: radial-gradient(circle, #000 42%, rgba(0, 0, 0, 0) 72%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 25% 22%; mask-position: 25% 22%;
  -webkit-mask-size: 0% 0%; mask-size: 0% 0%;
  animation:
    mark-open var(--dur-mark) var(--ease) var(--t-mark) forwards,
    mark-focus var(--dur-mark) var(--ease) var(--t-mark) forwards;
}
@keyframes mark-open {
  from { -webkit-mask-size: 0% 0%; mask-size: 0% 0%; }
  to { -webkit-mask-size: 420% 420%; mask-size: 420% 420%; }
}
@keyframes mark-focus {
  0% { opacity: 0; transform: scale(1.035); filter: blur(16px); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* 2. the shift: the mark is centred in the frame, then steps aside.
   mark centre sits at 25.12% of the frame; +24.88% puts it dead centre */
.shift {
  position: absolute; inset: 0; z-index: 1;
  transform: translateX(24.88%);
  animation: shift var(--dur-shift) cubic-bezier(0.65, 0, 0.2, 1) var(--t-shift) forwards;
}
@keyframes shift {
  to { transform: translateX(0); }
}

/* 3. the wordmark: the bloom widens, and the word appears where the light reaches */
.word {
  clip-path: inset(0 0 0 43%);
  opacity: 0;
  filter: blur(7px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 8%, rgba(0, 0, 0, 0) 62% 100%);
          mask-image: linear-gradient(90deg, #000 0 8%, rgba(0, 0, 0, 0) 62% 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 280% 100%; mask-size: 280% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation:
    word-wipe var(--dur-word) cubic-bezier(0.33, 0, 0.2, 1) var(--t-word) forwards,
    word-focus var(--dur-word) cubic-bezier(0.33, 0, 0.2, 1) var(--t-word) forwards;
}
@keyframes word-wipe {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
@keyframes word-focus {
  0% { opacity: 0; filter: blur(7px); }
  30% { opacity: 1; }
  100% { opacity: 1; filter: blur(0); }
}

.spill {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(30% 34% at 30% 62%, rgba(var(--reveal-light), 0.10), transparent 70%);
  opacity: 0; transform-origin: 28% 62%;
  animation: spill calc(var(--dur-word) + 900ms) cubic-bezier(0.33, 0, 0.2, 1) calc(var(--t-word) - 250ms) forwards;
}
@keyframes spill {
  0% { opacity: 0; transform: scaleX(0.35); }
  40% { opacity: 1; }
  100% { opacity: 0.75; transform: scaleX(2.5); }
}

/* vignette keeps the edges in the dark */
.vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(72% 78% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.85) 100%);
}

/* scroll cue (line + chevron) enters after the wordmark settles */
.hero-cue {
  position: absolute;
  bottom: var(--space-xl);
  /* centered via full-width flex — the fadeUp animation owns transform */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: var(--fs-md);
  text-align: center;
  opacity: 0;
  animation: fadeUp 0.9s ease 5200ms forwards;
}
/* a thin scroll line under the text — a light segment sweeps across */
.hero-cue__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  white-space: nowrap;
}
.cue-line {
  display: block;
  position: relative;
  width: 140px;
  height: 1px;
  overflow: hidden;
  background: var(--text-disabled);
}
.cue-line__sweep {
  position: absolute;
  inset: 0 auto 0 0;
  width: 36%;
  background: var(--text-secondary);
  transform: translateX(-110%);
  animation: cue-sweep 2.4s cubic-bezier(0.4, 0, 0.2, 1) 5200ms infinite;
}
@keyframes cue-sweep {
  0% { transform: translateX(-110%); }
  65%, 100% { transform: translateX(400%); }
}
@media (max-width: 520px) {
  .hero-cue__inner { white-space: normal; max-width: 78vw; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Phone frame with live video screen (scrub sections)
   ============================================================ */

.phone {
  position: relative;
  width: min(340px, 78vw, 38vh);
  aspect-ratio: 1286 / 2516;
  flex: none;
  /* side mockups sit flush with the container edge, in line with the
     header's logo (left) and CTA (right) */
  justify-self: start;
}
.scrub--flip .scrub__grid > .phone { justify-self: end; }
.phone__shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
/* sits OVER the shell, covering its static print — same stacking as the
   source body-screen-video.html; the #1c1c1c bg blends into the screen.
   brightness(1.08) lifts the frames' rgb(26) video-encode background to
   the shell screen's rgb(28) so the seam disappears */
.phone__video {
  position: absolute;
  z-index: 2;
  filter: brightness(1.08);
  /* #1c1c1c matches the pixel value of the screen inside the shell
     render — a deliberate exception to the tokens-only rule.
     The poster shows until the frame sequence has loaded. */
  background-color: #1c1c1c;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.phone--body .phone__video {
  left: 28.23%; top: 40.58%; width: 43.47%; height: 39.55%;
  background-image: url("../assets/video/body-poster.webp");
}
.phone--mind .phone__video {
  left: 26.28%; top: 47.04%; width: 47.43%; height: 25.16%;
  background-image: url("../assets/video/mind-poster.webp");
}

/* ---------- scroll-scrubbed pinned sections ---------- */

.scrub { height: 320vh; position: relative; }
.scrub__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* the fixed menu overlays the top — center content in what remains */
  padding-top: var(--header-h);
}
.scrub__grid {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: var(--space-xxl);
  align-items: center;
  width: 100%;
}
/* flipped variant: steps left, phone right — the narrow column swaps
   sides too, so the phone stays aligned with the container edge */
.scrub--flip .scrub__grid { grid-template-columns: 1fr minmax(260px, 380px); }
.scrub--flip .scrub__grid > .phone { order: 2; }

/* the eyebrow stays fixed above the stack; only the steps inside
   .scrub__stack fade and slide as the scroll position changes */
.scrub__steps { display: flex; flex-direction: column; min-height: 19em; }
.scrub__stack { position: relative; flex: 1; }
.scrub-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  /* hidden steps must not swallow the hover meant for the visible card */
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.45s;
}
.scrub-step.is-active { opacity: 1; visibility: visible; transform: none; }
.scrub-step h2 { margin-bottom: var(--space-lg); }
/* body text sits in a subtle card. Hover follows the area-chip idiom
   (quiet lift, no glow) plus two of its own moves: an accent rail
   sweeps down the left edge and the bullets step aside. */
.scrub-card {
  position: relative;
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s ease;
}
.scrub-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-50);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.scrub-card:hover { transform: translateY(-4px); }
.scrub-card:hover::before { transform: scaleY(1); }
.scrub-step p { color: var(--text-secondary); }
.scrub-card ul {
  list-style: none;
  margin-top: var(--space-lg);
  color: var(--text-secondary);
  line-height: var(--lh-normal);
}
.scrub-card li {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.scrub-card li + li { margin-top: var(--space-md); }
.scrub-card li::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary);
  /* baseline-align the dot with the first line of text */
  transform: translateY(-3px);
  transition: background-color 0.25s ease;
}
/* the bullets follow the rail one after another; delays live under
   :hover only so the release snaps back together */
.scrub-card:hover li { transform: translateX(var(--space-xs)); }
.scrub-card:hover li:nth-child(2) { transition-delay: 0.06s; }
.scrub-card:hover li:nth-child(3) { transition-delay: 0.12s; }
.scrub-card:hover li::before { background: var(--accent); }

.scrub-quote {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}
body > section:nth-of-type(even) .scrub-quote { background: var(--bg-surface); }

@media (max-width: 880px) {
  /* breathing room below the fixed menu — the mockup keeps its size.
     Anchor content to the top so the eyebrow and card always stay in
     view; the mockup takes whatever the viewport has left below */
  .scrub__sticky { padding-top: calc(var(--header-h) + var(--space-lg)); align-items: flex-start; }
  .scrub__grid,
  .scrub--flip .scrub__grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    justify-items: center;
    text-align: center;
    align-content: start;
  }
  /* title and body text first, mockup below */
  .scrub__grid > .phone,
  .scrub--flip .scrub__grid > .phone { order: 2; width: min(220px, 52vw, 34vh); justify-self: center; }
  /* sized to the tallest step's content; centering splits the leftover
     evenly so the text never drifts far from the mockup */
  .scrub__steps { min-height: 440px; width: 100%; order: 1; }
  .scrub-step { justify-content: center; }
  /* card copy reads from the left on mobile; the centered grid would
     otherwise center every line */
  .scrub-card { text-align: left; }
  .scrub-quote { text-align: left; }
}

/* static fallback (reduced motion, video failure, or small screens) */
.scrub--static { height: auto; }
.scrub--static .scrub__sticky { position: static; height: auto; padding: var(--space-xxxl) 0; }
.scrub--static .scrub__steps { min-height: 0; }
.scrub--static .scrub-step {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  margin-bottom: var(--space-xl);
}

/* mobile: the pinned Life Area choreography gives way to one swipeable
   row of all six areas (markup lives at the end of #body); the Mind
   section disappears entirely — its content rides in the carousel */
.areas-carousel { display: none; }
@media (max-width: 880px) {
  #body .scrub__sticky,
  #mind { display: none; }
  .areas-carousel { display: block; padding: var(--space-xxl) 0 var(--space-lg); text-align: left; }
  .areas-carousel__track {
    display: flex;
    align-items: stretch;
    gap: var(--space-lg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    padding: 0 20px var(--space-lg);
    scrollbar-width: none;
  }
  .areas-carousel__track::-webkit-scrollbar { display: none; }
  /* one card fills the view; the dots below signal there are more */
  .area-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
  }
  /* one size down so every title holds a single line on small phones */
  .area-slide h2 { margin-bottom: var(--space-lg); font-size: var(--fs-xl); }
  .area-slide .scrub-card { flex: 1; }
  .areas-carousel__dots {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg) 20px 0;
  }
  .areas-carousel__dots span {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--text-disabled);
    transition: background-color 0.25s ease;
  }
  .areas-carousel__dots span.is-active { background: var(--text-secondary); }
}

/* the mobile static layout drops the in-section phones; the Body and
   Mind screens return side by side in the .phones-duo block below */
.phones-duo { display: none; }
@media (max-width: 880px) {
  .scrub--static .phone { display: none; }
  .phones-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    justify-items: center;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xxl);
  }
  .phones-duo .phone { width: 100%; }
}

/* ---------- scroll reveal (class added by JS) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal--in { opacity: 1; transform: none; }

/* ============================================================
   Metrics — drifting filmstrip of example screens
   ============================================================ */

.stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xxl);
  margin: var(--space-xxl) 0;
  text-align: center;
}
.stat b {
  display: block;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
.stat span {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.filmstrip {
  overflow: hidden;
  margin-top: var(--space-xxl);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
}
.filmstrip__track {
  display: flex;
  gap: var(--space-lg);
  width: max-content;
  animation: strip-drift 48s linear infinite;
}
/* metric cards riding the strip: icon, the number, what it measures,
   and where it lives — real values from the app's metric tables */
.metric-card {
  flex: none;
  /* one uniform width, sized so the longest one-line label fits */
  width: 224px;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
}
/* icon sits in its own quiet tile, half a step above the card */
.metric-card svg {
  color: var(--text-tertiary);
  width: 38px;
  height: 38px;
  padding: 9px;
  background: var(--bg-overlay);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
}
.metric-card b {
  font-family: var(--font-display);
  font-size: var(--fs-xxl);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-xs);
}
.metric-card span {
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  white-space: nowrap;
}
.metric-card i {
  margin-top: auto;
  padding-top: var(--space-lg);
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@keyframes strip-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.filmstrip-caption {
  margin-top: var(--space-xl);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-md);
}


/* ============================================================
   Daily guidance — the arc of a day: a vertical rail with two
   check-in moments and a closing node
   ============================================================ */

.day-line {
  position: relative;
  max-width: 960px;
  margin: calc(var(--space-xxxl) + var(--space-lg)) auto 0;
  padding-bottom: var(--space-lg);
}
.day-line__rail {
  position: absolute;
  left: 50%;
  top: -12px;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent,
    var(--bg-surface) 12%,
    var(--bg-surface) 88%,
    transparent
  );
}

.day-moment {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--space-xxxl) * 2);
  align-items: center;
  margin-bottom: calc(var(--space-xxxl) + var(--space-xl));
}
/* the node on the rail */
.day-moment::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-full);
  background: var(--accent);
}

/* zigzag: morning copy left / banner right, evening mirrored */
.day-moment--morning .day-moment__meta { order: 1; text-align: right; }
.day-moment--morning .day-moment__shot { order: 2; }
.day-moment--evening .day-moment__meta { order: 2; text-align: left; }
.day-moment--evening .day-moment__shot { order: 1; }
.day-moment--morning .pill-row { justify-content: flex-end; }

.day-time {
  display: block;
  color: var(--accent);
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.day-moment h3 { font-size: var(--fs-xl); margin-bottom: var(--space-md); }
.day-moment p {
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}

/* the banner floats in a soft pool of light, hugging the rail */
.day-moment__shot {
  position: relative;
  isolation: isolate;
  max-width: 300px;
}
.day-moment--morning .day-moment__shot { justify-self: start; }
.day-moment--evening .day-moment__shot { justify-self: end; }
.day-moment:last-child { margin-bottom: 0; }
.day-moment__shot::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  background: radial-gradient(55% 60% at 50% 50%, rgba(247, 248, 248, 0.05), transparent 70%);
  pointer-events: none;
}
/* a plain phone, cropped and fading out below — the notification
   lands on its screen */
.day-shot__crop {
  overflow: hidden;
  aspect-ratio: 1286 / 1250;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 45%, transparent 96%);
}
.day-shot__phone { width: 100%; display: block; }
.day-shot__banner {
  position: absolute;
  top: 9%;
  left: 50%;
  width: 84%;
  transform: translateX(-50%);
  transition: transform 0.2s ease;
}
.day-moment__shot:hover .day-shot__banner { transform: translate(-50%, -3px); }

.pill-row {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (max-width: 880px) {
  /* rail moves to the left edge; moments stack, copy above banner */
  .day-line__rail { left: 4px; transform: none; }
  .day-moment {
    grid-template-columns: 1fr;
    row-gap: var(--space-lg);
    padding-left: var(--space-xxl);
    margin-bottom: var(--space-xxxl);
  }
  .day-moment::before { left: 4px; top: 10px; transform: translate(-50%, 0); }
  .day-moment--morning .day-moment__meta { order: 1; text-align: left; }
  .day-moment--morning .day-moment__shot { order: 2; }
  .day-moment--evening .day-moment__meta { order: 1; }
  .day-moment--evening .day-moment__shot { order: 2; }
  .day-moment--morning .pill-row { justify-content: flex-start; }
  .day-moment--morning .day-moment__shot,
  .day-moment--evening .day-moment__shot { justify-self: start; max-width: 290px; }
}
.pill {
  padding: var(--space-sm) var(--space-lg);
  background: var(--bg-surface);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--fs-md);
}

/* ============================================================
   Countdown
   ============================================================ */

.launch { text-align: center; }

/* subtle card around the countdown — one value step above the deep band,
   the edge is the value change, no border or shadow */
.launch-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-xxl) var(--space-xl);
  max-width: 560px;
  margin: 0 auto;
}
.launch-label {
  color: var(--text-secondary);
  font-size: var(--fs-xl);
}

.countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0 var(--space-lg);
}
.cd-group { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.cd-digits { display: flex; gap: 2px; }
.cd-digit {
  overflow: hidden;
  height: 1em;
  line-height: 1;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--text-primary);
}
/* the days group carries the section's single accent */
.cd-group--days .cd-digit { color: var(--accent); }
.cd-digit__reel {
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cd-label {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cd-sep {
  font-size: clamp(20px, 3vw, 30px);
  color: var(--text-disabled);
  line-height: 1;
  transform: translateY(-0.35em);
}
.launch-note { color: var(--text-tertiary); font-size: var(--fs-md); }
.launch-closer { margin-top: var(--space-xl); color: var(--text-tertiary); font-size: var(--fs-md); }

@media (max-width: 400px) {
  .countdown { gap: var(--space-xs); }
  .cd-digit { font-size: 30px; }
  .cd-sep { font-size: 24px; }
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--bg-primary);
  padding: 44px 0 40px;
  color: var(--text-tertiary);
  font-size: 13.5px;
  line-height: 1.7;
}

.foot-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}

.foot-text { max-width: 340px; }
.foot-logo { height: 36px; width: auto; margin-bottom: var(--space-lg); }
.foot-desc { color: var(--text-secondary); margin-bottom: var(--space-lg); }
/* live mini countdown, moved down from the header — one quiet color,
   label and digits alike */
.foot-count {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  color: var(--text-tertiary);
  font-size: var(--fs-md);
  white-space: nowrap;
  margin-bottom: var(--space-lg);
}
/* fixed-width digits so the line doesn't wobble as numbers change */
.foot-count__unit span {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
}
.foot-count__unit span.roll { animation: mini-roll 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.foot-text p { margin-bottom: var(--space-xs); }
.foot-legal a { color: var(--text-disabled); text-decoration: underline; }
.foot-legal a:hover { color: var(--text-secondary); }
.foot-text a { color: var(--text-secondary); text-decoration: underline; }
.foot-text a:hover { color: var(--text-primary); }
.foot-copy { margin-top: var(--space-lg); color: var(--text-disabled); }

.foot-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: 13.5px;
}
.foot-nav a { color: var(--text-tertiary); text-decoration: none; }
.foot-nav a:hover { color: var(--text-primary); text-decoration: underline; }
.fn-head {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fn-head--gap { margin-top: var(--space-lg); }

.foot-social { display: flex; gap: 10px; }
.foot-social a {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.foot-social a:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

/* ============================================================
   Legal page (privacy policy) — standalone, no header/footer
   ============================================================ */

.legal { padding: var(--space-xxxl) 0; }
.legal h1 { margin-bottom: var(--space-lg); }
.legal h2 {
  font-size: var(--fs-xl);
  margin: var(--space-xxl) 0 var(--space-md);
}
.legal h3 {
  font-size: var(--fs-heading);
  margin: var(--space-xl) 0 var(--space-md);
}
.legal p, .legal li {
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-md);
  /* justified body — lines spread to the full column width */
  text-align: justify;
}
.legal ul { padding-left: var(--space-xl); margin-bottom: var(--space-lg); }
/* emphasis without italics — brighter text carries the weight */
.legal em { color: var(--text-primary); }
.legal-meta { color: var(--text-tertiary); font-size: var(--fs-md); margin-bottom: var(--space-xxl); }
.legal-links {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-xxl);
}
.legal-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--text-secondary);
  font-size: var(--fs-md);
}
.legal-links a:hover { color: var(--text-primary); }

/* ============================================================
   Reduced motion: switch it all off
   ============================================================ */

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

  /* logo reveal: show the final composed state instantly */
  .bloom, .spill, .shift, .mark, .word { animation: none !important; }
  .bloom { opacity: 0.7; }
  .mark {
    opacity: 1; filter: none; transform: none;
    -webkit-mask-image: none; mask-image: none;
  }
  .word { opacity: 1; filter: none; -webkit-mask-image: none; mask-image: none; }
  .shift { transform: none; }
  .spill { opacity: 0.75; transform: none; }
  .hero-cue { animation: none !important; opacity: 1; }
  .cue-line__sweep { animation: none !important; transform: none; }

  .filmstrip__track { animation: none; transform: none; }

  /* card hover keeps its color shift but drops every movement */
  .scrub-card, .scrub-card::before, .scrub-card li,
  .area-chip, .area-chip::before, .area-chip li { transition: none; }
  .scrub-card:hover, .area-chip:hover { transform: none; }
  .scrub-card:hover li, .area-chip:hover li { transform: none; }
}