/* Iris site. Tokens from design/brand/suite/tokens (tokens.css); type is Manrope, never Bold (brand rule 4). */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --night: #07090C;
  --ink: #0B0E13;
  --panel: #11151B;
  --panel2: #161B22;
  --bone: #E8EEF2;
  --muted: #8B97A3;
  --deep: #0C1220;
  --cyan: #5AEBFF;
  --blue: #4D9EFF;
  --violet: #9E73FF;
  --pink: #F280D9;
  /* The hands-free light (OverlayView HandsFreeLight.mint: 0.45, 0.95, 0.8). */
  --mint: #73F2CC;
  --line: rgba(232, 238, 242, .09);
  --line-strong: rgba(232, 238, 242, .16);
  --font: "Manrope", system-ui, -apple-system, sans-serif;
  --ease-enter: cubic-bezier(.25, 1, .5, 1);
  --ease-camera: cubic-bezier(.65, 0, .35, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --radius: 22px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* The hero's glow lives on the page's own background, under the orb's canvas: on the hero it hid the drop. */
html { background: radial-gradient(ellipse 60% 50% at 50% 30%, #0c1220 0%, rgba(7, 9, 12, 0) 70%) 0 0 / 100% 100svh no-repeat,
  var(--night); }
body {
  margin: 0;
  background: transparent;
  color: var(--bone);
  font: 400 17px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; }
::selection { background: rgba(77, 158, 255, .35); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--bone); color: var(--ink);
  padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: calc(760px + 2 * var(--gutter)); }

/* Type (tokens.json → type) */
.display { font-size: clamp(46px, 7.6vw, 96px); line-height: 1.02; letter-spacing: -.035em; font-weight: 300; }
.h1 { font-size: clamp(30px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -.03em; font-weight: 300; }
.h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--muted); max-width: 34em; text-wrap: balance; }
.eyebrow { font-size: 12px; line-height: 1.3; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
  color: var(--muted); margin-bottom: 18px; }
.small { font-size: 14px; line-height: 1.55; color: var(--muted); }
.muted { color: var(--muted); }
kbd { font: 500 14px/1 var(--font); padding: 5px 8px; border-radius: 7px; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--bone); }

/* Buttons: bone on night, they step on hover and press on click. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
  padding: 0 26px; border-radius: 999px; border: 0; background: var(--bone); color: var(--ink);
  font: 500 16px/1 var(--font); text-decoration: none; cursor: pointer;
  transition: transform .5s var(--ease-enter), background-color .4s, box-shadow .6s var(--ease-enter);
  box-shadow: 0 0 0 0 rgba(90, 235, 255, 0); }
.btn:hover { transform: translateY(-1px); background: #fff;
  box-shadow: 0 10px 40px -12px rgba(77, 158, 255, .55), 0 0 0 1px rgba(158, 115, 255, .25); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .12s; }
.btn--small { min-height: 38px; padding: 0 16px; font-size: 14px; }
/* Waiting beside the hero's drawn notch on a narrow screen (site.js): out of sight until the notch has scrolled away. */
.bar .btn--small { transition: opacity .5s var(--ease-enter), visibility .5s; }
.bar .btn--small.is-waiting { opacity: 0; visibility: hidden; }
/* Until site.js has measured it, a narrow screen's bar button stays out of sight: shown at the first paint and then
   hidden, it flashed on the black opening. */
@media (max-width: 699px) { .js-enter .bar .btn--small:not(.is-fit) { opacity: 0; visibility: hidden; transition: none; } }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }
.link { display: inline-flex; align-items: center; min-height: 44px; gap: 6px; color: var(--bone); text-decoration: none; font-weight: 500; background:
  linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-enter);
  background-position: 0 calc(100% - 10px); }
.link:hover { background-size: 100% 1px; }

/* Top bar: like the Mac's own menu bar, with the notch's place left free in the middle. */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 20; height: 64px; display: flex; align-items: center;
  transition: background-color .6s, backdrop-filter .6s, border-color .6s;
  border-bottom: 1px solid transparent; }
.bar.is-solid { background: rgba(7, 9, 12, .72); backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); border-color: var(--line); }
.bar__inner { display: flex; align-items: center; gap: 24px; }
.bar__brand { margin-right: auto; }
.bar__brand { display: block; transition: opacity .9s cubic-bezier(.215, .61, .355, 1); }
.bar__brand img { display: block; height: 40px; width: auto; }
/* The bar carries the wordmark alone, never a logo: the emblem lives only in the hero's resting drop (the owner's call,
   2026-11-10), so the page never shows two logos and the bar never has to step back. */
.bar__links { display: flex; gap: 28px; font-size: 14px; }
.bar__links a { color: var(--muted); text-decoration: none; transition: color .3s; }
.bar__links a:hover { color: var(--bone); }
/* Hidden when they would reach the hero's drawn notch at the top centre (site.js measures it). */
.bar__links.is-tight { visibility: hidden; }
@media (max-width: 860px) { .bar__links { display: none; } }

/* Hero */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden;
  background: transparent; }
.hero__still { position: absolute; width: 220px; height: 220px; left: 50%; top: 0; transform: translate(-50%, -50%);
  display: none; pointer-events: none; }
.no-webgl .hero__still { display: block; }
.hero__inner { position: relative; z-index: 2; text-align: center; padding: 120px var(--gutter) 64px;
  display: flex; flex-direction: column; align-items: center; }
.hero__anchor { width: 180px; height: 180px; margin-bottom: 44px; flex: none; }
.hero .lede { margin: 26px auto 0; max-width: 31em; }
.hero__actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }
.hero .small { margin-top: 22px; }
@media (max-width: 600px) {
  .hero__anchor { width: 124px; height: 124px; margin-bottom: 22px; }
  .hero__inner { padding-top: 96px; }
}

/* Enter once on load, and fade-and-rise on scroll (brand rule 3: text fades in and rises a few pixels). */
/* The hero enters once on load: each line fades in and rises (brand rule 3). Hidden only while the script runs it.
   Animations, not transitions, all started by one class (is-intro) in one style change: the slogan and the lines run on
   one clock, and a line can never skip its fade (a transition does when the browser has not drawn the hidden state yet,
   which left the headline on screen beside the slogan on some loads). Delays: site.js, per line. */
.js-enter [data-enter] { opacity: 0; transform: translateY(14px); }
.js-enter.is-intro [data-enter] { animation: hero-enter 1.1s var(--ease-enter) both; }
@keyframes hero-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* The slogan holds the headline's place while the drop is born (0.35 s to 2.6 s), then rises away as the hero enters. */
.hero__slogan { display: none; }
.js-enter .hero__slogan { display: block; position: absolute; left: var(--gutter); right: var(--gutter); top: var(--slogan-top, 50%);
  margin: 0; font-size: clamp(30px, 4.6vw, 58px); line-height: 1.1; letter-spacing: -.03em; font-weight: 300; color: var(--bone);
  opacity: 0; pointer-events: none; }
/* site.js starts it with the lines once it has placed it on the headline (boot.js shows it hidden before then). */
.js-enter.is-intro .hero__slogan { animation: slogan 2.6s var(--ease-liquid, cubic-bezier(.32, .72, 0, 1)) .35s forwards; }
@keyframes slogan {
  0% { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  22% { opacity: 1; transform: none; filter: blur(0); }
  78% { opacity: 1; transform: none; filter: blur(0); }
  100% { opacity: 0; transform: translateY(-14px); filter: blur(4px); }
}

/* Sections */
.section { padding: clamp(96px, 14vh, 160px) 0; }
.section .h1 { max-width: 16em; }

/* The wheel of sentences. `overflow: clip` (not only hidden): a sentence focused or scrolled into view used to
   scroll the list itself and shift every sentence off the wheel. */
.takes { position: relative; height: calc(100svh + (var(--n, 6) - 1) * 34svh); }
.takes__sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-top: 64px; overflow: hidden; }
.takes__head { margin-bottom: clamp(20px, 4vh, 44px); }
/* One 12-column grid with 24px gutters for every split: the wheel takes 5 columns, the take 7. */
.takes__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.takes__grid .wheel { grid-column: 1 / 6; margin-right: 24px; }
.takes__grid .screen { grid-column: 6 / 13; }
.takes__note { margin-top: clamp(16px, 3vh, 32px); }
.wheel { list-style: none; margin: 0; padding: 0; position: relative; height: clamp(320px, 52vh, 520px);
  perspective: 900px; perspective-origin: 0 50%; overflow: hidden; overflow: clip; padding: 0 8px; margin-left: -8px;
  -webkit-mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent); }
.wheel li { position: absolute; left: 8px; right: 8px; top: 50%; will-change: transform, opacity;
  transform-origin: 0 50%; }
.wheel button { all: unset; display: block; cursor: pointer; font: 300 clamp(26px, 3.1vw, 46px)/1.12 var(--font);
  letter-spacing: -.02em; color: var(--muted); transition: color .6s; transform: translateY(-50%);
  text-wrap: balance; padding: 4px 0; }
.wheel button:hover { color: #c3ccd4; }
.wheel button:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 8px; }
.wheel li.is-active button { color: var(--bone); }

.screen { margin: 0; }
.screen__frame { position: relative; aspect-ratio: 1440 / 935; border-radius: var(--radius); overflow: hidden;
  background: #12102c; border: 1px solid var(--line-strong);
  box-shadow: 0 40px 120px -40px rgba(77, 158, 255, .35), 0 30px 80px -30px rgba(158, 115, 255, .28); }
.screen__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .45s var(--ease-camera); }
.screen__frame video.is-swapping { opacity: .15; }
.screen__replay { position: absolute; right: 14px; bottom: 14px; z-index: 2; font: 500 13px/1 var(--font);
  color: var(--bone); background: rgba(7, 9, 12, .7); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 9px 14px; cursor: pointer; opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .6s var(--ease-enter), transform .6s var(--ease-enter), background-color .3s;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.screen__replay.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.screen__replay:hover { background: rgba(22, 27, 34, .9); }
.screen__caption { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; min-height: 5.2em; }
.screen__iris { color: var(--muted); font-size: 16px; line-height: 1.55; transition: opacity .5s; }
.tag { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--bone);
  transition: opacity .5s; }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, var(--cyan), var(--blue) 55%, var(--violet)); box-shadow: 0 0 12px rgba(77, 158, 255, .7); }
.screen__caption.is-swapping .screen__iris, .screen__caption.is-swapping .tag { opacity: 0; }

@media (max-width: 860px) {
  .takes { height: calc(100svh + (var(--n, 6) - 1) * 36svh); }
  .takes__sticky { padding-top: 64px; justify-content: flex-start; padding-bottom: 12px; }
  .takes__head { margin-top: 12px; margin-bottom: 14px; }
  .takes__head .eyebrow { margin-bottom: 8px; }
  .takes__grid { grid-template-columns: 1fr; gap: 6px; }
  .takes__grid .wheel, .takes__grid .screen { grid-column: 1 / -1; margin-right: 0; }
  .screen__caption { margin-top: 10px; min-height: 6.4em; gap: 6px; }
  .screen__iris { font-size: 14px; }
  .wheel { height: 150px; }
  .wheel button { font-size: 22px; }
  .takes__grid .wheel { order: -1; }
  .takes__note { display: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .takes__head { display: none; }
}

/* «Missing something?» as a strip under the wheel, inside the pinned frame. Closed it is one row: the question, its
   sentence, «See how». Open, its panel rises over the wheel from the strip (it does not push the page), and scrolls
   inside itself if the screen is short. */
.askstrip { position: relative; margin-top: clamp(10px, 2.2vh, 22px); }
.askstrip summary { list-style: none; display: flex; align-items: center; gap: 22px; padding: 18px 26px; border: 1px solid var(--line);
  border-radius: 18px; background: rgba(232, 238, 242, .03); cursor: pointer; transition: border-color .4s var(--ease-enter), background-color .4s var(--ease-enter); }
.askstrip summary::-webkit-details-marker { display: none; }
.askstrip summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.askstrip[open] summary { border-color: var(--line-strong); background: rgba(232, 238, 242, .06); }
.askstrip__title { flex: none; font-size: 24px; letter-spacing: -.02em; white-space: nowrap; }
.askstrip__title br { display: none; }
.askstrip__title .hl::before { content: " "; }
.askstrip__text { flex: 1; min-width: 0; color: #a7b2bd; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.askstrip__more { flex: none; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
/* The note under the strip sits closer, so the larger strip and the note both stay in the pinned frame. */
.askstrip ~ * .takes__note, .takes__sticky .takes__note { margin-top: 12px; }
.askstrip__more::after { content: ""; width: 8px; height: 8px; border-left: 1.5px solid var(--bone); border-top: 1.5px solid var(--bone);
  transform: translateY(2px) rotate(45deg); transition: transform .4s var(--ease-enter); }
.askstrip[open] .askstrip__more::after { transform: translateY(-2px) rotate(-135deg); }
.askstrip__body { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); z-index: 8; max-height: calc(100svh - 190px); overflow: auto;
  border-radius: calc(var(--radius) + 6px); box-shadow: 0 30px 90px rgba(0, 0, 0, .65); animation: askstrip-in .45s var(--ease-enter); }
.askstrip__body .ask__panel { background: radial-gradient(ellipse 55% 80% at 85% 20%, rgba(77, 158, 255, .1), transparent 70%), #0c1016; border-color: var(--line-strong); }
.askstrip__body .ask__copy .lede { margin-top: 0; font-size: 18px; }
@keyframes askstrip-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .askstrip__body { animation: none; } }
/* A short screen: the note goes and the head and the strip tighten, so the strip stays inside the pinned frame. */
@media (max-height: 800px) and (min-width: 861px) {
  .takes__note { display: none; }
  .takes__head { margin-bottom: 12px; }
  .takes__head .h1 { font-size: clamp(30px, 3.4vw, 42px); }
  .takes__head .eyebrow { margin-bottom: 8px; }
  .askstrip { margin-top: 8px; }
  .askstrip summary { padding: 11px 22px; }
  .askstrip__title { font-size: 21px; }
  .askstrip__body { max-height: calc(100svh - 150px); }
  /* The screen a column narrower, so it is shorter too. */
  .takes__grid .wheel { grid-column: 1 / 7; }
  .takes__grid .screen { grid-column: 7 / 13; }
}
@media (max-width: 860px) {
  .askstrip summary { padding: 11px 16px; gap: 12px; }
  .askstrip__title { font-size: 18px; }
  .askstrip__text { display: none; }
  .askstrip__more { margin-left: auto; }
  .askstrip { margin-top: 6px; }
  .askstrip__body { max-height: calc(100svh - 270px); }
  .askstrip__body .ask__copy .lede { font-size: 15.5px; }
}
/* A short phone: the caption under the screen keeps less room, so the strip stays in the pinned frame. */
@media (max-width: 860px) and (max-height: 720px) { .screen__caption { min-height: 4.8em; } }

/* Where you are on the wheel: six dots, the current one lit with the drop's light. */
.dots { display: none; }
@media (min-width: 861px) {
  .dots { display: flex; flex-direction: column; gap: 10px; position: absolute; left: calc(var(--gutter) - 22px); top: 50%;
    transform: translateY(-50%); }
  .takes__grid { position: relative; }
}
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); transition: background-color .6s, box-shadow .6s; }
.dots i.is-on { background: var(--blue); box-shadow: 0 0 10px var(--blue); }

/* Hands-free: a big panel like the reference's feature cards, the copy on one side and the demo Mac that obeys. */
.eyebrow--mint { color: var(--mint); }
.hf__panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center;
  border: 1px solid var(--line); border-radius: calc(var(--radius) + 10px); padding: clamp(28px, 5vw, 72px);
  background: radial-gradient(ellipse 70% 80% at 85% 10%, rgba(115, 242, 204, .09), transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(77, 158, 255, .06), transparent 70%), var(--ink);
  overflow: hidden; }
.hf__copy { grid-column: 1 / 6; }
.hf__demo { grid-column: 6 / 13; }
.hf__copy .lede { margin-top: 24px; }
.hf__cmds { list-style: none; margin: 32px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hf__cmds li { font-size: 15px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: #c3ccd4; transition: color .6s, border-color .6s, background-color .6s, box-shadow .6s; }
.hf__cmds li::before { content: "«"; color: var(--muted); } .hf__cmds li::after { content: "»"; color: var(--muted); }
.hf__cmds li.is-on { color: var(--night); background: var(--mint); border-color: var(--mint);
  box-shadow: 0 0 24px -4px rgba(115, 242, 204, .6); }
.hf__cmds li.is-on::before, .hf__cmds li.is-on::after { color: rgba(7, 9, 12, .55); }
/* The tools: a title, then one card per tool, side by side. On its own (no JS, reduced motion) both cards are open,
   the copy over the demo. With motion (tools--live, site.js) one is open and wide and the other a narrow card with its
   small scene and name; they change places by the row's columns. The open content keeps the wide card's width
   (--open-w, set by site.js) while its card narrows, so nothing in it is laid out again: it is only cut and faded. */
.tools__lede { margin: 18px 0 0; }
.tools__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: clamp(32px, 4.5vw, 56px); }
.tool { --h: #73F2CC; --h2: #4D9EFF; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px);
  background: radial-gradient(ellipse 70% 80% at 85% 10%, rgba(115, 242, 204, .08), transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(77, 158, 255, .06), transparent 70%), var(--ink); }
.tool--pocket { --h: #9E73FF; --h2: #F280D9;
  background: radial-gradient(ellipse 70% 80% at 85% 10%, rgba(158, 115, 255, .1), transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(242, 128, 217, .05), transparent 70%), var(--ink); }
.tool--clipboard { --h: #4D9EFF; --h2: #5AEBFF;
  background: radial-gradient(ellipse 70% 80% at 85% 10%, rgba(77, 158, 255, .1), transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(90, 235, 255, .05), transparent 70%), var(--ink); }
.tool--dictation { --h: #5AEBFF; --h2: #9E73FF;
  background: radial-gradient(ellipse 70% 80% at 85% 10%, rgba(90, 235, 255, .08), transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(158, 115, 255, .06), transparent 70%), var(--ink); }
.tool__open { display: flex; flex-direction: column; gap: 28px; padding: clamp(22px, 3vw, 40px); box-sizing: border-box; }
.tool__title { margin: 0; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.025em; font-weight: 300; }
.tool__lede { margin: 14px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.tool .hf__cmds { margin: 18px 0 12px; gap: 6px; }
.tool .hf__cmds li { font-size: 13.5px; padding: 6px 11px; }
.tool__closed { display: none; }
@media (min-width: 961px) {
  /* The open card's column is wide and the others narrow (site.js writes the columns for the card that is open). */
  .tools--live .tools__row { transition: grid-template-columns .9s var(--ease-camera); }
  /* Both cards are as tall as the taller one; the shorter one's content sits in the middle of its card. */
  .tools--live .tool, .tools--live .tool__body { display: grid; }
  /* Open: the demo on top, then the title on one line, its words and the steps. */
  .tools--live .tool__open { width: var(--open-w, 100%); justify-content: center; gap: 22px; padding: 30px 32px; transition: opacity .5s var(--ease-enter) .25s; }
  .tools--live .tool__open .hf__demo { order: -1; flex: none; width: 100%; max-width: 480px; margin: 0 auto; }
  .tools--live .tool__open .eyebrow { margin-bottom: 10px; }
  .tools--live .tool__open .tool__title { font-size: clamp(24px, 2.1vw, 29px); }
  .tools--live .tool__open .tool__title br { display: none; }
  .tools--live .tool__open .tool__title .hl::before { content: " "; }
  .tools--live .tool__open .tool__lede { margin: 10px 0 0; font-size: 15px; line-height: 1.5; }
  .tools--live .tool__open .hf__cmds { margin: 16px 0 0; }
  /* Only the steps the demo plays: the other examples of what to say stay for the open-everything views. */
  .tools--live .tool__open .hf__cmds li:not([data-cmd]) { display: none; }
  .tools--live .tool__open .small { display: none; }
  .tools--live .tool:not(.is-open) .tool__open { opacity: 0; pointer-events: none; transition-delay: 0s; }
  .tools--live .tool__closed { all: unset; box-sizing: border-box; position: absolute; inset: 0; display: flex; flex-direction: column;
    padding: 24px 20px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-enter); }
  .tools--live .tool:not(.is-open) .tool__closed { opacity: 1; pointer-events: auto; transition-delay: .35s; }
  .tools--live .tool__closed:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; border-radius: inherit; }
  .tool__closed .card__scene { margin-top: auto; }
  .tool__name { margin-top: auto; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; color: #F4F8FB; }
  .tools--live .tool__line { display: none; }
  .tool__plus { position: absolute; right: 18px; top: 18px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong);
    transition: transform .5s var(--ease-enter), border-color .4s; }
  .tool__plus::before, .tool__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--bone); }
  .tool__plus::after { transform: rotate(90deg); }
}
/* The words beside the plus, on a wide screen: they come out when the pointer is over the closed card (or the keyboard
   is on it) and say what a click does. A phone has no pointer to hover with: there the card's own row says it. */
.tool__more { display: none; }
@media (min-width: 961px) {
  .tool__more { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; line-height: 1.4; color: #c3ccd4; opacity: 0;
    transform: translateY(4px); transition: opacity .35s var(--ease-enter), transform .45s var(--ease-enter); }
  .tool__closed:focus-visible .tool__more { opacity: 1; transform: none; }
  .tool__closed:focus-visible .tool__plus { transform: rotate(90deg); border-color: var(--bone); }
}
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  .tool__closed:hover .tool__plus { transform: rotate(90deg); border-color: var(--bone); }
  .tool__closed:hover .tool__more { opacity: 1; transform: none; }
}
@media (max-width: 960px) {
  .tools__row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tool__open { gap: 0; padding: 26px 20px; }
  /* On a phone a closed card is its name alone; a tap opens it and closes the other. */
  .tools--live .tool__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-camera); }
  .tools--live .tool.is-open .tool__body { grid-template-rows: 1fr; }
  .tools--live .tool__open { min-height: 0; overflow: hidden; padding-block: 0; }
  .tools--live .tool__open > .hf__copy > :first-child { margin-top: 26px; }
  .tools--live .tool__open > .hf__copy > .small { margin-bottom: 26px; }
  .tools--live .tool__closed { all: unset; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; padding: 20px 64px 20px 20px; position: relative; cursor: pointer; }
  .tools--live .tool.is-open .tool__closed { display: none; }
  .tool__closed .card__scene { display: none; }
  .tool__name { font-size: 21px; line-height: 1.2; color: #F4F8FB; }
  .tool__line { margin-top: 6px; font-size: 14px; line-height: 1.45; color: #98A5B2; }
  .tool__plus { position: absolute; right: 18px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; border: 1px solid var(--line-strong); }
  .tool__plus::before, .tool__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--bone); }
  .tool__plus::after { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .tools__row, .tool__open, .tool__closed, .tool__body { transition: none !important; } }
.hf__cmds--plain li::before, .hf__cmds--plain li::after { content: none; }
@media (max-width: 960px) {
  .hf__panel, .tools__pane { grid-template-columns: 1fr; gap: 0; }
  .hf__copy, .hf__demo { grid-column: 1 / -1; }
  /* On a phone the drawn Mac comes right after the words that explain it, before the list of commands. */
  .hf__copy { display: contents; }
  .hf__cmds, .hf__copy > .small { order: 2; }
  .hf__demo { order: 1; margin-top: 28px; }
}
@media (max-width: 600px) {
  .hf__panel { padding: 26px 18px; border-radius: var(--radius); }
  .mac { aspect-ratio: 16 / 12.5; }
}

/* The hands-free demo (scenes.js, scenes/handsfree.js): the demo Mac seen close, its screen's middle round the notch
   (points --x to --x + --w of 1440, the top --a of that width), so the island and Safari read at the size of the type
   around them. A phone sees a narrower slice, still the whole Safari window (x 430-1010). */
.hf__screen { --x: 380; --w: 680; --a: .65; position: relative; aspect-ratio: 1 / var(--a); border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line-strong); background: #171a38; }
.hf__screen .scene { inset: 0 auto auto calc(-100% * var(--x) / var(--w)); width: calc(100% * 1440 / var(--w));
  height: calc(100% * 936 / (var(--w) * var(--a))); }
@media (max-width: 600px) { .hf__screen { --x: 420; --w: 600; --a: .72; } }

/* The pocket, drawn over the demo Mac's desk (scenes/pocket.js sends the steps; site.js writes them to data-step and
   measures where the pointer goes). Sized in em, the em following the frame's width, so it scales with the desk. The
   drop hangs under the notch; clicked, it opens into the tray: a field to type to Iris, the shelf, the pinned apps. */
.hf__screen { container-type: inline-size; }
.pk, .cb, .dt { position: absolute; inset: 0; z-index: 6; pointer-events: none; font-size: 10px; font-size: calc(100cqw / 54); color: #E8EEF2; line-height: 1.2; }
/* On a phone the pocket's frame is a little taller and its drawing larger, so the tray's words still read. */
@media (max-width: 600px) { .tool:not(.tool--handsfree) .hf__screen { --a: .86; } .pk, .cb, .dt { font-size: calc(100cqw / 44); } }
.pk i { position: absolute; display: block; font-style: normal; }
.pk p { margin: 0; }
.pk-drop { left: 50%; top: 4.3em; width: 4.4em; height: 4.4em; margin-left: -2.2em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .28), #0b1020 62%);
  box-shadow: inset 0 0 0 .2em #7fd0ff, inset 0 0 .9em rgba(158, 115, 255, .7), 0 0 1.8em rgba(110, 160, 255, .65);
  transition: transform .6s var(--ease-enter), opacity .45s var(--ease-enter); }
.pk-tray { position: absolute; left: 50%; top: 9.6em; width: 30em; margin-left: -15em; padding: 1.5em 1.6em 1.7em; border-radius: 2.4em;
  background: rgba(22, 32, 50, .82); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 0 2.6em rgba(120, 150, 255, .35), 0 1.6em 3.4em rgba(0, 0, 0, .4);
  opacity: 0; transform: translateY(-5.4em) scale(.16); transform-origin: 50% 0;
  transition: transform .7s var(--ease-enter), opacity .5s var(--ease-enter); }
/* The lit frame round the tray: the drop's own light, opened out. */
.pk-tray::before { content: ""; position: absolute; inset: -.24em; border-radius: 2.6em; padding: .22em; pointer-events: none;
  background: linear-gradient(140deg, #5AEBFF, #4D9EFF 30%, #9E73FF 62%, #F280D9);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.pk-field { position: relative; display: flex; align-items: center; gap: .9em; height: 3.8em; padding: 0 1.2em; border-radius: 1.2em;
  background: rgba(232, 238, 242, .09); }
.pk-field .pk-dot { position: static; flex: none; width: .95em; height: 1.25em; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(160deg, #F280D9, #9E73FF); }
.pk-ph, .pk-typed { font-size: 1.5em; white-space: nowrap; }
.pk-ph { color: rgba(232, 238, 242, .7); transition: opacity .3s; }
.pk-typed { position: absolute; left: 2.05em; clip-path: inset(0 100% 0 0); transition: clip-path 0s; }
.pk-reply { height: 1.9em; margin: .45em 0 0 .25em; font-size: 1.3em; line-height: 1.9em; color: var(--mint); opacity: 0; transition: opacity .5s var(--ease-enter); }
.pk-label { margin: .85em 0 .5em .2em; font-size: 1.15em; line-height: 1.3; font-weight: 600; color: rgba(232, 238, 242, .58); }
.pk-row { display: flex; gap: 1.1em; }
.pk-row i { position: relative; flex: none; width: 4.4em; height: 4.4em; border-radius: 1.05em; }
.pk-note { background: #F3F2EC repeating-linear-gradient(180deg, transparent 0 .62em, rgba(40, 40, 50, .45) .62em .78em) 0 .5em / 70% 62% no-repeat; background-position: .6em .7em; }
.pk-img { background: linear-gradient(180deg, #6fb6e6 0 38%, #2f7fa8 38% 70%, #b9aa84 70%); }
.pk-link { border-radius: 50% !important; background: #2F8FFF; }
.pk-link::after { content: ""; position: absolute; left: 1.15em; top: 1.75em; width: 2.1em; height: .9em; border: .28em solid #fff; border-radius: .6em; transform: rotate(-45deg); }
.pk-pdf, .pk-file { background: linear-gradient(180deg, #fff, #E9E9EE); border-radius: .5em !important; }
.pk-row .pk-pdf { width: 3.4em; margin: 0 .5em; opacity: 0; transform: scale(.5); transition: transform .5s var(--ease-enter), opacity .3s; }
.pk-pdf::after, .pk-file::after { content: ""; position: absolute; left: .6em; right: .6em; top: 1.5em; height: 1.6em;
  background: repeating-linear-gradient(180deg, rgba(60, 60, 75, .5) 0 .16em, transparent .16em .55em); }
.pk-app:nth-child(1) { background: linear-gradient(160deg, #58c9f2, #2b8de0); }
.pk-app:nth-child(2) { background: linear-gradient(160deg, #f4cf55, #e2a62a); }
.pk-app:nth-child(3) { background: linear-gradient(160deg, #45a8f2, #2a7ddb); }
.pk-app:nth-child(4) { background: linear-gradient(160deg, #e6505a, #c3303c); }
.pk-app:nth-child(5) { background: linear-gradient(160deg, #3fd0b6, #1f9c8a); }
.pk-app::after { content: ""; position: absolute; left: 1.2em; top: 1.2em; width: 2em; height: 2em; border-radius: 50%; border: .26em solid rgba(255, 255, 255, .92); box-sizing: border-box; }
.pk-app:nth-child(2)::after { border: 0; border-radius: .2em; height: 1.7em; top: 1.4em; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .92) 0 .28em, transparent .28em .7em); }
.pk-app:nth-child(3)::after { border-radius: .3em; height: 1.5em; top: 1.45em; }
.pk-app:nth-child(4)::after { border-radius: .4em; border-top-width: .6em; }
.pk-app:nth-child(5)::after { border: 0; border-radius: .2em; height: .3em; top: 1.5em; background: rgba(255, 255, 255, .92); box-shadow: 0 .75em 0 rgba(255, 255, 255, .92), 0 1.5em 0 rgba(255, 255, 255, .92); }
/* The file being handed over, and the pointer: site.js measures where they go (--file-x…), in the frame's own points. */
.pk-file { left: 0; top: 0; width: 3.4em; height: 4.4em; opacity: 0; transform: translate(72em, 30em); box-shadow: 0 .6em 1.4em rgba(0, 0, 0, .45); }
.pk-cursor { left: 0; top: 0; width: 1.5em; height: 2em; background: #fff; clip-path: polygon(0 0, 0 78%, 26% 60%, 46% 100%, 62% 92%, 42% 54%, 74% 54%);
  opacity: 0; transform: translate(54em, 34em); transition: transform .8s var(--ease-camera), opacity .4s; }
/* 0: the pointer goes to the drop, clicks, and the drop opens into the tray. */
.pk[data-step="0"] .pk-cursor { opacity: 1; transform: translate(var(--drop-x, 34em), var(--drop-y, 7em)); }
.pk:not([data-step="-1"]):not([data-step="4"]) .pk-tray { opacity: 1; transform: none; }
.pk:not([data-step="-1"]):not([data-step="4"]) .pk-drop { opacity: 0; transform: translateY(3em) scale(2.4); }
.pk[data-step="0"] .pk-tray, .pk[data-step="0"] .pk-drop { transition-delay: 1s; }
/* 1: a file comes from the desk and lands on the shelf. */
.pk[data-step="1"] .pk-file { opacity: 0; transform: translate(var(--file-x, 38em), var(--file-y, 22em));
  transition: transform 1.3s var(--ease-camera) .25s, opacity .3s 0s, opacity .25s 1.5s; animation: pk-carry 1.8s both; }
@keyframes pk-carry { 0%, 8% { opacity: 0; } 16%, 82% { opacity: 1; } 100% { opacity: 0; } }
.pk[data-step="1"] .pk-cursor { opacity: 1; transform: translate(calc(var(--file-x, 38em) + 1.4em), calc(var(--file-y, 22em) + 2.2em));
  transition: transform 1.3s var(--ease-camera) .25s, opacity .4s; }
.pk[data-step="1"] .pk-row .pk-pdf, .pk[data-step="2"] .pk-row .pk-pdf, .pk[data-step="3"] .pk-row .pk-pdf { opacity: 1; transform: none; }
.pk[data-step="1"] .pk-row .pk-pdf { transition-delay: 1.45s; }
/* 2: a pinned app, pressed. */
.pk[data-step="2"] .pk-cursor { opacity: 1; transform: translate(var(--app-x, 30em), var(--app-y, 30em)); }
.pk[data-step="2"] .pk-app:nth-child(2) { animation: pk-press .7s var(--ease-enter) .95s both; }
@keyframes pk-press { 0%, 100% { transform: none; } 35% { transform: scale(.84); } 70% { transform: scale(1.08); } }
/* 3: a request typed in the field, and its answer under it. */
.pk[data-step="3"] .pk-cursor { opacity: 1; transform: translate(var(--ask-x, 28em), var(--ask-y, 13em)); }
.pk[data-step="3"] .pk-ph { opacity: 0; transition-delay: .9s; }
.pk[data-step="3"] .pk-typed { clip-path: inset(0 0 0 0); transition: clip-path .9s steps(11) 1s; }
.pk[data-step="3"] .pk-reply { opacity: 1; transition-delay: 2.2s; }
@media (prefers-reduced-motion: reduce) { .pk *, .pk { transition: none !important; animation: none !important; } .pk-cursor, .pk-file { display: none !important; } }

/* The clipboard, drawn over the desk (scenes/tools.js sends the steps): a note being written, the keys, the list of the
   last copies opening by it, a search that leaves one, and its paste into the note. */
.cb p, .dt p { margin: 0; }
.cb-doc, .dt-win { position: absolute; border-radius: 1.4em; background: rgba(26, 29, 36, .95); border: 1px solid rgba(232, 238, 242, .14);
  box-shadow: 0 1.4em 3em rgba(0, 0, 0, .4); }
.cb-doc { left: 6%; top: 7em; width: 26em; height: 19em; }
.cb-doc::before { content: ""; position: absolute; left: 1.2em; top: 1.1em; width: .75em; height: .75em; border-radius: 50%; background: rgba(232, 238, 242, .25);
  box-shadow: 1.2em 0 0 rgba(232, 238, 242, .25), 2.4em 0 0 rgba(232, 238, 242, .25); }
.cb-doc i { position: absolute; left: 1.6em; top: 4em; width: 16em; height: 1em; border-radius: .5em; background: rgba(232, 238, 242, .2); }
.cb-doc i:nth-child(2) { top: 6.3em; width: 20em; }
.cb-doc i:nth-child(3) { top: 8.6em; width: 12em; }
.cb-paste { position: absolute; left: 1.15em; top: 8em; padding: .25em .45em; border-radius: .5em; font-size: 1.35em; white-space: nowrap; opacity: 0;
  background: color-mix(in srgb, var(--h) 0%, transparent); transition: opacity .35s var(--ease-enter), background-color 1.2s var(--ease-enter); }
.cb-panel { position: absolute; right: 6%; top: 5.2em; width: 24em; padding: 1.2em; border-radius: 1.7em; background: rgba(22, 32, 50, .93);
  border: 1px solid color-mix(in srgb, var(--h) 55%, transparent); box-shadow: 0 0 2.4em color-mix(in srgb, var(--h) 30%, transparent), 0 1.6em 3.2em rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(1em) scale(.94); transform-origin: 30% 0; transition: transform .55s var(--ease-enter), opacity .4s var(--ease-enter); }
.cb-search { position: relative; display: flex; align-items: center; height: 3.2em; padding: 0 1em; border-radius: 1em; background: rgba(232, 238, 242, .09); }
.cb-ph, .cb-typed { font-size: 1.35em; white-space: nowrap; }
.cb-ph { color: rgba(232, 238, 242, .55); transition: opacity .3s; }
.cb-typed { position: absolute; left: .75em; clip-path: inset(0 100% 0 0); }
.cb-row { display: flex; align-items: center; justify-content: space-between; height: 3em; margin-top: .5em !important; padding: 0 .9em; border-radius: .9em;
  border: 1px solid transparent; transition: opacity .5s var(--ease-enter), background-color .5s var(--ease-enter), border-color .5s var(--ease-enter); }
.cb-row span { font-size: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-row b { flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: .45em; border: 1px solid rgba(232, 238, 242, .2);
  font-size: 1.05em; font-weight: 500; color: rgba(232, 238, 242, .6); }
.cb-keys { position: absolute; left: 50%; bottom: 2.2em; display: flex; gap: .5em; transform: translateX(-50%); opacity: 0; transition: opacity .4s var(--ease-enter); }
.cb-keys b, .dt-key { display: grid; place-items: center; border-radius: .5em; background: rgba(40, 44, 54, .96); border: 1px solid rgba(232, 238, 242, .22);
  font-weight: 500; color: #F4F8FB; box-shadow: 0 .3em .8em rgba(0, 0, 0, .4); }
.cb-keys b { width: 2.1em; height: 2.1em; font-size: 1.6em; }
.cb[data-step="0"] .cb-keys { opacity: 1; }
.cb[data-step="0"] .cb-keys b { animation: pk-press .6s var(--ease-enter) .35s both; }
.cb[data-step="0"] .cb-panel, .cb[data-step="1"] .cb-panel, .cb[data-step="2"] .cb-panel { opacity: 1; transform: none; }
.cb[data-step="0"] .cb-panel { transition-delay: .9s; }
.cb[data-step="1"] .cb-ph, .cb[data-step="2"] .cb-ph { opacity: 0; }
.cb[data-step="1"] .cb-typed, .cb[data-step="2"] .cb-typed { clip-path: inset(0 0 0 0); }
.cb[data-step="1"] .cb-typed { transition: clip-path .5s steps(4) .5s; }
.cb[data-step="1"] .cb-ph { transition-delay: .45s; }
.cb[data-step="1"] .cb-row:not(.cb-hit), .cb[data-step="2"] .cb-row:not(.cb-hit) { opacity: .25; }
.cb[data-step="1"] .cb-hit, .cb[data-step="2"] .cb-hit { background: color-mix(in srgb, var(--h) 22%, transparent); border-color: color-mix(in srgb, var(--h) 60%, transparent); }
.cb[data-step="1"] .cb-row { transition-delay: 1.1s; }
.cb[data-step="2"] .cb-hit { animation: pk-press .6s var(--ease-enter) .3s both; }
.cb[data-step="2"] .cb-panel { opacity: 0; transform: translateY(1em) scale(.94); transition-delay: 1s; }
.cb[data-step="2"] .cb-paste { opacity: 1; background: color-mix(in srgb, var(--h) 30%, transparent); transition-delay: 1.3s, 1.3s; }

/* Dictation, drawn over the desk: a message being written, the key held, the small pill that listens under the notch
   (what is said shows as the kit's caption), and on letting go the clean sentence at the cursor. */
.dt-win { left: 50%; top: 8.2em; width: 36em; height: 14em; margin-left: -18em; }
.dt-to { margin: 1.1em 1.6em 0 !important; padding-bottom: .9em; border-bottom: 1px solid rgba(232, 238, 242, .12); font-size: 1.25em; color: rgba(232, 238, 242, .55); }
.dt-text { margin: 1em 1.05em !important; font-size: 1.55em; line-height: 1.4; }
.dt-clean { opacity: 0; transition: opacity .3s var(--ease-enter); }
.dt-caret { position: static !important; display: inline-block; width: .09em; height: 1.1em; margin-left: .1em; vertical-align: -.18em; background: var(--h); }
.dt .dt-clean + .dt-caret { margin-left: -100%; }
.dt-pill { position: absolute; left: 50%; top: 4.1em; width: 11em; height: 2.8em; margin-left: -5.5em; border-radius: 1.4em; background: #000;
  border: 1px solid rgba(232, 238, 242, .16); box-shadow: 0 .5em 2em -.6em var(--h); opacity: 0; transform: translateY(-.8em) scale(.9);
  transition: opacity .4s var(--ease-enter), transform .5s var(--ease-enter); }
.dt-pill b { position: absolute; top: .55em; left: 3.3em; width: .45em; height: 1.7em; border-radius: .25em; background: var(--h); transform: scaleY(.25); }
.dt-pill b:nth-child(2) { left: 4.3em; }
.dt-pill b:nth-child(3) { left: 5.3em; }
.dt-pill b:nth-child(4) { left: 6.3em; }
.dt-pill b:nth-child(5) { left: 7.3em; }
.dt-key { position: absolute; left: 6%; bottom: 3.1em; width: 2.9em; height: 2.9em; font-size: 1.7em; border-radius: .7em;
  transition: transform .25s var(--ease-enter), background-color .3s, box-shadow .3s; }
/* The demo shows the cleanup, which is the part Claude Code adds (dictation itself works without it): it says so. */
.dt-tag { position: absolute; left: 4%; top: 4.3em; padding: .35em .8em; border-radius: 999px; font-size: 1.1em; font-weight: 500; white-space: nowrap;
  color: #CFC2FF; border: 1px solid rgba(158, 115, 255, .5); background: rgba(158, 115, 255, .12); }
.dt[data-step="0"] .dt-pill, .dt[data-step="1"] .dt-pill { opacity: 1; transform: none; }
.dt[data-step="0"] .dt-pill { transition-delay: .5s; }
.dt[data-step="0"] .dt-key, .dt[data-step="1"] .dt-key { transform: scale(.9); background: color-mix(in srgb, var(--h) 35%, rgba(40, 44, 54, .96));
  box-shadow: 0 0 1.4em color-mix(in srgb, var(--h) 55%, transparent); }
.dt[data-step="0"] .dt-key { transition-delay: .3s; }
.dt[data-step="1"] .dt-pill b { animation: vg-bar .55s ease-in-out infinite alternate; }
.dt[data-step="1"] .dt-pill b:nth-child(2) { animation-delay: -.2s; }
.dt[data-step="1"] .dt-pill b:nth-child(3) { animation-delay: -.42s; }
.dt[data-step="1"] .dt-pill b:nth-child(4) { animation-delay: -.1s; }
.dt[data-step="1"] .dt-pill b:nth-child(5) { animation-delay: -.33s; }
.dt[data-step="2"] .dt-clean { opacity: 1; transition-delay: .5s; }
.dt[data-step="2"] .dt .dt-caret, .dt[data-step="2"] .dt-clean + .dt-caret { margin-left: .1em; }
@media (prefers-reduced-motion: reduce) { .cb, .cb *, .dt, .dt * { transition: none !important; animation: none !important; } }

/* The drawn Mac (the «Missing something?» demo): the notch at the top, the wings either side. */
.mac { position: relative; aspect-ratio: 16 / 10.4; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-strong);
  background: radial-gradient(ellipse 80% 70% at 30% 100%, #1b1745 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 90% 0%, #10294a 0%, transparent 70%), #0d0f1d; }
.mac__bar { position: absolute; inset: 0 0 auto 0; height: 9%; display: flex; justify-content: center; align-items: stretch;
  z-index: 3; }
.mac__notch { width: 21%; background: #000; border-radius: 0 0 14px 14px; }
.mac__wing { width: 0; background: #000; display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  font-size: clamp(10px, 1.05vw, 13px); font-weight: 500; transition: width .9s var(--ease-enter); }
.mac__wing--l { border-radius: 0 0 0 14px; }
.mac__wing--r { border-radius: 0 0 14px 0; justify-content: flex-start; gap: 8px; padding-left: 0; }

/* With or without Claude Code: two panels; the Claude one wears the drop's light, turning slowly. */
@property --turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* 880px: the Italian «Piena potenza con Claude Code.» needs it to stay on one line at desktop widths. */
.compare__head { max-width: 880px; }
.compare__head .lede { margin-top: 24px; }
.compare__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.compare__switch { display: none; }
.plan { position: relative; border-radius: calc(var(--radius) + 6px); padding: clamp(24px, 3vw, 40px); background: var(--ink);
  border: 1px solid var(--line); isolation: isolate; }
.plan__head { display: flex; gap: 16px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.plan__head .small { margin-top: 2px; }
.plan__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.plan--local .plan__dot { background: var(--mint); box-shadow: 0 0 16px var(--mint); }
.plan--claude .plan__dot { background: conic-gradient(from var(--turn), var(--cyan), var(--blue), var(--violet), var(--pink), var(--cyan));
  box-shadow: 0 0 18px rgba(158, 115, 255, .8); animation: turn 14s linear infinite; }
.plan__rows { list-style: none; margin: 8px 0 0; padding: 0; }
.plan__rows li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 16px; line-height: 1.45; }
.plan__rows li:last-child { border-bottom: 0; }
.plan__rows li.is-no { color: #6c7783; }
.plan__note { color: var(--muted); font-size: 14px; }
.mark { flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 0; position: relative;
  transition: opacity .7s var(--ease-enter), transform .7s var(--ease-enter); }
.mark--yes::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px;
  border: solid var(--night); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plan--local .mark--yes { background: var(--mint); }
.plan--claude .mark--yes { background: linear-gradient(135deg, var(--cyan), var(--blue) 45%, var(--violet) 80%, var(--pink)); }
.mark--no { border: 1px solid var(--line-strong); }
.mark--no::before, .mark--no::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px;
  background: #6c7783; transform: translate(-50%, -50%) rotate(45deg); }
.mark--no::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The rim: a conic gradient of the drop's colours behind the panel, masked to a 1.5px ring, with a soft glow. */
.plan--claude::before, .plan--claude::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--turn), var(--cyan), var(--blue), var(--violet), var(--pink), var(--cyan));
  animation: turn 14s linear infinite; }
.plan--claude::before { padding: 1.5px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.plan--claude::after { inset: 10%; filter: blur(60px); opacity: .28; z-index: -2; transition: opacity 1.6s var(--ease-enter); }
.compare.is-lit .plan--claude::after { opacity: .5; }
@keyframes turn { to { --turn: 360deg; } }
/* Marks light one after another when the panels come into view (site.js sets the delays). */
.js-marks .mark { opacity: 0; transform: scale(.6); }
.js-marks .compare.is-lit .mark { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .compare__grid { grid-template-columns: 1fr; margin-top: 20px; }
  .compare__switch { display: inline-flex; margin-top: 36px; padding: 4px; border-radius: 999px; border: 1px solid var(--line-strong); }
  .compare__switch button { all: unset; cursor: pointer; font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: 999px;
    color: var(--muted); min-height: 24px; transition: background-color .4s, color .4s; }
  .compare__switch button[aria-pressed="true"] { background: var(--bone); color: var(--ink); }
  .compare__switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .compare__grid[data-show="with"] .plan--local, .compare__grid[data-show="without"] .plan--claude { display: none; }
}

/* The close: the drop's light rises from the bottom and fills the screen while the lines arrive. */
.finale { position: relative; height: 220svh; }
.finale__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.finale__light { position: absolute; left: 50%; top: 100%; width: 170vmax; height: 170vmax; transform: translate(-50%, var(--rise, 0%)) ;
  will-change: transform; pointer-events: none; }
.finale__light i { position: absolute; inset: 0; border-radius: 50%; filter: blur(40px); }
.finale__light i:nth-child(1) { background: radial-gradient(circle, rgba(77, 158, 255, .95) 0%, rgba(77, 158, 255, .45) 30%, transparent 62%); }
.finale__light i:nth-child(2) { inset: 8% 22% 30% -6%; background: radial-gradient(circle, rgba(158, 115, 255, .85), transparent 65%);
  animation: drift 18s var(--ease-camera) infinite alternate; }
.finale__light i:nth-child(3) { inset: 4% -8% 34% 30%; background: radial-gradient(circle, rgba(90, 235, 255, .7), transparent 62%);
  animation: drift 22s var(--ease-camera) infinite alternate-reverse; }
@keyframes drift { to { transform: translate(6%, 4%) scale(1.08); } }
.finale__text { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.finale__title { font-size: clamp(54px, 10vw, 150px); line-height: .98; letter-spacing: -.045em; font-weight: 300; }
.finale__l1, .finale__l2 { display: block; transition: color 1.2s var(--ease-enter), opacity 1.2s var(--ease-enter), transform 1.2s var(--ease-enter); }
.finale__l2 { opacity: .12; transform: translateY(12px); }
.finale.is-two .finale__l2 { opacity: 1; transform: none; }
.finale__body { margin: 32px auto 0; color: rgba(232, 238, 242, .9); text-shadow: 0 1px 24px rgba(7, 9, 12, .35);
  opacity: 0; transform: translateY(12px); transition: opacity 1.1s var(--ease-enter), transform 1.1s var(--ease-enter); }
.finale__cta { margin-top: 32px; opacity: 0; transform: translateY(12px);
  transition: opacity 1.1s .15s var(--ease-enter), transform 1.1s .15s var(--ease-enter), background-color .4s, box-shadow .6s; }
.finale.is-three .finale__body, .finale.is-three .finale__cta { opacity: 1; transform: none; }
.no-js .finale { height: auto; } .no-js .finale__sticky { position: relative; padding: 160px 0; }
.no-js .finale__l2, .no-js .finale__body, .no-js .finale__cta { opacity: 1; transform: none; }

/* It asks first: the copy on the left ticks with the demo Mac's three moments (proofs.js). Each line's rule fills with
   its moment's clock; the line in play is bright, the others wait in the muted tone. */
.proofs__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.proofs__copy { grid-column: 1 / 6; }
.proofs__demo { grid-column: 6 / 13; }
.proofs__lede { margin: 28px 0 0; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.35; font-weight: 400; color: var(--bone); }
.proofs__list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.proofs__list li { position: relative; padding: 10px 0 10px 22px; font-size: 17px; line-height: 1.5; color: var(--muted);
  transition: color .5s var(--ease-enter); }
.proofs__list li.is-on { color: var(--bone); }
.proofs__bar { position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 1px; background: var(--line-strong);
  overflow: hidden; }
.proofs__bar i { position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(0);
  background: linear-gradient(var(--cyan), var(--blue) 50%, var(--violet)); }
.proofs__stop { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55;
  color: var(--muted); max-width: 32em; transition: color .5s var(--ease-enter); }
.proofs__stop.is-on { color: var(--bone); }
.proofs__frame { position: relative; aspect-ratio: 1440 / 936; border-radius: var(--radius); overflow: hidden;
  background: #12102c; border: 1px solid var(--line-strong);
  box-shadow: 0 40px 120px -40px rgba(77, 158, 255, .3), 0 30px 80px -30px rgba(158, 115, 255, .24); }
.proofs__also { margin: clamp(40px, 6vh, 64px) 0 0; font-size: 16px; color: var(--muted); }
.proofs__also a { color: var(--bone); text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease-enter), color .3s; }
@media (hover: hover) and (pointer: fine) { .proofs__also a:hover { background-size: 0 1px; } }
.proofs__also a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
/* Without its moments (no script, reduced motion) every line reads at full strength. */
.proofs.is-still .proofs__list li, .no-js .proofs__list li { color: #c3ccd4; }
.proofs.is-still .proofs__bar, .no-js .proofs__bar { display: none; }
.proofs.is-still .proofs__list li, .no-js .proofs__list li { padding-left: 0; }
@media (max-width: 960px) {
  .proofs__grid { grid-template-columns: 1fr; gap: 0; }
  .proofs__copy, .proofs__demo { grid-column: 1 / -1; }
  /* On a phone the demo Mac comes right after «It asks first.», the lines that tick with it just under it. */
  .proofs__copy { display: contents; }
  .proofs__demo { order: 1; margin-top: 24px; }
  .proofs__list { order: 2; }
  .proofs__stop { order: 3; }
  .proofs__list li { font-size: 16px; }
}

/* What goes where: three columns say it at a glance; under them, on request, the diagram of the one way out. */
.where { background: radial-gradient(ellipse 50% 60% at 85% 40%, rgba(158, 115, 255, .07), transparent 70%),
  radial-gradient(ellipse 40% 50% at 10% 70%, rgba(90, 235, 255, .05), transparent 70%); }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: 56px;
  border-top: 1px solid var(--line); padding-top: 40px; }
.col p { margin-top: 10px; color: var(--muted); }
.col__dot { display: block; width: 10px; height: 10px; border-radius: 50%; margin-bottom: 18px; }
.col__dot--local { background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.col__dot--provider { background: var(--blue); box-shadow: 0 0 18px var(--blue); }
.col__dot--never { background: transparent; border: 1px solid var(--muted); }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; gap: 32px; } }
/* The disclosure: a quiet text button. The panel opens by growing its row from 0fr to 1fr (no measured heights, and a
   transition, so a second click mid-way reverses from where it is) while its content fades and settles. */
.where__more { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; margin: 40px 0 0 -14px;
  min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--muted);
  transition: color .3s ease; }
.where__more:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; }
@media (hover: hover) and (pointer: fine) { .where__more:hover { color: var(--bone); } }
.where__more-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .5s var(--ease-enter); }
.where__more[aria-expanded="true"] .where__more-chev { transform: translateY(2px) rotate(225deg); }
.where__diagram { --open: .55s; display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--open) var(--ease-enter), visibility 0s var(--open); }
.where__diagram.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--open) var(--ease-enter), visibility 0s; }
/* Clipped while it moves; once open the glows of the boxes may spill out again (site.js sets is-settled). */
.where__diagram-clip { min-height: 0; overflow: hidden; }
.where__diagram.is-settled .where__diagram-clip { overflow: visible; }
.where__diagram-body { padding-top: 28px; opacity: 0; transform: translateY(-12px);
  transition: opacity .4s var(--ease-enter), transform var(--open) var(--ease-enter); }
.where__diagram.is-open .where__diagram-body { opacity: 1; transform: none; transition: opacity var(--open) var(--ease-enter) .08s, transform var(--open) var(--ease-enter); }
@media (prefers-reduced-motion: reduce) {
  .where__diagram, .where__diagram.is-open, .where__diagram-body, .where__diagram.is-open .where__diagram-body,
  .where__more-chev { transition: none; }
  .where__diagram-body { transform: none; }
}
.flow__switch { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line-strong); flex: none; }
.flow__switch button { all: unset; cursor: pointer; font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: 999px;
  color: var(--muted); min-height: 24px; transition: background-color .5s var(--ease-enter), color .5s var(--ease-enter); }
.flow__switch button[aria-pressed="true"] { background: var(--bone); color: var(--ink); }
.flow__switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.flow { --pad: clamp(24px, 3vw, 36px); display: grid; margin: 16px 0 0; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .6fr);
  grid-template-rows: 1fr auto 1fr; }
.flow .h3 { display: flex; align-items: center; gap: 12px; }
.flow__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.flow__dot--local { background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.flow__dot--provider { background: var(--blue); box-shadow: 0 0 18px var(--blue); }
.flow__mac, .flow__dest { position: relative; z-index: 1; border-radius: calc(var(--radius) + 6px); background: var(--ink); isolation: isolate; }
.flow__mac { grid-column: 1; grid-row: 1 / 4; align-self: center; padding: var(--pad);
  border: 1px solid rgba(90, 235, 255, .24); box-shadow: inset 0 0 48px rgba(90, 235, 255, .05), 0 0 80px -30px rgba(90, 235, 255, .45); }
/* The pool: the Mac's light drifts inside its walls and never crosses them. */
.flow__pool { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; pointer-events: none; }
.flow__pool i { position: absolute; left: -15%; top: -35%; width: 75%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(90, 235, 255, .15), rgba(77, 158, 255, .05) 60%, transparent);
  animation: flow-pool 22s var(--ease-camera) infinite alternate; }
@keyframes flow-pool { 50% { transform: translate(55%, 30%) scale(1.1); } to { transform: translate(20%, 60%) scale(.95); } }
.flow__keep { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.flow__keep li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(7, 9, 12, .45); font-size: 15px; line-height: 1.3; }
.flow__keep li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan); animation: flow-breathe 6s ease-in-out calc(var(--k) * -1.2s) infinite; }
@keyframes flow-breathe { 50% { opacity: .35; } }
/* The line: on wide screens its parts sit on the figure's rows, so the wire runs level with both boxes' centres. */
.flow__link { display: contents; }
.flow__top { grid-column: 2; grid-row: 1; align-self: end; text-align: center; padding: 0 18px 14px; }
.flow__h { justify-content: center; font-size: 17px; text-wrap: balance; }
.flow__dir { margin-top: 8px; font-size: 15px; transition: opacity 1s var(--ease-liquid); }
.flow__bottom { grid-column: 2; grid-row: 3; align-self: start; text-align: center; padding: 14px 18px 0; }
.flow__bottom .flow__dir { margin: 0 0 14px; }
.flow__note { font-size: 14px; line-height: 1.5; margin-top: 4px; transition: opacity 1s var(--ease-liquid); }
.flow__note--none { margin-top: 12px; color: var(--muted); }
.flow[data-state="with"] .flow__note--without, .flow[data-state="without"] .flow__note--with { opacity: .55; }
.flow__wire { grid-column: 2; grid-row: 2; align-self: center; position: relative; height: 44px; margin: 0 -1px; overflow: hidden; }
.flow__rail { position: absolute; left: 0; right: 0; height: 1px; transition: opacity 1s var(--ease-liquid); }
.flow__rail--out { top: 16px; background: linear-gradient(90deg, rgba(90, 235, 255, .6), rgba(77, 158, 255, .6)); }
.flow__rail--back { top: 28px; background: linear-gradient(90deg, rgba(77, 158, 255, .5), rgba(158, 115, 255, .55)); }
/* A packet is a full-length runner carrying a drop of light at one end: translating it by its own length (100%)
   carries the light from one box to the other on any width. */
.flow__run { position: absolute; inset: 0; pointer-events: none;
  animation: flow-out 5.6s cubic-bezier(.45, .05, .4, 1) infinite; }
.flow__run::before { content: ""; position: absolute; width: 30px; height: 3px; border-radius: 3px; transition: opacity .8s var(--ease-liquid); }
.flow__run--out::before { left: -30px; top: 15px;
  background: radial-gradient(closest-side, #fff, rgba(90, 235, 255, .9) 40%, rgba(90, 235, 255, 0));
  box-shadow: 0 0 14px 2px rgba(90, 235, 255, .45); }
.flow__run--back::before { right: -30px; top: 27px;
  background: radial-gradient(closest-side, #fff, rgba(158, 115, 255, .9) 40%, rgba(158, 115, 255, 0));
  box-shadow: 0 0 14px 2px rgba(158, 115, 255, .45); }
.flow__run--out[style*="--i:1"] { animation-delay: -2.1s; }
.flow__run--out[style*="--i:2"] { animation-delay: -4.2s; animation-duration: 6.1s; }
.flow__run--back { animation-name: flow-back; animation-duration: 6.6s; animation-delay: -1.3s; }
.flow__run--back[style*="--i:1"] { animation-delay: -4.6s; animation-duration: 7.2s; }
@keyframes flow-out { 0% { transform: translateX(0); opacity: 0; } 14% { opacity: 1; } 84% { opacity: 1; }
  100% { transform: translateX(calc(100% + 30px)); opacity: 0; } }
@keyframes flow-back { 0% { transform: translateX(0); opacity: 0; } 14% { opacity: 1; } 84% { opacity: 1; }
  100% { transform: translateX(calc(-100% - 30px)); opacity: 0; } }
.flow__cc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; white-space: nowrap;
  padding: 6px 14px; border-radius: 999px; background: var(--ink); border: 1px solid rgba(158, 115, 255, .4);
  font-size: 13px; font-weight: 500; line-height: 1.2; box-shadow: 0 0 26px -6px rgba(77, 158, 255, .6);
  transition: opacity 1s var(--ease-liquid); }
.flow__dest { grid-column: 3; grid-row: 1 / 4; align-self: center; padding: 26px var(--pad);
  border: 1px solid rgba(77, 158, 255, .3); box-shadow: 0 0 70px -30px rgba(77, 158, 255, .6); transition: opacity 1s var(--ease-liquid); }
.flow__dest-name { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; line-height: 1.3; }
/* Without Claude Code the line goes dark: nothing travels, the provider fades back; the Mac keeps its light. */
/* The runners' own opacity belongs to their animation, so the light itself (::before) is what goes out. */
.flow[data-state="without"] .flow__run::before { opacity: 0; }
.flow[data-state="without"] .flow__rail { opacity: .16; }
.flow[data-state="without"] .flow__cc, .flow[data-state="without"] .flow__dir { opacity: .5; }
.flow[data-state="without"] .flow__dest { opacity: .4; }
/* Paused while off screen (site.js sets is-live). */
.flow:not(.is-live) .flow__run, .flow:not(.is-live) .flow__pool i, .flow:not(.is-live) .flow__keep li::before { animation-play-state: paused; }
.where__line { margin-top: 48px; max-width: 46em; }
@media (prefers-reduced-motion: reduce) {
  .flow__run, .flow__pool i, .flow__keep li::before { animation: none !important; }
  .flow__run:not(.is-still) { display: none; }
  .flow__run--out.is-still { transform: translateX(calc(20% + 30px)); }
  .flow__run--back.is-still { transform: translateX(calc(-22% - 30px)); }
}
@media (max-width: 860px) {
  .flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .flow__mac, .flow__dest { grid-column: 1; grid-row: auto; }
  /* The line turns vertical: it leaves the Mac's bottom edge, clear of the rounded corner, and meets the provider. */
  .flow__link { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding-left: 22px; }
  .flow__wire { grid-column: 1; grid-row: 1 / 3; align-self: stretch; height: auto; min-height: 240px; margin: -1px 0; }
  .flow__top, .flow__bottom { grid-column: 2; text-align: left; padding: 22px 0 0; }
  .flow__top { grid-row: 1; align-self: start; }
  .flow__bottom { grid-row: 2; padding: 14px 0 22px; }
  .flow__h { justify-content: flex-start; }
  .flow__rail { top: 0; bottom: 0; height: auto; width: 1px; right: auto; }
  .flow__rail--out { top: 0; left: 16px; background: linear-gradient(180deg, rgba(90, 235, 255, .6), rgba(77, 158, 255, .6)); }
  .flow__rail--back { top: 0; left: 28px; background: linear-gradient(180deg, rgba(77, 158, 255, .5), rgba(158, 115, 255, .55)); }
  .flow__run::before { width: 3px; height: 30px; }
  .flow__run--out::before { left: 15px; top: -30px; }
  .flow__run--back::before { left: 27px; right: auto; top: auto; bottom: -30px; }
  .flow__run--out { animation-name: flow-out-v; }
  .flow__run--back { animation-name: flow-back-v; }
  .flow__cc { transform: translate(-50%, -50%) rotate(-90deg); }
  .flow__dest { padding: 22px var(--pad); }
}
@keyframes flow-out-v { 0% { transform: translateY(0); opacity: 0; } 14% { opacity: 1; } 84% { opacity: 1; }
  100% { transform: translateY(calc(100% + 30px)); opacity: 0; } }
@keyframes flow-back-v { 0% { transform: translateY(0); opacity: 0; } 14% { opacity: 1; } 84% { opacity: 1; }
  100% { transform: translateY(calc(-100% - 30px)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .flow__run--out.is-still { transform: translateY(calc(18% + 30px)); }
  .flow__run--back.is-still { transform: translateY(calc(-20% - 30px)); }
}

/* FAQ */
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.faq__grid > .h1 { grid-column: 1 / 6; }
.faq__list { grid-column: 6 / 13; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; } .faq__grid > .h1, .faq__list { grid-column: 1 / -1; } .faq__list { margin-top: 24px; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 40px 24px 0; font-size: 19px; font-weight: 400;
  position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .5s var(--ease-enter); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { color: var(--muted); padding: 0 40px 26px 0; max-width: 40em; }

/* Beta */
.beta { background: radial-gradient(ellipse 55% 60% at 70% 50%, rgba(77, 158, 255, .08), transparent 70%); }
.beta__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.beta__copy { grid-column: 1 / 6; }
.beta__grid > .form, .beta__get, .beta__actions { grid-column: 7 / 13; }
.beta .lede { margin-top: 24px; }
.beta__actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.beta__get { display: grid; gap: 20px; }
.beta__download { display: grid; gap: 12px; }
.beta__facts, .beta__first { margin: 0; text-align: center; }
.beta__first { font-size: 13px; opacity: .85; text-wrap: balance; max-width: 54ch; margin-inline: auto; }
.beta__facts span { white-space: nowrap; }  /* lines break between the items, never inside one */
.beta__facts a { color: var(--bone); }
.beta__notice { margin: 0; font-size: 17px; line-height: 1.5; color: var(--bone); }
.form--release { margin-top: 12px; }
.field__row { display: flex; gap: 10px; }
.field__row input { flex: 1; min-width: 0; }
.field__row .btn { flex: none; }
@media (max-width: 480px) { .field__row { flex-direction: column; } }
@media (max-width: 860px) { .beta__grid { grid-template-columns: 1fr; gap: 40px; } .beta__copy, .beta__grid > .form, .beta__get, .beta__actions { grid-column: 1 / -1; } }

.form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px);
  display: grid; gap: 22px; }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-size: 14px; font-weight: 500; padding: 0; }
.field input[type=email], .field input[type=text], .field textarea { width: 100%; font: 400 16px/1.4 var(--font);
  color: var(--bone); background: var(--night); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 13px 14px; transition: border-color .3s, box-shadow .3s; }
.field textarea { resize: vertical; min-height: 64px; }
.field input::placeholder { color: #5f6b77; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(77, 158, 255, .2); }
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.choices label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); font-weight: 400; cursor: pointer; transition: border-color .3s, background-color .3s; }
.choices label:has(input:checked) { border-color: var(--blue); background: rgba(77, 158, 255, .1); }
.choices input { accent-color: var(--blue); margin: 0; }
/* The beta's two required boxes: the sentence beside its box, the small print under it. */
.check { display: grid; gap: 6px; }
.check label, label.check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; cursor: pointer; }
.check input { accent-color: var(--blue); width: 18px; height: 18px; margin: 2px 0 0; }
.check a { color: var(--bone); }
.check__note { margin: 0 0 0 30px; line-height: 1.45; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__privacy a { color: var(--bone); }
.form__status { font-size: 15px; min-height: 0; }
.form__status:empty { display: none; }
.form.is-done .field, .form.is-done .btn, .form.is-done .form__privacy { display: none; }
.form.is-done .form__status { font-size: 19px; line-height: 1.5; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 36px 0 44px; }
.foot__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot__name { font-weight: 500; }
.foot nav { display: flex; gap: 24px; font-size: 14px; }
.foot nav a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.foot nav a:hover { color: var(--bone); }
/* The language switch: the page's own language reads as the current one. */
.foot__lang { gap: 14px; }
html[lang="en"] .foot__lang a[data-lang="en"], html[lang="it"] .foot__lang a[data-lang="it"] { color: var(--bone); }
.foot__legal { margin: 0; }
.foot__base { display: flex; align-items: center; justify-content: space-between; gap: 0 24px; flex-wrap: wrap; margin-top: 8px; }
.foot nav.foot__social { gap: 2px; margin-right: -12px; }
.foot nav.foot__social a { width: 44px; height: 44px; justify-content: center; border-radius: 12px; transition: color .3s; }
.foot nav.foot__social a:hover, .foot nav.foot__social a:focus-visible { color: var(--bone); }
.foot__social svg { width: 19px; height: 19px; fill: currentColor; }
@media (max-width: 860px) { .foot nav.foot__social { margin: 4px 0 0 -12px; } }

/* Plain pages: thanks, 404, legal drafts */
.page { padding: 140px 0 96px; min-height: 80svh; }
.page h1 { margin-bottom: 24px; }
.page .lede { margin-bottom: 36px; }
.legal h2 { font-size: 24px; font-weight: 400; letter-spacing: -.01em; margin: 48px 0 12px; }
.legal h3 { font-size: 18px; font-weight: 500; margin: 28px 0 8px; }
.legal p, .legal li { color: #c3ccd4; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 1.2em; margin: 12px 0; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--bone); }
.draft { border: 1px solid rgba(242, 128, 217, .4); background: rgba(242, 128, 217, .06); border-radius: 14px;
  padding: 14px 18px; margin-bottom: 36px; font-size: 15px; }
.legal table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 15px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.legal th { font-weight: 500; color: var(--bone); }
.legal td { color: #c3ccd4; }

/* Missing something? Just ask: the app's «New command» card, drawn, dropping out of the island. */
.ask { background: radial-gradient(ellipse 55% 60% at 80% 30%, rgba(77, 158, 255, .08), transparent 70%); }
.ask__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.ask__copy { grid-column: 1 / 6; }
.ask__copy .lede { margin-top: 24px; }
.ask__demo { grid-column: 6 / 13; }
.ask__ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 64px; }
.way { padding: 26px 24px 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.way__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; margin-bottom: 18px;
  font-size: 13px; color: var(--night); background: radial-gradient(circle at 35% 35%, var(--cyan), var(--blue) 55%, var(--violet));
  box-shadow: 0 0 18px rgba(77, 158, 255, .45); }
.way p { margin-top: 10px; color: var(--muted); font-size: 16px; }
.ask__note { margin-top: 32px; max-width: 46em; }
/* The compact form, right under the wheel: one panel, the words beside the demo, and the three ways as rows that open
   on a click, so the section is a third of the height it had. */
.ask--compact { padding-top: clamp(8px, 2vw, 24px); padding-bottom: clamp(40px, 6vh, 72px); background: none; }
.ask__panel { border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: clamp(22px, 3vw, 40px);
  background: radial-gradient(ellipse 55% 80% at 85% 20%, rgba(77, 158, 255, .09), transparent 70%), var(--ink); }
.ask--compact .ask__grid { gap: 32px; }
.ask--compact .ask__copy { grid-column: 1 / 7; }
.ask--compact .ask__demo { grid-column: 7 / 13; }
.ask__title { margin: 0; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -.025em; font-weight: 300; }
.ask--compact .ask__copy .eyebrow { margin-bottom: 12px; }
.ask--compact .ask__copy .lede { margin-top: 14px; font-size: 16.5px; line-height: 1.5; }
.ask--compact .ask__ways { margin-top: 26px; gap: 12px; align-items: start; }
.ask--compact .way { padding: 0; border-radius: 16px; background: rgba(232, 238, 242, .03); }
.ask--compact .way summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; }
.ask--compact .way summary::-webkit-details-marker { display: none; }
.ask--compact .way summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .4s var(--ease-enter); }
.ask--compact .way[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.ask--compact .way summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 16px; }
.ask--compact .way__n { flex: none; margin: 0; }
.ask--compact .way .h3 { margin: 0; font-size: 16px; }
.ask--compact .way p { margin: 0; padding: 0 16px 16px 56px; font-size: 15px; line-height: 1.5; }
.ask--compact .ask__note { margin-top: 16px; font-size: 14px; }
@media (max-width: 960px) {
  .ask--compact .ask__copy, .ask--compact .ask__demo { grid-column: 1 / -1; }
  .ask--compact .ask__ways { margin-top: 20px; }
}
.mac--ask::after { content: ""; position: absolute; left: 12%; top: 22%; width: 46%; height: 52%; border-radius: 10px;
  background: #1a1e27; border: 1px solid rgba(255, 255, 255, .05); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.mac--ask .mac__wing { transition: width .9s cubic-bezier(.22, 1, .36, 1); }
.mac__dim { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 2; pointer-events: none;
  transition: opacity 3.2s cubic-bezier(.45, 0, .55, 1); }
.mac--ask.is-dim .mac__dim { opacity: .42; }
.icard { position: absolute; top: 0; left: 50%; z-index: 4; width: 21%; transform: translateX(-50%); background: #000;
  border-radius: 0 0 16px 16px; overflow: hidden; color: var(--bone); font-size: clamp(10px, 1.05vw, 13px);
  transition: width .9s cubic-bezier(.22, 1, .36, 1), border-radius .9s; }
.mac--ask.is-heard .icard, .mac--ask.is-building .icard, .mac--ask.is-done .icard { width: 58%; }
.mac--ask.is-card .icard { width: 66%; border-radius: 0 0 22px 22px; }
.icard__line { position: relative; height: 3.4em; margin: 0; display: grid; place-items: center; text-align: center;
  padding: 0 1.2em; white-space: nowrap; }
.icard__line > span { grid-area: 1 / 1; opacity: 0; transition: opacity .6s; }
.mac--ask.is-heard .icard__say, .mac--ask.is-building .icard__build, .mac--ask.is-done .icard__done { opacity: 1; }
.mac--ask.is-card .icard__say, .mac--ask.is-card .icard__build { opacity: 0; }
.icard__line { transition: height .9s cubic-bezier(.22, 1, .36, 1); }
.mac--ask.is-card .icard__line { height: 1.4em; }
.icard__build { color: var(--muted); }
.icard__done::before { content: "✓ "; color: var(--cyan); }
.icard__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .9s cubic-bezier(.22, 1, .36, 1); }
.icard__in { min-height: 0; overflow: hidden; }
.mac--ask.is-card .icard__body { grid-template-rows: 1fr; }
.icard__body { padding: 0 1.4em; }
.icard__title { margin: 0; font-weight: 500; font-size: 1.15em; }
.icard__fields { margin: .7em 0 0; display: grid; gap: .45em; }
.icard__fields div { display: grid; grid-template-columns: 5.2em 1fr; gap: .8em; opacity: 0; transform: translateY(4px);
  transition: opacity .6s, transform .6s; }
.icard__fields dt { color: var(--muted); }
.icard__fields dd { margin: 0; }
.mac--ask.is-card .icard__fields div { opacity: 1; transform: none; }
.mac--ask.is-card .icard__fields div:nth-child(2) { transition-delay: .15s; }
.mac--ask.is-card .icard__fields div:nth-child(3) { transition-delay: .3s; }
.mac--ask.is-card .icard__fields div:nth-child(4) { transition-delay: .45s; }
.mac--ask.is-card .icard__fields div:nth-child(5) { transition-delay: .6s; }
.icard__buttons { display: flex; justify-content: flex-end; gap: .6em; margin: 1em 0 1.2em; }
.icard__buttons span { padding: .45em 1.3em; border-radius: 999px; background: #1d222b; }
.icard__yes { color: var(--night); background: var(--bone) !important; transition: box-shadow .5s, transform .3s; }
.mac--ask.is-yes .icard__yes { transform: scale(.94); box-shadow: 0 0 0 4px rgba(90, 235, 255, .35), 0 0 26px rgba(77, 158, 255, .6); }
.mac__tool { position: absolute; left: 0; right: 0; bottom: 6%; z-index: 4; margin: 0; text-align: center; font-size: clamp(12px, 1.3vw, 15px);
  color: var(--bone); opacity: 0; transform: translateY(6px); transition: opacity .8s, transform .8s; }
.mac__tool::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .6em;
  background: radial-gradient(circle at 35% 35%, var(--cyan), var(--blue) 55%, var(--violet)); box-shadow: 0 0 10px rgba(77, 158, 255, .8); }
.mac--ask.is-tool .mac__tool { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .ask__grid { grid-template-columns: 1fr; gap: 28px; }
  .ask__copy, .ask__demo { grid-column: 1 / -1; }
  .ask__ways { grid-template-columns: 1fr; margin-top: 36px; gap: 14px; }
  .mac--ask { aspect-ratio: 1 / 1; }
  .mac--ask.is-card .icard { width: 92%; }
  .mac--ask.is-heard .icard, .mac--ask.is-building .icard, .mac--ask.is-done .icard { width: 86%; }
  .icard { font-size: 10.5px; }
  .icard__fields div { grid-template-columns: 4.6em 1fr; }
}

/* The wheel is your side: «Iris» and the actions wear the orb's light in the sentence that is playing, and its words
   light as the take says them; Iris's side is written on the take's own desktop (site/captions/). */
.wheel .kw { transition: color .6s, filter .6s; }
.wheel li.is-active .kw { background: linear-gradient(100deg, #5AEBFF 0%, #4D9EFF 22%, #9E73FF 45%, #C9B8FF 52%, #4D9EFF 70%, #5AEBFF 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(90,235,255,.55)) drop-shadow(0 0 20px rgba(158,115,255,.4)); animation: kwflow 9s linear infinite; }
@keyframes kwflow { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }
.wheel li.is-active button.is-timed .sw { opacity: .32; transition: opacity .35s ease; }
.wheel li.is-active button.is-timed .sw.on { opacity: 1; }
.screen__caption.is-invideo .screen__iris { display: none; }

/* After the wheel, each section arrives once (site.js REVEAL): a piece waits hidden until it is in view, then plays
   its entrance after --d. `backwards` fill only: once arrived, hover and the demos' own transitions own the element
   again. Without the script, or with reduced motion, nothing is hidden. */
:root { --ease-liquid: cubic-bezier(.16, 1, .3, 1); }
.js-reveal [data-rv]:not([data-rv-in]) { opacity: 0; }
.js-reveal [data-rv][data-rv-in] { animation-duration: 1.1s; animation-timing-function: var(--ease-enter);
  animation-delay: var(--d, 0s); animation-fill-mode: backwards; }
.js-reveal [data-rv="fade"][data-rv-in] { animation-name: rv-fade; animation-duration: 1.2s; }
.js-reveal [data-rv="rise"][data-rv-in] { animation-name: rv-rise; }
/* The big objects (drawn Macs, cards, panels, the form) travel further and settle longer: they have weight. */
.js-reveal [data-rv="lift"][data-rv-in] { animation-name: rv-lift; animation-duration: 1.5s; animation-timing-function: var(--ease-liquid); }
@keyframes rv-fade { from { opacity: 0; } }
@keyframes rv-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes rv-lift { from { opacity: 0; transform: translateY(40px) scale(.985); } }
/* Titles: each word comes into focus as it rises, a line at a time (--wd from site.js). */
.js-reveal [data-rv="words"][data-rv-in] { animation: none; }
.js-reveal [data-rv="words"] .w { display: inline-block; }
.js-reveal [data-rv="words"][data-rv-in] .w { animation: rv-word 1.3s var(--ease-liquid) calc(var(--d, 0s) + var(--wd, 0s)) backwards; }
@keyframes rv-word { from { opacity: 0; transform: translateY(.38em); filter: blur(8px); } }
/* The closing line arrives slower and from deeper, the page's last word. */
.js-reveal .finale__l1[data-rv-in] .w { animation-name: rv-word-deep; animation-duration: 1.9s; }
@keyframes rv-word-deep { from { opacity: 0; transform: translateY(.3em) scale(.98); filter: blur(14px); } }
.js-reveal .finale__l2 { filter: blur(4px);
  transition: color 1.2s var(--ease-enter), opacity 1.4s var(--ease-enter), transform 1.4s var(--ease-enter), filter 1.4s var(--ease-enter); }
.js-reveal .finale.is-two .finale__l2 { filter: none; }
/* Where your words go: each column's light comes on a moment after its words start to rise. */
.js-reveal .col[data-rv-in] .col__dot { animation: rv-ignite 1.6s var(--ease-liquid) calc(var(--d, 0s) + .15s) backwards; }
@keyframes rv-ignite { from { opacity: 0; transform: scale(.3); } }
/* Depth while scrolling: the drawn Macs drift a little slower than the page.
   `translate`/`scale` (not `transform`), so they add to the entrance and the hover instead of replacing them. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
    .hf__demo, .ask__demo { animation: rv-drift linear both; animation-timeline: view(); }
  }
}
@keyframes rv-drift { from { translate: 0 44px; } to { translate: 0 -44px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js-enter [data-enter] { opacity: 1; transform: none; }
  .finale__l2, .finale__body, .finale__cta { opacity: 1 !important; transform: none !important; }
  .wheel li.is-active .kw { animation: none; }
  .orbs__invite span, .orbs__invite.is-on span { animation: none !important; transition: opacity .8s ease !important;
    transform: translate(var(--ix), var(--iy)) !important; filter: none !important; }
  .orbs__invite, .orbs__invite.is-on { filter: none !important; transition: none !important; }
}

/* The orb section. The canvas is the stage's own "screen": the app's orb engine draws on it, transparent on the page's
   night, its edges the walls the drop meets. The copy sits above it; the drop is caught through it (orb.js). */
.orbs { padding-top: clamp(48px, 8vh, 96px); }
.orbs__stage { position: relative; min-height: clamp(620px, 96vh, 940px); display: flex; flex-direction: column;
  justify-content: space-between; padding: clamp(24px, 6vh, 64px) 0 clamp(24px, 5vh, 48px); overflow: hidden; }
.orbs__screen { position: absolute; inset: 0; z-index: 0; }
.orbs__still { position: absolute; left: 70%; top: 50%; width: min(420px, 40%); transform: translate(-50%, -50%); }
/* The drop's invitation to play (orb.js places it beside the drop): it surfaces out of a blur, rising a few px, lit
   with the wheel's iridescent gradient, and sinks back the same way. Never a pop. */
/* The blur and the glow sit on the line's box, not on the gradient text itself: a filter on text clipped to its gradient
   showed the whole blurred gradient box for a moment as it surfaced in Safari, like a sticker. */
.orbs__invite { position: absolute; left: 0; top: 0; z-index: 2; margin: 0; pointer-events: none; will-change: transform;
  --ix: 0%; --iy: -50%;
  filter: blur(8px) drop-shadow(0 0 8px rgba(90, 235, 255, 0)) drop-shadow(0 0 20px rgba(158, 115, 255, 0));
  transition: filter 1.1s var(--ease-enter); }
.orbs__invite.is-on { filter: blur(0) drop-shadow(0 0 8px rgba(90, 235, 255, .45)) drop-shadow(0 0 20px rgba(158, 115, 255, .3)); }
.orbs__invite span { display: block; white-space: nowrap; font-size: clamp(17px, 1.5vw, 21px); font-weight: 500;
  letter-spacing: .01em; line-height: 1.3; padding: 2px 0;
  background: linear-gradient(100deg, #5AEBFF 0%, #4D9EFF 22%, #9E73FF 45%, #C9B8FF 52%, #4D9EFF 70%, #5AEBFF 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: kwflow 9s linear infinite; opacity: 0; transform: translate(var(--ix), calc(var(--iy) + 8px));
  transition: opacity 1s var(--ease-enter), transform 1.2s var(--ease-enter); }
.orbs__invite.is-on span { opacity: 1; transform: translate(var(--ix), var(--iy)); }
/* The page's one drop (orb.js): under the page's content, so text always reads over it (opaque panels hide it), never
   taking the pointer; orb.js grabs it where nothing of the page's own is under the pointer. */
.orb-layer { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none;
  display: block; }
/* Docked in a demo Mac's or the stage's box while the drop plays there (orb.js sets its place and size): it scrolls with
   the page instead of being moved to the frame by script. Over the demo Mac; in the stage over its screen, under the copy. */
.orb-dock { position: relative; }
.orbs__stage.orb-dock { position: relative; }
.orb-layer.is-docked { position: absolute; z-index: 0; }
.screen.orb-dock > .orb-layer.is-docked { z-index: 2; }
/* «iris» inside the resting drop (orb.js places it each frame): over the canvas, under the page's content. */
.orb-word { position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0; transform-origin: 50% 50%;
  will-change: transform, opacity, filter; }
.orb-word img { display: block; width: 100%; height: 100%; }
.no-webgl .orb-word { display: none; }
/* Each section is over the drop's canvas on its own (not the whole of main as one layer), so one section can sit under
   it: «What Iris is», whose cards go under the drop's liquid. */
main > section, .foot { position: relative; z-index: 1; }
.orb-can-grab, .orb-can-grab * { cursor: grab; }
.orb-grabbing, .orb-grabbing * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.orbs__copy, .orbs__looks { position: relative; z-index: 1; }
.orbs__copy .lede { max-width: 30em; }
.orbs__label { margin: 0 0 14px; letter-spacing: .02em; }
.skins { display: flex; flex-wrap: wrap; gap: 8px; }
.skin { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(11, 14, 19, .55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--muted); font-size: 15px;
  transition: transform .16s ease-out, border-color .3s ease, color .3s ease, background-color .3s ease; }
.skin img { width: 36px; height: 36px; border-radius: 50%; transition: transform .5s var(--ease-enter); }
.skin:active { transform: scale(.97); }
.skin:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .skin:hover { color: var(--bone); border-color: var(--line-strong); }
  .skin:hover img { transform: scale(1.08); }
}
.skin.is-on { color: var(--bone); border-color: rgba(158, 115, 255, .45); background: rgba(22, 27, 34, .7);
  box-shadow: 0 0 0 1px rgba(90, 235, 255, .08), 0 0 28px rgba(77, 158, 255, .16); }

/* Presence: four steps, the light growing from left to right like the setting itself. */
.ladder { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px; position: relative; }
.ladder::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 1px;
  background: linear-gradient(90deg, var(--line) 0%, rgba(77, 158, 255, .45) 55%, rgba(158, 115, 255, .7) 100%); }
.ladder li { position: relative; padding-top: 32px; }
.ladder .h3 { margin: 0 0 6px; }
.ladder p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 16em; }
.ladder__dot { position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--night); border: 1px solid var(--line-strong); }
.ladder li:nth-child(2) .ladder__dot { border-color: rgba(90, 235, 255, .5); box-shadow: 0 0 10px rgba(90, 235, 255, .25); }
.ladder li:nth-child(3) .ladder__dot { border-color: rgba(77, 158, 255, .7); box-shadow: 0 0 14px rgba(77, 158, 255, .4); }
.ladder li:nth-child(4) .ladder__dot { border: 0; background: radial-gradient(circle at 35% 35%, #C9B8FF, #9E73FF 60%, #4D9EFF);
  box-shadow: 0 0 18px rgba(158, 115, 255, .6); }
.js-enter .ladder li { opacity: 0; transform: translateY(10px);
  transition: opacity .7s var(--ease-enter) calc(var(--i) * 110ms), transform .7s var(--ease-enter) calc(var(--i) * 110ms); }
.js-enter .ladder.is-in li { opacity: 1; transform: none; }
.orbs__touch { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; max-width: 36em; margin: 0 0 10px; color: var(--bone); }
@media (max-width: 760px) {
  .orbs__stage { min-height: 0; }
  .orbs__screen { position: relative; inset: auto; order: 1; height: min(460px, 110vw); margin: 8px 0; }
  .orbs__still { left: 50%; width: 70%; }
  .orbs__copy { order: 0; }
  .orbs__looks { order: 2; }
  .ladder { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .ladder::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js-enter .ladder li { opacity: 1; transform: none; }
}

/* A title's key words wear the orb's light, as the wheel's actions do: one idea per title, never more. Split titles
   carry the gradient on each word (a word's own entrance animation would otherwise lose the clipped text). */
.hl, .hl .w { background: linear-gradient(100deg, #5AEBFF 0%, #4D9EFF 22%, #9E73FF 45%, #C9B8FF 52%, #4D9EFF 70%, #5AEBFF 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: kwflow 14s linear infinite; }
.hl { filter: drop-shadow(0 0 14px rgba(90, 235, 255, .22)) drop-shadow(0 0 34px rgba(158, 115, 255, .18)); }
.hl .w { animation: none; }
.js-reveal [data-rv="words"][data-rv-in] .hl .w {
  animation: rv-word 1.3s var(--ease-liquid) calc(var(--d, 0s) + var(--wd, 0s)) backwards, kwflow 14s linear infinite; }
@media (prefers-reduced-motion: reduce) { .hl, .hl .w { animation: none; } }

/* The buttons wear Iris's border light: a thin ring of the film colours flowing slowly round the pill (one turn in
   9 s, like the app's light round the screen: low frequency, no sparkle). The ring is the border box of the button's
   own background, so the bone fill stays clean; the bloom is two soft shadows in the ring's colours. */
@property --ring { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.btn { border: 1.5px solid transparent;
  background: linear-gradient(var(--bone), var(--bone)) padding-box,
    conic-gradient(from var(--ring), #5AEBFF, #4D9EFF 22%, #9E73FF 45%, #F280D9 55%, #9E73FF 65%, #4D9EFF 80%, #5AEBFF) border-box;
  box-shadow: -8px 0 22px -10px rgba(90, 235, 255, .55), 8px 0 22px -10px rgba(158, 115, 255, .55);
  animation: ring 9s linear infinite; }
.btn:hover { background: linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--ring), #5AEBFF, #4D9EFF 22%, #9E73FF 45%, #F280D9 55%, #9E73FF 65%, #4D9EFF 80%, #5AEBFF) border-box;
  box-shadow: -10px 4px 34px -10px rgba(90, 235, 255, .7), 10px 4px 34px -10px rgba(158, 115, 255, .7); }
@keyframes ring { to { --ring: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn { animation: none; } }
/* Quiet button: a second action beside a lit one (the release notice under «Download the beta»), so only one button glows. */
.btn--quiet, .btn--quiet:hover { background: transparent; color: var(--bone); border-color: var(--line-strong);
  box-shadow: none; animation: none; }
.btn--quiet:hover { border-color: var(--bone); }

/* Scrolling: the endless decorations hold still (site.js), so their per-frame repaints leave the frames to the scroll
   and the drop's canvas. They go on from where they stopped. */
.is-scrolling .btn, .is-scrolling .plan__dot, .is-scrolling .plan--claude::before, .is-scrolling .plan--claude::after,
.is-scrolling .wheel li.is-active .kw, .is-scrolling .flow__run, .is-scrolling .flow__pool i,
.is-scrolling .flow__keep li::before { animation-play-state: paused; }
/* On a phone the plan's blurred glow stays still: a 60 px blur of a turning gradient is redrawn every frame, and under
   that blur the turn barely shows. */
@media (max-width: 760px) { .plan--claude::after { animation: none; } }

/* What Iris is, «The spectrum». The question set large, then the nine things Iris does as large cards, each in one
   of the nine colours of its light (cyan to blue to violet to pink). On its own (no JS, reduced motion): the question,
   the cards as a grid, the answer. With motion (js-kit): a pinned frame; the nine are written under the question in
   their colours, and the cards travel sideways into the drop as the page scrolls (site.js sets their transforms). */
.kit { padding: clamp(80px, 12vh, 140px) 0; display: flex; flex-direction: column; }
.kit__copy { display: contents; }
.kit__under { order: 1; }
.kit__end { order: 2; }
/* The head is set as every section's is, from the left (only the hero and the close are centred: two centred titles one
   under the other read as a repeat). With motion the nine names sit beside the question on a wide screen. */
.kit__head { text-align: left; }
.kit__q { margin: 0; font-size: clamp(38px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -.035em; font-weight: 300; }
.kit__intro { margin: 14px 0 0; max-width: 24em; }
.kit__index, .kit__drop { display: none; }
.kit__track { margin-top: 44px; }
.kit__cards { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter));
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { --h: #5AEBFF; --h2: #54C8FF; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start;
  min-height: 220px; padding: 24px; border-radius: 24px;
  background: linear-gradient(180deg, #121720, #0a0d12);
  background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--h2) 13%, transparent), transparent 70%),
    linear-gradient(180deg, #121720, #0a0d12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
/* The rim: a hairline, the card's colour only where the light comes from (top left) and leaves (bottom right). */
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(232, 238, 242, .3), rgba(232, 238, 242, .1) 30%, rgba(232, 238, 242, .05));
  background: linear-gradient(160deg, color-mix(in srgb, var(--h) 70%, transparent), rgba(232, 238, 242, .14) 26%, rgba(232, 238, 242, .05) 62%,
    color-mix(in srgb, var(--h2) 42%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card:nth-child(2) { --h: #54C8FF; --h2: #4D9EFF; }
.card:nth-child(3) { --h: #4D9EFF; --h2: #6C8CFF; }
.card:nth-child(4) { --h: #6C8CFF; --h2: #8A7DFF; }
.card:nth-child(5) { --h: #8A7DFF; --h2: #9E73FF; }
.card:nth-child(6) { --h: #9E73FF; --h2: #BE78F2; }
.card:nth-child(7) { --h: #BE78F2; --h2: #DC7CE6; }
.card:nth-child(8) { --h: #DC7CE6; --h2: #F280D9; }
.card:nth-child(9) { --h: #F280D9; --h2: #9E73FF; }
/* Each card's scene: what the card names, drawn small in hairlines and the card's colour. Its pieces are sized in em
   and the scene's font size follows the room it has (container units), so one drawing fits every card size. As drawn
   here it is the finished picture (what a still page shows); on the card in the middle (.is-live, site.js) it plays:
   built up in about two seconds, held, let go, and again. Only transforms and opacity move. */
.card__scene { flex: none; height: 130px; align-self: stretch; container-type: size; display: flex; align-items: center; }
.vg { --ln: rgba(232, 238, 242, .16); --fill: rgba(232, 238, 242, .06); --ink: rgba(232, 238, 242, .24); position: relative; flex: none;
  width: 26em; height: 14em; font-size: 9px; font-size: min(10px, 100cqh / 14, 100cqw / 26); }
.vg i, .vg b, .vg u { position: absolute; display: block; box-sizing: border-box; font-style: normal; font-weight: 400; text-decoration: none; }
.vg i::before, .vg i::after, .vg b::before, .vg b::after { content: ""; position: absolute; box-sizing: border-box; }
/* Voice: the notch at the top of the screen wakes and listens, then the answer comes. */
.vg--voice::before { content: ""; position: absolute; left: 0; top: 0; width: 26em; height: 1px; background: var(--ln); }
.vg-notch { left: 7em; top: 0; width: 12em; height: 3.4em; border-radius: 0 0 1.3em 1.3em; background: #000; border: 1px solid var(--ln); border-top: 0;
  box-shadow: 0 .6em 2.2em -.8em var(--h); transform-origin: 50% 0; }
.vg-notch b { top: .7em; width: .5em; height: 2em; border-radius: .25em; background: var(--h); }
.vg-notch b:nth-child(1) { left: 3.55em; transform: scaleY(.45); }
.vg-notch b:nth-child(2) { left: 4.65em; transform: scaleY(.8); }
.vg-notch b:nth-child(3) { left: 5.75em; }
.vg-notch b:nth-child(4) { left: 6.85em; transform: scaleY(.65); }
.vg-notch b:nth-child(5) { left: 7.95em; transform: scaleY(.4); }
.vg-say { left: 4em; top: 6.4em; width: 18em; height: 1em; border-radius: .5em; background: var(--ink); }
.vg-say + .vg-say { left: 6.5em; top: 8.7em; width: 13em; background: rgba(232, 238, 242, .14); }
/* Works for you: tasks ticked off one after the other. */
.vg-row { left: 0; top: .4em; width: 22em; height: 3.7em; border-radius: 1.1em; border: 1px solid var(--ln); background: var(--fill); }
.vg-row:nth-child(2) { top: 5em; }
.vg-row:nth-child(3) { top: 9.6em; }
.vg-row::before { left: .7em; top: .65em; width: 2.3em; height: 2.3em; border-radius: .65em; background: color-mix(in srgb, var(--h) 50%, transparent); }
.vg-row::after { left: 3.9em; top: 1.3em; width: 10em; height: 1em; border-radius: .5em; background: var(--ink); }
.vg-row:nth-child(2)::after { width: 7.4em; }
.vg-row:nth-child(3)::after { width: 9em; }
.vg-row b { right: .85em; top: .8em; width: 2em; height: 2em; border-radius: 50%; background: var(--h); }
.vg-row b::after { left: .52em; top: .58em; width: .95em; height: .52em; border-left: .2em solid #07090C; border-bottom: .2em solid #07090C; transform: rotate(-45deg); }
/* Dictation: the key held, the words arriving in the field. */
.vg-key { left: 0; top: 2.9em; width: 2.75em; height: 2.75em; font-size: 1.6em; line-height: 2.7em; text-align: center; border-radius: .7em;
  border: 1px solid var(--ln); background: var(--fill); color: rgba(232, 238, 242, .82); }
.vg-field { left: 5.6em; top: 2.4em; width: 20em; height: 8.8em; border-radius: 1.4em; border: 1px solid var(--ln); background: var(--fill);
  display: flex !important; flex-wrap: wrap; align-content: center; gap: 1.1em .8em; padding: 0 1.4em; }
.vg-field b { position: static; height: 1em; border-radius: .5em; background: var(--ink); }
.vg-field b:nth-child(1) { width: 4.4em; }
.vg-field b:nth-child(2) { width: 3em; }
.vg-field b:nth-child(3) { width: 5.6em; }
.vg-field b:nth-child(4) { width: 2.6em; }
.vg-field b:nth-child(5) { width: 5.2em; }
.vg-field b:nth-child(6) { width: 3.6em; background: var(--h); }
/* By voice: a menu opened and an item chosen without a hand. */
.vg-menubar { left: 0; top: .4em; width: 26em; height: 2.6em; border-radius: .9em; border: 1px solid var(--ln); background: var(--fill); }
.vg-menubar b { top: .75em; height: 1em; border-radius: .5em; background: var(--ink); left: 1.2em; width: 3.2em; }
.vg-menubar b:nth-child(2) { left: 5.6em; width: 4em; background: var(--h); }
.vg-menubar b:nth-child(3) { left: 10.8em; width: 3em; }
.vg-menu { left: 4.6em; top: 3.7em; width: 13em; height: 9.6em; border-radius: 1.1em; border: 1px solid var(--ln); background: var(--fill); }
.vg-menu b { left: .6em; top: .7em; width: 11.7em; height: 2.5em; border-radius: .7em; background: color-mix(in srgb, var(--h) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--h) 60%, transparent); transform: translateY(2.8em); }
.vg-menu u { left: 1.5em; top: 1.45em; width: 7em; height: 1em; border-radius: .5em; background: rgba(232, 238, 242, .3); }
.vg-menu u:nth-of-type(2) { top: 4.25em; width: 9em; }
.vg-menu u:nth-of-type(3) { top: 7.05em; width: 5.5em; }
/* The pocket: the drop, and under it the shelf with what you keep there. */
.vg-drop { left: 11.1em; top: 0; width: 3.8em; height: 3.8em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .2), #0b0f18 62%);
  box-shadow: inset 0 0 0 .17em var(--h), 0 0 1.6em -.2em var(--h); }
.vg-tray { left: 2em; top: 5.2em; width: 22em; height: 8.2em; border-radius: 1.5em; border: 1px solid var(--ln); background: var(--fill); transform-origin: 50% 0; }
.vg-tray b { top: 2em; left: 1.4em; width: 4em; height: 4em; border-radius: 1.1em; background: color-mix(in srgb, var(--h) 42%, transparent); }
.vg-tray b:nth-child(2) { left: 6.5em; background: rgba(232, 238, 242, .16); }
.vg-tray b:nth-child(3) { left: 11.6em; background: color-mix(in srgb, var(--h2) 30%, transparent); }
.vg-tray b:nth-child(4) { left: 16.7em; background: rgba(232, 238, 242, .1); }
/* The clipboard: the last copies, the newest on top. */
.vg-clips { left: 0; top: .4em; width: 20em; height: 13em; border-radius: 1.4em; border: 1px solid var(--ln); background: var(--fill); overflow: hidden; }
.vg-clips b { left: .8em; top: .8em; width: 18.3em; height: 2.7em; border-radius: .8em; }
.vg-clips b::after { left: 1em; top: .85em; width: 7.5em; height: 1em; border-radius: .5em; background: var(--ink); }
.vg-clips b:nth-child(1) { background: color-mix(in srgb, var(--h) 22%, transparent); border: 1px solid color-mix(in srgb, var(--h) 55%, transparent); }
.vg-clips b:nth-child(1)::after { width: 11em; background: rgba(232, 238, 242, .6); }
.vg-clips b:nth-child(2) { top: 3.8em; }
.vg-clips b:nth-child(3) { top: 6.8em; }
.vg-clips b:nth-child(3)::after { width: 13em; }
.vg-clips b:nth-child(4) { top: 9.8em; }
.vg-clips b:nth-child(4)::after { width: 9em; }
/* The guide: a frame lands on the button to press. */
.vg-win { left: 0; top: .2em; width: 24em; height: 13.4em; border-radius: 1.4em; border: 1px solid var(--ln); background: var(--fill); }
.vg-win::before { left: 1.1em; top: 1.1em; width: .7em; height: .7em; border-radius: 50%; background: var(--ink);
  box-shadow: 1.1em 0 0 var(--ink), 2.2em 0 0 var(--ink); }
.vg-win::after { left: 1.4em; top: 3.8em; width: 14em; height: 1em; border-radius: .5em; background: rgba(232, 238, 242, .14);
  box-shadow: 0 2.2em 0 rgba(232, 238, 242, .1); }
.vg-win b { top: 9.2em; left: 1.4em; width: 6em; height: 2.8em; border-radius: .9em; border: 1px solid var(--ln); }
.vg-win b:nth-child(2) { left: 8.4em; }
.vg-win b:nth-child(3) { left: 15.4em; background: color-mix(in srgb, var(--h) 30%, transparent); }
.vg-frame { left: 14.7em; top: 8.7em; width: 7.4em; height: 4.2em; border-radius: 1.3em; border: .18em solid var(--h); box-shadow: 0 0 1.4em -.2em var(--h); }
/* Routines: one step after the other by themselves, then the word that it is done. */
.vg-chain { left: 0; top: 6.4em; width: 26em; height: 4em; }
.vg-chain::before, .vg-chain::after { left: 4em; top: 2em; width: 4.5em; height: 1px; background: var(--ln); }
.vg-chain::after { left: 12.5em; }
.vg-chain b { left: 0; top: 0; width: 4em; height: 4em; border-radius: 1.1em; border: 1px solid var(--ln); background: var(--fill); }
.vg-chain b:nth-child(2) { left: 8.5em; }
.vg-chain b:nth-child(3) { left: 17em; }
.vg-chain b::after { inset: -1px; border-radius: inherit; background: color-mix(in srgb, var(--h) 40%, transparent); border: 1px solid color-mix(in srgb, var(--h) 70%, transparent); }
.vg-chain u { left: 0; top: 1.6em; width: .8em; height: .8em; border-radius: 50%; background: var(--h); box-shadow: 0 0 1em var(--h); opacity: 0; }
.vg-note { left: 14em; top: .2em; width: 12em; height: 3.6em; border-radius: 1.1em; border: 1px solid var(--ln); background: var(--fill); }
.vg-note::before { left: 1em; top: 1.15em; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--h); }
.vg-note::after { left: 3em; top: 1.25em; width: 6.5em; height: 1em; border-radius: .5em; background: var(--ink); }
/* Instant commands: the volume set, a switch flipped. */
.vg-slider { left: 0; top: 2.6em; width: 22em; height: 1.2em; border-radius: .6em; background: rgba(232, 238, 242, .12); overflow: hidden; }
.vg-slider b { inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--h), var(--h2)); transform-origin: 0 50%; transform: scaleX(.34); }
.vg-toggle { left: 0; top: 7em; width: 6em; height: 3.4em; border-radius: 1.7em; border: 1px solid var(--ln); background: var(--fill); }
.vg-toggle::before { inset: -1px; border-radius: inherit; background: color-mix(in srgb, var(--h) 55%, transparent); }
.vg-toggle b { left: .42em; top: .42em; width: 2.4em; height: 2.4em; border-radius: 50%; background: rgba(244, 248, 251, .9); transform: translateX(2.6em); }
.vg-toggle + .vg-toggle { left: 8em; }
.vg-toggle + .vg-toggle::before { opacity: 0; }
.vg-toggle + .vg-toggle b { transform: none; background: rgba(232, 238, 242, .45); }

/* Playing, on the card in the middle. One length for every piece (5 s), so a scene keeps its order loop after loop;
   a piece that comes later has a delay and is held hidden until then (fill backwards). */
@keyframes vg-pop { 0% { opacity: 0; transform: translateY(.7em) scale(.96); } 10%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes vg-zoom { 0% { opacity: 0; transform: scale(.3); } 8%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes vg-show { 0% { opacity: 0; } 8%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes vg-notch { 0% { transform: scaleX(.5); } 10%, 86% { transform: none; } 100% { transform: scaleX(.5); } }
@keyframes vg-bar { from { transform: scaleY(.22); } to { transform: scaleY(1); } }
@keyframes vg-key { 0%, 6% { transform: none; } 11%, 60% { transform: scale(.9); } 66%, 100% { transform: none; } }
@keyframes vg-pick { 0%, 8% { transform: translateY(0); } 20%, 30% { transform: translateY(2.8em); } 42%, 50% { transform: translateY(5.6em); }
  55% { transform: translateY(5.6em) scale(.95); } 60%, 86% { transform: translateY(5.6em); } 100% { transform: translateY(0); } }
@keyframes vg-tray { 0% { opacity: 0; transform: translateY(-2.6em) scale(.5); } 14%, 84% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-2.6em) scale(.5); } }
@keyframes vg-pulse { 0%, 100% { transform: none; } 6% { transform: scale(1.14); } 14% { transform: none; } }
@keyframes vg-shift { 0%, 12% { transform: translateY(-3em); } 26%, 100% { transform: none; } }
@keyframes vg-clip { 0%, 12% { opacity: 0; transform: translateY(-3em); } 26%, 100% { opacity: 1; transform: none; } }
@keyframes vg-frame { 0% { opacity: 0; transform: scale(2.4); } 16% { opacity: 1; transform: none; } 28% { transform: scale(1.1); } 40% { transform: none; }
  52% { transform: scale(1.1); } 64%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes vg-run { 0% { opacity: 0; transform: translateX(1.6em); } 6% { opacity: 1; } 48% { opacity: 1; transform: translateX(18.6em); } 54%, 100% { opacity: 0; transform: translateX(18.6em); } }
@keyframes vg-fill { 0%, 8% { transform: scaleX(.8); } 26%, 88% { transform: scaleX(.34); } 100% { transform: scaleX(.8); } }
@keyframes vg-knob { 0%, 36% { transform: none; } 48%, 88% { transform: translateX(2.6em); } 100% { transform: none; } }
@keyframes vg-tint { 0%, 36% { opacity: 0; } 48%, 88% { opacity: 1; } 100% { opacity: 0; } }
.card.is-live .vg i, .card.is-live .vg b, .card.is-live .vg u, .card.is-live .vg ::before, .card.is-live .vg ::after {
  animation-duration: 5s; animation-timing-function: var(--ease-enter); animation-iteration-count: infinite; animation-fill-mode: backwards; }
.card.is-live .vg-notch { animation-name: vg-notch; }
.card.is-live .vg-notch b { animation: vg-bar .62s ease-in-out infinite alternate; }
.card.is-live .vg-notch b:nth-child(2) { animation-delay: -.2s; }
.card.is-live .vg-notch b:nth-child(3) { animation-delay: -.45s; }
.card.is-live .vg-notch b:nth-child(4) { animation-delay: -.1s; }
.card.is-live .vg-notch b:nth-child(5) { animation-delay: -.35s; }
.card.is-live .vg-say { animation-name: vg-pop; animation-delay: 1.1s; }
.card.is-live .vg-say + .vg-say { animation-delay: 1.4s; }
.card.is-live .vg-row { animation-name: vg-pop; animation-delay: .1s; }
.card.is-live .vg-row:nth-child(2) { animation-delay: .45s; }
.card.is-live .vg-row:nth-child(3) { animation-delay: .8s; }
.card.is-live .vg-row b { animation-name: vg-zoom; animation-delay: .8s; }
.card.is-live .vg-row:nth-child(2) b { animation-delay: 1.3s; }
.card.is-live .vg-row:nth-child(3) b { animation-delay: 1.8s; }
.card.is-live .vg-key { animation-name: vg-key; }
.card.is-live .vg-field b { animation-name: vg-pop; animation-delay: .6s; }
.card.is-live .vg-field b:nth-child(2) { animation-delay: .85s; }
.card.is-live .vg-field b:nth-child(3) { animation-delay: 1.1s; }
.card.is-live .vg-field b:nth-child(4) { animation-delay: 1.35s; }
.card.is-live .vg-field b:nth-child(5) { animation-delay: 1.6s; }
.card.is-live .vg-field b:nth-child(6) { animation-delay: 1.85s; }
.card.is-live .vg-menu b { animation-name: vg-pick; }
.card.is-live .vg-drop { animation-name: vg-pulse; }
.card.is-live .vg-tray { animation-name: vg-tray; }
.card.is-live .vg-tray b { animation-name: vg-zoom; animation-delay: .7s; }
.card.is-live .vg-tray b:nth-child(2) { animation-delay: .85s; }
.card.is-live .vg-tray b:nth-child(3) { animation-delay: 1s; }
.card.is-live .vg-tray b:nth-child(4) { animation-delay: 1.15s; }
.card.is-live .vg-clips { animation-name: vg-show; }
.card.is-live .vg-clips b { animation-name: vg-shift; }
.card.is-live .vg-clips b:nth-child(1) { animation-name: vg-clip; }
.card.is-live .vg-frame { animation-name: vg-frame; }
.card.is-live .vg-chain u { animation-name: vg-run; }
.card.is-live .vg-chain b::after { animation-name: vg-show; animation-delay: .1s; }
.card.is-live .vg-chain b:nth-child(2)::after { animation-delay: 1s; }
.card.is-live .vg-chain b:nth-child(3)::after { animation-delay: 1.9s; }
.card.is-live .vg-note { animation-name: vg-pop; animation-delay: 2.5s; }
.card.is-live .vg-slider b { animation-name: vg-fill; }
.card.is-live .vg-toggle:nth-child(2) b { animation-name: vg-knob; }
.card.is-live .vg-toggle:nth-child(2)::before { animation-name: vg-tint; }
.card__name { padding-top: 12px; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.15; letter-spacing: -.02em;
  font-weight: 400; color: #F4F8FB; text-wrap: balance; }
.card__line { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: #98A5B2; }
/* «Without Claude Code»: a mint point and the words over the name, no box. */
.card__tag { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .01em;
  color: var(--mint); }
.card__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.card__tag + .card__name { padding-top: 5px; }
.kit__end { text-align: center; margin-top: 56px; padding: 0 var(--gutter); }
.kit__title { margin: 0; font-size: clamp(34px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -.035em; font-weight: 300; }
.kit__after { margin: 14px auto 0; color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); }
@media (max-width: 899px) {
  .kit__cards { grid-template-columns: 1fr; max-width: 520px; }
  .card { min-height: 0; }
}

/* With motion. Two layers pinned together for the length of the section: the copy over the drop's canvas, as every
   section is, and under the canvas the cards, so a card that reaches the drop goes under its liquid. The section itself
   is no layer (z-index auto), so each of the two finds its own place round the canvas. About 40% of a screen of scroll
   per card, then the answer holds. */
.js-kit .kit { display: block; height: 100svh; padding: 0; z-index: auto; }
.js-kit .kit__copy { display: block; position: sticky; top: 0; height: 100svh; z-index: 1; padding-top: 84px; pointer-events: none; }
.js-kit .kit__under { position: sticky; top: 0; height: 100svh; margin-top: -100svh; z-index: -1; overflow: hidden; }
/* The nine, written out: readable at once and quiet. Only the one whose card is in the middle is lit, in its colour;
   when the next lights up it goes out, a little dimmer than those still to come. At the end none is lit: the answer
   speaks alone (the owner found nine colours at once too much). */
.js-kit .kit__index { display: block; margin: 14px 0 0; max-width: 34em; font-size: clamp(15px, 1.45vw, 20px);
  line-height: 1.6; letter-spacing: -.005em; }
@media (min-width: 900px) {
  .js-kit .kit__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); align-items: end; }
  .js-kit .kit__q, .js-kit .kit__intro { grid-column: 1; }
  .js-kit .kit__index { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 4px; }
}
.kit__index span { --h: #5AEBFF; white-space: nowrap; color: rgba(232, 238, 242, .5);
  transition: color .7s var(--ease-enter), text-shadow .7s var(--ease-enter); }
.kit__index span:nth-child(2) { --h: #54C8FF; }
.kit__index span:nth-child(3) { --h: #4D9EFF; }
.kit__index span:nth-child(4) { --h: #6C8CFF; }
.kit__index span:nth-child(5) { --h: #8A7DFF; }
.kit__index span:nth-child(6) { --h: #9E73FF; }
.kit__index span:nth-child(7) { --h: #BE78F2; }
.kit__index span:nth-child(8) { --h: #DC7CE6; }
.kit__index span:nth-child(9) { --h: #F280D9; }
.kit__index span.is-done { color: rgba(232, 238, 242, .34); }
.kit__index span.is-now { color: var(--h); text-shadow: 0 0 20px color-mix(in srgb, var(--h) 55%, transparent); }
/* The track starts under the copy (site.js measures the copy and sets --kit-top). */
.js-kit .kit__track { position: absolute; left: 0; right: 0; top: var(--kit-top, 380px); bottom: clamp(18px, 4vh, 40px); margin: 0;
  --cw: clamp(270px, 22vw, 320px); }
/* The row's own sideways scroller, over the cards (site.js reads its place): invisible cells, one a card and the last
   the answer, each a stop a swipe cannot pass. Vertical scrolling goes on to the page. */
.kit__swipe, .kit__nav { display: none; }
.js-kit .kit__swipe { display: flex; position: absolute; left: 0; right: 0; top: var(--kit-top, 380px); bottom: 0; overflow-x: auto;
  overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; pointer-events: auto; }
.js-kit .kit__swipe::-webkit-scrollbar { display: none; }
/* A cell is a card's step in the row (site.js sets --cell), so the hand and the cards move together; the last
   spacer lets the last cell reach the start. */
.js-kit .kit__swipe i { flex: 0 0 var(--cell, 340px); scroll-snap-align: start; scroll-snap-stop: always; }
.js-kit .kit__swipe b { flex: 0 0 calc(100% - var(--cell, 340px)); }
/* Arrows, for a mouse without a sideways scroll (hidden on touch screens, where the row is swiped). */
/* One each side of the row, level with the cards' middle. */
.js-kit .kit__nav { display: block; position: absolute; left: 0; right: 0; top: var(--row-mid, 60%); height: 0; pointer-events: none; }
.js-kit .kit__arrow { position: absolute; top: -22px; pointer-events: auto; isolation: isolate; }
/* A soft dark halo behind each arrow, so it stands clear of a card passing under it. */
.js-kit .kit__arrow::before { content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7, 9, 12, .9), rgba(7, 9, 12, .6) 55%, rgba(7, 9, 12, 0)); }
.js-kit .kit__arrow--prev { left: max(12px, calc(50% - 680px)); }
.js-kit .kit__arrow--next { right: max(12px, calc(50% - 680px)); }
.kit__arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #E8EEF2;
  background: rgba(232, 238, 242, .06); border: 1px solid rgba(232, 238, 242, .16);
  transition: background-color .25s var(--ease-enter), opacity .25s var(--ease-enter), border-color .25s var(--ease-enter); }
.kit__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kit__arrow:hover { background: rgba(232, 238, 242, .12); border-color: rgba(232, 238, 242, .3); }
.kit__arrow:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.kit__arrow:disabled { opacity: .3; cursor: default; }
@media (hover: none) { .js-kit .kit__nav { display: none; } }
/* The invitation to swipe (site.js): the first time the section is in sight the row breathes sideways and this line
   shows under it, its arrow moving, until the reader's first move. */
.kit__hint { display: none; }
.js-kit .kit__hint { display: flex; align-items: center; gap: 8px; position: absolute; left: 0; right: 0; justify-content: center;
  top: var(--row-under, 85%); margin: 0; font-size: 14px; letter-spacing: .01em; color: rgba(232, 238, 242, .62);
  opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease-enter), transform .6s var(--ease-enter); }
.js-kit .kit.is-hinting .kit__hint { opacity: 1; transform: none; }
.kit__hint svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.js-kit .kit.is-hinting .kit__hint svg { animation: kit-hint 1.6s var(--ease-enter) infinite; }
@keyframes kit-hint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.kit__hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .kit__hint-touch { display: none; } .kit__hint-mouse { display: inline; } }
/* A nudge with a spring in it: out, back past the start, a smaller one, settling (twice, the second softer). */
.js-kit .kit.is-hinting .kit__cards { animation: kit-breathe 2.6s linear .2s 1; }
@keyframes kit-breathe {
  0% { transform: none; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  14% { transform: translateX(-58px); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  30% { transform: translateX(14px); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  40% { transform: translateX(-5px); animation-timing-function: ease-out; }
  48% { transform: none; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  60% { transform: translateX(-34px); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  74% { transform: translateX(8px); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  84% { transform: translateX(-2px); animation-timing-function: ease-out; }
  92%, 100% { transform: none; } }
/* After the show (site.js): a plain row to look through, scrolled freely, and the answer a line under it. */
/* The drop is free again and goes about the page under its content: the cards come over its canvas, as every other
   section's content does, and the copy (with the scroller and the arrows) stays over them. */
.js-kit .kit.is-free .kit__under { z-index: 1; }
.js-kit .kit.is-free .kit__copy { z-index: 2; }
.js-kit .kit.is-free .kit__swipe { scroll-snap-type: none; }
.js-kit .kit.is-free .kit__swipe i { scroll-snap-align: none; }
/* Where the drop waits (orb.js parks on it while the section is read): left of the cards, which travel into it. */
.js-kit .kit__drop { display: block; position: absolute; width: 168px; height: 168px; top: 50%; margin-top: -84px;
  left: max(var(--gutter), calc(50% - 600px)); pointer-events: none; }
.no-webgl.js-kit .kit__drop { background: url("../img/orb-drop-rest.png") center / 125% no-repeat; z-index: 2; }
.js-kit .kit__cards { position: absolute; inset: 0; display: block; max-width: none; padding: 0; }
/* Each card rests where the middle one is read; site.js moves it from there (waiting to the right, then into the drop). */
.js-kit .card { position: absolute; left: 50%; top: 0; bottom: 0; width: var(--cw); height: min(384px, 100%); min-height: 0;
  margin: auto 0 auto calc(var(--cw) / -2); will-change: transform, opacity; }
/* With motion the scene takes the room the text leaves. */
.js-kit .card__scene { flex: 1 1 auto; height: auto; min-height: 0; }
/* The card in the middle is lit: its rim takes its colour and a low light falls under it (opacity set by site.js). */
.card__glow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none; will-change: opacity;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--h) 60%, transparent), 0 26px 70px -20px color-mix(in srgb, var(--h) 55%, transparent); }
/* A waiting card is dimmed by a shade over it, not by its own opacity: it stays opaque, so where two cards cross (on a
   phone, one going up into the drop as the next comes in) the one in front hides the other cleanly. The card that is
   leaving is in front. */
.card__shade { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #07090C; opacity: 0; pointer-events: none;
  will-change: opacity; }
.js-kit .card:nth-child(1) { z-index: 9; }
.js-kit .card:nth-child(2) { z-index: 8; }
.js-kit .card:nth-child(3) { z-index: 7; }
.js-kit .card:nth-child(4) { z-index: 6; }
.js-kit .card:nth-child(5) { z-index: 5; }
.js-kit .card:nth-child(6) { z-index: 4; }
.js-kit .card:nth-child(7) { z-index: 3; }
.js-kit .card:nth-child(8) { z-index: 2; }
.js-kit .card:nth-child(9) { z-index: 1; }
/* The answer: under the drop once the last card is in (site.js sets its top). */
.js-kit .kit__end { position: absolute; left: 0; right: 0; top: 62%; margin: 0; opacity: 0; transform: translateY(16px);
  transition: opacity .9s var(--ease-enter), transform .9s var(--ease-enter); pointer-events: none; }
.js-kit .kit.is-done .kit__end { opacity: 1; transform: none; }
.is-scrolling .kit .hl { animation-play-state: paused; }
@media (max-height: 700px) and (min-width: 900px) {
  .js-kit .kit__intro { display: none; }
  .js-kit .kit__index { grid-row: 1; }
}
@media (max-width: 899px) {
  .js-kit .kit__copy { padding-top: 70px; }
  .js-kit .kit__intro { display: none; }
  .js-kit .kit__index { line-height: 1.5; margin-top: 10px; }
  .js-kit .kit__track { --cw: min(300px, calc(100vw - 80px)); bottom: 16px; }
  /* On a phone the drop waits above the cards, in the middle: each card comes in from the right and goes up into it. */
  .js-kit .kit__drop { width: 78px; height: 78px; top: var(--kit-shift, 0px); margin-top: 0; left: 50%; margin-left: -39px; }
  /* The drop and the card under it sit together in the middle of the room there is (site.js sets --kit-shift). */
  .js-kit .card { top: calc(100px + var(--kit-shift, 0px)); bottom: auto; height: min(344px, calc(100% - 100px)); margin-top: 0; margin-bottom: 0;
    padding: 22px; border-radius: 22px; }
  .js-kit .card__name { font-size: 23px; padding-top: 10px; }
  /* A smaller light on a phone: the layer it is drawn on is as large as its reach. */
  .card__glow { box-shadow: 0 0 0 1px color-mix(in srgb, var(--h) 60%, transparent), 0 18px 44px -16px color-mix(in srgb, var(--h) 55%, transparent); }
}
@media (max-width: 899px) and (max-height: 620px) {
  .js-kit .kit__index { display: none; }
}


/* The first-100-testers hint: as quiet as the facts line beside the download, and as the privacy line in the form. */
.beta__download .beta__first100 { margin: 0; text-align: center; text-wrap: balance; }
.form .beta__first100 { margin: 10px 0 0; }
.beta__first100:has(.beta__first100-note:empty) { display: none; }
.beta__first100-note { display: block; margin-top: 2px; font-size: 12px; opacity: .8; }
.beta__first100-note a { color: inherit; }