/* GENERERET af tools/sync-ds.mjs — rediger IKKE denne fil.
 * Kilder, i bindende raekkefoelge: tokens.css, bundle.css, panels.css, hubspot-fixes.css.
 * tokens.css og bundle.css ejes af designsystemet; hubspot-fixes.css er vores.
 * Bygget som én fil fordi @import serialiserer downloads og udskyder
 * opdagelsen af alt der staar i boernene.
 * @font-face er IKKE med her — den ligger i templates/partials/_fonts.hubl.html,
 * fordi en relativ url() herfra peger paa det forkerte byggenummer. */

/* ===== tokens.css ===== */
:root,[data-theme="light"]{--bg:#fafaf9;--bg-raised:#ffffff;--bg-stone-soft:#ecece7;--bg-stone:#e1dfda;--bg-stone-strong:#d0cdc8;--bg-mist:#e6e6e6;--ink:#0d1016;--ink-body:#343434;--ink-muted:#5f5c55;--ink-subtle:#8f8d8a;--line:#e0e0dc;--line-strong:#c3c3c3;--line-control:#949089;--accent:#535b10;--accent-hover:#434a06;--accent-deep:#3a4004;--accent-ink:#535b10;--accent-tint:#eff2e2;--inverse:#e6e6e6;--ink-fixed:#0d1016;--on-accent:#ffffff;--signal:#cce984;--glass:rgba(0, 0, 0, 0.4);--glass-strong:rgba(0, 0, 0, 0.55);--glass-deep:rgba(13, 16, 22, 0.78);--glass-soft:rgba(255, 255, 255, 0.25);--on-glass:#ffffff;--on-glass-muted:rgba(255, 255, 255, 0.6);--scrim:rgba(13, 16, 22, 0.55);--focus:#535b10;--panel-sand:#e3d9bd;--panel-slate:#9eabad;--panel-clay:#d9894f;--panel-sky:#c3d6ee;--success:#1d6b45;--success-soft:#e3f1e8;--warning:#8a5300;--warning-soft:#f7ecd8;--danger:#b3261e;--danger-soft:#f9e3e0;--info:#2a5a9e;--info-soft:#e2ebf7;--shadow-render:0 24px 48px rgba(13, 16, 22, 0.14)}
[data-theme="dark"]{--bg:#0d1016;--bg-raised:#15181e;--bg-stone-soft:#121419;--bg-stone:#1a1d23;--bg-stone-strong:#23262d;--bg-mist:#1e2127;--ink:#ffffff;--ink-body:#e6e6e6;--ink-muted:#a1a3a7;--ink-subtle:#6c6f75;--line:#262a31;--line-strong:#3a3e46;--line-control:#6c6f75;--accent:#667023;--accent-hover:#565e1a;--accent-deep:#2c3103;--accent-ink:#ced898;--accent-tint:#1a1c0c;--inverse:#e6e6e6;--ink-fixed:#0d1016;--on-accent:#ffffff;--signal:#cce984;--glass:rgba(0, 0, 0, 0.4);--glass-strong:rgba(0, 0, 0, 0.55);--glass-deep:rgba(13, 16, 22, 0.86);--glass-soft:rgba(255, 255, 255, 0.25);--on-glass:#ffffff;--on-glass-muted:rgba(255, 255, 255, 0.6);--scrim:rgba(13, 16, 22, 0.55);--focus:#ced898;--panel-sand:#e3d9bd;--panel-slate:#9eabad;--panel-clay:#d9894f;--panel-sky:#c3d6ee;--success:#7fd3a6;--success-soft:#10261b;--warning:#f0b660;--warning-soft:#2b200d;--danger:#ff9c8f;--danger-soft:#2e1412;--info:#9cc1f5;--info-soft:#121d2e}
:root{--space-1:5px;--space-2:10px;--space-3:15px;--space-4:20px;--space-5:24px;--space-6:30px;--space-7:32px;--space-8:48px;--space-9:60px;--space-10:80px;--space-11:120px;--space-12:200px;--radius-hair:2px;--radius-xs:4px;--radius-button:6px;--radius-panel:15px;--radius-card:24px;--radius-pill:48px;--radius-full:999px;--container-max:1680px;--gutter:24px;--gutter-mobile:16px;--nav-height:72px;--measure-heading:680px;--measure-text:460px;--panel-width:1080px;--blur-soft:blur(10px);--blur-glass:blur(20px);--blur-strong:blur(27.5px);--ease-glide:cubic-bezier(0.625, 0.05, 0, 1);--ease-fade:ease-out;--dur-fast:200ms;--dur-base:300ms;--dur-glide:500ms;--dur-slow:800ms;--zoom-hover:scale(1.025);--enter-from:translateY(5px) scale(0.9);--font-sans:"Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;--font-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace}
.display{font-family:var(--font-sans);font-size:60px;line-height:1.05;font-weight:400;letter-spacing:-0.04em}
.headline{font-family:var(--font-sans);font-size:44px;line-height:1.05;font-weight:400;letter-spacing:-0.03em}
.title{font-family:var(--font-sans);font-size:36px;line-height:1.2;font-weight:400;letter-spacing:-0.02em}
.lead{font-family:var(--font-sans);font-size:24px;line-height:1.2;font-weight:400;letter-spacing:-0.01em}
.body{font-family:var(--font-sans);font-size:16px;line-height:1.4;font-weight:400}
.small{font-family:var(--font-sans);font-size:14px;line-height:1.4;font-weight:400}
.caption{font-family:var(--font-sans);font-size:12px;line-height:1.4;font-weight:400}
.micro{font-family:var(--font-sans);font-size:10px;line-height:1.4;font-weight:400}
.eyebrow{font-family:var(--font-mono);font-size:12px;line-height:1.4;font-weight:400;letter-spacing:0}
.stat{font-family:var(--font-sans);font-size:96px;line-height:1.0;font-weight:300;letter-spacing:-0.03em}
.stat-sm{font-family:var(--font-sans);font-size:60px;line-height:1.0;font-weight:300;letter-spacing:-0.03em}
.group-title{font-family:var(--font-sans);font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-0.01em}
.code{font-family:var(--font-mono);font-size:13px;line-height:1.5;font-weight:400}
.label-mono{font-family:var(--font-mono);font-size:11px;line-height:1.4;font-weight:400;letter-spacing:0.02em}

/* ===== bundle.css ===== */
/* Consile.ai design system: component styles. Load after tokens.css. Classes are prefixed cs-. */

/* ---------- Fluid type scale (1920 max, 810 floor, mobile steps below 810) ---------- */
:root {
  --fs-display: clamp(51.4px, calc(45px + 0.781vw), 60px);
  --fs-headline: clamp(37.7px, calc(33px + 0.573vw), 44px);
  --fs-title: clamp(30.9px, calc(27px + 0.469vw), 36px);
  --fs-lead: clamp(20.6px, calc(18px + 0.3125vw), 24px);
  --fs-body: clamp(13.7px, calc(12px + 0.208vw), 16px);
  --fs-small: clamp(12.1px, calc(10.56px + 0.183vw), 14.08px);
  --fs-caption: 12px;
  --fs-micro: 10px;
  --fs-stat: clamp(82px, calc(72px + 1.25vw), 96px);
  --fs-stat-sm: clamp(48px, calc(36px + 1.25vw), 60px);
  --fs-group: 20px;
  --pad-x: var(--gutter, 24px);
  --cs-ease: var(--ease-glide, cubic-bezier(0.625, 0.05, 0, 1));
}
@media (max-width: 809px) {
  :root {
    --fs-display: 41px; --fs-headline: 27.4px; --fs-title: 24px; --fs-lead: 20.6px;
    --fs-body: 14px; --fs-small: 14px; --fs-caption: 13px;
    --fs-stat: 64px; --fs-stat-sm: 44px; --fs-group: 18px;
    --pad-x: var(--gutter-mobile, 16px);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.4;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Type classes ---------- */
.cs-t-display { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.04em; font-weight: 400; }
.cs-t-headline { font-size: var(--fs-headline); line-height: 1.05; letter-spacing: -0.03em; font-weight: 400; }
.cs-t-title { font-size: var(--fs-title); line-height: 1.2; letter-spacing: -0.02em; font-weight: 400; }
.cs-t-lead { font-size: var(--fs-lead); line-height: 1.2; letter-spacing: -0.01em; font-weight: 400; }
.cs-t-body { font-size: var(--fs-body); line-height: 1.4; font-weight: 400; }
.cs-t-small { font-size: var(--fs-small); line-height: 1.4; font-weight: 400; }
.cs-t-caption { font-size: var(--fs-caption); line-height: 1.4; }
.cs-t-stat { font-size: var(--fs-stat); line-height: 1; letter-spacing: -0.03em; font-weight: 300; }
.cs-t-stat-sm { font-size: var(--fs-stat-sm); line-height: 1; letter-spacing: -0.03em; font-weight: 300; }
.cs-t-group { font-family: var(--font-sans); font-size: var(--fs-group); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.cs-t-code { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; }
.cs-muted { color: var(--ink-muted); }
.cs-container { max-width: var(--container-max, 1680px); margin: 0 auto; padding: 0 var(--pad-x); }
.cs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cs-tone--stone { background: var(--bg-stone); }
.cs-tone--stone-soft { background: var(--bg-stone-soft); }
.cs-tone--bg { background: var(--bg); }
.cs-tone--accent-tint { background: var(--accent-tint); }
.cs-panel--mist { background: var(--bg-mist); }
.cs-panel--sand { background: var(--panel-sand); }
.cs-panel--slate { background: var(--panel-slate); }
.cs-panel--clay { background: var(--panel-clay); }
.cs-panel--sky { background: var(--panel-sky); }
/* the grey studio backdrop the product renders are shot on (renders.html .studio-soft): a frame wider than the render continues it seamlessly */
.cs-panel--stone { background: var(--bg-stone-soft); }
.cs-panel--olive { background: var(--accent); }
.cs-panel--studio { background: linear-gradient(180deg, #e3e3e1 0%, #ececea 45%, #f5f5f3 100%); }
.cs-ratio--4x5 { aspect-ratio: 4 / 5; }
.cs-ratio--1x1 { aspect-ratio: 1 / 1; }
.cs-ratio--4x3 { aspect-ratio: 4 / 3; }
@keyframes cs-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Button: a slightly rounded rectangle, the label, then an arrow that nudges forward on hover ---------- */
.cs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 30px; padding: 0 12px 0 14px; border: 0; border-radius: var(--radius-button, 6px);
  font: inherit; font-size: var(--fs-small); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.cs-btn--md { height: 40px; padding: 0 15px 0 18px; }
.cs-btn--noicon { padding: 0 14px; }
.cs-btn--md.cs-btn--noicon { padding: 0 18px; }
.cs-btn--full { width: 100%; justify-content: space-between; }
.cs-btn__icon { flex: none; width: 14px; height: 14px; display: grid; place-items: center; transition: transform var(--dur-glide) var(--cs-ease); }
.cs-btn:hover .cs-btn__icon { transform: translateX(3px); }
.cs-btn--primary { background: var(--accent); color: var(--on-accent); }
.cs-btn--primary:hover { background: var(--accent-hover); }
.cs-btn--secondary { background: var(--bg-mist); color: var(--ink); }
.cs-btn--secondary:hover, .cs-btn--inverse:hover { box-shadow: inset 0 0 0 999px rgba(13, 16, 22, 0.07); }
.cs-btn--inverse { background: var(--inverse); color: var(--ink-fixed); }
.cs-btn--glass { background: var(--glass); color: var(--on-glass); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); }
.cs-btn--glass:hover { background: var(--glass-strong); }
.cs-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- IconButton ---------- */
.cs-iconbtn { width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-full); display: grid; place-items: center; cursor: pointer; transition: box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.cs-iconbtn--mist { background: var(--bg-mist); color: var(--ink); }
.cs-iconbtn--mist:hover { box-shadow: inset 0 0 0 99px rgba(13, 16, 22, 0.09); }
.cs-iconbtn--glass { background: var(--glass); color: var(--on-glass); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); }
.cs-iconbtn--glass:hover { background: var(--glass-strong); }

/* ---------- TextLink ---------- */
.cs-textlink { display: inline-flex; align-items: baseline; gap: .38em; text-decoration: none; transition: color var(--dur-fast) ease; }
.cs-textlink--sm { font-size: var(--fs-small); line-height: 1.4; }
.cs-textlink--lg { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.cs-textlink__arrow { flex: none; align-self: center; transition: transform var(--dur-glide) var(--cs-ease), color var(--dur-fast) ease; }
.cs-textlink:hover .cs-textlink__arrow, .cs-fcard:hover .cs-textlink__arrow { transform: translateX(3px); }
.cs-textlink--lg .cs-textlink__arrow { width: .7em; height: .7em; }
.cs-textlink--muted { color: var(--ink-muted); }
.cs-textlink--muted .cs-textlink__arrow { color: var(--ink-subtle); }
.cs-textlink--muted:hover, .cs-textlink--muted:hover .cs-textlink__arrow { color: var(--ink); }
.cs-textlink--ink { color: var(--ink); }
.cs-textlink--ink:hover { color: var(--ink-muted); }
.cs-textlink--on-dark { color: var(--on-glass-muted); }
.cs-textlink--on-dark:hover { color: var(--on-glass); }

/* ---------- Eyebrow: a small olive label with a square marker ---------- */
.cs-eyebrow, .cs-eyebrow-text { margin: 0; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--accent-ink); }
.cs-eyebrow::before, .cs-eyebrow-text::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.cs-eyebrow__label { color: inherit; text-decoration: none; }
a.cs-eyebrow__label:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- FilterChips ---------- */
.cs-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cs-chip { height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-small); cursor: pointer; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.cs-chip:hover { background: var(--bg-mist); }
.cs-chip.is-active { background: var(--ink); color: var(--bg); }

/* ---------- Wordmark ---------- */
.cs-wordmark { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; }
.cs-wordmark--nav { font-size: 25px; }
.cs-wordmark--giant { font-size: clamp(72px, 9.2vw, 176px); letter-spacing: -0.06em; }

/* ---------- SiteHeader ---------- */
.cs-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-height, 72px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--pad-x);
  background: var(--bg); color: var(--ink); font-size: var(--fs-small); line-height: 1;
  transition: background-color var(--dur-base) var(--ease-fade), color var(--dur-base) var(--ease-fade);
}
.cs-header--sticky { position: sticky; }
.cs-header--static { position: relative; }
.cs-header--overlay { background: transparent; color: var(--on-glass); }
.cs-header__left { display: flex; align-items: center; min-width: 0; }
.cs-header__items { display: flex; list-style: none; margin: 0 0 0 -15px; padding: 0; }
.cs-header__item { position: relative; }
.cs-header__link {
  display: inline-flex; align-items: center; height: 30px; padding: 0 15px; margin: 0; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: inherit; font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.cs-header__item:hover > .cs-header__link, .cs-header__item.is-open > .cs-header__link { background: var(--glass); color: var(--on-glass); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); }
.cs-header--solid .cs-header__item:hover > .cs-header__link, .cs-header--solid .cs-header__item.is-open > .cs-header__link { background: var(--glass-deep); }
.cs-header__brand { color: inherit; text-decoration: none; display: flex; align-items: center; }
.cs-header__right { display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
.cs-header__secondary:hover { background: var(--glass); color: var(--on-glass); }
.cs-header--solid .cs-header__secondary:hover { background: var(--bg-mist); color: var(--ink); }
/* language: a globe and the code (DA) before "Log ind"; a small light list opens 8px under it, like the mega-menu */
.cs-lang { position: relative; display: inline-flex; }
.cs-lang__btn { gap: 6px; padding: 0 12px; }
.cs-lang__btn svg { flex: none; }
.cs-lang__btn:hover, .cs-lang.is-open .cs-lang__btn { background: var(--glass); color: var(--on-glass); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); }
.cs-header--solid .cs-lang__btn:hover, .cs-header--solid .cs-lang.is-open .cs-lang__btn { background: var(--bg-mist); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cs-lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1; min-width: 180px; padding: 6px;
  border-radius: var(--radius-panel); background: #fff; color: var(--ink-fixed);
  box-shadow: 0 0 0 1px rgba(13, 16, 22, 0.08), 0 28px 56px -24px rgba(13, 16, 22, 0.32);
  font-size: var(--fs-body); line-height: 1.3; animation: cs-menu-in var(--dur-base) var(--ease-fade);
}
.cs-lang__menu[hidden] { display: none; }
.cs-lang__menu ul { list-style: none; margin: 0; padding: 0; }
.cs-lang__menu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding: 0 12px; border-radius: 8px; color: inherit; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.cs-lang__menu a:hover { background: #f4f4f1; color: #535b10; }
.cs-lang__menu a[aria-current] { color: #535b10; }
.cs-lang__menu a svg { flex: none; }
.cs-megamenu {
  position: absolute; top: calc(100% + 8px); left: 0; display: flex; gap: 24px; padding: 10px 18px 12px;
  min-width: 300px; border-radius: var(--radius-panel); background: #fff; color: var(--ink-fixed);
  box-shadow: 0 0 0 1px rgba(13, 16, 22, 0.08), 0 28px 56px -24px rgba(13, 16, 22, 0.32);
  font-size: var(--fs-body); line-height: 1.3; animation: cs-menu-in var(--dur-base) var(--ease-fade);
}
.cs-megamenu[hidden] { display: none; }
@keyframes cs-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cs-megamenu__body { display: flex; flex-direction: column; }
.cs-megamenu__section + .cs-megamenu__section { border-top: 1px solid #ecece8; margin: 6px -18px 0; padding: 8px 18px 0; }
.cs-megamenu__title { margin: 8px 0 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: #535b10; }
.cs-megamenu__cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, max-content); column-gap: 20px; }
.cs-megamenu__col { list-style: none; margin: 0; padding: 0; }
.cs-megamenu__col a { display: block; padding: 7px 0; color: inherit; text-decoration: none; white-space: nowrap; transition: color var(--dur-fast) ease; }
.cs-megamenu__col a:hover { color: #535b10; }
.cs-megamenu :focus-visible { outline-color: #535b10; }
.cs-megamenu__col a.has-logo, .cs-header__sheet a.has-logo { display: flex; align-items: center; gap: 10px; }
.cs-megamenu__col a.has-logo { padding: 5px 0; }
.cs-megamenu__featured { display: grid; align-content: start; gap: 10px; width: 140px; margin: 9px 0 9px 60px; color: inherit; text-decoration: none; font-size: var(--fs-caption); font-weight: 500; line-height: 1.35; }
.cs-megamenu__featured img { width: 140px; height: 108px; object-fit: cover; border-radius: 6px; }
.cs-megamenu__featured span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-hero :focus-visible, .cs-header--overlay :focus-visible, .cs-banner :focus-visible { outline-color: #fff; }
/* light panels and the open sheet keep a visible ring, also while the header is transparent */
.cs-header--sheet :focus-visible { outline-color: var(--focus); }
.cs-header .cs-megamenu :focus-visible, .cs-header .cs-lang__menu :focus-visible { outline-color: #535b10; }
/* compact and mini: "Menu" with two lines that cross into an X. Hidden parts keep their natural width at zero size, so SiteHeader can measure them. */
.cs-header__menu { display: none; align-items: center; gap: 10px; height: 44px; margin: 0 0 0 -2px; padding: 0 2px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cs-header__burger { position: relative; flex: none; width: 16px; height: 10px; }
.cs-header__burger i { position: absolute; left: 0; right: 0; height: 1.25px; border-radius: 1px; background: currentColor; transition: transform var(--dur-base) var(--cs-ease), top var(--dur-base) var(--cs-ease); }
.cs-header__burger i:first-child { top: 1px; }
.cs-header__burger i:last-child { top: 8px; }
.cs-header--sheet .cs-header__burger i:first-child { top: 4.4px; transform: rotate(45deg); }
.cs-header--sheet .cs-header__burger i:last-child { top: 4.4px; transform: rotate(-45deg); }
.cs-header__ctawrap { display: inline-flex; }
.cs-header[data-fit="compact"] .cs-header__menu, .cs-header[data-fit="mini"] .cs-header__menu { display: inline-flex; }
.cs-header[data-fit="compact"] .cs-header__items, .cs-header[data-fit="mini"] .cs-header__items,
.cs-header[data-fit="compact"] .cs-lang, .cs-header[data-fit="mini"] .cs-lang,
.cs-header[data-fit="mini"] .cs-header__ctawrap { position: absolute; max-width: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
/* before the first measurement (no JS yet): the breakpoints decide */
@media (max-width: 1023px) { .cs-header:not([data-fit]) .cs-header__items, .cs-header:not([data-fit]) .cs-lang { display: none; } .cs-header:not([data-fit]) .cs-header__menu { display: inline-flex; } }
@media (max-width: 809px) { .cs-header:not([data-fit]) .cs-header__ctawrap { display: none; } }

/* the sheet: big rows under hairlines; a row with links opens like the Accordion (the plus turns into a cross), login and CTA at the bottom */
.cs-header__sheet {
  position: fixed; inset: var(--nav-height, 72px) 0 0 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px var(--pad-x) calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--bg); color: var(--ink); font-size: var(--fs-body); line-height: 1.3;
  animation: cs-sheet-in var(--dur-base) var(--ease-fade);
}
.cs-header--static .cs-header__sheet { position: absolute; top: 100%; bottom: auto; min-height: 560px; }
@keyframes cs-sheet-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cs-header__sheet ul { list-style: none; margin: 0; padding: 0; }
.cs-header__sheet-list { border-top: 1px solid var(--line); }
.cs-header__sheet-item { border-bottom: 1px solid var(--line); animation: cs-sheet-row 520ms var(--cs-ease) both; animation-delay: calc(80ms + var(--i, 0) * 45ms); }
@keyframes cs-sheet-row { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cs-header__sheet-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 64px; margin: 0; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; font-size: 24px; letter-spacing: -0.015em; line-height: 1.1; text-align: left; text-decoration: none; cursor: pointer;
}
.cs-header__sheet-icon { flex: none; color: var(--ink-muted); transition: transform var(--dur-glide) var(--cs-ease), color var(--dur-fast) ease; }
.cs-header__sheet-row:hover .cs-header__sheet-icon { color: var(--ink); }
.cs-header__sheet-item.is-open .cs-header__sheet-icon { transform: rotate(45deg); color: var(--ink); }
a.cs-header__sheet-row:hover .cs-header__sheet-icon { transform: translateX(3px); }
.cs-header__sheet-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-glide) var(--cs-ease), visibility 0s linear var(--dur-glide); }
.cs-header__sheet-item.is-open .cs-header__sheet-panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.cs-header__sheet-inner { min-height: 0; overflow: hidden; }
.cs-header__sheet-sec { padding-bottom: 18px; }
.cs-header__sheet-sec:first-child { padding-top: 2px; }
.cs-header__sheet-title { margin: 6px 0 6px; font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--accent-ink); }
.cs-header__sheet-links { display: grid; }
.cs-header__sheet-links.has-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.cs-header__sheet-links a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 4px 0; color: var(--ink); text-decoration: none; transition: color var(--dur-fast) ease; }
.cs-header__sheet-links a:hover { color: var(--accent-ink); }
.cs-header__sheet-links a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-header__sheet-feat { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 0 0 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: var(--fs-small); }
.cs-header__sheet-feat img { width: 88px; height: 66px; object-fit: cover; border-radius: var(--radius-xs); background: var(--bg-stone); }
.cs-header__sheet-feat svg { color: var(--ink-muted); transition: transform var(--dur-glide) var(--cs-ease); }
.cs-header__sheet-feat:hover svg { transform: translateX(3px); }
/* the bottom of the sheet: the language chips whenever the sheet is open, the CTA only when the header has no room for it (mini) */
.cs-header__sheet-foot { display: none; gap: 20px; margin-top: auto; padding-top: 32px; animation: cs-sheet-row 520ms var(--cs-ease) both; animation-delay: calc(80ms + 5 * 45ms); }
.cs-header__sheet-foot.has-lang, .cs-header[data-fit="mini"] .cs-header__sheet-foot { display: grid; }
@media (max-width: 809px) { .cs-header:not([data-fit]) .cs-header__sheet-foot { display: grid; } }
.cs-header__sheet-foot .cs-btn { width: 100%; }
.cs-header__sheet-foot .cs-header__sheet-cta { display: none; }
.cs-header[data-fit="mini"] .cs-header__sheet-cta { display: inline-flex; }
@media (max-width: 809px) { .cs-header:not([data-fit]) .cs-header__sheet-cta { display: inline-flex; } }
.cs-header__sheet-lang { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cs-header__sheet-lang .cs-header__sheet-title { margin: 0; }
.cs-header__sheet .cs-header__sheet-langs { display: flex; gap: 4px; }
.cs-header__sheet-langs .cs-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; color: var(--ink); text-decoration: none; }
.cs-header__sheet-langs .cs-chip.is-active { color: var(--bg); }
@media (min-width: 600px) { .cs-header__sheet-links.has-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 810px) { .cs-header__sheet { padding-top: 24px; } .cs-header__sheet-row { font-size: 28px; min-height: 76px; } }
.cs-header--sheet { background: var(--bg); color: var(--ink); }

/* ---------- SiteFooter ---------- */
.cs-footer { display: flex; flex-direction: column; gap: 60px; padding: 30px var(--pad-x); background: var(--bg-raised); color: var(--accent-ink); font-size: var(--fs-small); line-height: 1.32; }
.cs-footer--full { min-height: 100svh; }
.cs-footer a { color: inherit; text-decoration: none; transition: opacity var(--dur-fast) ease; }
.cs-footer a:hover { opacity: .62; }
.cs-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.cs-footer__title { margin: 0 0 15px; }
.cs-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.cs-footer__mark { flex: 1; display: grid; place-items: center; padding: 40px 0; }
.cs-footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; }
.cs-footer__bar ul { display: flex; flex-wrap: wrap; gap: 15px; list-style: none; margin: 0; padding: 0; }
.cs-footer__bar p { margin: 0; }
.cs-footer__langs { display: flex; align-items: baseline; gap: 8px; }
.cs-footer__langs svg { flex: none; align-self: center; }
.cs-footer__langs a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 809px) {
  .cs-footer__cols { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .cs-footer__bar { flex-direction: column; }
}

/* ---------- HeroCinematic ---------- */
.cs-hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; color: #fff; background: var(--ink-fixed); }
.cs-hero--tall { height: 88svh; }
.cs-hero__media, .cs-hero__media img, .cs-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-hero__media video { opacity: 0; transition: opacity var(--dur-base) var(--ease-fade); }
/* the video's pause button: a glass IconButton in the lower right, with a 40px hit area */
.cs-hero__toggle { position: absolute; right: var(--pad-x); bottom: 24px; z-index: 2; }
.cs-hero__toggle::before { content: ''; position: absolute; inset: -8px; }
.cs-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 22, 0.3) 0%, rgba(13, 16, 22, 0) 16%, rgba(13, 16, 22, 0) 40%, var(--scrim) 100%); }
.cs-hero__content { position: absolute; left: 0; right: 0; bottom: 60px; padding: 0 var(--pad-x); display: grid; justify-items: center; gap: 30px; text-align: center; }
.cs-hero__title { margin: 0; max-width: 22ch; text-wrap: balance; }
.cs-hero__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 15px; }
.cs-hero__sub { margin: 0; max-width: 44ch; text-wrap: balance; }
/* 2 to 4 short facts under the button, and the partner programmes in the lower left corner, opposite the pause button */
.cs-hero__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: -6px 0 0; padding: 0; list-style: none; font-size: var(--fs-small); line-height: 1.3; }
.cs-hero__points li { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.88); }
.cs-hero__points svg { flex: none; color: #fff; }
.cs-hero--partners .cs-hero__content { bottom: 80px; }
.cs-hero__partners { position: absolute; left: var(--pad-x); bottom: 24px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; max-width: calc(100% - 2 * var(--pad-x) - 64px); font-size: var(--fs-caption); line-height: 24px; }
.cs-hero__plabel { color: var(--on-glass-muted); }
.cs-hero__pname { color: #fff; }
.cs-hero__pname + .cs-hero__pname::before { content: ''; display: inline-block; width: 1px; height: 11px; margin: 0 14px 0 0; vertical-align: -1px; background: rgba(255, 255, 255, 0.35); }
.cs-hero__title, .cs-hero__row, .cs-hero__points, .cs-hero__partners { opacity: 0; transition: opacity var(--dur-slow) var(--ease-fade); }
.cs-hero.is-ready .cs-hero__row { opacity: 1; transition-delay: 120ms; }
.cs-hero.is-ready .cs-hero__title { opacity: 1; transition-delay: 320ms; }
.cs-hero.is-ready .cs-hero__points { opacity: 1; transition-delay: 520ms; }
.cs-hero.is-ready .cs-hero__partners { opacity: 1; transition-delay: 720ms; }
@media (max-width: 809px) {
  .cs-hero__scrim { background: linear-gradient(180deg, rgba(13, 16, 22, 0.42) 0%, rgba(13, 16, 22, 0) 20%, rgba(13, 16, 22, 0) 36%, var(--scrim) 100%); }
  .cs-hero__content { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); gap: 22px; }
  .cs-hero__toggle { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .cs-hero__row { flex-direction: column; gap: 22px; }
  .cs-hero__points { gap: 6px 16px; margin-top: -4px; font-size: 13px; }
  .cs-hero--partners .cs-hero__content { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .cs-hero__partners { left: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 80px); gap: 4px 10px; font-size: 12px; }
  .cs-hero__pname + .cs-hero__pname::before { margin-right: 10px; }
}

/* ---------- PageHeader ---------- */
.cs-pagehead { padding: calc(var(--nav-height, 72px) + 130px) var(--pad-x) 110px; }
.cs-pagehead__inner { display: grid; justify-items: center; text-align: center; gap: 20px; }
.cs-pagehead__title { margin: 0 0 10px; max-width: 20ch; text-wrap: balance; }
.cs-pagehead__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 15px; }
.cs-pagehead__sub { margin: 0; color: var(--ink-muted); }
.cs-pagehead--offset .cs-pagehead__inner { margin-left: 33.6%; max-width: 820px; justify-items: start; text-align: left; }
.cs-pagehead--offset .cs-pagehead__row { justify-content: flex-start; }
.cs-pagehead--offset .cs-pagehead__title { max-width: none; }
@media (max-width: 809px) {
  .cs-pagehead { padding: calc(var(--nav-height, 72px) + 64px) var(--pad-x) 56px; }
  .cs-pagehead--offset .cs-pagehead__inner { margin-left: 0; }
}

/* ---------- LogoMarquee ---------- */
.cs-marquee { display: flex; align-items: center; gap: 24px; padding: 30px var(--pad-x); }
.cs-marquee__label { flex: none; margin: 0; min-width: 84px; font-size: var(--fs-caption); color: var(--ink-muted); }
.cs-marquee__viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.cs-marquee__track { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; animation: cs-marquee var(--cs-marquee-dur, 30s) linear infinite; }
.cs-marquee__item { --cs-logo-h: 26px; flex: none; margin-right: 72px; height: 44px; display: flex; align-items: center; color: var(--ink-muted); font-size: 17px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.cs-marquee__logo { height: calc(var(--cs-logo-h) * var(--cs-logo-k, 1)); width: auto; max-width: none; }
.cs-marquee__lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.cs-marquee__lockup img { height: calc(var(--cs-logo-h) * var(--cs-logo-k, 1)); width: auto; max-width: none; }
.cs-marquee__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* an app icon on a white tile: the tile melts into the light band (the band always sits on a light surface) */
.cs-marquee__item--blend img { mix-blend-mode: multiply; }
/* mono and accent: every logo in one flat colour from an SVG filter (see LogoMarquee.tsx); shape and white details are kept */
.cs-marquee--mono { color: var(--ink-muted); }
.cs-marquee--accent { color: var(--accent); }
.cs-marquee--mono img, .cs-marquee--accent img { filter: var(--cs-tint); }
.cs-marquee--mono .cs-marquee__item, .cs-marquee--mono .cs-marquee__lockup { color: var(--ink-muted); }
.cs-marquee--accent .cs-marquee__item, .cs-marquee--accent .cs-marquee__lockup { color: var(--accent); }
@media (max-width: 809px) { .cs-marquee__item { --cs-logo-h: 20px; margin-right: 48px; } .cs-marquee__lockup { font-size: 15px; gap: 8px; } }
@keyframes cs-marquee { to { transform: translateX(-50%); } }

/* ---------- ScrollStory: cards drop onto a tilted board in 3D, join into one slab, and data runs through them ---------- */
.cs-story { position: relative; }
.cs-story__intro { display: grid; justify-items: center; gap: 30px; padding: 120px var(--pad-x) 60px; text-align: center; }
.cs-story__intro h2, .cs-story__intro p { margin: 0; }
.cs-story__intro h2 { max-width: var(--measure-heading, 680px); }
.cs-story__intro p { max-width: var(--measure-text, 460px); }
.cs-story__track { position: relative; }
.cs-story__stage { position: sticky; top: 0; height: var(--cs-vh, 100svh); overflow: hidden; background: linear-gradient(180deg, var(--bg-mist) 0%, var(--bg-mist) 30%, var(--bg) 100%);
  /* the list sits centred in the space under the header */
  --cs-list-h: 360px;
  --cs-top: calc(var(--nav-height, 72px) + max(40px, (var(--cs-vh, 100svh) - var(--nav-height, 72px) - var(--cs-list-h)) / 2)); }
.cs-story__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the board is a camera over a table: the plane is tilted back and turned, everything on it is laid out flat at a fixed size, and the plane is scaled to fit */
.cs-story__board { position: absolute; left: 36%; right: var(--pad-x); top: var(--nav-height, 72px); bottom: 0; perspective: 1800px; perspective-origin: 50% 40%; --cs-tilt: 52deg; --cs-turn: -26deg; }
.cs-story__plane { position: absolute; left: 48%; top: 49%; transform: translate(-50%, -50%) scale(var(--cs-s, 1)) rotateX(var(--cs-tilt)) rotateZ(var(--cs-turn)); transform-style: preserve-3d; }
.cs-story__table { position: absolute; inset: -36% -28%; background-image: radial-gradient(circle, rgba(13, 16, 22, 0.16) 0 1px, transparent 1.5px); background-size: 22px 22px; background-position: center; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); pointer-events: none; }
.cs-story__cards { position: relative; display: grid; grid-template-columns: repeat(var(--cs-cols, 3), 200px); gap: 14px; transform-style: preserve-3d; --cs-m: 0; }
/* inner corners square up as the cards join; a corner no other card meets stays round */
.cs-story__slot { position: relative; aspect-ratio: 8 / 7; transform-style: preserve-3d;
  --cs-in: calc(14px - 12px * var(--cs-m));
  --cs-radius: max(var(--cs-in), calc(14px * var(--cs-tl, 1))) max(var(--cs-in), calc(14px * var(--cs-tr, 1))) max(var(--cs-in), calc(14px * var(--cs-br, 1))) max(var(--cs-in), calc(14px * var(--cs-bl, 1))); }
.cs-story__cshadow { position: absolute; inset: 4px; border-radius: var(--cs-radius); background: rgba(30, 34, 18, 0.55); filter: blur(10px); will-change: transform, opacity; }
.cs-story__card { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
/* the card's thickness: a darker copy on the table, showing under the near edges */
.cs-story__edge { position: absolute; inset: 0; border-radius: var(--cs-radius); background: linear-gradient(180deg, #e4e4df, #cbcbc4); box-shadow: inset 0 0 0 1px rgba(13, 16, 22, 0.06); transform: translateZ(-7.5px); opacity: var(--cs-o, 1); }
.cs-story__face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 5px; padding: 14px 15px; border-radius: var(--cs-radius); background: #fff; box-shadow: inset 0 0 0 1px rgba(13, 16, 22, calc(0.08 - 0.03 * var(--cs-m, 0))); transform-style: preserve-3d; opacity: var(--cs-o, 1); }
.cs-story__face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--accent), inset 0 0 28px rgba(204, 233, 132, 0.8); opacity: var(--cs-glow, 0); pointer-events: none; will-change: opacity; }
.cs-story__card.is-current .cs-story__face { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cs-story__cardnum { font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0; color: var(--ink-subtle); }
.cs-story__card.is-current .cs-story__cardnum { color: var(--accent); }
.cs-story__cardtitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 17px; line-height: 1.16; letter-spacing: -0.02em; color: var(--ink); }
.cs-story__cardfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; transform-style: preserve-3d; }
/* a logo key: printed flat on the card, then popped up; the grey base shows as its sides */
.cs-story__key { position: relative; flex: none; width: 28px; height: 28px; transform-style: preserve-3d; }
.cs-story__key::before { content: ''; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(180deg, #d9d9d3, #bcbcb4); }
.cs-story__keyface { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px rgba(13, 16, 22, 0.1); transform: translateZ(var(--cs-key, 0px)); translate: 0 0 calc(var(--cs-press, 0) * -1px); }
.cs-story__keyface img { width: calc(60% * var(--cs-logo-k, 1)); height: calc(60% * var(--cs-logo-k, 1)); object-fit: contain; }
.cs-story__keytext { font-size: 9px; color: var(--ink-muted); }
.cs-story__tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-xs); background: var(--bg-mist); color: var(--ink-muted); font-size: 11.5px; white-space: nowrap; }
.cs-story__slab { position: absolute; inset: var(--cs-jy, 7px) var(--cs-jx, 14px); border-radius: 16px; background: rgba(30, 34, 18, 0.5); filter: blur(22px); transform: translate(12px, 18px); pointer-events: none; }
/* the circuit, just above the faces: a thin olive line drawn by scroll, then a pulse with a lime glow runs out and back (driven from ScrollStory.tsx) */
.cs-story__flow { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; transform: translateZ(8.6px); }
.cs-story__wire { fill: none; stroke: var(--accent); stroke-opacity: 0.6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; }
.cs-story__pulse { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 4 200; opacity: 0; filter: drop-shadow(0 0 3px var(--signal)) drop-shadow(0 0 7px var(--signal)); }
.cs-story__node { fill: #fff; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.cs-story__frame { position: absolute; inset: calc(var(--cs-jy, 7px) - 34px) calc(var(--cs-jx, 14px) - 34px); pointer-events: none; transform: translateZ(0.5px); }
.cs-story__framebox { position: absolute; inset: 0; border: 1.5px solid var(--accent); border-radius: 30px; -webkit-mask-image: conic-gradient(from -60deg, #000 calc(var(--cs-draw, 0) * 360deg), transparent 0); mask-image: conic-gradient(from -60deg, #000 calc(var(--cs-draw, 0) * 360deg), transparent 0); }
.cs-story__framelabel { position: absolute; right: 30px; bottom: 0; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); transform: translateY(50%); opacity: clamp(0, calc(var(--cs-draw, 0) * 4 - 3), 1); }
.cs-story__framelabel .cs-wordmark { font-size: 15px; }
.cs-story__board.is-flowing .cs-story__pulse { opacity: 1; }
/* pop-ups over the cards while the data runs: upright, in screen space, with a small tail down to the line */
.cs-story__pops { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cs-story__pop { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; max-width: 280px; padding: 8px 12px; border-radius: 10px; background: #fff; color: var(--ink-fixed); font-size: 13px; line-height: 1.35; white-space: nowrap; box-shadow: 0 0 0 1px rgba(13, 16, 22, 0.07), 0 14px 30px -12px rgba(13, 16, 22, 0.35); opacity: 0; transform: translate(-50%, calc(-100% - 20px)) scale(0.9); transform-origin: 50% 100%; transition: opacity 240ms var(--ease-fade), transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.cs-story__pop.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 20px)); }
.cs-story__pop::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); box-shadow: 1px 1px 0 rgba(13, 16, 22, 0.07); }
.cs-story__pop img { width: 16px; height: 16px; object-fit: contain; }
.cs-story__pop--prompt { background: #ecece7; }
.cs-story__pop--tool { font-family: var(--font-mono); font-size: 12px; }
.cs-story__pop--data { color: var(--accent); }
.cs-story__pop--answer { width: 250px; white-space: normal; }
.cs-story__list { position: absolute; z-index: 2; left: var(--pad-x); top: var(--cs-top); width: min(400px, 30%); padding-left: 22px; }
.cs-story__line { position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; overflow: hidden; background: var(--line); }
.cs-story__fill { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleY(0); transform-origin: top center; }
.cs-story__steps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cs-story__item { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-base) var(--ease-fade), transform var(--dur-glide) var(--cs-ease); }
.cs-story__stage.is-in .cs-story__item { opacity: 1; transform: none; }
.cs-story__step { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 8px 0; border: 0; background: none; color: var(--ink-subtle); font: inherit; font-size: var(--fs-body); line-height: 1.3; text-align: left; cursor: pointer; transition: color var(--dur-base) ease; }
.cs-story__step:hover { color: var(--ink); }
.cs-story__num { flex: none; min-width: 20px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; color: inherit; }
.cs-story__label { letter-spacing: -0.01em; }
.cs-story__item.is-done .cs-story__step { color: var(--ink-muted); }
.cs-story__item.is-active .cs-story__step { color: var(--ink); }
.cs-story__item.is-active .cs-story__num { color: var(--accent); }
.cs-story__desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-glide) var(--cs-ease); }
.cs-story__desc > div { min-height: 0; overflow: hidden; }
.cs-story__desc p { margin: 0; padding: 0 0 14px 34px; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-muted); opacity: 0; transition: opacity var(--dur-base) var(--ease-fade); }
.cs-story__item.is-active .cs-story__desc { grid-template-rows: 1fr; }
.cs-story__item.is-active .cs-story__desc p { opacity: 1; transition-delay: 160ms; }
.cs-story__foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 30px var(--pad-x) 120px; }
.cs-story__foot p { margin: 0; max-width: 420px; }
@media (max-width: 1199px) { .cs-story__board { left: 37%; --cs-turn: -22deg; } .cs-story__list { width: 33%; } }
@media (max-width: 809px) {
  .cs-story__board { left: 0; right: 0; top: var(--nav-height, 72px); bottom: 170px; perspective: 1400px; --cs-tilt: 40deg; --cs-turn: -14deg; }
  .cs-story__plane { top: 50%; }
  .cs-story__cardtitle { font-size: 20px; }
  .cs-story__tag { display: none; }
  .cs-story__pop { gap: 5px; max-width: 200px; padding: 6px 9px; border-radius: 8px; font-size: 11px; white-space: normal; }
  .cs-story__pop--tool { font-size: 10.5px; white-space: nowrap; }
  .cs-story__pop img { width: 13px; height: 13px; }
  .cs-story__pop--answer { width: 190px; }
  .cs-story__list { top: auto; bottom: 28px; right: var(--pad-x); width: auto; }
  .cs-story__item { display: none; }
  .cs-story__item.is-active { display: block; }
  .cs-story__foot { flex-direction: column; }
}

/* ---------- FeatureCard / FeatureGrid ---------- */
.cs-fcard { display: block; color: inherit; text-decoration: none; }
.cs-fcard__media { position: relative; overflow: hidden; border-radius: var(--radius-hair); }
.cs-fcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--cs-ease); }
.cs-fcard:hover .cs-fcard__media img { transform: var(--zoom-hover, scale(1.025)); }
.cs-fcard__media--contain img { left: 50%; right: auto; width: auto; max-width: none; transform: translateX(-50%); }
.cs-fcard:hover .cs-fcard__media--contain img { transform: translateX(-50%) var(--zoom-hover, scale(1.025)); }
.cs-fcard__title { margin: 18px 0 0; font-weight: 400; color: var(--ink); transition: color var(--dur-fast) ease; }
.cs-fcard:hover .cs-fcard__title { color: var(--ink-muted); }
.cs-fcard__text { margin: 24px 0 0; color: var(--ink-muted); }
.cs-fcard__link { margin-top: 24px; }
.cs-fcard:hover .cs-fcard__link, .cs-fcard:hover .cs-fcard__link .cs-textlink__arrow { color: var(--ink); }
.cs-fgrid { padding: 120px var(--pad-x); }
.cs-fgrid__head { display: grid; gap: 30px; margin-bottom: 96px; }
.cs-fgrid__head h2, .cs-fgrid__head p { margin: 0; }
.cs-fgrid__head p { max-width: var(--measure-text, 460px); }
.cs-fgrid__items { display: grid; gap: 32px; }
.cs-fgrid__items--4 { grid-template-columns: repeat(4, 1fr); }
.cs-fgrid__items--3 { grid-template-columns: repeat(3, 1fr); }
.cs-fgrid--sequence { padding: 0; }
.cs-fgrid__stage { position: sticky; top: 0; height: var(--cs-vh, 100svh); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-height, 72px) + 24px) var(--pad-x) 40px; overflow: hidden; }
.cs-fgrid--sequence .cs-fgrid__head { margin-bottom: 48px; }
.cs-fgrid__items.is-live { display: flex; gap: 0; }
.cs-fgrid__items.is-live > .cs-fcard { flex: 0 1 0px; min-width: 0; overflow: hidden; will-change: opacity; }
.cs-fgrid__items.is-live .cs-fcard__title, .cs-fgrid__items.is-live .cs-fcard__text { width: var(--cs-col); }
.cs-fgrid--sequence .cs-fcard__media { aspect-ratio: auto; height: clamp(220px, calc(var(--cs-vh, 100svh) - 480px), 420px); }
@media (max-width: 809px) {
  .cs-fgrid { padding: 80px var(--pad-x); }
  .cs-fgrid__head { margin-bottom: 48px; }
  .cs-fgrid__items--4, .cs-fgrid__items--3 { grid-template-columns: repeat(2, 1fr); gap: 40px 15px; }
  .cs-fgrid--sequence { padding: 80px var(--pad-x); }
  .cs-fgrid--sequence .cs-fgrid__track { height: auto !important; }
  .cs-fgrid--sequence .cs-fgrid__stage { position: static; height: auto; padding: 0; overflow: visible; }
  .cs-fgrid--sequence .cs-fcard__media { height: auto; aspect-ratio: 4 / 5; }
}

/* ---------- SpotlightCarousel: tabs over a split, photo left and text right ---------- */
.cs-spot { padding: 120px 0; }
.cs-spot__head { display: grid; justify-items: center; gap: 30px; padding: 0 var(--pad-x); margin-bottom: 56px; text-align: center; }
.cs-spot__head h2, .cs-spot__head p { margin: 0; }
.cs-spot__head h2 { max-width: var(--measure-heading, 680px); }
.cs-spot__head p { max-width: var(--measure-text, 460px); }
.cs-spot__tabs { margin: 0 var(--pad-x) 40px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.cs-spot__tabs::-webkit-scrollbar { display: none; }
.cs-spot__tablist { position: relative; display: flex; gap: 32px; width: max-content; margin: 0 auto; border-bottom: 1px solid var(--line); }
.cs-spot__tab { flex: none; padding: 6px 0 14px; border: 0; background: none; color: var(--ink-subtle); font: inherit; font-size: var(--fs-body); cursor: pointer; transition: color var(--dur-fast) ease; }
.cs-spot__tab:hover, .cs-spot__tab.is-active { color: var(--ink); }
.cs-spot__ink { position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--accent); transition: transform var(--dur-glide) var(--cs-ease), width var(--dur-glide) var(--cs-ease); }
.cs-spot__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; padding: 0 var(--pad-x); touch-action: pan-y; }
.cs-spot__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-hair); background: var(--bg-mist); }
.cs-spot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 700ms var(--ease-fade), transform 1400ms var(--cs-ease); user-select: none; -webkit-user-drag: none; }
.cs-spot__img.is-active { opacity: 1; transform: none; }
.cs-spot__detail { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 4px 0 0; }
.cs-spot__text { display: grid; justify-items: start; gap: 18px; animation: cs-fade-in var(--dur-base) var(--ease-fade); }
.cs-spot__text h3, .cs-spot__text p { margin: 0; }
.cs-spot__text p { max-width: 420px; }
.cs-spot__count { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; color: var(--ink-subtle); }
.cs-spot__nav { display: flex; gap: 8px; }
@media (max-width: 809px) {
  .cs-spot { padding: 80px 0; }
  .cs-spot__head { margin-bottom: 40px; }
  .cs-spot__tabs { margin: 0 0 24px; padding: 0 var(--pad-x) 2px; }
  .cs-spot__tablist { gap: 22px; margin: 0; }
  .cs-spot__body { grid-template-columns: 1fr; gap: 24px; }
  .cs-spot__media { aspect-ratio: 4 / 5; }
}

/* ---------- MediaBanner ---------- */
.cs-banner { position: relative; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; color: #fff; background: var(--ink-fixed); }
.cs-banner--band { height: 70svh; min-height: 440px; }
.cs-banner__media, .cs-banner__media img, .cs-banner__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 22, 0.5) 0%, rgba(13, 16, 22, 0) 48%); }
.cs-banner__content { position: relative; z-index: 1; display: grid; justify-items: center; padding: 40px var(--pad-x) 0; text-align: center; }
.cs-banner__content h2 { margin: 0; max-width: 820px; }
.cs-banner__eyebrow { margin: 0 0 8px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; color: rgba(255, 255, 255, 0.82); }
.cs-banner__eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.cs-banner__link { margin: 0; }

/* ---------- Stats ---------- */
.cs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 120px; padding: 30px var(--pad-x) 120px; }
.cs-stats__lead { margin: 0; max-width: 606px; }
.cs-stats__list { margin: 0; }
.cs-stats__row { position: relative; display: grid; grid-template-columns: 1fr minmax(150px, 220px); gap: 24px; min-height: 180px; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.cs-stats__row dt { margin: 0; }
.cs-stats__row dd { margin: 4px 0 0; }
/* count: the hairline draws itself from the left, the number counts, then the logos pop in one by one */
.cs-stats__row.cs-stats--count { border-top-color: transparent; }
.cs-stats__row.cs-stats--count::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: left center; transition: transform 1200ms var(--ease-glide); }
.cs-stats__row.cs-stats--count.is-in::before { transform: none; }
.cs-stats--count .cs-t-stat, .cs-stats--count .cs-t-stat-sm { font-variant-numeric: tabular-nums; }
.cs-stats__marks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cs-stats__mark { display: inline-flex; }
.cs-stats--count .cs-stats__mark { opacity: 0; transform: translateY(8px) scale(0.7); transition: opacity 300ms var(--ease-fade), transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(450ms + var(--i, 0) * 80ms); }
.cs-stats--count.is-in .cs-stats__mark { opacity: 1; transform: none; }
.cs-stats-row { padding: 120px var(--pad-x); }
.cs-stats-row__items { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px clamp(32px, 8vw, 140px); text-align: center; }
.cs-stats-row__item { display: grid; justify-items: center; gap: 20px; max-width: 260px; }
.cs-stats-row__item p { margin: 0; }
.cs-stats-row--labelled { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
.cs-stats-row--labelled .cs-stats-row__items { justify-content: space-between; text-align: left; }
.cs-stats-row--labelled .cs-stats-row__item { justify-items: start; }
.cs-stats-row__item .cs-stats__marks { justify-content: center; margin-top: 0; }
.cs-stats-row--labelled .cs-stats-row__item .cs-stats__marks { justify-content: flex-start; }
@media (max-width: 809px) {
  .cs-stats { grid-template-columns: 1fr; padding-bottom: 80px; }
  .cs-stats__row { grid-template-columns: 1fr 120px; min-height: 140px; }
  .cs-stats-row--labelled { grid-template-columns: 1fr; }
}

/* ---------- Statement ---------- */
.cs-statement { display: grid; grid-template-columns: 1fr 1fr; column-gap: 15px; row-gap: 60px; padding: 30px var(--pad-x); }
.cs-statement__title { margin: 0; grid-column: 1; }
.cs-statement__cols { grid-column: 2; display: grid; gap: 24px; }
.cs-statement__cols--2 { grid-template-columns: 1fr 1fr; }
.cs-statement__cols p { margin: 0 0 18px; color: var(--ink-body); }
.cs-statement__person { grid-column: 1; align-self: end; display: grid; gap: 12px; width: min(255px, 100%); margin: 0; }
.cs-statement__person img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.cs-statement__person figcaption { display: grid; gap: 1px; }
.cs-statement__person figcaption span:first-child { color: var(--ink); }
.cs-statement__image { grid-column: 2; }
.cs-statement__image img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-hair); }
@media (max-width: 809px) {
  .cs-statement { grid-template-columns: 1fr; row-gap: 32px; }
  .cs-statement__title, .cs-statement__cols, .cs-statement__person, .cs-statement__image { grid-column: 1; }
  .cs-statement__cols--2 { grid-template-columns: 1fr; }
}

/* ---------- Quote: editorial, left-aligned, a large olive mark in the margin ---------- */
.cs-quote { position: relative; isolation: isolate; margin: 0; padding: 120px var(--pad-x); }
.cs-quote__inner { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; max-width: 1080px; margin: 0 auto; }
.cs-quote__mark { margin-top: 10px; font-size: 136px; line-height: 0.72; font-weight: 200; color: var(--accent-ink); text-align: right; user-select: none; }
.cs-quote__text { margin: 0; max-width: 820px; text-wrap: pretty; }
.cs-quote__text p { margin: 0; }
.cs-quote__text p + p { margin-top: 0.75em; }
/* a longer customer case: lead size, a shorter line */
.cs-quote__text--lead { max-width: 720px; line-height: 1.32; }
.cs-quote__text--lead + .cs-quote__by { margin-top: 32px; }
.cs-quote__by { display: flex; align-items: center; gap: 14px; margin-top: 40px; }
.cs-quote__portrait { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.cs-quote__who { display: grid; gap: 2px; font-size: var(--fs-small); line-height: 1.35; }
.cs-quote__name { color: var(--ink); }
.cs-quote__role { color: var(--ink-muted); }
.cs-quote--accent { background: var(--accent-deep); color: var(--on-accent); }
.cs-quote--accent .cs-quote__mark { color: var(--signal); }
.cs-quote--accent .cs-quote__name { color: var(--on-accent); }
.cs-quote--accent .cs-quote__role { color: rgba(255, 255, 255, 0.74); }
.cs-quote--banner { min-height: 440px; display: grid; align-content: center; overflow: hidden; color: #fff; background: var(--ink-fixed); }
.cs-quote--banner::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(13, 16, 22, 0.32); }
.cs-quote__bg { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); max-width: none; z-index: -2; object-fit: cover; filter: blur(26px) saturate(0.9); }
.cs-quote--banner .cs-quote__mark { color: var(--signal); }
.cs-quote--banner .cs-quote__name { color: #fff; }
.cs-quote--banner .cs-quote__role { color: var(--on-glass-muted); }
@media (max-width: 809px) { .cs-quote { padding: 80px var(--pad-x); } .cs-quote__inner { grid-template-columns: 1fr; gap: 0; } .cs-quote__mark { font-size: 96px; text-align: left; height: 30px; } .cs-quote__by { margin-top: 28px; } }

/* ---------- BadgeGrid: a band of hairline cells, title and text at the top, the number at the bottom ---------- */
.cs-badges { padding: 120px var(--pad-x); background: var(--bg); color: var(--ink); }
.cs-badges__head { margin-bottom: 80px; }
.cs-badges__head h2, .cs-badges__head p { margin: 0; max-width: 560px; }
.cs-badges__note { margin-top: 24px !important; max-width: 440px !important; color: var(--ink-body); }
.cs-badges__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.cs-badges__cell { display: flex; flex-direction: column; gap: 5px; min-height: 278px; padding: 30px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.cs-badges__title { margin: 0; color: var(--ink); }
.cs-badges__text { margin: 0; max-width: 230px; color: var(--ink-body); }
.cs-badges__num { margin-top: auto; padding-top: 30px; font-family: var(--font-mono); font-size: 12px; line-height: 1; letter-spacing: 0; color: var(--accent-ink); }
@media (max-width: 1100px) { .cs-badges__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px) { .cs-badges { padding: 80px var(--pad-x); } .cs-badges__head { margin-bottom: 48px; } .cs-badges__grid { grid-template-columns: 1fr; } .cs-badges__cell { min-height: 200px; } }

/* ---------- FeatureSplit ---------- */
.cs-split { display: grid; gap: 120px; padding: 60px var(--pad-x) 120px; }
.cs-split__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 50px; align-items: start; }
.cs-split__row--flip .cs-split__media { order: 2; }
.cs-split__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-hair); }
.cs-split__media img { width: 100%; height: 100%; object-fit: cover; }
/* media: a node centred on the panel (or on the photo). The frame stays square, and grows if the node is taller:
   an empty square (::before) and the node share one grid cell, so the cell is as tall as the taller of the two */
.cs-split__media--node { display: grid; aspect-ratio: auto; }
.cs-split__media--node::before { content: ''; grid-area: 1 / 1; padding-top: 100%; }
.cs-split__media--node > img { position: absolute; inset: 0; }
.cs-split__node { position: relative; grid-area: 1 / 1; display: grid; place-items: center; padding: clamp(16px, 7%, 56px); }
/* live: hovering the row lifts the card 2%, like a ToolSuite card, and plays it once */
.cs-split__node > .cs-pcard { transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.cs-split__row.is-hover .cs-split__node > .cs-pcard { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { .cs-split__row.is-hover .cs-split__node > .cs-pcard { transform: none; } }
.cs-split__badge { position: absolute; top: 15px; right: 15px; height: 22px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.72); color: var(--ink-fixed); font-size: var(--fs-caption); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); }
.cs-split__text { display: grid; justify-items: start; gap: 15px; max-width: 440px; }
.cs-split__text h3, .cs-split__text p { margin: 0; }
.cs-split__kicker { color: var(--ink); }
.cs-split__body { margin: 15px 0 5px !important; }
@media (max-width: 809px) {
  .cs-split { gap: 72px; }
  .cs-split__row { grid-template-columns: 1fr; }
  .cs-split__row--flip .cs-split__media { order: 0; }
}

/* ---------- ProcessGrid ---------- */
.cs-process { padding: 60px var(--pad-x); }
.cs-process__head { display: grid; gap: 15px; margin-bottom: 80px; }
.cs-process__head h2 { margin: 0; max-width: 820px; }
.cs-process__grid { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.cs-process__cell { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; min-height: clamp(300px, 32vw, 464px); padding: 30px; text-align: center; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.cs-process__cell p { margin: 0; max-width: 380px; }
.cs-process__cell--image { padding: 0; }
.cs-process__cell--image img { width: 100%; height: 100%; object-fit: cover; }
.cs-process__num { color: var(--ink); }
@media (max-width: 809px) { .cs-process__grid { grid-template-columns: 1fr; } .cs-process__cell { min-height: 200px; } }

/* ---------- CtaPanel: a light box inside a thin olive frame that draws itself in, with a tab on the frame ---------- */
@property --cs-draw { syntax: '<number>'; inherits: true; initial-value: 0; }
.cs-cta { padding: 160px var(--pad-x); }
.cs-cta__wrap { position: relative; max-width: var(--panel-width, 1080px); margin: 0 auto; --cs-draw: 0; transition: --cs-draw 1600ms var(--ease-glide); }
.cs-cta__wrap.is-in { --cs-draw: 1; }
.cs-cta__frame { position: absolute; inset: -16px; border: 1.5px solid var(--accent-ink); border-radius: calc(var(--radius-card) + 16px); pointer-events: none; -webkit-mask-image: conic-gradient(from -60deg, #000 calc(var(--cs-draw) * 360deg), transparent 0); mask-image: conic-gradient(from -60deg, #000 calc(var(--cs-draw) * 360deg), transparent 0); }
.cs-cta__box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; min-height: 500px; padding: 15px; border-radius: var(--radius-card); background: var(--bg-raised); color: var(--ink); box-shadow: 0 1px 2px rgba(13, 16, 22, 0.05), 0 30px 60px -30px rgba(13, 16, 22, 0.22); }
.cs-cta__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: 30px 24px 24px; }
.cs-cta__copy h2, .cs-cta__copy p { margin: 0; }
.cs-cta__copy h2 { max-width: 420px; }
.cs-cta__copy p { max-width: 340px; }
.cs-cta__btn { margin-top: auto; }
.cs-cta__media { position: relative; min-height: 380px; overflow: hidden; border-radius: calc(var(--radius-card) - 10px); }
.cs-cta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cs-cta__media--cover img { object-fit: cover; }
.cs-cta__tab { position: absolute; right: 48px; bottom: -16px; display: inline-flex; align-items: center; height: 28px; padding: 0 13px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); transform: translateY(50%); opacity: clamp(0, calc(var(--cs-draw) * 5 - 4), 1); }
.cs-cta__tab .cs-wordmark { font-size: 16px; }
@media (max-width: 809px) {
  .cs-cta { padding: 96px var(--pad-x); }
  .cs-cta__frame { inset: -8px; border-radius: calc(var(--radius-card) + 8px); }
  .cs-cta__box { grid-template-columns: 1fr; min-height: 0; padding: 10px; }
  .cs-cta__copy { padding: 18px 12px 8px; }
  .cs-cta__btn { margin-top: 6px; }
  .cs-cta__media { min-height: 0; aspect-ratio: 4 / 3; }
  .cs-cta__tab { right: 28px; bottom: -8px; }
}

/* ---------- NewsCard ---------- */
.cs-news { display: block; color: inherit; text-decoration: none; }
.cs-news__media { aspect-ratio: 4 / 5; overflow: hidden; }
.cs-news__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--cs-ease); }
.cs-news:hover .cs-news__media img { transform: var(--zoom-hover, scale(1.025)); }
.cs-news__meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cs-news__title { margin: 20px 0 0; font-weight: 400; transition: color var(--dur-fast) ease; }
.cs-news:hover .cs-news__title { color: var(--ink-muted); }
.cs-news__excerpt { margin: 15px 0 0; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cs-news-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; color: #fff; text-decoration: none; background: var(--ink-fixed); }
.cs-news-tile--large { grid-column: span 2; grid-row: span 2; }
.cs-news-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--cs-ease); }
.cs-news-tile:hover img { transform: var(--zoom-hover, scale(1.025)); }
.cs-news-tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 22, 0) 38%, rgba(13, 16, 22, 0.72) 100%); }
.cs-news-tile__body { position: absolute; left: 15px; right: 15px; bottom: 15px; display: grid; gap: 6px; }
.cs-news-tile__date { font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.78); }

/* ---------- Tag / StatusBadge ---------- */
.cs-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; font-size: var(--fs-caption); line-height: 1; white-space: nowrap; }
.cs-tag--glass { border-radius: var(--radius-pill); background: var(--glass-strong); color: var(--on-glass); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); }
.cs-tag--stone { height: 20px; padding: 0 6px; border-radius: var(--radius-xs); background: var(--bg-mist); color: var(--ink); font-size: 12px; font-weight: 500; }
.cs-status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: var(--radius-pill); font-size: var(--fs-caption); line-height: 1; white-space: nowrap; }
.cs-status__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cs-status--live { background: var(--success-soft); color: var(--success); }
.cs-status--live .cs-status__dot { animation: cs-pulse 2.4s ease-out infinite; }
.cs-status--beta { background: var(--warning-soft); color: var(--warning); }
.cs-status--soon { background: var(--info-soft); color: var(--info); }
.cs-status--error { background: var(--danger-soft); color: var(--danger); }
@keyframes cs-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 5px transparent; } }

/* ---------- ConnectorTile ---------- */
.cs-ctile { display: inline-grid; justify-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.cs-ctile__glass {
  width: 96px; height: 96px; border-radius: 26px; display: grid; place-items: center; color: var(--ink-fixed);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-render), inset 0 -10px 22px rgba(13, 16, 22, 0.06);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  transition: transform var(--dur-glide) var(--cs-ease);
}
.cs-ctile--sm .cs-ctile__glass { width: 64px; height: 64px; border-radius: 18px; }
a.cs-ctile:hover .cs-ctile__glass { transform: translateY(-3px); }
.cs-ctile__glass img { width: calc(46% * var(--cs-logo-k, 1)); height: calc(46% * var(--cs-logo-k, 1)); object-fit: contain; }
.cs-ctile__fallback { padding: 0 8px; font-size: var(--fs-caption); line-height: 1.2; text-align: center; color: var(--ink-fixed); }
.cs-ctile__name { font-size: var(--fs-small); }

/* ---------- PriceCard ---------- */
.cs-price { display: flex; flex-direction: column; align-items: stretch; gap: 20px; min-width: 260px; padding: 30px; border: 1px solid var(--line-strong); background: var(--bg-raised); }
.cs-price--highlight { border-color: transparent; background: var(--accent-tint); }
.cs-price__plan { margin: 0; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; }
.cs-price__amount { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.cs-price__num { font-size: var(--fs-stat-sm); font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.cs-price__unit { font-size: var(--fs-small); color: var(--ink-muted); }
.cs-price__desc { margin: 0; color: var(--ink-muted); }
.cs-price__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cs-price__list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.cs-price__list svg { flex: none; margin-top: 1px; color: var(--accent-ink); }
.cs-price .cs-btn { align-self: flex-start; margin-top: auto; }
.cs-price__note { margin: 0; }

/* ---------- FilmCard ---------- */
.cs-film { display: inline-flex; gap: 15px; width: min(375px, 100%); padding: 15px; border: 0; border-radius: var(--radius-panel); background: var(--glass); color: var(--on-glass); font: inherit; text-align: left; text-decoration: none; cursor: pointer; -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); transition: background-color var(--dur-fast) ease; }
.cs-film:hover { background: var(--glass-strong); }
.cs-film__text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cs-film__eyebrow { font-size: var(--fs-caption); color: var(--on-glass-muted); }
.cs-film__title { font-size: var(--fs-small); }
.cs-film__play { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: var(--fs-caption); }
.cs-film__dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink-fixed); }
.cs-film__thumb { width: 116px; height: 100px; object-fit: cover; border-radius: 6px; }

/* ---------- Accordion ---------- */
.cs-accordion { max-width: 720px; margin: 0 auto; padding: 120px var(--pad-x); box-sizing: content-box; }
.cs-accordion__title { margin: 0 0 30px; }
.cs-accordion__list { border-bottom: 1px solid var(--line-strong); }
.cs-accordion__item { border-top: 1px solid var(--line-strong); }
.cs-accordion__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 10px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--fs-body); text-align: left; cursor: pointer; }
.cs-accordion__icon { flex: none; transition: transform var(--dur-glide) var(--cs-ease); }
.cs-accordion__item.is-open .cs-accordion__icon { transform: rotate(45deg); }
.cs-accordion__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-glide) var(--cs-ease); }
.cs-accordion__a > div { min-height: 0; overflow: hidden; }
.cs-accordion__a p { margin: 0; padding: 0 40px 14px 0; font-size: var(--fs-small); color: var(--ink-muted); }
.cs-accordion__item.is-open .cs-accordion__a { grid-template-rows: 1fr; }

/* ---------- GroupedList ---------- */
.cs-glist { padding: 60px var(--pad-x) 120px; }
.cs-glist__head { display: grid; gap: 10px; margin-bottom: 40px; }
.cs-glist__head h2 { margin: 0; max-width: 460px; }
.cs-glist__filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 24px; }
.cs-glist__group { margin-top: 14px; }
.cs-glist__gtitle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.cs-glist__rows { list-style: none; margin: 0; padding: 0; }
.cs-glist__group.is-closed .cs-glist__rows { display: none; }
.cs-glist__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 40px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: color var(--dur-fast) ease; }
.cs-glist__row:hover { color: var(--accent-ink); }
.cs-glist__name { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
/* an empty slot for a system with no logo of its own, so its name lines up; never a placeholder icon */
.cs-glist__nomark { flex: none; width: 28px; height: 28px; }
.cs-glist__meta { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-muted); }
@media (max-width: 809px) { .cs-glist__filters { grid-template-columns: 1fr; } }

/* ---------- TextReveal ---------- */
.cs-reveal { display: grid; gap: 20px; max-width: 520px; }
.cs-reveal__title { margin: 0; }
.cs-reveal__p { margin: 0; color: var(--line-strong); }
.cs-reveal__p span { transition: color 140ms linear; }
.cs-reveal__p span.is-on { color: var(--ink); }

/* ---------- Field ---------- */
.cs-field { display: grid; align-content: start; gap: 6px; }
.cs-field__label { font-size: var(--fs-caption); color: var(--ink-muted); }
.cs-field__control { position: relative; display: flex; align-items: center; }
.cs-field input, .cs-field select, .cs-field textarea {
  width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--line-control); border-radius: var(--radius-xs);
  background: var(--bg-raised); color: var(--ink); font: inherit; font-size: var(--fs-small); -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-fast) ease;
}
.cs-field textarea { height: auto; padding: 9px 12px; resize: vertical; }
.cs-field input::placeholder, .cs-field textarea::placeholder { color: var(--ink-muted); }
.cs-field input:hover, .cs-field select:hover, .cs-field textarea:hover { border-color: var(--ink-muted); }
.cs-field input:focus-visible, .cs-field select:focus-visible, .cs-field textarea:focus-visible { border-color: var(--ink); outline-offset: 1px; }
.cs-field--search input { padding-left: 32px; }
.cs-field select { padding-right: 32px; cursor: pointer; }
.cs-field__lead { position: absolute; left: 11px; color: var(--ink-muted); pointer-events: none; }
.cs-field__trail { position: absolute; right: 12px; color: var(--ink-muted); pointer-events: none; }
.cs-field.is-error input, .cs-field.is-error select, .cs-field.is-error textarea { border-color: var(--danger); }
.cs-field__hint { margin: 0; font-size: var(--fs-caption); color: var(--ink-muted); }
.cs-field__hint--error { color: var(--danger); }
.cs-field--md { gap: 8px; }
.cs-field--md .cs-field__label { font-size: var(--fs-small); color: var(--ink); }
.cs-field--md input, .cs-field--md select { height: 44px; padding: 0 14px; font-size: var(--fs-body); }
.cs-field--md textarea { padding: 11px 14px; font-size: var(--fs-body); line-height: 1.45; }
.cs-field--md select { padding-right: 36px; }
/* 16px in fields on phones, so iOS does not zoom when a field gets focus */
@media (max-width: 809px) { .cs-field input, .cs-field select, .cs-field textarea { font-size: 16px; } }

/* ---------- ToolList: what a connector can do, in plain words. A group for what it reads and one for what it changes after a yes, each a row of hairline cells ---------- */
.cs-tools { padding: 120px var(--pad-x); }
.cs-tools__head { display: grid; gap: 20px; margin-bottom: 80px; }
.cs-tools__head h2, .cs-tools__head p { margin: 0; }
.cs-tools__head h2 { max-width: var(--measure-heading, 680px); }
.cs-tools__intro { max-width: 560px; }
.cs-tools__group + .cs-tools__group { margin-top: 96px; }
.cs-tools__ghead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 28px; margin-bottom: 32px; }
.cs-tools__count { margin: 0; min-width: 1.2em; font-variant-numeric: tabular-nums; }
.cs-tools__gtext { display: grid; gap: 8px; padding-bottom: 6px; }
.cs-tools__gtext p { margin: 0; max-width: 620px; }
/* like BadgeGrid: cells in a grid of hairlines. Each cell spans 3 shared rows (subgrid), so titles, sentences and examples line up across a row.
   When the group comes into view, its top line draws itself from the left and the number counts */
.cs-tools__grid { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line-strong); }
.cs-tools__grid::before { content: ''; position: absolute; left: -1px; right: 0; top: 0; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: left center; transition: transform 1200ms var(--ease-glide); }
.cs-tools__group.is-in .cs-tools__grid::before { transform: none; }
.cs-tools__cell { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 30px 30px 34px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.cs-tools__cell p, .cs-tools__title { margin: 0; }
.cs-tools__title { font-weight: 400; color: var(--ink); }
.cs-tools__text { max-width: 300px; margin-top: 10px !important; color: var(--ink-muted); }
.cs-tools__example { display: grid; align-content: start; gap: 6px; margin-top: 44px !important; color: var(--ink); }
.cs-tools__ask { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--accent-ink); }
.cs-tools__note { margin: 40px 0 0; max-width: 560px; color: var(--ink-muted); }
@media (max-width: 1199px) { .cs-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px) {
  .cs-tools { padding: 80px var(--pad-x); }
  .cs-tools__head { margin-bottom: 48px; }
  .cs-tools__group + .cs-tools__group { margin-top: 64px; }
  .cs-tools__ghead { gap: 20px; margin-bottom: 24px; }
  .cs-tools__grid { grid-template-columns: 1fr; }
  .cs-tools__cell { padding: 24px; }
  .cs-tools__example { margin-top: 20px !important; }
  .cs-tools__note { margin-top: 32px; }
}

/* ---------- ContactForm: heading left, a hairline form right; a thank-you takes the form's place when it is sent ---------- */
.cs-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 24px; padding: 120px var(--pad-x); }
.cs-contact--stone { background: var(--bg-stone-soft); }
.cs-contact__head { display: grid; gap: 20px; align-content: start; max-width: 460px; }
.cs-contact__head h2, .cs-contact__head p { margin: 0; }
.cs-contact__details { display: grid; margin: 16px 0 0; }
.cs-contact__details > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.cs-contact__details > div:last-child { border-bottom: 1px solid var(--line); }
.cs-contact__details dt { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--accent-ink); }
.cs-contact__details dd { margin: 0; }
.cs-contact__details a { color: inherit; text-underline-offset: 3px; }
.cs-contact__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 15px; }
.cs-contact__wide { grid-column: 1 / -1; }
.cs-contact__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 4px; }
.cs-contact__foot p { margin: 0; max-width: 380px; }
.cs-contact__foot a { color: inherit; text-underline-offset: 3px; }
.cs-contact__alert { margin: 0; font-size: var(--fs-small); color: var(--danger); }
.cs-contact__done { display: grid; justify-items: start; align-content: start; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line-strong); outline: none; animation: cs-contact-in 700ms var(--cs-ease) both; }
.cs-contact__done h3, .cs-contact__done p { margin: 0; }
.cs-contact__done p { max-width: 420px; }
.cs-contact__check { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-xs); background: var(--accent); color: var(--on-accent); }
.cs-contact__again { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--ink-muted); font: inherit; font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cs-contact__again:hover { color: var(--ink); }
@keyframes cs-contact-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 809px) {
  .cs-contact { grid-template-columns: 1fr; gap: 36px; padding: 80px var(--pad-x); }
  .cs-contact__form { grid-template-columns: 1fr; }
  .cs-contact__foot .cs-btn { width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cs-fgrid--sequence .cs-fgrid__track { height: auto !important; }
  .cs-fgrid--sequence .cs-fgrid__stage { position: static; height: auto; overflow: visible; }
  .cs-marquee__track, .cs-status--live .cs-status__dot { animation: none; }
  .cs-hero__title, .cs-hero__row, .cs-hero__points, .cs-hero__partners { opacity: 1; transition: none; }
  .cs-story__item, .cs-story__desc, .cs-spot__img, .cs-accordion__a, .cs-fcard__media img, .cs-news__media img, .cs-news-tile img { transition: none; }
  .cs-tool__media { transition: none; }
  .cs-tool.is-hover .cs-tool__media { transform: none; }
  .cs-story__pops { display: none; }
  .cs-cta__wrap { transition: none; }
  .cs-stats__row.cs-stats--count::before { transform: none; transition: none; }
  .cs-stats--count .cs-stats__mark { opacity: 1; transform: none; transition: none; }
  .cs-header__sheet, .cs-header__sheet-item, .cs-header__sheet-foot { animation: none; }
  .cs-header__burger i, .cs-header__sheet-panel, .cs-header__sheet-icon { transition: none; }
  .cs-tools__grid::before { transform: none !important; transition: none; }
  .cs-contact__done { animation: none; }
}

/* ---------- SystemMark ---------- */
.cs-smark { --cs-smark: 20px; --cs-smark-k: 1; flex: none; display: inline-grid; place-items: center; width: var(--cs-smark); height: var(--cs-smark); vertical-align: middle; }
.cs-smark img { display: block; width: calc(100% * var(--cs-smark-k)); height: calc(100% * var(--cs-smark-k)); object-fit: contain; }
.cs-smark--chip { border-radius: calc(var(--cs-smark) * 0.27); background: #fff; border: 1px solid rgba(13, 16, 22, 0.08); }
.cs-smark--chip img { width: calc(66% * var(--cs-smark-k)); height: calc(66% * var(--cs-smark-k)); }

/* ---------- Page layout: SectionHead, SplitHero, MediaFrame, InfoList, ConnectorGrid ---------- */
.cs-shead { display: grid; gap: 30px; padding: 120px var(--pad-x) 60px; }
.cs-shead h2, .cs-shead p { margin: 0; }
.cs-shead h2 { max-width: var(--measure-heading, 680px); }
.cs-shead p { max-width: var(--measure-text, 460px); }
.cs-shead--center { justify-items: center; text-align: center; }
.cs-shead--left { justify-items: start; }
@media (max-width: 809px) { .cs-shead { padding: 80px var(--pad-x) 40px; gap: 20px; } }

.cs-splithero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; min-height: min(100svh, 1000px); padding: calc(var(--nav-height, 72px) + 24px) var(--pad-x) 24px; }
.cs-splithero__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 60px; padding: 36px 0 0; }
.cs-splithero__top { display: grid; gap: 30px; }
.cs-splithero__top h1 { margin: 0; }
.cs-splithero__bottom { display: grid; gap: 24px; justify-items: start; max-width: 360px; }
.cs-splithero__bottom p { margin: 0; }
.cs-splithero__media { position: relative; min-height: 520px; overflow: hidden; border-radius: var(--radius-hair); background: var(--bg-stone); }
.cs-splithero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-splithero__overlay { position: absolute; left: 30px; bottom: 30px; right: 30px; display: flex; justify-content: flex-start; }
.cs-splithero--aside .cs-splithero__media { overflow: visible; background: none; display: flex; flex-direction: column; justify-content: flex-end; }
/* tablets: the copy gets 2 fifths below 1200px, and the halves stack below 1024px, so the display title never runs down a narrow column */
@media (max-width: 1199px) { .cs-splithero { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
@media (min-width: 810px) and (max-width: 1023px) {
  .cs-splithero { grid-template-columns: 1fr; min-height: 0; gap: 48px; }
  .cs-splithero__copy { padding: 24px 0 0; gap: 36px; }
  .cs-splithero__top h1 { max-width: 14ch; }
  .cs-splithero__bottom { max-width: 520px; }
  .cs-splithero__media { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 809px) {
  .cs-splithero { grid-template-columns: 1fr; min-height: 0; padding-top: calc(var(--nav-height, 72px) + 24px); }
  .cs-splithero__copy { padding: 0; gap: 30px; }
  .cs-splithero__media { min-height: 0; aspect-ratio: 4 / 5; }
  .cs-splithero__overlay { left: 12px; right: 12px; bottom: 12px; }
}

.cs-mframe { padding: 0 var(--pad-x) 60px; }
.cs-mframe__box { position: relative; overflow: hidden; border-radius: var(--radius-hair); background: var(--bg-stone); aspect-ratio: 16 / 9; }
.cs-mframe__box--21x9 { aspect-ratio: 21 / 9; }
.cs-mframe__box--4x3 { aspect-ratio: 4 / 3; }
.cs-mframe__box > img, .cs-mframe__box > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-mframe__film { position: absolute; right: 24px; bottom: 24px; }
@media (max-width: 809px) { .cs-mframe__box, .cs-mframe__box--21x9 { aspect-ratio: 4 / 5; } .cs-mframe__film { right: 12px; bottom: 12px; } }

.cs-infolist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 24px; padding: 60px var(--pad-x); }
.cs-infolist--divider { background: linear-gradient(var(--line), var(--line)) center bottom / calc(100% - 2 * var(--pad-x)) 1px no-repeat; }
.cs-infolist__head { display: grid; gap: 20px; align-content: start; max-width: 460px; }
.cs-infolist__head h2, .cs-infolist__head p { margin: 0; }
.cs-infolist__items { margin: 0; display: grid; }
.cs-infolist__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 24px; padding: 16px 0 20px; border-top: 1px solid var(--line); }
.cs-infolist__item dt, .cs-infolist__item dd { margin: 0; }
@media (max-width: 809px) { .cs-infolist { grid-template-columns: 1fr; padding: 40px var(--pad-x); } .cs-infolist__item { grid-template-columns: 1fr; gap: 6px; } }

.cs-cgrid { padding: 0 0 120px; background: linear-gradient(180deg, var(--bg-mist) 0%, var(--bg) 100%); }
.cs-cgrid > .cs-shead { padding-top: 120px; }
.cs-cgrid__wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px 40px; max-width: 1180px; margin: 0 auto; padding: 60px var(--pad-x) 0; }
.cs-cgrid__wall > .cs-ctile { width: 136px; }
@media (max-width: 809px) { .cs-cgrid { padding-bottom: 80px; } .cs-cgrid > .cs-shead { padding-top: 80px; } .cs-cgrid__wall { gap: 32px 8px; padding-top: 40px; } .cs-cgrid__wall > .cs-ctile { width: calc((100% - 16px) / 3); } }

/* ---------- Page utilities ---------- */
.cs-grid { display: grid; gap: 32px 24px; padding: 0 var(--pad-x) 120px; }
.cs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-section { padding-top: 120px; }
@media (max-width: 809px) { .cs-grid { padding-bottom: 80px; } .cs-grid--2, .cs-grid--3 { grid-template-columns: 1fr; } .cs-section { padding-top: 80px; } }

/* ---------- ToolSuite: tool cards with a product demo that plays on hover ---------- */
.cs-tsuite { padding: 100px var(--pad-x) 120px; }
.cs-tsuite__head { display: grid; gap: 16px; margin-bottom: 40px; }
.cs-tsuite__title { margin: 0; color: var(--ink); }
.cs-tsuite__intro { margin: 0; max-width: var(--measure-text, 460px); }
.cs-tsuite__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cs-tool { display: block; min-width: 0; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.cs-tool__media { position: relative; aspect-ratio: 3 / 4; transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.cs-tool.is-hover .cs-tool__media { transform: scale(1.02); }
.cs-tool__frame { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; container-type: inline-size; }
.cs-tool__title { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; color: var(--ink); }
.cs-tool__num { flex: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; color: var(--accent); }
.cs-tool__text { margin: 4px 0 0 32px; color: var(--ink-muted); max-width: 30em; }
@media (max-width: 1199px) { .cs-tsuite__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 14px; } }
@media (max-width: 809px) {
  .cs-tsuite { padding: 80px 0; }
  .cs-tsuite__head { padding: 0 var(--pad-x); margin-bottom: 28px; }
  .cs-tsuite__grid { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad-x); padding: 0 var(--pad-x); scrollbar-width: none; }
  .cs-tsuite__grid::-webkit-scrollbar { display: none; }
  .cs-tool { flex: 0 0 min(84%, 360px); scroll-snap-align: start; }
}

/* the demo is drawn on a 300 x 400 grid: 1u = 1/300 of the frame width */
.cs-td { position: absolute; inset: 0; --u: calc(100cqw / 300); font-family: var(--font-sans); color: #0d1016; line-height: 1.3; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; pointer-events: none; user-select: none; }
@supports not (width: 1cqw) { .cs-td { --u: 1.1px; } }
.cs-td__ic { display: block; width: 100%; height: 100%; }
.cs-td__cursor { position: absolute; left: 0; top: 0; z-index: 6; width: calc(10.5 * var(--u)); height: calc(15 * var(--u)); opacity: 0; transition: transform 820ms cubic-bezier(0.45, 0, 0.2, 1), opacity 260ms ease; }
.cs-td__cursor.is-on { opacity: 1; }
.cs-td__cursor svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 12% 8%; transition: transform 140ms ease; filter: drop-shadow(0 calc(0.8 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, 0.3)); }
.cs-td__cursor path { fill: #0d1016; stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; }
.cs-td__cursor.is-down svg { transform: scale(0.84); }
.cs-td__num { flex: none; display: inline-grid; place-items: center; width: calc(8.4 * var(--u)); height: calc(8.4 * var(--u)); margin-right: calc(4 * var(--u)); border-radius: 50%; background: #0d1016; color: #fff; font-size: calc(5.2 * var(--u)); line-height: 1; }
.cs-td__poptitle { display: flex; align-items: center; margin: 0; font-size: calc(8 * var(--u)); letter-spacing: -0.01em; color: #0d1016; white-space: nowrap; }
.cs-td__x { flex: none; margin-left: auto; width: calc(7 * var(--u)); height: calc(7 * var(--u)); color: #343434; }
.cs-td__btn { display: inline-flex; align-items: center; height: calc(13 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: calc(3.4 * var(--u)); border: calc(0.6 * var(--u)) solid #cfcfca; background: #fff; color: #0d1016; font-size: calc(6.4 * var(--u)); white-space: nowrap; transition: transform 140ms ease, background-color 140ms ease; }
.cs-td__btn--solid { background: #0d1016; border-color: #0d1016; color: #fff; }
.cs-td__corner { position: absolute; left: calc(14 * var(--u)); top: calc(362 * var(--u)); width: calc(22 * var(--u) * var(--k, 1)); height: calc(22 * var(--u) * var(--k, 1)); object-fit: contain; }

/* 1. approve */
.cs-td-ap__stage { position: absolute; inset: 0; transform-origin: calc(63 * var(--u)) calc(180 * var(--u)); transition: transform 900ms var(--cs-ease), filter 420ms ease; }
.cs-td-ap.is-zoom .cs-td-ap__stage { transform: scale(2.05); }
.cs-td-ap.is-pop .cs-td-ap__stage { filter: blur(calc(2.4 * var(--u))); }
.cs-td-ap__ghost { position: absolute; left: calc(41 * var(--u)); top: calc(66 * var(--u)); width: calc(218 * var(--u)); height: calc(14 * var(--u)); border-radius: calc(1.5 * var(--u)); background: rgba(255, 255, 255, 0.5); }
.cs-td-ap__sheet { position: absolute; left: calc(41 * var(--u)); top: calc(76 * var(--u)); width: calc(218 * var(--u)); height: calc(252 * var(--u)); border-radius: calc(1.5 * var(--u)) calc(1.5 * var(--u)) 0 0; background: #fff; -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 50%, transparent 100%); }
.cs-td-ap__title { position: absolute; left: calc(22 * var(--u)); top: calc(20 * var(--u)); font-size: calc(9 * var(--u)); letter-spacing: -0.01em; color: #2b2b28; white-space: nowrap; }
.cs-td-ap__meta { position: absolute; left: calc(22 * var(--u)); top: calc(33.5 * var(--u)); font-size: calc(5.4 * var(--u)); color: #8f8d8a; white-space: nowrap; }
.cs-td-ap__bar { position: absolute; height: calc(1.7 * var(--u)); border-radius: 99px; background: #dcdcd7; transition: background-color 500ms ease; }
.cs-td-ap__bar.is-strong { background: #c8c8c2; }
.cs-td-ap__bar.is-rule { height: calc(0.5 * var(--u)); background: #d2d2cc; }
.cs-td-ap.is-done .cs-td-ap__bar.is-mark { background: #55554f; }
.cs-td-ap__dot { position: absolute; width: calc(1.8 * var(--u)); height: calc(1.8 * var(--u)); border-radius: 50%; background: #c8c8c2; }
.cs-td-ap__band { position: absolute; left: calc(27 * var(--u)); width: calc(172 * var(--u)); height: calc(5.6 * var(--u)); border-radius: calc(0.8 * var(--u)); background: rgba(56, 120, 230, 0.26); opacity: 0; transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1), opacity 260ms ease; }
.cs-td-ap__band--2 { width: calc(152 * var(--u)); }
.cs-td-ap.is-sel .cs-td-ap__band { opacity: 1; transform: none; }
.cs-td-ap.is-sel .cs-td-ap__band--2 { transition-delay: 240ms; }
.cs-td-ap__chip { position: absolute; right: calc(20 * var(--u)); top: calc(19 * var(--u)); display: inline-flex; align-items: center; gap: calc(2.4 * var(--u)); height: calc(11 * var(--u)); padding: 0 calc(5.5 * var(--u)) 0 calc(4.5 * var(--u)); border-radius: 99px; background: #e3f1e8; color: #1d6b45; font-size: calc(5.8 * var(--u)); white-space: nowrap; opacity: 0; transform: translateY(calc(2 * var(--u))); transition: opacity 380ms ease, transform 520ms var(--cs-ease); }
.cs-td-ap__chip .cs-td__ic { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }
.cs-td-ap.is-done .cs-td-ap__chip { opacity: 1; transform: none; }
.cs-td-ap__pop { position: absolute; z-index: 2; left: calc(26 * var(--u)); top: calc(210 * var(--u)); width: calc(248 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u)); border-radius: calc(5 * var(--u)); background: #fff; box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(13, 16, 22, 0.16), 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(13, 16, 22, 0.06); opacity: 0; transform: translateY(calc(6 * var(--u))) scale(0.97); filter: blur(calc(1.5 * var(--u))); transition: opacity 300ms ease, transform 520ms var(--cs-ease), filter 300ms ease; }
.cs-td-ap.is-pop .cs-td-ap__pop { opacity: 1; transform: none; filter: none; }
.cs-td-ap__text { margin: calc(6 * var(--u)) 0 0; font-size: calc(7 * var(--u)); line-height: 1.35; color: #343434; }
.cs-td-ap__kv { display: grid; grid-template-columns: calc(40 * var(--u)) 1fr; gap: calc(2.5 * var(--u)) calc(6 * var(--u)); margin: calc(7 * var(--u)) 0 0; padding-top: calc(6 * var(--u)); border-top: calc(0.5 * var(--u)) solid #e6e6e2; font-size: calc(6.2 * var(--u)); }
.cs-td-ap__kv dt { color: #8f8d8a; }
.cs-td-ap__kv dd { margin: 0; color: #343434; }
.cs-td-ap__acts { display: flex; justify-content: flex-end; gap: calc(4 * var(--u)); margin: calc(9 * var(--u)) 0 0; }
.cs-td-ap.is-press .cs-td__btn--solid { transform: scale(0.95); background: #3a3a37; }

/* 2. table */
.cs-td-tb__card { position: absolute; left: calc(62 * var(--u)); top: calc(144 * var(--u)); width: calc(176 * var(--u)); height: calc(112 * var(--u)); overflow: hidden; border-radius: calc(5 * var(--u)); background: rgba(255, 255, 255, 0.26); box-shadow: inset 0 0 0 calc(0.6 * var(--u)) rgba(255, 255, 255, 0.34); transition: top 800ms var(--cs-ease), left 800ms var(--cs-ease), width 800ms var(--cs-ease), height 800ms var(--cs-ease); }
.cs-td-tb.is-s1 .cs-td-tb__card { top: calc(134 * var(--u)); height: calc(131 * var(--u)); }
.cs-td-tb.is-s2 .cs-td-tb__card { top: calc(100 * var(--u)); height: calc(200 * var(--u)); }
.cs-td-tb.is-wide .cs-td-tb__card { left: calc(30 * var(--u)); width: calc(240 * var(--u)); }
.cs-td-tb__head { position: absolute; left: calc(9 * var(--u)); top: calc(9 * var(--u)); font-size: calc(6.8 * var(--u)); color: #0d1016; white-space: nowrap; transition: opacity 360ms ease; }
.cs-td-tb__head--2 { left: calc(127 * var(--u)); opacity: 0; }
.cs-td-tb.is-wide .cs-td-tb__head--2 { opacity: 1; transition-delay: 260ms; }
.cs-td-tb__plus { position: absolute; right: calc(5 * var(--u)); top: calc(6 * var(--u)); width: calc(11 * var(--u)); height: calc(11 * var(--u)); padding: calc(2.6 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, 0.72); color: #0d1016; opacity: 0; transform: scale(0.8); transition: opacity 240ms ease, transform 240ms ease, background-color 140ms ease; }
.cs-td-tb.is-plus .cs-td-tb__plus { opacity: 1; transform: none; }
.cs-td-tb.is-plusdown .cs-td-tb__plus { transform: scale(0.86); background: #fff; }
.cs-td-tb__row { position: absolute; left: calc(8 * var(--u)); width: calc(160 * var(--u)); height: calc(15 * var(--u)); display: flex; align-items: center; gap: calc(3.6 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: rgba(255, 255, 255, 0.42); transition: width 800ms var(--cs-ease), opacity 360ms ease, transform 520ms var(--cs-ease); }
.cs-td-tb.is-wide .cs-td-tb__row { width: calc(108 * var(--u)); }
.cs-td-tb__row[data-r="4"], .cs-td-tb__row[data-r="5"], .cs-td-tb__row[data-r="6"], .cs-td-tb__row[data-r="7"] { opacity: 0; transform: translateY(calc(-3 * var(--u))); }
.cs-td-tb.is-s1 .cs-td-tb__row[data-r="4"], .cs-td-tb.is-s2 .cs-td-tb__row[data-r] { opacity: 1; transform: none; }
.cs-td-tb__mark { flex: none; width: calc(7.5 * var(--u) * var(--k, 1)); height: calc(7.5 * var(--u) * var(--k, 1)); object-fit: contain; }
.cs-td-tb__name { font-size: calc(5.8 * var(--u)); color: #1c1c1a; white-space: nowrap; overflow: hidden; transition: opacity 340ms ease; }
.cs-td-tb__bar { position: absolute; left: calc(16.5 * var(--u)); top: 50%; height: calc(1.8 * var(--u)); margin-top: calc(-0.9 * var(--u)); border-radius: 99px; background: rgba(13, 16, 22, 0.26); opacity: 0; transition: opacity 340ms ease; }
.cs-td-tb.is-bars .cs-td-tb__name { opacity: 0; }
.cs-td-tb.is-bars .cs-td-tb__bar { opacity: 1; }
.cs-td-tb__cell { position: absolute; left: calc(124 * var(--u)); width: calc(108 * var(--u)); height: calc(15 * var(--u)); display: flex; align-items: center; padding: 0 calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: rgba(255, 255, 255, 0.42); opacity: 0; transform: translateX(calc(-4 * var(--u))); transition: opacity 340ms ease, transform 520ms var(--cs-ease); }
.cs-td-tb.is-wide .cs-td-tb__cell { opacity: 1; transform: none; transition-delay: var(--d0, 0ms); }
.cs-td-tb__load { position: absolute; left: calc(6 * var(--u)); right: calc(10 * var(--u)); top: 50%; height: calc(1.8 * var(--u)); margin-top: calc(-0.9 * var(--u)); border-radius: 99px; background: linear-gradient(90deg, rgba(13, 16, 22, 0.1) 0%, rgba(13, 16, 22, 0.32) 45%, rgba(13, 16, 22, 0.1) 90%) 0 0 / 250% 100%; transition: opacity 300ms ease; }
.cs-td-tb.is-wide .cs-td-tb__load { animation: cs-td-shimmer 1.1s linear infinite; }
.cs-td-tb.is-vals .cs-td-tb__load { opacity: 0; transition-delay: var(--d, 0ms); }
@keyframes cs-td-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.cs-td-tb__val { font-family: var(--font-mono); font-size: calc(5.8 * var(--u)); letter-spacing: 0; color: #1c1c1a; white-space: nowrap; opacity: 0; transition: opacity 300ms ease; }
.cs-td-tb.is-vals .cs-td-tb__val { opacity: 1; transition-delay: var(--d, 0ms); }
.cs-td-tb__more { position: absolute; left: calc(10 * var(--u)); top: calc(181 * var(--u)); font-size: calc(5.8 * var(--u)); color: rgba(13, 16, 22, 0.5); white-space: nowrap; opacity: 0; transition: opacity 380ms ease; }
.cs-td-tb.is-s2 .cs-td-tb__more { opacity: 1; transition-delay: 240ms; }
.cs-td-tb__popwrap { position: absolute; z-index: 2; left: calc(56 * var(--u)); width: calc(206 * var(--u)); filter: drop-shadow(0 calc(6 * var(--u)) calc(9 * var(--u)) rgba(13, 16, 22, 0.2)); }
.cs-td-tb__pop { padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(11 * var(--u)) calc(11 * var(--u)); border-radius: calc(4.5 * var(--u)); background: #f7f7f5; clip-path: inset(0 0 calc(100% - 15 * var(--u)) calc(98 * var(--u)) round calc(3 * var(--u))); opacity: 0; transition: clip-path 420ms var(--cs-ease), opacity 120ms ease 300ms; }
.cs-td-tb.is-pop .cs-td-tb__pop { clip-path: inset(0 0 0 0 round calc(4.5 * var(--u))); opacity: 1; transition: clip-path 540ms var(--cs-ease), opacity 100ms ease; }
.cs-td-tb__pop > * { opacity: 0; transition: opacity 160ms ease; }
.cs-td-tb.is-pop .cs-td-tb__pop > * { opacity: 1; transition: opacity 280ms ease 260ms; }
.cs-td-tb__src { margin: calc(6 * var(--u)) 0 0; font-size: calc(5.6 * var(--u)); color: #8f8d8a; }
.cs-td-tb__text { margin: calc(2.5 * var(--u)) 0 0; font-size: calc(6.2 * var(--u)); line-height: 1.4; color: #343434; }

/* 3. steps */
.cs-td-st__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cs-td-st__band { position: absolute; left: calc(30 * var(--u)); right: calc(30 * var(--u)); top: calc(244 * var(--u)); height: calc(70 * var(--u)); border-radius: calc(8 * var(--u)); background: #fff; box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(13, 16, 22, 0.16); }
.cs-td-st__bars { position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); top: calc(10 * var(--u)); display: flex; gap: calc(3 * var(--u)); }
.cs-td-st__bars i { flex: 1; height: calc(2 * var(--u)); border-radius: 99px; background: rgba(13, 16, 22, 0.1); overflow: hidden; }
.cs-td-st__bars i::after { content: ''; display: block; height: 100%; background: var(--accent, #535b10); transform: scaleX(0); transform-origin: left center; transition: transform 900ms var(--cs-ease); }
.cs-td-st__bars i.is-on::after { transform: none; }
.cs-td-st__step { position: absolute; left: calc(12 * var(--u)); top: calc(20 * var(--u)); transition: opacity 520ms ease, transform 640ms var(--cs-ease), filter 520ms ease; }
.cs-td-st__step.is-out { opacity: 0; transform: translateY(calc(-5 * var(--u))); filter: blur(calc(2.5 * var(--u))); }
.cs-td-st__step.is-below { opacity: 0; transform: translateY(calc(5 * var(--u))); filter: blur(calc(2.5 * var(--u))); }
.cs-td-st__label { display: block; font-size: calc(6 * var(--u)); color: #8f8d8a; }
.cs-td-st__pill { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(17 * var(--u)); margin-top: calc(5 * var(--u)); padding: 0 calc(8 * var(--u)) 0 0; border-radius: calc(4 * var(--u)); background: transparent; color: #15130f; font-size: calc(6.8 * var(--u)); white-space: nowrap; }
.cs-td-st__mark { flex: none; width: calc(9 * var(--u) * var(--k, 1)); height: calc(9 * var(--u) * var(--k, 1)); object-fit: contain; }
.cs-td-st__icon { flex: none; width: calc(9 * var(--u)); height: calc(9 * var(--u)); padding: calc(1.7 * var(--u)); border-radius: calc(2.2 * var(--u)); background: var(--accent, #535b10); color: #fff; }

/* 4. picker */
.cs-td-pk__label { position: absolute; left: calc(102 * var(--u)); top: calc(142 * var(--u)); font-size: calc(6.6 * var(--u)); color: #24160b; white-space: nowrap; }
.cs-panel--olive .cs-td-pk__label { color: rgba(255, 255, 255, 0.86); }
.cs-panel--olive .cs-td-pk__pill.is-next, .cs-panel--olive .cs-td-pk__pill.is-after { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.74); }
.cs-td-pk__pill { position: absolute; left: calc(100 * var(--u)); top: calc(156 * var(--u)); height: calc(18 * var(--u)); display: inline-flex; align-items: center; gap: calc(3.6 * var(--u)); padding: 0 calc(7 * var(--u)) 0 calc(5.5 * var(--u)); border-radius: calc(5 * var(--u)); background: #fff; color: #0d1016; font-size: calc(6.8 * var(--u)); white-space: nowrap; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(13, 16, 22, 0.14); transition: transform 620ms var(--cs-ease), opacity 460ms ease, background-color 460ms ease, color 460ms ease, box-shadow 460ms ease; }
.cs-td-pk__pill.is-next { transform: translateY(calc(23 * var(--u))); background: rgba(255, 255, 255, 0.34); color: rgba(255, 255, 255, 0.78); box-shadow: none; }
.cs-td-pk__pill.is-after { transform: translateY(calc(40 * var(--u))); background: rgba(255, 255, 255, 0.34); color: rgba(255, 255, 255, 0.78); box-shadow: none; opacity: 0; }
.cs-td-pk__pill.is-gone { transform: translateY(calc(-16 * var(--u))); opacity: 0; }
.cs-td-pk__mark { flex: none; width: calc(9 * var(--u) * var(--k, 1)); height: calc(9 * var(--u) * var(--k, 1)); object-fit: contain; transition: opacity 460ms ease; }
/* the waiting pill keeps the logo in its own colours, only fainter: logos are never recoloured */
.cs-td-pk__pill.is-next .cs-td-pk__mark, .cs-td-pk__pill.is-after .cs-td-pk__mark { opacity: 0.5; }
.cs-td-pk__plus { flex: none; width: 0; height: calc(7 * var(--u)); margin-left: calc(-3.6 * var(--u)); overflow: hidden; opacity: 0; transition: width 300ms var(--cs-ease), margin 300ms var(--cs-ease), opacity 240ms ease; }
.cs-td-pk.is-hover .cs-td-pk__pill.is-primary .cs-td-pk__plus { width: calc(7 * var(--u)); margin-left: calc(2 * var(--u)); opacity: 1; }
.cs-td-pk__panel { position: absolute; z-index: 2; left: calc(84 * var(--u)); top: calc(112 * var(--u)); width: calc(180 * var(--u)); height: calc(128 * var(--u)); filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(13, 16, 22, 0.24)); }
.cs-td-pk__in { position: absolute; inset: 0; border-radius: calc(6 * var(--u)); background: #fbf8f5; clip-path: inset(calc(44 * var(--u)) calc(98 * var(--u)) calc(66 * var(--u)) calc(16 * var(--u)) round calc(5 * var(--u))); opacity: 0; transition: clip-path 420ms var(--cs-ease), opacity 120ms ease 300ms; }
.cs-td-pk.is-open .cs-td-pk__in { clip-path: inset(0 0 0 0 round calc(6 * var(--u))); opacity: 1; transition: clip-path 560ms var(--cs-ease), opacity 100ms ease; }
.cs-td-pk__in > * { opacity: 0; transition: opacity 160ms ease; }
.cs-td-pk.is-open .cs-td-pk__in > * { opacity: 1; transition: opacity 280ms ease 240ms; }
.cs-td-pk__head { position: absolute; left: calc(12 * var(--u)); right: calc(10 * var(--u)); top: calc(10 * var(--u)); display: flex; align-items: center; gap: calc(4 * var(--u)); margin: 0; font-size: calc(7 * var(--u)); color: #0d1016; white-space: nowrap; }
.cs-td-pk__head > span:first-child { flex: 1; }
.cs-td-pk__hmark { flex: none; width: calc(9 * var(--u)); height: calc(9 * var(--u)); object-fit: contain; }
.cs-td-pk__list { position: absolute; left: calc(6 * var(--u)); right: calc(14 * var(--u)); top: calc(28 * var(--u)); margin: 0; padding: 0; list-style: none; }
.cs-td-pk__list li { display: flex; align-items: center; gap: calc(2 * var(--u)); height: calc(14 * var(--u)); padding: 0 calc(6 * var(--u)); border-radius: calc(3 * var(--u)); color: rgba(13, 16, 22, 0.34); font-size: calc(6.8 * var(--u)); white-space: nowrap; transition: background-color 200ms ease, color 200ms ease; }
.cs-td-pk__list li.is-hot { background: rgba(13, 16, 22, 0.06); color: #0d1016; }
.cs-td-pk__meta { align-self: flex-start; margin-top: calc(3.2 * var(--u)); font-family: var(--font-mono); font-size: calc(4.4 * var(--u)); letter-spacing: 0; }
.cs-td-pk__scroll { position: absolute; right: calc(7 * var(--u)); top: calc(30 * var(--u)); width: calc(1.4 * var(--u)); height: calc(40 * var(--u)); border-radius: 99px; background: rgba(13, 16, 22, 0.34); }

/* ---------- LongText: contents in the left third, the text in the rest; on narrower screens the contents fold into a list at the top ---------- */
.cs-longtext { display: grid; grid-template-columns: 33.6% minmax(0, 1fr); padding: 0 var(--pad-x) 120px; }
.cs-longtext__aside { padding-right: 48px; }
.cs-longtext__sticky { position: sticky; top: calc(var(--nav-height, 72px) + 32px); display: grid; gap: 14px; max-height: calc(100svh - var(--nav-height, 72px) - 64px); overflow-y: auto; overscroll-behavior: contain; }
.cs-longtext__label { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--accent-ink); }
.cs-longtext__list { display: grid; margin: 0; padding: 0; list-style: none; }
.cs-longtext__aside .cs-longtext__list { border-left: 1px solid var(--line); }
.cs-longtext__list a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; padding: 6px 0 6px 14px; color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.35; text-decoration: none; transition: color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.cs-longtext__aside .cs-longtext__list a { margin-left: -1px; box-shadow: inset 1px 0 0 transparent; }
.cs-longtext__list a:hover { color: var(--ink); }
.cs-longtext__list a[aria-current] { color: var(--ink); }
.cs-longtext__aside .cs-longtext__list a[aria-current] { box-shadow: inset 1px 0 0 var(--accent-ink); }
.cs-longtext__num { padding-top: 1px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.cs-longtext__list a[aria-current] .cs-longtext__num { color: var(--accent-ink); }
.cs-longtext__meta { display: grid; gap: 4px; padding-top: 4px; color: var(--ink-muted); }
.cs-longtext__meta p { margin: 0; }
.cs-longtext__meta a { color: inherit; text-underline-offset: 3px; }
.cs-longtext__body { min-width: 0; max-width: 720px; }
.cs-longtext__note { display: grid; gap: 6px; margin: 0 0 56px; padding: 16px 18px; border-radius: var(--radius-hair); background: var(--accent-tint); color: var(--ink); }
.cs-longtext__note p { margin: 0; }
.cs-longtext__note a { color: var(--accent-ink); text-underline-offset: 3px; }
.cs-longtext__sec { padding-bottom: 44px; scroll-margin-top: calc(var(--nav-height, 72px) + 24px); }
.cs-longtext__sec + .cs-longtext__sec { padding-top: 44px; border-top: 1px solid var(--line); }
.cs-longtext__title { margin: 0 0 18px; text-wrap: balance; }
.cs-longtext__hnum { margin-right: 10px; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.cs-longtext__prose { color: var(--ink-body); font-size: var(--fs-body); line-height: 1.6; }
.cs-longtext__prose > * { margin: 0 0 16px; }
.cs-longtext__prose > :last-child { margin-bottom: 0; }
.cs-longtext__prose h3 { margin: 28px 0 8px; color: var(--ink); font-size: var(--fs-body); font-weight: 500; line-height: 1.4; }
.cs-longtext__prose > h3:first-child { margin-top: 0; }
.cs-longtext__prose a { color: var(--accent-ink); text-underline-offset: 3px; }
.cs-longtext__prose strong { color: var(--ink); font-weight: 500; }
.cs-longtext__prose ul, .cs-longtext__prose ol { display: grid; gap: 8px; padding: 0; list-style: none; }
.cs-longtext__prose ul > li { position: relative; padding-left: 20px; }
.cs-longtext__prose ul > li::before { content: ''; position: absolute; left: 2px; top: 0.68em; width: 5px; height: 5px; background: var(--accent-ink); }
.cs-longtext__prose ol { counter-reset: cs-lt; }
.cs-longtext__prose ol > li { position: relative; padding-left: 28px; counter-increment: cs-lt; }
.cs-longtext__prose ol > li::before { content: counter(cs-lt) '.'; position: absolute; left: 0; top: 0.18em; color: var(--ink-subtle); font-family: var(--font-mono); font-size: 13px; }
.cs-longtext__prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.4; }
.cs-longtext__prose th { padding: 0 16px 10px 0; border-bottom: 1px solid var(--line-strong); color: var(--ink-muted); font-weight: 400; text-align: left; vertical-align: bottom; }
.cs-longtext__prose td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.cs-longtext__prose th:last-child, .cs-longtext__prose td:last-child { padding-right: 0; }
.cs-longtext__prose dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; }
.cs-longtext__prose dt { color: var(--ink-muted); }
.cs-longtext__prose dd { margin: 0; color: var(--ink); }
.cs-longtext__fold { display: none; }
.cs-longtext__fold summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; color: var(--ink); font-size: var(--fs-body); list-style: none; cursor: pointer; }
.cs-longtext__fold summary::-webkit-details-marker { display: none; }
.cs-longtext__fold summary svg { flex: none; color: var(--ink-muted); transition: transform var(--dur-base) var(--cs-ease); }
.cs-longtext__fold[open] summary svg { transform: rotate(180deg); }
.cs-longtext__fold .cs-longtext__list { padding-bottom: 10px; }
.cs-longtext__fold .cs-longtext__list a { padding: 8px 0; }
.cs-longtext__fold .cs-longtext__meta { padding: 0 0 16px; }
@media (max-width: 1023px) {
  .cs-longtext { grid-template-columns: minmax(0, 1fr); padding-bottom: 80px; }
  .cs-longtext__aside { display: none; }
  .cs-longtext__body { max-width: none; }
  .cs-longtext__fold { display: block; margin: 0 0 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .cs-longtext__note { margin-bottom: 40px; }
}
@media (max-width: 809px) {
  .cs-longtext__sec { padding-bottom: 32px; }
  .cs-longtext__sec + .cs-longtext__sec { padding-top: 32px; }
  .cs-longtext__prose dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cs-longtext__prose dd + dt { margin-top: 10px; }
}

/* ---------- Product cards: ChatCard, ApprovalCard, ConnectionsCard, AccessCard. Light objects from the app, in both themes ---------- */
.cs-pcard { position: relative; width: min(var(--cs-pcard-w, 420px), 100%); overflow: hidden; border-radius: 14px; background: #fff; color: #0d1016; box-shadow: 0 0 0 1px rgba(13, 16, 22, 0.06), 0 40px 80px -36px rgba(13, 16, 22, 0.45); font-family: var(--font-sans); font-size: 13px; line-height: 1.4; text-align: left; }
.cs-pcard p { margin: 0; }
.cs-pcard__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cs-pcard__meta { color: #8f8d8a; font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.cs-pcard__src { display: inline-flex; align-items: center; gap: 8px; color: #343434; }
.cs-pcard__clock { position: absolute; width: 0; height: 0; overflow: hidden; }
.cs-pcard__cursor { position: absolute; z-index: 3; width: 16px; height: 23px; opacity: 0; pointer-events: none; }
.cs-pcard__cursor svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 12% 8%; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.3)); }
.cs-pcard__cursor path { fill: #0d1016; stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; }

.cs-pcard--chat { --cs-pcard-w: 440px; display: grid; gap: 12px; padding: 18px 18px 14px; border-radius: 18px; background: #fbfbfa; }
.cs-pchat__q { justify-self: end; max-width: 82%; padding: 10px 14px; border-radius: 14px; background: #ecebe6; font-size: 13.5px; }
.cs-pchat__used { margin-top: 2px !important; color: #6f6c66; font-size: 12px; }
.cs-pchat__tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.cs-pchat__tool { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 8px; border-radius: 99px; background: #f1f0ec; box-shadow: inset 0 0 0 1px #e3e2dd; color: #343434; font-size: 12px; white-space: nowrap; }
.cs-pchat__answer { position: relative; }
.cs-pchat__a { font-size: 14px; letter-spacing: -0.005em; }
.cs-pchat__dots { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 99px; background: #f1f0ec; opacity: 0; }
.cs-pchat__dots i { width: 5px; height: 5px; border-radius: 50%; background: #8f8d8a; }
.cs-pchat__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.cs-pchat__table th { padding: 0 0 7px; border-bottom: 1px solid #e3e2dd; color: #6f6c66; font-weight: 400; text-align: left; }
.cs-pchat__table td { padding: 8px 0; border-bottom: 1px solid #ecebe6; }
.cs-pchat__table th + th, .cs-pchat__table td + td { padding-left: 12px; text-align: right; }
.cs-pchat__table tr:last-child td { border-bottom: 0; }
.cs-pchat__input { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-top: 2px; padding: 0 5px 0 14px; border-radius: 99px; background: #f1f0ec; box-shadow: inset 0 0 0 1px #e3e2dd; color: #8f8d8a; font-size: 13px; }
.cs-pchat__send { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #0d1016; color: #fff; }
.cs-pchat__send svg { transform: rotate(-90deg); }

.cs-pappr__bar, .cs-paccess__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px 11px 16px; border-bottom: 1px solid #ecece8; }
.cs-pappr__state { display: inline-grid; font-size: 12px; white-space: nowrap; }
.cs-pappr__state > span { grid-area: 1 / 1; justify-self: end; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 99px; }
.cs-pappr__wait { background: #eff2e2; color: #535b10; }
.cs-pappr__wait::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #535b10; }
.cs-pappr__done { background: #e3f1e8; color: #1d6b45; opacity: 0; }
.cs-pappr__body { padding: 16px 16px 2px; }
.cs-pappr__kicker { color: #8f8d8a; font-family: var(--font-mono); font-size: 11px; }
.cs-pappr__title { margin-top: 6px !important; font-size: 18px; letter-spacing: -0.01em; }
.cs-pappr__kv { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; margin: 14px 0 0; padding: 12px 0; border-top: 1px solid #ecece8; }
.cs-pappr__kv dt { color: #5f5c55; }
.cs-pappr__kv dd { margin: 0; }
.cs-pappr__acts { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid #ecece8; background: #f7f7f5; }
.cs-pappr__ghost, .cs-pappr__solid { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 6px; white-space: nowrap; }
.cs-pappr__ghost { background: #fff; box-shadow: inset 0 0 0 1px #dcdcd6; }
.cs-pappr__solid { background: #535b10; color: #fff; }
.cs-pcard--approve .cs-pcard__cursor { right: 30px; bottom: 4px; }

.cs-pcard--conn { --cs-pcard-w: 440px; }
.cs-pconn__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 16px; border-bottom: 1px solid #ecece8; font-size: 14px; }
.cs-pconn__list, .cs-paccess__list { margin: 0; padding: 4px 0; list-style: none; }
.cs-pconn__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 14px 9px 16px; }
.cs-pconn__list li + li, .cs-paccess__list li + li { border-top: 1px solid #f1f1ee; }
.cs-pconn__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-pconn__status { display: inline-grid; font-size: 12px; white-space: nowrap; }
.cs-pconn__status > span { grid-area: 1 / 1; justify-self: end; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 99px; }
.cs-pconn__ok { background: #e3f1e8; color: #1d6b45; }
.cs-pconn__ok::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #1d6b45; }
.cs-pconn__busy { background: #f1f0ec; color: #5f5c55; opacity: 0; }
.cs-pconn__busy::before { content: ''; width: 8px; height: 8px; box-sizing: border-box; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; }

.cs-pcard--access { --cs-pcard-w: 400px; }
.cs-paccess__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px 9px 16px; }
.cs-paccess__who { display: inline-flex; align-items: center; gap: 10px; }
.cs-paccess__avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ecebe6; color: #5f5c55; font-size: 11px; font-weight: 500; }
.cs-paccess__level { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; background: #f1f0ec; color: #5f5c55; font-size: 12px; white-space: nowrap; }
.cs-paccess__level.is-full { background: #eff2e2; color: #535b10; }
@media (max-width: 480px) { .cs-pconn__list .cs-pcard__meta { display: none; } .cs-pcard--chat { padding: 14px 14px 12px; gap: 10px; } .cs-pchat__a { font-size: 13.5px; } }

/* played: the card builds itself up once and ends where it started. Every card has a clock that says when it is done */
@keyframes cs-pcard-clock { from { opacity: 0; } to { opacity: 0; } }
@keyframes cs-pc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cs-pc-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes cs-pc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-pc-dots { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cs-pc-bounce { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes cs-pc-spin { to { transform: rotate(360deg); } }
.is-playing .cs-pcard__clock { animation: cs-pcard-clock 3400ms linear both; }

.is-playing .cs-pchat__q { animation: cs-pc-in 420ms var(--cs-ease) 120ms both; }
.is-playing .cs-pchat__used { animation: cs-pc-fade 300ms ease 620ms both; }
.is-playing .cs-pchat__tool { animation: cs-pc-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(760ms + var(--i, 0) * 140ms) both; }
.is-playing .cs-pchat__dots { animation: cs-pc-dots 820ms ease 1180ms both; }
.is-playing .cs-pchat__dots i { animation: cs-pc-bounce 700ms ease-in-out infinite; }
.is-playing .cs-pchat__dots i:nth-child(2) { animation-delay: 120ms; }
.is-playing .cs-pchat__dots i:nth-child(3) { animation-delay: 240ms; }
.is-playing .cs-pchat__a { animation: cs-pc-in 520ms var(--cs-ease) 1950ms both; }
.is-playing .cs-pchat__table thead { animation: cs-pc-fade 300ms ease 2350ms both; }
.is-playing .cs-pchat__table tbody tr { animation: cs-pc-in 380ms var(--cs-ease) calc(2450ms + var(--i, 0) * 150ms) both; }

.is-playing .cs-pcard--approve .cs-pcard__clock { animation-duration: 3800ms; }
.is-playing .cs-pcard--approve .cs-pcard__cursor { animation: cs-pappr-cursor 3800ms both; }
.is-playing .cs-pcard--approve .cs-pcard__cursor svg { animation: cs-pappr-click 3800ms both; }
.is-playing .cs-pappr__solid { animation: cs-pappr-press 3800ms both; }
.is-playing .cs-pappr__wait { animation: cs-pappr-wait 3800ms both; }
.is-playing .cs-pappr__done { animation: cs-pappr-done 3800ms both; }
@keyframes cs-pappr-cursor {
  0% { opacity: 0; transform: translate(80px, 70px); }
  8% { opacity: 1; transform: translate(80px, 70px); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  30%, 58% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  72%, 100% { opacity: 0; transform: translate(50px, 60px); }
}
@keyframes cs-pappr-click { 0%, 31% { transform: none; } 33% { transform: scale(0.84); } 37%, 100% { transform: none; } }
@keyframes cs-pappr-press { 0%, 31% { transform: none; filter: none; } 33% { transform: scale(0.96); filter: brightness(0.82); } 38%, 100% { transform: none; filter: none; } }
@keyframes cs-pappr-wait { 0%, 35% { opacity: 1; } 39%, 84% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes cs-pappr-done { 0%, 35% { opacity: 0; transform: scale(0.92); } 40%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }

.is-playing .cs-pcard--conn .cs-pcard__clock { animation-duration: 3300ms; }
.is-playing .cs-pconn__list li { animation: cs-pc-in 380ms var(--cs-ease) calc(150ms + var(--i, 0) * 130ms) both; }
.is-playing .cs-pconn__list li.is-new { animation: cs-pc-in 420ms var(--cs-ease) 1250ms both; }
.is-playing .cs-pconn__list li.is-new .cs-pconn__busy { animation: cs-pconn-busy 3300ms both; }
.is-playing .cs-pconn__list li.is-new .cs-pconn__busy::before { animation: cs-pc-spin 700ms linear infinite; }
.is-playing .cs-pconn__list li.is-new .cs-pconn__ok { animation: cs-pconn-ok 3300ms both; }
@keyframes cs-pconn-busy { 0%, 70% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes cs-pconn-ok { 0%, 71% { opacity: 0; transform: scale(0.9); } 78%, 100% { opacity: 1; transform: none; } }

.is-playing .cs-pcard--access .cs-pcard__clock { animation-duration: 2600ms; }
.is-playing .cs-paccess__list li { animation: cs-pc-in 380ms var(--cs-ease) calc(150ms + var(--i, 0) * 120ms) both; }
.is-playing .cs-paccess__level { animation: cs-pc-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(900ms + var(--i, 0) * 120ms) both; }
@media (prefers-reduced-motion: reduce) { .is-playing .cs-pcard, .is-playing .cs-pcard * { animation: none !important; } }

/* ===== panels.css ===== */
/* Temaets egne produktoejeblikke: de lyse kort, der ligger paa en flade eller
   et foto paa loesningssiderne — en samtale, et skrivende kald der venter paa
   et ja, og en brugerliste med adgangsniveauer.
 *
 * Reglerne de foelger, og hvorfor de ikke er i designsystemet:
 *
 *  1. De er app'ens flade, ikke sitets. Kortene er LYSE i baade lyst og moerkt
 *     tema, fordi produktet er lyst. Derfor staar farverne som hex og ikke som
 *     tokens: et token ville vende med [data-theme="dark"] og goere kortet
 *     moerkt, og saa ville illustrationen ikke laengere vise produktet.
 *  2. De tegner en brugerflade og er derfor role="img" med en aria-label, der
 *     siger hvad man ser. Indholdet er pyntet tekst for en skaermlaeser.
 *  3. Praefikset er `site-` og ikke `cs-`, fordi reglerne kommer ordret fra
 *     prototypens design/site-src/site.css. Samme navne goer det muligt at
 *     sammenligne de to direkte, naar designet aendrer sig.
 *
 * Komponenterne ligger i components/panels/ProductPanels.tsx, indholdet i
 * components/panels/presets.tsx. Rediger denne fil i takt med prototypens
 * site.css, ikke paa egen haand. */

.site-approve { width: min(420px, 100%); margin-left: auto; overflow: hidden; border-radius: 14px; color: var(--ink-fixed); background: #fff; box-shadow: 0 0 0 1px rgba(13, 16, 22, 0.06), 0 40px 80px -32px rgba(0, 0, 0, 0.6); font-size: 13px; line-height: 1.4; }
.site-approve p { margin: 0; }
.site-approve__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px 11px 16px; border-bottom: 1px solid #ecece8; }
.site-approve__src { display: inline-flex; align-items: center; gap: 8px; color: #343434; }
.site-approve__state { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 99px; background: #eff2e2; color: #535b10; font-size: 12px; white-space: nowrap; }
.site-approve__state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #535b10; }
.site-approve__body { padding: 16px 16px 2px; }
.site-approve__kicker { font-family: var(--font-mono); font-size: 11px; color: #8f8d8a; }
.site-approve__title { margin-top: 6px !important; font-size: 18px; letter-spacing: -0.01em; }
.site-approve__kv { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; margin: 14px 0 0; padding: 12px 0; border-top: 1px solid #ecece8; }
.site-approve__kv dt { color: #5f5c55; }
.site-approve__kv dd { margin: 0; }
.site-approve__acts { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid #ecece8; background: #f7f7f5; }
.site-approve__ghost, .site-approve__solid { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 6px; }
.site-approve__ghost { background: #fff; box-shadow: inset 0 0 0 1px #dcdcd6; }
.site-approve__solid { background: #535b10; color: #fff; }
.site-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cs-split__node .site-approve { margin: 0; }
.site-chat { display: grid; gap: 12px; width: min(440px, 100%); padding: 18px 18px 14px; border-radius: 18px; background: #fbfbfa; color: #0d1016; box-shadow: 0 0 0 1px rgba(13, 16, 22, 0.06), 0 40px 80px -36px rgba(13, 16, 22, 0.45); font-size: 13px; line-height: 1.45; text-align: left; }
.site-chat p { margin: 0; }
.site-chat__q { justify-self: end; max-width: 82%; padding: 10px 14px; border-radius: 14px; background: #ecebe6; font-size: 13.5px; }
.site-chat__used { margin-top: 2px !important; color: #6f6c66; font-size: 12px; }
.site-chat__tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.site-chat__tool { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 8px; border-radius: 99px; background: #f1f0ec; box-shadow: inset 0 0 0 1px #e3e2dd; color: #343434; font-size: 12px; white-space: nowrap; }
.site-chat__a { font-size: 14px; letter-spacing: -0.005em; }
.site-chat__table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.site-chat__table th { padding: 0 0 7px; border-bottom: 1px solid #e3e2dd; color: #6f6c66; font-weight: 400; text-align: left; }
.site-chat__table td { padding: 8px 0; border-bottom: 1px solid #ecebe6; }
.site-chat__table th + th, .site-chat__table td + td { padding-left: 12px; text-align: right; }
.site-chat__table tr:last-child td { border-bottom: 0; }
.site-chat__input { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-top: 2px; padding: 0 5px 0 14px; border-radius: 99px; background: #f1f0ec; box-shadow: inset 0 0 0 1px #e3e2dd; color: #8f8d8a; font-size: 13px; }
.site-chat__send { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #0d1016; color: #fff; }
.site-chat__send svg { transform: rotate(-90deg); }
.site-access { width: min(400px, 100%); overflow: hidden; border-radius: 14px; background: #fff; color: #0d1016; box-shadow: 0 0 0 1px rgba(13, 16, 22, 0.06), 0 40px 80px -36px rgba(13, 16, 22, 0.45); font-size: 13px; line-height: 1.4; text-align: left; }
.site-access__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px 11px 16px; border-bottom: 1px solid #ecece8; }
.site-access__count { color: #8f8d8a; font-family: var(--font-mono); font-size: 11px; }
.site-access__list { margin: 0; padding: 4px 0; list-style: none; }
.site-access__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px 9px 16px; }
.site-access__list li + li { border-top: 1px solid #f1f1ee; }
.site-access__who { display: inline-flex; align-items: center; gap: 10px; }
.site-access__avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ecebe6; color: #5f5c55; font-size: 11px; font-weight: 500; }
.site-access__role { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; background: #f1f0ec; color: #5f5c55; font-size: 12px; white-space: nowrap; }
.site-access__role.is-full { background: #eff2e2; color: #535b10; }
.site-ph { padding: 12px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-hair); color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.5; }

/* Mobil: samtalekortet har mindre luft, saa tabellen stadig kan staa i bredden. */
@media (max-width: 809px) {
  .site-chat { padding: 14px 14px 12px; gap: 10px; }
  .site-chat__a { font-size: 13.5px; }
}

/* ---------------------------------------------------------------------------
   Integrationsbaandet over sidetoppen paa connector-siderne: systemets maerke,
   en stiplet streg og de 5 AI-maerker. Ved indlaesning tegner stregen sig selv,
   og maerkerne kommer ind ét ad gangen.

   Ordret fra prototypens site.css (.site-integration). Modulet er
   components/modules/IntegrationBand. Det eneste nye er naboreglen nederst:
   i prototypen staar .cs-pagehead lige efter baandet, men i HubSpot ligger de
   i hver sin dnd-raekke, saa naboskabet maales paa raekkerne.
   --------------------------------------------------------------------------- */
.site-integration { --mk: 72px; display: flex; justify-content: center; align-items: center; gap: 16px; padding: calc(var(--nav-height, 72px) + 96px) var(--pad-x) 0; }
.site-integration .cs-smark { --cs-smark: var(--mk) !important; }
.site-integration__ai { display: flex; gap: 10px; }
.site-integration__mark { display: inline-flex; animation: site-pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(150ms + var(--i, 0) * 90ms); }
.site-integration__link { flex: none; width: 64px; height: 1px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); animation: site-draw 700ms var(--ease-glide) 150ms both; }
@keyframes site-pop { from { opacity: 0; transform: translateY(8px) scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes site-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.site-integration + .cs-pagehead,
.dnd-row:has(.site-integration) + .dnd-row .cs-pagehead { padding-top: 40px; }

@media (max-width: 809px) {
  .site-integration { --mk: 44px; padding-top: calc(var(--nav-height, 72px) + 48px); gap: 10px; }
  .site-integration__ai { gap: 6px; }
  .site-integration__link { width: 24px; }
}
@media (max-width: 369px) { .site-integration { --mk: 38px; gap: 8px; } .site-integration__ai { gap: 5px; } .site-integration__link { width: 14px; } }
@media (prefers-reduced-motion: reduce) { .site-integration__mark, .site-integration__link { animation: none; } }

/* ===== hubspot-fixes.css ===== */
/* Rettelser der kun er noedvendige inde i HubSpot. Hoerer ikke i designsystemet.

   HubSpot pakker hvert modul ind i flere lag:
     .dnd-section > .row-fluid-wrapper > .row-fluid > .span12 > .cell-wrapper
     og dertil <div data-hs-cos-type="module"> om hvert modul.
   Lagene har egen padding og max-width, som braekker fuldbredde-sektioner. */

/* Fuldbredde-sektioner skal kunne naa ud til kanten gennem dnd-kaeden. */
.dnd-section > .row-fluid-wrapper > .row-fluid,
.dnd-section > .row-fluid-wrapper {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Vandret overloeb maa klippes, ikke scrolles. clip bevarer sticky i modsaetning
   til hidden, som goer naermeste scroll-container til et nyt sticky-rod. */
body {
  overflow-x: clip;
}

/* Modulwrapperen maa ikke bryde grid- eller flow-layout i sektionerne. */
[data-hs-cos-type="module"] {
  display: contents;
}


/* ---------- Accordion paa native <details> ----------

   Designsystemets Accordion (ds/Lists.tsx) folder med useState. Temaet bruger
   i stedet gaflen i components/ds-fork/AccordionNative.tsx, som folder med
   <details> og <summary>, saa modulet servergengives uden klient-JS.

   Markuppen og klassenavnene er de samme, saa bundle.css passer. Det eneste
   bundle.css ikke kan vide er, at tilstanden nu hedder [open] og ikke
   .is-open, og at <summary> har sin egen UA-styling. De fem ting staar her.
   Alt herunder er maalt i Chromium 154 paa den faktiske markup.

   Hver selektor er bundet til details eller summary med vilje. Bruger nogen
   en dag designsystemets egen Accordion i et island, staar den paa div og
   button og skal blive ved med at folde med .is-open. Uden element-leddet
   ville punkt 4 laase alle dens svar permanent aabne. */

/* 1. .is-open findes ikke paa et <details>. Samme to regler paa [open].
      Uden dem drejer plusset ikke, og svaret folder aldrig ud. */
details.cs-accordion__item[open] .cs-accordion__icon { transform: rotate(45deg); }
details.cs-accordion__item[open] .cs-accordion__a { grid-template-rows: 1fr; }

/* 2. <summary> er display: list-item i UA-arket og tegner en trekant foran
      teksten. bundle.css saetter display: flex paa .cs-accordion__q, hvilket
      fjerner den i Chrome og Firefox; aeldre WebKit har sin egen pseudo. */
summary.cs-accordion__q { list-style: none; }
summary.cs-accordion__q::-webkit-details-marker { display: none; }

/* 3. Fokusringen i bundle.css rammer
      :where(a, button, input, select, textarea, [tabindex]).
      <summary> staar ikke paa listen, selvom den er fokuserbar, saa den ville
      faa browserens egen ring i stedet for temaets. */
summary.cs-accordion__q:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 4. Glidningen ved lukning. Browseren saetter content-visibility: hidden paa
      ::details-content i samme oejeblik [open] forsvinder, saa svaret er
      allerede vaek, foer .cs-accordion__a naar at animere ned. Maalt: aabning
      glider, lukning hopper.

      Loesningen er at flytte selve foldningen op paa ::details-content, som
      altid laegges ud, og lade content-visibility skifte diskret foerst naar
      transitionen er faerdig. .cs-accordion__a staar derfor fast paa 1fr
      herinde og animerer ikke selv.

      Den vej er valgt frem for at tvinge content-visibility: visible: naar
      browseren beholder sit eget skjul, er svaret ude af tilgaengeligheds-
      traeet mens raekken er lukket. Det er bedre end designsystemets egen
      Accordion, som lader alle svar staa i DOM'en bag en 0fr-raekke.

      Uden ::details-content-stoette falder vi tilbage til punkt 1: svaret
      glider op og hopper ned. Intet gaar i stykker. */
@supports selector(::details-content) {
  details.cs-accordion__item > .cs-accordion__a {
    grid-template-rows: 1fr;
    min-block-size: 0;
    transition: none;
  }

  details.cs-accordion__item::details-content {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition-property: grid-template-rows, content-visibility;
    transition-duration: var(--dur-glide);
    transition-timing-function: var(--cs-ease);
    transition-behavior: allow-discrete;
  }

  details.cs-accordion__item[open]::details-content { grid-template-rows: 1fr; }
}

/* 5. bundle.css slaar .cs-accordion__a fra ved reduceret bevaegelse. Naar
      foldningen er flyttet til ::details-content, skal den slaas fra samme
      sted, ellers glider svaret stadig. */
@media (prefers-reduced-motion: reduce) {
  details.cs-accordion__item::details-content { transition: none; }
}

/* ---------------------------------------------------------------------------
   LCP: heroens overskrift maa ikke vente paa hydrering.

   Maalt med Lighthouse (mobil): LCP var 8,3 s og score 2/100. LCP-elementet er
   h1.cs-hero__title inde i hero-oeen. Designsystemet skjuler den med
   opacity: 0 og taender den foerst naar React har hydreret og sat .is-ready
   (Hero.tsx: useEffect + 80 ms timeout). Elementet kan derfor ikke males foer
   hele React-bundlen er hentet og koert — og paa consile.dk ligger der 475 KB
   Google-sporing foran i koen om hovedtraaden.

   Loesningen driver praecis samme koreografi fra CSS i stedet: rækken toner ind
   efter 120 ms, overskriften efter 320 ms, som Bevaegelse.md foreskriver. Det
   sker ved foerste paint, uden JavaScript. .is-ready beholdes, saa den
   hydrerede komponent stadig er konsistent.

   Boer opstroems i designsystemet. Indtil da ligger det her, fordi et modul
   ikke maa skrive CSS, og ds/ overskrives af sync-scriptet.
   --------------------------------------------------------------------------- */
@keyframes cs-hero-ind { to { opacity: 1; } }

.cs-hero__title,
.cs-hero__row {
  animation: cs-hero-ind var(--dur-slow) var(--ease-fade) forwards;
}
.cs-hero__row   { animation-delay: 120ms; }
.cs-hero__title { animation-delay: 320ms; }

/* Hydreret tilstand vinder, saa der ikke kan opstaa en halvtonet titel hvis
   animationen og klassen skulle naa hinanden paa tvaers. */
.cs-hero.is-ready .cs-hero__title,
.cs-hero.is-ready .cs-hero__row { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cs-hero__title,
  .cs-hero__row { animation: none; opacity: 1; }
}


/* ===========================================================================
   TILGÆNGELIGHED
   Maalt med Lighthouse 13.5.0 (mobil) paa forsiden 6. oktober 2026.
   Alle tre rettelser hoerer opstroems i designsystemet; de ligger her, fordi
   ds/ overskrives af tools/sync-ds.mjs.
   =========================================================================== */

/* Spring til indhold. Usynlig indtil den faar tastaturfokus, og saa en
   almindelig knap oeverst til venstre. Den maa ikke bruge display: none eller
   visibility: hidden — saa kan den ikke naas med tabulator. Teknikken er
   HubSpots egen .screen-reader-text, her med et synligt fokustrin.
   HubSpot: "Add a skip to content link". */
.cs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-button) 0;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-size: 16px;
  text-decoration: none;
}
.cs-skip:focus {
  left: 0;
  outline: 2px solid var(--focus);
  outline-offset: -4px;
}

/* <main> faar fokus naar springet bruges, men skal ikke tegne en ring: den
   ville staa om hele siden. Fokus flyttes, ringen vises paa foerste rigtige
   element bagefter. */
main:focus { outline: none; }

/* --------------------------------------------------------------------------
   Kontrast: --ink-subtle var under AA.

   Maalt: #8f8d8a paa #fafaf9 giver 3,16:1. WCAG 2.2 AA kraever 4,5:1 for
   broedtekst. Lighthouse fangede det fem steder i SpotlightCarousel (de
   inaktive faner og taellingen), men tokenet bruges fem gange i bundle.css og
   altid som color — saa fejlen er i tokenet, ikke i karrusellen.

   Nye vaerdier, regnet efter WCAG's relative luminans:
     lyst  #636159  5,94:1 paa --bg, 6,20:1 paa --bg-raised, 4,66:1 paa --bg-stone
     moerkt #83868e  4,95:1 paa --bg, 4,62:1 paa --bg-raised og --bg-stone

   Prisen er aerlig: en AA-sikker "subtle" graa kan ikke samtidig vaere tydeligt
   lysere end --ink-muted paa disse flader. Hierarkiet mellem de to toner
   bliver mindre. Det er en designbeslutning, der boer tages opstroems.
   -------------------------------------------------------------------------- */
:root, [data-theme="light"] { --ink-subtle: #636159; }
[data-theme="dark"]        { --ink-subtle: #83868e; }

/* --------------------------------------------------------------------------
   Beroeringsmaal i sidefoden.

   Maalt: linkene er 16 px hoeje med 5 px luft, saa den sikre klikcirkel bliver
   23 px. WCAG 2.2 AA (2.5.8) kraever 24x24 px eller tilsvarende afstand.
   min-height loefter selve maalet over graensen, saa afstandsundtagelsen ikke
   skal bruges. inline-flex frem for flex, saa bredden stadig hugger teksten
   og foden ser ud som foer.
   -------------------------------------------------------------------------- */
.cs-footer__col ul a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* --------------------------------------------------------------------------
   Kontrast i ToolSuites demoer.

   De fire demoer tegner en lille brugerflade i ren CSS, og mikroskriften i den
   staar hardkodet som #8f8d8a paa hvidt: 3,3:1. Lighthouse fangede to af dem
   paa /revisorer (cs-td-ap__meta og cs-td-st__label ved 5,7 og 6,4 px).

   Man kan godt argumentere for at WCAG 1.4.3 undtager "incidental" tekst, der
   er en del af et billede — og rammen er allerede aria-hidden. Men axe kan
   ikke vide det, og #6f6d6a giver 5,1:1 uden at aendre indtrykket af
   illustrationen. Mikroskriften bliver samtidig en anelse mere laeselig.

   #8f8d8a staar praecis fire steder i bundle.css, alle fire i demoerne.
   -------------------------------------------------------------------------- */
.cs-td-ap__meta,
.cs-td-ap__kv dt,
.cs-td-tb__src,
.cs-td-st__label { color: #6f6d6a; }

/* ---------------------------------------------------------------------------
   Flere moduler side om side i en dnd-række.

   HubSpot tegner en række med flere moduler som
     .dnd-row > .row-fluid > .spanN.widget-span   (N = bredden i 12-kolonnegitteret)
   og regner med sit eget layout.css til at stille dem op. Det har temaet ikke,
   så cellerne stod under hinanden i fuld bredde. Maalt 11. oktober 2026 paa
   /katalog/e-conomic: de 3 priskort var hver 1425 px brede.

   Her bliver rækken til prototypens .cs-grid: samme mellemrum, samme sidemargin
   og samme luft under, og hver celle spænder sin N. Rækker med ét modul
   (span12) rammes ikke, fordi :has kræver mindst 2 celler. Under 810 px står
   cellerne under hinanden, ligesom .cs-grid--3.
   --------------------------------------------------------------------------- */
.dnd-row > .row-fluid:has(> .widget-span + .widget-span) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px 24px;
  padding: 0 var(--pad-x) 120px;
}
.dnd-row > .row-fluid:has(> .widget-span + .widget-span) > .widget-span { grid-column: span 12; min-width: 0; }
.dnd-row > .row-fluid:has(> .widget-span + .widget-span) > .span1  { grid-column: span 1; }
.dnd-row > .row-fluid:has(> .widget-span + .widget-span) > .span2  { grid-column: span 2; }
.dnd-row > .row-fluid:has(> .widget-span + .widget-span) > .span3  { grid-column: span 3; }
.dnd-row > .row-fluid:has(> .widget-span + .widget-span) > .span4  { grid-column: span 4; }
.dnd-row > .row-fluid:has(> .widget-span + .widget-span) > .span5  { grid-column: span 5; }
.dnd-row > .row-fluid:has(> .widget-span + .widget-span) > .span6  { grid-column: span 6; }
.dnd-row > .row-fluid:has(> .widget-span + .widget-span) > .span7  { grid-column: span 7; }
.dnd-row > .row-fluid:has(> .widget-span + .widget-span) > .span8  { grid-column: span 8; }
.dnd-row > .row-fluid:has(> .widget-span + .widget-span) > .span9  { grid-column: span 9; }
.dnd-row > .row-fluid:has(> .widget-span + .widget-span) > .span10 { grid-column: span 10; }
.dnd-row > .row-fluid:has(> .widget-span + .widget-span) > .span11 { grid-column: span 11; }

/* Priskort: prototypens .site-prices. Rækken holdes paa 1120 px og centreres,
   og kortene bliver lige hoeje. Cellen er et grid, saa kortet strækkes, fordi
   modulwrapperen imellem er display: contents. */
.dnd-row > .row-fluid:has(> .widget-span .cs-price) {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  align-items: stretch;
}
.dnd-row > .row-fluid > .widget-span:has(.cs-price) { display: grid; }
.dnd-row > .row-fluid > .widget-span .cs-price { min-width: 0; }

@media (max-width: 809px) {
  .dnd-row > .row-fluid:has(> .widget-span + .widget-span) { padding-bottom: 80px; }
  .dnd-row > .row-fluid:has(> .widget-span + .widget-span) > .widget-span { grid-column: 1 / -1; }
}