/* ---- 00-tokens.css ---- */
/* ==========================================================================
   AutoVator marketing site
   Built from the files in assets/css/src/ (in name order) by _site-src/build.py
   into assets/css/site.css. Edit the src files, never site.css.

   No inline styles anywhere (style="" attributes are blocked by the
   Content-Security-Policy), so every visual rule lives here.

   The look: black and white, crisp. Black bands (header, page heroes, one band,
   footer), white sections, square-ish corners, heavy type. Green is the action
   colour (main buttons, links, small accents). The logo red is kept for small
   brand marks only (the square before a kicker, the "new" badge). No purple.
   ========================================================================== */

/* ---------- design tokens: light (default) ---------- */
:root {
  color-scheme: light;

  /* paper and ink */
  --paper: #ffffff;          /* page background */
  --paper-2: #f4f4f5;        /* alternate section */
  --surface: #ffffff;        /* cards, forms, panels */
  --surface-2: #fafafa;
  --ink: #09090b;            /* headings */
  --text: #27272a;           /* body copy: 14:1 on paper */
  --muted: #5b5b66;          /* secondary copy: 6.3:1 on paper */
  --line: #e4e4e7;
  --line-2: #efeff1;
  --field-line: #8b8b95;     /* form fields: 3.4:1 on white */

  /* green: the action colour */
  --accent: #15803d;         /* links and small accents on light: 5:1 on paper */
  --accent-strong: #166534;  /* hover */
  --accent-soft: #e8f7ee;    /* tinted backgrounds */
  --accent-softer: #f3fbf6;
  --accent-line: #b9e5c9;
  --primary: #22c55e;        /* main buttons, the same green in every theme */
  --primary-hover: #4ade80;
  --on-primary: #052e16;     /* text on the green button: 6.6:1 */
  --mark: #bbf7d0;           /* highlighter stroke behind a word */
  --mark-ink: #052e16;

  /* the logo red: small brand marks only */
  --brand-red: #e63b2e;

  /* icon tiles (cards, menus): a black square with a green icon */
  --tile-bg: #09090b;
  --tile-ink: #4ade80;

  /* the black bands (header, heroes, one section, footer) */
  --band: #09090b;
  --band-2: #141417;
  --band-line: #27272a;
  --band-text: #e4e4e7;
  --band-muted: #a1a1aa;
  --band-accent: #4ade80;
  --grid-line: rgba(255, 255, 255, .055);   /* the faint grid drawn in the hero */

  /* status colours used by small labels */
  --ok: #15803d;   --ok-bg: #e8f7ee;
  --warn: #9a5b00; --warn-bg: #fff1d6;
  --info: #1d5fbf; --info-bg: #e6eefb;

  /* the callout note */
  --note-bg: #f4f4f5;
  --note-ink: #27272a;
  --note-line: #e4e4e7;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 12px 28px -16px rgba(0, 0, 0, .25);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .06), 0 28px 56px -26px rgba(0, 0, 0, .38);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --max: 1200px;
  --narrow: 760px;
  --gutter: clamp(16px, 4.5vw, 40px);
  --header-h: 68px;
  --section: clamp(64px, 8vw, 120px);
}

/* ---------- design tokens: dark ---------- */
/* Follows the device setting, unless the visitor picked a theme with the switch in the header
   (assets/js/theme.js sets data-theme on <html> before the page paints). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #111113;
    --paper-2: #18181b;
    --surface: #18181b;
    --surface-2: #1f1f23;
    --ink: #fafafa;
    --text: #d4d4d8;
    --muted: #a1a1aa;
    --line: #2e2e33;
    --line-2: #232327;
    --field-line: #63636e;
    --accent: #4ade80;
    --accent-strong: #86efac;
    --accent-soft: #11291b;
    --accent-softer: #0f1f16;
    --accent-line: #1f5133;
    --mark: #14532d;
    --mark-ink: #f0fdf4;
    --tile-bg: #232327;
    --band: #050506;
    --band-2: #101012;
    --band-line: #26262a;
    --note-bg: #1f1f23;
    --note-ink: #e4e4e7;
    --note-line: #2e2e33;
    --ok: #6fd6a0; --ok-bg: #15301f;
    --warn: #f0c46b; --warn-bg: #33270d;
    --info: #8db7f5; --info-bg: #15233a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -14px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 30px 60px -24px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111113;
  --paper-2: #18181b;
  --surface: #18181b;
  --surface-2: #1f1f23;
  --ink: #fafafa;
  --text: #d4d4d8;
  --muted: #a1a1aa;
  --line: #2e2e33;
  --line-2: #232327;
  --field-line: #63636e;
  --accent: #4ade80;
  --accent-strong: #86efac;
  --accent-soft: #11291b;
  --accent-softer: #0f1f16;
  --accent-line: #1f5133;
  --mark: #14532d;
  --mark-ink: #f0fdf4;
  --tile-bg: #232327;
  --band: #050506;
  --band-2: #101012;
  --band-line: #26262a;
  --note-bg: #1f1f23;
  --note-ink: #e4e4e7;
  --note-line: #2e2e33;
  --ok: #6fd6a0; --ok-bg: #15301f;
  --warn: #f0c46b; --warn-bg: #33270d;
  --info: #8db7f5; --info-bg: #15233a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -14px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 30px 60px -24px rgba(0, 0, 0, .7);
}

/* ---------- the dark scope ---------- */
/* The header, the page heroes, the black band, the footer and anything marked .on-dark are black in
   both themes. They re-map the tokens, so every component inside (kickers, buttons, notes, lists, forms)
   turns light-on-black by itself. Product screenshots keep their own light colours (40-mockups.css). */
.site-header, .hero, .section-band, .section-dark, .site-footer, .on-dark {
  color-scheme: dark;
  --paper: var(--band);
  --paper-2: var(--band-2);
  --surface: #141417;
  --surface-2: #1b1b1f;
  --ink: #ffffff;
  --text: #d4d4d8;
  --muted: #a1a1aa;
  --line: #2a2a2f;
  --line-2: #1f1f23;
  --field-line: #5b5b66;
  --accent: #4ade80;
  --accent-strong: #86efac;
  --accent-soft: rgba(74, 222, 128, .12);
  --accent-softer: rgba(74, 222, 128, .06);
  --accent-line: rgba(74, 222, 128, .35);
  --mark: #14532d;
  --mark-ink: #ffffff;
  --tile-bg: #1f1f23;
  --note-bg: #141417;
  --note-ink: #e4e4e7;
  --note-line: #2a2a2f;
  --ok: #6fd6a0; --ok-bg: #15301f;
  --warn: #f0c46b; --warn-bg: #33270d;
  --info: #8db7f5; --info-bg: #15233a;
  background-color: var(--band);
  color: var(--text);
}

/* ---- 10-base.css ---- */
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
svg { flex: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--mark); color: var(--mark-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--primary); color: var(--on-primary); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 700; transition: top .15s; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- type: heavy, tight headings; calm body ---------- */
h1, h2, h3, h4 { color: var(--ink); margin: 0; text-wrap: balance; }
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
h1 { font-size: clamp(2.35rem, 1.4rem + 3.6vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.9rem); letter-spacing: -0.03em; line-height: 1.08; }
h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.012em; }
h4 { font-size: 1rem; font-weight: 700; line-height: 1.35; }
h1 em, h2 em, .display em { font-style: normal; color: var(--accent); }
p + p { margin-top: 1em; }
p, li, dd, dt, td, th, summary, figcaption, blockquote, .lede { text-wrap: pretty; }
strong, b { font-weight: 650; color: var(--ink); }
small { font-size: .875em; }
.lede { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); line-height: 1.6; color: var(--text); max-width: 60ch; }
.muted { color: var(--muted); }
.center { text-align: center; }
.center .lede, .lede.center { margin-left: auto; margin-right: auto; }
.nowrap { white-space: nowrap; }
.prose-link, .hl, :where(main) :where(p, li, dd) a:not([class]), .faq-a a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-line);
  transition: text-decoration-color .15s, color .15s;
}
.prose-link:hover, .hl:hover, :where(main) :where(p, li, dd) a:not([class]):hover, .faq-a a:hover { color: var(--accent-strong); text-decoration-color: currentColor; }

/* a word marked with a highlighter (one per page at most) */
.mark, .text-gradient {
  color: inherit;
  background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 88% / 100% 30%;
  padding: 0 .06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* small label above a heading: uppercase, spaced, with the red brand square */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1.3;
  color: var(--muted);
  margin-bottom: 18px;
}
.kicker::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--brand-red); }
.center .kicker, .kicker.center { justify-content: center; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }
.section { padding: var(--section) 0; }
.section-tight { padding: clamp(36px, 5vw, 64px) 0; }
.section-soft, .section-warm { background: var(--paper-2); }
.section-white { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* the black band: the dark scope (00-tokens.css) does the colours, a faint grid gives it texture */
.section-band, .section-dark { position: relative; border-top: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line); }
.section-band .section-head p, .section-dark .section-head p { color: var(--text); }
/* two plain sections in a row share one gap; a plain section after a coloured one keeps its own */
.section:not([class*="section-"]) + .section:not([class*="section-"]) { padding-top: 0; }
.section-soft + .section-soft, .section-warm + .section-warm { padding-top: 0; }

.stack > * + * { margin-top: 18px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.center .actions, .actions.center { justify-content: center; }

.grid { display: grid; gap: clamp(14px, 1.8vw, 20px); }
.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)); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split.reverse > :first-child { order: 2; }
.split.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split.top { align-items: start; }
.split h2 + .lede, .split h2 + p { margin-top: 20px; }
.split .check-list, .split .feature-list { margin-top: 28px; }
.split .link-arrow { margin-top: 26px; }

/* ---------- buttons: square-ish, green for the main action ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: .97rem;
  line-height: 1.2;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn svg { width: 18px; height: 18px; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 38px; padding: 7px 14px; font-size: .9rem; }
.btn-lg { min-height: 52px; padding: 13px 24px; font-size: 1.02rem; }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: inset 0 -2px 0 rgba(5, 46, 22, .18); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost, .btn-outline-light { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover, .btn-outline-light:hover { border-color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { opacity: .88; }
.btn.is-loading { opacity: .75; pointer-events: none; }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); text-decoration: none; }
.link-arrow::after { content: "\2192"; transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow:hover { color: var(--accent-strong); }

/* ---------- reveal on scroll ---------- */
/* Content is always visible. Only a short, gentle rise is added when an element first
   scrolls into view (assets/js/site.js), and never for people who prefer less motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both; }
  .js .rise.d1 { animation-delay: .07s; }
  .js .rise.d2 { animation-delay: .14s; }
  .js .rise.d3 { animation-delay: .21s; }
}
@keyframes rise { from { transform: translateY(14px); opacity: .001; } to { transform: none; opacity: 1; } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .split, .split.even { grid-template-columns: minmax(0, 1fr); }
  .split.reverse > :first-child { order: 0; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  h1 { letter-spacing: -0.03em; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .actions .btn { flex: 1 1 auto; }
  .btn-lg { min-height: 50px; padding: 12px 20px; }
}

/* ---- 20-chrome.css ---- */
/* ---------- logo: red & black on light, red & warm white on dark ---------- */
/* The header and the footer are black in both themes, so they always show the dark-mode logo. */
.logo { display: block; width: auto; }
.logo-pic { display: contents; }
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}
.site-header .logo-light, .site-footer .logo-light { display: none; }
.site-header .logo-dark, .site-footer .logo-dark { display: block; }

/* ---------- header: a black bar ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--band-line);
}
.site-header.scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7); }
.header-inner { display: flex; align-items: center; gap: 22px; height: var(--header-h); }
.brand { display: flex; align-items: center; flex: none; padding: 6px 0; margin-right: 10px; }
.brand .logo { height: 30px; }
.primary-nav { display: flex; align-items: center; flex: 1; gap: 16px; min-width: 0; order: 1; }
.header-inner > .theme-toggle { order: 2; }
.nav-list { display: flex; align-items: center; gap: 0; margin: 0; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  transition: color .15s, background-color .15s;
}
.nav-link:hover, .nav-item.open > .nav-link { color: var(--ink); background: rgba(255, 255, 255, .06); }
.nav-link[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.nav-link .chev { width: 15px; height: 15px; transition: transform .2s; opacity: .7; }
.nav-item.open > .nav-link .chev { transform: rotate(180deg); }
.nav-cta { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-login { font-weight: 600; font-size: .95rem; color: var(--text); padding: 8px 12px; border-radius: var(--radius-sm); }
.nav-login:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }

.theme-toggle {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  transition: border-color .15s, background-color .15s;
}
.js .theme-toggle { display: grid; }
.theme-toggle:hover { border-color: var(--muted); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}

/* dropdown panels (dark, like the bar they hang from) */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  width: 400px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility 0s .16s;
}
.mega::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.mega-4 { width: min(1160px, calc(100vw - 48px)); left: -140px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 10px; padding: 18px; }
.nav-item.open > .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (min-width: 1025px) {
  /* the mouse opens a menu by hovering; the keyboard opens it with Enter or Space on its button (.open) */
  .nav-item.has-menu:hover > .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-item.has-menu:hover > .nav-link { color: var(--ink); background: rgba(255, 255, 255, .06); }
  .nav-item.has-menu.dismissed > .mega { opacity: 0; visibility: hidden; transform: translateY(6px); transition-delay: 0s, 0s, .16s; }
  /* the wide Product menu lines up with the header, so it never runs off a small laptop screen */
  .header-inner { position: relative; }
  .nav-item:has(> .mega-4) { position: static; }
  .mega-4 { top: calc(100% - 2px); left: 0; right: 0; margin-inline: auto; width: min(1160px, 100%); }
}
.mega-group { display: flex; flex-direction: column; gap: 2px; }
.mega-title { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 6px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.mega a { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: var(--radius); transition: background-color .12s; }
.mega a:hover { background: rgba(255, 255, 255, .05); }
.mega a strong { display: block; font-size: .93rem; font-weight: 650; color: var(--ink); line-height: 1.3; }
.mega a > span:last-child > span { display: block; font-size: .83rem; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.mega a .new-badge { margin-left: 6px; }
.mi { flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--tile-bg); color: var(--tile-ink); border: 1px solid var(--line); }
.mi svg { width: 16px; height: 16px; }
.mi .app-ico { width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: .7rem; line-height: 1; }
.mega a:has(.app-ico) .mi { border: 0; background: none; }
/* a small red "New" label for the newest products */
.new-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; background: var(--brand-red); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; line-height: 1.5; }

/* mobile menu button: big and easy to tap */
.nav-toggle { display: none; position: relative; flex: none; width: 48px; height: 48px; margin-left: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .04); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { position: absolute; left: 13px; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s, opacity .2s, top .2s; content: ""; }
.nav-toggle span { top: 22px; }
.nav-toggle span::before { left: 0; top: -7px; }
.nav-toggle span::after { left: 0; top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* between a laptop and a small desktop the bar drops "Use cases" (it is in the Product menu and the footer) */
@media (min-width: 1025px) and (max-width: 1180px) {
  .nav-item.nav-uc { display: none; }
  .nav-link { padding-inline: 10px; }
}

@media (max-width: 1024px) {
  :root { --header-h: 64px; }
  .brand .logo { height: 26px; }
  .nav-toggle { display: block; order: 3; }
  .header-inner { gap: 10px; }
  .header-inner > .theme-toggle { margin-left: auto; width: 48px; height: 48px; }
  .js .header-inner > .nav-toggle { margin-left: 0; }
  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 49;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 32px;
    background: var(--band);
    border-top: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .18s, transform .18s, visibility 0s .18s;
  }
  .nav-open .primary-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-open { overflow: hidden; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-item.nav-uc { display: block; }
  .nav-link { width: 100%; min-height: 56px; justify-content: space-between; padding: 14px 4px; border-radius: 0; font-size: 1.1rem; color: var(--ink); }
  .nav-link:hover, .nav-item.open > .nav-link { background: none; }
  .nav-link[aria-current="page"] { box-shadow: none; color: var(--accent); }
  .mega, .mega-4 { position: static; width: auto; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 14px; background: transparent; grid-template-columns: minmax(0, 1fr); }
  .mega::before { display: none; }
  .nav-item.open > .mega { display: block; }
  .nav-item.open > .mega-4 { display: grid; }
  .mega-title { padding-left: 4px; margin-top: 10px; }
  .mega a { padding: 10px 4px; }
  .nav-cta { margin: 24px 0 0; flex-direction: column; align-items: stretch; gap: 10px; }
  .nav-cta .btn, .nav-cta .nav-login { width: 100%; min-height: 52px; justify-content: center; text-align: center; display: flex; align-items: center; border: 1px solid var(--line); font-size: 1.02rem; }
  .nav-cta .btn-primary { border-color: transparent; }
}
@media (max-width: 640px) {
  .brand .logo { height: 25px; }
}
@media (max-width: 380px) {
  .brand .logo { height: 21px; }
  .header-inner { gap: 8px; }
  .header-inner > .theme-toggle, .nav-toggle { width: 46px; height: 46px; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { left: 12px; }
  .nav-toggle span { top: 21px; }
  .nav-toggle span::before { left: 0; }
  .nav-toggle span::after { left: 0; }
}

/* ---------- breadcrumbs ---------- */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 30px; padding: 0; list-style: none; font-size: .84rem; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- footer: black, with the link columns on a ruled grid ---------- */
.site-footer { padding: clamp(48px, 6vw, 80px) 0 26px; font-size: .92rem; border-top: 1px solid var(--band-line); }
.footer-brand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 40px; align-items: center; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.footer-brand .logo { height: 30px; }
.footer-brand p { color: var(--muted); max-width: 46ch; font-size: .92rem; line-height: 1.55; }
.footer-contact { display: grid; gap: 4px; text-align: right; font-size: .9rem; }
.site-footer .footer-contact a { color: var(--ink); font-weight: 600; text-decoration: none; }
.site-footer .footer-contact a:hover { color: var(--accent); }
.footer-contact li:last-child { color: var(--muted); font-size: .85rem; }
.footer-top { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 28px; padding-top: 32px; }
.footer-col h3 { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.f-logo { display: inline-block; }
.footer-links { display: grid; gap: 0; }
.footer-links a { display: inline-block; padding: 4px 0; font-size: .9rem; }
.site-footer .footer-col a { color: var(--text); text-decoration: none; }
.site-footer .footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .84rem; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 1024px) {
  .footer-brand { grid-template-columns: minmax(0, 1fr); }
  .footer-contact { text-align: left; }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .footer-links a { padding: 6px 0; }
  .footer-brand .logo { height: 26px; }
}

/* ---- 30-components.css ---- */
/* ==========================================================================
   Shared building blocks (layout.py renders most of them)
   ========================================================================== */

/* ---------- hero: a black band with a faint grid ---------- */
/* .hero is in the dark scope (00-tokens.css): its tokens are light-on-black in both themes. */
.hero { position: relative; isolation: isolate; padding: clamp(36px, 5vw, 72px) 0 clamp(64px, 8vw, 112px); border-bottom: 1px solid var(--band-line); overflow: clip; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 60%, transparent 100%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.hero-copy { max-width: 620px; }
.hero-copy h1 { margin-bottom: 24px; }
/* inner pages carry longer titles than the home page: a calmer size keeps them to three or four lines */
.hero h1 { font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.75rem); }
.hero-copy .lede { margin-bottom: 4px; color: var(--text); }
.hero-center { text-align: center; }
.hero-center .hero-copy { max-width: 860px; margin: 0 auto; }
.hero-center .lede { margin-left: auto; margin-right: auto; }
.hero-center .actions, .hero-center .hero-proof { justify-content: center; }
.hero-visual { position: relative; min-width: 0; isolation: isolate; }
/* the screenshot sits on a ruled panel, offset like a print on a light table */
.hero .hero-visual::before {
  content: "";
  position: absolute;
  inset: 22px -16px -16px 22px;
  border-radius: var(--radius-lg);
  background: var(--band-2);
  border: 1px solid var(--line);
  z-index: -1;
}
.hero-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-size: .92rem; color: var(--muted); }
@media (min-width: 1025px) { .hero-grid .hero-proof { flex-direction: column; gap: 8px; } }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof svg { width: 17px; height: 17px; color: var(--accent); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 5px 14px 5px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .15s;
}
.pill:hover { border-color: var(--muted); }
.pill b { padding: 2px 8px; border-radius: 3px; background: var(--brand-red); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- section heading ---------- */
.section-head { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.section-head p { margin-top: 18px; font-size: 1.1rem; color: var(--text); max-width: 62ch; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center p { margin-left: auto; margin-right: auto; }
.section-head.center .kicker { justify-content: center; }
/* heading on the left, a short note on the right (for wide screens), over a hairline */
.section-head.wide { max-width: none; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.section-head.wide p { margin-top: 0; }
@media (max-width: 860px) { .section-head.wide { grid-template-columns: minmax(0, 1fr); } }

/* ---------- cards: thin border, square-ish, a black icon tile ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .18s, box-shadow .18s;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text); font-size: .98rem; }
.card .link-arrow { margin-top: auto; padding-top: 20px; font-size: .95rem; }
.card.hoverable:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.card-link-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link-cover:focus-visible { outline: none; }
.card:has(.card-link-cover:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.card-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; margin-bottom: 20px; background: var(--tile-bg); color: var(--tile-ink); }
.card-icon svg { width: 20px; height: 20px; }
.card-icon.ink { background: var(--ink); color: var(--paper); }
.card-icon.app { background: none; }
.card-icon.app .app-ico { width: 42px; height: 42px; border-radius: var(--radius-sm); font-size: .8rem; }

/* plain list of features with thin rules between them: calmer than a wall of cards */
.ruled { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.ruled.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ruled > * { padding: 24px 0 28px; border-top: 1px solid var(--line); }
.ruled h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ruled h3 svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: var(--radius-sm); background: var(--tile-bg); color: var(--tile-ink); }
.ruled p { color: var(--text); font-size: .98rem; }
.ruled a.link-arrow { margin-top: 12px; font-size: .95rem; }
.ruled h3 a::after { content: "\2192"; display: inline-block; margin-left: 8px; color: var(--accent); transition: transform .2s; }
.ruled h3 a:hover::after { transform: translateX(3px); }
@media (max-width: 760px) {
  .ruled { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ruled:not(.two):has(> :last-child:nth-child(odd)) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ruled, .ruled.two { grid-template-columns: minmax(0, 1fr); }
  /* shorter on phones: the title is the link, with its own arrow */
  .ruled > * { padding: 16px 0 18px; }
  .ruled h3 { margin-bottom: 4px; font-size: 1.08rem; }
  .ruled p { font-size: .96rem; }
  .ruled a.link-arrow { display: none; }
}

/* features with a small icon */
.feature-list { display: grid; gap: 18px; }
.feature-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; }
.feature-list .fl-ico { width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--tile-bg); color: var(--tile-ink); margin-top: 1px; }
.feature-list .fl-ico svg { width: 16px; height: 16px; }
.feature-list strong { display: block; color: var(--ink); font-size: 1.02rem; }
.feature-list span { display: block; color: var(--text); font-size: .97rem; margin-top: 2px; }

/* ticks: a small green square with a dark tick */
.check-list { display: grid; gap: 12px; }
.check-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.check-list li { position: relative; padding-left: 32px; }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052e16' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
@media (max-width: 640px) { .check-list.two { grid-template-columns: minmax(0, 1fr); } }

/* numbered steps: mono numbers over a heavy rule, across (wide) or down (narrow) */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.5vw, 36px); counter-reset: step; margin: 0; padding: 0; list-style: none; }
.steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { position: relative; padding: 0; counter-increment: step; border-top: 2px solid var(--line); }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  width: max-content;
  margin: -2px 0 18px;
  padding-top: 14px;
  border-top: 2px solid var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .04em;
  color: var(--accent);
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--text); font-size: .98rem; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 921px) {
    .steps { grid-template-rows: auto auto 1fr; }
    .step { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  }
}
@media (max-width: 920px) {
  .steps, .steps.three { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .step { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 8px; padding: 0 0 24px; }
  .step::before { grid-row: 1 / span 2; margin-bottom: 0; }
  .step h3 { padding-top: 12px; }
  .step:last-child { padding-bottom: 0; }
}

/* ---------- facts row (real numbers only) ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.stat { padding: 28px 24px 28px 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line); }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(2.3rem, 1.6rem + 2.2vw, 3.4rem); font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -.04em; }
.stat span { display: block; margin-top: 10px; font-size: .95rem; color: var(--muted); max-width: 22ch; }
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- callout note ---------- */
.note {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: var(--note-bg);
  color: var(--note-ink);
  border: 1px solid var(--note-line);
  border-left: 3px solid var(--accent);
  font-size: .98rem;
}
.note svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--accent); }
.note strong { color: inherit; }
.note.tilt { transform: none; }

/* a short quote or a line someone actually says on a call */
.said { position: relative; padding: 2px 0 2px 22px; border-left: 3px solid var(--ink); font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.45; color: var(--ink); }
.said cite { display: block; margin-top: 8px; font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: .9rem; color: var(--muted); letter-spacing: 0; }

/* ---------- integration chips ---------- */
.strip-label { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.center .strip-label, .strip-label.center { text-align: center; }
.logo-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.center .logo-strip, .logo-strip.center { justify-content: center; }
.logo-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); font-size: .92rem; font-weight: 600; color: var(--ink); transition: border-color .15s; }
.logo-chip:hover { border-color: var(--ink); }
@media (max-width: 640px) {
  .logo-strip { gap: 8px; }
  .logo-chip { gap: 8px; padding: 5px 11px 5px 5px; font-size: .86rem; }
  .logo-chip .app-ico { width: 24px; height: 24px; border-radius: 5px; }
}
.app-ico { width: 26px; height: 26px; border-radius: 5px; display: grid; place-items: center; font-size: .7rem; font-weight: 750; color: #fff; flex: none; letter-spacing: .02em; }
.ico-gcal { background: #4285f4; }
.ico-sheets { background: #0f9d58; }
.ico-supa { background: #1f9e6e; }
.ico-noco { background: #0f766e; }
.ico-mysql { background: #00758f; }
.ico-hub { background: #ff7a59; }
.ico-air { background: #2d7ff9; }
.ico-wp { background: #21759b; }
.ico-api { background: #3f3f46; }
.ico-cal { background: #15803d; }
.ico-mail { background: #0e7490; }
.ico-crm { background: #09090b; }
.ico-wa { background: #1fa855; }

/* ---------- product screenshots ---------- */
.shot { position: relative; margin: 0; min-width: 0; }
.shot-caption { margin-top: 14px; font-size: .9rem; color: var(--muted); text-align: center; }
/* Screenshots are laid out at a fixed design width and scaled down as a whole on small screens
   (site.js), like a real picture, instead of squeezing the app layout. Without JS they scroll. */
.aw-fit { position: relative; width: 100%; overflow-x: auto; overflow-y: visible; border-radius: 12px; }
.js .aw-fit { overflow: visible; }
.js .aw-fit.scaled { overflow: hidden; }
.aw-fit > .app-window { min-width: var(--aw-w, 600px); transform-origin: 0 0; }
.js .aw-fit.scaled > .app-window { width: var(--aw-w, 600px); transform: scale(var(--aw-s, 1)); }

/* ---------- product tour tabs: a segmented bar ---------- */
.tour-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 auto 44px; width: fit-content; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); }
.tour-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: var(--radius-sm); background: transparent; font-weight: 650; font-size: .94rem; color: var(--muted); transition: background-color .15s, color .15s; }
.tour-tab svg { width: 17px; height: 17px; }
.tour-tab:hover { color: var(--ink); }
.tour-tab[aria-selected="true"] { background: var(--band); color: #fff; box-shadow: var(--shadow-sm); }
.tour-tab[aria-selected="true"] svg { color: var(--band-accent); }
.tour-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.tour-panel h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 16px; }
.tour-panel p { margin-bottom: 18px; }
@media (max-width: 920px) {
  .tour-panel { grid-template-columns: minmax(0, 1fr); }
  .tour-tabs { justify-content: center; flex-wrap: wrap; }
  .tour-tab { flex: none; padding: 8px 13px; }
}

/* ---------- comparison table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.compare { width: 100%; min-width: 720px; font-size: .97rem; }
.compare th, .compare td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.compare thead th { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--band-muted); background: var(--band); border-bottom: 0; }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare td:first-child, .compare tbody th { font-weight: 650; color: var(--ink); }
.compare.ours-last td:last-child { background: var(--accent-softer); }
.compare.ours-last thead th:last-child { color: var(--band-accent); }
.compare td:last-child strong { color: var(--ink); font-weight: 700; }
/* on phones a comparison reads better as one small card per row than as a sideways-scrolling table */
@media (max-width: 640px) {
  .table-wrap.stack { overflow: visible; border: 0; border-radius: 0; background: none; }
  .compare.stack { min-width: 0; }
  .compare.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare.stack, .compare.stack tbody, .compare.stack tr, .compare.stack tbody th, .compare.stack td { display: block; }
  .compare.stack tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .compare.stack tr + tr { margin-top: 10px; }
  .compare.stack tbody th { padding: 12px 14px 10px; border: 0; font-size: 1rem; background: var(--paper-2); }
  .compare.stack td { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 12px; padding: 8px 14px; border: 0; border-top: 1px solid var(--line-2); font-size: .94rem; line-height: 1.45; }
  .compare.stack td::before { content: attr(data-label); font-size: .78rem; font-weight: 650; color: var(--muted); line-height: 1.5; }
  .compare.stack tbody tr:last-child td { border-top: 1px solid var(--line-2); }
}

/* ---------- use case blocks ---------- */
.usecase { display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.uc-head { display: flex; align-items: center; gap: 14px; }
.uc-head .card-icon { margin: 0; flex: none; }
.uc-quote { margin: 0; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--accent-softer); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .95rem; color: var(--ink); }
.usecase .link-arrow { margin-top: auto; }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.faq-layout > :first-child { position: sticky; top: calc(var(--header-h) + 28px); }
.faq-layout h2 { margin-bottom: 16px; }
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -.01em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center; border: 1px solid var(--line); font-weight: 500; font-size: 1.15rem; line-height: 1; color: var(--ink); transition: transform .2s, background-color .2s, color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.faq summary:hover { color: var(--accent); }
.faq-a { padding: 0 44px 22px 0; color: var(--text); }
.faq-a ul { margin: 10px 0 0; padding-left: 20px; }
@media (max-width: 860px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-layout > :first-child { position: static; }
  .faq-a { padding-right: 0; }
}

/* ---------- call to action band: a ruled panel with the green button ---------- */
.cta-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 28px 48px;
  align-items: center;
  padding: clamp(32px, 5vw, 64px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
/* a few grid squares in the corner, the same texture as the hero */
.cta-band::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 320px;
  height: 100%;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
  mask-image: linear-gradient(90deg, transparent, #000);
  pointer-events: none;
}
.cta-band::before { content: ""; position: absolute; left: clamp(32px, 5vw, 64px); top: 0; width: 64px; height: 3px; background: var(--brand-red); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem); }
.cta-band p { margin-top: 14px; color: var(--muted); max-width: 56ch; text-wrap: pretty; }
.cta-band .actions { margin-top: 0; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 860px) {
  .cta-band { grid-template-columns: minmax(0, 1fr); }
  .cta-band .actions { justify-content: flex-start; }
  .cta-band::after { width: 50%; }
}

/* ---------- forms (contact page) ---------- */
.form-card { padding: clamp(22px, 4vw, 40px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 18px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 650; font-size: .95rem; color: var(--ink); }
.field label .opt { font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field ::placeholder { color: var(--muted); opacity: 1; }
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b95' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--field-line) 45%, var(--ink)); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); }
.field [aria-invalid="true"] { border-color: #c2412b; }
.field-hint { font-size: .85rem; color: var(--muted); }
.field-error { font-size: .875rem; color: #b23a25; min-height: 0; }
:root[data-theme="dark"] .field-error { color: #ff9a85; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field-error { color: #ff9a85; } }
.checkbox { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; }
.checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--primary); flex: none; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; }
.form-alert { display: none; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: .97rem; }
.form-alert.show { display: flex; }
.form-alert.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--accent-line); }
.form-alert.err { background: #fdebe6; color: #9c2f1c; border: 1px solid #f3c2b6; }
:root[data-theme="dark"] .form-alert.err { background: #3a1912; color: #ffb3a3; border-color: #5c2a1e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-alert.err { background: #3a1912; color: #ffb3a3; border-color: #5c2a1e; } }
.spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- prose (terms page) ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); margin: 2.2em 0 .7em; }
.prose h3 { margin: 1.8em 0 .6em; }
.prose p, .prose li { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.3em; margin: .8em 0; }
.prose li + li { margin-top: .35em; }
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 28px); font-size: .93rem; border-left: 2px solid var(--line); padding-left: 16px; }
.toc a { display: block; padding: 5px 0; color: var(--muted); }
.toc a:hover { color: var(--accent); }
@media (max-width: 860px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
}

/* ---------- 404 ---------- */
.notfound { min-height: 56vh; display: grid; place-items: center; text-align: center; padding: var(--section) 0; }
.notfound .display { font-size: clamp(5rem, 3rem + 10vw, 9rem); line-height: 1; color: var(--accent); }

/* ---------- tags (small status labels outside screenshots) ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 4px; font-size: .78rem; font-weight: 700; background: var(--paper-2); color: var(--text); white-space: nowrap; }
.tag.green, .tag.brand { background: var(--accent-soft); color: var(--accent); }
.tag.blue { background: var(--info-bg); color: var(--info); }
.tag.amber { background: var(--warn-bg); color: var(--warn); }
.tag.violet { background: var(--paper-2); color: var(--text); }

/* ---------- responsive hero ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid > .hero-visual { width: 100%; max-width: 680px; margin-inline: auto; }
  .hero-copy { max-width: 700px; }
  .hero .hero-visual::before { inset: 16px -10px -12px 16px; }
}
@media (max-width: 640px) {
  .hero { padding-top: 24px; }
  .hero::before { background-size: 44px 44px; }
  .hero .hero-visual::before { inset: 12px -6px -10px 10px; }
  .stat { padding: 22px 14px 22px 0; }
  .stat + .stat { padding-left: 14px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ---------- small helpers used by several pages ---------- */
.group-title { font-size: 1.15rem; margin: 44px 0 16px; }
.group-title:first-of-type { margin-top: 0; }
.actions.centered { justify-content: center; }
ul.logo-strip { list-style: none; padding: 0; }
.h3-size { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); margin-bottom: 6px; }
.uc-head .app-ico { width: 36px; height: 36px; border-radius: var(--radius-sm); font-size: .75rem; }
.kicker .app-ico { width: 22px; height: 22px; border-radius: 4px; font-size: .6rem; }
.kicker:has(.app-ico)::before { display: none; }
.logo-chip .mi { width: 28px; height: 28px; border-radius: 5px; }
.logo-chip .mi svg { width: 15px; height: 15px; }
.usecase p:last-child { margin-bottom: 0; }
/* the "keep exploring" row: on phones, compact rows instead of four tall cards */
@media (max-width: 640px) {
  .related .card { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 2px 14px; padding: 16px 18px; }
  .related .card:not(:has(.card-icon)) { grid-template-columns: minmax(0, 1fr); }
  .related .card-icon { grid-row: 1 / span 2; width: 38px; height: 38px; margin: 0; }
  .related .card h3 { margin: 0; font-size: 1.05rem; }
  .related .card p { font-size: .94rem; }
  .related .card .link-arrow { display: none; }
  .related .card h3::after { content: "\2192"; margin-left: 8px; color: var(--accent); }
  .related .card .card-icon.app .app-ico { width: 38px; height: 38px; font-size: .74rem; }
}
/* the closing CTA band follows a plain section: one gap, not two */
.related + .section-tight, .ai-more + .section-tight, .section:not([class*="section-"]) + .section-tight { padding-top: 0; }
.notfound .lede { margin-left: auto; margin-right: auto; }

/* design widths of the product screenshots (mockups.window(w=...)) */
.aw-w520 { --aw-w: 520px; } .aw-w560 { --aw-w: 560px; } .aw-w600 { --aw-w: 600px; } .aw-w640 { --aw-w: 640px; }
.aw-w680 { --aw-w: 680px; } .aw-w720 { --aw-w: 720px; } .aw-w760 { --aw-w: 760px; } .aw-w800 { --aw-w: 800px; }
.aw-w880 { --aw-w: 880px; } .aw-w960 { --aw-w: 960px; }
.ruled h3 a { color: inherit; }
.ruled h3 a:hover { color: var(--accent); }

/* ---- 40-mockups.css ---- */
/* ==========================================================================
   Product screenshots: HTML recreations of the customer app (_site-src/mockups.py)

   A screenshot is a picture of the app, so it keeps the app's own look in both site themes:
   a white app, one blue accent, a dark active menu item, compact 13px type.
   Everything here is scoped to .app-window, .float-card, .aw-phone, .mock and the .aw-fit wrapper.

   1. The light "island": app colours, set as local tokens
   2. Frame: wrapper, window, browser bar, dark-site outline
   3. App menu (full, and folded to an icon rail)
   4. Screen: title row, buttons, tags, panels, lists, forms
   5. Pieces used by single screens (transcript, calendar, flow map, templates...)
   6. Float cards
   7. Phones
   ========================================================================== */

/* ---------- 1. the light island ---------- */
/* Site rules that leak in (b, strong, .muted...) read these tokens, so they stay app-coloured in dark mode too. */
.app-window, .float-card, .aw-phone {
  color-scheme: light;
  --ink: #0f172a;
  --text: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --line: #e2e8f0;
  --line-2: #eef2f6;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --paper: #f8fafc;
  --paper-2: #f1f5f9;
  --accent: #2563eb;          /* the app's one accent */
  --accent-strong: #1d4ed8;
  --accent-soft: #eff6ff;
  --accent-softer: #f5f9ff;
  --accent-line: #bfdbfe;
  --nav-on: #1f2937;          /* active menu item */
  --ok: #15803d; --ok-bg: #ecfdf3; --ok-line: #bbf7d0;
  --warn: #b45309; --warn-bg: #fffbeb;
  --info: #1d4ed8; --info-bg: #eff6ff;
  --danger: #dc2626; --danger-bg: #fef2f2; --danger-line: #fecaca;
  --win-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 24px 48px -22px rgba(15, 23, 42, .3);
  --win-shadow-dark: 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .45), 0 40px 80px -28px rgba(0, 0, 0, .9);
}

/* ---------- 2. frame ---------- */
/* site.js scales a window that is wider than its column (30-components.css). The scaled wrapper
   only needs to stop sideways overflow: clip with a margin so the window shadow still shows. */
.js .aw-fit.scaled { overflow: clip; overflow-clip-margin: 48px; }

.app-window {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid #dde3ea;
  border-radius: 12px;
  box-shadow: var(--win-shadow);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--text);
  text-align: left;
  letter-spacing: 0;
}
:root[data-theme="dark"] .app-window, :root[data-theme="dark"] .float-card { border-color: #e2e8f0; box-shadow: var(--win-shadow-dark); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-window, :root:not([data-theme="light"]) .float-card { border-color: #e2e8f0; box-shadow: var(--win-shadow-dark); }
}

/* the browser bar */
.app-window .aw-bar { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.app-window .aw-dots { display: flex; gap: 6px; flex: none; }
.app-window .aw-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d5dbe3; }
.app-window .aw-url {
  flex: 0 1 300px;
  margin: 0 auto;
  padding: 2px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 11px;
  line-height: 16px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-window .aw-dots + .aw-url { transform: translateX(-24px); }   /* centred on the window, not on the space after the dots */
.app-window .aw-body { display: flex; align-items: stretch; }
.app-window .aw-main { flex: 1; min-width: 0; padding: 16px 18px 20px; }
.app-window .aw-main > * + * { margin-top: 12px; }

/* ---------- 3. app menu ---------- */
.app-window .aw-side { flex: none; width: 160px; padding: 12px 8px; background: var(--surface-2); border-right: 1px solid var(--line-2); }
.app-window .aw-brand { display: flex; align-items: center; gap: 8px; padding: 2px 6px 12px; font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.app-window .aw-brand i { position: relative; flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--accent); }
.app-window .aw-brand i::after { content: ""; position: absolute; inset: 5px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; }
.app-window .aw-nav { display: flex; flex-direction: column; gap: 1px; }
.app-window .aw-nav span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 15px;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
}
.app-window .aw-nav span::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--i) center / 15px no-repeat;
  mask: var(--i) center / 15px no-repeat;
  opacity: .8;
}
.app-window .aw-nav .on { background: var(--nav-on); color: #fff; font-weight: 600; }
.app-window .aw-nav .on::before { opacity: 1; }
/* a menu group folds like in the app: a chevron points right when closed, down when open */
.app-window .aw-nav .grp::after { content: ""; flex: none; width: 5px; height: 5px; margin: 0 2px 0 auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: .6; }
.app-window .aw-nav .grp.open { color: var(--ink); font-weight: 600; }
.app-window .aw-nav .grp.open::after { transform: rotate(45deg) translate(-1px, -1px); }
.app-window .aw-nav .sub { padding-left: 14px; }
/* folded to icons: the call flow map always, every screen on phones (section 7) */
.app-window .aw-side.rail { width: 52px; padding: 12px 8px; }
.app-window .aw-side.rail .aw-brand { justify-content: center; padding: 2px 0 12px; }
.app-window .aw-side.rail .aw-brand span { display: none; }
.app-window .aw-side.rail .aw-nav span { justify-content: center; gap: 0; padding: 4px 0; font-size: 0; }
.app-window .aw-side.rail .aw-nav .grp::after { display: none; }

/* menu icons (the same drawings as icons.py), painted with the text colour */
.app-window .n-home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E"); }
.app-window .n-workflow { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8' rx='2'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2'/%3E%3Cpath d='M7 11v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E"); }
.app-window .n-layers { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); }
.app-window .n-bot { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='10' width='18' height='11' rx='3'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v3'/%3E%3Cpath d='M8.5 15v1.5M15.5 15v1.5'/%3E%3Cpath d='M1 15v2M23 15v2'/%3E%3C/svg%3E"); }
.app-window .n-zap { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E"); }
.app-window .n-box { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12'/%3E%3C/svg%3E"); }
.app-window .n-plug { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2M15 8V2'/%3E%3Cpath d='M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8z'/%3E%3C/svg%3E"); }
.app-window .n-calendar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.app-window .n-message { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.app-window .n-chart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9M13 17V5M8 17v-3'/%3E%3C/svg%3E"); }
.app-window .n-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.app-window .n-hash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3L8 21M16 3l-2 18'/%3E%3C/svg%3E"); }
.app-window .n-headset { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); }
.app-window .n-queue { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6h11M10 12h11M10 18h11'/%3E%3Cpath d='M4 6h1v4M4 10h2'/%3E%3Cpath d='M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/%3E%3C/svg%3E"); }
.app-window .n-list-tree { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12h-8M21 6H8M21 18h-8'/%3E%3Cpath d='M3 6v4a2 2 0 0 0 2 2h3M3 10v6a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E"); }
.app-window .n-users { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.app-window .n-conference { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3'/%3E%3Ccircle cx='4.5' cy='10' r='2'/%3E%3Ccircle cx='19.5' cy='10' r='2'/%3E%3Cpath d='M7 20a5 5 0 0 1 10 0'/%3E%3Cpath d='M1.5 19a3 3 0 0 1 4.2-2.7M22.5 19a3 3 0 0 0-4.2-2.7'/%3E%3C/svg%3E"); }
.app-window .n-megaphone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }
.app-window .n-music { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); }
.app-window .n-table { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M3 15h18M9 3v18'/%3E%3C/svg%3E"); }
.app-window .n-file-text { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E"); }
.app-window .n-database { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3Cpath d='M3 12c0 1.66 4 3 9 3s9-1.34 9-3'/%3E%3C/svg%3E"); }
.app-window .n-grid { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
.app-window .n-upload { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E"); }
.app-window .n-download { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
.app-window .n-code { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18l6-6-6-6M8 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.app-window .n-activity { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E"); }
.app-window .n-sliders { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E"); }
.app-window .n-inbox { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); }
.app-window .n-send { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E"); }
.app-window .n-plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.app-window .n-shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.app-window .n-user-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpath d='M17 11l2 2 4-4'/%3E%3C/svg%3E"); }
.app-window .n-phone-outgoing { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 7V1h-6M16 8l7-7'/%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.app-window .n-ban { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M4.93 4.93l14.14 14.14'/%3E%3C/svg%3E"); }
.app-window .n-lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.app-window .n-link { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }

/* ---------- 4. screen ---------- */
.app-window .aw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.app-window .aw-titles { min-width: 0; }
.app-window .aw-title { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 650; line-height: 1.3; color: var(--ink); letter-spacing: -.01em; }
.app-window .aw-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.app-window .aw-actions { display: flex; align-items: center; gap: 6px; flex: none; }

.app-window .aw-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--accent); border-radius: 7px; background: var(--accent); font-size: 11.5px; font-weight: 600; line-height: 16px; color: #fff; white-space: nowrap; }
.app-window .aw-btn.ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.app-window .aw-btn.sm { padding: 2px 9px; font-size: 11px; }
.app-window .red-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.app-window .live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; animation: aw-pulse 1.8s infinite; }
@keyframes aw-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); } 70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }

/* small status labels */
.app-window .tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: var(--paper-2); font-size: 10.5px; font-weight: 600; line-height: 15px; color: #475569; white-space: nowrap; }
.app-window .tag.green { background: var(--ok-bg); color: var(--ok); }
.app-window .tag.blue { background: var(--info-bg); color: var(--info); }
.app-window .tag.amber { background: var(--warn-bg); color: var(--warn); }
.app-window .tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.app-window .num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.app-window .num.blue { color: var(--accent); }
.app-window .mention { padding: 0 5px; border-radius: 5px; background: var(--accent-soft); font-weight: 600; color: var(--accent-strong); }
.app-window .key { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 6px; background: var(--surface); font-size: 11px; font-weight: 700; color: var(--ink); }

/* panels and list rows */
.app-window .panel { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.app-window .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 12px; font-weight: 650; color: var(--ink); }
.app-window .panel-title span { font-size: 11px; font-weight: 500; color: var(--muted); }
.app-window .two-col { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 10px; }
.app-window .two-col.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.app-window .tool-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.app-window .tool-row > :last-child { flex: none; }
.app-window .t-name { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.app-window .t-txt { min-width: 0; }
.app-window .t-txt b, .app-window .t-txt em { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-window .t-txt b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.app-window .t-txt em { font-size: 11px; font-style: normal; color: var(--muted); }
/* inside a panel the rows become a plain list with thin rules */
.app-window .panel .tool-row { padding: 7px 0; border: 0; border-radius: 0; }
.app-window .panel .tool-row + .tool-row { border-top: 1px solid var(--line-2); }
.app-window .panel .tool-row.sel { margin: 0 -6px; padding: 7px 6px; border-radius: 8px; background: var(--accent-soft); }
.app-window .panel .tool-row.sel + .tool-row { border-top-color: transparent; }

.app-window .app-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; color: #fff; }
.app-window .app-ico.ico-api { background: var(--paper-2); color: #334155; box-shadow: inset 0 0 0 1px var(--line); }

.app-window .toggle { position: relative; display: inline-block; width: 28px; height: 16px; border-radius: 999px; background: #cbd5e1; }
.app-window .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .25); }
.app-window .toggle.on { background: var(--accent); }
.app-window .toggle.on::after { left: 14px; }

.app-window .play { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); }
.app-window .play::after { content: ""; margin-left: 2px; border-left: 7px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }

/* form fields */
.app-window .f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.app-window .f-row.one { grid-template-columns: minmax(0, 1fr); }
.app-window .f-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-window .f-field { min-width: 0; }
.app-window .f-field small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; color: #475569; }
.app-window .f-input { position: relative; min-height: 30px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: 12px; line-height: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-window .f-input.select { padding-right: 28px; }
.app-window .f-input.select::after { content: ""; position: absolute; top: 11px; right: 12px; width: 6px; height: 6px; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint); transform: rotate(45deg); }
.app-window .f-input.focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.app-window .f-input.area { min-height: 86px; font-size: 11.5px; line-height: 1.6; color: var(--text); white-space: normal; }

/* wizard steps and tabs */
.app-window .aw-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.app-window .aw-steps span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); font-size: 11px; font-weight: 600; color: var(--muted); }
.app-window .aw-steps b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--line); font-size: 10px; font-weight: 700; color: #475569; }
.app-window .aw-steps .done { color: var(--text); }
.app-window .aw-steps .done b { background: var(--ink); color: #fff; }
.app-window .aw-steps .on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); }
.app-window .aw-steps .on b { background: var(--accent); color: #fff; }
.app-window .aw-steps .todo { background: var(--surface); }
.app-window .aw-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow: hidden; }
.app-window .aw-tabs span { margin-bottom: -1px; padding: 5px 9px 7px; border-bottom: 2px solid transparent; font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.app-window .aw-tabs .on { border-bottom-color: var(--accent); color: var(--accent); }

/* stat tiles */
.app-window .tiles, .app-window .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
/* a long label wraps to a second line inside its tile (never past its edge); the figures stay level at the bottom */
.app-window .tile, .app-window .kpi { display: flex; flex-direction: column; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.app-window .tile .tl { display: flex; align-items: flex-start; gap: 5px; min-width: 0; font-size: 11px; line-height: 1.25; color: var(--muted); overflow-wrap: anywhere; text-wrap: balance; }
.app-window .tile .tl svg { flex: none; width: 12px; height: 12px; margin-top: 1px; color: var(--accent); }
.app-window .kpi small { display: block; font-size: 11px; line-height: 1.25; color: var(--muted); overflow-wrap: anywhere; text-wrap: balance; }
.app-window .tile b, .app-window .kpi b { display: block; margin-top: auto; padding-top: 3px; font-size: 17px; font-weight: 650; line-height: 1.2; color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* charts and tables */
.app-window .chart svg { display: block; width: 100%; height: auto; }
/* beside a list, the chart grows to the list's height */
.app-window .two-col > .panel { display: flex; flex-direction: column; }
.app-window .chart.fill { position: relative; flex: 1; min-height: 80px; }
.app-window .chart.fill svg { position: absolute; inset: 0; height: 100%; }
.app-window .tbl { width: 100%; font-size: 11.5px; }
.app-window .tbl th { padding: 0 8px 6px; border-bottom: 1px solid var(--line); text-align: left; font-size: 10px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.app-window .tbl td { padding: 7px 8px; border-top: 1px solid var(--line-2); color: var(--ink); white-space: nowrap; }
.app-window .tbl tbody tr:first-child td { border-top: 0; }
.app-window .tbl th:first-child, .app-window .tbl td:first-child { padding-left: 0; }
.app-window .tbl th:last-child, .app-window .tbl td:last-child { padding-right: 0; }
.app-window .tbl .num, .app-window .tbl .end { text-align: right; }
.app-window .tbl td.muted { color: var(--muted); }
.app-window .tbl.keys td:first-child { width: 44px; }

/* ---------- 5. pieces of single screens ---------- */
/* the path of a call */
.app-window .flowstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.app-window .flowstrip .fs { padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); font-size: 10.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.app-window .flowstrip .fs.ai { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); }
.app-window .flowstrip .fs.ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.app-window .flowstrip .arr { font-size: 13px; line-height: 1; color: var(--faint); }

/* transcript */
.app-window .transcript { display: flex; flex-direction: column; gap: 7px; }
.app-window .msg { max-width: 84%; padding: 7px 11px; border-radius: 12px; font-size: 12px; line-height: 1.45; }
.app-window .msg small { display: block; margin-bottom: 1px; font-size: 9.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.app-window .msg.caller { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--paper-2); color: var(--ink); }
.app-window .msg.agent { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--accent); color: #fff; }
.app-window .msg.agent small { opacity: .8; }
.app-window .msg-tool { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px dashed #cbd5e1; border-radius: 999px; background: var(--surface); font-size: 10.5px; font-weight: 600; color: var(--text); }
.app-window .msg-tool svg { width: 12px; height: 12px; color: var(--accent); }
.app-window .msg-tool.ok { border: 1px solid var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.app-window .msg-tool.ok svg { color: var(--ok); }

/* audio: player, recordings, the live recorder */
.app-window .audio-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.app-window .a-txt { min-width: 0; }
.app-window .a-txt b, .app-window .a-txt span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-window .a-txt b { font-size: 12px; font-weight: 600; color: var(--ink); }
.app-window .a-txt span { font-size: 11px; color: var(--muted); }
.app-window .audio-list .audio-row { padding: 8px 0; border: 0; border-radius: 0; }
.app-window .audio-list .audio-row + .audio-row { border-top: 1px solid var(--line-2); }
.app-window .wave { display: flex; align-items: center; gap: 2px; height: 28px; min-width: 0; overflow: hidden; }
.app-window .wave i { flex: none; width: 2.5px; height: 38%; border-radius: 2px; background: var(--accent); opacity: .85; }
.app-window .wave i:nth-child(3n) { height: 70%; }
.app-window .wave i:nth-child(4n) { height: 45%; }
.app-window .wave i:nth-child(5n) { height: 90%; }
.app-window .wave i:nth-child(7n) { height: 55%; }
.app-window .wave i:nth-child(11n) { height: 100%; }
.app-window .wave.muted i { background: var(--faint); }
.app-window .rec { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px dashed var(--danger-line); border-radius: 10px; background: var(--danger-bg); }
.app-window .rec .a-txt { flex: none; }
.app-window .rec .wave { flex: 1; }
.app-window .rec .wave i { background: var(--danger); opacity: .55; }
.app-window .rec-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 5px rgba(220, 38, 38, .14); }

/* calendar week */
.app-window .cal { display: grid; grid-template-columns: 40px repeat(5, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; font-size: 10.5px; }
.app-window .cal > span { display: block; min-width: 0; min-height: 34px; padding: 3px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.app-window .cal > span:nth-child(6n) { border-right: 0; }
.app-window .cal > span:nth-last-child(-n+6) { border-bottom: 0; }
.app-window .cal .ch { min-height: 0; padding: 6px 2px; background: var(--surface-2); text-align: center; font-size: 11px; font-weight: 600; color: var(--text); }
.app-window .cal .ct { padding: 4px 6px 0 0; text-align: right; font-size: 10px; color: var(--faint); }
.app-window .ev { display: block; padding: 3px 6px; border-left: 2px solid var(--faint); border-radius: 5px; background: var(--paper-2); font-size: 10px; font-weight: 600; line-height: 1.3; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-window .ev.ai { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.app-window .ev i { font-style: normal; font-weight: 500; opacity: .75; }
.app-window .cal-key { display: flex; gap: 8px; }
.app-window .wk-3 { display: none; }   /* "3 days": the phone view (section 7) */
.app-window .cal-key .ev { display: inline-block; }

/* call flow map: the dotted canvas fills the screen, the map keeps a natural size in it */
.app-window .flow-canvas { padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23dbe2ea'/%3E%3C/svg%3E"); }
.app-window .flow-svg { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; }
.app-window .flow-v { display: none; }   /* the same map drawn top to bottom, shown on phones (section 7) */

/* template galleries */
.app-window .tpl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.app-window .tpl { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.app-window .tpl b { display: -webkit-box; margin: 7px 0 2px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; font-weight: 650; line-height: 1.3; color: var(--ink); }
.app-window .tpl-meta { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-window .tpl-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); }
.app-window .tpl-ico svg { width: 14px; height: 14px; }
.app-window .tpl .tag { margin-top: 6px; }
.app-window .tpl.sel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }

/* where a number sends its calls */
.app-window .dest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.app-window .dest { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; }
.app-window .dest svg { width: 14px; height: 14px; color: var(--faint); }
.app-window .dest.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.app-window .dest.on svg { color: var(--accent); }
.app-window .panel .dest-grid + .f-row { margin-top: 10px; }
.app-window .meter { height: 6px; margin: 4px 0 6px; overflow: hidden; border-radius: 6px; background: var(--line-2); }
.app-window .meter i { display: block; width: 40%; height: 100%; border-radius: 6px; background: var(--accent); }

/* live queue counters */
.app-window .qcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.app-window .qcards div { padding: 7px 4px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface-2); text-align: center; font-size: 10.5px; color: var(--muted); }
.app-window .qcards b { display: block; font-size: 17px; font-weight: 650; line-height: 1.25; color: var(--ink); }
.app-window .qcards .w b { color: var(--warn); }
.app-window .qcards .t b { color: var(--ok); }

/* API test result */
.app-window .code-block { margin: 0; padding: 10px 12px; overflow: hidden; border-radius: 8px; background: var(--ink); font-family: var(--font-mono); font-size: 11px; line-height: 1.55; color: #cbd5e1; white-space: pre; }

/* ---------- 6. float cards ---------- */
/* Small notes on the edge of a screenshot. They hang outside the window: a top card overlaps only the
   window's top edge (6px, above the browser dots and address), a bottom card only the empty bottom padding,
   never the screen itself. */
.mock { position: relative; }
/* room above for a top card, whichever positioned box holds it (a .mock, or a hero visual or shot with a card added) */
:is(.mock, .hero-visual, .shot):has(> .fc-tl, > .fc-tr) { margin-top: 40px; }
.mock:has(> .fc-bl, > .fc-br) { margin-bottom: 30px; }
.float-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 270px;
  padding: 9px 14px 9px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 14px 30px -12px rgba(15, 23, 42, .3);
  font-family: var(--font-body);
  text-align: left;
  color: var(--ink);
}
.float-card .fc-ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; }
.float-card .fc-ico svg { width: 16px; height: 16px; }
.float-card .fc-text { min-width: 0; }
.float-card .fc-text b, .float-card .fc-text small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.float-card .fc-text b { font-size: 12.5px; font-weight: 650; line-height: 1.35; color: var(--ink); }
.float-card .fc-text small { font-size: 11px; line-height: 1.4; color: var(--muted); }
.float-card .fc-green { background: var(--ok-bg); color: var(--ok); }
.float-card .fc-brand, .float-card .fc-blue { background: var(--accent-soft); color: var(--accent); }
.fc-tl { bottom: calc(100% - 6px); left: -24px; }
.fc-tr { bottom: calc(100% - 6px); right: -20px; }
.fc-bl { bottom: -40px; left: -24px; }
.fc-br { bottom: -40px; right: -20px; }
/* tablets: the screenshot spans the column, so the cards overlap its corners instead of the page gutter */
@media (min-width: 641px) and (max-width: 1024px) {
  .fc-tl, .fc-bl { left: 12px; }
  .fc-tr, .fc-br { right: 12px; }
}
.float-anim { animation: aw-float 6s ease-in-out infinite; }
.float-anim.delay { animation-delay: -3s; }
@keyframes aw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .float-anim, .app-window .live-dot { animation: none; }
}

/* ---------- 7. phones ---------- */
@media (max-width: 640px) {
  /* The menu folds to icons and every screen lays out at about 440px, so on a 390px phone (about 354px of column)
     the picture is drawn at 0.8 of its size or more and its 11 to 12px text reads at 9 to 10px.
     The call flow map, the calendar and the calls report set their own phone width below. */
  .aw-fit.aw-side-full { --aw-w: 440px; }
  .aw-fit.aw-reflow { --aw-w: 420px; }   /* the hero call, without the menu */
  /* less padding around the screen; the call flow map keeps its own (its phone drawing is sized to it) */
  .aw-fit:not(.aw-flow) > .app-window .aw-main { padding: 14px 12px 16px; }
  .app-window .aw-tabs span { padding-inline: 7px; }
  /* form fields give their text a little more room; a one-column field (a greeting) wraps instead of cutting off */
  .app-window .f-row { gap: 8px; }
  .app-window .f-input { padding-inline: 8px; }
  .app-window .f-input.select { padding-right: 22px; }
  .app-window .f-input.select::after { right: 9px; }
  .app-window .f-row.one .f-input { white-space: normal; }
  .app-window .f-row.fit-first { grid-template-columns: max-content minmax(0, 1fr); }   /* a short choice beside a long value */
  .app-window .f-row.wide-first { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }   /* a long value before two short ones */
  /* the call flow map is redrawn top to bottom at about the phone's own width (mockups._FLOW_V) */
  .aw-fit.aw-flow { --aw-w: 360px; }
  .app-window .flow-h { display: none; }
  .app-window .flow-v { display: block; }
  .aw-flow .fl-more, .aw-flow .fl-new, .aw-flow .aw-tabs span:nth-child(n+4) { display: none; }
  /* the calendar shows three days (Wed to Fri) instead of five, so the bookings stay readable */
  .aw-fit.aw-week { --aw-w: 372px; }
  .aw-week .cal { grid-template-columns: 40px repeat(3, minmax(0, 1fr)); }
  .aw-week .cal > span:nth-child(6n+2), .aw-week .cal > span:nth-child(6n+3) { display: none; }
  .aw-week .wk-5 { display: none; }
  .aw-week .wk-3 { display: inline; }
  /* the dashboard: tiles two by two, today's totals full width, the small chart steps aside */
  .aw-dash .tiles, .aw-dash .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aw-dash .two-col { grid-template-columns: minmax(0, 1fr); }
  .aw-dash .two-col > .dash-chart { display: none; }
  /* the calls report: the Date column steps aside (the tiles say "Last 30 days"), so the rest fits at a larger size */
  .aw-fit.aw-cdr { --aw-w: 460px; }
  .aw-cdr .tbl :is(th, td):first-child { display: none; }
  .aw-cdr .tbl :is(th, td):nth-child(2) { padding-left: 0; }
  .aw-cdr .tbl :is(th, td) { padding-inline: 4px; }
  .app-window .aw-side { width: 52px; padding: 12px 8px; }
  .app-window .aw-brand { justify-content: center; padding: 2px 0 12px; }
  .app-window .aw-brand span { display: none; }
  .app-window .aw-nav span, .app-window .aw-nav .sub { justify-content: center; gap: 0; padding: 4px 0; font-size: 0; }
  .app-window .aw-nav .grp::after { display: none; }

  /* one float card, below the screenshot and just tucked over its bottom edge */
  :is(.mock, .hero-visual, .shot):has(> .fc-tl, > .fc-tr) { margin-top: 0; }
  .mock:has(> .fc-bl, > .fc-br) { margin-bottom: 0; }
  .float-card { position: relative; inset: auto; z-index: 3; width: max-content; max-width: 100%; margin: -6px 10px 0 auto; padding: 7px 12px 7px 7px; border-radius: 10px; animation: none; }
  .float-card .fc-ico { width: 26px; height: 26px; border-radius: 8px; }
  .float-card .fc-ico svg { width: 14px; height: 14px; }
  .float-card .fc-text b { font-size: 12px; }
  .float-card + .float-card { display: none; }
}


/* ---------- 8. CRM, WhatsApp and AI call consent screens ---------- */
.app-window .tag.red { background: var(--danger-bg); color: var(--danger); }
.app-window .lk { display: inline-block; width: 11px; height: 11px; margin-left: 2px; vertical-align: -1px; color: var(--faint); }
.app-window .tag .lk { margin: 0 2px 0 0; color: currentColor; }
.app-window .tbl tr.row-hl td { background: var(--ok-bg); }
.app-window .tbl tr.row-hl td:first-child { box-shadow: inset 3px 0 0 var(--ok); padding-left: 8px; }
.app-window .col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.app-window .meter i.m-0 { width: 0; }
.app-window .meter i.m-40 { width: 40%; }
.app-window .meter i.m-64 { width: 64%; }
.app-window .meter i.m-72 { width: 72%; background: var(--ok); }
.app-window .meter i.m-100 { width: 100%; background: var(--ok); }

/* CRM dashboard: donut, legend, goal */
.app-window .donut-row { display: flex; align-items: center; gap: 14px; }
.app-window .donut { width: 84px; height: 84px; transform: rotate(-90deg); }
.app-window .legend { display: grid; gap: 4px; font-size: 11px; color: var(--text); }
.app-window .legend span { display: flex; align-items: center; gap: 6px; }
.app-window .legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--faint); }
.app-window .legend .lg-g::before { background: #15803d; }
.app-window .legend .lg-b::before { background: #2563eb; }
.app-window .legend .lg-r::before { background: #dc2626; }
.app-window .goal b { display: block; font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.app-window .goal span { display: block; font-size: 11px; color: var(--muted); }
.app-window .goal .meter { margin-top: 10px; height: 8px; }

/* WhatsApp campaigns */
.app-window .wa-camp { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.app-window .wa-camp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.app-window .wa-camp .meter { margin: 8px 0; }
.app-window .wa-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.app-window .wa-stats span { min-width: 0; }
.app-window .wa-stats small { display: block; font-size: 10px; color: var(--muted); }
.app-window .wa-stats b { display: block; font-size: 13px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.app-window .wa-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

/* WhatsApp inbox and chat bubbles */
.app-window .wa-inbox { display: grid; grid-template-columns: 200px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.app-window .wa-list { border-right: 1px solid var(--line); background: var(--surface-2); }
.app-window .wa-conv { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--line-2); }
.app-window .wa-conv.on { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.app-window .wa-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 10px; color: var(--faint); }
.app-window .wa-meta i { display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #1fa855; font-style: normal; font-size: 9.5px; font-weight: 700; color: #fff; }
.app-window .wa-pane { display: flex; flex-direction: column; min-width: 0; }
.app-window .wa-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.app-window .wa-thread, .aw-phone .ph-chat { display: flex; flex-direction: column; gap: 7px; padding: 12px; background: #efeae2; }
.app-window .wa-thread { flex: 1; }
.app-window .bub, .aw-phone .bub { position: relative; max-width: 82%; padding: 6px 10px 14px; border-radius: 9px; background: #fff; font-size: 12px; line-height: 1.45; color: #111b21; box-shadow: 0 1px 1px rgba(11, 20, 26, .12); }
.app-window .bub.in, .aw-phone .bub.in { align-self: flex-start; border-top-left-radius: 2px; }
.app-window .bub.out, .aw-phone .bub.out { align-self: flex-end; border-top-right-radius: 2px; background: #d9fdd3; }
.app-window .bub small { display: block; margin-bottom: 2px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #667781; }
.app-window .bub s, .aw-phone .bub s { position: absolute; right: 8px; bottom: 2px; font-size: 9px; text-decoration: none; color: #667781; }
.app-window .wa-compose { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); }
.app-window .wa-compose .f-input { flex: 1; color: var(--faint); }
.app-window .wa-preview { padding: 10px; border-radius: 8px; background: #efeae2; }
.app-window .wa-preview .bub { max-width: 100%; padding-bottom: 8px; }
.app-window .var { padding: 0 3px; border-radius: 3px; background: #fff3c4; font-weight: 600; }
.app-window .wa-foot { display: block; margin-top: 4px; font-size: 10px; color: #667781; }
.app-window .wa-qr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.app-window .wa-qr span { padding: 5px; border-radius: 7px; background: #fff; text-align: center; font-size: 11px; font-weight: 600; color: #027eb5; }
.app-window .lim small { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }

/* AI call consent */
.app-window .aic-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 600; }
.app-window .aic-lock svg { width: 11px; height: 11px; }
.app-window .tbl td.words { color: var(--text); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.app-window .tbl td.fp { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.app-window .funnel { display: grid; gap: 5px; }
.app-window .funnel span { display: block; padding: 4px 8px; border-radius: 5px; background: var(--accent); font-size: 10.5px; font-weight: 600; color: #fff; white-space: nowrap; }
.app-window .funnel .fn-1 { width: 100%; }
.app-window .funnel .fn-2 { width: 92%; opacity: .9; }
.app-window .funnel .fn-3 { width: 74%; opacity: .8; }
.app-window .funnel .fn-4 { width: 51%; background: var(--ok); }

/* the consent question on a phone */
.aw-phone {
  width: 300px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #d1d7db;
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--win-shadow);
  font-family: var(--font-body);
  text-align: left;
  color: var(--ink);
}
:root[data-theme="dark"] .aw-phone, .hero .aw-phone, .section-band .aw-phone { box-shadow: var(--win-shadow-dark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aw-phone { box-shadow: var(--win-shadow-dark); } }
.aw-phone .ph-top { display: flex; align-items: center; gap: 10px; padding: 18px 14px 10px; background: #f0f2f5; border-bottom: 1px solid #e2e8f0; }
.aw-phone .ph-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #0f766e; font-size: 13px; font-weight: 700; color: #fff; }
.aw-phone .t-txt b { display: block; font-size: 13px; font-weight: 650; color: var(--ink); }
.aw-phone .t-txt em { display: block; font-size: 11px; font-style: normal; color: var(--muted); }
.aw-phone .ph-chat { min-height: 340px; padding: 14px 12px 22px; }
.aw-phone .bub { max-width: 88%; font-size: 12.5px; }

@media (max-width: 640px) {
  /* CRM records: the Source column steps aside */
  .aw-fit.aw-crm { --aw-w: 500px; }
  .aw-crm .tbl .c-src, .aw-crm .tbl td:nth-child(5) { display: none; }
  /* consent tables: the Channel column steps aside */
  .aw-fit.aw-aic { --aw-w: 500px; }
  .aw-aic .tbl .c-ch { display: none; }
  .aw-aic .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aw-aic .two-col { grid-template-columns: minmax(0, 1fr); }
  /* the WhatsApp inbox shows the open conversation only */
  .aw-fit.aw-wa { --aw-w: 440px; }
  .aw-wa .wa-inbox { grid-template-columns: minmax(0, 1fr); }
  .aw-wa .wa-list { display: none; }
}

/* ---- 50-home.css ---- */
/* ==========================================================================
   Home page
   ========================================================================== */

/* ---------- hero ---------- */
.home-hero { padding-bottom: 0; }
.home-hero .hero-copy h1 { font-size: clamp(2.4rem, 1.2rem + 3.2vw, 4.1rem); }
.home-hero .lede { max-width: 52ch; text-wrap: pretty; }
.home-hero .hero-proof { gap: 8px 18px; }
/* stacked hero on a tablet: the call keeps its design width and its notes stay inside the margins */
@media (min-width: 641px) and (max-width: 1024px) {
  .home-hero .hero-visual { width: 100%; max-width: 620px; margin-inline: auto; }
}

/* the five products, a ruled row at the foot of the hero */
.home-rail { margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.home-rail ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.home-rail li + li { border-left: 1px solid var(--line); }
.home-rail a { display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 24px 18px 28px; transition: background-color .15s; }
.home-rail li:first-child a { padding-left: 0; }
.home-rail a:hover { background: rgba(255, 255, 255, .04); }
.home-rail a:hover b { color: var(--accent); }
.rail-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--tile-bg); color: var(--tile-ink); border: 1px solid var(--line); }
.rail-ico svg { width: 18px; height: 18px; }
.rail-txt { min-width: 0; }
.rail-txt b { display: block; font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.3; transition: color .15s; }
.rail-txt b .new-badge { margin-left: 6px; }
.rail-txt > span { display: block; margin-top: 4px; font-size: .86rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 1100px) {
  .home-rail ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-rail li { border-top: 1px solid var(--line); }
  .home-rail li:nth-child(-n+3) { border-top: 0; }
  .home-rail li:nth-child(3n+1) { border-left: 0; }
  .home-rail li:nth-child(3n+1) a { padding-left: 0; }
}
@media (max-width: 640px) {
  .home-rail { margin-top: 48px; }
  .home-rail ul { grid-template-columns: minmax(0, 1fr); }
  .home-rail li, .home-rail li:nth-child(-n+3) { border-left: 0; border-top: 1px solid var(--line); }
  .home-rail li:first-child { border-top: 0; }
  .home-rail a, .home-rail li:first-child a, .home-rail li:nth-child(3n+1) a { padding: 16px 0; align-items: center; }
  .rail-txt > span { margin-top: 1px; }
}

.home-strip { padding-top: clamp(32px, 4vw, 48px); }
.home-strip .container { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.home-strip .strip-label { margin: 0; }
/* between a tablet and a wide screen the eight chips sit 4 + 4, never 7 + 1 */
@media (min-width: 641px) and (max-width: 1279px) {
  .home-strip .logo-strip { display: grid; grid-template-columns: repeat(4, max-content); }
}

/* no orphan words at the end of the section intros */
:is(.home-how, .home-pbx, .home-compare, .home-outbound) .section-head p { text-wrap: pretty; }
:is(.home-tour, .home-uc) .section-head p { text-wrap: balance; }

/* ---------- product tour ---------- */
/* All panels share one grid cell, so the page below does not jump when another tab is picked.
   The hidden ones keep their size but stay invisible (and out of the tab order and the reading order). */
.home-tour [data-tabs] { display: grid; grid-template-columns: minmax(0, 1fr); }
.home-tour .tour-tabs { grid-area: 1 / 1; }
.home-tour .tour-panel { grid-area: 2 / 1; }
.home-tour .tour-panel[hidden] { display: grid !important; visibility: hidden; }
.tour-visual { position: relative; min-width: 0; }
/* Tablets and phones: every tab stays in view (no strip scrolled off the edge), icon over label */
@media (max-width: 920px) {
  .home-tour .tour-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; width: 100%; margin-inline: auto; overflow: visible; }
  .home-tour .tour-panel { align-content: start; }
  .home-tour .tour-tab { flex-direction: column; justify-content: center; gap: 5px; min-height: 60px; padding: 9px 4px; font-size: .86rem; line-height: 1.2; text-align: center; }
}
@media (max-width: 640px) {
  .home-tour .tour-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 28px; }
  /* on phones the tabs sit right above the panel, so a small jump beats a tall empty band */
  .home-tour .tour-panel[hidden] { display: none !important; }
}

/* ---------- CRM split ---------- */
.home-crm .feature-list { margin-top: 28px; }
.home-crm .link-arrow { margin-top: 26px; }

/* ---------- outbound on the black band: the WhatsApp question beside the four steps ---------- */
.home-out { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.home-out-phone { display: flex; justify-content: center; }
.home-loop { counter-reset: loop; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.home-loop li { counter-increment: loop; position: relative; padding: 24px 0 28px 56px; border-top: 1px solid var(--line); }
.home-loop li::before { content: counter(loop, decimal-leading-zero); position: absolute; left: 0; top: 24px; font-family: var(--font-mono); font-size: .9rem; font-weight: 700; color: var(--accent); }
.home-loop h3 { margin-bottom: 8px; }
.home-loop h3 a { color: var(--ink); }
.home-loop h3 a::after { content: "\2192"; display: inline-block; margin-left: 8px; color: var(--accent); transition: transform .2s; }
.home-loop h3 a:hover { color: var(--accent); }
.home-loop h3 a:hover::after { transform: translateX(3px); }
.home-loop p { color: var(--text); font-size: .98rem; }
@media (max-width: 1024px) {
  .home-out { grid-template-columns: minmax(0, 1fr); }
  .home-out-phone { order: 2; }
}
@media (max-width: 640px) {
  .home-loop { grid-template-columns: minmax(0, 1fr); }
  .home-loop li { padding: 18px 0 20px 44px; }
  .home-loop li::before { top: 19px; }
}

/* ---------- phone system list ---------- */
/* The title already links to the page: an arrow after it replaces nine identical "Read more" links */
.home-pbx .ruled a.link-arrow { display: none; }
/* nine items: three columns down to a small tablet, so no item sits alone on the last row */
@media (min-width: 641px) and (max-width: 920px) {
  .home-pbx .ruled { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
  .home-pbx .ruled h3 { font-size: 1.05rem; align-items: flex-start; }
  .home-pbx .ruled p { font-size: .94rem; }
}

/* ---------- templates ---------- */
.home-templates h2 { font-size: clamp(1.8rem, 1rem + 1.8vw, 2.7rem); }
.home-templates .lede { font-size: 1.0625rem; }
.home-tpl-visual .home-note { position: relative; z-index: 4; max-width: 380px; margin: -14px 24px 0 auto; }
@media (max-width: 920px) {
  .home-tpl-visual .home-note { margin: 22px 0 0; max-width: 460px; }
}

/* ---------- use cases as numbered case notes ---------- */
.uc-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.uc-note { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 26px 0 30px; border-top: 1px solid var(--line); }
.uc-num { font-family: var(--font-mono); font-size: .85rem; font-weight: 700; color: var(--accent); line-height: 1.2; }
.uc-note h3 { margin-bottom: 8px; }
.uc-note p { color: var(--text); font-size: .98rem; }
.uc-line { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--ink); background: var(--surface); font-size: 1rem; line-height: 1.5; color: var(--ink); }
.uc-note .link-arrow { display: inline-block; margin-top: 16px; }
/* when a long link wraps, the arrow follows the last word instead of hanging at the far edge */
.uc-note .link-arrow::after { display: inline-block; margin-left: 6px; }
.uc-more { margin-top: 40px; }
@media (max-width: 1024px) {
  .uc-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .uc-notes { grid-template-columns: minmax(0, 1fr); }
  .uc-note { padding: 20px 0 22px; }
  .uc-note > div > p:not(.uc-line) { display: none; }
  .uc-note h3 { margin-bottom: 0; }
  .uc-line { margin-top: 10px; font-size: .98rem; }
  .uc-note .link-arrow { margin-top: 12px; }
  .uc-more { margin-top: 28px; }
  .uc-more .btn { width: 100%; }
}

/* ---------- comparison table ---------- */
/* phones: the short column names fit the label column on one line, which leaves more room for the answer */
@media (max-width: 640px) {
  .home-compare .compare.stack td { grid-template-columns: minmax(0, 7.9em) minmax(0, 1fr); }
  .home-compare .compare.stack td::before { white-space: nowrap; }
}

/* ---- 60-ai.css ---- */
/* ==========================================================================
   AI pages (pages_ai.py): /ai-phone-agents, /ai-appointment-booking,
   /smart-call-transfer, /call-flow-designer. Every class here starts with "ai-".
   ========================================================================== */

/* ---------- shared lists (ruled, check list) set on the deep green band ---------- */
.ai-on-band .ruled > * { border-top-color: var(--band-line); }
.ai-on-band .ruled h3 { color: #fff; }
.ai-on-band .ruled h3 svg { color: var(--band-accent); }
.ai-on-band .ruled p { color: var(--band-text); }
.ai-on-band .ruled h3 a:hover { color: var(--band-accent); }
.ai-on-band .link-arrow { color: var(--band-accent); }
.ai-on-band .link-arrow:hover { color: #fff; }
.ai-on-band .check-list li { color: var(--band-text); }
.section-band .ai-on-band .check-list li::before {
  background-color: var(--band-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3a26' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------- the three standard heroes: a calmer title so it stays on three lines ---------- */
@media (min-width: 1025px) { .ai-hero .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ai-hero h1 { font-size: clamp(2.15rem, 1.45rem + 2.3vw, 3.3rem); }
.ai-hero .hero-proof { flex-direction: column; align-items: flex-start; gap: 8px; }

/* body copy on these pages: no lone word on the last line */
.ai-lead-head > p, .ai-fit p, .ai-callpath-head p, .ai-beat-body p, .ai-settings p, .ai-spec dd, .ai-tpl-index li,
.ai-setup .lede, .ai-voices .lede, .ai-templates .lede, .ai-control .lede, .ai-rules .lede, .ai-tpl-split .lede, .ai-fallbacks .lede,
.ai-on-band .ruled p, .ai-lead .ruled p { text-wrap: pretty; }
.ai-nw { white-space: nowrap; }

/* ---------- comparison tables ---------- */
.ai-table .compare tbody tr:last-child th { border-bottom: 0; }
/* what a caller says, set like a spoken line */
.ai-table-said .compare tbody th { font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; line-height: 1.4; }

/* ---------- agents: what it does, a lead beside a two-column ruled list ---------- */
.ai-lead { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ai-lead-head { position: sticky; top: calc(var(--header-h) + 28px); }
.ai-lead-head h2 { margin-bottom: 16px; }
.ai-lead-head > p { font-size: 1.1rem; }
.ai-lead-head .said { margin-top: 30px; }

/* ---------- agents: where it fits, three tiny call paths that all end on the agent ---------- */
.ai-fits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ai-fit { display: flex; flex-direction: column; padding: 34px clamp(20px, 3vw, 40px) 6px; }
.ai-fit:first-child { padding-left: 0; }
.ai-fit:last-child { padding-right: 0; }
.ai-fit + .ai-fit { border-left: 1px solid var(--line); }
.ai-fit h3 { margin-bottom: 8px; }
.ai-fit p { color: var(--text); font-size: .98rem; }
.ai-fit .link-arrow { margin-top: 14px; font-size: .95rem; }
.ai-route { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 168px; margin-bottom: 28px; }
.ai-node { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.ai-node svg { width: 16px; height: 16px; color: var(--muted); }
.ai-node-ai { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-strong); }
.ai-node-ai svg { color: var(--accent); }
.ai-link { position: relative; display: block; height: 30px; margin-left: 18px; border-left: 1.5px solid var(--accent-line); }
.ai-link::after { content: ""; position: absolute; left: -5.25px; bottom: 0; border-style: solid; border-width: 6px 4.5px 0; border-color: var(--accent-line) transparent transparent; }
.ai-link small { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .8rem; font-weight: 650; color: var(--accent); white-space: nowrap; }

/* ---------- agents: the setup wizard as a vertical list beside a screenshot ---------- */
.ai-setup .lede { max-width: 46ch; }
.ai-vsteps { margin-top: 30px; }
.ai-vsteps .steps { grid-template-columns: minmax(0, 1fr); }
.ai-vsteps .step { padding: 0 0 20px 54px; }
.ai-vsteps .step::before { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: 0; font-size: .98rem; }
.ai-vsteps .step::after { top: 36px; bottom: 2px; left: 17px; right: auto; border-top: 0; border-left: 1.5px dashed var(--accent-line); }
.ai-vsteps .step:last-child { padding-bottom: 0; }
.ai-vsteps .step h3 { padding-top: 5px; margin-bottom: 2px; font-size: 1.06rem; }
.ai-vsteps .step p { font-size: .97rem; }

/* ---------- agents: the seven voices, set as type ---------- */
.ai-voices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ai-voices h2 { margin-bottom: 18px; }
.ai-voices .note { margin-top: 28px; max-width: 470px; }
.ai-voice-list { display: grid; gap: 30px; }
.ai-voice-group { padding-top: 16px; border-top: 1px solid var(--line); }
.ai-voice-label { display: block; margin-bottom: 4px; font-size: .875rem; font-weight: 600; color: var(--muted); }
/* the names stay a step below the section's h2, and wrap in even lines (2 + 2, never 3 + 1) */
.ai-voice-names { font-family: var(--font-display); font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.4rem); font-weight: 500; line-height: 1.18; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.ai-voice-names li { display: inline-block; margin-right: .7em; }
.ai-voice-names li:last-child { margin-right: 0; }

/* ---------- agents: templates, the business types as a quiet run-in list ---------- */
.ai-types { margin-top: 18px; padding: 2px 0 2px 16px; border-left: 2px solid var(--accent-line); font-size: .97rem; font-weight: 500; line-height: 1.65; color: var(--ink); text-wrap: pretty; }
.ai-types li { display: inline; }
.ai-types li:not(:last-child)::after { content: ", "; color: var(--muted); }
.ai-templates .check-list { margin-top: 26px; }

/* ---------- agents: the "stay in control" band ---------- */
.ai-control .ruled { margin-top: 30px; }
.ai-control .ruled > * { padding: 18px 0 20px; }

/* ---------- booking: one call, annotated ---------- */
.ai-callpath { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ai-callpath-head { position: sticky; top: calc(var(--header-h) + 28px); }
.ai-callpath-head h2 { margin-bottom: 16px; }
.ai-callpath-head p { font-size: 1.1rem; }
.ai-script { padding-top: 4px; }
.ai-beat { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 26px; }
.ai-who { padding-top: 2px; font-size: .875rem; font-weight: 650; text-align: right; color: var(--muted); }
.ai-beat-caller .ai-who { color: var(--ink); }
.ai-beat-agent .ai-who, .ai-beat-cal .ai-who { color: var(--accent); }
.ai-beat-body { position: relative; padding: 0 0 36px 30px; border-left: 1.5px solid var(--line); }
.ai-beat:last-child .ai-beat-body { padding-bottom: 0; border-left-color: transparent; }
.ai-beat-body::before { content: ""; position: absolute; left: -7.75px; top: 6px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); background: var(--surface); }
.ai-beat-agent .ai-beat-body::before { border-color: var(--accent); background: var(--accent); }
.ai-beat-cal .ai-beat-body::before { border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.ai-beat-body h3 { margin-bottom: 6px; }
.ai-beat-body p { color: var(--text); font-size: .98rem; }
.ai-beat-body .ai-quote { margin: 2px 0 10px; font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); line-height: 1.3; color: var(--ink); }

/* ---------- booking: the rules as a spec sheet ---------- */
.ai-rules .lede { max-width: 48ch; }
@media (min-width: 921px) {
  .ai-rules { align-items: start; }
  .ai-rules > :nth-child(2) { position: sticky; top: calc(var(--header-h) + 36px); margin-top: 38px; }
}
.ai-spec { margin-top: 28px; border-bottom: 1px solid var(--line); }
.ai-spec > div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 2px 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.ai-spec dt { font-size: .97rem; font-weight: 650; color: var(--ink); }
.ai-spec dd { margin: 0; font-size: .97rem; color: var(--text); }
.ai-table-foot { margin-top: 22px; }

/* ---------- transfer: three settings, each with a small specimen of what you type ---------- */
.ai-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.ai-settings li { display: flex; flex-direction: column; }
/* the three specimens share one height, so the numbered titles line up */
@media (min-width: 861px) {
  .ai-settings { grid-template-rows: auto auto auto; row-gap: 0; }
  .ai-settings li { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .ai-settings .ai-specimen { order: -1; }
}
.ai-settings h3 { display: flex; align-items: center; gap: 12px; margin: 24px 0 8px; }
.ai-settings p { color: var(--text); font-size: .98rem; }
.ai-n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--accent); font-family: var(--font-display); font-size: .95rem; font-weight: 600; color: var(--accent); }
.ai-specimen { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 9px; min-height: 152px; padding: 18px 20px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--paper); }
.ai-pick { display: inline-flex; align-items: center; gap: 9px; font-size: .93rem; font-weight: 600; color: var(--ink); }
.ai-pick svg { width: 16px; height: 16px; padding: 2px; border-radius: 5px; background: var(--primary); color: var(--on-primary); stroke-width: 3; }
.ai-field { font-size: .8rem; font-weight: 650; color: var(--muted); }
.ai-words { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-word { padding: 3px 11px; border-radius: 999px; background: var(--accent-soft); font-size: .9rem; font-weight: 600; color: var(--accent-strong); }
.ai-settings .ai-specimen-text p { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.45; color: var(--ink); }

/* ---------- transfer: the fallbacks band ---------- */
.ai-fallbacks .ruled { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
.ai-fallbacks .ruled > * { padding: 16px 0 18px; }
/* the title is the link: one arrow beside it instead of three "Read more" lines */
.ai-fallbacks .ruled a.link-arrow { display: none; }
.ai-fallbacks .ruled h3 a::after { content: "\2192"; margin-left: 8px; color: var(--band-accent); }

/* ---------- call flow designer: centred hero with the whole map under it ---------- */
.ai-flow-hero .hero-center { margin-top: clamp(4px, 1.5vw, 20px); }
.ai-flow-hero h1 { font-size: clamp(2.3rem, 1.5rem + 2.9vw, 3.9rem); }
.ai-flow-shot { max-width: 1000px; margin: clamp(40px, 5vw, 64px) auto 0; }
.ai-flow-hero .shot-caption { max-width: 720px; margin: 30px auto 0; text-wrap: balance; }

/* ---------- call flow designer: templates band with all 15 flows ---------- */
.ai-tpl-split { margin-bottom: clamp(48px, 6vw, 84px); }
.ai-tpl-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(18px, 2.4vw, 32px); }
.ai-tpl-index > div { padding-top: 20px; border-top: 1px solid var(--band-line); }
.ai-tpl-index h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 1.02rem; color: #fff; }
.ai-tpl-index ul { margin: 0; padding: 0; list-style: none; }
.ai-tpl-index h3 svg { width: 18px; height: 18px; color: var(--band-accent); }
.ai-tpl-index li { padding: 7px 0; font-size: .95rem; line-height: 1.45; color: var(--band-text); }
.ai-tpl-index li + li { border-top: 1px dashed var(--band-line); }
.ai-flow-note { width: fit-content; max-width: 560px; margin: clamp(36px, 4vw, 56px) auto 0; }

/* ---------- smaller screens ---------- */
@media (min-width: 641px) and (max-width: 1024px) {
  .ai-tpl-index { display: block; column-count: 2; column-gap: clamp(28px, 5vw, 48px); }
  .ai-tpl-index > div { break-inside: avoid; margin-bottom: 30px; }
}
@media (max-width: 920px) {
  .ai-lead, .ai-callpath, .ai-voices { grid-template-columns: minmax(0, 1fr); }
  .ai-lead-head, .ai-callpath-head { position: static; }
}
@media (max-width: 860px) {
  .ai-fits, .ai-settings { grid-template-columns: minmax(0, 1fr); }
  .ai-fit, .ai-fit:first-child, .ai-fit:last-child { padding: 26px 0; }
  .ai-fit + .ai-fit { border-left: 0; border-top: 1px solid var(--line); }
  .ai-route { min-height: 0; margin-bottom: 20px; }
  .ai-specimen { min-height: 0; }
}
/* tablets: each item as a row, the picture on the left and the words beside it */
@media (min-width: 641px) and (max-width: 860px) {
  .ai-fit { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 40px; }
  .ai-fit > * { grid-column: 2; }
  .ai-fit .ai-route { grid-column: 1; grid-row: 1 / -1; margin: 0; }
  .ai-fit .link-arrow { justify-self: start; align-self: start; }
  .ai-settings { row-gap: 36px; }
  .ai-settings li { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 32px; }
  .ai-settings li > * { grid-column: 2; }
  .ai-settings .ai-specimen { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .ai-settings h3 { margin: 4px 0 8px; }
}
@media (max-width: 640px) {
  /* one floating note per hero screenshot on phones, kept inside the screen edges */
  .ai-hero .float-card.delay { display: none; }
  .ai-hero .fc-tr, .ai-hero .fc-br { right: 0; }
  .ai-hero .fc-tl, .ai-hero .fc-bl { left: 0; }
  /* "keep exploring": one short row per page instead of four tall boxes */
  .ai-more .card { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 2px 14px; padding: 16px 18px; }
  .ai-more .card-icon { grid-row: 1 / span 2; width: 38px; height: 38px; margin: 0; border-radius: 10px; }
  .ai-more .card h3 { margin: 0; font-size: 1.05rem; }
  .ai-more .card p { font-size: .94rem; }
  .ai-more .card .link-arrow { display: none; }
  .ai-beat { grid-template-columns: minmax(0, 1fr); }
  .ai-who { padding: 0 0 4px 30px; text-align: left; border-left: 1.5px solid var(--line); }
  .ai-beat:first-child .ai-who { border-left-color: transparent; }
  .ai-beat:last-child .ai-who { border-left-color: var(--line); }
  .ai-beat-body::before { top: 5px; }
  .ai-spec > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ai-voice-names { font-size: 1.5rem; }
  /* agents: shorter on phones. The setup steps say what the second wizard screenshot showed, and the call paths get compact */
  .ai-setup > :nth-child(2) { display: none; }
  .ai-fit, .ai-fit:first-child, .ai-fit:last-child { padding: 24px 0; }
  .ai-route { margin-bottom: 18px; }
  .ai-node { gap: 7px; padding: 5px 11px 5px 9px; font-size: .86rem; border-radius: 9px; }
  .ai-node svg { width: 15px; height: 15px; }
  .ai-link { height: 24px; margin-left: 16px; }
  .ai-link small { left: 10px; font-size: .76rem; }
  /* transfer: number and title lead each setting, then its specimen, then the words */
  .ai-settings { row-gap: 44px; }
  .ai-settings h3 { margin: 0 0 14px; }
  .ai-settings li > p { margin-top: 12px; }
  /* flow designer: the index below names every template, so the band drops the screenshot on phones */
  .ai-tpl-split { margin-bottom: 36px; }
  .ai-tpl-split > :nth-child(2) { display: none; }
  .ai-tpl-index { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ai-tpl-index > div { padding-top: 16px; }
  .ai-tpl-index h3 { margin-bottom: 4px; }
  .ai-tpl-index li { padding: 4px 0; }
  .ai-tpl-index li + li { border-top: 0; }
}

/* ---- 60-integrations.css ---- */
/* ==========================================================================
   Integrations: the hub (/app-crm-integrations) and the app pages (/integrations/*)
   Rendered by _site-src/pages_integrations.py. Every class here starts with int-.
   ========================================================================== */

/* no lone word on the last line of a paragraph in these sections (headings already balance) */
.int-sect :is(p, dd, li), .int-sect .note > div, .int-hero .lede, .int-hub-hero .lede { text-wrap: pretty; }

/* ---------- apps index: one ruled row per app (hub groups, "more ways to connect") ---------- */
.int-index { border-bottom: 1px solid var(--line); }
.int-group { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 18px clamp(28px, 5vw, 72px); padding: 26px 0 12px; border-top: 1.5px solid var(--ink); }
.int-group-head h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem); font-weight: 600; line-height: 1.15; letter-spacing: -.012em; }
.int-count { display: block; margin-top: 6px; font-size: .9rem; color: var(--muted); }

.int-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
.int-apps > li { border-top: 1px solid var(--line-2); }
.int-app { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 14px; align-items: center; padding: 14px 0; color: var(--text); }
.int-group .int-apps > li:nth-child(-n+2) { border-top: 0; }
.int-group .int-apps > li:nth-child(-n+2) .int-app { padding-top: 2px; }
.int-app .app-ico, .int-app-all { width: 40px; height: 40px; border-radius: 11px; font-size: .74rem; }
.int-app-all { display: grid; place-items: center; background: var(--primary); color: var(--on-primary); }
/* 40-mockups.css recolours .ico-cal to the accent (pale green in dark mode, poor with white letters): keep the logo green here */
.int-app .ico-cal, .int-cell-app .ico-cal { background: #11603d; }
.int-app-all svg { width: 19px; height: 19px; }
.int-app-txt strong { display: block; font-size: 1.04rem; line-height: 1.3; transition: color .15s; }
.int-app-txt > span { display: block; margin-top: 2px; font-size: .94rem; line-height: 1.45; color: var(--muted); }
a.int-app::after { content: "\2192"; justify-self: end; font-weight: 650; color: var(--accent); transition: transform .2s; }
a.int-app:hover strong { color: var(--accent); }
a.int-app:hover::after { transform: translateX(4px); }

/* the four-across version at the end of an app page */
.int-apps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.int-apps-4 > li { border-top-color: var(--line); }
.int-apps-4 .int-app { align-items: start; padding: 18px 0 20px; }
.int-apps-4 a.int-app::after { margin-top: 8px; }
/* the link inside a section head's text ("More ways to connect") never breaks */
.int-sect .section-head p .link-arrow { white-space: nowrap; }

/* ---------- hub: what each kind of tool does on a call ---------- */
.int-verbs { border-bottom: 1px solid var(--line); }
.int-verb { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px clamp(24px, 4vw, 56px); align-items: start; padding: 24px 0 26px; border-top: 1px solid var(--line); }
.int-verb dt { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.15rem); line-height: 1.1; letter-spacing: -.01em; color: var(--accent); }
.int-verb dd { margin: 0; padding-top: 4px; color: var(--text); }
.int-verb-ex { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.int-verb-ex .app-ico { width: 24px; height: 24px; border-radius: 7px; font-size: .7rem; margin-top: 1px; }
.int-verb-ex q { font-family: var(--font-display); font-size: 1.04rem; color: var(--ink); }

/* ---------- hub: setup beside the connector screenshot (the screenshot gets the wider side) ---------- */
.int-how { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

/* ---------- hub: permissions table ---------- */
.int-cell-app { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.int-cell-app .app-ico { width: 24px; height: 24px; border-radius: 7px; font-size: .7rem; }
.int-na { color: var(--muted); }
.int-perms .compare tbody tr:hover > * { background: var(--accent-softer); }
.int-perms .compare tbody tr:last-child th { border-bottom: 0; }
.int-sep, .int-key { display: none; }

/* ---------- hub: security on the green band ---------- */
.int-sec .ruled > * { border-top-color: var(--band-line); }
.int-sec .ruled h3 svg { color: var(--band-accent); }
.int-sec .ruled p { color: var(--band-text); }
.int-sec .lede { max-width: 44ch; }

/* ---------- app pages: hero with the app joined to the agent ---------- */
.int-hero .hero-grid, .int-hub-hero .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.int-hero h1 { font-size: clamp(2.15rem, 1.5rem + 2.2vw, 3rem); }
.int-lockup { display: flex; align-items: center; margin-bottom: 22px; }
.int-lockup .app-ico, .int-bot { width: 46px; height: 46px; border-radius: 13px; font-size: .84rem; box-shadow: var(--shadow-sm); }
.int-bot { display: grid; place-items: center; background: var(--primary); color: var(--on-primary); }
.int-bot svg { width: 24px; height: 24px; }
.int-wire { position: relative; width: 58px; margin: 0 6px; border-top: 2px dashed var(--accent-line); }
.int-wire::after { content: ""; position: absolute; left: 50%; top: -6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; border: 2px solid var(--accent); background: var(--paper); }
.int-h1-pre { display: block; margin-bottom: 14px; font-family: var(--font-body); font-size: clamp(1rem, .95rem + .2vw, 1.12rem); font-weight: 650; line-height: 1.4; letter-spacing: 0; color: var(--accent); }
.int-h1-main { display: block; }
.int-h1-main::first-letter { text-transform: uppercase; }

/* ---------- app pages: the four actions (text beside a 2 x 2 ruled list) ---------- */
.int-can { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }

/* ---------- app pages: a real call, on the green band ---------- */
.int-call { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.int-exchange { display: grid; gap: 22px; justify-items: start; }
.int-exchange .said { padding-left: 24px; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); line-height: 1.32; color: var(--band-text); border-left-color: var(--band-line); }
.int-exchange .said cite { margin-top: 10px; font-size: .9rem; color: var(--band-muted); }
.int-reply { justify-self: stretch; padding-left: clamp(24px, 7vw, 96px); }
.int-reply .said { color: #fff; border-left-color: var(--band-accent); }
.int-tool { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-left: 24px; padding: 7px 16px 7px 7px; border: 1px dashed var(--band-accent); border-radius: var(--radius); font-size: .92rem; line-height: 1.4; }
.int-tool .app-ico { width: 26px; height: 26px; border-radius: 8px; font-size: .7rem; }
.int-tool b { color: #fff; }
.int-tool-res { font-weight: 650; color: var(--band-accent); }
.int-tool-res::before { content: "\2192"; margin-right: 8px; }
.int-also h3 { font-size: 1rem; color: var(--band-accent); }
.int-also ul { margin-top: 14px; padding: 0; list-style: none; }
.int-also li { padding: 18px 0; border-top: 1px solid var(--band-line); }
.int-also li:last-child { padding-bottom: 0; }
.int-also-q { font-family: var(--font-display); font-size: 1.14rem; line-height: 1.4; color: #fff; }
.int-also-s { font-weight: 650; color: #fff; }
.int-also li p + p { margin-top: 6px; font-size: .98rem; color: var(--band-text); }

/* ---------- app pages: setup heading with the tip beside it ---------- */
.int-setup-head { align-items: center; }
.int-setup-head .note { max-width: 480px; justify-self: end; }
.int-steps .step h3 { text-wrap: pretty; }
@media (min-width: 921px) {
  .int-steps .steps { grid-template-rows: auto auto 1fr; }
  .int-steps .step { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .int-hero .hero-grid, .int-hub-hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .int-apps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .int-verb { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); }
  .int-verb-ex { grid-column: 2; padding-top: 0; }
}
@media (max-width: 920px) {
  .int-how, .int-can { grid-template-columns: minmax(0, 1fr); }
  .int-call { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .int-group { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .int-setup-head .note { justify-self: start; margin-top: 8px; }
}
@media (max-width: 640px) {
  .int-apps { grid-template-columns: minmax(0, 1fr); }
  .int-group .int-apps > li:nth-child(2) { border-top: 1px solid var(--line-2); }
  .int-group .int-apps > li:nth-child(2) .int-app { padding-top: 14px; }
  /* more ways to connect: two columns of names, no descriptions */
  .int-apps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .int-apps-4 .int-app { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px 0; }
  .int-apps-4 .int-app .app-ico, .int-apps-4 .int-app-all { width: 32px; height: 32px; border-radius: 9px; font-size: .72rem; }
  .int-apps-4 .int-app-all svg { width: 16px; height: 16px; }
  .int-apps-4 .int-app-txt strong { font-size: .98rem; }
  .int-apps-4 .int-app-txt > span, .int-apps-4 a.int-app::after { display: none; }
  .int-verb { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0 22px; }
  .int-verb-ex { grid-column: auto; }
  .int-verb dd { padding-top: 0; }
  .int-lockup { margin-bottom: 18px; }
  .int-lockup .app-ico, .int-bot { width: 40px; height: 40px; border-radius: 11px; }
  .int-exchange { gap: 18px; }
  .int-exchange .said { padding-left: 18px; }
  .int-tool { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 10px; align-items: start; margin-left: 0; padding: 9px 14px 9px 9px; }
  .int-tool-res { grid-column: 2; }
  .int-reply { padding-left: 22px; }
  /* permissions: one ruled row per app, its name then what it allows on one wrapped line
     ("Read a row · Create a row · ..."); a value that is not a verb gets its column name */
  .int-perms .compare.stack { border-bottom: 1px solid var(--line); }
  .int-perms .compare.stack tr { padding: 13px 0 14px; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .int-perms .compare.stack tr + tr { margin-top: 0; }
  .int-perms .compare.stack tbody th { padding: 0 0 5px; }
  .int-perms .compare.stack td, .int-perms .compare.stack tbody tr:last-child td { display: inline; padding: 0; border: 0; font-size: .95rem; line-height: 1.55; color: var(--text); }
  .int-perms .compare.stack td::before { content: none; }
  .int-perms .compare.stack td .int-na { display: none; }
  .int-perms .compare.stack .int-sep { display: inline; margin: 0 .15em 0 .4em; color: var(--muted); }
  .int-perms .compare.stack .int-op { white-space: nowrap; }
  .int-perms .compare.stack .int-key { display: inline; font-weight: 600; color: var(--muted); }
  .int-perms .compare tbody tr:hover > * { background: none; }
}

/* ---- 60-more.css ---- */
/* ==========================================================================
   Call analytics, use cases, contact, terms and 404 (_site-src/pages_more.py)
   One prefix per page: ca- analytics, ucx- use cases, ct- contact, lg- terms, nf- 404.
   ========================================================================== */

/* ---------- call analytics: the screens come first ---------- */
.ca-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "title title" "lede cta";
  gap: 22px clamp(32px, 6vw, 96px);
  align-items: end;
}
.ca-title { grid-area: title; max-width: 1000px; }
.ca-title h1 { margin: 0; }
.ca-intro > .lede { grid-area: lede; max-width: 54ch; text-wrap: pretty; }
.ca-cta { grid-area: cta; }
.ca-cta .actions { margin-top: 0; }
.ca-cta .hero-proof { margin-top: 18px; }

/* the dashboard, large, on the same offset mat as the other heroes */
.ca-stage { position: relative; max-width: 1020px; margin: clamp(44px, 6vw, 76px) auto 0; isolation: isolate; }
.ca-stage::before {
  content: "";
  position: absolute;
  inset: 34px -22px -22px 44px;
  border-radius: 26px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  z-index: -1;
}
/* phones get the same screen laid out narrower, so it stays legible when scaled down */
.ca-narrow { display: none; }
/* three captions under the screenshot, named like its panels and in the same order (left, right, below) */
.ca-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); max-width: 1020px; margin: 52px auto 0; }
.ca-legend li { display: grid; align-content: start; row-gap: 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.ca-legend li::before { content: ""; width: 28px; height: 3px; margin: -15.5px 0 13px; border-radius: 2px; background: var(--accent); }
.ca-legend b { color: var(--ink); line-height: 1.4; }
.ca-legend span { font-size: .95rem; color: var(--text); text-wrap: pretty; }

.ca-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.ca-split.reverse { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.ca-note { margin-top: 28px; max-width: 360px; }

/* AI report: a big screen with a short list of what it tracks beside it */
.ca-report-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ca-tracks { border-top: 1px solid var(--line); }
.ca-tracks li { padding: 14px 0 15px; border-bottom: 1px solid var(--line); }
.ca-tracks b { display: block; color: var(--ink); font-size: 1.02rem; }
.ca-tracks span { display: block; margin-top: 2px; font-size: .96rem; color: var(--text); text-wrap: pretty; }
.ca-report-grid .link-arrow { margin-top: 22px; }

/* every report, as a plain index: name on the left, what it answers on the right */
.ca-index { margin: 0; border-top: 1px solid var(--line); }
.ca-index > div { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 6px 48px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ca-index dt { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; line-height: 1.2; letter-spacing: -.012em; color: var(--ink); }
.ca-index dd { margin: 0; color: var(--text); text-wrap: pretty; }
.ca-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.ca-ico svg { width: 18px; height: 18px; }
.ca-facts { margin-top: clamp(44px, 5vw, 72px); }
/* keeps a name on one line (inside a stat label, where every span is otherwise a block) */
.ca-facts .stat .ca-nb { display: inline; margin: 0; white-space: nowrap; }

@media (max-width: 920px) {
  .ca-intro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lede" "cta"; gap: 18px; }
  .ca-cta { margin-top: 8px; }
  .ca-legend { margin-top: 40px; }
  .ca-report-grid, .ca-split, .ca-split.reverse { grid-template-columns: minmax(0, 1fr); }
  .ca-index > div { grid-template-columns: minmax(0, 1fr); padding: 18px 0; }
  .ca-index dt { font-size: 1.25rem; }
}
@media (max-width: 640px) {
  .ca-stage::before { inset: 16px -6px -10px 14px; border-radius: 20px; }
  .ca-wide { display: none; }
  .ca-narrow { display: block; }
  .ca-legend { grid-template-columns: minmax(0, 1fr); }
  .ca-legend li { padding: 14px 0; }
  .ca-legend li:last-child { border-bottom: 1px solid var(--line); }
  .ca-index dt { gap: 12px; }
  .ca-ico { width: 32px; height: 32px; }
}

/* ---------- use cases: one short story per industry ---------- */
.ucx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.ucx-hero .hero-copy { max-width: 620px; }
.ucx-hero .lede { text-wrap: pretty; }

/* the list of industries in the hero, like the contents page of a booklet */
.ucx-index { padding: 20px 24px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.ucx-index-title { font-size: .9rem; font-weight: 650; color: var(--muted); margin-bottom: 6px; }
.ucx-index-list li { border-top: 1px solid var(--line-2); }
.ucx-jump { display: grid; grid-template-columns: 26px 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 2px; font-size: .98rem; font-weight: 600; line-height: 1.35; color: var(--ink); transition: color .15s; }
.ucx-jump::after { content: "\2193"; color: var(--accent); opacity: 0; transition: opacity .15s, transform .15s; }
.ucx-jump:hover { color: var(--accent); }
.ucx-jump:hover::after, .ucx-jump:focus-visible::after { opacity: 1; transform: translateY(2px); }
.ucx-jump svg { width: 18px; height: 18px; color: var(--muted); }
.ucx-index-n { font-family: var(--font-display); font-weight: 500; font-size: .98rem; color: var(--accent); }

/* each industry is a story. Three get a screen of the app (sides alternating), the others are told in
   two columns of text, and the last three sit side by side */
.ucx-story { padding: clamp(52px, 6.5vw, 88px) 0; border-top: 1px solid var(--line); }
.ucx-story:first-child { padding-top: 0; border-top: 0; }
.ucx-story:last-child { padding-bottom: 0; }
.ucx-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ucx-case.flip > :first-child { order: 2; }
.ucx-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ucx-n { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; line-height: 1; color: var(--accent); }
.ucx-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.ucx-ico svg { width: 19px; height: 19px; }
.ucx-story h2 { font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.35rem); }
.ucx-text { margin-top: 14px; font-size: 1.08rem; color: var(--text); max-width: 56ch; text-wrap: pretty; }
.ucx-copy .said { margin-top: 24px; }
.ucx-copy .check-list, .ucx-brief-body .check-list, .ucx-mini .check-list { margin-top: 24px; gap: 10px; }
.ucx-story .check-list li, .ucx-mini .check-list li { text-wrap: pretty; }
.ucx-visual { position: relative; min-width: 0; }
/* the calendar screen carries two floating notes: give them room inside the column */
.ucx-visual.has-float { padding: 0 22px 0 30px; }
.ucx-nb { white-space: nowrap; }

/* the templates: two quiet lines of names (not links, so not styled like buttons) */
.ucx-tpl { display: grid; gap: 8px; margin: 26px 0 0; padding-top: 16px; border-top: 1px dashed var(--line); font-size: .95rem; line-height: 1.5; }
.ucx-tpl > div { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); gap: 2px 16px; align-items: baseline; }
.ucx-tpl dt { font-size: .875rem; font-weight: 650; color: var(--muted); }
.ucx-tpl dd { margin: 0; color: var(--ink); text-wrap: pretty; }
.ucx-names { display: inline; }
/* a name never breaks in the middle: lines wrap between names */
.ucx-names li { display: inline-block; }
.ucx-names li:not(:last-child)::after { content: ","; }

/* the shorter stories: what the business hears on the left, what the agent does on the right */
.ucx-brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0 clamp(32px, 6vw, 88px); align-items: start; }
.ucx-brief-head, .ucx-brief-body { min-width: 0; }
.ucx-brief-body { padding-top: 54px; }
.ucx-brief-body .check-list { margin-top: 0; }

/* the one green band: templates */
.ucx-band-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ucx-band h2 + p { margin-top: 18px; max-width: 58ch; }
.ucx-band .link-arrow { margin-top: 24px; color: var(--band-accent); }
.ucx-band .link-arrow:hover { color: #fff; }
.ucx-figs > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: 24px 0; border-top: 1px solid var(--band-line); }
.ucx-figs > div:last-child { border-bottom: 1px solid var(--band-line); }
.ucx-figs b { font-family: var(--font-display); font-weight: 500; font-size: clamp(3rem, 2.2rem + 2.6vw, 4.4rem); line-height: 1; color: #fff; letter-spacing: -.02em; min-width: 1.3em; padding-right: .08em; }
.ucx-figs span { font-size: 1.05rem; color: var(--band-text); }

/* the last three industries, side by side: no screen, the caller's words carry each one.
   A subgrid lines up the headings, quotes and lists across the three columns. */
.ucx-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 0 clamp(28px, 4vw, 56px); }
.ucx-mini { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; min-width: 0; padding-top: 28px; border-top: 1px solid var(--line); }
.ucx-mini .ucx-meta { margin-bottom: 12px; }
.ucx-mini h2 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.7rem); }
.ucx-mini .ucx-text { font-size: 1rem; }
.ucx-mini .said { margin-top: 22px; align-self: start; font-size: 1.1rem; }
.ucx-mini .check-list { align-self: start; }
.ucx-mini .ucx-tpl { margin-top: 24px; align-self: start; }
.ucx-mini .ucx-tpl > div { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1024px) {
  .ucx-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ucx-index-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .ucx-jump { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: baseline; }
  .ucx-jump svg, .ucx-jump::after { display: none; }
  .ucx-minis { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; }
  .ucx-mini { grid-row: auto; grid-template-rows: none; padding: 40px 0; }
  .ucx-mini:first-child { padding-top: 0; border-top: 0; }
  .ucx-mini:last-child { padding-bottom: 0; }
  .ucx-mini > * { max-width: 62ch; }
  .ucx-mini .ucx-tpl > div { grid-template-columns: 10.5em minmax(0, 1fr); }
}
@media (max-width: 920px) {
  .ucx-case, .ucx-brief { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .ucx-case.flip > :first-child { order: 0; }
  .ucx-brief { gap: 0; }
  .ucx-brief-body { padding-top: 24px; }
  .ucx-band-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ucx-index { padding: 16px 18px 6px; }
  .ucx-index-list { grid-template-columns: minmax(0, 1fr); }
  .ucx-jump { grid-template-columns: 24px 16px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; font-size: .95rem; }
  .ucx-jump svg { display: block; }
  .ucx-story { padding: 44px 0; }
  .ucx-mini { padding: 36px 0; }
  .ucx-text { font-size: 1.02rem; }
  /* the label sits above its names, the same way for both lines (a label never ends up alone beside them) */
  .ucx-tpl { gap: 12px; }
  .ucx-tpl > div, .ucx-mini .ucx-tpl > div { display: block; }
  .ucx-tpl dt { display: block; margin: 0 0 2px; }
  .ucx-tpl dd { display: block; }
  .ucx-visual.has-float { padding: 0; }
  .ucx-figs > div { gap: 18px; padding: 20px 0; }
}

/* ---------- contact: the form beside a calm column of details ---------- */
.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr);
  grid-template-areas: "intro form" "aside form";
  grid-template-rows: auto 1fr;
  gap: 0 clamp(40px, 6vw, 96px);
  align-items: start;
}
.ct-intro { grid-area: intro; }
.ct-intro h1 { margin-bottom: 20px; }
.ct-intro .lede { text-wrap: pretty; }
.ct-form { grid-area: form; min-width: 0; }
.ct-aside { grid-area: aside; margin-top: 48px; }

.ct-card { position: relative; padding: clamp(22px, 3.4vw, 40px); box-shadow: var(--shadow-lg); }
.ct-card-title { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.8rem); }
.ct-card-sub { margin-top: 8px; color: var(--muted); }
.ct-card .form-grid { margin-top: 26px; }
.ct-card .form-alert { margin: 18px 0 0; }
.ct-card .form-alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.ct-card .form-alert:focus-visible { outline-offset: 2px; }
.ct-card .field-hint { display: flex; align-items: baseline; gap: 12px; }
/* what to put in the message, kept in view while typing (a placeholder would vanish) */
.ct-help { margin-top: -2px; font-size: .9rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.ct-count { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }
.ct-card .checkbox { font-weight: 450; color: var(--text); line-height: 1.5; cursor: pointer; }
.ct-card .checkbox a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--accent-line); }
.ct-card .checkbox a:hover { color: var(--accent-strong); text-decoration-color: currentColor; }
/* the honeypot stays off screen, out of the tab order and away from screen readers */
.ct-card .hp-field { left: 0; top: 0; clip-path: inset(50%); opacity: 0; pointer-events: none; white-space: nowrap; }
.ct-card .form-footer { flex-wrap: nowrap; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.ct-card .form-footer .btn { flex: none; }
.ct-fine { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; line-height: 1.45; color: var(--muted); }
.ct-fine svg { width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.btn-label { display: inline-block; }
/* the shared error colours only switch with the theme button; follow the device's dark setting here too */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ct-card .form-alert.err { background: #3a1912; color: #ffb3a3; border-color: #5c2a1e; }
  :root:not([data-theme="light"]) .ct-card .field-error { color: #ff9a85; }
}

.ct-aside-title { font-size: clamp(1.35rem, 1.2rem + .5vw, 1.6rem); }
.ct-lines { margin: 18px 0 0; border-top: 1px solid var(--line); }
.ct-lines > div { position: relative; padding: 14px 0 15px 52px; border-bottom: 1px solid var(--line); }
.ct-lines dt { font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--muted); }
.ct-lines dt svg { position: absolute; left: 0; top: 17px; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.ct-lines dd { margin: 2px 0 0; color: var(--ink); font-weight: 550; line-height: 1.5; }
.ct-aside .note { margin-top: 32px; }
.ct-aside .note p + p { margin-top: 8px; }

@media (max-width: 960px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "aside"; grid-template-rows: none; }
  .ct-intro { margin-bottom: 32px; }
}
@media (max-width: 640px) {
  .ct-card { padding: 22px 18px; border-radius: var(--radius); }
  .ct-card .form-footer { flex-direction: column-reverse; align-items: stretch; }
  .ct-card .form-footer .btn { width: 100%; }
}

/* ---------- terms: a readable legal page ---------- */
.lg-hero { padding-bottom: clamp(32px, 4vw, 52px); border-bottom: 1px solid var(--line); }
.lg-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px clamp(32px, 5vw, 80px); align-items: end; }
.lg-head h1 { margin: 0; }
.lg-meta .lede { max-width: 46ch; text-wrap: pretty; }
.lg-updated { margin-top: 12px; font-size: .95rem; color: var(--muted); }
.lg-updated time { color: var(--ink); font-weight: 600; }
.lg-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lg-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .9rem; font-weight: 600; color: var(--ink); transition: border-color .15s, color .15s; }
.lg-chip:hover { border-color: var(--accent); color: var(--accent); }
.hero + .lg-body { padding-top: clamp(36px, 5vw, 64px); }

.lg-toc { border-left: 0; padding-left: 0; max-height: calc(100vh - var(--header-h) - 56px); overflow-y: auto; overscroll-behavior: contain; }
.lg-toc h2 { font-family: var(--font-body); font-size: .95rem; font-weight: 650; letter-spacing: 0; line-height: 1.4; color: var(--ink); margin-bottom: 12px; }
.lg-toc-list { border-left: 2px solid var(--line); }
.lg-toc .lg-toc-link { display: grid; grid-template-columns: 1.7em minmax(0, 1fr); gap: 4px; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; font-size: .92rem; line-height: 1.35; color: var(--muted); transition: color .15s, border-color .15s; }
.lg-toc .lg-toc-link:hover { color: var(--ink); border-left-color: var(--accent); }
.lg-n { color: var(--accent); font-weight: 650; font-variant-numeric: tabular-nums; }

.lg-prose { max-width: 70ch; }
.lg-prose > section + section { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--line); }
.lg-prose h2 { margin: 0 0 .65em; font-size: clamp(1.45rem, 1.25rem + .7vw, 1.85rem); }
.lg-prose h3 { margin: 1.6em 0 .45em; font-size: 1.08rem; }
.lg-prose p + p { margin-top: .85em; }
.lg-prose .note { margin: 1.3em 0; }
.lg-prose section:target h2 { color: var(--accent); }
/* the way back to the contents, after each section: only where the contents do not follow the reader */
.lg-back { display: none; }

@media (max-width: 860px) {
  .lg-head { grid-template-columns: minmax(0, 1fr); }
  .lg-toc { max-height: none; overflow: visible; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .lg-toc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; border-left: 0; }
  .lg-toc .lg-toc-link { margin: 0; padding: 6px 0; border-left: 0; }
  .lg-prose .lg-back { display: block; margin-top: 22px; }
  .lg-back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: .92rem; font-weight: 650; color: var(--accent); }
  .lg-back-link::before { content: "\2191"; }
  .lg-back-link:hover { color: var(--accent-strong); }
}
@media (max-width: 520px) {
  .lg-toc-list { grid-template-columns: minmax(0, 1fr); }
  .lg-toc .lg-toc-link { padding: 5px 0; }
  .lg-prose > section + section { margin-top: 32px; padding-top: 30px; }
}

/* ---------- 404 ---------- */
.nf { padding: clamp(48px, 7vw, 112px) 0; }
.nf-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
/* the number trails off into a cut phone line */
.nf-code { display: flex; align-items: center; gap: 22px; margin-bottom: 20px; font-family: var(--font-display); font-weight: 500; font-size: clamp(4.6rem, 3rem + 7vw, 8.5rem); line-height: .9; letter-spacing: -.03em; color: var(--accent); }
.nf-code::after { content: ""; flex: 1; max-width: 200px; border-top: 2px dashed var(--accent-line); }
.nf-main h1 { font-size: clamp(2.2rem, 1.45rem + 2.55vw, 3.55rem); margin-bottom: 18px; }
/* two short lines rather than one long line and a stub */
.nf-main .lede { text-wrap: balance; }
.nf-main .actions { margin-top: 28px; }
.nf-links { min-width: 0; }
.nf-links-title { font-size: .95rem; font-weight: 650; color: var(--muted); margin-bottom: 10px; }
.nf-list { border-top: 1px solid var(--line); }
.nf-list li { border-bottom: 1px solid var(--line); }
.nf-link { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 4px; }
.nf-link::after { content: "\2192"; font-weight: 650; color: var(--accent); transition: transform .2s; }
.nf-link:hover::after { transform: translateX(4px); }
.nf-link:hover strong { color: var(--accent); }
.nf-link strong { display: block; font-size: 1.05rem; color: var(--ink); transition: color .15s; }
.nf-link > span > span { display: block; margin-top: 2px; font-size: .93rem; line-height: 1.45; color: var(--muted); }
.nf-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.nf-ico svg { width: 20px; height: 20px; }
@media (max-width: 860px) {
  .nf-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 60-phone.css ---- */
/* ==========================================================================
   Phone system pages (_site-src/pages_phone.py): cloud PBX hub, numbers, IVR,
   queues, ring groups, conference rooms.
   Prefixes: tel- (shared by these pages), pbx-, num-, ivr-, cq-, rg-, conf-.
   ========================================================================== */

/* ---------- shared ---------- */
/* a long inner-page title, set a size smaller so it stays on three lines */
.hero h1 .tel-h1 { display: block; font-size: .86em; }
/* a round phone key, used wherever a menu key is named */
.tel-key {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  flex: none;
}
.tel-after-table { margin-top: 22px; }
/* small labels outside the screenshots: site size and colours (40-mockups.css sizes .tag for the app screens) */
.ivr-keys .tag, .conf-invite .tag { padding: 3px 10px; font-size: .8rem; font-weight: 650; background: var(--paper-2); color: var(--text); }
.ivr-keys .tag.green { background: var(--accent-soft); color: var(--accent); }
.conf-invite .tag { background: var(--accent-soft); color: var(--accent); }

/* ---------- cloud PBX: the index of everything included ---------- */
.pbx-what { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pbx-what-head { position: sticky; top: calc(var(--header-h) + 32px); }
/* a narrow sticky column: a size smaller than a full-width section title, so it sets in three lines */
.pbx-what-head h2 { font-size: clamp(1.9rem, 1.3rem + 1.4vw, 2.45rem); }
.pbx-what-head p { margin-top: 18px; font-size: 1.1rem; max-width: 40ch; }
.pbx-group + .pbx-group { margin-top: 40px; }
.pbx-group h3 { padding-bottom: 12px; font-size: .875rem; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
.pbx-index { border-top: 1.5px solid var(--ink); }
.pbx-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 18px;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.pbx-row::after { content: "\2192"; font-weight: 650; color: var(--accent); transition: transform .2s; }
.pbx-row:hover strong { color: var(--accent); }
.pbx-row:hover::after { transform: translateX(4px); }
.pbx-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.pbx-ico svg { width: 20px; height: 20px; }
.pbx-txt strong { display: block; font-size: 1.12rem; font-weight: 650; color: var(--ink); transition: color .15s; }
.pbx-txt span { display: block; margin-top: 2px; font-size: .97rem; color: var(--text); }
.pbx-fact { font-family: var(--font-display); font-size: 1.05rem; color: var(--accent); white-space: nowrap; }

/* the call flow map gets the bigger half */
.pbx-flow { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }

/* reasons set as short essays: serif titles, no icons */
.pbx-why .ruled h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.012em; }

@media (max-width: 920px) {
  .pbx-what { grid-template-columns: minmax(0, 1fr); }
  .pbx-what-head { position: static; }
  .pbx-flow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pbx-row { grid-template-columns: 36px minmax(0, 1fr) 14px; gap: 14px; align-items: start; padding: 16px 0; }
  .pbx-ico { width: 36px; height: 36px; border-radius: 10px; }
  .pbx-ico svg { width: 18px; height: 18px; }
  .pbx-fact { display: none; }
  .pbx-row::after { margin-top: 4px; }
  .pbx-txt strong { font-size: 1.06rem; }
  .pbx-why .ruled h3 { font-size: 1.25rem; }
}

/* ---------- virtual numbers: the countries, by region ---------- */
.num-atlas-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.num-atlas-top > div { max-width: 640px; }
.num-atlas-top h2 + p { margin-top: 16px; font-size: 1.1rem; }
.num-count { order: -1; display: flex; flex-direction: column; font-family: var(--font-display); color: var(--accent); }
.num-count b {
  font-size: clamp(5.5rem, 3.6rem + 7vw, 10rem);
  font-weight: 600;
  line-height: .8;
  letter-spacing: -.05em;
  color: inherit;
}
.num-count span { margin-top: 12px; font-size: 1.15rem; color: var(--ink); }
.num-regions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px clamp(24px, 4vw, 56px); }
.num-region h3 { padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); font-size: .875rem; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
.num-region + .num-region { margin-top: 28px; }
.num-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); }
.num-regions > div:first-child .num-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.num-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.num-list img { width: 24px; height: 24px; flex: none; }
/* a region with a single country (Oceania) takes one list column, not a long rule with one name under it */
.num-region-one { width: calc((100% - clamp(24px, 4vw, 56px)) / 2); }
.num-regions > div:first-child .num-region-one .num-list { grid-template-columns: minmax(0, 1fr); }

/* number types, set like a type specimen */
.num-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.num-type { padding: 4px clamp(20px, 3vw, 44px) 8px; border-left: 1px solid var(--line); }
.num-type:first-child { padding-left: 0; border-left: 0; }
.num-type-ico { width: 44px; height: 44px; margin-bottom: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--accent-line); color: var(--accent); }
.num-type-ico svg { width: 20px; height: 20px; }
.num-type h3 { margin-bottom: 12px; font-size: 1rem; font-weight: 600; color: var(--muted); }
.num-type h3 span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
}
.num-type p { color: var(--text); }
.num-premium { max-width: 560px; margin-top: clamp(32px, 4vw, 48px); }
.num-cancel { display: flex; align-items: flex-start; gap: 10px; margin-top: clamp(32px, 4vw, 44px); padding-top: 18px; border-top: 1px solid var(--line); font-size: .97rem; color: var(--muted); }
.num-cancel svg { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }

@media (max-width: 860px) {
  .num-atlas-top { grid-template-columns: minmax(0, 1fr); }
  .num-count { order: 0; flex-direction: row; align-items: baseline; gap: 14px; }
  .num-count span { margin-top: 0; }
  .num-regions { grid-template-columns: minmax(0, 1fr); }
  /* on one column the regions read Europe, the Americas, Oceania */
  .num-regions > div:first-child { display: contents; }
  .num-regions .num-region + .num-region { margin-top: 0; }
  .num-regions > .num-region { order: 1; }
  .num-regions > div:first-child > .num-region:last-child { order: 2; }
  .num-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .num-types { grid-template-columns: minmax(0, 1fr); }
  .num-type, .num-type:first-child { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 18px; }
  .num-type-ico { grid-row: 1 / span 2; margin: 4px 0 0; }
}
@media (max-width: 420px) {
  .num-list li { gap: 10px; font-size: .95rem; }
  .num-list img { width: 20px; height: 20px; }
}

/* ---------- IVR: example menus on a keypad ---------- */
.ivr-examples .section-head p { text-wrap: balance; }
.ivr-demo .tour-tabs { margin-bottom: clamp(32px, 4vw, 48px); }
/* only three tabs: keep them all in view on small screens instead of a scrolling, faded strip */
@media (max-width: 920px) {
  .ivr-demo .tour-tabs { width: fit-content; border-radius: 999px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 520px) {
  .ivr-demo .tour-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; }
  .ivr-demo .tour-tab { justify-content: center; padding: 9px 6px; font-size: .9rem; }
  .ivr-demo .tour-tab svg { display: none; }
}
.ivr-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(36px, 7vw, 96px); align-items: center; max-width: 940px; margin: 0 auto; }
.ivr-phone { width: 268px; padding: 22px 24px 28px; border-radius: 34px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.ivr-screen { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); text-align: center; }
.ivr-screen b { display: block; font-size: 1.05rem; color: var(--ink); }
.ivr-screen span { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ivr-keypad { display: grid; grid-template-columns: repeat(3, 58px); justify-content: space-between; gap: 14px 0; }
.ivr-keypad span {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
}
.ivr-keypad small { margin-top: 3px; font-family: var(--font-body); font-size: .69rem; font-weight: 600; letter-spacing: .1em; }
.ivr-keypad .on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 5px var(--accent-soft); font-weight: 600; }
.ivr-script .said { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.ivr-keys { margin-top: 28px; border-top: 1px solid var(--line); }
.ivr-keys li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.ivr-dest { font-weight: 600; color: var(--ink); }

/* IVR: what happens after the greeting, drawn as three branches */
.ivr-tree { --tree-gap: 32px; --tree-col: clamp(20px, 3vw, 44px); }
.ivr-root {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto var(--tree-gap);
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 650;
}
.ivr-root svg { width: 16px; height: 16px; }
.ivr-root::after { content: ""; position: absolute; left: 50%; top: 100%; height: var(--tree-gap); border-left: 1.5px dashed var(--accent); }
/* on three columns the root sits over the middle branch, so its line drops onto that branch */
@media (min-width: 861px) {
  .ivr-root { margin-left: calc((100% - 2 * var(--tree-col)) / 3 + var(--tree-col) + 18px); transform: translateX(-50%); }
}
ol.ivr-branches { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--tree-col); padding-top: var(--tree-gap); }
.ivr-branches::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: calc((100% - 2 * var(--tree-col)) / 3 - 18px);
  border-top: 1.5px dashed var(--accent);
}
.ivr-branches > li { position: relative; }
.ivr-branches > li::before { content: ""; position: absolute; left: 18px; top: calc(-1 * var(--tree-gap)); height: var(--tree-gap); border-left: 1.5px dashed var(--accent); }
.ivr-branches h3 { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ivr-node { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface); border: 1.5px solid var(--accent); color: var(--accent); }
.ivr-node svg { width: 17px; height: 17px; }
.ivr-path { margin-left: 17px; border-left: 1.5px dashed var(--accent-line); }
.ivr-path li { position: relative; padding: 0 0 14px 26px; color: var(--text); font-size: .98rem; }
.ivr-path li:last-child { padding-bottom: 2px; }
.ivr-path li::before { content: ""; position: absolute; left: -5px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ivr-path li:last-child::before { border-radius: 2px; transform: rotate(45deg); }
.ivr-more { margin-top: clamp(44px, 5vw, 72px); }

/* IVR or AI: two columns joined by an ampersand */
.ivr-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; max-width: 1000px; margin: 0 auto; }
.ivr-vs-col { padding-top: 26px; border-top: 1.5px solid var(--ink); }
.ivr-vs-ico { width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.ivr-vs-ico svg { width: 21px; height: 21px; }
.ivr-vs-col h3 { margin-bottom: 18px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; letter-spacing: -.012em; }
.ivr-vs-and { align-self: center; font-family: var(--font-display); font-size: clamp(3rem, 2rem + 3vw, 4.75rem); font-weight: 500; line-height: 1; color: var(--accent); }
.ivr-vs-link { margin-top: 40px; text-align: center; }

@media (max-width: 860px) {
  .ivr-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ivr-phone { justify-self: center; }
  .ivr-tree { --tree-gap: 26px; }
  .ivr-root { margin-left: 0; }
  .ivr-root::after { left: 18px; }
  ol.ivr-branches { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 0; }
  .ivr-branches::before { top: 0; bottom: 0; left: 17px; right: auto; border-top: 0; border-left: 1.5px dashed var(--accent-line); }
  .ivr-branches > li::before { display: none; }
  .ivr-path { border-left-color: transparent; }
  .ivr-vs { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ivr-vs-and { justify-self: center; font-size: 3rem; }
}
@media (max-width: 420px) {
  /* a smaller keypad, so the script and the keys stay close to the tabs that change them */
  .ivr-phone { width: 216px; padding: 16px 18px 20px; border-radius: 28px; box-shadow: var(--shadow); }
  .ivr-screen { margin-bottom: 14px; padding-bottom: 12px; }
  .ivr-keypad { grid-template-columns: repeat(3, 46px); gap: 10px 0; }
  .ivr-keypad span { width: 46px; height: 46px; font-size: 1.15rem; }
  .ivr-keypad small { margin-top: 1px; }
  .ivr-keypad .on { box-shadow: 0 0 0 4px var(--accent-soft); }
  .ivr-keys li { grid-template-columns: 32px minmax(0, 1fr); gap: 4px 14px; }
  .ivr-keys .tel-key { grid-row: 1 / span 2; width: 32px; height: 32px; }
  .ivr-keys .tag { justify-self: start; }
}

/* ---------- call queues ---------- */
/* the settings screen is shorter than the strategy list: centre it, and let it follow the list while reading */
@media (min-width: 921px) {
  .cq-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .cq-split > div:last-child { position: sticky; top: calc(var(--header-h) + 32px); }
}
.cq-strats { margin-top: 26px; border-top: 1px solid var(--line); counter-reset: cq; }
.cq-strats li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px; padding: 13px 0; border-bottom: 1px solid var(--line); counter-increment: cq; }
.cq-strats li::before { content: counter(cq); grid-row: 1 / span 2; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.35; color: var(--accent); }
.cq-strats strong { display: block; color: var(--ink); }
.cq-strats span { display: block; font-size: .97rem; color: var(--text); }
.cq-after { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 28px clamp(28px, 5vw, 80px); margin-top: clamp(36px, 4vw, 52px); }
.cq-after h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cq-after h3 svg { width: 20px; height: 20px; color: var(--accent); }
.cq-after .muted { font-size: .95rem; }
.cq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.cq-chips li { padding: 4px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .9rem; font-weight: 600; color: var(--ink); }
@media (max-width: 760px) { .cq-after { grid-template-columns: minmax(0, 1fr); } }

/* ---------- ring groups: five strategies as small pictures ---------- */
.rg-strats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.rg-strat { padding: 28px clamp(14px, 2vw, 26px) 8px; border-left: 1px solid var(--line); }
.rg-strat:first-child { padding-left: 0; border-left: 0; }
.rg-strat h3 { margin-bottom: 6px; }
.rg-strat p { font-size: .97rem; color: var(--text); }
.rg-dots { display: grid; grid-template-columns: repeat(4, 14px); grid-auto-rows: 14px; gap: 8px 10px; height: 58px; margin-bottom: 22px; align-content: start; }
.rg-dots i, .rg-legend i { display: block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted); opacity: .5; }
.rg-dots i.r, .rg-legend i.r { background: var(--accent); border-color: var(--accent); opacity: 1; box-shadow: 0 0 0 3px var(--accent-soft); }
.rg-dots i.b, .rg-legend i.b { background: var(--muted); }
.rg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.rg-legend span { display: inline-flex; align-items: center; gap: 8px; }
.rg-legend-note { margin-left: auto; }
@media (max-width: 1024px) {
  .rg-strats { grid-template-columns: minmax(0, 1fr); }
  .rg-strat, .rg-strat:first-child { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 20px; padding: 22px 0; border-left: 0; }
  .rg-strat + .rg-strat { border-top: 1px solid var(--line); }
  .rg-dots { grid-row: 1 / span 2; margin: 4px 0 0; }
  .rg-legend-note { margin-left: 0; }
}

/* ring groups: the no-answer path, on the green band */
ol.rg-chain { max-width: 460px; margin-left: auto; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--band-2); border: 1px solid var(--band-line); }
.rg-chain li { position: relative; padding: 0 0 26px 40px; }
.rg-chain li:last-child { padding-bottom: 0; }
.rg-chain li::before { content: ""; position: absolute; left: 0; top: 4px; z-index: 1; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--band-accent); background: var(--band-2); }
.rg-chain li::after { content: ""; position: absolute; left: 8px; top: 24px; bottom: 2px; border-left: 2px dotted var(--band-muted); }
.rg-chain li:last-child::after { display: none; }
.rg-chain b { display: block; font-size: 1.08rem; font-weight: 650; color: #fff; text-wrap: balance; }
.rg-chain span { display: block; margin-top: 2px; font-size: .95rem; color: var(--band-muted); }
.rg-chain li.miss::before { border-style: dashed; border-color: var(--band-muted); }
.rg-chain li.miss b { font-weight: 600; color: var(--band-text); }
.rg-chain li.end::before { background: var(--band-accent); }
.rg-net .check-list { color: var(--band-text); }
/* stacked under the text: line the card up with the heading and list (same selector as the base rule, so it wins) */
@media (max-width: 920px) { ol.rg-chain { margin-left: 0; } }

/* ---------- conference rooms ---------- */
/* the three joining steps run down the page beside the example invite */
.conf-join .steps { grid-template-columns: minmax(0, 1fr); margin-top: 30px; }
.conf-join .step { padding: 0 0 24px 58px; }
.conf-join .step:last-child { padding-bottom: 0; }
.conf-join .step::before { position: absolute; left: 0; top: 0; margin: 0; }
.conf-join .step::after { top: 40px; bottom: 0; left: 19px; right: auto; border-top: 0; border-left: 1.5px dashed var(--accent-line); }
.conf-join .step h3 { margin-bottom: 4px; padding-top: 6px; }
.conf-invite {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 30px 32px 24px;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: rotate(1.2deg);
}
.conf-invite figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.conf-invite figcaption b { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; line-height: 1.1; letter-spacing: -.015em; color: var(--ink); }
.conf-invite dl { margin: 0; }
.conf-invite dl div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 14px 0; border-top: 1px dashed var(--line); }
.conf-invite dt { font-size: .93rem; color: var(--muted); }
.conf-invite dd { margin: 0; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.conf-invite > p { padding-top: 14px; border-top: 1px dashed var(--line); font-size: .93rem; color: var(--muted); }
.conf-features .feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px clamp(24px, 4vw, 56px); }
@media (max-width: 920px) { .conf-features .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .conf-features .feature-list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .conf-invite { transform: none; padding: 24px 22px 20px; }
}

/* ---- 61-phone2.css ---- */
/* ==========================================================================
   Phone system, part two (_site-src/pages_phone2.py):
   /sip-webphone, /announcements, /audio-store, /international-calls, /free-local-calls
   Every class here starts with p2- so it never touches another page.
   ========================================================================== */

/* ---------- SIP phones: the three kinds of device, split by thin rules ---------- */
.p2-devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.p2-devices > li { display: flex; flex-direction: column; padding: 30px clamp(20px, 3vw, 40px) 4px; }
.p2-devices > li:first-child { padding-left: 0; }
.p2-devices > li:last-child { padding-right: 0; }
.p2-devices > li + li { border-left: 1px solid var(--line); }
.p2-dev-ico { width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--accent-line); background: var(--surface); color: var(--accent); }
.p2-dev-ico svg { width: 23px; height: 23px; }
.p2-devices h3 { margin-bottom: 6px; }
.p2-devices p { font-size: .98rem; }
.p2-devices p:not(.p2-dev-eg) { margin-bottom: 16px; }
/* the examples line up along the bottom of the three columns */
.p2-devices .p2-dev-eg { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); font-weight: 650; color: var(--ink); }
.p2-dev-eg span { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
/* on three columns the rows are shared, so the "For example" rules line up even when one example wraps */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 761px) {
    .p2-devices { grid-template-rows: repeat(4, auto); }
    .p2-devices > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .p2-devices .p2-dev-ico { justify-self: start; }
    .p2-devices .p2-dev-eg { margin-top: 0; }
  }
}
@media (max-width: 760px) {
  .p2-devices { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .p2-devices > li, .p2-devices > li:first-child, .p2-devices > li:last-child { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; }
  .p2-devices > li + li { border-left: 0; }
  .p2-devices > li { border-top: 1px solid var(--line); }
  .p2-devices > li > * { grid-column: 2; }
  .p2-devices > li > .p2-dev-ico { grid-column: 1; grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; }
  .p2-devices p:not(.p2-dev-eg) { margin-bottom: 0; }
  .p2-devices .p2-dev-eg { margin-top: 10px; padding-top: 8px; }
}

/* ---------- SIP phones: five free places, drawn on the green band ---------- */
.p2-price .split { align-items: center; }
.p2-slots { margin: 0; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius-lg); border: 1px solid var(--band-line); background: var(--band-2); }
.p2-slots-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-bottom: 18px; font-size: .9rem; font-weight: 600; color: var(--band-muted); }
.p2-slots-head span:last-child { color: var(--band-accent); }
.p2-slot-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.p2-slot-list li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--band-line); background: rgba(255, 255, 255, .05); }
.p2-slot-list li::after { content: ""; position: absolute; top: 16px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--band-accent); }
.p2-slot-list b { font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; line-height: 1.1; color: #fff; }
.p2-slot-list span { font-size: .86rem; font-weight: 600; color: var(--band-accent); }
.p2-slot-list .p2-slot-extra { border-style: dashed; border-color: var(--band-muted); background: transparent; }
.p2-slot-list .p2-slot-extra::after { background: transparent; border: 1.5px solid var(--band-muted); }
.p2-slot-list .p2-slot-extra b { color: var(--band-text); }
.p2-slot-list .p2-slot-extra span { color: var(--band-muted); }
.p2-slots figcaption { margin-top: 18px; font-size: .96rem; line-height: 1.55; color: var(--band-text); }
@media (max-width: 420px) {
  .p2-slot-list { gap: 8px; }
  .p2-slot-list li { padding: 11px 12px; }
  .p2-slot-list li::after { top: 13px; right: 12px; }
  .p2-slot-list b { font-size: 1.35rem; }
  .p2-slot-list span { font-size: .8rem; }
}

/* a tip under the setup steps */
.p2-after-steps { max-width: 640px; margin: clamp(32px, 4vw, 48px) auto 0; }

/* ---------- Announcements: the four settings, numbered ---------- */
.p2-settings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px clamp(20px, 3vw, 36px); counter-reset: p2set; }
.p2-settings li { counter-increment: p2set; padding-top: 18px; border-top: 2px solid var(--accent-line); }
.p2-settings li::before { content: counter(p2set, decimal-leading-zero); display: block; margin-bottom: 12px; font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; line-height: 1; color: var(--accent); }
.p2-settings h3 { margin-bottom: 6px; }
.p2-settings p { font-size: .98rem; }
@media (max-width: 920px) { .p2-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .p2-settings { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .p2-settings li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 16px 0; border-top-width: 1px; border-top-color: var(--line); }
  .p2-settings li::before { grid-row: 1 / span 2; margin: 2px 0 0; font-size: 1.25rem; }
}

/* ---------- Announcements: the greeting on the left, the uses on the right ---------- */
.p2-uses { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.p2-uses h2 { margin-bottom: 18px; }
.p2-uses .lede { text-wrap: balance; }
.p2-uses .said { margin-top: 30px; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem); line-height: 1.35; }
.p2-uses .ruled { grid-template-columns: minmax(0, 1fr); }
.p2-uses .ruled > :last-child { border-bottom: 1px solid var(--line); }
.p2-uses .ruled > * { padding: 18px 0 20px; }
@media (max-width: 920px) { .p2-uses { grid-template-columns: minmax(0, 1fr); } }

/* the destinations a call can take after the message */
.p2-sub { margin: 30px 0 12px; font-size: 1rem; }
.p2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.p2-chips li { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .9rem; font-weight: 600; color: var(--ink); }
.p2-chips li:last-child { border-style: dashed; background: transparent; color: var(--text); }

/* ---------- Audio store: record or upload, either side of an "or" ---------- */
.p2-ways { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); max-width: 1040px; margin: 0 auto; }
.p2-way-ico { width: 54px; height: 54px; margin-bottom: 20px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.p2-way-ico svg { width: 25px; height: 25px; }
.p2-way h3 { margin-bottom: 10px; font-family: var(--font-display); font-size: clamp(1.45rem, 1.25rem + .7vw, 1.8rem); font-weight: 600; letter-spacing: -.015em; }
.p2-way p { color: var(--text); }
.p2-or { position: relative; display: grid; place-items: center; }
.p2-or::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed var(--line); }
.p2-or span { position: relative; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--paper); font-family: var(--font-display); font-size: 1.15rem; color: var(--accent); }
.p2-way-flow { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; counter-reset: p2flow; }
.p2-way-flow li { counter-increment: p2flow; display: inline-flex; align-items: center; gap: 8px; font-size: .94rem; font-weight: 600; color: var(--ink); }
.p2-way-flow li::before { content: counter(p2flow); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--accent); font-size: .78rem; font-weight: 700; color: var(--accent); }
.p2-formats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.p2-formats li { padding: 4px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-family: var(--font-mono); font-size: .86rem; font-weight: 600; color: var(--ink); }
.p2-after-ways { max-width: 640px; margin: clamp(36px, 4vw, 52px) auto 0; }
@media (max-width: 760px) {
  .p2-ways { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .p2-or { height: 64px; }
  .p2-or::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1px dashed var(--line); }
  .p2-way-ico { width: 46px; height: 46px; margin-bottom: 14px; border-radius: 14px; }
}

/* the table of places a recording can play */
@media (min-width: 641px) { .p2-where .compare tbody th { width: 30%; } }
.p2-where .compare th a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--accent-line); }
.p2-where .compare th a:hover { color: var(--accent-strong); text-decoration-color: currentColor; }
/* on phones it reads as a ruled list: the link, then one sentence, without the repeated "What it plays" label */
@media (max-width: 640px) {
  .p2-where .compare.stack tbody tr { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .p2-where .compare.stack tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .p2-where .compare.stack tbody tr + tr { margin-top: 0; }
  .p2-where .compare.stack tbody th { padding: 14px 0 4px; }
  .p2-where .compare.stack tbody tr > td { display: block; padding: 0 0 14px; border-top: 0; }
  .p2-where .compare.stack tbody tr > td::before { display: none; }
}

/* recording tips, numbered on the green band */
.p2-tips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 3vw, 40px); }
.p2-tips li { padding-top: 22px; border-top: 1px solid var(--band-line); }
.p2-tip-n { display: block; margin-bottom: 14px; font-family: var(--font-display); font-weight: 500; font-size: 2.3rem; line-height: 1; color: var(--band-accent); }
.p2-tips h3 { margin-bottom: 6px; }
.p2-tips p { font-size: .98rem; }
@media (max-width: 920px) { .p2-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .p2-tips { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .p2-tips li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; padding: 18px 0; }
  .p2-tip-n { grid-row: 1 / span 2; margin: 0; font-size: 1.7rem; }
}

/* ---------- International calls: reach figures and the 14 countries, on the band ---------- */
.p2-reach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.p2-reach h2 { margin-bottom: 18px; }
.p2-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 32px 0 28px; border-top: 1px solid var(--band-line); }
.p2-figs > div { padding: 22px 20px 0 0; }
.p2-figs > div + div { padding-left: 22px; border-left: 1px solid var(--band-line); }
.p2-figs dt { font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; color: #fff; }
.p2-figs dd { margin: 10px 0 0; max-width: 24ch; font-size: .95rem; color: var(--band-muted); }
.p2-reach .link-arrow { color: var(--band-accent); }
.p2-reach .link-arrow:hover { color: #fff; }
.p2-reach .p2-flags-title { margin-bottom: 6px; font-size: .92rem; font-weight: 600; color: var(--band-muted); }
.p2-flags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.p2-flags li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--band-line); font-size: .98rem; font-weight: 600; color: #fff; }
.p2-flags img { width: 28px; height: 28px; flex: none; }
@media (max-width: 920px) { .p2-reach { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) {
  .p2-flags { gap: 0 16px; }
  .p2-flags li { gap: 8px; font-size: .9rem; }
  .p2-flags img { width: 24px; height: 24px; }
  .p2-figs > div + div { padding-left: 16px; }
}

/* a sticky note under a check list, with a plain underlined link */
.p2-note-gap { max-width: 470px; margin-top: 30px; }
.p2-note-gap .note a { color: inherit; font-weight: 650; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* ---------- Free internal calls: a desk phone dialling an extension (hero) ---------- */
.p2-dial { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; max-width: 540px; margin-left: auto; padding: 18px; border-radius: 26px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-lg); }
.p2-dial-screen { display: flex; flex-direction: column; padding: 20px 20px 18px; border-radius: 18px; background: var(--paper-2); }
.p2-dial-line { font-size: .86rem; font-weight: 600; color: var(--muted); text-wrap: balance; }
.p2-dial-screen b { margin: 10px 0 6px; font-family: var(--font-display); font-size: clamp(3rem, 2.4rem + 2vw, 4.1rem); font-weight: 600; line-height: 1; letter-spacing: .03em; color: var(--ink); }
.p2-dial-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; }
.p2-dial-call { width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); }
.p2-dial-call svg { width: 21px; height: 21px; }
.p2-dial-cost { text-align: right; font-size: .82rem; font-weight: 600; color: var(--muted); line-height: 1.3; }
.p2-dial-cost b { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1.1; color: var(--accent); }
.p2-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; align-content: center; }
.p2-keys span { display: grid; place-items: center; height: 48px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.p2-keys span:nth-child(3n + 3) { color: var(--text); }
@media (max-width: 1024px) {
  /* centred under the full-width hero text, with the offset mat kept to the phone's size */
  .p2-dial { margin: 0 auto; }
  .hero .hero-visual:has(> .p2-dial)::before { left: calc(max(0px, (100% - 540px) / 2) + 18px); right: calc(max(0px, (100% - 540px) / 2) - 8px); }
}
@media (max-width: 640px) {
  .hero .hero-visual:has(> .p2-dial)::before { left: calc(max(0px, (100% - 540px) / 2) + 12px); right: calc(max(0px, (100% - 540px) / 2) - 6px); }
}
@media (max-width: 480px) {
  .p2-dial { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 20px; }
  .p2-dial-screen { padding: 14px; }
  .p2-dial-line { font-size: .78rem; }
  .p2-dial-cost { font-size: .76rem; }
  .p2-dial-cost b { font-size: 1.35rem; }
  .p2-dial-call { width: 40px; height: 40px; }
  .p2-dial-call svg { width: 18px; height: 18px; }
  .p2-keys { gap: 6px; }
  .p2-keys span { height: 38px; border-radius: 11px; font-size: 1rem; }
}

/* the table of which calls are free */
@media (min-width: 641px) { .p2-free-table .compare tbody th { width: 24%; } }
.p2-free-table .compare tbody tr:not(:last-child) td:last-child strong { color: var(--accent); }

/* who benefits beside how it works, in one section */
.p2-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); align-items: start; }
.p2-pair h2 { margin-bottom: 26px; font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.4rem); }
.p2-pair .ruled { grid-template-columns: minmax(0, 1fr); }
.p2-pair .ruled > * { padding: 18px 0 20px; }
.p2-pair .steps { grid-template-columns: minmax(0, 1fr); }
.p2-pair .step { padding: 0 0 26px 58px; }
.p2-pair .step::before { position: absolute; left: 0; top: 0; margin: 0; }
.p2-pair .step::after { top: 40px; bottom: 0; left: 19px; right: auto; border-top: 0; border-left: 1.5px dashed var(--accent-line); }
.p2-pair .step:last-child { padding-bottom: 0; }
@media (max-width: 920px) { .p2-pair { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the comparison tables on these pages ---------- */
/* the row header of the last row keeps no bottom rule, like its cells */
.p2-where .compare tbody tr:last-child th, .p2-free-table .compare tbody tr:last-child th,
.p2-intl-table .compare tbody tr:last-child th { border-bottom: 0; }
/* three even columns after a narrow label column, so no single cell stretches the table */
.p2-intl-table .compare { table-layout: fixed; }
.p2-intl-table .compare thead th:first-child { width: 18%; }
.p2-intl-table .compare tbody th { text-wrap: balance; }
/* five columns get too narrow on tablets, so this table turns into one card per kind of call from 920px down
   (the same card as .compare.stack on phones, in 30-components.css) */
@media (max-width: 920px) {
  .p2-intl-table .table-wrap.stack { overflow: visible; border: 0; border-radius: 0; background: none; }
  .p2-intl-table .compare.stack { min-width: 0; table-layout: auto; }
  .p2-intl-table .compare.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .p2-intl-table .compare.stack, .p2-intl-table .compare.stack tbody, .p2-intl-table .compare.stack tr,
  .p2-intl-table .compare.stack tbody th, .p2-intl-table .compare.stack td { display: block; }
  .p2-intl-table .compare.stack tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .p2-intl-table .compare.stack tr + tr { margin-top: 10px; }
  .p2-intl-table .compare.stack tbody th { padding: 14px 20px 10px; border: 0; font-size: 1.02rem; }
  .p2-intl-table .compare.stack td { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 20px; padding: 9px 20px; border: 0; border-top: 1px solid var(--line-2); font-size: .95rem; line-height: 1.45; }
  .p2-intl-table .compare.stack td::before { content: attr(data-label); font-size: .82rem; font-weight: 600; color: var(--muted); line-height: 1.6; }
}
/* on phones the four labels are short, so the answers get more room */
@media (max-width: 640px) {
  .p2-intl-table .compare.stack tbody th { padding: 12px 14px 8px; font-size: 1rem; }
  .p2-intl-table .compare.stack td { grid-template-columns: minmax(0, 6.4em) minmax(0, 1fr); gap: 12px; padding: 7px 14px; font-size: .94rem; }
  .p2-intl-table .compare.stack td::before { font-size: .8rem; line-height: 1.5; }
}

/* ---- 62-growth.css ---- */
/* ==========================================================================
   CRM, WhatsApp and AI call consent pages (_site-src/pages_growth.py, classes "gr-")
   ========================================================================== */

/* hero: a calmer title so it stays on three lines beside the screenshot */
@media (min-width: 1025px) { .gr-hero .hero-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.gr-hero h1 { font-size: clamp(2.2rem, 1.35rem + 2.6vw, 3.5rem); }
.gr-hero .lede { text-wrap: pretty; }
@media (max-width: 640px) {
  .gr-hero .fc-tr, .gr-hero .fc-br { right: 0; }
  .gr-hero .fc-tl, .gr-hero .fc-bl { left: 0; }
}

/* a split whose screenshot is wider than its text */
.gr-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); }
.gr-split.reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); }
@media (max-width: 920px) { .gr-split, .gr-split.reverse { grid-template-columns: minmax(0, 1fr); } }

/* a note or link under a block */
.gr-after { margin-top: clamp(28px, 3.5vw, 44px); max-width: 860px; }

/* the example call: a heading on the left, the lines of the call on the right */
.gr-call { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); align-items: start; margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(32px, 4vw, 48px); border-top: 2px solid var(--ink); }
.gr-call h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; margin-bottom: 14px; }
.gr-dialogue { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gr-dialogue li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.gr-dialogue small { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.gr-dialogue .gr-d-agent { border-color: var(--ink); }
.gr-dialogue .gr-d-agent small { color: var(--accent); }
.gr-dialogue .gr-d-tool { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-style: dashed; background: transparent; font-family: var(--font-mono); font-size: .82rem; color: var(--muted); }
.gr-dialogue .gr-d-tool svg { width: 15px; height: 15px; color: var(--accent); }
@media (max-width: 860px) {
  .gr-call { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gr-dialogue li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 12px; }
  .gr-dialogue .gr-d-tool { font-size: .78rem; padding: 8px 12px; }
}

/* the team table beside its intro */
.gr-team { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.gr-team .note { margin-top: 26px; }
.gr-team .compare { min-width: 0; }
@media (max-width: 920px) { .gr-team { grid-template-columns: minmax(0, 1fr); } }

/* the WhatsApp question, on a phone, on a ruled mat */
.gr-ask { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.gr-phone { position: relative; display: flex; justify-content: center; padding: clamp(20px, 3vw, 40px) 0; isolation: isolate; }
.gr-phone::before {
  content: "";
  position: absolute;
  inset: 0 6%;
  z-index: -1;
  border-radius: var(--radius-lg);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
@media (max-width: 920px) { .gr-ask { grid-template-columns: minmax(0, 1fr); } }

/* the "before you start" checklist beside its intro */
.gr-ready { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.gr-ready .note { margin-top: 26px; }
.gr-ready .check-list { gap: 16px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
@media (max-width: 920px) { .gr-ready { grid-template-columns: minmax(0, 1fr); } }