/* Terazul LLC — marketing site styles.
 *
 * Tokens follow the BizPilot console (../bizpilot/console/public/tokens.css) so the
 * site and the product read as one company: same accent, same neutral ramp, same
 * 4px radius, same system font stack (no webfont, no network request).
 *
 * Two deliberate divergences from the console, both because this is a marketing
 * site and that is an operations console:
 *   1. Type is larger. The console reads at 14px because a reviewer works a queue
 *      for hours; a visitor reads three paragraphs once, at 17px.
 *   2. Spacing is generous. "If a screen looks airy, it is wrong" is a console
 *      rule. Here airy is the point.
 *
 * Every colour is defined twice — light and dark. A partial dark block is how you
 * ship text that is legible in one theme only.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
  --bg:          #ffffff;
  --surface:     #fafafa;
  --surface-2:   #f3f4f6;
  --line:        #e5e7eb;
  --line-strong: #d1d5db;
  --fg:          #14171a;
  --muted:       #5b6472;

  --accent:      #1d4ed8;
  --accent-fg:   #ffffff;
  --accent-weak: #eff6ff;
  --accent-line: #bfdbfe;

  --ok:          #065f46;
  --ok-bg:       #ecfdf5;
  --ai-line:     #7c3aed;
  --ai-bg:       #faf5ff;

  --focus:       var(--accent);

  /* spacing — 4px base, the only values */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-8: 48px; --s-10: 64px; --s-12: 96px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --radius:    4px;
  --radius-lg: 8px;
  --shadow-overlay: 0 4px 16px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);

  --container: 1120px;
  --measure:   68ch;
}

/* Three states, not two. The default OS setting stamps nothing on <html>, so
 * prefers-color-scheme alone separates light from dark there. An explicit
 * choice stamps data-theme, and must beat the OS in BOTH directions — hence
 * the :not() guard on the media query and the second, unguarded block. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --h-bg:        #080b11;
  --h-fg:        #e9edf5;
  --h-muted:     #a9b4c7;
  --h-dim:       #6d7a8f;
  --h-line:      rgba(255,255,255,.11);
  --h-surface:   rgba(255,255,255,.05);
  --h-grid:      rgba(255,255,255,.04);
  --h-title-a:   #ffffff;
  --h-title-b:   #a8c2f0;
  --h-glow-a:    rgba(37,99,235,.38);
  --h-glow-b:    rgba(124,58,237,.22);
  --h-glow-c:    rgba(29,78,216,.16);
  --h-pill-bg:   rgba(96,165,250,.1);
  --h-pill-line: rgba(96,165,250,.28);
  --h-pill-fg:   #93c5fd;
  --h-accent:    #93c5fd;
  --h-chip-bg:   rgba(255,255,255,.045);
  --h-chip-line: rgba(255,255,255,.1);
  --h-mock-bg:   linear-gradient(#101722, #0b1017);
  --h-mock-line: rgba(255,255,255,.11);
  --h-mock-sh:   0 40px 80px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(96,165,250,.07), 0 0 90px -30px rgba(37,99,235,.5);
  --h-mock-head: rgba(255,255,255,.025);
  --h-mock-in:   rgba(255,255,255,.022);
  --h-mock-fg:   #d6dde9;
  --h-btn2-bg:   rgba(255,255,255,.05);
  --h-btn2-line: rgba(255,255,255,.16);
  --h-ai:        #c4b5fd;
  --h-hover:     rgba(255,255,255,.1);

    --bg:          #0d1014;
    --surface:     #14181e;
    --surface-2:   #1b2028;
    --line:        #262c35;
    --line-strong: #39414d;
    --fg:          #e8eaed;
    --muted:       #9aa4b2;

    --accent:      #60a5fa;
    --accent-fg:   #0d1014;
    --accent-weak: #10203a;
    --accent-line: #1e3a63;

    --ok:          #6ee7b7;
    --ok-bg:       #0d2620;
    --ai-line:     #c4b5fd;
    --ai-bg:       #1d1630;

    --shadow-overlay: 0 4px 16px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  }
}

:root[data-theme="dark"] {
  --h-bg:        #080b11;
  --h-fg:        #e9edf5;
  --h-muted:     #a9b4c7;
  --h-dim:       #6d7a8f;
  --h-line:      rgba(255,255,255,.11);
  --h-surface:   rgba(255,255,255,.05);
  --h-grid:      rgba(255,255,255,.04);
  --h-title-a:   #ffffff;
  --h-title-b:   #a8c2f0;
  --h-glow-a:    rgba(37,99,235,.38);
  --h-glow-b:    rgba(124,58,237,.22);
  --h-glow-c:    rgba(29,78,216,.16);
  --h-pill-bg:   rgba(96,165,250,.1);
  --h-pill-line: rgba(96,165,250,.28);
  --h-pill-fg:   #93c5fd;
  --h-accent:    #93c5fd;
  --h-chip-bg:   rgba(255,255,255,.045);
  --h-chip-line: rgba(255,255,255,.1);
  --h-mock-bg:   linear-gradient(#101722, #0b1017);
  --h-mock-line: rgba(255,255,255,.11);
  --h-mock-sh:   0 40px 80px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(96,165,250,.07), 0 0 90px -30px rgba(37,99,235,.5);
  --h-mock-head: rgba(255,255,255,.025);
  --h-mock-in:   rgba(255,255,255,.022);
  --h-mock-fg:   #d6dde9;
  --h-btn2-bg:   rgba(255,255,255,.05);
  --h-btn2-line: rgba(255,255,255,.16);
  --h-ai:        #c4b5fd;
  --h-hover:     rgba(255,255,255,.1);

    --bg:          #0d1014;
    --surface:     #14181e;
    --surface-2:   #1b2028;
    --line:        #262c35;
    --line-strong: #39414d;
    --fg:          #e8eaed;
    --muted:       #9aa4b2;

    --accent:      #60a5fa;
    --accent-fg:   #0d1014;
    --accent-weak: #10203a;
    --accent-line: #1e3a63;

    --ok:          #6ee7b7;
    --ok-bg:       #0d2620;
    --ai-line:     #c4b5fd;
    --ai-bg:       #1d1630;

    --shadow-overlay: 0 4px 16px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  }


/* ------------------------------------------------------------------ base -- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0; font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3 { font-size: 1.15rem; letter-spacing: -.01em; }
p  { margin: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }

img, svg { max-width: 100%; }

code, .mono { font-family: var(--mono); font-size: .9em; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); }
.measure   { max-width: var(--measure); }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--accent); color: var(--accent-fg);
  padding: var(--s-2) var(--s-4); border-radius: var(--radius);
}
.skip-link:focus { top: var(--s-4); }

/* ---------------------------------------------------------------- header -- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header > .container {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 64px;
}

.brand {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em;
  color: var(--fg); text-decoration: none; flex: none;
}
.brand .mark { display: block; flex: none; }
.brand:hover { text-decoration: none; }

/* nowrap matters: eight items in German are wide enough to break onto a second
   line inside a 64px-tall header, which reads as a broken header rather than a
   tall one. Below the breakpoint the nav becomes its own scrollable row. */
.site-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-1); margin-left: auto; }
.site-nav a {
  color: var(--muted); text-decoration: none; font-size: .95rem;
  padding: var(--s-2) var(--s-3); border-radius: var(--radius);
  /* A flex item shrinks by default, so without these a two-word label like
     "Über uns" breaks in half inside its own pill once the row gets tight. */
  white-space: nowrap; flex: none;
}
.site-nav a:hover { color: var(--fg); background: var(--surface-2); }
/* The page you are on sits in a box, so "where am I" reads at a glance rather
   than from a change of weight alone. */
.site-nav a[aria-current="page"] { color: var(--fg); font-weight: 600; background: var(--surface-2); }
/* Product carries a small "New" badge on every page. The word is set here by
   the page's language rather than through the translation catalogue: it is one
   word in six languages, and keeping it out of the catalogue keeps this change
   independent of anything else in flight there. */
.site-nav a.nav-product {
  color: var(--accent); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.site-nav a.nav-product::after {
  content: "New";
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1; padding: 3px 6px; border-radius: 999px;
  color: var(--accent-fg); background: var(--accent);
}
.site-nav a.nav-product:lang(pt)::after { content: "Novo"; }
.site-nav a.nav-product:lang(es)::after { content: "Nuevo"; }
.site-nav a.nav-product:lang(fr)::after { content: "Nouveau"; }
.site-nav a.nav-product:lang(de)::after { content: "Neu"; }
.site-nav a.nav-product:lang(it)::after { content: "Nuovo"; }
/* French has the longest labels on the bar and the longest badge word, and was
   the one language still spilling sideways at 1280. A little less room between
   its items fits it, rather than stacking the nav for everyone below 1300. */
.site-nav a:lang(fr) { padding-inline: 9px; }
.site-nav a.nav-product:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.site-nav a.nav-product[aria-current="page"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }

.header-cta { display: flex; align-items: center; gap: var(--s-2); flex: none; }

/* 1239, not 800. Measured against the content width, which is what a real
   browser with a vertical scrollbar has: since Product gained its badge, the
   inline nav fits every language from 1240 up (German was the last to spill,
   at 1220). Below it the nav becomes its own scrollable row. */
@media (max-width: 1239px) {
  .site-header > .container { flex-wrap: wrap; gap: var(--s-3); padding-block: var(--s-3); }
  .site-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .header-cta { margin-left: auto; }
}

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit; font-size: .98rem; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--fg)); }

.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--muted); }

.btn-sm { padding: var(--s-2) var(--s-3); font-size: .9rem; }

.btn .arrow { transition: transform .12s ease; }
.btn:hover .arrow { transform: translateX(2px); }

.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-1); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------- sections -- */

.section { padding-block: var(--s-12); }
.section + .section { border-top: 1px solid var(--line); }
.section-tinted { background: var(--surface); }

.eyebrow {
  font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--accent); margin-bottom: var(--s-3);
}

.section-head { max-width: var(--measure); margin-bottom: var(--s-8); }
.section-head p { color: var(--muted); font-size: 1.08rem; margin-top: var(--s-4); }

.lede { font-size: 1.15rem; color: var(--muted); }

/* ------------------------------------------------------------------ hero -- */

.hero { padding-block: var(--s-12) var(--s-10); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-10); align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); } }

.hero h1 { margin-bottom: var(--s-5); }
.hero .lede { font-size: 1.22rem; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-note { margin-top: var(--s-5); font-size: .92rem; color: var(--muted); }

.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--accent-weak); color: var(--accent);
  border: 1px solid var(--accent-line);
  padding: var(--s-1) var(--s-3);
  border-radius: 999px; font-size: .82rem; font-weight: 600;
  margin-bottom: var(--s-5);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ------------------------------------------------------------- flow card -- */

.flow {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-6);
}
.flow-title {
  font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); margin-bottom: var(--s-5);
}
.flow-steps { display: flex; flex-direction: column; gap: 0; }

.flow-step { display: flex; gap: var(--s-4); align-items: flex-start; }
.flow-rail { display: flex; flex-direction: column; align-items: center; flex: none; align-self: stretch; }
.flow-dot {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line-strong);
  font-size: .72rem; font-weight: 600; color: var(--muted);
}
.flow-line { width: 1px; flex: 1; min-height: 22px; background: var(--line-strong); }
.flow-step:last-child .flow-line { display: none; }
.flow-body { padding-bottom: var(--s-5); }
.flow-step:last-child .flow-body { padding-bottom: 0; }
.flow-body h3 { font-size: .98rem; margin-bottom: 2px; }
.flow-body p { font-size: .9rem; color: var(--muted); line-height: 1.5; }

/* the human gate is the product's whole argument — it gets the emphasis */
.flow-step.is-gate .flow-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.flow-step.is-gate .flow-body h3 { color: var(--accent); }

/* ------------------------------------------------------------------ grid -- */

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-5);
}
.section-tinted .card { background: var(--bg); }
.card h3 { margin-bottom: var(--s-2); }
.card p { color: var(--muted); font-size: .96rem; }
.card .icon { color: var(--accent); margin-bottom: var(--s-4); display: block; }

/* stat / claim rows */
.claims { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.claim { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); background: var(--bg); }
.claim + .claim { border-top: 1px solid var(--line); }
.claim dt { font-weight: 600; }
.claim dd { margin: 0; color: var(--muted); font-size: .96rem; }
@media (max-width: 720px) { .claim { grid-template-columns: 1fr; gap: var(--s-2); } }

/* in/out of scope lists */
.scope-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.scope-list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: .96rem; }
.scope-list .glyph { flex: none; margin-top: 2px; }
.scope-in  .glyph { color: var(--ok); }
.scope-out .glyph { color: var(--muted); }
.scope-out li { color: var(--muted); }

/* --------------------------------------------------------------- callout -- */

.callout {
  border: 1px solid var(--accent-line); background: var(--accent-weak);
  border-radius: var(--radius-lg); padding: var(--s-6);
}
.callout h3 { margin-bottom: var(--s-3); }
.callout p { color: var(--fg); opacity: .85; }

.note {
  border-left: 3px solid var(--ai-line); background: var(--ai-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s-4) var(--s-5); font-size: .95rem;
}

/* ---------------------------------------------------------------- cta bar -- */

.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: var(--s-4); }
.cta-band p { color: var(--muted); max-width: 52ch; margin-inline: auto; font-size: 1.08rem; }
.cta-band .hero-actions { justify-content: center; }

/* ---------------------------------------------------------------- footer -- */

.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: var(--s-8); font-size: .93rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-8); }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.site-footer h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--fg); text-decoration: underline; }
.site-footer .tagline { color: var(--muted); margin-top: var(--s-3); max-width: 34em; }
.footer-legal { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; }

/* ----------------------------------------------------------- page header -- */

.page-header { padding-block: var(--s-10) var(--s-8); border-bottom: 1px solid var(--line); }
.page-header h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: var(--s-4); }
.page-header .lede { max-width: var(--measure); }

/* ----------------------------------------------------------------- forms -- */

.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label { font-size: .9rem; font-weight: 600; }
.field input, .field textarea, .field select {
  font: inherit; font-size: .98rem;
  padding: var(--s-3);
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--accent); }


/* ── hero palette ────────────────────────────────────────────────────────
 * The hero used to be dark in both themes. These tokens let it follow the
 * theme like the rest of the page. Defined here for light, and redefined in
 * all three dark states below — the same shape as the main palette, because
 * a colour defined only inside a media query never applies to a viewer whose
 * OS is set to "system" and who has toggled explicitly.
 */
:root {
  --h-bg:        #f2f6fb;
  --h-fg:        #0e1b2a;
  --h-muted:     #46566a;
  --h-dim:       #7c8b9c;
  --h-line:      rgba(14,27,42,.10);
  --h-surface:   #ffffff;
  --h-grid:      rgba(14,27,42,.05);
  --h-title-a:   #0e1b2a;
  --h-title-b:   #2b4a7a;
  --h-glow-a:    rgba(37,99,235,.13);
  --h-glow-b:    rgba(124,58,237,.08);
  --h-glow-c:    rgba(29,78,216,.06);
  --h-pill-bg:   #e8effb;
  --h-pill-line: #bcd2f2;
  --h-pill-fg:   #1d4ed8;
  --h-accent:    #1d4ed8;
  --h-chip-bg:   #ffffff;
  --h-chip-line: #d6dee8;
  --h-mock-bg:   linear-gradient(#ffffff, #fbfcfe);
  --h-mock-line: #dbe3ec;
  /* Light mode needs a firmer lift: on the pale hero the old neutral
     shadow left the example looking like more page rather than a
     picture of the product. Accent-tinted, to match the framed
     screenshots further down. */
  --h-mock-sh:   0 2px 4px rgba(14,27,42,.10),
                 0 18px 40px -10px color-mix(in srgb, var(--accent) 58%, transparent),
                 0 54px 90px -34px rgba(14,27,42,.45);
  --h-mock-head: #f5f8fc;
  --h-mock-in:   #f8fafc;
  --h-mock-fg:   #24303f;
  --h-btn2-bg:   #ffffff;
  --h-btn2-line: #cbd5e1;
  --h-ai:        #6d28d9;
  --h-hover:     rgba(14,27,42,.06);
}

/* ═══════════════════════════════════════════════════════════ dark hero ══
 *
 * The hero is dark in BOTH themes. It is the one place on the site that does
 * not follow prefers-color-scheme, so every colour in here is literal rather
 * than a token — a token would flip underneath it and the glow would vanish
 * against a white page.
 *
 * Everything below the hero returns to the themed tokens.
 */

.hero-dark {
  position: relative;
  isolation: isolate;
  background: var(--h-bg);
  color: var(--h-fg);
  overflow: hidden;
  border-bottom: 1px solid var(--h-line);
  padding-block: var(--s-12) var(--s-10);
}

/* the glow — a wide blue bloom behind the headline */
.hero-dark::before {
  content: "";
  position: absolute; inset: -30% -10% auto -10%; height: 130%;
  background:
    radial-gradient(60% 55% at 18% 12%, var(--h-glow-a), transparent 68%),
    radial-gradient(45% 45% at 78% 8%,  var(--h-glow-b), transparent 70%),
    radial-gradient(70% 60% at 50% 100%, var(--h-glow-c), transparent 70%);
  z-index: -2;
  pointer-events: none;
}

/* a faint grid, faded out toward the edges so it never reads as a table */
.hero-dark::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--h-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--h-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 40%, transparent 100%);
          mask-image: radial-gradient(70% 60% at 50% 35%, #000 40%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}

.hero-dark .container { position: relative; z-index: 1; }

.hero-dark h1 {
  /* Capped so "Customer service" holds one line in a half-width column
     (~504px at the 1120px container). Above ~3.5rem it breaks after
     "Customer", which reads as a stutter. */
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  letter-spacing: -.035em;
  line-height: 1.03;
  margin-bottom: var(--s-5);
  background: linear-gradient(168deg, var(--h-title-a) 30%, var(--h-title-b) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* the clause the whole product rests on gets its own colour */
.hero-dark h1 .accent-line {
  background: linear-gradient(168deg, #7dd3fc 0%, #60a5fa 60%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.hero-dark .lede { color: var(--h-muted); font-size: clamp(1.05rem, 1.6vw, 1.28rem); max-width: 32em; }
.hero-dark .hero-note { color: var(--h-dim); }
.hero-dark .hero-note strong { color: var(--h-fg); font-weight: 600; }

.hero-dark .pill {
  background: var(--h-pill-bg);
  border-color: var(--h-pill-line);
  color: var(--h-pill-fg);
  backdrop-filter: blur(4px);
}

.hero-dark .btn-primary { background: #2563eb; color: #fff; box-shadow: 0 6px 28px rgba(37, 99, 235, .42); }
.hero-dark .btn-primary:hover { background: #3b82f6; }
.hero-dark .btn-secondary {
  background: var(--h-btn2-bg); color: var(--h-fg);
  border-color: var(--h-btn2-line); backdrop-filter: blur(6px);
}
.hero-dark .btn-secondary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }

/* ---- chips: the kinds of message it handles ---------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-8); }
.chips-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--h-dim); width: 100%; margin-bottom: var(--s-1); }
.chip {
  font-size: .84rem; padding: var(--s-1) var(--s-3); border-radius: 999px;
  background: var(--h-chip-bg); border: 1px solid var(--h-chip-line);
  color: var(--h-muted);
}

/* ---- the product mock -------------------------------------------------- */

.mock-wrap { perspective: 1600px; }
.mock {
  background: var(--h-mock-bg);
  border: 1px solid var(--h-mock-line);
  border-radius: 12px;
  box-shadow: var(--h-mock-sh);
  overflow: hidden;
  transform: rotateY(-7deg) rotateX(3deg) translateZ(0);
  transform-origin: left center;
}
@media (max-width: 900px) { .mock { transform: none; } }

.mock-bar {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--h-mock-line);
  background: var(--h-mock-head);
  font-size: .78rem; color: var(--h-dim);
}
.mock-bar .dots { display: flex; gap: 5px; margin-right: var(--s-2); }
.mock-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--h-mock-line); display: block; }
.mock-bar .queue-count { margin-left: auto; color: var(--h-accent); font-variant-numeric: tabular-nums; }

.mock-body { padding: var(--s-4); display: grid; gap: var(--s-3); }

.mock-msg {
  border: 1px solid var(--h-mock-line); border-radius: 8px;
  padding: var(--s-3) var(--s-4); background: var(--h-mock-in);
}
.mock-msg .who { font-size: .76rem; color: var(--h-dim); margin-bottom: var(--s-1); }
.mock-msg .what { font-size: .93rem; color: var(--h-mock-fg); line-height: 1.5; }

/* the AI draft is visually distinct from human content — the console does the
   same thing, for the same reason (NFR-USA-005) */
.mock-draft {
  border: 1px solid rgba(167, 139, 250, .3); border-left: 3px solid #a78bfa;
  border-radius: 8px; padding: var(--s-3) var(--s-4);
  background: linear-gradient(rgba(124,58,237,.1), rgba(124,58,237,.03));
}
.mock-draft .who { color: var(--h-ai); }

.mock-steps { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: .74rem; color: var(--h-dim); padding-inline: var(--s-1); }
.mock-steps .step { display: inline-flex; align-items: center; gap: 5px; }
.mock-steps .step::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #34d399; }
.mock-steps .sep { color: var(--h-mock-line); }

.mock-source {
  margin-top: var(--s-2); font-size: .74rem; color: var(--h-dim);
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
}
.mock-source b { color: var(--h-accent); font-weight: 600; }

.mock-foot {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--h-mock-line); background: var(--h-mock-head);
}
.mock-gate { font-size: .78rem; color: #fbbf24; display: inline-flex; align-items: center; gap: 6px; }
.mock-gate::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mock-btns { margin-left: auto; display: flex; gap: var(--s-2); }
.mock-btn { font-size: .78rem; font-weight: 600; padding: 5px 12px; border-radius: 5px; }
.mock-btn.approve { background: #2563eb; color: #fff; }
.mock-btn.edit { background: var(--h-chip-bg); color: var(--h-muted); border: 1px solid var(--h-chip-line); }

/* ---- entrance: quiet, once, and skipped for reduced motion ------------- */

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .7s cubic-bezier(.22,.7,.3,1) both; }
  .rise-1 { animation-delay: .04s; }
  .rise-2 { animation-delay: .12s; }
  .rise-3 { animation-delay: .2s;  }
  .rise-4 { animation-delay: .3s;  }
  @keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
  .mock { animation: mock-in .9s cubic-bezier(.22,.7,.3,1) .18s both; }
  @keyframes mock-in {
    from { transform: rotateY(-13deg) rotateX(5deg) translateY(26px); }
    to   { transform: rotateY(-7deg) rotateX(3deg) translateY(0); }
  }
}

/* ---- proof strip under the hero ---------------------------------------- */

.strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.strip .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); padding-block: var(--s-6); }
@media (max-width: 820px) { .strip .container { grid-template-columns: repeat(2, 1fr); } }
.strip-item .k { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: var(--s-1); }
.strip-item .v { font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; }

/* ---- numbered feature cards -------------------------------------------- */

.card-num {
  position: relative; overflow: hidden;
  transition: border-color .16s ease, transform .16s ease;
}
.card-num:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.card-num .n {
  font-size: .74rem; font-weight: 600; letter-spacing: .1em;
  color: var(--accent); margin-bottom: var(--s-3); display: block;
}

/* a heavier pull-quote style band */
.quote-band { text-align: center; }
.quote-band blockquote {
  margin: 0 auto; max-width: 22ch;
  font-size: clamp(1.7rem, 4vw, 2.8rem); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.15;
}
.quote-band .attrib { margin-top: var(--s-5); color: var(--muted); font-size: .95rem; }

/* A claims list placed in a narrow column cannot afford a 220px term column —
   the definition ends up four words wide. Stack it there instead. */
.claims-compact .claim { grid-template-columns: 1fr; gap: var(--s-2); }
.claims-compact .claim dt { font-size: .96rem; }

/* ═════════════════════════════════════════════════ channels & autonomy ══ */

/* channel filter row inside the product mock */
.mock-tabs {
  display: flex; gap: var(--s-1); padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--h-mock-line); flex-wrap: wrap;
}
.mock-tab {
  font-size: .74rem; padding: 3px 10px; border-radius: 999px;
  color: var(--h-dim); border: 1px solid transparent;
}
.mock-tab.on { background: color-mix(in srgb, var(--h-accent) 16%, transparent); border-color: color-mix(in srgb, var(--h-accent) 40%, transparent); color: var(--h-accent); }

.mock-chan {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 7px; border-radius: 4px;
  background: color-mix(in srgb, var(--h-accent) 16%, transparent); color: var(--h-accent); margin-right: var(--s-2);
}

/* the autonomy dial — three segments, one lit */
.dial { display: flex; align-items: center; gap: var(--s-2); }
.dial-track {
  display: flex; border: 1px solid var(--h-chip-line); border-radius: 999px;
  padding: 2px; background: var(--h-chip-bg);
}
.dial-seg { font-size: .7rem; padding: 3px 9px; border-radius: 999px; color: var(--h-dim); white-space: nowrap; }
.dial-seg.on { background: #16a34a; color: #fff; font-weight: 600; }
.mock-auto { font-size: .78rem; color: #4ade80; display: inline-flex; align-items: center; gap: 6px; }
.mock-auto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* channel cards on the light sections */
.chan-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-4); }
@media (max-width: 900px) { .chan-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .chan-grid { grid-template-columns: 1fr; } }
.chan {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-4) var(--s-5); background: var(--bg);
  transition: border-color .16s ease, transform .16s ease;
}
.chan:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.chan h3 { font-size: 1rem; margin-bottom: var(--s-1); }
.chan p { font-size: .89rem; color: var(--muted); }
.chan .how { font-family: var(--mono); font-size: .74rem; color: var(--accent); margin-top: var(--s-2); display: block; }

/* the converge diagram — many in, one gate, one out */
.converge {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-6);
  align-items: center; margin-top: var(--s-8);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-6); background: var(--bg);
}
@media (max-width: 820px) { .converge { grid-template-columns: 1fr; gap: var(--s-5); } }
.converge-in { display: grid; gap: var(--s-2); }
.converge-in span {
  font-size: .84rem; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--muted);
}
.converge-gate {
  text-align: center; padding: var(--s-5) var(--s-4);
  border: 1px solid var(--accent-line); background: var(--accent-weak);
  border-radius: var(--radius-lg); min-width: 190px;
}
.converge-gate b { display: block; margin-bottom: var(--s-2); }
.converge-gate ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: .8rem; color: var(--muted); }
.converge-out { display: grid; gap: var(--s-2); align-content: center; }
.converge-out .msg {
  border: 1px solid var(--accent-line); background: var(--accent-weak);
  border-radius: var(--radius); padding: var(--s-3) var(--s-4);
}
.converge-out .msg b { font-size: .92rem; }
.converge-out .msg p { font-size: .82rem; color: var(--muted); margin-top: 2px; }

/* autonomy modes: three columns, the middle one emphasised */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-4); }
@media (max-width: 860px) { .modes { grid-template-columns: 1fr; } }
.mode {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-5); background: var(--bg); position: relative;
}
.mode.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mode .tag {
  position: absolute; top: calc(-1 * var(--s-3)); left: var(--s-5);
  background: var(--accent); color: var(--accent-fg);
  font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.mode .lvl { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: var(--s-2); }
.mode h3 { margin-bottom: var(--s-3); }
.mode p { font-size: .93rem; color: var(--muted); }
.mode .who { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.mode .who b { color: var(--fg); }

/* ═══════════════════════════════════════════ voice, language, reach ══ */

/* A channel that is on the roadmap rather than in the product. Muted, and
   labelled — a greyed card with no label just looks broken. */
.chan { position: relative; }
.chan-badge {
  display: inline-block; margin-left: var(--s-2);
  font-family: var(--mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px; vertical-align: 2px;
  background: var(--warnbg); color: var(--warn); border: 1px solid var(--warn);
}
.chan.is-soon { border-style: dashed; }
.chan.is-soon h3 { color: var(--muted); }
.chan.is-soon:hover { border-style: solid; }

/* the three voice phases — a sequence, so it is numbered */
.phases { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-4); margin-top: var(--s-6); }
@media (max-width: 860px) { .phases { grid-template-columns: 1fr; } }
.phase {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-5); background: var(--bg);
}
.phase-n {
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--s-3); display: block;
}
.phase h3 { font-size: 1rem; margin-bottom: var(--s-2); }
.phase p { font-size: .91rem; color: var(--muted); }

/* language list — dense, factual, not a flag parade */
.langs {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.lang {
  font-size: .85rem; padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--muted);
}

/* two-column feature rows for the reach section */
.reach { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-5); }
@media (max-width: 760px) { .reach { grid-template-columns: 1fr; } }
.reach-item {
  border-left: 2px solid var(--accent-line); padding-left: var(--s-5);
}
.reach-item h3 { font-size: 1.02rem; margin-bottom: var(--s-2); }
.reach-item p { font-size: .95rem; color: var(--muted); }

/* A chip for a channel that is coming rather than shipping. The marker is the
   point — a chip that looks identical to the others is a claim. */
.chip-soon { border-style: dashed; }
.chip-soon b {
  font-size: .64rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: #fbbf24; margin-left: 5px;
}

/* ══════════════════════════════════════════════ natural language ══ */

/* The detection strip inside the mock. It exists to make the point the mock
   was already proving silently: three separate asks in one casual sentence. */
.mock-detect {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px dashed color-mix(in srgb, var(--h-accent) 45%, transparent); border-radius: 6px;
  background: color-mix(in srgb, var(--h-accent) 8%, transparent);
  font-size: .72rem; color: var(--h-accent);
}
.mock-detect .lead-k { font-weight: 600; letter-spacing: .03em; }
.mock-detect .ask {
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--h-accent) 16%, transparent); color: var(--h-accent);
  font-variant-numeric: tabular-nums;
}

/* natural-language capability rows */
.nl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-5); }
@media (max-width: 900px) { .nl { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .nl { grid-template-columns: 1fr; } }
.nl-item h3 { font-size: 1rem; margin-bottom: var(--s-2); }
.nl-item p { font-size: .93rem; color: var(--muted); }
.nl-item .said {
  display: block; margin-top: var(--s-3);
  font-family: var(--mono); font-size: .78rem; line-height: 1.5;
  color: var(--fg); background: var(--surface-2);
  border-left: 2px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s-2) var(--s-3);
}

/* the "versus" strip — what they are used to, and what this is instead */
.versus {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; margin-top: var(--s-8); background: var(--bg);
}
@media (max-width: 760px) { .versus { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.versus-cell { padding: var(--s-4) var(--s-5); border-right: 1px solid var(--line); }
.versus-cell:last-child { border-right: 0; }
@media (max-width: 760px) {
  .versus-cell:nth-child(2n) { border-right: 0; }
  .versus-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.versus-cell .old {
  font-size: .84rem; color: var(--muted); text-decoration: line-through;
  text-decoration-color: var(--line-strong); display: block; margin-bottom: var(--s-1);
}
.versus-cell .new { font-size: .95rem; font-weight: 600; }

/* teaser band that hands off to a deeper page */
.teaser {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s-6);
  align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-6); background: var(--bg);
}
@media (max-width: 760px) { .teaser { grid-template-columns: 1fr; gap: var(--s-4); } }
.teaser h3 { font-size: 1.25rem; margin-bottom: var(--s-2); }
.teaser p { color: var(--muted); font-size: .96rem; }
.teaser .steps {
  display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4);
  font-size: .82rem; color: var(--muted);
}
.teaser .steps span {
  padding: var(--s-1) var(--s-3); border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface);
}

/* ═════════════════════════════════════════════════ rotating banner ══ */

/* Three messages share the hero. Without JS the first one shows and the rest
   stay hidden — the fallback is the default, not an afterthought. */
.hero-slides { position: relative; min-height: 126px; }
@media (max-width: 900px) { .hero-slides { min-height: 120px; } }
@media (max-width: 560px) { .hero-slides { min-height: 190px; } }

.slide { display: none; }
.slide.is-on { display: block; }

/* On the home page the three share one box, as tall as the longest of them,
   so rotating never moves what is below. At desktop width two English
   headlines take three lines and one takes two, and the explanation, button
   and chips used to jump 47px every seven seconds (58px in Spanish, 115px in
   French). The headline keeps its place at the top of the box; a shorter one
   leaves room under it. Its margin is dropped because in a grid it no longer
   collapses into the explanation's, which already gives the same gap. */
.hero-grid .hero-slides { display: grid; }
.hero-grid .slide { display: block; grid-area: 1 / 1; visibility: hidden; }
.hero-grid .slide.is-on { visibility: visible; }
.hero-grid .slide h1 { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .slide.is-on { animation: slide-in .55s cubic-bezier(.22,.7,.3,1); }
  @keyframes slide-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* Each message gets its own light. Same dark ground, different temperature,
   so the three read as a set rather than three unrelated pages. */
.hero-dark { --glow-a: rgba(37,99,235,.38); --glow-b: rgba(124,58,237,.22); --glow-c: rgba(29,78,216,.16); }
.hero-dark.t-speed    { --glow-a: rgba(14,165,233,.36); --glow-b: rgba(20,184,166,.20); --glow-c: rgba(2,132,199,.16); }
.hero-dark.t-relation { --glow-a: rgba(124,58,237,.34); --glow-b: rgba(236,72,153,.18); --glow-c: rgba(91,33,182,.18); }
.hero-dark::before {
  background:
    radial-gradient(60% 55% at 18% 12%, var(--glow-a), transparent 68%),
    radial-gradient(45% 45% at 78% 8%,  var(--glow-b), transparent 70%),
    radial-gradient(70% 60% at 50% 100%, var(--glow-c), transparent 70%);
  transition: background .7s ease;
}

.hero-dark .accent-line { background-image: linear-gradient(168deg, #7dd3fc 0%, #60a5fa 60%); }
.hero-dark.t-speed .accent-line    { background-image: linear-gradient(168deg, #7dd3fc 0%, #2dd4bf 70%); }
.hero-dark.t-relation .accent-line { background-image: linear-gradient(168deg, #d8b4fe 0%, #f0abfc 70%); }

/* controls: a labelled rail, not three anonymous dots */
.slide-nav { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); flex-wrap: wrap; }
.slide-dots { display: flex; gap: var(--s-2); }
.slide-dot {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  width: 34px; height: 3px; border-radius: 2px;
  background: var(--h-line); transition: background .2s ease;
}
.slide-dot:hover { background: rgba(255,255,255,.4); }
.slide-dot[aria-current="true"] { background: #93c5fd; }
.t-speed .slide-dot[aria-current="true"]    { background: #5eead4; }
.t-relation .slide-dot[aria-current="true"] { background: #f0abfc; }
.slide-dot:focus-visible { outline: 2px solid #93c5fd; outline-offset: 4px; }
.slide-label {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--h-dim); font-weight: 600;
}

/* ══════════════════════════════════════════════════ explainer modal ══ */

/* Triggers are real <button>s so they are keyboard-reachable for free. These
   rules strip the UA button styling without touching the visual design each
   trigger already has. */
button.chan, button.mode, button.strip-item, button.chip {
  font: inherit; color: inherit; text-align: left; width: 100%;
  cursor: pointer; appearance: none;
}
button.chip { width: auto; }
button.chan, button.mode { display: block; }

/* A quiet, permanent affordance. Hover-only would leave touch users guessing. */
button.chan::after, button.mode::after, button.strip-item::after {
  content: "?";
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; font-family: var(--font);
  background: var(--surface-2); color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
button.strip-item { position: relative; padding-right: var(--s-6); }
button.mode { position: relative; }
button.chan:hover::after, button.mode:hover::after, button.strip-item:hover::after,
button.chan:focus-visible::after, button.mode:focus-visible::after, button.strip-item:focus-visible::after {
  background: var(--accent); color: var(--accent-fg);
}
button.strip-item { background: none; border: 0; }
button.strip-item:hover .v { color: var(--accent); }

.chips button.chip:hover { background: var(--h-hover); border-color: var(--h-dim); color: var(--h-fg); }

/* ---- the dialog ------------------------------------------------------- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 12, 18, .58);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: var(--s-5);
}
.modal-backdrop[hidden] { display: none; }

.modal {
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px -12px rgba(0,0,0,.45);
  width: min(560px, 100%); max-height: min(80vh, 720px);
  display: flex; flex-direction: column;
}
@media (prefers-reduced-motion: no-preference) {
  .modal { animation: modal-in .22s cubic-bezier(.22,.7,.3,1); }
  @keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
}

.modal-head {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 1.3rem; letter-spacing: -.02em; margin: 0; flex: 1; }
.modal-kicker {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 var(--s-2);
}
.modal-close {
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); cursor: pointer; flex: none;
  width: 30px; height: 30px; border-radius: var(--radius);
  font-size: 17px; line-height: 1; display: grid; place-items: center;
}
.modal-close:hover { background: var(--surface-2); color: var(--fg); border-color: var(--line-strong); }

.modal-body { padding: var(--s-5); overflow-y: auto; }
.modal-body h3 {
  font-size: .74rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s-2);
}
.modal-body h3 + p { margin: 0; font-size: .98rem; }
.modal-body .grp + .grp { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.modal-body .how-line {
  margin-top: var(--s-4); font-family: var(--mono); font-size: .78rem; color: var(--accent);
}
.modal-body .more { margin-top: var(--s-5); }

@media (max-width: 560px) {
  .modal-backdrop { place-items: end center; padding: 0; }
  .modal { max-height: 86vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
}

/* ═══════════════════════════════════════════════ language switcher ══ */

/* Language switcher: a flag + abbreviation button that opens a menu. Built on
   <details>, so it keeps keyboard and screen-reader behaviour without a widget. */
.lang-switch { position: relative; flex: none; margin-left: var(--s-3); }
.lang-switch > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  color: var(--muted); background: var(--bg);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::marker { content: ""; }
.lang-switch > summary:hover { color: var(--fg); border-color: var(--line-strong); }
.lang-switch > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lang-switch[open] > summary {
  color: var(--fg); background: var(--surface-2); border-color: var(--line-strong);
}

/* A 1px inset keeps a white flag (France, Italy) from bleeding into the page. */
.lang-switch .flag {
  display: block; width: 16px; height: 12px; flex: none; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.lang-switch .chev { width: 8px; height: 5px; opacity: .65; transition: transform .15s ease; }
.lang-switch[open] > summary .chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 190px; margin: 0; padding: var(--s-1); list-style: none;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay);
}
.lang-menu li { margin: 0; }
.lang-menu a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius);
  color: var(--fg); text-decoration: none; font-size: .9rem;
}
.lang-menu a:hover { background: var(--surface-2); text-decoration: none; }
.lang-menu a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lang-menu .name { flex: 1; }
.lang-menu .abbr {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--muted);
}
.lang-menu a[aria-current="true"] { background: var(--accent-weak); color: var(--accent); }
.lang-menu a[aria-current="true"] .abbr { color: var(--accent); }

/* The menu would otherwise open off the right edge once the header wraps. */
@media (max-width: 800px) {
  .lang-switch { margin-left: 0; order: 2; }
  .lang-menu { right: auto; left: 0; }
}

/* The one line that never rotates. Larger and higher-contrast than the old
   per-slide lede, because the first outside reader of this site needed several
   minutes to work out what the product was — the headline alone was not doing
   it, and an explanation that changes every seven seconds was making it worse. */
.hero-what {
  color: var(--h-muted); font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.55; max-width: 34em; margin-top: var(--s-5);
}
.hero-what b { color: var(--h-fg); font-weight: 600; }

/* ═════════════════════════════════════════════════════ section tints ══
 *
 * The page was reading as grey: one dark hero, then white and one flat grey
 * alternating for nine sections. These give each stretch its own temperature
 * while staying well short of a colourful site — the restraint is load-bearing
 * for the security and audit argument, so the tints are deliberately faint
 * (2-4% of a hue) rather than decorative blocks of colour.
 */

.section-cool  { background: color-mix(in srgb, var(--accent) 4%, var(--bg)); }
.section-warm  { background: color-mix(in srgb, var(--warn) 5%, var(--bg)); }
.section-green { background: color-mix(in srgb, var(--ok) 5%, var(--bg)); }

.section-cool .card, .section-warm .card, .section-green .card,
.section-cool .chan, .section-warm .chan, .section-green .chan,
.section-cool .mode, .section-warm .mode, .section-green .mode { background: var(--bg); }

/* Eyebrows pick up their section's hue, so the colour means something —
   it marks which part of the argument you are in rather than decorating. */
.section-warm  .eyebrow { color: var(--warn); }
.section-green .eyebrow { color: var(--ok); }

/* Numbered cards: the numeral carries colour, and the card lifts into it. */
.card-num .n { font-size: 1.6rem; line-height: 1; letter-spacing: -.02em; opacity: .85; }
.card-num:hover { border-color: var(--accent); box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--accent) 55%, transparent); }

/* Channel cards get a hue on hover rather than a grey outline. */
.chan:hover { box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--accent) 50%, transparent); }

/* The three autonomy levels read as a progression: review -> threshold -> auto.
   Colouring the level label makes that legible before the text is read. */
.mode:nth-child(1) .lvl { color: var(--accent); }
.mode:nth-child(2) .lvl { color: var(--warn); }
.mode:nth-child(3) .lvl { color: var(--ok); }
.mode.is-featured { box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -14px color-mix(in srgb, var(--accent) 60%, transparent); }

/* Scope lists: the in/out distinction was carried by a glyph alone. */
.scope-in  li { color: var(--fg); }
.scope-in  .glyph { background: var(--ok-bg); color: var(--ok); border-radius: 50%; width: 16px; height: 16px; display: inline-grid; place-items: center; font-size: 10px; }

/* Quote bands were plain grey; give the accent a moment. */
.quote-band blockquote { background: linear-gradient(100deg, var(--fg) 30%, var(--accent) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ══════════════════════════════════════════ interface mockups (light) ══
 *
 * The hero mock is dark because the hero is. These are the same idea for the
 * light sections: hand-built HTML rather than screenshots, so they stay sharp
 * at any size, restyle with the tokens, and cannot go stale against a UI change.
 * They are illustrative of intended behaviour, not captures of shipping software.
 */

.shot {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg); overflow: hidden; box-shadow: var(--shadow-overlay);
}
.shot-bar {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line);
  background: var(--surface); font-size: .78rem; color: var(--muted);
}
.shot-bar .dots { display: flex; gap: 5px; margin-right: var(--s-2); }
.shot-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); display: block; }
.shot-bar .right { margin-left: auto; font-variant-numeric: tabular-nums; }
.shot-body { padding: var(--s-4); display: grid; gap: var(--s-3); }
.shot-cap {
  font-size: .8rem; color: var(--muted); margin-top: var(--s-3);
  padding-left: var(--s-3); border-left: 2px solid var(--line-strong);
}

/* a settings row: label, description, and a control on the right */
.set-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s-4);
  align-items: center; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.set-row b { display: block; font-size: .93rem; }
.set-row span { font-size: .8rem; color: var(--muted); }
.set-pill {
  font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.set-auto   { background: var(--ok-bg);    color: var(--ok);     border: 1px solid var(--ok); }
.set-thresh { background: var(--warnbg);   color: var(--warn);   border: 1px solid var(--warn); }
.set-review { background: var(--accent-weak); color: var(--accent); border: 1px solid var(--accent-line); }

/* multilingual: one question, three answers */
.poly { display: grid; gap: var(--s-2); }
.poly-row {
  display: grid; grid-template-columns: 74px minmax(0,1fr); gap: var(--s-3);
  align-items: start; padding: var(--s-3); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
}
.poly-lang {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; color: var(--muted);
}
.poly-lang svg { width: 14px; height: 10.5px; border-radius: 2px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.poly-row p { font-size: .88rem; line-height: 1.5; }
.poly-src { font-size: .74rem; color: var(--accent); font-family: var(--mono); margin-top: 4px; }

/* ─────────────────────────────────────────────────── theme toggle ── */
.theme-btn {
  appearance: none; cursor: pointer; flex: none;
  width: 32px; height: 32px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; color: var(--muted);
}
.theme-btn:hover { background: var(--surface-2); color: var(--fg); border-color: var(--line); }
.theme-btn svg { width: 16px; height: 16px; display: block; }
/* Show the icon for the theme you would switch TO, not the one you are in. */
.theme-btn .i-sun  { display: none; }
.theme-btn .i-moon { display: block; }
:root[data-theme="dark"] .theme-btn .i-sun  { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun  { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
/* In the dark hero the header sits on dark ground in both themes. */
.site-header .theme-btn { color: var(--muted); }

/* ─────────────────────────────────────────────── introduction banner ── */
.intro-banner {
  background: var(--accent);
  color: var(--accent-fg);
  border-bottom: 1px solid var(--accent);
}
.intro-banner p {
  margin: 0; padding: var(--s-3) 0;
  font-size: .98rem; font-weight: 500; line-height: 1.4;
  text-align: center; text-wrap: balance;
}
@media (max-width: 560px) { .intro-banner p { font-size: .9rem; text-align: left; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The banner link sits on the accent fill, so it needs its own colours —
   the themed --link would vanish against blue. */
.intro-banner a {
  color: var(--accent-fg); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  white-space: nowrap; margin-left: var(--s-1); font-weight: 600;
}
.intro-banner a:hover { text-decoration-thickness: 2px; }
.intro-banner a:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 3px; border-radius: 2px; }

/* ── make the mockups read as screenshots ────────────────────────────────
 * They were sitting flush in the text column with a neutral shadow, so a
 * reviewer read them as more layout rather than as pictures of the product.
 * An accent-tinted lift plus a tinted bed behind them separates image from
 * page without adding chrome that would pretend to be a real browser.
 */
.shot-frame {
  position: relative;
  /* Clearance for the badge, which sits half outside the top edge. */
  margin-top: var(--s-10);
  padding: var(--s-5);
  border-radius: 14px;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--accent) 12%, transparent),
      color-mix(in srgb, var(--accent) 3%, transparent) 60%,
      transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
@media (max-width: 620px) { .shot-frame { padding: var(--s-3); } }

.shot-frame .shot {
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--accent) 22%, transparent),
    0 18px 40px -14px color-mix(in srgb, var(--accent) 45%, transparent),
    0 40px 70px -30px rgba(0, 0, 0, .28);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

/* A small label so there is no ambiguity about what is being looked at. */
.shot-tag {
  position: absolute; top: calc(-1 * var(--s-3)); left: var(--s-5);
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  background: var(--accent); color: var(--accent-fg);
}
.shot-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 1px;
  background: currentColor; opacity: .85;
}
.shot-frame .shot-cap { margin-top: var(--s-4); padding-left: var(--s-3); }

/* The caret shown while a message is being typed. The negative right margin
   gives it no width on the line: a caret that took room could wrap the last
   line of a paragraph early and make it a line taller than the finished text
   for a moment, and the hero with it. */
.type-caret {
  display: inline-block; width: 2px; height: 1.05em;
  margin-left: 2px; margin-right: -4px; vertical-align: -.15em;
  background: currentColor; opacity: .7;
}
@media (prefers-reduced-motion: no-preference) {
  .type-caret { animation: caret-blink 1s steps(1) infinite; }
  @keyframes caret-blink { 50% { opacity: 0; } }
}

/* ══════════════════════════════════════════ hero example: four views ══
 *
 * One conversation seen four ways: the tenant's own team, then their customer
 * on web chat, email and text. Every colour comes from the hero tokens so the
 * views theme with the rest of the hero.
 */

.views { perspective: 1600px; }

.view-tabs {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  margin-bottom: var(--s-3);
}
.view-tab {
  position: relative; overflow: hidden; cursor: pointer;
  appearance: none; font: inherit; font-size: .82rem; font-weight: 600;
  padding: var(--s-2) var(--s-3); border-radius: 999px;
  background: var(--h-chip-bg); color: var(--h-muted);
  border: 1px solid var(--h-chip-line);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.view-tab:hover { color: var(--h-fg); border-color: var(--h-dim); }
.view-tab.is-on {
  background: color-mix(in srgb, var(--h-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--h-accent) 45%, transparent);
  color: var(--h-accent);
}
.view-tab:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 2px; }
/* the time left on the current view, filling along the bottom of its tab */
.view-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--h-accent); opacity: .85;
}

.view-caps { display: grid; margin-bottom: var(--s-3); }
.view-cap {
  grid-area: 1 / 1; margin: 0;
  font-size: .8rem; letter-spacing: .02em; color: var(--h-dim);
  display: flex; align-items: center; gap: var(--s-2);
}
.view-cap::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--h-accent);
}

/* Without JS only view 0 is shown: the other views, their captions and the
   tab row carry `hidden`, restated here because the display rules in this
   section would otherwise win over it and draw all four views one under the
   other.
   With JS (`html.js`, set in the <head> of index.html and index2.html
   before first paint, and again by hero-seq.js as a fallback) the
   final layout is drawn from the first frame, before hero-seq.js has run:
   every view is stacked in one grid cell, so the stage is as tall as the
   tallest view, and the tab row holds its space unseen until the script
   un-hides it. The script then only reveals and swaps, so nothing below the
   example moves, at load or when the views change. Until 2026-09-26 the
   stacking waited for the script, and the hero shrank by ~1400px after first
   paint (a layout shift of 0.46; cleanup C13). */
.views [hidden] { display: none; }
.js .views .view-tabs[hidden] { display: flex; visibility: hidden; }
.js .views .view-stage,
.js .views .view-caps { display: grid; }
.js .views .view,
.js .views .view-cap {
  display: flex;               /* even while [hidden]: each counts toward the height */
  grid-area: 1 / 1; visibility: hidden; opacity: 0;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.js .views .view.is-on,
.js .views .view-cap.is-on {
  visibility: visible; opacity: 1;
  transition: opacity .35s ease, visibility 0s;
}

.view-stage {
  transform: rotateY(-7deg) rotateX(3deg); transform-origin: left center;
}
@media (max-width: 900px) { .view-stage { transform: none; } }
.view { display: flex; justify-content: center; align-items: flex-start; }
/* the admin mock used to carry its own tilt and entrance; the stage owns both now */
.views .mock { transform: none; animation: none; width: 100%; }

/* ── sequencing: stages are visible until JS opts a view in ── */
@media (prefers-reduced-motion: no-preference) {
  .is-seq [data-seq] { opacity: 0; transform: translateY(6px); }
  .is-seq [data-seq].is-in {
    opacity: 1; transform: none;
    transition: opacity .32s ease, transform .32s cubic-bezier(.22,.7,.3,1);
  }
  .is-seq .mock-steps .step { opacity: .28; transition: opacity .2s ease; }
  .is-seq .mock-steps .step.is-in { opacity: 1; }
  .is-seq .mock-auto.is-in { animation: badge-pop .42s cubic-bezier(.22,.9,.3,1); }
  @keyframes badge-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
}

/* ── shared bits ── */
.vav {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  background: var(--h-chip-bg); color: var(--h-muted); border: 1px solid var(--h-chip-line);
}
.vav-brand { background: #0f766e; color: #fff; border-color: #0f766e; }

.vbub {
  max-width: 82%; padding: 9px 13px; border-radius: 16px;
  font-size: .9rem; line-height: 1.45;
}
.vbub [data-type] { display: block; }
.vbub-me   { align-self: flex-end; background: #2563eb; color: #fff; border-bottom-right-radius: 4px; }
.vbub-them { align-self: flex-start; background: var(--h-mock-in); color: var(--h-mock-fg);
             border: 1px solid var(--h-mock-line); border-bottom-left-radius: 4px; }

/* ── 1: web chat widget, as it sits on the tenant's website ── */
.vchat {
  width: min(400px, 100%); height: 470px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--h-mock-bg); border: 1px solid var(--h-mock-line);
  border-radius: 16px; box-shadow: var(--h-mock-sh);
}
.vchat-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); background: #0f766e; color: #fff;
}
.vchat-head .vav-brand { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }
.vchat-id b { display: block; font-size: .95rem; }
.vchat-id span { display: block; font-size: .74rem; opacity: .85; }
.vchat-body {
  flex: 1; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4); overflow: hidden;
}
.vnote { margin: 0; font-size: .7rem; color: var(--h-dim); align-self: flex-start; padding-left: 4px; }
.vchat-input {
  margin: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: 999px;
  font-size: .85rem; color: var(--h-dim);
  background: var(--h-mock-in); border: 1px solid var(--h-mock-line);
}

/* ── 2: email thread ── */
.vmail {
  width: 100%; min-height: 470px;
  background: var(--h-mock-bg); border: 1px solid var(--h-mock-line);
  border-radius: 12px; overflow: hidden; box-shadow: var(--h-mock-sh);
}
.vmail-bar {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); font-size: .78rem; color: var(--h-dim);
  background: var(--h-mock-head); border-bottom: 1px solid var(--h-mock-line);
}
.vmail-bar .dots { display: flex; gap: 5px; margin-right: var(--s-2); }
.vmail-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--h-mock-line); display: block; }
.vmail-subj { padding: var(--s-4) var(--s-4) var(--s-2); font-size: 1.15rem; font-weight: 600; color: var(--h-fg); }
.vmail-msg { margin: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4);
             border: 1px solid var(--h-mock-line); border-radius: 10px; background: var(--h-mock-in); }
.vmail-reply { border-left: 3px solid #0f766e; }
.vmail-from { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.vmail-from b { display: block; font-size: .88rem; color: var(--h-fg); }
.vmail-from span { display: block; font-size: .74rem; color: var(--h-dim); }
.vmail-msg p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--h-mock-fg); }
.vmail-msg .vmail-sig { margin-top: var(--s-3); font-size: .8rem; color: var(--h-dim); }

/* ── 3: text messages on a phone ── */
.vphone {
  width: 290px; height: 540px; flex: none;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--h-mock-bg);
  border: 10px solid #111827; border-radius: 42px;
  box-shadow: var(--h-mock-sh);
}
.vphone-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 22px 4px; font-size: .74rem; font-weight: 600; color: var(--h-fg);
}
.vphone-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.vphone-sig i { width: 3px; background: currentColor; border-radius: 1px; display: block; }
.vphone-sig i:nth-child(1) { height: 4px; } .vphone-sig i:nth-child(2) { height: 6px; }
.vphone-sig i:nth-child(3) { height: 8px; } .vphone-sig i:nth-child(4) { height: 10px; }
.vphone-head {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--s-2) 0 var(--s-3); border-bottom: 1px solid var(--h-mock-line);
}
.vphone-head b { font-size: .82rem; color: var(--h-fg); }
.vphone-head span:last-child { font-size: .68rem; color: var(--h-dim); }
.vphone-body {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-3) var(--s-3); overflow: hidden;
}
.vphone-body .vbub { font-size: .86rem; max-width: 78%; }
.vphone-body .vbub-them { background: var(--h-chip-line); border: 0; }
.vphone-time { margin: 0 0 var(--s-2); text-align: center; font-size: .68rem; color: var(--h-dim); }
.vphone-delivered { margin: -2px 4px 4px 0; align-self: flex-end; font-size: .66rem; color: var(--h-dim); }

/* ─────────────────────────────────────────────────── contact form ── */
/* Hidden until needed. :target covers the no-JavaScript path, where the API
   redirects back to #sent or #failed; .is-on covers the in-page path. */
.form-status {
  display: none; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  border-radius: var(--radius); border: 1px solid; font-size: .95rem;
}
.form-status:target, .form-status.is-on { display: block; }
.form-status.ok  { background: var(--ok-bg);  border-color: var(--ok);   color: var(--fg); }
.form-status.bad { background: var(--warnbg); border-color: var(--warn); color: var(--fg); }
.form-status:focus { outline: none; }

/* Honeypot: off-screen, not display:none — some bots skip hidden inputs. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ══════════════════════════════════ alternate landing page (index2) ══
 *
 * "Your business -> Broa -> Your customers" as one diagram. Built in HTML so
 * it translates, reflows for phones and reads to a screen reader; the curved
 * connectors are drawn by js/diagram.js from where the cards actually sit, so
 * they still meet when a German label makes a card taller. Without JS the
 * three columns stand on their own.
 */

.hero-center { text-align: center; }
.hero-center h1 { margin-inline: auto; max-width: 34ch; text-wrap: balance; }
.hero-center .hero-what { margin-inline: auto; max-width: 46em; }
.hero-center .hero-actions { justify-content: center; }
/* The headline rotates through lines of different lengths, and the diagram
   below measures its own position, so the block is held at a fixed height:
   a reflow here would drag the connectors with it every seven seconds. The
   height is set by the worst case — two lines in German — and the type is
   sized so two lines fit it, rather than the block being sized around the
   type. The dots below carry their own top margin, so the headline does not
   also need a bottom one. */
.hero-center .slide h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 0; }
.hero-slides-center { min-height: 100px; display: grid; align-items: center; }
@media (max-width: 900px) { .hero-slides-center { min-height: 104px; } }
@media (max-width: 560px) { .hero-slides-center { min-height: 132px; } }
.slide-dots-center { justify-content: center; margin-top: var(--s-5); }
.hero-center .slide-dot { background: color-mix(in srgb, var(--h-fg) 22%, transparent); }
.hero-center .slide-dot:hover { background: color-mix(in srgb, var(--h-fg) 40%, transparent); }
.hero-center .slide-dot[aria-current="true"] { background: var(--h-accent); }

.dia {
  position: relative;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px) minmax(0, 1fr);
  gap: var(--s-10); margin-top: var(--s-10); text-align: left;
}
.dia-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.dia-lines path { fill: none; stroke-linecap: round; }
.dia-lines .base { stroke: color-mix(in srgb, var(--h-accent) 30%, transparent); stroke-width: 1.5; }
.dia-lines .flow { stroke: var(--h-accent); stroke-width: 2; stroke-dasharray: 5 16; opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .dia-lines .flow { animation: dia-flow 1.8s linear infinite; }
  @keyframes dia-flow { to { stroke-dashoffset: -42; } }
}

.dia-col { position: relative; z-index: 1; display: grid; gap: var(--s-2); }
.dia-label {
  justify-self: start; margin-bottom: var(--s-2);
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  color: var(--h-accent);
  background: color-mix(in srgb, var(--h-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--h-accent) 35%, transparent);
}
.dia-col-out .dia-label { justify-self: end; }

.dia-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 14px; border-radius: 12px;
  background: var(--h-mock-bg); border: 1px solid var(--h-mock-line);
}
/* both columns are cards: the two sides are the same kind of thing to click */
.dia-ico {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--h-accent);
  background: color-mix(in srgb, var(--h-accent) 13%, transparent);
}
.dia-col-out .dia-ico { border-radius: 50%; background: var(--h-accent); color: var(--h-bg); }
.dia-ico svg { width: 19px; height: 19px; }
.dia-item > div b { display: block; font-size: .93rem; color: var(--h-fg); line-height: 1.25; }
.dia-item > div span { display: block; font-size: .79rem; color: var(--h-dim); line-height: 1.35; }

.dia-mid { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s-5); }
.dia-hub {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: var(--s-2); text-align: center;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--h-accent) 26%, var(--h-bg)) 0%, var(--h-bg) 72%);
  border: 1px solid color-mix(in srgb, var(--h-accent) 45%, transparent);
  box-shadow:
    0 0 0 12px color-mix(in srgb, var(--h-accent) 6%, transparent),
    0 0 90px -10px color-mix(in srgb, var(--h-accent) 50%, transparent);
}
/* a dotted field inside the hub, faded to the edges */
.dia-hub::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background-image: radial-gradient(color-mix(in srgb, var(--h-accent) 45%, transparent) 1px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%);
          mask-image: radial-gradient(circle, #000 20%, transparent 70%);
  opacity: .55;
}
/* a slow dashed orbit */
.dia-hub::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--h-accent) 40%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .dia-hub::after { animation: dia-orbit 40s linear infinite; }
  @keyframes dia-orbit { to { transform: rotate(360deg); } }
}
.dia-hub > * { position: relative; }
.dia-mark { width: 64px; height: 64px; margin-bottom: var(--s-1); filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--h-accent) 55%, transparent)); }
.dia-name { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; color: var(--h-fg); }
/* This line is what the whole diagram is explaining, so it is read at the
   same weight as the name above it rather than as a caption. */
.dia-role { font-size: 1.05rem; font-weight: 600; color: var(--h-fg);
            max-width: 15ch; line-height: 1.3; }

.dia-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); width: 100%; }
.dia-pillar { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: .78rem; line-height: 1.3; color: var(--h-muted); }
.dia-pillar svg { width: 22px; height: 22px; color: var(--h-accent); }

.dia-down { display: none; justify-self: center; color: var(--h-accent); }
.dia-down svg { width: 26px; height: 26px; }

@media (max-width: 1000px) {
  .dia { grid-template-columns: 1fr; gap: var(--s-4); }
  .dia-lines { display: none; }
  .dia-down { display: block; }
  .dia-mid { max-width: 340px; justify-self: center; width: 100%; }
  .dia-col-out .dia-label { justify-self: start; }
}

/* ── three steps ── */
.steps3 { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: var(--s-4); }
.step3 {
  display: grid; align-content: start; justify-items: center; gap: var(--s-3); text-align: center;
  padding: var(--s-6) var(--s-5); border-radius: var(--radius-lg);
  background: var(--bg); border: 1px solid var(--line);
}
.step3.is-mid {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  box-shadow: 0 16px 40px -20px color-mix(in srgb, var(--accent) 55%, transparent);
}
.step3-ico {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.step3-ico svg { width: 26px; height: 26px; }
.step3 h3 { font-size: 1.15rem; margin: 0; }
.step3 .sub { font-size: .82rem; font-weight: 600; color: var(--accent); letter-spacing: .02em; }
.step3 p { font-size: .94rem; color: var(--muted); margin: 0; }
.step3-arrow { align-self: center; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
               color: var(--accent); border: 1px solid var(--line); background: var(--bg); }
.step3-arrow svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .steps3 { grid-template-columns: 1fr; }
  .step3-arrow { justify-self: center; transform: rotate(90deg); }
}

/* ── trust strip ── */
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-8); padding-block: var(--s-6); }
.trust-item { display: inline-flex; align-items: center; gap: var(--s-2); font-size: .95rem; font-weight: 500; color: var(--fg); }
.trust-item svg { width: 20px; height: 20px; color: var(--accent); flex: none; }

/* ── index2: channel previews ── */
.ch-previews { display: none; }
.modal-wide { width: min(680px, 100%); }
.modal-wide .modal-body { display: grid; justify-items: center; }
/* the same tinted bed the screenshots use, so a mockup reads as a picture */
.ch-frame {
  width: 100%; padding: var(--s-5); border-radius: 14px;
  display: grid; justify-items: center;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 12%, transparent),
    color-mix(in srgb, var(--accent) 3%, transparent) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
.ch-frame .vmail { min-height: 0; }
/* `.vmail-from span` is meant for the name and the to/date line, but the avatar
   is a span in the same row and outranks `.vav`, which left the initials
   block-flowed into the top-left corner of the circle and repainted them grey
   over the brand colour. */
.ch-frame .vmail-from .vav { display: grid; font-size: .7rem; color: var(--h-muted); }
.ch-frame .vmail-from .vav-brand { color: #fff; }
.dia-item[data-preview] { cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.dia-item[data-preview]:hover { background: color-mix(in srgb, var(--h-accent) 8%, transparent); border-radius: 12px; }
.dia-item[data-preview]:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 2px; border-radius: 12px; }
/* a quiet hint that these open something */
.dia-col-out .dia-item[data-preview]::after {
  content: ""; width: 7px; height: 7px; margin-left: auto; flex: none;
  border-top: 1.5px solid var(--h-dim); border-right: 1.5px solid var(--h-dim);
  transform: rotate(45deg); opacity: .8;
}
.dia-col-out .dia-item[data-preview]:hover::after { border-color: var(--h-accent); }

/* ── a submitted web form ── */
.vform { width: min(420px, 100%); border: 1px solid var(--h-mock-line); border-radius: 12px;
         background: var(--h-mock-bg); overflow: hidden; box-shadow: var(--h-mock-sh); }
.vform-head { padding: var(--s-3) var(--s-4); background: var(--h-mock-head);
              border-bottom: 1px solid var(--h-mock-line); color: var(--h-fg); }
.vform-body { padding: var(--s-4); display: grid; gap: var(--s-3); }
.vform-row { display: grid; gap: 2px; }
.vform-row span { font-size: .74rem; color: var(--h-dim); }
.vform-row b { font-size: .9rem; color: var(--h-mock-fg); font-weight: 500; }
.vform-sent { margin: 0; font-size: .75rem; color: var(--ok); }
.vform-reply { margin: 0 var(--s-4) var(--s-4); padding: var(--s-3) var(--s-4); border-radius: 10px;
               background: linear-gradient(rgba(124,58,237,.10), rgba(124,58,237,.03));
               border: 1px solid rgba(167,139,250,.30); border-left: 3px solid #a78bfa; }
.vform-reply .who { margin: 0 0 4px; font-size: .74rem; color: var(--h-ai); }
.vform-reply p { margin: 0; font-size: .89rem; line-height: 1.5; color: var(--h-mock-fg); }

/* ── index2: the "your business" sources explain themselves ── */
.ch-frame.is-text { background: none; border-color: var(--line); justify-items: stretch; }
.src-detail { display: grid; gap: var(--s-2); max-width: 54ch; }
.src-detail h4 {
  margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
}
.src-detail h4 + p { margin: 0 0 var(--s-3); font-size: .98rem; line-height: 1.6; }
.src-detail p:last-child { margin-bottom: 0; }
/* the chevron hint applies to both columns now */
.dia-item[data-preview]::after {
  content: ""; width: 7px; height: 7px; margin-left: auto; flex: none;
  border-top: 1.5px solid var(--h-dim); border-right: 1.5px solid var(--h-dim);
  transform: rotate(45deg); opacity: .75;
}
.dia-item[data-preview]:hover::after { border-color: var(--h-accent); }

/* Which build of the site this is (About page, foot). Quiet on purpose: it is
   for us and for anyone reporting a problem, not part of the argument. */
.build-stamp {
  margin: 0; padding: var(--s-5) var(--s-5) var(--s-8);
  text-align: center; font-family: var(--mono); font-size: .76rem;
  letter-spacing: .04em; color: var(--muted);
}

/* ------------------------------------------------------- consent banner -- */

/* The markup is site/pages/_consent-banner.html, on every page. It is here in
 * the page from the start and hidden; .consent-pending on <html> is what
 * reveals it, and analytics.js adds it only once the country answer says this
 * visitor is asked — or the answer failed, which also means asked (C8,
 * 2026-09-26). So:
 *
 *   * no JavaScript  ->  no class, no banner, and no tag either. Correct.
 *   * the banner arrives after the first paint, and moves nothing when it
 *     does: it is position: fixed, so it takes no room in the flow.
 *   * the room it needs arrives with it, as padding at the very foot of the
 *     footer. Growing the page BELOW its last line moves nothing already laid
 *     out — nothing above changes position, the page just gets longer — so a
 *     late banner shifts no layout, and the visitors who are never asked, most
 *     of them, never get the room at all, so there is nothing to collapse.
 *     (The other way round — reserve before paint, collapse for Americans —
 *     shrinks the page, and a visitor already scrolled to the foot, by a link
 *     to #pricing say, would see it jump as the browser pulls the scroll back.)
 *     Answering removes the class, which releases the room after an
 *     interaction, as before.
 *   * the reserved room keeps the footer and the CTA band scrollable clear of
 *     it at any width. Clearing the *hero's* button, which on a short window
 *     lands exactly here, is analytics.js's job: it lifts the banner out of the
 *     way of any call to action on screen. A corner alone cannot do that,
 *     because scrolling moves the buttons through whichever one you pick.
 *
 * Bottom-left, not bottom-centre: the chat launcher the widget draws sits
 * bottom-right, and two floating things in one corner is one too many. */
:root { --consent-room: 132px; }

.consent { display: none; }
.consent-pending .consent {
  display: block;
  position: fixed; z-index: 90;
  left: var(--s-4); bottom: var(--s-4);
  width: min(30rem, calc(100vw - var(--s-5) * 2));
}
/* The room is reserved on the footer rather than on <body> so the footer's own
   background fills it; body padding would leave a strip of page colour under a
   tinted footer, which reads as a rendering bug. */
.consent-pending .site-footer { padding-bottom: calc(var(--s-8) + var(--consent-room)); }

.consent-card {
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  padding: var(--s-4);
  display: grid; gap: var(--s-3);
}
.consent-card p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--muted); }
.consent-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }

/* The step-aside is deliberately NOT eased. An eased move is prettier, and for
   the fifth of a second it lasts the banner is still over the button it is
   getting off — which is the one thing it must never be. It jumps instead. */

/* Wider on a phone, and it needs more reserved room there because the sentence
   wraps onto more lines. */
@media (max-width: 560px) {
  :root { --consent-room: 190px; }
  .consent-pending .consent { left: var(--s-4); right: var(--s-4); width: auto; }
}

/* "Don't count my visits" — site/pages/_consent-footer.html, in the footer's
   legal row. A button, because it acts rather than goes anywhere, dressed as
   the footer's own links so it reads as one of them. The hidden attribute is
   left to do its job: nothing here sets a display, which would override it. */
.consent-optout button {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--muted); cursor: pointer;
}
.consent-optout button:hover { color: var(--fg); text-decoration: underline; }
.consent-optout [role="status"]:focus { outline: none; }