/* inDrive study, /explorations/indrive/ (owner 2026-10-12; content: design/prototypes/indrive/indrive-prototype-v6.html).
   The site's case-study shell (tokens, cs-nav + progress + footer, cs-meta, takeaway cards, Next Project) with the page's
   own inDrive layer: lime marks behind key words, cream evidence boards, evidence chips, lime callout pins with a legend
   under each board, one outline icon set. Round 2 (owner 2026-10-12): hero cover, the three-ride game + rematch, maths
   step cards, markers, numerals, annotated Finding 03, stat tiles, LinkedIn card, quote cards, comment marquee (the
   homepage Reviews engine, reviews.css + reviews.js). Every value comes from tokens.css (the --c-idv-* / --idv-* block).
   Breakpoints: the site's 1190 / 768, plus 1000 where the sticky story becomes a stack. js/indrive.js */

/* ===== page frame ===== */
.cs-page--indrive { display: block; padding: calc(var(--cs-nav-h) + var(--sp-80)) var(--page-margin) 0; }
.cs-page--indrive > * + * { margin-top: var(--idv-section-gap); }   /* round 9: Verdance's computed rhythm */
.cs-page--indrive > .idv-cover { margin-top: var(--sp-64); }
.cs-page--indrive > .idv-divider + .idv-solve { margin-top: var(--sp-80); }
.cs-page--indrive > .idv-game:not(.idv-game--rate) { margin-top: var(--sp-100); }
.cs-page--indrive > .cs-takeaways, .cs-page--indrive > .cs-nextproj { margin-left: auto; margin-right: auto; }
.cs-page--indrive img:not(.cs-nextproj__mock) { border-radius: 0; max-width: 100%; height: auto; }   /* the site's Next Project image keeps its own radius */
.idv-ch { scroll-margin-top: calc(var(--cs-nav-h) + var(--sp-24)); }
.cs-page--indrive [id] { scroll-margin-top: calc(var(--cs-nav-h) + var(--sp-24)); }

/* ===== type ===== */
.idv-k { font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: var(--lh-150); letter-spacing: var(--pg-label-ls);
  text-transform: uppercase; color: var(--c-idv-lime); display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.idv-k--muted { color: var(--c-grey-8e8e8e); }
.idv-k--ink { color: var(--c-idv-ink); }
.idv-k .idv-ico { width: var(--icon-16); height: var(--icon-16); }
.idv-h1 { font-weight: var(--fw-bold); font-size: var(--fs-r-hero); line-height: var(--lh-r-title); color: var(--c-grey-e6e9f3); text-wrap: balance; }
.idv-h2 { max-width: var(--cs-title-w); font-weight: var(--fw-bold); font-size: var(--fs-r-mh-quote); line-height: var(--lh-tw-120); color: var(--c-grey-e6e9f3); text-wrap: balance; }
.idv-h3 { font-weight: var(--fw-bold); font-size: var(--fs-r-h2); line-height: var(--lh-r-h2); color: var(--c-grey-e6e9f3); text-wrap: balance; }
.idv-h3s { font-weight: var(--fw-bold); font-size: var(--fs-22); line-height: var(--lh-130); color: var(--c-white); }
.idv-lead { font-weight: var(--fw-bold); font-size: var(--fs-r-body-24); line-height: var(--lh-150); color: var(--c-white); }
.idv-prose { display: flex; flex-direction: column; gap: var(--sp-20); max-width: var(--idv-text-max); }   /* round 9: a text column never wider than 560 */
.idv-prose p:not(.idv-lead):not(.idv-pull), .idv-beat > p { font-size: var(--fs-r-body-20); line-height: var(--lh-160); color: var(--c-grey-8e8e8e); }
.idv-prose b, .idv-beat b, .idv-kv dd b, .idv-lede b { font-weight: var(--fw-bold); color: var(--c-white); }
.idv-pull { font-weight: var(--fw-bold); font-size: var(--fs-r-h2); line-height: var(--lh-130); color: var(--c-grey-e6e9f3); text-wrap: balance; }
.idv-prose .idv-pull { margin-top: var(--sp-16); }
.idv-prose--c { margin-inline: auto; text-align: center; }
.idv-game__h { text-align: center; }
.idv-pull--wide { max-width: var(--idv-statement-w); margin: var(--sp-64) auto 0; text-align: center; font-size: var(--fs-r-mh-quote); line-height: var(--lh-tw-120); }
.idv-pull--sm { font-size: var(--fs-r-h2); }
.idv-bigline { max-width: var(--idv-statement-w); margin: var(--sp-80) auto 0; text-align: center; font-weight: var(--fw-bold); font-size: var(--fs-r-mh-quote); line-height: var(--lh-tw-120); color: var(--c-grey-e6e9f3); text-wrap: balance; }
/* lime marker (rounds 4 + 5): a band placed from Figtree's own metrics (content box 0.95em above / 0.25em below the
   baseline; ascenders 0.70em, descenders 0.215em): 0.11em of lime above the tallest letter and 0.11em below the lowest
   descender (round 6: equal), so the words sit centred. Vertical padding on an inline box never changes the line box. */
.idv-mark { position: relative; z-index: 0; padding: 0 var(--mk-pr, var(--idv-mark-px)) 0 var(--mk-pl, var(--idv-mark-px)); background: none; color: var(--c-idv-ink); white-space: nowrap; border-radius: 0; }   /* owner 2026-10-13: the bar is a sharp layer, placed by measurement (tools/gen/marks.py) */
.idv-mark::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: var(--mk-t); bottom: var(--mk-b); background: var(--c-idv-lime); border-radius: 0; }
/* round 9 (owner 2026-10-13): a heading with a marker keeps the site's own line height (no raised line); the lime band reaches into
   the line gap and never touches the line above or below (measured, r9-crops/markers) */
.idv-i { width: var(--icon-24); height: var(--icon-24); flex: none; }
.idv-i--s { width: var(--icon-16); height: var(--icon-16); }
/* icon tile: the page's one icon treatment (lime outline icon on a faint lime square) */
.idv-li__i { width: var(--idv-ic); height: var(--idv-ic); flex: none; display: grid; place-items: center;
  border-radius: var(--r-12); background: var(--c-idv-lime-14); color: var(--c-idv-lime); }
.idv-li__i .idv-i { width: var(--icon-20); height: var(--icon-20); }
.idv-av { width: var(--idv-av); height: var(--idv-av); flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c-grey-232324);
  box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-2c2c2d); font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: 1; letter-spacing: 0.02em; color: var(--c-grey-e6e9f3); }
.idv-av--lime { background: var(--c-idv-lime); box-shadow: none; color: var(--c-idv-ink); }
.idv-disc { font-size: var(--fs-14); line-height: var(--lh-150); color: var(--c-grey-787878); }
.idv-ico { width: var(--icon-16); height: var(--icon-16); flex: none; }

/* ===== evidence chips (always above their headline) ===== */
.idv-chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.idv-chip { display: inline-flex; align-items: center; justify-content: center; height: var(--idv-chip-h); padding: 0 var(--sp-14); border-radius: var(--r-pill);
  border: var(--bw-2) solid var(--c-idv-lime); font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--pg-label-fs); line-height: 1;
  letter-spacing: var(--idv-chip-ls); text-transform: uppercase; text-align: center; color: var(--c-idv-lime); white-space: nowrap; }
.idv-chip--obs { background: var(--c-idv-lime); color: var(--c-idv-ink); }
.idv-chip--pass { border-color: transparent; background: var(--idv-chip-dash) center / 100% 100% no-repeat; }   /* a real 4 px dash all the way round, following the pill's ends */
.idv-chip--prop { border-color: var(--c-brand); color: var(--c-brand); }
.idv-chip--on-lime { border-color: var(--c-idv-ink); color: var(--c-idv-ink); }

/* ===== buttons: the site's .btn, + a lime fill for the page's primary actions ===== */
.idv-btn { cursor: pointer; border: 0; font-family: var(--font-figtree); }
.idv-cta { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border: 0; border-radius: var(--r-24);
  background: var(--c-idv-lime); color: var(--c-idv-ink); font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: var(--btn-fs); line-height: var(--lh-20);
  box-shadow: var(--shadow-btn); cursor: pointer; transition: transform var(--dur-btn) ease, box-shadow var(--dur-btn) ease; }
@media (hover: hover) { .idv-cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 var(--bw-2) var(--c-idv-lime-22), var(--shadow-btn); } }
.idv-cta:disabled { opacity: 0.4; cursor: default; transform: none; }
.cs-page--indrive :is(a, button, [tabindex]):focus-visible { outline: var(--bw-2) solid var(--c-brand); outline-offset: var(--sp-4); }
@media (max-width: 1189.98px) { .idv-cta, .idv-btn { min-height: var(--tap); } }

/* ===== hero ===== */
.idv-hero__text { display: flex; flex-direction: column; align-items: center; gap: var(--sp-28); max-width: var(--idv-hero-w); margin-inline: auto; text-align: center; }
.idv-hero__brand { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-16); }
.idv-logo { display: block; height: var(--idv-logo-h); width: auto; color: var(--c-white); }
.idv-hero__sep { width: var(--bw-1); height: var(--sp-24); background: var(--c-grey-2c2c2d); }
.idv-pill { padding: var(--sp-6) var(--sp-12); border-radius: var(--r-pill); box-shadow: inset 0 0 0 var(--bw-1) var(--c-idv-lime);
  font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--pg-label-fs); line-height: var(--lh-150); letter-spacing: var(--pg-label-ls); text-transform: uppercase; color: var(--c-idv-lime); }
.idv-pill--muted { box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-2c2c2d); color: var(--c-grey-8e8e8e); }
.idv-lede { max-width: var(--idv-hero-w); font-size: var(--fs-r-body-24); line-height: var(--lh-r-body); color: var(--c-grey-8e8e8e); }

/* hero cover: the site's hero media frame (MindHYVE's stage width, ratio and radius), cream, three straight screens */
.idv-cover { position: relative; width: 100%; aspect-ratio: var(--mh-stage-ar); margin-inline: auto; overflow: hidden;
  border-radius: var(--r-20); background: var(--c-idv-board); }
.idv-cover__row { position: absolute; inset: var(--sp-48) var(--sp-64); display: flex; justify-content: space-evenly; align-items: center; }
.idv-cover__item { margin: 0; display: grid; grid-template-rows: auto auto; justify-items: center; gap: var(--sp-16); }
.idv-cover__item .idv-phone { width: var(--idv-cover-ph-w); }
.idv-cover__lbl { padding: var(--sp-6) var(--sp-14); border-radius: var(--r-pill); background: var(--c-idv-ink); color: var(--c-idv-board); white-space: nowrap;
  font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--pg-label-fs); line-height: var(--lh-150); letter-spacing: var(--pg-label-ls); text-transform: uppercase; }
.idv-cover__lbl.is-lime { background: var(--c-idv-lime); color: var(--c-idv-ink); }
.idv-cover__logo { position: absolute; z-index: 1; left: var(--sp-32); top: var(--sp-28); height: var(--idv-logo-h); width: auto; }
/* screens whose source ends in a straight cut: the last 64 px fade into the board (round 3 fallback, never a hard cut line) */
/* ===== the phone frame (round 8): one component for every phone screen. Ink bezel, a 1 px outer stroke (white 12 % on dark, ink 15 %
   on cream), outer radius 44 / screen radius 34, a soft shadow on the cream boards. The screen image (cropped to the screen area,
   tools/make-images-indrive.py) fills the inner box exactly. Screens cut at the bottom fade out over their last 64 px. Pins, rings and
   callouts live on .idv-phone__map, which is exactly the screen box. ===== */

.idv-phone { position: relative; display: block; width: min(var(--idv-ph-w), var(--ph-maxw, 100%)); max-width: 100%; padding: var(--ph-b); border-radius: var(--ph-r); background: var(--c-idv-phone); box-shadow: 0 0 0 var(--bw-1) var(--c-white-12); }
.idv-phone__scr { position: relative; display: block; overflow: hidden; border-radius: calc(var(--ph-r) - var(--ph-b)); }   /* round 10: the frame follows the screenshot */
.idv-phone__img { position: relative; display: block; }
.idv-phone__img img { display: block; width: 100%; height: auto; border-radius: 0 !important; }
.idv-phone__img.is-cut::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--ph-blend); background: linear-gradient(to bottom, transparent, var(--ph-fill)); }   /* a screenshot the deck cut: the round-3 soft fade on its last 48 px */
.idv-phone__map { position: absolute; left: var(--ph-b); top: var(--ph-b); width: calc(100% - 2 * var(--ph-b)); pointer-events: none; container-type: inline-size; }   /* exactly the screenshot's box (aspect-ratio inline) */
:is(.idv-board, .idv-cover, .idv-cmp) .idv-phone { box-shadow: 0 0 0 var(--bw-1) var(--c-idv-ink-15), var(--shadow-idv-phone); }
.idv-phone__map .idv-pin--r { left: calc(100% + var(--ph-b) + var(--idv-pin-gap)); }
.idv-phone__map .idv-pin--r::before { width: calc(var(--idv-pin-gap) + var(--ph-b)); }
.idv-phone__map .idv-pin--l { right: calc(100% + var(--ph-b) + var(--idv-pin-gap)); }
.idv-phone__map .idv-pin--l::before { width: calc(var(--idv-pin-gap) + var(--ph-b)); }
/* callouts (round 9): Uzair's arrows, the tip on the exact element (tools/gen/noodles.py note()); 2 px strokes, ink on cream and lime,
   lime on dark; the text hangs off the tail */
.idv-note { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.idv-note__a { position: absolute; display: block; max-width: none; overflow: visible; }
.idv-note__a path[stroke] { stroke-width: var(--nsw); }
.idv-note--ink { color: var(--c-idv-ink); } .idv-note--lime { color: var(--c-idv-lime); }
.idv-note--in { color: var(--c-idv-lime); }   /* round 10: inside a screen; lime, 3 px, a soft dark shadow so it reads on light and map screens */
.idv-note--in .idv-note__a { filter: drop-shadow(0 1px 2px var(--c-idv-ink-40)); }
.idv-note--lime .idv-note__a { filter: drop-shadow(0 1px 2px var(--c-idv-ink-40)); }
.idv-note--in .idv-note__t { padding: var(--sp-6) var(--sp-10); border-radius: var(--r-pill); background: var(--c-idv-ink-90); color: var(--c-idv-lime); font-weight: var(--fw-semibold); line-height: var(--lh-130); white-space: nowrap; }
.idv-note__t { position: absolute; display: block; font-family: var(--font-figtree); font-weight: var(--fw-semibold); font-size: var(--idv-note-fs); line-height: var(--lh-130); letter-spacing: 0; text-transform: none; white-space: nowrap; color: inherit; }
.idv-note__t[style*="width"] { white-space: normal; }

/* ===== the three-ride game (one component; the rematch is data-mode="rate") ===== */
.idv-game { width: 100%; max-width: var(--idv-game-w); margin-inline: auto; }
.idv-game__h { font-weight: var(--fw-bold); font-size: var(--fs-r-h2); line-height: var(--lh-r-h2); color: var(--c-grey-e6e9f3); text-wrap: balance; }
.idv-game__grid { display: grid; grid-template-columns: minmax(0, var(--idv-gcard-w)) minmax(0, 1fr); gap: var(--sp-24); margin-top: var(--sp-24); align-items: stretch; }
.idv-gcard { perspective: 1600px; min-width: 0; }
.idv-gcard__inner { display: grid; height: 100%; transform-style: preserve-3d; transition: transform var(--idv-flip) var(--pg-ease); }
.idv-gcard__face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--sp-16); min-width: 0; padding: var(--sp-20) var(--sp-20) var(--sp-20);
  border-radius: var(--r-16); background: var(--c-idv-offer); color: var(--c-idv-offer-text); box-shadow: var(--shadow-idv-offer);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; visibility: hidden; transition: visibility 0s linear var(--idv-flip-half); }
.idv-gcard__back { transform: rotateY(180deg); background: var(--c-idv-board); }
.idv-gcard__face { justify-content: center; }   /* every face: content + button as one group, centred in the card's height (round 6) */
.idv-gcard[data-state="play"] .idv-gcard__front, .idv-gcard[data-state="reveal"] .idv-gcard__back, .idv-gcard[data-state="sum"] .idv-gcard__sum { visibility: visible;transition-delay: 0s; }   /* incoming face: at once (its back is turned until mid-flip); outgoing: hides at mid-flip */
.idv-gcard__top { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-12); line-height: var(--lh-150); color: var(--c-idv-offer-muted); }
.idv-gcard__top span:first-child { display: inline-flex; align-items: center; gap: var(--sp-6); font-weight: var(--fw-semibold); color: var(--c-idv-offer-text); }
.idv-gcard__fare { font-weight: var(--fw-bold); font-size: var(--fs-48); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.idv-gcard__rate { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-8); margin-top: calc(var(--sp-4) * -1); padding: var(--sp-6) var(--sp-12);
  border-radius: var(--r-8); background: var(--c-idv-offer-chip-hl); outline: var(--bw-2) solid var(--c-idv-ink); font-weight: var(--fw-bold); font-size: var(--fs-16); line-height: var(--lh-130); font-variant-numeric: tabular-nums; white-space: nowrap; }
.idv-gcard__rate em { font-style: normal; color: var(--c-idv-lens-muted); }
.idv-gcard__legs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.idv-gcard__legs > div { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-12); background: var(--c-idv-offer-chip); }
.idv-gcard__legs dt { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-12); line-height: var(--lh-150); color: var(--c-idv-offer-muted); }
.idv-gcard__legs dd { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-130); font-variant-numeric: tabular-nums; }
.idv-gcard__timer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-12); }
.idv-gcard__bar { height: var(--idv-timer-h); overflow: hidden; border-radius: var(--r-pill); background: var(--c-idv-offer-chip); }
.idv-gcard__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--c-idv-lime); transform-origin: left center; }
.idv-gcard__bar i.is-low { background: var(--c-idv-red); }
.idv-gcard__secs { min-width: 3.2em; text-align: right; font-weight: var(--fw-semibold); font-size: var(--fs-12); color: var(--c-idv-offer-muted); font-variant-numeric: tabular-nums; }
.idv-gcard__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); margin-top: var(--sp-8); }
.idv-gbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); min-height: var(--sp-48); padding: 0 var(--sp-16); border: 0; border-radius: var(--r-12);
  background: var(--c-idv-offer-btn); color: var(--c-idv-offer-text); font-family: var(--font-figtree); font-weight: var(--fw-semibold); font-size: var(--fs-16); cursor: pointer;
  transition: transform var(--dur-btn) ease, filter var(--dur-btn) ease; }
.idv-gbtn--accept { grid-column: 1 / -1; background: var(--c-idv-lime); font-weight: var(--fw-bold); }
@media (hover: hover) { .idv-gbtn:not(:disabled):hover { transform: translateY(-1px); filter: brightness(0.96); } }
.idv-gcard__choice { font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--pg-label-fs); line-height: var(--lh-150); letter-spacing: var(--pg-label-ls); text-transform: uppercase; color: var(--c-idv-ink-muted); }
.idv-gcard__choice.is-missed { color: var(--c-idv-bad-fg); }
.idv-gcard__res { font-weight: var(--fw-bold); font-size: var(--fs-22); line-height: var(--lh-130); color: var(--c-idv-ink); }
.idv-gcard__extra { padding-left: var(--sp-12); box-shadow: inset var(--bw-2) 0 0 var(--c-idv-ink); font-size: var(--fs-16); line-height: var(--lh-150); color: var(--c-idv-ink-muted); }
.idv-gcard__facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: var(--bw-1) solid var(--c-idv-line-ink); }
.idv-gcard__facts > div { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-12) 0; }
.idv-gcard__facts > div + div { padding-left: var(--sp-12); box-shadow: inset var(--bw-1) 0 0 var(--c-idv-line-ink); }
.idv-gcard__facts dt { font-size: var(--fs-12); color: var(--c-idv-ink-muted); }
.idv-gcard__facts dd { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-18); font-variant-numeric: tabular-nums; }
.idv-gcard__next { margin-top: var(--sp-8); }   /* 16 gap + 8 = 24 below the content; the face centres content + button as one group */
.idv-gcard__sum { background: var(--c-idv-lime); color: var(--c-idv-ink); }
.idv-gcard__sumt { font-weight: var(--fw-bold); font-size: var(--fs-28); line-height: var(--lh-tw-120); letter-spacing: -0.01em; text-wrap: balance; }
.idv-gcard__sumbtns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-20); margin-top: var(--sp-8); }
.idv-gcard__sum .idv-gbtn--accept { background: var(--c-idv-ink); color: var(--c-idv-lime); }
.idv-gcard__link { display: inline-flex; align-items: center; gap: var(--sp-6); min-height: var(--tap); font-weight: var(--fw-bold); font-size: var(--fs-16); color: var(--c-idv-ink);
  text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: var(--bw-2); }
.idv-gcard .idv-gbtn:focus-visible, .idv-gcard__link:focus-visible { outline: var(--bw-2) solid var(--c-idv-ink); outline-offset: var(--bw-2); }
/* the panel */
.idv-gpanel { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-16); background: var(--c-card-2); border: var(--bw-1) solid var(--c-grey-2c2c2d); overflow: hidden; }
.idv-gpanel > div { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-20) var(--sp-24); }
.idv-gpanel > div + div { border-top: var(--bw-1) solid var(--c-grey-2c2c2d); }
.idv-gpanel__tally { flex: 1; }
.idv-gpanel__n { font-weight: var(--fw-medium); font-size: var(--fs-20); color: var(--c-grey-8e8e8e); }
.idv-gpanel__n b { font-weight: var(--fw-bold); font-size: var(--fs-32); color: var(--c-white); font-variant-numeric: tabular-nums; }
.idv-gpanel__dots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.idv-gpanel__dots li { height: var(--sp-4); border-radius: var(--r-pill); background: var(--c-grey-2c2c2d); transition: background-color var(--dur-hover) var(--ease-out); }
.idv-gpanel__dots li.is-on, .idv-gpanel__dots li.is-done { background: var(--c-idv-lime); }
.idv-gpanel__toggle { display: flex; align-items: center; gap: var(--sp-10); width: 100%; min-height: var(--tap); padding: 0 var(--sp-14); border: 0; border-radius: var(--r-12); cursor: pointer;
  background: var(--c-bg); box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-2c2c2d); color: var(--c-grey-e6e9f3); font-family: var(--font-figtree); font-weight: var(--fw-semibold); font-size: var(--fs-16); text-align: left;
  transition: box-shadow var(--dur-hover) var(--ease-out); }
.idv-gpanel__toggle > .idv-i:first-child { width: var(--icon-20); height: var(--icon-20); color: var(--c-idv-lime); }
.idv-gpanel__toggle span { flex: 1; }
.idv-gpanel__chev { width: var(--icon-16); height: var(--icon-16); color: var(--c-grey-8e8e8e); transform: rotate(90deg); transition: transform var(--dur-hover) var(--ease-out); }
.idv-gpanel__toggle[aria-expanded="true"] .idv-gpanel__chev { transform: rotate(-90deg); }
@media (hover: hover) { .idv-gpanel__toggle:hover { box-shadow: inset 0 0 0 var(--bw-1) var(--c-idv-lime); } }
.idv-gpanel__hisp { padding: var(--sp-12) var(--sp-14); border-radius: var(--r-12); background: var(--c-idv-lime-14); font-size: var(--fs-16); line-height: var(--lh-150); color: var(--c-grey-e6e9f3); font-variant-numeric: tabular-nums; }
.idv-tally { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.idv-tally li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-12); min-height: var(--idv-tally-row); border-bottom: var(--bw-1) solid var(--c-grey-232324); font-size: var(--fs-16); color: var(--c-grey-8e8e8e); }
.idv-tally li:last-child { border-bottom: 0; }
.idv-tally b { font-weight: var(--fw-semibold); color: var(--c-grey-464646); font-variant-numeric: tabular-nums; }
.idv-tally li.is-now b { color: var(--c-grey-e6e9f3); }
.idv-gcard__src { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-6); margin-top: calc(var(--sp-8) * -1); padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill);
  background: var(--c-idv-offer-chip-hl); font-size: var(--fs-12); line-height: var(--lh-150); font-weight: var(--fw-semibold); color: var(--c-idv-ink); }
.idv-gcard__src.is-sim { background: var(--c-idv-offer-chip); color: var(--c-idv-ink-muted); }
.idv-gcard__after { display: flex; flex-direction: column; gap: var(--sp-2); }
.idv-gcard__after > span { font-size: var(--fs-12); color: var(--c-idv-ink-muted); }
.idv-gcard__after b { font-weight: var(--fw-bold); font-size: var(--fs-36); line-height: 1.1; letter-spacing: -0.02em; color: var(--c-idv-ink); font-variant-numeric: tabular-nums; }
/* kind tags and amounts (rounds 4 + 5): negatives use a real minus sign, in the maths widget's red */
.idv-kind { display: inline-flex; align-items: center; height: var(--idv-kind-h); padding: 0 var(--sp-8); border-radius: var(--r-pill); white-space: nowrap;
  font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--fs-10); line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; }
.idv-kind--good { background: var(--c-idv-lime); color: var(--c-idv-ink); }
.idv-kind--below { background: var(--c-idv-kind-below); color: var(--c-idv-kind-below-fg); }
.idv-kind--loss { background: transparent; box-shadow: inset 0 0 0 var(--bw-1) var(--c-idv-red); color: var(--c-idv-red-soft); }
:is(.idv-gcard__back, .idv-gcard__sum) .idv-kind--loss { box-shadow: inset 0 0 0 var(--bw-1) var(--c-idv-bad-fg); color: var(--c-idv-bad-fg); }
/* what happened (round 6): one colour per outcome; dark panel / cream reveal / lime summary */
.idv-res { display: inline-flex; align-items: center; gap: var(--sp-6); }
.idv-res__i { width: var(--icon-16); height: var(--icon-16); flex: none; }
.idv-gpanel .idv-res.is-good { color: var(--c-idv-lime); } .idv-gpanel .idv-res.is-plain { color: var(--c-white); }
.idv-gpanel .idv-res.is-loss { color: var(--c-idv-red-soft); } .idv-gpanel .idv-res.is-muted { color: var(--c-grey-8e8e8e); }
.idv-gcard__back .idv-res.is-good { color: var(--c-idv-good-on-cream); } .idv-gcard__back .idv-res.is-plain { color: var(--c-idv-ink); }
.idv-gcard__back .idv-res.is-loss { color: var(--c-idv-bad-fg); } .idv-gcard__back .idv-res.is-muted { color: var(--c-idv-ink-muted); }
.idv-gcard__sum .idv-res { justify-content: flex-end; font-weight: var(--fw-bold); }
.idv-gcard__sum .idv-res.is-good, .idv-gcard__sum .idv-res.is-plain { color: var(--c-idv-ink); } .idv-gcard__sum .idv-res.is-loss { color: var(--c-idv-bad-fg); }
.idv-gcard__sum .idv-res.is-muted { color: var(--c-idv-ink-muted); font-weight: var(--fw-semibold); }
.idv-nw { white-space: nowrap; }
.idv-res small { font-size: var(--fs-11); font-weight: var(--fw-regular); opacity: 0.8; }
.idv-gcard__back .idv-gcard__after .idv-res .idv-amt.is-neg, .idv-gcard__back .idv-gcard__after .idv-res.is-loss { color: var(--c-idv-bad-fg); }
.idv-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.idv-amt.is-neg { color: var(--c-idv-red); }
.idv-gpanel .idv-amt.is-neg { color: var(--c-idv-red-soft); }
.idv-gcard__rhead { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-8); }
.idv-gcard__said { padding: var(--sp-8) var(--sp-12); border-radius: var(--r-8); background: var(--c-idv-offer-chip-hl); font-size: var(--fs-14); line-height: var(--lh-150); font-weight: var(--fw-semibold); color: var(--c-idv-ink); }
.idv-sumcols { display: grid; grid-template-columns: 1fr 1fr; border-block: var(--bw-1) solid var(--c-idv-line-ink); }
.idv-sumcols--one { grid-template-columns: 1fr; }
.idv-sumcol { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; padding: var(--sp-16) 0; }
.idv-sumcol + .idv-sumcol { padding-left: var(--sp-16); border-left: var(--bw-1) solid var(--c-idv-line-ink); }   /* the hairline between the two columns */
.idv-sumcols:not(.idv-sumcols--one) .idv-sumcol:first-child { padding-right: var(--sp-16); }
.idv-sumcol__k { font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--fs-11); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-idv-ink-muted); }
.idv-sumcol__t { font-weight: var(--fw-bold); font-size: var(--fs-40); line-height: 1.1; letter-spacing: -0.02em; color: var(--c-idv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.idv-sumcol__t .idv-amt.is-neg { color: var(--c-idv-bad-fg); }
.idv-sumcol__l, .idv-sumcol__r { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-14); line-height: var(--lh-150); color: var(--c-idv-ink); }
.idv-sumcol__l b { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.idv-sumcol__pill { display: inline-flex; align-items: center; height: var(--idv-kind-h); padding: 0 var(--sp-10); border-radius: var(--r-pill); box-shadow: inset 0 0 0 var(--bw-1) var(--c-idv-line-ink);
  font-weight: var(--fw-bold); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.idv-sumcol__pill.is-on { background: var(--c-idv-ink); color: var(--c-idv-lime); box-shadow: none; }   /* 3 of 3: the point of the game */
.idv-gcard__sum .idv-gcard__sumbtns { margin-top: var(--sp-8); }   /* 16 gap + 8 = 24 below the comparison */
.idv-gcard__sumh { font-weight: var(--fw-bold); font-size: var(--fs-24); line-height: var(--lh-130); letter-spacing: -0.01em; text-wrap: balance; }
.idv-gcard__sum .idv-gcard__sumt { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-150); }
.idv-tally li > span { display: inline-flex; align-items: center; gap: var(--sp-8); }
.idv-tally b small { font-size: var(--fs-11); font-weight: var(--fw-regular); color: var(--c-grey-8e8e8e); }
.idv-tally__row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-12); font-size: var(--fs-14); color: var(--c-grey-8e8e8e); }
.idv-tally__row b { font-weight: var(--fw-bold); color: var(--c-white); font-variant-numeric: tabular-nums; }
.idv-tally__row--knew b { color: var(--c-idv-lime); }
.idv-gpanel__fuel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); font-weight: var(--fw-semibold); font-size: var(--fs-16); color: var(--c-white); }
.idv-gpanel__fuel .idv-i { width: var(--icon-20); height: var(--icon-20); color: var(--c-idv-lime); }
.idv-gpanel__fuel [data-g="phase"] { flex-basis: 100%; font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--pg-label-fs); letter-spacing: var(--pg-label-ls); text-transform: uppercase; color: var(--c-idv-lime); }
.idv-game[data-phase="blind"] .idv-gpanel__fuel [data-g="phase"] { color: var(--c-grey-8e8e8e); }
.idv-gcard__sum .idv-kind--good { background: var(--c-idv-ink); color: var(--c-idv-lime); }
.idv-gcard__sum .idv-kind--below { background: var(--c-white); }
.idv-gcard__sum .idv-amt.is-neg { color: var(--c-idv-bad-fg); }
/* the rematch summary is compact so the whole game stays inside one 1440 x 900 viewport */
.idv-game--rate .idv-gcard__sum { gap: var(--sp-10); }
.idv-game--rate .idv-gcard__sumh { font-size: var(--fs-20); }
.idv-game--rate .idv-game__head .idv-h2 { max-width: none; }
.idv-game--rate .idv-gbtn { min-height: var(--tap); }
.idv-gcard__res { font-size: var(--fs-18) !important; font-weight: var(--fw-semibold) !important; line-height: var(--lh-130); }
.idv-gcard__quiet { font-size: var(--fs-14); line-height: var(--lh-150); color: var(--c-idv-ink-muted); }
.idv-gcard__quiet .idv-note { color: var(--c-idv-ink); }
.idv-tally__total { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-12); margin-top: var(--sp-4); padding-top: var(--sp-12); border-top: var(--bw-2) solid var(--c-grey-2c2c2d);
  font-weight: var(--fw-semibold); font-size: var(--fs-16); color: var(--c-white); }
.idv-tally__total b { font-weight: var(--fw-bold); font-size: var(--fs-22); color: var(--c-idv-lime); font-variant-numeric: tabular-nums; }
.idv-tally__note { font-size: var(--fs-12); color: var(--c-grey-787878); }
/* the rematch: a full section, centred head, the game at full size with a lime outline */
.idv-game--rate { max-width: var(--idv-rematch-w); }
.idv-game--rate .idv-game__grid { max-width: var(--idv-game-w); margin-inline: auto; grid-template-columns: minmax(0, var(--idv-gcard-w-rate)) minmax(0, 1fr); }
@media (min-width: 1190px) { .idv-game--rate .idv-game__head .idv-h2 { font-size: var(--fs-48); } }   /* one line: heading + game fit 1280 x 800 */
.idv-game--rate .idv-game__head { gap: var(--sp-8); }
.idv-game__head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); text-align: center; }
.idv-game__head .idv-h2 em { font-style: italic; color: var(--c-idv-lime); }
.idv-game__sub { font-size: var(--fs-r-body-20); line-height: var(--lh-150); color: var(--c-grey-8e8e8e); }
.idv-game--rate .idv-game__grid { margin-top: var(--sp-20); padding: var(--sp-12); border-radius: var(--r-36); box-shadow: inset 0 0 0 var(--bw-2) var(--c-idv-lime), 0 0 0 var(--sp-6) var(--c-idv-lime-14); }
.cs-page--indrive > .cs-meta { margin: var(--sp-64) auto 0; }

/* ===== the field ===== */
.idv-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-12); }
.idv-strip li { display: grid; grid-template-rows: auto auto; align-content: start; gap: var(--sp-12);
  padding: var(--sp-24); border-radius: var(--r-16); background: var(--c-idv-lime); color: var(--c-idv-ink); }
.idv-strip b { font-weight: var(--fw-bold); font-size: var(--idv-tile-num); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.idv-strip li > span { align-self: start; white-space: nowrap; font-weight: var(--fw-semibold); font-size: var(--idv-tile-label); line-height: var(--lh-130); color: var(--c-idv-ink); }
.idv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-80); align-items: center; margin-top: var(--sp-80); }
.idv-split--top { align-items: start; }
.idv-split--field { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.idv-gap-xl { margin-top: var(--sp-140); }
.idv-kv { margin: 0; border-top: var(--bw-1) solid var(--c-grey-1b1b1c); }
.idv-kv > div { display: grid; grid-template-columns: var(--idv-chipcol) minmax(0, 1fr); gap: var(--sp-24); padding: var(--sp-20) 0; border-bottom: var(--bw-1) solid var(--c-grey-1b1b1c); align-items: baseline; }
.idv-kv dt { margin: 0; } .idv-kv dd { margin: 0; font-size: var(--fs-r-body-20); line-height: var(--lh-160); color: var(--c-grey-8e8e8e); }
.idv-kv--chips > div { align-items: center; }
.idv-kv__throw { margin-top: var(--sp-8); }

/* ===== chapter opener: the big outlined numeral (Findings 01-03 only) ===== */
.idv-opener { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); margin: 0 auto var(--sp-80); max-width: var(--cs-title-w); text-align: center; }
.idv-opener .idv-num { margin-bottom: calc(var(--sp-8) * -1); }
.idv-opener .idv-chips { justify-content: center; }
.idv-opener .idv-h2 { max-width: none; }
.idv-num { font-weight: var(--fw-bold); font-size: var(--fs-r-display); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  color: var(--c-bg); -webkit-text-fill-color: var(--c-bg); -webkit-text-stroke: var(--idv-num-stroke) var(--c-grey-464646); paint-order: stroke fill; }   /* the fill covers the inner half of the stroke: no inner contours */

/* ===== cream boards, pins and legends ===== */
.idv-board { position: relative; overflow: hidden; border-radius: var(--r-16); background: var(--c-idv-board); color: var(--c-idv-ink); }
.idv-board__cap { position: absolute; z-index: 2; left: var(--sp-20); top: var(--sp-20); padding: var(--sp-6) var(--sp-12); border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 var(--bw-1) var(--c-idv-ink); background: var(--c-idv-board);
  font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--pg-label-fs); line-height: var(--lh-150); letter-spacing: var(--pg-label-ls); text-transform: uppercase; }
.idv-board__stage { display: flex; justify-content: center; align-items: center; padding: var(--idv-board-pad); }
.idv-board--pad .idv-board__stage { padding-bottom: var(--sp-48); align-items: center; }
.idv-shot { position: relative; margin: 0 calc(var(--idv-pin) + var(--idv-pin-gap)); min-width: 0; }
.idv-shot img { display: block; }
/* figures carry the width (a % width inside a shrink-wrapped figure would collapse to 0 before the image loads) */
.idv-shot--phone { width: auto; flex: none; }
.idv-shot--phone img, .idv-shot--map img, .idv-shot--wide img { width: 100%; }
.idv-shot--wide { width: 100%; }

/* two phones side by side (1 vs 5 passengers, choose a driver): equal heights (each grows by its ratio), bottoms level;
   the gap holds the pins that point inwards */
.idv-pair { display: flex; justify-content: center; align-items: flex-end; gap: var(--idv-pair-gap); width: 100%;
  max-width: calc(var(--ar-sum) * var(--idv-pair-h) + var(--idv-pair-gap)); margin-inline: auto; }
.idv-shot--pair { margin: 0; flex: var(--arn) 1 0; min-width: 0; width: auto; }
.idv-pair--tight { --idv-pair-gap: var(--sp-24); }
.idv-shot--pair img { width: 100%; height: auto; }
.idv-pin { position: absolute; z-index: 2; width: var(--idv-pin); height: var(--idv-pin); border-radius: 50%; background: var(--c-idv-lime); color: var(--c-idv-ink);
  font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: var(--idv-pin); text-align: center; box-shadow: var(--shadow-idv-pin); font-variant-numeric: tabular-nums; }
.idv-pin::before { content: ""; position: absolute; background: var(--c-idv-ink); }
.idv-pin--r { left: calc(100% + var(--idv-pin-gap)); top: var(--y); transform: translateY(-50%); }
.idv-pin--r::before { right: 100%; top: 50%; width: var(--idv-pin-gap); height: var(--bw-2); margin-top: calc(var(--bw-2) / -2); }
.idv-pin--l { right: calc(100% + var(--idv-pin-gap)); top: var(--y); transform: translateY(-50%); }
.idv-pin--l::before { left: 100%; top: 50%; width: var(--idv-pin-gap); height: var(--bw-2); margin-top: calc(var(--bw-2) / -2); }
.idv-pin--b { top: calc(100% + var(--idv-pin-gap)); left: var(--x); transform: translateX(-50%); }
.idv-pin--b::before { bottom: 100%; left: 50%; height: var(--idv-pin-gap); width: var(--bw-2); margin-left: calc(var(--bw-2) / -2); }
.idv-legend { list-style: none; margin: 0; padding: var(--sp-20) var(--sp-32) var(--sp-24); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-12) var(--sp-32);
  background: var(--c-idv-board-legend); border-top: var(--bw-1) solid var(--c-idv-board-line); }
.idv-legend li { display: grid; grid-template-columns: var(--sp-24) minmax(0, 1fr); gap: var(--sp-12); font-size: var(--fs-16); line-height: var(--lh-150); color: var(--c-idv-ink-muted); }
.idv-legend__n { width: var(--sp-24); height: var(--sp-24); border-radius: 50%; background: var(--c-idv-ink); color: var(--c-idv-lime); font-weight: var(--fw-bold); font-size: var(--fs-12); line-height: var(--sp-24); text-align: center; }

/* ===== Finding 01: sticky beats ===== */
.idv-scrolly { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-80); }
.idv-beat { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-16); padding-block: var(--sp-24); opacity: 0.32; transition: opacity 0.3s var(--ease-out); }
.idv-beat.is-on { opacity: 1; }
.idv-beat > p { max-width: 46ch; }
.idv-beat__board { display: none; }
.idv-stick { position: sticky; top: calc(var(--cs-nav-h) + var(--sp-40)); height: var(--idv-scrolly-h); }
.idv-stick__board { height: 100%; }
.idv-frame { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transition: opacity 0.45s var(--ease-out); pointer-events: none; }
.idv-frame.is-on { opacity: 1; pointer-events: auto; }
.idv-frame__stage { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; padding: var(--sp-64) var(--sp-48); }   /* round 8: framed phones sit centred on the board */
.idv-frame__stage .idv-shot--phone { width: auto; }
/* height-driven (the width follows the image ratio, so lazy images have a size before they load); never above the natural size */
.idv-frame__stage .idv-shot--phone img { width: auto; max-width: none; height: min(calc(var(--idv-scrolly-h) - 250px), var(--nh)); }   /* room for the centred frame (bezel + padding) and the legend */
.idv-frame--wide .idv-frame__stage { align-items: center; padding: var(--sp-80) var(--sp-24) var(--sp-80); }
.idv-frame--wide .idv-shot:not(.idv-shot--pair) { margin: 0; width: 100%; }
.idv-frame--wide .idv-shot:not(.idv-shot--pair) img { width: 100%; max-height: calc(var(--idv-scrolly-h) - 260px); object-fit: contain; }
.idv-frame .idv-legend { flex: none; }

/* ===== Finding 02 ===== */
.idv-scope { width: fit-content; max-width: var(--idv-hero-w); margin-inline: auto; display: flex; align-items: center; gap: var(--sp-12); margin-bottom: var(--sp-48); padding: var(--sp-16) var(--sp-20); border-radius: var(--r-16);
  background: var(--c-card-2); box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-2c2c2d); font-size: var(--fs-r-body-20); line-height: var(--lh-150); color: var(--c-grey-8e8e8e); }
.idv-scope b { color: var(--c-white); }
.idv-scope__i { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--c-idv-lime); color: var(--c-idv-ink); display: grid; place-items: center; font-weight: var(--fw-bold); }
.idv-bignum { display: grid; grid-template-columns: minmax(0, 1fr) var(--idv-vs) minmax(0, 1fr); gap: var(--sp-40); align-items: center; max-width: var(--cs-content-w);
  margin: 0 auto var(--sp-80); padding-block: var(--sp-48); border-block: var(--bw-1) solid var(--c-grey-1b1b1c); text-align: center; }
.idv-bignum > div { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.idv-bignum b { font-weight: var(--fw-bold); font-size: var(--fs-r-display); line-height: 0.85; letter-spacing: -0.04em; color: var(--c-white); white-space: nowrap; }
.idv-bignum__one b { color: var(--c-idv-lime); }
.idv-bignum > div > span { max-width: 34ch; font-size: var(--fs-18); line-height: var(--lh-150); color: var(--c-white-75); }
.idv-bignum__vs { width: var(--idv-vs); height: var(--idv-vs); display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 var(--bw-2) var(--c-idv-lime);
  font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--fs-14); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-idv-lime); }
.idv-cmp { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--bw-2); overflow: hidden; border-radius: var(--r-24); background: var(--c-idv-board-split); }
.idv-cmp__half { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: var(--c-idv-board); }
.idv-cmp__half--good { background: var(--c-idv-board-good); }
.idv-cmp__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); min-height: 68px; padding: var(--sp-16) var(--sp-24); border-bottom: var(--bw-1) solid var(--c-idv-board-line); }
.idv-tag { display: inline-flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-12); border-radius: var(--r-pill); font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: var(--lh-20); white-space: nowrap; }
.idv-tag--bad { background: var(--c-idv-bad-bg); color: var(--c-idv-bad-fg); }
.idv-tag--good { background: var(--c-idv-lime); color: var(--c-idv-ink); }
.idv-cmp__row { display: flex; justify-content: center; align-items: center; gap: var(--sp-32); padding: var(--idv-board-pad) var(--sp-24); }
.idv-cmp__row--mid { gap: var(--idv-board-pad); }
.idv-shot--map { width: min(var(--idv-map-w), 100%); }   /* round 9: larger, so the in-city row has no big empty board */
.idv-shot--map img { border-radius: var(--r-12); }
.idv-legend--cmp { grid-column: 1 / -1; }

.idv-split--maths { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.idv-split--maths .idv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-16); }
.idv-split--maths .idv-step:nth-child(2)::before, .idv-split--maths .idv-step:nth-child(2)::after { display: none; }
.idv-maths { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-28); padding: var(--sp-24); border-radius: var(--r-16); background: var(--c-card-2); }
/* the site's segmented control (MindHYVE's .mh-seg recipe: chip track, 4 px inset, pill buttons, accent fill = lime here) */
.idv-segctl, .idv-seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); padding: var(--mh-seg-pad); border-radius: var(--r-pill);
  background: var(--c-mh-chip); box-shadow: inset 0 0 0 var(--idv-seg-bw) var(--c-white-40); }   /* round 7: a clearly visible 1.5 px outline (>= 3:1 on the card); a spread, because browsers floor a 1.5 px border to 1 px on 1x screens */
.idv-segctl__k { margin-bottom: calc(var(--sp-16) * -1); }
.idv-segctl button, .idv-seg button { min-height: var(--tap); padding: 0 var(--sp-20); border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer;
  font-family: var(--font-figtree); font-weight: var(--fw-medium); font-size: var(--fs-14); line-height: var(--lh-tw-100); color: var(--c-white-85);
  transition: color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out); }
.idv-segctl button[aria-selected="true"], .idv-seg button[aria-pressed="true"] { background: var(--c-idv-lime); color: var(--c-idv-ink); font-weight: var(--fw-semibold); }
@media (hover: hover) { .idv-segctl button[aria-selected="false"]:hover, .idv-seg button[aria-pressed="false"]:hover { color: var(--c-white); background: var(--c-white-08); } }
.idv-steps { align-self: stretch; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--idv-step-gap); }
.idv-step { position: relative; display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; padding: var(--sp-20); border-radius: var(--r-16); background: var(--c-bg);
  box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-2c2c2d); transition: box-shadow var(--dur-hover) var(--ease-out); }
.idv-step__n { width: var(--sp-28); height: var(--sp-28); margin-bottom: var(--sp-4); display: grid; place-items: center; border-radius: 50%; background: var(--c-idv-lime); color: var(--c-idv-ink);
  font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: 1; font-variant-numeric: tabular-nums; }
.idv-step__lbl { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--pg-label-fs); line-height: var(--lh-150);
  letter-spacing: var(--pg-label-ls); text-transform: uppercase; color: var(--c-grey-8e8e8e); }
.idv-step__val { font-weight: var(--fw-bold); font-size: var(--fs-32); line-height: var(--lh-tw-120); color: var(--c-white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.idv-step__how { font-size: var(--fs-14); line-height: var(--lh-150); color: var(--c-grey-787878); font-variant-numeric: tabular-nums; }
/* the arrow between steps: a thin line and a chevron, centred in the gap */
.idv-step:not(:last-child)::before { content: ""; position: absolute; top: 50%; left: calc(100% + var(--sp-8)); width: calc(var(--idv-step-gap) - var(--sp-16)); height: var(--bw-1); background: var(--c-grey-464646); }
.idv-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: calc(100% + var(--idv-step-gap) - var(--sp-8) - var(--sp-6)); width: var(--sp-6); height: var(--sp-6);
  margin-top: calc(var(--sp-6) / -2); border-top: var(--bw-1) solid var(--c-grey-464646); border-right: var(--bw-1) solid var(--c-grey-464646); transform: rotate(45deg); transform-origin: center; }
.idv-steps.is-broken .idv-step { box-shadow: none; outline: var(--bw-1) dashed var(--c-idv-red); outline-offset: calc(var(--bw-1) * -1); }
.idv-steps.is-broken .idv-step__n { background: var(--c-idv-red); color: var(--c-white); }
.idv-steps.is-broken .idv-step__val { color: var(--c-idv-red-soft); }
.idv-steps.is-broken .idv-step:not(:last-child)::before { background: repeating-linear-gradient(90deg, var(--c-idv-red) 0 var(--sp-4), transparent 0 var(--sp-8)); }
.idv-steps.is-broken .idv-step:not(:last-child)::after { border-color: var(--c-idv-red); }
/* after step 1 a short red stroke crosses out the chain */
.idv-steps.is-broken .idv-step:first-child::after { left: calc(100% + var(--idv-step-gap) / 2 - var(--bw-2) / 2); width: var(--bw-2); height: var(--sp-24); margin-top: calc(var(--sp-24) / -2);
  border: 0; border-radius: var(--r-pill); background: var(--c-idv-red); transform: rotate(30deg); }
.idv-verdict { font-weight: var(--fw-semibold); font-size: var(--fs-18); line-height: var(--lh-150); color: var(--c-white); }

/* ===== Finding 03: an annotated screen (leader lines: js/indrive.js) ===== */
.idv-anno { display: grid; grid-template-columns: minmax(0, 1fr) var(--idv-ph-w) minmax(0, 1fr); gap: var(--sp-64); padding: var(--idv-board-pad); align-items: stretch; overflow: visible; }
.idv-anno__phone { position: relative; z-index: 1; margin: 0; width: var(--idv-ph-w); }
.idv-anno__lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.idv-anno__lines path { fill: none; stroke: var(--c-idv-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.idv-anno__lines circle { fill: var(--c-idv-lime); stroke: var(--c-idv-ink); stroke-width: 2; }
.idv-anno__lines .is-q path { stroke-dasharray: 4 4; }
.idv-anno__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: var(--sp-16); }
.idv-anno__col--l { align-items: flex-end; text-align: right; } .idv-anno__col--r { align-items: flex-start; }
.idv-anno__item { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: var(--sp-10); max-width: var(--idv-anno-w); color: var(--c-idv-ink); }
.idv-anno__col--l .idv-anno__item { flex-direction: row-reverse; }
.idv-anno__n { flex: none; width: var(--idv-anno-pin); height: var(--idv-anno-pin); display: grid; place-items: center; border-radius: 50%; background: var(--c-idv-ink); color: var(--c-idv-lime);
  font-weight: var(--fw-bold); font-size: var(--fs-12); line-height: 1; font-variant-numeric: tabular-nums; }
.idv-anno__tx { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.idv-anno__k { font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--fs-11); line-height: var(--lh-150); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-idv-ink-muted); }
.idv-anno__v { font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-130); color: var(--c-idv-ink); font-variant-numeric: tabular-nums; }
.idv-anno__ic { width: var(--idv-ic-sm); height: var(--idv-ic-sm); flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c-idv-ink); color: var(--c-idv-lime); }
.idv-anno__ic .idv-i { width: var(--icon-20); height: var(--icon-20); }
.idv-anno__item--missing { align-items: center; gap: var(--sp-12); width: var(--idv-anno-w); padding: var(--sp-16) var(--sp-20) var(--sp-16) var(--sp-16); border-radius: var(--r-16);
  background: var(--c-idv-lime); box-shadow: var(--shadow-idv-lime-card); outline: var(--bw-2) dashed var(--c-idv-ink); outline-offset: calc(var(--sp-6) * -1); }
.idv-anno__item--missing .idv-anno__n { display: none; }
.idv-anno__item--missing .idv-anno__v { font-size: var(--fs-18); }
.idv-anno__slot { display: block; height: var(--sp-24); margin-top: var(--sp-8); border-radius: var(--r-8); background: var(--c-idv-ink-08); box-shadow: inset 0 0 0 var(--bw-1) var(--c-idv-line-ink); }
.idv-anno__pin { position: absolute; z-index: 2; display: none; width: var(--idv-anno-pin); height: var(--idv-anno-pin); transform: translate(-50%, -50%); border-radius: 50%; place-items: center;
  background: var(--c-idv-lime); color: var(--c-idv-ink); box-shadow: 0 0 0 var(--bw-2) var(--c-idv-ink); font-weight: var(--fw-bold); font-size: var(--fs-12); line-height: 1; }

/* ===== the pattern ===== */
.idv-pat { max-width: var(--cs-content-w); margin: 0 auto; border-top: var(--bw-2) solid var(--c-idv-lime); }
.idv-pat__row { display: grid; grid-template-columns: var(--idv-pat-k) minmax(0, 1fr) var(--sp-64) minmax(0, 1fr); align-items: baseline; gap: var(--sp-24);
  padding: var(--sp-28) 0; border-bottom: var(--bw-1) solid var(--c-grey-232324); }
.idv-pat__row--head { padding: var(--sp-16) 0; font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--pg-label-fs); letter-spacing: var(--pg-label-ls); text-transform: uppercase; color: var(--c-grey-8e8e8e); }
.idv-pat__k { font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--fs-14); letter-spacing: var(--pg-label-ls); text-transform: uppercase; color: var(--c-idv-lime); }
.idv-pat__see { font-weight: var(--fw-bold); font-size: var(--fs-r-body-24); line-height: var(--lh-130); color: var(--c-white); }
.idv-pat__ar { align-self: center; color: var(--c-idv-lime); }
.idv-arrow { display: block; width: var(--sp-48); height: auto; }
.idv-pat__then { font-size: var(--fs-r-body-20); line-height: var(--lh-150); color: var(--c-grey-8e8e8e); }

/* ===== Rate Check: the turning point (full-bleed lime) ===== */
.idv-solve, .idv-band { width: 100vw; margin-left: calc(50% - 50vw); background: var(--c-idv-lime); color: var(--c-idv-ink); }
.idv-solve__in { max-width: var(--page-w); margin: 0 auto; padding: var(--sp-140) var(--page-margin); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-80); align-items: center; }
.idv-solve__text { display: flex; flex-direction: column; gap: var(--sp-24); max-width: var(--idv-text-max); }
.idv-divider { display: flex; justify-content: center; text-align: center; }
.idv-divider__t { white-space: normal; }
.idv-solve__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); }
.idv-badge { display: inline-flex; align-items: center; gap: var(--sp-8); height: var(--idv-badge-h); padding: 0 var(--sp-18); border-radius: var(--r-pill);
  background: var(--c-idv-ink); color: var(--c-idv-lime); font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--idv-badge-fs); line-height: 1; letter-spacing: var(--pg-label-ls); text-transform: uppercase; }
.idv-badge .idv-i { width: var(--icon-16); height: var(--icon-16); }
.idv-solve__badges .idv-chip { height: var(--idv-badge-h); padding: 0 var(--sp-18); font-size: var(--idv-badge-fs); letter-spacing: var(--pg-label-ls); }   /* "PROPOSED": the outline twin of the badge */
.idv-lens-wrap { position: relative; width: 100%; }
.idv-lens--before { position: absolute; z-index: 0; top: calc(var(--sp-48) * -1); right: calc(var(--sp-40) * -1); width: 62%; padding: var(--sp-24) var(--sp-28) var(--sp-80); transform: rotate(4deg);
  background: var(--c-idv-offer-chip); box-shadow: var(--shadow-idv-before); opacity: 0.92; }
.idv-lens--before .idv-lens__fare { font-size: var(--fs-32); }
.idv-lens-wrap > .idv-lens:not(.idv-lens--before) { z-index: 1; }
.idv-lens__line { position: relative; }
@property --idv-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.idv-live { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.idv-live b, .idv-live i { position: absolute; inset: 0; border-radius: inherit; padding: var(--idv-live-w);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.idv-live b { background: var(--c-idv-live); }
.idv-live__glow { position: absolute; inset: 0; border-radius: inherit; filter: drop-shadow(0 0 var(--sp-4) var(--c-idv-lime)); }
.idv-live i { background: conic-gradient(from var(--idv-a), transparent 0deg 250deg, var(--c-idv-lime) 315deg, var(--c-white) 330deg, var(--c-idv-lime) 345deg, transparent 360deg);
  animation: idv-orbit var(--idv-live-dur) linear infinite; }
@keyframes idv-orbit { from { --idv-a: 360deg; } to { --idv-a: 0deg; } }   /* decreasing angle: counter-clockwise, right to left along the top edge */
.idv-solve__h { font-weight: var(--fw-bold); font-size: var(--fs-r-display); line-height: 0.92; letter-spacing: -0.035em; }
.idv-solve__p { max-width: 34ch; font-weight: var(--fw-semibold); font-size: var(--fs-r-body-24); line-height: var(--lh-150); }
.idv-lens { position: relative; display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-40); border-radius: var(--r-24); background: var(--c-white); box-shadow: var(--shadow-idv-lens); }
.idv-lens__k { font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--pg-label-fs); letter-spacing: var(--pg-label-ls); text-transform: uppercase; color: var(--c-idv-lens-muted); }
.idv-lens__fare { font-weight: var(--fw-bold); font-size: var(--fs-48); line-height: 1; font-variant-numeric: tabular-nums; }
.idv-lens__line { align-self: flex-start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); margin-top: var(--sp-8); padding: var(--sp-12) var(--sp-16);
  border-radius: var(--r-12); background: var(--c-idv-offer-btn);
  font-weight: var(--fw-semibold); font-size: var(--fs-24); line-height: var(--lh-130); font-variant-numeric: tabular-nums; }
.idv-lens__line em { font-style: normal; color: var(--c-idv-lens-muted); }
@media (min-width: 768px) { .idv-lens__line { flex-wrap: nowrap; white-space: nowrap; } }
.idv-lens__ann { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); margin-top: var(--sp-24); padding-top: var(--sp-20); border-top: var(--bw-1) dashed var(--c-idv-offer-dash); }
.idv-lens__ann div { display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--fs-16); line-height: var(--lh-150); color: var(--c-idv-lens-text); }
.idv-lens__ann b { font-size: var(--fs-16); color: var(--c-idv-ink); }

/* ===== same screen, one new line ===== */
.idv-ch--tight { margin-top: var(--sp-100) !important; }
.idv-ba { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-80); align-items: center; }
.idv-ba__text { display: flex; flex-direction: column; gap: var(--sp-32); }
.idv-anat { display: flex; flex-direction: column; gap: var(--sp-20); }
.idv-anat > div { padding-left: var(--sp-20); box-shadow: inset 3px 0 0 var(--c-idv-lime); }
.idv-anat b { font-weight: var(--fw-bold); font-size: var(--fs-22); color: var(--c-white); font-variant-numeric: tabular-nums; }
.idv-anat p { margin-top: var(--sp-4); font-size: var(--fs-18); line-height: var(--lh-160); color: var(--c-grey-8e8e8e); }
.idv-seg { align-self: flex-start; display: inline-flex; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-pill); background: var(--c-card-2); box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-2c2c2d); }
.idv-seg button { box-shadow: none; }
.idv-ba__board { padding: var(--idv-board-pad); }
.idv-flip { position: relative; display: grid; justify-content: center; margin: 0 auto; }
.idv-flip__layer { grid-area: 1 / 1; align-self: end; transition: opacity var(--dur-hover) var(--ease-out); }
.idv-flip__layer.is-off { opacity: 0; pointer-events: none; }
/* the Rate Check line on the screen (round 6): a box sized to the line's pill, measured from the image pixels (382 x 714: the pill is
   162 x 18 at 105, 419, radius 5); the ring wraps it with the same inset on all four sides (6 image px) and radius 5 + 6.
   Lengths in cqw of the layer, so they scale with the image exactly. */
.idv-line { position: absolute; z-index: 3; left: var(--lx); top: var(--ly); width: var(--lw); height: var(--lh); border-radius: var(--lr); pointer-events: none; }   /* sized to the line's pill, measured from the pixels */
.idv-ring { position: absolute; inset: calc(var(--li) * -1); border-radius: var(--lri); pointer-events: none; }   /* the same inset on all four sides, radius = pill + inset */
.idv-whys { margin-top: var(--sp-100); }
.idv-whylist { list-style: none; margin: var(--sp-16) 0 0; padding: 0; border-top: var(--bw-1) solid var(--c-grey-232324); }
.idv-why { display: grid; grid-template-columns: var(--idv-why-n) minmax(0, 1fr) var(--idv-why-vis); align-items: center; gap: var(--sp-40); padding: var(--sp-32) 0; border-bottom: var(--bw-1) solid var(--c-grey-232324); }
.idv-why__n { font-size: var(--fs-96); line-height: 1; }
.idv-why__h { font-weight: var(--fw-bold); font-size: var(--fs-r-h2); line-height: var(--lh-130); color: var(--c-white); }
.idv-why__tx p { margin-top: var(--sp-8); font-size: var(--fs-18); line-height: var(--lh-160); color: var(--c-grey-8e8e8e); }
.idv-why__vis { display: flex; justify-content: center; align-items: center; min-height: var(--sp-120); }
.idv-v-steps { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.idv-v-steps__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8); }
.idv-v-steps__down { width: var(--sp-12); height: var(--sp-28); color: var(--c-grey-8e8e8e); }   /* the chips collapse into the one comparison */
.idv-v-steps s { padding: var(--sp-6) var(--sp-10); border-radius: var(--r-8); box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-464646); font-size: var(--fs-16); color: var(--c-white-80);
  text-decoration-line: line-through; text-decoration-color: var(--c-idv-red-70); text-decoration-thickness: var(--idv-strike-w); }   /* round 7: 16 px at 80 % white, a thin 70 % red strike */
.idv-v-steps b { padding: var(--sp-10) var(--sp-16); border-radius: var(--r-12); background: var(--c-idv-lime); color: var(--c-idv-ink); font-size: var(--fs-18); font-variant-numeric: tabular-nums; box-shadow: 0 8px 24px -8px var(--c-idv-lime-22); }
.idv-v-cmp { display: flex; align-items: flex-end; gap: var(--sp-32); height: 140px; }
.idv-v-cmp > div { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); font-size: var(--fs-14); color: var(--c-grey-8e8e8e); }
.idv-v-cmp b { font-size: var(--fs-22); color: var(--c-white); font-variant-numeric: tabular-nums; }
.idv-v-cmp i { width: 56px; height: calc(var(--h) * 80px); border-radius: var(--r-8) var(--r-8) var(--r-2) var(--r-2); background: var(--c-idv-lime); }
.idv-v-cmp i.is-his { background: var(--c-grey-464646); }
.idv-v-chips { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.idv-v-chips span { display: inline-flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-12); border-radius: var(--r-pill); background: var(--c-bg); box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-2c2c2d);
  font-size: var(--fs-14); color: var(--c-grey-e6e9f3); }
.idv-v-chips .idv-ico { width: 14px; height: 14px; color: var(--c-idv-lime); }
.idv-v-chips .is-new { background: var(--c-idv-lime); color: var(--c-idv-ink); font-weight: var(--fw-bold); box-shadow: 0 8px 24px -8px var(--c-idv-lime-22); }

/* ===== the stress test ===== */
.idv-tbl { margin-top: var(--sp-32); overflow-x: auto; border-radius: var(--r-16); border: var(--bw-1) solid var(--c-grey-2c2c2d); -webkit-overflow-scrolling: touch; }   /* the outline lives on the wrapper only; overflow clips the cells to its radius */
.idv-tbl table { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.idv-tbl th, .idv-tbl td { padding: var(--sp-20) var(--sp-24); text-align: left; white-space: nowrap; border-bottom: var(--bw-1) solid var(--c-grey-1b1b1c); }   /* every column left-aligned: values start under their header */
.idv-tbl thead th { padding-block: var(--sp-16); background: var(--c-idv-lime); font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--fs-12); letter-spacing: var(--pg-label-ls); text-transform: uppercase; color: var(--c-idv-ink); border-bottom: 0; }
.idv-tbl .idv-th-rate { width: 32%; }
.idv-tbl thead th:first-child, .idv-tbl tbody th { position: sticky; left: 0; z-index: 1; }
.idv-tbl tbody th { background: var(--c-bg); }
.idv-tbl tbody th { font-weight: var(--fw-semibold); font-size: var(--fs-18); color: var(--c-white); vertical-align: middle; }
.idv-tbl thead th:first-child { background: var(--c-idv-lime); }
.idv-tbl td { font-size: var(--fs-18); color: var(--c-white-90); vertical-align: middle; }
.idv-tbl tbody tr:last-child > * { border-bottom: 0; }
.idv-tbl tbody tr { transition: background-color var(--dur-hover) var(--ease-out); }
@media (hover: hover) {
  .idv-tbl tbody tr:hover > * { background: var(--c-grey-19191a); }
  .idv-tbl tbody tr:hover > :first-child { border-radius: var(--r-12) 0 0 var(--r-12); }
  .idv-tbl tbody tr:hover > :last-child { border-radius: 0 var(--r-12) var(--r-12) 0; }
}
.idv-tbl tbody tr > * { transition: background-color var(--dur-hover) var(--ease-out); }
.idv-ride { display: inline-flex; align-items: center; gap: var(--sp-10); }
.idv-sub { display: block; margin-top: var(--sp-4); font-weight: var(--fw-regular); font-size: var(--fs-14); color: var(--c-white-70); }
.idv-rtag { white-space: nowrap; padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill); font-weight: var(--fw-bold); font-size: var(--fs-11); line-height: var(--lh-150); letter-spacing: 0.06em; text-transform: uppercase; }
.idv-rtag--c { background: var(--c-idv-lime-14); color: var(--c-idv-lime); }
.idv-rtag--w { background: var(--c-idv-red-14); color: var(--c-idv-red-soft); }
.idv-rbar { display: grid; grid-template-columns: var(--idv-rbar-w) auto; justify-content: start; align-items: center; gap: var(--sp-16); }   /* the bar first, then the value, both from the column's left edge */
.idv-rbar__tr { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--c-grey-232324); }
.idv-rbar__tr i { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: var(--r-pill); background: var(--c-grey-e6e9f3); }
.idv-rbar__tr::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: calc(23.2 / 80 * 100%); border-left: var(--bw-2) dashed var(--c-grey-8e8e8e); }
.idv-rbar b { font-weight: var(--fw-bold); }
.idv-rbar--hl i { background: var(--c-idv-lime); } .idv-rbar--hl b { color: var(--c-idv-lime); }
.idv-rbar--lo i { background: var(--c-idv-red); } .idv-rbar--lo b { color: var(--c-idv-red-soft); }
.idv-tlegend { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24); margin-top: var(--sp-16); font-size: var(--fs-14); color: var(--c-grey-8e8e8e); }
.idv-tlegend span { display: inline-flex; align-items: center; gap: var(--sp-8); }
.idv-tlegend__floor { width: var(--sp-16); border-top: var(--bw-2) dashed var(--c-grey-8e8e8e); }
.idv-hl { color: var(--c-idv-lime); } .idv-lo { color: var(--c-idv-red-soft); }
.idv-verdicts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); margin-top: var(--sp-40); }
.idv-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-24); border-radius: var(--r-16); background: var(--c-card-2); border: var(--bw-1) solid var(--c-grey-2c2c2d); }
.idv-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c-idv-lime); }   /* the accent bar, clipped by the card's own radius */
.idv-card--blind::before { background: var(--c-idv-red); }
.idv-k--held { color: var(--c-idv-lime); } .idv-k--blind { color: var(--c-idv-red-soft); }
.idv-card > p:not(.idv-k):not(.idv-card__take) { font-size: var(--fs-18); line-height: var(--lh-160); color: var(--c-grey-8e8e8e); }
.idv-card__take { margin-top: auto; padding-top: var(--sp-12); font-weight: var(--fw-semibold); font-size: var(--fs-18); line-height: var(--lh-150); color: var(--c-idv-lime); }

.idv-sim { display: flex; flex-direction: column; gap: var(--sp-20); padding: var(--sp-24); border-radius: var(--r-16); background: var(--c-card-2); }
.idv-sim__leg { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-20); font-size: var(--fs-14); color: var(--c-grey-8e8e8e); }
.idv-sim__leg span { display: inline-flex; align-items: center; gap: var(--sp-8); }
.idv-sw { width: 12px; height: 12px; border-radius: 3px; }
.idv-sw--avg { background: var(--c-idv-red); } .idv-sw--med { background: var(--c-idv-lime); }
.idv-sw--line { width: 0; height: 14px; border-radius: 0; border-left: var(--bw-2) dashed var(--c-grey-e6e9f3); }
.idv-bars { display: flex; flex-direction: column; gap: var(--sp-10); }
.idv-bars__head, .idv-bars__r { display: grid; grid-template-columns: var(--idv-bars-k) minmax(0, 1fr) var(--idv-bars-v) var(--idv-bars-read); }
.idv-bars__head { gap: var(--sp-12); font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--fs-11); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-grey-8e8e8e); }
.idv-bars__try { margin-top: var(--sp-8); font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--pg-label-fs); letter-spacing: var(--pg-label-ls); text-transform: uppercase; }
.idv-bars__try--mean { color: var(--c-idv-red-soft); } .idv-bars__try--med { color: var(--c-idv-lime); }
.idv-bars__read { display: flex; }
.idv-read { display: inline-flex; align-items: center; gap: var(--sp-4); height: var(--idv-kind-h); padding: 0 var(--sp-8); border-radius: var(--r-pill); font-weight: var(--fw-bold); font-size: var(--fs-12); }
.idv-read--bad { background: var(--c-idv-red-14); color: var(--c-idv-red-soft); } .idv-read--ok { background: var(--c-idv-lime-14); color: var(--c-idv-lime); }
.idv-bars__r { display: grid; grid-template-columns: var(--idv-bars-k) minmax(0, 1fr) var(--idv-bars-v) var(--idv-bars-read); gap: var(--sp-12); align-items: center; font-variant-numeric: tabular-nums; transition: opacity 0.3s var(--ease-out); }
.idv-bars__r[data-on="0"] { opacity: 0.28; }
.idv-bars__k { font-size: var(--fs-14); color: var(--c-grey-8e8e8e); }
.idv-bars__t { position: relative; height: 28px; overflow: hidden; border-radius: 6px; background: var(--c-bg); }
.idv-bars__t i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; background: var(--c-idv-red); transition: width 0.6s var(--pg-ease); }
.idv-bars__r.is-med .idv-bars__t i { background: var(--c-idv-lime); }
.idv-bars__t::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(45 / 80 * 100%); border-left: var(--bw-2) dashed var(--c-grey-e6e9f3); opacity: 0.7; }
.idv-bars__v { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-white-90); font-variant-numeric: tabular-nums; }
.idv-sim__read { min-height: 3.2em; font-size: var(--fs-18); line-height: var(--lh-160); color: var(--c-white); }
.idv-sim__ctrl { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.idv-sim__prompt { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-12); font-size: var(--fs-14); line-height: var(--lh-150); color: var(--c-grey-8e8e8e); }
.idv-sim__prompt b { font-weight: var(--fw-semibold); color: var(--c-idv-lime); font-variant-numeric: tabular-nums; }
.idv-cta__arrow { display: inline-flex; }
.idv-cta--nudge.is-waiting .idv-cta__arrow { animation: idv-nudge 2.2s var(--ease-out) infinite; }
@keyframes idv-nudge { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(var(--sp-6)); } 90% { transform: translateX(0); } }
.idv-bars.is-waiting .idv-bars__t { background: linear-gradient(100deg, var(--c-bg) 30%, var(--c-grey-1b1b1c) 50%, var(--c-bg) 70%) 0 0 / 300% 100%; animation: idv-shimmer 2.4s linear infinite; }
@keyframes idv-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.idv-band__in { max-width: var(--page-w); margin: 0 auto; padding: var(--sp-100) var(--page-margin); display: flex; flex-direction: column; align-items: center; gap: var(--sp-20); text-align: center; }
.idv-band__k { font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--fs-14); letter-spacing: var(--pg-label-ls); text-transform: uppercase; }
.idv-band__p { max-width: var(--idv-band-w); font-weight: var(--fw-bold); font-size: var(--fs-r-mh-quote); line-height: var(--lh-tw-120); letter-spacing: -0.02em; text-wrap: balance; }
.cs-page--indrive > .idv-band { margin-top: var(--sp-100); }
.cs-page--indrive > .idv-ch--after-band { margin-top: var(--sp-80); }
.idv-split--rows { margin-top: 0; }
.idv-krows { margin: 0; border-top: var(--bw-1) solid var(--c-grey-232324); }
.idv-krow { display: grid; grid-template-columns: var(--idv-krow-k) minmax(0, 1fr); gap: var(--sp-24); padding: var(--sp-24) 0; border-bottom: var(--bw-1) solid var(--c-grey-232324); align-items: baseline; }
.idv-krow dt { color: var(--c-grey-8e8e8e); }
.idv-krow dd { margin: 0; font-size: var(--fs-r-body-20); line-height: var(--lh-160); color: var(--c-grey-8e8e8e); }
.idv-krow dd b { font-weight: var(--fw-bold); color: var(--c-white); }
.idv-krows--risk { max-width: var(--cs-content-w); margin-inline: auto; }
.idv-krows--risk .idv-krow { grid-template-columns: var(--idv-krow-k-wide) minmax(0, 1fr); }
.idv-krow--kill { margin-top: var(--sp-16); padding: var(--sp-28) var(--sp-28) var(--sp-28) var(--sp-32); border-bottom: 0; border-radius: 0 var(--r-16) var(--r-16) 0;
  background: var(--c-idv-lime-14); box-shadow: inset var(--sp-6) 0 0 var(--c-idv-lime); align-items: center; }
.idv-krow--kill dt { color: var(--c-idv-lime); }
.idv-krow--kill dd b { font-size: var(--fs-r-h2); line-height: var(--lh-130); }

/* ===== the risk: success signals ===== */
.idv-met__title { margin: var(--sp-100) auto var(--sp-24); max-width: var(--idv-statement-w); text-align: center; }
.idv-met__title span { font-weight: var(--fw-medium); font-size: 0.6em; color: var(--c-grey-8e8e8e); }
.idv-met { list-style: none; margin: 0 auto; padding: 0; max-width: var(--idv-statement-w);   /* the hairlines stay inside the centred content column */ border-top: var(--bw-1) solid var(--c-grey-232324); }
.idv-met li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-40); align-items: center; padding: var(--sp-24) 0; border-bottom: var(--bw-1) solid var(--c-grey-232324); }
.idv-met__head { padding: var(--sp-12) 0 !important; font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--pg-label-fs); letter-spacing: var(--pg-label-ls); text-transform: uppercase; color: var(--c-grey-787878); }
.idv-met__h { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-22); line-height: var(--lh-130); color: var(--c-white); }
.idv-met__l p { margin-top: var(--sp-10); font-size: var(--fs-16); line-height: var(--lh-150); color: var(--c-grey-8e8e8e); }
.idv-met__w { font-size: var(--fs-18); line-height: var(--lh-150); color: var(--c-grey-e6e9f3); }
.idv-met__h .idv-mark { font-size: inherit; }
@media (hover: hover) { .idv-q:hover { transform: translateY(-4px); } }

/* ===== the response ===== */
.idv-links { display: flex; flex-wrap: wrap; gap: var(--sp-12); margin-top: var(--sp-8); }
/* one post-performance card */
.idv-li { overflow: hidden; border-radius: var(--r-16); background: var(--c-card-2); border: var(--bw-1) solid var(--c-grey-2c2c2d); }
.idv-li__head { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-20) var(--sp-24); border-bottom: var(--bw-1) solid var(--c-grey-2c2c2d); font-size: var(--fs-14); color: var(--c-grey-8e8e8e); }
.idv-limark { display: block; width: var(--icon-24); height: var(--icon-24); flex: none; }
.idv-li__head .idv-limark { width: var(--idv-ic-sm); height: var(--idv-ic-sm); }
.idv-react { display: flex; }
.idv-react i { width: var(--idv-ic-sm); height: var(--idv-ic-sm); display: grid; place-items: center; border-radius: 50%; box-shadow: 0 0 0 var(--bw-2) var(--c-card-2); }
.idv-react i + i { margin-left: calc(var(--sp-10) * -1); }
.idv-react svg { width: var(--icon-16); height: var(--icon-16); }
.idv-li__m { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--bw-1); background: var(--c-grey-2c2c2d); }
.idv-li__m li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--sp-16); row-gap: var(--sp-2); align-items: center; padding: var(--sp-24); background: var(--c-card-2); }
.idv-li__i { grid-row: 1 / 3; }
.idv-li__m b { font-weight: var(--fw-bold); font-size: var(--fs-40); line-height: 1; color: var(--c-white); font-variant-numeric: tabular-nums; }
.idv-li__m li > span:last-child { font-size: var(--fs-14); color: var(--c-grey-8e8e8e); }
.idv-li__i--react { width: auto; background: none; }
.idv-li__i { color: var(--c-grey-e6e9f3); background: var(--c-grey-232324); }
/* quote cards: equal heights, the author row pinned to the bottom */
.idv-subopener { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); margin: var(--sp-120) auto 0; text-align: center; }
.idv-subopener__k { justify-content: center; }
.idv-subopener__k .idv-limark { width: var(--icon-20); height: var(--icon-20); }
.idv-subopener__h { font-weight: var(--fw-bold); font-size: var(--fs-r-h2); line-height: var(--lh-130); color: var(--c-grey-e6e9f3); text-wrap: balance; }
.idv-subopener__h em { font-style: italic; color: var(--c-idv-lime); }
.idv-subopener + .idv-quotes { margin-top: var(--sp-40); }
.idv-q__src { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-14); line-height: var(--lh-150); color: var(--c-grey-8e8e8e); }
.idv-q__src .idv-limark { width: var(--icon-16); height: var(--icon-16); }
.idv-q--big .idv-q__src { color: var(--c-idv-ink-muted); }
.idv-quotes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-24); margin-top: var(--sp-80); align-items: stretch; }
.idv-q { position: relative; margin: 0; display: flex; flex-direction: column; gap: var(--sp-20); padding: var(--sp-24); border-radius: var(--r-16);
  background: var(--c-card-2); border: var(--bw-1) solid var(--c-grey-2c2c2d); box-shadow: var(--shadow-idv-card); transition: transform var(--dur-btn) var(--pg-ease); }
.idv-qm { width: var(--sp-40); height: auto; flex: none; color: var(--c-idv-lime); }
.idv-q blockquote { margin: 0; font-size: var(--fs-20); line-height: var(--lh-150); color: var(--c-grey-e6e9f3); }
.idv-q--big { background: var(--c-idv-board); border-color: var(--c-idv-board); box-shadow: var(--shadow-idv-card); }
.idv-q--big .idv-qm, .idv-hardq__l .idv-qm { color: var(--c-idv-ink); }
.idv-q--big blockquote { font-weight: var(--fw-semibold); color: var(--c-idv-ink); }
.idv-who { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-12); margin-top: auto; padding-top: var(--sp-20); border-top: var(--bw-1) solid var(--c-grey-2c2c2d); }
.idv-who__t { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; font-size: var(--fs-14); line-height: var(--lh-150); color: var(--c-grey-8e8e8e); }
.idv-who__t b { font-weight: var(--fw-bold); font-size: var(--fs-16); color: var(--c-white); }
.idv-who__li .idv-limark { width: var(--icon-20); height: var(--icon-20); }
:is(.idv-q--big, .idv-hardq__l) .idv-who { border-top-color: var(--c-idv-line-ink); }
:is(.idv-q--big, .idv-hardq__l) .idv-who__t { color: var(--c-idv-ink-muted); }
:is(.idv-q--big, .idv-hardq__l) .idv-who__t b { color: var(--c-idv-ink); }
:is(.idv-q--big, .idv-hardq__l) .idv-av:not(.idv-av--lime) { background: var(--c-idv-ink); color: var(--c-idv-board); box-shadow: none; }
.idv-q__reply { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-16) var(--sp-20); border-radius: var(--r-16); background: var(--c-bg); border: var(--bw-1) solid var(--c-grey-232324);
  font-size: var(--fs-16); line-height: var(--lh-150); color: var(--c-grey-8e8e8e); }
.idv-q__rk { display: inline-flex; align-items: center; gap: var(--sp-6); font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--pg-label-fs); letter-spacing: var(--pg-label-ls); text-transform: uppercase; color: var(--c-idv-lime); }
/* the hardest question */
.idv-hardq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bw-1); overflow: hidden; margin-top: var(--sp-24); border-radius: var(--r-16); background: var(--c-grey-2c2c2d); align-items: stretch; }
.idv-hardq > div { display: flex; flex-direction: column; gap: var(--sp-20); padding: var(--sp-40); }
.idv-hardq__l { background: var(--c-idv-board); color: var(--c-idv-ink); }
.idv-hardq__r { background: var(--c-card-2); }
.idv-k--tag { align-self: flex-start; padding: var(--sp-4) var(--sp-8); border-radius: var(--r-2); background: var(--c-idv-lime); color: var(--c-idv-ink); }
.idv-hardq blockquote { margin: 0; font-weight: var(--fw-semibold); font-size: var(--fs-r-h2); line-height: var(--lh-130); text-wrap: pretty; }
.idv-hardq__head .idv-i { width: var(--icon-20); height: var(--icon-20); }
.idv-hardq__head { display: flex; align-items: center; gap: var(--sp-10); font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--fs-14); letter-spacing: var(--pg-label-ls); text-transform: uppercase; color: var(--c-idv-lime); }
.idv-hardq__first { font-weight: var(--fw-semibold); font-size: var(--fs-20); line-height: var(--lh-150); color: var(--c-white); }
.idv-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.idv-points li { display: grid; grid-template-columns: var(--idv-ic-sm) minmax(0, 1fr); gap: var(--sp-16); padding: var(--sp-16) 0; border-top: var(--bw-1) solid var(--c-grey-232324); }
.idv-points__n { width: var(--idv-ic-sm); height: var(--idv-ic-sm); display: grid; place-items: center; border-radius: 50%; background: var(--c-idv-lime-14); color: var(--c-idv-lime);
  font-weight: var(--fw-bold); font-size: var(--fs-16); line-height: 1; font-variant-numeric: tabular-nums; }
.idv-points__h { margin-bottom: var(--sp-4); font-weight: var(--fw-bold); font-size: var(--fs-18); line-height: var(--lh-130); color: var(--c-white); }
.idv-points p:not(.idv-points__h) { font-size: var(--fs-16); line-height: var(--lh-160); color: var(--c-grey-8e8e8e); }
/* comment pills: the homepage Reviews marquee (reviews.js / reviews.css); hover pauses here, phones swipe */
:root:has(.cs-page--indrive) { --rv-mq-slow: 0.001; }
.idv-minis { margin-top: var(--sp-40); }
.idv-minis .idv-minis__row { --rv-dur: var(--idv-mini-dur); }
.idv-mini { flex: none; display: inline-flex; align-items: center; gap: var(--sp-12); margin: 0 var(--sp-16) 0 0; padding: var(--sp-8) var(--sp-16) var(--sp-8) var(--sp-8); border-radius: var(--r-pill);
  background: var(--c-card-2); box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-2c2c2d); font-size: var(--fs-14); line-height: var(--lh-150); color: var(--c-grey-8e8e8e); white-space: nowrap; }
.idv-mini .idv-av { width: var(--idv-av-mini); height: var(--idv-av-mini); font-size: var(--fs-11); }
.idv-mini b { font-weight: var(--fw-semibold); color: var(--c-white); }
.idv-mini__r { display: grid; place-items: center; width: var(--sp-28); height: var(--sp-28); border-radius: 50%; background: var(--c-idv-lime-14); color: var(--c-idv-lime); }

/* ===== takeaways (the site's cs-tk component, as Verdance uses it), the lime closing band ===== */
.idv-takeaways .cs-head { text-align: center; max-width: 100%; }   /* round 9 fix: the 860 px head ran past the window below 892 px */
.idv-takeaways .cs-tk__head svg, .idv-takeaways .cs-tk__take { color: var(--c-idv-lime); }   /* the project's accent on the icon and the "Now..." line */   /* the "Now..." line in the project's accent, as Verdance uses its own */
.idv-endband { width: 100vw; margin-left: calc(50% - 50vw); background: var(--c-idv-lime); color: var(--c-idv-ink); }
.idv-endband__in { max-width: var(--idv-hero-w); margin: 0 auto; padding: var(--sp-140) var(--page-margin); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); text-align: center; }
.idv-endband__logo { display: block; height: var(--idv-endlogo-h); width: auto; margin-bottom: var(--sp-8); }
.idv-endband__k { font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--fs-14); letter-spacing: var(--pg-label-ls); text-transform: uppercase; }
.idv-endband__h { font-weight: var(--fw-bold); font-size: var(--fs-r-hero); line-height: var(--lh-tw-120); letter-spacing: -0.025em; text-wrap: balance; }
.idv-endband__h em { font-style: italic; }
.idv-endband__p { max-width: 40ch; font-weight: var(--fw-semibold); font-size: var(--fs-r-body-24); line-height: var(--lh-150); }
.idv-endband__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-12); margin-top: var(--sp-8); }
.idv-inkbtn { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--sp-56); padding: 0 var(--sp-28); border-radius: var(--r-pill); background: var(--c-idv-ink); color: var(--c-idv-lime);
  font-weight: var(--fw-bold); font-size: var(--fs-18); text-decoration: none; transition: transform var(--dur-btn) ease; }
.idv-inkbtn--line { padding-left: var(--sp-8); background: transparent; color: var(--c-idv-ink); box-shadow: inset 0 0 0 var(--bw-2) var(--c-idv-ink); }
.idv-inkbtn__li { width: var(--sp-40); height: var(--sp-40); display: grid; place-items: center; border-radius: 50%; background: var(--c-white); }
.idv-inkbtn__li .idv-limark { width: var(--icon-20); height: var(--icon-20); }
@media (hover: hover) { .idv-inkbtn:hover { transform: translateY(-2px); } }
.idv-endband :is(a):focus-visible { outline: var(--bw-2) solid var(--c-idv-ink) !important; outline-offset: var(--sp-4); }
.idv-endband__small { font-size: var(--fs-14); opacity: 0.75; }
.cs-page--indrive > .idv-endband { margin-top: var(--idv-section-gap); }
.cs-page--indrive > .cs-nextproj { margin-top: var(--sp-100); }   /* the case studies' gap before Next Project (Verdance, MindHYVE: 100) */

/* ===== tablet (< 1190) ===== */
@media (max-width: 1189.98px) {
  .cs-page--indrive > * + * { margin-top: var(--sp-100); }
  .idv-split, .idv-ba, .idv-scrolly { gap: var(--sp-48); }
  .idv-gap-xl { margin-top: var(--sp-100); }
  .idv-kv > div { grid-template-columns: var(--idv-chipcol-t) minmax(0, 1fr); }
  .idv-strip li { padding: var(--sp-20); }
  .idv-split--maths { grid-template-columns: minmax(0, 1fr); }
  .idv-why { grid-template-columns: var(--idv-why-n-t) minmax(0, 1fr); }
  .idv-why__vis { grid-column: 2; justify-content: flex-start; min-height: 0; }
  .idv-why__n { font-size: var(--fs-72); }
  .idv-pat__row { grid-template-columns: var(--idv-pat-k-t) minmax(0, 1fr) var(--sp-48) minmax(0, 1fr); gap: var(--sp-16); }
  .idv-lens--before { display: none; }
  .idv-solve__in { padding-block: var(--sp-100); }
  .idv-cover__row { inset: var(--sp-40) var(--sp-32); }
  .idv-anno { gap: var(--sp-32); padding: var(--sp-48) var(--sp-24); grid-template-columns: minmax(0, 1fr) var(--idv-ph-w) minmax(0, 1fr); }
  .idv-anno__v { font-size: var(--fs-16); }
  .cs-page--indrive .cs-meta { width: 100%; }
  .cs-page--indrive .cs-meta__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24) var(--sp-32); }   /* as Editor / MTA / Team Workspace */
  .idv-cmp { grid-template-columns: minmax(0, 1fr); }
  .idv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-16); }
  .idv-step:nth-child(2)::before, .idv-step:nth-child(2)::after { display: none; }
  .idv-lens__line { font-size: var(--fs-20); }
  .idv-tbl th, .idv-tbl td { padding-inline: var(--sp-16); }
  .idv-rbar { gap: var(--sp-12); }
  .idv-tbl table { min-width: 760px; }
  .cs-page--indrive .cs-meta__value { font-size: var(--fs-r-body-24); }
}

/* ===== the sticky story becomes a stack (< 1000, and with reduced motion) ===== */
@media (max-width: 999.98px) {
  .idv-split, .idv-ba, .idv-solve__in, .idv-quotes, .idv-hardq, .idv-cmp { grid-template-columns: minmax(0, 1fr); }
  /* Finding 03: numbered pins on the screen, the numbered cards under it (no leader lines) */
  .idv-anno { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-12) var(--sp-16); padding: var(--sp-48) var(--sp-24) var(--sp-24); }
  .idv-anno__phone { grid-column: 1 / -1; order: -1; justify-self: center; width: min(var(--idv-ph-w), 100%); margin-bottom: var(--sp-24); }
  .idv-anno__lines { display: none; }
  .idv-note--q { display: none; }
  .idv-anno__pin { display: grid; }
  .idv-anno__col { justify-content: flex-start; gap: var(--sp-12); }
  .idv-anno__col--l, .idv-anno__col--r { align-items: stretch; }
  .idv-anno__col--l { text-align: left; }
  .idv-anno__col--l .idv-anno__item { flex-direction: row; }
  .idv-anno__item { width: auto; max-width: none; }
  .idv-anno__item--missing .idv-anno__n { display: grid; }
  .idv-anno__item--missing .idv-anno__ic { display: none; }
  .idv-krow, .idv-krows--risk .idv-krow { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .idv-met li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); }
  .idv-met__head { display: none !important; }
  /* the takeaways: Verdance's stack (cs-tk, one column, auto height) */
  .idv-takeaways .cs-tk-rows { width: 100%; align-items: stretch; }
  .idv-takeaways .cs-tk-row { flex-direction: column; }
  .idv-takeaways .cs-tk { width: auto; height: auto; }
  .idv-game__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .idv-scrolly { display: block; }
  .idv-stick { display: none; }
  .idv-beat { min-height: 0; opacity: 1; padding-block: var(--sp-32); }
  .idv-beat__board { display: block; margin-top: var(--sp-8); }
  .idv-beat__board .idv-board__stage { padding-top: var(--sp-64); }
  .idv-beat__board .idv-shot--wide { margin: 0 0 calc(var(--idv-pin) + var(--idv-pin-gap) + var(--sp-16)); }
  .idv-beat__board .idv-shot--wide img { width: 100%; }
  .idv-beat__board .idv-shot--wide:not(:has(.idv-pin)) { margin-bottom: var(--sp-24); }
}
@media (prefers-reduced-motion: reduce) {
  .idv-beat { transition: none; }   /* round 12: reduced motion keeps the pinned board; the screens swap at once */
  .idv-frame, .idv-bars__t i, .idv-bars__r, .idv-ring, .idv-cta, .idv-gbtn, .idv-segctl button, .idv-seg button, .idv-q, .idv-flip__layer, .idv-inkbtn { transition: none; }
  .idv-live i, .idv-live__glow { display: none; }
  .idv-cta--nudge.is-waiting .idv-cta__arrow, .idv-bars.is-waiting .idv-bars__t { animation: none; }
  /* the game: the faces swap in place, no flip */
  .idv-gcard__inner { transform: none !important; transition: none; }
  .idv-gcard__face { transition: none; }
  .idv-gcard__back { transform: none; }
  /* the comment pills: no marquee, they wrap */
  .idv-minis { width: 100%; margin-left: 0; -webkit-mask-image: none; mask-image: none; }
  .idv-minis .idv-minis__row { width: auto; flex-wrap: wrap; gap: var(--sp-12); transform: none !important; cursor: auto; }
  .idv-mini { margin: 0; white-space: normal; }
  .idv-mini[inert] { display: none; }
}

/* ===== phone (< 768) ===== */
@media (max-width: 767.98px) {
  .cs-page--indrive { padding-top: calc(var(--cs-nav-h) + var(--sp-40)); }
  .cs-page--indrive > * + * { margin-top: var(--sp-80); }
  .idv-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idv-strip { gap: var(--sp-8); }
  .idv-strip li { padding: var(--sp-16); }
  .idv-strip li:last-child { grid-column: 1 / -1; }
  .idv-cover__logo { left: var(--sp-16); top: var(--sp-12); height: var(--idv-logo-h-p); }
  .idv-cover__row { padding-top: var(--sp-48) !important; }
  .idv-hero__text { gap: var(--sp-20); }
  .idv-chip { white-space: normal; height: auto; min-height: var(--idv-chip-h); padding-block: var(--sp-6); }
  .idv-kv--chips dt { justify-self: start; }
  .idv-why { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
  .idv-why__vis { grid-column: auto; }
  .idv-why__n { font-size: var(--fs-56); }
  .idv-pat__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .idv-pat .idv-pat__row.idv-pat__row--head { display: none; }
  .idv-pat__ar .idv-arrow { transform: rotate(90deg); width: var(--sp-24); }
  .idv-krow--kill { padding: var(--sp-20); }
  .idv-endband__in { padding-block: var(--sp-80); }
  .idv-inkbtn { width: 100%; justify-content: center; }
  .idv-game--rate .idv-game__grid { padding: var(--sp-8); border-radius: var(--r-30); }
  .idv-ledger th, .idv-ledger td { font-size: var(--fs-14); }
  .idv-cover { aspect-ratio: auto; }
  .idv-cover__row { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); padding: var(--sp-24) var(--sp-12); }
  .idv-cover__item { height: auto; gap: var(--sp-10); }
  .idv-cover__item img { width: 100%; height: auto; }
  .idv-cover__lbl { padding: var(--sp-4) var(--sp-8); font-size: var(--fs-10); letter-spacing: 0.06em; }
  .idv-game__grid { grid-template-columns: minmax(0, 1fr); }
  .idv-gcard__face { padding: var(--sp-16); }
  .idv-gcard__fare { font-size: var(--fs-40); }
  .idv-gcard__sumt { font-size: var(--fs-22); }
  .idv-gpanel > div { padding: var(--sp-20); }
  .idv-steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--idv-step-gap); }
  .idv-step:not(:last-child)::before { top: calc(100% + var(--sp-8)); left: 50%; width: var(--bw-1); height: calc(var(--idv-step-gap) - var(--sp-16)); }
  .idv-steps.is-broken .idv-step:not(:last-child)::before { background: repeating-linear-gradient(180deg, var(--c-idv-red) 0 var(--sp-4), transparent 0 var(--sp-8)); }
  .idv-step:not(:last-child)::after { top: calc(100% + var(--idv-step-gap) - var(--sp-8) - var(--sp-6)); left: 50%; margin: 0 0 0 calc(var(--sp-6) / -2); transform: rotate(135deg); }
  .idv-step:nth-child(2)::before, .idv-step:nth-child(2)::after { display: block; }
  .idv-steps.is-broken .idv-step:first-child::after { top: calc(100% + var(--idv-step-gap) / 2 - var(--sp-24) / 2); left: 50%; margin: 0 0 0 calc(var(--bw-2) / -2); transform: rotate(60deg); }
  .idv-maths { padding: var(--sp-20); }
  .idv-segctl { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-24); }
  .idv-segctl button { padding: 0 var(--sp-12); }
  .idv-anno { grid-template-columns: minmax(0, 1fr); padding: var(--sp-40) var(--sp-12) var(--sp-16); }
  .idv-li__m { grid-template-columns: minmax(0, 1fr); }
  .idv-li__m li { padding: var(--sp-20); }
  .idv-li__m b { font-size: var(--fs-32); }
  .idv-q blockquote { font-size: var(--fs-18); }
  .idv-hardq__first { font-size: var(--fs-18); }
  .idv-kv > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .idv-opener { gap: var(--sp-12); margin-bottom: var(--sp-48); }
  .idv-bignum { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
  .idv-bignum__vs { justify-self: center; }
  .idv-split--maths .idv-steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--idv-step-gap); }
  .idv-verdicts { grid-template-columns: minmax(0, 1fr); }
  .idv-sim, .idv-card { padding: var(--sp-24); }
  .idv-lens { padding: var(--sp-24); } .idv-lens__fare { font-size: var(--fs-36); } .idv-lens__line { font-size: var(--fs-18); }
  .idv-lens__ann { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); }
  .idv-hardq > div { padding: var(--sp-24); }
  .idv-q { padding: var(--sp-24); }
  .idv-q--big blockquote, .idv-hardq blockquote { font-size: var(--fs-18); }
  .idv-board__stage { padding: var(--sp-64) var(--sp-8) 0; }
  .idv-board--pad .idv-board__stage { padding-bottom: var(--sp-24); }
  .idv-legend { padding: var(--sp-16) var(--sp-20) var(--sp-20); grid-template-columns: minmax(0, 1fr); }
  .idv-cmp__row { padding: var(--sp-32) var(--sp-8) 0; gap: 0; }
  .idv-cmp__row--mid { padding-bottom: var(--sp-32); }
  .idv-cmp .idv-shot--phone { width: min(220px, 100%); }
  .idv-cmp__head { padding: var(--sp-12) var(--sp-16); min-height: 56px; }
  .idv-bars__head, .idv-bars__r { grid-template-columns: var(--idv-bars-k-p) minmax(0, 1fr) var(--idv-bars-v) var(--idv-bars-read); }
  .idv-solve__in, .idv-band__in { padding-block: var(--sp-80); }
  .idv-scope { display: flex; align-items: flex-start; }
  .cs-page--indrive .cs-meta { padding: var(--cs-card-pad-phone); }
  .cs-page--indrive .cs-meta__row { grid-template-columns: 1fr; }
  .idv-tbl tbody th { box-shadow: 8px 0 12px -8px var(--c-black); }
  .idv-tbl tbody th { width: 176px; min-width: 176px; white-space: normal; font-size: var(--fs-16); }
  .idv-ride { flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); }
  .idv-tbl th, .idv-tbl td { padding: var(--sp-16) var(--sp-12); font-size: var(--fs-16); }
  .idv-tbl table { min-width: 640px; }
  .idv-num { line-height: 1; }
}


/* ===== the study in numbers, the pattern numbers, the table caption, the summary's not-played line, the swap fade (round 8) ===== */
.idv-strip__k { justify-content: center; margin-bottom: var(--sp-24); }
.idv-pat__k b { display: inline-block; min-width: var(--sp-28); margin-right: var(--sp-10); font-weight: var(--fw-bold); }
.idv-tbl__cap { margin-top: var(--sp-48); font-size: var(--fs-16); line-height: var(--lh-150); color: var(--c-grey-8e8e8e); text-align: left; }
.idv-tbl__cap + .idv-tbl { margin-top: var(--sp-24); }
.idv-sumcol__np { font-size: var(--fs-14); line-height: var(--lh-150); color: var(--c-idv-ink); }
.idv-sumcol__np a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-bold); color: var(--c-idv-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.idv-gcard.is-swap .idv-gcard__face { transition: opacity var(--idv-swap) ease, visibility 0s linear var(--idv-swap); }
.idv-gcard.is-swap[data-state="play"] .idv-gcard__front, .idv-gcard.is-swap[data-state="reveal"] .idv-gcard__back, .idv-gcard.is-swap[data-state="sum"] .idv-gcard__sum { transition: opacity var(--idv-swap) ease; }
.idv-gcard.is-swap[data-state="play"] :is(.idv-gcard__back, .idv-gcard__sum), .idv-gcard.is-swap[data-state="reveal"] :is(.idv-gcard__front, .idv-gcard__sum), .idv-gcard.is-swap[data-state="sum"] :is(.idv-gcard__front, .idv-gcard__back) { opacity: 0; }
@media (max-width: 767.98px) { :root { --ph-b: 6px; --ph-r: 28px; } .idv-cover { --ph-b: 4px; --ph-r: 14px; } }

/* ===== round 9 (owner 2026-10-13): Finding 01 as rows, the arrows' homes, the switch label ===== */
.idv-f1 { display: flex; flex-direction: column; gap: var(--idv-section-gap); }
.idv-f1row { display: grid; grid-template-columns: var(--idv-text-max) auto; justify-content: center; gap: var(--sp-80); align-items: center; }   /* round 10: the board follows the phone; text centred against it */
.idv-f1row__text { display: flex; flex-direction: column; gap: var(--sp-48); max-width: var(--idv-text-max); }
.idv-f1row .idv-beat { display: flex; flex-direction: column; gap: var(--sp-16); min-height: 0; padding: 0; opacity: 1; transition: none; }
.idv-f1row .idv-beat > p { font-size: var(--fs-r-body-20); line-height: var(--lh-160); color: var(--c-grey-8e8e8e); }
.idv-f1row--stack { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.idv-f1row--stack .idv-f1row__text { justify-self: start; }
.idv-f1row--stack .idv-f1row__text { max-width: var(--idv-text-max); }
.idv-board__stage--start { justify-content: flex-start; }

.idv-board__stage--pair { gap: var(--idv-pair-gap2); }

.idv-v-steps__arrow { position: relative; display: block; margin: var(--sp-12) 0; }
.idv-quiet__t { position: relative; }
.idv-segctl__lbl { position: relative; }
.idv-lens__ann { margin-top: var(--idv-lens-note-h); }
.idv-flip { justify-items: center; }
.idv-flip__layer { align-self: center; }
@media (max-width: 1189.98px) {   /* below the site's wide breakpoint the callouts need the board's full width */
  .idv-f1row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40); }
  .idv-f1row__text { max-width: none; }
  .idv-cmp__row { flex-wrap: wrap; gap: var(--sp-64); }
  /* the takeaways go to one column where Verdance's do (round 9 fix: two 560 px cards ran past a 1024 window) */
  .idv-takeaways .cs-tk-rows { width: 100%; align-items: stretch; }
  .idv-takeaways .cs-tk-row { flex-direction: column; }
  .idv-takeaways .cs-tk { width: auto; height: auto; }
}
@media (max-width: 767.98px) {
  :root { --idv-board-pad: 24px; --idv-ph-w: min(280px, calc(100vw - 2 * var(--page-margin) - 2 * var(--idv-board-pad) - 2 * (var(--idv-pin) + var(--idv-pin-gap)))); }
  .idv-note--lens { display: none; }   /* no room under the line on a phone */
  .idv-note--in .idv-note__t { font-size: 11px !important; padding: var(--sp-4) var(--sp-8); }
  .idv-game--rate .idv-game__grid { grid-template-columns: minmax(0, 1fr); }   /* round 9 fix: the rematch kept two columns on phones (its panel was 0 px wide) */   /* no room beside a phone on a phone: the numbered pins and the legend carry it */
  .idv-lens__ann { margin-top: var(--sp-24); }
  .idv-board__stage--end { padding-right: var(--idv-board-pad); }
  .idv-board__stage--pair { flex-direction: column; gap: var(--sp-40); }
  .idv-cover__item .idv-phone, .idv-cover__item .idv-phone__scr { height: auto; width: 100%; }
}

/* ===== round 11 (owner 2026-10-13): final phone sizes, boards that fit their content, the hover ===== */
.idv-board__stage--pair .idv-phone, .idv-cmp__row .idv-phone { width: min(var(--idv-ph-w2), var(--ph-maxw, 100%)); }
.idv-shot:not(:has(.idv-pin)) { margin: 0; }   /* no pins beside it: no room kept for them */
.idv-cmp__row { gap: var(--idv-pair-gap2); padding: var(--idv-board-pad); }
.idv-board--pad .idv-board__stage { padding-bottom: var(--idv-board-pad); }
@media (min-width: 1190px) { .idv-cmp { width: fit-content; max-width: 100%; margin-inline: auto; grid-template-columns: auto auto; } .idv-cmp .idv-shot--map { width: var(--idv-map-w); } .idv-cmp__row--mid { padding: var(--idv-board-pad) var(--sp-48); } }
.idv-board--pad, .idv-ba__board { width: fit-content; max-width: 100%; justify-self: center; }
.idv-map-over { position: absolute; inset: 0; pointer-events: none; container-type: inline-size; }
/* the hover: there was never one on the boards or phones (git history of css/ and js/ from the first commit), and Verdance's media have
   none (measured); so the page's own card hover, the quote cards' 4 px lift on the same timing, moves the phones. No movement under
   reduced motion. */
.idv-phone { transition: transform var(--dur-btn) var(--pg-ease), box-shadow var(--dur-btn) var(--pg-ease); }
@media (hover: hover) {
  :is(.idv-board, .idv-cmp__half, .idv-cover__item):hover .idv-phone { transform: translateY(var(--idv-lift)); box-shadow: 0 0 0 var(--bw-1) var(--c-idv-ink-15), var(--shadow-idv-phone-hover); }
}
@media (prefers-reduced-motion: reduce) { .idv-phone { transition: none; } :is(.idv-board, .idv-cmp__half, .idv-cover__item):hover .idv-phone { transform: none; } }
.idv-cmp .idv-shot:has(.idv-pin--r):not(:has(.idv-pin--l)) { margin: 0 calc(var(--idv-pin) + var(--idv-pin-gap)) 0 0; }   /* room for the pin on its own side only */

/* ===== round 12 (owner 2026-10-13): sizes from the window (rule A), the sticky story back, labels outside the phone ===== */
/* Rule A: every board fits one window below the nav with 40 px above and below: available = 100vh - 85 - 80. A board = 64 px top
   (its chip row) + the phone + 48 px bottom, so the tallest screenshot on the page (the driver offer, 2.163 tall per wide) sets one
   phone width for every phone: screen = (available - 112 - 20 bezel) / 2.163. Every screenshot spans the full phone width, so one
   width = one UI scale on every phone. */
.idv-phone, .idv-board__stage--pair .idv-phone, .idv-cmp__row .idv-phone, .idv-cover__item .idv-phone { width: var(--idv-ph-w); }
.idv-board__stage { padding: var(--idv-board-top) var(--idv-board-pad) var(--idv-board-bot); }
.idv-board__stage--note { padding-right: calc(var(--idv-board-pad) + var(--idv-note-zone)); }   /* the label zone beside the phone */
.idv-board__stage--pair { gap: var(--idv-pair-gap3); }
.idv-legend--side { list-style: none; width: var(--idv-legend-side-w); flex: none; align-self: center; margin: 0 0 0 var(--sp-24); padding: 0; display: flex; flex-direction: column; gap: var(--sp-12); background: none; border: 0; }
/* Finding 01: the pinned board */
.idv-scrolly { grid-template-columns: minmax(0, 1fr) var(--idv-f1-board-w); gap: var(--sp-64); }
.idv-stick { top: calc(var(--cs-nav-h) + var(--sp-40)); height: var(--idv-avail); }
.idv-frame .idv-board__stage { height: 100%; display: flex; justify-content: center; align-items: center; }
.idv-frame .idv-legend--side { margin-left: var(--sp-24); }
/* the hero cover: the same phone, the same rule */
.idv-cover { aspect-ratio: auto; padding: var(--sp-16) var(--sp-64) var(--idv-board-bot); }
.idv-cover__row { position: static; inset: auto; display: flex; justify-content: space-evenly; align-items: flex-start; }
.idv-cover__item { gap: var(--sp-16); }
/* Finding 02: two boards, phone against phone, each one window tall; the heads sit in the chip row */
.idv-cmp { display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); width: auto; margin: 0; background: none; border-radius: 0; overflow: visible; }
.idv-cmp__board { width: fit-content; max-width: 100%; }
.idv-cmp__head { position: absolute; z-index: 2; top: var(--sp-12); left: var(--sp-16); right: var(--sp-16); min-height: var(--sp-40); padding: 0; border: 0; }
.idv-board--pad, .idv-ba__board { width: fit-content; max-width: 100%; justify-self: center; }
.idv-ba__board { padding: var(--idv-board-top) calc(var(--idv-board-pad) + var(--idv-note-zone)) var(--idv-board-bot) var(--idv-board-pad); }
.idv-anno { padding: var(--idv-board-pad); }
/* the arrows: a 3 px lime line on a 6 px ink underlay (the same path); the label is plain ink text on the board */
.idv-note--out { color: var(--c-idv-ink); }
.idv-note--out .nu path[stroke] { stroke: var(--c-idv-ink); stroke-width: var(--nswu); }
.idv-note--out .nt path[stroke] { stroke: var(--c-idv-lime); stroke-width: var(--nsw); }
.idv-note--out .idv-note__t { font-family: var(--font-figtree); font-weight: var(--fw-semibold); font-size: var(--idv-note-fs); line-height: var(--lh-130); color: var(--c-idv-ink); white-space: nowrap; }
@media (max-width: 999.98px) {
  .idv-scrolly { display: block; }
  .idv-beat__board .idv-board__stage { padding-top: var(--idv-board-top); }
}
@media (max-width: 767.98px) {
  .idv-note--out { display: none; }   /* no room beside a phone on a phone */
  .idv-board__stage--note, .idv-ba__board { padding-right: var(--idv-board-pad); }
  .idv-board__stage, .idv-board__stage--pair { flex-wrap: wrap; }
  .idv-legend--side { width: 100%; margin: var(--sp-16) 0 0; }
  .idv-cover { padding: var(--sp-16) var(--sp-12) var(--sp-24); }
}
.idv-legend--first { margin: 0 var(--sp-24) 0 0; }   /* a side legend before the phones (the label zone is on the right) */
@media (max-width: 1189.98px) {   /* round 12: below the wide breakpoint a board's legend takes its own line */
  .idv-cmp__board .idv-board__stage { flex-wrap: wrap; justify-content: center; row-gap: var(--sp-24); }
  .idv-cmp__board .idv-legend--side { width: 100%; margin: 0; }
}
@media (max-width: 767.98px) {   /* round 12: the cover's three phones share the width on a phone */
  .idv-cover__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .idv-cover__item .idv-phone { width: 100%; }
  .idv-cmp__board { width: 100%; }
}
@media (max-width: 1189.98px) { .idv-split:has(.idv-board--pad) { grid-template-columns: minmax(0, 1fr); } }   /* round 12: the offer-gone board needs the full width for its label zone */

/* ===== round 13 (owner 2026-10-13): the approved screen layout (design/prototypes/indrive/screen-test-r13.html, section 1) ===== */
/* every phone holds a complete screen (tools/make-images-indrive.py RAW); one width for every phone on the page */
:root { --ph-b: 9px; --ph-r: 44px; --idv-ph-w: var(--idv-ph-w13); }
.idv-phone, .idv-board__stage--pair .idv-phone, .idv-cmp__row .idv-phone, .idv-cover__item .idv-phone { width: var(--idv-ph-w); }
.idv-phone { padding: var(--ph-b); border-radius: var(--ph-r); background: var(--c-idv-ink); box-shadow: 0 0 0 1.5px var(--c-idv-phone-edge) inset, var(--shadow-idv-phone13); }
:is(.idv-board, .idv-cover, .idv-cmp) .idv-phone { box-shadow: 0 0 0 1.5px var(--c-idv-phone-edge) inset, var(--shadow-idv-phone13); }
.idv-phone__scr { border-radius: 35px; }
.idv-phone__img img { width: 100%; height: auto; }
.idv-phone__img.is-cut::after { content: none; }
/* rows: text 44 %, board 56 %, 72 px apart, centred */
.idv-scrolly, .idv-ba { grid-template-columns: minmax(0, var(--idv-row-text)) minmax(0, var(--idv-row-board)); gap: var(--idv-row-gap); align-items: center; }
.idv-scrolly { align-items: start; }
.idv-split:has(.idv-board--pad) { grid-template-columns: minmax(0, var(--idv-row-board)) minmax(0, var(--idv-row-text)); gap: var(--idv-row-gap); }
.idv-beats, .idv-ba__text, .idv-split:has(.idv-board--pad) .idv-prose { max-width: var(--idv-row-text-max); }
.idv-beat .idv-h3, .idv-ba__text .idv-pull--sm, .idv-split:has(.idv-board--pad) .idv-lead { font-size: var(--idv-row-h); line-height: var(--idv-row-h-lh); font-weight: var(--fw-bold); letter-spacing: -0.015em; }
.idv-beat > p, .idv-split:has(.idv-board--pad) .idv-prose p:not(.idv-lead):not(.idv-pull) { font-size: var(--idv-row-body); line-height: var(--idv-row-body-lh); }
/* boards: cream, radius 24, padding 56, the label pill 24 in and 22 down; a single phone left of centre (72 px), labels on the right */
.idv-board { border-radius: var(--idv-board13-r); }
.idv-board__cap { left: 24px; top: 22px; height: 30px; display: inline-flex; align-items: center; padding: 0 13px; box-shadow: inset 0 0 0 1.5px var(--c-idv-ink); font-size: 11.5px; letter-spacing: 0.14em; }
.idv-board__stage { padding: var(--idv-board13-pad); }
.idv-board__stage--one, .idv-ba__board { justify-content: flex-start; padding-left: var(--idv-board13-padl); }
.idv-board__stage--pair { gap: var(--idv-pair13-gap); padding-inline: var(--idv-board13-pad); }
.idv-board__stage--note { padding-right: calc(var(--idv-board13-pad) + 200px); }   /* room for the labels on the right */
.idv-stick__board { width: 100%; }
.idv-ba__board { width: 100%; padding: var(--idv-board13-pad) var(--idv-board13-pad) var(--idv-board13-pad) var(--idv-board13-padl); }
.idv-flip { margin: 0; justify-content: start; }
.idv-board--pad { width: 100%; }
.idv-cmp__head { top: 22px; left: 24px; right: 24px; min-height: 30px; }
/* labels and arrows: absolutely positioned from the measured target (js/indrive.js, place()), never by layout */
[data-arw], #why1 { position: relative; }
.idv-lbl { position: absolute; left: 0; top: 0; z-index: 3; font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: var(--idv-lbl-fs); line-height: 1.3; color: var(--c-idv-ink); white-space: nowrap; pointer-events: none; }
svg.idv-arw { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
:is(svg.idv-arw, .idv-anno__lines) path.u, :is(svg.idv-arw, .idv-anno__lines) path.l { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: none; }
:is(svg.idv-arw, .idv-anno__lines) path.u { stroke: var(--c-idv-ink); }
:is(svg.idv-arw, .idv-anno__lines) path.l { stroke: var(--c-idv-lime); }
.idv-flip__layer.is-off ~ .idv-lbl[data-layer] { opacity: 1; }
@media (max-width: 1189.98px) {
  :root { --idv-ph-w: min(268px, calc((var(--idv-avail) - 112px - 18px) / 2.169 + 18px)); }
  .idv-scrolly, .idv-ba, .idv-split:has(.idv-board--pad) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 999.98px) { .idv-scrolly { display: block; } }
@media (max-width: 767.98px) {
  .idv-lbl, svg.idv-arw { display: none; }
  .idv-board__stage--one, .idv-board__stage--note, .idv-ba__board { padding: var(--sp-48) var(--sp-16) var(--sp-24); justify-content: center; }
  .idv-board__stage--pair { padding-inline: var(--sp-16); gap: var(--sp-16); }
  :root { --idv-ph-w: min(268px, calc((100vw - 2 * var(--page-margin) - 48px) / 2)); }
  .idv-beat__board .idv-board__stage--one .idv-phone, .idv-ba__board .idv-phone, .idv-cmp__board .idv-phone, .idv-board--pad .idv-phone { width: min(268px, calc(100vw - 2 * var(--page-margin) - 32px)); }
}
.idv-frame .idv-board__stage--one { justify-content: flex-start; padding-left: var(--idv-board13-padl); }   /* the pinned board too: a single phone left of centre */
@media (max-width: 767.98px) { .idv-cover__item .idv-phone { width: 100%; } }   /* the cover's three phones share a phone-wide row */
/* phones: a marked phrase may wrap, so the bar is drawn per line as a background with the same measured offsets (marks.py):
   from --mk-t below the content box top to --mk-b past its bottom (the content box is 1.2em: Figtree's 0.95 + 0.25) */
@media (max-width: 767.98px) {
  .idv-mark { white-space: normal; padding-bottom: max(0em, calc(-1 * var(--mk-b))); background: linear-gradient(var(--c-idv-lime), var(--c-idv-lime)) 0 var(--mk-t) / 100% calc(1.2em - var(--mk-t) - var(--mk-b)) no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .idv-mark::before { display: none; }
  .idv-mark:not(.is-wrap) { padding-bottom: 0; background: none; }   /* R16: a phrase on one line keeps the desktop bar */
  .idv-mark:not(.is-wrap)::before { display: block; }
}

/* ===== round 14 (owner 2026-10-13): one pointer system, centred phones, the grouped comparison, concentric frame, sharp table hover ===== */
/* single phones: centred on their board (pinned Finding 01 included); labels sit in the side space, placed by js */
.idv-board__stage--one, .idv-frame .idv-board__stage--one, .idv-board__stage--note { justify-content: center; padding: var(--idv-board13-pad); }
.idv-ba__board { padding: var(--idv-board13-pad); }
.idv-flip { justify-content: center; }
/* labels: two lines where the copy has a break; Finding 03 keeps its small uppercase name above the value */
.idv-lbl--anno { display: flex; flex-direction: column; gap: var(--sp-2); white-space: nowrap; }
.idv-lbl--anno .idv-anno__k { font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--fs-11); line-height: var(--lh-150); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-idv-ink-muted); }
.idv-lbl--anno .idv-anno__v { font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: var(--idv-lbl-fs); line-height: var(--lh-130); color: var(--c-idv-ink); }
.idv-lbl--anno[data-side="l"] { align-items: flex-end; text-align: right; }
/* Finding 03: the phone centred, the labels and the card placed around it */
.idv-anno { display: flex; justify-content: center; align-items: center; padding: var(--idv-board13-pad); }
.idv-anno .idv-place { position: absolute; left: 0; top: 0; z-index: 3; }
/* Finding 02: one board, two groups divided by a hairline; three phones of one width */
.idv-cmpb { display: flex; justify-content: center; align-items: stretch; padding: 32px var(--idv-board13-pad) 72px; }
.idv-cmpb__g { display: flex; flex-direction: column; gap: var(--sp-24); padding: 0 32px; }
.idv-cmpb__g--bad { padding-left: var(--idv-cmpb-zone); }
.idv-cmpb__g--good { padding-right: var(--idv-cmpb-zone); border-left: var(--bw-1) solid var(--c-idv-board-line); }
.idv-cmpb__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); min-height: 40px; }   /* both heads: label + tag on one line, the same height */
.idv-cmpb__head .idv-k { margin: 0; }
.idv-cmpb__phones { display: flex; gap: 32px; justify-content: center; }
.idv-cmpb .idv-phone { width: var(--idv-cmpb-w); }
/* the rematch frame: concentric corners (outer = inner card radius + the frame's gap) */
.idv-game--rate .idv-game__grid { padding: var(--idv-rematch-pad); border-radius: calc(var(--r-16) + var(--idv-rematch-pad)); }
/* the stress-test table: the row hover is sharp and fills the row edge to edge; the wrapper keeps the outer corners */
@media (hover: hover) { .idv-tbl tbody tr:hover > :first-child, .idv-tbl tbody tr:hover > :last-child { border-radius: 0; } }
@media (max-width: 1189.98px) {
  .idv-cmpb { flex-direction: column; align-items: center; padding-bottom: var(--sp-48); }
  .idv-cmpb__g--bad, .idv-cmpb__g--good { padding: 0 var(--idv-cmpb-zone) var(--sp-32); border-left: 0; }
  :root { --idv-cmpb-w: min(236px, calc((100vw - 2 * var(--page-margin) - 2 * var(--idv-cmpb-zone) - 160px) / 2)); }
}
@media (max-width: 767.98px) {
  .idv-cmpb__g--bad, .idv-cmpb__g--good { padding: 0 0 var(--sp-24); }
  :root { --idv-cmpb-w: min(236px, calc((100vw - 2 * var(--page-margin) - 64px) / 2)); }
  .idv-anno { flex-direction: column; gap: var(--sp-12); }
  .idv-anno .idv-lbl--anno, .idv-anno .idv-place { display: flex; position: static; }   /* phones: the six labels and the card as a list under the screen */
  .idv-lbl--anno[data-side="l"] { align-items: flex-start; text-align: left; }
}

/* ===== round 15 (owner 2026-10-13) ===== */
/* the numbered pin (the "Same fare" board and Finding 03 only): placed by js from its measured spot, never on the value */
.idv-pin2 { position: absolute; left: 0; top: 0; z-index: 4; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-sizing: border-box;
  background: var(--c-idv-lime); border: var(--bw-2) solid var(--c-idv-ink); box-shadow: 0 2px 6px rgba(11, 11, 12, 0.25);
  font-family: var(--font-figtree); font-weight: 800; font-size: 14px; line-height: 1; color: var(--c-idv-ink); font-variant-numeric: tabular-nums; pointer-events: none; }
.idv-pin2--s { position: static; flex: none; width: 24px; height: 24px; font-size: 12px; box-shadow: none; }
.idv-pinleg { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: var(--sp-10); margin: 32px 0 0; font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: var(--idv-lbl-fs); line-height: 1.3; color: var(--c-idv-ink); white-space: nowrap; }
.idv-board__stage--pair { flex-wrap: wrap; align-content: center; row-gap: 0; }
/* Finding 03: two stacks of three, aligned and evenly spaced, centred on the phone; the card under the right stack */
.idv-anno { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 56px; }
.idv-anno__side { display: flex; flex-direction: column; justify-content: center; }
.idv-anno__side--l { align-items: flex-end; } .idv-anno__side--r { align-items: flex-start; }
.idv-anno__rwrap { position: relative; }
.idv-anno__stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.idv-anno__it { display: flex; align-items: flex-start; gap: var(--sp-10); color: var(--c-idv-ink); }
.idv-anno__it .idv-pin2--s { margin-top: 1px; }
.idv-anno__it .idv-anno__k { font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--fs-11); line-height: var(--lh-150); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-idv-ink-muted); }
.idv-anno__it .idv-anno__v { font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: var(--idv-lbl-fs); line-height: var(--lh-130); }
.idv-anno__rwrap .idv-anno__item--missing { position: absolute; left: 0; top: calc(100% + 32px); }
/* the lens card: the note right of PKR 453 (placed by js), the divider 40 px under the pill */
.idv-lens__note { position: absolute; left: 0; top: 0; z-index: 3; font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: var(--idv-lbl-fs); line-height: 1.3; color: var(--c-idv-ink); white-space: nowrap; }
.idv-lens__ann { margin-top: 40px; }
/* Why this one 01: the "52 vs 45" pill 44 px lower, so the arch from the "− fare" chip reaches it at 1.0 to 1.5 scale */
.idv-v-steps__arrow { margin-bottom: calc(var(--sp-12) + 44px); }
@media (max-width: 999.98px) { .idv-anno { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-24); justify-items: center; } .idv-anno__side { align-items: flex-start !important; } .idv-anno__rwrap .idv-anno__item--missing { position: static; margin-top: 32px; } }
@media (max-width: 767.98px) { .idv-lens__note { display: none; } .idv-pinleg { white-space: normal; text-align: left; } .idv-board__stage--pair .idv-pinleg { justify-content: flex-start; } }

/* =====================================================================
   R16 (owner 2026-10-13): tablet and phone. >= 1190 unchanged, except the lens card at 1190 to 1439 (section 1).
   Bands: 1000 to 1189 = the desktop composition, scaled (the page's own 1000 breakpoint); 768 to 999 = tablet (text above the
   board); < 768 = phone (one column). A board switches to numbered pins + a list (js/indrive.js .is-pins) where its side space
   is under 160 px, and always below 768.
   ===================================================================== */
/* the pins-and-list system (hidden until a board is in pin mode) */
.idv-pin2--m, .idv-plist, .idv-hint, .idv-pin2--q, .idv-anno__p7 { display: none; }
.idv-plist { list-style: none; margin: var(--idv-plist-gap) 0 0; padding: 0; flex-direction: column; gap: var(--idv-plist-row); }
.idv-plist li { display: flex; align-items: flex-start; gap: var(--sp-10); font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: var(--idv-lbl-fs); line-height: var(--lh-130); color: var(--c-idv-ink); }
.idv-plist .idv-pin2--s { width: var(--idv-plist-pin); height: var(--idv-plist-pin); font-size: var(--fs-11); margin-top: calc((var(--idv-lbl-fs) * 1.3 - var(--idv-plist-pin)) / 2); }
.idv-hint { margin: var(--idv-hint-gap) 0 0; font-family: var(--font-figtree); font-size: var(--fs-14); line-height: var(--lh-auto); text-align: center; color: var(--c-idv-ink-muted); }

/* section 1: the lens card at 1190 to 1439 keeps its 1440 width (the band's text column gives way) */
@media (min-width: 1190px) and (max-width: 1439.98px) {
  .idv-solve__in { grid-template-columns: minmax(0, 1fr) var(--idv-lens-w-desk); }
}

@media (max-width: 1189.98px) {
  /* pin mode: labels and arrows give way to the pins and the list */
  .is-pins > :is(.idv-lbl, svg.idv-arw) { display: none; }
  .is-pins > .idv-pin2--m { display: grid; }
  .is-pins > .idv-plist, .idv-cmpb.is-pins .idv-plist { display: flex; }
  .is-pins.idv-board__stage--one, .is-pins.idv-board__stage--note { flex-direction: column; }
  .is-pins.idv-ba__board { display: flex; flex-direction: column; align-items: center; }
  .is-pins > .idv-plist { align-self: center; max-width: 100%; }
  /* the phone frame scales with its width */
  .idv-phone { --ph-b: calc(var(--pw, var(--idv-ph-w)) * var(--idv-bezel-k)); --ph-r: calc(var(--pw, var(--idv-ph-w)) * var(--idv-corner-k)); }
  .idv-phone__scr { border-radius: calc(var(--ph-r) - var(--ph-b)); }
  /* highlight bars: drawn per line (a phrase may wrap), the same measured offsets (marks.py) */
  /* a phrase on one line keeps the desktop bar (::before); a phrase that wraps (js .is-wrap) gets one bar per line, the same offsets.
     A background cannot paint above its box, so the top padding makes room when the bar starts above the content box. */
  .idv-mark { white-space: normal; }
  .idv-mark[style*="--mk-t0"] { --mk-t: var(--mk-t0) !important; --mk-b: var(--mk-b0) !important; }   /* the 1440 per-phrase correction does not apply here */
  .idv-mark.is-wrap { padding-top: max(0em, calc(-1 * var(--mk-t))); padding-bottom: max(0em, calc(-1 * var(--mk-b)));
    background: linear-gradient(var(--c-idv-lime), var(--c-idv-lime)) 0 max(0em, var(--mk-t)) / 100% calc(1.2em - var(--mk-t) - var(--mk-b)) no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .idv-mark.is-wrap::before { display: none; }
  /* takeaways: two columns (MindHYVE S20 values), cards hug their content */
  .idv-takeaways .cs-tk-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); width: 100%; }
  .idv-takeaways .cs-tk-row { display: contents; }
  .idv-takeaways .cs-tk { width: auto; height: auto; padding: var(--tk-pad); border-radius: var(--tk-r); }
  .idv-takeaways .cs-tk__title { font-size: var(--fs-r-body-24); }
  .idv-takeaways .cs-tk__body { font-size: var(--fs-r-body-20); }
  .idv-strip b, .idv-li__m b, .idv-gcard__fare, .idv-tally b, .idv-tally__total b, .idv-sumcol__t, .idv-lens__fare, .idv-bignum b { white-space: nowrap; }
  /* the stress-test table: no sideways scroll on tablet (names wrap, tighter cells) */
  .idv-tbl table { min-width: 0; }
  .idv-tbl tbody th { white-space: normal; }
  .idv-tbl th, .idv-tbl td { padding-inline: var(--sp-12); }
  .idv-tbl .idv-th-rate { width: 28%; }
  /* the switch tabs: one row across the width, 44 tall, sideways scroll with no scrollbar if they don't fit */
  .idv-seg { display: flex; width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .idv-seg::-webkit-scrollbar { display: none; }
  .idv-seg button { flex: 1 0 auto; min-height: var(--tap); }
  /* the lens label under the pill (js .is-under: no room for the arrow at scale 1.0) */
  .idv-lens.is-under .idv-lens__note { display: block; position: static; order: 1; white-space: nowrap; }
  .idv-lens.is-under .idv-lens__note br { display: none; }
  .idv-lens.is-under .idv-lens__ann { order: 2; margin-top: var(--idv-under-gap); }
  .idv-lens.is-under > svg.idv-arw { display: none; }
  /* the BEFORE card is back, inside the page padding */
  .idv-lens--before { display: block; right: 0; }
  /* tap equivalents for every hover (touch) */
  .idv-gbtn:not(:disabled):active { transform: translateY(1px); filter: brightness(0.96); }
  .idv-cta:active, .idv-inkbtn:active, .idv-btn:active { transform: translateY(1px); }
  .idv-gpanel__toggle:active { box-shadow: inset 0 0 0 var(--bw-1) var(--c-idv-lime); }
}

/* ---- 1000 to 1189: the desktop composition, scaled (text beside the board, the pinned Finding 01 board) */
@media (min-width: 1000px) and (max-width: 1189.98px) {
  :root { --idv-ph-w: min(268px, calc((var(--idv-avail) - 112px - 18px - var(--idv-plist-res)) / 2.169 + 18px));
          --idv-cmpb-w: min(236px, calc((var(--idv-avail) - 32px - 40px - 24px - 40px - 18px - 16px - var(--idv-plist-res)) / 2.169 + 18px)); }
  .idv-scrolly { display: grid; grid-template-columns: minmax(0, var(--idv-row-text)) minmax(0, var(--idv-row-board)); gap: var(--sp-48); align-items: start; }
  .idv-ba { grid-template-columns: minmax(0, var(--idv-row-text)) minmax(0, var(--idv-row-board)); gap: var(--sp-48); align-items: center; }
  .idv-split:has(.idv-board--pad) { grid-template-columns: minmax(0, var(--idv-row-board)) minmax(0, var(--idv-row-text)); gap: var(--sp-48); align-items: center; }
  .idv-frame .is-pins.idv-board__stage { flex-direction: column; }
  .idv-board__stage--pair .idv-phone { --pw: min(var(--idv-ph-w), calc((0.56 * (100vw - 2 * var(--page-margin) - 48px) - 2 * var(--idv-board13-pad) - var(--idv-pair13-gap)) / 2)); width: var(--pw); }
  .idv-pinleg { white-space: normal; max-width: 100%; text-align: left; }
  .idv-stick__board { height: 100%; }
  /* the grouped comparison: the two groups side by side, pins (no label zones) */
  .idv-cmpb { flex-direction: row; align-items: stretch; padding: var(--sp-32) var(--idv-board13-pad) var(--sp-40); }
  .idv-cmpb__g--bad, .idv-cmpb__g--good { padding: 0 var(--sp-32); }
  .idv-cmpb__g--good { border-left: var(--bw-1) solid var(--c-idv-board-line); }
  .idv-cmpb .idv-plist { margin-top: 0; }
  /* the lens: two columns as on desktop */
  .idv-lens--before { right: 0; }
}

/* ---- below 1000: text above every board; Finding 01 as a sequence (each beat: text, then its board) */
@media (max-width: 999.98px) {
  /* the stress-test table fits the tablet width: the rate bar takes the room that is left */
  .idv-tbl .idv-rbar { grid-template-columns: minmax(var(--sp-48), 1fr) auto; }
  .idv-tbl .idv-th-rate { width: auto; }
  .idv-tbl thead th { white-space: normal; }
  /* stat tiles: two columns on tablet */
  .idv-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idv-strip li:last-child { grid-column: 1 / -1; }
  .idv-split:has(.idv-board--pad) .idv-prose { order: -1; }
  .idv-beat__board { margin-top: var(--sp-16); }
  .idv-beat__board .idv-board__stage { height: auto; }
  .idv-beats { max-width: none; }
  .idv-beat__board { width: 100%; }
  .idv-cover__item .idv-phone { --pw: min(var(--idv-ph-tab), calc((100vw - 2 * var(--page-margin) - 2 * var(--sp-64) - 2 * var(--sp-32)) / 3)); width: var(--pw); }
  /* Finding 03: one list of seven under the phone (1 to 6, then the card as 7), pin 7 on the empty spot, no arrow */
  .idv-anno { display: flex; flex-direction: column; align-items: center; gap: var(--idv-plist-row); }
  .idv-anno__side, .idv-anno__rwrap, .idv-anno__stack { display: contents; }
  .idv-anno__phone { order: 0; margin: 0 0 calc(var(--idv-plist-gap) - var(--idv-plist-row)); }
  .idv-anno__it, .idv-anno__rwrap .idv-anno__item--missing { width: 100%; max-width: var(--idv-text-max); }
  .idv-anno .idv-anno__it .idv-pin2--s { width: var(--idv-plist-pin); height: var(--idv-plist-pin); font-size: var(--fs-11); margin-top: calc((var(--fs-11) * 1.5 - var(--idv-plist-pin)) / 2); }
  .idv-anno__rwrap .idv-anno__item--missing { order: 7; position: static; margin-top: var(--sp-12); }
  .idv-anno__ic { display: none; }
  .idv-anno__p7 { display: grid; }
  .idv-anno > .idv-pin2--q { display: grid; }
  .idv-anno > svg.idv-arw { display: none; }
  /* phones: tablet sizes */
  :root { --idv-ph-w: var(--idv-ph-tab); --idv-cmpb-w: var(--idv-ph-tab2); }
  .idv-board__stage--pair .idv-phone, .idv-cmpb__g--bad .idv-phone { --pw: var(--idv-ph-tab2); width: var(--idv-ph-tab2); }
  .idv-cmpb__g--good .idv-phone { --pw: var(--idv-ph-tab); width: var(--idv-ph-tab); }
  /* the grouped comparison: city-to-city (two phones side by side), a hairline, then in-city */
  .idv-cmpb { flex-direction: column; align-items: stretch; padding: var(--sp-32) var(--sp-32) var(--sp-40); }
  .idv-cmpb__g--bad, .idv-cmpb__g--good { padding: 0; border-left: 0; align-items: center; }
  .idv-cmpb__g--good { margin-top: var(--sp-32); padding-top: var(--sp-32); border-top: var(--bw-1) solid var(--c-idv-board-line); }
  .idv-cmpb__head { align-self: stretch; }
  .idv-cmpb__phones { gap: var(--sp-24); }
  .idv-cmpb .idv-plist { align-self: center; }
  /* the lime band: chips, heading, body, then the BEFORE card, then the lens card */
  .idv-lens-wrap { display: flex; flex-direction: column; gap: var(--sp-32); }
  .idv-lens--before { position: relative; top: auto; right: auto; width: 62%; align-self: flex-end; margin-right: var(--sp-12); }
  .idv-solve__text { max-width: none; }
}

/* ---- tablet only (768 to 999): boards keep the desktop padding and radius */
@media (min-width: 768px) and (max-width: 999.98px) {
  .idv-board__stage--one, .idv-board__stage--note, .idv-ba__board { padding: var(--idv-board13-pad); }
  .idv-beat__board .idv-board__stage--pair { padding: var(--idv-board13-pad); }
  .idv-anno { padding: var(--idv-board13-pad) var(--sp-32); }
}

/* ---- phone (< 768) */
@media (max-width: 767.98px) {
  /* boards: radius 16, padding 20, the label pill top left, hugging their content */
  .idv-board { border-radius: var(--r-16); }
  .idv-beat__board, .idv-board--pad, .idv-ba__board, .idv-anno, .idv-cmpb { padding: var(--idv-board-pad-phone); }
  .idv-board__cap { position: static; margin: 0 0 var(--sp-16); }
  .idv-beat__board .idv-board__stage, .idv-board--pad .idv-board__stage, .idv-board__stage--one, .idv-board__stage--note, .idv-board__stage--pair { padding: 0; height: auto; }
  .idv-ba__board { width: 100%; }
  .idv-board__stage--pair { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: var(--idv-pair-gap-phone); align-content: flex-start; }
  /* phones: one single size, one pair size */
  :root { --idv-inner-phone: calc(100vw - 2 * var(--page-margin) - 2 * var(--idv-board-pad-phone));
          --idv-ph-w: clamp(var(--idv-ph-min-phone), calc(var(--idv-inner-phone) * var(--idv-ph-share-phone)), var(--idv-ph-max-phone));
          --idv-ph-w2p: calc((var(--idv-inner-phone) - var(--idv-pair-gap-phone)) / 2); }
  .idv-phone { --pw: var(--idv-ph-w); }
  .idv-beat__board .idv-board__stage--one .idv-phone, .idv-ba__board .idv-phone, .idv-board--pad .idv-phone, .idv-anno .idv-phone, .idv-cmpb__g--good .idv-phone { --pw: var(--idv-ph-w); width: var(--idv-ph-w); }
  .idv-board__stage--pair .idv-phone, .idv-cmpb__g--bad .idv-phone { --pw: var(--idv-ph-w2p); width: var(--idv-ph-w2p); }
  .idv-cover__item .idv-phone { --pw: calc((100vw - 2 * var(--page-margin) - 24px - 16px) / 3); }
  .idv-shot { margin: 0; }
  .idv-cmpb__phones { gap: var(--idv-pair-gap-phone); }
  .idv-cmpb { padding: var(--idv-board-pad-phone); }
  .idv-cmpb__g--good { margin-top: var(--sp-24); padding-top: var(--sp-24); }
  .idv-cmpb__head { flex-wrap: wrap; gap: var(--sp-8); min-height: 0; }
  /* pins 24 on phones; the legend may wrap */
  .idv-pin2:not(.idv-pin2--s) { width: var(--idv-pin-phone); height: var(--idv-pin-phone); font-size: var(--fs-12); }
  .idv-pinleg { flex-basis: 100%; white-space: normal; text-align: left; align-items: flex-start; margin-top: var(--idv-plist-gap); }
  .idv-pinleg .idv-pin2--s { width: var(--idv-plist-pin); height: var(--idv-plist-pin); font-size: var(--fs-11); margin-top: calc((var(--idv-lbl-fs) * 1.3 - var(--idv-plist-pin)) / 2); }
  .idv-board__stage--pair .idv-pinleg { justify-content: flex-start; }
  .idv-hint { display: block; flex-basis: 100%; }
  .is-pins > .idv-plist { align-self: stretch; }
  .idv-cmpb .idv-plist { align-self: stretch; }
  .idv-anno { padding: var(--idv-board-pad-phone); }
  /* Why this one 01: chips wrap with equal gaps, no arch, the pill 16 under them */
  .idv-v-steps__arrow { display: none; }
  .idv-v-steps { gap: var(--sp-16); }
  .idv-v-steps__row { justify-content: flex-start; gap: var(--sp-8); }
  .idv-v-steps { align-items: flex-start; }
  #why1 > svg.idv-arw { display: none; }
  /* the lime band: the BEFORE card stays tilted, inside the page padding */
  .idv-lens--before { width: 70%; margin-right: var(--sp-8); }
  /* stat tiles and post figures: one column */
  .idv-strip { grid-template-columns: minmax(0, 1fr); }
  .idv-strip li:last-child { grid-column: auto; }
  /* takeaways: one column, phone padding */
  .idv-takeaways .cs-tk-rows { grid-template-columns: minmax(0, 1fr); }
  .idv-takeaways .cs-tk { padding: var(--cs-card-pad-phone); }
  /* the switch tabs */
  .idv-seg { gap: var(--sp-4); }
  /* the stress-test table: each row a card (MindHYVE S19): the ride as the title, then each column as label and value */
  .idv-tbl { overflow: visible; border: 0; border-radius: 0; }
  .idv-tbl table, .idv-tbl tbody, .idv-tbl tr, .idv-tbl th, .idv-tbl td { display: block; width: auto; min-width: 0; }
  .idv-tbl thead { display: none; }
  .idv-tbl tbody { display: flex; flex-direction: column; gap: var(--card-gap); }
  .idv-tbl tbody tr { padding: var(--cs-card-pad-phone); border-radius: var(--r-16); background: var(--c-card-2); }
  .idv-tbl tbody tr > * { padding: 0; border: 0; background: none !important; box-shadow: none !important; }
  .idv-tbl tbody th { position: static; width: auto; min-width: 0; margin-bottom: var(--sp-12); font-size: var(--fs-18); }
  .idv-tbl td { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16); padding-block: var(--sp-8) !important; border-top: var(--bw-1) solid var(--c-grey-2c2c2d) !important; font-size: var(--fs-16); white-space: nowrap; }
  .idv-tbl td::before { content: attr(data-l); flex: none; font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--fs-12); letter-spacing: var(--pg-label-ls); text-transform: uppercase; color: var(--c-idv-lime); }
  .idv-tbl td.idv-td-rate .idv-rbar { flex: 1 1 auto; min-width: 0; max-width: 66%; grid-template-columns: minmax(0, 1fr) auto; }
}

/* =====================================================================
   R17 (owner 2026-10-13): hero A1, the G3 pixel grid, which number is which, the Next Project words
   ===================================================================== */
/* ---- hero A1 "price vs guess": one stage, every size in reference units (--u = stage width / 1220); placed by js (badges, labels, arrows) */
.cs-page--indrive > .idv-a1 { margin-top: var(--sp-64); }
.idv-a1 { --u: calc(100cqw / var(--idv-a1-ref-w)); container-type: inline-size; position: relative; isolation: isolate; overflow: hidden;
  width: min(100%, calc(var(--idv-avail) * var(--idv-a1-ratio))); aspect-ratio: var(--idv-a1-ratio); margin-inline: auto; border-radius: var(--idv-a1-r); color: var(--c-idv-ink); }
.idv-a1__half { position: absolute; top: 0; bottom: 0; width: 50%; }
.idv-a1__half--l { left: 0; background: var(--c-idv-board); }
.idv-a1__half--r { left: 50%; background: var(--c-idv-lime); }
.idv-a1__head { position: absolute; z-index: 2; top: calc(44 * var(--u)); width: calc(600 * var(--u)); display: grid; justify-items: center; gap: calc(14 * var(--u)); }
.idv-a1__half--l .idv-a1__head { left: calc(40 * var(--u)); }
.idv-a1__half--r .idv-a1__head { left: calc(-30 * var(--u)); }
.idv-a1__pill { display: inline-flex; align-items: center; height: calc(30 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--c-idv-ink);
  font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: calc(11.5 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-idv-ink); white-space: nowrap; }
.idv-a1__h { margin: 0; font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: calc(44 * var(--u)); line-height: 1.12; letter-spacing: -0.025em; color: var(--c-idv-ink); white-space: nowrap; }
.idv-a1__ph { position: absolute; z-index: 1; top: calc(430 * var(--u)); transform: translateY(-50%); }
.idv-a1__half--l .idv-a1__ph { left: calc(215 * var(--u)); }
.idv-a1__half--r .idv-a1__ph { left: calc(145 * var(--u)); }
.idv-a1 .idv-phone { --pw: calc(250 * var(--u)); width: var(--pw); --ph-b: calc(var(--pw) * var(--idv-bezel-k)); --ph-r: calc(var(--pw) * var(--idv-corner-k)); }
.idv-a1 .idv-phone__scr { border-radius: calc(var(--ph-r) - var(--ph-b)); }
.idv-a1__badge { position: absolute; z-index: 3; left: 0; top: 0; width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%; display: grid; place-items: center;
  background: var(--c-idv-ink); color: var(--c-idv-lime); font-family: var(--font-figtree); font-weight: 800; font-size: calc(28 * var(--u)); line-height: 1; box-shadow: 0 10px 22px rgba(11, 11, 12, 0.22); }
.idv-a1__badge--q { animation: idv-a1-pulse 2.4s ease-in-out infinite; }
@keyframes idv-a1-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.idv-a1__note { position: absolute; z-index: 3; left: 0; top: 0; margin: 0; font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: calc(16 * var(--u)); line-height: 1.35; color: var(--c-idv-ink); white-space: nowrap; }
.idv-a1 > svg.idv-a1__arw { z-index: 2; }
svg.idv-arw path.k { fill: none; stroke: var(--c-idv-ink); stroke-linecap: round; stroke-linejoin: round; }
/* "a guess.": lime text on the ink bar (the round 15 bar rule, marks.py) */
.idv-mark--ink { color: var(--c-idv-lime); }
.idv-mark--ink::before { background: var(--c-idv-ink); }
.idv-mark--ink.is-wrap { background-image: linear-gradient(var(--c-idv-ink), var(--c-idv-ink)); }
@media (prefers-reduced-motion: reduce) { .idv-a1__badge--q { animation: none; } }
/* below 1000: the two halves stack (each phone would be under 220 px in the split) */
@media (max-width: 999.98px) {
  .idv-a1 { container-type: normal; width: 100%; aspect-ratio: auto; display: flex; flex-direction: column; }
  .idv-a1__half { position: relative; left: auto; width: auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); padding: var(--sp-40) var(--sp-24); }
  .idv-a1__half--r { left: auto; }
  .idv-a1__head { position: static; width: auto; gap: var(--sp-14); }
  .idv-a1__pill { height: 30px; padding: 0 14px; font-size: 11.5px; }
  .idv-a1__h { font-size: var(--idv-a1-h-tab); }
  .idv-a1__ph { position: relative; top: auto; left: auto !important; transform: none; }
  .idv-a1 .idv-phone { --pw: var(--idv-ph-w); }
  .idv-a1__badge { width: 52px; height: 52px; font-size: 28px; }
  .idv-a1__note { position: static; margin-top: calc(var(--sp-16) - var(--sp-24)); font-size: var(--idv-lbl-fs); text-align: center; white-space: normal; }
  .idv-a1 > svg.idv-a1__arw { display: none; }
}
@media (max-width: 767.98px) {
  .idv-a1 { border-radius: var(--idv-a1-r-phone); }
  .idv-a1__half { padding: var(--sp-32) var(--idv-board-pad-phone); }
  .idv-a1__h { font-size: var(--idv-a1-h-phone); white-space: normal; text-align: center; }
}

/* ---- G3 pixel grid: one shared hairline, a lime pixel on every point where lines meet (js), a faint pixel field, lime numbers */
.idv-g3 { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: var(--bw-1) solid var(--c-g3-line); border-left: var(--bw-1) solid var(--c-g3-line); }
.idv-g3--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.idv-g3__c { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: var(--g3-min-h); padding: var(--g3-pad); border-right: var(--bw-1) solid var(--c-g3-line); border-bottom: var(--bw-1) solid var(--c-g3-line);
  background-image: radial-gradient(var(--c-g3-field) 1px, transparent 1.2px); background-size: var(--g3-field) var(--g3-field); background-position: var(--g3-field-off) var(--g3-field-off); transition: background-color 0.25s var(--ease-out); }
.idv-g3__n { font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: var(--g3-num); line-height: 1; letter-spacing: -0.03em; color: var(--c-idv-lime); white-space: nowrap; font-variant-numeric: tabular-nums; }
.idv-g3__t { display: flex; align-items: center; gap: var(--sp-8); margin-top: var(--g3-gap); font-family: var(--font-figtree); font-weight: var(--fw-medium); font-size: var(--g3-label); line-height: var(--lh-130); color: var(--c-g3-fg); }
.idv-g3__px { position: absolute; z-index: 2; width: var(--g3-px); height: var(--g3-px); background: var(--c-idv-lime); transform: translate(-50%, -50%); pointer-events: none; animation: idv-g3-breathe var(--g3-breathe) ease-in-out infinite; }
@keyframes idv-g3-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (hover: hover) { .idv-g3__c:hover { background-color: var(--c-g3-hover); } }
@media (prefers-reduced-motion: reduce) { .idv-g3__px { animation: none; } .idv-g3__c { transition: none; } }
/* on cream boards: the light version */
.idv-g3--light { border-color: var(--c-g3-line-light); }
.idv-g3--light .idv-g3__c { border-color: var(--c-g3-line-light); background-image: radial-gradient(var(--c-g3-field-light) 1px, transparent 1.2px); }
.idv-g3--light .idv-g3__n { color: var(--c-idv-ink); } .idv-g3--light .idv-g3__t { color: var(--c-g3-fg-light); } .idv-g3--light .idv-g3__px { background: var(--c-idv-ink); }
/* the LinkedIn card: the grid shares the card's own outline (no doubled line) */
.idv-li__g3 { margin: 0 -1px -1px; }
.idv-li__g3 .idv-li__i { width: auto; height: auto; background: none; }
.idv-li__g3 .idv-li__i svg { width: var(--icon-16); height: var(--icon-16); }
@media (max-width: 999.98px) {
  .idv-g3 .idv-g3__c { min-height: var(--g3-min-tab); padding: var(--g3-pad-tab); }
  .idv-g3 .idv-g3__n { font-size: var(--g3-num-tab); }
  .idv-g3 .idv-g3__t { font-size: var(--g3-label-tab); }
}
@media (max-width: 767.98px) {
  .idv-g3, .idv-g3--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idv-g3--5 .idv-g3__c:last-of-type { grid-column: 1 / -1; }   /* the pixels are appended after the cells */
  .idv-g3 .idv-g3__c { min-height: var(--g3-min-h-phone); padding: var(--g3-pad-phone); }
  .idv-g3 .idv-g3__n { font-size: var(--g3-num-phone); }
  .idv-g3 .idv-g3__t { font-size: var(--g3-label-phone); }
}

/* ---- "~350 km vs 1 km": an eyebrow over each number, the numbers on one baseline, the vs centred on them */
.idv-bignum { align-items: start; }
.idv-bignum__k { justify-content: center; margin: 0; white-space: nowrap; }
.idv-bignum > div > span { white-space: nowrap; }
.idv-bignum__k { height: calc(var(--fs-14) * 1.5); }
.idv-bignum__vs { align-self: start; margin-top: calc(var(--fs-14) * 1.5 + var(--sp-12) + (0.85 * var(--fs-r-display) - var(--idv-vs)) / 2); }   /* centred on the numbers (eyebrow 1.5 lines of 14, the 12 gap, the number box 0.85em) */
@media (max-width: 767.98px) { .idv-bignum__vs { margin-top: 0; } .idv-bignum > div > span { white-space: normal; text-align: center; } }

/* ---- Next Project on this page: one of Uzair's case studies (the component unchanged; the words, a note and a pill) */
.cs-page--indrive .cs-nextproj__note { max-width: 40ch; margin: var(--sp-8) 0 0; font-size: var(--fs-r-body-20); line-height: var(--lh-160); text-align: center; color: var(--c-grey-8e8e8e); }
.cs-page--indrive .cs-nextproj__media { position: relative; display: block; max-width: 100%; }
.cs-page--indrive .cs-nextproj__tag { position: absolute; z-index: 1; left: var(--cs-tag-in); top: var(--cs-tag-in); display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--c-white); font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-white); }
.cs-page--indrive .cs-nextproj__media .cs-nextproj__mock { display: block; }
/* the hero's "a guess." measured 0.5 px heavier on the left at 1440, 1280 and 1024 (2x crops): the side padding moves 0.0114em (0.5 px at 44 px) right */
.idv-a1__h .idv-mark--ink { padding-left: calc(var(--mk-pl) - 0.0114em) !important; padding-right: calc(var(--mk-pr) + 0.0114em) !important; }

/* =====================================================================
   R18 (owner 2026-10-13): phone and tablet polish. Below 1000 only; >= 1000 unchanged.
   ===================================================================== */
.idv-pat__go { display: none; }
@media (max-width: 999.98px) {
  /* ---- focus: the ring for keyboard use only; no tap highlight; the active tab is the lime fill only */
  .cs-page--indrive :is(a, button, [tabindex], [role="tab"]) { -webkit-tap-highlight-color: transparent; }
  .cs-page--indrive :is(a, button, [tabindex], [role="tab"]):focus:not(:focus-visible) { outline: none; }
  :is(.idv-segctl, .idv-seg) button:focus:not(:focus-visible) { box-shadow: none; }

  /* ---- point 7: one rhythm (tokens --idv-r-*: tablet here, phone below 768) */
  .cs-page--indrive > * + * { margin-top: var(--idv-r-sec) !important; }   /* one section rhythm (older per-section margins included) */
  .cs-page--indrive > .cs-meta { margin-top: var(--idv-r-visual) !important; }                  /* the hero text and its facts */
  .cs-page--indrive > .idv-a1 { margin-top: var(--idv-r-block) !important; }
  .cs-page--indrive > .idv-divider + .idv-solve { margin-top: var(--idv-r-visual) !important; } /* "The solution." and its band */
  /* hero text */
  .idv-hero__text { gap: var(--idv-r-para); }
  .idv-hero__text > .idv-h1 { margin-top: calc(var(--idv-r-eyebrow) - var(--idv-r-para)); }
  .idv-hero__text > .idv-lede { margin-top: calc(var(--idv-r-head) - var(--idv-r-para)); }
  /* section openers: eyebrow, chips and heading; then 20 / 24 to a paragraph, 32 / 40 to a board or visual */
  .idv-ch > * { margin-bottom: 0; }
  .cs-page--indrive .idv-ch > .idv-opener + * { margin-top: 0; }
  .idv-opener { gap: var(--idv-r-eyebrow); }
  .cs-page--indrive .idv-ch > .idv-opener { margin-bottom: var(--idv-r-visual); }
  .cs-page--indrive .idv-ch > .idv-opener:has(+ :is(.idv-scope, .idv-tbl__cap, .idv-ba, .idv-split:not(.idv-split--rows))) { margin-bottom: var(--idv-r-head); }
  .idv-ch > :not(.idv-opener) + * { margin-top: var(--idv-r-block); }
  .idv-ch > .idv-scope + .idv-bignum, .idv-ch > .idv-tbl__cap + .idv-tbl, .idv-ch > .idv-subopener + .idv-quotes { margin-top: var(--idv-r-visual); }
  .idv-ch > .idv-tbl + .idv-tlegend { margin-top: var(--idv-r-cap); }
  .idv-ch > .idv-met__title + .idv-met { margin-top: var(--idv-r-head); }
  .idv-subopener { gap: var(--idv-r-eyebrow); }
  /* text blocks: paragraphs 16 apart, 12 / 14 under an eyebrow or chip row, 28 / 32 to buttons */
  .idv-prose { gap: var(--idv-r-para); }
  .idv-prose > .idv-chips + * { margin-top: calc(var(--idv-r-eyebrow) - var(--idv-r-para)); }
  .idv-prose > .idv-links { margin-top: calc(var(--idv-r-btns) - var(--idv-r-para)); }
  .cs-page--indrive .idv-prose > .idv-pull { margin-top: 0; }   /* a pull line is a paragraph here: 16 */
  /* the grouped board: the phones, "Tap to enlarge" and the list, 16 apart (a visual and its caption) */
  .idv-cmpb__g { gap: var(--idv-r-cap); }
  .idv-cmpb__g > .idv-cmpb__phones { margin-top: calc(var(--sp-24) - var(--idv-r-cap)); }
  .idv-cmpb__g > .idv-hint, .idv-cmpb .idv-cmpb__g > .idv-plist { margin-top: 0; }
  .idv-split, .idv-split:has(.idv-board--pad), .idv-split.idv-gap-xl { gap: var(--idv-r-visual); }
  /* Finding 01 beats: chips, heading, body, board; 48 / 64 between beats */
  .idv-beats { display: flex; flex-direction: column; gap: var(--idv-r-block); }
  .idv-beat { padding-block: 0; gap: var(--idv-r-para); }
  .idv-beat > .idv-h3 { margin-top: calc(var(--idv-r-eyebrow) - var(--idv-r-para)); }
  .idv-beat > .idv-h3 + p { margin-top: calc(var(--idv-r-head) - var(--idv-r-para)); }
  .idv-beat > .idv-beat__board { margin-top: calc(var(--idv-r-visual) - var(--idv-r-para)); }
  /* row headings (beats, the switch's pull line, offer gone): the page's h3 size, under the finding headings (28 tablet, 24 phone) */
  .idv-beat .idv-h3, .idv-ba__text .idv-pull--sm, .idv-split:has(.idv-board--pad) .idv-lead { font-size: var(--fs-r-h2); line-height: var(--lh-r-h2); }
  /* body text: the case studies' body size (16 on phone, 18 on tablet: --fs-r-body-20), regular, the body colour */
  .idv-beat > p, .idv-split:has(.idv-board--pad) .idv-prose p:not(.idv-lead):not(.idv-pull), .idv-anat p, #response .idv-prose > .idv-lead { font-size: var(--fs-r-body-20); line-height: var(--lh-160); font-weight: var(--fw-regular); color: var(--c-grey-8e8e8e); }
  /* the game heads */
  .idv-game__h + .idv-game__grid, .idv-game__head + .idv-game__grid { margin-top: var(--idv-r-visual); }
  .idv-game--rate .idv-game__head, .idv-game__head { gap: 0; }
  .idv-game__head > .idv-h2 { margin-bottom: 0; }
  .idv-game__head > .idv-game__sub { margin-top: var(--idv-r-head); }
  /* the field: the eyebrow and its grid, the grid and the text */
  .idv-strip__k { margin-bottom: var(--idv-r-head); }
  .idv-field > .idv-g3 + .idv-split { margin-top: var(--idv-r-block); }
  /* the ~350 km block: number and caption */
  .idv-bignum > div { gap: var(--idv-r-eyebrow); }
  .idv-bignum > div > span { margin-top: calc(var(--idv-r-cap) - var(--idv-r-eyebrow)); }
  /* the lime band: badges, heading, body, then the cards */
  .idv-solve__text { gap: var(--idv-r-head); }
  .idv-solve__text > .idv-solve__h { margin-top: calc(var(--idv-r-eyebrow) - var(--idv-r-head)); }
  .idv-solve__in { gap: var(--idv-r-visual); }
  /* the switch: pull, the two definitions, the tabs, then the board 20 under the tabs */
  .idv-ba { row-gap: var(--idv-r-tabs); }
  .idv-ba__text { gap: var(--idv-r-head); }
  .idv-anat { gap: var(--idv-r-para); }
  .idv-ba__text > .idv-seg { margin-top: calc(var(--idv-r-btns) - var(--idv-r-head)); }
  /* Why this one */
  .idv-whys { gap: 0; }
  .idv-whys > .idv-k + .idv-whylist { margin-top: var(--idv-r-head); }
  /* the maths: the tabs 20 above the steps; the verdict 16 under them */
  .idv-maths { gap: var(--idv-r-tabs); }
  .idv-segctl__k { margin-bottom: calc(var(--sp-12) - var(--idv-r-tabs)); }
  .idv-maths > .idv-verdict { margin-top: calc(var(--idv-r-cap) - var(--idv-r-tabs)); }
  /* the decision band and the takeaways head */
  .idv-band__in > .idv-band__p { margin-top: calc(var(--idv-r-eyebrow) - var(--sp-20)); }
  .idv-takeaways .cs-head { gap: var(--idv-r-head); }
  .cs-page--indrive .idv-takeaways { gap: var(--idv-r-visual); }
  .idv-takeaways .cs-head + .cs-tk-rows { margin-top: 0; }
  /* the closing band */
  .idv-endband__in > .idv-endband__h { margin-top: calc(var(--idv-r-eyebrow) - var(--sp-24)); }
  .idv-endband__in > .idv-endband__p { margin-top: calc(var(--idv-r-head) - var(--sp-24)); }
  .idv-endband__in > .idv-endband__btns { margin-top: calc(var(--idv-r-btns) - var(--sp-24)); }
  .idv-endband__in > .idv-endband__small { margin-top: calc(var(--idv-r-para) - var(--sp-24)); }

  /* ---- point 4: the pattern, one card per finding (the case-study card), tablet: one column, max 640, centred */
  .idv-pat { display: flex; flex-direction: column; gap: var(--idv-pat-card-gap); max-width: var(--idv-pat-max-tab); margin-inline: auto; border: 0; }
  .idv-pat .idv-pat__row.idv-pat__row--head { display: none; }
  .idv-pat__row { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: var(--cs-card-pad-phone); border: 0; border-radius: var(--r-16); background: var(--c-card-2); }
  .idv-pat__k { color: var(--c-idv-lime); }
  .idv-pat__see { margin-top: var(--sp-8); font-size: var(--fs-18); font-weight: var(--fw-semibold); line-height: var(--lh-150); color: var(--c-white); }
  .idv-pat__ar { display: none; }
  .idv-pat__then { display: flex; align-items: flex-start; gap: var(--sp-6); margin-top: var(--sp-12); font-size: var(--fs-16); line-height: var(--lh-150); color: var(--c-grey-8e8e8e); }
  .idv-pat__go { display: block; flex: none; width: var(--icon-16); height: var(--icon-16); margin-top: calc((var(--fs-16) * 1.5 - var(--icon-16)) / 2); color: var(--c-idv-lime); }   /* centred on the first line; the text wraps beside it */
  #turn > .idv-pat + .idv-bigline { margin-top: var(--idv-r-block); }

  /* ---- point 8: "Drivers past month three" below 1190 measured 1 px low at 390: half of its 1440 correction */
  .idv-met > li:nth-child(5) .idv-met__h .idv-mark { --mk-t: -0.0614em !important; --mk-b: -0.0386em !important; }
}
@media (max-width: 767.98px) {
  .idv-pat { max-width: none; }
  .idv-v-chips { align-items: flex-start; }
  .idv-met__title { text-align: left; }   /* "What success would look like": on the left, its note on its own line, as the blocks around it */
  .idv-met__title span { display: block; margin: var(--sp-8) 0 0; }   /* Why this one 03: the chips line up on the left, as the text above them */
  /* ---- point 3: the maths steps as compact rows in one panel; no arrows between them */
  .idv-steps, .idv-split--maths .idv-steps { display: flex; flex-direction: column; gap: 0; padding: var(--idv-board-pad-phone); border-radius: var(--r-16); background: var(--c-bg); }
  .idv-step { display: grid; grid-template-columns: var(--sp-28) minmax(0, 1fr); column-gap: var(--sp-16); row-gap: var(--sp-4); align-items: start; padding: var(--idv-step-row) 0; border-radius: 0; background: none; box-shadow: none; }
  .idv-step:first-child { padding-top: 0; } .idv-step:last-child { padding-bottom: 0; }
  .idv-step + .idv-step { border-top: var(--bw-1) solid var(--c-grey-2c2c2d); }
  .idv-step__n { grid-row: 1 / span 3; margin: 0; }
  .idv-step__lbl, .idv-step__val, .idv-step__how { grid-column: 2; }
  .idv-step__val { font-size: var(--fs-28); line-height: var(--lh-tw-120); }
  .idv-step__how { font-size: var(--idv-step-sub); line-height: var(--lh-150); color: var(--c-grey-8e8e8e); }
  .idv-step::before, .idv-step::after, .idv-step:not(:last-child)::before, .idv-step:not(:last-child)::after, .idv-steps.is-broken .idv-step:not(:last-child)::before, .idv-steps.is-broken .idv-step:not(:last-child)::after, .idv-steps.is-broken .idv-step:first-child::after { display: none; content: none; }
  .idv-steps.is-broken .idv-step { outline: 0; }

  /* ---- point 6: the benchmark, one row = label, value and tag on line 1, the full-width bar on line 2 */
  .idv-sim { padding: var(--idv-board-pad-phone); border-radius: var(--r-16); }
  .idv-sim__leg { gap: var(--sp-8) var(--sp-16); }
  .idv-bars { display: flex; flex-direction: column; gap: 0; }
  .idv-bars__head { display: flex; justify-content: flex-end; }
  .idv-bars__head > span:not(:last-child) { display: none; }
  .idv-bars__try { margin: var(--idv-bars-try-top) 0 var(--idv-bars-try-bot); }
  .idv-bars__r, .idv-split--maths .idv-bars__r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "k v r" "t t t"; column-gap: var(--sp-10); row-gap: var(--sp-8); align-items: center; }
  .idv-bars__r + .idv-bars__r { margin-top: var(--idv-bars-row-gap); }
  .idv-bars__k { grid-area: k; } .idv-bars__v { grid-area: v; } .idv-bars__read { grid-area: r; } .idv-bars__t { grid-area: t; height: var(--idv-bars-h-phone); border-radius: 5px; }
  .idv-bars__t i { border-radius: 5px; }
  .idv-sim__prompt { flex-wrap: nowrap; }
  .idv-sim__prompt b { flex: none; }
  .idv-sim__ctrl { gap: var(--sp-12); }
  .idv-sim__ctrl > * { min-height: var(--tap); }
}

/* =====================================================================
   R19 (owner 2026-10-13): the hero badges on phones, the ledgers below 1000, the result card hugs its content
   ===================================================================== */
@media (max-width: 767.98px) {
  .idv-a1__badge { width: var(--idv-a1-badge-phone); height: var(--idv-a1-badge-phone); font-size: calc(var(--idv-a1-badge-phone) * 0.54); }
  .idv-sumcols:not(.idv-sumcols--one) .idv-sumcol__t { font-size: min(var(--fs-40), calc((100vw - 2 * var(--page-margin) - 2 * var(--sp-20) - 2 * var(--sp-16)) / 2 / 4.4)); }   /* the two totals never touch */
}
@media (max-width: 999.98px) {
  /* every ledger row: line 1 "Ride 1" and its tag, line 2 the result, left-aligned; no unit breaks; 14 above and below, the hairline between */
  .idv-tally li { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--idv-tally-line); min-height: 0; padding: var(--idv-tally-pad) 0; }
  .idv-tally li > span { gap: var(--idv-tally-tag-gap); white-space: nowrap; }
  .idv-tally li > b, .idv-tally .idv-res { justify-content: flex-start; text-align: left; }
  .idv-tally .idv-kind, .idv-tally .idv-nw { white-space: nowrap; }
  /* the summary rows: the label on the left (it may wrap), the value on the right (never) */
  .idv-sumcol__l, .idv-sumcol__r, .idv-tally__row, .idv-tally__total { justify-content: space-between; }
  :is(.idv-sumcol__l, .idv-tally__row, .idv-tally__total) b, .idv-sumcol__pill { flex: none; white-space: nowrap; }
  /* the result card hugs the face on show (the others lie over it, out of the flow), with its normal bottom padding */
  .idv-game__grid, .idv-game--rate .idv-game__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }   /* the card, then the ledger, full width (a 2-column tablet grid squeezed the rematch ledger to 146 px) */
  .idv-gcard__inner { position: relative; height: auto; }
  .idv-gcard:not([data-state="play"]) .idv-gcard__front, .idv-gcard:not([data-state="reveal"]) .idv-gcard__back, .idv-gcard:not([data-state="sum"]) .idv-gcard__sum { position: absolute; inset: 0; }
  .idv-gcard__face { justify-content: flex-start; }
}

/* =====================================================================
   v4.2 (owner 2026-10-14): QA fixes
   ===================================================================== */
/* 1. every ledger row on two lines at every width ("Ride N" + tag, then the result); no unit breaks */
.idv-tally li { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--idv-tally-line); min-height: 0; padding: var(--idv-tally-pad-d) 0; }
.idv-tally li > span { gap: var(--idv-tally-tag-gap); white-space: nowrap; }
.idv-tally li > b, .idv-tally .idv-res { justify-content: flex-start; text-align: left; }
.idv-tally .idv-kind, .idv-tally .idv-nw { white-space: nowrap; }
:is(.idv-sumcol__l, .idv-tally__row, .idv-tally__total) b, .idv-sumcol__pill { flex: none; white-space: nowrap; }
/* 3. Next Project on phones and tablets: the image fits the content width, as on Verdance and MindHYVE (the pill stays 16 px in) */
@media (max-width: 1189.98px) {
  .cs-page--indrive .cs-nextproj__media { width: 100%; }
  .cs-page--indrive .cs-nextproj__media .cs-nextproj__mock { width: 100%; height: auto; }
}
/* 4. G3 labels never clip below 400: the icon and its word may take two lines inside the cell */
@media (max-width: 399.98px) {
  .idv-g3__t { flex-wrap: wrap; row-gap: var(--sp-4); }
}

/* =====================================================================
   v4.3 (owner 2026-10-14): leftovers
   ===================================================================== */
/* 2. short desktop windows (<= 860 tall, >= 1000 wide): the rematch fits one window (rule A). Section gaps and the summary card's
   padding tighten; ledger rows keep 10 px; no text gets smaller. Taller windows (1440 x 900) are unchanged. */
@media (min-width: 1000px) and (max-height: 860px) {
  .idv-gpanel > div { padding-top: var(--idv-short-sec); padding-bottom: var(--idv-short-sec); }
  .idv-gpanel__tally { gap: var(--sp-4); }
  .idv-tally__total { margin-top: 0; padding-top: var(--sp-8); }
  .idv-gcard__sum { padding-top: var(--idv-short-sec); padding-bottom: var(--idv-short-sec); gap: var(--sp-6); }
  .idv-gcard__sum .idv-sumcol { padding-block: var(--sp-10); }
  .idv-gcard__sum .idv-gcard__sumbtns { margin-top: 0; }
}

/* v4.3 C (owner 2026-10-14): the city board. 1. centred: js/indrive.js centreCmpb() measures the composition (labels, heads, phones)
   after the labels are placed and moves both groups by --idv-cmpb-x so the outer margins match; the hairline sits halfway between
   the left group's last phone and the right group's phone (32 px each side, the phones start at their group's left edge).
   3. heads: sentence-case titles (Figtree 600, 17 px, ink) and a quiet status tag 12 px after, on the same baseline, 24 px above the
   phones; the tag: 28 px tall, a 1 px ink border at 20 %, no fill, an 8 px dot (coral / green), Figtree 600 14 px ink. All widths. */
.idv-cmpb__g { position: relative; left: var(--idv-cmpb-x, 0px); }
.idv-cmpb__phones { justify-content: flex-start; }
.idv-cmpb__head { justify-content: flex-start; align-items: baseline; gap: var(--sp-12); min-height: 0; width: 0; min-width: 100%; }
.idv-cmpb__title { margin: 0; font-family: var(--font-figtree); font-weight: var(--fw-semibold); font-size: var(--idv-cmpb-title-fs); line-height: var(--lh-130); color: var(--c-idv-ink); white-space: nowrap; }
.idv-cmpb .idv-tag { display: inline-block; box-sizing: border-box; height: var(--idv-cmpb-tag-h); padding: 0 var(--sp-12); background: none; border: var(--bw-1) solid var(--c-idv-cmpb-tag-line); color: var(--c-idv-ink); font-family: var(--font-figtree); font-weight: var(--fw-semibold); font-size: var(--fs-14); line-height: calc(var(--idv-cmpb-tag-h) - 2 * var(--bw-1)); }
/* inline-block, not flex: the tag's baseline is its text's, so it shares the title's baseline */
.idv-tag__dot { display: inline-block; vertical-align: middle; margin: 0 var(--sp-6) 0 0; position: relative; top: -0.06em; width: var(--idv-cmpb-dot); height: var(--idv-cmpb-dot); border-radius: 50%; background: var(--c-idv-cmpb-bad); }
.idv-tag--good .idv-tag__dot { background: var(--c-idv-cmpb-good); }
/* below 1000 (groups stacked): each group's head, phones, hint and list share one centred column as wide as its widest item (the
   phones), so the head starts at the first phone's left edge; the hairline above the second group keeps the full width */
@media (max-width: 999.98px) {
  .idv-cmpb__g { left: 0; display: grid; grid-template-columns: minmax(0, max-content); justify-content: center; align-content: start; }
  .idv-cmpb__head { width: auto; min-width: 0; }
  .idv-cmpb .idv-cmpb__g > .idv-plist { justify-self: center; }
}
@media (max-width: 767.98px) { .idv-cmpb .idv-cmpb__g > .idv-plist { justify-self: stretch; } }

/* v4.5 (owner 2026-10-14): the evidence tags (Observed, As a passenger, Proposed) are the city board's quiet tag: 28 px tall, no fill,
   a 1 px border at 20 % (white on dark, ink on lime), an 8 px dot (lime; a lime ring; the Proposed colour), Figtree 600 14 px in the
   body text colour; sentence case */
:root body .idv-chip { display: inline-block; box-sizing: border-box; height: var(--idv-cmpb-tag-h); min-height: 0; padding: 0 var(--sp-12); border-radius: var(--r-pill);
  border: var(--bw-1) solid var(--c-idv-tag-line-dark); background: none; color: var(--c-grey-8e8e8e);
  font-family: var(--font-figtree); font-weight: var(--fw-semibold); font-size: var(--fs-14); line-height: calc(var(--idv-cmpb-tag-h) - 2 * var(--bw-1));
  letter-spacing: 0; text-transform: none; white-space: nowrap; }
:root body .idv-chip.idv-chip--on-lime { border-color: var(--c-idv-cmpb-tag-line); color: var(--c-idv-ink); }
.idv-chip .idv-tag__dot { background: var(--c-idv-lime); }
.idv-chip--pass .idv-tag__dot { background: none; box-shadow: inset 0 0 0 var(--bw-1-5, 1.5px) var(--c-idv-lime); }
.idv-chip--prop .idv-tag__dot { background: var(--c-brand); }
.idv-chip--on-lime .idv-tag__dot { background: var(--c-idv-ink); }

/* v4.5.2 (owner 2026-10-14): a row of pills / tags shares one size. The Rate Check band: "The solution" (black fill, lime text and
   tick, as before) is the quiet tag's size: 28 px, Figtree 600 14 px on the same 26 px line, 12 px side padding, the tick 12 px
   (sized to the text), 8 px to "Proposed"; one centre line and one baseline */
.idv-solve__badges { align-items: center; gap: var(--sp-8); }
:root body .cs-page--indrive .idv-solve__badges .idv-badge { box-sizing: border-box; height: var(--idv-cmpb-tag-h); padding: 0 var(--sp-12); gap: var(--sp-6);
  font-family: var(--font-figtree); font-weight: var(--fw-semibold); font-size: var(--fs-14); line-height: calc(var(--idv-cmpb-tag-h) - 2 * var(--bw-1)); letter-spacing: 0; text-transform: none; }
.idv-solve__badges .idv-badge .idv-i { width: var(--icon-12, 12px); height: var(--icon-12, 12px); }
:root body .cs-page--indrive .idv-solve__badges .idv-chip { height: var(--idv-cmpb-tag-h); padding: 0 var(--sp-12); font-size: var(--fs-14); letter-spacing: 0; }