@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   page-insurance — page-scoped styles for insurance.html
   Uses only design-system tokens (see _build/PATTERNS.md). Every rule is
   theme-variable driven so it survives dark, void and light bands.

   1. Hero  ·  2. Breakdown (.brk)  ·  3. Flow tabs (.flow)  ·  4. Boundary
   5. Bilingual (.bi)  ·  6. Systems (.sys)  ·  7. Engagement (.eng)
   8. (scopes removed)  ·  9. Final CTA  ·  10. Responsive  ·  11. Reduced motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. HERO
   ─────────────────────────────────────────────────────────────────────────── */

.ins-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(600px, 78vh, 860px);
  padding-block: clamp(3rem, 5.6vw, 5.25rem);
}

/* The dark nav used to butt straight onto the pale band. This carries the
   navy down into the hero over ~200px so the join is modulated, not a cut. */
.ins-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(170px, 24vh, 290px);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--blue-deep) 17%, transparent),
    color-mix(in srgb, var(--blue-deep) 7%, transparent) 38%,
    color-mix(in srgb, var(--blue-deep) 2%, transparent) 72%,
    transparent);
  pointer-events: none;
  z-index: 0;
}

.ins-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  column-gap: clamp(2rem, 4.4vw, 4.75rem);
  row-gap: var(--s-12);
  width: 100%;
}

.ins-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  min-width: 0;
}

/* Title — the fold's single landing point. It has to carry the whole left
   column, so it runs at display-1 weight and size, not a step under it. */
.ins-hero__title {
  font-size: clamp(2.7rem, 5.1vw, 4.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.032em;
  margin: 0;
  max-width: 15ch;
  text-wrap: balance;
}

.ins-hero__title span {
  display: block;
}

/* The rule sits clear of the descenders ("g" in "gets") instead of cutting
   them, and holds one weight edge to edge instead of dissolving past the
   period — a rule that fades to nothing reads as a rendering fault. */
.ins-hero__accent {
  color: var(--accent);
  position: relative;
  width: fit-content;
  padding-bottom: 0.26em;
}

.ins-hero__accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.03em;
  height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 82%, transparent));
}

.ins-hero__lead {
  margin: 0;
  max-width: 54ch;
  color: var(--body);
}

.ins-hero__cta {
  flex-wrap: wrap;
  row-gap: var(--s-3);
  margin-top: var(--s-2);
}

.ins-hero__fine {
  margin: 0;
}

/* Licensed-boundary strip: amber = a human owns this. */
.ins-hero__bound {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: var(--s-4) 0 0;
  padding: var(--s-4) var(--s-5);
  max-width: 58ch;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
  /* A white card with an amber edge, not an amber wash — a 6% amber tint over
     the band's blue-grey wash muddies into khaki on light. */
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber-bright);
  border-radius: var(--r-xs) var(--r-lg) var(--r-lg) var(--r-xs);
  box-shadow: var(--shadow-card);
}

.ins-hero__bound-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--amber-bright);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber-bright) 14%, transparent);
}

/* Figure ------------------------------------------------------------------ */

/* The figure sits on its own tinted plate so the white record card inside
   reads as an object, not as a hole in the page. */
.ins-hero__figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  min-width: 0;
  padding: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1rem, 2vw, 2rem);
  background:
    linear-gradient(158deg,
      color-mix(in srgb, var(--blue) 9%, transparent),
      color-mix(in srgb, var(--cyan) 6%, transparent) 58%,
      transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lift);
}

/* [viewBox] raises specificity over core's `main svg[viewBox]:not([width])` cap. */
.ins-hero__figure .recordfig[viewBox] {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  overflow: visible;
}

/* Diagram vocabulary — colour comes only from theme / --rf-* tokens, so the
   figure survives a band flip. Strokes are the light-band weights (2.5 / 3). */
.recordfig {
  /* Deep teal on light — cyan fails contrast on white (ART-DIRECTION §2). */
  --fig-ch: color-mix(in srgb, var(--rf-ch-1, var(--cyan)) 80%, var(--blue-deep));
  --fig-node: var(--rf-node-1, var(--blue-deep));
  --fig-plate: var(--rf-plate, var(--paper-card, var(--bg-card)));
  --fig-line: var(--rf-ring, var(--line-strong));
  --fig-label: var(--rf-label, var(--body));
}

.recordfig__chips rect {
  fill: var(--fig-plate);
  stroke: color-mix(in srgb, var(--fig-ch) 62%, var(--line));
  stroke-width: 2;
}

.recordfig__lab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Fill needs two classes to outrank core's `main svg text:not([fill])`
   (0,1,3), which otherwise flattens every label in this figure to one grey and
   kills the amber human gate. Geometry/type above inherits normally. */
.recordfig .recordfig__lab,
.recordfig .recordfig__lab text {
  fill: var(--fig-label);
}

.recordfig .recordfig__lab--side text {
  fill: var(--muted);
}

.recordfig text.recordfig__lab--human {
  fill: var(--rf-amber, #8A5D05);
}

.recordfig__ch path {
  stroke: var(--fig-ch);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.recordfig__port circle {
  fill: var(--fig-ch);
}

.recordfig__out {
  stroke: var(--fig-node);
  stroke-width: 3;
  stroke-linecap: round;
}

/* The human fork is an output, so it carries the same 3 weight as the system
   fork — matched weights are what make the two curves read as one mirrored
   pair. Butt caps keep the 4/4 dash legible instead of bleeding closed. */
.recordfig__human {
  stroke: var(--amber-bright);
  stroke-width: 3;
  stroke-dasharray: 4 4;
  stroke-linecap: butt;
}

.recordfig__forkport circle {
  fill: var(--fig-node);
}

.recordfig__forkport circle.is-human {
  fill: var(--amber-bright);
}

.recordfig__node {
  fill: var(--fig-node);
}

.recordfig__ring {
  stroke: color-mix(in srgb, var(--fig-node) 42%, transparent);
  stroke-width: 1.75;
  transform-origin: 220px 108px;
  animation: recordfig-pulse 4.2s var(--e-inout) infinite;
}

.recordfig__ring--wide {
  stroke: color-mix(in srgb, var(--fig-node) 24%, transparent);
  animation-delay: -1.4s;
}

@keyframes recordfig-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.12); opacity: 0.32; }
}

/* The record plate — a white card on light, an elevated surface on dark. */
.recordfig__card rect {
  fill: var(--fig-plate);
  stroke: color-mix(in srgb, var(--blue-deep) 30%, var(--line));
  stroke-width: 2;
}

.recordfig__card {
  filter: drop-shadow(0 16px 34px rgb(11 40 66 / 0.16)) drop-shadow(0 2px 6px rgb(11 40 66 / 0.08));
}

.recordfig__id,
.recordfig__key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
}

.recordfig__val {
  font-family: var(--font-ui);
  font-size: 13px;
}

.recordfig .recordfig__id,
.recordfig .recordfig__key text {
  fill: var(--muted);
}

.recordfig .recordfig__val text {
  fill: var(--ink);
}

.recordfig__pill {
  fill: color-mix(in srgb, var(--fig-node) 12%, transparent);
  stroke: color-mix(in srgb, var(--fig-node) 52%, transparent);
  stroke-width: 1.5;
}

.recordfig__pill-t {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
}

.recordfig .recordfig__pill-t {
  fill: var(--accent);
}

.recordfig__rule { stroke: var(--line-strong); stroke-width: 1.75; }
.recordfig__hair line { stroke: var(--line); stroke-width: 1.5; }

.recordfig__plate {
  fill: color-mix(in srgb, var(--fig-node) 10%, transparent);
  stroke: color-mix(in srgb, var(--fig-node) 46%, var(--line));
  stroke-width: 2;
}

/* The single amber focal point: the licensed decision. */
.recordfig__plate--human {
  fill: color-mix(in srgb, var(--amber-bright) 16%, transparent);
  stroke: var(--amber-bright);
  stroke-width: 2.5;
  stroke-dasharray: 4 4;
}

.ins-hero__figure-note {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ───────────────────────────────────────────────────────────────────────────
   1b. WHO THIS FITS — chips + the one-shape spine (light band)
   Chips carry the audience list; the diagram carries the argument that the
   workflow shape does not change with the line of business. One amber focal
   point in the band: the licensed gate at the end of the spine.
   ─────────────────────────────────────────────────────────────────────────── */

.ins-fit {
  position: relative;
}

/* The copy column is stretched to the figure's full height and its parts are
   pinned top and bottom, so the band has no dead quadrant and the spine is not
   marooned in white (ART-DIRECTION §4.1). */
.ins-fit__grid {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22.5rem);
  column-gap: clamp(2rem, 4vw, 4rem);
}

.ins-fit__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ins-fit__copy > .lead {
  max-width: 50ch;
  text-wrap: pretty;
}

/* The segment list is set as a two-column index rather than a loose chip cloud:
   it gives the left column real mass down the band, so the spine on the right
   has something to sit opposite instead of a white quadrant. */
.ins-fit__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 2.6vw, 2.75rem);
  list-style: none;
  margin: var(--s-9, var(--s-8)) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}

.ins-fit__chips li {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--body);
  transition: color var(--d-2) var(--e-out);
}

.ins-fit__chips li:last-child {
  grid-column: 1 / -1;
}

.ins-fit__chips li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 62%, transparent);
  transform: translateY(-1px);
}

.ins-fit__chips li:hover {
  color: var(--ink);
}

/* Pinned to the bottom of the column so it sits on the same baseline as the
   figure plate — the footnote closes the quadrant instead of floating. */
.ins-fit__note {
  max-width: 52ch;
  margin: auto 0 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--muted);
}

/* The plate hugs the spine — a 214-unit figure marooned in a 600px card reads
   as an accident (ART-DIRECTION §4.1, no floating element in whitespace). */
.ins-fit__fig {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 22.5rem;
  margin-inline: 0 0;
}

/* [viewBox] raises specificity over core's `main svg[viewBox]:not([width])` cap. */
.ins-fit__fig .fitfig[viewBox] {
  display: block;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  overflow: visible;
  /* Deep teal on light — cyan fails contrast on white (ART-DIRECTION §2). */
  --fig-ch: color-mix(in srgb, var(--rf-ch-1, var(--cyan)) 80%, var(--blue-deep));
  --fig-node: var(--rf-node-1, var(--blue-deep));
}

.fitfig__ch {
  stroke: var(--fig-ch);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.fitfig__ports circle {
  fill: var(--fig-ch);
}

.fitfig__hair line {
  stroke: color-mix(in srgb, var(--fig-ch) 70%, transparent);
  stroke-width: 2;
}

.fitfig__plates rect {
  fill: var(--rf-plate, var(--paper-card, var(--bg-card)));
  stroke: color-mix(in srgb, var(--fig-node) 42%, var(--line));
  stroke-width: 1.75;
}

.fitfig__lab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-anchor: middle;
}

/* Two classes are needed to outrank core's `main svg text:not([fill])` (0,1,3),
   which would otherwise flatten the amber gate label to the same grey. */
.fitfig .fitfig__lab text,
.fitfig text.fitfig__lab {
  fill: var(--body);
}

.fitfig text.fitfig__lab--human {
  fill: var(--rf-amber, #8A5D05);
}

.fitfig__out {
  stroke: var(--fig-node);
  stroke-width: 3;
  stroke-linecap: round;
}

/* The single amber focal point of this band: the licensed decision. */
.fitfig__gate {
  fill: color-mix(in srgb, var(--amber-bright) 16%, transparent);
  stroke: var(--amber-bright);
  stroke-width: 2.5;
  stroke-dasharray: 4 4;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. BREAKDOWN — where the workflow breaks (light band)
   ─────────────────────────────────────────────────────────────────────────── */

.brk {
  list-style: none;
  margin: var(--s-12) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.brk__row {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  gap: var(--s-6) clamp(1.5rem, 3vw, 3rem);
  padding: var(--s-8) 0;
  border-bottom: 1px solid var(--line);
}

/* Big type carries this band instead of a diagram — the numerals are the
   graphic, so the row reads as a sequence rather than a bullet list. */
.brk__num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--muted);
  transition: color var(--d-2) var(--e-out);
}

.brk__row:hover .brk__num {
  color: var(--accent);
}

.brk__moment {
  min-width: 0;
}

.brk__moment > h3 {
  margin: 0 0 var(--s-2);
  color: var(--ink);
  text-wrap: balance;
}

.brk__cost {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--muted);
}

.brk__fix {
  position: relative;
  min-width: 0;
  margin: 0;
  padding-left: clamp(1rem, 1.6vw, 1.5rem);
  border-left: 2px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--body);
}

.brk__fix-k {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Sits at the end of a body sentence, so it must stay a text link — but it is
   the one tappable thing in this band. inline-flex + min-height gives it a real
   44px target without turning it into a button. */
.brk__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  margin-top: var(--s-1);
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  transition: text-decoration-color var(--d-2) var(--e-out);
}

.brk__link:hover {
  text-decoration-color: currentColor;
}

/* ───────────────────────────────────────────────────────────────────────────
   3. FLOW — the stage rail (tablist) and the record stage (dark band)
   ─────────────────────────────────────────────────────────────────────────── */

.flow {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: var(--s-12);
}

/* Rail -------------------------------------------------------------------- */

.flow__rail {
  position: sticky;
  top: calc(var(--s-20) + var(--s-4));
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}

.flow__rail .rail__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  font: inherit;
  color: var(--body);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition:
    background-color var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out);
}

.flow__rail .rail__step::before,
.flow__rail .rail__step::after {
  content: none;
}

.flow__rail .rail__marker {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: all var(--d-2) var(--e-out);
}

.rail__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.flow__rail .rail__meta {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.flow__rail .rail__title {
  font-size: var(--t-sm);
  line-height: 1.35;
  color: inherit;
}

/* Empty decorative marker: amber = a person owns this stage. */
.rail__human {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--amber-bright) 45%, transparent);
  transition: box-shadow var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out);
}

.flow__rail .rail__step:hover {
  background: var(--bg-card-2);
  color: var(--ink);
}

.flow__rail .rail__step:hover .rail__marker {
  border-color: var(--line-strong);
  color: var(--ink);
}

.flow__rail .rail__step[aria-selected="true"] {
  background: var(--bg-card-3, var(--bg-card-2));
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  color: var(--ink);
}

/* DEFECT FIX: --void on the light-band navy accent read 2.39:1. --bg-card is the
   surface token, so it is white on light bands and dark on dark ones — it always
   inverts correctly against --accent. */
.flow__rail .rail__step[aria-selected="true"] .rail__marker {
  color: var(--bg-card);
  background: var(--accent);
  border-color: transparent;
}

/* DEFECT FIX: core's .panel__bar paints with --d-muted, which resolves to the
   LIGHT-band muted inside a light band — grey text on the dark bar (2.77:1).
   Inside .panel, --muted is already the dark-island value. */
.flow .panel__bar {
  color: var(--muted);
}

.flow__rail .rail__step[aria-selected="true"] .rail__meta {
  color: var(--accent);
}

.flow__rail .rail__step[aria-selected="true"] .rail__human {
  background: var(--amber-bright);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber-bright) 16%, transparent);
}

.flow__legend {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: var(--s-4) 0 0;
  padding: var(--s-4) var(--s-4) var(--s-2);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--muted);
}

.flow__legend-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.4em;
  border-radius: 50%;
  background: var(--amber-bright);
}

/* Stage ------------------------------------------------------------------- */

.flow__stage {
  min-width: 0;
}

.flow__panel-wrap:not([hidden]) {
  display: grid;
  gap: var(--s-6);
  animation: flow-panel-in var(--d-3) var(--e-out) both;
}

.flow__panel-wrap:focus-visible {
  outline-offset: 6px;
}

@keyframes flow-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.flow__record {
  width: 100%;
}

.flow__created {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--muted);
}

.flow__created-k {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Record value states */
.record__val.is-pending {
  color: var(--muted);
}

/* Markers trail the value so every row keeps the same left alignment. */
.record__val.is-new::after,
.record__val.is-flag::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: var(--s-2);
  vertical-align: 0.12em;
  border-radius: 50%;
}

.record__val.is-new {
  color: var(--ink);
}

.record__val.is-new::after {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.record__val.is-flag {
  color: var(--amber);
}

.record__val.is-flag::after {
  background: var(--amber-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber-bright) 16%, transparent);
}

/* Three responsibility columns under the panel */
.flow__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}

.flow__col {
  min-width: 0;
  padding-left: var(--s-4);
  border-left: 2px solid var(--line);
}

.flow__col > .small {
  margin: 0;
  color: var(--body);
}

.flow__k {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.flow__col--sys {
  border-left-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.flow__col--sys .flow__k {
  color: var(--accent);
}

.flow__col--human {
  border-left-color: color-mix(in srgb, var(--amber-bright) 60%, transparent);
}

.flow__col--human .flow__k {
  color: var(--amber);
}

/* The page's single synthetic-data disclosure. Deliberately NOT .synthetic-note:
   amber in this band already means "a person owns this stage" (rail dot, legend,
   badge, human column), so an amber slab here would fight the one signal the band
   exists to teach. A quiet muted line under the record it describes is enough to
   be findable, and reads as a fact about a demonstration rather than a caveat. */
.flow__disclose {
  max-width: 78ch;
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--muted);
}

/* ───────────────────────────────────────────────────────────────────────────
   4. LICENSED BOUNDARY (void band)
   ─────────────────────────────────────────────────────────────────────────── */

.bound {
  position: relative;
}

.bound__head {
  margin-bottom: var(--s-12);
}

.bound__eyebrow {
  justify-content: center;
}

.bound__panel {
  max-width: var(--w-page);
  margin-inline: auto;
  padding: clamp(1.5rem, 3.2vw, 3rem);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
}

.bound__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
}

.bound__side {
  min-width: 0;
}

.bound__side-k {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-title-2);
  line-height: 1.25;
  color: var(--ink);
}

.bound__side-k::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 3px;
}

.bound__side-k--sys::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.bound__side-k--human::before {
  background: var(--amber-bright);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber-bright) 14%, transparent);
}

.bound__side-lead {
  margin: 0 0 var(--s-5);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
}

.bound__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bound__list li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--body);
}

.bound__list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.bound__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
}

.bound__list--sys li::before {
  background: color-mix(in srgb, var(--accent) 70%, transparent);
}

.bound__list--human li::before {
  background: color-mix(in srgb, var(--amber-bright) 70%, transparent);
}

/* The wall */
.bound__wall {
  position: relative;
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg,
    transparent,
    var(--line-strong) 10%,
    var(--line-strong) 90%,
    transparent);
}

.bound__wall-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  writing-mode: vertical-rl;
  padding: var(--s-4) var(--s-1);
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}

/* Crossings */
.bound__cross {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.bound__cross-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin: 0;
  padding: var(--s-5) var(--s-6);
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

.bound__cross-item svg {
  flex: 0 0 auto;
  margin-top: 0.5em;
}

.bound__cross-item strong {
  color: var(--ink);
  font-weight: 600;
}

.bound__cross-item--out {
  border-left: 2px solid color-mix(in srgb, var(--amber-bright) 55%, transparent);
}

.bound__cross-item--back {
  border-left: 2px solid color-mix(in srgb, var(--blue-hi) 55%, transparent);
}

.bound__foot {
  max-width: var(--w-text);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

/* ───────────────────────────────────────────────────────────────────────────
   5. BILINGUAL EXPERIENCE (light band)
   ─────────────────────────────────────────────────────────────────────────── */

.bi {
  align-items: center;
}

.bi__copy {
  min-width: 0;
}

.ins-ticks {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
  display: grid;
  gap: var(--s-3);
}

.ins-ticks li {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

.ins-ticks li::before {
  content: "✓";
  font-size: 0.8em;
  line-height: 1.9;
  color: var(--accent);
}

.bi__fig {
  min-width: 0;
  margin: 0;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}

.bi__fig-cap {
  margin-bottom: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.bi__pair {
  display: grid;
  gap: var(--s-3);
}

.bi__quote {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--body);
}

.bi__quote p {
  margin: 0;
  min-width: 0;
}

.bi__quote--es {
  margin-left: clamp(0.75rem, 3vw, 2rem);
  border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
}

.bi__lang {
  flex: 0 0 auto;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: var(--r-xs);
}

/* Levelled up to the hero figure's vocabulary: same channel colour, same
   geometry contract (channel 2.5, port r4, node r17, rings 32/44, label 10.5
   mono / 1.4 tracking). Cyan is dark-band only, so the channel inks down. */
.bi__fig .bi__join[viewBox] {
  display: block;
  width: 100%;
  max-width: 244px;
  margin: var(--s-5) auto var(--s-2);
  color: var(--accent);
  overflow: visible;
  --fig-ch: color-mix(in srgb, var(--rf-ch-1, var(--cyan)) 80%, var(--blue-deep));
  --fig-node: var(--rf-node-1, var(--blue-deep));
}

.bi__join-ch {
  stroke: var(--fig-ch);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.bi__join-port { fill: var(--fig-ch); }

.bi__join-out {
  stroke: var(--fig-node);
  stroke-width: 3;
  stroke-linecap: round;
}

.bi__join-ring {
  stroke: color-mix(in srgb, var(--fig-node) 42%, transparent);
  stroke-width: 1.75;
}

.bi__join-ring--wide {
  stroke: color-mix(in srgb, var(--fig-node) 24%, transparent);
}

.bi__join-node { fill: var(--fig-node); }

.bi__join-lab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Same specificity boost as the hero figure — see the note there. */
.bi__join text.bi__join-lab {
  fill: var(--muted);
}

.bi__record {
  padding: var(--s-5);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--r-lg);
}

.bi__record-k {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.bi__record-line {
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ───────────────────────────────────────────────────────────────────────────
   6. RECOMMENDED SYSTEMS (dark band)
   ─────────────────────────────────────────────────────────────────────────── */

.sys {
  margin-top: var(--s-12);
}

.sys__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.sys__card > h3 {
  margin: 0;
  text-wrap: balance;
}

.sys__chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.sys__chain > * {
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--muted);
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}

.sys__chain > * + *::before {
  content: "→ ";
  margin-right: 2px;
  color: color-mix(in srgb, var(--accent) 75%, transparent);
}

.sys__result {
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-title-3);
  line-height: 1.4;
  color: var(--ink);
  font-weight: 500;
  text-wrap: balance;
}

.sys__bound {
  margin: auto 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--muted);
}

.sys__bound-k {
  display: block;
  margin-bottom: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--amber);
}

/* ───────────────────────────────────────────────────────────────────────────
   7. FIRST ENGAGEMENT (light band)
   ─────────────────────────────────────────────────────────────────────────── */

.eng {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  list-style: none;
  margin: var(--s-12) 0 0;
  padding: 0;
}

.eng__step {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-strong);
}

.eng__step > .card__index {
  margin: 0;
}

.eng__step > h3 {
  margin: 0;
  text-wrap: balance;
}

.eng__step > .small {
  margin: 0;
  color: var(--body);
}

.eng__commit {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: auto 0 0;
  padding-top: var(--s-4);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--accent);
}

.eng__commit::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-2px);
}

.eng__note {
  max-width: var(--w-text);
  margin: var(--s-10) 0 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--muted);
}

/* 8. SCOPES — the scope-size trio was cut: the engagement band was making two
   arguments (ART-DIRECTION §3, one idea per band). Styles removed with it. */

/* ───────────────────────────────────────────────────────────────────────────
   9. FINAL CTA (void band)
   ─────────────────────────────────────────────────────────────────────────── */

.ins-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.ins-cta .lead {
  margin-inline: auto;
}

/* ───────────────────────────────────────────────────────────────────────────
   10. RESPONSIVE
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .ins-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .ins-hero__copy {
    align-items: flex-start;
  }

  .ins-hero__title {
    font-size: clamp(2rem, 5vw, 3.1rem);
    max-width: none;
  }

  .ins-hero__figure {
    order: 2;
    width: 100%;
  }

  /* This page overrides .grid--aside's columns, so it must also undo them. */
  .ins-fit__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-10);
  }

  .ins-fit__fig {
    max-width: 24rem;
    margin-inline: auto;
  }

  .ins-fit__chips {
    margin-top: var(--s-8);
  }

  /* Stacked, the list already ends in a rule — a second one under it would
     read as a double hairline, not a divider. */
  .ins-fit__note {
    margin-top: var(--s-6);
    padding-top: 0;
    border-top: 0;
  }

  .flow {
    grid-template-columns: minmax(0, 1fr);
  }

  .flow__rail {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
  }

  .flow__legend {
    grid-column: 1 / -1;
    margin-top: var(--s-2);
  }

  .eng {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-10) clamp(1.5rem, 3vw, 2.5rem);
  }
}

@media (max-width: 900px) {
  .brk__row {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: var(--s-4) var(--s-5);
  }

  .brk__fix {
    grid-column: 2;
  }

  .bound__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }

  .bound__wall {
    width: auto;
    height: 1px;
    background: linear-gradient(90deg,
      transparent,
      var(--line-strong) 10%,
      var(--line-strong) 90%,
      transparent);
  }

  .bound__wall-label {
    writing-mode: horizontal-tb;
    transform: translate(-50%, -50%);
    padding: 0 var(--s-4);
  }

  .bound__cross {
    grid-template-columns: minmax(0, 1fr);
  }

  .flow__meta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }
}

@media (max-width: 720px) {
  .ins-hero__title {
    font-size: clamp(1.95rem, 8.4vw, 2.6rem);
    max-width: none;
  }

  .ins-hero__title span {
    display: inline;
  }

  .ins-hero__bound {
    max-width: none;
  }

  .flow__rail {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s-3);
  }

  .brk__row {
    padding: var(--s-6) 0;
  }

  .eng {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }

}

/* Below ~520px the 440-unit viewBox is drawn under 1:1, so 10.5px labels would
   land at ~7px on screen. Scale the type up in viewBox units instead of letting
   the diagram squash (ART-DIRECTION §4: never below ~9px effective). */
@media (max-width: 500px) {
  .recordfig .recordfig__lab,
  .recordfig .recordfig__lab text,
  .recordfig .recordfig__lab--side text,
  .recordfig text.recordfig__lab--human,
  .recordfig .recordfig__id,
  .recordfig .recordfig__key text {
    font-size: 13px;
  }

  .recordfig .recordfig__val text {
    font-size: 14.5px;
  }

  .recordfig .recordfig__pill-t {
    font-size: 12.5px;
  }
}

@media (max-width: 400px) {
  .recordfig .recordfig__lab,
  .recordfig .recordfig__lab text,
  .recordfig .recordfig__lab--side text,
  .recordfig text.recordfig__lab--human,
  .recordfig .recordfig__id,
  .recordfig .recordfig__key text {
    font-size: 15px;
  }

  .recordfig .recordfig__val text {
    font-size: 16.5px;
  }

  .recordfig .recordfig__pill-t {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .brk__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }

  .brk__num {
    font-size: 1.6rem;
    line-height: 1;
  }

  .brk__fix {
    grid-column: 1;
    margin-top: var(--s-1);
  }

  .bound__panel {
    padding: var(--s-5) var(--s-4);
    border-radius: var(--r-xl);
  }

  .bound__cross-item {
    padding: var(--s-4);
  }

  .bi__quote {
    flex-direction: column;
    gap: var(--s-2);
  }

  .bi__quote--es {
    margin-left: var(--s-4);
  }

  .ins-fit__chips {
    grid-template-columns: minmax(0, 1fr);
  }

  .flow__rail .rail__step {
    padding: var(--s-3);
    gap: var(--s-3);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   10b. HOVER / MOTION POLISH
   ─────────────────────────────────────────────────────────────────────────── */

.brk__row {
  transition: background-color var(--d-2) var(--e-out);
}

.brk__row:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.brk__row:hover .brk__fix {
  border-left-color: var(--accent);
}

.eng__step {
  transition: border-top-color var(--d-2) var(--e-out), transform var(--d-2) var(--e-out);
}

.eng__step:hover {
  border-top-color: var(--accent);
  transform: translateY(-3px);
}

.bound__cross-item {
  transition: background-color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}

.bound__cross-item--out { color: var(--amber); }
.bound__cross-item--back { color: var(--accent); }
.bound__cross-item span { color: var(--body); }

.bound__list li {
  transition: color var(--d-2) var(--e-out);
}

.ins-hero__figure .recordfig {
  transition: transform var(--d-4) var(--e-out);
}

/* ───────────────────────────────────────────────────────────────────────────
   11. REDUCED MOTION
   ─────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .eng__step:hover {
    transform: none;
  }

  .recordfig__ring {
    animation: none;
  }

  .flow__panel-wrap:not([hidden]) {
    animation: none;
  }

  .flow__rail .rail__step,
  .flow__rail .rail__marker,
  .rail__human,
  .brk__link {
    transition: none;
  }
}