/* mimosa.works home page. Shared tokens and components live in orca.css. */

/* Small text on soft fills needs a deeper ink than the shared --success / --accent give in light mode (4.5:1). */
:root { --home-ok-ink: light-dark(#077150, var(--success)); --home-accent-ink: light-dark(#9a4405, var(--accent)); }

/* The header sits over the opening's sky until the page scrolls, then turns solid. */
.site-header { margin-bottom: calc(-1 * var(--header-height)); }
.nav-link, .nav-signin { padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }
.site-nav .nav-signin { margin-inline: var(--space-1) var(--space-2); color: var(--text); }
@media (max-width: 1080px) { .nav-link { display: none; } }

/* Opening (opening.js): a pixel-art sky poured like a mimosa, champagne above and orange at the horizon, with
   an orange slice for its sun; the copy beside the sun, and Mimosa in a squircle window playing a recording
   of the demo. It follows the theme: a morning in light, a plum dusk in dark. Without script the sky is a
   still gradient of the same colours and the window a rounded rectangle showing the poster. */
.opening {
  --sun: clamp(17rem, 31vw, 27rem);
  --stage-gap: clamp(2.5rem, 1.5rem + 2.4vw, 3.75rem);
  --horizon-ink: #3a1905;
  position: relative; isolation: isolate; overflow: clip;
  padding-block: calc(var(--header-height) + clamp(2rem, 1rem + 2.6vw, 3.75rem)) calc(var(--space-20) + var(--space-10));
  color: var(--text); background: light-dark(#fff9ea, #100b17);
}
.opening__sky {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(180deg, light-dark(#fff9ea, #100b17) 0%, light-dark(#ffecc0, #22132c) 38%, light-dark(#ffc673, #7b2d50) 60%, light-dark(#ff9f47, #e6703a) 78%, light-dark(#fb7a1e, #ffc766) 96%);
}
/* The copy on the left; on the right the box the sun is drawn behind, a quarter of it tucked under the window. */
.opening__inner { display: grid; grid-template-columns: minmax(0, 1fr) var(--sun); align-items: end; column-gap: var(--space-10); }
.opening__copy { display: grid; justify-items: start; }
.opening__sun { width: var(--sun); aspect-ratio: 1; border-radius: 50%; margin-bottom: calc(-1 * var(--stage-gap) - 0.24 * var(--sun)); }
.opening__pill { color: var(--text); text-decoration: none; font-weight: var(--weight-medium); transition: border-color var(--dur-base), background-color var(--dur-base); }
.opening__pill:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-strong); }
.opening__pill svg { width: 0.9rem; height: 0.9rem; color: var(--text-subtle); transition: transform var(--dur-base) var(--ease-out); }
.opening__pill:hover svg { transform: translateX(2px); }
.opening__title { margin-block: var(--space-5) var(--space-4); font-size: clamp(2.7rem, 1.2rem + 4.2vw, 5.2rem); letter-spacing: -0.03em; }
.opening__accent {
  display: block;
  background: linear-gradient(100deg, light-dark(#c2410c, #ff8f2b) 0%, light-dark(#ea6a0a, #ffbe5c) 50%, light-dark(#f08c00, #ffe6b0) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.opening__lead { max-width: 36rem; }
.opening__actions { margin-top: var(--space-6); }
/* The window: a hairline of light on its edge and a deep shadow under it, continuous corners (opening.js). */
.opening__stage {
  width: min(1180px, 100% - 2 * var(--gutter)); margin: var(--stage-gap) auto 0;
  filter: drop-shadow(0 0 1px light-dark(rgb(58 25 5 / 0.5), rgb(255 240 220 / 0.4))) drop-shadow(0 34px 46px light-dark(rgb(122 52 0 / 0.36), rgb(64 20 10 / 0.5)));
}
.app-window {
  position: relative; container-type: inline-size; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 28px; background: #0b0d12;
}
.app-window__poster, .app-window__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-window__video { opacity: 0; transition: opacity 900ms var(--ease-out); }
.app-window__video[data-playing] { opacity: 1; }
/* Mimosa for Mac keeps the traffic lights in the strip above its top bar; the recording leaves it empty. */
.app-window__lights { position: absolute; top: 1.35cqi; left: 1.35cqi; display: flex; gap: 0.62cqi; }
.app-window__lights i { width: 0.92cqi; aspect-ratio: 1; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.25); }
.app-window__lights i:nth-child(2) { background: #febc2e; }
.app-window__lights i:nth-child(3) { background: #28c840; }
.app-window__rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.app-window__rim path { fill: none; stroke: rgb(246 240 227 / 0.22); stroke-width: 1.5; }
.app-window__toggle {
  position: absolute; right: 1.6cqi; bottom: 1.6cqi;
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3);
  border: 1px solid rgb(255 255 255 / 0.16); border-radius: var(--radius-pill);
  background: rgb(14 10 20 / 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #ddd6c5; font: var(--weight-medium) var(--text-xs) / 1.6 var(--font-sans); cursor: pointer;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.app-window:hover .app-window__toggle, .app-window__toggle:focus-visible, .app-window__toggle[aria-pressed="true"] { opacity: 1; }
.app-window__toggle[hidden] { display: none; }
.app-window__toggle svg { width: 0.75rem; height: 0.75rem; }
.app-window__toggle[aria-pressed="true"] .app-window__pause-icon, .app-window__toggle[aria-pressed="false"] .app-window__play-icon { display: none; }
/* The caption sits on the horizon, which is bright in both themes. */
.opening__caption { margin-top: var(--space-5); color: color-mix(in srgb, var(--horizon-ink) 82%, transparent); font-size: var(--text-sm); text-align: center; }
.opening__caption a { color: var(--horizon-ink); white-space: nowrap; }
/* The copy arrives in a short cascade, then the window rises into place; the title only moves. */
.opening__pill, .opening__lead, .opening__actions, .opening__stage { animation: opening-in 1s var(--ease-out) both; }
.opening__title { animation: opening-rise 1.1s var(--ease-out) 0.08s both; }
.opening__lead { animation-delay: 0.2s; }
.opening__actions { animation-delay: 0.3s; }
.opening__stage { animation-duration: 1.4s; animation-delay: 0.38s; }
@keyframes opening-in { from { opacity: 0; translate: 0 1.25rem; } }
@keyframes opening-rise { from { translate: 0 1.5rem; } }

/* The Lean workflow (T-393, home.js): one task on a loop through Lean's steps, left to right, over the
   dusk of the opening's sky. Without script the scene is a still gradient and the steps show as a list. */
.relay {
  --relay-ink: #0e0a14;
  --own-coordinator: #6f9dff; --own-worker: #e8d36b; --own-gatekeeper: #c48cff; --own-orca: #96a3be; --own-you: #48d6c4;
  position: relative; isolation: isolate; overflow: clip;
  margin-top: var(--section-gap);
  padding-block: var(--space-20) var(--space-16);
  color-scheme: dark; color: var(--text); background: var(--relay-ink);
}
.relay__scene {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 68%, #5a2247 0%, #341939 30%, #20132a 58%, #150f1d 82%, #0e0a14 100%);
}
.relay__grove { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.relay__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 12% 18%, rgb(14 10 20 / 0.8) 0%, rgb(14 10 20 / 0) 100%),
    linear-gradient(180deg, rgb(14 10 20 / 0.55) 0%, rgb(14 10 20 / 0) 22%, rgb(14 10 20 / 0) 82%, rgb(14 10 20 / 0.75) 100%);
}
.relay__inner { position: relative; }
.relay__copy { max-width: 42rem; }
/* The graph: a scroller that only scrolls when the screen is narrower than the graph (home.js follows the
   task there). Its canvases are sized by home.js; the step list is the no-script and screen-reader view. */
/* The graph, and the line and key under it, may run a little wider than the text column. */
.relay__stage, .relay__foot { --graph-w: min(100vw - 2 * var(--gutter), 82rem); width: var(--graph-w); margin-inline: calc((100% - var(--graph-w)) / 2); }
.relay__stage { position: relative; margin-top: var(--space-12); }
.relay__track { display: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.relay__track::-webkit-scrollbar { display: none; }
/* 1200px keeps every column 40 art pixels wide, room for a full-size ring (home.js R) and its labels. */
.relay__graph { position: relative; width: 100%; min-width: 1200px; height: 20rem; }
.relay__wires { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.relay__cast { position: absolute; inset: 0; width: 100%; height: 100%; }
.relay[data-drawn] .relay__track { display: block; }
.relay[data-drawn] .relay__steps { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.relay__steps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.relay__step {
  counter-increment: step; display: inline-flex; gap: var(--space-2); align-items: baseline;
  padding: var(--space-2) var(--space-3); border: 1px solid rgb(255 255 255 / 0.12); border-left: 3px solid var(--own); border-radius: var(--radius-md);
  background: rgb(14 10 20 / 0.55); color: #ddd6c5; font-size: var(--text-sm);
}
.relay__step::before { content: counter(step); color: var(--own); font: var(--weight-semibold) var(--text-xs) / 1 var(--font-mono); }
.relay__step strong { color: #fff; font-weight: var(--weight-semibold); }
.relay__step--coordinator, .relay__own--coordinator, .relay__now--coordinator { --own: var(--own-coordinator); }
.relay__step--worker, .relay__own--worker, .relay__now--worker { --own: var(--own-worker); }
.relay__step--gatekeeper, .relay__own--gatekeeper, .relay__now--gatekeeper { --own: var(--own-gatekeeper); }
.relay__step--orca, .relay__own--orca, .relay__now--orca { --own: var(--own-orca); }
.relay__step--you, .relay__own--you, .relay__now--you { --own: var(--own-you); }
/* Under the graph: what is happening now and the pause button, then the key. */
.relay__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-4) var(--space-6); margin-top: var(--space-4); }
.relay__foot[hidden] { display: none; }
.relay__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); min-height: 3.2em; margin: 0; color: #ddd6c5; font-size: var(--text-base); line-height: 1.6; }
.relay__now i { width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--own, #96a3be); box-shadow: 0 0 12px var(--own, #96a3be); }
.relay__now strong { color: var(--own, #fff); font: var(--weight-semibold) var(--text-xs) / 1.6 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.relay__now span { flex: 1 1 20rem; }
.relay__kicker {
  display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-8);
  color: #ffcf7a; font: var(--weight-semibold) var(--text-xs) / 1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase;
}
.relay__kicker::before { content: ""; width: 2.25rem; height: 1px; background: linear-gradient(90deg, transparent, #ffcf7a); }
.relay__title { margin-block: var(--space-4) var(--space-5); font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4.6rem); text-shadow: 0 4px 40px rgb(0 0 0 / 0.45); }
.relay__accent {
  background: linear-gradient(100deg, #ff8a1f 0%, #ffb648 45%, #ffe0a3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
.relay__lead { max-width: 38rem; color: #ddd6c5; }
.relay__actions { margin-top: var(--space-8); }
/* The key: who owns each step, the provider rings and the two kinds of wire. */
.relay__legend {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); padding: var(--space-3) var(--space-5);
  border: 1px solid rgb(255 255 255 / 0.12); border-radius: var(--radius-lg);
  background: rgb(14 10 20 / 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #ddd6c5; font: var(--weight-medium) var(--text-xs) / 1.4 var(--font-mono);
}
.relay__key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
.relay__key + .relay__key { padding-left: var(--space-8); border-left: 1px solid rgb(255 255 255 / 0.08); }
.relay__key li { display: inline-flex; align-items: center; gap: var(--space-2); }
.relay__own { width: 0.7rem; height: 0.7rem; border-radius: 2px; background: var(--own); }
.relay__wire { width: 1.5rem; height: 3px; background: repeating-linear-gradient(90deg, #f2c66d 0 3px, transparent 3px 6px); }
.relay__wire--repair { background: repeating-linear-gradient(90deg, #ff7f96 0 6px, transparent 6px 12px); }
.relay__ring { width: 0.85rem; height: 0.85rem; border: 3px solid var(--ring); border-radius: 50%; background: #1b1524; }
.relay__ring--claude { --ring: #ff9d63; }
.relay__ring--codex { --ring: #2fcf9c; }
.relay__ring--gemini { --ring: #8aa6ff; }
.relay__ring--grok { --ring: #d27bff; }
.relay__ring--muse { --ring: #f5c241; }
.relay__pause {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border: 1px solid rgb(255 255 255 / 0.16); border-radius: var(--radius-pill);
  background: rgb(14 10 20 / 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #ddd6c5; font: var(--weight-medium) var(--text-xs) / 1 var(--font-sans); cursor: pointer;
}
.relay__pause:hover { color: #fff; border-color: rgb(255 255 255 / 0.3); }
.relay__pause[hidden] { display: none; }
.relay__pause svg { width: 0.8rem; height: 0.8rem; }
.relay__pause[aria-pressed="true"] .relay__pause-icon, .relay__pause[aria-pressed="false"] .relay__play-icon { display: none; }

/* Everything after the opening rides up over it on a sheet. */
.sheet {
  position: relative; z-index: 1; margin-top: calc(-1 * var(--space-10));
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; background: var(--bg);
  box-shadow: inset 0 1px 0 var(--border), 0 -24px 60px -20px rgb(58 25 5 / 0.45);
}

/* Facts */
.facts { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem) 0; }
.facts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.fact { display: grid; gap: var(--space-2); align-content: start; padding-left: var(--space-5); border-left: 2px solid var(--border-strong); }
.fact:nth-child(1) { border-left-color: #ff9d1e; }
.fact:nth-child(2) { border-left-color: #f2c66d; }
.fact:nth-child(3) { border-left-color: #f3a4b5; }
.fact:nth-child(4) { border-left-color: #6fcf97; }
.fact strong { font: var(--weight-bold) var(--text-2xl) / 1.15 var(--font-display); letter-spacing: var(--tracking-tight); }
.fact span { color: var(--text-muted); font-size: var(--text-sm); }

/* Sections */
.section { padding-block: var(--section-gap) 0; }
.section__head { display: grid; justify-items: start; gap: var(--space-4); max-width: 46rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section__head--center { justify-items: center; text-align: center; margin-inline: auto; }

/* Card spotlight (home.js sets --mx/--my) */
[data-spotlight] { overflow: hidden; }
[data-spotlight]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 65%);
  transition: opacity var(--dur-slow) var(--ease-out);
}
[data-spotlight]:hover::before { opacity: 1; }

/* Provider marks: colour only, no logos. */
.provider-dot { display: inline-block; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--dot, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--accent)) 22%, transparent); }
.provider-dot--claude { --dot: #ff9d63; }
.provider-dot--codex { --dot: #2fcf9c; }
.provider-dot--gemini { --dot: #8aa6ff; }
.provider-dot--grok { --dot: #d27bff; }
.provider-dot--muse { --dot: #f5c241; }
.tag {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.5rem;
  border: 1px solid var(--tag-line); border-radius: var(--radius-pill); background: var(--tag-bg); color: var(--tag-ink);
  font: var(--weight-semibold) 0.72rem / 1.5 var(--font-sans); white-space: nowrap;
}
.tag::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: currentColor; }
.tag--claude { --tag-ink: light-dark(#a8481a, #ffb27a); --tag-bg: light-dark(#fff1e8, rgb(255 160 100 / 0.12)); --tag-line: light-dark(rgb(168 72 26 / 0.22), rgb(255 178 122 / 0.28)); }
.tag--codex { --tag-ink: light-dark(#08714f, #6ff0c8); --tag-bg: light-dark(#e8f8f1, rgb(80 230 180 / 0.1)); --tag-line: light-dark(rgb(8 113 79 / 0.22), rgb(111 240 200 / 0.26)); }
.tag--gemini { --tag-ink: light-dark(#2f47b5, #b0c2ff); --tag-bg: light-dark(#eef1ff, rgb(138 166 255 / 0.12)); --tag-line: light-dark(rgb(47 71 181 / 0.22), rgb(176 194 255 / 0.28)); }
.tag--grok { --tag-ink: light-dark(#7a2ca6, #e6b0ff); --tag-bg: light-dark(#f7ecff, rgb(210 123 255 / 0.12)); --tag-line: light-dark(rgb(122 44 166 / 0.22), rgb(230 176 255 / 0.28)); }
.tag--muse { --tag-ink: light-dark(#7a5300, #ffd67a); --tag-bg: light-dark(#fff6df, rgb(245 194 65 / 0.12)); --tag-line: light-dark(rgb(122 83 0 / 0.22), rgb(255 214 122 / 0.28)); }
.tag-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); }

/* Orchestration: the score */
.score { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.score::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(2rem - 1.5rem); height: calc(3rem + 1px); z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--border) 0 1px, transparent 1px 0.75rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.score__step { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--space-2); text-align: center; }
.score__step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0; top: calc(2rem - 1px); left: calc(50% + 2.6rem); width: calc(100% + var(--space-4) - 5.2rem); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--border-strong) 0 35%, var(--accent) 50%, var(--border-strong) 65% 100%) 0 0 / 300% 100%;
  animation: score-flow 2.8s linear infinite;
}
@keyframes score-flow { from { background-position: 100% 0; } to { background-position: 0 0; } }
.score__avatar, .score__crew { position: relative; z-index: 1; display: grid; place-items: center; height: 4rem; }
.score__avatar { width: 4rem; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-strong); box-shadow: var(--shadow-md), 0 0 0 6px var(--bg); }
.score__avatar img { width: 3rem; height: 3rem; }
.score__avatar--you { border: 0; background: linear-gradient(140deg, #ff8a1f, #ffc24a 60%, #ffe0a3); color: #fff; }
.score__avatar--you svg { width: 2rem; height: 2rem; }
.score__crew { display: flex; }
.score__crew img { width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 2px solid var(--bg); background: var(--surface-strong); box-shadow: var(--shadow-sm); }
.score__crew img + img { margin-left: -0.7rem; }
.score__role { margin-top: var(--space-2); color: var(--accent); font: var(--weight-semibold) var(--text-xs) / 1 var(--font-mono); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.score__step h3 { margin-top: var(--space-1); font-size: var(--text-lg); }
.score__step p { max-width: 15rem; color: var(--text-muted); font-size: var(--text-sm); }
.score__cue {
  position: absolute; z-index: 2; top: calc(2rem - 0.7rem); left: calc(100% + var(--space-4) / 2); translate: -50% 0;
  padding: 0.25rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-strong);
  color: var(--text-muted); font: var(--weight-semibold) 0.68rem / 1 var(--font-mono); white-space: nowrap; box-shadow: var(--shadow-sm);
}
.score__cue--end { position: static; translate: none; margin-top: var(--space-2); border-color: transparent; background: var(--success-soft); color: var(--home-ok-ink); box-shadow: none; }

.ensemble { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.talk { margin: 0; background: var(--surface-strong); box-shadow: var(--shadow-lg); backdrop-filter: none; }
.talk__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.talk__title { font-weight: var(--weight-semibold); }
.talk__live { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-subtle); font-size: var(--text-xs); }
.talk__list { display: grid; gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.talk__msg { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.talk__msg img { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--surface-sunken); }
.talk__who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.talk__to { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; color: var(--text-subtle); font-weight: var(--weight-regular); }
.talk__text { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-xs); background: var(--surface-sunken); font-size: var(--text-sm); }
.talk__text code { padding: 0.05rem 0.3rem; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--home-accent-ink); font-size: 0.85em; }
.talk__ok { color: var(--home-ok-ink); font-weight: var(--weight-bold); }

.points { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.points li { display: flex; gap: var(--space-4); align-items: flex-start; }
.points__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); font: var(--weight-bold) var(--text-xl) / 1 var(--font-mono); }
.points__icon svg { width: 1.4rem; height: 1.4rem; }
.points__icon--warm { background: color-mix(in srgb, var(--warm) 24%, transparent); color: light-dark(#7a4a00, var(--warm)); }
.points h3 { margin-bottom: var(--space-1); font-size: var(--text-lg); }
.points p { color: var(--text-muted); }
.points--plain { gap: var(--space-5); margin-top: var(--space-4); }
.points--plain li { padding-left: var(--space-4); border-left: 2px solid var(--border-strong); }
.points--plain h3 { font-size: var(--text-base); }
.points--plain p { font-size: var(--text-sm); }

/* Split sections */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--flip > :first-child { order: 2; }
.split__head { margin-bottom: 0; }
.split__note { color: var(--text-subtle); font-size: var(--text-sm); }
.provider-list { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.provider-list li { display: inline-flex; align-items: center; gap: 6px; padding: 0.35rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-strong); box-shadow: var(--shadow-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); }

.accounts {
  position: relative; display: grid; gap: var(--space-3); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  background: radial-gradient(28rem 18rem at 80% 0%, light-dark(rgb(255 157 99 / 0.12), rgb(255 157 99 / 0.1)), transparent 70%), radial-gradient(24rem 18rem at 10% 100%, light-dark(rgb(47 207 156 / 0.12), rgb(47 207 156 / 0.1)), transparent 70%), var(--surface-sunken);
}
.account {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-strong); box-shadow: var(--shadow-sm);
}
.account:nth-child(even) { margin-left: clamp(0.75rem, 3vw, 2.5rem); }
.account__glyph { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.55), transparent 42%), var(--glyph); }
.account--claude { --glyph: linear-gradient(135deg, #ffbe8a, #e8663a); }
.account--codex { --glyph: linear-gradient(135deg, #8ff5d6, #179b74); }
.account--gemini { --glyph: linear-gradient(135deg, #b9c8ff, #4d6ae8); }
.account--grok { --glyph: linear-gradient(135deg, #ecc0ff, #9a46d6); }
.account--muse { --glyph: linear-gradient(135deg, #ffe39a, #d99a10); }
.account strong { display: block; font-size: var(--text-sm); }
.account span { color: var(--text-subtle); font-size: var(--text-xs); }
.account .account__state { padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--home-ok-ink); font-weight: var(--weight-semibold); }
.picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.picker__label { margin-right: auto; color: var(--text-muted); font: var(--weight-semibold) var(--text-xs) / 1 var(--font-mono); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.picker__field { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-strong); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.picker__field::after { content: ""; width: 0.4rem; height: 0.4rem; margin-left: 0.15rem; border: solid var(--text-subtle); border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -2px; }

/* Token-conscious */
.refresh { display: grid; gap: var(--space-4); }
.refresh__card { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-strong); box-shadow: var(--shadow-md); }
.refresh__card--small { margin-left: clamp(1rem, 6vw, 4rem); }
.refresh__who { display: flex; align-items: center; gap: var(--space-3); }
.refresh__who img { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--surface-sunken); }
.refresh__who strong { display: block; }
.refresh__who span { color: var(--text-subtle); font: var(--text-xs) / 1.4 var(--font-mono); }
.refresh__meter { position: relative; height: 0.85rem; margin-top: var(--space-5); border-radius: var(--radius-pill); background: var(--surface-sunken); }
.refresh__fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; background: linear-gradient(90deg, var(--success), var(--warm) 70%, var(--highlight)); animation: context 7s var(--ease-in-out) infinite; }
@keyframes context { 0% { transform: scaleX(0.05); } 60%, 70% { transform: scaleX(0.84); } 78%, 100% { transform: scaleX(0.07); } }
.refresh__mark { position: absolute; top: -4px; bottom: -4px; left: 84%; width: 2px; border-radius: 1px; background: var(--text); }
.refresh__scale { display: flex; justify-content: space-between; margin-top: var(--space-2); color: var(--text-subtle); font: var(--text-xs) / 1.4 var(--font-mono); }
.refresh__gens { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.refresh__gen { padding: 0.3rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.refresh__gen--new { border-color: transparent; background: var(--success-soft); color: var(--home-ok-ink); }
.refresh__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.refresh__steps li { padding: 0.45rem 0.25rem; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-align: center; animation: step-on 6s steps(1, end) infinite; }
.refresh__steps li:nth-child(2) { animation-delay: 0.9s; }
.refresh__steps li:nth-child(3) { animation-delay: 1.8s; }
.refresh__steps li:nth-child(4) { animation-name: step-done; animation-delay: 2.7s; }
@keyframes step-on { 0%, 70% { background: var(--accent-soft); color: var(--home-accent-ink); } 71%, 100% { background: var(--surface-sunken); color: var(--text-muted); } }
@keyframes step-done { 0%, 55% { background: var(--success-soft); color: var(--home-ok-ink); } 56%, 100% { background: var(--surface-sunken); color: var(--text-muted); } }

/* Usage */
.usage { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-6); margin: 0; background: var(--surface-strong); box-shadow: var(--shadow-lg); backdrop-filter: none; }
.usage__limits { display: grid; gap: var(--space-3); align-content: start; }
/* Limits as Mimosa draws them: the weekly bar in the account's colour with the even-pace tick. */
.usage__row { --acct: var(--accent); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.usage__row .usage__wins { grid-column: 1 / -1; grid-row: 2; }
.usage__row--claude { --acct: #f08a4b; }
.usage__row--codex { --acct: #22b98a; }
.usage__row--gemini { --acct: #6f8ff5; }
.usage__acct { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.usage__wins { display: grid; gap: var(--space-2); }
.usage__win { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 9.6rem; gap: var(--space-3); align-items: center; }
.usage__label { color: var(--text-subtle); font: var(--weight-semibold) 0.66rem / 1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.usage__num { color: var(--text-muted); font: 0.72rem / 1 var(--font-mono); white-space: nowrap; }
.usage__bar { position: relative; height: 0.55rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text) 10%, transparent); }
.usage__bar i { position: absolute; inset: 0 auto 0 0; width: var(--left); border-radius: inherit; background: var(--acct); }
.usage__bar::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--pace); width: 2px; border-radius: 1px; background: var(--text); opacity: 0.55; }
.usage__chip { padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--home-ok-ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.usage__chip--ahead { background: color-mix(in srgb, var(--warm) 22%, transparent); color: light-dark(#7a4a00, var(--warm)); }
.usage__bar--a { --left: 48%; --pace: 40%; }
.usage__bar--b { --left: 62%; }
.usage__bar--c { --left: 73%; --pace: 61%; }
.usage__bar--d { --left: 91%; }
.usage__bar--e { --left: 35%; --pace: 44%; }
.usage__bar--f { --left: 27%; }
.usage__bar--g { --left: 66%; --pace: 52%; }
.usage__bar--h { --left: 80%; }
.usage__side { display: grid; grid-template-rows: auto minmax(8.5rem, 1fr) auto auto; gap: var(--space-4); }
.usage__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.usage__tile { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); }
.usage__tile span { color: var(--text-subtle); font-size: 0.7rem; }
.usage__tile strong { font: var(--weight-bold) var(--text-xl) / 1.1 var(--font-display); letter-spacing: var(--tracking-tight); }
.usage__chart { display: flex; align-items: flex-end; gap: 0.4rem; min-height: 8.5rem; padding: var(--space-3) var(--space-3) 0; border-radius: var(--radius-md); background: var(--surface-sunken); }
.usage__chart span {
  flex: 1; height: var(--h, 50%); border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, #ff8a1f 0 22%, #f3a4b5 22% 34%, #7fb894 34% 90%, #f2c66d 90% 100%);
}
.usage__chart span:nth-child(1) { --h: 34%; }
.usage__chart span:nth-child(2) { --h: 48%; }
.usage__chart span:nth-child(3) { --h: 41%; }
.usage__chart span:nth-child(4) { --h: 62%; }
.usage__chart span:nth-child(5) { --h: 55%; }
.usage__chart span:nth-child(6) { --h: 30%; }
.usage__chart span:nth-child(7) { --h: 26%; }
.usage__chart span:nth-child(8) { --h: 58%; }
.usage__chart span:nth-child(9) { --h: 74%; }
.usage__chart span:nth-child(10) { --h: 66%; }
.usage__chart span:nth-child(11) { --h: 81%; }
.usage__chart span:nth-child(12) { --h: 70%; }
.usage__chart span:nth-child(13) { --h: 92%; }
.usage__chart span:nth-child(14) { --h: 77%; }
.usage__legend, .usage__chips { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.usage__key { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-xs); }
.usage__key::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--key); }
.usage__key--in { --key: #ff8a1f; }
.usage__key--out { --key: #f3a4b5; }
.usage__key--read { --key: #7fb894; }
.usage__key--write { --key: #f2c66d; }
.usage__chips { gap: var(--space-2); }
.usage__chips span { padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.usage__chips span[data-on] { border-color: transparent; background: var(--accent); color: var(--accent-text); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.trio .card { background: var(--surface-strong); box-shadow: var(--shadow-sm); backdrop-filter: none; }
.trio h3 { margin-bottom: var(--space-2); }

/* Office */
.section--office .section__head { max-width: 50rem; }
.office-stage { position: relative; padding-bottom: var(--space-12); }
.office-stage::before { content: ""; position: absolute; inset: 8% 4% 0; z-index: -1; background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(10px); }
.window {
  margin: 0; overflow: hidden; border-radius: var(--radius-xl);
  border: 1px solid var(--border-strong); background: var(--surface-strong);
  box-shadow: var(--shadow-lg), 0 50px 120px -40px var(--glow);
}
.window__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 2.6rem; padding-inline: var(--space-4); border-bottom: 1px solid var(--border); background: light-dark(var(--ink-50), #0a1530); }
.window__lights { display: flex; gap: 0.45rem; }
.window__lights i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #ff5f57; }
.window__lights i:nth-child(2) { background: #febc2e; }
.window__lights i:nth-child(3) { background: #28c840; }
.window__url { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.3rem var(--space-4); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-subtle); font: var(--text-xs) / 1 var(--font-mono); }
.window__url svg { width: 0.8rem; height: 0.8rem; }
.window img { width: 100%; }
.office-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: #0d1a14; }
.office-demo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-10); text-align: center; }
.office-demo p { margin: 0; color: var(--text-muted); }
.office-chat {
  position: absolute; right: clamp(-1.5rem, -2vw, 0rem); bottom: 0; width: min(21rem, 38%);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); background: var(--surface-strong); box-shadow: var(--shadow-lg), 0 30px 60px -30px var(--glow); backdrop-filter: none;
}
.office-chat__head { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.office-chat__head img { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--surface-sunken); }
.office-chat__head strong { display: block; font-size: var(--text-sm); }
.office-chat__head span { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-subtle); font-size: var(--text-xs); }
.office-chat__msg { justify-self: start; max-width: 88%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: var(--text-sm); }
.section.section--office { padding-top: calc(var(--section-gap) * 0.55); }
.office-chat .office-chat__msg--me { justify-self: end; background: var(--accent); color: var(--accent-text); }
.office-chat__composer { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); color: var(--text-subtle); font-size: var(--text-sm); }
.office-chat__mic { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); animation: orca-pulse-ring 2.4s var(--ease-out) infinite; }
.office-chat__mic svg { width: 1rem; height: 1rem; }
@keyframes orca-pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 0.6rem transparent; } }
.office-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.office-points .card { display: grid; align-content: start; gap: var(--space-3); background: var(--surface-strong); box-shadow: var(--shadow-sm); backdrop-filter: none; }
.office-points h3 { margin-bottom: var(--space-1); }
.office-points__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); font: var(--weight-bold) var(--text-xl) / 1 var(--font-mono); }
.office-points__icon svg { width: 1.4rem; height: 1.4rem; }
.office-points__icon--alert { border-radius: var(--radius-sm); background: var(--warm); color: var(--ink-950); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.18); }

/* Anywhere */
.anywhere { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.anywhere__head { margin-bottom: 0; }
.steps { display: grid; gap: var(--space-5); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: var(--space-4); }
.steps__n { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-text); font: var(--weight-bold) var(--text-sm) / 1 var(--font-mono); box-shadow: 0 6px 18px -6px var(--glow); }
.steps h3 { font-size: var(--text-base); }
.steps p { color: var(--text-muted); font-size: var(--text-sm); }
.network { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-2xl); border: 1px solid var(--border); background: radial-gradient(circle at 30% 50%, var(--accent-soft), transparent 60%), var(--surface-sunken); }
.network__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.network__path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; opacity: 0.7; animation: dash 1.6s linear infinite; vector-effect: non-scaling-stroke; }
@keyframes dash { to { stroke-dashoffset: -12; } }
.network__hub { position: absolute; left: 30%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: var(--space-1); text-align: center; }
/* The slice is 64 art pixels: whole multiples keep them square. */
.network__hub img { width: 8rem; height: auto; filter: drop-shadow(0 0 30px var(--glow)); }
.network__hub strong { margin-top: var(--space-2); font-size: var(--text-sm); }
.network__hub span { color: var(--text-subtle); font-size: var(--text-xs); }
.network__device { position: absolute; left: 80%; translate: -50% -50%; display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-3); min-width: 6.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--surface-strong); box-shadow: var(--shadow-md); color: var(--text); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.network__device svg { width: 1.75rem; height: 1.75rem; color: var(--accent); }
.network__device img { width: 1.75rem; height: 1.75rem; }
.network__device--1 { top: 15%; }
.network__device--2 { top: 50%; }
.network__device--3 { top: 85%; color: var(--text-muted); }

/* Pricing. data-billing on the section shows one period's prices. */
[data-billing="monthly"] [data-billing-show="yearly"], [data-billing="yearly"] [data-billing-show="monthly"] { display: none; }
.billing { display: inline-flex; gap: 2px; margin-top: var(--space-2); padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-sunken); }
.billing[hidden] { display: none; }
.billing button { min-height: 2.25rem; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font: var(--weight-semibold) var(--text-sm) / 1 var(--font-sans); cursor: pointer; }
.billing button[aria-pressed="true"] { background: var(--surface-strong); color: var(--text); box-shadow: var(--shadow-sm); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.plan { display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface-strong); box-shadow: var(--shadow-sm); backdrop-filter: none; }
.plan--featured { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow-lg), 0 30px 80px -40px var(--glow); }
.plan__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.plan__head h3 { font-size: var(--text-xl); }
.plan__head .badge { color: var(--home-accent-ink); }
.plan__head .badge--muted { background: var(--surface-sunken); color: var(--text-muted); }
.card .plan__summary { min-height: 2.6em; font-size: var(--text-sm); }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: var(--space-1); }
.plan__amount { font: var(--weight-bold) 2.5rem / 1 var(--font-display); letter-spacing: var(--tracking-display); }
.plan__unit { color: var(--text-subtle); font-size: var(--text-sm); }
.plan__action { position: relative; display: grid; gap: 6px; }
.plan__action .btn { width: 100%; }
.plan__soon { color: var(--text-subtle); font-size: var(--text-xs); text-align: center; }
.card .plan__lead { margin-top: var(--space-2); color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.plan__features { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; color: var(--text-muted); font-size: var(--text-sm); }
.plan__features li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--space-2); }
.plan__features li::before { content: "✓" / ""; color: var(--home-accent-ink); font-weight: var(--weight-bold); }
.compare { margin-top: var(--space-12); }
.compare > h3 { margin-bottom: var(--space-4); font-size: var(--text-xl); }
.compare__scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-strong); }
/* Fixed layout: the three plan columns share the space after the feature column equally. */
.compare table { width: 100%; min-width: 34rem; table-layout: fixed; border-collapse: collapse; font-size: var(--text-sm); }
.compare thead th:first-child { width: 40%; }
.compare th, .compare td { padding: 0.65rem var(--space-4); border-bottom: 1px solid var(--border); text-align: center; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font-weight: var(--weight-semibold); }
.compare th[scope="row"] { font-weight: var(--weight-medium); text-align: left; }
.compare td { color: var(--text-muted); }
.compare td.yes::before { content: "✓" / ""; color: var(--home-ok-ink); font-weight: var(--weight-bold); }
.compare td.no::before { content: "—" / ""; color: var(--text-subtle); }
.plans__footnotes { display: grid; gap: var(--space-1); margin-top: var(--space-6); color: var(--text-subtle); font-size: var(--text-xs); text-align: center; }

/* Download */
.download-more { margin-top: var(--space-6); text-align: center; color: var(--text-muted); font-size: var(--text-sm); }

/* Closing */
.closing { position: relative; isolation: isolate; padding-block: var(--section-gap); overflow: clip; text-align: center; }
.closing::before { content: ""; position: absolute; inset: 20% 0 0; z-index: -1; background: radial-gradient(50rem 26rem at 50% 70%, var(--glow), transparent 70%); }
.closing__inner { display: grid; justify-items: center; }
.closing__orca { width: 16rem; height: auto; animation: bob 4s var(--ease-in-out) infinite alternate; }
@keyframes bob { from { transform: translateY(-4px) rotate(-1.5deg); } to { transform: translateY(6px) rotate(1.5deg); } }
.closing__title { margin-block: var(--space-6) var(--space-8); font-size: var(--text-5xl); }

/* Footer */
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-6); }

/* Scroll reveal, where the browser supports scroll-driven animations. Content is visible without it.
   The opening's window starts tipped back and settles flat as the page scrolls; the agent network's copy
   rises in, then drifts up and dims as its scene leaves. */
@supports (animation-timeline: scroll()) {
  .opening__stage { animation: opening-in 1.4s var(--ease-out) 0.38s both, opening-settle linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 55vh; transform-origin: 50% 0; }
  @keyframes opening-settle { from { transform: perspective(2200px) rotateX(9deg) scale(0.97); } to { transform: none; } }
}
@supports (animation-timeline: view()) {
  .relay__inner { animation: relay-out linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
  @keyframes relay-out { to { opacity: 0.2; translate: 0 -10vh; } }
  .relay__copy, .section__head, .score__step, .talk, .points > li, .accounts, .refresh__card,
  .usage, .trio > li, .office-stage, .office-points > li, .steps > li, .network, .fact {
    animation: reveal linear both; animation-timeline: view(); animation-range: entry 5% entry 70%;
  }
  .score__step:nth-child(2) { animation-range: entry 10% entry 75%; }
  .score__step:nth-child(3) { animation-range: entry 15% entry 80%; }
  .score__step:nth-child(4) { animation-range: entry 20% entry 85%; }
  .score__step:nth-child(5) { animation-range: entry 25% entry 90%; }
  .score__step:nth-child(6) { animation-range: entry 30% entry 95%; }
  @keyframes reveal { from { opacity: 0; translate: 0 2rem; } to { opacity: 1; translate: 0 0; } }
  .window { animation: tilt-in linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; transform-origin: 50% 0; }
  @keyframes tilt-in { from { transform: perspective(1800px) rotateX(18deg) scale(0.92); } to { transform: none; } }
}

/* Responsive */
@media (max-width: 1000px) {
  /* One column: the sun comes after the copy and rises from behind the window. */
  .opening { --sun: min(64vw, 21rem); }
  .opening__inner { grid-template-columns: minmax(0, 1fr); }
  .opening__sun { justify-self: center; margin-top: var(--space-6); margin-bottom: calc(-1 * var(--stage-gap) - 0.46 * var(--sun)); }
}
@media (max-width: 1080px) {
  .score { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-10); }
  .score::before, .score__step::after, .score__cue:not(.score__cue--end) { display: none; }
  .facts__grid, .office-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ensemble, .split, .anywhere { grid-template-columns: minmax(0, 1fr); }
  .split--flip > :first-child { order: 0; }
  .trio, .plans { grid-template-columns: minmax(0, 1fr); }
  .plans { max-width: 30rem; margin-inline: auto; }
  .office-chat { position: relative; right: auto; width: auto; max-width: 24rem; margin: calc(-1 * var(--space-10)) var(--space-4) 0 auto; }
  .office-stage { padding-bottom: 0; }
}
/* Screens narrower than the graph: it runs edge to edge and scrolls sideways, and home.js keeps the task
   in view until the visitor scrolls it themselves. */
@media (max-width: 1100px) {
  .relay__track { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
}
@media (max-width: 760px) {
  .relay { padding-block: var(--space-16) var(--space-12); }
  .relay__kicker { margin-top: 0; }
  .relay__title { font-size: clamp(2.2rem, 1.4rem + 4.4vw, 3.6rem); }
  .relay__lead { font-size: var(--text-base); }
  .relay__actions { margin-top: var(--space-6); }
  .relay__stage { margin-top: var(--space-8); }
  .relay__now { font-size: var(--text-sm); min-height: 4.8em; }
  .relay__pause { padding: var(--space-2); }
  .relay__pause span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .relay__legend { gap: var(--space-3); }
  .relay__key + .relay__key { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .opening { padding-block: calc(var(--header-height) + var(--space-8)) calc(var(--space-16) + var(--space-8)); }
  .opening__pill { font-size: var(--text-xs); }
  .opening__title { font-size: clamp(2.3rem, 1.4rem + 4.6vw, 3.4rem); }
  .opening__lead { font-size: var(--text-base); }
  .opening__actions { width: 100%; margin-top: var(--space-6); }
  .opening__actions .btn { flex: 1 1 12rem; }
  .opening__stage { width: calc(100% - 2 * var(--space-4)); }
  .app-window { border-radius: 14px; }
  .app-window__toggle { opacity: 1; padding: var(--space-1) var(--space-2); }
  .app-window__toggle span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .opening__caption { padding-inline: var(--gutter); font-size: var(--text-xs); }
  .relay__actions .btn { width: 100%; }
  .usage__win { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
  .usage__win .usage__num { justify-self: end; }
  .usage__win .usage__bar { grid-column: 1 / -1; grid-row: 2; }
  .usage__tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .usage__tile:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .score { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .score__step--you { grid-column: 1 / -1; }
  .facts__grid { gap: var(--space-6) var(--space-4); }
  .fact { padding-left: var(--space-4); }
  .fact strong { font-size: var(--text-xl); }
  .office-points { grid-template-columns: minmax(0, 1fr); }
  .window__bar { grid-template-columns: auto 1fr; gap: var(--space-3); }
  .window__bar > span:last-child { display: none; }
  .window__url { justify-self: end; }
  .account:nth-child(even) { margin-left: 0; }
  .refresh__card--small { margin-left: 0; }
  .compare table { min-width: 0; font-size: var(--text-xs); }
  .compare th, .compare td { padding: var(--space-2) 0.4rem; }
  .compare th[scope="row"] { padding-left: var(--space-3); }
  .network { aspect-ratio: 1; }
  .network__hub { left: 27%; }
  .network__hub img { width: 4rem; }
  .closing__orca { width: 12rem; }
  .network__device { left: 74%; min-width: 0; padding: var(--space-2) var(--space-3); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .opening__pill, .opening__title, .opening__lead, .opening__actions, .opening__stage,
  .relay__inner, .relay__copy,
  .window, .section__head, .score__step, .talk, .points > li, .accounts, .refresh__card,
  .usage, .trio > li, .office-stage, .office-points > li, .steps > li, .network, .fact { animation: none; }
  .score__step::after, .refresh__steps li { animation: none; }
  .refresh__fill { animation: none; transform: scaleX(0.84); }
  .refresh__steps li:last-child { background: var(--success-soft); color: var(--home-ok-ink); }
}

/* Mimosa finish. The accent lines are set in the serif's italic. */
.opening__accent, .relay__accent { font-style: italic; padding-inline-end: 0.08em; }

/* The gradient lines are clipped to their own box: give it room below, so descenders (g, y) are not cut. */
.opening__accent, .relay__accent, .gradient-text { padding-block-end: 0.2em; margin-block-end: -0.2em; }

/* Hover. Things answer the pointer with `transform`, `rotate`, shadow and colour only: scroll motion owns
   translate, scale and opacity, so the two never fight. Durations come from the tokens, which are 0 for
   visitors who ask for reduced motion. */
@media (hover: hover) {
  /* The brand's orange slice rolls two segments on; so do the hub's and the closing section's. */
  .brand img { transition: transform var(--dur-slower) var(--ease-spring); }
  .brand:hover img { transform: rotate(72deg) scale(1.08); }
  .network__hub img { transition: transform var(--dur-slower) var(--ease-spring); }
  .network__hub:hover img { transform: rotate(72deg) scale(1.06); }
  .closing__orca { transition: rotate var(--dur-slower) var(--ease-spring); }
  .closing__orca:hover { rotate: 72deg; }

  .theme-toggle svg { transition: transform var(--dur-slower) var(--ease-out); }
  .theme-toggle:hover svg { transform: rotate(60deg); }

  /* Buttons: the icon wakes up, and light crosses the primary one. */
  .btn svg { transition: transform var(--dur-slow) var(--ease-spring); }
  .btn:hover svg { transform: scale(1.14); }
  .btn--primary { position: relative; overflow: clip; }
  .btn--primary::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; translate: -110% 0;
    background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.3) 50%, transparent 62%);
  }
  .btn--primary:hover::after { translate: 110% 0; transition: translate var(--dur-slower) var(--ease-out); }

  /* Cards lift a little into a warm light. */
  :is(.office-points > .card, .trio > .card, .plans > .plan, .refresh > .refresh__card, .ensemble > .talk, .office-stage > .office-chat, .desk > .desk__report, .desk > .desk__approval, .download-list > .download) {
    transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  :is(.office-points > .card, .trio > .card, .plans > .plan, .refresh > .refresh__card, .ensemble > .talk, .office-stage > .office-chat, .desk > .desk__report, .desk > .desk__approval, .download-list > .download):hover {
    transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 34%, var(--border-strong));
    box-shadow: var(--shadow-lg), 0 26px 60px -34px var(--glow);
  }
  .plans > .plan--featured:hover { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow-lg), 0 36px 90px -36px var(--glow); }

  /* Smaller pieces rise a touch. */
  :is(.accounts > .account, .provider-list > li, .network > .network__device) { transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
  :is(.accounts > .account, .provider-list > li, .network > .network__device):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 34%, var(--border-strong)); box-shadow: var(--shadow-md); }

  /* Facts lean in; list icons and step numbers perk up. */
  .fact > * { transition: transform var(--dur-slow) var(--ease-out); }
  .fact:hover > * { transform: translateX(5px); }
  .fact:hover > span { transition-delay: 40ms; }
  .points__icon, .steps__n, .depts__icon, .office-points__icon { transition: transform var(--dur-slow) var(--ease-spring); }
  .points li:hover .points__icon, .depts__tab:hover .depts__icon, .office-points > .card:hover .office-points__icon { transform: scale(1.08) rotate(-5deg); }
  .steps li:hover .steps__n { transform: scale(1.12); }

  /* The crew hops, one after the other: pixel people move in steps. */
  .score__avatar, .score__crew img { transition: transform var(--dur-slow) var(--ease-spring); }
  .score__step:hover :is(.score__avatar, .score__crew img) { transform: translateY(-5px); }
  .score__crew img:nth-child(2) { transition-delay: 50ms; }
  .score__crew img:nth-child(3) { transition-delay: 100ms; }
  .score__crew img:nth-child(n + 4) { transition-delay: 150ms; }
  .depts__seat img, .talk__msg img, .office-chat__head img { transition: transform var(--dur-base) steps(3, end); }
  :is(.depts__seat, .talk__msg, .office-chat__head):hover img { transform: translateY(-3px); }

  /* Compare: the row under the pointer warms up and its ticks grow. */
  .compare tbody tr { transition: background-color var(--dur-base) var(--ease-out); }
  .compare tbody tr:hover { background: var(--accent-soft); }
  .compare td.yes::before { display: inline-block; transition: transform var(--dur-slow) var(--ease-spring); }
  .compare tbody tr:hover td.yes::before { transform: scale(1.3); }

  /* Section heads: the bubble before the eyebrow fills. */
  .eyebrow::before { transition: background-color var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-spring); }
  .section__head:hover .eyebrow::before { background: currentColor; transform: scale(1.2); }

  /* Footer links draw their underline. */
  .site-footer__nav a { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-slow) var(--ease-out), color var(--dur-base) var(--ease-out); }
  .site-footer__nav a:hover { background-size: 100% 1px; }
}

/* Scroll motion. Everything here is tied to the scroll position itself (scroll-driven animations), so it
   runs both ways, costs no script, and never plays for visitors who ask for reduced motion. Browsers
   without the feature show the page still. It is slow on purpose: each piece takes about a third of the
   screen to settle, moves a rem or two, and lands softly. Only opacity, translate, scale, a short blur
   and a background position are animated. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :root { --glide: cubic-bezier(0.3, 0.4, 0.3, 1); }

    /* A thin line that fills as the page is read. */
    body::before {
      content: ""; position: fixed; inset: 0 0 auto 0; z-index: 60; height: 2px; pointer-events: none;
      background: linear-gradient(90deg, var(--citrus-500), var(--amber-400) 60%, var(--blossom-400));
      transform-origin: 0 50%; scale: 0 1;
      animation: page-read linear both; animation-timeline: scroll(root);
    }
    @keyframes page-read { to { scale: 1 1; } }

    /* The opening copy holds, then drifts up and softens as the page takes over. */
    .opening__inner { animation: hero-away cubic-bezier(0.5, 0, 0.8, 0.6) both; animation-timeline: scroll(root); animation-range: 0 72vh; }
    @keyframes hero-away { to { opacity: 0; translate: 0 -1.75rem; filter: blur(4px); } }

    /* Section heads come into focus, one line after the other, and soften again as they leave at the top.
       The older whole-block reveal steps aside where its children now arrive on their own. */
    .sheet .section__head, .accounts { animation: none; }
    .sheet .section__head > :not(.points, .steps) {
      animation: focus-in var(--glide) both; animation-timeline: view();
      animation-range: cover var(--h0, 0%) cover var(--h1, 32%);
    }
    .sheet .section__head > :nth-child(2) { --h0: 2.5%; --h1: 34.5%; }
    .sheet .section__head > :nth-child(3) { --h0: 5%; --h1: 37%; }
    .sheet .section__head > :nth-child(n + 4) { --h0: 7.5%; --h1: 39.5%; }
    .sheet .section__head > .eyebrow { animation-name: track-in; }
    .sheet .section__head > :is(.title, .lead) {
      animation: focus-in var(--glide) both, head-out linear both; animation-timeline: view(), view();
      animation-range: cover var(--h0, 0%) cover var(--h1, 32%), cover calc(100% - 13rem) cover 100%;
    }
    @keyframes focus-in { from { opacity: 0; translate: 0 1.1rem; filter: blur(5px); } }
    @keyframes track-in { from { opacity: 0; letter-spacing: 0.34em; } }
    @keyframes head-out { to { opacity: 0.3; translate: 0 -0.6rem; } }

    /* The big pieces open up towards you; the office window tips back less than it used to. */
    :is(.office-stage, .pj, .depts, .desk, .usage.card, .network, .compare) {
      animation: bloom var(--glide) both; animation-timeline: view(); animation-range: cover 0% cover 38%; transform-origin: 50% 80%;
    }
    @keyframes bloom { from { opacity: 0; scale: 0.975; translate: 0 2rem; } }
    .window { animation: tilt-soft linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    @keyframes tilt-soft { from { transform: perspective(2000px) rotateX(7deg) scale(0.97); } to { transform: none; } }

    /* Rows and lists arrive one by one. */
    :is(.facts .fact, .office-points > .card, .score > .score__step, .trio > .card, .plans > .card, .download-list > .download, .accounts > .account, .accounts > .picker, .points > li, .steps > li, .ensemble > *, .refresh > .refresh__card, .office-demo, .depts__note, .split__note, .plans__footnotes, .download-more) {
      animation: rise-in var(--glide) both; animation-timeline: view(); animation-range: cover var(--r0, 0%) cover var(--r1, 30%);
    }
    :is(.facts .fact, .office-points > .card, .score > .score__step, .trio > .card, .plans > .card):nth-child(2) { --r0: 3.5%; --r1: 33.5%; }
    :is(.facts .fact, .office-points > .card, .score > .score__step, .trio > .card, .plans > .card):nth-child(3) { --r0: 7%; --r1: 37%; }
    :is(.facts .fact, .office-points > .card, .score > .score__step):nth-child(4) { --r0: 10.5%; --r1: 40.5%; }
    .score > .score__step:nth-child(5) { --r0: 14%; --r1: 44%; }
    .score > .score__step:nth-child(6) { --r0: 17.5%; --r1: 47.5%; }
    @keyframes rise-in { from { opacity: 0; translate: 0 1.5rem; scale: 0.985; } }

    /* Depth: the cards that sit on top of a scene travel a little further than the scene itself. */
    @media (min-width: 1081px) {
      :is(.office-chat, .desk__approval) { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
      @keyframes drift { from { translate: 0 1.75rem; } to { translate: 0 -1.75rem; } }
    }

    /* The closing: its glow gathers, the glass arrives and keeps floating, and the title's colour drifts. */
    .closing::before { animation: glow-in linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes glow-in { from { opacity: 0.15; scale: 0.8; } }
    .closing__orca { animation: bloom var(--glide) both, bob 4s var(--ease-in-out) infinite alternate; animation-timeline: view(), auto; animation-range: entry 0% cover 22%, normal; }
    .closing__title, .closing__actions { animation: focus-in var(--glide) both; animation-timeline: view(); animation-range: entry 0% cover 14%; }
    .closing .gradient-text { background-size: 220% 100%; animation: hue-drift linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    @keyframes hue-drift { from { background-position: 100% 0; } to { background-position: 0 0; } }
    .site-footer__inner { animation: rise-in var(--glide) both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}