/* 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; }
.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. */
.js-enter [data-enter] { opacity: 0; transform: translateY(14px);
  transition: opacity 1.1s var(--ease-enter), transform 1.1s var(--ease-enter); }
.js-enter .is-in[data-enter] { 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; 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; }
}

/* 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); }
@media (max-width: 960px) {
  .hf__panel { 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 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; }
.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; }
}

/* 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. */
.orbs__invite { position: absolute; left: 0; top: 0; z-index: 2; margin: 0; pointer-events: none; will-change: transform;
  --ix: 0%; --iy: -50%; }
.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));
  filter: blur(8px) drop-shadow(0 0 8px rgba(90, 235, 255, 0)) drop-shadow(0 0 20px rgba(158, 115, 255, 0));
  transition: opacity 1s var(--ease-enter), transform 1.2s var(--ease-enter), filter 1.1s var(--ease-enter); }
.orbs__invite.is-on span { opacity: 1; transform: translate(var(--ix), var(--iy));
  filter: blur(0) drop-shadow(0 0 8px rgba(90, 235, 255, .45)) drop-shadow(0 0 20px rgba(158, 115, 255, .3)); }
/* 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; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
/* «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; }
main, .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); }