/* The website (/en/, /nl/, /fr/ and their pages, made by scripts/build-site.mjs). Fonts are served by Backrow
   itself, so a visit asks nothing of other servers: Inter and Plus Jakarta Sans, both SIL Open Font License. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/site/fonts/inter-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url(/site/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
}

/* Two themes in the colors of Backrow's own deck (#72). Light: the deck's lilac-white with its lilac tints; dark: its
   near-black and deep purple with lilac and bright purple. The device decides (prefers-color-scheme) unless the
   visitor chose with the switch: html[data-theme], set before paint by the small script in the head (page.mjs).
   The brand purple #6D5DFC stays the color of buttons in both. Text pairs meet WCAG AA (test/pages.mjs checks them). */
:root {
  --accent: #6D5DFC;
  --accent-hover: #5546E0;
  --on-accent: #FFFFFF;
  --bg: #F6F2FB;
  --soft: #EDE4F6;
  --surface: rgba(255, 255, 255, 0.72);
  --header: rgba(246, 242, 251, 0.88);
  --text: #17122A;
  --muted: #5A5170;
  --line: #DCCDEE;
  --link: #5546E0;
  --em: #6D5DFC;
  --accent-soft: #E6DAF5;
  --accent-wash: rgba(109, 93, 252, 0.08);
  --field: #FFFFFF;
  --placeholder: #A59CBB;
  --check-off: #9289A8;
  --shadow: rgba(23, 18, 42, 0.16);
  --ring: rgba(23, 18, 42, 0.08);
  --soon-bg: #FFE9B3;
  --soon-text: #6B4400;
  --deep: #17122A;
  --deep-glow: rgba(109, 93, 252, 0.35);
  --foot: #08070D;
  --hero-glow: #E2D3F2;
  --if-light: block;
  --if-dark: none;
  --head: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08070D;
    --soft: #110D1E;
    --surface: rgba(196, 174, 227, 0.06);
    --header: rgba(8, 7, 13, 0.84);
    --text: #F6F2FB;
    --muted: #ADA5C2;
    --line: rgba(196, 174, 227, 0.18);
    --link: #A99FFF;
    --em: #8B7FFF;
    --accent-soft: rgba(139, 127, 255, 0.18);
    --accent-wash: rgba(139, 127, 255, 0.12);
    --field: #17122A;
    --placeholder: #6E6684;
    --check-off: #7C7492;
    --shadow: rgba(0, 0, 0, 0.5);
    --ring: rgba(196, 174, 227, 0.16);
    --soon-bg: rgba(255, 209, 102, 0.16);
    --soon-text: #FFD166;
    --deep: #17122A;
    --foot: #050409;
    --hero-glow: rgba(109, 93, 252, 0.30);
    --if-light: none;
    --if-dark: block;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #08070D;
  --soft: #110D1E;
  --surface: rgba(196, 174, 227, 0.06);
  --header: rgba(8, 7, 13, 0.84);
  --text: #F6F2FB;
  --muted: #ADA5C2;
  --line: rgba(196, 174, 227, 0.18);
  --link: #A99FFF;
  --em: #8B7FFF;
  --accent-soft: rgba(139, 127, 255, 0.18);
  --accent-wash: rgba(139, 127, 255, 0.12);
  --field: #17122A;
  --placeholder: #6E6684;
  --check-off: #7C7492;
  --shadow: rgba(0, 0, 0, 0.5);
  --ring: rgba(196, 174, 227, 0.16);
  --soon-bg: rgba(255, 209, 102, 0.16);
  --soon-text: #FFD166;
  --deep: #17122A;
  --foot: #050409;
  --hero-glow: rgba(109, 93, 252, 0.30);
  --if-light: none;
  --if-dark: block;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
html, body { margin: 0; overflow-x: hidden; }
body { background: var(--bg); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; }
a { color: var(--link); }
h1, h2, h3 { font-family: var(--head); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.02em; }
h1 em { font-style: normal; color: var(--em); }
h2 { font-size: clamp(28px, 4vw, 44px); margin-block-end: 16px; }
h3 { font-size: 19px; }
p { margin: 0 0 16px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; overflow-wrap: anywhere; }
pre { margin: 12px 0; padding: 16px 18px; border-radius: 12px; background: var(--deep); color: #F6F2FB; border: 1px solid var(--ring); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
pre code { font-size: inherit; }

.wrap { max-width: 1160px; margin-inline: auto; padding-inline: 24px; }
.narrow { max-width: 860px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 20; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: var(--on-accent); }
.skip:focus { top: 12px; }

.eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 760px; }
.fine { font-size: 14px; color: var(--muted); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: 16px; text-decoration: none; text-align: center; line-height: 1.2; transition: background 150ms, border-color 150ms, color 150ms; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-light { background: #FFFFFF; color: var(--accent-hover); }
.btn-outline-light { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.5); }
.btn-outline-light:hover { border-color: #FFFFFF; }
.btn-small { min-height: 40px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

/* Header */
.top { position: sticky; top: 0; z-index: 10; background: var(--header); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-block-end: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand { display: block; flex: none; }
.brand img { display: var(--if-light); height: 26px; width: auto; }
.brand img.on-dark { display: var(--if-dark); }
.menu { display: flex; gap: 22px; }
.menu a, .signin { color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.menu a:hover, .signin:hover, .menu a[aria-current] { color: var(--link); }
.top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The header's two menus (<details>, no script needed): the languages on a wide screen, everything on a narrow one. */
.lang-menu, .nav-menu { flex: none; }
.lang-menu { position: relative; }
.lang-menu summary, .nav-menu summary { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; list-style: none; user-select: none; }
.lang-menu summary::-webkit-details-marker, .nav-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .nav-menu summary:hover, details[open] > summary { border-color: var(--accent); }
.lang-menu summary:focus-visible, .nav-menu summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lang-menu svg, .nav-menu svg { width: 18px; height: 18px; flex: none; }
.caret { font-size: 11px; color: var(--muted); }
.lang-list, .nav-langs { list-style: none; margin: 0; padding: 0; }
.lang-list { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 11; min-width: 190px; padding: 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--field); box-shadow: 0 18px 40px var(--shadow); }
.lang-list a, .nav-langs a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; }
.lang-list a:hover, .nav-langs a:hover { background: var(--accent-wash); }
.lang-list a[aria-current], .nav-langs a[aria-current] { background: var(--accent-soft); font-weight: 800; }
.lang-list a[aria-current]::after, .nav-langs a[aria-current]::after { content: ' ✓'; color: var(--link); }
.nav-menu { display: none; }
/* Closed: nothing of them is laid out (a closed details still lays out its content, contained, so it would stick out). */
.lang-menu:not([open]) .lang-list, .nav-menu:not([open]) .nav-panel { display: none; }
.nav-menu summary { width: 40px; padding: 0; justify-content: center; }
.nav-menu summary svg { width: 20px; height: 20px; }
/* The panel lies over the page under the header, so the code field under it stays where it is while it is closed. */
.nav-panel { position: absolute; inset-inline: 0; top: 100%; display: grid; gap: 16px; max-height: calc(100vh - 68px); overflow-y: auto; padding: 16px 24px 24px; background: var(--field); border-block-end: 1px solid var(--line); box-shadow: 0 24px 40px var(--shadow); }
.nav-links { display: grid; }
.nav-links a { padding: 12px 4px; border-block-end: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 700; font-size: 17px; }
.nav-links a[aria-current] { color: var(--link); }
.nav-langs { display: flex; flex-wrap: wrap; gap: 6px; }
/* The sun/moon switch: shown only when the head script runs (it is what makes it work). */
.theme-switch { display: none; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
html[data-theme-switch] .theme-switch { display: grid; }
.theme-switch:hover { border-color: var(--accent); }
.theme-switch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.theme-switch svg { width: 20px; height: 20px; }
.theme-switch .moon { display: var(--if-light); }
.theme-switch .sun { display: var(--if-dark); }

/* Hero, with the picture of the big screen and a phone */
.hero { padding: 72px 0 56px; background: radial-gradient(1000px 500px at 50% -10%, var(--hero-glow), transparent 70%); text-align: center; }
.hero-copy { max-width: 900px; margin-inline: auto; }
.hero .lead { margin-inline: auto; margin-block-start: 22px; }
.hero .actions { justify-content: center; }
.hero .note { margin: 16px 0 0; font-size: 15px; color: var(--muted); }
/* The code field on top of the homepage (#71): a slim band on a wide screen, the field and button full width on a phone. */
.join-band { background: var(--soft); border-block-end: 1px solid var(--line); }
/* On a wide screen the code field is a quiet line above the website; on a phone (below) it is the first, loud thing. */
.join-band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding-block: 8px; font-size: 15px; }
.join-band-title { margin: 0; font-weight: 700; }
.join-band-label { color: var(--muted); }
.join-band input { width: 6.5em; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--text); font: 800 18px/1 var(--body); letter-spacing: 0.2em; text-align: center; }
.join-band input::placeholder { color: var(--placeholder); font-weight: 600; opacity: 1; }
.join-band input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.join-band .btn { min-height: 40px; padding-block: 0; font-size: 15px; }
.join-band-hint { display: none; }
/* The quiet language bar of `/` (#71), shown by its inline script for a browser that prefers that language. */
.lang-suggest { display: none; background: var(--accent-soft); color: var(--text); font-size: 15px; }
html[data-suggest="nl"] .lang-suggest[data-for="nl"], html[data-suggest="fr"] .lang-suggest[data-for="fr"] { display: block; }
.lang-suggest-in { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; }
.lang-suggest a { color: var(--link); font-weight: 700; }
.lang-suggest button { min-width: 44px; min-height: 44px; border: 0; background: none; color: inherit; font-size: 22px; cursor: pointer; }

/* The picture of a talk: a customer's own slide on the big screen and Backrow's phone page, the same in both themes. */
.stage { position: relative; max-width: 1040px; margin: 56px auto 0; padding-block-end: 8%; text-align: start; }
.beamer { container-type: inline-size; width: 82%; padding: 1%; border-radius: 16px; background: #0B0B16; box-shadow: 0 40px 80px var(--shadow), 0 0 0 1px var(--ring); }
.slide { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1cqw; padding: 4.6cqw 5.6cqw; display: flex; flex-direction: column; gap: 2cqw; color: #F7F3EC; font-family: var(--head); background: radial-gradient(circle at 88% 10%, #2E2A6E 0, transparent 55%), linear-gradient(160deg, #23205A 0%, #141A3A 70%); }
.slide-top { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.slide-kicker svg { flex: none; width: 3.2cqw; height: 3.2cqw; }
.slide-kicker { display: inline-flex; align-items: center; gap: 1.2cqw; font-size: 1.45cqw; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #FFB86B; }
.slide-live { display: inline-flex; align-items: center; gap: 0.8cqw; padding: 0.6cqw 1.4cqw; border-radius: 999px; background: rgba(255, 184, 107, 0.16); color: #FFD9B0; font-size: 1.35cqw; font-weight: 800; letter-spacing: 0.06em; }
.slide-live i { width: 0.9cqw; height: 0.9cqw; border-radius: 50%; background: #FF7A6B; animation: pulse 1.6s ease-in-out infinite; }
.slide-q { margin: 0; font-size: 3.7cqw; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.slide-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1cqw; }
.slide-bars li { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.6cqw; padding: 1cqw 1.6cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.07); font-size: 1.85cqw; font-weight: 700; }
.slide-bars li > span { position: relative; }
.slide-bars .bar-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p); background: linear-gradient(to top, var(--c) 0 0.5cqw, color-mix(in srgb, var(--c) 24%, transparent) 0.5cqw); animation: grow 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d) both; }
/* The customer's own style: night blue with warm answers (amber, apricot, coral, rose), the same on the phone. */
.slide-bars li:nth-child(1) { --c: #FFD166; }
.slide-bars li:nth-child(2) { --c: #FFB86B; }
.slide-bars li:nth-child(3) { --c: #FF7A6B; }
.slide-bars li:nth-child(4) { --c: #F2A0C0; }
/* The answer letters sit exactly in the middle of their circles: line-height 1 and the text box trimmed to the capital
   height, so the font's room for ascenders and descenders does not push them off center. */
.bar-letter { display: block; align-content: center; text-align: center; line-height: 1; text-box: trim-both cap alphabetic; }
.bar-letter { flex: none; width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--c); color: #141A3A; font-weight: 800; font-size: 1.5cqw; }
.bar-answer { flex: 1; }
.bar-pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.slide-foot { margin-top: auto; display: flex; align-items: center; gap: 1.2cqw; font-size: 1.3cqw; color: rgba(247, 243, 236, 0.75); font-family: var(--body); }
.slide-foot img { width: 4.4cqw; height: 4.4cqw; padding: 0.35cqw; border-radius: 0.6cqw; background: #FFFFFF; }

/* The phone: a real screenshot of the phone page in a phone frame (scripts/hero-phone.mjs), transparent around it. */
.phone { position: absolute; inset-inline-end: 0; bottom: 0; width: 22%; height: auto; filter: drop-shadow(0 24px 30px var(--shadow)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }

@keyframes grow { from { width: 0; } }
@keyframes pulse { 50% { opacity: 0.35; } }

/* Sections */
.section { padding: 96px 0; }
.section-tight { padding-block-start: 32px; }
.section-soft { background: var(--soft); }
.section-lead { font-size: 19px; color: var(--muted); max-width: 760px; margin-block-end: 40px; }
/* The deck's dark slide: deep purple with a glow of the brand purple, in both themes. */
.section-dark { background: radial-gradient(900px 480px at 90% 0%, var(--deep-glow), transparent 70%), var(--deep); color: #F6F2FB; }
.section-dark .eyebrow { color: #C4AEE3; }
.section-dark .section-lead, .section-dark .first { color: rgba(246, 242, 251, 0.78); }

.page-hero { padding: 72px 0 40px; background: radial-gradient(900px 400px at 20% -20%, var(--hero-glow), transparent 70%); }
.page-hero .lead { margin-block-start: 20px; }
.unit { display: inline-block; margin: 8px 0 0; padding: 8px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 800; color: var(--link); }

.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.tiles li, .features li { padding: 26px 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.tiles h3, .features h3 { margin: 16px 0 8px; }
.tiles p, .features p { margin: 0; color: var(--muted); font-size: 16px; }
.icon { width: 24px; height: 24px; padding: 12px; box-sizing: content-box; border-radius: 14px; background: var(--accent-soft); color: var(--link); display: block; }
.feature.is-soon { border-style: dashed; background: transparent; }
.soon { display: inline-block; margin-inline-start: 4px; padding: 3px 9px; border-radius: 999px; background: var(--soon-bg); color: var(--soon-text); font-family: var(--body); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }

/* The question types: a card per type on the homepage (the whole card is its title's link to the type's block on
   question-types/), and that page's blocks. Each card's picture is a small slide in the hero's customer style (night
   blue, warm answers), the same in both themes; sizes in cqw so it scales with the card. */
.qt-group { margin: 44px 0 16px; font-family: var(--body); font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.qt-group:first-of-type { margin-block-start: 0; }
.qt-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.qt { position: relative; display: flex; flex-direction: column; padding: 12px 12px 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); transition: border-color 150ms, transform 150ms; }
.qt:hover { border-color: var(--accent); transform: translateY(-2px); }
.qt:has(a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.qt h4 { margin: 16px 8px 6px; font-family: var(--head); font-size: 18px; font-weight: 800; line-height: 1.2; }
.qt h4 a { color: var(--text); text-decoration: none; outline: none; }
.qt h4 a::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }
.qt > p { margin: 0 8px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.qt-more { margin: 32px 0 0; }
.qt-screen { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #141A3A; }
.qt-screen.is-icon { display: grid; place-items: center; background: var(--accent-soft); }
.qt-slide { position: relative; height: 100%; padding: 6cqw 8cqw; display: flex; flex-direction: column; justify-content: center; gap: 3cqw; color: #F7F3EC; font-family: var(--head); font-size: 5cqw; line-height: 1.2; background: radial-gradient(circle at 88% 10%, #2E2A6E 0, transparent 55%), linear-gradient(160deg, #23205A 0%, #141A3A 70%); }
.qt-slide ol, .qt-slide ul { list-style: none; margin: 0; padding: 0; }
.qt-slide p { margin: 0; }
.qt-glyph { flex: none; width: 1em; height: 1em; }
.qt-q { font-size: 7cqw; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.qt-bars, .qt-board, .qt-qa { display: grid; gap: 2.2cqw; }
.qt-bars li, .qt-board li, .qt-qa li { position: relative; overflow: hidden; display: flex; align-items: center; gap: 3cqw; padding: 1.8cqw 3cqw; border-radius: 2cqw; background: rgba(255, 255, 255, 0.07); font-weight: 700; }
.qt-bars li:nth-child(1), .qt-board li:nth-child(1) { --c: #FFD166; }
.qt-bars li:nth-child(2), .qt-board li:nth-child(2) { --c: #FFB86B; }
.qt-bars li:nth-child(3), .qt-board li:nth-child(3) { --c: #FF7A6B; }
.qt-bars li::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p); background: color-mix(in srgb, var(--c) 28%, transparent); border-inline-end: 0.9cqw solid var(--c); }
.qt-bars span, .qt-bars b { position: relative; }
.qt-bars span, .qt-board span { flex: 1; }
.qt-bars b, .qt-board b { font-variant-numeric: tabular-nums; }
.qt-words { height: 100%; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 0.6cqw 3.4cqw; }
.qt-words li { font-size: calc(4cqw + 7.5cqw * var(--w)); font-weight: 800; line-height: 1.05; color: #F7F3EC; }
.qt-words li:nth-child(4n + 1) { color: #FFD166; }
.qt-words li:nth-child(4n + 2) { color: #FFB86B; }
.qt-words li:nth-child(4n + 3) { color: #F2A0C0; }
.qt-top { display: flex; align-items: center; justify-content: space-between; color: #FFB86B; font-size: 4.6cqw; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.qt-timer { display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 50%; border: 1cqw solid #FFD166; color: #F7F3EC; font-style: normal; font-size: 4.6cqw; letter-spacing: 0; }
.qt-board li:first-child { background: rgba(255, 209, 102, 0.2); }
.qt-board i { display: grid; place-items: center; flex: none; width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--c); color: #141A3A; font-style: normal; font-size: 3.6cqw; }
.qt-qa li { justify-content: space-between; padding: 2.4cqw 3.2cqw; font-family: var(--body); font-size: 4.6cqw; font-weight: 600; line-height: 1.25; }
.qt-qa li:first-child { background: rgba(255, 184, 107, 0.18); }
.qt-qa b { display: inline-flex; align-items: center; gap: 1.2cqw; color: #FFD166; font-family: var(--head); white-space: nowrap; }
.qt-score { display: flex; align-items: center; gap: 4cqw; }
.qt-score b { color: #FFD166; font-size: 17cqw; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.qt-stars { display: flex; gap: 1cqw; color: #FFB86B; font-size: 7cqw; }
.qt-stars svg { fill: currentColor; }
.qt-stars .is-part svg { fill: none; }
.qt-idea { align-self: flex-start; padding: 2.4cqw 3.4cqw; border-radius: 2.4cqw 2.4cqw 2.4cqw 0.6cqw; background: rgba(255, 255, 255, 0.1); font-family: var(--body); font-size: 4.6cqw; font-weight: 600; }
.qt-hearts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3cqw; }
.qt-hearts li { display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; }
.qt-hearts span { width: 100%; aspect-ratio: 16 / 10; border-radius: 1.6cqw; border: 0.5cqw solid rgba(255, 255, 255, 0.14); background: linear-gradient(160deg, #3A3580, #1B2150); }
.qt-hearts b { display: inline-flex; align-items: center; gap: 1cqw; color: #F2A0C0; font-size: 5cqw; }
.qt-hearts svg { fill: currentColor; }
.qt-hearts .is-top span { border-color: #FF7A6B; }
.qt-hearts .is-top b { color: #FF7A6B; font-size: 6.4cqw; }
.qt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.qt-form span { padding: 2.2cqw 3cqw; border-radius: 1.6cqw; background: #F7F3EC; color: #5A5170; font-family: var(--body); font-size: 4.2cqw; }
.qt-form b { align-self: center; justify-self: start; padding: 2.2cqw 4cqw; border-radius: 999px; background: #FFB86B; color: #141A3A; font-size: 4.2cqw; }
.qt-big { display: flex; flex-direction: column; gap: 1.6cqw; }
.qt-big b { color: #FFD166; font-size: 21cqw; font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.qt-big span { max-width: 85%; font-size: 5.6cqw; font-weight: 700; }
.qt-dot { display: inline-block; width: 2.6cqw; height: 2.6cqw; margin-inline-end: 1.6cqw; border-radius: 50%; background: #FF7A6B; animation: pulse 1.6s ease-in-out infinite; }
.qt-rooms { display: grid; gap: 5cqw; }
.qt-rooms li { display: grid; grid-template-columns: 1fr auto; gap: 1.6cqw 3cqw; font-size: 5cqw; font-weight: 700; }
.qt-rooms li:nth-child(1) { --c: #FFD166; }
.qt-rooms li:nth-child(2) { --c: #F2A0C0; }
.qt-rooms span { grid-area: 1 / 1; }
.qt-rooms b { grid-area: 1 / 2; }
.qt-rooms i { position: relative; grid-column: 1 / -1; grid-row: 2; height: 5cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.qt-rooms i::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p); border-radius: inherit; background: var(--c); }
.qt-is-recap .qt-q { font-size: 5.4cqw; }
/* #76: several answers ticked, the wheel, a drawn winner. */
.qt-multi i { position: relative; display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 1cqw; background: var(--c); color: #141A3A; }
.qt-multi i .qt-glyph { width: 3.6cqw; height: 3.6cqw; }
/* #79: photo choice, two photos side by side with their answer and share under each. */
.qt-is-photo { gap: 2.4cqw; padding-block: 5cqw; }
.qt-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.qt-photos li { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 2cqw; border-radius: 2cqw; background: rgba(255, 255, 255, 0.07); font-size: 4.4cqw; font-weight: 700; }
.qt-photos li:nth-child(1) { --c: #FFD166; }
.qt-photos li:nth-child(2) { --c: #FF7A6B; }
.qt-photos i { grid-column: 1 / -1; aspect-ratio: 16 / 8; display: block; }
.qt-photo-0 { background: radial-gradient(circle at 78% 26%, #FFD166 0 7%, transparent 7.5%), linear-gradient(180deg, #7DD3FC 0 52%, #0EA5E9 52% 70%, #FCD34D 70%); }
.qt-photo-1 { background: linear-gradient(135deg, transparent 0 48%, #CBD5E1 48% 50%, transparent 50%) 0 0 / 100% 100%, linear-gradient(225deg, transparent 0 46%, #475569 46%) 0 0 / 60% 100% no-repeat, linear-gradient(135deg, transparent 0 46%, #334155 46%) 100% 0 / 60% 100% no-repeat, linear-gradient(180deg, #C7D2FE, #EEF2FF); }
.qt-photos span, .qt-photos b { position: relative; padding: 1.6cqw 0; }
.qt-photos span { padding-inline-start: 2.4cqw; }
.qt-photos b { padding-inline-end: 2.4cqw; font-variant-numeric: tabular-nums; color: var(--c); }
.qt-photos li::after { content: ''; position: absolute; inset-inline-start: 0; bottom: 0; height: 0.9cqw; width: var(--p); background: var(--c); }
.qt-is-wheel { flex-direction: row; align-items: center; gap: 6cqw; }
.qt-wheel { position: relative; flex: none; width: 34cqw; height: 34cqw; }
.qt-disc { position: absolute; inset: 0; border-radius: 50%; border: 1.2cqw solid #F7F3EC; transform: rotate(-22deg);
  background: conic-gradient(#FFD166 0 60deg, #FFB86B 0 120deg, #FF7A6B 0 180deg, #F25F8C 0 240deg, #FFD166 0 300deg, #FF7A6B 0 360deg); }
.qt-pointer { position: absolute; inset-inline-start: 50%; top: -2cqw; width: 0; height: 0; transform: translateX(-50%); border-inline: 2.6cqw solid transparent; border-top: 4.6cqw solid #F7F3EC; }
[dir='rtl'] .qt-pointer { transform: translateX(50%); }
.qt-result { display: flex; flex-direction: column; gap: 1.4cqw; }
.qt-result span { font-size: 4.6cqw; opacity: 0.8; }
.qt-result b { color: #FFD166; font-size: 12cqw; font-weight: 800; line-height: 1; }
.qt-winner { display: flex; flex-direction: column; align-items: center; gap: 1.8cqw; text-align: center; }
.qt-winner .qt-glyph { width: 10cqw; height: 10cqw; color: #FFB86B; }
.qt-winner b { display: block; height: 1.15em; overflow: hidden; color: #FFD166; font-size: 11cqw; font-weight: 800; line-height: 1.15; }
.qt-reel { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; font-style: normal; }
.qt-reel i { flex: none; font-style: normal; }
.qt-winner span { font-size: 4.6cqw; opacity: 0.8; }
.qt-recap { display: flex; align-items: flex-end; gap: 2cqw; height: 30cqw; }
.qt-recap li { position: relative; flex: 1; height: calc(var(--m) * 3.4cqw); border-radius: 1.2cqw 1.2cqw 0.4cqw 0.4cqw; background: linear-gradient(#FFB86B, #FF7A6B); }
.qt-recap svg { position: absolute; bottom: 100%; left: 50%; width: 4.4cqw; height: 4.4cqw; margin: 0 0 1cqw -2.2cqw; color: #F2A0C0; fill: currentColor; }

/* #78: every picture plays once when it comes into view, and again on its play button. The HTML is the last frame;
   the script in the page sets data-play (wait: paused on the first frame; run: playing) and the animations below
   exist only under it, so without a script or with reduced motion the picture simply stands as drawn. Every animation
   fills both ways and ends where the picture is drawn; the counting numbers (.qt-n) are the script's, with the delays
   set in site/page.mjs. A new type: its keyframes under `[data-play] .qt-is-<id>`. */
.qt-screen[data-play='wait'] *, .qt-screen[data-play='wait'] *::before, .qt-screen[data-play='wait'] *::after { animation-play-state: paused !important; }
.qt .qt-screen { z-index: 1; pointer-events: none; }
/* Small in the corner, over the slide's margin as far as it goes; it takes clicks a little around it too. */
.qt-play { position: absolute; inset-block-end: 1.4cqw; inset-inline-end: 1.4cqw; display: grid; place-items: center; width: clamp(18px, 6.4cqw, 32px); height: clamp(18px, 6.4cqw, 32px); padding: 0; border: 1px solid rgba(247, 243, 236, 0.35); border-radius: 50%; background: rgba(20, 26, 58, 0.72); color: #F7F3EC; cursor: pointer; pointer-events: auto; transition: background 150ms, transform 150ms; }
.qt-play::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.qt-play[hidden] { display: none; }
.qt-play:hover { background: rgba(58, 53, 128, 0.9); transform: scale(1.06); }
.qt-play:focus-visible { outline: 3px solid #FFD166; outline-offset: 1px; }
.qt-play .qt-glyph { width: 46%; height: 46%; fill: currentColor; stroke: none; translate: 7% 0; }
.qt-n { font-variant-numeric: tabular-nums; }
@keyframes qt-grow { from { width: 0; } }
@keyframes qt-pop { from { opacity: 0; transform: scale(0.3); } 70% { opacity: 1; transform: scale(1.1); } }
@keyframes qt-in { from { opacity: 0; transform: translateY(45%); } }
@keyframes qt-fade { from { opacity: 0; } }
@keyframes qt-rise { from { transform: scaleY(0); } }
/* Poll and several answers: the bars grow one after another (the numbers count along), the ticks pop in. */
[data-play] .qt-bars li::before { animation: qt-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
[data-play] .qt-bars li:nth-child(2)::before { animation-delay: 0.35s; }
[data-play] .qt-bars li:nth-child(3)::before { animation-delay: 0.5s; }
[data-play] .qt-photos li { animation: qt-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
[data-play] .qt-photos li:nth-child(2) { animation-delay: 0.15s; }
[data-play] .qt-photos li::after { animation: qt-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
[data-play] .qt-photos li:nth-child(2)::after { animation-delay: 0.35s; }
[data-play] .qt-multi i { animation: qt-pop 0.4s ease-out 0.1s both; }
[data-play] .qt-multi li:nth-child(2) i { animation-delay: 0.35s; }
[data-play] .qt-multi li:nth-child(3) i { animation-delay: 0.6s; }
/* Word cloud: the words pop in, the biggest first. */
[data-play] .qt-words li { animation: qt-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both; animation-delay: calc(0.15s + var(--i) * 0.22s); }
/* Quiz: the timer counts down and turns red, a tick when time is up, then the leaderboard with its points. */
.qt-timer > * { grid-area: 1 / 1; }
.qt-timer .qt-n { opacity: 0; }
.qt-timer .qt-glyph { width: 5.4cqw; height: 5.4cqw; color: #FFD166; stroke-width: 3; }
@keyframes qt-urgent { 85% { border-color: #FF7A6B; } }
@keyframes qt-gone { 0%, 88% { opacity: 1; } 100% { opacity: 0; } }
[data-play] .qt-timer { animation: qt-urgent 1.6s linear both; }
[data-play] .qt-timer .qt-n { animation: qt-gone 1.6s linear both; }
[data-play] .qt-timer .qt-glyph { animation: qt-pop 0.4s ease-out 1.5s both; }
[data-play] .qt-board li { animation: qt-in 0.5s ease-out 1.7s both; }
[data-play] .qt-board li:nth-child(2) { animation-delay: 1.85s; }
[data-play] .qt-board li:nth-child(3) { animation-delay: 2s; }
/* Q&A: the second question arrives first, then the first one under it; its thumbs pass the other's and it moves up. */
@keyframes qt-qa-up { 0%, 23% { opacity: 0; transform: translateY(calc(100% + 2.2cqw)); } 38%, 77% { opacity: 1; transform: translateY(calc(100% + 2.2cqw)); } 96% { transform: none; } }
@keyframes qt-qa-down { 0% { opacity: 0; transform: translateY(calc(-100% - 2.2cqw)); } 15%, 77% { opacity: 1; transform: translateY(calc(-100% - 2.2cqw)); } 96% { transform: none; } }
[data-play] .qt-qa li:first-child { animation: qt-qa-up 2.6s ease-in-out both; }
[data-play] .qt-qa li:nth-child(2) { animation: qt-qa-down 2.6s ease-in-out both; }
/* Feedback: the stars fill one by one while the score counts, then an idea comes in. */
[data-play] .qt-stars i { animation: qt-pop 0.45s ease-out 0.15s both; }
[data-play] .qt-stars i:nth-child(2) { animation-delay: 0.35s; }
[data-play] .qt-stars i:nth-child(3) { animation-delay: 0.55s; }
[data-play] .qt-stars i:nth-child(4) { animation-delay: 0.75s; }
[data-play] .qt-stars i:nth-child(5) { animation-delay: 0.95s; }
[data-play] .qt-idea { animation: qt-in 0.5s ease-out 1.4s both; }
/* Hearts: they float up from the slide the room loves most, every count rises. */
.qt-hearts span { position: relative; }
.qt-hearts em { position: absolute; inset-block-end: 12%; inset-inline-start: calc(50% - 2.2cqw); width: 4.4cqw; height: 4.4cqw; color: #FF7A6B; opacity: 0; }
.qt-hearts em .qt-glyph { width: 100%; height: 100%; }
.qt-hearts em:nth-child(odd) { --x: -2.4cqw; }
.qt-hearts em:nth-child(even) { --x: 2.4cqw; }
@keyframes qt-float { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -11cqw) scale(1.15); } }
[data-play] .qt-hearts em { animation: qt-float 1.2s ease-out 0.1s both; }
[data-play] .qt-hearts em:nth-child(2) { animation-delay: 0.45s; }
[data-play] .qt-hearts em:nth-child(3) { animation-delay: 0.8s; }
[data-play] .qt-hearts em:nth-child(4) { animation-delay: 1.15s; }
/* Sign-up: the fields come in, the button is pressed, the number of sign-ups goes up. */
.qt-signed { position: absolute; inset-block-start: 4.4cqw; inset-inline-end: 5cqw; display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.1cqw 2.6cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #FFD166; font-style: normal; font-size: 4.4cqw; font-weight: 800; }
@keyframes qt-press { 50% { transform: scale(0.88); background: #FFD166; } }
[data-play] .qt-form span { animation: qt-in 0.45s ease-out 0.1s both; }
[data-play] .qt-form span:nth-child(2) { animation-delay: 0.35s; }
[data-play] .qt-form span:nth-child(3) { animation-delay: 0.6s; }
[data-play] .qt-form b { animation: qt-press 0.45s ease-in-out 1.1s both; }
[data-play] .qt-signed { animation: qt-pop 0.4s ease-out 1.45s both; }
/* Wheel: it spins and slows down on its entry, then the result. */
@keyframes qt-spin { from { transform: rotate(-1462deg); } }
[data-play] .qt-disc { animation: qt-spin 2.8s cubic-bezier(0.12, 0.6, 0.15, 1) both; }
[data-play] .qt-result { animation: qt-in 0.5s ease-out 2.6s both; }
/* Random winner: the gift shakes while the name shuffles, the name lands, confetti. */
.qt-winner { position: relative; }
.qt-winner em { position: absolute; top: 40%; left: 50%; width: 2cqw; height: 2cqw; border-radius: 0.4cqw; background: var(--c); opacity: 0; }
.qt-winner em:nth-of-type(1) { --c: #FFD166; --x: -24cqw; --y: -10cqw; }
.qt-winner em:nth-of-type(2) { --c: #FF7A6B; --x: 22cqw; --y: -13cqw; }
.qt-winner em:nth-of-type(3) { --c: #F2A0C0; --x: -18cqw; --y: 9cqw; }
.qt-winner em:nth-of-type(4) { --c: #FFB86B; --x: 26cqw; --y: 6cqw; }
.qt-winner em:nth-of-type(5) { --c: #F7F3EC; --x: -8cqw; --y: -17cqw; }
.qt-winner em:nth-of-type(6) { --c: #FFD166; --x: 10cqw; --y: 15cqw; }
@keyframes qt-wiggle { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
/* Eight other names above the winner: the reel starts with the first in view and rolls down to the winner. */
@keyframes qt-reel { from { transform: translateY(calc(8 * 1.15em)); filter: blur(0.3cqw); } 85% { filter: none; } to { transform: none; } }
@keyframes qt-land { from { transform: scale(1); } 70% { opacity: 1; transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes qt-burst { 0% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(240deg); } }
[data-play] .qt-winner .qt-glyph { animation: qt-wiggle 0.3s ease-in-out 0.1s 6; }
[data-play] .qt-reel { animation: qt-reel 1.9s cubic-bezier(0.35, 0.05, 0.3, 1) 0.1s both; }
[data-play] .qt-winner b { animation: qt-land 0.5s ease-out 2s both; }
[data-play] .qt-winner span { animation: qt-fade 0.5s ease-out 2.3s both; }
[data-play] .qt-winner em { animation: qt-burst 0.9s ease-out 2.05s both; }
/* Conclusion and live numbers: the number counts up, its words come in. */
[data-play] .qt-big span { animation: qt-fade 0.6s ease-out 0.5s both; }
/* Every room before: this room's bar, then the earlier rooms'. */
[data-play] .qt-rooms i::before { animation: qt-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
[data-play] .qt-rooms li:nth-child(2) i::before { animation-delay: 0.6s; }
/* Recap: the slides' minutes rise one after another, then the hearts on the loved ones. */
.qt-recap li { transform-origin: bottom; }
[data-play] .qt-recap li { animation: qt-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(0.1s + var(--i) * 0.1s); }
[data-play] .qt-recap svg { animation: qt-pop 0.4s ease-out 1.4s both; }

/* The question types page: jump links under the title, then a block per type, its picture beside its text. */
.qt-jump { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qt-jump a { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; }
.qt-jump a:hover { border-color: var(--accent); color: var(--link); }
.qt-list { display: grid; gap: 56px; margin-block-start: 32px; }
.qt-detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; scroll-margin-block-start: 96px; }
.qt-detail .qt-screen { border-radius: 16px; box-shadow: 0 24px 48px var(--shadow), 0 0 0 1px var(--ring); }
.qt-detail h3 { font-size: 26px; margin-block-end: 10px; }
.qt-text { font-size: 19px; }
.qt-detail dl { display: grid; gap: 14px; margin: 0; }
.qt-detail dt { color: var(--link); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.qt-detail dd { margin: 2px 0 0; color: var(--muted); }

/* How it works */
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { padding: 28px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.step-no { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: var(--head); font-weight: 800; }
.step h3 { margin: 18px 0 8px; font-size: 21px; }
.step p { margin: 0; color: var(--muted); }
.steps-column { grid-template-columns: 1fr; margin-top: 0; }
.steps-column .step h2 { font-size: 24px; margin: 6px 0 10px; }
.steps-column .step p + p { margin-top: 12px; }
.step-time { margin: 16px 0 0 !important; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--link) !important; }
/* An example question as a chat field (the homepage's How it works and step 3 of connecting): the question, the marks
   of the assistants, a round send arrow that copies it (shown by the copy script). */
.ask { margin: 40px 0 0; max-width: 820px; }
.ask-label { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--link); }
.ask-box { padding: 22px 22px 14px 26px; border-radius: 28px; border: 1px solid var(--line); background: var(--field); box-shadow: 0 0 0 6px rgba(109, 93, 252, 0.1), 0 24px 60px -28px rgba(76, 58, 200, 0.45); }
.ask-text { margin: 0; font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--text); }
.ask-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: 14px; }
.ask-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--text); opacity: 0.75; }
.ask-logos .assistant-logo { width: 20px; height: 20px; margin: 0; color: inherit; }
.ask-send { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #6D5DFC; color: #FFFFFF; cursor: pointer; transition: transform 0.15s, background 0.15s; }
.ask-send:hover { background: #5546E0; transform: translateY(-1px); }
.ask-send:focus-visible { outline: 3px solid #A99FFF; outline-offset: 3px; }
.ask-send .x { width: 22px; height: 22px; }
.ask-send.is-done { background: #2F9E6A; }
.ask-send[hidden], .copy-btn[hidden] { display: none; }
.copy-done { min-height: 1.4em; margin: 8px 4px 0; font-size: 14px; font-weight: 700; color: var(--link); }
.prompt-text { margin: 0; padding: 16px 20px; border-radius: 18px 18px 18px 4px; border: 1px solid var(--line); background: var(--field); color: var(--text) !important; font-size: 17px; }
.prompt-text::before { content: '“'; }
.prompt-text::after { content: '”'; }
:lang(fr) .prompt-text::before { content: '«\00A0'; }
:lang(fr) .prompt-text::after { content: '\00A0»'; }
:lang(nl) .prompt-text::before { content: '‘'; }
:lang(nl) .prompt-text::after { content: '’'; }
.prompts { list-style: none; margin: 0 0 48px; padding: 0; display: grid; gap: 12px; }

/* The design gallery (#73): one poll in dozens of looks, three rows that drift slowly in opposite directions, endless
   (each row holds its designs twice and moves by half its width). CSS only; a row stands still under the pointer or
   while it has focus; with reduced motion the rows stand still and scroll by hand. */
.marquees { display: grid; gap: 20px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.marquee-track { display: flex; width: max-content; margin: 0; padding: 4px 0 8px; list-style: none; animation: marquee 150s linear infinite; }
.marquee:nth-child(2) .marquee-track { animation-duration: 175s; animation-direction: reverse; }
.marquee:nth-child(3) .marquee-track { animation-duration: 160s; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
:dir(rtl) .marquee-track { animation-name: marquee-rtl; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
.design { flex: none; width: 320px; margin-inline-end: 20px; }
.design img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--line); box-shadow: 0 12px 28px var(--shadow), 0 0 0 1px var(--ring); }
.design-prompt { margin: 10px 2px 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.design-prompt::before { content: '“'; }
.design-prompt::after { content: '”'; }
:lang(fr) .design-prompt::before { content: '«\00A0'; }
:lang(fr) .design-prompt::after { content: '\00A0»'; }
:lang(nl) .design-prompt::before { content: '‘'; }
:lang(nl) .design-prompt::after { content: '’'; }
/* A design large (owner, 27 October 2026): every design is a link to its own box (#see-<id>), shown by CSS while the
   address names it (:target), so it works without a script: the picture at its own size (at most 640 wide, never
   enlarged; on a phone the screen's width), its prompt, previous and next, and a close link back to the gallery. The
   home page's small script adds Escape, the arrow keys, focus and going back to where the visitor was. */
.design-open { display: block; border-radius: 12px; cursor: zoom-in; }
.design-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.lightbox { display: none; position: fixed; inset: 0; z-index: 30; place-items: center; padding: 24px 72px; }
.lightbox:target { display: grid; }
html:has(.lightbox:target), html:has(.lightbox:target) body { overflow: hidden; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(8, 7, 13, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: zoom-out; }
.lightbox-figure { position: relative; margin: 0; width: min(640px, 100%, calc((100dvh - 150px) * 16 / 9)); }
.lightbox-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: #17122A; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.lightbox-figure figcaption { margin-top: 14px; color: #F6F2FB; font-size: 17px; font-weight: 600; line-height: 1.4; text-align: center; }
.lightbox-figure figcaption::before { content: '“'; }
.lightbox-figure figcaption::after { content: '”'; }
:lang(fr) .lightbox-figure figcaption::before { content: '«\00A0'; }
:lang(fr) .lightbox-figure figcaption::after { content: '\00A0»'; }
:lang(nl) .lightbox-figure figcaption::before { content: '‘'; }
:lang(nl) .lightbox-figure figcaption::after { content: '’'; }
.lightbox-nav, .lightbox-close { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); color: #FFFFFF; text-decoration: none; }
.lightbox-nav:hover, .lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox-nav:focus-visible, .lightbox-close:focus-visible { outline: 3px solid #A99FFF; outline-offset: 2px; }
.lightbox-nav svg, .lightbox-close svg { width: 24px; height: 24px; }
.lightbox-prev { inset-inline-start: 14px; top: calc(50% - 24px); }
.lightbox-next { inset-inline-end: 14px; top: calc(50% - 24px); }
.lightbox-close { inset-inline-end: 14px; top: 14px; }
:dir(rtl) .lightbox-nav svg { transform: scaleX(-1); }
@media (max-width: 600px) {
  .lightbox { padding: 72px 0 96px; }
  .lightbox-figure img { border-radius: 0; }
  .lightbox-figure figcaption { padding-inline: 16px; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 24px; }
  .lightbox-prev { inset-inline-start: calc(50% - 64px); }
  .lightbox-next { inset-inline-end: calc(50% - 64px); }
}
/* A phone on its side: the picture as high as the screen allows, the arrows beside it. */
@media (max-height: 500px) and (orientation: landscape) {
  .lightbox { padding: 12px 72px; }
  .lightbox-figure { width: min(640px, 100%, calc((100dvh - 70px) * 16 / 9)); }
  .lightbox-figure img { border-radius: 10px; }
  .lightbox-figure figcaption { margin-top: 8px; font-size: 15px; }
  .lightbox-prev, .lightbox-next { top: calc(50% - 24px); bottom: auto; }
  .lightbox-prev { inset-inline-start: 14px; }
  .lightbox-next { inset-inline-end: 14px; }
}

/* Your slides, not a template */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare-card, .list-card { padding: 32px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); }
.compare-card h3, .list-card h2, .list-card h3 { margin: 0 0 20px; font-size: 22px; }
.compare-card h3 img { display: block; height: 28px; width: auto; }
.compare-card ul, .list-card ul, .plain-list, .can ul, .facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.compare-card li, .list-card li, .plain-list li, .can li, .facts li { display: flex; align-items: flex-start; gap: 12px; }
.mark { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--link); }
.compare-card:not(.is-ours) .mark { color: var(--check-off); }
.compare-card:not(.is-ours) li { color: var(--muted); }
.is-ours { background: radial-gradient(600px 300px at 100% 0%, var(--deep-glow), transparent 70%), var(--deep); color: #F6F2FB; border-color: var(--deep); }
.is-ours .mark { color: #A99FFF; }
.is-ours p { color: rgba(246, 242, 251, 0.85); }
.compare-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 32px 0 0; }
.compare-more span { color: var(--muted); font-weight: 600; }
.compare-more a, .more-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.compare-more .mark, .more-link .mark { width: 18px; height: 18px; margin: 0; }

/* For AI assistants */
.assistants { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
.address { margin: 0 0 24px; }
.address code, .address-box code { display: block; padding: 16px 20px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #F6F2FB; font-size: 18px; }
.connect-steps { list-style: none; margin: 8px 0 24px; padding: 0; display: grid; gap: 22px; color: var(--muted); }
.connect-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; align-items: start; }
.connect-step h3 { margin: 6px 0 6px; font-size: 21px; color: var(--text); }
.connect-step p { margin: 0; }
.assistant-logo { flex: none; width: 26px; height: 26px; margin-top: 1px; color: var(--text); }
/* Step 1 picks the assistant: radio buttons before the steps (visually hidden, still reached by keyboard), their
   labels as chips; step 2 shows the panel of the picked one. One line per assistant id of `assistants.picks`. */
/* The steps sit on a card of their own (the homepage and the AI assistant page). */
.connect { margin-top: 28px; padding: clamp(20px, 4vw, 40px); border-radius: 24px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 24px 60px -36px var(--shadow); }
.connect .connect-steps { margin-bottom: 0; }
.connect + p { margin-top: 20px; }
.connect > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pick-chips label { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--text); font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.pick-chips label:hover { border-color: var(--accent); }
.pick-chips .assistant-logo { width: 22px; height: 22px; margin: 0; color: inherit; }
.pick-panel { display: none; margin-top: 12px; }
.pick-panel p { margin: 0; }
.pick-panel code { overflow-wrap: anywhere; }
.pick-panel p code { padding: 2px 6px; border-radius: 6px; background: var(--accent-wash); }
#pick-claude:checked ~ .connect-steps [for="pick-claude"], #pick-chatgpt:checked ~ .connect-steps [for="pick-chatgpt"],
#pick-claude-code:checked ~ .connect-steps [for="pick-claude-code"], #pick-copilot:checked ~ .connect-steps [for="pick-copilot"],
#pick-gemini:checked ~ .connect-steps [for="pick-gemini"], #pick-other:checked ~ .connect-steps [for="pick-other"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#pick-claude:focus-visible ~ .connect-steps [for="pick-claude"], #pick-chatgpt:focus-visible ~ .connect-steps [for="pick-chatgpt"],
#pick-claude-code:focus-visible ~ .connect-steps [for="pick-claude-code"], #pick-copilot:focus-visible ~ .connect-steps [for="pick-copilot"],
#pick-gemini:focus-visible ~ .connect-steps [for="pick-gemini"], #pick-other:focus-visible ~ .connect-steps [for="pick-other"] { outline: 3px solid #A99FFF; outline-offset: 3px; }
#pick-claude:checked ~ .connect-steps [data-pick="claude"], #pick-chatgpt:checked ~ .connect-steps [data-pick="chatgpt"],
#pick-claude-code:checked ~ .connect-steps [data-pick="claude-code"], #pick-copilot:checked ~ .connect-steps [data-pick="copilot"],
#pick-gemini:checked ~ .connect-steps [data-pick="gemini"], #pick-other:checked ~ .connect-steps [data-pick="other"] { display: block; }
.pick-select { display: none; }
/* A phone: the assistants as a list instead of six chips, and each step's content under its number and title, over
   the whole width. The list picks the panel through :has (the radio buttons stay for wider screens). */
@media (max-width: 600px) {
  .connect-step { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; }
  .connect-step > div { display: contents; }
  .connect-step > div > * { grid-column: 1 / -1; }
  .connect-step > div > h3 { grid-column: 2; align-self: center; margin: 0; font-size: 19px; }
  .connect-step .step-no { width: 36px; height: 36px; }
  .pick-chips { display: none; }
  .pick-select { display: block; width: 100%; min-height: 50px; margin-top: 12px; padding: 0 44px 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B7FFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 20px; color: var(--text); font: inherit; font-size: 17px; font-weight: 700; appearance: none; }
  .pick-select:focus-visible { outline: 3px solid #A99FFF; outline-offset: 2px; }
  .connect:has(.pick-select) .pick-panel { display: none !important; }
  .connect:has(.pick-select option[value="claude"]:checked) [data-pick="claude"],
  .connect:has(.pick-select option[value="chatgpt"]:checked) [data-pick="chatgpt"],
  .connect:has(.pick-select option[value="claude-code"]:checked) [data-pick="claude-code"],
  .connect:has(.pick-select option[value="copilot"]:checked) [data-pick="copilot"],
  .connect:has(.pick-select option[value="gemini"]:checked) [data-pick="gemini"],
  .connect:has(.pick-select option[value="other"]:checked) [data-pick="other"] { display: block !important; }
}
.copy-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 14px; background: var(--field); border: 1px solid var(--line); }
.copy-line code { flex: 1 1 220px; min-width: 0; color: var(--text); font-size: 17px; }
.copy-btn { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: #6D5DFC; color: #FFFFFF; font: inherit; font-weight: 700; cursor: pointer; }
.copy-btn:hover { background: #5546E0; }
.copy-btn:focus-visible { outline: 3px solid #A99FFF; outline-offset: 3px; }
.copy-btn.is-done { background: #2F9E6A; }
.pick-panel .copy-done:empty { display: none; }
.pick-panel > p { margin-top: 12px; }
.pick-help { margin-top: 10px; }
.pick-help summary { cursor: pointer; font-weight: 700; color: var(--link); }
.pick-help p { margin: 8px 0 0; }
.pick-help pre { margin: 8px 0 0; }
.connect-step .ask { margin-top: 18px; }
.section-dark .more-link { color: #C9C1FF; }
.can { padding: 28px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.can h3 { margin: 0 0 18px; }
.can .mark { color: var(--em); }
.address-box { margin: 28px 0 0; padding: 20px 24px; border-radius: 18px; background: var(--deep); border: 1px solid var(--ring); color: #F6F2FB; }
.address-box p { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #C4AEE3; }
.address-box code { padding: 0; border: 0; background: none; font-size: clamp(16px, 2.4vw, 20px); }
.facts { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.facts li { font-weight: 600; }

/* Tables: rows become cards on small screens */
.table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.table th, .table td { padding: 14px 16px; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; }
.table thead th { font-family: var(--head); font-size: 18px; }
.table tbody th { font-weight: 700; }
.compare-table td:nth-child(2), .compare-table th.ours { background: var(--accent-wash); font-weight: 600; }
.tools th { width: 42%; }
.tools code { font-size: 14px; }

/* Pricing (#74): three tabs that are links to their sections. Without a script CSS shows the section the address names
   (:target; none: the first); a browser without :has() shows all three, one under the other. The bar stays under
   the header; a section's top stops under both. */
.tabs-bar { position: sticky; top: 69px; z-index: 5; background: var(--header); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-block-end: 1px solid var(--line); }
.tabs { display: flex; gap: 6px; padding-block: 10px; overflow-x: auto; scrollbar-width: none; }
.tab { flex: none; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; text-decoration: none; white-space: nowrap; }
.tab:hover { border-color: var(--accent); }
.tab[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tab-panel { padding: 56px 0 88px; scroll-margin-top: 130px; }
@supports selector(:has(*)) {
  .tab-panel { display: none; }
  .tab-panel:target, .tab-panels:not(:has(.tab-panel:target)) > .tab-panel:first-child { display: block; }
  .pricing:has(#presentations:target) .tab[href="#presentations"], .pricing:has(#events:target) .tab[href="#events"], .pricing:has(#education:target) .tab[href="#education"], .pricing:not(:has(.tab-panel:target)) .tab[href="#presentations"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
}
.plans { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.plans-3 { grid-template-columns: repeat(3, 1fr); }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px 24px 24px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.plan.is-marked { border: 2px solid var(--accent); }
.plan.is-picked { box-shadow: 0 0 0 4px var(--accent-soft); }
.plan-badge { position: absolute; top: -13px; inset-inline-start: 22px; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.plan h3 { margin: 0; font-size: 22px; }
.plan-tagline { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.plan-price { margin: 16px 0 4px; font-family: var(--head); font-size: 40px; font-weight: 800; line-height: 1.05; }
.plan-price span { display: block; margin-top: 4px; font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--muted); }
.plan-note { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.plan-items { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.plan-items li { display: flex; align-items: flex-start; gap: 10px; }
.plan-items .mark { width: 18px; height: 18px; }
.plan-packs { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.plan-packs p { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }
.plan-packs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.plan-packs li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; }
.plan-packs small { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.plan-action { margin-top: auto; padding-top: 22px; }
.plan-action .btn { width: 100%; }
.btn-soon { background: transparent; color: var(--muted); border: 2px dashed var(--line); cursor: default; }
.plans-fine { margin: 6px 0 0; }
.plan-more { margin: 14px 0 0; font-weight: 600; }
.calc { margin: 48px 0 0; padding: 30px; border-radius: 24px; background: var(--soft); border: 1px solid var(--line); }
.calc h3 { margin: 0 0 6px; font-size: 24px; }
.calc-lead { color: var(--muted); }
.calc-form { display: flex; flex-wrap: wrap; gap: 14px 18px; margin: 16px 0 18px; }
.calc-field { display: grid; gap: 6px; flex: 1 1 180px; font-size: 14px; font-weight: 700; color: var(--muted); }
.calc-field input { width: 100%; min-height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--text); font: 700 20px var(--body); }
.calc-field input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.calc-best, .calc-answer { margin: 0 0 12px; font-size: 19px; }
.calc-answer > span:first-child { display: block; font-size: 14px; font-weight: 700; color: var(--muted); }
.calc-answer b { font-family: var(--head); font-size: 26px; }
.calc small, .calc-table small { color: var(--muted); font-size: 13px; font-weight: 500; }
.calc-table { margin-bottom: 8px; }
.calc-table td { white-space: nowrap; }
.calc-cheapest, .calc-off { display: none; margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; vertical-align: middle; }
.calc-cheapest { background: var(--accent); color: var(--on-accent); }
.calc-off { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.calc-table .is-cheapest { background: var(--accent-wash); }
.calc-table .is-cheapest .calc-cheapest, .calc-table .is-off .calc-off { display: inline-block; }
.calc-table .is-off th, .calc-table .is-off td { color: var(--muted); font-weight: 500; }
.block-title { margin: 56px 0 16px; font-size: 26px; }
.cost-table td, .event-compare td { white-space: nowrap; }
.free-card { margin-top: 24px; }
.free-card ul { grid-template-columns: 1fr 1fr; }
.tab-panel .list-card { margin-top: 32px; }
.compare-notes { margin: 8px 0 0; padding-inline-start: 18px; }
.compare-notes li { margin: 2px 0; }
.faq-block { margin-top: 56px; }
.faq-block h3 { margin-bottom: 16px; font-size: 26px; }

/* Questions */
.faq details { margin: 0 0 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; font-weight: 700; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; color: var(--link); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--muted); }

/* Call to action */
.cta { padding: 88px 0; text-align: center; color: #FFFFFF; background: linear-gradient(135deg, #6D5DFC 0%, #4B3BD6 100%); }
.cta h2 { max-width: 760px; margin-inline: auto; }
.cta p { max-width: 640px; margin-inline: auto; color: #FFFFFF; font-size: 19px; }
.cta .actions { justify-content: center; }

/* Footer: the deck's near-black in both themes */
.foot { padding: 64px 0 32px; background: var(--foot); color: rgba(246, 242, 251, 0.72); font-size: 15px; border-block-start: 1px solid var(--ring); }
.foot-in { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; }
.foot-brand img { display: block; height: 26px; width: auto; margin-block-end: 16px; }
.foot-brand p { max-width: 320px; }
.foot nav h2 { margin: 0 0 12px; font-family: var(--body); font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; }
.foot nav a { display: block; padding: 4px 0; color: rgba(246, 242, 251, 0.74); text-decoration: none; }
.foot nav a:hover, .foot nav a[aria-current] { color: #FFFFFF; }
.foot-langs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px; padding-block-start: 24px; border-block-start: 1px solid rgba(255, 255, 255, 0.12); }
.foot-langs a { display: inline; }
.foot-langs a[aria-current] { font-weight: 700; }
.rights { grid-column: 1 / -1; margin: 0; font-size: 14px; }

/* Just above the ☰ breakpoint the header is full (French has the longest links): closer together, so the start button
   stays on screen. */
@media (max-width: 1360px) {
  .top-in { gap: 18px; }
  .menu { gap: 16px; }
}
@media (max-width: 1260px) {
  .menu { display: none; }
  .nav-menu { display: block; }
}
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .qt-grid { grid-template-columns: repeat(2, 1fr); }
  .qt-detail { grid-template-columns: 1fr; gap: 20px; }
  .qt-detail .qt-screen { max-width: 560px; }
  .steps { grid-template-columns: 1fr; }
  .assistants { grid-template-columns: 1fr; gap: 32px; }
  .foot-in { grid-template-columns: repeat(2, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
  .plans, .plans-3 { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
}
@media (max-width: 800px) {
  .compare, .two-cols { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .section-tight { padding-block-start: 24px; }
  .signin { display: none; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table th, .table td { display: block; width: 100%; }
  .table tr { padding: 12px 0; border-block-end: 1px solid var(--line); }
  .table th, .table td { padding: 6px 0; border: 0; }
  .compare-table td:nth-child(2) { padding: 10px 12px; border-radius: 10px; }
  .calc-table td::before, .cost-table td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .calc-table td, .cost-table td, .event-compare td { white-space: normal; }
  .calc-table tr, .cost-table tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; padding-inline: 10px; border-radius: 12px; }
  .calc-table th, .cost-table th { grid-column: 1 / -1; }
  .free-card ul { grid-template-columns: 1fr; }
  .compare-table td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
}
@media (max-width: 600px) {
  .wrap { padding-inline: 16px; }
  .grid-4, .plans, .plans-3 { grid-template-columns: 1fr; }
  /* A phone: one card a row, its picture beside the text, so the whole list stays short. */
  .qt-grid { grid-template-columns: 1fr; gap: 12px; }
  .qt { display: grid; grid-template-columns: 40% 1fr; column-gap: 14px; align-items: center; padding: 10px; padding-inline-end: 14px; }
  .qt-screen { grid-row: span 2; border-radius: 8px; }
  /* The small pictures play as they scroll in; a play button there would cover their numbers, so it stays on the
     question-types page only. */
  .qt .qt-play { display: none; }
  .qt h4 { margin: 0 0 4px; font-size: 17px; align-self: end; }
  .qt > p { margin: 0; font-size: 14.5px; line-height: 1.45; align-self: start; }
  .qt-list { gap: 44px; }
  .qt-detail h3 { font-size: 23px; }
  .qt-text { font-size: 17px; }
  .calc { padding: 22px 18px; }
  .tabs { gap: 4px; }
  .tab { flex: 1 1 auto; padding: 9px 6px; font-size: 13px; text-align: center; }
  .design { width: 240px; margin-inline-end: 14px; }
  .design-prompt { font-size: 14px; }
  .marquees { gap: 14px; }
  .hero, .page-hero { padding-block-start: 48px; }
  .top-in { gap: 12px; }
  .top-actions { gap: 8px; }
  .top .btn-small, .lang-menu { display: none; }
  .nav-panel { padding-inline: 16px; }
  /* The phone stands under the big screen, over its lower edge only. */
  .stage { padding-block-end: 46%; margin-block-start: 40px; }
  .beamer { width: 100%; border-radius: 10px; }
  .phone { width: 30%; inset-inline-end: 35%; }
  .foot-in { grid-template-columns: 1fr; }
  .actions .btn { width: 100%; }
  /* A phone in a room: the code field is a bold purple card, the first thing on screen, in both themes. */
  .join-band { background: var(--accent); border: 0; color: #FFFFFF; }
  .join-band-in { display: grid; grid-template-columns: 1fr auto; gap: 10px 10px; padding-block: 20px 22px; font-size: 16px; }
  .join-band-title { grid-column: 1 / -1; font: 800 24px/1.2 var(--head); }
  .join-band-label { grid-column: 1 / -1; margin-block-end: -2px; color: #FFFFFF; }
  .join-band input { width: 100%; min-height: 60px; border: 0; border-radius: 14px; background: #FFFFFF; color: #17122A; font-size: 26px; }
  .join-band input::placeholder { color: #A59CBB; }
  .join-band input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); }
  .join-band .btn { min-height: 60px; padding-inline: 24px; font-size: 18px; background: #FFFFFF; color: var(--accent-hover); }
  .join-band-hint { display: block; grid-column: 1 / -1; margin: 0; text-align: start; font-size: 14px; color: #FFFFFF; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide-bars .bar-fill, .slide-live i, .qt-dot { animation: none; }
  .qt, .qt:hover { transform: none; }
  .qt-screen[data-play] *, .qt-screen[data-play] *::before, .qt-screen[data-play] *::after { animation: none !important; }
  .qt-play { display: none; }
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; scroll-snap-type: x proximity; -webkit-mask-image: none; mask-image: none; }
  .marquee .is-copy { display: none; }
  .design { scroll-snap-align: start; }
  .design:first-child { margin-inline-start: 16px; }
}