/* IKRC050 studio figures. Plain CSS (no Tailwind rebuild), rem units only.
   Semantic colour: teal = system or assistant, lime = the human decision, amber = needs attention,
   grey sheet = systems the business already runs. Figures illustrate; nothing in them is a control. */
.sf {
  --sf-connector: #687e7c; --sf-paper: #fbfbf7; --sf-ink: #0b2035; --sf-muted: #44586a; --sf-line: #d3dbd8; --sf-rule: #b7c3c0;
  --sf-teal: #126d70; --sf-lime: #d3e95a; --sf-attention: #8a4b00; --sf-attention-bg: #fff4e2;
  --sf-sheet: #eef1ec; --sf-shadow: 0 1.5rem 3rem -2rem rgb(11 32 53 / .45);
  --sf-display: "Syne", "DM Sans", sans-serif; --sf-mono: "JetBrains Mono", ui-monospace, monospace;
  margin: 0; background: var(--sf-paper); color: var(--sf-ink); font-family: "DM Sans", system-ui, sans-serif;
  border: 1px solid var(--sf-line); border-radius: 0.75rem; box-shadow: var(--sf-shadow);
  font-size: 0.9375rem; line-height: 1.45; overflow: hidden; max-width: 100%; text-align: left; overflow-wrap: anywhere;
}
.dark .sf {
  --sf-connector: #8cacae; --sf-paper: #12283d; --sf-ink: #e8eff0; --sf-muted: #b5c4cc; --sf-line: #2c4459; --sf-rule: #45627a;
  --sf-teal: #9bcdc7; --sf-attention: #f2b766; --sf-attention-bg: #2e2717; --sf-sheet: #1b3348;
  --sf-shadow: 0 1.5rem 3rem -2rem rgb(0 0 0 / .8);
}
.sf *, .sf *::before, .sf *::after { box-sizing: border-box; }
.sf :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.sf :where(p) { margin: 0; }
.sf-bar { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; align-items: center;
  padding: 0.625rem 1rem; border-bottom: 1px solid var(--sf-line); background: var(--sf-sheet); }
.sf-dots { display: inline-flex; gap: 0.3125rem; }
.sf-dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sf-rule); }
.sf-kind { font-family: var(--sf-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--sf-teal); }
.sf-chip { margin-left: auto; font-size: 0.8125rem; color: var(--sf-muted); }
.sf-body { padding: 1.25rem; container-type: inline-size; }
.sf-cap { font-size: 0.875rem; color: var(--sf-muted); padding: 0.75rem 1.25rem 1rem; border-top: 1px solid var(--sf-line); }

/* Plain status text: a coloured mark and a word, never a button shape. */
.sf-status { display: inline-flex; align-items: baseline; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600;
  color: var(--sf-muted); cursor: default; }
.sf-status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none;
  border: 1.5px solid currentColor; transform: translateY(-0.05rem); }
.sf-status--system { color: var(--sf-teal); }
.sf-status--system::before { background: currentColor; }
.sf-status--attention { color: var(--sf-attention); }
.sf-status--attention::before { border-radius: 0.125rem; background: currentColor; transform: translateY(-0.05rem) rotate(45deg); }

/* Directed connector: a grid item filling a connector track. Vertical (down) by default;
   data-phone="up" reverses it; data-desk="right|left" turns it horizontal in wide containers.
   --at-x / --at-y place the line across the track. Drawn behind the nodes it joins. */
.sf-arrow { position: relative; z-index: 0; color: var(--sf-connector); --at-x: 50%; --at-y: 50%; }
.sf-arrow::before, .sf-arrow::after { content: ""; position: absolute; }
.sf-arrow::before { left: var(--at-x); top: 0; bottom: 0.25rem; border-left: 2px solid currentColor; transform: translateX(-1px); }
.sf-arrow::after { left: var(--at-x); bottom: 0; width: 0.75rem; height: 0.5rem; margin-left: -0.375rem;
  background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.sf-arrow[data-phone="up"]::before { top: 0.25rem; bottom: 0; }
.sf-arrow[data-phone="up"]::after { top: 0; bottom: auto; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sf-arrow--dashed::before { border-left-style: dashed; }
.sf-arrow--attention { color: var(--sf-attention); }
@container (min-width: 32rem) {
  .sf-arrow[data-desk]::before { top: var(--at-y); bottom: auto; left: 0.25rem; right: 0.25rem;
    border-left: 0; border-top: 2px solid currentColor; transform: translateY(-1px); }
  .sf-arrow--dashed[data-desk]::before { border-top-style: dashed; }
  .sf-arrow[data-desk]::after { top: var(--at-y); bottom: auto; width: 0.5rem; height: 0.75rem; margin: -0.375rem 0 0; }
  .sf-arrow[data-desk="right"]::before { left: 0; }
  .sf-arrow[data-desk="right"]::after { left: auto; right: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .sf-arrow[data-desk="left"]::before { right: 0; }
  .sf-arrow[data-desk="left"]::after { left: 0; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
}

/* == AI review (hero): the application window == */
.sf-rv .sf-body { background: var(--sf-sheet); }
.sf-rv-work { display: grid; gap: 1rem; }
.sf-rv-doc { display: none; }
.sf-rv-panel { background: var(--sf-paper); border: 1px solid var(--sf-line); border-top: 3px solid var(--sf-teal);
  border-radius: 0.5rem; padding: 0.75rem 1rem 0.25rem; }
.sf-rv-label, .sf-rv-doc-title, .sf-rv-step small, .sf-ev-subject small, .sf-ev-n {
  font-family: var(--sf-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.sf-rv-label { color: var(--sf-teal); margin-bottom: 0.25rem; }
.sf-rv-checks li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 0.75rem;
  padding: 0.4375rem 0; border-top: 1px solid var(--sf-line); font-size: 0.875rem; }
.sf-rv-checks li:first-child { border-top: 0; }
.sf-rv-checks .is-flag { color: var(--sf-ink); font-weight: 600; }
.sf-rv-path { display: grid; grid-template-rows: auto 1.25rem auto 1.25rem auto; margin-top: 1.25rem; }
.sf-rv-path .sf-arrow { --at-x: 1.5rem; }
.sf-rv-step { position: relative; z-index: 1; padding: 0.625rem 0.875rem; border-radius: 0.5rem; border: 1px solid var(--sf-line);
  background: var(--sf-paper); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.sf-rv-step small { display: block; margin-bottom: 0.25rem; color: var(--sf-muted); }
.sf-rv-step.is-done small { color: var(--sf-teal); }
.sf-rv-step.is-now { background: var(--sf-lime); border-color: var(--sf-lime); color: #0b2035; }
.sf-rv-step.is-now small { color: #0b2035; }
.sf-rv-step.is-next { background: transparent; border-style: dashed; border-color: var(--sf-rule); }
.sf-rv-note { margin-top: 1rem; font-size: 0.875rem; color: var(--sf-muted); }
@container (min-width: 32rem) {
  .sf-rv-work { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); align-items: start; }
  .sf-rv-doc { display: grid; gap: 0.5rem; align-content: start; padding: 1rem; min-height: 11rem; margin-top: 0.375rem;
    background: var(--sf-paper); border: 1px solid var(--sf-line); border-radius: 0.25rem; box-shadow: var(--sf-shadow); transform: rotate(-1.5deg); }
  .sf-rv-doc-title { color: var(--sf-muted); margin-bottom: 0.375rem; }
  .sf-rv-doc i { display: block; height: 0.4375rem; border-radius: 0.25rem; background: var(--sf-line); }
  .sf-rv-doc .w80 { width: 80%; } .sf-rv-doc .w60 { width: 60%; } .sf-rv-doc .w40 { width: 40%; }
  .sf-rv-doc .flag { height: 1.125rem; margin: 0.25rem -0.375rem; border-radius: 0.25rem;
    background: var(--sf-attention-bg); box-shadow: inset 0.1875rem 0 0 var(--sf-attention); }
  .sf-rv-path { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr) 1.5rem minmax(0, 1fr); }
}

/* == AI use-case evaluation: a criteria board of open questions == */
.sf-ev-subject { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-bottom: 0.875rem;
  font-size: 1rem; font-weight: 600; }
.sf-ev-subject small { color: var(--sf-muted); }
.sf-ev-context { font-size: 0.875rem; font-weight: 600; color: var(--sf-teal); padding-bottom: 0.375rem; border-bottom: 2px solid var(--sf-ink); }
.sf-ev-board { display: grid; }
/* Narrow: number and criterion on one line, question beneath. Wide: a 2x2 board. */
.sf-ev-board li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.125rem 0;
  padding: 0.625rem 0.25rem 0.75rem 0; border-bottom: 1px solid var(--sf-line); }
.sf-ev-n { color: var(--sf-teal); align-self: baseline; }
.sf-ev-board strong { font-family: var(--sf-display); font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.sf-ev-q { grid-column: 2; font-size: 0.9375rem; }
.sf-ev-board li:last-child { border-bottom: 0; }
@container (min-width: 26rem) {
  .sf-ev-board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sf-ev-board li { padding: 0.875rem 1rem 1rem 0.25rem; }
  .sf-ev-board li:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--sf-line); }
  .sf-ev-board li:nth-child(n + 3) { border-bottom: 0; }
  .sf-ev-board li:nth-child(-n + 2) { border-bottom: 1px solid var(--sf-line); }
}

/* == AI integration boundary: one directed flow == */
.sf-bd-map { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 0.25rem;
  grid-template-areas: "model" "e12" "ai" "e3" "rec" "e4" "appr" "e5" "ctrl" "e6" "pay" "e7" "fail";
  grid-template-rows: auto 2.25rem auto 1.25rem auto 1.25rem auto 2rem auto 1.25rem auto 1.25rem auto; }
.sf-bd-map .sf-arrow { --at-x: 2rem; }
.sf-bd-app { grid-row: ai-start / appr-end; grid-column: 1 / -1; position: relative; z-index: 0; margin: -1rem -0.625rem;
  border: 1.5px solid var(--sf-rule); border-radius: 0.75rem; background: color-mix(in srgb, var(--sf-teal) 6%, transparent); }
.sf-bd-app span { position: absolute; top: -0.75rem; right: 0.75rem; padding: 0 0.375rem; background: var(--sf-paper);
  font-family: var(--sf-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-teal); }
.sf-bd-node { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 0.5rem 0.75rem; border: 1px solid var(--sf-line); border-radius: 0.5rem;
  background: var(--sf-paper); font-size: 0.875rem; color: var(--sf-muted); line-height: 1.35; }
.sf-bd-node strong { display: block; font-size: 0.9375rem; color: var(--sf-ink); }
.sf-bd-ai { grid-area: ai; box-shadow: inset 0.1875rem 0 0 var(--sf-teal); }
.sf-bd-model { grid-area: model; border-style: dashed; border-color: var(--sf-rule); background: transparent; }
.sf-bd-rec { grid-area: rec; }
.sf-bd-appr { grid-area: appr; background: var(--sf-lime); border-color: var(--sf-lime); color: #0b2035; }
.sf-bd-appr strong { color: #0b2035; }
.sf-bd-ctrl { grid-area: ctrl; background: var(--sf-sheet); }
.sf-bd-pay { grid-area: pay; background: var(--sf-sheet); }
.sf-bd-fail { grid-area: fail; border: 1.5px dashed var(--sf-attention); background: var(--sf-attention-bg); color: var(--sf-ink); }
.sf-bd-fail strong { color: var(--sf-attention); }
.sf-bd-map .sf-bd-e1 { grid-area: e12; --at-x: 1.5rem; } .sf-bd-map .sf-bd-e2 { grid-area: e12; --at-x: 3.25rem; }
.sf-bd-e3 { grid-area: e3; } .sf-bd-e4 { grid-area: e4; } .sf-bd-e5 { grid-area: e5; }
.sf-bd-e6 { grid-area: e6; } .sf-bd-e7 { grid-area: e7; }
@container (min-width: 32rem) {
  .sf-bd-map { padding-top: 1.5rem; grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr);
    grid-template-areas: "ai e12 model" "e3 . ." "rec . ." "e4 . ." "appr e5 ctrl" ". . e6" "fail e7 pay";
    grid-template-rows: auto 2rem auto 2rem auto 2rem auto; }
  .sf-bd-map .sf-arrow { --at-x: 50%; }
  .sf-bd-app { grid-row: ai-start / appr-end; grid-column: ai-start / ai-end; margin: -1.25rem -0.875rem -1rem; }
  .sf-bd-app span { right: auto; left: 0.75rem; }
  .sf-bd-map .sf-bd-e1 { --at-y: 36%; } .sf-bd-map .sf-bd-e2 { --at-y: 64%; }
}

/* == Process: shared pieces == */
.sf-note { position: relative; z-index: 1; background: var(--sf-lime); color: #0b2035; padding: 0.5rem 0.75rem;
  border-radius: 0.25rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; box-shadow: 0 0.5rem 1rem -0.75rem rgb(11 32 53 / .5); }
.sf-note small { display: block; font-family: var(--sf-mono); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; }
.sf-status--decide { color: var(--sf-ink); }
.sf-status--decide::before { background: var(--sf-lime); border-color: #0b2035; }
.dark .sf-status--decide::before { border-color: var(--sf-lime); }

/* == Process overview: numbered project file == */
.sf-po-list { position: relative; display: grid; gap: 0.25rem; }
.sf-po-list::before { content: ""; position: absolute; left: 1.0625rem; top: 1.25rem; bottom: 1.25rem; border-left: 2px solid var(--sf-line); }
.sf-po-list li { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0.875rem; align-items: center; padding: 0.5rem 0; }
.sf-po-n { position: relative; z-index: 1; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--sf-paper); border: 2px solid var(--sf-teal); color: var(--sf-teal); font-family: var(--sf-mono); font-size: 0.8125rem; font-weight: 700; }
.sf-po-text { display: grid; gap: 0.0625rem; font-size: 0.875rem; color: var(--sf-muted); }
.sf-po-text strong { font-size: 1rem; color: var(--sf-ink); line-height: 1.3; }
.sf-po-glyph { position: relative; width: 3rem; height: 2.25rem; border: 1.5px solid var(--sf-rule); border-radius: 0.25rem; background: var(--sf-sheet); }
.sf-po-glyph::before, .sf-po-glyph::after { content: ""; position: absolute; }
.sf-po-glyph--sheet::before { inset: 0.5rem 0.5rem auto; height: 0.875rem; border-block: 2px solid var(--sf-rule); }
.sf-po-glyph--sheet::after { right: -0.25rem; bottom: -0.25rem; width: 0.875rem; height: 0.75rem; background: var(--sf-lime); }
.sf-po-glyph--map::before { left: 0.375rem; top: 0.5rem; width: 0.875rem; height: 1rem; border: 1.5px solid var(--sf-teal); border-radius: 0.125rem; }
.sf-po-glyph--map::after { right: 0.375rem; top: 0.5rem; width: 0.875rem; height: 1rem; border: 1.5px dashed var(--sf-muted); border-radius: 0.125rem; }
.sf-po-glyph--screen::before { inset: 0 0 auto; height: 0.4375rem; background: var(--sf-rule); }
.sf-po-glyph--screen::after { left: 0.375rem; right: 0.375rem; top: 0.875rem; height: 0.75rem; border-block: 2px solid var(--sf-teal); }
.sf-po-glyph--list::before { left: 0.375rem; top: 0.375rem; width: 0.5rem; height: 0.5rem; border: 1.5px solid var(--sf-teal); box-shadow: 0 0.75rem 0 -0.0625rem var(--sf-sheet), 0 0.75rem 0 0 var(--sf-teal); }
.sf-po-glyph--list::after { left: 1.25rem; right: 0.375rem; top: 0.5rem; height: 0.75rem; border-block: 2px solid var(--sf-rule); }
.sf-po-glyph--lanes::before { left: 0.375rem; right: 0.375rem; top: 0.5rem; border-top: 2px solid var(--sf-teal); }
.sf-po-glyph--lanes::after { left: 0.375rem; right: 1rem; top: 1.25rem; border-top: 2px solid var(--sf-rule); }
@container (max-width: 22rem) { .sf-po-glyph { display: none; } .sf-po-list li { grid-template-columns: 2.25rem minmax(0, 1fr); } }

/* == Process 01: requirements worksheet == */
.sf-rq .sf-body { background: repeating-linear-gradient(var(--sf-paper) 0 1.6rem, color-mix(in srgb, var(--sf-line) 45%, var(--sf-paper)) 1.6rem calc(1.6rem + 1px)); }
.sf-rq-sheet { display: grid; gap: 1rem; padding-left: 0.875rem; border-left: 2px solid color-mix(in srgb, var(--sf-attention) 35%, transparent); }
.sf-rq-h { margin: 0 0 0.25rem; font-family: var(--sf-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-teal); }
.sf-rq-list li { position: relative; padding: 0.125rem 0 0.125rem 1.125rem; font-size: 0.9375rem; }
.sf-rq-list li::before { content: ""; position: absolute; left: 0.125rem; top: 0.6em; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--sf-muted); }
.sf-rq-list--criteria li::before { top: 0.4em; width: 0.75rem; height: 0.75rem; left: 0; border-radius: 0.125rem; background: transparent; border: 1.5px solid var(--sf-teal); }
.sf-rq .sf-note { justify-self: end; transform: rotate(-1.5deg); max-width: 17rem; }
@container (min-width: 32rem) {
  .sf-rq-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
  .sf-rq .sf-note { align-self: end; justify-self: stretch; }
}

/* == Process 02: architecture map == */
.sf-ar-new, .sf-ar-existing { position: relative; border-radius: 0.625rem; padding: 1.25rem 0.875rem 0.875rem; }
.sf-ar-existing { padding: 0.875rem 0.875rem 1.25rem; margin-bottom: 0.5rem; }
.sf-ar-new { border: 1.5px solid var(--sf-teal); background: color-mix(in srgb, var(--sf-teal) 6%, transparent); }
.sf-ar-existing { border: 3px double var(--sf-rule); background: var(--sf-sheet); }
.sf-ar-tag { position: absolute; top: -0.75rem; left: 0.75rem; padding: 0 0.375rem; background: var(--sf-paper);
  font-family: var(--sf-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-teal); }
.sf-ar-existing .sf-ar-tag { top: auto; bottom: -0.75rem; color: var(--sf-muted); } /* label below, clear of the incoming arrows */
.sf-ar-flow, .sf-ro-flow { display: grid; grid-template-rows: auto 1.25rem auto 1.25rem auto; }
.sf-ro-flow { grid-template-rows: auto 1.25rem auto; }
.sf-ar-node { position: relative; z-index: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--sf-line); border-radius: 0.5rem; background: var(--sf-paper);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.sf-ar-node--core { box-shadow: inset 0.1875rem 0 0 var(--sf-teal); }
.sf-ar-node--existing { font-weight: 500; }
.sf-ar-flow .sf-arrow, .sf-ro-flow .sf-arrow { --at-x: 1.5rem; color: var(--sf-teal); }
.sf-ar-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sf-ar-links p { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: center; min-height: 3.25rem; line-height: 1.25; font-size: 0.875rem; color: var(--sf-muted); }
.sf-ar-links .sf-arrow { align-self: stretch; --at-x: 0.75rem; color: var(--sf-teal); }
.sf-ar-existing { margin-top: 0.875rem; }
.sf-ar-links { margin-bottom: -0.875rem; } /* arrows run on to the existing-systems border */
.sf-ar-links p { padding-bottom: 0.875rem; }
.sf-ar-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@container (min-width: 32rem) {
  .sf-ar-flow { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1.2fr) 2rem minmax(0, 1fr); align-items: center; }
  .sf-ro-flow { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); align-items: center; }
  .sf-ar-flow .sf-arrow, .sf-ro-flow .sf-arrow { align-self: stretch; min-height: 1rem; --at-x: 50%; }
  .sf-ar-links, .sf-ar-pair { width: 70%; margin-left: auto; margin-right: 8%; }
}

/* == Process 03: working build == */
.sf-bu .sf-body { display: grid; gap: 0.875rem; background: var(--sf-sheet); }
.sf-bu-app { background: var(--sf-paper); border: 1px solid var(--sf-line); border-radius: 0.5rem; overflow: hidden; }
.sf-bu-title { padding: 0.5rem 0.875rem; font-weight: 700; font-size: 1rem; border-bottom: 1px solid var(--sf-line); }
.sf-bu-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.sf-bu-table th { text-align: left; font-size: 0.875rem; font-weight: 600; color: var(--sf-muted); padding: 0.375rem 0.875rem; border-bottom: 1px solid var(--sf-line); }
.sf-bu-table td { padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--sf-line); vertical-align: baseline; }
.sf-bu-table tr:last-child td { border-bottom: 0; }
.sf-bu-note { justify-self: end; max-width: 17rem; transform: rotate(-1.5deg); margin-top: -0.25rem; }
.sf-bu-log { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: var(--sf-muted); }
.sf-bu-commit { position: relative; flex: none; width: 3.5rem; height: 0.75rem; }
.sf-bu-commit::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--sf-rule); }
.sf-bu-commit::after { content: ""; position: absolute; left: 0.25rem; top: 0; width: 0.625rem; height: 0.625rem; border-radius: 50%;
  background: var(--sf-paper); border: 2px solid var(--sf-teal); box-shadow: 1.25rem 0 0 -2px var(--sf-paper), 1.25rem 0 0 0 var(--sf-teal), 2.5rem 0 0 -2px var(--sf-paper), 2.5rem 0 0 0 var(--sf-teal); }
@container (max-width: 22rem) { .sf-bu-table th:nth-child(2), .sf-bu-table td:nth-child(2) { display: none; } .sf-bu-note { justify-self: stretch; max-width: none; } }

/* == Process 04: acceptance checklist == */
.sf-ac-list li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.125rem 0.625rem; padding: 0.75rem 0; border-bottom: 1px solid var(--sf-line); }
.sf-ac-list li:first-child { padding-top: 0.25rem; }
.sf-ac-list li:last-child { border-bottom: 0; }
.sf-ac-box { grid-row: 1 / span 2; width: 1rem; height: 1rem; margin-top: 0.1875rem; border: 1.5px solid var(--sf-rule); border-radius: 0.1875rem; }
.sf-ac-check { font-size: 0.9375rem; font-weight: 600; }
.sf-ac-type { grid-column: 2; font-size: 0.875rem; color: var(--sf-muted); }
.sf-ac-list .sf-status { grid-column: 2; }
.sf-ac-list .sf-ac-decide { margin-top: 0.25rem; padding: 0.75rem; border-radius: 0.5rem; border: 1.5px solid var(--sf-lime);
  background: color-mix(in srgb, var(--sf-lime) 22%, var(--sf-paper)); }
.sf-ac-decide .sf-ac-box { border-color: var(--sf-ink); }
@container (min-width: 30rem) {
  .sf-ac-list li { grid-template-columns: 1.5rem minmax(0, 1fr) 8.5rem 11rem; align-items: baseline; }
  .sf-ac-box { grid-row: auto; align-self: start; }
  .sf-ac-type, .sf-ac-list .sf-status { grid-column: auto; }
}

/* == Process 05: rollout and support lanes == */
.sf-ro-lanes { display: grid; gap: 1.25rem; }
.sf-ro-lane { border-top: 3px solid var(--sf-teal); padding-top: 0.75rem; }
.sf-ro-lane + .sf-ro-lane { border-top-color: var(--sf-rule); }
.sf-ro-h { margin: 0 0 0.625rem; font-family: var(--sf-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-teal); }
.sf-ro-aside { margin-top: 0.75rem; padding-left: 0.75rem; border-left: 3px solid var(--sf-lime); font-size: 0.9375rem; }
.sf-ro-support { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sf-ro-support li { padding: 0.375rem 0.75rem; border: 1px solid var(--sf-line); border-radius: 0.375rem; background: var(--sf-sheet); font-size: 0.9375rem; }
.sf-ro-cycle { margin-top: 0.875rem; font-size: 0.9375rem; font-weight: 600; color: var(--sf-ink); }
.sf-ro-cycle span { color: var(--sf-teal); padding: 0 0.125rem; }
@container (min-width: 40rem) { .sf-ro-lanes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.5rem; } }

/* == About: history in brief == */
.sf-ab-line { position: relative; display: grid; gap: 1.125rem; padding-left: 1.5rem; }
.sf-ab-line::before { content: ""; position: absolute; left: 0.3125rem; top: 0.5rem; bottom: 0.5rem; border-left: 2px solid var(--sf-teal); }
.sf-ab-line li { position: relative; display: grid; align-content: start; gap: 0.125rem; font-size: 0.9375rem; color: var(--sf-muted); }
.sf-ab-line li::before { content: ""; position: absolute; left: -1.5rem; top: 0.25rem; width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: var(--sf-paper); border: 2px solid var(--sf-teal); }
.sf-ab-line .sf-ab-company::before { background: var(--sf-teal); }
.sf-ab-line strong { font-size: 1.0625rem; color: var(--sf-ink); line-height: 1.3; }
.sf-ab-when { font-family: var(--sf-mono); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-teal); }
.sf-ab-who { justify-self: start; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.sf-ab-name { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 1rem; align-items: center; margin-top: 1.5rem;
  padding: 0.875rem 1rem; background: var(--sf-sheet); border-radius: 0.5rem; }
.sf-ab-letters { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.sf-ab-letters span { display: grid; place-items: center; width: 2rem; height: 2.25rem; border: 1.5px solid var(--sf-rule); border-radius: 0.25rem;
  background: var(--sf-paper); font-family: var(--sf-display); font-size: 1.125rem; font-weight: 700; color: var(--sf-ink); }
.sf-ab-name p:last-child { font-size: 0.9375rem; color: var(--sf-muted); }
@container (max-width: 20rem) { .sf-ab-name { grid-template-columns: 1fr; } }
@container (min-width: 32rem) {
  .sf-ab-line { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding: 1.5rem 0 0; }
  .sf-ab-line::before { left: 0.375rem; right: 0.375rem; top: 0.375rem; bottom: auto; border-left: 0; border-top: 2px solid var(--sf-teal); }
  .sf-ab-line li::before { left: 0; top: -1.5rem; }
}

/* == Home hero: one custom application and the existing systems it uses ==
   Artwork on a fixed navy stage in both themes; text sits on off-white panels. */
.hero-art:has(> .hh) { container-type: inline-size; }
.hh { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center;
  padding: 1.25rem 1rem; border-radius: 5px; background: linear-gradient(160deg, #0b2035, #15395a); color: #0b2035;
  font-family: "DM Sans", system-ui, sans-serif; line-height: 1.4; isolation: isolate; overflow-wrap: anywhere; }
.hh * { box-sizing: border-box; }
.hh :where(p, ul) { margin: 0; padding: 0; list-style: none; }
.hh-window { position: relative; z-index: 1; background: #fbfbf7; border-radius: 0.625rem; overflow: hidden;
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / .7); }
.hh .hh-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; background: #eef1ec; border-bottom: 1px solid #d3dbd8;
  font-size: 0.9375rem; font-weight: 700; color: #0b2035; }
.hh-dots { display: inline-flex; gap: 0.3125rem; }
.hh-dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #b7c3c0; }
.hh table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.hh th { text-align: left; font-size: 0.875rem; font-weight: 600; color: #44586a; padding: 0.5rem 0.875rem; border-bottom: 1px solid #d3dbd8; }
.hh td { padding: 0.625rem 0.875rem; border-bottom: 1px solid #e3e8e6; vertical-align: baseline; }
.hh-status { display: inline-flex; align-items: baseline; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: #44586a; }
.hh-status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.hh-status--on { color: #126d70; } .hh-status--on::before { background: currentColor; }
.hh-status--wait { color: #8a4b00; }
.hh .hh-foot { padding: 0.625rem 0.875rem; font-size: 0.875rem; color: #126d70; font-weight: 600; }
.hh .hh-foot::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem; border-radius: 50%; background: #126d70; }
/* Connectors from the application to each existing system, drawn behind the rail cards. */
.hh-rail { position: relative; display: flex; flex-direction: column-reverse; }
.hh .hh-rail-h { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #9bcdc7; margin: 0.625rem 0 0; }
.hh-rail ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.hh-rail li { position: relative; display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem;
  background: #fbfbf7; border: 3px double #b7c3c0; font-size: 0.8125rem; color: #44586a; }
.hh-rail li::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 100%; height: 1.5rem; border-left: 2px solid #9bcdc7; }
.hh-rail strong { font-size: 0.9375rem; color: #0b2035; }
.hero-art .hh-cap { display: block; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted, #44586a); }
.dark .hero-art .hh-cap { color: #b5c4cc; }
@container (max-width: 26rem) { .hh td:nth-child(2), .hh th:nth-child(2) { display: none; } }
@container (min-width: 38rem) {
  .hh { grid-template-columns: minmax(0, 1fr) 11.5rem; gap: 2.25rem; padding: 2.25rem 1.75rem; min-height: 26rem; }
  .hh table { font-size: 0.9375rem; }
  .hh td { padding: 0.8125rem 1rem; }
  .hh th { padding: 0.625rem 1rem; }
  .hh .hh-bar { padding: 0.75rem 1rem; font-size: 1rem; }
  .hh .hh-foot { padding: 0.8125rem 1rem; }
  .hh-rail { display: block; }
  .hh .hh-rail-h { margin: 0 0 0.625rem; }
  .hh-rail ul { grid-template-columns: none; gap: 1rem; }
  .hh-rail li::before { left: auto; bottom: auto; right: 100%; top: 50%; height: 0; width: 2.25rem; border-left: 0; border-top: 2px solid #9bcdc7; }
}

/* == Narrow or enlarged-text containers (rem queries grow with text size) ==
   Sample tables become one block per row (header row kept for screen readers), and the Home
   rail becomes one column joined to the window by a single trunk line. */
@container (max-width: 16rem) {
  .hh table, .hh tbody, .hh tr, .hh td, .sf-bu-table, .sf-bu-table tbody, .sf-bu-table tr, .sf-bu-table td { display: block; }
  .hh thead, .sf-bu-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hh tr, .sf-bu-table tr { padding: 0.5rem 0.875rem; border-bottom: 1px solid #e3e8e6; }
  .sf-bu-table tr { border-bottom-color: var(--sf-line); }
  .hh td, .sf-bu-table td { padding: 0; border: 0; }
  .hh td:first-child, .sf-bu-table td:first-child { font-weight: 600; }
  .sf-bu-table td:nth-child(2) { display: block; color: var(--sf-muted); }
  .hh-rail ul { grid-template-columns: 1fr; position: relative; padding-left: 1.25rem; }
  .hh-rail ul::before { content: ""; position: absolute; left: 0.375rem; top: -1.5rem; bottom: 1.5rem; border-left: 2px solid #9bcdc7; }
  .hh-rail li::before { left: -0.875rem; top: 50%; bottom: auto; height: 0; width: 0.875rem; border-left: 0; border-top: 2px solid #9bcdc7; }
}

/* At very small text-relative widths, preserve whole labels and separate group headings
   from connectors. These layouts also serve readers who enlarge the root text size. */
@container (max-width: 16rem) {
  .sf-bu-log { flex-direction: column; align-items: flex-start; gap: .5rem; }
}
@container (max-width: 12rem) {
  .sf-ar-new, .sf-ar-existing { padding: .75rem .25rem; }
  .sf-ar-tag { position: static; margin-bottom: .5rem; padding: 0; background: transparent; }
  .sf-ar-node { padding: .5rem; }
  .sf-ar-pair { grid-template-columns: 1fr; }
  .sf-ar-links { grid-template-columns: 1fr; gap: .25rem; border-left: 2px solid var(--sf-teal);
    margin-left: .75rem; padding: .5rem 0 .5rem .5rem; }
  .sf-ar-links p { display: block; min-height: 0; }
  .sf-ar-links .sf-arrow { display: none; }
  .sf-po-list::before { display: none; }
  .sf-po-list li { grid-template-columns: 1fr; gap: .25rem; }
  .sf-po-n { justify-self: start; }
  .sf-bd-map { grid-template-rows: auto 4rem auto 1.25rem auto 1.25rem auto 2rem auto 1.25rem auto 1.25rem auto; }
  .sf-bd-app { margin-top: -2rem; }
  .sf-bd-app span { left: auto; right: 0; padding: 0 .25rem; text-align: right; }
  .sf-bd-map .sf-bd-e1 { --at-x: .5rem; }
  .sf-bd-map .sf-bd-e2 { --at-x: 1.25rem; }
}