/* Retenna landing · landing.css: everything on the main page after the shared base (base.css).
   Since 3 October 2026 this one file holds what were sections.css (the hero and film window), then chapters.css
   (the sections below the film, the questions and the final call to action), then the "See how it decided" button
   from examples.css, in that order, so the page waits for two stylesheets instead of five. */

/* ======== Hero and film window (was sections.css) ======== */
/* Retenna landing · sections: hero (owned by the hero work) and film window. The chapters below the film follow in this file.
   Since 28 September 2026 the whole page follows the device's light or dark setting (see base.css). */

/* ---------- Sky: stars behind the hero on dark devices only ---------- */
.night { position: relative; isolation: isolate; }
.stars { position: absolute; inset: 0 0 auto; height: 82%; z-index: -1; pointer-events: none; overflow: hidden; display: none;
  -webkit-mask-image: linear-gradient(#000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(#000 0%, #000 55%, transparent 100%); }
@media (prefers-color-scheme: dark) { .stars { display: block; } }
.stars-c { position: absolute; inset: 0; opacity: var(--star-o, 1); background-repeat: repeat; background-size: 560px 560px; }
.stars-tw { position: absolute; inset: 0; opacity: var(--star-o, 1); }
.tw { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(210,200,255,.7); opacity: .5; }
html[data-motion="full"] .tw { animation: twinkle var(--tw, 7s) ease-in-out var(--twd, 0s) infinite; }
html[data-motion="full"] .stars.is-paused .tw { animation-play-state: paused; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .85; transform: scale(1); } }

/* ---------- Hero ----------
   One centred lockup filling the first screen: R mark, a headline whose second line changes every few seconds
   (word by word, each with its object), the early-access form, and a pill down to the film window. */
section.hero { position: relative; }
section.hero::before { content: ""; position: absolute; inset: 0 0 auto; height: min(1100px, 130vh); z-index: -1; pointer-events: none;
  background: radial-gradient(34% 30% at 50% 22%, rgba(118,87,240,.24), rgba(118,87,240,0) 70%),
              radial-gradient(40% 46% at 8% 30%, rgba(79,114,232,.14), rgba(79,114,232,0) 70%),
              radial-gradient(36% 40% at 92% 40%, rgba(229,127,203,.08), rgba(229,127,203,0) 70%); }
.hero-lock { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: 100vh; min-height: 100svh; padding-top: calc(var(--hdr-h) + clamp(12px, 16vh - 58px, 110px)); padding-bottom: 104px; }
.hero-mark { width: auto; height: clamp(60px, 2.6vw + 52px, 96px); }
.hero .rb { margin-top: clamp(16px, 2.4vh, 26px); width: 100%; font-size: min(clamp(2.1rem, 1.68rem + 2.86vw, 4.25rem), calc((100vw - 2 * var(--gut)) / 10.9)); line-height: 1.12; letter-spacing: -.028em; }
.rb .rb-line, html[data-motion="full"] .rb .rb-line.w { display: block; }
/* The avatar: one of Retenna's two mascots (picked per visit by js/hero.js) in a round badge. It blinks every few
   seconds: js/hero.js adds is-blink to .rb-av, which shows the eyes-closed frame for one short CSS animation.
   (A wink and a wave were tried on 29 Sep 2026 and dropped until they can be made as video.) */
.rb-av { position: relative; display: inline-block; width: 1.07em; height: 1.07em; margin: 0 .03em 0 .14em; vertical-align: -.22em; }
.rb-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #A994FF 0, #7A62EE 48%, #4B38B8 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 0 .5em -.08em rgba(154,92,240,.65); }
.rb-av[data-who="girl"] .rb-boy, .rb-av[data-who="boy"] .rb-girl { display: none; }
.rb-pose { position: absolute; inset: 0; }
.rb-pose img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.rb-pose img[data-f="avatar"] { opacity: 1; }
.rb-av.is-blink img[data-f="blink"] { animation: rb-show .14s step-end; }
@keyframes rb-show { from, to { opacity: 1; } }
/* Changing line: every phrase shares one grid cell, so the line is always as wide and tall as the longest phrase
   and nothing below it moves. Only the resting phrase (and the one leaving) is visible. */
.rb-slot { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.rb-phrase { grid-area: 1 / 1; width: max-content; max-width: 100%; visibility: hidden; }
.rb-phrase[data-role] { visibility: visible; }
.rb-phrase > span { display: inline-block; opacity: 0; transform: translateY(.3em);
  transition: opacity .4s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.rb-phrase:not([data-role]) > span { transition: none; }
.rb-phrase[data-role="rest"] > span { opacity: 1; transform: none; }
.rb-phrase[data-role="out"] > span { opacity: 0; transform: translateY(-.3em); transition-duration: .3s, .4s; transition-delay: calc(var(--i) * 40ms); }
.rb-ic { padding-inline: .18em 0; vertical-align: -.15em; }
.rb-ic img { display: block; width: 1em; height: 1em; }
/* Early-access form, stacked and centred for the hero. */
.join-hero { max-width: 420px; margin-top: clamp(26px, 4.4vh, 48px); gap: 10px; }
.join-hero-lbl { font-size: 16px; color: var(--muted); }
.join-hero .join-row, .join-hero .join-row:focus-within, .join-hero.is-invalid .join-row { flex-direction: column; gap: 12px; padding: 0; background: none; box-shadow: none; }
.join-hero .join-input { min-height: 54px; padding: 0 22px; border-radius: 999px; background: var(--field); box-shadow: inset 0 0 0 1px var(--field-line); transition: box-shadow .2s var(--ease); }
.join-hero .join-input:focus { box-shadow: inset 0 0 0 2px var(--focus), 0 0 0 4px var(--focus-ring); }
.join-hero.is-invalid .join-input { box-shadow: inset 0 0 0 2px var(--peach), 0 0 0 4px var(--peach-soft); }
.join-hero .join-btn { width: 100%; min-height: 50px; border-radius: 999px; }

.join-hero .join-done { text-align: left; }
.hero-more { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); translate: -50% 0; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--fg); text-decoration: none; white-space: nowrap;
  background: color-mix(in srgb, var(--fg) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent), 0 10px 28px -14px rgba(0,0,0,.35); transition: background-color .2s var(--ease); }
.hero-more:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); }
.hero-more svg.i { width: 16px; height: 16px; transform: rotate(90deg); }
/* Load reveal (full motion only; content is visible without it). */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes rise-w { from { opacity: 0; transform: translateY(.18em); } }
@keyframes iris-sweep { from { background-size: 260% 100%; background-position: 100% 0; } to { background-size: 100% 100%; background-position: 0 0; } }
html[data-motion="full"] .hero .rv { animation: rise .8s var(--ease) calc(var(--d) * 110ms + 120ms) both; }
html[data-motion="full"] .h1 .w { display: inline-block; animation: rise-w .9s var(--ease) calc(var(--d) * 60ms + 160ms) both; }
html[data-motion="full"] .h1 .w.iris { animation: rise-w .9s var(--ease) calc(var(--d) * 60ms + 160ms) both, iris-sweep 2.4s var(--ease) .5s both; }
html[data-motion="full"] .rb-phrase .iris { animation: iris-sweep 2.4s var(--ease) .6s both; }

/* ---------- Film window ---------- */
.film-wrap { padding-top: clamp(8px, 2vw, 24px); padding-bottom: clamp(24px, 4vw, 48px); }
html[data-motion="full"] .film-wrap { animation: rise 1s var(--ease) .75s both; }
/* The window is never taller than the screen below the header: its width is capped by the available height times its
   shape (--film-ar, width ÷ height), so the whole outline is visible at once on any screen. */
.film { position: relative; --fs: 1; --film-ar: 1.7778; --film-room: 40px; margin-inline: auto;
  max-width: calc((100vh - var(--hdr-h) - var(--film-room)) * var(--film-ar));
  max-width: calc((100svh - var(--hdr-h) - var(--film-room)) * var(--film-ar)); }
.film-frame { position: relative; aspect-ratio: 16 / 9; border-radius: calc(28px - 14px * var(--fs)); overflow: hidden; background: #0B0C14; transform-origin: 50% 0;
  transform: scale(calc(.88 + .12 * var(--fs))); will-change: transform;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 50px 100px -50px rgba(32,32,69,.55), 0 0 140px -40px rgba(118,87,240,.3); }
@media (prefers-color-scheme: dark) { .film-frame { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 60px 120px -50px rgba(0,0,0,.95), 0 0 140px -40px rgba(118,87,240,.35); } }
.film[data-state="preview"] { --fs: var(--fsp, 1); }
html[data-motion="reduced"] .film-frame { transform: none; border-radius: 16px; }
.film-scrim { position: absolute; inset: auto 0 0; height: 40%; pointer-events: none; background: linear-gradient(rgba(11,12,20,0), rgba(11,12,20,.88)); }
/* Short film: the looping 30-second video in the window under the hero (media/hero/). */
.hero-motion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #0B0B14; }
.film.has-hero[data-state="preview"] .hero-motion { display: block; }
.film.has-hero[data-state="preview"] .film-scrim { height: 20%; opacity: .75; }
.film-ui { position: absolute; inset: 0; pointer-events: none; }
.film-ui > * { pointer-events: auto; }
.film-ui[hidden] { display: none; }
.film-ctl { position: absolute; right: clamp(14px, 2.2vw, 28px); bottom: calc(clamp(14px, 2.2vw, 28px) + 6px); display: flex; gap: 8px; }
.film-pp { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 13px; border-radius: 22px;
  background: rgba(15,16,25,.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #F5F3FF; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
/* Transport: back 1 s, play/pause, forward 1 s, as three round buttons inside one pill. */
.film-tp { gap: 0; padding: 0; }
.film-tp-b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: inherit; transition: background-color .15s var(--ease), transform .15s var(--ease); }
.film-tp-b:hover { background: rgba(255,255,255,.1); }
.film-tp-b:active { transform: scale(.92); }
.film-tp-b:focus-visible { outline-offset: -2px; border-radius: 50%; }
.film-tp-b svg.i { width: 24px; height: 24px; stroke-width: 1.7; }
.film-tp-pp svg.i { width: 16px; height: 16px; }
.film-tp-pp .i-pl, .film-tp-pp[aria-pressed="true"] .i-pa { display: none; }
.film-tp-pp[aria-pressed="true"] .i-pl { display: block; }
/* Speed: cycles the preview through 1×, ¾×, ½× and ⅓× (up to three times slower). */
.film-speed { padding: 0 16px; gap: 6px; }
.film-speed-k { opacity: .72; }
.film-speed-v { min-width: 1.6em; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .film-frame { aspect-ratio: 4 / 5; }
  .film[data-state="preview"] { --film-ar: .8; }
  .film-speed { min-width: 44px; padding: 0 12px; }
  .film-speed-k { display: none; }
  /* phones: the 9:14 cut sits at the top, with a dark band underneath for the preview controls */
  .film.has-hero[data-state="preview"] { --film-ar: .5625; }
  .film.has-hero[data-state="preview"] .film-frame { aspect-ratio: 9 / 16; background: #0B0B14; }
  .film.has-hero[data-state="preview"] .hero-motion { height: auto; aspect-ratio: 9 / 14; }
}
/* Under the short film: "Watch the full trailer" (2 Oct 2026, built without Claude Design) */
.film-more { display: flex; justify-content: center; margin-top: clamp(14px, 2vw, 22px); }
.film-full span { margin-left: 4px; }

/* ---------- The full trailer's overlay player (2 Oct 2026, built without Claude Design) ----------
   The picture keeps its 16:9 shape and the controls sit underneath it, so nothing covers the trailer's burned-in
   captions (bottom left). Sized so picture and controls fit the screen at once. */
html.is-film-open { overflow: hidden; }
.fdlg { --fdlg-bar: 64px; border: 0; padding: 0; margin: auto; background: #0B0C14; color: #F5F3FF; border-radius: 24px; overflow: hidden;
  width: min(calc(100vw - 48px), 1280px, calc((100vh - 148px) * 1.7778)); width: min(calc(100vw - 48px), 1280px, calc((100svh - 148px) * 1.7778)); max-width: none; max-height: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 60px 120px -40px rgba(0,0,0,.8); }
.fdlg::backdrop { background: rgba(8,9,15,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-motion="full"] .fdlg[open] { animation: sheet-in .45s var(--sheet-ease); }
html[data-motion="reduced"] .fdlg[open] { animation: fade-in .15s linear; }
.fdlg-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; }
.fdlg-t { font-size: 15px; font-weight: 650; }
.fdlg-t > span { color: rgba(245,243,255,.6); font-weight: 600; font-variant-numeric: tabular-nums; }
.fdlg-x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: inherit; }
.fdlg-x:hover { background: rgba(255,255,255,.18); }
.fdlg-x svg.i { width: 18px; height: 18px; }
.fdlg-stage { display: flex; flex-direction: column; background: #0B0C14; }
.fdlg-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.fdlg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.fdlg-stage:fullscreen { justify-content: center; background: #000; }
.fdlg-stage:fullscreen .fdlg-frame { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.fdlg-stage:-webkit-full-screen { justify-content: center; background: #000; }
.fdlg-stage:-webkit-full-screen .fdlg-frame { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.film-bar { display: flex; align-items: center; gap: 4px; height: var(--fdlg-bar); padding: 0 10px; color: #F5F3FF; }
.fb-btn { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; color: inherit; }
.fb-btn:hover { background: rgba(255,255,255,.1); }
.fb-btn svg.i { width: 20px; height: 20px; }
.fb-btn .i-pl, .fb-btn.is-paused .i-pa { display: none; }
.fb-btn.is-paused .i-pl { display: block; }
.fb-btn .i-mu, .fb-btn[aria-pressed="true"] .i-so { display: none; }
.fb-btn[aria-pressed="true"] .i-mu { display: block; }
.fb-time { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 6px; white-space: nowrap; }
.fb-seek { flex: 1 1 auto; min-width: 40px; height: 44px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; margin: 0 6px; }
.fb-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #B29AFF var(--p, 0%), rgba(255,255,255,.22) var(--p, 0%)); }
.fb-seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); }
.fb-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: #B29AFF; }
.fb-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(178,154,255,.3); }
.fb-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
/* Phones: the player fills the screen, picture centred, controls underneath; full screen stays available. */
@media (max-width: 640px) {
  .fdlg { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; margin: 0; box-shadow: none; }
  .fdlg[open] { display: flex; flex-direction: column; }
  .fdlg-in { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .fdlg-hd { padding-top: max(8px, env(safe-area-inset-top)); }
  .fdlg-stage { flex: 1 1 auto; justify-content: center; padding-bottom: env(safe-area-inset-bottom); }
  .film-bar { --fdlg-bar: 56px; padding: 0 4px; gap: 0; }
  .fb-sep, .fb-time > span:last-child { display: none; }
}
/* End screen, over the picture */
.film-end { display: grid; place-items: center; align-content: center; gap: 24px; background: rgba(11,12,20,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.film-end[hidden] { display: none; }
.film-end-r { width: auto; height: clamp(56px, 7vw, 96px); filter: drop-shadow(0 0 30px rgba(178,154,255,.5)); }
.film-end-line { font-family: "Inter Tight", Inter, sans-serif; font-size: clamp(20px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; text-align: center; color: #F5F3FF; padding: 0 20px; text-wrap: balance; }
.film-end-line span { color: rgba(245,243,255,.62); }
.film-end-act { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.film-end .btn-ghost { background: rgba(255,255,255,.08); color: #F5F3FF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.film-end .btn-ghost svg.i { width: 18px; height: 18px; }
/* Transcript */

/* ---------- Reduced motion: opacity cross-fades of 150 ms at most; no movement ---------- */
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  animation-duration: .15s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: .15s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
html[data-motion="reduced"] .tw, html[data-motion="reduced"] .sheen::after { animation: none !important; }

/* Production fallback: browsers without :has() still show a focus ring on the chapter choices (see the chapters part of this file). */
@supports not selector(:has(*)) {
  .seg label:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
}

/* End screen: "Get early access" until the visitor has joined, then "You're on the list" */
.fe-on { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--r-btn); font-size: 15px; font-weight: 650; color: #F5F3FF; background: rgba(140,222,183,.14); box-shadow: inset 0 0 0 1px rgba(140,222,183,.4); }
.fe-on svg.i { width: 18px; height: 18px; color: #8CDEB7; }
.fdlg:not(.is-joined) .fe-on, .fdlg.is-joined .fe-join { display: none; }

/* ======== Chapters (was chapters.css) ======== */
/* Retenna landing · chapters: the sections below the film window, each one part of the 4-minute film.
   1 A living model of you · 2 It plays out the next 19 days · 3 Every part of your life · 4 Your rules · questions ·
   the final call to action. Everything uses the theme tokens in base.css, so it follows the device's light or dark
   setting. Layout: phones below 640 px, tablets 640 to 1023 px, desktops from 1024 px. */

/* ---------- Trailer: parts that only show once the trailer's files exist; the player's seek bar ---------- */
html:not(.has-film) [data-film-only] { display: none !important; }
.fb-track { position: relative; flex: 1 1 auto; display: flex; align-items: center; min-width: 40px; }
.fb-track .fb-seek { flex: 1 1 auto; margin: 0 6px; }
.fb-marks { position: absolute; left: 6px; right: 6px; top: 50%; height: 4px; margin-top: -2px; pointer-events: none; }
.fb-marks i { position: absolute; top: 0; width: 2px; height: 4px; background: rgba(11,12,20,.85); transform: translateX(-1px); }
.fb-ch { font-size: 13px; font-weight: 600; color: rgba(245,243,255,.8); white-space: nowrap; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; }
@media (max-width: 719px) { .fb-ch { display: none; } }

/* ---------- Shared chapter parts ---------- */

.ch-kick { font-family: "Inter Tight", Inter, sans-serif; font-size: clamp(17px, 1.1vw + 11px, 22px); font-weight: 650; letter-spacing: -.015em; color: var(--muted); margin-bottom: 10px; }

.ch-watch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; font-size: 15px; font-weight: 650; color: var(--fg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh); transition: box-shadow .2s var(--ease), transform .15s var(--ease); }
.ch-watch svg.i { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--accent); color: var(--bg); }
.ch-watch span { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 2px; }
.ch-watch:hover { box-shadow: inset 0 0 0 1.5px var(--accent), var(--sh); }
.ch-watch:active { transform: scale(.97); }
.ch-watch.sm { min-height: 40px; font-size: 14px; padding: 0 14px 0 8px; align-self: flex-start; }
.ch-watch.sm svg.i { width: 24px; height: 24px; }

.badge { display: inline-flex; align-items: center; gap: 7px; width: max-content; max-width: 100%; padding: 6px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.badge.after { background: var(--accent-soft); color: var(--accent-text); }
.badge.ask { background: var(--peach-soft); color: var(--peach); }
.nbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 650; background: var(--wash); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.nbtn-p { background: var(--grad); color: #fff; box-shadow: none; }
.notif, .qcard { border-radius: 18px; padding: 12px 14px 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 4px; }
.qcard { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--peach) 42%, transparent); }
.notif-app { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.notif-app img { width: 13px; height: 16px; }
.notif-app span { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.notif-t, .qcard-t { font-family: "Inter Tight", Inter, sans-serif; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; color: var(--fg); }
.notif-s { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.notif-act, .qcard-act{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.tbtn svg.i { width: 16px; height: 16px; }
.tbtn:hover { color: var(--fg); background: var(--wash); }

/* ---------- 1 · A living model of you ---------- */

.lm { position: relative; }
.lm-stage { position: relative; aspect-ratio: 5 / 4; }
@media (min-width: 1024px) { .lm-stage::before { content: ""; position: absolute; inset: 14% 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--model-rgb), .14), rgba(var(--model-rgb), 0)); pointer-events: none; } }
.lm-c { position: absolute; inset: 0; width: 100%; height: 100%; }
.lm-cards { position: absolute; inset: 0; pointer-events: none; }
.mcard { position: absolute; display: flex; align-items: center; gap: 10px; max-width: 250px; padding: 9px 14px 9px 9px; border-radius: 16px; pointer-events: auto;
  background: var(--surface); box-shadow: 0 0 0 1px rgba(var(--model-rgb), .28), 0 14px 34px -18px rgba(32,32,69,.45); }
.mcard img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: var(--wash); }
.mcard b { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.mcard small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.mcard[data-k="0"] { left: 0; top: 3%; }
.mcard[data-k="1"] { right: 0; top: 13%; }
.mcard[data-k="2"] { left: 2%; bottom: 12%; }
.mcard[data-k="3"] { right: 0; bottom: 2%; }
.lm-apps { position: absolute; inset: 0; pointer-events: none; }
.app { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 8px; max-width: 190px; padding: 7px 11px 7px 7px; border-radius: 12px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line2), 0 10px 24px -16px rgba(32,32,69,.4); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.app small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.app img { width: auto; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.app-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 26px; padding: 0 2px; }
.app-bars i { width: 4px; height: calc(var(--h) * 100%); border-radius: 2px; background: var(--accent); opacity: .75; }
.lm:not(.is-intro) .lm-apps { display: none; }
.lm.is-intro .mcard { opacity: 0; }
.lm.is-intro .app { opacity: 0; }
.lm-foot { margin-top: 16px; font-size: 15px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.lm-title { font-weight: 650; color: var(--fg); }
.lm-note { display: inline-flex; align-items: center; gap: 6px; }
.lm-note svg.i { width: 17px; height: 17px; color: var(--accent-text); }
/* A card the model hasn't learned yet (earlier in the timeline): a dashed outline where it will appear */
.mcard { transition: background-color .45s var(--ease), box-shadow .45s var(--ease), outline-color .45s var(--ease); outline: 1.5px dashed transparent; outline-offset: -1.5px; }
.mcard > * { transition: opacity .45s var(--ease); }
.mcard::after { content: "Not learned yet"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600;
  color: var(--quiet); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.mcard.is-ghost { background: color-mix(in srgb, var(--surface) 40%, transparent); box-shadow: none; outline-color: var(--line2); }
.mcard.is-ghost > * { opacity: 0; }
.mcard.is-ghost::after { opacity: 1; }
/* Phones and tablets: the model sits above its cards, which form a grid (no overlapping) */
@media (max-width: 1023px) {
  .lm-stage { aspect-ratio: auto; display: grid; gap: 12px; }
  .lm-c { position: relative; height: 230px; }
  .lm-apps { bottom: auto; height: 230px; }
  .app { max-width: 150px; font-size: 11.5px; }
  .app img { height: 30px; }
  .lm-cards { position: static; display: grid; gap: 10px; pointer-events: auto; }
  .mcard, .mcard[data-k] { position: relative; inset: auto; max-width: none; }
}
@media (min-width: 480px) and (max-width: 1023px) { .lm-cards { grid-template-columns: 1fr 1fr; } }

.decide-k { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.moment { border-radius: 24px; padding: 20px 22px 22px; background: var(--surface); box-shadow: var(--sh); }
.moment-hd { display: grid; gap: 8px; }
.moment-k { width: max-content; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pink); background: var(--pink-soft); }
.moment-h { font-family: "Inter Tight", Inter, sans-serif; font-size: 19px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; }
/* How long it has known you: the saved segmented control as three equal steps, inside the card, right above what they change */
.mm-seg { display: flex; width: 100%; margin-top: 14px; }
.mm-seg label { flex: 1 1 0; min-width: 0; }
.seg.mm-seg label > span { flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 1px; min-height: 50px; padding: 5px 8px; white-space: normal; text-align: center; line-height: 1.25; }
.mm-seg b { font-size: 14.5px; font-weight: 700; }
.mm-seg small { font-size: 12px; font-weight: 550; }
.mm-seg label:has(input:not(:checked)) b { color: var(--fg); }
.mm-seg .mm-long { font-style: normal; }
@media (max-width: 479px) { .mm-seg .mm-long { display: none; } .seg.mm-seg label > span { min-height: 44px; padding: 4px 6px; } }
@media (min-width: 700px) and (max-width: 1023px) { .mm .lm-c, .mm .lm-apps { height: 124px; } }
/* The three answers share one space, so the card never changes height and nothing below it moves */
.mv-deck { display: grid; margin-top: 12px; }
.mv { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s; }
.mv.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease) .08s, transform .45s var(--ease) .08s, visibility 0s; }
html[data-motion="reduced"] .mv { transform: none; }
/* Phones and tablets (nothing sits beside the card): the card fits each answer, and eases between heights */
@media (max-width: 1023px) { .mv-deck { position: relative; } .mv:not(.is-on) { position: absolute; inset: 0 0 auto; } }
.mv-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.notif-q { font-size: 15.5px; line-height: 1.45; font-weight: 500; color: var(--fg); }
.badge.you { background: var(--wash); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- 2 · It plays out the next 19 days ---------- */

.wcard-h { margin-top: 8px; font-family: "Inter Tight", Inter, sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.wcard-s { margin-top: 4px; font-size: 13.5px; color: var(--muted); }

.wcard-segs { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 14px; }
.wcard-segs i { height: 5px; border-radius: 3px; background: var(--line); transition: background-color .3s var(--ease); }
.wcard-segs i.on { background: var(--pink); }
.wcard-count { margin-top: 8px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wcard-count b { color: var(--fg); font-weight: 650; }

.fs-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.fs-clock { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fs-clock i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.fs-clock b { color: var(--fg); }
.fs-clock span::before { content: "· "; }
.fs-lock { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--green); background: var(--green-soft); opacity: 0; transition: opacity .3s var(--ease); }
.fs-lock svg.i { width: 14px; height: 14px; }
.fs-lock.is-on { opacity: 1; }
.fs-lanes { position: relative; height: clamp(190px, 20vw, 240px); margin: 26px 0 30px; }
.fs-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fs-now { stroke: var(--line2); stroke-width: 1.5; stroke-dasharray: 3 5; }
.fs-ln { fill: none; stroke: rgba(var(--model-rgb), .5); stroke-width: 2; stroke-linecap: round; transition: stroke .4s var(--ease), opacity .4s var(--ease), stroke-width .3s; }
.fs-ln.is-fail { stroke: var(--peach); opacity: .42; stroke-dasharray: 2 6; }
.fs-ln.is-chosen { stroke: var(--accent); stroke-width: 3.2; }
.fs-marks { position: absolute; inset: 0; }
.fs-nowl { position: absolute; top: -8px; transform: translate(-50%, -100%); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fs-x { position: absolute; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; transform: translate(-50%, -50%); font-size: 12px; font-weight: 700; color: var(--surface); background: var(--peach); box-shadow: 0 0 0 3px var(--surface); }
.fs-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--surface); box-shadow: 0 0 0 2.5px var(--accent); }
.fs-dot.is-hero { width: 14px; height: 14px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.fs-ms { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 6px 14px -10px rgba(32,32,69,.5); }
.fs-ms.is-hero { background: var(--accent); color: var(--bg); box-shadow: none; }
.fs-rainm { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; color: var(--blue); background: var(--blue-soft); }
.fs-rainm svg.i { width: 15px; height: 15px; }
.fs-axis { position: absolute; left: 0; right: 0; bottom: -26px; height: 18px; }
.fs-axis span { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fs-axis span:last-child { transform: translateX(-80%); }
.fs-k { margin: 6px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fs-k ~ .fs-k { margin-top: 16px; }
.fs-why { display: grid; gap: 2px; }
.fs-why li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; font-size: 15px; line-height: 1.35; transition: opacity .3s var(--ease); }
.fs-why li:not(.is-on) { opacity: .35; }
.fs-why .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--surface); background: var(--peach); }

 .fs-changes .badge, .tile-dec .badge { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 550; padding: 6px 12px; }

.fs-changes .badge, .tile-dec .badge { font-size: 12px; font-weight: 650; padding: 4px 10px; }

.fs-p[data-fs-p="rain"] .fs-k { margin-top: 14px; }
.fs-changes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.fs-changes .arr { color: var(--accent); font-weight: 700; margin: 0 3px; }

.fs-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.fs-ctl .btn svg.i { width: 18px; height: 18px; }

/* ---------- 3 · Every part of your life ---------- */
.ch-spaces { background: var(--bg2); }
.tiles { display: grid; gap: 16px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .tiles { grid-auto-flow: column; grid-auto-columns: min(86%, 360px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gut)); padding: 4px var(--gut) 14px; scroll-padding-inline: var(--gut); scrollbar-width: thin; }
  .tile { scroll-snap-align: start; }
}

.tile { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: var(--sh); }

.tile-role { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.tile-role img { width: 30px; height: 30px; padding: 2px; border-radius: 9px; background: var(--cs); flex: 0 0 auto; }

.tile-h { font-family: "Inter Tight", Inter, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.noticed2 .n-k { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.noticed2 .n-ask { font-family: "Inter Tight", Inter, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.noticed2 ul { display: grid; gap: 7px; }
.noticed2 li { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.4; }
.noticed2 .src { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; color: var(--c); background: var(--cs); }
.noticed2 .src svg.i { width: 12px; height: 12px; stroke-width: 2.2; }
.tile-dec { margin-top: auto; display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.tile-dec p { font-size: 14.5px; line-height: 1.45; font-weight: 550; }

/* ---------- 4 · Your rules, in one screen (29 September 2026, second pass) ----------
   Words on the left; one panel on the right. Each rule is one slim line: the rule, a short two-choice control
   ("Do it" / "Ask me"; the full wording is read out to screen readers), an arrow, and the moment in your week it
   changes. The moment's colour says how it reaches you (violet: done for you, with Undo; peach: waits for your yes),
   and the count at the top is the key. The last row is Retenna's suggested rule. Tablets: the words above the panel.
   Phones: each moment sits under its rule as one compact line. */
.rl { --rl-c: minmax(0, .7fr) 9.75rem 18px minmax(0, 1.5fr); display: grid; gap: 16px; }
.rl-side { display: grid; gap: 14px; align-content: start; }
.rl-side .ch-kick { margin-bottom: -4px; }
.rl-h { font-size: clamp(1.9rem, 1.05rem + 1.9vw, 2.75rem); }
.rl-lede { font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 34em; }
.rl-points { display: grid; gap: 10px; margin-top: 4px; }
.rl-points li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14.5px; line-height: 1.4; font-weight: 550; }
.rl-points svg.i { width: 28px; height: 28px; padding: 6px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); stroke-width: 2; }
.rl-film { justify-self: start; margin-top: 4px; }

.rl-panel { min-width: 0; border-radius: 24px; padding: 16px 16px 8px; background: var(--surface); box-shadow: var(--sh); }
.rl-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 0 10px; }
.rl-k { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rl-sum { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; font-weight: 550; color: var(--muted); font-variant-numeric: tabular-nums; }
.rl-key { display: inline-flex; align-items: center; gap: 6px; }
.rl-key i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.rl-key.is-ask i { background: var(--peach); }
.rl-sum b { font-weight: 700; color: var(--fg); }
.rl-bar { flex: 1 0 100%; display: flex; gap: 3px; height: 5px; margin-top: 4px; }
.rl-bar i { flex: 1 1 0; min-width: 6px; border-radius: 3px; transition: flex-grow .5s var(--ease); }
.rl-bar i[hidden] { display: none; }
.rl-bar .is-after { background: var(--accent); }
.rl-bar .is-ask { background: var(--peach); opacity: .8; }
.rl-cols { display: grid; grid-template-columns: var(--rl-c); gap: 12px; margin: 14px 0 2px; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); }
.rl-cols span + span { grid-column: 4; }

.rl-list { display: grid; }
.rl-row { position: relative; display: grid; grid-template-columns: var(--rl-c); gap: 6px 12px; align-items: center; padding: 8px 10px; border-radius: 16px;
  transition: background-color .2s var(--ease), opacity .7s var(--ease), transform .7s var(--ease); }
.rl-row + .rl-row::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 1px; background: var(--line); transition: opacity .2s var(--ease); }
.rl-row:hover, .rl-row:focus-within { background: var(--wash); }
.rl-row:hover::before, .rl-row:hover + .rl-row::before, .rl-row:focus-within::before, .rl-row:focus-within + .rl-row::before { opacity: 0; }
.rl-row .rule-q { min-width: 0; font-family: "Inter Tight", Inter, sans-serif; font-size: 16px; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; }
.rl-tag { display: inline-flex; margin-left: 8px; padding: 2px 7px; border-radius: 999px; font-family: Inter, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; background: var(--accent-soft); color: var(--accent-text); }
.rl-arrow { width: 18px; height: 18px; color: var(--quiet); stroke-width: 2; }

/* The control: two equal halves, or a locked pill of the same size */
.rl-ctl { width: 100%; }
.rl .seg { display: flex; }
.rl .seg label { flex: 1 1 0; }
.rl .seg label > span { flex: 1 1 auto; justify-content: center; min-height: 34px; padding: 0 8px; font-size: 13px; }
.seg .rl-w { font-style: normal; }
.seg .rl-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rl-lock { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 14px; font-size: 13px; font-weight: 650; color: var(--peach); background: var(--peach-soft); }
.rl-lock svg.i { width: 13px; height: 13px; stroke-width: 2.2; }

/* The moment */
.rl-out { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; align-items: center; min-width: 0; padding: 8px 10px 8px 16px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.rl-out::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.rl-out.is-ask { background: color-mix(in srgb, var(--peach-soft) 55%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--peach) 30%, transparent); }
.rl-out.is-ask::before { background: var(--peach); }
.rl-o-t { grid-column: 1; font-family: "Inter Tight", Inter, sans-serif; font-size: 14.5px; font-weight: 700; letter-spacing: -.012em; line-height: 1.3; }
.rl-o-m { grid-column: 1; display: flex; gap: 8px; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.rl-day { flex: 0 0 auto; font-weight: 700; color: var(--accent-text); }
.rl-out.is-ask .rl-day { color: var(--peach); }
.rl-o-s { min-width: 0; }
.rl-o-act { grid-column: 2; grid-row: 1 / span 2; display: flex; }
.rl-o-act .nbtn { min-height: 30px; padding: 0 12px; border-radius: 10px; font-size: 13px; }

/* Retenna's suggested rule */
.rl-row.is-sugg { margin-top: 6px; background: rgba(var(--model-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--model-rgb), .22); }
.rl-row.is-sugg::before { display: none; }
.rl-sg { grid-column: 1 / span 2; display: grid; gap: 3px; min-width: 0; }
.rl-sg-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 2px; }
.rl-sg-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--accent-text); }
.rl-sg-k img { width: 11px; height: 14px; }
.rl-sg-ev { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 11.5px; font-weight: 650; color: var(--muted); background: var(--wash); font-variant-numeric: tabular-nums; }
.rl-sg-q { font-family: "Inter Tight", Inter, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.rl-sg-t { font-size: 13px; line-height: 1.4; color: var(--muted); }
.rl-sg-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rl-sg-act .btn { min-height: 36px; }
.rl-sg-done { font-size: 14.5px; font-weight: 600; }
html[data-motion="full"] .rl-row.is-waiting { opacity: 0; transform: translateY(14px); }
html[data-motion="full"] .rl-row.is-new { animation: halo 2.2s var(--ease) both; }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(var(--model-rgb), 0); background: rgba(var(--model-rgb), .1); } 30% { box-shadow: 0 0 0 6px rgba(var(--model-rgb), .16); } 100% { box-shadow: 0 0 0 14px rgba(var(--model-rgb), 0); background: transparent; } }
html[data-motion="reduced"] .rl-row.is-new { background: rgba(var(--model-rgb), .06); }
.rl-row.is-new:focus { outline: none; }
.rl-row.is-new:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The two-choice control */
.seg { display: inline-flex; padding: 3px; border-radius: 14px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
.seg legend { padding: 0; }
.seg label { position: relative; display: flex; }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg label > span { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 12px; border-radius: 11px; font-size: 13.5px; font-weight: 650; color: var(--muted); white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease); }
.seg span svg.i { width: 13px; height: 13px; stroke-width: 2.2; }
.seg input:checked + span { background: var(--surface); color: var(--accent-text); box-shadow: 0 0 0 1px var(--line), 0 2px 6px -2px rgba(0,0,0,.18); }
.seg input[value="ask"]:checked + span { color: var(--peach); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.seg label:has(input:not(:checked)):hover > span { color: var(--fg); }

@media (min-width: 1024px) {
  .rl { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 40px; align-items: center; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .rl { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 28px; }
  .rl-points, .rl-o-s { display: none; }
}
/* Short laptop screens (for example 1366 × 768, or 1920 × 1080 at 125 %): tighter rows */
@media (min-width: 640px) and (max-height: 820px) {
  .rl-cols { display: none; }
  .rl-panel { padding-top: 14px; }
  .rl-bar { margin-bottom: 6px; }
  .rl-row { padding-block: 6px; }
  .rl-out { padding-block: 6px; }
  .rl-points { gap: 8px; }
  .rl-points li { font-size: 14px; }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .rl-lede { font-size: 15px; }
  .rl-points li:nth-child(n+2) { display: none; }
  .rl-sg-t { display: none; }
}
@media (max-width: 1023px) {
  .rl-points { display: none; }
  .rl-side { display: contents; }
  .rl-side .ch-kick { margin-bottom: -10px; }
  .rl-panel { order: 5; } .rl-film { order: 6; margin-top: 0; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .rl-cols { display: none; }
  .rl-bar { margin-bottom: 6px; }
}
@media (max-width: 639px) {
  .rl-lede, .rl-k, .rl-cols, .rl-arrow, .rl-o-m { display: none; }
  .rl { --rl-c: minmax(0, 1fr) 8.75rem; }
  .rl-panel { padding: 12px 10px 4px; border-radius: 20px; }
  .rl-top { padding: 0 6px; }
  .rl-sum { font-size: 13px; gap: 4px 12px; }
  .rl-bar { margin: 4px 0 2px; }
  .rl-row { gap: 4px 10px; padding: 5px 6px; }
  .rl-row + .rl-row::before { left: 6px; right: 6px; }
  .rl-row .rule-q { font-size: 15px; }
  .rl-row > .rl-out { grid-column: 1 / -1; }
  .rl .seg label > span { min-height: 30px; font-size: 12.5px; }
  .rl-lock { min-height: 36px; font-size: 12.5px; }
  .rl-out { padding: 3px 3px 3px 14px; border-radius: 10px; }
  .rl-o-t { font-size: 13.5px; font-weight: 650; }
  .rl-o-act { grid-row: 1; }
  .rl-o-act .nbtn { min-height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
  .rl-sg { grid-column: 1 / -1; }
  .rl-sg-q { font-size: 15px; }
  .rl-sg-act { margin-top: 4px; }
  .rl-sg-act .btn { min-height: 34px; }
  .rl-row.is-sugg { margin-top: 4px; padding: 10px; }
}
@media (max-width: 380px) { .rl-sg-ev { display: none; } .rl-h { font-size: 1.75rem; } .rl { --rl-c: minmax(0, 1fr) 8.25rem; } }

/* ---------- The final call to action ---------- */
.final { text-align: center; padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(96px, 11vw, 150px); overflow: hidden; }

.final-in { display: grid; justify-items: center; gap: 20px; }
.final .lede { margin: 0 auto; }

/* Every part of your life, joined up in one Retenna: eight icons in a ring round the R, each joined to it by a line */
.orbit-fig { display: grid; justify-items: center; gap: 14px; margin: 4px 0 6px; }
.orbit { --size: 300px; --r: 118px; --chip: 46px; position: relative; width: var(--size); height: var(--size); }
.orbit::before { content: ""; position: absolute; inset: calc(50% - var(--r)); border-radius: 50%; border: 1.5px dashed rgba(var(--model-rgb), .22); }
.orbit::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--model-rgb), .28), rgba(var(--model-rgb), 0)); opacity: .9; transition: opacity .6s var(--ease); }
.orbit-arm { position: absolute; left: 50%; top: 50%; width: var(--r); height: 0; transform-origin: 0 0; transform: rotate(var(--a)); }
.orbit-arm::before { content: ""; position: absolute; left: 44px; right: calc(var(--chip) / 2 + 2px); top: -1px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, rgba(var(--model-rgb), .5), var(--c)); opacity: .55; transform-origin: 100% 50%; }
.orbit-arm::after { content: ""; position: absolute; top: -3px; left: calc(100% - var(--chip) / 2 - 8px); width: 6px; height: 6px; border-radius: 50%; background: var(--c); opacity: 0; }
.orbit-i { position: absolute; left: 100%; top: 0; width: var(--chip); height: var(--chip); margin: calc(var(--chip) / -2) 0 0 calc(var(--chip) / -2);
  display: grid; place-items: center; border-radius: 50%; color: var(--c); background: var(--cs); transform: rotate(calc(-1 * var(--a)));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent), 0 10px 22px -12px rgba(32,32,69,.45); }
.orbit-i svg.i { width: 21px; height: 21px; }
.orbit-r { position: absolute; left: 50%; top: 50%; width: auto; height: 96px; transform: translate(-50%, -50%); filter: drop-shadow(0 0 22px rgba(178,154,255,.55)); transition: filter .6s var(--ease); }
.orbit.bright .orbit-r { filter: drop-shadow(0 0 40px rgba(178,154,255,.95)) brightness(1.12); }

@media (max-width: 480px) { .orbit { --size: 256px; --r: 100px; --chip: 40px; } .orbit-r { height: 80px; } .orbit-i svg.i { width: 18px; height: 18px; } .orbit-arm::before { left: 38px; } }
/* Full motion: before the ring comes into view everything waits; then icons appear, lines draw in, the R arrives */
html[data-motion="full"] .orbit:not(.is-on) .orbit-i { opacity: 0; transform: rotate(calc(-1 * var(--a))) scale(.5); }
html[data-motion="full"] .orbit:not(.is-on) .orbit-arm::before { transform: scaleX(0); }
html[data-motion="full"] .orbit:not(.is-on) .orbit-r, html[data-motion="full"] .orbit:not(.is-on)::after { opacity: 0; }
html[data-motion="full"] .orbit:not(.is-on) .orbit-r { transform: translate(-50%, -50%) scale(.82); }
html[data-motion="full"] .orbit .orbit-i { transition: opacity .45s var(--ease) calc(var(--k) * 90ms), transform .6s var(--spring) calc(var(--k) * 90ms); }
html[data-motion="full"] .orbit .orbit-arm::before { transition: transform .7s cubic-bezier(.45,0,.2,1) calc(700ms + var(--k) * 60ms); }
html[data-motion="full"] .orbit .orbit-r { transition: opacity .6s var(--ease) 1.35s, transform .8s var(--spring) 1.35s, filter .6s var(--ease); }
html[data-motion="full"] .orbit::after { transition: opacity .8s var(--ease) 1.4s; }
/* Then, while on screen, small points of light keep travelling in along the lines to the R */
html[data-motion="full"] .orbit.is-live .orbit-arm::after { animation: orbit-in 3.2s cubic-bezier(.5,0,.6,1) calc(var(--k) * 400ms) infinite; }
html[data-motion="full"] .orbit.is-paused .orbit-arm::after { animation-play-state: paused; }
@keyframes orbit-in { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 70% { opacity: 1; } 85%, 100% { opacity: 0; transform: translateX(calc(-1 * var(--r) + 60px)); } }
.join-final { margin-top: 12px; text-align: left; }
.join-final .join-offer { display: block; text-align: center; }
.join-final .join-offer svg.i { display: inline-block; vertical-align: -3px; margin-right: 6px; }

/* Reduced motion: nothing moves; the intro states never show. */
html[data-motion="reduced"] .lm-apps { display: none; }
html[data-motion="reduced"] .lm.is-intro .mcard{ opacity: 1; }

/* ---------- 29 September 2026: broad version (situation picker, line icons on the tiles) ---------- */
.tile-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--cs); color: var(--c); flex: 0 0 auto; }
.tile-ic svg.i { width: 17px; height: 17px; }
.tile-ic-r img { width: 14px; height: 18px; }
.mv-ask { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--peach); }
.mv-ask svg.i { width: 14px; height: 14px; }
.scn { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.scn-k { width: 100%; margin-bottom: 4px; padding: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.scn-opt { position: relative; display: flex; }
.scn-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.scn-opt span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; font-size: 15px; font-weight: 650; color: var(--fg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh); transition: box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s; }
.scn-opt span svg.i { width: 18px; height: 18px; color: var(--accent); }
.scn-opt input:checked + span { background: var(--accent); color: var(--bg); box-shadow: 0 8px 20px -10px rgba(var(--model-rgb), .8); }
.scn-opt input:checked + span svg.i { color: var(--bg); }
.scn-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.scn-opt:hover input:not(:checked) + span { box-shadow: inset 0 0 0 1.5px var(--accent), var(--sh); }
@media (max-width: 639px) {
  .scn { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gut)); padding: 2px var(--gut) 8px; scrollbar-width: none; }
  .scn::-webkit-scrollbar { display: none; }
  .scn-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .scn-opt { flex: 0 0 auto; }
}

.fs-ms.is-off { visibility: hidden; }

/* ---------- "Something's coming up" in one screen (29 September 2026) ----------
   Desktop: heading, picker and controls on the left; one panel on the right with the card, the timeline and the
   reasons side by side. Phones and tablets: one column in the order picker, panel, controls, so the whole stage fits
   one screen below the heading. */
.fs2 { display: grid; gap: 16px; }
.fs2-side { display: grid; gap: 14px; align-content: start; }
.fs2-side .ch-kick { margin-bottom: -4px; }
.fs2-h { font-size: clamp(1.9rem, 1.05rem + 1.9vw, 2.75rem); }
.fs2-lede { font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 34em; }
.fs2 .scn { margin: 0; }
.fs2 .fs-ctl { margin: 0; padding: 0; border: 0; }
.fs2-film { justify-self: start; }
.fs2-panel { min-width: 0; border-radius: 24px; padding: 14px 18px 12px; background: var(--surface); box-shadow: var(--sh); }
.fs2-sum { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(130px, auto); gap: 8px 14px; align-items: center; margin-top: 10px; }
.fs2-img { width: 120px; height: 66px; border-radius: 12px; object-fit: cover; background: var(--wash); }
.fs2-sum .wcard-h { margin-top: 3px; font-size: 21px; }
.fs2-sum .wcard-s { margin-top: 1px; font-size: 13px; }
.fs2-prog { display: grid; gap: 6px; }
.fs2-prog .wcard-count { margin: 0; font-size: 13.5px; }
.fs2 .wcard-segs { margin: 0; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }

.fs2 .fs-lanes { height: clamp(140px, 15vw, 180px); margin: 24px 0 28px; }
.fs2 .fs-k { margin: 0 0 6px; }
.fs2-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 24px; }
.fs2-cols[hidden] { display: none; }
.fs2 .fs-why li { padding: 4px 8px; font-size: 14px; }
.fs2 .fs-why .n { width: 20px; height: 20px; font-size: 11.5px; }

.fs2 .fs-changes li { padding: 5px 0; font-size: 13.5px; gap: 2px 10px; }
.fs2 .fs-changes .badge { font-size: 11px; padding: 3px 8px; }

.fs2 .qcard { padding: 10px 12px 12px; }
.fs2 .qcard-t { font-size: 15px; }
.fs2 .qcard .nbtn { min-height: 32px; }
@media (min-width: 760px) { .fs2-cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
@media (min-width: 1024px) {
  .fs2 { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 32px; align-items: center; }
  .fs2 .scn { flex-direction: column; flex-wrap: nowrap; }
  .fs2 .scn-opt span { width: 100%; }
}
@media (max-width: 1023px) {
  .fs2-side { display: contents; }
  .fs2 .scn-set { order: 4; } .fs2-panel { order: 5; } .fs2 .fs-ctl { order: 6; } .fs2-film { order: 7; }
  .fs2-lede { margin-bottom: 6px; }
}
@media (max-width: 639px) {
  .fs2-panel { padding: 12px 14px 10px; border-radius: 20px; }
  .fs2-sum { grid-template-columns: minmax(0, 1fr) auto; }
  .fs2-img { display: none; }
  .fs2-prog { min-width: 96px; }

  .fs2 .fs-lanes { height: 138px; margin: 20px 0 26px; }
  .fs2 .fs-why li { font-size: 13.5px; }

}

/* The key to "Done for you" and "Waits for your yes", shown once above the tiles */
.key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: -8px 0 22px; font-size: 14px; color: var(--muted); }

.key .badge { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 650; padding: 4px 10px; }
/* Tighter on short screens and phones, so both states (the plan, and after a change) fit one screen */
.fs-top { flex-wrap: nowrap; }
.fs2 .fs-lock { white-space: nowrap; font-size: 12.5px; padding: 5px 10px; }
@media (min-width: 1024px) and (max-height: 820px) { .fs2 .fs-lanes { height: 130px; margin: 20px 0 26px; } .fs2-h { font-size: clamp(1.8rem, 1rem + 1.6vw, 2.4rem); } }
@media (max-width: 639px) {
  .fs2 .fs-clock { font-size: 11px; letter-spacing: .1em; gap: 6px; }
  .fs2 .fs-lock { font-size: 11.5px; padding: 4px 8px; }
  .fs2-sum .wcard-s { display: none; }
  .fs2-sum .wcard-h { font-size: 19px; }

  .fs2[data-mode="rain"] .fs-lanes { height: 96px; margin: 16px 0 24px; }

  .fs2 .fs-changes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; font-size: 13px; padding: 4px 0; }
  .fs2 .fs-changes .badge { font-size: 10.5px; padding: 2px 7px; white-space: nowrap; }

  .fs2 .qcard { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 8px 10px; }
  .fs2 .qcard .badge { grid-column: 1 / -1; font-size: 10.5px; padding: 2px 7px; }
  .fs2 .qcard-t { font-size: 13.5px; }
  .fs2 .qcard-act { margin: 0; gap: 6px; }
  .fs2 .qcard .nbtn { min-height: 30px; padding: 0 10px; font-size: 13px; }
  .fs2 .fs-k { font-size: 11px; }

}

/* ---------- "A living model of you" in one screen (29 September 2026) ----------
   Desktop: words and the "How Retenna decides" slider on the left, the model on the right. Phones and tablets: heading,
   then the model, then the slider, compact enough that model and slider fit one screen together. */
.mm { display: grid; gap: 16px; }
.mm-side { display: grid; gap: 14px; align-content: start; }
.mm-side .ch-kick { margin-bottom: -4px; }
.mm-h { font-size: clamp(1.9rem, 1.05rem + 1.9vw, 2.75rem); }
.mm-lede { font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 34em; }
.mm .decide-k { margin: 6px 0 8px; }
.mm .moment { padding: 16px 18px 18px; }
.mm-film { justify-self: start; }
@media (min-width: 1024px) {
  .mm { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 48px; align-items: center; }
  .mm .lm-stage { max-height: calc(100svh - var(--hdr-h) - 90px); margin-inline: auto; }
}
@media (min-width: 1024px) and (max-height: 820px) { .mm-h { font-size: clamp(1.8rem, 1rem + 1.6vw, 2.4rem); } .mm-lede { font-size: 15px; } }
@media (max-width: 1023px) {
  .mm-side { display: contents; }
  .mm .lm { order: 4; width: 100%; max-width: 560px; justify-self: center; }
  .mm .decide { order: 5; } .mm-film { order: 6; }
}
@media (max-width: 699px) {
  .mm .lm-c { height: 150px; }
  .mm .lm-apps { height: 150px; }
  .mm .lm-cards { grid-template-columns: 1fr 1fr; gap: 6px; }
  .mm .mcard { padding: 6px 8px 6px 6px; gap: 7px; border-radius: 12px; }
  .mm .mcard img { width: 30px; height: 30px; border-radius: 8px; }
  .mm .mcard b { font-size: 12.5px; }
  .mm .mcard small { font-size: 11px; }
  .mm .lm-foot { margin-top: 8px; font-size: 13px; }
  .mm .lm-stage::before { display: none; }
  .mm .moment { padding: 12px 14px 14px; border-radius: 20px; }
  .mm .moment-h { font-size: 16.5px; }
  .mm .notif-q { font-size: 14.5px; }
  .mm .notif-s { font-size: 13.5px; }
}

/* Living model on phones and short desktops: tighter, so the model and the slider fit one screen together */
@media (max-width: 699px) {
  .mm .lm-c, .mm .lm-apps { height: 118px; }
  .mm .lm-title { display: none; }
  .mm .lm-foot { margin-top: 6px; }
  .mm .decide-k { display: none; }
  .mm .moment-hd { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }
  .mm .mv-deck { margin-top: 8px; }
  .mm .notif-act .nbtn { min-height: 30px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .mm .decide-k { display: none; }
  .mm .lm-stage { max-height: calc(100svh - var(--hdr-h) - 70px); }
  .mm .notif-act .nbtn { min-height: 30px; }
}
/* The ring round the R uses the hero headline's own objects, floating on soft glows (29 September 2026) */
.orbit { --chip: 64px; }
.orbit-i { background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent); box-shadow: none; }
.orbit-i img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(20,16,60,.28)); }
html[data-motion="full"] .orbit.is-live .orbit-i img { animation: orbit-float 5.5s ease-in-out calc(var(--k) * -.8s) infinite; }
html[data-motion="full"] .orbit.is-paused .orbit-i img { animation-play-state: paused; }
@keyframes orbit-float { 50% { transform: translateY(-4px) rotate(-3deg); } }
.orbit-arm::before { left: 46px; right: calc(var(--chip) / 2 + 4px); }
@media (max-width: 480px) { .orbit { --chip: 54px; } .orbit-arm::before { left: 40px; } }

/* ---------- The ending in one screen (29 September 2026) ----------
   The photo fills the section behind a dark veil; the line, the ring round the R, the headline and the sign-up sit on
   top. It is dark on every device, so it sets its own night tokens. */
.final { --fg: #F5F3FF; --muted: #CFCBE3; --quiet: rgba(245,243,255,.62); --field: rgba(255,255,255,.1); --field-line: rgba(255,255,255,.3);
  --focus: #B29AFF; --focus-ring: rgba(178,154,255,.3); --accent: #B29AFF; --accent-text: #D9CBFF; --peach: #FFC19E; --peach-soft: #463025;
  --green: #8CDEB7; --green-soft: #1F3E35; --bg: #0F1019; --model-rgb: 178, 154, 255; --grad: linear-gradient(120deg, #7657F0, #4F72E8);
  color-scheme: dark; color: var(--fg); background: #0B0C14; display: grid; align-items: center;
  min-height: calc(100svh - var(--hdr-h)); padding-top: clamp(28px, 4vh, 56px); padding-bottom: clamp(28px, 4vh, 56px); overflow: hidden; }
.final-bg { position: absolute; inset: 0; z-index: -1; }
.final-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.final-bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 45%, rgba(11,12,20,.5), rgba(11,12,20,.82) 100%), linear-gradient(rgba(11,12,20,.35), rgba(11,12,20,.75)); }
.final { isolation: isolate; }
.final-in { gap: clamp(10px, 1.8vh, 18px); }
.final-kick { font-family: "Inter Tight", Inter, sans-serif; font-size: clamp(22px, 1rem + 1.4vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: #F5F3FF; text-wrap: balance; }
.final-kick .iris-on { background-image: var(--iris); -webkit-background-clip: text; background-clip: text; color: transparent; }
.final .orbit-fig { margin: 0; }
.final .orbit { --size: min(260px, 30svh); --r: calc(var(--size) * .39); --chip: calc(var(--size) * .2); }
.final .orbit-r { height: calc(var(--size) * .3); }
.final .orbit-arm::before { left: calc(var(--size) * .15); }
.final .h2 { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.4rem); }
.final .lede { font-size: 17px; }
.final .join-final { margin-top: 4px; }
.final .join-offer { color: #F5F3FF; }
.final .join-input { color: #F5F3FF; }
@media (max-width: 560px) { .final .orbit { --size: min(220px, 27svh); } .final .h2 { font-size: 1.9rem; } .final .lede { font-size: 15.5px; } }

/* Phones: the model and the card together in one screen (the lede is hidden, as in "Your rules") */
@media (max-width: 699px) {
  .mm-lede { display: none; }
  .mm { gap: 12px; }
  .mm .lm-stage { gap: 10px; }
  .mm .lm-c, .mm .lm-apps { height: 84px; }
  .mm .mv { gap: 7px; }
  .mm .notif { padding: 9px 12px 10px; }
  .mm .notif-act { margin-top: 4px; }
  .fs2 .fs-lanes { height: 124px; }
}
.final { min-height: calc(100svh - var(--hdr-h) - 16px); }
/* Short landscape screens */
@media (min-width: 1024px) and (max-height: 800px) {
  .fs2 .fs-lanes { height: 112px; margin: 18px 0 24px; }
  .mm .lm-stage { max-height: calc(100svh - var(--hdr-h) - 110px); }
  .mm-lede { font-size: 14.5px; }
}
/* Short phones (under 760 px tall): the smallest sizes that still read */
@media (max-width: 699px) and (max-height: 760px) {
  .ch-kick { font-size: 15px; }
  .mm .lm-c, .mm .lm-apps { height: 64px; }
  .mm .mcard small { display: none; }
  .mm .lm-foot { display: none; }
  .mm .moment-hd .moment-k { display: none; }
  .mm .notif-s { font-size: 12.5px; }
  .fs2 .fs-lanes { height: 96px; margin: 16px 0 22px; }
  .fs2 .fs-k { display: none; }
  .fs2 .fs-why li { padding: 2px 6px; font-size: 12.5px; }

  .fs2 .scn-opt span { min-height: 38px; font-size: 14px; }

  .fs2 .fs-changes li { font-size: 12.5px; padding: 3px 0; }
  .fs2-panel { padding: 10px 12px 8px; }
}

/* ---------- "Every part of your life" as one-screen explorer (29 September 2026) ----------
   Desktop: the eight roles on the left, one panel on the right. Phones and tablets: a swipeable row of roles above the
   panel. */
.sp { display: grid; gap: 14px; }
.sp-tabs { display: grid; gap: 6px; align-content: start; }
.sp-tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: 16px; text-align: left; color: var(--fg);
  background: transparent; box-shadow: inset 0 0 0 1px transparent; transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
.sp-tab:hover { background: var(--surface); }
.sp-tab[aria-selected="true"] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--c), var(--sh); }
.sp-tab .tile-ic { width: 34px; height: 34px; border-radius: 10px; }
.sp-tab-t { display: grid; gap: 1px; min-width: 0; }
.sp-role { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.sp-line { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--fg); }
.sp-short { display: none; }
.sp-panel { display: grid; border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: var(--sh); }
.sp-panel[hidden] { display: none; }
.sp-ph { aspect-ratio: 16 / 9; max-height: 300px; overflow: hidden; background: var(--wash); }
.sp-ph img { width: 100%; height: 100%; object-fit: cover; }
.sp-b { display: grid; gap: 12px; padding: 16px 20px 18px; }
.sp-b .tile-h { font-size: 22px; }
.sp-b .tile-dec { margin-top: 0; }
.sp-b .ch-watch { justify-self: start; }
@media (min-width: 1024px) {
  .sp { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 28px; align-items: start; }
  .sp-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sp-ph { aspect-ratio: auto; max-height: none; height: 100%; min-height: 420px; }
  .sp-b { align-content: center; padding: 22px 24px; }
}
@media (max-width: 1023px) {
  .sp-tabs { display: flex; overflow-x: auto; gap: 6px; margin-inline: calc(-1 * var(--gut)); padding: 2px var(--gut) 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .sp-tabs::-webkit-scrollbar { display: none; }
  .sp-tab { flex: 0 0 auto; width: auto; padding: 0 14px 0 6px; min-height: 44px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); scroll-snap-align: start; }
  .sp-tab .tile-ic { width: 30px; height: 30px; border-radius: 50%; }
  .sp-role, .sp-line { display: none; }
  .sp-short { display: inline; font-size: 14.5px; font-weight: 650; }
  .sp-ph { max-height: 220px; }
}
@media (max-width: 639px) {
  .sp-b { padding: 14px 16px 16px; gap: 10px; }
  .sp-b .tile-h { font-size: 19px; }
  .sp-ph { max-height: 180px; }
}

/* Explorer with its heading in the left column */
.sp-side { display: grid; gap: 12px; align-content: start; }
.sp-side .ch-kick { margin-bottom: -4px; }
.sp-h { font-size: clamp(1.9rem, 1.05rem + 1.9vw, 2.75rem); }

.sp-side .key { margin: 4px 0 0; font-size: 13px; gap: 6px 16px; }
.sp-tab .sp-line { display: none; }
.sp-tab .sp-role { font-size: 15px; font-weight: 650; letter-spacing: -.005em; text-transform: none; color: var(--fg); }
.sp-tab[aria-selected="true"] .sp-role { color: var(--c); }
.sp-tab { padding: 6px 10px; }
.sp-tab .tile-ic { width: 30px; height: 30px; }
.sp-tabs { gap: 4px; }
@media (min-width: 1024px) { .sp { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: center; } .sp-ph { min-height: 440px; } }
@media (min-width: 1024px) and (max-height: 820px) { .sp-ph { min-height: 380px; } .sp-h { font-size: clamp(1.8rem, 1rem + 1.6vw, 2.4rem); } .sp-tab { padding: 4px 10px; } }
@media (max-width: 1023px) {
  .sp-side { display: contents; }
  .sp-side .ch-kick { order: 1; } .sp-h { order: 2; }  .sp-tabs { order: 4; } .sp-panels { order: 5; } .sp-side .key { order: 6; }
  .sp-tab .sp-role { display: none; }
}
.sp-tab { padding-block: 4px; }
@media (min-width: 1024px) and (max-height: 820px) {  .sp-side { gap: 10px; } .sp-tab .tile-ic { width: 28px; height: 28px; } }
@media (max-width: 639px) { .sp-ph { max-height: 142px; } .sp-b { gap: 8px; } .sp-side .key { font-size: 12.5px; } }
/* Each decision is a note from Retenna (the notification pattern from "A living model of you"): when it acted, what it
   did, and Undo, or Yes / Not now when it waits for you. This replaced the separate key (29 September 2026). */
.sp-note { gap: 6px; padding: 10px 14px 12px; }
.sp-b .sp-note .notif-app { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.sp-note-ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 2px; }
.sp-note-act { display: flex; gap: 6px; }
.sp-note .nbtn { min-height: 28px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
@media (min-width: 1024px) {
  .sp-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  /* Each role shows its one-line promise, so all eight read at a glance without opening each one. */
  .sp-tab { padding-block: 7px; }
  .sp-tab-t { gap: 2px; }
  .sp-tab .sp-line { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--muted); }
}
@media (min-width: 1024px) and (max-height: 820px) { .sp-tab { padding-block: 5px; } }
/* Phones and tablets: the row of roles fades at the edge that has more roles beyond it. */
@media (max-width: 1023px) {
  .sp-tabs { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gut), #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gut), #000 calc(100% - 44px), transparent); }
  .sp-tabs[data-end] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
}
@media (max-width: 639px) and (max-height: 760px) { .sp-ph { max-height: 110px; } .sp-b { gap: 6px; padding-block: 12px 13px; } .sp-b .noticed2 ul { gap: 5px; } .sp-b .noticed2 li { font-size: 13px; } .sp-b .tile-dec p { font-size: 13.5px; } }
@media (max-width: 639px) {
  .fs2 .fs-nowl { display: none; }
  .fs2 .fs-clock { white-space: nowrap; letter-spacing: .06em; }
  .sp-ph { aspect-ratio: auto; height: 142px; max-height: none; }
}
@media (max-width: 639px) and (max-height: 760px) { .sp-ph { height: 110px; } }
@media (min-width: 640px) and (max-width: 1023px) { .sp-ph { aspect-ratio: auto; height: 220px; max-height: none; } }

/* ---------- Questions, easier to scan (29 September 2026) ----------
   Every question starts closed and only one answer is open at a time (details name="faq"), so all seven questions fit
   one screen and opening one never pushes the rest far away. Desktop: the heading, a line and the next steps (early
   access, or email us) stay beside the questions. Phones and tablets: heading, line, questions, then the next steps.
   Full motion: answers slide open where the browser can animate it; otherwise they simply appear. */
.faq { padding: clamp(56px, 9vh, 104px) 0; }
.faq-grid { display: grid; gap: 18px; }
.faq-side { display: grid; gap: 16px; align-content: start; justify-items: start; }
.faq-lede { font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 30em; text-wrap: pretty; }
.faq-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.faq-ask { font-size: 15px; color: var(--muted); }
.faq-ask a { font-weight: 600; }
.faq-list { display: grid; gap: 10px; align-content: start; interpolate-size: allow-keywords; }
.qa { border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s var(--ease); }
.qa:hover { box-shadow: inset 0 0 0 1px var(--line2); }
.qa[open] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 42%, transparent), var(--sh); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 14px 12px 22px; border-radius: 20px; cursor: pointer;
  font-family: "Inter Tight", Inter, sans-serif; font-size: clamp(16.5px, .3vw + 14.5px, 19px); font-weight: 650; letter-spacing: -.012em; line-height: 1.3; color: var(--fg); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline-offset: -2px; border-radius: 20px; }
.qa-q { text-wrap: pretty; }
.qa-ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wash); color: var(--muted);
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .35s var(--ease); }
.qa-ic svg.i { width: 18px; height: 18px; }
.qa summary:hover .qa-ic { background: var(--accent-soft); color: var(--accent-text); }
.qa[open] .qa-ic { transform: rotate(180deg); background: var(--accent); color: var(--bg); }
.qa-a { display: grid; gap: 12px; max-width: calc(64ch + 44px); padding: 0 22px 22px; }
.qa-a p { font-size: 16px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.qa-a ul { display: grid; gap: 10px; }
.qa-a li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.qa-a li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.qa-a li b { color: var(--fg); font-weight: 650; }
html[data-motion="full"] .qa::details-content { block-size: 0; overflow-y: clip; opacity: 0;
  transition: block-size .35s var(--ease), opacity .3s var(--ease), content-visibility .35s allow-discrete; }
html[data-motion="full"] .qa[open]::details-content { block-size: auto; opacity: 1; }
@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .faq-side { position: sticky; top: calc(var(--hdr-h) + 32px); }
}
@media (max-width: 1023px) {
  .faq-side { display: contents; }
  .faq-side .h2 { order: 1; } .faq-lede { order: 2; } .faq-list { order: 3; margin-top: 6px; } .faq-more { order: 4; margin-top: 8px; }
}
@media (max-width: 639px) {
  .faq-lede { font-size: 15.5px; }
  .faq-list { gap: 8px; }
  .qa, .qa summary { border-radius: 18px; }
  .qa summary { min-height: 56px; gap: 12px; padding: 10px 10px 10px 16px; font-size: 16px; }
  .qa-ic { width: 30px; height: 30px; }
  .qa-ic svg.i { width: 16px; height: 16px; }
  .qa-a { padding: 0 16px 18px; gap: 10px; }
  .qa-a p, .qa-a li { font-size: 15px; }
}
.qa-ic { box-shadow: inset 0 0 0 1px var(--line); }
.qa[open] .qa-ic { box-shadow: none; }
@media (max-width: 639px) { .faq { padding: clamp(40px, 7vh, 72px) 0; } }
@media (max-width: 639px) and (max-height: 760px) {
  .faq-lede { display: none; }
  .faq-list { gap: 6px; }
  .qa summary { min-height: 48px; padding-block: 7px; font-size: 15px; }
  .qa-ic { width: 28px; height: 28px; }
}

/* Narrow phones (360 px): keep the model's app chips and the planning panel's top row inside the screen, so the page never scrolls sideways. */
.app { max-width: min(190px, calc(100% - var(--x) - 4px)); }
.app > span { min-width: 0; white-space: normal; }
@media (max-width: 380px) {
  .app { max-width: min(150px, calc(100% - var(--x) - 4px)); gap: 6px; padding: 6px 8px 6px 6px; }
  .app img { height: 26px; }
  .fs2 .fs-top { gap: 6px; }
  .fs2 .fs-clock { letter-spacing: .04em; gap: 5px; }
  .fs2 .fs-lock { padding: 4px 7px; gap: 4px; }
}

/* ---------- "Something's coming up": UX pass (29 September 2026) ----------
   Two numbered steps (pick, then change something), a "What if…" switch in place of the old button and Replay, a panel
   that keeps one height in both states, and a question card whose Yes and Not now work. */
.fs2-n { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 9px; border-radius: 50%; vertical-align: 1px;
  font-size: 11.5px; letter-spacing: 0; color: var(--accent-text); background: var(--accent-soft); }
.fs2 .fs-ctl { display: grid; gap: 8px; }
.fs2 .fs-ctl .scn-k { margin: 0; }
.fs2-what { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 9px 14px 9px 10px; border-radius: 18px; text-align: left; cursor: pointer;
  color: var(--fg); background: var(--surface); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), var(--sh);
  transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.fs2-what > svg.i { width: 38px; height: 38px; padding: 9px; flex: 0 0 auto; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.fs2-what > span { display: grid; flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.fs2-what small { font-size: 12.5px; font-weight: 650; color: var(--accent-text); }
.fs2-what:hover { box-shadow: inset 0 0 0 2px var(--accent), var(--sh); }
.fs2-what:active { transform: scale(.985); }
.fs2-what[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.fs2-what[aria-pressed="true"] > svg.i { color: var(--bg); background: var(--accent); }
/* The switch at the end shows whether the change is on */
.fs2-sw { position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: var(--line2); transition: background-color .2s var(--ease); }
.fs2-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,20,40,.3); transition: transform .25s var(--spring); }
.fs2-what[aria-pressed="true"] .fs2-sw { background: var(--accent); }
.fs2-what[aria-pressed="true"] .fs2-sw::after { transform: translateX(16px); }
@media (min-width: 1280px) { .fs2 { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 40px; } }
/* The panel's top stays put when the change is switched on or off: on desktop it is pinned to the top of the row, and on
   phones and tablets the switch sits above the panel, so the panel only ever grows or shrinks below your finger. */
@media (min-width: 1024px) { .fs2 { align-items: start; } }
@media (max-width: 1023px) {
  .fs2 .fs-ctl { order: 5; } .fs2-panel { order: 6; }
  .fs2-what { max-width: 480px; }
}
/* Room between the checklist and "Now", and between the day labels and the lists below */
@media (min-width: 640px) { .fs2 .fs2-sum { padding-bottom: 12px; } }
.fs2 .fs-body { padding-top: 8px; }
/* Phones: the list stays visible after a change, and the timeline keeps its size */
@media (max-width: 639px) {

  .fs2[data-mode="rain"] .fs-lanes { height: 124px; margin: 20px 0 26px; }
  .fs2 .qcard-done { grid-column: 1 / -1; }
  .fs2 .scn-k { position: static; width: 100%; height: auto; overflow: visible; clip: auto; margin-bottom: 2px; font-size: 11.5px; }
  .fs2 .scn { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .fs2 .scn[data-end] { -webkit-mask-image: none; mask-image: none; }
  .fs2-what { min-height: 54px; }
}
@media (max-width: 699px) and (max-height: 760px) { .fs2[data-mode="rain"] .fs-lanes { height: 96px; margin: 16px 0 22px; } }
/* The question card: Yes and Not now are real buttons; the answer shows with an Undo */
.fs2 .qcard .nbtn { cursor: pointer; transition: filter .15s, background-color .15s; }
.fs2 .qcard .nbtn:hover { filter: brightness(1.06); }
.fs2 .qcard .nbtn:not(.nbtn-p):hover { background: var(--accent-soft); }
.fs2 .qcard .nbtn:active { transform: scale(.97); }
.qcard-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin: 6px 0 0; font-size: 14px; line-height: 1.4; }
.qcard-done[hidden], .qcard-act[hidden], .qcard .badge[hidden] { display: none; }
.qcard-done .arr { color: var(--accent); font-weight: 700; }
.qcard-done .tbtn { min-height: 36px; padding: 0 10px; color: var(--accent-text); }
.fs2 .qcard[data-a="yes"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.fs2 .qcard[data-a="no"] { box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 1024px) and (max-height: 820px) { .fs2 .fs-body { padding-top: 0; } .fs2 .fs-changes li { padding: 3px 0; }  }
.fs2 .qcard .badge { width: auto; justify-self: start; }
.fs2-h .m { display: block; }
@media (min-width: 1024px) { .fs2-h { font-size: clamp(1.9rem, .9rem + 1.5vw, 2.3rem); } }

/* ---------- Less clutter (29 September 2026) ----------
   The panel shows one story at a time: the situation and its count, the timeline, then either the plans ruled out or
   what changed. The chip list, the rules (the next section covers them), the "Now" label, the change note and
   "Stays as it is" are gone; step labels are quiet sentence case and the situations are lighter until chosen. */
.fs2 .scn-k { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.fs2 .scn { gap: 6px; }
.fs2 .scn-opt span { background: transparent; box-shadow: inset 0 0 0 1px var(--line2); }
.fs2 .scn-opt:hover input:not(:checked) + span { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent); }
.fs2 .scn-opt input:checked + span { background: var(--accent); box-shadow: 0 8px 20px -10px rgba(var(--model-rgb), .8); }
.fs2 .fs-ctl { margin-top: 6px; }
.fs2 .fs-nowl { display: none; }
.fs2-panel { padding: 18px 22px 18px; }
.fs2 .fs-top { margin-bottom: 4px; }
.fs2 .fs2-sum { margin-top: 12px; }
.fs2 .fs-k { font-size: 12px; }
.fs2-done { display: grid; gap: 2px; }
.fs2 .fs2-done li { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 10px; padding: 7px 0; border-bottom: 0; }
.fs2 .fs2-done li svg.i { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; padding: 3px; border-radius: 50%; color: var(--accent-text); background: var(--accent-soft); }
@media (min-width: 760px) { .fs2 .fs2-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 28px; } }
@media (max-width: 639px) { .fs2-panel { padding: 14px 14px 12px; } .fs2 .fs2-done li { padding: 5px 0; font-size: 13.5px; } }
.fs2 .fs2-done li > span { min-width: 0; }

/* ---------- Mobile tidy-up (30 September 2026) ----------
   "Pick what's coming up": the options scroll in their own row, so the step label is never clipped and lines up with step 2. */
.scn-set { min-width: 0; margin: 0; padding: 0; border: 0; }
.scn-set > .scn-k { float: none; }
/* Living model, phones and tablets: while the intro plays, the app windows spread over the whole stage (the space the
   cards take once they appear), in three staggered rows, instead of piling up in the thin strip above the cards. */
@media (max-width: 1023px) {
  .mm .lm.is-intro .lm-apps { bottom: 0; height: auto; }
  .mm .lm-apps .app { max-width: min(170px, calc(100% - var(--x) - 4px)); }
  .mm .lm-apps .app:nth-child(1) { --x: 3%; --y: 2%; }
  .mm .lm-apps .app:nth-child(2) { --x: 53%; --y: 6%; }
  .mm .lm-apps .app:nth-child(3) { --x: 51%; --y: 37%; }
  .mm .lm-apps .app:nth-child(4) { --x: 7%; --y: 35%; }
  .mm .lm-apps .app:nth-child(5) { --x: 56%; --y: 70%; }
  .mm .lm-apps .app:nth-child(6) { --x: 1%; --y: 68%; }
  .mm .lm-apps .app:nth-child(7) { display: none; }
}
@media (max-width: 639px) { .fs2 .scn { margin-inline: calc(-1 * var(--gut)); } .ch-think { overflow-x: clip; } } /* the scrolling row reaches the screen edges but starts in line with the text */

/* ---------- The full trailer (2 Oct 2026, built without Claude Design; cut back to the video alone the same day) ----------
   Just the trailer, between "Your rules" and the questions: its still at the page's full width, with a play button and
   the running time. No heading, words or panel; the sections either side give it its space. The whole still is one
   button that opens the overlay player. It is never taller than the screen below the header, so all of it is visible
   at once. Motion (hover zoom, the play button's soft pulse) is full-motion only. */
.trl { padding-block: clamp(4px, 1.5vw, 16px); }
.trl-shot { position: relative; display: block; width: 100%; margin-inline: auto; border-radius: clamp(18px, 2.2vw, 28px); text-align: left;
  max-width: calc((100vh - var(--hdr-h) - 96px) * 1.7778); max-width: calc((100svh - var(--hdr-h) - 96px) * 1.7778);
  -webkit-tap-highlight-color: transparent; }
.trl-shot::before { content: ""; position: absolute; inset: 8% 4% -5%; z-index: -1; border-radius: 48px; background: var(--iris); filter: blur(56px); opacity: .32; pointer-events: none; }
.trl-shot:focus-visible { outline-offset: 6px; border-radius: clamp(18px, 2.2vw, 28px); }
.trl-screen { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: inherit; overflow: hidden; background: var(--film);
  box-shadow: 0 0 0 1px rgba(32,32,69,.1), 0 50px 100px -50px rgba(32,32,69,.55), 0 0 140px -40px rgba(118,87,240,.3); }
@media (prefers-color-scheme: dark) { .trl-screen { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 60px 120px -50px rgba(0,0,0,.95), 0 0 140px -40px rgba(118,87,240,.35); } }
.trl-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.trl-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .3s var(--ease);
  background: radial-gradient(55% 55% at 50% 50%, rgba(11,12,20,.22), rgba(11,12,20,0) 70%), linear-gradient(180deg, rgba(11,12,20,0) 60%, rgba(11,12,20,.24)); }
.trl-play { position: absolute; left: 50%; top: 50%; z-index: 1; translate: -50% -50%; display: inline-flex; align-items: center; gap: 14px;
  height: clamp(56px, 5vw, 72px); padding: 0 24px 0 7px; border-radius: 999px; white-space: nowrap; font-size: clamp(15px, .45vw + 12.5px, 18px); font-weight: 650; color: #F5F3FF;
  background: rgba(15,16,25,.74); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 18px 40px -16px rgba(0,0,0,.65); transition: transform .25s var(--ease), background-color .25s var(--ease); }
.trl-play-i { position: relative; display: grid; place-items: center; height: calc(100% - 14px); aspect-ratio: 1; border-radius: 50%; background: var(--grad); color: #fff; }
.trl-play-i svg.i { width: 38%; height: 38%; margin-left: 6%; }
.trl-play-t { color: rgba(245,243,255,.66); font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-motion="full"] .trl-play-i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(178,154,255,.7); opacity: 0; animation: trl-ping 2.8s var(--ease) 1s infinite; }
@keyframes trl-ping { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.65); } }
.trl-shot:hover .trl-play, .trl-shot:focus-visible .trl-play { background: rgba(15,16,25,.86); }
.trl-shot:hover .trl-screen::after { opacity: .6; }
html[data-motion="full"] .trl-shot:hover .trl-img { transform: scale(1.03); }
html[data-motion="full"] .trl-shot:hover .trl-play { transform: scale(1.04); }
.trl-shot:active .trl-play { transform: scale(.97); }
@media (max-width: 639px) {
  .trl { padding-block: 0 16px; } /* evens the gap between the rules above and the questions below */
  .trl-shot::before { filter: blur(36px); inset: 12% 4% -4%; }
  .trl-play { height: 48px; padding: 0 16px 0 5px; gap: 10px; font-size: 14.5px; } /* phones: the play button and running time only */
  .trl-play-l { display: none; }
}

/* ---------- Review fixes (3 October 2026) ---------- */
/* Consent line under both forms, with the draft notice and terms; "What that means" opens the founding pricing answer */
.join-legal { font-size: 12.5px; line-height: 1.5; text-wrap: pretty; }
.join-legal a, .join-hero-lbl a, .join-offer a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.join-legal a:hover, .join-hero-lbl a:hover, .join-offer a:hover { color: var(--accent-text); }
.join-legal-links, .join-hero-lbl a, .join-offer a { white-space: nowrap; }
.join-final .join-offer { text-wrap: balance; }
.join-hero .join-legal { margin-top: 2px; text-align: center; }
.join-hero-lbl { font-size: 15px; line-height: 1.45; text-wrap: balance; }
.join-hero-lbl a { color: var(--fg); }
.join-final .join-legal { margin: 2px auto 0; text-align: center; max-width: 36em; }
.final .join-legal { color: rgba(245, 243, 255, .8); }
.final .join-offer a:hover, .final .join-legal a:hover { color: #fff; }
#faq-cost { scroll-margin-top: calc(var(--hdr-h) + 16px); }

/* The headline paints at once: the words lift into place without starting invisible */
@keyframes rise-w { from { opacity: .35; transform: translateY(.14em); } }
html[data-motion="full"] .h1 .w { animation: rise-w .7s var(--ease) calc(var(--d) * 40ms) both; }
html[data-motion="full"] .h1 .w.iris { animation: rise-w .7s var(--ease) calc(var(--d) * 40ms) both, iris-sweep 2.4s var(--ease) .4s both; }

/* Phones: the trailer button stays in the header as a round play button (its name is still read out) */
@media (max-width: 720px) {
  .hdr-film { display: inline-flex; justify-content: center; width: 44px; padding: 0; border-radius: 50%; margin-right: 2px; }
  .hdr-film svg.i { width: 32px; height: 32px; padding: 9px; border-radius: 50%; background: rgba(127,127,160,.16); }
  .hdr-film:hover { background: none; } .hdr-film:hover svg.i { background: rgba(127,127,160,.26); }
  .hdr-film span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* "Your rule / What reaches you" labels: the muted ink, for contrast in light mode */
.rl-cols { color: var(--muted); }

/* The example sheet's text can be scrolled from the keyboard */
.sheet-body:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 12px; }

/* Living model: Replay sits at the end of the caption */
.lm-replay { min-height: 36px; padding: 0 10px; margin-left: auto; font-size: 14px; }
.lm-replay[hidden] { display: none; }
@media (max-width: 699px) { .mm .lm { margin-top: 6px; } .mm .lm-foot { flex-wrap: nowrap; } .mm .lm-note { text-wrap: balance; } .mm .lm-replay { min-height: 32px; padding: 0 8px; font-size: 13px; } }

/* Living model on phones and tablets: two cards above the model and two below it, each joined to its point by a line,
   so the constellation keeps its meaning instead of shrinking to a strip above the cards. */
@media (max-width: 1023px) {
  .mm .lm-stage { display: block; position: relative; aspect-ratio: auto; }
  .mm .lm-c { position: absolute; inset: 0; width: 100%; height: 100%; }
  .mm .lm-apps, .mm .lm.is-intro .lm-apps { inset: 0; height: auto; overflow: clip; }
  .mm .lm-cards { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: var(--band, 150px); }
}
@media (max-width: 699px) { .mm .lm-stage { --band: 116px; } }
@media (max-width: 699px) and (max-height: 760px) { .mm .lm-stage { --band: 92px; } }

/* Experts on phones: the role line repeats the chosen tab, so it goes, and the trailer link becomes a small play
   button on the photo. The decision and its buttons now fit the first screen. */
@media (max-width: 639px) {
  .ch-spaces { padding-top: 56px; }
  .sp-panel { position: relative; }
  .sp-b .tile-role { display: none; }
  .sp-b .ch-watch { position: absolute; top: 10px; right: 10px; min-height: 40px; padding: 0 12px 0 8px; gap: 6px; font-size: 0;
    color: var(--fg); background: var(--glass); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: 0 0 0 1px var(--line), 0 8px 20px -10px rgba(15, 16, 25, .5); }
  .sp-b .ch-watch span { margin: 0; font-size: 13.5px; font-weight: 650; color: var(--fg); }
}

/* ======== "See how it decided" button (was in examples.css) ======== */
/* ---------- The button on each panel's photo ---------- */
.sp-ph { position: relative; }
.sp-more { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 8px;
  border-radius: 999px; font-size: 14px; font-weight: 650; color: var(--fg); background: var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 0 0 1px var(--line), 0 8px 20px -10px rgba(15,16,25,.5); cursor: pointer; transition: box-shadow .15s, transform .15s var(--ease); }
.sp-more svg.i { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--c); color: var(--bg); stroke-width: 2.2; }
.sp-more:hover { box-shadow: 0 0 0 1.5px var(--c), 0 10px 24px -10px rgba(15,16,25,.55); }
.sp-more:active { transform: scale(.97); }
html:not(.js) .sp-more { display: none; }
@media (max-width: 639px) {
  .sp-more { left: 10px; bottom: 10px; min-height: 36px; padding: 0 14px 0 6px; font-size: 13.5px; gap: 7px; }
  .sp-more svg.i { width: 24px; height: 24px; padding: 5px; }
}