/* Page Lemon marketing site: Zest Pop. One loud moment per screen, quiet everything else.
   Shared foundation. Components and their markup: docs/site/design-system.md.
   Page-only CSS goes in site/css/<page>.css; do not edit this file from a page. */

/* ---------- Tokens ---------- */
:root {
  /* Colour (brand-directions §2C + brand-strategy §3). Names are stable: pages use them. */
  --bg: #FFF8D6;          /* lemon cream: home background, table heads, soft fills */
  --field: #FFE45C;       /* loud yellow: hero, CTA band, highlights */
  --brand: #1B2A9E;       /* main titles (h1, hero), strong lines, dark band */
  --ink: #23221D;         /* text: warm near-black, not blue */
  --muted: #5B5950;       /* secondary text (6.4:1 on bg) */
  --primary: #2340D8;     /* links and filled buttons */
  --on-primary: #FFFFFF;
  --zing: #FF8FB1;        /* stickers and the logo only; never for states */
  --paper: #FFFDF5;       /* page background */
  --surface: #FFFFFF;     /* cards */
  --hl: #FFF1A8;            /* highlighted table column ("us") */
  --alert: #B42318;
  --alert-bg: #FDECEA;
  --ok: #1E5B34;
  --ok-bg: #E3F4E8;
  --live: #2E9E5B;
  --line: rgba(35, 34, 29, 0.14);
  --line-strong: #1B2A9E;
  --band-bg: #1B2A9E;     /* dark band (.band-ink) */
  --band-ink: #FFF8D6;
  --band-accent: #FFE45C;

  /* Type */
  --display: 'Unbounded', 'DM Sans', system-ui, sans-serif; /* wordmark, hero H1, CTA band only */
  --body: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', 'DM Mono Fallback', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-hero: clamp(34px, 7.4vw + 6px, 60px);
  --fs-h1: clamp(32px, 3.4vw + 20px, 50px);
  --fs-h2: clamp(26px, 1.6vw + 18px, 34px);
  --fs-h3: 20px;
  --fs-lede: clamp(18px, 0.6vw + 15.5px, 21px);
  --fs-body: 17px;
  --fs-sm: 15px;
  --fs-xs: 13px;

  /* Space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section: clamp(56px, 8vw, 96px);   /* vertical rhythm between sections */
  --gutter: 16px;
  --max: 1120px;

  /* Shape */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 24px;
  --pop: 6px 6px 0 var(--line-strong);  /* offset ink shadow: loud cards only */
  --ease: 160ms ease;
  color-scheme: light;
}
@media (min-width: 720px) { :root { --gutter: 24px; } }

/* Dark tokens: ready but OFF. Owner decision 2026-10-11: the marketing site is light only.
   They apply only under <html data-theme="dark">, which no page sets. */
:root[data-theme="dark"] {
  --bg: #0E1440; --field: #18205A; --ink: #FFF4C2; --brand: #FFE45C; --muted: #B4B9E0;
  --primary: #FFE04A; --on-primary: #0E1440; --paper: #141B4D; --surface: #1B2463;
  --hl: #222B6E; --alert: #FF8A80; --alert-bg: #3A1730; --ok: #8EDBA8; --ok-bg: #173A2A;
  --line: rgba(255, 244, 194, 0.16); --line-strong: #FFF4C2;
  --band-bg: #070B26; --band-ink: #FFF4C2; --band-accent: #FFE04A;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
code, kbd, pre { font-family: var(--mono); font-size: 0.9em; }
:not(pre) > code {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.05em 0.35em;
  overflow-wrap: anywhere;
}
pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  overflow-x: auto;
  line-height: 1.5;
  font-size: 14px;
  max-width: 100%;
}
h1, h2, h3, h4 { text-wrap: balance; color: var(--ink); }
h1 { color: var(--brand); font: 700 var(--fs-h1)/1.1 var(--body); letter-spacing: -0.025em; margin: 0 0 var(--s-3); }
h2 { font: 600 var(--fs-h2)/1.15 var(--body); letter-spacing: -0.02em; margin: 0 0 var(--s-3); }
h3 { font: 600 var(--fs-h3)/1.3 var(--body); letter-spacing: -0.005em; margin: 0 0 6px; }
p, li { text-wrap: pretty; }
.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 8px; z-index: 30; background: var(--surface); padding: 8px 12px; border-radius: 8px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 800px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ---------- Header ---------- */
.site-head {
  position: relative; z-index: 20;
  padding: 10px 0;
  background: var(--bg);
  border-bottom: 1px solid transparent;
}
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: 44px; }
.brand img { width: 32px; height: 32px; }
.brand span { font: 900 18px/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.site-nav { order: 3; width: 100%; display: flex; align-items: center; gap: 2px; margin: 0 -10px; }
.site-nav a {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--fs-sm);
  padding: 10px; border-radius: 8px; white-space: nowrap;
}
.site-nav a:hover { background: var(--line); }
/* The current page: a quiet cue (owner 2026-10-13: no underline), the link in the brand blue. */
.site-nav a[aria-current="page"] { color: var(--brand); font-weight: 600; }
.head-actions { order: 2; margin-left: auto; display: flex; align-items: center; gap: 4px; }
.signin {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--fs-sm);
  padding: 10px; border-radius: 8px; white-space: nowrap;
}
.signin:hover { background: var(--line); }
.head-cta { box-shadow: none; white-space: nowrap; }
/* One row only from 1024 px: below that the nav, Log in, Start free and the language switcher overflow
   (768-1000 px, longest in fr/de). Tablets keep the two-row phone layout, sticky. */
@media (min-width: 760px) { .site-head { position: sticky; top: 0; padding: 12px 0; } }
@media (min-width: 1024px) {
  .site-head .wrap { flex-wrap: nowrap; gap: 24px; }
  .site-nav { order: 2; width: auto; margin: 0 0 0 8px; gap: 4px; }
  .head-actions { order: 3; gap: 8px; }
}
/* 1024-1279 px: the longest languages (fr, de) need a tighter row to stay on one line. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-head .wrap { gap: 12px; }
  .site-nav { margin-left: 0; gap: 0; }
  .site-nav a, .nav-menu summary { padding: 10px 7px; font-size: 14px; }
  .signin { padding: 10px 6px; font-size: 14px; }
  .head-actions { gap: 4px; }
}
@media (max-width: 380px) {
  .brand span { font-size: 16px; }
  .brand { gap: 8px; }
  .brand img { width: 28px; height: 28px; }
  .site-nav a { padding: 10px 8px; }
  .signin { padding: 10px 6px; }
}
/* Help menu (docs/research/nav-dropdowns-2026-10-13.md): a <details> disclosure, so it opens without JS
   (js/i18n.js closes it on an outside click, on Escape and when focus leaves). Two labelled groups, each link
   with a one-line description. Phones and tablets: the panel spans the header under the nav row, groups
   side by side from 560 px; desktop: it drops under "Help", two columns. */
.nav-menu { position: static; }
.nav-menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink); font-weight: 500; font-size: var(--fs-sm); line-height: 1.5;
  padding: 10px; border-radius: 8px; white-space: nowrap;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.nav-menu[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.nav-menu summary:hover, .nav-menu[open] summary { background: var(--line); }
.nav-menu summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nav-menu:has(a[aria-current="page"]) summary, .nav-menu summary[aria-current="page"] { color: var(--brand); font-weight: 600; }
.nav-panel {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: var(--gutter); right: var(--gutter);
  display: grid; gap: 4px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(35, 34, 29, 0.14);
}
@media (min-width: 560px) { .nav-panel { grid-template-columns: 1fr 1fr; } }
.nav-group { min-width: 0; }
.nav-group-title {
  margin: 0; padding: 10px 12px 6px;
  font: 500 var(--fs-xs)/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.nav-group ul { margin: 0; padding: 0; list-style: none; }
.nav-group li { margin: 0; }
.site-nav .nav-panel a {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px;
  white-space: normal; line-height: 1.25;
}
.site-nav .nav-panel a:hover { background: var(--bg); }
.site-nav .nav-panel a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.nav-item { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.nav-desc { font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
.site-nav .nav-panel a[aria-current="page"] { text-decoration: none; background: var(--bg); }
.site-nav .nav-panel a[aria-current="page"] .nav-item { color: var(--brand); font-weight: 600; }
.site-nav { position: relative; }
@media (min-width: 1024px) {
  .nav-menu { position: relative; }
  .nav-panel { left: -8px; right: auto; width: 36rem; }
}
@media (max-width: 1023px) {
  /* The nav is one row that scrolls sideways when the labels are long (de, fr, es, pt), so the
     header is two rows in every language. The Help panel is positioned against .wrap, outside the
     scroller, so the scroller does not clip it. */
  .site-head .wrap { position: relative; }
  .site-nav {
    position: static; flex-wrap: nowrap; gap: 0; width: calc(100% + 20px);
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a, .nav-menu summary { padding: 10px 6px; }
}
/* Phones (owner 2026-10-13: Log in visible next to Start free): the top row is the lemon mark, the language
   globe, Log in and Start free; the nav has the second row to itself. The wordmark gives way to make room (the
   link keeps its "Page Lemon home" name); below 380 px the actions tighten a little more. .head-actions becomes
   display: contents so its items can sit in the top row. Long labels (de, fr, es, pt) wrap the nav onto a second
   line instead of scrolling, so Help is never hidden past the edge (pre-launch r3 market P1-3). */
@media (max-width: 559px) {
  .site-head .wrap { column-gap: 4px; }
  .site-head .brand { margin-right: auto; }
  .site-head .brand span { display: none; }
  .head-actions { display: contents; }
  .head-actions .lang-switch-head { order: 1; flex: none; }
  .head-actions .lang-switch-head summary { padding: 8px; }
  .head-actions .lang-switch-head ul { right: auto; left: 0; }
  .head-actions .signin { order: 2; padding: 10px 8px; }
  .head-actions .head-cta { order: 3; padding: 8px 12px; }
  .site-head .site-nav { order: 4; flex: 1 1 100%; width: auto; min-width: 0; margin: 0 -4px; flex-wrap: wrap; overflow: visible; }
}
/* Up to 409 px (not 379): "Commencer gratuitement" pushed fr onto a third row at 380-405 px (r5 market P1-2). */
@media (max-width: 409px) {
  .head-actions .head-cta, .head-actions .signin { font-size: 13px; }
  .head-actions .head-cta { padding: 8px 10px; }
  .head-actions .signin { padding: 10px 6px; }
  .head-actions .lang-switch-head summary { padding: 8px 6px; }
}
/* Up to 419 px the five labels need the tighter padding, or "Help" and its chevron end up past the edge (marketing QA 2026-10-14, P2-4).
   The owner allows two header rows at most (r5 market P1-2: "Hilfe", "Aide", "Ayuda", "Ajuda" sat alone on a third
   row at 375 px), so Help becomes a question-mark icon at the end of the nav row (its name stays "Help" for screen
   readers; the icon matches the language globe) and the labels get smaller step by step. Checked at 320, 375 and
   414 px (and every width up to 1023) in all 9 languages. */
@media (max-width: 419px) {
  .site-nav a, .nav-menu summary { padding: 10px 4px; }
}
@media (max-width: 469px) {
  .site-head .nav-menu summary { font-size: 0; gap: 0; padding: 10px 6px; }
  .site-head .nav-menu summary::after { display: none; }
  .site-head .nav-menu summary::before {
    content: ""; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: var(--help-icon) center / contain no-repeat; mask: var(--help-icon) center / contain no-repeat;
  }
  .site-head { --help-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 1 1 3.4 2.4c-.6.3-1 .8-1 1.4v.6'/%3E%3Ccircle cx='12' cy='16.8' r='.4' fill='black'/%3E%3C/svg%3E"); }
}
@media (max-width: 409px) {
  .site-nav > a { font-size: 13.5px; padding: 10px 3px; }
}
/* 560-599 px: the wordmark gives way as on phones, or "Commencer gratuitement" wraps fr onto a third row. */
@media (min-width: 560px) and (max-width: 599px) {
  .site-head .brand span { display: none; }
}
@media (max-width: 369px) {
  .site-head .wrap { padding-left: 12px; padding-right: 12px; }
  .site-head .site-nav { margin: 0 -6px; }
  .site-nav > a { font-size: 12.5px; padding: 10px 2px; }
  .site-head .nav-menu summary { padding: 10px 4px; }
}

/* ---------- Menu sheet: phones and tablets (owner 2026-10-14) ----------
   One header row below 1024 px: the lemon mark, Start free and a menu button. The button (main.js) opens a
   full-width sheet over the page with the nav, Help, Log in and the language; Esc, the button or a click on a
   link closes it, and focus goes back to the button. The header keeps its height while the sheet is open, so
   nothing under it moves. Pages built before the button existed keep the two-row layout above (:has). */
.menu-btn { display: none; }
@media (max-width: 1023px) {
  .site-head:has(.menu-btn) .wrap { flex-wrap: nowrap; column-gap: 8px; }
  .site-head:has(.menu-btn) .brand { margin-right: auto; }
  .site-head:has(.menu-btn) .head-actions { display: contents; }
  .site-head:has(.menu-btn) .site-nav,
  .site-head:has(.menu-btn) .lang-switch-head,
  .site-head:has(.menu-btn) .signin { display: none; }
  .site-head:has(.menu-btn) .head-cta { order: 2; font-size: var(--fs-sm); padding: 8px 14px; }
  .menu-btn {
    order: 3; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -8px;
    padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer;
  }
  .menu-btn:hover { background: var(--line); }
  .menu-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .menu-icon, .menu-icon::before, .menu-icon::after {
    display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 180ms ease, background 180ms ease;
  }
  .menu-icon { position: relative; }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
  .menu-icon::before { top: -6px; }
  .menu-icon::after { top: 6px; }
  .menu-btn[aria-expanded="true"] .menu-icon { background: transparent; }
  .menu-btn[aria-expanded="true"] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }

  /* Open: the row stays where it is (fixed at the top of the screen) and the sheet fills the screen under it. */
  html.menu-open { overflow: hidden; }
  .site-head.is-open .wrap {
    position: fixed; inset: 0; z-index: 60; max-width: none; overflow-y: auto; overscroll-behavior: contain;
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-auto-rows: auto; align-content: start;
    column-gap: 8px; padding-top: 10px; padding-bottom: 32px; background: var(--bg);
  }
  .site-head.is-open .brand { grid-row: 1; grid-column: 1; justify-self: start; }
  .site-head.is-open .head-cta { grid-row: 1; grid-column: 2; }
  .site-head.is-open .menu-btn { grid-row: 1; grid-column: 3; }
  .site-head.is-open .site-nav {
    grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    width: auto; margin: 16px 0 0; padding: 0; overflow: visible; border-top: 1px solid var(--line);
  }
  .site-head.is-open .site-nav > a,
  .site-head.is-open .nav-menu summary,
  .site-head.is-open .signin {
    display: flex; align-items: center; min-height: 56px; padding: 12px 0; border-radius: 0;
    border-bottom: 1px solid var(--line); font: 600 var(--fs-lede)/1.25 var(--body); color: var(--ink); white-space: normal;
  }
  .site-head.is-open .site-nav > a[aria-current="page"] { color: var(--brand); }
  .site-head.is-open .site-nav > a:hover, .site-head.is-open .signin:hover,
  .site-head.is-open .nav-menu summary:hover, .site-head.is-open .nav-menu[open] summary { background: none; }
  .site-head.is-open .nav-menu summary { justify-content: space-between; gap: 12px; }
  .site-head.is-open .nav-menu summary::before { display: none; }
  .site-head.is-open .nav-menu summary::after { display: block; margin-right: 6px; }
  .site-head.is-open .nav-panel {
    position: static; grid-template-columns: 1fr; gap: 0; padding: 4px 0 8px;
    background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
  }
  .site-head.is-open .nav-group-title { padding: 12px 0 4px; }
  .site-head.is-open .site-nav .nav-panel a { padding: 10px 0; }
  .site-head.is-open .site-nav { order: 4; }
  .site-head.is-open .signin { order: 5; grid-column: 1 / -1; }
  .site-head.is-open .lang-switch-head { order: 6; display: block; grid-column: 1 / -1; margin-top: 16px; }
  .site-head.is-open .lang-switch-head summary { padding: 8px 0; color: var(--muted); }
  .site-head.is-open .lang-switch-head summary:hover, .site-head.is-open .lang-switch-head[open] summary { background: none; color: var(--ink); }
  .site-head.is-open .lang-switch-head .lang-name { display: inline; }
  .site-head.is-open .lang-switch-head ul {
    position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); margin-top: 4px; box-shadow: none;
  }
}
@media (max-width: 1023px) and (min-width: 760px) { .site-head.is-open .wrap { padding-top: 12px; } }
/* The wordmark shows whenever it fits beside Start free (long labels such as "Commencer gratuitement" leave no
   room): it wraps onto a second line inside the brand link, which is clipped, so it never overlaps the button. */
@media (max-width: 1023px) {
  .site-head:has(.menu-btn) .brand {
    flex: 1 1 0; min-width: 32px; min-height: 0; height: 32px; margin: 6px 0;
    flex-wrap: wrap; align-content: flex-start; row-gap: 32px; overflow: hidden;
  }
  .site-head:has(.menu-btn) .brand span { display: inline; line-height: 32px; }
  .site-head:has(.menu-btn) .brand img { width: 32px; height: 32px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  font: 600 16px/1.1 var(--body); text-align: center;
  border-radius: 999px; border: 2px solid var(--line-strong);
  cursor: pointer; text-decoration: none;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 3px 3px 0 var(--line-strong); }
.btn-primary:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line-strong); }
.btn-primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line-strong); }
.btn-secondary { background: var(--surface); color: var(--ink); }
.btn-secondary:hover { background: var(--bg); }
.btn-quiet { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); min-height: 48px; padding: 12px 20px; font-size: var(--fs-sm); }
.btn-quiet:hover { background: var(--bg); }
.btn-small { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.btn-small.btn-primary { box-shadow: 2px 2px 0 var(--line-strong); }
.btn-lg { min-height: 56px; padding: 14px 28px; font-size: 18px; }
.btn-block { display: flex; width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn.btn-primary { color: var(--on-primary); } /* beats ".x a" link colours */
.btn.btn-secondary, .btn.btn-quiet { color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn-note { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.text-link { font-weight: 600; text-decoration: none; }
.text-link::after { content: " \2192"; }
.text-link:hover { text-decoration: underline; }

/* ---------- Sections (layout patterns) ---------- */
.band { padding: var(--section) 0; }
.band + .band { padding-top: 0; }
main > .band:last-child { padding-bottom: var(--s-4); } /* ends like .page: the footer margin follows */
.band-alt { background: var(--surface); border-block: 1px solid var(--line); }
.band-alt + .band, .band + .band-alt { padding-top: var(--section); }
.band-ink { background: var(--band-bg); color: var(--band-ink); }
.band-ink h2, .band-ink h3 { color: var(--band-ink); }
.band-ink a { color: var(--band-accent); }
.band-ink .muted, .band-ink .lede { color: var(--band-ink); opacity: 0.88; }
.band-ink + .band, .band + .band-ink { padding-top: var(--section); }
.eyebrow { display: block; margin: 0 0 var(--s-3); font: 500 var(--fs-xs)/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.section-head { max-width: 760px; margin: 0 0 var(--s-5); }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head h2 { margin: 0 0 var(--s-3); }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--muted); margin: 0; max-width: 40em; }
.section-head.center .lede { margin-inline: auto; }
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-8); } .split-flip > :first-child { order: 2; } }
.stack > * + * { margin-top: var(--s-4); }

/* ---------- Page-specific blocks (home, pricing, plugins, prose...) ---------- */

/* ---------- Hero (the one loud moment) ---------- */
.hero { padding: 6px 0 0; }
.hero-field {
  background: var(--field);
  border-radius: 24px;
  padding: 32px 18px 24px;
  display: grid;
  gap: 28px;
}
.hero h1 {
  color: var(--brand);
  font: 900 clamp(34px, 9vw, 60px)/1.04 var(--display);
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  max-width: 9.5em;
}
.hero h1 span { display: inline-block; } /* each sentence stays on one line */
.hero .value { font-size: var(--fs-h3); line-height: 1.45; margin: 0 0 18px; max-width: 25em; font-weight: 500; }
.free { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; font-size: var(--fs-sm); }
.free-tag { background: var(--zing); color: var(--ink); border: 2px solid var(--line-strong); border-radius: 999px; padding: 5px 14px; font-weight: 700; font-size: 16px; }
.free a { color: var(--ink); font-weight: 500; }
@media (min-width: 960px) {
  .hero-field { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; padding: 56px 48px; gap: 56px; }
}

/* Action card: prompt + drop zone */
.act {
  background: var(--surface);
  border: 2.5px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--line-strong);
  padding: 20px 16px 16px;
  min-width: 0;
}
.act-label { font-weight: 600; margin: 0 0 10px; font-size: 16px; line-height: 1.35; }
.prompt-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--bg); border: 2px solid var(--line-strong); border-radius: 10px;
  padding: 10px 10px 10px 14px;
}
.prompt-line code {
  flex: 1 1 200px; min-width: 0;
  font: 500 var(--fs-sm)/1.45 var(--mono);
  background: none; border: 0; padding: 0;
  overflow-wrap: anywhere;
}
.copy-btn {
  flex: 0 0 auto;
  min-height: 44px; min-width: 84px; padding: 8px 14px;
  background: var(--primary); color: var(--on-primary);
  border: 0; border-radius: 8px;
  font: 600 15px/1 var(--body); cursor: pointer;
}
.copy-btn[data-copied] { background: var(--ink); }
.act-hint { color: var(--muted); font-size: var(--fs-sm); margin: 10px 0 0; line-height: 1.45; }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--muted); font: 500 13px/1 var(--mono); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.drop {
  border: 2px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  transition: background 150ms ease, border-color 150ms ease;
}
.drop.is-over { background: var(--field); border-style: solid; }
.drop-idle {
  display: block; width: 100%; min-height: 112px; padding: 22px 16px;
  background: none; border: 0; border-radius: 10px; color: var(--ink);
  font: inherit; text-align: center; cursor: pointer;
}
.drop-idle:hover { background: var(--bg); }
.drop-title { display: block; font-weight: 600; font-size: 16px; line-height: 1.4; }
.drop-hint { display: block; margin-top: 4px; font-size: var(--fs-sm); line-height: 1.4; opacity: .75; }
.drop-icon { width: 32px; height: 32px; margin: 0 auto 8px; display: block; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Drop states */
.drop-panel { text-align: left; padding: 20px 16px; }
.drop-panel h3 { margin: 0 0 6px; font-size: var(--fs-h3); }
.drop-panel p { margin: 0 0 10px; font-size: var(--fs-sm); line-height: 1.5; }
.drop-panel progress { width: 100%; height: 10px; accent-color: var(--primary); margin: 4px 0 6px; }
.live-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.live-link { font: 500 15px/1.4 var(--mono); overflow-wrap: anywhere; color: var(--ink); flex: 1 1 12em; min-width: 0; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--live); flex: 0 0 auto; }
.drop-panel .btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 12px; }
.drop-panel .note { color: var(--muted); }
.drop-panel.is-error h3 { color: var(--alert); }
.paste { margin-top: 12px; text-align: left; }
.paste summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.paste[hidden] { display: none; }
.paste-label { display: block; margin: 8px 0 6px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.paste textarea { display: block; box-sizing: border-box; width: 100%; min-height: 140px; resize: vertical; padding: 10px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--ink); font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.paste .btn { margin-top: 10px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (max-width: 420px) {
  .hero-field { padding: 28px 14px 18px; border-radius: 20px; }
  .act { padding: 18px 12px 14px; box-shadow: 4px 4px 0 var(--line-strong); }
  .prompt-line code { font-size: 14px; }
}

/* ---------- Home sections ---------- */
.section-title { font: 600 clamp(28px, 2.8vw + 16px, 44px)/1.08 var(--body); letter-spacing: -0.035em; margin: 0 0 28px; max-width: 18em; }

/* Chat bubbles (also used by .chat on other pages). The home "How it works" scenes live in css/home.css. */
.msg { margin: 0; max-width: min(78%, 30em); padding: 10px 14px; border-radius: 16px; font-size: var(--fs-sm); line-height: 1.45; }
.msg p { margin: 0 0 8px; }
.msg-user { align-self: flex-end; background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 4px; }
.msg-ai { align-self: flex-start; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: .25; } }

/* The best way to launch (bold band) */
.best { margin-top: 88px; padding: 72px 0; background: var(--brand); color: var(--bg); }
.best h2 { font: 600 clamp(30px, 4vw + 14px, 52px)/1.05 var(--body); letter-spacing: -0.035em; color: var(--field); margin: 0 0 14px; max-width: 14em; }
.best-lede { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.4; margin: 0 0 40px; max-width: 28em; }
.best-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 720px) { .best-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .best-list { grid-template-columns: repeat(4, 1fr); } }
.best-list li { border-top: 2px solid var(--field); padding-top: 16px; }
.best-list h3 { font: 600 20px/1.3 var(--body); margin: 0 0 6px; color: #FFFFFF; }
.best-list p { margin: 0; color: var(--bg); }
.best a { color: var(--field); }

/* Key values */
.values { padding: 80px 0 0; }
.value-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 640px) { .value-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (min-width: 960px) { .value-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 36px; } }
.value-grid h3 { font: 600 20px/1.3 var(--body); margin: 0 0 6px; }
.value-grid p { margin: 0; color: var(--muted); }
.mark { display: block; width: 28px; height: 6px; border-radius: 999px; background: var(--field); border: 1.5px solid var(--line-strong); margin-bottom: 14px; }
.values-more { margin: 32px 0 0; font-weight: 700; }

/* Close */
.close { padding: 88px 0 0; }
.close-card { background: var(--field); border-radius: var(--radius-lg); padding: 44px 20px; text-align: center; }
.close-card h2 { font: 900 clamp(26px, 5.4vw, 44px)/1.1 var(--display); letter-spacing: -0.03em; margin: 0 auto 12px; max-width: 16em; }
.close-card p { margin: 0 auto 24px; font-size: var(--fs-lede); max-width: 30em; }
.close-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Page layouts ---------- */
.page { padding-top: clamp(32px, 5vw, 56px); padding-bottom: 16px; }
.page-head { max-width: 760px; margin-bottom: var(--s-7); }
.page-head h1 { color: var(--brand); font: 700 var(--fs-h1)/1.1 var(--body); letter-spacing: -0.03em; margin: 0 0 12px; }
.page-head p { color: var(--muted); font-size: var(--fs-lede); line-height: 1.5; margin: 0; }
.section { margin-top: var(--section); }
.section > h2 { margin-bottom: var(--s-5); }
.section > h2:has(+ p) { margin-bottom: var(--s-3); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; min-width: 0; }
.card p { margin: 0; color: var(--muted); }
.grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.muted { color: var(--muted); }

/* Pricing */
.plans { display: grid; gap: 16px; max-width: 860px; }
@media (min-width: 720px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { display: flex; flex-direction: column; gap: 14px; }
.plan.pro { border: 2px solid var(--line-strong); }
.plan h2, .plan h3 { font-size: 22px; margin: 0; }
.price { font: 600 40px/1 var(--body); letter-spacing: -0.02em; margin: 0; color: var(--ink) !important; }
.price small { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li { padding: 10px 0; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline; }
.plan li::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--primary); transform: translateY(-1px); }
.plan li.soon::before { background: transparent; border: 1.5px solid var(--muted); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.soon-tag { font: 500 12px/1 var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 7px; margin-left: 4px; white-space: nowrap; }
.fine { color: var(--muted); font-size: var(--fs-sm); margin: 16px 0 0; max-width: 860px; }
.plans-4 { max-width: none; }
@media (min-width: 1080px) { .plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan-for { font-weight: 500; color: var(--ink) !important; margin-top: -8px !important; }
.plan-sub { font-size: var(--fs-sm); margin-top: -6px !important; }
.price-text { font-size: 32px; }
.price-table table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--fs-sm); }
.price-table th, .price-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table thead th { background: var(--bg); font-weight: 700; }
.price-table tbody th { font-weight: 500; width: 28%; }
.price-table tr.group th { background: var(--bg); font: 500 13px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding-top: 14px; }
.price-table td.hl { background: var(--hl); }
.plans-3 { max-width: none; }
@media (min-width: 960px) { .plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Pricing tabs without JS: two radios switch the panels. Without CSS both panels show, one after the other. */
.tab-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tab-labels { display: inline-flex; gap: 4px; padding: 4px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); margin: 0 0 20px; }
.tab-labels label { cursor: pointer; padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
.tab-labels label small { font-weight: 500; color: var(--muted); }
#tab-personal:checked ~ .tab-labels label[for="tab-personal"], #tab-business:checked ~ .tab-labels label[for="tab-business"] { background: var(--primary); color: var(--on-primary); }
#tab-personal:checked ~ .tab-labels label[for="tab-personal"] small, #tab-business:checked ~ .tab-labels label[for="tab-business"] small { color: var(--on-primary); }
#tab-personal:focus-visible ~ .tab-labels label[for="tab-personal"], #tab-business:focus-visible ~ .tab-labels label[for="tab-business"] { outline: 3px solid var(--primary); outline-offset: 3px; }
#tab-business:checked ~ .panel-personal, #tab-personal:checked ~ .panel-business { display: none; }
.tab-panel > h2.panel-title { font-size: var(--fs-h3); margin: 0 0 4px; }
.tab-panel > .panel-lede { color: var(--muted); margin: 0 0 16px; max-width: 760px; }
.price-table .soon-tag { margin: 4px 0 0; display: inline-block; }

/* ---------- Plugins ---------- */
.plugins { display: grid; gap: 16px; }
@media (min-width: 860px) { .plugins { grid-template-columns: 1fr 1fr; } }
.plugin { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; }
.plugin h2 { font-size: 24px; margin: 0; }
.plugin .lede { color: var(--ink); }
.plugin ul { margin: 0; padding-left: 1.2em; color: var(--muted); }
.plugin li { margin: 4px 0; }
.ask { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font: 500 15px/1.45 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.ask-label { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 -6px !important; }
.tiers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tiers li { margin: 0; font: 500 13px/1 var(--mono); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 9px; color: var(--ink); }
.plugin .tier-note { font-size: var(--fs-sm); }
.later { max-width: 860px; }

/* FAQ */
.faq { max-width: 860px; display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary { cursor: pointer; padding: 16px 44px 16px 18px; font-weight: 700; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 500 22px/1 var(--mono); color: var(--muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 18px 16px; color: var(--muted); }
.faq .answer p { margin: 0 0 8px; }
.faq .answer p:last-child { margin: 0; }

/* Contact */
.contact-mail { font: 700 clamp(18px, 4.6vw, 22px)/1.3 var(--body); display: inline-block; margin: 4px 0 8px; overflow-wrap: anywhere; }

/* Blog */
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 760px; }
.posts a.post { display: block; text-decoration: none; color: var(--ink); }
.posts a.post:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.posts h2 { font-size: var(--fs-h3); margin: 0 0 6px; }
.posts p { margin: 0; color: var(--muted); }
.post-meta { font: 500 13px/1 var(--mono); color: var(--muted); margin: 0 0 10px !important; }

/* ---------- Prose (docs, legal, blog posts) ---------- */
.docs-layout { display: grid; gap: 24px; padding-top: 24px; padding-bottom: 16px; }
@media (min-width: 900px) { .docs-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; padding-top: 32px; } }
.docs-nav { font-size: var(--fs-sm); }
.docs-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 900px) { .docs-nav ul { flex-direction: column; position: sticky; top: 24px; } }
.docs-nav a { display: block; padding: 7px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); background: var(--surface); }
@media (min-width: 900px) { .docs-nav a { border-color: transparent; background: none; } .docs-nav a:hover { background: var(--line); } }
.docs-nav a[aria-current="page"] { border-color: var(--line-strong); font-weight: 700; }
.docs-nav .sep { flex-basis: 100%; height: 0; }
@media (min-width: 900px) { .docs-nav .sep { height: 1px; background: var(--line); margin: 6px 12px; } }
.prose { max-width: 740px; min-width: 0; }
.prose.page { padding-top: 32px; }
.prose h1 { font: 700 clamp(28px, 6vw, 40px)/1.15 var(--body); letter-spacing: -0.02em; margin: 0 0 16px; }
.prose h2 { font-size: 24px; margin: 40px 0 10px; padding-top: 4px; }
.prose h3 { font-size: var(--fs-h3); margin: 28px 0 8px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 4px 0; }
.prose blockquote { margin: 16px 0; padding: 12px 16px; border-left: 4px solid var(--field); background: var(--surface); border-radius: 0 10px 10px 0; }
.prose blockquote p { margin: 0; }
.prose .lead { font-size: var(--fs-lede); color: var(--muted); }
.prose .updated { font-size: var(--fs-sm); color: var(--muted); margin: -6px 0 24px; }
.table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tr:last-child td { border-bottom: 0; }
.prose th { font-weight: 700; background: var(--bg); }
.prose table.wide { min-width: 640px; }
.prose td code, .prose th code { overflow-wrap: normal; word-break: normal; }
.prose td:first-child code { white-space: nowrap; }
.md-link { font-size: var(--fs-sm); color: var(--muted); margin-top: 32px; }
.callout { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 20px 0; }
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }

/* Report + 404 */
.narrow { max-width: 640px; }
.field-row { display: grid; gap: 6px; margin: 16px 0; }
.field-row label { font-weight: 700; }
.field-row input {
  font: 500 16px/1.4 var(--mono); padding: 12px 14px; border-radius: 10px;
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); width: 100%;
}


/* ---------- Shared components (see docs/site/design-system.md) ---------- */
.grid-3, .grid-4 { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card h3 { margin: 0 0 6px; }
.card > * + .btn, .card > * + .btn-row { margin-top: var(--s-4); }
.card-pop { border: 2.5px solid var(--line-strong); box-shadow: var(--pop); }
.card-soft { background: var(--bg); border-color: transparent; }
a.card, .card-link { display: block; text-decoration: none; color: var(--ink); transition: border-color var(--ease), transform var(--ease); }
a.card:hover, .card-link:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.pill { display: inline-block; font: 500 var(--fs-xs)/1 var(--mono); color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.pill-loud { background: var(--zing); border-width: 2px; font: 700 14px/1 var(--body); padding: 6px 12px; }
.icon-dot { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--field); border: 1.5px solid var(--line-strong); margin-bottom: var(--s-3); font: 700 18px/1 var(--body); color: var(--ink); }
.icon-dot svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Feature grid: icon/mark + title + one or two lines */
.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
@media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-6); } }
@media (min-width: 960px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 36px; } }
.feature-grid h3 { margin: 0 0 6px; }
.feature-grid p { margin: 0; color: var(--muted); }

/* Numbered steps */
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); counter-reset: step; }
@media (min-width: 860px) { .step-list { grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: var(--s-6); } }
.step-list > li { counter-increment: step; position: relative; padding-top: 56px; }
.step-list > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--field); border: 2px solid var(--line-strong); font: 700 18px/1 var(--body); color: var(--ink);
}
.step-list h3 { margin: 0 0 6px; }
.step-list p { margin: 0; color: var(--muted); }

/* "What you get" ticked list (proof without testimonials) */
.get-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px var(--s-6); }
@media (min-width: 720px) { .get-list.cols-2 { grid-template-columns: 1fr 1fr; } }
.get-list li { position: relative; padding: 10px 0 10px 32px; border-bottom: 1px solid var(--line); }
.get-list li::before { content: ""; position: absolute; left: 4px; top: 1.05em; width: 13px; height: 7px; border-left: 2.5px solid var(--primary); border-bottom: 2.5px solid var(--primary); transform: rotate(-45deg); }
.get-list li.no::before { width: 12px; height: 2.5px; border: 0; background: var(--muted); transform: none; top: 1.2em; }
.get-list strong { display: block; }
.get-list span { color: var(--muted); font-size: var(--fs-sm); }

/* Screenshot / mock frame */
.shot { margin: 0; }
.shot-frame { background: var(--surface); border: 2px solid var(--line-strong); border-radius: 16px; overflow: hidden; box-shadow: var(--pop); }
.shot-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--paper); border-bottom: 1.5px solid var(--line); font: 500 var(--fs-xs)/1 var(--mono); color: var(--muted); }
.shot-bar::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--zing); border: 1.5px solid var(--line-strong); box-shadow: 14px 0 0 -1.5px var(--field), 14px 0 0 0 var(--line-strong); margin-right: 18px; }
.shot-frame img { display: block; width: 100%; }
.shot figcaption { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-sm); }

/* Chat example: what you type to your AI */
.chat { display: grid; gap: 10px; margin: 0; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.chat .msg { max-width: 88%; }

/* Comparison / data table */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.data-table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: var(--fs-sm); }
.data-table caption { text-align: left; padding: 14px 16px 0; font-weight: 700; }
.data-table th, .data-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th { background: var(--bg); font-weight: 700; position: sticky; top: 0; }
.data-table tbody th { font-weight: 500; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tr.group > th { background: var(--bg); font: 500 var(--fs-xs)/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.data-table .is-us { background: var(--hl); }
.data-table thead .is-us { background: var(--field); }
.yes, .no { display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: -5px; position: relative; }
.yes { background: var(--primary); }
.yes::after { content: ""; position: absolute; left: 7px; top: 5px; width: 6px; height: 10px; border: solid var(--on-primary); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.no { border: 1.5px solid var(--muted); }
.no::after { content: ""; position: absolute; left: 5px; top: 9px; width: 9px; height: 1.5px; background: var(--muted); }

/* Pricing card (works inside .plans / .grid-3 / .grid-4) */
.plan-card { display: flex; flex-direction: column; gap: var(--s-3); position: relative; }
.plan-card.is-featured { border: 2.5px solid var(--line-strong); box-shadow: var(--pop); }
.plan-badge { position: absolute; top: -13px; left: 20px; background: var(--field); border: 2px solid var(--line-strong); border-radius: 999px; padding: 4px 10px; font: 700 13px/1 var(--body); color: var(--ink); }
.plan-card h3 { font-size: 22px; margin: 0; }
.plan-card .plan-for { margin: 0 !important; }
.plan-card .price { margin: 4px 0 0; }
.plan-card ul { list-style: none; margin: 0; padding: 0; }
.plan-card li { padding: 8px 0 8px 26px; position: relative; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.plan-card li::before { content: ""; position: absolute; left: 3px; top: 0.95em; width: 11px; height: 6px; border-left: 2.5px solid var(--primary); border-bottom: 2.5px solid var(--primary); transform: rotate(-45deg); }
.plan-card .btn { margin-top: auto; }

/* CTA band (loud): alias of the home .close-card */
.cta-band { background: var(--field); border-radius: var(--radius-lg); padding: clamp(36px, 6vw, 64px) 20px; text-align: center; }
.cta-band h2 { font: 900 clamp(26px, 4.4vw + 8px, 44px)/1.1 var(--display); letter-spacing: -0.03em; margin: 0 auto 12px; max-width: 16em; }
.cta-band p { margin: 0 auto 24px; font-size: var(--fs-lede); max-width: 30em; }
.cta-band .btn-row { justify-content: center; }

/* Notice / callout variants */
.note-box { border-left: 4px solid var(--field); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 18px; }
.note-box.is-ok { border-color: var(--ok); background: var(--ok-bg); }
.note-box.is-alert { border-color: var(--alert); background: var(--alert-bg); }
.note-box p { margin: 0; }

/* ---------- Footer (redesign 2026-10-13; markup: scripts/lib/site-chrome.mjs) ----------
   Brand on the left, four link columns, then one quiet base row: copyright and company on the left, legal links and
   the language switcher on the right. Phones: brand, then the columns two by two, then the base row stacked. */
.site-foot { margin-top: var(--s-8); padding: var(--s-7) 0 var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-sm); background: var(--bg); }
.site-foot p { margin: 0; color: var(--muted); }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot a { color: var(--ink); }
.foot-top { display: grid; gap: var(--s-6); }
.foot-about p { margin: 12px 0 0; max-width: 20em; line-height: 1.5; }
.foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.foot-title { font: 600 var(--fs-sm)/1.3 var(--body) !important; letter-spacing: 0; text-transform: none; color: var(--ink) !important; margin: 0 0 var(--s-2) !important; }
.foot-col ul { display: grid; gap: 0; }
.foot-col a { display: inline-block; padding: 6px 0; color: var(--muted); text-decoration: none; line-height: 1.35; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-base { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.foot-copy { order: 3; font-size: var(--fs-xs); color: var(--muted); } /* one line on a 390 px phone */
.foot-legal { order: 1; }
.foot-legal ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); }
.foot-legal li { margin: 0; }
.foot-legal a { display: inline-block; padding: 6px 0; color: var(--muted); text-decoration: none; }
.foot-legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 720px) {
  .foot-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot-base { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
  .foot-copy { order: 1; margin-right: auto !important; font-size: var(--fs-sm); }
  .foot-legal { order: 2; }
}
@media (min-width: 1000px) { .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: var(--s-8); } }
/* Older footer layouts (kept for backward compatibility) */
.foot-row { display: grid; gap: 18px; }
@media (min-width: 820px) { .foot-row { grid-template-columns: auto 1fr; align-items: center; gap: 32px; } }
.site-foot .cols { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
@media (min-width: 820px) { .site-foot .cols { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.site-foot .about { grid-column: 1 / -1; }
@media (min-width: 820px) { .site-foot .about { grid-column: auto; } }
.site-foot .cols ul { display: grid; gap: 6px; }
.foot-tag { margin-top: 10px !important; }
.foot-ai { margin-top: 28px !important; font-size: var(--fs-xs); }
.foot-ai a { color: var(--muted); }

/* ---------- "Start free" dialog (markup: scripts/lib/site-chrome.mjs, behaviour: main.js) ---------- */
.start-dialog {
  width: min(520px, calc(100vw - 2 * var(--gutter))); max-width: none; max-height: calc(100dvh - 2 * var(--gutter));
  margin: auto; padding: 0; border: 0; background: none; color: var(--ink); overflow: visible;
  font: 400 var(--fs-body)/1.5 var(--body);
}
.start-dialog::backdrop { background: rgba(35, 34, 29, 0.42); }
.start-dialog .start-card {
  position: relative; overflow: auto; max-height: inherit;
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--pop); padding: var(--s-6) var(--s-5) var(--s-5);
}
.start-dialog .start-title { margin: 0 var(--s-6) var(--s-4) 0; font: 600 var(--fs-h3)/1.35 var(--body); letter-spacing: -0.01em; color: var(--ink); }
.start-dialog .start-close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer;
}
.start-dialog .start-close:hover { background: var(--bg); }
.start-dialog .start-close svg { stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.start-dialog .copy-btn { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.start-dialog .copy-btn:hover { background: var(--bg); }
.start-dialog .copy-btn[data-copied] { background: var(--ink); color: var(--paper); }
.start-dialog .start-signin { margin: var(--s-4) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.start-dialog .start-signin a { color: var(--primary); }
.start-dialog[open] { animation: start-in 180ms ease-out; }
.start-dialog[open]::backdrop { animation: start-fade 180ms ease-out; }
@keyframes start-in { from { opacity: 0; transform: translateY(6px) scale(0.97); } }
@keyframes start-fade { from { opacity: 0; } }
@media (max-width: 420px) {
  .start-dialog .start-card { padding: var(--s-5) var(--s-4) var(--s-4); box-shadow: 4px 4px 0 var(--line-strong); }
  .start-dialog .start-title { font-size: var(--fs-h3); }
}

@media (prefers-reduced-motion: reduce) {
  .start-dialog[open], .start-dialog[open]::backdrop { animation: none; }
  .btn,.btn-primary:hover, .btn-primary:active, .drop, a.card, .card-link { transition: none; transform: none; }
}

/* ---------- Features ---------- */
.page .close { padding-top: 72px; }
.feature-group { display: grid; gap: 16px; padding: 32px 0; border-top: 1.5px solid var(--line-strong); }
.feature-group:first-of-type { border-top-width: 2.5px; }
@media (min-width: 860px) { .feature-group { grid-template-columns: 280px minmax(0, 1fr); gap: 48px; padding: 40px 0; } }
.fg-head h2 { font: 600 clamp(24px, 1.4vw + 18px, 30px)/1.15 var(--body); letter-spacing: -0.025em; margin: 0 0 6px; }
.fg-head p { margin: 0; color: var(--muted); }
.fg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
@media (min-width: 640px) { .fg-list { grid-template-columns: 1fr 1fr; gap: 26px 32px; } }
.fg-list h3 { font-size: var(--fs-h3); margin: 0 0 4px; }
.fg-list p { margin: 0; color: var(--muted); }

/* ---------- Lists, forms (students) ---------- */
.ticks { list-style: none; margin: 0 0 12px; padding: 0; }
.ticks li { position: relative; padding: 6px 0 6px 26px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.85em; width: 12px; height: 6px; border-left: 2.5px solid var(--primary); border-bottom: 2.5px solid var(--primary); transform: rotate(-45deg); }
.steps { margin: 0; padding-left: 1.3em; }
.steps li { margin: 6px 0; }
.students { align-items: start; gap: 40px; }
.apply { border: 2.5px solid var(--line-strong); box-shadow: 6px 6px 0 var(--line-strong); }
.apply h2 { margin-bottom: 4px; }
.field-row input, .field-row select, .field-row textarea {
  font: 400 16px/1.4 var(--body); padding: 11px 13px; border-radius: 10px;
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); width: 100%;
}
.field-row textarea { resize: vertical; min-height: 110px; }
.field-row.check-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; }
.field-row.check-row input { width: 20px; height: 20px; margin: 3px 0 0; padding: 0; accent-color: var(--primary); }
.field-row.check-row label { font-weight: 500; }
.hint { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.apply .btn { margin-top: 18px; }
.apply .btn:disabled { opacity: 0.6; cursor: progress; }
.form-status p { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--bg); color: var(--ink); }
.form-status.is-ok p { background: var(--ok-bg); color: var(--ok); }
.form-status.is-error p { background: var(--alert-bg); color: var(--alert); }
.form-status:empty { display: none; }

/* ---------- Compare ---------- */
.crumbs { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 14px; }
.crumbs a { color: var(--muted); }
.asof { font: 500 13px/1.4 var(--mono); color: var(--muted); margin: -16px 0 32px; }
.compare-sum { max-width: 760px; }
.compare-sum p { font-size: var(--fs-lede); margin: 0; }
.compare-table table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: var(--fs-sm); }
.compare-table th, .compare-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table thead th { background: var(--bg); font-weight: 700; }
.compare-table tbody th { font-weight: 700; width: 20%; }
.compare-table td:nth-child(2) { background: var(--hl); }
.fit h2 { font-size: var(--fs-h3); }
.fit-us { border: 2px solid var(--line-strong); }
.cmp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 720px) { .cmp-list { grid-template-columns: 1fr 1fr; } }
.cmp-card { display: block; height: 100%; text-decoration: none; color: var(--ink); }
.cmp-card:hover { border-color: var(--line-strong); }
.cmp-card h2 { font-size: var(--fs-h3); margin: 0 0 6px; }

/* ---------- Quote: a reworded need credited to a role (home roles, use cases). Never a review ---------- */
.role-quote { position: relative; margin: 16px 0 0; max-width: 34em; }
.role-quote::before { content: "\201C"; display: block; height: 0.5em; font: 700 48px/1 var(--display); color: var(--brand); }
.role-quote blockquote { margin: 0; }
.role-quote blockquote p { margin: 0; font-size: var(--fs-lede); font-style: italic; line-height: 1.45; color: var(--ink); }
.role-who { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.role-who::before { content: "— "; }
/* From 960px the quote mark hangs in the quote's left margin */
@media (min-width: 960px) {
  .role-quote { padding-left: 40px; }
  .role-quote::before { position: absolute; left: 0; top: -6px; height: auto; }
}

/* ---------- Use cases (/use-cases/, scripts/build-use-cases.mjs) ---------- */
.uc-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .uc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .uc-related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.uc-cards > li { display: flex; min-width: 0; }
a.uc-card { display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden; }
.uc-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); background: var(--bg); }
.uc-card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 22px 22px; }
.uc-card h3 { margin: 8px 0 0; font-size: var(--fs-h3); }
.uc-card-line { color: var(--muted); }
/* A group with a single card: the picture beside the words, across the row */
@media (min-width: 640px) {
  .uc-cards > li:only-child { grid-column: 1 / -1; }
  .uc-cards > li:only-child a.uc-card { flex-direction: row; }
  .uc-cards > li:only-child .uc-card img { width: 56%; border-bottom: 0; border-right: 1px solid var(--line); }
  .uc-cards > li:only-child .uc-card-body { justify-content: center; padding: 28px; }
}
.uc-hub .page-head + .uc-group { margin-top: 0; }
.uc-group-head h2 { margin: 0 0 var(--s-2); }
.uc-group-head p { margin: 0; color: var(--muted); }
/* Owner 2026-10-14: the "For small businesses" links sat right on the cards; the head gets room below it on phones
   and tablets (the desktop grid has a column gap instead). */
.uc-group-head .uc-aud { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: var(--s-4); }
.uc-group-head { margin-bottom: var(--s-6); }
@media (min-width: 960px) { .uc-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--s-7); align-items: start; } .uc-group-head { margin-bottom: 0; } }
@media (min-width: 960px) { .uc-every { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; } }
.uc-more { margin: var(--s-5) 0 0; }

.uc-actions { margin-top: var(--s-5); }
.uc-need { display: grid; gap: var(--s-5); }
@media (min-width: 960px) { .uc-need { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; } }
.uc-need .role-quote { margin: 0; }
.uc-answer { margin: 0; font-size: var(--fs-lede); line-height: 1.5; }
.uc-note { margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--muted); }
/* "This is for you if you say": three lines in the visitor's own words, straight under the page head. */
.uc-who { margin-top: var(--s-7); }
.uc-who h2 { margin: 0 0 var(--s-4); font-size: var(--fs-h3); }
.uc-who-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 760px) { .uc-who-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.uc-who-list li { margin: 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); line-height: 1.45; }
/* Translated hubs (until the next i18n build): "Who it's for" cards. The English hub dropped them (owner 2026-10-13 round 6); delete these rules once no page uses .uc-role. */
.uc-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .uc-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.uc-roles > li { display: flex; min-width: 0; margin: 0; }
.uc-role { flex: 1; display: grid; gap: 4px; padding: 16px 18px; color: var(--ink); text-decoration: none; transition: border-color var(--ease), box-shadow var(--ease); }
.uc-role strong { display: block; font-size: var(--fs-body); font-weight: 600; }
.uc-role strong::after { content: " →"; color: var(--primary); }
.uc-role span { display: block; font-size: var(--fs-sm); color: var(--muted); }
.uc-role:hover { border-color: var(--line-strong); box-shadow: 0 6px 20px rgba(35, 34, 29, 0.10); }
.uc-role:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
/* Hub: every kind of site the templates cover, to show the breadth beyond the five cases (plain words). */
.uc-breadth { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.uc-breadth li { margin: 0; font-weight: 500; font-size: var(--fs-sm); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: var(--surface); }
.uc-build { align-items: start; }
@media (min-width: 900px) { .uc-build { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-7); } }
.uc-build figcaption { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
.uc-pages { margin: 0; }
.uc-pages > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.uc-pages > div:first-child { padding-top: 0; }
.uc-pages > div:last-child { border-bottom: 0; }
.uc-pages dt { font-weight: 600; }
.uc-pages dd { margin: 4px 0 0; color: var(--muted); }
.uc-ask-label { margin: var(--s-5) 0 var(--s-3); }
.uc-prompts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
@media (min-width: 960px) { .uc-prompts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
.uc-prompts li { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.uc-prompts .prompt-line { flex: 1; align-items: flex-start; }
.uc-prompts li > p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.uc-start { margin-top: var(--s-3); }
.uc-uses h3 a { color: inherit; text-decoration: none; }
.uc-uses h3 a::after { content: " \2192"; }
.uc-uses h3 a:hover { text-decoration: underline; }
.uc-page .data-table { min-width: 0; }
@media (max-width: 559px) { .uc-page .data-table th, .uc-page .data-table td { padding: 10px; } }