/* ========================================
   Desmaptic — style.css
   Dark premium, asymmetric, code aesthetic
   ======================================== */

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

:root {
  --bg: #000000;
  --bg-elevated: #0A0A10;
  --bg-card: #0E0E16;
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --text-primary: #F0F0F0;
  --text-secondary: #7A7A82;
  /* Small quiet labels (footer, marquee, captions): 6.4:1 on black. The animated glow behind the page lightens the background up to about rgb(12, 49, 62), where this gray falls to 4.2:1: small text that can sit there has a dark backing (marquee, chat bubble) or a lighter color (.ww-foot) */
  --text-tertiary: #8E8E96;
  --accent: #3B82F6;
  --accent-dim: #2563EB;
  --accent-glow: rgba(59, 130, 246, 0.25);
  --accent-subtle: rgba(59, 130, 246, 0.07);
  --green: #34D399;
  --warn: #FBBF24;
  --phone-screen: #0D0D0D;
  --mono: 'SF Mono', ui-monospace, 'Menlo', 'Consolas', monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  /* `clip`, not `hidden`: with `hidden` (and html also non-visible) body becomes
     its own scroll container, which breaks position: sticky (docs TOC). */
  overflow-x: clip;
}

/* Grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

/* ---------- Utility ---------- */
.label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.label::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--accent);
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.nav-logo img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  transition: color 0.2s;
}

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

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: var(--text-primary);
  color: var(--bg);
  border-radius: 6px;
  transition: opacity 0.2s;
}

.nav-cta:hover { opacity: 0.85; }
.nav-links .nav-cta,
.nav-links .nav-cta:hover { color: var(--bg); }

/* Download buttons: one label on a Mac, another on a phone or tablet (html.handheld, set before the first paint) */
html:not(.handheld) .only-handheld,
html.handheld .only-mac { display: none; }

/* ---------- Hero ---------- */
.hero {
  padding: 160px 0 60px;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Animated background canvas — matches iOS Cosmos theme */
#cosmos-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(80px) saturate(1.15);
  will-change: filter;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 560px;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 6.4vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-bottom: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #a8a8b4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero h1 .accent {
  background: linear-gradient(135deg, #bf5af2 0%, #64d2ff 50%, #30d158 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 700;
  padding-right: 0.04em;
}

/* A headline that says what the product is and what sets it apart (/next/): longer than a slogan, so smaller type */
.hero h1.hero-pitch {
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.hero-subtitle {
  font-family: var(--display);
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  color: #c8c8d0;
  max-width: 540px;
  line-height: 1.45;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin-bottom: 44px;
}

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

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  background: #ffffff;
  color: #0a0a0e;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 8px 24px -6px rgba(255, 255, 255, 0.2);
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 50%);
  pointer-events: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 16px 32px -8px rgba(255, 255, 255, 0.25);
}

.btn-primary svg { width: 18px; height: 18px; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.25s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

/* An app that is not out yet: a quiet note next to the buttons, not a button (no link, no badge look) */
.soon-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 8px;
  color: var(--text-secondary);
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.soon-tag {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Trust line under the agent's download button: Free · version · size · macOS · notarization.
   Version and size are hidden until assets/agent-download.js reads them from the latest release. */
.trust-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  margin-top: 18px;
  color: var(--text-secondary);
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

.trust-line > span { white-space: nowrap; }

.trust-line > span + span::before {
  content: '·';
  margin: 0 7px;
  color: var(--text-tertiary);
}

.trust-line a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}

.trust-line a:hover { text-decoration-color: currentColor; }

/* Inside .hero-actions / .cta-actions: a row of its own under the buttons; on a narrow screen, right under the button */
.hero-actions .trust-line,
.cta-actions .trust-line,
.changelog-actions .trust-line {
  width: 100%;
  margin-top: 2px;
}

.cta-section .trust-line {
  justify-content: center;
  margin-bottom: 0;
  font-size: 0.8125rem;
}

/* Hero visual */
.hero-visual {
  display: flex;
  justify-content: center;
  position: relative;
}

/* /next/: the deck on iPad and iPhone in Apple's product bezels (.hero-duo). Apple's marketing rules for its
   devices: whole, upright, unchanged (no shadow, reflection or highlight on them), no overlap, no motion but a
   fade, at least 200 px on screen — so side by side, bottom-aligned, at their real relative size (the iPhone 76%
   of the iPad's height), a still aura behind and no hover; on a phone one under the other.
   At every width the text is centered on top and the pair under it, wider than the container (up to 1320px,
   24px from the window's edges, 16px ≤768px), so the buttons' labels read without zooming in. */
.hero-duo {
  min-height: auto;
  padding: 120px 0 72px;
}

/* Two classes, so it beats `.hero .container` (1fr) of the ≤1024px block: a 1fr track takes the devices' fixed
   width as its minimum and pushes the container past the window */
.hero.hero-duo .container {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 48px;
  text-align: center;
}

.hero-duo .hero-content { max-width: 920px; }
.hero-duo .hero-subtitle { max-width: 640px; margin: 0 auto 36px; }
.hero-duo .hero-actions,
.hero-duo .trust-line { justify-content: center; }

.hero-duo .hero-visual { width: min(1320px, 100vw - 48px); }

.hero-devices {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.hero-devices::before {
  content: '';
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0));
  pointer-events: none;
}

.hero-devices img { height: auto; }

.hero-ipad { width: 75%; }
.hero-iphone { width: 21.5%; }

/* ---------- Marquee ---------- */
.marquee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  /* Tones the glow down behind the labels, so they keep 4.5:1 wherever the glow is */
  background: rgba(0, 0, 0, 0.4);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  gap: 48px;
  animation: scroll 30s linear infinite;
  width: max-content;
}

.marquee-item {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
}

.marquee-item::before {
  content: '◆';
  font-size: 0.4rem;
  color: var(--accent);
  opacity: 0.5;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Features — Bento Grid ---------- */
.features {
  padding: 140px 0;
}

.features-header {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 72px;
  align-items: end;
}

.features-header h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #ffffff 0%, #b8b8c2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The second line of the header: quieter than the first, still readable (not tertiary) */
.features-header h2 .features-sub {
  -webkit-text-fill-color: var(--text-secondary);
}

.features-header p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 420px;
  justify-self: end;
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 14px;
}

.bento-card {
  --card-tint: 59, 130, 246;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(var(--card-tint), 0.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(20, 20, 30, 0.85) 0%, rgba(10, 10, 18, 0.85) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
}

.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(var(--card-tint), 0.35), rgba(255, 255, 255, 0.02) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.4s;
}

.bento-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -20px rgba(var(--card-tint), 0.35);
}

.bento-card:hover::before {
  opacity: 1;
}

/* Card glow on hover */
.bento-card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s;
  background: radial-gradient(500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(var(--card-tint), 0.18), transparent 45%);
  pointer-events: none;
}

.bento-card:hover::after {
  opacity: 1;
}

/* Per-card accents */
.bento-card:nth-child(1) { --card-tint: 94, 92, 230; }   /* indigo — Buttons that ask, the colour of Task for an Agent… */
.bento-card:nth-child(2) { --card-tint: 255, 159, 10; }  /* orange — Pages that follow apps */
.bento-card:nth-child(3) { --card-tint: 255, 69, 58; }   /* red — a failed tap */
.bento-card:nth-child(4) { --card-tint: 100, 210, 255; } /* cyan — large screens */

.bento-card.span-8 { grid-column: span 8; }
.bento-card.span-4 { grid-column: span 4; }
.bento-card.span-7 { grid-column: span 7; }
.bento-card.span-5 { grid-column: span 5; }
.bento-card.span-12 { grid-column: span 12; }

.bento-card h3 {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 12px;
  letter-spacing: -0.025em;
  padding-right: 24px; /* clear of the card number */
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #ffffff 0%, #d8d8e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bento-card p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.bento-card p strong {
  color: var(--text-primary);
  font-weight: 600;
}

.bento-card .card-number {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--mono);
  font-size: 0.625rem;
  color: rgba(var(--card-tint), 0.7);
  letter-spacing: 0.05em;
  z-index: 1;
}

/* Every card: the text, then a render of the app at the bottom (bottoms level across a row) */
.bento-card {
  display: flex;
  flex-direction: column;
}

.feature-shot {
  display: block;
  width: 100%;
  height: auto;
  margin-top: auto;
  border-radius: 14px;
  background: var(--phone-screen);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 48px -24px rgba(0, 0, 0, 0.9);
  position: relative;
  z-index: 1;
}

/* Buttons that ask: the headline left, the words right, the iPad's bubble across the card below */
.card-ask-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 48px;
  margin-bottom: 32px;
}

.bento-card.card-ask h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  margin-bottom: 0;
}

.card-ask-text p + p { margin-top: 12px; }
.card-ask-text .ai-more { position: relative; z-index: 1; }
.card-ask picture { margin-top: auto; }

/* A failed tap: the picture fills the rest of the card */
.card-toast p { margin-bottom: 24px; }

/* Pages card: the same deck with Figma in front, then Xcode — the top bar and first row of each page */
.page-flip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 24px;
  position: relative;
  z-index: 1;
}

.page-flip figure { margin: 0; }

.page-flip img,
.card-ipad-screen,
.for-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--phone-screen);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 48px -24px rgba(0, 0, 0, 0.9);
}

.page-flip figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.page-flip-arrow {
  font-family: var(--mono);
  color: rgb(var(--card-tint));
  margin-top: -22px; /* level with the pictures, not with picture + caption */
}

/* iPad card: the text left, the iPad's screen right — the screen alone, no Apple bezel */
.bento-card.card-ipad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 48px;
  align-items: center;
  padding-top: 56px; /* the card number above the picture, not on it */
}

.card-ipad-text p + p { margin-top: 12px; }

.card-ipad-screen {
  border-radius: 18px;
  position: relative;
  z-index: 1;
}

/* ---------- AI (/next/) — the review card, what you say and get, the promise ---------- */
.ai {
  padding: 120px 0;
  position: relative;
}

.ai-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  grid-template-areas:
    "head card"
    "body card";
  grid-template-rows: auto 1fr;
  column-gap: 96px;
  row-gap: 40px;
  align-items: start;
}

.ai-head { grid-area: head; }
.ai-card { grid-area: card; }
.ai-body { grid-area: body; }

.ai-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #b8b8c2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}

.ai-head h2 em {
  font-family: 'New York', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  padding-right: 0.04em;
  background: linear-gradient(135deg, #bf5af2 0%, #64d2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-head p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 560px;
}

.ai-head b, .ai-promise b { color: var(--text-primary); font-weight: 500; }

/* The review card in Apple's bezel: as in the hero — no shadow or anything over the device, a fade without
   movement (.reveal-fade), a still aura behind, never under 200 px */
.ai-card {
  position: relative;
  isolation: isolate;
  margin: 0;
  width: 100%;
  justify-self: center;
}

.ai-card::before {
  content: '';
  position: absolute;
  inset: -10% -30%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0));
  pointer-events: none;
}

.ai-card img {
  display: block;
  width: 100%;
  height: auto;
}

.ai-card figcaption {
  margin-top: 18px;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.reveal.reveal-fade { transform: none; }

/* You say → you get */
.ai-asks {
  margin: 0;
  border-top: 1px solid var(--border);
}

.ai-ask {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 32px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.ai-ask dt {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--text-primary);
}

.ai-ask dd {
  position: relative;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.ai-ask dd::before {
  content: '→';
  position: absolute;
  left: -24px;
  color: var(--accent);
}

.ai-promise {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  padding: 20px 22px;
  background: rgba(14, 14, 22, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.ai-promise > svg {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.ai-promise p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ai-promise p + p { margin-top: 6px; }

.ai-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
}

.ai-more::after { content: '→'; transition: transform 0.2s; }
.ai-more:hover::after { transform: translateX(3px); }

.ai-works {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.ai-works-label {
  margin-right: 4px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.compat-item {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

/* Claude Code waiting for an answer: one live button (assets/js/live-widgets.js) on a patch of phone screen */
.ai-wait {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 72px;
  padding: 22px 28px 22px 22px;
  background: rgba(14, 14, 22, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.ai-wait-face {
  flex: none;
  width: 108px;
  padding: 14px;
  background: var(--phone-screen);
  border: 1px solid var(--border);
  border-radius: 26px;
}

.ai-wait-face .ww-slot { width: 100%; }

.ai-wait-text { flex: 1; }

.ai-wait h3 {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.ai-wait p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 620px;
}

.ai-wait .ai-more { flex: none; margin-top: 0; }

@media (max-width: 1024px) {
  .ai-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "card" "body";
    grid-template-rows: none;
    row-gap: 48px;
  }
  .ai-card { max-width: 300px; }
}

@media (max-width: 768px) {
  .ai { padding: 100px 0; }
  .ai-wait { flex-wrap: wrap; margin-top: 56px; }
  .ai-wait-text { flex-basis: calc(100% - 136px); }
  .ai-wait .ai-more { margin-left: 136px; }
}

/* Narrow: the answer under the ask, its arrow in front */
@media (max-width: 560px) {
  .ai-ask { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ai-ask dd { padding-left: 22px; }
  .ai-ask dd::before { left: 0; }
  .ai-card { max-width: 260px; }
  .ai-wait { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; }
  .ai-wait-text { flex-basis: auto; }
  .ai-wait .ai-more { margin-left: 0; }
}

/* ---------- Plugin (/next/) — Claude Code and Codex: what the plugin gives, its install lines with Copy ---------- */
.plugin {
  padding: 120px 0;
  border-top: 1px solid var(--border);
  position: relative;
}

.plug-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 72px;
  row-gap: 48px;
  align-items: center;
}

.plug-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #b8b8c2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}

.plug-head h2 em {
  font-family: 'New York', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  padding-right: 0.04em;
  background: linear-gradient(135deg, #bf5af2 0%, #64d2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.plug-head > p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 520px;
}

.plug-head b { color: var(--text-primary); font-weight: 500; }

.plug-points {
  list-style: none;
  margin-top: 28px;
  border-top: 1px solid var(--border);
}

.plug-points li {
  position: relative;
  padding: 14px 0 14px 24px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.plug-points li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
}

.plug-points code {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-primary);
}

/* The install lines: the docs' code-block look and its Copy button (.code-copy) */
.plug-install { min-width: 0; }

.plug-cmd {
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  background: rgba(14, 14, 22, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}

.plug-cmd + .plug-cmd { margin-top: 16px; }

.plug-cmd-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 6px 4px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
}

.plug-cmd-title {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.plug-cmd pre {
  margin: 0;
  padding: 16px 18px 18px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #D4D4D8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* One command per line; where a narrow screen wraps it, the rest hangs indented, so it still reads as one command */
.plug-line {
  display: block;
  padding-left: 2ch;
  text-indent: -2ch;
}

.plug-nb { white-space: nowrap; }   /* never break a line at the hyphen of "--marketplace" or "desmaptic-plugin" */

.plug-note {
  margin-top: 16px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.plug-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 28px;
  margin-top: 8px;
}

@media (max-width: 1024px) {
  .plug-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .plugin { padding: 100px 0; }
}

@media (max-width: 560px) {
  .plug-cmd pre { font-size: 0.75rem; padding: 14px 16px 16px; }
  .plug-links { flex-direction: column; }
}

/* ---------- How It Works — horizontal ---------- */
.how-it-works {
  padding: 140px 0;
  border-top: 1px solid var(--border);
  position: relative;
}

.how-header {
  text-align: center;
  margin-bottom: 80px;
}

.how-header h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #b8b8c2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.how-header h2 span {
  background: linear-gradient(135deg, #bf5af2 0%, #64d2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.how-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  position: relative;
}

.step {
  --step-tint: 88, 86, 214;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(var(--step-tint), 0.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(20, 20, 30, 0.85) 0%, rgba(10, 10, 18, 0.85) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  padding: 44px 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s, box-shadow 0.4s;
}

.step::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(var(--step-tint), 0.4), rgba(255, 255, 255, 0.02) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.65;
  transition: opacity 0.4s;
}

.step:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -20px rgba(var(--step-tint), 0.4);
}

.step:hover::before { opacity: 1; }

.step:nth-child(1) { --step-tint: 191, 90, 242; }   /* purple */
.step:nth-child(2) { --step-tint: 100, 210, 255; }  /* cyan */
.step:nth-child(3) { --step-tint: 48, 209, 88; }    /* green */

.step-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(var(--step-tint), 0.35) 0%, rgba(var(--step-tint), 0.12) 100%);
  border: 1px solid rgba(var(--step-tint), 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 12px 32px -8px rgba(var(--step-tint), 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  color: rgb(var(--step-tint));
  position: relative;
  z-index: 1;
}

.step-icon svg { width: 30px; height: 30px; }

.step-number {
  position: absolute;
  top: 28px;
  right: 32px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: rgba(var(--step-tint), 0.7);
  z-index: 1;
}

.step h3 {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: -0.025em;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #ffffff 0%, #d8d8e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.step p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* ---------- FAQ (/next/) — heading on the left, the questions as <details> on the right ---------- */
.faq {
  padding: 140px 0;
  border-top: 1px solid var(--border);
  position: relative;
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}

/* The heading stays in view while the answers scroll past */
.faq-head {
  position: sticky;
  top: 104px;
}

.faq-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}

.faq-head h2 span { display: block; color: var(--text-tertiary); }

.faq-head p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 360px;
}

.faq-head p a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-hover);
  transition: border-color 0.2s;
}

.faq-head p a:hover { border-color: var(--text-primary); }

.faq-list { border-top: 1px solid var(--border); }

.faq-item { border-bottom: 1px solid var(--border); }

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text-primary);
}

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

/* A plus that turns into a cross when the answer is open */
.faq-item summary::after {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--text-secondary);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s;
}

.faq-item summary:hover::after { color: var(--text-primary); }
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent); }

.faq-answer {
  padding: 0 48px 28px 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.faq-answer p + p { margin-top: 12px; }
.faq-answer b { color: var(--text-primary); font-weight: 500; }

.faq-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 16px 20px 0 0;
  font-size: 0.875rem;
  color: var(--accent);
}

.faq-more::after { content: '→'; transition: transform 0.2s; }
.faq-more:hover::after { transform: translateX(3px); }

@media (max-width: 1024px) {
  .faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .faq-head { position: static; }
}

@media (max-width: 768px) {
  .faq { padding: 100px 0; }
  .faq-item summary { font-size: 1rem; padding: 20px 0; }
  .faq-answer { padding-right: 0; }
}

/* ---------- CTA ---------- */
.cta-section {
  padding: 120px 0;
  text-align: center;
  position: relative;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(120, 50, 180, 0.15), rgba(40, 100, 220, 0.08), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

.cta-section h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
  position: relative;
}

.cta-section p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 36px;
  position: relative;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
}

.footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.footer-logo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.footer-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.footer-links a {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  transition: color 0.2s;
}

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

.footer-right {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

/* ---------- Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Screenshot mode — force every reveal to its final state instantly */
.ss-mode .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger > .reveal:nth-child(2) { transition-delay: 100ms; }
.stagger > .reveal:nth-child(3) { transition-delay: 200ms; }
.stagger > .reveal:nth-child(4) { transition-delay: 300ms; }
.stagger > .reveal:nth-child(5) { transition-delay: 400ms; }
.stagger > .reveal:nth-child(6) { transition-delay: 500ms; }

/* Hero stagger */
.hero h1      { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.25s both; }
.hero-subtitle{ animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.4s both; }
.hero-actions { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.5s both; }
.hero-visual  { animation: fadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.6s both; }
.hero-duo .hero-visual { animation-name: fadeIn; }  /* Apple's devices: a fade, no movement */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Legal ---------- */
.legal {
  padding: 140px 0 80px;
  max-width: 680px;
  margin: 0 auto;
}

.legal h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -0.035em;
  margin-bottom: 8px;
}

.legal .legal-updated {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 48px;
  display: block;
}

.legal h2 {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 12px;
  scroll-margin-top: 88px;   /* a link to a section (/terms#subscriptions) lands below the fixed nav */
}

.legal p, .legal li {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.75;
  margin-bottom: 12px;
}

.legal ul { padding-left: 20px; margin-bottom: 16px; }

.legal a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Changelog (/changelog/) ---------- */
/* .changelog.container: beats the later `.container { padding }` of the narrow layouts */
.changelog.container {
  padding: 140px 32px 96px;
  max-width: 944px;
  margin: 0 auto;
}

.changelog-head { margin-bottom: 64px; }

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

.changelog-head h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
}

.changelog-lede {
  max-width: 580px;
  color: #c8c8d0;
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin-bottom: 32px;
}

.releases { list-style: none; }

/* One release: version and date on the left, what changed on the right */
.release {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 80px;
}

.release-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.release-version {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.release-version a:hover { color: var(--accent); }

.release-date {
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* "Latest" appears on the entry of the newest GitHub release (assets/agent-download.js adds .is-latest) */
.release-latest {
  display: none;
  padding: 3px 9px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 999px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.release.is-latest .release-latest { display: inline-block; }

.release-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

/* Who the changes are for: the iPhone & iPad app, the Mac agent (they share one version) */
.release-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 6px;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.release-title + .release-group { margin-top: 0; }

.release-changes { list-style: none; }

.release-changes li {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  color: #c8c8d0;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.release-changes code {
  font-family: var(--mono);
  font-size: 0.8125em;
  color: var(--text-primary);
}

/* What kind of change: New (accent), Improved (neutral), Fixed (green) */
.change-kind {
  justify-self: start;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.change-kind.is-new { color: var(--accent); border-color: rgba(59, 130, 246, 0.4); }
.change-kind.is-fixed { color: var(--green); border-color: rgba(52, 211, 153, 0.35); }

@media (max-width: 768px) {
  .changelog.container { padding: 120px 20px 72px; }
  .changelog-head { margin-bottom: 40px; }
  .release { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .release-meta { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
}

@media (max-width: 480px) {
  .release-changes li { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Press kit (/next/press/) ---------- */
/* Same frame as the changelog: a head, then sections divided by a hairline, title on the left at full width */
.press.container {
  padding: 140px 32px 96px;
  max-width: 1080px;
  margin: 0 auto;
}

.press-head { margin-bottom: 56px; }

.press-head h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
}

.press-lede {
  max-width: 600px;
  color: #c8c8d0;
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin-bottom: 32px;
}

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

.press-zip-meta,
.press-group span,
.press-shot figcaption span {
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.press-contact {
  margin-top: 24px;
  color: var(--text-tertiary);
  font-size: 0.9375rem;
}

.press-contact a,
.press-note a,
.press-links a { color: var(--text-primary); border-bottom: 1px solid rgba(255, 255, 255, 0.2); transition: border-color 0.2s, color 0.2s; }
.press-contact a:hover,
.press-note a:hover,
.press-links a:hover { color: var(--accent); border-color: var(--accent); }

.press-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  list-style: none;
}

.press-toc a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--border-hover);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s;
}

.press-toc a:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.3); }

.press-section {
  padding: 44px 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 64px;
}

.press-section h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}

.press-note {
  max-width: 640px;
  margin: -8px 0 24px;
  color: var(--text-tertiary);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.press-section b { color: var(--text-primary); font-weight: 600; }

/* Facts: the name of the fact on the left, the fact on the right */
.press-facts > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.press-facts > div:first-child { border-top: none; padding-top: 0; }

.press-facts dt {
  padding-top: 3px;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.press-facts dd {
  max-width: 680px;
  color: #c8c8d0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.press-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* Descriptions: one card per length, Copy in its corner */
.press-texts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.press-text {
  padding: 20px 22px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* One line and 25 words side by side; 50 and 150 words at full width */
.press-text:nth-child(n + 3) { grid-column: 1 / -1; }

.press-text header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.press-text h3 {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.press-copy {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--border-hover);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.press-copy:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.3); }
.press-copy.is-done { color: var(--green); border-color: rgba(52, 211, 153, 0.35); }

.press-text-body p {
  color: #c8c8d0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.press-text-body p + p { margin-top: 12px; }

/* What sets it apart */
.press-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  counter-reset: press-point;
}

.press-points li {
  counter-increment: press-point;
  padding: 20px 22px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: #c8c8d0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.press-points li::before {
  content: "0" counter(press-point);
  display: block;
  margin-bottom: 10px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

.press-points li > b:first-child { display: block; margin-bottom: 6px; font-family: var(--display); font-size: 1.0625rem; letter-spacing: -0.015em; line-height: 1.35; }

/* Short FAQ: questions open, no folding — it's four of them */
.press-faq { max-width: 720px; }

.press-faq dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}

.press-faq dd {
  margin: 6px 0 22px;
  color: #c8c8d0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.press-faq dd:last-child { margin-bottom: 0; }

/* Pictures: previews link to the full PNGs; no device frames — a radius, a ring and a shadow */
.press-group {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 36px 0 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}

.press-note + .press-group { margin-top: 8px; }

.press-shots { display: grid; gap: 20px 16px; }
.press-shots-phone { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.press-shots-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.press-shots-icon { grid-template-columns: 160px; }

.press-shot a {
  display: block;
  border-radius: 14px;
  outline-offset: 3px;
}

.press-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 18px 40px -16px rgba(0, 0, 0, 0.9);
  transition: transform 0.25s, box-shadow 0.25s;
}

.press-shots-phone .press-shot img { border-radius: 18px; }
.press-shot-window img { border-radius: 10px; }
.press-shot-icon img { border-radius: 0; box-shadow: none; }

.press-shot a:hover img {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 22px 44px -16px rgba(0, 0, 0, 0.9);
}

.press-shot-icon a:hover img { box-shadow: none; }

.press-shot figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 8px;
  margin-top: 10px;
  color: #c8c8d0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.press-legal p {
  max-width: 720px;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .press-shots-phone { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .press-shots-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .press-points { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .press.container { padding: 120px 20px 72px; }
  .press-head { margin-bottom: 40px; }
  .press-section { padding: 36px 0; }
  .press-facts > div { grid-template-columns: 1fr; gap: 6px; }
  .press-texts { grid-template-columns: 1fr; }
  .press-shots-phone { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .press-shots-wide { grid-template-columns: 1fr; }
  .press-shots-icon { grid-template-columns: 120px; }
}

/* ---------- Security page (/security/) ---------- */
/* The press kit's frame: a head with section pills, then sections divided by a hairline; prose stays at reading width */
.sec.container {
  padding: 140px 32px 96px;
  max-width: 1080px;
  margin: 0 auto;
}

.sec-head { margin-bottom: 56px; }

.sec-head h1 {
  max-width: 820px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
}

.sec-lede {
  max-width: 640px;
  color: #c8c8d0;
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.sec-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  list-style: none;
}

.sec-toc a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--border-hover);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s;
}

.sec-toc a:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.3); }

.sec-section {
  padding: 44px 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 64px;
}

.sec-section h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}

.sec-section h3 {
  margin: 36px 0 12px;
  color: var(--text-primary);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
  scroll-margin-top: 80px;
}

.sec-section p,
.sec-list li {
  max-width: 680px;
  color: #c8c8d0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.sec-section p + p { margin-top: 12px; }

.sec-section .sec-note {
  max-width: 640px;
  margin: -8px 0 24px;
  color: var(--text-tertiary);
  line-height: 1.55;
}

.sec-section b { color: var(--text-primary); font-weight: 600; }

.sec-section p a,
.sec-list a { color: var(--text-primary); border-bottom: 1px solid rgba(255, 255, 255, 0.2); transition: border-color 0.2s, color 0.2s; }
.sec-section p a:hover,
.sec-list a:hover { color: var(--accent); border-color: var(--accent); }

.sec-section code {
  font-family: var(--mono);
  font-size: 0.8125em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: #C9D1D9;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* In short: the agent's four points, each with a link to its section; the AI's three groups below */
.sec-promises {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
}

.sec-ai {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
  list-style: none;
}

.sec-promises li,
.sec-ai li {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.sec-promises svg,
.sec-ai svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-bottom: 14px;
  color: var(--accent);
}

.sec-ai svg { color: var(--text-secondary); }
.sec-ai .is-accent svg { color: var(--accent); }

.sec-promises b,
.sec-ai b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.sec-promises p,
.sec-ai p { max-width: none; }

.sec-promises p { flex: 1; }

.sec-ai p + p {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.sec-more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 500;
}

.sec-more::after { content: '→'; transition: transform 0.2s; }
.sec-more:hover::after { transform: translateX(3px); }

/* Steps of pairing: numbers in rings; the lists: a quiet dot */
.sec-steps {
  display: grid;
  gap: 14px;
  max-width: 680px;
  margin: 20px 0 24px;
  list-style: none;
  counter-reset: sec-step;
}

.sec-steps li {
  position: relative;
  padding-left: 40px;
  counter-increment: sec-step;
  color: #c8c8d0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.sec-steps li::before {
  content: counter(sec-step);
  position: absolute;
  top: -1px;
  left: 0;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(59, 130, 246, 0.5);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 24px;
  text-align: center;
}

.sec-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  list-style: none;
}

.sec-list li {
  position: relative;
  padding-left: 18px;
}

.sec-list li::before {
  content: '';
  position: absolute;
  top: 0.7em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-secondary);
}

.sec-list + p,
.sec-quote + p { margin-top: 16px; }

.sec-quote {
  max-width: 640px;
  margin: 16px 0;
  padding-left: 16px;
  border-left: 2px solid var(--border-hover);
  color: var(--text-primary);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* A text with its phone picture on the right; the picture links to the full PNG */
.sec-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 56px;
  align-items: start;
}

.sec-shot { margin: 0; }

.sec-shot a {
  display: block;
  border-radius: 18px;
  outline-offset: 3px;
}

.sec-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 18px 40px -16px rgba(0, 0, 0, 0.9);
  transition: transform 0.25s, box-shadow 0.25s;
}

.sec-shot a:hover img {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 22px 44px -16px rgba(0, 0, 0, 0.9);
}

.sec-shot figcaption {
  margin-top: 10px;
  color: #c8c8d0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* For developers: the press kit's facts, the subject on the left */
.sec-spec > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.sec-spec > div:first-child { border-top: none; padding-top: 0; }

.sec-spec dt {
  padding-top: 3px;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sec-spec dd {
  max-width: 680px;
  color: #c8c8d0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.sec-section .sec-docs { margin-top: 32px; }

@media (max-width: 1024px) {
  .sec-ai { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .sec.container { padding: 120px 20px 72px; }
  .sec-head { margin-bottom: 40px; }
  .sec-section { padding: 36px 0; }
  .sec-promises { grid-template-columns: 1fr; }
  .sec-split { grid-template-columns: 1fr; gap: 28px; }
  .sec-shot { width: 100%; max-width: 240px; margin: 0 auto; }
  .sec-spec > div { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Docs ----------
   docs.html + assets/docs/docs.js. Markdown conventions: DESIGN.md › Docs.
   Columns: page list | content (≤ 760 px) | "On this page" rail (≥ 1200 px). */
.docs-body {
  padding-top: 56px;
}

.docs-body [hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.docs-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 760px) 200px;
  justify-content: center;
  gap: 48px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 32px 96px;
  position: relative;
  z-index: 1;
}

.docs-main {
  min-width: 0;
  outline: none;
  transition: opacity 0.2s;
}

.docs-main.is-loading { opacity: 0.55; }

/* Page list (left) */
.docs-nav { min-width: 0; }

.docs-nav-inner {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 10px 24px 0;
}

.docs-nav-inner::-webkit-scrollbar,
.docs-rail-inner::-webkit-scrollbar { width: 6px; }
.docs-nav-inner::-webkit-scrollbar-thumb,
.docs-rail-inner::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

.docs-nav-head { display: none; }

.docs-nav-group + .docs-nav-group { margin-top: 24px; }

.docs-nav-group-label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6A6A72;
  margin: 0 0 8px 10px;
}

.docs-nav-group ul { list-style: none; }

.docs-nav-page {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-secondary);
  transition: color 0.15s, background 0.15s;
}

.docs-nav-page:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.035);
}

.docs-nav-page[aria-current="page"] {
  color: var(--text-primary);
  font-weight: 500;
  background: var(--accent-subtle);
  box-shadow: inset 2px 0 0 var(--accent);
}

.docs-nav-group .docs-toc-list { margin: 6px 0 10px 10px; }
.docs-nav-group .docs-toc-list ul { display: none; }

.docs-nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  cursor: pointer;
}

/* "On this page" (rail, dropdown and the mobile panel share these) */
.docs-toc-label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.docs-toc-label::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--accent);
}

.docs-toc-list,
.docs-toc-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-toc-list > li { margin-bottom: 2px; }

.docs-toc-list a {
  display: block;
  padding: 5px 0 5px 14px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-secondary);
  border-left: 1px solid var(--border);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.docs-toc-list a:hover {
  color: var(--text-primary);
  border-left-color: var(--border-hover);
}

.docs-toc-list a.active {
  color: var(--text-primary);
  border-left-color: var(--accent);
  background: linear-gradient(90deg, var(--accent-subtle), transparent 60%);
}

.docs-toc-list ul { margin: 2px 0 6px; }

.docs-toc-list ul a {
  padding-left: 26px;
  font-size: 0.75rem;
  color: #6A6A72;
}

.docs-toc-list ul a:hover { color: var(--text-secondary); }
.docs-toc-list ul a.active { color: var(--text-primary); }

.docs-rail { min-width: 0; }

.docs-rail-inner {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.docs-otp-dropdown {
  display: none;
  margin: 0 0 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(14, 14, 22, 0.6);
}

.docs-otp-dropdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}

.docs-otp-dropdown summary::-webkit-details-marker { display: none; }
.docs-otp-dropdown summary::after { content: '▾'; transition: transform 0.2s; }
.docs-otp-dropdown[open] summary::after { transform: rotate(180deg); }
.docs-otp-dropdown[open] summary { color: var(--text-primary); }

.docs-otp-dropdown .docs-toc-list {
  max-height: 50vh;
  overflow-y: auto;
  padding: 0 14px 12px;
}

/* Page header */
.docs-page-head { margin-bottom: 32px; }

.docs-eyebrow {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.docs-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent);
}

.docs-page-head h1 {
  color: var(--text-primary);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0 0 18px;
  scroll-margin-top: 88px;
  outline: none;
}

.docs-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.docs-meta-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: #6A6A72;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Content typography */
.docs-content {
  max-width: 760px;
  font-size: 0.9375rem;
  line-height: 1.72;
  color: var(--text-secondary);
  overflow-wrap: break-word;
}

.docs-content h2,
.docs-content h3,
.docs-content h4 {
  color: var(--text-primary);
  font-family: var(--display);
  scroll-margin-top: 88px;
}

.docs-content h2 {
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 64px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.docs-content > h2:first-child { margin-top: 0; }

.docs-content h3 {
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin: 36px 0 12px;
}

.docs-content h4 {
  font-weight: 600;
  font-size: 1rem;
  margin: 24px 0 10px;
}

.docs-content .docs-anchor {
  margin-left: 0.35em;
  color: var(--text-tertiary);
  font-weight: 500;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.docs-content h2:hover .docs-anchor,
.docs-content h3:hover .docs-anchor,
.docs-content .docs-anchor:focus-visible { opacity: 1; }
.docs-content .docs-anchor:hover { color: var(--accent); }

@media (hover: none) {
  .docs-content .docs-anchor { display: none; }
}

.docs-content p { margin: 0 0 16px; }

.docs-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

.docs-content em { font-style: italic; }

.docs-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(59, 130, 246, 0.35);
  transition: text-decoration-color 0.15s, color 0.15s;
}

.docs-content a:hover {
  text-decoration-color: var(--accent);
  color: #60A5FA;
}

.docs-content ul,
.docs-content ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.docs-content li { margin-bottom: 8px; }
.docs-content li > ul,
.docs-content li > ol { margin: 8px 0 0; }

.docs-content code {
  font-family: var(--mono);
  font-size: 0.8125em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: #C9D1D9;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.docs-content code.is-short { white-space: nowrap; }

.docs-content pre {
  margin: 18px 0 26px;
  padding: 14px 18px 16px;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
  background: rgba(14, 14, 22, 0.85);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.docs-content pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 1em;
  color: #D1D5DB;
  white-space: pre;
  overflow-wrap: normal;
  display: block;
}

.docs-content pre::-webkit-scrollbar { height: 8px; }
.docs-content pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.docs-content img {
  height: auto;
  border-radius: 10px;
}

.docs-content p > img { display: inline-block; vertical-align: middle; margin: 4px 12px 4px 0; }

/* A picture on its own line (an HTML block, not inside a paragraph) */
.docs-content > img { margin: 6px 0 20px; }

/* Two screens side by side; they wrap under each other when the column is narrow */
.shot-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 20px;
  margin: 6px 0 20px;
}
.shot-pair img { margin: 0; }

/* A ring drawn over one spot of a screenshot: <picture class="shot-ring" style="--x:..;--y:..;--d:..">.
   --x, --y: the center, --d: the diameter. --x and --d are shares of the picture's width, --y is a share of its height. */
.shot-ring { position: relative; display: block; width: fit-content; max-width: 100%; }
.shot-ring::after {
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--d);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--accent-glow);
  pointer-events: none;
}

.docs-content blockquote {
  margin: 20px 0 24px;
  padding: 14px 18px;
  border-left: 3px solid var(--border-hover);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 0 8px 8px 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.docs-content blockquote p:last-child { margin-bottom: 0; }

.docs-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}

/* <details>: collapsed scripts and "Why?" boxes */
.docs-content details {
  margin: 18px 0 24px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(14, 14, 22, 0.5);
}

.docs-content details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.docs-content details > summary::-webkit-details-marker { display: none; }

.docs-content details > summary::before {
  content: '▸';
  display: inline-block;
  color: var(--accent);
  transition: transform 0.2s;
}

.docs-content details[open] > summary::before { transform: rotate(90deg); }
.docs-content details[open] { padding-bottom: 6px; }
.docs-content details .code-block:last-child { margin-bottom: 12px; }

/* Tables: scroll sideways inside their frame, with a fade while more is hidden */
.table-wrap {
  margin: 18px 0 26px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.docs-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.docs-content thead { background: rgba(255, 255, 255, 0.03); }

.docs-content th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.docs-content td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-secondary);
}

.docs-content tr:last-child td { border-bottom: none; }

.table-wrap.is-scrollable:not(.is-end),
.code-block pre.is-scrollable:not(.is-end) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}

/* Callouts: > [!NOTE] / [!TIP] / [!WARNING] / [!SEE] / [!STEP] */
.callout {
  --c-ink: var(--text-secondary);
  --c-rule: rgba(255, 255, 255, 0.2);
  --c-bg: rgba(255, 255, 255, 0.025);
  margin: 22px 0 26px;
  padding: 14px 18px 14px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--c-rule);
  border-radius: 4px 10px 10px 4px;
  background: var(--c-bg);
  font-size: 0.9rem;
  line-height: 1.65;
}

.callout-tip { --c-ink: var(--accent); --c-rule: var(--accent); --c-bg: rgba(59, 130, 246, 0.06); }
.callout-warning { --c-ink: var(--warn); --c-rule: var(--warn); --c-bg: rgba(251, 191, 36, 0.06); }
.callout-see { --c-ink: var(--green); --c-rule: var(--green); --c-bg: rgba(52, 211, 153, 0.05); }

.callout-body { min-width: 0; }
.callout-body p { margin: 0 0 10px; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-body .code-block,
.callout-body .table-wrap { margin: 12px 0; }

.callout-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.callout-title {
  margin-bottom: 4px;
  color: var(--text-primary);
  font-weight: 600;
}

.callout.has-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
}

.callout-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.callout-media img {
  max-width: 240px;
  border-radius: 12px;
}

.callout-see.has-media { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.callout-see .callout-media { order: -1; }

.callout-see .callout-media img {
  max-width: 220px;
  background: var(--phone-screen);
  border-radius: 14px;
}

.callout.media-inline .callout-body img { margin: 6px 0; }
.callout-see.media-inline .callout-body img { background: var(--phone-screen); border-radius: 14px; }

.callout-body .see-help {
  font-size: 0.8125rem;
  color: #8A8A94;
}

/* Step cards */
.callout-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(59, 130, 246, 0.07), transparent 55%),
    linear-gradient(180deg, rgba(20, 20, 30, 0.8), rgba(10, 10, 18, 0.8));
}

.callout-step.has-media { grid-template-columns: 40px minmax(0, 1fr) auto; }
.callout-step + .callout-step { margin-top: 14px; }

.callout-step:has(+ .callout-step)::after {
  content: '';
  position: absolute;
  left: 39px;
  top: 58px;
  bottom: -32px;
  width: 1px;
  background: linear-gradient(rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 0.1));
}

.step-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(59, 130, 246, 0.45);
  background: #0B1220;
  color: #93C5FD;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
}

.step-title {
  margin: 8px 0 8px;
  color: var(--text-primary);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.callout-body .step-done {
  position: relative;
  padding-left: 1.5em;
  color: var(--text-primary);
  font-size: 0.875rem;
}

.callout-body .step-done::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

/* Code blocks: a header tab from the fence's title="…", Copy, folding */
.code-block {
  position: relative;
  margin: 18px 0 26px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(14, 14, 22, 0.85);
  overflow: hidden;
}

.code-block.is-primary {
  border-color: rgba(59, 130, 246, 0.3);
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(59, 130, 246, 0.12), transparent 60%),
    rgba(14, 14, 22, 0.92);
  box-shadow: 0 18px 56px rgba(59, 130, 246, 0.12);
}

.code-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 4px 6px 4px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
}

.code-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}

.code-tab svg { flex: none; color: var(--accent); }

.code-hint {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: #6A6A72;
}

.code-lang {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6A6A72;
}

/* A block with no title and no language (text output): Copy floats over its top right corner */
.code-block.no-head .code-head {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}

.code-block.no-head pre { padding-right: 84px; }
.code-block.no-head .code-copy { opacity: 0; transition: opacity 0.2s, color 0.2s, background 0.2s, border-color 0.2s; }
.code-block.no-head:hover .code-copy,
.code-block.no-head .code-copy:focus-visible,
.code-block.no-head .code-copy.is-copied { opacity: 1; }

@media (hover: none) {
  .code-block.no-head .code-copy { opacity: 1; }
}

.code-copy {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(20, 20, 28, 0.92);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.code-copy:hover {
  color: var(--text-primary);
  background: rgba(40, 40, 56, 0.95);
  border-color: var(--border-hover);
}

.code-copy:active { transform: scale(0.97); }

.code-copy.is-copied,
.code-copy.is-copied:hover {
  color: var(--green);
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.4);
}

.code-copy-icon { display: inline-flex; line-height: 1; }
.code-copy-icon svg { display: block; }

.code-block pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.code-block.is-folded pre {
  max-height: calc(1.6em * 20 + 14px);
  overflow-y: hidden;
}

.code-more {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.code-more:hover { color: #fff; background: var(--accent-subtle); }

.code-block.is-folded .code-more::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 72px;
  background: linear-gradient(rgba(12, 12, 19, 0), rgba(12, 12, 19, 0.96));
  pointer-events: none;
}

/* The helpers block folds to its first marker line */
.code-fold {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: inherit;
  font: inherit;
  white-space: pre;
  text-align: left;
  cursor: pointer;
}

.code-fold:hover .t-com { color: var(--text-primary); }

.code-fold-note {
  margin-left: 10px;
  padding: 1px 8px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 999px;
  background: var(--accent-subtle);
  color: #93C5FD;
  font-size: 0.6875rem;
  -webkit-user-select: none;
          user-select: none;
}

.code-fold-note::after { content: attr(data-more); }
.code-fold[aria-expanded="true"] .code-fold-note::after { content: 'hide'; }
.code-fold-body { display: none; }
.code-fold[aria-expanded="true"] + .code-fold-body { display: inline; }

/* Light highlighting */
.t-com { color: #7C7C86; }
.t-str { color: #A7D9BC; }
.t-var,
.t-num,
.t-tag { color: #93C5FD; }
.t-kw { color: #F0F0F0; font-weight: 600; }
.t-key { color: #E4E4E7; }
.t-attr { color: #A0A0A8; }

/* Chips: {{CELL_ID}}, {{DESMAPTIC_TOKEN}}, $DESMAPTIC_TOKEN, $DESMAPTIC_STORAGE */
.docs-content .chip {
  cursor: help;
  border-radius: 3px;
  background: rgba(59, 130, 246, 0.14);
  box-shadow: inset 0 -1px 0 rgba(147, 197, 253, 0.6);
  color: #BFDBFE;
}

.docs-content code.chip { border-color: rgba(59, 130, 246, 0.35); }
.docs-content .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.docs-tip {
  position: fixed;
  z-index: 300;
  max-width: min(300px, calc(100vw - 32px));
  padding: 8px 11px;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: #15151E;
  border: 1px solid var(--border-hover);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Recipe cards (from pages.json "recipes") and link cards (<div class="link-cards"> around a list) */
.recipe-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 14px;
  margin: 22px 0 32px;
}

.recipe-cards:empty { display: none; }

.docs-content .recipe-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(14, 14, 22, 0.75);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}

.docs-content .recipe-card:hover {
  color: inherit;
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.recipe-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  background: var(--phone-screen);
  border-bottom: 1px solid var(--border);
}

.docs-content .recipe-thumb img {
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 100px;
  border-radius: 18px;
}

.recipe-thumb.is-text span {
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-primary);
  white-space: nowrap;
  border: 1px solid var(--border-hover);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.recipe-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
}

.recipe-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.recipe-summary {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.recipe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}

.recipe-tags span {
  padding: 3px 7px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border-hover);
  border-radius: 4px;
}

.recipe-where { font-size: 0.75rem; color: var(--accent); }

.docs-content .link-cards ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 12px;
  margin: 18px 0 28px;
  padding: 0;
  list-style: none;
}

.docs-content .link-cards li {
  position: relative;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(14, 14, 22, 0.6);
  font-size: 0.8125rem;
  line-height: 1.55;
  transition: border-color 0.2s;
}

.docs-content .link-cards li:hover { border-color: var(--border-hover); }

.docs-content .link-cards li > a:first-child {
  display: block;
  margin-bottom: 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  text-decoration: none;
}

.docs-content .link-cards li > a:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.docs-content .link-cards li > a:first-child:focus-visible { outline: none; }
.docs-content .link-cards li:has(> a:first-child:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Diagram mounts: the sentence shows until the module draws its figure.dt-diagram */
.dt-mount { margin: 28px 0 32px; }

.dt-mount:not(.is-mounted) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 24px;
  border: 1px dashed var(--border-hover);
  border-radius: 14px;
  background: rgba(14, 14, 22, 0.5);
  color: var(--text-secondary);
  font-size: 0.875rem;
  text-align: center;
}

.dt-mount.is-failed { min-height: 0; }

/* Previous / next */
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 760px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.docs-pager:empty { display: none; }

.docs-pager-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(14, 14, 22, 0.6);
  transition: border-color 0.2s, background 0.2s;
}

.docs-pager-link:hover {
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.03);
}

.docs-pager-link.is-next { grid-column: 2; text-align: right; }

.docs-pager-dir {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.docs-pager-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}

.docs-loading,
.docs-error {
  color: #6A6A72;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 60px 0;
}

.docs-content .docs-error { color: #FF6B6B; text-transform: none; letter-spacing: 0; }

/* Sub-bar and slide-in panel (phones and narrow windows) */
.docs-subbar { display: none; }

.docs-subbar-toggle {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.docs-subbar-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.docs-subbar-sep { color: #6A6A72; }

.docs-subbar-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.docs-subbar-step {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--text-secondary);
}

.docs-subbar-step:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }

.docs-backdrop {
  position: fixed;
  inset: 0;
  z-index: 205;
  background: rgba(0, 0, 0, 0.55);
}

html.docs-panel-open,
html.docs-panel-open body { overflow: hidden; }

@media (max-width: 1199px) {
  .docs-shell { grid-template-columns: 232px minmax(0, 760px); }
  .docs-rail { display: none; }
  .docs-otp-dropdown { display: block; }
}

@media (max-width: 899px) {
  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 32px 24px 80px;
    z-index: auto;            /* lets the fixed page panel rise above the site nav and the backdrop */
  }

  .docs-otp-dropdown { display: none; }

  .docs-subbar {
    position: sticky;
    top: 56px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 44px;
    padding: 0 6px 0 16px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
  }

  .docs-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 210;
    width: min(340px, 88vw);
    background: rgba(8, 8, 12, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid var(--border);
    box-shadow: 16px 0 48px rgba(0, 0, 0, 0.5);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s;
  }

  .docs-nav.open {
    transform: none;
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .docs-nav-inner {
    position: static;
    height: 100%;
    max-height: none;
    padding: 0 20px 40px;
  }

  .docs-nav-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -20px 18px;
    padding: 14px 20px 10px;
    background: #08080C;
  }

  .docs-nav-head .docs-toc-label { margin: 0; }

  .docs-nav-group .docs-toc-list ul { display: block; }

  .docs-page-head h1,
  .docs-content h2,
  .docs-content h3,
  .docs-content h4 { scroll-margin-top: 112px; }

  .docs-content h2 { font-size: 1.375rem; margin-top: 48px; }
}

@media (max-width: 640px) {
  .docs-shell { padding: 24px 16px 64px; }
  .docs-page-head h1 { font-size: 1.875rem; }
  .docs-content pre { padding: 12px 14px 14px; font-size: 0.75rem; }
  /* the hint stays (it says where the block goes) and shortens with an ellipsis */
  .code-head { gap: 8px; }
  /* the helpers' "show N lines" chip wraps under its marker line instead of past the screen's edge */
  .code-fold { display: inline-flex; flex-wrap: wrap; align-items: baseline; row-gap: 4px; max-width: 100%; }
  .code-fold-note { margin-left: 0; }
  .docs-content td { min-width: 6.5rem; }

  .callout.has-media,
  .callout-see.has-media { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .callout-see .callout-media { align-items: flex-start; }
  .callout-step,
  .callout-step.has-media { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .callout-step .callout-media { grid-column: 2; align-items: flex-start; }
  .callout-step:has(+ .callout-step)::after { left: 31px; top: 48px; }
  .step-num { width: 32px; height: 32px; font-size: 0.9375rem; }
  .step-title { margin-top: 4px; }
}

@media (max-width: 480px) {
  .docs-pager { grid-template-columns: 1fr; }
  .docs-pager-link.is-next { grid-column: 1; }
  .docs-pager > span { display: none; }

  /* <div class="stack-table"> around a table: each row becomes a card */
  .stack-table .table-wrap { overflow: visible; border: 0; }
  .stack-table table,
  .stack-table tbody,
  .stack-table tr,
  .stack-table td { display: block; width: 100%; min-width: 0; }
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack-table tr {
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(14, 14, 22, 0.6);
  }
  .docs-content .stack-table td,
  .docs-content .stack-table tr:last-child td { padding: 4px 0; border: 0; }
  .stack-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6A6A72;
  }
  .stack-table td:first-child { color: var(--text-primary); font-weight: 600; }

  /* Recipe cards: the face on the left, so a set of nine stays short on a phone */
  .docs-content .recipe-card { flex-direction: row; }
  .recipe-thumb {
    flex: none;
    width: 104px;
    height: auto;
    min-height: 104px;
    border-bottom: 0;
    border-right: 1px solid var(--border);
  }
  .docs-content .recipe-thumb img { max-width: 84px; max-height: 84px; border-radius: 14px; }
  .recipe-thumb.is-text span { max-width: 84px; padding: 6px; font-size: 0.5625rem; white-space: normal; text-align: center; }
  .recipe-body { padding: 12px 14px 14px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 56px;
  }
  .hero-content { max-width: 100%; }
  .hero-subtitle { margin: 0 auto 40px; }
  .hero-actions { justify-content: center; }
  .hero .trust-line { justify-content: center; }
  .features-header { grid-template-columns: 1fr; }
  .features-header p { justify-self: start; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }

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

  .bento-card.span-12,
  .bento-card.span-8,
  .bento-card.span-7,
  .bento-card.span-5,
  .bento-card.span-4 {
    grid-column: span 1;
  }

  .bento-card.card-ipad { grid-template-columns: 1fr; gap: 32px; }
  .bento-card { padding: 30px 24px; }
  .card-ask-text { grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; }
  .bento-card.card-ask h3 { font-size: 1.5rem; }
  .page-flip { grid-template-columns: 1fr; gap: 10px; }
  .page-flip-arrow { margin: 0; justify-self: center; transform: rotate(90deg); }

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

  .nav-links { display: none; }
  .nav-links.nav-compact { display: flex; gap: 20px; }
  .nav-compact .nav-section { display: none; }

  .footer .container {
    flex-direction: column;
    text-align: center;
  }

  .footer-left {
    flex-direction: column;
    gap: 16px;
  }

  /* Seven links don't fit a phone's width: they wrap whole, never inside "What's new" */
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 12px 22px; }
  .footer-links a { white-space: nowrap; }

  .hero { min-height: auto; padding: 130px 0 60px; }
  .hero-duo .hero-visual { width: calc(100vw - 32px); }

  .cta-actions {
    flex-direction: column;
    align-items: center;
  }
  .cta-actions .trust-line { order: 1; margin-top: 0; }
  .cta-actions .soon-note { order: 2; }
}

/* Side by side the iPhone would be under 200 px tall: one under the other, the iPad full width, the iPhone at the same
   scale (28.7% of the iPad's width), never under 200 px tall (98 px wide) */
@media (max-width: 520px) {
  .hero-devices { flex-direction: column; align-items: center; gap: 24px; }
  .hero-ipad { width: 100%; }
  .hero-iphone { width: max(28.7%, 98px); }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 2rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .trust-line, .changelog-actions .trust-line { order: 1; margin-top: 0; }
  .hero-actions .soon-note, .changelog-actions .soon-note { order: 2; }
  .trust-line { font-size: 0.75rem; }
  .cta-section .trust-line { font-size: 0.75rem; }
  .trust-line > span + span::before { margin: 0 5px; }
  .btn-primary, .btn-secondary { justify-content: center; }
  .legal { padding: 120px 20px 60px; }
}

/* ---------- For whom — three typographic glass cards ---------- */
.for-whom {
  padding: 130px 0 50px;
  position: relative;
}

.for-whom .container {
  max-width: 1240px;
}

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

.for-card {
  --card-tint: 59, 130, 246;
  padding: 44px 38px 40px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(var(--card-tint), 0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(20, 20, 30, 0.82) 0%, rgba(10, 10, 18, 0.9) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.4s, transform 0.4s;
}

.for-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 1px;
  background: rgb(var(--card-tint));
  opacity: 0.9;
}

.for-card::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at top right, rgba(var(--card-tint), 0.18) 0%, transparent 60%);
  pointer-events: none;
}

.for-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
}

.for-engineers { --card-tint: 48, 209, 88; }
.for-designers { --card-tint: 255, 55, 95; }
.for-power     { --card-tint: 100, 210, 255; }

.for-meta {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 28px;
}

.for-num {
  font-family: var(--display);
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: rgb(var(--card-tint));
  text-shadow: 0 0 32px rgba(var(--card-tint), 0.35);
}

.for-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.for-headline {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0 0 22px;
  text-wrap: balance;
}

.for-headline em {
  font-family: 'New York', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: rgb(var(--card-tint));
}

.for-rule {
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(var(--card-tint), 0.55);
  margin-bottom: 22px;
}

.for-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.for-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--display);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.for-list li::before {
  content: '→';
  font-family: var(--mono);
  font-size: 0.75rem;
  color: rgb(var(--card-tint));
  flex-shrink: 0;
  position: relative;
  top: 1px;
}

/* A picture of the deck under each card's list, bottoms level across the row */
.for-shot {
  margin-top: auto;
}

/* Keep the Capabilities header close to the cards */
.for-whom + .features {
  padding-top: 80px;
}

@media (max-width: 1024px) {
  .for-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
    gap: 14px;
  }
  .for-whom { padding: 90px 0 30px; }
  .for-whom + .features { padding-top: 50px; }
}

@media (max-width: 540px) {
  .for-card { padding: 34px 28px 32px; }
  .for-num { font-size: 2.8rem; }
  .for-headline { font-size: 1.3rem; }
  .for-list li { font-size: 0.875rem; }
}

/* ---------- Live widgets — what info can sit on a button ---------- */
.widgets {
  padding: 120px 0 100px;
  position: relative;
}

.widgets .container {
  max-width: 1100px;
}

.ww-head {
  text-align: center;
  margin-bottom: 56px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.ww-head .label {
  justify-content: center;
}

.ww-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
  margin: 0 0 18px;
  background: linear-gradient(180deg, #ffffff 0%, #b8b8c2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ww-head h2 em {
  font-family: 'New York', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, #bf5af2 0%, #64d2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ww-sub {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* A page of live buttons on a patch of phone screen (faces drawn by assets/js/live-widgets.js).
   Four columns with a gap of a tenth of a column, as on the phone: 4.3 columns' worth of width. */
.ww-deck {
  container-type: inline-size;   /* cqw below: the deck's content box, the grid's width */
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(14px, 3.4vw, 26px);
  background: var(--phone-screen);
  border: 1px solid var(--border);
  border-radius: clamp(24px, 5vw, 38px);
  box-shadow: 0 30px 80px -30px rgba(59, 130, 246, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.ww-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(100cqw / 43);
}

.ww-slot { position: relative; aspect-ratio: 1; }
.ww-slot:empty { border-radius: 22.37%; background: rgba(255, 255, 255, 0.08); }
.ww-now-playing { grid-column: 1 / 3; grid-row: 1 / 3; }
.ww-claude { grid-column: 3; grid-row: 1; }
.ww-build { grid-column: 4; grid-row: 1; }
.ww-price { grid-column: 3 / 5; grid-row: 2; aspect-ratio: 2.1; }
.ww-now-playing:empty { border-radius: 10.65%; }
.ww-price:empty { border-radius: 10.65% / 22.37%; }
.ww-weather { grid-column: 1; grid-row: 3; }
.ww-cpu { grid-column: 2; grid-row: 3; }
.ww-pomodoro { grid-column: 3; grid-row: 3; }
.ww-stars { grid-column: 4; grid-row: 3; }

.ww-slot > .dt-cell { position: absolute; display: block; overflow: visible; }
.ww-slot .dt-screen { display: none; }
.ww-slot .dt-cell text {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.ww-foot {
  text-align: center;
  margin: 48px auto 0;
  font-family: var(--display);
  font-size: 0.9375rem;
  /* Lighter than tertiary: the line has no backing and the glow passes behind it (5:1 at the lightest) */
  color: #9A9AA2;
  font-style: italic;
  max-width: 620px;
  line-height: 1.5;
}

.ww-more {
  text-align: center;
  margin: 18px 0 0;
}

.ww-more a {
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.ww-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .widgets { padding: 80px 0 60px; }
}

/* ---------- Gallery and scenes — start without code (/next/) ---------- */
.gallery-scenes {
  padding: 100px 0 110px;
  position: relative;
}

.gallery-scenes .container { max-width: 1100px; }

/* The path: a patch of the iPhone Gallery on the left, three numbered steps on the right */
.gs-path {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

.gs-gallery {
  background: var(--phone-screen);
  border: 1px solid var(--border);
  border-radius: clamp(24px, 5vw, 34px);
  padding: 10px 6px 4px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(59, 130, 246, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.gs-gallery img { width: 100%; height: auto; }

.gs-steps {
  list-style: none;
  display: grid;
  gap: 36px;
}

.gs-step {
  position: relative;
  padding-left: 64px;
  min-width: 0;
}

/* A thin accent line joins the numbers, as the docs join their step cards */
.gs-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19.5px;
  top: 48px;
  bottom: -28px;
  width: 1px;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.45), rgba(59, 130, 246, 0.08));
}

.gs-num {
  position: absolute;
  left: 0;
  top: -6px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: var(--accent-subtle);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.gs-step h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 8px;
}

.gs-step > p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.gs-step b { color: var(--text-primary); font-weight: 500; }

/* What you might ask your AI: a chat bubble */
.gs-step > .gs-prompt {
  margin-top: 14px;
  padding: 12px 16px 13px;
  max-width: 460px;
  /* A dark base under the white tint: the glow behind it would otherwise leave the tertiary label below 4.5:1 */
  background: linear-gradient(rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.045)), rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-hover);
  border-radius: 16px 16px 16px 4px;
  color: var(--text-primary);
  font-size: 0.875rem;
  line-height: 1.5;
}

.gs-prompt-who {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* A few lines of a startup script, in the docs' code colors */
.gs-code {
  margin-top: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  overflow: hidden;
}

.gs-code-title {
  display: block;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.gs-code pre {
  margin: 0;
  padding: 12px 14px 14px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.65;
  color: #D4D4D8;
}

.gs-code .c { color: #7C7C86; }
.gs-code .s { color: #A7D9BC; }
.gs-code .v { color: #93C5FD; }
.gs-code b { color: #fff; font-weight: 600; }

.gs-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--accent);
}

.gs-more::after { content: '→'; transition: transform 0.2s; }
.gs-more:hover::after { transform: translateX(3px); }

/* The scenes: three iPad screens, landscape, side by side */
.gs-scenes-head {
  text-align: center;
  max-width: 600px;
  margin: 110px auto 36px;
  scroll-margin-top: 88px;   /* /next/#scenes lands below the fixed nav */
}

.gs-scenes-head h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 12px;
}

.gs-scenes-head p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.gs-scenes-head b { color: var(--text-primary); font-weight: 500; }

.gs-scenes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.gs-scene img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: var(--phone-screen);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 60px -24px rgba(0, 0, 0, 0.9);
}

.gs-scene figcaption {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.55;
}

.gs-scene figcaption b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.gallery-scenes .ww-more { margin-top: 40px; }

@media (max-width: 900px) {
  .gs-path { grid-template-columns: 1fr; gap: 48px; max-width: 560px; }
  .gs-gallery { width: 100%; max-width: 340px; margin: 0 auto; }
  .gs-scenes { grid-template-columns: 1fr; gap: 36px; max-width: 560px; margin: 0 auto; }
  .gs-scenes-head { margin-top: 88px; }
}

@media (max-width: 640px) {
  .gallery-scenes { padding: 70px 0 80px; }
  .gs-step { padding-left: 54px; }
  .gs-num { width: 36px; height: 36px; font-size: 0.6875rem; }
  .gs-step:not(:last-child)::before { left: 17.5px; top: 42px; }
  .gs-scene img { border-radius: 10px; }
}

/* Respect users who ask the system to reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  #cosmos-bg { display: none; }
  .marquee-track { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Keyboard skip link + visible focus */
.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}