/* ============================================================================
   CloudSource healthcare, frontal build 3.

   Builds 1 and 2 both failed for the same reason: they treated frontal as a
   typography system. It is not. Frontal is a DIAGRAM system. Every section on
   frontal.so carries a hand built schematic made of terminal-chrome panels,
   mono micro labels, hairline nodes, dashed connectors and one accent-tinted
   "result" state. The prose is the caption, the diagram is the content.

   So this file is mostly a component kit for drawing schematics, and only
   secondarily a type scale.

   Verified against a live 1440 render of frontal.so, 2026-08-01.

   1  tokens
   2  reset and base
   3  page background layers
   4  section colour modes
   5  type
   6  nav
   7  buttons
   8  PANEL, the terminal-chrome box
   9  NODE, the small labelled card
   10 FLOW, nodes plus arrows
   11 CHIP
   12 RAIL, the timeline
   13 QUAD, the hairline cell grid
   14 METER and connectors
   15 hero
   16 stats
   17 proof
   18 faq
   19 cta and footer
   20 motion
   21 breakpoints  (every @media on this page lives here, at the bottom,
                    so nothing above can be silently overridden later)
   ========================================================================= */

/* 1 ---------------------------------------------------------------- tokens */

:root {
  /* frontal's dark is near black and neutral, not navy. Build 2 used a blue
     #0A0F1A and that alone read as "corporate template" instead of frontal. */
  --black:  #0A0A0C;
  --black-2:#101014;
  --paper:  #FAFAF8;   /* frontal's cream, cooled very slightly for CloudSource */
  --paper-2:#F2F2EE;

  --cream:  #F2F3F5;   /* text on black */
  --grey:   #9A9CA3;   /* muted on black */
  --dim:    #6A6C74;

  --ink:    #0C0D10;   /* text on paper */
  --body:   #45474E;
  --muted:  #6A6C74;

  --rule:      rgba(12, 13, 16, .12);
  --rule-dark: rgba(255, 255, 255, .12);

  /* one accent, used the way frontal uses orange: mono labels, the active
     rail dot, the final node in a flow, and nothing else. */
  --accent:      #12CE8E;
  --accent-ink:  #0B8A61;   /* the same accent, legible on cream */
  --accent-soft: rgba(18, 206, 142, .10);
  --accent-line: rgba(18, 206, 142, .38);

  --maxw: 1200px;
  --pad:  clamp(20px, 5vw, 60px);

  --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* 2 -------------------------------------------------------- reset and base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

.section { position: relative; padding: clamp(72px, 9vw, 128px) 0; overflow: hidden; }
/* Two sections in the same mode read as ONE band on frontal, so they get one
   gap between them, not two stacked paddings. Without this a dark section
   following a dark section leaves ~256px of dead black. */
.dark  + .dark  { padding-top: 0; }
.light + .light { padding-top: 0; }

/* 3 ------------------------------------------------- page background layers */

/* Fixed film grain over everything. Frontal's is the reason its flat blacks
   and creams do not read as flat digital fills. */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay; background-size: 170px 170px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The grid runs on BOTH modes. Build 2 only put it on the dark sections, and
   the missing cream grid is a large part of why the light bands read as a
   generic white page. */
.grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: 64px 64px; }

.dark .grid {
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(120% 85% at 50% 40%, #000 28%, transparent 84%);
          mask-image: radial-gradient(120% 85% at 50% 40%, #000 28%, transparent 84%);
}
.light .grid {
  background-image:
    linear-gradient(rgba(12,13,16,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,13,16,.05) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(125% 90% at 50% 40%, #000 22%, transparent 86%);
          mask-image: radial-gradient(125% 90% at 50% 40%, #000 22%, transparent 86%);
}

/* Brighter copy of the grid, revealed only inside a circle that tracks the
   pointer. Dark sections only, matching frontal. */
.dark .grid::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s;
  background-size: 64px 64px;
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(240px 240px at var(--gx,-500px) var(--gy,-500px), #000, transparent 70%);
          mask-image: radial-gradient(240px 240px at var(--gx,-500px) var(--gy,-500px), #000, transparent 70%);
}
.dark .grid.lit::before { opacity: 1; }

.glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(90px); }

.container { position: relative; z-index: 2; }

/* 4 ---------------------------------------------- section colour modes */

/* A mode class reassigns the variables every component inside reads, so a
   whole band flips from black to cream by changing one class. */

.dark {
  --fg: var(--cream);
  --fg-muted: var(--grey);
  --fg-dim: var(--dim);
  --line: var(--rule-dark);
  --surface: rgba(255, 255, 255, .028);
  --surface-2: rgba(255, 255, 255, .055);
  --chrome: rgba(255, 255, 255, .05);
  --accent-fg: var(--accent);
  background: var(--black);
  color: var(--cream);
}

.light {
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --fg-dim: var(--muted);
  --line: var(--rule);
  --surface: #fff;
  --surface-2: var(--paper-2);
  --chrome: rgba(12, 13, 16, .04);
  --accent-fg: var(--accent-ink);
  background: var(--paper);
  color: var(--body);
}

/* 5 ------------------------------------------------------------------ type */

h1, h2, h3, h4 {
  margin: 0; color: var(--fg); font-weight: 500;
  letter-spacing: -.028em; line-height: 1.06;
}
h1 { font-size: clamp(36px, 4.3vw, 55px); }
h2 { font-size: clamp(29px, 3.4vw, 43px); }
h3 { font-size: 19px; letter-spacing: -.015em; line-height: 1.3; font-weight: 600; }
p  { margin: 0; }

.lead { margin-top: 18px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; color: var(--fg-muted); max-width: 60ch; }

/* one closing question, plain and quiet, then a real button below it. */
.problem-cta {
  margin: 34px auto 0; max-width: 46ch; text-align: center;
  font-size: 17px; font-weight: 400; letter-spacing: -.01em; color: #fff;
}
.problem-cta-btn { margin: 20px auto 0; text-align: center; }

/* Frontal's eyebrow is literally bracketed mono, not a dot plus a word. */
.eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-fg);
}
.eyebrow::before { content: "[ "; }
.eyebrow::after  { content: " ]"; }

/* Mono micro label. The single most repeated element on frontal.so. */
.ml {
  font-family: var(--mono); font-size: 9.5px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim);
}
.ml--accent { color: var(--accent-fg); }

/* Oversized accent numeral sitting beside a headline. */
.bignum {
  font-family: var(--mono); font-size: clamp(24px, 2.6vw, 34px); font-weight: 500;
  color: var(--accent-fg); line-height: 1; flex: none;
}

.hl { color: var(--accent-fg); }

.head { margin-bottom: clamp(38px, 4.5vw, 64px); }
.head .eyebrow { margin-bottom: 16px; }
.head--split { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(20px, 4vw, 64px); }
.head--split .head-l { flex: 1 1 460px; min-width: 0; }
.head--split .head-r { flex: 1 1 320px; min-width: 0; max-width: 440px; }
.head--split .head-r .lead { margin-top: 0; }

/* 6 ------------------------------------------------------------------- nav */

/* Frontal's own nav CSS (scraped, fr-Footer.DQlaemcA.css) does not wrap the
   bar in one merged pill and never gives the outer bar itself a background.
   The mark and the links group are each their own translucent chip
   (--pill-bg:#121218a8, --pill-br:#ffffff1a, radius 12px, blur(20px)
   saturate(1.5)) that fade in on scroll. On scroll frontal also switches its
   nav-inner grid from edge-to-edge (1fr auto 1fr) to a centered cluster
   (grid-template-columns:auto auto auto; justify-content:center; gap:8px),
   so the chips huddle together instead of leaving a wide transparent gap
   between them. We copy both: no full-bar background, and the flex row
   re-centers on .stuck so scrolled page content can't show through the gap. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 14px var(--pad);
  transition: padding-top .5s var(--ease);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
}
.nav.stuck .nav-in { justify-content: center; gap: 8px; }

.nav-mark {
  flex: none; height: 42px; display: grid; place-items: center;
  padding: 0 10px; border-radius: 12px;
  background: transparent; border: 1px solid transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.stuck .nav-mark {
  background: rgba(18,18,24,.66); border-color: rgba(255,255,255,.10);
  box-shadow: inset 0 1px rgba(255,255,255,.12);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
.nav-mark img { width: 22px; height: 22px; object-fit: contain; }

.nav-wordmark {
  flex: none; display: flex; opacity: .95; max-width: 190px; overflow: hidden;
  white-space: nowrap; font-family: var(--sans); font-size: 19px; font-weight: 600;
  transition: opacity .3s, max-width .3s;
}
.nw-cloud { color: var(--cream); }
.nw-source { color: var(--accent); }

.nav-links {
  display: flex; align-items: center; gap: 4px; margin-left: auto;
  padding: 6px; border-radius: 12px;
  background: transparent; border: 1px solid transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.stuck .nav-links {
  margin-left: 0;
  background: rgba(18,18,24,.66); border-color: rgba(255,255,255,.10);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 10px 34px rgba(0,0,0,.18);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
.nav-links a {
  padding: 7px 14px; border-radius: 999px; font-size: 13.5px; color: var(--grey);
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--cream); background: rgba(255,255,255,.07); }

.nav-cta { flex: none; }
.nav.stuck .nav-cta .btn--pri { padding: 9px 16px; font-size: 13px; }

.nav.stuck { padding-top: 10px; }
.nav.stuck .nav-wordmark { max-width: 0; opacity: 0; }

/* 7 --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 19px; border-radius: 10px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s;
  position: relative; z-index: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn .arw { transition: transform .2s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

/* flat, solid accent green. the primary action, unmistakable. */
.btn--pri {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--accent);
}
.btn--pri:hover { background: #17E39C; }

.btn--ghost { color: var(--fg-muted); border-color: var(--line); }
.btn--ghost:hover { color: var(--fg); border-color: var(--fg-dim); }

/* the hero's one real ask, sized so it is unmistakably the primary action */
.btn--lg { padding: 16px 28px; font-size: 16px; gap: 11px; font-weight: 600; }

/* frontal's inline text link: accent, arrow, no button */
.tlink {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 500; color: var(--fg-muted);
}
.tlink .arw { transition: transform .2s var(--ease); }
.tlink:hover .arw { transform: translateX(3px); }

/* 8 ------------------------------------------ PANEL, terminal-chrome box */

/* The workhorse. A bordered box with a chrome header bar carrying a centred
   mono label flanked by two small squares. Every diagram on frontal.so sits
   inside one of these. */
.panel { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.dark .panel { background: rgba(255,255,255,.022); }

.panel-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 12px; background: var(--chrome);
  border-bottom: 1px solid var(--line);
}
.panel-bar .ml { color: var(--fg-muted); }
.panel-bar::before, .panel-bar::after {
  content: ""; width: 5px; height: 5px; flex: none;
  background: var(--fg-dim); opacity: .5;
}
/* variant with the label pushed left and a status slot on the right */
.panel-bar--split { justify-content: space-between; }
.panel-bar--split::before, .panel-bar--split::after { display: none; }

.panel-body { padding: 16px; }
.panel--flush .panel-body { padding: 0; }

/* the accent-outlined panel, frontal's "this is the live one" state */
.panel--hot { border-color: var(--accent-line); }
.panel--hot .panel-bar { background: var(--accent-soft); border-bottom-color: var(--accent-line); }
.panel--hot .panel-bar .ml { color: var(--accent-fg); }

/* a row list inside a panel */
.rows { display: flex; flex-direction: column; }
.rows > * { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.rows > *:last-child { border-bottom: 0; }
.rows .rname { font-size: 14px; color: var(--fg); }
.rows .rval { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

/* status dot plus its colour, used by the scorecard */
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.s-ok   .dot { background: var(--accent); }
.s-warn .dot { background: #E8B23C; }
.s-risk .dot { background: #E5604D; }
.s-ok   .rval { color: var(--accent-fg); }
.s-warn .rval { color: #E8B23C; }
.s-risk .rval { color: #E5604D; }

/* 9 -------------------------------------- NODE, the small labelled card */

.node {
  position: relative; flex: 1 1 0; min-width: 0;
  padding: 14px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface);
}
.dark .node { background: rgba(255,255,255,.03); }

.node-ic {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-fg); margin-bottom: 12px;
}
.node-ic svg { width: 15px; height: 15px; }
.node .ml { display: block; margin-bottom: 5px; }
.node-val { font-size: 14px; font-weight: 500; color: var(--fg); line-height: 1.35; }

/* the terminal state of a flow. Exactly one per diagram. */
.node--hot { background: var(--accent-soft); border-color: var(--accent-line); }
.node--hot .node-ic { background: rgba(18,206,142,.16); }
.node--hot .node-val { color: var(--accent-fg); }

/* 10 ------------------------------------------ FLOW, nodes plus arrows */

.flow { display: flex; align-items: stretch; gap: 0; }
.flow > .node { flex: 1 1 0; }

/* The step-to-step connector. A dotted track with a dot that crosses it, rather
   than an arrow glyph, because the glyph could only ever sit there and this has
   to show the reader moving from one step to the next. */
.hop { position: relative; flex: none; align-self: center; width: 34px; height: 12px; }
.hop::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background-image: linear-gradient(90deg, var(--fg-dim) 50%, transparent 0);
  background-size: 5px 1px; opacity: .55;
}
.hop i {
  position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--accent); opacity: 0;
  box-shadow: 0 0 9px rgba(18, 206, 142, .85);
}

.flow-note {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--fg-muted);
}

/* 11 ------------------------------------------------------------- CHIP */

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--fg);
}
.dark .chip { background: rgba(255,255,255,.035); }
.chip svg { width: 13px; height: 13px; color: var(--accent-fg); flex: none; }

/* the near-black alert pill frontal drops into its cream diagrams */
.chip--solid {
  background: var(--black); border-color: var(--black); color: var(--cream);
  letter-spacing: .11em; text-transform: uppercase; font-size: 9.5px; padding: 9px 14px;
}
.chip--solid .live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }

/* 12 ------------------------------------------------- RAIL, the timeline */

.rail { position: relative; padding-left: 22px; }
.rail::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 1px; background: var(--line);
}
.rail-item { position: relative; padding: 0 0 30px; }
.rail-item:last-child { padding-bottom: 0; }
.rail-item::before {
  content: ""; position: absolute; left: -26px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--fg-dim);
}
.rail-item.on::before { background: var(--accent); border-color: var(--accent); }
/* the accent bar frontal runs down the side of the active step */
.rail-item.on::after {
  content: ""; position: absolute; left: -22px; top: 5px; bottom: 22px;
  width: 2px; background: var(--accent);
}
.rail-item .ml { display: block; margin-bottom: 7px; }
.rail-item h3 { margin-bottom: 7px; }
.rail-item p { font-size: 14px; line-height: 1.6; color: var(--fg-muted); }

/* 13 --------------------------------------- QUAD, the hairline cell grid */

/* Frontal's light sections are not a row of floating cards with shadows. They
   are one big box divided into cells by 1px rules. */
.quad {
  display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--surface);
}
.dark .quad { background: rgba(255,255,255,.02); }
.cell { padding: clamp(22px, 2.6vw, 34px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cell > .ml { display: block; margin-bottom: 12px; }
.cell h3 { margin-bottom: 10px; }
.cell p { font-size: 14px; line-height: 1.6; color: var(--fg-muted); }
/* Top aligned with a floor, so a headline that wraps to two lines does not
   push its cell's following rows out of line with its neighbours. */
.cell-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; min-height: 58px; }
.cell-top h3 { margin-bottom: 0; }
/* share the headline's line box so the numeral sits on the first line, not above it */
.cell-top .bignum { line-height: 1.3; }

/* 14 ------------------------------------------- METER and connectors */

.meter { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.meter i {
  display: block; height: 100%; border-radius: 4px;
  background-image: repeating-linear-gradient(45deg,
    var(--accent) 0 5px, rgba(18,206,142,.55) 5px 10px);
}

/* dashed vertical connector between stacked diagram pieces */
.link-v { width: 1px; height: 26px; margin: 0 auto;
  background-image: linear-gradient(var(--accent-line) 50%, transparent 0);
  background-size: 1px 7px; }

/* 15 ------------------------------------------------------------- hero */

.hero { padding-top: clamp(130px, 15vw, 190px); overflow: hidden; }
.hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero .hero-veil { position: absolute; inset: 0; z-index: 0; background:
  linear-gradient(90deg, rgba(10,10,12,.92) 0%, rgba(10,10,12,.74) 45%, rgba(10,10,12,.55) 100%),
  linear-gradient(0deg, rgb(10,10,12) 2%, rgba(10,10,12,0) 34%),
  linear-gradient(180deg, rgb(10,10,12) 0%, rgba(10,10,12,0) 20%); }
.hero-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(32px, 5vw, 68px); align-items: center; }
.hero .glow { width: 720px; height: 720px; top: -180px; right: -220px;
  background: radial-gradient(circle, rgba(18,206,142,.17), transparent 66%); }
/* One button, and under it a plain link. Two buttons side by side made the
   page look like it was asking for two things when it is only asking for one. */
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 30px; }
.hero-trust { display: flex; align-items: center; gap: 9px; margin-top: 24px; font-size: 12.5px; color: var(--fg-dim); }
.hero-trust svg { width: 14px; height: 14px; color: var(--accent); flex: none; }

/* the score readout at the top of the hero panel */
.score { display: flex; align-items: flex-end; gap: 14px; padding: 18px 16px; border-bottom: 1px solid var(--line); }
.score-n { font-family: var(--mono); font-size: 40px; font-weight: 500; line-height: .9; color: var(--fg); }
.score-d { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); padding-bottom: 4px; }
.score-tag { margin-left: auto; }

/* the hairline three-figure band that closes the hero */
.proofband { display: flex; flex-wrap: wrap; margin-top: clamp(46px, 5vw, 72px); border-top: 1px solid var(--line); }
.pb { flex: 1 1 200px; padding: 22px 26px; border-right: 1px solid var(--line); }
.pb:last-child { border-right: 0; }
.pb .ml { display: block; margin-bottom: 8px; }
.pb b { display: block; font-family: var(--mono); font-size: clamp(19px, 1.9vw, 25px); font-weight: 500; color: var(--fg); letter-spacing: -.01em; }
.pb span { font-size: 13px; color: var(--fg-muted); }

/* 16 ------------------------------------------------------------ stats */

.statrow { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.stat { padding: 30px 26px 0 0; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat:not(:first-child) { padding-left: 26px; }
.stat-n { font-family: var(--mono); font-size: clamp(30px, 3.4vw, 44px); font-weight: 500; color: var(--accent-fg); line-height: 1; letter-spacing: -.02em; }
.stat h3 { margin: 14px 0 9px; }
.stat p { font-size: 14px; line-height: 1.6; color: var(--fg-muted); }
.src { margin-top: 56px; text-align: center; font-size: 12px; color: var(--fg-dim); }
.src a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 3px; }

/* 17 ------------------------------------------------------------ proof */

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.q { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.dark .q { background: rgba(255,255,255,.025); }
.q-top { display: flex; align-items: center; gap: 10px; }
.q-stat { font-size: 16px; font-weight: 600; color: var(--fg); line-height: 1.35; letter-spacing: -.015em; }
.q-body { font-size: 14px; line-height: 1.65; color: var(--fg-muted); }
.q-attr { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-dim); }
.q--lead { border-color: var(--accent-line); background: var(--accent-soft); }

/* 18 -------------------------------------------------------------- faq */

/* the title stays put on the left while the questions run past it */
.faq-split {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.6fr);
  gap: 30px clamp(30px, 5vw, 80px); align-items: start;
}
.faq-side { position: sticky; top: 100px; }

.faqs { display: flex; flex-direction: column; }
/* frontal's accordion is square, not rounded, but each question now sits on
   its own white panel instead of bare cream so it actually reads as a box */
.fq {
  border: 1px solid var(--line); border-bottom: none; background: var(--surface);
  padding: 0 22px;
}
.fq:last-child { border-bottom: 1px solid var(--line); }
.fq summary {
  display: grid; grid-template-columns: 30px 1fr 26px; gap: 0 14px; align-items: start;
  padding: 21px 0; cursor: pointer; list-style: none;
  font-size: 17.5px; font-weight: 500; color: var(--fg); letter-spacing: -.015em;
  transition: color .3s var(--ease);
}
.fq summary::-webkit-details-marker { display: none; }
.fq summary:hover { color: var(--accent-fg); }
.fq .qn {
  font-family: var(--mono); font-size: 11px; line-height: 1.75; color: var(--fg-dim);
  transition: color .3s var(--ease);
}
.fq[open] .qn { color: var(--accent-fg); }

/* the mark. A square chip holding a plus that becomes a minus, which reads as
   an instrument rather than a chevron. */
.fq-x {
  position: relative; width: 26px; height: 26px; margin-top: -1px;
  border: 1px solid var(--line); border-radius: 6px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.fq-x::before, .fq-x::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--fg-dim);
  transition: transform .35s var(--ease), background .3s var(--ease);
}
.fq-x::after { transform: rotate(90deg); }
.fq summary:hover .fq-x { border-color: var(--accent-line); }
.fq[open] .fq-x { border-color: var(--accent-line); background: var(--accent-soft); }
.fq[open] .fq-x::before, .fq[open] .fq-x::after { background: var(--accent-fg); }
.fq[open] .fq-x::after { transform: rotate(180deg); }

.fq .a {
  padding: 0 40px 26px 44px; font-size: 15.5px; line-height: 1.75;
  color: var(--fg-muted); max-width: 70ch;
  animation: fq-in .45s var(--ease) both;
}
@keyframes fq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 19 ------------------------------------------------------ cta and footer */

.cta-box {
  position: relative; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--accent-line);
  background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.015)), #0D0F14;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.3), 0 30px 70px -20px rgba(0,0,0,.55);
}
/* one centred column, not a split with a competing panel, so the headline and
   the button read as the CTA instead of sharing the section with a checklist */
.cta-in {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 620px; margin: 0 auto; padding: clamp(44px, 6vw, 80px) clamp(28px, 4vw, 56px);
}
.cta-in .lead { margin: 14px auto 0; }
.cta-in .hero-cta { margin-top: clamp(22px, 3vw, 30px); justify-content: center; }
.cta-checks {
  list-style: none; margin: clamp(28px, 4vw, 40px) 0 0; padding: clamp(18px, 2.4vw, 22px) 0 0;
  border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
}
.cta-checks .rname { font-size: 13px; }
.cta-box .glow { width: 680px; height: 680px; top: -280px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(18,206,142,.24), transparent 65%); }

.foot { padding: clamp(48px, 6vw, 72px) 0 30px; }

.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand img { height: 42px; width: auto; margin-bottom: 14px; }
.foot-brand p { font-size: 13.5px; line-height: 1.6; max-width: 34ch; color: var(--fg-muted); }
.foot-address { font-style: normal; font-size: 13.5px; line-height: 1.6; margin-top: 10px; color: var(--fg-muted); }
.foot-social { display: flex; gap: 12px; margin-top: 14px; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--fg); opacity: .72; transition: opacity .2s; }
.foot-social a:hover { opacity: 1; }
.foot-social svg { width: 17px; height: 17px; }
.foot-col .ml { display: block; margin-bottom: 16px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.foot-col a { font-size: 13.5px; color: var(--fg-muted); transition: color .2s; }
.foot-col a:hover { color: var(--fg); }

.foot-cta {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.foot-trust { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; font-size: 12.5px; color: var(--fg-dim); }
.foot-trust span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.foot-trust svg { width: 14px; height: 14px; color: var(--accent); flex: none; }

/* frontal's real footer (fr-Footer.DQlaemcA.css) runs exactly one rule for
   the whole block, a dashed line above .foot-main, and nothing else, no
   divider between the trust badges, no second rule above the legal line. We
   match that: one solid rule on .foot, everything below (columns, trust
   row, legal line) reads as a single clean block. */
.foot-legal {
  margin-top: clamp(32px, 4vw, 48px);
  font-size: 11.5px; color: var(--fg-dim);
}
.foot-legal a { text-decoration: underline; text-underline-offset: 3px; }
.foot-legal a:hover { color: var(--fg); }

@media (max-width: 900px) {
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .foot-top { grid-template-columns: 1fr; gap: 30px; }
  .foot-cta { flex-direction: column; align-items: flex-start; }
}

/* 19b ------------------------------------------- system map (the problem) */

/* Five tools feeding one practice, then what falls out the other side.
   One state class on .sysmap drives every colour and both label sets, so the
   before and after is a single swap rather than two rendered diagrams. */

.sysmap {
  --sm: #E5604D;                    /* the exposed state, and the default */
  --sm-soft: rgba(229, 96, 77, .12);
  --sm-line: rgba(229, 96, 77, .34);
}
.sysmap.is-covered {
  --sm: var(--accent);
  --sm-soft: var(--accent-soft);
  --sm-line: var(--accent-line);
}

/* This bar carries a label and a control rather than a centred title, so it
   drops the two flanking squares the other panel bars use. */
.sysmap-bar { justify-content: space-between; padding: 7px 8px 7px 20px; }
.sysmap-bar::before, .sysmap-bar::after { display: none; }

/* the before/after switch, sitting in the panel's chrome bar */
.sw { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.05); }
.sw-b {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--fg-dim); transition: all .3s var(--ease);
}
.sw-b:hover { color: var(--fg); }
.sw-b.is-on { background: var(--sm-soft); color: var(--sm); box-shadow: inset 0 0 0 1px var(--sm-line); }

.sm-body {
  position: relative;
  display: grid; grid-template-columns: 1fr 232px 1.35fr;
  align-items: start; gap: 0 clamp(54px, 7vw, 96px); padding: 22px 20px 26px;
}
/* the boxes ride above the wiring, so a wire tucks under a node's edge */
.sm-col, .sm-hubwrap { position: relative; z-index: 1; }

.sm-cap { display: block; margin-bottom: 14px; height: 14px; }
.sm-stack { display: flex; flex-direction: column; justify-content: space-between; height: 340px; }

.sm-node, .sm-out {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 9px;
  /* solid, not a tint. A transparent card sitting over the band's grid let the
     checker read through it and the nodes looked like holes rather than things. */
  background: #16181D; font-size: 13px; color: var(--fg);
  transition: border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
/* Each box sits in its own pool of light, so a wire looks like it is leaving
   something lit rather than starting at a random point on a dark panel. The
   light is white, matching the white dots these boxes send down the wires: the
   tools are neutral, and only what comes out the far side of the practice
   carries a colour. */
.sm-node {
  border-color: rgba(255, 255, 255, .30);
  box-shadow: 0 0 18px -10px rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
/* THE FLARE.
   Every box in the diagram lights at one exact moment: a node when it fires its
   dot, the practice when the dots land on it, an outcome when its dot lands on
   that. The old version glowed the nodes on an unrelated 5.2s even/odd timer,
   which is why nothing in the picture appeared to cause anything else.
   It is painted on a pseudo-element and only its opacity moves, so the box's
   own border and shadow keep their half-second red-to-green transition and the
   state swap still reads as a fade rather than a snap.
   Timing comes from script, as --d, off the same clock that times the dots. */
.sm-node::after, .sm-out::after, .sm-ring {
  content: ''; position: absolute; inset: -1px; border-radius: 10px;
  pointer-events: none; opacity: 0;
  animation: sm-hit 9s linear var(--d, 0s) infinite;
}
.sm-node::after {
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 0 24px -4px rgba(255,255,255,.7), inset 0 0 18px -9px rgba(255,255,255,.55);
}
.sm-stack--5 .sm-node { height: 52px; }
.sm-stack--4 .sm-out  { height: 70px; }

/* every tool is genuinely running, in both states. That is the whole point of
   the section, so these dots never carry a state colour. They match the white
   the node glows and the white dot it sends down the wire. */
.sm-node .dot { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.75); }

/* the state tint is painted as its own layer over the solid base, so the card
   stays opaque while one variable still drives red-to-green */
.sm-out {
  border-color: var(--sm-line);
  background: linear-gradient(var(--sm-soft), var(--sm-soft)), #16181D;
  box-shadow: 0 0 30px -12px var(--sm);
}
.sm-out::after {
  border: 1px solid var(--sm);
  box-shadow: 0 0 26px -4px var(--sm), inset 0 0 20px -9px var(--sm);
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.sm-out .dot { background: var(--sm); transition: background .5s var(--ease); }
.sm-out-t { flex: 1; min-width: 0; line-height: 1.35; }
.sm-tag {
  flex: none; font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sm);
}

/* label pairs. .sm-x shows while exposed, .sm-c shows once covered. */
.sysmap .sm-c { display: none; }
.sysmap.is-covered .sm-x { display: none; }
.sysmap.is-covered .sm-c { display: inline; }
.sysmap.is-covered .sm-hub-mark { display: block; }

/* THE WIRING.

   One SVG laid over the whole diagram at true pixel scale, with every path
   computed in script from where the boxes actually are. What this replaces was
   three separate SVGs sitting in narrow grid columns, each squashed into its
   own coordinate space by preserveAspectRatio="none". None of them knew where
   a node or the hub was, so the curves hooked off in odd directions and died in
   empty air a hundred pixels short of the thing they were supposed to reach.
   Measured geometry is the only way a connector lands on an edge at every
   width, so the script measures. */
.sm-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

.sm-lines path { fill: none; stroke: rgba(255,255,255,.17); stroke-width: 1.25; stroke-dasharray: 2 7; stroke-linecap: round; }
.sm-lines path.out { stroke: var(--sm-line); transition: stroke .5s var(--ease); }

/* The travelling dot. A dash of almost no length under a round cap is a perfect
   circle, and because the SVG is no longer distorted it stays a circle the whole
   way along the curve. Length is per-path, set in script. */
.sm-pulses path {
  fill: none; stroke: #fff; stroke-width: 5.5; stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(255,255,255,.9));
  animation: sm-run 9s linear infinite;
}
/* the tools feed in white in both states, because they are working either way.
   Only what leaves the practice carries the state. */
.sm-pulses path.out { stroke: var(--sm); filter: drop-shadow(0 0 8px var(--sm)); transition: stroke .5s var(--ease); }

.sm-hubwrap { position: relative; height: 340px; margin-top: 28px; display: grid; place-items: center; }

/* the CloudSource layer, wrapped around the practice */
.sm-shield {
  position: absolute; width: 232px; height: 232px; pointer-events: none;
  opacity: 0; transform: scale(.82); transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.sysmap.is-covered .sm-shield { opacity: 1; transform: scale(1); }
.sm-shield svg { width: 100%; height: 100%; display: block; }
.sm-orbit {
  fill: none; stroke: var(--accent-line); stroke-width: 1;
  stroke-dasharray: 3 9; transform-origin: 110px 110px;
}
.sm-orbit--2 { stroke: rgba(18,206,142,.16); stroke-dasharray: 1 14; }
.sm-sats { transform-origin: 110px 110px; }
.sm-sats circle { fill: var(--accent); }

.sm-hub {
  /* Fixed box, wide enough for the longer of the two sub-labels to sit on one
     line. The two states swap that label, and a box that resizes when it swaps
     drags every wire endpoint with it, so the diagram twitches on each turn of
     the loop. Same box in both states, no twitch. */
  position: relative; width: 194px; height: 136px; padding: 0 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  /* The practice is the thing at risk, so it is the loudest box in the diagram:
     solid, ringed and washed in the state colour rather than faintly tinted. */
  border: 1px solid var(--sm); border-radius: 12px;
  background:
    linear-gradient(var(--sm-soft), var(--sm-soft)),
    linear-gradient(var(--sm-soft), var(--sm-soft)),
    linear-gradient(var(--sm-soft), var(--sm-soft)), #16181D;
  box-shadow: 0 0 34px -6px var(--sm-line), inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
/* the practice reacting. Longer hold than a node's flare, because five dots land
   on it across most of a second and one blink would only mark the first. */
.sm-ring {
  border-radius: 12px;
  border: 1px solid var(--sm);
  box-shadow: 0 0 44px -6px var(--sm), inset 0 0 30px -14px var(--sm);
  animation-name: sm-hit-hub;
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.sm-hub-ic { width: 32px; height: 32px; color: var(--sm); margin-bottom: 10px; stroke-width: 1.7; transition: color .5s var(--ease); }
/* the mark carries its own light, so the green half of the loop names who closed
   the gaps rather than just turning the same picture a different colour */
.sm-hub-mark {
  width: 34px; height: 34px; object-fit: contain; margin-bottom: 9px;
  filter: drop-shadow(0 0 9px rgba(18,206,142,.9)) drop-shadow(0 0 22px rgba(18,206,142,.45));
}
.sm-hub-l { display: block; color: var(--fg); margin-bottom: 6px; }
.sm-hub-s { display: block; font-size: 13px; line-height: 1.35; color: var(--sm); transition: color .5s var(--ease); }

/* 19c ----------------------------------- PANEL--CARD, the lit white card */

/* The hero scorecard. A white card dropped onto the black hero, ringed and
   lit green so it is the first thing the eye lands on. It reassigns the
   light-mode variables locally, so every child it already contains flips
   with it and nothing inside needs its own override. */
.panel--card {
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --fg-dim: var(--muted);
  --line: rgba(12, 13, 16, .10);
  --surface: #fff;
  --surface-2: var(--paper-2);
  --chrome: #F1F2EF;
  --accent-fg: var(--accent-ink);
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow:
    0 0 0 5px rgba(18, 206, 142, .16),
    0 0 60px rgba(18, 206, 142, .38),
    0 30px 70px rgba(0, 0, 0, .55);
}
/* .dark .panel wins on specificity, so the card has to answer it directly */
.dark .panel--card { background: #fff; }
/* the bar carries the same accent tint frontal.so uses for "this is the live
   one" (.panel--hot below), so the outline reads as one green panel instead
   of a plain grey header sitting inside a green ring */
.panel--card .panel-bar { background: var(--accent-soft); border-bottom-color: var(--accent-line); padding: 13px 20px; }
.panel--card .panel-bar .ml { color: var(--accent-fg); }
/* everything inside the card gets more air than a normal panel, so it does
   not read as crammed against a border this bright */
.panel--card .score { padding: 26px 22px; }
.panel--card .rows > * { padding: 15px 22px; }

/* the amber and the red both wash out on white, so they darken here */
.panel--card .s-warn .dot { background: #B5791A; }
.panel--card .s-warn .rval { color: #B5791A; }
.panel--card .s-risk .dot { background: #C43A24; }
.panel--card .s-risk .rval { color: #C43A24; }
.panel--card .s-ok .dot { background: var(--accent-ink); }

/* The rows that are not clean carry a warm wash so the eye lands on the
   problems first. The dot on those rows breathes, slowly and only slightly,
   so the card reads as something still being measured rather than a picture. */
.panel--card .s-warn { background: linear-gradient(90deg, rgba(232,178,60,.16), rgba(232,178,60,.03) 62%, transparent); }
.panel--card .s-risk { background: linear-gradient(90deg, rgba(229,96,77,.17), rgba(229,96,77,.035) 62%, transparent); }
.panel--card .s-warn .dot,
.panel--card .s-risk .dot { animation: dot-breathe 3.6s var(--ease) infinite; }
.panel--card .s-risk .dot { animation-duration: 2.9s; animation-delay: .4s; }
@keyframes dot-breathe {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 4px transparent; opacity: .62; }
}
/* the dot's own colour drives its halo, so warn glows gold and risk glows red */
.panel--card .s-warn .dot { color: rgba(181,121,26,.42); }
.panel--card .s-risk .dot { color: rgba(196,58,36,.42); }

/* 19d ------------------------------------- GAP, the exposed-to-closed track */

/* One grid for the whole row, and both the card and its body hand their rows
   straight back to it. Every part of every card then sits on the same line as
   its opposite number: the icons, the headings, the three tracks. A two-line
   heading in one card no longer pushes that card's track out of the row. */
.gaps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  grid-template-rows: repeat(6, auto);
}
.gap {
  display: grid; grid-row: span 6; grid-template-rows: subgrid;
  /* The card starts exposed and says so with its own skin, not with a red dot
     the reader has to hunt for. It cools to the accent as the track fills. */
  border-color: rgba(196, 58, 36, .30);
  background:
    linear-gradient(180deg, rgba(196, 58, 36, .07), rgba(196, 58, 36, 0) 190px),
    var(--paper);
  transition: border-color .8s var(--ease), background .8s var(--ease),
              transform .4s var(--ease);
}
.gap:hover { transform: translateY(-3px); }
.gap.is-closed {
  border-color: rgba(18, 206, 142, .34);
  background:
    linear-gradient(180deg, rgba(18, 206, 142, .07), rgba(18, 206, 142, 0) 190px),
    var(--paper);
}

/* the state pill in the chrome bar, red while the gap is open */
.gap-state { display: inline-flex; align-items: center; gap: 7px; color: #C43A24; }
.gap-state .dot { background: #C43A24; transition: background .8s var(--ease); }
.gap-state, .gap-state .gs-x, .gap-state .gs-c { transition: color .8s var(--ease); }
.gs-c { display: none; }
.gap.is-closed .gs-x { display: none; }
.gap.is-closed .gs-c { display: inline; }
.gap.is-closed .gap-state { color: var(--accent-ink); }
.gap.is-closed .gap-state .dot { background: var(--accent-ink); }
.gap-b { padding: 22px; display: grid; grid-row: span 5; grid-template-rows: subgrid; }

.gap-ic {
  width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
  border: 1px solid rgba(196, 58, 36, .32); background: rgba(196, 58, 36, .09);
  color: #C43A24; margin-bottom: 16px;
  transition: border-color .8s var(--ease), background .8s var(--ease), color .8s var(--ease);
}
.gap.is-closed .gap-ic {
  border-color: var(--accent-line); background: rgba(18, 206, 142, .11); color: var(--accent-ink);
}
.gap-ic svg { width: 19px; height: 19px; }
.gap-b h3 { margin-bottom: 18px; }

/* the two halves of the argument, cost above the track and fix below it */
.gap-half { display: flex; gap: 10px; }
.gap-half .dot { margin-top: 6px; }
.gap-half .ml { display: block; margin-bottom: 5px; }
.gap-half p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--fg-muted); }
.gap-half--risk .dot { background: #C43A24; }
.gap-half--risk .ml { color: #C43A24; }
/* the row heights come from the shared subgrid above, so nothing here needs a
   hand-set minimum any more */
.gap-half--fix  .dot { background: var(--accent-ink); }

/* The track. It starts red and empty, and a hatched accent fill walks across
   it as the card scrolls up the viewport, which is the whole point of the
   section: these move from exposed to closed. */
.gap-rail { margin: 20px 0; }
.gap-track {
  position: relative; height: 8px; border-radius: 5px;
  background: rgba(196, 58, 36, .16);
  box-shadow: inset 0 0 0 1px rgba(196, 58, 36, .22);
  overflow: hidden;
}
.gap-fill {
  position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 5px;
  background-image: repeating-linear-gradient(45deg,
    var(--accent-ink) 0 5px, rgba(11, 138, 97, .5) 5px 10px);
}
.gap-ends { display: flex; justify-content: space-between; margin-top: 9px; }
.gap-ends .ml:first-child { color: #C43A24; }
.gap-ends .ml:last-child  { color: var(--accent-ink); }

/* 19e ------------------------- CONVERGE, nine reviewed areas into one place */

/* Its own lap, shorter than the system map's, because nine wires all running
   inward is a busier picture than five in and four out and it needs to clear. */
.cvg { --lap: 9s; }

/* No card. The section's own cream and its own grid are the ground, and a pair
   of hairlines is the only frame, which is how frontal frames a light band. */
.cvg-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 0 0 13px; border-bottom: 1px solid var(--rule);
}
.cvg-bar-r { color: var(--muted); }
.cvg-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center; gap: 30px clamp(30px, 4.5vw, 66px); padding: 26px 0 6px;
}

/* ---- the dial. One fixed square viewBox, so it scales without distorting ---- */

.cv-dialwrap { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin: 0 auto; }
.cv-dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.cv-orbit { fill: none; stroke: rgba(12,13,16,.13); stroke-width: 1; stroke-dasharray: 3 10; }
.cv-orbit--2 { stroke: rgba(11, 138, 97, .18); stroke-dasharray: 1 13; }

/* every run is the same short straight length down its own radius, so nothing
   crosses and every dot moves at the same speed */
.cv-lines path { fill: none; stroke: rgba(12,13,16,.28); stroke-width: 1.1; stroke-dasharray: 2 6; stroke-linecap: round; }
.cv-pulses path {
  fill: none; stroke: var(--accent-ink); stroke-width: 5.5; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(11, 138, 97, .6));
  animation: sm-run var(--lap) linear infinite;
}

.cv-chip-b   { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
.cv-chip-t   {
  font-family: var(--mono); font-size: 12px; font-weight: 500; text-anchor: middle;
  fill: var(--dim); animation: cv-num var(--lap) linear var(--d, 0s) infinite;
}
/* the moment a chip is picked up. Its own rect, so only opacity moves and the
   plate underneath keeps its hairline. */
.cv-chip-h {
  fill: rgba(18, 206, 142, .16); stroke: var(--accent-ink); stroke-width: 1; opacity: 0;
  filter: drop-shadow(0 0 9px rgba(11, 138, 97, .75));
  animation: sm-hit var(--lap) linear var(--d, 0s) infinite;
}

/* ---- what sits in the middle ---- */

.cv-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 37.5%; aspect-ratio: 1; border-radius: 50%; padding: 0 13px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--accent-line); background: var(--accent-ink);
  box-shadow: 0 0 30px -6px rgba(11, 138, 97, .55), inset 0 0 20px -10px rgba(18, 206, 142, .4);
  animation: cv-hub-glow 2.6s ease-in-out infinite;
}
/* the CloudSource Protected hub breathes on its own smooth cycle, separate
   from the sharp nine-spike ring, so it always reads as alive */
@keyframes cv-hub-glow {
  0%, 100% { box-shadow: 0 0 30px -6px rgba(11, 138, 97, .55), inset 0 0 20px -10px rgba(18, 206, 142, .4); }
  50%      { box-shadow: 0 0 48px -4px rgba(18, 206, 142, .9), inset 0 0 28px -8px rgba(18, 206, 142, .65); }
}
/* white mark on the green hub carries its own light, same treatment as the
   system map's closed state icon */
.cv-hub-ic {
  width: 30px; height: 30px; object-fit: contain; margin: 0 auto 9px;
  filter: drop-shadow(0 0 9px rgba(255,255,255,.55)) drop-shadow(0 0 16px rgba(255,255,255,.3));
}
.cv-core b { display: block; font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.cv-core span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.82); }
/* nine short spikes, one per item landing on the hub across the lap, over a
   low ambient glow so the hub never goes fully dark between hits */
.cv-ring {
  position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  border: 1px solid var(--accent-ink);
  box-shadow: 0 0 44px -8px rgba(11, 138, 97, .75), inset 0 0 30px -14px rgba(11, 138, 97, .85);
  animation: cv-hub-pulse var(--lap) linear infinite;
}

/* ---- the reading half. Flush rows sharing hairlines, frontal's indexed list,
        never nine floating cards. A row lights with its own chip on the dial. --- */

.cv-list { list-style: none; margin: 0; padding: 0; }
.cv-row {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 32px 1fr; gap: 0 13px; align-items: baseline;
  padding: 12px 13px 13px; border-top: 1px solid var(--rule);
}
.cv-row:last-child { border-bottom: 1px solid var(--rule); }
/* the index turns accent on the beat its own chip does, which is the thread
   between the dial and the list */
.cv-row .ml { color: var(--dim); animation: cv-num-c var(--lap) linear var(--d, 0s) infinite; }
.cv-row h3 { font-size: 15px; margin-bottom: 4px; }
.cv-row p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cv-row::before {
  content: ''; position: absolute; inset: -1px 0 0; z-index: -1; opacity: 0;
  background: var(--accent-soft);
  border-top: 1px solid var(--accent-line); border-bottom: 1px solid var(--accent-line);
  animation: sm-hit var(--lap) linear var(--d, 0s) infinite;
}

/* 19f ----------------------------------------- the three steps, in motion */

/* An accent segment that grows down the rail as the section scrolls, so the
   timeline visibly fills in rather than sitting there finished. */
.rail-run {
  position: absolute; left: 0; top: 6px; width: 2px; height: 0;
  background: var(--accent); border-radius: 2px;
}
/* dim and sitting a few pixels low until reached, so arriving at a step is a
   small movement rather than only a change of shade */
.rail-item { transition: opacity .45s var(--ease), transform .55s var(--ease); }
.rail.is-live .rail-item { opacity: .42; transform: translateY(7px); }
.rail.is-live .rail-item.on { opacity: 1; transform: none; }
/* the step number carries the accent while its step is the one being read,
   rather than step one wearing it permanently */
.rail-item .ml { transition: color .45s var(--ease); }
.rail-item.on .ml { color: var(--accent-ink); }
.rail-item::before { transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.rail-item.on::before { box-shadow: 0 0 0 5px var(--accent-soft); }
/* the fixed accent bar was doing the rail-run's job, so it steps aside */
.rail.is-live .rail-item.on::after { display: none; }

/* the flow node the live step corresponds to */
.node { transition: background .45s var(--ease), border-color .45s var(--ease); }
.node .node-ic { transition: background .45s var(--ease), color .45s var(--ease); }
.node.is-live { background: var(--accent-soft); border-color: var(--accent-line); }
.node.is-live .node-ic { background: rgba(18, 206, 142, .18); }

/* One pulse when a step is arrived at, on a pseudo-element so the tint the node
   settles into is never fought over. It runs once and then it is done, because
   the reader's scroll is what fires it, not a timer. */
.node.is-live::after {
  content: ''; position: absolute; inset: -1px; border-radius: 10px; pointer-events: none;
  border: 1px solid var(--accent); opacity: 0;
  box-shadow: 0 0 26px -6px var(--accent);
  animation: node-pop .95s var(--ease) forwards;
}
/* the dot crosses to the step the reader has just reached */
.hop.is-run i { animation: hop-run .85s var(--ease) forwards; }
@keyframes hop-run {
  0%   { left: 0;    opacity: 0; }
  18%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes node-pop { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

/* the roadmap meter fills on scroll instead of sitting at a fixed width */
.meter i { transition: width 1.1s var(--ease); }

/* 19g ------------------------------------------------------------ polish */

/* Reading progress, a single accent hairline across the very top. Frontal
   runs one and it is most of why the page feels alive under the thumb. */
.prog {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 200;
  background: var(--accent); box-shadow: 0 0 12px rgba(18, 206, 142, .6);
  pointer-events: none;
}

/* The seam where a black band meets a cream one. A short accent tick centred
   on the join, which is how frontal marks its section boundaries. */
.dark + .light::before, .light + .dark::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 46px; height: 2px; background: var(--accent); border-radius: 2px;
  opacity: .55; z-index: 2;
}

/* One hover behaviour for every bordered surface on the page, rather than a
   different one per component. */
.panel, .cell, .stat, .quote, .pb {
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.cell:hover { background: var(--surface-2); }
.panel:not(.sysmap):not(.cvg):not(.panel--card):hover { border-color: rgba(18, 206, 142, .3); }

/* the stat numerals count while they arrive, so the figures land as events */
.stat-n { font-variant-numeric: tabular-nums; }

/* the nav earns a hairline once it is over content rather than the hero */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  opacity: 0; transition: opacity .35s var(--ease);
}
.nav.stuck::after { opacity: 1; }

/* 20 ----------------------------------------------------------- motion */

/* Scroll reveal. This began as a pure-CSS view() timeline and that silently
   did nothing: every band on this page clips its overflow, a box with clipped
   overflow is a scrollport in its own right, and so the timeline resolved
   against a box that never scrolls and stayed inactive. Nothing looked broken,
   because an inactive timeline just drops the effect and leaves the element
   sitting at its final state. It is observer-driven now.
   The hiding only exists once the observer is present to undo it, so a browser
   with no support, or a visitor who asked for less motion, gets the page. */
.js-rv .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-rv .rv.in { opacity: 1; transform: none; }

/* A NOTE ON REDUCED MOTION, because the rules below deliberately break the
   usual pattern.

   The diagrams ARE the argument of this page. The dashes travelling into the
   practice and back out again are what says "five tools feed one place and the
   gap turns up on the far side"; a still frame of that says nothing. Under the
   WCAG guidance this is essential motion, so it is not switched off. What the
   reduce block below does instead is what that guidance actually asks for:
   slow it down, take the travel distance out of it, and drop the decorative
   spinning that carries no meaning. The page still moves, gently.

   Everything genuinely decorative (the hero rule drawing itself, the pulsing
   halo rings, the orbiting layer) does still stop. */

/* System map traffic. A short dash walking the length of each connector, so the
   diagram reads as five tools actively feeding one place, then the same thing
   carrying back out to the right. Staggered per path in the markup. */
@media (prefers-reduced-motion: no-preference) {
  /* the protection layer turns slowly, the two rings against each other */
  .sm-orbit    { animation: sm-spin 26s linear infinite; }
  .sm-orbit--2 { animation: sm-spin 34s linear infinite reverse; }
  .sm-sats     { animation: sm-spin 26s linear infinite; }
}
@keyframes sm-spin { to { transform: rotate(360deg); } }

/* ONE LAP OF THE DIAGRAM, 5.2 seconds.
   0.00 to 1.72   the five tools fire and their dots run to the practice
   1.72 to 2.52   the dots land, the practice holds lit
   2.60 to 4.32   what leaves the practice runs out to the right
   4.32 to 4.92   each outcome lights as its own dot lands on it
   4.92 to 5.20   a beat of quiet, so the loop reads as a lap and not as noise
   The dot is hidden for the part of the lap it is not running, which is what
   lets a viewer see one thing cause the next instead of a permanent swarm.
   Path length arrives as --len, set per path in script. */
@keyframes sm-run {
  0%   { stroke-dashoffset: var(--len, 0); opacity: 0; }
  4%   { opacity: 1; }
  33%  { stroke-dashoffset: 0; }
  35%  { opacity: 1; }
  38%  { opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes sm-hit {
  0%   { opacity: 1; }
  13%  { opacity: 0; }
  96%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes sm-hit-hub {
  0%, 16% { opacity: 1; }
  34%     { opacity: 0; }
  96%     { opacity: 0; }
  100%    { opacity: 1; }
}
/* the nine areas hub, one spike per item as it actually lands, floating on a
   low ambient glow so it never reads as fully off between hits */
@keyframes cv-hub-pulse {
  0%,
  32.5%   { opacity: .35; }
  33%     { opacity: 1; }
  35%     { opacity: .35; }
  38.61%  { opacity: .35; }
  39.11%  { opacity: 1; }
  41.11%  { opacity: .35; }
  44.72%  { opacity: .35; }
  45.22%  { opacity: 1; }
  47.22%  { opacity: .35; }
  50.83%  { opacity: .35; }
  51.33%  { opacity: 1; }
  53.33%  { opacity: .35; }
  56.94%  { opacity: .35; }
  57.44%  { opacity: 1; }
  59.44%  { opacity: .35; }
  63.06%  { opacity: .35; }
  63.56%  { opacity: 1; }
  65.56%  { opacity: .35; }
  69.17%  { opacity: .35; }
  69.67%  { opacity: 1; }
  71.67%  { opacity: .35; }
  75.28%  { opacity: .35; }
  75.78%  { opacity: 1; }
  77.78%  { opacity: .35; }
  81.39%  { opacity: .35; }
  81.89%  { opacity: 1; }
  83.89%,
  100%    { opacity: .35; }
}
/* the same shape as sm-hit, carried by colour instead of opacity, for the two
   places the mark is a number rather than a box */
@keyframes cv-num {
  0%   { fill: var(--accent-ink); }
  13%  { fill: var(--dim); }
  96%  { fill: var(--dim); }
  100% { fill: var(--accent-ink); }
}
@keyframes cv-num-c {
  0%   { color: var(--accent-ink); }
  13%  { color: var(--dim); }
  96%  { color: var(--dim); }
  100% { color: var(--accent-ink); }
}
/* The lap runs at one speed for everyone. Every box in the diagram is timed off
   the same 5.2s clock as the dots, so slowing only the dots under reduced motion
   would pull the whole cause-and-effect apart. The lap is already slow, and its
   quiet beat at the end is the rest that a reduced-motion setting is asking for. */

/* The gap tracks fill as their card climbs the viewport. Scroll drives it, so
   the movement is tied to the reader rather than running on a timer they
   cannot see. Without support the fill simply sits closed. */
/* A view() timeline was the obvious tool here and it is dead on this page: the
   band and the panel both clip their overflow, and a box with clipped overflow
   is itself a scrollport, so the timeline resolves against something that never
   scrolls and stays inactive forever. An observer has no such constraint.
   The track is closed by default, so with no JS it reads as finished rather
   than as empty, and asked-for-less-motion never opens it in the first place. */
.js-gaps .gap-fill { width: 0; transition: width 1.15s var(--ease); }
.js-gaps .gap.is-closed .gap-fill { width: 100%; }
@media (prefers-reduced-motion: reduce) { .js-gaps .gap-fill { transition-duration: 2.4s; } }

/* The two dashed rings drift, slowly and in opposite directions. It is the one
   piece of the dial that is decoration rather than meaning, so unlike the lap
   itself it stops when a reader asks for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .cv-orbit    { transform-origin: 240px 240px; animation: sm-spin 34s linear infinite; }
  .cv-orbit--2 { animation: sm-spin 46s linear infinite reverse; }
}

@media (prefers-reduced-motion: reduce) {
  .dark .grid::before { display: none; }
  html { scroll-behavior: auto; }
}

/* 21 ------------------------------------------------------- breakpoints */

@media (max-width: 1000px) {
  .hero-grid, .cta-in { grid-template-columns: 1fr; }
  .statrow { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); padding: 26px 0; }
  .stat:not(:first-child) { padding-left: 0; }
  .stat:last-child { border-bottom: 0; }
  .quotes { grid-template-columns: 1fr; }
  .quad { --cols: 1 !important; }
  .gaps { grid-template-columns: 1fr; }
  /* The dial and its list stop fitting side by side, so the dial sits above the
     list and shrinks. It stays whole, because it is one square drawing rather
     than a layout, which is the point of building it that way. */
  .cvg-body { grid-template-columns: 1fr; gap: 24px; padding: 22px 0 4px; }
  .cv-dialwrap { max-width: 380px; }
  .cvg-bar { flex-wrap: wrap; gap: 6px 20px; }
  /* the title stops leading the questions and simply sits above them */
  .faq-split { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  /* The links pill is gone below this width, and it was the thing pushing the
     CTA to the right edge, so the CTA has to take that job over. */
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
}

/* The fan only makes sense while the three groups sit side by side. Below this
   the map stacks and the dashed vertical connector carries the same idea. */
@media (max-width: 900px) {
  .sm-body { grid-template-columns: 1fr; gap: 0; padding: 20px 16px 24px; }
  .sm-wires { display: none; }
  .sm-stack { height: auto; gap: 8px; }
  .sm-stack--5 .sm-node, .sm-stack--4 .sm-out { height: auto; min-height: 52px; padding: 13px 14px; }
  .sm-hubwrap {
    height: auto; margin: 20px 0; padding: 20px 0;
    background-image: linear-gradient(var(--sm-line) 50%, transparent 0);
    background-size: 1px 7px; background-repeat: repeat-y; background-position: 50% 0;
  }
  .sm-hub { width: 100%; max-width: 200px; height: auto; padding: 20px 14px; }
  .sm-shield { width: 200px; height: 200px; }
  .sysmap.is-covered .sm-shield { transform: scale(.94); }
  .sm-col--out { margin-top: 4px; }
  .sysmap-bar { flex-wrap: wrap; gap: 8px; justify-content: center; }
}

@media (max-width: 760px) {
  .flow { flex-direction: column; }
  /* the steps stack, so the connector and the dot that crosses it turn with them */
  .hop { width: 12px; height: 28px; align-self: center; }
  .hop::before {
    left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto;
    background-image: linear-gradient(180deg, var(--fg-dim) 50%, transparent 0);
    background-size: 1px 5px;
  }
  .hop i { top: 0; left: 50%; margin: 0 0 0 -3px; }
  .hop.is-run i { animation-name: hop-run-v; }
  @keyframes hop-run-v {
    0%   { top: 0;    opacity: 0; }
    18%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }
  .proofband { flex-direction: column; }
  .pb { border-right: 0; border-bottom: 1px solid var(--line); }
  .pb:last-child { border-bottom: 0; }
}

/* Dave, 2026-07-27: on a phone everything is centred and stacked. Last block
   in the file so it wins. */
@media (max-width: 640px) {
  .head, .head--split, .head-l, .head-r { text-align: center; }
  .head--split { justify-content: center; }
  .hero, .hero-grid > div, .cta-in, .cell, .node, .pb, .stat, .q, .rail-item { text-align: center; }
  .hero .lead, .cta-in .lead, .head-r .lead, .fq .a { margin-inline: auto; }
  .hero-cta, .hero-trust, .chips, .cell-top, .q-top, .flow-note { justify-content: center; }
  /* At 375 the mark, the wordmark and the CTA together are wider than the
     viewport, which pushed the whole document sideways. The mark chip carries
     the brand on its own here, exactly as it does in frontal's scrolled nav. */
  .nav-wordmark { display: none; }
  .nav-cta .btn { padding: 10px 16px; font-size: 13px; }
  /* let long labels wrap instead of forcing the row wider than the phone */
  .rows > * { flex-wrap: wrap; }
  .rows .rname { min-width: 0; }
  .score { flex-wrap: wrap; row-gap: 6px; }
  .node-ic { margin-inline: auto; }
  .rail { padding-left: 0; }
  .rail::before, .rail-item::before, .rail-item.on::after { display: none; }
  .rail-item { padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
  .rail-item:last-child { border-bottom: 0; margin-bottom: 0; }
  .rows > * { flex-wrap: wrap; justify-content: center; }
  .rows .rval { margin-left: 0; }
  .fq summary { text-align: left; }
  .fq .a { padding: 0 0 22px; }
  .fq summary { grid-template-columns: 24px 1fr 24px; gap: 0 10px; }
  .foot-in { justify-content: center; text-align: center; }
  .foot-links { margin-left: 0; justify-content: center; }
}

/* ============================================================================
   PARTNERSHIPS PAGE EXTENSIONS
   Appended per brief "Known gaps" section. All tokens match the system above.
   ========================================================================= */

/* ---- Contrast/before-after grid ----------------------------------------- */

.contrast-row {
  display: flex;
  gap: 1px;              /* hairline between panels from background showing through */
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 40px;
}

.contrast-panel {
  flex: 1 1 0;
  border: none;
  border-radius: 0;
  background: var(--surface);
}

.contrast-panel--accent {
  border-left: 1px solid var(--accent-line);
}

.contrast-panel .panel-bar {
  border-radius: 0;
}

/* ---- Plain bullet list (gray markers, not accent green) ------------------- */

.plain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plain-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-body);
}

.plain-list li::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fg-dim);   /* gray, never accent */
  margin-top: 8px;
}

/* ---- Form fields --------------------------------------------------------- */

form { display: flex; flex-direction: column; gap: 18px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label.ml {
  /* inherits .ml mono sizing, just needs column layout */
}

.field input,
.field textarea,
.field select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--fg-ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239A9CA3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--fg-dim);
}

.form-note {
  font-size: 13px;
  color: var(--fg-dim);
  margin: 0;
}

.form-note a {
  color: var(--fg-body);
  text-decoration: underline;
  text-decoration-color: var(--line);
}

.form-note a:hover {
  color: var(--accent-ink);
  text-decoration-color: var(--accent-line);
}

/* ---- Responsive: form and contrast grid ---------------------------------- */

@media (max-width: 720px) {
  .form-row { grid-template-columns: 1fr; }
  .contrast-row { flex-direction: column; gap: 0; border-radius: 12px; }
  .contrast-panel--accent { border-left: none; border-top: 1px solid var(--accent-line); }
}

/* ================================================================== */
/* SITE NAV, 2026-08-15: the nav pills become the real site nav.       */
/* Services and Industries carry dropdown panels in the same glass     */
/* language as the stuck-state pills. Below 1000px the pills were      */
/* already hidden, so a burger chip and a full-screen menu take over.  */
/* Appended last so these rules win the cascade.                       */
/* ================================================================== */

.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-size: 13.5px; color: var(--grey);
  background: none; border: 0; cursor: pointer; font-family: inherit; line-height: inherit;
  transition: color .2s, background .2s;
}
.nav-drop-btn:hover, .nav-drop:focus-within .nav-drop-btn, .nav-drop.open .nav-drop-btn {
  color: var(--cream); background: rgba(255,255,255,.07);
}
.nd-car { font-size: 9px; opacity: .7; transition: transform .2s var(--ease); }
.nav-drop:hover .nd-car, .nav-drop.open .nd-car { transform: rotate(180deg); }

/* The panel sits on a transparent 10px bridge so the pointer can travel
   from the pill into the panel without the hover state dropping. */
.nav-drop-panel {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 6px);
  padding-top: 10px; min-width: 232px; z-index: 110;
  opacity: 0; visibility: hidden;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel,
.nav-drop.open .nav-drop-panel {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.nav-drop-in {
  display: flex; flex-direction: column; padding: 6px;
  background: rgba(18,18,24,.92);
  border: 1px solid rgba(255,255,255,.10); border-radius: 14px;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
.nav-drop-in a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 13.5px; color: var(--grey); white-space: nowrap;
  transition: color .2s, background .2s;
}
.nav-drop-in a:hover { color: var(--cream); background: rgba(255,255,255,.07); }
.nav-drop-in .nd-all {
  color: var(--cream);
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 9px 9px 0 0; margin-bottom: 4px;
}

/* With six pills plus the CTA, the wordmark stops fitting first. */
@media (max-width: 1240px) { .nav-wordmark { display: none; } }
@media (max-width: 1120px) {
  .nav-links a, .nav-drop-btn { padding: 7px 10px; font-size: 13px; }
}

/* burger chip, same chip language as .nav.stuck .nav-mark */
.nav-burger { display: none; }
@media (max-width: 1000px) {
  .nav-burger {
    display: grid; place-items: center; width: 42px; height: 42px; flex: none;
    border-radius: 12px; cursor: pointer;
    background: rgba(18,18,24,.66); border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 1px rgba(255,255,255,.12);
    backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  }
  .nav-burger span {
    display: block; width: 16px; height: 1.5px; margin: 2.5px 0; border-radius: 2px;
    background: var(--cream);
    transition: transform .25s var(--ease), opacity .2s;
  }
  .mnav-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .mnav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .mnav-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* full-screen mobile menu, under the fixed header so the burger stays live */
.nav-mobile { display: none; }
@media (max-width: 1000px) {
  .nav-mobile {
    display: block; position: fixed; inset: 0; z-index: 99;
    padding: 88px var(--pad) 32px; overflow-y: auto;
    background: rgba(10,10,14,.96);
    backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .mnav-open .nav-mobile { opacity: 1; visibility: visible; transform: none; }
  .mnav-open { overflow: hidden; }
  .nav-mobile > a, .mn-group a {
    display: block; padding: 11px 2px; font-size: 16px; color: var(--cream);
  }
  .mn-group { padding: 12px 0; margin: 6px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
  .mn-group + .mn-group { border-top: 0; margin-top: 0; }
  .mn-h {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--grey); opacity: .75; margin: 4px 0 2px;
  }
  .mn-group a { font-size: 15px; color: var(--grey); }
  .mn-group a:hover, .nav-mobile > a:hover { color: var(--cream); }
}