/* ==========================================================================
   Life OS — life-os.in
   Foundation: tokens, base, primitives, phone + app-mock kit.
   Section styles follow at the bottom, each namespaced .s-<section>.
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-variable.ttf") format("truetype");
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces: one colour per elevation, same as the app */
  --bg: #0a0a0a;
  --bg-deep: #060606;
  --section: #141414;
  --item: #1c1c1c;
  --well: #0f0f0f;

  --line: rgba(255, 255, 255, 0.075);
  --line-2: rgba(255, 255, 255, 0.12);
  --line-3: rgba(255, 255, 255, 0.2);

  --text: #ffffff;
  --text-2: #bfc0c5;
  --text-3: #8b8b94;
  --text-4: #5f5f68;

  /* Accent: themeable (lime default, like the app) */
  --accent: #c8ff00;
  --accent-rgb: 200 255 0;
  --accent-ink: #0a0a0a;
  --space: #070c08;
  --space-rgb: 7 12 8;

  /* Fixed hues: the four app themes, used for card washes */
  --lime: #c8ff00;
  --cyan: #22e5d2;
  --amber: #ffb627;
  --violet: #a98bff;

  --danger: #ff4444;
  --success: #22c55e;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;

  --container: 1140px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(88px, 11vw, 148px);
  --nav-h: 68px;
}

html[data-accent="cyan"] { --accent: #22e5d2; --accent-rgb: 34 229 210; --space: #05090f; --space-rgb: 5 9 15; }
html[data-accent="amber"] { --accent: #ffb627; --accent-rgb: 255 182 39; --space: #0d0804; --space-rgb: 13 8 4; }
html[data-accent="violet"] { --accent: #a98bff; --accent-rgb: 169 139 255; --space: #08060f; --space-rgb: 8 6 15; }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  color-scheme: dark;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color 0.4s var(--ease);
}

img, svg, video, canvas { display: block; max-width: 100%; }
/* The hidden attribute always wins, even over display rules like the one above */
[hidden] { display: none !important; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: rgb(var(--accent-rgb) / 0.85); color: var(--accent-ink); }

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

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

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 13px/1 var(--font-display);
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

/* Faint film grain over everything, like the app's space backdrops */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
  overflow-x: clip; /* decorative glows may bleed past the viewport edge; never let them widen the page */
}

.section-head {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: 760px;
  margin: 0 auto clamp(40px, 6vw, 72px);
  text-align: center;
}
.section-head .lead { max-width: 56ch; }

/* ---------- Type ---------- */
.display-1,
.display-2,
.display-3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  text-wrap: balance;
  font-feature-settings: "ss01" 1;
}
.display-1 {
  font-size: clamp(46px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.048em;
}
.display-2 {
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.042em;
}
.display-3 {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.lead {
  color: var(--text-2);
  font-size: clamp(16px, 1.5vw, 18.5px);
  line-height: 1.6;
}
.body-sm { color: var(--text-3); font-size: 14.5px; line-height: 1.55; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-3);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / 0.7);
}

/* The accent line: the second line of a headline, lit like the app's
   "A lot more you." — gradient ink with a soft glow behind it. */
.glow {
  position: relative;
  display: inline-block;
  color: var(--accent);
  background: linear-gradient(100deg,
    color-mix(in oklab, var(--accent) 70%, #ffffff) 0%,
    var(--accent) 38%,
    color-mix(in oklab, var(--accent) 78%, #1fd8a4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}
.glow::after {
  content: "";
  position: absolute;
  inset: 18% -6% 0;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 0.28), transparent);
  filter: blur(22px);
  pointer-events: none;
}
.accent { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 50px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background-color 0.2s, color 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primary {
  background: linear-gradient(100deg, color-mix(in oklab, var(--accent) 82%, #ffffff) 0%, var(--accent) 42%, color-mix(in oklab, var(--accent) 62%, #3ee6b4) 100%);
  color: var(--accent-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgb(var(--accent-rgb) / 0.5),
    0 10px 34px -10px rgb(var(--accent-rgb) / 0.7);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px rgb(var(--accent-rgb) / 0.7),
    0 16px 44px -10px rgb(var(--accent-rgb) / 0.85);
}

.btn-ghost {
  border: 1px solid var(--line-3);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  color: var(--text);
}
.btn-ghost:hover { border-color: rgb(var(--accent-rgb) / 0.6); color: var(--accent); }

.btn-sm { --btn-h: 40px; padding: 0 18px; font-size: 11.5px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s, gap 0.2s var(--ease);
}
.link-arrow:hover { color: var(--accent); gap: 9px; }

/* ---------- Chips, badges ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.chip svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 0.07);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--muted { border-color: var(--line-3); background: rgba(255, 255, 255, 0.04); color: var(--text-2); }

/* ---------- Cards ---------- */
.card {
  --wash: var(--accent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: #111111;
  background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.055), transparent 42%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 50px -30px rgba(0, 0, 0, 0.8);
}
/* Colour wash pooled at the bottom of the card, like the app's lit horizons */
.card--wash::before {
  content: "";
  position: absolute;
  inset: auto -20% -38% -20%;
  height: 78%;
  z-index: -1;
  background: radial-gradient(60% 60% at 50% 100%, color-mix(in oklab, var(--wash) 55%, transparent), transparent 70%);
  opacity: 0.55;
  filter: blur(8px);
  pointer-events: none;
}
.card__head { display: grid; gap: 6px; padding: 24px 24px 0; }
.card__head .title { color: var(--text); }
.card__head p { color: var(--text-3); font-size: 14.5px; line-height: 1.5; max-width: 40ch; }

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--ease) var(--d, 0s),
    transform 0.9s var(--ease) var(--d, 0s),
    filter 0.9s var(--ease) var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ---------- Announcement bar ---------- */
.announce {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 48px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60% 140% at 50% 0%, rgb(var(--accent-rgb) / 0.12), transparent 70%),
    #0d0d0d;
  color: var(--text-2);
  font-size: 13.5px;
  text-align: center;
}
.announce strong { color: var(--text); font-weight: 600; }
.announce a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--accent-rgb) / 0.4); }
.announce a:hover { text-decoration-color: currentColor; }
.announce__close {
  position: absolute;
  right: 10px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--text-3);
  transform: translateY(-50%);
}
.announce__close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.announce[hidden] { display: none; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
  background: rgb(10 10 10 / 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 20%, rgb(var(--accent-rgb) / 0.35), #141414 70%);
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
  color: var(--accent);
  box-shadow: 0 0 18px rgb(var(--accent-rgb) / 0.18);
}
.brand__mark svg { width: 17px; height: 17px; }
.brand__word {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.brand__word b { color: var(--accent); font-weight: 700; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__links a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 500;
  transition: color 0.2s, background-color 0.2s;
}
.nav__links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav__actions { display: flex; align-items: center; gap: 10px; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  place-items: center;
  color: var(--text);
}
.nav__toggle svg { width: 20px; height: 20px; }

.nav__sheet {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: 49;
  display: grid;
  gap: 4px;
  padding: 16px var(--gutter) 24px;
  border-bottom: 1px solid var(--line);
  background: rgb(10 10 10 / 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav__sheet a:not(.btn) {
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.nav__sheet .btn { margin-top: 14px; }
.nav__sheet[hidden] { display: none; }

@media (max-width: 900px) {
  .nav__links, .nav__actions .btn { display: none; }
  .nav__toggle { display: grid; }
}

/* ---------- Store badge (Google Play) ---------- */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 20px 0 15px;
  border: 1px solid var(--line-3);
  border-radius: 16px;
  background: linear-gradient(160deg, #1a1a1a, #050505);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px -18px rgba(0, 0, 0, 0.9);
  transition: border-color 0.2s, box-shadow 0.25s var(--ease), transform 0.2s var(--ease);
}
.store-badge:hover {
  transform: translateY(-1px);
  border-color: rgb(var(--accent-rgb) / 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 4px rgb(var(--accent-rgb) / 0.08), 0 18px 36px -18px rgb(var(--accent-rgb) / 0.5);
}
.store-badge__logo { width: 26px; height: 28px; flex: none; }
.store-badge__text { display: grid; line-height: 1; text-align: left; }
.store-badge__text small { margin-bottom: 4px; color: #cfcfd4; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.store-badge__text strong { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }

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

/* ---------- Floating controls ---------- */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgb(20 20 20 / 0.85);
  color: var(--text-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s var(--ease), color 0.2s, border-color 0.2s;
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--accent); border-color: rgb(var(--accent-rgb) / 0.5); }
.to-top svg { width: 18px; height: 18px; }

/* ---------- Floating companion ---------- */
.fab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 40;
  display: grid;
  justify-items: start;
  gap: 12px;
}
.fab__button {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border: 1px solid rgb(var(--accent-rgb) / 0.55);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.16), transparent 40%),
    radial-gradient(circle at 50% 95%, rgb(var(--accent-rgb) / 0.32), #141414 72%);
  box-shadow: 0 0 22px rgb(var(--accent-rgb) / 0.25), 0 12px 30px -12px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.fab__button:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 0 30px rgb(var(--accent-rgb) / 0.4), 0 12px 30px -12px rgba(0, 0, 0, 0.9); }
.fab__button .sprite { --size: 64px; margin-top: 6px; }
.fab__card {
  order: -1;
  width: min(300px, calc(100vw - 40px));
  padding: 18px;
  border: 1px solid var(--line-2);
  border-radius: 20px 20px 20px 6px;
  background: rgb(20 20 20 / 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 60px -20px rgba(0, 0, 0, 0.9);
  transform-origin: bottom left;
  animation: fab-in 0.35s var(--ease);
}
.fab__card[hidden] { display: none; }
.fab__card p { color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.fab__card p strong { display: block; margin-bottom: 4px; color: var(--text); font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.fab__card .btn { width: 100%; margin-top: 14px; }
@keyframes fab-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
/* Phones: the floating companion would sit on top of content, so it stays a desktop touch. */
@media (max-width: 600px) { .fab { display: none; } }

/* ---------- Companion sprite ---------- */
.sprite { position: relative; display: block; width: var(--size, 160px); height: var(--size, 160px); }
.sprite canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Static fallback: the idle pose cropped from the 3×4 pose atlas, shown until the canvas is live */
.sprite__pose { position: absolute; inset: 0; overflow: hidden; }
.sprite__pose img { position: absolute; left: 0; top: 0; width: 300%; height: 400%; max-width: none; }
.sprite.is-live .sprite__pose { visibility: hidden; }

/* ==========================================================================
   Phone + app-mock kit
   Mock UI is drawn at "phone scale": the screen is ~300px wide and type is
   the app's own sizes scaled to fit. Shared by every section.
   ========================================================================== */
.phone {
  --pw: 300px;
  position: relative;
  width: var(--pw);
  aspect-ratio: 9 / 19.3;
  padding: 9px;
  border-radius: calc(var(--pw) * 0.16);
  background: linear-gradient(160deg, #2a2a2a, #121212 40%, #0b0b0b);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 0 4px #050505,
    0 50px 100px -40px rgba(0, 0, 0, 0.95),
    0 30px 80px -50px rgb(var(--accent-rgb) / 0.35);
  flex: none;
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--pw) * 0.13);
  background: var(--bg);
  font-family: var(--font-display);
  color: var(--text);
  font-feature-settings: "ss01" 1, "tnum" 1;
  isolation: isolate;
}
.phone__island {
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 5;
  width: 31%;
  height: 22px;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
.phone__status {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.phone__status i { display: inline-flex; gap: 4px; align-items: center; font-style: normal; }
.phone__status i span { display: block; width: 14px; height: 8px; border: 1px solid rgba(255,255,255,.8); border-radius: 3px; position: relative; }
.phone__status i span::after { content: ""; position: absolute; inset: 1px 4px 1px 1px; background: #fff; border-radius: 1px; }
.phone__body { position: relative; z-index: 2; padding: 4px 14px 14px; }

/* Planet backdrop at the top right of an app screen (HeroEarth) */
.app-sky {
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  z-index: 0;
  pointer-events: none;
}
.app-sky img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 0%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, rgba(0, 0, 0, 0.45) 50%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 22%, rgba(0, 0, 0, 0.45) 50%, transparent 86%);
  opacity: 0.85;
}
.app-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--bg) 0%, rgb(10 10 10 / 0.85) 34%, transparent 72%);
}

.app-brand { font-size: 15px; font-weight: 700; letter-spacing: -0.04em; }
.app-brand b { color: var(--accent); }
.app-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #aaa;
  font-size: 7.5px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.app-eyebrow::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.app-h {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.app-h em { font-style: normal; color: var(--accent); display: block; }
.app-sub { color: #bdbdbd; font-size: 9.5px; line-height: 1.5; }
.app-label {
  color: var(--accent);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.app-label--muted { color: #c5c5d0; }
.app-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 16px;
  background-color: rgb(20 20 20 / 0.92);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.06), transparent 42%, rgb(var(--accent-rgb) / 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 12px;
}
.app-card--hero { border-color: rgb(var(--accent-rgb) / 0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 24px -8px rgb(var(--accent-rgb) / 0.35); }
.app-item {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgb(28 28 28 / 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 9px 10px;
}
.app-title { font-size: 14px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; }
.app-meta { color: #9a9aa3; font-size: 7.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.app-metric { font-size: 19px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.app-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #d4d4d8;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.app-pill--accent { border-color: rgb(var(--accent-rgb) / 0.4); background: rgb(var(--accent-rgb) / 0.07); color: var(--accent); }
.app-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid #27272a;
  border-radius: 10px;
  background: #18181b;
  color: #fff;
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.app-btn--primary { border-color: rgb(var(--accent-rgb) / 0.6); color: var(--accent); }
.app-btn--solid { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.app-check {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  flex: none;
  transition: background-color 0.2s, border-color 0.2s;
}
.app-check svg { width: 9px; height: 9px; color: var(--accent-ink); opacity: 0; transform: scale(0.5); transition: 0.2s var(--ease); }
.is-done > .app-check, .app-check.is-done { background: var(--accent); border-color: var(--accent); }
.is-done > .app-check svg, .app-check.is-done svg { opacity: 1; transform: none; }

.app-ring { position: relative; width: var(--ring, 64px); height: var(--ring, 64px); flex: none; }
.app-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.app-ring circle { fill: none; stroke-width: 7; }
.app-ring .track { stroke: rgba(255, 255, 255, 0.08); }
.app-ring .arc {
  stroke: var(--accent);
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgb(var(--accent-rgb) / 0.4));
  transition: stroke-dashoffset 0.6s var(--ease);
}
.app-ring__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.app-ring__label small { display: block; margin-top: 3px; color: #a1a1aa; font-size: 6px; font-weight: 600; letter-spacing: 0.14em; }
.app-ring__label span { color: #a1a1aa; }

/* Dock: the six destinations, companion orb in the middle */
.app-dock {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  min-height: 50px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 26px;
  background: rgb(20 20 20 / 0.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.app-dock span {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 5px 0 3px;
  border-radius: 18px;
  color: #a7a7b0;
  font-size: 5.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.app-dock span svg { width: 13px; height: 13px; stroke-width: 1.7; }
.app-dock span.is-active { color: var(--accent); background: linear-gradient(160deg, rgb(var(--accent-rgb) / 0.17), rgb(var(--accent-rgb) / 0.045)); }
.app-dock .orb {
  justify-self: center;
  width: 44px; height: 44px;
  margin-top: -16px;
  border: 1px solid rgb(var(--accent-rgb) / 0.7);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.18), transparent 38%),
    radial-gradient(circle at 50% 90%, rgb(var(--accent-rgb) / 0.34), #141414 72%);
  box-shadow: 0 0 14px rgb(var(--accent-rgb) / 0.25);
  overflow: hidden;
}
.app-dock .orb img { width: 120%; max-width: none; margin: 4% -10% 0; }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 72px 0 40px;
  background: linear-gradient(to bottom, #0b0b0b, var(--bg-deep));
}
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding: 48px 0;
}
.footer__col h3 {
  margin-bottom: 16px;
  color: var(--text-4);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer__col ul { display: grid; gap: 10px; }
.footer__col a { color: var(--text-2); font-size: 14.5px; transition: color 0.2s; }
.footer__col a:hover { color: var(--accent); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--text-4);
  font-size: 13.5px;
}
.footer__bottom a { color: var(--text-3); }
.footer__bottom a:hover { color: var(--accent); }
.footer__accent { display: flex; align-items: center; gap: 10px; }

@media (max-width: 760px) {
  .footer__top { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Accent swatches (theme picker) ---------- */
.swatches { display: inline-flex; gap: 8px; }
.swatch {
  --c: var(--lime);
  position: relative;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--c) 60%, #fff), var(--c) 55%, color-mix(in oklab, var(--c) 55%, #000));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c), 0 0 16px var(--c); }
.swatch[data-accent-set="cyan"] { --c: var(--cyan); }
.swatch[data-accent-set="amber"] { --c: var(--amber); }
.swatch[data-accent-set="violet"] { --c: var(--violet); }

/* Off-screen sections pause their infinite loops (marquees, twinkles, pings) */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

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

/* ==========================================================================
   SECTIONS
   ========================================================================== */
/* ---------- hero ---------- */
/* Hero: copy left, live Today screen right. Mobile-first; two columns from 960px. */
.s-hero {
  display: grid;
  align-items: center;
  min-height: calc(100vh - var(--nav-h) - 40px);
  min-height: calc(100svh - var(--nav-h) - 40px);
  padding-block: clamp(20px, 3vw, 32px) clamp(72px, 9vw, 112px);
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}

.s-hero__grid {
  position: relative;
  display: grid;
  align-items: center;
  gap: clamp(24px, 5vw, 40px);
}

/* ---------- Copy ---------- */
.s-hero__copy {
  display: grid;
  justify-items: center;
  text-align: center;
}

.s-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 5px 15px 5px 6px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}
.s-hero__faces { display: flex; flex: none; }
.s-hero__faces > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #121212;
}
.s-hero__faces > span + span { margin-left: -6px; }
.s-hero__faces > span:nth-child(1) { background: var(--accent); color: var(--accent-ink); }
.s-hero__faces > span:nth-child(2) { background: color-mix(in oklab, var(--accent) 28%, #161616); color: var(--accent); }
.s-hero__faces > span:nth-child(3) {
  background: #1d1d1d;
  color: var(--accent);
  box-shadow: 0 0 0 2px #121212, inset 0 0 0 1px rgb(var(--accent-rgb) / 0.4);
}
.s-hero__faces svg { width: 11px; height: 11px; }

.s-hero .s-hero__title {
  margin-top: 22px;
  font-size: clamp(44px, 5.6vw, 78px);
}
.s-hero__line { display: inline-block; vertical-align: top; }

.s-hero__lead { max-width: 46ch; margin-top: 22px; }

.s-hero__cta { justify-content: center; margin-top: 32px; }

.s-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  margin-top: 26px;
}
.s-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.4;
}
.s-hero__facts li { display: inline-flex; align-items: center; gap: 7px; }
.s-hero__facts svg { width: 15px; height: 15px; flex: none; color: rgb(var(--accent-rgb) / 0.85); }
.s-hero__how { padding-block: 10px; margin-block: -10px; }
.s-hero__how svg { width: 15px; height: 15px; }

/* ---------- Stage: bloom, starfield, phone ---------- */
.s-hero__stage {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 84px 0 76px;
}
.s-hero__stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 48%;
  width: min(1100px, 200%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgb(var(--accent-rgb) / 0.26),
    rgb(var(--accent-rgb) / 0.1) 34%,
    rgb(var(--accent-rgb) / 0.035) 58%,
    transparent 78%);
  pointer-events: none;
}
.s-hero__stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6% -30% 0;
  background-image:
    radial-gradient(circle at 24px 36px, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 168px 104px, rgba(255, 255, 255, 0.55) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 92px 196px, rgba(255, 255, 255, 0.65) 0 1px, transparent 1.6px),
    radial-gradient(circle at 236px 228px, rgb(var(--accent-rgb) / 0.8) 0 1px, transparent 1.8px),
    radial-gradient(circle at 60px 132px, rgba(255, 255, 255, 0.4) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 300px 40px, rgba(255, 255, 255, 0.6) 0 1.2px, transparent 2px);
  background-size: 260px 260px, 260px 260px, 260px 260px, 330px 290px, 330px 290px, 410px 380px;
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent);
  mask-image: radial-gradient(closest-side, #000 25%, transparent);
  opacity: 0.55;
  pointer-events: none;
  animation: s-hero-twinkle 5s ease-in-out infinite alternate;
}

.s-hero__device {
  position: relative;
  animation: s-hero-rise 1.5s var(--ease) 0.4s both;
}

/* Tilt: resting angle, eased toward flat on hover/focus/hold; --mx/--my come from the pointer (JS). */
.s-hero__phone {
  --pw: 300px;
  --ry: -12deg;
  --rx: 5deg;
  transform: perspective(1600px) rotateY(calc(var(--ry) + var(--mx, 0) * 7deg)) rotateX(calc(var(--rx) - var(--my, 0) * 5deg));
  transition: transform 1.1s var(--ease);
}
.s-hero__device:hover .s-hero__phone,
.s-hero__phone:focus-within,
.s-hero__stage.is-holding .s-hero__phone { --ry: -3deg; --rx: 1.5deg; }

.s-hero__sprite {
  --size: 96px;
  position: absolute;
  z-index: 8;
  top: calc(var(--size) * -0.72);
  right: calc(var(--size) * -0.26);
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

/* ---------- Today screen ---------- */
.s-hero__body { display: grid; gap: 8px; }
.s-hero__top { display: flex; align-items: center; justify-content: space-between; }
.s-hero__bell {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgb(18 18 18 / 0.7);
  color: #d4d4d8;
}
.s-hero__bell svg { width: 12px; height: 12px; }
.s-hero__greet { margin: 2px 0 4px; }

.s-hero__mission { display: flex; align-items: center; gap: 10px; }
.s-hero__mtext { display: grid; gap: 3px; flex: 1; min-width: 0; }
.s-hero__mmeta { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.s-hero__mmeta svg { width: 8px; height: 8px; }
.s-hero__next { font-size: 12.5px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; }
.s-hero__ring { --ring: 58px; }
.s-hero__ring circle { stroke-width: 5; }

.s-hero__action {
  display: grid;
  gap: 4px;
  padding: 11px 12px 9px;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.s-hero__ahead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s-hero__atitle { margin-top: 3px; font-size: 17px; transition: color 0.4s var(--ease); }
.s-hero__ameta b { color: #e4e4e7; font-weight: 700; }
.s-hero__btns { display: flex; gap: 6px; margin-top: 6px; }

/* The one real control in the mock */
.s-hero__hold {
  flex: 1;
  min-height: 38px;
  overflow: visible;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: border-color 0.2s, background-color 0.3s;
}
.s-hero__hold::after { content: ""; position: absolute; inset: -4px -3px; }
.s-hero__hold:hover { border-color: var(--accent); }
.s-hero__hold svg,
.s-hero__focus svg { width: 11px; height: 11px; flex: none; }
.s-hero__focus { flex: none; min-height: 38px; padding: 0 11px; }

.s-hero__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: inherit;
  backface-visibility: hidden;
  transition: transform 0.55s var(--ease), opacity 0.35s var(--ease);
}
/* Accent copy of the label, revealed left to right by --p (0..1) */
.s-hero__ink {
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 80%, #ffffff), var(--accent));
  color: var(--accent-ink);
  clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0);
  transition: clip-path 0.45s var(--ease), transform 0.55s var(--ease), opacity 0.35s var(--ease);
}
.s-hero__hold.is-holding .s-hero__ink { transition: none; }
.s-hero__face--done { color: var(--accent-ink); opacity: 0; transform: perspective(240px) rotateX(-90deg); }

.s-hero__when-done { display: none; }
.s-hero__stage.is-done .s-hero__when-idle { display: none; }
.s-hero__stage.is-done .s-hero__when-done { display: inline; }
.s-hero__stage.is-done .s-hero__hold { border-color: var(--accent); background: var(--accent); cursor: default; }
.s-hero__stage.is-done .s-hero__face:not(.s-hero__face--done) { opacity: 0; transform: perspective(240px) rotateX(90deg); }
.s-hero__stage.is-done .s-hero__face--done { opacity: 1; transform: none; }
.s-hero__stage.is-done .s-hero__atitle {
  color: #a1a1aa;
  text-decoration: line-through;
  text-decoration-color: rgb(var(--accent-rgb) / 0.7);
  text-decoration-thickness: 1.5px;
}
.s-hero__stage.is-done .s-hero__action {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 34px -6px rgb(var(--accent-rgb) / 0.55);
  animation: s-hero-done 0.7s var(--ease);
}

.s-hero__just {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 4px;
  color: #8b8b94;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-transform: uppercase;
}
.s-hero__just svg { width: 8px; height: 8px; }

.s-hero__pulse { padding: 10px 10px 9px; }
.s-hero__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-hero__tile { display: grid; justify-items: center; gap: 4px; padding: 2px 0; text-align: center; }
.s-hero__tile + .s-hero__tile { border-left: 1px solid rgba(255, 255, 255, 0.07); }
.s-hero__v {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  transition: color 0.4s;
}
.s-hero__v svg { width: 11px; height: 11px; color: var(--accent); }
.s-hero__stage.is-done .s-hero__xp { color: var(--accent); }
.s-hero__k {
  color: #9a9aa3;
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}
.s-hero__k b { color: var(--text); }
.s-hero__pips { gap: 3px; }
.s-hero__pips i { display: block; width: 6px; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.s-hero__pips i.is-on { background: var(--accent); box-shadow: 0 0 6px rgb(var(--accent-rgb) / 0.55); }
.s-hero__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.s-hero__bar { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.s-hero__bar i { display: block; width: 44.4%; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.8s var(--ease); }
.s-hero__stage.is-done .s-hero__bar i { width: 55.6%; }

.s-hero__dock { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.s-hero__dock .orb { position: relative; width: 38px; height: 38px; margin-top: -14px; padding: 0; }
.s-hero__dock .orb img { position: absolute; left: 0; top: 0; width: 300%; height: 400%; max-width: none; margin: 0; }

.s-hero__toast {
  position: absolute;
  z-index: 9;
  top: 50px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 9px;
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  border-radius: 999px;
  background: rgb(14 14 14 / 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.9), 0 0 26px -8px rgb(var(--accent-rgb) / 0.6);
  color: var(--text-2);
  font: 600 12px/1 var(--font-display);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -12px) scale(0.96);
  transition: opacity 0.3s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.s-hero__toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.s-hero__toast b { color: var(--accent); font-weight: 700; }
.s-hero__toast svg { width: 13px; height: 13px; color: var(--accent); }

/* ---------- Floating glass cards ---------- */
.s-hero__float {
  position: absolute;
  z-index: 10;
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015) 60%), rgb(16 16 16 / 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 24px 50px -22px rgba(0, 0, 0, 0.95);
  font-family: var(--font-display);
  animation:
    s-hero-pop 0.8s var(--ease) var(--d, 1.2s) both,
    s-hero-bob 8s ease-in-out calc(var(--d, 1.2s) + 1s) infinite;
}
.s-hero__ftag {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.s-hero__fico {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  border-radius: 7px;
  background: rgb(var(--accent-rgb) / 0.14);
  color: var(--accent);
}
.s-hero__fico svg { width: 11px; height: 11px; }
.s-hero__fico--lg { width: 34px; height: 34px; border-radius: 11px; }
.s-hero__fico--lg svg { width: 17px; height: 17px; }
.s-hero__fline { color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.s-hero__fstack { display: grid; }

.s-hero__float--mode { top: 214px; right: calc(100% - 10px); }
.s-hero__float--week { bottom: 92px; right: calc(100% - 30px); width: 214px; }
.s-hero__float--week .s-hero__fline { color: var(--text-2); font-size: 13px; font-weight: 500; }
.s-hero__float--shield { top: 118px; left: calc(100% - 64px); display: flex; align-items: center; gap: 10px; }
.s-hero__float--shield .s-hero__fline { white-space: nowrap; }

.s-hero__days { display: flex; gap: 6px; }
.s-hero__days li {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: var(--text-3);
  font-size: 9px;
  font-weight: 700;
}
.s-hero__days li.is-on { border-color: rgb(var(--accent-rgb) / 0.5); background: rgb(var(--accent-rgb) / 0.16); color: var(--accent); }
.s-hero__days li.is-today { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.55); }
.s-hero__pips--card { display: flex; margin-top: 6px; }
.s-hero__pips--card i { width: 16px; height: 4px; }

/* ---------- Hint + reset (left of the phone on wide screens, under it on phones) ---------- */
.s-hero__hint {
  position: absolute;
  z-index: 11;
  top: 340px;
  right: calc(100% - 34px);
  display: grid;
  justify-items: start;
  width: 156px;
  color: var(--text-2);
  font: 600 16px/1.1 var(--font-display);
  letter-spacing: -0.02em;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.s-hero__hint span { white-space: nowrap; transform: rotate(-5deg); }
.s-hero__hint svg { width: 100px; height: 60px; margin: 2px 0 0 52px; color: rgb(var(--accent-rgb) / 0.9); }
.s-hero__stage.is-done .s-hero__hint { opacity: 0; }

.s-hero__again {
  --btn-h: 44px;
  position: absolute;
  z-index: 11;
  top: 352px;
  right: calc(100% + 16px);
}
.s-hero__again[hidden] { display: none; }
.s-hero__again:not([hidden]) { animation: s-hero-in 0.5s var(--ease) 0.25s both; }

/* ---------- Horizon: a wide planet rim that hands off to the next section ---------- */
.s-hero__horizon {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: max(900px, 150%);
  height: clamp(200px, 24vw, 320px);
  transform: translateX(-50%);
  background:
    radial-gradient(50% 120% at 50% 120%,
      var(--bg) 79.4%,
      rgb(var(--accent-rgb) / 0.6) 80%,
      rgb(var(--accent-rgb) / 0.16) 81.6%,
      rgb(var(--accent-rgb) / 0.05) 87%,
      transparent 95%),
    radial-gradient(34% 90% at 50% 100%, rgb(var(--accent-rgb) / 0.12), transparent 70%);
  pointer-events: none;
}

/* ---------- Load sequence ---------- */
.s-hero__in { animation: s-hero-in 0.9s var(--ease) var(--d, 0s) both; }
.s-hero .glow::after { animation: s-hero-bloom 1.8s var(--ease) 0.55s both; }

@keyframes s-hero-in { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } }
@keyframes s-hero-bloom { from { opacity: 0; transform: scale(0.3); } }
@keyframes s-hero-rise {
  from { opacity: 0; transform: perspective(1600px) translateY(90px) rotateX(20deg) rotateY(-16deg) scale(0.94); }
}
@keyframes s-hero-pop { from { opacity: 0; transform: translateY(16px) scale(0.85); } }
@keyframes s-hero-bob { 50% { transform: translateY(-7px); } }
@keyframes s-hero-twinkle { to { opacity: 0.9; } }
@keyframes s-hero-done { 40% { transform: scale(1.025); } }

/* ---------- Phones: smaller device, one floating card, hint under the phone ---------- */
@media (max-width: 639px) {
  .s-hero__pill { padding-right: 13px; border-radius: 18px; font-size: 12.5px; }
  .s-hero__phone { zoom: 0.9; }
  .s-hero__float--week,
  .s-hero__float--shield { display: none; }
  .s-hero__float--mode { top: -70px; left: -6px; right: auto; gap: 4px; padding: 9px 12px; }
  .s-hero__float--mode .s-hero__ftag { font-size: 8.5px; }
  .s-hero__float--mode .s-hero__fline { font-size: 12.5px; }
  .s-hero__hint {
    top: calc(100% + 18px);
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: fit-content;
    margin-inline: auto;
    font-size: 15px;
  }
  .s-hero__hint svg { width: 46px; height: 28px; margin: 0 0 4px; transform: rotate(-90deg); }
  .s-hero__again { top: calc(100% + 12px); left: 0; right: 0; width: fit-content; margin-inline: auto; }
}

@media (min-width: 640px) {
  .s-hero__stage { padding: 80px 0 40px; }
}

@media (min-width: 960px) {
  .s-hero__grid { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: 24px; }
  .s-hero__copy { justify-items: start; text-align: left; }
  .s-hero__cta,
  .s-hero__meta,
  .s-hero__facts { justify-content: flex-start; }
  .s-hero__stage { padding: 76px 0 20px; }
}

/* Narrow desktops: no room right of the phone, so it hugs the right edge and the shield card sits out. */
@media (min-width: 960px) and (max-width: 1199px) {
  .s-hero__stage { justify-items: end; padding-right: 28px; }
  .s-hero__float--shield { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .s-hero__in,
  .s-hero__device,
  .s-hero__float,
  .s-hero__again:not([hidden]),
  .s-hero__stage::after,
  .s-hero .glow::after,
  .s-hero__stage.is-done .s-hero__action { animation: none; }
}

/* Pill copy: a shorter line on narrow phones so it stays on one row */
.s-hero .s-hero__pill-short { display: none; }
@media (max-width: 419px) {
  .s-hero .s-hero__pill-long { display: none; }
  .s-hero .s-hero__pill-short { display: inline; white-space: nowrap; }
}

/* Narrow tablets: no room beside the phone, so behave like phones (one card, above the phone) */
@media (min-width: 640px) and (max-width: 799px) {
  .s-hero__float--week,
  .s-hero__float--shield { display: none; }
  .s-hero__float--mode { top: -70px; left: -6px; right: auto; }
}
/* Wide tablets: the phone is centred with room on both sides, so the cards sit fully outside it */
@media (min-width: 800px) and (max-width: 959px) {
  .s-hero__float--mode { right: calc(100% + 8px); }
  .s-hero__float--week { right: calc(100% + 8px); }
  .s-hero__float--shield { left: calc(100% + 8px); }
}

/* ---------- builtfor ---------- */
/* Built-for strip: Blitzit's logo marquee, but with the things students actually juggle. */
.s-builtfor { padding-block: 48px; }

.s-builtfor__title {
  margin-bottom: 24px;
  color: var(--text-3);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ponytail: rows stay narrower than one list so the duplicate always covers the loop seam. */
.s-builtfor__rows {
  display: grid;
  gap: 12px;
  max-width: 1040px;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.s-builtfor__row { overflow: hidden; padding-block: 2px; }
.s-builtfor__track {
  display: flex;
  width: max-content;
  animation: s-builtfor-marquee 40s linear infinite;
}
.s-builtfor__row--rev .s-builtfor__track { animation-duration: 44s; animation-direction: reverse; }
.s-builtfor__row:hover .s-builtfor__track,
.s-builtfor__rows:focus-within .s-builtfor__track,
.s-builtfor.is-paused .s-builtfor__track { animation-play-state: paused; }

.s-builtfor__list { display: flex; gap: 12px; padding-right: 12px; }
.s-builtfor .chip {
  min-height: 42px;
  gap: 10px;
  padding: 6px 16px 6px 7px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)), #0e0e0e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text-2);
  font-size: 14px;
}
.s-builtfor__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  border-radius: 50%;
  background: rgb(var(--accent-rgb) / 0.08);
}
.s-builtfor .chip svg { width: 14px; height: 14px; }

.s-builtfor__ctrl { display: flex; justify-content: center; margin-top: 14px; }
.s-builtfor__toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--text-3);
  transition: color 0.2s;
}
.s-builtfor__toggle::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: border-color 0.2s;
}
.s-builtfor__toggle:hover { color: var(--text); }
.s-builtfor__toggle:hover::before { border-color: var(--line-3); }
.s-builtfor__toggle svg { width: 12px; height: 12px; }
.s-builtfor__toggle[aria-pressed="true"] .s-builtfor__i-pause,
.s-builtfor__toggle[aria-pressed="false"] .s-builtfor__i-play { display: none; }

@keyframes s-builtfor-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .s-builtfor__rows { padding-inline: var(--gutter); -webkit-mask-image: none; mask-image: none; }
  .s-builtfor__track { width: auto; animation: none; }
  .s-builtfor__list { flex: 1; flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .s-builtfor__list[aria-hidden="true"],
  .s-builtfor__ctrl { display: none; }
}

/* ---------- how ---------- */
/* How a day works: step tabs + stage with one phone per step */
.s-how__demo {
  position: relative;
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
}
.s-how__demo::before {
  content: "";
  position: absolute;
  inset: 12% 8% -6%;
  z-index: -1;
  background: radial-gradient(50% 50% at 60% 55%, rgb(var(--accent-rgb) / 0.13), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

/* ---------- Tabs ---------- */
.s-how__tabs {
  position: relative;
  display: flex;
  gap: 6px;
  margin-inline: calc(var(--gutter) * -1);
  padding: 6px var(--gutter) 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.s-how__tabs::-webkit-scrollbar { display: none; }

.s-how__tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-3);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  scroll-snap-align: center;
  transition: color 0.25s, background-color 0.25s, border-color 0.25s, box-shadow 0.3s var(--ease);
}
/* centred when the row fits, scrollable from the first tab when it does not */
.s-how__tab:first-child { margin-left: auto; }
.s-how__tab:last-child { margin-right: auto; }
.s-how__tab:hover { color: var(--text-2); }
.s-how__tab-k { transition: color 0.25s; }

.s-how__tab[aria-selected="true"] {
  color: var(--text);
  border-color: var(--line-2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    #151515;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 22px -12px rgb(var(--accent-rgb) / 0.55);
}
.s-how__tab[aria-selected="true"] .s-how__tab-k { color: var(--accent); }

/* Progress bar along the bottom edge of the active pill */
.s-how__tab-bar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity 0.3s;
}
.s-how__tab-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.55), var(--accent));
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / 0.9);
  transform: scaleX(0);
  transform-origin: left center;
}
.s-how.is-auto .s-how__tab[aria-selected="true"] .s-how__tab-bar { opacity: 1; }
/* longhands, so the paused rule below can win on play-state alone */
.s-how.is-auto .s-how__tab[aria-selected="true"] .s-how__tab-bar i {
  animation-name: s-how-fill;
  animation-duration: 7s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.s-how:not(.is-running) .s-how__tab-bar i { animation-play-state: paused; }

@keyframes s-how-fill { to { transform: scaleX(1); } }

/* ---------- Stage ---------- */
.s-how__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 28px;
  background:
    radial-gradient(46% 62% at 76% 64%, rgb(var(--accent-rgb) / 0.2), transparent 72%),
    radial-gradient(60% 50% at 18% 0%, rgba(255, 255, 255, 0.045), transparent 70%),
    linear-gradient(180deg, #101110, #090909);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.015),
    0 50px 120px -60px rgb(var(--accent-rgb) / 0.4),
    0 40px 90px -50px rgba(0, 0, 0, 0.95);
}
/* lit top hairline */
.s-how__stage::after {
  content: "";
  position: absolute;
  inset: 0 12% auto;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / 0.55), transparent);
  pointer-events: none;
}

/* Background art, recoloured to the current accent */
.s-how__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  isolation: isolate;
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(100deg, transparent 18%, rgba(0, 0, 0, 0.55) 46%, #000 72%);
  mask-image: linear-gradient(100deg, transparent 18%, rgba(0, 0, 0, 0.55) 46%, #000 72%);
  pointer-events: none;
}
.s-how__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 35%;
  filter: grayscale(1) contrast(1.1);
}
.s-how__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: color;
}

/* ---------- Panels (stacked in one grid cell so the stage never jumps) ---------- */
.s-how__panels {
  position: relative;
  z-index: 1;
  display: grid;
}
.s-how__panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 5vw, 88px);
  padding: clamp(28px, 4.4vw, 56px) clamp(28px, 6vw, 84px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 0.35s var(--ease),
    transform 0.5s var(--ease),
    visibility 0s linear 0.35s;
}
.s-how__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.6s var(--ease) 0.06s,
    transform 0.7s var(--ease) 0.06s,
    visibility 0s;
}
.s-how__panel:focus-visible { outline-offset: -8px; border-radius: 22px; }

/* staggered entrance of the copy, the phone and the mock rows */
.s-how__in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
}
.s-how__panel.is-active .s-how__in { opacity: 1; transform: none; transition-delay: calc(0.1s + var(--k, 0) * 0.07s); }
.s-how__copy > :nth-child(2) { --k: 1; }
.s-how__copy > :nth-child(3) { --k: 2; }
.s-how__copy > :nth-child(4) { --k: 3; }
.s-how__device { --k: 1; }

.s-how__rise {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
}
.s-how__panel.is-active .s-how__rise { opacity: 1; transform: none; transition-delay: calc(0.32s + var(--i, 0) * 0.06s); }

/* ---------- Copy ---------- */
.s-how__copy {
  display: grid;
  justify-items: start;
  gap: 16px;
  max-width: 440px;
}
.s-how__h {
  font-size: clamp(28px, 3.3vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.04em;
}
.s-how__p {
  color: var(--text-2);
  font-size: clamp(15.5px, 1.3vw, 17px);
  line-height: 1.6;
}
.s-how__facts {
  display: grid;
  gap: 10px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  justify-self: stretch;
}
.s-how__facts li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
}
.s-how__facts li > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid rgb(var(--accent-rgb) / 0.42);
  border-radius: 50%;
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--accent);
}
.s-how__facts svg { width: 12px; height: 12px; }

/* ---------- Device ---------- */
.s-how__device {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
}
.s-how__device::before {
  content: "";
  position: absolute;
  inset: 14% -18%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 0.26), transparent);
  filter: blur(34px);
}
.s-how__phone { --pw: 290px; }

/* ===== Phone screens (drawn at phone scale, aria-hidden) ===== */
.s-how__body {
  display: flex;
  flex-direction: column;
  height: calc(100% - 40px);
  padding: 6px 15px 16px;
}
.s-how__body svg { width: 12px; height: 12px; flex: none; }
.s-how__glyph svg,
.s-how__type svg,
.s-how__sound svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s-how__sec {
  margin: 13px 0 7px;
  color: #9a9aa3;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.s-how__round {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: #1a1a1a;
  color: #d4d4d8;
}

/* Step 1 · mood check */
.s-how__mh {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.s-how__msub { margin-top: 6px; }
.s-how__moods { display: grid; gap: 6px; margin-top: 14px; }
.s-how__mood {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 10px 7px 7px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  background: rgb(24 24 24 / 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.s-how__mood.is-picked {
  border-color: rgb(var(--accent-rgb) / 0.7);
  background: linear-gradient(115deg, rgb(var(--accent-rgb) / 0.13), rgb(var(--accent-rgb) / 0.03) 62%), #151515;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 22px -8px rgb(var(--accent-rgb) / 0.55);
}
.s-how__glyph {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  background: #222224;
  color: #d4d4d8;
}
.s-how__glyph svg { width: 15px; height: 15px; }
.s-how__mood.is-picked .s-how__glyph { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.s-how__mtext { display: grid; gap: 2px; min-width: 0; }
.s-how__mtext b { font-size: 8.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.s-how__mtext small { color: #a1a1aa; font-family: var(--font-body); font-size: 8.5px; line-height: 1.3; }
.s-how__tick {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}
.s-how__tick svg { width: 9px; height: 9px; }
.s-how__cta { margin-top: auto; min-height: 38px; }

/* Step 2 · plan sheet */
.s-how__plan {
  height: calc(100% - 46px);
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, #161616, #0e0e0e 40%);
  box-shadow: 0 -18px 40px -20px rgb(var(--accent-rgb) / 0.25);
}
.s-how__grab {
  align-self: center;
  width: 34px;
  height: 4px;
  margin: 0 0 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
}
.s-how__sheethead { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.s-how__sheet-h { margin-top: 3px; font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: -0.035em; }
.s-how__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 12px; }
.s-how__stats span {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 7px 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: #141515;
}
.s-how__stats b { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.s-how__stats small { color: #8b8b94; font-size: 5.5px; font-weight: 700; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; }
.s-how__types { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.s-how__type {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  background: #161616;
  color: #d4d4d8;
  font-size: 8.5px;
  font-weight: 600;
  white-space: nowrap;
}
.s-how__type.is-on {
  border-color: rgb(var(--accent-rgb) / 0.6);
  background: rgb(var(--accent-rgb) / 0.1);
  color: var(--accent);
  box-shadow: 0 0 14px -6px rgb(var(--accent-rgb) / 0.6);
}

.s-how__tl {
  --hr: 18px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 4px;
  padding-top: 5px;
}
.s-how__hours { position: relative; height: calc(16 * var(--hr)); }
.s-how__hours li {
  position: absolute;
  top: calc(var(--t) * var(--hr));
  left: 0;
  color: #71717a;
  font-size: 6px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transform: translateY(-50%);
}
.s-how__track {
  position: relative;
  height: calc(16 * var(--hr));
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px calc(var(--hr) * 2));
}
.s-how__busy {
  position: absolute;
  top: calc(var(--t) * var(--hr));
  left: 6px;
  right: 0;
  height: calc(var(--len) * var(--hr));
  display: grid;
  place-content: center;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.055) 0 4px, transparent 4px 9px),
    rgb(20 20 20 / 0.9);
  color: #a1a1aa;
  font-size: 7.5px;
  font-weight: 600;
  text-align: center;
}
.s-how__busy b { color: #e4e4e7; font-weight: 700; }
.s-how__op {
  position: absolute;
  top: calc(var(--t) * var(--hr) + 1px);
  left: 6px;
  right: 0;
  height: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: #1c1c1e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 7.5px;
  font-weight: 600;
  white-space: nowrap;
}
.s-how__op span { overflow: hidden; text-overflow: ellipsis; }
.s-how__op em { margin-left: auto; color: #8b8b94; font-size: 6.5px; font-style: normal; font-weight: 600; }
.s-how__op.is-moved {
  border-color: rgb(var(--accent-rgb) / 0.55);
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.12), #1c1c1e 70%);
  box-shadow: 0 0 14px -6px rgb(var(--accent-rgb) / 0.7);
}
.s-how__op.is-moved em { color: var(--accent); }
.s-how__grip {
  width: 5px;
  height: 8px;
  flex: none;
  background-image: radial-gradient(circle, #8b8b94 0.8px, transparent 1.1px);
  background-size: 2.5px 2.7px;
}
.s-how__now {
  position: absolute;
  top: calc(var(--t) * var(--hr));
  left: -3px;
  right: 0;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.8);
}
.s-how__now::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.s-how__now span {
  position: absolute;
  right: 0;
  top: 50%;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 5.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

/* Step 3 · focus */
.s-how__focus {
  background: radial-gradient(110% 46% at 50% 30%, rgb(var(--accent-rgb) / 0.12), transparent 70%);
}
.s-how__fhead { display: flex; align-items: center; gap: 9px; }
.s-how__fhead > div { display: grid; gap: 2px; }
.s-how__fhead b { font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.s-how__fhead small { color: #a1a1aa; font-size: 8px; }
.s-how__uni {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--accent);
  font-size: 5.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-align: right;
  text-transform: uppercase;
}
.s-how__uni svg { width: 11px; height: 11px; }

.s-how__ring {
  position: relative;
  width: 188px;
  aspect-ratio: 1;
  margin: 16px auto 4px;
}
.s-how__ring > svg { width: 100%; height: 100%; }
.s-how__ring circle { fill: none; }
.s-how__ring-edge { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.s-how__ring-ticks { stroke: rgba(255, 255, 255, 0.16); stroke-width: 3; stroke-dasharray: 1 8.53; }
.s-how__ring-track { stroke: rgba(255, 255, 255, 0.07); stroke-width: 10; }
.s-how__ring-arc {
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 502.65;
  stroke-dashoffset: calc(502.65px * (1 - var(--p, 1)));
  filter: drop-shadow(0 0 6px rgb(var(--accent-rgb) / 0.55));
  transition: stroke-dashoffset 1s linear;
}
.s-how__ring-dot {
  transform: rotate(calc(var(--p, 1) * 360deg));
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform 1s linear;
}
.s-how__ring .s-how__ring-dot circle { fill: #ffffff; }
.s-how__ring .s-how__ring-dot .s-how__ring-halo { fill: rgb(var(--accent-rgb) / 0.35); }
.s-how__ring-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  text-align: center;
}
.s-how__ring-core small { color: var(--accent); font-size: 6.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.s-how__ring-core b { font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.s-how__ring-core span { color: #a1a1aa; font-size: 6.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.s-how__sdots { display: inline-flex; gap: 3px; margin-top: 4px; }
.s-how__sdots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.s-how__sdots i.is-on { background: var(--accent); box-shadow: 0 0 6px rgb(var(--accent-rgb) / 0.8); }

.s-how__sounds { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.s-how__sound {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 7px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #151515;
}
.s-how__sound svg { grid-row: span 2; width: 14px; height: 14px; color: #a1a1aa; }
.s-how__sound b { font-size: 7px; font-weight: 700; line-height: 1.3; letter-spacing: 0.13em; text-transform: uppercase; }
.s-how__sound small { color: #8b8b94; font-size: 6.5px; line-height: 1.3; }
.s-how__sound.is-on {
  border-color: rgb(var(--accent-rgb) / 0.6);
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.13), rgb(var(--accent-rgb) / 0.03));
}
.s-how__sound.is-on svg,
.s-how__sound.is-on b { color: var(--accent); }
.s-how__eq {
  position: absolute;
  top: 7px;
  right: 8px;
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 8px;
}
.s-how__eq i {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--accent);
  transform-origin: bottom;
  animation: s-how-eq 0.9s ease-in-out infinite alternate;
}
.s-how__eq i:nth-child(2) { animation-delay: -0.3s; animation-duration: 0.7s; }
.s-how__eq i:nth-child(3) { animation-delay: -0.6s; animation-duration: 1.1s; }
.s-how:not(.is-inview) .s-how__eq i,
.s-how__panel:not(.is-active) .s-how__eq i { animation-play-state: paused; }
@keyframes s-how-eq { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

.s-how__mission {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
  border-radius: 13px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.08), transparent 60%), #141414;
}
.s-how__mart {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: rgb(var(--accent-rgb) / 0.14);
  color: var(--accent);
}
.s-how__mart svg { width: 15px; height: 15px; }
.s-how__mcopy { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.s-how__mcopy b { font-size: 11px; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; }
.s-how__mcopy small { color: #a1a1aa; font-size: 7.5px; line-height: 1.2; }
.s-how__msteps { margin-left: auto; color: #8b8b94; font-size: 9px; font-weight: 600; white-space: nowrap; }
.s-how__msteps b { color: var(--accent); font-size: 13px; }
.s-how__fctl { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; margin-top: auto; }
.s-how__glass { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); }

/* Step 4 · day won */
.s-how__won {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(90% 44% at 50% 30%, rgb(var(--accent-rgb) / 0.18), transparent 72%);
}
.s-how__date { color: var(--accent); font-size: 7px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; }
.s-how__pose {
  position: relative;
  display: block;
  width: 132px;
  aspect-ratio: 1;
  margin-top: 6px;
  overflow: hidden;
}
/* atlas is a 3x4 grid; pose 10 (celebration) = column 1, row 3 */
.s-how__pose img {
  position: absolute;
  left: -100%;
  top: -300%;
  width: 300%;
  max-width: none;
  height: 400%;
}
.s-how__won-h {
  margin-top: 4px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgb(var(--accent-rgb) / 0.35);
}
.s-how__won-stats {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-top: 16px;
  padding: 10px 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgb(20 20 20 / 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.s-how__won-stats > span { flex: 1; display: grid; justify-items: center; gap: 4px; }
.s-how__won-stats > i { width: 1px; background: rgba(255, 255, 255, 0.08); }
.s-how__won-stats b { display: inline-flex; align-items: center; gap: 3px; font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.s-how__won-stats b svg { width: 13px; height: 13px; color: var(--accent); }
.s-how__won-stats small { color: #8b8b94; font-size: 5.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.s-how__won-line { margin-top: 12px; padding-inline: 4px; color: #bdbdbd; font-family: var(--font-body); font-size: 9px; line-height: 1.5; }
.s-how__tomorrow {
  display: grid;
  gap: 5px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #151515;
  text-align: left;
}
.s-how__tomorrow small { color: #8b8b94; font-size: 6px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.s-how__tomorrow b { font-size: 11px; font-weight: 650; letter-spacing: -0.02em; }
.s-how__tomorrow b span { margin-left: 6px; color: #8b8b94; font-size: 7.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.s-how__close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin-top: 14px;
  padding: 0 16px;
  border: 1px solid #27272a;
  border-radius: 10px;
  color: #a1a1aa;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.s-how__close svg { width: 10px; height: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .s-how__tabs {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  .s-how__tab { padding: 0 16px; font-size: 14px; }
}

@media (max-width: 719px) {
  .s-how__stage { border-radius: 22px; }
  .s-how__panel {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 28px;
    padding: 28px 20px 26px;
  }
  .s-how__copy { justify-self: stretch; max-width: none; }
  .s-how__bg {
    -webkit-mask-image: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.6) 55%, #000 85%);
    mask-image: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.6) 55%, #000 85%);
  }
  .s-how__stage {
    background:
      radial-gradient(70% 40% at 50% 78%, rgb(var(--accent-rgb) / 0.2), transparent 72%),
      linear-gradient(180deg, #101110, #090909);
  }
}

@media (max-width: 359px) {
  .s-how__phone { zoom: 0.86; }
}

/* ---------- features ---------- */
/* Bento: 1 col → 2 cols (≥700px) → 3 cols (≥1100px). Areas only assigned
   inside the media queries so mobile simply follows DOM order. */
.s-features__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 700px) {
  .s-features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "missions focus"
      "plan mode"
      "habits journal"
      "shields reminders"
      "accent accent";
  }
  .s-features__card--missions { grid-area: missions; }
  .s-features__card--focus { grid-area: focus; }
  .s-features__card--plan { grid-area: plan; }
  .s-features__card--habits { grid-area: habits; }
  .s-features__card--mode { grid-area: mode; }
  .s-features__card--journal { grid-area: journal; }
  .s-features__card--shields { grid-area: shields; }
  .s-features__card--accent { grid-area: accent; }
  .s-features__card--reminders { grid-area: reminders; }
}
@media (min-width: 1100px) {
  .s-features__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "missions focus plan"
      "habits mode plan"
      "journal mode shields"
      "accent accent reminders";
  }
}

/* ---------- Card shell ---------- */
.s-features__card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.s-features__card.card--wash::before { opacity: 0.42; }
.s-features__card .card__head { padding: 24px 24px 0; }
.s-features__titlerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
.s-features__demo {
  position: relative;
  margin-top: auto;
  padding: 22px 24px 24px;
}

/* "Try it" hint pill */
.s-features__try {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 9px;
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.s-features__try::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  animation: s-features-ping 2.6s var(--ease) infinite;
}
@keyframes s-features-ping {
  0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.55); }
  70%, 100% { box-shadow: 0 0 0 7px rgb(var(--accent-rgb) / 0); }
}

/* Shared mock bits, sized up from phone scale */
.s-features .app-pill { padding: 3px 8px; font-size: 8.5px; }
.s-features__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
}
.s-features__label svg { width: 14px; height: 14px; }
.s-features__txt { flex: 1; min-width: 0; }
.s-features__strike {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0 1.5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.4s var(--ease);
}
.s-features .is-done .s-features__strike { background-size: 100% 1.5px; }
.s-features .is-done > .app-check { animation: s-features-pop 0.45s var(--ease); }
@keyframes s-features-pop {
  0% { transform: scale(0.7); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ---------- 1 · Missions ---------- */
.s-features__mission { padding: 16px; font-family: var(--font-display); transition: border-color 0.4s, box-shadow 0.4s; }
.s-features__mission.is-complete {
  border-color: rgb(var(--accent-rgb) / 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 32px -10px rgb(var(--accent-rgb) / 0.5);
}
.s-features__mtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.s-features__mtitle { margin-top: 7px; font-size: 19px; font-weight: 650; line-height: 1.15; letter-spacing: -0.03em; }
.s-features__ring { --ring: 60px; }
.s-features__ringnum { font-style: normal; font-size: 16px; }
.s-features__ringnum i { font-style: normal; color: #a1a1aa; }
.s-features__steps { display: grid; gap: 7px; margin-top: 14px; }
.s-features__step {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px 8px 12px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: left;
  transition: border-color 0.2s, background-color 0.25s, color 0.25s;
}
.s-features__step:hover { border-color: rgba(255, 255, 255, 0.18); }
.s-features__step .app-check,
.s-features__habit .app-check { width: 20px; height: 20px; }
.s-features__step .app-check svg,
.s-features__habit .app-check svg { width: 11px; height: 11px; }
.s-features__step.is-done { border-color: rgb(var(--accent-rgb) / 0.22); background: rgb(var(--accent-rgb) / 0.05); color: var(--text-3); }
.s-features__next { display: none; flex: none; }
.s-features__step.is-next .s-features__next { display: inline-flex; }
.s-features__mnote {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
}
.s-features__mission.is-complete .s-features__mnote { color: var(--accent); }

/* ---------- 2 · Focus ---------- */
.s-features__focus { padding: 16px; font-family: var(--font-display); }
.s-features__ftop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.s-features__xp { color: var(--text-3); font-size: 10px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; }
.s-features__clock {
  margin: 8px 0 12px;
  font-size: clamp(46px, 5vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s, text-shadow 0.3s;
}
.s-features__focus.is-running .s-features__clock { color: var(--accent); text-shadow: 0 0 28px rgb(var(--accent-rgb) / 0.35); }
.s-features__bar { height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.s-features__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / 0.6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s linear;
}
.s-features__fbtns { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 14px; }
.s-features__fbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #2a2a2e;
  border-radius: 12px;
  background: #18181b;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.25s;
}
.s-features__fbtn:hover { border-color: rgb(var(--accent-rgb) / 0.6); }
.s-features__fbtn:active { transform: scale(0.98); }
.s-features__fbtn svg { width: 14px; height: 14px; }
.s-features__fbtn--solid {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 26px -12px rgb(var(--accent-rgb) / 0.9);
}
.s-features__sounds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.s-features__sounds button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 18px 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgb(28 28 28 / 0.9);
  text-align: left;
  transition: border-color 0.2s, background-color 0.2s;
}
.s-features__sounds button:hover { border-color: rgba(255, 255, 255, 0.18); }
.s-features__sounds svg { width: 16px; height: 16px; flex: none; color: var(--text-3); transition: color 0.2s; }
.s-features__sounds b {
  display: block;
  color: var(--text);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.s-features__sounds small { display: block; color: var(--text-2); font-family: var(--font-body); font-size: 11px; line-height: 1.35; }
.s-features__sounds [aria-pressed="true"] { border-color: rgb(var(--accent-rgb) / 0.55); background: rgb(var(--accent-rgb) / 0.07); }
.s-features__sounds [aria-pressed="true"] svg { color: var(--accent); }
.s-features__eq { position: absolute; top: 9px; right: 9px; display: none; align-items: flex-end; gap: 2px; height: 10px; }
.s-features__eq i { width: 2px; height: 100%; border-radius: 1px; background: var(--accent); transform: scaleY(0.4); transform-origin: bottom; }
.s-features__sounds [aria-pressed="true"] .s-features__eq { display: flex; }
.s-features__focus.is-running .s-features__eq i { animation: s-features-eq 0.9s ease-in-out infinite alternate; }
.s-features__focus.is-running .s-features__eq i:nth-child(2) { animation-delay: -0.35s; }
.s-features__focus.is-running .s-features__eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes s-features-eq {
  from { transform: scaleY(0.3); }
  to { transform: scaleY(1); }
}
/* Narrow cards (3-col at ~1000px, 2-col at ~700px): drop chip icons so labels fit */
.s-features__focus { container: s-features-focus / inline-size; }
@container s-features-focus (max-width: 280px) {
  .s-features__sounds svg { display: none; }
  .s-features__sounds button { padding-left: 12px; }
}
.s-features__note-sm { margin-top: 10px; color: var(--text-2); font-family: var(--font-body); font-size: 12px; line-height: 1.4; }

/* ---------- 3 · Plan your day ---------- */
.s-features__plan { --hr: 30px; --y0: 14px; --gut: 46px; padding: 14px; font-family: var(--font-display); }
.s-features__seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--well);
}
.s-features__seg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.s-features__seg button:hover { color: var(--text); }
.s-features__seg svg { width: 14px; height: 14px; flex: none; }
.s-features__plan { container: s-features-plan / inline-size; }
@container s-features-plan (max-width: 272px) {
  .s-features__seg svg { display: none; }
}
.s-features__seg [aria-pressed="true"],
.s-features__seg [aria-pressed="true"]:hover {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 18px -8px rgb(var(--accent-rgb) / 0.8);
}
.s-features__tl { position: relative; height: calc(var(--y0) * 2 + 16 * var(--hr)); margin-top: 12px; }
.s-features__hours li {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--y0) + var(--t) * var(--hr));
  display: flex;
  align-items: center;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.s-features__hours span { width: var(--gut); flex: none; }
.s-features__hours li::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.s-features__busy {
  position: absolute;
  left: var(--gut);
  right: 0;
  top: calc(var(--y0) + 3 * var(--hr));
  height: calc(7 * var(--hr));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding: 0 14px;
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  border-radius: 12px;
  background:
    repeating-linear-gradient(-45deg, rgb(var(--accent-rgb) / 0.09) 0 6px, transparent 6px 13px),
    rgb(18 18 18 / 0.85);
  transform-origin: 50% 0;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease), visibility 0s;
}
.s-features__busy b { font-size: 15px; font-weight: 650; letter-spacing: -0.02em; }
.s-features__busy > span:last-child { color: var(--text-2); font-family: var(--font-body); font-size: 12px; }
.s-features__plan[data-day="free"] .s-features__busy {
  opacity: 0;
  transform: scaleY(0.92);
  visibility: hidden;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease), visibility 0s 0.5s;
}
.s-features__ops { position: absolute; inset: 0 0 0 var(--gut); }
.s-features__op {
  position: absolute;
  top: 0;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 6px);
  height: 24px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #1c1c1c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 16px -8px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  transform: translateY(calc(var(--y0) + var(--t) * var(--hr) - 50%));
  transition: transform 0.75s var(--ease) calc(var(--i) * 60ms);
}
.s-features__op::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.7);
}
.s-features__optime { flex: none; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.s-features__opname { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
.s-features__foot {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 12.5px;
}

/* ---------- 4 · Habits ---------- */
.s-features__habits { padding: 14px; font-family: var(--font-display); }
.s-features__htop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.s-features__hcount { color: var(--text-2); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.s-features__hlist { display: grid; gap: 7px; }
.s-features__habit {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px 8px 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-align: left;
  transition: border-color 0.2s, background-color 0.25s, color 0.25s;
}
.s-features__habit:hover { border-color: rgba(255, 255, 255, 0.18); }
.s-features__habit.is-done { border-color: rgb(var(--accent-rgb) / 0.22); background: rgb(var(--accent-rgb) / 0.05); color: var(--text-3); }
.s-features__hicon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: rgb(var(--accent-rgb) / 0.1);
  color: var(--accent);
}
.s-features__hicon svg { width: 16px; height: 16px; }
.s-features__streak { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--text-2); font-size: 13px; font-weight: 700; }
.s-features__streak svg { width: 14px; height: 14px; color: var(--text-3); transition: color 0.25s; }
.s-features__streak b { display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums; }
.s-features__streak b.is-bump { animation: s-features-bump 0.45s var(--ease); }
@keyframes s-features-bump {
  40% { transform: translateY(-3px) scale(1.3); }
}
.s-features__habit.is-done .s-features__streak { color: var(--accent); }
.s-features__habit.is-done .s-features__streak svg { color: var(--accent); }

/* ---------- 5 · Daily mode (the coloured card) ---------- */
.s-features__card--mode {
  border-color: rgb(var(--accent-rgb) / 0.26);
  background-color: #120f1b;
  background-image:
    radial-gradient(90% 55% at 100% 100%, color-mix(in oklab, var(--accent) 50%, transparent), transparent 70%),
    radial-gradient(100% 70% at 0% 100%, color-mix(in oklab, var(--violet) 75%, transparent), transparent 70%),
    linear-gradient(180deg, #16121f 0%, color-mix(in oklab, var(--violet) 26%, #111) 48%, color-mix(in oklab, var(--violet) 46%, #111) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 70px -34px color-mix(in oklab, var(--violet) 70%, transparent);
}
.s-features__card--mode .card__head p { color: var(--text-2); }
.s-features__modepanel {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgb(10 10 10 / 0.74);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 50px -22px rgba(0, 0, 0, 0.8);
  font-family: var(--font-display);
}
.s-features__ask { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; }
.s-features__moods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.s-features__moods button {
  position: relative;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.25s;
}
.s-features__moods button::after { content: ""; position: absolute; inset: -4px; }
.s-features__moods button:hover { border-color: rgb(var(--accent-rgb) / 0.5); color: var(--text); }
.s-features__moods [aria-pressed="true"],
.s-features__moods [aria-pressed="true"]:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 20px -4px rgb(var(--accent-rgb) / 0.7);
}
.s-features__today { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.s-features__ttop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.s-features__tmeta { color: var(--text-2); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-align: right; text-transform: uppercase; }
.s-features__line {
  min-height: 2.6em;
  margin-top: 8px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.s-features__tlist {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: calc(5 * 38px + 4 * 6px);
  margin-top: 8px;
  transition: opacity 0.18s, transform 0.18s var(--ease);
}
.s-features__tlist.is-out { opacity: 0; transform: translateY(6px); }
.s-features__tlist li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  background: rgb(28 28 28 / 0.92);
  animation: s-features-in 0.5s var(--ease) calc(var(--i) * 55ms) both;
}
.s-features__tlist li:first-child { border-color: rgb(var(--accent-rgb) / 0.4); box-shadow: 0 0 18px -8px rgb(var(--accent-rgb) / 0.6); }
.s-features__tname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.s-features__txp { flex: none; color: var(--text-3); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; }
.s-features__tlist li:first-child .s-features__txp { color: var(--accent); }
@keyframes s-features-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 6 · Journal ---------- */
.s-features__well {
  min-height: 150px;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background-color: var(--well);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255, 255, 255, 0.035) 31px 32px);
  background-position: 0 44px;
  box-shadow: inset 0 3px 14px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.04);
  font-family: var(--font-display);
}
.s-features__wtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.s-features__wmeta { color: var(--text-3); font-size: 10px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; }
.s-features__ph { display: flex; align-items: center; gap: 3px; margin-top: 14px; color: var(--text-3); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.s-features__caret {
  width: 2px;
  height: 1.15em;
  flex: none;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.7);
  animation: s-features-blink 1.1s steps(1) infinite;
}
@keyframes s-features-blink { 50% { opacity: 0; } }
.s-features__lock { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.s-features__lock svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--accent); }

/* ---------- 7 · Streak shields ---------- */
.s-features__shields { padding: 16px; font-family: var(--font-display); }
.s-features__stop { display: flex; align-items: center; gap: 12px; }
.s-features__sicon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  border-radius: 12px;
  background: rgb(var(--accent-rgb) / 0.1);
  color: var(--accent);
}
.s-features__sicon svg { width: 18px; height: 18px; }
.s-features__stext { display: grid; flex: 1; gap: 7px; }
.s-features__pips { display: flex; gap: 4px; }
.s-features__pips i { width: 18px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.s-features__pips .is-on { background: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.6); }
.s-features__scount { font-size: 26px; font-weight: 650; line-height: 1; letter-spacing: -0.04em; }
.s-features__scount span { color: var(--text-3); font-size: 15px; }
.s-features__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.s-features__week li { display: grid; justify-items: center; gap: 7px; color: var(--text-3); font-size: 10px; font-weight: 650; letter-spacing: 0.08em; }
.s-features__week span {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 30px;
  aspect-ratio: 1;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 12px -3px rgb(var(--accent-rgb) / 0.7);
}
.s-features__week svg { width: 12px; height: 12px; }
.s-features__card.is-in .s-features__week span { animation: s-features-day 0.45s var(--ease) calc(0.35s + var(--i) * 0.11s) both; }
.s-features__card.is-in .s-features__week svg { animation: s-features-tick 0.3s var(--ease) calc(0.45s + var(--i) * 0.11s) both; }
.s-features__card.is-in .s-features__pips .is-new { animation: s-features-bank 0.7s var(--ease) 1.25s both; }
@keyframes s-features-day {
  from { border-color: rgba(255, 255, 255, 0.16); background: transparent; box-shadow: none; transform: scale(0.82); }
}
@keyframes s-features-tick { from { opacity: 0; transform: scale(0.4); } }
@keyframes s-features-bank {
  0% { background: rgba(255, 255, 255, 0.12); box-shadow: none; }
  50% { box-shadow: 0 0 16px rgb(var(--accent-rgb) / 0.95); }
}
.s-features__cap { margin-top: 14px; color: var(--text-2); font-size: 13px; line-height: 1.45; }

/* ---------- 8 · Make it yours ---------- */
.s-features__card--accent::before {
  content: "";
  position: absolute;
  inset: auto -10% -34% -10%;
  height: 75%;
  z-index: -1;
  background:
    radial-gradient(28% 60% at 14% 100%, color-mix(in oklab, var(--lime) 45%, transparent), transparent 72%),
    radial-gradient(28% 60% at 38% 100%, color-mix(in oklab, var(--cyan) 45%, transparent), transparent 72%),
    radial-gradient(28% 60% at 62% 100%, color-mix(in oklab, var(--amber) 45%, transparent), transparent 72%),
    radial-gradient(28% 60% at 86% 100%, color-mix(in oklab, var(--violet) 50%, transparent), transparent 72%);
  opacity: 0.45;
  filter: blur(10px);
  pointer-events: none;
}
.s-features__accents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) {
  .s-features__accents { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.s-features__acc {
  --c: var(--lime);
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 7px 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: rgb(18 18 18 / 0.85);
  text-align: left;
  transition: border-color 0.25s, box-shadow 0.3s, transform 0.3s var(--ease);
}
.s-features__acc:hover { border-color: var(--line-3); transform: translateY(-2px); }
.s-features__acc[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 16px 40px -18px var(--c); }
.s-features__accimg { display: block; aspect-ratio: 4 / 3; margin-bottom: 8px; overflow: hidden; border-radius: 12px; background: #050505; }
.s-features__accimg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transition: transform 0.6s var(--ease); }
.s-features__accimg--cut img { object-fit: contain; padding: 6px; }
.s-features__acc:hover .s-features__accimg img { transform: scale(1.05); }
.s-features__accrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 0 5px; }
.s-features__accname { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 15px; font-weight: 650; letter-spacing: -0.02em; }
.s-features__accname::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.s-features__acchex { color: var(--text-3); font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; }
.s-features__accdesc { padding: 0 5px; color: var(--text-2); font-size: 12.5px; line-height: 1.35; }
.s-features__acccheck {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c);
  color: #0a0a0a;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s, transform 0.35s var(--ease);
}
.s-features__acccheck svg { width: 13px; height: 13px; }
.s-features__acc[aria-pressed="true"] .s-features__acccheck { opacity: 1; transform: none; }

/* ---------- 9 · Reminders ---------- */
.s-features__notes { display: grid; gap: 10px; }
.s-features__notif {
  display: grid;
  gap: 2px;
  padding: 12px 14px 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgb(34 34 36 / 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 36px -20px rgba(0, 0, 0, 0.9);
}
.s-features__notif + .s-features__notif { margin-inline: 6px; }
.s-features__card.is-in .s-features__notif { animation: s-features-float 0.8s var(--ease) calc(0.35s + var(--i) * 0.3s) both; }
@keyframes s-features-float {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
}
.s-features__nhead { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; color: var(--text-2); font-size: 12px; }
.s-features__nicon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  border-radius: 50%;
  background: #0a0a0a;
  color: var(--accent);
}
.s-features__nicon svg { width: 8px; height: 8px; }
.s-features__ntitle { font-family: var(--font-display); font-size: 14px; font-weight: 650; letter-spacing: -0.015em; }
.s-features__ntext { color: var(--text-2); font-size: 13px; line-height: 1.45; }

/* ---------- Small screens ---------- */
@media (max-width: 420px) {
  .s-features__card .card__head { padding: 20px 20px 0; }
  .s-features__demo { padding: 18px 16px 16px; }
  .s-features__plan { --hr: 28px; --gut: 42px; }
}

/* ---------- Reduced motion: show final states, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  .s-features__try::before,
  .s-features__caret,
  .s-features__tlist li,
  .s-features__card.is-in .s-features__week span,
  .s-features__card.is-in .s-features__week svg,
  .s-features__card.is-in .s-features__pips .is-new,
  .s-features__card.is-in .s-features__notif,
  .s-features__focus.is-running .s-features__eq i { animation: none; }
}

/* Tall cards: centre the demo in the spare height instead of leaving one dead band above it */
.s-features__card--plan .s-features__demo,
.s-features__card--mode .s-features__demo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
}

/* ---------- companion ---------- */
/* Companion: waving mascot, quick-action chips, three cards of live record demos */
.s-companion { isolation: isolate; }
.s-companion [hidden] { display: none !important; }

.s-companion .s-companion__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(40% 30% at 50% 7%, rgb(var(--accent-rgb) / 0.13), transparent 70%),
    radial-gradient(70% 36% at 50% 100%, rgb(var(--accent-rgb) / 0.05), transparent 70%);
}

/* ---------- Head ---------- */
.s-companion .s-companion__head {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: 780px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  text-align: center;
}

.s-companion .s-companion__hero {
  --m: clamp(164px, 18vw, 204px);
  position: relative;
  display: grid;
  justify-items: center;
  margin-bottom: 6px;
}
.s-companion .s-companion__mascot {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--m);
  height: var(--m);
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.35s var(--ease);
}
.s-companion .s-companion__mascot:hover { transform: translateY(-3px); }
.s-companion .s-companion__mascot:active { transform: scale(0.97); }
.s-companion .s-companion__mascot:focus-visible { outline-offset: 8px; border-radius: 50%; }
.s-companion .s-companion__mascot .sprite { --size: 100%; z-index: 2; }

.s-companion .s-companion__halo {
  position: absolute;
  inset: -20%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.26) 0%, rgb(var(--accent-rgb) / 0.08) 42%, transparent 68%);
  filter: blur(6px);
  animation: s-companion-breathe 5s var(--ease-in-out) infinite;
}

/* Orbit: an ellipse that passes behind the companion and in front of it */
.s-companion .s-companion__ring,
.s-companion .s-companion__orbit {
  position: absolute;
  left: -16%;
  right: -16%;
  top: 46%;
  height: 32%;
  pointer-events: none;
  transform: rotate(-12deg);
}
.s-companion .s-companion__ring { border: 1px solid rgb(var(--accent-rgb) / 0.4); border-radius: 50%; }
.s-companion .s-companion__ring--back { z-index: 1; border-color: rgb(var(--accent-rgb) / 0.18); }
.s-companion .s-companion__ring--front {
  z-index: 3;
  clip-path: inset(50% 0 0 0);
  filter: drop-shadow(0 0 4px rgb(var(--accent-rgb) / 0.5));
}
.s-companion .s-companion__orbit { z-index: 4; }
.s-companion .s-companion__orbit i {
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 2px rgb(var(--accent-rgb) / 0.6);
  /* Two eased half-swings a quarter-turn apart trace the ellipse */
  animation:
    s-companion-ox 3s var(--ease-in-out) infinite alternate,
    s-companion-oy 3s var(--ease-in-out) -1.5s infinite alternate;
}

.s-companion .s-companion__hello {
  position: absolute;
  bottom: calc(100% - 6px);
  left: 50%;
  z-index: 5;
  padding: 8px 13px;
  border: 1px solid var(--line-2);
  border-radius: 14px 14px 14px 4px;
  background: rgb(22 22 22 / 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 30px -14px rgba(0, 0, 0, 0.9);
  color: var(--text);
  font: 600 13.5px/1.3 var(--font-display);
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity 0.3s, transform 0.35s var(--ease);
}
.s-companion .s-companion__hello:empty { opacity: 0; transform: translate(-50%, 6px) scale(0.96); }
@media (min-width: 640px) {
  .s-companion .s-companion__hello { bottom: auto; top: 6%; left: calc(50% + var(--m) * 0.4); transform: none; }
  .s-companion .s-companion__hello:empty { transform: translateY(6px) scale(0.96); }
}

.s-companion .s-companion__title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 10px 14px;
}
.s-companion .s-companion__tag { margin-top: 10px; }
.s-companion .s-companion__lead { max-width: 52ch; }

.s-companion .s-companion__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}
.s-companion .s-companion__chip {
  min-height: 44px;
  padding: 8px 16px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.13em;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s, box-shadow 0.3s var(--ease);
}
.s-companion .s-companion__chip:hover { border-color: var(--line-3); color: var(--text); }
.s-companion .s-companion__chip[aria-pressed="true"] {
  border-color: rgb(var(--accent-rgb) / 0.55);
  background: rgb(var(--accent-rgb) / 0.1);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.08), 0 0 22px -6px rgb(var(--accent-rgb) / 0.5);
}

/* ---------- Grid ---------- */
.s-companion .s-companion__grid { display: grid; gap: 20px; }
@media (min-width: 680px) {
  .s-companion .s-companion__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-companion .s-companion__card--ask { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .s-companion .s-companion__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .s-companion .s-companion__card--ask { grid-column: 1; grid-row: 1 / span 2; }
}

.s-companion .s-companion__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-display);
}
.s-companion .s-companion__card .card__head p { font-family: var(--font-body); color: var(--text-2); }
.s-companion .s-companion__card--ask { --wash: var(--accent); }
.s-companion .s-companion__card--later { --wash: var(--violet); }

/* ---------- Left: ask the record ---------- */
.s-companion .s-companion__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 16px;
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  border-radius: 20px;
  background:
    linear-gradient(160deg, rgb(var(--accent-rgb) / 0.07), transparent 38%),
    rgb(14 14 14 / 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 40px -18px rgb(var(--accent-rgb) / 0.35);
}
.s-companion .s-companion__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.s-companion .s-companion__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.s-companion .s-companion__label svg { width: 13px; height: 13px; }
.s-companion .s-companion__sample {
  padding: 3px 9px;
  border: 1px dashed var(--line-3);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.s-companion .s-companion__stage { padding: 18px 2px 18px; }
.s-companion .s-companion__state { animation: s-companion-in 0.45s var(--ease) both; }

.s-companion .s-companion__q {
  width: fit-content;
  max-width: 86%;
  margin: 0 0 14px auto;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: 16px 16px 4px 16px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font: 500 14px/1.35 var(--font-body);
}

.s-companion .s-companion__from { display: flex; align-items: center; gap: 10px; }
.s-companion .s-companion__face {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
  overflow: hidden;
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 85%, rgb(var(--accent-rgb) / 0.3), #141414 70%);
}
.s-companion .s-companion__face img {
  position: absolute;
  left: calc(var(--col) * -100%);
  top: calc(var(--row) * -100%);
  width: 300%;
  height: 400%;
  max-width: none;
}

.s-companion .s-companion__kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.s-companion .s-companion__kicker svg { width: 13px; height: 13px; flex: none; }

.s-companion .s-companion__say {
  margin-top: 14px;
  color: var(--text);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.s-companion .s-companion__say--sm { font-size: 17px; line-height: 1.38; }

.s-companion .s-companion__see {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 14px;
  border: 1px solid rgb(var(--accent-rgb) / 0.4);
  border-radius: 12px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  transition: background-color 0.2s, border-color 0.2s;
}
.s-companion .s-companion__see:hover { background: rgb(var(--accent-rgb) / 0.08); border-color: rgb(var(--accent-rgb) / 0.6); }
.s-companion .s-companion__see svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.s-companion .s-companion__see[aria-expanded="true"] svg { transform: rotate(180deg); }
.s-companion .s-companion__evwrap { animation: s-companion-in 0.4s var(--ease) both; }

/* Evidence rows */
.s-companion .s-companion__ev { display: grid; gap: 8px; margin-top: 14px; }
.s-companion .s-companion__ev li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(28 28 28 / 0.75);
  animation: s-companion-rise 0.5s var(--ease) both;
}
.s-companion .s-companion__ev li:nth-child(2) { animation-delay: 0.08s; }
.s-companion .s-companion__ev li:nth-child(3) { animation-delay: 0.16s; }
.s-companion .s-companion__k {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.s-companion .s-companion__m { display: grid; gap: 1px; min-width: 0; }
.s-companion .s-companion__m b { color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.s-companion .s-companion__m span { color: var(--text-2); font: 13px/1.4 var(--font-body); }

/* Gap length: one faint dot per day away, then the lit day it was picked back up */
.s-companion .s-companion__gap {
  position: relative;
  width: calc(var(--n) * 8px + 10px);
  height: 10px;
  background: radial-gradient(circle at 4px 50%, rgba(255, 255, 255, 0.25) 1.6px, transparent 2.2px) 0 0 / 8px 100% repeat-x;
}
.s-companion .s-companion__gap::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.6);
}
.s-companion .s-companion__meter {
  width: 72px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.s-companion .s-companion__meter::before {
  content: "";
  display: block;
  width: calc(var(--v) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.5);
  transform-origin: left;
  animation: s-companion-grow-x 0.8s var(--ease) 0.2s both;
}
.s-companion .s-companion__bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.s-companion .s-companion__bars i {
  width: 5px;
  height: calc(var(--v) * 100%);
  border-radius: 2px;
  background: linear-gradient(to top, rgb(var(--accent-rgb) / 0.35), var(--accent));
  transform-origin: bottom;
  animation: s-companion-grow-y 0.6s var(--ease) 0.15s both;
}

.s-companion .s-companion__foot { margin-top: 12px; color: var(--text-2); font: 13.5px/1.5 var(--font-body); }
.s-companion .s-companion__read {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 2px solid rgb(var(--accent-rgb) / 0.6);
  border-radius: 0 10px 10px 0;
  background: rgb(var(--accent-rgb) / 0.05);
  color: var(--text-2);
  font: 14px/1.5 var(--font-body);
}
.s-companion .s-companion__read span {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font: 700 10.5px/1 var(--font-display);
  letter-spacing: 0.16em;
}

/* Brain dump: the note is highlighted, then the parts land as ops */
.s-companion .s-companion__note {
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed var(--line-3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-2);
  font: 15px/1.65 var(--font-body);
}
.s-companion .s-companion__note mark {
  padding: 0 1px;
  border-radius: 2px;
  color: var(--text);
  background: linear-gradient(rgb(var(--accent-rgb) / 0.24), rgb(var(--accent-rgb) / 0.24)) no-repeat 0 88% / 0% 45%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: s-companion-mark 0.6s var(--ease) both;
  animation-delay: calc(0.25s + var(--i) * 0.35s);
}
.s-companion .s-companion__then {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 8px;
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.s-companion .s-companion__then::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, var(--line-2), transparent); }
.s-companion .s-companion__ops,
.s-companion .s-companion__steps { display: grid; gap: 6px; }
.s-companion .s-companion__ops li,
.s-companion .s-companion__steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(28 28 28 / 0.85);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  animation: s-companion-rise 0.5s var(--ease) both;
}
.s-companion .s-companion__ops li { animation-delay: calc(1.2s + var(--i) * 0.12s); }
.s-companion .s-companion__ops li > span:nth-child(2) { flex: 1; min-width: 0; }
.s-companion .s-companion__pill {
  flex: none;
  padding: 3px 8px;
  border: 1px solid var(--line-3);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.s-companion .s-companion__pill.is-on { border-color: rgb(var(--accent-rgb) / 0.45); background: rgb(var(--accent-rgb) / 0.08); color: var(--accent); }

/* Plan my day: ops placed around the busy block */
.s-companion .s-companion__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.s-companion .s-companion__day { display: grid; gap: 6px; margin-top: 14px; }
.s-companion .s-companion__day li {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  animation: s-companion-rise 0.5s var(--ease) both;
  animation-delay: calc(0.3s + var(--i, -1) * 0.15s);
}
.s-companion .s-companion__t { color: var(--text-2); font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.s-companion .s-companion__op {
  position: relative;
  padding: 10px 12px 10px 15px;
  overflow: hidden;
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  border-radius: 12px;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.1), rgb(28 28 28 / 0.85) 60%);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.s-companion .s-companion__op::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.s-companion .s-companion__block {
  display: flex;
  align-items: center;
  min-height: 66px;
  padding: 0 14px;
  border: 1px dashed var(--line-3);
  border-radius: 12px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 6px, transparent 6px 12px);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* Break it down: a mission card with its steps */
.s-companion .s-companion__mission {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
  border-radius: 16px;
  background: rgb(20 20 20 / 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 24px -10px rgb(var(--accent-rgb) / 0.35);
}
.s-companion .s-companion__mhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.s-companion .s-companion__mlabel { color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; }
.s-companion .s-companion__mtitle { margin-top: 4px; font-size: 19px; font-weight: 650; line-height: 1.2; letter-spacing: -0.025em; }
.s-companion .s-companion__ringmeter { --ring: 54px; }
.s-companion .s-companion__ringmeter .app-ring__label { font-size: 14px; }
.s-companion .s-companion__ringmeter .arc { animation: s-companion-arc 0.9s var(--ease) 0.3s both; }
.s-companion .s-companion__steps { margin-top: 12px; }
.s-companion .s-companion__steps li { animation-delay: calc(0.2s + var(--i) * 0.12s); }
.s-companion .s-companion__steps li.is-done { color: var(--text-2); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.3); }
.s-companion .s-companion__steps .s-companion__pill { margin-left: auto; }

/* Find patterns: completions by hour */
.s-companion .s-companion__headline {
  margin-top: 10px;
  color: var(--accent);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.s-companion .s-companion__habit { margin-top: 4px; color: var(--text); font-size: 15px; font-weight: 600; }
.s-companion .s-companion__hours {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  height: 116px;
  margin-top: 16px;
}
.s-companion .s-companion__hours span {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.s-companion .s-companion__hours i {
  position: relative;
  align-self: end;
  width: 100%;
  max-width: 30px;
  height: max(4px, calc(var(--v) * 100%));
  border-radius: 6px 6px 2px 2px;
  background: rgba(255, 255, 255, 0.1);
  transform-origin: bottom;
  animation: s-companion-grow-y 0.7s var(--ease) both;
  animation-delay: calc(0.15s + var(--i) * 0.06s);
}
.s-companion .s-companion__hours .is-peak { color: var(--accent); }
.s-companion .s-companion__hours .is-peak i {
  background: linear-gradient(to top, rgb(var(--accent-rgb) / 0.45), var(--accent));
  box-shadow: 0 0 18px -2px rgb(var(--accent-rgb) / 0.6);
}
.s-companion .s-companion__hours .is-set i { background: rgba(255, 255, 255, 0.3); }
.s-companion .s-companion__hours .is-set i::after {
  content: "SET";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  color: var(--text-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  transform: translateX(-50%);
}
.s-companion .s-companion__body { margin-top: 12px; color: var(--text-2); font: 14.5px/1.55 var(--font-body); }
.s-companion .s-companion__body strong { color: var(--text); font-weight: 600; }

.s-companion .s-companion__asks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.s-companion .s-companion__ask {
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font: 500 13.5px/1.3 var(--font-body);
  text-align: left;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.s-companion .s-companion__ask:hover { border-color: var(--line-3); color: var(--text); }
.s-companion .s-companion__ask[aria-pressed="true"] { border-color: rgb(var(--accent-rgb) / 0.5); background: rgb(var(--accent-rgb) / 0.08); color: var(--accent); }

/* ---------- Right top: timing insight ---------- */
.s-companion .s-companion__timing {
  margin: 20px;
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 40%),
    rgb(14 14 14 / 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.s-companion .s-companion__insight { transition: opacity 0.4s var(--ease), filter 0.4s var(--ease); }
.s-companion [data-status="left"] .s-companion__insight { opacity: 0.5; filter: saturate(0.3); }

.s-companion .s-companion__plot {
  position: relative;
  height: 96px;
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}
.s-companion .s-companion__plot::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 26px;
  left: 55.5%;
  width: 22.4%;
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  border-radius: 8px;
  background: rgb(var(--accent-rgb) / 0.08);
  transition: border-color 0.4s, background-color 0.4s;
}
.s-companion [data-status="moved"] .s-companion__plot::before { border-color: rgb(var(--accent-rgb) / 0.6); background: rgb(var(--accent-rgb) / 0.14); }
.s-companion .s-companion__plot > i {
  position: absolute;
  left: var(--x);
  top: calc(40% + var(--y));
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.6);
}
.s-companion .is-in .s-companion__plot > i { animation: s-companion-pop 0.45s var(--ease) both; }
.s-companion .is-in .s-companion__plot > i:nth-of-type(odd) { animation-delay: 0.35s; }
.s-companion .is-in .s-companion__plot > i:nth-of-type(even) { animation-delay: 0.5s; }
.s-companion .s-companion__set {
  position: absolute;
  top: 0;
  bottom: 22px;
  left: 16.67%;
  border-left: 1px dashed rgba(255, 255, 255, 0.5);
  transition: left 0.8s var(--ease), border-color 0.4s;
}
.s-companion [data-status="moved"] .s-companion__set { left: 66.67%; border-left-style: solid; border-left-color: var(--accent); }
.s-companion .s-companion__set b {
  position: absolute;
  top: -12px;
  left: 0;
  padding: 3px 7px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: #1c1c1c;
  color: var(--text);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: border-color 0.4s, color 0.4s;
}
.s-companion [data-status="moved"] .s-companion__set b { border-color: rgb(var(--accent-rgb) / 0.6); color: var(--accent); }
.s-companion .s-companion__axis { position: absolute; left: 0; right: 0; bottom: 5px; height: 14px; }
.s-companion .s-companion__axis span {
  position: absolute;
  left: var(--x);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transform: translateX(-50%);
}
.s-companion [data-status="moved"] .s-companion__body strong { color: var(--accent); animation: s-companion-flash 1s var(--ease); }

.s-companion .s-companion__acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.s-companion .s-companion__btn {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-3);
  border-radius: 12px;
  background: #18181b;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  transition: border-color 0.2s, color 0.2s, filter 0.2s, transform 0.2s var(--ease);
}
.s-companion .s-companion__btn:hover { border-color: rgb(var(--accent-rgb) / 0.6); }
.s-companion .s-companion__btn:active { transform: scale(0.98); }
.s-companion .s-companion__btn--solid {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 8px 24px -10px rgb(var(--accent-rgb) / 0.7);
}
.s-companion .s-companion__btn--solid:hover { filter: brightness(1.07); }
.s-companion .s-companion__done {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  margin-top: 14px;
  padding-left: 14px;
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  border-radius: 12px;
  background: rgb(var(--accent-rgb) / 0.06);
  color: var(--text);
  font: 500 14px/1.35 var(--font-body);
  animation: s-companion-in 0.4s var(--ease) both;
}
.s-companion .s-companion__done[data-when="left"] { border-color: var(--line-2); background: rgba(255, 255, 255, 0.03); color: var(--text-2); }
.s-companion .s-companion__done span { display: inline-flex; align-items: center; gap: 8px; }
.s-companion .s-companion__done svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.s-companion .s-companion__undo {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  color: var(--accent);
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.14em;
}
.s-companion .s-companion__undo:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Right bottom: coming later ---------- */
.s-companion .s-companion__headrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.s-companion .s-companion__command {
  margin: 20px 20px 0;
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: rgb(14 14 14 / 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.s-companion .s-companion__command .s-companion__label { margin-bottom: 10px; opacity: 0.75; }
.s-companion .s-companion__input {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 6px 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #161616;
}
.s-companion .s-companion__ph {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font: 15px/1 var(--font-body);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.s-companion .s-companion__mic,
.s-companion .s-companion__send {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  color: var(--text-4);
}
.s-companion .s-companion__mic { border: 1px dashed var(--line-3); }
.s-companion .s-companion__send { background: rgba(255, 255, 255, 0.06); }
.s-companion .s-companion__mic svg,
.s-companion .s-companion__send svg { width: 16px; height: 16px; }
.s-companion .s-companion__wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 30px; margin-top: 14px; opacity: 0.55; }
.s-companion .s-companion__wave i {
  width: 3px;
  flex: none;
  border-radius: 2px;
  background: linear-gradient(to top, rgb(var(--accent-rgb) / 0.25), rgb(var(--accent-rgb) / 0.75));
}
.s-companion .s-companion__later { margin: 16px 24px 24px; color: var(--text-2); font: 14px/1.5 var(--font-body); }

/* ---------- Small screens ---------- */
@media (max-width: 599px) {
  .s-companion .s-companion__panel { margin: 14px; padding: 14px; }
  .s-companion .s-companion__timing { margin: 16px 14px 14px; padding: 14px; }
  .s-companion .s-companion__command { margin: 16px 14px 0; }
  .s-companion .s-companion__later { margin: 14px 20px 22px; }
  .s-companion .s-companion__ev li { grid-template-columns: 64px minmax(0, 1fr); }
  .s-companion .s-companion__ev li > :nth-child(3) { grid-column: 2; }
  .s-companion .s-companion__wave i:nth-child(-n + 4),
  .s-companion .s-companion__wave i:nth-last-child(-n + 4) { display: none; }
}

/* ---------- Motion ---------- */
@keyframes s-companion-breathe { 50% { transform: scale(1.06); opacity: 0.8; } }
@keyframes s-companion-ox { from { left: 0%; } to { left: 100%; } }
@keyframes s-companion-oy { from { top: 0%; opacity: 0.3; } to { top: 100%; opacity: 1; } }
@keyframes s-companion-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes s-companion-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes s-companion-grow-x { from { transform: scaleX(0); } }
@keyframes s-companion-grow-y { from { transform: scaleY(0); } }
@keyframes s-companion-pop { from { opacity: 0; transform: scale(0.2); } }
@keyframes s-companion-mark { to { background-size: 100% 45%; } }
@keyframes s-companion-arc { from { stroke-dashoffset: 169.65; } }
@keyframes s-companion-flash { 0%, 30% { text-shadow: 0 0 14px rgb(var(--accent-rgb) / 0.9); } }

/* ---------- packs ---------- */
/* Packs: featured Winter Arc card + Blitzit-style staggered rail of tall pack cards */
/* ---------- Winter Arc ---------- */
.s-packs__arc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background: #0b1114;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 40px 90px -50px rgb(var(--accent-rgb) / 0.4),
    0 30px 60px -40px rgba(0, 0, 0, 0.9);
}
.s-packs__arc-art { position: absolute; inset: 0; z-index: -2; }
.s-packs__arc-art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 35%; }
.s-packs__arc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(80% 60% at 0% 105%, rgb(var(--accent-rgb) / 0.24), transparent 65%),
    linear-gradient(to bottom, rgb(6 10 12 / 0.55), rgb(6 10 12 / 0.9) 45%, rgb(6 10 12 / 0.96));
  pointer-events: none;
}
.s-packs__arc-moon {
  display: none;
  position: absolute;
  top: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  width: 22px;
  height: 22px;
  color: var(--accent);
  filter: drop-shadow(0 0 10px rgb(var(--accent-rgb) / 0.6));
}

.s-packs__arc-main { display: grid; gap: 14px; align-content: end; }
.s-packs__arc-kicker {
  color: #d5e3e8;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.s-packs__arc-title {
  font-family: var(--font-display);
  font-size: clamp(54px, 9vw, 104px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.s-packs__arc-title span { color: var(--accent); text-shadow: 0 0 34px rgb(var(--accent-rgb) / 0.45); }
.s-packs__arc-line {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.s-packs__arc-text { max-width: 42ch; color: var(--text-2); font-size: 16px; line-height: 1.55; }

.s-packs__arc-side { display: grid; gap: 14px; align-content: end; }
.s-packs__arcpanel {
  padding: 16px 18px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: rgb(8 12 14 / 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.s-packs__arcpanel-head { display: flex; align-items: center; gap: 10px; }
.s-packs__snow { width: 18px; height: 18px; color: var(--accent); flex: none; }
.s-packs__arcpanel-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.s-packs__arcpanel-days {
  margin-left: auto;
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.s-packs__arcpanel-days b { margin-right: 3px; color: var(--accent); font-size: 15px; letter-spacing: -0.02em; }

.s-packs__phases {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}
.s-packs__phases::before {
  content: "";
  position: absolute;
  top: 6px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgb(var(--accent-rgb) / 0.2));
}
.s-packs__phases li { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; }
.s-packs__node {
  width: 14px;
  height: 14px;
  margin-bottom: 8px;
  border: 2px solid rgb(var(--accent-rgb) / 0.6);
  border-radius: 50%;
  background: #0b1114;
}
.s-packs__phases .is-start .s-packs__node {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.16), 0 0 14px rgb(var(--accent-rgb) / 0.6);
}
.s-packs__phases strong { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.s-packs__phases li > span:last-child { color: var(--text-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.s-packs__areas-label {
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.s-packs__areas { display: flex; flex-wrap: wrap; gap: 8px; }
.s-packs__areas .chip {
  background: rgb(10 14 16 / 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
}

.s-packs__arc-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.s-packs__arc-foot p { display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.s-packs__arc-foot svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.s-packs__arc-foot .s-packs__arc-fine { color: var(--text-3); font-size: 14px; }

@media (min-width: 900px) {
  .s-packs__arc {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "main side" "foot foot";
    column-gap: clamp(32px, 4vw, 56px);
    row-gap: 32px;
    min-height: 380px;
  }
  .s-packs__arc::before {
    background:
      radial-gradient(60% 90% at 0% 110%, rgb(var(--accent-rgb) / 0.26), transparent 62%),
      linear-gradient(90deg, rgb(6 10 12 / 0.94) 0%, rgb(6 10 12 / 0.76) 46%, rgb(6 10 12 / 0.42) 100%),
      linear-gradient(to top, rgb(6 10 12 / 0.92), transparent 45%);
  }
  .s-packs__arc-moon { display: block; }
  .s-packs__arc-main { grid-area: main; }
  .s-packs__arc-side { grid-area: side; }
  .s-packs__arc-foot { grid-area: foot; }
}

/* ---------- Rail ---------- */
.s-packs__rail { margin-top: clamp(56px, 7vw, 88px); }
.s-packs__rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.s-packs__rail-label { color: var(--text-2); font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.s-packs__nav { display: flex; gap: 10px; flex: none; }
.s-packs__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  color: var(--text);
  transition: border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s var(--ease);
}
.s-packs__btn svg { width: 18px; height: 18px; }
.s-packs__btn:hover { border-color: rgb(var(--accent-rgb) / 0.6); color: var(--accent); }
.s-packs__btn:active { transform: scale(0.95); }
.s-packs__btn:focus-visible { border-radius: 50%; }
.s-packs__btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.s-packs__btn[aria-disabled="true"]:hover { border-color: var(--line-2); color: var(--text); }

.s-packs__track {
  --card-w: 222px;
  --card-h: 372px;
  --stagger: 32px;
  --pad: max(var(--gutter), calc((100% - var(--container)) / 2));
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 6px var(--pad) 36px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}
.s-packs__track::-webkit-scrollbar { display: none; }
.s-packs__track:focus-visible { outline-offset: -2px; border-radius: var(--r-lg); }

.s-packs__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--card-w);
  min-height: var(--card-h);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, #161616, #0e0e0e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 50px -30px rgba(0, 0, 0, 0.9);
  scroll-snap-align: start;
  transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s var(--ease);
}
/* Blitzit's staggered rhythm: every other card sits lower */
.s-packs__card:nth-child(even) { margin-top: var(--stagger); }
.s-packs__card::after {
  content: "";
  position: absolute;
  inset: auto -30% -40% -30%;
  height: 60%;
  z-index: -1;
  background: radial-gradient(50% 60% at 50% 100%, rgb(var(--accent-rgb) / 0.12), transparent 70%);
  pointer-events: none;
}

.s-packs__media {
  position: relative;
  height: 178px;
  flex: none;
  overflow: hidden;
}
.s-packs__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
  transition: transform 0.7s var(--ease);
}
.s-packs__glyph {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgb(10 10 10 / 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.8);
  transition: border-color 0.3s, color 0.3s;
}
.s-packs__glyph svg { width: 17px; height: 17px; }

/* Sheet card: a step grid instead of a photo */
.s-packs__media--sheet {
  display: grid;
  place-content: center;
  gap: 12px;
  padding-top: 26px;
  background:
    radial-gradient(70% 70% at 50% 110%, rgb(var(--accent-rgb) / 0.18), transparent 70%),
    linear-gradient(180deg, #121212, transparent);
}
.s-packs__sheet { display: grid; grid-template-columns: repeat(6, 16px); gap: 6px; }
.s-packs__sheet span {
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
}
.s-packs__sheet .is-done { border-color: transparent; background: rgb(var(--accent-rgb) / 0.85); }
.s-packs__sheet .is-now { border-color: var(--accent); box-shadow: 0 0 10px rgb(var(--accent-rgb) / 0.55); }
.s-packs__sheet-meta {
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.s-packs__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  margin-top: -14px;
  padding: 0 18px 18px;
}
.s-packs__kind {
  padding: 3px 9px;
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.s-packs__name {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.s-packs__tag { color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.s-packs__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.s-packs__add {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(var(--accent-rgb) / 0.4);
  border-radius: 50%;
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent);
  flex: none;
  transition: background-color 0.25s, color 0.25s;
}
.s-packs__add svg { width: 14px; height: 14px; }

/* Build your own */
.s-packs__card--own {
  border: 1px dashed var(--line-3);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005));
  box-shadow: none;
}
.s-packs__media--own { display: grid; place-items: center; }
.s-packs__plus-tile {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1.5px dashed rgb(var(--accent-rgb) / 0.6);
  border-radius: 20px;
  background: rgb(var(--accent-rgb) / 0.06);
  color: var(--accent);
  box-shadow: 0 0 30px -8px rgb(var(--accent-rgb) / 0.45);
}
.s-packs__plus-tile svg { width: 26px; height: 26px; }

@media (hover: hover) {
  .s-packs__card:hover {
    transform: translateY(-6px);
    border-color: rgb(var(--accent-rgb) / 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.95), 0 18px 50px -34px rgb(var(--accent-rgb) / 0.6);
  }
  .s-packs__card:hover .s-packs__media img { transform: scale(1.04); }
  .s-packs__card:hover .s-packs__glyph { border-color: rgb(var(--accent-rgb) / 0.7); color: var(--accent); }
  .s-packs__card:hover .s-packs__add { background: var(--accent); color: var(--accent-ink); }
}

@media (min-width: 768px) {
  .s-packs__track { --card-w: 240px; --card-h: 400px; --stagger: 56px; gap: 20px; }
  .s-packs__media { height: 192px; }
}

/* ---------- progress ---------- */
/* Stats: a wide "record at a glance" dashboard + four small cards (Blitzit's Reports overview) */

/* ---------- Report card ---------- */
.s-progress .s-progress__report::after {
  content: "";
  position: absolute;
  top: -24%;
  right: -12%;
  z-index: -1;
  width: 55%;
  height: 70%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--violet) 45%, transparent), transparent);
  opacity: 0.32;
  filter: blur(34px);
  pointer-events: none;
}
.s-progress .s-progress__report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 22px 18px 0;
}
.s-progress .s-progress__report-head .title { font-size: clamp(19px, 2vw, 24px); }
.s-progress .s-progress__report-head p {
  max-width: 54ch;
  margin-top: 6px;
  color: var(--text-3);
  font-size: 14.5px;
  line-height: 1.5;
}

/* ---------- Dashboard ---------- */
.s-progress .s-progress__dash {
  margin: 18px 10px 10px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 140px), #0b0b0b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -32px rgba(0, 0, 0, 0.9);
  font-family: var(--font-display);
  font-feature-settings: "ss01" 1, "tnum" 1;
}

.s-progress .s-progress__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-bottom: 12px;
  padding: 2px 2px 14px;
  border-bottom: 1px solid var(--line);
}
.s-progress .s-progress__brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.s-progress .s-progress__brand-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  border-radius: 10px;
  background: linear-gradient(150deg, rgb(var(--accent-rgb) / 0.2), rgb(var(--accent-rgb) / 0.04));
  color: var(--accent);
}
.s-progress .s-progress__brand-icon svg { width: 16px; height: 16px; }
.s-progress .s-progress__brand-text { display: grid; line-height: 1.2; }
.s-progress .s-progress__brand-text b { font-size: 15px; font-weight: 650; letter-spacing: -0.02em; }
.s-progress .s-progress__brand-text small { color: var(--text-2); font-size: 12.5px; }

.s-progress .s-progress__ranges {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #121212;
}
.s-progress .s-progress__range {
  min-width: 46px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--text-2);
  font: 700 12px/1 var(--font-display);
  letter-spacing: 0.08em;
  transition: background-color 0.25s var(--ease), color 0.2s, box-shadow 0.25s var(--ease);
}
.s-progress .s-progress__range:hover { color: var(--text); }
.s-progress .s-progress__range[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 18px -4px rgb(var(--accent-rgb) / 0.7);
}
.s-progress .s-progress__when {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.s-progress .s-progress__when svg { width: 14px; height: 14px; color: var(--accent); }

.s-progress .s-progress__layout { display: grid; gap: 10px; }
.s-progress .s-progress__main,
.s-progress .s-progress__side { display: grid; align-content: start; gap: 10px; min-width: 0; }

/* Stat tiles */
.s-progress .s-progress__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.s-progress .s-progress__tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), transparent 55%), #141414;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.s-progress .s-progress__tile.is-lit {
  border-color: rgb(var(--accent-rgb) / 0.4);
  background: radial-gradient(120% 90% at 0% 0%, rgb(var(--accent-rgb) / 0.14), transparent 60%), #141414;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 30px -12px rgb(var(--accent-rgb) / 0.55);
}
.s-progress .s-progress__tile-icon { width: 18px; height: 18px; margin-bottom: 14px; color: var(--accent); }
.s-progress .s-progress__num {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.045em;
}
.s-progress .s-progress__num small { margin-left: 1px; color: var(--text-3); font-size: 0.55em; letter-spacing: -0.02em; }
.s-progress .s-progress__tile-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
}
.s-progress .s-progress__tier {
  padding: 2px 6px;
  border: 1px solid rgb(var(--accent-rgb) / 0.4);
  border-radius: 999px;
  color: var(--accent);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.s-progress .s-progress__tile-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
}
.s-progress .s-progress__xp {
  display: block;
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.s-progress .s-progress__xp i {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.5), var(--accent));
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / 0.6);
  transform-origin: left;
  transition: transform 1.1s var(--ease) 0.3s;
}
.s-progress .s-progress__pips { display: inline-flex; gap: 3px; }
.s-progress .s-progress__pips i { width: 12px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.s-progress .s-progress__pips i.is-on { background: var(--accent); box-shadow: 0 0 6px rgb(var(--accent-rgb) / 0.6); }

/* Panels */
.s-progress .s-progress__panel {
  min-width: 0;
  padding: 16px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 50%), #121212;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.s-progress .s-progress__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.s-progress .s-progress__label {
  color: #e4e4e7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.s-progress .s-progress__key {
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}

/* Completions over time */
.s-progress .s-progress__plot {
  position: relative;
  display: flex;
  gap: clamp(2px, 0.5vw, 8px);
  height: clamp(150px, 19vw, 210px);
}
.s-progress .s-progress__plot::before {
  content: "";
  position: absolute;
  inset: 0 0 22px;
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 33.333%;
  pointer-events: none;
}
.s-progress .s-progress__col {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  padding-bottom: 22px;
}
.s-progress .s-progress__bar {
  width: min(100%, 30px);
  height: var(--h);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(to top, rgb(var(--accent-rgb) / 0.35), var(--accent) 82%, color-mix(in oklab, var(--accent) 70%, #ffffff));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 16px -3px rgb(var(--accent-rgb) / 0.55);
  transform-origin: bottom;
  transition: transform 0.9s var(--ease) calc(var(--i, 0) * 22ms);
}
.s-progress .s-progress__col.is-zero .s-progress__bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.s-progress .s-progress__tick {
  position: absolute;
  left: 50%;
  bottom: 0;
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transform: translateX(-50%);
}
.s-progress .s-progress__foot {
  margin-top: 12px;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 14px;
}
.s-progress .s-progress__foot b { color: var(--text); font-family: var(--font-display); font-weight: 650; }

/* By hour */
.s-progress .s-progress__hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.s-progress .s-progress__hours i {
  height: 30px;
  border-radius: 4px;
  background: rgb(var(--accent-rgb) / var(--a));
  transition: opacity 0.6s var(--ease) calc(var(--i, 0) * 25ms + 0.3s), transform 0.6s var(--ease) calc(var(--i, 0) * 25ms + 0.3s);
}
.s-progress .s-progress__hours i.is-peak { box-shadow: 0 0 14px -2px rgb(var(--accent-rgb) / 0.75); }
.s-progress .s-progress__hour-ticks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 8px;
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Top habits */
.s-progress .s-progress__habits { display: grid; gap: 14px; }
.s-progress .s-progress__habits li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 7px 12px;
}
.s-progress .s-progress__habit-name {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s-progress .s-progress__habits b { font-size: 14px; font-weight: 650; }
.s-progress .s-progress__meter {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}
.s-progress .s-progress__meter i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.45), var(--accent));
  transition: width 0.7s var(--ease);
}

/* The month */
.s-progress .s-progress__month-line {
  margin: -4px 0 14px;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
}
.s-progress .s-progress__month-line b { color: var(--text); font-weight: 600; }
.s-progress .s-progress__cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.s-progress .s-progress__dow { padding-bottom: 2px; color: var(--text-2); font-size: 10px; font-weight: 650; text-align: center; }
.s-progress .s-progress__day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-4);
  font-size: 11px;
  font-weight: 600;
}
.s-progress .s-progress__day.is-done {
  background: rgb(var(--accent-rgb) / 0.85);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.s-progress .s-progress__day.is-shield { border: 1px dashed rgb(var(--accent-rgb) / 0.75); background: rgb(var(--accent-rgb) / 0.06); color: var(--accent); }
.s-progress .s-progress__day.is-open { border-color: var(--line-2); color: var(--text-3); }
.s-progress .s-progress__day.is-today { box-shadow: 0 0 0 2px #121212, 0 0 0 3.5px var(--accent), 0 0 16px rgb(var(--accent-rgb) / 0.5); }
.s-progress .s-progress__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 500;
}
.s-progress .s-progress__legend span { display: inline-flex; align-items: center; gap: 6px; }
.s-progress .s-progress__legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.s-progress .s-progress__legend .is-done::before { background: rgb(var(--accent-rgb) / 0.85); }
.s-progress .s-progress__legend .is-shield::before { border: 1px dashed var(--accent); }
.s-progress .s-progress__legend .is-today::before { box-shadow: 0 0 0 1.5px var(--accent); }

/* Draw-in on reveal (JS arms the dashboard; without JS everything is simply drawn) */
.s-progress .s-progress__dash.is-armed:not(.is-drawn) .s-progress__bar,
.s-progress .s-progress__plot.is-new .s-progress__bar { transform: scaleY(0); transition: none; }
.s-progress .s-progress__dash.is-armed:not(.is-drawn) .s-progress__xp i { transform: scaleX(0); }
.s-progress .s-progress__dash.is-armed:not(.is-drawn) .s-progress__hours i { opacity: 0; transform: scale(0.4); }

/* ---------- Four small cards ---------- */
.s-progress .s-progress__cards { display: grid; gap: 16px; margin-top: 16px; }
.s-progress .s-progress__mini { display: flex; flex-direction: column; }
.s-progress .s-progress__mini .card__head { padding: 22px 20px 0; }
.s-progress .s-progress__mini-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border: 1px solid rgb(var(--accent-rgb) / 0.28);
  border-radius: 10px;
  background: linear-gradient(150deg, rgb(var(--accent-rgb) / 0.18), rgb(var(--accent-rgb) / 0.03));
  color: var(--accent);
}
.s-progress .s-progress__mini-icon svg { width: 16px; height: 16px; }
.s-progress .s-progress__mini-label {
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Identities */
.s-progress .s-progress__ids { display: grid; gap: 10px; margin-top: auto; padding: 18px 16px 16px; }
.s-progress .s-progress__id {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #161616;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.s-progress .s-progress__id[data-choice="mine"] { border-color: rgb(var(--accent-rgb) / 0.45); box-shadow: 0 0 24px -10px rgb(var(--accent-rgb) / 0.6); }
.s-progress .s-progress__id[data-choice="not"] { border-style: dashed; }
.s-progress .s-progress__id-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s-progress .s-progress__id-name { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; }
.s-progress .s-progress__tag {
  padding: 3px 7px;
  border: 1px solid var(--line-3);
  border-radius: 999px;
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.s-progress .s-progress__id[data-choice="mine"] .s-progress__tag { border-color: rgb(var(--accent-rgb) / 0.5); background: rgb(var(--accent-rgb) / 0.1); color: var(--accent); }
.s-progress .s-progress__id-meta { margin-top: 4px; color: var(--text-2); font-size: 13.5px; }
.s-progress .s-progress__id[data-choice="not"] .s-progress__id-name,
.s-progress .s-progress__id[data-choice="not"] .s-progress__id-meta { color: var(--text-3); }
.s-progress .s-progress__id-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.s-progress .s-progress__id-btn {
  min-height: 44px;
  padding: 0 6px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #1c1c1c;
  color: var(--text-2);
  font: 700 10.5px/1.1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.s-progress .s-progress__id-btn:hover { border-color: var(--line-3); color: var(--text); }
.s-progress .s-progress__id-btn[aria-pressed="true"][data-pg-choice="mine"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.s-progress .s-progress__id-btn[aria-pressed="true"][data-pg-choice="not"] { border-color: var(--line-3); background: #2a2a2a; color: var(--text); }

/* Experiments */
.s-progress .s-progress__exp { display: grid; gap: 10px; margin-top: auto; padding: 18px 18px 20px; }
.s-progress .s-progress__seg {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 6px;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #121212;
}
.s-progress .s-progress__seg button {
  min-height: 44px;
  border-radius: 9px;
  color: var(--text-2);
  font: 650 14px/1 var(--font-display);
  transition: background-color 0.25s var(--ease), color 0.2s, box-shadow 0.25s var(--ease);
}
.s-progress .s-progress__seg button:hover { color: var(--text); }
.s-progress .s-progress__seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 16px -4px rgb(var(--accent-rgb) / 0.7); }
.s-progress .s-progress__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.s-progress .s-progress__chip {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  color: var(--text-2);
  font: 500 13px/1 var(--font-display);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.s-progress .s-progress__chip:hover { border-color: var(--line-3); color: var(--text); }
.s-progress .s-progress__chip[aria-pressed="true"] { border-color: rgb(var(--accent-rgb) / 0.55); background: rgb(var(--accent-rgb) / 0.1); color: var(--accent); }
.s-progress .s-progress__exp-sum { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 14px; }

/* Name a stretch */
.s-progress .s-progress__stretch { display: grid; gap: 10px; margin: auto 0; padding: 18px 20px 28px; }
.s-progress .s-progress__well {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  border-radius: 12px;
  background: #0d0d0d;
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: 600 17px/1 var(--font-display);
  letter-spacing: -0.02em;
}
.s-progress .s-progress__caret {
  width: 2px;
  height: 20px;
  margin-left: 2px;
  border-radius: 1px;
  background: var(--accent);
  animation: s-progress-caret 1.1s steps(1) infinite;
}
@keyframes s-progress-caret { 50% { opacity: 0; } }
.s-progress .s-progress__weeks {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  height: 52px;
  margin-top: 10px;
}
.s-progress .s-progress__weeks i { height: calc(var(--v) * 100%); border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.s-progress .s-progress__weeks i.is-in { background: linear-gradient(to top, rgb(var(--accent-rgb) / 0.4), var(--accent)); box-shadow: 0 0 10px -2px rgb(var(--accent-rgb) / 0.5); }
.s-progress .s-progress__bracket {
  position: relative;
  height: 8px;
  margin: 0 25%;
  border: 1.5px solid rgb(var(--accent-rgb) / 0.7);
  border-top: 0;
  border-radius: 0 0 6px 6px;
}
.s-progress .s-progress__bracket span {
  position: absolute;
  top: 14px;
  left: 50%;
  color: var(--accent);
  font: 700 9.5px/1 var(--font-display);
  letter-spacing: 0.14em;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* Share card */
.s-progress .s-progress__share { display: grid; gap: 14px; margin-top: auto; padding: 18px 20px 20px; }
.s-progress .s-progress__share-card {
  padding: 14px;
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgb(var(--accent-rgb) / 0.18), transparent 60%),
    linear-gradient(160deg, #191919, #0c0c0c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 40px -24px rgb(var(--accent-rgb) / 0.5);
  font-family: var(--font-display);
  transform: rotate(-1.5deg);
}
.s-progress .s-progress__share-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.s-progress .s-progress__share-meta { color: var(--text-2); font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; }
.s-progress .s-progress__share-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.s-progress .s-progress__share-tiles span {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.s-progress .s-progress__share-tiles b { color: var(--text); font-size: 20px; font-weight: 650; line-height: 1; letter-spacing: -0.04em; }
.s-progress .s-progress__share-tiles span:first-child b { color: var(--accent); }
.s-progress .s-progress__share-note { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; }
.s-progress .s-progress__share-note svg { width: 14px; height: 14px; flex: none; color: var(--accent); }

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  .s-progress .s-progress__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1179px) {
  .s-progress .s-progress__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .s-progress .s-progress__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 768px) {
  .s-progress .s-progress__report-head { padding: 30px 32px 0; }
  .s-progress .s-progress__dash { margin: 26px 24px 24px; padding: 18px; border-radius: 22px; }
  .s-progress .s-progress__layout,
  .s-progress .s-progress__main,
  .s-progress .s-progress__side { gap: 12px; }
  .s-progress .s-progress__panel { padding: 18px 20px; }
  .s-progress .s-progress__hours { gap: 3px; }
}
@media (min-width: 1180px) {
  .s-progress .s-progress__layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .s-progress .s-progress__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- comeback ---------- */
/* Recovery: centred display title, then three numbered panels joined by a glowing path */
.s-comeback .s-comeback__head {
  display: grid;
  justify-items: center;
  gap: 22px;
  max-width: 940px;
  margin: 0 auto clamp(40px, 6vw, 72px);
  text-align: center;
}
.s-comeback .s-comeback__sub {
  max-width: 46ch;
  color: var(--text-2);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---------- Stage: art band + path ---------- */
.s-comeback .s-comeback__stage {
  --pad: clamp(24px, 4vw, 48px);
  position: relative;
  isolation: isolate;
  padding-block: var(--pad);
}
.s-comeback .s-comeback__sky {
  position: absolute;
  top: -14%;
  bottom: -14%;
  left: 50%;
  z-index: -1;
  width: 100vw;
  overflow: hidden;
  isolation: isolate;
  opacity: 0.55;
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-mask-image: radial-gradient(62% 56% at 50% 56%, #000 22%, transparent 78%);
  mask-image: radial-gradient(62% 56% at 50% 56%, #000 22%, transparent 78%);
  transition: opacity 1.6s var(--ease);
}
.s-comeback .s-comeback__sky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 68%;
}
/* Re-tint the lime art to whatever accent the visitor picked */
.s-comeback .s-comeback__sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: color;
  opacity: 0.85;
}

.s-comeback .s-comeback__line { display: none; }
.s-comeback .s-comeback__line-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2;
  stroke-dasharray: 3 9;
}
.s-comeback .s-comeback__line-draw {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.8s var(--ease-in-out) 0.25s;
}

/* ---------- Steps (mobile first: stacked, path runs down the left) ---------- */
.s-comeback .s-comeback__steps { position: relative; display: grid; gap: 20px; }
.s-comeback .s-comeback__steps::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 21px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--accent), rgb(var(--accent-rgb) / 0.25));
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.6);
  transform-origin: top;
  transition: transform 1.6s var(--ease-in-out) 0.2s;
}
.s-comeback .s-comeback__step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}
.s-comeback .s-comeback__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(var(--accent-rgb) / 0.6);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, rgb(var(--accent-rgb) / 0.35), #111111 70%);
  color: var(--accent);
  font: 700 16px/1 var(--font-display);
  box-shadow: 0 0 0 6px var(--bg), 0 0 26px rgb(var(--accent-rgb) / 0.45);
}

.s-comeback .s-comeback__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), transparent 45%), rgb(17 17 17 / 0.84);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 60px -36px rgba(0, 0, 0, 0.95);
}
.s-comeback .s-comeback__card--lit {
  border-color: rgb(var(--accent-rgb) / 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 44px -18px rgb(var(--accent-rgb) / 0.55), 0 30px 60px -36px rgba(0, 0, 0, 0.95);
}
.s-comeback .s-comeback__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.s-comeback .s-comeback__cap { margin-top: auto; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }

/* ---------- Mock screens (app kit, scaled up a notch to read at card size) ---------- */
.s-comeback .s-comeback__screen {
  position: relative;
  max-width: 440px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 18px;
  background: linear-gradient(160deg, #161616, #0b0b0b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-family: var(--font-display);
  font-feature-settings: "ss01" 1, "tnum" 1;
}
.s-comeback .s-comeback__screen .app-label { font-size: 10px; }
.s-comeback .s-comeback__screen .app-meta { font-size: 9.5px; }
.s-comeback .s-comeback__screen .app-title { font-size: 15px; }
.s-comeback .s-comeback__screen .app-pill { padding: 4px 8px; font-size: 8.5px; }
.s-comeback .s-comeback__screen .app-item { padding: 11px 12px; }
.s-comeback .s-comeback__screen .app-check { width: 20px; height: 20px; }
.s-comeback .s-comeback__screen .app-check svg { width: 11px; height: 11px; }

/* 1 · A day stays open */
.s-comeback .s-comeback__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.s-comeback .s-comeback__op { display: flex; align-items: center; gap: 10px; }
.s-comeback .s-comeback__op-text { display: grid; flex: 1; gap: 4px; min-width: 0; }
.s-comeback .s-comeback__clock { margin-top: 16px; }
.s-comeback .s-comeback__clock-track { position: relative; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.s-comeback .s-comeback__clock-track::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  bottom: -4px;
  width: 2px;
  border-radius: 1px;
  background: var(--line-3);
}
.s-comeback .s-comeback__clock-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 58%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.12), rgb(var(--accent-rgb) / 0.6));
}
.s-comeback .s-comeback__clock-track i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.2), 0 0 12px rgb(var(--accent-rgb) / 0.8);
}
.s-comeback .s-comeback__clock-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  color: #a1a1aa;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 2 · A shield covers it */
.s-comeback .s-comeback__screen--shield { display: grid; justify-items: center; gap: 10px; padding: 20px 16px; text-align: center; }
.s-comeback .s-comeback__shield {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 2px;
  border: 1px solid rgb(var(--accent-rgb) / 0.5);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 30%, rgb(var(--accent-rgb) / 0.3), rgb(var(--accent-rgb) / 0.04) 70%);
  color: var(--accent);
  box-shadow: 0 0 30px -6px rgb(var(--accent-rgb) / 0.6);
}
.s-comeback .s-comeback__shield svg { width: 26px; height: 26px; }
.s-comeback .s-comeback__shield-text { max-width: 26ch; color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; }
.s-comeback .s-comeback__pips { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.s-comeback .s-comeback__pips > span:first-child,
.s-comeback .s-comeback__days { display: inline-flex; gap: 4px; }
.s-comeback .s-comeback__pips i,
.s-comeback .s-comeback__days i { width: 18px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.s-comeback .s-comeback__pips i.is-on,
.s-comeback .s-comeback__days i.is-on { background: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.7); }

/* 3 · Start again, gently: stacked views cross-fade */
.s-comeback .s-comeback__screen--views { display: grid; padding: 16px; }
.s-comeback .s-comeback__view {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s 0.3s;
}
.s-comeback .s-comeback__view.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.45s var(--ease) 0.05s, transform 0.5s var(--ease) 0.05s, visibility 0s;
}
.s-comeback .s-comeback__pal {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 72%, rgb(var(--accent-rgb) / 0.24), transparent 70%);
}
.s-comeback .s-comeback__pal img {
  position: absolute;
  top: calc(var(--row) * -100%);
  left: calc(var(--col) * -100%);
  width: 300%;
  max-width: none;
  height: 400%;
}
.s-comeback .s-comeback__vh {
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.s-comeback .s-comeback__vh:focus { outline: none; }
.s-comeback .s-comeback__vt { color: var(--text-2); font-family: var(--font-body); font-size: 14px; line-height: 1.5; }
.s-comeback .s-comeback__btns { display: grid; gap: 8px; width: 100%; margin-top: 4px; }
.s-comeback .s-comeback__btn {
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-align: center;
  white-space: normal;
  transition: box-shadow 0.25s var(--ease), border-color 0.2s, background-color 0.2s;
}
.s-comeback .s-comeback__btn.app-btn--solid { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 24px -10px rgb(var(--accent-rgb) / 0.7); }
.s-comeback .s-comeback__btn.app-btn--primary:hover { border-color: var(--accent); background: rgb(var(--accent-rgb) / 0.08); }
.s-comeback .s-comeback__btn.app-btn--solid:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 30px -8px rgb(var(--accent-rgb) / 0.85); }
.s-comeback .s-comeback__mini { display: grid; gap: 6px; width: 100%; }
.s-comeback .s-comeback__mini li { display: flex; align-items: center; gap: 10px; }
.s-comeback .s-comeback__mini .app-title { flex: 1; min-width: 0; font-size: 14px; }
.s-comeback .s-comeback__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 2px;
  padding: 0 16px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--text-2);
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s;
}
.s-comeback .s-comeback__back:hover { border-color: rgb(var(--accent-rgb) / 0.6); color: var(--accent); }
.s-comeback .s-comeback__back svg { width: 15px; height: 15px; }

/* ---------- Draw-in (JS arms it; without JS everything is shown) ---------- */
.s-comeback .s-comeback__stage.is-armed:not(.is-drawn) .s-comeback__sky { opacity: 0; }
.s-comeback .s-comeback__stage.is-armed:not(.is-drawn) .s-comeback__line-draw { stroke-dashoffset: 1; }
.s-comeback .s-comeback__stage.is-armed:not(.is-drawn) .s-comeback__steps::before { transform: scaleY(0); }

/* ---------- Desktop: three across, the path weaves through the numbers ---------- */
@media (min-width: 900px) {
  .s-comeback .s-comeback__line {
    position: absolute;
    top: var(--pad);
    left: 0;
    display: block;
    width: 100%;
    height: 120px;
    overflow: visible;
    filter: drop-shadow(0 0 6px rgb(var(--accent-rgb) / 0.8)) drop-shadow(0 0 18px rgb(var(--accent-rgb) / 0.4));
    pointer-events: none;
  }
  .s-comeback .s-comeback__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .s-comeback .s-comeback__steps::before { display: none; }
  .s-comeback .s-comeback__step { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .s-comeback .s-comeback__node { margin: 38px 0; }
  .s-comeback .s-comeback__card { align-self: stretch; flex: 1; padding: 20px; }
  .s-comeback .s-comeback__screen { max-width: none; }
}
@media (min-width: 1180px) {
  .s-comeback .s-comeback__card { padding: 22px; }
  .s-comeback .s-comeback__title { font-size: 20px; }
}

/* Balance the first two cards: their screens take the spare height, content centred */
.s-comeback .s-comeback__step:nth-child(-n + 2) .s-comeback__screen {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.s-comeback .s-comeback__op-text .app-title,
.s-comeback .s-comeback__op-text .app-meta { white-space: nowrap; }

/* ---------- pricing ---------- */
.s-pricing .s-pricing__head-cta { margin-top: 8px; }

.s-pricing .s-pricing__plans {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 20px;
  max-width: 520px;
  margin-inline: auto;
}
/* Soft accent bloom behind the highlighted plan */
.s-pricing .s-pricing__plans::before {
  content: "";
  position: absolute;
  inset: 45% -12% -8% -12%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 0.13), transparent);
  filter: blur(30px);
  pointer-events: none;
}

.s-pricing .s-pricing__plan {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--r-lg);
}

/* Name on the left, price on the right — the price note sits under the figure */
.s-pricing .s-pricing__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.s-pricing .s-pricing__name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.s-pricing .s-pricing__price {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex: none;
  text-align: right;
}
.s-pricing .s-pricing__price strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  font-feature-settings: "tnum" 1;
}
.s-pricing .s-pricing__price small {
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.4;
}
.s-pricing .s-pricing__price small span { display: block; }

.s-pricing .s-pricing__list {
  display: grid;
  align-content: start;
  gap: 13px;
  flex: 1;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.s-pricing .s-pricing__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.5;
}
.s-pricing .s-pricing__tick {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1.5px;
  flex: none;
  border: 1px solid rgb(var(--accent-rgb) / 0.32);
  border-radius: 50%;
  background: rgb(var(--accent-rgb) / 0.1);
  color: var(--accent);
}
.s-pricing .s-pricing__tick svg { width: 11px; height: 11px; }

.s-pricing .s-pricing__cta { margin-top: 30px; }
.s-pricing .s-pricing__cta .btn { width: 100%; }
.s-pricing .s-pricing__fine {
  margin-top: 14px;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

/* Highlighted plan: accent gradient border + ribbon, like a featured tier */
.s-pricing .s-pricing__plan--featured {
  padding-top: 0;
  border: 1px solid transparent;
  background:
    radial-gradient(90% 55% at 50% 0%, rgb(var(--accent-rgb) / 0.11), transparent 70%) padding-box,
    linear-gradient(160deg, #171717, #0e0e0e 70%) padding-box,
    linear-gradient(165deg,
      color-mix(in oklab, var(--accent) 75%, #ffffff) 0%,
      rgb(var(--accent-rgb) / 0.55) 30%,
      rgb(var(--accent-rgb) / 0.14) 62%,
      color-mix(in oklab, var(--accent) 70%, #1fd8a4) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 40px 90px -42px rgb(var(--accent-rgb) / 0.42);
}
.s-pricing .s-pricing__ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin-inline: -28px;
  padding: 8px 16px;
  background: linear-gradient(100deg,
    color-mix(in oklab, var(--accent) 68%, #ffffff) 0%,
    var(--accent) 45%,
    color-mix(in oklab, var(--accent) 78%, #1fd8a4) 100%);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.005em;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.s-pricing .s-pricing__ribbon svg { width: 15px; height: 15px; flex: none; }
.s-pricing .s-pricing__plan--featured .s-pricing__top { margin-top: 29px; }

@media (min-width: 760px) {
  .s-pricing .s-pricing__plans { max-width: 900px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .s-pricing .s-pricing__plans::before { inset: 0 -14% -12% 40%; }

  /* Subgrid: name/price, list, button and fine print line up across both
     plans and the card bodies end level; only the ribbon rises above. */
  @supports (grid-template-rows: subgrid) {
    .s-pricing .s-pricing__plans { grid-template-rows: auto auto 1fr auto auto; row-gap: 0; }
    .s-pricing .s-pricing__plan { display: grid; grid-template-rows: subgrid; row-gap: 0; grid-row: 2 / 6; }
    .s-pricing .s-pricing__plan--featured { grid-row: 1 / 6; grid-column: 2; }
  }
}

@media (min-width: 760px) and (max-width: 959px) {
  .s-pricing .s-pricing__plan { padding-inline: 24px; }
  .s-pricing .s-pricing__ribbon { margin-inline: -24px; }
  .s-pricing .s-pricing__cta .btn { padding-inline: 16px; }
}

@media (max-width: 380px) {
  .s-pricing .s-pricing__plan { padding-inline: 22px; }
  .s-pricing .s-pricing__ribbon { margin-inline: -22px; }
  .s-pricing .s-pricing__price strong { font-size: 40px; }
}

/* ---------- principles ---------- */
/* Masonry wall of the app's own rules, laid out like a testimonial wall */
.s-principles .s-principles__viewport {
  position: relative;
  margin-inline: -12px;
  padding-inline: 12px;
}
.s-principles .s-principles__wall {
  columns: 1;
  column-gap: 20px;
}

.s-principles .s-principles__card {
  break-inside: avoid;
  margin-bottom: 20px;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background-color: #121212;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.045), transparent 45%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 50px -38px rgba(0, 0, 0, 0.9);
}
.s-principles .s-principles__card--lit {
  border-color: rgb(var(--accent-rgb) / 0.2);
  background-image:
    radial-gradient(120% 75% at 0% 0%, rgb(var(--accent-rgb) / 0.1), transparent 62%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.045), transparent 45%);
}

.s-principles .s-principles__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.s-principles .s-principles__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid rgb(var(--accent-rgb) / 0.28);
  border-radius: 11px;
  background: linear-gradient(150deg, rgb(var(--accent-rgb) / 0.2), rgb(var(--accent-rgb) / 0.04));
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 18px -6px rgb(var(--accent-rgb) / 0.45);
}
.s-principles .s-principles__icon svg { width: 17px; height: 17px; }
.s-principles .s-principles__who { flex: 1; min-width: 0; }
.s-principles .s-principles__name {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.s-principles .s-principles__where {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.3;
}
/* Small app mark at the right, where a testimonial would show its source */
.s-principles .s-principles__src {
  display: grid;
  place-items: center;
  align-self: flex-start;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: #050505;
  color: var(--accent);
}
.s-principles .s-principles__src svg { width: 8px; height: 12px; }

.s-principles .s-principles__quote {
  margin-top: 18px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.s-principles .s-principles__quote--lg { font-size: 20px; line-height: 1.36; letter-spacing: -0.022em; }
.s-principles .s-principles__note {
  margin-top: 12px;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.55;
}

/* Collapsed wall (only when the script runs): fades out at the bottom */
.s-principles .s-principles__viewport.is-collapsible {
  --collapsed: 1080px;
  overflow: hidden;
  transition: max-height 0.8s var(--ease);
}
.s-principles .s-principles__viewport.is-collapsible:not(.is-open) {
  max-height: var(--collapsed);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 260px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 260px), transparent);
}

.s-principles .s-principles__more {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.s-principles .s-principles__toggle[hidden] { display: none; }
.s-principles .s-principles__toggle svg { transition: transform 0.3s var(--ease); }
.s-principles .s-principles__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (min-width: 640px) {
  .s-principles .s-principles__wall { columns: 2; }
  .s-principles .s-principles__viewport.is-collapsible { --collapsed: 900px; }
}

@media (min-width: 1000px) {
  .s-principles .s-principles__wall { columns: 3; column-gap: 22px; }
  .s-principles .s-principles__card { margin-bottom: 22px; padding: 24px 24px 26px; }
  .s-principles .s-principles__quote { font-size: 18px; }
  .s-principles .s-principles__quote--lg { font-size: 21px; }
  .s-principles .s-principles__viewport.is-collapsible { --collapsed: 760px; }
}

/* ---------- roadmap ---------- */
/* Roadmap: header row with arrows, then a scroll-snap carousel that bleeds to the right edge */
.s-roadmap .s-roadmap__head {
  display: grid;
  justify-items: center;
  gap: 28px;
  margin-bottom: clamp(32px, 5vw, 52px);
  text-align: center;
}
.s-roadmap .s-roadmap__intro { display: grid; justify-items: center; gap: 16px; max-width: 640px; }
.s-roadmap .s-roadmap__intro .link-arrow { min-height: 44px; }
.s-roadmap .s-roadmap__intro .link-arrow svg { width: 16px; height: 16px; }
@media (min-width: 900px) {
  .s-roadmap .s-roadmap__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; justify-items: stretch; text-align: left; }
  .s-roadmap .s-roadmap__intro { justify-items: start; }
}

.s-roadmap .s-roadmap__nav { display: flex; gap: 10px; }
.s-roadmap .s-roadmap__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text);
  transition: border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s var(--ease);
}
.s-roadmap .s-roadmap__arrow svg { width: 20px; height: 20px; }
.s-roadmap .s-roadmap__arrow:hover:not([aria-disabled="true"]) { border-color: rgb(var(--accent-rgb) / 0.55); color: var(--accent); }
.s-roadmap .s-roadmap__arrow:active:not([aria-disabled="true"]) { transform: scale(0.95); }
.s-roadmap .s-roadmap__arrow[aria-disabled="true"] { opacity: 0.35; cursor: default; }

/* The track lines its first card up with the container edge and runs off the right of the page */
.s-roadmap .s-roadmap__track {
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
}
.s-roadmap .s-roadmap__track::-webkit-scrollbar { display: none; }
.s-roadmap .s-roadmap__track:focus-visible { outline-offset: -2px; border-radius: 0; }
.s-roadmap .s-roadmap__list {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 6px var(--edge) 24px;
}
.s-roadmap .s-roadmap__item { width: min(300px, 80vw); flex: none; scroll-snap-align: start; }

.s-roadmap .s-roadmap__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 22px;
  transition: border-color 0.3s, transform 0.4s var(--ease);
}
.s-roadmap .s-roadmap__card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.s-roadmap .s-roadmap__card .title { margin-top: 16px; }
.s-roadmap .s-roadmap__card > p { margin: 6px 0 22px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.s-roadmap .s-roadmap__card--now { border-color: rgb(var(--accent-rgb) / 0.3); }

/* Shared visual well */
.s-roadmap .s-roadmap__visual {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  width: 100%;
  height: 150px;
  margin-top: auto;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(80% 90% at 50% 110%, rgb(var(--accent-rgb) / 0.09), transparent 70%),
    #0c0c0c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-family: var(--font-display);
}
.s-roadmap .s-roadmap__vlabel { color: #a1a1aa; font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; white-space: nowrap; }

/* 1 · ask the record */
.s-roadmap .s-roadmap__v-ask { justify-items: stretch; }
.s-roadmap .s-roadmap__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 36px;
  padding: 0 4px 0 13px;
  border: 1px solid rgb(var(--accent-rgb) / 0.4);
  border-radius: 999px;
  background: #161616;
  box-shadow: 0 0 18px -8px rgb(var(--accent-rgb) / 0.5);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.s-roadmap .s-roadmap__field > span { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; }
.s-roadmap .s-roadmap__caret { width: 1.5px; height: 13px; margin-left: 2px; background: var(--accent); animation: s-roadmap-blink 1.1s steps(1) infinite; }
.s-roadmap .s-roadmap__field b { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.s-roadmap .s-roadmap__field b svg { width: 14px; height: 14px; }
.s-roadmap .s-roadmap__reply {
  position: relative;
  display: grid;
  gap: 6px;
  margin-right: 24px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px 12px 12px 4px;
  background: #171717;
}
.s-roadmap .s-roadmap__reply > i { display: block; width: var(--w); height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.s-roadmap .s-roadmap__reply .s-roadmap__vlabel { color: var(--accent); }
.s-roadmap .s-roadmap__mini-bars { position: absolute; right: 12px; bottom: 9px; display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.s-roadmap .s-roadmap__mini-bars i { width: 4px; height: calc(var(--v) * 100%); border-radius: 1px; background: rgb(var(--accent-rgb) / 0.7); }

/* 2 · voice */
.s-roadmap .s-roadmap__voice { display: flex; align-items: center; gap: 12px; }
.s-roadmap .s-roadmap__wave { display: flex; align-items: center; gap: 3px; height: 30px; }
.s-roadmap .s-roadmap__wave i {
  width: 3px;
  height: var(--h);
  border-radius: 2px;
  background: linear-gradient(to top, rgb(var(--accent-rgb) / 0.3), var(--accent));
  animation: s-roadmap-level 1.4s var(--ease-in-out) infinite alternate;
}
.s-roadmap .s-roadmap__wave i:nth-child(2n) { animation-delay: -0.5s; }
.s-roadmap .s-roadmap__wave i:nth-child(3n) { animation-delay: -0.9s; }
.s-roadmap .s-roadmap__mic {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgb(var(--accent-rgb) / 0.6);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 85%, rgb(var(--accent-rgb) / 0.3), #141414 72%);
  color: var(--accent);
  box-shadow: 0 0 22px -4px rgb(var(--accent-rgb) / 0.5);
}
.s-roadmap .s-roadmap__mic svg { width: 20px; height: 20px; }
.s-roadmap .s-roadmap__mic::before,
.s-roadmap .s-roadmap__mic::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgb(var(--accent-rgb) / 0.5);
  border-radius: 50%;
  animation: s-roadmap-ping 2.4s var(--ease) infinite;
}
.s-roadmap .s-roadmap__mic::after { animation-delay: 1.2s; }
.s-roadmap .s-roadmap__landed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #171717;
  color: var(--text);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.s-roadmap .s-roadmap__landed svg { width: 12px; height: 12px; color: var(--accent); }

/* 3 · weekly debrief */
.s-roadmap .s-roadmap__v-week { justify-items: start; align-content: space-between; }
.s-roadmap .s-roadmap__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: 100%; height: 62px; }
.s-roadmap .s-roadmap__days i {
  position: relative;
  display: grid;
  align-items: end;
  justify-items: center;
  padding-bottom: 0;
  color: #a1a1aa;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 700;
}
.s-roadmap .s-roadmap__days i::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 16px;
  height: max(5px, calc(var(--v) * 44px));
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(to top, rgb(var(--accent-rgb) / 0.35), var(--accent));
}
.s-roadmap .s-roadmap__days .is-off::before { background: none; border: 1px dashed rgba(255, 255, 255, 0.22); }
.s-roadmap .s-roadmap__days .is-today { color: var(--accent); }
.s-roadmap .s-roadmap__days .is-today::before { opacity: 0.55; }
.s-roadmap .s-roadmap__vnote { color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }

/* 4 · connections: generic glyph tiles wired to Life OS */
.s-roadmap .s-roadmap__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-roadmap .s-roadmap__wires path {
  fill: none;
  stroke: rgb(var(--accent-rgb) / 0.45);
  stroke-width: 1.2;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
  animation: s-roadmap-flow 1.6s linear infinite;
}
.s-roadmap .s-roadmap__node,
.s-roadmap .s-roadmap__hub {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 12px;
  transform: translate(-50%, -50%);
}
.s-roadmap .s-roadmap__node {
  left: var(--x);
  top: var(--y);
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-2);
  background: #181818;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-2);
}
.s-roadmap .s-roadmap__node svg { width: 17px; height: 17px; }
.s-roadmap .s-roadmap__hub {
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(var(--accent-rgb) / 0.55);
  border-radius: 14px;
  background: radial-gradient(circle at 30% 20%, rgb(var(--accent-rgb) / 0.32), #141414 70%);
  box-shadow: 0 0 24px -4px rgb(var(--accent-rgb) / 0.45);
  color: var(--accent);
}
.s-roadmap .s-roadmap__hub svg { width: 20px; height: 20px; }

/* 5 · iPhone: today's Android phone beside a dashed outline of the planned one */
.s-roadmap .s-roadmap__v-ios { grid-auto-flow: column; justify-content: center; gap: 22px; align-content: end; padding-bottom: 12px; }
.s-roadmap .s-roadmap__device { display: grid; justify-items: center; gap: 8px; }
.s-roadmap .s-roadmap__phone {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 5px;
  width: 56px;
  height: 100px;
  padding: 18px 8px 0;
  border: 1px solid rgb(var(--accent-rgb) / 0.5);
  border-radius: 14px;
  background: linear-gradient(170deg, rgb(var(--accent-rgb) / 0.12), #121212 55%);
  box-shadow: 0 0 22px -8px rgb(var(--accent-rgb) / 0.5);
  color: var(--accent);
}
.s-roadmap .s-roadmap__isl { position: absolute; top: 5px; left: 50%; width: 16px; height: 4px; border-radius: 4px; background: #000; transform: translateX(-50%); }
.s-roadmap .s-roadmap__phone svg { width: 14px; height: 14px; margin-bottom: 4px; }
.s-roadmap .s-roadmap__phone b { justify-self: stretch; width: var(--w); height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); }
.s-roadmap .s-roadmap__device--ghost .s-roadmap__phone {
  border: 1px dashed rgba(255, 255, 255, 0.3);
  background: transparent;
  box-shadow: none;
  color: var(--text-4);
}
.s-roadmap .s-roadmap__device--ghost .s-roadmap__phone b { background: rgba(255, 255, 255, 0.06); }

/* 6 · more packs: a small fanned stack */
.s-roadmap .s-roadmap__v-packs { display: block; }
.s-roadmap .s-roadmap__pack {
  position: absolute;
  left: 50%;
  top: 22px;
  display: grid;
  gap: 6px;
  width: 112px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: linear-gradient(160deg, #1f1f1f, #141414);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 30px -14px rgba(0, 0, 0, 0.9);
  color: var(--text-2);
  transform: translateX(var(--x)) rotate(var(--r));
  transition: transform 0.5s var(--ease);
}
.s-roadmap .s-roadmap__pack:last-child { border-color: rgb(var(--accent-rgb) / 0.45); color: var(--accent); }
.s-roadmap .s-roadmap__pack svg { width: 16px; height: 16px; }
.s-roadmap .s-roadmap__pack b { color: var(--text); font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; white-space: nowrap; }
.s-roadmap .s-roadmap__pack i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.s-roadmap .s-roadmap__pack i:last-child { width: 64%; }
.s-roadmap .s-roadmap__card:hover .s-roadmap__pack:first-child { transform: translateX(calc(var(--x) - 10%)) rotate(calc(var(--r) - 4deg)); }
.s-roadmap .s-roadmap__card:hover .s-roadmap__pack:nth-child(2) { transform: translateX(calc(var(--x) + 10%)) rotate(calc(var(--r) + 4deg)); }

@keyframes s-roadmap-blink { 50% { opacity: 0; } }
@keyframes s-roadmap-level { to { transform: scaleY(0.45); } }
@keyframes s-roadmap-ping { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes s-roadmap-flow { to { stroke-dashoffset: -16; } }

/* ---------- widget ---------- */
/* Widget: Android home screen with the Life OS widgets; the medium widget can be dragged between rows */
.s-widget__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 24px;
}
.s-widget__stage::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  z-index: -1;
  width: min(680px, 100%);
  aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 0.16), transparent);
  filter: blur(12px);
  pointer-events: none;
}

/* ---------- Phone + home screen ---------- */
.s-widget__phone { --pw: 300px; }
.s-widget__screen { display: flex; flex-direction: column; background: #050807; }
.s-widget__wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}
.s-widget__screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.22) 38%, rgb(0 0 0 / 0.5) 100%);
  pointer-events: none;
}

.s-widget__clock {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6px;
  padding: 14px 20px 0;
  text-shadow: 0 2px 10px rgb(0 0 0 / 0.5);
}
.s-widget__clock b { font-size: 50px; font-weight: 400; line-height: 0.95; letter-spacing: -0.045em; }
.s-widget__clock span { color: #ececec; font-family: var(--font-body); font-size: 11px; font-weight: 500; }

.s-widget__home {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 18px 14px 0;
}
.s-widget__home > * { flex: none; transition: transform 0.4s var(--ease); }

.s-widget__split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s-widget__apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.s-widget__apps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; row-gap: 9px; }
.s-widget__app {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #f4f4f4;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
}
.s-widget__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.11);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 6px 14px -8px rgb(0 0 0 / 0.8);
  color: #fff;
}
.s-widget__ico svg { width: 18px; height: 18px; }
.s-widget__ico--lifeos { border-color: rgb(var(--accent-rgb) / 0.45); background: #000; }
.s-widget__ico--lifeos img { width: 100%; height: 100%; object-fit: cover; }

.s-widget__dock {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  margin: 12px 12px 0;
  padding: 9px 8px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 26px;
  background: rgb(255 255 255 / 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.s-widget__gesture {
  position: relative;
  z-index: 2;
  width: 34%;
  height: 4px;
  margin: 10px auto 8px;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.7);
}

/* ---------- The Life OS widgets ---------- */
.s-widget__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.s-widget__wlabel {
  color: var(--accent);
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.s-widget__small {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  background: #08130a;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 10px 24px -12px rgb(0 0 0 / 0.85);
}
.s-widget__sbrand { position: absolute; top: 10px; left: 10px; }
.s-widget__sstat { position: absolute; bottom: 10px; left: 10px; display: grid; gap: 3px; }
.s-widget__sstat b { font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }

.s-widget__medium {
  position: relative;
  z-index: 3;
  aspect-ratio: 480 / 150;
  overflow: hidden;
  border-radius: 18px;
  background: #08130a;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 10px 24px -12px rgb(0 0 0 / 0.85);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* spring back into the slot on release */
  transition: transform 0.55s cubic-bezier(0.34, 1.45, 0.64, 1), scale 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.s-widget__medium:hover { box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.45), 0 10px 24px -12px rgb(0 0 0 / 0.85); }
.s-widget__medium:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 18px; }
.s-widget__medium.is-dragging {
  z-index: 6;
  scale: 1.04;
  cursor: grabbing;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.55), 0 26px 40px -14px rgb(0 0 0 / 0.95), 0 0 30px -6px rgb(var(--accent-rgb) / 0.45);
  transition: scale 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.s-widget__mcopy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0 15% 0 27%;
}
.s-widget__whead { font-size: 14px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.s-widget__wstatus {
  overflow: hidden;
  color: #d3dbd3;
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.s-widget__wstat { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; }
.s-widget__wstat b { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.s-widget__wgo {
  position: absolute;
  top: 50%;
  right: 3.5%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35);
  color: #fff;
  translate: 0 -50%;
}
.s-widget__wgo svg { width: 14px; height: 14px; }

/* ---------- Hint + floating chips ---------- */
.s-widget__hint {
  order: -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.s-widget__hint-arrow { display: none; }
.s-widget__hint-down { width: 16px; height: 16px; color: var(--accent); }

.s-widget__floats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 520px;
}
.s-widget__float {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: rgb(22 22 22 / 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 18px 40px -20px rgb(0 0 0 / 0.9);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.s-widget__float b { color: var(--accent); font-weight: 600; }
.s-widget__fico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
  border-radius: 10px;
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--accent);
  flex: none;
}
.s-widget__fico svg { width: 15px; height: 15px; }
.s-widget__pips { display: inline-flex; gap: 3px; }
.s-widget__pips i { width: 6px; height: 12px; border-radius: 2px; background: rgb(255 255 255 / 0.15); }
.s-widget__pips .is-on { background: var(--accent); box-shadow: 0 0 6px rgb(var(--accent-rgb) / 0.6); }

@media (min-width: 768px) {
  .s-widget__phone { --pw: 320px; }
}

/* Desktop: chips float around the phone, the hint points at the widget */
@media (min-width: 1100px) {
  .s-widget__stage { gap: 0; }
  .s-widget__floats {
    position: absolute;
    inset: 0;
    display: block;
    max-width: none;
    pointer-events: none;
  }
  .s-widget__float { position: absolute; animation: s-widget-float 7s var(--ease-in-out) infinite alternate; }
  .s-widget__float--open { top: 22%; right: calc(50% + 200px); rotate: -4deg; }
  .s-widget__float--mission { top: 56%; right: calc(50% + 230px); rotate: 3deg; animation-delay: -2.5s; }
  .s-widget__float--shields { top: 15%; left: calc(50% + 205px); rotate: 4deg; animation-delay: -4s; }
  .s-widget__float--focus { top: 66%; left: calc(50% + 200px); rotate: -3deg; animation-delay: -1.2s; }

  .s-widget__hint {
    position: absolute;
    top: 43%;
    left: calc(50% + 172px);
    display: grid;
    justify-items: start;
    gap: 2px;
    rotate: -5deg;
  }
  .s-widget__hint-arrow { display: block; width: 100px; height: 56px; color: var(--accent); }
  .s-widget__hint-down { display: none; }
  .s-widget__hint span { margin-left: 70px; }
}

@keyframes s-widget-float {
  from { translate: 0 0; }
  to { translate: 0 -10px; }
}

/* ---------- cta ---------- */
.s-cta { padding-bottom: clamp(40px, 6vw, 88px); }

.s-cta__band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px) clamp(150px, 17vw, 230px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: radial-gradient(90% 60% at 50% 0%, #121212, #050505 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 60px 120px -70px rgb(var(--accent-rgb) / 0.45);
}

/* Planet backdrop. The art box keeps the image's 3:2 ratio and sits on the band's
   bottom edge, so the rim lands in the same place at every width.
   ponytail: rotate(16deg) scale(2) levels the bright stretch of the rim (image px ~1150,300,
   the transform-origin) into a horizon; translate parks it at 60% across, 80% down the box.
   Re-derive these three numbers if the art file changes. */
.s-cta__art {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: max(100%, 720px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  isolation: isolate;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 52%, rgba(0, 0, 0, 0.55) 64%, #000 76%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 52%, rgba(0, 0, 0, 0.55) 64%, #000 76%);
  pointer-events: none;
}
.s-cta__art img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform-origin: 74.9% 29.3%;
  transform: translate(-14.9%, 50.7%) rotate(16deg) scale(2);
  filter: brightness(0.82) contrast(1.06);
}
/* Re-tint the lime art to whatever accent the visitor picked. */
.s-cta__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: color;
}

/* Veil behind the copy + an accent bloom pooled over the horizon. */
.s-cta__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(62% 52% at 50% 42%, rgb(5 5 5 / 0.78), transparent 74%),
    radial-gradient(46% 26% at 60% 100%, rgb(var(--accent-rgb) / 0.16), transparent 72%);
  pointer-events: none;
}

/* Faint stars in the upper sky */
.s-cta__band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(1px 1px at 8% 14%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 17% 41%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 26% 9%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 34% 27%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 46% 6%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 63% 18%, rgb(var(--accent-rgb) / 0.8), transparent),
    radial-gradient(1px 1px at 71% 8%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 79% 33%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 88% 12%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 93% 44%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 4% 52%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 13% 70%, rgb(var(--accent-rgb) / 0.6), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 78%);
  animation: s-cta-twinkle 5s var(--ease-in-out) infinite alternate;
  pointer-events: none;
}
@keyframes s-cta-twinkle {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

.s-cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

/* The Companion: a real button, waves when pressed */
.s-cta__buddy {
  position: relative;
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  margin-bottom: clamp(8px, 1.5vw, 16px);
  border-radius: 50%;
  transition: transform 0.35s var(--ease);
}
.s-cta__buddy::before {
  content: "";
  position: absolute;
  inset: 12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 0.3), transparent);
  filter: blur(14px);
}
.s-cta__buddy:hover { transform: translateY(-4px); }
.s-cta__buddy:active { transform: scale(0.97); }
.s-cta__buddy:focus-visible { outline-offset: 0; border-radius: 50%; }
.s-cta__buddy .sprite { --size: 140px; }

.s-cta__title { font-size: clamp(40px, 7.2vw, 84px); }
.s-cta__sub { max-width: 44ch; margin-top: clamp(18px, 2vw, 24px); }

.s-cta__row {
  justify-content: center;
  margin-top: clamp(28px, 3vw, 36px);
}

/* Free · No account · Works offline */
.s-cta__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  margin-top: 22px;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.5;
}
.s-cta__meta li + li::before {
  content: "\00B7";
  margin-inline: 10px;
  color: var(--text-4);
}

@media (max-width: 600px) {
  .s-cta__band { border-radius: var(--r-lg); }
  .s-cta__buddy { width: 128px; height: 128px; }
  .s-cta__buddy .sprite { --size: 120px; }
}

/* ---------- faq ---------- */
.s-faq .section-head { margin-bottom: clamp(32px, 5vw, 56px); }
.s-faq__link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgb(var(--accent-rgb) / 0.4);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: text-decoration-color 0.2s;
}
.s-faq__link:hover { text-decoration-color: currentColor; }

.s-faq__list {
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin-inline: auto;
}

.s-faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #111111;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.25s, background-color 0.25s;
}
.s-faq__item:hover { border-color: var(--line-2); }
.s-faq__item[open]:not(.is-closing) {
  border-color: var(--line-2);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), transparent 50%), #121212;
}

.s-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 16px 18px 16px 24px;
  border-radius: calc(var(--r-md) - 1px);
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 17.5px);
  font-weight: 550;
  letter-spacing: -0.015em;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.s-faq__q::-webkit-details-marker { display: none; }
.s-faq__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: calc(var(--r-md) - 1px);
}

/* Plus that turns into a close mark */
.s-faq__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--text-2);
  transition: transform 0.4s var(--ease), color 0.2s, border-color 0.2s, background-color 0.2s;
}
.s-faq__icon svg { width: 16px; height: 16px; }
.s-faq__item:hover .s-faq__icon { color: var(--text); border-color: var(--line-3); }
.s-faq__item[open]:not(.is-closing) .s-faq__icon {
  transform: rotate(45deg);
  border-color: rgb(var(--accent-rgb) / 0.45);
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent);
}

/* Height is animated on this wrapper by faq.js; padding lives on the <p> so 0 is truly 0. */
.s-faq__a { overflow: hidden; }
.s-faq__a p {
  max-width: 66ch;
  padding: 0 24px 24px;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.7;
}

@media (max-width: 600px) {
  .s-faq__q { padding: 14px 14px 14px 18px; gap: 14px; }
  .s-faq__a p { padding: 0 18px 20px; font-size: 15px; }
}


/* ---------- companion: live "ask in your own words" (AI shipped in v7) ---------- */
.s-companion .s-companion__card--live .s-companion__mic {
  border: 1px solid rgb(var(--accent-rgb) / 0.55);
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent);
}
.s-companion .s-companion__card--live .s-companion__wave { opacity: 1; }
.s-companion .s-companion__chat { display: grid; gap: 10px; margin-bottom: 16px; }
.s-companion .s-companion__you {
  justify-self: end;
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: rgb(var(--accent-rgb) / 0.14);
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  color: var(--text);
  font: 500 13.5px/1.45 var(--font-body);
}
.s-companion .s-companion__reply {
  max-width: 92%;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 16px 16px 16px 4px;
  background: rgb(28 28 28 / 0.9);
}
.s-companion .s-companion__reply .s-companion__label { margin-bottom: 8px; }
.s-companion .s-companion__reply ul { display: grid; gap: 6px; }
.s-companion .s-companion__reply li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--font-display);
  font-size: 12.5px;
}
.s-companion .s-companion__reply li b { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.s-companion .s-companion__reply li span { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.s-companion .s-companion__reply li i { color: var(--text-3); font-size: 10px; font-style: normal; font-weight: 650; letter-spacing: 0.1em; }
.s-companion .s-companion__approve { display: flex; gap: 8px; margin-top: 10px; }
.s-companion .s-companion__approve span {
  padding: 8px 12px;
  border: 1px solid var(--line-3);
  border-radius: 10px;
  color: var(--text-2);
  font: 700 10px/1 var(--font-display);
  letter-spacing: 0.14em;
}
.s-companion .s-companion__approve span:first-child { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

/* AI Companion is the headline feature now: it gets the full-width first row */
@media (min-width: 680px) {
  .s-companion .s-companion__card--live { grid-column: 1 / -1; grid-row: 1; }
  .s-companion .s-companion__card--ask { grid-row: 2; }
}
@media (min-width: 1000px) {
  .s-companion .s-companion__card--ask { grid-column: 1; grid-row: 2; }
  .s-companion .s-companion__card--timing { grid-column: 2; grid-row: 2; }
  .s-companion .s-companion__card--live {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .s-companion .s-companion__card--live .card__head { grid-column: 1; grid-row: 1; padding-top: 32px; }
  .s-companion .s-companion__card--live .card__head .title { font-size: clamp(22px, 2vw, 28px); }
  .s-companion .s-companion__card--live .card__head p { font-size: 16px; max-width: 34ch; }
  .s-companion .s-companion__card--live .s-companion__command { grid-column: 2; grid-row: 1 / span 2; margin: 24px 24px 24px 0; }
  .s-companion .s-companion__card--live .s-companion__later { grid-column: 1; grid-row: 2; align-self: end; max-width: 36ch; }
}

.s-companion .s-companion__can { display: grid; gap: 10px; margin-top: 18px; }
.s-companion .s-companion__can li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font: 15px/1.45 var(--font-body); }
.s-companion .s-companion__can svg {
  flex: none; width: 28px; height: 28px; padding: 6px; margin-top: -3px;
  border: 1px solid rgb(var(--accent-rgb) / 0.3); border-radius: 9px;
  background: rgb(var(--accent-rgb) / 0.08); color: var(--accent);
}
@media (max-width: 600px) {
  .s-companion .s-companion__reply { max-width: 100%; }
  .s-companion .s-companion__reply li { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .s-companion .s-companion__reply li span { white-space: normal; }
}