/* Floating nav — ONE bar, constant width & position; Apple-style glass fades in on scroll */
.site-nav { position: sticky; top: var(--space-3); z-index: 60; padding-inline: var(--space-4); }
.site-nav__inner { max-width: var(--content-max); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; padding: var(--space-2) var(--space-3); border-radius: 999px; border: 1px solid transparent; }
@media (prefers-reduced-motion: no-preference) { .site-nav__inner { transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease; } }
/* Apple-style glass — only once scrolled (GLASS: allowed) */
.site-nav.is-scrolled .site-nav__inner { padding: var(--space-4) var(--space-5); background: rgba(251,250,247,0.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-color: rgba(20,32,31,0.08); box-shadow: 0 8px 30px rgba(20,32,31,0.10); }
.site-nav__brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; color: var(--color-ink); }
.site-nav__brand:hover { text-decoration: none; }
.site-nav__id { display: flex; flex-direction: column; line-height: 1.15; }
.site-nav__id strong { font-weight: 600; }
.site-nav__id span { font-size: var(--fs-small); color: var(--color-muted); font-weight: 400; }
.avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; display: block; background: var(--color-primary-soft); transition: transform .25s ease; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.site-nav__brand:hover .avatar { transform: scale(1.08); }
.site-nav__nav { display: flex; align-items: center; gap: var(--space-5); }
.site-nav__list { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.site-nav__list a { display: inline-block; color: var(--color-ink); font-weight: 500; padding: 6px 14px; border-radius: 999px; border: 1px solid transparent; }
.site-nav__list a:hover { text-decoration: none; color: var(--color-primary-ink); background: rgba(21,21,21,0.05); }
/* Selected page — soft glass pill (GLASS: allowed, nav family) */
.site-nav__list a[aria-current="page"] { color: var(--color-primary-ink); background: rgba(255,255,255,0.45); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border-color: rgba(20,32,31,0.08); box-shadow: 0 1px 4px rgba(20,32,31,0.05); view-transition-name: nav-pill; }
@media (prefers-reduced-motion: no-preference) { .site-nav__list a { transition: background-color .25s ease, color .2s ease; } }
.site-nav__cta { background: var(--color-primary); color: #fff; padding: var(--space-2) var(--space-4); border-radius: 999px; font-weight: 500; }
.site-nav__cta:hover { background: var(--color-primary-hover); text-decoration: none; }
@media (max-width: 620px) {
  .site-nav { padding-inline: var(--space-2); }
  .site-nav__id { display: none; }
  .site-nav__inner { gap: var(--space-2); padding: var(--space-2); }
  .site-nav__nav { gap: var(--space-2); }
  .site-nav__list { gap: 0; }
  .site-nav__list a { padding: 6px 8px; font-size: var(--fs-small); white-space: nowrap; }
  .site-nav__cta { padding: 6px 12px; font-size: var(--fs-small); white-space: nowrap; }
  /* Phones (Tom, 2026-11-04): the scrolled glass keeps the compact padding, or LinkedIn is
     cut off at 360-375px; and a short fade above the pill stops text showing in the gap. */
  .site-nav.is-scrolled .site-nav__inner { padding: var(--space-2); }
  .site-nav::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(-1 * var(--space-3)); height: calc(var(--space-3) + 28px); background: linear-gradient(var(--color-bg) 40%, rgba(253,253,253,0)); pointer-events: none; opacity: 0; transition: opacity .3s ease; }
  .site-nav.is-scrolled::before { opacity: 1; }
}
@media (max-width: 380px) {
  .site-nav__list a { padding: 6px 6px; }
  .site-nav__cta { padding: 6px 10px; }
}

/* Footer (2026-11-02): Tom's card, not a second hero. Left-aligned sign-off in
   one ink; on the right a ruled list of what a reader needs to reach him: the
   address with a one-click copy, Hong Kong time on a small live clock, the
   links. No dots, no cursor, no centred headline: those belong to the hero. */
.site-footer { position: relative; margin-top: var(--space-9); padding: var(--space-8) 0 var(--space-4); color: var(--color-body); }
/* The line above the footer, drawn in from the left as the footer arrives —
   a guide being dragged out. Visible by default; scroll-driven where supported. */
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--color-border); transform-origin: left; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-footer::before { animation: sfRule linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes sfRule { from { transform: scaleX(0); } }
  }
}
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-8); align-items: end; }
.site-footer__line { grid-column: 1; margin: 0; max-width: 13ch; font-family: var(--font-display); font-size: clamp(2.25rem, 4.4vw, 3.5rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: #333131; text-wrap: balance; }
/* The sign-off answers the hero: same setup/payoff split, the payoff in the hero's
   dark teal gradient (every stop >= 4:1), so "…and business value." is closed by
   "…and prove it." No new colour. */
.site-footer__pay { display: block; width: fit-content; color: transparent; background-image: linear-gradient(100deg, #2a6560 0%, #3f8a84 50%, #4d82b5 100%); -webkit-background-clip: text; background-clip: text; }
.site-footer__card { grid-column: 2; display: grid; }
/* The payoff rises into place as the footer scrolls in, like the hero's lines on load.
   Scroll-driven, so browsers without it simply show the final state. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-footer__pay { animation: sfPay linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes sfPay { from { opacity: 0; transform: translateY(.35em); filter: blur(6px); } }
  }
}
.site-footer__row { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; }

.site-footer__mail { margin-right: auto; font-size: var(--fs-title); font-weight: 500; color: var(--color-ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s cubic-bezier(.22,1,.36,1); }
.site-footer__mail:hover { color: var(--color-ink); text-decoration: none; background-size: 100% 1px; }
/* Copied = selected: the hero's Figma selection box and handles round the address
   for as long as "Copied" shows. The box draws itself, the handles pop. */
.site-footer__mail { position: relative; }
.site-footer__mail::before { content: ""; position: absolute; inset: -4px -8px; border: 1.5px solid var(--color-primary); border-radius: 1px; opacity: 0; pointer-events: none; }
.sf-h { position: absolute; width: 8px; height: 8px; background: #fff; border: 1.5px solid var(--color-primary); border-radius: 1px; opacity: 0; transform: scale(0); pointer-events: none; }
.sf-h--tl { top: -8px; left: -12px; } .sf-h--tr { top: -8px; right: -12px; }
.sf-h--bl { bottom: -8px; left: -12px; } .sf-h--br { bottom: -8px; right: -12px; }
.site-footer__mail.is-selected { color: var(--color-primary-ink); background-size: 0 1px; }
.site-footer__mail.is-selected::before { opacity: 1; animation: sfDraw .45s cubic-bezier(.65,0,.35,1) both; }
.site-footer__mail.is-selected .sf-h { opacity: 1; transform: none; transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .1s; }
.site-footer__mail.is-selected .sf-h--tl { transition-delay: .1s; } .site-footer__mail.is-selected .sf-h--tr { transition-delay: .2s; }
.site-footer__mail.is-selected .sf-h--br { transition-delay: .28s; } .site-footer__mail.is-selected .sf-h--bl { transition-delay: .36s; }
@keyframes sfDraw { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* Copy: the label rolls from "Copy" to "Copied", in teal, for two seconds */
.site-footer__copybtn { position: relative; display: inline-grid; height: 34px; padding: 0 14px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-body); font: 500 var(--fs-small)/34px var(--font-sans); cursor: pointer; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.site-footer__copybtn::after { content: ""; position: absolute; inset: -6px -4px; }
.site-footer__copybtn > span { grid-area: 1 / 1; transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
.site-footer__copy-b { transform: translateY(100%); opacity: 0; }
.site-footer__copybtn:hover { border-color: var(--color-ink); color: var(--color-ink); }
.site-footer__copybtn:focus-visible, .site-footer__links a:focus-visible, .site-footer__up:focus-visible, .site-footer__mail:focus-visible { outline: 2px solid var(--color-primary-ink); outline-offset: 3px; border-radius: 6px; }
.site-footer__copybtn.is-copied { border-color: var(--color-primary-soft); background: var(--color-primary-soft); color: var(--color-primary-ink); }
.site-footer__copybtn.is-copied .site-footer__copy-a { transform: translateY(-100%); opacity: 0; }
.site-footer__copybtn.is-copied .site-footer__copy-b { transform: none; opacity: 1; }

/* Hong Kong time on a 22px clock whose hands footer.js sets to the real time */
.site-footer__clock { flex: none; width: 22px; height: 22px; color: var(--color-ink); }
.site-footer__clock line { transform-box: view-box; transform-origin: 12px 12px; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.site-footer__where { font-size: var(--fs-small); color: var(--color-muted); }
.site-footer__gap:not(:empty)::before { content: " · "; }
.site-footer__time:not(:empty) { margin-right: .5em; font-size: var(--fs-body); font-weight: 500; color: var(--color-ink); font-variant-numeric: tabular-nums; }

.site-footer__links { display: flex; flex-wrap: wrap; column-gap: var(--space-6); min-height: 52px; align-items: center; list-style: none; margin: 0; padding: 0; }
.site-footer__links a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--color-body); font-weight: 500; font-size: var(--fs-small); text-decoration: none; }
.site-footer__links a span { display: inline-block; color: var(--color-muted); transition: transform .25s ease; }
.site-footer__links a:hover { color: var(--color-ink); text-decoration: none; }
.site-footer__links a:hover span { transform: translate(2px, -2px); color: var(--color-ink); }

.site-footer__bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); }
.site-footer__legal { margin: 0; font-size: var(--fs-small); color: var(--color-muted); }
.site-footer__up { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-small); font-weight: 500; color: var(--color-body); text-decoration: none; }
.site-footer__up:hover { color: var(--color-ink); text-decoration: none; }
.site-footer__up span { display: inline-block; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.site-footer__up:hover span { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .site-footer__copybtn > span, .site-footer__clock line, .site-footer__mail, .site-footer__links a span, .site-footer__up span, .sf-h { transition: none !important; }
  .site-footer__mail.is-selected::before { animation: none; }
}
@media (max-width: 760px) {
  .site-footer__inner { grid-template-columns: 1fr; row-gap: var(--space-7); }
  .site-footer__line, .site-footer__card { grid-column: 1; }
  .site-footer__mail { font-size: var(--fs-body); }
  .site-footer__gap:not(:empty) { display: block; margin-top: 2px; }
  .site-footer__gap:not(:empty)::before { content: none; }
  .site-footer__row:has(.site-footer__gap:not(:empty)) { align-items: flex-start; padding-top: 12px; }
  .site-footer__row:has(.site-footer__gap:not(:empty)) .site-footer__clock { margin-top: 1px; }
  .site-footer__bottom { margin-top: var(--space-6); }
}

/* Button */
.btn { display: inline-block; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-weight: 500; transition: transform .15s ease, background-color .15s ease; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--ghost { border: 1px solid var(--color-border); color: var(--color-primary-ink); }
@media (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-1px); } }

/* Tag */
.tag { display: inline-block; padding: 2px var(--space-3); border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary-ink); font-size: var(--fs-small); font-weight: 500; }

/* Hero */
.hero { padding: var(--space-9) 0 var(--space-7); max-width: 900px; }
.hero__eyebrow { color: var(--color-primary-ink); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--fs-small); margin-bottom: var(--space-4); }
.hero__name { font-size: clamp(3.5rem, 11vw, 7rem); font-weight: 600; letter-spacing: -0.03em; line-height: 0.95; margin-bottom: var(--space-5); }
.hero__name-a { color: var(--color-primary); }
.hero__name-b { color: var(--color-ink); }
.hero__statement { font-size: var(--fs-h2); font-weight: 500; color: var(--color-ink); max-width: 22ch; margin-bottom: var(--space-4); }
.hero__lede { font-size: var(--fs-h3); color: var(--color-muted); margin-bottom: var(--space-6); }
/* Kinetic name reveal on load */
@media (prefers-reduced-motion: no-preference) {
  .hero__name-a, .hero__name-b { display: inline-block; animation: nameRise 0.7s cubic-bezier(.16,1,.3,1) both; }
  .hero__name-b { animation-delay: 0.1s; }
  @keyframes nameRise { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
}

/* Section heading */
.section { padding-block: var(--space-7); }
.section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-5); }
/* Section titles use the heading face (Poppins), like every other heading. */
.section-heading h2, .about-teaser h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); letter-spacing: -0.01em; }
.section-heading__note { color: var(--color-muted); font-size: var(--fs-small); margin: 0; }
.about-teaser p { max-width: 58ch; }

/* Project grid + card */
/* padding-top clears the sheets, which overhang the top of each card by ~19%
   of the scene height; without it they cover the section heading. */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10) var(--space-7); align-items: start; padding-top: 4.5rem; }
@media (max-width: 980px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
/* The sheets deliberately overhang the card; single column leaves no gutter to
   absorb that, so it is clipped rather than allowed to scroll the page.
   overflow-x: clip (not hidden) so no scroll container is created. */
@media (max-width: 640px) { .project-grid { grid-template-columns: 1fr; overflow-x: clip; } }
/* ---- Project folders --------------------------------------------------------
   Geometry follows adasilv2.framer.website, read off its DOM. The front sheet is
   a brand board (their front sheet is a brand illustration); the work screens
   tuck in behind it and stay inside the folder's width, so they read as being in
   the file. The folder is a single SVG path — the reference's own, so the notch
   and every radius are exact.

   The folder is filled with the PAGE colour, never white: its lower half then
   melts into the page and only the edge crossing the sheets reads as a folder.
   Which is also why nothing carries a shadow at rest — a shadow darkens the page
   around the card, and the folder is that same colour, so it would stop
   disappearing and turn into a pale slab. */
.project-card { position: relative; display: block; text-decoration: none; }
.project-card:hover { text-decoration: none; }
/* The fanned sheets reach into the next column, so the hovered card leads */
.project-card:hover, .project-card:focus-visible { z-index: 2; }
.pf__wrap { display: block; width: min(100%, 290px); margin-inline: auto; border-radius: 28px; transform-origin: center center; }
.pf__scene { position: relative; display: block; aspect-ratio: 272 / 305; }
.pf__docs { position: absolute; inset: 0; }
.pf__doc { position: absolute; overflow: hidden; }

/* Work screens: inside the folder's width, peeking above the board. Quiet at
   rest -- a shallow peek, a tight fan and a veil -- so the board leads and the
   screens are a hint of contents; hover clears the veil and opens the fan. */
.pf__screen { width: 42%; aspect-ratio: 9 / 19; border-radius: 14px; opacity: 0.62; }
.pf__screen--1 { left: 1%; top: -8%; transform: rotate(-5deg); }
.pf__screen--2 { left: 29%; top: -11%; transform: rotate(0deg); }
.pf__screen--3 { left: 57%; top: -8%; transform: rotate(5deg); }
/* Two sheets sit symmetrically rather than leaving the right side empty */
.pf__docs--2 .pf__screen--1 { left: 8%; top: -9%; transform: rotate(-5deg); }
.pf__docs--2 .pf__screen--2 { left: 50%; top: -9%; transform: rotate(5deg); }
.project-card:hover .pf__docs--2 .pf__screen--2,
.project-card:focus-visible .pf__docs--2 .pf__screen--2 { transform: translate(18%, -12%) rotate(11deg); }
/* Screens show whole. --crop is only set on the sheets that carry a drawn
   dynamic island, and only by their own status-bar height, so the app content
   starts at its own edge instead of being cut mid-element. */
.pf__shot { position: absolute; top: calc(0% - var(--crop, 0%)); left: 0; width: 100%; height: calc(100% + var(--crop, 0%)); object-fit: cover; object-position: top; display: block; }
.pf__screen .pf__lines { display: block; width: 100%; height: 100%; }
.pf__screen--blank { background: #eceae4; }
.pf__lines { display: flex; flex-direction: column; gap: 6px; padding: 22px 12px; background: #f6f5f1; color: var(--color-muted); }
.pf__lines i { height: 4px; border-radius: 2px; background: currentColor; opacity: .28; }
.pf__lines i:nth-child(2) { width: 64%; } .pf__lines i:nth-child(4) { width: 78%; }

/* Brand board: the front sheet, a pale tint of the client's colour with their mark */
.pf__board { left: 0; top: 0; width: 100%; aspect-ratio: 272 / 268; border-radius: 26px;
  background: color-mix(in srgb, var(--brand) 13%, #fff);
  display: flex; flex-direction: column; align-items: center; gap: 11px; padding-top: 16%; }
/* 16%: the mark ends up centred in the strip of board the folder leaves visible */
/* Supplied marks are transparent wordmarks: no radius (it was clipping the B),
   and both axes capped so a wide mark and a squarer one both sit well. */
.pf__boardlogo { width: auto; height: auto; max-width: 62%; max-height: 42px; object-fit: contain; }
.pf__boardname { font-family: var(--font-sans); font-size: var(--fs-title); font-weight: 600; letter-spacing: 0.01em; color: color-mix(in srgb, var(--brand) 78%, #000); }

.pf__folderwrap { position: absolute; z-index: 2; left: -0.4%; bottom: 0; width: 100.8%; aspect-ratio: 274 / 194; }
.pf__folder { display: block; width: 100%; height: 100%; }
.pf__folder path { fill: var(--color-bg); }

.pf__meta { position: absolute; z-index: 3; left: 9.2%; right: 9.2%; top: 11.3%; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); line-height: 1.35; }
.pf__meta b { font-weight: 500; color: var(--color-body); }
.pf__meta i { font-style: normal; color: var(--color-subtle); }
/* Anchored from the bottom so a one-line and a two-line title both sit inside
   the folder instead of the second line hanging past its edge. */
.pf__title { position: absolute; z-index: 3; left: 9.2%; right: 9.2%; bottom: 13%; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-title); line-height: 1.2; color: var(--color-ink); }

/* Hover: the group scales and tilts, the screens fan up and outward, the board
   holds -- the reference's own choreography and its shadow. */
@media (prefers-reduced-motion: no-preference) {
  .pf__wrap { transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .5s ease; }
  .pf__doc { transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1), opacity .4s ease; }
  .pf__screen--2 { transition-delay: .04s; }
  .pf__screen--3 { transition-delay: .08s; }
}
.project-card:hover .pf__wrap, .project-card:focus-visible .pf__wrap {
  transform: scale(1.11) rotate(-8deg);
  box-shadow: 0 -1px 44px -14px rgba(20, 32, 31, 0.16);
}
.project-card:hover .pf__screen, .project-card:focus-visible .pf__screen { opacity: 1; }
/* A tighter fan than before: the sheets should read as one stack opening, not
   three separate cards flying apart. */
.project-card:hover .pf__screen--1, .project-card:focus-visible .pf__screen--1 { transform: translate(-18%, -12%) rotate(-11deg); }
.project-card:hover .pf__screen--2, .project-card:focus-visible .pf__screen--2 { transform: translate(0, -20%) rotate(0deg); }
.project-card:hover .pf__screen--3, .project-card:focus-visible .pf__screen--3 { transform: translate(18%, -12%) rotate(11deg); }

/* Case layout */
/* Madhurima layout: a narrow sticky menu in the margin and an 800px reading
   column; 180 + 48 + 800 fits inside the 1120px container, so nothing squeezes. */
.case { display: grid; grid-template-columns: 180px minmax(0, 800px); gap: var(--space-7); align-items: start; padding-block: var(--space-7) var(--space-9); }
/* min-width: 0 so a wide scrollable child cannot stretch the grid column */
.case__content { min-width: 0; }
.case-back { display: inline-block; padding: 11px 0; margin: -11px 0 calc(var(--space-6) - 11px); color: var(--color-muted); font-size: var(--fs-small); font-weight: 500; }
.case-back:hover { color: var(--color-primary-ink); text-decoration: none; }
.case-cover { margin: 0 0 var(--space-6); border-radius: var(--radius-lg); overflow: hidden; }
.case-cover--blank { aspect-ratio: 16 / 10; background: var(--color-primary-soft); }
.case-cover img { width: 100%; height: auto; display: block; }
/* A finished cover artwork carries its own device and backdrop */
.case-cover--flat { background: var(--case-accent-bg-3, var(--color-surface)); }

/* Animated cover — tinted backdrop, phone mockup, floating notification chip */
.case-cover--anim { position: relative; aspect-ratio: 16 / 11; display: flex; justify-content: center; align-items: flex-start; padding-top: 7%; }
/* Real device mockup: video sits in the screen cutout, frame PNG on top */
.cc-phone { position: relative; width: 46%; min-width: 260px; max-width: 400px; aspect-ratio: 1119 / 2295; }
.cc-phone__frame { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 18px 40px rgba(20,32,31,0.25)); }
.cc-phone__clip { position: absolute; z-index: 1; top: 1.85%; right: 4.4%; bottom: 1.85%; left: 4.4%; border-radius: 10% / 4.9%; overflow: hidden; background: #fff; }
.cc-phone__clip video.cc-phone__screen,
.cc-phone__clip img.cc-phone__screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transform-origin: 50% 30%; }
/* Opt-in only: masks the top of the source when the recording carries something
   we do not want on screen, such as a red REC indicator. It costs the bottom
   ~6% of the frame, which is where nav bars and primary buttons live, so never
   turn it on for a recording whose own status bar is already clean. */
.cc-phone--mask-top .cc-phone__clip video.cc-phone__screen,
.cc-phone--mask-top .cc-phone__clip img.cc-phone__screen { top: -0.4%; height: 106%; clip-path: inset(6% 0 0 0); }
/* Ken Burns (option B): slow ambient zoom, cover only. Key-flow recordings
   already move on their own, so they must not inherit it. */
@media (prefers-reduced-motion: no-preference) {
  .case-cover--anim .cc-phone__clip video.cc-phone__screen { animation: ccKenBurns 9s ease-in-out 1.2s infinite alternate; }
  @keyframes ccKenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.16); }
  }
}
.cc-phone__screen--empty { position: absolute; inset: 0; background: #fff; }
.cc-phone__screen--empty::after { content: "Recording pending"; display: flex; align-items: center; justify-content: center; height: 100%; color: var(--color-disabled); font-size: var(--fs-small); }
.cc-chip { position: absolute; left: 8%; top: 58%; z-index: 3; display: flex; align-items: center; gap: 10px; max-width: 320px; padding: 14px 18px; background: rgba(255,255,255,0.96); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(20,32,31,0.16); font-size: var(--fs-small); font-weight: 500; color: var(--color-ink); line-height: 1.4; }
.cc-chip__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #1e8e3e; color: #fff; font-size: var(--fs-label); font-weight: 600; }
@media (max-width: 720px) { .cc-chip { left: 4%; max-width: 240px; padding: 10px 14px; } }
@media (prefers-reduced-motion: no-preference) {
  .case-cover--anim .cc-phone { animation: ccRise 0.9s cubic-bezier(.16,1,.3,1) both; }
  .cc-chip { animation: ccChipIn 0.7s cubic-bezier(.16,1,.3,1) 0.5s both, ccFloat 5s ease-in-out 1.2s infinite alternate; }
  @keyframes ccRise { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
  @keyframes ccChipIn { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
  @keyframes ccFloat { from { translate: 0 0; } to { translate: 0 -10px; } }
}
/* Fits 3 or 4 facts (Tools is optional) without a breakpoint */
.case-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-5); margin: 0 0 var(--space-8); padding-bottom: var(--space-5); }
.case-facts dt { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.2px; text-transform: uppercase; color: var(--color-body); margin-bottom: var(--space-1); }
.case-facts dd { margin: 0; color: var(--color-body); font-size: var(--fs-body); line-height: 1.4; }
@media (max-width: 640px) { .case-facts { grid-template-columns: 1fr; gap: var(--space-4); } }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; row-gap: var(--space-4); padding-top: var(--space-5); } }

.case-sidenav { position: sticky; top: 120px; align-self: start; }
.case-sidenav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); margin-left: -12px; }
/* Quiet grey text (#737373 clears AA), 16px like the reference; the section
   you are in sits in Tom's glass pill. */
.case-sidenav a { display: inline-block; color: var(--color-quiet); font-size: var(--fs-body); font-weight: 400; line-height: 1.4; padding: 5px 12px; border-radius: 999px; border: 1px solid transparent; transition: color .2s ease; }
.case-sidenav a:hover { text-decoration: none; color: var(--color-ink); background: rgba(21,21,21,0.05); }
/* Active section — same glass pill language as the top nav (GLASS: allowed) */
/* Active section — same glass pill language as the top nav (GLASS: allowed) */
.case-sidenav a.is-active { color: var(--color-primary-ink); font-weight: 500; background: rgba(255,255,255,0.45); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border-color: rgba(20,32,31,0.08); box-shadow: 0 1px 4px rgba(20,32,31,0.05); view-transition-name: sidenav-pill; }
/* Under 900px the sidenav becomes one horizontally-scrollable pill row, so the
   title stays on the first screen instead of behind a wall of nine bare links */
@media (max-width: 900px) {
  .case-sidenav { position: static; margin-bottom: var(--space-4); min-width: 0; max-width: 100%; }
  .case-sidenav ul { flex-direction: row; overflow-x: auto; gap: var(--space-1); margin-left: 0; padding-bottom: var(--space-2); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .case-sidenav ul::-webkit-scrollbar { display: none; }
  .case-sidenav ul { gap: var(--space-5); }
  .case-sidenav a { flex: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .case-sidenav a { transition: background-color .25s ease, color .2s ease; }
  ::view-transition-group(sidenav-pill) { animation-duration: 0.3s; animation-timing-function: cubic-bezier(.16,1,.3,1); }
}

/* Case header */
.case-header { margin-bottom: var(--space-5); }
.case-header h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-case-display); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 0; text-wrap: pretty; }
.case-header__meta { font-family: var(--font-mono); color: var(--color-body); font-size: var(--fs-small); letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: var(--space-2); }
.case-header__subtitle { font-size: var(--fs-body); color: var(--color-muted); line-height: 1.5; margin-top: var(--space-3); }
.case-section { margin-bottom: 10rem; /* 160px between sections, like the reference */ scroll-margin-top: 110px; }
/* The last section hands over to More work, whose own rule and padding are the break */
.case-section:not(:has(~ .case-section)) { margin-bottom: 0; }
@media (max-width: 640px) { .case-section { margin-bottom: var(--space-9); } :root { --block-gap: 32px; } .case-section h3 { margin-top: var(--space-7); } }
/* Grey and quiet, but --color-subtle (#818181) is only 3.6:1 at this size, so the
   label takes --color-muted (#666, 5.2:1) to stay legible. */
.case-section h2 { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-body); margin-bottom: var(--space-2); }
/* Topic sentence = the section's real heading: display serif, 24px */
.case-section .case-topic { font-size: var(--fs-case-headline); /* beats .case-section p */ font-weight: 500; line-height: 1.3; color: var(--color-ink); margin: 0 0 var(--space-4); max-width: 36ch; letter-spacing: -0.2px; text-wrap: pretty; }
/* Sub-heads open a new beat: generous air above (48px), and a real step up
   from body (16px -> 19px). Margins collapse with the block before, so the
   biggest of the two wins rather than stacking. */
.case-section h3 { font-size: var(--fs-case-subhead); font-weight: 500; line-height: 1.4; letter-spacing: 0; margin: var(--space-8) 0 var(--space-3); text-wrap: pretty; max-width: 44ch; }
.case-section h3:first-of-type { margin-top: var(--space-7); }

/* Per-project accent palette (front-matter `accent`) — small touchpoints only.
   Components fall back to the global teal when no accent is set. */
.case--accent-bns {
  --case-accent: #f56a00;
  --case-accent-2: #ff944c;
  --case-accent-ink: #a84a00; /* text on the soft backgrounds — keeps 4.5:1 */
  --case-accent-bg-1: #ffe5d4;
  --case-accent-bg-2: #fff1e8;
  --case-accent-bg-3: #fff8f3;
}
.case--accent-bns .flow-media--orange { background: var(--case-accent-bg-1); }
.case--accent-bns .goal-card__icon--biz { background: linear-gradient(135deg, var(--case-accent-bg-2), var(--case-accent-bg-1)); color: var(--case-accent); }

/* FWD, taken from the FWD library variables in the project's Figma file:
   Primary FWD Orange #E87722, Tertiary FWD Dark Orange #B74701 (used as the
   text tone because #E87722 on a light tint is well under 4.5:1). The soft
   backgrounds are tints of FWD Orange; ink checks at 5.4:1 on white, 4.8:1
   on bg-2 and 5.1:1 on bg-3. */
.case--accent-fwd {
  --case-accent: #e87722;
  --case-accent-2: #fed141;
  --case-accent-ink: #b74701;
  --case-accent-bg-1: #fae4d3;
  --case-accent-bg-2: #fcefe4;
  --case-accent-bg-3: #fef7f2;
}
.case--accent-fwd .flow-media--orange { background: var(--case-accent-bg-1); }
.case--accent-fwd .flow-media--teal { background: #dfe6e3; } /* toward FWD Dark Green */
.case--accent-fwd .flow-media--ink { background: #ece7e2; }  /* toward FWD Brown, so the three panels stay distinct */
.case--accent-fwd .metric-callout { background: var(--case-accent-bg-2); border-color: rgba(232,119,34,0.28); }
.case--accent-fwd .metric-callout__value { color: var(--case-accent-ink); }
.case--accent-fwd .goal-card__icon--user { background: linear-gradient(150deg, #e4ebe8, #c3d3cd); color: #183028; } /* toward FWD Dark Green */
.case--accent-fwd .goal-card__icon--biz { background: linear-gradient(150deg, var(--case-accent-bg-2), var(--case-accent-bg-1)); color: var(--case-accent-ink); }

/* Colour strategy for the FWD case: Dark Green carries the structural regions so
   FWD Orange stays rare enough to mean something. The app screens keep quiet
   backdrops, because they are already orange and the page must not compete. */


.case--accent-fwd .flow-media--teal { background: #dfe6e3; } /* toward FWD Dark Green */

/* The peak column earns one step more tint so "assessment" reads instantly */
.case--accent-fwd .jmatrix__stage.is-peak,
.case--accent-fwd .jmatrix__node.is-peak,
.case--accent-fwd .jmatrix__cell.is-peak { background: var(--case-accent-bg-2); }

/* Company brand row — logo + name↗ + subtitle, links to the company site */
.case-brand { margin-top: var(--space-5); }
.case-brand__link { display: inline-flex; align-items: center; gap: var(--space-3); }
.case-brand__link:hover { text-decoration: none; }
.case-brand img { height: 44px; width: auto; border-radius: var(--radius-md); }
.case-brand__text { display: flex; flex-direction: column; gap: 1px; }
.case-brand__name { color: var(--color-ink); font-weight: 500; font-size: var(--fs-body); line-height: 1.3; }
.case-brand__arrow { display: inline-block; margin-left: 2px; font-size: 0.85em; color: var(--color-muted); }
.case-brand__sub { font-size: var(--fs-label); letter-spacing: 0.02em; color: var(--color-muted); }
.case-brand__link:hover .case-brand__name { color: var(--color-primary-ink); }
@media (prefers-reduced-motion: no-preference) {
  .case-brand__arrow { transition: transform .2s ease; }
  .case-brand__link:hover .case-brand__arrow { transform: translate(2px, -2px); }
}
/* TL;DR emphasis — slightly bolder, same colour */
.case-lead strong { font-weight: 600; }
/* Readability cap: the column is 720px, which is ~95ch at this size. Prose stops at
   75ch, the top of the comfortable range, which keeps it close to the width of the
   media and components beneath it. Boards and grids still use the full column. */
.case-section p, .case-section > ul:not([class]) { max-width: 54ch; text-wrap: pretty; }
.case-section p { font-size: var(--fs-body); line-height: 1.55; letter-spacing: 0.16px; color: var(--color-body); margin: 0 0 var(--space-4); }
/* No colour here: .case-section p outranks a bare class, so the lead sits at body
   grey and the bolded phrases inside it carry the contrast. */
.case-lead { font-size: var(--fs-body); line-height: 1.4; margin-bottom: var(--space-5); }
.case-section ul, .case-section ol.case-list { font-size: var(--fs-small); color: var(--color-body); line-height: 1.65; padding-left: var(--space-5); margin: 0 0 var(--space-5); }
.case-section li { margin-bottom: var(--space-2); }

/* TL;DR */
/* TL;DR — plain bordered card (reference: quiet, no shadow) */
.tldr-card { padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: #fff; border: 1px solid var(--color-border); }
.case-section h2.tldr-card__label { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-body); margin: 0 0 var(--space-4); }
.tldr-card .case-lead { margin: 0; max-width: none; font-size: var(--fs-body); }
.tldr { display: grid; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.tldr__row { display: grid; grid-template-columns: 108px 1fr; gap: var(--space-4); }
.tldr dt { color: var(--color-muted); font-weight: 500; margin: 0; font-size: var(--fs-small); }
.tldr dd { margin: 0; color: var(--color-ink); font-size: var(--fs-small); }
/* TL;DR headline stats — ↑ green arrow, ink number, grey label (reference style) */

/* Figure */
.figure { margin: var(--space-5) 0; }
/* For a near-square artefact that would otherwise take the full column height */
.figure--narrow { max-width: 470px; margin-inline: auto; }
/* No frame: these artefacts already have their own edges and backgrounds */
.figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
/* The image itself is the zoom trigger */
.figure__zoom { position: relative; display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; font-family: var(--font-sans); border-radius: var(--radius-md); }
.figure__hint { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: 5px 12px; border-radius: 999px; background: rgba(13,13,13,0.78); color: #fff; font-size: var(--fs-label); font-weight: 500; opacity: 0; }
/* Artwork not in the repo yet: a labelled slot beats a broken image */
.figure__slot { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; padding: var(--space-5); border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); text-align: center; }
.figure__slot span { max-width: 40ch; color: var(--color-disabled); font-size: var(--fs-small); }
.figure__zoom:hover .figure__hint, .figure__zoom:focus-visible .figure__hint { opacity: 1; }
/* Touch has no hover, so the affordance has to be visible by default there */
@media (pointer: coarse) { .figure__hint { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .figure__hint { transition: opacity .2s ease; }
}

/* Full-size image dialog */
.figure-zoom { max-width: min(96vw, 1600px); max-height: 94vh; padding: 0; border: none; border-radius: var(--radius-md); background: none; overflow: visible; }
.figure-zoom::backdrop { background: rgba(13,13,13,0.82); }
.figure-zoom__img { display: block; max-width: 100%; max-height: 94vh; width: auto; height: auto; border-radius: var(--radius-md); background: #fff; }
.figure-zoom__close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); background: #fff; color: var(--color-ink); font-size: var(--fs-small); line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.figure-zoom__close:hover { background: var(--color-surface); }
@media (max-width: 640px) { .figure-zoom__close { top: 8px; right: 8px; } }
.figure figcaption { color: var(--color-muted); font-size: var(--fs-small); line-height: 1.55; max-width: 68ch; margin-top: var(--space-3); }
.figure--full-bleed img { width: 100%; }
.figure--two-up { display: inline-block; width: calc(50% - var(--space-2)); vertical-align: top; }

/* Metric callout (GLASS: allowed here) */
.metric-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-5) 0; }
.metric-callout { flex: 1 1 160px; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); border-radius: var(--radius-lg); background: rgba(63,138,132,0.10); backdrop-filter: blur(10px); border: 1px solid rgba(63,138,132,0.25); }
.metric-callout__value { font-size: var(--fs-h2); font-weight: 600; color: var(--color-primary-ink); font-variant-numeric: tabular-nums; }
.metric-callout__label { color: var(--color-muted); font-size: var(--fs-small); }

/* Key-flow media — tinted backdrop, zoomed phone recording cropped at the frame */
.flow-media-wrap { margin: var(--space-5) 0; }
.flow-media { display: flex; justify-content: center; align-items: flex-start; aspect-ratio: 4 / 3; padding-top: 7%; border-radius: var(--radius-lg); overflow: hidden; }
.flow-media--orange { background: #f6d9b8; }
.flow-media--teal { background: #cfe3e1; }
.flow-media--ink { background: #e3e3e0; }
.flow-media__media { width: 58%; max-width: 440px; display: block; border-radius: 28px 28px 0 0; box-shadow: 0 14px 40px rgba(20,32,31,0.22); }
.flow-media__media--empty { aspect-ratio: 9 / 16; background: rgba(255,255,255,0.55); border: 2px dashed rgba(20,32,31,0.18); }
.flow-media-wrap figcaption { color: var(--color-muted); font-size: var(--fs-small); margin-top: var(--space-2); }
@media (max-width: 640px) { .flow-media__media { width: 74%; } }

/* Before-screens, static: whole screen on the left, findings with detail
   crops on the right. No hover state carries meaning. */
.bscreens { display: grid; gap: var(--space-8); margin: var(--block-gap) 0; counter-reset: finding; }
.bscreen { display: grid; grid-template-columns: 232px 1fr; gap: var(--space-6); align-items: start; }
.bscreen__device { position: sticky; top: 120px; }
.cc-phone--still { width: 100%; min-width: 0; max-width: none; }
.bscreen__flat { display: block; width: 100%; height: auto; border-radius: 18px; }
/* The device frame reads as a screenshot of a real app; the drop shadow the
   cover uses would make it float, so it comes off here. contain (not cover)
   guarantees the nav bar and buttons at the bottom of the screen survive. */
.bscreen .cc-phone__frame { filter: none; }
.bscreen .cc-phone__clip img.cc-phone__screen { object-fit: contain; }
/* p.<class> because .case-section p outranks a bare class and would zero the gap */
.bscreen p.bscreen__label { font-size: var(--fs-small); letter-spacing: 0.01em; color: var(--color-muted); text-align: center; margin: var(--space-5) 0 0; }
/* Spotlight on the sticky screen. One element: the outline draws the region and
   box-shadow with a huge spread darkens everything outside it, clipped by the
   phone's own overflow. Off until JS places it, so no-JS shows a clean screenshot. */
/* Read-along spotlight. Two layers over the screen: a constant dim, and a
   second copy of the screen clipped to the region being read. Moving the
   region is a clip-path change, so the compositor does it; nothing is laid out. */
.bscreen__spot { position: absolute; z-index: 2; inset: 0; background: rgba(13, 13, 13, 0.44); opacity: 0; pointer-events: none; }
.bscreen__lit { position: absolute; z-index: 3; inset: 0; background-size: 100% auto; background-position: top left; background-repeat: no-repeat; opacity: 0; pointer-events: none;
  clip-path: inset(var(--spot-y, 0%) calc(100% - var(--spot-x, 0%) - var(--spot-w, 100%)) calc(100% - var(--spot-y, 0%) - var(--spot-h, 100%)) var(--spot-x, 0%) round 7px); }
.bscreen.is-on .bscreen__spot, .bscreen.is-on .bscreen__lit { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .bscreen__spot { transition: opacity .25s ease; }
  .bscreen__lit { transition: clip-path .38s cubic-bezier(0.22, 1, 0.36, 1), opacity .25s ease; }
}
/* The read-along only makes sense while the screen is pinned beside the findings */
@media (max-width: 900px) { .bscreen__spot, .bscreen__lit { display: none; } }
.bscreen__findings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.case-section ul.bscreen__findings { padding: 0; margin: 0; }
@media (min-width: 901px) { .bscreen__findings { gap: 12vh; padding-bottom: 8vh; } }
/* Before and after: two screens on the same quiet panel. The label carries the
   distinction rather than a coloured block, and neither one zooms. */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin: var(--space-6) 0; }
.ba__side { margin: 0; }
.ba__label { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-3); }
.ba__side--after .ba__label { color: var(--case-accent-ink, var(--color-primary-ink)); }
/* Fixed aspect so Before and After crop to the same height whatever the source
   export measures — the comparison only reads if both panels are one shape. */
.ba__panel { display: flex; align-items: flex-start; justify-content: center; aspect-ratio: 5 / 8; padding: var(--space-5) var(--space-5) 0; background: #f3f1ec; border-radius: var(--radius-lg); overflow: hidden; }
.ba__side--after .ba__panel { box-shadow: inset 0 0 0 1px var(--case-accent-bg-1, var(--color-border)); }
.ba__panel img { display: block; width: 82%; max-width: 260px; height: auto; border-radius: 14px 14px 0 0; box-shadow: 0 8px 24px rgba(20,32,31,0.14); }
.ba__slot { display: flex; align-items: center; justify-content: center; width: 82%; max-width: 260px; align-self: stretch; padding: var(--space-4); border: 2px dashed var(--color-border); border-radius: 14px 14px 0 0; background: #fff; color: var(--color-disabled); font-size: var(--fs-small); text-align: center; }
.ba__note { font-size: var(--fs-small); line-height: 1.55; color: var(--color-muted); margin: var(--space-3) 0 0; }
@media (max-width: 640px) { .ba { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Document strip: internal artefacts at thumbnail size. Deliberately too small to
   read, because the claim being made is that the discussion happened. */
.doc-strip { margin: var(--space-5) 0; }
.doc-strip__row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.doc-strip__cell { display: flex; flex-direction: column; gap: var(--space-2); flex: 0 1 172px; max-width: 190px; }
.doc-strip__label { font-size: var(--fs-label); color: var(--color-muted); }
@media (max-width: 640px) { .doc-strip__cell { flex: 1 1 calc(50% - var(--space-4)); max-width: none; } }
.doc-strip__item { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; cursor: zoom-in; overflow: hidden; }
.doc-strip__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; } /* one frame, so labels line up; the full artefact opens on click */
.doc-strip__item:hover { border-color: var(--case-accent, var(--color-primary)); }
.doc-strip__item:hover .figure__hint, .doc-strip__item:focus-visible .figure__hint { opacity: 1; }
.doc-strip__item .figure__hint { right: var(--space-2); bottom: var(--space-2); padding: 3px 8px; font-size: var(--fs-label); }
.doc-strip figcaption { color: var(--color-muted); font-size: var(--fs-small); line-height: 1.55; max-width: 68ch; margin-top: var(--space-3); }
@media (prefers-reduced-motion: no-preference) { .doc-strip__item { transition: border-color .2s ease; } }

/* Customer voice: complaint cards shaped as speech bubbles (square lower-left
   corner), replacing the screenshot version of the same board */

/* Journey pain-point matrix: stages across, customer and business rows down,
   the worst stage tinted as a continuous column. No outer frame. */
.jmatrix { display: grid; grid-template-columns: 104px repeat(var(--cols), 1fr); column-gap: var(--space-4); row-gap: 0; margin: var(--space-6) 0; }
.jmatrix__stage { padding: var(--space-3) var(--space-3); font-size: var(--fs-small); font-weight: 600; color: var(--color-ink); border-radius: 10px 10px 0 0; }
.jmatrix__stage.is-peak { color: var(--case-accent-ink, var(--color-primary-ink)); }
.jmatrix__corner--rule { border-bottom: 1px solid var(--color-border); }
.jmatrix__node { position: relative; height: 17px; border-bottom: 1px solid var(--color-border); }
.jmatrix__node::before { content: ""; position: absolute; left: var(--space-3); bottom: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-disabled); }
.jmatrix__node.is-peak::before { background: var(--case-accent, var(--color-primary)); box-shadow: 0 0 0 3px var(--case-accent-bg-1, #eee); }
.jmatrix__rowlabel { padding: var(--space-5) 0 var(--space-5); font-size: var(--fs-small); font-weight: 600; color: var(--color-ink); }
.jmatrix__rowlabel small { display: block; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-subtle); margin-top: 2px; }
.jmatrix__cell { padding: var(--space-5) var(--space-3); font-size: var(--fs-small); line-height: 1.5; color: var(--color-body); }
.jmatrix__cell.is-peak { background: var(--case-accent-bg-3, var(--color-surface)); color: var(--color-ink); }
.jmatrix__cell--last.is-peak { border-radius: 0 0 10px 10px; }
.jmatrix__stage.is-peak { background: var(--case-accent-bg-3, var(--color-surface)); }
.jmatrix__node.is-peak { background: var(--case-accent-bg-3, var(--color-surface)); }
/* A matrix cannot restack into one column without scrambling the reading order,
   so on narrow screens it scrolls inside its own container instead. */
.jmatrix-scroll { overflow-x: auto; margin: var(--space-6) 0; }
.jmatrix-scroll .jmatrix { margin: 0; min-width: 620px; }

/* Wait band: segment widths carry the real story, that one stretch is longest */
.waitband { margin: var(--space-5) 0; padding: var(--space-6) var(--space-5) var(--space-5); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.waitband__title { font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-subtle); margin: 0 0 var(--space-5); }
.waitband__track { display: flex; align-items: flex-start; gap: var(--space-3); }
.waitband__seg { min-width: 0; }
.waitband__bar { display: block; height: 10px; border-radius: 999px; background: var(--color-border); }
.waitband__seg.is-peak .waitband__bar { background: var(--case-accent, var(--color-primary)); }
.waitband__label { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--color-ink); margin-top: var(--space-3); line-height: 1.35; }
.waitband__seg.is-peak .waitband__label { color: var(--case-accent-ink, var(--color-primary-ink)); }
.waitband__note { display: block; font-size: var(--fs-label); color: var(--color-muted); margin-top: 2px; line-height: 1.45; }
.waitband__callout { font-size: var(--fs-label); color: var(--case-accent-ink, var(--color-primary-ink)); font-weight: 500; margin: var(--space-5) 0 0; }
@media (max-width: 620px) {
  /* Stacked, but the bar keeps its share of the track so the comparison holds */
  .waitband__track { flex-direction: column; gap: var(--space-4); }
  .waitband__seg { flex: none !important; width: 100%; }
  .waitband__bar { width: var(--pct, 100%); min-width: 26px; }
}

/* Outcome metrics with the proportion drawn, not just stated */
/* No card, no border, no tint: the outcome is numbers on the page. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-rows: repeat(3, auto); gap: var(--space-6); margin: var(--space-6) 0 var(--space-7); }
.stat-row__item { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
/* The three figures have to share a baseline, and a metric name that wraps to
   two lines would otherwise push its own number down. Subgrid lines the three
   rows up across every column; the min-height is the fallback for engines
   without it, which costs one blank line above a single-line metric. */
.stat-row__metric { min-height: 2.4em; }
@supports (grid-template-rows: subgrid) {
  .stat-row__item { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-2); }
  .stat-row__metric { min-height: 0; }
}
/* The divider hangs in the middle of the gap rather than on a column's own
   edge, so every column keeps its whole track for text and gets the same air
   either side of the line. Absolutely positioned, so it is not a grid item and
   the subgrid still sees exactly three rows. */
.stat-row__item + .stat-row__item::before { content: ""; position: absolute; left: calc(var(--space-6) / -2); top: 0; bottom: 0; width: 1px; background: var(--color-border); }
.stat-row dt.stat-row__metric { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.3px; text-transform: uppercase; color: var(--color-body); }
.stat-row dd.stat-row__value { display: flex; align-items: baseline; gap: 0.3em; margin: 0; font-size: var(--fs-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.05; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.stat-row__sign { font-size: 0.72em; color: var(--case-accent-ink, var(--color-primary-ink)); }
.stat-row__after { align-self: center; font-size: 0.62em; line-height: 1; }
.stat-row dd.stat-row__note { font-size: var(--fs-small); line-height: 1.5; color: var(--color-body); margin: 0; }
/* Plain: like the reference outcome, a green arrow and the figure on one line,
   a grey label under it. No metric heading, no dividers. */
.stat-row--plain { grid-template-rows: none; gap: var(--space-5); margin: var(--space-6) 0 var(--space-8); }
.stat-row--plain .stat-row__item { display: flex; grid-row: auto; gap: var(--space-1, 4px); }
.stat-row--plain .stat-row__item + .stat-row__item::before { display: none; }
.stat-row--plain dd.stat-row__value { font-size: var(--fs-headline); font-weight: 500; gap: .25em; }
.stat-row--plain .stat-row__sign { font-size: 1em; color: var(--delta-up); }
.stat-row--plain .stat-row__sign.is-flat { color: var(--color-quiet); }
.stat-row--plain dd.stat-row__note { font-size: var(--fs-small); color: var(--color-muted); }
.stat-row--sm { margin: var(--space-5) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
/* Inside the TL;DR card the columns are already narrow, so the gutter shrinks:
   a metric name that wraps would drag every column's rows down with it. */
.stat-row--sm { column-gap: var(--space-5); }
.stat-row--sm .stat-row__item + .stat-row__item::before { left: calc(var(--space-5) / -2); }
.stat-row--sm dd.stat-row__value { font-size: var(--fs-headline); font-weight: 600; }
.stat-row--sm dd.stat-row__note { font-size: var(--fs-small); }
@media (max-width: 700px) {
  .stat-row, .stat-row--sm { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
  .stat-row__item + .stat-row__item::before { display: none; }
  .stat-row__metric { min-height: 0; }
  @supports (grid-template-rows: subgrid) {
    .stat-row__item { display: flex; grid-row: auto; }
  }
  .stat-row__item + .stat-row__item { border-top: 1px solid var(--color-border); margin-top: var(--space-5); padding-top: var(--space-5); }
}
@media (max-width: 480px) { .stat-row dd.stat-row__value { font-size: var(--fs-display); } }

/* Flat app screenshots on a panel, for design-process artefacts. Panels carry
   real FWD colour rather than a pale wash, so each block reads as its own beat. */
/* One quiet neutral behind every panel (madhurima-style): the screens carry
   the colour, the panel just holds them */
/* Bottom-aligned: screens of different lengths then share a floor, which also
   lands their captions on one line. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--split-media, 280px)); gap: var(--space-8); align-items: center; margin: var(--space-6) 0 var(--space-5); }
.split__text > :first-child { margin-top: 0; }
.split__text h3 { margin-top: var(--space-6); }
.split__media { width: 100%; }
.split__media img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: var(--space-5); } .split__media { max-width: var(--split-media, 280px); margin-inline: auto; } }
.screen-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: var(--space-5); margin: var(--space-6) 0 var(--space-4); padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); background: #f3f1ec; }
.screen-row__item { flex: 0 1 205px; max-width: 225px; margin: 0; }
.screen-row__shot { position: relative; display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; font-family: var(--font-sans); border-radius: 14px; }
.screen-row__shot img { display: block; width: 100%; height: auto; border-radius: 14px; }
.screen-row__shot:hover .figure__hint, .screen-row__shot:focus-visible .figure__hint { opacity: 1; }
.screen-row figcaption { text-align: center; font-size: var(--fs-label); line-height: 1.45; color: var(--color-muted); margin-top: var(--space-3); }
.screen-row figcaption { color: var(--color-body); }
@media (max-width: 560px) { .screen-row { padding: var(--space-5) var(--space-4); gap: var(--space-4); } }

/* Equal-weight points as cards instead of a bullet list */
/* Six complaints -> three problems. Two gradient ribbons do the gathering and the
   pointing that a bracket plus a chevron used to do separately, and the problem
   lands in a card. Net: one fewer element in the row than before. */
.rollup { margin: var(--space-6) 0; }
.rollup__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rollup__head { display: grid; grid-template-columns: 1fr 1.08fr; column-gap: 0; align-items: end; }
.rollup__row { display: grid; grid-template-columns: 1fr 1.08fr; column-gap: 0; align-items: center; }
.rollup__head { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-muted); }
.rollup__head span:last-child { padding-left: var(--space-5); }
.rollup__list { list-style: none; margin: 0; padding: 0; }
.rollup__row { padding: var(--space-5) 0; }
.rollup__row + .rollup__row { border-top: 1px solid var(--color-border); }

/* The reserved strip on the right is the ribbons' runway; it butts the card so
   the band arrives at an edge instead of stopping in mid-air. */
.rollup__evidence { position: relative; padding-right: 116px; }
.rollup__flow { position: absolute; top: 50%; right: 0; width: 116px; height: 112px; transform: translateY(-50%); color: var(--flow-accent, var(--case-accent, var(--color-primary)));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 38%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 38%, #000 100%); }
/* Equal rows keep the ribbon mouths under the icons whatever the text wraps to */
.rollup ul.rollup__voices { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: var(--space-3); }
.rollup__voices li { display: grid; grid-template-columns: 34px 1fr; column-gap: var(--space-3); align-items: center; }
.rollup__icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--case-accent-bg-1, var(--color-primary-soft)); color: var(--case-accent-ink, var(--color-primary-ink)); }
.rollup__icon svg { width: 19px; height: 19px; }
.rollup__voice-text { font-size: var(--fs-small); line-height: 1.5; color: var(--color-body); }

/* Flat card, no shadow, no hover: it is a container, not a control. */
.rollup__problem { padding: var(--space-5); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.rollup__num { display: block; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.04em; color: var(--case-accent-ink, var(--color-primary-ink)); font-variant-numeric: tabular-nums; margin-bottom: var(--space-2); }
.rollup p.rollup__title { font-size: var(--fs-title); font-weight: 500; line-height: 1.35; color: var(--color-ink); margin: 0 0 var(--space-2); }
.rollup p.rollup__text { font-size: var(--fs-small); line-height: 1.6; color: var(--color-body); margin: 0; max-width: none; }

@media (max-width: 760px) {
  .rollup__head { display: none; }
  .rollup__row { grid-template-columns: 1fr; row-gap: var(--space-5); }
  /* Stacked, the ribbons have nowhere to travel, so one short vertical run of the
     same gradient carries the same handover. */
  .rollup__evidence { padding: 0 0 34px; }
  .rollup__flow { display: none; }
  .rollup__evidence::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 7px; height: 24px; margin-left: -3.5px; border-radius: 4px; background: linear-gradient(180deg, rgba(249,111,0,0.07), var(--flow-accent)); }
}

/* Constraint / response as one soft card: the constraint on the left, a chevron,
   what the design did on the right. The card is the page's own surface tint, so
   it groups without shouting; the chevron is the only connective. */
.constraint-set { margin: var(--block-gap) 0; display: grid; gap: var(--space-3); }
.constraint { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: start; padding: var(--space-6) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.constraint__chev { display: flex; align-items: center; justify-content: center; width: 40px; height: 100%; min-height: 2.5rem; color: var(--color-quiet); }
.constraint__chev svg { width: 22px; height: 22px; }
.constraint__given { padding-right: var(--space-4); }
.constraint__answer { padding-left: var(--space-4); }
.constraint__label { display: block; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: .3px; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-3); }
.constraint__answer .constraint__label { color: var(--case-accent-ink, var(--color-primary-ink)); }
.constraint p.constraint__title { font-size: var(--fs-title); font-weight: 500; line-height: 1.35; color: var(--color-ink); margin: 0 0 var(--space-3); }
.constraint p.constraint__text { font-size: var(--fs-small); line-height: 1.6; color: var(--color-body); margin: 0; max-width: none; }
.constraint b.num { font-weight: 600; color: var(--case-accent-ink, var(--color-primary-ink)); font-variant-numeric: tabular-nums; }
.constraint p.constraint__result { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--fs-small); line-height: 1.5; color: var(--color-muted); }
@media (max-width: 700px) {
  .constraint { grid-template-columns: 1fr; row-gap: var(--space-3); }
  .constraint__given, .constraint__answer { padding: 0; }
  /* Stacked, the chevron points down from the constraint to the answer */
  .constraint__chev { height: auto; min-height: 0; justify-content: flex-start; transform: rotate(90deg); transform-origin: center; width: 22px; }
}

/* One share of one whole. The bar is the only mark; nothing describes it in prose. */
.keystat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-3); margin: var(--space-5) 0 var(--block-gap); max-width: none; }
.keystat__value { font-size: var(--fs-display); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--case-accent-ink, var(--color-primary-ink)); font-variant-numeric: tabular-nums; }
.keystat__text { font-size: var(--fs-body); line-height: 1.6; color: var(--color-body); }
.fanout { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "l1 . l2" "one arrow many" "note note note"; gap: var(--space-2) var(--space-5); align-items: center; margin: var(--space-6) 0; padding: var(--space-6); border-radius: var(--radius-md); background: var(--case-accent-bg-3, var(--color-surface)); }
.fanout__label { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.fanout__label--one { grid-area: l1; }
.fanout__label--many { grid-area: l2; }
.fanout__one { grid-area: one; justify-self: start; padding: var(--space-3) var(--space-4); border-radius: 999px; font-size: var(--fs-small); font-weight: 500; color: #fff; background: var(--flow-accent, var(--case-accent, var(--color-primary))); white-space: nowrap; }
.fanout__arrow { grid-area: arrow; font-size: var(--fs-title); color: var(--color-muted); }
.fanout__many { grid-area: many; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.fanout__many span { padding: var(--space-3) var(--space-4); border-radius: 999px; font-size: var(--fs-small); color: var(--color-body); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }
.fanout__note { grid-area: note; margin-top: var(--space-3); font-size: var(--fs-small); line-height: 1.6; color: var(--color-muted); }
@media (max-width: 700px) {
  .fanout { grid-template-columns: 1fr; grid-template-areas: "l1" "one" "arrow" "l2" "many" "note"; gap: var(--space-2); }
  .fanout__arrow { transform: rotate(90deg); margin: var(--space-2) 0; }
  .fanout__label--many { margin-top: var(--space-4); }
}
.case-takeaway { position: relative; margin: var(--space-5) 0 var(--block-gap); font-size: var(--fs-title); font-weight: 500; line-height: 1.55; letter-spacing: -0.005em; color: var(--color-ink); text-wrap: pretty; }
/* Before / after with marked steps. The step count is set as text as well as
   drawn, because "three became one" is the whole argument. */
.stepcmp { margin: var(--space-6) 0; display: grid; gap: var(--space-6); }
.stepcmp__side { margin: 0; }
.stepcmp__head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.stepcmp__label { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-muted); }
.stepcmp__side--after .stepcmp__label { color: var(--case-accent-ink, var(--color-primary-ink)); }
.stepcmp__count { font-size: var(--fs-label); color: var(--color-subtle); }
.stepcmp__panel { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: flex-start; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.stepcmp__side--after .stepcmp__panel { background: var(--case-accent-bg-2, var(--color-surface)); border-color: var(--case-accent-bg-1, var(--color-border)); }
.stepcmp__step { flex: 1 1 0; min-width: 0; max-width: 215px; display: flex; flex-direction: column; align-items: center; }
/* Pill then a hairline dropping into the screen: the tag points at its own step */
.stepcmp__tag { padding: 3px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: #fff; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
/* A step that is data entry is what the redesign was aimed at, so it is marked */
.stepcmp__tag--typing { border-color: var(--case-accent-bg-1, var(--color-border)); background: var(--case-accent-bg-2, #fff); color: var(--case-accent-ink, var(--color-primary-ink)); }
.stepcmp__stem { width: 1px; height: 18px; background: var(--color-border); }
/* One aspect for every step so the captions share a baseline. 780x1688 is the
   native shape of most of these exports, so only the long review page crops,
   and it crops from the bottom where the boilerplate lives. */
.stepcmp__step img { display: block; width: 100%; height: auto; aspect-ratio: 780 / 1688; object-fit: cover; object-position: top; border-radius: 12px; }
.stepcmp__what { margin-top: var(--space-3); font-size: var(--fs-label); line-height: 1.45; color: var(--color-body); text-align: center; }
.stepcmp p.stepcmp__note { margin: var(--space-3) 0 0; font-size: var(--fs-small); line-height: 1.6; color: var(--color-body); max-width: none; }
@media (max-width: 560px) {
  .stepcmp__panel { padding: var(--space-4); gap: var(--space-4); }
  .stepcmp__step { flex: 0 1 140px; max-width: 160px; }
}


.insight-cards { counter-reset: finding; list-style: none; margin: var(--space-5) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); }
.insight-cards .finding__title { font-size: var(--fs-body); }
.finding { position: relative; padding: var(--space-5); background: #fff; border: 1px solid var(--color-border); border-radius: 14px; counter-increment: finding; }
.finding::before { content: counter(finding, decimal-leading-zero); display: block; margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .4px; color: #c45500; }
.finding__crop { display: block; margin: 0 calc(-1 * var(--space-5)) var(--space-4); padding: 0 var(--space-5) var(--space-4); border-bottom: 1px solid var(--color-border); }
.finding__crop img { display: block; max-width: min(100%, 360px, var(--crop-w, 360px)); max-height: 200px; width: auto; height: auto; } /* never wider than the crop's own 2x pixels, so it stays sharp */
.finding__title { display: block; font-size: var(--fs-body); font-weight: 500; line-height: 1.5; color: var(--color-ink); margin-bottom: var(--space-1); }
.finding__text { display: block; font-size: var(--fs-small); line-height: 1.4; color: var(--color-body); }
.finding__chip { display: inline-block; margin-top: var(--space-3); padding: 3px 11px; border-radius: 999px; background: var(--case-accent-bg-2, var(--color-primary-soft)); color: var(--case-accent-ink, var(--color-primary-ink)); font-size: var(--fs-label); font-weight: 500; }
@media (max-width: 700px) {
  .bscreen { grid-template-columns: 1fr; gap: var(--space-5); }
  .bscreen__device { position: static; max-width: 232px; margin-inline: auto; }
}

/* Problem data — emoji stat cards with proportion bars */
.stat-emojis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
@media (max-width: 560px) { .stat-emojis { grid-template-columns: 1fr; } }
.stat-emoji { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.stat-emoji__face { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-surface); font-size: var(--fs-display); line-height: 1; }
.stat-emoji__num { display: block; font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink); line-height: 1.1; }
.stat-emoji__label { display: block; font-size: var(--fs-small); color: var(--color-muted); margin: 2px 0 var(--space-3); line-height: 1.5; }
.stat-emoji__bar { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--color-surface); overflow: hidden; }
.stat-emoji__bar span { display: block; height: 100%; border-radius: 999px; background: var(--color-primary); min-width: 4px; }
.stat-emoji__bar span.is-bad { background: #c2542f; }
.stat-emoji > div { flex: 1; min-width: 0; }

/* Drop-off: the ratios here are too extreme for honest bars (1 : 0.013 : 0.0004),
   so the numbers carry the scale and the deltas sit between the steps. */
.dropoff { margin: var(--space-5) 0; padding: var(--space-6); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.dropoff__title { font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-subtle); margin: 0 0 var(--space-5); }
.dropoff__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.dropoff__step { position: relative; }
.dropoff__step + .dropoff__step { padding-left: var(--space-6); border-left: 1px solid var(--color-border); }
.dropoff__num { display: block; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.05; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.dropoff__label { display: block; font-size: var(--fs-small); line-height: 1.5; color: var(--color-body); margin-top: var(--space-2); }
.dropoff__note { display: block; font-size: var(--fs-label); color: var(--color-muted); margin-top: 2px; }
.dropoff__delta { position: absolute; top: -2px; left: var(--space-6); font-size: var(--fs-label); font-weight: 600; color: var(--case-accent-ink, var(--color-primary-ink)); font-variant-numeric: tabular-nums; }
.dropoff__step .dropoff__delta + .dropoff__num { margin-top: var(--space-5); }
.dropoff__step:first-child .dropoff__num { margin-top: var(--space-5); }
@media (max-width: 640px) {
  .dropoff { padding: var(--space-5); }
  .dropoff__steps { grid-template-columns: 1fr; gap: var(--space-4); }
  .dropoff__step + .dropoff__step { padding-left: 0; padding-top: var(--space-4); border-left: none; border-top: 1px solid var(--color-border); }
  .dropoff__delta { position: static; display: block; margin-bottom: var(--space-1); }
  .dropoff__step .dropoff__delta + .dropoff__num, .dropoff__step:first-child .dropoff__num { margin-top: 0; }
}

/* Key flows — tinted media card + flow title/description side by side */
/* Pause control for autoplaying loops (WCAG 2.2.2). Quiet but always present:
   a mechanism nobody can find is not a mechanism. */
.case-media { position: relative; }
.media-toggle { position: absolute; right: var(--space-4); bottom: var(--space-4); z-index: 4; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(20,32,31,0.12); border-radius: 50%; background: rgba(255,255,255,0.86); color: var(--color-ink); cursor: pointer; }
.media-toggle:hover { background: #fff; }
.media-toggle svg { width: 18px; height: 18px; }
.media-toggle .media-toggle__pause { display: none; }
.media-toggle.is-playing .media-toggle__play { display: none; }
.media-toggle.is-playing .media-toggle__pause { display: block; }
@media (prefers-reduced-motion: no-preference) { .media-toggle { transition: background-color .2s ease; } }
@media (pointer: coarse) { .media-toggle { width: 44px; height: 44px; } }

.key-flow { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-6); align-items: center; margin: var(--space-6) 0; }
.key-flow + .key-flow { margin-top: var(--space-7); }
/* Panel is tall enough to show the whole device, not a cropped half */
.key-flow .flow-media { aspect-ratio: 1 / 1.34; padding: 4% 0; align-items: center; }
.cc-phone--flow { width: 60%; min-width: 0; max-width: 300px; }
.key-flow__title { font-size: var(--fs-title); font-weight: 500; line-height: 1.35; color: var(--color-ink); margin: 0 0 var(--space-2); }
.key-flow__text p { margin: 0; }
@media (max-width: 700px) { .key-flow { grid-template-columns: 1fr; } }

/* Goals — paired user / business goal cards */
.goal-cards { display: grid; gap: var(--space-3); margin: var(--block-gap) 0 0; }
.goal-card { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.goal-card__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 4px 12px rgba(20,32,31,0.08); }
.goal-card__icon svg { width: 30px; height: 30px; }
.goal-card__icon--user { background: linear-gradient(150deg, #e8f2f1, #bcd9d5); color: var(--color-primary-ink); }
.goal-card__icon--biz { background: linear-gradient(150deg, #fbe4c9, #f0bd8b); color: #7c3f0c; }
/* Hand-drawn illustration variant: no tile, the artwork carries the meaning */
.goal-card__art { flex: none; width: 116px; height: 116px; }
.goal-card__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 560px) {
  .goal-card { align-items: flex-start; gap: var(--space-4); }
  .goal-card__art { width: 76px; height: 76px; }
}
.goal-card__title { display: block; font-size: var(--fs-title); font-weight: 500; color: var(--color-ink); line-height: 1.4; margin-bottom: var(--space-2); }
.goal-card__label { display: block; font-size: var(--fs-small); color: var(--color-muted); }
/* Goal cards are not interactive, so they get no hover response. */

/* Before/after stat bars (lightweight data viz) */
.stat-bars { margin: var(--space-5) 0; padding: var(--space-5); border-radius: var(--radius-md); background: var(--case-accent-bg-3, var(--color-surface)); }
.stat-bars__title { font-size: var(--fs-small); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 var(--space-4); }
.stat-bar { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.stat-bar:last-child { margin-bottom: 0; }
.stat-bar__label { font-size: var(--fs-small); color: var(--color-muted); }
.stat-bar__track { height: 12px; background: var(--color-border); border-radius: 999px; overflow: hidden; }
.stat-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--case-accent, var(--color-primary)); }
.stat-bar__fill--muted { background: var(--color-disabled); }
.stat-bar__val { font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }

/* Pull quote */
/* Quote block: tinted panel with a display-serif quote mark, no side stripe */
.pull-quote { position: relative; margin: var(--space-6) 0; padding: var(--space-6) var(--space-6) var(--space-5); border-radius: var(--radius-md); background: var(--case-accent-bg-3, var(--color-surface)); }
.pull-quote::before { content: "\201C"; position: absolute; top: 6px; left: var(--space-5); font-family: var(--font-display); font-weight: 600; font-size: 3.5rem; line-height: 1; color: var(--case-accent, var(--color-primary)); opacity: 0.35; }
.pull-quote p { position: relative; font-family: var(--font-display); font-size: var(--fs-headline); font-weight: 600; line-height: 1.4; color: var(--color-ink); margin: 0; text-wrap: balance; }
.pull-quote cite { display: block; font-size: var(--fs-small); color: var(--color-muted); font-style: normal; margin-top: var(--space-3); }

/* Next project */
.next-project-legacy { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-8); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.next-project span { color: var(--color-muted); font-size: var(--fs-small); }
.next-project strong { font-family: var(--font-display); font-weight: 600; color: var(--case-accent-ink, var(--color-primary-ink)); font-size: var(--fs-h3); }

/* About page — container edge matches the homepage; text keeps a 720px measure */
.about .bio, .about .about-section { max-width: none; } /* full content width */
.about-eyebrow { color: var(--color-primary-ink); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--fs-small); margin-bottom: var(--space-3); }
.bio { padding-top: var(--space-8); }
.bio h1 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); margin-bottom: var(--space-4); }
.bio__lede { font-size: var(--fs-body); line-height: 1.6; color: var(--color-ink); margin-bottom: var(--space-4); }
.bio__body { font-size: var(--fs-small); line-height: 1.65; color: var(--color-body); margin-bottom: var(--space-4); }
.bio__contact { font-size: var(--fs-small); color: var(--color-body); }
/* Bio with Tom's photo: text left, photo right from 860px; photo on top below.
   Hover: the frame lifts a touch and the photo eases in slightly. */
.about .bio { max-width: none; display: grid; gap: var(--space-6); align-items: center; }
.bio__photo { margin: 0; width: min(100%, 340px); border-radius: 24px; overflow: hidden; background: var(--color-surface);
  box-shadow: 0 1px 2px rgb(20 20 20 / .04), 0 12px 32px -18px rgb(40 25 10 / .22);
  transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s cubic-bezier(.22,1,.36,1); }
.bio__photo img { display: block; width: 100%; height: auto; transition: transform .9s cubic-bezier(.22,1,.36,1), filter .6s ease; }
.bio__photo:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgb(20 20 20 / .04), 0 24px 48px -22px rgb(40 25 10 / .3); }
.bio__photo:hover img { transform: scale(1.035); filter: saturate(1.06); }
@media (min-width: 860px) {
  .about .bio { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-8); }
  .bio__photo { order: 2; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .bio__photo, .bio__photo img { transition: none; }
  .bio__photo:hover, .bio__photo:hover img { transform: none; }
}
.about-section { padding-block: var(--space-7) 0; }
.about-label { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary-ink); margin-bottom: var(--space-5); }

/* Things I like — horizontal media strips (playlists / movies) */
.media-label { font-size: var(--fs-small); font-weight: 400; color: var(--color-muted); margin: var(--space-6) 0 var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.media-row { display: flex; gap: var(--space-5); overflow-x: auto; padding-bottom: var(--space-3); scroll-snap-type: x mandatory; scrollbar-width: thin; }
.media-card { flex: 0 0 232px; display: flex; flex-direction: column; gap: 2px; scroll-snap-align: start; color: inherit; }
.media-card:hover { text-decoration: none; }
.media-card__thumb { width: 232px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-md); display: block; margin-bottom: var(--space-2); }
.media-card__thumb--album { width: 100%; height: auto; aspect-ratio: 1 / 1; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.media-card__thumb--tone { background: var(--color-surface); border: 1px dashed var(--color-border); }
.media-tone--a { background: linear-gradient(160deg, #14313d, #337079); border: none; }
.media-tone--b { background: linear-gradient(160deg, #2a3a33, #55806b); border: none; }
.media-tone--c { background: linear-gradient(160deg, #0d0d0d, #3d4a52); border: none; }
.media-tone--d { background: linear-gradient(160deg, #1f1f22, #5c5c66); border: none; }
.media-tone--e { background: linear-gradient(160deg, #7c4a52, #c98d8f); border: none; }
.media-tone--f { background: linear-gradient(160deg, #23364d, #45909c); border: none; }
.media-card__title { font-size: var(--fs-small); font-weight: 500; color: var(--color-ink); line-height: 1.35; }
.media-card__sub { font-size: var(--fs-small); color: var(--color-muted); }
@media (prefers-reduced-motion: no-preference) {
  .media-card__thumb { transition: transform .3s ease, box-shadow .3s ease; }
  a.media-card:hover .media-card__thumb { transform: translateY(-3px); box-shadow: var(--shadow-1); }
}

/* Reading list */
.book-list { list-style: none; margin: 0; padding: 0; }
.book-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.book-item:last-child { border-bottom: none; }
.book-item__title { font-size: var(--fs-small); font-weight: 500; color: var(--color-ink); }
.book-item__author { font-size: var(--fs-small); color: var(--color-muted); white-space: nowrap; }
@media (max-width: 560px) { .book-item { flex-direction: column; gap: 2px; } .book-item__author { white-space: normal; } }

.about-close { padding-bottom: var(--space-6); }
.about-close__line { font-size: var(--fs-body); color: var(--color-ink); font-weight: 500; margin-bottom: var(--space-5); }

/* Scroll reveal + reduced-motion guard */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal], .case-section, .project-card, .figure, .flow-media-wrap, .bscreen { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
  [data-reveal].is-revealed, .case-section.is-revealed, .project-card.is-revealed, .figure.is-revealed, .flow-media-wrap.is-revealed, .bscreen.is-revealed { opacity: 1; transform: none; }
}

/* --- Canvas hero (experimental variant) ---------------------------------- */
.hc { position: relative; isolation: isolate; padding: var(--space-9) 0; overflow: hidden; }
/* Figma canvas dots (from /v2/), 24px pitch, faded by a radial mask so the grid
   is felt around the headline and gone by the edges. */
.hc__grid { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 1px 1px, #cfcfcf 1px, transparent 1.4px); background-size: 24px 24px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000 0%, rgb(0 0 0 / .5) 45%, transparent 78%); mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000 0%, rgb(0 0 0 / .5) 45%, transparent 78%); }
.hc__stage { position: relative; max-width: 860px; margin-inline: auto; padding: var(--space-8) var(--space-4) 10rem; text-align: center; }
/* 11.5rem floor: the avatar rides the stage bottom (-6%), and the measured
   clearance for it to sit fully below the payoff line is ~176px of padding. */
/* Hero option F (Tom, 2026-10-30): DM Sans like every other heading on the site.
   Setup line in solid ink; the payoff carries a teal gradient that stays dark
   end to end (each stop >= 4:1 on the page), so it reads as one calm colour
   turning slightly blue rather than a light/dark sweep. The inner shadow is
   Tom's Figma value (y 4, blur 4, black 10%), drawn by an SVG filter. */
.hc__headline { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--color-ink); margin: 0; text-wrap: balance; }
.hc__line { display: block; }
.hc__set,
.hc__pay { display: block; }
.hc__set { font-size: clamp(2rem, 4.6vw, 3.3rem); color: #333131; margin-bottom: 0.18em; }
.hc__sub > span { display: block; }
.hc__sub { max-width: 44ch; margin: 3.75rem auto 0; /* clears the Tom cursor that hangs below the selection */ font-size: var(--fs-body); line-height: 1.55; color: var(--color-muted); text-align: center; text-wrap: balance; }
.hc__pay { width: fit-content; margin-inline: auto; font-size: clamp(2.6rem, 6.4vw, 4.6rem); color: transparent; background-image: linear-gradient(100deg, #2a6560 0%, #3f8a84 50%, #4d82b5 100%); -webkit-background-clip: text; background-clip: text; filter: url(#hcInnerShadow); }
.hc .btn { margin-top: var(--space-5); }

/* selected-word treatment (design-tool style, in brand teal) */
/* No fill behind the selected word: it would sit on top of the gradient text */
.hc-select { position: relative; display: inline-block; padding: 0 .08em; }
/* WebKit (every iPhone browser) does not paint a parent's background-clip:text into an
   inline-block child, so the word carries its own slice of the gradient (Tom, 2026-11-04). */
.hc-select { background-image: linear-gradient(100deg, #3f8a84 0%, #4d82b5 100%); -webkit-background-clip: text; background-clip: text; }
/* The box is a pseudo-element border so the entrance can draw it */
.hc-select::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--color-primary); border-radius: 2px; pointer-events: none; }
.hc-h { position: absolute; z-index: 1; width: 9px; height: 9px; background: #fff; border: 2px solid var(--color-primary); border-radius: 2px; }
.hc-h--tl { top: -5px; left: -5px; } .hc-h--tr { top: -5px; right: -5px; }
.hc-h--bl { bottom: -5px; left: -5px; } .hc-h--br { bottom: -5px; right: -5px; }
.hc-cursor { position: absolute; right: -54px; bottom: -40px; display: flex; align-items: flex-start; gap: 3px; }
/* The payoff fills a phone screen, so the cursor tucks under the word instead of off the edge */
@media (max-width: 560px) { .hc-cursor { right: -6px; bottom: -48px; } }
.hc-cursor svg { width: 32px; height: 32px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
.hc-cursor__tag { background: var(--color-primary); color: #fff; font-family: var(--font-sans); text-transform: none; letter-spacing: normal; font-size: 16px; font-weight: 600; padding: 4px 12px; border-radius: 999px; transform: translateY(10px); white-space: nowrap; }

/* floaters */
.hc-float { position: absolute; z-index: 1; }
/* ⌘ + T stacked like a key combo */
.hc-keys { top: 2%; left: 3%; width: 104px; height: 104px; }
.hc-key { position: absolute; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 16px; box-shadow: var(--shadow-1); transition: transform .25s ease; }
.hc-key--cmd { top: 0; right: 0; z-index: 2; font-size: 26px; color: #fff; background: var(--color-ink); transform: rotate(8deg); }
.hc-key--letter { bottom: 0; left: 0; z-index: 1; font-size: 24px; font-weight: 600; color: var(--color-ink); background: #fff; border: 1px solid var(--color-border); transform: rotate(-7deg); }
.hc-key { transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1); }
/* Hover: the combo spreads apart — ⌘ flies up-right, T slides down-left */
.hc-keys:hover .hc-key--cmd { transform: rotate(12deg) scale(1.06) translate(10px, -12px); }
.hc-keys:hover .hc-key--letter { transform: rotate(-12deg) scale(1.06) translate(-10px, 12px); }
.hc-star { width: 30px; height: 30px; }
.hc-star--1 { top: 5%; right: 24%; transform: rotate(8deg); }
.hc-star--2 { bottom: 18%; left: 30%; transform: rotate(-10deg); }
.hc-float--avatar { bottom: 4%; left: 2%; width: 172px; transform: rotate(-6deg); transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1); }
.hc-float--avatar img { width: 100%; height: auto; display: block;
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(2px 2px 0 #fff) drop-shadow(-2px 2px 0 #fff)
    drop-shadow(2px -2px 0 #fff) drop-shadow(-2px -2px 0 #fff)
    drop-shadow(0 10px 14px rgba(20, 32, 31, 0.2)); }
.hc-float--avatar:hover { transform: rotate(4deg) scale(1.14) translateY(-12px); }
/* Dachshund hero (preview): the original canvas hero, plus Tom's own
   dachshund illustration below it. Scrolling makes it walk: hero-dog.js
   turns scroll into --walk (radians of stride) and the four cut-out legs
   swing off sin(--walk) from their joints. The tail wags on its own. */
.hc--dog .hc__stage { padding-bottom: var(--space-6); }
.hc--dog .hc-star--2 { bottom: auto; top: 46%; left: -3%; }
.hc-scene { position: relative; display: flex; justify-content: center; max-width: var(--content-max); margin: var(--space-5) auto var(--space-7); padding: 0 var(--space-4) 46px; }
.dog { --walk: 0; --dog-s: 0; --dog-k: 1; width: 100%; display: flex; justify-content: center; }
/* Stretch: the slice scales wide from its left edge, the rear slides right */
.dog__slice { transform: translateX(420px) scaleX(var(--dog-k)) translateX(-420px); }
.dog__rearG { transform: translateX(calc(var(--dog-s) * 1px)); }
/* Figma-style ruler under the dog: its live width, then the punchline */
.hc-scene__measure { position: absolute; bottom: 0; left: var(--measure-x, 50%); width: var(--measure-w, 260px); height: 26px; border-inline: 1.5px solid var(--color-primary); display: grid; place-items: center; }
.hc-scene__measure::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--color-primary); }
.hc-scene__measure b { position: relative; padding: 3px 10px; border-radius: 5px; background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dog svg { display: block; width: 440px; max-width: 100%; height: auto; overflow: visible; }
.dog use, .dog__rearG { transform-box: view-box; }
/* Legs rest still; while scrolling they trot (see the motion block below) and ease back when it stops */
.dog__leg { transition: transform .35s ease; }
.dog__tail { transform-origin: 605px 252px; }
/* Figma multiplayer cursor: Tom's face rides in the name tag */
.hc--dog .hc-cursor__tag { display: inline-flex; align-items: center; gap: 6px; padding-left: 4px; }
.hc-cursor__tag img { display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; object-fit: cover; }
.dog__dust { opacity: 0; transition: opacity .3s ease; }
.dog.is-moving .dog__dust { opacity: 1; }
.hc-float--toolbar { top: 6%; right: 1%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 14px; color: #fff; background: var(--color-ink); border-radius: 18px; box-shadow: var(--shadow-1); transform: rotate(3deg); transition: transform .25s ease; }
.hc-float--toolbar:hover { transform: rotate(0deg) scale(1.05); }
.hc-float--toolbar svg { width: 22px; height: 22px; display: block; }

@media (prefers-reduced-motion: no-preference) {
  .hc-keys, .hc-float--avatar { animation: hcFloat 5s ease-in-out infinite; }
  .hc-float--toolbar { animation: hcFloat 5.6s ease-in-out infinite .8s; }
  .dog__tail { animation: hcWag 2.4s ease-in-out infinite; }
  .dog.is-moving .dog__leg--f1, .dog.is-moving .dog__leg--b2 { animation: dogTrot .5s ease-in-out infinite; }
  .dog.is-moving .dog__leg--f2, .dog.is-moving .dog__leg--b1 { animation: dogTrot .5s ease-in-out infinite -.25s; }
  .dog.is-moving svg { animation: dogBob .25s ease-in-out infinite alternate; }
  @keyframes dogTrot { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
  @keyframes dogBob { to { translate: 0 -2px; } }
  .dog:hover .dog__tail, .dog.is-moving .dog__tail, .dog.is-long .dog__tail { animation-duration: .5s; }
  @keyframes hcWag { 0%, 60%, 100% { transform: rotate(0); } 70%, 90% { transform: rotate(-9deg); } 80% { transform: rotate(7deg); } }
  @keyframes hcFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
}

/* Hero entrance (from /v2/, Tom 2026-11-02): the lines rise out of a mask, the
   selection draws itself round "value.", the handles pop, and Tom's cursor
   glides in to hold it, then idles. The dot grid and the dog fade up.
   Reduced motion and no animation show the finished frame. */
@media (prefers-reduced-motion: no-preference) {
  .hc__line { overflow: clip; overflow-clip-margin: 60px; }
  .hc__set, .hc__pay { animation: hcRise 1s cubic-bezier(.16,1,.3,1) both; }
  .hc__pay { animation-delay: .12s; }
  @keyframes hcRise { from { transform: translateY(105%); } }
  .hc-select::before { animation: hcDraw .7s cubic-bezier(.65,0,.35,1) .75s both; }
  @keyframes hcDraw { from { clip-path: inset(0 100% 100% 0); opacity: 0; } 1% { opacity: 1; } to { clip-path: inset(0 0 0 0); } }
  .hc-h { animation: hcPop .35s cubic-bezier(.16,1,.3,1) both; }
  .hc-h--tl { animation-delay: .8s; } .hc-h--tr { animation-delay: 1s; }
  .hc-h--br { animation-delay: 1.15s; } .hc-h--bl { animation-delay: 1.3s; }
  @keyframes hcPop { from { transform: scale(0); opacity: 0; } }
  .hc-cursor { animation: hcArrive 1.1s cubic-bezier(.16,1,.3,1) 1.1s both, hcIdle 4s ease-in-out 2.4s infinite; }
  @keyframes hcArrive { from { opacity: 0; transform: translate(90px, 70px); } }
  @keyframes hcIdle { 50% { transform: translate(5px, -5px); } }
  .hc-scene { animation: hcFade 1s ease-out 1.2s both; }
  .hc__grid { animation: hcGrid 1.6s ease-out both; }
  @keyframes hcFade { from { opacity: 0; transform: translateY(10px); } }
  @keyframes hcGrid { from { opacity: 0; } }
}

@media (max-width: 860px) {
  .hc-float { display: none; }
  .hc__stage { padding-top: var(--space-6); }
}

/* --- AI Lab -------------------------------------------------------------- */
.ailab-intro { padding-top: var(--space-8); }
.ailab-intro > * { max-width: 720px; } /* measure on the text, so the block keeps the grid's left edge */
.ailab-eyebrow { display: block; color: var(--color-primary-ink); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--fs-small); margin-bottom: var(--space-3); }
.ailab-intro h1 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); margin-bottom: var(--space-4); }
.ailab-intro__lede { font-size: var(--fs-body); line-height: 1.6; color: var(--color-body); }
.ailab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 720px) { .ailab-grid { grid-template-columns: 1fr; } }
.ailab-card { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0 var(--space-6) var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
/* AI Lab card cover (Tom's reference, 2026-11-03): bleeds to the card's top edge. */
.ailab-cover { position: relative; margin: 0 calc(-1 * var(--space-6)) var(--space-5); aspect-ratio: 16 / 9; overflow: hidden; background: #ec8a70; }
.ailab-cover { container-type: inline-size; }
.ailab-cover__forms { position: absolute; inset: 0; width: 100%; height: 100%; }
.ailab-cover__word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 7.6cqw; font-weight: 600; letter-spacing: -0.01em; color: #fff; white-space: nowrap; }
.ailab-cover__spark { position: absolute; right: 5%; bottom: 7%; width: 7%; height: auto; }
/* The form breathes, slowly, like the reference's soft light. */
@media (prefers-reduced-motion: no-preference) {
  .ailab-cover__drift { transform-origin: 55% 60%; animation: labDrift 12s ease-in-out infinite alternate; }
}
@keyframes labDrift { from { transform: translate(-4px, -3px) rotate(-1deg); } to { transform: translate(5px, 4px) rotate(1deg) scale(1.02); } }
/* Card rhythm (impeccable layout, Tom 2026-11-03): meta hugs the title (8), the title
   leads its description (12), the footer stands apart (24). One link, stretched over the
   whole card; the tools read as plain text, not pills. */
.ailab-card__meta { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-muted); margin: 0 0 var(--space-2); }
.ailab-card__title { margin: 0 0 var(--space-3); font-size: var(--fs-title); font-weight: 500; line-height: 1.35; }
.ailab-card__desc { color: var(--color-body); margin: 0; }
.ailab-card__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); }
.ailab-card__tools { margin: 0; font-size: var(--fs-small); color: var(--color-muted); }
.ailab-card__link { color: var(--color-primary-ink); font-weight: 500; white-space: nowrap; }
.ailab-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ailab-card__link:hover { text-decoration: none; }
.ailab-card__link span { display: inline-block; transition: transform .3s ease; }
.ailab-card:hover .ailab-card__link span { transform: translateX(3px); }
.ailab-card:focus-within { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.ailab-card__link:focus-visible { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .ailab-card { transition: transform .3s ease, box-shadow .3s ease; }
  .ailab-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
}

/* Scroll story — text scrolls, the screen stays put (see scrollStory macro).
   Default (no JS / narrow): each shot follows its text in one column. */
.story { display: grid; gap: var(--space-5); margin-block: var(--block-gap); }
.story__count { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--color-quiet); }
.story__text h3 { margin-top: var(--space-1); }
.story__shot { margin: 0; display: grid; place-items: center; }
.story__shot img { width: auto; max-width: 100%; max-height: 520px; border-radius: 18px; box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .06); }
@media (min-width: 900px) {
  .story.is-live { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); column-gap: var(--space-6); row-gap: 0; }
  .story.is-live .story__text { grid-column: 1; grid-row: var(--row); min-height: 70vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; }
  .story.is-live .story__text.is-active { opacity: 1; }
  /* every shot shares one sticky cell; only the active one is visible */
  /* Sticky shot clears the floating nav (~100px) and uses the viewport's height,
     so a tall phone screen is as large as the window allows */
  .story.is-live .story__shot { grid-column: 2; grid-row: 1 / span var(--story-n); align-self: start; position: sticky; top: 112px; height: min(760px, calc(100vh - 136px)); padding: 0; opacity: 0; visibility: hidden; }
  .story.is-live .story__shot img { max-height: min(760px, calc(100vh - 136px)); }
  .story.is-live .story__shot.is-active { opacity: 1; visibility: visible; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .story.is-live .story__text { transition: opacity .3s ease; }
  .story.is-live .story__shot { transition: opacity .35s ease, visibility .35s; }
}

/* Scrubbed statement (twain.ai): one key paragraph per case, set a size up,
   words darken in reading order; the punchline gets a highlighter sweep. */
.case-section p.scrub { font-size: var(--fs-title); line-height: 1.6; color: var(--color-ink); margin-top: var(--space-5); } /* p.scrub: outranks .case-section p */
.hl { background: linear-gradient(transparent 58%, var(--case-accent-bg-1, var(--color-primary-soft)) 58%) no-repeat 0 0 / 100% 100%; color: inherit; padding: 0 .1em; }
@media (prefers-reduced-motion: no-preference) {
  .scrub.is-live .scrub__w { color: #c9c6bf; transition: color .25s ease; }
  .scrub.is-live .scrub__w.is-on { color: var(--color-ink); }
  .scrub.is-live .hl { background-size: 0% 100%; transition: background-size .6s cubic-bezier(.22,1,.36,1); }
  .scrub.is-live .hl.is-on { background-size: 100% 100%; }

  /* Headings settle out of a soft blur as their section arrives */
  .case-section > h2 { filter: blur(6px); opacity: 0; transition: filter .7s ease .1s, opacity .7s ease .1s; }
  .case-section.is-revealed > h2 { filter: none; opacity: 1; }

  /* Scroll story: the incoming screen eases in from a slight blur and scale */
  .story.is-live .story__shot img { transform: scale(.96); filter: blur(4px); transition: transform .5s cubic-bezier(.22,1,.36,1), filter .4s ease; }
  .story.is-live .story__shot.is-active img { transform: none; filter: none; }

  /* Outcome's one authored moment: Before is already there; After wipes in from
     its left edge a beat later, and the green figure climbs from the old value
     (number-count.js, data-count-from). Markup ships the final state, so no-JS
     and reduced motion simply show the result. */
  .result-row__shot.is-after img { clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.16, 1, .3, 1) .25s; }
  .case-section.is-revealed .result-row__shot.is-after img { clip-path: inset(0 0 0 0); }
}

/* ===== Auto-Fill scroll blocks ===== */
/* Case cover reusing the homepage's bespoke cover */
.case-cover--bespoke { border-radius: 28px; }
.case-cover--bespoke .bc { aspect-ratio: 16 / 10; }

/* Link pop: a tall track, a sticky stage, the field in the middle and five
   chips that fly out of it to their spots as the reader scrolls */
.linkpop { margin: var(--block-gap) 0; }
.linkpop__stage { position: relative; display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-4) 0; container-type: inline-size; }
.linkpop__field { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 12px 18px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 10px 24px -12px rgb(30 20 10 / .25); font-size: var(--fs-small); color: var(--color-ink); }
.linkpop__field svg { width: 18px; height: 18px; flex: none; color: var(--color-muted); }
.linkpop__field b { font-weight: 600; white-space: nowrap; }
.linkpop__url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-muted); }
.linkpop__tick { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #f56a00 center / 60% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transform: scale(0); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.linkpop__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* Glass chips (Apple-style): translucent white over a faint warm glow behind
   the field, blurred, with a bright top edge and a soft shadow, no border colour */
.linkpop__stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(520px, 80%); height: 200px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 190 140 / .35), transparent); filter: blur(20px); pointer-events: none; }
.linkpop__chip { position: relative; padding: 8px 15px; border-radius: 999px; font-weight: 600; font-size: var(--fs-small); white-space: nowrap; color: var(--color-ink);
  background: rgb(255 255 255 / .5); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgb(255 255 255 / .75); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 1px 2px rgb(0 0 0 / .04), 0 8px 20px -10px rgb(30 20 10 / .28); }
.linkpop-after { margin-top: var(--space-2); }
.linkpop.is-done .linkpop__tick, .linkpop:not(.is-live) .linkpop__tick { transform: scale(1); }
@media (min-width: 640px) {
  .linkpop.is-live { height: 95vh; }
  .linkpop.is-live .linkpop__stage { position: sticky; top: calc(50vh - 120px); height: 240px; display: block; padding: 0; }
  .linkpop.is-live .linkpop__field { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
  .linkpop.is-live .linkpop__chip { position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: 0; transform: scale(.3); }
  .linkpop.is-live .linkpop__chip.is-out { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
  .linkpop__chip:nth-child(1) { --x: -24cqw; --y: -70px;  --r: -6deg; }
  .linkpop__chip:nth-child(2) { --x: 24cqw;  --y: -66px;  --r: 5deg; }
  .linkpop__chip:nth-child(3) { --x: -30cqw; --y: 62px;   --r: 4deg; }
  .linkpop__chip:nth-child(4) { --x: 0cqw;   --y: 82px;   --r: -3deg; }
  .linkpop__chip:nth-child(5) { --x: 30cqw;  --y: 64px;   --r: -5deg; }
}
@media (min-width: 640px) and (prefers-reduced-motion: no-preference) {
  .linkpop.is-live .linkpop__chip { transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .18s ease; }
  .linkpop.is-live .linkpop__field { transition: scale .25s ease; }
  .linkpop.is-live:has(.is-out) .linkpop__field { animation: lpPulse .3s ease; }
  @keyframes lpPulse { 50% { scale: 1.04; } }
}

/* Old vs new: sticky phone, the new screen wipes over the old with scroll */
.uiswap { --p: .5; margin: var(--space-5) 0 var(--block-gap); }
.uiswap__stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6); padding: var(--space-2) 0; }
.uiswap__phone { position: relative; width: min(300px, 62vw); aspect-ratio: 780 / 1688; }
/* Screens already carry their own status bar, so they sit as plain cards, no device frame */
.uiswap__clip { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 18px 40px -20px rgb(30 20 10 / .3); }
.uiswap__clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* Soft reveal: the new screen feathers in over 28px instead of a hard cut */
.uiswap__new { position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--p) * (100% + 28px) - 28px), transparent calc(var(--p) * (100% + 28px)));
          mask-image: linear-gradient(to right, #000 calc(var(--p) * (100% + 28px) - 28px), transparent calc(var(--p) * (100% + 28px))); }
/* The leading edge: a thin line of light, brightest mid-screen and fading
   out top and bottom, with a warm glow trailing onto the new screen */
.uiswap__line { position: absolute; top: 0; bottom: 0; left: calc(var(--p) * (100% + 28px) - 14px); width: 2px; translate: -50% 0;
  background: linear-gradient(to bottom, rgb(245 106 0 / 0), rgb(245 106 0 / .9) 30%, rgb(255 180 110) 50%, rgb(245 106 0 / .9) 70%, rgb(245 106 0 / 0));
  box-shadow: 0 0 14px 3px rgb(255 150 70 / .35); opacity: min(1, var(--p) * 25, (1 - var(--p)) * 25); }
.uiswap__line::after { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 60px; pointer-events: none;
  background: linear-gradient(to left, rgb(255 170 100 / .18), transparent); }
.uiswap__tag { display: grid; gap: 4px; font-size: var(--fs-small); color: var(--color-body); }
.uiswap__tag b { font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.uiswap__tag--old { justify-self: end; text-align: right; opacity: calc(1.15 - var(--p)); }
.uiswap__tag--new { opacity: calc(.15 + var(--p)); }
.uiswap__tag--new b { color: #c45500; }
.uiswap.is-live { height: 260vh; }
.uiswap.is-live .uiswap__stage { position: sticky; top: 104px; }
@media (max-width: 639px) {
  .uiswap__stage { grid-template-columns: 1fr; justify-items: center; }
  .uiswap__tag--old { justify-self: center; text-align: center; }
}

/* Story: which Problem finding a decision answers */
.story__fixes { display: inline-flex; gap: 6px; align-items: baseline; margin-top: var(--space-2); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.story__fixes b { font-weight: 600; letter-spacing: .02em; text-transform: none; font-size: var(--fs-label); color: #b34d00; }

/* Market bars: one measure, sorted, one hue, ink labels */
.mbars { margin: var(--block-gap) 0; }
.mbars__title { font-size: var(--fs-label); font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-4); }
.mbars__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mbars__row { display: grid; grid-template-columns: 100px 1fr 64px; align-items: center; gap: var(--space-3); }
.mbars__name { font-size: var(--fs-small); color: var(--color-body); }
.mbars__track { height: 14px; border-radius: 0 4px 4px 0; }
.mbars__bar { display: block; height: 100%; width: var(--w); border-radius: 0 4px 4px 0; background: var(--bar, #dcdcdc); transition: filter .2s ease; }
/* One muted terracotta ramp, darkest first, lightening down the chart.
   Colour encodes nothing: every bar keeps its name and value in ink. */
.mbars__row:nth-child(1) { --bar: var(--case-accent, var(--color-primary)); }
.mbars__row:nth-child(2) { --bar: #dcdcdc; }
.mbars__row:nth-child(3) { --bar: #dcdcdc; }
.mbars__row:nth-child(4) { --bar: #dcdcdc; }
.mbars__row:nth-child(5) { --bar: #dcdcdc; }
.mbars__row:nth-child(6) { --bar: #dcdcdc; }
.mbars__row:hover .mbars__bar { filter: brightness(.92); }
.mbars__val { font-size: var(--fs-small); font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.mbars__caption { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--color-muted); }
@media (prefers-reduced-motion: no-preference) {
  .case-section .mbars__bar { transform-origin: left; transform: scaleX(0); transition: transform .8s cubic-bezier(.22,1,.36,1); }
  .case-section.is-revealed .mbars__bar { transform: none; }
  .case-section.is-revealed .mbars__row:nth-child(2) .mbars__bar { transition-delay: .06s; }
  .case-section.is-revealed .mbars__row:nth-child(3) .mbars__bar { transition-delay: .12s; }
  .case-section.is-revealed .mbars__row:nth-child(4) .mbars__bar { transition-delay: .18s; }
  .case-section.is-revealed .mbars__row:nth-child(5) .mbars__bar { transition-delay: .24s; }
  .case-section.is-revealed .mbars__row:nth-child(6) .mbars__bar { transition-delay: .30s; }
}

/* A bare phone screen beside text reads as a card: rounded, hairline, soft
   shadow. (Composites like the Validation image carry their own frame.) */
#challenges .split__media img { border-radius: 22px; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 18px 40px -20px rgb(30 20 10 / .3); }

/* Case without the side menu: one centred reading column, like the references */
.case.case--wide { grid-template-columns: minmax(0, 1fr); }
.case--wide .case__content { max-width: 800px; margin-inline: auto; width: 100%; }

/* More work: the next two projects as cover cards */
.more-work { margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--color-border); }
.more-work__heading { font-size: var(--fs-case-headline); font-weight: 500; margin: 0 0 var(--space-5); }
.more-work__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-6); }
.more-work__card { display: grid; gap: var(--space-2); color: inherit; text-decoration: none; }
.more-work__card:hover { text-decoration: none; }
.more-work__card .bc { aspect-ratio: 16 / 11; margin-bottom: var(--space-2); }
.more-work__meta { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .4px; text-transform: uppercase; color: var(--color-body); }
.more-work__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-headline); line-height: 1.25; color: var(--color-ink); }
.more-work__card:hover .bc { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .04), 0 30px 60px -30px rgb(40 25 10 / .22); }

/* Scroll story: count, FIXES tag and title read as one block */
.case-section .story__text h3 { margin-top: var(--space-3); }
.story__fixes { margin-top: var(--space-1); }

/* Validation findings: a compact numbered list beside the prototype image */
.vfind { list-style: none; counter-reset: vfind; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.vfind li { counter-increment: vfind; position: relative; padding: var(--space-4) 0 0 2.25rem; border-top: 1px solid var(--color-border); font-size: var(--fs-body); line-height: 1.4; color: var(--color-body); }
.vfind li::before { content: counter(vfind, decimal-leading-zero); position: absolute; left: 0; top: var(--space-4); font-family: var(--font-mono); font-size: var(--fs-label); line-height: 1.6; color: #c45500; }
.vfind b { display: block; margin-bottom: 2px; font-weight: 500; color: var(--color-ink); }
#validation .split { align-items: start; margin-bottom: var(--space-6); }
#validation .split__text > p:first-child { margin-top: var(--space-2); }
#validation .split .case-takeaway { margin: var(--space-6) 0 0; }

/* Direction: the two brainstormed ideas as text on crossing paths; the
   dropped one faint, the chosen one bold in a warm gradient */

/* Two small survey charts side by side */
.mbars-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-6); margin: var(--space-5) 0; }
.mbars-pair .mbars { margin: 0; }
.mbars-pair .mbars__row { grid-template-columns: minmax(0, 180px) 1fr 52px; }

/* Constraint answer: the evidence that the design worked */

/* Direction: ideas weighed, one card each */

/* Outcome: before -> after with the number beside it */
:root { --delta-down: #c2342b; --delta-up: #1f7a3a; }
/* Before / after, the reference's launch layout: two framed crops side by side
   taking two thirds, the number and the claim in the last third, vertically
   centred. The hairline frames do the carding; nothing sits behind them. */
.result-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; margin: var(--block-gap) 0; }
.result-row__shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.result-row__shot { display: grid; gap: var(--space-2); }
.result-row__shot b { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: .3px; text-transform: uppercase; color: var(--delta-down); }
.result-row__shot.is-after b { color: var(--delta-up); }
.result-row__shot img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm, 8px); }
.result-row__text { display: grid; gap: var(--space-2); }
.result-row__delta { font-size: var(--fs-title); font-weight: 400; line-height: 1.1; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.result-row__delta .is-before { color: var(--delta-down); }
.result-row__delta .is-after { color: var(--delta-up); }
.result-row__arrow { color: var(--color-muted); font-size: .8em; }
.result-row__line { font-size: var(--fs-body); font-weight: 500; line-height: 1.5; color: var(--color-ink); text-wrap: pretty; }
@media (max-width: 760px) { .result-row { grid-template-columns: 1fr; gap: var(--space-4); } }

/* Survey on one soft card: title, one line of context, the chart, the source */
/* Inside the TL;DR card the row sits under the lead with a hairline, not 64px of air */
.tldr-card .stat-row--plain { margin: var(--space-5) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
/* Outcome reads as three beats: figures, the screen that moved them, the why. 64 between them. */
#outcome .result-row { margin: 0 0 var(--space-8); }
.survey { margin: var(--space-8) 0 var(--block-gap); padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.case-section .survey p { max-width: none; margin: 0; }
.case-section .survey h3 { margin: 0 0 var(--space-3); }
.survey p.survey__lead { font-size: var(--fs-small); line-height: 1.5; color: var(--color-body); }
.survey .mbars { margin: var(--space-6) 0 0; }
.survey .mbars__row { grid-template-columns: minmax(0, 200px) 1fr 64px; }
.survey .mbars__track { background: #f3f3f3; }
.survey p.case-source { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
@media (max-width: 640px) {
  .survey { padding: var(--space-4); }
  .survey .mbars__row { grid-template-columns: minmax(0, 116px) 1fr 52px; }
  /* Plain stats stay one quiet list on a phone: no dividers between them */
  .stat-row--plain .stat-row__item + .stat-row__item { border-top: 0; margin-top: 0; padding-top: 0; }
  .stat-row--plain { gap: var(--space-4); }
}

/* Source line under a chart: quiet, so it reads as a footnote, not a finding */
.case-section p.case-source { font-size: var(--fs-label); color: var(--color-muted); }

/* The About link sits inline in prose; widen its hit area without changing the line */
.about-teaser a { position: relative; }
.about-teaser a::after { content: ""; position: absolute; inset: -12px -6px; }

/* Before / after pair (reference layout): framed crops side by side, red/green
   mono label under each, one sentence per side. */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin: var(--block-gap) 0; }
.ba-pair__side { display: grid; align-content: start; gap: var(--space-3); }
.ba-pair__frame { display: flex; justify-content: center; align-items: flex-start; height: 360px; overflow: hidden; padding: var(--space-5) var(--space-5) 0; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ba-pair--fit .ba-pair__frame { height: 280px; align-items: center; padding: var(--space-5); }
.ba-pair--fit .ba-pair__frame img { width: auto; height: 210px; max-width: 100%; object-fit: contain; }
/* Web pages: show the top of the page large enough to read, not the whole
   scroll shrunk to a thumbnail. No frame line; the screenshot is the object. */
.ba-pair--web .ba-pair__frame { height: auto; aspect-ratio: 4 / 3; padding: 0; border: 0; background: none; border-radius: var(--radius-sm); box-shadow: 0 12px 32px -14px rgba(17, 17, 17, 0.22); }
.ba-pair--web .ba-pair__frame img { width: 100%; max-width: none; border-radius: 0; box-shadow: none; }
.ba-pair__frame img { width: 100%; max-width: 260px; height: auto; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--color-border); }
.ba-pair__label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .3px; text-transform: uppercase; color: var(--delta-down); }
.ba-pair__side.is-after .ba-pair__label { color: var(--delta-up); }
.case-section p.ba-pair__text { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--color-ink); }
@media (max-width: 640px) { .ba-pair { grid-template-columns: 1fr; gap: var(--space-6); } .ba-pair__frame { height: 300px; } }

/* State and request grids (Tom, 2026-11-02, Madhurima reference): a barely-there
   panel with one hairline and generous padding, so the cards carry the colour.
   Each item is a title and a quiet sentence-case line, then the screen. */
.states { display: grid; gap: var(--space-8); margin: var(--block-gap) 0; padding: var(--space-8) var(--space-7); background: #fbfbfb; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.case-section p.states__group-title { margin: 0 0 var(--space-5); font-size: var(--fs-title); font-weight: 500; color: var(--color-ink); }
.states__list, .case-section .states__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); align-items: start; }
.states--wide .states__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
.states__item { margin: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.states__head { align-self: end; padding-bottom: var(--space-3); }
.case-section p.states__title { margin: 0; font-size: var(--fs-small); font-weight: 500; line-height: 1.35; color: var(--color-ink); }
.case-section p.states__meta { margin: 2px 0 0; font-size: var(--fs-label); line-height: 1.4; color: #767676; }
.states__item img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); background: #fff; box-shadow: 0 0 0 1px var(--color-border); }
@media (max-width: 900px) { .states { padding: var(--space-6) var(--space-5); } .case-section .states__list, .case-section .states--wide .states__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); } }
@media (max-width: 640px) { .states { padding: var(--space-5) var(--space-4); gap: var(--space-7); } }

/* Website screens (IPP, 2026-11-02). One quiet browser window for every desktop
   screen, sitting on the same barely-there panel as the state grids. Screens are
   too dense to read at column width, so each window zooms. */
.webshot { display: block; width: 100%; padding: 0; border: 0; background: #fff; border-radius: 10px; overflow: hidden; cursor: zoom-in; text-align: left;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.07), 0 10px 28px -16px rgba(17, 17, 17, 0.28); transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .3s cubic-bezier(0.22, 1, 0.36, 1); }
.webshot:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.08), 0 18px 36px -18px rgba(17, 17, 17, 0.32); }
.webshot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.webshot__bar { display: flex; gap: 5px; align-items: center; height: 22px; padding: 0 10px; background: #f4f2f1; border-bottom: 1px solid #ebe8e6; }
.webshot__bar i { width: 7px; height: 7px; border-radius: 50%; background: #d9d4d2; }
.webshot img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .webshot, .webshot:hover { transition: none; transform: none; } }

.ipp-stage { margin: var(--space-6) 0 var(--block-gap); padding: var(--space-7); background: #fbfbfb; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.case-section p.ipp-label { margin: 0 0 2px; max-width: none; font-size: var(--fs-small); font-weight: 500; line-height: 1.35; color: var(--color-ink); }
.case-section p.ipp-note { margin: 0 0 var(--space-3); max-width: 40ch; font-size: var(--fs-label); line-height: 1.45; color: #767676; }

/* Homepage anatomy: the whole page as a map, its three sections as close-ups */
.ipp-anatomy { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.ipp-anatomy__page { position: sticky; top: 112px; }
.ipp-anatomy__parts { display: grid; gap: var(--space-7); }
.ipp-anatomy__part { margin: 0; }

/* Find IPs: one lead state, then a pair; pairs crop to one shape from the top */
.ipp-lead { margin-bottom: var(--space-7); }
.ipp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.ipp-pair > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.ipp-pair .webshot img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }

@media (max-width: 760px) {
  .ipp-stage { padding: var(--space-5) var(--space-4); }
  .ipp-anatomy { grid-template-columns: 1fr; }
  .ipp-anatomy__page { display: none; } /* a whole desktop page at phone width is a smear */
  .ipp-pair { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* 404 (2026-11-03): the site's own type, nothing else */
.not-found { padding-block: clamp(96px, 16vh, 160px); max-width: 40ch; }
.not-found h1 { margin: 0 0 var(--space-3); }
.not-found p { color: var(--color-body); }
.not-found__home { display: inline-block; margin-top: var(--space-4); }