/* ────────────────────────────────────────────────────────────
   ✺ Tūī case story — /work/tui/
   uses ../../style.css for shared tokens, nav, footer, grain, cursor
   two visual worlds:
     · .tui-proto / .tui-cabin — the in-car prototype (Manrope, Lichen+Electric-Blue)
     · .tui-body — the case story voice (Ubuntu Sans Mono, void bg, Tūī accents)
   ──────────────────────────────────────────────────────────── */

:root {
  /* Tūī brand tokens — sourced from _BUILD_NOTES.md and the Fall 2024 deck */
  --tui-fogbound:   #dfd9d0;
  --tui-pure:       #f9f9f9;
  --tui-carbon:     #b2aea7;
  --tui-battery:    #0e0e0e;
  --tui-lichen:     #dfff00;   /* live Figma value — the bright mascot/CTA gradient */
  --tui-electric:   #3671c7;
  --tui-lichen-soft: #b1a56c;  /* deck spec — used for muted accents on the story side */

  /* neumorphic shadow recipe (in-prototype) */
  --tui-shadow-out: -1px -1px 1px var(--tui-pure), 1px 1px 2px var(--tui-carbon);
  --tui-shadow-in:   inset 0 4px 6px rgba(0,0,0,0.18), inset 0 -1px 2px var(--tui-pure);
}

/* ── nav glow override — Tūī's lichen + electric dual instead of pink+blue ── */
@keyframes tui-nav-breathe {
  0%, 100% {
    box-shadow:
      -16px 0 60px -14px rgb(223 255 0 / 0.32),
       16px 0 60px -14px rgb(54 113 199 / 0.32);
  }
  50% {
    box-shadow:
      -22px 0 80px -10px rgb(223 255 0 / 0.5),
       22px 0 80px -10px rgb(54 113 199 / 0.5);
  }
}
.tui-body .nav { animation-name: tui-nav-breathe; }

/* ── body palette: void bg, Tūī accents (story tier) ── */
.tui-body {
  --neon:    #dfff00;
  --mint:    #3671c7;
  --bio:     var(--neon);
  --bio-hex: #dfff00;
  --glow-dual:
    -24px 0 80px -10px rgb(223 255 0 / 0.35),
     24px 0 80px -10px rgb(54 113 199 / 0.45);
  --glow-dual-soft:
    -16px 0 60px -14px rgb(223 255 0 / 0.22),
     16px 0 60px -14px rgb(54 113 199 / 0.32);
  --glow-seam: 0 0 14px rgb(223 255 0 / 0.5);

  background: var(--void);
  color: var(--text);
  overflow-x: clip;
}

/* ── eyebrow + heading patterns (story-tier) ── */
.tui-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--f-mono);
  font-size: clamp(10px, 0.82vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.tui-eyebrow__glyph { color: var(--neon); }

.tui-h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ── 1 · HERO ─────────────────────────────────────────────── */

.tui-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vh, 28px);
  padding: clamp(96px, 12vh, 130px) clamp(20px, 4vw, 64px) clamp(20px, 3vh, 36px);
  isolation: isolate;
}
.tui-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: -1;
}

.tui-hero__text {
  max-width: 1100px;
  width: 100%;
  display: grid;
  gap: clamp(8px, 1vh, 14px);
  text-align: center;
  justify-items: center;
  will-change: opacity, transform;
}
.tui-hero__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  text-shadow: 0 2px 30px oklch(0 0 0 / 0.7);
}
.tui-hero__title em {
  font-style: italic;
  background: linear-gradient(92deg, var(--tui-lichen) 0%, var(--tui-electric) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgb(223 255 0 / 0.3);
}
.tui-hero__sub {
  font-family: var(--f-mono);
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 56ch;
  margin: 0;
  display: grid;
  gap: 4px;
}

/* ── the cabin: container that holds the dashboard. swap .tui-cabin__bg
   to a real cabin photo when sourced — everything else stays. ── */
.tui-cabin {
  position: relative;
  /* cap by both the available viewport height and the max width.
     calc gives the width that would correspond to 78vh of height,
     so the cabin scales by whichever dimension hits its limit first. */
  width: min(100% - 32px, calc(56vh * (1366 / 1024)), 1300px);
  aspect-ratio: 1366 / 1024;
  margin: 0 auto;
  border-radius: clamp(18px, 2vw, 32px);
  overflow: hidden;
  isolation: isolate;
}
.tui-cabin__bg {
  position: absolute; inset: 0;
  /* implied cabin: dark gradient + faint warmth as if sun catching the dash.
     swap to: background: url('../../images/tui/cabin.jpg') center/cover; */
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgb(54 113 199 / 0.15), transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% -10%, rgb(20 24 32) 0%, rgb(8 10 14) 100%);
  z-index: 0;
}
.tui-cabin__vignette {
  display: none;
}
/* THE cabin-light bleed: a screen-blended halo over the cabin that radiates
   from the dashboard center. opacity is driven by data-state on .tui-cabin
   (set by tui.js on interaction). this is what makes the prototype feel
   like an actual screen lighting an actual interior. */
.tui-cabin__bleed {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(ellipse 50% 45% at 50% 55%, rgb(223 255 0 / 0.45) 0%, rgb(223 255 0 / 0.18) 30%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 50% 50%, rgb(54 113 199 / 0.4) 0%, transparent 65%);
  mix-blend-mode: screen;
  filter: blur(38px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.6s var(--ease, cubic-bezier(.2,.7,0,1));
}
.tui-cabin[data-state="press"] .tui-cabin__bleed { opacity: 0.7; }
.tui-cabin[data-state="drag"]  .tui-cabin__bleed { opacity: 0.85; }
.tui-cabin[data-state="flash"] .tui-cabin__bleed { opacity: 1; transition-duration: 80ms; }
.tui-cabin[data-theme="dark"]  .tui-cabin__bleed { opacity: 0.55; }

/* gentle ambient pulse so even the idle hero feels alive */
@keyframes tui-cabin-breath {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 0.42; }
}
.tui-cabin__bleed { animation: tui-cabin-breath 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tui-cabin__bleed { animation: none; }
}

/* ── back / forward arrows ─────────────────────────────────
   sit at the very bottom of the dashboard, hugging the
   progress-indicator pill. always present; light hover fade
   so they don't fight the screen content. ─────────────── */
.tui-nav-arrow {
  position: absolute;
  bottom: clamp(16px, 2.8%, 28px);
  appearance: none;
  border: 0;
  background: var(--tui-pure);
  color: var(--tui-battery);
  width: clamp(34px, 3.6%, 44px);
  height: clamp(34px, 3.6%, 44px);
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 6;
  box-shadow: -2px -2px 4px var(--tui-pure), 3px 3px 8px rgba(178,174,167,0.55);
  opacity: 0.85;
  transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s;
}
.tui-nav-arrow:hover { opacity: 1; transform: scale(1.06); }
.tui-nav-arrow:active {
  transform: scale(0.96);
  box-shadow: inset -2px -2px 4px var(--tui-pure), inset 3px 3px 8px rgba(178,174,167,0.5);
}
.tui-nav-arrow--back    { left:  clamp(28px, 5%, 64px); }
.tui-nav-arrow--forward { right: clamp(28px, 5%, 64px); }
.tui-nav-arrow[disabled] { opacity: 0.25; cursor: default; pointer-events: none; }

/* ── dashboard frame: 1366×1024, scaled to fit the cabin width ── */
.tui-dash {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  aspect-ratio: 1366 / 1024;
  border-radius: clamp(14px, 1.6vw, 24px);
  background: var(--tui-fogbound);
  color: var(--tui-battery);
  font-family: 'Manrope', system-ui, sans-serif;
  overflow: hidden;
  z-index: 2;
  /* subtle outer glow so the dash looks lit from within */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 24px 60px -20px rgba(0,0,0,0.6),
    0 0 80px -20px rgb(223 255 0 / 0.25);
}
.tui-dash__bezel {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* inner bezel highlight + soft inner shadow to read as a real screen */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    inset 0 0 60px rgba(178,174,167,0.18);
  z-index: 5;
}
.tui-dash__noise {
  position: absolute; inset: 0;
  opacity: 0.03;
  mix-blend-mode: luminosity;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  z-index: 4;
}

/* screens stack — only .is-active is shown */
.tui-screens {
  position: absolute; inset: 0;
}
.tui-screen {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease, cubic-bezier(.2,.7,0,1));
}
.tui-screen.is-active {
  opacity: 1;
  visibility: visible;
}

/* image-backed screens: each .tui-screen--bg uses a Figma export PNG
   as its full-bleed background. preserves the exact 4:3 layout from
   the design file. interactive elements ride on top via .tui-hit /
   .tui-slider-live / .tui-confetti. */
.tui-screen--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--tui-fogbound);
}

/* invisible click hotspots — sized + positioned to match Figma element
   bounds. user clicks act as autoplay skips (handlers in tui.js). */
.tui-hit {
  position: absolute;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 4;
  border-radius: 12px;
  transition: outline 0.2s, box-shadow 0.2s, transform 0.2s;
}
.tui-hit:focus-visible {
  outline: 2px solid var(--tui-electric);
  outline-offset: 2px;
}
/* auto-pick visual indicator removed — was misaligned + glitchy.
   screen transitions alone communicate the picks. */
/* B1 orb: covers bottom-center area generously */
.tui-hit--orb {
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 18%;
  border-radius: 999px;
}
/* B2 activity cards: 5 cards spanning lower half of screen.
   moved up so the top of the cards is clickable. */
.tui-hit--card { top: 47%; height: 36%; width: 18%; border-radius: 8px; }
.tui-hit--listen  { left: 9%;  }
.tui-hit--outside { right: 23%; }
.tui-hit--nourish { right: 5%;  }

/* B3 / B7 / B10 sub-cards row — generous overlap with the icon row */
.tui-hit--sub-row {
  top: 47%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 22%;
  border-radius: 8px;
}
/* B12 expanded grid (Dog Park 4) — 2 rows of sub-cards, taller area */
.tui-hit--sub-row--tall { height: 36%; }
/* B7 +-sign hit zone — large area at the right end + below the
   sub-card row, so tapping anywhere near the +-glyph or below the
   cards expands to the 12-grid. */
.tui-hit--plus {
  top: 47%;
  right: 0;
  width: 22%;
  height: 30%;
  border-radius: 8px;
}

/* B4 / B8 "Yes, send a map" gradient pill */
.tui-hit--yes {
  top: 48%;
  left: 50%;
  transform: translateX(-50%);
  width: 44%;
  height: 18%;
  border-radius: 999px;
}

/* B5 slider styles live further down with the masked-overlay rules */

/* ── Bakery 1 · start (NATIVE) ──────────────────────────────
   rebuilt without a Figma bg image so typography is fully
   controllable in code. layout: corners pinned, greeting at top,
   mascot center, orb + progress at bottom. ──────────────── */
.tui-screen--start {
  position: absolute;
  inset: 0;
  background: var(--tui-fogbound);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(8px, 1.4vh, 18px);
  padding: clamp(20px, 4%, 48px) clamp(28px, 5%, 64px) clamp(40px, 5%, 60px);
  align-items: center;
  justify-items: center;
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--tui-battery);
}

/* corner icon clusters — top-left + top-right of the dashboard */
.tui-corners {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.tui-corner-cluster {
  display: flex;
  gap: clamp(8px, 1.2%, 16px);
}
.tui-corner-icon {
  width: clamp(48px, 6.4%, 72px);
  height: clamp(48px, 6.4%, 72px);
  border-radius: 999px;
  background: var(--tui-pure);
  display: grid;
  place-items: center;
  color: var(--tui-battery);
  box-shadow: -2px -2px 4px var(--tui-pure), 3px 3px 8px rgba(178,174,167,0.55);
  flex: 0 0 auto;
}
.tui-corner-icon svg {
  width: 60%;
  height: 60%;
  display: block;
}

/* greeting block — top-aligned, hugging the top corners area */
.tui-greet-block {
  display: grid;
  gap: clamp(10px, 1.4vh, 18px);
  text-align: center;
  justify-items: center;
  padding-top: clamp(20px, 3vh, 32px);
}
.tui-greet-hello {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.5vw, 22px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tui-battery);
  opacity: 0.7;
  margin: 0;
  line-height: 1;
}
.tui-greet-hello em {
  font-style: normal;
  font-weight: 700;
  /* solid electric blue — readable on the cream fogbound bg
     (the gradient version blended into the bg) */
  color: var(--tui-electric);
  opacity: 1;
}
.tui-greet-question {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.9vw, 26px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--tui-battery);
  margin: 0;
  text-wrap: balance;
  max-width: 26ch;
}

/* mascot — inline SVG with the brand gradient, no PNG so no white-bg
   issue. soft yellow glow halo underneath. */
.tui-mascot-svg {
  width: clamp(150px, 20%, 240px);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  animation: tui-breathe-small 4.2s ease-in-out infinite;
}
.tui-mascot-svg::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle, rgba(223,255,0,0.18) 0%, transparent 65%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.tui-mascot-svg svg,
.tui-mascot-svg img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.15));
  /* the PNG bg is fogbound (matches dashboard); multiply blend
     ensures any near-white pixels disappear cleanly. */
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) {
  .tui-mascot-svg { animation: none; }
}

/* Talk-to-Tūī orb at bottom-center — small, like the Figma original */
.tui-talk-orb {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(34px, 3.6%, 50px);
  aspect-ratio: 1;
  padding: 0;
  margin-bottom: clamp(20px, 2.6%, 36px);
  justify-self: center;
}
.tui-talk-orb__halo {
  position: absolute;
  inset: -40%;
  border-radius: 999px;
  background: radial-gradient(circle, rgb(223 255 0 / 0.45) 0%, transparent 60%);
  opacity: 0.5;
  animation: tui-talk-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
.tui-talk-orb__core {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--tui-lichen) 0%, var(--tui-electric) 100%);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.25),
    inset 0 -3px 6px rgba(0,0,0,0.15),
    inset 0 2px 4px rgba(255,255,255,0.4);
  transition: transform 0.18s var(--ease, cubic-bezier(.2,.7,0,1));
}
.tui-talk-orb:active .tui-talk-orb__core { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) {
  .tui-talk-orb__halo { animation: none; }
  .tui-mascot-frame { animation: none; }
}

/* corner clusters */
.tui-corner {
  position: absolute;
  display: flex;
  gap: clamp(10px, 1.4%, 18px);
  align-items: flex-start;
  padding: clamp(20px, 3%, 36px);
}
.tui-corner--tl { top: 0; left: 0; }
.tui-corner--tr { top: 0; right: 0; }

.tui-icon {
  appearance: none;
  border: 0;
  width: clamp(44px, 4.4%, 60px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--tui-pure);
  color: var(--tui-battery);
  display: grid;
  place-items: center;
  cursor: pointer;
  /* stronger neumorphic so it reads against the fogbound dash */
  box-shadow:
    -2px -2px 4px var(--tui-pure),
     3px 3px 8px rgba(178,174,167,0.65);
  transition: transform 0.18s var(--ease, cubic-bezier(.2,.7,0,1)), box-shadow 0.18s;
}
.tui-icon:active {
  transform: scale(0.96);
  box-shadow:
    inset -2px -2px 4px var(--tui-pure),
    inset  3px  3px 8px rgba(178,174,167,0.5);
}
.tui-icon svg { width: 56%; height: 56%; stroke-width: 1.8; }

/* greeting block — upper-left of the screen */
.tui-greet {
  position: absolute;
  top: clamp(70px, 11%, 130px);
  left: clamp(28px, 4%, 64px);
  display: grid;
  gap: clamp(10px, 1.4vh, 20px);
  max-width: 48%;
}
.tui-greet__hello {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.3vw, 20px);
  letter-spacing: 0.4em;
  margin: 0;
  color: var(--tui-battery);
  opacity: 0.7;
}
.tui-greet__q {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--tui-battery);
}

/* ── Tūī mascot — blink + breathe idle loop ───────────────── */
.tui-mascot {
  position: absolute;
  top: 56%;
  left: 64%;
  transform: translate(-50%, -50%);
  width: clamp(220px, 32%, 400px);
  pointer-events: none;
  animation: tui-breathe 4.2s ease-in-out infinite;
}
.tui-mascot__svg { width: 100%; height: auto; display: block; }

@keyframes tui-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, calc(-50% - 2px)) scale(1.014); }
}

/* eye blink — eyes hide, lids cover, ~120ms total */
.tui-mascot__eye {
  animation: tui-blink-eye 5.4s steps(1, end) infinite;
}
.tui-mascot__lid {
  animation: tui-blink-lid 5.4s steps(1, end) infinite;
}
@keyframes tui-blink-eye {
  0%, 96%, 100% { opacity: 1; }
  97%, 99%      { opacity: 0; }
}
@keyframes tui-blink-lid {
  0%, 96%, 100% { opacity: 0; }
  97%, 99%      { opacity: 1; }
}
/* second blink slightly later for natural rhythm */
.tui-mascot__eye--r { animation-delay: 30ms; }
.tui-mascot__lid--r { animation-delay: 30ms; }

@media (prefers-reduced-motion: reduce) {
  .tui-mascot,
  .tui-mascot__eye,
  .tui-mascot__lid { animation: none; }
}

/* ── Talk-to-Tūī orb (Bakery 1 — the small 50px gradient circle
   that pulses softly, presses to expand) ────────────────────── */
.tui-talk {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: absolute;
  bottom: clamp(28px, 5%, 56px);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  padding: 0;
}
.tui-talk--orb { width: clamp(48px, 4vw, 72px); aspect-ratio: 1; }
.tui-talk__core {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--tui-lichen) 0%, var(--tui-electric) 100%);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.25),
    inset 0 -3px 6px rgba(0,0,0,0.15),
    inset 0 2px 4px rgba(255,255,255,0.4);
  transition: transform 0.18s var(--ease, cubic-bezier(.2,.7,0,1));
}
.tui-talk__halo {
  position: absolute; inset: -40%;
  border-radius: 999px;
  background: radial-gradient(circle, rgb(223 255 0 / 0.5) 0%, transparent 60%);
  opacity: 0.5;
  animation: tui-talk-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tui-talk-pulse {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50%      { transform: scale(1.18); opacity: 0.75; }
}
.tui-talk:active .tui-talk__core { transform: scale(0.94); }
.tui-talk:hover .tui-talk__halo  { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
  .tui-talk__halo { animation: none; }
}

/* ── meta strip below the cabin ───────────────────────────── */
.tui-meta {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 48px);
  padding-top: clamp(12px, 2vh, 24px);
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
}
.tui-meta div { display: grid; gap: 4px; }
.tui-meta dt {
  font-size: clamp(10px, 0.82vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.tui-meta dd {
  margin: 0;
  font-size: clamp(12px, 0.95vw, 14px);
  color: var(--text-dim);
  line-height: 1.5;
}
.tui-meta__cue { justify-self: end; align-content: end; }
.tui-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text-dim);
  font-size: clamp(11px, 0.92vw, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s, transform 0.4s var(--ease, cubic-bezier(.2,.7,0,1));
}
.tui-hero__scroll:hover { color: var(--neon); }
.tui-hero__scroll svg { animation: tui-scroll-bob 1.8s ease-in-out infinite; }
@keyframes tui-scroll-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .tui-hero__scroll svg { animation: none; }
}

@media (max-width: 720px) {
  .tui-meta { grid-template-columns: repeat(2, 1fr); }
  .tui-meta__cue { grid-column: 1 / -1; justify-self: start; }
}

/* ── shared screen heading + 5-dot progress ──────────────── */
.tui-screen__h {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--tui-battery);
  text-align: center;
  margin: 0;
  text-wrap: balance;
}
.tui-screen__h em {
  font-style: italic;
  background: linear-gradient(92deg, var(--tui-lichen) 0%, var(--tui-electric) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tui-progress {
  position: absolute;
  bottom: clamp(20px, 3.4%, 40px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(10px, 1.4%, 18px);
  padding: clamp(8px, 1.2%, 14px) clamp(14px, 2.4%, 28px);
  background: var(--tui-fogbound);
  border-radius: 999px;
  box-shadow: var(--tui-shadow-out);
}
.tui-progress__dot {
  width: clamp(10px, 1.1%, 14px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--tui-carbon);
  opacity: 0.55;
  transition: background 0.4s, opacity 0.4s, transform 0.4s;
}
.tui-progress__dot.is-active {
  background: linear-gradient(135deg, var(--tui-lichen), var(--tui-electric));
  opacity: 1;
  box-shadow: 0 0 10px rgba(223,255,0,0.6), 0 0 20px rgba(54,113,199,0.4);
  transform: scale(1.2);
}

/* ── Bakery 2 · activity grid ────────────────────────────── */
.tui-screen--grid {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: clamp(12px, 2%, 24px);
  padding: clamp(20px, 4%, 48px) clamp(20px, 4%, 56px) clamp(60px, 8%, 100px);
  align-items: center;
  justify-items: center;
}
.tui-mascot--small {
  position: relative;
  inset: auto;
  width: clamp(110px, 16%, 180px);
  margin-top: clamp(0px, 1%, 12px);
  animation: tui-breathe-small 4.2s ease-in-out infinite;
}
@keyframes tui-breathe-small {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.014); }
}
.tui-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(8px, 1.4%, 18px);
  width: 100%;
  max-width: 100%;
}
.tui-card {
  appearance: none;
  border: 0;
  background: rgba(255,255,255,0.5);
  border-radius: clamp(10px, 1.2%, 18px);
  padding: clamp(14px, 2%, 22px) clamp(8px, 1%, 14px) clamp(16px, 2%, 22px);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  gap: clamp(8px, 1.2%, 16px);
  cursor: pointer;
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--tui-battery);
  box-shadow: var(--tui-shadow-out);
  transition: transform 0.18s var(--ease, cubic-bezier(.2,.7,0,1)), box-shadow 0.18s;
  min-height: clamp(140px, 22%, 220px);
}
.tui-card:hover { box-shadow: -2px -2px 4px var(--tui-pure), 4px 6px 14px rgba(178,174,167,0.7); }
.tui-card:active {
  transform: scale(0.99);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.12), inset 0 -1px 2px var(--tui-pure);
}
.tui-card__icon {
  display: grid;
  place-items: center;
  width: clamp(40px, 5vw, 80px);
  aspect-ratio: 1;
}
.tui-card__label {
  font-weight: 500;
  font-size: clamp(13px, 1.3vw, 20px);
  letter-spacing: 0.01em;
}

/* ── Bakery 3 · Nourish drill-in ─────────────────────────── */
.tui-screen--drill {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(10px, 1.6%, 22px);
  padding: clamp(20px, 4%, 48px) clamp(20px, 4%, 56px) clamp(60px, 8%, 100px);
  align-items: center;
  justify-items: center;
}
.tui-screen__h {
  position: relative;
  z-index: 2;
}
.tui-hero-card {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(160px, 22%, 260px);
  aspect-ratio: 198 / 300;
}
.tui-mascot--peek {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(180px, 28%, 320px);
  transform: translate(-50%, -64%);
  pointer-events: none;
  z-index: 0;
  animation: tui-peek-bob 3.4s ease-in-out infinite;
}
@keyframes tui-peek-bob {
  0%, 100% { transform: translate(-50%, -64%); }
  50%      { transform: translate(-50%, calc(-64% - 4px)); }
}
.tui-card--lifted {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.92);
  border-radius: clamp(10px, 1.2%, 18px);
  padding: clamp(14px, 3%, 24px);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  gap: clamp(10px, 1.6%, 18px);
  box-shadow: -2px -2px 6px var(--tui-pure), 6px 8px 18px rgba(0,0,0,0.18);
}
.tui-subcards {
  list-style: none;
  margin: 0 0 clamp(56px, 9%, 90px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(6px, 1%, 12px);
  width: 100%;
  align-self: end;
}
.tui-subcard {
  appearance: none;
  border: 0;
  background: rgba(255,255,255,0.5);
  border-radius: clamp(8px, 1%, 14px);
  padding: clamp(8px, 1.4%, 14px) clamp(4px, 0.8%, 8px);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(4px, 0.6%, 8px);
  align-items: center;
  justify-items: center;
  cursor: pointer;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(10px, 1vw, 14px);
  font-weight: 500;
  color: var(--tui-battery);
  box-shadow: var(--tui-shadow-out);
  min-height: clamp(70px, 11%, 110px);
  transition: transform 0.18s, box-shadow 0.18s;
}
.tui-subcard span:first-child { font-size: clamp(20px, 2.6vw, 36px); line-height: 1; }
.tui-subcard:hover { box-shadow: -2px -2px 4px var(--tui-pure), 3px 5px 10px rgba(178,174,167,0.6); }
.tui-subcard:active { transform: scale(0.97); box-shadow: inset 0 2px 6px rgba(0,0,0,0.12); }
.tui-subcard--target {
  outline: 2px solid var(--tui-electric);
  outline-offset: 2px;
}
.tui-subcard--more {
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 700;
  color: var(--tui-electric);
}

/* ── Bakery 4 · confirmation ─────────────────────────────── */
.tui-screen--confirm {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(20px, 3vh, 36px);
  padding: clamp(40px, 8%, 100px) clamp(28px, 5%, 64px) clamp(60px, 8%, 100px);
  align-items: center;
  justify-items: center;
}
.tui-screen__h--confirm { max-width: 24ch; }
.tui-buttons {
  display: grid;
  gap: clamp(12px, 1.8vh, 20px);
  width: clamp(280px, 50%, 460px);
}
.tui-pill {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 22px);
  border-radius: 999px;
  padding: clamp(14px, 2vh, 22px) clamp(20px, 3%, 36px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.18s var(--ease, cubic-bezier(.2,.7,0,1)), box-shadow 0.18s;
}
.tui-pill--primary {
  background: linear-gradient(135deg, var(--tui-lichen) 0%, var(--tui-electric) 100%);
  color: var(--tui-battery);
  box-shadow: 0 8px 18px rgba(54,113,199,0.35), inset 0 -3px 6px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.5);
}
.tui-pill--primary:active {
  transform: scale(0.98);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.25), inset 0 -1px 2px rgba(255,255,255,0.3);
}
.tui-pill--ghost {
  background: rgba(255,255,255,0.4);
  color: rgba(14,14,14,0.6);
  font-weight: 500;
  box-shadow: var(--tui-shadow-out);
  backdrop-filter: blur(4px);
}
.tui-pill--ghost:active { transform: scale(0.98); box-shadow: inset 0 2px 6px rgba(0,0,0,0.15); }
.tui-pill--bottom { justify-self: center; margin-top: clamp(8px, 1vh, 16px); }

/* ── Bakery 5 · slider ──────────────────────────────────── */
.tui-screen--slider {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 2vh, 28px);
  padding: clamp(36px, 6%, 80px) clamp(28px, 5%, 64px) clamp(60px, 8%, 100px);
  align-items: center;
  justify-items: center;
}
.tui-screen__h--slider { max-width: 28ch; }
.tui-slider-wrap {
  display: grid;
  gap: clamp(14px, 2vh, 24px);
  width: clamp(320px, 60%, 540px);
  justify-items: center;
}
.tui-tumbler {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  height: clamp(60px, 9vh, 96px);
  overflow: hidden;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  color: var(--tui-battery);
  letter-spacing: -0.04em;
}
.tui-tumbler__col {
  display: grid;
  text-align: center;
  min-width: 2em;
  transform: translateY(0);
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
}
.tui-tumbler__col span {
  display: block;
  height: 1em;
}
.tui-tumbler__pct {
  font-size: 0.6em;
  color: var(--tui-carbon);
  align-self: end;
  padding-bottom: 0.18em;
}
.tui-slider {
  position: relative;
  width: 100%;
  height: clamp(40px, 5vh, 56px);
  display: grid;
  align-items: center;
}
.tui-slider__track {
  position: absolute;
  left: 0; right: 0;
  height: clamp(36px, 4.6vh, 48px);
  border-radius: 999px;
  background: var(--tui-fogbound);
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.15), inset 0 -1px 2px var(--tui-pure);
  overflow: hidden;
}
.tui-slider__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 50%;
  background: linear-gradient(90deg, var(--tui-lichen) 0%, var(--tui-electric) 100%);
  border-radius: 999px;
  transition: width 0.18s cubic-bezier(.4,0,.2,1);
}
.tui-slider__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: grab;
  z-index: 3;
}
.tui-slider__input:active { cursor: grabbing; }
.tui-slider__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(56px, 7vh, 80px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--tui-lichen) 0%, var(--tui-electric) 100%);
  box-shadow: 0 8px 18px rgba(0,0,0,0.3), inset 0 -3px 6px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  transition: transform 0.12s, box-shadow 0.18s;
}
.tui-slider__halo {
  position: absolute;
  inset: -25%;
  border-radius: 999px;
  background: rgba(223,255,0,0.18);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.tui-slider.is-dragging .tui-slider__knob { transform: translate(-50%, -50%) scale(1.1); }
.tui-slider.is-dragging .tui-slider__halo { opacity: 1; transform: scale(1.4); }
.tui-slider__hint {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(11px, 1.1vw, 16px);
  letter-spacing: 0.4em;
  color: var(--tui-carbon);
  margin: 0;
  text-transform: uppercase;
}

/* ── Bakery 6 · success ─────────────────────────────────── */
.tui-screen--success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(8px, 1.4vh, 18px);
  padding: clamp(28px, 5%, 60px) clamp(28px, 5%, 64px) clamp(60px, 8%, 100px);
}
.tui-mascot--rest {
  position: relative;
  inset: auto;
  transform: none;
  width: clamp(200px, 28%, 360px);
  margin-top: auto;
  margin-bottom: clamp(20px, 4%, 48px);
  animation: tui-breathe-small 4.2s ease-in-out infinite;
}
.tui-mascot__eye--rest { animation: none; }
.tui-mascot__lid--success {
  animation: tui-blink-stuck 2.2s steps(1, end) 1;
  animation-delay: 0.6s;
}
.tui-mascot__stuck {
  animation: tui-stuck-piece 2.2s ease-out 1 forwards;
  animation-delay: 0.6s;
}
@keyframes tui-blink-stuck {
  0%, 30%, 80%, 100% { opacity: 0; }
  35%, 75%           { opacity: 1; }
}
@keyframes tui-stuck-piece {
  0%   { opacity: 0; transform: translateY(-30px) rotate(-20deg); }
  20%  { opacity: 1; transform: translateY(0) rotate(0); }
  60%  { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(20px) rotate(40deg); }
}
.tui-screen__h--success { color: var(--tui-battery); }
.tui-screen__sub {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(14px, 1.4vw, 20px);
  color: rgba(14,14,14,0.65);
  margin: 0;
  text-align: center;
}
.tui-replay {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--f-mono, monospace);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tui-carbon);
  padding: 6px 12px;
  margin-top: clamp(4px, 0.8vh, 10px);
  transition: color 0.2s;
}
.tui-replay:hover { color: var(--tui-electric); }

.tui-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  /* no mix-blend-mode — brand shapes draw vibrant. icon pieces from
     the sprite have small white card backgrounds which read as tiny
     "note cards" mixed into the confetti shower. */
}

/* ── B5 slider — masked overlay over the Figma bg ──────────
   bg image carries heading, corner icons, "No text updates" pill,
   progress bar so this screen matches the other bg-image screens
   visually. two fogbound masks blank out the static slider + the
   misplaced bottom-left "Pressed" knob from the bg. live slider
   sits on top, driven by pointer events. ───────────────── */
.tui-slider-mask {
  position: absolute;
  top: 47%;
  left: 18%;
  right: 18%;
  height: 18%;
  background: var(--tui-fogbound);
  z-index: 4;
  pointer-events: none;
}
.tui-slider-mask-knob {
  position: absolute;
  bottom: 5%;
  left: 22%;
  width: 14%;
  aspect-ratio: 1;
  background: var(--tui-fogbound);
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
}
.tui-slider-live {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  z-index: 5;
  display: grid;
  gap: clamp(4px, 0.6vh, 8px);
}
.tui-slider-pct {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1;
  color: var(--tui-battery);
}
.tui-slider-track {
  position: relative;
  height: clamp(20px, 2.8vh, 30px);
  border-radius: 999px;
  background: var(--tui-pure);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.18), inset 0 -1px 1px rgba(255,255,255,0.6);
  overflow: visible;
  cursor: grab;
  touch-action: none;
}
.tui-slider-track:active { cursor: grabbing; }
.tui-slider-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10%;
  background: linear-gradient(90deg, var(--tui-lichen) 0%, var(--tui-electric) 100%);
  border-radius: 999px;
}
.tui-slider-knob {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  width: clamp(34px, 4.6vh, 50px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--tui-electric);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.3),
    inset 0 -3px 6px rgba(0,0,0,0.18),
    inset 0 2px 3px rgba(255,255,255,0.4);
  transition: box-shadow 0.18s;
}
.tui-screen--slider.is-dragging .tui-slider-knob {
  box-shadow:
    0 0 0 14px rgba(54,113,199,0.18),
    0 4px 12px rgba(0,0,0,0.3),
    inset 0 -3px 6px rgba(0,0,0,0.18),
    inset 0 2px 3px rgba(255,255,255,0.5);
}
.tui-slider-hint {
  font-weight: 700;
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: 0.4em;
  color: var(--tui-carbon);
  text-align: center;
  margin: 0;
  text-transform: uppercase;
}

.tui-slider-skip {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--tui-pure);
  color: rgba(14,14,14,0.6);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.2vw, 16px);
  border-radius: 999px;
  padding: clamp(10px, 1.6vh, 14px) clamp(20px, 3%, 32px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: -2px -2px 4px var(--tui-pure), 3px 3px 8px rgba(178,174,167,0.55);
  grid-row: 4;
}

.tui-progress-pill {
  display: flex;
  gap: clamp(10px, 1.4%, 14px);
  padding: clamp(6px, 1%, 12px) clamp(14px, 2.4%, 24px);
  background: var(--tui-pure);
  border-radius: 999px;
  box-shadow: var(--tui-shadow-out);
  grid-row: 5;
}
.tui-progress-pill span {
  width: clamp(8px, 0.9%, 11px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--tui-carbon);
  opacity: 0.55;
}
.tui-progress-pill span.is-active {
  background: linear-gradient(135deg, var(--tui-lichen), var(--tui-electric));
  opacity: 1;
  box-shadow: 0 0 8px rgba(223,255,0,0.5);
  transform: scale(1.2);
}

/* ── 2 · THE PROBLEM — 42-min stat punch ─────────────────── */
.tui-problem {
  padding: clamp(80px, 14vh, 160px) clamp(20px, 5vw, 72px);
  border-top: 1px solid var(--rule);
}
.tui-problem__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: clamp(16px, 2.4vh, 32px);
  text-align: center;
  justify-items: center;
}
.tui-problem__stat {
  font-family: var(--f-display);
  font-weight: 700;
  margin: clamp(16px, 3vh, 40px) 0 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.34em;
  color: var(--text);
  line-height: 1;
}
.tui-problem__num {
  font-size: clamp(88px, 16vw, 220px);
  background: linear-gradient(92deg, var(--tui-lichen) 0%, var(--tui-electric) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.04em;
  text-shadow: 0 0 80px rgb(223 255 0 / 0.3);
}
.tui-problem__unit {
  font-size: clamp(26px, 3.2vw, 48px);
  font-style: italic;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: -0.01em;
  line-height: 1;
}
.tui-problem__lede {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.35;
  margin: 0;
  max-width: 38ch;
  text-wrap: balance;
}
.tui-problem__lede em {
  font-style: italic;
  background: linear-gradient(92deg, var(--tui-lichen) 0%, var(--tui-electric) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tui-problem__sub {
  font-family: var(--f-display);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0;
  max-width: 48ch;
  text-wrap: balance;
}
.tui-problem__src {
  font-family: var(--f-mono);
  font-size: clamp(10px, 0.82vw, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: clamp(8px, 1.6vh, 16px);
}

/* ── shared mark + section base for the story tier ───────── */
.tui-mark {
  text-decoration: none;
  background-image: linear-gradient(180deg, transparent 60%, rgba(223,255,0,0.18) 60%);
  padding: 0 0.06em;
  transition: background-image 0.3s;
}
.tui-mark:hover { background-image: linear-gradient(180deg, transparent 50%, rgba(223,255,0,0.32) 50%); }

/* ── 3 · RESEARCH ─────────────────────────────────────────── */
.tui-research {
  padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 72px);
  border-top: 1px solid var(--rule);
}
.tui-research__inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 900px) {
  .tui-research__inner { grid-template-columns: 1fr; gap: 48px; }
}
.tui-research__head { display: grid; gap: clamp(14px, 2vh, 24px); position: sticky; top: 120px; }
.tui-research__head p {
  font-family: var(--f-mono);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
  max-width: 36ch;
}
.tui-personas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 3vh, 40px);
}
.tui-personas li {
  display: grid;
  gap: 6px;
  padding: clamp(20px, 3vh, 36px) 0;
  border-top: 1px solid var(--rule);
}
.tui-personas li:last-child { border-bottom: 1px solid var(--rule); }
.tui-persona__tag {
  font-family: var(--f-mono);
  font-size: clamp(10px, 0.82vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.tui-personas h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
}
.tui-persona__role {
  font-family: var(--f-mono);
  font-size: clamp(12px, 0.95vw, 14px);
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 0 0 6px;
  text-transform: lowercase;
}
.tui-personas p:not(.tui-persona__role):not(.tui-persona__flow) {
  font-family: var(--f-display);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  max-width: 56ch;
}
.tui-persona__flow {
  font-family: var(--f-mono);
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 8px 0 0 !important;
  color: var(--neon);
  background: linear-gradient(92deg, var(--tui-lichen) 0%, var(--tui-electric) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 4 · INSIGHT ─────────────────────────────────────────── */
.tui-insight {
  padding: clamp(80px, 14vh, 160px) clamp(20px, 5vw, 72px);
  text-align: center;
  border-top: 1px solid var(--rule);
}
.tui-insight__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.tui-insight__title span { color: var(--text-dim); display: block; }
.tui-insight__title em {
  display: block;
  font-style: italic;
  background: linear-gradient(92deg, var(--tui-lichen) 0%, var(--tui-electric) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tui-insight__sub {
  font-family: var(--f-mono);
  font-size: clamp(13px, 1.05vw, 16px);
  color: var(--text-dim);
  margin: clamp(20px, 3vh, 36px) 0 0;
}

/* ── 5 · WHAT I DESIGNED ─────────────────────────────────── */
.tui-built {
  padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 72px);
  border-top: 1px solid var(--rule);
}
.tui-built__head {
  max-width: 1300px;
  margin: 0 auto clamp(40px, 6vh, 80px);
  display: grid;
  gap: clamp(14px, 2vh, 24px);
}
.tui-built__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1300px;
  display: grid;
  gap: clamp(40px, 6vh, 80px);
}
.tui-built__block {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding-top: clamp(20px, 3vh, 36px);
  border-top: 1px solid var(--rule);
}
.tui-built__num {
  font-family: var(--f-mono);
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: 0.12em;
  color: var(--text-mute);
}
.tui-built__body { display: grid; gap: 12px; max-width: 64ch; }
.tui-built__body h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.tui-built__body p {
  font-family: var(--f-display);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}
@media (max-width: 720px) {
  .tui-built__block { grid-template-columns: 1fr; gap: 12px; }
}

/* ── 6 · DEEP / SHOW-STOPPER ─────────────────────────────── */
.tui-deep {
  padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 72px);
  border-top: 1px solid var(--rule);
}
.tui-deep__inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: clamp(20px, 3vh, 36px);
}
.tui-deep__inner p {
  font-family: var(--f-display);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
.tui-deep__inner code {
  font-family: var(--f-mono);
  font-size: 0.9em;
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--neon);
}
.tui-deep__quote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 36px) !important;
  line-height: 1.3 !important;
  margin-top: clamp(24px, 4vh, 48px) !important;
  padding: clamp(20px, 3vh, 36px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-wrap: balance;
}
.tui-deep__quote span {
  font-style: normal;
  color: var(--neon);
  background: linear-gradient(92deg, var(--tui-lichen), var(--tui-electric));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.4em;
  vertical-align: -0.1em;
}
.tui-deep__quote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: clamp(11px, 0.92vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ── 7 · REFLECTION ──────────────────────────────────────── */
.tui-reflect {
  padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 72px);
  border-top: 1px solid var(--rule);
}
.tui-reflect__inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: clamp(18px, 2.6vh, 28px);
}
.tui-reflect__inner p {
  font-family: var(--f-display);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
  max-width: 64ch;
}

/* ── 8 · THROUGH-LINE: Tūī as seed ───────────────────────── */
.tui-seed {
  padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 72px);
  border-top: 1px solid var(--rule);
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgb(54 113 199 / 0.12) 0%, transparent 70%);
}
.tui-seed__inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: clamp(18px, 2.6vh, 28px);
}
.tui-seed__inner p {
  font-family: var(--f-display);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
  max-width: 64ch;
}
.tui-seed__inner em {
  font-style: italic;
  background: linear-gradient(92deg, var(--tui-lichen), var(--tui-electric));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tui-seed__inner a {
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.tui-seed__inner a:hover { color: var(--mint); }
.tui-seed__close {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 32px) !important;
  font-style: italic;
  color: var(--text) !important;
  margin-top: clamp(16px, 2.4vh, 28px) !important;
  text-wrap: balance;
}

/* ── closing signoff + next-project CTA ───────────────────── */
.tui-signoff {
  text-align: center;
  padding: clamp(80px, 14vh, 160px) clamp(20px, 5vw, 72px) clamp(60px, 8vh, 100px);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: clamp(14px, 2vh, 22px);
  justify-items: center;
}
.tui-signoff__eyebrow {
  font-family: var(--f-mono);
  font-size: clamp(10px, 0.82vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.tui-signoff p {
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 44px);
  font-style: italic;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.tui-next {
  font-family: var(--f-mono);
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--neon);
  padding: 14px 28px;
  border: 1px solid currentColor;
  border-radius: 999px;
  margin-top: clamp(14px, 2vh, 22px);
  transition: background 0.2s, color 0.2s;
}
.tui-next:hover { background: var(--neon); color: var(--void); }

/* ── footer adopt — minimal Tūī flourish ────────────────── */
.tui-foot { position: relative; }

/* ── scroll reveal scaffolding (matches L&E) ────────────── */
.tui-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s var(--ease, cubic-bezier(.2,.7,0,1)),
              transform 1.1s var(--ease, cubic-bezier(.2,.7,0,1));
  will-change: opacity, transform;
}
.tui-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .tui-reveal { opacity: 1; transform: none; transition: none; }
}