/* ═══════════════════════════════════════════════════════════════════════════
   EasyQualityFlow — public site

   Design notes, so the next person changing this knows what the rules are.

   · **Hairlines, not shadows.** Enterprise software sites reach for soft drop
     shadows on rounded cards and end up looking like every other one. This uses
     1px borders at 6px radii, and keeps shadow for the two things that are
     genuinely floating: the sticky nav and the product frames.

   · **The bracket is the brand.** Section eyebrows are wrapped in [ ] because
     the mark is a Q inside brackets — the tolerance a feature sits inside. It
     is the one decorative move, and it repeats.

   · **Monospace carries the engineering.** Part numbers, revision letters, AP
     levels and specification limits are set in mono, because that is how they
     appear on a drawing. It is the cheapest way to make a marketing page feel
     like it was written by someone who has actually filed a PPAP.

   · **Light, deliberately.** No dark theme. `color-scheme: light` is declared
     so no browser force-darks it into mush, and every colour is painted
     explicitly rather than inherited.

   · **No webfont.** Nothing is fetched from another host, so there is no
     render-blocking request and no layout shift when a face arrives late.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* Ink */
  --ink:      #0B1220;
  --ink-2:    #39435A;
  --muted:    #667085;
  --muted-2:  #8B95A7;

  /* Ground */
  --bg:       #FFFFFF;
  --soft:     #F7F9FC;
  --soft-2:   #EFF3F9;

  /* Line */
  --line:     #E5E9F0;
  --line-2:   #D3DAE6;

  /* Brand — the same blue the application uses. One blue, not two. */
  --blue:     #1E50C8;
  --blue-700: #1842A8;
  --blue-300: #8CA9EE;
  --blue-50:  #EEF3FE;

  /* Signals. Separate from the accent, and only ever used to mean something. */
  --ok:       #0E8F62;
  --ok-bg:    #E7F6F0;
  --warn:     #B45309;
  --warn-bg:  #FEF4E6;
  --bad:      #C0342B;
  --bad-bg:   #FDECEA;

  /* Type */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Rhythm */
  --w:        1180px;
  --w-narrow: 760px;
  --r:        6px;
  --r-lg:     10px;

  --sec-y:    clamp(64px, 8vw, 116px);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Every interactive thing has to be reachable and visible from a keyboard. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r);
  font-size: 14px; font-weight: 600;
}
.skip:focus { top: 12px; text-decoration: none; }

/* ── Type scale ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-weight: 640;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(2.15rem, 5vw, 3.5rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.65rem, 3.3vw, 2.4rem); letter-spacing: -0.027em; }
h3 { font-size: clamp(1.12rem, 1.7vw, 1.32rem); line-height: 1.28; }
h4 { font-size: 1rem; line-height: 1.35; }

p { margin: 0; }
.lede { font-size: clamp(1.02rem, 1.5vw, 1.19rem); color: var(--ink-2); line-height: 1.66; text-wrap: pretty; }
.body { color: var(--ink-2); line-height: 1.7; text-wrap: pretty; }
.small { font-size: 0.895rem; color: var(--muted); line-height: 1.62; }
.mono { font-family: var(--mono); font-size: 0.86em; letter-spacing: -0.01em; }

/* The bracket motif — the mark's own device, reused as structure. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.735rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  gap: 0.55em;
  align-items: baseline;
}
.eyebrow::before { content: '['; color: var(--blue-300); }
.eyebrow::after  { content: ']'; color: var(--blue-300); }
.eyebrow.on-dark { color: var(--blue-300); }
.eyebrow.on-dark::before, .eyebrow.on-dark::after { color: #48587e; }

/* ── Layout ─────────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: var(--w-narrow); }
section { padding: var(--sec-y) 0; }
.sec-soft { background: var(--soft); border-block: 1px solid var(--line); }
.sec-ink { background: var(--ink); color: #E8ECF4; }
.sec-ink h2, .sec-ink h3 { color: #fff; }
.sec-ink .body, .sec-ink .lede { color: #A9B4C8; }
.sec-ink .small { color: #8A96AC; }

.stack   { display: flex; flex-direction: column; }
.gap-2   { gap: 8px; }  .gap-3 { gap: 14px; } .gap-4 { gap: 22px; } .gap-6 { gap: 40px; }
.head    { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.head-c  { margin-inline: auto; text-align: center; align-items: center; }

.grid { display: grid; gap: 22px; }
/* `min(Npx, 100%)` on every track, without exception.
   A bare `minmax(400px, 1fr)` forces a 400px track even when the container is
   327px, and the page then scrolls sideways on a phone — which is exactly what
   `.g-half` did the moment it was added. The `min()` lets the track collapse to
   the container instead. It costs nothing on the narrower grids and stops the
   whole class of bug coming back. */
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(205px, 100%), 1fr)); }
/* Two across, or one. For a set whose count would leave a lonely card on the
   last row at three across, and for rows of product frames, which need real
   width before their tables start needing a scrollbar. */
.g-half { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }

/* A two-column feature row: prose on one side, product on the other.
   The product always takes the wider column. `.flip` reverses the visual order
   with `order`, which does *not* reverse the column sizes — so the flipped rows
   were handing the product the narrow track and squeezing every table inside it
   to 296px. The sizes are mirrored explicitly for `.flip`.

   Top-aligned, not centred: the two columns are rarely close in height, and a
   400px difference under `align-items: center` leaves the prose floating in the
   middle of a tall gap. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}
.split.flip { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
.split.flip > :first-child { order: 2; }
/* Where the right column is very much taller than the left — the eight-stage
   diagram beside three short paragraphs — the copy holds position while the
   diagram scrolls past it, instead of stranding 600px of empty column. */
@media (min-width: 901px) {
  .split.hold > .stack { position: sticky; top: 92px; }
}
/* A small optical nudge so prose sits against the frame's content, not its
   border. Applied to the text column whichever side it is on. */
.split > .stack { padding-top: 6px; }
@media (max-width: 900px) {
  .split, .split.flip { grid-template-columns: 1fr; gap: 34px; }
  .split.flip > :first-child { order: 0; }
  .split > .stack { padding-top: 0; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: 0.945rem; font-weight: 560;
  cursor: pointer; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:hover { text-decoration: none; border-color: var(--muted-2); background: var(--soft); }
.btn:active { transform: translateY(1px); }

.btn-pri {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 1px 2px rgba(11,18,32,.14);
}
.btn-pri:hover { background: var(--blue-700); border-color: var(--blue-700); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--soft-2); border-color: transparent; }

.btn-lg { height: 50px; padding: 0 26px; font-size: 1rem; }
.btn-sm { height: 34px; padding: 0 13px; font-size: 0.86rem; }

.sec-ink .btn { background: #172034; border-color: #2A3550; color: #E8ECF4; }
.sec-ink .btn:hover { background: #1E2A44; border-color: #3A4766; }
.sec-ink .btn-pri { background: var(--blue); border-color: var(--blue); color: #fff; }
.sec-ink .btn-pri:hover { background: #2C60DE; border-color: #2C60DE; }

.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* A link that reads as a next step without shouting. */
.arrow { font-weight: 560; font-size: 0.945rem; display: inline-flex; gap: 7px; align-items: center; }
.arrow svg { transition: transform .18s ease; }
.arrow:hover { text-decoration: none; }
.arrow:hover svg { transform: translateX(3px); }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg); padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .18s ease, transform .18s ease;
}
.card-hov:hover { border-color: var(--line-2); transform: translateY(-2px); }
.sec-soft .card { background: var(--bg); }
.sec-ink .card { background: #121A2C; border-color: #26314A; }

.card-ico {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--blue-300); border-radius: 7px;
  background: var(--blue-50); color: var(--blue);
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
}
.sec-ink .card-ico { background: #16223C; border-color: #2C3D66; color: var(--blue-300); }

/* Chips — the same vocabulary the application uses for record state. */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--line-2); background: var(--soft);
  font-family: var(--mono); font-size: 0.715rem; font-weight: 500;
  letter-spacing: .01em; color: var(--ink-2); white-space: nowrap;
}
.chip-ok   { background: var(--ok-bg);   border-color: #B6E2D0; color: var(--ok); }
.chip-warn { background: var(--warn-bg); border-color: #F3DDB4; color: var(--warn); }
.chip-bad  { background: var(--bad-bg);  border-color: #F2C4BF; color: var(--bad); }
.chip-blue { background: var(--blue-50); border-color: var(--blue-300); color: var(--blue-700); }

/* ── Navigation ─────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* Once the page has moved: a hairline, a shadow, more blur, and four pixels
   of height back. Small enough that nobody notices it happening, which is the
   point — the header should get out of the way, not perform. */
.nav.stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 16px rgba(11,18,32,.07);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(18px);
}
.nav-in { display: flex; align-items: center; gap: 26px; height: 62px; transition: height .22s ease; }
.nav.stuck .nav-in { height: 54px; }

.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); flex: none; }
.brand:hover { text-decoration: none; }
.brand-word { font-size: 1.055rem; font-weight: 450; letter-spacing: -0.026em; }
.brand-word b { font-weight: 700; }

.nav-links { display: flex; align-items: center; gap: 3px; margin-left: 6px; }
.nav-links a {
  padding: 7px 11px; border-radius: var(--r);
  color: var(--ink-2); font-size: 0.925rem; font-weight: 500;
}
.nav-links a:hover { background: var(--soft-2); color: var(--ink); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.nav-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.burger {
  display: none; width: 40px; height: 40px; margin-left: auto;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg); cursor: pointer; padding: 0;
  place-items: center;
}
.burger span {
  display: block; width: 17px; height: 1.5px; background: var(--ink);
  border-radius: 2px; transition: transform .24s ease, opacity .18s ease;
}
.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--line); background: var(--bg);
  padding: 12px 24px 22px;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block; padding: 12px 2px; color: var(--ink);
  font-size: 1.02rem; font-weight: 520;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:hover { text-decoration: none; color: var(--blue); }
.mobile-menu .btns { margin-top: 18px; }
.mobile-menu .btn { flex: 1; }

@media (max-width: 940px) {
  .nav-links, .nav-end { display: none; }
  .burger { display: grid; }
}

/* ── The header over a deep hero ──────────────────────────────────────────
   The bar is translucent white, which is right over a white page and wrong
   directly above the navy hero: it read as a grey lid on the gradient. A
   sticky header stays in flow, so it sits *above* the hero rather than over
   it — which rules out making it transparent, since the ground behind it is
   the white page, not the hero. It takes the hero's own navy instead, so the
   two read as one band, and reverts to the normal light bar the moment the
   page moves and there is white underneath. */
body:has(.hero-deep) .nav:not(.stuck) {
  background: #0A142E;
  backdrop-filter: none;
}
body:has(.hero-deep) .nav:not(.stuck) .brand,
body:has(.hero-deep) .nav:not(.stuck) .nav-links a { color: #E6ECF8; }
body:has(.hero-deep) .nav:not(.stuck) .brand svg { stroke: var(--cyan); }
body:has(.hero-deep) .nav:not(.stuck) .nav-links a:hover { background: rgba(255,255,255,.10); color: #fff; }
body:has(.hero-deep) .nav:not(.stuck) .btn-ghost { color: #C6D3EA; }
body:has(.hero-deep) .nav:not(.stuck) .btn-ghost:hover { background: rgba(255,255,255,.10); }
body:has(.hero-deep) .nav:not(.stuck) .burger span { background: #E6ECF8; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero { padding: clamp(52px, 7vw, 92px) 0 clamp(48px, 6vw, 80px); position: relative; overflow: hidden; }
/* A single soft wash, placed once. Not a gradient on every section. */
.hero::before {
  content: ''; position: absolute; inset: -30% 25% auto -20%; height: 620px;
  background: radial-gradient(48% 50% at 40% 40%, rgba(30,80,200,.075), transparent 70%);
  pointer-events: none; z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }
/* Both columns start at the top. They were centred, and because the product
   frame is far taller than the copy the headline floated down the page against
   an empty top-left corner — which reads as a mistake rather than a choice. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(30px, 4.5vw, 56px);
  align-items: start;
}
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { max-width: 17ch; }
.hero .lede { max-width: 50ch; }
.hero-note { font-size: 0.9rem; color: var(--muted); }
/* A little optical lift so the copy sits against the frame's cap height rather
   than its top border. */
.hero-copy { padding-top: clamp(0px, 2vw, 26px); }

/* ── The workflow band ──────────────────────────────────────────────────────
   Runs the full width under the hero. Eight stages in order, on one rail. */

.wflow { border-block: 1px solid var(--line); background: var(--soft); }
.wflow-track {
  display: flex; align-items: stretch;
  max-width: var(--w); margin: 0 auto; padding: 26px 24px 24px;
  overflow-x: auto;
  scrollbar-width: thin;
  /* Eight ordered stages that wrap stop reading as an order, so on a narrow
     screen this scrolls sideways in its own track instead. */
}
.wflow-i {
  flex: 1 0 132px; min-width: 132px;
  display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.wflow-num {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: .08em; color: var(--muted-2); padding-bottom: 9px;
}
/* The rail: one hairline per stage, butted together into a continuous line,
   with the stage's dot sitting on it. */
.wflow-rail { display: block; height: 9px; position: relative; }
.wflow-rail::before {
  content: ''; position: absolute; left: 0; right: 0; top: 4px;
  height: 1px; background: var(--muted-2); opacity: .5;
}
.wflow-i:first-child .wflow-rail::before { left: 4px; }
.wflow-i:last-child .wflow-rail::before { right: calc(100% - 5px); }
.wflow-dot {
  position: absolute; left: 0; top: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--line-2);
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.wflow-name {
  font-size: 0.93rem; font-weight: 590; letter-spacing: -0.018em;
  padding: 12px 12px 0 0; line-height: 1.25;
}
.wflow-sub {
  font-family: var(--mono); font-size: 0.685rem; color: var(--muted);
  padding-top: 4px;
}
/* Light the stages in sequence when the band scrolls in. */
.wflow.lit .wflow-dot { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
.wflow.lit .wflow-i:nth-child(1) .wflow-dot { transition-delay: .05s; }
.wflow.lit .wflow-i:nth-child(2) .wflow-dot { transition-delay: .12s; }
.wflow.lit .wflow-i:nth-child(3) .wflow-dot { transition-delay: .19s; }
.wflow.lit .wflow-i:nth-child(4) .wflow-dot { transition-delay: .26s; }
.wflow.lit .wflow-i:nth-child(5) .wflow-dot { transition-delay: .33s; }
.wflow.lit .wflow-i:nth-child(6) .wflow-dot { transition-delay: .40s; }
.wflow.lit .wflow-i:nth-child(7) .wflow-dot { transition-delay: .47s; }
.wflow.lit .wflow-i:nth-child(8) .wflow-dot { transition-delay: .54s; }

/* ── Product frames — the one place a shadow is earned ──────────────────── */

.frame {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--bg); overflow: hidden;
  box-shadow: 0 1px 2px rgba(11,18,32,.04), 0 12px 34px -12px rgba(11,18,32,.14);
  /* A screenshot scales with the frame; nothing inside needs to query it. The
     `container-type: inline-size` that lived here was for the HTML replica's
     rail, and went with it. */
  line-height: 0;
}
.frame-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.frame-dots { display: flex; gap: 5px; }
.frame-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); display: block; }
.frame-url {
  flex: 1; text-align: center;
  font-family: var(--mono); font-size: 0.7rem; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frame-body { padding: 0; background: var(--bg); }

/* A faithful stand-in for the application chrome.
   `.ui-lg` is the hero variant: same screen, less density, type large enough to
   read at the size the hero actually displays it. */
/*
 * The replica stylesheet used to be here — `.ui`, `.ui-rail`, `.ui-t`,
 * `.ui-stat`, `.spc` and the rest: about 150 lines that dressed hand-written
 * HTML up as the application.
 *
 * It went when the frames started holding photographs of the real product. The
 * frame itself stays, because the browser chrome around a screenshot is worth
 * drawing rather than photographing; what is inside it is now an <img>.
 */

/* ── Comparison: spreadsheets vs connected ──────────────────────────────── */

.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 3vw, 34px); align-items: start; }
@media (max-width: 860px) { .vs { grid-template-columns: 1fr; } .vs-mid { display: none; } }

.vs-col { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; background: var(--bg); }
.vs-col.good { border-color: var(--blue-300); background: linear-gradient(180deg, var(--blue-50), var(--bg) 60%); }
.vs-h { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.vs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.vs-list li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 0.925rem; color: var(--ink-2);
}
.vs-col.good .vs-list li { border-bottom-color: #DCE6FC; }
.vs-list li:last-child { border-bottom: 0; }
/* The markers are inline SVGs with a viewBox and no width or height attribute,
   which means they have no intrinsic size and will expand to fill the flex line
   if this rule is missing. It was missing once; they rendered at about 200px. */
.vs-list > svg, .vs-list i { flex: none; width: 15px; height: 15px; margin-top: 4px; display: block; }
.vs-mid { align-self: center; padding-top: 60px; color: var(--muted-2); }

/* ── FMEA chain ─────────────────────────────────────────────────────────── */

.fchain { display: flex; flex-wrap: wrap; gap: 7px; align-items: stretch; }
.fchain-i {
  flex: 1 1 118px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r); padding: 11px 12px;
  background: var(--bg); position: relative;
}
.fchain-i .k { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.fchain-i .v { font-size: 0.855rem; color: var(--ink); margin-top: 4px; line-height: 1.45; font-weight: 500; }

/* ── Roadmap ────────────────────────────────────────────────────────────── */

.road { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.road-i { border: 1px dashed #2C3D66; border-radius: var(--r-lg); padding: 20px; background: #121A2C; }
.road-i .chip { margin-bottom: 11px; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.885rem; font-weight: 560; color: var(--ink); }
.field .req { color: var(--bad); }
.field input, .field textarea {
  font: inherit; font-size: 0.96rem; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--bg); width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50);
}
.field textarea { resize: vertical; min-height: 128px; }
.field .hint { font-size: 0.82rem; color: var(--muted); }
.field .err { font-size: 0.82rem; color: var(--bad); font-weight: 500; }
.field.bad input, .field.bad textarea { border-color: var(--bad); }
/* Honeypot: present for a bot, gone for a person and for a screen reader. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.note { border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--r); padding: 14px 16px; background: var(--soft); font-size: 0.9rem; color: var(--ink-2); }
.note.ok  { border-left-color: var(--ok); background: var(--ok-bg); color: #0A6E4C; }
.note.bad { border-left-color: var(--bad); background: var(--bad-bg); color: #93261F; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 19px 40px 19px 0; position: relative;
  font-weight: 570; font-size: 1.015rem; color: var(--ink);
  list-style: none; letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > .body { padding: 0 30px 20px 0; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

footer.foot { background: var(--ink); color: #A9B4C8; padding: 60px 0 30px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 34px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-h { color: #fff; font-size: 0.815rem; font-family: var(--mono); font-weight: 500; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 13px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.foot a { color: #A9B4C8; font-size: 0.9rem; }
.foot a:hover { color: #fff; }
.foot .brand { color: #fff; }
.foot-bot {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid #26314A;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 0.85rem; color: #7C8798;
}

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */

.crumbs { font-size: 0.84rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { color: var(--line-2); }

/* ── Prose, for articles and legal pages ────────────────────────────────── */

.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.42rem; margin-top: 2.1em; }
.prose h3 { font-size: 1.11rem; margin-top: 1.7em; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.75; text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; }
.prose strong { color: var(--ink); font-weight: 620; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.925rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-size: 0.78rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   The deep layer
   ───────────────────────────────────────────────────────────────────────────
   The site was one blue on white, and read flat: every section the same
   weight, so nothing was allowed to be the important one. This adds a second
   ground — a deep navy with a cyan accent — used sparingly, for the four
   places that carry the argument: the hero, the lifecycle, the module
   showcase and the closing call.

   Rules, so this does not become a rainbow:

   · **One accent on the dark, one on the light.** Cyan reads on navy and is
     illegible on white; the blue is the opposite. Neither crosses over.
   · **Violet is a tint, never a fill.** It exists to keep the navy from going
     green under a gradient, and appears only inside one.
   · **Green, amber and red still mean something.** They are signals, not
     decoration, and none of them is used to make a section look livelier.
   · **Glass only over the deep ground.** A translucent surface over white is
     just a grey box.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --navy:     #0A142E;
  --navy-2:   #101D40;
  --navy-3:   #16244C;
  --cyan:     #46D9E8;
  --cyan-dim: #7FE3EE;
  --violet:   #7C6CF0;

  /* The one gradient the deep sections share, so they read as one material. */
  --deep: radial-gradient(1100px 620px at 78% -10%, rgba(124, 108, 240, .30), transparent 62%),
          radial-gradient(760px 540px at 8% 106%, rgba(70, 217, 232, .16), transparent 60%),
          linear-gradient(157deg, #0A142E 0%, #101D40 52%, #0C1B3C 100%);

  /* A one-pixel graph paper, used at very low opacity behind the deep ground.
     Engineering paper, not a texture: it is the drawing under the drawing. */
  --grid: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);

  --glass:    rgba(255, 255, 255, .055);
  --glass-2:  rgba(255, 255, 255, .085);
  --glass-bd: rgba(255, 255, 255, .13);
}

.sec-deep {
  position: relative;
  background: var(--deep);
  color: #DCE4F2;
  overflow: hidden;
  isolation: isolate;
}
.sec-deep::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grid);
  background-size: 46px 46px;
  mask-image: radial-gradient(1000px 700px at 50% 0%, #000 25%, transparent 78%);
  z-index: -1;
}
.sec-deep h1, .sec-deep h2, .sec-deep h3, .sec-deep h4 { color: #FFFFFF; }
.sec-deep .lede { color: #B9C6DE; }
.sec-deep .body { color: #A9B7D2; }
.sec-deep .small { color: #8C9BB8; }
.sec-deep .eyebrow { color: var(--cyan-dim); }
.sec-deep .eyebrow::before, .sec-deep .eyebrow::after { color: rgba(127,227,238,.45); }
.sec-deep .mono { color: var(--cyan-dim); }

.sec-deep .btn {
  background: var(--glass-2);
  border-color: var(--glass-bd);
  color: #EDF2FB;
  backdrop-filter: blur(6px);
}
.sec-deep .btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.26); }
.sec-deep .btn-pri { background: var(--blue); border-color: var(--blue); color: #fff; backdrop-filter: none; }
.sec-deep .btn-pri:hover { background: #3468E8; border-color: #3468E8; }

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
}
.sec-deep .card { background: var(--glass); border-color: var(--glass-bd); }
.sec-deep .card-hov:hover { border-color: rgba(127,227,238,.42); background: var(--glass-2); }
.sec-deep .card-ico {
  background: rgba(70,217,232,.11);
  border-color: rgba(70,217,232,.30);
  color: var(--cyan-dim);
}
.sec-deep .chip { background: var(--glass-2); border-color: var(--glass-bd); color: #DCE4F2; }
.sec-deep .arrow { color: var(--cyan); }
.sec-deep a { color: var(--cyan-dim); }
.sec-deep .tag { background: rgba(70,217,232,.12); color: var(--cyan-dim); }

/* ── The hero, on the deep ground ───────────────────────────────────────── */

.hero-deep { padding: clamp(56px, 7.5vw, 104px) 0 clamp(56px, 7vw, 96px); }
/* The orbit gets the wider track. It is a square device beside a column of
   text, so the only way to close the height difference between the two is
   to let the square get bigger — and a centred hero where one side is 200px
   shorter reads as an accident rather than a composition. */
.hero-deep .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 4.4vw, 54px); align-items: center; }
@media (max-width: 1000px) { .hero-deep .hero-grid { grid-template-columns: 1fr; } }

.hero-deep h1 {
  max-width: 15ch;
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
/* The second half of the headline is the tagline, and it is a different
   thought — so it is a different weight, not a second line of the same one. */
.hero-deep h1 .say {
  display: block;
  margin-top: .18em;
  font-size: .46em;
  font-weight: 450;
  letter-spacing: -0.014em;
  background: linear-gradient(96deg, var(--cyan) 0%, #9FB6FF 58%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-deep .lede { max-width: 52ch; }
.hero-deep .hero-note { color: #8C9BB8; }
.hero-deep .hero-note a { color: var(--cyan-dim); }

/* The strip of facts under the buttons. Counted things only — no badges, no
   logos, nothing that would be a claim about somebody else. */
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  padding-top: 6px; border-top: 1px solid rgba(255,255,255,.10); margin-top: 4px;
}
.hero-fact { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: #A9B7D2; }
.hero-fact b { color: #FFFFFF; font-weight: 620; }
.hero-fact::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 0 3px rgba(70,217,232,.16); flex: none;
}

/* ── The orbit: create once, connect everywhere ─────────────────────────────
   The centre is the record. The ring is the modules that read it. The lines
   are the point of the product, so they are the thing that animates — a pulse
   travelling out from the core to one module at a time, which is literally
   what happens when a characteristic is entered once.

   It is markup and SVG, not an image: sharp at any density, readable by a
   screen reader as a list of modules, and no network request.
   ───────────────────────────────────────────────────────────────────────── */

.orbit { position: relative; width: 100%; max-width: 600px; margin-inline: auto; aspect-ratio: 1; }
.orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-ring { fill: none; stroke: rgba(255,255,255,.10); stroke-width: .35; }
.orbit-l {
  stroke: rgba(255,255,255,.16);
  stroke-width: .45;
  transition: stroke .3s ease;
}
.orbit-l.on { stroke: var(--cyan); }

/* The pulse. One dash, the length of nothing, travelling the whole line. */
.orbit-p {
  stroke: var(--cyan);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 5 95;
  stroke-dashoffset: 100;
  opacity: 0;
}
.orbit-p.go { opacity: 1; animation: orbit-pulse 1.1s cubic-bezier(.4,0,.35,1) forwards; }
@keyframes orbit-pulse { to { stroke-dashoffset: 0; opacity: 0; } }

.orbit-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 33%; aspect-ratio: 1;
  display: grid; place-items: center; text-align: center;
  border-radius: 22%;
  background: linear-gradient(150deg, rgba(70,217,232,.20), rgba(124,108,240,.24));
  border: 1px solid rgba(127,227,238,.38);
  box-shadow: 0 0 44px rgba(70,217,232,.20), inset 0 0 24px rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  padding: 6px;
}
.orbit-core b { display: block; font-size: clamp(.86rem, 2.1vw, 1.02rem); font-weight: 660; color: #fff; letter-spacing: -.02em; line-height: 1.15; }
.orbit-core span { display: block; font-family: var(--mono); font-size: clamp(.52rem, 1.35vw, .64rem); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-dim); margin-top: 5px; }

.orbit-n {
  position: absolute; transform: translate(-50%, -50%);
  display: block; text-align: center;
  padding: 7px 11px; border-radius: 999px;
  background: rgba(10, 20, 46, .82);
  border: 1px solid var(--glass-bd);
  color: #C6D3EA;
  font-size: clamp(.68rem, 1.5vw, .8rem);
  font-weight: 560; letter-spacing: -.01em; white-space: nowrap;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
  backdrop-filter: blur(4px);
}
.orbit-n:hover, .orbit-n:focus-visible { text-decoration: none; }
.orbit-n.on {
  color: #fff;
  border-color: rgba(70,217,232,.62);
  background: rgba(16, 33, 70, .95);
  box-shadow: 0 0 0 4px rgba(70,217,232,.09);
  transform: translate(-50%, -50%) scale(1.06);
}
@media (max-width: 420px) { .orbit-n { padding: 5px 8px; } }

/* ── The lifecycle: one part, one connected thread ──────────────────────── */

.lc-rail {
  display: flex; gap: 7px; overflow-x: auto; padding: 4px 2px 14px;
  scrollbar-width: thin;
}
.lc-tab {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-bd);
  color: #B9C6DE; font: inherit; font-size: .875rem; font-weight: 560;
  cursor: pointer; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.lc-tab i {
  font-family: var(--mono); font-style: normal; font-size: .66rem;
  color: #7E8FB0; font-variant-numeric: tabular-nums;
}
.lc-tab:hover { color: #fff; border-color: rgba(255,255,255,.26); }
.lc-tab[aria-selected="true"] {
  background: linear-gradient(140deg, rgba(70,217,232,.20), rgba(124,108,240,.20));
  border-color: rgba(127,227,238,.52); color: #fff;
}
.lc-tab[aria-selected="true"] i { color: var(--cyan); }

.lc-panels { margin-top: 6px; }
.lc-panel { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(20px, 3.5vw, 40px); align-items: start; }
@media (max-width: 900px) { .lc-panel { grid-template-columns: 1fr; } }
.lc-panel[hidden] { display: none; }
.lc-panel h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.028em; }

.lc-pair { display: grid; gap: 12px; margin-top: 4px; }
.lc-fact { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.lc-fact .k {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: #7E8FB0; display: block; margin-bottom: 2px;
}
.lc-fact .m { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: .8rem; flex: none; }
.lc-fact .m.fwd { background: rgba(70,217,232,.13); color: var(--cyan); border: 1px solid rgba(70,217,232,.3); }
.lc-fact .m.gone { background: rgba(255,255,255,.06); color: #8C9BB8; border: 1px solid var(--glass-bd); }
.lc-fact p { margin: 0; color: #C6D3EA; font-size: .945rem; line-height: 1.6; }

/* ── Counted, not claimed ───────────────────────────────────────────────────
   Four figures, each read out of the product's source at build time. They tick
   up once, when they first come into view, and never again — a number that
   re-animates every time it scrolls past reads as decoration rather than as a
   fact. Under `prefers-reduced-motion` the final figure is simply there.
   ───────────────────────────────────────────────────────────────────────── */

.counts { display: grid; gap: clamp(18px, 2.6vw, 30px); grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.count { display: flex; flex-direction: column; gap: 5px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.count-n {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--cyan) 0%, #A9C0FF 70%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.count-l { font-size: .955rem; font-weight: 600; letter-spacing: -.018em; color: #FFFFFF; line-height: 1.35; }
.count .small { margin: 2px 0 0; }

/* ── Before / after ─────────────────────────────────────────────────────── */

.ba { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: clamp(16px, 3vw, 34px); align-items: center; }
@media (max-width: 860px) { .ba { grid-template-columns: 1fr; } .ba-mid { transform: rotate(90deg); margin: 4px auto; } }

.ba-col { border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 28px); border: 1px solid; }
.ba-col h3 { font-size: 1.06rem; letter-spacing: -.02em; margin-bottom: 4px; }
.ba-col ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.ba-col li { display: grid; grid-template-columns: 17px minmax(0,1fr); gap: 10px; align-items: start; font-size: .93rem; line-height: 1.55; }

.ba-before { background: var(--soft); border-color: var(--line); }
.ba-before li { color: var(--muted); }
.ba-before li b { color: var(--ink-2); font-weight: 560; }
.ba-before .eyebrow { color: var(--muted); }
.ba-before .eyebrow::before, .ba-before .eyebrow::after { color: var(--line-2); }

.ba-after {
  background: var(--deep);
  border-color: rgba(127,227,238,.3);
  color: #DCE4F2;
  box-shadow: 0 18px 50px -26px rgba(10,20,46,.7);
}
.ba-after h3 { color: #fff; }
.ba-after li { color: #C6D3EA; }
.ba-after li b { color: #fff; font-weight: 600; }
.ba-after .eyebrow { color: var(--cyan-dim); }
.ba-after .eyebrow::before, .ba-after .eyebrow::after { color: rgba(127,227,238,.42); }

.ba-mid {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue); color: #fff; flex: none;
  box-shadow: 0 0 0 8px var(--blue-50);
}

/* ── A chain of stages, used by PPAP and by CAPA ────────────────────────── */

.chain { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chain-s {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--bg);
  font-size: .88rem; font-weight: 560; letter-spacing: -.01em;
}
.chain-s i { font-family: var(--mono); font-style: normal; font-size: .66rem; color: var(--muted-2); }
.chain-a { color: var(--line-2); flex: none; }
.sec-deep .chain-s { background: var(--glass); border-color: var(--glass-bd); color: #DCE4F2; }
.sec-deep .chain-s i { color: var(--cyan); }
.sec-deep .chain-a { color: rgba(255,255,255,.24); }

/* ── The checks the system runs for you ─────────────────────────────────── */

.checks { display: grid; gap: 0; border-top: 1px solid var(--line); }
.check {
  display: grid; grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.check .m {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--ok-bg); color: var(--ok); border: 1px solid #B6E2D0;
}
.check b { font-weight: 620; letter-spacing: -.015em; display: block; }
.check span { color: var(--ink-2); font-size: .92rem; line-height: 1.6; display: block; margin-top: 2px; }
.sec-deep .checks, .sec-deep .check { border-color: rgba(255,255,255,.10); }
.sec-deep .check .m { background: rgba(70,217,232,.12); border-color: rgba(70,217,232,.3); color: var(--cyan); }
.sec-deep .check span { color: #A9B7D2; }

/* ── The module showcase ────────────────────────────────────────────────── */

.modcat + .modcat { margin-top: clamp(30px, 4vw, 48px); }
.modcat-h { display: flex; align-items: baseline; gap: 13px; margin-bottom: 16px; flex-wrap: wrap; }
.modcat-h h3 { font-size: 1.12rem; letter-spacing: -.024em; }
.modcat-h .small { margin: 0; }
.modcat-h::after {
  content: ''; flex: 1; height: 1px; min-width: 30px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.sec-deep .modcat-h::after { background: linear-gradient(90deg, rgba(255,255,255,.16), transparent); }

.mod { display: flex; flex-direction: column; gap: 7px; padding: 17px 18px; }
.mod h4 { font-size: 1rem; letter-spacing: -.02em; }
.mod .small { margin: 0; }
.mod .arrow { margin-top: auto; padding-top: 6px; font-size: .87rem; }

/* ── Start with what you have ───────────────────────────────────────────── */

.have { display: grid; gap: 14px; }
.have-i {
  display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; align-items: center;
  padding: 13px 15px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--bg);
}
.have-i .g {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-300);
}
.have-i b { display: block; font-size: .945rem; letter-spacing: -.015em; }
.have-i span { display: block; font-size: .855rem; color: var(--muted); line-height: 1.5; }
.have-later .g { background: var(--soft-2); color: var(--muted); border-color: var(--line-2); }
.have-later { border-style: dashed; }

/* ── Scroll reveal ──────────────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }
.reveal.d4 { transition-delay: .28s; }

/* Load-in for the hero, which is above the fold and cannot wait for a scroll. */
.rise { animation: rise .7s cubic-bezier(.4,0,.2,1) both; }
.rise-1 { animation-delay: .04s; } .rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .2s; }  .rise-4 { animation-delay: .28s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Everything decorative stops when the reader has asked for that. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .spc .ser { stroke-dashoffset: 0; }
  .spc .pt { opacity: 1; }
  .flow.lit .flow-step::after { height: calc(100% - 44px); }
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  .nav, footer.foot, .btns { display: none; }
  body { font-size: 11pt; }
  .reveal { opacity: 1; transform: none; }
}