/* =========================================================
   BLUE RHINO AI — design system
   Migrated from the GHL custom-code block, 2026-08-25.
   Visual identity unchanged. Every edit below is one of:
     (a) self-hosting fonts, (b) accessibility, (c) compositing
     cost, (d) the one-product layout. Nothing is restyled.
   ========================================================= */

/* ---------- FONTS — self-hosted, subset, axis-baked ----------
   SOFT is baked per file rather than kept as an axis:
   every roman rule asks for SOFT 50, every italic rule asks for
   SOFT 100, so the axis was 85KB of delta data for nothing.
   On Google Fonts the SOFT axis was absent entirely, which means
   the softness contrast in this design has never actually rendered.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-roman.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage.woff2") format("woff2");
  font-weight: 350 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette — warm ink + electric signal */
  --ink:        #05091A;
  --ink-2:      #0A1022;
  --ink-3:      #121A34;
  --ink-4:      #1A2447;
  --line:       #1F2B50;   /* decorative dividers — subtle by design */
  --line-soft:  #141C38;
  --line-strong:#475DA2;   /* NEW: interactive borders. 3.02:1 on --ink-2.
                              --line was 1.37:1, which made the ghost button
                              border effectively invisible. */

  --paper:      #F3EFE4;
  --paper-dim:  #C7C3B6;
  --muted:      #7B7C8A;

  --signal:      #0E7CE8;
  --signal-hi:   #3A97F0;
  --amber:       #E8A84A;
  --pulse:       #8BF0B0;
  --danger:      #FF7A7A;

  /* removed: --muted-deep, --signal-deep, --amber-deep — declared, never used */

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-sans:    "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 64ch;
  --container: 1200px;
}

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

html {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 16px;
  font-feature-settings: "ss01";  /* ss02/cv11 don't exist in any of these
                                     three families — they were doing nothing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(14,124,232,0.14), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(232,168,74,0.06), transparent 55%),
    var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Grain. mix-blend-mode removed: the blend forced a full-screen composite
   on every scroll frame, which is the expensive part, not the noise.
   Opacity raised to compensate so the texture reads the same. */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.16;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
}

::selection { background: var(--amber); color: var(--ink); }

/* ---------- FOCUS — the page had zero focus styling ----------
   outline-offset pushes the ring onto the page background, so it
   stays visible even around the paper-coloured primary button
   (amber is 9.13:1 on ink but only 1.80:1 on paper). */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 14px;
  transition: top 160ms ease;
}
.skip-link:focus { top: 12px; }

/* ============================================
   TYPOGRAPHY
============================================ */
.display {
  font-family: var(--font-display);
  font-weight: 450;
  font-variation-settings: "opsz" 144;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--paper);
}
.display em {
  font-style: italic;
  font-weight: 400;
  color: var(--amber);
  font-variation-settings: "opsz" 144;
}

h1.display { font-size: clamp(3rem, 8.2vw, 6.25rem); }
h2.display { font-size: clamp(2.25rem, 5.4vw, 4rem); }
h3.display { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pulse);
  vertical-align: 1px;
  margin-right: 0.65em;
  box-shadow: 0 0 0 3px rgba(139,240,176,0.12);
  animation: pulse 2.1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; box-shadow: 0 0 0 3px rgba(139,240,176,0.08); }
  50%      { opacity: 1;   box-shadow: 0 0 0 5px rgba(139,240,176,0.18); }
}

p.lede {
  font-family: var(--font-sans);
  font-weight: 380;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--paper-dim);
  max-width: var(--measure);
}
p { color: var(--paper-dim); line-height: 1.6; }

.mono { font-family: var(--font-mono); }

a { color: var(--paper); text-decoration: none; }

/* ============================================
   LAYOUT PRIMITIVES
============================================ */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }
section { position: relative; z-index: 2; }
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); border: 0; margin: 0; }

/* ============================================
   NAVIGATION
============================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 9, 26, 0.88);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
/* backdrop-filter is expensive on mobile Safari and invisible at 380px.
   Desktop only. */
@media (min-width: 821px) {
  .nav {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(5, 9, 26, 0.72);
  }
}
.nav.scrolled { border-bottom-color: var(--line-soft); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  max-width: var(--container);
  margin: 0 auto;
  gap: 28px;
}
/* Brand lockup.
   The supplied logo is a stacked lockup: rhino above, "BLUE RHINO AI"
   below in #1669C6. That wordmark is 5.38:1 on white but only 3.68:1 on
   --ink, and at a 52px nav height it renders 6.7px tall. So the mark
   stays an image and the wordmark becomes real text: 17.24:1, legible
   at any size, crisp on every display, and in the DOM rather than
   locked inside a raster. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand__mark { height: 44px; width: auto; display: block; }
.brand__word {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 36;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--paper);
  line-height: 1;
  white-space: nowrap;
}
.brand--lg { gap: 14px; }
.brand--lg .brand__mark { height: 56px; }
.brand--lg .brand__word { font-size: 23px; }
@media (max-width: 520px) {
  .brand { gap: 9px; }
  .brand__mark { height: 34px; }
  .brand__word { font-size: 16.5px; }
  .brand--lg .brand__mark { height: 44px; }
  .brand--lg .brand__word { font-size: 20px; }
}

.nav__links { display: flex; gap: 30px; align-items: center; }
/* :not(.btn) matters. Without it this rule (0,1,1) outranks .btn--primary
   (0,1,0) and paints the nav CTA --paper-dim on a --paper background:
   1.53:1, effectively invisible. That bug is live on the GHL site today —
   the author wrote :not(.btn) in the mobile media query below but not here. */
.nav__links a:not(.btn) { font-size: 14px; color: var(--paper-dim); transition: color 180ms ease; }
.nav__links a:not(.btn):hover { color: var(--paper); }
@media (max-width: 820px) { .nav__links a:not(.btn) { display: none; } }

/* ============================================
   BUTTONS
============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 180ms ease;
  white-space: nowrap;
}
.btn--primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--primary:hover {
  background: var(--amber);
  border-color: var(--amber);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(232,168,74,0.5);
}
/* was var(--line) at 1.37:1 — the secondary CTA had a border you
   could not see. --line-strong is 3.02:1, the WCAG UI minimum. */
.btn--ghost { background: transparent; color: var(--paper); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--signal-hi); color: var(--paper); background: rgba(14,124,232,0.08); }
.btn--sm { padding: 8px 14px; font-size: 13px; }
.btn svg { width: 14px; height: 14px; }

/* ============================================
   HERO
============================================ */
.hero { padding: 84px 0 120px; position: relative; overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 80px;
  align-items: end;
}
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding: 48px 0 80px; }
}
.hero__eyebrow { margin-bottom: 28px; }
.hero h1 { margin: 0 0 26px; }
.hero .lede { margin: 0 0 36px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero__sub {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* Decision engine card */
.decision-card {
  position: relative;
  background: linear-gradient(180deg, rgba(14,124,232,0.06), transparent 30%), var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(14,124,232,0.05),
    0 40px 100px -30px rgba(14,124,232,0.22),
    0 20px 50px -20px rgba(0,0,0,0.6);
  transform: perspective(1400px) rotateY(-3deg) rotateX(2deg);
  transform-origin: center center;
}
.decision-card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  opacity: 0.55;
}
.dc__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.dc__header-l {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--paper-dim);
}
/* was a pulsing green "live" dot. The console is a sample, so a live
   indicator next to the word "sample" contradicts itself. Static amber. */
.dc__header-l .status {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(232,168,74,0.12);
}
.dc__dots { display: flex; gap: 5px; }
.dc__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.dc__body {
  padding: 20px 22px 24px;
  font-family: var(--font-mono);
  font-size: 13px; line-height: 1.75;
  color: var(--paper-dim);
  min-height: 290px;
}
.dc__body .k { color: var(--signal-hi); }
.dc__body .g { color: var(--pulse); }
.dc__body .a { color: var(--amber); }
.dc__body .dim { color: var(--muted); }
.dc__body .hi { color: var(--paper); }
.dc__row { display: flex; justify-content: space-between; gap: 12px; }
.dc__row span:last-child { text-align: right; }
.dc__rec {
  margin-top: 12px; padding: 12px 14px;
  background: rgba(232,168,74,0.06);
  border: 1px solid rgba(232,168,74,0.22);
  border-radius: var(--radius-sm);
  color: var(--paper); font-size: 12.5px;
}
.dc__rec b { color: var(--amber); font-weight: 500; }
.caret {
  display: inline-block; width: 8px; height: 14px;
  background: var(--signal); vertical-align: -2px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 960px) { .decision-card { transform: none; } }

/* ============================================
   SECTION HEADERS
============================================ */
.section-head { margin-bottom: 64px; max-width: 780px; }
.section-head .eyebrow { margin-bottom: 18px; display: block; }
.section-head h2 { margin: 0 0 18px; }
.section-head p.lede { max-width: var(--measure); }
.sec { padding: 110px 0; }
@media (max-width: 720px) { .sec { padding: 72px 0; } }

/* ============================================
   PRODUCTS
   One product ships today. The grid is written so that adding the
   parked section back (config.json -> "sap": true) restores two
   columns without touching this file.
============================================ */
.products { display: grid; grid-template-columns: 1fr; gap: 20px; }
.products.products--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .products.products--two { grid-template-columns: 1fr; } }

.product {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px 30px;
  background: var(--ink-2);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform 300ms ease, border-color 300ms ease;
}
.product::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(500px 220px at 90% -20%, rgba(14,124,232,0.22), transparent 60%);
  opacity: 0.6; pointer-events: none;
  transition: opacity 300ms ease;
}
.product:hover { transform: translateY(-3px); border-color: var(--ink-4); }
.product:hover::before { opacity: 1; }
.product--amber::before {
  background: radial-gradient(500px 220px at 90% -20%, rgba(232,168,74,0.18), transparent 60%);
}
.product__tag {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px; position: relative; z-index: 1;
}
.product__tag .eyebrow { color: var(--paper-dim); }
.product h3 {
  margin: 0 0 16px;
  font-family: var(--font-display); font-weight: 450;
  font-variation-settings: "opsz" 72;
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  letter-spacing: -0.02em; line-height: 1.02;
  color: var(--paper); position: relative; z-index: 1;
}
.product h3 em {
  font-style: italic; color: var(--signal-hi); font-weight: 400;
  font-variation-settings: "opsz" 72;
}
.product--amber h3 em { color: var(--amber); }
.product p { margin: 0 0 22px; font-size: 15px; max-width: 42ch; position: relative; z-index: 1; }

.product__list {
  list-style: none; padding: 0; margin: 0 0 32px;
  border-top: 1px solid var(--line-soft);
  position: relative; z-index: 1;
}
/* With one product the card is full width, so the feature list runs
   two-up on desktop rather than leaving a long thin column. */
@media (min-width: 900px) {
  .products:not(.products--two) .product__list {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 36px; border-top: 0;
  }
  .products:not(.products--two) .product__list li:nth-child(-n+2) {
    border-top: 1px solid var(--line-soft);
  }
  .products:not(.products--two) .product p { max-width: 62ch; }
}
.product__list li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  padding: 14px 0; font-size: 14.5px; color: var(--paper);
  border-bottom: 1px solid var(--line-soft); align-items: start;
}
.product__list li svg { width: 16px; height: 16px; color: var(--signal-hi); flex-shrink: 0; margin-top: 3px; }
.product--amber .product__list li svg { color: var(--amber); }
.product__list li .sub {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  display: block; margin-top: 3px; letter-spacing: 0.02em;
}
.product__cta { margin-top: auto; display: flex; gap: 12px; align-items: center; position: relative; z-index: 1; }

/* ============================================
   STACK
============================================ */
.stack {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); overflow: hidden;
}
@media (max-width: 900px) { .stack { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stack { grid-template-columns: 1fr; } }
.stack__cell {
  background: var(--ink-2); padding: 30px 26px 28px; min-height: 180px;
  display: flex; flex-direction: column; gap: 14px; position: relative;
  transition: background 280ms ease;
}
.stack__cell:hover { background: var(--ink-3); }
.stack__num { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }
.stack__h {
  font-family: var(--font-display); font-weight: 450;
  font-variation-settings: "opsz" 36;
  font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.015em;
  color: var(--paper); margin: 0;
}
.stack__p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--paper-dim); }
.stack__cell .metric {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--signal-hi); margin-top: auto; letter-spacing: 0.04em;
}

/* ============================================
   FOUNDERS  (replaced the cost-per-lead tiles)
   Two equal cards on purpose. This site previously credited one
   co-founder and not the other; asymmetric styling would repeat that
   in a subtler way. Neither card carries a logo for the same reason.
============================================ */
.founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 860px) { .founders { grid-template-columns: 1fr; } }

.founder {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 32px 30px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 300ms ease;
}
.founder::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(460px 200px at 88% -20%, rgba(14,124,232,0.16), transparent 62%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 300ms ease;
}
.founder:hover { border-color: var(--ink-4); }
.founder:hover::before { opacity: 1; }

/* Both portraits are colour-graded to the same recipe at build time so the
   cards stay visually equal. Do not add a portrait to one card only - this
   site previously credited one co-founder and not the other, and asymmetric
   styling repeats that in a subtler way. */
.founder__portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  margin: 0 0 26px;
  position: relative; z-index: 1;
}

.founder__name {
  font-family: var(--font-display);
  font-weight: 450;
  font-variation-settings: "opsz" 72;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper);
  margin: 0 0 8px;
  position: relative; z-index: 1;
}
.founder__role {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--amber);
  margin: 0 0 22px;
  position: relative; z-index: 1;
}
.founder__bio {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper-dim);
  position: relative; z-index: 1;
}
.founder__meta {
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: var(--muted);
  position: relative; z-index: 1;
}

/* ============================================
   OWNER-OPERATED BAND
============================================ */
.partner-band {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(32,107,61,0.10), rgba(32,107,61,0.02) 60%), var(--ink-2);
  padding: 40px 44px;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 48px; align-items: center; overflow: hidden;
}
.partner-band::before {
  content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: linear-gradient(180deg, transparent, #6BCF93, transparent);
}
@media (max-width: 820px) { .partner-band { grid-template-columns: 1fr; gap: 28px; padding: 32px 28px; } }
.partner-band__eyebrow {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 11px; color: #6BCF93; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.partner-band__eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #6BCF93; box-shadow: 0 0 0 3px rgba(107,207,147,0.15);
}
.partner-band h3 {
  font-family: var(--font-display); font-weight: 450;
  font-variation-settings: "opsz" 72;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--paper); margin: 0 0 14px;
}
.partner-band h3 em {
  font-style: italic; font-weight: 400; color: #6BCF93;
  font-variation-settings: "opsz" 72;
}
.partner-band p { margin: 0; font-size: 15.5px; max-width: 52ch; line-height: 1.55; color: var(--paper-dim); }
.partner-band__logo {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; border: 1px solid rgba(107,207,147,0.18);
  border-radius: var(--radius); background: rgba(5,9,26,0.55); min-height: 180px;
}
.partner-band__logo img { width: 100%; max-width: 360px; height: auto; display: block; }
@media (max-width: 560px) {
  .partner-band__logo { padding: 28px 16px; min-height: 140px; }
  .partner-band__logo img { max-width: 280px; }
}

/* ============================================
   NICHE
============================================ */
.niche { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 20px; }
@media (max-width: 820px) { .niche { grid-template-columns: 1fr; } }
.niche__card {
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 26px; position: relative;
}
.niche__num {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: 40px; color: var(--amber); line-height: 1;
  margin-bottom: 20px; display: block;
}
.niche__card h4 {
  font-family: var(--font-display); font-weight: 500;
  font-variation-settings: "opsz" 36;
  font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.015em;
  color: var(--paper); margin: 0 0 12px;
}
.niche__card p { margin: 0; font-size: 14.5px; }

/* ============================================
   FAQ
============================================ */
.faq__list { border-top: 1px solid var(--line-soft); }
details.faq { border-bottom: 1px solid var(--line-soft); padding: 0; }
details.faq > summary {
  list-style: none; padding: 26px 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-family: var(--font-display); font-weight: 500;
  font-variation-settings: "opsz" 36;
  font-size: clamp(1.0625rem, 1.8vw, 1.3rem);
  letter-spacing: -0.015em; color: var(--paper); line-height: 1.2;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq .plus { width: 22px; height: 22px; flex-shrink: 0; position: relative; transition: transform 220ms ease; }
details.faq .plus::before, details.faq .plus::after {
  content: ""; position: absolute; background: var(--paper-dim);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
details.faq .plus::before { width: 12px; height: 1.5px; }
details.faq .plus::after  { width: 1.5px; height: 12px; transition: transform 220ms ease; }
details.faq[open] .plus::after { transform: translate(-50%,-50%) scaleY(0); }
details.faq[open] .plus { transform: rotate(90deg); }
details.faq .faq__body { padding: 0 0 26px; max-width: var(--measure); }
details.faq .faq__body p { margin: 0 0 10px; font-size: 15px; }

/* ============================================
   CTA BAND
============================================ */
.cta-band {
  margin-top: 40px; position: relative; border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(800px 400px at 80% -20%, rgba(232,168,74,0.22), transparent 60%),
    radial-gradient(800px 400px at 10% 120%, rgba(14,124,232,0.24), transparent 60%),
    var(--ink-2);
  border: 1px solid var(--line);
  padding: 72px 56px;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><path d='M0 0 L60 60 M60 0 L0 60' stroke='%23FFFFFF' stroke-opacity='0.02' stroke-width='1'/></svg>");
}
.cta-band__inner {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
  align-items: end; position: relative; z-index: 1;
}
@media (max-width: 820px) {
  .cta-band { padding: 52px 30px; }
  .cta-band__inner { grid-template-columns: 1fr; gap: 32px; }
}
.cta-band h2 { margin: 0 0 16px; }
.cta-band p.lede { margin: 0; }
.cta-band__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cta-band__actions .btn { width: 100%; justify-content: center; padding: 14px 18px; font-size: 15px; }
.cta-band__note {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  letter-spacing: 0.04em; text-align: center; width: 100%;
}

/* ============================================
   FOOTER
============================================ */
footer.site { padding: 60px 0 40px; border-top: 1px solid var(--line-soft); margin-top: 100px; }
.foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
@media (max-width: 820px) { .foot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot { grid-template-columns: 1fr; } }
.foot h5 {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted); margin: 0 0 16px; font-weight: 500;
}
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot ul li { margin-bottom: 10px; }
.foot ul a { color: var(--paper-dim); font-size: 14px; transition: color 180ms ease; }
.foot ul a:hover { color: var(--paper); }
.foot__brand p { font-size: 14px; max-width: 34ch; margin: 14px 0 0; }
.foot__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  letter-spacing: 0.04em; gap: 16px; flex-wrap: wrap;
}
.foot__bottom a { color: var(--muted); }
.foot__bottom a:hover { color: var(--paper-dim); }

/* ============================================
   REVEAL
   Hero group paints on DOMContentLoaded; everything below the fold
   uses IntersectionObserver. Previously ALL of it waited on
   window.load, which meant a blank navy screen until the last byte.
============================================ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.hero .reveal-1 { transition-delay: 60ms; }
.hero .reveal-2 { transition-delay: 150ms; }
.hero .reveal-3 { transition-delay: 240ms; }
.hero .reveal-4 { transition-delay: 330ms; }
.hero .reveal-5 { transition-delay: 420ms; }

/* No-JS: never leave content invisible. */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .caret, .eyebrow .dot { animation: none; }
  .btn--primary:hover { transform: none; }
  .product:hover { transform: translateY(0); }
}

/* ============================================
   PRINT
   Printing the dark page gave a white sheet with light-on-white text:
   the Element wordmark is white and vanished, the proof figures washed
   out. Chiropractors print things to hand to staff and partners.
============================================ */
@media print {
  html, body { background: #fff !important; color: #111 !important; }
  body::before, .decision-card, .nav, .skip-link { display: none !important; }
  .display, .stack__h,   p, .stack__p,   .eyebrow, .metric,   .display em, .product h3 em, .niche__num { color: #8a5a00 !important; }
  .partner-band, .product, .stack__cell,   .partner-band__logo { background: #0A1022 !important; }  /* white wordmark needs it */
  .btn { border: 1px solid #333 !important; color: #111 !important; background: #fff !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
  .sec { padding: 24px 0 !important; }
}

/* Secondary conversion path: visitors who are already sold and don't want a
   call. Deliberately a text link, not a third button — three stacked buttons
   flattens the hierarchy and the demo is still the primary action. */
.cta-band__skip {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--paper-dim);
  text-align: center;
  width: 100%;
  line-height: 1.5;
}
.cta-band__skiplink {
  color: var(--signal-hi);
  border-bottom: 1px solid rgba(58,151,240,0.4);
  white-space: nowrap;
  transition: border-color 180ms ease;
}
.cta-band__skiplink:hover { border-bottom-color: var(--signal-hi); }