/* ==========================================================================
   PayRoll Protect · sections.css (v3)
   Every state change crossfades a layer or moves it by transform. No property that
   triggers layout or repaints a large area is animated.
   ========================================================================== */

/* ============================== PRELOADER ============================== */
/* The PayRoll Protect shield drawing itself (index.html), on a first arrival only. On the canvas
   lit from above, over the faint grid, the mark is revealed along its own line as the page loads
   (the artwork as it is: nothing recoloured, outlined or lit), while the count and the step read
   along the foot over a thin emerald line. Verified, the shield settles, then flies into its place
   in the logo as the curtain lifts from the top and the hero comes up under it. Clip, transform
   and opacity only; it hides itself at 5 s whatever happens. */
.pl { display: none; }
.pl-on { overflow: hidden; scrollbar-gutter: stable; }
.pl-on .pl {
  --p: 0;
  --lift: cubic-bezier(0.76, 0, 0.24, 1);
  --mark-h: clamp(150px, 26vmin, 236px);
  position: fixed; inset: 0; z-index: 1000;
  display: block;
  color: #fff;
  animation: pl-gone 0.3s linear 5s forwards;
}
@keyframes pl-gone { to { opacity: 0; visibility: hidden; } }
.pl__bg { position: absolute; inset: 0; overflow: hidden; background: var(--canvas); clip-path: inset(0 0 0 0); }
.pl__bg::before, .pl__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.pl__bg::before {
  background:
    radial-gradient(ellipse 38% 34% at 50% -8%, rgba(11, 190, 93, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 52% at 50% 0%, rgba(14, 58, 33, 0.3), transparent 80%);
}
.pl__bg::after {
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 94px 94px; background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 34% 40% at 50% 50%, #000 15%, transparent 100%);
  mask-image: radial-gradient(ellipse 34% 40% at 50% 50%, #000 15%, transparent 100%);
}
/* The shield, a little above the middle. Placed by position, so its transform is free for the
   flight into the logo. */
.pl__mark {
  position: absolute; z-index: 1;
  left: calc(50% - var(--mark-h) * 734 / 900 / 2); top: calc(46% - var(--mark-h) / 2);
  width: calc(var(--mark-h) * 734 / 900); height: var(--mark-h);
  overflow: visible;
  transform-origin: 0 0;
}
.pl__ln { fill: none; stroke: #fff; stroke-width: 92; stroke-linejoin: miter; stroke-miterlimit: 10; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
/* Verified: the drawn shield settles once, a breath, before it goes. */
.pl__mark image { transform-box: fill-box; transform-origin: 50% 50%; }
.pl--done .pl__mark image { animation: pl-settle 0.42s var(--spring-soft); }
@keyframes pl-settle { 45% { transform: scale(1.035); } }
.pl__count {
  position: absolute; left: var(--gutter); bottom: calc(var(--gutter) + 4px); margin: 0;
  display: flex; align-items: flex-start;
  font: 300 clamp(56px, 9vw, 132px)/0.78 var(--display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
}
.pl__pc { margin: 0.1em 0 0 0.1em; font-size: 0.26em; letter-spacing: 0; color: var(--mint); }
.pl__step { position: absolute; right: var(--gutter); bottom: calc(var(--gutter) + 8px); margin: 0; display: flex; align-items: center; gap: 8px; font: 400 0.8125rem/1.4 var(--mono); color: #E6E6E6; transition: color 0.3s var(--spring-soft); }
.pl__spark { flex: none; width: 6px; height: 6px; overflow: hidden; border-radius: 50%; background: var(--em-2); color: transparent; font-size: 0; }
.pl__t { display: inline-block; }
.pl__t.is-in { animation: pl-step 0.4s var(--spring-soft); }
@keyframes pl-step { from { opacity: 0; transform: translateY(6px); } }
.pl__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--em-1), var(--em-2)); box-shadow: 0 0 10px var(--lime-glow); transform: scaleX(var(--p)); transform-origin: left center; }
.pl--done .pl__step { color: var(--mint); }
/* The lift: the curtain draws down from the top, what was on it sinks, and the shield flies up
   into the logo (js in index.html) and hands over to it. The page can be used from the start. */
.pl--out { pointer-events: none; }
.pl-on .pl--out .pl__bg { clip-path: inset(100% 0 0 0); transition: clip-path 0.9s var(--lift); }
.pl--out .pl__count, .pl--out .pl__step { opacity: 0.25; transform: translateY(12vh); transition: transform 0.9s var(--lift), opacity 0.9s var(--lift); }
.pl--out .pl__mark { transition: transform 0.9s var(--lift); }
.pl-on .pl:not(.pl--landed) ~ main .hx-brand img, .pl-on .pl:not(.pl--landed) ~ #nav .logo__light { opacity: 0; }
.pl--landed .pl__mark { opacity: 0; transition: transform 0.9s var(--lift), opacity 0.25s var(--spring-soft); }
/* Phones: the step sits above the count. */
@media (max-width: 559px) {
  .pl__step { right: auto; left: var(--gutter); bottom: calc(var(--gutter) + 64px); }
}

/* ============================== HERO ============================== */
/* The Meridial layout in PayRoll Protect's dress: the near-black canvas lit from above by emerald
   over the faint grid, an emerald film, glass cards, the site's badge and buttons, and emerald only
   for what is verified, amber only for what is held. Drawn on a 1606 × 1161 artboard: --u is one of
   its pixels, the smaller of the screen's width and height shares and never over 1.35 px (nor, on a
   short window, under 0.62 px: there the hero runs a little past the screen rather than shrink out
   of reading). The left column, 1037 of the 1606, carries the hero's own masthead (the site's nav
   waits above the screen until it has gone, js/nav.js), the headline and the trades band; the
   right, 569, the film carrying two cards, drawn in --cu, the card's pixel (--u, but never under
   0.7 px). Under 1024 px the columns stack and the site's nav is the masthead. Example figures. */
.hero {
  --u: min(calc(100vw / 1606), max(calc(100svh / 1161), 0.62px), 1.35px);
  --cu: max(var(--u), 0.7px);
  --hx-split: calc(569 / 1606);
  --hx-shell: 2560px;
  --hx-gutter: calc(35 * var(--u));
  --hx-light: 32%;
  position: relative; isolation: isolate;
  display: flex;
  min-height: 100vh; min-height: 100svh;
  overflow: hidden; overflow: clip;
  background: var(--canvas);
  color: #fff;
}
/* The light from above: an emerald pool over the headline that breathes slowly while the hero is on
   screen (still for reduced motion). */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 28% 32% at var(--hx-light) -6%, rgba(11, 190, 93, 0.16), transparent 70%),
    radial-gradient(ellipse 44% 52% at var(--hx-light) 0%, rgba(14, 58, 33, 0.28), transparent 80%);
  animation: hx-pool 12s var(--harmonic) -4s infinite alternate;
  translate: var(--lx, 0) 0;
}
@keyframes hx-pool { from { opacity: 0.72; } to { opacity: 1; } }
.hero:not(.is-live)::before { animation-play-state: paused; }
.hx-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--hx-split) * 100%);
  width: 100%; max-width: var(--hx-shell); margin-inline: auto;
}
.hx-content { position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column; padding: calc(46 * var(--u)) var(--hx-gutter) calc(59 * var(--u)); }
/* The site's faint grid behind the headline, fading out from its middle. */
.hx-content::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: max(64px, calc(94 * var(--u))) max(64px, calc(94 * var(--u)));
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 46% 44% at 50% 46%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 44% at 50% 46%, #000 20%, transparent 100%);
}
.hx-side { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding-block: calc(46 * var(--u)) calc(59 * var(--u)); }

/* The film: the clip in grayscale, washed in emerald that deepens to the canvas at its foot. Its
   still shows until it plays (js/hero.js; never with reduced motion or data saver). On a screen
   wider than the shell it runs on to the edge. */
.hx-glow {
  position: absolute; inset: 0 min(0px, calc((var(--hx-shell) - 100vw) / 2)) 0 0;
  overflow: hidden; isolation: isolate;
  border-radius: calc(10 * var(--u)) 0 0 calc(10 * var(--u));
  background: var(--deep-2);
}
.hx-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; filter: grayscale(1) brightness(0.8) contrast(1.12); }
.hx-glow::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--mint), var(--em-1) 50%, var(--deep-2) 88%); mix-blend-mode: multiply; }

/* The masthead: the logo, the section links centred over the column in the nav's pale mint, and the
   nav's Book a pilot. */
.hx-mast { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(24 * var(--u)); }
/* The hero holds its place while the facts come up over it (js/flow.js), so once the site's bar
   has come down, the hero's own masthead steps back and only one nav shows. */
.hx-mast.is-revealed { transition: opacity 0.3s var(--spring-soft) 0.28s; }
.nav:not(.is-tucked) ~ main .hx-mast.is-revealed { opacity: 0; pointer-events: none; transition: opacity 0.16s var(--spring-soft); }
.hx-brand { justify-self: start; display: block; }
.hx-brand img { display: block; width: max(104px, calc(150 * var(--u))); height: auto; }
.hx-nav { display: flex; gap: calc(44 * var(--u)); }
.hx-nav a { font: 400 max(12px, calc(15 * var(--u)))/1.2 var(--mono); white-space: nowrap; text-decoration: none; color: var(--mint-link); transition: color var(--t-micro) var(--spring-soft); }
.hx-nav a:focus-visible { color: #fff; }
@media (hover: hover) { .hx-nav a:hover { color: #fff; } }
.hx-cta { justify-self: end; --h: max(40px, calc(46 * var(--u))); padding: 0 calc(22 * var(--u)); font-size: max(12px, calc(15 * var(--u))); font-weight: 400; }

/* The headline block, centred in the column between the masthead and the trades band. */
.hx-body { width: min(calc(842 * var(--u)), 100%); margin: auto; text-align: center; }
.hx-head { margin-bottom: calc(40 * var(--u)); }
/* The badge, as every section's label: a glass pill with an emerald spark. */
.hx-pill {
  display: flex; align-items: center; justify-content: center; gap: max(6px, calc(8 * var(--u)));
  width: max-content; max-width: 100%; margin: 0 auto;
  padding: max(6px, calc(8 * var(--u))) max(14px, calc(18 * var(--u)));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 400 max(12px, calc(14 * var(--u)))/1.6 var(--mono);
  color: #E6E6E6;
}
/* As a button, the badge opens the risk check (js/risk.js): its ring lights and its arrow steps on. */
button.hx-pill { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; transition: background-color var(--t-micro) var(--spring-soft), box-shadow var(--t-micro) var(--spring-soft); }
.hx-pill__a { flex: none; width: max(11px, calc(13 * var(--u))); height: max(11px, calc(13 * var(--u))); color: var(--mint); transition: transform var(--t-micro) var(--spring); }
button.hx-pill:focus-visible { border-radius: 999px; }
.hx-pill__t { min-width: 0; }
@media (pointer: coarse) { button.hx-pill { position: relative; } button.hx-pill::after { content: ""; position: absolute; inset: -7px 0; } }
@media (hover: hover) {
  button.hx-pill:hover { background-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(15, 215, 106, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  button.hx-pill:hover .hx-pill__a { transform: translateX(3px); }
}
.hx-spark { flex: none; width: 6px; height: 6px; overflow: hidden; border-radius: 50%; background: var(--em-2); box-shadow: 0 0 0 3px rgba(15, 215, 106, 0.18); color: transparent; font-size: 0; }
/* The headline, lit as every headline on the site: its first line mint into white into a soft grey,
   the rest white into pale grey. Each line carries its own light, sized to its own words (a line
   fading up is a layer of its own and could not show an ancestor's). */
.hx-title {
  width: min(calc(842 * var(--u)), 100%);
  margin: calc(40 * var(--u)) auto 0;
  font-family: var(--head); font-size: calc(72 * var(--u)); font-weight: 360;
  line-height: 1.12; letter-spacing: -0.03em;
}
.hx-line { display: block; width: fit-content; margin-inline: auto; background-image: var(--grad-l2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-line:first-child { background-image: var(--grad-l1); font-weight: 300; }
.hx-sub { width: min(29.5em, 100%); margin: 0 auto; font-size: max(14px, calc(19 * var(--u))); line-height: 1.5; color: var(--ink-2); }
.hx-acts { display: flex; justify-content: center; gap: calc(16 * var(--u)); margin-top: calc(48 * var(--u)); }
.hx-acts > .mag { display: flex; }
/* The site's buttons (base.css), at the hero's scale. */
.hx-btn { --h: max(48px, calc(60 * var(--u))); min-width: calc(177 * var(--u)); padding: 0 calc(30 * var(--u)); font-size: max(14px, calc(16 * var(--u))); }
/* Our figures under the buttons, each counting in as it lands (js/hero.js): the weekly saving in
   mint, then its share of labour spend and the time to go live, split by hairlines. */
.hx-proof { display: grid; grid-template-columns: repeat(3, minmax(0, calc(200 * var(--u)))); justify-content: center; margin: calc(48 * var(--u)) 0 0; padding: 0; list-style: none; }
.hx-proof li { display: grid; justify-items: center; align-content: start; gap: max(6px, calc(8 * var(--u))); min-width: 0; padding-inline: max(8px, calc(16 * var(--u))); text-align: center; }
.hx-proof li + li { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12); }
.hx-fig { display: inline-grid; justify-items: center; font: 300 max(24px, calc(36 * var(--u)))/1 var(--mono); letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; }
/* The final figure, unseen, holds the width so the count never shuffles the line. */
.hx-fig::after { content: attr(data-to); height: 0; overflow: hidden; visibility: hidden; }
.hx-proof li:first-child .hx-fig { color: var(--mint); }
.hx-proof span { max-width: 17ch; text-wrap: balance; font: 400 max(11px, calc(13 * var(--u)))/1.4 var(--mono); color: var(--ink-3); }

/* The trades band: the trades it is built for, each closed by an emerald spark, drifting left behind
   a soft fade at each end; held while the pointer is on it and while the hero is off screen. Two
   identical runs, each carrying its own trailing gap, so half the track is exactly one cycle. */
.hx-trades { flex: none; width: min(calc(645 * var(--u)), 100%); margin-inline: auto; }
.hx-trades__label { margin: 0; text-align: center; white-space: nowrap; font: 400 max(12px, calc(13 * var(--u)))/1.4 var(--mono); color: var(--ink-3); }
.hx-marquee {
  width: min(calc(606 * var(--u)), 100%); margin: calc(30 * var(--u)) auto 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.hx-track { display: flex; width: max-content; animation: hx-marquee 32s linear infinite; }
.hx-track ul { display: flex; gap: calc(26 * var(--u)); margin: 0; padding: 0 calc(26 * var(--u)) 0 0; list-style: none; }
.hx-track li { display: flex; align-items: center; gap: calc(26 * var(--u)); font: 400 max(13px, calc(17 * var(--u)))/1.5 var(--mono); white-space: nowrap; color: rgba(255, 255, 255, 0.45); }
.hx-track li::after { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--em-2); opacity: 0.8; }
.hero:not(.is-live) .hx-track { animation-play-state: paused; }
@media (hover: hover) { .hx-marquee:hover .hx-track { animation-play-state: paused; } }
@keyframes hx-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* The panel: two glass cards over the film and a caption under them. Each card's parts sit at fixed
   points on it (--x, --y, in card pixels). */
.hx-panel { position: relative; width: min(calc(328 * var(--cu)), 100%); margin-inline: auto; }
/* Glass, as every card on the site: a faint white gradient over a dark tint, a 1px light edge and a
   lit top line, here over the film blurred. */
.hx-card {
  position: relative; width: 100%;
  border-radius: calc(25 * var(--cu));
  background: var(--glass), rgba(1, 10, 5, 0.42);
  box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-hi), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(calc(77.65 * var(--cu))); backdrop-filter: blur(calc(77.65 * var(--cu)));
}
.hx-card--check { height: calc(386 * var(--cu)); }
.hx-card--run { height: calc(264 * var(--cu)); margin-top: calc(11 * var(--cu)); }
.hx-item { position: absolute; left: calc(var(--x) * var(--cu)); top: calc(var(--y) * var(--cu)); margin: 0; }
/* The check's timeline: an emerald dot for each step done, a faint ring for each to come, joined by a
   dashed line. */
.hx-dot { width: calc(22 * var(--cu)); height: calc(22 * var(--cu)); border-radius: 50%; }
.hx-dot::after { content: ""; position: absolute; left: calc(8 * var(--cu)); top: calc(8 * var(--cu)); width: calc(6 * var(--cu)); height: calc(6 * var(--cu)); border-radius: 50%; background: #fff; }
.hx-dot--on { background: rgba(15, 215, 106, 0.16); }
.hx-dot--on::after { background: var(--em-2); box-shadow: 0 0 calc(8 * var(--cu)) var(--lime-glow); }
.hx-dot--off { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.hx-dot--off::after { opacity: 0.23; }
.hx-tl { --o: 0.7; width: 1px; height: calc(var(--len) * var(--cu)); background-image: repeating-linear-gradient(to bottom, var(--mint) 0 calc(2 * var(--cu)), transparent calc(2 * var(--cu)) calc(8 * var(--cu))); }
.hx-tl--dim { --o: 0.2; background-image: repeating-linear-gradient(to bottom, #fff 0 calc(2 * var(--cu)), transparent calc(2 * var(--cu)) calc(8 * var(--cu))); }
.hx-label { font: 400 calc(13 * var(--cu))/1.05 var(--mono); white-space: nowrap; color: #E6E6E6; }
.hx-label--ok { color: var(--mint); }
.hx-label--dim { --o: 0.35; }
.hx-stat, .hx-value { font: var(--w-figure) calc(32 * var(--cu))/1 var(--mono); letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hx-stat--gate { color: var(--mint); }
.hx-stat--sep { --o: 0.3; }
.hx-unit { font: 400 calc(14 * var(--cu))/1 var(--font); white-space: nowrap; color: var(--ink-2); }
.hx-note { font: 400 calc(14 * var(--cu))/1.2 var(--font); white-space: nowrap; color: var(--ink-3); }
.hx-tag { padding: calc(5 * var(--cu)) calc(12 * var(--cu)); border-radius: 999px; background: var(--amber-soft); color: var(--amber-ink); font: 400 calc(12 * var(--cu))/1.3 var(--mono); white-space: nowrap; }
.hx-delta { font: 400 calc(14 * var(--cu))/1 var(--font); white-space: nowrap; color: var(--amber-ink); }
.hx-lines { --o: 0.45; width: calc(274 * var(--cu)); height: calc(120 * var(--cu)); }
.hx-chart { width: calc(290 * var(--cu)); height: calc(117 * var(--cu)); overflow: visible; }
/* The week's line draws itself in as the card lands (js/hero.js), the wash under it following,
   and its latest point stays lit. */
.hx-chart__line { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.js:not(.rm) .hero .hx-chart:not(.is-drawn) .hx-chart__line { stroke-dashoffset: 1; }
.js:not(.rm) .hero .hx-chart:not(.is-drawn) .hx-chart__area, .js:not(.rm) .hero .hx-chart:not(.is-drawn) .hx-chart__dot { opacity: 0; }
.hx-chart.is-drawn .hx-chart__line { transition: stroke-dashoffset 1.5s var(--spring-soft); }
.hx-chart__area { transition: opacity 0.9s var(--spring-soft) 0.45s; }
.hx-chart__dot { fill: var(--mint); transition: opacity 0.3s var(--spring-soft) 1.2s; }
.hx-chart__ping { fill: none; stroke: var(--mint); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }

/* The gate scan. Once the hero has come up (js/hero.js adds .hx-live), a band of light passes down
   the film every seven seconds, behind the glass, so each card lights from behind as it goes; as it
   crosses the invoice line the check runs again (the hold flags, the gate figure answers), and as
   it crosses the pay run the week's latest point pings. One clock for all of it, so they stay in
   step; held while the hero is off screen. */
.hx-scan {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 24%;
  pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(44, 220, 124, 0) 0%, rgba(44, 220, 124, 0.16) 62%, rgba(186, 255, 215, 0.55) 97%, rgba(44, 220, 124, 0) 100%);
  transform: translate3d(0, -100%, 0);
}
.hero.hx-live .hx-scan { animation: hx-scan 7s linear infinite; }
@keyframes hx-scan {
  0% { opacity: 0; transform: translate3d(0, -100%, 0); }
  3% { opacity: 1; }
  33% { opacity: 1; }
  37%, 100% { opacity: 0; transform: translate3d(0, 430%, 0); }
}
.hero.hx-live .hx-card--check .hx-tag { animation: hx-flag 7s var(--spring-soft) infinite; }
@keyframes hx-flag { 0%, 11% { transform: none; box-shadow: 0 0 0 0 rgba(232, 162, 0, 0); } 14% { transform: scale(1.07); box-shadow: 0 0 0 calc(4 * var(--cu)) rgba(232, 162, 0, 0.22); } 22%, 100% { transform: none; box-shadow: 0 0 0 calc(10 * var(--cu)) rgba(232, 162, 0, 0); } }
.hero.hx-live .hx-card--check .hx-stat--gate { animation: hx-answer 7s var(--spring-soft) infinite; }
@keyframes hx-answer { 0%, 9% { color: var(--mint); } 12% { color: #fff; } 20%, 100% { color: var(--mint); } }
.hero.hx-live .hx-card--check .hx-dot--on { animation: hx-tick 7s var(--spring-soft) infinite; }
@keyframes hx-tick { 0%, 9% { box-shadow: 0 0 0 0 rgba(15, 215, 106, 0.4); } 18%, 100% { box-shadow: 0 0 0 calc(9 * var(--cu)) rgba(15, 215, 106, 0); } }
.hero.hx-live .hx-chart__ping { animation: hx-ping 7s var(--spring-soft) infinite; }
@keyframes hx-ping { 0%, 22% { opacity: 0; transform: scale(1); } 23% { opacity: 0.9; } 33%, 100% { opacity: 0; transform: scale(4); } }
.hero:not(.is-live) .hx-scan, .hero:not(.is-live) .hx-card *, .hero:not(.is-live) .hx-chart__ping { animation-play-state: paused; }

/* The live feed: with each pass of the gate scan, a notification drops in over the invoice line's
   corner (js/hero.js), the next worker through the gate: verified in emerald or held in amber, the
   same workers as the invoice further down. Glass, like the cards; example data. */
.hx-feed { position: absolute; z-index: 3; left: calc(-58 * var(--cu)); top: calc(-30 * var(--cu)); width: calc(262 * var(--cu)); pointer-events: none; }
.hx-toast {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(11 * var(--cu)); align-items: center;
  padding: calc(10 * var(--cu)) calc(16 * var(--cu)) calc(10 * var(--cu)) calc(10 * var(--cu));
  border-radius: calc(16 * var(--cu));
  background: rgba(5, 10, 7, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 44px -20px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  opacity: 0; transform: translate3d(0, calc(-12 * var(--cu)), 0) scale(0.96);
  transition: opacity 0.25s var(--spring-in), transform 0.3s var(--spring-in);
}
.hx-toast.is-in { opacity: 1; transform: none; transition: opacity 0.3s var(--spring-soft), transform 0.7s var(--spring-soft); }
.hx-toast__i { grid-row: span 2; display: grid; place-items: center; width: calc(28 * var(--cu)); height: calc(28 * var(--cu)); border-radius: 50%; background: rgba(15, 215, 106, 0.16); }
.hx-toast__i svg { width: 62%; height: 62%; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hx-toast__ok { stroke: var(--em-2); }
.hx-toast__hold { stroke: var(--amber-ink); display: none; }
.hx-toast.is-held .hx-toast__i { background: var(--amber-soft); }
.hx-toast.is-held .hx-toast__ok { display: none; }
.hx-toast.is-held .hx-toast__hold { display: inline; }
.hx-toast__t { margin: 0; font: 400 calc(12.5 * var(--cu))/1.25 var(--mono); white-space: nowrap; color: #fff; }
.hx-toast__s { margin: calc(3 * var(--cu)) 0 0; font: 400 calc(12 * var(--cu))/1.3 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.hx-toast.is-held .hx-toast__t { color: var(--amber-ink); }
@media (max-width: 1023px) { .hx-feed { left: 50%; top: calc(-24 * var(--cu)); margin-left: calc(-131 * var(--cu)); } }

/* The panel answers the pointer (fine pointers, from 1024 px; js/hero.js): the cards lean toward it
   at their own depths, a soft light crosses their glass, and the film shifts the other way. */
.hx-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 46%);
  opacity: var(--sheen, 0);
}
/* Scrolled away, the hero comes apart in depth under the sheet coming over it: the panel rises
   faster than the words (js/hero.js sets --hx-out). */
.hx-panel { translate: 0 calc(var(--hx-out, 0) * -14vh); }
.hx-body { translate: 0 calc(var(--hx-out, 0) * -5vh); }
/* Under the cards: what they show. The title keeps to one line, centred on the panel even where it
   runs wider than the cards. */
.hx-foot__title {
  width: max-content; margin: calc(80 * var(--u)) 0 0 50%; transform: translateX(-50%);
  font: 450 max(16px, calc(24 * var(--u)))/1.2 var(--head); letter-spacing: -0.03em; white-space: nowrap;
}
.hx-foot__cap { max-width: calc(330 * var(--u)); margin: calc(14 * var(--u)) auto 0; text-align: center; font-size: max(13px, calc(16 * var(--u))); line-height: 1.375; color: var(--ink-2); }

/* The load reveal: each part fades up once, in a set order (its --rv-delay and --rv-dur, inline),
   from nothing to its resting opacity (--o), linearly and by opacity alone. It waits for the fonts
   (index.html adds .is-ready), and js/hero.js hands each part back as it lands. Reduced motion
   shows the finished hero at once. */
.hero [data-reveal], .hx-item { opacity: var(--o, 1); }
.js .hero [data-reveal]:not(.is-revealed) { opacity: 0; will-change: opacity; }
.is-ready .hero [data-reveal]:not(.is-revealed) { animation: hx-reveal calc(var(--rv-dur, 600ms) * var(--rv-scale, 1)) linear calc(var(--rv-delay, 0ms) * var(--rv-scale, 1)) both; }
@keyframes hx-reveal { from { opacity: 0; } to { opacity: var(--o, 1); } }
/* The headline's lines rise out of their own clips as they light, on the spring; the timeline on the
   invoice line runs down from its first step. */
.is-ready .hero .hx-line[data-reveal]:not(.is-revealed) { animation-name: hx-rise; animation-duration: calc(1000ms * var(--rv-scale, 1)); animation-timing-function: var(--spring-soft); }
@keyframes hx-rise {
  from { opacity: 0; transform: translateY(0.62em); clip-path: inset(0 -10% 100% -10%); }
  to { opacity: var(--o, 1); transform: none; clip-path: inset(-20% -10% -30% -10%); }
}
.is-ready .hero .hx-tl[data-reveal]:not(.is-revealed) { animation-name: hx-grow; animation-duration: calc(700ms * var(--rv-scale, 1)); animation-timing-function: var(--spring-soft); }
@keyframes hx-grow { from { opacity: 0; transform: scaleY(0); } to { opacity: var(--o, 1); transform: none; } }
.hx-tl { transform-origin: 50% 0; }
@media (prefers-reduced-motion: reduce) { .js .hero [data-reveal]:not(.is-revealed) { opacity: var(--o, 1); } }
.rm .hero [data-reveal]:not(.is-revealed) { opacity: var(--o, 1); }

/* Tablets and phones: the columns stack, the site's nav (base.css) is the masthead, and the film is a
   band under the headline carrying the cards, side by side where two fit and one above the other
   where they don't. The cards keep their own pixel, so they never draw past their edges, and the
   headline is sized to the screen's width; the reveal runs a little quicker. */
@media (max-width: 1023px) {
  .hero {
    --u: max(calc(100vw / 917), 0.6px);
    --cu: min(1px, calc((100vw - 2 * var(--gutter) - 11px) / 667));
    --hx-light: 50%;
    --rv-scale: 0.6;
    min-height: 0;
  }
  .hx-grid { grid-template-columns: minmax(0, 1fr); }
  .hx-mast { display: none; }
  .hx-content { padding: calc(var(--nav-h) + 44px) var(--gutter) 48px; }
  .hx-body { width: 100%; }
  .hx-title { width: 100%; font-size: min(calc(72 * var(--u)), calc((100vw - 2 * var(--gutter)) / 11.7)); }
  .hx-head { margin-bottom: 22px; }
  .hx-sub { font-size: max(15px, calc(19 * var(--u))); }
  .hx-acts { margin-top: 30px; }
  .hx-btn { --h: 52px; }
  .hx-trades { margin-top: 48px; }
  .hx-side { padding: 40px var(--gutter) 48px; }
  .hx-glow { inset: 0; border-radius: 16px 16px 0 0; }
  .hx-panel { width: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: calc(11 * var(--cu)); }
  .hx-card { width: calc(328 * var(--cu)); flex: none; }
  .hx-card--run { margin-top: 0; }
  .hx-foot { flex-basis: 100%; }
  .hx-foot__title { margin-top: 28px; }
}
@media (max-width: 719px) {
  .hero { --cu: min(1px, calc((100vw - 2 * var(--gutter)) / 328)); }
}
@media (max-width: 479px) {
  .hx-fig { font-size: 22px; }
  .hx-acts { flex-direction: column; align-items: stretch; gap: 12px; }
  .hx-acts .btn { width: 100%; }
  .hx-pill { white-space: normal; text-align: center; }
}

/* ============================== FACTS ============================== */
/* Under the hero, the line the brand signs with and the three figures behind it. */
.facts { position: relative; padding-block: clamp(56px, 7vw, 96px); box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); background-image: radial-gradient(60% 140% at 50% 0%, rgba(11, 190, 93, 0.07), transparent 70%); }
.facts__in { display: grid; gap: 32px; align-items: center; }
/* Line and figures side by side once the three figures fit beside the line. */
@media (min-width: 1200px) { .facts__in { grid-template-columns: var(--split); column-gap: var(--split-gap); row-gap: 0; align-items: start; } }
/* The line is lit word by word with scroll (js/reveal.js), in the headline gradient of its theme. */
.facts__tag { font-family: var(--head); max-width: 19ch; margin: 0; font-size: clamp(1.625rem, 1.05rem + 1.7vw, 2.5rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.03em; }
/* Three columns, each at least as wide as its figure, split by hairlines centred in the gaps. */
.facts__nums { display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); column-gap: 48px; border-top: 1px solid var(--hair-2); }
.facts__nums li { position: relative; display: grid; align-content: start; gap: 12px; padding: 22px 0 4px; }
.facts__nums li + li::before { content: ""; position: absolute; left: -24px; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.facts__nums strong { font-family: var(--mono); font-size: clamp(2rem, 1rem + 1.6vw, 2.5rem); font-weight: 300; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; color: var(--ink); }
.facts__nums sup { margin-left: 2px; font: 500 0.75rem/1 var(--mono); letter-spacing: 0; vertical-align: super; color: var(--ink-3); }
.facts__nums li > span { font-size: 0.9375rem; line-height: 1.4; color: var(--ink-2); }
/* Our own figure leads the band, in the headline's green. */
.facts__ours strong { color: var(--mint); }
.facts__src { grid-column: 1 / -1; margin: 18px 0 0; max-width: none; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }
@media (min-width: 1200px) { .facts__src { grid-column: 2; } }
@media (max-width: 640px) { .facts__nums { grid-template-columns: 1fr; } .facts__nums li { grid-template-columns: auto 1fr; align-items: baseline; gap: 16px; padding: 18px 0; } .facts__nums li + li { box-shadow: inset 0 1px 0 var(--hair); } .facts__nums li + li::before { content: none; } }

/* ============================== LIGHT FROM ABOVE ============================== */
/* The hero's light, in miniature, over the head of each section that opens a new part of the
   story: a soft emerald pool just under the top edge, faded in from it so no seam shows. */
.numbers, .watch:not(.light), .pilot:not(.light), .faq:not(.light) {
  background:
    linear-gradient(180deg, var(--canvas) 0, rgba(1, 1, 1, 0) 180px) no-repeat,
    radial-gradient(52% 480px at 50% 60px, rgba(11, 190, 93, 0.14), rgba(14, 58, 33, 0.07) 55%, transparent 82%) no-repeat,
    var(--canvas);
}
/* The light sections carry none of it: on the light canvas a haze reads as a smudge, so they are
   plain, and the cards on them speak in flat tints (below). */

/* ============================== FILM: THE EXPLAINER ============================== */
/* The explainer film (js/watch.js): a dark screen in a viewfinder, with the site's own controls.
   Its track is split into the film's chapters; under it, the chapter playing and a link to the
   part of the page that shows it; beside it (below, on phones), the chapters. */
.watch__grid { display: grid; gap: 24px; align-items: start; }
/* Side by side, the chapter list runs the full height of the player and its chapter bar, so the
   two share a top and a bottom edge. */
@media (min-width: 1024px) {
  .watch__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; align-items: stretch; }
  .watch__ch { grid-auto-rows: 1fr; }
}
.watch__frame { --hud-o: -12px; }
.watch__screen { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: #070908; box-shadow: var(--shadow-2); }
.watch__screen.is-idle { cursor: none; }
.watch__screen::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(1, 1, 1, 0) 45%, rgba(1, 1, 1, 0.72)); transition: opacity 0.4s var(--spring-soft); }
.watch__screen.is-started::after { opacity: 0; }
.watch__video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.watch__screen:fullscreen { border-radius: 0; aspect-ratio: auto; }
.watch__screen:fullscreen .watch__video { object-fit: contain; }

/* Before the first play: a pill at the lower left, clear of the poster's headline. */
.watch__big { position: absolute; left: clamp(14px, 2.6vw, 28px); bottom: clamp(14px, 2.6vw, 28px); z-index: 2; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px 0 6px; border: 0; border-radius: 28px; background: rgba(12, 14, 16, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: #fff; font: 500 0.875rem/1 var(--mono); font-stretch: var(--semi); cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform var(--t-micro) var(--spring), opacity 0.3s var(--spring-soft); }
.watch__big-i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lime); color: var(--gun); box-shadow: 0 10px 24px -10px var(--lime-glow); }
.watch__big-i svg { width: 16px; height: 16px; margin-left: 2px; }
.watch__big-t { font-size: 0.8125rem; color: var(--on-dark-3); }
@media (hover: hover) { .watch__big:hover { transform: scale(1.03); } }
.watch__big:active { transform: scale(0.97); transition-duration: 0.1s; }
.is-started:not(.is-ended) .watch__big { opacity: 0; transform: scale(0.94); pointer-events: none; }
@media (max-width: 479px) { .watch__big { height: 48px; padding-right: 16px; } .watch__big-i { width: 36px; height: 36px; } .watch__big-t { display: none; } }

/* Controls: on a scrim at the foot of the screen once the film has started. */
.watch__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 32px 10px 8px; background: linear-gradient(rgba(8, 9, 10, 0), rgba(8, 9, 10, 0.72)); color: #fff; opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; transition: opacity 0.3s var(--spring-soft), transform 0.45s var(--spring), visibility 0s linear 0.45s; }
.is-started .watch__bar { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 0.3s var(--spring-soft), transform 0.45s var(--spring), visibility 0s; }
.is-started.is-idle .watch__bar, .is-ended .watch__bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
/* Controls hidden before the film starts and after it ends cannot be reached by keyboard; while
   it plays they hide when idle but come back the moment one of them takes focus. */
.is-ended .watch__bar { visibility: hidden; transition: opacity 0.3s var(--spring-soft), transform 0.45s var(--spring), visibility 0s linear 0.45s; }
.is-started.is-idle .watch__bar:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.watch__ctl { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; transition: background-color var(--t-micro) var(--spring-soft), transform 0.12s var(--spring-soft); }
@media (hover: hover) { .watch__ctl:hover { background: rgba(255, 255, 255, 0.12); } }
.watch__ctl:active { transform: scale(0.92); }
.watch__ctl svg { width: 18px; height: 18px; }
/* Each control takes a 44 px hit area (Apple's minimum) from a clear layer around it. */
.watch__ctl { position: relative; }
.watch__ctl::after { content: ""; position: absolute; inset: -2px; }
.watch__ctl .is-b, .is-playing [data-act="play"] .is-a, [data-act="mute"][aria-pressed="true"] .is-a { display: none; }
.is-playing [data-act="play"] .is-b, [data-act="mute"][aria-pressed="true"] .is-b { display: block; }
.watch__time { flex: none; padding: 0 10px 0 4px; font-family: var(--mono-live); font-size: 0.75rem; color: rgba(255, 255, 255, 0.82); }
@media (max-width: 479px) { .watch__time { display: none; } }
.watch__track { position: relative; flex: 1; display: flex; align-items: center; gap: 3px; height: 32px; margin: 0 6px; border-radius: 4px; cursor: pointer; touch-action: none; }
.watch__track:focus-visible { outline-offset: 2px; }
@media (pointer: coarse) { .watch__track { height: 44px; } }
.watch__seg { position: relative; flex: 1 1 0; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.28); transition: transform 0.2s var(--spring); }
@media (hover: hover) { .watch__track:hover .watch__seg { transform: scaleY(1.5); } }
.watch__seg i { position: absolute; inset: 0; background: var(--lime); transform: scaleX(0); transform-origin: left center; }
/* The chapter under the pointer, and where in it. */
.watch__tip { position: absolute; left: 0; bottom: 34px; padding: 6px 9px; border-radius: 6px; background: rgba(8, 9, 10, 0.88); font: 500 0.75rem/1.2 var(--mono); white-space: nowrap; color: #fff; opacity: 0; pointer-events: none; transform: translateX(var(--x, 0)) translateX(-50%); transition: opacity 0.15s var(--spring-soft); }
@media (hover: hover) and (pointer: fine) { .watch__track:hover .watch__tip { opacity: 1; } }
[data-act="cc"][aria-pressed="true"] { background: rgba(255, 255, 255, 0.16); }
/* Captions: on a solid layer, so they read over any frame, in a heavier weight with a touch of
   tracking (vibrancy). They rise above the controls while those show. */
.watch__cc { position: absolute; left: 50%; bottom: clamp(12px, 2.4vw, 22px); z-index: 1; width: max-content; max-width: min(86%, 32em); margin: 0; padding: 0.28em 0.7em 0.34em; border-radius: 8px; background: rgba(8, 9, 10, 0.8); color: #fff; font: 500 clamp(0.875rem, 0.66rem + 0.7vw, 1.25rem)/1.35 var(--font); letter-spacing: 0.01em; text-align: center; text-wrap: balance; opacity: 0; transform: translateX(-50%); pointer-events: none; transition: transform 0.45s var(--spring), opacity 0.2s var(--spring-soft); }
.is-cc .watch__cc:not(:empty) { opacity: 1; }
.is-started:not(.is-idle):not(.is-ended) .watch__cc { transform: translateX(-50%) translateY(-48px); }
/* Phones: under the player (js/watch.js), two lines of room while captions are on. */
.watch__frame + .watch__cc { position: static; display: none; width: auto; max-width: none; min-height: calc(2.7em + 0.62em); margin: 10px 0 0; border-radius: 12px; font-size: 0.9375rem; opacity: 1; transform: none; transition: none; }
.watch__frame + .watch__cc.is-on { display: block; }
.watch__wait { position: absolute; left: 50%; top: 50%; z-index: 1; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-color: rgba(255, 255, 255, 0.25); border-top-color: #fff; opacity: 0; transition: opacity 0.2s var(--spring-soft); pointer-events: none; }
.is-waiting .watch__wait { opacity: 1; transition-delay: 0.3s; }

/* Now playing, with the way to the part of the page it covers (down the page, so the arrow
   turns down). */
.watch__now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 20px; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--glass), var(--surface); box-shadow: var(--shadow-1); }
/* Phones: the chapter and its button wrap, so the strip takes card corners. */
@media (max-width: 559px) { .watch__now { border-radius: 20px; padding-left: 18px; } }
.watch__now-t { display: flex; align-items: baseline; gap: 12px; min-width: 0; margin: 0; font-family: var(--mono); font-size: 0.875rem; font-weight: 500; font-stretch: var(--semi); color: var(--ink); }
.watch__now-i { font-size: 0.75rem; color: var(--ink-3); }
.watch__go .btn__arrow { transform: rotate(90deg); }
@media (hover: hover) { .watch__go:hover .btn__arrow { transform: rotate(90deg) translateX(3px); } }

/* The film's words, for anyone who would rather read them (and for search): a quiet disclosure
   under the player, its sign turning as it opens. */
.watch__tx { margin-top: 24px; border-radius: var(--r-lg); background: var(--glass), var(--surface); box-shadow: var(--shadow-1); }
.watch__tx summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 0 22px; list-style: none; cursor: pointer; font: 500 0.875rem/1.3 var(--mono); color: var(--ink); }
.watch__tx summary::-webkit-details-marker { display: none; }
.watch__tx summary i { position: relative; flex: none; width: 12px; height: 12px; }
.watch__tx summary i::before, .watch__tx summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; border-radius: 1px; background: currentColor; transition: transform 0.3s var(--spring); }
.watch__tx summary i::after { transform: rotate(90deg); }
.watch__tx[open] summary i::after { transform: rotate(0deg); }
.watch__tx[open] summary i { color: var(--em-1); }
.watch__tx-body { max-width: 64ch; padding: 4px 22px 18px; border-top: 1px solid var(--hair); }
.watch__tx-body p { margin: 14px 0 0; font-size: 0.9375rem; line-height: 1.65; color: var(--ink-2); }

/* Chapters: each starts the film at its time. The one playing is marked, its progress drawn
   under it. */
.watch__ch { display: grid; gap: 2px; padding: 6px; border-radius: var(--r-lg); background: var(--glass), var(--surface); box-shadow: var(--shadow-1); }
.watch__ch button { font-family: var(--mono); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 10px 14px; overflow: hidden; border: 0; border-radius: var(--r-md); background: transparent; text-align: left; color: var(--ink-2); cursor: pointer; transition: background-color var(--t-micro) var(--spring-soft), color var(--t-micro) var(--spring-soft); }
@media (hover: hover) { .watch__ch button:hover { background: rgba(var(--fg), 0.04); color: var(--ink); } }
.watch__ch button:active { opacity: 0.7; transition-duration: 0s; }
.watch__ch button[aria-current="true"] { background: rgba(15, 215, 106, 0.07); box-shadow: inset 0 0 0 1px rgba(15, 215, 106, 0.18); color: var(--ink); }
.watch__i { font: 500 var(--fs-micro)/1 var(--mono); color: var(--ink-3); }
.watch__ch button[aria-current="true"] .watch__i { color: var(--lime-ink); }
.watch__n { font-size: 0.875rem; font-weight: 500; line-height: 1.3; }
.watch__s { font-size: 0.75rem; color: var(--ink-3); }
.watch__p { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 1px; background: var(--lime); transform: scaleX(0); transform-origin: left center; }

/* The way back to the film: a pill of dark glass at the foot of the screen (content shows through,
   blurred; a bright top edge catches the light). It rises and settles to full size as it arrives,
   and drops away on the mirror of that curve. On touch it can be flicked away (js/watch.js). */
.wback { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 30px; background: rgba(8, 14, 11, 0.72); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 24px 48px -16px rgba(0, 0, 0, 0.55); color: #fff; opacity: 0; transform: translate(-50%, calc(100% + 24px)) scale(0.94); touch-action: none; transition: transform 0.3s var(--spring-in), opacity 0.2s var(--spring-soft); }
.wback.is-on { opacity: 1; transform: translate(-50%, 0); transition: transform 0.6s var(--spring), opacity 0.25s var(--spring-soft); }
.wback__go { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 6px; border: 0; border-radius: 22px; background: transparent; color: #fff; font: 500 0.875rem/1 var(--mono); font-stretch: var(--semi); white-space: nowrap; cursor: pointer; transition: background-color var(--t-micro) var(--spring-soft), transform 0.12s var(--spring-soft); }
.wback__i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lime); color: var(--gun); }
.wback__i svg { width: 12px; height: 12px; margin-left: 1px; }
.wback__t { font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
/* Held by a finger: it follows 1:1, so nothing eases behind it. */
.wback.is-held { transition: none; }
.wback__x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--on-dark-3); cursor: pointer; transition: background-color var(--t-micro) var(--spring-soft), color var(--t-micro) var(--spring-soft); }
.wback__x svg { width: 18px; height: 18px; }
@media (hover: hover) { .wback__go:hover, .wback__x:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } }
.wback__go:active, .wback__x:active { transform: scale(0.96); }

/* ============================== 01 GAP ============================== */
.gap { position: relative; background: var(--canvas); }
/* Held on screen with its content at the optical centre, a little above the middle, as Leaks. */
.gap__pin { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding-block: calc(var(--nav-h) + 24px) 104px; }
.gap__grid { display: grid; gap: 40px; width: 100%; }
.gap__head h2 { margin-bottom: 0.5em; }
.gap__head .lead { margin: 0; }
.gap__note { margin: 0; }
@media (min-width: 1024px) {
  .gap__grid { grid-template-columns: var(--split); column-gap: var(--split-gap); row-gap: 20px; align-items: center; }
  .gap__note { grid-column: 2; }
}

/* The zoom card is a light instrument, like the leak cards: a panel with a faint grid holds the
   reading (two bars, a ruler and the zoom factor) and the finding sits below it. Green is the
   gate record, amber the hours with no record behind them. */
.zoom { --panel: var(--card-solid); display: flex; flex-direction: column; }
.zoom__panel { position: relative; padding: clamp(20px, 2.6vw, 28px); overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: transparent; }
/* Zoomed in, the panel warms where the unverified hours are: a low amber wash at the right. */
.zoom__panel::after { content: ""; position: absolute; right: -18%; top: 4%; width: 70%; height: 96%; pointer-events: none; background: radial-gradient(closest-side, rgba(232, 162, 0, 0.12), rgba(232, 162, 0, 0)); opacity: 0; transition: opacity 0.6s var(--spring-soft); }
.zoom.is-zoomed .zoom__panel::after { opacity: 1; }
.zoom__panel > * { position: relative; z-index: 1; }
.zoom__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; font-size: var(--fs-micro); line-height: 14px; color: var(--ink-3); }
.zoom__cap { position: relative; flex: 1; min-width: 0; height: 14px; }
.zoom__cap span { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity 0.3s var(--spring-soft), transform 0.45s var(--spring); }
.zoom__cap-b { opacity: 0; transform: translateY(6px); color: var(--amber-ink); }
@media (max-width: 399px) { .zoom__cap { height: 28px; } .zoom__cap span { white-space: normal; line-height: 14px; } }
.zoom.is-zoomed .zoom__cap-a { opacity: 0; transform: translateY(-6px); }
.zoom.is-zoomed .zoom__cap-b { opacity: 1; transform: none; }
.zoom__x { flex: none; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--ink-2); }
.zoom__rows { display: grid; gap: 10px; }
.zrow { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-md); background: rgba(var(--fg), 0.035); box-shadow: inset 0 0 0 1px rgba(var(--fg), 0.09); }
.zrow__k { font: 500 var(--fs-micro)/1.2 var(--mono); color: var(--ink-3); }
.zrow__v { min-width: 84px; text-align: right; font-size: 0.8125rem; color: var(--ink); }
/* The zoom is a scale about the right edge of the data layer. Stripes, the amber edge
   and the ruler labels counter-scale so they keep their size. */
.zrow__track { position: relative; height: 16px; overflow: hidden; border-radius: 4px; background: rgba(var(--fg), 0.05); }
.zrow__scale { position: absolute; inset: 0; transform-origin: 100% 50%; }
.zrow__fill, .zrow__gap, .zrow__edge { position: absolute; top: 0; bottom: 0; }
.zrow__fill--claimed { left: 0; width: 100%; background: rgba(var(--fg), 0.2); }
.zrow__fill--gate { left: 0; width: 98.288%; background: var(--lime); }
.zrow__gap { left: 98.288%; right: 0; overflow: hidden; }
.zrow__stripes { position: absolute; top: 0; bottom: 0; right: 0; width: 2000%; transform-origin: 100% 50%; background: repeating-linear-gradient(135deg, rgba(232, 162, 0, 0.85) 0 1.5px, rgba(232, 162, 0, 0.12) 1.5px 6px); }
.zrow__edge { left: 98.288%; width: 2px; background: var(--amber-line); transform-origin: 0 50%; }
.zoom.is-zoomed .zrow__edge { animation: lum 5s var(--harmonic) 1.4s infinite; }
.zoom__ruler { display: flex; justify-content: space-between; margin: 14px 112px 0; font-size: var(--fs-micro); line-height: 16px; color: var(--ink-3); }
.zoom__ruler.is-scaled { position: relative; display: block; height: 16px; overflow: hidden; }
.ruler__scale { position: absolute; inset: 0; transform-origin: 100% 50%; }
.rt { position: absolute; top: 0; left: calc(var(--x) * 100%); transform-origin: 0 50%; white-space: nowrap; }
.rt span { display: block; }
.rt--c span { transform: translateX(-50%); }
.rt-end { position: absolute; top: 0; right: 0; white-space: nowrap; }
/* The result slot first reads what the summary view says (it matches, so it gets approved). The
   conclusion replaces it once the zoom that justifies it is nearly complete. */
.zoom__result { position: relative; isolation: isolate; display: grid; overflow: hidden; padding: 22px clamp(20px, 2.6vw, 28px) clamp(22px, 2.8vw, 30px); border-top: 1px solid var(--hair); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.zoom__result::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% 125%, rgba(232, 162, 0, 0.3) 0%, rgba(232, 162, 0, 0.1) 45%, transparent 75%); opacity: 0; transition: opacity 0.6s var(--spring-soft); }
.zoom.is-zoomed .zoom__result::before { opacity: 1; }
.zoom__state { grid-area: 1 / 1; display: grid; gap: 6px; }
.zoom__state > * { transition: opacity 0.3s var(--spring-soft), transform 0.6s var(--spring); }
.js .zoom__state--b > * { opacity: 0; transform: translateY(8px); }
.zoom.is-zoomed .zoom__state--b > * { opacity: 1; transform: none; }
.zoom.is-zoomed .zoom__state--b > :nth-child(2) { transition-delay: 0.14s; }
.zoom.is-zoomed .zoom__state--a > * { opacity: 0; transform: translateY(-6px); }
.no-js .zoom__state--a { display: none; }
.zoom__fig { display: flex; align-items: baseline; gap: 14px; }
.zoom__fig .od, .zoom__pct { font-family: var(--mono); font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem); font-weight: var(--w-figure); font-stretch: var(--semi); letter-spacing: -0.02em; color: var(--amber-ink); }
.zoom__pct { color: var(--ink); }
.zoom__per { font-size: 0.75rem; color: var(--ink-3); }
.zoom__result p { margin: 0; color: var(--ink-2); }
@media (max-width: 559px) {
  .zrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .zrow__k { grid-column: 1; }
  .zrow__v { grid-column: 2; grid-row: 1; }
  .zrow__track { grid-column: 1 / -1; }
  .zoom__ruler { margin-inline: 14px; }
  /* The caption, in mono, steps down a point so it reads in full on a phone. */
  .zoom__top { gap: 10px; font-size: 0.75rem; }
}

/* ============================== 02 MATCH ============================== */
/* A scroll scene on a dark band, edge to edge like every dark moment on the page: the headline
   lights up word by word, then the invoice lines roll through a focus lens one at a time. Each
   line resolves as it crosses the lens: the claim is shown, the gate record grows to meet it,
   then the result. */
.match { position: relative; }
.match__pin { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding-block: calc(var(--nav-h) + 56px) 72px; }
.match__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--gun); }
/* The hero's grid and one soft emerald pool behind the lens. Static. */
.match__stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px); background-size: 94px 94px; background-position: center; -webkit-mask-image: radial-gradient(60% 66% at 60% 50%, #000 10%, transparent 80%); mask-image: radial-gradient(60% 66% at 60% 50%, #000 10%, transparent 80%); }
.match__stage::after { content: ""; position: absolute; left: 50%; top: 20%; width: 60%; height: 60%; background: radial-gradient(closest-side, rgba(15, 215, 106, 0.1), rgba(15, 215, 106, 0)); }
.match__grid { position: relative; z-index: 1; display: grid; gap: 48px; width: 100%; color: var(--on-dark); }
@media (min-width: 1024px) { .match__grid { grid-template-columns: var(--split); gap: var(--split-gap); align-items: center; } }
.match__title { margin: 0 0 0.45em; color: #fff; }
.match__title .w { display: inline-block; }
.js .match__title .w { opacity: 0.16; }
.match__lead { margin: 0 0 40px; max-width: 30rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--on-dark-2); }

/* Totals: what is verified, what is held, and the split of what was claimed. */
.mq__tots { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: end; gap: 16px 40px; }
.mq__tot { display: grid; gap: 10px; }
.mq__tot > span { font: 500 var(--fs-micro)/1 var(--mono); color: var(--on-dark-3); }
/* Each total keeps the width of its final figure, so the one beside it never shifts as it counts. */
.mq__tot strong { min-width: 4.2em; }
.mq__tot strong { font-family: var(--mono); font-size: clamp(1.875rem, 1.3rem + 1.4vw, 2.625rem); font-weight: var(--w-figure); font-stretch: var(--semi); letter-spacing: -0.02em; line-height: 1; }
@media (max-width: 359px) { .mq__tot strong { font-size: 1.625rem; } }
#m-ver { color: var(--lime); }
#m-held { color: var(--amber); }
.mq__split { grid-column: 1 / -1; position: relative; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.08); }
.mq__v, .mq__x { position: absolute; top: 0; bottom: 0; width: 100%; transition: transform 0.6s var(--spring-soft); }
.mq__v { left: 0; background: var(--lime); transform-origin: left center; transform: scaleX(0.896); }
.mq__x { right: 0; background: var(--amber); transform-origin: right center; transform: scaleX(0.104); }
.mq__count { grid-column: 1 / -1; margin: 0; font: 400 0.71875rem/1.4 var(--mono); letter-spacing: 0.02em; color: var(--on-dark-3); }

/* The invoice is a sheet. While the check runs (desktop) it lies back in perspective and a scan
   runs down it: verified lines settle flat, held lines rise toward you in amber and cast a shadow
   on the sheet. Elsewhere held lines lift a little. Transform and opacity only. */
.mq { position: relative; --row: 78px; --lift: 16px; --tip: 6deg; perspective: 1400px; perspective-origin: 50% 10%; }
.mq__sheet { position: relative; transform-style: preserve-3d; transform-origin: 50% 65%; padding-bottom: 8px; border-radius: var(--r-lg); background: var(--glass), #0A0D0B; box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-hi); }
.mq__floor, .mq__scan { display: none; }
.mq__head { display: flex; justify-content: space-between; gap: 12px; padding: 16px 24px 12px; border-bottom: 1px solid var(--hair-dark); font: 500 var(--fs-micro)/1 var(--mono); color: var(--on-dark-3); }
.mq__window { position: relative; transform-style: preserve-3d; }
.mq__rows { position: relative; transform-style: preserve-3d; }
.mq__row { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) 7rem; align-items: center; column-gap: 28px; height: var(--row); padding: 0 24px; transform-origin: 50% 50%; transform-style: preserve-3d; transition: transform 0.8s var(--spring), opacity 0.4s var(--spring-soft); }
.mq__row + .mq__row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045); }
/* A held line, once checked: a raised amber-edged tile, and its shadow back on the sheet (the
   inverse of the lift, nudged down the page). */
.mq__row::before { content: ""; position: absolute; inset: 5px 10px; z-index: -1; border-radius: 12px; background: #161C19; box-shadow: inset 0 0 0 1px rgba(232, 162, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 30px rgba(232, 162, 0, 0.14); opacity: 0; transition: opacity 0.45s var(--spring-soft); }
.mq__row::after { content: ""; position: absolute; inset: 10px 4% -6px; border-radius: 14px; background: rgba(0, 0, 0, 0.78); filter: blur(12px); opacity: 0; transform: rotateX(var(--tip)) translateZ(calc(var(--lift) * -1)) translateY(calc(var(--lift) * 0.75)); pointer-events: none; transition: opacity 0.6s var(--spring-soft); }
.mq__row.is-held.is-done { transform: translateZ(var(--lift)) rotateX(calc(var(--tip) * -1)); }
.mq__row.is-held.is-done::before, .mq__row.is-held.is-done::after { opacity: 1; }
.mq__who { display: grid; gap: 4px; min-width: 0; }
.mq__who strong { font: 500 1.0625rem/1.2 var(--mono); letter-spacing: -0.01em; color: #fff; }
.mq__sub { display: grid; font-size: 0.78125rem; line-height: 1.3; color: var(--on-dark-3); }
.mq__sub > span { grid-area: 1 / 1; transition: opacity 0.3s var(--spring-soft), transform 0.45s var(--spring); }
.mq__why { color: var(--amber); }
.mq__row.is-held .mq__trade { opacity: 0; transform: translateY(-4px); }
.mq__bar { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); }
.mq__gate, .mq__gap, .mq__claim { position: absolute; top: 0; bottom: 0; }
.mq__gate { left: 0; width: calc(var(--g) * 100%); border-radius: 2px; background: var(--lime); box-shadow: 0 0 12px rgba(15, 215, 106, 0.35); transform-origin: left center; transition: transform 0.7s var(--spring-soft); }
.mq__row.is-held .mq__gate { background: rgba(242, 244, 244, 0.5); box-shadow: none; }
.mq__gap { left: calc(var(--g) * 100% + 2px); width: calc((var(--c) - var(--g)) * 100% - 2px); border-radius: 2px; background: var(--amber); transform-origin: left center; transition: transform 0.45s var(--spring-soft) 0.25s, opacity 0.25s var(--spring-soft) 0.25s; }
.mq__claim { left: calc(var(--c) * 100% - 1px); top: -6px; bottom: -6px; width: 2px; border-radius: 1px; background: rgba(242, 244, 244, 0.8); }
.mq__res { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; font-size: 0.875rem; font-weight: 500; white-space: nowrap; transition: opacity 0.3s var(--spring-soft), transform 0.45s var(--spring); }
.mq__row.is-ok .mq__res { color: var(--lime); }
.mq__row.is-held .mq__res { color: var(--amber); }
.mq__tick { width: 15px; height: 15px; flex: none; }
.mq__note { margin: 18px 0 0; max-width: none; padding-left: 24px; font: 400 0.75rem/1.5 var(--font); color: var(--on-dark-3); }

/* Lines the lens has not reached (JS only): the claim is known, the evidence is not. */
.js .mq__row:not(.is-done) .mq__gate { transform: scaleX(0); }
.js .mq__row:not(.is-done) .mq__gap { transform: scaleX(0); opacity: 0; transition-delay: 0s; }
.js .mq__row:not(.is-done) .mq__res { opacity: 0; transform: translateX(-8px); }
.js .mq__row.is-held:not(.is-done) .mq__trade { opacity: 1; transform: none; }
.js .mq__row.is-held:not(.is-done) .mq__why { opacity: 0; transform: translateY(4px); }

/* Desktop: the section pins; the sheet lies back and the scan runs down it (js/match.js). Lines
   the scan has not reached are dim; the held ones lift higher and the sheet casts a soft shadow. */
@media (min-width: 1024px) {
  .mq.is-scene { --row: 64px; --lift: 34px; --tip: 9deg; }
  .mq.is-scene .mq__sheet { will-change: transform; }
  .mq.is-scene .mq__floor { display: block; position: absolute; inset: 6% 4% -4%; z-index: -1; border-radius: 28px; background: rgba(0, 0, 0, 0.5); filter: blur(30px); transform: translateZ(-50px); pointer-events: none; }
  .mq.is-scene .mq__row:not(.is-done) { opacity: 0.42; }
  .mq.is-scene .mq__scan { display: block; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(15, 215, 106, 0), var(--lime) 12%, var(--lime) 88%, rgba(15, 215, 106, 0)); box-shadow: 0 0 16px rgba(15, 215, 106, 0.55); opacity: 0; pointer-events: none; will-change: transform, opacity; }
  .mq.is-scene .mq__scan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 64px; background: linear-gradient(180deg, rgba(15, 215, 106, 0), rgba(15, 215, 106, 0.08)); }
}
@media (max-width: 1023px) {
  .match__pin { min-height: 0; padding-block: 88px 80px; }
  .match__stage { inset: 24px clamp(8px, 2vw, 16px); }
  .mq { --row: 68px; }
  .mq__row { padding: 0 16px; column-gap: 14px; }
  .mq__head { padding-inline: 16px; }
  .mq__note { padding-left: 4px; }
}
@media (max-width: 559px) {
  .mq__row { grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr) 5.2rem; column-gap: 12px; }
  .mq__who strong { font-size: 0.9375rem; }
  .mq__res { font-size: 0.78125rem; }
  .mq__tots { gap: 16px 28px; }
  .mq__row.is-held { height: calc(var(--row) + 18px); }
  /* A gentler lift and tip, so the taller held rows still project inside the screen. */
  .mq { --lift: 8px; --tip: 3deg; }
}

/* ============================== 03 LEAKS ============================== */
.leaks__grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .leaks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
/* Leak cards are glass instruments, like the hero's widgets: a faint grid, thin lines, mono
   readings. Emerald marks a valid scan and amber a discrepancy; small text uses the lighter tint
   of each colour so it holds contrast on black. Hover reads as inspecting: the card lifts and its
   edge sharpens. */
.leak { --panel: var(--card-solid); isolation: isolate; display: flex; flex-direction: column; cursor: default; transition: transform var(--t-micro) var(--spring); }
.leak::before, .leak::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--t-micro) var(--spring-soft); }
.leak::before { z-index: -1; box-shadow: var(--shadow-2); }
.leak::after { z-index: 4; box-shadow: inset 0 0 0 1px var(--hair-2); }
@media (hover: hover) { .leak:hover { transform: translateY(-3px) scale(1.005); } }
@media (hover: hover) { .leak:hover::before, .leak:hover::after { opacity: 1; } }
.lv { position: relative; display: flex; flex-direction: column; container: lv / inline-size; height: 236px; padding: 20px 22px 18px; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: transparent; }
.lv > * { position: relative; z-index: 1; }
/* A finding warms the instrument: a low amber wash rises behind the figure and the result line,
   fading out before the panel edge. */
.lv::after { content: ""; position: absolute; left: -10%; top: 8%; width: 84%; height: 92%; pointer-events: none; background: radial-gradient(closest-side, rgba(232, 162, 0, 0.11), rgba(232, 162, 0, 0)); opacity: 0; transition: opacity 0.6s var(--spring-soft); }
.leak.is-done .lv::after { opacity: 1; }
.lv__top { display: flex; justify-content: space-between; gap: 12px; font: 500 var(--fs-micro)/1 var(--mono); color: var(--ink-3); }
.lv__top span { white-space: nowrap; }
.lv__top span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Narrow cards keep the header on one line by tightening it. */
@container lv (max-width: 300px) { .lv__top { font-size: 0.59375rem; letter-spacing: 0.03em; } }
.lv__fig { display: flex; flex: 1; align-items: center; min-height: 0; }
.lv__fig > * { width: 100%; }
.lv__out { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; font-weight: 500; color: var(--amber-ink); }
.lv__out .flag { width: 8px; height: 8px; box-shadow: 0 0 0 4px var(--amber-soft); }
.lv__out .flag::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--amber); opacity: 0; }
.leak.is-done .lv__out .flag::after { animation: ring 5s var(--spring-soft) 1.2s infinite; }
.leak__body { display: flex; flex: 1; flex-direction: column; padding: 22px 22px 24px; border-top: 1px solid var(--hair); }
.leak__n { font-size: 0.75rem; color: var(--ink-3); }
.leak h3 { margin: 10px 0 8px; font-size: 1.25rem; }
.leak__body p { margin: 0 0 14px; font-size: 0.9375rem; color: var(--ink-2); }
/* A read-out line: the label holds its column and the finding wraps beside it. */
.leak__body .leak__caught { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; max-width: none; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 0.875rem; color: var(--ink); }
.leak__caught span { font: 500 var(--fs-micro)/1 var(--mono); color: var(--ink-3); }
/* Side by side, every footer keeps two lines' height, so the rules line up across the cards. */
@media (min-width: 900px) { .leaks:not(.is-scene) .leak__caught { min-height: calc(14px + 3.2em); } }

/* Ghost workers: a week of gate checks; the scan passes and every day comes back empty. */
.gw { position: relative; height: 64px; }
.gw__base { position: absolute; left: 10%; right: 10%; top: 22px; height: 1px; background: var(--hair-2); transform-origin: left center; }
.gw__days { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gw__days li { position: relative; display: grid; justify-items: center; align-content: start; gap: 14px; padding-top: 16px; font: 500 0.75rem/1 var(--mono); color: var(--ink-3); }
.gw__ring { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink-4); background: var(--panel); }
.gw__miss { position: absolute; top: 16px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 1.5px solid var(--amber-line); background: var(--panel); box-shadow: 0 0 0 4px rgba(232, 162, 0, 0.14); }
/* The scan is light, not a bar: a thin line that fades at both ends, with a short wash behind it. */
.gw__beam { position: absolute; left: 0; top: 0; width: 2px; height: 44px; margin-left: -1px; border-radius: 1px; background: linear-gradient(180deg, rgba(15, 215, 106, 0), var(--lime) 30%, var(--lime) 70%, rgba(15, 215, 106, 0)); opacity: 0; }
.gw__beam::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 72px; background: linear-gradient(90deg, rgba(15, 215, 106, 0), rgba(15, 215, 106, 0.2)); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }

/* Inflated hours: the claimed shift against the gate record on one time line. */
.sh { position: relative; display: grid; gap: 22px; }
/* Guides drop from the gate times to the claim, so the overrun reads as what falls outside them. */
.sh__guide { position: absolute; top: 17px; left: calc(56px + var(--x) * (100% - 56px)); width: 1px; height: 56px; background: repeating-linear-gradient(180deg, rgba(var(--fg), 0.3) 0 3px, transparent 3px 6px); transform-origin: center bottom; }
.sh__lane { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; }
.sh__k { font: 500 0.625rem/1 var(--mono); color: var(--ink-3); }
.sh__track { position: relative; height: 34px; }
.sh__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--hair); }
.sh__line, .sh__over { position: absolute; top: 50%; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); border-radius: 2px; transform-origin: left center; }
.sh__claim { height: 2px; margin-top: -1px; background: rgba(var(--fg), 0.32); }
.sh__gate { height: 4px; margin-top: -2px; background: var(--lime); box-shadow: 0 2px 10px rgba(15, 215, 106, 0.3); }
.sh__over { height: 4px; margin-top: -2px; background: var(--amber); box-shadow: 0 2px 10px rgba(232, 162, 0, 0.28); }
/* Each overrun grows outward from the gate record: the early start leftward, the late finish rightward. */
.sh__claim + .sh__over { transform-origin: right center; }
.sh__t { position: absolute; left: calc(var(--x) * 100%); bottom: calc(50% + 8px); font: 500 0.625rem/1 var(--mono); white-space: nowrap; color: var(--ink-3); }
.sh__t:last-child { transform: translateX(-100%); }
.sh__t--gate { top: calc(50% + 8px); bottom: auto; color: var(--lime-ink); }

/* Proxy clocking: one identity, scanned at two gates a second apart. */
.px { position: relative; height: 112px; }
.px__line { position: absolute; left: 16%; right: 16%; top: 46%; height: 1px; background: repeating-linear-gradient(90deg, rgba(var(--fg), 0.26) 0 4px, transparent 4px 9px); transform-origin: center; }
.px__gate { position: absolute; top: 46%; width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.px__gate--a { left: 16%; }
.px__gate--b { left: 84%; }
.px__ring, .px__ping { position: absolute; inset: 0; border-radius: 50%; }
.px__ring { border: 2px solid var(--lime); background: var(--panel); box-shadow: 0 0 0 4px var(--lime-soft); }
.px__ping { border: 1px solid var(--lime); opacity: 0; }
.px__dot { position: absolute; left: 16%; top: 46%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px var(--lime-soft); opacity: 0; }
.px__dot::before { content: ""; position: absolute; top: 2px; right: 3px; width: 40px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(15, 215, 106, 0), rgba(15, 215, 106, 0.6)); }
.px__k, .px__t { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.px__k { top: calc(100% + 12px); font: 500 0.625rem/1 var(--mono); color: var(--ink-3); }
.px__t { top: calc(100% + 28px); font: 500 0.75rem/1 var(--mono); color: var(--ink); }
.px__gap { position: absolute; left: 16%; right: 16%; top: 46%; display: grid; justify-items: center; gap: 6px; transform: translateY(calc(-100% - 12px)); }
.px__gap span { order: -1; font: 500 var(--fs-micro)/1 var(--mono); color: var(--amber-ink); }
.px__gap i { display: block; width: 100%; height: 8px; border: 1px solid var(--amber-line); border-bottom: 0; border-radius: 4px 4px 0 0; transform-origin: center; }
@media (max-width: 559px) { .lv { height: 220px; } }
/* Phones: the leaks stack. Each card holds near the top while the next slides over it, and the
   one beneath settles back a little (js/leaks.js scales it and raises its veil, with scroll). */
.leak__veil { position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: var(--veil); opacity: 0; pointer-events: none; }
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .js:not(.rm) .leaks__grid { gap: 24px; }
  .js:not(.rm) .leak { position: sticky; top: calc(var(--nav-h) + 16px); transform-origin: 50% 0; transition: none; box-shadow: var(--shadow-2); }
  .js:not(.rm) .leak:nth-child(2) { top: calc(var(--nav-h) + 28px); }
  .js:not(.rm) .leak:nth-child(3) { top: calc(var(--nav-h) + 40px); }
}


/* Leaks as a scene (desktop): the section pins and the three leaks take turns. Within its
   turn, each card's evidence check is driven by scroll. A stepper tracks where you are.
   Without the scene (reduced motion, no script) the cards sit side by side under the heading. */
.leaks__steps { display: none; }
@media (min-width: 1024px) {
  .leaks.is-scene { padding-block: 0; }
  .leaks.is-scene .leaks__pin { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding-block: calc(var(--nav-h) + 24px) 104px; }
  .leaks.is-scene .leaks__scene { display: grid; grid-template-columns: var(--split); gap: var(--split-gap); align-items: center; }
  .leaks.is-scene .head { margin-bottom: 44px; }
  .leaks.is-scene .leaks__steps { display: grid; border-top: 1px solid var(--hair); }
  .leaks__steps li { position: relative; display: flex; align-items: baseline; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--hair); font: var(--w-title) 1rem/1.3 var(--head); font-stretch: var(--semi); letter-spacing: -0.01em; color: var(--ink); opacity: 0.36; transition: opacity 0.35s var(--spring-soft); }
  .leaks__steps li span { font-size: 0.6875rem; color: var(--ink-3); }
  .leaks__steps li.is-on { opacity: 1; }
  .leaks__steps li i { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--em-2); box-shadow: 0 0 8px var(--lime-glow); transform-origin: left center; transform: scaleX(0); }
  .leaks.is-scene .leaks__grid { grid-template-columns: minmax(0, 1fr); }
  .leaks.is-scene .leak { grid-area: 1 / 1; opacity: 0; transform: translateY(32px) scale(0.985); pointer-events: none; transition: opacity 0.18s var(--spring-soft), transform 0.65s var(--spring); }
  .leaks.is-scene .leak.is-past { transform: translateY(-32px) scale(0.985); }
  .leaks.is-scene .leak.is-active { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.4s var(--spring-soft) 0.14s, transform 0.65s var(--spring); }
  .leaks.is-scene .lv { height: 268px; padding: 24px; }
  .leaks.is-scene .leak__body { padding: 26px 28px 28px; }
  .leaks.is-scene .leak h3 { font-size: 1.5rem; }
}

/* ============================== 04 HOW ============================== */
.how__grid { display: grid; gap: 40px; }
.how__left { display: contents; }
.how__left .head { order: 1; margin-bottom: 0; }
.how__right { order: 2; }
.steps { order: 3; display: grid; }
.how .aside { order: 4; margin: 0; font-size: 0.9375rem; color: var(--ink-3); }
.step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 24px 0; border-top: 1px solid var(--hair); transition: opacity 0.45s var(--spring-soft); }
/* Scroll focus (desktop, js/how.js): opacity follows the reading line and the top rule fills. */
.how.is-focus .step { transition: none; }
.how.is-focus .step::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, var(--em-2), rgba(15, 215, 106, 0.2)); transform-origin: left center; transform: scaleX(var(--f, 0)); }
.step:last-child { border-bottom: 1px solid var(--hair); }
.step__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--fg), 0.04); box-shadow: inset 0 0 0 1px rgba(var(--fg), 0.14); font-size: 0.75rem; color: var(--ink-3); transition: background-color 0.3s var(--spring-soft), color 0.3s var(--spring-soft); }
.step h3 { margin-bottom: 6px; }
.step p { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.step.is-on .step__n { background: linear-gradient(180deg, var(--em-2), var(--em-1)); box-shadow: 0 0 0 4px rgba(11, 190, 93, 0.18); color: #03170D; }
@media (min-width: 1024px) {
  .how__grid { grid-template-columns: var(--split); column-gap: var(--split-gap); row-gap: 0; align-items: start; }
  .how__left { display: block; grid-column: 1; }
  .how__left .head { margin-bottom: clamp(48px, 6vw, 72px); }
  .how__right { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--nav-h) + 40px); }
  .how .aside { margin-top: 28px; }
  .step { padding: 40px 0; }
  .js .step { opacity: 0.36; }
  .js .step.is-on { opacity: 1; }
}
/* Without the scroll focus every step is fully legible. */
@media (prefers-reduced-motion: reduce) { .js .step { opacity: 1; } }
.rm .step { opacity: 1 !important; }

/* The stage is a light instrument too: a header bar, then a panel with a faint grid where each
   step's view plays. Green is verified, amber is held. */
.stage { overflow: hidden; }
.stage__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--hair); font-size: var(--fs-micro); color: var(--ink-3); }
/* Step dots: fixed 28px bars placed and sized by transform (positions from js/how.js). */
.stage__dots { position: relative; display: block; width: 112px; height: 3px; margin-left: auto; }
/* Phones: the stage steps through on its own, so it carries a pause control (WCAG 2.2.2). */
.stage__pause { display: none; }
@media (max-width: 1023px) {
  .js:not(.rm) .stage__pause { display: inline-flex; align-items: center; min-height: 24px; margin: -6px -4px -6px 14px; padding: 0 4px; border: 0; border-radius: 4px; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-2); cursor: pointer; }
  @media (hover: hover) { .stage__pause:hover { color: var(--ink); } }
  .js:not(.rm) .stage__pause { position: relative; }
  .stage__pause::after { content: ""; position: absolute; inset: -10px -8px; }
}
.stage__dots i { position: absolute; left: 0; top: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--hair-2); transform-origin: left center; transform: translateX(var(--x, 0px)) scaleX(var(--s, 0.5714)); transition: transform 0.45s var(--spring); }
.stage__dots i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--em-2); opacity: 0; transition: opacity 0.3s var(--spring-soft); }
.stage__dots i.is-on::after { opacity: 1; }
.stage__view { position: relative; height: clamp(392px, 44vw, 500px); background: transparent; }
.sv { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(18px, 2.4vw, 28px); opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.985); transition: opacity 0.3s var(--spring-soft), transform 0.6s var(--spring), visibility 0s linear 0.3s; }
.sv.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.4s var(--spring-soft) 0.06s, transform 0.6s var(--spring) 0.06s, visibility 0s; }

.sv--scan { flex-direction: row; align-items: center; gap: clamp(16px, 2.4vw, 28px); }
/* The gate terminal, built in CSS 3D: a slab of six thin layers on a galvanised post. The view
   plays the check in causal order (js/how.js adds .is-run): the terminal turns into view, the
   screen wakes, the brackets lock, the face points land, a scan passes, then the screen turns lime
   and the tick lands. Without the run (reduced motion, no script) it shows the verified state.
   On fine pointers the terminal leans toward the pointer (--tx, --ty, set every frame by a live spring
   in js/how.js, so there is no transition here). */
.term { position: relative; flex: none; height: 100%; aspect-ratio: 4 / 5; perspective: 1100px; }
.term__post { position: absolute; left: 41%; top: 0; bottom: 0; width: 30%; border-radius: 6px; background: linear-gradient(90deg, #7D868C 0%, #B9C0C4 26%, #D7DCDE 40%, #A6AEB3 62%, #6E767B 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.term__rig { position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1 / 2; transform: translate(-50%, -50%) rotateY(-18deg) rotateX(3deg); transform-style: preserve-3d; }
/* --turn (js/how.js): the terminal turns in from side on as the stage scrolls up to it (1 to 0),
   showing the depth of its slab, and leans with the pointer on top of that. */
.term__tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--tx, 0) * 9deg - var(--turn, 0) * 52deg)) rotateX(calc(var(--ty, 0) * -7deg + var(--turn, 0) * 6deg)); }
.term__shade { position: absolute; inset: 6% -10% -2% 10%; border-radius: 22px; background: rgba(20, 24, 26, 0.5); filter: blur(16px); transform: translateZ(-46px); }
.term__ex { position: absolute; inset: 0; border-radius: 16px; background: #262D31; transform: translateZ(calc(var(--z) * -3px)); }
.term__ex:first-of-type { background: #4A535A; }
.term__face { position: absolute; inset: 0; overflow: hidden; border-radius: 16px; background: linear-gradient(160deg, #262C30 0%, #171B1E 45%, #0F1214 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.term__cams { position: absolute; left: 50%; top: 4.6%; display: flex; align-items: center; gap: 7px; transform: translateX(-50%); }
.term__cams i { width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #59626A, #0A0C0D 62%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.term__cams i:nth-child(2) { width: 9px; height: 9px; }
.term__led { position: absolute; right: 8%; top: 4.4%; width: 4px; height: 11px; border-radius: 2px; background: #3B4247; }
.term__led::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--lime); box-shadow: 0 0 8px var(--lime-glow); }
.term__screen { position: absolute; left: 8.5%; right: 8.5%; top: 11%; bottom: 25%; overflow: hidden; border-radius: 7px; background: #070A0B; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.term__wake { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 42%, rgba(15, 215, 106, 0.16), rgba(15, 215, 106, 0) 70%), #0C1214; }
.term__ui { position: absolute; inset: 0; width: 100%; height: 100%; }
.term__bk path { fill: none; stroke: var(--lime); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.term__bk, .term__pts circle { transform-box: fill-box; transform-origin: center; }
.term__mesh { fill: none; stroke: rgba(242, 244, 244, 0.22); stroke-width: 0.5; stroke-linecap: round; stroke-linejoin: round; }
.term__pts circle { fill: rgba(242, 244, 244, 0.92); }
/* The scan: a layer over the face region with its line on the top edge, moved by its own height. */
.term__scan { position: absolute; left: 8%; right: 8%; top: 17%; height: 52%; opacity: 0; background: linear-gradient(180deg, var(--lime) 0, var(--lime) 2px, rgba(15, 215, 106, 0) 2px); box-shadow: 0 -1px 10px -2px var(--lime-glow); }
.term__scan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; background: linear-gradient(180deg, rgba(15, 215, 106, 0), rgba(15, 215, 106, 0.18)); }
.term__hint { position: absolute; left: 0; right: 0; bottom: 7%; font: 500 0.5rem/1 var(--mono); text-align: center; color: var(--on-dark-3); opacity: 0; }
.term__ok { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; background: var(--lime); }
.term__tick { width: 46px; height: 46px; fill: none; stroke: var(--gun); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.term__ok span { font: 500 0.5625rem/1 var(--mono); color: var(--gun); }
.term__fp { position: absolute; left: 50%; bottom: 7%; width: 24%; height: 10%; border-radius: 6px; background: linear-gradient(180deg, #08090A, #1B2023); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.07); transform: translateX(-50%); }
.term__glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 36%); transform: translateX(calc((var(--tx, 0) - var(--turn, 0) * 2) * -8%)); }

/* The run. Delays are the causal order; the screen finishes on lime at about 1.5 s. */
.sv--scan.is-run .term__rig { animation: term-in 0.9s var(--spring) both; }
.sv--scan.is-run .term__wake { animation: fade-in 0.4s var(--spring-soft) both 0.25s; }
.sv--scan.is-run .term__bk { animation: brackets 0.6s var(--spring) both 0.35s; }
.sv--scan.is-run .term__mesh { animation: fade-in 0.5s var(--spring-soft) both 0.6s; }
.sv--scan.is-run .term__pts circle { animation: dot-in 0.3s var(--spring-soft) both calc(0.5s + var(--i) * 0.028s); }
.sv--scan.is-run .term__scan { animation: term-scan 0.85s var(--harmonic) both 0.62s; }
.sv--scan.is-run .term__hint { animation: hint-life 1.2s var(--spring-soft) both 0.3s; }
.sv--scan.is-run .term__ok, .sv--scan.is-run .term__led::after { animation: fade-in 0.3s var(--spring-soft) both 1.45s; }
.sv--scan.is-run .term__tick { animation: tick-in 0.45s var(--spring) both 1.5s; }
.sv--scan.is-run .term__ok span { animation: rise 0.45s var(--spring) both 1.6s; }
/* Waiting to be seen: held on the first frame. */
.sv--scan.is-wait, .sv--scan.is-wait * { animation-play-state: paused !important; }
@keyframes term-in { from { opacity: 0; transform: translate(-50%, -46%) rotateY(-18deg) rotateX(3deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes dot-in { from { opacity: 0; transform: scale(0.3); } }
@keyframes tick-in { from { opacity: 0; transform: scale(0.6); } }
@keyframes brackets { from { transform: scale(1.18); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes term-scan { 0% { transform: translateY(0); opacity: 0; } 10%, 82% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes hint-life { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }
.sv__read { display: grid; flex: 1; gap: 16px; margin: 0; min-width: 0; }
.sv__read div { padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.sv__read dt { margin-bottom: 6px; font-size: var(--fs-micro); color: var(--ink-3); }
.sv__read dd { margin: 0; font-size: 0.9375rem; color: var(--ink); }
/* Readings follow the scan that produces them. */
.sv--scan.is-run .sv__read div { animation: rise 0.6s var(--spring) both 1.65s; }
.sv--scan.is-run .sv__read div:nth-child(2) { animation-delay: 1.75s; }
.sv--scan.is-run .sv__read div:nth-child(3) { animation-delay: 1.85s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* The invoice line the scan settles: waiting until the screen turns lime, then approved. The two
   readings share one place and cross-fade. */
.sv__line dd { display: grid; }
.sv__wait, .sv__done { grid-area: 1 / 1; }
.sv__wait { opacity: 0; color: var(--ink-3); }
.sv__done { color: var(--lime-ink); }
.sv--scan.is-run .sv__wait { animation: wait-out 0.3s var(--spring-soft) both 1.85s; }
.sv--scan.is-run .sv__done { animation: rise 0.5s var(--spring) both 1.9s; }
@keyframes wait-out { from { opacity: 1; } to { opacity: 0; } }

/* Hands on (js/how.js): hold the button and the terminal scans for as long as it is held, the
   ring filling; at 1.1 s the screen turns lime, the time is now, and the invoice line is approved.
   Let go early and it is back as it was. A key press runs the same scan. */
.stage__try {
  position: absolute; z-index: 2; left: clamp(18px, 2.4vw, 28px); bottom: clamp(16px, 2.2vw, 26px);
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 5px;
  border: 0; border-radius: 999px; background: #0C110E; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 26px -12px rgba(0, 0, 0, 0.55);
  font: 500 0.8125rem/1 var(--mono); cursor: pointer; touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.3s var(--spring-soft), transform 0.5s var(--spring), visibility 0s linear 0.3s;
}
.stage.is-scan .stage__try { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s var(--spring-soft) 0.4s, transform 0.5s var(--spring) 0.4s, visibility 0s; }
.stage__try:active { transform: scale(0.97); }
.stage__ring { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(15, 215, 106, 0.14); }
.stage__ring svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.stage__ring circle { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 2; }
.stage__ring .stage__fill { stroke: var(--em-2); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.25s var(--spring-soft); }
.stage__try.is-holding .stage__fill { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s linear; }
.stage__face { width: 18px; height: 18px; fill: none; stroke: var(--em-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sv--scan.is-hold .term__ok, .sv--scan.is-hold .term__led::after { opacity: 0; animation: none; }
.sv--scan.is-hold .term__wake, .sv--scan.is-hold .term__mesh, .sv--scan.is-hold .term__pts circle { opacity: 1; animation: none; }
.sv--scan.is-hold .term__bk { animation: brackets 0.4s var(--spring) both; }
.sv--scan.is-hold .term__scan { animation: term-scan 0.8s var(--harmonic) infinite; }
.sv--scan.is-hold .term__hint { opacity: 1; animation: none; }
.sv--scan.is-hold .sv__wait { opacity: 1; animation: none; }
.sv--scan.is-hold .sv__done { opacity: 0; animation: none; }
/* Let go early: the terminal waits, face found, for a scan that has not happened. */
.sv--scan.is-idle .term__ok, .sv--scan.is-idle .term__led::after, .sv--scan.is-idle .term__tick { opacity: 0; animation: none; }
.sv--scan.is-idle .term__wake, .sv--scan.is-idle .term__mesh, .sv--scan.is-idle .term__pts circle, .sv--scan.is-idle .term__hint { opacity: 1; animation: none; }
.sv--scan.is-idle .sv__wait { opacity: 1; animation: none; }
.sv--scan.is-idle .sv__done { opacity: 0; animation: none; }
.sv--scan.is-pass .term__ok, .sv--scan.is-pass .term__led::after { animation: fade-in 0.3s var(--spring-soft) both; }
.sv--scan.is-pass .term__tick { animation: tick-in 0.45s var(--spring) both 0.05s; }
.sv--scan.is-pass .term__ok span { animation: rise 0.45s var(--spring) both 0.15s; }
.sv--scan.is-pass .sv__time, .sv--scan.is-pass .sv__done { animation: rise 0.5s var(--spring) both 0.25s; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes growy { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.sv__title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px; }
.sv__title strong { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; }
.sv__title span { font-size: 0.78125rem; color: var(--ink-3); }
.sv__sum { display: flex; align-items: baseline; justify-content: space-between; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 0.8125rem; color: var(--ink-3); }
.sv__sum strong { font-size: 1.25rem; font-weight: 500; color: var(--ink); }
.sv--sheet .sv__sum strong { color: var(--lime-ink); }
.sv--exc .sv__sum strong { color: var(--amber-ink); }

/* Hours: each day's gate record on one time scale, 06:00 to 19:00. */
.sheet { display: grid; gap: 14px; }
.sheet li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 92px; align-items: center; gap: 12px; font-size: 0.75rem; color: var(--ink-2); }
.sheet__track { position: relative; height: 6px; border-radius: 3px; background: rgba(var(--fg), 0.06); }
.sheet__track i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); right: calc((1 - var(--b)) * 100%); border-radius: 3px; background: var(--lime); box-shadow: 0 1px 6px rgba(15, 215, 106, 0.3); transform-origin: left center; }
.sheet__axis { position: relative; height: 12px; margin: 12px 104px 0 46px; font-size: 0.625rem; color: var(--ink-3); }
.sheet__axis span { position: absolute; top: 0; left: calc(var(--x) * 100%); transform: translateX(-50%); white-space: nowrap; }
.sheet__axis span:first-child { transform: none; }
.sheet__axis span:last-child { transform: translateX(-100%); }
.sv--sheet.is-on .sheet__track i { animation: grow 0.6s var(--spring) both 0.1s; }
.sv--sheet.is-on .sheet li:nth-child(2) i { animation-delay: 0.18s; }
.sv--sheet.is-on .sheet li:nth-child(3) i { animation-delay: 0.26s; }
.sv--sheet.is-on .sheet li:nth-child(4) i { animation-delay: 0.34s; }
.sv--sheet.is-on .sheet li:nth-child(5) i { animation-delay: 0.42s; }
.sv--sheet.is-on .sheet__axis { animation: rise 0.6s var(--spring) both 0.5s; }
.sv--sheet.is-on .sv__sum { animation: rise 0.6s var(--spring) both 0.6s; }

/* Check: the invoice line against the gate record on one scale. A guide carries the gate total up
   to the invoice, and the overrun is what falls past it. */
.cmp { position: relative; display: grid; gap: 14px; }
.cmp__lane { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 12px; }
.cmp__k { font-size: var(--fs-micro); color: var(--ink-3); }
.cmp__lane strong { text-align: right; font-size: 0.8125rem; font-weight: 500; }
.cmp__track { position: relative; height: 20px; }
.cmp__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--hair); }
.cmp__claim, .cmp__gate, .cmp__over { position: absolute; top: 50%; left: 0; border-radius: 2px; transform-origin: left center; }
.cmp__claim { width: 100%; height: 2px; margin-top: -1px; background: rgba(var(--fg), 0.32); }
.cmp__gate { width: calc(var(--g) * 100%); height: 4px; margin-top: -2px; background: var(--lime); box-shadow: 0 2px 10px rgba(15, 215, 106, 0.3); }
.cmp__over { left: calc(var(--g) * 100%); right: 0; height: 4px; margin-top: -2px; background: var(--amber); box-shadow: 0 2px 10px rgba(232, 162, 0, 0.28); }
.cmp__guide { position: absolute; top: 10px; left: calc(76px + var(--g) * (100% - 152px)); width: 1px; height: 34px; background: repeating-linear-gradient(180deg, rgba(var(--fg), 0.3) 0 3px, transparent 3px 6px); transform-origin: center bottom; }
.cmp__diff { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 0.875rem; font-weight: 500; color: var(--amber-ink); }
.cmp__diff .flag { width: 8px; height: 8px; box-shadow: 0 0 0 4px var(--amber-soft); }
.sv--check.is-on .sv__title { animation: rise 0.6s var(--spring) both 0.05s; }
.sv--check.is-on .cmp__claim { animation: grow 0.6s var(--spring-soft) both 0.15s; }
.sv--check.is-on .cmp__gate { animation: grow 0.6s var(--spring-soft) both 0.35s; }
.sv--check.is-on .cmp__guide { animation: growy 0.35s var(--spring-soft) both 0.75s; }
.sv--check.is-on .cmp__over { animation: grow 0.4s var(--spring) both 0.9s; }
.sv--check.is-on .cmp__diff { animation: rise 0.6s var(--spring) both 1.05s; }

/* Exceptions: each type, with a bar for what it holds. */
.exc { display: grid; }
.exc li { display: grid; grid-template-columns: minmax(0, 1fr) 32px 72px; align-items: center; column-gap: 10px; row-gap: 9px; padding: 12px 0 13px; border-bottom: 1px solid var(--hair); font-size: 0.875rem; }
.exc li:first-child { padding-top: 0; }
.exc li:last-child { border-bottom: 0; }
.exc li:nth-child(-n + 3) strong { color: var(--amber-ink); }
.exc span.mono { color: var(--ink-3); text-align: center; }
.exc strong { text-align: right; font-weight: 500; }
.exc li i { position: relative; grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(var(--fg), 0.06); }
.exc li i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--amber); transform-origin: left center; }
.sv--exc.is-on .sv__title { animation: rise 0.6s var(--spring) both 0.05s; }
.sv--exc.is-on .exc li { animation: rise 0.6s var(--spring) both 0.1s; }
.sv--exc.is-on .exc li:nth-child(2) { animation-delay: 0.18s; }
.sv--exc.is-on .exc li:nth-child(3) { animation-delay: 0.26s; }
.sv--exc.is-on .exc li:nth-child(4) { animation-delay: 0.34s; }
.sv--exc.is-on .exc li i::after { animation: grow 0.6s var(--spring-soft) both 0.4s; }
.sv--exc.is-on .exc li:nth-child(2) i::after { animation-delay: 0.48s; }
.sv--exc.is-on .exc li:nth-child(3) i::after { animation-delay: 0.56s; }
.sv--exc.is-on .sv__sum { animation: rise 0.6s var(--spring) both 0.6s; }

/* Pay: the run splits into approved and held, then the rows say so. */
.pay__split { display: flex; gap: 3px; height: 8px; margin-bottom: 18px; }
.pay__split i { display: block; height: 100%; border-radius: 3px; }
.pay__ok { width: calc(var(--v) * 100%); background: var(--lime); transform-origin: left center; }
.pay__held { flex: 1; background: var(--amber); transform-origin: right center; }
.pay { display: grid; }
.pay__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 0.875rem; font-weight: 500; }
.pay__row strong { font-size: 1.125rem; font-weight: 500; }
.pay__row .flag { margin-inline: 6px; }
.pay__row--ok strong { color: var(--lime-ink); }
.pay__row:not(.pay__row--ok) strong { color: var(--amber-ink); }
.pay__ev { margin: 14px 0 0; font-size: 0.75rem; color: var(--ink-3); }
.sv--pay.is-on .sv__title { animation: rise 0.6s var(--spring) both 0.05s; }
.sv--pay.is-on .pay__ok { animation: grow 0.7s var(--spring-soft) both 0.1s; }
.sv--pay.is-on .pay__held { animation: grow 0.45s var(--spring-soft) both 0.45s; }
.sv--pay.is-on .pay > * { animation: rise 0.6s var(--spring) both 0.3s; }
.sv--pay.is-on .pay > :nth-child(2) { animation-delay: 0.5s; }
.sv--pay.is-on .pay > :nth-child(3) { animation-delay: 0.6s; }

@media (max-width: 559px) {
  .sv--scan { flex-direction: column; align-items: stretch; }
  .term { height: 60%; width: auto; align-self: center; }
  .sv__read { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: none; }
  .sv__read dd { font-size: 0.78125rem; }
  .stage__view { height: 484px; }
}
/* Phones and tablets: the stage steps through its views by itself, so the button sits under them,
   always there and never over a reading; holding it brings the scan back. */
@media (max-width: 1023px) {
  .stage__try { position: relative; left: auto; bottom: auto; margin: 0 clamp(18px, 2.4vw, 28px) clamp(16px, 2.2vw, 26px); opacity: 1; visibility: visible; transform: none; }
  /* It keeps its place, so the pinned stage never changes height, but shows only with the scan. */
  .stage:not(.is-scan) .stage__try { opacity: 0; visibility: hidden; }
}
@media (max-width: 359px) { .stage__bar > .mono { display: none; } }

/* ============================== 05 NUMBERS ============================== */
/* A dark band, edge to edge, with the faint dot matrix (base.css .dots). */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 0 0 clamp(56px, 7vw, 96px); }
/* Below 900 px the two inputs sit side by side and the result spans beneath them. */
@media (max-width: 899px) { .stat:nth-child(3) { grid-column: 1 / -1; } }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { position: relative; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg); background: var(--glass), var(--surface); box-shadow: var(--shadow-1); }
/* Lit in sequence by scroll (js/scrubs.js): the sum reads £82bn × 1.7% = £1.4bn. */
.js .stat { opacity: 0.22; transform: translateY(10px); transition: opacity 0.45s var(--spring-soft), transform 0.6s var(--spring); }
.js .stat.is-lit { opacity: 1; transform: none; }
@media (min-width: 900px) {
  .stat:nth-child(2)::before, .stat:nth-child(3)::before { position: absolute; left: -14px; top: 50%; transform: translate(-50%, -50%); font: 300 1.75rem/1 var(--mono); color: var(--on-dark-3); }
  .stat:nth-child(2)::before { content: "×"; }
  .stat:nth-child(3)::before { content: "="; }
}
/* Two columns: × sits in the gutter between the inputs, = leads the result beneath them. */
@media (max-width: 899px) {
  .stat:nth-child(2)::before { content: "×"; position: absolute; left: -14px; top: 50%; transform: translate(-50%, -50%); font: 300 1.5rem/1 var(--mono); color: var(--on-dark-3); }
  .stat:nth-child(3) dd::before { content: "="; display: inline-block; margin-right: 0.3em; font-weight: 300; color: var(--on-dark-4); }
}
.stat dt { margin-bottom: 18px; font: 400 0.8125rem/1.35 var(--mono); color: var(--ink-2); }
.stat dd { font-family: var(--mono); margin: 0; font-size: clamp(2.5rem, 1.5rem + 2.8vw, 3.75rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; color: rgba(255, 255, 255, 0.72); }
.stat:last-child dd { color: #fff; }
.stats__k { margin: 0 0 16px; font: 400 0.8125rem/1.35 var(--mono); color: var(--ink-2); }
@media (max-width: 479px) { .stat { padding: 16px; } .stat dd { font-size: clamp(1.5rem, 8vw, 2.5rem); } }

/* Our own figures lead the section: an average PayRoll Protect site, measured, its weekly saving
   large, what it rests on beneath, and its share of labour spend beside the national estimate.
   Lit by scroll (js/scrubs.js): the figure counts in, then the bars grow, ours first. */
.ours { display: grid; gap: clamp(32px, 4vw, 48px); margin: 0 0 clamp(40px, 5vw, 64px); padding: clamp(24px, 3.2vw, 44px); border-radius: var(--r-lg); background: var(--glass), var(--surface); box-shadow: inset 0 0 0 1px rgba(15, 215, 106, 0.22), var(--shadow-1); }
@media (min-width: 900px) { .ours { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 88px); align-items: end; } }
.ours__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.ours__k { margin: 0; font: 400 0.8125rem/1.35 var(--mono); color: var(--ink-2); }
.ours__fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0; }
.ours__fig strong { font-family: var(--mono); font-size: clamp(3.25rem, 1.5rem + 5.4vw, 6rem); font-weight: 300; letter-spacing: -0.04em; line-height: 0.95; white-space: nowrap; color: #fff; }
.ours__fig > span { font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem); color: var(--mint); }
/* Each figure as wide as it needs, spread to the rule's two ends. */
.ours__basis { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 16px 20px; margin: clamp(24px, 3vw, 36px) 0 0; padding-top: 20px; border-top: 1px solid var(--hair-dark-2); }
.ours__basis div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; }
.ours__basis dt { font: 400 0.75rem/1.35 var(--mono); color: var(--ink-2); }
.ours__basis dd { margin: 0; font: 300 clamp(1.25rem, 1rem + 0.8vw, 1.75rem)/1.05 var(--mono); letter-spacing: -0.02em; white-space: nowrap; color: #fff; }
.ours__cmp { display: grid; gap: 18px; }
.vsbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px 16px; }
.vsbar__k { font-size: 0.9375rem; line-height: 1.35; color: var(--on-dark-2); }
.vsbar__v { font: 300 clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem)/1 var(--mono); letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.72); }
.vsbar--ours .vsbar__k { color: #fff; }
.vsbar--ours .vsbar__v { color: var(--mint); }
.vsbar__track { grid-column: 1 / -1; height: 10px; border-radius: 999px; background: rgba(var(--fg), 0.08); }
.vsbar__track i { display: block; height: 100%; border-radius: inherit; background: rgba(255, 255, 255, 0.38); transform: scaleX(var(--w)); transform-origin: left center; }
.vsbar--ours .vsbar__track i { background: linear-gradient(90deg, var(--em-1), var(--em-2)); box-shadow: 0 0 18px var(--lime-glow); }
.ours__vs { margin: 2px 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--on-dark-3); }
.js .ours__lead, .js .vsbar { opacity: 0.22; transform: translateY(10px); transition: opacity 0.45s var(--spring-soft), transform 0.6s var(--spring); }
.js .ours__lead.is-lit, .js .vsbar.is-lit { opacity: 1; transform: none; }
.js .vsbar__track i { transform: scaleX(0); transition: transform 0.9s var(--spring) 0.1s; }
.js .vsbar.is-lit .vsbar__track i { transform: scaleX(var(--w)); }
@media (max-width: 479px) { .ours__basis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ours__basis div:last-child { grid-column: 1 / -1; } }

.calc { display: grid; gap: 32px; }
/* Side by side, the pilot button sits under the copy in the left column; on a phone it follows the
   calculator. */
@media (min-width: 900px) {
  .calc { grid-template-columns: var(--split); grid-template-rows: auto 1fr; gap: 32px var(--split-gap); }
  .calc__ui { grid-column: 2; grid-row: 1 / span 2; }
  .calc .numbers__cta { grid-column: 1; grid-row: 2; align-self: start; }
}
.calc__copy h3 { margin-bottom: 12px; font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); font-weight: var(--w-head); font-stretch: var(--wide); letter-spacing: var(--tr-head); }
.calc__copy p { color: var(--on-dark-2); }
.calc__copy .calc__more { margin: 22px 0 0; }
.calc__copy .calc__risk { margin: 12px 0 0; }
.calc__ui { display: grid; gap: 18px; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r-lg); background: var(--glass), var(--surface); box-shadow: var(--shadow-1); }
.calc__spend { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.calc__k { font: 500 var(--fs-micro)/1 var(--mono); color: var(--on-dark-3); }
.calc__val { font-family: var(--mono); font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem); font-weight: var(--w-figure); font-stretch: var(--semi); letter-spacing: -0.02em; color: #fff; }
.range { --p: 51.8%; width: 100%; height: 44px; margin: -8px 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.range:focus { outline: none; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--lime) var(--p), var(--gun-4) var(--p)); }
.range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(15, 215, 106, 0.22), 0 2px 8px rgba(0, 0, 0, 0.45); transition: transform var(--t-micro) var(--spring); -webkit-appearance: none; appearance: none; }
@media (hover: hover) { .range:hover::-webkit-slider-thumb { transform: scale(1.06); } }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--gun), 0 0 0 5px var(--lime); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--gun-4); }
.range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--lime); }
.range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(15, 215, 106, 0.22), 0 2px 8px rgba(0, 0, 0, 0.45); transition: transform var(--t-micro) var(--spring); }
.range:active::-moz-range-thumb { transform: scale(1.12); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--gun), 0 0 0 5px var(--lime); }
/* Quick values: a segmented control. One pill slides to the chosen value and fades out when the
   slider lands between presets. Presses respond at once. */
.calc__presets { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: min(100%, 304px); padding: 4px; border-radius: calc(var(--r-sm) + 4px); background: var(--gun-3); }
.calc__presets button { position: relative; height: 30px; padding: 0 8px; border: 0; border-radius: var(--r-sm); background: transparent; font: 500 0.75rem/1 var(--mono); color: var(--on-dark-2); cursor: pointer; transition: color var(--t-micro) var(--spring-soft), transform 0.12s var(--spring-soft); }
@media (hover: hover) { .calc__presets button:hover { color: #fff; } }
.calc__presets button:active { transform: scale(0.94); }
/* Every small control takes a 44 px hit area (Apple's minimum) from a clear layer that overhangs it. */
.calc__presets button::after { content: ""; position: absolute; inset: -7px -2px; }
.calc__presets button[aria-pressed="true"] { color: var(--gun); }
.calc__pill { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 20px) / 4); border-radius: var(--r-sm); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transform: translateX(calc(var(--i, 1) * (100% + 4px))); transition: transform 0.45s var(--spring), opacity var(--t-micro) var(--spring-soft); }
.calc__presets.is-free .calc__pill { opacity: 0; }
.calc__presets.is-snap .calc__pill { transition: none; }
/* Arriving from "Change the spend": an emerald ring lights round the calculator once as the page
   lands. */
.calc__ui::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 2px var(--em-2), 0 0 28px var(--lime-glow); opacity: 0; }
.calc__ui.is-cue::after { animation: cue 1.2s var(--spring-soft); }
@keyframes cue { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.calc__out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.calc__out > div { display: grid; gap: 12px; padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
/* The year: the hero's glowing result, emerald rising from the foot. */
.calc__out > div:last-child { background: radial-gradient(120% 100% at 50% 135%, rgba(15, 215, 106, 0.34) 0%, rgba(11, 190, 93, 0.12) 45%, transparent 75%), rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(15, 215, 106, 0.22); }
.calc__out strong { font-family: var(--mono); font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem); font-weight: var(--w-figure); font-stretch: var(--semi); letter-spacing: -0.02em; color: #fff; }
/* Small phones: the two results stack, so a seven-figure year fits its tile. */
@media (max-width: 479px) { .calc__out { grid-template-columns: minmax(0, 1fr); } }
.calc__day { margin: 0; font-size: 0.75rem; color: var(--on-dark-3); }

/* ============================== FILM: TO ORBIT ============================== */
/* A mid-page film (js/film.js), built like the hero: frames scrubbed by scroll in a pinned
   section. The camera rises from the gate terminal's green tick to the dusk sky; a gauge on the
   right climbs from the gate to orbit; as the sky opens a train of satellites drifts across and
   one takes a line of light from the gate. */
.film { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--gun); color: #fff; }
.film__stage { position: absolute; inset: 0; }
.film__canvas, .film__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__poster { opacity: 0; }
.film.is-static .film__poster, .no-js .film__poster { opacity: 1; }
.film.is-static .film__canvas, .no-js .film__canvas { display: none; }
/* The foot of the frame fades into the band's own dark, so the film runs on into Installation. */
.film__shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(1, 1, 1, 0) 78%, var(--gun) 100%),
  linear-gradient(90deg, rgba(1, 3, 2, 0.74) 0%, rgba(1, 3, 2, 0.38) 38%, rgba(1, 3, 2, 0) 66%),
  linear-gradient(180deg, rgba(1, 3, 2, 0.5) 0%, rgba(1, 3, 2, 0) 24%, rgba(1, 3, 2, 0) 70%, rgba(1, 3, 2, 0.62) 100%); }

/* The sky overlay: positions are set per frame in CSS pixels by script. */
.film__sky { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.film__sat { position: absolute; left: 0; top: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.65); }
.film__sat.is-lead { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--lime); box-shadow: 0 0 0 5px rgba(15, 215, 106, 0.18), 0 0 16px 3px rgba(15, 215, 106, 0.75); }
.film.is-live .film__sat:not(.is-lead) { animation: glint 3.4s var(--harmonic) infinite alternate; }
.film.is-live .film__sat:nth-child(3n) { animation-delay: -1.1s; }
.film.is-live .film__sat:nth-child(3n + 1) { animation-delay: -2.3s; }
@keyframes glint { from { opacity: 1; } to { opacity: 0.45; } }
.film__beam { position: absolute; left: 0; top: 0; width: 0; height: 2px; margin-top: -1px; border-radius: 1px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(15, 215, 106, 0.1), var(--lime)); box-shadow: 0 0 14px rgba(15, 215, 106, 0.6); opacity: 0; }

/* The gauge: from the gate to orbit. The marker is a full-height layer moved by yPercent. */
.film__gauge { position: absolute; right: calc(var(--gutter) + 72px); top: 50%; z-index: 2; display: grid; justify-items: end; gap: 22px; height: 46vh; transform: translateY(-50%); }
.film__rail { position: relative; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.24); }
.film__tick { position: absolute; right: 12px; bottom: calc(var(--y) * 100%); transform: translateY(50%); font-size: var(--fs-micro); line-height: 1; white-space: nowrap; color: var(--on-dark-3); }
.film__tick::after { content: ""; position: absolute; right: -16px; top: 50%; width: 8px; height: 1px; background: rgba(255, 255, 255, 0.4); }
.film__marker { position: absolute; inset: 0; }
/* At orbit the marker's own reading takes over from the scale's top label, so it is never said twice. */
.film__tick--top { transition: opacity 0.3s var(--spring-soft); }
.film__gauge.is-top .film__tick--top { opacity: 0; }
.film__marker::before { content: ""; position: absolute; left: -4px; bottom: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(15, 215, 106, 0.18), 0 0 14px rgba(15, 215, 106, 0.7); }
.film__marker span { position: absolute; left: 16px; bottom: -6px; font-size: 0.75rem; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; }
.film__link { font-family: var(--mono); margin: 0; text-align: right; font-size: var(--fs-micro); line-height: 1; color: var(--on-dark-3); }
.film__link strong { display: block; margin-top: 8px; font-size: 0.8125rem; font-weight: 500; color: #fff; }
.film__link strong.is-ok { color: var(--lime); }

/* Captions: stacked in one place; they take turns. White like every headline, and unnumbered, so
   the page keeps one numbering (its sections) and green stays for verified results. */
.film__content { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; pointer-events: none; }
.film__line { font-family: var(--head); grid-area: 1 / 1; max-width: 760px; margin: 0; padding-right: 120px; font-size: clamp(1.625rem, 0.9rem + 3.2vw, 3.125rem); font-weight: var(--w-display); font-stretch: var(--wide); letter-spacing: var(--tr-display); line-height: 1.05; color: #fff; opacity: 0; visibility: hidden; }
/* Held still (reduced motion, no script), the caption reads whole: both lines, one under the other. */
.film.is-static .film__line, .no-js .film__line { grid-area: auto; opacity: 1; visibility: visible; }
@media (max-width: 767px) {
  .film__gauge { height: 34vh; right: 22px; }
  .film__tick { display: none; }
  .film__marker span { left: auto; right: 16px; }
  .film__line { padding-right: 64px; }
  .film__content { align-content: end; padding-bottom: 15svh; }
  .film__shade { background: linear-gradient(180deg, rgba(1, 1, 1, 0) 80%, var(--gun) 100%), linear-gradient(180deg, rgba(1, 3, 2, 0.6) 0%, rgba(1, 3, 2, 0.3) 40%, rgba(1, 3, 2, 0.3) 60%, rgba(1, 3, 2, 0.75) 100%); }
}

/* ============================== 07 INSTALLATION ============================== */
/* The gate goes online by satellite (js/sat.js). A light instrument holds a line drawing of the
   site: gate and terminal, cabin and Starlink dish, the orbit above. Lime marks a live link and a
   verified scan, amber a dropped link and the scans waiting at the gate. */
.sat__scene { display: grid; gap: 40px; }
.sat__copy .head { margin-bottom: 32px; }
.sat__steps { display: grid; margin: 0 0 28px; border-top: 1px solid var(--hair); }
.sat__steps li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.sat__steps li > .mono { padding-top: 3px; font-size: 0.6875rem; color: var(--ink-3); }
.sat__steps strong { display: block; font: var(--w-title) 1rem/1.3 var(--head); font-stretch: var(--semi); letter-spacing: -0.01em; }
.sat__steps p { margin: 4px 0 0; font-size: 0.9375rem; color: var(--ink-2); }
.sat__steps li i { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform-origin: left center; transform: scaleX(0); }
.sat__more { margin-top: 4px; }

.sat { --panel: #0B0E0C; margin: 0; overflow: hidden; }
.sat__panel { position: relative; padding: clamp(18px, 2.4vw, 26px); background: transparent; }
.sat__panel > * { position: relative; z-index: 1; }
.sat__top { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-micro); line-height: 1; color: var(--ink-3); }
.sat__fig { position: relative; aspect-ratio: 640 / 400; margin-top: 10px; }
.sat__fig svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sat__lab { position: absolute; transform: translateX(-50%); font: 500 0.59375rem/1 var(--mono); white-space: nowrap; color: var(--ink-3); }
/* The dish label sits left of the dish, where the beam never passes. */
.sat__lab--end { transform: translateX(-100%); }
/* The link status gets the room it needs to stay on one line ("Offline, recording"), so the card
   never changes height as the status changes. */
.sat__read { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 14px 0 0; }
.sat__read > div { padding: 11px 13px; border-radius: 12px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.sat__read dt { margin-bottom: 8px; font-size: 0.75rem; line-height: 1; color: var(--ink-3); }
.sat__read dd { margin: 0; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; color: var(--ink); }
.sat__read dd.is-ok { color: var(--lime-ink); }
.sat__read dd.is-warn { color: var(--amber-ink); }
@media (max-width: 559px) { .sat__read dd { font-size: 0.8125rem; } }
.sat__cap { display: none; margin: 0; padding: 20px clamp(18px, 2.4vw, 26px) 22px; border-top: 1px solid var(--hair); font-size: 1rem; line-height: 1.5; color: var(--ink); }
.sat__cap-n { flex: none; font-size: 0.6875rem; color: var(--ink-3); }

/* The drawing: hairlines that stay 1px at any size. */
.sat__fig svg * { vector-effect: non-scaling-stroke; }
.s-line, .s-cabin { fill: none; stroke: rgba(255, 255, 255, 0.34); stroke-width: 1.25; }
.s-ground { stroke: rgba(255, 255, 255, 0.38); stroke-width: 1.25; }
.s-post { stroke: rgba(255, 255, 255, 0.5); stroke-width: 2.5; stroke-linecap: round; }
.s-orbit { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; stroke-dasharray: 2 5; }
.s-sat { fill: var(--ink-2); }
.s-sat__arm { fill: var(--ink-3); }
.s-sat__halo { fill: var(--lime-soft); stroke: rgba(15, 215, 106, 0.6); stroke-width: 1; opacity: 0; }
.s-beam__glow { stroke: rgba(15, 215, 106, 0.16); stroke-width: 10; stroke-linecap: round; }
.s-beam__core { stroke: var(--lime); stroke-width: 1.5; stroke-linecap: round; }
.s-cable { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 1.5; stroke-linejoin: round; }
.s-mast { stroke: rgba(255, 255, 255, 0.5); stroke-width: 2; stroke-linecap: round; }
.s-panel rect { fill: var(--ink-2); }
.s-term__body { fill: #2B3035; }
.s-screen { fill: #3A4248; }
.s-screen-on rect { fill: var(--lime); }
.s-screen-on path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.s-screen-on { opacity: 0; }
.s-led--ok { fill: var(--lime); opacity: 0; }
.s-led--warn { fill: var(--amber); opacity: 0; }
.s-q { fill: var(--amber); opacity: 0; }
.s-ring { fill: none; stroke: var(--lime); stroke-width: 1.25; opacity: 0; }
.s-ping { fill: none; stroke: var(--lime); stroke-width: 1.25; opacity: 0; }
.s-pkt { fill: var(--lime); opacity: 0; }
.s-pkt__glow { fill: rgba(15, 215, 106, 0.22); }
/* Without script the drawing never builds: show the readings only. */
.no-js .sat__fig { display: none; }

@media (min-width: 1024px) {
  .sat__scene { grid-template-columns: var(--split); gap: var(--split-gap); align-items: center; }
  .sat-sec.is-scene { padding-block: 0; }
  .sat-sec.is-scene .sat__pin { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding-block: calc(var(--nav-h) + 40px) 56px; }
  .sat-sec.is-scene .sat__steps p { display: none; }
  .sat-sec.is-scene .sat__steps li { padding: 15px 0; opacity: 0.36; transition: opacity 0.35s var(--spring-soft); }
  .sat-sec.is-scene .sat__steps li.is-on { opacity: 1; }
  /* Two lines of room, so the card never changes height as the caption changes. */
  .sat-sec.is-scene .sat__cap { display: flex; align-items: baseline; gap: 12px; min-height: 92px; }
  .sat__cap.is-in > span { animation: rise 0.5s var(--spring) both; }
  .sat__cap.is-in > span + span { animation-delay: 0.05s; }
}
/* Short laptop screens: the pinned scenes keep all of themselves on screen (the install scene its
   pill, the match scene the note under the invoice). */
@media (min-width: 1024px) and (max-height: 820px) {
  .match__pin { padding-block: calc(var(--nav-h) + 24px) 24px; }
  .sat-sec.is-scene .sat__pin { padding-block: calc(var(--nav-h) + 24px) 24px; }
  .sat-sec.is-scene .sat__copy .head { margin-bottom: 16px; }
  .sat-sec.is-scene .sat__brand { margin-top: 16px; padding-top: 12px; }
  .sat-sec.is-scene .sat__steps { margin-bottom: 16px; }
  .sat-sec.is-scene .sat__steps li { padding: 9px 0; }
  .sat-sec.is-scene .sat__more { --h: 40px; }
}

/* The Starlink lockup: a quiet credit line under the lead, the wordmark in its own colours. */
.sat__brand { display: flex; align-items: center; gap: 16px; max-width: none; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--hair-dark); }
.sat__brand span { font: 500 var(--fs-micro)/1 var(--mono); color: var(--on-dark-3); }
.sat__brand img { display: block; width: 128px; height: auto; }

/* On the home page the section is an orbital stage on a dark band, edge to edge, carrying on
   from the film above it: a night sky, the curve of the earth below with a faint green
   atmosphere, and the instrument drawn in light on glass. */
.sat-sec { position: relative; isolation: isolate; color: var(--on-dark); }
.sat__stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--gun); }
/* Stars (js/sat.js): a fixed, irregular field of points, fading toward the earth. */
.sat__stars { position: absolute; top: 0; left: 50%; width: 1920px; height: 1080px; transform: translateX(-50%); fill: #fff; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 84%); mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 84%); }
/* The earth: a vast circle whose rim crosses the foot of the stage, lit by a thin atmosphere. */
.sat__stage::after { content: ""; position: absolute; left: -70%; right: -70%; top: 88%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: #16191C; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.16), 0 -24px 80px -24px rgba(15, 215, 106, 0.26), inset 0 24px 48px -24px rgba(15, 215, 106, 0.16); }
.sat-sec .lead { color: var(--on-dark-2); }
.sat-sec .sat__steps { border-top-color: var(--hair-dark); }
.sat-sec .sat__steps li { border-bottom-color: var(--hair-dark); }
.sat-sec .sat__steps li > .mono { color: var(--on-dark-3); }
.sat-sec .sat__steps p { color: var(--on-dark-2); }
.sat-sec .sat__steps li i { background: var(--em-2); box-shadow: 0 0 8px var(--lime-glow); }
.sat-sec .sat__more { color: #fff; }
/* The instrument on glass. */
.sat-sec .sat { --panel: transparent; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
.sat-sec .sat__top, .sat-sec .sat__lab, .sat-sec .sat__read dt, .sat-sec .sat__cap-n { color: var(--on-dark-3); }
.sat-sec .sat__read { border-top-color: var(--hair-dark); }
.sat-sec .sat__read dd { color: #fff; }
.sat-sec .sat__read dd.is-ok { color: var(--lime); }
.sat-sec .sat__read dd.is-warn { color: var(--amber); }
.sat-sec .sat__cap { border-top-color: var(--hair-dark); color: var(--on-dark); }
.sat-sec .s-line, .sat-sec .s-cabin { stroke: rgba(255, 255, 255, 0.3); }
.sat-sec .s-ground { stroke: rgba(255, 255, 255, 0.42); }
.sat-sec .s-post, .sat-sec .s-mast { stroke: rgba(255, 255, 255, 0.55); }
.sat-sec .s-orbit { stroke: rgba(255, 255, 255, 0.24); }
.sat-sec .s-sat, .sat-sec .s-panel rect { fill: #E9EDEE; }
.sat-sec .s-sat__arm { fill: rgba(255, 255, 255, 0.55); }
.sat-sec .s-cable { stroke: rgba(255, 255, 255, 0.45); }
.sat-sec .s-term__body { fill: #0B0D0F; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; }
.sat-sec .s-screen { fill: #2A3136; }
.sat-sec .s-beam__glow { stroke: rgba(15, 215, 106, 0.24); }
.sat-sec .s-pkt__glow { fill: rgba(15, 215, 106, 0.3); }
@media (min-width: 1024px) {
  .sat-sec.is-scene .sat__stage { inset: calc(var(--nav-h) + 10px) clamp(8px, 1.2vw, 18px) 12px; border-radius: 28px; background: radial-gradient(55% 60% at 72% 100%, rgba(11, 190, 93, 0.16), transparent 72%), var(--gun); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
}

/* The homepage tells the story on the Earth itself (js/globe.js): a dot-matrix globe whose limb is
   the stage's horizon, with the satellites in the sky above it. The readouts sit in the sky. */
.sat-sec.has-globe .sat__stage::after { display: none; }
.sat-globe { position: relative; margin: 0; }
.sat__hud { position: relative; z-index: 1; max-width: 30rem; }
.sat__hud .sat__cap { padding: 14px 0 0; border-top: 0; }
.sat-globe__box { position: relative; width: 100%; aspect-ratio: 1; margin-top: 8px; touch-action: pan-y; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
.sat-globe__earth, .sat-globe__over { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Not pinned (phones, reduced motion): the night side of the globe fades into the stage, so the
   panel reads as sky, horizon and link rather than a black disc. The note stays unmasked. */
.sat-sec:not(.is-scene) .sat-globe__box { -webkit-mask-image: none; mask-image: none; }
.sat-sec:not(.is-scene) .sat-globe__earth, .sat-sec:not(.is-scene) .sat-globe__over { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 46%, transparent 88%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 46%, transparent 88%); }
.sat-globe__earth { opacity: 0; transition: opacity 1.2s var(--spring-soft); }
.sat-globe__box.is-ready .sat-globe__earth { opacity: 1; }
.sat-globe__lab { position: absolute; left: 0; top: 0; font: 500 var(--fs-micro)/1 var(--mono); white-space: nowrap; color: var(--on-dark-2); pointer-events: none; opacity: 0; transition: opacity 0.4s var(--spring-soft); }
.sat-globe__lab.is-on { opacity: 1; }
.sat-globe__lab[data-l="gate"] { color: #fff; translate: -100% 0; }
/* Narrow phones: the terminal's label drops its side of the site (the readout above still names it),
   so it stays on the globe, left of its point and clear of the servers' label. */
@media (max-width: 413px) { .sat-globe__at { display: none; } }
.sat-globe__note { position: absolute; right: 12px; bottom: 10px; padding: 3px 7px; border-radius: 6px; background: rgba(6, 10, 8, 0.88); font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--on-dark-3); }
@media (min-width: 1024px) {
  /* The globe fills the stage's right side (js/globe.js moves it into the stage); text stays clickable. */
  .sat-sec.has-globe.is-scene .sat__pin { pointer-events: none; }
  .sat-sec.has-globe.is-scene .sat__copy, .sat-sec.has-globe.is-scene .sat__hud { pointer-events: auto; }
  /* Over the globe the caption sits on dark glass, like the readouts, so it reads wherever the dots run. */
  .sat-sec.has-globe.is-scene .sat__hud .sat__cap { margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(1, 1, 1, 0.58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
  .sat-sec.is-scene .sat-globe { align-self: start; }
  /* Faded in from the left, and falling away at the foot, so the eye goes to the horizon. */
  .sat-sec.is-scene .sat-globe__box { position: absolute; top: 0; right: 0; bottom: 0; width: auto; margin: 0; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(180deg, #000 50%, rgba(0, 0, 0, 0.18) 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(180deg, #000 50%, rgba(0, 0, 0, 0.18) 100%); mask-composite: intersect; }
  .sat-sec.is-scene .sat-globe__box:active { cursor: grabbing; }
}

/* ============================== INSTALLATION PAGE ============================== */
/* installation.html: the same glass instruments as the home page. The satellite scene opens the
   page and plays as it scrolls; the process, the delivery and the questions follow. */
.ipage { padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 104px)); padding-bottom: clamp(72px, 9vw, 128px); }
/* From 1024 px the satellite scene pins this section once its script runs: it is a full screen from
   the first paint, so the pin moves nothing that is already on screen. */
@media (min-width: 1024px) { .ipage { min-height: 100vh; min-height: 100svh; } }
.ipage__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .ipage__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 72px; } }
.ipage__title { margin: 0 0 0.45em; font-size: clamp(1.875rem, 0.95rem + 2.7vw, 3rem); letter-spacing: var(--tr-head); line-height: 1.12; }
@media (min-width: 1024px) { .ipage__title { font-size: min(clamp(1.875rem, 0.95rem + 2.7vw, 3rem), 3.6vw); } }
.ipage__head .lead { margin: 0 0 24px; }
.ipage__head .sat__brand { margin: 0 0 32px; padding-top: 20px; }

/* The process: five steps on hairlines, number, name, then what happens. */
.ilist { display: grid; max-width: 1040px; margin: 0 auto; border-top: 1px solid var(--hair); }
.ilist li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 12px; padding: 26px 0; border-bottom: 1px solid var(--hair); }
.ilist__n { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--fg), 0.04); box-shadow: inset 0 0 0 1px rgba(var(--fg), 0.14); font-size: 0.75rem; color: var(--mint); }
.ilist h3 { font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); }
.ilist p { margin: 0; max-width: 46rem; color: var(--ink-2); }
@media (min-width: 900px) {
  .ilist li { grid-template-columns: 80px minmax(0, 4fr) minmax(0, 7fr); align-items: baseline; gap: 24px; padding: 34px 0; }
  .ilist__n { grid-row: auto; padding-top: 0; }
}

/* What arrives and what the site provides: two glass instrument cards. */
.needs { display: grid; gap: 20px; }
@media (min-width: 900px) { .needs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.needs__card { overflow: hidden; }
.needs__top { max-width: none; margin: 0; padding: 18px 24px; border-bottom: 1px solid var(--hair); font-size: var(--fs-micro); line-height: 1; color: var(--ink-3); }
.needs__list { display: grid; margin: 0; padding: 4px 24px 8px; }
.needs__list li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.needs__list li:last-child { border-bottom: 0; }
.needs__list strong { display: block; font-weight: 500; }
.needs__list span { display: block; margin-top: 3px; font-size: 0.9375rem; color: var(--ink-2); }
/* Status lights, centred on the first line: lit for what arrives, open for what the site provides. */
.needs__led { display: block; width: 8px; height: 8px; margin-top: calc(0.8em - 4px); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.needs__led.is-in { background: var(--lime); box-shadow: 0 0 0 4px var(--lime-soft); }

/* ============================== CHARTS ============================== */
/* Data-viz specs: 2px lines, a 10% area wash, end-dots of 10px with a 2px surface ring,
   solid hairline grid, values in ink (the coloured mark beside a value carries identity).
   Data marks settle on the critically damped spring, so no value ever overshoots. */
.chart { margin: 0; padding: clamp(20px, 2.6vw, 30px); }
.chart__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart__cap { font: 400 var(--fs-micro)/1.3 var(--mono); color: var(--ink-3); }
.chart__note { margin: 18px 0 0; max-width: none; font-size: 0.78125rem; line-height: 1.55; color: var(--ink-3); }
.chart__note a { position: relative; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
/* The note's trailing link: a full-size tap target without opening up the line. */
.chart__note a::after { content: ""; position: absolute; inset: -4px -2px; }

/* Governance: one contract, read like the other instruments. A playhead runs the contract from
   onboarding to its end: consent at the start, the encrypted template held behind the playhead,
   deletion where the contract ends, and the third-party lane empty the whole way. */
.gchart { display: flex; flex-direction: column; padding: 0; }
.gchart__panel { position: relative; padding: clamp(20px, 2.6vw, 30px); overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: transparent; }
.gchart__panel > * { position: relative; z-index: 1; }
.gchart__top { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
/* Where the contract is: one state at a time. Without script the finished state shows. */
.gchart__state { position: relative; min-width: 10rem; height: 14px; font-size: var(--fs-micro); line-height: 14px; color: var(--ink-3); }
.gchart__state span { position: absolute; top: 0; right: 0; white-space: nowrap; opacity: 0; }
.gchart__state span:last-child { opacity: 1; color: var(--lime-ink); }
.gchart__rows { display: grid; gap: 24px; margin-top: 32px; }
.gchart__row, .gchart__axis { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 12.5rem; column-gap: 24px; }
.gchart__row { align-items: center; row-gap: 8px; }
.gchart__k { grid-column: 1; grid-row: 1; font: 500 var(--fs-micro)/1.3 var(--mono); color: var(--ink-3); }
.gchart__track { position: relative; grid-column: 2; grid-row: 1; height: 22px; }
.gchart__lab { grid-column: 2; grid-row: 2; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); }
.gchart__end { grid-column: 3; grid-row: 1; font-size: 0.8125rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.gchart__base { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--hair-2); }
.gchart__base--void { background: repeating-linear-gradient(90deg, rgba(var(--fg), 0.3) 0 2px, transparent 2px 7px); }
.gchart__pt, .gchart__ping { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; }
.gchart__pt { border: 2px solid var(--lime); background: var(--surface-2); box-shadow: 0 0 0 4px var(--lime-soft); }
.gchart__ping { border: 1px solid var(--lime); opacity: 0; }
.gchart__bar { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--ink-2); transform-origin: left center; }
.gchart__del { position: absolute; left: 100%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--surface-2); }
.gchart__del .tick { display: block; }
/* The playhead: a full-width layer with a line of light on its left edge and a short wash behind
   it, moved by xPercent so it always spans the track at any width. */
.gchart__ph { position: absolute; left: 0; top: -9px; bottom: -9px; width: 100%; pointer-events: none; opacity: 0; }
.gchart__ph::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: linear-gradient(180deg, rgba(15, 215, 106, 0), var(--lime) 30%, var(--lime) 70%, rgba(15, 215, 106, 0)); }
.gchart__ph::after { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 72px; background: linear-gradient(90deg, rgba(15, 215, 106, 0), rgba(15, 215, 106, 0.18)); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.gchart__axis { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--hair); font: 500 var(--fs-micro)/1 var(--mono); color: var(--ink-3); }
.gchart__axis span:first-of-type { grid-column: 2; grid-row: 1; }
.gchart__axis span:last-of-type { grid-column: 2; grid-row: 1; justify-self: end; }
.gchart__sm { display: none; }
@media (max-width: 359px) { .gchart__lg { display: none; } .gchart__sm { display: inline; } }
.gchart .chart__note { margin: 0; padding: 16px clamp(20px, 2.6vw, 30px) 20px; border-top: 1px solid var(--hair); }
@media (hover: hover) and (pointer: fine) {
  .gchart__row { transition: opacity var(--t-micro) var(--spring-soft); }
  .gchart__rows:hover .gchart__row:not(:hover) { opacity: 0.4; }
}
@media (max-width: 719px) {
  /* The title takes the whole line on phones; the playhead shows the state on its own. */
  .gchart__state { display: none; }
  .gchart__row { grid-template-columns: minmax(0, 1fr); }
  .gchart__k, .gchart__track, .gchart__lab, .gchart__end { grid-column: 1; }
  .gchart__track { grid-row: 2; }
  .gchart__lab { grid-row: 3; }
  .gchart__end { grid-row: 4; }
  .gchart__axis { grid-template-columns: minmax(0, 1fr); }
  .gchart__axis span:first-of-type, .gchart__axis span:last-of-type { grid-column: 1; }
}

/* 08 Governance is a dark panel, the trust section before the FAQ. The chart becomes a glass
   instrument on the stage: hairline grid, the encrypted template as a run of sealed blocks, a
   contract axis ruled in twelfths, and the third-party lane stopped at its source. */
.gov__panel { display: grid; gap: clamp(40px, 5vw, 64px); }
.gov__head { margin: 0; }
@media (min-width: 1024px) {
}
.gov .gchart { position: relative; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 0 0 1px var(--hair-dark), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 80px -40px rgba(0, 0, 0, 0.7); }
.gov .gchart__panel { background: transparent; padding: clamp(22px, 3vw, 36px); }
.gov .gchart__panel::after { content: ""; position: absolute; right: 8%; top: 10%; width: 46%; height: 80%; pointer-events: none; background: radial-gradient(closest-side, rgba(15, 215, 106, 0.08), rgba(15, 215, 106, 0)); }
.gov .chart__cap, .gov .gchart__k, .gov .gchart__axis { color: var(--on-dark-3); }
.gov .gchart__state { color: var(--on-dark-3); }
.gov .gchart__state span:last-child { color: var(--lime); }
.gov .gchart__rows { gap: 30px; margin-top: 36px; }
.gov .gchart__lab { color: var(--on-dark-2); }
.gov .gchart__end { color: #fff; }
.gov .gchart__base { background: var(--hair-dark-2); }
.gov .gchart__base--void { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.26) 0 2px, transparent 2px 7px); }
.gov .gchart__pt { background: var(--gun); }
/* The template: sealed blocks, not a plain line. */
.gov .gchart__bar { height: 10px; margin-top: -5px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(242, 244, 244, 0.78) 0 12px, transparent 12px 15px); box-shadow: 0 0 18px rgba(242, 244, 244, 0.06); }
.gov .gchart__del { background: var(--gun); }
.gov .gchart__del .tick { background: rgba(15, 215, 106, 0.16); color: var(--lime); }
/* Third parties: a short run from the source, then a stop. Nothing passes it. */
.gchart__stop { position: absolute; left: 0; top: 50%; width: 22px; height: 1px; background: var(--on-dark-3); }
.gchart__stop::after { content: ""; position: absolute; right: 0; top: -6px; width: 1px; height: 13px; background: var(--on-dark-2); }
.gov .gchart__base--void { left: 30px; }
.gov .gchart__axis { position: relative; margin-top: 30px; padding-top: 14px; border-top-color: var(--hair-dark); }
/* The contract, ruled in twelfths over the track column. */
.gchart__ticks { grid-column: 2; grid-row: 1; height: 6px; margin-top: -14px; border-right: 1px solid var(--hair-dark-2); background: repeating-linear-gradient(90deg, var(--hair-dark-2) 0 1px, transparent 1px calc(100% / 12)); }
.gov .chart__note { border-top-color: var(--hair-dark); color: var(--on-dark-3); }
@media (max-width: 719px) { .gchart__ticks { grid-column: 1; } }

/* Pilot: claims held for query across a 90-day pilot, at the visitor's spend. A light instrument:
   the readout leads, the line draws behind a playhead, go-live is marked as the playhead passes,
   and the crosshair takes over the readout while the reader scrubs. */
.pchart { display: flex; flex-direction: column; padding: 0; }
.pchart__panel { position: relative; padding: clamp(20px, 2.6vw, 30px); overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: transparent; }
/* Once the line reaches day 90, the panel warms where the held money has built up. */
.pchart__panel::after { content: ""; position: absolute; right: -16%; top: -10%; width: 70%; height: 90%; pointer-events: none; background: radial-gradient(closest-side, rgba(232, 162, 0, 0.12), rgba(232, 162, 0, 0)); opacity: 0; transition: opacity 0.6s var(--spring-soft); }
.pchart.is-done .pchart__panel::after { opacity: 1; }
.pchart__panel > * { position: relative; z-index: 1; }
.pchart__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pchart__read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 18px; }
.pchart__val { font-family: var(--mono); font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); font-weight: var(--w-figure); font-stretch: var(--semi); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.pchart__when { font: 500 0.6875rem/1 var(--mono); color: var(--ink-3); }
.pchart__plot { position: relative; height: clamp(160px, 15vw, 200px); margin-top: 44px; touch-action: pan-y; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.pchart__grid { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); height: 1px; background: var(--hair); }
.pchart__grid:first-child { background: var(--hair-2); }
.pchart__tick { position: absolute; left: 0; bottom: 7px; font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.pchart__guide { position: absolute; top: -10px; bottom: 0; left: calc(14 / 90 * 100%); width: 1px; background: repeating-linear-gradient(180deg, rgba(var(--fg), 0.3) 0 3px, transparent 3px 6px); }
.pchart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pchart__area { fill: url(#pchart-wash); }
.pchart__line { fill: none; stroke: var(--amber-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 6px rgba(232, 162, 0, 0.35)); }
/* Go-live: a green ring on the baseline at day 14, with a ping as the playhead passes it. */
.pchart__live, .pchart__ping { position: absolute; left: calc(14 / 90 * 100%); bottom: 0; width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: 50%; pointer-events: none; }
.pchart__live { border: 2px solid var(--lime); background: var(--surface-2); box-shadow: 0 0 0 4px var(--lime-soft); }
.pchart__ping { border: 1px solid var(--lime); opacity: 0; }
/* The playhead: a full-width layer with a line of light on its left edge and a short wash
   behind it, moved by xPercent so it spans the plot at any width. */
.pchart__ph { position: absolute; left: 0; top: -12px; bottom: 0; width: 100%; pointer-events: none; opacity: 0; }
.pchart__ph::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: linear-gradient(180deg, rgba(15, 215, 106, 0), var(--lime) 25%, var(--lime) 80%, rgba(15, 215, 106, 0.2)); }
.pchart__ph::after { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 80px; background: linear-gradient(90deg, rgba(15, 215, 106, 0), rgba(15, 215, 106, 0.16)); -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 80%, transparent); }
.pchart__dot, .pchart__xd { position: absolute; bottom: 0; width: 10px; height: 10px; margin-bottom: -5px; border-radius: 50%; background: var(--amber-line); box-shadow: 0 0 0 2px var(--surface-2); pointer-events: none; }
.pchart__dot { right: -5px; }
.pchart__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--amber); opacity: 0; }
.pchart.is-done .pchart__dot::after { animation: ring 5s var(--spring-soft) 1s infinite; }
.pchart__xd { left: -5px; }
.pchart__xh { position: absolute; top: -10px; bottom: 0; left: 0; width: 1px; background: var(--ink-3); pointer-events: none; }
.pchart__xh, .pchart__xd { opacity: 0; transition: opacity 0.15s var(--spring-soft); }
.pchart.is-scrub .pchart__xh, .pchart.is-scrub .pchart__xd { opacity: 1; }
.pchart.is-scrub .pchart__when { color: var(--ink); }
.pchart__x { position: relative; height: 12px; margin-top: 12px; font: 500 var(--fs-micro)/1 var(--mono); color: var(--ink-3); }
.pchart__x span { position: absolute; top: 0; white-space: nowrap; }
.pchart__x span:first-child { left: 0; }
.pchart__x .pchart__x14 { left: calc(14 / 90 * 100%); }
.pchart__x span:last-child { right: 0; }
/* Phones: day 14 sits too close to the origin for both labels, and the origin reads without one. */
@media (max-width: 559px) { .pchart__x span:first-child { display: none; } }
.pchart .chart__note { margin: 0; padding: 16px clamp(20px, 2.6vw, 30px) 20px; border-top: 1px solid var(--hair); }

/* ============================== 07 PILOT ============================== */
.pilot__top { display: grid; gap: 40px; margin-bottom: clamp(48px, 6vw, 88px); }
.pilot__top .head { margin-bottom: 28px; }
/* Side by side: the offer on the head's column, the estimate across the content's. */
@media (min-width: 1024px) { .pilot__top { grid-template-columns: var(--split); column-gap: var(--split-gap); align-items: center; } }
.pilot__top .pchart { width: 100%; }
.tl { --tl-bg: var(--canvas); position: relative; }
.tone .tl { --tl-bg: var(--canvas-2); }
/* A hairline rail that fills with scroll. A lime playhead with a short trail rides its leading
   edge (pilot.js), and each milestone lights as the playhead reaches it. */
.tl__rail { position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--hair-2); }
.tl__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--em-1), var(--em-2)); transform: scaleY(0); transform-origin: top; }
.tl__head { position: absolute; left: 0; top: 0; width: 1px; height: 40px; margin-top: -40px; opacity: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15, 215, 106, 0), var(--lime)); }
.tl__head::after { content: ""; position: absolute; left: -2px; bottom: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px var(--lime-soft); }
.tl__list { display: grid; gap: 30px; }
.tl__m { position: relative; padding-left: 30px; }
/* Milestone: an open ring that closes on a solid core when the playhead reaches it. */
.tl__dot { position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--tl-bg); box-shadow: inset 0 0 0 1px var(--ink-4); transition: box-shadow 0.3s var(--spring-soft), transform 0.45s var(--spring); }
.tl__dot::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--ink); opacity: 0; transform: scale(0.4); transition: opacity 0.3s var(--spring-soft), transform 0.45s var(--spring); }
.tl__m.is-on .tl__dot { box-shadow: inset 0 0 0 1px var(--ink); }
.tl__m.is-on .tl__dot::before { opacity: 1; transform: none; }
/* Day 90, the decision, lights lime. */
.tl__m--end .tl__dot::before { inset: 0; background: var(--lime); }
.tl__m--end.is-on .tl__dot { box-shadow: 0 0 0 4px var(--lime-soft); transform: scale(1.15); }
.tl__day { display: block; margin-bottom: 8px; font-size: 0.6875rem; color: var(--ink-3); }
.tl__m strong { font-family: var(--head); display: block; margin-bottom: 6px; font-size: 1.125rem; font-weight: var(--w-title); font-stretch: var(--semi); letter-spacing: -0.01em; }
.tl__m p { margin: 0; max-width: 30ch; font-size: 0.9375rem; color: var(--ink-2); }
.js .tl__m { opacity: 0.42; transition: opacity 0.45s var(--spring-soft); }
.js .tl__m.is-on { opacity: 1; }
@media (min-width: 1024px) {
  .tl__rail { left: 0; right: 0; top: 4px; bottom: auto; width: auto; height: 1px; }
  .tl__fill { transform: scaleX(0); transform-origin: left; }
  .tl__head { width: 40px; height: 1px; margin: 0 0 0 -40px; background: linear-gradient(90deg, rgba(15, 215, 106, 0), var(--lime)); }
  .tl__head::after { left: auto; right: -3px; bottom: -2px; }
  .tl__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
  .tl__m { padding: 32px 0 0; }
  .tl__dot { top: 0; }
}

/* ============================== 08 FAQ ============================== */
.faq__grid { display: grid; gap: clamp(40px, 5vw, 56px); }
.faq .head { margin-bottom: 0; }
/* Side by side: the head on its column, the answers beside it, the two scrolling as one. */
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: var(--split); column-gap: var(--split-gap); align-items: start; }
  .faq .qa-list { width: 100%; margin: 0; }
}
/* The questions sit in one card, solid so a closing answer never shows through the rows that
   glide over it (js/faq.js). */
.qa-list { width: min(100%, 880px); margin-inline: auto; padding: 4px clamp(20px, 3vw, 34px); border-radius: var(--r-lg); background: var(--card-solid); box-shadow: var(--shadow-1); }
/* Accordion: the layout changes once, then rows glide from where they were (FLIP). */
.qa { position: relative; background: var(--card-solid); border-top: 1px solid var(--hair); }
.qa:first-child { border-top: 0; }
.qa::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, var(--em-2), rgba(15, 215, 106, 0)); opacity: 0; pointer-events: none; transition: opacity var(--t-micro) var(--spring-soft); }
@media (hover: hover) { .qa:hover::before { opacity: 0.6; } }
.qa__h { margin: 0; font-size: inherit; letter-spacing: normal; }
.qa__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 22px 0; border: 0; background: none; text-align: left; font: var(--w-title) 1rem/1.4 var(--head); font-stretch: var(--semi); letter-spacing: -0.005em; cursor: pointer; }
.qa__q i { position: relative; flex: none; width: 14px; height: 14px; transition: transform var(--t-micro) var(--spring); }
@media (hover: hover) { .qa__q:hover i { transform: scale(1.15); } }
.qa__q i::before, .qa__q i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; border-radius: 1px; background: currentColor; transition: transform 0.3s var(--spring); }
.qa__q i::after { transform: rotate(90deg); }
.qa.is-open .qa__q i::after { transform: rotate(0deg); }
.qa.is-open .qa__q i { color: var(--em-2); }
.qa__a p { margin: 0; padding-bottom: 24px; max-width: 40rem; color: var(--ink-2); }

/* A tick on a dark surface. */
.dark .tick { background: rgba(15, 215, 106, 0.16); color: var(--lime); }

/* ============================== FOOTER END ============================== */

/* ============================== 404 PAGE ============================== */
/* 404.html: a short way home, in the site's chrome. */
.nf { position: relative; display: flex; align-items: center; min-height: min(72vh, 720px); padding: calc(var(--nav-h) + clamp(48px, 7vw, 104px)) 0 clamp(72px, 9vw, 128px); }
.nf__copy { max-width: 44rem; margin-inline: auto; text-align: center; }
.nf__title { margin: 0 0 0.4em; font-size: clamp(1.875rem, 0.95rem + 2.9vw, 3.25rem); letter-spacing: var(--tr-head); line-height: 1.12; }
.nf__copy .lead { margin: 0 auto 32px; }
.nf__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }

/* ============================== BOOKING PAGE ============================== */
/* book.html (js/booking.js). A dark stage: the request (the client's GoHighLevel form) beside an
   estimate of the pilot it books. Then what happens next, and questions.
   The stage is the hero's: black, lit from above (.beams). The hosted form keeps its own card,
   #141412 with the same edge, so its fields read as one surface with the panel around them; the
   estimate beside it is glass, like every card on the site. */
.bk { position: relative; padding: calc(var(--nav-h) + clamp(40px, 6vw, 88px)) 0 clamp(72px, 9vw, 120px); }
.bk__grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .bk__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }
/* On a phone or tablet the request comes first and the summary follows it. */
@media (max-width: 1023px) {
  .bk__grid { gap: 0; }
  .bk__copy { display: contents; }
  .bkf { order: 1; }
  .bk__sum { order: 2; margin-top: 24px; }
}
.bk__title { margin: 0 0 0.4em; font-size: clamp(1.875rem, 0.95rem + 2.9vw, 3.25rem); letter-spacing: var(--tr-head); line-height: 1.12; color: #fff; }
/* The calculator's closing call sits in a narrower column: each of its lines fits whole. */
@media (min-width: 1024px) { .bk--end .bk__title { font-size: min(clamp(1.875rem, 0.95rem + 2.9vw, 3.25rem), 3.3vw); } }
.bk__copy .lead { margin: 0 0 32px; max-width: 32rem; }

/* The estimate, at the spend passed from the home page calculator: a glass card. */
.bk__sum { position: relative; padding: 24px; border-radius: var(--r-lg); background: var(--glass), var(--surface); box-shadow: var(--shadow-1); }
.bk__sum-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 var(--fs-micro)/1 var(--mono); color: var(--on-dark-3); }
.bk__rows { display: grid; margin: 18px 0 0; }
.bk__rows div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.bk__rows dt { font: 500 var(--fs-micro)/1.3 var(--mono); color: var(--on-dark-3); }
.bk__rows dd { flex: none; max-width: 62%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9375rem; font-weight: 500; color: #fff; }
.bk__fig { display: grid; gap: 10px; margin: 10px 0 18px; padding: 18px; border-radius: 14px; background: radial-gradient(120% 100% at 50% 135%, rgba(232, 162, 0, 0.28) 0%, rgba(232, 162, 0, 0.08) 45%, transparent 75%), rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(232, 162, 0, 0.22); }
.bk__fig span { font: 500 var(--fs-micro)/1 var(--mono); color: var(--on-dark-3); }
.bk__fig strong { font-family: var(--mono); font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); font-weight: var(--w-figure); font-stretch: var(--semi); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--amber); }
/* The pilot in three marks on a rail. */
.bk__tl { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 18px; border-top: 1px solid var(--hair-dark); }
.bk__tl::before { content: ""; position: absolute; left: 4px; right: 33%; top: 22px; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), var(--lime)); }
.bk__tl li { position: relative; display: grid; align-content: start; gap: 8px; padding-top: 22px; font-size: 0.8125rem; line-height: 1.35; color: var(--on-dark-2); }
.bk__tl i { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: #080808; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.bk__tl li:last-child i { background: var(--lime); box-shadow: 0 0 0 4px rgba(15, 215, 106, 0.18); }
.bk__tl span { font: 500 var(--fs-micro)/1 var(--mono); color: var(--on-dark-3); }

/* The request: the client's GoHighLevel form (an iframe from leadconnectorhq.com, sized by GHL's
   form_embed.js). The panel is the GHL card's own colour (#141412) and at most its 500 px width, so
   the heading and the hosted fields read as one surface. The heading lines up with the form's own
   padding: 16 px below 500 px wide, 40 px from 500 (where GHL switches layout). */
.bkf { container-type: inline-size; position: relative; width: min(100%, 500px); scroll-margin-top: calc(var(--nav-h) + 20px); overflow: hidden; border-radius: var(--r-lg); background: #141412; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7); }
/* The edge is drawn above the hosted form, so it runs unbroken past the iframe (clicks pass through). */
.bkf::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(44, 220, 124, 0.22); pointer-events: none; }
@media (min-width: 1024px) { .bkf { justify-self: end; } }
.bkf__head { padding: 24px 17px 0; }
.bkf__k { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 var(--fs-micro)/1 var(--mono); color: var(--on-dark-3); }
.bkf__k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px var(--lime-soft); }
.bkf__title { margin: 16px 0 8px; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); font-weight: var(--w-head); font-stretch: var(--wide); letter-spacing: var(--tr-head); line-height: 1.1; color: #fff; }
.bkf__sub { margin: 0; font-size: 0.9375rem; color: var(--on-dark-2); }
/* The form's own height in each layout, so nothing moves while it loads; GHL then sets the
   iframe's height to the form's. */
/* The last 6 px hold the GHL card's own drop shadow, a light band against the panel: clipped. */
/* The form's script lifts the frame out of the page while it loads the form a second time; the
   frame's place is held meanwhile, so nothing under it jumps. */
.bkf__form { overflow: hidden; min-height: 500px; }
.bkf__form iframe { display: block; width: 100%; height: 500px; margin-bottom: -6px; border: 0; background: transparent; }
.bkf__alt { margin: 0; padding: 16px 17px; color: var(--on-dark-2); }
.bkf__alt a, .bkf__note a { color: #fff; }
.bkf__note { margin: 0; padding: 4px 17px 22px; font-size: 0.8125rem; color: var(--on-dark-3); }
.bkf__note a { position: relative; }
.bkf__note a::after { content: ""; position: absolute; inset: -4px -4px; }
@container (min-width: 500px) {
  .bkf__head { padding: 36px 41px 0; }
  .bkf__form { min-height: 548px; }
  .bkf__form iframe { height: 548px; }
  .bkf__alt, .bkf__note { padding-inline: 41px; }
  .bkf__note { padding-bottom: 32px; }
}

/* ============================== CALCULATOR PAGE ============================== */
/* calculator.html (js/calculator.js): the home page estimate in full, on the hero's stage (black,
   lit from above): glass cards, and wells of black for the controls. */
.cx { position: relative; padding: calc(var(--nav-h) + clamp(40px, 6vw, 88px)) 0 clamp(72px, 9vw, 120px); }
.cx__head { max-width: 780px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.cx__title { margin: 0 0 0.4em; font-size: clamp(1.875rem, 0.95rem + 2.9vw, 3.25rem); letter-spacing: var(--tr-head); line-height: 1.12; color: #fff; }
.cx__head .lead { margin: 0 auto; }
.cx__grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1024px) {
  .cx__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; }
  .cx__out { position: sticky; top: calc(var(--nav-h) + 24px); }
}
.cx__in, .cx__card { position: relative; border-radius: var(--r-lg); background: var(--glass), var(--surface); box-shadow: var(--shadow-1); }
.cx__in { display: grid; grid-template-columns: minmax(0, 1fr); padding: 4px 24px; }
@media (min-width: 560px) { .cx__in { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
.cx__f { grid-column: 1 / -1; display: grid; align-content: start; gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--hair-dark); }
.cx__f:last-child { border-bottom: 0; }
@media (min-width: 560px) { .cx__f--half { grid-column: auto; } }
.cx__fh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.cx__k { display: inline-flex; align-items: baseline; gap: 10px; font: 500 var(--fs-micro)/1.3 var(--mono); color: var(--on-dark-3); }
.cx__k > span { padding-right: 10px; border-right: 1px solid var(--hair-dark-2); color: var(--on-dark); }
.cx__val { font-family: var(--mono); font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem); font-weight: var(--w-figure); font-stretch: var(--semi); letter-spacing: -0.02em; color: #fff; }
.cx__hint { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--on-dark-3); }
/* The slider and the quick values sit in the form's wells. */
.cx .range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--lime) var(--p), var(--gun-4) var(--p)); }
.cx .range::-moz-range-track { background: var(--gun-4); }
.cx .range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #0C0F0D, 0 0 0 5px var(--lime); }
.cx .calc__presets { background: #080808; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
/* A fieldset row: its legend floats, so it joins the grid like any label. */
.cx__f.cx__f { min-width: 0; margin: 0; border-inline: 0; border-top: 0; }
.cx__f > legend { float: left; width: 100%; padding: 0; }
.cx .chip { background: #080808; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: var(--on-dark-2); }
@media (hover: hover) { .cx .chip:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); } }
.cx .chip:has(input:checked) { background: linear-gradient(180deg, var(--em-2), var(--em-1)); color: #03170D; box-shadow: 0 0 0 3px rgba(11, 190, 93, 0.2); }
/* Steppers: − and + either side of the typed value, in a well. At a limit a button dims but keeps
   its focus. */
.stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; height: 52px; padding: 4px; border-radius: 999px; background: #080808; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.stepper__b { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--on-dark-2); cursor: pointer; transition: background-color var(--t-micro) var(--spring-soft), color var(--t-micro) var(--spring-soft), transform 0.12s var(--spring-soft); }
.stepper__b svg { width: 16px; height: 16px; }
@media (hover: hover) { .stepper__b:hover { background: #1C1C1A; color: #fff; } }
.stepper__b:active { transform: scale(0.92); }
.stepper__b[aria-disabled="true"] { background: transparent; color: var(--on-dark-4); transform: none; cursor: default; }
.stepper__w { display: flex; align-items: baseline; justify-content: center; min-width: 0; }
.stepper__u, .stepper__v { font: var(--w-figure) 1.5rem/1 var(--mono); font-stretch: var(--semi); letter-spacing: -0.01em; }
.stepper__u { color: var(--on-dark-3); }
.stepper__v { width: 100%; min-width: 0; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; text-align: center; font-variant-numeric: tabular-nums; color: #fff; -moz-appearance: textfield; appearance: textfield; }
.stepper__w .stepper__v { width: 3.2ch; text-align: left; }
.stepper__v::-webkit-outer-spin-button, .stepper__v::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }

/* The estimate: the year large, then the same money by month, week, working day and site, the
   hours behind it, and what a pilot would hold (amber, as on the booking page). */
.cx__card { padding: 24px; }
.cx__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 var(--fs-micro)/1 var(--mono); color: var(--on-dark-3); }
.cx__big { display: grid; gap: 14px; padding: 24px 0 20px; }
.cx__big strong { font-family: var(--mono); font-size: clamp(2.5rem, 1.7rem + 2.4vw, 3.75rem); font-weight: var(--w-figure); font-stretch: var(--semi); letter-spacing: -0.025em; color: #fff; }
.cx__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.cx__rows div { display: grid; gap: 10px; min-width: 0; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.cx__rows dt { font: 500 var(--fs-micro)/1.2 var(--mono); color: var(--on-dark-3); }
.cx__rows dd { font-family: var(--mono); margin: 0; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); font-weight: var(--w-figure); font-stretch: var(--semi); letter-spacing: -0.01em; color: #fff; }
.cx__line { display: grid; gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--hair-dark); }
.cx__num { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 0.9375rem; color: var(--on-dark-2); }
.cx__num strong { font-family: var(--mono); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem); font-weight: var(--w-figure); font-stretch: var(--semi); letter-spacing: -0.02em; color: #fff; }
.cx__num--held strong { color: var(--amber); }
.cx__sub { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--on-dark-3); }
.cx__acts { display: grid; justify-items: center; gap: 12px; padding-top: 20px; }
.cx__acts .btn { width: 100%; }
.cx__note { margin: 20px 0 0; }

/* Phones: while the answers are in view and the estimate is not, the yearly figure rides in a bar
   at the foot of the screen. It rises on the spring and drops away on its mirror. */
.cx__bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 4px; padding: 10px 10px 10px 20px; border-radius: 999px; background: rgba(8, 14, 11, 0.72); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 24px 48px -16px rgba(0, 0, 0, 0.55); color: #fff; opacity: 0; transform: translateY(calc(100% + 24px)) scale(0.96); transition: transform 0.3s var(--spring-in), opacity 0.2s var(--spring-soft); }
.cx__bar.is-on { opacity: 1; transform: none; transition: transform 0.6s var(--spring), opacity 0.25s var(--spring-soft); }
.cx__bar-k { grid-column: 1; font: 500 var(--fs-micro)/1.2 var(--mono); color: rgba(255, 255, 255, 0.7); }
.cx__bar-v { font-family: var(--mono); grid-column: 1; font-size: 1.25rem; font-weight: var(--w-figure); font-stretch: var(--semi); letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.cx__bar .btn { grid-column: 2; grid-row: 1 / 3; }
@media (min-width: 1024px) { .cx__bar { display: none; } }
.cx__bar-sm { display: none; }
@media (max-width: 359px) { .cx__bar-lg { display: none; } .cx__bar-sm { display: inline; } .calc__presets button { padding: 0 2px; font-size: 0.6875rem; } }
/* Reduce Transparency: the floating pills (and the film's play button) turn solid; Increase
   Contrast also gives them a defined edge. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .wback, .cx__bar, .watch__big { background: #0C100E; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .wback, .cx__bar, .watch__big { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 24px 48px -16px rgba(0, 0, 0, 0.55); }
}

/* Your check today: how the sites record attendance now, row by row beside PayRoll Protect. */
.vs__pick { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.vs__k { margin-bottom: 14px; padding: 0; font: 500 var(--fs-micro)/1.3 var(--mono); color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair-2); font-family: var(--mono); font-size: 0.875rem; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: background-color var(--t-micro) var(--spring-soft), color var(--t-micro) var(--spring-soft), box-shadow var(--t-micro) var(--spring-soft), transform 0.12s var(--spring-soft); }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
@media (hover: hover) { .chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-4); } }
@media (pointer: coarse) { .chip { height: 44px; } }
.chip:active { transform: scale(0.97); }
.chip:has(input:checked) { background: linear-gradient(180deg, var(--em-2), var(--em-1)); color: #03170D; box-shadow: 0 0 0 3px rgba(11, 190, 93, 0.2); }
.chip:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 3px; }
.vs__cols, .vs__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; }
.vs__cols { display: none; }
.vs__row + .vs__row { border-top: 1px solid var(--hair); }
.vs__q { font-size: 1rem; font-weight: 500; line-height: 1.4; }
.vs__a { display: flex; align-items: flex-start; gap: 12px; max-width: none; margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.vs__a > span { display: grid; gap: 4px; }
.vs__a--pp { color: var(--ink); }
.vs__l { font: 500 var(--fs-micro)/1.3 var(--mono); color: var(--ink-3); }
.st { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; }
.st--y { background: var(--lime-soft); color: var(--lime-ink); }
.st--p { background: rgba(var(--fg), 0.08); color: var(--ink-3); }
.st--n { background: var(--amber-soft); color: var(--amber-ink); }
.vs__score { margin-left: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(var(--fg), 0.06); color: var(--ink-3); font-weight: 500; }
.vs__score--pp { background: var(--lime-soft); color: var(--lime-ink); }
/* Wider: three columns under a header row, which names them, so each answer's own label is for
   screen readers only. */
@media (min-width: 768px) {
  .vs__cols, .vs__row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 22px 28px; }
  .vs__cols { display: grid; padding-block: 16px; border-bottom: 1px solid var(--hair-2); font: 500 var(--fs-micro)/1.3 var(--mono); color: var(--ink-3); }
  .vs__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* The working: each figure as a line of arithmetic, with the visitor's numbers in it. */
.wk__grid { display: grid; align-items: start; }
@media (min-width: 1024px) { .wk__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }
.wk__list { border-top: 1px solid var(--hair-2); }
.wk__list li { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 640px) {
  .wk__list li { grid-template-columns: 150px minmax(0, 1fr); column-gap: 24px; }
  .wk__why { grid-column: 2; }
}
.wk__k { font: 500 var(--fs-micro)/1.9 var(--mono); color: var(--ink-3); }
.wk__f { max-width: none; margin: 0; font: 400 0.9375rem/1.6 var(--mono); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.wk__f b { font-weight: 500; color: var(--ink); }
.wk__why { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.wk__note { margin: 20px 0 0; }

/* The call request closes the page: the booking stage, without the room the nav needs at the top. */
.bk--end { padding-top: clamp(72px, 9vw, 120px); }

/* Copy buttons (Share this estimate, the footer email): the icon turns to a tick. */
.copybtn { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: transparent; font: 500 0.875rem/1 var(--mono); color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); transition: box-shadow var(--t-micro) var(--spring-soft), transform 0.12s var(--spring-soft); }
@media (hover: hover) { .copybtn:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); } }
.copybtn:active { transform: scale(0.96); }
.copybtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--lime); }
/* A 44 px hit area (Apple's minimum) from a clear layer above and below. */
.copybtn { position: relative; }
.copybtn::after { content: ""; position: absolute; inset: -2px 0; }
.copybtn-i { display: grid; width: 16px; height: 16px; }
.copybtn-i svg { grid-area: 1 / 1; width: 16px; height: 16px; transition: opacity 0.2s var(--spring-soft), transform 0.35s var(--spring); }
.copybtn-i .is-b { opacity: 0; transform: scale(0.5); color: var(--lime); }
.copybtn.is-copied .is-a { opacity: 0; transform: scale(0.5); }
.copybtn.is-copied .is-b { opacity: 1; transform: none; }
/* Icon-only copy (the footer email): a 32 px disc, with a 44 px hit area around it. */
.copybtn--icon { position: relative; width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; color: var(--on-dark-2); box-shadow: none; }
.copybtn--icon::after { content: ""; position: absolute; inset: -6px; }
@media (hover: hover) { .copybtn--icon:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); } }
.foot__row { display: inline-flex; align-items: center; gap: 2px; }
.calc__share { margin-top: 4px; }

/* ============================== FOOTER ============================== */
/* The last instrument (js/foot.js). A dark field of points that lights green around the pointer
   and is crossed by a slow scan; the closing line and the pilot call; the site map in labelled
   columns; a status bar with a live London clock and a back-to-top ring that shows how far down
   the page you are; and the company's name across the full width, verified by a scan of light as
   the page reaches its end. */
.foot { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background-color: var(--gun); color: var(--on-dark-2); font-size: 0.9375rem; }
.foot__field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
/* The hero's grid across the whole footer (js/foot.js lights its crossings): 94 px squares of 1 px
   lines, faded toward the edges. */
.foot::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 94px 94px; background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 35%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 35%, #000 20%, transparent 100%);
}
/* The closing line stands in the hero's light: soft emerald beams fanning down from just above
   the top edge, blurred, fading out before the site map. One conic gradient, no motion. */
.foot::before {
  content: ""; position: absolute; left: 50%; top: 0; z-index: -1;
  width: min(1500px, 150vw); height: 760px; transform: translateX(-50%); pointer-events: none;
  background:
    conic-gradient(at 50% -6%, transparent 0deg 146deg,
      rgba(15, 215, 106, 0.13) 151deg, transparent 158deg,
      rgba(15, 215, 106, 0.2) 165deg, transparent 171deg,
      rgba(15, 215, 106, 0.3) 177deg, transparent 183deg,
      rgba(15, 215, 106, 0.2) 189deg, transparent 195deg,
      rgba(15, 215, 106, 0.13) 202deg, transparent 209deg 360deg),
    radial-gradient(42% 46% at 50% 0%, rgba(11, 190, 93, 0.22), transparent 72%);
  filter: blur(18px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 88%);
}
.foot a { color: #fff; text-decoration: none; }
.foot .wrap { position: relative; }

.foot__end { display: grid; justify-items: center; gap: 36px; padding-block: clamp(96px, 12vw, 160px) clamp(56px, 7vw, 88px); text-align: center; }
.foot__line { font-family: var(--head); margin: 0; max-width: none; font-size: clamp(2rem, 1.1rem + 3.2vw, 3.75rem); font-weight: var(--w-display); letter-spacing: var(--tr-display); line-height: 1.1; color: #fff; text-wrap: balance; }
.foot__cta { display: grid; justify-items: center; gap: 18px; }
.foot__note { display: inline-flex; align-items: center; gap: 10px; font: 500 var(--fs-micro)/1 var(--mono); color: var(--on-dark-3); }
.foot__note i, .foot__clock i { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px rgba(15, 215, 106, 0.7); }
.foot__note i::after, .foot__clock i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--lime); opacity: 0; animation: ring 4.8s var(--spring-soft) 1s infinite; }

.foot__grid { display: grid; gap: 44px; padding-block: 52px; border-top: 1px solid var(--hair-dark); }
/* Brand beside the site map only once the three columns fit beside it (below that it sits on top). */
@media (min-width: 980px) { .foot__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; } }
.foot__brand img { display: block; width: 150px; height: auto; margin-bottom: 18px; }
.foot__brand p { margin: 0; max-width: 30ch; color: var(--on-dark-3); }
.foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
/* The contact column is never narrower than the email and its copy button, so the row never spills past the edge. */
@media (min-width: 720px) { .foot__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(max-content, 1.4fr); } }
/* On phones the contact column runs the full width under the other two, so the email and its copy button keep to one line inside it. */
@media (max-width: 719px) { .foot__cols > :last-child { grid-column: 1 / -1; } }
.foot__k { margin: 0 0 14px; font: 500 var(--fs-micro)/1 var(--mono); color: var(--on-dark-3); }
.foot__list { display: grid; justify-items: start; gap: 2px; margin: 0; font: 400 0.875rem/1.6 var(--mono); }
.foot__list a, .foot__place { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; }
.foot__place { color: var(--on-dark-2); }
/* Links: the label steps aside, an arrow slides in, and a hairline draws under it. */
.foot__list .t { transition: transform var(--t-micro) var(--spring); }
.foot__list .a { width: 12px; height: 12px; flex: none; color: var(--lime); opacity: 0; transform: translateX(-6px); transition: opacity var(--t-micro) var(--spring-soft), transform var(--t-micro) var(--spring); }
.foot__list a::after { content: ""; position: absolute; left: 0; right: 20px; bottom: 3px; height: 1px; background: var(--hair-dark-2); transform: scaleX(0); transform-origin: left center; transition: transform 0.35s var(--spring); }
.foot__list a:focus-visible .t { transform: translateX(2px); }
@media (hover: hover) { .foot__list a:hover .t { transform: translateX(2px); } }
.foot__list a:focus-visible .a { opacity: 1; transform: none; }
@media (hover: hover) { .foot__list a:hover .a { opacity: 1; transform: none; } }
.foot__list a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) { .foot__list a:hover::after { transform: scaleX(1); } }
.foot__list a[aria-current="page"] .t { color: var(--lime); }

/* Status bar: copyright, the London clock, where we are, legal, back to top. */
.foot__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-block: 22px; border-top: 1px solid var(--hair-dark); font: 500 0.6875rem/1 var(--mono); color: var(--on-dark-3); }
.foot__clock { display: inline-flex; align-items: center; gap: 10px; }
.foot__clock time { font-family: var(--mono-live); color: #fff; font-variant-numeric: tabular-nums; }
.foot__legal { display: inline-flex; gap: 18px; }
.foot__legal a { position: relative; color: var(--on-dark-2); transition: color var(--t-micro) var(--spring-soft); }
.foot__legal a::after { content: ""; position: absolute; inset: -17px -6px; }
/* Touch: footer links stand 44 px tall. */
@media (pointer: coarse) {
  .foot__list a { padding-block: 10px; }
  .foot__list a::after { bottom: 7px; }
}
@media (hover: hover) { .foot__legal a:hover { color: #fff; } }
.foot__top { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border-radius: 50%; color: #fff; transition: transform var(--t-micro) var(--spring); }
@media (hover: hover) { .foot__top:hover { transform: translateY(-2px); } }
.foot__top:active { transform: scale(0.94); transition-duration: 0.1s; }
.foot__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.foot__ring circle { fill: none; stroke: var(--hair-dark-2); stroke-width: 1.5; }
.foot__ring .foot__ring-fg { stroke: var(--lime); stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.foot__up { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform var(--t-micro) var(--spring); }
@media (hover: hover) { .foot__top:hover .foot__up { transform: rotate(-90deg) translateX(2px); } }
@media (max-width: 719px) {
  .foot__geo { display: none; }
}

/* The mark: the shield, large, centred and lit from the start. As the page ends a scan of light
   crosses it, then Verified lands above it. */
/* The shield runs off the foot of the page by about a third of its height; Verified sits above it. */
.foot__mark { --h: clamp(240px, 32vw, 420px); position: relative; display: grid; justify-items: center; gap: 28px; padding: clamp(48px, 7vw, 96px) var(--gutter) 0; overflow: hidden; -webkit-user-select: none; user-select: none; pointer-events: none; }
.foot__seal { --m: 80px; position: relative; display: block; margin-bottom: calc(var(--h) * -0.3); }
.foot__icon { display: block; height: var(--h); width: auto; aspect-ratio: 734 / 900; }
.foot__scan { position: absolute; inset: calc(var(--m) * -0.5) calc(var(--m) * -1); pointer-events: none; opacity: 0; }
.foot__scan::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: linear-gradient(180deg, rgba(15, 215, 106, 0), var(--lime) 18%, var(--lime) 82%, rgba(15, 215, 106, 0)); box-shadow: 0 0 18px rgba(15, 215, 106, 0.6); }
.foot__scan::after { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 120px; background: linear-gradient(90deg, rgba(15, 215, 106, 0), rgba(15, 215, 106, 0.14)); -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.foot__tag { order: -1; display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fs-micro)/1 var(--mono); color: var(--lime); opacity: 0; transform: translateY(6px); }
.foot__tag .tick { width: 18px; height: 18px; padding: 3px; background: rgba(15, 215, 106, 0.16); color: var(--lime); }
/* Without script, or with reduced motion, Verified simply shows. */
.no-js .foot__tag, .rm .foot__tag { opacity: 1; transform: none; }

/* ============================== STAGE LIGHT ============================== */
/* The pages that open on their own stage (booking, calculator, installation, not found) open in
   the hero's light: soft emerald beams fanning down from just above the top edge, over a pool of
   green, fading into the black. Painted as background layers, top first: the fade, the beams (one
   conic gradient, each beam a few degrees of soft ramp), the pool. No pseudo-elements, so the
   guide grid and dot matrix keep theirs. */
.beams {
  background:
    linear-gradient(180deg, rgba(1, 1, 1, 0) 0%, rgba(1, 1, 1, 0.25) 42%, var(--canvas) 100%) 50% 0 / 100% 760px no-repeat,
    conic-gradient(at 50% -48px, transparent 0deg 147deg,
      rgba(15, 215, 106, 0.08) 153deg, transparent 160deg,
      rgba(15, 215, 106, 0.13) 166deg, transparent 172deg,
      rgba(15, 215, 106, 0.2) 177.5deg, transparent 183deg,
      rgba(15, 215, 106, 0.13) 189deg, transparent 195deg,
      rgba(15, 215, 106, 0.08) 201deg, transparent 208deg 360deg) 50% 0 / 100% 760px no-repeat,
    radial-gradient(46% 420px at 50% 0, rgba(11, 190, 93, 0.2), rgba(14, 58, 33, 0.08) 55%, transparent 80%) no-repeat,
    var(--canvas);
}

/* ============================== LIGHT: FLAT ============================== */
/* On the light sections nothing glows: no guide grid, no haze, no washes inside the cards and no
   pointer light on them (the cursor's ring does that work). A finding reads as a flat tint with a
   hairline in its colour: held is a pale amber, verified a pale green. The dark bands keep their
   light. */
.light.gx::before, .light .gx::before { content: none; }
.light.facts { background-image: none; }
.light .spot__l { display: none; }
.light .zoom__panel::after, .light .zoom__result::before, .light .lv::after, .light .pchart__panel::after { content: none; }
.light .zoom__result { transition: background-color 0.6s var(--spring-soft), box-shadow 0.6s var(--spring-soft); }
.light .zoom.is-zoomed .zoom__result { background-color: #FFF6E5; box-shadow: inset 0 1px 0 #EBC77A; }
.light .lv { transition: background-color 0.6s var(--spring-soft); }
.light .leak.is-done .lv { background-color: #FFF9EE; }
.light .pchart__panel { transition: background-color 0.6s var(--spring-soft); }
.light .pchart.is-done .pchart__panel { background-color: #FFFAF1; }
.light .pchart__line { filter: none; }
.light .watch__ch button[aria-current="true"] { background: #EAF7F0; box-shadow: inset 0 0 0 1px rgba(6, 122, 61, 0.18); }

/* ============================== RISK CHECK ============================== */
/* The 60-second payroll risk check (js/risk.js): a dark card over the page, which dims and softens
   behind it; full screen on a phone. One question at a time, answers big enough to tap, a bar for
   the way through; then the result. Its ways in are buttons, so they go when there is no script. */
.no-js [data-risk-open] { display: none !important; }
html.rk-on { overflow: hidden; }
.rk-on .cur { visibility: hidden; }

/* A quiet way in, from the sections that raise the question. */
.rk-go { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 8px 0; border: 0; background: none; color: inherit; font: 500 0.9375rem/1.35 var(--font); text-align: left; cursor: pointer; }
.rk-go i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--lime-soft); color: var(--lime-ink); transition: transform var(--t-micro) var(--spring); }
.rk-go svg { width: 12px; height: 12px; }
.rk-go span { text-decoration: underline; text-decoration-color: rgba(var(--fg), 0.28); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color var(--t-micro) var(--spring-soft); }
@media (hover: hover) { .rk-go:hover i { transform: translateX(3px); } .rk-go:hover span { text-decoration-color: currentColor; } }
.rk-go:focus-visible { outline: 2px solid var(--em-2); outline-offset: 4px; border-radius: 8px; }
.leaks__go { margin: 26px 0 0; }

.rk { width: min(640px, calc(100vw - 32px)); max-width: none; max-height: min(820px, calc(100dvh - 32px)); margin: auto; padding: 0; border: 0; border-radius: 24px; overflow: auto; overscroll-behavior: contain; background: var(--glass), #0B0E0C; color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-hi), 0 40px 120px -24px rgba(0, 0, 0, 0.9); }
.rk[open] { display: flex; flex-direction: column; animation: rk-in 0.5s var(--spring) both; }
.rk::backdrop { background: rgba(1, 3, 2, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rk[open]::backdrop { animation: rk-fade 0.3s var(--spring-soft) both; }
.rk.is-closing { animation: rk-out 0.2s var(--spring-in) both; }
.rk.is-closing::backdrop { animation: rk-fade-out 0.2s var(--spring-soft) both; }
@keyframes rk-out { to { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes rk-fade-out { to { opacity: 0; } }
/* Larger screens: the card keeps one top edge from question to question; only its foot moves. */
@media (min-width: 641px) and (min-height: 501px) { .rk { margin-top: max(16px, 8vh); margin-bottom: auto; } }
@keyframes rk-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
@keyframes rk-fade { from { opacity: 0; } }
/* Phones: up from the foot of the screen as a sheet, and back down. */
@keyframes rk-sheet { from { transform: translateY(100%); } }
@keyframes rk-sheet-out { to { transform: translateY(100%); } }
.rk__top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 24px; background: linear-gradient(#0B0E0C 72%, rgba(11, 14, 12, 0)); }
.rk__k { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 var(--fs-micro)/1 var(--mono); color: var(--on-dark-2); }
.rk__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--em-2); box-shadow: 0 0 0 3px rgba(15, 215, 106, 0.18); }
.rk__n { margin: 0 0 0 auto; font: 400 var(--fs-micro)/1 var(--mono); color: var(--on-dark-3); }
.rk__n.is-off { visibility: hidden; }
.rk__x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--on-dark-2); cursor: pointer; transition: background-color var(--t-micro) var(--spring-soft), color var(--t-micro) var(--spring-soft); }
.rk__x svg { width: 22px; height: 22px; }
@media (hover: hover) { .rk__x:hover { background: rgba(255, 255, 255, 0.07); color: #fff; } }
.rk__x:focus-visible { outline: 2px solid var(--em-2); outline-offset: 2px; border-radius: 50%; }
.rk__back:focus-visible { outline: 2px solid var(--em-2); outline-offset: 2px; border-radius: 999px; }
.rk__bar { flex: none; height: 2px; margin: 0 24px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rk__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--em-1), var(--em-2)); transform: scaleX(var(--p, 0)); transform-origin: left center; transition: transform 0.5s var(--spring); }
.rk__body { flex: 1 0 auto; padding: clamp(22px, 3.4vw, 34px) 24px 8px; }
.rk__step:not([hidden]), .rk__res:not([hidden]) { animation: rk-step 0.45s var(--spring) both; }
@keyframes rk-step { from { opacity: 0; transform: translateX(14px); } }
.rk__step.is-back:not([hidden]) { animation-name: rk-step-back; }
@keyframes rk-step-back { from { opacity: 0; transform: translateX(-14px); } }
.rk__q, .rk__res-h { margin: 0 0 clamp(20px, 2.6vw, 28px); max-width: 22ch; font-family: var(--head); font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2rem); font-weight: var(--w-head); font-stretch: var(--wide); letter-spacing: var(--tr-head); line-height: 1.15; color: #fff; }
.rk__q:focus, .rk__res-h:focus { outline: none; }
.rk__opts { display: grid; gap: 10px; }
.rk__opts button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 14px 18px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: #fff; font: 400 1rem/1.3 var(--font); text-align: left; cursor: pointer; transition: background-color var(--t-micro) var(--spring-soft), box-shadow var(--t-micro) var(--spring-soft), transform 0.12s var(--spring-soft); }
/* Each answer ends in a ring, filled once it is chosen. */
.rk__opts button::after { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28); transition: background-color var(--t-micro) var(--spring-soft), box-shadow var(--t-micro) var(--spring-soft); }
@media (hover: hover) { .rk__opts button:hover { background-color: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26); } }
.rk__opts button:active { transform: scale(0.99); }
.rk__opts button:focus-visible { outline: 2px solid var(--em-2); outline-offset: 2px; border-radius: 14px; }
.rk__opts button[aria-pressed="true"] { background-color: var(--lime-soft); box-shadow: inset 0 0 0 1px rgba(15, 215, 106, 0.6); }
.rk__opts button[aria-pressed="true"]::after { background: radial-gradient(circle, #0B0E0C 0 3px, var(--em-2) 3.5px); box-shadow: 0 0 12px var(--lime-glow); }
.rk__opts--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rk__opts--grid button { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-height: 76px; padding-right: 44px; font: 300 1.5rem/1 var(--mono); letter-spacing: -0.02em; }
.rk__opts--grid button::after { position: absolute; top: 14px; right: 14px; }
.rk__opts--grid small { font: 400 0.75rem/1.3 var(--mono); letter-spacing: 0; color: var(--mint); }
.rk__level { margin: 0 0 14px; }
.rk__res-h { margin-bottom: 10px; }
.rk__res-sub { margin: 0 0 22px; color: var(--on-dark-2); }
.rk__checks { margin: 0 0 26px; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.rk__checks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.rk__checks strong { display: block; font: var(--w-title) 1rem/1.3 var(--head); font-stretch: var(--semi); color: #fff; }
.rk__checks span { display: block; margin-top: 4px; font-size: 0.875rem; line-height: 1.45; color: var(--on-dark-2); }
.rk__checks em { font: 500 0.75rem/1.75 var(--mono); font-style: normal; white-space: nowrap; }
.rk__s--0 { color: var(--lime-ink); }
.rk__s--1 { color: var(--on-dark-3); }
.rk__s--2 { color: var(--amber-ink); }
.rk__fk { margin: 0 0 10px; font: 400 var(--fs-micro)/1.4 var(--mono); color: var(--on-dark-3); }
.rk__figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.rk__fig { display: grid; align-content: start; gap: 8px; padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.rk__fig--ours { box-shadow: inset 0 0 0 1px rgba(15, 215, 106, 0.4); }
.rk__fig span { font: 400 0.75rem/1.4 var(--mono); color: var(--on-dark-3); }
.rk__fig strong { font: 300 clamp(1.75rem, 1.45rem + 1.1vw, 2.25rem)/1 var(--mono); letter-spacing: -0.03em; white-space: nowrap; color: rgba(255, 255, 255, 0.78); }
.rk__fig--ours strong { color: var(--mint); }
.rk__pilot { margin: 0 0 22px; color: var(--on-dark-2); }
.rk__pilot strong { font-weight: 500; color: var(--amber-ink); }
.rk__acts { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 4px; }
.rk__foot { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 18px 24px 18px 14px; background: linear-gradient(rgba(11, 14, 12, 0), #0B0E0C 40%); }
.rk__back { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 10px; white-space: nowrap; border: 0; border-radius: 999px; background: transparent; color: var(--on-dark-2); font: 500 0.875rem/1 var(--font); cursor: pointer; transition: background-color var(--t-micro) var(--spring-soft), color var(--t-micro) var(--spring-soft); }
.rk__back svg { width: 14px; height: 14px; transform: scaleX(-1); }
.rk__back.is-off { visibility: hidden; }
.rk__back[hidden] { display: none; }
@media (hover: hover) { .rk__back:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } }
.rk__note { margin: 0 0 0 auto; font: 400 0.75rem/1.4 var(--mono); text-align: right; color: var(--on-dark-3); }
.rk__book { margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) {
  .rk { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; border-radius: 0; }
  .rk[open] { animation-name: rk-sheet; }
  .rk.is-closing { animation-name: rk-sheet-out; }
  .rk__top { padding-top: max(14px, env(safe-area-inset-top)); padding-left: 20px; }
  .rk__bar { margin-inline: 20px; }
  .rk__body { padding-inline: 20px; }
  .rk__foot { padding: 14px 20px max(16px, env(safe-area-inset-bottom)) 10px; }
  .rk__opts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk__figs { grid-template-columns: minmax(0, 1fr); }
  .rk__acts .btn { flex: 1 1 100%; }
  .rk__book { padding-inline: 20px; }
}
/* A phone on its side: full screen, tighter, the answers two to a row. */
@media (max-height: 500px) {
  .rk { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; border-radius: 0; }
  .rk__top { padding-top: 10px; padding-bottom: 8px; }
  .rk__body { padding-top: 14px; }
  .rk__q, .rk__res-h { margin-bottom: 14px; font-size: 1.375rem; max-width: none; }
  .rk__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rk__opts--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rk__opts button { min-height: 48px; padding-block: 10px; }
  .rk__opts--grid button { min-height: 60px; }
  .rk__foot { padding-block: 8px; }
}
@media (max-width: 359px) { .rk__note { display: none; } }
/* The narrowest phones: the call to book takes a row of its own, the width of the screen. */
@media (max-width: 359px) {
  .rk__foot { flex-wrap: wrap; row-gap: 6px; }
  .rk__book { flex: 1 1 100%; margin-left: 0; }
}