/*
 * SiteWhizz marketing site: "Modern SaaS", product-led layout.
 *
 * The one stylesheet for every redesigned page (no Tailwind, no build step). Colours, type,
 * spacing, radius and motion come from tokens.css, generated from tokens/*.json:
 *   node <ux-ui-agent-skills>/scripts/build_tokens.mjs --in tokens --out assets/tokens.css --check
 *
 * Layout rules: one 72rem content edge, left-aligned section headers, sections vary in
 * composition (split hero, ledger, bento, steps, dark band, tiles, FAQ). Depth is reserved for
 * product frames; everything else is flat with hairline borders.
 */

@import url("tokens.css");

:root {
  --ink: var(--color-text-primary);
  --body: var(--color-text-body);
  --muted: var(--color-text-secondary);
  --primary: var(--color-action-primary);
  --primary-hover: var(--color-action-primary-hover);
  --primary-active: var(--color-action-primary-active);
  --link: var(--color-text-link);
  --soft: var(--color-surface-accent-soft);
  --soft-border: var(--color-surface-accent-soft-border);
  --page: var(--color-surface-page);
  --alt: var(--color-surface-sunken);
  --card: var(--color-surface-card);
  --line: var(--color-border-default);
  --line-strong: var(--color-border-strong);
  --dark: var(--color-surface-inverse);
  --dark-raised: var(--color-surface-inverse-raised);
  --on-dark: var(--color-text-on-dark);
  --on-dark-label: var(--color-text-on-inverse-accent);
  --success: var(--color-feedback-success-text);
  --success-bg: var(--color-feedback-success-bg);
  --danger: var(--color-feedback-error-text);
  --danger-bg: var(--color-feedback-error-bg);
  --focus: var(--color-interactive-focus-ring);

  --edge: 72rem;
  --gutter: 1.25rem;
  --section-y: clamp(4.5rem, 9vw, 7.5rem);
  --r-control: 0.625rem;
  --r-card: 0.75rem;
  --r-frame: 1rem;

  /* Three elevation levels: resting cards are flat, hover lifts, product frames float. */
  --elev-1: 0 1px 2px rgb(30 27 75 / 0.05);
  --elev-2: 0 1px 2px rgb(30 27 75 / 0.05), 0 12px 28px -16px rgb(79 70 229 / 0.25);
  --elev-3: 0 1px 2px rgb(30 27 75 / 0.06), 0 30px 60px -24px rgb(79 70 229 / 0.35);
  --glow:
    radial-gradient(56rem 26rem at 88% -8%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 62%),
    radial-gradient(40rem 22rem at -4% 0%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 60%);
}

@media (min-width: 40rem) { :root { --gutter: 1.5rem; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; text-wrap: balance; }
p { margin: 0; max-width: 72ch; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
p a:not(.btn):not(.text-link), dd a, .answer a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
code, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.625rem 1rem;
  background: var(--ink); color: #fff; border-radius: var(--r-control); font-weight: 600;
}
.skip-link:focus { top: 1rem; text-decoration: none; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.icon-sm { width: 1rem; height: 1rem; flex: none; }

.container { width: 100%; max-width: calc(var(--edge) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--alt); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
/* Two plain white sections in a row, or two grey ones, share one gap instead of two. */
.section:not(.section--alt):not(.section--dark) + .section:not(.section--alt):not(.section--dark),
.section--alt + .section--alt { padding-top: 0; }

/* ---------- Type ---------- */
.eyebrow {
  display: block; margin-bottom: 0.875rem;
  color: var(--primary); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.h1 { font-size: clamp(2.375rem, 5.2vw, 3.625rem); line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; }
.h2 { font-size: clamp(1.875rem, 3.6vw, 2.625rem); line-height: 1.12; letter-spacing: -0.025em; }
.h3 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.01em; }
.hl { color: var(--primary); }
.lead { margin-top: 1.25rem; max-width: 38rem; color: var(--muted); font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.6; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head--split { display: grid; gap: 1.25rem; max-width: none; }
@media (min-width: 64rem) {
  .section-head--split { grid-template-columns: 1fr 1fr; align-items: end; gap: 4rem; }
  .section-head--split .lead { margin-top: 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 1.375rem; border-radius: var(--r-control); border: 1px solid transparent;
  font-size: 1rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgb(30 27 75 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.12); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--primary:active { background: var(--primary-active); }
.btn--secondary { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink); }
.btn--light { background: #fff; color: var(--primary); }
.btn--light:hover { background: var(--soft); }
.btn--ghost-dark { color: #fff; border-color: rgb(255 255 255 / 0.4); }
.btn--ghost-dark:hover { border-color: #fff; background: var(--dark-raised); }
/* Secondary action next to a primary one: same shape, outline only. */
.btn--outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn--outline:hover { background: var(--soft); }
.btn--sm { min-height: 2.5rem; padding: 0 1rem; font-size: 0.9375rem; }
.btn--block { width: 100%; }
.btn .icon-sm { transition: transform var(--duration-fast) var(--ease-out); }
.btn:hover .icon-sm { transform: translateX(2px); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.actions--after { margin-top: clamp(2rem, 4vw, 3rem); }
.fineprint { margin-top: 0.875rem; color: var(--muted); font-size: 0.875rem; }
.text-link { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; }
.text-link .icon-sm { transition: transform var(--duration-fast) var(--ease-out); }
.text-link:hover .icon-sm { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / 0.86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--ink); font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand .logo-icon { width: 2.125rem; height: 2.125rem; }
.nav-links { display: none; align-items: center; gap: 0.25rem; }
.nav-links a:not(.btn) {
  padding: 0.5rem 0.75rem; border-radius: 0.5rem; color: var(--body); font-size: 0.9375rem; font-weight: 500;
}
.nav-links a:not(.btn):hover { color: var(--ink); background: var(--alt); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--primary); }
.nav-links .btn { margin-left: 0.75rem; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  margin-right: -0.5rem; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink); cursor: pointer;
}
.nav-toggle:hover { background: var(--alt); }
.mobile-menu { border-top: 1px solid var(--line); background: #fff; }
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { display: grid; gap: 0.25rem; padding-block: 0.75rem 1.25rem; }
.mobile-menu a:not(.btn) { display: block; padding: 0.75rem 0.5rem; border-radius: 0.5rem; color: var(--ink); font-weight: 500; }
.mobile-menu a[aria-current="page"] { color: var(--primary); }
.mobile-menu .btn { margin-top: 0.5rem; }
@media (min-width: 60rem) {
  .nav-links { display: flex; }
  .nav-toggle, .mobile-menu { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--glow), var(--page); padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6.5rem); }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 64rem) { .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 4rem; } }
.hero .h1 { max-width: 14ch; }
.hero .h1.wide { max-width: 17ch; }
.checks { display: flex; flex-wrap: wrap; gap: 0.625rem 1.5rem; margin-top: 1.75rem; }
.checks li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--body); font-size: 0.9375rem; font-weight: 500; }
.checks .icon-sm { color: var(--success); }
.hero--simple { padding-block: clamp(3rem, 7vw, 5rem) clamp(3rem, 6vw, 4.5rem); }
.hero--simple .h1 { max-width: 20ch; }

/* ---------- Product frame: the chat widget, styled like the real one ---------- */
.demo { width: 100%; max-width: 26rem; margin-inline: auto; }
@media (min-width: 64rem) { .demo { margin-right: 0; } }
.wdg {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--elev-3);
}
.wdg-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; background: var(--primary); color: #fff; }
.wdg-avatar {
  display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: none;
  border-radius: 999px; background: rgb(0 0 0 / 0.2); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.3);
  font-size: 0.875rem; font-weight: 700;
}
.wdg-title { font-size: 0.9375rem; font-weight: 600; line-height: 1.25; }
.wdg-sub { font-size: 0.75rem; }
.wdg-reset {
  margin-left: auto; padding: 0.375rem 0.625rem; border: 0; border-radius: 0.5rem;
  background: var(--primary-hover); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); color: #fff; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.wdg-reset:hover { background: var(--primary-active); }
.wdg-body { display: flex; flex-direction: column; gap: 0.75rem; height: 21rem; padding: 1rem; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.msg { display: flex; gap: 0.5rem; align-items: flex-start; }
.msg-avatar {
  display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: 999px; background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 700;
}
.bubble { max-width: 85%; padding: 0.5rem 0.875rem; border-radius: 1rem 1rem 1rem 0.375rem; background: #f4f4fa; color: var(--ink); font-size: 0.875rem; line-height: 1.55; }
.msg--user { justify-content: flex-end; }
.msg--user .bubble { border-radius: 1rem 1rem 0.375rem 1rem; background: var(--primary); color: #fff; }
.cite {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; margin-inline: 0.125rem;
  padding: 0 0.25rem; border-radius: 0.375rem; background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary-active); font-size: 0.6875rem; font-weight: 700; vertical-align: 0.1em;
}
.src-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.375rem 0 0 2.25rem; }
.src-chip {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 0.75rem;
}
.src-chip .cite { margin: 0; }
.notice {
  display: inline-flex; align-items: center; gap: 0.375rem; margin: 0.375rem 0 0 2.25rem; padding: 0.25rem 0.625rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 600;
}
.notice--handoff { background: var(--soft); color: var(--color-text-link-hover); }
.notice--warn { background: var(--color-feedback-warning-bg); color: var(--color-feedback-warning-text); }
.typing { display: inline-flex; gap: 0.25rem; padding-block: 0.375rem; }
.typing span { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: #9b9dbb; animation: dot 0.9s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
.wdg-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.75rem 1rem; border-top: 1px solid var(--line); }
.wdg-chip {
  padding: 0.375rem 0.75rem; border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 999px;
  background: #fff; color: var(--primary); font-size: 0.8125rem; text-align: left; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.wdg-chip:hover:not(:disabled) { background: var(--soft); }
.wdg-chip:disabled { opacity: 0.45; cursor: default; }
.wdg-foot { padding: 0 1rem 0.75rem; }
.wdg-input {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 0.5rem 0.625rem 0.875rem;
  border: 1px solid var(--line); border-radius: 0.75rem; color: var(--muted); font-size: 0.875rem;
}
.wdg-send { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 45%, #fff); color: #fff; }
.wdg-brand { margin-top: 0.5rem; color: var(--muted); font-size: 0.6875rem; text-align: center; }
.wdg-cta { padding: 0.625rem 1rem; border-top: 1px solid var(--line); background: var(--soft); color: var(--ink); font-size: 0.8125rem; text-align: center; }
.wdg-cta[hidden] { display: none; }
.wdg-cta a { font-weight: 600; }
.demo-caption { margin-top: 0.875rem; color: var(--muted); font-size: 0.8125rem; text-align: center; }
.demo-launcher {
  display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin: 0.875rem 0 0 auto;
  border-radius: 999px; background: var(--primary); color: #fff; box-shadow: 0 10px 24px -8px rgb(79 70 229 / 0.6);
}

/* ---------- Source strip ---------- */
.strip { border-block: 1px solid var(--line); background: #fff; padding-block: 1.75rem; }
.strip-inner { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 64rem) { .strip-inner { flex-direction: row; align-items: center; gap: 2rem; } }
.strip-label { flex: none; color: var(--muted); font-size: 0.875rem; font-weight: 500; }
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; color: var(--ink); font-size: 0.875rem; font-weight: 500;
}
.tag .icon-sm { color: var(--primary); }

/* ---------- Before / after ---------- */
.compare { display: grid; gap: 1rem; }
@media (min-width: 52rem) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-card { padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--r-frame); background: #fff; }
.compare-card--after { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); box-shadow: var(--elev-2); }
.compare-title { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.25rem; font-size: 1.0625rem; }
.compare-title .badge-icon { width: 2rem; height: 2rem; }
.compare-list { display: grid; gap: 0.875rem; }
.compare-list li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; color: var(--body); }
.compare-list .icon-sm { margin-top: 0.25rem; }
.compare-card--before .icon-sm { color: var(--danger); }
.compare-card--after .icon-sm { color: var(--success); }
.badge-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 0.625rem; background: var(--soft); color: var(--primary); }
.badge-icon--danger { background: var(--danger-bg); color: var(--danger); }
.badge-icon--success { background: var(--success-bg); color: var(--success); }

/* ---------- Ledger: question -> the source that answers it ---------- */
.ledger { border: 1px solid var(--line); border-radius: var(--r-frame); background: #fff; overflow: hidden; }
.ledger-row { display: grid; gap: 0.75rem; padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem); border-top: 1px solid var(--line); align-items: center; }
.ledger-row:first-child { border-top: 0; }
@media (min-width: 52rem) { .ledger-row { grid-template-columns: 11rem minmax(0, 1fr) 17rem; gap: 1.5rem; } }
.ledger-topic { color: var(--ink); font-size: 0.9375rem; font-weight: 600; }
.ledger-q { justify-self: start; padding: 0.5rem 0.875rem; border-radius: 1rem 1rem 0.375rem 1rem; background: var(--soft); color: var(--ink); font-size: 0.9375rem; }
.ledger-src { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.875rem; }
.ledger-src .icon-sm { color: var(--primary); }
.ledger-row--handoff .ledger-src .icon-sm { color: var(--color-feedback-warning-icon); }

/* ---------- Bento: product views ---------- */
.bento { display: grid; gap: 1rem; }
@media (min-width: 52rem) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile--wide { grid-column: span 4; grid-row: span 2; }
  .tile--side { grid-column: span 2; }
  .tile--third { grid-column: span 2; }
  .tile--half { grid-column: span 3; }
}
.tile {
  display: flex; flex-direction: column; gap: 1.25rem; overflow: hidden;
  padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-frame); background: #fff;
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.tile:hover { box-shadow: var(--elev-2); }
.tile p { color: var(--muted); font-size: 0.9375rem; }
.tile .h3 { margin-bottom: 0.375rem; }
.tile-visual { margin-top: auto; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--alt); }
.tile--wide { background: linear-gradient(180deg, #fff 0%, #fff 40%, var(--soft) 100%); }
.tile--wide .tile-visual { display: flex; flex: 1; flex-direction: column; justify-content: center; background: #fff; box-shadow: var(--elev-2); }
.mini-answer .notice { justify-self: start; margin-top: 0; }

/* Mini UI used inside tiles */
.mini-answer { display: grid; gap: 0.75rem; }
.mini-source {
  display: grid; gap: 0.25rem; margin-left: 2.25rem; padding: 0.75rem; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: 0.625rem; background: #fff; font-size: 0.8125rem;
}
.mini-source strong { color: var(--ink); }
.mini-source span { color: var(--muted); }
.mini-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 1px solid var(--line); border-radius: 0.625rem; background: #fff; font-size: 0.8125rem; }
.mini-row + .mini-row { margin-top: 0.5rem; }
.mini-row .grow { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.pill { flex: none; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; }
.pill--ok { background: var(--success-bg); color: var(--success); }
.pill--busy { background: var(--soft); color: var(--color-text-link-hover); }
.pill--warn { background: var(--color-feedback-warning-bg); color: var(--color-feedback-warning-text); }
.mini-mail { display: grid; gap: 0.375rem; padding: 0.875rem; border: 1px solid var(--line); border-radius: 0.625rem; background: #fff; font-size: 0.8125rem; }
.mini-mail .from { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); font-weight: 600; }
.mini-mail .from .icon-sm { color: var(--primary); }
.mini-mail .subject { color: var(--ink); }
.mini-mail .preview { color: var(--muted); }
.mini-field { display: grid; gap: 0.25rem; font-size: 0.75rem; color: var(--muted); }
.mini-field + .mini-field { margin-top: 0.5rem; }
.mini-field span:last-child { padding: 0.4375rem 0.625rem; border: 1px solid var(--line-strong); border-radius: 0.5rem; background: #fff; color: var(--ink); font-size: 0.8125rem; }
.mini-btn { display: inline-flex; margin-top: 0.75rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 600; }
.swatches { display: flex; align-items: flex-end; gap: 0.75rem; }
.swatch-launcher { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; color: #fff; box-shadow: var(--elev-2); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip-row span { padding: 0.3125rem 0.625rem; border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 999px; background: #fff; color: var(--primary); font-size: 0.75rem; }
.code {
  display: block; overflow-x: auto; padding: 0.875rem 1rem; border-radius: 0.625rem; background: #15163a; color: #e0e7ff;
  font-size: 0.75rem; line-height: 1.7; white-space: pre;
}
.code .t { color: #a5b4fc; }
.code .s { color: #86efac; }
.switch-mini { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--ink); font-weight: 600; }
.switch-mini i { position: relative; display: inline-block; width: 2rem; height: 1.125rem; border-radius: 999px; background: var(--primary); }
.switch-mini i::after { content: ""; position: absolute; top: 0.125rem; right: 0.125rem; width: 0.875rem; height: 0.875rem; border-radius: 999px; background: #fff; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; counter-reset: step; }
@media (min-width: 60rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-frame); background: #fff; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: 0.875rem; font-weight: 700;
}
.step p { color: var(--muted); font-size: 0.9375rem; }
.step .code, .step .tags, .step .rule { margin-top: auto; }
.rule { padding: 0.75rem 0.875rem; border: 1px solid var(--soft-border); border-radius: 0.625rem; background: var(--soft); color: var(--ink); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.75rem; line-height: 1.6; }
.step .tags .tag { font-size: 0.75rem; padding: 0.25rem 0.625rem; }

/* ---------- Dark band: trust / guardrails ---------- */
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--dark .h2, .section--dark .h3 { color: #fff; }
.section--dark .eyebrow { color: var(--on-dark-label); }
.section--dark .lead { color: var(--on-dark); }
.trust-grid { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .trust-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 4rem; align-items: start; } }
.trust-cards { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .trust-cards { grid-template-columns: 1fr 1fr; } }
.trust-card { padding: 1.5rem; border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--r-frame); background: var(--dark-raised); }
.trust-card .badge-icon { margin-bottom: 1rem; background: rgb(165 180 252 / 0.14); color: var(--on-dark-label); }
.trust-card p { margin-top: 0.5rem; color: var(--on-dark); font-size: 0.9375rem; }
.trust-note { margin-top: 1.5rem; color: var(--on-dark); font-size: 0.875rem; }
.section--dark a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Audience tiles ---------- */
.aud-grid { display: grid; gap: 1rem; }
@media (min-width: 52rem) { .aud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .aud-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aud {
  position: relative; display: flex; flex-direction: column; gap: 0.625rem; padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--r-frame); background: #fff; color: inherit;
  transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
a.aud:hover { text-decoration: none; border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); box-shadow: var(--elev-2); transform: translateY(-2px); }
.aud--featured { background: linear-gradient(160deg, var(--soft) 0%, #fff 55%); border-color: var(--soft-border); }
.aud .badge-icon { margin-bottom: 0.5rem; }
.aud p { color: var(--muted); }
.aud .text-link { margin-top: auto; padding-top: 0.75rem; color: var(--link); }
.aud-q { margin-top: 0.25rem; color: var(--ink); font-size: 0.9375rem; font-style: italic; }

/* ---------- Feature list (compact, dense) ---------- */
.feat-grid { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 52rem) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
@media (min-width: 64rem) { .feat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feat { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.feat p { margin-top: 0.25rem; color: var(--muted); font-size: 0.9375rem; }

/* ---------- Band: pricing teaser ---------- */
.band { padding-block: 1.75rem; background: var(--alt); border-block: 1px solid var(--line); }
.band-inner { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 52rem) { .band-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.band strong { color: var(--ink); }
.band-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; flex: none; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; } .faq-aside { position: sticky; top: 6rem; } }
.faq-aside .lead { font-size: 1rem; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0;
  color: var(--ink); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--muted); transition: transform var(--duration-base) var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq summary:hover { color: var(--primary); }
.faq .answer { padding: 0 2.5rem 1.5rem 0; color: var(--body); max-width: 65ch; }

/* ---------- Closing band ---------- */
.cta {
  position: relative; overflow: hidden; padding-block: clamp(4.5rem, 9vw, 7rem); background: var(--dark); color: var(--on-dark); text-align: center;
  background-image: radial-gradient(40rem 18rem at 50% -10%, rgb(129 140 248 / 0.28), transparent 70%);
}
.cta .h2 { max-width: 22ch; margin-inline: auto; color: #fff; }
.cta .lead { margin-inline: auto; color: var(--on-dark); }
.cta .actions { justify-content: center; }
.cta p { margin-inline: auto; }
.cta .fineprint { color: var(--on-dark); }

/* Closing band with the demo request form: copy on the left, white form card on the right. */
.cta--form { text-align: left; }
.cta--form .eyebrow { color: var(--on-dark-label); }
.cta--form .h2 { margin-inline: 0; }
.cta--form .lead, .cta--form p { margin-inline: 0; }
.cta-grid { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .cta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 4rem; align-items: center; } }
.form-card { padding: clamp(1.25rem, 4vw, 2rem); border-radius: var(--r-frame); background: var(--card); color: var(--body); box-shadow: var(--elev-3); }

/* ---------- Forms ---------- */
.field { display: grid; gap: 0.375rem; }
.field + .field { margin-top: 1rem; }
.field label { color: var(--ink); font-size: 0.9375rem; font-weight: 600; }
.field .opt { color: var(--muted); font-weight: 400; }
.input {
  width: 100%; min-height: 2.75rem; padding: 0.625rem 0.875rem; border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: #fff; color: var(--ink); font: inherit;
}
textarea.input { min-height: 5.5rem; resize: vertical; }
.input::placeholder { color: var(--muted); }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--primary); border-radius: var(--r-control); }
.input:user-invalid { border-color: var(--color-input-border-error); }
.demo-form .btn { margin-top: 1.5rem; }
.form-status:empty { display: none; }
.form-status { margin-top: 0.875rem; padding: 0.625rem 0.875rem; border-radius: var(--r-control); background: var(--soft); color: var(--ink); font-size: 0.875rem; }
.form-status.is-error { background: var(--danger-bg); color: var(--danger); }
.cta .form-note { margin-top: 0.875rem; color: var(--muted); font-size: 0.8125rem; }
.form-done { display: grid; justify-items: start; gap: 0.75rem; }
.form-done[hidden] { display: none; }
.form-done:focus { outline: none; }
/* Honeypot: real visitors never see or fill it; most spam bots do. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: var(--on-dark); border-top: 1px solid rgb(255 255 255 / 0.08); }
.footer-grid { display: grid; gap: 2.5rem; padding-block: 4rem 3rem; }
@media (min-width: 52rem) { .footer-grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 2rem; } }
.site-footer .brand { color: #fff; }
.footer-about { max-width: 22rem; margin-top: 1rem; font-size: 0.9375rem; }
.footer-heading { margin-bottom: 1rem; color: #fff; font-size: 0.875rem; font-weight: 600; }
.footer-links { display: grid; gap: 0.625rem; }
.footer-links a { color: var(--on-dark); font-size: 0.9375rem; }
.footer-links a:hover { color: #fff; }
.footer-base { padding-block: 1.5rem 2rem; border-top: 1px solid rgb(255 255 255 / 0.1); font-size: 0.875rem; }

/* ---------- Pricing ---------- */
.plan-card {
  display: grid; overflow: visible; border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line));
  border-radius: 1.25rem; background: #fff; box-shadow: var(--elev-3);
}
@media (min-width: 60rem) { .plan-card { grid-template-columns: 22rem minmax(0, 1fr); } }
.plan-main { padding: clamp(1.5rem, 3vw, 2rem); }
.includes { padding: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line); }
@media (min-width: 60rem) { .includes { border-top: 0; border-left: 1px solid var(--line); padding-left: 2.5rem; } }
.toggle { display: inline-flex; padding: 0.25rem; border: 1px solid var(--line); border-radius: 999px; background: var(--alt); }
.toggle button {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--body); font-size: 0.9375rem; font-weight: 600; cursor: pointer;
}
.toggle button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--elev-1), 0 0 0 1px var(--line); }
.save { padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--success-bg); color: var(--success); font-size: 0.75rem; font-weight: 700; }
.plan-name { margin-top: 1.5rem; color: var(--ink); font-size: 1.125rem; font-weight: 700; }
.price { display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.5rem; }
.price-amount { color: var(--ink); font-size: 3.5rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.price-unit { color: var(--muted); }
.price-note { margin-block: 0.5rem 1.5rem; color: var(--muted); font-size: 0.875rem; min-height: 1.4em; }

/* Includes list: each term explains itself on hover, keyboard focus or tap (WCAG 1.4.13:
   hoverable, dismissible with Escape, persistent while pointed at). */
.includes-label { margin-bottom: 0.75rem; color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.inc-grid { display: grid; column-gap: 2.5rem; }
@media (min-width: 40rem) { .inc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inc { position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; padding-block: 0.75rem; }
.inc > .icon-sm { color: var(--primary); }
.inc-term {
  justify-self: start; color: var(--ink); font-size: 0.9375rem; font-weight: 500; cursor: help;
  text-decoration: underline dotted var(--line-strong); text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.inc-term:focus-visible { outline-offset: 3px; }
.inc-info { display: inline-flex; color: var(--muted); cursor: help; }
.tip {
  position: absolute; left: 1.875rem; bottom: calc(100% - 0.375rem); z-index: 20;
  width: max-content; max-width: min(19rem, calc(100vw - 4rem)); padding: 0.625rem 0.75rem; border-radius: 0.5rem;
  background: var(--ink); color: #fff; font-size: 0.8125rem; font-weight: 400; line-height: 1.5; box-shadow: var(--elev-3);
  opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
}
.inc:hover .tip, .inc-term:focus-visible ~ .tip, .inc-term:focus ~ .tip { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.inc.tip-off .tip { opacity: 0; visibility: hidden; }
.inc:hover .inc-term, .inc-term:focus { text-decoration-color: var(--primary); }

/* ---------- Facts table (about, security, contact) ---------- */
.facts { border: 1px solid var(--line); border-radius: var(--r-frame); background: #fff; }
.facts div { display: grid; gap: 0.25rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line); }
.facts div:first-child { border-top: 0; }
@media (min-width: 40rem) { .facts div { grid-template-columns: 11rem 1fr; gap: 1.5rem; } }
.facts dt { color: var(--muted); font-size: 0.875rem; font-weight: 500; }
.facts dd { margin: 0; color: var(--ink); font-size: 0.9375rem; }
.prose { display: grid; gap: 1.125rem; max-width: 40rem; font-size: 1.0625rem; }
.prose p { color: var(--body); }
.two-col { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 64rem) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }

.providers { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .providers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .providers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.provider { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.provider .role { margin-top: 0.125rem; color: var(--primary); font-size: 0.8125rem; font-weight: 600; }
.provider p { margin-top: 0.5rem; color: var(--muted); font-size: 0.9375rem; }

.mail-card { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-frame); background: #fff; box-shadow: var(--elev-2); }
.mail-card .addr { color: var(--ink); font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; word-break: break-all; }

/* ---------- Motion: reveal only once the script has started ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .typing span { animation: none; }
  .tile, .aud, .btn, .btn .icon-sm, .text-link .icon-sm, .tip { transition: none; }
  a.aud:hover { transform: none; }
}
@media print {
  .site-header, .cta, .site-footer, .demo { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}