/* kern.do: one stylesheet for every page.
   Colours are Kern's own tokens (docs/colour-system.md): ink and Clay greys, and the four colours of the
   iPhone's Home (purple Inbox, yellow Today, red Upcoming, green To Do). Light or dark follows the browser. */

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

:root {
  color-scheme: light dark;
  --bg: #FFFFFF;
  --card: #F5F5F2;
  --ink: #1B1818;
  --ink2: #7B7270;
  --ink3: #9C9691;
  --line: #E0DED9;
  --control: #EFEFEB;
  --control-card: #E0DED9;
  --fill: #1B1818;
  --on-fill: #FFFFFF;
  --purple: #896CBB; --purple-tint: #E8E1F1; --purple-text: #6D509C;
  --red: #E7633C;    --red-tint: #F5CEC1;    --red-text: #A12D00;
  --yellow: #F0BE4D; --yellow-tint: #FAEBC4; --yellow-text: #805E00;
  --green: #91A86D;  --green-tint: #DEE5D3;  --green-text: #51652D;
  --rule: var(--line);
  --lift: 0 1px 2px rgba(27, 24, 24, 0.05), 0 30px 70px -30px rgba(27, 24, 24, 0.32);
  --lift-sm: 0 1px 2px rgba(27, 24, 24, 0.06), 0 12px 32px -14px rgba(27, 24, 24, 0.28);
  --float: drop-shadow(0 24px 40px rgba(27, 24, 24, 0.22));
  --font: Geist, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1120px;
  --gutter: 24px;
  --nav: 64px;
  /* the App Store badge and its QR button: one height, one radius */
  --chunk: 3.55rem;
  --chunk-radius: 1rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Dark: when the browser is dark and the footer's switch doesn't say Light, or whenever it says Dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131212;
    --card: #2A2727;
    --ink: #FAFAF8;
    --ink2: #9C9691;
    --ink3: #7B7270;
    --line: #423D3D;
    --control: #2A2727;
    --control-card: #423D3D;
    --fill: #FAFAF8;
    --on-fill: #131212;
    --purple-tint: #362D45; --purple-text: #B093E5;
    --red-tint: #532A1F;    --red-text: #FF825D;
    --yellow-tint: #554624; --yellow-text: #F0BE4D;
    --green-tint: #393F2D;  --green-text: #A0B87C;
    --lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 30px 70px -30px rgba(0, 0, 0, 0.85);
    --lift-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -14px rgba(0, 0, 0, 0.8);
    --float: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.7));
  }
}
:root[data-theme="dark"] {
    --bg: #131212;
    --card: #2A2727;
    --ink: #FAFAF8;
    --ink2: #9C9691;
    --ink3: #7B7270;
    --line: #423D3D;
    --control: #2A2727;
    --control-card: #423D3D;
    --fill: #FAFAF8;
    --on-fill: #131212;
    --purple-tint: #362D45; --purple-text: #B093E5;
    --red-tint: #532A1F;    --red-text: #FF825D;
    --yellow-tint: #554624; --yellow-text: #F0BE4D;
    --green-tint: #393F2D;  --green-text: #A0B87C;
    --lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 30px 70px -30px rgba(0, 0, 0, 0.85);
    --lift-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -14px rgba(0, 0, 0, 0.8);
    --float: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.7));
  }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (max-width: 719px) { :root { --gutter: 16px; --nav: 56px; } }

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--font);
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, figure { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
::selection { background: var(--yellow-tint); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100%, calc(var(--wrap) + 2 * var(--gutter))); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Kern's icon set (docs/brand/icons): one line with round ends, Regular 1.75 from 14 to 19 px, Light 1.25 from 20 px */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.points .i, .grid8 .i, .facts .i { stroke-width: 1.25; }
.mark { width: 22px; height: 22px; flex: none; }
.mono { font-family: var(--mono); }

/* --- Navigation ---------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  height: var(--nav);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600; font-size: 21px; letter-spacing: -0.035em; }
.logo .mark { width: 22px; height: 22px; }
.links { display: flex; align-items: center; gap: 4px; }
.links a:not(.btn) { padding: 6px 12px; border-radius: 8px; color: var(--ink2); text-decoration: none; font-size: 15px; font-weight: 450; transition: color 150ms ease, background 150ms ease; }
.links a:not(.btn):hover { color: var(--ink); background: var(--control); }
.links a[aria-current="page"] { color: var(--ink); }
@media (max-width: 719px) { .links a.hide-sm { display: none; } }

/* --- Buttons (Kern's: primary black, secondary grey) -------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 9px;
  background: var(--fill); color: var(--on-fill);
  font: 500 15px/1 var(--font); text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer;
  transition: transform 170ms var(--ease), opacity 150ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.secondary { background: var(--control); color: var(--ink); }
.btn.small { height: 32px; padding: 0 12px; font-size: 14px; border-radius: 8px; margin-left: 6px; }
.btn .i { width: 16px; height: 16px; }
.arrow-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: none; color: var(--ink); }
.arrow-link .i { width: 16px; height: 16px; transition: transform 170ms var(--ease); }
.arrow-link:hover .i { transform: translateX(3px); }

/* --- The Mac download and the App Store badge ------------------------------
   Two equal chunky buttons, the Mac first (as the pictures below run: the Mac, then the iPhone). Pointing at the
   App Store badge shows a scan card with qr.svg (the App Store link), painted through a mask so it follows the
   theme. */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.cta .store { display: flex; align-items: center; gap: 0.5rem; }
.badge {
  display: inline-flex; align-items: center; gap: 0.65rem;
  height: var(--chunk); padding: 0 1.4rem 0 1.15rem; border-radius: var(--chunk-radius);
  background: var(--fill); color: var(--on-fill); text-decoration: none;
  transition: transform 170ms cubic-bezier(0.2, 0.65, 0.2, 1);
}
.badge:hover, .badge:focus-visible { transform: translateY(-2px); }
.badge .apple { width: 1.4rem; height: auto; fill: currentColor; margin-top: -0.12rem; }
.badge-text { display: grid; gap: 0.1rem; text-align: left; line-height: 1; }
.badge-text small { font-size: 0.72rem; font-weight: 450; letter-spacing: -0.005em; }
.badge-text strong { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }
.badge.macdl .apple { width: 1.5rem; margin-top: 0; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

.store { position: relative; }
.qr-pop {
  position: absolute; bottom: calc(100% + 0.8rem); left: 50%; translate: -50% 0.5rem; z-index: 5; pointer-events: none; display: none;
  width: 15.5rem; padding: 1.25rem;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 1.75rem; box-shadow: var(--lift);
  text-align: center; opacity: 0; visibility: hidden;
  transition: opacity 160ms ease, translate 160ms ease, visibility 160ms;
}
/* Joost, 17 Oct: the scan card on the badge itself, no separate QR button. Only where pointing is possible and the
   screen is wider than a phone (on a phone you're already holding it). */
@media (hover: hover) and (min-width: 40rem) {
  .qr-pop { display: block; }
  .store:hover .qr-pop, .store:focus-within .qr-pop { opacity: 1; visibility: visible; translate: -50% 0; }
}
.qr-pop p { margin-bottom: 0.9rem; color: var(--ink2); font-size: 0.95rem; line-height: 1.2; }
.qr-code {
  display: block; width: 100%; aspect-ratio: 1; background: var(--ink);
  -webkit-mask: url(/assets/qr.svg) center / contain no-repeat;
  mask: url(/assets/qr.svg) center / contain no-repeat;
}

/* --- Devices ------------------------------------------------------------- */
/* An iPhone 18 Pro: the simulator's own screenshot (status bar included) inside a drawn bezel. The bezel is the
   screen's margin, not the phone's padding: a percentage margin measures the phone, a percentage padding would
   measure whatever the phone sits in. */
.phone {
  position: relative;
  display: flow-root;
  width: 100%;
  background: #0E0D0D;
  border-radius: 17% / 7.8%;
  box-shadow: var(--lift), inset 0 0 0 1.5px #3A3636;
  container-type: inline-size;
}
.phone > picture { margin: 2.9%; }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 1206 / 2622; border-radius: 14.6% / 6.75%; background: var(--bg); object-fit: cover; }
/* The Dynamic Island, measured off a recording (the simulator's still screenshots leave it out): 284 x 110 px at
   461, 42 on the 1206 px screen, which sits 2.9% in from the bezel. 1cqw is 1% of the phone's width. */
.phone::after { content: ""; position: absolute; left: 38.91cqw; top: 6.18cqw; width: 22.18cqw; height: 8.59cqw; border-radius: 99px; background: #000; pointer-events: none; }
/* A Mac window: the app's page at 2x (a 1200 x 766 window), with the traffic lights macOS draws there
   (trafficLightPosition 18, 19; 12 px lights 8 px apart). */
.mac {
  position: relative; width: 100%;
  border-radius: clamp(6px, 1vw, 12px);
  overflow: hidden;
  box-shadow: var(--lift), 0 0 0 1px var(--line);
  background: var(--card);
}
.mac img { width: 100%; height: auto; }
.mac .lights { position: absolute; left: 1.5%; top: 2.48%; display: flex; gap: 15.4%; width: 4.33%; }
.mac .lights i { flex: none; width: 23.1%; aspect-ratio: 1; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.mac .lights i:nth-child(2) { background: #FEBC2E; }
.mac .lights i:nth-child(3) { background: #28C840; }
/* Quick Entry and the voice bar float over whatever app is in front */
.panel, .voicebar { width: 100%; filter: var(--float); }
picture { display: block; }

/* --- Hero ----------------------------------------------------------------
   The words left with the buttons beside them, then a full-width band the Mac and the iPhone rise out of
   (Joost's pick, 17 Oct: "A band under the words", after Cursor and Tana). */
/* the first screen is exactly one window tall, so the band's bottom edge is in view when the page opens */
.hero { padding-top: clamp(40px, 5vw, 72px); min-height: min(calc(100svh - var(--nav)), 1040px); display: flex; flex-direction: column; }
.hero-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end; }
.hero h1 { font-size: clamp(38px, 3.9vw, 60px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 600; }
.hero .lede { margin-top: 20px; max-width: 31em; font-size: 18px; line-height: 1.5; color: var(--ink2); letter-spacing: -0.01em; }
.hero-head .cta { flex-wrap: nowrap; }
/* the buttons sit high on the page here, so the scan card opens downward, over the band */
/* on the first screen the card opens downward and hangs from the badge's right edge (it's the rightmost button) */
.hero .qr-pop { bottom: auto; top: calc(100% + 0.8rem); left: auto; right: 0; translate: 0 -0.5rem; }
@media (hover: hover) and (min-width: 40rem) { .hero .store:hover .qr-pop, .hero .store:focus-within .qr-pop { translate: 0 0; } }
/* the band clips its bottom and sides only, so the pictures can rise past its top edge while the page scrolls */
/* the band takes what's left of the window (never less than its min, never so much the devices end above its edge) */
.hero-band { margin-top: clamp(40px, 6vw, 96px); flex: 1 1 0; min-height: clamp(280px, 24vw, 360px); max-height: calc(34vw + 140px); overflow-x: clip; clip-path: inset(-240px 0 0 0); background: var(--card); }
.hero-band-in { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(24px, 2.6vw, 40px); padding-top: clamp(40px, 4.4vw, 64px); }
.hero-band .mac { flex: 0 1 73%; min-width: 0; }
.hero-band .hero-phone { flex: none; width: 24%; margin-top: calc(-1 * clamp(8px, 1.1vw, 16px)); }
@media (max-width: 1023px) {
  .hero-head { grid-template-columns: minmax(0, 1fr); }
  .hero-head .cta { margin-top: 28px; flex-wrap: wrap; }
}
@media (max-width: 719px) {
  .hero-band { min-height: 340px; max-height: none; }
  .hero-band-in { justify-content: center; padding-top: 36px; }
  .hero-band .mac { display: none; }
  .hero-band .hero-phone { width: min(80%, 320px); margin-top: 0; }
}

/* A calm entrance, only on load, only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 900ms var(--ease) both; }
  .rise.d1 { animation-delay: 80ms; } .rise.d2 { animation-delay: 160ms; } .rise.d3 { animation-delay: 260ms; } .rise.d4 { animation-delay: 380ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .hero-phone { translate: 0 calc(var(--drift, 0) * -1px); }
  .hero-band .mac { translate: 0 calc(var(--drift-mac, 0) * -1px); }
  /* below the fold, things come up as they arrive (site.js marks only what starts out of view) */
  .later { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
  .later.in { opacity: 1; transform: none; }
}

/* --- The statement and the three proof points ---------------------------- */
.statement { padding-top: clamp(120px, 15vw, 200px); }
.statement p { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.18; letter-spacing: -0.03em; font-weight: 550; color: var(--ink3); max-width: 25em; }
.statement p strong { color: var(--ink); font-weight: 550; }
.proofs { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.proofs a { display: block; padding: 24px 24px 8px 0; text-decoration: none; }
.proofs a + a { padding-left: 24px; border-left: 1px solid var(--line); }
.proofs .num { display: flex; align-items: center; gap: 10px; font: 500 13px/1 var(--mono); color: var(--ink3); }
.proofs h2 { margin-top: 18px; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
.proofs p { margin-top: 8px; color: var(--ink2); font-size: 15.5px; line-height: 1.5; }
.proofs a:hover h2 { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
@media (max-width: 719px) {
  .proofs { grid-template-columns: 1fr; }
  .proofs a, .proofs a + a { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}
.dot-purple { color: var(--purple); } .dot-yellow { color: var(--yellow); } .dot-red { color: var(--red); } .dot-green { color: var(--green); }

/* --- Feature sections ---------------------------------------------------- */
.feature { padding-top: clamp(120px, 15vw, 200px); }
.feature-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; }
.feature-head .num { display: flex; align-items: center; gap: 10px; font: 500 13px/1 var(--mono); color: var(--ink3); margin-bottom: 20px; }
.feature-head .num .i, .feature-head .num .mark { width: 18px; height: 18px; }
.feature h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -0.042em; }
.feature-head p { color: var(--ink2); font-size: 18px; line-height: 1.55; max-width: 32em; }
.feature-head p strong { color: var(--ink); font-weight: 500; }
@media (max-width: 899px) { .feature-head { grid-template-columns: 1fr; } }

/* The stage: a calm tile the visuals sit in. Phones are cut off by its bottom edge (rising out of it), or with .hang
   by its top edge (hanging into it, so their lower half shows). */
.stage {
  position: relative; margin-top: clamp(40px, 5vw, 64px);
  background: var(--card); border-radius: clamp(20px, 2.4vw, 28px);
  overflow: hidden;
  display: flex; justify-content: center; align-items: flex-start; gap: clamp(20px, 4vw, 56px);
  padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 56px) 0;
  height: clamp(460px, 52vw, 620px);
}
.stage .phone { width: clamp(230px, 24vw, 300px); flex: none; }
.stage.bottom { padding-top: 0; padding-bottom: clamp(36px, 5vw, 64px); }
.stage .hang { align-self: flex-end; border-top-left-radius: 0; border-top-right-radius: 0; }
.phone.hang::after { display: none; }
.phone.hang > picture { margin-top: 0; }
@media (max-width: 719px) {
  .stage { height: 520px; padding-top: 32px; }
  .stage.bottom { padding-top: 0; padding-bottom: 28px; }
  .stage .phone { width: min(78%, 300px); }
}
@media (max-width: 719px) { .wide-only { display: none !important; } }
@media (min-width: 720px) { .narrow-only { display: none !important; } }

/* the chat with Claude, drawn (Claude's own app is not pictured) */
.chat {
  flex: none; align-self: center; width: min(390px, 42%);
  background: var(--bg); border-radius: 22px; box-shadow: var(--lift-sm), 0 0 0 1px var(--line);
  padding: 18px; display: grid; gap: 12px; font-size: 15px; line-height: 1.45;
  margin-top: -40px;
}
.chat .who { font: 500 12px/1 var(--mono); color: var(--ink3); margin-bottom: 6px; display: block; }
.chat .me { justify-self: end; max-width: 86%; background: var(--control); padding: 10px 14px; border-radius: 16px 16px 4px 16px; }
.chat .ai { max-width: 96%; }
.chat .tool { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--mono); color: var(--ink2); background: var(--card); border: 1px solid var(--line); padding: 7px 10px; border-radius: 8px; margin: 2px 0 8px; }
.chat .tool .mark { width: 13px; height: 13px; }
.chat .task-ref { color: var(--ink); font-weight: 500; }
/* 1.0: the Mac with Ask Claude in its menu, and the conversation in front of it */
.stage.claude { display: block; height: auto; padding: clamp(28px, 4vw, 56px); }
.stage.claude .mac { width: 80%; margin-left: auto; }
.stage.claude .chat { position: absolute; left: clamp(24px, 4vw, 56px); bottom: clamp(40px, 7vw, 96px); width: min(380px, 38%); margin: 0; z-index: 1; }
@media (max-width: 719px) {
  .stage.claude { display: flex; flex-direction: column; align-items: center; padding: 24px 16px 28px; gap: 24px; }
  .stage.claude .chat { position: static; width: 100%; }
  .stage.claude .phone { align-self: center; height: 380px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
}

/* 2.0: the Mac's task panel beside the iPhone's task sheet */
.stage.forward { align-items: flex-start; }
.stage.forward .mac { width: clamp(280px, 30vw, 360px); flex: none; }

/* 3.0: the iPhone's capture panel (its lower half) beside the Mac's voice bar over a window */
.stage.voice { align-items: center; }
.stage.voice .desk { position: relative; flex: 0 1 560px; min-width: 0; margin-bottom: 40px; }
.stage.voice .desk .voicebar { position: absolute; left: 50%; bottom: -26px; width: 64%; translate: -50% 0; }
@media (max-width: 719px) {
  .stage.voice { flex-direction: column; justify-content: flex-end; align-items: center; height: auto; gap: 20px; padding-top: 28px; }
  .stage.voice .desk { order: 1; flex: none; width: 100%; margin: 0 0 4px; }
  .stage.voice .desk .mac { display: none; }
  .stage.voice .desk .voicebar { position: static; width: 100%; translate: none; }
  .stage.voice .phone { order: 2; align-self: center; height: 380px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
}

/* 4.0: a window, with Quick Entry over it */
.stage.mac-stage { display: block; height: auto; padding: clamp(28px, 4vw, 56px) clamp(16px, 4vw, 56px) clamp(28px, 4vw, 56px); }
.mac-stage .mac { width: 100%; }
.mac-stage .panel { position: absolute; width: 54%; left: 50%; top: 56%; translate: -50% 0; }
@media (max-width: 719px) { .mac-stage .panel { position: relative; width: 100%; left: auto; top: auto; translate: none; margin-top: 16px; } }

/* the features under a stage */
.points { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 32px; }
.points.three { grid-template-columns: repeat(3, 1fr); }
.points div { min-width: 0; }
.points .i { width: 20px; height: 20px; color: var(--ink); margin-bottom: 14px; }
.points h3 { font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }
.points p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--ink2); }
@media (max-width: 899px) { .points, .points.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .points, .points.three { grid-template-columns: 1fr; gap: 22px; } .points .i { margin-bottom: 10px; } }
kbd { font: 500 0.88em/1 var(--mono); padding: 2px 5px; border-radius: 5px; background: var(--control); border: 1px solid var(--line); white-space: nowrap; }

/* the structure grid: eight things, no stage; hairlines between, rounded like the stages */
.grid8 { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: clamp(20px, 2.4vw, 28px); overflow: hidden; }
.grid8 div { padding: 24px; background: var(--bg); }
.grid8 .i { margin-bottom: 28px; color: var(--ink); }
.grid8 h3 { font-size: 16px; letter-spacing: -0.01em; }
.grid8 p { margin-top: 4px; font-size: 15px; color: var(--ink2); line-height: 1.5; }
@media (max-width: 899px) { .grid8 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .grid8 div { padding: 18px 16px; } .grid8 .i { margin-bottom: 18px; } }

/* --- Switch in minutes --------------------------------------------------- */
.switch-block { margin-top: clamp(120px, 15vw, 200px); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(28px, 4vw, 56px); border: 1px solid var(--line); border-radius: clamp(20px, 2.4vw, 28px); }
.switch-block h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -0.042em; }
.switch-block p { margin-top: 16px; color: var(--ink2); font-size: 18px; }
.switch-block .actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.switch-block .actions .note { color: var(--ink3); font-size: 15px; }
.prompt { background: var(--card); border-radius: 18px; padding: 20px; }
.prompt .who { font: 500 12px/1 var(--mono); color: var(--ink3); display: flex; justify-content: space-between; }
.prompt .say { margin-top: 14px; font-size: 17px; line-height: 1.5; }
.prompt .steps { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; display: grid; gap: 10px; font-size: 15px; color: var(--ink2); }
.prompt .steps li { display: flex; gap: 10px; align-items: baseline; }
.prompt .steps b { font: 500 12px/1 var(--mono); color: var(--ink3); min-width: 1.4em; }
@media (max-width: 899px) { .switch-block { grid-template-columns: 1fr; } }

/* --- Transparency -------------------------------------------------------- */
.who-table { margin-top: clamp(40px, 5vw, 56px); width: 100%; border-collapse: collapse; font-size: 16px; }
.who-table th, .who-table td { text-align: left; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.who-table th { font: 500 12.5px/1.2 var(--mono); color: var(--ink3); padding-top: 0; }
.who-table td:first-child { font-weight: 600; white-space: nowrap; width: 18%; }
.who-table td:last-child { color: var(--ink2); white-space: nowrap; width: 18%; padding-right: 0; }
.who-table td:nth-child(2) { color: var(--ink); }
@media (max-width: 719px) {
  .who-table thead { display: none; }
  .who-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .who-table td { padding: 0; border: 0; width: auto !important; }
  .who-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--ink2); }
  .who-table td:last-child { grid-column: 2; grid-row: 1; font-size: 14px; }
}
.links-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 28px; }

/* --- Closing call -------------------------------------------------------- */
.closing { padding: clamp(140px, 17vw, 220px) 0 clamp(96px, 12vw, 160px); text-align: center; }
.closing .mark { width: 56px; height: 56px; margin: 0 auto 28px; }
.closing h2 { font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -0.048em; }
.closing p { margin-top: 18px; color: var(--ink2); font-size: 19px; }
.closing .cta { margin-top: 36px; justify-content: center; }

/* --- Footer -------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); padding: 40px 0 56px; font-size: 15px; color: var(--ink2); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; }
.foot .logo { font-size: 18px; color: var(--ink); }
.foot .logo .mark { width: 18px; height: 18px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--ink); }
.foot .legal { width: 100%; color: var(--ink3); font-size: 14px; }

/* --- Text pages (security, privacy, switch, task link, 404) -------------- */
.page { padding: clamp(56px, 8vw, 96px) 0 clamp(80px, 10vw, 128px); }
.page .wrap { max-width: calc(760px + 2 * var(--gutter)); }
.page h1 { font-size: clamp(38px, 5.4vw, 60px); line-height: 1.02; letter-spacing: -0.045em; }
.page .lede { margin-top: 20px; font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--ink2); }
.page .date { margin-top: 14px; font-size: 15px; color: var(--ink3); }
.page h2 { margin-top: 64px; font-size: 26px; line-height: 1.2; letter-spacing: -0.03em; }
.page h2 + p, .page h2 + ul, .page h2 + .who-table { margin-top: 14px; }
.page p, .page ul { margin-top: 12px; }
.page ul { padding-left: 20px; }
.page li { margin: 0 0 8px; }
.page li::marker { color: var(--ink3); }
.page a { text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.page a:hover { text-decoration-color: currentColor; }
.page .who-table { margin-top: 20px; }
.facts { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.facts div { background: var(--bg); padding: 22px; }
.facts .i { margin-bottom: 16px; }
.facts h3 { font-size: 16px; letter-spacing: -0.01em; }
.facts p { margin-top: 4px; font-size: 15px; color: var(--ink2); line-height: 1.5; }
@media (max-width: 599px) { .facts { grid-template-columns: 1fr; } }
.toc { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px; }
.toc a { font-size: 14px; padding: 6px 12px; border-radius: 99px; background: var(--control); text-decoration: none; color: var(--ink2); }
.toc a:hover { color: var(--ink); }

/* a short page centred in the window: switch, the task link, 404 */
.solo { min-height: calc(100svh - var(--nav) - 140px); display: grid; align-content: center; padding: 64px 0; }
.solo .wrap { max-width: calc(640px + 2 * var(--gutter)); }
.solo .cta { margin-top: 36px; }
.solo .tasknum { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--mono); color: var(--ink2); background: var(--control); padding: 8px 12px; border-radius: 99px; margin-bottom: 28px; }
.solo .tasknum .mark { width: 15px; height: 15px; color: var(--yellow); }

[hidden] { display: none !important; }
.solo h1 { font-size: clamp(38px, 5.4vw, 60px); line-height: 1.02; letter-spacing: -0.045em; }
.solo .lede { margin-top: 20px; font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--ink2); }

/* --- Appearance switch (the footer) ------------------------------------- */
.theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; border: 1px solid var(--line); }
.theme button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 99px; background: none; color: var(--ink3); cursor: pointer; transition: color 150ms ease, background 150ms ease; }
.theme button:hover { color: var(--ink); }
.theme button[aria-pressed="true"] { background: var(--control); color: var(--ink); }
.theme .i { width: 16px; height: 16px; }
.foot .legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }