/* Cartorga · SAP go-live page
   Light editorial system: warm paper canvas, serif headlines at weight 400,
   floating product artifacts with a single soft shadow, pill buttons,
   and one deep-blue accent rationed to data and the primary action. */

:root {
  /* Surfaces */
  --bg: #FBFAF7;
  --surface: #FFFFFF;
  --sunken: #F4F2EC;
  --line: #E6E2D9;
  --line-soft: #EFECE5;

  /* Ink */
  --ink: #1C1A17;
  --ink-soft: #5C574E;
  --ink-muted: #8B857A;
  --ink-faint: #B5AFA4;

  /* Accent for this vertical: deep blue */
  --accent: #1B3B5F;
  --accent-hover: #142D4A;
  --accent-tint: #E8EEF5;
  --accent-wash: #E3EAF2;
  --accent-ink: #12304F;

  /* Adoption states inside the product UI only */
  --state-adopted: #1B3B5F;
  --state-paper: #C9A24B;
  --state-reverted: #BE6247;

  /* Pastel washes for the hero widgets — saturated a touch, like steep.app's metric cards */
  --wash-blue: #E7ECF9;  --wash-blue-line: #D4DEEE;  --wash-blue-ink: #1B3B5F;
  --wash-peach: #FAEBDF; --wash-peach-line: #EFDCCB; --wash-peach-ink: #A15C30;
  --wash-sage: #E8F0DF;  --wash-sage-line: #D7E3CB;  --wash-sage-ink: #4C6A40;

  /* Type */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-display: clamp(2.6rem, 1.5rem + 4.2vw, 4.75rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.1vw, 3.1rem);
  --fs-h3: clamp(1.45rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-ui: 0.875rem;
  --fs-eyebrow: 0.75rem;

  /* Shape */
  --r-card: 24px;
  --r-elevated: 20px;
  --r-small: 16px;
  --r-input: 14px;
  --r-pill: 9999px;

  /* The only elevation shadow: lifts the floating product artifacts in the hero */
  --shadow-lift: 0 0 0 1px rgba(28, 26, 23, 0.05), 0 20px 25px -5px rgba(28, 26, 23, 0.10), 0 8px 10px -6px rgba(28, 26, 23, 0.08);
  /* Everywhere else cards are flat: a hairline ring for definition, no drop shadow behind them */
  --shadow-soft: 0 0 0 1px rgba(28, 26, 23, 0.06);

  /* Layout */
  --max: 1200px;
  --pad: 24px;
  --section-y: clamp(4rem, 2.5rem + 5vw, 8.5rem);

  /* Motion */
  --dur: 220ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.is-static { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--band { background: var(--sunken); }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-display); line-height: 1.08; letter-spacing: -0.022em;
  text-wrap: balance;
}
.display em, .h2 em { font-style: italic; font-weight: 400; }
.h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.018em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -0.012em;
}
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); font-weight: 400; }
.eyebrow {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem;
  letter-spacing: 0; text-transform: none; color: var(--ink-soft);
}
/* Section headers read the eyebrow as a quiet breadcrumb with a light chevron (steep.app) */
.sec-head .eyebrow, .bench .eyebrow, .cta-copy .eyebrow {
  display: flex; width: max-content; max-width: 100%; align-items: center; gap: 7px;
}
.sec-head .eyebrow::after, .bench .eyebrow::after, .cta-copy .eyebrow::after {
  content: "\203A"; color: var(--ink-faint); font-weight: 400; font-size: 1.2em; line-height: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: var(--r-pill);
  font-size: 1rem; font-weight: 500; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.btn--small { height: 38px; padding: 0 16px; font-size: 0.9375rem; }
.link-arrow { color: var(--ink); font-weight: 500; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav.is-scrolled {
  background: rgba(251, 250, 247, 0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.nav__brand { display: inline-flex; align-items: center; gap: 12px; }
.nav__brand img { height: 22px; width: auto; }
.nav__brand-tag {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); padding-left: 12px; border-left: 1px solid var(--line);
}
.nav__links { display: flex; gap: 32px; }
.nav__links a { font-size: 0.9375rem; color: var(--ink); padding: 2px 0; }
.nav__links a:hover { color: var(--ink-soft); }
.nav__cta { display: flex; align-items: center; gap: 20px; }
.nav__menu { display: none; }
@media (max-width: 900px) {
  .nav__brand-tag { display: none; }
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__menu { display: block; position: relative; }
  .nav__menu summary { list-style: none; cursor: pointer; width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 8px; }
  .nav__menu summary::-webkit-details-marker { display: none; }
  .nav__menu summary span { display: block; height: 1.5px; background: var(--ink); border-radius: 1px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .nav__menu[open] summary span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__menu[open] summary span:nth-child(2) { opacity: 0; }
  .nav__menu[open] summary span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav__menu-panel { position: absolute; right: 0; top: calc(100% + 12px); min-width: 220px; display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lift); }
  .nav__menu-panel a { padding: 10px 12px; border-radius: var(--r-small); font-size: 1rem; color: var(--ink); }
  .nav__menu-panel a:hover { background: var(--sunken); }
  .nav__menu-panel a.ext { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.9375rem; }
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(1.5rem, 0.5rem + 3vw, 3.75rem); padding-bottom: 0; overflow-x: clip; position: relative; z-index: 0; }
/* Soft colour bloom behind the hero, in the spirit of the product's gradient canvas */
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -80px; width: min(1500px, 130vw); height: 860px; transform: translateX(-50%);
  background:
    radial-gradient(38% 44% at 67% 44%, rgba(233, 156, 108, 0.34), rgba(233, 156, 108, 0) 70%),
    radial-gradient(42% 48% at 27% 36%, rgba(146, 164, 216, 0.30), rgba(146, 164, 216, 0) 70%),
    radial-gradient(36% 42% at 52% 66%, rgba(205, 165, 198, 0.24), rgba(205, 165, 198, 0) 72%);
  filter: blur(4px);
}
@media (prefers-reduced-motion: no-preference) { .hero::before { animation: bloom 22s ease-in-out infinite alternate; } }
@keyframes bloom { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.08); } }
.hero__copy { position: relative; z-index: 5; max-width: 900px; margin: 0 auto; text-align: center; }
.hero__copy .display { margin-top: 20px; font-size: clamp(2.5rem, 0.9rem + 4.7vw, 5rem); line-height: 1.05; letter-spacing: -0.03em; }
.hero__copy .lead { max-width: 600px; margin: 24px auto 0; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.28rem); color: var(--ink-soft); }
.hero__actions { display: flex; justify-content: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* Stage: scroll-driven assembly.
   --p runs from 0 (signals scattered around a floating map card) to 1 (one clean dashboard window).
   The JS pins .stage while the page scrolls ~70vh and feeds --p; everything else is CSS. */
/* The scroller breaks out of the 1200px container so the product window can be wider than the page copy. */
.hero__scroller {
  --sw: min(1320px, calc(100vw - 40px));
  position: relative; width: var(--sw); margin-left: calc((100% - var(--sw)) / 2);
  margin-top: clamp(2.25rem, 1rem + 4.5vw, 5.25rem);
}
.stage { position: relative; --p: 0; --q: calc(1 - var(--p)); width: 100%; margin: 0;
  /* room to either side of the stage before the viewport edge; scattered cards never leave it */
  --room: max(0px, calc((100vw - var(--sw)) / 2 - 20px)); }
.stage.is-pinned { position: sticky; top: var(--stage-top, 88px); }
.stage.is-static { --p: 1 !important; }

/* The window frame fades in around the parts */
.app {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 184px minmax(0, 1fr); grid-template-rows: 46px auto;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, var(--p));
}
.app::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  box-shadow: var(--shadow-lift); opacity: var(--p);
}
.app__chrome {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 18px 0 20px;
  border-bottom: 1px solid rgba(239, 236, 229, var(--p));
  opacity: var(--p); transform: translateY(calc(-8px * var(--q)));
}
.app__lights { display: flex; gap: 6px; margin-right: 6px; }
.app__lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--sunken); border: 1px solid var(--line); }
.app__view { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.app__back { width: 15px; height: 15px; color: var(--ink-faint); }
.app__right { margin-left: auto; }
.app__edit { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--ink-muted); }
.app__edit svg { width: 13px; height: 13px; }

.app__side {
  display: flex; flex-direction: column; gap: 18px; padding: 18px 12px 16px;
  border-right: 1px solid rgba(239, 236, 229, var(--p));
  opacity: var(--p); transform: translateX(calc(-18px * var(--q)));
}
.app__ws { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; padding: 0 8px; }
.app__ws-mark {
  width: 20px; height: 20px; border-radius: 6px; background: var(--accent); color: #fff;
  font-family: var(--font-serif); font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center;
}
.app__nav { display: flex; flex-direction: column; gap: 4px; }
.app__nav li { display: flex; align-items: center; gap: 9px; font-size: 0.8125rem; color: var(--ink-soft); padding: 9px 8px; border-radius: 8px; }
.app__nav li::before { content: ""; width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid var(--line); flex: none; }
.app__nav li.on { background: var(--sunken); color: var(--ink); font-weight: 600; }
.app__nav li.on::before { border-color: var(--accent); background: var(--accent-tint); }
.app__side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 8px 0; border-top: 1px solid rgba(230, 226, 217, var(--p)); }
.app__side-foot .v { display: block; font-size: 0.75rem; color: var(--ink-soft); }
.app__side-foot .k { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }

.app__main {
  padding: 16px; border-radius: 0 0 var(--r-card) var(--r-card);
  background: rgba(251, 250, 247, var(--p));
  display: flex; flex-direction: column; gap: 12px;
}

/* Greeting and recent chats: window furniture that fades in with the frame (not scattered) */
.app__hello { opacity: var(--p); transform: translateY(calc(-6px * var(--q))); margin: 2px 2px 0; }
.app__hi { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 1.3rem; line-height: 1.1; color: var(--ink); }
.app__sun { width: 18px; height: 18px; color: var(--state-paper); flex: none; }

.app__ask-row { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; align-items: start; }
.app__recent { opacity: var(--p); transform: translateY(calc(-6px * var(--q))); padding: 4px 2px 0 6px; }
.app__recent-h { font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.app__recent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.app__recent li { display: flex; align-items: center; gap: 9px; font-size: 0.8125rem; color: var(--ink-muted); padding: 6px 8px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__recent li svg { width: 14px; height: 14px; flex: none; color: var(--ink-faint); }

/* A dashboard of small widgets. Each is a floating pastel card when scattered (--p 0),
   a docked tile once the window assembles (--p 1). */
.tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
  grid-template-areas: "insight insight score" "insight insight live" "dept dept quote"; }
.tile {
  position: relative; border-radius: 20px;
  background: var(--tile-bg, var(--surface));
  padding: 16px 18px;
  transform: translate(calc(var(--sx, 0px) * var(--q)), calc(var(--sy, 0px) * var(--q))) rotate(calc(var(--sr, 0deg) * var(--q)));
  will-change: transform;
}
/* lift shadow while floating, hairline once docked */
.tile::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  box-shadow: var(--shadow-lift); opacity: var(--q);
}
.tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--tile-line, var(--line)); opacity: var(--p);
}

/* Pastel washes, steep.app style: borderless fill, and each card themed in its own colour */
.tile--blue  { --tile-bg: var(--wash-blue);  --tile-line: transparent; --tile-ink: var(--wash-blue-ink); }
.tile--peach { --tile-bg: var(--wash-peach); --tile-line: transparent; --tile-ink: var(--wash-peach-ink); }
.tile--sage  { --tile-bg: var(--wash-sage);  --tile-line: transparent; --tile-ink: var(--wash-sage-ink); }

/* Placement in the asymmetric dashboard grid: a wide department card + donut up top,
   then a row of smaller KPI cards below */
.tile--score   { grid-area: score; }
.tile--live    { grid-area: live; }
.tile--dept    { grid-area: dept; }
.tile--insight { grid-area: insight; }
.tile--quote   { grid-area: quote; }

/* Scatter offsets, clamped to --room so nothing leaves the frame */
.tile--ask    { --sx: 0px;                                 --sy: -20px;  --sr: -0.8deg; }
.tile--score  { --sx: calc(-1 * min(320px, var(--room))); --sy: -52px;  --sr: -3.5deg; }
.tile--live   { --sx: min(320px, var(--room));            --sy: -84px;  --sr: 3.5deg; }
.tile--dept   { --sx: 0px;                                 --sy: 34px;   --sr: -1.2deg; }
.tile--insight { --sx: calc(-1 * min(300px, var(--room))); --sy: 118px;  --sr: -3deg; }
.tile--quote  { --sx: min(320px, var(--room));            --sy: 104px;  --sr: 3deg; }

/* Entrance on load: the tiles fade up once, staggered */
.tile { opacity: 0; translate: 0 14px; transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out); }
.stage.is-ready .tile { opacity: 1; translate: 0 0; }
.stage.is-ready .tile--live   { transition-delay: 0.1s; }
.stage.is-ready .tile--dept   { transition-delay: 0.2s; }
.stage.is-ready .tile--insight { transition-delay: 0.3s; }
.stage.is-ready .tile--quote  { transition-delay: 0.4s; }

.tile__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tile__label { font-size: 0.8125rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; color: var(--tile-ink, var(--ink)); }

/* Ask box: put a question to the adoption map, in the spirit of the product's assistant */
.tile--ask { padding: 14px 16px; }
.ask { display: flex; flex-direction: column; gap: 14px; }
.ask__q { display: flex; align-items: center; min-height: 1.5em; font-size: 0.95rem; line-height: 1.3; color: var(--ink); }
.ask__ph { color: var(--ink-faint); }
.ask__caret { flex: none; width: 1.5px; height: 1.1em; margin-left: 2px; background: var(--accent); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ask__caret { animation: none; } }
.ask__foot { display: flex; align-items: center; justify-content: space-between; }
.ask__tools { display: flex; gap: 8px; }
.ask__ic { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: 0.8rem; font-family: var(--font-mono); }
.ask__ic svg { width: 14px; height: 14px; }
.ask__send { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; border: 0; display: inline-flex; align-items: center; justify-content: center; }
.ask__send svg { width: 15px; height: 15px; }
.tag {
  display: inline-flex; flex-shrink: 0; align-items: center; height: 22px; white-space: nowrap; padding: 0 10px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); background: rgba(28, 26, 23, 0.05);
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); position: relative; }
/* static status dot — the interviews tile is fixed, not live-animated */

.chip { white-space: nowrap; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
  background: rgba(28, 26, 23, 0.05); border-radius: 6px; padding: 3px 7px; }

/* Score tile */
.score { display: flex; align-items: center; gap: 16px; }
.score__ring { position: relative; width: 92px; height: 92px; flex: none; }
.score__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score__ring .track { fill: none; stroke: rgba(28, 26, 23, 0.08); stroke-width: 9; }
.score__ring .fill { fill: none; stroke: var(--tile-ink, var(--accent)); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 339.3; stroke-dashoffset: 339.3; transition: stroke-dashoffset 1.4s var(--ease-out); }
.score__num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 1.9rem; line-height: 1; letter-spacing: -0.03em; color: var(--tile-ink, var(--ink));
}
.score__delta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.02em; }
.score__delta b { color: var(--tile-ink, var(--accent)); font-weight: 500; }

/* Legend (shared with the department tile head) */
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 0.6875rem; color: var(--ink-muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.i-adopted { background: var(--state-adopted); }
.i-paper { background: var(--state-paper); }
.i-reverted { background: var(--state-reverted); }

/* Live-interviews tile */
.metric { display: flex; align-items: baseline; gap: 8px; }
.metric b { font-family: var(--font-serif); font-weight: 400; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; color: var(--tile-ink, var(--ink)); }
.metric span { font-size: 0.8125rem; color: var(--ink-muted); }
.livestats { display: flex; gap: 22px; margin-top: 18px; }
.livestat { display: flex; flex-direction: column; gap: 4px; }
.livestat b { font-family: var(--font-serif); font-weight: 400; font-size: 1.2rem; line-height: 1; letter-spacing: -0.02em; color: var(--tile-ink, var(--ink)); }
.livestat span { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }

/* Adoption bars (shared with the how-it-works art) */
.bar { height: 6px; background: rgba(28, 26, 23, 0.07); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent);
  transition: width 1.2s var(--ease-out); }
.bar--paper > i { background: var(--state-paper); }
.bar--reverted > i { background: var(--state-reverted); }
.is-live .bar > i { width: var(--w); }
.pct { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); text-align: right; }

/* Department tile */
.deptx { display: flex; flex-direction: column; }
.deptx li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 220px) 26px; gap: 14px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--line-soft); }
.deptx li:first-child { border-top: 0; }
.deptx__name { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Two-checks tile */
.checks__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.checks__row:first-of-type { border-top: 0; }
.checks__row .k { font-size: 0.8125rem; color: var(--ink-soft); }
.checks__row .k small { display: block; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.checks__row .v { font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: -0.02em; color: var(--tile-ink, var(--ink)); }
.checks__row .v.up { color: var(--tile-ink, var(--accent)); }

/* Combined score tile: donut on the left, the two checks beside it */
.tile--score .score__side { flex: 1; min-width: 0; }

/* Qualitative insight marquee — the themes only open conversations surface */
.tile--insight { display: flex; flex-direction: column; }
.themes { display: flex; flex-direction: column; flex: 1; }
.theme { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 11px 0; border-top: 1px solid var(--line-soft); }
.theme:first-child { border-top: 0; padding-top: 2px; }
.theme__dot { width: 9px; height: 9px; border-radius: 3px; margin-top: 5px; background: var(--accent); }
.theme__dot--adopted { background: var(--state-adopted); }
.theme__dot--paper { background: var(--state-paper); }
.theme__dot--reverted { background: var(--state-reverted); }
.theme__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.theme__name { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.theme__quote { font-family: var(--font-serif); font-size: 0.8125rem; font-style: italic; color: var(--ink-soft); line-height: 1.35; }
.theme__count { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); line-height: 1.2; }
.theme__count b { font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); text-transform: none; margin-bottom: 1px; }
.themes__foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 0.75rem; color: var(--ink-muted); line-height: 1.4; }

/* State pills (used inside the quote tile and by the quote-cycle script) */
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.state::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.state--adopted::before { background: var(--state-adopted); }
.state--paper::before { background: var(--state-paper); }
.state--reverted::before { background: var(--state-reverted); }

/* Frozen wave bars (a still snapshot of the parallel interviews) */
.waves { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.waves i { flex: 1; background: var(--accent); opacity: 0.4; border-radius: 2px; height: 30%; }
.waves i:nth-child(2n) { height: 55%; }
.waves i:nth-child(3n) { height: 80%; }
.waves i:nth-child(4n+1) { height: 40%; }
.waves i:nth-child(5n) { height: 95%; }
.waves i:nth-child(7n) { height: 65%; }

/* Quote tile */
.quote-card__text { font-family: var(--font-serif); font-size: 0.9375rem; line-height: 1.4; color: var(--ink); min-height: 4.2em; }
.quote-card__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 0.75rem; color: var(--ink-muted); }
.quote-card__meta .state { font-size: 0.6875rem; }
.quote-card__dots { display: flex; gap: 4px; }
.quote-card__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
.quote-card__dots i.on { background: var(--accent); }
.quote-card .fade { transition: opacity 320ms var(--ease); }
.quote-card .fade.is-out { opacity: 0; }

.stage__caption { text-align: center; font-size: var(--fs-small); color: var(--ink-muted); margin-top: 28px; }

/* Below 1000px the window is shown assembled (no pinning) and the sidebar is dropped */
@media (max-width: 1000px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app__side { display: none; }
  .app__main { padding: 14px; }
  .app__recent { display: none; }
  .app__ask-row { grid-template-columns: 1fr; }
  .tile { transform: none; }
}
@media (max-width: 700px) {
  .tiles { grid-template-columns: 1fr; grid-template-areas: none; }
  .tile--score, .tile--live, .tile--dept, .tile--insight, .tile--quote { grid-area: auto; grid-column: 1; }
}
@media (max-width: 640px) {
  .hero__copy .eyebrow { font-size: 0.6875rem; letter-spacing: 0.08em; }
  .art-foot { font-size: 0.5625rem; letter-spacing: 0.04em; }
  .app__chrome { padding: 0 14px; }
  .deptx li { grid-template-columns: minmax(0, 1fr) 84px 22px; gap: 10px; }
  .tile--dept .tile__head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

.nb { white-space: nowrap; }

/* ---------- Testimonials & logos ---------- */
.testimonials { padding-top: calc(var(--section-y) * 0.9); }
.testimonials__title { text-align: center; max-width: 22ch; margin-left: auto; margin-right: auto; }

/* A single quote at a time, integrated into the paper background (no card). The arrows flank it; the dots switch beneath. */
.tcar { position: relative; max-width: 900px; margin: 44px auto 0; display: flex; align-items: center; }
.tcar__viewport { position: relative; flex: 1 1 auto; min-width: 0; display: grid; }
.tquote {
  grid-area: 1 / 1; margin: 0;
  display: flex; align-items: center; gap: 40px;
  padding: 20px 8px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0s linear 0.5s;
}
.tquote.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.tquote__face { flex: none; width: 108px; height: 108px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-soft); }
.tquote__body { margin: 0; min-width: 0; }
.tquote__body p { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.2rem, 1.02rem + 0.75vw, 1.55rem); line-height: 1.4; color: var(--ink); }
.tquote__body p::before { content: "\201C"; color: var(--ink-faint); }
.tquote__body p::after { content: "\201D"; color: var(--ink-faint); }
.tquote figcaption { margin-top: 22px; }
.tquote figcaption b { display: block; font-size: 1rem; font-weight: 600; line-height: 1.2; }
.tquote figcaption span { display: block; font-size: 0.875rem; color: var(--ink-muted); line-height: 1.3; margin-top: 3px; }

.tcar__arrow {
  flex: none; width: 40px; height: 44px; padding: 0;
  background: none; border: 0; color: var(--ink-faint);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tcar__arrow svg { width: 28px; height: 28px; }
.tcar__arrow:hover { color: var(--ink); }
.tcar__arrow--prev:hover { transform: translateX(-2px); }
.tcar__arrow--next:hover { transform: translateX(2px); }
.tcar__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tcar__arrow--prev { margin-right: 10px; }
.tcar__arrow--next { margin-left: 10px; }
@media (min-width: 1001px) {
  .tcar__arrow--prev { margin-right: 32px; }
  .tcar__arrow--next { margin-left: 32px; }
}

.tcar__dots { display: flex; justify-content: center; gap: 9px; margin-top: 28px; }
.tcar__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tcar__dots button:hover { background: var(--ink-faint); }
.tcar__dots button.is-on { background: var(--accent); transform: scale(1.3); }
.tcar__dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.trusted { margin-top: 64px; text-align: center; }
.trusted .eyebrow { display: block; margin-bottom: 24px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 56px; }
.logos img { height: 26px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1) brightness(0.55) contrast(0); opacity: 0.6; }
.logos img.logo--tall { height: 34px; }
.logos img.logo--xl { height: 46px; }
.logos img.logo--wide { height: 22px; }

@media (max-width: 720px) {
  /* Quote takes the full width; the arrows drop below it, centred above the dots */
  .tcar { flex-wrap: wrap; justify-content: center; }
  .tcar__viewport { order: -1; flex: 1 1 100%; }
  .tquote { flex-direction: column; text-align: center; align-items: center; gap: 22px; padding: 8px 4px; }
  .tquote__face { width: 92px; height: 92px; }
  .tcar__arrow { margin: 24px 11px 0; }
  .tcar__dots { margin-top: 16px; }
}

/* ---------- Section headers ---------- */
.sec-head { max-width: 820px; }
.sec-head .eyebrow { margin-bottom: 22px; }
.sec-head .lead { margin-top: 22px; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head--center .eyebrow { margin-left: auto; margin-right: auto; }

/* Every section header reveals the same way as it scrolls into view: a gentle rise and fade,
   the eyebrow / title / lead staggered. Held back only when motion is allowed and not in static mode. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-static) .sec-head > * {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  html:not(.is-static) .sec-head.is-in > * { opacity: 1; transform: none; }
  html:not(.is-static) .sec-head.is-in > *:nth-child(2) { transition-delay: 0.09s; }
  html:not(.is-static) .sec-head.is-in > *:nth-child(3) { transition-delay: 0.18s; }
}

/* ---------- Value ----------
   steep.app-style row: three flat neutral cards. At rest each shows only its heading and
   a line-art icon. Hovering one gently widens it and fills it with its own pastel wash,
   revealing a short body line; the siblings settle a touch narrower and stay readable.
   Flat throughout — a hairline ring gives definition, never a drop shadow. */
.value-grid { display: flex; gap: 16px; margin-top: 48px; align-items: stretch; }
.value {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 340px; overflow: hidden;
  background: var(--surface); border: 0; border-radius: var(--r-card);
  box-shadow: var(--shadow-soft); padding: 30px 30px 34px;
  display: flex; flex-direction: column;
  transition: flex-grow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.value:nth-child(1) { --tile-bg: var(--wash-blue);  --tile-ink: var(--wash-blue-ink); }
.value:nth-child(2) { --tile-bg: var(--wash-peach); --tile-ink: var(--wash-peach-ink); }
.value:nth-child(3) { --tile-bg: var(--wash-sage);  --tile-ink: var(--wash-sage-ink); }

/* Heading sits at the top; the icon centres below it; the body pins to the bottom.
   The two auto top-margins split the free space so the icon stays put whether or not
   the (space-reserving) body is revealed. */
.value .h3 { color: var(--ink); text-wrap: balance; transition: color var(--dur) var(--ease); }
.value__icon { color: var(--ink-faint); margin-top: auto; transition: color var(--dur) var(--ease); }
.value__icon svg { width: 30px; height: 30px; }
.value p {
  color: var(--ink-soft); font-size: 1rem; line-height: 1.55; max-width: 34ch; margin-top: auto;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* Interactive desktop only (wide, hover-capable, motion allowed, live page): the body is
   hidden until its card is hovered, and hovering fills the card and grows it a little. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  html:not(.is-static) .value p { opacity: 0; transform: translateY(8px); }
  html:not(.is-static) .value-grid:hover .value { flex-grow: 0.9; }
  html:not(.is-static) .value-grid .value:hover { flex-grow: 1.25; background: var(--tile-bg); }
  html:not(.is-static) .value-grid .value:hover .h3,
  html:not(.is-static) .value-grid .value:hover .value__icon { color: var(--tile-ink); }
  html:not(.is-static) .value-grid .value:hover p { opacity: 1; transform: none; }
}

/* Static review: show the finished state — every card in its own wash, body visible. */
html.is-static .value { background: var(--tile-bg); }
html.is-static .value .h3,
html.is-static .value .value__icon { color: var(--tile-ink); }

/* Touch / no hover: every card sits in its own colour, full and readable. */
@media (hover: none) {
  .value { background: var(--tile-bg); }
  .value .value__icon { color: var(--tile-ink); }
  .value .h3 { color: var(--tile-ink); }
}

/* Stack on narrow screens: each card in its own colour, full width, no size games. */
@media (max-width: 900px) {
  .value-grid { flex-direction: column; }
  .value { flex: 1 1 auto; min-height: 0; background: var(--tile-bg); gap: 14px; }
  .value .value__icon { color: var(--tile-ink); }
  .value .h3 { color: var(--tile-ink); }
  .value__icon, .value p { margin-top: 0; }
  .value p { opacity: 1; transform: none; max-width: none; }
}

/* Reduced motion: no transitions, and show the finished state (nothing hover-gated). */
@media (prefers-reduced-motion: reduce) {
  .value, .value p, .value .h3, .value__icon { transition: none; }
  .value { background: var(--tile-bg); }
  .value .h3, .value .value__icon { color: var(--tile-ink); }
  .value p { opacity: 1; transform: none; }
}

/* ---------- Where it fits: timeline ----------
   Two lanes on a single spine. The client's rollout stages sit recessive below the
   line; Cartorga's moments rise above it, so the eye reads "Cartorga twice" at once.
   The two waves are the heroes (solid accent); the quarterly pulse trails as a
   lighter, hollow optional marker. Bodies are anchored to the spine and grow away
   from it, so wrapping never crosses the line. */
.timeline { margin-top: clamp(48px, 3rem + 1vw, 72px); position: relative; }

.tl-track {
  --tl-top: 118px;   /* Cartorga lane, above the spine */
  --tl-bot: 60px;    /* programme lane, below the spine */
  --tl-gap: 18px;    /* stem: spine to nearest text */
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: clamp(6px, 1vw, 16px);
}
.tl-track::before {  /* the spine, on the lane boundary */
  content: ""; position: absolute; left: 7%; right: 7%; top: var(--tl-top);
  height: 1px; background: var(--line); transform-origin: left center;
}

.tl { position: relative; height: calc(var(--tl-top) + var(--tl-bot)); min-width: 0; }

.tl__dot {
  position: absolute; left: 50%; top: var(--tl-top); z-index: 1;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--ink-faint);
  transform: translate(-50%, -50%);
}
.tl__dot::before {  /* short connector stem to the label */
  content: ""; position: absolute; left: 50%; width: 1px; height: var(--tl-gap);
  background: var(--line); transform: translateX(-50%);
}

.tl__body {
  position: absolute; left: 0; right: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.tl__name { font-size: 0.9375rem; font-weight: 500; line-height: 1.25; color: var(--ink-muted); }
.tl__note { font-size: 0.8125rem; color: var(--ink-muted); line-height: 1.35; }
.tl__tag {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-tint);
  border-radius: 6px; padding: 3px 8px; margin-bottom: 3px;
}

/* programme stages: recessive, below the line */
.tl:not(.tl--cartorga) .tl__body { top: calc(var(--tl-top) + var(--tl-gap)); }
.tl:not(.tl--cartorga) .tl__dot::before { top: 100%; }

/* Go-live: the cutover pivot */
.tl--go .tl__dot { background: var(--ink); border-color: var(--ink); }
.tl--go .tl__name { color: var(--ink); font-weight: 600; }

/* Cartorga moments: the payoff, above the line */
.tl--cartorga .tl__body { bottom: calc(var(--tl-bot) + var(--tl-gap)); }
.tl--cartorga .tl__dot {
  width: 12px; height: 12px; background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-tint);
}
.tl--cartorga .tl__dot::before { bottom: 100%; }
.tl--cartorga .tl__name { color: var(--ink); font-weight: 600; }

/* Quarterly pulse: present but quieter — hollow accent marker, neutral tag */
.tl--optional .tl__dot { width: 11px; height: 11px; background: var(--bg); border-color: var(--accent); box-shadow: none; }
.tl--optional .tl__tag { color: var(--ink-muted); background: var(--sunken); }
.tl--optional .tl__note { color: var(--ink-faint); }

/* Reveal: the spine draws in, markers and labels rise and fade. Held back only when
   motion is allowed and outside static review; otherwise the finished state shows. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-static) .timeline .tl { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  html:not(.is-static) .timeline.is-in .tl { opacity: 1; transform: none; }
  html:not(.is-static) .timeline .tl-track::before { transform: scaleX(0); transition: transform .85s var(--ease-out); }
  html:not(.is-static) .timeline.is-in .tl-track::before { transform: scaleX(1); }
  html:not(.is-static) .timeline.is-in .tl:nth-child(1) { transition-delay: .12s; }
  html:not(.is-static) .timeline.is-in .tl:nth-child(2) { transition-delay: .20s; }
  html:not(.is-static) .timeline.is-in .tl:nth-child(3) { transition-delay: .28s; }
  html:not(.is-static) .timeline.is-in .tl:nth-child(4) { transition-delay: .36s; }
  html:not(.is-static) .timeline.is-in .tl:nth-child(5) { transition-delay: .44s; }
  html:not(.is-static) .timeline.is-in .tl:nth-child(6) { transition-delay: .52s; }
  html:not(.is-static) .timeline.is-in .tl:nth-child(7) { transition-delay: .60s; }
}

@media (max-width: 900px) {
  .tl-track { display: block; position: relative; padding-left: 4px; }
  .tl-track::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; transform-origin: top center; }
  .tl { height: auto; padding: 11px 0 11px 30px; text-align: left; }
  .tl__dot { top: 50%; left: 5px; }
  .tl__dot::before { display: none; }
  .tl__body { position: static; text-align: left; align-items: flex-start; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html:not(.is-static) .timeline .tl-track::before { transform: scaleY(0); }
  html:not(.is-static) .timeline.is-in .tl-track::before { transform: scaleY(1); }
}
.fits-note {
  margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: center;
}
@media (max-width: 900px) { .fits-note { grid-template-columns: 1fr; } }
.fits-note p { color: var(--ink-soft); max-width: 62ch; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tools span { font-size: 0.8125rem; color: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; background: var(--surface); }

/* ---------- How it works: step explorer ----------
   Base (mobile / static / reduced-motion / no-JS): every step reads in full with its own
   preview panel. On wide screens this is a tidy 3-row explorer. The interactive single-panel
   version — one active step, one cross-fading preview, auto-advancing — is layered on top only
   when motion is allowed and we are not in the static review mode (see the gated block below). */
.how-explorer {
  margin-top: clamp(40px, 2.5rem + 2vw, 64px);
  display: flex; flex-direction: column; gap: 12px;
}

/* A step: mono number, then serif heading + paragraph + (interactive) progress line */
.how-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 14px 4px;
}
.how-step + .how-step,
.how-step[data-step="1"], .how-step[data-step="2"] { border-top: 1px solid var(--line-soft); }
.how-step .eyebrow {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.04em;
  color: var(--accent); padding-top: 0.35em;
}
.how-step__body { min-width: 0; max-width: 48ch; }
.how-step .h3 { font-size: clamp(1.35rem, 1.1rem + 0.85vw, 1.85rem); color: var(--ink); }
.how-step__body p { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.55; margin-top: 12px; }
.how-step__bar {
  display: none; height: 2px; margin-top: 18px; max-width: 340px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.how-step__bar > i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; }

/* The preview panel: flat white surface, hairline ring (never a drop shadow) */
.how-art {
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-soft);
  padding: clamp(20px, 1rem + 2vw, 32px);
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(220px, 20vw, 280px); overflow: hidden;
}
.how-art__tab {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  margin-bottom: 18px; padding: 4px 11px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--sunken);
}
.how-art__live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* Interleave step / art on the stacked (mobile) layout */
.how-step[data-step="0"] { order: 0; } .how-art[data-step="0"] { order: 1; }
.how-step[data-step="1"] { order: 2; } .how-art[data-step="1"] { order: 3; }
.how-step[data-step="2"] { order: 4; } .how-art[data-step="2"] { order: 5; }
.how-art { margin-bottom: 8px; }

/* Wide, static/reduced-motion baseline: a calm 3-row grid, each step beside its own preview */
@media (min-width: 901px) {
  .how-explorer {
    display: grid; grid-template-columns: minmax(0, 0.9fr) 1.1fr;
    column-gap: clamp(40px, 3vw + 1rem, 72px); row-gap: 20px; align-items: center;
  }
  .how-step { grid-column: 1; padding: 20px 0; }
  .how-step:first-of-type { padding-top: 4px; }
  .how-art { grid-column: 2; margin-bottom: 0; }
  .how-step[data-step="0"], .how-art[data-step="0"] { grid-row: 1; }
  .how-step[data-step="1"], .how-art[data-step="1"] { grid-row: 2; }
  .how-step[data-step="2"], .how-art[data-step="2"] { grid-row: 3; }
}

/* Interactive explorer: one active step, one cross-fading preview panel, auto-advancing.
   Held back for reduced-motion and static review mode so screenshots show every step in full. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html:not(.is-static) .how-explorer { align-items: start; }
  html:not(.is-static) .how-step {
    cursor: pointer; border-top-color: transparent;
    transition: border-color var(--dur) var(--ease);
  }
  html:not(.is-static) .how-step + .how-step { border-top-color: var(--line-soft); }

  /* Inactive steps recede to number + heading; the active one opens up */
  html:not(.is-static) .how-step .eyebrow,
  html:not(.is-static) .how-step .h3 { color: var(--ink-faint); transition: color 0.35s var(--ease); }
  html:not(.is-static) .how-step.is-active .h3 { color: var(--ink); }
  html:not(.is-static) .how-step.is-active .eyebrow { color: var(--accent); }
  html:not(.is-static) .how-step:hover .h3 { color: var(--ink-soft); }
  html:not(.is-static) .how-step.is-active:hover .h3 { color: var(--ink); }

  html:not(.is-static) .how-step__body p {
    max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
    transition: max-height 0.55s var(--ease), opacity 0.4s var(--ease), margin-top 0.55s var(--ease);
  }
  html:not(.is-static) .how-step.is-active .how-step__body p { max-height: 14em; opacity: 1; margin-top: 14px; }
  html:not(.is-static) .how-step.is-active .how-step__bar { display: block; }

  /* All previews share one tall panel cell; only the active one shows. The outgoing preview
     leaves quickly and the incoming one arrives slightly later, so the two illustrations never
     sit on top of each other — the panel fades cleanly through empty rather than crossfading. */
  html:not(.is-static) .how-art {
    grid-column: 2; grid-row: 1 / 4; min-height: clamp(320px, 26vw, 400px);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 0.28s var(--ease), transform 0.4s var(--ease-out), visibility 0s linear 0.28s;
  }
  html:not(.is-static) .how-art.is-active {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.45s var(--ease) 0.2s, transform 0.55s var(--ease-out) 0.15s, visibility 0s;
  }
}

/* Art 1: stratified sample dots */
.art-sample { display: flex; flex-direction: column; gap: clamp(11px, 1.7vw, 18px); width: 100%; }
.art-sample__row { display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-items: center; }
.art-sample__row .k { font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* One tidy, non-wrapping row of equal dots per department; accent = sampled, faint = the rest */
.dots { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(5px, 0.55vw, 7px); }
.dots i { flex: none; width: clamp(8px, 0.7vw, 10px); height: clamp(8px, 0.7vw, 10px); border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--accent); }
.art-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.art-foot__key { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-muted); }
.art-foot__key i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* Mobile: stack the caption so it stays left-aligned and never wraps mid-phrase.
   Placed after the base .art-foot rule so these win over it (the earlier 640px block cannot). */
@media (max-width: 640px) {
  .art-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Art 2: parallel interviews */
.art-parallel { display: flex; flex-direction: column; gap: clamp(9px, 1.5vw, 16px); width: 100%; }
.art-parallel__row { display: grid; grid-template-columns: 36px 1fr 52px; gap: 14px; align-items: center; }
.art-parallel__row .lang { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--ink-soft); background: var(--sunken); border-radius: 6px; padding: 4px 0; text-align: center; }
.art-parallel__row .waves { margin: 0; height: 22px; gap: 3px; }
.art-parallel__row .waves i { opacity: 0.3; }
.art-parallel__row .t { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-faint); text-align: right; }

/* Art 3: mini map */
.art-map { display: flex; flex-direction: column; gap: clamp(10px, 1.6vw, 16px); width: 100%; }
.art-map__row { display: grid; grid-template-columns: 128px 1fr 26px; gap: 12px; align-items: center; font-size: 0.8125rem; }
.art-map__row .k { font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.art-map__row .bar { height: 8px; }
.art-map__row .bar > i { width: var(--w); }
.art-map__row .pct { font-size: 0.75rem; }
.art-map__quote { margin-top: 8px; padding: 14px 16px; background: var(--sunken); border-radius: var(--r-small); font-family: var(--font-serif); font-style: italic; font-size: 0.9375rem; color: var(--ink); line-height: 1.4; }
.art-map__quote small { display: block; font-family: var(--font-mono); font-style: normal; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; }

/* ---------- Score & benchmark (the one accent card) ---------- */
.bench {
  background: var(--accent-wash); color: var(--accent-ink);
  border-radius: var(--r-card); padding: clamp(32px, 2rem + 2vw, 64px);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: stretch;
}
@media (max-width: 900px) { .bench { grid-template-columns: 1fr; gap: 36px; } }
.bench .eyebrow { color: var(--accent); }
.bench .h2 { color: var(--accent-ink); margin-top: 18px; }
.bench p { color: var(--accent-ink); opacity: 0.85; margin-top: 18px; font-size: 1.0625rem; }
.bench p + p { margin-top: 14px; }
.bench__chart { background: rgba(255,255,255,0.7); border-radius: var(--r-small); padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; }
.bbar { display: grid; grid-template-columns: 1fr; gap: 8px; }
.bbar + .bbar { margin-top: 22px; }
.bbar__label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9375rem; font-weight: 500; }
.bbar__label b { font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1; }
.bbar__track { height: 14px; background: rgba(27,59,95,0.10); border-radius: 7px; overflow: hidden; }
.bbar__track > i { display: block; height: 100%; width: 0; border-radius: 7px; background: var(--accent); transition: width 1.2s var(--ease-out); }
.bbar--ref .bbar__track > i { background: var(--accent); opacity: 0.35; }
.is-live .bbar__track > i { width: var(--w); }
.bench__caption { margin-top: 22px; font-size: 0.875rem; line-height: 1.45; color: var(--accent-ink); opacity: 0.7; }

/* ---------- Results ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr; } }
.stat { padding: 32px 28px; border-radius: var(--r-card); background: var(--surface); border: 0; box-shadow: var(--shadow-soft); }
.stat__num { font-family: var(--font-serif); font-weight: 400; font-size: clamp(3rem, 2.4rem + 2vw, 4.25rem); line-height: 1; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 6px; }
.stat__num small { font-size: 0.42em; color: var(--ink-muted); letter-spacing: 0; }
.stat__label { font-weight: 600; margin-top: 16px; font-size: 1rem; min-height: 2.6em; }
.stat__desc { color: var(--ink-soft); font-size: 0.9375rem; margin-top: 6px; line-height: 1.5; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 24px; } }
.faq-grid .sec-head { position: sticky; top: 96px; align-self: start; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 20px 0; font-size: 1.0625rem; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: 0 0 auto; width: 22px; height: 22px; position: relative; color: var(--ink-muted); }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transition: transform var(--dur) var(--ease); }
.faq summary .plus::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.faq summary .plus::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.faq details[open] summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq .a { padding: 0 48px 22px 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; max-width: 62ch; }

/* ---------- CTA + form ---------- */
.cta-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; gap: 36px; } }
.cta-copy .lead { margin-top: 20px; }
.inhouse { margin-top: 36px; padding: 20px 22px; border-radius: var(--r-small); background: var(--surface); border: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink-soft); }
.inhouse b { color: var(--ink); font-weight: 600; }
.form-card { background: var(--surface); border-radius: var(--r-elevated); box-shadow: var(--shadow-soft); padding: clamp(24px, 1.5rem + 1vw, 36px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.875rem; font-weight: 600; }
.field label small { font-weight: 400; color: var(--ink-muted); }
.field input, .field select, .field textarea {
  height: 46px; padding: 0 14px; border-radius: var(--r-input); border: 1px solid var(--line); background: var(--bg);
  font-size: 1rem; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { height: auto; min-height: 92px; padding: 12px 14px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C574E' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: 22px; flex-wrap: wrap; }
.consent { order: 2; flex-basis: 100%; margin-top: 4px; font-size: 0.8125rem; color: var(--ink-muted); line-height: 1.45; max-width: 52ch; }
.consent a { text-decoration: underline; text-underline-offset: 2px; color: var(--ink-soft); }
.form-success { display: none; padding: 8px 0; }
.form-success .h3 { margin-bottom: 10px; }
.form-card.is-sent form { display: none; }
.form-card.is-sent .form-success { display: block; }
.hp { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 48px 0 40px; }
.footer__grid { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
@media (max-width: 700px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand img { height: 20px; width: auto; }
.footer__tag { margin-top: 14px; color: var(--ink-soft); font-size: 0.9375rem; }
.footer__links { display: flex; gap: 24px; font-size: 0.9375rem; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__meta { margin-top: 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--ink-muted); }

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .map-card, .float { opacity: 1; translate: 0 0; }
  .stage { --p: 1 !important; }
  .waves i { animation: none; }
}