/**
 * Portfolio layout, built only from the Design System tokens.
 * Tokens, text styles and Button come from the Design System via CDN.
 * New pieces here (header, case study layout, figure, facts, steps, stat, footer)
 * are candidates to move into Figma and the Design System later.
 */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg-default);
  color: var(--color-fg-default);
  font-family: var(--font-family-sans);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--button-ghost-fg); }
a.btn { text-decoration: none; }
a:focus-visible, [tabindex]:focus-visible {
  outline: var(--border-width-focus) solid var(--color-border-focus);
  outline-offset: var(--space-4);
  border-radius: var(--radius-indicator);
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--color-bg-muted);
  padding: 1px var(--space-4);
  border-radius: var(--radius-indicator);
}

/* Skip link */
.skip-link { position: absolute; left: var(--space-16); top: var(--space-16); z-index: 20; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--color-bg-default);
  border-bottom: var(--border-width-default) solid var(--color-border-default);
}
.site-header__inner {
  max-width: 1120px; margin: 0 auto;
  padding: var(--space-12) var(--space-24);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
}
.site-header__brand { color: var(--color-fg-default); text-decoration: none; }
.site-header__nav { display: flex; gap: var(--space-8); }

/* ---------- Layout ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-24); }
.prose { max-width: 720px; }
main:focus { outline: none; }

/* ---------- Case study hero ---------- */
.cs-hero {
  padding: var(--space-64) 0 var(--space-48);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--space-48); align-items: start;
}
.cs-hero__eyebrow { margin: 0 0 var(--space-12); color: var(--color-fg-muted); }
.cs-hero h1 { margin: 0; }
.cs-hero__lead { margin: var(--space-16) 0 0; color: var(--color-fg-muted); max-width: 56ch; }
.cs-hero__links { display: flex; flex-wrap: wrap; gap: var(--space-gap-sm); margin-top: var(--space-32); }
.cs-hero__links .btn { text-decoration: none; }

/* Facts: the same card as on the landing page, variant with a definition list */
.facts {
  margin: 0;
  display: grid; gap: var(--space-16);
  padding: var(--space-20) var(--space-24);
  background: var(--color-bg-default);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(43, 43, 47, .06), 0 8px 24px -8px rgba(43, 43, 47, .14);
}
.facts div { display: grid; gap: var(--space-4); }
.facts dt {
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: var(--font-size-100) !important; line-height: var(--font-line-height-100) !important;
  letter-spacing: .08em; text-transform: uppercase; color: var(--button-ghost-fg);
}
.facts dd { margin: 0; }

/* ---------- Sections ---------- */
.cs-section { padding: var(--space-48) 0; border-top: var(--border-width-default) solid var(--color-border-default); }
.cs-section h2 { margin: 0 0 var(--space-16); }
.cs-section h3 { margin: var(--space-40) 0 var(--space-12); }
.cs-section p { margin: 0 0 var(--space-16); }
.cs-section ul, .cs-section ol { margin: 0 0 var(--space-16); padding-left: var(--space-24); }
.cs-section li { margin-bottom: var(--space-8); }
.cs-section li::marker { color: var(--color-fg-subtle); }
.cs-kicker { color: var(--button-ghost-fg); margin: 0 0 var(--space-8); }
.muted { color: var(--color-fg-muted); }

/* Quote-like principle */
.principle {
  margin: var(--space-24) 0;
  padding: var(--space-16) var(--space-24);
  border-left: var(--border-width-focus) solid var(--color-action-primary-bg-default);
  background: var(--color-action-ghost-bg-hover);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}
.principle p { margin: 0; }

/* ---------- Figures ---------- */
.figure { margin: var(--space-32) 0; }
.figure img, .figure .diagram {
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-container);
  background: var(--color-bg-subtle);
}
/* Screenshots open full size: Figma panels have small text */
.figure__link { display: block; border-radius: var(--radius-container); cursor: zoom-in; }
.figure__link:hover img { border-color: var(--color-border-strong); }
.figure figcaption { margin-top: var(--space-12); color: var(--color-fg-muted); max-width: 720px; }
.figure figcaption b { color: var(--color-fg-default); font-weight: var(--font-weight-medium); }
.figure--pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
.figure--pair figcaption { grid-column: 1 / -1; margin-top: 0; }
.figure--narrow { max-width: 820px; }
.figure img.on-dark { background: #0B0C0E; padding: var(--space-16); }
.figure--portrait { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); max-width: 820px; align-items: start; }

/* Diagrams: inline SVG, colors from tokens */
.diagram { padding: var(--space-24); overflow-x: auto; background: var(--color-bg-default) !important; }
.diagram svg { display: block; width: 100%; min-width: 640px; height: auto; font-family: var(--font-family-sans); }
.dg-box { fill: var(--color-bg-default); stroke: var(--color-border-strong); stroke-width: 1.25; }
.dg-box--source { fill: var(--color-action-ghost-bg-hover); stroke: var(--color-action-primary-bg-default); stroke-width: 2; }
.dg-box--qa { fill: var(--color-bg-default); stroke: var(--color-action-secondary-bg-default); stroke-width: 2; }
.dg-line { fill: none; stroke: var(--color-border-strong); stroke-width: 1.25; }
.dg-line--qa { stroke: var(--color-action-secondary-bg-default); stroke-width: 1.5; }
.dg-line--concept { stroke: var(--color-action-primary-bg-default); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dg-head { fill: var(--color-border-strong); }
.dg-head--qa { fill: var(--color-action-secondary-bg-default); }
.dg-head--concept { fill: var(--color-action-primary-bg-default); }
.dg-title { fill: var(--color-fg-default); font-size: 15px; font-weight: 500; }
.dg-name { fill: var(--color-fg-default); font-size: 13px; font-weight: 500; }
.dg-sub { fill: var(--color-fg-muted); font-size: 11.5px; }
.dg-lane { fill: var(--color-fg-muted); font-size: 11.5px; font-weight: 500; }
.dg-note { fill: var(--color-fg-muted); font-size: 11.5px; }
.dg-note--qa { fill: var(--color-action-secondary-bg-default); font-weight: 500; }
.dg-note--concept { fill: var(--color-action-primary-bg-default); font-weight: 500; }

/* ---------- Table ---------- */
.table-scroll { overflow-x: auto; margin: var(--space-24) 0; }
table.cs-table { border-collapse: collapse; width: 100%; min-width: 520px; }
.cs-table th { text-align: left; color: var(--color-fg-muted); font-weight: var(--font-weight-medium); padding: 0 var(--space-16) var(--space-8) 0; }
.cs-table td { padding: var(--space-12) var(--space-16) var(--space-12) 0; border-top: var(--border-width-default) solid var(--color-border-default); vertical-align: top; }

/* ---------- QA routine steps ---------- */
.steps { list-style: none; padding: 0 !important; margin: var(--space-24) 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-gap-md); counter-reset: step; }
.steps li {
  counter-increment: step; margin: 0 !important;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-inset-md);
  border-radius: var(--radius-control);
  border: var(--border-width-default) solid var(--color-border-default);
  border-top: var(--border-width-focus) solid var(--color-action-secondary-bg-default);
}
.steps li b { font-weight: var(--font-weight-medium); }
.steps li b::before { content: counter(step) " · "; color: var(--color-action-secondary-bg-default); }
.steps li span { color: var(--color-fg-muted); }

/* ---------- Results ---------- */
.stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-8) var(--space-16); margin: var(--space-16) 0 var(--space-24); }
.stat__value { color: var(--color-action-primary-bg-default); }
.stat__label { color: var(--color-fg-muted); max-width: 32ch; }
.results { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); }
/* Result and takeaway cards: the landing page card, variant with title and text only */
.results li {
  margin: 0 !important; padding: var(--space-20);
  background: var(--color-bg-default); border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-xl); box-shadow: 0 1px 2px rgba(43, 43, 47, .06), 0 8px 24px -8px rgba(43, 43, 47, .14);
  display: flex; flex-direction: column; gap: var(--space-8);
}
.results li b {
  font-family: var(--font-family-display); font-weight: var(--font-weight-medium);
  font-size: var(--font-size-500); line-height: var(--font-line-height-500); color: var(--color-fg-default); text-wrap: balance;
}
.results li span { color: var(--color-fg-muted); }

/* ---------- Tutorial pieces (Ride Recap) ---------- */
/* Color swatch next to a hex value */
.swatch {
  display: inline-block; width: 12px; height: 12px; margin-right: var(--space-8);
  vertical-align: -1px; border-radius: var(--radius-indicator);
  background: var(--swatch); border: var(--border-width-default) solid var(--color-border-strong);
}

/* Spec card next to a figure */
.spec {
  align-self: start;
  padding: var(--space-inset-lg);
  background: var(--color-bg-subtle);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-container);
}
.spec > p { margin: 0 0 var(--space-12) !important; color: var(--color-fg-muted); }
.spec dl { margin: 0; display: grid; gap: var(--space-8); }
.spec dl div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-12); }
.spec dt { color: var(--color-fg-muted); }
.spec dd { margin: 0; }
.figure--pair .spec + figcaption, .figure--pair .figure__link + figcaption { margin-top: 0; }

/* Prompt block */
.prompt {
  margin: var(--space-16) 0 var(--space-24);
  padding: var(--space-16) var(--space-24);
  overflow-x: auto;
  background: var(--color-bg-subtle);
  border: var(--border-width-default) solid var(--color-border-default);
  border-left: var(--border-width-focus) solid var(--color-action-secondary-bg-default);
  border-radius: var(--radius-control);
}
.prompt code { background: none; padding: 0; font-size: .875rem; line-height: 1.6; white-space: pre; }

/* Motion demo: the story's own dark palette, on purpose */
.motion-demo {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-32); align-items: center;
  margin: var(--space-32) 0 var(--space-8);
}
.motion-demo__stage {
  background: radial-gradient(120% 60% at 20% 105%, #4a1470 0%, #0B0C0E 60%);
  border-radius: var(--radius-container);
  padding: var(--space-24) var(--space-16);
}
.motion-demo__stage svg { display: block; width: 100%; height: auto; max-height: 520px; }
.motion-demo__side .text-label { margin: 0 0 var(--space-8); color: var(--color-fg-muted); }
.motion-demo__side .table-scroll { margin: 0 0 var(--space-16); }
.motion-demo__side .cs-table { min-width: 0; }
.demo-note { margin: 0 0 var(--space-16); }
.md-track { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.md-route { fill: none; stroke: #FF5B1F; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.md-dot { fill: #D4FF3A; stroke: #0B0C0E; stroke-width: 4; transform-box: fill-box; transform-origin: center; }
.md-label { fill: #D4FF3A; font: 500 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.is-playing .md-route { animation: md-trim 2s cubic-bezier(.42,0,.58,1) .9s both; }
.is-playing .md-dot--start { animation: md-pop .3s cubic-bezier(.34,1.56,.64,1) .6s both; }
.is-playing .md-label--start { animation: md-fade .3s ease-out .7s both; }
.is-playing .md-dot--end { animation: md-pop .3s cubic-bezier(.34,1.56,.64,1) 2.8s both; }
.is-playing .md-label--end { animation: md-fade .3s ease-out 2.9s both; }
@keyframes md-trim { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes md-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes md-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .is-playing .md-route, .is-playing .md-dot, .is-playing .md-label { animation: none; }
}

/* Timeline diagram */
.tl-grid path { stroke: var(--color-border-default); stroke-width: 1; fill: none; }
.tl-bar { fill: var(--color-border-strong); }
.tl-bar--focus { fill: var(--color-action-primary-bg-default); }
.tl-stagger .tl-bar { fill: var(--color-fg-muted); }
.tl-note { fill: var(--color-action-primary-bg-default); font-weight: 500; }

/* Result: story video next to the outcomes */
.result { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--space-48); align-items: start; margin: var(--space-24) 0 var(--space-32); }
.result__media { margin: 0; }
.result__video {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  background: #0B0C0E; border-radius: var(--radius-container);
}
.result__media figcaption { margin-top: var(--space-12); color: var(--color-fg-muted); }
.result__media figcaption b { color: var(--color-fg-default); font-weight: var(--font-weight-medium); }
.result .stat { margin-top: 0; }
.results--single { grid-template-columns: minmax(0, 1fr); }

/* ---------- Links list ---------- */
.link-list { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: var(--space-gap-sm); }
.link-list li { margin: 0 !important; }
.link-list .btn { text-decoration: none; }

/* ---------- Footer ---------- */
.site-footer { border-top: var(--border-width-default) solid var(--color-border-default); margin-top: var(--space-48); }
.site-footer__inner { max-width: 1120px; margin: 0 auto; padding: var(--space-32) var(--space-24); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-16); color: var(--color-fg-muted); }
.site-footer p { margin: 0; }

/* ---------- Small screens ---------- */
@media (max-width: 880px) {
  .cs-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); padding-top: var(--space-40); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .result__media { max-width: 360px; }
}
@media (max-width: 560px) {
  .wrap, .site-header__inner, .site-footer__inner { padding-left: var(--space-16); padding-right: var(--space-16); }
  .steps, .results, .figure--pair { grid-template-columns: minmax(0, 1fr); }
  .site-header__nav .btn--ghost { display: none; }
  .motion-demo { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .motion-demo__stage { max-width: 320px; }
  .spec dl div { grid-template-columns: 96px minmax(0, 1fr); }
  .figure--portrait .figure__link { max-width: 240px; }
}

/* ---------- Invia case study pieces (candidates for the Design System) ---------- */
.kpis { list-style: none; padding: 0; margin: var(--space-24) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-gap-sm); }
.kpis li {
  padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill);
  background: var(--color-feedback-success-bg); color: var(--color-feedback-success-fg);
  font-size: var(--font-size-200); line-height: var(--font-line-height-200);
}
.kpis b { font-weight: var(--font-weight-medium); }

.moments { list-style: none; padding: 0 !important; margin: var(--space-32) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); counter-reset: none; }
/* Same card as on the landing page (cards.css), the variant without an image */
.moment {
  position: relative; display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; margin: 0 !important;
  padding: var(--space-20); border-radius: var(--radius-xl);
  background: var(--color-bg-default); border: var(--border-width-default) solid var(--color-border-default);
  box-shadow: 0 1px 2px rgba(43, 43, 47, .06), 0 8px 24px -8px rgba(43, 43, 47, .14);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1);
}
.moment__step {
  margin: 0; font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: var(--font-size-100) !important; line-height: var(--font-line-height-100) !important;
  letter-spacing: .08em; text-transform: uppercase; color: var(--button-ghost-fg);
}
.moment__name {
  font-family: var(--font-family-display) !important; font-weight: var(--font-weight-medium) !important;
  font-size: var(--font-size-600) !important; line-height: var(--font-line-height-600) !important;
  color: var(--color-fg-default); text-decoration: none; text-wrap: balance;
}
a.moment__name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* whole card is the link */
.moment__q { color: var(--color-fg-muted); }
.moment__r {
  align-self: flex-start; margin-top: auto; display: inline-flex; padding: 2px var(--space-8); border-radius: var(--radius-pill);
  font-size: var(--font-size-100) !important; line-height: var(--font-line-height-100) !important; font-weight: var(--font-weight-medium);
  color: var(--color-feedback-success-fg); background: var(--color-feedback-success-bg); font-variant-numeric: tabular-nums;
}
.moment__q + .moment__r { margin-top: auto; }
.moment:has(.moment__r) .moment__q { margin-bottom: var(--space-8); }
@media (hover: hover) {
  .moment:has(a.moment__name):hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 2px 4px rgba(43, 43, 47, .06), 0 24px 48px -16px rgba(43, 43, 47, .22); }
  .moment:has(a.moment__name):nth-child(2):hover { rotate: 1.2deg; }
}
@media (prefers-reduced-motion: reduce) { .moment { transition: none; } }

.quote { margin: var(--space-8) 0 var(--space-16) !important; color: var(--button-ghost-fg); font-style: italic; }

.ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: start; }
.ba figcaption { grid-column: 1 / -1; margin-top: 0; }
.ba__item { display: grid; gap: var(--space-8); min-width: 0; }
.ba__tag { margin: 0; color: var(--color-fg-muted); }
.ba__tag--after { color: var(--color-feedback-success-fg); }

.placeholder {
  margin: var(--space-24) 0; padding: var(--space-32) var(--space-24); border-radius: var(--radius-container);
  border: var(--border-width-focus) dashed var(--color-border-default); color: var(--color-fg-muted); text-align: center;
  display: grid; gap: var(--space-4);
}
.placeholder b { color: var(--color-fg-default); font-weight: var(--font-weight-medium); }

.cs-result {
  margin: var(--space-24) 0 0; padding: var(--space-16) var(--space-24); max-width: 720px;
  border-left: var(--border-width-focus) solid var(--color-feedback-success-fg);
  background: var(--color-feedback-success-bg); border-radius: 0 var(--radius-control) var(--radius-control) 0;
}
.cs-result p { margin: 0 !important; }
.cs-result__label { color: var(--color-feedback-success-fg); margin-bottom: var(--space-4) !important; }

.talk { margin-top: var(--space-32); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16) var(--space-24); }
.talk p { margin: 0 !important; max-width: 52ch; }

.results--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 880px) {
  .moments, .ba, .results--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Evolution strip: one row of equal-height frames, top-aligned screenshots inside,
   so the different card heights read at a glance and the notes line up.
   Timeline: dots centred above each version; 1→2 grey, 2→3 grey to blue (my phase), after 3 dashed (what's next).
   Hover (or keyboard focus) grows one version by about 25% and shrinks the others. */
.evo { --evo-grey: var(--color-border-strong); --evo-mid: #6f8fd0; --evo-blue: var(--color-blue-600); --evo-gap: var(--space-24); }
.evo__steps {
  list-style: none; padding: 0 !important; margin: 0 0 var(--space-16) !important;
  display: flex; gap: var(--evo-gap); align-items: stretch;
}
.evo__step {
  flex: 1 1 0; min-width: 0; margin: 0 !important; position: relative;
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-12);
  transition: flex-grow .45s cubic-bezier(.2, .8, .2, 1);
}
/* the line: each version draws its own left and right half, so it stays connected while widths change */
.evo__step::before, .evo__step::after { content: ""; position: absolute; top: 13px; height: 2px; }
.evo__step::before { left: calc(var(--evo-gap) / -2); right: 50%; }
.evo__step::after  { left: 50%; right: calc(var(--evo-gap) / -2); }
.evo__step:first-child::before { display: none; }
.evo__step:nth-child(1)::after, .evo__step:nth-child(2)::before { background: var(--evo-grey); }
.evo__step:nth-child(2)::after { background: linear-gradient(90deg, var(--evo-grey), var(--evo-mid)); }
.evo__step:nth-child(3)::before { background: linear-gradient(90deg, var(--evo-mid), var(--evo-blue)); }
.evo__step:nth-child(3)::after {
  right: 0; height: 2px; top: 13px;
  background: repeating-linear-gradient(90deg, var(--evo-blue) 0 6px, transparent 6px 12px);
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent);
  animation: evo-dash 1.6s linear 3;   /* 4.8 s, then still (WCAG 2.2.2) */
}
@keyframes evo-dash { to { background-position: 12px 0; } }

.evo__tag { margin: 0 !important; display: grid; justify-items: center; gap: var(--space-8); color: var(--color-fg-muted); text-align: center; }
.evo__tag span {
  position: relative; z-index: 1; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-bg-default); border: var(--border-width-focus) solid var(--evo-grey);
  color: var(--color-fg-default); font-size: var(--font-size-100); font-weight: var(--font-weight-medium);
  box-shadow: 0 0 0 5px var(--home-paper, var(--color-bg-default));
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.evo__step:hover .evo__tag span { transform: scale(1.12); }
.evo .figure__link {
  display: flex; align-items: flex-start; height: 100%; padding: var(--space-24); border-radius: var(--radius-xl);
  background: var(--color-bg-subtle); border: var(--border-width-default) solid var(--color-border-default);
  transition: border-color .2s, box-shadow .3s;
}
.evo .figure__link img {
  width: 100%; border: 0; border-radius: var(--radius-md); background: transparent;
  box-shadow: 0 1px 2px rgba(43,43,47,.06), 0 12px 28px -16px rgba(43,43,47,.35);
}
.evo__note { margin: 0 !important; color: var(--color-fg-muted); }
.evo__note b { color: var(--color-fg-default); font-weight: var(--font-weight-medium); }

/* my phase */
.evo__step--now .evo__tag { color: var(--evo-blue); }
.evo__step--now .evo__tag span { background: var(--evo-blue); border-color: var(--evo-blue); color: var(--color-base-white); }
.evo__step--now .evo__tag span::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--evo-blue);
  animation: evo-ping 2.4s cubic-bezier(.2, .8, .2, 1) 2 both;   /* 4.8 s, then still */
}
@keyframes evo-ping { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
.evo__step--now .figure__link { background: var(--color-blue-50); border-color: var(--color-blue-200); }

@media (hover: hover) and (min-width: 881px) {
  .evo__steps:has(.evo__step:hover, .evo__step:focus-within) .evo__step { flex-grow: .88; }
  .evo__steps:has(.evo__step:hover, .evo__step:focus-within) .evo__step:is(:hover, :focus-within) { flex-grow: 1.3; }
  .evo__step:hover .figure__link { border-color: var(--color-border-strong); box-shadow: 0 16px 36px -20px rgba(43,43,47,.35); }
}
@media (max-width: 880px) {
  .evo__steps { flex-direction: column; gap: var(--space-32); padding-left: var(--space-40) !important; position: relative; }
  .evo__steps::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 0; width: 2px;
    background: linear-gradient(180deg, var(--evo-grey) 0 60%, var(--evo-blue)); }
  .evo__step::before, .evo__step::after { display: none; }
  .evo__step { grid-template-rows: auto auto auto; }
  .evo__tag { justify-items: start; text-align: left; min-height: 28px; align-content: center; }
  .evo__tag span { position: absolute; left: calc(-1 * var(--space-40)); top: 0; }
  .evo .figure__link { padding: var(--space-16); height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .evo__step, .evo__tag span { transition: none; }
  .evo__step:nth-child(3)::after, .evo__step--now .evo__tag span::after { animation: none; }
}

/* Flex Ticket: A/B test figure + platforms */
.abtest__grid { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); gap: var(--space-24); align-items: start; }
.abtest__item--a { grid-row: span 2; }
.abtest__item--iter .abtest__frame { background: var(--color-blue-50); border-color: var(--color-blue-200); }
.abtest__item--iter .abtest__tag { color: var(--color-blue-600); }
.abtest__item, .platforms__item { display: grid; gap: var(--space-12); min-width: 0; }
.abtest__tag { margin: 0 !important; color: var(--color-fg-muted); display: flex; align-items: center; gap: var(--space-8); }
.abtest__item--win .abtest__tag { color: var(--color-blue-600); }
.abtest__badge { padding: 2px 8px; border-radius: 999px; background: var(--color-blue-600); color: var(--color-base-white); font-size: 11px; line-height: 16px; letter-spacing: .04em; }
.abtest__frame, .platforms__frame {
  display: block; padding: var(--space-24); border-radius: var(--radius-xl);
  background: var(--color-bg-subtle); border: var(--border-width-default) solid var(--color-border-default);
  transition: border-color .2s, box-shadow .3s;
}
.abtest__item--win .abtest__frame { background: var(--color-blue-50); border-color: var(--color-blue-200); }
.abtest__frame img, .platforms__frame img {
  display: block; width: 100%; height: auto; border: 0; border-radius: var(--radius-md); background: transparent;
  box-shadow: 0 1px 2px rgba(43,43,47,.06), 0 12px 28px -16px rgba(43,43,47,.35);
}
.abtest__shot { position: relative; display: block; }
.abtest__mark {
  position: absolute; left: 2.6%; top: 76.6%; width: 44.6%; height: 14.6%;
  border: 2px solid var(--color-blue-600); border-radius: 10px; pointer-events: none;
}
.abtest__mark-label {
  position: absolute; left: -2px; top: calc(100% + 6px); white-space: nowrap;
  padding: 2px 8px; border-radius: 6px; background: var(--color-blue-600); color: var(--color-base-white);
  font-family: var(--font-family-sans); font-size: 12px; line-height: 18px; font-weight: var(--font-weight-medium);
}
.abtest .figure__link, .platforms .figure__link { padding-bottom: var(--space-40); }
.platforms .figure__link { padding-bottom: var(--space-24); }
.platforms__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); align-items: stretch; max-width: 680px; }
.platforms__item { grid-template-rows: auto 1fr; }
.platforms__frame { height: 100%; }
.platforms__frame img[src*="flex-ios"], .platforms__frame img[src*="flex-android"] { border-radius: 16px; }
@media (hover: hover) {
  .abtest__frame:hover, .platforms__frame:hover { border-color: var(--color-border-strong); box-shadow: 0 16px 36px -20px rgba(43,43,47,.35); }
}
@media (max-width: 720px) {
  .abtest__grid { grid-template-columns: minmax(0, 1fr); }
  .abtest__item--a { grid-row: auto; }
  .abtest__item:first-child .abtest__frame { max-width: 320px; }
  .platforms__grid { gap: var(--space-12); }
  .abtest__frame, .platforms__frame { padding: var(--space-16); }
  .abtest .figure__link { padding-bottom: var(--space-40); }
}

/* Lightbox: screenshot in a modal dialog at its own size */
.lightbox {
  padding: 0; border: 0; background: transparent; max-width: none; max-height: none;
  width: 100vw; height: 100dvh; margin: 0; overflow: hidden;
}
.lightbox::backdrop { background: rgba(20, 20, 24, .9); backdrop-filter: blur(4px); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  max-width: 1120px; width: 100%; margin: 0 auto; padding: var(--space-16) var(--space-24);
}
.lightbox__title { margin: 0; color: var(--color-base-white); }
.lightbox .lightbox__close { gap: var(--space-8); --_fg: var(--color-base-white); --_bg-hover: rgba(255,255,255,.12); --_bg-pressed: rgba(255,255,255,.2); }
.lightbox .lightbox__close:focus-visible { outline-color: var(--color-base-white); }
.lightbox__stage { display: grid; place-items: center; min-height: 0; padding: 0 var(--space-24) var(--space-32); overflow: auto; }
.lightbox__img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 104px);
  border-radius: var(--radius-md); background: var(--color-base-white);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.6);
}
html.has-lightbox { overflow: hidden; }
.lightbox__img.on-dark { background: #0B0C0E; padding: var(--space-16); }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] .lightbox__img { animation: lb-in .2s cubic-bezier(.2,.8,.2,1); }
  .lightbox[open]::backdrop { animation: lb-fade .2s ease-out; }
}
@keyframes lb-in { from { opacity: 0; transform: scale(.97); } }
@keyframes lb-fade { from { opacity: 0; } }
@media (max-width: 560px) {
  .lightbox__bar { padding: var(--space-12) var(--space-16); }
  .lightbox__stage { padding: 0 var(--space-16) var(--space-16); }
}

/* Flex Ticket: vertical timeline (A, B, iteration) with a branch to the apps.
   Text sits next to each screenshot; the rail mirrors the Offer Box timeline, turned vertical. */
.ft { --ft-grey: var(--color-border-strong); --ft-blue: var(--color-blue-600); --ft-gap: var(--space-48); --ft-indent: var(--space-40); }
.ft__steps { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: var(--ft-gap); }
.ft-step {
  position: relative; margin: 0 !important; padding-left: 56px;
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--space-32); align-items: start;
}
/* rail: each step draws the segment down to the next one */
.ft-step::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: calc(-1 * var(--ft-gap)); width: 2px; background: var(--ft-grey); }
.ft-step--a::before { background: linear-gradient(180deg, var(--ft-grey), #6f8fd0); }
.ft-step--b::before, .ft-step--iter::before { background: var(--ft-blue); }
.ft-step--branch::before {   /* the branch: curves off the main line to the right */
  left: calc(13px - var(--ft-indent)); top: calc(-1 * var(--ft-gap) / 2); bottom: auto;
  width: calc(var(--ft-indent) + 2px); height: calc(var(--ft-gap) / 2 + 14px);
  background: none; border-left: 2px solid var(--ft-blue); border-bottom: 2px solid var(--ft-blue); border-bottom-left-radius: 16px;
}
.ft-step--iter::before { bottom: calc(-1 * var(--ft-gap) / 2); }
.ft-step--branch { margin-left: var(--ft-indent) !important; }
.ft-step--branch::after {   /* main line fades out: what's next */
  content: ""; position: absolute; left: calc(13px - var(--ft-indent)); top: 14px; height: 160px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--ft-blue) 0 6px, transparent 6px 12px);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent); mask-image: linear-gradient(180deg, #000 20%, transparent);
}
.ft__dot {
  position: absolute; left: 0; top: 0; z-index: 1; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-bg-default); border: var(--border-width-focus) solid var(--ft-grey);
  color: var(--color-fg-default); font-size: var(--font-size-100); font-weight: var(--font-weight-medium);
  box-shadow: 0 0 0 5px var(--color-bg-default);
}
.ft-step--b .ft__dot, .ft-step--iter .ft__dot, .ft-step--branch .ft__dot { background: var(--ft-blue); border-color: var(--ft-blue); color: var(--color-base-white); }
.ft__text { display: grid; gap: var(--space-8); padding-top: 2px; }
.ft__tag { margin: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); color: var(--color-fg-muted); }
.ft-step--b .ft__tag, .ft-step--iter .ft__tag, .ft-step--branch .ft__tag { color: var(--ft-blue); }
.cs-section .ft__title { margin: 0; }
.ft__body { margin: 0 !important; color: var(--color-fg-muted); }
.ft__frame {
  display: block; padding: var(--space-24); border-radius: var(--radius-xl);
  background: var(--color-bg-subtle); border: var(--border-width-default) solid var(--color-border-default);
  transition: border-color .2s, box-shadow .3s;
}
.ft-step--b > .ft__frame, .ft-step--iter > .ft__frame { background: var(--color-blue-50); border-color: var(--color-blue-200); }
.ft-step--a > .ft__frame { max-width: 400px; }
.ft-step--iter > .ft__frame { padding-bottom: var(--space-40); }
.ft__frame img {
  display: block; width: 100%; height: auto; border: 0; border-radius: var(--radius-md); background: transparent;
  box-shadow: 0 1px 2px rgba(43,43,47,.06), 0 12px 28px -16px rgba(43,43,47,.35);
}
.ft__phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); max-width: 620px; align-items: stretch; }
.ft-shot { display: grid; grid-template-rows: auto 1fr; gap: var(--space-8); min-width: 0; }
.ft-shot__tag { margin: 0 !important; color: var(--color-fg-muted); }
.ft-shot .ft__frame { height: 100%; }
.ft__phones img { border-radius: 16px; }
@media (hover: hover) { .ft__frame:hover { border-color: var(--color-border-strong); box-shadow: 0 16px 36px -20px rgba(43,43,47,.35); } }
@media (max-width: 880px) {
  .ft { --ft-gap: var(--space-40); --ft-indent: var(--space-24); }
  .ft-step { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); padding-left: 44px; }
  .ft__frame { padding: var(--space-16); }
  .ft-step--iter > .ft__frame { padding-bottom: var(--space-40); }
  .ft__phones { gap: var(--space-12); }
}
@media (min-width: 881px) { .ft__text { position: sticky; top: 88px; } }

/* Flex Ticket timeline, live mode (JS): one rail that fills while scrolling, dots light up on arrival */
.ft.is-live .ft-step:not(.ft-step--branch)::before { display: none; }
.ft__rail { position: absolute; left: 13px; width: 2px; background: var(--color-border-default); border-radius: 2px; pointer-events: none; }
.ft__fill { position: absolute; left: 0; top: 0; width: 100%; height: var(--ft-fill, 0px); overflow: hidden; border-radius: 2px; }
.ft__fill::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: var(--ft-rail-h, 100%);
  background: linear-gradient(180deg, var(--ft-blue) 0, var(--ft-blue) var(--ft-branch, 70%), var(--color-feedback-success-fg) 100%); }
.ft__steps { position: relative; }
.ft.is-live .ft__dot {
  background: var(--color-bg-default); border-color: var(--color-border-default); color: var(--color-fg-subtle);
  transition: background-color .25s, border-color .25s, color .25s;
}
.ft.is-live .ft-step.is-reached .ft__dot { background: var(--ft-blue); border-color: var(--ft-blue); color: var(--color-base-white); }
.ft.is-live:not(.is-static) .ft-step.is-reached .ft__dot { animation: ft-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ft-pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
/* tags pick up their colour on arrival too */
.ft.is-live .ft__tag { transition: color .25s; }
.ft.is-live .ft-step:not(.is-reached) .ft__tag { color: var(--color-fg-muted); }
/* branch: the curve draws in once the branch is reached */
.ft.is-live .ft-step--branch::before { clip-path: inset(0 100% 100% 0); transition: clip-path .6s cubic-bezier(.2, .8, .2, 1); }
.ft.is-live .ft-step--branch.is-reached::before { clip-path: inset(0 0 0 0); }
.ft.is-live .ft-step--branch::after { opacity: 0; transition: opacity .4s .3s; }
.ft.is-live .ft-step--branch.is-reached::after { opacity: 1; }
.ft.is-live .ft-step--branch .ft__dot { box-shadow: 0 0 0 5px var(--color-bg-default); }

/* sticky text: a small spring when it stops (k = 1) or starts moving again (k < 0) */
.ft__text.is-settling { animation: ft-settle .55s cubic-bezier(.3, .7, .4, 1); }
@keyframes ft-settle {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(calc(var(--ft-k, 1) * -6px)); }
  65%  { transform: translateY(calc(var(--ft-k, 1) * 1.5px)); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ft__text.is-settling, .ft.is-live .ft-step.is-reached .ft__dot { animation: none; }
  .ft.is-live .ft-step--branch::before { transition: none; }
}

/* Branch: the line keeps going right from the dot, through "Branch" to the iOS and Android labels */
.ft__hline {
  position: absolute; left: 28px; right: 0; top: 13px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--ft-blue) 0, var(--ft-blue) 85%, transparent);
  transform-origin: left; 
}
.ft-step--branch .ft__text { padding-top: 4px; }
.ft-step--branch .ft__tag, .ft-shot__tag { position: relative; z-index: 1; justify-self: start; width: fit-content; background: var(--color-bg-default); }
.ft-step--branch .ft__tag { margin-left: -12px !important; padding: 0 10px 0 12px; }
.ft-shot__tag { margin-top: 4px !important; padding: 0 10px; margin-left: -10px !important; color: var(--ft-blue) !important; }
.ft.is-live .ft__hline { transform: scaleX(0); transition: transform .7s cubic-bezier(.2, .8, .2, 1) .35s; }
.ft.is-live .ft-step--branch.is-reached .ft__hline { transform: scaleX(1); }
.ft.is-live .ft-step--branch:not(.is-reached) .ft-shot__tag { color: var(--color-fg-muted) !important; }
@media (prefers-reduced-motion: reduce) { .ft.is-live .ft__hline { transition: none; } }

/* The main line ends in the Result box: its left border sits on the rail, and greens up on arrival */
.ft:has(+ .ft-result) .ft-step--branch::after { display: none; }   /* no dashed "what's next" here, the line goes on */
.ft:has(+ .ft-result) { margin-bottom: 0; }
.ft-result { margin-left: 13px; margin-top: 0; position: relative; }   /* border-left (2px) sits exactly on the rail: left 13px, 2px wide */
.ft-result::before {   /* static fallback: short connector from the timeline into the box */
  content: ""; position: absolute; left: -2px; bottom: 100%; width: 2px; height: var(--space-48);
  background: linear-gradient(180deg, var(--ft-blue, #0a68dc), var(--color-feedback-success-fg));
}
.ft-result.is-live::before { display: none; }
.ft:has(+ .ft-result) .ft__steps { padding-bottom: var(--space-48) !important; }
.ft-result.is-live { transition: border-color .35s, background-color .35s; }
.ft-result.is-live:not(.is-reached) { border-left-color: var(--color-border-default); background: var(--color-bg-subtle); }
.ft-result.is-live:not(.is-reached) .cs-result__label { color: var(--color-fg-muted); }
.ft-result .cs-result__label { transition: color .35s; }
.cs-result .ft-result__also { margin-top: var(--space-12) !important; color: var(--color-fg-muted); }
@media (prefers-reduced-motion: reduce) { .ft-result.is-live { transition: none; } }
/* Branch: the label stays on the branch line, the title and text below it travel along */
.ft-step--branch .ft__text { align-self: stretch; align-content: start; }
.ft__stick { display: grid; gap: var(--space-8); }
@media (min-width: 881px) {
  .ft-step--branch .ft__text { position: static; }
  .ft__stick { position: sticky; top: 88px; }
}
.ft__stick.is-settling { animation: ft-settle .55s cubic-bezier(.3, .7, .4, 1); }
@media (prefers-reduced-motion: reduce) { .ft__stick.is-settling { animation: none; } }

/* every step colours the same way on arrival, A included */
.ft.is-live .ft-step.is-reached .ft__tag { color: var(--ft-blue); }

/* Branch: once its text travels along, a blue subheadline names the platforms, like the steps above */
.ft__stick-tag { display: block; max-height: 0; opacity: 0; margin: 0 0 calc(-1 * var(--space-8)) !important; overflow: hidden;
  transition: max-height .35s cubic-bezier(.2, .8, .2, 1), opacity .25s, margin .35s; }
.ft.is-live .ft__stick-tag { color: var(--ft-blue); }
.ft__stick.is-stuck .ft__stick-tag { max-height: 24px; opacity: 1; margin-bottom: 0 !important; }
@media (prefers-reduced-motion: reduce) { .ft__stick-tag { transition: none; } }

/* Offer Box timeline, same colour language as the Flex Ticket timeline:
   1 grey → line turns blue on the way to 2 → blue turns green on the way to 3 (the live result) */
.evo { --evo-green: var(--color-feedback-success-fg); --evo-gb: #2a6fb0; }
.evo__step:nth-child(1)::after  { background: linear-gradient(90deg, var(--evo-grey), var(--evo-mid)); }
.evo__step:nth-child(2)::before { background: linear-gradient(90deg, var(--evo-mid), var(--evo-blue)); }
.evo__step:nth-child(2)::after  { background: linear-gradient(90deg, var(--evo-blue), var(--evo-gb)); }
.evo__step:nth-child(3)::before { background: linear-gradient(90deg, var(--evo-gb), var(--evo-green)); }
.evo__step:nth-child(3)::after  { background: repeating-linear-gradient(90deg, var(--evo-green) 0 6px, transparent 6px 12px); }
.evo__step:nth-child(2) .evo__tag span { border-color: var(--evo-blue); color: var(--evo-blue); }
.evo__step--now .evo__tag { color: var(--evo-green); }
.evo__step--now .evo__tag span { background: var(--evo-green); border-color: var(--evo-green); }
.evo__step--now .evo__tag span::after { border-color: var(--evo-green); }
.evo__step--now .figure__link { background: var(--color-feedback-success-bg); border-color: var(--color-green-200); }
@media (max-width: 880px) {
  .evo__steps::before { background: linear-gradient(180deg, var(--evo-grey) 0, var(--evo-blue) 45%, var(--evo-green) 100%); }
}
/* the line fades in from the left before 1, so it runs start to end */
.evo__step:first-child::before { display: block; left: 0; right: 50%; background: linear-gradient(90deg, transparent, var(--evo-grey) 85%); }
@media (max-width: 880px) {
  .evo__step:first-child::before { display: none; }
  .evo__steps::before { top: -32px; background: linear-gradient(180deg, transparent 0, var(--evo-grey) 46px, var(--evo-blue) 45%, var(--evo-green) 100%); }
}

/* Screenshot frames: smaller radius everywhere, and all neutral grey (colour lives on the timeline only) */
.evo .figure__link, .ft__frame, .abtest__frame, .platforms__frame { border-radius: var(--radius-md); }
.evo .figure__link img, .ft__frame img, .abtest__frame img, .platforms__frame img { border-radius: var(--radius-sm); }
.ft__phones img { border-radius: var(--radius-md); }
.evo__step--now .figure__link,
.ft-step--b > .ft__frame, .ft-step--iter > .ft__frame {
  background: var(--color-bg-subtle); border-color: var(--color-border-default);
}

/* Hero: facts box sits on the same baseline as the KPI chips */
.cs-hero--bottom { align-items: end; }

/* Price Guarantee: funnel diagram (variant A) and frame sizes */
.ft-step--wide > .ft__frame { max-width: none; }
.ft__frame--narrow { max-width: 600px; }
.funnel { display: grid; gap: var(--space-24); padding: var(--space-32) var(--space-24); }
.funnel__steps { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.funnel__steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 13px; height: 2px; background: var(--color-border-default); }
.funnel__steps li { position: relative; margin: 0 !important; display: grid; justify-items: center; gap: var(--space-8); text-align: center;
  font-family: var(--font-family-sans); font-size: var(--font-size-100); line-height: var(--font-line-height-100); color: var(--color-fg-muted); }
.funnel__steps span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-bg-default);
  border: var(--border-width-default) solid var(--color-border-default); font-weight: var(--font-weight-medium); color: var(--color-fg-muted); }
.funnel__steps .is-here { color: var(--color-fg-default); font-weight: var(--font-weight-medium); }
.funnel__steps .is-here span { background: var(--color-blue-600); border-color: var(--color-blue-600); color: var(--color-base-white); }
.funnel__steps .is-pay span { border-style: dashed; }
.funnel__stack { display: grid; gap: var(--space-8); width: min(260px, 60%); justify-self: center; }
.funnel__card { padding: var(--space-8) var(--space-12); border-radius: var(--radius-sm); background: var(--color-bg-default); border: var(--border-width-default) solid var(--color-border-default);
  font-family: var(--font-family-sans); font-size: var(--font-size-100); line-height: var(--font-line-height-100); color: var(--color-fg-muted); display: flex; align-items: center; gap: var(--space-8); }
.funnel__card--pg { border-color: var(--color-blue-600); color: var(--color-fg-default); font-weight: var(--font-weight-medium); box-shadow: 0 0 0 3px var(--color-blue-100); }
.funnel__check { width: 12px; height: 12px; border-radius: 2px; background: var(--color-blue-600); }
/* "What I would change next" sits after the result, quieter than it */
.cs-next { max-width: 720px; margin-top: var(--space-24); }
.cs-next .cs-next__label { margin: 0 0 var(--space-4) !important; color: var(--button-ghost-fg); }
@media (max-width: 560px) {
  .funnel { padding: var(--space-24) var(--space-12); }
  .funnel__steps li { font-size: 10px; line-height: 13px; }
  .funnel__stack { width: 80%; }
}

/* Case study grid: kicker on top, then the H2 left (5/12) and the text right (7/12), both starting on the same line.
   Visuals stay full width. Results and notes start on the text column, so blocks share the same edges. */
.cs-grid { --cs-gap: var(--space-48, 48px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 var(--cs-gap); align-items: start; margin-bottom: var(--space-48, 48px); }
.cs-head > :last-child { margin-bottom: 0 !important; }
.cs-head h2 { margin-bottom: var(--space-12); }
.cs-body { padding-top: 6px; }                /* first text line on the H2's cap line */
.cs-body > :last-child { margin-bottom: 0; }
.cs-grid + .figure, .cs-grid + .moments { margin-top: 0; }
/* Results and notes: left aligned, two thirds wide */
.cs-grid ~ .cs-result, .cs-grid ~ .principle { margin-left: 0; max-width: calc((100% - var(--space-48, 48px)) * 2 / 3 + var(--space-48, 48px) / 2); }
/* After a timeline the result sits on the rail (13px), and the note below follows the same edge */
.cs-grid ~ .ft-result, .cs-grid ~ .ft-result ~ .principle { margin-left: 13px; max-width: calc((100% - var(--space-48, 48px)) * 2 / 3 + var(--space-48, 48px) / 2 - 13px); }
/* Sub-blocks (My approach, Modular component): title on its own line, text across the full width */
.cs-sub { margin: var(--space-48, 48px) 0 var(--space-32); }
.cs-section .cs-sub__title { margin: 0 0 6px; font-family: var(--font-family-display); font-weight: 500; font-size: 24px; line-height: 32px; color: var(--color-fg-default); }
.cs-sub p { margin: 0; }
.cs-grid ~ .pgx .pgx-intro { max-width: none; }
@media (max-width: 900px) {
  .cs-grid { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-32); }
  .cs-body { padding-top: var(--space-8); }
  .cs-grid ~ .cs-result, .cs-grid ~ .principle { max-width: none; }
  .cs-grid ~ .ft-result, .cs-grid ~ .ft-result ~ .principle { max-width: none; }
}

/* Footer: "Built with AI and love" icons */
.built .ico { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.15em; fill: var(--color-action-primary-bg-default); }
.built .ico--love { fill: var(--color-red-500, #e5484d); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Legal pages (Impressum, Datenschutz) */
.legal { padding: var(--space-48) 0 var(--space-64, 64px); }
.legal h1 { margin: 0 0 var(--space-8); }
.legal h2 { margin: var(--space-32) 0 var(--space-8); }
.legal p, .legal ul { margin: 0 0 var(--space-12); }
.legal__en, .legal__date { color: var(--color-fg-muted); }
.legal__links { margin-top: var(--space-40) !important; }
.footer-legal a { color: inherit; }