/* koletta.com — marketing site stylesheet (website-v1, Sept 30 2026).
   Light mode only. Every color, face, corner and motion value below is a token
   copied from DESIGN.md §4 and webapp/frontend/src/index.css (the --ws-*
   workspace set) — the site shares the app's look so a demo feels like a
   continuation of the website. Change a value there first, then here. */

/* ── Fonts (self-hosted, SIL OFL 1.1 — license in /assets/fonts/LICENSE-Geist.txt) ──
   Geist (variable, 100–900) for everything; Geist Mono for the small labels.
   Newsreader and IBM Plex were retired by the Oct 2026 premium redesign. */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Surfaces — DESIGN.md §4.1 workspace values (--ws-*) */
  --canvas: #F3EEE3;                       /* --ws-canvas: cream page background */
  --card: #FBF8F2;                         /* --ws-card: warm band */
  --surface: #FFFFFF;                      /* --ws-elev: white cards */
  --field: #F6F1E6;                        /* --ws-field: placeholder boxes */

  /* Ink */
  --ink: #16233B;                          /* --ws-ink */
  --ink-2: #4B5566;                        /* --ws-ink-2 */
  --ink-3: #5B6472;                        /* --ws-ink-3 */

  /* Hairlines */
  --line: rgba(18, 28, 49, .16);           /* --ws-line-section */
  --line-row: rgba(18, 28, 49, .08);       /* --ws-line-row */
  --line-ctl: rgba(18, 28, 49, .14);       /* --ws-line-ctl */
  --line-strong: rgba(18, 28, 49, .22);    /* --ws-line-strong */

  /* Navy — nav, footer, closing call to action */
  --navy: #0F2240;                         /* --ws-navy */
  --navy-hover: #1A3358;                   /* --ws-primary-hover */
  --navy-soft: rgba(15, 34, 64, .08);      /* --ws-accent-soft */
  --on-navy: #ECE7DC;                      /* --ws-on-navy */
  --on-navy-2: rgba(236, 231, 220, .72);   /* --ws-nav-fg */
  --on-navy-hover: rgba(236, 231, 220, .10); /* --ws-nav-hover */
  --on-navy-muted: rgba(236, 231, 220, .5);  /* --ws-nav-muted */
  --navy-line: rgba(236, 231, 220, .16);   /* --ws-nav-line */

  /* Gold — the single accent (buttons, key numbers) */
  --gold: #C39E64;                         /* --ws-gold */
  --gold-hover: #D8B872;                   /* --brass-soft */
  --gold-ink: #7F6130;                     /* --ws-gold-ink: gold text on light surfaces */
  --gold-soft: rgba(195, 158, 100, .14);   /* --ws-gold-soft */
  --on-gold: #0F2240;                      /* --ws-on-gold: navy ink on a gold fill */

  /* Elevation, corners, motion */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .08);   /* --ws-shadow-1 */
  --shadow-2: 0 2px 4px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .10);  /* --ws-shadow-2 */
  --r-card: 12px;                          /* --ws-r-card */
  --r-ctl: 8px;                            /* --ws-r-ctl */
  --r-chip: 4px;                           /* --ws-r-chip */
  --ease: cubic-bezier(.2, .7, .2, 1);     /* --ws-ease */
  --ease-out: cubic-bezier(.22, 1, .36, 1);  /* the redesign's one ease (Oct 2026) */
  --t: 170ms;                              /* --ws-t */

  /* Faces — DESIGN.md §4.2: Newsreader for page titles and big numbers,
     IBM Plex Sans for everything else; every figure tabular. */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;   /* the serif face is retired; old pages' titles render in Geist */
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing — DESIGN.md §4.4 scale (4/8/12/16/24) and the card rhythm of
     index.css (24 card padding, 20 between cards, 24 between columns).
     Section spacing is a multiple of the 24px step. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --card-pad: 24px;                        /* --space-card-pad */
  --card-gap: 20px;                        /* --space-card-gap */
  --col-gap: 24px;                         /* --space-col-gap */
  --section: calc(var(--s-6) * 2.5);       /* 60px on phones */
  --gutter: 20px;
  --wrap: 1180px;
  --header-h: 64px;
}
@media (min-width: 768px) {
  :root { --section: calc(var(--s-6) * 3.5); --gutter: 32px; }   /* 84px */
}
@media (min-width: 1280px) {
  :root { --section: calc(var(--s-6) * 4); --gutter: 40px; }     /* 96px */
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-4) + 1px); }   /* focus and anchors clear the sticky header */
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-hover); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
p { margin: 0 0 var(--s-4); }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; color: var(--ink); }
h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.25rem, 1.55rem + 2.8vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
h2 + * { margin-top: var(--s-4); }
h2.visually-hidden + * { margin-top: 0; }
h4 { margin: 0; color: var(--ink); font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.story > :last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden {
  position: absolute !important; 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: var(--s-4); top: -100px; z-index: 100;
  background: var(--surface); color: var(--navy); padding: var(--s-2) var(--s-4);
  border-radius: var(--r-ctl); font-weight: 600; box-shadow: var(--shadow-2);
}
.skip-link:focus { top: var(--s-3); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r-ctl);
  font: 600 1rem/1.2 var(--font-sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 1.0625rem; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--on-gold); }.btn svg { width: 18px; height: 18px; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ── Header / nav ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy); color: var(--on-navy);
  border-bottom: 1px solid var(--navy-line);
}
.header-inner { position: relative; display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); }
.brand { display: block; flex: none; margin-right: auto; border-radius: var(--r-chip); }
.brand img { width: 138px; height: auto; }
.site-header a { color: var(--on-navy-2); }
.site-header :focus-visible { outline-color: var(--on-navy); }
.main-nav { display: none; }
.nav-list { list-style: none; display: flex; align-items: center; gap: var(--s-1); }
.nav-list a {
  display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-ctl);
  font-size: .9375rem; font-weight: normal; text-decoration: none;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.nav-list a:hover { color: var(--on-navy); background: var(--on-navy-hover); }
.nav-list a[aria-current="page"] { color: var(--on-navy); box-shadow: inset 0 -2px 0 var(--on-navy); border-radius: 0; }
.nav-list .nav-signin { margin-left: var(--s-2); }
.site-header .btn-gold { color: var(--on-gold); min-height: 40px; padding: 0 16px; font-size: .9375rem; }

/* Phone / tablet menu: a native disclosure — no script needed. */
.menu { flex: none; }
.menu summary {
  list-style: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-ctl);
  color: var(--on-navy); cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--on-navy-hover); }
.menu summary svg { width: 24px; height: 24px; }
.menu .icon-close { display: none; }
.menu[open] .icon-open { display: none; }
.menu[open] .icon-close { display: block; }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--navy); border-top: 1px solid var(--navy-line);
  box-shadow: 0 16px 32px rgba(15, 23, 42, .28);
  padding: var(--s-2) var(--gutter) var(--s-4);
}
.menu-panel ul { list-style: none; }
.menu-panel a {
  display: block; padding: var(--s-3) var(--s-2); min-height: 48px;
  font-size: 1.0625rem; text-decoration: none; color: var(--on-navy);
  border-bottom: 1px solid var(--navy-line);
}
.menu-panel li:last-child a { border-bottom: 0; }
.menu-panel a[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--on-navy); padding-left: var(--s-4); }

@media (max-width: 379.98px) {
  /* The narrowest phones (and 4x zoom): wordmark, Book a demo and the menu
     button all stay on one row with no sideways scroll. */
  :root { --gutter: 16px; }
  .header-inner { gap: var(--s-2); }
  .brand img { width: 112px; }
  .site-header .btn-gold { padding: 0 12px; }
}
@media (min-width: 420px) { .brand img { width: 150px; } }
@media (min-width: 1024px) {
  :root { --header-h: 72px; }
  .header-inner { gap: var(--s-6); }
  .brand img { width: 160px; }
  .main-nav { display: block; }
  .menu { display: none; }
}

/* ── Sections ──────────────────────────────────────────────────────────────── */
.section { padding: var(--section) 0; }
.section + .section { padding-top: 0; }.section-head { max-width: 760px; margin-bottom: calc(var(--s-6) * 1.5); }
.section-head p { color: var(--ink-2); font-size: 1.125rem; margin: var(--s-3) 0 0; }.lead { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); line-height: 1.55; color: var(--ink-2); }
.more-link { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; text-decoration: none; }
.more-link svg { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.more-link:hover svg { transform: translateX(3px); }.narrow { max-width: 820px; }
.more-row { margin: var(--s-6) 0 0; }
@media (min-width: 1024px) {   /* Home: the screenshot gets the wider column */
}

/* Product screenshots (Home): a plain browser window around a real
   demo-tenant screenshot, a one-line caption under it. Tokens only. */
.screen { margin: 0; min-width: 0; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--card-gap); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* no lone card on the tablet row */
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
}
.card h3 { margin: 0 0 var(--s-2); }
.card p { margin: 0; color: var(--ink-2); }
.card p + p { margin-top: var(--s-3); }
.card .icon { margin-bottom: var(--s-4); }.icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--r-ctl);
  background: var(--gold-soft); color: var(--navy);
}
.icon svg { width: 22px; height: 22px; }.shot-frame { border-radius: calc(var(--r-card) + 6px); padding: 6px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
/* Split block: text beside a screenshot */
.split { display: grid; gap: calc(var(--s-6) * 1.5); align-items: center; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--s-6) * 2.5); }
  .split-rev > :first-child { order: 2; }
}.feature-stack { list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.feature-stack .feature { padding: var(--s-6) var(--card-pad); }
.feature-stack .feature + .feature { border-top: 1px solid var(--line-row); }
@media (min-width: 1024px) {
  /* line the screenshot up with the list, not with the group heading */
  .feature-group > .shot-frame { margin-top: calc(var(--s-6) * 2 + var(--s-2)); }
}
.feature { display: flex; gap: var(--s-4); align-items: flex-start; }
.feature .icon { margin: 0; }
.feature h3 { margin: 2px 0 var(--s-1); }
.feature p { margin: 0; color: var(--ink-2); }
.feature-list { list-style: none; }

.soon { border: 1.5px dashed var(--line-strong); border-radius: var(--r-card); padding: calc(var(--card-pad) * 1.25); background: transparent; }
.soon h2 { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 3px 12px; border-radius: 999px;
  background: var(--navy-soft); color: var(--ink-2);
  font-size: .9375rem; font-weight: 600; line-height: 1.5;
}
.pill-soon { background: var(--status-amber-bg); color: var(--status-amber); font-size: .8125rem; letter-spacing: .02em; }
.soon-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
/* ── Why Koletta: comparison table ─────────────────────────────────────────── */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.compare caption { text-align: left; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: var(--s-4) var(--card-pad); border-bottom: 1px solid var(--line-row); }
.compare thead th { background: var(--card); font-size: .9375rem; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.compare thead th.col-koletta { color: var(--navy); }
.compare tbody th { font-weight: 600; width: 30%; }
.compare tbody td:first-of-type { color: var(--ink-2); width: 30%; }
.compare tbody td.with { font-weight: 600; color: var(--ink); background: var(--navy-soft); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 767.98px) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto !important; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tbody tr { padding: var(--s-4) var(--card-pad); border-bottom: 1px solid var(--line); }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare tbody th, .compare tbody td { padding: 0; border: 0; }
  .compare tbody th { font-size: 1.0625rem; margin-bottom: var(--s-2); }
  .compare tbody td { font-size: 1rem; padding: var(--s-2) 0 0; }
  .compare tbody td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-3); }
  .compare tbody td.with { background: transparent; }
}

.steps { list-style: none; counter-reset: step; display: grid; gap: var(--card-gap); }
.steps li { counter-increment: step; position: relative; padding-left: 60px; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--on-navy);
  font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums;
}
.steps h3, .steps h4 { margin: 6px 0 var(--s-1); }
.steps p { margin: 0; color: var(--ink-2); }

.checklist { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.card h3 + .steps { margin-top: var(--s-6); }
.after-steps { margin-top: var(--card-gap); }
.checklist li { display: flex; gap: var(--s-3); align-items: flex-start; }
.checklist svg { flex: none; width: 20px; height: 20px; margin-top: 4px; color: var(--gold-ink); }

/* ── Security page ─────────────────────────────────────────────────────────── */
.topic { display: flex; gap: var(--s-4); align-items: flex-start; }
.topic .icon { margin: 0; }
.qa { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.qa th, .qa td { text-align: left; vertical-align: top; padding: var(--s-4) var(--card-pad); border-bottom: 1px solid var(--line-row); }
.qa tbody th { width: 34%; font-weight: 600; }
.qa td { color: var(--ink-2); }
.qa tr:last-child th, .qa tr:last-child td { border-bottom: 0; }
@media (max-width: 767.98px) {
  .qa, .qa tbody, .qa tr, .qa th, .qa td { display: block; width: auto !important; }
  .qa tr { padding: var(--s-4) var(--card-pad); border-bottom: 1px solid var(--line-row); }
  .qa tr:last-child { border-bottom: 0; }
  .qa th, .qa td { padding: 0; border: 0; }
  .qa td { padding-top: var(--s-1); }
}
.note-line { margin-top: calc(var(--s-6) * 1.5); font-size: 1.125rem; }

/* ── Pricing ───────────────────────────────────────────────────────────────── */
.pricing-actions { margin-top: calc(var(--s-6) * 1.25); }.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); margin: 0; }
.faq div { padding: var(--s-4) var(--card-pad) var(--s-4); border-bottom: 1px solid var(--line-row); }
.faq div:last-child { border-bottom: 0; }
.faq dt { font-weight: 600; }
.faq dd { margin: var(--s-1) 0 0; color: var(--ink-2); }

/* ── About ─────────────────────────────────────────────────────────────────── */
.founder { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 768px) { .founder { grid-template-columns: 200px minmax(0, 1fr); gap: calc(var(--s-6) * 1.5); } }
.founder-photo { width: 100%; max-width: 200px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-card); border: 1px solid var(--line); }
.founder h3 { font-size: 1.25rem; margin-bottom: var(--s-1); }
.founder .role { color: var(--ink-3); margin-bottom: var(--s-3); }
.founder ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-4); }
.beliefs { list-style: none; display: grid; gap: var(--card-gap); }
@media (min-width: 1024px) { .beliefs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.beliefs li {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--card-pad); border-top: 3px solid var(--gold);
  font-size: 1.1875rem; font-weight: 600; line-height: 1.4;
}
.company-line { color: var(--ink-2); margin: calc(var(--s-6) * 1.25) 0 0; }

/* ── Book a demo ───────────────────────────────────────────────────────────── */
.demo-grid { display: grid; gap: calc(var(--s-6) * 1.5); align-items: start; }
@media (min-width: 1024px) { .demo-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: calc(var(--s-6) * 2); } }
.demo-steps { list-style: none; display: grid; gap: var(--s-4); margin-bottom: 0; }
.demo-steps li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 1.125rem; }
.demo-steps svg { flex: none; width: 22px; height: 22px; margin-top: 4px; color: var(--gold-ink); }
.side-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--card-pad); }
.side-box h2 { font-size: 1.25rem; margin-bottom: var(--s-2); }
.side-box p { margin: 0; color: var(--ink-2); }
/* ── Closing call to action (every page) ───────────────────────────────────── */
.cta { padding: 0 0 var(--section); }
/* ── Legal pages (text unchanged; this is only the frame) ─────────────────── */
.legal { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); margin: 0 0 var(--s-2); }
.legal h1 span { color: var(--gold-ink); }
.legal h2 { font-size: 1.25rem; margin: calc(var(--s-6) * 1.4) 0 var(--s-3); }
.legal p, .legal li { color: var(--ink-2); line-height: 1.7; }
.legal ul { padding-left: var(--s-6); margin: 0 0 var(--s-4); }
.legal li + li { margin-top: var(--s-2); }
.legal .meta { color: var(--ink-3); font-size: .9375rem; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer { background: var(--navy); color: var(--on-navy-2); font-size: .9375rem; }
.site-footer a { color: var(--on-navy-2); text-decoration: none; }
.site-footer a:hover { color: var(--on-navy); text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--on-navy); }
.footer-grid { display: grid; gap: calc(var(--s-6) * 1.5); padding-top: calc(var(--s-6) * 2.5); padding-bottom: calc(var(--s-6) * 2); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } }
.footer-brand img { width: 200px; }
.footer-brand p { margin: var(--s-4) 0 0; color: var(--on-navy); max-width: 280px; }
.footer-nav ul { list-style: none; display: grid; gap: var(--s-2); }
@media (min-width: 420px) and (max-width: 767.98px) { .footer-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer-legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.footer-legal li + li::before { content: "·"; margin-right: var(--s-2); color: var(--on-navy-muted); }
.footer-bottom { position: relative; padding-top: var(--s-4); padding-bottom: calc(var(--s-6) * 1.25); }
.footer-bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--navy-line); }
.footer-nav a, .footer-legal a { display: inline-flex; align-items: center; min-height: 32px; }
.footer-bottom p { margin: 0; color: var(--on-navy-2); font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  .site-header .btn, .menu, .cta, .skip-link { display: none; }
}

/* ── Status tokens (DESIGN.md §4.3, light pairs) — for the product demos ─── */
:root {
  --status-blue: #234FBC;   --status-blue-bg: #EAF0FC;   /* Work it */
  --status-green: #21613D;  --status-green-bg: #E8F3EC;  /* Promise, money coming */
  --status-amber: #A23C06;  --status-amber-bg: #FCEADF;  /* Needs attention */
  --status-red: #9F302A;    --status-red-bg: #F9E8E5;    /* Urgent */
  --status-violet: #5C4691; --status-violet-bg: #EEE9F7; /* Legal */
  --status-slate: #4D5868;  --status-slate-bg: #EBEEF2;  /* Closed */
  /* Chart series — DESIGN.md §4.4: neutral/blue, never the brand gold.
     Values from index.css (--navy-600, --chart-gray-1, --blue). */
  --chart-1: #274069;
  --chart-2: #9CA3AF;
  --chart-3: #2F62E0;
}

/* ── Reveal on scroll (site.js §2) ───────────────────────────────────────── */
/* .js-reveal is added to <html> only when JS runs and motion is allowed, so
   nothing is ever hidden without it. Fade up 16px over .7s; a group staggers
   its children 80ms apart. Transform and opacity only. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.js-reveal [data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: .08s; }
.js-reveal [data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: .16s; }
.js-reveal [data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: .24s; }
.js-reveal [data-reveal-group] > [data-reveal]:nth-child(5) { transition-delay: .32s; }
.js-reveal [data-reveal-group] > [data-reveal]:nth-child(6) { transition-delay: .40s; }

/* ── Page-to-page transitions (same-origin navigations, browsers that can) ── */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ── Product demos: shared chrome ────────────────────────────────────────── */
/* A demo is a white "window": a quiet bar naming what it shows, then the
   product UI built from real elements. Every demo says "Demo data". */
.demo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-2); overflow: hidden; font-size: .9375rem; }
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--card); border-bottom: 1px solid var(--line-row); color: var(--ink-2); font-size: .8125rem; font-weight: 600; }
.demo-tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--navy-soft); color: var(--ink-3); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.demo-body { padding: var(--s-4); }
.demo-note { margin: var(--s-3) 0 0; font-size: .875rem; color: var(--ink-3); }
.demo-controls { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.demo-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); background: var(--surface);
  color: var(--ink); font: 600 .875rem/1.2 var(--font-sans); cursor: pointer;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.demo-btn:hover { background: var(--field); border-color: var(--line-strong); }
.demo-btn[aria-pressed="true"], .demo-btn.is-on { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }.demo-btn:disabled { opacity: .5; cursor: default; }
/* Status chips: color AND label, never color alone (DESIGN.md §4.3). */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 600; line-height: 1.55; white-space: nowrap; }
.chip-blue { color: var(--status-blue); background: var(--status-blue-bg); }
.chip-green { color: var(--status-green); background: var(--status-green-bg); }
.chip-amber { color: var(--status-amber); background: var(--status-amber-bg); }
.chip-red { color: var(--status-red); background: var(--status-red-bg); }.chip-slate { color: var(--status-slate); background: var(--status-slate-bg); }
/* The gold marker means "Core origin" (DESIGN.md §4.1): AI-generated text only. */
.core-mark { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); flex: none; }

/* ── Why Koletta: one column at a time on phones (site.js §3) ────────────── */
.compare-toggle { display: none; gap: var(--s-2); margin-bottom: var(--s-4); }
@media (max-width: 767.98px) {
  /* Space is reserved before the script runs, so the table never moves. */
  .compare-toggle { display: flex; flex-wrap: wrap; visibility: hidden; }
  .js-compare .compare-toggle { visibility: visible; }
  .js-compare .compare.show-koletta td[data-label="Done by hand"] { display: none; }
  .js-compare .compare.show-hand td.with { display: none; }
}

/* ── Security: the isolation diagram sits under the topic cards ──────────── */
.isolation-wrap { margin-top: calc(var(--s-6) * 2); }
.isolation-wrap:empty { display: none; }

/* ── Product demo (demo:worklist): Home, the priority worklist ───────────────── */
/* koletta.com — demo-worklist.css: the Home page's priority worklist demo.
   Tokens from site.css only; every class is prefixed .wl-. The rows are an
   ARIA table (role="table"/"row"/"cell") laid out with grid so each row can
   be moved with a transform while the DOM stays in ranked order. */
.wl-table { font-size: .875rem; }
.wl-body { position: relative; }
.wl-row {
  display: grid;
  grid-template-columns: 16px 62px minmax(0, 1fr) 126px minmax(0, 1.8fr);
  column-gap: var(--s-3);
  align-items: baseline;
  padding: 9px var(--s-4);
  border-bottom: 1px solid var(--line-row);
  background: var(--surface);
}
.wl-head {
  padding: var(--s-2) var(--s-4);
  border-bottom-color: var(--line);
  color: var(--ink-3);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
}
.wl-rank, .wl-pts { text-align: right; }
.wl-rank { color: var(--ink-3); font-size: .8125rem; }
.wl-pts { color: var(--ink); font-size: .9375rem; font-weight: 600; }
.wl-head .wl-pts { color: var(--ink-3); font-size: .8125rem; }
.wl-co { color: var(--ink); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.wl-why { color: var(--ink-3); line-height: 1.4; }
.wl-foot { padding: var(--s-3) var(--s-4); background: var(--card); }
.wl-foot .demo-note { margin: 0; }

/* The stopped row: "Not ranked · Dispute" instead of a fake zero, quieter,
   last. The label sits on two lines so it never breaks mid-word. */
.wl-out .wl-pts { color: var(--ink-3); font-size: .8125rem; font-weight: normal; line-height: 1.35; }
.wl-out .wl-co, .wl-out .wl-why { color: var(--ink-3); }
.wl-out .wl-co { font-weight: normal; }
.wl-sep { display: none; }
.wl-nr2 { display: block; }

/* Paint order for the glide: the DOM is already ranked, so a row that ends
   higher always paints over the rows it passes on its way up. Relative with
   no offsets, so offsetTop (what the JS measures) is unchanged. */
.wl-body .wl-row { position: relative; }
.wl-body .wl-row:nth-child(1) { z-index: 6; }
.wl-body .wl-row:nth-child(2) { z-index: 5; }
.wl-body .wl-row:nth-child(3) { z-index: 4; }
.wl-body .wl-row:nth-child(4) { z-index: 3; }
.wl-body .wl-row:nth-child(5) { z-index: 2; }
.wl-body .wl-out { z-index: 1; }

/* Animation states, set by demo-worklist.js (never without JS). Scoped to
   the body so the "Why it scored" column header never blinks. */
.wl-armed .wl-body .wl-why { opacity: 0; }
.wl-counting .wl-body .wl-why { opacity: 1; transition: opacity 1.2s var(--ease); }
.wl-moving .wl-body .wl-row { transition: transform .6s var(--ease); }

/* Narrow: rank, points, company and status stay on one line; the why line
   sits under them. Keyed to the demo's own width (content box; the flip is a
   542px card). Browsers without container queries get the same result from
   the viewport: phones, and the Home split column while it is under that
   (2 x 542 + 60 gap + 2 x 32 gutter = 1208). */
.wl { container-type: inline-size; }
@container (max-width: 539.98px) {
  .wl-row { grid-template-columns: 14px 62px minmax(0, 1fr) max-content; column-gap: 10px; padding: 9px var(--s-3); }
  .wl-head { padding: var(--s-2) var(--s-3); }
  .wl-why { grid-column: 3 / -1; margin-top: 1px; }
  .wl-head .wl-why { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* The narrowest phones: the status chip drops under the company name. */
@container (max-width: 339.98px) {
  .wl-row { grid-template-columns: 14px 62px minmax(0, 1fr); }
  .wl-st { grid-column: 3 / -1; justify-self: start; margin-top: 2px; }
  .wl-head .wl-st { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@supports not (container-type: inline-size) {
  @media (max-width: 581.98px), (min-width: 1024px) and (max-width: 1207.98px) {
    .wl-row { grid-template-columns: 14px 62px minmax(0, 1fr) max-content; column-gap: 10px; padding: 9px var(--s-3); }
    .wl-head { padding: var(--s-2) var(--s-3); }
    .wl-why { grid-column: 3 / -1; margin-top: 1px; }
    .wl-head .wl-why { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  }
}

/* ── Product demo (demo:rundown): Features: the Rundown summary ─────────── */
/* koletta.com — demo-rundown.css (website-v1)
   Features page, "Work smarter": the Rundown demo. Shared chrome (.demo,
   .demo-btn, .chip, .core-mark) comes from site.css; this file adds only the
   account tabs, the cream Rundown panel and the two animation states. Every
   value is a site.css token. Light mode only.

   No layout shift: the summary and the chip row reserve the room the longest
   of the three accounts needs, keyed to the demo's OWN width (a container
   query), because the same demo sits in a 560px column on desktop and fills
   the page on phones. The base values are the 375–414px phone case — the one
   audience whose browsers may lack container queries. */

[data-demo="rundown"] { container-type: inline-size; }

/* Account tabs: pressed/unpressed buttons at the shared 14px control size.
   Stacked by default so no name is ever cut; one row once the three fit side
   by side (from 544px: they need 486px of row, the 558px Features column has
   526px). */
.rundown-tabs { margin: 0 0 var(--s-4); flex-direction: column; }
.rundown-tabs .demo-btn { justify-content: flex-start; }

/* The Rundown panel: a cream inset on the white body with a hairline edge —
   the app's Core action card (cream with navy ink). */
.rundown-panel {
  background: var(--card);
  border: 1px solid var(--line-row);
  border-radius: var(--r-ctl);
  padding: var(--s-4);
}
.rundown-head { margin: 0 0 var(--s-3); font-size: .875rem; line-height: 1.5; color: var(--ink-3); }
.rundown-head .core-mark { margin-right: var(--s-2); vertical-align: -1px; }
.rundown-title { font-weight: 600; color: var(--ink); margin-right: var(--s-1); }
.rundown-sub { display: inline-block; font-size: .8125rem; } /* moves whole to its own line when it does not fit */

/* The summary: 16px on 1.6 lines. min-height = lines x 1.6em. */
.rundown-text {
  margin: 0;
  min-height: 11.2em;                       /* 7 lines */
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}

/* A thin, still caret while the summary is arriving; gone when it is done. */
.rundown-typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -.15em;
  background: var(--ink);
}

/* Fact chips: color and label together (site.css .chip). They fade up once
   the summary has finished; the row keeps its height meanwhile. Hiding is
   instant (no transition on the way out), so a tab click clears the panel
   before the next summary types instead of fading the new chips out. */
.rundown-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  min-height: 24px;                         /* 1 row */
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.rundown-pending { opacity: 0; transform: translateY(4px); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .rundown-chips { transition: none; }
}

/* Reservations by the demo's own width (measured: the longest summary and
   the widest chip set at each width, plus an 8px margin). */
@container (max-width: 315px) { .rundown-text { min-height: 14.4em; } }  /* 9 lines */
@container (max-width: 323px) { .rundown-chips { min-height: 54px; } }   /* 2 rows */
@container (min-width: 348px) { .rundown-text { min-height: 9.6em; } }   /* 6 lines */
@container (min-width: 416px) { .rundown-text { min-height: 8em; } }     /* 5 lines */
@container (min-width: 484px) { .rundown-text { min-height: 6.4em; } }   /* 4 lines */
@container (min-width: 544px) {
  .rundown-tabs { flex-direction: row; }
  .rundown-tabs .demo-btn { justify-content: center; padding: 0 10px; }
}
@container (min-width: 608px) { .rundown-text { min-height: 4.8em; } }   /* 3 lines */

/* ── Product demo (demo:sequence): Features: the demand sequence ─────────── */
/* koletta.com — demo-sequence.css (website-v1). Features page, "Automate":
   the demand-sequence demo. Shared chrome (.demo, .demo-btn, .chip) is
   site.css. Tokens only; every height is reserved so no state shifts. */
[data-demo="sequence"] { container-type: inline-size; }

/* Status: the app's one label, large, with its detail line under it. */
.seq-status { margin: 0 0 var(--s-4); }
.seq-chip { font-size: 1rem; line-height: 1.5; padding: 4px 14px; transition: background-color .35s var(--ease), color .35s var(--ease); }
.seq-detail { margin: var(--s-2) 0 0; min-height: 2.9em; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }

/* Steps: a node on a line, the letter's name and its state word. */
.seq-steps { list-style: none; display: grid; margin: 0 0 var(--s-4); }
.seq-step { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; padding: 0 0 var(--s-3); }
.seq-step:last-child { padding-bottom: 0; }
.seq-node { position: relative; z-index: 1; width: 14px; height: 14px; margin: 4px 3px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.seq-cur .seq-node { border-color: var(--navy); }
.seq-hold .seq-node { border-color: var(--status-amber); }
.seq-red .seq-node { border-color: var(--status-red); }
.seq-sent .seq-node { background: var(--navy); border-color: var(--navy); }
/* The line to the next step (::before) and its filled part (::after). */
.seq-step::before, .seq-step::after { content: ""; position: absolute; left: 9px; top: 11px; bottom: -11px; width: 2px; background: var(--line-strong); }
.seq-step:last-child::before, .seq-step:last-child::after { display: none; }
.seq-step::after { background: var(--navy); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); }
.seq-sent::after { transform: none; }
.seq-text { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); min-height: 22px; }
.seq-name { font-size: .875rem; font-weight: 600; line-height: 1.4; }
.seq-code { font-weight: normal; color: var(--ink-3); }
.seq-state { display: inline-flex; align-items: center; flex: none; min-height: 22px; padding: 1px 0; font-size: .8125rem; font-weight: 600; line-height: 1.55; white-space: nowrap; }
.seq-state:not(.chip) { color: var(--ink-3); }
.seq-state.chip { padding: 1px 10px; }

/* Small labels, the log (five lines at most, newest last, fixed height). */
.seq-label { margin: 0 0 var(--s-1); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.seq-log { list-style: none; min-height: 134px; margin: 0 0 var(--s-4); font-size: .875rem; }
.seq-log > li { padding: 3px 0; line-height: 1.43; border-top: 1px solid var(--line-row); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.seq-log > li:first-child { border-top: 0; }
.seq-later { color: var(--ink-3); }
.seq-in { opacity: 0; transform: translateY(4px); }
.seq-reset { margin-left: auto; }

@container (max-width: 300px) { .seq-detail { min-height: 4.35em; } .seq-log { min-height: 154px; } }
@container (min-width: 440px) {
  .seq-detail { min-height: 1.45em; }
  .seq-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seq-step { grid-template-columns: none; justify-items: center; padding: 0 var(--s-1); text-align: center; }
  .seq-step::before, .seq-step::after { left: 50%; right: -50%; top: 10px; bottom: auto; width: auto; height: 2px; }
  .seq-step::after { transform: scaleX(0); transform-origin: left; }
  .seq-sent::after { transform: none; }
  .seq-node { margin: 4px 0 var(--s-2); }
  .seq-text { flex-direction: column; align-items: center; gap: var(--s-1); }
  .seq-name { min-height: 2.8em; }
}
@container (min-width: 540px) { .seq-name { min-height: 1.4em; } }

/* ── Product demo (demo:isolation): Security: agency separation and the leak test ─────────── */
/* koletta.com — demo-isolation.css (website-v1): the Security page's leak-test
   diagram. No viewBox: positions are percentages, so strokes and text keep
   their pixel size. Every token comes from site.css. */

[data-demo="isolation"] { max-width: 820px; margin: 0; container-type: inline-size; }

.isolation-svg { display: block; width: 100%; height: 224px; overflow: visible; }
/* Labels: 13px (the .chip size). Color overrides below nest under .isolation-svg to win. */
.isolation-svg text { font-size: 13px; font-weight: 600; fill: var(--ink-2); }

/* One database: the outer frame. The legend inherits. */
.isolation-frame { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); rx: var(--r-card); fill: none; stroke: var(--line-strong); }

/* Three agencies: a card, a lock, a name and three faint data rows each. */
.isolation-box { overflow: visible; }
.isolation-box-r { rx: var(--r-ctl); fill: var(--card); stroke: var(--line); }
.isolation-lock { fill: none; stroke: var(--ink-2); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.isolation-row { stroke: var(--line); }

/* The probe: starts in A, drawn toward B's wall (the script sets pathLength=1
   before arming, so the dash math is unit-free; without JS the line is solid). */
.isolation-probe-line { stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }
.isolation-probe-dot { fill: var(--navy); }
.isolation-svg .isolation-probe-label { fill: var(--navy); }

/* Refused at the wall: a red bar on B's edge, a .chip-red chip above. */
.isolation-bar { fill: var(--status-red); transform: translate(-1px, -9px); }
.isolation-chip-bg { rx: 11px; fill: var(--status-red-bg); transform: translate(-35px, -34px); }
.isolation-svg .isolation-chip-t { fill: var(--status-red); }

/* Under the frame: the gate's answer and a replay control (JS only). The row
   and the button keep a fixed size, so nothing shifts. */
.isolation-verdict { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); min-height: 36px; margin-top: var(--s-4); }
.isolation-result { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; font-size: .875rem; color: var(--ink-3); }
.isolation-replay { display: none; min-width: 7.75em; justify-content: center; }
.isolation-cap .demo-note + .demo-note { margin-top: var(--s-1); }

/* Root states from demo-isolation.js (never without JS or reduced motion).
   Armed = rewound; transitions sit on the "on" rules, so a replay resets at once. */
.isolation-armed .isolation-probe-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.isolation-armed .isolation-bar, .isolation-armed .isolation-chip, .isolation-armed .isolation-result { opacity: 0; }
.isolation-armed .isolation-replay { display: inline-flex; }
.isolation-run .isolation-probe-line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease); }
.isolation-hit .isolation-probe-move { animation: isolation-bump .3s var(--ease); }
.isolation-hit .isolation-bar { opacity: 1; transition: opacity .15s var(--ease); }
.isolation-stopped .isolation-chip { opacity: 1; transition: opacity .25s var(--ease); }
.isolation-released .isolation-result { opacity: 1; transition: opacity .35s var(--ease); }
@keyframes isolation-bump { 50% { transform: translateX(-6px); } }

@container (max-width: 480px) {
  .isolation-svg { height: 210px; }
  /* Chip and replay share one line; the key is hidden visually only
     (the site.css .visually-hidden pattern), assistive tech still reads it. */
}
/* Phones up to 370px wide: the lock would push the name into its card's edge. */
@container (max-width: 330px) {
  .isolation-lock { display: none; }
  .isolation-name { transform: translateX(-21px); }
}
@media (prefers-reduced-motion: reduce) { .isolation-hit .isolation-probe-move { animation: none; } }

/* ── Product demo (demo:charts): Features: Command Center charts ─────────── */
/* koletta.com — demo-charts.css (website-v1). Features page, "Manage": the
   Command Center demo, two counts-only charts in inline SVG sized in pixels
   (no viewBox) so text stays 12px at every width; x positions are percents.
   Shared chrome (.demo, .demo-bar, .demo-note) is site.css. Tokens only. */
[data-demo="charts"] { container-type: inline-size; }
.charts-grid { display: grid; gap: var(--s-4); max-width: 720px; }
@container (min-width: 500px) { .charts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
.charts-panel { margin: 0; min-width: 0; }
.charts-title { margin: 0 0 var(--s-1); font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.charts-svg { display: block; width: 100%; height: 172px; overflow: visible; }
.charts-svg text { font-size: 12px; fill: var(--ink-2); }
.charts-ticks text { text-anchor: end; fill: var(--ink-3); }
.charts-cats text { text-anchor: middle; }
.charts-gl { stroke: var(--line-row); stroke-width: 1; }
.charts-base { stroke: var(--line-strong); stroke-width: 1; }
.charts-val { font-size: 12px; fill: var(--ink-2); text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.charts-max { font-size: 13px; font-weight: 600; fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }

/* Marks: a bar runs 4px under the baseline, clipped, so its top is rounded
   and its foot square, and is never wider than 26px; the line is four
   segments with pathLength 1; a marker has a surface ring and a wider hit
   circle; the one direct label wears a surface halo over the gridline. */
.charts-bar { fill: var(--chart-1); width: min(8%, 26px); transform-box: fill-box; transform-origin: 50% 100%; }
.charts-bar:nth-of-type(1) { x: calc(22.5% - min(4%, 13px)); }
.charts-bar:nth-of-type(2) { x: calc(43.5% - min(4%, 13px)); }
.charts-bar:nth-of-type(3) { x: calc(64.5% - min(4%, 13px)); }
.charts-bar:nth-of-type(4) { x: calc(85.5% - min(4%, 13px)); }
.charts-bar:hover { fill: var(--navy); }
.charts-seg { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linecap: round; }
.charts-dot { fill: var(--chart-1); stroke: var(--surface); stroke-width: 2; transform-box: fill-box; transform-origin: 50% 50%; }
.charts-hit { fill: var(--surface); fill-opacity: 0; }
.charts-pt:hover .charts-dot { r: 5.5px; }

/* Animation states, set by demo-charts.js only (never without JS):
   .charts-armed rewinds a chart, .charts-run plays it once. The dash gap is
   longer than the segment so a rewound segment shows nothing at all. */
.charts-armed .charts-bar { transform: scaleY(0); }
.charts-armed .charts-seg, .charts-run .charts-seg { stroke-dasharray: 1 2; }
.charts-armed .charts-seg { stroke-dashoffset: 1.05; }
.charts-armed .charts-dot { opacity: 0; transform: scale(.3); }
.charts-armed .charts-max { opacity: 0; }
.charts-run .charts-bar { transform: none; transition: transform .7s var(--ease); }
.charts-run .charts-bar:nth-of-type(2) { transition-delay: 80ms; }
.charts-run .charts-bar:nth-of-type(3) { transition-delay: 160ms; }
.charts-run .charts-bar:nth-of-type(4) { transition-delay: 240ms; }
.charts-run .charts-seg { stroke-dashoffset: 0; transition: stroke-dashoffset .225s linear; }
.charts-run .charts-seg:nth-of-type(2) { transition-delay: .225s; }
.charts-run .charts-seg:nth-of-type(3) { transition-delay: .45s; }
.charts-run .charts-seg:nth-of-type(4) { transition-delay: .675s; }
.charts-run .charts-dot { opacity: 1; transform: none; transition: transform .3s var(--ease), opacity .2s var(--ease); transition-delay: .9s; }
.charts-run .charts-pt:nth-of-type(2) .charts-dot { transition-delay: .97s; }
.charts-run .charts-pt:nth-of-type(3) .charts-dot { transition-delay: 1.04s; }
.charts-run .charts-pt:nth-of-type(4) .charts-dot { transition-delay: 1.11s; }
.charts-run .charts-pt:nth-of-type(5) .charts-dot { transition-delay: 1.18s; }
.charts-run .charts-max { opacity: 1; transition: opacity .4s var(--ease); transition-delay: 1s; }
.charts-run.charts-line .charts-max { transition-delay: 1.3s; }

/* ── Review round: small corrections ─────────────────────────────────────── */
.steps li::before { font-family: var(--font-sans); font-size: 1.125rem; }      /* Newsreader is titles and big numbers only */
.beliefs li { border-top-color: var(--navy); }
.icon { background: var(--navy-soft); }                                          /* gold is buttons, brand and Core origin */
.soon-list .pill { border-radius: var(--r-ctl); padding-block: var(--s-1); }
/* Demo controls appear once their script has wired them, so nothing looks
   clickable without JS (the isolation demo already works this way). */
[data-demo="rundown"]:not(.rundown-live) .rundown-tabs,
[data-demo="sequence"]:not(.seq-live) .seq-whatif,
[data-demo="sequence"]:not(.seq-live) .demo-controls { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   v2 — the premium redesign (Oct 2026). Scoped to <html class="v2"> so a
   page is moved over deliberately; the rules above still carry the pages
   not yet redesigned. Geist everywhere, Geist Mono for the small labels;
   sections rotate white → cream → deep navy; pill buttons; 20px cards with
   a hairline; the one big shadow sits under the hero product panel.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lenis smooth scroll — the library's recommended CSS (assets/js/vendor/). */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

html.v2 {
  --wrap: 1120px;
  --white: #FFFFFF;
  --cream-2: #F8F5EE;                       /* the light cream band */
  --navy-deep: #0B1426;                     /* the deep navy band */
  --slate: #5B6472;                         /* muted body text */
  --on-dark: #ECE7DC;
  --on-dark-2: rgba(236, 231, 220, .72);
  --on-dark-3: rgba(236, 231, 220, .56);
  --hair: rgba(18, 28, 49, .10);            /* hairline on light */
  --hair-2: rgba(18, 28, 49, .18);
  --hair-dark: rgba(236, 231, 220, .12);    /* hairline on navy */
  --r-card: 20px;
  --r-pill: 999px;
  --section-pad: clamp(88px, 10vw, 140px);
  --header-h: 72px;
  --t-hover: 180ms;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
html.v2 body { background: var(--white); color: var(--ink); font-size: 18px; line-height: 1.55; font-variant-numeric: normal; }
html.v2 main { display: block; }

/* ── Type ──────────────────────────────────────────────────────────────────── */
html.v2 h1, html.v2 h2 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; text-wrap: balance; color: inherit; }
html.v2 h1 { font-size: clamp(44px, 6vw, 76px); }
html.v2 h2 { font-size: clamp(34px, 4.2vw, 52px); }
html.v2 .h-line { display: block; }
html.v2 .h-muted { opacity: .55; }
html.v2 .label {
  margin: 0 0 20px; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
}
html.v2 .v-dark .label { color: var(--on-dark-3); }
html.v2 .sub { margin: 20px 0 0; max-width: 560px; color: var(--slate); font-size: 18px; line-height: 1.55; }
html.v2 .v-dark .sub { color: var(--on-dark-2); }
html.v2 .section-head { max-width: 760px; margin: 0 0 clamp(40px, 5vw, 64px); }
html.v2 h2 + * { margin-top: 20px; }
html.v2 .v-dark { background: var(--navy-deep); color: var(--on-dark); position: relative; }
html.v2 .v-dark a { color: var(--on-dark); }
html.v2 .v-dark :focus-visible { outline-color: var(--on-dark); }
html.v2 .v-white { background: var(--white); }
html.v2 .v-cream { background: var(--cream-2); }
/* The faint grain on every navy band: a 160px noise tile, pre-rendered.
   It was an SVG feTurbulence filter (grain.svg) — browsers ran the filter
   at paint time, again for every tile and every repaint of the band, which
   is what made the page lag (Oct 23 2026). A PNG is decoded once; the
   overlay sits on its own layer so the hero's drifting glows beneath it
   never make the band re-paint. */
html.v2 .v-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/assets/img/grain.png") repeat; background-size: 160px 160px;
  opacity: .045; transform: translateZ(0);
}
html.v2 .v-dark > .wrap { position: relative; z-index: 1; }

/* ── Buttons: pills ────────────────────────────────────────────────────────── */
html.v2 .btn {
  min-height: 48px; padding: 0 22px; gap: 8px;
  border-radius: var(--r-pill); font: 500 16px/1.2 var(--font-sans);
  transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
html.v2 .btn-lg { min-height: 52px; padding: 0 26px; font-size: 17px; }
html.v2 .btn svg { width: 18px; height: 18px; transition: transform var(--t-hover) var(--ease-out); }
html.v2 .btn:hover svg { transform: translateX(3px); }
html.v2 .btn-down:hover svg { transform: translateY(3px); }
html.v2 .btn-gold { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
html.v2 .btn-gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--navy-deep); }
html.v2 .btn-soft { background: rgba(15, 34, 64, .06); border-color: transparent; color: var(--navy); }
html.v2 .btn-soft:hover { background: rgba(15, 34, 64, .1); color: var(--navy); }
html.v2 .v-dark .btn-soft { background: rgba(236, 231, 220, .1); border-color: rgba(236, 231, 220, .14); color: var(--on-dark); }
html.v2 .v-dark .btn-soft:hover { background: rgba(236, 231, 220, .16); color: var(--on-dark); }
html.v2 .more-link { min-height: 44px; font-weight: 500; font-size: 17px; }
html.v2 .more-link svg { transition: transform var(--t-hover) var(--ease-out); }
html.v2 .more-link:hover svg { transform: translateX(3px); }
html.v2 .more-row { margin: clamp(32px, 4vw, 48px) 0 0; }
html.v2 .more-row-tight { margin-top: 0; }
html.v2 .actions { gap: 12px; }

/* ── Header: fixed; clear over the dark hero, white at 80% + blur once
   scrolled 20px (site.js sets .is-clear; without JS it is always solid). ── */
html.v2 .site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255, 255, 255, .8); color: var(--navy);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out);
}
html.v2 .site-header.is-clear {
  background: transparent; color: var(--on-dark);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
}
html.v2 .site-header a { color: inherit; }
html.v2 .site-header :focus-visible { outline-color: currentColor; }
html.v2 .brand { display: flex; align-items: center; min-height: 44px; }   /* the wordmark's tap target */
html.v2 .brand img { width: 150px; }
html.v2 .brand .brand-on-dark { display: none; }
html.v2 .brand .brand-on-light { display: block; }
html.v2 .site-header.is-clear .brand-on-dark { display: block; }
html.v2 .site-header.is-clear .brand-on-light { display: none; }
html.v2 .nav-list { gap: 2px; }
html.v2 .nav-list a {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 500; opacity: .78; color: inherit;
  transition: background-color var(--t-hover) var(--ease-out), opacity var(--t-hover) var(--ease-out);
}
html.v2 .nav-list a:hover { opacity: 1; background: rgba(15, 34, 64, .06); color: inherit; }
html.v2 .site-header.is-clear .nav-list a:hover { background: rgba(236, 231, 220, .1); }
html.v2 .nav-list a[aria-current="page"] { opacity: 1; box-shadow: none; }
html.v2 .site-header .btn-gold { min-height: 44px; padding: 0 18px; font-size: 15px; color: var(--navy-deep); }
html.v2 .menu summary { color: inherit; border-radius: var(--r-pill); }
html.v2 .menu summary:hover { background: rgba(15, 34, 64, .06); }
html.v2 .site-header.is-clear .menu summary:hover { background: rgba(236, 231, 220, .1); }
html.v2 .menu-panel { background: var(--white); color: var(--navy); border-top: 1px solid var(--hair); box-shadow: 0 24px 48px rgba(11, 20, 38, .14); padding-bottom: 20px; }
html.v2 .menu-panel a { color: var(--navy); border-bottom-color: var(--hair); font-weight: 500; }
html.v2 .menu-panel a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--navy); }
@media (min-width: 1024px) { html.v2 .brand img { width: 160px; } }
@media (max-width: 379.98px) { html.v2 .brand img { width: 120px; } html.v2 .site-header .btn-gold { padding: 0 14px; } }

/* ── Sections ──────────────────────────────────────────────────────────────── */
html.v2 .section { padding: var(--section-pad) 0; }
html.v2 .section + .section { padding-top: var(--section-pad); }

/* Hero: deep navy with a slow gradient drift (two soft glows on transform
   only), the copy centred, the product panel pulled up over its foot. */
html.v2 .hero {
  overflow: hidden; text-align: center;
  padding: calc(var(--header-h) + clamp(72px, 9vw, 120px)) 0 clamp(170px, 20vw, 270px);
  background: radial-gradient(120% 90% at 50% -10%, #17305A 0%, #0F2240 38%, var(--navy-deep) 72%);
}
html.v2 .hero-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
html.v2 .glow { position: absolute; border-radius: 50%; will-change: transform; transform: translateZ(0); }
html.v2 .glow-a {
  width: 56vw; height: 56vw; max-width: 820px; max-height: 820px; left: -12vw; top: -24vw;
  background: radial-gradient(closest-side, rgba(58, 102, 194, .32), rgba(58, 102, 194, 0) 70%);
  animation: glow-a 38s ease-in-out infinite alternate;
}
html.v2 .glow-b {
  width: 46vw; height: 46vw; max-width: 680px; max-height: 680px; right: -18vw; top: 6vw;
  background: radial-gradient(closest-side, rgba(195, 158, 100, .18), rgba(195, 158, 100, 0) 70%);
  animation: glow-b 46s ease-in-out infinite alternate;
}
@keyframes glow-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(14vw, 10vw, 0); } }
@keyframes glow-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-16vw, -8vw, 0); } }
html.v2 .hero-inner { max-width: 1120px; margin: 0 auto; }
html.v2 .hero .label { color: var(--on-dark-3); margin-bottom: 28px; }
html.v2 .hero h1 { color: var(--on-dark); margin: 0 auto; }
html.v2 .hero .lead { margin: 28px auto 0; max-width: 760px; color: var(--on-dark-2); font-size: clamp(18px, 1.3vw, 21px); line-height: 1.55; }
html.v2 .hero .actions { justify-content: center; margin-top: 40px; }

/* The live product panel, right under the hero */
html.v2 .hero-demo { padding: 0 0 var(--section-pad); }
html.v2 .panel-hero { margin: clamp(-200px, -14vw, -110px) auto 0; max-width: 960px; box-shadow: 0 32px 64px -24px rgba(11, 20, 38, .45), 0 12px 28px -12px rgba(11, 20, 38, .2); }

/* ── Panels and window frames ──────────────────────────────────────────────── */
html.v2 .panel, html.v2 .frame { margin: 0; background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden; color: var(--ink); text-align: left; }
html.v2 .frame { border-radius: 16px; }
html.v2 .panel-bar, html.v2 .frame-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--hair); background: var(--cream-2); font-size: 13px; font-weight: 500; color: var(--slate); }
html.v2 .frame-bar { background: var(--white); padding: 10px 16px; }
html.v2 .panel-title { flex: 1; min-width: 0; text-align: center; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v2 .frame-url { flex: 1; min-width: 0; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v2 .panel-dots { display: flex; gap: 6px; flex: none; }
html.v2 .panel-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(18, 28, 49, .16); }
html.v2 .panel-tag { flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); padding: 3px 10px; border: 1px solid var(--hair-2); border-radius: var(--r-pill); white-space: nowrap; }
html.v2 .panel-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 20px; border-top: 1px solid var(--hair); background: var(--cream-2); font-size: 13px; color: var(--slate); }
html.v2 .panel-live { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink); }
html.v2 .frame picture, html.v2 .frame img { display: block; width: 100%; height: auto; }
html.v2 .chip { font-weight: 500; font-size: 12px; padding: 1px 9px; line-height: 1.6; }
@media (max-width: 479.98px) { html.v2 .frame-url { display: none; } html.v2 .frame-bar .panel-tag { margin-left: auto; } }

/* The call list (the hero demo and the How-it-works "Call list" tab) */
html.v2 .calls { list-style: none; margin: 0; padding: 0; }
html.v2 .calls-head, html.v2 .call {
  display: grid; grid-template-columns: 24px minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(150px, auto) 40px;
  column-gap: 16px; align-items: center; padding: 14px 20px;
}
html.v2 .calls-head { padding: 10px 20px; border-bottom: 1px solid var(--hair); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
html.v2 .calls-head .calls-pts { grid-column: 5; }
html.v2 .call { border-bottom: 1px solid var(--hair); font-size: 15px; }
html.v2 .call:last-child { border-bottom: 0; }
html.v2 .calls-rank { font-family: var(--font-mono); font-size: 13px; color: var(--slate); }
html.v2 .calls-co { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 500; color: var(--ink); line-height: 1.35; }
html.v2 .calls-why { color: var(--slate); font-size: 14px; line-height: 1.4; }
html.v2 .calls-pts { text-align: right; font-family: var(--font-mono); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
html.v2 .calls-pts { grid-column: 5; }
html.v2 .calls-ev { grid-column: 4; justify-self: start; }
html.v2 .call-out .calls-rank, html.v2 .call-out .calls-co, html.v2 .call-out .calls-why { color: var(--slate); }
html.v2 .call-out .calls-co { font-weight: 400; }
html.v2 .call-out .calls-pts { font-size: 11px; color: var(--slate); letter-spacing: .04em; }
html.v2 .calls-static .call { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1.5fr) 56px; }
html.v2 .calls-static .calls-pts { grid-column: 4; }
@media (max-width: 719.98px) {
  html.v2 .calls-head { display: none; }
  html.v2 .call, html.v2 .calls-static .call { grid-template-columns: 22px minmax(0, 1fr) 44px; column-gap: 12px; row-gap: 4px; padding: 12px 16px; }
  html.v2 .calls-why, html.v2 .calls-ev { grid-column: 2; }
  html.v2 .calls-pts, html.v2 .calls-static .calls-pts { grid-row: 1; grid-column: 3; }
  html.v2 .calls-ev { margin-top: 2px; }
}
/* Animation states, set by site.js only (class calls-live) — opacity and
   transform only, every row and chip keeps its space, so nothing moves. */
html.v2 .calls-live .call { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.v2 .calls-live .call.is-on { opacity: 1; transform: none; }
html.v2 .calls-live .calls-ev { opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
html.v2 .calls-live .calls-ev.is-on { opacity: 1; transform: none; }
html.v2 .calls-live.calls-out .call, html.v2 .calls-live.calls-out .calls-ev { transition-duration: .5s; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
html.v2 .cards { list-style: none; display: grid; gap: 16px; }
@media (min-width: 768px) { html.v2 .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.v2 .card {
  height: 100%; background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-card);
  padding: 28px; box-shadow: none;
  transition: transform var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
html.v2 .card:hover { transform: translateY(-2px); border-color: var(--hair-2); }
html.v2 .card p { margin: 0; color: var(--ink); font-size: 18px; font-weight: 500; line-height: 1.4; }
html.v2 .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--gold-soft); color: var(--navy); }
html.v2 .icon svg { width: 22px; height: 22px; }
html.v2 .card .icon { margin-bottom: 22px; }

/* Security facts on navy */
html.v2 .facts { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { html.v2 .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html.v2 .facts li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: 24px; border: 1px solid var(--hair-dark); border-radius: var(--r-card);
  background: rgba(255, 255, 255, .03); font-weight: 500; font-size: 17px; line-height: 1.35;
}
html.v2 .facts .icon { background: rgba(195, 158, 100, .16); color: var(--gold); }

/* ── How it works: pill tabs ───────────────────────────────────────────────── */
html.v2 .tab-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
html.v2 .tab {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--hair-2); border-radius: var(--r-pill);
  background: transparent; color: var(--ink); font: 500 15px/1.2 var(--font-sans); cursor: pointer;
  transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
html.v2 .tab:hover { background: rgba(15, 34, 64, .06); }
html.v2 .tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
html.v2 .tabs:not(.tabs-live) .tab-list { display: none; }          /* no JS: no controls that do nothing… */
html.v2 .tabs:not(.tabs-live) .pane[hidden] { display: block; }     /* …and every pane shown, stacked */
html.v2 .tabs:not(.tabs-live) .pane + .pane { margin-top: 48px; }
html.v2 .pane-line { margin: 0 0 20px; max-width: 640px; font-size: 18px; color: var(--ink); }
html.v2 .tabs-live .pane { animation: pane-in .5s var(--ease-out); }
@keyframes pane-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.v2 .mini { padding: clamp(16px, 4vw, 40px); background: var(--cream-2); }
@media (min-width: 768px) { html.v2 .mini { min-height: 380px; display: grid; align-content: center; } }
html.v2 .mini-title { width: 100%; margin: 0 0 12px; max-width: 860px; margin-left: auto; margin-right: auto; font-size: 13px; font-weight: 500; color: var(--slate); }
html.v2 .mini .calls { width: 100%; max-width: 860px; margin: 0 auto; background: var(--white); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
html.v2 .letters-card { max-width: 640px; margin: 0 auto; background: var(--white); border: 1px solid var(--hair); border-radius: 16px; padding: 24px; }
html.v2 .letters-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-weight: 500; font-size: 15px; }
html.v2 .letters-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
html.v2 .step { position: relative; padding-top: 18px; font-size: 14px; }
html.v2 .step::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 3px; border-radius: 3px; background: var(--hair-2); }
html.v2 .step-sent::before { background: var(--navy); }
html.v2 .step-ready::before { background: var(--gold); }
html.v2 .step-name { display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; }
html.v2 .step-note { color: var(--slate); font-size: 13px; }
html.v2 .letters-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
html.v2 .letters-hint { color: var(--slate); font-size: 13px; max-width: 360px; }
html.v2 .fake-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 10px; background: var(--navy); color: var(--on-dark); font-size: 13px; font-weight: 500; }

/* ── Closing call to action ────────────────────────────────────────────────── */
html.v2 .cta { padding: var(--section-pad) 0; }
html.v2 .cta-inner { text-align: center; max-width: 860px; margin: 0 auto; }
html.v2 .cta h2 { font-size: clamp(40px, 5.6vw, 72px); }
html.v2 .cta .actions { justify-content: center; margin-top: 40px; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
html.v2 .site-footer { background: var(--navy-deep); border-top: 1px solid var(--hair-dark); font-size: 15px; }
html.v2 .footer-brand > a { display: inline-flex; align-items: center; min-height: 44px; }
html.v2 .footer-brand p { color: var(--on-dark-2); }
html.v2 .footer-bottom::before { border-top-color: var(--hair-dark); }
html.v2 .footer-nav a, html.v2 .footer-legal a { min-height: 44px; }
html.v2 .footer-legal p a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── Headlines: words rise from behind a mask (site.js §2b; .js-reveal only) ── */
html.v2.js-reveal [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
html.v2.js-reveal [data-split] .wi { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease-out); }
html.v2.js-reveal [data-split].is-in .wi { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.v2 .glow { animation: none; }
  html.v2 .tabs-live .pane { animation: none; }
}

/* ── v2 inner pages (Features, Why Koletta, Security, Pricing, About, Demo,
   the legal pages and 404): the compact dark page hero, the split blocks,
   and the existing demos and lists restyled to the same system. ─────────── */
html.v2 .hero-page { padding: calc(var(--header-h) + clamp(56px, 7vw, 96px)) 0 clamp(64px, 8vw, 112px); }
html.v2 .hero-page .lead { max-width: 680px; }
html.v2 .hero-page .actions { margin-top: 32px; }
html.v2 .hero-page h1 { font-size: clamp(40px, 5.4vw, 68px); }

/* Split: a feature list beside its demo */
html.v2 .split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) {
  html.v2 .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
  html.v2 .split-rev > :first-child { order: 2; }
}
html.v2 .split .section-head { margin-bottom: 0; }
html.v2 .split-copy { display: grid; gap: 28px; }

/* Feature stacks: one card, hairline rows */
html.v2 .feature-stack { list-style: none; background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-card); }
html.v2 .feature-stack .feature { padding: 22px 24px; }
html.v2 .feature-stack .feature + .feature { border-top: 1px solid var(--hair); }
html.v2 .feature { display: flex; gap: 16px; align-items: flex-start; }
html.v2 .feature .icon { margin: 0; width: 40px; height: 40px; border-radius: 10px; }
html.v2 .feature .icon svg { width: 20px; height: 20px; }
html.v2 .feature h3 { margin: 1px 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
html.v2 .feature p { margin: 0; color: var(--slate); font-size: 16px; line-height: 1.5; }
html.v2 .feature p a { color: var(--navy); }
html.v2 .card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
html.v2 .card p { font-size: 16px; font-weight: 400; color: var(--slate); }
html.v2 .card.topic { display: flex; gap: 16px; align-items: flex-start; height: auto; }
html.v2 .card.topic .icon { margin: 0; }
html.v2 .card.topic p + p { margin-top: 10px; }
html.v2 .grid { display: grid; gap: 16px; }html.v2 .cards-2, html.v2 .grid-2 { display: grid; gap: 16px; }
@media (min-width: 768px) { html.v2 .cards-2, html.v2 .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.v2 .grid-4 { gap: 16px; }
html.v2 .included { display: flex; flex-direction: column; gap: 0; }
html.v2 .included h3 { margin: 0; font-size: 17px; }
html.v2 .included .icon { margin-bottom: 20px; }
html.v2 .after-steps { margin-top: 16px; }

/* The product demos (Features, Why Koletta, Security) on the v2 shell */
html.v2 .demo { border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: none; font-size: 15px; }
html.v2 .demo-bar { padding: 12px 18px; background: var(--cream-2); border-bottom-color: var(--hair); font-size: 13px; font-weight: 500; }
html.v2 .demo-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; background: transparent; border: 1px solid var(--hair-2); padding: 3px 10px; }
html.v2 .demo-body { padding: 20px; }
html.v2 .demo-note { font-size: 13px; color: var(--slate); }
html.v2 .demo-btn { min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border-color: var(--hair-2); font: 500 14px/1.2 var(--font-sans); }
html.v2 .demo-btn:hover { background: rgba(15, 34, 64, .06); border-color: var(--hair-2); }
html.v2 .demo-btn[aria-pressed="true"], html.v2 .demo-btn.is-on, html.v2 .demo-btn-primary { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
html.v2 .rundown-panel { border-radius: 14px; }
html.v2 .wl-foot { background: var(--cream-2); }
html.v2 .wl-table { font-size: 14px; }
html.v2 .wl-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
html.v2 .wl-rank, html.v2 .wl-pts { font-family: var(--font-mono); }
html.v2 .shot-frame { padding: 0; border-radius: 16px; box-shadow: none; overflow: hidden; }
html.v2 .shot-frame img { display: block; width: 100%; height: auto; }
html.v2 .isolation-wrap { margin-top: 32px; }
html.v2 .compare-toggle { margin-bottom: 16px; }

/* Why Koletta: the comparison table */
html.v2 .compare { border-radius: var(--r-card); border-color: var(--hair); font-size: 16px; }
html.v2 .compare th, html.v2 .compare td { padding: 18px 24px; border-bottom-color: var(--hair); }
html.v2 .compare thead th { background: var(--cream-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--slate); }
html.v2 .compare thead th.col-koletta { color: var(--navy); }
html.v2 .compare tbody th { font-weight: 600; letter-spacing: -.01em; }
html.v2 .compare tbody td:first-of-type { color: var(--slate); }
html.v2 .compare tbody td.with { font-weight: 500; background: rgba(195, 158, 100, .08); }
@media (max-width: 767.98px) {
  html.v2 .compare tbody tr { padding: 18px 20px; border-bottom-color: var(--hair); }
  html.v2 .compare tbody th, html.v2 .compare tbody td { padding: 0; border: 0; }
  html.v2 .compare tbody td { padding-top: 8px; }
  html.v2 .compare tbody td::before { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
  html.v2 .compare tbody td.with { background: transparent; }
}

/* Checklists, steps, Q&A, FAQ */
html.v2 .checklist { margin-top: 16px; gap: 12px; font-size: 16px; }
html.v2 .checklist svg { color: var(--gold-ink); }
html.v2 .steps { gap: 18px; }
html.v2 .steps li { padding-left: 56px; }
html.v2 .steps li::before { width: 36px; height: 36px; font-family: var(--font-mono); font-size: 14px; font-weight: 500; }
html.v2 .steps h4 { margin: 6px 0 2px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
html.v2 .steps p { color: var(--slate); font-size: 16px; }
html.v2 .card h3 + .steps { margin-top: 20px; }
html.v2 .qa, html.v2 .faq { border-radius: var(--r-card); border-color: var(--hair); font-size: 16px; }
html.v2 .qa th, html.v2 .qa td { padding: 18px 24px; border-bottom-color: var(--hair); }
html.v2 .qa tbody th { font-weight: 600; letter-spacing: -.01em; }
html.v2 .qa td { color: var(--slate); }
@media (max-width: 767.98px) { html.v2 .qa tr { padding: 18px 20px; border-bottom-color: var(--hair); } html.v2 .qa th, html.v2 .qa td { padding: 0; border: 0; } html.v2 .qa td { padding-top: 6px; } }
html.v2 .faq div { padding: 18px 24px; border-bottom-color: var(--hair); }
html.v2 .faq dt { font-weight: 600; letter-spacing: -.01em; }
html.v2 .faq dd { color: var(--slate); margin-top: 4px; }
html.v2 .note-line { margin-top: 32px; font-size: 17px; color: var(--slate); }
html.v2 .pricing-actions { margin-top: 32px; }

/* Coming soon */
html.v2 .soon { border: 1px solid var(--hair); border-radius: var(--r-card); background: var(--white); padding: 28px; }
html.v2 .soon-list { margin-top: 0; gap: 8px; }
html.v2 .pill { border-radius: var(--r-pill); padding: 6px 14px; font-size: 14px; font-weight: 500; background: rgba(15, 34, 64, .06); color: var(--ink); line-height: 1.4; }
html.v2 .pill-soon { background: var(--status-amber-bg); color: var(--status-amber); font-size: 12px; letter-spacing: .04em; }

/* About */
html.v2 .founder { grid-template-columns: 1fr; gap: 24px; padding: 28px; height: auto; }
@media (min-width: 768px) { html.v2 .founder { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; } }
html.v2 .founder-photo { max-width: 180px; border-radius: 16px; border-color: var(--hair); }
html.v2 .founder h3 { font-size: 20px; }
html.v2 .founder .role { color: var(--slate); }
html.v2 .founder ul { gap: 8px 24px; margin-top: 16px; }
html.v2 .founder ul a { color: var(--navy); font-weight: 500; }
html.v2 .beliefs { gap: 16px; }
html.v2 .beliefs li { border-radius: var(--r-card); border-color: var(--hair); border-top: 1px solid var(--hair); padding: 28px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
html.v2 .beliefs li::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 3px; background: var(--gold); margin-bottom: 18px; }
html.v2 .company-line { color: var(--slate); margin-top: 32px; font-size: 16px; }
html.v2 .story { max-width: 640px; font-size: 18px; color: var(--slate); }
html.v2 .story p + p { margin-top: 12px; }

/* Demo page */
html.v2 .demo-grid { gap: 24px; }
@media (min-width: 1024px) { html.v2 .demo-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; } }
html.v2 .demo-steps { gap: 14px; }
html.v2 .demo-steps li { font-size: 17px; }
html.v2 .demo-steps svg { color: var(--gold-ink); }
html.v2 .side-box { border-radius: var(--r-card); border-color: var(--hair); padding: 28px; }
html.v2 .side-box h2 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 6px; }
html.v2 .side-box p { color: var(--slate); font-size: 17px; }
html.v2 .side-box a { color: var(--navy); font-weight: 500; }

/* Legal pages: the text is unchanged; only the frame */
html.v2 .legal { max-width: 760px; }
html.v2 .legal h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 40px 0 12px; }
html.v2 .legal p, html.v2 .legal li { color: var(--slate); font-size: 17px; line-height: 1.65; }
html.v2 .legal b, html.v2 .legal strong { color: var(--ink); font-weight: 600; }
html.v2 .legal a { color: var(--navy); }
html.v2 .legal .meta { font-size: 15px; }
html.v2 .hero-page .meta { margin: 20px auto 0; max-width: 680px; color: var(--on-dark-3); font-size: 15px; }