/* Sumvant v5: the overhaul design system (docs/internal/SITE-OVERHAUL-SPEC.md, "Look and feel" + Revisions 2 to 9).
   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 (typed spec lines, decoding eyebrows, the proof loops, the problem tiles, the sheen and
   the play pulse).
   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: 0 1px 2px rgba(15, 30, 54, .04), 0 8px 24px rgba(47, 111, 235, .06);
  --tile-shadow-lit: 0 1px 2px rgba(15, 30, 54, .04), 0 14px 32px rgba(47, 111, 235, .12);
  --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);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  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); }
.eyebrow .ch, .eyebrow .w { display: inline-block; }   /* the decode (R4.10 item 2) fixes each glyph's width while it scrambles */
.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.65; 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; overflow: hidden; transition: transform .25s var(--out), background .2s, border-color .2s, box-shadow .25s; }
.btn:hover { background: #163f99; border-color: #163f99; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(26, 79, 191, .22); }
.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(--hair-2); box-shadow: 0 8px 20px rgba(47, 111, 235, .12); }
.btn.demo::after { content: ""; position: absolute; inset: -1px; z-index: 0; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .34) 50%, transparent 68%); transform: translateX(-130%); }
.btn.demo:hover::after { animation: sheen .75s var(--out) forwards; }
@keyframes sheen { to { transform: translateX(130%); } }
.btn .play-glyph { display: block; width: 12px; height: 12px; flex: none; }
.btn .play-glyph path { fill: currentColor; }
.btn.play.seen .play-glyph { animation: play-pulse .9s var(--out) 1 .15s; transform-origin: 50% 50%; }
@keyframes play-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
.btn.play::before { content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -4px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; transform: scale(.4); pointer-events: none; }
.btn.play.seen::before { animation: play-ring .9s ease-out 1 .15s; }
@keyframes play-ring { 0% { opacity: .55; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.9); } }
.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(64px, 9vw, 120px) 0; }
.sec + .sec:not(.stage) { padding-top: 0; }
.stage + .sec:not(.stage) { padding-top: clamp(64px, 9vw, 120px); }
.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: a soft white to sky wash with the blueprint grid; the hero, the films, the case study band and the final call sit on one */
.stage { position: relative; color: var(--ink); background-color: var(--sky); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), linear-gradient(180deg, #ffffff, var(--sky) 70%); background-size: 24px 24px, 24px 24px, 100% 100%; }
.stage h1, .stage h2, .stage h3 { color: var(--ink); }
/* page openers: a stage with the eyebrow, the headline and one lead */
.opener { padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 80px); }
.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 {
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 120px; padding: 22px 22px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: inherit; text-decoration: none; box-shadow: var(--tile-shadow);
  transform: perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform .35s var(--out), border-color .25s, box-shadow .35s var(--out);
}
.tile.w2 { grid-column: span 2; }
.tile.xl { grid-column: span 2; grid-row: span 2; }
.tile.flat { transform: none; transition: border-color .25s; }
/* the blueprint ticks at each corner: eight one pixel lines, eight pixels long */
.tile::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none; border-radius: 10px;
  background:
    linear-gradient(var(--blue-soft), var(--blue-soft)) 0 0 / 8px 1px no-repeat, linear-gradient(var(--blue-soft), var(--blue-soft)) 0 0 / 1px 8px no-repeat,
    linear-gradient(var(--blue-soft), var(--blue-soft)) 100% 0 / 8px 1px no-repeat, linear-gradient(var(--blue-soft), var(--blue-soft)) 100% 0 / 1px 8px no-repeat,
    linear-gradient(var(--blue-soft), var(--blue-soft)) 0 100% / 8px 1px no-repeat, linear-gradient(var(--blue-soft), var(--blue-soft)) 0 100% / 1px 8px no-repeat,
    linear-gradient(var(--blue-soft), var(--blue-soft)) 100% 100% / 8px 1px no-repeat, linear-gradient(var(--blue-soft), var(--blue-soft)) 100% 100% / 1px 8px no-repeat;
  opacity: .9;
}
/* the cursor light: a soft sky spotlight; hover lifts the tile 2 px and turns the border blue at 40% */
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(240px circle at var(--mx) var(--my), rgba(47, 111, 235, .10), transparent 60%); transition: opacity .3s; }
.tile.lit { --lift: -2px; border-color: var(--hair-2); box-shadow: var(--tile-shadow-lit); }
.tile.lit::after { opacity: 1; }
.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.55; 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: rgba(255, 255, 255, .85); border-bottom: 1px solid var(--line); color: var(--ink); }
.mast::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.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; }
.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(--sky); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px, 24px 24px;
  }
  .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; box-shadow: var(--tile-shadow); }
  .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 live grid behind the text column and the strip beneath both, the form card
   white with a soft shadow (nothing is drawn under it: v5.js keeps the circuit in the margins)
   ============================================================ */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 9vw, 128px); }
.hero .grid-stage { position: absolute; inset: 0; z-index: 0; }
.hero .grid-stage canvas { display: block; width: 100%; height: 100%; }
.hero .wrap { position: relative; z-index: 1; }
.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 h1 .w, .eyebrow .w { display: inline-block; white-space: nowrap; }
.hero h1 .ch { display: inline-block; }
.hero .lead { margin-top: 22px; }
/* the six capability tiles: a plain headline, then a mono spec line that types out on entry (R4.10 item 1) */
.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); }
.typed .caret { display: inline-block; width: 7px; height: 1em; margin-left: 1px; vertical-align: -.15em; background: var(--blue); animation: blink 1s steps(2) infinite; }
.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); box-shadow: 0 12px 40px rgba(26, 79, 191, .10); }
.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 count up (Jost, tabular), a live loop under each number (R4.10 item 3), the label and
   its one line of context
   ============================================================ */
.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); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s var(--out); }
.counter.landed b .tick { opacity: 1; transform: none; }
.counter .label { display: block; min-height: 1.4em; font: 500 var(--t-stat-label)/1.4 var(--body); color: var(--ink); }
.counter .label .caret { display: inline-block; width: 2px; height: .9em; margin-left: 2px; vertical-align: -.1em; background: var(--blue); animation: blink 1s steps(2) infinite; }
.counter.typed .label .caret { display: none; }
.counter .ctx { display: block; font-size: var(--t-stat-label); line-height: 1.45; color: var(--ink2); }
@keyframes blink { to { opacity: 0; } }
/* the loops: a field typing then ticking green, a shutter flash filing a capture, a test bar filling green.
   Transform and opacity only; they run while the tile is on screen (.live from v5.js) and hold the final frame
   under reduced motion */
.loop { position: relative; display: flex; align-items: center; gap: 8px; height: 22px; margin: 2px 0 6px; }
.loop i { display: block; }
.loop .box { position: relative; display: flex; align-items: center; gap: 2px; width: 78px; height: 16px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.loop .box .c { width: 6px; height: 7px; border-radius: 1px; background: var(--blue); opacity: 0; }
.loop .ok { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--verified); color: var(--verified); font: 700 9px/12px var(--body); text-align: center; opacity: 0; transform: scale(.4); }
.loop .frame { position: relative; width: 34px; height: 22px; border: 1px solid var(--line); border-radius: 3px; background: #fff; overflow: hidden; }
.loop .frame::before { content: ""; position: absolute; inset: 0; background: var(--blue); opacity: 0; }
.loop .frame::after { content: ""; position: absolute; left: 8px; top: 7px; width: 18px; height: 8px; border-radius: 1px; background: var(--sky2); }
.loop .card { position: absolute; left: 4px; top: 4px; width: 26px; height: 14px; border-radius: 2px; background: var(--blue); opacity: 0; }
.loop .stack { position: relative; width: 30px; height: 18px; }
.loop .stack i { position: absolute; left: 0; width: 26px; height: 4px; border-radius: 1px; background: var(--blue-soft); }
.loop .stack i:nth-child(1) { top: 12px; } .loop .stack i:nth-child(2) { top: 7px; } .loop .stack i:nth-child(3) { top: 2px; opacity: 0; }
.loop .bar { position: relative; width: 78px; height: 6px; border-radius: 3px; background: var(--sky2); overflow: hidden; }
.loop .bar::after { content: ""; position: absolute; inset: 0; background: var(--verified); transform: scaleX(0); transform-origin: left; }
.loop .pass { font: 500 10px/1 var(--mono); letter-spacing: var(--ls-spec); color: var(--verified); opacity: 0; }
.loop.live .box .c { animation: loop-char 4.2s linear infinite; }
.loop.live .box .c:nth-child(1) { animation-delay: 0s; } .loop.live .box .c:nth-child(2) { animation-delay: .22s; } .loop.live .box .c:nth-child(3) { animation-delay: .44s; } .loop.live .box .c:nth-child(4) { animation-delay: .66s; } .loop.live .box .c:nth-child(5) { animation-delay: .88s; } .loop.live .box .c:nth-child(6) { animation-delay: 1.1s; }
.loop.live .ok { animation: loop-ok 4.2s var(--out) infinite; }
@keyframes loop-char { 0%, 8% { opacity: 0; } 10%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes loop-ok { 0%, 42% { opacity: 0; transform: scale(.4); } 50%, 90% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(.4); } }
.loop.live .frame::before { animation: loop-flash 4.2s ease-out infinite; }
.loop.live .card { animation: loop-card 4.2s var(--out) infinite; }
.loop.live .stack i:nth-child(3) { animation: loop-stack 4.2s linear infinite; }
@keyframes loop-flash { 0%, 28% { opacity: 0; } 31% { opacity: .9; } 40%, 100% { opacity: 0; } }
@keyframes loop-card { 0%, 31% { opacity: 0; transform: translate(0, 0) scale(1); } 34% { opacity: 1; } 60%, 100% { opacity: 0; transform: translate(42px, 0) scale(.9, .3); } }
@keyframes loop-stack { 0%, 58% { opacity: 0; } 60%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
.loop.live .bar::after { animation: loop-bar 4.2s var(--out) infinite; }
.loop.live .pass { animation: loop-pass 4.2s linear infinite; }
@keyframes loop-bar { 0%, 6% { transform: scaleX(0); } 62%, 92% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes loop-pass { 0%, 62% { opacity: 0; } 66%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ============================================================
   THE SYSTEMS GRID (R4.6, Home and Solutions): one quiet line with a green dot, then every name on an equal tile
   under small mono category labels. Motion in place of the marquee: a signal coloured scan line sweeps the grid
   every few seconds and each tile it passes flickers as if read (v5.js times the flicker to each tile's
   position); the four production names hold a soft green glow; tiles near the cursor brighten like a spotlight
   (--lit from v5.js); hover lifts the tile. Reduced motion: the still grid.
   ============================================================ */
.legend { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 var(--t-stat-label)/1.4 var(--body); color: var(--ink); }
.legend .dot { position: relative; display: block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--verified); box-shadow: 0 0 0 3px rgba(14, 122, 79, .14); }
.legend .dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--verified); opacity: 0; }
.sysgrid.live .legend .dot::after { animation: prod-breathe 2.6s ease-out infinite; }
@keyframes prod-breathe { 0% { opacity: .6; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); } }
.sysgrid { position: relative; }
.sysgrid .names { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sysgrid .cat { grid-column: 1 / -1; margin: 14px 0 2px; font: 500 var(--t-spec)/1.4 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--blue-deep); }
.sysgrid .cat:first-child { margin-top: 0; }
.sysgrid .name { --lit: 0; position: relative; display: flex; align-items: center; gap: 8px; padding: 13px 14px; border: 1px solid var(--hair); border-radius: 10px; background: var(--canvas); font: 500 15px/1.3 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; transition: transform .3s var(--out), border-color .25s, box-shadow .3s var(--out); }
.sysgrid .name.case { text-transform: none; }   /* brand spellings that are not uppercase (athenahealth, eClinicalWorks) keep their case and still line up */
/* the spotlight near the cursor is a soft sky tint behind the name; hover lifts 2 px with a blue border; proven names carry the green dot and a faint green tint */
.sysgrid .name { isolation: isolate; }
.sysgrid .name::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--sky); box-shadow: inset 0 0 0 1px rgba(47, 111, 235, .35); opacity: var(--lit); }
.sysgrid .name:hover { transform: translateY(-2px); border-color: var(--hair-2); box-shadow: var(--tile-shadow-lit); }
.sysgrid .name.prod { color: var(--verified); background: #eef8f3; border-color: rgba(14, 122, 79, .35); }
.sysgrid .name.prod::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verified); flex: none; }
.sysgrid .scan { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; margin: 0; padding: 0; background: var(--blue); box-shadow: 0 0 10px 1px rgba(47, 111, 235, .35); opacity: 0; pointer-events: none; }
.sysgrid.live .scan { animation: scan 8s linear infinite; }
.sysgrid.live .name { animation: read 8s linear infinite; animation-delay: var(--t, 0s); }
@keyframes scan { 0% { transform: translateX(-4px); opacity: 0; } 2% { opacity: .9; } 68% { transform: translateX(var(--sw, 1200px)); opacity: .9; } 71%, 100% { transform: translateX(var(--sw, 1200px)); opacity: 0; } }
@keyframes read { 0% { opacity: 1; } .6% { opacity: .3; } 1.2% { opacity: 1; } 1.8% { opacity: .45; } 2.6%, 100% { opacity: 1; } }
.sysgrid .close { margin-top: 18px; font-size: var(--t-stat-label); color: var(--ink2); }
.sysgrid .close + .note { margin-top: 6px; }
@media (max-width: 599px) { .sysgrid .names { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .sysgrid .name { padding: 10px 10px; font-size: 13px; letter-spacing: .05em; } }

/* ============================================================
   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); box-shadow: 0 0 0 2px rgba(47, 111, 235, .08); transition: background .3s, box-shadow .3s; }
.instrument.live .light i { background: var(--blue); box-shadow: 0 0 0 3px rgba(47, 111, 235, .18); animation: pulse 1.6s ease-in-out infinite; }
.instrument.live .light::after { content: "LIVE"; }
.instrument .light::after { content: "STANDBY"; }
@keyframes pulse { 50% { opacity: .55; } }
.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, box-shadow .3s; }
.words li.on { color: var(--ink); }
.words li.on::before { background: var(--blue); box-shadow: 0 0 0 3px rgba(47, 111, 235, .18); }
.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; box-shadow: var(--tile-shadow); }
.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: 13.5px; line-height: 1.5; 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 6 · WHO WE ARE: text left, the engine chip right
   ============================================================ */
.who-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.who-grid h2 { font-size: var(--t-section); line-height: var(--lh-section); margin-top: 14px; }
.who-grid .lead { margin-top: 18px; }
.who-grid .spec { display: block; margin-top: 16px; font: 500 var(--t-spec)/1.6 var(--mono); letter-spacing: var(--ls-spec); text-transform: uppercase; color: var(--blue-deep); }
.chip { position: relative; padding: 22px 26px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--tile-shadow); }
.chip::before, .chip::after { content: ""; position: absolute; top: 28px; bottom: 28px; width: 10px; background: repeating-linear-gradient(180deg, var(--blue-soft) 0 10px, transparent 10px 24px); }   /* the pins */
.chip::before { left: -11px; }
.chip::after { right: -11px; }
.chip .chip-title { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--blue-deep); }
.chip ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.chip li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .35s, background .35s; }
.chip li .n { font: 500 11px/1.6 var(--mono); color: var(--ink3); }
.chip li b { display: block; font: 500 16px/1.25 var(--head); letter-spacing: -.01em; color: var(--ink); }
.chip li .spec { display: block; margin-top: 4px; font: 400 11.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); transition: color .35s; }
.chip li.lit { border-color: var(--blue); background: var(--sky); }
.chip li.lit .spec { color: var(--blue-deep); }
.chip li.lit .n { color: var(--blue-deep); }
@media (max-width: 899px) { .who-grid { grid-template-columns: 1fr; } .chip { margin: 0 11px; } }

/* ============================================================
   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.5; 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.5; 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; box-shadow: var(--tile-shadow); 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(72px, 10vw, 128px) 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; box-shadow: var(--tile-shadow); }
.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; box-shadow: var(--tile-shadow); 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.5; 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; box-shadow: var(--tile-shadow); }
  .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 engine rows light in sequence as the table enters view */
.spec-table tr.lit td { background: var(--sky); }
.spec-table tbody tr td { transition: background .35s; }

/* 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; box-shadow: 0 0 0 4px rgba(47, 111, 235, .2); transition: transform 2.6s linear; }
.timeline.go .fill { transform: scaleX(1); }
.timeline li { position: relative; padding-top: 30px; opacity: .45; transition: opacity .4s; }
.timeline li.on { opacity: 1; }
.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.55; 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; box-shadow: var(--tile-shadow); 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.5; }
.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.55; 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 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.7; }
.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): the problem layer (.px) shows first, then the fix (.fx) takes its place and
   anything marked .move travels; a six second loop while on screen, the fix as the final frame */
.ill svg .fx, .ill.in svg .fx { opacity: 0; }
.ill.in.live svg .px { animation: prob-px 6s linear infinite; }
.ill.in.live svg .fx { animation: prob-fx 6s linear infinite; }
.ill.in.live svg .fx.move { animation: prob-fx 6s linear infinite, prob-move 6s ease-in-out infinite; }
@keyframes prob-px { 0%, 40% { opacity: 1; } 47%, 93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes prob-fx { 0%, 44% { opacity: 0; } 50%, 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes prob-move { 0%, 50% { transform: translate(0, 0); } 78%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); } }
@keyframes ill-blink { 0%, 48% { opacity: 1; } 50%, 98% { opacity: 0; } }
@keyframes ill-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--dx, 6px), var(--dy, 0px)); } }
@keyframes ill-tick { 0% { stroke-dashoffset: 1; } 35%, 100% { stroke-dashoffset: 0; } }
.ill.in.live svg .idle.blink { animation: ill-blink 1.6s steps(1) infinite 1.2s; }
.ill.in.live svg .idle.drift { animation: ill-drift 3.2s ease-in-out infinite 1.2s; }
.ill.in.live svg .idle.tick { animation: ill-tick 3.2s ease infinite 1.2s; }
.ill svg .fill-soft.idle.blink { animation-name: ill-blink; }
@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; }
  .ill.in.live svg .idle { animation: none !important; }
  .ill svg .px { opacity: 0 !important; }
  .ill svg .fx, .ill.in svg .fx { opacity: 1; animation: none !important; }
  .ill svg .fx.move { transform: translate(var(--dx, 0px), var(--dy, 0px)); }
  .timeline .fill, .timeline .marker, .timeline li, .film.auto .beat, .spec-table tbody tr td { transition: none; }
  .timeline li { opacity: 1; }
}

/* ============================================================
   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 (hover: none), (pointer: coarse) { .tile { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
  .tile, .counter b .tick, .faq summary .pm, .btn, .chip li, .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; }
  .tile { transform: none !important; }
  .instrument.live .light i { animation: none; }
  .counter .label .caret, .typed .caret { display: none; }
  .counter b .tick { opacity: 1; transform: none; }
  .loop .box .c, .loop .ok, .loop .stack i:nth-child(3), .loop .pass { animation: none !important; opacity: 1; transform: none; }
  .loop .frame::before, .loop .card { animation: none !important; opacity: 0; }
  .loop .bar::after { animation: none !important; transform: scaleX(1); }
  .sysgrid .scan, .sysgrid .name, .legend .dot::after { animation: none !important; }
  .sysgrid .name { transition: none; }
  .btn.demo::after, .btn.play .play-glyph, .btn.play::before { animation: none !important; }
  .meters .bar i.on::after { transform: scaleX(1); }
  .chip li { border-color: var(--blue); background: var(--sky); }
  .chip li .spec { color: var(--blue-deep); }
}
/* 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; box-shadow: var(--tile-shadow); font-size: 13px; line-height: 1.5; 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); box-shadow: 0 0 10px 1px rgba(47, 111, 235, .35); 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); box-shadow: 0 6px 16px rgba(47, 111, 235, .1); }
.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; box-shadow: 0 0 6px 1px rgba(47, 111, 235, .35); }
.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.45 var(--body); box-shadow: 0 8px 24px rgba(15, 30, 54, .14); 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; box-shadow: var(--tile-shadow); 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; box-shadow: 0 12px 40px rgba(26, 79, 191, .14); 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; }
@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: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(15, 30, 54, .06); 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)); }
}