/* ==========================================================================
   CANTIC — marketing site
   One stylesheet for every page in public/site.

   The rules of the look:
   - Black and white. Colour is light, never paint: green appears as glow
     (the WebGL layer in js/site.js) and as the odd lit word, not as fills.
   - The eclipse is the product shot. It is screen-blended over the glow
     layer, so NOTHING between it and <html> may create a stacking context
     (no transform / filter / opacity / z-index on its ancestors) or the
     blend silently stops reaching the glow canvas.
   - Motion is transform + opacity only. Anything scroll-linked is driven
     from a spring in site.js, never from raw scroll, so wheels that jump
     100px at a time still read as one continuous move.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-var-latin.woff2') format('woff2-variations'),
       url('/fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/fonts/plex-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #f5f5f4;
  --ink-2: rgba(245, 245, 244, 0.72);
  --ink-3: rgba(245, 245, 244, 0.54);
  --ink-4: rgba(245, 245, 244, 0.38);
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.18);
  --panel: rgba(255, 255, 255, 0.035);
  --panel-2: rgba(255, 255, 255, 0.065);

  --g: #34d399;
  --g-hi: #6ee7b7;
  --g-deep: #059669;
  --g-teal: #2dd4bf;
  --g-rgb: 16, 185, 129;

  --paper: #f4f4f1;
  --paper-2: #eaeae6;
  --paper-ink: #0b0b0b;
  --paper-ink-2: rgba(11, 11, 11, 0.66);
  --paper-ink-3: rgba(11, 11, 11, 0.46);
  --paper-line: rgba(11, 11, 11, 0.12);

  --display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --wrap: 1280px;
  --gutter: clamp(20px, 4.2vw, 56px);
  --nav-h: 64px;
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 28px;
  --section-y: clamp(104px, 13vw, 184px);
}

/* ---------- Base ---------------------------------------------------------- */

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

/* The background lives on <html> only: the glow canvas sits at z-index -1,
   which paints above the root background but below every in-flow box. A
   background on <body> would be painted over the canvas. */
html {
  background: #000;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(52, 211, 153, 0.34); color: #fff; }
:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: #fff; color: #000;
  font-weight: 600; font-size: 14px;
  transform: translateY(-150%); transition: transform 0.3s var(--ease);
}
.skip:focus { transform: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The glow layer: one fixed WebGL canvas behind everything, rendered at
   reduced resolution (it is all soft light) and upscaled by the browser. */
.glow {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
}
.codefield {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
}
.glow-fallback {
  position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 32% at 78% 18%, rgba(var(--g-rgb), 0.16), transparent 70%),
    radial-gradient(34% 30% at 14% 76%, rgba(45, 212, 191, 0.1), transparent 70%);
}

/* ---------- Layout -------------------------------------------------------- */

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(880px + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--stack, 24px); }

.paper {
  background: var(--paper);
  color: var(--paper-ink);
  color-scheme: light;
}

/* ---------- Type ---------------------------------------------------------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--g);
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.9; }
.eyebrow--plain::before { display: none; }
.paper .eyebrow { color: var(--g-deep); }

.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; }
.label { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.paper .label { color: var(--paper-ink-3); }

.display, .h1, .h2, .h3 {
  font-family: var(--display);
  font-weight: 720;
  font-stretch: 110%;
  letter-spacing: -0.032em;
  color: #fff;
  text-wrap: balance;
}
.paper .display, .paper .h1, .paper .h2, .paper .h3 { color: var(--paper-ink); }
.display { font-size: clamp(52px, 8.4vw, 148px); line-height: 0.93; letter-spacing: -0.042em; font-weight: 760; }
.h1 { font-size: clamp(42px, 6vw, 96px); line-height: 0.97; letter-spacing: -0.038em; }
.h2 { font-size: clamp(34px, 4.2vw, 64px); line-height: 1.02; }
.h3 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.18; letter-spacing: -0.02em; font-weight: 680; font-stretch: 106%; }
.lead {
  font-size: clamp(18px, 1.55vw, 23px); line-height: 1.5; font-weight: 420;
  color: var(--ink-2); text-wrap: pretty;
}
.paper .lead { color: var(--paper-ink-2); }
.body { color: var(--ink-2); }
.paper .body { color: var(--paper-ink-2); }
.small { font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.paper .small { color: var(--paper-ink-3); }
.lit { color: var(--g-hi); }
.paper .lit { color: var(--g-deep); }

/* White-to-mint "lit edge" gradient for the one word per headline that
   carries the light — the site's version of the reference's hot gradient. */


.measure { max-width: 640px; }
.measure-sm { max-width: 520px; }
.mx-auto { margin-inline: auto; }

/* ---------- Buttons & links ---------------------------------------------- */

/* Every button is the app's glass button (components/ui/glass-button.tsx)
   pale green. It rests a light emerald tint and turns dark grey when
   selected, and as it does the glint fades in around it: a white ring that
   catches two highlights, which turn as they do in the app. */
@property --rim { syntax: '<angle>'; inherits: false; initial-value: -75deg; }
.btn {
  --h: 58px;
  --glint: 1.5px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  height: var(--h); padding: 0 28px; border-radius: 12px;
  background: #a6eec8; color: #02110b;
  font-size: 21px; font-weight: 600; font-stretch: 104%; letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform 0.5s var(--ease), background-color 0.25s, color 0.25s;
}
.btn::before {
  content: ''; position: absolute; inset: calc(-1 * var(--glint)); border-radius: calc(12px + var(--glint)); pointer-events: none; padding: var(--glint);
  background: conic-gradient(from var(--rim), #fff, rgba(255, 255, 255, 0.28) 10% 43%, #fff 50%, rgba(255, 255, 255, 0.28) 73% 93%, #fff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  transition: --rim 0.5s ease-in-out, opacity 0.18s ease-out;
}
.btn:hover { background: #232323; color: #fff; }
.btn:hover::before { --rim: -125deg; opacity: 1; }
/* on light ground the pale face needs an edge of its own */
.paper .btn:not(:hover) { box-shadow: inset 0 0 0 1px rgba(4, 120, 87, 0.3); }
.btn:active { transform: scale(0.97); }
.btn--sm { --h: 44px; padding: 0 18px; font-size: 17px; }
.btn--lg { --h: 66px; padding: 0 32px; font-size: 24px; }
.btn--xl { --h: 76px; padding: 0 38px; font-size: 28px; }
@media (max-width: 760px) {
  .btn:not(.btn--sm) { --h: 54px; padding: 0 24px; font-size: 19px; }
  .btn.btn--lg { --h: 60px; font-size: 21px; }
  .btn.btn--xl { --h: 64px; font-size: 23px; }
}

.btn .arr, .link .arr { transition: transform 0.5s var(--ease); }
.btn:hover .arr, .link:hover .arr { transform: translateX(4px); }

.link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--g-hi); font-weight: 560; font-size: 16px;
}
.link:hover { color: #fff; }
.paper .link { color: var(--g-deep); }
.paper .link:hover { color: var(--paper-ink); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center .actions, .actions--center { justify-content: center; }

/* Corona rim: cards gain a slowly turning halo of light on hover. */
@property --corona { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.card[data-spot]::after {
  background: conic-gradient(from var(--corona), transparent 0%, rgba(110, 231, 183, 0.75) 8%, transparent 18%, transparent 46%, rgba(255, 255, 255, 0.55) 56%, transparent 66%, transparent 100%);
}
.card[data-spot]:hover::after { animation: corona 9s linear infinite; }
@keyframes corona { to { --corona: 360deg; } }


/* Aperture: images open like totality ending — a widening circle with a
   thin ring of light on its edge. */
@property --ap { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.js [data-reveal='eclipse'] { opacity: 1; transform: none; --ap: 0%; transition: --ap 1.7s var(--ease); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 var(--ap), transparent calc(var(--ap) + 0.5%)); mask-image: radial-gradient(circle at 50% 50%, #000 var(--ap), transparent calc(var(--ap) + 0.5%)); }
.js [data-reveal='eclipse'].is-in { --ap: 150%; }

/* ---------- Photography --------------------------------------------------- */
/* Black and white, crushed a little, with the site's light raking across.
   The photos are stored already black and white at 0.95 brightness
   (media/photos/bw: CSS grayscale(1), then brightness(.95), baked in), and
   a black veil takes them down to 0.82, lifting on hover. That's exactly
   what grayscale(1) brightness(.82 → .95) used to do, but an animated CSS
   filter made the GPU build a filter pipeline mid-scroll (a half-second
   freeze the first time a card slid under the pointer); a fading veil is
   plain opacity. */
.photo { position: relative; overflow: hidden; border-radius: var(--r); background: #0a0a0a; isolation: isolate; }
.photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease); }
.photo::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #000; opacity: 0.1368; transition: opacity 0.8s; }
.photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.82) 100%);
  mix-blend-mode: normal;
}
.photo:hover img { transform: scale(1.03); }
.photo:hover::before { opacity: 0; }
.js .photo[data-reveal] img { transform: scale(1.18); }
.js .photo[data-reveal].is-in img { transform: scale(1.08); }

/* ---------- Page transitions: an eclipse between pages -------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.45s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in 0.75s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(0.985); } }
@keyframes vt-in { from { clip-path: circle(0% at 50% 42%); } to { clip-path: circle(142% at 50% 42%); } }

/* ---------- Nav ----------------------------------------------------------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  transition: color 0.4s, transform 0.6s var(--ease);
}
/* black once scrolled, over the white sections too: a layer that fades in
   across the first stretch of scroll (site.js sets --nav-a) */
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #000; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  opacity: var(--nav-a, 0); will-change: opacity;
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.nav__logo { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-stretch: 112%; font-size: 21px; letter-spacing: -0.03em; }
.nav__logo svg { width: 26px; height: 26px; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative; padding: 8px 14px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, 0.74);
  transition: color 0.3s, background-color 0.3s;
}
.nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.nav__link[aria-current='page'] { color: #fff; }
.nav__link[aria-current='page']::after {
  content: ''; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--g); box-shadow: 0 0 10px var(--g);
}
.nav__actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav__signin { font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, 0.74); padding: 8px 12px; transition: color 0.3s; }
.nav__signin:hover { color: #fff; }

/* Language selector: flag + EN/ES dropdown in the nav (the same links sit
   flat in the mobile sheet). The flags are inline SVG — emoji flags render
   as letter pairs on Windows — and the menu opens on click, closes on
   outside click or Escape (site.js). */
.nav__lang { position: relative; }
.nav__langbtn {
  display: flex; align-items: center; gap: 7px; padding: 8px 12px; margin-right: -4px;
  font: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.74); background: none; border: 0; border-radius: 8px;
  cursor: pointer; transition: color 0.3s;
}
.nav__langbtn:hover { color: #fff; }
.nav__langcar {
  width: 0; height: 0; margin-top: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
  opacity: 0.7; transition: transform 0.3s var(--ease);
}
.nav__lang.open .nav__langcar { transform: rotate(180deg); }
.nav__langmenu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 152px; padding: 6px;
  background: rgba(10, 11, 12, 0.96); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s;
}
.nav__lang.open .nav__langmenu { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.nav__langmenu a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
  font-size: 14px; color: rgba(255, 255, 255, 0.72); opacity: 1;
}
.nav__langmenu a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav__langmenu a[aria-current="true"] { color: #fff; }
.flag { display: block; width: 20px; height: 13px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }

.nav__toggle { display: none; width: 44px; height: 44px; margin-right: -10px; position: relative; }
.nav__toggle span {
  position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform 0.5s var(--ease), opacity 0.3s;
}
.nav__toggle span:nth-child(1) { top: 17px; }
.nav__toggle span:nth-child(2) { top: 26px; }
.nav-open .nav__toggle span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-open .nav__toggle span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

.sheet {
  position: fixed; inset: 0; z-index: 49; background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: calc(var(--nav-h) + 28px) var(--gutter) 32px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0s 0.45s;
}
.nav-open .sheet { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease); }
.sheet__links a {
  display: block; padding: 10px 0; font-size: 34px; font-weight: 700; font-stretch: 110%; letter-spacing: -0.03em;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.nav-open .sheet__links a { opacity: 1; transform: none; }
.nav-open .sheet__links li:nth-child(2) a { transition-delay: 0.04s; }
.nav-open .sheet__links li:nth-child(3) a { transition-delay: 0.08s; }
.nav-open .sheet__links li:nth-child(4) a { transition-delay: 0.12s; }
.nav-open .sheet__links li:nth-child(5) a { transition-delay: 0.16s; }
.nav-open .sheet__links li:nth-child(6) a { transition-delay: 0.2s; }
.sheet__foot { margin-top: auto; display: grid; gap: 12px; }
.sheet__foot .btn { width: 100%; }
.sheet__langs { display: flex; gap: 10px; margin-top: 14px; }
.sheet__langs a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 0; font-size: 15px; font-weight: 500;
  color: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: 999px;
}
.sheet__langs a[aria-current="true"] { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.nav-open { overflow: hidden; }

@media (max-width: 900px) {
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__links, .nav__actions { display: none; }
  .nav__toggle { display: block; justify-self: end; }
}
@media (min-width: 901px) {
  .sheet { display: none; }
}

/* ---------- Reveal-on-enter ---------------------------------------------- */
/* Pre-hidden only when JS is running (html.js), so no-JS visitors and
   crawlers always see the content. */

.js [data-reveal] {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.js [data-reveal='fade'] { transform: none; }
.js [data-reveal='scale'] { transform: scale(0.94); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Headlines rise line by line from behind a mask. site.js wraps each line. */
.ln { display: block; }
.js [data-lines] .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
/* (from far enough down that the tallest letters don't show over the mask's edge) */
.js [data-lines] .ln > span { display: block; transform: translate3d(0, 112%, 0); transition: transform 1.15s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0) * 80ms); }
.js [data-lines].is-in .ln > span { transform: none; }

/* ---------- Light bar (the glowing separator) ---------------------------- */

.lightbar {
  position: relative; height: 1px; width: min(1100px, 86%); margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(110, 231, 183, 0.9) 18%, #fff 50%, rgba(45, 212, 191, 0.9) 82%, transparent);
  transform-origin: 50% 50%;
}
.lightbar::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: -14px; height: 28px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--g-rgb), 0.55), transparent 70%);
  filter: blur(6px);
}
.js .lightbar[data-reveal] { transform: scaleX(0.04); opacity: 0; transition: transform 1.8s var(--ease), opacity 0.8s var(--ease); }
.js .lightbar[data-reveal].is-in { transform: none; opacity: 1; }

/* ---------- Cards --------------------------------------------------------- */

.card {
  position: relative; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  padding: clamp(24px, 2.4vw, 34px);
  transition: border-color 0.4s, transform 0.6s var(--ease), background-color 0.4s;
}
/* cursor spotlight — site.js sets --mx/--my on pointer move */
.card[data-spot]::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(110, 231, 183, 0.14), transparent 45%);
  opacity: 0; transition: opacity 0.5s;
}
.card[data-spot]::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -30%), rgba(110, 231, 183, 0.9), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.5s;
}
.card[data-spot]:hover::before, .card[data-spot]:hover::after { opacity: 1; }
.paper .card { background: #fff; border-color: var(--paper-line); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 20px 40px -30px rgba(0, 0, 0, 0.18); }
.paper .card[data-spot]::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(16, 185, 129, 0.09), transparent 45%); }
.paper .card[data-spot]::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -30%), rgba(5, 150, 105, 0.7), transparent 55%); }

.card__n { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; color: var(--g); }
.paper .card__n { color: var(--g-deep); }
.card__t { margin-top: 14px; }
.card__d { margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.paper .card__d { color: var(--paper-ink-2); }

.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 11px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--line-2); color: var(--ink-2);
}
.chip--g { border-color: rgba(52, 211, 153, 0.5); color: var(--g-hi); background: rgba(16, 185, 129, 0.08); }
.chip--solid { border-color: transparent; background: #fff; color: #000; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.paper .chip { border-color: var(--paper-line); color: var(--paper-ink-2); }
.paper .chip--g { border-color: rgba(5, 150, 105, 0.4); color: var(--g-deep); background: rgba(16, 185, 129, 0.08); }

.grid { display: grid; gap: var(--gap, 20px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Section heads ------------------------------------------------- */

.head { display: grid; gap: 22px; margin-bottom: clamp(48px, 6vw, 88px); }
.head--center { justify-items: center; text-align: center; }
.head--split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); align-items: end; gap: 40px; }
.head--split .lead { justify-self: end; max-width: 400px; }
@media (max-width: 860px) { .head--split { grid-template-columns: minmax(0, 1fr); } .head--split .lead { justify-self: start; } }
/* The home page's headings on phones, sized to the column so each line
   breaks where it's written to on any phone ("Eclipse has already" is the
   longest line, so its heading is set a touch smaller to keep it) */
@media (max-width: 760px) {
  [data-page='home'] main .h1 { font-size: calc((100vw - 2 * var(--gutter)) * 0.12); }
  [data-page='home'] #findings .h1 { font-size: calc((100vw - 2 * var(--gutter)) * 0.1); }
}

/* ---------- Stats --------------------------------------------------------- */

.stat__num {
  font-weight: 740; font-stretch: 112%; letter-spacing: -0.045em; line-height: 0.95;
  font-size: clamp(56px, 7.4vw, 124px); color: #fff; font-variant-numeric: tabular-nums;
}
.stat__num--md { font-size: clamp(44px, 5vw, 80px); }
.stat__label { margin-top: 14px; color: var(--ink-2); font-size: 16.5px; line-height: 1.45; max-width: 300px; }
.paper .stat__num { color: var(--paper-ink); }
.paper .stat__label { color: var(--paper-ink-2); }

/* Scroll-linked "highlight as you read" paragraph — site.js splits words. */
.js [data-highlight] .w { color: rgba(255, 255, 255, var(--a, 0.18)); transition: color 0.1s linear; }
.js .paper [data-highlight] .w { color: rgba(11, 11, 11, var(--a, 0.16)); }
.highlight { font-size: clamp(30px, 4.1vw, 62px); line-height: 1.12; font-weight: 680; font-stretch: 108%; letter-spacing: -0.03em; text-wrap: balance; }

/* ==========================================================================
   HOME — the eclipse story
   A pinned stage over a tall track. Two sticky layers share the track:
   .story__media (the rendered eclipse, an opaque WebGL canvas) and
   .story__copy (the text). The eclipse is never still while pinned — it
   dollies in — and the copy glides at a slowed scroll speed (site.js).
   ========================================================================== */

.story { position: relative; height: var(--story-h, 760vh); }
.story__media, .story__copy {
  position: sticky; top: 0; z-index: 2; height: 100vh; height: 100svh; width: 100%; overflow: hidden;
}
.story__media { pointer-events: none; background: #000; }
.eclipse-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* without WebGL: a drawn ring stands in for the rendered eclipse */
.no-webgl .eclipse-gl { display: none; }
.story.no-webgl .story__media, .no-webgl[data-eclipse] {
  background: radial-gradient(circle at 50% 55%, #000 0 min(19vw, 30vh), rgba(255, 255, 255, 0.9) calc(min(19vw, 30vh) + 1px), rgba(255, 255, 255, 0.25) calc(min(19vw, 30vh) * 1.2), transparent calc(min(19vw, 30vh) * 2)) #000;
}
.story__copy { margin-top: -100vh; margin-top: -100svh; pointer-events: none; }

.beat {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; place-items: center;
  padding: calc(var(--nav-h) + 16px) var(--gutter) 40px;
}
.beat > * { pointer-events: auto; }
.js .beat { opacity: 0; visibility: hidden; }
.js .beat.is-live { visibility: visible; }

/* Beat 0 — hero: the Kairo composition. The limb sits at 15% of the
   viewport (13% on phones); the copy sits below it, on the moon. */
.beat--hero { display: block; padding: 0; }
.hero-in {
  position: absolute; left: 0; right: 0; top: calc(21.5vh + 108px); top: calc(21.5svh + 108px);
  display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: var(--gutter);
}
.pill {
  display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.03); font-size: 13.5px; color: rgba(255, 255, 255, 0.82);
  transition: border-color 0.3s, background-color 0.3s;
}
.pill:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.07); }
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--g); box-shadow: 0 0 10px var(--g); }
.pill .arr { color: rgba(255, 255, 255, 0.45); transition: transform 0.4s var(--ease); }
.pill:hover .arr { transform: translateX(3px); }
.hero-h1 {
  font-size: clamp(40px, 5.4vw, 96px); line-height: 1.02; font-weight: 700; font-stretch: 106%;
  letter-spacing: -0.038em; color: #fff; text-wrap: balance;
}
.nowrap { white-space: nowrap; }
/* sized in em so the sentence keeps its measure (~740px at the largest) and its two lines as the type grows */
.hero-in .lead { margin-top: 24px; max-width: 23em; color: rgba(255, 255, 255, 0.7); font-size: clamp(20px, 2vw, 32px); line-height: 1.38; text-wrap: balance; }
.hero-in .actions { margin-top: 36px; gap: 14px; }
/* Tablets upright (and other screens taller than they're wide): the same
   two lines, larger for the taller canvas */
@media (min-width: 761px) and (max-aspect-ratio: 19/20) {
  .hero-h1 { font-size: clamp(56px, 8.2vw, 96px); }
  .hero-in .lead { font-size: clamp(22px, 2.9vw, 30px); }
}
/* Phones: four big lines ("Reacting is / too late. / We attack / you first.")
   and the button full width, the block centred on the moon below the limb
   (the auto margins keep it from spilling over the top on a short screen) */
@media (max-width: 760px) {
  .hero-in { top: calc(13vh + 52px); top: calc(13svh + 52px); bottom: 0; padding-bottom: calc(24px + 5vh); padding-bottom: calc(24px + 5svh); }
  .hero-in > :first-child { margin-top: auto; }
  .hero-in > :last-child { margin-bottom: auto; }
  .hero-h1 { font-size: clamp(36px, min(calc((100vw - 2 * var(--gutter)) * 0.166), 7.4svh), 64px); line-height: 1; text-wrap: wrap; }
  .hero-in .lead { margin-top: 22px; max-width: 19em; font-size: clamp(18px, 5vw, 21px); line-height: 1.42; }
  .hero-in .actions { margin-top: 32px; flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; }
}

/* Beat 2 — threat stats orbiting the eclipse */
.beat--threat { align-content: stretch; }
.threat { position: relative; width: 100%; max-width: 1320px; height: 100%; display: grid; grid-template-rows: auto 1fr auto; will-change: transform; }
.threat__title { text-align: center; }
.threat__title .h2 { font-size: clamp(33px, 4.4vw, 64px); } /* one line on laptops: the title runs ~20em */
.threat__grid {
  display: grid; grid-template-columns: 1fr minmax(260px, 34vw) 1fr; grid-template-rows: 1fr 1fr;
  align-items: center; column-gap: 24px;
}
.threat__stat { max-width: 340px; }
.threat__stat:nth-child(1) { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
.threat__stat:nth-child(2) { grid-column: 3; grid-row: 1; justify-self: start; }
.threat__stat:nth-child(3) { grid-column: 1; grid-row: 2; justify-self: end; text-align: right; }
.threat__stat:nth-child(4) { grid-column: 3; grid-row: 2; justify-self: start; }
.threat__stat .stat__num { font-size: clamp(44px, 5.2vw, 88px); }
.threat__stat .stat__label { max-width: 340px; font-size: 15.5px; text-wrap: balance; }
.threat__stat:nth-child(odd) .stat__label { margin-left: auto; }
/* Laptops and up: the block is centred, the rows close together; site.js
   keeps the eclipse in the middle of the four as they drift up together. */
@media (min-width: 761px) and (min-aspect-ratio: 19/20) {
  .threat { display: flex; flex-direction: column; justify-content: center; }
  .threat__title { margin-bottom: clamp(44px, 10vh, 112px); }
  .threat__grid { grid-template-rows: auto auto; row-gap: clamp(48px, 13vh, 150px); }
}

/* Beat 3 — an engagement, replayed, the eclipse to the right */
.beat--replay { place-items: start stretch; padding-top: calc(var(--nav-h) + clamp(16px, 4vh, 40px)); padding-left: clamp(24px, 4.4vw, 72px); }
.rp { width: 100%; }
.rp__col { width: min(100%, 60vw, 900px); will-change: transform; }
/* the engagement log: plain text on the night, no panel. The scroll types it
   out (site.js); proven lines are red and carry a line of evidence.
   The light takes it from the eclipse's side (a mask set in site.js). */
/* bolder and brighter than the site's other mono text: it carries the story here */
.log { font-family: var(--mono); font-size: clamp(12px, min(1.75vh, 1.15vw), 17px); font-weight: 500; color: var(--ink); }
.log__head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.82em; letter-spacing: 0.08em; color: var(--ink-2); }
.log__clock { color: #ff6b6b; font-weight: 600; font-variant-numeric: tabular-nums; }
.log__lines { list-style: none; margin: 8px 0 0; padding: 0; }
.ll { position: relative; display: grid; grid-template-columns: 4em 11.8em minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: clamp(2px, 0.45vh, 5px) 0; border-radius: 3px; }
.ll__t { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ll__ep { color: #fff; font-weight: 600; white-space: nowrap; }
.ll__ep::before { content: '\203A'; margin-right: 0.55em; color: var(--ink-3); }
.ll__ep.is-blank::before { visibility: hidden; }
.ll__what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the verdict: plain text at the right */
.ll__tag { font-size: 0.8em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.ll__tag--f { color: #fff; }
.ll__tag--f::before { content: '\2713'; margin-right: 0.6em; }
/* a proven finding: red, its verdict marked with an exclamation mark, and
   the row flagged once it's complete */
.ll--p { background: rgba(239, 68, 68, 0.07); }
.ll--p::before { content: ''; position: absolute; left: -12px; top: 3px; bottom: 3px; width: 2px; border-radius: 1px; background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.8); }
.js .ll--p:not(.is-done) { background: none; }
.js .ll--p:not(.is-done)::before { content: none; }
.ll--p .ll__t { color: #ff6b6b; }
.ll--p .ll__ep, .ll--p .ll__ep::before { color: #ffb3b3; }
.ll--p .ll__tag { color: #ff6b6b; }
.ll--p .ll__tag::before { content: '!'; margin-right: 0.6em; font-weight: 800; }
.ll__ev { grid-column: 2 / 4; padding-top: 1px; font-size: 0.86em; color: #ff7a7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* typed, never faded: a line shows from its first letter, its tag the moment it's complete */
.js .ll { visibility: hidden; }
.js .ll.is-on { visibility: visible; }
.js .ll .ll__tag { visibility: hidden; }
.js .ll.is-done .ll__tag { visibility: visible; }
/* the caret, after the last letter typed: steady while letters come, blinking when they stop */
.ll .is-caret::after { content: ''; display: inline-block; width: 0.55em; height: 1.05em; margin-left: 4px; vertical-align: -0.18em; background: #ff6b6b; animation: caret 1.05s steps(1) infinite; }
.log.is-typing .is-caret::after { animation: none; }
@keyframes caret { 50% { opacity: 0; } }

/* The four steps, under the engine's heading: the steps down the left and what the
   active one does as a big line on the right. The section slows right
   down in the middle of the screen and the scroll moves through the steps
   while it's at its slowest (site.js), the first lit from the start; each line comes in
   with a quick fade and rise as the last one goes
   up and out (down, going back). All four share one cell, so nothing
   around them moves. */
.verbs-sec { position: relative; height: var(--pin-h, auto); }
.verbs-sec__pin { position: relative; padding-block: clamp(24px, 4vh, 48px); will-change: transform; }
.verbs-sec__grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.verbs__list { border-left: 1px solid var(--line); position: relative; }
.verbs__rail { position: absolute; left: -1px; top: 0; width: 1px; height: 100%; background: linear-gradient(var(--g-hi), var(--g-teal)); box-shadow: 0 0 12px var(--g); transform-origin: 0 0; transform: scaleY(var(--p, 0)); will-change: transform; }
.verb { padding: 12px 0 12px 28px; }
.verb__t { font-size: clamp(26px, 2.5vw, 40px); font-weight: 720; font-stretch: 110%; letter-spacing: -0.03em; color: var(--ink-4); transition: color 0.5s; }
.verb.is-on .verb__t { color: #fff; }
.verbs__say { display: grid; }
.verb__say {
  grid-area: 1 / 1; align-self: center; color: #fff;
  font-size: clamp(30px, 4.8vw, 84px); line-height: 1.02; font-weight: 720; font-stretch: 110%; letter-spacing: -0.035em; text-wrap: balance;
  opacity: 0; transform: translate3d(0, 0.6em, 0); transition: opacity 0.08s ease-out, transform 0.15s var(--ease);
}
.verb__say.is-past { transform: translate3d(0, -0.4em, 0); }
/* (in once the last one has all but gone, so the two barely overlap) */
.verb__say.is-on { opacity: 1; transform: none; transition: opacity 0.15s ease-out 0.06s, transform 0.25s var(--ease) 0.06s; }
/* (set without a move the first time, so a page opened on it doesn't animate) */
.verbs__say.is-still .verb__say { transition: none; }

/* ---------- The story on a vertical canvas --------------------------------
   Phones, and any screen taller than it is wide (site.js keys its camera to
   the same query): the eclipse holds the top of the screen from the moment
   it lands, and the story runs beneath it from --port-top down. The threat
   is one column, the title then the four stats, rising slowly under the
   eclipse and fading before it gets there; the replay is a terminal whose
   lines feed up under its head as the scroll types them. */
@media (max-width: 760px), (max-aspect-ratio: 19/20) {
  .story { --port-top: calc(var(--nav-h) + min(62vw, 31vh)); --port-top: calc(var(--nav-h) + min(62vw, 31svh)); }
  /* without WebGL, the drawn ring in the eclipse's place above the column */
  .story.no-webgl .story__media {
    --ring: min(20vw, 10vh);
    background: radial-gradient(circle at 50% calc(var(--port-top) - var(--ring) - 48px), #000 0 var(--ring), rgba(255, 255, 255, 0.9) calc(var(--ring) + 1px), rgba(255, 255, 255, 0.25) calc(var(--ring) * 1.2), transparent calc(var(--ring) * 2)) #000;
  }
  .beat--threat, .beat--replay { display: block; padding: 0; }
  .threat { position: absolute; left: 0; right: 0; top: var(--port-top); height: auto; display: block; padding-inline: var(--gutter); text-align: center; }
  .threat__title { margin: 0; }
  .threat__title .h2 { font-size: clamp(30px, 8.6vw, 60px); }
  .threat__title .h2 span { display: block; }
  .threat__grid { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 4.4svh, 52px); margin-top: clamp(32px, 5svh, 60px); }
  .threat__stat:nth-child(n) { max-width: none; text-align: center; }
  .threat__stat .stat__num { font-size: clamp(58px, 17vw, 120px); }
  .threat__stat .stat__label, .threat__stat:nth-child(odd) .stat__label { max-width: 19em; margin: 10px auto 0; font-size: clamp(17px, 4.5vw, 24px); text-wrap: balance; }
  .rp { position: absolute; left: 0; right: 0; top: var(--port-top); bottom: 0; padding: 0 var(--gutter) 24px; }
  .rp__col { width: 100%; height: 100%; }
  .log { height: 100%; display: flex; flex-direction: column; font-size: clamp(13px, 2vw, 17px); }
  .log__head { flex: none; }
  /* the lines' window: they feed up out of it, under the head (site.js) */
  .log__win { flex: 1; min-height: 0; overflow: hidden; margin-left: -16px; padding-left: 16px; }
}
/* Phones: each line of the log on two rows, the command and its verdict,
   then what it found under the command (and a finding's evidence under
   that), at the size that just fits the longest command and verdict */
@media (max-width: 760px) {
  .log { font-size: min(15px, calc((100vw - 2 * var(--gutter)) / 24.2)); }
  .log__head { font-size: 0.84em; letter-spacing: 0.04em; }
  .ll { grid-template-columns: 3.3em minmax(0, 1fr) auto; column-gap: 0.7em; row-gap: 0.12em; padding: 0.55em 0; }
  .ll__tag { grid-column: 3; grid-row: 1; }
  .ll__what { grid-column: 2 / -1; grid-row: 2; white-space: normal; }
  .ll__ev { grid-column: 2 / -1; grid-row: 3; }
}

/* Narrower screens keep the steps down the left, as narrow as they'll go,
   the line taking the rest */
@media (max-width: 860px) {
  .verbs-sec__grid { grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 5vw, 48px); }
}
@media (max-width: 760px) {
  .verb { padding: 10px 0 10px 16px; }
  .verb__t { display: block; font-size: clamp(17px, 4.6vw, 21px); }
  .verb__say { font-size: clamp(24px, 7vw, 34px); line-height: 1.05; }
}

/* ---------- Page heroes (inner pages) ------------------------------------ */
/* A shorter version of the story: the eclipse sits behind the hero copy
   and scrubs through the page's own slice of the clip as the hero leaves. */

.phero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--nav-h) + 48px) 0 88px; }
.phero--short { min-height: 78vh; min-height: 78svh; }
.phero__media {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #000;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent);
}
.phero__copy { position: relative; }
.phero .display { font-size: clamp(50px, 7.8vw, 132px); }
.phero .lead { margin-top: 26px; max-width: 580px; }
.phero .actions { margin-top: 34px; }
.phero--center { text-align: center; }
.phero--center .lead { margin-inline: auto; }
.phero--center .actions { justify-content: center; }
.phero__foot { position: absolute; left: 0; right: 0; bottom: 28px; }

/* ---------- Bento (paper) ------------------------------------------------- */

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bento > * { grid-column: span 2; }
.bento .span-3 { grid-column: span 3; }
.bento .span-4 { grid-column: span 4; }
.bento .span-6 { grid-column: span 6; }
.bento .row-2 { grid-row: span 2; }
@media (max-width: 1024px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento > *, .bento .span-3, .bento .span-4 { grid-column: span 1; } .bento .span-6, .bento .wide { grid-column: span 2; } }
@media (max-width: 640px) { .bento { grid-template-columns: minmax(0, 1fr); } .bento > *, .bento .span-6, .bento .wide { grid-column: span 1; } .bento .row-2 { grid-row: auto; } }

.fw { display: flex; flex-direction: column; min-height: 240px; }
.fw__name { font-size: clamp(26px, 2.3vw, 34px); font-weight: 740; font-stretch: 112%; letter-spacing: -0.035em; line-height: 1.02; }
.fw__ref { margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--paper-ink-3); }
.fw__d { margin-top: auto; padding-top: 28px; color: var(--paper-ink-2); font-size: 15.5px; line-height: 1.5; }

/* the signed ledger — a live-looking audit trail */
.ledger, .paper .ledger { background: #0b0b0b; color: var(--ink); border-color: #0b0b0b; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.5); }
.ledger__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ledger__rows { margin-top: 26px; display: grid; gap: 0; font-family: var(--mono); font-size: 12.5px; }
.ledger__row {
  display: grid; grid-template-columns: 70px 132px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--ink-2);
}
.ledger__row .ev { color: #fff; }
.ledger__row .h { color: var(--g); }
.ledger__row .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.js .ledger__row { opacity: 0; transform: translateY(8px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i) * 140ms + 200ms); }
.js .ledger.is-in .ledger__row { opacity: 1; transform: none; }
.ledger__t { margin-top: auto; padding-top: 30px; }
.ledger__t .h3 { color: #fff; }
.ledger__t p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 640px) { .ledger__row { grid-template-columns: 58px minmax(0, 1fr) auto; } .ledger__row .what { display: none; } }

/* ---------- Horizontal findings gallery ---------------------------------- */

.gallery { position: relative; height: var(--pin-h, 300vh); }
.gallery__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; will-change: transform; }
.gallery__head { margin-bottom: clamp(32px, 5vh, 56px); }
/* the cards start in line with the text above (the column's edge, however
   wide the screen), and the last one stops the same way in from the right */
.gallery__track { --find-w: clamp(290px, 30vw, 420px); display: flex; gap: 20px; padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2); width: max-content; will-change: transform; }
.find {
  width: var(--find-w); aspect-ratio: 4 / 5; flex: none;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
/* what Eclipse managed there, in one plain line at the foot of the photo */
.find__t { margin-top: auto; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; font-weight: 700; font-stretch: 106%; letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.gallery__foot { margin-top: clamp(28px, 4vh, 44px); }
/* Phones: no pin, and the findings one above the other, full width */
@media (max-width: 760px) {
  .gallery { height: auto; }
  .gallery__pin { position: relative; height: auto; padding-block: var(--section-y) 0; transform: none !important; }
  .gallery__track { flex-direction: column; width: auto; gap: 16px; padding-inline: var(--gutter); transform: none !important; }
  .find { width: 100%; aspect-ratio: 1; }
  .find__t { font-size: clamp(22px, 6.6vw, 28px); }
}

/* ---------- Plans --------------------------------------------------------- */

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); }
.plan__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan__name { font-size: clamp(34px, 3.2vw, 48px); font-weight: 760; font-stretch: 112%; letter-spacing: -0.04em; line-height: 1; }
.plan__list { margin-top: 30px; display: grid; gap: 14px; }
.plan__list li { display: flex; gap: 14px; align-items: baseline; font-size: 17px; color: var(--ink); }
.plan__list li::before { content: ''; flex: none; width: 16px; height: 1px; background: var(--g); transform: translateY(-5px); }
.plan .actions { margin-top: auto; padding-top: 36px; }
/* Both plans are the site's card made solid (the code field doesn't show
   through), lit from the top edge the way the corona lights the moon's
   limb: a bright line along the rim, fading out to the corners, and a
   little light falling in from it. Core's light is white, Fortify's green. */
.plan { isolation: isolate; background: linear-gradient(180deg, #121212, #0a0a0a 70%); }
.plan::before, .plan::after { content: ''; position: absolute; pointer-events: none; }
.plan::before { inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(70% 55% at 50% 0%, rgba(255, 255, 255, 0.09), transparent 72%); }
.plan::after { left: 10%; right: 10%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); }
.plan--fortify { background: linear-gradient(180deg, #0c1512, #0a0a0a 70%); }
.plan--fortify::before { background: radial-gradient(75% 60% at 50% 0%, rgba(var(--g-rgb), 0.22), transparent 72%); }
.plan--fortify::after { background: linear-gradient(90deg, transparent, rgba(110, 231, 183, 0.8) 30%, #fff 50%, rgba(110, 231, 183, 0.8) 70%, transparent); box-shadow: 0 0 14px rgba(var(--g-rgb), 0.7); }
@media (max-width: 860px) { .plans { grid-template-columns: minmax(0, 1fr); } }
/* the close's eclipse rises close under the plans, its glow passing behind them */
#plans { padding-bottom: clamp(16px, 2vw, 32px); z-index: 1; }

@media (max-width: 760px) {
  [data-page='home'] .plan__name { font-size: 44px; }
  [data-page='home'] .plan__list li { font-size: 19px; }
}

/* ---------- Closing CTA -------------------------------------------------- */

/* On the home page (data-fit) the eclipse rings the whole call to action: site.js centres the moon on
   .close__core and sizes it to enclose it (--er), and the section makes room
   above and below the core for the moon and its corona (a third of the
   moon's radius above it, so it sits close under the plans). The glow
   reaches up over the section above rather than stopping at this one's edge. */
.close { position: relative; overflow-x: clip; text-align: center; padding-block: max(clamp(120px, 16vw, 220px), calc(var(--er, 0px) * 1.35 - var(--eh, 0px))) max(clamp(96px, 12vw, 160px), calc(var(--er, 0px) * 1.4 - var(--eh, 0px))); }
.close__eclipse {
  position: relative; width: min(520px, 76vw); aspect-ratio: 1; margin: 0 auto clamp(-120px, -8vw, -60px); pointer-events: none;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 60%, transparent 98%); mask-image: radial-gradient(circle closest-side, #000 60%, transparent 98%);
}
.close__eclipse[data-fit] {
  position: absolute; inset: calc(var(--er, 240px) * -0.7) 0 0; width: auto; aspect-ratio: auto; margin: 0;
  -webkit-mask-image: radial-gradient(circle at var(--ex, 50%) var(--ey, 50%), #000 calc(var(--er, 240px) * 1.3), transparent calc(var(--er, 240px) * 2));
  mask-image: radial-gradient(circle at var(--ex, 50%) var(--ey, 50%), #000 calc(var(--er, 240px) * 1.3), transparent calc(var(--er, 240px) * 2));
}
/* ...once site.js draws that fade into the canvas itself (its alpha) */
.close__eclipse[data-fit].gl-mask { -webkit-mask-image: none; mask-image: none; }
.close .wrap { position: relative; }
.close__core { width: fit-content; max-width: 100%; margin-inline: auto; }
.close .close__h { font-size: clamp(40px, 5.4vw, 88px); }
.close .lead { margin: 22px auto 0; max-width: 560px; }
.close .actions { margin-top: 34px; justify-content: center; }
@media (max-width: 760px) {
  .close .close__h { font-size: calc((100vw - 2 * var(--gutter)) * 0.122); }
  [data-page='home'] .close .lead { font-size: 20px; }
}

/* ---------- Lists, tables, accordions ------------------------------------ */

.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.5fr) minmax(0, 1.5fr); gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; }
.row__k .h3 { font-size: clamp(22px, 2vw, 30px); }
.row__k .mono { margin-top: 8px; color: var(--ink-4); display: block; }
.row__c .label { display: block; margin-bottom: 8px; }
.row__c p { color: var(--ink-2); font-size: 16px; }
.row__c--us p { color: #fff; }
.paper .rows, .paper .row { border-color: var(--paper-line); }
.paper .row__c p { color: var(--paper-ink-2); }
.paper .row__c--us p { color: var(--paper-ink); }
.paper .row__k .mono { color: var(--paper-ink-3); }
@media (max-width: 860px) { .row { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.012em; color: #fff;
  transition: color 0.3s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--g-hi); }
.qa summary .pm { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform 0.5s var(--ease), border-color 0.3s, background-color 0.3s; }
.qa summary .pm::before, .qa summary .pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; background: currentColor; border-radius: 2px; transition: transform 0.5s var(--ease); }
.qa summary .pm::after { transform: rotate(90deg); }
.qa details[open] summary .pm { transform: rotate(180deg); border-color: var(--g); background: rgba(var(--g-rgb), 0.12); }
.qa details[open] summary .pm::after { transform: rotate(0deg); }
.qa__a { overflow: hidden; }
.qa__a > div { padding: 0 60px 26px 0; color: var(--ink-2); font-size: 17px; line-height: 1.65; max-width: 780px; }
.qa__a a { color: var(--g-hi); text-decoration: underline; text-decoration-color: rgba(110, 231, 183, 0.4); text-underline-offset: 3px; }
.qa-group + .qa-group { margin-top: clamp(56px, 7vw, 96px); }
.qa-group__h { margin-bottom: 18px; font-family: var(--display); font-size: clamp(22px, 2vw, 28px); font-weight: 680; font-stretch: 106%; letter-spacing: -0.02em; color: #fff; }

/* ---------- Forms --------------------------------------------------------- */

.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 8px; align-content: start; }
.field label { font-size: 15px; font-weight: 500; color: #d4d4d4; }
.field__opt { color: var(--ink-3); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 17px; color: #fff;
  background: #121212; border: 1px solid #333; border-radius: 8px;
  padding: 15px 16px; transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.6) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 17px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 44px;
}
.field select option { background: #0b0b0b; color: #fff; }
.field input::placeholder, .field textarea::placeholder { color: #6b6b6b; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--g); background: #151515; box-shadow: 0 0 0 3px rgba(var(--g-rgb), 0.22); }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: #f87171; }
/* a detail that came from the visitor's account: still readable, but plainly not for typing in */
.field.is-known input { color: #cfcfcf; background: #0d0d0d; border-color: #262626; cursor: default; }
.field.is-known input:focus { background: #0d0d0d; border-color: #3a3a3a; box-shadow: none; }
.field__note { font-size: 15px; color: #a3a3a3; }
.field__err { font-size: 15px; color: #fca5a5; }
.field__err:empty { display: none; }
.form__note { font-size: 15px; color: #a3a3a3; }
.form__note.is-bad { color: #fca5a5; }
.form.is-sending .btn { opacity: 0.7; cursor: progress; }
/* a field only bots fill in (the server drops what comes with it) */
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 6px; }
.form__done { display: none; }
.form.is-done .form__fields { display: none; }
.form.is-done .form__done { display: block; }

/* ---------- Footer -------------------------------------------------------- */

.foot { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: clamp(64px, 8vw, 104px) 0 28px; background: #000; }
.foot__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.7fr)); gap: 40px; }
.foot__brand p { margin-top: 18px; max-width: 360px; color: var(--ink-3); font-size: 15px; line-height: 1.6; }
.foot__h { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 16px; }
.foot__links { display: grid; gap: 10px; }
.foot__links a { font-size: 15px; color: var(--ink-2); transition: color 0.3s; }
.foot__links a:hover { color: #fff; }
.foot__links a[aria-current='page'] { color: #fff; }
.foot__trust {
  position: relative; margin-top: clamp(48px, 6vw, 72px);
  padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(0, 0, 0, 0.5);
}
.foot__trust p { font-size: 14px; color: var(--ink-3); line-height: 1.6; }
.foot__trust strong { color: var(--ink); font-weight: 600; }
.foot__base { position: relative; margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13px; color: var(--ink-4); }
.foot__base a { color: var(--ink-3); transition: color 0.3s; }
.foot__base a:hover { color: #fff; }
.foot__legal { display: flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 900px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } }

/* ---------- Misc ---------------------------------------------------------- */

.divider { height: 1px; background: var(--line); }
.paper .divider { background: var(--paper-line); }
.note { font-size: 13px; color: var(--ink-4); }
.paper .note { color: var(--paper-ink-3); }

.person { display: flex; flex-direction: column; min-height: 260px; }
.person__mono {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-stretch: 112%; font-size: 21px; letter-spacing: -0.02em; color: #fff;
  background: radial-gradient(circle at 50% 38%, #1a1a1a, #000 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(110, 231, 183, 0.18), 0 0 40px -6px rgba(var(--g-rgb), 0.55);
}
.person__name { margin-top: auto; padding-top: 34px; font-size: 24px; font-weight: 700; font-stretch: 108%; letter-spacing: -0.025em; }
.person__role { margin-top: 6px; color: var(--ink-3); font-size: 15px; }

/* Terminal: the replay in the home story, the guard on the threats page */
.term { border-radius: var(--r-lg); border: 1px solid var(--line-2); background: rgba(6, 8, 8, 0.82); overflow: hidden; box-shadow: 0 40px 120px -60px rgba(var(--g-rgb), 0.5); }
.term__bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; }
.term__dots { display: flex; gap: 6px; }
.term__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.term__clock { margin-left: auto; color: var(--g); font-variant-numeric: tabular-nums; }
.term__body { padding: 10px 0; font-family: var(--mono); font-size: 13.5px; min-height: 480px; }
.tl { display: grid; grid-template-columns: 64px 148px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 20px; color: var(--ink-2); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background-color 0.6s; }
.tl .ts { color: var(--ink-4); font-variant-numeric: tabular-nums; }
.tl .ep { color: #fff; }
.tl .tag { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--ink-3); white-space: nowrap; }
.tl .tag--p { border-color: rgba(52, 211, 153, 0.55); color: var(--g-hi); background: rgba(16, 185, 129, 0.1); }
.tl .tag--f { border-color: #fff; background: #fff; color: #000; }
.js .tl { opacity: 0.08; }
.js .tl.is-on { opacity: 1; }
.tl.is-now { background: rgba(255, 255, 255, 0.04); }
.term__foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--ink-4); letter-spacing: 0.06em; }
@media (max-width: 760px) { .tl { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; font-size: 12px; padding: 9px 14px; } .tl .what { display: none; } .term__body { min-height: 0; } }

/* ---------- Reduced motion ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.2s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-lines] .ln > span { transform: none !important; }
}

/* The daylight section rides up over the last of the flood: same colour, so
   the seam is invisible, and the page never holds on a blank white screen. */
/* the white section waits under the story's layers, already in place, and
   is uncovered the moment the wash completes (site.js sets the overlap) */
.story + .paper, .story + .glide { position: relative; z-index: 1; margin-top: -45vh; margin-top: -45svh; }

/* The glide (site.js): below the home story each [data-glide] block keeps its
   place on the page as an empty track as tall as its content, and the content
   rides a fixed stage that site.js scrolls to wherever the page's spring has
   got to. The sheet has a screen of room above and below the content, so the
   stage can bring it in from below and carry it out past the top. The stage
   is overflow: hidden (not clip) on purpose: what the browser scrolls into
   view itself scrolls the stage, and site.js hands that on to the page.
   Without script, or with reduced motion, it's plain page. */
.glide { position: relative; z-index: 1; }
.glide__sheet { display: flow-root; }
.glide.is-on > .glide__stage {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  overflow-anchor: none; will-change: scroll-position;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}
.glide.is-on .glide__sheet { position: relative; will-change: transform; }
.glide.is-on .glide__sheet::before, .glide.is-on .glide__sheet::after { content: ''; display: block; height: 100vh; }
.glide.is-on .glide__sheet > * { pointer-events: auto; }
@media print {
  .glide.is-on { height: auto !important; }
  .glide.is-on > .glide__stage { position: static; overflow: visible; }
  .glide.is-on .glide__sheet { transform: none !important; }
  .glide.is-on .glide__sheet::before, .glide.is-on .glide__sheet::after { display: none; }
}

/* ==========================================================================
   Home sections
   ========================================================================== */

.evidence-foot { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; }

/* The systems that move money: four photographs, staggered like a slow pan */
.systems__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.systems__card { margin: 0; aspect-ratio: 4 / 5.3; }
.systems__card:nth-child(even) { margin-top: clamp(28px, 5vw, 72px); }
.systems__card figcaption {
  position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; display: grid; gap: 6px;
  font-size: clamp(17px, 1.5vw, 22px); font-weight: 680; font-stretch: 106%; letter-spacing: -0.02em; color: #fff;
}
@media (max-width: 900px) { .systems__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .systems__grid { gap: 10px; } .systems__card figcaption { left: 14px; right: 14px; bottom: 14px; font-size: 15px; } }

/* Engine: "This is Eclipse.", heading the four steps (phones: "This is /
   Eclipse." across the column) */
.verbs-sec__head { text-align: center; margin-bottom: clamp(40px, 7vh, 88px); }
@media (max-width: 760px) { .engine .display { font-size: calc((100vw - 2 * var(--gutter)) * 0.2); } }

/* Findings with photographs */
.find--photo { padding: 0; }
.find--photo .find__img { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.find--photo > .find__t { position: relative; z-index: 1; padding: 0 28px 28px; }

/* ==========================================================================
   Inner pages
   ========================================================================== */

/* left-aligned hero copy sits at the screen's left margin, clear of the
   eclipse, rather than in the centred column; centred heroes keep the column */
.phero__copy { max-width: none; }
.phero--center .phero__copy { max-width: calc(var(--wrap) + 2 * var(--gutter)); }
.phero__copy > .lead, .phero__copy > .actions { max-width: 640px; }
.phero--center .phero__copy > * { margin-inline: auto; }
.phero .eyebrow { margin-bottom: 22px; }
.phero--short .display, .phero .h1 { font-size: clamp(46px, 6.6vw, 108px); }
@media (max-width: 760px) {
  .phero { align-items: end; padding-top: 50vh; padding-top: 50svh; }
  .phero--short { padding-top: 38vh; padding-top: 38svh; }
  .phero--top { align-items: start; padding-top: calc(var(--nav-h) + 40px); }
}

.stats-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-strip > div { padding: clamp(28px, 3.4vw, 48px) clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); }
.stats-strip > div:first-child { border-left: 0; padding-left: 0; }
.stats-strip .stat__num { font-size: clamp(44px, 5.2vw, 84px); }
.stats-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-strip--4 .stat__num { font-size: clamp(40px, 4.4vw, 72px); }
.stats-strip__src { margin-top: 18px; }
@media (max-width: 1024px) and (min-width: 761px) { .stats-strip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats-strip--4 > div:nth-child(3) { border-left: 0; padding-left: 0; } .stats-strip--4 > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 760px) { .stats-strip { grid-template-columns: minmax(0, 1fr); } .stats-strip > div { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } .stats-strip > div:first-child { border-top: 0; } }

.feature { display: flex; flex-direction: column; gap: 18px; min-height: 230px; }
.feature .h3 { margin-top: auto; }
.feature p { color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.paper .feature p { color: var(--paper-ink-2); }

/* a title and a plain line each, between hairlines (no icons) */
.checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.checks > div { padding: 30px 32px 32px 0; border-bottom: 1px solid var(--line); }
.checks h3 { font-size: 21px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; color: #fff; text-wrap: balance; }
.checks p { margin-top: 8px; color: var(--ink-2); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.paper .checks, .paper .checks > div { border-color: var(--paper-line); }

/* ---------- What keeps an engagement in check (home) ---------------------- */
/* the six lines on their own, a size up, between the same hairlines, a
   little way under the findings and close over the plans */
#safety { padding: clamp(28px, 3.4vw, 48px) 0 clamp(12px, 1.6vw, 24px); }
.checks--big > div { padding: clamp(26px, 2.6vw, 40px) clamp(20px, 2.4vw, 36px) clamp(28px, 2.8vw, 42px) 0; }
.checks--big h3 { font-size: clamp(22px, 1.8vw, 26px); font-weight: 680; font-stretch: 106%; letter-spacing: -0.02em; line-height: 1.2; }
.checks--big p { font-size: clamp(16.5px, 1.2vw, 18px); color: rgba(245, 245, 244, 0.8); }
/* the four steps on white */
.paper .verbs__list { border-color: var(--paper-line); }
.paper .verb__t { color: rgba(11, 11, 11, 0.34); }
.paper .verb.is-on .verb__t { color: var(--paper-ink); }
.paper .verb__say { color: var(--paper-ink); }
/* The home page's white stretch is one fixed sheet (site.js brings it in
   under the story and fades it out across the dusk, the whole screen at
   once), so its sections are clear. Without script they keep their paper. */
.daylight { position: fixed; inset: 0; z-index: -1; background: var(--paper); opacity: 0; pointer-events: none; }
.js .story ~ .paper, .js .story ~ .glide .paper { background: none; }
.dusk { height: clamp(280px, 70vh, 760px); }
@media (max-width: 760px) { .dusk { height: 36vh; } }
/* a slow section grows by its hold (site.js), so its slide never runs into the next */
.section[data-slow] { padding-bottom: calc(var(--section-y) + var(--hold, 0px)); }
[data-slow] > .wrap { will-change: transform; }
.paper .checks p { color: var(--paper-ink-2); }
@media (max-width: 1024px) { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .checks { grid-template-columns: minmax(0, 1fr); } }


.incidents { display: grid; gap: 0; border-top: 1px solid var(--line); }
.incident { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.incident b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.incident span { color: var(--ink-2); }
@media (max-width: 640px) { .incident { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* Closer than it looks: three headlines, set like a front page */
.headlines__list { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.headline { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px 32px; align-items: baseline; padding: clamp(24px, 3.2vw, 44px) 0; border-bottom: 1px solid var(--line); }
.headline__y { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; color: var(--g-hi); }
.headline__t { font-size: clamp(30px, 4.6vw, 72px); }
.headline__s { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
  .headline { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .headline__s { text-align: left; }
}

/* The other blade: the incidents large, then the guard at work */
.guard__cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); }
.guard__case { padding-top: 22px; border-top: 1px solid var(--line-2); }
.guard__big { margin-top: 14px; font-family: var(--display); font-size: clamp(26px, 2.9vw, 44px); line-height: 1.04; font-weight: 720; font-stretch: 108%; letter-spacing: -0.03em; text-wrap: balance; }
.guard__how { margin-top: clamp(56px, 8vw, 112px); }
.guard__term .term__body { min-height: 0; }
.guard__term .tl { grid-template-columns: 112px minmax(0, 1fr) auto; }
.guard__term .tl .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.js .guard__term .tl { transform: translateY(8px); }
.js .guard__term.is-in .tl { opacity: 1; transform: none; transition-delay: calc(0.5s + var(--i) * 0.35s); }
@media (max-width: 860px) { .guard__cases { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 760px) { .guard__term .tl { grid-template-columns: 88px minmax(0, 1fr) auto; } .guard__term .tl .what { display: block; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--top { align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

.offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.office { aspect-ratio: 16 / 11; }
.offices--one { grid-template-columns: minmax(0, 1fr); }
.offices--one .office { aspect-ratio: 21 / 9; }
.office figcaption { position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 2; }
.office figcaption .h3 { color: #fff; }
.office figcaption p { margin-top: 6px; color: var(--ink-2); font-size: 15px; }
@media (max-width: 760px) { .offices { grid-template-columns: minmax(0, 1fr); } }

.usecases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.usecase { aspect-ratio: 4 / 4.6; }
.usecase figcaption { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; }
.usecase figcaption .h3 { color: #fff; font-size: 22px; }
.usecase figcaption p { margin-top: 6px; color: rgba(255, 255, 255, 0.72); font-size: 15px; line-height: 1.5; }
@media (max-width: 1024px) { .usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .usecases { grid-template-columns: minmax(0, 1fr); } .usecase { aspect-ratio: 4 / 3.4; } }

/* Contact: the heading and the ways to reach us beside a plain, solid form */
.contact { padding-top: calc(var(--nav-h) + clamp(48px, 9vh, 112px)); padding-bottom: clamp(56px, 6vw, 96px); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.contact__intro .lead { margin-top: 24px; max-width: 30em; }
/* side by side, the form runs down at least as far as the text beside it,
   the message box taking up any slack */
.contact__form textarea { min-height: clamp(150px, 22vh, 240px); }
@media (min-width: 901px) {
  .contact__form { align-self: stretch; display: flex; flex-direction: column; }
  .contact__form .form__fields { flex: 1; display: flex; flex-direction: column; }
  .contact__form .field--grow { flex: 1; display: flex; flex-direction: column; }
  .contact__form textarea { flex: 1; min-height: 160px; }
}
.contact__list { list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; border-top: 1px solid #262626; }
.contact__list li { display: grid; grid-template-columns: 11em minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid #262626; font-size: 18px; color: #fff; }
.contact__list li > span { color: #a3a3a3; font-size: 16px; }
.contact__list a { justify-self: start; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.4); transition: color 0.2s, text-decoration-color 0.2s; }
.contact__list a:hover { color: var(--g-hi); text-decoration-color: currentColor; }
/* one column: the form comes straight after the heading, the address
   after it */
@media (max-width: 900px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .contact__intro { display: contents; }
  .contact__intro .h1 { order: 1; }
  .contact__intro .lead { order: 2; }
  .contact__form { order: 3; margin-top: 36px; }
  .contact__list { order: 4; margin-top: 56px; }
}
@media (max-width: 520px) { .contact__list li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.form__done h3 { margin-bottom: 10px; }
.form__done p + p { margin-top: 10px; }
.form__done a { color: var(--g-hi); }