/* 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 — licenses in /assets/fonts/) ─────────── */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-latin-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-latin-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Newsreader 600 with its optical-size axis (24..72), as the app renders it. */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-semibold-opsz.woff2") format("woff2");
  font-weight: 600;
  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 */
  --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: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;

  /* 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-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy-soft); color: var(--navy); }
.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-band { background: var(--card); border-top: 1px solid var(--line-row); border-bottom: 1px solid var(--line-row); }
.section-band + .section, .section + .section-band { padding-top: var(--section); }
.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; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-3); color: var(--gold-ink);
  font-size: .9375rem; font-weight: 600; letter-spacing: .01em;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--line-strong); border-radius: 2px; }
.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); }
.prose { max-width: 720px; }
.narrow { max-width: 820px; }
.more-row { margin: var(--s-6) 0 0; }

/* Page hero (every page's H1) */
.page-hero { padding: calc(var(--section) * .85) 0 0; }
.page-hero .lead { max-width: 680px; margin: var(--s-6) 0 0; }
.page-hero .actions { margin-top: calc(var(--s-6) * 1.5); }

/* Home hero: text beside the product screenshot */
.hero-grid { display: grid; gap: calc(var(--s-6) * 2); align-items: center; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--s-6) * 2.5); }
  .hero-grid-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }   /* 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; }
.screen-frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-2); overflow: hidden; }
.screen-bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); background: var(--card); border-bottom: 1px solid var(--line-row); }
.screen-dots { display: flex; gap: 6px; flex: none; }
.screen-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.screen-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; color: var(--ink-3); font-size: .8125rem; }
.screen picture, .screen img { display: block; width: 100%; height: auto; }
.screen figcaption { margin: var(--s-4) 0 0; color: var(--ink-2); font-size: 1.0625rem; }
@media (max-width: 479px) {
  .screen-bar { padding: 6px var(--s-3); }
  .screen-dots span { width: 8px; height: 8px; }
  .screen-url { display: none; }
  .screen-bar .demo-tag { margin-left: auto; }
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--card-gap); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }   /* no lone card on the tablet row */
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-3 > :last-child:nth-child(odd) { grid-column: auto; }
  .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); }
.card-problem { background: var(--card); }
.card-problem p { color: var(--ink); font-size: 1.125rem; line-height: 1.5; }
.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; }
.icon-muted { background: var(--navy-soft); color: var(--ink-2); }

/* Screenshot placeholders — replaced by real demo-tenant screenshots. */
.shot {
  display: grid; place-items: center; align-content: center; gap: var(--s-2);
  aspect-ratio: 16 / 10; width: 100%;
  padding: var(--s-6); text-align: center;
  background: var(--field);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-card);
  color: var(--ink-2);
}
.shot-label { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.shot-name { font-size: 1.125rem; font-weight: 600; color: var(--ink); margin: 0; }
.shot-frame { border-radius: calc(var(--r-card) + 6px); padding: 6px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }

/* Home: numbered problem → fix pairs */
.fix-card { display: flex; flex-direction: column; }
.fix-card .fix-label { font-size: .875rem; font-weight: 600; color: var(--ink-3); margin: 0 0 var(--s-1); }

.switch-card { display: grid; gap: var(--s-4); padding: calc(var(--card-pad) * 1.5); }
.switch-card .lead { margin: var(--s-3) 0 0; max-width: 640px; }
@media (min-width: 1024px) {
  .switch-card { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: calc(var(--s-6) * 2); }
}

/* Security teaser row (Home) */
.teaser { display: grid; gap: var(--card-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; }
@media (min-width: 1024px) { .teaser { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.teaser li {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--card-pad); font-weight: 600; line-height: 1.35;
}

/* Split block: text beside a screenshot */
.split { display: grid; gap: calc(var(--s-6) * 1.5); align-items: center; }
.split-top { align-items: start; }
@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; }
}

/* ── Features page ─────────────────────────────────────────────────────────── */
.feature-group + .feature-group { margin-top: var(--section); }
.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); }
.today { margin-top: var(--card-gap); }
.today h3 { margin-bottom: var(--s-2); }

/* ── 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); }
.plan .grid { margin-bottom: calc(var(--s-6) * 1.5); }
.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); }
.booking { margin-top: var(--s-6); }

/* ── Closing call to action (every page) ───────────────────────────────────── */
.cta { padding: 0 0 var(--section); }
.cta-card {
  background: var(--navy); color: var(--on-navy);
  border-radius: var(--r-card);
  padding: calc(var(--s-6) * 2) var(--s-6);
  text-align: center;
}
@media (min-width: 768px) { .cta-card { padding: calc(var(--s-6) * 3) calc(var(--s-6) * 2); } }
.cta-card h2 { color: var(--on-navy); }
.cta-card h2 + .btn { margin-top: calc(var(--s-6) * 1.25); }
.cta-card .cta-line { color: var(--on-navy); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); font-weight: 600; line-height: 1.35; margin-top: 0; }
.cta-card p { color: var(--on-navy-2); max-width: 560px; margin: var(--s-3) auto calc(var(--s-6) * 1.25); font-size: 1.125rem; }
.cta-card :focus-visible { outline-color: var(--on-navy); }

/* ── 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. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.js-reveal [data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: .09s; }
.js-reveal [data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: .18s; }
.js-reveal [data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: .27s; }
.js-reveal [data-reveal-group] > [data-reveal]:nth-child(5) { transition-delay: .36s; }
.js-reveal [data-reveal-group] > [data-reveal]:nth-child(6) { transition-delay: .45s; }

/* ── 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-primary { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.demo-btn-primary:hover { background: var(--navy-hover); border-color: var(--navy-hover); }
.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-violet { color: var(--status-violet); background: var(--status-violet-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; }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.notfound { padding-bottom: var(--section); }


/* ── 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; }