/* pages-slaice.css: SLaiCE, Use cases and Clients (loaded after style.css).
   Drawing language: the LEDGER (company codes x years) and the LINE (logo red, rising). Nothing else.
   Type: --fs-b body, --fs-l lead, --fs-h3, h2, display; 14px only for meta. Motion only under .mo. */

/* ---------- Shared: the ledger (codes x years) ---------- */
.led { --cw: clamp(30px, 3vw, 44px); --ch: clamp(14px, 1.3vw, 20px); display: inline-flex; gap: 6px; font-variant-numeric: tabular-nums; vertical-align: top; }
.lc { position: relative; display: flex; flex-direction: column; gap: 4px; }
.lc b { display: block; min-width: var(--cw); height: 26px; margin-bottom: 2px; padding: 0 4px; border-radius: 999px; background: var(--paper-2); font: 600 var(--fs-14)/26px var(--sans); text-align: center; white-space: nowrap; letter-spacing: 0.01em; }
.lc i { display: block; width: var(--cw); height: var(--ch); border-radius: 3px; background: var(--cell); }
.lc i.on { background: var(--blue); }
.lc i.mask { background-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='1.1' fill='%23fff'/%3E%3C/svg%3E"); }
.lc i.off { opacity: 0.4; }
.band .uc-mark .lc i:not(.on):not(.mask) { background: #fff; }
.band .uc-mark .lc i.off { opacity: 0.6; }
.lc.is-on b { background: var(--navy); color: #fff; }

/* =========================================================
   SLaiCE page
   ========================================================= */
/* the three figures: one size, --fs-fig (display x 0.8) */
.p-slaice .tax-figs dd, .p-slaice .tax-figs .fig-word { font-size: var(--fs-fig); line-height: 0.9; }
.p-slaice .tax-points { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
@media (max-width: 600px) {
  .p-slaice .tax-points { grid-template-columns: 1fr; }
  .p-slaice .tax-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); row-gap: 24px; }
  .p-slaice .tax-figs > div:last-child { grid-column: 1 / -1; }
}

/* scroll story: tighter steps, h3 titles, body at --fs-b */
.p-slaice .story-grid { margin-top: clamp(32px, 3vw, 56px); }
/* text starts at the top of each step, so the red bar (top: 28px) sits beside the heading on every step, not only the short first one */
.p-slaice .step { min-height: 42vh; min-height: 42svh; padding-block: 24px; gap: 16px; justify-content: flex-start; }
.p-slaice .step:first-child { min-height: 38vh; min-height: 38svh; padding-top: 32px; }
.p-slaice .step:last-child { min-height: 54vh; min-height: 54svh; }
.p-slaice .step h3 { font-size: var(--fs-h3); }
.p-slaice .step > p { font-size: var(--fs-b); line-height: 1.55; }
.p-slaice .step::before { top: 28px; }
.p-slaice .step:first-child::before { top: 36px; }
.p-slaice .board--story { border-radius: 6px 6px 0 0; padding-bottom: 8px; }
.p-slaice .board--story .b-live { font-size: var(--fs-b); line-height: 1.45; color: var(--muted); margin-top: 12px; }
/* the red rising segment climbs one notch per step */
.story-foot { display: flex; align-items: flex-end; gap: 20px; padding: 4px clamp(24px, 2.6vw, 40px) clamp(20px, 2vw, 32px); background: #fff; border-radius: 0 0 6px 6px; }
.story-rise { flex: 1 1 auto; min-width: 0; height: 44px; overflow: visible; clip-path: inset(-20% -2% -20% -2%); }
.story-rise path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.story-stage:has(.board[data-state="1"]) .story-rise { clip-path: inset(-20% 75% -20% -2%); }
.story-stage:has(.board[data-state="2"]) .story-rise { clip-path: inset(-20% 50% -20% -2%); }
.story-stage:has(.board[data-state="3"]) .story-rise { clip-path: inset(-20% 25% -20% -2%); }
.mo .story-rise { transition: clip-path 420ms var(--ease-out); }
.p-slaice .story-count { flex: none; margin: 0; font-size: var(--fs-14); line-height: 1.2; letter-spacing: 0.01em; }
@media (max-width: 1023px) {
  .p-slaice .story-steps { gap: 56px; }
  .p-slaice .step, .p-slaice .step:first-child, .p-slaice .step:last-child { min-height: 0; padding: 0; }
}

/* features: a two-column definition list (term | what it means), rows split by the table rule */
.p-slaice .feat-dl { grid-column: 5 / -1; grid-template-columns: minmax(0, 1fr); gap: 0; }
.p-slaice .feat-dl > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--g); padding-block: 20px; }
.p-slaice .feat-dl > div + div { border-top: 1px solid var(--line); }
.p-slaice .feat-dl > div:first-child { padding-top: 6px; }
.p-slaice .feat-dl dd { margin-top: 0; font-size: var(--fs-b); }
@media (max-width: 899px) { .p-slaice .feat-head, .p-slaice .feat-dl { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .p-slaice .feat-grid { row-gap: 20px; }
  .p-slaice .feat-dl > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding-block: 14px; }
  .p-slaice .feat-dl dt { font-size: var(--fs-b); font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
}

/* benefits and comparison, merged */
.p-slaice .cmp-grid { row-gap: clamp(44px, 4.4vw, 72px); }
.cmp-top { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 20px; align-items: end; }
.cmp-top .h2 { grid-column: 1 / span 7; }
.cmp-top .lead { grid-column: 9 / -1; }
.ba { grid-column: 1 / span 7; }
.ba-pair { display: flex; flex-wrap: wrap; gap: var(--g); }
.ba-side { flex: 1 1 260px; padding: clamp(20px, 2.2vw, 32px); border-radius: 6px; background: #fff; }
.ba-name { font: 600 var(--fs-b)/1.3 var(--sans); margin-bottom: 16px; }
.ba-side .led { --cw: clamp(34px, 3.2vw, 48px); }
.led--all .lc b { background: var(--navy); color: #fff; }
.led--slice .lc i:not(.on) { opacity: 0.4; }
.ba-n { margin-top: 20px; font-size: var(--fs-b); color: var(--muted); max-width: 24ch; }
.ba-n strong { display: block; font: 500 min(var(--fs-h2), 7.4vw)/1.02 var(--display); letter-spacing: -0.025em; color: var(--ink); margin-bottom: 6px; }
.ba-side--us .ba-n strong { color: var(--navy); }
.ba-cap { margin-top: 16px; font-size: var(--fs-b); color: var(--muted); max-width: 60ch; }
.bens4 { grid-column: 9 / -1; display: grid; gap: 28px; align-content: start; }
.bens4 dt { font: 600 var(--fs-l)/1.2 var(--sans); letter-spacing: 0; }
.bens4 dd { margin-top: 6px; }
.p-slaice .cmp-wrap { grid-column: 1 / -1; position: relative; background: #fff; border-radius: 6px; }
.p-slaice .cmp { position: relative; z-index: 1; table-layout: fixed; background: transparent; }
.cmp-c1 { width: 31%; }
.cmp-c4 { width: 27%; }
.p-slaice .cmp .is-us { background: transparent; }
.cmp-fill { position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; width: 27%; border-radius: 6px; background: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .mo [data-cmp].is-armed .cmp-fill { clip-path: inset(100% 0 0 0); }
  .mo [data-cmp].is-armed .is-us { opacity: 0; }
  .mo [data-cmp].is-play .cmp-fill { clip-path: inset(0 0 0 0); transition: clip-path 800ms cubic-bezier(0.16, 1, 0.3, 1); }
  .mo [data-cmp].is-play .is-us { opacity: 1; transition: opacity 420ms ease 120ms; }
}
@media (max-width: 1023px) {
  .cmp-top .h2, .cmp-top .lead, .ba, .bens4 { grid-column: 1 / -1; }
  .bens4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); }
}
@media (max-width: 600px) {
  .bens4 { grid-template-columns: 1fr; }
  .ba-side .led { --cw: clamp(28px, 11vw, 48px); }
}

/* =========================================================
   Use cases: four layouts, one ledger
   ========================================================= */
.ux-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: clamp(48px, 5vw, 80px); align-items: start; }
.ux-intro { grid-column: 1 / span 5; grid-row: 1; }
.ux-intro .statement { margin-top: 24px; }
.ux-intro > p:not(.statement) { margin-top: 20px; }
.ux-intro .btn { margin-top: 32px; justify-self: start; }
.ux-intro--wide { grid-column: 1 / span 7; }
.ux-aside { grid-column: 9 / -1; grid-row: 1; align-self: end; }
.ux-aside .btn { margin-top: 24px; }
.ux-fig { grid-column: 7 / -1; grid-row: 1; padding: clamp(20px, 2.4vw, 36px); border-radius: 6px; background: var(--band); }
.band .ux-fig { background: #fff; }
.p-use-cases .laws li { font-size: var(--fs-b); }

/* section-head ledger: each use case shows its own state */
.ux-h { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); }
.uc-mark { flex: none; }
.uc-mark .led { --cw: 12px; --ch: 7px; gap: 3px; position: relative; }
.uc-mark .lc { gap: 3px; }
.uc-mark .lc.is-lift { transform: translateY(-6px); }
.uc-mark .lc.is-lift i { background: var(--navy); }
.led--cut::after { content: ""; position: absolute; left: -3px; right: -3px; top: calc(3 * (var(--ch) + 3px) - 2px); height: 2px; border-radius: 1px; background: var(--ink); }

/* pins: the "how it works" notes, placed on the drawing */
.pin { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 var(--fs-14)/1 var(--sans); font-variant-numeric: tabular-nums; vertical-align: middle; letter-spacing: 0.01em; }
.pin--float { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); }
.sp-name .pin, .sp-tags .pin { margin-left: 6px; }
.sp-name { font: 600 var(--fs-b)/1.3 var(--sans); }
.sp-sub { font-size: var(--fs-14); color: var(--muted); letter-spacing: 0.01em; }
.sp-led { position: relative; margin-top: 46px; }
.sp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.sp-tags > span:not(.pin) { padding: 5px 12px; border-radius: 999px; background: var(--navy); color: #fff; font: 600 var(--fs-14)/1.2 var(--sans); letter-spacing: 0.01em; }
.notes-h { margin: clamp(24px, 2.4vw, 36px) 0 16px; }
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--g); }
.notes li { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; align-items: start; }
.notes h4 { font: 600 var(--fs-b)/1.35 var(--sans); letter-spacing: 0; }
.notes p { margin-top: 2px; }
.notes--col { grid-template-columns: 1fr; }

/* 1. mandate: the board split, global against India */
.split { position: relative; display: grid; grid-template-columns: auto minmax(84px, 1fr) auto; align-items: stretch; }  /* relative: the story's flying cells are placed against it */
.split .led { --cw: clamp(26px, 2.3vw, 38px); --ch: clamp(12px, 1.1vw, 16px); }
.split-side { padding: 18px 18px 22px; border-radius: 6px; background: #fff; }
.split-side--in { box-shadow: inset 0 4px 0 var(--navy); }
.led--global .lc:not(.is-on) i { opacity: 0.55; }
.split-side--in .sp-led { margin-top: 20px; } /* no floating pin on this side, so no room is kept for one */
/* the link between the two systems: a short label, then a dashed arrow whose dashes keep flowing (continuous sync) */
.split-go { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 0 14px; text-align: center; color: var(--navy); }
.go-txt { display: flex; flex-direction: column; gap: 2px; }
.go-txt b { font: 600 var(--fs-b)/1.2 var(--sans); letter-spacing: 0; }
.go-txt span { font: 500 13px/1.2 var(--sans); color: var(--muted); letter-spacing: 0.01em; }
.go-flow { position: relative; display: block; width: calc(100% - 10px); max-width: 96px; height: 4px; margin-right: 10px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 8px, transparent 8px 14px); transform-origin: left center; }
.go-flow::after { content: ""; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); border-left: 10px solid var(--blue); border-block: 6px solid transparent; }
@media (min-width: 900px) and (max-width: 1279px), (max-width: 600px) {
  .split { grid-template-columns: 1fr; }
  .split-go { flex-direction: row; justify-content: center; gap: 14px; padding: 14px 0 22px; text-align: left; }
  .go-flow { order: -1; width: 4px; max-width: none; height: 36px; margin: 0; background: repeating-linear-gradient(180deg, var(--blue) 0 8px, transparent 8px 14px); transform-origin: center top; }
  .go-flow::after { right: auto; left: 50%; top: auto; bottom: -10px; transform: translateX(-50%); border: 0; border-top: 10px solid var(--blue); border-inline: 6px solid transparent; }
  .go-txt { flex-direction: row; align-items: baseline; gap: 6px; }
}
/* 2. SDT: the race, full width, is the peak */
.race--peak { padding: clamp(28px, 3.6vw, 64px); }
.race--peak .lanes { margin-top: clamp(28px, 3vw, 48px); row-gap: 22px; }
.race--peak .track { height: clamp(56px, 5.6vw, 88px); }
.race--peak .lane-name { font: 600 var(--fs-l)/1.2 var(--sans); letter-spacing: 0; }
.race--peak .js-race-label { font: 600 var(--fs-l)/1 var(--sans); }
.race--peak .axis { font-size: var(--fs-14); letter-spacing: 0.01em; }
.race--peak .race-note { font-size: var(--fs-b); }
@media (min-width: 1024px) { .race--peak .lanes { grid-template-columns: minmax(160px, 260px) 1fr; } }
@media (max-width: 1023px) {
  .race--peak .lanes { grid-template-columns: 1fr; row-gap: 10px; }
  .race--peak .lane-name { margin-top: 8px; }
  .race--peak .axis { grid-column: 1; }
}
@media (max-width: 600px) {
  .race--peak .js-race-label { font-size: var(--fs-b); }
  /* the short bar can't hold its label on phones, so it sits just past the bar end */
  .lane--us .js-race-label { transform: translate(12px, -50%); color: var(--navy); }
}

/* 1. mandate, played once when it scrolls in: the India company codes are picked, the arrow runs,
   the India system fills cell by cell, then backups and audit logs appear */
@media (prefers-reduced-motion: no-preference) {
  .mo .split.is-armed .led--global .lc.is-on b { background: var(--paper-2); color: var(--ink); }
  .mo .split.is-armed .go-flow { transform: scaleX(0); }
  .mo .split.is-armed .led--india i.on { background: var(--cell); }
  .mo .split.is-armed .sp-tags { opacity: 0; transform: translateY(6px); }
  .mo .split.is-play .led--global .lc.is-on b { background: var(--navy); color: #fff; transition: background-color 240ms ease, color 240ms ease; }
  .mo .split.is-play .go-flow { transform: none; transition: transform 600ms var(--ease-in-out) 200ms; animation: go-flow 900ms linear 800ms infinite; } /* keeps flowing (client request, 28 Oct); off under reduced motion like all .mo motion */
  .mo .split.is-play .led--india i.on { background: var(--blue); transition: background-color 240ms ease 700ms; }
  .mo .split.is-play .led--india .lc i:nth-of-type(2) { transition-delay: 760ms; }
  .mo .split.is-play .led--india .lc i:nth-of-type(3) { transition-delay: 820ms; }
  .mo .split.is-play .led--india .lc i:nth-of-type(4) { transition-delay: 880ms; }
  .mo .split.is-play .led--india .lc i:nth-of-type(5) { transition-delay: 940ms; }
  .mo .split.is-play .led--india .lc i:nth-of-type(6) { transition-delay: 1000ms; }
  .mo .split.is-play .sp-tags { opacity: 1; transform: none; transition: opacity 300ms ease 1150ms, transform 300ms var(--ease-out) 1150ms; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (max-width: 1279px), (prefers-reduced-motion: no-preference) and (max-width: 600px) {
  .mo .split.is-armed .go-flow { transform: scaleY(0); }
  .mo .split.is-play .go-flow { transform: none; animation-name: go-flow-y; }
  .mo .split.cv-armed .go-flow { transform: scaleY(0); }
  .mo .split.cv-s3 .go-flow { transform: none; animation-name: go-flow-y; }
}
@keyframes go-flow { to { background-position: 14px 0; } }
@keyframes go-flow-y { to { background-position: 0 14px; } }

/* 3. carve-out: one company-code column lifted out of the board */
.ux--carve .ux-intro { grid-column: 9 / -1; }
.ux--carve .ux-fig { grid-column: 1 / span 7; }
.lift { position: relative; display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: start; }
.lift .led { --cw: clamp(28px, 2.6vw, 40px); --ch: clamp(12px, 1.1vw, 16px); }
.lift-src { grid-column: 1; grid-row: 1; margin-top: clamp(56px, 6vw, 96px); padding: 18px 18px 22px; border-radius: 6px; background: #fff; }
.lift-new { grid-column: 3; grid-row: 1; position: relative; z-index: 1; padding: 18px 18px 22px; border-radius: 6px; background: #fff; box-shadow: inset 0 4px 0 var(--navy); }
.lift-col .pin:not(.pin--float) { position: absolute; }
.pin-at--mid { position: absolute; right: -36px; top: 55%; }
.lift-new .sp-led { position: relative; width: max-content; margin-top: 20px; margin-right: 40px; }  /* no floating pin here; the "3" sits beside the column, inside the box */
.lift-new .pin-at--mid { right: -12px; }
.lift .lc, .split .lc { align-items: center; }  /* in both systems, each code chip, its cells and the "1" share one centre line */
.lc.is-slot b { background: transparent; color: var(--muted); }
/* the carve-out story (demos.js, [data-demo="carve"]): 1 pick 3000, 2 the new system appears, 3 its records and their
   linked records cross one by one and are masked on the way, 4 the totals match. The markup is the final frame. */
.cv-total { margin-top: 12px; font-size: var(--fs-14); color: var(--muted); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.cv-total b { color: var(--ink); font-weight: 600; }
.lift .lc.is-slot { border-radius: 6px; transition: box-shadow 300ms ease; }
.lift.cv-s1 .lc.is-slot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red); }   /* step 1: the scope */
.split .lc { border-radius: 6px; transition: box-shadow 300ms ease; }
.split.cv-s1 .led--global .lc.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red); }
@media (prefers-reduced-motion: no-preference) {
  /* the mandate story (demos.js, [data-demo="mandate"]): like the carve-out, but records are copied, so the source keeps them */
  .mo .split.cv-armed .split-side--in { opacity: 0.3; transform: translateY(16px); }
  .mo .split.cv-s2 .split-side--in { opacity: 1; transform: none; transition: opacity 400ms ease, transform 600ms var(--ease-expo); }
  .mo .split.cv-armed:not(.cv-s1):not(.cv-s4) .led--global .lc.is-on b { background: var(--paper-2); color: var(--ink); }  /* grey only before the pick */
  .mo .split.cv-s1 .led--global .lc.is-on b { background: var(--navy); color: #fff; transition: background-color 240ms ease, color 240ms ease; }
  .mo .split.cv-armed .led--global .lc.is-on i:not(.lit) { background: var(--cell); }
  .mo .split.cv-armed .led--india i:not(.lit) { background: var(--cell); }
  .mo .split.cv-armed .go-flow { transform: scaleX(0); }
  .mo .split.cv-s3 .go-flow { transform: none; transition: transform 500ms var(--ease-in-out); animation: go-flow 900ms linear 500ms infinite; }
  .mo .split.cv-armed .sp-tags { opacity: 0.35; }
  .mo .split.cv-s4 .sp-tags { opacity: 1; transition: opacity 250ms ease; }
  .mo .split.cv-s4 .sp-tags > span:not(.pin) { animation: cv-pop 520ms var(--ease-out) both; }
  .mo .split.cv-s4 .sp-tags > span:nth-child(2) { animation-delay: 180ms; }
}
.cv-fly, .cv-link { position: absolute; left: 0; top: 0; z-index: 2; border-radius: 3px; pointer-events: none; background: var(--blue); }
.cv-fly.mask { background-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='1.1' fill='%23fff'/%3E%3C/svg%3E"); }
.cv-link { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }  /* a linked record travelling with its row */
.cv-again { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--navy); cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; opacity: 0; pointer-events: none; }
.cv-again.is-shown { opacity: 1; pointer-events: auto; transition: opacity 200ms ease; }
@media (prefers-reduced-motion: no-preference) {
  .mo .lift.cv-armed .lift-new { opacity: 0.3; transform: translateY(16px); }
  .mo .lift.cv-s2 .lift-new { opacity: 1; transform: none; transition: opacity 400ms ease, transform 600ms var(--ease-expo); }
  .mo .lift.cv-armed .lift-line { clip-path: inset(-10% 100% -10% -2%); }
  .mo .lift.cv-s2 .lift-line { clip-path: inset(-10% -2% -10% -2%); transition: clip-path 900ms var(--ease-in-out); }
  .mo .lift.cv-armed .lift-new .sp-tags { opacity: 0.35; }
  .mo .lift.cv-s4 .lift-new .sp-tags { opacity: 1; transition: opacity 250ms ease; }
  .mo .lift.cv-s4 .lift-new .sp-tags > span:first-child { animation: cv-pop 520ms var(--ease-out); }
  .mo .js-cv-steps.is-playing li { opacity: 0.4; transition: opacity 250ms ease; }
  .mo .js-cv-steps.is-playing li.is-now { opacity: 1; }
  .mo .js-cv-steps li .pin { transition: background-color 250ms ease; }
  .mo .js-cv-steps.is-playing li.is-now .pin { background: var(--red); }
}
@keyframes cv-pop { 40% { transform: scale(1.08); } }
.lc i.gone { background: var(--paper-2); }
.lift-line { grid-column: 2; grid-row: 1; align-self: stretch; width: 100%; height: calc(100% - 40px); margin-top: 40px; overflow: visible; }
.lift-line path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .mo .lift.is-armed .lift-new { transform: translateY(clamp(56px, 6vw, 96px)); }
  .mo .lift.is-armed .lift-line { clip-path: inset(-10% 100% -10% -2%); }
  .mo .lift.is-armed .lc.is-slot i { background: var(--cell); }
  .mo .lift.is-play .lift-new { transform: none; transition: transform 700ms var(--ease-expo) 150ms; }
  .mo .lift.is-play .lift-line { clip-path: inset(-10% -2% -10% -2%); transition: clip-path 900ms var(--ease-in-out) 150ms; }
  .mo .lift.is-play .lc.is-slot i { background: var(--paper-2); transition: background-color 300ms ease; }
}
@media (max-width: 600px) {
  .lift { grid-template-columns: 1fr; row-gap: 16px; }
  .lift-src, .lift-new { grid-column: 1; margin-top: 0; }
  .lift-src { grid-row: 1; }
  .lift-new { grid-row: 2; justify-self: start; }
  .lift-line { display: none; }
  .mo .lift.is-armed .lift-new { transform: translateY(24px); }
}

/* 4. test systems: a month calendar */
.cal-fig { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 0; background: transparent !important; }
.cal { grid-column: 1 / span 8; padding: clamp(20px, 2.4vw, 36px); border-radius: 6px; background: #fff; }
.cal-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; margin-bottom: 18px; max-width: none; }
.cal-wk, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-wk { margin-bottom: 6px; font-size: var(--fs-14); color: var(--muted); letter-spacing: 0.01em; }
.cal-wk span { padding-left: 8px; }
.cal-d0 { position: relative; min-height: clamp(44px, 5.2vw, 84px); padding: 6px 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.cal-n { position: relative; z-index: 1; font-size: var(--fs-14); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.cal-d0.cal-t, .cal-d0.cal-d { color: #fff; }
.cal-t { background: var(--navy); }
.cal-d { background: var(--blue); }
.cal-t .cal-n, .cal-d .cal-n { color: #fff; font-weight: 600; }
.cal-t::after, .cal-d::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='1.1' fill='%23fff'/%3E%3C/svg%3E"); opacity: 0.9; }
.cal-what { position: relative; z-index: 1; display: block; margin-top: 4px; font: 600 var(--fs-14)/1.2 var(--sans); letter-spacing: 0.01em; }
.cal-d0 .pin { position: absolute; top: 6px; right: 6px; z-index: 1; width: 24px; height: 24px; background: #fff; color: var(--ink); }
.cal-x { min-height: 1px; }
/* the refresh-day story (demos.js, [data-demo="cal"]): a marker walks the month; each refresh day plays the four steps:
   1 outline (define the slice), 2 fill (extract), 3 dots (scramble), 4 a check pop (load and verify). Markup = final frame. */
@media (prefers-reduced-motion: no-preference) {
  .mo .cal.cv-armed :is(.cal-t, .cal-d):not(.cs-2) { background: var(--paper-2); }
  .mo .cal.cv-armed :is(.cal-t, .cal-d):not(.cs-2) .cal-n { color: var(--muted); font-weight: 400; }
  .mo .cal.cv-armed :is(.cal-t, .cal-d):not(.cs-3)::after, .mo .cal.cv-armed .cal-d0:not(.cs-4) .pin { opacity: 0; }
  .mo .cal.cv-armed :is(.cal-t, .cal-d) { transition: background-color 260ms ease, box-shadow 200ms ease; }
  .mo .cal.cv-armed :is(.cal-t, .cal-d)::after { transition: opacity 260ms ease; }
  .mo .cal.cv-armed .cal-d0.cs-1 { box-shadow: inset 0 0 0 2px var(--red); }
  .mo .cal.cv-armed .cal-d0.cs-4 { animation: cv-pop 420ms var(--ease-out); }
  .mo .cal.cv-armed .cal-d0.is-cur { box-shadow: inset 0 0 0 2px var(--blue); }
  .mo .cal.cv-armed .cal-d0.cs-1.is-cur { box-shadow: inset 0 0 0 2px var(--red); }
}
.cal-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: var(--fs-b); max-width: none; }
.ck { display: inline-flex; align-items: center; gap: 8px; }
.ck::before { content: ""; position: relative; width: 18px; height: 12px; border-radius: 3px; background: var(--cell); }
.ck--t::before { background: var(--navy); }
.ck--d::before { background: var(--blue); }
.ck--m::before { background-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='1.1' fill='%23fff'/%3E%3C/svg%3E"); }
.cal-notes { grid-column: 10 / -1; }
.cal-notes .notes-h { margin-top: 8px; }
@media (min-width: 744px) and (max-width: 1023px) {
  .cal { grid-column: 1 / span 8; }
  .cal-notes { grid-column: 9 / -1; }
}
@media (max-width: 743px) {
  .cal, .cal-notes { grid-column: 1 / -1; }
  .cal-notes .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .cal-what { display: none; }
  .cal-wk span { padding-left: 0; text-align: center; }
  .cal-d0 { padding: 4px; text-align: center; }
  .cal-d0 .pin { display: none; }  /* no room beside the centred date; the refresh-day list below carries the steps */
  .cal-grid, .cal-wk { gap: 3px; }
}

@media (max-width: 899px) {
  .ux-intro, .ux-intro--wide, .ux-aside, .ux-fig, .ux--carve .ux-intro, .ux--carve .ux-fig { grid-column: 1 / -1; grid-row: auto; }
  .ux-aside { margin-top: -24px; }
}
@media (max-width: 600px) {
  .notes, .cal-notes .notes { grid-template-columns: 1fr; }
  .split .led, .lift .led { --cw: clamp(26px, 9vw, 40px); }
}


/* 4. test systems, played once: the four refresh days light up in date order, then the scrambled stripes appear */
@media (prefers-reduced-motion: no-preference) {
  .mo .cal.is-armed :is(.cal-t, .cal-d) { background: var(--paper-2); }
  .mo .cal.is-armed :is(.cal-t, .cal-d) .cal-n { color: var(--ink); font-weight: 400; }
  .mo .cal.is-armed :is(.cal-t, .cal-d)::after, .mo .cal.is-armed .cal-d0 .pin { opacity: 0; }
  .mo .cal.is-play .cal-t { background: var(--navy); }
  .mo .cal.is-play .cal-d { background: var(--blue); }
  .mo .cal.is-play :is(.cal-t, .cal-d) .cal-n { color: #fff; font-weight: 600; }
  .mo .cal.is-play :is(.cal-t, .cal-d)::after, .mo .cal.is-play .cal-d0 .pin { opacity: 1; }
  .mo .cal.is-play :is(.cal-t, .cal-d) { --cd: 0ms; transition: background-color 320ms ease var(--cd); }
  .mo .cal.is-play :is(.cal-t, .cal-d) .cal-n { transition: color 320ms ease var(--cd); }
  .mo .cal.is-play :is(.cal-t, .cal-d)::after { transition: opacity 300ms ease calc(var(--cd) + 220ms); }
  .mo .cal.is-play .cal-d0 .pin { transition: opacity 240ms ease 900ms; }
  .mo .cal.is-play .cal-grid > :nth-child(8) { --cd: 160ms; }
  .mo .cal.is-play .cal-grid > :nth-child(15) { --cd: 320ms; }
  .mo .cal.is-play .cal-grid > :nth-child(22) { --cd: 480ms; }
}
/* =========================================================
   Clients
   ========================================================= */
/* airport: a 22-year ledger, each year coloured by where it ended up */
.tl2 { grid-column: 1 / -1; --h: clamp(14px, 1.5vw, 22px); }
.tl2 figcaption { margin-bottom: 20px; }
.tl2-led { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: clamp(18px, 2.2vw, 32px); border-radius: 6px; background: #fff; }
.tl2-rows { display: grid; grid-template-rows: repeat(4, var(--h)); gap: 4px; font-size: var(--fs-14); line-height: 1; color: var(--muted); align-items: center; letter-spacing: 0.01em; }
.tl2-yrs { display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); gap: 4px; }
.ty { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, var(--h)) auto; gap: 4px; min-width: 0; }  /* the year label never widens its column */
.ty i { display: block; border-radius: 3px; background: var(--cell); }
.ty--hist i { background: var(--blue); }
.ty--now i { background: #B9514A; }  /* the current year is the line: brand red, in line with the other years */
.ty--now b { color: #A44640; font-weight: 700; }
.ty b { justify-self: center; margin-top: 8px; font: 600 var(--fs-14)/1 var(--sans); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0.01em; }
.ty:first-child b { justify-self: start; }
.ty:last-child b { justify-self: end; }  /* the end labels stay inside the chart on narrow screens */
.tl2-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px var(--g); margin-top: 20px; }
.tl2-key button { position: relative; display: grid; width: 100%; min-height: 44px; padding: 4px 8px 6px 38px; margin: -4px -8px -6px; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tl2-key button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.tl2-key button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.7); }
@media (hover: hover) and (pointer: fine) { .tl2-key button:hover { background: rgba(255, 255, 255, 0.7); } }
.tl2-key button::before { content: ""; position: absolute; left: 8px; top: calc(4px + 0.3em); width: 18px; height: 12px; border-radius: 3px; background: var(--cell); }
.tl2-key .k--hist::before { background: var(--blue); }
.tl2-key .k--now::before { background: #B9514A; }
.tl2-key .k-dt { font-weight: 600; font-variant-numeric: tabular-nums; }
.tl2-key .k-dd { color: var(--muted); }
.band .tl2-key .k-dd { color: #4a4950; }
/* picking a group out: the other years fade back */
.tl2-led .ty i, .tl2-led .ty b { transition: opacity 200ms ease; }
.tl2-led[data-focus="arch"] .ty:not(.ty--arch) :is(i, b), .tl2-led[data-focus="hist"] .ty:not(.ty--hist) :is(i, b), .tl2-led[data-focus="now"] .ty:not(.ty--now) :is(i, b) { opacity: 0.22; }
@media (max-width: 1179px) {
  .ty b { visibility: hidden; }
  .ty--key b { visibility: visible; justify-self: start; text-align: left; }
  .ty--now b { justify-self: end; text-align: right; }
}
@media (max-width: 743px) { .tl2-key { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .tl2-led { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .tl2-rows { display: none; }
  .tl2-yrs { gap: 2px; }
}

/* automaker: one month of testing, before and after (filled shapes, no outlined boxes) */
.month2 { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) auto; column-gap: clamp(16px, 2vw, 28px); row-gap: 8px; align-items: center; padding: clamp(24px, 3vw, 44px); border-radius: 6px; background: var(--paper-2); }
.month2 figcaption { grid-column: 1 / -1; margin-bottom: 16px; }
.m2-row { display: contents; }
.m2-name { grid-column: 1; font-weight: 600; }
.m2-bar { grid-column: 2; display: flex; gap: 3px; height: 36px; }
.m2-blk { flex: 5 1 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.m2-blk i { display: block; border-radius: 2px; background: var(--ink); }
.m2-free { flex: 25 1 0; border-radius: 2px; background: #fff; }
.m2-row--us .m2-free { flex-basis: 0; flex-grow: 30; background: var(--band); }
.m2-big { grid-column: 3; font: 600 var(--fs-l)/1.1 var(--sans); letter-spacing: 0; white-space: nowrap; }
.m2-row--us .m2-big { color: var(--navy); }
.m2-note { grid-column: 2 / -1; color: var(--muted); margin-bottom: 18px; }
.m2-axis { grid-column: 2; display: flex; justify-content: space-between; font-size: var(--fs-14); color: var(--muted); margin-top: -10px; max-width: none; letter-spacing: 0.01em; }
@media (max-width: 743px) {
  .month2 { grid-template-columns: minmax(0, 1fr); }
  .m2-name, .m2-bar, .m2-big, .m2-note, .m2-axis { grid-column: 1; }
  .m2-name { margin-top: 8px; }
  .m2-bar { height: 28px; }
  .m2-axis { grid-row: auto; margin-top: 0; }
}

/* =========================================================
   Touch and tablets (744–1366)
   ========================================================= */
/* story: pinned only at 1024+ in landscape; portrait tablets get the per-step boards */
@media (min-width: 1024px) and (orientation: portrait) {
  .p-slaice .story-stage { display: none; }
  .p-slaice .story-steps { grid-column: 1 / -1; display: grid; gap: 64px; }
  .p-slaice .step, .p-slaice .step:first-child, .p-slaice .step:last-child { min-height: 0; padding: 0; justify-content: flex-start; }
  .p-slaice .step::before { display: none; }
  .p-slaice .step .board--mini { display: block; }
}
/* tablet story step: text left, its own board right */
@media (min-width: 744px) and (max-width: 1023px), (min-width: 1024px) and (orientation: portrait) {
  .p-slaice .step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--g); row-gap: 14px; align-content: start; }
  .p-slaice .step > :not(.board--mini) { grid-column: 1; }
  .p-slaice .step > .board--mini { grid-column: 2; grid-row: 1 / span 4; align-self: start; margin-top: 0; max-width: none; }
}

/* deliberate two-column compositions at 744–899 (style.css stacks these below 900) */
@media (min-width: 744px) and (max-width: 899px) {
  .p-slaice .s-hero-copy { grid-column: 1 / span 7; }
  .p-slaice .seals--row { grid-column: 9 / -1; }
  .p-slaice .tax-text { grid-column: 1 / -1; }
  .p-slaice .tax-figs { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); column-gap: var(--g); }
  .p-slaice .tax-points { grid-template-columns: 1fr; }
  :is(.p-slaice, .p-use-cases) .faq-grid .faq-head { grid-column: 1 / span 4; position: sticky; top: 120px; }
  :is(.p-slaice, .p-use-cases) .faq-grid > .faq { grid-column: 5 / -1; }
  .p-use-cases .ux-intro--wide { grid-column: 1 / span 7; grid-row: 1; }
  .p-use-cases .ux-aside { grid-column: 8 / -1; grid-row: 1; margin-top: 0; }
  .p-use-cases .ux--mandate .ux-intro, .p-use-cases .ux--carve .ux-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
  .p-use-cases :is(.ux--mandate, .ux--carve) .ux-intro > * { grid-column: 2; }
  .p-use-cases :is(.ux--mandate, .ux--carve) .ux-intro > .ux-h { grid-column: 1; grid-row: 1; }
  .p-use-cases :is(.ux--mandate, .ux--carve) .ux-intro > .statement { grid-column: 1; grid-row: 2; }
  .p-use-cases :is(.ux--mandate, .ux--carve) .ux-intro > .uc-gist { grid-column: 1; grid-row: 3 / span 3; }
  .p-use-cases :is(.ux--mandate, .ux--carve) .ux-intro > p:not(.statement):not(.uc-gist) { grid-row: 1 / span 2; margin-top: 0; }
  .p-use-cases .uc-out { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-clients .cs-intro-in .h2 { grid-column: 1 / span 6; }
  .p-clients .cs-intro-in .lead { grid-column: 7 / -1; }
  .p-clients .case-top { grid-column: 1 / span 7; }
  .p-clients .case-figs:not(.case-figs--four) { grid-column: 8 / -1; }
  .p-clients .case-block:nth-child(1) { grid-column: 1 / span 6; }
  .p-clients .case-block:nth-child(2) { grid-column: 7 / -1; }
}
.p-clients .case-figs--four > div { justify-content: flex-end; }
/* 44px tall hit areas for stand-alone text links, without moving them */
:is(.p-slaice, .p-use-cases, .p-clients) main .lnk { padding-top: 19px; margin-top: -19px; }
:is(.p-slaice, .p-use-cases, .p-clients) main .faq-head .lnk { margin-top: 5px; }

/* =========================================================
   Round 3: each inner hero draws its own page (no generic tick)
   ========================================================= */
.hero-art { position: absolute; z-index: 0; right: max(var(--m), calc((100% - var(--max)) / 2)); bottom: clamp(72px, 8vw, 136px); }
@media (prefers-reduced-motion: no-preference) {
  .mo .hero-art { clip-path: inset(-10% 100% -10% -2%); animation: wipe 1200ms var(--ease-in-out) 200ms forwards; }
}
/* SLaiCE: the slice board in state 1, beside the copy */
.s-hero .hero-art--board { position: static; grid-column: 8 / -1; grid-row: 2; align-self: end; justify-self: end; }
.s-hero .seals--row { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 10px 40px; }
.hero-art--board .board { box-shadow: 0 1px 0 rgba(28, 27, 31, 0.04); }
.hero-art--board .board .b-row { flex-direction: row; gap: 14px; }
.hero-art--board .board .b-mid { flex-direction: column; padding: 54px 0 0; gap: 4px; }
.hero-art--board .board .b-arrow { transform: none; width: 32px; }
/* Use cases: the four use-case glyphs, in page order */
.hero-art--marks { display: flex; align-items: flex-end; gap: clamp(20px, 2.6vw, 44px); }
.hero-art--marks li { display: flex; flex-direction: column; gap: 12px; }
.hero-art--marks .uc-mark .led { --cw: clamp(14px, 1.3vw, 20px); --ch: clamp(8px, 0.75vw, 12px); gap: 4px; }
.hero-art--marks .uc-mark .lc { gap: 4px; }
.hero-art--marks .uc-mark .lc.is-lift { transform: translateY(-10px); }
.hero-art--marks .led--cut::after { top: calc(3 * (var(--ch) + 4px) - 3px); }
.hm-n { font-size: var(--fs-14); color: var(--muted); white-space: nowrap; letter-spacing: 0.01em; }
/* Clients: 2005-2026 in one strip, the current year in the line's red */
.hero-art--strip { --w: clamp(9px, 1.05vw, 16px); }
.hs-cells, .hs-yrs { display: grid; grid-template-columns: repeat(22, var(--w)); column-gap: 3px; }
.hs-cells i { display: block; height: clamp(40px, 4vw, 64px); border-radius: 3px; background: var(--cell); }
.hs-cells i.h { background: var(--blue); }
.hs-cells i.n { background: var(--red); }
.hs-yrs { margin-top: 10px; font-size: var(--fs-14); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.hs-yrs span:nth-child(1) { grid-column: 1 / span 6; }
.hs-yrs span:nth-child(2) { grid-column: 13 / span 5; }
.hs-yrs span:nth-child(3) { grid-column: 18 / -1; justify-self: end; }
@media (max-width: 1100px) { .hero-art--marks .hm-n { display: none; } }
@media (max-width: 899px) {
  .hero-art { position: static; margin-top: 40px; }
  .s-hero .hero-art--board { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 0; }
  .s-hero .seals--row { grid-row: auto; display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 28px; }
  .hero-art--marks .hm-n { display: block; }
}
@media (max-width: 600px) {
  .hero-art--board .board { --cw: 22px; --ch: 8px; padding: 12px 14px; }
  .hero-art--board .board .col-h { height: 20px; }
  .hero-art--board .board .b-mid { padding-top: 40px; }
  .s-hero .seals--row { grid-template-columns: max-content; gap: 6px; }
  .hero-art--marks { gap: 18px; }
  .hm-n { font-size: var(--fs-14); letter-spacing: 0.01em; }
}

/* =========================================================
   SLaiCE: use cases in one top-aligned row of four, each under its ledger glyph
   ========================================================= */
.p-slaice .uc-head { grid-column: 1 / span 7; }
.uc-row { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); row-gap: 48px; align-items: stretch; margin-top: clamp(40px, 4.4vw, 72px); }
.uc-card { --mk: 56px; padding-top: 0; gap: 12px; }
.uc-card::before, .uc-card::after { top: calc(var(--mk) + 14px); }
.uc-card .uc-mark { display: flex; align-items: flex-end; height: var(--mk); margin-bottom: 30px; }
.uc-card .uc-mark .led { --cw: 14px; --ch: 8px; gap: 4px; }
.uc-card .uc-mark .lc { gap: 4px; }
.uc-card .uc-mark .led--cut::after { top: calc(3 * (var(--ch) + 4px) - 3px); }
.uc-card h3 { font-size: var(--fs-h3); }
.uc-card .law { font-size: var(--fs-14); letter-spacing: 0.01em; }
@media (max-width: 1099px) { .p-slaice .uc-head { grid-column: 1 / -1; } .uc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .uc-row { grid-template-columns: minmax(0, 1fr); row-gap: 36px; margin-top: 32px; }
  .uc-card { --mk: 48px; gap: 8px; }
  .uc-card .uc-mark { margin-bottom: 26px; }
}

/* =========================================================
   SLaiCE story on phones: one shared board, pinned under the header, advancing per step
   ========================================================= */
@media (max-width: 743px) {
  .p-slaice .story-grid { margin-top: 24px; }
  .p-slaice .story-stage { display: block; grid-column: 1 / -1; position: sticky; top: var(--stick, 72px); z-index: 2; margin-inline: calc(-1 * var(--m)); padding: 8px var(--m) 12px; background: var(--paper); }
  .p-slaice .board--story { --cw: 26px; --ch: 9px; --gap: 4px; padding: 12px 14px 4px; border-radius: 6px 6px 0 0; }
  .p-slaice .board--story .b-row { flex-direction: row; justify-content: space-between; gap: 8px; }
  .p-slaice .board--story .yrs { display: none; }
  .p-slaice .board--story .b-title { margin-bottom: 8px; }
  .p-slaice .board--story .col-h { height: 22px; padding: 0 3px; }
  .p-slaice .board--story .cut { top: calc(22px + 6px + 5 * (var(--ch) + 4px) - 3px); }
  .p-slaice .board--story .cut span { display: none; }
  .p-slaice .board--story .b-mid { flex-direction: column; padding: 50px 0 0; gap: 4px; }
  .p-slaice .board--story .b-arrow { transform: none; width: 28px; }
  .p-slaice .board--story .tip { bottom: auto; top: calc(100% + 8px); }
  .p-slaice .board--story .b-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; min-height: 0; }
  .p-slaice .story-foot { padding: 0 14px 10px; gap: 14px; }
  .p-slaice .story-rise { height: 22px; }
  .p-slaice .story-steps { gap: 40px; padding-top: 16px; }
  .p-slaice .step .board--mini { display: none; }
  .p-slaice .story-steps .step:is(:first-child, :last-child, :nth-child(n)) { padding-left: 14px; }
  .p-slaice .step::before { display: block; left: 0; top: 4px; width: 3px; height: 40px; }
}

/* =========================================================
   Round 3 type: tokens only
   ========================================================= */
:is(.p-slaice, .p-use-cases) .statement { font-size: var(--fs-m); }
:is(.p-slaice, .p-use-cases) .faq-head .h2 { font-size: var(--fs-m); }
.p-use-cases .uc-out--figs dd { font-size: var(--fs-fig); }
.uc-gist { margin-top: 20px; max-width: 56ch; }
.ux-intro > .uc-gist { margin-top: 20px; }

/* Clients: "Along the way" as a definition list, term beside what happened */
.along-dl { grid-column: 4 / -1; display: grid; }
.along-dl > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--g); padding-block: 18px; }
.along-dl > div:first-child { padding-top: 2px; }
.along-dl > div + div { border-top: 1px solid var(--line); }
.along-dl dt { font: 600 var(--fs-b)/1.35 var(--sans); }
@media (max-width: 899px) {
  .along-dl { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .along-dl > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}

/* estimator figures on this page: on the type tokens (the estimator's markup is untouched) */
.p-slaice .est-row output { font-size: var(--fs-l); }
.p-slaice .est-pct { font-size: var(--fs-fig); }

/* =========================================================
   Phones: compact SLaiCE (target under 10,000px at 390)
   ========================================================= */
@media (max-width: 600px) {
  .p-slaice .s-hero { row-gap: 28px; }
  /* use cases: glyph beside the card text, not above it */
  .uc-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-content: start; padding-top: 18px; }
  .uc-card::before, .uc-card::after { top: 0; }
  .uc-card > * { grid-column: 2; }
  .uc-card .uc-mark { grid-column: 1; grid-row: 1 / span 2; height: auto; margin: 4px 0 0; align-items: flex-start; align-self: start; }
  .uc-card .uc-mark .led { --cw: 10px; --ch: 6px; gap: 3px; }
  .uc-card .uc-mark .lc { gap: 3px; }
  .uc-card .uc-mark .led--cut::after { top: calc(3 * (var(--ch) + 3px) - 2px); }
  .uc-card .card-go { padding-top: 2px; }
  /* before and after, side by side */
  .ba-pair { flex-wrap: nowrap; gap: 10px; }
  .ba-side { flex: 1 1 0; min-width: 0; padding: 14px 12px; }
  .ba-name { margin-bottom: 12px; }
  .ba-side .led { --cw: clamp(22px, 7vw, 30px); --ch: 12px; gap: 4px; }
  .ba-side .lc b { display: none; }
  .ba-n { margin-top: 14px; }
  .p-slaice .bens4 { gap: 18px; }
  .p-slaice .bens4 dt { font: 600 var(--fs-b)/1.3 var(--sans); letter-spacing: 0; }
  .p-slaice .bens4 dd { margin-top: 4px; }
  .p-slaice .feat-head .lead { margin-top: 12px; }
}
@media (max-width: 600px) {
  .p-slaice { --sec: 56px; }
  .hero-art--board .board { --ch: 6px; }
  .hero-art--board .board .cells { gap: 3px; }
  .p-slaice .story-steps { gap: 30px; }
}
@media (max-width: 600px) {
  .uc-card .law { display: none; }   /* the full citations are on the Use cases page */
  .p-slaice .cmp-grid { row-gap: 32px; }
  .p-slaice .faq-head p { margin-top: 12px; }
  .p-slaice .faq-head .lnk { margin-top: 0; }
}

/* hero h1s: --fs-d (116 at 1440), shrinking with the viewport only where a line would otherwise wrap; two lines at most */
@media (min-width: 900px) { .p-slaice .s-hero-h { font-size: min(var(--fs-d), 8.2vw); } }
@media (max-width: 600px) { .p-clients .hero h1 { font-size: min(var(--fs-d), 9vw); } }
/* phones: run-in terms (bold term, then its text on the same line) keep the lists short */
@media (max-width: 600px) {
  .p-slaice :is(.feat-dl, .bens4, .tax-points) > div { display: block; }
  .p-slaice :is(.feat-dl, .bens4, .tax-points) :is(dt, dd) { display: inline; margin: 0; }
  .p-slaice :is(.feat-dl, .bens4, .tax-points) dt::after { content: ". "; }
  .p-slaice .feat-dl > div { padding-block: 12px; }
  .p-slaice .tax-points { margin-top: 28px; }
  .p-slaice .feat-head .lead { display: none; }
}
@media (max-width: 600px) {
  .p-slaice .s-hero { row-gap: 24px; }
  .s-hero .seals--row { display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .s-hero .seals--row li { font-size: var(--fs-b); }
  /* the arrow moves onto the title; the whole card stays the link */
  .uc-card .card-go { display: none; }
  .uc-card h3 .card-a { color: var(--navy); }
  .uc-card h3 .card-a::before { content: "\2192"; float: right; margin-left: 8px; }
  .uc-row { row-gap: 30px; margin-top: 24px; }
  .p-slaice .story-steps { gap: 26px; padding-top: 8px; }
  .p-slaice .tax-points { margin-top: 20px; }
}
/* automaker figures: "On demand" is the widest, so its column is too */
@media (min-width: 900px) { .p-clients .case-figs--four { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.p-slaice .tax-points { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 744px) {
  .p-use-cases .uc-out--figs { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(32px, 7vw, 120px); }
  .p-use-cases .uc-out--figs dd { white-space: nowrap; }
}
/* "India-ready" is the widest figure: five columns beside the text */
@media (min-width: 900px) { .p-slaice .tax-text { grid-column: 1 / span 6; } .p-slaice .tax-figs { grid-column: 8 / -1; } }
@media (max-width: 600px) {
  .hero-art--marks { gap: 14px; }
  .hero-art--marks .uc-mark .led { --cw: 12px; --ch: 7px; gap: 3px; }
  .hero-art--marks .uc-mark .lc { gap: 3px; }
  .hero-art--marks .led--cut::after { top: calc(3 * (var(--ch) + 3px) - 2px); }
  .hero-art--marks .uc-mark .lc.is-lift { transform: translateY(-6px); }
}
@media (min-width: 744px) and (max-width: 899px) {
  .p-slaice .s-hero .s-hero-copy { grid-column: 1 / span 6; }
  .s-hero .hero-art--board { grid-column: 7 / -1; grid-row: 2; align-self: end; justify-self: end; }
  .hero-art--board .board { --cw: 22px; --gap: 3px; padding: 14px 12px; }
  .hero-art--board .board .b-row { gap: 8px; }
  .hero-art--board .board .b-arrow { width: 24px; }
  .hero-art--board .board .col-h { padding: 0 3px; }
  .hero-art--board .board .b-title { white-space: nowrap; }
  .s-hero .seals--row { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 600px) {
  .hero-art--board .board { --gap: 3px; padding: 12px; }
  .hero-art--board .board .b-row { gap: 8px; }
  .hero-art--board .board .b-arrow { width: 24px; }
  .hero-art--board .board .col-h { padding: 0 3px; }
  .hero-art--board .board .b-title { white-space: nowrap; }
}
@media (max-width: 400px) { .hero-art--board .board .b-mid span { display: none; } }

/* Phones: the last header ("Selective Data Transition with SLaiCE") gets a wider column (the navy fill tracks it),
   and "Green-field" and "Brown-field" break at their soft hyphens rather than spill into the next column */
@media (max-width: 600px) {
  .cmp-c4, .cmp-fill { width: 30%; }
  .cmp thead th { hyphens: auto; -webkit-hyphens: auto; }
}