/* ==========================================================================
   exact web kit v1 — the static port of exact.gg's design system
   (C:/exact-gg-main-site/DESIGN.md + src/app/globals.css) for the
   C:/Website/Domains microsites. Byte-identical in every site at kit/kit.css.
   Do not edit per site: site-only rules go in the site's own stylesheet.
   Colors: tokens only (DESIGN.md §2). Fonts: Satoshi + JetBrains Mono only.
   ========================================================================== */

/* ---- Fonts (self-hosted, same files as exact.gg) ------------------------ */
@font-face {
  font-family: "Satoshi";
  src: url("fonts/satoshi-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback (values from exact.gg's next/font build) keeps the
   swap from shifting layout. */
@font-face {
  font-family: "Satoshi Fallback";
  src: local("Arial");
  ascent-override: 92.36%;
  descent-override: 21.95%;
  line-gap-override: 9.14%;
  size-adjust: 109.35%;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  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 Fallback";
  src: local("Arial");
  ascent-override: 75.79%;
  descent-override: 22.29%;
  line-gap-override: 0%;
  size-adjust: 134.59%;
}

/* ---- Tokens (names mirror globals.css @theme) --------------------------- */
:root {
  color-scheme: dark;
  --color-background: #0d0f12;
  --color-foreground: #ffffff;
  --color-muted: #898a8c;
  --color-accent: #ed1c24;
  --color-accent-strong: #c40d14;
  --color-line: rgb(255 255 255 / 0.08);
  --color-line-strong: #37393c;
  --color-surface: #17191c;
  --color-surface-raised: #232426;
  --scrollbar-bg: #181a1c;
  --scrollbar-thumb: rgb(237 28 36 / 0.55);

  --font-sans: "Satoshi", "Satoshi Fallback", sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;

  --wrap: 80rem;
  --gutter: 20px;
  --section: clamp(88px, 11vw, 152px);
  --nav-h: 68px;
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-console: 0 50px 70px rgb(0 0 0 / 0.65);
  --shadow-glow: 0 0 18px rgb(237 28 36 / 0.18);
  --shadow-glow-strong: 0 0 28px rgb(237 28 36 / 0.35);
  --inset-light: inset 0 1px 0 rgb(255 255 255 / 0.16);

  /* text recipes (DESIGN.md §2) */
  --fg-82: rgb(255 255 255 / 0.82);
  --fg-72: rgb(255 255 255 / 0.72);
  --fg-58: rgb(255 255 255 / 0.58);
}
@media (min-width: 640px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; }
}

/* ---- Base --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--color-background);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 700; }
[hidden] { display: none !important; }
::selection { background-color: var(--color-accent); color: var(--color-foreground); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
/* Focused controls clear the fixed 68px bar (WCAG 2.4.11) */
:focus { scroll-margin-top: calc(var(--nav-h) + 20px); }
/* In-page anchor targets land below the bar */
[id] { scroll-margin-top: calc(var(--nav-h) + 28px); }
main[tabindex="-1"]:focus,
section[tabindex="-1"]:focus { outline: none; }

* { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent-strong); }

.kit-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;
}
.kit-mono { font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.02em; }
.kit-nowrap { white-space: nowrap; }

/* ---- Layout ------------------------------------------------------------- */
.kit-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.kit-section {
  position: relative;
  padding-block: var(--section);
}
/* Section rhythm: consecutive sections share ONE gap (globals.css data-rhythm) */
.kit-hero:not(.kit-hero--ticker) + .kit-section,
.kit-section + .kit-section { padding-top: 0; }
/* Optional container-width hairline with a short red lead, centered in the
   shared gap: <div class="kit-divider" aria-hidden="true"></div> as the first
   child of a .kit-section that follows another one. */
.kit-section--divider { padding-top: calc(var(--section) * 0.5) !important; }
.kit-section--divider::before {
  content: "";
  position: absolute;
  top: calc(var(--section) * -0.5);
  left: 50%;
  width: min(100% - 2 * var(--gutter), var(--wrap) - 2 * var(--gutter));
  height: 1px;
  transform: translateX(-50%);
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) left / 64px 1px no-repeat,
    var(--color-line);
}

/* ---- Type --------------------------------------------------------------- */
.kit-h1 {
  font-size: clamp(42px, 6vw, 88px);
  line-height: 0.93;
  letter-spacing: -0.05em;
  font-weight: 900;
  text-wrap: balance;
}
.kit-h2 {
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 900;
  text-wrap: balance;
  color: var(--color-foreground);
}
/* Titles over ~36 characters step down (FAQ/FinalCta titleSize rule) */
.kit-h2--long {
  font-size: clamp(34px, 3.9vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.042em;
}
.kit-h3 {
  font-size: clamp(20px, 1.15rem + 0.3vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
  color: var(--color-foreground);
}
.kit-lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 450;
  color: var(--fg-72);
  text-wrap: pretty;
}
.kit-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
  text-wrap: pretty;
}
.kit-footnote { font-size: 12px; line-height: 1.6; color: var(--fg-58); }
/* WCAG 1.4.12: under user text-spacing overrides a long word can outgrow a
   narrow line; display type then breaks inside the word instead of being
   clipped. No effect while every word fits (the default layout). */
.kit-h1,
.kit-h2,
.kit-hero__title,
.kit-hero__kicker,
.kit-cta__title { overflow-wrap: anywhere; }
.kit-footnote strong { font-weight: 600; color: var(--fg-82); }

/* Silver gradient (logo blade): home display line / very large numerals only,
   one silver moment per viewport. */
.kit-silver {
  background-image: linear-gradient(180deg, var(--color-foreground) 18%, var(--color-muted) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline-end: 0.06em;
  margin-inline-end: -0.06em;
}
@media (forced-colors: active) {
  .kit-silver { color: CanvasText; -webkit-text-fill-color: CanvasText; background: none; }
}

/* Eyebrow: mono label led by the red skewed blade (DESIGN.md §6, §7.3) */
.kit-eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.kit-eyebrow::before {
  content: "";
  flex: none;
  width: 14px;
  height: 5px;
  margin-top: calc(0.725em - 2.5px);
  background: var(--color-accent);
  transform: skewX(35deg);
}
@media (forced-colors: active) {
  .kit-eyebrow::before { background: CanvasText; }
}
/* Over the Hall: brighter text + dark halo keeps AA over LED glow */
.kit-eyebrow--hall {
  color: var(--fg-72);
  text-shadow: 0 0 2px rgb(13 15 18 / 0.85), 0 0 10px rgb(13 15 18 / 0.9);
}

/* ---- Buttons: every button is a pill (DESIGN.md §6, §12) ---------------- */
.kit-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding-inline: 22px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms, background-color 200ms, border-color 200ms, box-shadow 200ms;
}
.kit-btn:focus-visible { outline-width: 2px; outline-style: solid; outline-offset: 3px; }
.kit-btn--sm { height: 38px; padding-inline: 20px; }
.kit-btn--lg { height: 50px; padding-inline: 28px; font-size: 15px; }
.kit-btn--icon { width: 40px; height: 40px; padding: 0; flex: none; }
.kit-btn--block { width: 100%; }
.kit-btn--arrow { padding-inline-end: 18px; }
.kit-btn--lg.kit-btn--arrow { padding-inline-end: 24px; }
.kit-btn svg { flex: none; width: 16px; height: 16px; }
.kit-btn__arrow {
  transition: transform 300ms var(--ease-entrance);
}
.kit-btn:hover .kit-btn__arrow { transform: translateX(2px); }

.kit-btn--primary {
  background-color: var(--color-accent);
  color: #fff;
  box-shadow: var(--inset-light);
}
.kit-btn--primary:hover,
.kit-btn--primary:active {
  background-color: var(--color-accent-strong);
  box-shadow: var(--inset-light), var(--shadow-glow-strong);
}
.kit-btn--primary:focus-visible { outline-color: var(--color-foreground); }
/* Sheen: a soft band of light sweeps across the red pill on hover */
.kit-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgb(255 255 255 / 0.22) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  transition: background-position 800ms var(--ease-entrance);
}
.kit-btn--primary:hover::after { background-position: 0 0; }
.kit-btn--primary { z-index: 0; }

.kit-btn--ghost {
  border-color: var(--color-line-strong);
  background-color: rgb(255 255 255 / 0.04);
  color: var(--color-foreground);
}
.kit-btn--ghost:hover {
  border-color: rgb(237 28 36 / 0.5);
  background-color: rgb(237 28 36 / 0.08);
  box-shadow: var(--shadow-glow);
}
.kit-btn--ghost:focus-visible { outline-color: var(--color-accent); }

.kit-btn--quiet {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--fg-82);
}
.kit-btn--quiet:hover { color: var(--color-foreground); }

@media (prefers-reduced-motion: reduce) {
  .kit-btn, .kit-btn__arrow, .kit-btn--primary::after { transition: none; }
  .kit-btn--primary::after { display: none; }
}
/* Phones: a label that cannot fit (long copy, text-spacing overrides) wraps
   inside the pill instead of overflowing; one-line pills keep their height. */
@media (max-width: 639.98px) {
  .kit-btn:where(:not(.kit-btn--icon, .kit-btn--quiet)) {
    height: auto;
    min-height: 42px;
    padding-block: 10px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  .kit-btn--sm:where(:not(.kit-btn--icon, .kit-btn--quiet)) { min-height: 38px; }
  .kit-btn--lg:where(:not(.kit-btn--icon, .kit-btn--quiet)) { min-height: 50px; }
}
@media (forced-colors: active) {
  .kit-btn--primary { border: 1px solid ButtonText; }
  .kit-btn--primary::after { display: none; }
  .kit-btn--primary:focus-visible { outline-color: Highlight; }
}

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

/* ---- Skip link ---------------------------------------------------------- */
.kit-skip {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 70;
  padding: 10px 20px;
  border-radius: 9999px;
  background: var(--color-accent-strong);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-80px);
  transition: transform 200ms;
}
.kit-skip:focus { transform: translateY(0); }
.kit-skip:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 2px; }

/* ---- Nav (DESIGN.md §8): transparent over the Hall, glass on scroll ----- */
.kit-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
}
.kit-nav__glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-bottom: 1px solid transparent;
  transition: background-color 300ms ease-out, border-color 300ms ease-out, backdrop-filter 300ms ease-out;
}
.kit-nav[data-scrolled] .kit-nav__glass,
.kit-nav[data-menu-open] .kit-nav__glass {
  border-bottom-color: var(--color-line);
  background-color: rgb(13 15 18 / 0.8);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
}
.kit-nav__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
}
.kit-brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  border-radius: 6px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-foreground);
}
.kit-brand:focus-visible { outline-offset: 4px; }
.kit-xmark { height: 26px; width: auto; flex: none; }
.kit-xmark .kit-xmark__a { fill: var(--color-accent); }
.kit-xmark .kit-xmark__b { fill: var(--color-accent-strong); }
.kit-xmark .kit-xmark__s0 { stop-color: var(--color-foreground); }
.kit-xmark .kit-xmark__s1 { stop-color: var(--color-muted); }

.kit-nav__links {
  display: none;
  align-items: center;
  gap: 24px;
}
.kit-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(255 255 255 / 0.78);
  white-space: nowrap;
  transition: color 200ms;
}
.kit-nav__link:hover,
.kit-nav__link[aria-current="true"] { color: var(--color-foreground); }
.kit-nav__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 14px;
  height: 3px;
  background: var(--color-accent);
  transform: translateX(-50%) skewX(35deg);
  opacity: 0;
  transition: opacity 200ms;
}
.kit-nav__link[aria-current="true"]::after { opacity: 1; }

.kit-nav__actions { display: none; align-items: center; gap: 10px; }
.kit-nav__toggle { position: relative; z-index: 2; }
.kit-nav__toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1.5px;
  margin: -0.75px 0 0 -8px;
  border-radius: 9999px;
  background: var(--color-foreground);
  transition: transform 300ms var(--ease-entrance), opacity 200ms;
}
.kit-nav__toggle span:nth-child(1) { transform: translateY(-5px); }
.kit-nav__toggle span:nth-child(3) { transform: translateY(5px); }
.kit-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.kit-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kit-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
/* Forced colors: an opaque ButtonFace circle (author system colors keep full
   alpha), so the ButtonText bars never sit on the dark Hall photo. */
@media (forced-colors: active) {
  .kit-nav__toggle,
  .kit-nav__toggle:hover { background-color: ButtonFace; border-color: ButtonText; }
  .kit-nav__toggle span { background: ButtonText; }
}
.no-js .kit-nav__toggle { display: none; }

/* Mobile sheet: full width under the bar; a disclosure, not a dialog */
.kit-menu {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-background);
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 450ms cubic-bezier(0.65, 0, 0.35, 1), opacity 0ms 450ms, visibility 0ms 450ms;
}
.kit-nav[data-menu-open] .kit-menu {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: clip-path 450ms cubic-bezier(0.65, 0, 0.35, 1), opacity 0ms, visibility 0ms;
}
.kit-menu__inner { padding-top: 12px; padding-bottom: 32px; }
.kit-menu__links { display: flex; flex-direction: column; }
.kit-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding-inline: 4px;
  border-bottom: 1px solid var(--color-line);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-82);
  transition: color 200ms;
}
.kit-menu__link:hover { color: var(--color-foreground); }
.kit-menu__link:focus-visible { outline-offset: -2px; }
.kit-menu__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.kit-menu__actions--single { grid-template-columns: minmax(0, 1fr); }
.kit-menu__actions .kit-btn { min-width: 0; height: 50px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .kit-menu, .kit-nav[data-menu-open] .kit-menu { transition: none; }
  .kit-nav__glass, .kit-nav__toggle span { transition: none; }
}

@media (min-width: 1024px) {
  .kit-nav__links { display: flex; position: absolute; left: 50%; transform: translateX(-50%); }
  .kit-nav__actions { display: flex; }
  .kit-nav__toggle, .kit-menu { display: none; }
}
/* 1024–1279: the ghost pill steps aside so four links + two pills never
   collide (it stays in the mobile sheet and returns from 1280). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .kit-nav__actions .kit-btn--ghost { display: none; }
  .kit-nav__links { gap: 22px; }
}
@media (min-width: 1280px) {
  .kit-nav__links { gap: 34px; }
}

/* ---- Hero over the Hall (DESIGN.md §7.1, PageHero) ---------------------- */
.kit-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(36rem, 86svh, 52rem);
}
/* The Hall: a still, powered-on frame of exact.gg's lite HallCanvas
   (hall.webp, 1434x900, 19,946 B — the same frame the Errors pages use),
   vanishing point at ~74% / 30% of the image. A still image, so there is no
   motion to pause (WCAG 2.2.2 does not apply). */
.kit-hall {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--color-background) url("hall.webp") 74% 30% / cover no-repeat;
}
/* hall-scrim-lite: copy bottom-left, the hall recedes to the right */
.kit-hall::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(13 15 18 / 0.82) 0%, rgb(13 15 18 / 0) 24%),
    linear-gradient(0deg, rgb(13 15 18) 0%, rgb(13 15 18 / 0.9) 16%, rgb(13 15 18 / 0.45) 46%, rgb(13 15 18 / 0) 72%),
    linear-gradient(90deg, rgb(13 15 18 / 0.78) 0%, rgb(13 15 18 / 0.5) 34%, rgb(13 15 18 / 0) 62%);
}
@media (max-width: 767.98px) {
  .kit-hall::after {
    background:
      linear-gradient(180deg, rgb(13 15 18 / 0.82) 0%, rgb(13 15 18 / 0) 20%),
      linear-gradient(0deg, rgb(13 15 18) 0%, rgb(13 15 18 / 0.92) 34%, rgb(13 15 18 / 0.6) 58%, rgb(13 15 18 / 0.15) 82%);
  }
}
/* Phones (HallCanvas: canvases under 700px centre the vanishing point): the
   frame is painted from ::before with its vanishing point (74% / 30% of the
   image) on the hero's centre line, 104px from the top: under the bar and
   above every eyebrow (the copy starts at 144px or lower), as on exact.gg's
   404 page. The box runs from above the hero to its bottom edge
   (0.7 x height = hero - 104px); min-width keeps the right edge covered on
   short, wide heroes (0.26 x 192.4% = 50%). */
@media (max-width: 699.98px) {
  .kit-hall { background-image: none; }
  .kit-hall::before {
    --hall-h: calc((100% - 104px) / 0.7);
    content: "";
    position: absolute;
    top: calc(104px - 0.3 * var(--hall-h));
    left: 50%;
    height: var(--hall-h);
    aspect-ratio: 1434 / 900;
    min-width: 192.4%;
    background: url("hall.webp") 74% 30% / cover no-repeat;
    transform: translateX(-74%);
  }
}
@media (forced-colors: active) {
  .kit-hall { background-image: none; }
  .kit-hall::before,
  .kit-hall::after { display: none; }
}
/* A soft red light pooling behind the headline (404-page numerals glow) */
.kit-hero__glow {
  position: absolute;
  z-index: -1;
  left: -10%;
  bottom: 8%;
  width: min(46rem, 110%);
  height: 60%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(237 28 36 / 0.13), transparent);
}
.kit-hero__inner {
  padding-top: 144px;
  padding-bottom: max(72px, calc(var(--section) * 0.72));
}
.kit-hero--ticker .kit-hero__inner { padding-bottom: 48px; }
@media (min-width: 768px) {
  .kit-hero__inner { padding-top: 176px; }
}
.kit-hero__eyebrow-row { display: flex; align-items: center; gap: 16px; }
/* the hairline with a red lead after the eyebrow (404 page) */
.kit-hero__rule {
  position: relative;
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.08), transparent);
}
.kit-hero__rule::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40px;
  background: var(--color-accent);
  box-shadow: var(--shadow-glow);
}
@media (min-width: 640px) {
  .kit-hero__rule::before { width: 56px; }
}
.kit-hero__title {
  margin-top: 24px;
  color: var(--color-foreground);
  font-weight: 900;
}
.kit-hero__eyebrow-row + .kit-hero__title { margin-top: 24px; }
.kit-hero__title:first-child { margin-top: 0; }
/* One headline line rising out of its mask (RiseLine). Transform only, so
   the H1 is opaque from the first frame (LCP-safe, DESIGN.md §9). 0.2em of
   room under each line (RiseLine kicker room): Satoshi's p/g descenders
   reach ~0.24em below the baseline, which sits inside that room. */
.kit-rise { display: block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.kit-rise > span { display: inline-block; }
.kit-hero__line {
  font-size: clamp(42px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.kit-hero__display {
  font-size: clamp(56px, 15vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.06em;
  margin-top: 0.04em;
}
.kit-hero__display > span { padding-bottom: 0.14em; }
/* a display line longer than ~12 characters */
.kit-hero__display--long { font-size: clamp(44px, 7.4vw, 104px); }
.kit-hero__lede { margin-top: 24px; max-width: 42rem; }
/* hall-halo: copy that can cross the light strips keeps AA on phones */
.kit-hero__lede,
.kit-hero__kicker,
.kit-ticker__label {
  text-shadow: 0 0 2px rgb(13 15 18 / 0.85), 0 0 10px rgb(13 15 18 / 0.9);
}
@media (min-width: 768px) {
  .kit-hero__lede { margin-top: 28px; }
}
.kit-hero__actions { margin-top: 36px; }

/* Split hero: copy 7/12 + console 5/12 from lg (the 404 page layout) */
.kit-hero__grid { display: grid; gap: 48px 32px; align-items: end; }
@media (min-width: 1024px) {
  .kit-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .kit-hero__grid > :first-child { grid-column: span 7; }
  .kit-hero__grid > :last-child { grid-column: span 5; }
}
@media (min-width: 1280px) {
  .kit-hero__grid { column-gap: 40px; }
}

/* Giant numerals (as210097.com; the 404 page's numerals) */
/* Sized from the viewport down to 280px (no fixed floor), so the one
   unbreakable token fits its mask even with text-spacing overrides. */
.kit-numerals {
  font-size: clamp(36px, calc(15vw - 2px), 176px);
  line-height: 0.82;
  letter-spacing: -0.065em;
  font-weight: 900;
  margin-left: -0.05em;
}
.kit-hero__kicker {
  margin-top: 28px;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.042em;
  font-weight: 800;
  color: var(--color-foreground);
  text-wrap: balance;
}

/* Metric band pinned to the hero's bottom edge (PriceTicker) */
.kit-ticker {
  position: relative;
  border-block: 1px solid var(--color-line);
  background: rgb(23 25 28 / 0.6);
}
.kit-ticker__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 639.98px) {
  .kit-ticker .kit-wrap { padding-inline: 0; }
}
.kit-ticker__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 14px 8px;
  text-align: center;
}
.kit-ticker__cell + .kit-ticker__cell { border-left: 1px solid var(--color-line); }
.kit-ticker__value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-foreground);
}
.kit-ticker__label { font-size: 12px; line-height: 1.35; color: rgb(255 255 255 / 0.65); }
.kit-ticker__cell strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-foreground); }
@media (min-width: 640px) {
  .kit-ticker__cell { flex-direction: row; align-items: baseline; gap: 10px; padding: 18px 12px; }
  .kit-ticker__value { font-size: 16px; }
  .kit-ticker__label { font-size: 14px; }
}
/* Text variant (hostus.co hero rail): title + note per cell, left aligned */
.kit-ticker--text .kit-ticker__list { grid-template-columns: minmax(0, 1fr); }
.kit-ticker--text .kit-ticker__cell {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  text-align: left;
  padding: 16px var(--gutter);
}
.kit-ticker--text .kit-ticker__cell + .kit-ticker__cell { border-left: 0; border-top: 1px solid var(--color-line); }
@media (min-width: 640px) {
  .kit-ticker--text .kit-ticker__cell { padding-inline: 0; }
}
@media (min-width: 768px) {
  .kit-ticker--text .kit-ticker__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kit-ticker--text .kit-ticker__cell { padding: 20px 24px; }
  .kit-ticker--text .kit-ticker__cell:first-child { padding-left: 0; }
  .kit-ticker--text .kit-ticker__cell + .kit-ticker__cell { border-top: 0; border-left: 1px solid var(--color-line); }
}

/* ---- Section heading (SectionHeading: split | left | center) ----------- */
.kit-heading {
  display: grid;
  gap: 20px 56px;
}
.kit-heading > .kit-eyebrow { margin-bottom: 4px; }
.kit-heading__title { max-width: 56rem; }
.kit-heading__lede { max-width: 36rem; }
@media (min-width: 1024px) {
  .kit-heading--split.kit-heading--has-lede {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22.5rem);
    align-items: end;
  }
  .kit-heading--split.kit-heading--has-lede > .kit-eyebrow { grid-column: 1 / -1; }
  .kit-heading--split .kit-heading__lede { padding-bottom: 0.35em; }
}
.kit-heading--left { max-width: 48rem; justify-items: start; }
.kit-heading--center { max-width: 48rem; margin-inline: auto; justify-items: center; text-align: center; }
.kit-heading--center .kit-heading__lede { max-width: 42rem; text-wrap: balance; }
.kit-heading__lede > .kit-btn,
.kit-heading__lede > .kit-actions { margin-top: 24px; }
.kit-heading__aside { justify-self: start; }
@media (min-width: 1024px) {
  .kit-heading__aside { grid-column: 1 / -1; }
}
.kit-heading + * { margin-top: 56px; }
@media (min-width: 768px) {
  .kit-heading + * { margin-top: 64px; }
}

/* ---- Surfaces ----------------------------------------------------------- */
.kit-panel {
  position: relative;
  border: 1px solid var(--color-line-strong);
  border-radius: 16px;
  background: var(--color-surface);
}
/* 1px top highlight across the middle 60% of the top edge */
.kit-highlight-top { position: relative; }
.kit-highlight-top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.4), transparent);
}
/* Interactive tiles: border warms to accent/40, red bloom from bottom-left */
.kit-card-glow { isolation: isolate; transition: border-color 300ms ease; }
.kit-card-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 95% at 0% 100%, rgb(237 28 36 / 0.2) 0%, rgb(237 28 36 / 0.07) 42%, transparent 74%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.kit-card-glow:hover,
.kit-card-glow:focus-within { border-color: rgb(237 28 36 / 0.4); }
.kit-card-glow:hover::before,
.kit-card-glow:focus-within::before { opacity: 1; }

/* The blade marker: eyebrow blade at list size (PricingCard / BladeMark) */
.kit-bullets { display: grid; gap: 12px; }
.kit-bullets > li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fg-82);
  text-wrap: pretty;
}
.kit-bullets > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.725em - 2px);
  width: 10px;
  height: 4px;
  background: var(--color-accent);
  transform: skewX(35deg);
}
.kit-bullets--quiet > li::before { background: rgb(255 255 255 / 0.5); }
@media (forced-colors: active) {
  .kit-bullets > li::before { background: CanvasText; }
}

/* Spec panel: features as an even hairline panel (ValueGrid SpecPanel) */
.kit-specpanel {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: 16px;
  background: var(--color-line);
}
@media (min-width: 640px) {
  .kit-specpanel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .kit-specpanel--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .kit-specpanel--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kit-spec {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--color-surface);
}
@media (min-width: 640px) { .kit-spec { padding: 28px; } }
@media (min-width: 1024px) { .kit-spec { padding: 32px; } }
/* a cell without a stat leads with the blade alone */
.kit-spec--blade::before {
  content: "";
  width: 14px;
  height: 5px;
  margin: 6px 0 28px;
  background: var(--color-accent);
  transform: skewX(35deg);
}
.kit-spec__mark {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-line);
}
.kit-spec__mark::after {
  content: "";
  width: 14px;
  height: 5px;
  margin-bottom: 6px;
  background: var(--color-accent);
  transform: skewX(35deg);
}
.kit-spec__stat {
  font-family: var(--font-mono);
  font-size: clamp(32px, 3vw, 44px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--color-foreground);
  white-space: nowrap;
}
.kit-spec__unit { margin-left: 6px; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--color-muted); }
.kit-spec .kit-body { margin-top: 10px; }
.kit-spec__sub { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }

/* Tile grid (calm, equal tiles: 1 / 2 from md / 3 from lg, DESIGN.md §4) */
.kit-tiles { display: grid; gap: 20px; }
@media (min-width: 768px) { .kit-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kit-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.kit-tile { display: flex; flex-direction: column; padding: 24px; }
@media (min-width: 640px) { .kit-tile { padding: 28px; } }
@media (min-width: 1024px) { .kit-tile { padding: 32px; } }
.kit-tile > .kit-body { margin-top: 10px; }
.kit-tile > .kit-specsheet { margin-top: auto; padding-top: 24px; }

/* Hairline spec sheet: label muted, value mono (DESIGN.md §5) */
.kit-specsheet { display: grid; }
.kit-specsheet > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-block: 12px;
  border-top: 1px solid var(--color-line);
}
.kit-specsheet > div:first-child { border-top: 0; }
.kit-specsheet dt { font-size: 14px; color: var(--color-muted); }
.kit-specsheet dd { font-family: var(--font-mono); font-size: 14px; color: var(--color-foreground); overflow-wrap: anywhere; }
.kit-specsheet a { text-decoration: underline; text-decoration-color: rgb(237 28 36 / 0.5); text-underline-offset: 3px; border-radius: 4px; }
.kit-specsheet a:hover { text-decoration-color: var(--color-accent); }

/* ---- Console window (ConsoleFrame) — the ONLY place for the blade cut --- */
.kit-console { position: relative; isolation: isolate; min-width: 0; }
.kit-console__plate {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 16px;
  box-shadow: var(--shadow-console);
}
.kit-console__window {
  --cut: 20px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: 16px 0 16px 16px;
  background: var(--color-surface);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
@media (min-width: 640px) {
  .kit-console__window { --cut: 28px; }
}
.kit-console__edge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  width: var(--cut);
  height: var(--cut);
  pointer-events: none;
  background: linear-gradient(45deg, transparent calc(50% - 1px), var(--color-accent) calc(50% - 0.5px), var(--color-accent) calc(50% + 0.5px), transparent calc(50% + 1px));
  filter: drop-shadow(0 0 6px rgb(237 28 36 / 0.9));
}
.kit-console__shine {
  position: absolute;
  top: 0;
  left: 12%;
  right: 20%;
  z-index: 3;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.55), transparent);
}
.kit-console__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding-inline: 14px;
  border-bottom: 1px solid var(--color-line);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent);
}
@media (min-width: 640px) { .kit-console__bar { padding-inline: 18px; } }
.kit-console__dots { display: flex; gap: 6px; }
.kit-console__dots i { width: 9px; height: 9px; border-radius: 9999px; background: var(--color-line-strong); }
@media (min-width: 640px) { .kit-console__dots i { width: 11px; height: 11px; } .kit-console__dots { gap: 7px; } }
.kit-console__address {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 28px;
  padding-inline: 14px;
  border: 1px solid var(--color-line);
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.04);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-58);
}
.kit-console__address svg { width: 12px; height: 12px; flex: none; }
.kit-console__address span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-console__address b { font-weight: 500; color: var(--color-foreground); }
.kit-console__body { min-width: 0; }
.kit-console__section { padding: 20px 20px 18px; }
.kit-console__section + .kit-console__section { border-top: 1px solid var(--color-line); }
@media (min-width: 640px) { .kit-console__section { padding: 24px 24px 22px; } }
.kit-console__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.kit-console__label + * { margin-top: 16px; }
.kit-console__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-foreground);
}
.kit-console__brand .kit-xmark { height: 18px; }
/* Spec rows inside a console: title + note, led by the blade */
.kit-rows { display: grid; }
.kit-rows > li,
.kit-rows > div {
  position: relative;
  padding: 14px 0 14px 22px;
  border-top: 1px solid var(--color-line);
}
.kit-rows > :first-child { border-top: 0; padding-top: 0; }
.kit-rows > :last-child { padding-bottom: 0; }
.kit-rows > li::before,
.kit-rows > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(14px + 0.725em - 2px);
  width: 10px;
  height: 4px;
  background: var(--color-accent);
  transform: skewX(35deg);
}
.kit-rows > :first-child::before { top: calc(0.725em - 2px); }
.kit-rows strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-foreground); }
.kit-rows p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--color-muted); }

/* Photo inside a console: monochrome + red grade, so it adds no new hue */
.kit-photo { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-background); }
.kit-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(0.72); }
.kit-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  mix-blend-mode: multiply;
  opacity: 0.32;
  pointer-events: none;
}

/* ---- Split section (text + console) ------------------------------------ */
.kit-split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) {
  .kit-split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; }
  .kit-split > :first-child { grid-column: span 6; }
  .kit-split > :last-child { grid-column: span 6; }
  .kit-split--console-first > :first-child { order: 0; }
}
.kit-split__copy > * + * { margin-top: 20px; }
.kit-split__copy > .kit-eyebrow + .kit-h2 { margin-top: 20px; }
.kit-split__copy > .kit-actions { margin-top: 32px; }

/* ---- Plans: one connected panel (Pricing / PlanGrid) -------------------- */
.kit-plans-stage { position: relative; isolation: isolate; }
.kit-plans-stage::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -64px;
  height: 256px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgb(237 28 36 / 0.14), transparent 72%);
  filter: blur(40px);
}
.kit-plans {
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--color-surface), rgb(23 25 28 / 0.6));
  box-shadow: var(--shadow-console);
}
.kit-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 24px 28px;
  transition: background-color 300ms;
}
.kit-plan + .kit-plan { border-top: 1px solid var(--color-line); }
.kit-plan:hover { background-color: rgb(255 255 255 / 0.025); }
@media (min-width: 640px) { .kit-plan { padding-inline: 32px; } }
@media (min-width: 1024px) {
  .kit-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr auto;
  }
  .kit-plans--noprice { grid-template-rows: auto 1fr auto; }
  .kit-plan {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    padding: 36px 32px 32px;
  }
  .kit-plans--noprice .kit-plan { grid-row: span 3; }
  .kit-plan + .kit-plan { border-top: 0; border-left: 1px solid var(--color-line); }
}
/* red edge drawing in across the top on hover (equal-emphasis panels) */
.kit-plan::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  right: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-entrance);
}
.kit-plan:hover::before,
.kit-plan:focus-within::before { transform: scaleX(1); }
.kit-plans:has(.kit-plan--featured) .kit-plan:not(.kit-plan--featured)::before { background: rgb(255 255 255 / 0.35); }
/* featured only where the content already marks it (DESIGN.md §6, §12) */
.kit-plan--featured { background: linear-gradient(180deg, rgb(237 28 36 / 0.09), rgb(237 28 36 / 0.03), transparent); }
.kit-plan--featured::before { transform: scaleX(1); box-shadow: 0 0 14px var(--color-accent); }
.kit-plan__head { min-width: 0; }
.kit-plan__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding-inline: 10px;
  border: 1px solid var(--color-line-strong);
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-82);
}
.kit-plan__badge::before {
  content: "";
  width: 10px;
  height: 4px;
  background: rgb(255 255 255 / 0.5);
  transform: skewX(35deg);
}
.kit-plan--featured .kit-plan__badge { border-color: rgb(237 28 36 / 0.45); background: rgb(237 28 36 / 0.1); color: var(--color-foreground); }
.kit-plan--featured .kit-plan__badge::before { background: var(--color-accent); }
.kit-plan__name {
  margin-top: 16px;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-foreground);
  text-wrap: balance;
}
.kit-plan__desc { margin-top: 8px; max-width: 36ch; font-size: 15px; line-height: 1.5; color: var(--color-muted); text-wrap: pretty; }
.kit-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: clamp(52px, 5.2vw, 72px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--color-foreground);
}
.kit-plan__price .kit-plan__amount::first-letter {
  margin-right: 0.08em;
  vertical-align: 0.98em;
  font-size: 0.44em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--fg-72);
}
.kit-plan__cadence { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--color-muted); }
/* Regular price above the plan price, struck through with an angled red line
   (main-site PricingCard). Forced colors drop the painted line; the native
   line-through of <s> carries the meaning instead. */
.kit-plan__regular {
  flex-basis: 100%;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--color-muted);
}
.kit-plan__regular s { position: relative; text-decoration: none; }
.kit-plan__regular s::after {
  content: "";
  position: absolute;
  inset-inline: -4px;
  top: 50%;
  height: 2px;
  background: var(--color-accent);
  transform: translateY(-50%) rotate(-9deg);
  pointer-events: none;
}
@media (forced-colors: active) {
  .kit-plan__regular s { text-decoration: line-through; }
  .kit-plan__regular s::after { display: none; }
}
.kit-plan__features { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-line); align-content: start; }
.kit-plan__features > li::before { background: rgb(255 255 255 / 0.5); }
.kit-plan--featured .kit-plan__features > li::before { background: var(--color-accent); }
.kit-plan__cta { margin-top: auto; padding-top: 32px; }
.kit-plan__cta .kit-btn { width: 100%; }
/* Column hover warms the ghost CTA only in a panel without a featured plan;
   beside a featured plan it stays quiet, so that plan is the one lit CTA
   (PricingCard). Hovering the button itself still warms it. */
.kit-plans:not(:has(.kit-plan--featured)) .kit-plan:hover .kit-btn--ghost { border-color: rgb(237 28 36 / 0.45); box-shadow: var(--shadow-glow); }
/* md to lg: each plan is a two-column row (PricingCard md:grid-cols-2):
   name, price and CTA on the left, features on the right. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .kit-plan {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: 40px;
  }
  .kit-plan__head { grid-column: 1; grid-row: 1; }
  .kit-plan__price { grid-column: 1; grid-row: 2; }
  .kit-plan__features { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding-top: 4px; border-top: 0; }
  .kit-plan__cta { grid-column: 1; grid-row: 3; align-self: end; }
}

/* ---- Compare table (CompareTable spec sheet) --------------------------- */
.kit-compare {
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: 16px;
  background: var(--color-surface);
}
.kit-compare table { width: 100%; border-collapse: collapse; text-align: left; table-layout: fixed; }
.kit-compare thead tr { background: rgb(13 15 18 / 0.4); border-bottom: 1px solid var(--color-line-strong); }
.kit-compare thead th {
  padding: 22px 28px;
  vertical-align: bottom;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-foreground);
}
.kit-compare thead th:first-child { width: 24%; font-weight: 500; color: var(--color-muted); }
.kit-compare th + th,
.kit-compare td { border-left: 1px solid var(--color-line); }
.kit-compare tbody tr { transition: background-color 200ms; }
.kit-compare tbody tr:hover { background: rgb(255 255 255 / 0.02); }
.kit-compare tbody tr + tr { border-top: 1px solid var(--color-line); }
.kit-compare tbody th { padding: 18px 28px; font-size: 14px; font-weight: 400; color: var(--color-muted); vertical-align: top; }
.kit-compare td { padding: 18px 28px; font-size: 15px; line-height: 1.5; color: var(--color-muted); vertical-align: top; }
/* The blade hangs in the cell's left padding, so wrapped lines align with
   the text (CompareTable: Mark + text in a flex row, gap 10px). */
.kit-compare td.kit-compare__ours { position: relative; padding-left: 48px; color: var(--color-foreground); }
.kit-compare td.kit-compare__ours::before {
  content: "";
  position: absolute;
  left: 28px;
  top: calc(18px + 0.75em - 2px);
  width: 10px;
  height: 4px;
  background: var(--color-accent);
  transform: skewX(35deg);
}
.kit-compare th.kit-compare__ours::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 5px;
  margin-right: 10px;
  vertical-align: 0.2em;
  background: var(--color-accent);
  transform: skewX(35deg);
}
/* The site's own phone copy of the comparison (different wording, kept) */
.kit-compare-cards { display: grid; gap: 16px; }
.kit-compare-cards > article { padding: 20px; }
.kit-compare-cards h3 { margin-bottom: 12px; }
.kit-compare-cards p { padding-block: 10px; border-top: 1px solid var(--color-line); font-size: 15px; line-height: 1.5; color: var(--color-muted); }
.kit-compare-cards p:last-child { color: var(--color-foreground); }
.kit-compare-cards p strong { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.kit-compare-cards p:last-child strong { color: var(--fg-82); }
@media (max-width: 767.98px) {
  .kit-compare { display: none; }
}
@media (min-width: 768px) {
  .kit-compare-cards { display: none; }
}

/* ---- FAQ: sticky heading + hairline <details> accordion ---------------- */
.kit-faq { display: grid; gap: 48px; }
@media (min-width: 1024px) {
  .kit-faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 64px; }
  .kit-faq__head { position: sticky; top: 112px; }
}
@media (min-width: 1280px) { .kit-faq { gap: 96px; } }
.kit-faq__head { display: grid; justify-items: start; gap: 20px; }
.kit-faq__head > .kit-eyebrow { margin-bottom: 4px; }
.kit-faq__list { border-top: 1px solid var(--color-line); interpolate-size: allow-keywords; }
.kit-faq__item { border-bottom: 1px solid var(--color-line); }
.kit-faq__item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
  border-radius: 4px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(17px, 1.45vw, 19.5px);
  line-height: 1.375;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: rgb(255 255 255 / 0.9);
  transition: color 200ms;
}
.kit-faq__item > summary::-webkit-details-marker { display: none; }
.kit-faq__item > summary:hover,
.kit-faq__item[open] > summary { color: var(--color-foreground); }
.kit-faq__item > summary:focus-visible { outline-offset: 4px; }
.kit-faq__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin-top: -2px;
  border: 1px solid var(--color-line-strong);
  border-radius: 9999px;
  color: var(--color-foreground);
  transition: border-color 300ms, background-color 300ms, color 300ms;
}
.kit-faq__icon svg { width: 16px; height: 16px; transition: transform 400ms var(--ease-entrance); }
.kit-faq__item > summary:hover .kit-faq__icon { border-color: rgb(237 28 36 / 0.45); }
.kit-faq__item[open] .kit-faq__icon { border-color: rgb(237 28 36 / 0.55); background: rgb(237 28 36 / 0.1); color: var(--color-accent); }
.kit-faq__item[open] .kit-faq__icon svg { transform: rotate(45deg); }
.kit-faq__answer { max-width: 46em; padding: 0 24px 28px 0; font-size: 16px; line-height: 1.625; color: var(--color-muted); text-wrap: pretty; }
@media (min-width: 640px) { .kit-faq__answer { padding-right: 56px; } }
@supports selector(::details-content) {
  .kit-faq__item::details-content {
    height: 0;
    overflow: clip;
    transition: height 400ms var(--ease-entrance), content-visibility 400ms allow-discrete;
  }
  .kit-faq__item[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-faq__item::details-content, .kit-faq__icon, .kit-faq__icon svg { transition: none; }
}

/* ---- Final CTA band (FinalCta backdrop="none": a red horizon glow) ----- */
.kit-cta { isolation: isolate; overflow: clip; text-align: center; }
/* The light pools under the actions and fades out before the section's
   edges, so the band never ends on a hard line when a section follows it. */
.kit-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(46% 40% at 50% 68%, rgb(237 28 36 / 0.15), transparent 72%);
}
.kit-section + .kit-cta::before { inset: 0 0 calc(var(--section) * 0.4); }
.kit-cta__inner { display: flex; flex-direction: column; align-items: center; }
.kit-cta__mark { height: clamp(72px, 9vw, 120px); width: auto; margin-bottom: 40px; }
.kit-cta__inner > .kit-eyebrow { margin-bottom: 24px; }
.kit-cta__title {
  max-width: 11.5ch;
  font-size: clamp(50px, 8.2vw, 132px);
  line-height: 0.88;
  letter-spacing: -0.058em;
  font-weight: 900;
  text-wrap: balance;
}
.kit-cta__title--long { max-width: 18ch; font-size: clamp(40px, 6vw, 92px); line-height: 0.94; letter-spacing: -0.05em; }
.kit-cta__text { max-width: 52ch; margin-top: 32px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; color: rgb(255 255 255 / 0.8); text-wrap: pretty; }
.kit-cta__actions { margin-top: 40px; justify-content: center; }
@media (max-width: 639.98px) {
  .kit-cta__actions { flex-direction: column; align-items: stretch; width: 100%; }
}

/* ---- Footer ------------------------------------------------------------- */
.kit-footer { position: relative; border-top: 1px solid var(--color-line); }
.kit-footer__lead { position: absolute; top: -1px; left: var(--gutter); width: 64px; height: 1px; background: var(--color-accent); }
.kit-footer .kit-wrap { position: relative; }
.kit-footer__grid { display: grid; gap: 56px; padding-top: 64px; }
@media (min-width: 768px) { .kit-footer__grid { padding-top: 80px; } }
@media (min-width: 1024px) {
  .kit-footer__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; }
}
@media (min-width: 1280px) {
  .kit-footer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.kit-footer__brandcol { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.kit-footer__statement { max-width: 34ch; font-size: 14px; line-height: 1.625; color: var(--color-muted); text-wrap: pretty; }
.kit-footer__legal { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }
.kit-social { display: flex; align-items: center; gap: 4px; margin: 8px 0 0 -10px; }
.kit-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  color: var(--color-muted);
  transition: color 200ms, background-color 200ms;
}
.kit-social a:hover,
.kit-social a:focus-visible { color: var(--color-foreground); background: rgb(35 36 38 / 0.6); }
.kit-social svg { width: 19px; height: 19px; }
.kit-footer__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
@media (min-width: 640px) { .kit-footer__groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kit-footer__groups--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .kit-footer__groups--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kit-footer__group { display: flex; flex-direction: column; min-width: 0; }
.kit-footer__heading {
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.kit-footer__group > p:not(.kit-footer__heading) { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--color-muted); text-wrap: pretty; }
.kit-footer__link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 40px;
  padding-block: 6px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.7);
  overflow-wrap: anywhere;
  transition: color 200ms;
}
.kit-footer__link:hover,
.kit-footer__link:focus-visible { color: var(--color-foreground); }
.kit-footer__link:focus-visible { outline-offset: 0; }
/* Single link row (bare footer): sits at the top of its grid cell, level
   with the brand, instead of stretching to the brand column's height. */
.kit-footer__row { display: flex; flex-wrap: wrap; align-self: start; gap: 0 28px; }
.kit-footer__copy {
  margin-top: 56px;
  padding-block: 28px 40px;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted);
  text-wrap: pretty;
}
@media (min-width: 768px) { .kit-footer__copy { margin-top: 64px; } }
.kit-footer--bare .kit-footer__grid { padding-bottom: 48px; }

/* ---- Reveal (DESIGN.md §9): one-shot 14px rise + fade ------------------ */
/* kit.js marks below-the-fold [data-kit-reveal] targets "pending" and flips
   them to "in" once. Without JS, under reduced motion and in print nothing is
   ever hidden. */
@keyframes kit-reveal-rise {
  from { opacity: 0; transform: translateY(14px); }
}
/* Starts below the mask's 0.2em descender room (and below the 0.82 leading
   of the giant numerals), so no ascender shows on the first frame. */
@keyframes kit-line-rise {
  from { transform: translateY(125%); }
}
@keyframes kit-fade-up {
  from { opacity: 0; transform: translateY(12px); }
}
@media screen and (prefers-reduced-motion: no-preference) {
  [data-reveal="pending"] { opacity: 0; }
  [data-reveal="in"] {
    animation: kit-reveal-rise 800ms var(--ease-entrance) backwards;
    animation-delay: var(--reveal-delay, 0ms);
  }
  .kit-rise > span { animation: kit-line-rise 1100ms var(--ease-entrance) both; animation-delay: var(--d, 0ms); }
  .kit-hero__title .kit-rise:nth-child(2) > span { --d: 90ms; }
  .kit-hero__title .kit-rise:nth-child(3) > span { --d: 180ms; }
  /* Load choreography (CSS only, done by ~1.3s): the eyebrow, actions and
     ticker fade up; the lede only settles (transform), so it never holds
     back LCP. */
  .kit-hero__eyebrow-row { animation: kit-fade-up 800ms var(--ease-entrance) 60ms both; }
  .kit-hero__lede { animation: kit-rise-in 900ms var(--ease-entrance) 300ms backwards; }
  .kit-hero__actions { animation: kit-fade-up 800ms var(--ease-entrance) 380ms both; }
  .kit-hero__aside { animation: kit-fade-up 800ms var(--ease-entrance) 300ms both; }
  .kit-hero .kit-ticker { animation: kit-fade-up 800ms var(--ease-entrance) 480ms both; }
}
@keyframes kit-rise-in {
  from { transform: translateY(12px); }
}

@media print {
  .kit-nav, .kit-menu, .kit-hall, .kit-hero__glow { display: none; }
  [data-reveal] { opacity: 1 !important; animation: none !important; }
}