/* v2 pages (home, underwriting, claims, about, dispatch, articles): hovers, hero load-in, and the breakpoints site.css doesn't cover. */
body { background: #0B0B0C; }
/* Homepage case story: three rows on the left step through one case on the right. On wide screens the story pins while
   its track scrolls past (like the feature carousel): each third of the scroll shows the next view and the active row's bar
   shows how far through it you are (home-v2.js sets --fill). Below 1040px it doesn't pin and the rows switch it.
   The views are drawn in a terminal style rather than the product UI. All three are one fixed height. */
[data-v2] .case-story-track { position: relative; height: calc(520px + 135vh); }
[data-v2] .case-story-track > .case-story { position: sticky; top: max(90px, calc(50vh - 260px)); }
[data-v2] .case-story {
  display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 56px; align-items: center; scroll-margin-top: 100px;
}
[data-v2] .case-story * { box-sizing: border-box; }
[data-v2] .case-story-choices { min-width: 0; }
[data-v2] .case-story-choice {
  position: relative; display: block; width: 100%; padding: 28px 0; border: 0; border-radius: 0; background: transparent;
  color: #ECEBE7; font: inherit; text-align: left; cursor: pointer;
}
[data-v2] .case-story-choice:last-child { border-bottom: 1px solid #2A2A2C; }
[data-v2] .case-story-choice:focus-visible { outline: 2px solid #4A94F0; outline-offset: 5px; }
[data-v2] .case-story-bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #2A2A2C; overflow: hidden; }
[data-v2] .case-story-bar > i { position: absolute; inset: 0; background: #ECEBE7; transform: scaleX(var(--fill, 0)); transform-origin: left center; }
[data-v2] .case-story-choice[aria-pressed="true"] .case-story-bar { background: #3A3A3C; }
[data-v2] .case-story:not([data-pinned]) .case-story-choice[aria-pressed="true"] .case-story-bar > i { transform: none; }
[data-v2] .case-story-choice:focus:not(:focus-visible) { outline: none; }
[data-v2] .case-story-title { display: flex; gap: 16px; align-items: baseline; font-size: clamp(22px,1.85vw,28px); line-height: 1.28; letter-spacing: -0.02em; color: #8C8A83; transition: color 300ms ease; }
[data-v2] .case-story-choice:hover .case-story-title, [data-v2] .case-story-choice[aria-pressed="true"] .case-story-title { color: #ECEBE7; }
[data-v2] .case-story-number { flex-shrink: 0; color: #6C6B66; font: 400 11px/1.5 'IBM Plex Mono',monospace; letter-spacing: 0; }
[data-v2] .case-story-choice[aria-pressed="true"] .case-story-number { color: #ECEBE7; }
[data-v2] .case-story-copy { display: block; margin: 12px 0 0 30px; max-width: 32em; color: #6C6B66; font-size: 16px; line-height: 1.6; transition: color 300ms ease; }
[data-v2] .case-story-choice[aria-pressed="true"] .case-story-copy { color: #A8A7A1; }

/* the stage: scenes stack in one grid cell, so it is always as tall as the tallest and nothing jumps */
[data-v2] .case-story-stage { display: grid; min-width: 0; height: 520px; }
[data-v2] .case-story-scene { grid-area: 1 / 1; min-width: 0; min-height: 0; display: flex; align-items: stretch; justify-content: center; transition: opacity 450ms ease, transform 450ms ease, visibility 0s linear 0s; }
[data-v2] .case-story-scene[data-active="false"] { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 300ms ease, transform 300ms ease, visibility 0s linear 300ms; pointer-events: none; }
[data-v2] .case-story-scene[data-active="true"] .cs-in { animation: cs-in 520ms cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, 0ms); }
@keyframes cs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* the three views, terminal style: monospace, ruled panels, amber heads, green/amber/red marks, segmented bars */
[data-v2] .case-story, [data-v2] .ct-claim {
  --t-bg: #121210; --t-bg2: #171714; --t-line: #2C2A26; --t-line2: #22211E; --t-ink: #E4E1D8; --t-muted: #8A867C; --t-dim: #67645C;
  --t-amber: #E8A33D; --t-green: #93B84E; --t-red: #E0613A; --t-blue: #6FA8F5;
}
[data-v2] .ct { display: flex; flex-direction: column; width: 100%; height: 100%; border: 1px solid var(--t-line); background: var(--t-bg); color: var(--t-ink); font: 400 12.5px/1.5 'IBM Plex Mono', monospace; overflow: hidden; }
[data-v2] .ct-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--t-line); }
[data-v2] .ct-title { color: var(--t-amber); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
[data-v2] .ct-tags { display: flex; flex-wrap: wrap; gap: 6px; }
[data-v2] .ct-tag { padding: 3px 8px; border: 1px solid var(--t-line); color: var(--t-muted); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
[data-v2] .ct-ok { border-color: rgba(147,184,78,0.55); color: var(--t-green); }
[data-v2] .ct-bad { border-color: rgba(224,97,58,0.55); color: var(--t-red); }
[data-v2] .ct-label { color: var(--t-muted); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
[data-v2] .ct-dim { color: var(--t-dim); }
[data-v2] .ct-c-green { color: var(--t-green); } [data-v2] .ct-c-amber { color: var(--t-amber); } [data-v2] .ct-c-red { color: var(--t-red); }
[data-v2] .ct-case { padding: 12px 16px 10px; }
[data-v2] .ct-case-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
[data-v2] .ct-case-id { font-size: 22px; font-weight: 500; letter-spacing: 0.02em; }
/* the sources as document types: small line icons with their captions */
[data-v2] .ct-docs { padding: 10px 16px 11px; border-top: 1px solid var(--t-line); }
[data-v2] .ct-docs-row { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 7px; }
[data-v2] .ct-doc { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--t-muted); }
[data-v2] .ct-doc svg { width: 19px; height: 23px; color: var(--t-ink); }
[data-v2] .ct-doc em { font-size: 10px; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
[data-v2] .ct-doc-more b { display: grid; place-items: center; width: 19px; height: 23px; border: 1px dashed var(--t-line); color: var(--t-muted); font-size: 10.5px; font-weight: 400; }
[data-v2] .ct-docs-sm { margin-top: 7px; gap: 8px 16px; }
[data-v2] .ct-docs-sm svg { width: 17px; height: 20px; }
[data-v2] .ct-tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--t-line); border-bottom: 1px solid var(--t-line); }
[data-v2] .ct-tiles-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
[data-v2] .ct-tile { display: flex; flex-direction: column; gap: 5px; padding: 10px 16px 12px; border-left: 1px solid var(--t-line); }
[data-v2] .ct-tile:first-child { border-left: 0; }
[data-v2] .ct-big { display: flex; align-items: baseline; gap: 8px; font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
[data-v2] .ct-big small { color: var(--t-muted); font-size: 11px; font-weight: 400; letter-spacing: 0; }
/* segmented bar: blocks up to --v, a faint hatch after */
[data-v2] .ct-bar { display: block; height: 9px; margin-top: 2px; background:
  repeating-linear-gradient(90deg, var(--b, var(--t-green)) 0 6px, transparent 6px 8px) 0 0 / var(--v, 100%) 100% no-repeat,
  repeating-linear-gradient(90deg, #2B2925 0 1px, transparent 1px 3px); }
[data-v2] .ct-b-green { --b: var(--t-green); } [data-v2] .ct-b-amber { --b: var(--t-amber); } [data-v2] .ct-b-dim { --b: #4A4842; }
[data-v2] .ct-list { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 16px; }
[data-v2] .ct-list .ct-label { margin-bottom: 3px; }
[data-v2] .ct-li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
[data-v2] .ct-li i { width: 12px; flex-shrink: 0; font-style: normal; text-align: center; }
[data-v2] .ct-li em { margin-left: auto; color: var(--t-amber); font-size: 11px; font-style: normal; }
/* 01's history: a track that draws itself, nodes that land in turn, an amber pulse running to the pending investigation */
[data-v2] .ct-timeline { padding: 10px 16px 11px; border-top: 1px solid var(--t-line); background: var(--t-bg2); }
[data-v2] .ct-tl { position: relative; height: 50px; margin-top: 4px; }
[data-v2] .ct-tl-track { position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: repeating-linear-gradient(90deg, #3A3833 0 3px, transparent 3px 6px); }
[data-v2] .ct-tl-track::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: #8A867C; transform-origin: left center; }
[data-v2] .ct-tl-track i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; background: var(--t-amber); box-shadow: 0 0 10px rgba(232,163,61,0.8); opacity: 0; }
[data-v2] .case-story-scene[data-active="true"] .ct-tl-track::before { animation: ct-draw 1300ms cubic-bezier(.4,0,.2,1) 1000ms both; }
[data-v2] .case-story-scene[data-active="true"] .ct-tl-track i { animation: ct-run 3.2s linear 2300ms infinite; }
@keyframes ct-draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ct-run { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
[data-v2] .ct-tl-node { position: absolute; top: 0; left: var(--x); display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
[data-v2] .ct-tl-node b { height: 16px; color: var(--t-muted); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; }
[data-v2] .ct-tl-node i { position: relative; width: 9px; height: 9px; margin: 2px 0 5px; background: var(--t-ink); }
[data-v2] .ct-tl-node span { color: var(--t-ink); font-size: 12px; white-space: nowrap; }
[data-v2] .ct-tl-pending { left: auto; right: 0; align-items: flex-end; }
[data-v2] .ct-tl-pending b, [data-v2] .ct-tl-pending span { color: var(--t-amber); }
[data-v2] .ct-tl-pending i { background: var(--t-bg2); box-shadow: inset 0 0 0 1.5px var(--t-amber); }
[data-v2] .ct-tl-pending i::after { content: ''; position: absolute; inset: -1px; border: 1px solid var(--t-amber); opacity: 0; }
[data-v2] .case-story-scene[data-active="true"] .ct-tl-node { animation: cs-in 480ms cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, 0ms); }
[data-v2] .case-story-scene[data-active="true"] .ct-tl-pending i::after { animation: ct-ping 1.8s ease-out 2000ms infinite; }
@keyframes ct-ping { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.8); opacity: 0; } }
/* 02: the sources in two buckets, what they say against what was declared */
[data-v2] .ct-buckets { flex: 1 1 auto; display: flex; flex-direction: column; }
[data-v2] .ct-bucket { display: flex; flex-direction: column; border-top: 1px solid var(--t-line); }
[data-v2] .ct-bucket:first-child { border-top: 0; }
[data-v2] .ct-bucket-no { flex: 1 1 0; box-shadow: inset 3px 0 0 rgba(224,97,58,0.8); }
[data-v2] .ct-bucket-yes { flex: 3 1 0; box-shadow: inset 3px 0 0 rgba(147,184,78,0.8); }
[data-v2] .ct-bucket-head { display: flex; align-items: baseline; gap: 10px; padding: 8px 16px; background: rgba(236,235,231,0.03); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; }
[data-v2] .ct-bucket-head i { font-style: normal; }
[data-v2] .ct-bucket-head span { color: var(--t-ink); }
[data-v2] .ct-bucket-head em { color: var(--t-dim); font-style: normal; letter-spacing: 0.08em; }
[data-v2] .ct-rec { flex: 1 1 auto; display: grid; grid-template-columns: 170px minmax(0,1fr) 46px; gap: 14px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--t-line2); font-size: 13px; }
[data-v2] .ct-rec:first-of-type { border-top: 0; }
[data-v2] .ct-rec-src { display: grid; grid-template-columns: 17px minmax(0,1fr); grid-template-rows: auto auto; gap: 0 9px; align-items: center; color: var(--t-muted); }
[data-v2] .ct-rec-src svg { grid-row: 1 / 3; width: 17px; height: 20px; color: var(--t-muted); }
[data-v2] .ct-rec-src b { font-weight: 400; color: var(--t-ink); }
[data-v2] .ct-rec-src small { color: var(--t-dim); font-size: 10.5px; }
[data-v2] .ct-rec-says b { font-weight: 600; }
[data-v2] .ct-rec em { color: var(--t-amber); font-size: 11px; font-style: normal; text-align: right; }
[data-v2] .ct-verdict { display: flex; align-items: baseline; gap: 10px; margin: 12px 16px 14px; padding: 10px 12px; border: 1px solid rgba(224,97,58,0.45); background: rgba(224,97,58,0.07); font-size: 12.5px; line-height: 1.55; }
[data-v2] .ct-verdict i { font-style: normal; }
[data-v2] .ct-verdict b { color: var(--t-red); font-weight: 500; }
/* 03 */
[data-v2] .ct-flow { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr); align-items: stretch; padding: 14px 16px; }
[data-v2] .ct-sub { display: flex; flex-direction: column; border: 1px solid var(--t-line); background: var(--t-bg2); }
[data-v2] .ct-sub-head { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--t-line); color: var(--t-amber); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
[data-v2] .ct-sub-head .ct-dim { letter-spacing: 0.04em; text-transform: none; }
[data-v2] .ct-kv { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0,1fr) auto 50px; gap: 10px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--t-line2); font-size: 12.5px; }
/* the case as folders: one is open, its values indented under it */
[data-v2] .ct-folder { flex: 1 1 auto; display: grid; grid-template-columns: 14px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--t-line2); font-size: 12.5px; }
[data-v2] .ct-folder i { color: var(--t-dim); font-size: 9px; font-style: normal; }
[data-v2] .ct-folder em { color: var(--t-muted); font-size: 11px; font-style: normal; }
[data-v2] .ct-folder-open { background: rgba(232,163,61,0.07); }
[data-v2] .ct-folder-open i, [data-v2] .ct-folder-open span { color: var(--t-amber); }
[data-v2] .ct-folder-open em { color: var(--t-amber); }
[data-v2] .ct-kv-child { padding-left: 34px; background: rgba(236,235,231,0.02); }
[data-v2] .ct-kv-child::before { content: ''; position: absolute; }
[data-v2] .ct-kv:last-child { border-bottom: 0; }
[data-v2] .ct-kv span { color: var(--t-muted); }
[data-v2] .ct-kv b { font-weight: 500; }
[data-v2] .ct-kv em { color: var(--t-amber); font-size: 11px; font-style: normal; text-align: right; }
[data-v2] .ct-rating { flex: 0 0 auto; margin-top: auto; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 11px; border-top: 1px solid var(--t-line); background: rgba(232,163,61,0.08); }
[data-v2] .ct-rating-value { color: var(--t-amber); font-size: 16px; font-weight: 500; }
[data-v2] .ct-rating .ct-dim { font-size: 10.5px; }
[data-v2] .ct-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 16px; border-top: 1px solid var(--t-line); }
[data-v2] .case-story-scene[data-active="true"] .cs-slide { animation: cs-slide 600ms cubic-bezier(.22,1,.36,1) both; }
@keyframes cs-slide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
[data-v2] .cs-pipe { position: relative; align-self: center; height: 1px; margin: 0 8px; background: var(--t-line); }
[data-v2] .cs-pipe-label { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); font: 400 10px/1.5 'IBM Plex Mono', monospace; letter-spacing: 0.14em; color: var(--t-muted); }
[data-v2] .cs-pipe i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; background: var(--t-amber); box-shadow: 0 0 8px rgba(232,163,61,0.7); opacity: 0; }
[data-v2] .case-story-scene[data-active="true"] .cs-pipe i { animation: cs-packet 1.8s cubic-bezier(.45,0,.55,1) infinite; }
[data-v2] .case-story-scene[data-active="true"] .cs-pipe i:nth-child(3) { animation-delay: 600ms; }
[data-v2] .case-story-scene[data-active="true"] .cs-pipe i:nth-child(4) { animation-delay: 1200ms; }
@keyframes cs-packet { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }

@media (max-width: 1100px) {
  [data-v2] .case-story { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 36px; }
  [data-v2] .ct-flow { grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr); }
  [data-v2] .cs-pipe-label { display: none; }
}
@media (max-width: 1040px) {
  [data-v2] .case-story-track { height: auto; }
  [data-v2] .case-story-track > .case-story { position: static; }
  [data-v2] .case-story { grid-template-columns: minmax(0,1fr); gap: 32px; }
  [data-v2] .case-story-stage { height: auto; }
  [data-v2] .ct { height: auto; }
}
@media (max-width: 640px) {
  [data-v2] .case-story-choice { padding: 22px 0; }
  [data-v2] .case-story-title { gap: 12px; font-size: 21px; }
  [data-v2] .case-story-copy { margin-left: 26px; font-size: 15px; }
  [data-v2] .ct-tiles { grid-template-columns: minmax(0,1fr); }
  [data-v2] .ct-tile { border-left: 0; border-top: 1px solid var(--t-line); }
  [data-v2] .ct-tile:first-child { border-top: 0; }
  [data-v2] .ct-rec { grid-template-columns: minmax(0,1fr) 42px; gap: 4px 10px; padding: 10px 16px; }
  [data-v2] .ct-rec-src { grid-column: 1 / -1; }
  [data-v2] .ct-rec em { grid-column: 2; grid-row: 2; }
  [data-v2] .ct-tl { height: auto; display: flex; flex-direction: column; gap: 10px; }
  [data-v2] .ct-tl-track { display: none; }
  [data-v2] .ct-tl-node { position: static; flex-direction: row; align-items: center; gap: 10px; }
  [data-v2] .ct-tl-node i { order: -1; margin: 0; }
  [data-v2] .ct-tl-pending { align-items: center; }
  [data-v2] .ct-flow { grid-template-columns: minmax(0,1fr); }
  [data-v2] .cs-pipe { width: 1px; height: 32px; margin: 8px auto; }
  [data-v2] .cs-pipe i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-v2] .case-story-scene, [data-v2] .case-story-title, [data-v2] .case-story-copy { transition: none; }
  [data-v2] .case-story-scene[data-active="true"] .cs-in, [data-v2] .case-story-scene[data-active="true"] .cs-slide { animation: none; }
  [data-v2] .case-story-scene[data-active="true"] .cs-pipe i { animation: none; opacity: 0; }
  [data-v2] .case-story-scene[data-active="true"] .ct-tl-track::before, [data-v2] .case-story-scene[data-active="true"] .ct-tl-node { animation: none; }
  [data-v2] .case-story-scene[data-active="true"] .ct-tl-track i, [data-v2] .case-story-scene[data-active="true"] .ct-tl-pending i::after { animation: none; opacity: 0; }
}
/* small screens: the nav links live behind a burger beside Book a demo, opening as a sheet under the bar */
[data-v2] [data-v2-burger], [data-v2] [data-v2-menu] { display: none; }
[data-v2] [data-v2-burger] { border: 1px solid rgba(236,235,231,0.3); color: #ECEBE7; }
[data-v2] [data-v2-burger]:hover { border-color: rgba(236,235,231,0.7); background: rgba(236,235,231,0.06); }
[data-v2][data-v2-top="light"] [data-v2-burger] { border-color: rgba(21,21,20,0.25); color: #151514; }
[data-v2][data-v2-top="light"] [data-v2-burger]:hover { border-color: rgba(21,21,20,0.55); background: rgba(21,21,20,0.05); }
html[data-v2-stuck] [data-v2] [data-v2-burger] { border-color: rgba(11,11,12,0.25); color: #0B0B0C; }
html[data-v2-stuck] [data-v2] [data-v2-burger]:hover { border-color: rgba(11,11,12,0.55); background: rgba(11,11,12,0.05); }
[data-v2] [data-v2-menu] a { padding: 13px 0; border-top: 1px solid rgba(236,235,231,0.12); color: inherit; }
[data-v2] [data-v2-menu] a:first-child { border-top: 0; }
[data-v2] [data-v2-menu] a[aria-current="page"] { opacity: 0.55; }
@media (max-width: 1040px) {
  [data-v2] [data-v2-burger] { display: inline-flex; }
  html[data-v2-menu-open] [data-v2] [data-v2-menu] {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; top: 76px; z-index: 49;
    padding: 6px 22px 18px; background: #0B0B0C; color: #ECEBE7; border-bottom: 1px solid rgba(236,235,231,0.14);
    font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
    box-shadow: 0 24px 40px -20px rgba(0,0,0,0.8);
  }
  html[data-v2-menu-open] [data-v2][data-v2-top="light"] [data-v2-menu] { background: #F4F2EC; color: #151514; border-bottom-color: rgba(21,21,20,0.14); }
  html[data-v2-menu-open] [data-v2][data-v2-top="light"] [data-v2-menu] a { border-top-color: rgba(21,21,20,0.12); }
  html[data-v2-stuck][data-v2-menu-open] [data-v2] [data-v2-menu] { top: 64px; background: #FFFFFF; color: #0B0B0C; border-bottom-color: rgba(11,11,12,0.12); }
  html[data-v2-stuck][data-v2-menu-open] [data-v2] [data-v2-menu] a { border-top-color: rgba(11,11,12,0.1); }
}
/* card grids: featured products (underwriting, claims), the Dispatch archive and More from Dispatch, and the About team.
   The cards stop growing at a comfortable size, go three across on wide screens, and each image sits dimmed until the
   card is hovered, when it brightens and eases in like the carousel. Team portraits stay greyscale and are not zoomed. */
[data-v2] [data-v2-fgrid] { justify-items: center; }
[data-v2] [data-v2-fgrid] > * { width: 100%; max-width: 470px; transition: border-color 350ms ease, background-color 350ms ease; }
[data-v2] [data-v2-fgrid] > * img { filter: saturate(0.8) brightness(0.72) contrast(1.03); transition: transform 3.4s cubic-bezier(.2,.6,.2,1), filter 450ms ease; }   /* each image carries its own transform-origin: the point the carousel zooms to */
[data-v2] [data-v2-fgrid] > *:hover { border-color: rgba(236,235,231,0.26) !important; background: #141416 !important; }
[data-v2] [data-v2-fgrid] > *:hover img { transform: scale(1.34); filter: none; }
[data-v2] [data-v2-fgrid="people"] > *:hover img { transform: none; }
@media (min-width: 1280px) {
  [data-v2] [data-v2-fgrid] { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-v2] [data-v2-fgrid] > * img { transition: filter 200ms ease; }
  [data-v2] [data-v2-fgrid] > *:hover img { transform: none; }
}
/* Claims: the critical illness check as a terminal panel. Its rows play in once when it scrolls into view. home-v2.js
   keeps the state on <html> (data-ct-ready, then data-ct-live) because the page runtime strips attributes set on its own
   elements; without the script everything simply shows. One such panel per page. */
[data-v2] .ct-claim { position: relative; height: auto; }
[data-v2] .ct-claim .ct-case { border-bottom: 1px solid var(--t-line); }
[data-v2] .ct-block { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-bottom: 1px solid var(--t-line); }
[data-v2] .ct-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
[data-v2] .ct-count { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
[data-v2] .ct-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
[data-v2] .ct-claim .ct-li { padding: 5px 0; font-size: 13.5px; }
[data-v2] .ct-claim .ct-li .ct-dim { font-size: 12px; }
[data-v2] .ct-li-bad { margin: 0 -16px; padding: 7px 16px !important; background: rgba(224,97,58,0.09); }
[data-v2] .ct-li-bad i { position: relative; }
[data-v2] .ct-li-bad i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 1px solid var(--t-red); opacity: 0; }
[data-v2] .ct-next { display: flex; flex-direction: column; gap: 5px; margin: 16px; padding: 12px 14px; border: 1px solid rgba(232,163,61,0.4); background: rgba(232,163,61,0.07); font-size: 13px; line-height: 1.55; }
[data-v2] .ct-next .ct-label { color: var(--t-amber); }
[data-v2] .ct-cursor { display: inline-block; width: 7px; height: 14px; margin-left: 5px; vertical-align: -2px; background: var(--t-amber); }
[data-v2] .ct-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--t-amber), transparent); opacity: 0; pointer-events: none; z-index: 2; }
html[data-ct-ready]:not([data-ct-live]) [data-v2] [data-ct-anim] .cs-in, html[data-ct-ready]:not([data-ct-live]) [data-v2] [data-ct-anim] .ct-bar-fill { opacity: 0; }
html[data-ct-live] [data-v2] [data-ct-anim] .cs-in { animation: cs-in 520ms cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, 0ms); }
html[data-ct-live] [data-v2] [data-ct-anim] .ct-bar-fill { animation: ct-bar 900ms cubic-bezier(.4,0,.2,1) 350ms both; }
html[data-ct-live] [data-v2] [data-ct-anim] .ct-scan { animation: ct-scan 2.4s ease-in-out 200ms 1 both; }
html[data-ct-live] [data-v2] [data-ct-anim] .ct-li-bad i::after { animation: ct-ping 1.8s ease-out 1200ms infinite; }
html[data-ct-live] [data-v2] [data-ct-anim] .ct-cursor { animation: ct-blink 1.1s steps(1) 2.4s infinite; }
@keyframes ct-bar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ct-scan { 0% { top: 0; opacity: 0; } 12% { opacity: 0.9; } 88% { opacity: 0.9; } 100% { top: calc(100% - 2px); opacity: 0; } }
@keyframes ct-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-v2] [data-ct-anim] .cs-in, [data-v2] [data-ct-anim] .ct-bar-fill, [data-v2] [data-ct-anim] .ct-scan,
  [data-v2] [data-ct-anim] .ct-li-bad i::after, [data-v2] [data-ct-anim] .ct-cursor { animation: none !important; }
}
[data-v2] ::selection { background: rgba(47,169,186,0.3); }
[data-v2] a:hover { text-decoration: none; }
[data-v2] a[data-btn="solid"]:hover { background: #FFFFFF !important; }
[data-v2] a[data-btn="line"]:hover { border-color: rgba(236,235,231,0.7) !important; background: rgba(236,235,231,0.06) !important; }
[data-v2] a[data-link]:hover { color: #FFFFFF !important; }
[data-v2] a[data-row]:hover [data-row-title] { color: #FFFFFF !important; }
[data-v2] a[data-film] [data-play] { transition: transform 300ms cubic-bezier(.22,1,.36,1); }
[data-v2] a[data-film]:hover [data-play] { transform: translate(-50%,-50%) scale(1.06) !important; }
/* the stacks photo is finished art, not a slot waiting to be filled, so image-slot's dashed drop-target ring goes */
[data-v2] #v2-archive::part(ring) { display: none; }

/* hero copy settles in: the 21st.dev editorial-hero reveal (fade, 12px rise, 6px blur, staggered) */
@keyframes v2-rise { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
[data-v2] [data-rise] { animation: v2-rise 800ms cubic-bezier(.22,1,.36,1) both; }
[data-v2] [data-rise="2"] { animation-delay: 100ms; }
[data-v2] [data-rise="3"] { animation-delay: 200ms; }
[data-v2] [data-rise="4"] { animation-delay: 300ms; }
[data-v2] [data-rise="5"] { animation-delay: 450ms; }
/* nav: transparent over the painting; home-v2.js sets html[data-v2-stuck] once it has scrolled
   out of view, which pins it as a solid white bar with the colour logo */
@keyframes v2-nav-in { from { transform: translateY(-100%); } to { transform: none; } }
[data-v2] [data-v2-nav] { transition: height 300ms ease, background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease; }
[data-v2] [data-v2-nav] a, [data-v2] [data-v2-nav] img { transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease, opacity 300ms ease; }
html[data-v2-stuck][data-v2-navin] [data-v2] [data-v2-nav] { animation: v2-nav-in 420ms cubic-bezier(.22,1,.36,1); }
html[data-v2-stuck] [data-v2] [data-v2-nav] {
  position: fixed !important;
  height: 64px !important;
  background-color: #FFFFFF;   /* solid: a translucent blurred bar flickered while scrolling */
  border-bottom-color: rgba(11,11,12,0.08) !important;
  box-shadow: 0 10px 30px rgba(11,11,12,0.08);
}
html[data-v2-stuck] [data-v2] [data-v2-nav] [data-logo="white"] { opacity: 0; }
html[data-v2-stuck] [data-v2] [data-v2-nav] [data-logo="color"] { opacity: 1 !important; }
html[data-v2-stuck] [data-v2] [data-v2-nav] a[data-link] { color: rgba(11,11,12,0.62) !important; }
html[data-v2-stuck] [data-v2] [data-v2-nav] a[data-link]:hover { color: #0B0B0C !important; }
html[data-v2-stuck] [data-v2] [data-v2-nav] a[data-btn="line"] { color: #0B0B0C !important; border-color: rgba(11,11,12,0.2) !important; }
html[data-v2-stuck] [data-v2] [data-v2-nav] a[data-btn="line"]:hover { border-color: rgba(11,11,12,0.55) !important; background: rgba(11,11,12,0.04) !important; }
html[data-v2-stuck] [data-v2] [data-v2-nav] a[data-btn="solid"] { background: #0B0B0C !important; color: #FFFFFF !important; }
html[data-v2-stuck] [data-v2] [data-v2-nav] a[data-btn="solid"]:hover { background: #2B2B29 !important; }

@media (prefers-reduced-motion: reduce) {
  [data-v2] [data-rise] { animation: none; }
  html[data-v2-stuck] [data-v2] [data-v2-nav] { animation: none; }
}

@media (max-width: 1200px) {
  [data-v2] [data-num] { font-size: 72px !important; }
  [data-v2] [data-case-drop="1200"] { display: none !important; }   /* the case figure sheds tabs and labels that stop fitting */
}
@media (max-width: 1040px) {
  [data-v2] [data-v2-split] { grid-template-columns: minmax(0,1fr) !important; gap: 40px !important; }
  [data-v2] [data-v2-split] > * { grid-column: auto !important; }
  [data-v2] [data-v2-illo] { display: none !important; }   /* the floating glass objects live in spare space the wide layout has */
  /* the globe leaves its corner and rises from the bottom of the section, under the copy */
  [data-v2] [data-v2-global] { min-height: 0 !important; padding-bottom: 0 !important; }
  [data-v2] [data-v2-globewrap] { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto !important; height: 500px !important; overflow: hidden; margin: 40px -40px 0; }
  [data-v2] [data-v2-globe] { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 620px !important; height: 620px !important; }
}
@media (max-width: 820px) {
  [data-v2] [data-v2-globewrap] { height: 420px !important; margin: 32px -22px 0; }
  [data-v2] [data-v2-globe] { width: 520px !important; height: 520px !important; }
  [data-v2] [data-v2-pad] { padding-left: 22px !important; padding-right: 22px !important; }
  [data-v2] [data-v2-hero] { min-height: 0 !important; }
  /* site.css pads every top-level section at this width; the hero's nav and copy carry their own, so it would double up */
  [data-v2] > [data-v2-hero] { padding-left: 0 !important; padding-right: 0 !important; }
  [data-v2] [data-v2-herocopy] { padding-top: 150px !important; }
  [data-v2] [data-v2-metric] { border-left: 0 !important; padding-left: 0 !important; padding-bottom: 40px !important; border-top: 1px solid rgba(236,235,231,0.08); }
  [data-v2] [data-v2-metric]:first-child { border-top: 0; }
  [data-v2] [data-v2-film] { aspect-ratio: auto !important; min-height: 440px; }
  [data-v2] [data-v2-filmfade] { height: 82% !important; }
  [data-v2] [data-case-drop="820"] { display: none !important; }
  [data-v2] [data-v2-fgrid] { grid-template-columns: minmax(0,1fr) !important; }   /* featured products stack to one column */
}

/* platform features: a feature carousel (home-v2.js), after the cult-ui Feature Carousel on 21st.dev. The card stays
   pinned while its track scrolls past: 8 features x 45vh of scroll, so a scroll passes through them at a readable pace. Each
   feature's text, screenshot and segment carry data-state before / active / after; text enters from below and leaves
   upward, while the one slate stays and only its screen changes */
[data-v2] { overflow: clip !important; }   /* overflow:hidden made the page root a scroll container, which a pinned card can't stick inside */
[data-v2] [data-fc-track] { position: relative; height: calc(8 * 45vh + 100vh); }
[data-v2] [data-fc-sticky] { position: sticky; top: 88px; }
[data-v2] [data-fc-card]::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 300ms ease;
  background: radial-gradient(640px circle at var(--x, 50%) var(--y, 50%), rgba(47,169,186,0.14), rgba(241,77,28,0.07) 30%, transparent 60%);
}
[data-v2] [data-fc-card]:hover::before { opacity: 1; }
/* the slate rests tilted; pointing at it turns it square to the viewer */
[data-v2] [data-fc-slate] { transition: transform 600ms cubic-bezier(.22,1,.36,1); }
[data-v2] [data-fc-slate]:hover { transform: rotateY(0deg) rotateX(0deg) !important; }
/* pause control, bottom left of the card: the same stop a segment click makes, and the only way to start the play again */
[data-v2] [data-fc-pause] { transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease; }
[data-v2] [data-fc-pause]:hover { border-color: rgba(236,235,231,0.45) !important; background: rgba(236,235,231,0.10) !important; color: #FFFFFF !important; }
[data-v2] [data-fc-pause]:focus-visible { outline: 2px solid #007D90; outline-offset: 3px; }
[data-v2] [data-fc-pause] [data-fc-icon="play"] { display: none; }
[data-v2] [data-fc-pause][data-state="paused"] [data-fc-icon="play"] { display: block; }
[data-v2] [data-fc-pause][data-state="paused"] [data-fc-icon="pause"] { display: none; }
[data-v2] [data-fc-step] { transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease, opacity 200ms ease; }
[data-v2] [data-fc-step]:hover:not([disabled]) { border-color: rgba(236,235,231,0.45) !important; background: rgba(236,235,231,0.10) !important; color: #FFFFFF !important; }
[data-v2] [data-fc-step][disabled] { opacity: 0.32; cursor: default; }
[data-v2] [data-fc-step]:focus-visible { outline: 2px solid #007D90; outline-offset: 3px; }
[data-v2] [data-fc-text] > * { transition: opacity 300ms cubic-bezier(.23,1,.32,1), transform 300ms cubic-bezier(.23,1,.32,1); }
[data-v2] [data-fc-text][data-state="before"] > * { opacity: 0; transform: translateY(20px); }
[data-v2] [data-fc-text][data-state="after"] > * { opacity: 0; transform: translateY(-20px); }
[data-v2] [data-fc-text][data-state="active"] [data-fc-title] { transition-delay: 100ms; }
[data-v2] [data-fc-text][data-state="active"] [data-fc-desc] { transition-delay: 200ms; }
/* one slate for every feature: its screenshots crossfade inside the screen. The active one pans and zooms toward the part
   that makes its feature's point while the card is pinned (data-fc-live, set by home-v2.js), per-feature rules below;
   one that is leaving keeps its framing while it fades and only resets once it is out of sight */
[data-v2] [data-fc-shot] { opacity: 0; transform-origin: 0 0; transition: opacity 350ms ease, transform 0s linear 400ms; }
[data-v2] [data-fc-shot][data-state="active"] { opacity: 1; transition: opacity 350ms ease; }
[data-v2] [data-fc-track][data-fc-live] [data-fc-shot][data-state="active"] { transition: opacity 350ms ease, transform 7.4s cubic-bezier(.3,.1,.3,1) 250ms; }   /* the pan runs the length of the 8s bar (DWELL in home-v2.js) */
/* where each screenshot settles. Its <img> is sized to its own aspect, so the pan can reach past what a 16:10 crop
   would cut; each rule scales a focus rectangle to fill about 90% of the screen (1.08x to 1.9x) and centres it,
   clamped to the image edges */
/* 01 key risks: the HealthGrid, its flagged impairment categories */
[data-v2] [data-fc-track][data-fc-live] [data-fc-shot][data-fc-i="0"][data-state="active"] { transform: translate(-69.38%, -11.05%) scale(1.650); }
/* 02 misrepresentation: the declared "no" against the cotinine result and the smoking history */
[data-v2] [data-fc-track][data-fc-live] [data-fc-shot][data-fc-i="1"][data-state="active"] { transform: translate(0.00%, -8.30%) scale(1.565); }
/* 03 case timeline: the dated circulatory story */
[data-v2] [data-fc-track][data-fc-live] [data-fc-shot][data-fc-i="2"][data-state="active"] { transform: translate(-93.66%, -45.95%) scale(1.900); }
/* 04 next best action: the drug-use discrepancy and its recommendation, below the 16:10 crop */
[data-v2] [data-fc-track][data-fc-live] [data-fc-shot][data-fc-i="3"][data-state="active"] { transform: translate(-4.00%, -33.91%) scale(1.080); }
/* 05 ask the file: the question and its answer */
[data-v2] [data-fc-track][data-fc-live] [data-fc-shot][data-fc-i="4"][data-state="active"] { transform: translate(-88.82%, -65.12%) scale(1.820); }
/* 06 audit trail: the 70% confidence flag beside the handwritten line it was read from */
[data-v2] [data-fc-track][data-fc-live] [data-fc-shot][data-fc-i="5"][data-state="active"] { transform: translate(-25.75%, -24.98%) scale(1.515); }
/* 07 exclusions: each exclusion's status and the key-evidence note */
[data-v2] [data-fc-track][data-fc-live] [data-fc-shot][data-fc-i="6"][data-state="active"] { transform: translate(0.00%, -24.83%) scale(1.313); }
/* 08 triage: the risk flags and the high-risk summary */
[data-v2] [data-fc-track][data-fc-live] [data-fc-shot][data-fc-i="7"][data-state="active"] { transform: translate(-50.70%, -21.28%) scale(1.440); }
[data-v2] [data-fc-seg] [data-fc-seglabel] { color: #8C8A83; transition: color 300ms ease; }
[data-v2] [data-fc-seg][data-state="after"] [data-fc-seglabel] { color: #5F5D57; }
[data-v2] [data-fc-seg][data-state="active"] [data-fc-seglabel],
[data-v2] [data-fc-seg]:hover [data-fc-seglabel] { color: #151514; }
[data-v2] [data-fc-seg]:focus-visible { outline: 2px solid #007D90; outline-offset: 4px; }
/* colour, not purple: each pair of features takes the next spectrum stop (teal, blue, rose, coral) on its progress bar and its card label */
[data-v2] [data-fc-seg][data-fc-i="0"] > span:first-child > span, [data-v2] [data-fc-seg][data-fc-i="1"] > span:first-child > span { background: #007D90 !important; }
[data-v2] [data-fc-text][data-fc-i="0"] > div:first-child, [data-v2] [data-fc-text][data-fc-i="1"] > div:first-child { color: #2FA9BA !important; }
[data-v2] [data-fc-seg][data-fc-i="2"] > span:first-child > span, [data-v2] [data-fc-seg][data-fc-i="3"] > span:first-child > span { background: #136FDC !important; }
[data-v2] [data-fc-text][data-fc-i="2"] > div:first-child, [data-v2] [data-fc-text][data-fc-i="3"] > div:first-child { color: #4A94F0 !important; }
[data-v2] [data-fc-seg][data-fc-i="4"] > span:first-child > span, [data-v2] [data-fc-seg][data-fc-i="5"] > span:first-child > span { background: #D23A69 !important; }
[data-v2] [data-fc-text][data-fc-i="4"] > div:first-child, [data-v2] [data-fc-text][data-fc-i="5"] > div:first-child { color: #EC5C88 !important; }
[data-v2] [data-fc-seg][data-fc-i="6"] > span:first-child > span, [data-v2] [data-fc-seg][data-fc-i="7"] > span:first-child > span { background: #D9612A !important; }
[data-v2] [data-fc-text][data-fc-i="6"] > div:first-child, [data-v2] [data-fc-text][data-fc-i="7"] > div:first-child { color: #F07838 !important; }
@media (max-width: 1040px) {
  [data-v2] [data-fc-track] { display: none !important; }
  [data-v2] [data-fc-list] { display: flex !important; }
  [data-v2] [data-fc-row] { grid-template-columns: 36px minmax(0,1fr) !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-v2] [data-fc-text] > *, [data-v2] [data-fc-shot] { transition: none; }
  [data-v2] [data-fc-slate] { transition: none; }
  [data-v2] [data-fc-track] [data-fc-shot] { transform: none !important; }
}

/* ---- v2 subpages ---- */
/* a page whose top is light (claims, articles) sets data-v2-top="light" on its root, so the unpinned nav starts in dark ink;
   once pinned it is the same white bar as everywhere else */
[data-v2][data-v2-top="light"] [data-v2-nav] { border-bottom-color: rgba(11,11,12,0.1) !important; }
[data-v2][data-v2-top="light"] [data-v2-nav] [data-logo="white"] { opacity: 0; }
[data-v2][data-v2-top="light"] [data-v2-nav] [data-logo="color"] { opacity: 1 !important; }
[data-v2][data-v2-top="light"] [data-v2-nav] a[data-link] { color: rgba(11,11,12,0.62) !important; }
[data-v2][data-v2-top="light"] [data-v2-nav] a[data-btn="line"] { color: #0B0B0C !important; border-color: rgba(11,11,12,0.2) !important; }
[data-v2][data-v2-top="light"] [data-v2-nav] a[data-btn="solid"] { background: #0B0B0C !important; color: #FFFFFF !important; }
/* the page you are on reads at full strength in the nav */
[data-v2] [data-v2-nav] a[data-link][aria-current="page"] { color: #FFFFFF !important; }
[data-v2][data-v2-top="light"] [data-v2-nav] a[data-link][aria-current="page"],
html[data-v2-stuck] [data-v2] [data-v2-nav] a[data-link][aria-current="page"] { color: #0B0B0C !important; }
/* hovers inside light bands (data-tone="light"), where the dark-page hovers above would turn text white on paper */
[data-v2] [data-tone="light"] a[data-link]:hover,
[data-v2][data-v2-top="light"] [data-v2-nav] a[data-link]:hover { color: #0B0B0C !important; }
[data-v2] [data-tone="light"] a[data-row]:hover [data-row-title] { color: #0B0B0C !important; }
[data-v2] [data-tone="light"] a[data-btn="solid"]:hover,
[data-v2][data-v2-top="light"] [data-v2-nav] a[data-btn="solid"]:hover { background: #2B2B29 !important; }
[data-v2] [data-tone="light"] a[data-btn="line"]:hover,
[data-v2][data-v2-top="light"] [data-v2-nav] a[data-btn="line"]:hover { border-color: rgba(11,11,12,0.55) !important; background: rgba(11,11,12,0.04) !important; }
/* episode and post cards: the image eases in a touch on hover */
[data-v2] a[data-card] [data-card-img] { transition: transform 600ms cubic-bezier(.22,1,.36,1), filter 450ms ease; }
[data-v2] a[data-card]:hover [data-card-img] { transform: scale(1.035); }
[data-v2] a[data-card]:hover [data-row-title] { color: #FFFFFF !important; }
[data-v2] [data-tone="light"] a[data-card]:hover [data-row-title] { color: #0B0B0C !important; }
@media (prefers-reduced-motion: reduce) {
  [data-v2] a[data-card] [data-card-img] { transition: none; }
}
/* articles: the cover rows and the More articles cards fold down, and a cover sits closer to a podcast player under it */
[data-v2] [data-ar-cover]:has(+ [data-ar-audio]) { padding-bottom: 24px !important; }
@media (max-width: 1040px) {
  [data-v2] [data-ar-row] { grid-template-columns: 200px minmax(0,1fr) !important; gap: 24px !important; }
  [data-v2] [data-ar-arrow] { display: none; }
  [data-v2] [data-ar-related] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  [data-v2] [data-ar-row] { grid-template-columns: minmax(0,1fr) !important; gap: 16px !important; }
  [data-v2] [data-ar-related] { grid-template-columns: minmax(0,1fr) !important; }
}
/* underwriting: the 2x2 business case, the five-step pipeline and the stack line fold down */
@media (max-width: 1040px) {
  [data-v2] [data-v2-steps] { grid-template-columns: repeat(3, minmax(0,1fr)) !important; row-gap: 32px; }
  [data-v2] [data-uw-stack] { grid-template-columns: minmax(0,1fr) !important; }
  [data-v2] [data-uw-stack] > * { text-align: left !important; }
  [data-v2] [data-uw-stack] > :nth-child(even) { transform: rotate(90deg); width: fit-content; }
}
@media (max-width: 820px) {
  [data-v2] [data-v2-steps] { grid-template-columns: minmax(0,1fr) !important; }
  [data-v2] [data-uw-cell] { padding: 36px 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(236,235,231,0.1) !important; }
}
/* claims: lines of business fold to two columns, then one, without their vertical dividers */
@media (max-width: 1040px) {
  [data-v2] [data-cl-lob] { grid-template-columns: 1fr 1fr !important; row-gap: 12px; }
  [data-v2] [data-cl-lob] > * { border-left: 0 !important; padding: 28px 28px 8px 0 !important; }
}
@media (max-width: 820px) { [data-v2] [data-cl-lob] { grid-template-columns: minmax(0,1fr) !important; } }
/* about: the facts row, the commitments, the data flow, the rail, the team and the customer names fold down */
@media (max-width: 1040px) {
  [data-v2] [data-ab-facts], [data-v2] [data-ab-flow], [data-v2] [data-ab-names], [data-v2] [data-ab-team], [data-v2] [data-ab-lines] { grid-template-columns: 1fr 1fr !important; }
  [data-v2] [data-ab-lines] > * { border-left: 0 !important; padding-left: 0 !important; }
  [data-v2] [data-ab-facts] > *, [data-v2] [data-ab-flow] > * { border-left: 0 !important; padding-left: 0 !important; }
  [data-v2] [data-ab-flow] > * { padding: 24px !important; }
  [data-v2] [data-ab-row] { grid-template-columns: 110px minmax(0,1fr) !important; row-gap: 12px; }
  [data-v2] [data-ab-row] > :first-child { font-size: 72px !important; grid-row: span 2; }
  [data-v2] [data-ab-rail] { grid-template-columns: minmax(0,1fr) !important; gap: 36px !important; }
  [data-v2] [data-ab-railline] { display: none; }
}
@media (max-width: 820px) {
  [data-v2] [data-ab-facts], [data-v2] [data-ab-flow], [data-v2] [data-ab-team], [data-v2] [data-ab-lines] { grid-template-columns: minmax(0,1fr) !important; }
  [data-v2] [data-ab-names] { font-size: 36px !important; }
}
/* contact: the form's focus, and its sending, sent, invalid and error states (contact.js sets data-state on the form) */
[data-v2] [data-contact] input, [data-v2] [data-contact] select, [data-v2] [data-contact] textarea { transition: border-color 150ms ease, box-shadow 150ms ease; }
[data-v2] [data-contact] input:focus, [data-v2] [data-contact] select:focus, [data-v2] [data-contact] textarea:focus { outline: none; border-color: #151514 !important; box-shadow: 0 0 0 3px rgba(21,21,20,0.08); }
[data-v2] [data-contact] ::placeholder { color: #A8A7A1; }
[data-v2] [data-contact] [data-contact-msg], [data-v2] [data-contact] [data-contact-done] { display: none; }
[data-v2] [data-contact][data-state="sending"] [data-contact-msg="sending"],
[data-v2] [data-contact][data-state="invalid"] [data-contact-msg="invalid"],
[data-v2] [data-contact][data-state="error"] [data-contact-msg="error"] { display: block; }
[data-v2] [data-contact][data-state="sent"] [data-contact-fields] { display: none !important; }   /* the fields carry an inline display */
[data-v2] [data-contact][data-state="sent"] [data-contact-done] { display: flex; }
[data-v2] [data-contact] button[type="submit"]:hover { background: #2B2B29 !important; }
[data-v2] [data-contact] button[type="submit"]:disabled { opacity: 0.6; cursor: progress; }
[data-v2] [data-contact] button[type="submit"]:focus-visible { outline: 2px solid #007D90; outline-offset: 3px; }
@media (max-width: 820px) {
  [data-v2] [data-contact] { padding: 0; }
  [data-v2] #form { padding: 28px 22px !important; }
}

/* HDR: where the browser can show HDR images and the display has the range for it, the white script logo (nav and
   footer) swaps to a PQ-encoded copy tagged BT.2020 / ST 2084 (cICP), about 800 nits, so it reads brighter than page
   white. Browsers without HDR image support never match this and keep the ordinary PNG. */
@supports (dynamic-range-limit: no-limit) {
  @media (dynamic-range: high) {
    [data-v2] img[src$="logo-script-white.png"] { content: url("img/logo-script-white-hdr.png"); }
  }
}

/* the product tour, opened from "Watch the tour" (home-v2.js builds the panel on the first click) */
html[data-v2-tour-open] { overflow: hidden; }
.v2-tour {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 40px; background: rgba(8,8,9,0.92); animation: v2-tour-in 220ms ease-out;
}
.v2-tour-stage { position: relative; width: 100%; max-width: 1120px; aspect-ratio: 16 / 9; background: #000000; border-radius: 10px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.85); }
.v2-tour-film { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.v2-tour-close {
  position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; padding: 0; line-height: 1;
  font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 26px; color: #ECEBE7;
  background: transparent; border: 1px solid rgba(236,235,231,0.28); border-radius: 50%; cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.v2-tour-close:hover { border-color: rgba(236,235,231,0.7); background: rgba(236,235,231,0.08); }
.v2-tour-close:focus-visible { outline: 2px solid #ECEBE7; outline-offset: 3px; }
@keyframes v2-tour-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 820px) { .v2-tour { padding: 18px; } .v2-tour-close { top: 12px; right: 14px; } }
@media (prefers-reduced-motion: reduce) { .v2-tour { animation: none; } }

/* form selects: a drawn chevron instead of the text triangle, following the field it belongs to */
[data-v2] [data-v2-caret] { transition: color 160ms ease, transform 180ms ease; }
[data-v2] select:hover + [data-v2-caret="paper"], [data-v2] select:focus + [data-v2-caret="paper"] { color: #151514; }
[data-v2] select:hover + [data-v2-caret="dark"], [data-v2] select:focus + [data-v2-caret="dark"] { color: #ECEBE7; }
[data-v2] select:hover + [data-v2-caret] { transform: translateY(-50%) translateY(1px); }
@media (prefers-reduced-motion: reduce) { [data-v2] [data-v2-caret] { transition: none; } [data-v2] select:hover + [data-v2-caret] { transform: translateY(-50%); } }