/* ============================================================================
   QUINT INVESTOR PORTAL — PAGE CSS
   Loads after brand.css and patterns.css. Tokens only. Two pieces the kit
   lacks (slide run, mono graph) live here; specs in ~/.claude/design/primitives.
   ============================================================================ */

/* ---- deck: one card in front, the next peeking on the right. Stepping
   forward slides the active card off to the left as it fades out and brings the
   next one in; stepping back reverses it. No stacking, no overlap at rest. Card anatomy from Quint_deck_v19: Q roundel, headline left, panel
   right, number + wordmark in the footer. Planes step lighter with each layer:
   page → card → panel → tile inset. Spec: ~/.claude/design/primitives/vdl-slide-run.md ---- */
:root {
  --deck-peek: var(--s-9);   /* air on the right; the next card shows only a sliver past the gap */
  --deck-gap: var(--s-8);    /* space between cards */
  --deck-h: calc(100dvh - var(--s-10) - var(--s-8)); /* tallest a card may be: room for the row above and the arrows below */
  --deck-w: min(calc(100% - var(--deck-peek)), calc(var(--deck-h) * 16 / 9)); /* 16:9 of the column, capped so the card fits the window */
  --deck-shadow: -12px 0 var(--s-9) rgba(0, 0, 0, 0.22);
  --deck-panel-shadow: -24px 24px var(--s-9) rgba(0, 0, 0, 0.15);
  /* the two declared colours on the site, from the Figma deck: Quint's paper
     and ink. In light mode the whole page is paper; every other light value is
     mixed from these two so the site stays one material */
  --quint-paper: #F0EEE9;
  --quint-ink: #282828;
  --quint-green: #1B4038;  /* 24 Oct (Peter): deep forest green, the one highlight, always with white text (was Surface lime #D1FEAE) */
  --on-green: var(--quint-paper);
  --bg: var(--quint-paper);
  --bg-deep: color-mix(in srgb, var(--quint-paper) 94%, var(--quint-ink));
  --surface: color-mix(in srgb, var(--quint-paper) 40%, white);
  --border: color-mix(in srgb, var(--quint-paper) 84%, var(--quint-ink));
  --ink: var(--quint-ink);
  --ink-mid: color-mix(in srgb, var(--quint-ink) 82%, var(--quint-paper));
  --ink-dim: color-mix(in srgb, var(--quint-ink) 55%, var(--quint-paper));
  --media: color-mix(in srgb, var(--quint-paper) 86%, var(--quint-ink));
  --pill-bg: var(--quint-ink);
  --pill-fg: var(--quint-paper);
  --accent: var(--quint-ink);
  --accent-fg: var(--quint-paper);
  /* card is the page colour; the shadow does the lifting (Peter, 16 Sep) */
  --deck-card: var(--quint-paper);
  --deck-panel: color-mix(in srgb, var(--quint-paper) 45%, white);
  --deck-tile: color-mix(in srgb, var(--quint-paper) 94%, var(--quint-ink));
}
html.dark {
  --deck-shadow: -12px 0 var(--s-9) rgba(0, 0, 0, 0.75);
  --deck-panel-shadow: -24px 24px var(--s-9) rgba(0, 0, 0, 0.5);
  --deck-card: var(--bg-deep);
  --deck-panel: var(--surface);
  --deck-tile: var(--bg-deep);
}
body { overflow-x: clip; }
/* form controls do not inherit type by default: every button and input is Aeonik like everything else */
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
.deck { outline: none; }
.deck-stage { position: relative; padding-top: var(--s-6); padding-bottom: var(--s-6); }
.card {
  position: absolute;
  top: var(--s-6);
  left: 0;
  width: var(--deck-w);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  background: var(--deck-card);
  box-shadow: var(--deck-shadow);
  overflow: hidden;
  text-transform: none;
  letter-spacing: normal;
  transform: translateX(var(--dx, 0px)) scale(var(--sc, 1));
  transform-origin: left center;
  opacity: var(--op, 1);
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), opacity 420ms var(--e-out);
  will-change: transform;
  container-type: inline-size; /* card type scales with the card, not the viewport */
}
.card.is-next { cursor: pointer; }
.card.is-next:hover { --op: 0.7; }
/* the next card only fades up once the incoming card has landed (620ms) */
.card.is-next { transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), opacity 420ms var(--e-out) 620ms; }
/* cards further ahead wait invisibly at the peek position; no travel */
.card.is-far { transition: none; }
.card.is-past, .card.is-far { pointer-events: none; }

/* chrome: Q roundel top-left, number bottom-left, wordmark bottom-right */
.q-mark {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--pill-bg);
  color: var(--pill-fg);
  display: grid;
  place-items: center;
  font-size: var(--t-small);
  font-weight: var(--fw-head);
}
.card-num { position: absolute; left: 5%; bottom: 6%; }
/* title card index: beside the Q roundel, the card's own micro type */
.card-index { position: absolute; top: 5%; left: calc(5% + 32px + var(--s-4)); margin: 0; line-height: 16px; text-transform: none; letter-spacing: normal; color: var(--ink-dim); }
.card-brand { position: absolute; right: 5%; bottom: 6%; text-transform: none; letter-spacing: normal; }

/* copy: headline column, 5% in, centred */
.card-copy {
  /* centred in the band between the roundel and the footer, so tall copy never runs into either */
  position: absolute;
  left: 5%;
  top: calc(5% + 32px + var(--s-4));
  bottom: calc(6% + 1.5em + var(--s-4));
  width: 43%;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}
.card-head {
  font-size: clamp(28px, 4.2cqw, 60px);
  font-weight: var(--fw-head);
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--s-5);
  text-wrap: balance; /* even lines, no orphan on the last line */
}
.card-body p {
  font-size: clamp(15px, 1.45cqw, 22px);
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--ink);
  max-width: 52ch;
  margin-bottom: var(--s-4);
}
.card-body p:last-child { margin-bottom: 0; }
.card-body a { color: inherit; text-decoration: none; }
.card-body a:hover { opacity: 0.6; }
.ph { color: var(--ink-dim); }
.card-next {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--ink);
  font-size: clamp(15px, 1.3cqw, 19px);
  color: var(--ink);
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--d-fast) var(--e-standard);
}
.card-next:hover { opacity: 0.6; }
.card-next svg { width: 14px; height: 14px; }
.card.title .card-copy { width: 44%; }
.card.title .card-head { font-size: clamp(30px, 4.8cqw, 68px); line-height: 1.02; }
.card.title .card-body p { color: var(--ink-mid); }
.card-lead { font-size: clamp(16px, 1.7cqw, 25px); font-weight: var(--fw-head); color: var(--ink); line-height: 1.4; margin-bottom: var(--s-4); max-width: 40ch; text-wrap: pretty; }

/* the panel: right half, radius 22, one plane up */
.card-panel {
  position: absolute;
  left: 53%;
  top: 50%;
  transform: translateY(-50%);
  width: 42%;
  height: auto;
  aspect-ratio: 992 / 804; /* every panel matches the title card's; content may grow it (no min-height: 0, or it can't) */
  max-height: 88%;
  padding: var(--s-5);
  border-radius: var(--r-xl);
  justify-content: center;
  background: var(--deck-panel);
  box-shadow: var(--deck-panel-shadow);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  overflow: hidden;
  justify-content: safe center;
}
.card-panel:has(.p-cols), .card-panel:has(.p-journey), .card-panel:has(.p-compare), .card-panel:has(.p-proof), .card-panel:has(.p-ask) { aspect-ratio: auto; }
/* sources: wider panel, smaller list, sized to content; scrolls only as a fallback, with a fade so the scroll is visible */
.card.sources .card-panel { left: 44%; width: 51%; aspect-ratio: auto; max-height: 90%; overflow: auto; scrollbar-width: none; justify-content: flex-start; padding-bottom: 0; }
.card.sources .card-panel::-webkit-scrollbar { display: none; }
.card.sources .card-panel::after { content: ""; position: sticky; bottom: 0; flex: none; height: var(--s-6); margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; background: linear-gradient(to bottom, transparent, var(--deck-panel)); pointer-events: none; }
.card.sources .card-copy { width: 36%; }
.p-eyebrow { margin-bottom: var(--s-1); }

/* panel title: a large headline inside the panel */
.p-title { font-size: clamp(22px, 2.6cqw, 38px); font-weight: var(--fw-head); color: var(--ink); line-height: 1.1; letter-spacing: var(--tracking-tight); margin-bottom: var(--s-3); text-wrap: balance; }

/* pills: rounded, an ink roundel with a Lucide glyph on the left, then label
   over status. .green is the Surface-green highlight, ink text. Two per row */
.p-pills { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
.p-pills.two { grid-template-columns: 1fr 1fr; }
.pill {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-5) var(--s-2) var(--s-2);
  border-radius: var(--r-full);
  background: var(--deck-tile);
  color: var(--ink);
  min-width: 0;
}
.pill-ico {
  flex: none;
  width: clamp(44px, 4.6cqw, 64px);
  height: clamp(44px, 4.6cqw, 64px);
  border-radius: var(--r-full);
  background: var(--pill-bg);
  color: var(--pill-fg);
  display: grid;
  place-items: center;
}
.pill-ico svg { width: 42%; height: 42%; }
.pill-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pill-label { font-size: clamp(15px, 1.5cqw, 22px); font-weight: var(--fw-head); line-height: 1.2; }
.pill-status { font-size: clamp(12px, 1.05cqw, 15px); color: var(--ink-dim); line-height: 1.3; }
.pill.dim .pill-ico { background: var(--surface); color: var(--ink-dim); }
.pill.green { background: var(--quint-green); color: var(--on-green); }
.pill.green .pill-ico { background: var(--on-green); color: var(--quint-green); }
.pill.green .pill-status { color: var(--on-green); font-weight: var(--fw-head); }
html.dark .pill.green { color: var(--on-green); }
.tile.note { border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); font-size: clamp(13px, 1.2cqw, 17px); }
.tile.note.green-ink { background: var(--quint-green); color: var(--on-green); }

/* tiles: the panel's inset plane; .inverted is the one ink element */
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  background: var(--deck-tile);
  color: var(--ink);
  border-radius: var(--r-lg);
}
.tile-head { font-size: clamp(15px, 1.5cqw, 22px); font-weight: var(--fw-head); line-height: 1.25; }
.tile-sub { font-size: clamp(12px, 1.1cqw, 16px); line-height: 1.45; color: var(--ink-mid); }
.tile-foot { font-size: clamp(12px, 1.1cqw, 16px); letter-spacing: 0.01em; color: var(--ink-dim); margin-top: auto; padding-top: var(--s-3); }
/* the Surface-green tile: ink text, the one highlight per panel */
.tile.green { background: var(--quint-green); color: var(--on-green); }
.tile.green .tile-sub, .tile.green .tile-foot, .tile.green .step-n, .tile.green .meta, .tile.green .bar-aside { color: var(--on-green); opacity: 0.85; }
.tile.green .tile-foot { font-weight: var(--fw-head); opacity: 1; }
.green-text { color: var(--quint-green); }
.tile.empty { background: none; box-shadow: inset 0 0 0 1px var(--border); }
.tile.empty .tile-foot { color: var(--ink); font-weight: var(--fw-head); }
.tile.inverted { background: var(--quint-ink); color: var(--quint-paper); }
.tile.inverted .tile-sub, .tile.inverted .tile-foot { color: var(--quint-paper); opacity: 0.8; }
.tile.note { font-size: var(--t-small); line-height: 1.45; }
.tile.big { justify-content: center; padding: var(--s-5) var(--s-5); }
.tile.big .tile-head { font-size: var(--t-h3); }
.tile.dim .tile-head { color: var(--ink-dim); }
.tile-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.tile-aside { font-size: var(--t-small); color: var(--ink-dim); text-align: right; white-space: nowrap; }
.p-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.p-tiles .tile { min-height: 0; }
.p-tiles .tile-foot { padding-top: var(--s-4); }
.p-rows { display: flex; flex-direction: column; gap: var(--s-3); }
.p-rows.tight { gap: var(--s-2); }
.p-rows.tight .tile { padding: var(--s-3) var(--s-4); }
.p-compare .tile-foot { color: var(--ink); font-weight: var(--fw-head); padding-top: var(--s-2); }
.p-rows .tile-row .tile-head { font-size: var(--t-lead); }
.p-big { font-size: clamp(64px, 10cqw, 150px); font-weight: var(--fw-head); color: var(--ink); line-height: 0.95; letter-spacing: var(--tracking-tight); }
.p-caption { font-size: clamp(15px, 1.6cqw, 24px); color: var(--ink-dim); margin-bottom: var(--s-4); text-wrap: pretty; }
.p-note { font-size: var(--t-small); color: var(--ink-mid); font-style: italic; margin-top: auto; }
.p-note.right { text-align: right; }
.p-foot { font-size: 11px; line-height: 1.4; color: var(--ink-dim); }
.p-arrow { display: block; width: 1px; height: var(--s-6); margin: var(--s-1) auto; background: var(--ink); position: relative; }
.p-arrow::after { content: ""; position: absolute; left: -3px; bottom: 0; width: 6px; height: 6px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: translateY(-1px) rotate(45deg); }
.p-steps { display: flex; flex-direction: column; gap: var(--s-2); }
.tile.step { flex-direction: row; gap: var(--s-4); align-items: center; }
.tile.step > div { display: flex; flex-direction: column; gap: var(--s-1); }
.step-n { font-size: clamp(12px, 1.1cqw, 15px); font-weight: var(--fw-head); color: var(--ink-dim); min-width: 2.4em; height: 2.4em; border-radius: var(--r-full); background: var(--surface); display: grid; place-items: center; flex: none; }
.tile.green .step-n { background: var(--on-green); color: var(--quint-green); opacity: 1; }
.step-n.ico { background: var(--pill-bg); color: var(--pill-fg); }
.step-n.ico svg { width: 45%; height: 45%; }
.tile.inverted .step-n { color: var(--pill-fg); opacity: 0.7; }
.step-link { display: flex; gap: var(--s-4); align-items: center; padding-left: var(--s-4); }
.step-link .p-arrow { margin: 0; }
.step-link > div { display: flex; flex-direction: column; }
.p-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); flex: 1; }
.tile.col { padding: var(--s-5); gap: var(--s-2); min-height: 0; }
.tile.col ul { flex: 1; }
.col-ico { width: clamp(36px, 3.4cqw, 48px); height: clamp(36px, 3.4cqw, 48px); border-radius: var(--r-full); background: var(--surface); color: var(--ink); display: grid; place-items: center; margin-bottom: var(--s-2); }
.col-ico svg { width: 46%; height: 46%; }
.tile.green .col-ico { background: var(--on-green); color: var(--quint-green); }
.tile.col .tile-head { font-size: clamp(17px, 1.8cqw, 26px); }
.tile.col .tile-foot { margin-top: auto; padding-top: var(--s-4); font-weight: var(--fw-head); color: var(--ink); }
.tile.col ul { list-style: none; margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.tile.col li { font-size: clamp(12px, 1.05cqw, 15px); line-height: 1.35; padding-left: var(--s-3); position: relative; }
.tile.col li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 4px; height: 4px; border-radius: var(--r-full); background: currentColor; }
/* proof: the two layers stacked, the built one carrying the Surface numbers */
.p-stack { display: flex; flex-direction: column; gap: var(--s-2); }
.tile.layer { padding: var(--s-5); gap: var(--s-2); }
.layer-tag { font-size: clamp(11px, 1cqw, 14px); color: var(--ink-dim); letter-spacing: 0.01em; }
.tile.green .layer-tag { color: var(--on-green); opacity: 0.7; }
.tile.layer .tile-head { font-size: clamp(18px, 2cqw, 28px); }
.layer-list { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); font-size: clamp(12px, 1.1cqw, 16px); line-height: 1.4; color: var(--ink-mid); }
.layer-list li { padding-left: var(--s-4); position: relative; }
.layer-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: var(--r-full); background: currentColor; opacity: 0.6; }
.tile.green .layer-list { color: var(--on-green); }
.layer-stats { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: clamp(12px, 1.1cqw, 16px); color: var(--ink-mid); }
.layer-stats span { display: flex; align-items: baseline; gap: var(--s-2); }
.layer-stats b { font-weight: var(--fw-head); color: var(--ink); font-size: clamp(16px, 1.7cqw, 24px); letter-spacing: var(--tracking-tight); }
/* approach: the three stage marks across the top of the walkthrough, at the Q mark's weight */
.p-stages { display: flex; gap: var(--s-5); margin-bottom: var(--s-3); }
.stage { display: inline-flex; align-items: center; gap: var(--s-2); }
.stage-ico { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--pill-bg); color: var(--pill-fg); display: grid; place-items: center; }
.stage-ico svg { width: 16px; height: 16px; }
.stage-lab { font-size: clamp(11px, 1cqw, 14px); color: var(--ink-mid); }
.p-mkt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.p-mkt .tile { padding: var(--s-3); }
.p-mkt .tile-head { font-size: clamp(16px, 1.7cqw, 24px); letter-spacing: var(--tracking-tight); }
.p-mkt .tile-row { flex-direction: column; align-items: flex-start; gap: 0; }
.p-mkt .tile-aside { order: -1; }
/* economics: chart beside the paused generative run */
.p-split { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-3); flex: 1; min-height: 0; }
.p-shot { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--quint-ink); }
.p-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.p-chart { position: relative; flex: 1; min-height: 0; padding: var(--s-5) var(--s-5) var(--s-5) 0; }
.p-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.p-chart .axis { fill: none; stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-chart .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.p-chart .line.dim { stroke: var(--border); }
/* sits on the right end of the rising line (y = 66/220 of the plot) */
/* labels hang off the line ends: both lines stop at 75% of the plot, each pill starts just past its end at that line's height */
.p-chart .lab-gen, .p-chart .lab-quint { position: absolute; left: calc(0.75 * (100% - var(--s-5)) + var(--s-2)); transform: translateY(-50%); font-size: clamp(12px, 1.1cqw, 15px); font-weight: var(--fw-head); border-radius: var(--r-full); letter-spacing: 0; white-space: nowrap; }
.p-chart .lab-gen { top: calc(var(--s-5) + 0.182 * (100% - 2 * var(--s-5))); color: var(--on-green); background: var(--quint-green); padding: var(--s-1) var(--s-3); }
.p-chart .lab-quint { top: calc(var(--s-5) + 0.945 * (100% - 2 * var(--s-5))); display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-4) var(--s-1) var(--s-1); color: var(--on-green); background: var(--quint-green); }
.p-chart .lab-ico { width: 1.9em; height: 1.9em; border-radius: var(--r-full); background: var(--on-green); color: var(--quint-green); display: grid; place-items: center; }
.p-chart .lab-ico svg { width: 55%; height: 55%; }
.p-chart .line { stroke-width: 2.5; }
.p-chart .lab-x { position: absolute; right: var(--s-5); bottom: 0; font-size: clamp(12px, 1.1cqw, 15px); }
.p-market { display: flex; flex-direction: column; gap: var(--s-2); }
.tile.bar { width: var(--w, 100%); flex-direction: row; align-items: center; gap: var(--s-4); padding: var(--s-2) var(--s-5) var(--s-2) var(--s-2); border-radius: var(--r-full); }
.bar-lab { flex: none; width: clamp(44px, 4.6cqw, 64px); height: clamp(44px, 4.6cqw, 64px); border-radius: var(--r-full); background: var(--pill-bg); color: var(--pill-fg); display: grid; place-items: center; font-size: clamp(11px, 1cqw, 14px); font-weight: var(--fw-head); letter-spacing: 0.04em; }
.tile.green .bar-lab { background: var(--on-green); color: var(--quint-green); opacity: 1; }
.bar-row { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.bar-val { font-size: clamp(20px, 2.4cqw, 34px); font-weight: var(--fw-head); letter-spacing: var(--tracking-tight); line-height: 1.1; }
.bar-aside { font-size: clamp(12px, 1.1cqw, 15px); color: var(--ink-dim); white-space: nowrap; }
.tile.inverted .bar-aside, .tile.inverted .meta { color: var(--pill-fg); opacity: 0.8; }
.p-market .p-foot { margin-bottom: var(--s-2); }
.p-team { display: flex; flex-direction: column; gap: var(--s-5); justify-content: center; flex: 1; }
.person { display: grid; grid-template-columns: 30% 1fr; gap: var(--s-4); align-items: start; }
.person .photo { aspect-ratio: 1; background: var(--deck-tile); display: grid; place-items: center; overflow: hidden; border-radius: var(--r-lg); }
.person p { font-size: clamp(12px, 1.15cqw, 16px); }
.person p + p { margin-top: var(--s-1); }
.person .photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person > div:last-child { display: flex; flex-direction: column; gap: var(--s-1); }
.person p { font-size: var(--t-small); line-height: 1.45; color: var(--ink); margin-top: var(--s-2); }
.tile.ms { min-height: 0; gap: var(--s-2); }
.ms-n { font-size: clamp(12px, 1.1cqw, 15px); font-weight: var(--fw-head); color: var(--ink-dim); width: 2.4em; height: 2.4em; border-radius: var(--r-full); background: var(--surface); display: grid; place-items: center; margin-bottom: var(--s-1); }
.tile.green .ms-n { background: var(--on-green); color: var(--quint-green); opacity: 1; }
.p-tiles .tile.ms .tile-foot { padding-top: var(--s-2); }
/* title card: the motion loop. The panel takes the loop's own background so
   the two images float on it; the panel's shadow is the drop shadow */
.p-motion { width: 100%; height: 100%; display: block; transform: scale(1.01); }
/* the panel takes the loop's own ratio so nothing is cropped */
.card.title .card-panel { padding: 0; }
/* title card: 4×4 grid, the centre four inverted (kept for reuse) */
.p-grid16 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); width: 62%; margin: auto; aspect-ratio: 1; }
.p-grid16 span { background: var(--deck-tile); }
.p-grid16 span.on { background: var(--pill-bg); }
/* pricing: name, per-seat price, ACV on one row; seats and features under */
.p-price { display: flex; flex-direction: column; gap: var(--s-1); }
.price-head { display: flex; justify-content: space-between; padding: 0 var(--s-4) var(--s-1); }
.price-head .meta { letter-spacing: 0.12em; }
.tile.price { gap: var(--s-1); padding: var(--s-2) var(--s-4); }
.tile.price .tile-sub { font-size: 11px; line-height: 1.4; }
.price-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-4); align-items: baseline; }
.price-val, .price-acv { font-size: clamp(16px, 1.7cqw, 24px); font-weight: var(--fw-head); letter-spacing: var(--tracking-tight); }
.price-acv { text-align: right; min-width: 5ch; }
.price-seats { font-size: clamp(12px, 1.1cqw, 15px); font-weight: var(--fw-head); color: var(--ink-mid); }
.tile.green .price-seats { color: var(--on-green); opacity: 0.85; }
.tile.price-foot { padding: var(--s-3) var(--s-4); }
.tile.price-foot strong { font-weight: var(--fw-head); color: var(--ink); }
/* compact team: name with role aside, one line under */
.p-team-compact { display: flex; flex-direction: column; gap: var(--s-3); }
.person-line { display: flex; flex-direction: column; gap: var(--s-1); }
.p-rule { height: 1px; background: var(--border); margin: var(--s-2) 0; }
/* SOM workings: stacked tiles, figure aside the head like the pricing tiles */
.p-som { display: flex; flex-direction: column; gap: var(--s-2); }
.tile.som { gap: var(--s-1); padding: var(--s-3) var(--s-4); }
.tile.som .tile-sub { font-size: 11px; line-height: 1.4; }
.som-val { font-size: clamp(18px, 2cqw, 28px); font-weight: var(--fw-head); letter-spacing: var(--tracking-tight); line-height: 1; white-space: nowrap; }
.som-calc { font-size: clamp(12px, 1.1cqw, 15px); font-weight: var(--fw-head); color: var(--ink-mid); padding-top: var(--s-1); }
.tile.green .som-calc { color: var(--on-green); opacity: 0.85; }
.tile.ms .meta { margin-bottom: var(--s-2); }
.src { list-style: none; display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-3); }
.src li { font-size: clamp(10px, 0.8cqw, 13px); line-height: 1.4; color: var(--ink-mid); }

/* nav: arrows centred under the card, counter beside them */
.slide-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
  width: var(--deck-w);
}
.slide-arrow {
  width: 30px;
  padding: 0;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font: inherit;
  transition: opacity 160ms var(--e-standard);
}
.slide-arrow svg { width: 14px; height: 14px; }
.slide-arrow[disabled] { opacity: 0.38; pointer-events: none; }
.slide-count { margin-left: var(--s-2); }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

/* ---- pulldown pads: tenets keep the text cap, decks take the full column ---- */
.reveal-pad.pad-tenets { max-width: 640px; }
/* the reveal clips while it opens; give the card shadow room inside the clip
   and pull the deck back to the column edge */
.row:has(.pad-deck) .reveal-inner { margin: 0 calc(-1 * clamp(24px, 6vw, 96px)) 0 calc(-1 * var(--s-9)); padding: 0 clamp(24px, 6vw, 96px) 0 var(--s-9); }
.reveal-pad.pad-deck { max-width: none; padding: var(--s-9) 0 var(--s-9); }
.row.open .deck { margin-top: 0; }
.pad-deck .deck-stage { padding-top: 0; }

/* ---- thesis: numbered tenets, the philosophical view in prose ---- */
.tenets { display: flex; flex-direction: column; gap: var(--s-6); max-width: 640px; }
.tenet { display: grid; grid-template-columns: 3ch 1fr; gap: var(--s-4); text-transform: none; letter-spacing: normal; }
.tenet-n { padding-top: 0.45em; }
.tenet-head {
  font-size: var(--t-h3);
  font-weight: var(--fw-head);
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--s-2);
}
.tenet-body { font-size: var(--t-body); line-height: 1.5; color: var(--ink-mid); max-width: 60ch; }
.deck { margin-top: var(--s-5); scroll-margin-top: var(--s-7); }

/* ---- focus: no browser ring on click; a hairline ring for keyboard users ---- */
.row-head:focus, .deck:focus, .slide-arrow:focus, .card-next:focus { outline: none; }
.row-head:focus-visible, .slide-arrow:focus-visible, .card-next:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ---- no upper case anywhere on this site (Peter, 16 Sep) ---- */
.section-label, .row, .meta, .graph-labels .x, .graph-labels .y { text-transform: none; }
.section-label { letter-spacing: 0; }
.row { letter-spacing: 0.01em; }
.meta { letter-spacing: 0.02em; }

/* ---- founders: small, low on the page. Photo left in a rounded rectangle,
   name and role beside it, one line under ---- */
.founders-section { margin-top: var(--s-10); }
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); max-width: 830px; text-transform: none; letter-spacing: normal; }
.founder { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.founder-photo { width: 74px; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: var(--r-md); background: var(--media); display: block; filter: grayscale(1); }
.founder-name { font-size: var(--t-lead); font-weight: var(--fw-head); color: var(--ink); line-height: 1.3; }
.founder-role { font-size: var(--t-body); color: var(--ink-dim); margin-top: 2px; }
.founder-bio { font-size: var(--t-body); line-height: 1.45; color: var(--ink-mid); max-width: 36ch; margin-top: var(--s-2); }
.founders-note { font-size: var(--t-body); line-height: 1.5; color: var(--ink-mid); max-width: 60ch; margin-top: var(--s-6); text-transform: none; letter-spacing: normal; }
.contact-pill { margin-top: var(--s-6); }

/* ---- gate: password card, ported from the VDL reference (no logo wall) ---- */
.gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background: var(--bg);
  transition: opacity 600ms var(--e-out), background-color 400ms var(--e-out);
}
.gate.unlocked { opacity: 0; pointer-events: none; }
.theme-toggle { z-index: var(--z-modal); }
.gate-card {
  --e-emph: cubic-bezier(0.66, 0, 0.16, 1.03);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  width: fit-content;
}
.gate-word {
  font-weight: var(--fw-head);
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.gate-word .gw-sub { font-weight: var(--fw-med); }
/* the wordmark itself in place of the typed name; sized to the line's cap height */
.gate-word { display: inline-flex; align-items: center; gap: var(--s-1); }
.gw-logo { display: inline-block; height: 13px; color: var(--ink); }
.gw-logo svg { display: block; height: 100%; width: auto; }
.gate-word .gw-bar { font-weight: 300; color: var(--ink-dim); margin: 0 2px; }
.gate-pill {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4);
  border-radius: var(--r-full);
  background: var(--surface);
  border: 0;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--d-fast) var(--e-standard), background-color 400ms var(--e-out);
}
html.dark .gate-pill { box-shadow: var(--shadow-lg); }
.gate-input {
  background: none;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-small);
  letter-spacing: 0.03em;
  width: 120px;
}
.gate-input::placeholder { color: var(--ink-dim); }
.gate-go {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  background: var(--pill-bg);
  color: var(--pill-fg);
  transition: opacity var(--d-fast) var(--e-standard);
}
.gate-go:hover { opacity: 0.85; }
.gate-go svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.gate.error .gate-pill { animation: gate-shake 0.36s var(--e-standard); }
@keyframes gate-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* the wordmark above the gate word, the same size as the landing's */
.gate-mark { margin-bottom: var(--s-2); }
.gate.intro .gate-mark { opacity: 0; transform: translateY(18px); }
.gate .gate-mark { opacity: 1; transform: none; transition: opacity 700ms var(--e-out) 120ms, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1) 120ms; }
/* entrance: word scales up as the pill unfurls from its arrow */
.gate .gate-word, .gate .gate-pill { will-change: transform, opacity; }
.gate.intro .gate-word { opacity: 0; transform: scale(0.92); }
.gate.intro .gate-pill { width: 36px; padding: var(--s-1); gap: 0; background: transparent; box-shadow: none; }
.gate.intro .gate-input { opacity: 0; width: 0; }
.gate.intro .gate-go { opacity: 0; transform: scale(0.7); }
.gate .gate-word {
  opacity: 1;
  transform: none;
  transition: opacity 560ms var(--e-out) 400ms, transform 900ms var(--e-emph) 400ms;
}
.gate .gate-pill {
  transition: width 780ms var(--e-emph) 920ms, padding 780ms var(--e-emph) 920ms,
    gap 780ms var(--e-emph) 920ms, background-color 520ms var(--e-out) 920ms,
    box-shadow 520ms var(--e-out) 920ms;
}
.gate .gate-input {
  opacity: 1;
  transition: width 780ms var(--e-emph) 920ms, opacity 420ms var(--e-out) 1280ms;
}
.gate .gate-go {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--e-out) 400ms, transform 700ms var(--e-emph) 400ms,
    background var(--d-fast) var(--e-standard);
}
@media (prefers-reduced-motion: reduce) {
  .gate .gate-word, .gate .gate-pill, .gate .gate-input, .gate .gate-go, .gate .gate-mark { transition: none; }
}

/* ---- logout: X top right, "Log out?" confirm pill unfurls beside it (VDL reference pattern). Sits under the gate until unlocked ---- */
.logout { position: fixed; top: var(--s-4); right: var(--s-4); z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--s-2); }
.logout-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--ink-dim); transition: color var(--d-fast) var(--e-standard); }
.logout-x:hover { color: var(--ink); }
.logout-x svg { width: 18px; height: 18px; }
.logout-confirm { height: 30px; max-width: 0; padding: 0; margin-right: calc(-1 * var(--s-2)); border: 0; border-radius: var(--r-full); background: var(--pill-bg); color: var(--pill-fg); cursor: pointer; font: inherit; font-size: var(--t-small); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; opacity: 0; pointer-events: none; transition: max-width 300ms cubic-bezier(0.16, 1, 0.3, 1), padding 300ms cubic-bezier(0.16, 1, 0.3, 1), margin 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms var(--e-out); }
.logout.confirming .logout-confirm { max-width: 120px; padding: 0 var(--s-3); margin-right: 0; opacity: 1; pointer-events: auto; }

/* ---- landing (quint.systems): the live page rebuilt on the VDL. Wordmark centred, the gate pill where "Coming soon" sat ---- */
body.landing { min-height: 100dvh; display: flex; flex-direction: column; }
.landing-mark { position: absolute; top: var(--s-6); right: var(--s-6); width: 64px; color: var(--ink); display: block; }
.landing-mark svg { display: block; width: 100%; height: auto; }
.landing-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-6); padding: var(--s-5); }
.landing-word { width: clamp(200px, 36vw, 380px); color: var(--ink); }
.landing-word svg { display: block; width: 100%; height: auto; }
.landing-gate { will-change: auto; }
.landing-gate.error { animation: gate-shake 0.36s var(--e-standard); }
.rise { opacity: 0; transform: translateY(18px); animation: rise 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.landing-word.rise { animation-delay: 150ms; }
.landing-line.rise { animation-delay: 800ms; }
.landing-gate.rise { animation-delay: 1400ms; }
.landing-pill { position: fixed; left: var(--s-6); bottom: var(--s-6); z-index: var(--z-sticky); }
.landing-pill.rise { animation-delay: 2000ms; }
/* chat roundel that unfurls into "Open the conversation" on hover or focus; icon stays on the left */
.convo { --e-emph: cubic-bezier(0.66, 0, 0.16, 1.03); display: inline-flex; align-items: center; height: 44px; max-width: 44px; border-radius: var(--r-full); background: var(--pill-bg); color: var(--pill-fg); text-decoration: none; overflow: hidden; box-shadow: var(--shadow-md); transition: max-width 520ms var(--e-standard); }
/* opening uses the gate's emphasised curve: quick out of the roundel, long soft settle. Closing stays plain */
.convo:hover, .convo:focus-visible { transition: max-width 760ms var(--e-emph); }
.convo-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; }
.convo-ico svg { width: 20px; height: 20px; }
.convo-label { white-space: nowrap; padding-right: var(--s-5); font-size: var(--t-small); letter-spacing: 0.01em; opacity: 0; transition: opacity 240ms var(--e-out); }
.convo:hover, .convo:focus-visible { max-width: 260px; }
.convo:hover .convo-label, .convo:focus-visible .convo-label { opacity: 1; transition: opacity 360ms var(--e-out) 160ms; }
.landing-hero .landing-line { margin-top: calc(-1 * var(--s-3)); }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; transform: none; } }

/* ---- design refine, 19 Sep (Peter): design led, less chunky. Card headlines stay bold; everything inside a panel goes lighter.
   Tiles: tighter radius, lighter fill, less padding, regular-weight heads. Pills: bare icon + label, no roundel blob.
   Roundels shrink to marks. The black note bar becomes a plain line. Banked css: versions/v04-pre-design-refine/site.css ---- */
.p-title { font-size: clamp(18px, 2cqw, 28px); margin-bottom: var(--s-4); }
.tile { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); gap: 2px; background: color-mix(in srgb, var(--deck-tile) 60%, var(--deck-panel)); }
html.dark .tile { background: var(--deck-tile); }
.tile-head { font-weight: var(--fw-reg); font-size: clamp(15px, 1.45cqw, 21px); }
.tile-sub { font-size: clamp(12px, 1.05cqw, 15px); line-height: 1.4; }
.tile-foot { font-size: clamp(11px, 1cqw, 14px); padding-top: var(--s-2); }
.tile.green .tile-foot, .p-compare .tile-foot, .tile.col .tile-foot, .tile.empty .tile-foot { font-weight: var(--fw-reg); }
.tile.inverted { background: none; color: var(--ink); padding: var(--s-2) 0 0; }
.tile.inverted .tile-sub, .tile.inverted .tile-foot { color: var(--ink-mid); opacity: 1; }
.tile.note, .tile.note.green-ink { background: none; color: var(--ink-mid); padding: var(--s-2) 0 0; border-radius: 0; font-size: clamp(12px, 1.1cqw, 15px); }
.p-pills { gap: var(--s-2); }
.pill { gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: color-mix(in srgb, var(--deck-tile) 60%, var(--deck-panel)); }
html.dark .pill { background: var(--deck-tile); }
.pill-ico { width: 28px; height: 28px; background: none; color: var(--ink); flex: none; }
.pill-ico svg { width: 20px; height: 20px; stroke-width: 1.5; }
.pill.dim .pill-ico { background: none; color: var(--ink-dim); }
.pill.green .pill-ico { background: none; color: var(--on-green); }
.pill-label { font-weight: var(--fw-reg); font-size: clamp(14px, 1.4cqw, 20px); }
.pill.green .pill-status { font-weight: var(--fw-reg); }
.step-n { min-width: 2em; height: 2em; font-weight: var(--fw-reg); background: none; }
.step-n.ico { width: 28px; min-width: 28px; height: 28px; background: none; color: var(--ink); }
.step-n.ico svg { width: 20px; height: 20px; stroke-width: 1.5; }
.tile.green .step-n { background: none; color: var(--on-green); }
.tile.step { gap: var(--s-3); }
.stage-ico { width: 24px; height: 24px; background: none; color: var(--ink); }
.stage-ico svg { width: 18px; height: 18px; stroke-width: 1.5; }
.stage { gap: var(--s-1); }
.col-ico { width: 28px; height: 28px; background: none; margin-bottom: var(--s-2); }
.col-ico svg { width: 20px; height: 20px; stroke-width: 1.5; }
.tile.green .col-ico { background: none; color: var(--on-green); }
.tile.col .tile-head { font-weight: var(--fw-head); font-size: clamp(15px, 1.5cqw, 21px); }
.bar-lab { width: auto; height: auto; min-width: 3em; padding: 0; border-radius: 0; background: none; color: var(--ink-dim); font-weight: var(--fw-reg); letter-spacing: 0.06em; }
.tile.bar { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); }
.tile.green .bar-lab, .tile.inverted .bar-lab { background: none; color: var(--on-green); opacity: 0.7; }
.tile.bar.green { background: var(--quint-green); }
.bar-val, .som-val, .price-val, .price-acv, .p-mkt .tile-head { font-weight: var(--fw-head); }
.tile.som .tile-head, .tile.price .tile-head, .tile.layer .tile-head { font-weight: var(--fw-head); }
.layer-tag { font-size: clamp(11px, 1cqw, 13px); }
.p-note { font-style: normal; color: var(--ink-dim); }

/* ---- design refine, pass 2, 19 Sep (Peter): the editorial guideline page. Micro labels in the corners, a hairline between the
   copy column and the content column, rows divided by rules instead of grey blobs, no raised panel, no shadows, no roundels.
   Green is the one flat swatch. Card headlines stay bold; everything else regular. ---- */
.card:not(.title)::before { content: attr(data-label); position: absolute; top: calc(5% + 8px); left: calc(5% + 32px + var(--s-4)); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-dim); text-transform: none; }
.q-mark { width: 24px; height: 24px; font-size: 10px; top: calc(5% + 4px); }
.card-index { top: calc(5% + 4px); left: calc(5% + 24px + var(--s-3)); }
.card-copy { top: calc(5% + 24px + var(--s-7)); justify-content: safe center; width: 40%; }
.card-panel, .card.sources .card-panel { left: 50%; width: 45%; top: calc(5% + 24px + var(--s-7)); bottom: calc(6% + 1.5em + var(--s-4)); height: auto; max-height: none; aspect-ratio: auto; transform: none; padding: 0 0 0 var(--s-6); border-left: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; justify-content: safe center; gap: 0; overflow: hidden; }
.card.title .card-panel { left: 53%; width: 42%; top: 50%; bottom: auto; transform: translateY(-50%); aspect-ratio: 992 / 804; padding: 0; border: 0; border-radius: var(--r-xl); background: var(--deck-panel); box-shadow: var(--deck-panel-shadow); overflow: hidden; }
.card.sources .card-panel { left: 44%; width: 51%; overflow: auto; justify-content: flex-start; }
.card.sources .card-panel::after { display: none; }
.card-copy .card-head { font-size: clamp(26px, 3.6cqw, 52px); }
.p-title { font-size: clamp(14px, 1.3cqw, 18px); font-weight: var(--fw-head); letter-spacing: 0; margin-bottom: var(--s-4); line-height: 1.3; }
/* rows: rule above each, no fill */
.tile { background: none; border-radius: 0; border-top: 1px solid var(--border); padding: var(--s-3) 0; gap: 2px; }
html.dark .tile { background: none; }
.p-rows, .p-rows.tight, .p-steps, .p-stack, .p-som, .p-price, .p-market, .p-journey .p-steps { gap: 0; }
.p-rows.tight .tile, .tile.price, .tile.som, .tile.layer, .tile.step, .tile.bar, .tile.col, .p-mkt .tile { padding: var(--s-3) 0; border-radius: 0; }
.p-tiles { gap: 0 var(--s-5); }
.tile:last-child { border-bottom: 1px solid var(--border); }
.p-tiles .tile:last-child, .p-tiles .tile:nth-last-child(2) { border-bottom: 1px solid var(--border); }
.tile-head { font-size: clamp(14px, 1.35cqw, 19px); }
.tile-sub { color: var(--ink-mid); }
.tile-foot { color: var(--ink-dim); }
/* the one swatch */
.tile.green, .pill.green { background: var(--quint-green); border-top: 0; border-radius: var(--r-xs); padding: var(--s-3) var(--s-4); margin-top: var(--s-2); }
.p-rows.tight .tile.green, .tile.price.green, .tile.som.green, .tile.layer.green, .tile.step.green, .tile.col.green, .p-mkt .tile.green, .tile.ms.green { padding: var(--s-3) var(--s-4); }
.tile.green + .tile { border-top: 0; }
.tile.green:last-child { border-bottom: 0; }
.tile.green .tile-sub, .tile.green .tile-foot { color: var(--on-green); opacity: 0.8; }
/* pills as rows: icon, label, status right */
.p-pills, .p-pills.two { display: flex; flex-direction: column; gap: 0; }
.pill { background: none; border-radius: 0; border-top: 1px solid var(--border); padding: var(--s-3) 0; gap: var(--s-3); }
html.dark .pill { background: none; }
.pill:last-child { border-bottom: 1px solid var(--border); }
.pill.green:last-child, .pill.green { border-bottom: 0; }
.pill-text { flex: 1; flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.pill-status { text-align: right; white-space: nowrap; }
.pill.green { padding: var(--s-3) var(--s-4); }
.pill.green .pill-status { color: var(--on-green); opacity: 0.8; }
.pill-ico { width: 20px; height: 20px; }
.pill-ico svg { width: 18px; height: 18px; }
/* steps and stages */
.tile.step { align-items: flex-start; }
.step-n, .step-n.ico { width: 20px; min-width: 20px; height: 20px; margin-top: 2px; }
.step-n.ico svg { width: 18px; height: 18px; }
.p-stages { gap: var(--s-4); margin-bottom: var(--s-4); }
.stage-lab { font-size: 11px; letter-spacing: 0.06em; }
/* pricing as a table */
.price-head { padding: 0 0 var(--s-2); }
.price-head .meta, .layer-tag, .bar-lab, .tile-aside, .meta { font-size: 11px; letter-spacing: 0.06em; color: var(--ink-dim); }
.tile.price .tile-sub, .price-seats { font-weight: var(--fw-reg); color: var(--ink-mid); }
.price-seats { color: var(--ink); }
/* market bars: flat swatch strips */
.tile.bar { width: var(--w, 100%); padding: var(--s-3) var(--s-4); border-top: 0; border-radius: var(--r-xs); background: var(--deck-tile); margin-bottom: var(--s-1); }
.tile.bar:last-child { border-bottom: 0; }
.bar-lab { min-width: 3em; text-align: left; }
.p-market .p-foot { margin: var(--s-1) 0 var(--s-3); }
/* customers: two columns with a rule between */
.p-cols { gap: var(--s-5); grid-template-columns: 1fr 1.35fr; }  /* 25 Oct: Campaigns carries twice the steps */
.tile.col { border-top: 1px solid var(--border); padding-top: var(--s-3); }
.tile.col.green { border-top: 0; }
/* team: photos square-cornered, small */
.person .photo { border-radius: var(--r-xs); }
.person { grid-template-columns: 22% 1fr; }
/* chart panel: keep the plot, drop the frame */
.p-chart { padding-left: 0; }
/* sources */
.src { gap: var(--s-2); }
/* footer marks */
.card-num, .card-brand { font-size: 11px; letter-spacing: 0.06em; }
.card-next { font-size: clamp(13px, 1.1cqw, 15px); }
/* ---- narrow cards under the editorial layout (pass 2 overrides the earlier block, so it is restated here) ---- */
@container (max-width: 1200px) {
  .card-copy, .card-panel { top: calc(5% + 24px + var(--s-4)); bottom: calc(6% + var(--s-3)); }
  .card-copy { width: 42%; }
  .card-panel { left: 47%; width: 48%; padding-left: var(--s-5); }
  .card.title .card-copy { width: 44%; }
  .card.title .card-panel { left: 53%; width: 42%; }
  .card-copy .card-head { font-size: clamp(20px, 3.4cqw, 52px); }
  .card-body p { font-size: clamp(12px, 1.25cqw, 19px); margin-bottom: var(--s-2); }
  .p-title { margin-bottom: var(--s-2); }
  .tile, .p-rows.tight .tile, .tile.price, .tile.som, .tile.layer, .tile.step, .tile.col, .p-mkt .tile, .pill { padding-top: var(--s-2); padding-bottom: var(--s-2); }
  .tile.green, .pill.green { padding: var(--s-2) var(--s-3); }
  .tile-head { font-size: clamp(12px, 1.3cqw, 19px); }
  .tile-sub, .tile-foot, .layer-list, .pill-status, .src li { font-size: clamp(10px, 1cqw, 15px); line-height: 1.3; }
  .p-diagram { margin-bottom: var(--s-1); }
  .p-stages { margin-bottom: var(--s-2); }
  .tile.bar { padding: var(--s-2) var(--s-3); }
}
/* copy-led cards (Belief, Close): no panel, so the copy column widens */
.card:not(:has(.card-panel)) .card-copy, .card.title:not(:has(.card-panel)) .card-copy { width: 62%; }
.card:not(:has(.card-panel)) .card-body p { max-width: 60ch; }
/* panel body copy (Belief, Vision) */
.p-body { font-size: clamp(14px, 1.3cqw, 19px); line-height: 1.45; color: var(--ink); max-width: 40ch; text-wrap: pretty; }
.p-body.big { font-size: clamp(18px, 2cqw, 28px); font-weight: var(--fw-head); line-height: 1.2; margin-bottom: var(--s-3); }
.p-body.links a { color: inherit; text-decoration: none; }
/* diagrams (routes, phases): inline SVG in the panel, tokens for every fill and stroke, Aeonik for the text */
.p-diagram { width: 100%; height: auto; display: block; overflow: visible; margin-bottom: var(--s-3); }
.p-diagram text { font-family: var(--font); }
.p-diagram .d-title { font-size: 21px; font-weight: var(--fw-reg); }
.p-diagram .d-sub { font-size: 16px; }
.p-diagram .d-cap { font-size: 13px; letter-spacing: 0.06em; }
.p-diagram .d-rule { stroke: var(--border); stroke-width: 1; }
.p-diagram .d-ink { fill: var(--ink); } .p-diagram .d-mid { fill: var(--ink-mid); } .p-diagram .d-dim { fill: var(--ink-dim); }
.p-diagram .d-faint { fill: var(--border); }
.p-diagram .d-inkdim { fill: var(--quint-ink); opacity: 0.7; }
.p-diagram .d-tile { fill: var(--deck-tile); }
.p-diagram .d-inkfill { fill: var(--pill-bg); } .p-diagram .d-paper { fill: var(--pill-fg); } .p-diagram .d-paperdim { fill: var(--pill-fg); opacity: 0.7; }
.p-diagram .d-green { fill: var(--quint-green); } .p-diagram .d-inkstroke { stroke: var(--quint-ink); stroke-width: 1.2; }
.p-diagram { --green-line: var(--quint-green); }
html.dark .p-diagram { --green-line: color-mix(in srgb, var(--quint-green) 45%, var(--on-green)); }
.p-diagram .d-greenfill { fill: var(--green-line); }
.p-diagram .d-line { fill: none; stroke: var(--ink-mid); stroke-width: 1.6; }
.p-diagram .d-gline { fill: none; stroke: var(--green-line); stroke-width: 2.6; }
.p-diagram + .p-note { margin-top: var(--s-2); }
.p-diagram .d-curve { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.p-diagram .d-handle { stroke: var(--ink-dim); stroke-width: 1; stroke-dasharray: 3 4; }
.p-diagram .d-guide { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.person-link { display: inline-block; margin-top: var(--s-2); font-size: 11px; letter-spacing: 0.06em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.person-link:hover { opacity: 0.6; }
.person-link.ph-link { border-bottom: 0; }
/* how it feels: one fixed SVG composition, scaled to fit the panel's height. Nothing reflows */
.p-feel { display: flex; justify-content: center; align-items: center; flex: 1; min-height: 0; }
.ffeel { width: auto; height: 100%; max-width: 100%; max-height: 100%; display: block; margin: 0; overflow: visible; }
.ffeel text { font-family: var(--font); }
.ffeel .fe-cap { font-size: 12px; letter-spacing: 0.06em; fill: var(--ink-dim); }
.ffeel .fe-h { font-size: 24px; fill: var(--ink); }
.ffeel .fe-pill { fill: var(--ink); }
.ffeel .fe-pill.d-paper { fill: var(--pill-fg); }
.ffeel .fe-title { font-size: 13px; font-weight: var(--fw-head); fill: var(--ink); }
.ffeel .fe-vals { font-size: 10.5px; fill: var(--ink); }
.ffeel .fe-box { fill: none; stroke: var(--ink); stroke-width: 0.85; }
.ffeel .fe-grid { fill: none; stroke: var(--ink); stroke-width: 0.56; }
.ffeel .fe-curve { fill: none; stroke: var(--ink); stroke-width: 5.16; stroke-linecap: round; }
.card-panel:has(.p-feel) { justify-content: center; overflow: hidden; }
/* the panel's own shadow token off */
.card-panel:not(.card.title .card-panel) { box-shadow: none; }

/* ---- narrow cards: below 1200px of card width the fixed type floors stop the panel scaling with the card,
   so tighten type, padding and gaps together. Fixes the third-tile clipping on the denser panels ---- */
@container (max-width: 1200px) {
  .card-head { font-size: clamp(22px, 4.2cqw, 60px); }
  .card-body p { font-size: clamp(13px, 1.3cqw, 19px); }
  .card-lead { font-size: clamp(14px, 1.7cqw, 25px); }
  .card-panel { left: 46%; width: 49%; padding: var(--s-4); gap: var(--s-2); max-height: 92%; }
  .card-copy { width: 40%; }
  .card.title .card-panel { left: 53%; width: 42%; }
  .card.title .card-copy { width: 44%; }
  .card.sources .card-panel { left: 40%; width: 55%; }
  .card.sources .card-copy { width: 34%; }
  .p-title { font-size: clamp(17px, 2.6cqw, 38px); margin-bottom: var(--s-2); }
  .tile { padding: var(--s-3) var(--s-4); }
  .p-rows, .p-rows.tight, .p-tiles, .p-steps, .p-stack, .p-som, .p-price, .p-pills, .p-journey .p-steps { gap: var(--s-1); }
  .p-rows.tight .tile, .tile.price, .tile.som { padding: var(--s-2) var(--s-3); }
  .tile-head, .pill-label { font-size: clamp(13px, 1.5cqw, 22px); }
  .tile-sub, .tile-foot, .layer-list, .tile-aside, .pill-status, .step-n, .price-seats, .som-calc { font-size: clamp(10px, 1.1cqw, 16px); line-height: 1.35; }
  .tile-foot, .p-compare .tile-foot, .som-calc { padding-top: var(--s-1); }
  .tile.layer { padding: var(--s-3) var(--s-4); }
  .card-body p { line-height: 1.4; margin-bottom: var(--s-3); }
  .tile.col { padding: var(--s-3); }
  .col-ico { width: 32px; height: 32px; margin-bottom: var(--s-2); }
  .tile.col .tile-head { font-size: clamp(14px, 1.8cqw, 26px); }
  .tile.col ul { margin-top: var(--s-2); gap: var(--s-1); }
  .tile.col li { font-size: clamp(10px, 1.05cqw, 15px); line-height: 1.3; }
  .tile.col .tile-foot { padding-top: var(--s-2); }
  .tile.bar { padding: var(--s-2) var(--s-3); gap: var(--s-3); }
  .bar-lab { width: 36px; height: 36px; font-size: 10px; }
  .bar-val { font-size: clamp(16px, 2.4cqw, 34px); }
  .p-market .p-foot { margin-bottom: var(--s-1); }
  .p-foot { font-size: 10px; line-height: 1.3; }
  .tile.som .tile-sub { line-height: 1.3; }
  .tile.price { padding: var(--s-2) var(--s-3); }
  .tile.price .tile-sub, .price-seats { font-size: 10px; line-height: 1.3; }
  .price-head { padding-bottom: 0; }
  .bar-aside { font-size: 10px; }
  .bar-lab { width: 32px; height: 32px; }
  .card-panel:has(.p-price), .card-panel:has(.p-market) { max-height: 94%; }
  .tile.layer .tile-head { font-size: clamp(15px, 2cqw, 28px); }
  .layer-list li { padding-left: var(--s-3); }
}

/* ---- responsive. The scroller must never widen its column: minmax(0) + min-width 0 ---- */
.entries { min-width: 0; }
/* ---- below 1500px the 16:9 card cannot hold the editorial panel beside its copy: stack copy over panel, ratio gives way (was 1100, raised 24 Sep) ---- */
@media (max-width: 1500px) {
  :root { --deck-w: calc(100% - var(--deck-peek)); }
  .card { aspect-ratio: auto; padding: var(--s-9) var(--s-5) var(--s-8); }
  .q-mark { top: var(--s-5); left: var(--s-5); }
  .card-index { top: var(--s-5); left: calc(var(--s-5) + 32px + var(--s-4)); }
  .card-num, .card-brand { bottom: var(--s-5); }
  .card-num { left: var(--s-5); }
  .card-brand { right: var(--s-5); }
  .card-copy, .card.title .card-copy, .card.sources .card-copy { position: static; width: auto; transform: none; display: block; }
  .card-panel, .card.title .card-panel, .card.sources .card-panel { position: static; left: auto; width: auto; height: auto; max-height: none; aspect-ratio: auto; transform: none; margin-top: var(--s-6); padding: var(--s-4); }
  .card.title .card-panel { padding: 0; }
  .card.sources .card-panel { overflow: visible; }
  .card.sources .card-panel::after { display: none; }
  .card:not(.title)::before { top: calc(var(--s-5) + 4px); left: calc(var(--s-5) + 24px + var(--s-3)); }
  .card-panel, .card.sources .card-panel { border-left: 0; border-top: 1px solid var(--border); padding: var(--s-5) 0 0; margin-top: var(--s-5); }
  .card-panel:has(.p-feel) { height: 560px; }
  .card.title .card-panel { border: 0; padding: 0; }
  .p-shot { max-height: 260px; }
  .p-chart { min-height: 200px; }
}
/* ---- phone: one column everywhere ---- */
@media (max-width: 720px) {
  :root { --deck-peek: var(--s-5); --deck-gap: var(--s-5); }
  .section { grid-template-columns: minmax(0, 1fr); }
  .deck-stage { overflow: visible clip; }
  .p-tiles, .p-cols, .founders, .p-pills.two, .p-split { grid-template-columns: 1fr; }
}
}
@media (max-width: 480px) {
  .gate-word { font-size: var(--t-small); text-align: center; }
}

/* ---- Figma light deck merge, 22 Oct (Peter): the portal takes the Figma deck's look (QUINT page 9831:136).
   Label and note top left, the easing mark top right, a regular-weight headline at the top of the copy column,
   "Quint – label" footer left with the number right, lime cover and close. Panels, video and navigation stay. ---- */
.card:not(.title)::before { content: none; }
.card-label { position: absolute; top: 5%; left: 5%; width: 26%; display: flex; flex-direction: column; gap: var(--s-1); }
.card-label-name { font-size: clamp(13px, 1.05cqw, 20px); line-height: 1.3; color: var(--ink); }
.card-label-note { font-size: clamp(11px, 0.85cqw, 16px); line-height: 1.4; color: var(--ink-dim); text-wrap: pretty; }
.q-mark { top: 5%; left: auto; right: 5%; width: clamp(24px, 2.1cqw, 40px); height: clamp(24px, 2.1cqw, 40px); background: var(--quint-ink); color: var(--quint-paper); }
.q-mark svg { width: 62%; height: 62%; }
.card-index { top: 5%; left: 5%; line-height: 1.4; }
.card-brand { left: 5%; right: auto; }
.card-num { left: auto; right: 5%; }
.card-copy { top: 19%; justify-content: flex-start; }
.card-panel:not(.card.title .card-panel), .card.sources .card-panel { top: 19%; }
.card-head, .card-copy .card-head { font-weight: var(--fw-reg); letter-spacing: var(--tracking-tight); line-height: 1.06; }
.card.title .card-head { font-size: clamp(30px, 5.2cqw, 76px); }
/* lime cards keep Quint ink in either theme */
.card.lime { background: var(--quint-green); --ink: var(--on-green); --ink-mid: color-mix(in srgb, var(--on-green) 82%, var(--quint-green)); --ink-dim: color-mix(in srgb, var(--on-green) 60%, var(--quint-green)); --border: color-mix(in srgb, var(--on-green) 18%, var(--quint-green)); color: var(--on-green); }
.card.lime .card-copy { top: 30%; }
@container (max-width: 1200px) {
  .card-copy, .card-panel:not(.card.title .card-panel) { top: 21%; }
}
@media (max-width: 1500px) {
  .card { padding-top: calc(var(--s-9) + var(--s-6)); }
  .card-label { top: var(--s-5); left: var(--s-5); width: 60%; }
  .q-mark { top: var(--s-5); left: auto; right: var(--s-5); }
  .card-index { top: var(--s-5); left: var(--s-5); }
  .card-brand { left: var(--s-5); right: auto; }
  .card-num { left: auto; right: var(--s-5); }
}
/* 22 Oct (Peter): cover on the deck paper like the rest, not lime; the mark is lime with an ink curve on every card (inverted on the lime Vision card so it still reads) */
.q-mark { background: var(--quint-green); color: var(--on-green); }
.card.lime .q-mark { background: var(--on-green); color: var(--quint-green); }

/* ---- motion, 22 Oct (Peter): rules from peterdickinson.io's live slides. Panel graphics rise 18px and fade in on the
   emphasised decelerate curve (opacity 700ms, travel 1100ms), staggered 70ms after a 200ms beat, the first time their card
   is in front. Bars grow from the left, chart lines draw. Headings, copy and footers never move. ---- */
.card { --e-emph: cubic-bezier(0.05, 0.7, 0.1, 1); }
.card-panel .a { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--e-emph), transform 1100ms var(--e-emph); transition-delay: calc(var(--i, 0) * 70ms + 200ms); }
.card.in .card-panel .a { opacity: 1; transform: none; }
.card-panel .tile.bar { transform: scaleX(0); transform-origin: left center; transition: transform 1200ms var(--e-emph) calc(var(--i, 0) * 60ms + 200ms); }
.card.in .card-panel .tile.bar { transform: none; }
.p-chart .line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--e-emph) 600ms; }
.card.in .p-chart .line { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .card-panel .a, .card-panel .tile.bar, .p-chart .line { opacity: 1; transform: none; stroke-dashoffset: 0; transition: none; }
}
/* How it feels: picked traits swap tile to ink on the same curve (sequence in app.js wireFeel) */
.ffeel rect, .ffeel text { transition: fill 300ms var(--e-emph); }
/* 24 Oct (Peter): the dial, which seat is AI and which is the brand's own person. Hairline rows like the tight tiles */
.card-panel:has(.p-dial) { aspect-ratio: auto; }
.p-dial { display: grid; grid-template-columns: 0.8fr 1fr 1.3fr; column-gap: var(--s-4); }
.p-dial > span { padding: var(--s-3) 0; border-bottom: 1px solid var(--border); font-size: clamp(12px, 1.05cqw, 15px); line-height: 1.35; color: var(--ink-mid); }
.p-dial > .meta { padding-top: 0; color: var(--ink-dim); }
.p-dial .dial-seat { color: var(--ink); }
.p-dial .dial-ai { color: var(--ink); font-weight: var(--fw-head); }
/* ---- 24 Oct (Peter): Maisa styling. Editorial serif heads over the grotesk body. (The card grid lines were tried and removed, Peter.)
   Newsreader stands in for Maisa's JT Peleton (commercial). Snapshot before: versions/v12-pre-maisa ---- */
@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root { --font-display: "Newsreader", Georgia, serif; --tracking-display: -0.03em; }
.card-head, .card-copy .card-head, .tenet-head, .p-big, .p-title {
  font-family: var(--font-display); font-weight: var(--fw-reg); letter-spacing: var(--tracking-display); font-optical-sizing: auto;
}
.card-head, .card-copy .card-head { line-height: 1; }
.p-big { line-height: 0.9; }
.card-copy .card-head { font-size: clamp(30px, 4.2cqw, 60px); }
/* Maisa-style data: serif figures inside diagrams, hatched fills on the compounding area */
.p-diagram .d-big { font-family: var(--font-display); font-size: 116px; letter-spacing: var(--tracking-display); }
.p-diagram .d-hatch { stroke: var(--green-line); stroke-width: 1; opacity: 0.7; }
.p-diagram .d-ongreen { fill: var(--on-green); } .p-diagram .d-ongreendim { fill: var(--on-green); opacity: 0.75; }
/* everything on forest green reads off white: text, icons, dims and rules */
.tile.green, .pill.green, .tile.note.green-ink { --ink: var(--on-green); --ink-mid: color-mix(in srgb, var(--on-green) 85%, var(--quint-green)); --ink-dim: color-mix(in srgb, var(--on-green) 70%, var(--quint-green)); --border: color-mix(in srgb, var(--on-green) 20%, var(--quint-green)); }
/* cover: the Quint wordmark, large, above the head */
.card-logo { width: clamp(72px, 10cqw, 150px); color: var(--ink); margin-bottom: var(--s-6); }
.card-logo svg { display: block; width: 100%; height: auto; }
/* 25 Oct (Peter): How it works columns line up: same box, padding and top edge on both, the green one filled */
.p-cols .tile.col { margin: 0; border: 0; border-radius: var(--r-xs); padding: var(--s-4); }
.p-cols .tile.col ul { gap: var(--s-1); margin-top: var(--s-2); }
.p-cols .col-ico { display: none; }  /* 25 Oct: room for the eight Campaigns steps */
/* 25 Oct: the dial has nine roles; rows stay on one line */
.p-dial { grid-template-columns: 0.62fr 1.19fr 1.19fr; }
.p-dial > span { padding: var(--s-2) 0; }

/* ---- 26 Oct (Peter): Maisa VDL details and the team icons.
   Two-tone heads: the closing clause sits in grey. Labels lead with a green dot.
   Team icons are one unit in even rings (scripts/build-team-icons.py); a hairline in the
   same ink closes the seams when the units meet. ---- */
.card-head .head-dim { color: var(--ink-dim); }
.card-label-name::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.55em; border-radius: var(--r-full); background: var(--quint-green); vertical-align: 0.08em; }
.card.lime .card-label-name::before { background: var(--on-green); }
.p-diagram .ti.d-ink { stroke: var(--ink); stroke-width: 0.35; stroke-linejoin: round; }
/* 26 Oct: the cover panel is the team, ten rings on one circle, paper on Quint green */
.p-cover { position: absolute; inset: 0; background: var(--quint-green); display: grid; place-items: center; }
.p-cover .p-diagram { width: 100%; height: 100%; }
.p-diagram .ti.d-ongreen { fill: var(--on-green); stroke: var(--on-green); stroke-width: 0.35; stroke-linejoin: round; }
.p-diagram .d-coverguide { fill: none; stroke: color-mix(in srgb, var(--on-green) 16%, transparent); stroke-width: 1; }

/* 28 Oct: Product walkthrough, Build · Campaign. The walkthrough page runs in a frame, loaded on first open */
.reveal-pad.pad-walk { max-width: none; padding: var(--s-6) 0 var(--s-8); }
.walk { aspect-ratio: 1440 / 1000; }  /* no container: the stage carries its own shadow */
.walk iframe { display: block; width: 100%; height: 100%; border: 0; }
/* centred on the page, not the entries column: the reveal opens out to the page edges (as the deck does), then the frame centres on the viewport */
@media (min-width: 721px) {
  .row:has(.pad-walk) .reveal-inner { --lead: calc(clamp(24px, 9vw, 180px) + 200px + var(--s-7)); margin: 0 calc(-1 * clamp(24px, 6vw, 96px)) 0 calc(-1 * var(--lead)); padding: 0 clamp(24px, 6vw, 96px) 0 var(--lead); }
  .pad-walk > * { --w: min(1280px, calc(100vw - 2 * clamp(24px, 6vw, 96px))); width: var(--w); margin-left: calc(50vw - var(--w) / 2 - var(--lead)); }
}
.walk-foot { display: flex; justify-content: center; margin-top: var(--s-4); text-align: center; }
.walk-foot .walk-note { margin: 0; }
.walk-full { gap: var(--s-2); border: 0; font-family: inherit; cursor: pointer; flex: none; }
.walk-full svg { width: 14px; height: 14px; }
.walk iframe:fullscreen { background: var(--bg); }