/* Dizian inner-page kit (Round A, 3 Oct 2026). Load after /assets/site.css, before the page's own <style>. Lifted from the homepage
   pieces that passed (lab/tm-merged), plus a headline device, a frame and cells. Tokens only; derived colours are listed in README.md. */

/* ============ Tokens (the homepage kept these inline; site.css lacks them) ============ */
:root {
  --ease-ui: cubic-bezier(0.25, 1, 0.5, 1);
  --t-fb: 180ms; --t-fb-lg: 240ms; --t-press: 100ms; /* feedback: hover and focus, the largest move, a press */
  --t-enter: 700ms;      /* state changes inside a surface; reveals keep their own 1.2s+ */
  --hover: var(--t-fb);  /* site.css keys its hover timings off --hover (0.5s there) */
  --graphite: color-mix(in srgb, var(--black) 94%, var(--background-white)); /* #272727, the homepage's dark ground */
  --bp-mark: color-mix(in srgb, var(--light-grey-lines) 56%, transparent);
  --bp-a12: color-mix(in srgb, var(--black) 12%, transparent); --bp-a50: color-mix(in srgb, var(--black) 50%, transparent); --bp-a88: color-mix(in srgb, var(--black) 88%, transparent);
  --bp-x: linear-gradient(transparent 6px, var(--bp-mark) 6px 7px, transparent 7px), linear-gradient(90deg, transparent 6px, var(--bp-mark) 6px 7px, transparent 7px);
  --ik-h2: clamp(2rem, 1rem + 3.2vw, 3.75rem); /* ~62px at 1440 (3.4x body), 32px floor (2x body) */
  --ik-ink: var(--black); --ik-line: var(--light-grey-lines); --ik-mute: var(--light-grey-text);
  --ik-edge: color-mix(in srgb, var(--light-grey-lines) 72%, var(--background-white)); /* the frame, a step lighter than a rule */
}
.is-dark {
  background-color: var(--graphite);
  --ik-ink: var(--on-dark); --ik-line: var(--line-on-dark); --ik-edge: var(--line-on-dark);
  --ik-mute: color-mix(in srgb, var(--background-white) 58%, var(--graphite)); /* #a0a0a0, 6.0:1 on graphite */
}

/* ============ Feedback (design-system §3a): 120 to 250ms on --ease-ui; a press scales to 0.98, never also lifts ============ */
.btn::after, .btn svg, .text-link svg, .nav-links a::before, .dd-trigger::before, .marquee-toggle, .package-link svg,
.faq-q > span:first-child, .journal-row h3, .journal-arrow { transition-duration: var(--t-fb); transition-timing-function: var(--ease-ui); }
.dd-trigger svg, .menu-icon::before, .menu-icon::after, .plus { transition: transform var(--t-fb-lg) var(--ease-ui); }
.dd-panel, .mobile-menu { transition: opacity var(--t-fb) var(--ease-ui), transform var(--t-fb) var(--ease-ui), visibility 0s linear var(--t-fb); }
.has-dd.is-open .dd-panel, .mobile-menu.is-open { transition: opacity var(--t-fb-lg) var(--ease-ui), transform var(--t-fb-lg) var(--ease-ui), visibility 0s; }
.nav-end .btn-dark { transition: background-color var(--t-fb-lg) var(--ease-ui), color var(--t-fb-lg) var(--ease-ui); }
/* the transform transition lives on :hover only, so it never smooths a GSAP reveal of the same element */
.btn:hover, .marquee-toggle:hover, .menu-btn:hover, .nav-links a:hover, .dd-trigger:hover {
  transition: transform var(--t-fb) var(--ease-ui), background-color var(--t-fb-lg) var(--ease-ui), color var(--t-fb-lg) var(--ease-ui);
}
.btn:active, .marquee-toggle:active, .menu-btn:active, .nav-links a:active, .dd-trigger:active { transform: scale(0.98); transition-duration: var(--t-press); }
.faq-q > span:first-child { transform-origin: 0 50%; }
.faq-q:active > span:first-child { transform: translateX(8px) scale(0.98); transition-duration: var(--t-press); }
.marquee-toggle { position: relative; isolation: isolate; }
.marquee-toggle::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--black); opacity: 0; transition: opacity var(--t-fb) var(--ease-ui); }
.marquee-toggle:hover::after { opacity: 0.07; }
.is-dark .marquee-toggle { color: var(--on-dark); border-color: var(--line-on-dark); }
.is-dark .marquee-toggle::after { background: var(--background-white); }
.package-link { min-height: 44px; } /* tap target: 26px in site.css */
h1, h2, h3 { text-wrap: balance; }

/* ============ One headline device (bar 4): every section H2, a natural second clause in grey ============ */
.ik-h2 { max-width: 20ch; font-family: var(--font-display); font-weight: 600; font-size: var(--ik-h2); line-height: 1.04; letter-spacing: -0.03em; color: var(--ik-ink); }
.ik-mute { color: var(--ik-mute); }
.ik-lede { margin-top: 24px; max-width: 52ch; }
.nw { white-space: nowrap; }

/* ============ The frame (bar 4): each band draws its stretch of two page-edge rules and a top hairline, in its own ink ============ */
.ik-band { position: relative; isolation: isolate; --ik-x: max(calc(var(--gutter) / 2), calc((100% - var(--container)) / 2)); }
.ik-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--ik-edge), var(--ik-edge)) left var(--ik-x) top 0 / 1px 100% no-repeat,
    linear-gradient(var(--ik-edge), var(--ik-edge)) right var(--ik-x) top 0 / 1px 100% no-repeat,
    linear-gradient(var(--ik-edge), var(--ik-edge)) 0 0 / 100% 1px no-repeat;
}
@media (max-width: 639px) { .ik-band::after { background-size: 0 0, 0 0, 100% 1px; } }

/* ============ Graphite: one light per band (.ik-light, at --lx --ly) and the Blueprint (.bp > .bp-grid) ============
   The grid's module divides the content width, so lines land on both content edges. Where the homepage clears it round each glyph
   with a canvas mask, --bp-q is a CSS gradient that is transparent over the copy (.bp--l, --r, --t); .bp--lo is a quiet 9% grid. */
.ik-light { background-image: radial-gradient(clamp(240px, 42vw, 680px) clamp(260px, 32vw, 480px) at var(--lx, 80%) var(--ly, 60%), color-mix(in srgb, var(--background-white) 8%, transparent), color-mix(in srgb, var(--background-white) 3.5%, transparent) 50%, transparent); }
.bp { position: absolute; inset: 0; z-index: -1; overflow: hidden; overflow: clip; pointer-events: none; container-type: size; }
.bp-grid {
  --n: var(--bp-n, 18); --ink: var(--bp-ink, 16%);
  --cw: calc(min(100cqw, var(--container)) - 2 * var(--gutter)); --m: calc(var(--cw) / var(--n));
  --x0: calc(50cqw - var(--cw) / 2 - 1px); --y0: calc(var(--section-y) - 1px);
  --fade-y: linear-gradient(transparent, var(--bp-a12) 24px, var(--bp-a50) 48px, var(--bp-a88) 72px, var(--black) 96px, var(--black) calc(100% - 96px), var(--bp-a88) calc(100% - 72px), var(--bp-a50) calc(100% - 48px), var(--bp-a12) calc(100% - 24px), transparent);
  --fade-x: linear-gradient(90deg, transparent calc(var(--x0) - 3 * var(--m)), var(--black) calc(var(--x0) - var(--m)), var(--black) calc(var(--x0) + var(--cw) + var(--m)), transparent calc(var(--x0) + var(--cw) + 3 * var(--m)));
  position: absolute; inset: 0;
}
.bp-grid::before {
  content: ""; position: absolute; inset: 0;
  --line: color-mix(in srgb, var(--light-grey-lines) var(--ink), transparent);
  background: linear-gradient(90deg, var(--line) 1px, transparent 1px) var(--x0) 0 / var(--m) 100%, linear-gradient(var(--line) 1px, transparent 1px) 0 var(--y0) / 100% var(--m);
  -webkit-mask: var(--fade-y), var(--fade-x), var(--bp-q, linear-gradient(var(--black), var(--black))); -webkit-mask-composite: source-in;
  mask: var(--fade-y), var(--fade-x), var(--bp-q, linear-gradient(var(--black), var(--black))); mask-composite: intersect;
}
.bp--l { --bp-q: linear-gradient(90deg, transparent 0 40%, var(--bp-a50) 46%, var(--black) 52%); }
.bp--r { --bp-q: linear-gradient(90deg, var(--black) 0 30%, var(--bp-a50) 36%, transparent 42%); }
.bp--t { --bp-q: linear-gradient(transparent 0 var(--bp-top, 320px), var(--bp-a50) calc(var(--bp-top, 320px) + 64px), var(--black) calc(var(--bp-top, 320px) + 128px)); }
.bp--lo { --bp-ink: 9%; }
@media (max-width: 1023px) { .bp--l, .bp--r { --bp-q: none; --bp-ink: 9%; } }
@media (max-width: 639px) { .bp { --bp-n: 10; } }
/* the sheet settles 48px slower than the content as a band scrolls in, still from mid-screen */
@supports (animation-timeline: view()) { .motion .bp-grid { animation: bp-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; } }
@keyframes bp-settle { from { transform: translate3d(0, -48px, 0); } }

/* ============ Cells (bar 5): 1 column, 2 from 640px, 3 or 4 from 1024px; first column on the content edge, "+" atop dividers ============ */
.ik-cells { --c: 1; display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); border-bottom: 1px solid var(--ik-line); }
.ik-cell { position: relative; padding: 24px 0 28px; border-top: 1px solid var(--ik-line); }
.ik-cell h3 { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.35; color: var(--ik-ink); }
.ik-cell h3 + p { margin-top: 8px; }
@media (min-width: 640px) {
  .ik-cells { --c: 2; margin-left: -25px; clip-path: inset(-12px -12px -12px 25px); }
  .ik-cell { padding: 24px 24px 32px; border-left: 1px solid var(--ik-line); }
  .ik-cell::before { content: ""; position: absolute; top: -7px; left: -7px; width: 13px; height: 13px; background: var(--bp-x); pointer-events: none; }
}
@media (min-width: 1024px) { .ik-cells--3 { --c: 3; } .ik-cells--4 { --c: 4; } }

/* ============ UI surface kit (design-system §3a "Product surfaces"). A surface is a drawing: aria-hidden, labelled "Illustrative
   example", its point in real text nearby. Each card sets its own inks (--ui-*), so every part draws on light and dark cards. ============ */
.ui-card {
  --ui-bg: var(--background-white); --ui-sunk: var(--white-smoke); --ui-ink: var(--black); --ui-muted: var(--dark-slate-grey-text);
  --ui-faint: var(--light-grey-text); --ui-line: var(--light-grey-lines); --ui-track: color-mix(in srgb, var(--black) 8%, transparent);
  position: relative; min-width: 0; background: var(--ui-bg); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: var(--radius-m);
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--black) 26%, transparent);
}
.ui-card--dark {
  --ui-bg: var(--black-dark-shapes); --ui-sunk: color-mix(in srgb, var(--background-white) 5%, var(--black-dark-shapes)); --ui-ink: var(--on-dark);
  --ui-muted: var(--on-dark-muted); --ui-faint: var(--on-dark-muted); --ui-line: var(--line-on-card); --ui-track: color-mix(in srgb, var(--background-white) 12%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--background-white) 14%, transparent), 0 24px 48px -24px color-mix(in srgb, var(--black) 60%, transparent);
}
/* lit edge on graphite: a face lighter at the top, a border brightest along the top, a dark ring and a soft drop */
.ui-lit {
  border-color: transparent;
  background: linear-gradient(color-mix(in srgb, var(--background-white) 9%, var(--graphite)), color-mix(in srgb, var(--background-white) 4%, var(--graphite))) padding-box,
    linear-gradient(color-mix(in srgb, var(--light-grey-lines) 44%, var(--graphite)), color-mix(in srgb, var(--light-grey-lines) 16%, var(--graphite)) 96px) border-box;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--black) 72%, transparent), 0 2px 4px color-mix(in srgb, var(--black) 40%, transparent), 0 32px 56px -24px color-mix(in srgb, var(--black) 85%, transparent);
}
.ui-float { box-shadow: 0 0 0 1px color-mix(in srgb, var(--black) 4%, transparent), 0 16px 32px -12px color-mix(in srgb, var(--black) 30%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--black) 30%, transparent); }
.ui-card--dark.ui-float { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--background-white) 14%, transparent), 0 16px 32px -12px color-mix(in srgb, var(--black) 50%, transparent); }
.ui-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--ui-line); border-radius: var(--radius-m) var(--radius-m) 0 0; background: var(--ui-sunk); font: 600 0.875rem/1.3 var(--font-display); }
.ui-top .ui-chip:last-child { margin-left: auto; }
.ui-dots { display: flex; gap: 6px; flex-shrink: 0; }
.ui-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ui-line); }
.ui-kicker { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ui-muted, var(--dark-slate-grey-text)); }
.ui-num { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.ui-meta { font: 500 var(--fs-small)/1.4 var(--font-body); color: var(--ui-faint, var(--light-grey-text)); }
.ui-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--ui-line, var(--light-grey-lines)); background: var(--ui-bg, var(--background-white));
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); line-height: 1.4; color: var(--ui-ink, var(--black));
}
.ui-chip--ink { border-color: var(--ui-ink); background: var(--ui-ink); color: var(--ui-bg); }
.ui-chip--off { color: var(--ui-faint); text-decoration: line-through; text-decoration-color: var(--ui-faint); }
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--ui-line, var(--light-grey-lines)); }
.ui-tick, .ui-x { position: relative; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--ui-ink); }
.ui-tick::after { content: ""; position: absolute; left: 5px; top: 5.5px; width: 8px; height: 4px; border: solid var(--ui-bg); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.ui-x { background: none; box-shadow: inset 0 0 0 1.5px var(--ui-faint); }
.ui-x::before, .ui-x::after { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 1.5px; background: var(--ui-faint); transform: rotate(45deg); }
.ui-x::after { transform: rotate(-45deg); }
.ui-meter { display: block; height: 6px; border-radius: 999px; overflow: hidden; background: var(--ui-track); }
.ui-meter > i { display: block; height: 100%; width: calc(var(--w, 1) * 100%); border-radius: inherit; background: var(--ui-ink); transform-origin: 0 50%; }
.ui-live-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-green) 28%, transparent); animation: ui-live 6s var(--ease-ui) infinite; animation-play-state: var(--ik-run, paused); }
@keyframes ui-live { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.ui-flip { display: inline-grid; justify-items: start; }
.ui-flip > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; }
.ui-flip > :first-child { opacity: 0; } /* the final face is the last one */
.ui-illustrative, .ui-cap { font-size: var(--fs-small); line-height: 1.55; color: var(--dark-slate-grey-text); }
.ui-cap { margin-top: 20px; max-width: 68ch; }
.ui-cap b { font-weight: 600; color: var(--ik-ink); }
.is-dark .ui-illustrative, .is-dark .ui-cap { color: var(--on-dark-muted); }

/* ============ Surfaces that draw as they enter: [data-draw] gets .is-drawn once, a third on screen; --d orders parts 80ms apart ============ */
.motion [data-draw] .dr { transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
.motion [data-draw]:not(.is-drawn) .dr { opacity: 0; transform: translateY(12px); }
.motion [data-draw] :is(.ui-meter > i, .dr-x, .dr-y) { transition: transform 1.1s var(--ease-out) calc(var(--d, 0) * 80ms); }
.motion [data-draw]:not(.is-drawn) :is(.ui-meter > i, .dr-x) { transform: scaleX(0); }
.motion [data-draw]:not(.is-drawn) .dr-y { transform: scaleY(0); }
.dr-x { transform-origin: 0 50%; }
.dr-y { transform-origin: 50% 100%; }

/* ============ Live loops and pause (WCAG 2.2.2): a loop plays var(--ik-run), running only while its [data-live] box is on screen
   and not paused; the .ik-pause button sits inside the box (motion mode only) ============ */
[data-live] { --ik-run: paused; }
[data-live].is-live { --ik-run: running; }
[data-live].is-paused { --ik-run: paused; }
.motion .marquee:not(.is-live) .marquee-track { animation-play-state: paused; }
.ik-pause {
  position: relative; isolation: isolate; display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border: 0; border-radius: 999px; background: var(--background-white); box-shadow: inset 0 0 0 1px var(--light-grey-lines); cursor: pointer;
  font: 600 var(--fs-small)/1 var(--font-display); color: var(--black); transition: transform var(--t-fb) var(--ease-ui);
}
.motion .ik-pause { display: inline-flex; }
.ik-pause::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--black); opacity: 0; transition: opacity var(--t-fb) var(--ease-ui); }
.ik-pause:hover::after { opacity: 0.06; }
.ik-pause:active { transform: scale(0.98); transition-duration: var(--t-press); }
.ik-pause svg { width: 12px; height: 12px; }
.ik-pause .i-play, .is-paused .ik-pause .i-hold { display: none; }
.is-paused .ik-pause .i-play { display: block; }

/* ============ Count-up figures: each digit in a cell as wide as its final digit, so the figure never moves ============ */
[data-countup] { white-space: nowrap; }
[data-countup] .fig, [data-countup] .fig > span { display: inline-block; }
[data-countup] .fig > span { transform-origin: 0 0; }
[data-countup] .is-lead { color: color-mix(in srgb, currentColor 30%, transparent); }

/* ============ Pinned step story (bar 3). Default (phones, short screens, ?still, no JS): each step, then its surface finished.
   Where the stage fits, JS pins it (.is-pinned), moves the cards into the frame and scrubs each card's --t from 0 to 1 ============ */
.story { --story-run: 180vh; }
.story-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 32px 64px; margin-bottom: clamp(48px, 7vw, 96px); }
.story-steps { display: grid; gap: clamp(56px, 8vw, 112px); }
.story-step { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .story-step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.story-text { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px 16px; padding-left: clamp(24px, 3vw, 40px); }
.story-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1; letter-spacing: -0.03em; color: var(--ik-ink); }
.story-text h3 { font-family: var(--font-body); font-weight: 400; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.3; color: var(--ik-ink); }
.story-text p { grid-column: 1 / -1; max-width: 48ch; }
/* rail: a hairline; the step being told is a black capsule filling with lime (the one lime mark), done steps a darker line */
.story-seg { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(var(--ik-line) 0 0) 50% 0 / 1px 100% no-repeat; }
.story-seg::before, .story-seg > span { content: ""; position: absolute; inset: 0; border-radius: 999px; }
.story-seg::before { background: var(--black); opacity: 0; transition: opacity var(--t-enter) var(--ease-out); }
.story-seg > span { inset: 1px; background: var(--accent-green); transform: scaleY(0); transform-origin: 50% 0; }
.is-active .story-seg::before { opacity: 1; }
.is-done .story-seg { background-image: linear-gradient(var(--light-grey-text) 0 0); background-size: 2px 100%; }
.is-done .story-seg > span { opacity: 0; }
.motion .story-num { opacity: 0.55; transition: opacity var(--t-enter) var(--ease-out); }
.motion .is-active .story-num, .motion .story:not(.is-pinned) .is-done .story-num { opacity: 1; }
.story.is-pinned { padding-bottom: clamp(32px, 4vw, 64px); }
.story.is-pinned .story-head { margin-bottom: 0; }
.story.is-pinned .story-track { height: calc(100vh + var(--story-run)); }
.is-pinned .story-stage {
  position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-content: center; gap: 16px clamp(40px, 5vw, 80px); padding-block: clamp(72px, 11vh, 104px) clamp(16px, 3vh, 32px);
}
@media (max-width: 1199px) { .is-pinned .story-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.is-pinned .story-steps { align-self: center; gap: clamp(16px, 4vh, 48px); }
.is-pinned .story-step { display: block; }
.is-pinned .story-text { align-items: start; gap: 6px 20px; }
.is-pinned .story-num { grid-row: span 2; min-width: 1.3em; font-size: clamp(2rem, 1rem + 1.6vw, 2.75rem); }
.is-pinned .story-text p { grid-column: 2; }
.motion .is-pinned .story-text :is(h3, p) { opacity: 0.72; transition: opacity var(--t-enter) var(--ease-out); }
.motion .is-pinned .is-active :is(h3, p) { opacity: 1; }
.is-pinned .story-note { grid-column: 2; margin: 24px 0 0; }
/* frame: the window the cards play in; its steps a segmented control (a state, not a button) */
.story-frame { display: none; }
.is-pinned .story-frame { display: block; align-self: center; container: storyframe / inline-size; } /* sized by its fullest card, not stretched to the steps */
.story-bar { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--ui-line); }
.story-proj { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 500; white-space: nowrap; overflow: hidden; }
.story-proj i { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-s); background: var(--black); color: var(--on-dark); font: normal 600 0.75rem/1 var(--font-display); }
.story-tabs {
  position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); padding: 3px; border-radius: 999px;
  background: var(--white-smoke); box-shadow: inset 0 0 0 1px var(--light-grey-lines); font: 600 var(--fs-small)/1.3 var(--font-display);
}
.story-tabs span { padding: 6px 14px; text-align: center; white-space: nowrap; }
.story-ind { position: absolute; top: 3px; bottom: 3px; left: 3px; z-index: -1; width: calc((100% - 6px) / var(--n, 3)); border-radius: 999px; background: var(--background-white); box-shadow: inset 0 0 0 1px var(--light-grey-lines), 0 2px 6px -2px color-mix(in srgb, var(--black) 30%, transparent); transform: translateX(calc(var(--i, 0) * 100%)); }
.motion .story-ind { transition: transform var(--t-enter) var(--ease-out); }
@container storyframe (max-width: 540px) { .story-tabs span { padding-inline: 10px; } }
.story-slot { display: grid; padding: clamp(20px, 3vh, 28px); }
.is-pinned .story-card { grid-area: 1 / 1; display: flex; flex-direction: column; padding: 0; background: none; border: 0; box-shadow: none; }
.is-pinned .story-grow { flex: 1 1 auto; } /* every card takes the fullest card's height; its .story-grow part takes up the rest, so no state leaves blank card */
.motion .is-pinned .story-card { opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease-ui), visibility 0s linear 0.25s; }
.motion .is-pinned .story-card.is-current { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease-out) 0.15s, visibility 0s; }
.story-card { --t: 1; padding: clamp(20px, 2.4vw, 32px); container: story / inline-size; }
.motion .story-card { --t: 0; }
/* parts wait for .is-on (data-at): .at-dim rows sit back, .at-in parts wait unseen, ticks are rings, flips show their first face,
   the next row of a [data-seq] group spins; .at-bar / .at-col grow with --t between --a and --b */
.motion .story-card :is(.at-dim, .at-in, .ui-flip > *) { transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); }
.motion .story-card .at-dim:not(.is-on) { opacity: 0.4; }
.motion .story-card .at-in:not(.is-on) { opacity: 0; transform: translateY(12px); }
.motion .story-card :is([data-at]:not(.is-on) .ui-tick, .ui-tick[data-at]:not(.is-on)) { background: none; box-shadow: inset 0 0 0 1.5px var(--ui-line); }
.motion .story-card :is([data-at]:not(.is-on) .ui-tick, .ui-tick[data-at]:not(.is-on))::after { opacity: 0; }
.motion .story-card .is-next .ui-tick { background: none; box-shadow: none; border: 2px solid var(--ui-line); border-top-color: var(--ui-ink); transform: rotate(calc(var(--t) * 2160deg)); }
.motion .ui-flip[data-at]:not(.is-on) > :first-child { opacity: 1; }
.motion .ui-flip[data-at]:not(.is-on) > :last-child { opacity: 0; }
.at-bar { transform-origin: 0 50%; transform: scaleX(clamp(0, (var(--t) - var(--a)) / (var(--b) - var(--a)), 1)); }
.at-col { transform-origin: 50% 100%; transform: scaleY(clamp(0, (var(--t) - var(--a)) / (var(--b) - var(--a)), 1)); }

/* ============ Still and reduced motion: final states in normal flow (site.css already stops every animation and transition) ============ */
.still .ik-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .bp-grid { animation: none !important; } }

/* ---- Opt-in: .story.story-fold (Alex, 4 Oct 22:37 and 22:46). The step cards fold over each other as you scroll.
   Pinned layout only (.is-pinned); stacked and still layouts keep their reading order, and nothing runs without .motion. The pin script already marks the
   card in view with .is-current, so no script change: every card sits opaque in one stack (card 1 on top); a card BEFORE the current one folds back over its
   top edge (hinge at the top, rotateX past 90deg, back face hidden), uncovering the next. Scrolling back unfolds it. 0.8s, one direction each way. ---- */
.motion .story.story-fold.is-pinned .story-slot { perspective: 1600px; perspective-origin: 50% 0; overflow: hidden; }
.motion .story.story-fold.is-pinned .story-card {
  opacity: 1; visibility: visible; background: var(--ui-bg); transform-origin: 50% 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform 0.8s var(--ease-out), filter 0.8s var(--ease-out), visibility 0s;
}
.motion .story.story-fold.is-pinned .story-slot > :nth-child(1) { z-index: 4; }
.motion .story.story-fold.is-pinned .story-slot > :nth-child(2) { z-index: 3; }
.motion .story.story-fold.is-pinned .story-slot > :nth-child(3) { z-index: 2; }
.motion .story.story-fold.is-pinned .story-slot > :nth-child(4) { z-index: 1; }
.motion .story.story-fold.is-pinned .story-card:has(~ .is-current) {
  transform: rotateX(-102deg); filter: brightness(0.9); visibility: hidden;
  transition: transform 0.8s var(--ease-out), filter 0.8s var(--ease-out), visibility 0s linear 0.8s;
}

/* ---- Opt-in: [data-fold-stack] on a list (Alex, 4 Oct 22:46). Plates that fold open down the page, each hinged on its top edge, with a latch line
   sweeping across the top rule as it locks, then fading. Set by inner.js (scrubbed, motion mode only); without it every item is simply open. ---- */
.motion [data-fold-stack] > * { position: relative; --lock: 0; --lk: 0; }
.motion [data-fold-stack] > *::after {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--accent-green);
  opacity: var(--lk); transform: scaleX(var(--lock)); transform-origin: 0 50%; pointer-events: none;
}

/* ---- Opt-in: .story.story-fold-over (Alex, 4 Oct 22:50). The other way round from .story-fold: card 1 shows first, then card 2 swings down over it from its top edge,
   then card 3 over card 2. Every card is opaque in one stack (later cards on top); a card AFTER the current one waits folded up behind its top edge. Pinned layout only,
   .motion only, no script change (the pin script marks the card in view with .is-current). Scrolling back folds the top card up again. ---- */
.motion .story.story-fold-over.is-pinned .story-slot { perspective: 1600px; perspective-origin: 50% 0; overflow: hidden; }
.motion .story.story-fold-over.is-pinned .story-card {
  opacity: 1; visibility: visible; background: var(--ui-bg); transform-origin: 50% 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform 0.8s var(--ease-out), filter 0.8s var(--ease-out), visibility 0s;
}
.motion .story.story-fold-over.is-pinned .story-slot > :nth-child(1) { z-index: 1; }
.motion .story.story-fold-over.is-pinned .story-slot > :nth-child(2) { z-index: 2; }
.motion .story.story-fold-over.is-pinned .story-slot > :nth-child(3) { z-index: 3; }
.motion .story.story-fold-over.is-pinned .story-slot > :nth-child(4) { z-index: 4; }
.motion .story.story-fold-over.is-pinned .story-card:has(~ .is-current) { filter: brightness(0.94); }
.motion .story.story-fold-over.is-pinned .story-card.is-current ~ .story-card {
  transform: rotateX(-102deg); visibility: hidden;
  transition: transform 0.8s var(--ease-out), filter 0.8s var(--ease-out), visibility 0s linear 0.8s;
}

/* sec-head-cells v1 begin */
/* A split section head directly above the cells grid: clear space under it, and the lead paragraph starts on the grid's second column (Alex, 5 Oct 2026). */
.sec-head + .ik-cells { margin-top: clamp(40px, 5vw, 56px); }
@media (min-width: 1024px) {
  .sec-head--split:has(+ .ik-cells:not(.ik-cells--3):not(.ik-cells--4)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; }
  .sec-head--split:has(+ .ik-cells:not(.ik-cells--3):not(.ik-cells--4)) > .sec-lead { justify-self: start; padding-left: 12px; max-width: calc(52ch + 12px); }
}
/* sec-head-cells v1 end */

/* story-gap v1 begin: tall screens leave a blank band between the heading and the pinned stage; pull the track up into it (6 Oct 2026) */
.story.is-pinned .story-head { position: relative; z-index: 2; }
.story.is-pinned .story-track { margin-top: calc(-1 * clamp(0px, (100vh - 760px) / 2 - 40px, 240px)); }
/* story-gap v1 end */
/* eg-pill v1 begin */ .eg-pill { opacity: 0.6; } /* eg-pill v1 end */

/* ---- shared design rules, mirrored from blocks/kit-style.html (7 Oct 2026): story-compact, kit-green v1/v2, fail-align, fix-colour ---- */
/* story-compact v1 begin: the pinned stage is as tall as its steps, so it starts right under the heading (no blank band) and is centred while pinned (6 Oct 2026) */
.story[data-compact].is-pinned{padding-bottom:0}
.story[data-compact].is-pinned .story-head{margin-bottom:clamp(24px,3vh,40px)}
.story[data-compact].is-pinned .story-track{margin-top:0}
.story[data-compact].is-pinned .story-stage{height:auto;top:clamp(72px,calc((100vh - 600px) / 2),220px);align-content:start;padding-block:0}
/* story-compact v1 end */
/* kit-green v1 begin: After bars and chosen meters in lime (Alex, 7 Oct 2026) */
.rv-wrap>.rv:last-of-type>i{background:var(--accent-green)}
.ui-meter--lime>i{background:var(--accent-green);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--black) 70%,transparent)}
/* kit-green v1 end */
/* fail-align v1 begin: the two Problem columns share rows, so labels, headings and text start at the same height (Alex, 7 Oct 2026) */
@media (min-width:640px){
.fail-grid{grid-template-rows:repeat(4,auto)}
.fail-grid>.fail-cell{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
}
/* fail-align v1 end */
/* kit-green v2 begin: the main metric reads lime when the news is good: Results cards figure and change, and the latest bar of each drawn weekly graph (Alex, 7 Oct 2026) */
.results .res-num,.results .rv-wrap>b:not(:empty){color:var(--accent-green)}
.sc-bars>i:last-child{background:var(--accent-green);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--black) 70%,transparent)}
/* kit-green v2 end */
/* fix-colour v1 begin: problems read in grey, the fix in colour, so the eye lands on the result (Alex, 7 Oct 2026) */
.cl-grid .cl-cell:not(.cl-cell--fix) .cl-bars .is-hi i{background:color-mix(in srgb,var(--black) 42%,var(--background-white))}
.cl-grid .cl-cell:not(.cl-cell--fix) .ui-chip{color:var(--ui-faint)}
.cl-grid .cl-cell--fix{box-shadow:inset 0 3px 0 var(--accent-green)}
.cl-grid .cl-cell--fix .kicker::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--accent-green);box-shadow:0 0 0 1px color-mix(in srgb,var(--black) 70%,transparent)}
.cl-grid .cl-bars--fix i{background:var(--accent-green);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--black) 70%,transparent)}
.cl-grid .cl-cell--fix .ui-chip--ink{background:var(--accent-green);color:var(--black);border-color:color-mix(in srgb,var(--black) 70%,transparent)}
.qs-big>b:last-child .ui-meter>i,.cmp-big>b:last-child .ui-meter>i{background:var(--accent-green);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--black) 70%,transparent)}
.qs-r:not(.ui-meta):not(.qs-big)>:nth-child(2),.cmp-r:not(.cmp-h):not(.cmp-big)>:nth-child(2){color:var(--ui-faint)}
.qs-r:not(.ui-meta):not(.qs-big)>:nth-child(3),.cmp-r:not(.cmp-h):not(.cmp-big)>:nth-child(3):not(.ui-chip){font-weight:600;color:var(--ui-ink)}
.qs-r.ui-meta>:nth-child(3)::before,.cmp-r.cmp-h>:nth-child(3)::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--accent-green);box-shadow:0 0 0 1px color-mix(in srgb,var(--black) 70%,transparent)}
.cmp-r:not(.cmp-h)>.ui-chip--ink:nth-child(3){background:var(--accent-green);color:var(--black);border-color:color-mix(in srgb,var(--black) 70%,transparent)}
.str-row.is-cut{color:var(--ui-faint)}
.str-row.is-keep{background:color-mix(in srgb,var(--accent-green) 30%,transparent)}
/* fix-colour v1 end */
/* story-zoom v1 begin: the pinned story stage zooms with scroll (inner-kit.js) and the step in play is in focus (Alex, 7 Oct 2026). Inactive steps keep text at 4.5:1 or better (h3 66%, p 76%, measured). */
.story.is-pinned .story-stage{transform-origin:50% 50%;will-change:transform}
.story.is-pinned .story-step{transform-origin:0 50%;transition:transform .45s var(--ease-out)}
.story.is-pinned .story-step.is-active{transform:scale(1.04)}
.story.is-pinned .story-step .story-text h3{opacity:.66;transition:opacity .45s var(--ease-out)}
.story.is-pinned .story-step .story-text p{opacity:.76;transition:opacity .45s var(--ease-out)}
.story.is-pinned .story-step .story-num{opacity:.55;transition:opacity .45s var(--ease-out)}
.story.is-pinned .story-step.is-active .story-text :is(h3,p),.story.is-pinned .story-step.is-active .story-num{opacity:1}
@media (prefers-reduced-motion:reduce){.story.is-pinned .story-stage{transform:none!important}.story.is-pinned .story-step{transition:none}}
/* story-zoom v1 end */
/* story-rise v1 begin: the folding story cards (story-fold, story-fold-over) now rise and fade like the rest of the site; nothing flips (Alex, 9 Oct 2026) */
.motion .story.story-fold.is-pinned .story-slot, .motion .story.story-fold-over.is-pinned .story-slot { perspective: none; overflow: visible; }
.motion .story.story-fold.is-pinned .story-card, .motion .story.story-fold-over.is-pinned .story-card,
.motion .story.story-fold.is-pinned .story-card:has(~ .is-current), .motion .story.story-fold-over.is-pinned .story-card:has(~ .is-current),
.motion .story.story-fold-over.is-pinned .story-card.is-current ~ .story-card {
  opacity: 0; visibility: hidden; transform: translateY(24px); filter: none; backface-visibility: visible; -webkit-backface-visibility: visible;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
.motion .story.story-fold.is-pinned .story-card:has(~ .is-current), .motion .story.story-fold-over.is-pinned .story-card:has(~ .is-current) { transform: translateY(-16px); }
.motion .story.story-fold.is-pinned .story-card.is-current, .motion .story.story-fold-over.is-pinned .story-card.is-current {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition: opacity 0.7s var(--ease-out) 0.15s, transform 0.7s var(--ease-out) 0.15s, visibility 0s;
}
/* story-rise v1 end */