/* App Store "screens": marketing tiles authored at App Store dimensions that
   double as the live website gallery and the capture source. Each .screen is a
   container; everything inside is sized in container-query units (cq*), so the
   composition is pixel-native at capture width and fluid at any smaller size. */

/* Scoped, not global. This stylesheet is now loaded on the app page too (the
   per-platform galleries embed the same tiles), where a bare `*` reset would
   flatten the site's prose. .screens-body keeps the screens pages byte-identical;
   .screen * keeps the tile internals reset wherever a tile is rendered. */
.screens-body,
.screens-body *,
.screen * { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Design tokens copied from site.css so the shared signup component renders
     identically here (the screens pages don't load site.css). */
  --ratio: 1.25;
  --base: 1.125rem;
  --line: calc(var(--base) * 1.5);
  --text-sm: calc(var(--base) / var(--ratio));
  --space-sm: calc(var(--line) * 0.5);
  --space-md: var(--line);
  --space-xl: calc(var(--line) * 3);   /* matches site.css so the hero aligns */
  --transition-fast: 0.15s ease;
}

/* Page bg is the product accent so margins/overscroll match the screens.
   --surface is the accent in light mode and a touch darker + desaturated in dark
   mode (see the dark block at the bottom). Everything accent-colored — the body,
   the panels, the footer — reads from --surface, so the whole page eases back in
   dark mode from one place. */
.screens-body {
  --surface: var(--accent);
  background: var(--surface);
}

.screens {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Per-platform App Store canvas (base CSS px = App Store px ÷ 2; capture @2×). */
.screens[data-platform="macos"]  .screen { --w: 1440; --h: 900; }   /* → 2880×1800 */
.screens[data-platform="ios"]    .screen { --w: 642;  --h: 1389; }  /* → 1284×2778 (6.5") */
.screens[data-platform="ipados"] .screen { --w: 1032; --h: 1376; }  /* → 2064×2752 (13") */

.screen {
  width: min(100%, calc(var(--w) * 1px));
  aspect-ratio: var(--w) / var(--h);
  container-type: size;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  color: #fff;
  font-family: var(--font-display);
}

/* Soft lighter glow behind the artwork so the window lifts off the accent. */
.screen::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20cqh;
  width: 120cqw;
  height: 120cqw;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.screen-body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8cqh 9cqw 0;
}

/* Headline + sub. A wrapper only where a platform needs the copy to hold a
   fixed height (portrait, below); everywhere else it is not a box at all. */
.screen-copy { display: contents; }

.screen-headline {
  font-weight: 800;
  font-size: 7.2cqh;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 82cqw;
}

.screen-sub {
  font-weight: 500;
  font-size: 3.4cqh;
  line-height: 1.2;
  opacity: 0.92;
  margin-top: 2.6cqh;
  max-width: 58cqw;
  text-wrap: balance; /* even line breaks — no orphaned single word on its own line */
}

/* The app window (transparent PNG with its own shadow) sits below the copy and
   tucks off the bottom a touch so it feels alive. */
.screen-shot {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: center;
}

.screen-shot img {
  display: block;
  width: var(--shot-w, 62cqw);
  height: auto;
  transform: translateY(var(--shot-tuck, 6cqh)) rotate(var(--shot-rot, 0deg));
}

/* macOS: copy top-left, the window big and tucked into the bottom-right
   corner, running off both edges, the way the site hero and the share card
   frame it. A whole window centred in the tile read as zoomed out: the UI
   came out a third of its real size. Cropping the far corner costs nothing
   (the toolbar and sidebar sit top-left) and lets the window be large. */
.screens[data-platform="macos"] .screen-body {
  align-items: flex-start;
  text-align: left;
  padding: 9cqh 7cqw 0;
}
.screens[data-platform="macos"] .screen-headline { max-width: 80cqw; }
.screens[data-platform="macos"] .screen-sub { max-width: 60cqw; }
/* The window, sized by its own edges (--il/--ir/--ib: how far it sits inside
   the capture; see ContentImage#css_metrics). It spans the tile from the
   copy's left edge to the same margin on the right, so the whole width of the
   app is on show: the switches down the right of Blocker's list were cropped
   off when this was sized by the image and blown up to hide its shadow margin.
   The bottom is what the tile cuts, the same pocket as everywhere else. */
.screens[data-platform="macos"] .screen-shot {
  --ar: var(--l-ar, 1.5);
  --il: var(--l-il, 0);
  --ir: var(--l-ir, 0);
  --ib: var(--l-ib, 0);
  --win: 86cqw;                                             /* the window's width */
  --img: calc(var(--win) / (1 - var(--il) - var(--ir)));    /* the image's, margins included */
  flex: none;
  display: block;
  width: var(--win);
  /* Under the copy when the window is tall; pushed down to the fold when it's
     short, so a short window is still tucked rather than floating above it. */
  margin-top: auto;
  padding-top: 5cqh;
  margin-bottom: calc(var(--img) / var(--ar) * (var(--ib) + 0.08) * -1);
}
.screens[data-platform="macos"] .screen-shot img {
  width: var(--img);
  max-width: none;
  height: auto;
  margin-left: calc(var(--img) * var(--il) * -1);
  transform: rotate(var(--shot-rot, 0deg));
  transform-origin: top left;
}

/* On the web the dark capture is shown in dark mode, and its margins can
   differ from the light one's. Never in a capture: store shots are light. */
@media (prefers-color-scheme: dark) {
  html:not([data-screenshot]) .screens .screen-shot {
    --ar: var(--d-ar, var(--l-ar, 1.5));
    --it: var(--d-it, var(--l-it, 0));
    --il: var(--d-il, var(--l-il, 0));
    --ir: var(--d-ir, var(--l-ir, 0));
    --ib: var(--d-ib, var(--l-ib, 0));
  }
}

/* No tilt. Tiles sit side by side in the App Store strip, and devices leaning
   a degree each way read as crooked next to one another, not as lively. */

/* ── Hero screen: product name + subtitle left, app window peeking right
   (like the site hero / OG card), on the accent. It's the first App Store
   screen AND the visual header of the standalone page. ── */
.screen.hero { position: relative; overflow: hidden; }

.hero-copy {
  position: absolute;
  left: 9cqw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 44cqw;
}

.hero-eyebrow {
  font-weight: 700;
  letter-spacing: 0.28em;
  font-size: 2.3cqh;
  opacity: 0.92;
}

.hero-name {
  font-weight: 800;
  font-size: 15cqh;
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin-top: 2.6cqh;
}

.hero-sub {
  font-weight: 500;
  font-size: 4.2cqh;
  line-height: 1.16;
  opacity: 0.94;
  margin-top: 3cqh;
  max-width: 17ch;
}

.hero-art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58cqw;
  z-index: 1;
}

.hero-art img {
  display: block;
  width: 100%;
  height: auto;
  transform: translate(9%, 11%);
  transform-origin: bottom left;
}

/* Displays: the window carries dense UI, so it runs bigger and bleeds off
   the right edge, and the copy hugs the left — clear air between the
   wordmark and the window. */
.screens[data-product="displays"] .hero-copy {
  left: 6.5cqw;
  max-width: 34cqw;
}

.screens[data-product="displays"] .hero-name {
  font-size: 12.5cqh;
}

.screens[data-product="displays"] .hero-art {
  width: 70cqw;
  right: -12cqw;
}

/* Uploads: the window is a list of small rows, so it runs bigger and off the
   right edge to be legible, and the subtitle balances instead of leaving
   "back" alone on the last line. */
.screens[data-product="uploads"] .hero-art {
  width: 68cqw;
  right: -9cqw;
}

.screens[data-product="uploads"] .hero-sub { text-wrap: balance; }

/* Portrait tiles: left-aligned copy (centered stacks read badly at phone
   aspect), headline a notch smaller, tighter outer padding, balanced lines. */
.screens[data-platform="ios"] .screen-body,
.screens[data-platform="ipados"] .screen-body {
  align-items: flex-start;
  text-align: left;
  padding: 6cqh 7cqw 0;
}

.screens[data-platform="ios"] .screen-headline,
.screens[data-platform="ipados"] .screen-headline {
  font-size: var(--head);
  line-height: 1.04;
  max-width: 86cqw;
  text-wrap: balance;
}

.screens[data-platform="ios"] .screen-sub,
.screens[data-platform="ipados"] .screen-sub {
  font-size: var(--sub);
  margin-top: 2.2cqh;
  text-wrap: balance;
  max-width: 34ch;
}

/* The copy holds the height of a two-line headline over a two-line sub, so
   the device starts at the SAME height on every tile. In the App Store strip
   the tiles sit side by side: when each device started wherever its copy
   happened to end, the row of phones stepped up and down. The headline is
   sized so two lines is the normal case on a phone (at 5.6cqh most ran to
   three, ragged). Copy that still runs longer pushes its own device down
   rather than overlapping it: shorten the copy. */
.screens[data-platform="ios"]    .screen { --head: 4.7cqh; --sub: 2.8cqh; }
.screens[data-platform="ipados"] .screen { --head: 5.6cqh; --sub: 3cqh; }
.screens[data-platform="ios"] .screen-copy,
.screens[data-platform="ipados"] .screen-copy {
  display: block;
  min-height: calc(var(--head) * 1.04 * 2 + 2.2cqh + var(--sub) * 1.2 * 2);
}

/* Portrait platforms (iOS/iPad): hero is a flex column — copy on top, device
   pushed to the bottom and bled off (like the feature tiles), so the name never
   overlaps the device. */
.screens[data-platform="ios"] .screen.hero,
.screens[data-platform="ipados"] .screen.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.screens[data-platform="ios"] .hero-copy,
.screens[data-platform="ipados"] .hero-copy {
  position: static;
  transform: none;
  max-width: none;
  padding: 6cqh 8cqw 0;
}

/* The name fills about three quarters of the tile's width whatever its length
   (--chars, set by the hero component): "Email" can be far bigger than
   "Blocker". The sub is the size of every other tile's sub, which keeps a
   long one to two balanced lines instead of three with a word left over. */
.screens[data-platform="ios"] .hero-name,
.screens[data-platform="ipados"] .hero-name {
  font-size: min(var(--name-max), calc(155cqw / var(--chars, 7)));
  line-height: 0.95;
}
.screens[data-platform="ios"]    .screen.hero { --name-max: 14.5cqh; }
.screens[data-platform="ipados"] .screen.hero { --name-max: 12cqh; }

.screens[data-platform="ios"] .hero-sub,
.screens[data-platform="ipados"] .hero-sub {
  font-size: var(--sub);
  max-width: 30ch;
  margin: 2.6cqh auto 0;
  text-wrap: balance;
}

.screens[data-platform="ios"] .hero-art,
.screens[data-platform="ipados"] .hero-art {
  position: static;
  transform: none;
  flex: none;
  width: 92cqw;      /* the image; its shadow margin is the gap under the copy */
  margin-top: 1cqh;
}
.screens[data-platform="ipados"] .hero-art { width: 96cqw; margin-top: 0; }

.screens[data-platform="ios"] .hero-art img,
.screens[data-platform="ipados"] .hero-art img {
  width: 100%;
  transform: none;
}

/* Device shots are pre-framed (bezel + shadow baked into the PNG, with a
   transparent margin for the shadow), so no CSS rounding/shadow here. They are
   placed by the DEVICE, not the image (--it/--il/--ir: how far the device sits
   inside the capture; see ContentImage#css_metrics): it starts one fixed gap
   under the copy and runs off the bottom of the tile.

   It used to be pushed down by a fifth of the tile on top of its own margin,
   which left a band of empty accent between the copy and the device on every
   tile. Now a short headline shows more of the device instead of more gap. */
.screens[data-platform="ios"] .screen-shot,
.screens[data-platform="ipados"] .screen-shot {
  --ar: var(--l-ar, 0.5);
  --it: var(--l-it, 0);
  --il: var(--l-il, 0);
  --ir: var(--l-ir, 0);
  --dev: 84cqw;                                             /* the device's width */
  --img: calc(var(--dev) / (1 - var(--il) - var(--ir)));    /* the image's, margins included */
  flex: none;
  display: block;
  align-self: center;
  width: var(--dev);
  margin-top: calc(4.5cqh - var(--img) / var(--ar) * var(--it));
}
.screens[data-platform="ipados"] .screen-shot { --dev: 86cqw; }
.screens[data-platform="ios"] .screen-shot img,
.screens[data-platform="ipados"] .screen-shot img {
  width: var(--img);
  max-width: none;
  height: auto;
  margin-left: calc(var(--img) * var(--il) * -1);
  transform: none;
}

/* ── The whole device (`fit: whole` on the screen) ────────────────────────────
   For a screen whose point is at the bottom: a share sheet, a tab bar. The
   normal tile tucks a device's lower fifth off the edge, which on such a screen
   hides the one thing the headline is about (Blocker's share tile showed a
   device list and no share sheet). Here the device takes whatever height is
   left under the copy and is shown entire. Not clipped, so not tilted. ── */
.screens .screen.screen--whole .screen-shot {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  margin-top: 4cqh;
  padding-bottom: 2.5cqh;
}
.screens .screen.screen--whole .screen-shot picture {
  display: flex;
  justify-content: center;
  height: 100%;
}
.screens .screen.screen--whole .screen-shot img {
  width: auto;
  height: 100%;
  max-width: 100%;
  margin-left: 0;
  object-fit: contain;
  transform: none;
}

/* ── Siri: no screenshot to show, so the tile draws the exchange ──────────────
   What you say (a glowing bubble, right) and the app's answer (a white card
   with the app icon, left), or the steps of a Shortcut. Same canvas as the
   iPad tiles, so the strip reads as one family. The reply text is the intent's
   own dialog, never invented copy. ── */
.screens[data-platform="siri"] .screen { --w: 1032; --h: 1376; }

.screen-voice {
  margin: auto 0;
  width: 82cqw;
  display: flex;
  flex-direction: column;
  gap: 4.5cqh;
  padding-bottom: 3cqh;
  text-align: left;
}

.voice-say {
  align-self: flex-end;
  max-width: 74cqw;
  font-size: 4.6cqh;
  font-weight: 700;
  line-height: 1.18;
  padding: 3.2cqh 4.8cqw;
  border-radius: 4.6cqh 4.6cqh 1.2cqh 4.6cqh;
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 0 0 0.35cqh rgba(255, 255, 255, 0.8),
    0 0 5cqh rgba(255, 110, 210, 0.45),
    0 0 10cqh rgba(90, 170, 255, 0.4);
}

.voice-reply {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 3cqw;
  max-width: 76cqw;
  padding: 2.8cqh 4.4cqw;
  border-radius: 4.6cqh 4.6cqh 4.6cqh 1.2cqh;
  background: #fff;
  color: #111;
  box-shadow: 0 2cqh 5cqh rgba(0, 0, 0, 0.18);
}

.voice-icon { flex: none; display: block; width: 9cqh; height: 9cqh; }
.voice-icon svg { display: block; width: 100%; height: 100%; }

.voice-reply-app {
  font-size: 2.1cqh;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b70;
}

.voice-reply-line {
  font-size: 3.9cqh;
  font-weight: 650;
  line-height: 1.2;
  margin-top: 0.5cqh;
}

.screen-shortcut {
  margin: auto 0;
  width: 78cqw;
  text-align: left;
  background: #fff;
  color: #111;
  border-radius: 4cqh;
  padding: 3.6cqh 4.6cqw 4.2cqh;
  box-shadow: 0 2.5cqh 6cqh rgba(0, 0, 0, 0.2);
}

.shortcut-head {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding-bottom: 2.6cqh;
  margin-bottom: 2.8cqh;
  border-bottom: 0.25cqh solid #e6e6ea;
}

.shortcut-head .voice-icon { width: 7cqh; height: 7cqh; }
.shortcut-name { font-size: 4.4cqh; font-weight: 800; letter-spacing: -0.01em; }

.shortcut-steps { list-style: none; display: flex; flex-direction: column; gap: 1.8cqh; }

.shortcut-step {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.4cqh 1.8cqw;
  background: #f2f2f6;
  border-radius: 2.4cqh;
  padding: 2.2cqh 3.2cqw;
  font-size: 3.3cqh;
  font-weight: 650;
}

.shortcut-token {
  background: var(--accent);
  color: #fff;
  border-radius: 1.4cqh;
  padding: 0.7cqh 1.8cqw;
}

/* ── Screenshot mode (html[data-screenshot], set by ?capture) ─────────────────
   Strip the shared product hero + footer so the .screen tiles stack flush from
   y=0 at exact App Store dimensions and the capture slices hold. (site.css isn't
   even loaded in capture; these are belt-and-suspenders in case it ever is.) ── */
html[data-screenshot] .platform-hero,
html[data-screenshot] .product-footer,
html[data-screenshot] .product-legal { display: none; }

/* ── Web presentation (everything EXCEPT during capture) ──────────────────────
   The page reads as a real responsive page: the platform-head is the hero, and
   each App Store tile is shown as a rounded PANEL — the SAME composition that
   gets captured (headline + subtitle + app window), just scaled down to a
   website-sized card so its text lands near the site's own sizes. The capture
   itself is byte-for-byte untouched. ── */
html:not([data-screenshot]) .screens {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  max-width: 1080px;
  margin-inline: auto;
  /* Extra top room so the panels sit comfortably below the hero's pocket. */
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 5vw, 2rem) clamp(3rem, 8vw, 5rem);
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

/* The App Store hero tile duplicates the platform-head hero on web — drop it.
   (.screens in the selector so it outranks the portrait .screens[...] .hero rule.) */
html:not([data-screenshot]) .screens .screen.hero { display: none; }

/* Each tile is a rounded panel, capped to a width that keeps its container-unit
   text near website size. Composition is identical to the captured screenshot. */
html:not([data-screenshot]) .screen {
  width: var(--web-shot-w, 320px);
  max-width: 100%;
  border-radius: 22px;
  /* Soft, tight lift. A wide/dark shadow reads as muddy sludge on the saturated
     accent, especially where three panels' shadows pool along the bottom edge. */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
html:not([data-screenshot]) .screens[data-platform="ios"]    { --web-shot-w: 310px; }
html:not([data-screenshot]) .screens[data-platform="ipados"] { --web-shot-w: 480px; }
html:not([data-screenshot]) .screens[data-platform="macos"]  { --web-shot-w: 840px; }

/* Page hero: "<Product> for <Platform>" + tagline + a platform switcher —
   orients a visitor who lands here and lets them jump to the sibling platforms. */
.platform-head {
  /* Same container geometry as the product-page hero (1200px + space-xl inset)
     so the brand + H1 land on the exact same top-left spot — navigating between
     the product page and a platform page must not nudge them. */
  max-width: 1200px;
  margin-inline: auto;
  text-align: left;
  color: #fff;
  padding: clamp(3.25rem, 9vh, 6rem) var(--space-md) clamp(2rem, 5vh, 3.25rem);
  font-family: var(--font-display);
}
@media (min-width: 640px) {
  .platform-head { padding-inline: var(--space-xl); }
}

.platform-head-brand {
  display: inline-block;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.platform-head-brand:hover { color: #fff; }

.platform-head-title {
  font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: calc(0.75rem + 5px) 0 0;   /* match the product hero's brand→H1 gap */
  max-width: 18ch;
}
/* "for <Platform>" — lighter, so the product name reads as the subject. */
.platform-head-title span { font-weight: 500; color: rgba(255, 255, 255, 0.6); }

.platform-head-sub {
  font-weight: 500;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
  margin: 1.1rem 0 0;
  max-width: 40ch;
}

.platform-head-pills {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.9rem;
}

.platform-head-pill {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5em 1.15em;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.platform-head-pill:hover { border-color: #fff; }
.platform-head-pill.is-active {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
}

.platform-foot {
  position: relative;
  background: var(--surface);
  color: #fff;
  --page-text: #fff;   /* the signup component derives its colors from this */
  text-align: center;
  padding: clamp(4rem, 12vh, 8rem) 6vw clamp(5rem, 14vh, 9rem);
  font-family: var(--font-display);
}

.platform-foot-lead {
  font-weight: 700;
  font-size: clamp(1.5rem, 4.5vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 auto 1.6rem;
  max-width: 18ch;
}

/* Email signup — the exact product-page component (site.css .signup-*), so the
   notify-me form on a screens page matches the one on the product page. */
.platform-foot .signup-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.platform-foot .signup-status {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.platform-foot .signup-form {
  display: flex;
  flex-direction: row;
  max-width: 30rem;
  width: 100%;
  background: oklch(from var(--page-text, #fff) l c h / 0.14);
  border-radius: 2px;
  overflow: hidden;
}

.platform-foot .signup-input {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  border: none;
  background: transparent;
  color: var(--page-text, #fff);
  flex: 1;
  min-width: 180px;
}

.platform-foot .signup-input:focus { outline: none; background: oklch(from var(--page-text, #fff) l c h / 0.08); }
.platform-foot .signup-input::placeholder { color: oklch(from var(--page-text, #fff) l c h / 0.5); }

.platform-foot .signup-button {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 600;
  /* Match the product-page pill (footer sets --page-text: #fff → white here). */
  background: var(--page-text, #fff);
  color: var(--accent);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}
.platform-foot .signup-button:hover { opacity: 0.9; }

/* Store-link CTA (when not Coming Soon) */
.platform-foot-cta {
  display: inline-block;
  background: #fff;
  color: var(--accent);
  font-weight: 700;
  padding: 0.9em 1.8em;
  border-radius: 6px;
  text-decoration: none;
}

/* ── Dark mode ────────────────────────────────────────────────────────────────
   Ease the accent back: same hue, a touch darker and desaturated, so the big
   color fields aren't glaring on a dark display. Derived once from --accent and
   inherited by every accent surface (body bg, panels, footer). Matches the same
   formula in site.css so screens and product pages don't drift. ── */
@media (prefers-color-scheme: dark) {
  /* :not([data-screenshot]) so a capture never desaturates — App Store shots
     always use the raw brand accent, regardless of the renderer's color scheme. */
  html:not([data-screenshot]) .screens-body {
    --surface: oklch(from var(--accent) calc(l * 0.92) calc(c * 0.7) h);
  }
}