/* Mailgi — "Editorial" design system.
   Implemented from the Claude Design project e551a0cc ("Redesign C").
   Serif display type (Newsreader) with italic accents, a grotesk body face,
   mono for anything that is literally code or an address. */

/* Self-hosted (see #84). These used to be imported from Google's font CDN,
   which sent every visitor's IP to Google on every page load, in the critical
   render path and therefore before any consent could be asked. Not gateable:
   gating a stylesheet means an unstyled first paint for everyone.

   One variable file per family/style/subset — Google serves a single file
   covering the whole weight range, so the discrete weights it declares are
   collapsed into a range here. Newsreader also carries an optical-size axis,
   which font-optical-sizing handles by default.

   Newsreader, Hanken Grotesk and JetBrains Mono are all SIL Open Font
   License 1.1 — self-hosting is permitted; see fonts/LICENSE.txt. */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/newsreader-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/newsreader-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #fbfbfa;
  --surface: #f2f1ec;
  --ink: #16211f;
  --muted: #5c6a66;
  --muted-2: #7e8a86;
  --rule: #e3e5e2;
  --rule-strong: #d7dad5;
  --numeral: #c3cbc7;

  --accent: oklch(0.52 0.11 200);
  --accent-dark: oklch(0.42 0.11 200);
  --accent-mid: oklch(0.35 0.08 200);
  --accent-light: oklch(0.78 0.1 200);

  --on-dark: #f2f1ec;
  --on-dark-body: #cfd6d1;
  --on-dark-muted: #a9b3ae;
  --on-dark-dim: #8f9a95;
  --on-dark-faint: #71807b;
  --ok: #4a8a63;

  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --shell: 1240px;
  --gutter: 48px;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
::selection { background: oklch(0.72 0.1 200 / .3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@keyframes pulse { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
@keyframes reveal { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

/* Entrance animations are decoration. Anyone who has asked the OS not to
   animate gets the final state immediately. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Anything that also sets vertical padding must use padding-block, never the
   `padding` shorthand — the shorthand zeroes these gutters, and .hero/.section
   come later in the file so they win. On desktop max-width hides the damage;
   on a phone the content lands flush against the screen edge. */
.shell { max-width: var(--shell); margin: 0 auto; width: 100%; padding-left: var(--gutter); padding-right: var(--gutter); }
.rule-top { border-top: 1px solid var(--rule); }
.surface { background: var(--surface); }
.dark { background: var(--ink); color: var(--on-dark); }

/* ── Type ─────────────────────────────────────────────────────────────── */
.display, h1, h2, h3.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}
h1 { font-size: clamp(44px, 7vw, 84px); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: clamp(30px, 4vw, 40px); line-height: 1.15; letter-spacing: -0.01em; }
em.accent { font-style: italic; color: var(--accent); }
em.accent-light { font-style: italic; color: var(--accent-light); }
.kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
.lede { font-size: 19px; line-height: 1.65; color: var(--muted); margin: 0; }
.body { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; }
.small { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; }
.mono { font-family: var(--mono); }
.numeral { font-family: var(--serif); color: var(--numeral); }
.reveal { animation: reveal .7s ease both; }
.reveal-1 { animation-delay: .1s }
.reveal-2 { animation-delay: .2s }
.reveal-3 { animation-delay: .3s }

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: relative;
  display: flex; align-items: center; gap: 32px;
  padding-top: 28px; padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 26px; color: var(--ink);
}
/* The mark carries its own corner radius (rx in the SVG), so no clipping here. */
.brand img { display: block; flex: none; }
.brand:hover { color: var(--ink); }
.nav-links { display: flex; gap: 26px; font-size: 14px; font-weight: 500; letter-spacing: .01em; flex-wrap: wrap; }
.nav-links a { color: var(--muted-2); }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }
.nav-end { margin-left: auto; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.nav-note { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--accent); }
.icon-link { color: var(--ink); display: inline-flex; align-items: center; }
.icon-link:hover { color: var(--accent); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; font-weight: 600; font-size: 14px;
  padding: 10px 22px; border-radius: 3px; border: 1px solid transparent;
  cursor: pointer; font-family: inherit;
}
.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid:hover { background: var(--accent-mid); color: var(--bg); }
.btn-lg { font-size: 15px; padding: 15px 32px; }
.btn-xl { font-size: 16px; padding: 16px 40px; }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bg); }
.link-serif {
  font-family: var(--serif); font-style: italic; font-size: 17px;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px;
}
.link-serif:hover { color: var(--accent); border-color: var(--accent); }

/* ── Layout pieces ────────────────────────────────────────────────────── */
.hero { padding-block: 110px 90px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 52px; align-items: end; }
.hero-actions { display: flex; gap: 16px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }

.split { display: grid; grid-template-columns: 1fr 1fr; }
.split > .quote { padding: 72px 64px 72px 0; border-right: 1px solid rgba(242, 241, 236, .14); }
.split > .code { padding: 56px 0 56px 64px; align-self: center; }
.pull {
  font-family: var(--serif); font-style: italic; font-size: 26px;
  line-height: 1.45; max-width: 420px;
}
.pull .mono { font-style: normal; font-size: 17px; color: var(--accent-light); }
.caps-note { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-dim); margin-top: 26px; }
.codeblock { font-family: var(--mono); font-size: 13.5px; line-height: 1.9;  overflow-x: auto;}
.codeblock .c { color: var(--on-dark-faint); }
.codeblock .v { color: var(--accent-light); }

.section { padding-block: 96px; }
.section-sm { padding-block: 72px; }

/* Numbered editorial rows */
.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: 64px minmax(140px, 240px) minmax(0, 1fr);
  gap: 24px; padding: 26px 0; border-top: 1px solid var(--rule); align-items: baseline;
}
.row:last-child { border-bottom: 1px solid var(--rule); }
.row .numeral { font-size: 28px; }
.row h3 { font-size: 17px; font-weight: 700; margin: 0; font-family: var(--sans); }
/* Rows may carry more than one paragraph; keep every one in the content
   column instead of letting the extras wrap into the numeral column. */
.row > p { grid-column: 3; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 56px; }
.cap-label { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-bottom: 10px; }
.grid-3 h3, .tiles h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; font-family: var(--sans); }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.tile { background: var(--bg); padding: 28px 26px; }
.tile .numeral { font-size: 26px; display: block; margin-bottom: 14px; }

.chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.chip {
  font-family: var(--mono); font-size: 13px; border: 1px solid var(--rule-strong);
  background: var(--bg); padding: 9px 18px; border-radius: 3px;
}

.stack-split { display: grid; grid-template-columns: 320px 1fr; gap: 72px; align-items: start; }
.inline-split { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
/* <details>, not a JS accordion: the answers stay in the DOM and in the
   accessibility tree whether or not scripts run, which is the whole point on
   a site whose audience includes crawlers that never execute JS. */
.faq { display: flex; flex-direction: column; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; gap: 24px; align-items: baseline; padding: 22px 0;
  cursor: pointer; list-style: none; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .numeral { font-size: 20px; flex: none; }
.faq summary .q { font-size: 17px; font-weight: 600; flex: 1; }
.faq summary .mark { font-family: var(--serif); font-size: 22px; color: var(--accent); flex: none; }
.faq summary .mark::after { content: "+"; }
.faq details[open] summary .mark::after { content: "−"; }
.faq .a { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; padding: 0 60px 24px 44px; max-width: 640px; }

/* ── Tabs (agents page) ───────────────────────────────────────────────── */
.tabbar { display: flex; gap: 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.tab {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-weight: 600; font-size: 14px; padding: 10px 18px; margin-bottom: -1px;
  color: var(--muted-2); border-bottom: 2px solid transparent;
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.panel { display: none; }
.panel[data-active] { display: block; }
pre.code {
  background: var(--ink); color: #e6e9e5; padding: 26px 30px; margin: 0;
  font-family: var(--mono); font-size: 13px; line-height: 1.75;
  overflow: auto; white-space: pre-wrap;
}

/* ── Bullets on the dark hero ─────────────────────────────────────────── */
.dark-points { display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.6; max-width: 680px; }
.dark-points > div { display: flex; gap: 14px; }
.dark-points .arrow { color: var(--accent-light); flex: none; }
.dark-points span.t { color: var(--on-dark-body); }
.dark-points .mono { font-size: 13.5px; color: var(--on-dark); }
.dark-points em { font-family: var(--serif); color: var(--on-dark-dim); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--rule); }
.footer-inner {
  padding: 28px 0; display: flex; gap: 24px; align-items: baseline;
  flex-wrap: wrap; font-size: 13.5px; color: var(--muted-2);
}
.footer-brand { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink); }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--ink); }
.footer-end { margin-left: auto; display: inline-flex; gap: 22px; flex-wrap: wrap; }
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-2); }
.status .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--muted-2); flex: none; }
.status[data-state="ok"] { color: var(--ok); }
.status[data-state="ok"] .dot { background: var(--ok); animation: pulse 2s infinite; }
.status[data-state="down"] { color: #a4553a; }
.status[data-state="down"] .dot { background: #a4553a; }

/* ── Comparison table ─────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; max-width: 100%; }
.cmp { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cmp thead th {
  font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2); border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
.cmp tbody th { font-family: var(--sans); font-weight: 600; color: var(--ink); white-space: nowrap; }
.cmp td { color: var(--muted); }
.cmp .own { background: var(--surface); color: var(--ink); }
.cmp thead .own { color: var(--accent-dark); }
.cmp .yes { color: var(--ok); font-weight: 600; }
.cmp .no { color: var(--muted-2); }
.verified-note { font-family: var(--mono); font-size: 12px; color: var(--muted-2); }

/* ── Cookie consent (#76) ─────────────────────────────────────────────────
   Injected by consent.js, never in the served HTML — see that file for why.
   position:fixed so it cannot shift layout, and bottom-anchored so it never
   covers the nav CTA or the hero. */
#consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 18px var(--gutter);
  background: var(--ink); color: var(--on-dark-body);
  border-top: 1px solid rgba(242, 241, 236, .14);
  /* Lifts it off whatever is behind. The pages use full-width ink bands as a
     device, and without this the banner merges into one at some scroll
     positions. */
  box-shadow: 0 -12px 32px rgba(22, 33, 31, .28);
  font-size: 14px; line-height: 1.55;
  animation: consent-in .25s ease both;
}
@keyframes consent-in { from { transform: translateY(100%) } to { transform: none } }
.consent-text { margin: 0; max-width: 760px; flex: 1 1 420px; }
.consent-actions { display: flex; gap: 10px; flex: none; margin-left: auto; }
.consent-btn {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  padding: 10px 20px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.consent-accept { background: var(--on-dark); color: var(--ink); }
.consent-accept:hover { background: #fff; }
.consent-decline {
  background: transparent; color: var(--on-dark-muted);
  border-color: rgba(242, 241, 236, .26);
}
.consent-decline:hover { color: var(--on-dark); border-color: rgba(242, 241, 236, .5); }
.consent-btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.consent-link { color: var(--on-dark); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.consent-link:hover { color: #fff; }

/* ── Prose pages (privacy, and anything else that is mostly text) ────────
   Narrow measure, real paragraph rhythm. The marketing pages are built from
   grids and fragments; a legal disclosure needs to read like a document. */
.prose { max-width: 720px; }
.prose h2 { font-size: clamp(24px, 3vw, 30px); margin: 56px 0 16px; }
.prose h3 { font-size: 17px; font-weight: 700; font-family: var(--sans); margin: 32px 0 10px; }
.prose p, .prose li { font-size: 15.5px; line-height: 1.75; color: var(--muted); }
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ── Mobile drawer ───────────────────────────────────────────────────────
   A visually-hidden-but-focusable checkbox drives this, not <details>.
   <details> was wrong twice: a closed one gets content-visibility:hidden from
   the UA, so nested inside the drawer its links rendered without contributing
   height, and used AS the drawer it hid the desktop nav outright even with
   display:contents. The state must be open on desktop and closed on mobile,
   and `open` is an attribute CSS cannot vary. :checked ~ can. */
.nav-toggle-cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-toggle { display: none; }


/* ── Resources group (#87) ────────────────────────────────────────────────
   Not a <details>: a closed one gets content-visibility:hidden from the UA, so
   on mobile — where the panel must be visible inside the open drawer — its
   links render without contributing height and hang outside the panel. That is
   not overridable from the child.

   Instead: a real link as the trigger, revealed on hover or focus-within.
   Tapping it goes to /guides.html, so it is a useful destination rather than a
   dead end on touch, and keyboard users get the panel the moment focus enters.
   Every href sits in the served HTML either way. */
.nav-group { position: relative; display: inline-block; }
.nav-group-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-group-trigger::after {
  content: '';
  width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.nav-group:has(a[aria-current="page"]) > .nav-group-trigger { color: var(--ink); }

.nav-menu-panel {
  position: absolute; top: calc(100% + 12px); left: -14px; z-index: 40;
  display: none; flex-direction: column; min-width: 176px;
  padding: 8px; gap: 2px;
  background: var(--bg); border: 1px solid var(--rule-strong); border-radius: 8px;
  box-shadow: 0 12px 28px rgba(22, 33, 31, .1);
}
.nav-group:hover > .nav-menu-panel,
.nav-group:focus-within > .nav-menu-panel { display: flex; }
.nav-menu-panel a { padding: 8px 12px; border-radius: 5px; white-space: nowrap; color: var(--muted); }
.nav-menu-panel a:hover { background: var(--surface); color: var(--ink); }
.nav-menu-panel a[aria-current="page"] { color: var(--ink); background: var(--surface); border-bottom: 0; padding-bottom: 8px; }

/* ── Responsive: tablet ───────────────────────────────────────────────────
   Restored after a too-greedy regex deletion removed it wholesale, taking
   --gutter: 24px and every grid collapse with it. Note the padding-block
   rules: the `padding` shorthand here would re-zero .shell's gutters. */
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .hero { padding-block: 64px 56px; }
  .section { padding-block: 56px; }
  .section-sm { padding-block: 48px; }
  .hero-grid, .split, .stack-split { grid-template-columns: 1fr; gap: 32px; }
  .hero-actions { justify-content: flex-start; }
  .split > .quote { padding: 48px 0 32px; border-right: 0; border-bottom: 1px solid rgba(242, 241, 236, .14); }
  .split > .code { padding: 32px 0 48px; }
  .grid-3 { grid-template-columns: 1fr; gap: 32px; }
  .tiles { grid-template-columns: 1fr; }
  .row { grid-template-columns: 44px 1fr; }
  .row p { grid-column: 2; }
  .faq .a { padding-left: 0; padding-right: 0; }
  .cmp th, .cmp td { padding: 12px; }
  #consent { gap: 14px; padding: 16px var(--gutter); }
  .consent-actions { margin-left: 0; width: 100%; }
  .consent-btn { flex: 1; }
  .nav { gap: 18px; }
  .footer-end { margin-left: 0; }
}

@media (max-width: 700px) {
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    order: 3; margin-left: auto; cursor: pointer;
    width: 40px; height: 40px;
    border: 1px solid var(--rule-strong); border-radius: 7px; background: var(--bg);
  }
  .nav-toggle-cb:focus-visible + .nav-toggle { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* Three bars from one element: the middle is the box, the outer two are
     pseudo-elements. Becomes a cross when open. */
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    content: ''; display: block; width: 18px; height: 1.5px;
    background: var(--ink); border-radius: 2px; transition: transform .18s, background .18s;
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before { position: absolute; top: -6px; }
  .nav-toggle-bars::after { position: absolute; top: 6px; }
  .nav-toggle-cb:checked + .nav-toggle .nav-toggle-bars { background: transparent; }
  .nav-toggle-cb:checked + .nav-toggle .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle-cb:checked + .nav-toggle .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

  .nav-links { display: none; }

  /* Inside an open drawer the group is already "in", so its links show flat
     rather than making Compare a two-tap destination. Static positioning is
     what lets them contribute height to the drawer. */
  .nav-links > a, .nav-group-trigger {
    padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 15px;
  }
  .nav-group { display: block; width: 100%; }
  .nav-group-trigger {
    display: block; color: var(--muted-2); font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase;
    border-bottom: 0; padding: 14px 0 4px;
  }
  .nav-group-trigger::after { display: none; }
  .nav-menu-panel,
  .nav-group:hover > .nav-menu-panel,
  .nav-group:focus-within > .nav-menu-panel {
    display: flex; flex-direction: column; position: static;
    box-shadow: none; border: 0; background: transparent;
    padding: 0; margin: 0; min-width: 0;
  }
  .nav-menu-panel a { padding: 13px 0; border-bottom: 1px solid var(--rule); border-radius: 0; white-space: normal; }
  .nav-menu-panel a:hover { background: transparent; }

  .nav-toggle-cb:checked ~ .nav-links {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 45;
    display: flex; flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--bg); border-bottom: 1px solid var(--rule);
    box-shadow: 0 14px 28px rgba(22, 33, 31, .09);
  }
}

/* ── Phone (#88) ──────────────────────────────────────────────────────────
   Until now the 900px rules were all that applied below 480px, so nothing was
   actually designed for a handset. Display type in particular was still
   asking for 44px on a 390px screen. */
@media (max-width: 560px) {
  .nav { gap: 12px; padding-top: 20px; padding-bottom: 20px; }
  .brand { font-size: 22px; }
  .brand img { width: 22px; height: 22px; }
  .nav-end { gap: 12px; }
  .nav-note { display: none; }   /* markup stays; only hidden visually */

  .hero { padding-block: 44px 40px; }
  h1 { font-size: clamp(30px, 9vw, 40px); }
  h2 { font-size: clamp(23px, 6.5vw, 28px); }
  .lede { font-size: 17px; }
  .section { padding-block: 44px; }
  .section-sm { padding-block: 36px; }

  /* Long lines are the main overflow risk on this site. They scroll inside
     their own box; the page body never scrolls sideways. */
  pre.code { font-size: 11.5px; padding: 16px 14px; overflow-x: auto; }
  /* Same guard as pre.code. Restoring .shell's gutter (it was being zeroed
     by the padding shorthand) narrowed the content box enough to push these
     long lines past the viewport edge, so the fix surfaced this. */
  .codeblock { font-size: 11.5px; overflow-x: auto; }
  .prose h2 { margin: 40px 0 14px; }
  .prose p, .prose li { font-size: 15px; }

  .row { gap: 14px; }
  .numeral { font-size: 22px; }
  .footer-inner { gap: 14px 18px; }
  .footer-end { gap: 14px; }
  #consent { padding: 14px var(--gutter); }
}

/* Very narrow — a 320px iPhone SE still exists. */
@media (max-width: 360px) {
  h1 { font-size: 28px; }
  pre.code { font-size: 11px; }
}


/* ---- Homepage illustration: decorative iframe + crawlable use-case list ---- */
.illo-stage {
  margin: 6px 0 30px;
  max-width: 1000px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--rule), 0 12px 30px rgba(22, 33, 31, 0.06);
}
.illo-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;   /* fallback if the sizing script can't run; JS sets the exact height */
  min-height: 320px;
  border: 0;
  overflow: hidden;
}
.illo-cases {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 44px;
}
.illo-cases li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 16px;
  border-left: 2px solid var(--accent-light);
}
.illo-role {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.illo-cases .mono { font-size: 14px; color: var(--ink); }

@media (max-width: 700px) {
  .illo-cases { grid-template-columns: 1fr; }
  .illo-frame { min-height: 360px; }  /* the scene reflows inside its canvas; JS sizes from the live canvas ratio */
}

/* Reduced motion: drop the animation entirely; the list carries the message. */
@media (prefers-reduced-motion: reduce) {
  .illo-stage { display: none; }
}