/* ==========================================================================
   Summit Intake Systems — styles.css  (band-rhythm port, 2026-08-17)
   Single shared stylesheet. No build step. No frameworks.
   Design language ported from 03_SIS/07_WEBSITE/10_MOCKUP_2026-08-12:
     dark hero (#060608) → LIGHT band (#f5f3ee) → dark (#0a0a0e) → GREY (#e6e3dc)
     → deep dark … with chevron dividers between bands.
   Class contracts are UNCHANGED from the previous stylesheet — every page keeps
   its markup. The section modifiers now map to the mockup's band rhythm:
       .section            standard dark  #0a0a0e  (isometric grid + gold glow)
       .section--surface   LIGHT band     #f5f3ee  (light ink)
       .section--tint      GREY band      #e6e3dc  (light ink)
       .section--dark      deep dark      #060608  (isometric grid + gold glow)
   Fonts: Inter (body) · Inter Tight (display) · JetBrains Mono (labels).
   BRAND: #060608 + #C9A14A gold · action gold #E8B654.
   CONTRAST: dark bands — text #e8e8f0 (15.2:1), secondary #9a9ab0 (7.0:1).
   Light bands — ink #14141a (15.9:1), muted #56565f (6.5:1), gold #8a6a1e (5.2:1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. SELF-HOSTED FONTS (2026-08-18 — replaces the Google Fonts CDN links).
   Variable woff2, latin subset, font-display swap. One file per family.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/inter-tight-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* dark scale */
  --ink-000: #060608;  --ink-050: #0a0a0e;  --ink-100: #111117;
  --ink-150: #17171f;  --ink-200: #1e1e28;  --ink-300: #2a2a38;
  --ink-400: #3a3a4a;  --ink-500: #5a5a6e;

  /* light bands */
  --lt-000: #f5f3ee;   --lt-100: #e6e3dc;   --lt-card: #fbfaf7;
  --lt-ink: #14141a;   --lt-mute: #56565f;  --lt-faint: #6d6a63;
  --lt-border: #d3cec2;

  /* brand */
  --brand: #c9a14a;        --brand-hover: #e0c878;
  --brand-dim: rgba(201,161,74,.15);
  --brand-glow: rgba(201,161,74,.25);
  --action: #e8b654;       --action-hover: #f0c96e;
  --action-glow: rgba(232,182,84,.28);
  --brand-lt: #8a6a1e;     /* gold that passes on light bands */

  --ok: #45a37a;  --danger: #dd6a55;

  /* dark-band text */
  --text-1: #e8e8f0;  --text-2: #9a9ab0;  --text-3: #8a8aa4;

  /* legacy token names, re-pointed (do not remove — older markup may lean on them) */
  --paper: var(--ink-050);
  --surface: var(--ink-150);
  --tint: var(--ink-100);
  --line: var(--ink-300);
  --line-strong: var(--ink-400);
  --field-line: #74747f;
  --ink: var(--text-1);
  --ink-muted: var(--text-2);
  --steel: var(--ink-000);
  --steel-2: var(--ink-150);
  --steel-line: var(--ink-300);
  --on-steel: var(--text-1);
  --on-steel-mut: var(--text-2);
  --rust: var(--brand);
  --rust-deep: var(--brand-hover);
  --amber: var(--brand);
  --pine: #6fc59a;

  --focus: #8fd0ff;
  --focus-on-dark: #8fd0ff;

  /* type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --disp: "Inter Tight", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.1875rem;
  --fs-lede: clamp(1.1875rem, 1.05rem + 0.7vw, 1.4375rem);
  --fs-h4:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-h3:   clamp(1.32rem, 1.4vw + 0.7rem, 1.85rem);
  --fs-h2:   clamp(1.85rem, 2.9vw + 0.5rem, 3rem);
  --fs-h1:   clamp(2.3rem, 4.4vw + 0.5rem, 4rem);
  --fs-stat: clamp(2.25rem, 1.7rem + 2.6vw, 3.25rem);

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --tracking-eyebrow: 0.15em;

  /* spacing (4px base) */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5.5rem;

  --section-y: clamp(3.5rem, 7vw, 6.25rem);
  --container: 75rem;               /* 1200px, mockup width */
  --container-narrow: 48rem;

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow:    0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 50px -24px rgba(0, 0, 0, 0.6);

  --ease: cubic-bezier(.16,1,.3,1);
  --fast: .2s;  --med: .4s;

  --border: 1px solid var(--ink-300);
  --border-strong: 1px solid var(--ink-400);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink-000);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 1rem;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  font-family: var(--disp);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.042em; line-height: 1.03; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.032em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.018em; font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: -0.008em; font-weight: 600; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--brand-hover); text-decoration-thickness: 2px; }

strong, b { font-weight: 700; }
small { font-size: var(--fs-sm); }

img, svg { max-width: 100%; height: auto; }
svg { display: block; }
::selection { background: var(--brand); color: var(--ink-000); }

hr { border: 0; border-top: var(--border); margin: var(--sp-7) 0; }

ul, ol { padding-left: 1.15em; margin: 0 0 var(--sp-4); }
li { margin-bottom: var(--sp-2); }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -10rem;
  z-index: 300;
  background: var(--text-1);
  color: var(--ink-000);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  text-decoration: none;
  font-weight: 650;
}
.skip-link:focus { top: var(--sp-4); color: var(--ink-000); }

/* --------------------------------------------------------------------------
   3. LAYOUT — .container, .section (band system), .chev
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  position: relative;
  z-index: 2;
}
.container--narrow { max-width: var(--container-narrow); }

@media (min-width: 48em) {
  .container { padding-inline: var(--sp-6); }
}

.section {
  padding-block: var(--section-y);
  background: var(--ink-050);
  color: var(--text-1);
  position: relative;
  overflow: hidden;
}
.section--tight { padding-block: var(--sp-7); }

/* isometric grid + gold glow — DARK bands only */
.section:not(.section--surface):not(.section--tint)::before,
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 80px 80px;
}
/* Layered glow + film-grain noise, ported from the 01_LIVE_SITE hero-bg.
   Gold primary glow, faint blue + violet secondaries, desaturated fractal
   noise baked into the SVG (opacity lives in the rect, not the element). */
.section:not(.section--surface):not(.section--tint)::after,
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(760px circle at 78% 12%, rgba(201,161,74,.12), transparent 68%),
    radial-gradient(ellipse 60% 55% at 12% 85%, rgba(59,130,246,.05), transparent 62%),
    radial-gradient(ellipse 45% 40% at 42% 30%, rgba(147,51,234,.04), transparent 55%);
  background-size: 128px 128px, auto, auto, auto;
}

.section--dark { background: var(--ink-000); }

/* ── LIGHT and GREY bands ── */
.section--surface { background: var(--lt-000); color: var(--lt-ink); }
.section--tint    { background: var(--lt-100); color: var(--lt-ink); }

.section--surface h1, .section--surface h2, .section--surface h3, .section--surface h4,
.section--tint h1, .section--tint h2, .section--tint h3, .section--tint h4 { color: var(--lt-ink); }

.section--surface p, .section--tint p { color: var(--lt-mute); }
.section--surface li, .section--tint li { color: var(--lt-mute); }
.section--surface a, .section--tint a { color: var(--brand-lt); }
.section--surface a:hover, .section--tint a:hover { color: #6d5314; }
.section--surface .lede, .section--tint .lede,
.section--surface .muted, .section--tint .muted { color: var(--lt-mute); }
.section--surface hr, .section--tint hr { border-top-color: var(--lt-border); }

/* legacy dark-band scoping kept as no-ops on the new dark defaults */
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-1); }
.section--dark a { color: var(--brand); }
.section--dark a:hover { color: var(--brand-hover); }
.section--dark .eyebrow { color: var(--brand); }
.section--dark .lede, .section--dark .muted { color: var(--text-2); }

/* chevron divider — sits BETWEEN bands. Inserted markup:
   <div class="chev" style="background:PREV"><svg …><path fill="NEXT"/></svg></div>
   The -1px margins close subpixel seams against the neighbouring bands. */
.chev { line-height: 0; position: relative; z-index: 3; margin-top: -1px; margin-bottom: -1px; }
.chev svg { display: block; width: 100%; height: clamp(34px, 4.4vw, 78px); }

/* .section-head — eyebrow + h2 + lede stack at the top of a band. */
.section-head { max-width: 47.5rem; margin-bottom: clamp(2.5rem, 4.6vw, 3.625rem); }
.section-head--center { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------------------
   4. TEXT COMPONENTS — .eyebrow, .lede, .muted, .cite, .prose
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--sp-4);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
  line-height: 1.5;
}
.eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: currentColor;
  opacity: .7;
}
.section--surface .eyebrow, .section--tint .eyebrow { color: var(--brand-lt); }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: var(--sp-5);
  text-wrap: pretty;
}

.muted { color: var(--text-2); }
.small { font-size: var(--fs-sm); }

/* .cite — inline source credit printed next to a statistic. Required on every
   stat. Keep the source in the markup, never in a tooltip. */
.cite {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.65;
  color: var(--text-3);
  font-style: normal;
}
.cite--inline { display: inline; margin: 0; text-transform: none; letter-spacing: 0; }
.section--surface .cite, .section--tint .cite { color: var(--lt-faint); }
.section--dark .cite { color: var(--text-3); }

.prose { max-width: var(--container-narrow); }
.prose h2 { margin-top: var(--sp-8); }
.prose h3 { margin-top: var(--sp-6); }
.prose > *:first-child { margin-top: 0; }
.prose li { line-height: var(--lh-body); }

/* --------------------------------------------------------------------------
   5. BUTTONS — .btn, .btn-primary, .btn-ghost
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}

.btn-primary {
  background: var(--action);
  border-color: var(--action);
  color: var(--ink-000);            /* 9.6:1 on gold */
  box-shadow: 0 0 0 0 var(--action-glow);
}
.btn-primary:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: var(--ink-000);
  text-decoration: none;
  box-shadow: 0 10px 30px -6px var(--action-glow);
  transform: translateY(-1px);
}
/* band link-color rules (.section--surface a) outrank .btn-primary — pin the
   button ink explicitly on every band. */
.section--surface .btn-primary, .section--tint .btn-primary,
.section--surface .btn-primary:hover, .section--tint .btn-primary:hover { color: var(--ink-000); }

.btn-ghost {
  background: transparent;
  border-color: var(--ink-400);
  color: var(--text-1);
}
.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: transparent;
  text-decoration: none;
  transform: translateY(-1px);
}
.section--surface .btn-ghost, .section--tint .btn-ghost {
  color: var(--lt-ink);
  border-color: #b5b0a4;
}
.section--surface .btn-ghost:hover, .section--tint .btn-ghost:hover {
  border-color: var(--brand-lt);
  color: var(--brand-lt);
  background: rgba(201,161,74,.07);
}

/* legacy dark scoping — same values as base now */
.section--dark .btn-primary, .footer .btn-primary {
  background: var(--action); border-color: var(--action); color: var(--ink-000);
}
.section--dark .btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--ink-000); }
.section--dark .btn-ghost { border-color: var(--ink-400); color: var(--text-1); }
.section--dark .btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: transparent; }

.btn-block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: stretch;
}
@media (min-width: 30em) {
  .btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .btn-block { display: inline-flex; width: auto; }
}

/* --------------------------------------------------------------------------
   6. NAV — .nav   (sticky dark glass, no JS)
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(10,10,14,.85);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-3);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--sp-3);
  color: var(--text-1);
  text-decoration: none;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-right: auto;
}
.nav__brand:hover { color: var(--text-1); }
.nav__mark {
  width: 2rem; height: 2rem;
  flex: none;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(201,161,74,.3);
}
/* .nav__logo — the gold SIS wordmark (assets/img/sis-logo.png, 195x66). */
.nav__logo {
  display: block;
  height: 30px;
  width: auto;
  filter: drop-shadow(0 2px 10px rgba(201,161,74,.22));
}
.nav__brand--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.nav__brand-text { display: block; }
.nav__brand-sub {
  display: block;
  font-family: var(--mono);
  font-size: 0.54rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-3);
}
.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  order: 3;
}
.nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--sp-1);
  color: var(--text-2);
  font-weight: 500;
  font-size: var(--fs-sm);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--fast);
  white-space: nowrap;
}
.nav__list a:hover { color: var(--text-1); border-bottom-color: var(--ink-400); }
.nav__list a[aria-current="page"] {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.nav__cta { display: none; }

@media (min-width: 68em) {
  /* one-line nav: brand + 6 links + CTA. Budget re-measured for 1200px
     container on 2026-08-17 — do not add a seventh link without re-measuring. */
  .nav__list { width: auto; order: 2; gap: var(--sp-4); flex: 0 1 auto; }
  .nav__cta {
    display: inline-flex;
    order: 3;
    flex: none;
    min-height: 2.5rem;
    padding: var(--sp-2) var(--sp-5);
  }
  .nav__inner { flex-wrap: nowrap; gap: var(--sp-5); }
  .nav__brand { flex: none; }
}

/* --------------------------------------------------------------------------
   7. HERO — .hero   (deep dark band, grid + glow)
   -------------------------------------------------------------------------- */
.hero {
  background: var(--ink-000);
  color: var(--text-1);
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
.hero__inner { position: relative; }
.hero h1 { margin-bottom: var(--sp-5); }
.hero .lede { max-width: 40rem; }
.hero__aside { margin-top: var(--sp-7); }
.hero__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-3);
  max-width: 44rem;
}
.hero .eyebrow { color: var(--brand); }

/* .hero__logo — SIS wordmark at the top of the homepage hero. */
.hero__logo {
  display: block;
  height: clamp(44px, 6vw, 58px);
  width: auto;
  margin-bottom: var(--sp-5);
  filter: drop-shadow(0 4px 22px rgba(201,161,74,.28));
}

/* .hero__art — the isometric intake-circuit line art (old-site salvage),
   parked behind the hero's right column. Decorative only. */
.hero__art {
  position: absolute;
  top: -6%;
  right: -4%;
  width: min(560px, 46vw);
  height: auto;
  opacity: .3;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 45%, #000 28%, transparent 76%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 45%, #000 28%, transparent 76%);
}
@media (max-width: 61.99em) { .hero__art { display: none; } }

/* .hero--intro — one-shot entrance: logo fades/scales in, then the copy
   stack rises. Pure CSS, runs once on load, done inside 1.6s. Fully
   disabled under prefers-reduced-motion (content just sits there). */
@media (prefers-reduced-motion: no-preference) {
  .hero--intro .hero__logo {
    animation: heroLogoIn .9s var(--ease) .1s both;
  }
  .hero--intro .hero__copy > *:not(.hero__logo) {
    animation: heroRise .65s var(--ease) both;
  }
  .hero--intro .hero__copy > .eyebrow  { animation-delay: .45s; }
  .hero--intro .hero__copy > h1        { animation-delay: .55s; }
  .hero--intro .hero__copy > .lede     { animation-delay: .7s; }
  .hero--intro .hero__copy > .btn-row  { animation-delay: .8s; }
  .hero--intro .hero__copy > .hero__note,
  .hero--intro .hero__copy > .trust    { animation-delay: .9s; }
  .hero--intro .hero__aside            { animation: heroRise .8s var(--ease) .75s both; }
}
@keyframes heroLogoIn {
  from { opacity: 0; transform: translateY(12px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 62em) {
  .hero__inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--sp-9);
    align-items: start;
  }
  .hero__aside { margin-top: 0; }
}

/* .hero--dark — legacy modifier, now identical to the base hero. */
.hero--dark { background: var(--ink-000); color: var(--text-1); border-bottom: 0; }
.hero--dark .lede, .hero--dark .hero__note { color: var(--text-2); }
.hero--dark .eyebrow { color: var(--brand); }
.hero--dark a { color: var(--brand); }

/* .trust — the mono fact row under hero CTAs (ported from the mockup) */
.trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 18px;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--ink-400);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-2);
  list-style: none; padding-left: 0;
}
.trust li, .trust span { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text-2); }
.trust li::before, .trust span::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--brand);
  border-radius: 1px;
  transform: rotate(45deg);
}
.trust b { color: var(--brand); font-weight: 500; }

/* --------------------------------------------------------------------------
   8. GRIDS — .grid-2, .grid-3
   -------------------------------------------------------------------------- */
.grid-2, .grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
.grid-2 > *, .grid-3 > * { min-width: 0; }
@media (min-width: 40em) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
}
@media (min-width: 62em) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .grid-2 { gap: var(--sp-6); }
}
@media (min-width: 62em) {
  .grid-2--wide-first { grid-template-columns: 1.2fr 0.8fr; align-items: start; }
}

/* --------------------------------------------------------------------------
   9. CARD — .card (+ .tile, a card that is a link)
   -------------------------------------------------------------------------- */
.card {
  background: linear-gradient(180deg, var(--ink-150), var(--ink-100));
  border: 1px solid var(--ink-300);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: 0 18px 50px -24px rgba(0,0,0,.6);
  transition: border-color var(--med) var(--ease);
}
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--text-2); }
.card__meta {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--ink-400);
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.card--flush { padding: 0; overflow: hidden; }
.card--accent { border-left: 3px solid var(--brand); }

.section--surface .card, .section--tint .card {
  background: var(--lt-card);
  border-color: var(--lt-border);
  box-shadow: 0 16px 40px -28px rgba(20,20,26,.35);
}
.section--surface .card p, .section--tint .card p { color: var(--lt-mute); }
.section--surface .card__meta, .section--tint .card__meta {
  border-top-color: var(--lt-border);
  color: var(--lt-faint);
}
.section--dark .card {
  background: linear-gradient(180deg, var(--ink-150), var(--ink-100));
  border-color: var(--ink-300);
  color: var(--text-1);
}

/* .tile — a whole card that is one link. */
.tile {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--ink-150), var(--ink-100));
  border: 1px solid var(--ink-300);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  color: var(--text-1);
  text-decoration: none;
  box-shadow: 0 18px 50px -24px rgba(0,0,0,.6);
  transition: border-color var(--med) var(--ease), box-shadow var(--med) var(--ease), transform var(--med) var(--ease);
}
.tile:hover {
  color: var(--text-1);
  border-color: rgba(201,161,74,.45);
  box-shadow: 0 16px 44px rgba(0,0,0,.42), 0 0 26px rgba(201,161,74,.08);
  transform: translateY(-3px);
}
.tile h3 { margin-bottom: var(--sp-2); }
.tile p { color: var(--text-2); margin-bottom: var(--sp-4); }
.tile__num {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  color: var(--brand);
  margin-bottom: var(--sp-3);
  letter-spacing: 0.16em;
}
.tile__go {
  margin-top: auto;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tile:hover .tile__go { color: var(--brand-hover); }

.section--surface .tile, .section--tint .tile {
  background: var(--lt-card);
  border-color: var(--lt-border);
  color: var(--lt-ink);
  box-shadow: 0 16px 40px -28px rgba(20,20,26,.35);
}
.section--surface .tile:hover, .section--tint .tile:hover {
  color: var(--lt-ink);
  border-color: rgba(138,106,30,.4);
  box-shadow: 0 16px 40px -20px rgba(20,20,26,.3);
}
.section--surface .tile p, .section--tint .tile p { color: var(--lt-mute); }
.section--surface .tile__num, .section--tint .tile__num { color: var(--brand-lt); }
.section--surface .tile__go, .section--tint .tile__go { color: var(--brand-lt); }
.section--surface .tile:hover .tile__go, .section--tint .tile:hover .tile__go { color: #6d5314; }

/* .tile__top + .tile__icon — 2026-08-18 revamp of the six included-feature
   blocks: line-art icon chip left, mono number right. */
.tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.tile__top .tile__num { margin-bottom: 0; }
.tile__icon {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 12px;
  background: var(--brand-dim);
  border: 1px solid rgba(201,161,74,.32);
  display: grid;
  place-items: center;
  color: var(--brand);
  transition: box-shadow var(--med) var(--ease);
}
.tile:hover .tile__icon { box-shadow: 0 0 18px rgba(201,161,74,.22); }
.tile__icon svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.section--surface .tile__icon, .section--tint .tile__icon {
  background: rgba(138,106,30,.1);
  border-color: rgba(138,106,30,.3);
  color: var(--brand-lt);
}

/* .band-art — a framed illustration panel (old-site isometric line art)
   sitting beside a section head. Full-opacity, framed like a card. */
.band-art {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--ink-300);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(201,161,74,.08);
  background: var(--ink-100);
}
.band-art img { display: block; width: 100%; height: auto; }
.section-head--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
  margin-bottom: clamp(2.5rem, 4.6vw, 3.625rem);
}
.section-head--split .section-head { margin-bottom: 0; }
@media (min-width: 62em) {
  .section-head--split { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); }
}

/* .client-card — Our Work customer cards: real screenshot in a browser
   frame, then the facts. The whole card is not a link; the URL line is. */
.client-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--ink-150), var(--ink-100));
  border: 1px solid var(--ink-300);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 18px 50px -24px rgba(0,0,0,.6);
  transition: border-color var(--med) var(--ease), transform var(--med) var(--ease);
}
.client-card:hover { border-color: rgba(201,161,74,.4); transform: translateY(-3px); }
.client-card .browser { border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--ink-300); }
.client-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.client-card__body h3 { margin-bottom: 0; }
.client-card__body p { color: var(--text-2); margin-bottom: 0; }
.client-card__link {
  margin-top: auto;
  font-weight: 600;
  font-size: var(--fs-sm);
}
.section--surface .client-card, .section--tint .client-card {
  background: var(--lt-card);
  border-color: var(--lt-border);
  box-shadow: 0 16px 40px -28px rgba(20,20,26,.35);
}
.section--surface .client-card .browser, .section--tint .client-card .browser { border-bottom: 1px solid var(--lt-border); }
.section--surface .client-card__body p, .section--tint .client-card__body p { color: var(--lt-mute); }

/* .scene — "what it does for you" cross-trade scenario cards. */
.scene { position: relative; }
.scene__trade {
  display: inline-block;
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-dim);
  border: 1px solid rgba(201,161,74,.3);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  margin-bottom: var(--sp-4);
}
.section--surface .scene__trade, .section--tint .scene__trade {
  color: var(--brand-lt);
  background: rgba(138,106,30,.1);
  border-color: rgba(138,106,30,.28);
}

/* --------------------------------------------------------------------------
   10. STAT + CITE — .stat
   -------------------------------------------------------------------------- */
.stat {
  padding: var(--sp-5);
  background: linear-gradient(180deg, var(--ink-150), var(--ink-100));
  border: 1px solid var(--ink-300);
  border-left: 3px solid var(--brand);
  border-radius: var(--r);
}
.stat__num {
  display: block;
  font-family: var(--disp);
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--brand);
  margin-bottom: var(--sp-2);
}
.stat__label {
  display: block;
  font-size: var(--fs-base);
  color: var(--text-1);
  margin-bottom: var(--sp-2);
}
.section--surface .stat, .section--tint .stat {
  background: var(--lt-card);
  border-color: var(--lt-border);
  border-left-color: var(--brand-lt);
}
.section--surface .stat__num, .section--tint .stat__num { color: var(--brand-lt); }
.section--surface .stat__label, .section--tint .stat__label { color: var(--lt-ink); }
.section--dark .stat {
  background: linear-gradient(180deg, var(--ink-150), var(--ink-100));
  border-color: var(--ink-300);
  border-left-color: var(--brand);
}
.section--dark .stat__num { color: var(--brand); }
.section--dark .stat__label { color: var(--text-1); }

/* --------------------------------------------------------------------------
   11. CALLOUT — .callout
   -------------------------------------------------------------------------- */
.callout {
  background: rgba(201,161,74,.07);
  border: 1px solid rgba(201,161,74,.28);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.callout > :last-child { margin-bottom: 0; }
.callout h3 { margin-bottom: var(--sp-3); }
.callout p { color: var(--text-2); }
.callout--quiet {
  background: linear-gradient(180deg, var(--ink-150), var(--ink-100));
  border-color: var(--ink-300);
  border-left-color: var(--ink-500);
}
.section--surface .callout, .section--tint .callout {
  background: rgba(138,106,30,.07);
  border-color: rgba(138,106,30,.28);
  border-left-color: var(--brand-lt);
}
.section--surface .callout p, .section--tint .callout p { color: var(--lt-mute); }
.section--surface .callout--quiet, .section--tint .callout--quiet {
  background: var(--lt-card);
  border-color: var(--lt-border);
  border-left-color: var(--lt-faint);
}
.section--dark .callout {
  background: rgba(201,161,74,.07);
  border-color: rgba(201,161,74,.28);
  border-left-color: var(--brand);
  color: var(--text-1);
}

/* --------------------------------------------------------------------------
   12. CHECKLIST — .checklist (+ .checklist--no)
   -------------------------------------------------------------------------- */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
}
.checklist li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--sp-3);
  line-height: 1.55;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background-color: var(--brand-dim);
  border: 1px solid rgba(201,161,74,.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a14a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.checklist--no li::before {
  background-image: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  top: 0.62em;
  width: 0.85rem;
  height: 0;
  border-bottom: 3px solid var(--text-3);
}
.section--surface .checklist li::before, .section--tint .checklist li::before {
  background-color: rgba(138,106,30,.12);
  border-color: rgba(138,106,30,.3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a1e' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.section--surface .checklist--no li::before, .section--tint .checklist--no li::before {
  background: none; border: none; border-bottom: 3px solid var(--lt-faint);
}
.section--dark .checklist li::before {
  background-color: var(--brand-dim);
  border-color: rgba(201,161,74,.35);
}
.section--dark .checklist--no li::before { background: none; border: none; border-bottom: 3px solid var(--text-3); }

/* --------------------------------------------------------------------------
   13. BADGE — .badge  (factual tags only — never a trust seal)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 0.3rem var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--brand-dim);
  border: 1px solid rgba(201,161,74,.3);
  color: var(--brand);
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
}
.badge--accent { background: var(--brand-dim); border-color: rgba(201,161,74,.4); color: var(--brand-hover); }
.badge--live {
  background: rgba(69,163,122,.12);
  border-color: rgba(69,163,122,.35);
  color: var(--ok);
}
.section--surface .badge, .section--tint .badge {
  background: rgba(138,106,30,.1);
  border-color: rgba(138,106,30,.28);
  color: var(--brand-lt);
}
.section--surface .badge--live, .section--tint .badge--live {
  background: rgba(69,163,122,.1);
  border-color: rgba(52,124,92,.4);
  color: #2e7a58;
}
.section--dark .badge { background: var(--brand-dim); border-color: rgba(201,161,74,.3); color: var(--brand); }
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.badge-row li { margin: 0; }

/* --------------------------------------------------------------------------
   14. FAQ — .faq   (native disclosure, no JS)
   -------------------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--ink-300);
  max-width: 52.5rem;
}
.faq details { border-bottom: 1px solid var(--ink-300); }
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-2);
  font-family: var(--disp);
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  color: var(--text-1);
  transition: color var(--fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--brand);
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--brand); }
.faq__a {
  padding: 0 var(--sp-2) var(--sp-5);
  max-width: 44rem;
  color: var(--text-2);
  line-height: 1.7;
}
.faq__a > :last-child { margin-bottom: 0; }

.section--surface .faq, .section--tint .faq { border-top-color: var(--lt-border); }
.section--surface .faq details, .section--tint .faq details { border-bottom-color: var(--lt-border); }
.section--surface .faq summary, .section--tint .faq summary { color: var(--lt-ink); }
.section--surface .faq summary:hover, .section--tint .faq summary:hover { color: var(--brand-lt); }
.section--surface .faq summary::after, .section--tint .faq summary::after { color: var(--brand-lt); }
.section--surface .faq__a, .section--tint .faq__a { color: var(--lt-mute); }
.section--surface .faq details[open], .section--tint .faq details[open] {
  background: rgba(255,255,255,.5);
  border-radius: var(--r);
  box-shadow: 0 12px 34px -24px rgba(20,20,26,.5);
}
.section--dark .faq { border-top-color: var(--ink-300); }
.section--dark .faq details { border-bottom-color: var(--ink-300); }
.section--dark .faq summary { color: var(--text-1); }
.section--dark .faq summary::after { color: var(--brand); }
.section--dark .faq__a { color: var(--text-2); }

/* --------------------------------------------------------------------------
   15. TABLE — .table  (wrap in .table-wrap)
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink-300);
  border-radius: var(--r-lg);
  background: var(--ink-100);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  min-width: 32rem;
}
.table caption {
  text-align: left;
  padding: var(--sp-4) var(--sp-5) 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.table th, .table td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--ink-300);
  vertical-align: top;
}
.table thead th {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  background: var(--ink-150);
  border-bottom: 1px solid var(--ink-400);
}
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table th[scope="row"] { font-weight: 600; }
.table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.section--surface .table-wrap, .section--tint .table-wrap {
  border-color: var(--lt-border);
  background: var(--lt-card);
}
.section--surface .table th, .section--surface .table td,
.section--tint .table th, .section--tint .table td { border-bottom-color: var(--lt-border); }
.section--surface .table thead th, .section--tint .table thead th {
  color: var(--lt-faint);
  background: var(--lt-100);
  border-bottom-color: #c3beb1;
}
.section--surface .table caption, .section--tint .table caption { color: var(--lt-mute); }

/* --------------------------------------------------------------------------
   16. STEPS — .steps / .step
   -------------------------------------------------------------------------- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-5);
  counter-reset: step;
}
@media (min-width: 62em) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .steps--2 { grid-template-columns: repeat(2, 1fr); }
  .steps--4 { grid-template-columns: repeat(4, 1fr); }
}
.step {
  counter-increment: step;
  position: relative;
  background: linear-gradient(180deg, var(--ink-150), var(--ink-100));
  border: 1px solid var(--ink-300);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  margin: 0;
  overflow: hidden;
  transition: transform var(--med) var(--ease), border-color var(--med) var(--ease);
}
.step::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), rgba(201,161,74,.15));
}
.step:hover { transform: translateY(-3px); border-color: rgba(201,161,74,.4); }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--disp);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -0.04em;
  color: var(--brand);
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: var(--sp-2); font-size: 1.15rem; }
.step p { color: var(--text-2); margin-bottom: 0; }

.section--surface .step, .section--tint .step {
  background: var(--lt-card);
  border-color: var(--lt-border);
}
.section--surface .step:hover, .section--tint .step:hover { border-color: rgba(138,106,30,.4); }
.section--surface .step::before, .section--tint .step::before { color: var(--brand-lt); }
.section--surface .step h3, .section--tint .step h3 { color: var(--lt-ink); }
.section--surface .step p, .section--tint .step p { color: var(--lt-mute); }
.section--dark .step { background: linear-gradient(180deg, var(--ink-150), var(--ink-100)); border-color: var(--ink-300); }
.section--dark .step::before { color: var(--brand); }
.section--dark .step p { color: var(--text-2); }

/* --------------------------------------------------------------------------
   17. PRICE BLOCK — .price
   -------------------------------------------------------------------------- */
.price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.price__amount {
  font-family: var(--disp);
  font-size: var(--fs-stat);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--action);
}
.price__unit { font-size: var(--fs-md); color: var(--text-2); font-weight: 500; }
.section--surface .price__amount, .section--tint .price__amount { color: var(--brand-lt); }
.section--surface .price__unit, .section--tint .price__unit { color: var(--lt-mute); }
.section--dark .price__unit { color: var(--text-2); }

/* --------------------------------------------------------------------------
   18. CTA BAND — .cta-band
   -------------------------------------------------------------------------- */
.cta-band { text-align: left; }
.cta-band .container { max-width: var(--container-narrow); }
.cta-band h2 { margin-bottom: var(--sp-4); }
.cta-band .lede { margin-bottom: var(--sp-6); }

/* --------------------------------------------------------------------------
   19. FOOTER — .footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink-000);
  color: var(--text-2);
  border-top: 1px solid var(--ink-200);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--fs-sm);
  position: relative;
  z-index: 2;
}
.footer a { color: var(--text-2); text-decoration: none; }
.footer a:hover { color: var(--brand); }
.footer a.btn { text-decoration: none; }
.footer a.btn:hover { text-decoration: none; }
.footer .btn-primary { color: var(--ink-000); }
.footer .btn-primary:hover { color: var(--ink-000); }
.footer h2, .footer h3 {
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: var(--sp-4);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}
@media (min-width: 48em) {
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-6); }
}
.footer__brand {
  color: var(--text-1);
  font-family: var(--disp);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-3);
}
.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list li { margin-bottom: var(--sp-3); }
.footer nav .footer__list li { margin-bottom: 0; }
.footer nav .footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer__bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ink-200);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
@media (min-width: 48em) {
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__legal li { margin: 0; }

/* --------------------------------------------------------------------------
   20. FORM — sms-opt-in + contact. Light-band aware.
   -------------------------------------------------------------------------- */
.form { max-width: 34rem; }
.field { margin-bottom: var(--sp-5); }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.section--surface .field label, .section--tint .field label { color: var(--lt-ink); }
.field__hint {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-2);
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.section--surface .field__hint, .section--tint .field__hint { color: var(--lt-mute); }
.input, .textarea, .select {
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  color: var(--text-1);
  background: var(--ink-100);
  border: 2px solid var(--ink-500);
  border-radius: var(--r);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand); }
.textarea { min-height: 8rem; resize: vertical; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--text-2); }
.input::placeholder, .textarea::placeholder { color: #8b8b95; }
.section--surface .input, .section--surface .textarea, .section--surface .select,
.section--tint .input, .section--tint .textarea, .section--tint .select {
  color: var(--lt-ink);
  background: #fff;
  border-color: #8f8a7e;
}
.section--surface .input:hover, .section--tint .input:hover,
.section--surface .textarea:hover, .section--tint .textarea:hover { border-color: var(--lt-ink); }
.section--surface .input::placeholder, .section--tint .input::placeholder,
.section--surface .textarea::placeholder, .section--tint .textarea::placeholder { color: #7d7a74; }
.checkbox-field {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin-bottom: var(--sp-5);
}
.checkbox-field input {
  width: 1.5rem; height: 1.5rem;
  margin-top: 0.1rem;
  flex: none;
  accent-color: var(--brand);
}
.checkbox-field label { font-weight: 400; font-size: var(--fs-sm); margin: 0; }

/* --------------------------------------------------------------------------
   21. SMALL HELPERS
   -------------------------------------------------------------------------- */
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.rule { border: 0; border-top: var(--border-strong); margin: var(--sp-7) 0; }

@media print {
  .nav, .footer, .skip-link, .cta-band, .chev { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  .faq details { display: block; }
  .faq__a { display: block !important; }
}

/* --------------------------------------------------------------------------
   22. BROWSER FRAME — .browser  (CSS-drawn window around real text)
   -------------------------------------------------------------------------- */
.browser {
  background: var(--ink-100);
  border: 1px solid var(--ink-400);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-150);
  border-bottom: 1px solid var(--ink-300);
}
.browser__dots { display: flex; gap: var(--sp-2); flex: none; }
.browser__dots span {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--r-pill);
  background: var(--ink-400);
}
.browser__dots span:nth-child(1) { background: #ff5f57; }
.browser__dots span:nth-child(2) { background: #febc2e; }
.browser__dots span:nth-child(3) { background: #28c840; }
.browser__url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.25rem var(--sp-3);
  background: var(--ink-050);
  border: 1px solid var(--ink-300);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser__body { padding: var(--sp-5); }
.browser__body > :last-child { margin-bottom: 0; }
.browser__body p { color: var(--text-2); }
.section--surface .browser, .section--tint .browser {
  background: #fff;
  border-color: var(--lt-border);
  box-shadow: 0 22px 50px -30px rgba(20,20,26,.45);
}
.section--surface .browser__bar, .section--tint .browser__bar {
  background: var(--lt-100);
  border-bottom-color: var(--lt-border);
}
.section--surface .browser__url, .section--tint .browser__url {
  background: #fff;
  border-color: var(--lt-border);
  color: var(--lt-faint);
}
.section--surface .browser__body p, .section--tint .browser__body p { color: var(--lt-mute); }
.section--dark .browser { background: var(--ink-100); border-color: var(--ink-400); }
.section--dark .browser__bar { background: var(--ink-150); border-bottom-color: var(--ink-300); }
.section--dark .browser__url { background: var(--ink-050); border-color: var(--ink-300); color: var(--text-2); }

/* .browser--shot: the frame holding a REAL screenshot image. */
.browser--shot .browser__body { padding: 0; }
.browser--shot img { display: block; width: 100%; height: auto; }

/* .shot-row + .phone-shot: desktop browser shot with a phone-frame companion. */
.shot-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-5); }
.shot-row > figure:first-child { flex: 1 1 320px; min-width: 0; margin: 0; }
.shot-row > figure.phone-shot-col { flex: 0 1 150px; margin: 0; }
.phone-shot {
  border-radius: 26px; padding: 7px;
  background: linear-gradient(180deg, var(--ink-200), var(--ink-050));
  border: 1px solid var(--ink-300);
  box-shadow: 0 22px 50px -30px rgba(20,20,26,.45);
}
.phone-shot img { display: block; width: 100%; height: auto; border-radius: 19px; }

/* .dev-cap — mono caption under a device frame or screenshot */
.dev-cap {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  margin-top: var(--sp-4);
  color: var(--text-3);
  line-height: 1.7;
}
.section--surface .dev-cap, .section--tint .dev-cap { color: var(--lt-faint); }
.dev-cap b { color: var(--brand); font-weight: 500; }
.section--surface .dev-cap b, .section--tint .dev-cap b { color: var(--brand-lt); }

/* --------------------------------------------------------------------------
   23. VIDEO — .video-frame (real embed) + .video-slot (styled empty slot)
   -------------------------------------------------------------------------- */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink-100);
  border: 1px solid var(--ink-300);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px -36px rgba(0,0,0,.8), 0 0 0 1px rgba(201,161,74,.12);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* .video-slot — an honest placeholder for a demo recording that doesn't exist
   yet. 16:9, styled like the frames around it, labelled plainly. */
.video-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(201,161,74,.08), transparent 70%),
    linear-gradient(180deg, var(--ink-150), var(--ink-100));
  border: 1px dashed var(--ink-500);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.video-slot__play {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--brand-dim);
  border: 1px solid rgba(201,161,74,.4);
  display: grid;
  place-items: center;
}
.video-slot__play::before {
  content: '';
  width: 0; height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--brand);
}
.video-slot__label {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  line-height: 1.8;
  padding: 0 var(--sp-5);
}
.section--surface .video-slot, .section--tint .video-slot {
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(138,106,30,.07), transparent 70%),
    var(--lt-card);
  border-color: #b5b0a4;
}
.section--surface .video-slot__label, .section--tint .video-slot__label { color: var(--lt-faint); }
.section--surface .video-slot__play, .section--tint .video-slot__play {
  background: rgba(138,106,30,.1);
  border-color: rgba(138,106,30,.35);
}
.section--surface .video-slot__play::before, .section--tint .video-slot__play::before {
  border-color: transparent transparent transparent var(--brand-lt);
}

/* .cta-repeat — recurring CTA blocks on the single-path pages. */
.cta-repeat { text-align: center; }
.cta-repeat .btn-row { justify-content: center; }
@media (min-width: 30em) {
  .cta-repeat .btn-row { flex-direction: column; align-items: center; }
  .cta-repeat .btn { width: 100%; max-width: 26rem; }
}

/* --------------------------------------------------------------------------
   24. HERO PHONE — the missed-call text-back thread (homepage only).
   Ported from the 2026-08-12 mockup. Animated by the loop script on the page;
   fully readable with JS off or reduced motion.
   -------------------------------------------------------------------------- */
.hero-phone-col { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero-phone {
  position: relative; margin: 0; width: min(340px, 100%);
  border-radius: 44px; padding: 10px;
  background: linear-gradient(180deg, var(--ink-200), var(--ink-050));
  border: 1px solid var(--ink-300);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.hero-phone::before {
  content: ''; position: absolute; inset: -1px; border-radius: 45px; pointer-events: none; padding: 1px;
  background: linear-gradient(160deg, rgba(232,182,84,.14), transparent 30%, transparent 75%, rgba(232,182,84,.05));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ph-sample {
  position: absolute; top: -11px; right: 14px; z-index: 4;
  font-family: var(--mono); font-size: .55rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--ink-100); color: var(--brand); border: 1px solid rgba(201,161,74,.35);
}
.ph-screen {
  position: relative; border-radius: 34px; overflow: hidden;
  background: radial-gradient(ellipse 120% 40% at 50% -5%, rgba(232,182,84,.07), transparent 60%), var(--ink-000);
  border: 1px solid var(--ink-200); display: flex; flex-direction: column; min-height: 498px;
}
.ph-status {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: var(--text-3);
}
.ph-sig { display: inline-flex; align-items: flex-end; gap: 2px; }
.ph-sig i { width: 3px; background: var(--ink-500); border-radius: 1px; }
.ph-sig i:nth-child(1){height:4px}.ph-sig i:nth-child(2){height:6px}
.ph-sig i:nth-child(3){height:8px}.ph-sig i:nth-child(4){height:10px;background:var(--text-3)}
.ph-clock { font-variant-numeric: tabular-nums; }
.ph-batt { width: 20px; height: 10px; border: 1px solid var(--ink-500); border-radius: 3px; position: relative; display: inline-block; }
.ph-batt::after { content:''; position:absolute; right:-3px; top:2.5px; width:2px; height:4px; background:var(--ink-500); border-radius:0 1px 1px 0; }
.ph-batt i { position:absolute; inset:1.5px; right:35%; background:var(--text-3); border-radius:1px; }
.ph-missed {
  display: flex; align-items: center; gap: 10px; margin: 6px 12px 0; padding: 10px 12px; border-radius: 12px;
  background: rgba(221,106,85,.12); border: 1px solid rgba(221,106,85,.25);
}
.ph-missed-ico { width: 26px; height: 26px; border-radius: 8px; background: rgba(221,106,85,.16); color: var(--danger); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-missed-ico svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.ph-missed-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ph-missed-txt strong { font-size: .8rem; font-weight: 600; color: var(--text-1); line-height: 1.2; }
.ph-missed-txt em { font-style: normal; font-family: var(--mono); font-size: .62rem; color: var(--text-3); letter-spacing: .04em; }
.ph-missed-tag {
  margin-left: auto; font-family: var(--mono); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-dim); border: 1px solid rgba(201,161,74,.3);
  border-radius: var(--r-pill); padding: 4px 8px; white-space: nowrap;
}
.ph-thread { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 8px; flex: 1; }
.ph-daychip {
  align-self: center; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); background: var(--ink-100); border: 1px solid var(--ink-200);
  border-radius: var(--r-pill); padding: 3px 10px;
}
.ph-msg { display: flex; flex-direction: column; max-width: 82%; }
.ph-msg-in { align-self: flex-start; align-items: flex-start; }
.ph-msg-out { align-self: flex-end; align-items: flex-end; }
.ph-bubble { padding: 9px 13px; font-size: .8rem; line-height: 1.5; color: var(--text-1); }
.ph-msg-in .ph-bubble { background: var(--ink-150); border: 1px solid var(--ink-200); border-radius: 14px 14px 14px 4px; }
.ph-msg-out .ph-bubble { background: rgba(201,161,74,.16); border: 1px solid rgba(201,161,74,.18); border-radius: 14px 14px 4px 14px; }
.ph-meta { font-family: var(--mono); font-size: .58rem; letter-spacing: .05em; color: var(--text-3); margin-top: 4px; padding: 0 4px; }
.ph-msg-out .ph-meta { color: var(--brand); }
.ph-tally {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--ink-200);
  border-top: 1px solid var(--ink-200); margin-top: auto;
}
.ph-tally span { background: var(--ink-050); padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.ph-tally b { font-family: var(--disp); font-size: 1.05rem; font-weight: 700; color: var(--brand); line-height: 1; }
.ph-tally i { font-style: normal; font-family: var(--mono); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.ph-caption {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); margin: 0; text-align: center; max-width: none; line-height: 1.7;
}
.ph-typing {
  position: absolute; right: 14px; display: none; align-items: center; gap: 5px; padding: 11px 14px;
  background: rgba(201,161,74,.16); border: 1px solid rgba(201,161,74,.18);
  border-radius: 14px 14px 4px 14px;
}
.ph-typing.on { display: inline-flex; }
.ph-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); animation: phType 1.15s infinite; }
.ph-typing i:nth-child(2) { animation-delay: .18s; }
.ph-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes phType { 0%,58%,100%{opacity:.32;transform:translateY(0)} 28%{opacity:1;transform:translateY(-2px)} }
.hero-phone-col.js-anim .ph-item {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hero-phone-col.js-anim .ph-item.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-phone-col .ph-item { opacity: 1 !important; transform: none !important; }
  .ph-typing { display: none !important; }
}
@media (max-width: 26em) {
  .hero-phone { width: 100%; }
  .ph-screen { min-height: 470px; }
  .ph-sample { right: 10px; font-size: .52rem; }
  .ph-bubble { font-size: .77rem; }
  .ph-caption { font-size: .58rem; letter-spacing: .1em; }
}