/* Postpone It, the website (Phase 12 S4b). One stylesheet for every relaunch page: home, privacy, terms, support,
   join, legal, press and the 404. The old pages (content/<code>.json) keep assets/style.css.

   The tokens are the app's own (apple/PostponeItDesign ThemeData.swift, DESIGN.md §2-4, theme "Calm paper"):
   warm stone neutrals, one accent (amber) for what needs attention, sage only for "released". Dark is its own set,
   not the light one inverted. Type: system-ui (SF on Apple devices), SF Pro Rounded for display like the app's
   titles. Scale 14/16/18/22/28/40/56, 8-pt spacing, content 1120 wide on 12 columns, radii 12/20/28.
   Shadows belong to devices only (and to the floating menus, which sit above the page like the app's glass). */

:root {
  color-scheme: light;

  /* colour: Calm paper, light (ThemeData.light(.calmPaper)) */
  --canvas: #F7F3EC;
  --canvas-deep: #F0EAE1;
  --wash: #FFF5ED;
  --surface: #FFFFFF;
  --elevated: #FEF9F3;
  --subtle: #ECE7E1;
  --zebra: #FAF7F2;
  --separator: #DBD7D0;
  --border: #C2BDB7;
  --text: #201C18;
  --text-2: #6C6863;
  --text-3: #77736E;
  --on-accent: #FFFFFF;
  --accent: #B25F00;
  --accent-end: #995100;
  --accent-text: #944E00;
  --accent-tint: #FFE8D7;
  --release: #3D6646;
  --release-tint: #DEF1E1;
  --bar: rgba(247, 243, 236, 0.8);
  --bar-line: rgba(32, 28, 24, 0.08);

  /* member colours (D30 dots: MemberDotColor.swift) */
  --m-1: #D98A1F;
  --m-2: #D95A3F;
  --m-3: #C2386B;
  --m-4: #7B47B5;
  --m-5: #2F6BD0;

  /* devices: the only things with real shadows */
  --device-edge: #D3CDC5;
  --shadow-device:
    0 1px 1px rgba(32, 28, 24, 0.06),
    0 4px 8px rgba(32, 28, 24, 0.06),
    0 16px 32px -6px rgba(32, 28, 24, 0.14),
    0 36px 64px -16px rgba(32, 28, 24, 0.22);
  --shadow-window:
    0 0 0 1px rgba(32, 28, 24, 0.1),
    0 6px 16px rgba(32, 28, 24, 0.06),
    0 24px 48px -12px rgba(32, 28, 24, 0.14),
    0 56px 112px -28px rgba(32, 28, 24, 0.24);
  --shadow-menu: 0 12px 32px -8px rgba(32, 28, 24, 0.18), 0 2px 6px rgba(32, 28, 24, 0.06);

  /* type */
  --font-display: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  /* roles, phone first; they step up at 640 and 1024 */
  --t-hero: var(--fs-40);
  --t-h2: var(--fs-28);
  --t-h3: var(--fs-22);
  --t-line: var(--fs-22);
  --t-intro: var(--fs-18);
  --t-body: var(--fs-16);
  --t-closing: var(--fs-40);

  /* space (8-pt) and layout */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-16: 128px;
  --content: 1120px;
  --gutter: 16px;
  --gap: 16px;
  --bar-h: 56px;
  --section: var(--s-8);
  --r-12: 12px;
  --r-20: 20px;
  --r-28: 28px;
}

@media (min-width: 640px) {
  :root {
    --gutter: 32px;
    --gap: 24px;
    --t-hero: var(--fs-56);
    --t-h2: var(--fs-40);
    --t-line: var(--fs-28);
    --t-intro: var(--fs-22);
    --t-body: var(--fs-18);
    --t-closing: var(--fs-40);
    --section: var(--s-12);
  }
}

@media (min-width: 1024px) {
  :root {
    --t-h3: var(--fs-28);
    --t-closing: var(--fs-56);
    --bar-h: 64px;
    --section: var(--s-16);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Calm paper, dark (ThemeData.dark(.calmPaper)) */
    --canvas: #100E0B;
    --canvas-deep: #0A0907;
    --wash: #19110A;
    --surface: #1B1916;
    --elevated: #272522;
    --subtle: #33312E;
    --zebra: #211F1C;
    --separator: #524F4C;
    --border: #5D5A57;
    --text: #F0ECE8;
    --text-2: #BEBAB6;
    --text-3: #A29F9B;
    --on-accent: #100E0B;
    --accent: #F5A15E;
    --accent-end: #F09C5A;
    --accent-text: #FEB073;
    --accent-tint: #3B220E;
    --release: #95C59E;
    --release-tint: #1A2B1D;
    --bar: rgba(16, 14, 11, 0.78);
    --bar-line: rgba(240, 236, 232, 0.08);
    --m-1: #FFB57B;
    --m-2: #FEA995;
    --m-3: #F4A1B5;
    --m-4: #D9A0DC;
    --m-5: #93B8F2;
    --device-edge: #4A4642;
    --shadow-device: 0 0 0 1px rgba(240, 236, 232, 0.06), 0 24px 56px -12px rgba(0, 0, 0, 0.7);
    --shadow-window: 0 0 0 1px rgba(240, 236, 232, 0.12), 0 32px 80px -20px rgba(0, 0, 0, 0.8);
    --shadow-menu: 0 0 0 1px rgba(240, 236, 232, 0.08), 0 16px 40px -8px rgba(0, 0, 0, 0.7);
  }
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h) + var(--s-2));
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 400 var(--fs-16) / 1.5 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
video,
svg { display: block; max-width: 100%; }

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--accent-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 8px; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }

.band { padding-block: var(--section); overflow-x: clip; }
.band--surface { background: var(--surface); }
.band--canvas { background: var(--canvas); }
.band--deep { background: var(--canvas-deep); }
.band + .band--tight { padding-top: 0; }

/* ---------- top bar ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--bar-line);
}

.bar-in { height: var(--bar-h); display: flex; align-items: center; gap: var(--s-3); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--text);
  font: 700 var(--fs-18) / 1 var(--font-display);
  text-decoration: none;
  white-space: nowrap;
}
.brand img { width: 28px; height: 28px; border-radius: 7px; }

.bar-nav,
.bar-end { display: none; align-items: center; }
.bar-nav { gap: var(--s-3); }
.bar-end { gap: var(--s-2); }
.bar-nav a {
  color: var(--text-2);
  font-size: var(--fs-14);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.bar-nav a:hover { color: var(--text); }

@media (min-width: 1080px) {
  .bar-nav,
  .bar-end { display: flex; }
  .menu { display: none; }
}

/* closed disclosures take no room at all (Chrome keeps a closed <details>' content in layout) */
details:not([open]) > :not(summary) { display: none; }

/* the language switch: a native disclosure, no script needed */
.lang-menu { position: relative; }
.lang-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: var(--fs-14);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:hover,
.lang-menu[open] > summary { color: var(--text); background: var(--subtle); }
.lang-menu > summary .icon { width: 16px; height: 16px; stroke-width: 1.6; }
.lang-menu > summary .chev { width: 14px; height: 14px; stroke-width: 2; transition: transform 0.2s ease; }
.lang-menu[open] > summary .chev { transform: rotate(180deg); }
.lang-menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(2, minmax(9.5rem, 1fr));
  gap: 2px;
  width: max-content;
  max-width: min(32rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(70vh, 34rem);
  overflow: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-20);
  box-shadow: var(--shadow-menu);
}
@media (min-width: 640px) { .lang-menu ul { grid-template-columns: repeat(3, minmax(9.5rem, 1fr)); } }
.lang-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--r-12);
  color: var(--text);
  font-size: var(--fs-14);
  text-decoration: none;
}
.lang-menu a:hover { background: var(--subtle); }
.lang-menu a[aria-current="page"] { color: var(--accent-text); background: var(--accent-tint); font-weight: 600; }

/* phones and tablets: wordmark + menu */
.menu > summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover,
.menu[open] > summary { background: var(--subtle); }
.menu .i-close { display: none; }
.menu[open] .i-open { display: none; }
.menu[open] .i-close { display: block; }
.menu-panel {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--bar-h);
  max-height: calc(100vh - var(--bar-h));
  max-height: calc(100dvh - var(--bar-h));
  overflow: auto;
  padding: var(--s-1) var(--gutter) var(--s-4);
  background: var(--canvas);
  border-bottom: 1px solid var(--separator);
  box-shadow: var(--shadow-menu);
}
.menu-panel nav { display: grid; }
.menu-panel nav a {
  padding: 14px 0;
  border-bottom: 1px solid var(--separator);
  color: var(--text);
  font: 600 var(--fs-22) / 1.2 var(--font-display);
  text-decoration: none;
}
.menu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding-top: var(--s-3); }
.menu-panel .lang-menu ul { position: absolute; left: 0; right: auto; top: auto; bottom: calc(100% + 8px);
  grid-template-columns: repeat(2, minmax(8.5rem, 1fr)); }

/* ---------- the call to action: the App Store badge once live, the plain words until then ---------- */

.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-text);
  font-size: var(--fs-16);
  font-weight: 600;
  white-space: nowrap;
}
.soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.soon--small { min-height: 32px; padding: 0 14px; gap: 8px; font-size: var(--fs-14); }
.soon--small::before { width: 6px; height: 6px; }

.badge { display: inline-block; line-height: 0; }
.badge img { height: 44px; width: auto; }
.badge--hero { padding: 11px; margin: -11px; }       /* Apple's clear space: a quarter of the badge's height */
.badge--small img { height: 40px; }
.badge--small { padding: 10px; margin: -10px; }

/* ---------- section heads ---------- */

.head { display: grid; gap: var(--s-2); max-width: 46rem; margin-bottom: var(--s-6); }
.head h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em; }
.head p { color: var(--text-2); font-size: var(--t-intro); line-height: 1.45; }
.head--row { max-width: none; }
@media (min-width: 1024px) {
  .head { margin-bottom: var(--s-8); }
  .head--row { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--s-6); }
  .head--row > :not(h2) { grid-column: 1; }
  .head--row .head-aside { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- devices: the product is the picture ---------- */

/* No drawn hardware (Apple's rules forbid home-made renders of their devices): a screenshot keeps its screen's
   rounded corners inside a thin neutral edge. The edge is its own layer (.dev-edge, over the screen's rim), so Apple's
   official bezel files can replace it later: put the bezel picture in that layer and set --edge to its screen inset. */
.dev { --edge: max(2px, 0.6cqi); --screen-r: 12.8cqi; position: relative; margin: 0; container-type: inline-size; }
.dev--cover { --screen-r: 9cqi; }
.dev--book { --edge: max(2px, 0.35cqi); --screen-r: 3.5cqi; }
.dev--ipad { --edge: max(2px, 0.45cqi); --screen-r: 2.4cqi; }
.dev--mac { --edge: 0px; --screen-r: 1.6cqi; }
.dev-body {
  position: relative;
  padding: var(--edge);
  border-radius: calc(var(--screen-r) + var(--edge));
  box-shadow: var(--shadow-device);
}
.dev-screen { position: relative; width: 100%; height: auto; border-radius: var(--screen-r); }
.dev-wait { position: absolute; inset: var(--edge); border-radius: var(--screen-r); }
.dev-edge {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: var(--edge) solid var(--device-edge);
  border-radius: inherit;
  pointer-events: none;
}
.dev--mac .dev-body { overflow: hidden; background: var(--surface); box-shadow: var(--shadow-window); }

/* every screenshot: its preview at once (a real picture of a few KB), then the full picture cross-fades over it once
   decoded; where there is no preview yet, the exact box on the brand canvas with a slow sweep of the surface tones;
   a picture that can't load (after the English one) leaves the preview or the plain surface, never a broken image */
.dev-wait,
[data-wait] { background-color: var(--canvas); }
.dev-wait,
.fold-screen[data-wait],
.card-media[data-wait],
.tile-media[data-wait] {
  background-image: linear-gradient(100deg, var(--canvas) 20%, var(--surface) 50%, var(--canvas) 80%);
  background-size: 300% 100%;
  background-position: 100% 0;
}
.is-loaded > .dev-wait,
.has-low > .dev-wait { display: none; }
[data-wait].is-loaded,
[data-wait].has-low { background-image: none; }
.pic-low.is-failed { visibility: hidden; }
.card-media > .pic-low,
.tile-media > .pic-low,
.card-media > video.loop,
.tile-media > video.loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-media > .pic,
.tile-media > .pic { position: relative; }
.is-failed > .dev-wait,
[data-wait].is-failed { background-image: none; background-color: var(--surface); }
html.js .pic.fade { opacity: 0; }
html.js .pic.fade.is-loaded { opacity: 1; }
html.js .pic.is-failed { visibility: hidden; }
.dev-body > .pic-low,
.dev-body > video.loop {
  position: absolute;
  top: var(--edge);
  left: var(--edge);
  width: calc(100% - 2 * var(--edge));
  height: calc(100% - 2 * var(--edge));
  object-fit: cover;
  border-radius: var(--screen-r);
}

/* a stage: the warm paper a device stands on, cropping it at the bottom edge */
.stage {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  border-radius: var(--r-28);
  background: linear-gradient(180deg, var(--wash), var(--canvas));
}
.band--canvas .stage { background: linear-gradient(180deg, var(--surface), var(--elevated)); }
.stage > .dev { position: absolute; }
.stage--iphone { aspect-ratio: 1 / 1; }
.stage--iphone > .dev { width: 50cqi; left: 25cqi; top: 10cqi; }
.stage--cover { aspect-ratio: 1 / 1; }
.stage--cover > .dev { width: 60cqi; left: 20cqi; top: 10cqi; }
.stage--ipad { aspect-ratio: 1 / 1; }
.stage--ipad > .dev { width: 72cqi; left: 14cqi; top: 9cqi; }
.stage--mac { aspect-ratio: 16 / 11; }
.stage--mac > .dev { width: 100cqi; left: 7cqi; top: 7cqi; }
.stage--book { aspect-ratio: 16 / 11; }
.stage--book > .dev { width: 92cqi; left: 4cqi; top: 9cqi; }
.stage--tall { aspect-ratio: 4 / 5; }
.stage--tall > .dev { width: 58cqi; left: 21cqi; top: 10cqi; }

/* ---------- 1 · hero ---------- */

.hero {
  position: relative;
  overflow-x: clip;
  padding-top: var(--s-8);
  background: linear-gradient(180deg, var(--wash) 0, var(--canvas) 560px);
  text-align: center;
}
@media (min-width: 1024px) { .hero { padding-top: var(--s-12); } }

.hero-copy { position: relative; display: grid; justify-items: center; }
.hero-icon { width: 80px; height: 80px; border-radius: 18px; margin-bottom: var(--s-3);
  box-shadow: 0 1px 2px rgba(32, 28, 24, 0.1), 0 10px 24px -8px rgba(32, 28, 24, 0.25); }
@media (min-width: 640px) { .hero-icon { width: 96px; height: 96px; border-radius: 22px; } }
.hero h1 { font-size: var(--t-hero); line-height: 1.04; letter-spacing: -0.025em; }
.hero-line {
  margin-top: var(--s-1);
  color: var(--accent-text);
  font: 600 var(--t-line) / 1.2 var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hero-lead {
  max-width: 36rem;
  margin-top: var(--s-3);
  color: var(--text-2);
  font-size: var(--t-body);
  line-height: 1.55;
  text-wrap: balance;
}
.hero-cta { margin-top: var(--s-4); }

/* one composed scene: the Mac window behind, the iPhone front-left, iPhone Duo open front-right, one scale,
   overlapping, cropped by the band's bottom edge (clip-path keeps the shadows everywhere else) */
.scene {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: var(--content);
  aspect-ratio: 390 / 286;
  margin: var(--s-6) auto 0;
  clip-path: inset(-240px -240px 0 -240px);
}
.scene > .dev { position: absolute; }
.scene .dev--mac { z-index: 1; width: 88cqi; left: 6cqi; top: 0; }
.scene .dev--book { z-index: 2; width: 57cqi; left: 40cqi; top: 36cqi; }
.scene .dev--iphone { z-index: 3; width: 25cqi; left: 3cqi; top: 21cqi; }
@media (min-width: 640px) {
  .scene { width: min(100% - 2 * var(--gutter), var(--content)); aspect-ratio: 1120 / 560; margin-top: var(--s-8); }
  .scene .dev--mac { width: 68cqi; left: 16cqi; }
  .scene .dev--book { width: 44cqi; left: 54cqi; top: 22cqi; }
  .scene .dev--iphone { width: 19cqi; left: 5cqi; top: 13cqi; }
}
/* the scene adapts when a picture is missing; a placeholder never renders */
.scene--no-book .dev--mac { left: 22cqi; }
.scene--no-iphone .dev--mac { left: 4cqi; }
.scene--no-mac .dev--iphone { left: 22cqi; top: 4cqi; }
.scene--no-mac .dev--book { left: 42cqi; top: 10cqi; }
.scene--no-mac { aspect-ratio: 1120 / 420; }

/* ---------- 2 · use cases ---------- */

.cases { display: grid; gap: var(--s-8); }
.case { display: grid; gap: var(--s-3); align-items: center; }
.case-copy { display: grid; gap: var(--s-2); max-width: 30rem; }
.case-copy h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.015em; }
.case-copy p { color: var(--text-2); font-size: var(--t-body); line-height: 1.55; }
.case-copy .refrain,
.feature-copy .refrain,
.refrain {
  color: var(--accent-text);
  font: 700 var(--fs-22) / 1.2 var(--font-display);
  letter-spacing: -0.01em;
}
.case--text .case-copy { max-width: 40rem; }
@media (min-width: 1024px) {
  .cases { gap: var(--s-16); }
  .case { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .case-media { grid-column: 1 / span 6; }
  .case-copy { grid-column: 8 / span 5; }
  .case:nth-child(even) .case-media { grid-column: 7 / span 6; grid-row: 1; }
  .case:nth-child(even) .case-copy { grid-column: 1 / span 5; grid-row: 1; }
  .case.case--text .case-copy { grid-column: 1 / span 8; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .case { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
  .case:nth-child(even) .case-media { order: 2; }
}

/* ---------- 3 · how it works ---------- */

.steps { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: 48px 1fr; column-gap: var(--s-2); }
.step-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-text);
}
.step-icon--release { background: var(--release-tint); color: var(--release); }
.step-body { display: grid; gap: 6px; padding-top: 4px; }
.step h3 { font-size: var(--fs-22); line-height: 1.2; }
.step p { color: var(--text-2); font-size: var(--fs-16); line-height: 1.5; }
.step:not(:last-child)::after {                /* the thin line that joins the steps */
  content: "";
  position: absolute;
  left: 24px;
  top: 56px;
  bottom: calc(-1 * var(--s-4) + 8px);
  width: 1px;
  background: var(--separator);
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); }
  .step { grid-template-columns: 1fr; row-gap: var(--s-3); }
  .step-body { padding-top: 0; padding-right: var(--s-2); }
  .step:not(:last-child)::after { left: 64px; right: calc(-1 * var(--gap) + 8px); top: 24px; bottom: auto; width: auto; height: 1px; }
}

/* ---------- cards (from anywhere) ---------- */

.cards { display: grid; gap: var(--gap); }
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: var(--r-20);
  background: var(--surface);
}
.card-media {
  position: relative;
  margin: 8px 8px 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-12);
  background: var(--subtle);
}
.card-media img,
.card-media video { width: 100%; height: 100%; object-fit: cover; }
.card-media video,
.card-media .poster { object-position: 50% 24%; }
.card-body { display: grid; gap: 6px; padding: var(--s-2) 20px 20px; }
.card-title { display: flex; align-items: center; gap: 10px; }
.card-title .icon { width: 22px; height: 22px; color: var(--accent-text); }
.card h3 { font: 600 var(--fs-18) / 1.25 var(--font-text); }
.card p { color: var(--text-2); font-size: var(--fs-16); line-height: 1.5; }
@media (max-width: 639.98px) {
  .cards--scroll {
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) var(--s-2);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .cards--scroll::-webkit-scrollbar { display: none; }
  .cards--scroll > * { scroll-snap-align: start; }
}
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 4 · voice, video and photo notes ---------- */

.trio { display: grid; gap: var(--s-6); }
.trio-item { display: grid; gap: var(--s-3); align-content: start; }
.trio-copy { display: grid; gap: var(--s-1); }
.trio-copy h3 { display: flex; align-items: center; gap: 10px; font: 700 var(--fs-22) / 1.2 var(--font-display); }
.trio-copy h3 .icon { color: var(--accent-text); }
.trio-copy p { color: var(--text-2); font-size: var(--fs-16); line-height: 1.5; }
@media (min-width: 640px) { .trio { grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); } }

/* ---------- 5 · together ---------- */

.feature {
  display: grid;
  overflow: hidden;
  border-radius: var(--r-28);
  background: var(--surface);
  border: 1px solid var(--separator);
}
.feature-copy { display: grid; gap: var(--s-2); align-content: center; padding: var(--s-4) var(--s-3) 0; }
.feature-copy h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.015em; }
.feature-copy p { color: var(--text-2); font-size: var(--t-body); line-height: 1.55; }
.feature-media { position: relative; container-type: inline-size; aspect-ratio: 16 / 10; }
.feature-media > .dev { position: absolute; width: 110cqi; left: 6cqi; top: 9cqi; }
@media (min-width: 1024px) {
  .feature { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .feature-copy { grid-column: 1 / span 5; padding: var(--s-8) 0 var(--s-8) var(--s-8); }
  .feature-media { grid-column: 6 / span 7; aspect-ratio: auto; min-height: 460px; }
  .feature-media > .dev { left: 4cqi; top: var(--s-8); width: 116cqi; }
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-1) 0 0; padding: 0; list-style: none; }
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 14px 4px 10px;
  border-radius: 999px;
  background: var(--canvas);
  color: var(--text-2);
  font-size: var(--fs-14);
}
.chips i { width: 10px; height: 10px; border-radius: 50%; background: var(--m-1); }
.chips li:nth-child(2) i { background: var(--m-3); }
.chips li:nth-child(3) i { background: var(--m-5); }

.columns { display: grid; gap: var(--s-5); margin-top: var(--s-8); }
.column { display: grid; gap: var(--s-1); align-content: start; }
.column-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--s-1);
  border-radius: var(--r-12);
  background: var(--accent-tint);
  color: var(--accent-text);
}
.column h3 { font: 700 var(--fs-22) / 1.2 var(--font-display); }
.column p { color: var(--text-2); font-size: var(--fs-16); line-height: 1.55; }
@media (min-width: 640px) { .columns { grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); } }

.notes { display: grid; gap: var(--s-2); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--separator); }
.notes p { color: var(--text-2); font-size: var(--fs-16); line-height: 1.55; }
.notes strong { display: block; margin-bottom: 2px; color: var(--text); font-weight: 600; }
@media (min-width: 1024px) { .notes { grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); } }

/* ---------- 6 · iPhone Duo: one device that folds and unfolds ----------
   The book pose is one screenshot split into its two pages on a shared spine; the left page (its back is the cover
   display) turns over onto the right one, like closing a book whose spine is on the left, and opens back the same
   way, while the whole device slides so the closed phone stays centred. 8 s per cycle,
   1.2 s for each fold, running only while in view (the script adds .is-playing); still and open under reduced motion. */

.duo { display: grid; gap: var(--s-5); align-items: center; }
.duo-copy { display: grid; gap: var(--s-3); align-content: center; }
.duo-copy h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.015em; }
.duo-lines { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.duo-lines li { position: relative; display: grid; grid-template-columns: 28px 1fr; column-gap: var(--s-2);
  color: var(--text-2); font-size: var(--t-body); line-height: 1.5; }
.duo-lines .icon { width: 24px; height: 24px; margin-top: 2px; color: var(--accent-text); }
.duo-lines li::before {                    /* marks the line that matches what the device shows */
  content: "";
  position: absolute;
  left: -14px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
}
.duo-lines .is-open::before { opacity: 1; }
.duo-static { max-width: 300px; margin-inline: auto; }
@media (min-width: 1024px) {
  .duo { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .duo-device { grid-column: 1 / span 7; }
  .duo-copy { grid-column: 9 / span 4; }
  .duo-copy--alone { grid-column: 1 / span 8; }
}

.fold { width: min(100%, 720px); margin-inline: auto; container-type: inline-size; perspective: 2400px;
  perspective-origin: 50% 35%;
  filter: drop-shadow(0 2px 3px rgba(32, 28, 24, 0.1)) drop-shadow(0 22px 30px rgba(32, 28, 24, 0.2)); }
@media (prefers-color-scheme: dark) {
  .fold { filter: drop-shadow(0 0 1px rgba(240, 236, 232, 0.18)) drop-shadow(0 24px 36px rgba(0, 0, 0, 0.7)); }
}
.fold { --fe: max(2px, 0.35cqi); --fr: 3.85cqi; --fr-in: calc(var(--fr) - var(--fe)); }
.fold-body { position: relative; height: calc((100cqi - 2 * var(--fe)) * 0.70337 + 2 * var(--fe));
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.fold-half { position: absolute; top: 0; width: 50%; height: 100%; -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }
.fold-l { left: 0; transform-origin: 100% 50%; }          /* turns about the spine; the cover display is its back */
.fold-r { left: 50%; transform: translateZ(-1px); }
.fold-face {
  position: absolute;
  inset: 0;
  background: var(--device-edge);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.fold-front { border-radius: var(--fr) 0 0 var(--fr); transform: rotateY(0deg) translateZ(0.5px); }
.fold-r .fold-face { border-radius: 0 var(--fr) var(--fr) 0; }
.fold-back { border-radius: var(--fr); transform: rotateY(180deg) translateZ(0.5px); visibility: hidden; }
.fold-screen { position: absolute; top: var(--fe); bottom: var(--fe); width: calc(50cqi - var(--fe)); overflow: hidden; }
.fold-front .fold-screen { left: var(--fe); border-radius: var(--fr-in) 0 0 var(--fr-in); }
.fold-r .fold-screen { left: 0; border-radius: 0 var(--fr-in) var(--fr-in) 0; }
.fold-screen img { position: absolute; top: 0; left: 0; width: calc(100cqi - 2 * var(--fe)); max-width: none; height: 100%; }
.fold-r .fold-screen img { left: calc(var(--fe) - 50cqi); }
.fold-back .fold-screen { left: var(--fe); right: var(--fe); width: auto; border-radius: var(--fr-in); }
.fold-back .fold-screen img { width: 100%; object-fit: cover; }
.fold-blank { position: absolute; inset: var(--fe); display: grid; place-items: center; border-radius: var(--fr-in);
  background: var(--canvas); color: var(--text); font: 700 6cqi / 1 var(--font-display); letter-spacing: -0.02em; }
.fold-front::after,
.fold-back::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: 0;
  pointer-events: none; }

/* With Apple's official bezels (Star White, Night Sky in dark mode), measured on the PNGs in bezel pixels (u): the open
   device's canvas is 3093 x 2247 with its screen at 120,120 (2853 x 2007, the screenshot's own size) and its spine in
   the middle; the closed device's canvas is 1574 x 2194, its screen at 88,80 (1398 x 2034, the cover's size), its
   body from x 11 (the spine) and y 24 where the open body starts at y 50. Each page shows its half of the open bezel;
   the cover's bezel turns with the left page and lands with its spine on the open spine. The bezels are not altered. */
.fold--bezel { --u: calc(100cqi / 3093); }
.fold--bezel .fold-body { height: calc(2247 * var(--u)); }
.fold--bezel .fold-face { overflow: hidden; border-radius: 0; background: none; }
.fold--bezel .fold-face::after { display: none; }
.fold--bezel .fold-screen { top: calc(120 * var(--u)); bottom: auto; width: calc(1426.5 * var(--u));
  height: calc(2007 * var(--u)); border-radius: 0; }
.fold--bezel .fold-front .fold-screen { left: calc(120 * var(--u)); }
.fold--bezel .fold-r .fold-screen { left: 0; }
.fold--bezel .fold-screen img { width: calc(2853 * var(--u)); }
.fold--bezel .fold-r .fold-screen img { left: calc(-1426.5 * var(--u)); }
.fold--bezel .fold-screen::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0;
  pointer-events: none; }
/* each screen is clipped by the opening's own shape (a mask cut from the bezel's alpha), corners included, at any size */
.fold--bezel .fold-front .fold-screen,
.fold--bezel .fold-r .fold-screen {
  -webkit-mask-image: url(../img/site/bezels/inner-open-landscape-screen.webp);
  mask-image: url(../img/site/bezels/inner-open-landscape-screen.webp);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: calc(3093 * var(--u)) calc(2247 * var(--u));
  mask-size: calc(3093 * var(--u)) calc(2247 * var(--u));
  -webkit-mask-position: calc(-120 * var(--u)) calc(-120 * var(--u));
  mask-position: calc(-120 * var(--u)) calc(-120 * var(--u));
}
.fold--bezel .fold-r .fold-screen {
  -webkit-mask-position: calc(-1546.5 * var(--u)) calc(-120 * var(--u));
  mask-position: calc(-1546.5 * var(--u)) calc(-120 * var(--u));
}
.fold-bezel { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.fold-bezel img { position: absolute; top: 0; left: 0; width: 200%; max-width: none; height: 100%; }
.fold-r .fold-bezel img { left: -100%; }
.fold-cover { position: absolute; left: calc(-11 * var(--u)); top: calc(26 * var(--u)); width: calc(1574 * var(--u));
  height: calc(2194 * var(--u)); }
.fold--bezel .fold-cover .fold-screen { left: calc(88 * var(--u)); top: calc(80 * var(--u)); right: auto;
  width: calc(1398 * var(--u)); height: calc(2034 * var(--u));
  -webkit-mask-image: url(../img/site/bezels/outer-closed-portrait-screen.webp);
  mask-image: url(../img/site/bezels/outer-closed-portrait-screen.webp);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: calc(1574 * var(--u)) calc(2194 * var(--u));
  mask-size: calc(1574 * var(--u)) calc(2194 * var(--u));
  -webkit-mask-position: calc(-88 * var(--u)) calc(-80 * var(--u));
  mask-position: calc(-88 * var(--u)) calc(-80 * var(--u)); }
.fold--bezel .fold-cover .fold-screen img { left: 0; width: 100%; height: 100%; object-fit: cover; }
.fold-cover .fold-bezel img { width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .fold-body { animation: fold-shift 8s infinite paused; }
  .fold-l { animation: fold-turn 8s infinite paused; }
  .fold-front { animation: fold-face-front 8s infinite paused; }
  .fold-back { animation: fold-face-back 8s infinite paused; }
  .fold-front::after { animation: fold-shade 8s infinite paused; }
  .fold-r .fold-face { animation: fold-corners 8s infinite paused; }
  .fold--bezel .fold-r .fold-face { animation: none; }
  .fold--bezel .fold-front .fold-screen::after,
  .fold--bezel .fold-back .fold-screen::after { animation: fold-shade 8s infinite paused; }
  .fold-back::after { animation: fold-shade 8s infinite paused; }
  .duo-lines .is-open::before { animation: line-open 8s infinite paused; }
  .duo-lines .is-closed::before { animation: line-closed 8s infinite paused; }
  .is-playing .fold-body,
  .is-playing .fold-l,
  .is-playing .fold-front,
  .is-playing .fold-back,
  .is-playing .fold-front::after,
  .is-playing .fold-r .fold-face,
  .is-playing .fold-back::after,
  .is-playing .fold-screen::after,
  .is-playing .duo-lines li::before { animation-play-state: running; }
}
@keyframes fold-turn {
  0%, 35% { transform: rotateY(0deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  50%, 85% { transform: rotateY(180deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { transform: rotateY(0deg); }
}
@keyframes fold-shift {
  0%, 35% { transform: translateX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  50%, 85% { transform: translateX(-25%); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { transform: translateX(0); }
}
@keyframes fold-corners {                  /* closed, the page under the cover rounds its spine corners too */
  0%, 35% { border-radius: 0 var(--fr) var(--fr) 0; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  50%, 85% { border-radius: var(--fr); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { border-radius: 0 var(--fr) var(--fr) 0; }
}
/* the turning page shows its inside until it stands edge-on (the middle of each 1.2 s fold, the curve being
   symmetric), its cover after that */
@keyframes fold-face-front {
  0%, 42.4% { visibility: visible; }
  42.5%, 92.4% { visibility: hidden; }
  92.5%, 100% { visibility: visible; }
}
@keyframes fold-face-back {
  0%, 42.4% { visibility: hidden; }
  42.5%, 92.4% { visibility: visible; }
  92.5%, 100% { visibility: hidden; }
}
/* a little shade only while the page turns, darkest edge-on, none at rest (fully open, fully closed) */
@keyframes fold-shade {
  0%, 35% { opacity: 0; animation-timing-function: ease-in; }
  42.5% { opacity: 0.28; animation-timing-function: ease-out; }
  50%, 85% { opacity: 0; animation-timing-function: ease-in; }
  92.5% { opacity: 0.28; animation-timing-function: ease-out; }
  100% { opacity: 0; }
}
@keyframes line-open {
  0%, 38% { opacity: 1; }
  44%, 91% { opacity: 0; }
  97%, 100% { opacity: 1; }
}
@keyframes line-closed {
  0%, 38% { opacity: 0; }
  44%, 91% { opacity: 1; }
  97%, 100% { opacity: 0; }
}

/* ---------- 7 · plans ---------- */

.plans-free { margin-top: calc(-1 * var(--s-3)); margin-bottom: var(--s-4); color: var(--text-2); font-size: var(--fs-16); }
.plans-free strong { color: var(--text); }
.plans { display: grid; gap: var(--gap); }
.plan { padding: var(--s-4) var(--s-3); }
.plan h3 { font: 700 var(--fs-28) / 1.1 var(--font-display); letter-spacing: -0.015em; }
.plan-people { height: 24px; margin: var(--s-2) 0; }
.dots { display: inline-flex; align-items: center; }
.dots i { width: 22px; height: 22px; border-radius: 50%; background: var(--m-1); box-shadow: 0 0 0 2.5px var(--surface); }
.dots i + i { margin-left: -5px; }
.dots i:nth-child(2) { background: var(--m-2); }
.dots i:nth-child(3) { background: var(--m-3); }
.dots i:nth-child(4) { background: var(--m-4); }
.dots i:nth-child(5) { background: var(--m-5); }
.plan p { color: var(--text-2); font-size: var(--fs-16); line-height: 1.55; }
@media (min-width: 820px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.table-wrap {
  position: relative;                 /* keeps the cells' screen-reader text inside the scroller */
  margin-top: var(--s-6);
  overflow-x: auto;
  border: 1px solid var(--separator);
  border-radius: var(--r-20);
  background: var(--surface);
}
.who { width: 100%; min-width: 34rem; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.who caption { padding: var(--s-3) var(--s-3) var(--s-2); text-align: left; font: 700 var(--fs-22) / 1.2 var(--font-display); }
.who th,
.who td { padding: 14px 16px; text-align: center; vertical-align: middle; font-size: var(--fs-16); line-height: 1.35; }
.who thead th { color: var(--text); font: 600 var(--fs-16) / 1.2 var(--font-display); border-bottom: 1px solid var(--separator); }
.who tbody th { width: 46%; min-width: 11rem; text-align: left; color: var(--text); font-weight: 500; }
.who > * > tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.who tbody tr:nth-child(odd) > * { background: var(--zebra); }
.who td { color: var(--text-2); }
.who .tick { width: 20px; height: 20px; margin: 0 auto; color: var(--accent-text); stroke-width: 2.25; }
.who .nil { display: block; width: 10px; height: 1.5px; margin: 0 auto; background: var(--border); }
.plans-notes { display: grid; gap: 4px; margin-top: var(--s-3); color: var(--text-2); font-size: var(--fs-14); }
@media (max-width: 639.98px) {
  .who th,
  .who td { padding: 12px 10px; font-size: var(--fs-14); }
  .who tbody th { min-width: 9.5rem; }
}

/* ---------- 8 · guides ---------- */

.gallery-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.gallery-head h3 { font: 700 var(--fs-22) / 1.2 var(--font-display); }
.gallery-nav { display: none; gap: var(--s-1); }
@media (hover: hover) and (pointer: fine) { .gallery-nav { display: flex; } }
.gallery-nav button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--separator);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.gallery-nav button:hover { background: var(--subtle); }
.gallery-nav .icon { width: 18px; height: 18px; stroke-width: 2; }
.tile-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 804 / 1746;
  border-radius: 26px;
  background: var(--subtle);
  box-shadow: inset 0 0 0 1px var(--separator);
}
.tile-media img,
.tile-media video { width: 100%; height: 100%; object-fit: cover; }

/* the centred carousels (the guides): the slide is the snap point (one per swipe), its inner box is what the script
   scales and fades by distance, so snapping never moves with the animation; ghosts at the ends are never snap points */
.carousel-track {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline-offset: -2px; border-radius: 0; }
.carousel-row {
  --slide-w: 232px;
  --slide-gap: 20px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--slide-gap);
  margin: 0;
  padding: var(--s-3) 0 var(--s-6);
  list-style: none;
}
@media (min-width: 640px) { .carousel-row { --slide-w: 280px; --slide-gap: 28px; } }
.carousel--wide .carousel-row { --slide-w: 84vw; --slide-gap: 12px; padding: var(--s-4) 0 var(--s-8); }
@media (min-width: 640px) { .carousel--wide .carousel-row { --slide-w: 66vw; --slide-gap: 20px; } }
@media (min-width: 1024px) { .carousel--wide .carousel-row { --slide-w: 720px; --slide-gap: 28px; } }
.carousel + .carousel { margin-top: var(--s-6); }
.ghost { flex: 0 0 calc((100% - var(--slide-w)) / 2 - var(--slide-gap)); align-self: stretch; }  /* a ghost needs area: a 0-tall box adds no scroll room */
.slide { flex: 0 0 var(--slide-w); scroll-snap-align: center; scroll-snap-stop: always; cursor: pointer; }
.slide-in { transform-origin: 50% 40%; }
.slide.is-active { cursor: default; }
.slide .tile-media { box-shadow: inset 0 0 0 1px var(--separator); }
.slide.is-active .tile-media { box-shadow: inset 0 0 0 1px var(--separator), var(--shadow-device); }
.slide-title { margin-top: var(--s-2); color: var(--text); font-size: var(--fs-16); font-weight: 600; line-height: 1.35;
  text-align: center; }

.getstarted {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-12);
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-28);
  background: var(--canvas);
}
.getstarted-head { display: grid; gap: var(--s-2); align-content: start; }
.getstarted-head h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.015em; }
.getstarted-head p { color: var(--text-2); font-size: var(--t-body); line-height: 1.5; }
.getstarted-head .badge { justify-self: start; margin-top: var(--s-1); }
.getstarted ol { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.getstarted li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s-2); align-items: start; }
.getstarted li h4 { margin: 0 0 4px; font: 600 var(--fs-18) / 1.3 var(--font-text); }
.getstarted li p { color: var(--text-2); font-size: var(--fs-16); line-height: 1.5; }
@media (min-width: 1024px) {
  .getstarted { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding: var(--s-8); }
  .getstarted-head { grid-column: 1 / span 5; }
  .getstarted ol { grid-column: 7 / span 6; }
}

/* ---------- 9 · private by design ---------- */

.private { display: grid; gap: var(--s-4); }
.private-head { display: grid; gap: var(--s-3); align-content: start; }
.private-head h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em; }
.links { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--separator);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-16);
  font-weight: 600;
  text-decoration: none;
}
.links a:hover { border-color: var(--border); }
.links .icon { width: 16px; height: 16px; stroke-width: 2; color: var(--accent-text); }
.private ul { display: grid; margin: 0; padding: 0; list-style: none; }
.private li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s-2); padding: var(--s-3) 0;
  border-top: 1px solid var(--separator); }
.private li:last-child { border-bottom: 1px solid var(--separator); }
.private li h3 { margin-bottom: 4px; font: 600 var(--fs-18) / 1.3 var(--font-text); }
.private li p { color: var(--text-2); font-size: var(--fs-16); line-height: 1.5; }
.private .column-icon { margin: 0; }
@media (min-width: 1024px) {
  .private { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .private-head { grid-column: 1 / span 4; }
  .private ul { grid-column: 6 / span 7; }
}

/* ---------- 10 · closing ---------- */

.closing-band { padding-block: var(--section); overflow-x: clip; background: var(--canvas-deep); text-align: center; }
.closing-line {
  max-width: 16em;
  margin-inline: auto;
  font: 700 var(--t-closing) / 1.1 var(--font-display);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.closing-cta { margin-top: var(--s-5); }

/* ---------- footer ---------- */

.foot { background: var(--canvas-deep); border-top: 1px solid var(--separator); }
.foot-in {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand lang" "nav nav" "copy copy";
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding-block: var(--s-4);
  color: var(--text-2);
  font-size: var(--fs-14);
}
.foot .brand { grid-area: brand; margin: 0; font-size: var(--fs-16); }
.foot .brand img { width: 24px; height: 24px; border-radius: 6px; }
.foot-copy { grid-area: copy; }
.foot-nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.foot-nav a { padding: 4px 0; color: var(--text-2); text-decoration: none; }
.foot-nav a:hover { color: var(--text); text-decoration: underline; }
.foot .lang-menu { grid-area: lang; justify-self: end; }
.foot .lang-menu ul { top: auto; bottom: calc(100% + 8px); }
@media (max-width: 639.98px) {
  .foot-in { grid-template-areas: "brand copy" "nav lang"; }
  .foot-copy { justify-self: end; }
  .foot-nav { column-gap: var(--s-2); }
  .foot .lang-menu > summary > span:not(.sr-only) {   /* the globe alone on phones; the name stays for screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}
@media (min-width: 900px) {
  .foot-in { grid-template-columns: auto auto 1fr auto auto; grid-template-areas: "brand copy . nav lang"; }
}

/* ---------- inner pages: a reading column ---------- */

.doc { max-width: 68ch; margin-inline: auto; padding: var(--s-8) var(--gutter) var(--s-12); font-size: var(--t-body); line-height: 1.6; }
@media (min-width: 640px) { .doc { padding-top: var(--s-12); } }
.doc h1 { margin-bottom: var(--s-2); font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em; }
.doc h2 { margin: var(--s-6) 0 var(--s-2); font-size: var(--fs-22); line-height: 1.25; letter-spacing: -0.01em; }
.doc h3 { margin: var(--s-4) 0 var(--s-1); font: 600 var(--fs-18) / 1.35 var(--font-text); }
.doc p,
.doc ul,
.doc ol { margin: 0 0 var(--s-2); }
.doc ul,
.doc ol { padding-left: 1.25em; }
.doc li + li { margin-top: 6px; }
.doc .meta { color: var(--text-2); font-size: var(--fs-16); }
.doc .note,
.doc .muted { color: var(--text-2); font-size: var(--fs-16); }
.doc .card {
  margin: var(--s-4) 0;
  padding: var(--s-3);
  border-radius: var(--r-20);
  background: var(--accent-tint);
  color: var(--text);
}
.doc .card h2 { margin-top: 0; }
.doc .card :last-child { margin-bottom: 0; }
.doc .card a { color: var(--accent-text); }
.doc .contact-mail { font: 700 var(--fs-22) / 1.3 var(--font-display); }
.doc .doc-closing {
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid var(--separator);
  color: var(--text-2);
  font: 600 var(--fs-18) / 1.4 var(--font-display);
}
.doc .fineprint { margin-top: var(--s-3); color: var(--text-2); font-size: var(--fs-14); line-height: 1.5; }
.doc .press-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: var(--s-3) 0 var(--s-4); }
.doc .invited { color: var(--accent-text); font-weight: 600; }
.doc .invite-code {
  margin: var(--s-1) 0 var(--s-2);
  font: 700 var(--fs-28) / 1.2 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.06em;
}
.copy-button {
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-end));
  color: var(--on-accent);
  font: 600 var(--fs-16) / 1 var(--font-text);
  cursor: pointer;
}
.copy-button[data-copied] { background: var(--release); }

.notfound { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-16) var(--gutter); text-align: center; }
.notfound h1 { font-size: var(--t-h2); line-height: 1.1; }
.notfound p { color: var(--text-2); font-size: var(--t-body); }

/* ---------- motion: one reveal, hover lifts; nothing under reduced motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .dev-wait,
  .fold-screen[data-wait],
  .card-media[data-wait],
  .tile-media[data-wait] { animation: wait 1.6s ease-in-out infinite; }
  @keyframes wait {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
  }
  html.js .pic.fade { transition: opacity 0.3s ease; }
  [data-reveal] { transition: opacity 0.4s ease, translate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
  [data-reveal].is-pending { opacity: 0; translate: 0 12px; }
  [data-reveal][style*="--i"] { transition-delay: calc(var(--i) * 70ms), calc(var(--i) * 70ms), 0s, 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .dev-wait,
  .fold-screen[data-wait],
  .card-media[data-wait],
  .tile-media[data-wait] { background-image: none; background-color: var(--surface); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .card,
  .links a {
    transition: opacity 0.4s ease, translate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.2s ease, border-color 0.2s ease;
  }
  .card:hover,
  .links a:hover { transform: translateY(-2px); }
  .card:hover { border-color: var(--border); }
}