/* Winch Labs — winchlabs.io
   Brand: Deltz sea-green, one theme family across marketing site and app. Minimal,
   dense, animated by reveals. Voice is mono-forward for
   product surfaces (code, findings, chips, evidence) paired with a plain
   sans for prose — system stacks only, zero-dependency.

   ---------------------------------------------------------------------
   THEME MECHANICS (dark is canonical today; light is new — read before
   touching any color below):

   - Dark values live on the bare `:root` — that's the "dark-first" choice:
     visitors with no OS preference and no stored choice get the canonical
     dark look, same as before this redesign.
   - `@media (prefers-color-scheme: light)` swaps in the light palette, but
     only when `:root` does NOT carry `data-theme="light"` — sorry,
     `data-theme="dark"` — see the guard below. (Read: the media query is
     skipped whenever an explicit theme is set, so it only ever supplies
     the *system* light preference.)
   - `:root[data-theme="light"]` and `:root[data-theme="dark"]` restate
     their full palettes so an explicit toggle click always wins, in
     *either* direction, regardless of what the OS prefers.
   - The toggle itself lives in script.js (search "theme toggle"): reads
     localStorage, defaults to system, persists on click, wrapped in
     try/catch. `body`'s background always resolves from `--bg` — never a
     bare color — so an unthemed shell never shows through.
   - Every token below must resolve in BOTH palettes. When adding a new
     token, add it to all three blocks (bare :root, the light media
     override, and `[data-theme="light"]`) plus `[data-theme="dark"]` if it
     isn't identical to the bare root.
   --------------------------------------------------------------------- */

:root {
  /* ---- dark palette (bare :root = the canonical default) ---- */
  --bg: #101816;
  --bg-sunk: #0b1210;
  --card: #17211e;
  --ink: #edece3;
  --muted-ink: #a0afa8;
  --border: #293a33;
  --brand: #6de0ba;        /* accent text, links, icons */
  --brand-solid: #006e58;    /* CTA / filled-button background */
  --success: oklch(0.74 0.15 152);
  --warning: oklch(0.8 0.15 75);
  --destructive: oklch(0.66 0.2 27);
  /* .accent text shimmer highlight (see the .accent gradient near the end of
     this file) — near-white on the dark canvas; redefined for light below so
     the sweep never washes accent text out to invisible-on-white */
  --accent-shimmer: #c2f3de;

  /* Garboard logo-mark amber. Reserved for EXACTLY one thing: the Garboard
     mark itself (the bot avatar chip that carries the mark image). Never a
     button, link, accent, heading, or "warning" color — that's --warning,
     a different token, above. If you reach for --garboard anywhere else,
     you've reached for the wrong token. */
  --garboard: var(--brand);

  /* constant white for text set on a --brand-solid fill: both themes' fill
     is a mid-lightness saturated blue, so one constant clears AA in both
     rather than a token that would just resolve to the same value twice */
  --on-brand: #fff;

  /* derived — computed from the tokens above, so they never need
     restating inside the theme blocks below */
  --border-strong: color-mix(in oklab, var(--border) 45%, var(--ink) 30%);
  --brand-glow: color-mix(in oklab, var(--brand-solid) 35%, transparent);
  /* Atmosphere (WIN light-immersion pass): each theme designs its own air.
     Dark = glowing nebula on a void; light = morning sky on paper. Every
     layer reads these, so neither theme is a faded copy of the other. */
  --atmo-1: color-mix(in oklab, var(--brand-solid) 35%, transparent);
  --atmo-2: color-mix(in oklab, #229a77 20%, transparent);
  --atmo-opacity: 0.55;
  --page-wash: none;
  --grain-dot: color-mix(in oklab, var(--ink) 4%, transparent);
  --field-dot: 147,219,190;
  --field-link: 83,178,143;

  /* type */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  --text-2xs: 10.5px;
  --text-xs: 11.5px;
  --text-sm: 13px;
  --text-md: 14.5px;

  /* spacing + shape, for shared chrome and new components (chips, findings,
     badges, nav, footer) — legacy section-specific rules keep their own
     hand-tuned values and are not forced onto this scale retroactively */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --max: 1120px;
}

/* ---- light palette: system preference, only when no explicit choice ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* Light air: saturated sky layers on paper, ink constellation, tinted
       grain, and elevation as soft blue shadow instead of glow. */
    --atmo-1: color-mix(in oklab, var(--brand-solid) 26%, transparent);
    --atmo-2: color-mix(in oklab, #78bba1 32%, transparent);
    --atmo-opacity: 0.85;
    --page-wash: radial-gradient(ellipse 95% 60% at 50% -12%, color-mix(in oklab, #006e58 8%, transparent), transparent 62%);
    --grain-dot: color-mix(in oklab, #006e58 10%, transparent);
    --field-dot: 0,110,88;
    --field-link: 43,133,102;
    --brand-glow: color-mix(in oklab, #006e58 22%, transparent);
    --bg: #f7f6f0;
    --bg-sunk: #edece3;
    --card: #fff;
    --ink: #16251f;
    --muted-ink: #59675f;
    --border: #d7dfd6;
    --brand: #006e58;
    --brand-solid: #006e58;
    --success: oklch(0.47 0.12 152);
    --warning: oklch(0.53 0.13 70);
    --destructive: oklch(0.52 0.2 27);
    /* Keep the shimmer dark enough to remain legible on warm ivory. */
    --accent-shimmer: color-mix(in oklab, var(--brand) 85%, white 15%);
  }
}

/* ---- explicit toggle always wins, either direction ---- */
:root[data-theme="light"] {
    /* Light air: saturated sky layers on paper, ink constellation, tinted
       grain, and elevation as soft blue shadow instead of glow. */
    --atmo-1: color-mix(in oklab, var(--brand-solid) 26%, transparent);
    --atmo-2: color-mix(in oklab, #78bba1 32%, transparent);
    --atmo-opacity: 0.85;
    --page-wash: radial-gradient(ellipse 95% 60% at 50% -12%, color-mix(in oklab, #006e58 8%, transparent), transparent 62%);
    --grain-dot: color-mix(in oklab, #006e58 10%, transparent);
    --field-dot: 0,110,88;
    --field-link: 43,133,102;
    --brand-glow: color-mix(in oklab, #006e58 22%, transparent);
  --bg: #f7f6f0;
  --bg-sunk: #edece3;
  --card: #fff;
  --ink: #16251f;
  --muted-ink: #59675f;
  --border: #d7dfd6;
  --brand: #006e58;
  --brand-solid: #006e58;
  --success: oklch(0.47 0.12 152);
  --warning: oklch(0.53 0.13 70);
  --destructive: oklch(0.52 0.2 27);
  /* The explicit light theme, same measured value as the media query above. */
  --accent-shimmer: color-mix(in oklab, var(--brand) 85%, white 15%);
}
:root[data-theme="dark"] {
  --atmo-1: color-mix(in oklab, var(--brand-solid) 35%, transparent);
  --atmo-2: color-mix(in oklab, #229a77 20%, transparent);
  --atmo-opacity: 0.55;
  --page-wash: none;
  --grain-dot: color-mix(in oklab, var(--ink) 4%, transparent);
  --field-dot: 147,219,190;
  --field-link: 83,178,143;
  --bg: #101816;
  --bg-sunk: #0b1210;
  --card: #17211e;
  --ink: #edece3;
  --muted-ink: #a0afa8;
  --border: #293a33;
  --brand: #6de0ba;
  --brand-solid: #006e58;
  --success: oklch(0.74 0.15 152);
  --warning: oklch(0.8 0.15 75);
  --destructive: oklch(0.66 0.2 27);
  --accent-shimmer: #c2f3de;
}

/* ---- sRGB fallbacks for browsers without oklch()/color-mix() — Chromium
   <111, i.e. older Android WebViews and Samsung Internet. Without these,
   every token above fails at var() substitution and the page renders in UA
   default colors. Values are exact colorimetric conversions of the tokens
   above (scripted oklch→sRGB); when a token changes, reconvert — never
   eyeball. Rule-level color-mix() elsewhere degrades gracefully (dropped
   declaration), except .top's translucent background, patched below. ---- */
@supports not (color: oklch(0 0 0)) {
  :root {
    --bg: #101816;
    --bg-sunk: #0b1210;
    --card: #17211e;
    --ink: #f2f4ee;
    --muted-ink: #a0afa8;
    --border: #293a33;
    --brand: #6de0ba;
    --brand-solid: #006e58;
    --success: #54c57a;
    --warning: #f5ae39;
    --destructive: #f45249;
    --garboard: var(--brand);
    --border-strong: rgba(107,110,117,0.75);
    --brand-glow: rgba(0,110,88,0.35);
    --atmo-1: rgba(0,110,88,0.35);
    --atmo-2: rgba(34,154,119,0.2);
    --grain-dot: rgba(242,243,247,0.04);
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --bg: #f7f6f0;
      --bg-sunk: #edece3;
      --card: #fff;
      --ink: #16251f;
      --muted-ink: #59675f;
      --border: #d7dfd6;
      --brand: #006e58;
      --brand-solid: #006e58;
      --success: #0a6d37;
      --warning: #9a5b00;
      --destructive: #c2181d;
      --accent-shimmer: #3b8e74; /* 3.57:1 on --bg; the sRGB of the 70/30 mix above */
      --border-strong: rgba(132,136,142,0.75);
      --brand-glow: rgba(0,110,88,0.22);
      --atmo-1: rgba(0,110,88,0.26);
      --atmo-2: rgba(120,187,161,0.32);
      --grain-dot: rgba(0,110,88,0.1);
      --page-wash: radial-gradient(ellipse 95% 60% at 50% -12%, rgba(0,110,88,0.08), transparent 62%);
    }
  }
  :root[data-theme="light"] {
    --bg: #f7f6f0;
    --bg-sunk: #edece3;
    --card: #fff;
    --ink: #16251f;
    --muted-ink: #59675f;
    --border: #d7dfd6;
    --brand: #006e58;
    --brand-solid: #006e58;
    --success: #0a6d37;
    --warning: #9a5b00;
    --destructive: #c2181d;
    --accent-shimmer: #3b8e74; /* 3.57:1 on --bg; the sRGB of the 70/30 mix above */
    --border-strong: rgba(132,136,142,0.75);
    --brand-glow: rgba(0,110,88,0.22);
    --atmo-1: rgba(0,110,88,0.26);
    --atmo-2: rgba(120,187,161,0.32);
    --grain-dot: rgba(0,110,88,0.1);
    --page-wash: radial-gradient(ellipse 95% 60% at 50% -12%, rgba(0,110,88,0.08), transparent 62%);
  }
  :root[data-theme="dark"] {
    --bg: #101816;
    --bg-sunk: #0b1210;
    --card: #17211e;
    --ink: #f2f4ee;
    --muted-ink: #a0afa8;
    --border: #293a33;
    --brand: #6de0ba;
    --brand-solid: #006e58;
    --success: #54c57a;
    --warning: #f5ae39;
    --destructive: #f45249;
    --accent-shimmer: #c2f3de;
    --border-strong: rgba(107,110,117,0.75);
    --brand-glow: rgba(0,110,88,0.35);
    --atmo-1: rgba(0,110,88,0.35);
    --atmo-2: rgba(34,154,119,0.2);
    --grain-dot: rgba(242,243,247,0.04);
    --page-wash: none;
  }
  /* .top's color-mix background is a dropped declaration here — an opaque
     theme-correct header beats a fully transparent one. */
  .top { background: var(--bg); border-bottom: 1px solid var(--border); }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }
/* An in-page anchor must not land UNDER the fixed header.
   The hero's "Request access" jumps to #subscribe, and without this the form it
   jumps to is scrolled off the top: the reader arrives past the one thing the
   button promised them, sees a stray sentence and a "Book a demo", and concludes
   the link is broken.

   MEASURED, NOT GUESSED. The header is position:fixed and its height changes with
   the viewport — the nav wraps at narrow widths, so it is 131px on a 375px phone
   against roughly 64px on a desktop. A single magic number is therefore wrong at
   one end or the other, and the wrong end hides content. script.js publishes the
   measured height as --header-h on load and resize.

   THE FALLBACK OVERSHOOTS ON PURPOSE. With no JavaScript the variable is unset
   and 132px applies: too much room above the target on a desktop, which is
   harmless, rather than too little on a phone, which hides the form. The site
   must work with scripting off, and this is the direction to be wrong in. */
:target { scroll-margin-top: calc(var(--header-h, 132px) + 24px); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  background-image: var(--page-wash);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* faint drifting dot-field + a blue aurora behind the hero */
.grain {
  position: fixed; inset: -50%;
  pointer-events: none;
  background-image: radial-gradient(var(--grain-dot) 1px, transparent 1px);
  background-size: 26px 26px;
  animation: drift 90s linear infinite;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 32%, black 0%, transparent 72%);
  z-index: 0;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-26px, -26px, 0); }
}
.aurora {
  position: absolute; top: -280px; left: 50%;
  width: 1100px; height: 700px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 50% 50% at 50% 40%, var(--atmo-1), transparent 70%),
    radial-gradient(ellipse 42% 46% at 63% 26%, var(--atmo-2), transparent 72%);
  filter: blur(60px);
  opacity: var(--atmo-opacity);
  pointer-events: none;
  z-index: 0;
}

/* interactive constellation field (drawn by JS; empty canvas without it) */
.field {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 30%, black 0%, transparent 78%);
}

main, header, footer { position: relative; z-index: 1; }

/* thin scroll progress line (element injected by JS) */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-solid), var(--brand));
  box-shadow: 0 0 12px var(--brand-glow);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 30;
  pointer-events: none;
}

a { color: inherit; text-decoration: none; }

/* ---------------- top bar ---------------- */
.top {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px clamp(20px, 5vw, 56px);
  z-index: 10;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.brand-lockup { display: inline-flex; align-items: center; }
/* the real brand lockup image — actual mark + typography */
.brand-lockup img.lockup { height: 30px; width: auto; }
footer .brand-lockup img.lockup { height: 26px; }
/* both the lockup and the small inline Garboard mark are monochrome-white
   PNGs designed for a dark canvas — invisible on a light one. Shipping the
   light palette makes that reachable on every page immediately (it's a
   media-query default, not gated behind the toggle button existing on the
   page), so invert them in light theme as a stopgap until real light-theme
   art exists. img[src*=] matches the icon wherever it's referenced, with
   no class needed on pages this phase didn't touch. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand-lockup img.lockup,
  :root:not([data-theme="dark"]) img[src*="garboard-mark"] { filter: invert(1); }
}
:root[data-theme="light"] .brand-lockup img.lockup,
:root[data-theme="light"] img[src*="garboard-mark"] { filter: invert(1); }

/* faint W watermark behind the hero */
.hero-mark {
  position: absolute;
  top: 6%; left: 50%;
  width: min(760px, 80vw);
  transform: translateX(-50%);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.hero > *:not(.aurora):not(.hero-mark) { position: relative; z-index: 1; }

/* small mark above the closing headline */
.closing-mark { width: 64px; height: auto; margin-bottom: 26px; }
.top nav { display: flex; align-items: center; gap: 24px; }
.top nav a {
  font: 500 13px/1 var(--sans);
  color: var(--muted-ink);
  transition: color 0.15s ease-in-out;
}
.top nav a:hover { color: var(--ink); }
.top nav a.nav-cta {
  color: var(--on-brand);
  background: var(--brand-solid);
  padding: 9px 16px;
  border-radius: 8px;
  font-weight: 600;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: filter 0.15s ease-in-out, transform 0.2s ease-out;
}
.top nav a.nav-cta:hover { filter: brightness(1.2); }
/* current page in the nav — set aria-current="page" on the matching link */
.top nav a[aria-current="page"] { color: var(--ink); }

/* theme toggle: sun/moon button, hidden without JS since it does nothing
   inert (progressive enhancement, same gate as .reveal via html.js) */
.theme-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--muted-ink);
  cursor: pointer;
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { color: var(--ink); border-color: var(--brand); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="dark"]) .theme-toggle .i-moon { display: none; }
}
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }

/* ---------------- hero ---------------- */
.hero {
  min-height: 92svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: 140px clamp(20px, 5vw, 56px) 40px;
  position: relative;
  /* --exit (0→1, set by JS as the hero scrolls away) sinks and dims the
     whole section, so the page underneath feels like it slides over it */
  opacity: calc(1 - var(--exit, 0) * 0.9);
  transform: translateY(calc(var(--exit, 0) * 46px));
}
.eyebrow {
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brand);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 22px;
}
.eyebrow img, .eyebrow svg { border-radius: 4px; }
h1 {
  font-size: clamp(2.7rem, 6.5vw, 5rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  max-width: 17ch;
}
.accent { color: var(--brand); }
.lede {
  margin-top: 24px;
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--muted-ink);
}
.cta-row { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero .cta-row { justify-content: center; }
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 14.5px/1 var(--sans);
  padding: 14px 24px;
  border-radius: 9px;
  background: var(--brand-solid);
  color: var(--on-brand);
  box-shadow: 0 8px 30px -10px var(--brand-glow);
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: transform 0.2s ease-out, filter 0.15s ease-in-out;
}
.cta:hover { filter: brightness(1.18); }
.cta .arr { transition: transform 0.15s ease-in-out; }
.cta:hover .arr { transform: translateX(3px); }
.cta.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.cta.ghost:hover { background: var(--card); border-color: var(--ink); filter: none; }

/* works-with strip */
.stacks {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: 46px;
}
.stacks .lbl { font: 500 11px/1 var(--mono); letter-spacing: 0.18em; color: var(--muted-ink); }
.stack-chip {
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink);
  border: 1px solid var(--border-strong);
  background: var(--card);
  padding: 8px 14px;
  border-radius: 999px;
}
.stack-chip.soon { color: var(--muted-ink); border-style: dashed; }

/* ---------------- closing ---------------- */
.closing {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(80px, 14vh, 150px) clamp(20px, 5vw, 56px);
  text-align: center;
}
.closing h2 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.closing .cta-row { justify-content: center; }

/* ---------------- pricing ---------------- */
.pricing-head {
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
  padding: 150px clamp(20px, 5vw, 56px) 30px;
}
.pricing-head h1 { margin: 0 auto; }
.pricing-head .lede { margin-left: auto; margin-right: auto; }
.pricing-head .cta-row { justify-content: center; }
.plans {
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px clamp(20px, 5vw, 56px) 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1140px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.plan {
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--card);
  padding: 28px 26px;
  display: flex; flex-direction: column;
}
.plan.featured {
  border-color: color-mix(in oklab, var(--brand-solid) 60%, var(--border-strong));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--brand-solid) 35%, transparent),
              0 30px 90px -50px var(--brand-glow);
  position: relative;
}
.plan .tier {
  font: 600 11.5px/1 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand);
}
.plan .price {
  margin-top: 16px;
  font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em;
}
.plan .price small { font-size: 0.95rem; font-weight: 500; color: var(--muted-ink); letter-spacing: 0; }
.plan .for { margin-top: 4px; font-size: 13.5px; color: var(--muted-ink); min-height: 3.1em; }
.plan ul { list-style: none; margin: 20px 0 26px; display: grid; gap: 10px; flex: 1; }
.plan li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--muted-ink); }
.plan li .tick { color: var(--success); font-family: var(--mono); }
.plan li strong { color: var(--ink); font-weight: 600; }
.plan .cta { justify-content: center; }
.badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  background: var(--brand-solid);
  color: var(--on-brand);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.pricing-note {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px) 30px;
  text-align: center;
  font: 400 12.5px/1.6 var(--mono);
  color: var(--muted-ink);
}
.faq {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 90px) clamp(20px, 5vw, 56px);
  border-top: 1px solid var(--border);
}
.faq h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 26px; }
.faq details {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq summary::after { content: "+"; color: var(--brand); font-family: var(--mono); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; font-size: 14px; color: var(--muted-ink); }

/* ---------------- footer ---------------- */
footer {
  border-top: 1px solid var(--border);
  margin-top: 20px;
}
.foot-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 44px clamp(20px, 5vw, 56px) 20px;
  display: grid;
  /* minmax(0,) throughout: a bare fr track's auto minimum lets one long
     unbreakable string widen the page past a phone's viewport. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
}
.foot-brand p { margin-top: 12px; font-size: 13px; color: var(--muted-ink); max-width: 34ch; }
.foot-col h4 {
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-ink);
  margin-bottom: 14px;
}
.foot-col a {
  display: block;
  font-size: 13.5px;
  color: var(--muted-ink);
  padding: 4px 0;
  transition: color 0.15s ease-in-out;
}
.foot-col a:hover { color: var(--ink); }
.foot-base {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px clamp(20px, 5vw, 56px) 34px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font: 400 12px/1.5 var(--mono);
  color: var(--muted-ink);
}

/* ---------------- components: cards, section rhythm ----------------
   Shared vocabulary for pages built or rebuilt after this redesign. Existing
   bespoke blocks below (.plan, .pr-mock) keep their own hand-tuned rules for
   now rather than being force-migrated; converge them to `.card` / `.section`
   only when a page is next rewritten. */
.card {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(60px, 10vh, 110px) clamp(20px, 5vw, 56px);
  border-top: 1px solid var(--border);
}

/* ---------------- components: chips ----------------
   Category tags for a finding: convention · secops · cost. Neutral pill,
   colored only by a left accent + text color so a page of them still reads
   calm; severity lives in .tag, not here. */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: 600 var(--text-xs)/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45em 0.75em;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--chip-color, var(--muted-ink));
}
.chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.chip-convention { --chip-color: var(--brand); }
.chip-secops { --chip-color: var(--destructive); }
.chip-cost { --chip-color: var(--warning); }

/* ---------------- components: findings ----------------
   The unit of the product's PR comment: a severity tag, an evidence
   file:line link, and the claim. Pairs with .chip above for category. */
.finding {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.finding .tag {
  flex: 0 0 auto;
  font: 700 var(--text-2xs)/1.4 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25em 0.55em;
  border-radius: var(--radius-sm);
  margin-top: 0.1em;
}
.tag-critical { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 14%, transparent); }
.tag-warn { color: var(--warning); background: color-mix(in oklab, var(--warning) 16%, transparent); }
.finding-body { flex: 1; min-width: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.finding-body b { font: 600 var(--text-sm)/1.5 var(--mono); }
.finding-body p { margin-top: 2px; color: var(--muted-ink); }
/* file:line evidence — always a link (or looks like one) to the exact source */
.evidence {
  font: 500 var(--text-xs)/1.6 var(--mono);
  color: var(--brand);
  border-bottom: 1px dotted color-mix(in oklab, var(--brand) 50%, transparent);
}
.evidence:hover { color: var(--ink); }

/* ---------------- components: badges ----------------
   The enforced/documented split: a rule that gates the merge vs. one that's
   only recorded. Never interchange these two — the distinction is real. */
.badge-enforced, .badge-documented {
  display: inline-flex; align-items: center;
  font: 700 var(--text-2xs)/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4em 0.65em;
  border-radius: var(--radius-full);
}
.badge-enforced { background: var(--brand-solid); color: var(--on-brand); }
.badge-documented { background: transparent; border: 1px dashed var(--border-strong); color: var(--muted-ink); }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}

/* ---------------- reveal-on-scroll ----------------
   Hidden-for-animation ONLY when JS is live (html.js set inline in <head>).
   No JS — crawlers, previews — means no hiding. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) var(--d, 0s),
              transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) var(--d, 0s);
}
.js .reveal.in { opacity: 1; transform: none; }

/* ---------------- responsive ---------------- */
@media (max-width: 880px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan .for { min-height: 0; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .top nav { gap: 14px; }
  .top nav a { font-size: 12px; }
}
@media (max-width: 700px) {
  /* Never hide the nav links on a phone — a site whose only mobile navigation
     is the footer is un-navigable. The fixed header wraps to a second row
     instead; hero/doc top padding (110px+) still clears it. */
  .top { flex-wrap: wrap; row-gap: 2px; }
  .top nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
  .brand-lockup .name { font-size: 15px; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* li text flows as one run beside the tick */
.plan li .txt { flex: 1; min-width: 0; }

/* billing period toggle */
.bill-toggle {
  display: inline-flex;
  margin-top: 28px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px;
  background: var(--card);
  gap: 4px;
}
.bill-opt {
  font: 600 13px/1 var(--sans);
  color: var(--muted-ink);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: color 0.15s ease-in-out, background 0.15s ease-in-out;
}
.bill-opt:hover { color: var(--ink); }
.bill-opt.on { background: var(--brand-solid); color: var(--on-brand); }
.bill-opt .save {
  font-size: 10.5px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin-left: 4px;
}
.amount { transition: opacity 0.15s ease-in-out; }
.amount.swap { opacity: 0; }

/* ---------------- pricing: at-a-glance tier strip ----------------
   Infracost-style compact restatement of what the full .plan cards below
   already spell out — same repo/review numbers, faster to scan before
   committing to four bullet lists. Shares .amount's monthly/annual swap
   (generic [data-monthly][data-annual] wiring in script.js), so it stays in
   sync with the billing toggle for free. */
.tier-glance {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.tier-glance .tg { text-align: center; padding: var(--space-4); }
.tier-glance .tg .name {
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
}
.tier-glance .tg .amt {
  margin-top: 8px;
  font: 700 1.4rem/1 var(--sans);
  letter-spacing: -0.02em;
}
.tier-glance .tg .amt small { font-size: 0.6em; font-weight: 500; color: var(--muted-ink); }
.tier-glance .tg .fits { margin-top: 6px; font-size: 12.5px; color: var(--muted-ink); }
@media (max-width: 1140px) {
  .tier-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  /* Two 134px cards can't hold price + limits copy — stack them. */
  .tier-glance { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- ambient motion & pointer interactivity ---------------- */
/* the aurora breathes — and leans toward the cursor inside the hero (--ax/--ay) */
@keyframes aurora-breathe {
  /* Breathes RELATIVE to the theme's own air (--atmo-opacity): hardcoded
     opacity here silently overrode the light theme's stronger aurora. */
  0%, 100% { transform: translateX(calc(-50% + var(--ax, 0px))) translateY(var(--ay, 0px)) scale(1); opacity: var(--atmo-opacity); }
  50%      { transform: translateX(calc(-50% + var(--ax, 0px))) translateY(var(--ay, 0px)) scale(1.07); opacity: calc(var(--atmo-opacity) + 0.12); }
}
.aurora { animation: aurora-breathe 12s ease-in-out infinite; }

/* the hero watermark drifts gently against the cursor, and swells toward
   the viewer while the hero exits — cheap depth-of-field */
.hero-mark {
  transform: translateX(calc(-50% - var(--ax, 0px) * 0.6))
             translateY(calc(var(--ay, 0px) * -0.6 + var(--exit, 0) * -60px))
             scale(calc(1 + var(--exit, 0) * 0.22));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* closing section echoes the hero's aurora */
.closing { position: relative; overflow: hidden; }
.closing > *:not(.aurora) { position: relative; z-index: 1; }
.closing .aurora { position: absolute; z-index: 0; top: auto; bottom: -420px; opacity: 0.4; }

/* pointer spotlight on plan cards */
.plan { position: relative; }
.plan::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in oklab, var(--brand) 9%, transparent), transparent 70%);
}
.plan:hover::after { opacity: 1; }

/* CTA sheen sweep */
.cta { position: relative; overflow: hidden; }
.cta::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -75%; width: 45%;
  background: linear-gradient(105deg, transparent, rgb(255 255 255 / 0.22), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.cta:hover::before { animation: sheen 0.7s ease; }
@keyframes sheen { to { left: 130%; } }

/* stack chips come alive */
.stack-chip { transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.stack-chip:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  color: var(--ink);
  box-shadow: 0 6px 24px -12px var(--brand-glow);
}

@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none; }
  .cta:hover::before { animation: none; }
  .hero-mark { transition: none; }
  /* The hero shimmer was the one animation with no opt-out: a 7s infinite colour
     sweep across the largest text on the page, which is close to the archetype
     of what this query exists to stop. `animation: none` alone would freeze the
     gradient mid-sweep at whatever position it held, so the paint is reset to
     the gradient's start — the headline keeps its colour and stops moving. */
  .accent, .accent .w { animation: none; background-position: 0% 0; }
}

/* small email fallback under booking CTAs */
.alt-contact { margin-top: 16px; font: 400 12.5px/1 var(--mono); color: var(--muted-ink); }
.alt-contact a { color: var(--brand); border-bottom: 1px dotted color-mix(in oklab, var(--brand) 50%, transparent); }
.alt-contact a:hover { color: var(--ink); }

/* the PR comment mock — the artifact engineers actually see */
.pr-mock { max-width: 780px; margin: 0 auto; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--card); overflow: hidden; }
.pr-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
/* the one sanctioned non-logo use of --garboard: the bot avatar chip that
   carries the mark image itself, tinted to match it */
.pr-avatar { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in oklab, var(--garboard) 18%, var(--bg)); align-items: center; justify-content: center; }
.pr-head b { font-weight: 600; }
.pr-head .bot { font: 500 10px/1 var(--mono); color: var(--muted-ink); border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px 7px; }
.pr-when { color: var(--muted-ink); font-size: 12.5px; }
.pr-body { padding: 16px; }
.pr-sum { font-size: 13.5px; margin-bottom: 14px; }
.pr-sum .blocked { color: var(--destructive); font-weight: 650; }
.pr-btn { flex: 0 0 auto; font: 600 11.5px/1 var(--sans); color: var(--on-brand); background: var(--brand-solid); border-radius: 7px; padding: 8px 12px; white-space: nowrap; }

/* ---------------- subscribe form ---------------- */
/* NO SCRIPT, NO FORM — and a sentence instead.
   script.js is the ONLY submit path: the form carries no action and no method,
   so without scripting a submit performs a GET to the current page, puts the
   address in the query string, records nothing and says nothing. The site's one
   conversion path silently failing is worse than not offering it, so with
   scripting off the form is replaced by the mailbox that does work. Giving the
   form an action would mean a second ingest path in the Worker and a redirect
   page to write — a larger change than this refresh, and one that needs the
   Worker's own review. */
html:not(.js) .sub-form { display: none; }
.sub-noscript { display: none; }
html:not(.js) .sub-noscript { display: block; }

.sub-form { display: flex; gap: 10px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.sub-form input[type="email"] {
  font: 400 14px/1 var(--sans); color: var(--ink);
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 13px 16px; width: min(300px, 80vw); outline: none;
  transition: border-color 0.2s ease;
}
.sub-form input[type="email"]:focus { border-color: var(--brand); }
.sub-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sub-note { margin-top: 12px; font: 400 12px/1.5 var(--mono); color: var(--muted-ink); }
.sub-note.ok { color: var(--success); }

/* ---------------- doc pages (security / legal) ---------------- */
.doc { max-width: 720px; margin: 0 auto; padding: 150px clamp(20px, 5vw, 56px) 90px; }
.doc h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 34px; }
.doc h1 .accent { color: var(--brand); }
.doc h2 { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; margin: 34px 0 10px; }
.doc p { font-size: 14.5px; color: var(--muted-ink); line-height: 1.7; margin-bottom: 12px; }
.doc p strong, .doc p em { color: var(--ink); font-style: normal; }
.doc code { font: 500 12.5px/1 var(--mono); color: var(--brand); overflow-wrap: anywhere; }
/* Legal/prose tables (privacy subprocessors, licence attributions): without
   this they render with UA defaults — zero padding, colliding columns. */
.doc table { width: 100%; border-collapse: collapse; margin: 14px 0 24px; font-size: 13px; }
.doc th, .doc td { text-align: left; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.doc th { font: 600 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-ink); }
.doc a { color: var(--brand); border-bottom: 1px dotted color-mix(in oklab, var(--brand) 50%, transparent); }
.foot-base a { color: inherit; border-bottom: 1px dotted color-mix(in oklab, var(--muted-ink) 50%, transparent); }

/* ---------------- immersion layer ---------------- */
/* hero headline enters word by word (spans injected by JS; no-JS unaffected) */
.js .hero h1 .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em) rotate(1.5deg);
  filter: blur(8px);
  transition: opacity 0.6s ease var(--wd, 0s),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--wd, 0s),
              filter 0.6s ease var(--wd, 0s);
}
.js .hero h1.in .w { opacity: 1; transform: none; filter: none; }

/* accent text carries a slow light-sweep */
@supports (-webkit-background-clip: text) {
  /* .accent .w too: the split hero headline wraps accent words in inline-block
     spans, and a parent's clipped gradient doesn't reliably paint through them */
  .accent, .accent .w {
    background: linear-gradient(100deg,
                var(--brand) 0%, var(--accent-shimmer) 46%, var(--brand) 62%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 7s ease-in-out infinite;
  }
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* JS tags the PR-comment mock .tilt — perspective lean + a glare that tracks the cursor */
.tilt { position: relative; }
.tilt::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.3s ease;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%),
              rgb(255 255 255 / 0.07), transparent 70%);
}
.tilt:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero { opacity: 1; transform: none; }
  .hero-mark { transform: translateX(-50%); }
  .accent { animation: none; }
  .js .hero h1 .w { opacity: 1; transform: none; filter: none; transition: none; }
  .tilt::after { display: none; }
}

/* October 2026: Garboard product website. New surfaces use scoped components;
   established documentation typography stays available to the docs origin. */
:root { --site-accent: #6de0ba; --site-soft: #182921; --site-muted: #a9b9b0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --site-accent: #006e58; --site-soft: #e6eee1; --site-muted: #52665a; } }
:root[data-theme="light"] { --site-accent: #006e58; --site-soft: #e6eee1; --site-muted: #52665a; }
:root[data-theme="dark"] { --site-accent: #6de0ba; --site-soft: #182921; --site-muted: #a9b9b0; }
body { background-image: none; }
.top { position: sticky; top: 0; width: 100%; max-width: none; margin: 0; padding: 16px max(24px, calc((100vw - 1240px) / 2)); display: flex; justify-content: space-between; gap: 24px; align-items: center; border-bottom: 1px solid var(--border); background: var(--bg); backdrop-filter: none; z-index: 20; transform: none; }
.product-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; font: 650 26px/1 var(--sans); letter-spacing: -1.1px; }
.product-brand img { width: 40px; height: 40px; border-radius: 0; display: block; }
.brand-name { display: grid; gap: 5px; }
.deltz-wordmark { display: inline-block; width: 82px; height: 28px; flex-shrink: 0; background: var(--ink); -webkit-mask: url('/assets/brand/deltz-wordmark.svg') center / contain no-repeat; mask: url('/assets/brand/deltz-wordmark.svg') center / contain no-repeat; }
.product-brand img,.lab-brand img { content: url('/assets/brand/deltz-mark-dark.svg'); }
:root[data-theme="light"] .product-brand img,:root[data-theme="light"] .lab-brand img { content: url('/assets/brand/deltz-mark.svg?v=splitd2'); }
@media(prefers-color-scheme:light) { :root:not([data-theme="dark"]) .product-brand img,:root:not([data-theme="dark"]) .lab-brand img { content: url('/assets/brand/deltz-mark.svg?v=splitd2'); } }
.brand-by { display: block; color: var(--muted-ink); font: 500 9px/1.7 var(--sans); letter-spacing: 1.2px; margin-top: 3px; }
.top nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.top nav a { font: 500 13px/1.4 var(--sans); letter-spacing: 0; color: var(--site-muted); text-decoration: none; white-space: nowrap; }
.top nav a:hover { color: var(--ink); }
.top nav .nav-cta { background: var(--brand-solid); color: #fff; border: 1px solid transparent; padding: 12px 17px; border-radius: 7px; transform: none; box-shadow: none; }
.top nav .nav-cta:hover { color: #fff; filter: brightness(1.12); }
.top nav .sign-in { margin-left: 14px; }
.theme-toggle { width: 32px; height: 32px; }
.skip-link { position: absolute; top: -100px; left: 10px; z-index: 100; background: var(--card); padding: 10px; color: var(--ink); }
.skip-link:focus { top: 8px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--site-accent); outline-offset: 4px; }
.site-v2 { font-size: 16px; line-height: 1.65; }
.site-v2 main { overflow: visible; }
.wrap { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.site-v2 h1,.site-v2 h2,.site-v2 h3 { font-family: var(--sans); color: var(--ink); }
.site-v2 h1 { font-size: clamp(42px, 5.2vw, 72px); line-height: 1.04; letter-spacing: -.065em; font-weight: 590; }
.site-v2 h1 span { color: var(--site-accent); }
.site-v2 h2 { font-size: clamp(32px, 3.9vw, 50px); line-height: 1.13; font-weight: 570; letter-spacing: -.045em; }
.site-v2 h3 { font-size: 22px; line-height: 1.3; letter-spacing: -.025em; font-weight: 570; }
.site-v2 p { color: var(--site-muted); }
.site-v2 .eyebrow { font: 500 11px/1.6 var(--mono); letter-spacing: 1.5px; color: var(--site-accent); margin-bottom: 24px; }
.site-v2 .small, .small { font-size: 12px; line-height: 1.7; color: var(--muted-ink); }
.mono { font-family: var(--mono); }
.hero-v2 { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 52px; align-items: center; padding-block: 88px 76px; }
.hero-copy { padding-bottom: 15px; }
.hero-copy .eyebrow { font-size: 10px; letter-spacing: 1.1px; display: flex; gap: 9px; align-items: center; }
.status-dot { flex-shrink: 0; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #88c9a8; }
.hero-description { font-size: 17px; line-height: 1.8; max-width: 480px; margin: 26px 0 30px; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 16px; min-height: 48px; padding: 13px 20px; border: 1px solid transparent; border-radius: 7px; font: 550 13px/1.4 var(--sans); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; }
.button-primary { color: #fff; background: var(--brand-solid); }
.button-primary:hover { filter: brightness(1.12); color: #fff; }
.button-outline { background: transparent; border-color: var(--border-strong); color: var(--ink); }
.button-outline:hover { background: var(--site-soft); border-color: var(--site-accent); }
.button:disabled { cursor: wait; opacity: .6; }
.micro { margin-top: 17px; font-size: 11px; }
.early-note { margin-top: 3px; font-size: 11px; color: var(--muted-ink) !important; }
.hero-visual { min-width: 0; position: relative; }
.review-preview { background: #101816; color: #f2f4ee; border: 1px solid #344b3f; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 90px rgba(28,76,48,.13); }
.preview-bar { padding: 13px 17px; display: flex; align-items: center; gap: 8px; background: #18231d; color: #b7c6bc; font: 10px var(--mono); border-bottom: 1px solid #2c4035; }
.preview-dot { width: 6px; height: 6px; background: #9398a9; border-radius: 50%; }
.live-label { margin-left: auto; color: #acbfb1; font-size: 8px; letter-spacing: .6px; }
.preview-title { padding: 24px 25px 18px; }
.preview-title .mono { font-size: 10px; color: #a9bdaf; }
.site-v2 .preview-title h2 { color: #f2f4ee; font-size: 24px; letter-spacing: -.03em; margin: 10px 0 14px; }
.gate-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.gate-tags span { padding: 3px 8px; border: 1px solid #335444; background: #172c21; color: #aadac0; font: 10px var(--mono); border-radius: 4px; }
.review-preview img { width: 100%; height: auto; display: block; padding: 0 12px; }
.preview-caption { display: flex; align-items: center; gap: 8px; padding: 12px 22px; color: #9fa5b7; font: 9px var(--mono); }
.visual-note { font: 11px var(--mono); color: var(--muted-ink); padding: 17px 5px; text-align: right; }
.visual-note span { color: var(--site-accent); font-size: 18px; }
.compatibility { padding: 24px 0 38px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; }
.compatibility > p:first-child { font-size: 12px; }
.compatibility > div { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 38px; padding: 23px 0; font-size: 18px; letter-spacing: -.5px; font-weight: 550; color: var(--ink); }
.compatibility .compat-git { padding-left: 35px; border-left: 1px solid var(--border); }
.compatibility .small { font-size: 10px; max-width: 800px; margin: auto; }
.site-v2 p a, .text-link { color: var(--site-accent); text-decoration: none; }
.site-v2 p a:hover,.text-link:hover { text-decoration: underline; }
.section { padding-block: 100px; }
.section-heading { max-width: 660px; margin-bottom: 44px; }
.section-heading .eyebrow, .split-heading .eyebrow { margin-bottom: 18px; }
.section-heading > p:last-child { font-size: 16px; line-height: 1.8; margin-top: 20px; max-width: 600px; }
.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.feature-card { padding: 30px; background: var(--card); min-width: 0; }
.feature-card + .feature-card { border-left: 1px solid var(--border); }
.feature-number { font: 10px var(--mono); color: var(--site-accent); letter-spacing: 1px; display: block; margin-bottom: 32px; }
.feature-card > p { font-size: 13px; margin-top: 14px; line-height: 1.85; }
.mini-code, .evidence-stack, .decision-flow { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 24px; font-size: 11px; }
.mini-code span,.mini-code code { display: block; }
.mini-code .mono { color: var(--muted-ink); font-size: 10px; }
.mini-code code { margin: 16px 0; font: 11px var(--mono); overflow-wrap: anywhere; }
.mini-code b { color: var(--warning); font-weight: 400; }
.signal { border-left: 2px solid var(--warning); padding-left: 10px; color: var(--site-muted); font-size: 10px; }
.evidence-stack > span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); padding: 9px 0; color: var(--muted-ink); font-size: 10px; }
.evidence-stack b { font-weight: 450; color: var(--ink); }
.decision-flow { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.decision-flow span { padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 10px; }
.decision-flow i { color: var(--site-accent); font-style: normal; }
.illustration-note { margin-top: 12px; font-size: 10px; }
.section-tinted { background: var(--bg-sunk); border-block: 1px solid var(--border); }
.product-tour { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
.tour-tabs { display: flex; border-bottom: 1px solid var(--border); }
.tour-tabs button { padding: 21px 28px; font: 11px var(--mono); color: var(--muted-ink); background: none; border: 0; cursor: pointer; text-align: left; border-bottom: 2px solid transparent; }
.tour-tabs button span { margin-left: 12px; font-family: var(--sans); font-size: 14px; }
.tour-tabs button[aria-selected="true"] { color: var(--site-accent); border-bottom-color: var(--site-accent); background: var(--site-soft); }
.tour-panel { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); padding: 32px; gap: 45px; align-items: center; }
.tour-panel[hidden] { display: none; }
.tour-panel > div p { font-size: 14px; margin: 18px 0 24px; }
.tour-panel .text-link { font-size: 13px; }
.tour-panel img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px; display: block; }
.tour-panel figcaption { font: 12px/1.6 var(--sans); color: var(--muted-ink); margin-top: 10px; }
.split-heading { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 70px; align-items: end; margin-bottom: 44px; }
.split-heading > p { font-size: 15px; }
.steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 48px; }
.steps-grid article { border-top: 1px solid var(--border-strong); padding-top: 28px; }
.steps-grid article > span { font: 12px var(--mono); color: var(--site-accent); }
.steps-grid h3 { margin: 18px 0 12px; font-size: 20px; }
.steps-grid p { font-size: 14px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.price-card { padding: 30px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); display: flex; flex-direction: column; }
.price-featured { border-color: var(--site-accent); background: var(--site-soft); box-shadow: inset 0 3px var(--site-accent); }
.plan-label { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.plan-badge { font: 9px var(--mono); background: var(--brand-solid); color: #fff; border-radius: 3px; padding: 5px 7px; }
.price-card h3 { font-size: 15px; font-weight: 450; color: var(--site-muted); }
.site-v2 .plan-price { font-size: 48px; font-weight: 570; letter-spacing: -2px; color: var(--ink); margin: 22px 0 0; line-height: 1.35; }
.plan-price span { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted-ink); }
.site-v2 .price-custom { font-size: 41px; min-height: 65px; }
.plan-for { font-size: 12px; min-height: 45px; margin: 5px 0 24px; }
.price-card > .button { width: 100%; padding-inline: 10px; }
.price-card ul { list-style: none; padding: 24px 0 0; margin: 24px 0; border-top: 1px solid var(--border); }
.price-card li { font-size: 12px; color: var(--site-muted); padding: 7px 0 7px 20px; position: relative; }
.price-card li::before { content: '✓'; color: var(--site-accent); position: absolute; left: 0; }
.price-card li strong { color: var(--ink); font-weight: 550; }
.plan-foot { margin-top: auto; font-size: 10px; }
.pricing-note { text-align: center; font-size: 11px; margin-top: 22px; }
.trust-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 80px; padding: 52px; border: 1px solid var(--border); border-radius: 10px; }
.trust-panel > div > p:not(.eyebrow) { margin: 22px 0; font-size: 14px; }
.trust-panel .text-link { font-size: 13px; }
.trust-items article { padding: 20px 0; border-bottom: 1px solid var(--border); }
.trust-items article:first-child { padding-top: 0; }
.trust-items article:last-child { border: 0; padding-bottom: 0; }
.trust-items h3 { font-size: 17px; margin-bottom: 8px; }
.trust-items p,.trust-items a { font-size: 13px; }
.trust-items a { color: var(--site-accent); display: inline-block; margin-top: 8px; }
.faq-v2 { max-width: 860px; }
.faq-v2 details { border-bottom: 1px solid var(--border); padding: 22px 0; }
.faq-v2 summary { cursor: pointer; font-size: 16px; font-weight: 500; padding-right: 12px; }
.faq-v2 details p { margin-top: 18px; font-size: 14px; max-width: 740px; line-height: 1.8; }
.closing-v2 { text-align: center; padding: 84px 24px; margin-bottom: 80px; border: 1px solid var(--border); border-radius: 12px; background: var(--site-soft); }
.closing-v2 .button-row { justify-content: center; margin-top: 30px; }
.closing-v2 > .button { margin-top: 30px; }
.closing-v2 h2 { font-size: clamp(36px, 4.8vw, 62px); }
.page-intro { padding-block: 80px 50px; text-align: center; }
.page-intro h1 { margin-inline: auto; }
.page-intro > p:not(.eyebrow) { margin-top: 24px; font-size: 17px; }
.billing-label { display: inline-block; border: 1px solid var(--border); border-radius: 5px; padding: 8px 18px; margin-top: 25px; color: var(--muted-ink); font: 11px var(--mono); }
.table-scroll { overflow-x: auto; max-width: 100%; margin-top: 30px; }
.compare-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.compare-table th,.compare-table td { padding: 18px; border-bottom: 1px solid var(--border); min-width: 110px; }
.compare-table th { font-weight: 550; }
.compare-table td { color: var(--site-muted); }
.compare-table thead { background: var(--site-soft); }
.contact-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 100px; padding-block: 90px; align-items: start; }
.contact-copy h1 { font-size: clamp(40px,4.4vw,62px); }
.contact-copy > p:not(.eyebrow) { margin-top: 26px; font-size: 16px; }
.contact-steps { list-style: decimal-leading-zero; margin: 35px 0 35px 28px; }
.contact-steps li { padding-left: 14px; margin-bottom: 23px; color: var(--site-accent); font: 12px var(--mono); }
.contact-steps strong,.contact-steps span { display: block; font-family: var(--sans); }
.contact-steps strong { font-size: 15px; color: var(--ink); font-weight: 550; margin-bottom: 5px; }
.contact-steps span { font-size: 13px; color: var(--site-muted); line-height: 1.8; }
.contact-direct { border-top: 1px solid var(--border); padding-top: 24px; }
.contact-direct p,.contact-direct a { font-size: 13px; }
.contact-direct a { display: block; margin-top: 8px; color: var(--site-accent); text-decoration: none; }
.contact-card { padding: 34px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.site-v2 .contact-card h2 { font-size: 25px; margin-bottom: 8px; }
.site-v2 label { display: block; font-size: 12px; color: var(--ink); margin: 21px 0 8px; }
.site-v2 label span { font-weight: 400; color: var(--muted-ink); }
.site-v2 input,.site-v2 select,.site-v2 textarea { display: block; width: 100%; min-width: 0; background: var(--bg); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 5px; padding: 13px 12px; font: 13px/1.5 var(--sans); }
.site-v2 input::placeholder,.site-v2 textarea::placeholder { color: var(--muted-ink); }
.site-v2 textarea { resize: vertical; }
.site-v2 select { text-overflow: ellipsis; }
.site-v2 .plan-summary { font-size: 11px; margin-top: 10px; color: var(--site-accent); }
.form-privacy { font-size: 11px; line-height: 1.7; margin: 20px 0; }
#lead-form > button { width: 100%; }
#lead-form > .small { font-size: 10px; margin-top: 12px; text-align: center; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 13px; margin-top: 12px; }
.company-details { padding-bottom: 60px; max-width: 680px; text-align: center; }
.site-v2 .company-details h2 { font-size: 18px; }
.company-details p { font-size: 12px; margin-top: 10px; }
.confirmation { max-width: 740px; padding-block: 90px 110px; text-align: center; }
.confirmation > p:not(.eyebrow) { margin-top: 26px; }
.confirmation h1 { font-size: 52px; }
.confirmation-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--success); color: var(--success); font-size: 25px; margin-bottom: 22px; }
.next-step { border: 1px solid var(--border); background: var(--card); border-radius: 10px; padding: 30px; margin-block: 36px; }
.site-v2 .next-step h2 { font-size: 22px; }
.next-step p { margin-block: 14px; font-size: 14px; }
.next-step .button { margin-top: 12px; }
.funnel-content { max-width: 1000px; padding-bottom: 90px; }
.funnel-content .button-row input { width: min(420px,100%); }
.funnel-content select { width: auto; max-width: 100%; }
.funnel-content [hidden] { display: none; }
.metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin-block: 30px; }
.metric { border: 1px solid var(--border); border-radius: 8px; padding: 20px; font-size: 12px; }
.metric b { display: block; font-size: 35px; }
footer { max-width: none; width: 100%; margin: 0; padding: 58px max(32px, calc((100vw - 1240px)/2)) 28px; border-top: 1px solid var(--border); background: var(--bg-sunk); }
.foot-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap: 70px; }
.foot-brand > p { font-size: 13px; margin-top: 23px; color: var(--muted-ink); }
.foot-brand > .legal-company { font-size: 10px; }
.foot-col h4 { font: 500 11px var(--mono); letter-spacing: .5px; margin-bottom: 20px; color: var(--ink); }
.foot-col a { display: block; font-size: 12px; margin-bottom: 12px; text-decoration: none; color: var(--site-muted); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px; margin-top: 50px; padding-top: 22px; font-size: 10px; color: var(--muted-ink); border-top: 1px solid var(--border); }
.company-identity { padding: 20px; border: 1px solid var(--border); font-size: 13px; }
@media (max-width:1100px) { .top nav { gap: 16px; } .top nav .sign-in { margin-left: 0; } .hero-v2 { gap: 30px; } .price-card { padding: 24px; } .contact-layout { gap: 45px; } }
@media (max-width:900px) { .top { flex-wrap: wrap; padding: 14px 24px; gap: 14px; } .top nav { flex: 1; justify-content: flex-end; gap: 15px; } .top nav a { font-size: 12px; } .top nav .nav-cta { padding: 10px 12px; } .hero-v2 { padding-top: 60px; gap: 28px; } .hero-copy h1 { font-size: 50px; } .hero-description { font-size: 15px; } .hero-copy .eyebrow { font-size: 8px; } .hero-copy .button-row { gap: 8px; } .hero-copy .button { font-size: 11px; padding-inline: 12px; } .hero-copy .micro { font-size: 10px; } .preview-title { padding: 18px; } .site-v2 .preview-title h2 { font-size: 20px; } .feature-card { padding: 22px; } .trust-panel { padding: 35px; gap: 35px; } .steps-grid { gap: 28px; } .tour-panel { gap: 28px; padding: 25px; } .plan-badge { font-size: 8px; } .price-card { padding: 20px; } .price-card .button { font-size: 11px; } .price-card h3 { min-height: 40px; } }
@media (max-width:700px) { .wrap { width: calc(100% - 40px); } .top { padding: 12px 20px; } .top .product-brand { font-size: 23px; } .top nav { flex-basis: 100%; justify-content: space-between; column-gap: 10px; row-gap: 14px; } .top .sign-in { margin-left: auto; } .top .theme-toggle { margin-left: 0; } .top nav .nav-cta { padding: 8px 12px; } .hero-v2 { grid-template-columns: minmax(0,1fr); padding-block: 48px; gap: 32px; } .hero-copy h1 { font-size: clamp(44px,10vw,68px); } .hero-copy h1 br:last-child { display: none; } .hero-copy .eyebrow { font-size: 9px; } .hero-description { font-size: 16px; margin-block: 23px; } .hero-copy .button { font-size: 12px; padding-inline: 16px; } .hero-copy .micro { font-size: 10px; } .hero-visual { max-width: 570px; } .preview-title { padding: 22px; } .site-v2 .preview-title h2 { font-size: 24px; } .compatibility > div { gap: 20px; font-size: 15px; } .compatibility .compat-git { border: 0; padding: 0; } .section { padding-block: 65px; } .section-heading { margin-bottom: 30px; } .feature-grid,.pricing-grid,.steps-grid,.trust-panel,.split-heading,.tour-panel,.contact-layout { grid-template-columns: minmax(0,1fr); } .feature-card { padding: 28px; } .feature-card + .feature-card { border-left: 0; border-top: 1px solid var(--border); } .feature-number { margin-bottom: 20px; } .feature-card p { max-width: 55ch; } .split-heading { gap: 25px; } .steps-grid { gap: 32px; } .tour-tabs button { flex: 1; padding: 16px; } .tour-tabs button span { margin: 7px 0 0; display: block; font-size: 12px; } .tour-panel { padding: 22px; } .tour-panel > div p { margin: 14px 0; } .price-card { padding: 28px; } .price-card h3 { min-height: 0; } .plan-for { min-height: 0; } .price-card .button { font-size: 13px; } .pricing-grid { gap: 20px; } .trust-panel { padding: 26px; gap: 35px; } .faq-v2 { padding-top: 25px; } .closing-v2 { margin-bottom: 55px; padding: 50px 18px; } .closing-v2 .eyebrow { font-size: 9px; } .page-intro { padding-block: 48px 35px; } .contact-layout { padding-block: 48px; gap: 30px; } .contact-card { padding: 25px; } .contact-copy h1 { font-size: 46px; } .company-details { padding-bottom: 40px; } .confirmation h1 { font-size: 42px; } .confirmation { padding-block: 60px; } .next-step { padding: 24px; } .foot-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 35px; } .foot-brand { grid-column: 1/-1; } .metric-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width:400px) { .wrap { width: calc(100% - 32px); } .top { padding-inline: 16px; } .top nav { justify-content: flex-start; gap: 14px; } .top nav .sign-in { margin-left: 0; } .top nav .nav-cta { margin-left: auto; } .hero-copy h1 { font-size: 43px; } .hero-copy .eyebrow { font-size: 8px; letter-spacing: .6px; } .hero-copy .button-row { align-items: stretch; } .hero-copy .button { flex: 1; font-size: 11px; gap: 6px; padding-inline: 9px; } .contact-card { padding: 20px; } .contact-copy h1 { font-size: 40px; } .preview-bar { padding-inline: 12px; font-size: 9px; } .live-label { font-size: 7px; } .preview-title { padding: 18px; } .preview-caption { font-size: 8px; } footer { padding-inline: 24px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

html:not(.js) .plan-summary { display: none; }

@media(max-width:700px){.contact-copy .contact-steps,.contact-copy .contact-direct{display:none}.contact-layout{gap:28px}.contact-copy > p:not(.eyebrow){margin-top:18px}}

/* Garboard experience: a local review playground, native-scroll story and capacity guide. */
.experience-hero { position: relative; isolation: isolate; padding: 66px 0 38px; }
.hero-atmosphere { position: absolute; inset: 0 0 auto; height: 900px; overflow: hidden; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 18%, rgba(37,130,92,.17), transparent 59%); }
.atmosphere-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(105,170,133,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(105,170,133,.065) 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(#000,transparent 85%); }
.atmosphere-orbit { position: absolute; width: 1100px; height: 500px; border: 1px solid rgba(90,183,144,.15); border-radius: 50%; left: calc(50% - 550px); top: 45px; transform: rotate(-17deg); }
.orbit-two { width: 1400px; height: 640px; left: calc(50% - 700px); top: -35px; transform: rotate(17deg); border-style: dashed; border-color: rgba(90,183,144,.1); }
.orbit-one::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--site-accent); box-shadow: 0 0 22px 5px rgba(90,183,144,.5); position: absolute; top: 145px; left: 36px; }
.orbit-label { position: absolute; font: 10px var(--mono); color: var(--muted-ink); border: 1px solid var(--border); padding: 7px 13px; border-radius: 20px; background: var(--bg); }
.label-one { left: 7%; top: 128px; transform: rotate(-12deg); }.label-two { right: 8%; top: 80px; transform: rotate(12deg); }.label-three { right: 5%; top: 290px; transform: rotate(-9deg); }
.experience-intro { position: relative; text-align: center; }
.experience-intro .eyebrow { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 23px; font-size: 10px; }
.site-v2 .experience-intro h1 { font-size: clamp(49px,6.65vw,96px); line-height: 1.015; font-weight: 590; letter-spacing: -.065em; margin: 0 auto; }
.experience-intro h1 span { background: linear-gradient(110deg,var(--ink) -30%,var(--site-accent) 50%,#218264); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.experience-description { font-size: 17px; line-height: 1.7; margin: 25px auto 26px; max-width: 670px; }
.experience-intro .button-row { justify-content: center; }
.experience-intro .button { border-radius: 8px; padding-inline: 23px; }
.experience-intro .button-primary { box-shadow: 0 0 0 4px rgba(0,110,88,.1),0 7px 30px rgba(0,110,88,.15); }
.experience-intro .micro { font-size: 10px; margin-top: 17px; }
.playground-shell { margin-top: 50px; scroll-margin-top: calc(var(--header-h,80px) + 20px); position: relative; }
.playground-shell::before { content: ''; position: absolute; inset: 5% 10%; background: rgba(30,102,69,.13); filter: blur(70px); border-radius: 30%; z-index: -1; }
.playground-invitation { display: flex; justify-content: space-between; gap: 20px; font-size: 11px; color: var(--site-muted); margin-bottom: 16px; padding-inline: 3px; }
.playground-invitation .status-dot { margin-right: 8px; }.playground-invitation .mono { font-size: 9px; letter-spacing: 1px; color: var(--site-accent); }
.review-lab { border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; background: var(--bg); box-shadow: 0 24px 90px rgba(0,0,0,.18),0 0 0 6px rgba(90,183,144,.025); }
.lab-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 23px; border-bottom: 1px solid var(--border); background: var(--card); }
.lab-brand { display: flex; gap: 9px; align-items: center; font-size: 14px; font-weight: 600; letter-spacing: -.3px; }.lab-brand img { border-radius: 5px; }.lab-brand span { font: 11px var(--mono); font-weight: 400; color: var(--muted-ink); letter-spacing: 0; margin-left: 6px; }.lab-local { color: var(--muted-ink); font: 10px var(--mono); }.lab-local > span { color: var(--site-accent); margin-right: 5px; }
.lab-enhancement { display: none; }.js .lab-enhancement { display: flex; }
.scenario-tabs { border-bottom: 1px solid var(--border); background: var(--bg-sunk); }
.scenario-tabs button { display: flex; align-items: center; justify-content: center; flex: 1; flex-wrap: wrap; gap: 10px; border: 0; border-right: 1px solid var(--border); border-bottom: 2px solid transparent; background: transparent; color: var(--site-muted); padding: 19px 14px; font: 500 12px/1.5 var(--sans); cursor: pointer; }
.scenario-tabs button:last-child { border-right: 0; }.scenario-tabs button > span { font: 10px var(--mono); color: var(--muted-ink); }.scenario-tabs small { font: 9px var(--mono); padding: 2px 5px; border: 1px solid var(--border); border-radius: 3px; }
.scenario-tabs button:hover { background: var(--card); color: var(--ink); }.scenario-tabs button[aria-selected="true"] { border-bottom-color: var(--site-accent); background: var(--site-soft); color: var(--ink); }.scenario-tabs button[aria-selected="true"] > span { color: var(--site-accent); }
.lab-pr { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 25px 28px; border-bottom: 1px solid var(--border); }
.pr-state { font: 9px var(--mono); letter-spacing: .5px; padding: 4px 7px; color: var(--site-accent); border: 1px solid var(--border); border-radius: 4px; margin-right: 10px; }
.lab-pr .mono { font-size: 10px; color: var(--muted-ink); }
.site-v2 .lab-pr h2 { font-size: 21px; line-height: 1.35; letter-spacing: -.025em; margin-top: 12px; }
.lab-count { font: 10px/1.6 var(--mono); color: var(--site-accent); text-align: right; flex-shrink: 0; }
.lab-workspace { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(0,1fr); }
.lab-editor { min-width: 0; display: flex; flex-direction: column; padding: 22px 0 0; background: var(--bg-sunk); }
.editor-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 22px 24px; font: 11px var(--mono); color: var(--site-muted); }
.editor-modes { gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 6px; }.editor-modes button { border: 0; background: transparent; color: var(--muted-ink); font: 10px/1.5 var(--sans); padding: 5px 8px; border-radius: 4px; cursor: pointer; }.editor-modes button[aria-pressed="true"] { background: var(--site-soft); color: var(--site-accent); }.editor-modes button:disabled { opacity: .4; cursor: default; }
.lab-code { padding: 10px 0 35px; font: 12px/2.6 var(--mono); min-height: 254px; }
.code-line { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: start; position: relative; border-left: 2px solid transparent; padding: 1px 15px 1px 0; transition: background .2s; }
.code-line code { font: inherit; color: var(--site-muted); white-space: pre-wrap; overflow-wrap: anywhere; background: none; padding: 0; }
.line-number { color: var(--muted-ink); font-size: 10px; text-align: center; user-select: none; }
.code-line.is-evidence { background: rgba(204,156,63,.085); border-left-color: var(--warning); }.code-line.is-evidence code { color: var(--ink); }.line-signal { grid-column: 2; justify-self: start; color: var(--warning); font-size: 9px; line-height: 1.5; padding-bottom: 4px; }
.code-line.is-proposed { border-left-color: var(--success); background: rgba(73,166,121,.12); }.code-line.is-proposed code,.code-line.is-proposed .line-signal { color: var(--success); }
.editor-foot { margin-top: auto; display: flex; align-items: flex-start; gap: 8px; padding: 18px 22px; border-top: 1px solid var(--border); color: var(--muted-ink); font: 10px/1.7 var(--mono); min-height: 55px; }
.evidence-beacon { width: 6px; height: 6px; flex-shrink: 0; background: var(--site-accent); border-radius: 50%; margin-top: 5px; }
.lab-inspector { padding: 24px 28px; border-left: 1px solid var(--border); background: var(--card); }
.inspector-label { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted-ink); font: 9px var(--mono); letter-spacing: 1px; margin-bottom: 18px; }.inspector-label > span:last-child { letter-spacing: 0; }
.finding-picker { gap: 7px; flex-wrap: wrap; margin-bottom: 24px; }.finding-picker button { border: 1px solid var(--border); color: var(--site-muted); border-radius: 5px; padding: 7px 9px; font: 10px/1.5 var(--sans); background: var(--bg); cursor: pointer; }.finding-picker button[aria-pressed="true"] { color: var(--site-accent); border-color: var(--site-accent); background: var(--site-soft); }
.finding-category { font: 9px/1.5 var(--mono); letter-spacing: .7px; color: var(--site-accent); }.site-v2 .finding-detail h3 { font-size: 24px; line-height: 1.25; margin: 11px 0 13px; max-width: 360px; }.finding-detail > p:not(.lab-outcome) { font-size: 13px; line-height: 1.85; min-height: 73px; }.evidence-address { display: inline-block; font: 10px var(--mono); color: var(--site-accent); border-bottom: 1px dashed var(--border-strong); padding-block: 6px; margin-top: 10px; }
.lab-actions { align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 23px; }.lab-actions .button { min-height: 40px; padding: 10px 14px; font-size: 11px; gap: 14px; }.reset-example { font: 11px var(--sans); border: 0; background: none; color: var(--muted-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.site-v2 .lab-outcome { min-height: 48px; margin-top: 15px; font-size: 10px; line-height: 1.8; color: var(--muted-ink); }.review-lab[data-mode="proposed"] .lab-outcome { color: var(--success); }
.lab-journey { display: flex; align-items: center; gap: 15px; padding: 19px 28px; border-top: 1px solid var(--border); font: 10px var(--sans); color: var(--muted-ink); background: var(--card); }.lab-journey > span { display: flex; align-items: center; gap: 8px; }.lab-journey i { font: 9px var(--mono); width: 23px; height: 23px; border: 1px solid var(--border); display: grid; place-items: center; border-radius: 50%; }.lab-journey b { color: var(--border-strong); font-weight: 400; }.lab-journey .is-current { color: var(--site-accent); }.lab-journey .is-current i { background: var(--site-soft); border-color: var(--site-accent); }.lab-journey > a { color: var(--site-accent); margin-left: auto; text-decoration: none; }
.site-v2 .lab-disclaimer { font-size: 10px; text-align: center; margin-top: 17px; color: var(--muted-ink); }
.review-story { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr); gap: 100px; align-items: start; padding-block: 130px; }
.story-intro { position: sticky; top: calc(var(--header-h,80px) + 60px); }.story-intro h2 span { color: var(--site-accent); }.story-intro > p:not(.eyebrow) { max-width: 370px; font-size: 15px; line-height: 1.9; margin: 25px 0; }.story-intro .text-link { font-size: 12px; }
.story-index { display: flex; align-items: center; gap: 18px; padding-block: 20px 35px; color: var(--muted-ink); font: 9px/1.8 var(--mono); letter-spacing: 1px; }.story-index > span:first-child { font: 500 76px/1 var(--sans); letter-spacing: -6px; color: var(--site-accent); }
.story-chapters { display: grid; gap: 36px; }.story-chapter { padding: 34px; border: 1px solid var(--border); border-left: 2px solid var(--border); border-radius: 0 12px 12px 0; background: var(--card); transition: border-color .4s, box-shadow .4s; }.story-chapter.is-active { border-left-color: var(--site-accent); box-shadow: -25px 0 70px -55px var(--site-accent); }.chapter-kicker { font: 10px var(--mono); letter-spacing: 1px; color: var(--site-accent); }.site-v2 .story-chapter h3 { font-size: 30px; line-height: 1.2; letter-spacing: -.04em; margin: 23px 0 18px; }.story-chapter > p { font-size: 13px; line-height: 1.8; }.story-visual { border: 1px solid var(--border); background: var(--bg); border-radius: 7px; padding: 24px; margin-top: 30px; font: 10px/1.6 var(--mono); }
.safeguard-visual { display: flex; align-items: center; flex-wrap: wrap; row-gap: 20px; }.system-node { border: 1px solid var(--border-strong); padding: 10px 12px; border-radius: 5px; color: var(--site-muted); }.connection-line { flex: 1; min-width: 15px; height: 1px; background: var(--site-accent); }.risk-node { border-color: var(--warning); color: var(--ink); }.risk-node small { display: block; color: var(--warning); font-size: 8px; margin-top: 4px; }.context-tag { width: 100%; color: var(--warning); }
.cost-visual > div:first-child { display: flex; justify-content: space-between; gap: 15px; align-items: center; color: var(--muted-ink); }.cost-visual strong { font: 500 26px var(--sans); color: var(--ink); letter-spacing: -1px; }.cost-track { height: 7px; border-radius: 10px; background: var(--site-soft); position: relative; margin-block: 25px; }.cost-track span { display: block; width: 90%; height: 100%; background: linear-gradient(90deg,var(--site-accent),var(--warning)); border-radius: inherit; transform-origin: left; }.cost-track i { position: absolute; height: 22px; width: 1px; background: var(--warning); top: -7px; left: 54%; }.cost-visual p { display: flex; justify-content: space-between; font-size: 9px; gap: 15px; }.cost-visual b { color: var(--warning); font-weight: 400; }.standards-visual > span { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; color: var(--muted-ink); }.standards-visual > span + span { border-top: 1px solid var(--border); }.standards-visual b,.standards-visual code { font: 9px var(--mono); color: var(--site-accent); background: none; padding: 0; }
.plan-finder { display: none; }.js .plan-finder { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr) minmax(0,.8fr); gap: 32px; padding: 32px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-sunk); margin-bottom: 30px; align-items: center; }.finder-intro .eyebrow { font-size: 9px; letter-spacing: .9px; margin-bottom: 15px; }.site-v2 .finder-intro h3 { font-size: 26px; line-height: 1.2; }.finder-intro > p:last-child { font-size: 12px; margin-top: 15px; }.site-v2 .finder-controls label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: 11px; }.finder-controls output { font: 14px var(--mono); color: var(--site-accent); }.finder-controls > div + div { margin-top: 20px; }
.site-v2 .finder-controls input[type="range"] { appearance: none; -webkit-appearance: none; height: 5px; padding: 0; margin-block: 16px 10px; border: 0; border-radius: 10px; background: linear-gradient(to right,var(--site-accent) var(--range-position,0%),var(--border-strong) var(--range-position,0%)); cursor: pointer; }.finder-controls input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--site-accent); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--site-accent); }.finder-controls input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--site-accent); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--site-accent); }.range-ends { display: flex; justify-content: space-between; font: 9px var(--mono); color: var(--muted-ink); }.site-v2 .finder-controls .onprem-choice { justify-content: start; margin: 22px 0 0; font-size: 10px; line-height: 1.5; cursor: pointer; }.site-v2 .onprem-choice input { appearance: auto; width: 15px; height: 15px; flex-shrink: 0; padding: 0; border-radius: 3px; accent-color: var(--brand-solid); }.finder-result { padding-left: 26px; border-left: 1px solid var(--border); }.finder-result > .mono { font-size: 8px; letter-spacing: 1px; color: var(--muted-ink); }.site-v2 .finder-result h3 { font-size: 29px; margin-top: 10px; }.finder-result h3 span { display: block; font: 11px var(--mono); color: var(--site-accent); margin-top: 8px; }.finder-result #capacity-result > p { font-size: 11px; line-height: 1.7; margin-top: 15px; min-height: 56px; }.finder-result .button { font-size: 11px; min-height: 40px; padding: 10px 14px; margin-top: 16px; }.finder-result > .small { font-size: 9px; margin-top: 12px; }.price-card { transition: border-color .25s,transform .25s; }.price-card.is-capacity-match { border-color: var(--site-accent); }.price-card.is-capacity-match .plan-label::after { content: 'FITS YOUR SELECTION'; color: var(--site-accent); font: 8px var(--mono); letter-spacing: .6px; }.price-card:hover { transform: translateY(-4px); }.price-featured { box-shadow: none; }
@media(prefers-reduced-motion:no-preference) { .experience-intro { animation: experience-arrive .8s both; }.playground-shell { animation: experience-arrive .9s .15s both; }.hero-atmosphere { animation: atmosphere-arrive 2.5s both; }.experience-reveal { transform: translateY(20px); transition: transform .65s ease, border-color .4s,box-shadow .4s; }.experience-reveal.has-entered { transform: translateY(0); }.story-chapter.has-entered .cost-track span { animation: cost-arrive 1s both; }.review-lab[data-mode="proposed"] .is-proposed { animation: proposal-arrive .4s both; } }
@keyframes experience-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes atmosphere-arrive { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes cost-arrive { from { transform: scaleX(.1); } to { transform: scaleX(1); } }
@keyframes proposal-arrive { from { background-color: rgba(73,166,121,.35); } to { background-color: rgba(73,166,121,.12); } }
@media(max-width:1100px) { .orbit-label { display: none; }.scenario-tabs small { display: none; }.lab-workspace { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }.lab-code { font-size: 10px; }.lab-inspector { padding: 24px; }.review-story { gap: 55px; }.js .plan-finder { gap: 24px; padding: 26px; }.finder-result { padding-left: 20px; }.site-v2 .finder-intro h3 { font-size: 23px; } }
@media(max-width:800px) { .experience-hero { padding-top: 48px; }.experience-description { font-size: 15px; }.playground-invitation { font-size: 10px; }.playground-invitation .mono { display: none; }.lab-local { font-size: 8px; }.lab-pr { padding: 22px; }.lab-count { font-size: 9px; }.site-v2 .lab-pr h2 { font-size: 19px; }.scenario-tabs button { font-size: 11px; gap: 5px; padding: 16px 9px; }.lab-workspace { grid-template-columns: minmax(0,1fr); }.lab-editor { padding-top: 17px; }.lab-code { font-size: 12px; min-height: 220px; padding-bottom: 20px; }.editor-bar { margin-bottom: 10px; }.lab-inspector { border-left: 0; border-top: 1px solid var(--border); }.finding-detail > p:not(.lab-outcome) { min-height: 0; max-width: 590px; }.site-v2 .lab-outcome { min-height: 0; }.finding-picker { margin-bottom: 20px; }.lab-journey { flex-wrap: wrap; gap: 10px; padding: 19px 22px; }.lab-journey > a { width: 100%; margin: 9px 0 0; }.review-story { gap: 35px; padding-block: 85px; }.story-chapter { padding: 25px; }.site-v2 .story-chapter h3 { font-size: 26px; }.story-visual { padding: 18px; }.safeguard-visual { gap: 12px; }.connection-line { display: none; }.js .plan-finder { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; }.finder-intro { grid-column: 1/-1; }.finder-intro .eyebrow { margin-bottom: 10px; }.finder-intro > p:last-child { margin-top: 9px; } }
@media(max-width:600px) { .experience-hero { padding-top: 38px; }.experience-intro .eyebrow { font-size: 8px; letter-spacing: .9px; gap: 7px; margin-bottom: 22px; }.site-v2 .experience-intro h1 { font-size: clamp(39px,8.6vw,52px); line-height: 1.08; letter-spacing: -.065em; }.experience-description { font-size: 14px; margin: 22px auto 24px; max-width: 390px; }.experience-description br { display: none; }.experience-intro .button { font-size: 11px; padding-inline: 17px; gap: 10px; min-height: 44px; }.experience-intro .micro { font-size: 9px; max-width: 280px; margin-inline: auto; line-height: 1.8; }.playground-shell { margin-top: 32px; }.playground-invitation { font-size: 9px; line-height: 1.6; margin-bottom: 12px; }.review-lab { border-radius: 9px; }.lab-topbar { padding: 13px 15px; }.lab-brand { font-size: 12px; }.lab-brand span { font-size: 9px; margin-left: 0; }.lab-local { display: none; }.scenario-tabs button { font-size: 10px; padding: 14px 8px; line-height: 1.45; gap: 6px; display: block; }.scenario-tabs button > span { display: block; margin-bottom: 4px; font-size: 9px; }.lab-pr { display: block; padding: 19px 16px; }.lab-pr .mono { font-size: 8px; }.pr-state { font-size: 8px; padding: 3px 5px; margin-right: 5px; }.site-v2 .lab-pr h2 { font-size: 19px; margin-top: 12px; }.lab-count { display: inline-block; margin-top: 12px; }.editor-bar { margin-inline: 15px; font-size: 10px; }.editor-modes button { font-size: 9px; padding: 5px 6px; }.lab-code { font-size: 10px; line-height: 2.8; min-height: 195px; }.code-line { grid-template-columns: 26px minmax(0,1fr); padding-right: 9px; }.line-number { font-size: 8px; }.line-signal { font-size: 8px; }.editor-foot { padding: 14px 16px; font-size: 9px; }.lab-inspector { padding: 21px 18px; }.site-v2 .finding-detail h3 { font-size: 23px; }.finding-detail > p:not(.lab-outcome) { font-size: 12px; }.lab-journey { font-size: 8px; gap: 7px; padding: 16px; }.lab-journey > span { gap: 4px; }.lab-journey i { width: 18px; height: 18px; font-size: 8px; }.lab-journey > a { font-size: 10px; }.site-v2 .lab-disclaimer { font-size: 9px; line-height: 1.8; }.review-story { grid-template-columns: minmax(0,1fr); padding-block: 65px; gap: 34px; }.story-intro { position: static; }.story-intro > p:not(.eyebrow) { margin: 20px 0; font-size: 14px; }.story-index { display: none; }.story-chapters { gap: 18px; }.story-chapter { padding: 28px; }.site-v2 .story-chapter h3 { font-size: 28px; }.safeguard-visual { gap: 0; row-gap: 15px; }.connection-line { display: block; }.js .plan-finder { grid-template-columns: minmax(0,1fr); padding: 24px; gap: 26px; }.finder-result { padding: 23px 0 0; border-left: 0; border-top: 1px solid var(--border); }.finder-result #capacity-result > p { min-height: 0; }.site-v2 .finder-intro h3 { font-size: 26px; }.finder-result .button { width: 100%; }.finder-intro { grid-column: auto; }.price-card:hover { transform: none; } }
@media(max-width:360px) { .site-v2 .experience-intro h1 { font-size: 36px; }.experience-intro .eyebrow { font-size: 7px; letter-spacing: .6px; }.lab-pr .mono { font-size: 7px; }.lab-code { font-size: 10px; }.lab-journey { column-gap: 5px; }.lab-journey i { display: none; }.story-chapter { padding: 23px; }.story-visual { padding: 16px; }.system-node { padding: 8px; font-size: 8px; }.risk-node small { font-size: 7px; } }
@media(prefers-reduced-motion:reduce) { .experience-reveal,.experience-intro,.playground-shell,.hero-atmosphere { transform: none !important; opacity: 1 !important; }.price-card:hover { transform: none; } }

html:not(.js) .tour-tabs,html:not(.js) #lab-progress,html:not(.js) #lab-outcome { display: none; }

.lab-brand .deltz-wordmark { width: 46px; height: 16px; margin-left: 0; }