/* Sumvant v5: the overhaul design system ("Company/Reference/Site Overhaul Spec.md", "Look and feel" + Revisions 2 to 12).
   Revision 12 (R12.8): plain surfaces. The graph paper grid and the hero canvas are gone, every section sits on one white
   surface and the footer is the one dark band; no gradients, no glows, no tilt or spotlight on the tiles, no sheen on the
   buttons; a third more section padding; body line height 1.6; blue is the one accent in the interface (the drawings keep
   their green tick and gold person as marks of meaning).
   Revision 6: the light theme. White and light blue everywhere; the navy stages retire (a .stage is a soft white to
   sky wash with the blueprint grid); the footer is the one deep band. Every glow became a tint or a soft shadow;
   white text sits only on blueDeep (buttons) and on the footer.
   Revision 4: one type scale in tokens (--t-*), one button size site wide, copy in two layers on every tile,
   eyebrows without numbers, the systems name grid in place of the marquee, and motion that carries the weight
   where text came out (the problem tiles; the typed spec lines, decoding eyebrows, proof loops, sheen and play
   pulse were retired by Revision 12).
   Light canvas, light stages. White lab surfaces on a faint blueprint grid; sky stages where the big
   animations play. Green only for verified, gold only for a person asked, blue for data in motion. One section pattern (eyebrow, headline, one lead, tiles), one tile component
   in three sizes. Jost for headlines, Inter for text, IBM Plex Mono for labels, specs and numbers, all
   self hosted from assets/fonts (licences in tools/fonts). Every listed page loads this sheet; the
   unlisted brand and demo pages keep editorial.css. Standing rule for shipped files: no dollar sign. */

/* ---- fonts: latin subsets built by tools/build-fonts.py ---- */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/jost-500-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/inter-400-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plexmono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plexmono-500.woff2") format("woff2"); }
/* metric matched stand ins: a late font swaps in without moving the layout */
@font-face { font-family: "Jost Fallback"; src: local("Avenir Next"), local("Futura"), local("Helvetica Neue"), local("Arial"); size-adjust: 97%; ascent-override: 105%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; src: local("Menlo"), local("Courier New"); ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; }

:root {
  /* the light theme (R6.1), contrast checked against white, mist and sky */
  --canvas: #ffffff;
  --mist: #f5f9ff;
  --sky: #eaf3ff;
  --sky2: #dcebff;
  --line: #c9dcf3;
  --grid: rgba(47, 111, 235, .08);
  --blue: #2f6feb;
  --blue-deep: #1a4fbf;
  --blue-soft: #8db8f5;
  --ink: #0f1e36;
  --ink2: #44546a;
  --ink3: #5f6e85;
  --verified: #0e7a4f;
  --routed: #b57f1f;
  --routed-ink: #8a5f12;
  /* the names the rules below still use, mapped onto the light tokens */
  --night: var(--ink);
  --mut: var(--ink2);
  --hair: var(--line);
  --hair-2: rgba(47, 111, 235, .4);
  --grid-line: var(--grid);
  --signal: var(--blue);
  --tile-shadow: none;   /* R12.8: plain surfaces, a hairline border does the work */
  --tile-shadow-lit: none;
  --head: "Jost", "Jost Fallback", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --out: cubic-bezier(.19, 1, .22, 1);
  --col: 1200px;
  --gap: 24px;
  --gutter: 24px;
  --mast-h: 68px;
  --radius: 16px;
  /* the type scale (R4.2): no lead, body or label is ever larger than the headline it sits under */
  --t-display: clamp(44px, 6vw, 76px); --lh-display: 1.02;
  --t-section: clamp(32px, 4vw, 48px); --lh-section: 1.08;
  --t-tile: 20px;
  --t-lead: 18px;
  --t-body: 16px;
  --t-spec: 12px; --ls-spec: .08em;
  --t-stat: clamp(40px, 5vw, 56px);
  --t-stat-label: 14px;
  --btn-h: 44px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--mast-h) + 16px); background: var(--canvas); }
body {
  margin: 0; color: var(--ink); background: var(--canvas);
  font: 400 var(--t-body)/1.6 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased;
  transition: opacity .17s linear;
}
body.leaving { opacity: 0; }
::selection { background: rgba(47, 111, 235, .2); }
a { color: inherit; }
img, video, canvas, svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--head); font-weight: 600; letter-spacing: -.02em; line-height: var(--lh-section); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 8px; font: 500 14px var(--body); }
.skip:focus { top: 12px; }

/* ---- the grid: 12 columns, 1200 wide, 24 gaps ---- */
.wrap { width: min(var(--col), 100% - 2 * var(--gutter)); margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }

/* ---- type roles ---- */
.eyebrow { font: 500 var(--t-spec)/1.4 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--blue-deep); }
.lead { max-width: 60ch; font-size: var(--t-lead); line-height: 1.6; color: var(--ink); }
.stage .lead { color: var(--ink2); }
.copy { max-width: 60ch; font-size: var(--t-body); line-height: 1.6; color: var(--ink); }
.copy + .copy { margin-top: 14px; }
.stage .copy { color: var(--ink2); }
.copy a, .lead a, .note a { color: var(--blue-deep); text-decoration: underline; text-decoration-color: rgba(26, 79, 191, .4); text-underline-offset: 4px; }
.copy a:hover, .lead a:hover, .note a:hover { text-decoration-color: currentColor; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* one button size site wide, header included (R4.4): 44 px tall, 20 px side padding, Inter 15 px 500, 10 px corners;
   primary solid, secondary (.second) outline; Book a demo (.demo) gets a soft signal sheen on hover (R4.10 item 5) and
   See it work (.play) a play glyph that pulses once on entry */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--btn-h); min-height: var(--btn-h); padding: 0 20px; border: 1px solid var(--blue-deep); border-radius: 10px; background: var(--blue-deep); color: #fff; font: 500 15px/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s; }
.btn:hover { background: #0f2f78; border-color: #0f2f78; }
.btn[disabled] { opacity: .6; cursor: default; }
.btn > * { position: relative; z-index: 1; }
.btn.second { background: #fff; border-color: var(--line); color: var(--blue-deep); }
.btn.second:hover { background: var(--sky); border-color: var(--blue); }
.btn .play-glyph { display: block; width: 12px; height: 12px; flex: none; }
.btn .play-glyph path { fill: currentColor; }
.tlink { display: inline-flex; align-items: center; gap: 6px; font: 500 15px/1.4 var(--body); color: var(--blue-deep); text-decoration: underline; text-decoration-color: rgba(26, 79, 191, .4); text-underline-offset: 5px; }
.tlink:hover { text-decoration-color: currentColor; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li, .tag-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.tags li.prod, .tag-pill.prod { border-color: rgba(14, 122, 79, .45); color: var(--verified); }

/* ============================================================
   THE SECTION PATTERN: eyebrow, headline, one lead, tiles
   ============================================================ */
.sec { padding: clamp(84px, 12vw, 160px) 0; }   /* R12.8: a third more than the clamp(64px, 9vw, 120px) of Revisions 4 to 11 */
/* quiet motion (R14.3): with script, every section after the first waits below its place and rises as it first scrolls into
   view, 200 ms, once (assets/js/motion.js adds .in); the logo wall's rows follow it in turn. A section on screen at load
   shows at once (.now). Without script nothing is hidden; under reduced motion the reveal is instant. */
html.js main > section:not(:first-child) { opacity: 0; transform: translateY(14px); transition: opacity .2s ease-out, transform .2s ease-out; }
html.js main > section.in { opacity: 1; transform: none; }
html.js main > section.now { transition: none; }
html.js .wall .row { opacity: 0; transform: translateY(10px); transition: opacity .24s ease-out, transform .24s ease-out; }
html.js section.in .wall .row { opacity: 1; transform: none; }
html.js section.in .wall .row:nth-child(2) { transition-delay: .06s; } html.js section.in .wall .row:nth-child(3) { transition-delay: .12s; } html.js section.in .wall .row:nth-child(4) { transition-delay: .18s; } html.js section.in .wall .row:nth-child(5) { transition-delay: .24s; } html.js section.in .wall .row:nth-child(6) { transition-delay: .3s; } html.js section.in .wall .row:nth-child(7) { transition-delay: .36s; } html.js section.in .wall .row:nth-child(8) { transition-delay: .42s; } html.js section.in .wall .row:nth-child(9) { transition-delay: .48s; }
html.js section.now .wall .row { transition-delay: 0s; transition: none; }
.sec + .sec:not(.stage) { padding-top: 0; }
.stage + .sec:not(.stage) { padding-top: clamp(84px, 12vw, 160px); }
.sec-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.sec-head .eyebrow { margin-bottom: 14px; }
.sec-head h2 { font-size: var(--t-section); line-height: var(--lh-section); }
.sec-head .lead { margin-top: 16px; }
.sec-foot { margin-top: clamp(24px, 3vw, 36px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.note { color: var(--ink3); font-size: 14px; }
/* a stage (R12.8): the same white surface as the rest of the page, set off by a hairline above and below; the hero, the films,
   the case study band and the final call sit on one */
.stage { position: relative; color: var(--ink); background: var(--canvas); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
main > .stage:first-child { border-top: 0; }
.stage h1, .stage h2, .stage h3 { color: var(--ink); }
/* page openers: a stage with the eyebrow, the headline and one lead */
.opener { padding: clamp(72px, 10.5vw, 128px) 0 clamp(64px, 8vw, 106px); }
.opener h1 { margin-top: 16px; max-width: 12em; font-size: var(--t-display); letter-spacing: -.026em; line-height: var(--lh-display); }
.opener .lead { margin-top: 20px; }
.opener .actions { margin-top: 26px; }
.opener.has-ill .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.opener .ill.h { justify-self: end; }
@media (max-width: 899px) { .opener.has-ill .wrap { grid-template-columns: 1fr; } .opener .ill.h { justify-self: start; max-width: 360px; } }

/* ============================================================
   TILES: one component, three sizes
   ============================================================ */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.tiles.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 120px; padding: 24px 24px 22px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: inherit; text-decoration: none;
  transition: border-color .25s;
}
.tile.w2 { grid-column: span 2; }
.tile.xl { grid-column: span 2; grid-row: span 2; }
.tile:hover, .tile.lit { border-color: var(--blue); background: var(--mist); }   /* hover (R14.3): a clear state, the border blue and the surface mist; nothing lifts or lights (R12.8) */
.tile > * { position: relative; }
.tile > .ill { margin-bottom: 4px; }
.tile .tag { font: 500 11px/1.4 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--blue-deep); }
.tile h3, .tile .title { font: 600 var(--t-tile)/1.2 var(--head); letter-spacing: -.015em; color: var(--ink); }
.tile .line { font-size: var(--t-body); line-height: 1.6; color: var(--mut); }
.tile .spec { margin-top: auto; padding-top: 8px; font: 500 var(--t-spec)/1.5 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--blue-deep); }
.tile .spec b { font-weight: 500; color: var(--ink); }
.tile .tags { margin-top: auto; padding-top: 10px; }
a.tile:hover h3, a.tile:hover .title { text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 4px; }
.tile .num { font: 500 clamp(28px, 3vw, 36px)/1 var(--mono); color: var(--blue-soft); }

/* ============================================================
   MASTHEAD and the phone menu (tiles, full screen)
   ============================================================ */
/* white at 85% with a backdrop blur (on a pseudo element: a filter on the header itself would become the containing block
   of the fixed phone menu) and a hairline bottom border */
.mast { position: sticky; top: 0; z-index: 100; height: var(--mast-h); background: #fff; border-bottom: 1px solid var(--line); color: var(--ink); }
.mast-in { height: 100%; display: flex; align-items: center; gap: 20px; }
.logo { display: inline-flex; align-items: center; color: var(--ink); line-height: 1; }
.logo .wm { display: block; width: 7.6em; height: 1.13em; font-size: 18px; fill: currentColor; }
/* the mark beside the wordmark (R10.1, stamped by tools/stamp-shell.py from assets/img/mark/): its ink 1.2 capitals tall
   (the wordmark's capitals are 100 of its 111.1 box = 1.017em, so 1.2205em) and centred on them, the gap one trace stroke.
   The masthead carries mark-small, boxed to its ink 66 by 66 (trace 9 wide: gap 9/66 of the height); the footer mark-dark,
   boxed 88.25 by 68.25 (trace 8: gap 8/68.25). On load the masthead mark draws itself once: the trace from the in dot to
   the out dot over 700 ms, then the ring fills in; after that it is still, and under reduced motion it is only still. */
.logo .mk { display: block; flex: none; font-size: 18px; height: 1.2205em; overflow: visible; }
.mast .logo .mk { width: 1.2205em; margin-right: .1664em; }
.foot .logo .mk { width: 1.5781em; margin-right: .1431em; }
.mast .logo .mk .trace { stroke-dasharray: 100; stroke-dashoffset: 100; animation: mk-trace .7s cubic-bezier(.45, 0, .2, 1) .1s forwards; }
.mast .logo .mk .out { opacity: 0; animation: mk-show .15s linear .72s forwards; }
.mast .logo .mk .ring { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mk-ring .3s cubic-bezier(.2, .9, .3, 1.15) .8s forwards; }
@keyframes mk-trace { to { stroke-dashoffset: 0; } }
@keyframes mk-show { to { opacity: 1; } }
@keyframes mk-ring { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .mast .logo .mk .trace, .mast .logo .mk .out, .mast .logo .mk .ring { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; }
}
.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-links a { padding: 8px 12px; border-radius: 8px; font: 500 14.5px/1 var(--body); color: var(--ink2); text-decoration: none; transition: color .2s, background .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); background: var(--sky); }
.nav-links .only-menu { display: none; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: var(--btn-h); padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: 500 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.menu-btn i { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
@media (max-width: 1023px) {
  .menu-btn { display: inline-flex; }
  .nav-links { display: none; }
  .nav-links.open {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start;
    position: fixed; inset: var(--mast-h) 0 0 0; z-index: 90; margin: 0; padding: 20px var(--gutter) 40px; overflow: auto;
    background: var(--canvas);
  }
  .nav-links.open a { display: flex; align-items: flex-end; min-height: 108px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font: 500 19px/1.2 var(--head); letter-spacing: -.01em; }
  .nav-links.open .only-menu { display: flex; grid-column: 1 / -1; background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
}
@media (max-width: 599px) {
  .nav-right .btn { display: none; }
  .nav-links.open { grid-template-columns: 1fr; }
  .nav-links.open a { min-height: 64px; }
}

/* ============================================================
   HOME 1 · HERO: two columns, the text and four plain points left, the form card right, on the plain surface (R12.8)
   ============================================================ */
.hero { position: relative; padding: clamp(72px, 9vw, 128px) 0 clamp(84px, 12vw, 170px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.hero h1 { margin: 18px 0 0; max-width: 12em; font-size: clamp(40px, 5.2vw, 64px); font-weight: 600; letter-spacing: -.028em; line-height: var(--lh-display); }   /* the R5.1 headline is 67 characters; one step under --t-display keeps it to four lines beside the card */
.hero .lead { margin-top: 22px; }
/* the six capability tiles (restored by the final ruling): a plain headline, then a mono spec line, printed as written (R12.8a) */
.caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.caps .tile { min-height: 0; padding: 16px 16px 14px; gap: 6px; }
.caps .tile .ill { margin-bottom: 2px; }
.caps .tile .title { display: block; font: 600 var(--t-tile)/1.2 var(--head); letter-spacing: -.015em; color: var(--ink); }
.caps .tile .spec { margin-top: 0; padding-top: 2px; min-height: 1.5em; color: var(--blue-deep); }
.hero .actions { margin-top: 22px; }
.hero-card { position: relative; padding: 26px 24px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); }
.hero-card h2 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.hero-card .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.hero-card .f { display: flex; flex-direction: column; gap: 6px; }
.hero-card .f.wide { grid-column: 1 / -1; }
.hero-card label { font: 500 11.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep); }
.hero-card label small { font-weight: 400; letter-spacing: 0; text-transform: none; }
.hero-card input, .hero-card textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: 400 15.5px/1.4 var(--body); transition: border-color .2s, box-shadow .2s; }
.hero-card textarea { min-height: 96px; resize: vertical; }
.hero-card input:focus, .hero-card textarea:focus { outline: none; border-color: var(--blue-deep); box-shadow: 0 0 0 3px rgba(26, 79, 191, .22); }
.hero-card .send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.hero-card .send .btn { min-width: 120px; }
.hero-card .reply { font-size: 14px; color: var(--ink2); }
.hero-card .fine { margin-top: 12px; font-size: 12.5px; color: var(--ink3); }
.hero-card .status { margin-top: 14px; font-size: 15px; }
.hero-card .status:empty { display: none; }
.hero-card .status.ok { color: var(--verified); font-weight: 500; }
.hero-card .status.err { color: var(--ink); }
.hero-card .status.err a { color: var(--blue-deep); }
.hero-card.done .fields, .hero-card.done .send, .hero-card.done .fine { display: none; }
.hero-card.done .status.ok { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 16px; border: 1px solid rgba(14, 122, 79, .35); border-radius: 10px; background: rgba(14, 122, 79, .08); }
@media (max-width: 959px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } .hero-card { max-width: 640px; } }
@media (max-width: 399px) { .hero .actions .btn { width: 100%; } }
@media (max-width: 519px) { .caps { grid-template-columns: 1fr; } .hero-card .fields { grid-template-columns: 1fr; } }

/* ============================================================
   HOME 2 · PROOF: the number (Jost, tabular), the label and its one line of context, printed as they are (R12.8a)
   ============================================================ */
.counters .tile { min-height: 150px; }
.counter > .ill.g { width: 28px; height: 28px; margin-bottom: 0; }
.counter b { display: block; font: 600 var(--t-stat)/1 var(--head); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); }
.counter b .tick { display: inline-block; margin-left: 6px; font-size: .45em; vertical-align: .5em; color: var(--verified); }
.counter .label { display: block; min-height: 1.4em; font: 500 var(--t-stat-label)/1.4 var(--body); color: var(--ink); }
.counter .ctx { display: block; font-size: var(--t-stat-label); line-height: 1.6; color: var(--ink2); }
@keyframes blink { to { opacity: 0; } }
/* ============================================================
   THE LOGO WALL (R13.2, Home and Solutions; stamped by tools/stamp-wall.py): nine category rows, the small mono label on
   the left, then equal tiles with one monochrome logo each, centred, sized by tools/build-logos.mjs to one visual height
   (--w and --h at 1280; phones scale them), no borders inside a row, a hairline between rows, no hover colour. Under the
   wall one plain line names what has no logo, and the ownership line is last.
   ============================================================ */
.wall .rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.wall .row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px 24px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.wall .cat { padding-top: 26px; font: 500 var(--t-spec)/1.4 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--blue-deep); }
.wall .tiles { display: grid; grid-template-columns: repeat(auto-fill, 160px); gap: 8px; margin: 0; padding: 0; list-style: none; }
.wall .cell { display: flex; align-items: center; justify-content: center; width: 160px; height: 76px; padding: 16px; background: #fff; }   /* its own class: the site's .tile component (border, radius, column layout) stays out of the wall */
.wall .cell { position: relative; cursor: default; border-radius: 10px; transition: background .18s; }
.wall .cell img { display: block; width: var(--w); height: var(--h); max-width: 128px; max-height: 40px; object-fit: contain; transition: opacity .18s; }
/* the one touch (ruling of 2026-10-25): on hover or keyboard focus the logo shows in its owner's colours and the product name
   appears beneath it; a white on dark original (.dark) shows on an ink cell; everything else stays monochrome */
.wall .cell img.color { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; }
.wall .cell::after { content: attr(data-name); position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font: 500 9.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep); opacity: 0; transition: opacity .18s; pointer-events: none; }
.wall .cell:hover img.mono, .wall .cell:focus-visible img.mono { opacity: 0; }
.wall .cell:hover img.color, .wall .cell:focus-visible img.color { opacity: 1; }
.wall .cell:hover::after, .wall .cell:focus-visible::after { opacity: 1; }
.wall .cell:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.wall .cell.dark:hover, .wall .cell.dark:focus-visible { background: var(--ink); }
.wall .cell.dark:hover::after, .wall .cell.dark:focus-visible::after { color: #8db8f5; }
.wall .also { margin-top: 18px; font-size: var(--t-stat-label); line-height: 1.6; color: var(--ink2); }
.wall .owners { margin-top: 8px; }
@media (max-width: 899px) { .wall .row { grid-template-columns: 1fr; gap: 8px; } .wall .cat { padding-top: 0; } }
@media (max-width: 599px) {
  .wall .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .wall .cell { width: auto; height: 60px; padding: 10px; }
  .wall .cell img { width: calc(var(--w) * .78); height: calc(var(--h) * .78); max-width: 92px; max-height: 32px; }
  .wall .cell::after { bottom: 3px; font-size: 8.5px; }
}

/* ============================================================
   HOME 4 · SEE IT WORK: two instrument screens
   ============================================================ */
.instrument { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; background: var(--mist); color: var(--ink); }
.instrument .light { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.instrument .light i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .3s; }
.instrument.live .light i { background: var(--blue); }
.instrument.live .light::after { content: "LIVE"; }
.instrument .light::after { content: "STANDBY"; }
.words { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.words li { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); transition: color .3s; }
.words li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .3s; }
.words li.on { color: var(--ink); }
.words li.on::before { background: var(--blue); }
.shift-pair { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--mist); padding: 14px; row-gap: 14px; }
.screen { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.screen .bezel { padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.screen .bezel-head { display: flex; align-items: center; gap: 10px; padding: 0 4px 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.screen .bezel-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); opacity: .9; }
.screen figcaption { padding: 0 4px; font-size: 14px; line-height: 1.6; color: var(--ink2); }
.screen figcaption b { color: var(--ink); font-weight: 500; }
.screen figcaption button { margin-left: 10px; padding: 0; border: 0; background: none; color: var(--blue-deep); font: 500 13px/1.5 var(--body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.crop { position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--w) / var(--h); border-radius: 6px; background: #fff; }
.crop video { position: absolute; left: 0; top: 0; transform: translate(calc(-100% * var(--x) / var(--fw)), calc(-100% * var(--y) / var(--fh))); width: calc(100% * var(--fw) / var(--w)); height: auto; max-width: none; aspect-ratio: var(--fw) / var(--fh); object-fit: cover; clip-path: inset(calc(100% * var(--y) / var(--fh)) calc(100% * (var(--fw) - var(--x) - var(--w)) / var(--fw)) calc(100% * (var(--fh) - var(--y) - var(--h)) / var(--fh)) calc(100% * var(--x) / var(--fw))); }
.crop.app { --fw: 1920; --fh: 1052; --x: 0; --y: 90; --w: 1198; --h: 962; }
.crop.console { --fw: 720; --fh: 540; --x: 0; --y: 0; --w: 720; --h: 540; }
@media (max-width: 899px) { .shift-pair .crop { max-height: min(420px, 44vh); } }
@media (min-width: 900px) { .shift-pair { grid-template-columns: 1fr 1fr; column-gap: 14px; align-items: start; } .shift-pair .crop.app { aspect-ratio: 4 / 3; } }

/* ============================================================
   HOME 2 · WHAT WE BUILD (R14.1): the eyebrow, the headline and three short paragraphs in one reading column, then the
   proof numbers row (the counters) under them
   ============================================================ */
.story-text h2 { max-width: 760px; margin-top: 14px; font-size: var(--t-section); line-height: var(--lh-section); }
.story-text .copy { margin-top: 18px; max-width: 64ch; }
.story-text h2 + .copy { margin-top: 28px; }
.story .counters { margin-top: clamp(32px, 5vw, 56px); }

/* ============================================================
   HOME 7 · INDUSTRIES (tags), 8 · HOW IT WORKS, 9 · PLANS (tall tiles with meters)
   ============================================================ */
.industries .tile { min-height: 190px; }
.industries .yours { grid-column: 1 / -1; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 28px; align-items: center; }
.industries .yours h3 { font-size: 26px; }
.industries .yours .line { max-width: 60ch; color: var(--ink); }
.industries .yours ul.bullets { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.industries .yours ul.bullets li { position: relative; padding-left: 18px; font-size: 15px; color: var(--mut); }
.industries .yours ul.bullets li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 1.5px; background: var(--blue); }
.industries .yours .actions { margin-top: 18px; }
@media (max-width: 699px) { .industries .yours { grid-template-columns: 1fr; } .industries .yours .ill.s { width: 120px; height: 120px; } }
.steps .tile { min-height: 180px; }
.plan { min-height: 0; padding: 24px 24px 22px; }
.plan h3 { font-size: 26px; }
.plan .in-a-line { font-size: var(--t-body); line-height: 1.6; color: var(--mut); }
.plan dl { display: grid; gap: 0; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.plan dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.plan dt { font: 500 11px/1.6 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--blue-deep); }
.plan dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.meters { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.meters li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: center; font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.meters .bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.meters .bar i { display: block; height: 8px; border-radius: 3px; background: var(--sky2); overflow: hidden; }
.meters .bar i::after { content: ""; display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--out); }
.meters .bar i.on::after { transition-delay: var(--d, 0s); }
.meters.fill .bar i.on::after { transform: scaleX(1); }

/* ============================================================
   HOME 10 · CASE STUDY band, the case study page (the run replay retired in Revision 7; See it run is below)
   ============================================================ */
.case .counters .tile { min-height: 140px; }
.counters.six, .counters.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ============================================================
   FAQ and the IT questions: an accordion of tiles
   ============================================================ */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px var(--gap); align-items: start; }
.faq.one { grid-template-columns: 1fr; max-width: 860px; }
.faq details { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color .25s; }
.faq details:hover, .faq details[open] { border-color: var(--hair-2); }
.faq summary { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; font: 600 var(--t-tile)/1.3 var(--head); letter-spacing: -.015em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { margin-left: auto; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font: 400 16px/1 var(--mono); color: var(--blue-deep); transition: transform .3s var(--out); }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -6px; border-radius: var(--radius); }
.faq .a { padding: 0 20px 20px; font-size: var(--t-body); line-height: 1.6; color: var(--ink); }
.faq .a p + p { margin-top: 10px; }
.faq .a a { color: var(--blue-deep); text-decoration-color: rgba(26, 79, 191, .4); text-underline-offset: 4px; }
.faq .a a:hover { text-decoration-color: currentColor; }
@media (max-width: 759px) { .faq { grid-template-columns: 1fr; } .faq summary { font-size: 18px; } }

/* ============================================================
   THE FINAL CALL TO ACTION (a stage) and the footer (the one deep band)
   ============================================================ */
.cta { text-align: center; padding: clamp(96px, 13vw, 170px) 0; }
.cta h2 { font-size: var(--t-section); line-height: var(--lh-section); max-width: 14em; margin: 0 auto; }
.cta .lead { margin: 18px auto 0; text-align: center; }
.cta .actions { justify-content: center; gap: 14px 22px; margin-top: 32px; }
.cta .or { color: var(--ink2); font-size: 15px; }
.cta .or a { color: var(--blue-deep); text-decoration-color: rgba(26, 79, 191, .4); text-underline-offset: 4px; }
/* the footer is the one deep band: ink, white text, blueSoft links, the brand anchor */
.foot { padding: 48px 0 40px; background: var(--ink); color: #fff; }
.foot .top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.foot .logo { color: #fff; }
.foot .tagline { font: 500 15px/1.4 var(--head); color: #fff; letter-spacing: -.01em; }
.foot .links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.foot .links a { display: flex; align-items: flex-end; min-height: 72px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; font: 500 15px/1.3 var(--body); color: var(--blue-soft); text-decoration: none; transition: border-color .2s, background .2s; }
.foot .links a:hover { border-color: rgba(141, 184, 245, .6); background: rgba(255, 255, 255, .05); }
.foot .bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 28px; font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.foot .bottom a { color: var(--blue-soft); text-decoration-color: rgba(141, 184, 245, .5); text-underline-offset: 4px; }
.foot :focus-visible { outline-color: var(--blue-soft); }
.foot .bottom .copy { margin-left: auto; max-width: none; font-size: inherit; color: inherit; }
@media (max-width: 759px) { .foot .links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot .bottom .copy { margin-left: 0; width: 100%; } }

/* ============================================================
   DRAWINGS: the instrument panel, the data flow, the film (SVG on mist panels)
   ============================================================ */
.drawing { position: relative; padding: clamp(14px, 2vw, 22px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--mist); }
.drawing svg { display: block; width: 100%; height: auto; }
.drawing .tall { display: none; }
.drawing .readout { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font: 500 12px/1.5 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--blue-deep); }
.drawing .readout span + span::before { content: "·"; margin-right: 14px; color: var(--ink3); }
.drawing .readout .tag, .film .tag, .runlog .tag { margin-left: auto; color: var(--ink3); }
.drawing .readout .tag::before { content: none; }
/* below 900 px every diagram reflows into a vertical stack of the same parts (the .tall drawing) instead of shrinking its text */
@media (max-width: 899px) { .drawing .wide { display: none; } .drawing .tall { display: block; max-width: 400px; margin: 0 auto; } }
.sv-box { fill: #ffffff; stroke: var(--line); stroke-width: 1.2; }
.sv-core { fill: var(--sky); stroke: var(--blue); stroke-width: 1.4; }
.sv-env { fill: none; stroke: rgba(47, 111, 235, .5); stroke-width: 1.2; stroke-dasharray: 6 6; }
.sv-line { fill: none; stroke: rgba(47, 111, 235, .55); stroke-width: 1.5; }
.sv-line.signal { stroke: var(--blue); }
.sv-line.gold { stroke: var(--routed); }
.sv-line.green { stroke: var(--verified); }
.sv-head { fill: rgba(47, 111, 235, .55); }
.sv-head.gold { fill: var(--routed); }
.sv-head.signal { fill: var(--blue); }
.sv-title { fill: var(--ink); font: 500 18px var(--head); letter-spacing: -.01em; }
.sv-title.small { font-size: 14px; }
.sv-note { fill: var(--ink2); font: 400 12px var(--body); }
.sv-label { fill: var(--blue-deep); font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sv-label.gold { fill: var(--routed-ink); }
.sv-label.signal { fill: var(--blue-deep); }
.sv-label.green { fill: var(--verified); }
.sv-packet { fill: var(--blue); }
.sv-packet.gold { fill: var(--routed); }
.sv-glow { fill: rgba(47, 111, 235, .16); }
.sv-ring { fill: none; stroke: var(--verified); stroke-width: 3; stroke-linecap: round; }
.sv-tick { fill: none; stroke: var(--verified); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sv-scan { fill: rgba(47, 111, 235, .45); }
.sv-doc { fill: #ffffff; stroke: var(--line); }
.sv-field { fill: var(--sky2); stroke: var(--line); }
.sv-field.lock { stroke: var(--blue); }
.sv-field.ok { stroke: var(--verified); fill: rgba(14, 122, 79, .12); }
.sv-field.gold { stroke: var(--routed); fill: rgba(181, 127, 31, .16); }
.sv-gate { fill: #ffffff; stroke: rgba(47, 111, 235, .6); stroke-width: 1.2; }
.sv-gate.gold { stroke: var(--routed); fill: rgba(181, 127, 31, .18); }
.sv-label.dim { opacity: .4; }
.sv-id { fill: var(--ink3); font: 500 12px var(--mono); letter-spacing: .04em; }
.sv-id.lit { fill: var(--blue-deep); }
.sv-id.gold { fill: var(--routed-ink); }
/* chips ride beside the packets: a small box and its mono label, 12 px clear of the lane */
.sv-chip { fill: #ffffff; stroke: var(--blue); stroke-width: 1; }
.sv-chip.gold { stroke: var(--routed); }
.sv-chip-t { fill: var(--blue-deep); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sv-chip-t.gold { fill: var(--routed-ink); }
.sv-lock { fill: none; stroke: var(--blue); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* Fig. 1: the live mini pipeline inside the Sumvant box */
.ip-step rect { fill: #ffffff; stroke: var(--line); stroke-width: 1; transition: fill .3s, stroke .3s; }
.ip-step text { fill: var(--ink3); font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; transition: fill .3s; }
.ip-step.lit rect { fill: var(--sky); stroke: var(--blue); }
.ip-step.lit text { fill: var(--blue-deep); }
.sv-cursor { fill: var(--blue); }
.sv-rec { fill: var(--ink2); font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* the film scene: everything dims except what the beat is about; markers of other beats stay hidden */
.scene svg .dim { opacity: .45; transition: opacity .3s; }   /* the parts a beat is not about: faint, still readable on mist */
.scene svg .hide { opacity: 0; transition: opacity .3s; }
.scene svg.beat-3 .dim { opacity: 0; }   /* the document fills the stage; nothing sits under its labels */
.scene svg.beat-1 .on-1 { opacity: 1; } .scene svg.beat-2 .on-2 { opacity: 1; } .scene svg.beat-3 .on-3 { opacity: 1; } .scene svg.beat-4 .on-4 { opacity: 1; } .scene svg.beat-5 .on-5 { opacity: 1; } .scene svg.beat-6 .on-6 { opacity: 1; } .scene svg.beat-7 .on-7 { opacity: 1; } .scene svg.beat-8 .on-8 { opacity: 1; } .scene svg.beat-9 .on-9 { opacity: 1; }
.scene svg .f-lock, .scene svg .f-login, .scene svg .f-power, .scene svg .f-recorded, .scene svg .f-rec, .scene svg .f-aws-none, .scene svg .f-aws-fields, .scene svg .f-aws-scan, .scene svg .f-doc-scan, .scene svg .f-pk, .scene svg .f-gold-item { transition: opacity .2s; }

/* the nine beat film: plays by itself on a loop with a progress rail of nine dots; a vertical sequence of stills
   under reduced motion (every frame shown) */
.film { position: relative; }
.film .beats { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.film .beat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.film .beat .scene { aspect-ratio: 16 / 11; border: 1px solid var(--line); border-radius: 10px; background: var(--mist); overflow: hidden; }
.film .beat .scene svg { display: block; width: 100%; height: 100%; }
.film .beat .scene svg.tall { display: none; }
.film .stage-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
/* without motion (reduced motion, no script) the nine stills stack full width with their captions beneath, so every label
   renders at its written size; the log follows them */
.film:not(.auto) .beat { grid-template-columns: 1fr; }
.film:not(.auto) .beat .scene { max-width: 1024px; }
/* the run log prints mono lines in sync with each beat; every line shows under reduced motion and without the script */
.runlog { padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font: 400 12.5px/1.6 var(--mono); color: var(--ink2); }
.runlog .runlog-head { display: flex; justify-content: space-between; gap: 8px 16px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font: 500 11px/1.4 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--ink3); }
.runlog ol { margin: 0; padding: 0; list-style: none; }
.runlog li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.runlog li .t { color: var(--ink3); }
.runlog li .k { color: var(--blue-deep); }
.runlog li .v { color: var(--ink2); }
.runlog li .v.ok { color: var(--verified); }
.runlog li .v.route { color: var(--routed-ink); }
.runlog li .k, .runlog li .v { display: inline; }
.runlog li .m { grid-column: 2; }
.runlog li.st .v { color: var(--ink); }   /* the state line of a beat, printed as it begins (R7.2) */
.film.auto .runlog li { opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .35s var(--out); }
.film.auto .runlog li.in { opacity: 1; transform: none; }
.film .beat .side { display: flex; flex-direction: column; gap: 10px; }
.film .n { font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
/* the three line readout of a beat (R7.2): the state line, the mechanism line and the metric line, in mono above the caption */
.film .ro { display: grid; gap: 3px; margin: 0; }
.film .ro > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 0 10px; align-items: baseline; }
.film .ro dt { font: 500 10px/1.7 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.film .ro dd { margin: 0; font: 500 12px/1.5 var(--mono); color: var(--blue-deep); overflow-wrap: anywhere; }
.film .ro .ro-state { letter-spacing: .06em; text-transform: uppercase; }
.film .ro .ro-mech { color: var(--ink2); }
.film .ro .ro-metric { color: var(--ink); }
.film .cap { font-size: var(--t-body); line-height: 1.6; color: var(--ink); }
.film .caption, .film .rail, .film .player { display: none; }
.film .n .tag { margin-left: 14px; }
.film.auto .beats { position: relative; display: block; aspect-ratio: 16 / 11; margin: 0 auto; }
.film.auto .beat { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; grid-template-columns: 1fr; padding: 12px; }
.film.auto .beat.on { opacity: 1; }
.film.auto .beat .scene { height: 100%; aspect-ratio: auto; }
.film.auto .beat .side { display: none; }
.film.auto .caption { display: grid; gap: 8px; margin: 18px auto 0; min-height: 8em; }
.film.auto .rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.film.auto .rail button { width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink2); font: 500 12px/1 var(--mono); cursor: pointer; transition: border-color .25s, color .25s, background .25s; }
.film.auto .rail button:hover { border-color: var(--blue); color: var(--ink); }
.film.auto .rail button[aria-current="true"] { border-color: var(--blue); background: var(--sky); color: var(--blue-deep); }
.film.auto .rail .state { align-self: center; margin-left: 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
@media (min-width: 900px) {
  .film.auto .stage-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  /* the log stands exactly as tall as the stage column (height 0 keeps it out of the row's sizing; min-height fills the row) and
     clips its list, which films.js scrolls so the last printed line stays in view */
  .film.auto .runlog { align-self: stretch; display: flex; flex-direction: column; height: 0; min-height: 100%; }
  .film.auto .runlog ol { flex: 1; min-height: 0; overflow: hidden; }
}
@media (max-width: 899px) { .film .beat { grid-template-columns: 1fr; } .film .beat .scene { aspect-ratio: 36 / 57; max-width: 400px; margin: 0 auto; } .film .beat .scene svg.wide { display: none; } .film .beat .scene svg.tall { display: block; } .film.auto .beats { aspect-ratio: 36 / 57; max-width: 400px; } .film.auto .caption { min-height: 11em; } }
/* the first frame paints with the page (R7.1): beat 1 carries both drawings in the markup and is .on from the start, the
   stage lays out as the film before any script (an inline line on the page adds .auto unless motion is reduced), the sign
   in runs on CSS while the film is .pre and films.js continues the clock from the same point; a beat whose scene is still
   empty stays hidden, so nothing empty ever shows; beat 1's log lines show from the start */
.film .beat .scene:empty { display: none; }
.film.pre .beat .scene svg .f-power { animation: film-on .4s linear both; }
.film.pre .beat .scene svg .f-login { animation: film-on .5s linear .9s both; }
@keyframes film-on { from { opacity: 0; } to { opacity: 1; } }
.film.pre.auto .runlog li[data-beat="1"] { opacity: 1; transform: none; }

/* ============================================================
   THE PLAYER (R7.4): the one controls component both films share. Play and pause, 1x and 2x, a step back and forward,
   the nine dot rail and the state line, under the caption; on phones a compact bar under the stage.
   ============================================================ */
.film.auto .player, .run.auto .player { display: grid; gap: 12px; margin: 16px auto 0; justify-items: center; }
.pc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink2); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: border-color .25s, color .25s, background .25s; }
.pc-btn:hover { border-color: var(--blue); color: var(--ink); }
.pc-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pc-play { min-width: 88px; }
.pc-speed { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.pc-speed button { height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink2); font: 500 12px/1 var(--mono); cursor: pointer; transition: background .25s, color .25s; }
.pc-speed button[aria-pressed="true"] { background: var(--sky); color: var(--blue-deep); }
.pc-speed button:focus-visible { outline-offset: -2px; }
.pc-hint { margin-left: 6px; font: 500 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
@media (max-width: 599px) {
  .film.auto .player, .run.auto .player { gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .pc-hint { display: none; }
  .film.auto .rail button, .run.auto .rail button { width: 30px; height: 30px; }
  .film.auto .rail, .run.auto .rail { gap: 6px; }
}


/* the launch timeline: six weeks on one line */
.timeline { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--line); }
.timeline .fill { position: absolute; left: 0; top: 10px; height: 3px; width: 100%; border-radius: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 2.6s linear; }
.timeline .marker { position: absolute; left: -7px; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; transition: transform 2.6s linear; }
.timeline.go .fill { transform: scaleX(1); }
.timeline li { position: relative; padding-top: 30px; }   /* R12.8: every week readable from the start; nothing dims while it waits for its turn */
.timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); }
.timeline .wk { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-deep); }
.timeline b { display: block; margin-top: 6px; font: 600 var(--t-tile)/1.2 var(--head); letter-spacing: -.015em; color: var(--ink); }
.timeline p { margin-top: 8px; font-size: var(--t-body); line-height: 1.6; color: var(--mut); }
@media (max-width: 899px) { .timeline { grid-template-columns: 1fr; gap: 18px; } .timeline::before { top: 0; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; } .timeline li { padding: 0 0 0 28px; } .timeline li::before { top: 4px; } .timeline .fill { top: 0; left: 4px; width: 3px; height: 100%; transform: scaleY(0); transform-origin: top; } .timeline.go .fill { transform: scaleY(1); } .timeline .marker { left: -2px; top: -7px; } }

/* ---- spec tables (the engine layers, the plans, the support standard) ---- */
.spec-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow-x: auto; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.6; }
.spec-table th { font-size: 11px; letter-spacing: var(--ls-spec); }
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { font: 500 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-deep); background: var(--mist); }
.spec-table td:first-child, .spec-table th:first-child { white-space: nowrap; }
.spec-table td b { font: 500 16px/1.3 var(--head); letter-spacing: -.01em; color: var(--ink); }
.spec-table .spec { font: 400 12px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); }
.spec-table td.sev { font: 500 12px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-deep); }
@media (max-width: 759px) { .spec-table th, .spec-table td { padding: 12px 12px; font-size: 14px; } }

/* ---- the founder (About): a tile with the portrait and the credentials as tags ---- */
.founder { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; padding: 26px; }
.founder .portrait { margin: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); aspect-ratio: 4 / 5; background: var(--mist); }
.founder .portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.founder .name { font: 600 22px/1.2 var(--head); letter-spacing: -.015em; color: var(--ink); }
.founder .role { margin-top: 4px; font: 500 var(--t-spec)/1.5 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--blue-deep); }
.founder .line { margin-top: 14px; max-width: 60ch; font-size: var(--t-body); line-height: 1.6; color: var(--ink2); }
.founder .spec { margin-top: 12px; padding-top: 0; color: var(--blue-deep); }
.founder .tags { margin-top: 18px; }
@media (max-width: 699px) { .founder { grid-template-columns: 1fr; } .founder .portrait { max-width: 220px; } }
.pull { max-width: 760px; margin-top: clamp(28px, 4vw, 44px); font: 500 clamp(24px, 3vw, 34px)/1.5 var(--head); letter-spacing: -.02em; color: var(--ink); }
.pull em { font-style: normal; color: var(--verified); }

/* ============================================================
   THE BLOG (Revision 15, built by tools/build-blog.py): the listing is a column of plain tiles; a post is one reading column
   of about 68 characters at body size, line height 1.6, headings from the scale, the charts as inline HTML in site colours,
   the call to action before the Sources, the Sources a numbered list, the footer line in italic as written
   ============================================================ */
.post-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; max-width: 760px; }
.post-list .tile { gap: 8px; }
.post-list h2 { font: 600 var(--t-tile)/1.25 var(--head); letter-spacing: -.015em; color: var(--ink); }
.post-list time { font: 500 var(--t-spec)/1.4 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--ink3); }
.post-wrap { max-width: 68ch; }
.post .eyebrow a { color: inherit; text-decoration: none; }
.post h1 { margin-top: 16px; font-size: var(--t-section); line-height: var(--lh-section); }
.post .byline { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink2); }
.post .byline time { color: var(--ink3); }
.post-body { margin-top: 28px; font-size: var(--t-body); line-height: 1.6; color: var(--ink); }
.post-body p, .post-body ol, .post-body ul { margin: 0 0 18px; }
.post-body h2 { margin: 40px 0 12px; font-size: 26px; line-height: 1.2; }
.post-body ol, .post-body ul { padding-left: 24px; }
.post-body li { margin: 0 0 8px; }
.post-body a { color: var(--blue-deep); text-decoration: underline; text-decoration-color: rgba(26, 79, 191, .4); text-underline-offset: 4px; overflow-wrap: anywhere; }
.post-body a:hover { text-decoration-color: currentColor; }
.post-body .chart { margin: 28px 0; padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.post-body .chart figcaption { margin-bottom: 14px; font: 600 15px/1.4 var(--head); letter-spacing: -.01em; color: var(--ink); }
.post-body .chart-source { margin: 12px 0 0; font-size: 12.5px; color: var(--ink3); }
.post-body .chart-source a { color: var(--blue-deep); }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.stat-cards li { padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.stat-cards b { display: block; font: 600 clamp(28px, 4vw, 40px)/1 var(--head); font-variant-numeric: tabular-nums; color: var(--ink); }
.stat-cards span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; }
.bars .bl { font-size: 14px; line-height: 1.4; color: var(--ink2); }
.bars .bar { display: block; height: 14px; border-radius: 4px; background: var(--sky); overflow: hidden; }
.bars .bar i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--blue-deep); }
.bars .bv { font: 500 13px/1.4 var(--mono); color: var(--ink); }
@media (min-width: 600px) { .bars li { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 90px; align-items: center; gap: 12px; } .bars .bv { text-align: right; } }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.two-col h3 { margin: 0 0 8px; font: 500 var(--t-spec)/1.5 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--blue-deep); }
.two-col ul { margin: 0; padding-left: 20px; }
.two-col li { font-size: 15px; line-height: 1.55; color: var(--ink); }
@media (max-width: 599px) { .two-col { grid-template-columns: 1fr; } }
.post-cta { margin: 40px 0 36px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--mist); }
.post-cta p { margin: 0 0 14px; font-size: var(--t-lead); line-height: 1.5; color: var(--ink); }
.post-body .post-cta .btn { color: #fff; text-decoration: none; }   /* the post body's link colour stays off the button */
.sources h2 { font-size: 22px; }
.sources ol { padding-left: 22px; font-size: 14.5px; line-height: 1.6; color: var(--ink2); }
.sources li { margin-bottom: 10px; }
.post-note { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink3); }

/* ---- the legal pages: one reading column ---- */
.legal { max-width: 720px; margin-top: clamp(24px, 3vw, 36px); color: var(--ink); font-size: var(--t-body); line-height: 1.6; }
.legal .label { margin-bottom: 20px; font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.legal p { margin: 0 0 16px; }
.legal h2 { margin: 40px 0 12px; font-size: 26px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin: 0 0 8px; }
.legal strong { font-weight: 600; }
.legal a { color: var(--blue-deep); font-weight: 500; text-decoration-color: rgba(26, 79, 191, .4); text-underline-offset: 4px; }

/* ============================================================
   ILLUSTRATIONS (tools/build-svg.py, placed by tools/stamp-svg.py): monoline, current colour, 1.5 px; they draw in
   on entry (stroke-dashoffset over pathLength 1, in draw order) and idle with one motion while on screen
   ============================================================ */
.ill { display: block; flex: none; color: var(--ink); }
.ill.g { width: 56px; height: 56px; }
.ill.s { width: 160px; height: 160px; }
.ill.h { width: min(480px, 100%); aspect-ratio: 480 / 300; }
.ill svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ill svg * { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ill svg .fill, .ill svg .fill-soft, .ill svg .gold-fill, .ill svg .green-fill { fill: currentColor; stroke: none; }
.ill svg .fill-soft { opacity: .55; }
.ill svg .gold, .ill svg .gold-fill { stroke: var(--routed); }
.ill svg .gold-fill { fill: var(--routed); }
.ill svg .green, .ill svg .green-fill { stroke: var(--verified); }
.ill svg .green-fill { fill: var(--verified); }
.ill svg .dash { stroke-dasharray: 4 4; }
.ill svg .signal-line { stroke: var(--blue); }
html.ill-arm .ill:not(.in) svg [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.ill-arm .ill:not(.in) svg .fill, html.ill-arm .ill:not(.in) svg .fill-soft, html.ill-arm .ill:not(.in) svg .gold-fill, html.ill-arm .ill:not(.in) svg .green-fill { opacity: 0; }
/* the drawn state; the draw in itself runs as a Web Animation from v5.js (a stylesheet transition out of the armed
   state never completes in Chrome), in draw order (--i) */
.ill.in svg [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ill.in svg .dash { stroke-dasharray: 4 4; }
.ill.in svg .fill, .ill.in svg .gold-fill, .ill.in svg .green-fill { opacity: 1; }
.ill.in svg .fill-soft { opacity: .55; }
/* the problem tiles (R4.10 item 4, stilled by R14.3): the fix layer (.fx) is the frame shown, the problem layer (.px) is
   not drawn, and anything marked .move sits where it lands; nothing on the page loops but the hero scene */
.ill svg .px { opacity: 0; }
.ill svg .fx, .ill.in svg .fx { opacity: 1; }
.ill svg .fx.move { transform: translate(var(--dx, 0px), var(--dy, 0px)); }
@media (prefers-reduced-motion: reduce) {
  html.ill-arm .ill:not(.in) svg [pathLength] { stroke-dashoffset: 0; }
  html.ill-arm .ill:not(.in) svg .fill, html.ill-arm .ill:not(.in) svg .fill-soft, html.ill-arm .ill:not(.in) svg .gold-fill, html.ill-arm .ill:not(.in) svg .green-fill { opacity: 1; }
  .timeline .fill, .timeline .marker, .film.auto .beat { transition: none; }
}

/* ============================================================
   RESPONSIVE: tiles stack on phones
   ============================================================ */
@media (max-width: 959px) { .tiles, .tiles.cols-3, .counters.six, .counters.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile.xl { grid-row: auto; } }
@media (max-width: 599px) {
  :root { --gutter: 16px; --gap: 14px; }
  .tiles, .tiles.cols-3, .tiles.cols-2, .counters.six, .counters.five { grid-template-columns: 1fr; }
  .tile.w2, .tile.xl { grid-column: auto; }
  .industries .tile { min-height: 0; }
  .counters .tile { min-height: 120px; }
}

/* ============================================================
   MOTION: only position, scale and opacity; final frames under reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
  .tile, .counter b .tick, .faq summary .pm, .btn, .meters .bar i::after, .pc-btn, .pc-speed button, .evidence button, .demo-bar { transition: none; }
  .film.pre .beat .scene svg .f-power, .film.pre .beat .scene svg .f-login { animation: none; }
  .meters .bar i.on::after { transform: scaleX(1); }
}
/* the soft cross fade between pages is site.js's (body.leaving): the cross document View Transitions API was tried
   and dropped, because Chrome logs "Transition was skipped" errors whenever a navigation is not a plain click */

/* ============================================================
   SEE IT RUN (Case study, R6.3): one sample prescription, start to finish. Three panes on the stage: the incoming eRx
   card, the pharmacy system window (a generic wireframe in our own style) and the reasoning panel over the live run
   log. assets/js/run.js plays the 52 second script (.run.auto); without it, and under reduced motion, the markup is
   the finished still: the eRx with its boxes, the window filled with every tick, the complete sig table and chips,
   and the full log.
   ============================================================ */
.run-stage { position: relative; padding: clamp(14px, 2vw, 22px); border: 1px solid var(--line); border-radius: var(--radius); }
.run-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-bottom: 12px; font: 500 11px/1.4 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--ink3); }
.run-tags span { padding: 2px 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.run-panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.pane-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.pane { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 13px; line-height: 1.6; color: var(--ink2); }
.pane-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font: 500 11px/1.4 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--ink3); }
.pane-head .ph-title { color: var(--ink); }
.pane-head .ph-state { color: var(--blue-deep); }
/* the eRx card */
.erx-card { position: relative; }
.erx-card dl { margin: 0; display: grid; gap: 5px; }
.erx-card .f { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 2px 10px; padding: 6px 58px 6px 8px; border: 1px solid transparent; border-radius: 6px; transition: border-color .25s, background .25s; }
.erx-card .f.plain { padding-right: 8px; }
.erx-card dt { font: 500 11px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.erx-card dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.erx-card .conf { position: absolute; right: 6px; top: 6px; padding: 1px 6px; border: 1px solid var(--blue); border-radius: 4px; background: #fff; font: 500 10.5px/1.5 var(--mono); color: var(--blue-deep); transition: opacity .25s; }
.erx-card .f.lock { border-color: var(--blue); background: var(--sky); }
.erx-card .scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--blue); opacity: 0; pointer-events: none; }
.erx-card.second { display: none; }
/* the pharmacy system window: a generic wireframe in our style */
.sys-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px 8px 0 0; background: var(--mist); font: 500 11px/1.5 var(--mono); letter-spacing: .04em; color: var(--ink); }
.sys-title .detect { color: var(--blue-deep); text-transform: uppercase; letter-spacing: .06em; }
.sys-steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 8px 10px; list-style: none; border: 1px solid var(--line); border-top: 0; background: #fff; }
.sys-steps li { padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; font: 500 10.5px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
.sys-steps li.on { border-color: var(--blue); background: var(--sky); color: var(--blue-deep); }
.sys-steps li.done { border-color: rgba(14, 122, 79, .4); color: var(--verified); }
.sys-body { position: relative; min-height: 236px; padding: 12px 10px; border: 1px solid var(--line); border-top: 0; background: #fff; }
.sys-body .scr { display: none; }
.sys-body .scr.on { display: block; }
.sys-body .scr-h { margin-bottom: 8px; font: 500 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.sys-body .row { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
.sys-body .row + .row { margin-top: 6px; }
.sys-body .row.sel { border-color: var(--blue); background: var(--sky); }
.sys-body .row .mono { font: 500 11px/1.6 var(--mono); color: var(--ink3); }
.sys-body .row .tick, .sys-body .fld .tick, .sys-body .cands .tick { font: 500 11px/1.6 var(--mono); color: var(--verified); white-space: nowrap; }
.sys-body .cursor { position: absolute; width: 12px; height: 16px; opacity: 0; pointer-events: none; background: var(--blue); clip-path: polygon(0 0, 100% 60%, 55% 65%, 70% 100%, 55% 100%, 40% 70%, 0 95%); }
.fld { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 6px 0; }
.fld + .fld { border-top: 1px dashed var(--line); }
.fld > span:first-child { font: 500 11px/1.8 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.fld .in { display: block; min-height: 28px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font: 400 13px/1.5 var(--body); overflow-wrap: anywhere; }
.fld .in.focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26, 79, 191, .16); }
.fld .in s { color: var(--ink3); margin-right: 6px; }
.fld .in b { font-weight: 500; color: var(--ink); }
.cands { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.cands li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
.cands li em { font: 500 10.5px/1.6 var(--mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-deep); }
.cands li.hl { border-color: var(--blue); background: var(--sky); }
.cands li.exact.sel { border-color: var(--verified); background: #eef8f3; }
.lane { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 0 0 8px 8px; border-top: 0; background: var(--mist); }
.lane-h { margin-bottom: 8px; font: 500 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); }
.lane-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.lane-item + .lane-item { margin-top: 6px; }
.lane-item .status { font: 500 11px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
.lane-item.exc { border-color: var(--routed); background: rgba(181, 127, 31, .08); }
.lane-item.exc .status { color: var(--routed-ink); }
/* the reasoning panel */
.rulechips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.rulechips li { padding: 3px 8px; border: 1px solid rgba(14, 122, 79, .4); border-radius: 999px; background: #eef8f3; font: 500 10.5px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--verified); }
.sigtable { width: 100%; border-collapse: collapse; font: 400 12px/1.5 var(--body); }
.sigtable th, .sigtable td { padding: 5px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--ink); }
.sigtable th { font: 500 10.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); background: var(--mist); }
.sigtable tr.total td { font-weight: 500; border-bottom: 0; }
.result { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--blue); border-radius: 6px; background: var(--sky); font: 500 11px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--blue-deep); }
.chip.ok { border-color: rgba(14, 122, 79, .5); background: #eef8f3; color: var(--verified); }
.chip.route { border-color: var(--routed); background: rgba(181, 127, 31, .1); color: var(--routed-ink); }
.expanded { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--ink2); }
.expanded b { font-weight: 500; color: var(--ink); }
.flag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.flag .to { font: 500 11px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--routed-ink); }
.run .runlog { font-size: 12px; }
.run .runlog li { grid-template-columns: 60px minmax(0, 1fr); }
.run-note { margin-top: 14px; }
.run .caption { display: none; }
.run .rail, .run .player { display: none; }
@media (min-width: 900px) { .run-panes { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) minmax(0, 6fr); } }
@media (max-width: 599px) { .fld { grid-template-columns: minmax(0, 1fr) auto; } .fld > span:first-child { grid-column: 1 / -1; } }   /* phones: the label above its field */
/* with motion: the finished markup becomes the starting state, and run.js steps through the script */
.run.auto .erx-card .conf { opacity: 0; }
.run.auto .erx-card .f.lock .conf { opacity: 1; }
.run.auto .erx-card .scan { opacity: 1; }
.run.auto .erx-card.second.on { display: block; }
.run.auto .erx-card.first.off { display: none; }
.run.auto .sys-body .cursor { opacity: 1; transition: transform .6s var(--out); }
.run.auto .rulechips li { border-color: var(--line); background: #fff; color: var(--ink3); transition: color .3s, border-color .3s, background .3s; }   /* unlit: a quiet chip, never dimmed text */
.run.auto .rulechips li.lit { border-color: rgba(14, 122, 79, .4); background: #eef8f3; color: var(--verified); }
.run.auto .sigtable tbody tr { opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .35s var(--out); }
.run.auto .sigtable tbody tr.in { opacity: 1; transform: none; }
.run.auto .result .chip, .run.auto .expanded, .run.auto .flag { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }   /* hidden pieces leave the tab order too */
.run.auto .result .chip.in, .run.auto .expanded.in, .run.auto .flag.in { opacity: 1; visibility: visible; transition: opacity .3s; }
.run.auto .tick { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.run.auto .tick.in { opacity: 1; visibility: visible; transition: opacity .25s; }
.run.auto .sys-body [data-step], .run.auto .lane [data-step] { cursor: pointer; }   /* a click on any field jumps to the step that fills it */
.run.auto .cands li { opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .35s var(--out), border-color .25s, background .25s; }
.run.auto .cands li.in { opacity: 1; transform: none; }
.run.auto .row.match { opacity: 0; transition: opacity .3s; }
.run.auto .row.match.in { opacity: 1; }
.run.auto .lane-item { opacity: 0; transform: translateX(24px); transition: opacity .4s, transform .6s var(--out); }
.run.auto .lane-item.in { opacity: 1; transform: none; }
.run.auto .lane-item .status { opacity: 0; transition: opacity .3s; }
.run.auto .lane-item .status.in { opacity: 1; }
.run.auto .fld .in s { text-decoration: none; }
.run.auto .fld .in s.struck { text-decoration: line-through; }
.run.auto .fld .in b { opacity: 0; }
.run.auto .fld .in b.in { opacity: 1; }
.run.auto .runlog ol { max-height: 268px; overflow: hidden; }
.run.auto .runlog li { opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .35s var(--out); }
.run.auto .runlog li.in { opacity: 1; transform: none; }
.run.auto .caption { display: grid; gap: 8px; margin: 18px auto 0; min-height: 4.6em; }
.run.auto .rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.run.auto .rail button { width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink2); font: 500 12px/1 var(--mono); cursor: pointer; transition: border-color .25s, color .25s, background .25s; }
.run.auto .rail button:hover { border-color: var(--blue); color: var(--ink); }
.run.auto .rail button[aria-current="true"] { border-color: var(--blue); background: var(--sky); color: var(--blue-deep); }
.run.auto .rail .state { align-self: center; margin-left: 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.run .caption .n { font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.run .caption .readout { font: 500 12px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-deep); }
.run .caption .cap { font-size: var(--t-body); line-height: 1.5; color: var(--ink); }
.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -.15em; background: var(--blue); animation: blink 1s steps(2) infinite; }
/* the evidence drawer (R7.3): nine small captures under the stage, one per step, each stamped with its time and step name; a
   drawn wireframe each (bars and one mark), never a screen; they appear as the run goes and scroll sideways on phones */
.evidence { margin-top: 12px; min-width: 0; }
.evidence .captures { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.evidence li { min-width: 0; }
.evidence button { display: grid; gap: 6px; width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink2); text-align: left; cursor: pointer; transition: border-color .25s, box-shadow .25s; }
.evidence button:hover { border-color: var(--blue); }
.evidence .thumb { display: block; position: relative; height: 50px; border: 1px solid var(--line); border-radius: 4px; background: var(--mist); overflow: hidden; }
.evidence .thumb::before { content: ""; position: absolute; left: 8px; top: 9px; width: 56%; height: 3px; border-radius: 2px; background: rgba(15, 30, 54, .18); box-shadow: 0 9px 0 0 rgba(15, 30, 54, .14), 0 18px 0 0 rgba(15, 30, 54, .12), 0 27px 0 0 rgba(15, 30, 54, .1); }
.evidence .thumb::after { content: ""; position: absolute; right: 8px; top: 8px; width: 14px; height: 8px; border-radius: 2px; background: var(--blue); }
.evidence .t2::after { left: 0; right: 0; top: 24px; width: auto; height: 2px; border-radius: 0; }
.evidence .t3::after { width: 6px; height: 6px; right: 28px; border-radius: 50%; background: var(--verified); box-shadow: 10px 0 0 var(--verified), 20px 0 0 var(--verified); }
.evidence .t4::after, .evidence .t5::after { height: 14px; background: var(--sky); border: 1px solid var(--blue); }
.evidence .t6::after { width: 20px; height: 20px; background: #fff; border: 1px solid var(--line); box-shadow: inset 0 6px 0 0 var(--sky), inset 0 12px 0 0 #fff, inset 0 13px 0 0 var(--line); }
.evidence .t7::after, .evidence .t8::after { background: var(--verified); }
.evidence .t9::after { background: var(--routed); }
.evidence .stamp { display: grid; gap: 1px; font: 500 10px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
.evidence .stamp .t { color: var(--ink2); }
.evidence .stamp .nm { display: block; }
.run.auto .evidence li { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s, transform .4s var(--out), visibility 0s .35s; }
.run.auto .evidence li.in { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .4s var(--out); }
@media (max-width: 899px) { .evidence .captures { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; } .evidence li { flex: 0 0 116px; scroll-snap-align: start; } }
/* the decision tooltips (R7.3): a hover or a focus on a rule chip, a result chip or a read back tick shows the one line reason */
.run-stage .tip { position: absolute; left: 0; top: 0; z-index: 6; max-width: 300px; padding: 7px 10px; border: 1px solid var(--blue); border-radius: 8px; background: #fff; color: var(--ink); font: 400 12px/1.6 var(--body); pointer-events: none; opacity: 0; transition: opacity .15s; }
.run-stage .tip.on { opacity: 1; }
.run-stage .tip[hidden] { display: none; }
.run [data-why] { cursor: help; }
/* the receipt (R7.3): prints at the right when the run ends and fades as the loop restarts; part of the still otherwise */
.receipt { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: 400 12px/1.6 var(--mono); color: var(--ink2); }
.receipt .rc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px dashed var(--line); font: 500 11px/1.4 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--ink); }
.receipt .rc-head .tag { color: var(--ink3); }
.receipt ol { margin: 0; padding: 0; list-style: none; }
.receipt li { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.receipt li:last-child { border-bottom: 0; }
.receipt b { font-weight: 500; color: var(--ink); }
.receipt b.ok { color: var(--verified); }
.receipt b.route { color: var(--routed-ink); }
.pane-col { position: relative; }
.run.auto .receipt { position: absolute; right: 0; bottom: 0; left: 0; z-index: 4; opacity: 0; visibility: hidden; border-color: var(--blue); transition: opacity .6s, visibility 0s .6s; }
.run.auto .receipt.in { opacity: 1; visibility: visible; transition: opacity .25s; }
.run.auto .receipt li { opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .35s var(--out); }
.run.auto .receipt li.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .run.auto .runlog ol { max-height: none; } }

/* ============================================================
   THE FORMS (R8.2 to R8.5): the honeypot (off screen, never display none, so a person never sees it and a bot fills
   it), and the Turnstile box: a quiet outline the size of the widget until it renders on first focus, so nothing moves
   ============================================================ */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ts-box { display: flex; align-items: center; min-height: 65px; margin: 12px 0 0; padding: 0 12px; border: 1px dashed var(--line); border-radius: 8px; background: var(--mist); }
.ts-box.on { padding: 0; border-color: transparent; background: transparent; }
.ts-box .ts-note { font: 500 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.ts-box.on .ts-note { display: none; }
.wb .ts-box { margin: 18px 0 0; }

/* ============================================================
   THE BRAND PAGE (R9.5, brand.html on the v5 system): the wordmark panes, the clear space figure, the do and don't
   grid and the file list, in ink and sky; the reversed panes sit on ink, the one deep colour, like the footer
   ============================================================ */
.bmark { display: inline-block; color: var(--ink); font-size: 22px; line-height: 1; }
.bmark svg { display: block; width: 7.479em; height: 1.111em; fill: currentColor; }
.bgrid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.bpane { display: flex; align-items: flex-end; gap: 30px; flex-wrap: wrap; padding: 36px; background: #fff; color: var(--ink); }
.bpane.on-ink, .art.on-ink, .th.on-ink { background: var(--ink); color: #fff; }
.bpane figure { margin: 0; display: grid; gap: 10px; justify-items: start; }
.bpane figcaption { color: var(--ink3); font: 500 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.bpane.on-ink figcaption { color: var(--blue-soft); }
.bpane svg, .bpane img { display: block; fill: currentColor; }
.bspec { margin: 0; padding: clamp(20px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.bspec svg { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto; }
.bspec .ink { fill: var(--ink); } .bspec .unit { fill: var(--blue); opacity: .3; }
.bspec .room { fill: var(--sky); stroke: var(--blue); stroke-width: 1.2; stroke-dasharray: 5 4; }
.bspec .box { fill: #fff; stroke: var(--line); stroke-width: 1; }
.bspec figcaption { max-width: 60ch; margin: 18px auto 0; font-size: 14px; line-height: 1.6; color: var(--ink2); }
.bspec figcaption b { color: var(--ink); font-weight: 600; }
.bdo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bdo figure { margin: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.bdo .art { display: grid; place-items: center; height: 132px; padding: 0 16px; overflow: hidden; }
.bdo figcaption { padding: 12px 14px 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--ink2); }
.bdo figcaption b { display: block; margin-bottom: 2px; font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--verified); }
.bdo figure.no figcaption b { color: var(--routed-ink); }
.bdo .serif { font: 500 22px/1 Georgia, "Times New Roman", serif; letter-spacing: .1em; color: var(--ink); }
.bfiles { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bfiles li { display: grid; grid-template-columns: 96px minmax(0, 180px) minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.bfiles .th { display: grid; place-items: center; height: 56px; padding: 0 10px; border-radius: 8px; background: var(--mist); }
.bfiles .th img { max-width: 100%; max-height: 40px; }
.copy code, .bfiles code { font: 500 13px var(--mono); color: var(--ink); overflow-wrap: anywhere; }
/* the mark on the brand page (R10.1): the lockup panes, the mark's own clear space figure, the small version and the don'ts;
   every picture is a file from assets/img/mark/ (an <img>), never a copy of the drawing, so the don'ts are shown with a CSS
   filter or a transform on the file; the one exception is the gradient don't, which needs a gradient stroke and so carries
   the drawing inline once on the page */
.bpane img.lk { height: 44px; width: auto; }
.bpane img.lk.sm { height: 24px; }
.bpane img.mk { height: 72px; width: auto; }
.bpane img.mk.sm { height: 24px; }
.bpane img.mk.xs { height: 16px; }
.bpane img.tile { border-radius: 14px; }
.bdo .art img.lk { height: 32px; width: auto; }
.bdo .art img.mk { height: 72px; width: auto; }
.bdo .art img.tile { border-radius: 14px; }
.bdo .art .bmk { display: block; width: 72px; height: 72px; }
.bspec.mark svg { max-width: 380px; }
@media (max-width: 899px) { .bdo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bgrid { grid-template-columns: 1fr; } .bpane { padding: 24px; } }
@media (max-width: 599px) { .bdo { grid-template-columns: 1fr; } .bfiles li { grid-template-columns: 72px minmax(0, 1fr); } .bfiles li > span:last-child { grid-column: 1 / -1; } }

/* ============================================================
   THE STICKY BOOK A DEMO BAR (R7.4), phones only: fixed to the bottom, shown by v5.js once the hero has scrolled past and
   hidden while a form field has focus; the page gets room at the bottom while it shows
   ============================================================ */
.demo-bar { display: none; }
@media (max-width: 599px) {
  .demo-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--line); transform: translateY(110%); visibility: hidden; transition: transform .3s var(--out), visibility 0s .3s; }
  .demo-bar.on { transform: none; visibility: visible; transition: transform .3s var(--out); }
  .demo-bar .btn { width: 100%; }
  html.demo-bar-on body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}