:root {
  --bg: #000;
  --surface: #111113;
  --surface-2: #19191c;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --faint: #6e6e73;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  /* One accent, used for links, focus and the one state that needs attention. */
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.16);
  /* The services' own colors, the same as in the app (IslandService). Only for what we show
     of the island and its widgets; the page around them stays neutral. */
  --c-media: #db789e;
  --c-calendar: #6b9ee6;
  --c-reminders: #f59457;
  --c-timer: #e6b361;
  --c-claude: #d98c70;
  --c-codex: #78c28f;
  --c-cursor: #6bcccc;
  --c-jobs: #9e96e6;
  --c-voice: #e07373;
  --c-audio: #66badb;
  --c-mirror: #b8b0eb;
  --c-shelf: #9ecc6b;
  --c-system: #d9d9d9;
  --radius: 22px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: clip;
  /* Transparent so the dot field behind the page shows through. */
  background: transparent;
}

/* The dot field behind every page, the same grid as the final call to action. Faint enough
   to read text over; dots near the pointer brighten a little (site.js). */
.dot-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
  background-size: 22px 22px;
  background-position: 0 var(--sy, 0px);
}

.dot-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.24) 1px, transparent 1.3px);
  background-size: 22px 22px;
  background-position: 0 var(--sy, 0px);
  -webkit-mask: radial-gradient(200px circle at var(--mx, -500px) var(--my, -500px), #000, transparent 75%);
  mask: radial-gradient(200px circle at var(--mx, -500px) var(--my, -500px), #000, transparent 75%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.dot-field.is-lit::after {
  opacity: 1;
}

/* A ring of slightly brighter dots spreading from where the pointer came to rest. */
@property --ring {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

.dot-ripple {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1.3px);
  background-size: 22px 22px;
  background-position: 0 var(--sy, 0px);
  -webkit-mask: radial-gradient(circle at var(--rx) var(--ry), transparent calc(var(--ring) - 14px), #000 var(--ring), transparent calc(var(--ring) + 14px));
  mask: radial-gradient(circle at var(--rx) var(--ry), transparent calc(var(--ring) - 14px), #000 var(--ring), transparent calc(var(--ring) + 14px));
  opacity: 0;
  animation: dot-ripple 1.5s cubic-bezier(0.2, 0.6, 0.3, 1) both;
}

@keyframes dot-ripple {
  0% { --ring: 0px; opacity: 0.9; }
  100% { --ring: 180px; opacity: 0; }
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  word-break: break-all;
}

/* Shared */

.page,
main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

.eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.eyebrow a {
  color: var(--accent);
  text-decoration: none;
}

.eyebrow a:hover {
  text-decoration: underline;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--text);
  color: #000;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.button:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.12);
}

.button:focus-visible,
.nav-links a:focus-visible,
summary:focus-visible,
.link-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.button-small {
  gap: 6px;
  padding: 7px 14px;
  font-size: 14px;
}

.button-small svg {
  margin-top: -2px;
}

.link-arrow {
  font-size: 17px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}

.link-arrow::after {
  content: " ›";
}

.link-arrow:hover {
  text-decoration: underline;
}

.requirements {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--faint);
}

/* Navigation: an island hanging from the top edge, like the one Ait draws around the camera. */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  height: 0;
  overflow: visible;
}

.nav-island {
  --shoulder: 14px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  height: 52px;
  padding: 0 8px 0 18px;
  border: 1px solid var(--line-strong);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background: #000;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* The concave corners where the island meets the screen edge. */
.nav-island::before,
.nav-island::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--shoulder);
  height: var(--shoulder);
}

.nav-island::before {
  right: 100%;
  background: radial-gradient(circle at 0 100%, transparent calc(var(--shoulder) - 0.5px), var(--line-strong) calc(var(--shoulder) - 0.5px), var(--line-strong) calc(var(--shoulder) + 0.5px), #000 calc(var(--shoulder) + 0.5px));
}

.nav-island::after {
  left: 100%;
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--shoulder) - 0.5px), var(--line-strong) calc(var(--shoulder) - 0.5px), var(--line-strong) calc(var(--shoulder) + 0.5px), #000 calc(var(--shoulder) + 0.5px));
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand img {
  border-radius: 6px;
}

.beta-chip {
  margin-left: -12px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: 20px;
  margin-left: 6px;
}

.nav-links a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--text);
}

/* Hero */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0 40px;
}

/* The first screen: the headline in the window, with the top of the MacBook already showing
   below it, so it's clear there is more to see. */
.hero-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--mac-peek));
  min-height: calc(100svh - var(--mac-peek));
  padding: 72px 0 24px;
}

.hero {
  --mac-peek: clamp(140px, 24vh, 260px);
}

.hero-intro {
  opacity: clamp(0, calc(1 - var(--lift, 0) * 2.2), 1);
}

/* A wash of color behind the headline. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(50vh - 230px);
  top: calc(50svh - 230px);
  left: 50%;
  width: min(900px, 100%);
  height: 420px;
  translate: -50% 0;
  background: radial-gradient(45% 55% at 50% 50%, rgba(255, 255, 255, 0.07), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.hero h1 {
  margin-top: 14px;
  font-size: clamp(44px, 8vw, 84px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  background: linear-gradient(180deg, #fff 30%, #b9b9c0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  max-width: 620px;
  margin: 24px 0 0;
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.5;
  color: var(--muted);
}

.cta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
}

/* Hero: a MacBook desktop in real proportions. The screen is 1512 × 982 points, like a 14-inch
   MacBook Pro at its default scale; every size inside is in those points (--pt), so the menu bar,
   the notch and the real island capture keep their true ratios at any width. */

/* The MacBook stays pinned while its lid opens, so the opening takes a stretch of scrolling
   instead of passing by. */
.mac-stage {
  width: 100%;
  max-width: 1040px;
  height: 190vh;
  /* Closed, the lid lies at the bottom of the MacBook and the space above it is empty, so the
     stage tucks up under the headline: the closed MacBook shows on the first screen and opens
     upward as the headline scrolls away. */
  margin-top: calc(min(1040px, 100vw) * -0.4);
}

.macbook {
  --open: 1; /* 0 closed … 1 open; site.js drives it with the scroll. */
  position: sticky;
  top: max(72px, calc(50vh - 30vw));
  width: 100%;
  max-width: 1040px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 2400px;
  perspective-origin: 50% 10%;
}

/* The lid: a thin aluminum rim around a black glass bezel, with the screen set into it. */
.mac-lid {
  position: relative;
  z-index: 1;
  width: 86%;
  transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--open)) * -68deg));
  will-change: transform;
  padding: 1.25% 1.25% 1.6%;
  border-radius: 3.2% / 4.9%;
  background: #050506;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 1.5px #5d5e63,
    0 0 0 3px #26272a,
    0 -1px 0 3px #77787d,
    0 50px 120px rgba(0, 0, 0, 0.75);
}

/* Light falling on the glass. */
.mac-lid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 28%, transparent 42%);
  pointer-events: none;
}

/* The screen wakes as the lid opens. */
.mac-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #000;
  opacity: calc((1 - var(--open)) * 1.4);
  pointer-events: none;
}

.mac-screen {
  --pt: calc(100cqw / 1512);
  container-type: inline-size;
  position: relative;
  aspect-ratio: 1512 / 982;
  overflow: hidden;
  border-radius: calc(var(--pt) * 14) calc(var(--pt) * 14) calc(var(--pt) * 4) calc(var(--pt) * 4);
  background: #17162a url("/shots/wallpaper.webp") center / cover no-repeat;
  text-align: left;
}

.mac-menubar {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--pt) * 37);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(var(--pt) * 18);
  background: rgba(20, 21, 25, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: rgba(255, 255, 255, 0.92);
  font-size: calc(var(--pt) * 13.5);
  white-space: nowrap;
}

.mb-left,
.mb-right {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 22);
}

.mb-right {
  gap: calc(var(--pt) * 16);
}

.mac-menubar svg {
  width: calc(var(--pt) * 17);
  height: calc(var(--pt) * 17);
}

.mac-menubar .mb-apple {
  width: calc(var(--pt) * 16);
  height: calc(var(--pt) * 16);
  margin-top: calc(var(--pt) * -2);
}

.mac-window {
  position: absolute;
  overflow: hidden;
  border-radius: calc(var(--pt) * 12);
  background: rgba(28, 28, 34, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 calc(var(--pt) * 24) calc(var(--pt) * 60) rgba(0, 0, 0, 0.5);
}

.mac-editor {
  left: calc(var(--pt) * 70);
  top: calc(var(--pt) * 400);
  width: calc(var(--pt) * 760);
  height: calc(var(--pt) * 470);
}

.mac-terminal {
  right: calc(var(--pt) * 80);
  top: calc(var(--pt) * 450);
  width: calc(var(--pt) * 560);
  height: calc(var(--pt) * 330);
  background: rgba(16, 16, 18, 0.95);
}

.win-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 8);
  height: calc(var(--pt) * 34);
  padding: 0 calc(var(--pt) * 14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.win-bar i {
  width: calc(var(--pt) * 12);
  height: calc(var(--pt) * 12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.win-bar span {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: calc(var(--pt) * 12.5);
  color: rgba(255, 255, 255, 0.55);
}

.win-code {
  padding: calc(var(--pt) * 18) calc(var(--pt) * 22);
}

.win-code p {
  margin: 0;
  height: calc(var(--pt) * 26);
  display: flex;
  align-items: center;
}

.win-code p.in { padding-left: calc(var(--pt) * 32); }
.win-code p.in2 { padding-left: calc(var(--pt) * 64); }

.win-code i {
  height: calc(var(--pt) * 9);
  border-radius: calc(var(--pt) * 5);
  background: rgba(255, 255, 255, 0.14);
}

.win-code p:nth-child(3n) i { background: rgba(255, 255, 255, 0.24); }

.mac-terminal pre {
  margin: 0;
  padding: calc(var(--pt) * 16) calc(var(--pt) * 18);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(var(--pt) * 13);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  white-space: pre;
}

/* The island under the camera. Resting, it is the small island with its wings; as the lid comes
   up it grows into the open island, and the real capture fades in once there is room for it,
   the way the app opens. All sizes are the app's own, in points. */
.mac-island {
  /* 0 resting … 1 open; follows the lid's last stretch. */
  --grow: clamp(0, calc((var(--open) - 0.7) / 0.25), 1);
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--pt) * (253 + 427 * var(--grow)));
  height: calc(var(--pt) * (33 + 177 * var(--grow)));
  translate: -50% 0;
  overflow: hidden;
  border-radius: 0 0 calc(var(--pt) * (10 + 26 * var(--grow))) calc(var(--pt) * (10 + 26 * var(--grow)));
  background: #000;
  box-shadow:
    0 0 0 calc(var(--pt) * 0.75) rgba(255, 255, 255, calc(0.18 * (1 - var(--grow)))),
    0 calc(var(--pt) * 14 * var(--grow)) calc(var(--pt) * 40 * var(--grow)) rgba(0, 0, 0, calc(0.6 * var(--grow)));
}

/* The resting island's wings: the ait mark and the dashboard symbol beside the camera. */
.island-idle {
  position: absolute;
  inset: 0 auto auto 50%;
  width: calc(var(--pt) * 253);
  height: calc(var(--pt) * 33);
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--pt) * 8);
  opacity: clamp(0, calc(1 - var(--grow) * 4), 1);
}

.island-idle img {
  width: calc(var(--pt) * 20);
  height: auto;
}

.island-idle svg {
  width: calc(var(--pt) * 15);
  margin-right: calc(var(--pt) * 2);
  fill: rgba(255, 255, 255, 0.55);
}

.island-shot {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--pt) * 680);
  max-width: none;
  height: auto;
  translate: -50% 0;
  opacity: clamp(0, calc((var(--grow) - 0.6) * 2.5), 1);
  filter: blur(calc(var(--pt) * 8 * (1 - var(--grow))));
}

.mac-dock {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pt) * 6);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 8);
  padding: calc(var(--pt) * 7);
  border-radius: calc(var(--pt) * 22);
  background: rgba(60, 62, 68, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.dock-icon,
.dock-app {
  width: calc(var(--pt) * 56);
  height: calc(var(--pt) * 56);
  border-radius: calc(var(--pt) * 13);
}

.dock-icon {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #4a4c52, #2c2d31);
  color: rgba(255, 255, 255, 0.85);
}

.dock-icon svg {
  width: 56%;
  height: 56%;
}

.dock-sep {
  width: 1px;
  height: calc(var(--pt) * 48);
  background: rgba(255, 255, 255, 0.18);
}

/* The base: the front edge of the bottom case with its thumb notch. */
/* The bottom case seen edge-on: a lit top edge, the hinge shadow, the thumb notch and a
   front edge that curves away at the corners. */
.mac-base {
  position: relative;
  width: 100%;
  height: clamp(9px, 1.7vw, 18px);
  border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 6%, transparent 94%, rgba(0, 0, 0, 0.55)),
    linear-gradient(180deg, #a4a5aa 0, #6c6d72 9%, #393a3e 32%, #1d1e21 70%, #0f0f11 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 40px rgba(0, 0, 0, 0.55),
    0 60px 100px rgba(0, 0, 0, 0.5);
}

/* Hinge shadow cast by the lid. */
.mac-base::after {
  content: "";
  position: absolute;
  top: 0;
  left: 7%;
  right: 7%;
  height: 28%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent);
}

.mac-base::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: 13%;
  height: 42%;
  translate: -50% 0;
  border-radius: 0 0 10px 10px / 0 0 100% 100%;
  background: linear-gradient(180deg, #2a2b2e, #4a4b50);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Sections */

.section {
  padding: 160px 0 0;
}

.section-head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.section h2,
.final h2 {
  margin-top: 12px;
  font-size: clamp(32px, 5.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.section h2,
.final h2,
.section-lede,
.hero h1,
.lede {
  text-wrap: balance;
}

.section-lede {
  margin: 18px 0 0;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.55;
  color: var(--muted);
}

.steps {
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  counter-reset: step;
}

.steps li {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--surface);
}

.step-label {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.steps h3 {
  margin-top: 14px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.steps p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

/* Feature grid */

.bento {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.card-full {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 32px;
  align-items: center;
}

.card-wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}

.card h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.card p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

kbd {
  font: 600 12px/1 var(--font, -apple-system, system-ui, sans-serif);
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  white-space: nowrap;
}

.voice-pill {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #000;
  font-size: 14px;
  font-weight: 600;
}

.voice-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-voice);
  box-shadow: 0 0 10px var(--c-voice);
}

.voice-bars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}

.voice-bars i {
  width: 4px;
  height: 30%;
  border-radius: 2px;
  background: var(--c-voice);
  animation: voice-bar 1.1s ease-in-out infinite;
}

.voice-bars i:nth-child(2) { animation-delay: -0.2s; }
.voice-bars i:nth-child(3) { animation-delay: -0.5s; }
.voice-bars i:nth-child(4) { animation-delay: -0.8s; }
.voice-bars i:nth-child(5) { animation-delay: -0.35s; }
.voice-bars i:nth-child(6) { animation-delay: -0.65s; }

@keyframes voice-bar {
  50% { height: 100%; }
}

.mini-player {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas: "art meta" "progress progress" "controls controls";
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: #000;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.mini-art {
  grid-area: art;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-media), var(--c-jobs) 65%, var(--c-audio));
}

.mini-meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.mini-meta b {
  font-size: 15px;
}

.mini-meta i {
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-progress {
  grid-area: progress;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.mini-progress span {
  display: block;
  width: 42%;
  height: 100%;
  background: var(--c-media);
}

.mini-controls {
  grid-area: controls;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
}

.mini-controls i {
  display: block;
  background: var(--text);
}

.mini-controls .prev,
.mini-controls .next {
  width: 16px;
  height: 12px;
  clip-path: polygon(0 50%, 50% 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 50% 100%);
}

.mini-controls .next {
  transform: scaleX(-1);
}

.mini-controls .pause {
  width: 14px;
  height: 18px;
  background: linear-gradient(90deg, var(--text) 0 35%, transparent 35% 65%, var(--text) 65%);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #000;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
}

.chip[class*="dot-"]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.chip[class*="dot-"]::before {
  background: var(--dot);
  box-shadow: 0 0 8px var(--dot);
}

.dot-calendar { --dot: var(--c-calendar); }
.dot-claude { --dot: var(--c-claude); }
.dot-audio { --dot: var(--c-audio); }
.dot-reminders { --dot: var(--c-reminders); }
.dot-timer { --dot: var(--c-timer); }
.dot-shelf { --dot: var(--c-shelf); }

/* Toolbox */

.toolbox {
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tool {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--surface);
}

.tool-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #000;
  border: 1px solid var(--line);
  color: var(--svc);
}

.tool h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.tool p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.tool-timer { --svc: var(--c-timer); }
.tool-mirror { --svc: var(--c-mirror); }
.tool-voice { --svc: var(--c-voice); }
.tool-clipboard { --svc: var(--c-timer); }
.tool-shelf { --svc: var(--c-shelf); }
.tool-system { --svc: var(--c-system); }

/* A monitor's top edge with the virtual island. */
.monitor {
  position: relative;
  margin-top: auto;
  height: 64px;
  border: 6px solid #2a2a2d;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(160deg, #2b2e35, #121316);
  translate: 0 28px;
  -webkit-mask: linear-gradient(#000 60%, transparent);
  mask: linear-gradient(#000 60%, transparent);
}

.monitor-island {
  position: absolute;
  top: 0;
  left: 50%;
  width: 96px;
  height: 18px;
  translate: -50% 0;
  border-radius: 0 0 9px 9px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Developers: one panel at a time, chosen with a segmented control. */

.dev-tabs {
  margin-top: 56px;
}

.tab-list {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-list::-webkit-scrollbar {
  display: none;
}

/* The selection, sliding between tabs (index.html moves it). */
.tab-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: #2a2a2e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
  pointer-events: none;
}

.tab {
  position: relative;
  flex: none;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.tab:hover {
  color: var(--text);
}

.tab[aria-selected="true"] {
  color: var(--text);
  transition: color 0.2s ease;
}

/* Without the script the selected tab carries its own background. */
.dev-tabs:not(.has-indicator) .tab[aria-selected="true"] {
  background: #2a2a2e;
}

.tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tab-panel {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: center;
  min-height: 340px;
  padding: 40px;
  border-radius: var(--radius);
  background: var(--surface);
}

.tab-panel[hidden] {
  display: none;
}

.panel-text h3 {
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.panel-text p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.panel-visual {
  margin: 0;
  padding: 24px;
  border-radius: 18px;
  background: #000;
}

.agent-stack {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

/* Each state is its own screen top: the island hangs from the edge, its caption below. */
.agent-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-bottom: 22px;
}

.agent-row + .agent-row {
  border-top: 1px solid var(--line);
}

.agent-pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 0 0 16px 16px;
  background: #151517;
  border: 1px solid var(--line);
  border-top: 0;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


.agent-claude {
  color: var(--c-claude);
  box-shadow: 0 6px 24px rgba(217, 140, 112, 0.25);
}

/* The agents' own marks, tinted in their colors like in the app. */
.agent-mark {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--mark-color, currentColor);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}

.mark-claude { --mark: url("/marks/claude.svg"); --mark-color: var(--c-claude); }
.mark-codex { --mark: url("/marks/codex.svg"); --mark-color: var(--c-codex); }
.mark-cursor { --mark: url("/marks/cursor.svg"); --mark-color: var(--c-cursor); }

/* Claude's spark turns slowly while it works, as in the island. */
.agent-mark.is-working {
  animation: spin 6s linear infinite;
}

/* A chip led by an agent's mark instead of a color dot. */
.chip-mark {
  gap: 7px;
}

.chip-mark .agent-mark {
  width: 14px;
  height: 14px;
}

/* Make the island yours: three closed islands as they can look. */
.island-variants {
  display: grid;
  gap: 18px;
  justify-items: center;
}

.variant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.variant-island {
  --wing: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(112px + 2 * var(--wing));
  height: 30px;
  padding: 0 9px;
  border-radius: 0 0 11px 11px;
  background: #000;
}

.variant-island.is-narrow { --wing: 22px; }
.variant-island.is-wide { --wing: 54px; }
.variant-island.is-outline { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.24); }
.variant-island.is-glow { box-shadow: 0 0 18px 2px color-mix(in srgb, var(--accent, #0a84ff) 55%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.1); }

.variant-island i {
  display: block;
  width: 13px;
  height: 13px;
  background: rgba(255, 255, 255, 0.55);
}

.variant-island .v-logo {
  width: 15px;
  height: 8px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: none;
}

.variant-island .v-grid {
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1.6'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1.6'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1.6'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1.6'/%3E%3C/svg%3E");
  -webkit-mask: var(--grid) center / contain no-repeat;
  mask: var(--grid) center / contain no-repeat;
}

.variant-island .v-note {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
}

.variant-island .v-bars {
  width: 14px;
  background: repeating-linear-gradient(90deg, var(--c-media) 0 2px, transparent 2px 4px);
  -webkit-mask: linear-gradient(#000, #000);
  border-radius: 1px;
}

.agent-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.agent-logos li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 15px;
  font-weight: 600;
}

.agent-logos .agent-mark {
  width: 20px;
  height: 20px;
}

.agent-pill-alert {
  color: var(--c-reminders);
  box-shadow: 0 6px 24px rgba(245, 148, 87, 0.3);
}

.agent-done {
  color: var(--c-cursor);
  box-shadow: 0 6px 24px rgba(107, 204, 204, 0.25);
}

.agent-done .check {
  width: 10px;
  height: 6px;
  margin: -3px 7px 0 0;
  border-width: 0 0 2px 2px;
  border-color: var(--c-cursor);
}

.agent-caption {
  font-size: 13px;
  color: var(--muted);
}

.agent-gap {
  width: 84px;
}

/* Equal wings either side of the camera: the mark hugs the left edge, the text the right. */
.agent-wing {
  display: flex;
  align-items: center;
  width: 64px;
}

.agent-wing:last-child {
  justify-content: flex-end;
}

.agent-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.spark {
  width: 16px;
  height: 16px;
  background: var(--text);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: spin 3s linear infinite;
}

.check {
  width: 14px;
  height: 8px;
  margin-top: -4px;
  border-left: 2.5px solid var(--text);
  border-bottom: 2.5px solid var(--text);
  transform: rotate(-45deg);
}

.usage-panel {
  display: grid;
  gap: 18px;
}

.usage-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.usage-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.usage-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--c-claude);
}

/* Orange from 80%, as in the app. */
.usage-row:first-child .usage-bar span {
  background: var(--c-reminders);
}

.usage-row:last-child .usage-bar span {
  background: var(--c-system);
}

.connect-list,
.gh-list {
  list-style: none;
  display: grid;
  gap: 0;
  padding: 8px 20px;
}

.connect-list li,
.gh-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-size: 15px;
}

.connect-list li + li,
.gh-list li + li {
  border-top: 1px solid var(--line);
}

.connect-list b,
.gh-list b {
  font-weight: 600;
}

.connect-list span {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
}

.connect-list .ok::before {
  content: "✓ ";
  color: var(--c-codex);
}

.connect-list .connect-button {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--text);
  color: #000;
  font-weight: 600;
}

.gh-list span:last-child {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
}

.gh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.gh-dot.gh-alert { background: var(--c-voice); }
.gh-dot.gh-review { background: var(--c-timer); }
.gh-dot.gh-merged { background: var(--c-jobs); }

.terminal {
  padding: 0;
  overflow: hidden;
}

.terminal-bar {
  display: flex;
  gap: 7px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.terminal-bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3a3a3c;
}

.terminal-bar i:nth-child(1),
.win-bar i:nth-child(1) { background: #ff5f57; }
.terminal-bar i:nth-child(2),
.win-bar i:nth-child(2) { background: #febc2e; }
.terminal-bar i:nth-child(3),
.win-bar i:nth-child(3) { background: #28c840; }

.terminal pre {
  margin: 0;
  padding: 18px;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text);
}

.terminal .prompt { color: var(--c-codex); }
.terminal .s { color: var(--c-timer); }

/* Pillars */

.pillars {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pillar {
  padding: 32px 28px;
  text-align: center;
  border-radius: var(--radius);
  background: var(--surface);
}

.pillar-private { --from: var(--c-codex); --to: var(--c-cursor); }
.pillar-light { --from: var(--c-audio); --to: var(--c-calendar); }
.pillar-native { --from: var(--c-timer); --to: var(--c-reminders); }

.stat {
  display: block;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.04em;
  background: linear-gradient(90deg, var(--from), var(--to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pillars h3 {
  margin-top: 6px;
  font-size: 19px;
}

.pillars p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

/* Pricing */

.plans {
  margin: 64px auto 0;
  max-width: 860px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: var(--radius);
  background: var(--surface);
}

.plan h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}

.plan-price {
  margin: 10px 0 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.plan-price span {
  background: linear-gradient(90deg, var(--c-claude), var(--c-timer));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Every figure is the same size; the old price is only dimmed and struck. */
.plan-was {
  margin-right: 10px;
  color: var(--faint);
  text-decoration-thickness: 3px;
}

.plan-price-note {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.plan ul {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  align-content: start;
  flex: 1;
}

.plan li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.plan li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.plan li b {
  color: var(--text);
}

/* The same footer in every card, pinned to its bottom, so the buttons line up. */
.plan-footer {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.button-buy {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* Checkout isn't open yet: the button is there, but off. */
.button:disabled {
  background: var(--line-strong);
  color: var(--faint);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.plan-button-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--faint);
}

/* FAQ */

.faq {
  max-width: 760px;
  margin: 56px auto 0;
  display: grid;
  gap: 10px;
}

.faq details {
  padding: 0 24px;
  border-radius: 18px;
  background: var(--surface);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.faq details:hover,
.faq details[open] {
  background: var(--surface-2);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 24px;
  font-weight: 400;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.faq details[open]:not(.is-closing) summary::after {
  transform: rotate(45deg);
}

/* The answer fades in as its card opens (site.js animates the height). */
.faq details[open] p {
  animation: faq-answer 0.32s ease both;
}

.faq details.is-closing p {
  opacity: 0;
  transition: opacity 0.18s ease;
}

@keyframes faq-answer {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.faq p {
  margin: 0 0 22px;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* Final call to action: no card; a soft aurora drifts behind and fades into the page, the icon
   floats over a turning halo. Everything stops with Reduce Motion. */

@property --final-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.final {
  --glow: rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.5);
  position: relative;
  isolation: isolate;
  margin-top: 160px;
  padding: 96px 24px 88px;
  text-align: center;
}

.aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: blur(70px);
  opacity: 0.6;
}

/* Without a card, the final glow fades out at every edge. */
.final .aurora {
  -webkit-mask: radial-gradient(60% 65% at 50% 50%, #000 40%, transparent);
  mask: radial-gradient(60% 65% at 50% 50%, #000 40%, transparent);
}

.aurora i {
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.aurora i:nth-child(1) {
  left: 4%;
  top: 20%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.12), transparent);
  animation: final-drift-a 16s ease-in-out infinite alternate;
}

.aurora i:nth-child(2) {
  right: 2%;
  top: 30%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.08), transparent);
  animation: final-drift-b 19s ease-in-out infinite alternate;
}

.aurora i:nth-child(3) {
  left: 30%;
  bottom: -30%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.1), transparent);
  animation: final-drift-c 22s ease-in-out infinite alternate;
}

.final-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-logo {
  position: relative;
  width: 120px;
  height: 120px;
  animation: final-float 6s ease-in-out infinite;
}

.final-logo img {
  position: relative;
  display: block;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.final-halo {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: conic-gradient(from var(--final-angle), var(--glow));
  filter: blur(30px);
  opacity: 0.35;
  animation: final-turn 6s linear infinite;
}

.final h2 {
  margin-top: 36px;
  font-size: clamp(40px, 7vw, 72px);
  background: linear-gradient(100deg, #fff 0%, #fff 40%, #8e8e93 48%, #c7c7cc 54%, #fff 62%, #fff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: final-sheen 7s ease-in-out infinite;
}

.final .button {
  margin-top: 32px;
  padding: 16px 32px;
  font-size: 18px;
}

/* A highlight that sweeps across the button every few seconds. */
.button-shine {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 12px 50px rgba(255, 255, 255, 0.12);
}

.button-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.9) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: final-shine 4s ease-in-out infinite;
}

/* Entrance: the content rises in once the card scrolls into view. */
@supports (animation-timeline: view()) {
  .final-content > * {
    animation: final-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  .final-content > .final-logo {
    animation: final-rise linear both, final-float 6s ease-in-out infinite;
    animation-timeline: view(), auto;
    animation-range: entry 0% entry 100%, normal;
  }
}

@keyframes final-turn {
  to { --final-angle: 360deg; }
}

@keyframes final-drift-a {
  to { transform: translate(18%, -12%) scale(1.15); }
}

@keyframes final-drift-b {
  to { transform: translate(-20%, 14%) scale(0.9); }
}

@keyframes final-drift-c {
  to { transform: translate(14%, -22%) scale(1.2); }
}

@keyframes final-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes final-sheen {
  0%, 20% { background-position: 100% 0; }
  80%, 100% { background-position: 0% 0; }
}

@keyframes final-shine {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

@keyframes final-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

/* Text pages: release notes and guides */

.doc {
  max-width: 760px;
  padding-top: 152px;
  padding-bottom: 32px;
}

.doc-head h1 {
  margin-top: 12px;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

.doc-lede {
  margin: 24px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
}

.doc-section {
  margin-top: 88px;
}

.doc-section h2 {
  font-size: 24px;
  letter-spacing: -0.02em;
}

.doc-section p,
.doc-list li,
.doc-steps li,
.release li {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

.doc-section p {
  margin: 20px 0 0;
}

.doc-section p + p {
  margin-top: 14px;
}

.doc-list,
.doc-steps,
.release ul {
  margin: 24px 0 0;
  padding-left: 22px;
}

.doc-list li + li,
.doc-steps li + li,
.release li + li {
  margin-top: 16px;
}

.doc-list li::marker,
.doc-steps li::marker,
.release li::marker {
  color: var(--faint);
}

.doc b {
  color: var(--text);
}

.release {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  margin-top: 72px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}

.release-meta h2 {
  font-size: 28px;
  letter-spacing: -0.02em;
}

.release-meta {
  align-self: start;
  position: sticky;
  top: 96px;
}

.release-meta time {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--faint);
}

.release-summary {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text);
}

.doc-cta {
  margin-top: 128px;
  padding: 64px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.doc-cta h2 {
  font-size: 32px;
  letter-spacing: -0.03em;
}

.doc-cta p {
  margin: 10px 0 24px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .doc {
    padding-top: 112px;
  }

  .doc-section {
    margin-top: 64px;
  }

  .release {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 48px;
    padding-top: 40px;
  }

  .release-meta {
    position: static;
  }
}

/* Download page */

.get {
  max-width: 1080px;
  padding-top: 136px;
}

.get-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.get-icon {
  position: relative;
  width: 112px;
  height: 112px;
}

.get-icon img {
  position: relative;
  display: block;
  border-radius: 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.get-halo {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: conic-gradient(from var(--final-angle), var(--glow-get));
  filter: blur(28px);
  opacity: 0.35;
  animation: final-turn 6s linear infinite;
}

.get-hero {
  --glow-get: rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.5);
}

.get-hero h1 {
  margin-top: 36px;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

.get-lede {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: balance;
}

.get-actions {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.get-actions .button[hidden] {
  display: none;
}

.get-fallback {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.get-fallback a,
.get-notes a {
  color: var(--accent);
  text-decoration: none;
}

.get-fallback a:hover,
.get-notes a:hover {
  text-decoration: underline;
}

.get-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 40px 0 0;
}

.get-facts div {
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--surface);
  text-align: left;
}

.get-facts dt {
  font-size: 12px;
  color: var(--faint);
}

.get-facts dd {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.get-facts a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}

.get-steps {
  margin-top: 128px;
}

.get-steps h2,
.get-notes h2 {
  text-align: center;
  font-size: clamp(28px, 4.5vw, 40px);
  letter-spacing: -0.03em;
}

.get-steps ol {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.get-steps li {
  padding: 0 28px 28px;
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.step-art {
  display: grid;
  place-items: center;
  height: 150px;
  margin: 0 -28px 24px;
  background:
    radial-gradient(80% 90% at 50% 100%, rgba(255, 255, 255, 0.05), transparent 70%),
    #08080a;
  border-bottom: 1px solid var(--line);
}

.step-number {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.get-steps h3 {
  margin-top: 14px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.get-steps p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.get-steps b {
  color: var(--text);
  font-weight: 600;
}

.dmg-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.dmg-file svg {
  width: 48px;
  height: 56px;
}

.dmg-window {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 12px;
  background: rgba(40, 40, 46, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.dmg-window img {
  border-radius: 10px;
}

.dmg-arrow {
  width: 60px;
  height: 16px;
}

.dmg-folder {
  width: 48px;
  height: 40px;
}

/* A screen's top edge with the island resting around the camera. */
.mini-notch {
  position: relative;
  width: 78%;
  height: 92px;
  align-self: end;
  border: 6px solid #2a2a2d;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: #17162a url("/shots/wallpaper.webp") center / cover;
}

.mini-notch span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 46%;
  height: 22px;
  translate: -50% 0;
  border-radius: 0 0 11px 11px;
  background: #000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.mini-notch span::before,
.mini-notch span::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.mini-notch span::before {
  left: 12px;
  background: var(--c-media);
}

.mini-notch span::after {
  right: 12px;
  background: var(--c-claude);
}

.get-notes {
  margin-top: 112px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.get-notes article {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--surface);
}

.get-notes h3 {
  font-size: 17px;
}

.get-notes p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.get-sha {
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #000;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  user-select: all;
}

@media (max-width: 860px) {
  .get-steps ol,
  .get-notes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .get {
    padding-top: 112px;
  }

  .get-steps {
    margin-top: 96px;
  }
}

/* Simple pages (soon, 404) */

.logo {
  margin-top: 56px;
  border-radius: 24px;
}

.page .hero h1 {
  font-size: clamp(40px, 8vw, 64px);
}

/* Footer */

.footer {
  max-width: 1080px;
  margin: 24px auto 0;
  padding: 48px 16px 40px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 32px;
}

.footer-brand p {
  margin: 12px 0 0;
  max-width: 260px;
  line-height: 1.5;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer-col h2 {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.footer-col a {
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--text);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  font-size: 13px;
  color: var(--faint);
}

/* Simple pages keep a one-line footer. */
.page + .footer {
  display: flex;
  justify-content: space-between;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Layout */

@media (max-width: 860px) {
  .bento {
    grid-template-columns: 1fr 1fr;
  }

  .card-wide,
  .card-full {
    grid-column: 1 / -1;
  }

  .card-full {
    grid-template-columns: 1fr;
  }

  .pillars,
  .plans {
    grid-template-columns: 1fr;
  }

  .toolbox {
    grid-template-columns: 1fr 1fr;
  }

  .tab-panel {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .nav-links {
    display: none;
  }

  .nav-island {
    gap: 18px;
  }

  .hero-intro {
    padding-top: 64px;
  }

  .mac-stage {
    height: 140vh;
  }

  .macbook {
    top: max(72px, calc(50vh - 34vw));
  }

  .faq details {
    padding: 0 18px;
  }

  .tab {
    padding: 8px 13px;
    font-size: 14px;
  }

  .tab-panel {
    padding: 22px;
  }

  .mac-lid {
    width: 94%;
  }

  .bento {
    grid-template-columns: 1fr;
  }

  .card-wide {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .toolbox {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 22px;
  }






  .section {
    padding-top: 112px;
  }

  .section h2 br {
    display: none;
  }

  .final {
    margin-top: 80px;
    padding: 64px 20px 56px;
    border-radius: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .mac-stage {
    height: auto;
  }

  .macbook {
    position: static;
  }

  .spark,
  .aurora i,
  .final-logo,
  .final-halo,
  .final h2,
  .button-shine::after,
  .final-content > *,
  .faq details[open] p,
  .voice-bars i,
  .dot-ripple,
  .get-halo {
    animation: none;
  }
}