/* Flow kit v3 (flows/v3/STANDARD.md). The page declares the stages, wires, lane and beats in markup; this file lays them
   out by the figure's own width (container fl) and flow.js moves only transform and opacity. With scripts off or reduced
   motion every rule below is the final frame. Colours come from the page tokens (--fl-*); this file holds no colour. */
/* §3 palette roles: data-hue picks a stage colour; red = the leak, blue = the fix */
.fl [data-hue="gold"]{--h:var(--fl-gold,var(--accent));--h-on:var(--fl-gold-on,var(--paper));--h-ink:var(--fl-gold-ink,var(--ink));--h-tint:var(--fl-gold-tint,var(--paper));--h-line:var(--fl-gold-line,var(--ink));--h-hi:var(--fl-gold-hi,var(--paper))}
.fl [data-hue="violet"]{--h:var(--fl-violet,var(--accent));--h-on:var(--fl-violet-on,var(--paper));--h-ink:var(--fl-violet-ink,var(--ink));--h-tint:var(--fl-violet-tint,var(--paper));--h-line:var(--fl-violet-line,var(--ink));--h-hi:var(--fl-violet-hi,var(--paper))}
.fl [data-hue="red"]{--h:var(--fl-red,var(--contrast));--h-on:var(--fl-red-on,var(--paper));--h-ink:var(--fl-red-ink,var(--ink));--h-tint:var(--fl-red-tint,var(--paper));--h-line:var(--fl-red-line,var(--ink));--h-hi:var(--fl-red-hi,var(--paper))}
.fl [data-hue="blue"]{--h:var(--fl-blue,var(--accent));--h-on:var(--fl-blue-on,var(--paper));--h-ink:var(--fl-blue-ink,var(--ink));--h-tint:var(--fl-blue-tint,var(--paper));--h-line:var(--fl-blue-line,var(--ink));--h-hi:var(--fl-blue-hi,var(--paper))}
.fl [data-hue="teal"]{--h:var(--fl-teal,var(--accent));--h-on:var(--fl-teal-on,var(--paper));--h-ink:var(--fl-teal-ink,var(--ink));--h-tint:var(--fl-teal-tint,var(--paper));--h-line:var(--fl-teal-line,var(--ink));--h-hi:var(--fl-teal-hi,var(--paper))}
.fl [data-hue="cyan"]{--h:var(--fl-cyan,var(--accent));--h-on:var(--fl-cyan-on,var(--paper));--h-ink:var(--fl-cyan-ink,var(--ink));--h-tint:var(--fl-cyan-tint,var(--paper));--h-line:var(--fl-cyan-line,var(--ink));--h-hi:var(--fl-cyan-hi,var(--paper))}
/* §4 frame, phone first: a 44 px rail column and a content column; the wide layout is one row of stages */
.fl[data-flow]{--radius:12px;--size-fl-h:1.625rem;--size-fl-deck:1.125rem;--size-fl-hero:2.75rem;--size-fl-fig:1.5rem;--size-fl-body:1rem;--size-fl-label:.875rem;
container:fl/inline-size;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;row-gap:24px;margin:0;
color:var(--ink);font-family:var(--font-sans);font-size:var(--size-fl-body);line-height:1.5}
.fl .fl-big, .fl .fl-tot dd, .fl .fl-band>span {font-variant-numeric:tabular-nums}
@container fl (min-width:720px){.fl[data-flow]>*{--size-fl-h:2.25rem;--size-fl-deck:1.25rem;--size-fl-hero:3.25rem}}
@container fl (min-width:1180px){.fl[data-flow]>*{--size-fl-h:2.5rem}}
.fl svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fl svg *{vector-effect:non-scaling-stroke}
.fl .fl-i{width:1.25em;height:1.25em}
.fl :where(p,h2,h3,h4,ul,dl,dd){margin:0}
/* §5 caption: the finding is the headline; coloured keywords carry the stage hue */
.fl-cap{grid-column:1/-1;grid-row:1;min-width:0}
.fl-h{font-size:var(--size-fl-h);font-weight:700;line-height:1.15;letter-spacing:-.02em;text-wrap:balance;max-width:34ch}
.fl-k{color:var(--h-ink)}
.fl-deck{margin-top:12px;max-width:60rem;font-size:var(--size-fl-deck);line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.fl-deck .fl-k{font-weight:600}
/* §8 controls, made by flow.js. The dock (QA r3 D-01) shares the stages' grid area (no shift when it is
   inserted) and sticks 16 px above the viewport foot; flow.js steps it up past discs, words and marks. Never hidden.
   A 44 px round dock at every width (QA r4 D-01): narrow, on the rail; wide, in its own lane right of the stages
   (--fl-dock-lane, less any --fl-dock-out it may take of the page's frame padding), off every word, card and chip. */
.fl-play{grid-column:1;grid-row:2;align-self:end;justify-self:center;position:sticky;bottom:16px;z-index:6;display:inline-flex;align-items:center;justify-content:center;gap:8px;
width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-pin);background:var(--ink);color:var(--fl-card,var(--paper));font:inherit;font-size:var(--size-fl-label);font-weight:600;cursor:pointer;outline:3px solid var(--fl-card,var(--paper));box-shadow:var(--shadow-1)}
.fl-play svg{width:20px;height:20px}
.fl-play svg path{fill:none}
.fl-play[data-state="play"] svg path{fill:currentColor}
.fl-sr, .fl-play .fl-w {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fl-seek{display:block;grid-column:1;grid-row:1;align-self:start;justify-self:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-pin);background:none;color:inherit;cursor:pointer}
.fl-seek[aria-current="step"] .fl-disc{outline:2px solid var(--h);outline-offset:3px}
.fl-play:focus-visible, .fl-seek:focus-visible {outline:var(--focus);outline-offset:var(--focus-offset)}
.fl-play:active{scale:.96}.fl-seek:active{transform:scale(.96)}
@media (hover:hover){.fl-play:hover{background:var(--ink-2)}.fl-seek:hover .fl-disc{scale:1.06}}
.fl-seek, .fl-disc {transition:transform var(--dur-press) var(--ease),scale var(--dur-press) var(--ease)}
.fl-play{transition:transform var(--dur-ui) var(--ease),scale var(--dur-press) var(--ease)}.fl-play[data-jump]{transition:scale var(--dur-press) var(--ease)}
/* §6 stages: rail disc, card, exception chip */
.fl-steps{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:subgrid;row-gap:20px;padding:0;list-style:none}
.fl-step{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:12px;position:relative;min-width:0}
.fl-step>.fl-disc, .fl-step>.fl-seek {grid-column:1;grid-row:1;align-self:start;justify-self:center}
/* unlit disc: full-opacity ring (>=3:1); .fl-dfill scales in on its beat (§7) */
.fl-disc{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-pin);background:var(--h-tint);color:var(--h-ink);border:2px solid var(--h-line)}
.fl .fl-disc svg{width:22px;height:22px}
.fl-dfill, .fl-dfill>i {position:absolute;inset:0;display:grid;place-items:center;border-radius:var(--radius-pin);transform-origin:center}
.fl-dfill{inset:-2px;background:var(--h);color:var(--h-on)}
.fl-card{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding-bottom:16px;background:var(--h-tint);border-radius:var(--radius);overflow:hidden}
.fl .fl-card>*{margin-inline:16px}
.fl .fl-card>.fl-band{margin:0}
.fl-band{display:flex;align-items:baseline;gap:8px;margin:0;padding:10px 16px;background:var(--h);color:var(--h-on);font-size:var(--size-fl-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.fl-detail{font-weight:600;line-height:1.4;text-wrap:balance}
.fl-did{color:var(--ink-2);line-height:1.4;text-wrap:balance}
.fl-sub, .fl-unit, .fl-xt, .fl-xd, .fl-lab {text-wrap:balance}
.fl-v{color:var(--h-ink);font-weight:700}
.fl-viz{min-width:0;display:flex;flex-direction:column;gap:8px;font-size:var(--size-fl-label);line-height:1.35;color:var(--ink-2)}
.fl-fig{display:flex;flex-direction:column;gap:2px;padding:12px;background:var(--fl-card,var(--paper));border-radius:var(--radius)}
.fl-big{font-size:var(--size-fl-fig);font-weight:700;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.fl-fig[data-hero] .fl-big{font-size:var(--size-fl-hero);color:var(--h-ink);letter-spacing:-.02em}
.fl-unit{font-size:var(--size-fl-label);font-weight:600;line-height:1.35;color:var(--h-ink)}
.fl-sub{margin-top:6px;padding-top:8px;border-top:1px solid var(--rule);font-size:var(--size-fl-label);line-height:1.35;color:var(--ink-2)}
.fl-sub b{color:var(--ink)}
/* mini visuals: marks only, the words stay in the text */
.fl-pipe{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:6px;row-gap:4px}
.fl-pipe .fl-end{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-pin);background:var(--fl-card,var(--paper));color:var(--h-ink)}
.fl-pipe .fl-end[data-ghost]{background:none;border:2px dashed var(--fl-red-line,var(--ink-3));color:var(--ink-3)}
.fl-pipe .fl-mid{display:flex;align-items:center;gap:4px;color:var(--fl-red,var(--contrast))}
.fl-pipe .fl-mid i{flex:1;height:2px;background:var(--h-line)}
.fl-pipe .fl-mid i+i{background:none;border-top:2px dashed var(--fl-red-line,var(--ink-3))}
.fl-pl{grid-row:2;grid-column:1/span 2}
.fl-pr{grid-row:2;grid-column:2/span 2;text-align:right}
.fl-cmp{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;row-gap:6px}
.fl-cmp>svg{grid-column:2;grid-row:1/span 2;width:100%;height:48px;stroke:none;overflow:visible}
.fl-cmp rect{fill:var(--h-line)}
.fl-cmp rect[data-dim]{fill:var(--ink-3)}
.fl-cmp rect[data-gap]{fill:var(--fl-red-tint,var(--paper));stroke:var(--fl-red-line,var(--ink));stroke-width:2;stroke-dasharray:4 3}
.fl-list{display:flex;flex-direction:column;gap:6px;padding:0;list-style:none}
.fl-list li{display:flex;align-items:flex-start;gap:8px}
.fl-list .fl-i{margin-top:1px;color:var(--h-ink)}
.fl-list [data-v="no"]{color:var(--ink-3)}
.fl-list [data-v="no"] .fl-i{color:var(--ink-3)}
.fl-list [data-v="yes"]{color:var(--ink);font-weight:600}
.fl-note{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;background:var(--h);color:var(--h-on);border-radius:var(--radius);font-weight:600}
/* side exception chips: dashed for the leak, solid where the audit catches it */
.fl-x{grid-column:2;grid-row:2;position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;align-items:start;padding:10px 12px;
background:var(--h-tint);border:2px dashed var(--h-line);border-radius:var(--radius);font-size:var(--size-fl-label);line-height:1.35}
.fl-x[data-solid]{border-style:solid}
.fl-xi{grid-row:1/span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-pin);background:var(--h);color:var(--h-on)}
.fl-xi svg{width:16px;height:16px}
.fl-xt{font-weight:700;color:var(--h-ink)}
.fl-xd{color:var(--ink-2)}
/* §7 wires: source hue, 2 px, open chevron; dots at one speed */
.fl-wire{position:absolute;left:21px;top:52px;bottom:-16px;width:2px;background:var(--h-line);transform-origin:top center}
.fl-wire::after{content:"";position:absolute;left:-4px;bottom:1px;width:8px;height:8px;border-right:2px solid var(--h-line);border-bottom:2px solid var(--h-line);transform:rotate(45deg)}
.fl-dots{position:absolute;inset:0;pointer-events:none}
.fl-dots i{position:absolute;left:-3px;top:-3px;width:8px;height:8px;border-radius:var(--radius-pin);background:var(--h);opacity:0}
.fl-lane, .fl-drop, .fl-out {display:none}
/* §4 wide: six columns; like parts share rows */
@container fl (min-width:1180px){
.fl-play{grid-column:1/-1;justify-self:end;margin-right:calc(0px - var(--fl-dock-out,0px))}
.fl[data-flow]>.fl-steps{margin-right:calc(var(--fl-dock-lane,52px) - var(--fl-dock-out,0px))}
.fl-steps{grid-template-columns:var(--fl-cols,none);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:12px;row-gap:0}
.fl-step{grid-column:auto;grid-row:span 7;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;row-gap:0}
.fl-step>.fl-disc, .fl-step>.fl-seek {grid-column:1;grid-row:1;justify-self:start;margin:0 0 16px 16px}
.fl-card{grid-column:1;grid-row:2/span 5;display:grid;grid-template-rows:subgrid;gap:0;padding-bottom:0}
.fl-card>.fl-band{grid-row:1}.fl-card>.fl-detail{grid-row:2;margin-top:12px}.fl-card>.fl-viz{grid-row:3;margin-top:12px}
.fl-card>.fl-fig{grid-row:4;margin-top:12px}.fl-card>.fl-did{grid-row:5;margin-block:12px 16px}
.fl .fl-x, .fl-lane {grid-column:1;grid-row:7;margin-top:20px;align-self:start}
.fl-card>.fl-viz, .fl-card>.fl-fig {align-self:start}
.fl-lane{display:block;position:relative;height:52px}
.fl-wire{left:66px;right:-22px;top:21px;bottom:auto;width:auto;height:2px;transform-origin:left center}
.fl-wire::after{left:auto;right:1px;bottom:-3px;border-bottom:0;border-top:2px solid var(--h-line)}
.fl-drop, .fl-out {display:block;position:absolute}
.fl-drop{left:36px;top:-22px;width:0;height:20px;border-left:2px dashed var(--h-line)}
.fl-out{left:100%;top:18px;width:14px;height:0;border-top:2px dashed var(--h-line)}
.fl-x[data-solid] .fl-out{border-top-style:solid}
.fl-run{position:absolute;left:0;right:-12px;top:20px;height:0;border-top:2px dashed var(--h-line)}
.fl-run::after{content:"";position:absolute;right:1px;top:-6px;width:8px;height:8px;border-top:2px solid var(--h-line);border-right:2px solid var(--h-line);transform:rotate(45deg)}
.fl-run .fl-dots i{top:-5px}
.fl-lab{position:absolute;left:0;right:0;top:28px;text-align:center;font-size:var(--size-fl-label);font-weight:600;color:var(--h-ink)}
.fl-ret{position:absolute;left:0;width:38px;top:-22px;height:44px;border-right:2px solid var(--h-line);border-bottom:2px solid var(--h-line);border-bottom-right-radius:var(--radius)}
.fl-ret::after{content:"";position:absolute;right:-5px;top:-1px;width:8px;height:8px;border-top:2px solid var(--h-line);border-left:2px solid var(--h-line);transform:rotate(45deg)}
.fl-fix{position:absolute;left:-1px;right:0;top:-3px;height:4px;background:var(--h);border-radius:var(--radius-pin);transform-origin:left center}
.fl-drop .fl-fix{left:-3px;right:auto;top:0;bottom:0;width:4px;height:auto;transform-origin:top center}
}
/* §10 takeaway: the one dark block; lesson, before and after, totals at the end, one source line */
.fl-take{grid-column:1/-1;display:grid;gap:24px;padding:24px 20px;background:var(--fl-slab,var(--ink));color:var(--fl-slab-ink,var(--paper));border-radius:var(--radius)}
.fl-take [data-hue]{--h-ink:var(--h-hi)}
.fl-eye{font-size:var(--size-fl-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fl-slab-ink-2,var(--paper))}
.fl-lh{margin-top:6px;font-size:var(--size-fl-fig);font-weight:700;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.fl-ba{display:grid;gap:12px;margin-top:16px}
.fl-ba>div{display:grid;grid-template-columns:auto 88px minmax(0,1fr);align-items:center;column-gap:12px;font-size:var(--size-fl-label);line-height:1.35;color:var(--fl-slab-ink-2,var(--paper))}
.fl-tag{justify-self:start;padding:2px 10px;border-radius:var(--radius);background:var(--h);color:var(--h-on);font-weight:700}
.fl-ba svg{width:88px;height:16px;color:var(--h-ink)}
.fl-tot{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:16px}
.fl-tot>div{padding-top:10px;border-top:3px solid var(--h-ink)}
.fl-tot dd{font-size:var(--size-fl-fig);font-weight:700;line-height:1.1;color:var(--fl-slab-ink,var(--paper))}
.fl-tot dd small{font-size:var(--size-fl-label);font-weight:600;color:var(--fl-slab-ink-2,var(--paper))}
.fl-tot dt{order:2;margin-top:4px;font-size:var(--size-fl-label);color:var(--fl-slab-ink-2,var(--paper))}
.fl-tot>div{display:flex;flex-direction:column}
.fl-fine{grid-column:1/-1;font-size:var(--size-fl-label);color:var(--fl-slab-ink-2,var(--paper))}
.fl-src{grid-column:1/-1;font-size:var(--size-fl-label);color:var(--ink-3)}
@container fl (max-width:719px){.fl .fl-pipe{display:none}.fl-card{gap:8px;padding-bottom:12px}.fl-fig{padding:10px 12px}.fl-steps{row-gap:12px}.fl-wire{bottom:-8px}.fl-take{gap:16px;padding:20px 16px}
.fl-ba>div{grid-template-columns:auto 88px;justify-content:start;row-gap:6px}.fl-ba p{grid-column:1/-1}
.fl-tot{gap:12px}.fl-tot>div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:12px}}
@container fl (min-width:720px){.fl-take{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:40px;padding:28px 32px}.fl-tot{align-self:end}}
/* §11 forced colours: marks keep their meaning through shape (dashed, solid, chevron) */
@media (forced-colors:active){.fl-disc, .fl-dfill, .fl-xi, .fl-tag, .fl-note, .fl-band, .fl-fix, .fl-dots i {forced-color-adjust:none}.fl-card, .fl-x, .fl-fig, .fl-take {border:1px solid}}
/* §12 reduced motion: the still is the final frame and there is no control */
@media (prefers-reduced-motion:reduce){.fl-play, .fl-dots {display:none}.fl-seek:active, .fl .fl-seek .fl-disc {transform:none;scale:none}}
/* §7 focal step (FM-01): the beat's card lifts, 3 px hue ring */
.fl-step>.fl-card{transition:transform var(--dur-step) var(--ease)}.fl[data-motion] .fl-step[data-now]>.fl-card{transform:translateY(-6px);outline:3px solid var(--h);box-shadow:var(--shadow-1)}

/* flow:claims (page styles, scoped by freeze.cjs) */
/* Inter (variable, latin subset) by Rasmus Andersson, SIL Open Font License 1.1. Same file the live site serves. */


/* Page tokens (flows/v3/STANDARD.md §3). Site names first, then the flow palette the kit reads. */
[data-flow="claims"] { --paper: #f4f5f7; --ink: #14171c; --ink-2: #3f444d; --ink-3: #5f6570; --rule: #d3d6dc; --accent: #1d4f9e; --contrast: #9c4a1a; --focus: 3px solid var(--accent); --focus-offset: 3px; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 0; --radius-pin: 50%; --shadow-1: 0 1px 2px rgb(20 23 28 / 0.08), 0 8px 24px rgb(20 23 28 / 0.08); --dur-press: 100ms; --dur-ui: 200ms; --dur-bar: 360ms; --dur-step: 600ms; --dur-map: 840ms; --flow-cycle: 3200ms; --hold-min: 1200ms; --ease: cubic-bezier(0.2, 0, 0, 1); --fl-cols: minmax(0,1fr) minmax(0,1.11fr) minmax(0,1.48fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr); --fl-card: #ffffff; --fl-slab: #1b2230; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c0c5cd; --fl-gold: #b97c22; --fl-gold-on: #14171c; --fl-gold-ink: #7f5600; --fl-gold-tint: #fbf6ee; --fl-gold-line: #a8781f; --fl-gold-hi: #e2b955; --fl-violet: #8d43d6; --fl-violet-on: #ffffff; --fl-violet-ink: #7b34c4; --fl-violet-tint: #f4ecfb; --fl-violet-line: #8d43d6; --fl-violet-hi: #c3a6f2; --fl-red: #a3281e; --fl-red-on: #ffffff; --fl-red-ink: #a3281e; --fl-red-tint: #fbecea; --fl-red-line: #b3261e; --fl-red-hi: #f19a8f; --fl-blue: #1d4f9e; --fl-blue-on: #ffffff; --fl-blue-ink: #1d4f9e; --fl-blue-tint: #e8edf5; --fl-blue-line: #1d4f9e; --fl-blue-hi: #8db4f2; --fl-teal: #0b8452; --fl-teal-on: #ffffff; --fl-teal-ink: #0a6e45; --fl-teal-tint: #e6f3ec; --fl-teal-line: #0b8452; --fl-teal-hi: #7cc4b9; --fl-berry: #a3287f; --fl-berry-on: #ffffff; --fl-berry-ink: #8f1f6e; --fl-berry-tint: #f9ecf5; --fl-berry-line: #a3287f; --fl-berry-hi: #eea6d4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-flow="claims"] { --paper: #111318; --ink: #e9ebef; --ink-2: #c0c5cd; --ink-3: #969ca7; --rule: #30343b; --accent: #8db4f2; --contrast: #e0955f; --shadow-1: 0 0 0 1px var(--rule), 0 8px 24px rgb(0 0 0 / 0.6); --fl-card: #1a1d23; --fl-slab: #262d3a; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c8ccd4; --fl-gold: #b28b21; --fl-gold-on: #111318; --fl-gold-ink: #e2b955; --fl-gold-tint: #2a2618; --fl-gold-line: #b28b21; --fl-gold-hi: #e2b955; --fl-violet: #8c5ac4; --fl-violet-on: #ffffff; --fl-violet-ink: #c3a6f2; --fl-violet-tint: #241f30; --fl-violet-line: #9468cc; --fl-violet-hi: #c3a6f2; --fl-red: #c43d30; --fl-red-on: #ffffff; --fl-red-ink: #f19a8f; --fl-red-tint: #2c1c1c; --fl-red-line: #d0473a; --fl-red-hi: #f19a8f; --fl-blue: #4194f6; --fl-blue-on: #111318; --fl-blue-ink: #8db4f2; --fl-blue-tint: #1b2638; --fl-blue-line: #4194f6; --fl-blue-hi: #8db4f2; --fl-teal: #108068; --fl-teal-on: #ffffff; --fl-teal-ink: #7cc4b9; --fl-teal-tint: #16282a; --fl-teal-line: #10806c; --fl-teal-hi: #7cc4b9; --fl-berry: #e07ab8; --fl-berry-on: #111318; --fl-berry-ink: #eea6d4; --fl-berry-tint: #2c1b28; --fl-berry-line: #e07ab8; --fl-berry-hi: #eea6d4; }
}
:root[data-theme="dark"] [data-flow="claims"] { --paper: #111318; --ink: #e9ebef; --ink-2: #c0c5cd; --ink-3: #969ca7; --rule: #30343b; --accent: #8db4f2; --contrast: #e0955f; --shadow-1: 0 0 0 1px var(--rule), 0 8px 24px rgb(0 0 0 / 0.6); --fl-card: #1a1d23; --fl-slab: #262d3a; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c8ccd4; --fl-gold: #b28b21; --fl-gold-on: #111318; --fl-gold-ink: #e2b955; --fl-gold-tint: #2a2618; --fl-gold-line: #b28b21; --fl-gold-hi: #e2b955; --fl-violet: #8c5ac4; --fl-violet-on: #ffffff; --fl-violet-ink: #c3a6f2; --fl-violet-tint: #241f30; --fl-violet-line: #9468cc; --fl-violet-hi: #c3a6f2; --fl-red: #c43d30; --fl-red-on: #ffffff; --fl-red-ink: #f19a8f; --fl-red-tint: #2c1c1c; --fl-red-line: #d0473a; --fl-red-hi: #f19a8f; --fl-blue: #4194f6; --fl-blue-on: #111318; --fl-blue-ink: #8db4f2; --fl-blue-tint: #1b2638; --fl-blue-line: #4194f6; --fl-blue-hi: #8db4f2; --fl-teal: #108068; --fl-teal-on: #ffffff; --fl-teal-ink: #7cc4b9; --fl-teal-tint: #16282a; --fl-teal-line: #10806c; --fl-teal-hi: #7cc4b9; --fl-berry: #e07ab8; --fl-berry-on: #111318; --fl-berry-ink: #eea6d4; --fl-berry-tint: #2c1b28; --fl-berry-line: #e07ab8; --fl-berry-hi: #eea6d4; }
*:is([data-flow="claims"],[data-flow="claims"] *), *:is([data-flow="claims"],[data-flow="claims"] *)::before, *:is([data-flow="claims"],[data-flow="claims"] *)::after { box-sizing: border-box; }


.page:is([data-flow="claims"],[data-flow="claims"] *) { max-width: 1440px; margin: 0 auto; padding: 16px; }
.frame:is([data-flow="claims"],[data-flow="claims"] *) { background: var(--fl-card); border-radius: 20px; padding: 28px; }
/* r4 D-01: the wide dock lane reaches 20 px into the frame's 28 px padding, 8 px in from its edge */
@media (min-width: 1180px) { .fl[data-flow]:is([data-flow="claims"],[data-flow="claims"] *) { --fl-dock-out: 20px; } }
@media (min-width: 1180px) and (max-width: 1339px) { .fl[data-flow]:is([data-flow="claims"],[data-flow="claims"] *) { --fl-dock-out: 12px; } }
.eyebrow:is([data-flow="claims"],[data-flow="claims"] *) { margin: 0 0 12px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 1180px) and (max-width: 1339px) { .page:is([data-flow="claims"],[data-flow="claims"] *) { padding: 12px; } .frame:is([data-flow="claims"],[data-flow="claims"] *) { padding: 24px 20px; } }
@media (max-width: 719px) { .page:is([data-flow="claims"],[data-flow="claims"] *) { padding: 0; } .frame:is([data-flow="claims"],[data-flow="claims"] *) { border-radius: 0; padding: 20px 16px 20px; } }
/* Font gate: the page stays hidden for the few ms the embedded Inter takes to decode, so the swap never shifts layout
   (cold-load CLS 0). Only set by the inline script below; no script, no gate. A 1.5 s fail-safe lifts it anyway. */
.fl-hold:is([data-flow="claims"],[data-flow="claims"] *) body { visibility: hidden; }

/* Page-local overrides of the kit (claims only; each one is logged in KIT-REQUESTS.md). */
/* 06 Owned has its own hue (berry), so no two stages share a band colour: blue stays the owner's decision (04) and the fix */
.fl:is([data-flow="claims"],[data-flow="claims"] *) [data-hue="berry"] { --h: var(--fl-berry); --h-on: var(--fl-berry-on); --h-ink: var(--fl-berry-ink); --h-tint: var(--fl-berry-tint); --h-line: var(--fl-berry-line); --h-hi: var(--fl-berry-hi); }
/* Numerals: the kit sets tabular figures on .fl-big, .fl-tot dd and band numbers; claims adds its stat rows and figure tiles */
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-stats, .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fig, .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-call { font-variant-numeric: tabular-nums; }

/* Unlit state: no word is ever translucent. A card's statement and "I ..." line are at full ink from the first frame on a
   faint tint (the wash wakes 0.3 -> 1); the meter and bars draw (scaleX). The figure tile is revealed on its beat in step with
   the travelling line: its ground fades in (.fl-fbg, opacity) while its words rise into place inside their own clip. */
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-card { position: relative; isolation: isolate; background: var(--fl-card); }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-card > .fl-wash, .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-card > .fl-meter { position: absolute; margin: 0; pointer-events: none; }
.fl-wash:is([data-flow="claims"],[data-flow="claims"] *) { inset: 0; z-index: -1; background: var(--h-tint); }
.fl-meter:is([data-flow="claims"],[data-flow="claims"] *) { left: 0; right: 0; bottom: 0; height: 4px; background: var(--h); transform-origin: left center; }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fig { position: relative; isolation: isolate; background: none; }
.fl-fbg:is([data-flow="claims"],[data-flow="claims"] *) { position: absolute; inset: 0; z-index: -1; border-radius: var(--radius); background: var(--fl-card); pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h-line) 30%, transparent); transform-origin: bottom center; }
/* D-10: the tile ground unfolds upward (scaleY, full ink) on the same clock as its words rising, never a half-faded empty frame.
   The tile itself is the words' clip, so they rise in from its bottom edge and always sit inside the unfolding ground. */
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fig { overflow: clip; }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fig > .fl-fw { overflow: visible; }
.fl-fw:is([data-flow="claims"],[data-flow="claims"] *) { display: block; overflow: clip; overflow-clip-margin: 4px; }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fw > .fl-rv { display: flex; flex-direction: column; gap: 2px; }
/* final r2 D-07: no blank tile slot before its beat (wide). The page script lays an unlit copy of each tile's words under its
   ground (aria-hidden, no data-fx): the card's own ground with the words in ink-3 and the icons held back, so cards 01-06
   read complete from frame 0. On the beat the lit ground unfolds over it and the coloured words rise with it, so the copy is
   covered line by line and is fully hidden once the ground is up. No colour or opacity animates; words stay opaque. */
.fl-unlit:is([data-flow="claims"],[data-flow="claims"] *) { display: none; }
@container fl (min-width: 1180px) {
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fig > .fl-unlit { position: absolute; inset: 0; z-index: -2; display: flex; flex-direction: column; justify-content: center;
    padding: inherit; border-radius: var(--radius); background: color-mix(in srgb, var(--fl-card) 60%, transparent); pointer-events: none; user-select: none; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fig > .fl-unlit > span { display: flex; flex-direction: column; gap: 2px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fig > .fl-unlit, .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fig > .fl-unlit *, .fl:is([data-flow="claims"],[data-flow="claims"] *) [data-hero] > .fl-unlit .fl-big { color: var(--ink-3); }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fig > .fl-unlit .fl-cad { visibility: hidden; }
}
/* narrow (stages start as they scroll in): tiles are static, so a stage not yet reached never shows an empty slot */
@container fl (max-width: 1179px) {
  .fl-fbg:is([data-flow="claims"],[data-flow="claims"] *) { display: none; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fig { background: var(--fl-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h-line) 30%, transparent); }
}
/* phone from a 340 px container: the cadence row or owner badge sits beside the big words, not on a row of its own */
@container fl (min-width: 340px) and (max-width: 719px) {
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fw > .fl-rv { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 8px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fw > .fl-rv > .fl-big { order: 1; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fw > .fl-rv > .fl-cad { order: 2; height: 26px; margin: 0; gap: 6px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fw .fl-cad svg { width: 16px; height: 16px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fw .fl-tk { gap: 2px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fw .fl-tk i { width: 8px; height: 8px; border-radius: 2px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fw .fl-cad[data-wk] .fl-tk i { width: 14px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fw .fl-own { width: 24px; height: 24px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fw .fl-own svg { width: 14px; height: 14px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fig { padding-block: 8px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fw > .fl-rv > .fl-unit, .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fw > .fl-rv > .fl-sub { order: 3; flex-basis: 100%; }
}

/* 04-06 tiles are not three identical boxes: a cadence row (seven days, four weeks) and an owner badge lead each one, so the
   03 figure stays the only hero number */
.fl-cad:is([data-flow="claims"],[data-flow="claims"] *) { display: flex; align-items: center; gap: 8px; height: 28px; margin-bottom: 6px; color: var(--h-ink); }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-cad svg { width: 18px; height: 18px; }
.fl-tk:is([data-flow="claims"],[data-flow="claims"] *) { display: flex; gap: 3px; }
.fl-tk:is([data-flow="claims"],[data-flow="claims"] *) i { width: 10px; height: 10px; border-radius: 3px; background: var(--h); }
.fl-cad[data-wk]:is([data-flow="claims"],[data-flow="claims"] *) .fl-tk i { width: 22px; }
.fl-own:is([data-flow="claims"],[data-flow="claims"] *) { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pin); background: var(--h); color: var(--h-on); }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-own svg { width: 16px; height: 16px; }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-cmp svg { transform-origin: left center; }
/* jarvis-020 smooth: the words that ride a chip, lane label or tile ground move on their own layer from the first frame (wide
   only, where they move), so the first frame of each slide does not stall on a layer promotion */
@container fl (min-width: 1180px) { .fl:is([data-flow="claims"],[data-flow="claims"] *) :is(.fl-x, .fl-lab, .fl-fw) .fl-rv { will-change: transform, opacity; } }

/* Discs (F-17): the unlit disc is a full-opacity ring (2 px --h border, --h-tint ground, --h-ink icon, each >= 3:1); on its
   beat the solid --h disc with its --h-on icon pops over it by scale 0 -> 1 (outer layer scaleX, inner scaleY). */
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-disc { border-color: var(--h); } /* kit ring disc and .fl-dfill; claims rings in the solid hue */

/* Chips (one style): a tinted fill with a 4 px left edge in its role colour (red = the leak, green = the catch), no outline.
   Wide: before its beat a chip paints nothing (no slot, no outline); on its beat the ground fades in (opacity on .fl-xbg) while
   the icon and words appear whole at 40% of it (one step, never translucent) and settle 6 px, in a box already at its final
   height (r3 D-07: no line ever slides through a mask past another), so nothing is squashed or cut. Its space is reserved, so the layout never shifts. Narrow: chips are static and sit with their stage. */
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-x { isolation: isolate; background: none; border-color: transparent; }
.fl-xbg:is([data-flow="claims"],[data-flow="claims"] *) { position: absolute; inset: -2px; z-index: -1; background: var(--h-tint); border-left: 4px solid var(--h-line); border-radius: var(--radius); pointer-events: none; }
@container fl (max-width: 1179px) {
  .fl-xbg:is([data-flow="claims"],[data-flow="claims"] *) { display: none; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-x { background: var(--h-tint); border: 0; border-left: 4px solid var(--h-line); padding: 10px 12px; }
}
.fl-xw:is([data-flow="claims"],[data-flow="claims"] *) { grid-row: 1 / span 2; }
.fl-xw:is([data-flow="claims"],[data-flow="claims"] *), .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-xt, .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-xd, .fl-lab:is([data-flow="claims"],[data-flow="claims"] *) { overflow: clip; overflow-clip-margin: 4px; }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-x :is(.fl-xw, .fl-xt, .fl-xd) { overflow: visible; }
.fl-rv:is([data-flow="claims"],[data-flow="claims"] *) { display: block; }
.fl-cue:is([data-flow="claims"],[data-flow="claims"] *) { position: absolute; top: 0; left: 0; width: 0; height: 0; }

/* tile + "I ..." line travel together: no tile is stretched and no empty band opens between them (spare room falls to
   the card's foot, on its tint) */
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-foot { display: flex; flex-direction: column; gap: 12px; }
@container fl (max-width: 719px) { .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-foot { gap: 8px; } }
/* wide: the tile and the "I ..." line take the kit's own subgrid rows again (4 and 5), so every "I ..." line starts on one
   line across the six cards and no card ends on an empty band. The hero tile (03) spans the visual and tile rows and rests
   on the tile row's foot, so its extra height never pads the other five cards (claims-3: 64-83 px bottoms). */
@container fl (min-width: 1180px) {
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-card > .fl-foot { display: contents; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-card > * { grid-column: 1; }
  /* the five tiles share row 4 at one height (content centred), so no tile leaves a band above its "I ..." line */
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-foot > .fl-fig { grid-column: 1; grid-row: 4; align-self: stretch; justify-content: center; margin: 12px 16px 0; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-foot > .fl-did { grid-column: 1; grid-row: 5; align-self: start; margin: 12px 16px 16px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) [data-step="3"] .fl-foot > .fl-fig { grid-row: 3 / span 2; align-self: end; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) [data-step="3"] .fl-card > .fl-viz { align-self: start; margin-top: 24px; }
  /* a compact cadence row, so tiles 04-06 do not stretch the shared tile row */
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-cad { height: 20px; margin-bottom: 4px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-cad svg { width: 16px; height: 16px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-own { width: 24px; height: 24px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-own svg { width: 14px; height: 14px; }
  /* stage 02 sets the visual row's height: a compact bar block keeps the spare room above and below the other visuals small */
  .fl:is([data-flow="claims"],[data-flow="claims"] *) [data-step="2"] .fl-viz { gap: 6px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) [data-step="2"] .fl-cmp { row-gap: 4px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) [data-step="2"] .fl-gapnote { line-height: 1.25; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-list { row-gap: 8px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-pipe { row-gap: 8px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-neq { width: 24px; height: 24px; }
}

/* §5 orphans: balance the short labels */
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-gapnote { text-wrap: balance; }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-did .fl-v, .fl-pls:is([data-flow="claims"],[data-flow="claims"] *) > span { white-space: nowrap; }

/* 01 pipe labels: one row, each half its own box, so they never run together */
.fl-pls:is([data-flow="claims"],[data-flow="claims"] *) { grid-row: 2; grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; }
.fl-pls:is([data-flow="claims"],[data-flow="claims"] *) > span + span { text-align: right; }

/* Comparison bars (02, 03). A full-ink 2 px track sits under each bar from frame 0, so a label never stands beside blank
   space; the fills draw over it (scaleX). 03 is drawn to scale from the published figures: a red sliver of 300,000 in
   20 million at the end of Processed. 02 states no ratio (final r2 D-11: STANDARD §2 allows no ratio without a waiver): both
   bars run the full length, a dashed red frame marks the end of Accounted for without shortening it, and a visible
   "Not to scale" tag sits under the labels (claims-3 D-02 option b). */
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-cmp svg { height: 40px; }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-cmp svg.fl-trk { transform: none; }
.fl-trk:is([data-flow="claims"],[data-flow="claims"] *) path { stroke: var(--h-line); stroke-width: 2; stroke-linecap: butt; }
.fl-trk:is([data-flow="claims"],[data-flow="claims"] *) path[data-dim] { stroke: var(--ink-3); }

/* 02: the dashed red frame sits over the end of Accounted for (a see-through red wash, so the bar is not shortened); the "not equal" badge
   hangs under it at the bar's end (the same grammar as the 03 callout under its sliver), never over it, and pops in only
   once the bars have drawn. The "Not to scale" tag shares the badge's row, under the labels. */
.fl:is([data-flow="claims"],[data-flow="claims"] *) [data-step="2"] .fl-cmp rect[data-gap] { fill: color-mix(in srgb, var(--fl-red) 40%, transparent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fl-scale:is([data-flow="claims"],[data-flow="claims"] *) { grid-column: 1 / -1; grid-row: 3; justify-self: start; align-self: center; font-size: var(--size-fl-label); line-height: 1.25; font-weight: 600; color: var(--ink-3); }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-cmp > span:nth-child(1) { grid-column: 1; grid-row: 1; }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-cmp > span:nth-child(2) { grid-column: 1; grid-row: 2; }
.fl-neq:is([data-flow="claims"],[data-flow="claims"] *) { grid-column: 2; grid-row: 3; justify-self: end; align-self: center; margin-right: 0; position: relative; display: grid; width: 26px; height: 26px;
  border-radius: var(--radius-pin); background: var(--fl-red); color: var(--fl-red-on); transform-origin: center; }
.fl-neq:is([data-flow="claims"],[data-flow="claims"] *) > i { display: grid; place-items: center; border-radius: var(--radius-pin); transform-origin: center; }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-cmp .fl-neq svg { width: 16px; height: 16px; stroke: currentColor; }
.fl-gapnote:is([data-flow="claims"],[data-flow="claims"] *) { color: var(--fl-red-ink); font-weight: 600; }

/* 03: Processed runs to 98.5 of Received; the missing 300,000 are a red sliver at its end, marked by a taller red tick so a
   gap that small still reads, and the callout arrow points straight up at it */
.fl-cmp:is([data-flow="claims"],[data-flow="claims"] *) rect[data-miss] { fill: var(--fl-red-line); stroke: var(--fl-red-line); stroke-width: 1.5; }
.fl-call:is([data-flow="claims"],[data-flow="claims"] *) { grid-column: 2; grid-row: 3; white-space: nowrap; display: flex; justify-content: flex-end; align-items: center; gap: 2px; margin-top: -2px; margin-right: -7px; color: var(--fl-red-ink); font-weight: 700; }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-cmp .fl-call svg { width: 16px; height: 16px; stroke: currentColor; }

/* 03 scale figures as figures (24 px, tabular) */
.fl-stats:is([data-flow="claims"],[data-flow="claims"] *) { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 4px; }
.fl-stats:is([data-flow="claims"],[data-flow="claims"] *) > span { display: flex; flex-direction: column; font-size: var(--size-fl-label); font-weight: 600; line-height: 1.35; color: var(--h-ink); }

/* closing beat 7: the leak chips stay red (they name the problem); a separate blue "sealed" check lands on each one as the
   lane under it turns blue, and blue beads travel the sealed lane into the catch */
.fl-seal:is([data-flow="claims"],[data-flow="claims"] *) { position: absolute; top: -12px; right: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pin);
  background: var(--h); color: var(--h-on); box-shadow: 0 0 0 2px var(--fl-card); pointer-events: none; }
.fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-seal svg { width: 14px; height: 14px; stroke-width: 2.5; }
.fl-fix:is([data-flow="claims"],[data-flow="claims"] *) .fl-dots i { top: -3px; width: 10px; height: 10px; left: -5px; background: var(--fl-card); border: 2px solid var(--h); }

/* the control is the kit dock (QA r4 D-01): at every width it rides the stages sticky in thumb reach and steps up past a
   seek disc, a word or a mark, never hidden. Its word stays in the accessible name (QA-008). */

@container fl (min-width: 1180px) {
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-step > .fl-seek { margin-bottom: 16px; }
  /* fix strokes: a straight 4 px bar with 2 px corners (the kit's 50% radius made lens shapes) */
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-fix { border-radius: 2px; z-index: 1; } /* paints above the run's red ::after chevron */
  .fl-out:is([data-flow="claims"],[data-flow="claims"] *) { left: calc(100% + 2px); width: 12px; transform-origin: left center; }
  /* the stub's fix and the lane's fix overlap with square ends, so the sealed line is one even 4 px weight (no pinch) */
  .fl-out:is([data-flow="claims"],[data-flow="claims"] *) .fl-fix { right: -6px; border-radius: 0; }
  .fl-run:is([data-flow="claims"],[data-flow="claims"] *) .fl-fix { left: -4px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
  /* every drop lands on its chip's icon centre (12 px inset + 14 px = 26 px), not 11 px to its right */
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-drop { left: 25px; transform-origin: top center; }
  /* the catch drop is solid and 4 px, the same weight as the sealed blue paths beside it */
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-drop[data-solid] { left: 24px; border-left: 4px solid var(--h); border-radius: 2px; }
  /* sealed arrowhead: a solid blue head, larger than the red open chevron and centred on the same tip, so no red fringe shows */
  .fl-run:is([data-flow="claims"],[data-flow="claims"] *) .fl-fix::after { content: ""; position: absolute; right: -3.5px; top: -9.5px; width: 14px; height: 22px; background: var(--h); clip-path: polygon(0 0, 100% 50%, 0 100%); }
  /* no lane track is painted before its beat: each run draws only once the chip it leads into has appeared.
     The run into the catch stops with its arrow tip 3 px before the chip's left edge. */
  .fl:is([data-flow="claims"],[data-flow="claims"] *) [data-step="4"] .fl-run { right: -7px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-card > .fl-viz { align-self: center; } /* spare room in the visual row splits evenly above and below */
  .fl:is([data-flow="claims"],[data-flow="claims"] *) [data-hero] .fl-big { font-size: min(var(--size-fl-hero), 4cqi); }
  .fl-pipe:is([data-flow="claims"],[data-flow="claims"] *) .fl-end { width: 44px; height: 44px; }
  .fl-pipe:is([data-flow="claims"],[data-flow="claims"] *) .fl-end svg { width: 22px; height: 22px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-list li { gap: 6px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-list .fl-i { width: 18px; height: 18px; margin-top: 1px; }
}
/* a 1280 window (container 1180-1299): body stays 16 px; the room comes from narrower insets, a lighter list icon and a
   less dominant stage 03 column */
@container fl (min-width: 1180px) and (max-width: 1299px) {
  /* a less dominant stage 03 column and an 8 px gap; stage 02 takes more of the row than 06 now the dock has its own lane
     (r4 D-01), so its note wraps to two lines and the shared visual row stays short */
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-steps { --fl-cols: minmax(0,1fr) minmax(0,1.18fr) minmax(0,1.46fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.08fr); column-gap: 8px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) [data-step="3"] .fl-card > .fl-viz { margin-top: 30px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-card > * { margin-inline: 8px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-card > .fl-band { padding-inline: 8px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-list li { gap: 4px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-list .fl-i { width: 16px; height: 16px; margin-top: 2px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-step > .fl-seek { margin-left: 8px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-wire { right: -10px; } /* the disc-row arrow stops 6 px before the next disc, as at 1440 */
  .fl:is([data-flow="claims"],[data-flow="claims"] *) [data-hero] .fl-big { font-size: min(var(--size-fl-hero), 3.7cqi); }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-x { padding-inline: 10px 8px; column-gap: 8px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-foot > .fl-fig, .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-foot > .fl-did { margin-inline: 8px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-did { text-wrap: balance; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-drop { left: 23px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-drop[data-solid] { left: 22px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) [data-step="4"] .fl-run { right: -3px; } /* 8 px column gap */
}

/* tablet and small laptop (720-1179 container, claims-3): the card is three inner columns, not one stretched row. The words
   (detail over the "I ..." line) sit left, the visual in the middle (pipe capped near 320 px), the tile right. The lane
   chip keeps a readable measure instead of running the full width. */
@container fl (min-width: 720px) and (max-width: 1179px) {
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.95fr); grid-template-rows: auto auto 1fr;
    column-gap: 24px; row-gap: 0; padding-bottom: 16px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-card > .fl-band { grid-column: 1 / -1; grid-row: 1; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-card > .fl-foot { display: contents; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-card > .fl-detail { grid-column: 1; grid-row: 2; margin: 14px 0 0 16px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-card > .fl-viz { grid-column: 2; grid-row: 2 / span 2; margin: 14px 0 0; align-self: start; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-card > .fl-pipe { max-width: 320px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-foot > .fl-fig { grid-column: 3; grid-row: 2 / span 2; margin: 14px 16px 0 0; align-self: start; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-foot > .fl-did { grid-column: 1; grid-row: 3; margin: 10px 0 0 16px; align-self: start; text-wrap: pretty; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) [data-hero] .fl-big { font-size: min(var(--size-fl-hero), 5.2cqi); }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-x { max-width: 34rem; }
}
/* takeaway: 2 columns from a 640 px container; figure over label below 1180 */
@container fl (min-width: 640px) {
  .fl-take:is([data-flow="claims"],[data-flow="claims"] *) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 32px; padding: 28px 32px; }
  .fl-tot:is([data-flow="claims"],[data-flow="claims"] *) { align-self: end; }
}
@container fl (min-width: 640px) and (max-width: 1179px) {
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-tot > div { display: flex; flex-direction: column; }
}
/* 640-719: the totals stack in the right column; 720-1179: one column, the three totals in three equal columns (never 2 + 1) */
@container fl (min-width: 640px) and (max-width: 719px) {
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-tot { grid-template-columns: minmax(0, 1fr); }
}
@container fl (min-width: 720px) and (max-width: 1179px) {
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-take { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-tot { align-self: start; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* phone (<720): the page stays under 3000 px at 375; lower bars. The "300,000 missing" call stays (lane 83, QA: every word
   reads in reduced motion too), paid for by a 2 px tighter card gap and takeaway padding */
@container fl (max-width: 719px) {
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-cmp svg { height: 26px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-cmp { row-gap: 2px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-neq { width: 22px; height: 22px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-gapnote { line-height: 1.25; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-x { padding-block: 7px; }
  /* these trims keep the 375 page under 3000 px */
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-steps { row-gap: 8px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-take { padding-block: 14px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-call { line-height: 1; margin-bottom: -2px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-ba { margin-top: 8px; gap: 10px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-tot { gap: 6px; grid-template-columns: minmax(0, 1fr); } /* one total per row (auto-fit would pair two) */
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-take { gap: 10px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-list { gap: 4px; }
}
/* Before/After rows below 1180: the glyph sits right after its pill (a spanning line must not widen the pill column) */
@container fl (max-width: 1179px) {
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-ba > div { grid-template-columns: auto 88px minmax(0, 1fr); }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-ba p { grid-column: 1 / -1; }
  /* FM-08: the run lanes are wide-only, so their labels ("Received, not processed", "Future fallout") stay as a line under
     the card; the words still slide in on the lane's beat */
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-lane[data-at] { display: block; grid-column: 2; grid-row: 2; position: static; height: auto; margin: -6px 0 0 4px; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-lane[data-at] > .fl-run { display: none; }
  .fl:is([data-flow="claims"],[data-flow="claims"] *) .fl-lane[data-at] .fl-lab { display: block; position: relative; top: auto; text-align: left; color: var(--ink-2); }
}

/* flow:claims-automation (page styles, scoped by freeze.cjs) */
/* Inter (variable, latin subset) by Rasmus Andersson, SIL Open Font License 1.1. Same file the live site serves. */



/* Page tokens (flows/v3/STANDARD.md §3). Site names first, then the flow palette the kit reads.
   Hue meanings in this flow: gold intake, violet OCR, cyan provider match, blue validated transaction and adjudication,
   teal reconciliation, red the exception routes. Cyan is a page-local sixth stage hue (KIT-REQUESTS.md K6). */
[data-flow="claims-automation"] { --paper: #f4f5f7; --ink: #14171c; --ink-2: #3f444d; --ink-3: #5f6570; --rule: #d3d6dc; --accent: #1d4f9e; --contrast: #9c4a1a; --focus: 3px solid var(--accent); --focus-offset: 3px; --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 0; --radius-pin: 50%; --shadow-1: 0 1px 2px rgb(20 23 28 / 0.08), 0 8px 24px rgb(20 23 28 / 0.08); --dur-press: 100ms; --dur-ui: 200ms; --dur-bar: 360ms; --dur-step: 600ms; --dur-map: 840ms; --flow-cycle: 4000ms; --hold-min: 1200ms; --ease: cubic-bezier(0.2, 0, 0, 1); --fl-card: #ffffff; --fl-slab: #1b2230; --fl-slab-2: #263044; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c0c5cd; --fl-gold: #b97c22; --fl-gold-on: #14171c; --fl-gold-ink: #7f5600; --fl-gold-tint: #fbf6ee; --fl-gold-line: #a8781f; --fl-gold-hi: #e2b955; --fl-violet: #8d43d6; --fl-violet-on: #ffffff; --fl-violet-ink: #7b34c4; --fl-violet-tint: #f4ecfb; --fl-violet-line: #8d43d6; --fl-violet-hi: #c3a6f2; --fl-cyan: #1f9bb0; --fl-cyan-on: #14171c; --fl-cyan-ink: #0b6577; --fl-cyan-tint: #e7f5f8; --fl-cyan-line: #1a8a9e; --fl-cyan-hi: #7fd3df; --fl-red: #a3281e; --fl-red-on: #ffffff; --fl-red-ink: #a3281e; --fl-red-tint: #fbecea; --fl-red-line: #be2f40; --fl-red-hi: #f19a8f; --fl-blue: #1d4f9e; --fl-blue-on: #ffffff; --fl-blue-ink: #1d4f9e; --fl-blue-tint: #e8edf5; --fl-blue-line: #1d4f9e; --fl-blue-hi: #8db4f2; --fl-teal: #0b8452; --fl-teal-on: #ffffff; --fl-teal-ink: #0a6e45; --fl-teal-tint: #e6f3ec; --fl-teal-line: #0b8452; --fl-teal-hi: #7cc4b9; --ca-lane: #f0f2f5; --ca-route: #c2545f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-flow="claims-automation"] { --paper: #111318; --ink: #e9ebef; --ink-2: #c0c5cd; --ink-3: #969ca7; --rule: #30343b; --accent: #8db4f2; --contrast: #e0955f; --shadow-1: 0 0 0 1px var(--rule), 0 8px 24px rgb(0 0 0 / 0.6); --fl-card: #1a1d23; --fl-slab: #262d3a; --fl-slab-2: #323b4c; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c8ccd4; --fl-gold: #b28b21; --fl-gold-on: #111318; --fl-gold-ink: #e2b955; --fl-gold-tint: #2a2618; --fl-gold-line: #b28b21; --fl-gold-hi: #e2b955; --fl-violet: #8250b8; --fl-violet-on: #ffffff; --fl-violet-ink: #c3a6f2; --fl-violet-tint: #241f30; --fl-violet-line: #9468cc; --fl-violet-hi: #c3a6f2; --fl-cyan: #0f7584; --fl-cyan-on: #ffffff; --fl-cyan-ink: #7fd3df; --fl-cyan-tint: #142a2e; --fl-cyan-line: #1b93a5; --fl-cyan-hi: #7fd3df; --fl-red: #c8364a; --fl-red-on: #ffffff; --fl-red-ink: #f19a8f; --fl-red-tint: #2c1c1c; --fl-red-line: #e0505e; --fl-red-hi: #f19a8f; --fl-blue: #4194f6; --fl-blue-on: #111318; --fl-blue-ink: #8db4f2; --fl-blue-tint: #1b2638; --fl-blue-line: #4194f6; --fl-blue-hi: #8db4f2; --fl-teal: #108068; --fl-teal-on: #ffffff; --fl-teal-ink: #7cc4b9; --fl-teal-tint: #16282a; --fl-teal-line: #10806c; --fl-teal-hi: #7cc4b9; --ca-lane: #20242b; --ca-route: #d9737d; }
}
:root[data-theme="dark"] [data-flow="claims-automation"] { --paper: #111318; --ink: #e9ebef; --ink-2: #c0c5cd; --ink-3: #969ca7; --rule: #30343b; --accent: #8db4f2; --contrast: #e0955f; --shadow-1: 0 0 0 1px var(--rule), 0 8px 24px rgb(0 0 0 / 0.6); --fl-card: #1a1d23; --fl-slab: #262d3a; --fl-slab-2: #323b4c; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c8ccd4; --fl-gold: #b28b21; --fl-gold-on: #111318; --fl-gold-ink: #e2b955; --fl-gold-tint: #2a2618; --fl-gold-line: #b28b21; --fl-gold-hi: #e2b955; --fl-violet: #8250b8; --fl-violet-on: #ffffff; --fl-violet-ink: #c3a6f2; --fl-violet-tint: #241f30; --fl-violet-line: #9468cc; --fl-violet-hi: #c3a6f2; --fl-cyan: #0f7584; --fl-cyan-on: #ffffff; --fl-cyan-ink: #7fd3df; --fl-cyan-tint: #142a2e; --fl-cyan-line: #1b93a5; --fl-cyan-hi: #7fd3df; --fl-red: #c8364a; --fl-red-on: #ffffff; --fl-red-ink: #f19a8f; --fl-red-tint: #2c1c1c; --fl-red-line: #e0505e; --fl-red-hi: #f19a8f; --fl-blue: #4194f6; --fl-blue-on: #111318; --fl-blue-ink: #8db4f2; --fl-blue-tint: #1b2638; --fl-blue-line: #4194f6; --fl-blue-hi: #8db4f2; --fl-teal: #108068; --fl-teal-on: #ffffff; --fl-teal-ink: #7cc4b9; --fl-teal-tint: #16282a; --fl-teal-line: #10806c; --fl-teal-hi: #7cc4b9; --ca-lane: #20242b; --ca-route: #d9737d; }
*:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), *:is([data-flow="claims-automation"],[data-flow="claims-automation"] *)::before, *:is([data-flow="claims-automation"],[data-flow="claims-automation"] *)::after { box-sizing: border-box; }


.page:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { max-width: 1440px; margin: 0 auto; padding: 16px; }
.frame:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { background: var(--fl-card); border-radius: 20px; padding: 28px; }
/* r4 D-01: the wide dock lane reaches 20 px into the frame's 28 px padding, 8 px in from its edge */
@media (min-width: 1180px) { .fl[data-flow]:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { --fl-dock-out: 20px; } }
.eyebrow:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { margin: 0 0 12px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 719px) { .page:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { padding: 0; } .frame:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { border-radius: 0; padding: 16px 16px 16px; } .eyebrow:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { margin-bottom: 8px; } }

/* ===== Claims intake automation: its own layout (a route map) on top of the kit primitives. Logged in KIT-REQUESTS.md.
   One main rail runs Paper claim -> 01..05 -> Adjudication. Each stage sends its exception off the rail on a red route into
   a named destination; no route returns to the rail. Text never ghosts: only grounds, fills, rails, routes and seals wait.
   Every control is at full contrast on every frame: a seek disc is a 2 px hue ring on the card that fills on its beat. */
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { --ca-gap: 16px; --ca-xw: 320px; --ca-xpb: 10px; --fl-dock-lane: 62px; } /* the exception lane overhangs 10 px; the dock lane clears it */
.ca-nw:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { white-space: nowrap; }

/* caption: the headline, then the deck and caveat (the result tiles are removed: HR-D2-O5) */
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-cap { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
/* the design-sample caveat sits in the source line, out of the 15-second zone */
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-cav { display: block; margin-top: 4px; }
.ca-sum:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { margin-top: 16px; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot > div { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; row-gap: 4px; min-height: 60px; padding: 8px 16px; border: 0; border-radius: var(--radius); background: var(--h-tint); box-shadow: inset 4px 0 0 var(--h-line); }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot dd { margin: 0; font-size: var(--size-fl-hero); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; transform-origin: left center; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot dt { order: 2; margin: 0; font-size: var(--size-fl-label); font-weight: 600; line-height: 1.3; color: var(--h-ink); text-wrap: balance; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot > div { padding-left: 42px; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot > div::after { content: ""; position: absolute; left: 13px; top: 20px; width: 20px; height: 20px; background: var(--h-ink); -webkit-mask: var(--ca-ic) center / 20px no-repeat; mask: var(--ca-ic) center / 20px no-repeat; }
.ca-fine:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { margin: 6px 0 0; font-size: var(--size-fl-label); line-height: 1.4; color: var(--ink-3); }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot > [data-hue="blue"] { --ca-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='m9 14 2 2 4-4.5'/%3E%3C/svg%3E"); }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot > [data-hue="teal"] { --ca-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

/* the main rail: a grey track, the stage hue drawn over it, then the blue fix strokes at the close */
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps { row-gap: var(--ca-gap); }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-step, .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-node { position: relative; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-step::before, .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-node[data-node="start"]::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: calc(0px - var(--ca-gap)); width: 2px; background: var(--rule); }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-wire { left: 21px; right: auto; top: 48px; bottom: calc(8px - var(--ca-gap)); width: 2px; height: auto; z-index: 1; background: var(--h-line); transform-origin: top center; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-wire::after { left: -4px; right: auto; top: auto; bottom: 1px; width: 8px; height: 8px; border: 0; border-right: 2px solid var(--h-line); border-bottom: 2px solid var(--h-line); transform: rotate(45deg); }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-node[data-node="start"] .fl-wire { top: 44px; bottom: calc(0px - var(--ca-gap)); }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-node[data-node="start"] .fl-wire::after { display: none; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-fix { position: absolute; left: 20px; top: 44px; bottom: calc(0px - var(--ca-gap)); width: 4px; border-radius: 2px; background: var(--h); transform-origin: top center; z-index: 2; }

/* stations and seek discs: a full-contrast ring on the card, filled by an inner layer on the beat (D-01, F-17) */
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-disc, .ca-term:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { position: relative; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pin); }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-disc, .ca-term[data-ring]:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { background: var(--fl-card); color: var(--h-ink); border: 2px solid var(--h-line); }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-disc svg.fl-i, .ca-term:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) svg { width: 20px; height: 20px; }
.ca-term:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { grid-column: 1; grid-row: 1; justify-self: center; background: var(--h); color: var(--h-on); }
.ca-dfill:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), .ca-dfill:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > i, .ca-sfill:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), .ca-sfill:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > i, .ca-ion:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--radius-pin); transform-origin: center; }
.ca-dfill:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { inset: -2px; z-index: 0; }
.ca-dfill:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > i { background: var(--h); }
/* the icon is never covered while the disc fills: the base icon (hue ink, a card-coloured halo) sits above the fill, then the
   on-colour icon fades in over it and the base fades out (page engine). Still, reduced motion and scripts off: the lit disc. */
.ca-ib:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { position: relative; z-index: 1; opacity: 0; filter: drop-shadow(0 0 1px var(--fl-card)) drop-shadow(0 0 1px var(--fl-card)); }
.ca-ion:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { z-index: 2; color: var(--h-on); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .ca-ib:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { opacity: 1; } }
.ca-halo:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), .ca-halo:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > i { position: absolute; border-radius: var(--radius-pin); transform-origin: center; }
.ca-halo:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { inset: -8px; }
.ca-halo:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > i { inset: 0; border: 2px solid var(--h-line); }
.ca-term[data-ring]:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { transform-origin: center; }

/* travelling tokens (made by the script below; motion only, never in the still) */
.ca-tok:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { position: absolute; left: 0; top: 0; z-index: 4; width: 16px; height: 16px; border-radius: var(--radius-pin); background: var(--h); box-shadow: 0 0 0 3px var(--fl-card), var(--shadow-1); opacity: 0; pointer-events: none; offset-rotate: 0deg; offset-anchor: center; }
.ca-tok[data-x]:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { width: 14px; height: 14px; border-radius: 0; background: var(--fl-red); box-shadow: none; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* start and end stations: before and after sit on the path itself */
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-node { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 8px; align-items: center; }
.ca-nt:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; margin: 0; font-size: var(--size-fl-label); line-height: 1.4; color: var(--ink-2); }
.ca-nt:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) b { font-size: var(--size-fl-body); color: var(--h-ink); }
.ca-tag:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { padding: 3px 8px; /* QA-016: the 2 px ring clears the words */ border-radius: 10px; font-weight: 700; background: var(--fl-card); box-shadow: inset 0 0 0 2px var(--ink-3); color: var(--ink-2); }
.ca-node[data-node="end"]:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-tag { background: var(--h); box-shadow: none; color: var(--h-on); }
/* column header over the exception column (wide only; below 1180 each chip sits under its card and needs no key) */
.ca-key:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { display: none; margin: 0; align-items: center; gap: 8px; font-size: var(--size-fl-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fl-red-ink); }
.ca-key:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) svg { flex: none; width: 20px; height: 20px; }
.ca-key:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .m { stroke: var(--ink-3); }
.ca-key:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .b { stroke: var(--ca-route); stroke-width: 1.5; }
.ca-key:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .t { stroke: var(--ca-route); stroke-width: 1.5; }
.ca-key:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) circle { fill: var(--fl-red-line); stroke: none; }

/* stage cards: white ground; the hue wash, the disc fill and the route wait for the beat; the text is always full ink */
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card { position: relative; isolation: isolate; background: var(--fl-card); box-shadow: inset 0 0 0 1px var(--rule); }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .ca-wash { position: absolute; inset: 0; z-index: -1; margin: 0; background: var(--h-tint); pointer-events: none; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .ca-m { position: absolute; top: 10px; right: 16px; margin: 0; padding-left: 8px; background: var(--h); color: var(--h-on); font-size: var(--size-fl-label); font-weight: 600; line-height: 1.4; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-band .ca-n { font-variant-numeric: tabular-nums; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-nt span { text-wrap: balance; }

/* stage mini-visuals (page-local, K2) */
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-route li { align-items: center; padding: 6px 8px; background: var(--fl-card); border-radius: 8px; color: var(--ink); font-weight: 600; }
.ca-route:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) b { color: var(--h-ink); }
.ca-form:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 4px; width: min(100%, 240px); }
.ca-form:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) svg { grid-column: 1 / -1; width: 100%; height: 56px; }
.ca-form:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .pg { fill: var(--fl-card); stroke: none; }
.ca-form:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fd { fill: var(--h); stroke: none; }
.ca-form:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ok { stroke: var(--h-ink); }
.ca-form:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .un { fill: var(--fl-red-tint); stroke: var(--fl-red-line); stroke-dasharray: 3 3; }
.ca-form:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .q { stroke: var(--fl-red-ink); }
.ca-form:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) span { text-align: center; }
.ca-pair:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); column-gap: 4px; row-gap: 8px; align-items: center; max-width: 300px; }
.ca-pair:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > span { padding: 6px 8px; background: var(--fl-card); border-radius: 8px; color: var(--ink); font-weight: 600; text-align: center; }
.ca-pair:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > svg { grid-column: 2; grid-row: 1; justify-self: center; width: 16px; height: 16px; color: var(--h-ink); }
.ca-pair:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > span:first-of-type { grid-column: 1; grid-row: 1; }
.ca-pair:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > span:last-of-type { grid-column: 3; grid-row: 1; }
.ca-pair:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > p { grid-column: 1 / -1; margin: 0; color: var(--h-ink); font-weight: 600; }
.ca-merge:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { display: grid; grid-template-columns: max-content max-content; justify-content: start; align-items: center; column-gap: 10px; row-gap: 6px; max-width: 320px; }
.ca-merge:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > span { display: inline-flex; align-items: center; gap: 6px; padding: 1px 0; color: var(--h-ink); font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; cursor: default; }
.ca-merge:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > span::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pin); background: var(--h); }
.ca-merge:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > span + span { padding-left: 10px; box-shadow: inset 1px 0 0 var(--rule); }
.ca-merge:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > p { grid-column: 1 / -1; margin: 0; padding: 1px 0 1px 10px; box-shadow: inset 3px 0 0 var(--h); color: var(--ink); font-weight: 600; cursor: default; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-tl { position: relative; gap: 4px; }
.ca-tl:is([data-flow="claims-automation"],[data-flow="claims-automation"] *)::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; background: var(--h-line); }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-tl li { position: relative; align-items: center; color: var(--ink); font-weight: 600; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-tl .fl-i { display: block; box-sizing: content-box; width: 14px; height: 14px; margin: 0; padding: 5px; border-radius: var(--radius-pin); background: var(--h); color: var(--h-on); }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-fig { border-radius: 10px; }

/* exception chips (round 4): one calm style. A 4 px red left edge marks the problem; the question and its icon are the only
   other red. The ground (neutral, white inside the wide lane) unrolls from the route side on the beat; words never fade (K10).
   The destination pill takes the stage's own hue, so each chip reads problem (red), then route (stage colour), then sealed. */
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-x { isolation: isolate; overflow: clip; grid-template-rows: auto 1fr auto; row-gap: 2px; padding: 10px 14px var(--ca-xpb) 16px; border: 0; background: none; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-x .fl-xt { color: var(--fl-red-ink); }
.ca-xg:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; z-index: -1; border: 0 solid var(--fl-red-line); border-left-width: 4px; pointer-events: none; }
.ca-xw:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { position: absolute; inset: 0; z-index: -2; border-radius: var(--radius); background: var(--ca-lane); transform-origin: left center; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-xi { position: relative; background: var(--fl-card); color: var(--h-ink); box-shadow: inset 0 0 0 2px var(--h-line); }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-xi .ca-dfill { inset: 0; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-xi svg { width: 16px; height: 16px; }
.ca-xs:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { display: contents; }
.ca-to:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { position: relative; isolation: isolate; grid-column: 1 / -1; grid-row: 3; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 2px 10px 2px 2px; border-radius: 16px; background: var(--fl-card); box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--h-ink); font-weight: 700; line-height: 1.2; }
/* D-12: the destination changes state when its diamond lands. Waiting: a white pill on a neutral ring. Arrived: the stage-hue
   wash and a 2 px hue ring unroll from the icon (scaleX), one hue ring pings outward and fades, and the icon pulses. The
   resting (and reduced-motion) state is "arrived"; the words never move or fade. */
.ca-tow:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), .ca-tping:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.ca-tow:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { z-index: -1; background: var(--h-tint); box-shadow: inset 0 0 0 2px var(--h); transform-origin: 11px center; }
.ca-tping:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { z-index: -2; box-shadow: 0 0 0 2px var(--h); opacity: 0; }
.ca-toi:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), .ca-stop:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { position: relative; display: grid; place-items: center; flex: none; border-radius: var(--radius-pin); }
.ca-toi:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { width: 22px; height: 22px; background: var(--h); color: var(--h-on); }
.ca-toi:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) svg { width: 14px; height: 14px; }
/* the seal: an empty slot until the close, then a 20 px blue badge with a 14 px check */
.ca-stop:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { width: 22px; height: 22px; box-shadow: inset 0 0 0 2px var(--rule); }
.ca-sfill:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { background: var(--fl-blue); color: var(--fl-blue-on); }
.ca-sfill:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) svg { width: 14px; height: 14px; stroke-width: 3; }
/* the exception route (round 4): one solid 1.5 px muted-red line, drawn on the beat. Wide: from the card's right edge across
   the gutter into the chip at its mid-height. Narrow: from the rail into the chip. The exception diamond rides it. */
.ca-br:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { position: absolute; z-index: 1; pointer-events: none; left: 23px; width: 33px; bottom: calc(var(--ca-xpb) + 12px); height: 0; border-top: 1.5px solid var(--ca-route); transform-origin: left center; }
.ca-br:is([data-flow="claims-automation"],[data-flow="claims-automation"] *)::after { content: ""; position: absolute; right: 1px; top: -4.75px; width: 7px; height: 7px; border-top: 1.5px solid var(--ca-route); border-right: 1.5px solid var(--ca-route); transform: rotate(45deg); }

/* takeaway: the decision, its heading beside the three options */
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-take { grid-template-columns: minmax(0, 1fr); }
.ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--fl-slab-2); font-size: var(--size-fl-label); line-height: 1.35; color: var(--fl-slab-ink-2); }
.ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) li[data-pick] { order: -1; padding: 12px 14px; background: var(--h); color: var(--h-on); }
.ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) li[data-pick] b { font-size: var(--size-fl-body); line-height: 1.25; color: var(--h-on); }
@container fl (min-width: 720px) { .ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) li[data-pick] b { font-size: var(--size-fl-fig); } }
.ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) li[data-pick] em { color: var(--h-on); }
.ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) li[data-pick] .ca-ol { background: var(--h-on); color: var(--h); }
.ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) li:not([data-pick]) b { font-size: var(--size-fl-label); }
.ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) b { display: block; color: var(--fl-slab-ink); font-size: var(--size-fl-body); }
.ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) em { font-style: normal; font-weight: 600; color: var(--h-ink, var(--fl-slab-ink-2)); }
.ca-ol:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pin); background: var(--fl-slab); box-shadow: inset 0 0 0 2px var(--fl-slab-ink-2); color: var(--fl-slab-ink); }
.ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) [data-hue] .ca-ol { background: var(--h-hi); box-shadow: none; color: var(--fl-slab); }
.ca-ol:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) svg { width: 16px; height: 16px; stroke-width: 2.5; }
@container fl (min-width: 720px) {
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-take { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
  .ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) li[data-pick] { grid-column: 1 / -1; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot > div { padding-left: 60px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot > div::before { content: ""; position: absolute; left: 16px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: var(--radius-pin); background: var(--h); }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot > div::after { content: ""; position: absolute; left: 22px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--h-on); -webkit-mask: var(--ca-ic) center / 20px no-repeat; mask: var(--ca-ic) center / 20px no-repeat; }
}
@container fl (min-width: 980px) {
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-take { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.4fr); column-gap: 32px; align-items: center; }
}

/* below 1180: one rail, each chip under its card. The control is the kit dock (STANDARD §8, QA r3 D-01): it shares the steps'
   grid area (CLS 0), rides the rail 16 px above the viewport foot like a station and steps up past discs, route marks and
   words, never hidden. Explicit rail columns fix
   the kit's subgrid misread (K12), so the kit runs its narrow clock: a stage starts when it is half in view. */
@container fl (max-width: 1179px) {
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; grid-row: 2; --ca-gap: 12px; row-gap: var(--ca-gap); }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-viz { max-width: 360px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-step { row-gap: 8px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card { gap: 6px; padding-bottom: 12px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-fig { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; padding: 8px 12px; }
}
/* D-01 r4: the kit dock rides the rail; its last stop is a station 8 px under the end node, never over it */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) { @container fl (max-width: 1179px) { .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps { padding-bottom: 32px; } }
  /* and on the smallest phones a station above the start node, so the first view (page top) has a clear spot over the rail */
  @container fl (max-width: 319px) { .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps { padding-top: 24px; } } }
@container fl (min-width: 560px) and (max-width: 1179px) {
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .fl-band, .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .fl-detail, .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .fl-did { grid-column: 1 / -1; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .fl-band { margin-bottom: 4px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .fl-viz { grid-column: 1; margin-right: 0; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .fl-fig { grid-column: 2; justify-self: start; width: 100%; max-width: 260px; margin-left: 0; align-self: stretch; flex-direction: column; justify-content: center; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-x { justify-self: start; width: 100%; max-width: 640px; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 16px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-x .ca-to { grid-column: 3; grid-row: 1 / span 2; align-self: end; margin: 0; }
}
@container fl (max-width: 719px) {
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > * + * { margin-top: -8px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-sum { margin-top: 12px; }
}
@container fl (max-width: 559px) {
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > * { --ca-xpb: 8px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > * { margin-inline: 12px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .ca-form { display: none; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-x { display: block; padding: 8px 12px var(--ca-xpb); }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-x .fl-xi { display: none; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-xs { display: block; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-x .fl-xt { margin-right: 0.3em; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-x .ca-to { display: flex; width: fit-content; margin-top: 4px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-fig { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 10px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-route li { padding-block: 3px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps { --ca-gap: 8px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card { gap: 5px; padding-bottom: 10px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .fl-band { padding-block: 8px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-node { row-gap: 4px; }
  .ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { gap: 4px; margin-top: 8px; }
  .ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) li { padding: 6px 10px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot > div::after { top: 18px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-take { gap: 8px; padding: 14px 12px; }
  .ca-opts:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) li { line-height: 1.3; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-lh { line-height: 1.15; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-sum { margin-top: 8px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-cav { margin-top: 8px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-fine { margin-top: 4px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot > div { padding-block: 6px; min-height: 0; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card { gap: 4px; }
}
@container fl (max-width: 359px) {
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot > div { padding-left: 38px; padding-right: 12px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot > div::after { left: 11px; }
}
@container fl (max-width: 319px) {
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .ca-m { position: static; justify-self: start; align-self: flex-start; margin: -5px 0 0; padding: 0 16px 4px; width: 100%; }
}

/* wide (container >= 1180): stations on the rail at the left, each stage a row: card, route gutter, exception chip */
@container fl (min-width: 1180px) {
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-cap { grid-template-columns: minmax(0, 1fr) max-content; column-gap: 32px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-cap > .fl-h { grid-column: 1 / -1; max-width: none; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-cap > .fl-deck { grid-column: 1; grid-row: 2; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-cap > .ca-cav { grid-column: 1; grid-row: 3; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-sum { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-top: 12px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps { --ca-gap: 6px; margin-top: -12px; grid-template-columns: 44px 12px minmax(0, 1fr) 40px minmax(0, var(--ca-xw)); grid-auto-flow: row; grid-template-rows: auto repeat(5, 1fr) auto; grid-auto-rows: auto; column-gap: 0; row-gap: var(--ca-gap); }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-step, .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-node { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: subgrid; grid-template-rows: none; row-gap: 0; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-step > .fl-seek, .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-step > .fl-disc { grid-column: 1; grid-row: 1; justify-self: center; align-self: start; margin: 0; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card { grid-column: 3; grid-row: 1; align-self: stretch; display: grid; grid-template-columns: 132px minmax(0, 1.45fr) minmax(0, 1.1fr) minmax(0, 0.7fr); grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 6px; padding: 0 12px 0 0; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .fl-band { grid-column: 1; grid-row: 1 / -1; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; padding: 12px 16px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-band .ca-n { font-size: var(--size-fl-fig); line-height: 1.1; letter-spacing: 0; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .ca-m { top: auto; bottom: 12px; left: 16px; right: auto; padding: 0; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .fl-detail { grid-column: 2; grid-row: 1; align-self: start; margin: 10px 0 0; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .fl-did { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 10px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .fl-viz { grid-column: 3; grid-row: 1 / -1; align-self: center; margin: 8px 0; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .fl-fig { grid-column: 4; grid-row: 1 / -1; align-self: center; margin: 8px 0; padding: 8px 12px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-x { grid-column: 5; grid-row: 1; align-self: stretch; margin: 0; row-gap: 0; padding: 6px 12px var(--ca-xpb); }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-to { margin-top: 0; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-node > .ca-term { grid-column: 1; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-node > .ca-nt { grid-column: 3; grid-row: 1; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-node > .ca-key { display: flex; grid-column: 5; grid-row: 1; padding-left: 14px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > * { --ca-xpb: 8px; }
  .ca-br:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { left: auto; right: var(--ca-xw); width: 40px; top: 50%; bottom: auto; }
  /* one neutral lane titled "Exception routes" holds the five chips; each chip is a white card on it */
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps::before { content: ""; grid-column: 5; grid-row: 1 / 7; margin: -8px -10px -10px; border-radius: 14px; background: var(--ca-lane); pointer-events: none; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps > :nth-child(1) { grid-row: 1; } .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps > :nth-child(2) { grid-row: 2; } .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps > :nth-child(3) { grid-row: 3; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps > :nth-child(4) { grid-row: 4; } .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps > :nth-child(5) { grid-row: 5; } .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps > :nth-child(6) { grid-row: 6; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps > :nth-child(7) { grid-row: 7; }
  .ca-xw:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { background: var(--fl-card); }
}
/* wide rows follow their content (no forced equal heights, so no dead space, D-03 round 3). The band label sits right under
   its verb; the statement and what I did stack at the top; the figure column keeps at least 170 px; each chip sits at the foot
   of its row with its destination 12 px after its words, so the route along the row's lower edge still meets the destination. */
@container fl (min-width: 1180px) {
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps { grid-template-rows: none; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card { grid-template-columns: 132px minmax(0, 1.3fr) minmax(0, 1fr) minmax(170px, 0.7fr); }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .ca-m { top: calc(14px + var(--size-fl-fig) * 1.1 + var(--size-fl-label) * 1.4); bottom: auto; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .fl-did { align-self: start; margin: 6px 0 12px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-x { align-self: stretch; grid-template-rows: auto auto auto; align-content: center; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-x .ca-to { margin-top: 8px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-route li > span, .ca-merge:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > p { white-space: nowrap; }
}
/* the narrowest wide band (container 1180-1299, a 1280 window): a slimmer route column gives the visual room for its
   one-line pills ("CMS-1500 → professional", "Existing adjudication rules") */
/* >=1300: the statement column takes what the route pills and destination do not need, so every statement holds one line and the five rows clear the 1440x900 fold */
@container fl (min-width: 1300px) {
  /* r4 D-01: the dock lane takes 42 px of the row, so the chip lane (300) and visual column (206) give it back */
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > * { --ca-xw: 300px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card { grid-template-columns: 132px minmax(0, 1fr) minmax(min-content, 206px) minmax(170px, 176px); }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-x { padding-top: 4px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-steps { --ca-gap: 5px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card > .fl-viz { margin: 4px 0; }
}
@container fl (min-width: 1180px) and (max-width: 1299px) {
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > * { --ca-xw: 296px; }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-card { grid-template-columns: 132px minmax(0, 1fr) minmax(min-content, 1fr) minmax(170px, 0.6fr); }
  .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-merge > p { padding-inline: 10px; }
}
@media (forced-colors: active) { .ca-term:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), .ca-toi:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), .ca-stop:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), .ca-fix:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), .ca-dfill:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > i, .ca-ion:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), .ca-ib:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-xi, .ca-sfill:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), .ca-merge:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) > p, .ca-tl:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-i, .ca-m:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot > div::before, .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-tot > div::after { forced-color-adjust: none; } .ca-to:is([data-flow="claims-automation"],[data-flow="claims-automation"] *), .ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .fl-x { border: 1px solid; } }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-dots i { left: 0; top: 0; width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--fl-card); offset-rotate: 0deg; offset-anchor: center; }
.ca:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) .ca-dots i[data-k="x"] { width: 9px; height: 9px; border-radius: 0; background: var(--ca-route); box-shadow: none; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@media (prefers-reduced-motion: reduce) { .ca-tok:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) { display: none; } }
/* CLS: hold the first paint (at most 1.5 s) until the embedded face is decoded, so no line rewraps after first paint. Script-only, so the page renders at once without JS. */
.ca-fw:is([data-flow="claims-automation"],[data-flow="claims-automation"] *) body { visibility: hidden; }

/* flow:prescription (page styles, scoped by freeze.cjs) */
/* Inter (variable, latin subset) by Rasmus Andersson, SIL Open Font License 1.1. Same file the live site serves. */


/* Page tokens (flows/v3/STANDARD.md §3). Site names first, then the flow palette the kit reads. */
[data-flow="prescription"] { --paper: #f4f5f7; --ink: #14171c; --ink-2: #3f444d; --ink-3: #5f6570; --rule: #d3d6dc; --accent: #1d4f9e; --contrast: #9c4a1a; --focus: 3px solid var(--accent); --focus-offset: 3px; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 0; --radius-pin: 50%; --shadow-1: 0 1px 2px rgb(20 23 28 / 0.08), 0 8px 24px rgb(20 23 28 / 0.08); --dur-press: 100ms; --dur-ui: 200ms; --dur-bar: 360ms; --dur-step: 600ms; --dur-map: 840ms; --flow-cycle: 2600ms; --hold-min: 1200ms; --ease: cubic-bezier(0.2, 0, 0, 1); --fl-cols: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); --fl-card: #ffffff; --fl-slab: #1b2230; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c0c5cd; --fl-gold: #b97c22; --fl-gold-on: #14171c; --fl-gold-ink: #7f5600; --fl-gold-tint: #fbf6ee; --fl-gold-line: #a8781f; --fl-gold-hi: #e2b955; --fl-violet: #8d43d6; --fl-violet-on: #ffffff; --fl-violet-ink: #7b34c4; --fl-violet-tint: #f4ecfb; --fl-violet-line: #8d43d6; --fl-violet-hi: #c3a6f2; --fl-red: #a3281e; --fl-red-on: #ffffff; --fl-red-ink: #a3281e; --fl-red-tint: #fbecea; --fl-red-line: #b3261e; --fl-red-hi: #f19a8f; --fl-blue: #1d4f9e; --fl-blue-on: #ffffff; --fl-blue-ink: #1d4f9e; --fl-blue-tint: #e8edf5; --fl-blue-line: #1d4f9e; --fl-blue-hi: #8db4f2; --fl-teal: #0b8452; --fl-teal-on: #ffffff; --fl-teal-ink: #0a6e45; --fl-teal-tint: #e6f3ec; --fl-teal-line: #0b8452; --fl-teal-hi: #7cc4b9; --pr-track: #8a9099; --pr-chip: #fdf5f4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-flow="prescription"] { --paper: #111318; --ink: #e9ebef; --ink-2: #c0c5cd; --ink-3: #969ca7; --rule: #30343b; --accent: #8db4f2; --contrast: #e0955f; --shadow-1: 0 0 0 1px var(--rule), 0 8px 24px rgb(0 0 0 / 0.6); --fl-card: #1a1d23; --fl-slab: #262d3a; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c8ccd4; --fl-gold: #b28b21; --fl-gold-on: #111318; --fl-gold-ink: #e2b955; --fl-gold-tint: #2a2618; --fl-gold-line: #b28b21; --fl-gold-hi: #e2b955; --fl-violet: #8250b8; --fl-violet-on: #ffffff; --fl-violet-ink: #c3a6f2; --fl-violet-tint: #241f30; --fl-violet-line: #9a6bd2; --fl-violet-hi: #c3a6f2; --fl-red: #c43d30; --fl-red-on: #ffffff; --fl-red-ink: #f19a8f; --fl-red-tint: #2c1c1c; --fl-red-line: #d0473a; --fl-red-hi: #f19a8f; --fl-blue: #4194f6; --fl-blue-on: #111318; --fl-blue-ink: #8db4f2; --fl-blue-tint: #1b2638; --fl-blue-line: #4194f6; --fl-blue-hi: #8db4f2; --fl-teal: #108068; --fl-teal-on: #ffffff; --fl-teal-ink: #7cc4b9; --fl-teal-tint: #16282a; --fl-teal-line: #10806c; --fl-teal-hi: #7cc4b9; --pr-track: #6b717c; --pr-chip: #261c1d; }
}
:root[data-theme="dark"] [data-flow="prescription"] { --paper: #111318; --ink: #e9ebef; --ink-2: #c0c5cd; --ink-3: #969ca7; --rule: #30343b; --accent: #8db4f2; --contrast: #e0955f; --shadow-1: 0 0 0 1px var(--rule), 0 8px 24px rgb(0 0 0 / 0.6); --fl-card: #1a1d23; --fl-slab: #262d3a; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c8ccd4; --fl-gold: #b28b21; --fl-gold-on: #111318; --fl-gold-ink: #e2b955; --fl-gold-tint: #2a2618; --fl-gold-line: #b28b21; --fl-gold-hi: #e2b955; --fl-violet: #8250b8; --fl-violet-on: #ffffff; --fl-violet-ink: #c3a6f2; --fl-violet-tint: #241f30; --fl-violet-line: #9a6bd2; --fl-violet-hi: #c3a6f2; --fl-red: #c43d30; --fl-red-on: #ffffff; --fl-red-ink: #f19a8f; --fl-red-tint: #2c1c1c; --fl-red-line: #d0473a; --fl-red-hi: #f19a8f; --fl-blue: #4194f6; --fl-blue-on: #111318; --fl-blue-ink: #8db4f2; --fl-blue-tint: #1b2638; --fl-blue-line: #4194f6; --fl-blue-hi: #8db4f2; --fl-teal: #108068; --fl-teal-on: #ffffff; --fl-teal-ink: #7cc4b9; --fl-teal-tint: #16282a; --fl-teal-line: #10806c; --fl-teal-hi: #7cc4b9; --pr-track: #6b717c; --pr-chip: #261c1d; }
*:is([data-flow="prescription"],[data-flow="prescription"] *), *:is([data-flow="prescription"],[data-flow="prescription"] *)::before, *:is([data-flow="prescription"],[data-flow="prescription"] *)::after { box-sizing: border-box; }


.page:is([data-flow="prescription"],[data-flow="prescription"] *) { max-width: 1440px; margin: 0 auto; padding: 16px; }
.frame:is([data-flow="prescription"],[data-flow="prescription"] *) { background: var(--fl-card); border-radius: 20px; padding: 28px; }
/* r4 D-01: the wide dock lane reaches 20 px into the frame's 28 px padding, 8 px in from its edge */
@media (min-width: 1180px) { .fl[data-flow]:is([data-flow="prescription"],[data-flow="prescription"] *) { --fl-dock-out: 20px; } }
.eyebrow:is([data-flow="prescription"],[data-flow="prescription"] *) { margin: 0 0 12px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 719px) { .page:is([data-flow="prescription"],[data-flow="prescription"] *) { padding: 0; } .frame:is([data-flow="prescription"],[data-flow="prescription"] *) { border-radius: 0; padding: 18px 16px 20px; } .eyebrow:is([data-flow="prescription"],[data-flow="prescription"] *) { letter-spacing: 0.02em; margin-bottom: 10px; } }


/* Font gate: the page stays hidden for the few ms the embedded Inter takes to decode, so the swap never shifts layout
   (cold-load CLS 0). Only set by the inline script below; no script, no gate. A 1.5 s fail-safe lifts it anyway. */
.fl-hold:is([data-flow="prescription"],[data-flow="prescription"] *) body { visibility: hidden; }

/* Page-local overrides of the kit (each one is logged in KIT-REQUESTS.md). */
/* K8 hyphens: the kit makes .fl-big tabular, but here every measure is words ("Paid-on-first-pass"), so it stays proportional. */
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-big { font-variant-numeric: normal; }

/* K9 unlit state: text never ghosts. A card's text is at full ink from the first frame; before its beat only non-text
   marks wait: the tint wash (opacity), the 4 px meter (scaleX), the disc fill (scale), wires and rail (draw), and each
   chip's fill (scaleY). QA r2 D-04 / D-08, r4 D-05: the measure box's frame (its rule and "Measured by" label) and its
   value stand at full ink from frame 0, so no card shows a blank lower band; on the beat only its ground (.pr-fbg)
   unfolds with scaleY behind the words - words never fade or scale, so no glyph squashes and no frame loses contrast. */
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card { position: relative; isolation: isolate; background: var(--fl-card); }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-wash, .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-meter { position: absolute; margin: 0; pointer-events: none; }
.fl-wash:is([data-flow="prescription"],[data-flow="prescription"] *) { inset: 0; z-index: -1; background: var(--h-tint); border-radius: inherit; }
.fl-meter:is([data-flow="prescription"],[data-flow="prescription"] *) { z-index: 1; left: 0; right: 0; bottom: 0; height: 4px; background: var(--h); transform-origin: left center; border-radius: 0 0 4px 4px; }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-band { border-radius: var(--radius) var(--radius) 0 0; }
/* QA r4 D-05: a chip's words and its frame stand at full ink from frame 0, so the chip row is never a blank band; on the
   beat only its fill (.pr-xbg) unfolds with scaleY, like the measure ground. Words never fade or scale. */
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-x { isolation: isolate; background: none; }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-x[data-hue="red"] { --pr-xf: var(--pr-chip); }
.pr-xbg:is([data-flow="prescription"],[data-flow="prescription"] *) { position: absolute; inset: 0; z-index: -1; background: var(--pr-xf, var(--h-tint)); border-radius: inherit; pointer-events: none; transform-origin: top center; }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-big { text-wrap: balance; }
.pr-acc:is([data-flow="prescription"],[data-flow="prescription"] *) li { text-wrap: pretty; }
.pr-defs:is([data-flow="prescription"],[data-flow="prescription"] *) { position: absolute; width: 0; height: 0; overflow: hidden; }
.pr-nw:is([data-flow="prescription"],[data-flow="prescription"] *) { white-space: nowrap; }

/* K10 (round 4): the key names only the two marks that carry the finding: the red-edged chip and the blue rail */
.pr-key:is([data-flow="prescription"],[data-flow="prescription"] *) { display: flex; flex-wrap: wrap; align-items: center; align-content: center; column-gap: 24px; row-gap: 6px; min-height: 44px; margin: 12px 0 0; padding: 0; list-style: none;
  font-size: var(--size-fl-label); font-weight: 600; line-height: 1.35; color: var(--ink); }
.pr-key:is([data-flow="prescription"],[data-flow="prescription"] *) li { display: flex; align-items: center; gap: 8px; }
.pr-kd:is([data-flow="prescription"],[data-flow="prescription"] *) { font-weight: 500; color: var(--ink-2); }
.pr-key:is([data-flow="prescription"],[data-flow="prescription"] *) i { flex: none; display: block; }
.pr-key:is([data-flow="prescription"],[data-flow="prescription"] *) [data-hue="red"] i { width: 18px; height: 16px; background: var(--pr-chip); border-left: 4px solid var(--h-line); border-radius: 0 4px 4px 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h-line) 30%, transparent); }
.pr-key:is([data-flow="prescription"],[data-flow="prescription"] *) [data-hue="blue"] i { width: 24px; height: 6px; border-radius: 3px; background: var(--h-line); }

/* K1 the measure: a white data box at the foot of every card, its "Measured by" label with a gauge mark. Across a row the
   boxes line up, so the measures read as one value stream under the stages. */
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-fig { gap: 2px; margin: 0; background: none; border-top: 1px solid color-mix(in srgb, var(--h-line) 45%, transparent); border-radius: 0 0 var(--radius) var(--radius);
  position: relative; isolation: isolate; }
.pr-fbg:is([data-flow="prescription"],[data-flow="prescription"] *) { position: absolute; inset: 0; z-index: -1; background: var(--fl-card); border-radius: inherit; pointer-events: none; transform-origin: center bottom; }
.pr-mb:is([data-flow="prescription"],[data-flow="prescription"] *) { display: flex; align-items: center; gap: 6px; font-size: var(--size-fl-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.pr-mb:is([data-flow="prescription"],[data-flow="prescription"] *) svg { width: 16px; height: 16px; color: var(--h-ink); }
/* QA r4 D-05: the measure value and unit stand at full ink from frame 0 (no fade, so no frame of low contrast); only the
   ground under them (.pr-fbg) unfolds on the beat */
.pr-v:is([data-flow="prescription"],[data-flow="prescription"] *) { position: relative; display: flex; flex-direction: column; gap: inherit; }
/* D-05 A1: the headline's figure is the count of stage cards (01-08) */

/* K11 (round 4) the chips: a soft solid tint with a 4 px red left edge and a red warning mark on a white disc. A blue eye
   pops on each one as the rail reaches it. Stage 08 is the solid blue catch with its inner ring. */
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-x { align-content: start; border: 0; border-left: 4px solid var(--h-line); border-radius: 0 var(--radius) var(--radius) 0; }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-x[data-hue="red"] { padding-right: 44px; }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-x[data-hue="red"] > .fl-xi { background: var(--fl-card); color: var(--h-line); box-shadow: inset 0 0 0 2px var(--h-line); }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-x[data-solid] { border: 2px solid var(--h-line); border-left-width: 4px; }
.pr-eye:is([data-flow="prescription"],[data-flow="prescription"] *) { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pin); background: var(--h); color: var(--h-on); transform-origin: center; }
.pr-eye:is([data-flow="prescription"],[data-flow="prescription"] *) svg { width: 18px; height: 18px; }
.fl-x:is([data-flow="prescription"],[data-flow="prescription"] *) > .fl-xi svg use, .pr-eye:is([data-flow="prescription"],[data-flow="prescription"] *) svg use { pointer-events: none; }
.fl-halo:is([data-flow="prescription"],[data-flow="prescription"] *) { position: absolute; pointer-events: none; inset: 2px; border: 2px solid var(--h-line); border-radius: calc(var(--radius) - 4px); }
.pr-ln:is([data-flow="prescription"],[data-flow="prescription"] *), .pr-turn:is([data-flow="prescription"],[data-flow="prescription"] *), .pr-tk:is([data-flow="prescription"],[data-flow="prescription"] *), .pr-nl:is([data-flow="prescription"],[data-flow="prescription"] *), .fl-dots[data-rail]:is([data-flow="prescription"],[data-flow="prescription"] *) { display: none; }
.pr-kw:is([data-flow="prescription"],[data-flow="prescription"] *) { position: absolute; inset: 0; }

/* K2 details on demand: a 44 x 44 "+" beside the "I ..." line on every card; the full account inside */
.pr-more:is([data-flow="prescription"],[data-flow="prescription"] *) { min-width: 0; }
.pr-more:is([data-flow="prescription"],[data-flow="prescription"] *) summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; list-style: none; cursor: pointer;
  font-size: var(--size-fl-label); font-weight: 700; color: var(--h-ink); border-radius: var(--radius-pin); }
.pr-more:is([data-flow="prescription"],[data-flow="prescription"] *) summary::-webkit-details-marker { display: none; }
.pr-sl:is([data-flow="prescription"],[data-flow="prescription"] *) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pr-pl:is([data-flow="prescription"],[data-flow="prescription"] *) { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pin); background: var(--h); color: var(--h-on); flex: none; }
.pr-pl:is([data-flow="prescription"],[data-flow="prescription"] *) svg { width: 18px; height: 18px; transition: transform var(--dur-ui) var(--ease); }
.pr-more[open]:is([data-flow="prescription"],[data-flow="prescription"] *) .pr-pl svg { transform: rotate(45deg); }
.pr-more:is([data-flow="prescription"],[data-flow="prescription"] *) summary:focus-visible { outline: var(--focus); outline-offset: 0; }
.pr-more:is([data-flow="prescription"],[data-flow="prescription"] *) summary:active .pr-pl { transform: scale(0.96); }
@media (hover: hover) { .pr-more:is([data-flow="prescription"],[data-flow="prescription"] *) summary:hover .pr-pl { box-shadow: 0 0 0 3px color-mix(in srgb, var(--h) 30%, transparent); } }
.pr-more:not([open]):is([data-flow="prescription"],[data-flow="prescription"] *) > .pr-acc { display: none; }
.pr-acc:is([data-flow="prescription"],[data-flow="prescription"] *) { display: grid; gap: 8px; padding: 4px 0; color: var(--ink-2); line-height: 1.45; }
.pr-acc:is([data-flow="prescription"],[data-flow="prescription"] *) ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.pr-dt:is([data-flow="prescription"],[data-flow="prescription"] *) { margin-top: 4px; font-size: var(--size-fl-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h-ink); }
.pr-acc:is([data-flow="prescription"],[data-flow="prescription"] *) .pr-st { margin-top: 0; color: var(--ink); letter-spacing: 0.02em; }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card { display: grid; grid-template-columns: minmax(0, 1fr) 44px; column-gap: 8px; }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > * { grid-column: 1 / -1; }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-did { grid-column: 1; margin-right: 0; align-self: center; }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .pr-more { grid-column: 2; margin: 0 8px 0 0; align-self: center; }

/* the control stays the kit's solid ink pill in every state: hover adds a ring instead of turning grey */

/* K6 (round 4) the takeaway picture: the uncertainty lane before (eight open red rings on a dashed line) and after (the
   blue rail with an eye on every stage), at full column width; the one role="img" in the figure. */
.pr-lanes:is([data-flow="prescription"],[data-flow="prescription"] *) { display: grid; gap: 14px; margin: 4px 0 18px; }
.pr-lane:is([data-flow="prescription"],[data-flow="prescription"] *) { position: relative; display: flex; justify-content: space-between; align-items: center; height: 36px; }
.pr-lane:is([data-flow="prescription"],[data-flow="prescription"] *)::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; margin-top: -1px; border-top: 2px dashed var(--h-hi); }
.pr-lane:is([data-flow="prescription"],[data-flow="prescription"] *) > i { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pin); background: var(--fl-slab); border: 3px solid var(--h-hi); }
.pr-lane[data-hue="blue"]:is([data-flow="prescription"],[data-flow="prescription"] *)::before { display: none; }
.pr-lane:is([data-flow="prescription"],[data-flow="prescription"] *) > b { position: absolute; left: 14px; right: 14px; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--h-hi); transform-origin: left center; }
.pr-lane[data-hue="blue"]:is([data-flow="prescription"],[data-flow="prescription"] *) > i { width: 36px; height: 36px; border: 0; background: var(--h-hi); color: var(--fl-slab); transform-origin: center; }
.pr-lane[data-hue="blue"]:is([data-flow="prescription"],[data-flow="prescription"] *) > i svg { width: 22px; height: 22px; }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-ba > div { grid-template-columns: auto 88px minmax(0, 1fr); font-size: var(--size-fl-body); }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-ba p { grid-column: auto; }
.fl-take:is([data-flow="prescription"],[data-flow="prescription"] *) > div:nth-child(2) { align-self: start; }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-tot { align-self: start; margin-top: 20px; }
.fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-tot > div { justify-content: flex-start; }

/* K4 the serpentine. Wide: two rows of four that snake; stages 5-8 run right to left under 4-1 and their wires point left.
   Each stage is the kit's 7-row subgrid; the card uses band, statement, "I ..." line plus "+", and the measure box. */
@container fl (min-width: 1180px) {
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-steps { grid-auto-flow: row; }
  .fl[data-flow]:is([data-flow="prescription"],[data-flow="prescription"] *) > .fl-steps { margin-right: calc(var(--fl-dock-lane, 52px) + 12px - var(--fl-dock-out, 0px)); } /* the dock lane; the 04-05 turn (12 px) runs in its free inner edge, 8 px clear of the dock */
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step[data-step="1"] { grid-column: 1; grid-row: 1 / span 7; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step[data-step="2"] { grid-column: 2; grid-row: 1 / span 7; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step[data-step="3"] { grid-column: 3; grid-row: 1 / span 7; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step[data-step="4"] { grid-column: 4; grid-row: 1 / span 7; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step[data-step="5"] { grid-column: 4; grid-row: 8 / span 7; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step[data-step="6"] { grid-column: 3; grid-row: 8 / span 7; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step[data-step="7"] { grid-column: 2; grid-row: 8 / span 7; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step[data-step="8"] { grid-column: 1; grid-row: 8 / span 7; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step > .fl-seek, .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step > .fl-disc { margin-bottom: 8px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card { grid-template-columns: minmax(0, 1fr) 44px; column-gap: 0; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > * { margin-inline: 12px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-band, .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-wash, .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-meter { margin: 0; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-detail { margin-top: 8px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-did { grid-row: 3; margin: 10px 0 12px 12px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .pr-more { grid-row: 3; margin: 10px 10px 12px 0; align-self: center; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-fig { grid-row: 4 / span 2; align-self: stretch; justify-content: flex-start; margin: 0; padding: 10px 12px 14px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .pr-more summary { justify-content: flex-end; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-deck { max-width: none; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-band { padding: 9px 10px 9px 12px; letter-spacing: 0.02em; white-space: normal; text-wrap: balance; min-width: 0; } /* r4 D-01: tighter tracking keeps 04's band on one line beside the dock lane */
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-x, .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-lane { grid-row: 7; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step:nth-child(n+5) > .fl-seek, .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step:nth-child(n+5) > .fl-disc { margin-top: 0; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step[data-step="4"] > .fl-wire { display: none; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-wire.pr-rev { top: 21px; left: calc(54px - 100%); right: calc(100% - 10px); transform-origin: right center; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-wire.pr-rev::after { right: auto; left: 1px; bottom: -3px; border: 0; border-left: 2px solid var(--h-line); border-bottom: 2px solid var(--h-line); }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .pr-rev > .fl-dots { transform: scaleX(-1); }
  /* motion: one dot per main connector travels continuously while the run plays (page script below); the kit's two-trip
     wire dots are kept for the narrow layouts only */
  .pr-kw:is([data-flow="prescription"],[data-flow="prescription"] *) { display: none; }
  .fl-dots[data-rail]:is([data-flow="prescription"],[data-flow="prescription"] *) { display: block; }
  .pr-turn:is([data-flow="prescription"],[data-flow="prescription"] *) { display: block; position: absolute; z-index: 1; left: 0; right: -12px; top: 20px; bottom: var(--pr-turn-b, -23px); pointer-events: none; }
  .pr-turn:is([data-flow="prescription"],[data-flow="prescription"] *) i { position: absolute; display: block; }
  .pr-t1:is([data-flow="prescription"],[data-flow="prescription"] *) { left: 66px; right: 12px; top: 0; height: 2px; background: var(--h-line); transform-origin: left center; }
  .pr-t2:is([data-flow="prescription"],[data-flow="prescription"] *) { right: 0; top: 0; bottom: 0; width: 14px; border: 2px solid var(--h-line); border-left: 0; border-radius: 0 12px 12px 0; transform-origin: center top; }
  .pr-t2:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-dots { left: auto; right: -5px; }
  .pr-t3:is([data-flow="prescription"],[data-flow="prescription"] *) { left: 66px; right: 12px; bottom: 0; height: 2px; background: var(--h-line); transform-origin: right center; }
  .pr-t3:is([data-flow="prescription"],[data-flow="prescription"] *)::after { content: ""; position: absolute; left: 1px; top: -3px; width: 8px; height: 8px; border-left: 2px solid var(--h-line); border-bottom: 2px solid var(--h-line); transform: rotate(45deg); }

  /* K12 (round 4) the made-visible rail is the hero mark. Under each chip row a full-opacity 6 px neutral track is there from
     frame 0; on each beat a 3 px blue stub drops from the chip, the blue eye pops on the chip and a 6 px blue segment fills
     the track to the next stage, a white dot travelling along it. Row one starts at a dot under chip 01 and ends in a ring
     under 04; row two starts under chip 05 and ends in one chevron into stage 08's blue catch. */
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-x { align-self: stretch; margin: 8px 0 30px; }
  .pr-tk:is([data-flow="prescription"],[data-flow="prescription"] *) { display: block; position: absolute; pointer-events: none; bottom: 10px; height: 6px; border-radius: 3px; background: var(--pr-track);
    left: 36px; right: calc(20px - 3 * (100% + 12px)); }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step[data-step="5"] .pr-tk { left: calc(100% - 27px - 3 * (100% + 12px)); right: 36px; }
  .pr-ln:is([data-flow="prescription"],[data-flow="prescription"] *) { display: block; position: absolute; pointer-events: none; background: var(--h-line); }
  .pr-s:is([data-flow="prescription"],[data-flow="prescription"] *) { left: 36px; bottom: 16px; width: 3px; height: 14px; transform-origin: bottom center; }
  .pr-s0:is([data-flow="prescription"],[data-flow="prescription"] *)::before { content: ""; position: absolute; left: -4.5px; bottom: -9px; width: 12px; height: 12px; border-radius: var(--radius-pin); background: var(--h-line); }
  .pr-b:is([data-flow="prescription"],[data-flow="prescription"] *) { bottom: 10px; height: 6px; left: 36px; right: -48px; border-radius: 3px; transform-origin: left center; }
  .pr-b:is([data-flow="prescription"],[data-flow="prescription"] *) > .fl-dots i { left: -5px; top: -2px; width: 10px; height: 10px; background: var(--fl-card); box-shadow: inset 0 0 0 2px var(--h-line); }
  .pr-b4:is([data-flow="prescription"],[data-flow="prescription"] *) { right: 20px; }
  .pr-end:is([data-flow="prescription"],[data-flow="prescription"] *) { right: 12px; bottom: 5px; width: 16px; height: 16px; border: 3px solid var(--h-line); border-radius: var(--radius-pin); background: var(--fl-card); transform-origin: center; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step:nth-child(n+5) .pr-s { left: auto; right: 36px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step:nth-child(n+5) .pr-s0::before { left: -4.5px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step:nth-child(n+5) .pr-b { left: -48px; right: 36px; transform-origin: right center; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step:nth-child(n+5) .pr-b > .fl-dots { transform: scaleX(-1); }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step[data-step="7"] .pr-b { left: -39px; }
  .pr-in:is([data-flow="prescription"],[data-flow="prescription"] *) { right: 24px; bottom: 16px; width: 3px; height: 7px; transform-origin: bottom center; }
  /* one chevron: a 9 px square turned 45 deg, its tip 3.86 px above the stub, 2-4 px short of chip 08 */
  .pr-in:is([data-flow="prescription"],[data-flow="prescription"] *)::before { content: ""; position: absolute; left: -3px; top: -2px; width: 9px; height: 9px; border: 0 solid var(--h-line); border-width: 3px 0 0 3px; transform: rotate(45deg); }

  /* K2 wide: the full account opens over its own card, from the card's top edge down, inside the card's column */
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card { overflow: visible; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card:has(> .pr-more[open]) { z-index: 4; }
  .pr-more:is([data-flow="prescription"],[data-flow="prescription"] *) { position: static; }
  .pr-more:is([data-flow="prescription"],[data-flow="prescription"] *) summary { position: relative; z-index: 4; }
  .pr-more[open]:is([data-flow="prescription"],[data-flow="prescription"] *) summary { position: absolute; top: 4px; right: 4px; }
  .pr-acc:is([data-flow="prescription"],[data-flow="prescription"] *) .pr-st { padding-right: 40px; min-height: 36px; display: flex; align-items: center; }
  .pr-acc:is([data-flow="prescription"],[data-flow="prescription"] *) { position: absolute; inset: 0; z-index: 3; align-content: start; padding: 4px 14px 14px; overflow: auto; overscroll-behavior: contain; background: var(--fl-card);
    border-top: 4px solid var(--h); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--rule); font-size: var(--size-fl-label); line-height: 1.4; }
  .pr-acc:is([data-flow="prescription"],[data-flow="prescription"] *) ul { gap: 6px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-x { margin-inline: 0; }
}
/* the control is the kit dock (QA r4 D-01): at every width it rides the stages sticky in thumb reach and steps up past a
   seek disc, a word or a mark, never hidden; its word stays in its accessible name (QA-008) */
@container fl (max-width: 1179px) {
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step > .fl-seek { position: relative; z-index: 3; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card:has(> .pr-more[open]) > .fl-did { display: none; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .pr-more[open] { grid-column: 1 / -1; margin-left: 16px; border-top: 1px solid var(--rule); }
  .pr-more[open]:is([data-flow="prescription"],[data-flow="prescription"] *) summary { justify-content: flex-start; }
  .pr-more[open]:is([data-flow="prescription"],[data-flow="prescription"] *) .pr-sl { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
/* D-05 tablet (720-1179): statement left, the measure box right, the "I ..." line under them; from 900 the chip sits
   beside its card */
@container fl (min-width: 720px) and (max-width: 1179px) {
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-steps { row-gap: 10px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 44px; column-gap: 16px; row-gap: 10px; padding-bottom: 12px; align-items: start; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-band { grid-column: 1 / -1; grid-row: 1; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-detail { grid-column: 1; grid-row: 2; margin-right: 0; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-fig { grid-column: 2 / -1; grid-row: 2; margin: 0 16px 0 0; padding: 8px 12px 10px; border: 1px solid color-mix(in srgb, var(--h-line) 45%, transparent); border-radius: var(--radius); }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-did { grid-column: 1 / 3; grid-row: 3; margin: 0 0 0 16px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .pr-more { grid-column: 3; grid-row: 3; margin: 0 16px 0 0; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .pr-more[open] { grid-column: 1 / -1; grid-row: 4; margin: 0 16px; }
}
@container fl (min-width: 900px) and (max-width: 1179px) {
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 13.5rem); column-gap: 12px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step > .fl-card { grid-column: 2; grid-row: 1; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step > .fl-x { grid-column: 3; grid-row: 1; align-self: start; margin-top: 52px; }
}
/* K5 phone: a 44 px rail carries each stage's disc (the seek control) and a 2 px wire with its chevron down to the next
   disc; beside it, in the 16 px gutter, the solid blue rail runs from chip 01 to stage 08's catch. Every card keeps its
   statement, its "I ..." line and its measure box at the foot (measure on its own line at 22 px); the 44 px "+" sits at
   the band's right end. */
@media (max-width: 807.98px) { .fl[data-flow]:is([data-flow="prescription"],[data-flow="prescription"] *) { column-gap: 16px; row-gap: 12px; } }
@container fl (max-width: 719px) {
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-steps { row-gap: 24px; margin-block: 4px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step { row-gap: 8px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-wire { bottom: var(--pr-wire-b, -20px); }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-disc { box-shadow: 0 0 0 3px var(--fl-card); }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding-bottom: 0; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > * { margin-inline: 12px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-band { margin: 0; padding: 8px 50px 8px 12px; min-height: 44px; align-items: center; letter-spacing: 0.03em; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-detail { line-height: 1.3; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-fig { display: block; margin: 4px 0 0; padding: 8px 12px 12px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-fig .pr-mb { margin: 0; line-height: 1.25; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-fig .fl-big { display: block; font-size: 1.375rem; line-height: 1.15; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-fig .fl-unit { display: block; margin-top: 2px; line-height: 1.3; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-fig :is(.pr-v, .pr-unlit) { display: block; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .fl-did { grid-column: 1; margin: 0 12px; font-size: var(--size-fl-label); line-height: 1.4; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .pr-more { grid-column: 1; margin: 0; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .pr-more:not([open]) { margin-top: -6px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .pr-more summary { position: absolute; top: 0; right: 2px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .pr-more .pr-pl { background: var(--fl-card); color: var(--h-ink); }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .pr-more[open] { margin: 0 12px; padding-top: 6px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-card > .pr-more[open] .pr-sl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step > .fl-x { display: block; padding: 6px 12px; line-height: 1.35; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step > .fl-x[data-hue="red"] { padding-right: 42px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step > .fl-x > .fl-xi { float: left; width: 22px; height: 22px; margin: 0 8px 0 0; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step > .fl-x > .fl-xi svg { width: 14px; height: 14px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step > .fl-x > .fl-xt, .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step > .fl-x > .fl-xd { display: inline; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step > .fl-x > .fl-xt::after { content: "\00A0\00B7\00A0" / ""; color: var(--ink-3); }
  .pr-eye:is([data-flow="prescription"],[data-flow="prescription"] *) { top: 50%; margin-top: -13px; right: 8px; width: 26px; height: 26px; }
  .pr-eye:is([data-flow="prescription"],[data-flow="prescription"] *) svg { width: 16px; height: 16px; }
  /* the rail: 3 px solid blue in the gutter (centre 8 px right of the rail), a stub into each red chip */
  .pr-nl:is([data-flow="prescription"],[data-flow="prescription"] *) { display: block; position: relative; grid-column: 1; grid-row: 1 / span 2; justify-self: end; width: 3px; margin: 0 -9.5px -24px 0;
    border-left: 3px solid var(--h-line); pointer-events: none; transform-origin: top center; }
  .pr-n1:is([data-flow="prescription"],[data-flow="prescription"] *) { grid-row: 2; align-self: end; height: calc(50% + 25.5px); }
  .pr-n1:is([data-flow="prescription"],[data-flow="prescription"] *)::before { content: ""; position: absolute; left: -7.5px; top: -6px; width: 12px; height: 12px; border-radius: var(--radius-pin); background: var(--h-line); }
  .pr-n8a:is([data-flow="prescription"],[data-flow="prescription"] *) { grid-row: 1; margin-bottom: -8px; }
  .pr-n8b:is([data-flow="prescription"],[data-flow="prescription"] *) { grid-row: 2; align-self: start; width: 7px; height: calc(50% + 1.5px); margin: 0 -13px 0 0; border-bottom: 3px solid var(--h-line); border-bottom-left-radius: 6px; }
  .pr-n8b:is([data-flow="prescription"],[data-flow="prescription"] *)::before { content: ""; position: absolute; right: -1px; bottom: -6px; width: 9px; height: 9px; border: 0 solid var(--h-line); border-width: 3px 3px 0 0; transform: rotate(45deg); }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-step > .fl-x[data-hue="red"]::before { content: ""; position: absolute; left: -10.5px; top: 50%; width: 6.5px; margin-top: -1.5px; border-top: 3px solid var(--fl-blue-line); }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-steps { padding-bottom: 0; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-tot { gap: 8px; margin-top: 12px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-tot > div { padding-top: 6px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-eye { letter-spacing: 0.03em; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-fine { line-height: 1.4; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-lh { margin-top: 2px; font-size: 1.125rem; }
  .pr-key:is([data-flow="prescription"],[data-flow="prescription"] *) { column-gap: 16px; row-gap: 4px; margin-top: 10px; }
  /* lane 83 (QA, reduced-motion reading): the key keeps its explanations on a phone; a wrapped item keeps its swatch on line one */
  .pr-key:is([data-flow="prescription"],[data-flow="prescription"] *) li { align-items: flex-start; }
  .pr-key:is([data-flow="prescription"],[data-flow="prescription"] *) [data-hue="red"] i { margin-top: 2px; }
  .pr-key:is([data-flow="prescription"],[data-flow="prescription"] *) [data-hue="blue"] i { margin-top: 7px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-ba { margin-top: 0; gap: 8px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-ba > div { display: block; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-ba .fl-tag { display: inline-block; margin-right: 8px; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-ba svg { display: inline-block; width: 64px; height: 12px; margin-right: 8px; vertical-align: middle; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-ba p { display: inline; }
  .fl:is([data-flow="prescription"],[data-flow="prescription"] *) .fl-take { gap: 10px; padding: 16px; }
  .pr-lanes:is([data-flow="prescription"],[data-flow="prescription"] *) { gap: 10px; margin-bottom: 12px; }
  .pr-lane:is([data-flow="prescription"],[data-flow="prescription"] *) > i { width: 22px; height: 22px; border-width: 2.5px; }
  .pr-lane[data-hue="blue"]:is([data-flow="prescription"],[data-flow="prescription"] *) > i { width: 28px; height: 28px; }
  .pr-lane[data-hue="blue"]:is([data-flow="prescription"],[data-flow="prescription"] *) > i svg { width: 18px; height: 18px; }
}
/* takeaway: 2 columns from a 640 px container */
@container fl (min-width: 640px) { .fl-take:is([data-flow="prescription"],[data-flow="prescription"] *) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 40px; padding: 28px 32px; } }
@media (forced-colors: active) { .pr-pl:is([data-flow="prescription"],[data-flow="prescription"] *), .pr-key:is([data-flow="prescription"],[data-flow="prescription"] *) i, .fl-dfill:is([data-flow="prescription"],[data-flow="prescription"] *), .pr-tk:is([data-flow="prescription"],[data-flow="prescription"] *), .pr-ln:is([data-flow="prescription"],[data-flow="prescription"] *), .pr-eye:is([data-flow="prescription"],[data-flow="prescription"] *), .pr-lane:is([data-flow="prescription"],[data-flow="prescription"] *) > i, .pr-lane:is([data-flow="prescription"],[data-flow="prescription"] *) > b { forced-color-adjust: none; } }
@media (prefers-reduced-motion: reduce) { .pr-pl:is([data-flow="prescription"],[data-flow="prescription"] *) svg { transition: none; } .pr-more:is([data-flow="prescription"],[data-flow="prescription"] *) summary:active .pr-pl { transform: none; } }

/* flow:punchout (page styles, scoped by freeze.cjs) */
/* Inter (variable, latin subset) by Rasmus Andersson, SIL Open Font License 1.1. Same file the live site serves. */


/* Page tokens (flows/v3/STANDARD.md §3). Site names first, then the flow palette the kit reads. */
[data-flow="punchout"] { --paper: #f4f5f7; --ink: #14171c; --ink-2: #3f444d; --ink-3: #5f6570; --rule: #d3d6dc; --accent: #1d4f9e; --contrast: #9c4a1a; --focus: 3px solid var(--accent); --focus-offset: 3px; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 0; --radius-pin: 50%; --shadow-1: 0 1px 2px rgb(20 23 28 / 0.08), 0 8px 24px rgb(20 23 28 / 0.08); --dur-press: 100ms; --dur-ui: 200ms; --dur-bar: 360ms; --dur-step: 600ms; --dur-map: 840ms; --flow-cycle: 3000ms; --hold-min: 1200ms; --ease: cubic-bezier(0.2, 0, 0, 1); --fl-cols: minmax(0,1.12fr) minmax(0,1.1fr) minmax(0,2.68fr) minmax(0,1fr) minmax(0,0.95fr); --fl-card: #ffffff; --fl-slab: #1b2230; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c0c5cd; --fl-gold: #b97c22; --fl-gold-on: #14171c; --fl-gold-ink: #7f5600; --fl-gold-tint: #fbf6ee; --fl-gold-line: #a8781f; --fl-gold-hi: #e2b955; --fl-violet: #8d43d6; --fl-violet-on: #ffffff; --fl-violet-ink: #7b34c4; --fl-violet-tint: #f4ecfb; --fl-violet-line: #8d43d6; --fl-violet-hi: #c3a6f2; --fl-red: #a3281e; --fl-red-on: #ffffff; --fl-red-ink: #a3281e; --fl-red-tint: #fbecea; --fl-red-line: #b3261e; --fl-red-hi: #f19a8f; --fl-blue: #1d4f9e; --fl-blue-on: #ffffff; --fl-blue-ink: #1d4f9e; --fl-blue-tint: #e8edf5; --fl-blue-line: #1d4f9e; --fl-blue-hi: #8db4f2; --fl-teal: #0b8452; --fl-teal-on: #ffffff; --fl-teal-ink: #0a6e45; --fl-teal-tint: #e6f3ec; --fl-teal-line: #0b8452; --fl-teal-hi: #7cc4b9; --fl-cyan: #0e7490; --fl-cyan-on: #ffffff; --fl-cyan-ink: #0e6a83; --fl-cyan-tint: #e5f3f6; --fl-cyan-line: #0e7490; --fl-cyan-hi: #7dd3e8; --fl-rose: #be185d; --fl-rose-on: #ffffff; --fl-rose-ink: #a8174f; --fl-rose-tint: #fcebf3; --fl-rose-line: #be185d; --fl-rose-hi: #f39cc6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-flow="punchout"] { --paper: #111318; --ink: #e9ebef; --ink-2: #c0c5cd; --ink-3: #969ca7; --rule: #30343b; --accent: #8db4f2; --contrast: #e0955f; --shadow-1: 0 0 0 1px var(--rule), 0 8px 24px rgb(0 0 0 / 0.6); --fl-card: #1a1d23; --fl-slab: #262d3a; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c8ccd4; --fl-gold: #b28b21; --fl-gold-on: #111318; --fl-gold-ink: #e2b955; --fl-gold-tint: #2e2316; --fl-gold-line: #b28b21; --fl-gold-hi: #e2b955; --fl-violet: #8250b8; --fl-violet-on: #ffffff; --fl-violet-ink: #c3a6f2; --fl-violet-tint: #241f30; --fl-violet-line: #9468cc; --fl-violet-hi: #c3a6f2; --fl-red: #c43d30; --fl-red-on: #ffffff; --fl-red-ink: #f19a8f; --fl-red-tint: #2c1c1c; --fl-red-line: #d0473a; --fl-red-hi: #f19a8f; --fl-blue: #4194f6; --fl-blue-on: #111318; --fl-blue-ink: #8db4f2; --fl-blue-tint: #1b2638; --fl-blue-line: #4194f6; --fl-blue-hi: #8db4f2; --fl-teal: #108068; --fl-teal-on: #ffffff; --fl-teal-ink: #7cc4b9; --fl-teal-tint: #16282a; --fl-teal-line: #10806c; --fl-teal-hi: #7cc4b9; --fl-cyan: #2a9fbd; --fl-cyan-on: #111318; --fl-cyan-ink: #7dd3e8; --fl-cyan-tint: #15272d; --fl-cyan-line: #2a9fbd; --fl-cyan-hi: #7dd3e8; --fl-rose: #d6528f; --fl-rose-on: #111318; --fl-rose-ink: #f39cc6; --fl-rose-tint: #2e1b25; --fl-rose-line: #d6528f; --fl-rose-hi: #f39cc6; }
}
:root[data-theme="dark"] [data-flow="punchout"] { --paper: #111318; --ink: #e9ebef; --ink-2: #c0c5cd; --ink-3: #969ca7; --rule: #30343b; --accent: #8db4f2; --contrast: #e0955f; --shadow-1: 0 0 0 1px var(--rule), 0 8px 24px rgb(0 0 0 / 0.6); --fl-card: #1a1d23; --fl-slab: #262d3a; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c8ccd4; --fl-gold: #b28b21; --fl-gold-on: #111318; --fl-gold-ink: #e2b955; --fl-gold-tint: #2e2316; --fl-gold-line: #b28b21; --fl-gold-hi: #e2b955; --fl-violet: #8250b8; --fl-violet-on: #ffffff; --fl-violet-ink: #c3a6f2; --fl-violet-tint: #241f30; --fl-violet-line: #9468cc; --fl-violet-hi: #c3a6f2; --fl-red: #c43d30; --fl-red-on: #ffffff; --fl-red-ink: #f19a8f; --fl-red-tint: #2c1c1c; --fl-red-line: #d0473a; --fl-red-hi: #f19a8f; --fl-blue: #4194f6; --fl-blue-on: #111318; --fl-blue-ink: #8db4f2; --fl-blue-tint: #1b2638; --fl-blue-line: #4194f6; --fl-blue-hi: #8db4f2; --fl-teal: #108068; --fl-teal-on: #ffffff; --fl-teal-ink: #7cc4b9; --fl-teal-tint: #16282a; --fl-teal-line: #10806c; --fl-teal-hi: #7cc4b9; --fl-cyan: #2a9fbd; --fl-cyan-on: #111318; --fl-cyan-ink: #7dd3e8; --fl-cyan-tint: #15272d; --fl-cyan-line: #2a9fbd; --fl-cyan-hi: #7dd3e8; --fl-rose: #d6528f; --fl-rose-on: #111318; --fl-rose-ink: #f39cc6; --fl-rose-tint: #2e1b25; --fl-rose-line: #d6528f; --fl-rose-hi: #f39cc6; }
*:is([data-flow="punchout"],[data-flow="punchout"] *), *:is([data-flow="punchout"],[data-flow="punchout"] *)::before, *:is([data-flow="punchout"],[data-flow="punchout"] *)::after { box-sizing: border-box; }


.page:is([data-flow="punchout"],[data-flow="punchout"] *) { max-width: 1440px; margin: 0 auto; padding: 16px; }
.frame:is([data-flow="punchout"],[data-flow="punchout"] *) { background: var(--fl-card); border-radius: 20px; padding: 28px; }
/* r4 D-01: the wide dock lane reaches 20 px into the frame's 28 px padding, 8 px in from its edge */
@media (min-width: 1180px) { .fl[data-flow]:is([data-flow="punchout"],[data-flow="punchout"] *) { --fl-dock-out: 20px; } }
/* a 1280 window: a slimmer page inset and frame padding give the five columns back the dock lane's width; the lane
   then takes 12 of the 20 px padding, still 8 px in from the frame edge */
@media (min-width: 1180px) and (max-width: 1339px) { .page:is([data-flow="punchout"],[data-flow="punchout"] *) { padding: 12px; } .frame:is([data-flow="punchout"],[data-flow="punchout"] *) { padding: 24px 20px; } .fl[data-flow]:is([data-flow="punchout"],[data-flow="punchout"] *) { --fl-dock-out: 12px; } }
.eyebrow:is([data-flow="punchout"],[data-flow="punchout"] *) { margin: 0 0 12px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 719px) { .page:is([data-flow="punchout"],[data-flow="punchout"] *) { padding: 0; } .frame:is([data-flow="punchout"],[data-flow="punchout"] *) { border-radius: 0; padding: 20px 16px 20px; } }
/* Font gate: the page stays hidden for the few ms the embedded Inter takes to decode, so the swap never shifts layout
   (cold-load CLS 0). Only set by the inline script below; no script, no gate. A 1.5 s fail-safe lifts it anyway. */
.fl-hold:is([data-flow="punchout"],[data-flow="punchout"] *) body { visibility: hidden; }

/* Shared page-local overrides carried from the claims reference (logged in KIT-REQUESTS.md as K0). */
/* Unlit state (F-03): no slot, skeleton or ghost anywhere. Every word, icon and node is laid out at full ink from the
   first frame on a half-strength tint; on its beat only the lit marks arrive, by transform: the full tint wash
   (opacity), the 4 px meter, the solid disc fill, the white lane and answer grounds, the chip grounds, the bar fill,
   the x and check discs, wires and dots. Nothing waits as an empty box. */
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card { position: relative; isolation: isolate; background: color-mix(in srgb, var(--h-tint) 55%, var(--fl-card)); }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .fl-wash, .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .fl-meter { position: absolute; margin: 0; pointer-events: none; }
.fl-wash:is([data-flow="punchout"],[data-flow="punchout"] *) { inset: 0; z-index: -1; background: var(--h-tint); }
.fl-meter:is([data-flow="punchout"],[data-flow="punchout"] *) { left: 0; right: 0; bottom: 0; height: 4px; background: var(--h); transform-origin: left center; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-x, .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-lab { transform-origin: top center; }
/* Discs (D-04, F-17): the unlit disc is a full-opacity ring (2 px --h border, --h-tint ground, --h-ink icon); on its beat
   the solid --h disc with its --h-on icon pops over it by scale 0 -> 1 (outer layer scaleX, inner scaleY, the fill on the inner layer so it grows on both axes). */
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-disc { border-color: var(--h); }
.pc-df:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-df:is([data-flow="punchout"],[data-flow="punchout"] *) > i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--radius-pin); transform-origin: center; }
.pc-df:is([data-flow="punchout"],[data-flow="punchout"] *) { inset: -2px; }
.pc-df:is([data-flow="punchout"],[data-flow="punchout"] *) > i { background: var(--h); color: var(--h-on); }
/* Chips: icon and words at full ink from frame 0; only the tint ground and border unfold (scaleY) on the beat, so the
   chip row is never a blank band and never a shell (D-01, QA exception row). */
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-x { isolation: isolate; background: none; border-color: transparent; }
.pc-xg:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; inset: -2px; z-index: -1; background: var(--h-tint); border: 2px dashed var(--h-line); border-radius: var(--radius); transform-origin: top center; pointer-events: none; }
.fl-x[data-solid]:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-xg { border-style: solid; }
/* the rail discs are seek controls: a hue slot behind each ghosted disc, and on hover the disc grows to 1.06 (the
   scale property, so it composes with the kit's pop transform) and a 14 px step-name chip appears (the name comes from the stage heading, set by the script at the end of the page) */
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-seek { position: relative; z-index: 3; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-seek::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-pin); background: var(--h-tint); box-shadow: inset 0 0 0 2px var(--h-line); }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-seek .fl-disc { transition: scale var(--dur-ui) var(--ease); }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-seek::after { content: attr(data-tip); position: absolute; z-index: 2; left: calc(100% + 8px); top: 50%; padding: 2px 10px; border-radius: 999px; background: var(--h); color: var(--h-on);
  font-size: var(--size-fl-label); font-weight: 600; line-height: 1.5; letter-spacing: 0; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-4px, -50%);
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease); }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-seek:not([data-tip])::after { display: none; }
@media (hover: hover) {
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-seek:hover::after { opacity: 1; transform: translate(0, -50%); }
}
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-seek:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
@container fl (min-width: 1180px) {
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-seek::after { left: 50%; top: auto; bottom: calc(100% + 6px); transform: translate(-50%, 4px); }
  @media (hover: hover) { .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-seek:hover::after { transform: translate(-50%, 0); } }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-seek:focus-visible::after { transform: translate(-50%, 0); }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-fix { border-radius: 2px; }
  .fl-out:is([data-flow="punchout"],[data-flow="punchout"] *) { left: calc(100% + 2px); width: 12px; }
  .fl-run:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-fix::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 9px; height: 9px; border-top: 3px solid var(--h); border-right: 3px solid var(--h); transform: rotate(45deg); }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .fl-fig { align-self: stretch; justify-content: center; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) [data-hero] .fl-big { font-size: var(--size-fl-hero); }
}
@container fl (min-width: 640px) {
  .fl-take:is([data-flow="punchout"],[data-flow="punchout"] *) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 32px; padding: 28px 32px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-tot { align-self: start; }
}
@container fl (max-width: 719px) {
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-ba { margin-top: 12px; gap: 10px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-tot { gap: 8px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-take { gap: 12px; }
}
@container fl (max-width: 1179px) {
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-ba > div { grid-template-columns: auto 88px minmax(0, 1fr); }
}
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-tot dt, .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-tot dd small { text-wrap: pretty; }

/* takeaway totals (D-06): the real figure leads at 2x the second total, and from a 1180 px container the two stack in
   the right column from the top of the slab, so the lead sits level with the heading and no quarter of the slab is empty */
/* D-06: the lead total takes the hero size (no new type size), about 2x the second total */
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-tot .pc-lead dd { font-size: var(--size-fl-hero); line-height: 1; }
@container fl (min-width: 1180px) { .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-tot { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-fnm, .pc-fm:is([data-flow="punchout"],[data-flow="punchout"] *) { margin-left: 2px; font-size: var(--size-fl-label); font-weight: 700; line-height: 1; vertical-align: super; color: var(--h-ink, var(--ink-2)); }
.pc-fm:is([data-flow="punchout"],[data-flow="punchout"] *) { margin: 0 4px 0 0; color: var(--ink-2); }
/* D-07: the note mark keeps its small raised "1" but its hit area is 24x24 (WCAG 2.5.8); the negative block margins keep
   the dt line box unchanged and the negative start margin keeps the mark close to its word */
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-fnm { display: inline-block; min-width: 24px; min-height: 24px; margin: -8px -4px -8px -4px; line-height: 24px; text-align: center; vertical-align: top; text-decoration: none; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-fnm:focus-visible { outline: var(--focus); outline-offset: 2px; }
/* K22 card 01: Price lock is a detail on demand behind a '+' (density: headline, one visual, one "I" line). The 44 px
   summary sits at the right of the detail row; open, the chip lays over the round trip as a solid card. */
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .pc-more { position: absolute; z-index: 3; top: var(--pc-mt, 48px); right: 0; left: 0; margin: 0; pointer-events: none; }
.pc-more:is([data-flow="punchout"],[data-flow="punchout"] *) summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; list-style: none; cursor: pointer; pointer-events: auto; border-radius: var(--radius-pin); }
.pc-more:is([data-flow="punchout"],[data-flow="punchout"] *) summary::-webkit-details-marker { display: none; }
.pc-pl:is([data-flow="punchout"],[data-flow="punchout"] *) { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pin); background: var(--fl-card); color: var(--h-ink); box-shadow: inset 0 0 0 2px var(--h-line); }
.pc-pl:is([data-flow="punchout"],[data-flow="punchout"] *) svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; transition: transform var(--dur-ui) var(--ease); }
.pc-more[open]:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-pl { background: var(--h); color: var(--h-on); box-shadow: none; }
.pc-more[open]:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-pl svg { transform: rotate(45deg); }
.pc-more:is([data-flow="punchout"],[data-flow="punchout"] *) summary:focus-visible { outline: var(--focus); outline-offset: -4px; }
.pc-more:is([data-flow="punchout"],[data-flow="punchout"] *) summary:active .pc-pl { transform: scale(0.96); }
@media (hover: hover) { .pc-more:is([data-flow="punchout"],[data-flow="punchout"] *) summary:hover .pc-pl { box-shadow: inset 0 0 0 2px var(--h-line), 0 0 0 3px color-mix(in srgb, var(--h) 30%, transparent); } }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-more > .fl-x { pointer-events: auto; margin: 0 12px; background: var(--fl-card); border: 2px solid var(--h-line); box-shadow: 0 6px 16px rgb(0 0 0 / 0.12); }
.pc-credit:is([data-flow="punchout"],[data-flow="punchout"] *) { grid-column: 1 / -1; margin: -8px 0 0; /* L1: inside the figure grid, 16 px under the source line */ font-size: 0.875rem; line-height: 1.45; color: var(--ink-3); }

/* Figure tiles. The two real figures are heroes (white tile, hue number); the three word tiles are statements with a
   hue edge and no white ground, so a word never sits in a number's slot (D-04). */
.pc-sr:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-big small { margin-right: 4px; font-size: var(--size-fl-label); font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) [data-hero] .fl-big small { display: block; margin: 0 0 2px; line-height: 1.2; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-fig[data-say] { gap: 4px; padding: 10px 4px 10px 14px; background: none; border-left: 4px solid var(--h); border-radius: 0; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-fig[data-say] .fl-big { font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
@container fl (min-width: 720px) { .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-fig[data-say] .fl-big { font-size: 1.25rem; } }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-mg { width: 1.25em; height: 0.8em; margin: 0 0.1em; vertical-align: 0.02em; color: var(--h); }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-mg path { stroke-width: 2.5; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-nw { white-space: nowrap; }

/* K1 round trip (stage 01): three nodes down, then the cart returns up the bracket for approval, price lock on the return */
.pc-rt:is([data-flow="punchout"],[data-flow="punchout"] *) { display: grid; row-gap: 18px; margin: 0; padding: 0 0 0 20px; list-style: none; }
.pc-rt:is([data-flow="punchout"],[data-flow="punchout"] *) > li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: center; height: 40px; font-weight: 600; color: var(--ink); }
.pc-end:is([data-flow="punchout"],[data-flow="punchout"] *) { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pin); background: var(--fl-card); color: var(--h-ink); box-shadow: inset 0 0 0 2px var(--h-line); }
.pc-end:is([data-flow="punchout"],[data-flow="punchout"] *) svg { width: 20px; height: 20px; }
.pc-dn:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; left: 17px; top: 39px; width: 2px; height: 20px; background: var(--h-line); transform-origin: center top; }
.pc-dn:is([data-flow="punchout"],[data-flow="punchout"] *)::after { content: ""; position: absolute; left: -3px; bottom: 1px; width: 8px; height: 8px; border-right: 2px solid var(--h-line); border-bottom: 2px solid var(--h-line); transform: rotate(45deg); }
.pc-rp:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; left: -14px; top: 19px; width: 12px; height: 118px; border: 2px solid var(--h-line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); transform-origin: center bottom; }
.pc-rp:is([data-flow="punchout"],[data-flow="punchout"] *)::after { content: ""; position: absolute; right: -1px; top: -5px; width: 8px; height: 8px; border-top: 2px solid var(--h-line); border-right: 2px solid var(--h-line); transform: rotate(45deg); }
.pc-rv:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; left: -14px; top: 19px; width: 2px; height: 118px; }
.pc-rf:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; inset: 0; transform: scaleY(-1); }
.pc-lk:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; left: -25px; top: 66px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pin); background: var(--h-ink); color: var(--fl-card); }
.pc-lk:is([data-flow="punchout"],[data-flow="punchout"] *) svg { width: 14px; height: 14px; }
.pc-lk:is([data-flow="punchout"],[data-flow="punchout"] *) > i { display: grid; place-items: center; }

/* K6 diagnosis (stage 02, K6 doc and build agree): Connected is a full bar; Buying is a short solid red stub with a
   dashed red gap filling the rest of the same length, "too few" inside the gap. Schematic: no number, no ratio claimed.
   Both bars stand on a 2 px full-ink track from frame 0 and their fills draw over it; "too few" pulses once. */
.pc-bars:is([data-flow="punchout"],[data-flow="punchout"] *) { display: grid; gap: 4px; }
.pc-bl:is([data-flow="punchout"],[data-flow="punchout"] *) { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.pc-bl:is([data-flow="punchout"],[data-flow="punchout"] *) svg { width: 16px; height: 16px; color: var(--h-ink); }
.pc-bar:is([data-flow="punchout"],[data-flow="punchout"] *) { display: flex; height: 28px; border-radius: 6px; background: linear-gradient(var(--h-line), var(--h-line)) left center / 100% 2px no-repeat; }
.pc-bar:is([data-flow="punchout"],[data-flow="punchout"] *) i { display: block; flex: 1; border-radius: 6px; background: var(--h-line); transform-origin: left center; }
.pc-fn:is([data-flow="punchout"],[data-flow="punchout"] *) { display: flex; align-items: center; gap: 6px; height: 28px; padding-left: 8px; color: var(--fl-red-ink); }
.pc-fn:is([data-flow="punchout"],[data-flow="punchout"] *) svg { width: 18px; height: 18px; }
.pc-few:is([data-flow="punchout"],[data-flow="punchout"] *) { gap: 3px; height: 32px; background: none; }
.pc-few:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-stub { flex: 0 0 16%; background: var(--fl-red-line); border-radius: 6px 0 0 6px; }
.pc-few:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-gap { display: grid; place-items: center; flex: 1; background: var(--fl-red-tint); border: 2px dashed var(--fl-red-line); border-radius: 0 6px 6px 0; color: var(--fl-red-ink); font-style: normal; font-weight: 700; white-space: nowrap; }

/* K2 five lever lanes (stage 03). No slot (D-01, D-02): each lane's icon, name, change and measure pill are laid out
   at full ink from frame 0; on its beat the white lane ground with its 4 px blue edge draws in from the left under the
   words (.pc-lg, scaleX) and the icon pulses. A left branch spine joins the lanes. */
.pc-lv:is([data-flow="punchout"],[data-flow="punchout"] *) { position: relative; padding-left: 24px; --pc-y: 19px; }
.pc-lanes:is([data-flow="punchout"],[data-flow="punchout"] *) { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pc-ln:is([data-flow="punchout"],[data-flow="punchout"] *) { position: relative; }
.pc-lc:is([data-flow="punchout"],[data-flow="punchout"] *) { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "ic nm ms" "ic ch ch"; column-gap: 10px; row-gap: 2px; align-items: start;
  position: relative; isolation: isolate; padding: 6px 8px 7px 8px; border-left: 4px solid transparent; border-radius: var(--radius); color: var(--ink); }
.pc-lg:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; inset: 0 0 0 -4px; z-index: -1; background: var(--fl-card); border-left: 4px solid var(--h); border-radius: var(--radius); transform-origin: left center; pointer-events: none; }
.pc-ic:is([data-flow="punchout"],[data-flow="punchout"] *) { grid-area: ic; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pin); background: var(--h); color: var(--h-on); }
.pc-ic:is([data-flow="punchout"],[data-flow="punchout"] *) svg { width: 16px; height: 16px; }
.pc-nm:is([data-flow="punchout"],[data-flow="punchout"] *) { grid-area: nm; align-self: center; font-weight: 600; color: var(--h-ink); }
.pc-ch:is([data-flow="punchout"],[data-flow="punchout"] *) { grid-area: ch; text-wrap: pretty; }
.pc-tx:is([data-flow="punchout"],[data-flow="punchout"] *) { text-wrap: pretty; }
.pc-ms:is([data-flow="punchout"],[data-flow="punchout"] *) { grid-area: ms; justify-self: end; display: inline-flex; gap: 5px; align-items: center; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--h-tint); color: var(--h-ink); font-weight: 600; white-space: nowrap; }
.pc-ms:is([data-flow="punchout"],[data-flow="punchout"] *) svg { width: 15px; height: 15px; }
.pc-ln:is([data-flow="punchout"],[data-flow="punchout"] *)::before { content: ""; position: absolute; left: -18px; top: -6px; bottom: -6px; border-left: 2px solid var(--h-line); }
.pc-ln:first-child:is([data-flow="punchout"],[data-flow="punchout"] *)::before { top: var(--pc-y); }
.pc-ln:last-child:is([data-flow="punchout"],[data-flow="punchout"] *)::before { bottom: auto; height: calc(var(--pc-y) + 8px); }
.pc-ln:is([data-flow="punchout"],[data-flow="punchout"] *)::after { content: ""; position: absolute; left: -18px; top: calc(var(--pc-y) + 2px); width: 14px; border-top: 2px solid var(--h-line); }
.pc-in:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-cx:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-bun:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-bd:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-bq:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-mu:is([data-flow="punchout"],[data-flow="punchout"] *) { display: none; }
/* K20 lever hues: each lever row carries its own hue on its left edge, icon, name and measure (QA r2 card 03). Rose is
   page-local (the kit has no rose hue); the branch spine stays the blue of stage 03 and only the stubs take the lane hue. */
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) [data-hue="rose"] { --h: var(--fl-rose); --h-on: var(--fl-rose-on); --h-ink: var(--fl-rose-ink); --h-tint: var(--fl-rose-tint); --h-line: var(--fl-rose-line); --h-hi: var(--fl-rose-hi); }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ln::before { border-left-color: var(--fl-blue-line); }
/* lane marks (edge, icon disc, connector, chip edge) take the hue's line value, which holds >= 3:1 on the stage-03 tint
   in both schemes (gold light and violet dark fall short at full --h) */
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ln[data-hue] { --h: var(--h-line); }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ms { gap: 6px; padding: 4px 12px 4px 9px; font-size: var(--size-fl-body); }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ms svg { width: 18px; height: 18px; }
.pc-mc:is([data-flow="punchout"],[data-flow="punchout"] *) { display: contents; }

/* K3 the target ring (stage 04): one adoption target, ringed by the weekly review; it is the destination, so it is the
   largest mark in the row (D-05). It pops when the levers arrive and pulses once when the merged dot lands. */
.pc-tg:is([data-flow="punchout"],[data-flow="punchout"] *) { position: relative; display: block; }
.pc-tw:is([data-flow="punchout"],[data-flow="punchout"] *) { display: flex; align-items: center; gap: 16px; }
.pc-tw:is([data-flow="punchout"],[data-flow="punchout"] *) > .fl-fig { flex: 1 1 0; min-width: 0; margin: 0; }
.pc-tw:is([data-flow="punchout"],[data-flow="punchout"] *) > .pc-ring { flex: none; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ring { display: block; width: 112px; height: 116px; color: var(--h); }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ring .w { fill: var(--fl-card); }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ring .s { fill: currentColor; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ring .pc-on { stroke: var(--h-on); }

/* K9 the lesson rows (stage 05): a single checklist at every width. The four labels are at full ink from frame 0, each
   behind a small gold bullet; on the stage-5 beat a grey x disc pops over the bullet of each false signal in turn, and
   on the last beat the answer row's white ground and gold edge draw in and its gold check disc lands (no ghost rows). */
.pc-ls:is([data-flow="punchout"],[data-flow="punchout"] *) { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pc-lr:is([data-flow="punchout"],[data-flow="punchout"] *) { position: relative; isolation: isolate; display: flex; align-items: flex-start; gap: 8px; padding: 5px 8px; border-radius: 8px; }
.pc-lr:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-lg { inset: 0; border-left: 0; border-radius: 8px; box-shadow: inset 4px 0 0 var(--h); }
.pc-mk:is([data-flow="punchout"],[data-flow="punchout"] *) { position: relative; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; }
.pc-mk:is([data-flow="punchout"],[data-flow="punchout"] *)::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pin); background: var(--h); }
.pc-mk:is([data-flow="punchout"],[data-flow="punchout"] *) > i, .pc-mk:is([data-flow="punchout"],[data-flow="punchout"] *) > i > i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--radius-pin); transform-origin: center; }
.pc-mk:is([data-flow="punchout"],[data-flow="punchout"] *) > i > i { background: var(--ink-3); color: var(--fl-card); }
.pc-mk:is([data-flow="punchout"],[data-flow="punchout"] *) svg { width: 12px; height: 12px; }
.pc-mk:is([data-flow="punchout"],[data-flow="punchout"] *) svg path { stroke-width: 3; }
.pc-ls:is([data-flow="punchout"],[data-flow="punchout"] *) [data-v="no"] .pc-lr { color: var(--ink-2); }
.pc-ls:is([data-flow="punchout"],[data-flow="punchout"] *) [data-v="yes"] .pc-lr { color: var(--ink); font-weight: 600; }
.pc-ls:is([data-flow="punchout"],[data-flow="punchout"] *) [data-v="yes"] .pc-mk > i > i { background: var(--h); color: var(--h-on); }

/* <1180: five lanes converge into the 5 -> 1 tile below them (QA phone 03), and the recovery follows the miss straight
   away, joined by a labelled blue down-arrow (D-05, QA narrow link). Wide keeps its own spines and lane run. */
.pc-fan:is([data-flow="punchout"],[data-flow="punchout"] *) { position: relative; display: block; height: 26px; margin: 2px 0 -10px; color: var(--h-line); }
.pc-fan:is([data-flow="punchout"],[data-flow="punchout"] *) svg { display: block; width: 100%; height: 18px; transform-origin: center top; }
.pc-fan:is([data-flow="punchout"],[data-flow="punchout"] *) path { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.pc-fh:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; left: calc(50% - 1px); top: 17px; width: 2px; height: 9px; background: currentColor; transform-origin: center top; }
.pc-fh:is([data-flow="punchout"],[data-flow="punchout"] *)::after { content: ""; position: absolute; left: -3px; bottom: 0; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.pc-fh:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-dots i { left: -4px; }
@container fl (min-width: 1180px) { .pc-fan:is([data-flow="punchout"],[data-flow="punchout"] *) { display: none; } }

@container fl (max-width: 719px) {
  /* K7 phone: the branch spine folds away; each lane keeps a hanging indent (icon column, text column): name and
     change on lines 1-2, the measure on its own line as a small pill. Bars carry side labels. */
  .pc-rt:is([data-flow="punchout"],[data-flow="punchout"] *) { row-gap: 10px; }
  .pc-rt:is([data-flow="punchout"],[data-flow="punchout"] *) > li { height: 32px; grid-template-columns: 32px minmax(0, 1fr); }
  .pc-end:is([data-flow="punchout"],[data-flow="punchout"] *) { width: 32px; height: 32px; }
  .pc-dn:is([data-flow="punchout"],[data-flow="punchout"] *) { left: 15px; top: 31px; height: 10px; }
  .pc-dn:is([data-flow="punchout"],[data-flow="punchout"] *)::after { width: 6px; height: 6px; left: -2px; }
  .pc-rp:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-rv:is([data-flow="punchout"],[data-flow="punchout"] *) { top: 15px; height: 84px; }
  .pc-lk:is([data-flow="punchout"],[data-flow="punchout"] *) { top: 46px; }
  .pc-lv:is([data-flow="punchout"],[data-flow="punchout"] *) { padding-left: 0; }
  .pc-ln:is([data-flow="punchout"],[data-flow="punchout"] *)::before, .pc-ln:is([data-flow="punchout"],[data-flow="punchout"] *)::after { display: none; }
  .pc-lanes:is([data-flow="punchout"],[data-flow="punchout"] *) { gap: 6px; }
  .pc-lc:is([data-flow="punchout"],[data-flow="punchout"] *) { grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "ic tx" ". ms"; column-gap: 8px; row-gap: 4px; padding: 6px 8px 7px 6px; }
  .pc-ic:is([data-flow="punchout"],[data-flow="punchout"] *) { width: 22px; height: 22px; }
  .pc-ic:is([data-flow="punchout"],[data-flow="punchout"] *) svg { width: 13px; height: 13px; }
  .pc-tx:is([data-flow="punchout"],[data-flow="punchout"] *) { grid-area: tx; }
  .pc-nm:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-ch:is([data-flow="punchout"],[data-flow="punchout"] *) { display: inline; }
  .pc-ms:is([data-flow="punchout"],[data-flow="punchout"] *) { justify-self: start; white-space: normal; padding: 1px 8px 1px 6px; border-radius: 8px; }
  .pc-bar:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-few:is([data-flow="punchout"],[data-flow="punchout"] *) { height: 24px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ring { width: 92px; height: 96px; }
  .pc-lr:is([data-flow="punchout"],[data-flow="punchout"] *) { padding: 3px 6px; }
  /* phone compaction (page height): hero tiles read across, lanes and pills tighten, totals stack */
  .pc-lanes:is([data-flow="punchout"],[data-flow="punchout"] *) { gap: 4px; }
  .pc-lc:is([data-flow="punchout"],[data-flow="punchout"] *) { row-gap: 3px; padding: 5px 6px 6px; }
  .pc-ms:is([data-flow="punchout"],[data-flow="punchout"] *) { gap: 4px; padding: 0 7px 0 5px; }
  .pc-ms:is([data-flow="punchout"],[data-flow="punchout"] *) svg { width: 12px; height: 12px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-tot > div { display: flex; flex-direction: column; }
  .pc-lanes:is([data-flow="punchout"],[data-flow="punchout"] *) { margin-inline: -8px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-step[data-step="3"] .fl-card > .fl-fig { gap: 10px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-step[data-step="3"] .fl-card > .fl-fig .fl-big { font-size: 2.25rem; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-fig[data-say] { padding-block: 4px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .fl-fig[data-hero] { padding-block: 8px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-take { padding-block: 18px; }
  .pc-ls:is([data-flow="punchout"],[data-flow="punchout"] *) { gap: 4px; }
  .pc-lr:is([data-flow="punchout"],[data-flow="punchout"] *) { padding: 2px 6px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-x { padding-block: 7px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-steps { row-gap: 10px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-tot > div { padding-top: 6px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-ba > div { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: start; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-ba svg { grid-row: 2; grid-column: 1; width: 64px; height: 12px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-ba p { grid-column: 2; grid-row: 1 / span 2; }
}
@container fl (min-width: 720px) {
  .pc-tx:is([data-flow="punchout"],[data-flow="punchout"] *) { display: contents; }
}

/* below the five-column row: hero tiles read across (number, then unit), bars carry side labels, totals stack */
@container fl (max-width: 1179px) {
  /* the ring sits beside its "One target" tile, so card 04 has no empty band (and 375 stays <= 3000 px) */
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .fl-fig[data-hero] { flex-direction: row; align-items: last baseline; gap: 14px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .fl-fig[data-hero] .fl-big { flex: none; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .fl-fig[data-hero] .fl-unit { flex: 1 1 0; min-width: 0; text-wrap: balance; }
  .pc-bars:is([data-flow="punchout"],[data-flow="punchout"] *) { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 6px; }
  .pc-fn:is([data-flow="punchout"],[data-flow="punchout"] *) { display: none; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-tot { grid-template-columns: minmax(0, 1fr); }
}
@container fl (min-width: 560px) and (max-width: 719px) {
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ring { width: 128px; height: 133px; }
}
@container fl (min-width: 720px) and (max-width: 1179px) {
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ring { width: 136px; height: 141px; }
}

/* §4 wide (container 1180 and up). One row of five stages. K21 signature visual (QA r2, owner origins-bracket reference):
   card 03 lists the five levers, each in its own hue; each lever's measure is a white KPI chip that lands in card 04's
   tint, and the five chips converge by nested brackets (no crossings, outer lanes turn nearest the target) on one
   small target box. Card 03's 5 -> 1 tile and fan are the narrow form of the same idea, so they fold away here. */
@container fl (min-width: 1180px) {
  /* r4 D-01: the dock lane takes its width from the row; columns 01, 02 and 05 keep their two-line statements by taking
     it from the measure column, and --pc-a is the steps' width less the dock lane */
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-steps { --fl-cols: minmax(0,1.47fr) minmax(0,1.35fr) minmax(0,2.55fr) minmax(0,2.58fr) minmax(0,1.45fr);
    --pc-a: calc(100cqi - 48px - var(--fl-dock-lane, 52px) + var(--fl-dock-out, 0px)); --pc-t: 9.4; --pc-w4: calc(var(--pc-a) * 2.58 / var(--pc-t)); --pc-w5: calc(var(--pc-a) * 1.45 / var(--pc-t));
    --pc-cw: calc((var(--pc-w4) - 32px) * 0.58); margin-top: 0; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .fl-viz { align-self: center; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .fl-did { align-self: start; }
  .pc-rt:is([data-flow="punchout"],[data-flow="punchout"] *) { row-gap: 22px; }
  .pc-rt:is([data-flow="punchout"],[data-flow="punchout"] *) > li { height: 44px; }
  .pc-dn:is([data-flow="punchout"],[data-flow="punchout"] *) { top: 41px; height: 24px; }
  .pc-rp:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-rv:is([data-flow="punchout"],[data-flow="punchout"] *) { top: 21px; height: 132px; }
  .pc-lk:is([data-flow="punchout"],[data-flow="punchout"] *) { top: 75px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-step[data-step="3"] .fl-card { z-index: 1; overflow: visible; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-step[data-step="3"] .fl-band { border-radius: var(--radius) var(--radius) 0 0; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-step[data-step="3"] .fl-card > .fl-viz { grid-row: 3 / span 2; align-self: start; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-step[data-step="3"] .fl-card > .fl-fig { display: none; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-step[data-step="3"] .fl-card > .fl-did { grid-row: 5; }
  .pc-lv:is([data-flow="punchout"],[data-flow="punchout"] *) { padding-right: 0; }
  .pc-lc:is([data-flow="punchout"],[data-flow="punchout"] *) { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "ic nm" "ic ch"; }
  /* the measure leaves its lane as a KPI chip in card 04's tint, joined by a lane-hue connector */
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ms { position: absolute; z-index: 2; left: calc(100% + 44px); top: 0; bottom: 0; width: var(--pc-cw); display: flex; align-items: stretch;
    padding: 0; background: none; border-radius: 0; white-space: normal; }
  .pc-mc:is([data-flow="punchout"],[data-flow="punchout"] *) { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 10px 4px 8px; background: var(--fl-card); border-left: 4px solid var(--h);
    border-radius: var(--radius); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h-line) 35%, transparent); color: var(--h-ink); line-height: 1.25; text-wrap: balance; transform-origin: left center; }
  .pc-mc:is([data-flow="punchout"],[data-flow="punchout"] *) svg { display: none; }
  /* D-06 r4: card 04 reads complete from frame 0. While motion runs each measure chip has an unlit copy under it
     (ink-3 words, faint lane edge); the lit chip fades in over its copy on the beat (FM-06). Brackets have no faint
     track: each exists only once drawn (FM-04) */
  .pc-mu:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; inset: 0; z-index: -1; display: flex; align-items: center; padding: 4px 10px 4px 8px; background: var(--fl-card);
    border-left: 4px solid color-mix(in srgb, var(--h-line) 45%, transparent); border-radius: var(--radius); color: var(--ink-3); line-height: 1.25; text-wrap: balance; pointer-events: none; }
  /* lanes tighten so the five rows (and the chips that share their height) keep the lesson above the 900 px fold */
  .pc-lanes:is([data-flow="punchout"],[data-flow="punchout"] *) { gap: 4px; }
  .pc-lc:is([data-flow="punchout"],[data-flow="punchout"] *) { row-gap: 0; padding-block: 4px 5px; }
  .pc-cx:is([data-flow="punchout"],[data-flow="punchout"] *) { display: block; position: absolute; left: 100%; top: calc(50% - 1px); width: 44px; height: 2px; background: var(--h-line); transform-origin: left center; }
  .pc-cx:is([data-flow="punchout"],[data-flow="punchout"] *)::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: var(--radius-pin); background: var(--h); }
  .pc-in:is([data-flow="punchout"],[data-flow="punchout"] *) { display: block; position: absolute; height: 2px; background: var(--fl-blue-line); transform-origin: left center; top: calc(var(--pc-y) + 2px); left: -54px; width: 36px; }
  /* card 04: [chip column | bracket bundle | target box] across the visual and figure rows */
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-step[data-step="4"] .fl-card > .pc-mid { margin-inline: 0; justify-content: stretch; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-step[data-step="4"] .pc-mid > .pc-tg { flex: 1 1 auto; display: grid; grid-template-columns: var(--pc-cw) minmax(24px, 1fr) auto; align-items: center; margin: 0 16px; }
  /* with script, the box drops so the ring's centre sits level with the middle lever (its tail runs straight in) */
  .fl.pc-js:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-tw { align-self: start; margin-top: var(--pc-bt, 0px); }
  .pc-bun:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-bd:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-bq:is([data-flow="punchout"],[data-flow="punchout"] *) { display: block; }
  .pc-bun:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .pc-bun:is([data-flow="punchout"],[data-flow="punchout"] *) path { fill: none; stroke: var(--h-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
  .pc-bd:is([data-flow="punchout"],[data-flow="punchout"] *) i { left: 0; top: 0; offset-rotate: 0deg; }
  .pc-bq:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; left: 0; top: 0; width: 1px; height: 1px; }
  .pc-tw:is([data-flow="punchout"],[data-flow="punchout"] *) { grid-column: 3; flex-direction: column; gap: 8px; width: 100px; padding: 12px 4px 10px; background: var(--fl-card); border-radius: var(--radius); box-shadow: inset 0 0 0 2px var(--h-line); }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ring { width: 88px; height: 91px; }
  .pc-tw:is([data-flow="punchout"],[data-flow="punchout"] *) > .fl-fig[data-say] { align-items: center; padding: 0; border-left: 0; text-align: center; }
  .pc-tw:is([data-flow="punchout"],[data-flow="punchout"] *) > .fl-fig[data-say] .fl-big { font-size: var(--size-fl-body); }
  .pc-tw:is([data-flow="punchout"],[data-flow="punchout"] *) > .fl-fig[data-say] .fl-unit { font-size: var(--size-fl-label); }
  /* no script: no computed brackets, so a single straight join stands in for them */
  .fl:not(.pc-js):is([data-flow="punchout"],[data-flow="punchout"] *) .pc-bun { display: none; }
  .fl:not(.pc-js):is([data-flow="punchout"],[data-flow="punchout"] *) .pc-tg::before { content: ""; grid-column: 2; grid-row: 1; height: 2px; background: var(--h-line); }
}
/* K8 compact wide (1180-1299 container, a 1280 window) */
@container fl (min-width: 1180px) and (max-width: 1299px) {
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-steps { --fl-cols: minmax(0,1.4fr) minmax(0,1.26fr) minmax(0,2.66fr) minmax(0,2.44fr) minmax(0,1.54fr);
    --pc-t: 9.3; --pc-w4: calc(var(--pc-a) * 2.44 / var(--pc-t)); --pc-w5: calc(var(--pc-a) * 1.54 / var(--pc-t)); --pc-cw: calc(var(--pc-w4) - 168px); }
  /* r5 F-10 (lane 83): rebalanced for the 52 px dock lane. A three-line KPI chip fits its lane (56 px, tighter lines); card 01's route
     list gives 10 px of its indent so its labels keep an 8 px inner gap */
  .pc-mc:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-mu:is([data-flow="punchout"],[data-flow="punchout"] *) { font-size: var(--size-fl-label); line-height: 1.2; padding-block: 2px; }
  .pc-rt:is([data-flow="punchout"],[data-flow="punchout"] *) { padding-left: 12px; }
  .pc-rt:is([data-flow="punchout"],[data-flow="punchout"] *) > li { column-gap: 8px; }
  .pc-tw:is([data-flow="punchout"],[data-flow="punchout"] *) > .fl-fig[data-say] .fl-big { font-size: var(--size-fl-label); }
  .pc-lc:is([data-flow="punchout"],[data-flow="punchout"] *) { column-gap: 8px; padding-inline: 6px; min-height: 56px; } /* a one-line lane still holds its 3-line KPI chip (52 -> 56, lane 83) */
  .pc-lv:is([data-flow="punchout"],[data-flow="punchout"] *) { padding-left: 20px; }
  .pc-in:is([data-flow="punchout"],[data-flow="punchout"] *) { left: -50px; width: 36px; }
  .pc-ln:is([data-flow="punchout"],[data-flow="punchout"] *)::before, .pc-ln:is([data-flow="punchout"],[data-flow="punchout"] *)::after { left: -15px; }
  .pc-ln:is([data-flow="punchout"],[data-flow="punchout"] *)::after { width: 11px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-big, .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-unit { text-wrap: balance; }
  .pc-tw:is([data-flow="punchout"],[data-flow="punchout"] *) { width: 100px; padding-inline: 2px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-step[data-step="5"] .fl-card > .fl-did { text-wrap: balance; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ring { width: 72px; height: 75px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .fl-fig[data-hero] { padding-inline: 8px; margin-inline: 12px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-fig[data-say] { padding-left: 10px; padding-right: 0; }
  .pc-bar:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-few:is([data-flow="punchout"],[data-flow="punchout"] *) { height: 36px; }
}
/* the control is the kit dock (QA r4 D-01): sticky in thumb reach at every width, it steps up past a seek disc, a word
   or a mark and is never hidden; only transform and scale ease on it and on the seeks (kit §8) */

/* chips read as one run: bold title, then the words */
.pc-xx:is([data-flow="punchout"],[data-flow="punchout"] *) { min-width: 0; text-wrap: pretty; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-xx > .fl-xt, .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-xx > .fl-xd { display: inline; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-ba p { text-wrap: pretty; }

/* The lesson (S10 is a lesson, not a stage): one placement at every width, after 05 Learned, on its own last beat.
   The miss chip's ground draws, the blue "Shifted" arrow draws by stroke-dashoffset with one travelling dot, its head
   lands, then the Recovered chip's ground scales in. Every word is at full ink from frame 0. */
.pc-les:is([data-flow="punchout"],[data-flow="punchout"] *) { grid-column: 2; grid-row: 2; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-les > .fl-x { grid-column: auto; grid-row: auto; margin: 0; }
.pc-up:is([data-flow="punchout"],[data-flow="punchout"] *) { display: none; }
.pc-turn:is([data-flow="punchout"],[data-flow="punchout"] *) { position: relative; display: flex; align-items: center; min-height: 48px; margin: 0; padding: 6px 0 6px 44px; font-size: var(--size-fl-label); font-weight: 600; line-height: 1.35; color: var(--h-ink); }
.pc-tl:is([data-flow="punchout"],[data-flow="punchout"] *) { text-wrap: balance; }
.pc-tk:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; left: 25px; top: 0; bottom: 2px; width: 2px; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-sv { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-sv line { stroke: var(--h-line); stroke-width: 2; stroke-linecap: butt; stroke-dasharray: 1; vector-effect: none; }
.pc-sv:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-h { display: none; }
.pc-ah:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; left: -4px; bottom: 0; width: 10px; height: 10px; transform-origin: center top; }
.pc-ah:is([data-flow="punchout"],[data-flow="punchout"] *)::after { content: ""; position: absolute; left: 1px; top: -1px; width: 8px; height: 8px; border-right: 2px solid var(--h-line); border-bottom: 2px solid var(--h-line); transform: rotate(45deg); }
.pc-xs:is([data-flow="punchout"],[data-flow="punchout"] *) { position: absolute; inset: -2px; z-index: -1; transform-origin: center; pointer-events: none; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-xs > .pc-xg { inset: 0; z-index: auto; transform-origin: center; }

/* §4 wide: the lane row is the lesson alone (Price lock is now a detail in card 01). It spans all five columns: the miss,
   the blue "Shifted to demand-side levers" turn with three travelling dots, then Recovered; a gold drop ties it to 05. */
@container fl (min-width: 1180px) {
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-les { grid-column: 1; grid-row: 7; align-self: start; margin: 12px 0 0 calc(-1 * (var(--pc-a) - var(--pc-w5)) - 48px);
    grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); align-items: center; }
  .pc-up:is([data-flow="punchout"],[data-flow="punchout"] *) { display: block; position: absolute; right: 36px; top: -12px; height: 12px; width: 0; border-left: 2px dashed var(--h-line); transform-origin: center top; }
  .pc-turn:is([data-flow="punchout"],[data-flow="punchout"] *) { display: grid; grid-template-rows: auto 10px auto; row-gap: 4px; min-height: 0; padding: 0 6px; text-align: center; }
  .pc-tl:is([data-flow="punchout"],[data-flow="punchout"] *) { display: contents; }
  .pc-t1:is([data-flow="punchout"],[data-flow="punchout"] *) { grid-row: 1; }
  .pc-t2:is([data-flow="punchout"],[data-flow="punchout"] *) { grid-row: 3; }
  .pc-tk:is([data-flow="punchout"],[data-flow="punchout"] *) { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: 10px; grid-row: 2; }
  .pc-sv:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-h { display: inline; }
  .pc-sv:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-v { display: none; }
  .pc-tk:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-dots i { top: 1px; }
  .pc-ah:is([data-flow="punchout"],[data-flow="punchout"] *) { left: auto; right: 0; top: 0; bottom: auto; transform-origin: left center; }
  .pc-ah:is([data-flow="punchout"],[data-flow="punchout"] *)::after { left: -1px; top: 1px; border-bottom: 0; border-top: 2px solid var(--h-line); }
}
/* Cards 02, 04, 05: the visual and the statement sit in one wrapper (.pc-mid). Below 1180 it is display: contents, so
   they stay ordinary card parts. Wide, it spans the visual and figure rows: each statement rule is as tall as its words
   (no rule holds dead space) and the spare height is split evenly above, between and below. Card 04 keeps its ring at
   a set depth (the converge arrow from card 03 lands on the ring centre) and centres "One target" in the room under it. */
.pc-mid:is([data-flow="punchout"],[data-flow="punchout"] *) { display: contents; }
.fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .pc-mid > * { margin-inline: 16px; }
@container fl (min-width: 1180px) {
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .pc-mid { grid-row: 3 / span 2; display: flex; flex-direction: column; justify-content: space-evenly; min-width: 0; margin: 0 0 -12px; }
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .pc-mid > * { margin-block: 0; }
}
@container fl (min-width: 1180px) and (max-width: 1299px) {
  .pc-nm:is([data-flow="punchout"],[data-flow="punchout"] *) { white-space: nowrap; }
  /* card 05's "customer’s adoption." keeps one line (no one-word last line) */
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-step[data-step="5"] .fl-card > .fl-did { margin-inline: 12px; }
}
/* at the very bottom of the compact band a long lane name may take two lines rather than touch its pill */
@container fl (min-width: 1180px) and (max-width: 1199px) { .pc-nm:is([data-flow="punchout"],[data-flow="punchout"] *) { white-space: normal; } }
/* D-02: below a 340 px container every hero tile stacks its unit under the figure, so the unit never breaks */
@container fl (max-width: 339px) {
  .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .fl-card > .fl-fig[data-hero] { flex-direction: column; align-items: flex-start; gap: 2px; }
  /* and card 04 stacks its "One target" words under the ring, so they keep whole lines */
  .pc-tw:is([data-flow="punchout"],[data-flow="punchout"] *) { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* phone: a wrapped measure pill balances, so no word sits alone on its last line ("by vertical" stays together) */
@container fl (max-width: 719px) { .pc-ms:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-tx:is([data-flow="punchout"],[data-flow="punchout"] *) { text-wrap: balance; } .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-cb { white-space: normal; } }
.pc-rt:is([data-flow="punchout"],[data-flow="punchout"] *) > li > span { text-wrap: balance; }
/* below 400 px the ring is 72 px, so "everyone could see" keeps one line beside it */
@media (max-width: 399px) { .fl:is([data-flow="punchout"],[data-flow="punchout"] *) .pc-ring { width: 72px; height: 75px; } }
@media (forced-colors: active) { .pc-ic:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-lk:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-end:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-cx:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-bd:is([data-flow="punchout"],[data-flow="punchout"] *) i, .pc-pl:is([data-flow="punchout"],[data-flow="punchout"] *) { forced-color-adjust: none; } .pc-mc:is([data-flow="punchout"],[data-flow="punchout"] *), .pc-mu:is([data-flow="punchout"],[data-flow="punchout"] *) { border: 1px solid; border-left-width: 4px; } .pc-lc:is([data-flow="punchout"],[data-flow="punchout"] *) { border: 1px solid; border-left-width: 4px; } }

/* flow:how-i-build (page styles, scoped by freeze.cjs) */
/* Inter (variable, latin subset) by Rasmus Andersson, SIL Open Font License 1.1. Same file the live site serves. */


/* Page tokens (flows/v3/STANDARD.md §3). Site names first, then the flow palette the kit reads. */
[data-flow="how-i-build"] { --paper: #f4f5f7; --ink: #14171c; --ink-2: #3f444d; --ink-3: #5f6570; --rule: #d3d6dc; --accent: #1d4f9e; --contrast: #9c4a1a; --focus: 3px solid var(--accent); --focus-offset: 3px; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 0; --radius-pin: 50%; --shadow-1: 0 1px 2px rgb(20 23 28 / 0.08), 0 8px 24px rgb(20 23 28 / 0.08); --dur-press: 100ms; --dur-ui: 200ms; --dur-bar: 360ms; --dur-step: 600ms; --dur-map: 840ms; --flow-cycle: 2600ms; --hold-min: 1200ms; --ease: cubic-bezier(0.2, 0, 0, 1); --fl-cols: repeat(4, minmax(0, 1fr)); --fl-card: #ffffff; --fl-slab: #1b2230; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c0c5cd; --fl-gold: #b97c22; --fl-gold-on: #14171c; --fl-gold-ink: #7f5600; --fl-gold-tint: #fbf6ee; --fl-gold-line: #a8781f; --fl-gold-hi: #e2b955; --fl-violet: #8d43d6; --fl-violet-on: #ffffff; --fl-violet-ink: #7b34c4; --fl-violet-tint: #f4ecfb; --fl-violet-line: #8d43d6; --fl-violet-hi: #c3a6f2; --fl-red: #a3281e; --fl-red-on: #ffffff; --fl-red-ink: #a3281e; --fl-red-tint: #fbecea; --fl-red-line: #b3261e; --fl-red-hi: #f19a8f; --fl-blue: #1d4f9e; --fl-blue-on: #ffffff; --fl-blue-ink: #1d4f9e; --fl-blue-tint: #e8edf5; --fl-blue-line: #1d4f9e; --fl-blue-hi: #8db4f2; --fl-teal: #0b8452; --fl-teal-on: #ffffff; --fl-teal-ink: #0a6e45; --fl-teal-tint: #e6f3ec; --fl-teal-line: #0b8452; --fl-teal-hi: #7cc4b9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-flow="how-i-build"] { --paper: #111318; --ink: #e9ebef; --ink-2: #c0c5cd; --ink-3: #969ca7; --rule: #30343b; --accent: #8db4f2; --contrast: #e0955f; --shadow-1: 0 0 0 1px var(--rule), 0 8px 24px rgb(0 0 0 / 0.6); --fl-card: #1a1d23; --fl-slab: #262d3a; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c8ccd4; --fl-gold: #b28b21; --fl-gold-on: #111318; --fl-gold-ink: #e2b955; --fl-gold-tint: #2a2618; --fl-gold-line: #b28b21; --fl-gold-hi: #e2b955; --fl-violet: #8250b8; --fl-violet-on: #ffffff; --fl-violet-ink: #c3a6f2; --fl-violet-tint: #241f30; --fl-violet-line: #9468cc; --fl-violet-hi: #c3a6f2; --fl-red: #c43d30; --fl-red-on: #ffffff; --fl-red-ink: #f19a8f; --fl-red-tint: #2c1c1c; --fl-red-line: #d0473a; --fl-red-hi: #f19a8f; --fl-blue: #4194f6; --fl-blue-on: #111318; --fl-blue-ink: #8db4f2; --fl-blue-tint: #1b2638; --fl-blue-line: #4194f6; --fl-blue-hi: #8db4f2; --fl-teal: #108068; --fl-teal-on: #ffffff; --fl-teal-ink: #7cc4b9; --fl-teal-tint: #16282a; --fl-teal-line: #10806c; --fl-teal-hi: #7cc4b9; }
}
:root[data-theme="dark"] [data-flow="how-i-build"] { --paper: #111318; --ink: #e9ebef; --ink-2: #c0c5cd; --ink-3: #969ca7; --rule: #30343b; --accent: #8db4f2; --contrast: #e0955f; --shadow-1: 0 0 0 1px var(--rule), 0 8px 24px rgb(0 0 0 / 0.6); --fl-card: #1a1d23; --fl-slab: #262d3a; --fl-slab-ink: #ffffff; --fl-slab-ink-2: #c8ccd4; --fl-gold: #b28b21; --fl-gold-on: #111318; --fl-gold-ink: #e2b955; --fl-gold-tint: #2a2618; --fl-gold-line: #b28b21; --fl-gold-hi: #e2b955; --fl-violet: #8250b8; --fl-violet-on: #ffffff; --fl-violet-ink: #c3a6f2; --fl-violet-tint: #241f30; --fl-violet-line: #9468cc; --fl-violet-hi: #c3a6f2; --fl-red: #c43d30; --fl-red-on: #ffffff; --fl-red-ink: #f19a8f; --fl-red-tint: #2c1c1c; --fl-red-line: #d0473a; --fl-red-hi: #f19a8f; --fl-blue: #4194f6; --fl-blue-on: #111318; --fl-blue-ink: #8db4f2; --fl-blue-tint: #1b2638; --fl-blue-line: #4194f6; --fl-blue-hi: #8db4f2; --fl-teal: #108068; --fl-teal-on: #ffffff; --fl-teal-ink: #7cc4b9; --fl-teal-tint: #16282a; --fl-teal-line: #10806c; --fl-teal-hi: #7cc4b9; }
*:is([data-flow="how-i-build"],[data-flow="how-i-build"] *), *:is([data-flow="how-i-build"],[data-flow="how-i-build"] *)::before, *:is([data-flow="how-i-build"],[data-flow="how-i-build"] *)::after { box-sizing: border-box; }


.page:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { max-width: 1440px; margin: 0 auto; padding: 16px; }
.frame:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { background: var(--fl-card); border-radius: 20px; padding: 28px; }
/* r4 D-01: the wide dock lane reaches 20 px into the frame's 28 px padding, 8 px in from its edge */
@media (min-width: 1180px) { .fl[data-flow]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { --fl-dock-out: 20px; } }
.eyebrow:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { margin: 0 0 12px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 719px) { .page:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { padding: 0; } .frame:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { border-radius: 0; padding: 20px 16px 18px; } }
/* Font gate (K12): the page stays hidden for the few ms the embedded Inter takes to decode, so no swap shifts layout.
   Set only by the inline script below (no script, no gate). It lifts once the font is ready and the kit has added
   its play control (DOMContentLoaded), so neither shifts layout; a fail-safe lifts it after 1.5 s. */
.fl-hold:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) body { visibility: hidden; }

/* ---- Page-local layer for the loop (logged in KIT-REQUESTS.md). Phone first: the rail; wide: a two-row serpentine. ---- */
/* Numerals (D-06): the kit sets tabular figures only on .fl-big, .fl-tot dd and band numbers; the loop's count figures add it here. */
.hb-gap:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) b, .hb-dn:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { font-variant-numeric: tabular-nums; }
/* Unlit state (STANDARD §7, review 3 D-01): every stage is already in colour on the first frame (solid hue band, tinted
   card with a hue edge, hue-tinted disc ring, full-contrast check rings) and words stay at full ink. A beat only ADDS
   light: the disc fills solid, a light sweep crosses the card, a hue glow and a 4 px meter come in, a bright rule draws
   under the band, the gate edge draws and the checks fill. Only those non-text marks wait. */
.hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card { position: relative; isolation: isolate; background: var(--h-tint); box-shadow: 0 0 0 1px color-mix(in srgb, var(--h) 38%, transparent); }
.hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card > :is(.hb-wash, .hb-meter, .hb-sw) { position: absolute; margin: 0; pointer-events: none; }
.hb-wash:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--h) 15%, transparent), transparent 62%); }
.hb-sw:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--h) 16%, transparent) 50%, transparent 70%); transform: scaleX(0); }
.hb-meter:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { left: 0; right: 0; bottom: 0; height: 4px; background: var(--h); transform-origin: left center; }
/* disc: a full-opacity ring (2 px hue, tint ground, hue icon); the solid disc grows over it on its beat */
.hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-disc { background: color-mix(in srgb, var(--h) 26%, var(--fl-card)); color: var(--h-ink); border: 2px solid var(--h); }
.hb-dfill:is([data-flow="how-i-build"],[data-flow="how-i-build"] *), .hb-dfill:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) > i { position: absolute; display: grid; place-items: center; border-radius: var(--radius-pin); transform-origin: center; }
.hb-dfill:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) > i { inset: 0; }
.hb-dfill:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { inset: -2px; background: var(--h); color: var(--h-on); }
/* band: the solid stage hue from the first frame; on the beat a bright rule (the hue's light tone) draws along its foot */
.hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-band { position: relative; overflow: hidden; align-items: center; }
.hb-blit:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--h-hi); transform-origin: left center; }
/* the gate-07 pill: outline gold before beat 8, then the solid pill wipes in (its words hold still) */
.hb-bf:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: absolute; inset: 0; overflow: hidden; padding: inherit; gap: inherit; pointer-events: none; }
.hb-bi:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: absolute; inset: 0; display: flex; align-items: center; padding: inherit; gap: inherit; background: var(--h); color: var(--h-on); }
.hb-cue:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
/* band: stage name and a 7-dot position tracker (where this stage sits in the loop) */
.hb-trk:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.hb-trk:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) i { width: 8px; height: 8px; border: 2px solid currentColor; border-radius: var(--radius-pin); }
.hb-trk[data-n="1"]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) i:nth-child(-n+1), .hb-trk[data-n="2"]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) i:nth-child(-n+2), .hb-trk[data-n="3"]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) i:nth-child(-n+3), .hb-trk[data-n="4"]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) i:nth-child(-n+4), .hb-trk[data-n="5"]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) i:nth-child(-n+5), .hb-trk[data-n="6"]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) i:nth-child(-n+6), .hb-trk[data-n="7"]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) i { background: currentColor; }
.hb-ck:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) li { text-wrap: balance; }
/* the stage statement and its outcome travel together, so a one-line statement never leaves a gap above its outcome */
.hb-dw:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hb-out:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { flex-direction: row; align-items: flex-start; gap: 8px; color: var(--h-ink); font-weight: 600; }
.hb-out:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-i { margin-top: 0; color: var(--h-ink); }
/* exit gate: a panel with a blue tab on its top edge, the gate name, then its criteria as check rows (S5 words only).
   Content is top-aligned with fixed padding at every width (D-01); the blue edge draws on the beat. */
.hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card > .fl-fig { position: relative; justify-content: flex-start; margin-top: 22px; padding: 22px 14px 14px; gap: 0; border: 1px solid var(--rule); border-left: 4px solid var(--rule); box-shadow: var(--shadow-1); }
.hb-gbar:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: absolute; left: -4px; top: -1px; bottom: -1px; width: 4px; background: var(--fl-blue); transform-origin: top center; }
.hb-gl:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: absolute; z-index: 1; top: -13px; left: 10px; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px 0 8px; border-radius: 13px;
  background: var(--fl-blue); color: var(--fl-blue-on); font-size: var(--size-fl-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; forced-color-adjust: none; }
.hb-gl:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) svg { width: 16px; height: 16px; stroke-width: 2.75; }
.hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-fig[data-hero] .fl-big { line-height: 1.08; }
.hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-fig[data-hero] .fl-unit { margin-top: 8px; font-size: var(--size-fl-body); color: var(--h-ink); font-weight: 700; }
.hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .hb-ck { gap: 6px; margin-top: 10px; font-size: var(--size-fl-body); line-height: 1.35; }
.hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .hb-ck li { gap: 8px; color: var(--ink); font-weight: 500; }
.hb-c:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: relative; display: grid; flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--h-ink); }
.hb-c:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) svg { width: 20px; height: 20px; }
/* unlit: a clean hue ring at full mark contrast (waiting, not disabled); lit: a solid hue check grows from its centre */
.hb-cf:is([data-flow="how-i-build"],[data-flow="how-i-build"] *), .hb-cf:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) > i { position: absolute; inset: 0; display: grid; color: var(--h-ink); transform-origin: center; }
.hb-cf:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) svg circle { fill: currentColor; }
.hb-cf:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) svg path { stroke: var(--fl-card); stroke-width: 2.5; }
/* "from the record": the industry tag is a pill on its own line, then the first-person sentence; the bold verb never splits */
.hb-rec:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: flex; width: fit-content; align-items: center; gap: 6px; margin-bottom: 6px; padding: 2px 10px 2px 6px; border-radius: 12px; background: var(--fl-card);
  font-size: var(--size-fl-label); font-weight: 700; line-height: 1.4; color: var(--h-ink); }
.hb-rec:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) svg { width: 16px; height: 16px; }
.hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-did .fl-v { white-space: nowrap; }
/* the closing gate on the path: a gold pill that lights at beat 8 */
.hb-gx:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: absolute; z-index: 1; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 4px; overflow: hidden; border: 2px solid var(--fl-gold-line); border-radius: 16px;
  background: var(--fl-card); color: var(--fl-gold-ink); box-shadow: 0 0 0 3px var(--fl-card); font-size: var(--size-fl-label); font-weight: 700; white-space: nowrap; forced-color-adjust: none; }
.hb-gx:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .hb-bi { background: var(--fl-gold); color: var(--fl-gold-on); }
.hb-gxb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-pin); border: 2px solid var(--fl-blue); color: var(--fl-blue-ink); background: var(--fl-card); }
.hb-bi:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .hb-gxb { background: var(--fl-blue); color: var(--fl-blue-on); }
.hb-gx:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) svg { width: 14px; height: 14px; stroke-width: 2.75; }
.hb-bend:is([data-flow="how-i-build"],[data-flow="how-i-build"] *), .hb-ret:is([data-flow="how-i-build"],[data-flow="how-i-build"] *), .hb-rr:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: none; }
/* stage numbers on the discs (wide only, where row 2 runs right to left) */
.hb-dn:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: none; }
/* hue key: mirrored stages share a colour (01/07 gold, 02/06 blue, 03/05 teal, 04 violet) */
.hb-key:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: var(--size-fl-label); font-weight: 600; color: var(--ink-2); }
.hb-kl:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { font-weight: 600; }
.hb-key:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) span { display: inline-flex; align-items: center; gap: 6px; color: var(--h-ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-key:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) i { width: 12px; height: 12px; border-radius: var(--radius-pin); background: var(--h); forced-color-adjust: none; }
/* "+" details: the stage outcome and the rest of its gate criteria, one tap away. The details box covers the card (no grid
   cell, no pointer events); its 44 px summary sits at the right end of the stage band and the panel drops down over the card. */
.hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card > .hb-more { position: absolute; inset: 0; z-index: 3; margin: 0; pointer-events: none; }
.hb-more:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) > summary { position: absolute; right: 2px; top: 0; display: grid; place-items: start center; padding-top: 6px; box-sizing: border-box; width: 44px; height: 44px; list-style: none; cursor: pointer; pointer-events: auto; border-radius: var(--radius-pin); }
.hb-more:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) > summary::-webkit-details-marker { display: none; }
.hb-pl:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pin); background: var(--fl-card); color: var(--h-ink); transition: transform var(--dur-ui) var(--ease); }
.hb-pl:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-i { width: 18px; height: 18px; margin: 0; color: inherit; stroke-width: 2.5; }
.hb-more[open]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .hb-pl { transform: rotate(45deg); }
.hb-more:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) > summary:focus-visible { outline: 2px solid var(--h-ink); outline-offset: -2px; }
.hb-more:not([open]):is([data-flow="how-i-build"],[data-flow="how-i-build"] *) > .hb-acc { display: none; }
.hb-acc:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: absolute; left: 8px; right: 8px; top: 48px; max-height: calc(100% - 56px); overflow: auto; display: grid; gap: 4px; padding: 12px 14px; pointer-events: auto;
  background: var(--fl-card); border: 1px solid var(--rule); border-left: 4px solid var(--h); border-radius: 10px; box-shadow: var(--shadow-1); font-size: var(--size-fl-label); line-height: 1.35; }
.hb-dt:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { margin: 0; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.hb-acc:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .hb-out { margin: 0 0 6px; font-size: var(--size-fl-body); }
.hb-mk:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: grid; gap: 4px; margin: 0; padding-left: 18px; color: var(--ink); }
/* the band keeps its right end for the "+" (stages 01-06) */
.hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card:has(> .hb-more) > .fl-band { padding-right: 48px; }
/* takeaway: what the gates caught. The published missing-claims case runs from gate 01 to gate 07 (D-01, counsel
   front-100/139: a bounded sample, part of the expected claims unaccounted for; the hero is the traced 300,000). Words sit at
   full ink from frame 0; only the hue marks (bars, icon discs, the connector) draw in on beat 8. */
.hb-gap:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 18px 0 0; padding-bottom: 14px; color: var(--fl-slab-ink-2); font-size: var(--size-fl-body); font-weight: 600; }
.hb-gap:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) b { font-size: var(--size-fl-h); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--fl-slab-ink); }
.hb-gu:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: absolute; left: 0; bottom: 0; width: 96px; height: 4px; border-radius: 2px; background: var(--h-hi); transform-origin: left center; forced-color-adjust: none; }
.hb-ba:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: relative; display: grid; gap: 20px; align-content: center; margin: 0; padding: 0; list-style: none; }
.hb-ba:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 56px; padding: 8px 14px 8px 16px;
  border-radius: 10px; background: color-mix(in srgb, var(--h-hi) 14%, var(--fl-slab)); color: var(--fl-slab-ink); font-size: var(--size-fl-body); font-weight: 600; line-height: 1.3; }
.hb-ba:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) li > span:nth-child(3) { display: grid; gap: 2px; min-width: 0; }
.hb-ba:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) b { color: var(--h-hi); font-size: var(--size-fl-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.hb-bab:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 10px 0 0 10px; background: var(--h-hi); transform-origin: center top; forced-color-adjust: none; }
.hb-bai:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--h-hi); color: var(--fl-slab); forced-color-adjust: none; }
.hb-bai:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hb-ba:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) li[data-k="before"] { background: transparent; outline: 2px dashed color-mix(in srgb, var(--h-hi) 55%, transparent); outline-offset: -2px; }
/* the connector from gate 01 to gate 07: a short down arrow in the hue, centred on the icon column */
.hb-bat:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: absolute; z-index: 1; left: 26px; top: -21px; width: 12px; height: 22px; color: var(--h-hi); transform-origin: center top; }
.hb-bat:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) svg { display: block; width: 12px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* card 07 at wide (D-11): the loop back to gate 01, drawn as a gold strip under the outcome so the left column reads full */
.hb-lb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: none; }
.hb-loop:is([data-flow="how-i-build"],[data-flow="how-i-build"] *), .hb-lt:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: none; }
.hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-deck { max-width: 62ch; text-wrap: balance; }
/* the control is the kit dock (QA r4 D-01, STANDARD §8): sticky in thumb reach at every width, it steps up past a seek
   disc, a word, a mark or the gate-07 pill (data-avoid) and is never hidden; on the rail it sits on the disc line */

/* ---- rail (below 1180): a 56 px rail column, a gold return path from gate 07 back to disc 01 in its left edge ---- */
.hb.fl[data-flow]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { grid-template-columns: 56px minmax(0, 1fr); }
@container fl (max-width: 1179px) {
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-play { justify-self: end; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step > :is(.fl-disc, .fl-seek) { justify-self: end; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step > .fl-wire { left: 33px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="7"] { padding-bottom: 46px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="7"] > .fl-wire { bottom: 32px; }
  .hb-gx:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { left: 17px; bottom: 0; }
  .hb-rr:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: block; position: absolute; left: 0; top: 0; bottom: -20px; width: 2px; background: var(--h-line); transform-origin: bottom center; }
  .hb-rr[data-k="1"]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { top: 21px; width: 12px; background: none; border: 2px solid var(--h-line); border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
  .hb-rr[data-k="1"]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *)::after { content: ""; position: absolute; right: -1px; top: -5px; width: 8px; height: 8px; border-top: 2px solid var(--h-line); border-right: 2px solid var(--h-line); transform: rotate(45deg); }
  .hb-rr[data-k="7"]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { bottom: 15px; width: 17px; background: none; border: 2px solid var(--h-line); border-top: 0; border-right: 0; border-bottom-left-radius: 10px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) [data-hero] .fl-big { font-size: 2rem; }
}
/* tablet and laptop (viewport 720-1267, container 632-1179; WCAG 2.2.2, review 3): the rail is 100 px with two lanes. The
   discs, wires and gate edges keep the right lane; the 44 px dock rides its own left lane beside the gold return line, so
   no seek disc ever passes under it (only the gate-07 pill, at the flow's foot, can meet it; the dock steps up past it). A viewport query, because the rail width is set on the container element itself. */
@media (min-width: 720px) and (max-width: 1267.98px) {
  .hb.fl[data-flow]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { grid-template-columns: 100px minmax(0, 1fr); }
  .hb.fl[data-flow]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-play { justify-self: start; margin-left: 6px; }
  .hb.fl[data-flow]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step > .fl-wire { left: 77px; }
  .hb.fl[data-flow]:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .hb-rr[data-k="1"] { width: 56px; }
}
/* tablet and laptop rail (720-1179): each card in two columns (stage words | exit gate) */
@container fl (min-width: 720px) and (max-width: 1179px) {
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 20px; row-gap: 12px; align-content: start; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card > .fl-band { grid-column: 1 / -1; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card > :is(.hb-dw, .fl-did) { grid-column: 1; margin-right: 0; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card > .hb-dw { margin-top: 4px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card > .fl-fig { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-left: 0; margin-top: 24px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-take { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* phone (<720): one column, 12 px card insets, the gate panel spans the card, 14 px criteria and record lines */
@container fl (max-width: 719px) {
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card { row-gap: 4px; padding-bottom: 10px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card > :not(.fl-band, .hb-wash, .hb-meter) { margin-inline: 12px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-band { padding: 7px 12px; }
  .hb-more:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) > summary { padding-top: 3px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-detail { line-height: 1.35; }
  .hb-dw:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { gap: 2px; margin-top: 2px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .hb-out { font-size: var(--size-fl-label); }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .hb-out .fl-i { width: 18px; height: 18px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) [data-hero] .fl-big { font-size: 1.625rem; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card > .fl-fig { margin: 14px 0 2px; padding: 16px 12px 8px; border-width: 1px 0; border-left-width: 4px; border-radius: 0; box-shadow: none; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-big { font-size: 1.375rem; line-height: 1.15; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .hb-ck { margin-top: 6px; gap: 3px; font-size: var(--size-fl-label); line-height: 1.3; }
  .hb-c:is([data-flow="how-i-build"],[data-flow="how-i-build"] *), .hb-c:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) svg { width: 18px; height: 18px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-did { font-size: var(--size-fl-label); line-height: 1.35; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-deck { font-size: var(--size-fl-body); }
  .hb-rec:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { margin-bottom: 4px; padding-block: 0; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-take { gap: 18px; padding-block: 16px; }
  .hb-gap:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) b { font-size: var(--size-fl-fig); }
  .hb-key:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { gap: 4px 12px; }
  .hb-kl:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { flex-basis: 100%; }
}
/* small phones: the 7-dot tracker steps aside so every band is one line (the rail shows the position) */
@container fl (max-width: 459px) {
  .hb-trk:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: none; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-band { letter-spacing: 0.04em; }
}

/* ---- wide (1180+): a two-row serpentine; 07 spans two columns: its words and outcome, then its gate panel ---- */
@container fl (min-width: 1180px) {
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-steps { grid-auto-flow: row; grid-template-rows: repeat(6, auto) 36px repeat(7, auto); padding-inline: 36px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step { grid-row: 1 / span 7; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step > :is(.fl-disc, .fl-seek) { margin-bottom: 12px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="1"] { grid-column: 1; } .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="2"] { grid-column: 2; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="3"] { grid-column: 3; } .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="4"] { grid-column: 4; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="5"] { grid-column: 4; grid-row: 8 / span 7; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="6"] { grid-column: 3; grid-row: 8 / span 7; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="7"] { grid-column: 1 / span 2; grid-row: 8 / span 7; grid-template-columns: subgrid; }
  /* bottom row runs right to left: discs sit on the right, wires draw leftwards, dots travel leftwards */
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step:is([data-step="5"],[data-step="6"],[data-step="7"]) > :is(.fl-disc,.fl-seek) { justify-self: end; margin: 0 16px 12px 0; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="7"] > :is(.fl-disc,.fl-seek) { grid-column: 2; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="7"] > .fl-card { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="7"] > .fl-card > :not(.fl-fig) { grid-column: 1; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="7"] > .fl-card > .fl-band { grid-column: 1 / -1; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="7"] > .fl-card > .hb-dw { grid-row: 2 / span 3; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="7"] > .fl-card > .fl-did { grid-row: 5; padding-right: 16px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="7"] > .fl-card > .fl-fig { grid-column: 2; grid-row: 2 / span 4; align-self: start; margin: 22px 16px 16px 0; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="7"] .hb-out { font-size: var(--size-fl-fig); line-height: 1.25; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="7"] .hb-out .fl-i { width: 24px; height: 24px; margin-top: 4px; }
  /* D-11: the loop strip fills the 07 words column: 07's icon, a gold connector drawn on beat 8, 01's icon, then where it leads */
  .hb-lb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: flex; align-items: center; gap: 0; margin: 18px 16px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--fl-card);
    border: 1px solid color-mix(in srgb, var(--h) 40%, transparent); box-shadow: var(--shadow-1); color: var(--ink-2); font-size: var(--size-fl-label); line-height: 1.35; }
  .hb-lbd:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--h); color: var(--h-on); forced-color-adjust: none; }
  .hb-lbd:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-i { width: 22px; height: 22px; }
  .hb-lb1:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { background: var(--fl-card); color: var(--h-ink); border: 2px solid var(--h); }
  .hb-lbw:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { flex: 0 1 56px; min-width: 28px; height: 0; margin: 0 6px; border-top: 3px dashed var(--h-line); transform-origin: left center; position: relative; }
  .hb-lbw:is([data-flow="how-i-build"],[data-flow="how-i-build"] *)::after { content: ""; position: absolute; right: -1px; top: -4.5px; width: 9px; height: 9px; border-top: 3px solid var(--h-line); border-right: 3px solid var(--h-line); transform: rotate(45deg); }
  .hb-lbt:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { flex: 1 1 auto; display: grid; gap: 2px; margin-left: 14px; min-width: 0; }
  /* r5 F-09 (lane 83): beside the 52 px dock lane the label wraps (balanced) and the connector gives first, so it never runs out of its box */
  .hb-lbt:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) b { color: var(--h-ink); font-size: var(--size-fl-body); font-weight: 700; text-wrap: balance; }
  /* disc numbers: row 1 reads left to right, row 2 right to left, so each disc carries its stage number */
  .hb-dn:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: absolute; z-index: 2; top: -10px; right: -12px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px;
    background: var(--fl-card); border: 2px solid var(--h); color: var(--h-ink); font-size: var(--size-fl-label); font-weight: 700; line-height: 1; forced-color-adjust: none; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step:is([data-step="5"],[data-step="6"],[data-step="7"]) .hb-dn { right: auto; left: -12px; }
  /* travelling dots around the whole loop while it plays (path set by the script from the turn and the return) */
  .hb-loop:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: block; z-index: 0; }
  .hb-lt:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: block; position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
  .hb-lt:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) path { fill: none; stroke: var(--rule); stroke-width: 2; stroke-dasharray: 2 6; }
  .hb-loop:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) i { left: 0; top: 0; width: 10px; height: 10px; background: var(--fl-gold); box-shadow: 0 0 0 2px var(--fl-card); offset-rotate: 0deg; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step:is([data-step="5"],[data-step="6"]) > .fl-wire { left: -22px; right: 66px; transform-origin: right center; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step:is([data-step="5"],[data-step="6"]) > .fl-wire::after { left: 1px; right: auto; bottom: -3px; border: 0; border-left: 2px solid var(--h-line); border-bottom: 2px solid var(--h-line); }
  /* 07's wire starts where the return corner's radius ends (-18 + 20 = 2 px), so the corner is one clean J */
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="7"] > .fl-wire { left: 2px; right: 66px; transform-origin: right center; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step:is([data-step="5"],[data-step="6"],[data-step="7"]) > .fl-wire > .fl-dots { transform: scaleX(-1); }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="7"] > .fl-wire::after, .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="4"] > .fl-wire::after { display: none; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-step[data-step="4"] > .fl-wire { right: 0; }
  /* the turn (04 to 05) in the right gutter, and the return (07 to 01) in the left gutter */
  .hb-bend:is([data-flow="how-i-build"],[data-flow="how-i-build"] *), .hb-ret:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { display: block; position: absolute; top: 21px; height: calc(100% + 2px); width: 28px; border: 3px solid var(--h-line); }
  .hb-bend:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { left: calc(100% - 10px); border-left: 0; border-radius: 0 20px 20px 0; transform-origin: top center; }
  .hb-ret:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { left: -18px; border-right: 0; border-radius: 20px 0 0 20px; transform-origin: bottom center; }
  /* the U-turn (04 to 05) is the heaviest mark on the path: a 3 px line and a 14 px arrowhead pointing back along row 2 */
  .hb-bend:is([data-flow="how-i-build"],[data-flow="how-i-build"] *)::after, .hb-ret:is([data-flow="how-i-build"],[data-flow="how-i-build"] *)::after { content: ""; position: absolute; width: 14px; height: 14px; transform: rotate(45deg); }
  .hb-bend:is([data-flow="how-i-build"],[data-flow="how-i-build"] *)::after { left: -3px; bottom: -10px; border-left: 3px solid var(--h-line); border-bottom: 3px solid var(--h-line); }
  .hb-ret:is([data-flow="how-i-build"],[data-flow="how-i-build"] *)::after { right: -3px; top: -10px; border-top: 3px solid var(--h-line); border-right: 3px solid var(--h-line); }
  .hb-v:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { position: absolute; top: 0; bottom: 0; width: 2px; }
  .hb-bend:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .hb-v { right: -2.5px; } .hb-ret:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .hb-v { left: -2.5px; bottom: auto; height: min(100%, 400px); }
  .hb-ret:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .hb-v > .fl-dots { transform: scaleY(-1); }
  .hb-gx:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { top: 6px; left: 44px; }
  /* card rows (D-01): every part is top-aligned in its shared row with fixed padding; nothing stretches or centres */
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card > .hb-dw { grid-row: 2 / span 2; align-self: start; margin-top: 12px; }
  /* gate panels stretch to their shared row, so every panel in a row has the same height and the record block below
     sits at one fixed gap from it (no half-empty card next to a taller neighbour) */
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card > .fl-fig { align-self: stretch; margin-top: 22px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-card > .fl-did { margin-block: 14px 16px; }
  .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) [data-hero] .fl-big { font-size: clamp(28px, 2.5cqi, 40px); }
}
@media (forced-colors: active) { .hb:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) .fl-fig, .hb-acc:is([data-flow="how-i-build"],[data-flow="how-i-build"] *), .hb-bar:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) { border: 1px solid; } .hb-rr:is([data-flow="how-i-build"],[data-flow="how-i-build"] *), .hb-trk:is([data-flow="how-i-build"],[data-flow="how-i-build"] *) i { forced-color-adjust: none; } }