/* PulseCanna marketing site — shared styles.
   Plain CSS, no build step.

   The idea the site is built on: cultivation, manufacturing, wholesale and
   retail run from one set of numbers. The design carries it literally — four
   department lines converge into a single thread (main.js initThread) that
   runs through the product and down every page, and each section hangs off it
   as a numbered node. Navy ground, green thread, a mono face for the IDs that
   follow a harvest through the business. Only the app screens look like the
   app. */

/* ---------- Fonts ----------
   Self-hosted from fonts/ (SIL OFL 1.1, licences alongside): no request to
   Google, so no visitor IP leaves for a third party. All three are variable
   fonts — one file per subset covers every weight used. Subsets and ranges
   mirror what Google served. Inter and Manrope's Latin files are preloaded;
   the mono face is small print and loads on its own.
   To update: fetch the css2 API for these weights and replace the files. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The web fonts swap in over a local font (display=swap), so text paints
   first in a local font and swaps when the web font lands. Unmatched, that
   swap re-wraps the hero and shifts the page (CLS 0.115 on mobile when it was
   measured). These faces size a local font to each web font's measured
   advance width and vertical metrics, so the swap changes the letterforms
   and nothing else. One face per weight range, each on the matching local
   weight: pointing a bold fallback at a regular face makes the browser fake
   the bold, which is wider. Values measured in Chromium against the served
   fonts (tools: see README); re-measure if the weights or families change. */
@font-face {
  font-family: "Inter Fallback";
  font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
  size-adjust: 106.16%;
  ascent-override: 91.37%;
  descent-override: 22.61%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  font-weight: 500;
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
  size-adjust: 107.36%;
  ascent-override: 90.35%;
  descent-override: 22.35%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  font-weight: 600 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 102.71%;
  ascent-override: 94.44%;
  descent-override: 23.37%;
  line-gap-override: 0%;
}
/* Manrope's advance width against Arial, measured per weight in Chromium
   (the weights the site sets: 300, 500, 600, 700, 800); ascent and descent
   are Manrope's own (2132/600 on 2000 units) divided by the size-adjust. */
@font-face {
  font-family: "Manrope Fallback";
  font-weight: 200 450;
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
  size-adjust: 99.66%;
  ascent-override: 106.96%;
  descent-override: 30.10%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  font-weight: 451 550;
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
  size-adjust: 103.28%;
  ascent-override: 103.21%;
  descent-override: 29.05%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  font-weight: 551 650;
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
  size-adjust: 105.10%;
  ascent-override: 101.43%;
  descent-override: 28.54%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  font-weight: 651 750;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 100.85%;
  ascent-override: 105.70%;
  descent-override: 29.75%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  font-weight: 751 800;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 102.57%;
  ascent-override: 103.93%;
  descent-override: 29.25%;
  line-gap-override: 0%;
}
/* JetBrains Mono against Consolas: 109.13% wider (0.6em advance against
   0.55em); ascent 1020 and descent 300 on 1000 units, over the same. */
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Consolas"), local("Menlo"), local("Courier New"), local("CourierNewPSMT");
  size-adjust: 109.13%;
  ascent-override: 93.47%;
  descent-override: 27.49%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */

:root {
  /* Ground: deep navy-black. Green is the accent and the thread. */
  --bg: #0A1020;
  --bg-deep: #060B17;
  --surface: #0F182C;
  --surface-raised: #132038;
  --input: #16233D;
  --border: rgba(160, 182, 222, 0.16);
  --border-soft: rgba(160, 182, 222, 0.09);

  --accent: #3ECF8E;
  --accent-hover: #5FD9A4;
  --accent-ink: #3ECF8E;
  --accent-tint: rgba(62, 207, 142, 0.12);
  --accent-line: rgba(62, 207, 142, 0.35);

  --text: #EAF0F8;
  --text-strong: #FFFFFF;
  --text-body: #CFD8E6;
  /* Contrast on --bg: muted 7.6:1, dim 5.3:1 — both clear AA for small text. */
  --text-muted: #9DAAC0;
  --text-dim: #8492AA;

  /* The paper: one light sheet per page, for pacing. Ink contrast on it:
     text 17:1, muted 7.1:1, accent-ink 5.2:1. */
  --paper: #EEF0EA;
  --paper-ink: #0A1020;
  --paper-muted: #465166;
  --paper-accent: #08734A;
  --paper-line: rgba(10, 16, 32, 0.14);

  --success: #3ECF8E;
  --warning: #F5A524;
  --error: #F87171;
  --info: #60A5FA;

  --font-sans: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Manrope, "Manrope Fallback", Inter, "Inter Fallback", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius-sm: 0.375rem;
  --radius: 0.625rem;
  --radius-lg: 0.875rem;

  /* One motion language, taken from the app: a touch answers in ~160ms,
     a card settles in ~420ms, lists stagger ~32ms apart. */
  --ease: cubic-bezier(0.22, 0.9, 0.26, 1);
  --dur-touch: 160ms;
  --dur-settle: 420ms;
  --stagger: 32ms;

  /* Fluid type: each step grows with the viewport between a floor and a
     ceiling. The top of the scale is deliberately big — the headlines and
     the figures carry the page. */
  --step--2: clamp(0.72rem, 0.69rem + 0.1vw, 0.8rem);
  --step--1: clamp(0.875rem, 0.84rem + 0.12vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.04rem + 0.36vw, 1.375rem);
  --step-2: clamp(1.35rem, 1.15rem + 0.8vw, 1.9rem);
  --step-3: clamp(2.1rem, 1.5rem + 2.4vw, 4rem);
  --step-4: clamp(2.75rem, 1.5rem + 3.6vw, 7rem);
  --step-5: clamp(3.25rem, 1.2rem + 6.5vw, 11.5rem);

  /* Wide screens get used: the layout keeps growing with the viewport (86vw,
     so a 2560 display keeps ~180px a side, not 384). The cap is on the
     prose, not the layout: text keeps a reading measure of its own. */
  --container: clamp(72rem, 86vw, 200rem);
  --gutter: clamp(1rem, 0.5rem + 2.4vw, 3rem);
  --measure: 62ch;
  --header-h: 4.5rem;

  /* The rail: on wide screens every section is indented by it, and the
     thread (at the gutter's edge) and the section numbers run down it. On
     narrow screens it has no width and the thread runs down the middle of
     the gutter. main.js reads the same geometry. */
  --rail: 0px;

  color-scheme: dark;
}

@media (min-width: 1100px) {
  :root {
    --rail: clamp(9rem, 2rem + 7vw, 12.5rem);
  }
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  /* The canvas is painted too, so overscroll never flashes light and the
     scrollbar has a ground to sit on. */
  background: var(--bg);
}

/* A thin scrollbar in the site's palette: a muted blue-grey thumb (3.2:1 on
   the navy — findable at a glance) that lifts on hover, on a track that is
   the ground itself, not a channel cut into it, and no arrow buttons.
   Where ::-webkit-scrollbar works (Chrome, Edge, Safari) it does all of
   that. The standard properties go only to browsers without it (Firefox):
   where both are set, current Chrome follows the standard ones, which can
   neither hide the arrows nor lift the thumb. If Chrome ever drops the
   webkit rules, the @supports below starts matching and it falls back to
   the standard ones on its own. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #56657F var(--bg);
  }
}
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb {
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: #56657F;
}
html::-webkit-scrollbar-thumb:hover { background: #7A8BA8; }
html::-webkit-scrollbar-thumb:active { background: #95A4BE; }
html::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html::-webkit-scrollbar-corner { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code { font-family: var(--font-mono); font-size: 0.92em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.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;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: 1rem; top: 1rem; }

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

main { position: relative; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sections sit above the thread (z-index 1, drawn behind the content) and
   leave the rail to it. */
.section {
  position: relative;
  padding-block: clamp(4.5rem, 3rem + 5vw, 9rem);
}
.section > .container {
  position: relative;
  z-index: 2;
  padding-left: calc(var(--gutter) + var(--rail));
}
.section--tight { padding-block: clamp(3rem, 2rem + 3vw, 5.5rem); }
.section--flush-top { padding-top: 0; }

/* Section number and name: in the rail on wide screens, above the heading
   on narrow ones. The thread's node sits on its first line. */
.index {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.index span { color: var(--accent); }
@media (min-width: 1100px) {
  .index {
    position: absolute;
    top: 0.4rem;
    left: calc(var(--gutter) + 1.25rem);
    width: calc(var(--rail) - 2rem);
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
  }
}

.stack > * + * { margin-top: 1.5rem; }

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

.display,
.h1,
.h2,
.h3 {
  font-family: var(--font-display);
  color: var(--text-strong);
}

.display,
.h1 {
  font-size: var(--step-4);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 17ch;
  text-wrap: balance;
}
/* Weight as structure: a light line set against a heavy one. */
.display .soft,
.h1 .soft,
.h2 .soft {
  display: block;
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: -0.03em;
}
.h2 {
  font-size: var(--step-3);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 18ch;
  text-wrap: balance;
}
.h3 {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.kicker {
  display: block;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kicker b { font-weight: 500; color: var(--accent); }

.lead {
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-muted);
}
.lead strong { color: var(--text); font-weight: 500; }

.intro { max-width: var(--measure); margin-bottom: clamp(2.5rem, 1.8rem + 2.5vw, 5rem); }
.intro p { margin-top: 1.25rem; max-width: var(--measure); color: var(--text-muted); line-height: 1.7; }

.body { color: var(--text-muted); line-height: 1.7; max-width: var(--measure); }
.body + .body { margin-top: 1rem; }
.small { font-size: var(--step--1); line-height: 1.6; color: var(--text-muted); }
.fine { font-size: 0.8125rem; line-height: 1.6; color: var(--text-dim); }
.label {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mt-sm { margin-top: 0.75rem; }
.mt { margin-top: 1.5rem; }
.mt-lg { margin-top: 2rem; }
.mt-xl { margin-top: 3rem; }

/* A reference that follows a harvest through the business: SV-H-0913 reads
   the same in every department, and is marked the same wherever it appears. */
.ref {
  display: inline-block;
  padding: 0.05em 0.4em;
  border-radius: 0.25rem;
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.text-link {
  color: var(--accent-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--accent-line);
  transition: text-decoration-color var(--dur-touch) var(--ease);
}
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- Buttons ----------
   One button for every call to action, built from the app's own tokens
   (constants/theme) rather than copied from any one of its screens, which
   don't agree: RADIUS.md (6) — the app's primary actions sit at 5–8, never
   a pill — padding on its SPACE steps (8/16, 12/20 for the large size),
   the accent fill. The text is navy, not the app's white: the app is an
   internal tool behind a login, this is a public site that will be
   audited, and white on #3ECF8E is 2.0:1 against navy's 9.5:1. Primary and
   secondary share everything but the fill.
   The app's tokens are px, so these are too. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
  transition:
    background-color var(--dur-touch) var(--ease),
    border-color var(--dur-touch) var(--ease),
    box-shadow var(--dur-settle) var(--ease),
    transform var(--dur-settle) var(--ease);
}
.btn--lg { padding: 12px 20px; font-size: 0.9375rem; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: #3ECF8E; color: #0A1020; }
/* It answers the pointer: the arrow moves, the glow (the app's accentGlow)
   lifts. */
.btn--primary::after {
  content: "→";
  font-family: var(--font-mono);
  transition: translate var(--dur-settle) var(--ease);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(62, 207, 142, 0.16), 0 10px 28px rgba(62, 207, 142, 0.35);
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after { translate: 3px 0; }
.btn--secondary { background: transparent; color: var(--text-strong); border-color: rgba(160, 182, 222, 0.3); }
.btn--secondary:hover,
.btn--secondary:focus-visible { border-color: var(--accent); }
.btn--block { width: 100%; }
/* On a small phone the large buttons stack at full width. Side by side they
   sat on the wrap boundary: a few pixels wider in the fallback font, they
   wrapped, then un-wrapped when Inter arrived and pulled the page up 58px
   (CLS 0.097). Stacked, the fonts can't change the layout. */
@media (max-width: 479.98px) {
  .btn-row > .btn--lg { flex: 1 1 100%; }
}
.btn[disabled] { opacity: 0.6; cursor: progress; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem); }

/* ---------- Header ----------
   Part of the page, not a bar on top of it. At rest it has no material:
   the ground runs straight through it and only the links' frosted capsule
   and the call to action float there. Once content starts to pass beneath
   it (main.js sets .is-material) it becomes an island — inset from the
   edges, rounded, frosted, lit along its top edge — fading in over 300ms.
   All of it is opacity and transform on pseudo-elements: the header's box
   never changes size, so nothing below it moves. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* The island's edges: the content column, plus a little air. */
  --island-x: max(0.5rem, calc((100% - min(100%, var(--container))) / 2 + var(--gutter) - 0.875rem));
}
.site-header::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: var(--island-x);
  right: var(--island-x);
  z-index: -1;
  border-radius: 1.125rem;
  border: 1px solid rgba(160, 182, 222, 0.14);
  background: linear-gradient(180deg, rgba(30, 44, 78, 0.55) 0%, rgba(16, 25, 46, 0.5) 100%);
  box-shadow: 0 14px 40px rgba(2, 6, 18, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: translateY(-0.375rem) scale(1.01);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  pointer-events: none;
}
/* Light catching the island's top edge: lit toward the centre, gone at
   both ends. */
.site-header::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: calc(var(--island-x) + 1.5rem);
  right: calc(var(--island-x) + 1.5rem);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(160, 182, 222, 0) 0%,
    rgba(160, 182, 222, 0.22) 25%,
    rgba(120, 220, 170, 0.45) 50%,
    rgba(160, 182, 222, 0.22) 75%,
    rgba(160, 182, 222, 0) 100%);
  opacity: 0;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  transform: translateY(-0.375rem);
  pointer-events: none;
}
.site-header.is-material::before,
.site-header.is-material::after { opacity: 1; transform: none; }
/* The scrim under the island (the app's HeaderScrim, components/
   HeaderScrim.tsx): solid where the words are, letting go from 62% and
   gone at its bottom edge, which sits below the bar. Whatever scrolls
   beneath is blurred and dimmed behind the nav and dissolves back into view
   below it — never sliced by an edge. The ground still shows through. */
.site-header__scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 2rem);
  z-index: -2;
  background: linear-gradient(to bottom, rgba(8, 13, 26, 0.72) 0%, rgba(8, 13, 26, 0.72) 62%, rgba(8, 13, 26, 0) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  opacity: 0;
  transition: opacity 300ms var(--ease);
  pointer-events: none;
}
.site-header.is-material .site-header__scrim { opacity: 1; }
html.nav-open .site-header__scrim { opacity: 0; }
.site-header__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
}
.brand__mark--app { transition: transform 300ms var(--ease); transform-origin: 50% 50%; }
.site-header.is-material .brand__mark--app { transform: scale(0.88); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.brand__mark { width: auto; height: 1.75rem; }
.brand__mark--app { width: 2.5rem; height: 2.5rem; }
.wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-strong);
}
.wordmark span { color: var(--accent); }

/* The links sit in a frosted capsule. One indicator (main.js
   initNavIndicator) slides and resizes to whichever link is under the
   pointer or focus, and settles back on the current page when it leaves. */
.nav {
  position: relative;
  display: none;
  align-items: center;
  gap: 0.125rem;
  padding: 0.3rem;
  border-radius: 999px;
  border: 1px solid rgba(160, 182, 222, 0.13);
  background: rgba(160, 182, 222, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.nav-link {
  position: relative;
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color var(--dur-touch) var(--ease);
}
.nav .nav-link {
  z-index: 1;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.875rem;
  line-height: 1.4;
}
.nav-link:hover { color: var(--text-strong); }
.nav__indicator {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0;
  width: 0;
  border-radius: 999px;
  border: 1px solid rgba(62, 207, 142, 0.32);
  background: linear-gradient(180deg, rgba(62, 207, 142, 0.16), rgba(62, 207, 142, 0.08));
  box-shadow: 0 0 20px rgba(62, 207, 142, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  pointer-events: none;
  transition: transform 420ms var(--ease), width 420ms var(--ease), opacity 200ms var(--ease);
}
.nav__indicator.is-on { opacity: 1; }
.nav__indicator.is-still { transition: none; }
/* The current page keeps its dot, inside its link. */
.nav-link[aria-current="page"] { color: var(--text-strong); }
.nav .nav-link[aria-current="page"] { padding-left: 1.55rem; }
.nav .nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 50%;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: -0.1875rem;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(62, 207, 142, 0.7);
}

.site-header__actions { display: flex; align-items: center; gap: 0.75rem; }
.site-header__cta { display: none; }

/* Phone menu toggle: two lines, no box. They cross into an X when open. */
.nav-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-strong);
}
.nav-toggle__glyph { position: relative; display: block; width: 1.375rem; height: 0.625rem; }
.nav-toggle__glyph i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 320ms var(--ease), width 320ms var(--ease);
}
.nav-toggle__glyph i:first-child { top: 0; }
.nav-toggle__glyph i:last-child { bottom: 0; width: 70%; }
.nav-toggle[aria-expanded="true"] .nav-toggle__glyph i:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__glyph i:last-child { width: 100%; transform: translateY(-4.25px) rotate(-45deg); }

/* The open menu: a full-surface overlay under the bar, links entering one
   after another, large, numbered like the page's sections. */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(62, 207, 142, 0.12), transparent 70%),
    #060B17;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease), visibility 0s linear 320ms;
  overflow-y: auto;
}
.mobile-nav.open { opacity: 1; visibility: visible; transition: opacity 320ms var(--ease), visibility 0s; }
.mobile-nav__list { display: flex; flex-direction: column; counter-reset: menu; }
.mobile-nav__list .nav-link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--border-soft);
  counter-increment: menu;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 2.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--text-strong);
}
.mobile-nav__list .nav-link::before {
  content: counter(menu, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.mobile-nav__list .nav-link[aria-current="page"] { color: var(--accent); }
.mobile-nav__list .nav-link[aria-current="page"]::before { color: var(--accent); }
.mobile-nav__list .btn { align-self: flex-start; margin-top: 2rem; }
.mobile-nav__list > * {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 280ms var(--ease), translate 420ms var(--ease);
}
.mobile-nav.open .mobile-nav__list > * {
  opacity: 1;
  translate: none;
  transition-delay: calc(80ms + var(--i, 0) * 45ms);
}
.mobile-nav__list > :nth-child(2) { --i: 1; }
.mobile-nav__list > :nth-child(3) { --i: 2; }
.mobile-nav__list > :nth-child(4) { --i: 3; }
.mobile-nav__list > :nth-child(5) { --i: 4; }
.mobile-nav__list > :nth-child(6) { --i: 5; }
.mobile-nav__list > :nth-child(7) { --i: 6; }
/* While the menu is open the page behind it holds still, and the bar shows
   no material of its own over the overlay. */
/* Locked on body, not html: overflow on html stops body's overflow reaching
   the viewport, body becomes its own scroller, and the sticky header then
   sticks to it — off-screen once the page has been scrolled. */
html.nav-open body { overflow: hidden; }
html.nav-open .site-header::before,
html.nav-open .site-header::after { opacity: 0; }

@media (min-width: 640px) {
  .site-header__cta { display: inline-flex; }
}
@media (min-width: 768px) {
  .nav { display: flex; }
  .nav-toggle,
  .mobile-nav,
  .mobile-nav.open { display: none; }
}
@media (min-width: 768px) and (max-width: 960px) {
  /* The capsule plus the call to action is tight at tablet width. */
  .nav .nav-link { padding-inline: 0.6rem; font-size: 0.8125rem; }
  .nav .nav-link[aria-current="page"] { padding-left: 1.2rem; }
  .nav .nav-link[aria-current="page"]::before { left: 0.55rem; }
  .brand .wordmark { font-size: 1.1rem; }
}

/* ---------- Home hero ----------
   Four departments, set light, feed one line set heavy. main.js draws each
   department's line from the end of its word; they converge and run into
   the product. The hero resolves within one screen on laptops and up. */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(2.5rem, 1rem + 4vh, 4.5rem);
}
.hero > .container { position: relative; z-index: 2; }
.hero-inner {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a grid column otherwise grows to its content's
     minimum width, and the tour's tab strip pushed the whole hero off a
     390px screen (clipped by body overflow-x, so no scrollbar gave it away). */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 1rem + 5vw, 6rem);
  align-items: center;
}
@media (min-width: 1100px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
@media (min-width: 1800px) {
  /* Very wide screens: give the product more of the width, not more navy. */
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
}

.hero-title { max-width: none; }
.hero-title__depts { display: block; margin-bottom: 0.3em; }
/* fit-content, so main.js can start each department's line where its word
   ends. */
.dept {
  display: block;
  width: fit-content;
  font-size: 0.56em;
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--text-muted);
}
.hero-title__one { display: block; max-width: 11ch; }
.hero-title__one em { font-style: normal; color: var(--accent); }
@media (min-width: 640px) {
  .dept { font-size: 0.5em; }
}

.hero .hero-shot { margin: 0; }

/* Short, wide windows (a 1366x660 laptop once the browser's toolbars take
   their share): tighten the hero's rhythm and let the title follow the
   height, so the calls to action stay above the fold. */
@media (min-width: 1100px) and (max-height: 820px) {
  .hero { padding-block: 1.5rem; }
  .hero .kicker { margin-bottom: 1rem; }
  .hero-title { font-size: min(var(--step-4), 8.6vh); }
  .hero .lead { margin-top: 1rem; font-size: var(--step-0); }
  .hero .btn-row { margin-top: 1.5rem; }
}

/* ---------- Page intro (every page but Home) ---------- */

.page-intro { padding-block: clamp(3.5rem, 2rem + 6vw, 9rem) clamp(3rem, 2rem + 4vw, 7rem); }
.page-intro .display { max-width: 18ch; }
.page-intro .lead { max-width: 52ch; }

/* ---------- The stage: the app, framed, with room around it ---------- */

.stage {
  position: relative;
  padding: clamp(0.75rem, 0.3rem + 1.4vw, 1.75rem);
  border-radius: 1.25rem;
  /* Opaque: the thread runs behind the stage and must not show through. */
  background: linear-gradient(180deg, #152238 0%, #0E172A 100%);
  border: 1px solid var(--border);
  box-shadow: 0 40px 120px rgba(2, 6, 18, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* On a phone every pixel of width goes to the screen: a padded stage cost
   the tour's crops their readable scale (0.67x against a 0.7x floor). */
@media (max-width: 639.98px) {
  .stage { padding: 0; border-radius: 0.875rem; }
  .stage .tour__tabs { padding: 0.5rem 0.5rem 0; }
  .stage .tour__foot { padding: 0 0.75rem 0.75rem; }
}
.stage .frame {
  border-color: rgba(160, 182, 222, 0.18);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.stage .frame__bar { background: #111B2E; }
.stage .frame__label { background: #17233A; color: #9DAAC0; }

/* ---------- Product frames ---------- */

/* Neutral window chrome: three dots and a screen label, never a domain —
   the product has no public hostname to show. */
.frame {
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgba(160, 182, 222, 0.18);
  background: #0A0E12;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.frame__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: #111B2E;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.frame__dot { width: 0.625rem; height: 0.625rem; border-radius: 999px; background: #34405A; }
.frame__label {
  flex: 1;
  min-width: 0;
  margin-left: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  background: #17233A;
  color: #9DAAC0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame__body { background: #0A0E12; }
.frame__body img { width: 100%; height: auto; }

/* Gallery: an editorial grid — the first screen wide, the rest in pairs,
   captions set as mono labels under each. */
.shot-gallery { display: grid; gap: clamp(2rem, 1.2rem + 2vw, 3.5rem) clamp(1.25rem, 0.8rem + 1.5vw, 2.5rem); }
@media (min-width: 768px) {
  .shot-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot-gallery--wide-first > :first-child,
  .shot--wide { grid-column: 1 / -1; }
}
.shot figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
.shot figcaption::before {
  content: counter(shot, decimal-leading-zero);
  counter-increment: shot;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.shot-gallery { counter-reset: shot; }
.shot figcaption span {
  flex-basis: 100%;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---------- Product tour ---------- */

/* ---------- Product tour ---------- */

.tour__tabs {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding-bottom: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.tour__tabs::-webkit-scrollbar { display: none; }
.tour__tab {
  position: relative;
  flex-shrink: 0;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  overflow: hidden;
  transition: color var(--dur-touch) var(--ease), border-color var(--dur-touch) var(--ease), background-color var(--dur-touch) var(--ease);
}
.tour__tab:hover { color: var(--text-strong); border-color: rgba(255, 255, 255, 0.2); }
.tour__tab[aria-selected="true"] {
  color: var(--text-strong);
  border-color: var(--accent-line);
  background: var(--accent-tint);
}
/* The active tab's underline doubles as the autoplay timer. main.js listens
   for its animationend to advance, so the bar and the change can't drift. */
.tour__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform-origin: 0 50%;
}
.tour.is-playing .tour__tab[aria-selected="true"]::after {
  animation: tour-timer var(--tour-ms, 6000ms) linear forwards;
}
.tour.is-held .tour__tab[aria-selected="true"]::after { animation-play-state: paused; }
@keyframes tour-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Panels are all stacked; main.js sizes the stage to the tallest one, so the
   page doesn't jump when the tour moves between crops of different heights. */
.tour__stage { position: relative; aspect-ratio: 16 / 9; }
.tour__stage[style*="height"] { aspect-ratio: auto; }
.tour__panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-settle) var(--ease), visibility 0s linear var(--dur-settle);
}
.tour__panel > div { width: 100%; }
.tour__panel.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-settle) var(--ease), visibility 0s;
}
.tour__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.875rem;
}
.tour__caption { flex: 1 1 18rem; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); }
.tour__caption strong { color: var(--text); font-weight: 600; }
.tour__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}
.tour__toggle:hover { color: var(--text-strong); border-color: rgba(255, 255, 255, 0.2); }
.tour__toggle svg { width: 0.875rem; height: 0.875rem; }
.tour__toggle[hidden] { display: none; }

/* ---------- App screens ----------
   Product screens are drawn in HTML on a fixed 1280×720 canvas (main.js
   renders them) and scaled to their frame with --s, which main.js keeps equal
   to frame width / 1280. Scaling a fixed canvas, rather than letting the
   mock reflow, keeps every screen composed exactly as designed at any size. */

.screen-fit {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0E1110;
}
.screen-fit:not(.is-fit) .screen { visibility: hidden; }

.screen {
  --a: #3ECF8E;
  --a-tint: rgba(62, 207, 142, 0.12);
  --ink: #EDEDED;
  --ink-2: #B5B5B5;
  --ink-3: #8C8C8C;
  --line: rgba(255, 255, 255, 0.07);
  --good: #35E07E;
  --warn: #F5B72E;
  --serious: #F59A45;
  --bad: #FF6B6B;
  --s1: #12B87C; --s2: #3C8DEA; --s3: #DE4E4B; --s4: #936DE9;
  --s5: #DB7206; --s6: #0DA5B6; --s7: #BF8608; --s8: #D65DA1;
  /* The app is the app: its titles stay in Inter, not the site's display face. */
  --font-display: var(--font-sans);

  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 720px;
  transform: scale(var(--s, 1)) translate(var(--tx, 0px), var(--ty, 0px));
  transform-origin: 0 0;
  display: grid;
  grid-template-columns: 196px 1fr;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  font-variant-numeric: tabular-nums;
  background:
    radial-gradient(900px 500px at 78% -10%, rgba(62, 207, 142, 0.07), transparent 60%),
    radial-gradient(700px 420px at 10% 110%, rgba(60, 141, 234, 0.05), transparent 60%),
    #121212;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.screen * { margin: 0; }
.screen svg { display: inline-block; flex-shrink: 0; }

/* Rail */
.sc-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 10px 0 10px 10px;
  padding: 14px 10px 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #1B1B1B 0%, #151515 100%);
}
.sc-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 12px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sc-brand img { width: 30px; height: auto; }
.sc-brand span { color: var(--a); }
.sc-group {
  padding: 10px 8px 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6F6F6F;
}
.sc-nav {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.sc-nav svg { width: 15px; height: 15px; color: var(--ink-3); }
.sc-nav.is-on {
  color: #fff;
  background: var(--a-tint);
  border-color: rgba(62, 207, 142, 0.3);
}
.sc-nav.is-on svg { color: var(--a); }
.sc-tenant {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  font-size: 11.5px;
  font-weight: 600;
}
.sc-tenant small { display: block; font-size: 10px; font-weight: 400; color: var(--ink-3); }

/* Main column */
.sc-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 20px 16px 16px;
  overflow: hidden;
}
.sc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sc-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--a);
}
.sc-title {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.sc-sub { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.sc-tools { display: flex; align-items: center; gap: 8px; }
.sc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 220px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #1A1A1A;
  font-size: 12px;
  color: var(--ink-3);
}
.sc-search svg { width: 14px; height: 14px; }
.sc-icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #1A1A1A;
  color: var(--ink-2);
}
.sc-icon-btn svg { width: 15px; height: 15px; }
.sc-dot-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--a);
  color: #0B1A13;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.sc-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #2A3A33;
  color: #CFEFDF;
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.sc-avatar--sm { width: 22px; height: 22px; font-size: 9px; }
.sc-avatar.b { background: #23324A; color: #C9DDFB; }
.sc-avatar.v { background: #352A4D; color: #DDD0FA; }
.sc-avatar.o { background: #45311C; color: #FBDDBD; }
.sc-avatar.sq { border-radius: 7px; }
.sc-stack { display: flex; }
.sc-stack .sc-avatar { border: 2px solid #1B1B1B; margin-left: -6px; }
.sc-stack .sc-avatar:first-child { margin-left: 0; }

.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #1C1C1C;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.sc-btn svg { width: 13px; height: 13px; }
.sc-btn--a { background: var(--a); border-color: var(--a); color: #0B1A13; }
.sc-picker { color: #fff; }
.sc-picker::after { content: "▾"; margin-left: 2px; color: var(--ink-3); }

/* Surfaces: lit from above with a hairline, never a flat grey box */
.sc-card {
  position: relative;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #1F1F1F 0%, #181818 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.sc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sc-card-title { font-size: 12.5px; font-weight: 600; color: #fff; }
.sc-link { font-size: 11px; font-weight: 500; color: var(--a); }
.sc-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sc-num {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.sc-num--sm { font-size: 20px; }
.sc-delta { font-size: 11px; font-weight: 600; }
.sc-delta.up { color: var(--good); }
.sc-delta.down { color: var(--bad); }
.sc-muted { color: var(--ink-3); }
.sc-soft { color: var(--ink-2); }
.sc-strong { font-weight: 600; color: #fff; }
.sc-small { font-size: 11px; }

.sc-row { display: flex; gap: 12px; min-height: 0; }
.sc-grow { flex: 1; min-width: 0; }
.sc-grid { display: grid; gap: 12px; min-height: 0; }
.sc-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.sc-badge.good { background: rgba(53, 224, 126, 0.13); color: var(--good); }
.sc-badge.warn { background: rgba(245, 183, 46, 0.13); color: var(--warn); }
.sc-badge.bad { background: rgba(255, 107, 107, 0.13); color: var(--bad); }
.sc-badge.info { background: rgba(60, 141, 234, 0.15); color: #7FB5F5; }
.sc-badge.plain { background: rgba(255, 255, 255, 0.06); color: var(--ink-2); }

.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #1A1A1A;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.sc-chip.is-on { border-color: rgba(62, 207, 142, 0.4); background: var(--a-tint); color: #fff; }
.sc-chip b { font-weight: 600; color: var(--ink-3); }
.sc-chip.is-on b { color: var(--a); }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Lists and tables */
.sc-list { display: flex; flex-direction: column; }
.sc-li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.sc-li:first-child { border-top: 0; padding-top: 2px; }
.sc-li-main { flex: 1; min-width: 0; }
.sc-li-title { font-size: 12px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-li-meta { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sc-table th {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sc-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.045); color: var(--ink-2); white-space: nowrap; }
.sc-table td:first-child { color: #fff; font-weight: 500; }
.sc-table .r { text-align: right; }
.sc-table tr.is-open td { background: rgba(62, 207, 142, 0.05); }
.sc-table tr.sub td { padding-top: 5px; padding-bottom: 5px; font-size: 11.5px; background: rgba(255, 255, 255, 0.015); }
.sc-table tr.sub td:first-child { padding-left: 30px; color: var(--ink-2); font-weight: 400; }
.sc-caret { display: inline-block; width: 12px; color: var(--ink-3); }

.sc-meter { position: relative; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.sc-meter i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--a); }

/* Home */
.sc-quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sc-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #1D1D1D 0%, #181818 100%);
  font-size: 11.5px;
  font-weight: 500;
}
.sc-tile svg { width: 15px; height: 15px; color: var(--a); }
.sc-bars { display: flex; align-items: flex-end; gap: 5px; height: 92px; }
.sc-bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--s1), rgba(18, 184, 124, 0.55)); }
.sc-bars i.lo { background: rgba(255, 255, 255, 0.12); }
.sc-legend { display: flex; gap: 14px; font-size: 11px; color: var(--ink-2); }
.sc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sc-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.sc-split { display: flex; height: 8px; border-radius: 999px; overflow: hidden; gap: 2px; }
.sc-split i { background: var(--c); }

/* Reports catalogue */
.sc-cat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-height: 0; }
.sc-cat-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-cat-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 4px; }
.sc-cat-head .sc-badge { padding: 1px 6px; }
.sc-rep {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #1D1D1D 0%, #181818 100%);
}
.sc-rep-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--a-tint); color: var(--a); flex-shrink: 0; }
.sc-rep-icon svg { width: 14px; height: 14px; }
.sc-rep > div { flex: 1; min-width: 0; }
.sc-rep strong { display: block; font-size: 12px; font-weight: 600; color: #fff; }
.sc-rep span { display: block; font-size: 10.5px; line-height: 1.35; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-rep > svg { width: 12px; height: 12px; color: var(--ink-3); }

/* Lab results */
.sc-potency { display: grid; grid-template-columns: 92px 1fr 48px; align-items: center; gap: 8px 10px; font-size: 11.5px; }
.sc-potency .sc-meter { height: 8px; }
.sc-potency b { text-align: right; font-weight: 600; color: #fff; }
.sc-kv { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px solid var(--line); font-size: 11.5px; }
.sc-kv:first-of-type { border-top: 0; }

/* Taskboard */
.sc-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 0; flex: 1; }
.sc-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  min-height: 0;
}
.sc-col-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; }
.sc-col-head span { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.sc-task {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #202020 0%, #1A1A1A 100%);
}
.sc-task-label { width: 34px; height: 4px; border-radius: 999px; background: var(--c); }
.sc-task-title { font-size: 12px; font-weight: 500; line-height: 1.35; color: #fff; }
.sc-task-foot { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ink-3); }
.sc-task-foot .sc-stack { margin-left: auto; }
.sc-task-foot svg { width: 12px; height: 12px; }
.sc-due { display: inline-flex; align-items: center; gap: 4px; }
.sc-due.late { color: var(--bad); }
.sc-due.soon { color: var(--warn); }

/* Market bands */
.sc-bandrow { display: grid; grid-template-columns: 150px 1fr 84px 74px; align-items: center; gap: 14px; padding: 9px 4px; border-top: 1px solid var(--line); }
.sc-bandrow:first-of-type { border-top: 0; }
.sc-band { position: relative; height: 22px; }
.sc-band::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); }
.sc-band-range { position: absolute; top: 5px; height: 12px; border-radius: 6px; background: rgba(60, 141, 234, 0.22); border: 1px solid rgba(60, 141, 234, 0.45); }
.sc-band-med { position: absolute; top: 2px; width: 2px; height: 18px; background: #7FB5F5; }
.sc-band-you { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 999px; background: var(--a); border: 2px solid #121212; box-shadow: 0 0 0 1px var(--a); }

/* The Pulse */
.sc-post { display: flex; flex-direction: column; gap: 8px; }
.sc-post-head { display: flex; align-items: center; gap: 8px; }
.sc-post-head .sc-li-meta { margin-top: 1px; }
.sc-post-body { font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.sc-post-foot { display: flex; align-items: center; gap: 14px; font-size: 11px; color: var(--ink-3); }
.sc-post-foot span { display: inline-flex; align-items: center; gap: 5px; }
.sc-post-foot svg { width: 13px; height: 13px; }
.sc-poll { display: flex; flex-direction: column; gap: 6px; }
.sc-poll-opt { position: relative; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); overflow: hidden; font-size: 12px; }
.sc-poll-opt i { position: absolute; inset: 0 auto 0 0; background: var(--a-tint); }
.sc-poll-opt span { position: relative; display: flex; justify-content: space-between; }
.sc-signal { border-color: rgba(245, 183, 46, 0.3); }
.sc-signal::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--warn); }

/* Agent */
.sc-chat { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1; }
.sc-msg-user {
  align-self: flex-end;
  max-width: 520px;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  background: rgba(62, 207, 142, 0.14);
  border: 1px solid rgba(62, 207, 142, 0.3);
  font-size: 13px;
  color: #fff;
}
.sc-msg-ai { display: flex; gap: 10px; max-width: 760px; }
.sc-msg-ai-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--a-tint); color: var(--a); flex-shrink: 0; }
.sc-msg-ai-mark svg { width: 15px; height: 15px; }
.sc-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #1A1A1A;
  font-size: 12.5px;
  color: var(--ink-3);
}
.sc-composer .sc-btn { margin-left: auto; }
.sc-hbar { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; font-size: 11.5px; }
.sc-hbar-track { display: flex; flex-direction: column; gap: 3px; }
.sc-hbar-track i { display: block; height: 7px; border-radius: 0 4px 4px 0; }
.sc-hbar-track i.now { background: var(--s1); }
.sc-hbar-track i.then { background: rgba(255, 255, 255, 0.18); }

/* Agent teaser. .is-anim is only ever added by main.js's playAgent(), so
   every other render of the agent screen (tour, galleries, reduced motion)
   shows the finished answer. */
.sc-status { display: none; }
.screen.is-anim .sc-status.is-on {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.sc-spin {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--a);
  animation: sc-spin 700ms linear infinite;
}
.screen.is-anim [data-a] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-settle) var(--ease), transform var(--dur-settle) var(--ease);
}
.screen.is-anim [data-a].is-in { opacity: 1; transform: none; }
.screen.is-anim .sc-hbar-track i {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 700ms var(--ease);
}
.screen.is-anim.bars-in .sc-hbar-track i { transform: scaleX(1); }
.screen.is-anim.bars-in .sc-hbar-track i.then { transition-delay: 90ms; }
.sc-composer.is-typing { color: var(--ink); border-color: rgba(62, 207, 142, 0.4); }
.sc-composer.is-typing [data-composer]::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--a);
  animation: sc-caret 1s steps(1) infinite;
}
.sc-btn[data-send] { transition: transform var(--dur-touch) var(--ease), filter var(--dur-touch) var(--ease); }
.sc-btn[data-send].is-press { transform: scale(0.93); filter: brightness(1.15); }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-caret { 50% { opacity: 0; } }

.agent-demo { margin: 0; }

/* Phone crops. On narrow screens main.js shows only the .sc-focus region of
   each screen; these rules narrow the regions that are wide on the full
   canvas so they can be shown at a readable scale (~0.75× or larger). */
.screen-fit.is-focus .sc-focus--narrow { flex: none !important; width: 440px; }
.screen-fit.is-focus .sc-focus--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 440px; }
.screen-fit.is-focus .sc-bandrow.sc-focus { width: 440px; grid-template-columns: 100px 1fr 70px 62px; }
/* Marked regions keep their natural size: no shrinking inside the fixed-height
   canvas (it cut the inventory band's bottom row) and no stretching to a
   neighbour's height (it left the board column two-thirds empty). */
.screen-fit.is-focus .sc-focus { flex-shrink: 0; align-self: start; }
.screen-fit.is-focus .sc-msg-user.sc-focus { align-self: flex-start; }
.screen-fit.is-focus .sc-rep.sc-focus,
.screen-fit.is-focus .sc-cat-head.sc-focus,
.screen-fit.is-focus .sc-col-head.sc-focus,
.screen-fit.is-focus .sc-task.sc-focus { align-self: stretch; }
.screen-fit.is-focus .sc-msg-user.sc-focus { align-self: flex-start; max-width: 440px; }
.screen-fit.is-focus .sc-msg-ai.sc-focus-shape { width: 440px; }
.screen-fit.is-focus .sc-msg-ai.sc-focus-shape .sc-row { flex-direction: column; }

/* Space held for screens before main.js draws them, so the page doesn't jump
   when they arrive (it did: CLS 0.23 on home, 0.53 on demo). Desktop screens
   are 16:9; phone crops are measured per screen at 341px wide. */
[data-screen]:empty,
[data-agent-demo]:empty { aspect-ratio: 16 / 9; }
[data-tour]:empty { padding-bottom: 157px; }
[data-tour]:empty::before { content: ""; display: block; aspect-ratio: 16 / 9; }
@media (max-width: 639.98px) {
  [data-screen="home"]:empty { aspect-ratio: 341 / 169; }
  [data-screen="reports"]:empty { aspect-ratio: 341 / 224; }
  [data-screen="inventory"]:empty { aspect-ratio: 341 / 159; }
  [data-screen="labs"]:empty { aspect-ratio: 341 / 166; }
  [data-screen="board"]:empty { aspect-ratio: 341 / 218; }
  [data-screen="market"]:empty { aspect-ratio: 341 / 136; }
  [data-screen="pulse"]:empty { aspect-ratio: 341 / 160; }
  [data-screen="agent"]:empty,
  [data-agent-demo]:empty { aspect-ratio: 341 / 255; }
  [data-tour]:empty { padding-bottom: 215px; }
  [data-tour]:empty::before { aspect-ratio: 341 / 255; }
  /* The tallest phone crop (the agent's). Screens are drawn one at a time,
     so this reserve is the stage's height, not a placeholder for one.
     Doubled class: the base .tour__stage rule comes later in this file and
     would otherwise win at equal specificity, as it silently did. */
  .tour .tour__stage { aspect-ratio: 341 / 255; }
}

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

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

.field + .field { margin-top: 1rem; }
.form-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}
.form-label .req { color: var(--accent); }
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--text);
  font-size: 0.9375rem;
  transition: border-color var(--dur-touch) var(--ease), box-shadow var(--dur-touch) var(--ease);
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  /* A 3px ring you can find at a glance; at 15% it read as a tint. */
  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.45);
}
.form-input[aria-invalid="true"] { border-color: var(--error); }
.form-input::placeholder { color: var(--text-dim); opacity: 1; }
select.form-input {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23A3A3A3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
}
textarea.form-input { min-height: 8rem; resize: vertical; }

.form-error {
  display: none;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--error);
}
.form-error.visible { display: block; }

.form-success { display: none; padding: 2rem 0.5rem; text-align: center; }
.form-success.visible { display: block; }
.form-success .icon-box { margin-inline: auto; }

/* Netlify's spam trap. Hidden from people and assistive tech, left in the
   DOM so bots that fill every field still find it. */
.honeypot { display: none; }

/* ---------- Lists ---------- */

/* Items hang off a short green rule — a stub of the thread. */
.checklist {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.25rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-body);
}
.checklist li { display: flex; gap: 0.75rem; }
.checklist li::before {
  content: "";
  flex-shrink: 0;
  width: 0.875rem;
  height: 1px;
  margin-top: 0.78em;
  background: var(--accent-ink);
}
@media (min-width: 640px) {
  .checklist--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

.numbered {
  display: grid;
  margin-top: 1.5rem;
  counter-reset: step;
  border-bottom: 1px solid var(--border);
}
.numbered li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 1rem;
  border-top: 1px solid var(--border);
  counter-increment: step;
  color: var(--text-body);
  line-height: 1.6;
}
.numbered li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
}

.note {
  max-width: var(--measure);
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-muted);
}
.note strong { color: var(--text); font-weight: 600; }

/* ---------- Home: the trace ----------
   One harvest followed through every department. Each row is a node on the
   thread; the figures are the page's loudest type, and the harvest's ID is
   marked the same way in every row, so the eye finds it travelling. */

.trace { border-bottom: 1px solid var(--border); }
.trace__step {
  display: grid;
  gap: 0.35rem 2.5rem;
  padding-block: clamp(1.75rem, 1.1rem + 2vw, 3.25rem);
  border-top: 1px solid var(--border);
}
.trace__dept {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text);
}
.trace__dept b { font-weight: 500; color: var(--accent); margin-right: 0.6em; }
.trace__ref { margin-top: 0.35rem; font-size: var(--step--1); line-height: 1.5; color: var(--text-muted); }
.trace__fig {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.055em;
  color: var(--text-strong);
  white-space: nowrap;
}
.trace__fig small {
  margin-left: 0.3em;
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}
.trace__same {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--accent);
  white-space: normal;
}
.trace__note { margin-top: 0.75rem; max-width: 38ch; color: var(--text-muted); line-height: 1.65; }
.trace__foot { margin-top: 1.5rem; max-width: var(--measure); }
@media (min-width: 900px) {
  .trace__step {
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.5fr) minmax(0, 1.25fr);
    align-items: end;
  }
  .trace__who { align-self: start; }
  .trace__fig,
  .trace__note { margin-top: 0; }
}

/* ---------- Systems: the four pillars as a typographic index ---------- */

.systems { border-bottom: 1px solid var(--border); }
.system {
  display: grid;
  gap: 0.75rem 3rem;
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 3rem);
  border-top: 1px solid var(--border);
}
.system__name {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--text-strong);
  transition: color var(--dur-settle) var(--ease);
}
.systems--long .system__name { font-size: var(--step-4); }
.system:hover .system__name { color: var(--accent); }
.system__body { max-width: 44ch; color: var(--text-muted); line-height: 1.65; }
.system__body strong { display: block; margin-bottom: 0.4rem; color: var(--text); font-weight: 600; }
.system .checklist { margin-top: 1rem; }
@media (min-width: 900px) {
  .system { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; }
  .system--top { align-items: start; }
}

/* ---------- The sheet: one light page per page, for pacing ---------- */

.sheet {
  --text: var(--paper-ink);
  --text-strong: var(--paper-ink);
  --text-body: #1C2538;
  --text-muted: var(--paper-muted);
  --text-dim: var(--paper-muted);
  --border: var(--paper-line);
  --border-soft: rgba(10, 16, 32, 0.08);
  --accent-ink: var(--paper-accent);
  --accent-tint: rgba(8, 115, 74, 0.1);
  --accent-line: rgba(8, 115, 74, 0.4);
  --input: #FAFBF7;
  /* Its own form controls and scrollbars render light, like the paper. */
  color-scheme: light;
  position: relative;
  padding: clamp(1.5rem, 0.6rem + 3.6vw, 5.5rem);
  border-radius: 0.375rem;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.4);
}
.sheet :focus-visible { outline-color: var(--paper-accent); }
.sheet .btn--secondary { color: var(--paper-ink); border-color: rgba(10, 16, 32, 0.3); }
.sheet .btn--secondary:hover { border-color: var(--paper-accent); }
.sheet .h2 .soft,
.sheet .display .soft { color: var(--paper-muted); }
/* A document header: the tenant, the view, the date — ruled off. */
.sheet__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--paper-ink);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-ink);
}

/* Agent, on the sheet: the question set as a quotation, the app answering. */
.agent-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.5rem);
}
@media (min-width: 1100px) {
  .agent-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}
.quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.9rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  text-indent: -0.42em;
}
.quote::before { content: "“"; font-weight: 800; color: var(--accent-ink); }
.quote::after { content: "”"; font-weight: 800; color: var(--accent-ink); }
.quote + p { margin-top: 1.5rem; max-width: 46ch; color: var(--text-muted); line-height: 1.7; }
.agent-demo { margin: 0; }
.agent-demo .frame { box-shadow: 0 30px 70px rgba(10, 16, 32, 0.35); }
.sheet .tour__caption { color: var(--paper-muted); }
.sheet .tour__caption strong { color: var(--paper-ink); }
.sheet .tour__toggle { color: var(--paper-ink); border-color: var(--paper-line); }

/* ---------- Spec: dense rows beside a held heading ---------- */

.spec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem clamp(2rem, 1rem + 4vw, 6rem); }
@media (min-width: 1100px) {
  .spec { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  /* Held beside a long list; a short one needs no holding. */
  .spec--hold .spec__head { position: sticky; top: calc(var(--header-h) + 2.5rem); align-self: start; }
}
.spec__head.intro { margin-bottom: 0; }
.spec__list { counter-reset: spec; border-bottom: 1px solid var(--border); }
.spec__item {
  display: grid;
  gap: 0.35rem 1.5rem;
  padding-block: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  border-top: 1px solid var(--border);
  counter-increment: spec;
}
.spec__item::before {
  content: counter(spec, upper-alpha);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  line-height: 2.4;
  color: var(--accent-ink);
}
@media (min-width: 700px) {
  .spec__item { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .spec__item > * { grid-column: 2; }
  .spec__item::before { grid-row: 1; grid-column: 1; }
}
.spec__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text-strong);
}
.spec__body { max-width: 56ch; color: var(--text-muted); line-height: 1.65; }

/* ---------- Closing: the thread ends at the call to action ---------- */

.closing .h2 { font-size: var(--step-4); max-width: 15ch; }
.closing .lead { max-width: 48ch; }

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  margin-top: clamp(3.5rem, 2rem + 5vw, 7rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.trust-item { display: flex; flex-direction: column; gap: 0.35rem; }
.trust-item__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.trust-item__value {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

/* ---------- Product ---------- */

.integrations { border-bottom: 1px solid var(--border); }
.integration {
  display: grid;
  gap: 0.35rem 3rem;
  padding-block: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border-top: 1px solid var(--border);
}
@media (min-width: 900px) {
  .integration { grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.4fr); align-items: baseline; }
  .integration > .platforms { grid-column: 2; }
}
.integration__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--text-strong);
}
.integration__how { max-width: 52ch; color: var(--text-muted); line-height: 1.6; }

.platforms {
  display: grid;
  gap: 1.25rem 2.5rem;
  margin-top: 0.75rem;
}
@media (min-width: 640px) {
  .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.platforms__list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 0.5rem; }
.platforms__list li {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.platforms__group:last-child .platforms__list li { color: var(--text-muted); font-weight: 400; }

/* The label is what separates live from planned, so it has to be read, not
   inferred from colour: text first, the dot only reinforces it. */
.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status-tag::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
}
.status-tag--live { color: var(--accent); }
.status-tag--live::before { background: var(--accent); }
.status-tag--next { color: var(--text-muted); }
.status-tag--next::before { border: 1.5px solid var(--text-muted); }

/* Compliance, on the sheet */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem clamp(2rem, 1rem + 4vw, 6rem); }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.aside {
  padding-top: 1.25rem;
  border-top: 2px solid var(--accent-ink);
}
.aside .h3 { font-size: var(--step-1); }
.aside p { margin-top: 0.75rem; color: var(--text-muted); line-height: 1.65; }

/* ---------- About ---------- */

.essay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem clamp(2rem, 1rem + 5vw, 7rem); }
@media (min-width: 1000px) {
  .essay { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
}
.pull {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--text-strong);
}
.pull strong { font-weight: 800; }
.essay__body > * + * { margin-top: 1.25rem; }
.essay__body p { color: var(--text-muted); line-height: 1.75; max-width: var(--measure); }
.essay__body h3 { margin-top: 2.25rem; }

.beliefs { counter-reset: belief; border-bottom: 1px solid var(--border); }
.belief {
  display: grid;
  gap: 0.5rem 2rem;
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
  border-top: 1px solid var(--border);
  counter-increment: belief;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--text-strong);
}
.belief::before {
  content: counter(belief, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--accent);
}
.belief strong { font-weight: 800; }
@media (min-width: 900px) {
  .belief { grid-template-columns: 4rem minmax(0, 1fr); align-items: baseline; }
}

/* ---------- Contact ---------- */

.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem clamp(2rem, 1rem + 4vw, 6rem); }
@media (min-width: 1000px) {
  .contact-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}
.contact-layout .numbered { margin-top: 1rem; }

/* ---------- Prose (privacy) ---------- */

.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1rem; line-height: 1.75; color: var(--text-muted); }
.prose h2 {
  margin: 3rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text-strong);
}
.prose h2:first-child { margin-top: 0; }
.prose ul { margin-bottom: 1rem; padding-left: 1.25rem; list-style: disc; color: var(--text-muted); }
.prose li { margin-bottom: 0.375rem; line-height: 1.6; }
.prose strong { color: var(--text-body); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose .fine { margin-top: 2rem; }

/* Tour, dressed for the site: tabs are quiet text with the thread's green as
   the selection and the autoplay timer. */
.tour__tabs { gap: 0.25rem; margin-bottom: 0.875rem; }
.tour__tab {
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  border-color: transparent;
  font-size: 0.8125rem;
}
.tour__tab:hover { border-color: transparent; background: rgba(160, 182, 222, 0.08); }
.tour__tab[aria-selected="true"] { border-color: transparent; background: rgba(62, 207, 142, 0.1); color: var(--text-strong); }
.tour__toggle:hover { border-color: rgba(160, 182, 222, 0.35); }

/* ---------- Age gate ----------
   The gate is a sheet of paper on the navy, like every page's light sheet. */

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(6, 11, 23, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.age-gate[hidden] { display: none; }
/* Set by the inline script in each page's <head>, before first paint. */
html.gate-open .age-gate { display: flex; }
.age-gate__card {
  width: 100%;
  max-width: 30rem;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
}
.age-gate__card .wordmark { display: block; margin-bottom: 1.5rem; color: var(--paper-ink); }
.age-gate__card .wordmark span { color: var(--paper-accent); }
.age-gate__card .h3 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.age-gate__card .btn-row { margin-top: 1.75rem; }

/* ---------- Not found (404.html) ---------- */

.not-found {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: 4rem;
}
.not-found__brand { margin-bottom: clamp(2.5rem, 2rem + 3vw, 5rem); }
.not-found .display { max-width: 12ch; }

/* ---------- Footer ----------
   No slab: the ground runs to the bottom of the document. The footer sits
   back with a shade that fades in over its first few hundred pixels and a
   hairline lit toward the centre, like the header's — no hard edge. Its
   width is filled with content: the brand and a line about the product,
   then three headed columns, then the legal line. */

.site-footer {
  position: relative;
  z-index: 1;
  isolation: isolate;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(6, 11, 23, 0) 0, rgba(6, 11, 23, 0.55) 18rem, rgba(6, 11, 23, 0.72) 100%);
  pointer-events: none;
}
/* The same dissolving hairline as the header's divider. */
.site-footer::after,
.site-footer__legal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(160, 182, 222, 0) 0%,
    rgba(160, 182, 222, 0.16) 25%,
    rgba(120, 220, 170, 0.28) 50%,
    rgba(160, 182, 222, 0.16) 75%,
    rgba(160, 182, 222, 0) 100%);
  pointer-events: none;
}
.site-footer__inner { padding-block: clamp(3.5rem, 2rem + 4vw, 7rem) 2rem; }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.75rem 2rem;
}
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__brand .brand { margin-bottom: 1.25rem; }
.site-footer__line {
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-muted);
}
.site-footer__line strong { font-weight: 800; color: var(--text-strong); }
.site-footer__col h2 {
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.site-footer__col ul { display: grid; gap: 0.6rem; font-size: var(--step--1); }
.site-footer__col a { color: var(--text-muted); transition: color var(--dur-touch) var(--ease); }
.site-footer__col a:hover { color: var(--text-strong); }
.site-footer__note { font-size: 0.8125rem; line-height: 1.55; color: var(--text-dim); max-width: 26ch; }
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: auto; }
}
.site-footer__legal {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

/* ---------- The thread ----------
   One SVG behind every section's content (main.js initThread). The base line
   is always there; the lit line follows the reader down the page, and each
   section's node lights as it is reached. Never interactive, never part of
   the page's size. */

.thread {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.thread path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.thread__base { stroke: rgba(160, 182, 222, 0.2); stroke-width: 1.5; }
.thread__lit { stroke: var(--accent); stroke-width: 2; }
.thread__src { stroke: var(--accent); stroke-width: 1.5; opacity: 0.9; }
.thread__node {
  fill: var(--bg);
  stroke: rgba(160, 182, 222, 0.5);
  stroke-width: 1.5;
  transition: fill var(--dur-settle) var(--ease), stroke var(--dur-settle) var(--ease);
}
.thread__node.is-on { fill: var(--accent); stroke: var(--accent); }
.thread__node--start,
.thread__node--end { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.thread__node--end.is-on { fill: var(--accent); }
.thread__head { fill: #fff; }
/* Where the four lines become one: the only thing on the site that moves on
   its own, and slowly. */
.thread__pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: thread-pulse 2.8s var(--ease) infinite;
}
@keyframes thread-pulse {
  from { opacity: 0.8; transform: scale(1); }
  to { opacity: 0; transform: scale(3.2); }
}

/* ---------- Motion ---------- */

/* Entrances (main.js initReveal). The rise uses `translate`, not `transform`,
   so it can't collide with a hover transform. */
.reveal {
  opacity: 0;
  translate: 0 22px;
  transition:
    opacity 640ms var(--ease) var(--d, 0ms),
    translate 640ms var(--ease) var(--d, 0ms),
    color var(--dur-settle) var(--ease);
}
.reveal.is-in { opacity: 1; translate: none; }

/* Opening text: each page's kicker, title, lead and buttons rise without
   fading, so they paint — and count as painted — on the first frame. Pure
   CSS: nothing waits on the script. */
main > section:first-child .container :is(.kicker, .display, .lead, .btn-row) {
  animation: hero-rise 720ms var(--ease) both;
}
main > section:first-child .container .display { animation-delay: 32ms; }
main > section:first-child .container .lead { animation-delay: 64ms; }
main > section:first-child .container .btn-row { animation-delay: 96ms; }
@keyframes hero-rise { from { translate: 0 18px; } }

@media print {
  .reveal { opacity: 1 !important; translate: none !important; }
  .thread { display: none; }
  .sheet { box-shadow: none; }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Everything still arrives; nothing travels to get there. */
  .reveal { translate: none; }
  .thread__pulse { display: none; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* The form's confirmation mark. */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.icon-box svg { width: 1.25rem; height: 1.25rem; }
.not-found > .container { position: relative; z-index: 2; padding-left: calc(var(--gutter) + var(--rail)); }

/* ---------- The ground ----------
   The field behind every page: depth and slow movement under the type, never
   competing with it. Plain CSS in each page's markup, so it paints with the
   page and nothing waits on a script. Four layers, back to front:
     1. colour fields — deep blue, a green ember, an indigo — drifting on
        long, unequal periods (53s, 71s, 89s), so the pattern never visibly
        repeats; screen-blended on the navy;
     2. a data grid in perspective at the lower edge, running to a horizon
        and masked to nothing as it recedes, travelling toward the viewer;
     3. the pulse: a soft green band that sweeps the screen every 11s;
     4. grain, so the gradients don't band.
   Only transform and opacity animate. Fixed, behind everything at z-index 0
   (sections, the thread and the header all sit above), and never takes a
   click. With reduced motion it holds still and the sweep is gone. */

.ground {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.ground > * { position: absolute; pointer-events: none; }

/* 1. Colour fields */
.ground__fields { inset: 0; mix-blend-mode: screen; }
.ground__field {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.ground__field--blue {
  width: max(80vw, 36rem);
  aspect-ratio: 1;
  left: -22vw;
  top: -38vw;
  background: radial-gradient(closest-side, rgba(38, 86, 214, 0.5), rgba(38, 86, 214, 0.18) 55%, rgba(38, 86, 214, 0));
  animation: ground-drift-a 53s var(--ease) infinite alternate;
}
.ground__field--ember {
  width: max(52vw, 26rem);
  aspect-ratio: 1;
  right: -14vw;
  top: 22vh;
  background: radial-gradient(closest-side, rgba(62, 207, 142, 0.3), rgba(62, 207, 142, 0.1) 50%, rgba(62, 207, 142, 0));
  animation: ground-drift-b 71s var(--ease) infinite alternate;
}
.ground__field--indigo {
  width: max(70vw, 32rem);
  aspect-ratio: 1;
  left: 18vw;
  bottom: -42vw;
  background: radial-gradient(closest-side, rgba(92, 70, 214, 0.42), rgba(92, 70, 214, 0.14) 55%, rgba(92, 70, 214, 0));
  animation: ground-drift-c 89s var(--ease) infinite alternate;
}
@keyframes ground-drift-a {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  30% { transform: translate3d(22vw, 14vh, 0) scale(1.18); }
  65% { transform: translate3d(8vw, 32vh, 0) scale(0.92); }
  100% { transform: translate3d(34vw, 6vh, 0) scale(1.08); }
}
@keyframes ground-drift-b {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  40% { transform: translate3d(-30vw, -16vh, 0) scale(1.25); }
  75% { transform: translate3d(-12vw, 24vh, 0) scale(0.85); }
  100% { transform: translate3d(-42vw, 8vh, 0) scale(1.1); }
}
@keyframes ground-drift-c {
  0% { transform: translate3d(0, 0, 0) scale(1.05); }
  35% { transform: translate3d(-26vw, -22vh, 0) scale(0.9); }
  70% { transform: translate3d(14vw, -34vh, 0) scale(1.2); }
  100% { transform: translate3d(-6vw, -12vh, 0) scale(1); }
}

/* 2. The data grid: a plane laid back in perspective, its far edge at the
   horizon. It travels one cell toward the viewer per loop, so the loop has
   no seam. */
.ground__horizon {
  left: -30%;
  right: -30%;
  bottom: 0;
  height: 40vh;
  perspective: 260px;
  perspective-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.7) 35%, transparent 88%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.7) 35%, transparent 88%);
}
/* Full strength under the hero; once the reader is into the page it steps
   back so its near lines never cross body text at full strength. */
.ground__horizon { transition: opacity 900ms var(--ease); }
html.is-reading .ground__horizon { opacity: 0.35; }
/* Hinged at its near edge and laid back to the horizon; it slides one cell
   toward the viewer per loop, so the loop has no seam. The near edge sits
   below the screen so the slide never shows a gap. */
.ground__plane {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -80px;
  height: 300%;
  transform-origin: 50% 100%;
  transform: rotateX(80deg);
  background-image:
    linear-gradient(rgba(120, 180, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 180, 255, 0.38) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: ground-run 4.5s linear infinite;
  will-change: transform;
}
@keyframes ground-run {
  from { transform: rotateX(80deg) translate3d(0, -72px, 0); }
  to { transform: rotateX(80deg) translate3d(0, 0, 0); }
}

/* 3. The pulse */
.ground__sweep {
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 42vw;
  background: linear-gradient(90deg,
    rgba(62, 207, 142, 0) 0%,
    rgba(62, 207, 142, 0.06) 30%,
    rgba(62, 207, 142, 0.16) 47%,
    rgba(150, 255, 200, 0.34) 50%,
    rgba(62, 207, 142, 0.16) 53%,
    rgba(62, 207, 142, 0.06) 70%,
    rgba(62, 207, 142, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-50vw, 0, 0) skewX(-14deg);
  animation: ground-sweep 11s cubic-bezier(0.45, 0.05, 0.35, 1) 1.2s infinite;
  will-change: transform, opacity;
}
@keyframes ground-sweep {
  0% { transform: translate3d(-50vw, 0, 0) skewX(-14deg); opacity: 0; }
  6% { opacity: 1; }
  48% { opacity: 1; }
  54% { transform: translate3d(118vw, 0, 0) skewX(-14deg); opacity: 0; }
  100% { transform: translate3d(118vw, 0, 0) skewX(-14deg); opacity: 0; }
}

/* 4. Grain: fractal noise, white at low alpha, jittered a few pixels on a
   stepped loop so it reads as film rather than a pattern. */
.ground__grain {
  inset: -60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.9 0 0 0 -0.2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.09;
  animation: ground-grain 1.2s steps(6) infinite;
}
@keyframes ground-grain {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-23px, 17px, 0); }
  40% { transform: translate3d(31px, -9px, 0); }
  60% { transform: translate3d(-11px, -29px, 0); }
  80% { transform: translate3d(19px, 27px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Paused mid-scroll (main.js sets .is-scrolling), resumed ~180ms after. */
html.is-scrolling .ground__field,
html.is-scrolling .ground__plane,
html.is-scrolling .ground__sweep,
html.is-scrolling .ground__grain { animation-play-state: paused; }

/* Everything that paints over the ground sits above it. */
.site-header { z-index: 50; }
main { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .ground *,
  .ground *::before { animation: none !important; }
  .ground__sweep { display: none; }
}
@media print {
  .ground { display: none; }
}