/* The home page's section bar (Ru's tabs of 26 Oct, after Ramp Labs' SWE-Bench page, as links to the sections
   of one scroll since 29 Oct; tabs.js), and the blocks the restructure made: the Results inside the Overview,
   Compare's views, and How it works' method beside a list of its parts.

   The bar sits where the "On this page" topnav was, at the same height and on the same ground, so the hero
   still feathers into it and the host's close button still sits 15px below it. It holds a pill control:
   the section the reader is in on a white pill that slides between them. */
.article .cb-tabs{position:sticky;top:0;z-index:30;display:flex;padding:8px 20px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background:rgba(20,20,20,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--fx-hair)}
.article .cb-tabs::-webkit-scrollbar{display:none}
/* While the pills fit, auto margins centre them; when the bar scrolls (phones) they fall to zero, so the
   first tab stays reachable, and the far edge fades. */
.article .cb-tabs.is-scrollable{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.cb-tabs-in{position:relative;display:flex;flex:none;gap:2px;margin:0 auto;padding:3px;border:1px solid var(--fx-hair-strong);border-radius:999px}
/* The tabs are controls, so they take the page's sans in sentence case (as Ramp's pills do), not the mono
   capitals of its labels; that also lets all four fit a phone. */
.cb-tabs-in a{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;font:500 15px/1 var(--display);letter-spacing:0;color:var(--fx-ink);text-decoration:none;white-space:nowrap;transition:color .25s ease}
.cb-tabs-in a:hover{color:#fff}
.cb-tabs-in a[aria-current]{color:#141414}
.cb-tabs-in a:focus-visible{outline:2px solid var(--fx-gold);outline-offset:2px}
.cb-tabs-thumb{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:999px;background:#fff;pointer-events:none;transition:left .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){.cb-tabs-thumb{transition:none}}
/* A section named in the URL lands under the bar, not behind it. */
.article .cb-panel{scroll-margin-top:var(--fx-nav)}
/* Filters in Compare, in the research page's quiet glass (insights-page.css). */
.cb-panel .chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:0;border-radius:999px;background:rgba(255,255,255,.06);color:var(--fx-ink);font:400 12px/1.5 var(--mono);letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.cb-panel .chip:hover{background:rgba(255,255,255,.26);color:#fff}
.cb-panel .chip[aria-pressed=true]{background:rgba(255,255,255,.16);color:#fff}
.cb-panel .chip:focus-visible{outline:2px solid var(--fx-gold);outline-offset:2px}
.cb-panel .loading-state{margin:0;font:400 15px/1.5 var(--display);color:var(--fx-caption)}

/* ── The Results, inside the Overview ───────────────────────────────────
   Ru (26 Oct) merged the Intro and Findings; since the one scroll (the team,
   29 Oct) the three results stack in the article's darker panel, each its
   headline and number, its chart and its table, open. */
.fd{margin-top:var(--fx-pad);scroll-margin-top:var(--fx-nav)}
/* "The Results" (the team, 29 Oct): the heading that breaks the summary from the data, the size of every section's
   headline (Kyle, the same day: the headers should match). */
.fd .ovw-finds-lead{margin:0;font:700 var(--fx-title)/1.1 var(--display);letter-spacing:-.024em;color:#fff}
/* The arrow on Compare's views (and the research page's takeaways): a chevron drawn in two borders. */
.fd-cue{display:block;width:14px;height:14px;margin:10px 0 0 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;color:var(--fx-caption);transform:rotate(45deg);transition:color .2s ease,transform .2s ease}
.fd-figure{margin:24px 0 0;padding:44px 48px 36px;background:var(--fx-ground)}
/* Each table sits under its chart in its own fold (Kyle, 29 Oct); the column it is ordered by carries a small arrow. */
.fd .rs-panel>.rs-numbers{margin-top:28px}
/* The note under the run key, saying what Other outcomes means (Kyle, 4 Nov), takes the fold's place: the key hangs
   below the grid (story.css), so the note keeps the fold's 28px clearance, and the fold follows it closer. */
.fd .rs-panel>.cv-fn{margin-top:28px}
.fd .rs-panel>.cv-fn+.rs-numbers{margin-top:16px}
/* On phones the key wraps to three rows; more room keeps the note from reading as a fourth (the review, 4 Nov). */
@media(max-width:767px){.fd .rs-panel>.cv-fn{margin-top:40px}}
.fd .rs-table th[aria-sort]::after{content:"\2193";content:"\2193" / "";margin-left:6px;color:var(--fx-caption)}
/* The runs: the story's scene without the section padding it had on its own (story.css). */
.fd .story{background:none}
.fd .story .story-scene{max-width:none;margin:0;padding:0;gap:0}
.fd .story-legend b{margin-left:6px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.fd .fd-figure>figcaption{margin-top:18px}

/* ── Compare: six views over one panel (Kyle, 27 Oct; docs/plans/compare-2026-10-27.md) ──────────────────
   The section opens on its name and headline, its line, the Highlight a model menu, then the views' row: the tab
   design Findings had (until 29 Oct), each view's name under its figure (the open tab runs into the panel, an arrow
   at each), over the panel in the article's darker fill. A view is a headline, its lead and its chart; the every-run
   grid is the sixth view since 29 Oct; "How to read these numbers" folds under the panel. On phones the row scrolls
   sideways. */
/* Compare's head (Kyle, 29 Oct: it "doesn't stand out" beside the Results): the section's name and a headline, as
   every section has, then its line. No picture (Kyle, the same day). */
.cv .cv-lead{text-wrap:balance}
.cv-hl{margin:32px 0 0}
.cv-hl-sel{position:relative;display:inline-flex;align-items:center;gap:16px;max-width:100%}
.cv-hl-k{flex:none;font:400 12px/1.4 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--fx-ink)}
.cv-face{display:flex;align-items:center;gap:10px;width:280px;max-width:100%;min-height:48px;padding:0 18px;border:1px solid var(--fx-hair-strong);border-radius:12px;background:var(--fx-ground);transition:border-color .2s ease}
.cv-face b{flex:1;min-width:0;font:600 16px/1.2 var(--display);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-face b.is-none{font-weight:400;color:var(--fx-ink)}
.cv-face .ir-logo{flex:none;width:18px;height:18px}
.cv-hl-sel select{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font-size:16px}
.cv-hl-sel:hover .cv-face{border-color:rgba(255,255,255,.42)}
.cv-hl-sel:focus-within .cv-face{outline:2px solid var(--fx-gold);outline-offset:3px}
.cv-tabs{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:24px 0 0;scroll-margin-top:calc(var(--fx-nav) + 16px)}
/* The name, then the arrow under it, as on Findings' tabs: an arrow at the side would read as a menu. */
.cv-tab{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0;padding:20px 22px 18px;border:0;background:rgba(0,0,0,.12);color:var(--fx-ink);font:600 17px/1.2 var(--display);text-align:left;white-space:nowrap;cursor:pointer;transition:background .2s ease,color .2s ease}
.cv-tab+.cv-tab{box-shadow:inset 1px 0 0 var(--fx-hair-strong)}
.cv-tab:hover{background:rgba(0,0,0,.24);color:#fff}
.cv-tab[aria-selected=true],.cv-tab[aria-selected=true]:hover{background:var(--fx-ground);color:#fff;box-shadow:none}
.cv-tab[aria-selected=true]+.cv-tab{box-shadow:none}
.cv-tab .fd-cue{flex:none;width:12px;height:12px;margin:0 0 4px 2px}
/* The open view's name in the page's metallic gold (Kyle, 29 Oct: "use the gold highlights more"; the tabs' figures
   came off the same evening). */
.cv-tab[aria-selected=true] .cv-name{background:linear-gradient(100deg,#c9994a 0%,#e0b45e 30%,#f2cf7a 44%,#fff4d2 50%,#f2cf7a 56%,#e0b45e 70%,#c9994a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media(forced-colors:active){.cv-tab[aria-selected=true] .cv-name{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}
.cv-tab:hover .fd-cue,.cv-tab:focus-visible .fd-cue{color:#fff}
.cv-tab:hover .fd-cue{transform:translateY(3px) rotate(45deg)}
.cv-tab[aria-selected=true] .fd-cue{color:var(--fx-gold)}
@media(prefers-reduced-motion:reduce){.cv-tab:hover .fd-cue{transform:rotate(45deg)}}
.cv-tab:focus-visible{outline:2px solid var(--fx-gold);outline-offset:-2px}
.cv-panel{padding:48px 48px 44px;background:var(--fx-ground)}
/* A view reached by its address (a typed #why, an in-page link) stops with its row of tabs just under the bar, as
   landingFor does on first load: the bar, the gap, the row and the panel's top padding above it. */
.cv-view{scroll-margin-top:calc(var(--fx-nav) + 16px + 130px + 48px)}
.cv-h{margin:0 0 12px;font:700 28px/1.16 var(--display);letter-spacing:-.018em;color:#fff;text-wrap:balance}
.cv-p{margin:0;max-width:68ch;font:400 17px/1.5 var(--display);color:var(--fx-ink);text-wrap:pretty}
/* Inside a view the chart titles step down under its headline, the blocks sit closer, and the how-to-read line
   follows its chart. */
.cv-view :is(.ins-block,.ins-fig,.rl-split){margin-top:40px}
.cv-view .ins-h3{font-size:20px;line-height:1.25}
.cv-view .ir-def{margin:18px 0 0;font-size:15px}
/* The speed note under How they shop's table and Head to head's (Kyle, 30 Oct), and the asterisk that points to it. */
.cv-fn{margin:14px 0 0;max-width:72ch;font:400 13px/1.45 var(--display);color:var(--fx-caption);text-wrap:pretty}
.cv-ast{margin-left:1px;font-size:.72em;line-height:0;vertical-align:super}
/* The table's headings wrap, so its ten columns fit the panel at desktop widths. Narrower, it swipes sideways
   under pinned model names, and its far edge fades while there is more (insights-results.js marks .has-more). */
.cv-view .ir-table thead th.num{min-width:72px;white-space:normal}
/* Tabular figures in the number cells only: in Visa Sans they widen the spaces too, which spread the names. */
.cv-view :is(.ir-table,.h2h-eps){font-variant-numeric:normal}
.cv-view :is(.ir-table td.num,.h2h-eps td){font-variant-numeric:tabular-nums}
.cv-view .ins-metrics{position:relative}
.cv-view .ins-metrics .ir-table :is(thead th:first-child,tbody th,tfoot th){position:sticky;left:0;z-index:1;background:var(--fx-ground)}
.cv-view .ins-metrics::after{content:"";position:absolute;top:0;right:0;bottom:0;width:40px;background:linear-gradient(90deg,rgba(30,30,30,0),var(--fx-ground));opacity:0;pointer-events:none;transition:opacity .2s ease}
.cv-view .ins-metrics.has-more::after{opacity:1}
.cv-view :is(.h2h,.h2h-measures){margin-top:36px}
.cv-view .h2h-sec{margin-top:48px}
/* Cards keep the section's lighter fill on the darker panel, so their frames show. */
.cv .cv-panel .fx-frame{background:var(--fx-grey)}
/* Every run in Compare's panel (pre-deploy review, 29 Oct): the totals stay at the frame's right edge while the
   models scroll under them, so no total is ever cut. From 1440px the episode column narrows. Until the 22-model
   results the grid then fitted whole and its model row stuck under the bar; their 22 columns fit at no width, so it
   scrolls under its totals everywhere (30 Oct), as the report's own grid does. An open episode fits the frame it
   scrolls in, whatever its width (classic scrollbars, the host's margins). */
.cv-view .og-scroll{container-type:inline-size}
.cv-view .og-scroll:focus-visible{outline:2px solid var(--fx-gold);outline-offset:4px}
.cv-view .og-detail-in{max-width:min(1100px,100cqw)}
@media(min-width:768px){
  .cv-view .og .og-tot{position:sticky;right:0;z-index:1;background:var(--fx-ground);box-shadow:-14px 0 14px -12px rgba(0,0,0,.7)}
  .cv-view .og>thead .og-tot{z-index:3}
  /* An open row's totals take the row's ground (pre-deploy review, 29 Oct). */
  .cv-view .og-row.is-open>.og-tot{background:#1b1b1b}
}
@media(min-width:1440px){
  .cv-view .og .og-ep{min-width:128px}
}
/* How they shop: the table or the behaviors, on a pill switch like the tab bar's. */
.cv-seg{display:inline-flex;gap:2px;margin:28px 0 0;padding:3px;border:1px solid var(--fx-hair-strong);border-radius:999px}
.cv-seg [role=tab]{min-height:40px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--fx-ink);font:500 14px/1 var(--display);cursor:pointer;transition:background .2s ease,color .2s ease}
.cv-seg [role=tab]:hover{color:#fff}
.cv-seg [role=tab][aria-selected=true]{background:#fff;color:#141414}
.cv-seg [role=tab]:focus-visible{outline:2px solid var(--fx-gold);outline-offset:2px}
.cv-sub{margin-top:28px}
.cv .cv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.cv .cv-cards>*,.cv .cv-cards>:nth-child(n+4){grid-column:auto}
/* How to read these numbers: one fold under the panel, like Findings' "Show the numbers". */
.cv-read{margin-top:24px}
.cv-read>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;font:400 12px/1.5 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--fx-ink)}
.cv-read>summary::-webkit-details-marker{display:none}
.cv-read>summary::before{content:"";flex:none;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.cv-read[open]>summary::before{transform:translateY(1px) rotate(225deg)}
.cv-read>summary:hover{color:var(--fx-gold)}
.cv-read>summary:focus-visible{outline:2px solid var(--fx-gold);outline-offset:4px}
.cv-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 40px;margin:16px 0 0}
.cv-notes p{margin:0;font:400 15px/1.5 var(--display);color:var(--fx-ink)}
.cv-notes b{font-weight:700;color:#fff}
.cv-defs{padding-top:24px;border-top:1px solid var(--fx-hair)}
@media(prefers-reduced-motion:reduce){.cv-read>summary::before{transition:none}}
@media(max-width:1100px){
  .cv-tab{padding:16px 16px 14px;font-size:15px}
  .cv-panel{padding:40px 32px 36px}
  .cv-view{scroll-margin-top:calc(var(--fx-nav) + 16px + 120px + 40px)}
  .cv-notes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  /* Phones: the six views in one row that scrolls sideways, the open one kept in view (tabs.js); the far edge
     fades while there is more. */
  .cv-hl-sel{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%}
  .cv-face{width:auto}
  .cv-tabs{display:flex;overflow-x:auto;scrollbar-width:none;padding-right:32px;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .cv-tabs::-webkit-scrollbar{display:none}
  .cv-tab{flex:none;padding:14px 16px 12px}
  .cv-panel{padding:28px 16px 24px}
  .cv-view{scroll-margin-top:calc(var(--fx-nav) + 16px + 116px + 28px)}
  .cv-h{font-size:24px}
  .cv-p{font-size:16px}
  .cv .cv-cards,.cv-notes{grid-template-columns:minmax(0,1fr)}
}

/* ── How it works: one run of Episode 1, after Anthropic's Project Deal, with Episode 1's market blended in (Kyle,
   29 Oct: "borrow ... the stuff from episode one and include that in how it works"; docs/plans/
   how-it-works-episode-1-2026-10-29.md). One scene pinned under the section bar: the run's four steps as an index
   on the left, each with its agent's animated orb ("the animations imply intelligence"); the run in the middle, one
   row a beat, its cast on orb cards with their words beside them; and on the right Sam's needs, where each hides and
   how many TVs it leaves, over the market, which switches off the TVs each need found rules out. The score ends on
   the same episode played by two AI models, then on how all of them did. A gold line along the top counts the way
   through (how-it-works.js). Without the script, or in a window too short to pin, the run reads as a list. */
/* Its layouts follow its own width, not the window's (Kyle, 4 Nov): inside Frontier the open article is narrower than the
   window, and three columns chosen by the window left the chat a word a line at 1280 to 1440px. */
.hd{position:relative;margin-top:88px;container:hd/inline-size}
.hd-thread{position:relative;display:flex;flex-direction:column;gap:22px;max-width:860px;margin:0;padding:0;list-style:none;container:hd-chat/inline-size}
.hd-state,.hd-index,.hd-bar{display:none}
.hd-step{margin:56px 0 0}
.hd-step:first-child{margin-top:0}
.hd-step .num{margin:0 0 10px;font:400 15px/1 var(--mono);letter-spacing:1px;color:var(--fx-accent)}
.hd-step h3{margin:0 0 10px;font:700 26px/1.2 var(--display);letter-spacing:-.02em;color:#fff}
.hd-step>p:not(.num){max-width:62ch;margin:0;font:400 18px/1.5 var(--display);color:var(--fx-ink);text-wrap:pretty}
/* A row: an orb card and the words beside it, Sam's on the left, the shopping assistant's on the right. */
.hd-row{display:flex;align-items:flex-start;gap:20px}
.hd-row--agent{flex-direction:row-reverse}
.hd-card{flex:none;display:flex;flex-direction:column;width:92px;border-radius:10px;background:var(--fx-grey);overflow:hidden}
.hd-face{position:relative;display:grid;place-items:center;width:92px;height:92px;background:radial-gradient(circle at 50% 45%,#202020,#121212 70%)}
/* The agents' animated orbs (orb.js): the customer's pale blue wave for Sam, the gold shopping orb for the
   assistant; the customer's decision and the score's ring head the register and the answer key. */
.hd-orb{display:block;width:80px;height:80px}
:is(.hd-orb,.hd-mini-orb,.hd-state-orb,.hd-index-orb) canvas{display:block;width:100%;height:100%}
.hd-mini-orb{display:inline-block;flex:none;width:28px;height:28px;margin:-8px 0}
/* Who Sam checked with (Kyle, 30 Oct: the corner portrait was hard to read): the spouse and the kid each get their own
   card beside Sam's, in their own tint and named, and the line saying Sam checked with them takes the same tint.
   how-it-works.js draws each portrait in its row's --kin-ink. */
/* The spouse in green, the kid in pink (Kyle, 30 Oct; the first cut had them the other way round). */
.hd-row[data-kin="spouse"]{--kin-ink:#93dba9}
.hd-row[data-kin="kid"]{--kin-ink:#f2a9c4}
.hd-card--kin{width:68px;margin-left:-12px}
.hd-card--kin .hd-face{width:68px;height:68px}
.hd-card--kin .hd-name{color:var(--kin-ink)}
.hd-kin{display:block;width:56px;height:56px}
.hd-kin>canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.hd-row[data-kin] .hd-note{color:var(--kin-ink)}
.hd-name{display:block;padding:7px 6px 8px;text-align:center;font:400 10px/1.25 var(--mono);letter-spacing:1px;text-transform:uppercase;color:#d6d1ca}
.hd-said{min-width:0;max-width:540px;padding-top:4px}
.hd-text{margin:0;font:400 17px/1.55 var(--display);color:#fff;text-wrap:pretty;overflow-wrap:break-word}
.hd-text+.hd-text{margin-top:8px}
.hd-note{margin:0 0 8px;font:400 11px/1.4 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#b2ada6}
.hd-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.hd-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(236,232,226,.1);font:400 11px/1.3 var(--mono);letter-spacing:1px;text-transform:uppercase;color:#fff}
.hd-chip--found{background:rgba(242,207,122,.16);color:var(--fx-gold)}
/* Where a need hid and the TVs it leaves: shown in list mode; read aloud while pinned, where the market column
   shows it (pre-deploy review, 30 Oct). */
.hd-chip-n{color:#ddd8d1;letter-spacing:.6px}
.hd.is-live .hd-chip-n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hd .wk-lock{width:10px;height:13px}
.hd-act-k{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:400 11px/1.3 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#b2ada6}
/* The pick, the register, the score, the two runs and all of them: cards across the stage, as the run ends. */
.hd-row--pick .hd-text{font-weight:600}
.hd-row:is(.hd-row--buy,.hd-row--score,.hd-row--two,.hd-row--all){display:block}
.hd-row:is(.hd-row--buy,.hd-row--score,.hd-row--two,.hd-row--all) .hd-said{max-width:none;padding:18px 22px 20px;border-radius:16px;background:var(--fx-grey)}
.hd-buy{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px}
.hd-tv{position:relative;width:58px;height:36px;margin-bottom:6px;border-radius:4px;background:linear-gradient(135deg,#f2cf7a,#c9994a);box-shadow:0 0 18px rgba(242,207,122,.35)}
.hd-tv::after{content:"";position:absolute;left:50%;bottom:-7px;width:22px;height:3px;border-radius:2px;background:#c9994a;transform:translateX(-50%)}
.hd-buy-t{margin:0;font:400 14px/1.45 var(--display);color:var(--fx-ink);overflow-wrap:break-word}
.hd-buy-t b{display:block;font-size:17px;font-weight:600;color:#fff}
.hd :is(.k-pass,.k-miss,.k-other){display:inline-block;flex:none;width:10px;height:10px;border-radius:2px;background:var(--pass,#3987e5)}
.hd .k-miss{background:var(--miss,#d95926)}
.hd .k-other{background:#6f6a65}
/* A verdict and its square (Kyle, 4 Nov: copy beside a colour square must not wrap into a centred stack or overlap): the
   square rides the first line, and a label that has to wrap does so left-aligned, as a block beside it. */
.hd-verdict{display:inline-flex;align-items:flex-start;gap:9px;margin:0;font:400 12px/1.35 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:#fff;text-align:left}
.hd-verdict>i{margin-top:calc((1.35em - 10px) / 2)}
.hd-row--score .hd-act-k{color:#6aaeff}
.hd-key-k{margin:0 0 8px;font:400 14px/1.45 var(--display);color:var(--fx-ink)}
.hd-key{width:100%;margin:2px 0 14px;border-collapse:collapse}
.hd-key :is(th,td){padding:8px 0;border-bottom:1px solid var(--fx-hair);text-align:left;font:400 15px/1.3 var(--display);color:#fff}
.hd-key thead th{padding-top:0;font:400 10.5px/1.3 var(--mono);letter-spacing:1px;text-transform:uppercase;color:#b2ada6}
.hd-key :is(td,thead th+th){width:84px;text-align:center}
.hd-tick{display:inline-block;flex:none;width:12px;height:7px;border:solid var(--pass,#3987e5);border-width:0 0 2px 2px;transform:translateY(-3px) rotate(-45deg)}
.hd-cross{position:relative;display:inline-block;flex:none;width:12px;height:12px}
.hd-cross::before,.hd-cross::after{content:"";position:absolute;left:5px;top:-1px;width:2px;height:14px;border-radius:1px;background:var(--miss,#d95926);transform:rotate(45deg)}
.hd-cross::after{transform:rotate(-45deg)}
/* The same episode, two runs: each model's TV, and each of Sam's six needs, met or not, found or not. */
/* The two recorded runs side by side (Kyle, 30 Oct): one table, Sam's needs listed once, a pair of columns under
   each model's lab logo and name, what each bought on top and how each run ended underneath. */
.hd-duo{width:100%;max-width:780px;margin:2px 0 16px;border-collapse:collapse}
.hd-duo :is(th,td){padding:7px 0;border-bottom:1px solid var(--fx-hair);text-align:left;font:400 14.5px/1.3 var(--display);color:#fff}
.hd-duo :is(thead,tfoot) :is(th,td){border-bottom:0}
.hd-duo tbody td{width:88px;text-align:center}
.hd-duo-who th{padding:0 6px 10px;text-align:center}
.hd-duo-m{display:inline-flex;align-items:center;gap:8px;font:600 15px/1.25 var(--display);color:#fff}
.hd-duo-logo{flex:none;width:18px;height:18px;color:#fff}
.hd-duo-tv th{vertical-align:top;font:400 10.5px/1.3 var(--mono);letter-spacing:1px;text-transform:uppercase;color:#b2ada6}
.hd-duo-tv td{padding:0 8px 14px;text-align:center;font:400 13px/1.35 var(--display);color:var(--fx-ink)}
.hd-duo-tv b{display:block;font-weight:600;color:#fff}
.hd-duo-k th{padding:0 0 6px;border-bottom:1px solid var(--fx-hair)!important;text-align:center;font:400 10.5px/1.3 var(--mono);letter-spacing:1px;text-transform:uppercase;color:#b2ada6}
.hd-duo tfoot td{padding-top:14px;text-align:center;vertical-align:top}
/* Each verdict on one line in its two columns (176px): "Purchase did not pass" wrapped at the verdict's own size. */
.hd-duo tfoot .hd-verdict{font-size:11px;letter-spacing:.6px}
.hd-duo .hd-s{display:none}
.hd-row--all .hiw-ends{margin:0;padding:0;background:none}
.hd-row--all .hiw-outcomes{display:flex;flex-wrap:wrap;gap:8px 22px}
/* How all of them did: one square per run, each model's three in a column, most passes first. */
.hd-all-t{max-width:56ch;margin:0 0 14px;font:400 17px/1.5 var(--display);color:#fff;text-wrap:pretty}
.hd-allruns{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.hd-allruns .ep-story-run{display:grid;gap:3px}
.hd-allruns i{display:block;width:12px;height:12px;border-radius:2px;background:#6f6a65}
.hd-allruns .k-pass{background:var(--pass,#3987e5)}
.hd-allruns .k-miss{background:var(--miss,#d95926)}
/* Pinned (.is-live): the scene holds the window under the section bar while the section scrolls by, about two thirds
   of a window per beat, one beat per row (--hd-beats, set by the script). */
.hd.is-live{height:calc(100vh - var(--fx-nav) + var(--hd-beats,14) * 64vh);height:calc(100svh - var(--fx-nav) + var(--hd-beats,14) * 64svh)}
.hd.is-live>.hd-stage{position:sticky;top:var(--fx-nav);box-sizing:border-box;display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr) minmax(300px,380px);grid-template-rows:minmax(0,1fr);column-gap:clamp(28px,3.5vw,56px);height:calc(100vh - var(--fx-nav));height:calc(100svh - var(--fx-nav));padding:30px 0 22px}
.hd.is-live .hd-bar{position:absolute;left:0;right:0;top:0;display:block;height:2px;background:rgba(236,232,226,.08)}
.hd-bar i{display:block;height:100%;background:var(--fx-gold);transform-origin:0 50%;transform:scaleX(var(--p,0))}
/* The index: the four steps, each with its orb, the current one lit with its caption. */
.hd.is-live .hd-index{display:flex;flex-direction:column;gap:20px;grid-column:1;grid-row:1;margin:0;padding:10px 24px 0 0;list-style:none;border-right:1px solid var(--fx-hair-strong)}
.hd-index li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;align-items:start;color:#8b8681;transition:color .3s ease}
.hd-index li>:not(.hd-index-orb){grid-column:2}
.hd-index-orb{grid-column:1;grid-row:1/4;display:block;width:52px;height:52px;opacity:.45;transform:scale(.62);transform-origin:50% 0;transition:opacity .3s ease,transform .3s ease}
.hd-index li.is-current .hd-index-orb{opacity:1;transform:none}
.hd-index .num{margin:0 0 6px;font:400 13px/1 var(--mono);letter-spacing:1px;color:inherit}
.hd-index h3{margin:0;font:700 21px/1.2 var(--display);letter-spacing:-.015em;color:inherit}
.hd-index li>p:not(.num){display:none;margin:10px 0 0;font:400 15px/1.5 var(--display);color:var(--fx-ink);text-wrap:pretty}
.hd-index li.is-current{color:#fff}
.hd-index li.is-current .num{color:var(--fx-accent)}
.hd-index li.is-current>p:not(.num){display:block}
/* The run so far in the current step: rows sit at the top until they fill the column, then the newest stays in view
   and older ones rise out under a fade, as a chat scrolls. */
.hd.is-live .hd-thread{grid-column:2;grid-row:1;gap:16px;max-width:none;min-height:0;overflow:hidden;--hd-fade:56px}
.hd.is-live .hd-thread.is-full{-webkit-mask:linear-gradient(transparent,#000 var(--hd-fade));mask:linear-gradient(transparent,#000 var(--hd-fade))}
/* Rows not yet said, and the steps (the index shows them), stay in the list for screen readers, out of sight; their
   cards leave the layout, so their orbs rest (pre-deploy review, 29 Oct). */
.hd.is-live .hd-thread>li:not(.is-on),.hd.is-live .hd-step{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hd.is-live .hd-thread>li:not(.is-on) :is(.hd-face,.hd-mini-orb,.hd-allruns){display:none}
.hd.is-live .hd-thread>li.is-on{flex:none}
.hd.is-live .hd-thread>li.is-new{animation:hd-in .45s cubic-bezier(.2,.8,.2,1) both}
/* The conversation goes on (Kyle, 30 Oct: "we're trying to manage for short attention spans"): while there's more to
   come, three dots under the newest message, on the side of whoever speaks next, as a chat shows someone typing. Only
   while the scene is pinned; listed, the whole run shows. */
.hd-typing{display:flex;justify-content:flex-start;margin:0;list-style:none}
.hd-typing[data-who="agent"]{justify-content:flex-end}
.hd:not(.is-live) .hd-typing{display:none}
.hd.is-live .hd-typing.is-cut{visibility:hidden}
.hd-typing-b{display:inline-flex;align-items:center;gap:6px;padding:12px 16px;border-radius:999px;background:rgba(236,232,226,.1)}
.hd-typing-b i{display:block;width:8px;height:8px;border-radius:50%;background:#e2ddd6;animation:hd-typing 1.2s ease-in-out infinite}
/* In the colour of whoever is typing, as their orbs are: Sam's pale blue, the assistant's gold. */
.hd-typing[data-who="sam"] .hd-typing-b i{background:#c7edff}
.hd-typing[data-who="agent"] .hd-typing-b i{background:var(--fx-gold)}
.hd-typing-b i:nth-child(2){animation-delay:.16s}
.hd-typing-b i:nth-child(3){animation-delay:.32s}
@keyframes hd-typing{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-4px)}}
@keyframes hd-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* The market column: Sam's needs over the market, which switches off the TVs each need found rules out. At the score
   it makes way, and the score takes the stage. */
.hd.is-live .hd-state{display:flex;flex-direction:column;gap:12px;grid-column:3;grid-row:1;min-height:0}
.hd.is-live.is-scoring .hd-state{display:none}
.hd.is-live.is-scoring .hd-thread{grid-column:2/4}
.hd-needs,.hd-market-card{padding:14px 16px 16px;border-radius:14px;background:var(--fx-grey)}
.hd-needs{background:linear-gradient(155deg,rgba(242,207,122,.14),rgba(242,207,122,.03) 55%,rgba(242,207,122,0)),var(--fx-grey)}
.hd-market-card{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;background:linear-gradient(155deg,rgba(199,237,255,.09),rgba(199,237,255,0) 55%),var(--fx-grey)}
.hd-state-h{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;row-gap:4px;margin:0 0 12px}
.hd-state-orb{grid-row:1/3;display:block;width:44px;height:44px}
.hd-state-k{display:block;margin:0;font:400 10.5px/1.3 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#b2ada6}
.hd-needs .hd-state-k{color:var(--fx-gold)}
.hd-state-k .wk-lock{display:inline-block;margin-right:7px;vertical-align:-2px}
.hd-state-n,.hd-count{margin:0;font:400 11px/1.2 var(--mono);letter-spacing:.6px;text-transform:uppercase;color:#b2ada6}
.hd-state-n b,.hd-count b{margin-right:5px;font:700 26px/1 var(--display);letter-spacing:-.01em;color:var(--fx-gold)}
.hd-count b{color:#fff}
/* Sam's needs: hidden ones dim (where each hides beside them), found ones filled, popping and glowing as they unlock,
   each with the TVs left once it is found. */
.hd-facts{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.hd-fact{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:30px;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.04);font:400 13px/1.25 var(--display);transition:background .35s ease}
.hd-fact-t,.hd-fact-h{display:inline-flex;align-items:center;gap:7px}
.hd-fact-t{display:none;color:#fff}
.hd-fact-h{color:#b8b3ac}
.hd-fact-w{grid-column:1;font:400 9.5px/1.3 var(--mono);letter-spacing:.8px;text-transform:uppercase;color:#b8b3ac}
.hd-fact-n{grid-column:2;grid-row:1/3;font:400 10px/1 var(--mono);letter-spacing:.6px;text-transform:uppercase;color:#b8b3ac;visibility:hidden}
.hd-fact-n b{margin-right:3px;font:700 15px/1 var(--display);color:#fff}
.hd-fact.is-found{background:rgba(236,232,226,.11)}
.hd-fact.is-found .hd-fact-t{display:inline-flex}
.hd-fact.is-found .hd-fact-h{display:none}
.hd-fact.is-found .hd-fact-n{visibility:visible}
/* On a found need's lighter fill its small labels go lighter too, to keep 4.5:1 (pre-deploy review, 30 Oct). */
.hd-fact.is-found :is(.hd-fact-w,.hd-fact-n){color:#e2ddd6}
.hd-fact.is-hidden-found :is(.hd-fact-w,.hd-fact-n){color:#f3e8c9}
.hd-fact.is-hidden-found{background:rgba(242,207,122,.18)}
.hd-fact.is-hidden-found .hd-fact-t{color:var(--fx-gold)}
.hd-fact:not(.is-hidden-found) .hd-open{display:none}
.hd-fact.is-new{animation:hd-unlock 1.1s cubic-bezier(.2,.8,.2,1)}
@keyframes hd-unlock{0%{transform:scale(.94);box-shadow:0 0 0 rgba(242,207,122,0)}35%{transform:scale(1.04);box-shadow:0 0 26px rgba(242,207,122,.6)}100%{transform:none;box-shadow:0 0 0 rgba(242,207,122,0)}}
.hd-market{display:block;flex:1 1 auto;width:100%;min-height:90px}
.hd-market-k{margin:10px 0 0;font:400 12.5px/1.4 var(--display);color:var(--fx-ink);text-wrap:pretty}
.hd-market-k b{color:#fff;font-weight:600}
.hd-state.no-market .hd-market{display:none}
/* A card glows as the run changes it. */
.hd-needs.is-pulse{animation:hd-glow-gold 1.3s ease-out}
.hd-market-card.is-pulse{animation:hd-glow-blue 1.3s ease-out}
@keyframes hd-glow-gold{0%{box-shadow:0 0 0 rgba(242,207,122,0)}30%{box-shadow:0 0 38px rgba(242,207,122,.34)}100%{box-shadow:0 0 0 rgba(242,207,122,0)}}
@keyframes hd-glow-blue{0%{box-shadow:0 0 0 rgba(199,237,255,0)}30%{box-shadow:0 0 38px rgba(199,237,255,.2)}100%{box-shadow:0 0 0 rgba(199,237,255,0)}}
@media(prefers-reduced-motion:reduce){.hd.is-live .hd-thread>li.is-new,.hd-fact.is-new,:is(.hd-needs,.hd-market-card).is-pulse,.hd-typing-b i{animation:none}.hd-index li,.hd-index-orb,.hd-fact{transition:none}.hd-typing-b i{opacity:.75}}
.vf-motion-pause :is(.hd.is-live .hd-thread>li.is-new,.hd-fact.is-new,.hd-needs.is-pulse,.hd-market-card.is-pulse,.hd-typing-b i){animation:none}
.vf-motion-pause :is(.hd-index li,.hd-index-orb,.hd-fact){transition:none}
/* Short wide windows: the needs and the market a size down, so both fit the column (pre-deploy review, 30 Oct). */
@media(max-height:760px){@container hd (min-width:1120px){
  .hd.is-live .hd-state{gap:8px}
  .hd.is-live :is(.hd-needs,.hd-market-card){padding:10px 12px 12px}
  .hd.is-live .hd-state-orb{width:34px;height:34px}
  .hd.is-live .hd-state-h{margin-bottom:8px}
  .hd.is-live .hd-fact{min-height:0;padding:3px 8px}
  .hd.is-live .hd-market{min-height:52px}
  .hd.is-live .hd-market-k{margin-top:6px}
}}
/* The section 920 to 1120px wide (a window of 1024 to 1244px on its own, wider inside Frontier's sheet): no room for
   three columns; the market and Sam's needs sit side by side under the run. At 1120px and up the chat keeps 360px. */
@container hd (min-width:920px) and (max-width:1119.98px){
  .hd.is-live>.hd-stage{grid-template-columns:minmax(220px,270px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .hd.is-live .hd-index{grid-row:1/3}
  .hd.is-live .hd-state{flex-direction:row;grid-column:2;grid-row:2;margin-top:14px}
  .hd.is-live .hd-state>*{flex:1 1 0}
  .hd.is-live.is-scoring .hd-thread{grid-column:2}
  .hd.is-live .hd-fact{min-height:0;padding:3px 8px}
  /* The card's row sets the market's height, not its bitmap: one kept from another width, or squared while the scoring
     hid it, grew the card and squeezed the chat (review, 30 Oct). */
  .hd.is-live .hd-market{min-height:70px;flex-basis:0}
}
/* Narrower than 920px (phones and tablets): the current step, then a band with the market, its count and Sam's needs,
   then the run. */
@container hd (max-width:919.98px){
  .hd.is-live>.hd-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);padding:22px 0 14px}
  .hd.is-live .hd-index{grid-column:1;grid-row:1;padding:0 0 12px;border-right:0;border-bottom:1px solid var(--fx-hair-strong)}
  .hd.is-live .hd-index li:not(.is-current){display:none}
  .hd.is-live .hd-index li{grid-template-columns:40px minmax(0,1fr)}
  .hd.is-live .hd-index-orb{width:40px;height:40px}
  .hd-index h3{font-size:20px}
  .hd-index li>p:not(.num){margin-top:6px;font-size:14px;line-height:1.45}
  .hd.is-live .hd-state{display:grid;grid-column:1;grid-row:2;grid-template-columns:auto minmax(0,1fr);gap:10px;margin:12px 0 0}
  .hd.is-live.is-scoring .hd-thread{grid-column:1}
  .hd.is-live .hd-thread{grid-column:1;grid-row:3;padding-top:14px}
  .hd.is-live .hd-thread{--hd-fade:40px}
  .hd.is-live :is(.hd-needs,.hd-market-card){padding:10px 12px 12px}
  .hd.is-live :is(.hd-state-orb,.hd-state-n,.hd-more,.hd-market-k){display:none}
  .hd.is-live .hd-state-h{grid-template-columns:minmax(0,1fr);margin-bottom:8px}
  .hd.is-live .hd-count{white-space:normal}
  .hd.is-live .hd-count b{font-size:18px}
  .hd.is-live .hd-market{min-height:0;height:44px;flex:none}
  .hd.is-live .hd-facts{display:flex;gap:5px}
  .hd.is-live .hd-fact{display:block;width:13px;height:13px;min-height:0;padding:0;border-radius:3px;background:#3d3d3d;font-size:0}
  .hd.is-live .hd-fact.is-found{background:#fff}
  .hd.is-live .hd-fact.is-hidden-found{background:var(--fx-gold)}
  .hd.is-live .hd-fact>*{display:none}
  .hd-card{width:64px}
  .hd-face{width:64px;height:64px}
  .hd-orb{width:56px;height:56px}
  .hd-name{padding:6px 2px 7px;font-size:8.5px;letter-spacing:.3px}
  .hd-card--kin{width:48px;margin-left:-8px}
  .hd-card--kin .hd-face{width:48px;height:48px}
  .hd-kin{width:40px;height:40px}
  .hd-row{gap:14px}
  .hd-text{font-size:15.5px}
  .hd-duo :is(th,td){font-size:13px}
  /* The needs column takes only what its names need, so the models' columns get the rest (the second review, 30 Oct). */
  .hd-duo th[scope=row]{width:1%;white-space:nowrap;padding-right:16px}
  .hd-duo tbody td{width:22%}
  .hd-duo-m{font-size:13.5px}
}
/* The chat follows its own width too (Kyle, 4 Nov: the cards "should dynamically resize", the text was "cut off and resized
   to be too vertical", and Bought overlapped the TV's line): narrow, the cards take their phone size, and the register's
   verdict moves under the TV it names. */
@container hd-chat (max-width:420px){
  .hd-card{width:64px}
  .hd-face{width:64px;height:64px}
  .hd-orb{width:56px;height:56px}
  .hd-name{padding:6px 2px 7px;font-size:8.5px;letter-spacing:.3px}
  .hd-card--kin{width:48px;margin-left:-8px}
  .hd-card--kin .hd-face{width:48px;height:48px}
  .hd-kin{width:40px;height:40px}
  .hd-row{gap:14px}
  .hd-text{font-size:15.5px}
}
@container hd-chat (max-width:520px){
  .hd-buy{grid-template-columns:auto minmax(0,1fr)}
  .hd-buy .hd-verdict{grid-column:2}
}
@media(max-width:599px){
  .hd-row:is(.hd-row--buy,.hd-row--score,.hd-row--two,.hd-row--all) .hd-said{padding:16px 16px 18px}
  .hd-key :is(td,thead th+th){width:60px}
  .hd-key :is(th,td){font-size:14px}
  .hd-step h3{font-size:22px}
  .hd-step>p:not(.num){font-size:16px}
  /* The two runs stay side by side, so both show at once (pre-deploy review, 30 Oct): short need names and narrow mark
     columns on phones. */
  .hd-duo .hd-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hd-duo .hd-s{display:inline}
  .hd-duo th[scope=row]{padding-right:10px}
  .hd-duo-k th{font-size:9px;letter-spacing:.4px}
  .hd-duo-who th{padding:0 2px 8px}
  .hd-duo-m{flex-direction:column;gap:5px;font-size:12.5px}
  .hd-duo-tv td{padding:0 4px 12px;font-size:11.5px}
  /* The square beside its label, which wraps beside it, as at every other width (Kyle, 4 Nov: "copy should adjust
     ... and not overlap"; the review: the stacked, centred pair was what he described). */
  .hd-duo tfoot .hd-verdict{gap:6px;font-size:9.5px;line-height:1.3;letter-spacing:.6px}
  .hd-duo tfoot .hd-verdict>i{margin-top:calc((1.3em - 10px) / 2)}
  .hd-row--all .hiw-outcomes li{font-size:10px;letter-spacing:.8px}
  /* All the models' runs in two even rows, not a long row and a short one (the review, 30 Oct). */
  .hd-allruns{display:grid;grid-template-columns:repeat(var(--cols,11),max-content)}
}
/* The six, after the run: around the shopping assistant on wide screens (Kyle, 29 Oct: "highlight that part and show
   the cards"), under it on narrower ones. */
.hw-six{margin-top:112px}
.hw-six .dims-lead{margin:0}
.hw-six-stage{position:relative;display:flex;flex-direction:column;margin-top:36px}
.hw-six-stage .dims{margin:0}
/* Under 1024px the shopping assistant stands over its six. */
.hw-six-mid{order:-1;display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 auto 28px;text-align:center}
.hw-six-orb{display:block;width:clamp(116px,11vw,156px);aspect-ratio:1;margin-bottom:8px}
.hw-six-orb canvas{display:block;width:100%;height:100%}
.hw-six-mid b{font:400 13px/1.3 var(--mono);letter-spacing:1.8px;text-transform:uppercase;color:#fff}
.hw-six-mid span:last-child{font:400 11px/1.4 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--fx-caption)}
@media(min-width:1024px){
  .hw-six-stage{display:grid}
  .hw-six-stage .dims{grid-area:1/1;grid-template-columns:minmax(0,1fr) clamp(220px,21vw,290px) minmax(0,1fr)}
  .hw-six-stage .dim:nth-child(-n+3){grid-column:1}
  .hw-six-stage .dim:nth-child(n+4){grid-column:3}
  .hw-six-stage .dim:nth-child(3n+1){grid-row:1}
  .hw-six-stage .dim:nth-child(3n+2){grid-row:2}
  .hw-six-stage .dim:nth-child(3n){grid-row:3}
  .hw-six-mid{grid-area:1/1;align-self:center;justify-self:center;margin:0;width:clamp(220px,21vw,290px)}
}

/* The four ways a run ends: a strip under the steps, so card 04 is no longer the one that sets the row's height
   (Kyle, 27 Oct: "so the cards even out"). Its line, then the four, named and coloured as the runs' key names
   and colours them (stats.js, story.css), in the page's mono capitals. */
.hiw-ends{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 36px;margin:24px 0 0;padding:22px 28px;background:var(--fx-grey)}
/* The strip takes the other ground from its section's: grey on black (How it works since 29 Oct), black on grey. */
.comp[data-bg=grey] .hiw-ends{background:var(--fx-ground)}

.hiw-ends>p{margin:0;font:400 15px/1.45 var(--display);color:var(--fx-ink)}
.hiw-outcomes{display:flex;flex-wrap:wrap;gap:10px 32px;margin:0;padding:0;list-style:none}
/* The square on the label's first line, the label wrapping beside it, never under it (the review, 4 Nov). */
.hiw-outcomes li{display:flex;align-items:flex-start;font:400 11px/1.4 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:#fff}
.hiw-outcomes i{flex:none;width:10px;height:10px;margin:calc((1.4em - 10px) / 2) 9px 0 0;border-radius:2px}
.hiw-outcomes .k-pass{background:var(--pass)}.hiw-outcomes .k-miss{background:var(--miss)}.hiw-outcomes .k-other{background:var(--cb-story-other)}
/* What the episodes are built to catch: the hypothesis under its title, left-aligned as Frontier sets its text, then
   the five patterns as framed cards, two wide then three, each led by a small scene in the chat's style that shows
   where the run goes wrong (Kyle, 29 Oct: the drawn icons were "bad … find a different way to represent this"). */
.hiw-catch{margin-top:112px}
.hiw-catch .hiw-catch-h{margin-top:0}
.hiw-catch-rule{max-width:70ch;margin:20px 0 0;font:400 17px/1.55 var(--display);color:var(--fx-ink);text-wrap:pretty}
.hiw-patterns{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin:40px 0 0;padding:0}
.hiw-pattern{display:flex;flex-direction:column;gap:12px;padding:28px 26px 28px}
.hiw-pattern:nth-child(-n+2){grid-column:span 3}
.hiw-pattern:nth-child(n+3){grid-column:span 2}
.hiw-pattern .ins-pattern-k{position:relative;display:block;font:400 12px/1.4 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--fx-gold)}
.hiw-pattern p{position:relative;margin:0;font:400 15px/1.45 var(--display);color:#fff;text-wrap:pretty}
/* A scene: a little screen of the run, where it goes wrong in orange. */
.hps{position:relative;display:flex;flex-direction:column;justify-content:center;gap:8px;height:164px;margin:0 0 10px;padding:16px 18px;border-radius:12px;background:var(--fx-ground);overflow:hidden;font:400 13px/1.3 var(--display);color:#fff}
.hps-mark{position:relative;display:inline-block;flex:none;width:12px;height:12px;margin-left:auto}
.hps-mark--ok::after,.hps-mark--wrong::after{content:"";position:absolute;left:1px;top:1px;width:10px;height:5px;border:solid var(--pass,#3987e5);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.hps-mark--wrong::after{border-color:var(--miss,#d95926)}
.hps-mark--x::before,.hps-mark--x::after{content:"";position:absolute;left:5px;top:-1px;width:2px;height:14px;border-radius:1px;background:var(--miss,#d95926);transform:rotate(45deg)}
.hps-mark--x::after{transform:rotate(-45deg)}
.hps-tag{display:inline-block;align-self:flex-start;padding:3px 8px;border-radius:999px;background:rgba(217,89,38,.16);font:400 10px/1.3 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#f08a5d}
.hps-lock{width:11px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
/* 1: the stated two met, four never asked about. */
.hps-dossier{display:flex;flex-direction:column;gap:6px}
.hps-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:6px;background:rgba(236,232,226,.07)}
.hps-row .hps-mark{order:-1;margin:0}
.hps-locks{display:flex;gap:8px;padding:4px 10px;color:#6f6a65}
/* 2: a listing whose return policy is blank, ticked anyway. */
.hps-listing{display:flex;flex-direction:column;gap:5px;padding:10px 12px;border-radius:8px;background:rgba(236,232,226,.07)}
.hps-listing-h{display:flex;align-items:center;gap:9px;margin-bottom:3px;font-weight:600}
.hps-tv{display:inline-block;width:22px;height:14px;border-radius:2px;background:#77726c}
.hps-spec{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--fx-ink)}
.hps-spec.is-wrong{color:#fff}
.hps-blank{color:#f08a5d}
/* 3: "nothing fits", with a fit sitting unopened in an earlier search. */
.hps-results{display:flex;flex-direction:column;gap:5px}
.hps-results i{position:relative;display:flex;align-items:center;height:12px;border-radius:3px;background:rgba(236,232,226,.12)}
.hps-results i:nth-child(2n){width:84%}
.hps-results i.is-fit{background:rgba(242,207,122,.75);width:70%}
.hps-results i.is-fit .hps-tag{position:absolute;left:calc(100% + 8px);white-space:nowrap}
/* Chat bubbles, small. */
.hps-bubble{display:flex;align-items:center;gap:10px;max-width:86%;padding:8px 12px;font-size:13px}
.hps-bubble--sam{align-self:flex-start;border-radius:14px 14px 14px 4px;background:var(--fx-grey)}
.hps-bubble--agent{align-self:flex-end;border-radius:14px 14px 4px 14px;background:#3a3324}
.hps--talked .hps-bubble--sam,.hps--bundle .hps-bubble--agent{margin-bottom:4px}
/* 5: a bundle agreed in chat; the order leaves part of it off. */
.hps-cart{display:flex;flex-direction:column;gap:4px;padding:8px 12px;border-radius:8px;background:rgba(236,232,226,.07)}
.hps-cart-k{font:400 10px/1.3 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--fx-caption)}
.hps-cart-row{display:flex;align-items:center;font-size:12.5px}
.hps-cart-row.is-gone{color:#f08a5d;text-decoration:line-through;text-decoration-color:rgba(240,138,93,.7)}
@media(max-width:1180px){.hiw-patterns{grid-template-columns:repeat(2,minmax(0,1fr))}.hiw-pattern:nth-child(n){grid-column:auto}.hiw-pattern:last-child{grid-column:1/-1}}
@media(max-width:599px){.hiw-patterns{grid-template-columns:1fr}.hiw-pattern:last-child{grid-column:auto}.hiw-catch{margin-top:80px}.hps{height:150px}}

@media(max-width:1100px){
  /* The four ends in two even rows, so none is left on a line of its own. */
  .hiw-outcomes{display:grid;grid-template-columns:repeat(2,max-content)}
}
@media(max-width:767px){
  .hiw-ends{flex-direction:column;align-items:flex-start;padding:22px 24px 24px}
  .hiw-outcomes{display:flex;flex-direction:column;gap:10px}
  /* Six links don't fit a phone: the bar scrolls sideways and keeps the current section's link in view. */
  .article .cb-tabs{padding:8px}
  .cb-tabs-in{gap:0;padding:2px}
  .cb-tabs-in a{padding:0 10px;font-size:13px}
  .cb-tabs-thumb{top:2px;bottom:2px}
  .fd-figure{padding:24px 16px 20px}
  /* The tables on a phone (29 Oct): the logo says the lab, so the provider goes; names and headings wrap,
     and each rate's count sits under it, so the three-column tables fit and the runs' four scroll least. */
  .fd .rs-table th,.fd .rs-table td{padding:12px 6px}
  .fd .rs-table thead th{font-size:10px;letter-spacing:.6px}
  .fd .rs-table th[scope=row]{font-size:11px;letter-spacing:.4px;white-space:normal}
  .fd .rs-table th[scope=row] small{display:none}
  .fd .rs-table td{font-size:14px;white-space:nowrap}
  .fd .rs-table td small{display:block;margin:2px 0 0}
}