/* keyboard2.eu, Version C: Version A's pages and logic, with Version B's
   type (Geist, self-hosted), spacing and motion. Dark and light, following
   the system unless the visitor picks one (html[data-theme]). Motion:
   ease-out for entrances, a critically damped spring for phones,
   transform/opacity/filter only. */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #07080c;
  --bg-2: #0d0f16;
  --card: #131620;
  --card-2: #191d29;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f4f5f8;
  --dim: #b0b5c2;
  --faint: #8d92a0;
  --accent: #5aa9ff;
  --accent-ink: #04070f;
  --grad: linear-gradient(120deg, #5ec8ff 0%, #3b7bff 50%, #8b5cff 100%);
  --grad-soft: linear-gradient(120deg, rgba(94,200,255,0.16), rgba(139,92,255,0.16));
  --glow: radial-gradient(60% 60% at 50% 0%, rgba(59,123,255,0.22), transparent 70%);
  --ok: #34d399;
  --no: #f87171;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  --phone-frame: #1c1f28;
  --phone-edge: #2c303c;
  --screen: #000000;
  --bubble-me: #2f6bff;
  --bubble-them: #26282f;
  --field: #1c1d22;

  --pool: rgba(70, 96, 255, 0.22);
  --frame-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);

  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --maxw: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --nav-h: 64px;
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* a critically damped spring, response ~0.5s, sampled into linear() */
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 15.5%, 0.938 21.5%, 1.017 26.7%, 1.035 30.8%, 1.035 35.2%, 1.009 45.6%, 0.998 55.7%, 1);
}
:root[data-theme="light"] { --_light: 1; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --_light: 1; } }

/* The light set. Written twice, once for the system setting and once for
   the toggle, because CSS cannot share a block between the two. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fbfbfd;
  --bg-2: #f2f3f7;
  --card: #ffffff;
  --card-2: #f4f5f9;
  --line: rgba(17, 19, 24, 0.09);
  --line-strong: rgba(17, 19, 24, 0.16);
  --text: #111318;
  --dim: #4a4f5c;
  --faint: #6b7080;
  --accent: #2563eb;
  --accent-ink: #ffffff;
  --grad-soft: linear-gradient(120deg, rgba(37,99,235,0.10), rgba(124,77,255,0.10));
  --glow: radial-gradient(60% 60% at 50% 0%, rgba(59,123,255,0.12), transparent 70%);
  --ok: #059669;
  --no: #dc2626;
  --shadow: 0 30px 70px rgba(30, 40, 80, 0.18);
  --pool: rgba(70, 110, 255, 0.13);
  --frame-shadow: 0 30px 50px -30px rgba(30, 40, 80, 0.45);
  --phone-frame: #e6e8ee;
  --phone-edge: #cfd3dc;
  --screen: #ffffff;
  --bubble-me: #2f6bff;
  --bubble-them: #e9e9eb;
  --field: #ffffff;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #fbfbfd;
    --bg-2: #f2f3f7;
    --card: #ffffff;
    --card-2: #f4f5f9;
    --line: rgba(17, 19, 24, 0.09);
    --line-strong: rgba(17, 19, 24, 0.16);
    --text: #111318;
    --dim: #4a4f5c;
    --faint: #6b7080;
    --accent: #2563eb;
    --accent-ink: #ffffff;
    --grad-soft: linear-gradient(120deg, rgba(37,99,235,0.10), rgba(124,77,255,0.10));
    --glow: radial-gradient(60% 60% at 50% 0%, rgba(59,123,255,0.12), transparent 70%);
    --ok: #059669;
    --no: #dc2626;
    --shadow: 0 30px 70px rgba(30, 40, 80, 0.18);
    --pool: rgba(70, 110, 255, 0.13);
    --frame-shadow: 0 30px 50px -30px rgba(30, 40, 80, 0.45);
    --phone-frame: #e6e8ee;
    --phone-edge: #cfd3dc;
    --screen: #ffffff;
    --bubble-me: #2f6bff;
    --bubble-them: #e9e9eb;
    --field: #ffffff;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  background: var(--bg);
  color: var(--text);
  font: 400 18px/1.6 var(--font);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--card); padding: 10px 14px; border-radius: 10px; }
.skip:focus { left: 12px; }

.wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }
@media (max-width: 600px) { .wrap { width: calc(100% - 32px); } }

/* ------------------------------------------------------------- header */
.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow 300ms ease, background-color 300ms ease;
}
.top.scrolled { box-shadow: 0 1px 0 var(--line); }
.top .wrap { display: flex; align-items: center; gap: 20px; height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 18px; text-decoration: none; letter-spacing: -0.02em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav a { text-decoration: none; color: var(--dim); font-size: 15px; padding: 8px 12px; border-radius: 999px; transition: color 200ms ease, background-color 200ms ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--card-2); }
.top .end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: var(--dim); transition: color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn:hover { background: var(--card-2); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }
.burger { display: none; }
.nav a, .top .end .btn { white-space: nowrap; }
/* The seven links and two buttons need about 1100 px in one line; below that
   the links go behind the menu button rather than wrapping onto two lines. */
@media (max-width: 1120px) {
  .nav { display: flex; visibility: hidden; opacity: 0; transform: translateY(-8px); position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; padding: 12px 16px 18px; background: var(--bg); border-bottom: 1px solid var(--line); margin: 0; transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s 260ms; }
  .nav.open { visibility: visible; opacity: 1; transform: none; transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out); }
  .nav a { font-size: 18px; padding: 12px 14px; }
  .burger { display: grid; }
}
@media (max-width: 920px) {
  .top .btn-sm { display: none; }
}

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border-radius: 999px;
  font-weight: 600; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease, background-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { box-shadow: 0 10px 30px rgba(59,123,255,0.35); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: var(--card-2); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; gap: 8px; }
.btn svg { width: 20px; height: 20px; }
.store { padding: 8px 24px 8px 20px; }
.store small { display: block; font-size: 11px; font-weight: 500; opacity: .75; line-height: 1.1; }
.store b { display: block; font-size: 19px; line-height: 1.15; letter-spacing: -0.01em; }

/* ------------------------------------------------------------- type */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; letter-spacing: .02em; color: var(--dim); padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 640; text-wrap: balance; }
h1 { font-size: clamp(44px, 6.4vw, 92px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 660; }
h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.035em; }
h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--dim); max-width: 34em; text-wrap: pretty; }
.kicker { font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.muted { color: var(--dim); }
.small { font-size: 15px; }

/* ------------------------------------------------------------- bands */
.band { padding-block: clamp(96px, 13vw, 168px); position: relative; }
.band.alt { background: var(--bg-2); }
.band-head { max-width: 800px; margin-bottom: clamp(40px, 6vw, 72px); }
.band-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.band-head .lead { margin-top: 20px; }
.band-head.center .lead { margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .band { padding-block: 84px; } .band-head { margin-bottom: 36px; } }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.duo.rev > :first-child { order: 2; }
@media (max-width: 960px) { .duo { grid-template-columns: 1fr; gap: 40px; } .duo.rev > :first-child { order: 0; } }

.points { list-style: none; display: grid; gap: 18px; margin-top: 28px; }
.points li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; color: var(--dim); }
.points li b { color: var(--text); font-weight: 650; }
.points .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--grad-soft); color: var(--accent); }
.points .ic svg { width: 16px; height: 16px; }

.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px; font-size: 15px; font-weight: 500;
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.chip:active { transform: scale(0.97); }
button.chip:hover { border-color: var(--line-strong); }
.chip[aria-pressed="true"], .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip .from { color: var(--faint); text-decoration: line-through; }
.chip[aria-pressed="true"] .from { color: inherit; opacity: .6; }

/* ------------------------------------------------------------- hero */
.hero { padding: 72px 0 96px; position: relative; overflow: clip; }  /* clip, not hidden: hidden would stop the copy sticking */
.hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 900px; background: var(--glow); pointer-events: none; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; position: relative; }
.hero h1 { margin: 24px 0 26px; font-size: clamp(42px, 5vw, 76px); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; color: var(--dim); font-size: 15px; }
.proof > span { display: inline-flex; align-items: center; gap: 8px; }
.proof svg { width: 18px; height: 18px; color: var(--ok); }
@media (max-width: 960px) {
  .hero { padding: 40px 0 72px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero .copy { text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero .cta, .hero .proof { justify-content: center; }
}

/* a phone that only shows a keyboard (feature scenes) */
.device {
  width: min(420px, 100%);
  background: var(--phone-frame);
  border: 1px solid var(--phone-edge);
  border-radius: 34px;
  padding: 10px;
  box-shadow: var(--shadow);
}
.device .inner { border-radius: 26px; overflow: hidden; background: var(--screen); position: relative; }
.device .top-area { padding: 18px 16px 12px; min-height: 92px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }

/* ------------------------------------------------------------- tables */
.table { width: 100%; border-collapse: collapse; font-size: 17px; }
.table th, .table td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700; }
.table td.c, .table th.c { text-align: center; }
.table .yes { color: var(--ok); font-weight: 700; }
.table .no { color: var(--faint); }
.table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; }

/* ------------------------------------------------------------- pricing */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.price.best { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; }
.price .amount { font-family: var(--font-display); font-size: 44px; font-weight: 750; letter-spacing: -0.03em; }
.price .amount small { font-size: 17px; font-weight: 550; color: var(--dim); letter-spacing: 0; }
.price .tag { display: inline-block; margin-left: 8px; vertical-align: 1px; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--grad-soft); color: var(--accent); }
@media (max-width: 900px) { .prices { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- faq */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 650; font-size: 19px; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--faint); font-weight: 300; font-size: 26px; line-height: 1; transition: transform 300ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size 380ms var(--ease-out), content-visibility 380ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
.faq details p { color: var(--dim); padding-bottom: 20px; }

/* ------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); padding: 56px 0 64px; color: var(--dim); font-size: 15px; }
.foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot h4 { color: var(--text); font-size: 15px; margin-bottom: 12px; }
.foot ul { list-style: none; display: grid; gap: 8px; }
.foot a { text-decoration: none; color: var(--dim); }
.foot a:hover { color: var(--text); }
.foot .legal { margin-top: 40px; font-size: 14px; color: var(--faint); }
@media (max-width: 800px) { .foot .cols { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------- reveal */
/* hidden only when script runs, so no-JS visitors and crawlers see it all */
.js .reveal { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), filter 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- page heads (subpages) */
.page-head { padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 5vw, 64px); position: relative; }
.page-head .lead { margin-top: 24px; }
.page-head::before { content: ""; position: absolute; inset: -40% -10% auto; height: 600px; background: var(--glow); pointer-events: none; }
.page-head .wrap { position: relative; }
.crumbs { font-size: 15px; color: var(--faint); margin-bottom: 18px; }
.crumbs a { color: var(--dim); text-decoration: none; }

/* ------------------------------------------------------------- what's new */
.release { display: grid; grid-template-columns: 200px 1fr; gap: 40px; padding: 48px 0; border-top: 1px solid var(--line); }
.release:first-of-type { border-top: 0; }
.release .ver { font-family: var(--font-display); font-size: 34px; font-weight: 750; letter-spacing: -0.02em; }
.release .date { color: var(--faint); font-size: 15px; margin-top: 4px; }
.release .badge { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--grad-soft); color: var(--accent); }
.release h3 { margin: 28px 0 10px; font-size: 19px; }
.release h3:first-child { margin-top: 0; }
.release ul { padding-left: 20px; color: var(--dim); display: grid; gap: 8px; }
.release li b { color: var(--text); }
@media (max-width: 760px) { .release { grid-template-columns: 1fr; gap: 16px; } }

/* ------------------------------------------------------------- helpers */
.center { text-align: center; }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 48px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.note { font-size: 14px; color: var(--faint); }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.tabs button { padding: 9px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--dim); }
.tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }

/* ------------------------------------------------------------- scenes */
/* Scenes sit on a keyboard board and take its --kb-* colours, so a theme
   dresses them exactly as it dresses the keys. */
.board { background: var(--kb-board-img, linear-gradient(180deg, var(--kb-board-a), var(--kb-board-b))); background-size: cover; background-position: center; color: var(--kb-text); border-radius: 10px 10px 0 0; }

.wheel-wrap { position: relative; padding: 14px 10px 0; }
svg.wheel { width: 100%; height: auto; display: block; touch-action: none; }
svg.wheel .sector path:first-child { fill: var(--kb-special); stroke: var(--kb-board-a); stroke-width: 1; transition: fill .15s; }
svg.wheel .sector text { fill: var(--kb-text); font: 600 13px var(--font); }
svg.wheel .sector text.cap { font: 500 9.5px var(--font); fill: var(--kb-hint); }
svg.wheel .sector text.small { font-size: 11px; }
svg.wheel .sector .ic { color: var(--kb-text); stroke: var(--kb-text); }
svg.wheel .sector.sel path:first-child { fill: #0a84ff; }
svg.wheel .sector.sel text, svg.wheel .sector.sel text.cap { fill: #fff; }
svg.wheel .sector.sel .ic { stroke: #fff; }
svg.wheel .finger { fill: rgba(255,255,255,0.35); stroke: rgba(255,255,255,0.75); stroke-width: 1.5; opacity: 0; transition: cx .5s ease, cy .5s ease, opacity .2s; pointer-events: none; }
svg.wheel .finger.on { opacity: 1; }
.wheel-space { margin: 0 auto; width: 52%; height: 34px; border-radius: 3.5px; background: var(--kb-key); display: grid; place-items: center; font-size: 11px; letter-spacing: .06em; font-weight: 600; color: var(--kb-hint); }
.wheel-space b { color: var(--kb-text); }
.wheel-status { text-align: center; font-size: 14px; color: var(--kb-hint); padding: 10px 0 14px; min-height: 2.4em; }
.wheel-status b { color: var(--kb-text); }

.clip { display: flex; flex-direction: column; height: 100%; }
.clip-area { padding: 6px 6px 4px; height: 236px; overflow: auto; scrollbar-width: none; }
.clip-area::-webkit-scrollbar { display: none; }
.clip .ic { width: 15px; height: 15px; flex: 0 0 15px; color: var(--kb-hint); }
.clip-area.list .ci { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border-top: 1px solid color-mix(in srgb, var(--kb-text) 12%, transparent); font-size: 14px; }
.clip-area.list .ci:first-child { border-top: 0; }
.clip-area.list .ci .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip-area.list .ci .thumb { height: 26px; width: 40px; border-radius: 4px; margin-right: auto; }
.clip-area.list .ci .time { font-size: 11px; color: var(--kb-hint); }
.clip-area.list .ci .x { width: 13px; height: 13px; opacity: .7; }
.clip-area.vgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4.86px; align-content: start; }
.clip-area.hgrid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 1fr); grid-auto-columns: calc((100% - 18px) / 4); gap: 6px; overflow-x: auto; overflow-y: hidden; }
/* A grid tile as ClipboardEntryCell lays it out (pt x 0.81): 12 pt corners,
   a 14 pt kind icon at 8 pt, the text from 26 pt down in 14 pt type, at
   most three whole lines with an ellipsis; an image tile puts the icon on a
   20 pt backdrop at 5 pt so it reads over the picture. */
.clip-area .tile { position: relative; aspect-ratio: 1; border-radius: 9.7px; background: var(--kb-special); padding: 0; font-size: 11.3px; line-height: 1.19; overflow: hidden; background-size: cover; }
.clip-area.hgrid .tile { aspect-ratio: auto; height: 100%; }
.clip-area .tile .badge { position: absolute; left: 6.5px; top: 6.5px; width: 11.3px; height: 11.3px; display: grid; place-items: center; color: var(--kb-hint); }
.clip-area .tile .badge .ic { width: 11.3px; height: 11.3px; }
.clip-area .tile.img .badge { left: 4px; top: 4px; width: 16.2px; height: 16.2px; border-radius: 4.9px; background: color-mix(in srgb, var(--kb-special) 80%, transparent); }
.clip-area .tile.img .badge .ic { width: 11.3px; height: 11.3px; }
.clip-area .tile .x { position: absolute; top: 6.5px; right: 6.5px; width: 9.5px; height: 9.5px; opacity: .7; }
.clip-area .tile .t { position: absolute; left: 6.5px; right: 6.5px; top: 21px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.clip-bar { display: flex; align-items: center; gap: 5px; padding: 4px 4px 10px; }
.clip-bar .ck { flex: 0 0 auto; width: 46px; height: 34px; border-radius: 3.5px; background: var(--kb-special); display: grid; place-items: center; color: var(--kb-text); }
.clip-bar .ck .ic { width: 18px; height: 18px; color: var(--kb-text); }
.clip-chips { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.clip-chips::-webkit-scrollbar { display: none; }
.clip-chips .cc { flex: 0 0 auto; padding: 0 11px; height: 26px; border-radius: 13px; font-size: 13px; color: var(--kb-hint); }
.clip-chips .cc.on { background: var(--kb-special); color: var(--kb-text); }

/* trackpad autoscroll zones (CursorTrackView: 76pt at each end) */
.kbd .zone { position: absolute; bottom: 8px; width: 19.5%; height: var(--kb-key-h, 34px); border-radius: 3.5px; background: color-mix(in srgb, var(--kb-hint) 22%, transparent); display: grid; place-items: center; color: var(--kb-text); font-size: 13px; letter-spacing: -2px; pointer-events: none; transition: background .15s; }
.kbd .zone.l { left: 2.4px; } .kbd .zone.r { right: 2.4px; }
.kbd .zone.hot { background: color-mix(in srgb, #0a84ff 55%, transparent); }
.kbd .track { position: absolute; bottom: 8px; left: 2.4px; right: 2.4px; height: var(--kb-key-h, 34px); border-radius: 3.5px; background: var(--kb-key); pointer-events: none; }

/* ------------------------------------------------------------- home: themes */
.theme-show { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.device.big { width: 100%; max-width: 520px; justify-self: end; }
.theme-name { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 22px 0 14px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 10px; max-width: 420px; }
.swatch { aspect-ratio: 1; border-radius: 12px; border: 2px solid transparent; background-size: cover; background-position: center; position: relative; box-shadow: inset 0 0 0 1px var(--line-strong); }
.swatch[aria-pressed="true"] { border-color: var(--text); }
.swatch i { position: absolute; left: 22%; right: 22%; bottom: 22%; height: 22%; border-radius: 3px; }
@media (max-width: 900px) { .theme-show { grid-template-columns: 1fr; } .device.big { justify-self: center; } .theme-side { text-align: center; } .swatches { margin: 0 auto; } }

/* ------------------------------------------------------------- home: tools */
.tool-panel[hidden], .tool-copy[hidden] { display: none; }
.tool-copy h3 { font-size: 30px; letter-spacing: -0.02em; }
.tool-copy p { font-size: 19px; }
.band.final { padding-top: 40px; }
details.langs summary { list-style: none; display: inline-flex; }
details.langs summary::-webkit-details-marker { display: none; }

h2 + .lead { margin-top: 18px; }
.hero .wrap { grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- try */
.try { padding: 40px 0 80px; }
.try-grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: start; }
.try-stage { position: sticky; top: 88px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 26px; }
.panel h2 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 12px; font-family: var(--font); }
.panel .row-set { display: grid; gap: 14px; }
.ctl { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 14px; font-size: 16px; }
.ctl output { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 15px; }
.ctl input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.switch { position: relative; width: 50px; height: 30px; border-radius: 999px; background: var(--line-strong); transition: background .2s; flex: 0 0 auto; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch[aria-checked="true"] { background: var(--ok); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.search { width: 100%; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; max-height: 260px; overflow: auto; padding: 2px; margin-top: 12px; }
.theme-grid .swatch { width: 100%; }
@media (max-width: 960px) { .try-grid { grid-template-columns: 1fr; } .try-stage { position: static; } }

/* ------------------------------------------------------------- feature pages */
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; }
.tpair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: 12px; overflow: hidden; }
.tpair .kbd { --kb-key-h: 22px; --kb-row-mb: 5px; --g: 2.5px; font-size: 10px; border-radius: 0; padding: 3px 1px 5px; }
.tpair .kbd .key { font-size: 10px; }
.tpair .kbd .key .hint { display: none; }
.tpair .kbd .key .cap { transform: none; }
.tpair .kbd .sugg { height: 18px; margin-bottom: 3px; }
.tpair .kbd .sugg span[data-s] { font-size: 8px; }
.tpair .kbd .key.emoji svg.smiley { width: 10px; height: 10px; }
.tcard figcaption { margin-top: 12px; font-weight: 650; display: flex; gap: 8px; align-items: center; }
.tcard .tag { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--grad-soft); color: var(--accent); }
@media (max-width: 900px) { .tcards { grid-template-columns: 1fr; } }
.lang-grid { columns: 3; column-gap: 32px; color: var(--dim); }
.lang-grid li { list-style: none; padding: 6px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.lang-grid li b { color: var(--text); font-weight: 600; }
@media (max-width: 760px) { .lang-grid { columns: 2; } }
.examples { display: grid; gap: 10px; }
.example { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); font-size: 18px; }
.example .from { color: var(--faint); text-decoration: line-through; text-align: right; }
.example .arrow { color: var(--accent); }
.example .lang { grid-column: 1 / -1; font-size: 13px; color: var(--faint); text-align: center; margin-top: -6px; }

/* Grid children may shrink below their content: without this a keyboard or
   a swatch row sets the column's minimum width and pushes past the screen. */
.duo > *, .theme-show > *, .try-grid > *, .hero .wrap > * { min-width: 0; }
@media (max-width: 900px) { .swatches { grid-template-columns: repeat(6, 1fr); max-width: 360px; } }
@media (max-width: 600px) { .table .wide { display: none; } .table { font-size: 16px; } .table th, .table td { padding: 14px 12px; } }


/* ------------------------------------------------------------- iPhone */
/* Laid out at 0.81 of the real display (402 x 874 pt -> 326 x 708 px), the
   keyboard mock's own scale, then scaled whole with --s. */
.iphone-fit { --s: 1; --pw: 344px; --ph: 726px; width: calc(var(--pw) * var(--s)); height: calc(var(--ph) * var(--s)); position: relative; flex: 0 0 auto; }
.iphone-fit.crop { --ph: 470px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px); mask-image: linear-gradient(180deg, transparent 0, #000 70px); }
/* the bottom of the phone: shift the scaled phone up by what does not fit */
.iphone-fit.crop .iphone { top: calc((var(--ph) - 726px) * var(--s)); }
.iphone {
  position: absolute; left: 0; top: 0; width: 344px; height: 726px;
  transform: scale(var(--s)); transform-origin: 0 0;
  border-radius: 56px; padding: 3px;
  /* the titanium band: light catching the rounded edge */
  background: linear-gradient(135deg, #9ea3ab 0%, #5f646c 18%, #c9cdd3 38%, #6d727a 62%, #b7bbc2 82%, #5b6068 100%);
  box-shadow: 0 0 0 0.6px rgba(0,0,0,0.6), 0 40px 80px -20px rgba(0,0,0,0.55), 0 18px 40px -18px rgba(0,0,0,0.45);
}
.iphone .glass { width: 100%; height: 100%; border-radius: 53px; background: #050505; padding: 6px; position: relative; }
.iphone .hw { position: absolute; width: 3.5px; border-radius: 2px; background: linear-gradient(90deg, #6b7078, #b9bdc4 60%, #7d828a); }
.iphone .hw.action { left: -2.5px; top: 118px; height: 28px; }
.iphone .hw.vol-up { left: -2.5px; top: 168px; height: 50px; }
.iphone .hw.vol-down { left: -2.5px; top: 228px; height: 50px; }
.iphone .hw.side { right: -2.5px; top: 190px; height: 78px; }
.iphone .hw.camera { right: -2px; top: 372px; height: 46px; width: 3px; background: linear-gradient(90deg, #4c5058, #8b9098); }
.iphone .screen { width: 326px; height: 708px; border-radius: 47px; overflow: hidden; position: relative; background: var(--scr-bg); color: var(--scr-text); display: flex; flex-direction: column; outline: none; }
.iphone .island { position: absolute; top: 9px; left: 50%; width: 100px; height: 30px; margin-left: -50px; border-radius: 16px; background: #000; z-index: 20; }
.iphone .sbar { height: 46px; flex: 0 0 46px; display: flex; justify-content: space-between; align-items: center; padding: 6px 26px 0 38px; font: 600 14px/1 var(--font); letter-spacing: -0.01em; position: relative; z-index: 5; }
.iphone .sbar .icons { display: flex; gap: 5px; align-items: center; color: var(--scr-text); fill: currentColor; }
.iphone .sbar .icons svg { height: 10.5px; width: auto; }
.iphone .msg-head { flex: 0 0 auto; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 2px 12px 8px; border-bottom: 0.5px solid var(--scr-line); }
.iphone .msg-head .back, .iphone .msg-head .video { color: #0a84ff; display: grid; place-items: center; }
.iphone .msg-head .back svg { width: 10px; height: 17px; }
.iphone .msg-head .video svg { width: 22px; height: 16px; }
.iphone .msg-head .who { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.iphone .msg-head .avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(180deg, #a6abb6, #858a95); color: #fff; display: grid; place-items: center; font: 600 15px var(--font); }
.iphone .msg-head .name { font: 400 11px var(--font); color: var(--scr-text); }
.iphone .app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 8px 12px 6px; overflow: hidden; }
.iphone .bubble { max-width: 74%; padding: 6px 11px; border-radius: 17px; font: 400 14.5px/1.3 var(--font); }
.iphone .bubble.them { background: var(--scr-them); color: var(--scr-text); align-self: flex-start; }
.iphone .bubble.me { background: #0a84ff; color: #fff; align-self: flex-end; }
.iphone .compose { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 4px 10px 8px; }
.iphone .compose .plus { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--scr-them); color: var(--scr-dim); display: grid; place-items: center; }
.iphone .compose .plus svg { width: 15px; height: 15px; }
.iphone .field { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 6px; border: 1px solid var(--scr-line-strong); background: transparent; border-radius: 17px; padding: 5px 4px 5px 12px; min-height: 32px; font: 400 15px/1.35 var(--font); color: var(--scr-text); }
.iphone .field .text { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; max-height: 4.1em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.iphone .field .placeholder { color: var(--scr-dim); }
.iphone .field .send { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: #0a84ff; color: #fff; display: grid; place-items: center; }
.iphone .field .send svg { width: 13px; height: 13px; }
.iphone .kbd-area { flex: 0 0 auto; position: relative; background: var(--kb-board-b, #161618); background: var(--kb-board-img, linear-gradient(180deg, var(--kb-board-a, #161618), var(--kb-board-b, #161618))); background-size: cover; background-position: bottom; border-radius: var(--kb-board-radius, 9.72px) var(--kb-board-radius, 9.72px) 0 0; overflow: hidden; }
/* The board's top corners: 12 pt on iOS 26 for a theme with its own board
   (Constants.boardTopCornerRadius), or the system glass's ~33 pt when the
   board is see-through and the glass is what shows (set by applyPalette). */
.iphone .kbd-area .kbd { background: transparent; border-radius: var(--kb-board-radius, 9.72px) var(--kb-board-radius, 9.72px) 0 0; }
/* The dock under the keys, measured on a device (pt x 0.81): 78 pt from the
   bottom row to the screen's edge, the globe's centre 42 pt from the left and
   38 pt below the row, the mic's 43 pt from the right and 37 pt below. */
.iphone .dock { position: relative; height: 63.2px; color: var(--kb-text, #fff); }
.iphone .dock span { position: absolute; display: block; opacity: .95; }
.iphone .dock span:first-child { left: 23.5px; top: 20.2px; width: 21.3px; height: 21.3px; }
.iphone .dock span:last-child { right: 27.3px; top: 18.8px; width: 14.8px; height: 22.4px; }
.iphone .dock svg { display: block; width: 100%; height: 100%; }
.iphone .home-ind { position: absolute; bottom: 7px; left: 50%; width: 112px; margin-left: -56px; height: 4px; border-radius: 3px; background: var(--kb-text, var(--scr-text)); opacity: .9; z-index: 6; pointer-events: none; }
.iphone .caret { background: #0a84ff; }
/* the screen follows the page's appearance, as an iPhone follows the system */
:root { --scr-bg: #000; --scr-text: #fff; --scr-dim: #8d8d93; --scr-them: #262629; --scr-line: rgba(255,255,255,.12); --scr-line-strong: rgba(255,255,255,.22); }
:root[data-theme="light"] { --scr-bg: #fff; --scr-text: #000; --scr-dim: #8a8a8e; --scr-them: #e9e9eb; --scr-line: rgba(0,0,0,.12); --scr-line-strong: rgba(0,0,0,.18); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --scr-bg: #fff; --scr-text: #000; --scr-dim: #8a8a8e; --scr-them: #e9e9eb; --scr-line: rgba(0,0,0,.12); --scr-line-strong: rgba(0,0,0,.18); } }
.hero .iphone-fit { --s: 1.12; }
@media (max-width: 1080px) { .hero .iphone-fit { --s: 1; } }
@media (max-width: 380px) { .iphone-fit { --s: 0.92; } .hero .iphone-fit { --s: 0.92; } }
/* Two columns: the hero phone fits the window's height, so the whole phone
   shows and the copy beside it is not centred against a phone taller than the
   screen (which left an empty band above the headline). 726 px is the phone
   at --s 1; 128 px is the header, the hero's top padding and a margin. */
@media (min-width: 961px) {
  .hero { padding-top: 40px; }
  /* the copy starts at the top, beside the phone's status bar, not centred against it */
  .hero .copy { align-self: start; margin-top: 56px; }
  @media (max-height: 940px) { .hero .iphone-fit { --s: 1; } }
  @media (max-height: 853px) { .hero .iphone-fit { --s: 0.9; } }
  @media (max-height: 781px) { .hero .iphone-fit { --s: 0.8; } }
  @media (max-height: 708px) { .hero .iphone-fit { --s: 0.72; } }
}



.try-tips { list-style: none; display: grid; gap: 6px; font-size: 15px; color: var(--dim); max-width: 380px; margin-top: 6px; }
.try-tips b { color: var(--text); font-weight: 600; }
.select { font: inherit; font-size: 15px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); }
.ctl .select { grid-column: 2; }
.stage .hint { font-size: 15px; color: var(--faint); text-align: center; max-width: 420px; }

.iphone .bubble.sent { animation: bubbleIn .28s cubic-bezier(.2,1.3,.4,1); transform-origin: right bottom; }
@keyframes bubbleIn { from { transform: translateY(14px) scale(.85); opacity: 0; } }
.iphone .field .send { cursor: pointer; }

/* ------------------------------------------------------------- stage: a phone and its demos */
.stage { display: flex; flex-direction: column; align-items: center; gap: 24px; min-width: 0; }
.stage > .iphone-fit { align-self: center; }
/* the demo rail under a phone: quiet chips, the one playing marked by a
   thin line that fills as it plays */
.chips.tour { gap: 8px; max-width: 420px; justify-content: center; margin: 0 auto; }
.chips.tour .chip { position: relative; overflow: hidden; font-size: 14px; font-weight: 550; padding: 8px 14px 9px; background: transparent; border: 1px solid var(--line); color: var(--dim); transition: color .2s, border-color .2s, background .2s; }
.chips.tour .chip:hover { color: var(--text); border-color: var(--line-strong); }
.chips.tour .chip.playing { color: var(--text); background: var(--card); border-color: var(--line-strong); }
.chips.tour .chip.playing::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 1px; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.chips.tour .chip.playing.restart::after { animation: chipfill var(--dur, 3000ms) linear forwards; }
@keyframes chipfill { to { transform: scaleX(1); } }
.demo-note { font-size: 13.5px; color: var(--faint); text-align: center; margin-top: -10px; }

.try-head { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: end; margin-bottom: 40px; }
.taste { background: var(--grad-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; }
.taste-title { font-weight: 650; margin-bottom: 8px; }
.taste ul { list-style: none; display: grid; gap: 6px; font-size: 15.5px; color: var(--dim); margin-bottom: 14px; }
.taste li b { color: var(--text); }
.chip.more { text-decoration: none; border-style: dashed; color: var(--dim); }
.chip.more:hover { color: var(--text); }
.h2-note { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--faint); margin-left: 6px; }
@media (max-width: 960px) { .try-head { grid-template-columns: 1fr; gap: 24px; } }

.faq-groups { display: grid; gap: 40px; max-width: 860px; }
.faq-group h3 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }

/* the toolbox: every tool, compact */
.toolbox-band { padding-top: 40px; }
.tb-group { margin-top: 44px; }
.tb-group h3 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; display: flex; gap: 8px; align-items: baseline; }
.tb-group h3 span { font-size: 13px; color: var(--accent); letter-spacing: 0; }
.tb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tb { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); align-items: start; transition: border-color .2s, transform .2s; }
.tb:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.tb-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--grad-soft); color: var(--accent); display: grid; place-items: center; }
.tb b { font-size: 16px; font-weight: 650; display: block; line-height: 1.3; }
.tb p { font-size: 14px; color: var(--dim); line-height: 1.45; margin-top: 3px; }
@media (max-width: 1080px) { .tb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .tb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tb-grid { grid-template-columns: 1fr; } }

/* ================================================================ Version C */

/* ------------------------------------------------- hero arrival (from B) */
/* The copy materialises line by line; the phone is NEVER hidden, it only
   rises on a spring, as a CSS animation that needs no script and no font. */
.js .rise { opacity: 0; transform: translateY(18px); filter: blur(10px); }
.js.ready .rise { opacity: 1; transform: none; filter: none; transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out), filter 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 80ms); }
.hero .stage > .iphone-fit { animation: phone-in 1300ms var(--spring) 120ms both; }
@keyframes phone-in { from { transform: translateY(40px) scale(0.96); } to { transform: none; } }

/* ----------------------------------- a light pool behind every live phone */
.stage { position: relative; isolation: isolate; }
.stage > .iphone-fit::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--pool), transparent 72%); pointer-events: none; }
/* a demo swaps behind a short blur, so the next one arrives instead of cutting in */
.iphone .screen { transition: filter 260ms var(--ease-out), opacity 260ms var(--ease-out); }
.swap .iphone .screen { filter: blur(8px) saturate(0.8); opacity: 0.55; }

/* --------------------------------------------- light/dark: a circular wipe */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.icon-btn#appearance svg { transition: transform 500ms var(--ease-out); }
:root[data-theme="light"] .icon-btn#appearance svg { transform: rotate(90deg); }

/* --------------------------------------------------- themes band (from B) */
.themes-band { overflow: hidden; }
.marquee-wrap { overflow: hidden; }
.marquee { --gap: 28px; display: flex; gap: var(--gap); width: max-content; padding-block: 12px 28px; }
.marquee-track { display: flex; gap: var(--gap); }
.js .marquee { animation: marquee 70s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
.theme-card { width: 340px; flex: 0 0 auto; text-decoration: none; }
/* the board's own 12 pt top corners at the card's scale (9.72 px x 340/406),
   so the corner never eats into the suggestion bar */
.theme-card .kb-frame { border-radius: 8px; overflow: hidden; box-shadow: var(--frame-shadow), 0 0 0 1px var(--line); transition: transform 400ms var(--ease-out); }
.theme-card .kb-frame .kbd { width: 406px; zoom: calc(340 / 406); border-radius: 0; }
.theme-card p { margin-top: 14px; font-size: 15px; color: var(--dim); }
.theme-card p b { color: var(--text); font-weight: 560; }
@media (hover: hover) and (pointer: fine) { .theme-card:hover .kb-frame { transform: translateY(-6px); } }
.themes-foot { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; margin-top: 40px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-weight: 560; }
.link-arrow svg { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover svg { transform: translateX(3px); } }

/* ------------------------------- chapters: the pinned phone (themes page) */
.chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.chapter-stage { position: sticky; top: calc(var(--nav-h) + max(16px, (100dvh - var(--nav-h) - 760px) / 2)); height: max-content; justify-self: center; isolation: isolate; --pool-rgb: 70, 96, 255; }
.chapter-stage .iphone-fit { --s: 1.02; }
@media (max-height: 860px) { .chapter-stage .iphone-fit { --s: 0.9; } }
@media (max-height: 760px) { .chapter-stage .iphone-fit { --s: 0.8; } }
.chapter-stage::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 55%; width: 760px; height: 760px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--pool-rgb), 0.26), rgba(var(--pool-rgb), 0.07) 55%, transparent 75%); transition: background 900ms ease; pointer-events: none; }
.chapter-stage.swap .iphone .screen { filter: blur(8px) saturate(0.8); opacity: 0.55; }
.chapter-list { list-style: none; }
.chapter { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding-block: 48px; }
.chapter:first-child { min-height: 80vh; }
.chapter > * { transition: opacity 500ms var(--ease-out), filter 500ms var(--ease-out); }
.js .chapter:not(.on) > * { opacity: 0.18; filter: blur(2px); }
.chapter h2, .chapter h3 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 20px; }
.chapter .body { font-size: 19px; color: var(--dim); max-width: 36em; }
.rail { position: fixed; left: max(16px, calc(50vw - var(--maxw) / 2 - 64px)); top: 50%; transform: translateY(-50%); z-index: 5; list-style: none; display: grid; gap: 10px; opacity: 0; pointer-events: none; transition: opacity 400ms ease; }
.rail.show { opacity: 1; pointer-events: auto; }
.rail a { display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: height 300ms var(--ease-out), background-color 300ms ease; }
.rail a[aria-current="true"] { height: 26px; background: var(--text); }
@media (max-width: 1360px) { .rail { display: none; } }
@media (max-width: 960px) {
  .chapters { grid-template-columns: 1fr; gap: 0; }
  .chapter-stage { order: -1; top: var(--nav-h); z-index: 3; width: 100%; display: flex; justify-content: center; padding: 8px 0 12px; background: linear-gradient(var(--bg) 82%, transparent); }
  .chapter-stage .iphone-fit { --s: 0.78; --ph: 330px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px); mask-image: linear-gradient(180deg, transparent 0, #000 40px); }
  .chapter-stage .iphone-fit .iphone { top: calc((var(--ph) - 726px) * var(--s)); }
  .chapter { min-height: 62vh; justify-content: flex-end; padding-block: 20px 6vh; }
  .chapter:first-child { min-height: 58vh; }
}

/* --------------------------------------- tools: summary cards that open */
.tb { position: relative; }
.tb.has-demo { padding-right: 16px; }
.tb-open { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.tb-open:focus-visible { outline-offset: 2px; }
.tb .watch { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--accent); }
.tb .watch svg { width: 13px; height: 13px; transition: transform 200ms var(--ease-out); }
.tb.has-demo { cursor: pointer; transition: border-color 200ms ease, transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tb.has-demo:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(20, 40, 120, 0.55); border-color: var(--line-strong); }
  .tb.has-demo:hover .watch svg { transform: translateX(2px); }
}
.tb.has-demo:active { transform: scale(0.985); }
.tb.opened { visibility: hidden; }

/* the expanded tool: a modal panel that grows out of its card */
.tool-sheet { transform-origin: 0 0; position: fixed; inset: 0; margin: auto; width: min(1080px, calc(100vw - 48px)); height: min(820px, calc(100dvh - 48px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--r-xl); background: var(--card); color: var(--text); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--line); overflow: hidden; }
.tool-sheet::backdrop { background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); opacity: 0; transition: opacity 360ms var(--ease-out); }
.tool-sheet.shown::backdrop { opacity: 1; }
.ts-inner { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); }
.ts-copy { padding: 56px 48px 32px 56px; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.ts-copy > * { transition: opacity 360ms var(--ease-out), transform 460ms var(--ease-out), filter 360ms var(--ease-out); }
.tool-sheet:not(.shown) .ts-copy > *, .ts-copy.swap > * { opacity: 0; transform: translateY(10px); filter: blur(4px); }
.tool-sheet.shown .ts-copy > :nth-child(2) { transition-delay: 40ms; }
.tool-sheet.shown .ts-copy > :nth-child(3) { transition-delay: 80ms; }
.tool-sheet.shown .ts-copy > :nth-child(4) { transition-delay: 120ms; }
.ts-copy .kicker { margin-bottom: 14px; }
.ts-copy h2 { font-size: clamp(34px, 3.8vw, 52px); margin-bottom: 20px; }
.ts-copy .lead { font-size: 19px; }
.ts-copy .points { margin-top: 26px; }
.ts-nav { margin-top: auto; padding-top: 32px; display: flex; align-items: center; gap: 10px; }
.ts-nav .count { margin-right: auto; font-size: 14px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ts-nav button { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.ts-nav button:active { transform: scale(0.92); }
.ts-nav svg { width: 20px; height: 20px; }
.ts-stage { position: relative; display: grid; place-items: center; background: var(--bg-2); isolation: isolate; overflow: hidden; }
/* while the panel grows out of its card only its surface moves; what is in
   it arrives once it has nearly landed, so nothing is seen stretched */
.ts-stage, .ts-close { transition: opacity 320ms var(--ease-out); }
.tool-sheet:not(.shown) .ts-stage, .tool-sheet:not(.shown) .ts-close { opacity: 0; transition-duration: 120ms; }
.tool-sheet:not(.shown) .ts-copy > * { transition-duration: 120ms; transition-delay: 0s !important; }
.ts-stage.swap .iphone .screen { filter: blur(8px) saturate(0.8); opacity: 0.55; }
.ts-stage::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 55%; width: 640px; height: 640px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--pool), transparent 74%); }
.ts-stage .iphone-fit { --s: 1; }
@media (max-height: 860px) { .ts-stage .iphone-fit { --s: 0.9; } }
@media (max-height: 760px) { .ts-stage .iphone-fit { --s: 0.78; } }
.ts-close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line); transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.ts-close:active { transform: scale(0.92); }
.ts-close svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .ts-nav button:hover, .ts-close:hover { background: var(--card-2); } }
@media (max-width: 860px) {
  .tool-sheet { width: 100vw; height: calc(100dvh - 24px); margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .ts-inner { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .ts-stage { order: -1; padding-top: 12px; }
  .ts-stage .iphone-fit { --s: 0.82; --ph: 400px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 50px); mask-image: linear-gradient(180deg, transparent 0, #000 50px); }
  .ts-stage .iphone-fit .iphone { top: calc((var(--ph) - 726px) * var(--s)); }
  .ts-copy { padding: 24px 20px calc(16px + env(safe-area-inset-bottom)); }
  .ts-copy h2 { font-size: 32px; margin-bottom: 12px; }
  .ts-copy .lead { font-size: 17px; }
  .ts-nav { padding-top: 20px; }
}
@media (max-width: 860px) and (max-height: 760px) { .ts-stage .iphone-fit { --s: 0.72; --ph: 340px; } }
html.sheet-open { overflow: hidden; }

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rise, .js .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero .stage > .iphone-fit { animation: none; }
  .js .chapter:not(.on) > * { filter: none; }
  .js .marquee { animation: none; }
  .themes-band .marquee-wrap { overflow-x: auto; }
  .swap .iphone .screen, .chapter-stage.swap .iphone .screen { filter: none; opacity: 1; }
  .tool-sheet:not(.shown) .ts-copy > *, .ts-copy.swap > * { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .top { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .tool-sheet::backdrop { background: var(--bg); backdrop-filter: none; }
}

/* phones: the hero shows the bottom of the iPhone, so the keyboard is in the
   first screen (Version B's decision), and the copy sits tighter above it */
@media (max-width: 960px) {
  .hero .wrap { gap: 28px; }
  .hero .cta, .proof { margin-top: 26px; }
  .hero .stage > .iphone-fit { --ph: 430px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px); mask-image: linear-gradient(180deg, transparent 0, #000 56px); }
  .hero .stage > .iphone-fit .iphone { top: calc((var(--ph) - 726px) * var(--s)); }
  .hero .stage > .iphone-fit::before { top: 70%; }
}

/* the hero's backlight, from Version B: indigo pooled behind the phone with a
   violet lift above it, replacing the plain top glow */
.hero::before {
  inset: 0; height: auto;
  background:
    radial-gradient(44% 52% at 74% 56%, rgba(48, 72, 190, 0.42), transparent 70%),
    radial-gradient(32% 34% at 66% 28%, rgba(155, 107, 255, 0.18), transparent 70%);
}
:root[data-theme="light"] .hero::before {
  background:
    radial-gradient(44% 52% at 74% 56%, rgba(70, 110, 255, 0.16), transparent 70%),
    radial-gradient(32% 34% at 66% 28%, rgba(155, 107, 255, 0.10), transparent 70%);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hero::before {
  background:
    radial-gradient(44% 52% at 74% 56%, rgba(70, 110, 255, 0.16), transparent 70%),
    radial-gradient(32% 34% at 66% 28%, rgba(155, 107, 255, 0.10), transparent 70%);
} }
.hero .stage > .iphone-fit::before { display: none; }
/* stacked on a phone, the light sits behind the phone itself rather than a
   fixed spot in a hero whose height depends on the copy */
@media (max-width: 960px) {
  .hero::before { display: none; }
  .hero .stage::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: 150%; height: 520px; transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(48% 50% at 50% 55%, rgba(48, 72, 190, 0.42), transparent 70%), radial-gradient(36% 30% at 50% 22%, rgba(155, 107, 255, 0.16), transparent 70%); }
  :root[data-theme="light"] .hero .stage::before { background: radial-gradient(48% 50% at 50% 55%, rgba(70, 110, 255, 0.16), transparent 70%); }
}
@media (max-width: 960px) and (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hero .stage::before { background: radial-gradient(48% 50% at 50% 55%, rgba(70, 110, 255, 0.16), transparent 70%); } }

/* Desktop: the copy beside a tall phone stays in view while its section
   scrolls, and leaves with the section (sticky inside its own grid cell). */
@media (min-width: 961px) {
  .hero .wrap, .duo { align-items: start; }
  .hero .copy, .duo > :not(.stage) { position: sticky; top: calc(var(--nav-h) + 40px); }
  .duo > :not(.stage) { top: calc(var(--nav-h) + max(40px, (100dvh - var(--nav-h)) / 2 - 260px)); }
}

/* try: the intro is one line of copy, so the phone starts near the top; the
   "the app has it all" box leads the right-hand column instead */
.try-head { display: block; max-width: 760px; margin-bottom: 32px; }
.try-side { display: grid; gap: 20px; align-content: start; min-width: 0; }
.try-side .taste ul { margin-bottom: 14px; }
/* the try phone keeps its own sticky placement (the shared .stage rule above
   would make it relative and turn its sticky offset into a plain 88px shift) */
.try-stage.stage { position: sticky; top: calc(var(--nav-h) + 24px); }
@media (max-width: 960px) { .try-stage.stage { position: relative; top: 0; } }

/* a "Learn more" tool: the same panel, text only, sized to its words */
.tool-sheet.text-only { width: min(680px, calc(100vw - 48px)); height: fit-content; max-height: calc(100dvh - 48px); }
.tool-sheet.text-only .ts-inner { grid-template-columns: 1fr; height: auto; }
.tool-sheet.text-only .ts-stage { display: none; }
.tool-sheet.text-only .ts-copy { padding: 56px 56px 32px; }
.tool-sheet.text-only .ts-copy h2 { padding-right: 40px; }
@media (max-width: 860px) {
  .tool-sheet.text-only { width: 100vw; height: auto; max-height: calc(100dvh - 24px); }
  .tool-sheet.text-only .ts-copy { padding: 28px 20px calc(16px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------- privacy page (from B) */
.privacy-head::before { background: radial-gradient(40% 70% at 70% 30%, rgba(110, 90, 255, 0.16), transparent 70%); inset: 0; height: auto; }
.display { font-size: clamp(44px, 6.4vw, 92px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 660; }
.section { padding-block: clamp(96px, 13vw, 168px); position: relative; }
.icon { display: inline-flex; width: 1.1em; height: 1.1em; flex: 0 0 auto; vertical-align: -0.15em; }
.icon svg { width: 100%; height: 100%; fill: currentColor; }
.ledger { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
.ledger > div { padding: 30px 0 34px; border-top: 1px solid var(--line); }
.ledger .icon { display: block; width: 28px; height: 28px; color: var(--accent); margin-bottom: 16px; }
.ledger h2, .ledger h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 8px; }
.ledger p { color: var(--dim); font-size: 16px; }
@media (max-width: 960px) { .ledger { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ledger { grid-template-columns: 1fr; } }
.close { text-align: center; overflow: clip; isolation: isolate; }
.close::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 55% at 50% 60%, var(--pool), transparent 72%); }
.close .app-icon { width: 112px; height: 112px; border-radius: 26px; margin: 0 auto 36px; box-shadow: var(--frame-shadow), 0 0 0 1px var(--line); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.close .cta-row { justify-content: center; margin-top: 40px; }
.btn .icon { width: 20px; height: 20px; }
/* the Apple glyph cropped to its own bounds, at the text's height, nudged up:
   its weight sits low (the leaf is small), so true centre reads as dropped */
.btn .icon.apple { width: 16px; height: 20px; margin-top: -3px; }

/* the text caret: iOS's 2 pt blue bar. It was an empty inline span, so it
   never showed and the trackpad looked like it did nothing. Every move
   re-renders it, which restarts the blink: solid while it travels, blinking
   once it rests, as on the phone. */
/* zero width in the text flow, the bar drawn over it: an inline-block here
   is a line-break opportunity, so moving the caret re-wrapped the text */
.iphone .field .caret { position: relative; display: inline; }
.iphone .field .caret::after { content: ""; position: absolute; left: -1px; top: -0.1em; width: 2px; height: 1.22em; border-radius: 1px; background: #0a84ff; animation: caret-blink 1.05s steps(1, end) infinite; animation-delay: 0.5s; }
@keyframes caret-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .iphone .field .caret::after { animation: none; } }
/* the expanded clipboard: the keyboard grows to 72% of the 708 px screen less
   the dock, and the chat above it gives way, as iOS resizes the keyboard */
.clip-area { transition: height 280ms var(--ease-out); }
.kbd.lk .clip-in, .kbd.lk .clip-in .clip-area { transition: height 280ms var(--ease-out); }
.kbd.lk .clip-in.expanded { height: 430px; }
.kbd.lk .clip-in.expanded .clip-area { height: 382px; }

/* Clipboard grids, sized as ClipboardView sizes them. A vertical-grid tile is
   a square a quarter of the page wide, set explicitly: an aspect-ratio box
   with clipped overflow may shrink to nothing, which let full rows overlap.
   The horizontal grid uses the SAME tile, as many rows of it as fit (at
   least two), so expanding adds rows instead of stretching two. */
.kbd.lk .clip-in { container-type: inline-size; }
.kbd.lk .clip-in .clip-area { --tile: calc((100cqw - 12px - 3 * 4.86px) / 4); }
.kbd.lk .clip-in .clip-area.vgrid { grid-auto-rows: var(--tile); }
.kbd.lk .clip-in .clip-area.vgrid .tile { aspect-ratio: auto; height: var(--tile); }
.kbd.lk .clip-in .clip-area.hgrid { grid-template-rows: repeat(auto-fill, var(--tile)); grid-auto-columns: var(--tile); gap: 4.86px; }
.kbd.lk .clip-in .clip-area.hgrid .tile { aspect-ratio: auto; height: var(--tile); }
.clip-area { cursor: grab; }
.clip-area.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.clip-area.dragging * { pointer-events: none; }