/* nomad.ax — one stylesheet for every page.
 *
 * Noir, achromatic, never pure black or white: the surfaces are nomad-design's
 * dark rungs, and every colour on the page comes from the products themselves
 * (their icons, the desk's wallpapers). No accent; actions are ink.
 *
 * The first law (NomadOS/CLAUDE.md): nothing stutters. Everything that moves
 * here moves opacity or transform only, driven by CSS (scroll timelines,
 * transitions on class changes), never by a script writing styles per frame.
 * Reduced motion is instant, not slower.
 */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/jakarta.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('/assets/fonts/jetbrains-mono.woff2') format('woff2-variations');
}

:root {
  color-scheme: dark;

  /* Surfaces — nomad-design's dark rungs. */
  --base: #121213;
  --raise: #161617;
  --card: #1c1c1e;
  --control: #262628;
  --hover: #2e2e31;

  /* Ink. */
  --ink: #ededef;
  --ink-2: rgba(235, 235, 245, 0.64);
  --ink-3: rgba(235, 235, 245, 0.42);
  --ink-4: rgba(235, 235, 245, 0.2);
  --on-ink: #17181b;

  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.05);

  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;

  --max: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 52px;

  --r-xl: 32px;
  --r-l: 24px;
  --r-m: 16px;
  --r-s: 10px;

  /* Motion — nomad-design's tiers and curves. */
  --t1: 90ms;
  --t2: 160ms;
  --t3: 240ms;
  --t4: 400ms;
  --e-entrance: cubic-bezier(0.32, 0.72, 0, 1);
  --e-exit: cubic-bezier(0.4, 0, 1, 1);
  --e-smooth: cubic-bezier(0.4, 0, 0, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }

::selection { background: rgba(235, 235, 245, 0.22); }

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

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 16px; top: 8px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

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

/* ─── Type ─────────────────────────────────────────────────────────── */

.eyebrow {
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.display {
  font-size: clamp(46px, 9.2vw, 120px);
  font-weight: 760;
  letter-spacing: -0.048em;
  line-height: 0.96;
}

.headline {
  font-size: clamp(34px, 5.4vw, 64px);
  font-weight: 720;
  letter-spacing: -0.038em;
  line-height: 1.02;
}

.title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 680;
  letter-spacing: -0.024em;
  line-height: 1.15;
}

.lede {
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -0.006em;
}

.body { color: var(--ink-2); }
.small { font-size: 14px; color: var(--ink-3); line-height: 1.55; }

/* A phrase inside a headline that steps back. */
.dim { color: var(--ink-3); }

/* ─── Buttons and links ────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font: 620 15px/1 var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--t1) var(--e-smooth);
}
/* The hover wash is a layer whose opacity changes, so hovering never repaints
   the button itself. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--t2) var(--e-smooth);
}
.btn:hover::before { opacity: 1; }
.btn:active { transform: scale(0.97); }

.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink::before { background: rgba(255, 255, 255, 0.55); }

.btn-quiet { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.btn-quiet::before { background: rgba(255, 255, 255, 0.07); }

.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }

.more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.more::after {
  content: '›';
  font-size: 1.2em;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform var(--t2) var(--e-entrance);
}
.more:hover::after { transform: translate(3px, -1px); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

/* ─── Navigation ───────────────────────────────────────────────────── */

/* Floating chrome is the one place glass is allowed. It never moves and its
   blur never animates; scrolling under it is the compositor's job. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(18, 18, 19, 0.78);
  -webkit-backdrop-filter: saturate(1.6) blur(20px);
  backdrop-filter: saturate(1.6) blur(20px);
  border-bottom: 1px solid var(--line-2);
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 720;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.brand img { width: 22px; height: 22px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-main { margin-left: auto; }
.nav-links a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current='page'] { color: var(--ink); }

.nav-end { display: flex; align-items: center; gap: 10px; }

/* The small-screen menu is a <details>: it works with no script at all. */
.menu { display: none; position: relative; }
.menu > summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-right: -8px;
  border-radius: 999px;
  cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 20px; height: 20px; }

.menu-sheet {
  position: fixed;
  left: 0; right: 0;
  top: var(--nav-h);
  padding: 8px var(--gutter) 28px;
  background: var(--raise);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.menu[open] .menu-sheet {
  animation: sheet-in var(--t3) var(--e-entrance) both;
}
.menu-sheet ul { margin: 0; padding: 0; list-style: none; }
.menu-sheet li + li { border-top: 1px solid var(--line-2); }
.menu-sheet a {
  display: block;
  padding: 14px 0;
  font-size: 19px;
  font-weight: 620;
  letter-spacing: -0.015em;
  text-decoration: none;
}
.menu-sheet .btn { display: flex; margin-top: 18px; width: 100%; padding: 0 24px; font-size: 16px; }

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .nav-main, .nav-end .signin { display: none; }
  .menu { display: block; }
  .nav-end { margin-left: auto; }
}

/* ─── Sections ─────────────────────────────────────────────────────── */

.section { padding: clamp(88px, 12vw, 168px) 0; }
.section-tight { padding: clamp(64px, 8vw, 112px) 0; }
.section + .section { padding-top: 0; }
.rule { border-top: 1px solid var(--line-2); }

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

/* ─── Hero ─────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(72px, 12vh, 136px) 0 clamp(56px, 8vw, 96px);
  text-align: center;
}
.hero-copy {
  display: grid;
  justify-items: center;
  gap: 22px;
}
.hero-copy .lede { max-width: 640px; }
.hero-copy .actions { justify-content: center; margin-top: 10px; }

/* ─── App icons ────────────────────────────────────────────────────── */

/* The family icons ship with their squircle baked in. Plates drawn here (AX,
   Drift) wear the same superellipse as a mask. */
.icon {
  width: var(--s, 64px);
  height: var(--s, 64px);
  flex: none;
}
.plate {
  display: grid;
  place-items: center;
  width: var(--s, 64px);
  height: var(--s, 64px);
  flex: none;
  -webkit-mask: url('/assets/squircle.svg') center / 100% 100% no-repeat;
  mask: url('/assets/squircle.svg') center / 100% 100% no-repeat;
}

/* AX has no logo yet: a typographic lockup until it does. */
.plate-ax {
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(160deg, #3b3b3f 0%, #232325 55%, #161617 100%);
  color: var(--ink);
  font-weight: 800;
  font-size: calc(var(--s, 64px) * 0.4);
  letter-spacing: -0.06em;
  line-height: 1;
}
.plate-ax span { transform: translateX(-0.03em); }

.plate-drift {
  background:
    radial-gradient(110% 80% at 70% 0%, rgba(160, 205, 255, 0.55), transparent 60%),
    linear-gradient(165deg, #2f6fe0 0%, #1d3f8f 58%, #13234f 100%);
  color: #f4f8ff;
}
.plate-drift svg { width: 56%; height: 56%; }

/* The wordmark lockup for AX on its own page. */
.ax-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 0.8;
}
.ax-lockup .by {
  font: 500 0.13em/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-self: flex-end;
  margin: 0 0 0.25em 0.6em;
}

/* ─── The desk (a composed picture of AX, built from the real parts) ─ */

.desk-stage { perspective: 2400px; }

.desk {
  --cq: 1cqw;
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: clamp(10px, 1.6vw, 22px);
  overflow: hidden;
  background: #1c1c1e;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 50px 120px -30px rgba(0, 0, 0, 0.75),
    0 30px 60px -40px rgba(0, 0, 0, 0.6);
  transform: translateZ(0);
}

.desk-wall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.desk-bar {
  position: absolute;
  inset: 0 0 auto;
  height: 3.4cqw;
  display: flex;
  align-items: center;
  gap: 2.1cqw;
  padding: 0 1.8cqw;
  font-size: 1.12cqw;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 0.06cqw 0.3cqw rgba(0, 0, 0, 0.22);
  background: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
}
.desk-bar .ax { font-weight: 800; letter-spacing: -0.06em; }
.desk-bar .soft { font-weight: 500; opacity: 0.86; }
.desk-bar .end { margin-left: auto; display: flex; gap: 1.6cqw; font-weight: 500; }

.desk-items {
  position: absolute;
  top: 6cqw;
  right: 2.4cqw;
  display: grid;
  gap: 1.6cqw;
  justify-items: center;
}
.desk-item {
  display: grid;
  justify-items: center;
  gap: 0.4cqw;
  width: 8cqw;
  font-size: 0.95cqw;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0.08cqw 0.4cqw rgba(0, 0, 0, 0.45);
}
.desk-item img { width: 4.6cqw; height: 4.6cqw; }

.desk-window {
  position: absolute;
  left: 7%;
  top: 13%;
  width: 52%;
  height: 62%;
  border-radius: 1.2cqw;
  background: #1c1c1e;
  box-shadow: 0 0 0 0.08cqw rgba(255, 255, 255, 0.12), 0 2.4cqw 5cqw rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: grid;
  grid-template-rows: 3cqw 1fr;
}
.desk-window .chrome {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  padding: 0 1.2cqw;
  font-size: 0.95cqw;
  font-weight: 600;
  color: rgba(235, 235, 245, 0.7);
  border-bottom: 0.08cqw solid rgba(255, 255, 255, 0.06);
}
.desk-window .chrome img { width: 1.5cqw; height: 1.5cqw; }
.desk-window .chrome .dots { margin-left: auto; display: flex; gap: 0.6cqw; }
.desk-window .chrome .dots i {
  width: 0.9cqw; height: 0.9cqw; border-radius: 50%;
  background: rgba(235, 235, 245, 0.22);
}
.desk-page {
  margin: 2.4cqw auto 0;
  width: 68%;
  height: 100%;
  border-radius: 0.5cqw 0.5cqw 0 0;
  background: #f4f4f5;
  padding: 3.4cqw 3.6cqw;
  color: #1a1a1c;
  overflow: hidden;
}
.desk-page b {
  display: block;
  font-size: 2.1cqw;
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.desk-page p {
  margin-top: 1.2cqw;
  font-size: 0.92cqw;
  line-height: 1.6;
  color: #4a4a4f;
}

.desk-dock {
  position: absolute;
  left: 50%;
  bottom: 1.6cqw;
  transform: translateX(-50%);
  display: flex;
  gap: 0.9cqw;
  padding: 0.9cqw;
  border-radius: 2cqw;
  background: rgba(28, 28, 30, 0.62);
  box-shadow: 0 0 0 0.08cqw rgba(255, 255, 255, 0.14), 0 1.4cqw 3cqw rgba(0, 0, 0, 0.3);
}
.desk-dock img, .desk-dock .plate { width: 4.4cqw; height: 4.4cqw; --s: 4.4cqw; }
.desk-dock .sep { width: 0.08cqw; margin: 0.6cqw 0.2cqw; background: rgba(255, 255, 255, 0.2); }

/* ─── Product tiles (bento) ────────────────────────────────────────── */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.tile .icon, .tile .plate { --s: 72px; margin-bottom: 10px; }
.tile .title { max-width: 18ch; }
.tile .body { max-width: 44ch; }
.tile .foot {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tile .price { font: 500 13px/1.3 var(--mono); color: var(--ink-3); }

a.tile { transition: transform var(--t3) var(--e-entrance); }
a.tile:hover { transform: translateY(-3px); }
a.tile:active { transform: scale(0.99); }
a.tile:hover .more::after { transform: translate(3px, -1px); }

.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.span-2 { grid-column: span 2; }

@media (max-width: 960px) {
  .span-4, .span-3, .span-2 { grid-column: span 6; }
  .tile { min-height: 0; }
}

/* The AX tile on the home page: copy on the left, the desk bleeding off the right. */
.tile-ax {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding-right: 0;
  min-height: 460px;
}
.tile-ax .copy { display: flex; flex-direction: column; gap: 14px; }
.tile-ax .desk {
  width: 128%;
  border-radius: clamp(10px, 1.4vw, 18px) 0 0 clamp(10px, 1.4vw, 18px);
}
@media (max-width: 960px) {
  .tile-ax { grid-template-columns: 1fr; padding-right: clamp(24px, 3vw, 40px); }
  .tile-ax .desk { width: 100%; border-radius: 12px; }
}

/* Office's four apps, side by side. */
.suite { display: flex; gap: 12px; margin-bottom: 10px; }
.suite .icon { --s: 56px; margin: 0; }

/* ─── Feature grid ─────────────────────────────────────────────────── */

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.feature {
  padding: 28px;
  border-radius: var(--r-l);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
  display: grid;
  align-content: start;
  gap: 10px;
}
.feature h3 { font-size: 19px; letter-spacing: -0.018em; line-height: 1.25; }
.feature p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.feature .tag {
  justify-self: start;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 8px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (max-width: 960px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }

/* Big statement split: text one side, a figure the other. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.split > .copy { display: grid; gap: 18px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* A list of short facts, used under product heroes. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-2);
}
.fact {
  padding: 26px 24px 26px 0;
  border-bottom: 1px solid var(--line-2);
  display: grid;
  gap: 6px;
}
.fact b {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.fact span { color: var(--ink-3); font-size: 14.5px; }

/* ─── The scroll scene: one desk, the light changes ────────────────── */

.scene { position: relative; }
.scene-pin {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-content: center;
}
.scene-captions { position: relative; display: grid; }
.scene-caption {
  grid-area: 1 / 1;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}
.scene-caption .body { max-width: 520px; }
.scene-steps { display: none; }

/* No script: the desk shows one light, the captions read as a list. */
html:not(.js) .scene-captions { gap: 36px; }
html:not(.js) .scene-caption { grid-area: auto; }
html:not(.js) .desk-wall + .desk-wall { display: none; }

/* With script: the section is tall, the desk pins, and each quarter of the
   scroll turns one wallpaper on and one caption in. Only opacity and
   transform change, on layers promoted before the first step. */
.js .scene { height: 400vh; }
.js .scene-pin {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  padding: 24px 0;
}
.js .scene-steps {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.js .scene-steps > i { display: block; height: 25%; }

.js .scene .desk-wall + .desk-wall {
  /* 0.001, not 0: a layer at zero opacity may never be rastered, and the
     first fade would then pay for raster and decode mid-move. */
  opacity: 0.001;
  will-change: opacity;
  transition: opacity var(--t4) var(--e-smooth);
}
.js .scene-caption {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
  transition: opacity var(--t4) var(--e-exit), transform var(--t4) var(--e-exit);
}
.js .scene[data-step='0'] .scene-caption:nth-child(1),
.js .scene[data-step='1'] .scene-caption:nth-child(2),
.js .scene[data-step='2'] .scene-caption:nth-child(3),
.js .scene[data-step='3'] .scene-caption:nth-child(4) {
  opacity: 1;
  transform: none;
  transition-timing-function: var(--e-entrance);
  transition-delay: 120ms;
}
.js .scene:not([data-step]) .scene-caption:nth-child(1) { opacity: 1; transform: none; }
.js .scene[data-step='1'] .desk-wall:nth-child(2),
.js .scene[data-step='2'] .desk-wall:nth-child(2),
.js .scene[data-step='2'] .desk-wall:nth-child(3),
.js .scene[data-step='3'] .desk-wall:nth-child(2),
.js .scene[data-step='3'] .desk-wall:nth-child(3),
.js .scene[data-step='3'] .desk-wall:nth-child(4) { opacity: 1; }

.scene .desk-frame { width: min(100%, calc((100svh - var(--nav-h) - 240px) * 16 / 9)); margin: 0 auto; }
html:not(.js) .scene .desk-frame { width: 100%; }

/* ─── Plans ────────────────────────────────────────────────────────── */

/* The yearly/monthly switch is two radio inputs and CSS: it works with no
   script, and it is a real control for keyboards and screen readers. */
.period-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  background: var(--control);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.period-switch label {
  position: relative;
  z-index: 1;
  padding: 9px 20px;
  min-width: 112px;
  text-align: center;
  font-size: 14px;
  font-weight: 620;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 999px;
}
.period-switch .thumb {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--ink);
  transition: transform var(--t3) var(--e-entrance);
}
.period-y:checked ~ * .period-switch .lab-y,
.period-m:checked ~ * .period-switch .lab-m,
.period-y:checked ~ .period-switch .lab-y,
.period-m:checked ~ .period-switch .lab-m { color: var(--on-ink); }
.period-m:checked ~ * .period-switch .thumb,
.period-m:checked ~ .period-switch .thumb { transform: translateX(100%); }
.period-y:focus-visible ~ * .period-switch,
.period-m:focus-visible ~ * .period-switch,
.period-y:focus-visible ~ .period-switch,
.period-m:focus-visible ~ .period-switch { outline: 2px solid var(--ink); outline-offset: 3px; }
.period-switch .save { color: inherit; opacity: 0.66; font-weight: 500; }

.period-y:checked ~ * .m, .period-y:checked ~ .m { display: none !important; }
.period-m:checked ~ * .y, .period-m:checked ~ .y { display: none !important; }

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 28px 28px;
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.plan.lit { box-shadow: inset 0 0 0 1px rgba(235, 235, 245, 0.32); background: #1f1f21; }
.plan-head { display: grid; gap: 6px; }
.plan-name { font-size: 24px; font-weight: 740; letter-spacing: -0.03em; }
.plan-note { font: 500 11.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.plan.lit .plan-note { color: var(--ink); }
.plan-pitch { color: var(--ink-2); font-size: 15px; min-height: 3.1em; }

.price { display: grid; gap: 6px; }
.price-big {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 44px;
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 1;
}
.price-big small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.price-sub { font-size: 13.5px; color: var(--ink-3); min-height: 2.6em; }

.plan .btn { width: 100%; }

.checks {
  margin: 4px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--line-2);
  display: grid;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.checks li::before {
  content: '';
  width: 14px; height: 14px;
  margin-top: 3px;
  background: currentColor;
  opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.checks li.lead { color: var(--ink); font-weight: 600; grid-template-columns: 1fr; }
.checks li.lead::before { display: none; }
.checks b { color: var(--ink); font-weight: 600; }

.plans-foot { margin-top: 28px; text-align: center; }

/* ─── Comparison table ─────────────────────────────────────────────── */

.compare-wrap {
  overflow-x: auto;
  border-radius: var(--r-l);
  box-shadow: inset 0 0 0 1px var(--line-2);
  background: var(--raise);
}
.compare {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.compare th, .compare td {
  padding: 15px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-2);
}
.compare thead th {
  position: sticky;
  top: 0;
  background: var(--raise);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.compare tbody th { font-weight: 500; color: var(--ink-2); width: 30%; }
.compare td { color: var(--ink); }
.compare td.no { color: var(--ink-4); }
.compare tr.group th {
  padding-top: 28px;
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.compare tr:last-child > * { border-bottom: 0; }

/* ─── Apps on their own (pricing) ──────────────────────────────────── */

.apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 860px) { .apps { grid-template-columns: 1fr; } }

.app-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 28px;
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.app-card-head { display: flex; align-items: center; gap: 16px; }
.app-card-head .icon, .app-card-head .plate { --s: 52px; }
.app-card-head h3 { font-size: 22px; letter-spacing: -0.025em; }
.app-card-head p { font-size: 14px; color: var(--ink-3); }

.tiers { display: grid; gap: 10px; }
.tier {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 16px 18px;
  border-radius: var(--r-m);
  background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.tier-name { font-weight: 680; letter-spacing: -0.01em; }
.tier-price { font-weight: 700; letter-spacing: -0.02em; text-align: right; white-space: nowrap; }
.tier-price small { font-weight: 500; color: var(--ink-3); font-size: 13px; }
.tier-what { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.tier-cta { grid-column: 1 / -1; margin-top: 8px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.in-ax {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.035);
}
.in-ax .plate { --s: 22px; font-size: 8.5px; }

/* ─── Downloads ────────────────────────────────────────────────────── */

.dl-list { display: grid; gap: 16px; }
.dl-product {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 440px);
  gap: 20px 28px;
  align-items: center;
  padding: 28px;
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.dl-product .icon, .dl-product .plate { --s: 64px; }
.dl-product h2 { font-size: 24px; letter-spacing: -0.028em; }
.dl-product .what { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
.dl-product .need { color: var(--ink-3); font-size: 13.5px; margin-top: 8px; }
.dl-product .need a { color: var(--ink-2); }
@media (max-width: 860px) {
  .dl-product { grid-template-columns: auto 1fr; }
  .dl-builds { grid-column: 1 / -1; }
}

.dl-builds { display: grid; gap: 10px; }
.dl {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-m);
  background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--line);
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--t1) var(--e-smooth);
}
.dl::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.05);
  opacity: 0;
  transition: opacity var(--t2) var(--e-smooth);
}
.dl:hover::before { opacity: 1; }
.dl:active { transform: scale(0.99); }
.dl svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
.dl-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dl-name { font-size: 14.5px; font-weight: 640; }
.dl-meta { font-size: 12.5px; color: var(--ink-3); }
.dl-tag { font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.dl.match { box-shadow: inset 0 0 0 1px rgba(235, 235, 245, 0.42); }
.dl.match .dl-tag { color: var(--ink); }
.dl.pending { pointer-events: none; opacity: 0.45; }

/* ─── Account band ─────────────────────────────────────────────────── */

.band {
  padding: clamp(40px, 6vw, 72px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 120% at 85% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
    var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* ─── Questions ────────────────────────────────────────────────────── */

.qa { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line-2); }
.qa details { border-bottom: 1px solid var(--line-2); }
.qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 620;
  letter-spacing: -0.012em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '+';
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-3);
  transition: transform var(--t3) var(--e-entrance);
}
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { padding: 0 0 22px; max-width: 680px; color: var(--ink-2); }
.qa details[open] p { animation: sheet-in var(--t3) var(--e-entrance) both; }

/* ─── Footer ───────────────────────────────────────────────────────── */

.foot {
  margin-top: clamp(64px, 8vw, 120px);
  padding: 56px 0 40px;
  border-top: 1px solid var(--line-2);
  font-size: 13.5px;
  color: var(--ink-3);
}
.foot-cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
}
.foot h2 {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
}
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.foot a { text-decoration: none; color: var(--ink-3); }
.foot a:hover { color: var(--ink); }
.foot .brand { color: var(--ink); margin-bottom: 12px; }
.foot-base {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 760px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-cols > :first-child { grid-column: 1 / -1; } }

/* ─── Scroll-driven motion (compositor only) ───────────────────────── */

/* Where the browser can drive animations from scroll, it does so on the
   compositor: the main thread is never asked for a frame. Where it cannot,
   nothing moves and nothing is hidden. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 70%;
    }
    .rise {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    /* The AX scene's desk is sticky, and a sticky element's own view
       progress stalls while it is pinned; it rises on its section's entry. */
    .scene { view-timeline: --scene block; }
    .scene .rise {
      animation-timeline: --scene;
      animation-range: entry 0% entry 55%;
    }
    .recede {
      animation: recede linear both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }
  }

  .float { animation: float 7s ease-in-out infinite alternate; }
  .float:nth-child(2) { animation-delay: -1.6s; animation-duration: 8s; }
  .float:nth-child(3) { animation-delay: -3.1s; animation-duration: 6.5s; }
  .float:nth-child(4) { animation-delay: -4.4s; animation-duration: 7.5s; }
  .float:nth-child(5) { animation-delay: -2.2s; animation-duration: 8.5s; }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0.4; transform: translateY(48px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes recede {
  to { opacity: 0; transform: translateY(-40px) scale(0.97); }
}
@keyframes float {
  from { transform: translateY(-5px); }
  to { transform: translateY(5px); }
}

/* Reduced motion is instant: no transition is slowed, every one is removed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Home hero: the five products, breathing ──────────────────────── */

.hero-icons {
  --s: clamp(50px, 13vw, 76px);
  display: flex;
  justify-content: center;
  gap: clamp(12px, 3vw, 28px);
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.hero-icons li { display: grid; }
/* Office is four apps: shown the way a folder of four looks on the desk. */
.office-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--s) * 0.06);
  width: var(--s);
  height: var(--s);
}
.office-stack img { width: 100%; height: 100%; }

.in-ax b { color: var(--ink); font-weight: 620; }
.ax-hero-mark { font-size: clamp(120px, 24vw, 260px); margin-bottom: 4px; }

/* Product pages: one large mark over the name. */
.product-mark { --s: clamp(96px, 14vw, 132px); margin-bottom: 8px; }
.product-mark.office-stack { gap: calc(var(--s) * 0.06); }
.feature.wide { grid-column: span 2; }
@media (max-width: 620px) { .feature.wide { grid-column: auto; } }
.steps { margin: 0; padding: 0; list-style: none; }

.period-switch label { white-space: nowrap; }
@media (max-width: 480px) { .period-switch .save { display: none; } .period-switch label { min-width: 96px; } }
.plans-foot { max-width: 760px; margin-left: auto; margin-right: auto; }
.hero-copy .display + .lede, .hero-copy .headline + .lede { margin-top: 6px; }