/* fingrip.ai: clean white, midnight, one blue for action and a lime spark. Self-hosted fonts,
   no trackers. Green only ever means "ties". The product colours belong to the products' marks
   and names, never to a status. */

@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Jakarta'; src: url('/fonts/jakarta.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }

:root {
  --bg: #ffffff;
  --bg-2: #f4f6f9;
  --surface: #fff;
  --ink: #001f3f;
  --ink-2: #33465e;
  --ink-3: #56657a;
  --line: #e4e8ee;
  --blue: #1e488f;
  --blue-600: #173a75;
  --blue-50: #edf1f8;
  --blue-100: #d8e1f1;
  --spark: #dbe64c;
  --spark-600: #c4cf36;
  --spark-50: #f7f9dc;
  --green: #0f7a4a;
  --green-50: #e6f3ea;
  --green-700: #0b5e39;
  --red: #b8322a;
  --red-50: #fbe9e6;
  --red-700: #8f2419;
  --amber: #985a00;
  --amber-50: #f7ebd5;
  --amber-700: #6e4200;
  /* "violet" keeps its name for the tone the page uses; it is now luminous cobalt. */
  --violet: #2a4bd7;
  --violet-50: #e9edfb;
  --violet-700: #1f38a8;
  --teal: #0c6f78;
  --teal-50: #e4f3f4;
  --slate: #33465e;
  --navy: #001f3f;
  /* Product colours, with the lighter form each takes on midnight. Every pair passes 4.5:1 on
     the white page and the tint, or on midnight and the midnight cards. */
  --passo: #5b3db0;
  --passo-d: #b9a8f2;
  --quadra: #a4501c;
  --quadra-d: #f0a36e;
  --regia: #9c2a73;
  --regia-d: #ee8cc6;
  --shadow: 0 1px 2px rgba(0, 31, 63, .04), 0 12px 32px rgba(0, 31, 63, .07);
  --shadow-lg: 0 30px 70px rgba(0, 31, 63, .16);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink-2); font: 17px/1.6 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: Jakarta, Inter, sans-serif; color: var(--ink); letter-spacing: -.025em; margin: 0; }
p { margin: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.num { font-variant-numeric: tabular-nums; }
/* Visually hidden, still read out. */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.cta-band :focus-visible, section.dark :focus-visible { outline-color: var(--spark); }
/* Skip link, off screen until focused. Midnight with the lime ring drawn inside it, so it
   reads over the white header. */
.skip { position: fixed; top: 12px; left: 12px; z-index: 60; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #ffffff; font-size: 15px; font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }
.skip:focus-visible { outline: 2px solid var(--spark); outline-offset: -5px; border-radius: 12px; }

/* Product names: always in capitals and in the product's colour, taking its lighter form on
   midnight. "by Fingrip" follows in the text colour. */
.pn { color: var(--pc); }
.pn.passo { --pc: var(--passo); }
.pn.quadra { --pc: var(--quadra); }
.pn.regia { --pc: var(--regia); }
section.dark .pn.passo { --pc: var(--passo-d); }
section.dark .pn.quadra { --pc: var(--quadra-d); }
section.dark .pn.regia { --pc: var(--regia-d); }
.by { margin-left: .2em; font: 600 .5em Inter, sans-serif; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
section.dark .by { color: #c9d3df; }
/* The product mark on a tile of its colour; on midnight the tile takes a faint white edge. */
.pt { display: grid; place-items: center; flex: none; width: 52px; height: 52px; color: var(--pc); }
.pt svg { width: 100%; height: 100%; }
.pt.passo { --pc: var(--passo); }
.pt.quadra { --pc: var(--quadra); }
.pt.regia { --pc: var(--regia); }
.pt.small { width: 40px; height: 40px; }
section.dark .pt.passo { --pc: var(--passo-d); }
section.dark .pt.quadra { --pc: var(--quadra-d); }
section.dark .pt.regia { --pc: var(--regia-d); }
.lockup { display: flex; align-items: center; gap: 14px; }
.lockup h3, .lockup-name { font: 800 26px/1.15 Jakarta, sans-serif; letter-spacing: -.01em; color: var(--ink); }
.lockup-tag { display: block; margin-top: 6px; font: 600 12px/1.2 ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.lockup.big .pt { width: 60px; height: 60px; }
.lockup.big .lockup-name { font-size: 32px; }

/* header */
/* The bar is .95 opaque: over the midnight products section, less would drop QUADRA's copper
   in the bar below 4.5:1 (4.4:1 at .92), and the grey section links with it. */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .95); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header > .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 20px Jakarta, sans-serif; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.brand svg { width: 32px; height: 32px; flex: none; }
/* "fin" takes the ink, "grip" the blue; the expansion under the name picks out the same
   letters in the same two colours. */
.brand > span { display: block; line-height: 1.15; }
.brand .wm-grip { color: var(--blue); }
.brand small { display: block; margin-top: 4px; font: 500 11px/1.35 Inter, sans-serif; letter-spacing: 0; color: var(--ink-3); }
.brand small b { font-weight: 700; color: var(--blue); }
.brand small b.wm-fin { color: var(--ink); }
.nav { display: flex; gap: 26px; margin-left: 12px; }
.nav a { color: var(--ink-3); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--ink); }
/* The product links keep their colour; hover underlines them instead. */
.nav a.pn, .nav-menu .wrap > a.pn, footer.site a.pn { color: var(--pc); font-weight: 700; letter-spacing: .02em; }
.nav a.pn:hover, .nav-menu .wrap > a.pn:hover, footer.site a.pn:hover { color: var(--pc); text-decoration: underline; text-underline-offset: 4px; }
.head-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
/* Opens the header menu below 1000px. Shown only once site.js runs: without the script there
   is nothing for it to open. .js is there from the first paint, so the header does not shift;
   .nav-js is set once the menu is wired up and stays if a demo later fails and site.js drops
   .js to show everything. */
.menu-btn { display: none; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; }
.menu-btn:hover { border-color: #d3d9e1; }
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn[aria-expanded="true"] .ic-open, .menu-btn[aria-expanded="false"] .ic-shut { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 14px; font: 600 15px Inter, sans-serif; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s, background .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--blue); color: #fff; box-shadow: 0 10px 24px rgba(30, 72, 143, .25); }
.btn.primary:hover { background: var(--blue-600); }
.btn.ghost { color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.btn.ghost:hover { border-color: #d3d9e1; }
.btn.small { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; }
.btn svg { width: 17px; height: 17px; }

/* header menu, below 1000px: a light panel under the header with the section links and both
   actions, floating over the page rather than pushing it down. It keeps the hidden attribute
   until the menu button opens it, so nothing in it takes focus while it is closed. */
.nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px rgba(0, 31, 63, .1); animation: menu-in .18s var(--ease); }
.nav-menu .wrap { padding-top: 6px; padding-bottom: 20px; }
.nav-menu .wrap > a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 16px; font-weight: 500; text-decoration: none; }
.nav-menu .wrap > a:hover { color: var(--blue); }
.menu-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.menu-cta .btn { flex: 1 1 140px; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

/* Section rail: the logo's checklist, unfolded down the page, floating on it with no panel of
   its own (Andrea, 28 October 2026), at the left edge from 1280px, where the content column
   (1180px at most, plus its padding) leaves it room. A line runs through a stop per section and
   fills as the page is read (site.js sets --p, 0 to 1): the section in view is a lime disc
   with its number, the sections already read are the mark's lime check, the ones still ahead
   dots. Each row takes its colours from what lies behind it: on the white page the names in the
   ink and the line in midnight; over a midnight section (site.js sets .on-dark per row, from
   where each midnight surface really is) the names in their light forms and the line in the
   lime, so the lime stays on midnight or under midnight marks. Up to 1500px the rail shows the
   stops only and unfolds to every name on a white card on hover or keyboard focus, so the names
   never sit on the page's text; from 1500px, where there is room beside it, the names stay out.
   The rows keep their places in both states, so a click never lands on a row that has just
   moved. Rows are 26px apart, so each stop is at least a 24 by 24 target (WCAG 2.5.8). */
/* The row height is a registered length, so the rail can stretch smoothly: every row, stop and
   the line between them follow it (browsers without @property jump instead). */
@property --rail-row { syntax: '<length>'; inherits: true; initial-value: 26px; }
.rail { display: none; position: fixed; left: 12px; top: 50%; z-index: 20; transform: translateY(-50%); font: 500 12.5px/16px Inter, sans-serif; pointer-events: none; counter-reset: rail; --rail-row: 26px; --rail-stop: 22px; --rail-pad: 7px; --rail-w: calc(var(--rail-stop) + 2 * var(--rail-pad)); }
.rail:hover, .rail:focus-within { --rail-w: 100%; }
.rail-panel { position: relative; padding: 10px 0; }
/* The card the names unfold on, below 1500px; clear otherwise. It is its own layer, so it can
   be as narrow as the stops while the names wait beside them. Only it and the links answer the
   pointer: the names, clipped while folded, never cover a link or text on the page. */
.rail-panel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--rail-w); border-radius: 14px; pointer-events: auto; transition: width .4s var(--ease-out), background-color .2s, box-shadow .2s; }
.rail ol { position: relative; list-style: none; margin: 0; padding: 0; clip-path: inset(-4px calc(100% - var(--rail-w)) -4px -4px); transition: clip-path .4s var(--ease-out); }
/* Each row's colours, for the white page; a row over midnight takes the light set. */
.rail li { position: relative; counter-increment: rail; --t-text: #56657a; --t-done: #33465e; --t-now: var(--ink); --t-hover: var(--blue); --t-dot: #8a97a8; --t-dot-hover: var(--ink-2); --t-track: #d3d9e1; --t-fill: var(--navy); --t-hl: rgba(0, 31, 63, .06); --t-ring: var(--blue); }
.rail li.on-dark { --t-text: #9fb0c4; --t-done: #d5dde7; --t-now: #fff; --t-hover: #fff; --t-dot: #8b9bb0; --t-dot-hover: #c9d3df; --t-track: rgba(201, 211, 223, .28); --t-fill: var(--spark); --t-hl: rgba(255, 255, 255, .08); --t-ring: var(--spark); }
/* The line runs from each stop to the next, in its row's colours, and fills as far as the page
   has been read: row i fills by p * (n - 1) - i, between 0 and 1. */
.rail li::before, .rail li::after { content: ''; position: absolute; left: calc(var(--rail-pad) + var(--rail-stop) / 2 - 1px); top: calc(var(--rail-row) / 2); height: var(--rail-row); width: 2px; background: var(--t-track); transition: background-color .2s; }
.rail li::after { background: var(--t-fill); transform: scaleY(clamp(0, calc(var(--p, 0) * (var(--rail-n, 10) - 1) - var(--i, 0)), 1)); transform-origin: top; transition: transform .3s var(--ease-out), background-color .2s; }
.rail li:last-child::before, .rail li:last-child::after { display: none; }
.rail a { position: relative; display: flex; align-items: center; gap: 10px; height: var(--rail-row); padding: 0 16px 0 var(--rail-pad); border-radius: 8px; color: var(--t-text); text-decoration: none; white-space: nowrap; pointer-events: auto; transition: color .2s; }
.rail a.done { color: var(--t-done); }
.rail a:hover { color: var(--t-hover); }
.rail a:focus-visible { outline: 2px solid var(--t-ring); outline-offset: -2px; border-radius: 8px; }
/* The highlight keeps its height when the rows stretch. */
.rail a[aria-current]::before { content: ''; position: absolute; inset: calc(50% - 12px) 4px; border-radius: 8px; background: var(--t-hl); }
/* A stop: a dot ahead, the lime check once read, the lime disc with the section's number while
   in view, which rings out once as it arrives. Check and number are midnight on the lime. */
.rail .mark { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: var(--rail-stop); height: var(--rail-stop); }
.rail .mark::before, .rail .mark::after, .rail .mark svg { grid-area: 1 / 1; }
.rail .mark::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--t-dot); transition: width .25s var(--ease-out), height .25s var(--ease-out), background-color .2s; }
.rail a:not(.done):not([aria-current]):hover .mark::before { background: var(--t-dot-hover); }
.rail .done .mark::before { width: 14px; height: 14px; background: var(--spark); }
.rail [aria-current] .mark::before { width: 20px; height: 20px; background: var(--spark); box-shadow: 0 0 0 4px rgba(219, 230, 76, .2); animation: rail-ping 1.1s var(--ease-out); }
.rail .mark svg { width: 8px; height: 8px; color: var(--navy); opacity: 0; transition: opacity .2s; }
.rail .done .mark svg { opacity: 1; }
.rail .mark::after { content: counter(rail, decimal-leading-zero); font: 700 9.5px/1 ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: -.03em; color: var(--navy); opacity: 0; transition: opacity .2s; }
.rail [aria-current] .mark::after { opacity: 1; }
@keyframes rail-ping {
  0% { box-shadow: 0 0 0 0 rgba(219, 230, 76, .6); }
  70% { box-shadow: 0 0 0 11px rgba(219, 230, 76, 0); }
  100% { box-shadow: 0 0 0 4px rgba(219, 230, 76, .2); }
}
/* Collapsed, the names are clipped but stay in the accessibility tree; they slide in as the
   panel unfolds. */
.rail-label { opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--ease-out), transform .3s var(--ease-out); }
.rail:hover .rail-label, .rail:focus-within .rail-label { opacity: 1; transform: none; }
.rail [aria-current] .rail-label { color: var(--t-now); font-weight: 600; }
/* Product names keep their colour, in the lighter form each takes on midnight (over a midnight
   section and in the dock); hover underlines them. */
.rail li.on-dark .pn.passo, .rail-toggle .pn.passo { --pc: var(--passo-d); }
.rail li.on-dark .pn.quadra, .rail-toggle .pn.quadra { --pc: var(--quadra-d); }
.rail li.on-dark .pn.regia, .rail-toggle .pn.regia { --pc: var(--regia-d); }
.rail a .rail-label.pn { color: var(--pc); }
.rail a:hover .rail-label.pn { text-decoration: underline; text-underline-offset: 3px; }
/* The dock's button and its heading belong to narrower windows (below). */
.rail-toggle, .rail-head { display: none; }
/* A short window would put the panel (280px tall, centred) under the 72px header, so it needs
   some height too. */
@media (min-width: 1280px) and (min-height: 440px) {
  .rail { display: block; }
  /* In flight (site.js sets .rail-fly, never with reduced motion): the rail waits beyond the
     left edge, flies in when the page moves on to another part, not while it is read on
     (.rail-in), and, once landed, stretches about twice as tall around its middle (.rail-tall):
     ten rows of up to 54px; in a shorter window the rows shrink so the rail keeps 150px clear of
     its top and bottom, below the header. Leaving, it shrinks back first and then flies out.
     Out, it answers no pointer, but its links still take keyboard focus, which brings it in. */
  .rail-fly .rail { --rail-n: 10; opacity: 0; translate: calc(-100% - 24px) 0; transition: translate .42s cubic-bezier(.55, 0, .75, .2), opacity .25s ease-in .15s, --rail-row .3s var(--ease-out); }
  .rail-fly .rail.rail-in { opacity: 1; translate: none; transition: translate .6s var(--ease-out), opacity .2s ease-out, --rail-row .55s var(--ease-out); }
  .rail-fly .rail.rail-tall { --rail-row: clamp(26px, calc((100vh - 300px) / var(--rail-n)), 54px); }
  .rail-fly .rail:not(.rail-in) .rail-panel::before, .rail-fly .rail:not(.rail-in) a { pointer-events: none; }
}
/* Up to 1500px the names unfold on a white card, whatever lies behind, so every row takes the
   white page's colours while it shows. */
@media (min-width: 1280px) and (max-width: 1499.98px) and (min-height: 440px) {
  .rail:hover .rail-panel::before, .rail:focus-within .rail-panel::before { background-color: rgba(255, 255, 255, .97); box-shadow: 0 0 0 1px rgba(0, 31, 63, .08), 0 14px 34px -14px rgba(0, 31, 63, .28); }
  .rail:hover li.on-dark, .rail:focus-within li.on-dark { --t-text: #56657a; --t-done: #33465e; --t-now: var(--ink); --t-hover: var(--blue); --t-dot: #8a97a8; --t-dot-hover: var(--ink-2); --t-track: #d3d9e1; --t-fill: var(--navy); --t-hl: rgba(0, 31, 63, .06); --t-ring: var(--blue); }
  .rail:hover li.on-dark .pn.passo, .rail:focus-within li.on-dark .pn.passo { --pc: var(--passo); }
  .rail:hover li.on-dark .pn.quadra, .rail:focus-within li.on-dark .pn.quadra { --pc: var(--quadra); }
  .rail:hover li.on-dark .pn.regia, .rail:focus-within li.on-dark .pn.regia { --pc: var(--regia); }
}
/* From 1500px every name stays out. The names start 51px from the left edge and the longest,
   "Overview" or "QUADRA" at 600, is about 65px wide, so the panel ends near 132px; the demos'
   frames start at (width - 1180) / 2 + 15, 167px at 1500px even with a 17px scrollbar taken
   off. */
@media (min-width: 1500px) {
  .rail { --rail-w: 100%; }
  .rail .rail-label { opacity: 1; transform: none; }
}
/* Below 1280px, or in a short window, the rail docks at the bottom left once site.js runs: a
   midnight button with a dial (the stop's number, ringed by the lime as far as the page has
   been read) and the name of the section in view. It opens the same list above it, with rows
   40px apart for a finger. Once the hero has scrolled away it flies in from the left when the
   page moves on and out again a few seconds later, as the side panel does, and steps aside over
   the footer (.rail-in; with reduced motion it simply shows past the hero). Out, the button
   answers no tap, but it still takes keyboard focus, which brings it in. */
@media (max-width: 1279.98px), (max-height: 439.98px) {
  .rail-js .rail { display: block; top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; transform: none; filter: drop-shadow(0 10px 18px rgba(0, 31, 63, .28)); --rail-row: 40px; --rail-w: 100%; font-size: 15px; line-height: 20px; opacity: 0; translate: calc(-100% - 24px) 0; transition: translate .4s cubic-bezier(.55, 0, .75, .2), opacity .25s ease-in .12s; }
  .rail-js .rail.rail-in { opacity: 1; translate: none; transition: translate .55s var(--ease-out), opacity .2s ease-out; }
  .rail-js .rail:not(.rail-in) .rail-toggle { pointer-events: none; }
  .rail-js .rail-toggle { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 6px; border: 0; border-radius: 999px; background: var(--grain-l), linear-gradient(165deg, #0f3460, var(--navy) 62%); background-size: 160px, auto; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .1); color: #ffffff; font: 600 14px/1 Inter, sans-serif; cursor: pointer; pointer-events: auto; }
  .rail-js .rail-toggle:focus-visible { outline: 2px solid var(--spark); outline-offset: -5px; border-radius: 999px; }
  .rail-dial { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(var(--spark) calc(var(--p, 0) * 1turn), rgba(201, 211, 223, .22) 0); }
  .rail-dial::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--navy); }
  .rail-dial b { position: relative; font: 700 11px/1 ui-monospace, 'SF Mono', Consolas, monospace; color: var(--spark); }
  #rail-now { max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-chev { flex: none; width: 16px; height: 16px; color: #93a3b8; transition: transform .25s var(--ease-out); }
  .rail-js .rail.open .rail-chev { transform: rotate(180deg); }
  .rail-js .rail-panel { display: none; position: absolute; left: 0; bottom: calc(100% + 10px); width: min(260px, calc(100vw - 32px)); max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; padding: 0 0 8px; border-radius: 16px; background: var(--grain-l), linear-gradient(165deg, #0f3460, var(--navy) 62%); background-size: 160px, auto; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); pointer-events: auto; }
  .rail-js .rail-panel::before { display: none; }
  .rail-js .rail.open .rail-panel { display: block; animation: rail-up .22s var(--ease-out); transform-origin: 24px 100%; }
  .rail-js .rail-head { display: block; margin: 0 0 6px; padding: 14px 16px 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); font: 600 10.5px/1 ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: #93a3b8; }
  .rail-js .rail ol { margin: 0 8px; }
  .rail-js .rail a { padding-left: 9px; }
  .rail-js .rail .rail-label { opacity: 1; transform: none; }
  /* The dock's list sits on its own midnight panel: every row takes the light set. */
  .rail-js .rail li { --t-text: #9fb0c4; --t-done: #d5dde7; --t-now: #fff; --t-hover: #fff; --t-dot: #8b9bb0; --t-dot-hover: #c9d3df; --t-track: rgba(201, 211, 223, .28); --t-fill: var(--spark); --t-hl: rgba(255, 255, 255, .08); --t-ring: var(--spark); }
  .rail-js .rail li .pn.passo { --pc: var(--passo-d); }
  .rail-js .rail li .pn.quadra { --pc: var(--quadra-d); }
  .rail-js .rail li .pn.regia { --pc: var(--regia-d); }
  .rail-js .rail li::before, .rail-js .rail li::after { left: calc(9px + var(--rail-stop) / 2 - 1px); }
  @keyframes rail-up { from { opacity: 0; transform: translateY(8px) scale(.97); } }
}
/* Forced colours drop backgrounds, and with them the line and the stops. */
@media (forced-colors: active) {
  .rail-js .rail-panel, .rail-js .rail-toggle { border: 1px solid CanvasText; }
  .rail li::before, .rail li::after, .rail .mark::before, .rail .mark::after, .rail .mark svg, .rail-dial, .rail-dial::before, .rail-dial b { forced-color-adjust: none; }
  .rail li::before, .rail .mark::before { background: CanvasText; }
  .rail li::after, .rail .done .mark::before, .rail [aria-current] .mark::before { background: Highlight; }
  .rail .mark::after, .rail .mark svg { color: HighlightText; }
  .rail-dial { background: conic-gradient(Highlight calc(var(--p, 0) * 1turn), GrayText 0); }
  .rail-dial::before { background: Canvas; }
  .rail-dial b { color: CanvasText; }
}

/* hero */
/* The hero clips sideways only (a page that never scrolls sideways), so the card's bubbles and
   their trails above and below it are never cut. Browsers without overflow: clip keep hidden. */
.hero { position: relative; padding: 70px 0 60px; overflow: hidden; overflow: clip visible; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 42px; mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 75%); pointer-events: none; }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--ink-3); }
.eyebrow b { color: var(--blue-600); font-weight: 700; }
/* At 54px the line's first sentence fits the hero's text column on one line. */
.hero h1 { font-size: clamp(40px, 4.2vw, 54px); line-height: 1.02; margin: 22px 0 22px; font-weight: 800; }
.hero h1 span { display: block; color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: .32em; text-underline-offset: -.24em; text-decoration-skip-ink: none; }
/* The marker passes down the two lines in turn, slowly, and starts again: each line lit for
   half of the loop, 3.5 s. Paused with the other loops; with reduced motion it stays on the
   last line. */
.hero h1 span { animation: hl-pass 7s ease-in-out infinite; }
.hero h1 span:nth-child(2) { animation-delay: -3.5s; }
@keyframes hl-pass { 0% { text-decoration-color: transparent; } 7.5%, 45% { text-decoration-color: var(--spark); } 54%, 100% { text-decoration-color: transparent; } }
.motion-paused .hero h1 span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero h1 span { animation: none !important; }
  .hero h1 span:last-child { text-decoration-color: var(--spark); }
}
.lead { font-size: 19px; line-height: 1.65; color: var(--ink-2); max-width: 34em; }
.hero-cta { display: flex; gap: 12px; margin: 30px 0 18px; flex-wrap: wrap; }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 20px 0 0; font-size: 14.5px; color: var(--ink-3); }
.ticks li { display: flex; align-items: center; gap: 7px; }
.ticks svg { width: 16px; height: 16px; color: var(--blue); }
.motion-toggle { margin-top: 18px; padding: 0; border: 0; background: none; font: 500 14px Inter, sans-serif; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.motion-toggle:hover { color: var(--ink); }

/* The label every synthetic example carries. */
.synth { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }

/* The card and its two bubbles. Both hang below the card: the source, with one thin straight
   line from its edge to its figure, as a line callout in a slide; then the notification, a step
   down and to the side, joined to the source by a short line of its own, as the action that
   follows from it. No second line crosses the card. The stage keeps room for both, as tall as
   site.js measures them. The card isolates its layers, so the line
   (z-index -1) runs over the card's white but under its text and figures: the story stays
   readable while it shows. */
.hero-stage { position: relative; padding: 0 0 calc(var(--src-h, 104px) + var(--note-h, 70px) + 76px); }
.doc-card { position: relative; isolation: isolate; background: var(--surface); border-radius: 26px; box-shadow: var(--shadow-lg); padding: 26px 26px 22px; border: 1px solid #e6eaef; }
.doc-card .dc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; font-size: 13px; color: var(--ink-3); }
.doc-card .dc-head b { color: var(--ink); font-weight: 600; }
.doc-card .synth { margin: -8px 0 8px; font-size: 12px; }
.file-dot { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; font: 800 9px Inter, sans-serif; margin-right: 8px; vertical-align: middle; }
/* White on every stop of each gradient passes 4.5:1. */
.file-dot.doc { background: linear-gradient(135deg, #1f5fbf, #2a6ccc); }
.file-dot.ppt { background: linear-gradient(135deg, #b7472a, #cf4a1c); }
.file-dot.xls { background: linear-gradient(135deg, #146c3a, #1a7f47); }
.prose { font-family: Georgia, 'Times New Roman', serif; font-size: 17.5px; line-height: 1.85; color: #1f3350; }
.fig { position: relative; padding: 1px 5px; border-radius: 7px; background: #f2f4f7; font-family: Inter, sans-serif; font-weight: 700; font-size: 15.5px; color: var(--ink); transition: background .4s, color .4s; font-variant-numeric: tabular-nums; }
.fig::after { content: ''; position: absolute; right: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat; transform: scale(0); transition: transform .35s var(--ease); box-shadow: 0 0 0 3px #fff; }
.fig.ok { background: var(--green-50); color: var(--green-700); }
.fig.ok::after { transform: scale(1); }
.fig.bad { background: var(--red-50); color: var(--red-700); }
.fig.bad::after { transform: scale(1); background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/10px no-repeat; }
.fig.scan { background: var(--spark); color: var(--ink); }
.dc-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 13.5px; color: var(--ink-3); }
.dc-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.dc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), #3f6ac0); border-radius: 6px; transition: width .6s var(--ease); }
.float { position: absolute; z-index: 2; background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(0, 31, 63, .06), 0 16px 36px rgba(0, 31, 63, .13); padding: 14px 16px; font-size: 13.5px; border: 1px solid var(--ink); transition: opacity .45s var(--ease), transform .45s var(--ease); }
/* Shown, each bubble waits for its line to be drawn (--d); hidden, it goes at once. */
.float.show { transition-delay: var(--d, 0s); }
.float.src { right: 14px; top: calc(100% + 40px); width: 272px; }
.float.src .k { color: var(--ink-3); font-size: 12px; }
.float.src .v { font: 800 22px Jakarta, sans-serif; color: var(--ink); }
.float.src .diff { display: flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--ink-2); font-size: 12px; }
.float.src .diff::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px var(--red-50); }
.float.note { right: 64px; top: calc(100% + 68px + var(--src-h, 104px)); display: flex; gap: 10px; align-items: center; width: 330px; color: var(--ink); font-weight: 500; }
.hero-stage.flip .float.src { right: auto; left: 14px; }
.hero-stage.flip .float.note { right: auto; left: 64px; }
/* The callout lines: a navy hairline, drawn from the bubble to the figure (pathLength is 1),
   then the bubble appears; hidden, the line draws back quickly. */
.trail { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trail path { fill: none; stroke: var(--ink); stroke-width: 1.15; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .25s var(--ease); }
.doc-card.src-on .trail .src, .doc-card.note-on .trail .note { stroke-dashoffset: 0; transition: stroke-dashoffset .55s cubic-bezier(.45, 0, .25, 1); }
/* Grip speaks with Fingrip's mark: the logo carries its own navy tile, so the box only rounds and shades it. */
.grip { width: 34px; height: 34px; border-radius: 31%; flex: none; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0, 31, 63, .3); }
.grip svg { width: 100%; height: 100%; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
/* Pill text uses the darker shade of each hue: 4.5:1 or more on its tint. */
.pill.green { background: var(--green-50); color: var(--green-700); }
.pill.red { background: var(--red-50); color: var(--red-700); }
.pill.blue { background: var(--blue-50); color: var(--blue-600); }
.pill.violet { background: var(--violet-50); color: var(--violet-700); }
.pill.amber { background: var(--amber-50); color: var(--amber-700); }

/* sections */
section.page { padding: 104px 0; }
/* A jump to a section lands below the sticky header (72px). */
main, section[id] { scroll-margin-top: 72px; }
/* The same for focus: tabbing backwards scrolls a control to the top edge, where the header
   would hide a link or a question entirely (WCAG 2.4.11). Header controls are left out, since
   they stick and never need scrolling to. */
main a, main button, main summary, main input, main [tabindex], footer.site a { scroll-margin-top: 88px; }
section.tint { background: var(--bg-2); }
section.dark { background: var(--navy); color: #c9d3df; }
.sec-head { max-width: 760px; margin-bottom: 52px; }
.sec-head h2 { font-size: clamp(32px, 4vw, 50px); line-height: 1.08; margin: 18px 0 18px; font-weight: 800; }
.sec-head h2 span { color: var(--blue); }
.sec-head p { font-size: 18.5px; color: var(--ink-2); }
section.dark .sec-head h2 { color: #fff; }
section.dark .sec-head h2 span { color: var(--spark); }
section.dark .sec-head p { color: #aeb9c6; }
section.dark .eyebrow { color: #8b96a2; }
section.dark .eyebrow::before { background: #8b96a2; }
section.dark .eyebrow b { color: var(--spark); }

.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards2 { grid-template-columns: 1fr 1fr; }
.card { background: var(--surface); border-radius: 24px; padding: 28px; box-shadow: var(--shadow); border: 1px solid #e6eaef; }
.card h3 { font-size: 20px; margin: 18px 0 10px; font-weight: 700; }
.card p { color: var(--ink-2); font-size: 15.5px; }
.card p.small { margin-top: 12px; font-size: 14px; color: var(--ink-3); }
.ibox { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue); }
.ibox svg { width: 22px; height: 22px; }

/* the three products, on midnight: three abreast, one under the other once the columns stack
   (1000px), where three cards would leave too little room for their text */
.family { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prod { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: 24px; background: #0a2a4d; border: 1px solid #1a3b60; }
/* A chevron in the gap between two cards: each product builds on the one before. */
.prod + .prod::before { content: ''; position: absolute; left: -17px; top: 50%; width: 10px; height: 10px; border-top: 2px solid #8b9bb0; border-right: 2px solid #8b9bb0; transform: translateY(-50%) rotate(45deg); }
.prod-step { font: 600 11.5px/1 ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: #8b9bb0; }
.prod .lockup h3 { color: #fff; }
/* "by Fingrip" goes under the name on every card, so the lockups match. */
.prod .lockup .by { display: block; margin: 5px 0 0; }
.prod-what { font-size: 16px; color: #dde3ea; }
.prod-facts { display: grid; gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid #1a3b60; }
.prod-facts dt { margin-bottom: 4px; font: 600 11px/1.2 ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8b9bb0; }
.prod-facts dd { margin: 0; font-size: 14.5px; color: #c9d3df; }
.prod-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: 15px; font-weight: 600; color: #ffffff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 4px; }
.prod-link:hover { text-decoration-color: currentColor; }
.prod-link svg { width: 16px; height: 16px; flex: none; }
.family-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 15px; color: #aeb9c6; }
.family-notes b { color: #fff; }

/* PASSO: a slide and the record PASSO makes of the figure chosen on it */
.passo-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: start; }
.pdemo { margin: 0; padding: 22px; border-radius: 26px; background: var(--surface); border: 1px solid #e6eaef; box-shadow: var(--shadow-lg); }
.pd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; font-size: 13px; color: var(--ink-3); }
.pd-head b { color: var(--ink); font-weight: 600; }
/* The slide above, the record below: each value fits one line, so the record keeps its height
   while the demo steps through the figures. */
.pd-body { display: grid; gap: 14px; }
.slide { padding: 16px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.slide-k { margin-bottom: 8px; font: 700 13px Jakarta, sans-serif; color: var(--ink); }
.slide-p { line-height: 1.95; }
.slide-t { width: 100%; margin: 12px 0; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.slide-t th, .slide-t td { padding: 5px 3px; border-bottom: 1px solid var(--line); text-align: right; font-weight: 500; }
.slide-t thead th { font-weight: 600; color: var(--ink-3); }
.slide-t th:first-child { text-align: left; }
/* The picture: a scanned look, slightly askew. */
.slide-pic { position: relative; margin-top: 6px; padding: 28px 12px 10px; border-radius: 10px; border: 1px solid #dfe2d2; background: repeating-linear-gradient(0deg, #e9ebdf 0 2px, #eceff3 2px 4px); transform: rotate(-.8deg); font: 13px 'Courier New', Courier, monospace; color: var(--ink); }
.pic-k { position: absolute; top: 7px; left: 10px; display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px Inter, sans-serif; color: var(--ink-3); }
.pic-k svg { width: 12px; height: 12px; }
/* Rows 25px apart, so the two figure buttons keep 24px targets apart (WCAG 2.5.8). */
.pic-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
/* Each figure PASSO found is a button. The one in the record takes the spark: lime under
   midnight text, as where the hero's scan passes. */
.pf { padding: 0 5px; border: 1px solid transparent; border-radius: 7px; background: #eceee2; font: inherit; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; cursor: pointer; transition: background .45s var(--ease), border-color .3s; }
.pf:hover { border-color: var(--blue); }
.pf.on { background: var(--spark); border-color: transparent; }
.record { padding: 16px 16px 14px; border-radius: 16px; background: var(--navy); color: #dde3ea; }
.rec-h { font: 600 11.5px/1.3 ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8b9bb0; }
.rec-h span { margin-left: 6px; font: 500 12px Inter, sans-serif; letter-spacing: 0; text-transform: none; }
.rec-list { display: grid; gap: 7px; margin: 12px 0 0; }
.rec-list div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: baseline; }
.rec-list dt { font-size: 11.5px; color: #8b9bb0; }
.rec-list dd { margin: 0; font-size: 13.5px; font-weight: 600; color: #ffffff; overflow-wrap: anywhere; transition: opacity .34s var(--ease), transform .34s var(--ease); }
/* While the demo steps on, the old record fades out and settles; the new one fades in. */
.record.swap .rec-list dd, .record.swap .conf-v { opacity: 0; transform: translateY(3px); }
.conf { margin-top: 12px; padding-top: 12px; border-top: 1px solid #1a3b60; }
.conf-k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 11.5px; color: #8b9bb0; }
.conf-bar { position: relative; height: 6px; margin: 8px 0; border-radius: 6px; background: #123559; }
.conf-bar i { display: block; width: 0; height: 100%; border-radius: 6px; background: #c9d3df; transition: width .7s var(--ease); }
.conf[data-state="code"] .conf-bar { opacity: .4; }
.conf-mark { position: absolute; left: 95%; top: -3px; width: 2px; height: 12px; margin-left: -1px; background: #8b9bb0; }
.conf-v { min-height: 3.2em; font-size: 13px; line-height: 1.6; color: #dde3ea; transition: opacity .34s var(--ease), transform .34s var(--ease); }
.conf-v .pill { height: 20px; margin-left: 4px; vertical-align: 1px; }
.feats { display: grid; gap: 24px; }
.feat { display: grid; grid-template-columns: 48px 1fr; gap: 16px; }
.feat h3 { margin: 2px 0 6px; font-size: 18px; font-weight: 700; }
.feat p { font-size: 15.5px; }

/* QUADRA: the live check */

/* Outcome codes: the code in its status colour, white on the fill (5.3:1 or more); TR in tie
   green, outlined rather than filled. On the midnight panel slate takes a lighter edge, or it
   would sink into the row. */
.oc { display: inline-grid; place-items: center; min-width: 32px; height: 24px; padding: 0 6px; border: 1.5px solid var(--oc); border-radius: 7px; background: var(--oc); color: #fff; font: 700 12px/1 Inter, sans-serif; letter-spacing: .02em; }
.oc.t, .rep-bar .t, .rdot.t { --oc: var(--green); }
.oc.tr, .rep-bar .tr { --oc: var(--green); }
.oc.tr { background: var(--green-50); color: var(--green-700); }
.oc.m, .rep-bar .m, .rdot.m { --oc: var(--red); }
.oc.j, .rep-bar .j, .rdot.j { --oc: var(--violet); }
.oc.ns, .rep-bar .ns { --oc: var(--amber); }
.oc.nw, .rep-bar .nw { --oc: var(--teal); }
.oc.sd, .rep-bar .sd { --oc: var(--slate); }
.legend { margin-top: 28px; padding: 26px; border-radius: 24px; background: var(--surface); border: 1px solid #e6eaef; box-shadow: var(--shadow); }
.legend h3 { margin: 0 0 18px; font-size: 19px; font-weight: 700; }
.legend dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 24px; margin: 0; }
.legend dt { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.legend dd { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.route { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 14.5px; }
.route li { display: grid; grid-template-columns: 12px 1fr; gap: 12px; }
.route b { display: block; color: var(--ink); }
.rdot { width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--oc); }
.report { margin-top: 16px; padding: 16px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.rep-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 12.5px; color: var(--ink-3); }
.rep-h b { font-size: 14.5px; color: var(--ink); }
.rep-bar { display: flex; gap: 2px; height: 12px; margin: 12px 0 14px; border-radius: 6px; overflow: hidden; }
.rep-bar i { display: block; min-width: 3px; background: var(--oc); }
.rep-bar i.tr { background: var(--green-50); box-shadow: inset 0 0 0 1.5px var(--green); }
.rep-levels { display: grid; gap: 6px; margin: 0; padding-left: 1.3em; font-size: 13.5px; }
.rep-levels b { color: var(--ink); }

/* The closing line under a section's cards. */
.sec-note { margin-top: 26px; font-size: 15.5px; color: var(--ink-2); }
.sec-note b { color: var(--ink); }

/* REGIA: one phase of the workflow, as REGIA's designer draws it. A dashed band on a dotted
   canvas holds the phase; each object is a card with its icon, step and who acts; decisions are
   midnight gates with the lime diamond; green arrows for yes, and the loops back are dashed red
   with their reason in a chip. Lit (site.js), an object takes a blue ring and its icon fills; a
   gate takes the lime. */
.wf { background: #fff; border-radius: 28px; box-shadow: var(--shadow); padding: 26px; border: 1px solid #e6eaef; }
.wf-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; font-size: 13px; color: var(--ink-3); }
.ptag { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 13px 0 11px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 600; }
.ptag b, .phases b { flex: none; color: var(--spark); font: 800 12.5px/1 Jakarta, sans-serif; letter-spacing: .05em; }
.wf-scroll { padding: 14px; border: 1.5px dashed rgba(0, 31, 63, .2); border-radius: 22px; background: radial-gradient(rgba(0, 31, 63, .13) 1px, transparent 1.4px) 0 0 / 20px 20px, #fbfbf7; }
.wf svg { width: 100%; height: auto; display: block; overflow: visible; }
.wf svg text { font-family: Inter, sans-serif; }
.wf .edge { fill: none; stroke: #a7b0bb; stroke-width: 1.75; stroke-linecap: round; stroke-dasharray: 1; transition: stroke-dashoffset 1s var(--ease), opacity .3s; }
.wf .edge.yes { stroke: var(--green); }
.wf .loop { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 6; transition: opacity .8s var(--ease) .5s; }
.wf marker path { fill: #a7b0bb; }
.wf marker.mg path { fill: var(--green); }
.wf marker.mr path { fill: var(--red); }
/* Beads moving along the happy path, in the colour of each arrow. Not with reduced motion; they
   stop with Pause animations. */
.wf .flow path { fill: none; stroke: var(--blue); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0 22; opacity: 0; transition: opacity .6s; }
.wf .flow path:nth-child(3), .wf .flow path:nth-child(5), .wf .flow path:nth-child(6) { stroke: var(--green); }
.wf.in .flow path { opacity: .75; animation: wf-flow 1.5s linear infinite; }
.motion-paused .wf .flow path { animation-play-state: paused; }
@keyframes wf-flow { to { stroke-dashoffset: -22; } }
.wf .nc { fill: #fff; stroke: #e1e5eb; stroke-width: 1; filter: url(#wf-lift); transition: stroke .35s var(--ease); }
.wf .halo { fill: none; stroke: var(--blue-100); stroke-width: 4; opacity: 0; transition: opacity .35s var(--ease); }
.wf .node.lit .halo { opacity: 1; }
.wf .node.lit .nc { stroke: var(--blue); }
.wf .chip { fill: var(--blue-50); transition: fill .35s var(--ease); }
.wf .chip.violet { fill: var(--violet-50); }
.wf .chip.teal { fill: var(--teal-50); }
.wf .chip.slate { fill: #f2f4f7; }
.wf .ic { color: var(--blue); transition: color .35s var(--ease); }
.wf .ic.violet { color: var(--violet); }
.wf .ic.teal { color: var(--teal); }
.wf .ic.slate { color: var(--ink-3); }
.wf .node.lit .chip { fill: var(--blue); }
.wf .node.lit .chip.violet { fill: var(--violet); }
.wf .node.lit .chip.teal { fill: var(--teal); }
.wf .node.lit .chip.slate { fill: var(--ink-3); }
.wf .node.lit .ic { color: #fff; }
.wf .t { font-size: 15px; font-weight: 700; letter-spacing: -.01em; fill: var(--ink); }
.wf .s { font-size: 12px; font-weight: 500; fill: var(--ink-3); }
.wf .hr { fill: none; stroke: #eceff3; stroke-width: 1; }
.wf .ri { color: var(--ink-3); }
.wf .r { font-size: 11.5px; font-weight: 600; fill: var(--ink-2); }
.wf .r .pq { font-weight: 700; letter-spacing: .02em; fill: var(--quadra); }
.wf .n { font: 600 11px ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: .06em; fill: #8b96a2; text-anchor: end; }
.wf .gate .gp { fill: var(--navy); filter: url(#wf-lift); }
.wf .gate .dia { fill: none; stroke: var(--spark); stroke-width: 2; stroke-linejoin: round; }
.wf .gate .gt { font-size: 13px; font-weight: 700; fill: #fff; }
.wf .gate .halo { stroke: var(--spark); stroke-width: 3; }
.wf .tag { transition: opacity .6s var(--ease) .6s; }
.wf .tag rect { stroke-width: 1; }
.wf .tag text { font-size: 11.5px; font-weight: 700; }
.wf .tag.ok rect { fill: var(--green-50); stroke: #bcdcc8; }
.wf .tag.ok text { fill: var(--green-700); }
.wf .tag.no rect { fill: var(--red-50); stroke: #efc6c0; }
.wf .tag.no text { fill: var(--red-700); }
.wf .tag .ret { fill: none; stroke: var(--red-700); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* The phases chained after it, as cards; the phase drawn above takes the spark. */
.phases { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 18px 0 0; padding: 0; list-style: none; }
.phases li { position: relative; flex: 1 1 180px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #e1e5eb; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0, 31, 63, .04); }
.phases b { display: inline-grid; place-items: center; min-width: 36px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--navy); font-size: 12px; }
.phases li + li::before { content: ''; position: absolute; left: -25px; top: 50%; width: 19px; height: 1.5px; background: #a7b0bb; }
.phases li + li::after { content: ''; position: absolute; left: -11px; top: 50%; width: 6px; height: 6px; margin-top: -3.5px; border-top: 1.5px solid #a7b0bb; border-right: 1.5px solid #a7b0bb; transform: rotate(45deg); }
.phases li > span { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.phases small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.phases li.on { border-color: var(--spark-600); background: var(--spark-50); box-shadow: 0 0 0 3px rgba(219, 230, 76, .35); }
.phases li.on small { color: var(--ink-2); }
.phases li.more { align-items: center; border: 0; background: none; box-shadow: none; font-size: 14px; color: var(--ink-2); }
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 26px; }
.steps4 .card { padding: 22px; }
.steps4 .card h3 { font-size: 17px; margin: 12px 0 6px; }
.steps4 .card p { font-size: 14.5px; }

/* REGIA: the financial calendar as a timeline. Every position is a share of the year, so the
   zoom only widens the track. */
.tl-intro { max-width: 760px; margin: 72px 0 24px; }
.tl-intro h3 { margin-bottom: 10px; font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; }
.tl-intro p { font-size: 17px; }
.tl { margin: 0; padding: 22px; border-radius: 26px; background: var(--surface); border: 1px solid #e6eaef; box-shadow: var(--shadow); }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-size: 13.5px; color: var(--ink-3); }
.tl-head b { font-weight: 700; color: var(--ink); }
.tl-zoom { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--bg-2); }
.tl-zoom[hidden] { display: none; }
.tl-zoom button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; font: 600 13px Inter, sans-serif; color: var(--ink-2); cursor: pointer; }
.tl-zoom button:hover { color: var(--ink); }
.tl-zoom button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 31, 63, .14); }
.tl-view { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 10px; }
.tl-track { position: relative; width: 100%; padding: 42px 0 4px; }
.tl-months span { position: absolute; top: 0; bottom: 0; padding-left: 6px; border-left: 1px solid var(--line); font-size: 11.5px; font-weight: 600; line-height: 18px; color: var(--ink-3); }
.tl-rows { position: relative; margin: 0; padding: 0; list-style: none; }
.tl-row { position: relative; height: 36px; }
.tl-band { position: absolute; top: 19px; height: 10px; border-radius: 5px; }
/* Closed cycles in a grey that keeps 3:1 against the white card (WCAG 1.4.11). */
.tl-band.closed { background: #7f8c9b; }
.tl-band.open { background: var(--blue); }
.tl-band.planned { background: var(--blue-100); box-shadow: inset 0 0 0 1.5px var(--blue); }
.tl-band i { position: absolute; top: -3px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.tl-lab { position: absolute; top: 1px; z-index: 2; margin-left: -4px; padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 700; line-height: 16px; color: var(--ink); white-space: nowrap; }
.tl-lab.end { margin: 0 -4px 0 0; }
.tl-lab small { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.tl-row.tl-marks { height: 52px; }
.tl-mk { position: absolute; top: 20px; width: 12px; height: 12px; margin-left: -6px; }
.tl-mk::before { content: ''; position: absolute; inset: 0; }
.tl-mk.meet::before { border-radius: 2px; background: var(--navy); transform: rotate(45deg) scale(.8); }
.tl-mk.pub::before { border: 2.5px solid var(--blue); border-radius: 50%; background: #fff; }
/* Zoomed in, the markers get their names: meetings above, publications below, so neighbours
   do not collide. */
.tl-mk em { display: none; position: absolute; left: 16px; font-size: 11.5px; font-style: normal; font-weight: 600; line-height: 14px; color: var(--ink-2); white-space: nowrap; }
.tl-mk.meet em { top: -15px; }
.tl-mk.pub em { top: 13px; }
.tl:not([data-z="1"]) .tl-mk em { display: block; }
.tl-today { position: absolute; top: 20px; bottom: 0; z-index: 1; width: 2px; margin-left: -1px; background: var(--navy); }
.tl-today span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 0 7px; border-radius: 6px; background: var(--spark); font: 700 11px/18px Inter, sans-serif; color: var(--ink); white-space: nowrap; }
.tl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.tl-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.tl-legend .synth { margin: 0 0 0 auto; }
.lg { display: inline-block; width: 18px; height: 8px; border-radius: 4px; }
.lg.closed { background: #7f8c9b; }
.lg.open { background: var(--blue); }
.lg.planned { background: var(--blue-100); box-shadow: inset 0 0 0 1.5px var(--blue); }
.lg.dl { width: 2px; height: 14px; border-radius: 1px; background: var(--ink); }
.lg.meet { width: 9px; height: 9px; border-radius: 2px; background: var(--navy); transform: rotate(45deg); }
.lg.pub { width: 11px; height: 11px; border: 2.5px solid var(--blue); border-radius: 50%; }
.regia-more { margin-top: 22px; }

/* Grip */
/* The examples on the left and the four cards on the right end level: the cards stretch to the
   last example, or the examples spread out to the foot of the cards, whichever is taller. The
   note on the examples sits under them (under the cards too when the columns stack). */
.grip-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "says cards" "note ."; gap: 0 22px; align-items: stretch; }
.grip-says { grid-area: says; display: flex; flex-direction: column; }
#grip-feed { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.grip-cards { grid-area: cards; display: flex; }
.grip-cards .cards2 { flex: 1; grid-auto-rows: 1fr; }
.grip-grid > .synth { grid-area: note; }
#grip-feed .say:last-child { margin-bottom: 0; }
.say { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 12px; border: 1px solid #e6eaef; }
.say p { color: var(--ink); font-weight: 500; font-size: 15px; }
.say .acts { display: flex; gap: 6px; margin-top: 8px; }
.say .acts span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: var(--blue-50); color: var(--blue-600); }
.say .acts span.p { background: var(--blue-600); color: #fff; }
.say .where { font: 600 11px ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.grip-grid > .synth { margin-top: 12px; }

/* trust */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trust .card h3 { font-size: 18px; }
/* security and compliance, under the trust cards: how production is built, the providers' certificates, what is planned */
.assure { margin-top: 18px; padding: 30px 32px 32px; background: var(--surface); border: 1px solid #e6eaef; border-radius: 24px; box-shadow: var(--shadow); }
.assure-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin-bottom: 22px; }
.assure-head h3 { font-size: 22px; font-weight: 700; margin: 0; }
.assure-head p { margin: 0; flex: 1 1 420px; font-size: 15.5px; color: var(--ink-3); }
.assure-cols { display: grid; grid-template-columns: 1fr 1.15fr .85fr; gap: 0 36px; }
.assure-cols > div + div { border-left: 1px solid var(--line); padding-left: 36px; }
.assure h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.assure h4 svg { width: 16px; height: 16px; color: var(--blue); }
.assure ul { list-style: none; margin: 0; padding: 0; }
.assure li { position: relative; padding: 7px 0 7px 16px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); border-top: 1px solid var(--line); }
.assure li:first-child { border-top: 0; padding-top: 0; }
.assure li::before { content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.assure li:first-child::before { top: 8px; }
.assure li b { display: block; font-weight: 600; color: var(--ink); }
.assure .note { margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }

/* pricing: a row per product, the product on the left and its plans beside it */
.price-row { display: grid; grid-template-columns: 250px repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; padding: 30px 0; border-top: 1px solid #dcdfcc; }
.pr-id { display: flex; flex-direction: column; gap: 12px; padding-right: 8px; }
.pr-id .lockup h3 { font-size: 22px; }
.pr-id p { font-size: 14.5px; }
.pr-id p b { color: var(--ink); }
.pr-id .btn { align-self: flex-start; margin-top: auto; }
.plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 18px 22px; border-radius: 20px; background: #fff; border: 1px solid #e4e8ee; box-shadow: var(--shadow); }
.plan.pilot { border: 2px solid var(--blue); }
.plan .badge { position: absolute; top: -11px; left: 16px; padding: 3px 9px; border-radius: 999px; background: var(--blue-600); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.plan h4 { margin: 0; font: 700 17px Jakarta, sans-serif; color: var(--ink); }
.plan .price { font: 800 26px/1.15 Jakarta, sans-serif; letter-spacing: -.02em; color: var(--ink); }
.plan .price small { margin-right: 5px; font: 600 14px Inter, sans-serif; letter-spacing: 0; color: var(--ink-3); }
.plan .cad { margin-top: -6px; font-size: 13px; color: var(--ink-3); }
.plan ul { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.plan li { display: flex; gap: 8px; }
.plan li svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--blue); }
.plan.note { background: transparent; border: 1.5px dashed #c2c9d3; box-shadow: none; }
.plan.note p { font-size: 13.5px; }
.pricing-notes { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin: 12px 0 0; }
.credits td { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.credits td:last-child { text-align: right; font-weight: 700; color: var(--ink); }
.credits { width: 100%; border-collapse: collapse; }
.estimator label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin: 16px 0 8px; }
.estimator label span { float: right; color: var(--blue-600); font-variant-numeric: tabular-nums; }
.estimator input[type=range] { width: 100%; accent-color: var(--blue); }
.estimate { margin-top: 18px; padding: 16px; border-radius: 16px; background: var(--blue-50); color: var(--ink); }
.estimate b { font: 800 26px Jakarta, sans-serif; display: block; }

/* faq */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; list-style: none; font: 600 18px Jakarta, sans-serif; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 26px Inter, sans-serif; color: var(--blue); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 10px; font-size: 16px; max-width: 70ch; }

/* vision, mission and promise, then the call to a pilot */
.vmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-bottom: 72px; }
.vmp p { margin-top: 16px; font: 600 19px/1.5 Jakarta, sans-serif; letter-spacing: -.01em; color: var(--ink); }

/* cta and footer */
.cta-band { background: radial-gradient(900px 400px at 20% 0%, #1e488f 0%, #0a2d55 45%, var(--navy) 100%); border-radius: 32px; padding: 64px; color: #d3dbe4; display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; box-shadow: 0 40px 80px rgba(0, 31, 63, .25); }
.cta-band h2 { color: #fff; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; font-weight: 800; }
.cta-band .btn.white { background: var(--spark); color: var(--ink); }
.cta-band .btn.line { border-color: rgba(255, 255, 255, .5); color: #fff; }
.cta-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
footer.site { padding: 60px 0 40px; font-size: 14.5px; color: var(--ink-3); }
footer.site .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
footer.site h4 { font: 600 12px ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
footer.site a { display: block; text-decoration: none; margin: 6px 0; color: var(--ink-2); }
footer.site a:hover { color: var(--blue); }
footer.site a.brand { display: inline-flex; color: var(--ink); }
footer.site .legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; text-align: center; }
footer.site .legal p { margin: 0; }
footer.site a[aria-current] { color: var(--ink); }
/* The company line: non-breaking spaces in the markup keep each detail whole and tie every
   dot to the detail before it, so on a phone the line breaks only between details. */

/* Pages that load no script (privacy.html): nothing sets .scrolled, so the header stays in
   the flow with its line always drawn. */
.doc-page .site-header { position: static; border-bottom-color: var(--line); }

/* privacy statement: one readable column on the white page */
.policy { max-width: 68ch; margin: 0 auto; padding: 56px 0 104px; line-height: 1.75; overflow-wrap: break-word; }
.policy h1 { font-size: clamp(36px, 4.6vw, 52px); line-height: 1.08; font-weight: 800; }
.policy h2 { margin-top: 48px; font-size: 23px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.policy p, .policy ul { margin-top: 14px; }
.policy h2 + p, .policy h2 + ul { margin-top: 12px; }
.policy .updated { margin-top: 12px; font-size: 14.5px; color: var(--ink-3); }
.policy ul { padding-left: 1.3em; }
.policy li + li { margin-top: 8px; }
.policy li::marker { color: var(--ink-3); }
.policy strong { color: var(--ink); font-weight: 600; }
.policy a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.policy a:hover { color: var(--blue-600); text-decoration-thickness: 2px; }

/* reveal. The hidden starting states apply only once site.js has marked <html class="js">:
   without the script (blocked, failed, too old) or in print, everything stays visible. */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal:not(.in) { opacity: 0; transform: translateY(22px); }
.js .float:not(.show) { opacity: 0; transform: translateY(10px); }
.js .wf:not(.in) .edge { stroke-dashoffset: 1; opacity: 0; }
.js .wf:not(.in) .loop, .js .wf:not(.in) .tag { opacity: 0; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }
.d1 { --dl: .08s; } .d2 { --dl: .16s; } .d3 { --dl: .24s; } .d4 { --dl: .32s; }

/* ---------------------------------------------------------------------------------------------
   Finish: depth, texture and touch. Everything below keeps the colour rules above: green only for
   ties, the lime only on midnight or under midnight text, the header and the rail at .95 or more
   over the products section. It draws in CSS only, with data: images (allowed by the CSP).
   --------------------------------------------------------------------------------------------- */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  /* A fine grain in white on midnight, averaging under 3% cover, so no text pair above loses more
     than a hair of contrast. The light pages carry none since 16 October 2026: a clean white. */
  --grain-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .1 0 0 0 -.035'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ring: 0 0 0 1px rgba(0, 31, 63, .07);
  --lift: 0 1px 2px rgba(0, 31, 63, .04), 0 18px 40px -14px rgba(0, 31, 63, .18);
}
section.dark { background-image: var(--grain-l), radial-gradient(55% 60% at 88% 0%, rgba(42, 75, 215, .28), transparent 70%), radial-gradient(40% 45% at 0% 100%, rgba(30, 72, 143, .3), transparent 70%); background-size: 160px, auto, auto; }

/* Headings break into even lines; paragraphs avoid a lone last word. */
h1, h2, h3, .cta-band h2 { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
.hero h1, .sec-head h2, .cta-band h2 { letter-spacing: -.035em; }
section.page { padding: 120px 0 128px; }

/* The header runs the full width, square to the page. Clear over the hero; once the page scrolls
   it turns to frosted glass in the tone of the section under it (site.js sets .on-dark over the
   midnight sections) and settles lower. */
.site-header { background: transparent; backdrop-filter: none; transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out); }
.site-header > .wrap { transition: height .35s var(--ease-out); }
.site-header.scrolled { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: rgba(0, 31, 63, .08); }
.site-header.scrolled > .wrap { height: 62px; }
.site-header.on-dark { background: rgba(0, 24, 49, .74); border-bottom-color: rgba(255, 255, 255, .08); }
.site-header.on-dark .brand { color: #fff; }
.site-header.on-dark .brand .wm-grip { color: #9db8ef; }
.site-header.on-dark .nav a:not(.pn) { color: #b8c4d3; }
.site-header.on-dark .nav a:not(.pn):hover { color: #fff; }
.site-header.on-dark .nav a.pn.passo { --pc: var(--passo-d); }
.site-header.on-dark .nav a.pn.quadra { --pc: var(--quadra-d); }
.site-header.on-dark .nav a.pn.regia { --pc: var(--regia-d); }
.site-header.on-dark .btn.ghost, .site-header.on-dark .menu-btn { color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); border-color: transparent; }
.site-header.on-dark .btn.ghost:hover { background: rgba(255, 255, 255, .12); }
/* The name, and beside it after a hairline the words it stands for, small in capitals with the
   acronym's letters picked out; where the links need the room, the name alone. */
.site-header .brand > span { display: flex; align-items: center; line-height: 1; }
.site-header .brand small { margin: 0 0 0 14px; padding: 1px 0 1px 14px; border-left: 1px solid rgba(0, 31, 63, .16); font: 600 9.5px/1.5 Inter, sans-serif; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; color: var(--ink-3); }
.site-header .brand small b { font-weight: 800; }
.site-header.on-dark .brand small { border-left-color: rgba(255, 255, 255, .18); color: #93a3b8; }
.site-header.on-dark .brand small b { color: #9db8ef; }
.site-header.on-dark .brand small b.wm-fin { color: #fff; }
@media (min-width: 1001px) and (max-width: 1180px) { .site-header .brand small { display: none; } }
.doc-page .site-header { background: var(--bg); }
.nav a { transition: color .2s; }

/* Buttons: pill-shaped, pressed when clicked, the arrow in a disc of its own. */
.btn, .btn.small { border-radius: 999px; transition: transform .16s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s, border-color .2s; }
.btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 24px -8px rgba(30, 72, 143, .55); }
.btn.ghost { box-shadow: var(--ring), 0 1px 2px rgba(0, 31, 63, .05); border-color: transparent; }
.btn.primary > svg { box-sizing: content-box; width: 14px; height: 14px; margin-right: -12px; padding: 7px; border-radius: 50%; background: rgba(255, 255, 255, .16); transition: transform .25s var(--ease-out); }
.menu-btn { border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn.primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 16px 32px -10px rgba(30, 72, 143, .6); }
  .btn.ghost:hover { box-shadow: 0 0 0 1px rgba(0, 31, 63, .14), 0 8px 20px -10px rgba(0, 31, 63, .25); }
  .btn.primary:hover > svg { transform: translateX(2px); }
}
.btn:active { transform: scale(.97); }

/* Eyebrows become small capsules with a dot. */
.eyebrow { padding: 7px 13px 7px 11px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: var(--ring); font-size: 11.5px; }
.eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--blue-100); }
section.dark .eyebrow { background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
section.dark .eyebrow::before { background: var(--spark); box-shadow: 0 0 0 3px rgba(219, 230, 76, .18); }
.vmp .eyebrow { background: none; box-shadow: none; padding-left: 0; }

/* Hero: a soft light behind the card and a faint one behind the headline. */
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42% 55% at 80% 48%, rgba(42, 75, 215, .14), transparent 70%), radial-gradient(28% 35% at 6% 8%, rgba(219, 230, 76, .28), transparent 70%); }
.hero { padding: 84px 0 76px; }
.hero .wrap { z-index: 1; }

/* The demos sit in a tray: a light rim and a hairline round each, as glass in a frame. */
.doc-card, .pdemo { border-color: transparent; box-shadow: 0 0 0 7px rgba(255, 255, 255, .6), 0 0 0 8px rgba(0, 31, 63, .06), inset 0 1px 0 #fff, var(--shadow-lg); }
.wf, .tl, .legend { border-color: transparent; box-shadow: 0 0 0 7px rgba(255, 255, 255, .6), 0 0 0 8px rgba(0, 31, 63, .06), inset 0 1px 0 #fff, var(--lift); }
.record { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }

/* Product cards on midnight: a lit top edge, and a soft light under the pointer (site.js). The
   chevrons between the cards sit outside them, so the light keeps to the card by its radius. */
.prod { background: linear-gradient(180deg, #0c2e53, #0a2a4d 45%); border-color: #1d3f66; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 50px -24px rgba(0, 0, 0, .5); transition: border-color .3s var(--ease-out); }
.prod > * { position: relative; z-index: 1; }
.prod::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(219, 230, 76, .07), transparent 65%); opacity: 0; transition: opacity .35s var(--ease-out); pointer-events: none; }
.prod:hover { border-color: #2c5482; }
.prod:hover::after { opacity: 1; }

/* Cards: a hairline ring instead of a border, a lit top edge, and a lift on hover. The lift
   uses translate, so it never fights the reveal's transform. */
.card, .plan, .say, .phases li { border-color: transparent; box-shadow: var(--ring), inset 0 1px 0 #fff, 0 1px 2px rgba(0, 31, 63, .04), 0 12px 30px -16px rgba(0, 31, 63, .16); }
.card, .card.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease), translate .35s var(--ease-out), box-shadow .35s var(--ease-out); transition-delay: var(--dl, 0s), var(--dl, 0s), var(--dl, 0s), 0s, 0s; }
.plan { transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .card:hover, .plan:hover { translate: 0 -3px; box-shadow: 0 0 0 1px rgba(0, 31, 63, .1), inset 0 1px 0 #fff, var(--lift); }
}
.ibox { background: linear-gradient(150deg, #fff, var(--blue-50) 70%); box-shadow: inset 0 0 0 1px var(--blue-100), 0 4px 10px -4px rgba(30, 72, 143, .25); }
.plan { border-radius: 22px; }
.plan.pilot { border: 2px solid var(--blue); box-shadow: 0 0 0 5px var(--blue-50), 0 22px 44px -18px rgba(30, 72, 143, .4); }
.plan.note { box-shadow: none; border-color: #c2c9d3; }
.plan .badge { border-radius: 8px; }
.phases li.on { box-shadow: 0 0 0 3px rgba(219, 230, 76, .35); }

/* Trust as a bento: four columns, the first and fifth cards twice as wide, the first on
   midnight. */
@media (min-width: 1001px) {
  .trust { grid-template-columns: repeat(4, 1fr); }
  .trust .card:first-child, .trust .card:nth-child(5) { grid-column: span 2; }
}
.trust .card:first-child { background: var(--grain-l), radial-gradient(70% 90% at 100% 0%, rgba(42, 75, 215, .35), transparent 70%), var(--navy); background-size: 160px, auto, auto; box-shadow: 0 24px 50px -24px rgba(0, 31, 63, .55); }
.trust .card:first-child h3 { color: #fff; }
.trust .card:first-child p { color: #c9d3df; }
.trust .card:first-child .ibox { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: var(--spark); }

/* FAQ: the heading holds its place on the left while the questions run on the right. */
@media (min-width: 1001px) {
  #faq .wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 72px; align-items: start; }
  #faq .sec-head { position: sticky; top: 112px; margin-bottom: 0; }
}
.faq details { padding: 20px 0; }
.faq summary { transition: color .2s; }
.faq summary:hover { color: var(--blue); }
.faq summary::after { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-50); font-size: 22px; line-height: 1; transition: transform .3s var(--ease-out), background-color .2s, color .2s; }
.faq details[open] summary::after { background: var(--blue); color: #fff; }
.faq details[open] p { animation: faq-in .35s var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }

/* More midnight (Andrea, 16 October 2026): Grip and the FAQ join the products on midnight. Their
   cards turn to the product cards' glass, Grip's actions to the lime, and the FAQ's lines, signs
   and hover to their light forms. Product names take their lighter tones, as on any midnight. */
section.dark .synth { color: #8b9bb0; }
section.dark .say, section.dark .card { background: linear-gradient(180deg, #0c2e53, #0a2a4d 60%); border-color: #1d3f66; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -22px rgba(0, 0, 0, .55); }
section.dark .say p { color: #eef2f6; }
section.dark .say .where { color: #8b9bb0; }
section.dark .say .acts span { background: rgba(255, 255, 255, .08); color: #dde3ea; }
section.dark .say .acts span.p { background: var(--spark); color: var(--navy); }
section.dark .grip { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 6px 16px rgba(0, 0, 0, .35); }
section.dark .card h3 { color: #fff; }
section.dark .card p { color: #c9d3df; }
section.dark .ibox { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: var(--spark); }
@media (hover: hover) and (pointer: fine) {
  section.dark .card:hover { box-shadow: 0 0 0 1px #2c5482, inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 50px -24px rgba(0, 0, 0, .6); }
}
section.dark .faq details { border-bottom-color: rgba(255, 255, 255, .12); }
section.dark .faq summary { color: #fff; }
section.dark .faq summary:hover { color: var(--spark); }
section.dark .faq summary::after { background: rgba(255, 255, 255, .08); color: #fff; }
section.dark .faq details[open] summary::after { background: var(--spark); color: var(--navy); }

/* The pilot band: grain and a second light. */
.cta-band { background: var(--grain-l), radial-gradient(500px 300px at 95% 110%, rgba(219, 230, 76, .14), transparent 70%), radial-gradient(900px 400px at 20% 0%, #1e488f 0%, #0a2d55 45%, var(--navy) 100%); background-size: 160px, auto, auto; box-shadow: 0 0 0 8px rgba(255, 255, 255, .5), 0 0 0 9px rgba(0, 31, 63, .06), 0 40px 80px -20px rgba(0, 31, 63, .35); }
@media (hover: hover) and (pointer: fine) {
  .cta-band .btn.white:hover { box-shadow: 0 12px 28px -10px rgba(219, 230, 76, .6); }
}

/* Reveals arrive slightly out of focus and sharpen as they settle. */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.js .reveal:not(.in) { filter: blur(4px); }
/* The products arrive one by one from the left, each with the chevron before it, in the
   order they build on each other; stacked, each as it scrolls into view. */
.family .prod.reveal { transition-property: opacity, transform, filter, border-color; transition-duration: .9s, .9s, .9s, .3s; transition-timing-function: var(--ease-out); transition-delay: var(--seq, 0s), var(--seq, 0s), var(--seq, 0s), 0s; }
.js .family .prod.reveal:not(.in) { transform: translateX(-36px); }
.family .prod:nth-child(2) { --seq: .3s; }
.family .prod:nth-child(3) { --seq: .6s; }
.family .prod:nth-child(4) { --seq: .9s; }
@media (max-width: 1000px) {
  .family .prod { --seq: 0s !important; }
  .js .family .prod.reveal:not(.in) { transform: translateY(22px); }
}

/* Up to the widest content column the plans of a product sit in one row under its name. */
@media (max-width: 1180px) {
  .price-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pr-id { grid-column: 1 / -1; padding-right: 0; }
  .pr-id p { max-width: 70ch; }
  .pr-id .btn { margin-top: 0; }
}
@media (max-width: 1000px) {
  .hero .wrap, .grip-grid, .pricing-notes, .cta-band, .passo-grid, .family, .family-notes, .vmp { grid-template-columns: 1fr; }
  /* The products stack; the chevron between them points down. */
  .prod + .prod::before { left: 50%; top: -17px; transform: translateX(-50%) rotate(135deg); }
  .grip-grid { grid-template-areas: "says" "note" "cards"; row-gap: 22px; }
  .grip-grid > .synth { margin-top: -10px; }
  .grip-cards .cards2 { grid-auto-rows: auto; }
  .cards3 { grid-template-columns: 1fr 1fr; }
  .trust, .steps4, .price-row, .legend dl { grid-template-columns: 1fr 1fr; }
  .assure-cols { grid-template-columns: 1fr; gap: 26px 0; }
  .assure-cols > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
  .assure { padding: 24px 22px; }
  .family-notes { gap: 12px; }
  .vmp { gap: 24px; margin-bottom: 56px; }
  /* The section links move into the menu panel. */
  .nav { display: none; }
  .js .menu-btn, .nav-js .menu-btn { display: grid; }
  .nav-menu:not([hidden]) { display: block; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  /* The diagram keeps a readable size and scrolls sideways inside its band. */
  .wf-scroll { overflow-x: auto; }
  .wf svg { min-width: 1000px; }
  /* The phases stack, without the arrows between them. */
  .phases { flex-direction: column; gap: 8px; }
  .phases li { flex: none; }
  .phases li + li::before, .phases li + li::after { display: none; }
  .cta-acts { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  section.page { padding: 72px 0; }
  .cards3, .cards2, .trust, .steps4, .qgrid, .price-row, .legend dl, .family { grid-template-columns: 1fr; }
  /* Each name above its value, so every value still fits one line. */
  .rec-list div { grid-template-columns: 1fr; gap: 0; }
  .wf { padding: 16px; }
  .wf-scroll { padding: 10px; }
  .head-cta .btn.ghost { display: none; }
  .site-header .brand small { display: none; }
  footer.site .cols > :first-child { grid-column: 1 / -1; }
  /* The source keeps to the figure's side of the card (site.js sets .flip when the figure sits
     in the left half), and the notification steps down towards the middle. */
  .doc-card { margin: 0; padding: 20px 18px; }
  .hero-stage { padding: 0 0 calc(var(--src-h, 124px) + var(--note-h, 94px) + 70px); }
  .float.src { right: 0; top: calc(100% + 34px); width: min(236px, 66%); }
  .float.note { right: 36px; top: calc(100% + 58px + var(--src-h, 124px)); width: min(250px, 72%); }
  .hero-stage.flip .float.src { right: auto; left: 0; }
  .hero-stage.flip .float.note { right: auto; left: 36px; }
  .cta-band { padding: 36px 24px; }
  .prod, .pdemo, .legend, .tl { padding: 20px 16px; }
  .lockup.big .lockup-name { font-size: 26px; }
  .lockup.big .pt { width: 52px; height: 52px; }
  /* The whole year on a phone: short month names, cycle codes without their descriptions on
     screen. Screen readers still hear the dates and the status. */
  .tl[data-z="1"] .tl-lab small { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .tl[data-z="1"] .tl-months span { padding-left: 3px; font-size: 10.5px; }
  .tl-legend .synth { margin-left: 0; }
  .policy { padding: 32px 0 72px; }
  .policy h2 { margin-top: 40px; font-size: 21px; }
}
/* The smallest phones: the brand, Book a demo and the menu button still fit on one line. */
@media (max-width: 400px) {
  .site-header > .wrap { gap: 12px; }
  .head-cta { gap: 8px; }
  .head-cta .btn.small { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Delays go too, so nothing waits to appear. */
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; }
  .js .reveal:not(.in) { opacity: 1; transform: none; filter: none; }
  .wf .flow { display: none; }
}
@media print {
  .reveal, .float, #grip-feed .say { opacity: 1 !important; transform: none !important; filter: none !important; }
  .wf .edge { stroke-dashoffset: 0 !important; }
  .wf .edge, .wf .loop, .wf .tag { opacity: 1 !important; }
  .wf .flow { display: none; }
  .trail path { stroke-dashoffset: 0 !important; }
  .motion-toggle, .skip, .menu-btn, .nav-menu, .rail, .tl-zoom { display: none !important; }
  .tl-view { overflow: visible; }
}

/* PDF files have their badge, as the other formats do. */
.file-dot.pdf { background: linear-gradient(135deg, #a8262f, #c32f3a); }

/* QUADRA's tie map: one figure in four files, each linked to the workbook cell it comes from, one
   by one (site.js measures the places and draws the links). A link that ties is green, the one
   that does not is red; the files' outcomes and the count show as each link lands. */
.tmap { position: relative; margin: 0; padding: 24px 26px 28px; border-radius: 26px; color: #c9d3df; background: var(--grain-l), radial-gradient(60% 70% at 100% 0%, rgba(42, 75, 215, .22), transparent 70%), linear-gradient(180deg, #0c2e53, #0a2a4d 55%); background-size: 160px, auto, auto; border: 1px solid #1d3f66; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--shadow-lg); }
.tm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.tm-k { display: inline-flex; align-items: center; gap: 10px; font: 600 11.5px/1 ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8b9bb0; }
.tm-k .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 0 4px rgba(219, 230, 76, .18); }
.tm-sum { padding: 6px 12px; border-radius: 999px; font-size: 13px; color: #dde3ea; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.tm-sum b { color: #fff; }
.tm-sum span { margin: 0 2px; color: #5c7090; }
.tm-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 120px; align-items: center; }
.tm-docs { display: grid; gap: 12px; }
.tm-doc, .tm-book { position: relative; z-index: 1; border-radius: 14px; background: #ffffff; color: var(--ink-2); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 28px -14px rgba(0, 0, 0, .55); }
.tm-doc { padding: 12px 14px; transition: box-shadow .35s var(--ease-out), opacity .35s var(--ease-out); }
.tm-doc.on { box-shadow: 0 0 0 2px var(--spark), 0 12px 28px -14px rgba(0, 0, 0, .55); }
.tm-file { margin-bottom: 8px; font-size: 12.5px; color: var(--ink-3); }
.tm-file b { color: var(--ink); font-weight: 600; }
.tm-file .file-dot { width: 22px; height: 22px; border-radius: 6px; font-size: 7.5px; margin-right: 7px; }
.tm-fig { padding: 0 4px; border-radius: 5px; font-weight: 700; color: var(--ink); background: var(--spark-50); box-shadow: inset 0 0 0 1px rgba(196, 207, 54, .55); transition: background-color .3s, box-shadow .3s, color .3s; }
.tm-doc[data-out="t"].done .tm-fig { background: var(--green-50); box-shadow: inset 0 0 0 1px rgba(15, 122, 74, .35); color: var(--green-700); }
.tm-doc[data-out="m"].done .tm-fig { background: var(--red-50); box-shadow: inset 0 0 0 1px rgba(184, 50, 42, .4); color: var(--red-700); }
.tm-tab { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tm-tab th, .tm-tab td { padding: 3px 0; text-align: right; font-weight: 500; }
.tm-tab th:first-child { text-align: left; color: var(--ink); }
.tm-tab thead th { font-size: 11px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.tm-line { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.tm-kpi { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 14px; }
.tm-kpi span:first-child { grid-row: span 2; font-size: 12.5px; color: var(--ink-3); }
.tm-kpi .tm-fig { justify-self: start; font: 800 24px/1.1 Jakarta, sans-serif; letter-spacing: -.02em; padding: 0 6px; }
.tm-kpi small { font-size: 11px; color: var(--ink-3); }
.tm-chart { display: flex; align-items: flex-end; gap: 10px; height: 54px; padding: 0 2px; border-bottom: 1px solid var(--line); }
.tm-chart span { position: relative; width: 38px; height: calc(var(--h) * 54px); border-radius: 4px 4px 0 0; background: #c9d3df; }
.tm-chart span.on { background: var(--blue); }
.tm-chart i { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); font: 600 11px/1 Inter, sans-serif; font-style: normal; white-space: nowrap; color: var(--ink-3); }
.tm-chart i.tm-fig { color: var(--ink); padding: 1px 4px; }
.tm-chart-k { margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
.tm-out { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; font-weight: 600; transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.tm-out .oc { min-width: 24px; height: 20px; font-size: 11px; border-radius: 6px; }
.tm-doc[data-out="t"] .tm-out { color: var(--green-700); }
.tm-doc[data-out="m"] .tm-out { color: var(--red-700); }
.tm-book { padding: 14px 14px 12px; background: #fff; }
.tm-sheet { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tm-sheet th { padding: 4px 6px; font: 600 10.5px/1 ui-monospace, 'SF Mono', Consolas, monospace; color: #56657a; background: #f4f6f9; border: 1px solid #e1e5eb; }
.tm-sheet td { padding: 6px 8px; text-align: right; border: 1px solid #e9edf1; color: var(--ink-2); white-space: nowrap; }
.tm-sheet td:nth-child(2) { text-align: left; color: var(--ink); }
.tm-sheet td.h { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.tm-sheet tr.on td { background: #fbfcef; }
.tm-cell { position: relative; font-weight: 700; color: var(--ink) !important; box-shadow: inset 0 0 0 2px var(--spark-600); }
.tm-cell.hit { animation: tm-hit .6s var(--ease-out); }
@keyframes tm-hit { 0% { box-shadow: inset 0 0 0 2px var(--spark-600), 0 0 0 0 rgba(219, 230, 76, .7); } 100% { box-shadow: inset 0 0 0 2px var(--spark-600), 0 0 0 12px rgba(219, 230, 76, 0); } }
.tm-ref { margin-top: 10px; font: 500 11.5px/1.3 ui-monospace, 'SF Mono', Consolas, monospace; color: var(--ink-3); }
.tm-links { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tm-link { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease-out); }
.tm-link.t { stroke: #5fd39a; filter: drop-shadow(0 0 5px rgba(95, 211, 154, .55)); }
.tm-link.m { stroke: #ff7a6b; filter: drop-shadow(0 0 5px rgba(255, 122, 107, .6)); }
.tm-link.drawn { stroke-dashoffset: 0; }
.tm-end { opacity: 0; transition: opacity .3s; }
.tm-end.t { fill: #5fd39a; }
.tm-end.m { fill: #ff7a6b; }
.tm-end.drawn { opacity: 1; }
/* Before each link lands, its file's outcome and the count wait (only with script: without it,
   or with reduced motion, everything shows at once). */
.js .tmap.run .tm-doc:not(.done) .tm-out { opacity: 0; transform: translateY(4px); }
.js .tmap.run .tm-doc:not(.on):not(.done) { opacity: .62; }
.js .tmap.run:not(.end) .tm-sum { opacity: 0; transform: translateY(-4px); }
@media (max-width: 900px) {
  .tm-stage { grid-template-columns: 1fr; gap: 16px; }
  .tm-links { display: none; }
}

/* PASSO's Markdown: the page of a report, and the Markdown read from it wiped over it by a scan line,
   then back, on a loop while the block is in view. */
.mdw { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; margin-top: 112px; }
.mdw-text h3 { margin: 14px 0 14px; font-size: 30px; line-height: 1.18; letter-spacing: -.03em; }
.mdw-text p { color: var(--ink-2); }
.mdw-fig { margin: 0; }
.mdw-tags { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mdw-tag { padding: 6px 12px; border-radius: 999px; font: 600 11.5px/1 ui-monospace, 'SF Mono', Consolas, monospace; color: #fff; background: var(--ink-2); }
.mdw-tag.md { background: var(--passo); }
/* Each chip lights up while its side shows: the PDF's while the page does, the Markdown's while the Markdown does. */
.mdw-tag { transition: opacity .3s, transform .3s, box-shadow .3s; }
.js .mdw.in .mdw-tag { animation: mdw-tag-pdf 9s var(--ease) infinite; }
.js .mdw.in .mdw-tag.md { animation-name: mdw-tag-md; }
.mdw-stage { position: relative; overflow: hidden; padding: 26px; border-radius: 22px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.mdw-page { max-width: 470px; margin: 0 auto; overflow: hidden; background: #fff; color: #2f3a28; font-family: Inter, sans-serif; box-shadow: 0 1px 2px rgba(0, 31, 63, .08), 0 18px 40px -16px rgba(0, 31, 63, .3); }
/* Veridia's own colours (olive and gold, as its organisation in the app) and a book serif for the title: a typeset report,
   not a text file. */
.pg-band { display: flex; justify-content: space-between; align-items: center; padding: 9px 22px; background: #2c4212; font: 600 7px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #dfe6cb; }
.pg-logo { display: inline-flex; align-items: center; gap: 7px; font: 800 10px/1 Jakarta, sans-serif; letter-spacing: .24em; color: #fff; }
.pg-logo i { width: 8px; height: 8px; background: linear-gradient(135deg, #c9a227, #e7c862); transform: rotate(45deg); }
.pg-tabs { display: flex; margin: 0; padding: 0 22px; list-style: none; border-bottom: 1px solid #e2e6d8; }
.pg-tabs li { flex: 1; padding: 6px 6px 5px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 6.2px; line-height: 1.25; color: #656e5d; }
.pg-tabs li b { display: block; margin-bottom: 1px; font-size: 7px; color: #656e5d; }
.pg-tabs li.on { font-weight: 600; color: #3f5a1e; border-bottom-color: #3f5a1e; }
.pg-tabs li.on b { color: #3f5a1e; }
.pg-body { padding: 16px 22px 8px; }
.pg-kicker { font: 600 6.8px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7a5f0e; }
.pg-h { margin-top: 7px; font: 400 19px/1.15 Georgia, 'Times New Roman', serif; color: #1f2b12; }
.pg-h::after { content: ''; display: block; width: 28px; height: 2px; margin-top: 8px; background: #c9a227; }
.pg-s { margin: 8px 0 12px; font-size: 7.8px; font-style: italic; color: #5f675a; }
.pg-t { width: 100%; border-collapse: collapse; font-size: 8.6px; font-variant-numeric: tabular-nums; }
.pg-t th, .pg-t td { padding: 3.5px 6px; text-align: right; font-weight: 400; border-bottom: 1px dotted #dde2d2; }
.pg-t th:first-child { padding-left: 0; text-align: left; }
.pg-t thead th { padding-top: 5px; padding-bottom: 5px; font-size: 7.8px; font-weight: 700; color: #3f5a1e; border-bottom: 1.5px solid #3f5a1e; }
.pg-t thead th.cy { color: #fff; background: #3f5a1e; }
.pg-t td:nth-child(2) { font-size: 7.6px; color: #656e5d; }
.pg-t td.cy { font-weight: 600; color: #1f2b12; background: #f1f4e6; }
.pg-t td:last-child { color: #6f786a; }
.pg-t tr.ind th { padding-left: 10px; color: #4a5541; }
.pg-t tr.sum th, .pg-t tr.sum td { font-weight: 700; color: #1f2b12; border-top: 1px solid #8f9b7e; border-bottom: 1px solid #c8cfba; }
.pg-t tr.sum td.cy { background: #e6ecd2; }
.pg-t tr.total th, .pg-t tr.total td { padding-top: 5px; padding-bottom: 5px; font-weight: 700; color: #fff; background: #3f5a1e; border: 0; }
.pg-t tr.total th { padding-left: 6px; }
.pg-t tr.total td.cy { background: #33491a; }
.pg-t tr.eps th, .pg-t tr.eps td { padding-top: 7px; font-style: italic; border-bottom: 0; }
.pg-note { margin-top: 10px; font-size: 6.6px; font-style: italic; color: #616857; }
.pg-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 22px 12px; font-size: 6.6px; letter-spacing: .04em; color: #616857; }
.pg-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; font: 700 8px/1 Inter, sans-serif; color: #fff; background: #3f5a1e; }
.mdw-md { position: absolute; inset: 0; z-index: 1; padding: 22px 26px; background: var(--grain-l), linear-gradient(180deg, #0c2442, #081c33); background-size: 160px, auto; color: #dde3ea; }
.mdw-bar { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); font: 500 11.5px/1.2 ui-monospace, 'SF Mono', Consolas, monospace; color: #8b9bb0; }
.mdw-bar b { color: #fff; font-weight: 600; }
.mdw-md pre { margin: 0; overflow: hidden; font: 11.5px/1.62 ui-monospace, 'SF Mono', Consolas, monospace; white-space: pre; }
.mdw-md .t-h { color: #fff; font-weight: 700; }
.mdw-md .t-c { color: #7f8fa6; }
.mdw-md .t-p { color: #4f6585; }
.mdw-md .t-b { color: var(--passo-d); font-weight: 700; }
.mdw-scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.mdw-scan i { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--spark); box-shadow: 0 0 16px 4px rgba(219, 230, 76, .5); }
/* The loop runs once the block has come into view, and stops with the others. */
.js .mdw.in .mdw-md { animation: mdw-wipe 9s var(--ease) infinite; }
.js .mdw.in .mdw-scan { animation: mdw-scan 9s var(--ease) infinite; }
.motion-paused .mdw-md, .motion-paused .mdw-scan, .motion-paused .mdw-tag { animation-play-state: paused; }
@keyframes mdw-wipe { 0%, 12% { clip-path: inset(0 0 0 100%); } 40%, 74% { clip-path: inset(0 0 0 0); } 96%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes mdw-tag-pdf { 0%, 14% { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 4px rgba(51, 70, 94, .18), 0 8px 18px -6px rgba(51, 70, 94, .5); } 30%, 84% { opacity: .5; transform: none; box-shadow: none; } 98%, 100% { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 4px rgba(51, 70, 94, .18), 0 8px 18px -6px rgba(51, 70, 94, .5); } }
@keyframes mdw-tag-md { 0%, 26% { opacity: .5; transform: none; box-shadow: none; } 40%, 74% { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 4px rgba(91, 61, 176, .2), 0 8px 18px -6px rgba(91, 61, 176, .55); } 88%, 100% { opacity: .5; transform: none; box-shadow: none; } }
@keyframes mdw-scan { 0%, 11% { transform: translateX(100%); opacity: 0; } 12% { opacity: 1; } 40% { transform: translateX(0); opacity: 1; } 42%, 72% { transform: translateX(0); opacity: 0; } 74% { opacity: 1; } 96% { transform: translateX(100%); opacity: 1; } 98%, 100% { transform: translateX(100%); opacity: 0; } }
@media (max-width: 1000px) {
  .mdw { grid-template-columns: 1fr; gap: 28px; margin-top: 80px; }
}
@media (max-width: 640px) {
  .mdw-stage { padding: 14px; }
  .pg-body { padding: 12px 14px 6px; }
  .pg-band, .pg-tabs, .pg-foot { padding-left: 14px; padding-right: 14px; }
  .pg-tabs li { font-size: 5.4px; }
  .mdw-md { padding: 16px; }
  .mdw-md pre { font-size: 8.6px; }
  .mdw-text h3 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mdw.in .mdw-md, .js .mdw.in .mdw-scan, .js .mdw.in .mdw-tag { animation: none; }
  .tm-link, .tm-end, .tm-out, .tm-sum { transition: none; }
}

/* ---------------------------------------------------------------------------------------------
   After Workiva and LucaNet (Andrea, 14 October 2026): the products' bright colours as frames
   and caps, and links that redraw their line on hover. (The cream paper of that day gave way to
   a clean white with a cool tint on 16 October 2026: the tokens above.)
   --------------------------------------------------------------------------------------------- */
/* Bright product colours, for frames and blocks only: text keeps the darker tones above. */
:root {
  --passo-b: #7b5ce0;
  --quadra-b: #ee8a3c;
  --regia-b: #d24c9e;
}
/* Each product's demos sit in a frame of its colour. */
#passo-demo { --fc: var(--passo-b); }
#tie-map { --fc: var(--quadra-b); }
#wf, #timeline { --fc: var(--regia-b); }
#passo-demo, #tie-map, #wf, #timeline { border-color: transparent; box-shadow: 0 0 0 9px var(--fc), 0 36px 70px -26px rgba(0, 31, 63, .45); }
/* The product cards on midnight carry their colour as a cap, hover or not. */
.family .prod { border-top: 6px solid var(--fc); }
.family .prod:nth-child(1) { --fc: var(--passo-b); }
.family .prod:nth-child(2) { --fc: var(--quadra-b); }
.family .prod:nth-child(3) { --fc: var(--regia-b); }
.family .prod:hover { border-top-color: var(--fc); }

/* PASSO: the six points beside the demo keep within its height, the first level with its top
   and the last with its bottom. 14.5px text in the widest column, 13.5px where the two columns
   narrow (1001 to 1180px); stacked below that, as before. */
@media (min-width: 1001px) {
  #passo .feats { align-self: stretch; align-content: space-between; gap: 16px; }
  #passo .feat { grid-template-columns: 40px 1fr; gap: 14px; }
  #passo .feat .ibox { width: 40px; height: 40px; border-radius: 13px; }
  #passo .feat .ibox svg { width: 19px; height: 19px; }
  #passo .feat h3 { margin: 0 0 4px; font-size: 16.5px; }
  #passo .feat p { font-size: 14.5px; line-height: 1.5; }
}
@media (min-width: 1001px) and (max-width: 1180px) {
  #passo .feat h3 { font-size: 16px; }
  #passo .feat p { font-size: 13.5px; }
}

/* Links underlined at rest pull their line back to the right and draw it again from the left;
   .prod-link's line stops short of its arrow, which steps aside. The header's and the footer's
   links draw a line in from the left and pull it back to the right on leaving. */
.prod-link, main p a:not(.btn), .faq a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1.5px;
  padding-bottom: 3px;
}
.prod-link { background-size: calc(100% - 24px) 1.5px; }
.prod-link svg { transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  main p a:not(.btn):hover, .faq a:hover { animation: ul-redraw .75s var(--ease-out) both; }
  .prod-link:hover { animation: ul-redraw-arrow .75s var(--ease-out) both; }
  .prod-link:hover svg { transform: translateX(3px); }
}
@keyframes ul-redraw {
  0% { background-size: 100% 1.5px; background-position: right bottom; }
  42% { background-size: 0 1.5px; background-position: right bottom; }
  42.01% { background-size: 0 1.5px; background-position: left bottom; }
  100% { background-size: 100% 1.5px; background-position: left bottom; }
}
@keyframes ul-redraw-arrow {
  0% { background-size: calc(100% - 24px) 1.5px; background-position: left bottom; }
  42% { background-size: 0 1.5px; background-position: calc(100% - 24px) bottom; }
  42.01% { background-size: 0 1.5px; background-position: left bottom; }
  100% { background-size: calc(100% - 24px) 1.5px; background-position: left bottom; }
}
.nav a, footer.site .cols a:not(.brand) {
  text-decoration: none !important;
  background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1.5px;
  transition: color .2s, background-size .4s var(--ease-out);
}
.nav a { padding: 4px 0; }
footer.site .cols a:not(.brand) { width: fit-content; padding-bottom: 2px; }
.nav a:hover, footer.site .cols a:not(.brand):hover { background-size: 100% 1.5px; background-position: left bottom; }
@media (prefers-reduced-motion: reduce) {
  main p a:not(.btn):hover, .faq a:hover, .prod-link:hover { animation: none; }
}

/* The intro video (#intro) and the hero's link to it. Until the video is online, both carry
   data-video="soon" and show only in the preview build, which marks its pages data-draft
   (build-preview.mjs): fingrip.ai, and next/ served as it is, never show a video that is not
   there. In its place the block draws the video's opening frame, the margin typed in lime on
   midnight. */
html:not([data-draft]) [data-video="soon"] { display: none !important; }
.watch { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 4px; font: 600 15px Inter, sans-serif; color: var(--ink); text-decoration: none; }
.watch-dot { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--navy); color: var(--spark); box-shadow: 0 6px 16px rgba(0, 31, 63, .22); transition: transform .25s var(--ease-out); }
.watch-dot svg { width: 14px; height: 14px; margin-left: 2px; }
.watch-time { font-weight: 500; color: var(--ink-3); }
.watch:hover .watch-dot { transform: scale(1.08); }
section.page.intro { padding-top: 24px; }
.intro h2 .nb { font-style: normal; white-space: nowrap; }
.intro-video { margin: 0; }
.iv-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; background: var(--navy); box-shadow: 0 0 0 7px rgba(255, 255, 255, .6), 0 0 0 8px rgba(0, 31, 63, .08), var(--shadow-lg); }
.iv-screen video { display: block; width: 100%; height: 100%; background: var(--navy); }
.iv-soon { display: none; }
[data-video="soon"] .iv-screen video { display: none; }
[data-video="soon"] .iv-soon { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background-image: var(--grain-l), radial-gradient(55% 60% at 88% 0%, rgba(42, 75, 215, .28), transparent 70%), radial-gradient(40% 45% at 0% 100%, rgba(30, 72, 143, .3), transparent 70%); background-size: 160px, auto, auto; color: #c9d3df; }
.iv-open { display: grid; justify-items: center; gap: clamp(8px, 1.4vw, 16px); }
.iv-label { font: 600 clamp(11px, 1.2vw, 14px)/1 ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: #93a3b8; }
.iv-fig { display: inline-flex; align-items: center; gap: .06em; font: 800 clamp(52px, 9vw, 120px)/1 Jakarta, sans-serif; letter-spacing: -.03em; color: var(--spark); font-variant-numeric: tabular-nums; }
.iv-fig i { width: .055em; height: .78em; border-radius: 2px; background: var(--spark); opacity: .75; }
.iv-play { display: grid; place-items: center; width: clamp(44px, 5vw, 60px); height: clamp(44px, 5vw, 60px); margin-top: clamp(4px, 1vw, 12px); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .7); }
.iv-play svg { width: 42%; height: 42%; margin-left: 6%; }
.iv-state { position: absolute; left: 20px; bottom: 18px; display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: #c9d3df; }
.iv-state .pill { background: rgba(219, 230, 76, .14); color: var(--spark); }
.intro-video figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 20px; font-size: 14px; color: var(--ink-3); }
.intro-video figcaption b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  section.page.intro { padding-top: 8px; }
  .iv-screen { border-radius: 16px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .6), 0 0 0 6px rgba(0, 31, 63, .08), var(--shadow-lg); }
  .iv-state { left: 12px; bottom: 10px; font-size: 12.5px; }
  .iv-state .pill { height: 22px; font-size: 11.5px; }
  .iv-play { display: none; }
}

/* Measured results in the hero (Andrea, 30 October 2026): a belt under the hero's two columns,
   spanning the content from the left edge of the hero's text to the right edge of the content
   (on a phone, where the columns stack, the text column), running slowly to the left at about
   40px a second, its ends fading into the page. Two copies of the list run end to end,
   so the loop has no seam; screen readers hear only the first. It stands still under the pointer
   and while it holds keyboard focus. With Pause animations or reduced motion it is a still row
   that wraps, without the copy and the fades. Product names in their own tones. */
/* The belt's track is far wider than the column: the hero's columns may shrink below it. */
.hero .wrap > * { min-width: 0; }
.proof { --proof-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); grid-column: 1 / -1; position: relative; margin: 8px 0 0; padding: 14px 0; border-block: 1px solid var(--line); overflow: hidden; -webkit-mask-image: var(--proof-mask); mask-image: var(--proof-mask); }
.proof:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 0; }
.proof-track { display: flex; width: max-content; animation: proof-run 80s linear infinite; }
.proof:hover .proof-track, .proof:focus .proof-track, .proof:focus-within .proof-track { animation-play-state: paused; }
.proof-list { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.proof-list li { display: flex; align-items: baseline; gap: 10px; padding: 0 30px; border-left: 1px solid var(--line); white-space: nowrap; font-size: 14.5px; line-height: 1.35; color: var(--ink-2); }
.proof-p { align-self: center; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--pc) 35%, transparent); border-radius: 999px; font: 700 11px/1.2 Inter, sans-serif; letter-spacing: .06em; }
.proof-n { font: 800 22px/1 Jakarta, Inter, sans-serif; letter-spacing: -.02em; color: var(--ink); }
@keyframes proof-run { to { transform: translateX(-50%); } }
.motion-paused .proof { -webkit-mask-image: none; mask-image: none; }
.motion-paused .proof-track { width: auto; animation: none; }
.motion-paused .proof-list { flex: 1 1 auto; flex-wrap: wrap; gap: 10px 22px; }
.motion-paused .proof-list[aria-hidden] { display: none; }
.motion-paused .proof-list li { display: block; padding: 0; border-left: 0; white-space: normal; }
.motion-paused .proof-n { margin-right: 8px; }
.motion-paused .proof-p { margin-left: 8px; vertical-align: baseline; }
@media (prefers-reduced-motion: reduce) {
  .proof { -webkit-mask-image: none; mask-image: none; }
  .proof-track { width: auto; animation: none; }
  .proof-list { flex: 1 1 auto; flex-wrap: wrap; gap: 10px 22px; }
  .proof-list[aria-hidden] { display: none; }
  .proof-list li { display: block; padding: 0; border-left: 0; white-space: normal; }
  .proof-n { margin-right: 8px; }
  .proof-p { margin-left: 8px; vertical-align: baseline; }
}
@media (max-width: 640px) {
  .proof { margin-top: 22px; padding: 12px 0; }
  .proof-list li { gap: 8px; padding: 0 22px; font-size: 13.5px; }
  .proof-n { font-size: 19px; }
}
@media print {
  .proof { -webkit-mask-image: none; mask-image: none; }
  .proof-track { width: auto; animation: none; }
  .proof-list { flex-wrap: wrap; gap: 10px 28px; }
  .proof-list[aria-hidden] { display: none; }
  .proof-list li { display: block; padding: 0; border-left: 0; white-space: normal; }
  .proof-n { margin-right: 8px; }
  .proof-p { margin-left: 8px; }
}

/* Compared with disclosure management (#compare; Andrea, 11 November 2026). The products meant
   are named first, as a row of labels. The table sets the two side by side, a row per question:
   the question at the left, disclosure management on the page's cool grey, Fingrip on midnight,
   the two columns standing apart as two panels. Up to 760px the table stacks: each question
   becomes a heading over its two answers, each answer named by its data-h. The band under it
   says what stays with the disclosure tool and what Fingrip adds beside it; the note names the
   sources. */
.cmp-who { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; padding: 0; list-style: none; }
.cmp-who li { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--ring), 0 1px 2px rgba(0, 31, 63, .05); font-size: 14px; line-height: 1.3; color: var(--ink-3); }
.cmp-who b { font-weight: 600; color: var(--ink); }
/* The vendors' logos in the chips (Andrea, 11 November 2026), each at the height its shape reads at. */
.cmp-who li { align-items: center; }
.cmp-logo { display: block; flex: none; margin-right: 4px; }
.cmp { width: calc(100% + 28px); margin: 0 -14px; border-collapse: separate; border-spacing: 14px 0; table-layout: fixed; }
.cmp .c-k { width: 19%; }
.cmp th, .cmp td { text-align: left; vertical-align: top; }
.cmp thead th { padding: 24px 26px 20px; border-radius: 22px 22px 0 0; font: 700 20px/1.2 Jakarta, Inter, sans-serif; letter-spacing: -.02em; color: var(--ink); }
.cmp thead th small { display: block; margin-top: 6px; font: 500 13.5px/1.4 Inter, sans-serif; letter-spacing: 0; color: var(--ink-3); }
.cmp thead th.o, .cmp td.o { background: var(--bg-2); }
.cmp thead th.f, .cmp td.f { background: var(--navy); color: #c9d3df; }
.cmp thead th.f { color: #fff; }
.cmp thead th.f i { font-style: normal; color: #9db8ef; }
.cmp thead th.f small { color: #aeb9c6; }
.cmp tbody th { padding: 20px 0; border-top: 1px solid var(--line); font: 700 15.5px/1.35 Jakarta, Inter, sans-serif; letter-spacing: -.01em; color: var(--ink); }
.cmp td { padding: 20px 26px; border-top: 1px solid #dfe4eb; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.cmp td.f { border-top-color: rgba(255, 255, 255, .12); }
.cmp thead td { padding: 0; border: 0; }
.cmp td b { font-weight: 600; color: var(--ink); }
.cmp td.f b { color: #fff; }
.cmp td.f a { color: var(--spark); text-underline-offset: 3px; }
.cmp tbody tr:last-child td { border-radius: 0 0 22px 22px; padding-bottom: 26px; }
.cmp-both { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px 44px; align-items: start; margin-top: 44px; padding: 34px 38px; border-radius: 24px; background: var(--blue-50); }
.cmp-both h3 { font-size: 24px; line-height: 1.2; font-weight: 800; }
.cmp-both h3 span { color: var(--blue); }
.cmp-both p { font-size: 16.5px; }
.cmp-both p + p { margin-top: 12px; }
.cmp-note { max-width: 100ch; margin-top: 22px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 1000px) {
  .cmp .c-k { width: 22%; }
  .cmp thead th, .cmp td { padding-left: 18px; padding-right: 18px; }
  .cmp-both { grid-template-columns: 1fr; padding: 28px 26px; }
}
@media (max-width: 760px) {
  .cmp, .cmp tbody, .cmp tr, .cmp tbody th, .cmp td { display: block; }
  .cmp { width: 100%; margin: 0; }
  .cmp colgroup, .cmp thead { display: none; }
  .cmp tbody tr + tr { margin-top: 30px; }
  .cmp tbody th { padding: 0 0 10px; border: 0; font-size: 18px; }
  .cmp td, .cmp tbody tr:last-child td { padding: 16px 18px 18px; border: 0; border-radius: 16px; }
  .cmp td + td { margin-top: 8px; }
  .cmp td::before { content: attr(data-h); display: block; margin-bottom: 8px; font: 600 11.5px/1.2 ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  .cmp td.f::before { color: #9db8ef; }
  .cmp-both { margin-top: 34px; padding: 24px 20px; }
  .cmp-both h3 { font-size: 21px; }
}

/* Who the products are for (Andrea, 11 November 2026): a bracket over PASSO and QUADRA, which one
   person can use alone, and one over REGIA, which a team works in. The two labels follow the cards
   in the markup and are set in the row above them; stacked, each stands before its first card. */
.family { row-gap: 14px; }
.fam-who { position: relative; grid-row: 1; margin: 0; padding: 0 0 26px; text-align: center; font-size: 14.5px; line-height: 1.4; color: #aeb9c6; }
.fam-who.solo { grid-column: 1 / 3; }
.fam-who.team { grid-column: 3; }
.fam-who b { margin-right: 6px; font: 700 15.5px/1.4 Jakarta, Inter, sans-serif; letter-spacing: -.01em; color: #fff; }
/* The bracket: a stem down from the label, then a line that turns down to both ends of the cards. */
.fam-who::before { content: ''; position: absolute; left: calc(50% - 1px); bottom: 12px; width: 2px; height: 8px; background: #8ea6c6; }
.fam-who::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 12px; border: 2px solid #8ea6c6; border-bottom: 0; border-radius: 12px 12px 0 0; }
@media (max-width: 1000px) {
  .family { row-gap: 22px; }
  .fam-who { grid-row: auto; grid-column: 1 !important; padding: 0 0 0 14px; text-align: left; border-left: 2px solid #8ea6c6; }
  .fam-who::before, .fam-who::after { content: none; }
  .family .prod:nth-child(-n+2) { order: 1; }
  .fam-who.team { order: 2; margin-top: 10px; }
  /* REGIA's chevron moves up into the gap above its label (label 20px, gaps 22px and 32px). */
  .family .prod:nth-child(3)::before { top: -63px; }
  .family .prod:nth-child(n+3) { order: 3; }
}
/* On a phone a chip wraps under its logo, so it is a rounded box, not a pill. */
@media (max-width: 760px) { .cmp-who li { border-radius: 16px; row-gap: 4px; } }