/* Generated by scripts/build-tokens.mjs from tokens/: do not edit. */
/* Socle, the identity of the platform (specs product.md § Themes and universe identity). Its palette
   in three display modes (data-theme on <html>): night, the default (no attribute, or "night"), dim
   (the night with lighter backgrounds), day; "automatic" follows the system (day when it prefers
   light). The names of Socle first (--socle-*), then the roles the screens use (--color-*, --qr-*,
   --sign-*), then the type, the shapes and the scales. */
:root {
  color-scheme: dark;
  --socle-background: #0F1116;
  --socle-surface: #161B22;
  --socle-surface-2: #1C2129;
  --socle-line-soft: #262A30;
  --socle-line: #2A2F35;
  --socle-line-strong: #3E4248;
  --socle-line-control: #6D757F;
  --socle-text: #F3F5F9;
  --socle-muted: #9AA3B0;
  --socle-ember: #FF5A3C;
  --socle-on-ember: #1F0A05;
  --socle-ember-hover: #FF7358;
  --socle-sky: #5FB0FF;
  --socle-leaf: #2BC48A;
  --socle-amber: #FFB020;
  --socle-rose: #FF3D6E;
  --socle-on-rose: #1F0A05;
  --socle-ink: #1F0A05;
  --badge-solid-background-saturation: 36%;
  --badge-solid-background-lightness: 18%;
  --badge-solid-foreground-saturation: 90%;
  --badge-solid-foreground-lightness: 80%;
  --badge-soft-background-saturation: 30%;
  --badge-soft-background-lightness: 14%;
  --badge-soft-foreground-saturation: 85%;
  --badge-soft-foreground-lightness: 77%;
}
:root[data-theme="dim"] {
  --socle-background: #161B22;
  --socle-surface: #1C2129;
  --socle-surface-2: #22272F;
  --socle-line-soft: #2A2F35;
  --socle-line: #3E4248;
  --socle-line-strong: #4A4F56;
  --badge-solid-background-lightness: 22%;
  --badge-solid-foreground-lightness: 84%;
  --badge-soft-background-lightness: 18%;
  --badge-soft-foreground-lightness: 80%;
}
:root[data-theme="day"] {
  color-scheme: light;
  --socle-background: #FAF7F2;
  --socle-surface: #FFFFFF;
  --socle-surface-2: #F1ECE4;
  --socle-line-soft: #E8E2D8;
  --socle-line: #DED7CB;
  --socle-line-strong: #C8C0B2;
  --socle-line-control: #908979;
  --socle-text: #141A24;
  --socle-muted: #5B6779;
  --socle-ember: #D23A17;
  --socle-on-ember: #FFFFFF;
  --socle-ember-hover: #B8341A;
  --socle-kicker: #B8341A;
  --socle-sky: #1F6FD6;
  --socle-leaf: #148A5E;
  --socle-amber: #B97A00;
  --socle-rose: #D61E4E;
  --socle-on-rose: #FFFFFF;
  --badge-solid-background-saturation: 60%;
  --badge-solid-background-lightness: 88%;
  --badge-solid-foreground-saturation: 70%;
  --badge-solid-foreground-lightness: 24%;
  --badge-soft-background-saturation: 55%;
  --badge-soft-background-lightness: 95%;
  --badge-soft-foreground-saturation: 65%;
  --badge-soft-foreground-lightness: 27%;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="automatic"] {
    color-scheme: light;
    --socle-background: #FAF7F2;
    --socle-surface: #FFFFFF;
    --socle-surface-2: #F1ECE4;
    --socle-line-soft: #E8E2D8;
    --socle-line: #DED7CB;
    --socle-line-strong: #C8C0B2;
    --socle-line-control: #908979;
    --socle-text: #141A24;
    --socle-muted: #5B6779;
    --socle-ember: #D23A17;
    --socle-on-ember: #FFFFFF;
    --socle-ember-hover: #B8341A;
    --socle-kicker: #B8341A;
    --socle-sky: #1F6FD6;
    --socle-leaf: #148A5E;
    --socle-amber: #B97A00;
    --socle-rose: #D61E4E;
    --socle-on-rose: #FFFFFF;
    --badge-solid-background-saturation: 60%;
    --badge-solid-background-lightness: 88%;
    --badge-solid-foreground-saturation: 70%;
    --badge-solid-foreground-lightness: 24%;
    --badge-soft-background-saturation: 55%;
    --badge-soft-background-lightness: 95%;
    --badge-soft-foreground-saturation: 65%;
    --badge-soft-foreground-lightness: 27%;
  }
}

/* The roles, on the palette: the same in every mode (they follow the --socle-* of the mode), and again
   on .universe-themed, the surfaces a universe theme colors by setting --socle-* on them. The
   personal theme goes before ember with --personal-accent, --personal-on-accent and
   --personal-accent-hover (set by the app on the surfaces of the person, reset on a universe theme
   unless "my theme everywhere"); a palette entry left unset falls back as written. */
:root, .universe-themed {
  --color-background: var(--socle-background);
  --color-surface: var(--socle-surface);
  --color-surface-hover: var(--socle-surface-2);
  --color-border: var(--socle-line);
  --color-separator: var(--socle-line-soft, var(--socle-line));
  --color-border-strong: var(--socle-line-strong, color-mix(in srgb, var(--socle-muted) 70%, var(--socle-line)));
  --color-control-border: var(--socle-line-control, color-mix(in srgb, var(--socle-muted) 60%, var(--socle-line)));
  --color-text: var(--socle-text);
  --color-text-muted: var(--socle-muted);
  --color-primary: var(--socle-ember);
  --color-kicker: var(--socle-kicker, var(--socle-ember));
  --color-on-primary: var(--socle-on-ember);
  --color-primary-hover: var(--socle-ember-hover, color-mix(in srgb, var(--socle-ember) 86%, var(--socle-text)));
  --color-accent: var(--personal-accent, var(--socle-ember));
  --color-accent-fill: var(--personal-accent, var(--socle-ember));
  --color-accent-fill-hover: var(--personal-accent-hover, var(--socle-ember-hover, color-mix(in srgb, var(--socle-ember) 86%, var(--socle-text))));
  --color-on-accent: var(--personal-on-accent, var(--socle-on-ember));
  --color-link: var(--socle-sky);
  --color-accent-text: var(--socle-sky);
  --color-focus: var(--socle-sky);
  --color-universe: var(--socle-sky);
  --color-progress: var(--socle-leaf);
  --color-success: var(--socle-leaf);
  --color-warning: var(--socle-amber);
  --color-live: var(--socle-rose);
  --color-danger: var(--socle-rose);
  --color-on-danger: var(--socle-on-rose);
  --color-like: var(--socle-ember);
  --color-unread: var(--socle-ember);
  --color-on-unread: var(--socle-on-ember);
  --color-bubble-own: color-mix(in srgb, var(--socle-sky) 20%, var(--socle-surface));
  --color-on-bubble-own: var(--socle-text);
  --qr-paper: #FFFFFF;
  --qr-ink: #0F1116;
  --sign-universe: var(--socle-sky);
  --sign-account: var(--socle-text);
  --sign-tag: var(--socle-leaf);
  --sign-channel: var(--socle-rose);
}

/* Type: Sora for the titles and the figures, Figtree for the text, JetBrains Mono for the addresses,
   the signs, the counters and the code. Shapes: 14 px cards, 10 px small elements and fields, 6 px
   badges, pills for the buttons. A badge: background: hsl(var(--badge-hue)
   var(--badge-solid-background-saturation) var(--badge-solid-background-lightness)), with
   --badge-hue set on the badge (hueOf in tokens.ts). */
:root {
  --font-family-display: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-family-sans: "Figtree", "Inter", "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans SC", "Noto Sans Bengali", "Helvetica Neue", "Segoe UI", "Arial", system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Menlo", "Consolas", monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 23px;
  --font-size-3xl: 31px;
  --font-size-display: 64px;
  --font-line-height-tight: 1.2;
  --font-line-height-normal: 1.4;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  --motion-duration-fast: 120ms;
  --motion-duration-normal: 200ms;
}
/* The advertiser page (/ads/…), in Socle, after the approved mockup (D-265). The tokens come first,
   inlined by the build from the design system: the page follows the device (night by default, day
   when it prefers light, day on paper). The bands drawn dark in the mockup (the top, the pricing, the
   footer) and the phone stay dark in both modes: their colors are the night values of Socle, named
   once below (--band-*), never elsewhere. Readable without JavaScript; logical properties only, for
   Arabic (right to left). */
:root {
  --gutter: clamp(16px, 4.5vw, 24px); --wide: 1200px;
  --band: #0F1116; --band-surface: #161B22; --band-surface-2: #1C2129; --band-line: #2A2F35; --band-line-strong: #3E4248;
  --band-text: #F3F5F9; --band-soft: #C9D0DA; --band-muted: #9AA3B0; --band-kicker: #FF7358;
  --band-ember: #FF5A3C; --band-on-ember: #1F0A05; --band-amber: #FFB020; --band-leaf: #2BC48A;
  --cta: #D23A17; --cta-on: #FFFFFF; --cta-button-text: #8F2712;
  --font-text: "Inter", "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans SC", "Noto Sans Bengali", "Helvetica Neue", "Segoe UI", Arial, system-ui, sans-serif;
  --font-title: "Sora", var(--font-text);
  --badge-ok: var(--color-success, var(--socle-leaf)); --badge-soon: var(--socle-amber);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--color-background); color: var(--color-text); font-family: var(--font-text); font-size: 16px; line-height: 1.55; overflow-x: hidden; overflow-x: clip; }
h1, h2, h3, .brand, .figure { font-family: var(--font-title); }
h1, h2, h3, p, ul { margin: 0; }
p, li { text-wrap: pretty; }
a { color: var(--color-kicker); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
[id] { scroll-margin-top: 16px; }
.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; }
.wrap { max-width: calc(var(--wide) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; inset-inline-start: 8px; top: -100px; z-index: 10; padding: 10px 16px; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); font-weight: 600; }
.skip:focus { top: 8px; }
/* The scripts Sora does not draw: their titles in the text stack, never spaced out (Arabic letters
   join), never in capitals. */
:is(:lang(ar), :lang(hi), :lang(zh-Hans), :lang(ja), :lang(ko), :lang(th), :lang(bn)) :is(h1, h2, h3, .figure) { font-family: var(--font-text); letter-spacing: 0 !important; }
:is(:lang(ar), :lang(hi), :lang(zh-Hans), :lang(ja), :lang(ko), :lang(th), :lang(bn)) .kicker { letter-spacing: 0; text-transform: none; }

/* Buttons and kickers. */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 18px; border-radius: var(--radius-md); font-weight: 600; font-size: 15px; text-decoration: none; text-align: center; }
.button-primary { background: var(--color-primary); color: var(--color-on-primary); }
.button-primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.button-quiet { color: var(--color-text); padding-inline: 14px; }
.button-quiet:hover { background: var(--color-surface-hover); }
.button-large { padding: 16px 24px; border-radius: 12px; font-size: 17px; font-weight: 700; }
.kicker { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-kicker); }

/* The header: the mark, the sections, the languages, the two ways in. */
.top { background: var(--color-surface); border-bottom: 1px solid var(--color-separator); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 14px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.brand img { display: block; width: 40px; height: 40px; margin: -4px; }
.brand b { color: var(--color-primary); }
.brand .tag { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 2px 10px; letter-spacing: 0; }
.sections { flex: 1 1 0; min-width: min(100%, 280px); }
.sections ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
.sections a { color: var(--color-text); text-decoration: none; display: inline-block; padding-block: 6px; }
.sections a:hover { color: var(--color-primary-hover); text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.langs { position: relative; font-size: 14px; }
.langs summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-full); border: 1px solid var(--color-control-border); color: var(--color-text); cursor: pointer; list-style: none; font-weight: 500; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary svg { width: 18px; height: 18px; flex: none; }
.langs summary:hover { background: var(--color-surface-hover); }
.langs ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 5; margin: 0; padding: 6px; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 2px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); width: max-content; max-width: calc(100vw - 2 * var(--gutter)); box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.langs ul a { display: block; padding: 8px 12px; border-radius: var(--radius-md); color: var(--color-text-muted); text-decoration: none; white-space: nowrap; }
.langs ul a:hover { color: var(--color-text); background: var(--color-surface-hover); }
.langs ul a[aria-current="page"] { color: var(--color-text); font-weight: 700; background: var(--color-surface-hover); }
@media (min-width: 1180px) { .top .wrap { flex-wrap: nowrap; } .actions { flex: none; } }
@media (max-width: 720px) {
  .langs ul { inset-inline-end: auto; inset-inline-start: 0; }
  .actions { width: 100%; }
  .actions .button-primary { flex: 1 1 auto; }
}

/* The top band: the promise and the ad as it shows in a feed. */
.hero { background: var(--band); color: var(--band-text); border-bottom: 1px solid var(--band-line); }
.hero .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-block: clamp(56px, 8vw, 88px) clamp(64px, 8vw, 96px); }
.hero-text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero .kicker { color: var(--band-kicker); }
.hero h1 { font-size: clamp(36px, 6.2vw, 60px); line-height: 1.05; font-weight: 700; letter-spacing: -.01em; }
.hero .lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--band-soft); max-width: 560px; }
.hero .buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .button-primary { background: var(--band-ember); color: var(--band-on-ember); }
.hero .button-primary:hover { background: var(--band-kicker); color: var(--band-on-ember); }
.hero .button-outline { color: var(--band-text); border: 1px solid var(--band-line-strong); }
.hero .button-outline:hover { background: var(--band-surface); }
.hero .note { font-size: 14px; color: var(--band-muted); }
.hero-phone { flex: 0 1 360px; min-width: 0; display: flex; justify-content: center; }
.phone { width: 100%; max-width: 340px; background: var(--band-surface); border: 1px solid var(--band-line); border-radius: 36px; padding: 18px; }
.phone-universe { display: flex; align-items: center; gap: 10px; padding: 6px 6px 14px; }
.phone-universe .avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--band-leaf); flex: none; }
.phone-universe span { display: block; }
.phone-universe .name { font-weight: 700; font-size: 15px; }
.phone-universe .count, .phone .meta { font-size: 12px; color: var(--band-muted); }
.phone .post { background: var(--band-surface-2); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.phone .post + .post { margin-top: 12px; }
.phone .post p { font-size: 14px; line-height: 1.45; }
.phone .ad { border: 1px solid var(--band-line-strong); gap: 10px; }
.phone .ad-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.phone .sponsored { font-weight: 700; color: var(--band-amber); letter-spacing: .04em; }
.phone .why { color: var(--band-muted); }
.phone .visual { aspect-ratio: 1.91 / 1; border-radius: 12px; background: var(--band-line); display: flex; align-items: center; justify-content: center; color: var(--band-muted); font-size: 13px; text-align: center; padding: 8px; }
.phone .headline { font-family: var(--font-title); font-weight: 600; font-size: 16px; }
.phone .ad p.text { font-size: 13px; color: var(--band-soft); }
.phone .ad-cta { align-self: flex-start; background: var(--band-ember); color: var(--band-on-ember); font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 9px; }

/* The four figures. */
.stats { background: var(--color-surface); border-bottom: 1px solid var(--color-separator); }
.stats ul { list-style: none; padding-block: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 24px; }
.stats li { display: flex; flex-direction: column; gap: 4px; }
.figure { font-size: 28px; font-weight: 700; color: var(--color-kicker); }
.stats li span:last-child { font-size: 15px; color: var(--color-text-muted); }

/* The sections. */
.section { padding-block: 48px; }
.section.first { padding-top: clamp(56px, 8vw, 96px); }
.section.last { padding-bottom: clamp(56px, 8vw, 96px); }
.section > .wrap > .kicker { margin-bottom: 12px; }
.section h2 { font-size: clamp(28px, 4.2vw, 40px); line-height: 1.15; font-weight: 700; margin-bottom: 32px; max-width: 820px; }
.grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; }
.grid.steps { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.card { background: var(--color-surface); border: 1px solid var(--color-separator); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card h3 { font-size: 20px; line-height: 1.3; }
.steps .card { gap: 12px; }
.steps .card h3 { font-size: 22px; }
.step { font-family: var(--font-title); font-size: 15px; font-weight: 700; color: var(--color-kicker); }
.card p, .card ul, .muted { color: var(--color-text-muted); }
.card ul { padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }

/* Targeting: the four settings, and what is never used. */
.panel { background: var(--color-surface); border: 1px solid var(--color-separator); border-radius: 24px; padding: clamp(24px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 40px; }
.panel-main { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.panel-main h2 { font-size: clamp(26px, 3.6vw, 34px); line-height: 1.2; margin: 0; }
.settings { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 0; }
.settings div { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; }
.settings dt { font-weight: 700; min-width: 150px; }
.settings dd { margin: 0; color: var(--color-text-muted); flex: 1 1 200px; }
.panel-side { flex: 1 1 360px; min-width: 0; background: var(--color-background); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.panel-side h3 { font-size: 20px; }
.panel-side ul { padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--color-text-muted); }
.panel-side p { font-size: 14px; color: var(--color-text-muted); }

/* Formats. */
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.card-head h3 { font-size: 22px; }
.badge { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full); }
.badge-ok { color: color-mix(in srgb, var(--badge-ok) 70%, var(--color-text)); background: color-mix(in srgb, var(--badge-ok) 12%, var(--color-surface)); }
.badge-soon { color: color-mix(in srgb, var(--badge-soon) 70%, var(--color-text)); background: color-mix(in srgb, var(--badge-soon) 14%, var(--color-surface)); }

/* Pricing: a dark card in both modes. */
.pricing { background: var(--band); color: var(--band-text); border: 1px solid var(--band-line); border-radius: 24px; padding: clamp(24px, 5vw, 48px); display: flex; flex-wrap: wrap; gap: 40px; }
.pricing-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pricing .kicker { color: var(--band-kicker); }
.pricing h2 { font-size: clamp(26px, 3.8vw, 36px); line-height: 1.2; margin: 0; }
.pricing-text p { font-size: 17px; line-height: 1.6; color: var(--band-soft); }
.pricing dl { flex: 1 1 360px; min-width: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
@media (max-width: 420px) { .pricing dl { grid-template-columns: minmax(0, 1fr); } }
.pricing dl div { background: var(--band-surface); border: 1px solid var(--band-line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pricing dt { color: var(--band-muted); font-size: 14px; }
.pricing dd { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; }
.pricing dd.figure { font-size: 28px; font-weight: 700; color: var(--band-text); overflow-wrap: anywhere; }

/* Figures every day, and the promotion of a universe. */
.pair { display: flex; flex-wrap: wrap; gap: 24px; }
.pair .card { flex: 1 1 420px; padding: 32px; gap: 12px; }
.pair .card h3 { font-size: 24px; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; margin-top: 8px; }
.bars span { flex: 1; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--color-primary) 24%, var(--color-surface)); }
.bars span.high { background: var(--color-primary); }
.more { align-self: flex-start; margin-top: 8px; font-weight: 700; text-decoration: none; color: var(--color-kicker); }
.more:hover { text-decoration: underline; }
[dir="rtl"] .arrow { display: inline-block; transform: scaleX(-1); }

/* Questions. */
.faq .wrap { max-width: calc(900px + 2 * var(--gutter)); }
.faq h2 { margin-bottom: 24px; }
.faq-list { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); padding-block: 20px; }
.faq summary { font-weight: 600; font-size: 18px; cursor: pointer; }
.faq details p { margin-top: 12px; color: var(--color-text-muted); }

/* The last call, and the footer. */
.call { background: var(--cta); color: var(--cta-on); }
.call .wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding-block: 64px; }
.call h2 { font-size: clamp(26px, 3.8vw, 36px); line-height: 1.2; flex: 1 1 520px; }
.call .button { background: var(--cta-on); color: var(--cta-button-text); }
.call .button:hover { background: var(--band-text); }
.call :focus-visible { outline-color: var(--cta-on); }
footer { background: var(--band); color: var(--band-muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; padding-block: 40px; font-size: 14px; }
footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 20px; }
footer a { color: var(--band-soft); }
footer a:hover { color: var(--band-text); }

/* The choice of a language (/ads/ without JavaScript). */
.choices { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 8px; }
.choices a { display: block; padding: 12px 16px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-separator); color: var(--color-text); text-decoration: none; }
.choices a:hover { background: var(--color-surface-hover); }

@media print {
  .top .sections, .actions, .call .button, .skip { display: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}