/* ═══════════════════════════════════════════════════════════
   Sharpr Automations — Component Library v2 (2026-07 redesign)
   "Engineered Precision, turned up."
   Consumes tokens from styles.css. All classes here are NEW
   systems; legacy blocks remain in pages.css until migrated.
   Motion policy: continuous/decorative animation is declared
   inside prefers-reduced-motion: no-preference (opt-in) with
   the static end-state as the default.
   ═══════════════════════════════════════════════════════════ */

/* ─── U1: Surfaces + section structure ─── */
.surface-deep { background: var(--bg-deep); }
.surface-panel { background: var(--bg-elevated); }
.hairline-top { border-top: 1px solid var(--border); }

/* Corner ticks — blueprint registration marks on a panel */
.ticks { position: relative; }
.ticks::before,
.ticks::after,
.ticks > .tick-b::before,
.ticks > .tick-b::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background:
    linear-gradient(var(--tick) 1px, transparent 1px) center 6px / 13px 1px no-repeat,
    linear-gradient(90deg, var(--tick) 1px, transparent 1px) 6px center / 1px 13px no-repeat;
  opacity: 0.35;
}
.ticks::before { top: -7px; left: -7px; }
.ticks::after { top: -7px; right: -7px; }
.ticks > .tick-b::before { bottom: -7px; left: -7px; }
.ticks > .tick-b::after { bottom: -7px; right: -7px; }

/* Numbered mono eyebrow — "01 — THE PROBLEM" */
.eyebrow-num {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tick);
  margin-bottom: var(--sp-sm);
}
.eyebrow-num .idx { color: var(--coral); }
.eyebrow-num::after {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--border);
  align-self: center;
}

/* Trust microline under CTAs */
.microline {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  color: var(--tick);
  letter-spacing: 0.02em;
  margin-top: var(--sp-sm);
}
.microline .sep { color: var(--coral); padding: 0 6px; }

/* Nav CTA — full presence, not a compact afterthought.
   Specificity must beat `.nav-links a` (0,1,1), which zeroes horizontal
   padding and resets font-size on plain nav links — the same cascade trap
   that once painted this button's label gray. */
.nav-links a.btn-nav,
.btn-nav {
  padding: 13px 38px;
  font-size: 15.5px;
  min-height: 48px;
  margin-left: var(--sp-sm);
}

/* Footer-bottom privacy link states */
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-bottom a:hover { color: var(--coral); }
.footer-bottom a:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.footer-bottom a:active { color: var(--coral-warm); }

/* ─── U2: Nav v2 — transparent-at-top state ─── */
.nav {
  min-height: var(--nav-h);
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
}
.nav--top {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* ─── U3: Mobile drawer (≤768px) ─── */
.nav-drawer {
  display: none;
}
@media (max-width: 768px) {
  .nav-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    /* Solid surface (CEO standing order: the drawer must never read as
       transparent). No backdrop-filter — nothing shows through a solid
       fill, and blur is GPU-expensive on phones. */
    background: var(--bg);
    padding: calc(var(--nav-h) + var(--sp-md)) var(--sp-md)
             max(var(--sp-sm), env(safe-area-inset-bottom));
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out),
                visibility 0s linear var(--dur-base);
  }
  .nav-drawer.open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .nav-drawer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
  }
  .nav-drawer-links a {
    display: flex;
    align-items: center;
    min-height: 52px;
    font-size: 22px;
    font-weight: 600;
    color: var(--white);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
  }
  .nav-drawer-links a:hover { color: var(--coral); }
  .nav-drawer-links a:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: -2px;
  }
  .nav-drawer-links a:active { color: var(--coral-warm); }
  .nav-drawer-links a[aria-current="page"],
  .nav-drawer-links a.nav-active { color: var(--coral); }

  .nav-drawer-aux {
    margin-top: var(--sp-md);
    display: flex;
    flex-direction: column;
  }
  .nav-drawer-aux a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: var(--tick);
    text-decoration: none;
  }
  .nav-drawer-aux a:hover { color: var(--white); }
  .nav-drawer-aux a:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: -2px;
  }
  .nav-drawer-aux a:active { color: var(--coral); }

  .nav-drawer-cta {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding-top: var(--sp-md);
  }
  .nav-drawer-cta .btn { justify-content: center; width: 100%; }
  .nav-drawer-cta .microline { text-align: center; }

  /* Staggered row entrance — opt-in motion */
  @media (prefers-reduced-motion: no-preference) {
    .nav-drawer-links a {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity var(--dur-base) var(--ease-out),
                  transform var(--dur-base) var(--spring),
                  color var(--dur-fast) var(--ease-out);
    }
    .nav-drawer.open .nav-drawer-links a {
      opacity: 1;
      transform: none;
    }
    .nav-drawer.open .nav-drawer-links a:nth-child(1) { transition-delay: 40ms; }
    .nav-drawer.open .nav-drawer-links a:nth-child(2) { transition-delay: 80ms; }
    .nav-drawer.open .nav-drawer-links a:nth-child(3) { transition-delay: 120ms; }
    .nav-drawer.open .nav-drawer-links a:nth-child(4) { transition-delay: 160ms; }
    .nav-drawer.open .nav-drawer-links a:nth-child(5) { transition-delay: 200ms; }
  }
}
html.drawer-locked,
html.drawer-locked body { overflow: hidden; }

/* While the drawer is open the whole nav bar sits ABOVE the overlay (so the
   X stays visible and clickable) and goes solid + unfiltered — a
   backdrop-filter here would re-create the fixed-position containing-block
   trap if the drawer were ever re-nested under .nav. */
html.drawer-locked .nav {
  z-index: calc(var(--z-drawer) + 1);
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.drawer-locked .nav-toggle,
.nav-toggle {
  position: relative;
}
html.drawer-locked .nav-toggle {
  z-index: calc(var(--z-drawer) + 1);
}

/* ─── U4: Mobile bottom CTA bar ─── */
.cta-bar { display: none; }
@media (max-width: 768px) {
  .cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-cta-bar);
    display: flex;
    gap: var(--sp-xs);
    align-items: center;
    padding: 8px var(--sp-sm) calc(8px + env(safe-area-inset-bottom));
    background: rgba(17, 17, 17, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    transform: translateY(110%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .cta-bar--visible { transform: translateY(0); }
  .cta-bar .btn-primary {
    flex: 1;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 15px;
  }
  .cta-bar-talk {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--tick);
    text-decoration: none;
    transition: transform var(--dur-fast) var(--spring),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
  .cta-bar-talk:hover { border-color: var(--coral); color: var(--coral); }
  .cta-bar-talk:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
  .cta-bar-talk:active { transform: scale(0.95); }

  body.has-cta-bar main { padding-bottom: calc(var(--cta-bar-h) + 32px); }
  body.has-cta-bar .scroll-top { display: none; }
}

/* ─── C1: Proof strip — engineered metrics band (value + label cells) ─── */
.strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(26, 26, 26, 0.4);
  position: relative;
  z-index: var(--z-content);
}
.strip-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 3.5vw, 40px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.strip-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-md) var(--sp-md);
}
.strip-item + .strip-item {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}
.strip-val {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.strip-val .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 10px var(--coral);
  flex-shrink: 0;
}
.strip-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
  color: var(--tick);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .strip-inner {
    grid-template-columns: 1fr 1fr;
  }
  .strip-item {
    padding: var(--sp-sm) var(--sp-md);
  }
  /* 2x2: kill the left border on the 3rd cell (new row), add a top hairline on row 2 */
  .strip-item:nth-child(3) { border-left: none; }
  .strip-item:nth-child(3),
  .strip-item:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, 0.09); }
}
@media (max-width: 375px) {
  .strip-val { font-size: 19px; }
}

/* 3-cell variant (watch page offer skeleton) */
.strip-inner--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .strip-inner--3 { grid-template-columns: 1fr; }
  .strip-inner--3 .strip-item { border-left: none; }
  .strip-inner--3 .strip-item + .strip-item { border-top: 1px solid rgba(255, 255, 255, 0.09); }
}

/* Hero entrance — pure CSS so the LCP never waits for JS.
   Default (and reduced-motion) state is fully visible. */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise-in var(--dur-slow) var(--ease-out) both;
  }
  .rise-2 { animation-delay: 120ms; }
  .rise-3 { animation-delay: 240ms; }
  .rise-4 { animation-delay: 360ms; }
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }
}

/* ─── C2: Hero split + schematic panel ─── */
.hero-grid--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-2xl);
  align-items: center;
  max-width: var(--container-max);
  width: 100%;
}
.hero-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: var(--sp-md);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--tick);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.hero-tertiary:hover { color: var(--coral); border-bottom-color: var(--coral); }
.hero-tertiary:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.hero-tertiary:active { color: var(--coral-warm); }
.hero-tertiary .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 8px var(--coral);
  flex-shrink: 0;
}

.schematic-panel {
  position: relative;
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  box-shadow: var(--shadow-elevated), 0 0 60px var(--glow-coral);
}
.schematic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tick);
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-sm);
}
.schematic-head .status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--coral);
}
.schematic-head .status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}
.schematic-svg { width: 100%; height: auto; }
.schematic-svg .s-path {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.5;
  fill: none;
}
.schematic-svg .s-pulse {
  stroke: var(--coral);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 24 460;
  stroke-dashoffset: 0;
  opacity: 0;
}
.schematic-svg .s-node circle {
  fill: var(--bg-elevated);
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 1.5;
  transition: stroke var(--dur-base) var(--ease-out),
              fill var(--dur-base) var(--ease-out);
}
.schematic-svg .s-node text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  fill: var(--tick);
  transition: fill var(--dur-base) var(--ease-out);
}
.schematic-svg .s-node .s-sub {
  font-size: 11.5px;
  letter-spacing: 0.02em;
  fill: rgba(255, 255, 255, 0.38);
  text-transform: none;
}
.schematic-svg .s-node.is-active circle {
  stroke: var(--coral);
  fill: rgba(216, 90, 48, 0.15);
}
.schematic-svg .s-node.is-active text { fill: var(--white); }
.schematic-svg .s-node.is-active .s-sub { fill: var(--tick); }
/* Static default = completed system; motion opt-in */
@media (prefers-reduced-motion: no-preference) {
  .schematic-svg.animate .s-pulse {
    opacity: 1;
    animation: s-flow 6s linear infinite;
  }
  @keyframes s-flow {
    from { stroke-dashoffset: 484; }
    to { stroke-dashoffset: 0; }
  }
}
/* The real-text mobile variant of the schematic — hidden on desktop. */
.schematic-list { display: none; }

@media (max-width: 1024px) {
  .hero-grid--split { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .schematic-panel {
    max-width: 560px;
    /* Solid card below the split point — the translucent surface vanished
       against the dark mobile hero video (2026-07 invisible-schematic bug). */
    background: var(--bg-elevated);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 768px) {
  /* Swap the scaled SVG (labels shrink to ~7px at phone width) for the
     real-text vertical list — same five beats, 13px mono floor respected. */
  .schematic-svg { display: none; }
  .schematic-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: var(--sp-xs) 0;
    position: relative;
  }
  .schematic-list::before {
    /* the spine */
    content: '';
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 5px;
    width: 1px;
    background: rgba(255, 255, 255, 0.14);
  }
  .schematic-list .s-node {
    position: relative;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 10px 0 10px 28px;
  }
  .sl-dot {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    transition: border-color var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out);
  }
  .sl-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tick);
    transition: color var(--dur-base) var(--ease-out);
  }
  .sl-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    /* 0.55 white composites to ~#989898 on the solid #1a1a1a panel — 6.0:1,
       clear of the 4.5:1 AA floor while staying dimmer than the label. */
    color: rgba(255, 255, 255, 0.55);
    transition: color var(--dur-base) var(--ease-out);
  }
  .schematic-list .s-node.is-active .sl-dot {
    border-color: var(--coral);
    background: rgba(216, 90, 48, 0.15);
  }
  .schematic-list .s-node.is-active .sl-label { color: var(--white); }
  .schematic-list .s-node.is-active .sl-sub { color: var(--tick); }

  /* Each newly lit node emits one coral ring — synced to the JS cycle. */
  @media (prefers-reduced-motion: no-preference) {
    .schematic-list.animate .s-node.is-active .sl-dot {
      animation: sl-pulse 1.15s var(--ease-out) 1;
    }
    @keyframes sl-pulse {
      0% { box-shadow: 0 0 0 0 rgba(216, 90, 48, 0.5); }
      100% { box-shadow: 0 0 0 10px rgba(216, 90, 48, 0); }
    }
  }
}

/* ─── C3: Capability band ─── */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
}
.cap-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.cap-card:hover {
  transform: translateY(-3px);
  border-color: rgba(216, 90, 48, 0.4);
  box-shadow: var(--shadow-elevated);
}
.cap-chip {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--coral);
  border: 1px solid rgba(216, 90, 48, 0.35);
  border-radius: 999px;
  padding: 3px 10px;
}
.cap-card p {
  color: var(--gray-readable);
  font-size: 16px;
  line-height: 1.55;
}
.cap-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  color: var(--tick);
  margin-top: var(--sp-md);
}
@media (max-width: 1024px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  /* Horizontal scroller: vertical-scroll IO never reaches cards 3+, so
     reveals must not gate visibility here — cards are visible by default. */
  .cap-grid .reveal {
    opacity: 1;
    transform: none;
  }
  .cap-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--sp-sm);
    padding-bottom: var(--sp-xs);
    margin: 0 calc(-1 * var(--sp-md));
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
    -webkit-overflow-scrolling: touch;
    /* Reaching the row's end must not chain into a page scroll / back-swipe */
    overscroll-behavior-x: contain;
  }
  .cap-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
}

/* ─── C4: Stat counters ─── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-lg);
  padding: var(--sp-lg) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat-num {
  font-weight: 800;
  font-size: clamp(40px, 4.4vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.stat-num .unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.38em;
  font-weight: 700;
  color: var(--coral);
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tick);
}
@media (max-width: 768px) {
  .stat-row { grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
}

/* ─── C5: Hours-back calculator ─── */
.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--sp-lg);
  align-items: start;
}
.calc-rows { display: flex; flex-direction: column; gap: var(--sp-sm); }
.calc-row {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-sm) var(--sp-md);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-xs) var(--sp-sm);
  align-items: center;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.calc-row:has(input[type="checkbox"]:checked) { border-color: rgba(216, 90, 48, 0.4); }
.calc-row > label.calc-row-name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 16.5px;
  color: var(--white);
  cursor: pointer;
}
.calc-row input[type="checkbox"] {
  appearance: none;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--tick);
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.calc-row input[type="checkbox"]:checked {
  background: var(--coral);
  border-color: var(--coral);
}
.calc-row input[type="checkbox"]:checked::before {
  content: '';
  width: 11px;
  height: 6px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.calc-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
.calc-fields {
  grid-column: 2;
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}
.calc-field { display: flex; flex-direction: column; gap: 4px; }
.calc-field label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--tick);
}
.calc-field input[type="number"] {
  width: 108px;
  min-height: 48px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--white);
  padding: 8px 12px;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-inset);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.calc-field input[type="number"]:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: var(--shadow-inset), 0 0 0 3px rgba(216, 90, 48, 0.15);
}
.calc-field input[type="number"]:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
.calc-rate { margin-top: var(--sp-xs); }

.calc-result {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-sm));
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-elevated), 0 0 60px var(--glow-coral);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.calc-result-num {
  font-weight: 800;
  font-size: clamp(48px, 5vw, 72px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.calc-result-num .unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.3em;
  color: var(--coral);
  letter-spacing: 0.04em;
  margin-left: 6px;
}
.calc-result-money {
  font-size: 18px;
  color: var(--gray-readable);
  min-height: 1.5em;
}
.calc-result .microline { margin-top: 0; }
.calc-result .btn { justify-content: center; }
.calc-sub {
  font-size: var(--fs-small);
  color: var(--tick);
}
.calc-sub a { color: var(--gray-readable); }
.calc-sub a:hover { color: var(--coral); }
.calc-sub a:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.calc-sub a:active { color: var(--coral-warm); }
@media (max-width: 900px) {
  .calc-grid { grid-template-columns: 1fr; }
  .calc-result {
    position: sticky;
    bottom: calc(var(--cta-bar-h) + 8px);
    top: auto;
  }
}

/* ─── C6: Timeline rail (pricing) ─── */
.rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-sm);
  position: relative;
  padding-top: 22px;
  margin-bottom: var(--sp-2xl);
}
.rail::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 8px;
  right: 8px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--coral) 0%, rgba(216, 90, 48, 0.25) 100%);
}
.rail-stop { position: relative; }
.rail-stop::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--coral);
}
.rail-stop-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  padding-left: 8px;
}
.rail-stop-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  color: var(--tick);
  padding-left: 8px;
}
@media (max-width: 600px) {
  .rail { grid-template-columns: 1fr; gap: var(--sp-sm); padding-top: 0; padding-left: 22px; }
  .rail::before {
    top: 8px;
    bottom: 8px;
    left: 6px;
    right: auto;
    width: 1.5px;
    height: auto;
    background: linear-gradient(180deg, var(--coral) 0%, rgba(216, 90, 48, 0.25) 100%);
  }
  .rail-stop::before { top: 4px; left: -21px; }
}

/* ─── C7: FAQ accordion v2 (upgrades pages.css block) ─── */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: var(--sp-md) 0;
  min-height: 56px;
  color: var(--white);
  font-weight: 600;
  font-size: 17px;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-question:hover { color: var(--coral); }
.faq-question:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.faq-question:active { color: var(--coral-warm); }
.faq-icon {
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
  color: var(--coral);
}
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq-question[aria-expanded="true"] + .faq-answer-wrap { grid-template-rows: 1fr; }
.faq-answer-wrap > .faq-answer {
  overflow: hidden;
  color: var(--gray-readable);
  max-width: 65ch;
}
.faq-answer-wrap > .faq-answer > p { padding-bottom: var(--sp-md); }

/* ─── C8: Footer v2 — 4 zones + ghost wordmark ─── */
.footer-v2 {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  padding: var(--sp-2xl) var(--sp-2xl) var(--sp-lg);
  z-index: var(--z-content);
  background: var(--bg-deep);
}
.footer-ghost .accent-dot {
  color: rgba(216, 90, 48, 0.07); /* ghost-level coral — the global accent-dot
                                     rule made this a full-brightness blob */
}
.footer-ghost {
  position: absolute;
  bottom: -0.24em;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: clamp(120px, 17vw, 250px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.028);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.footer-v2 .footer-grid {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-xl);
}
.footer-statement {
  font-size: var(--fs-small);
  color: var(--gray-readable);
  max-width: 30ch;
  line-height: 1.6;
}
.footer-v2 .footer-copyright { margin-top: var(--sp-sm); }
.footer-v2 .footer-col a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  min-height: 28px;
}
.footer-bottom {
  position: relative;
  max-width: var(--container-max);
  margin: var(--sp-xl) auto 0;
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  color: var(--tick);
}
@media (max-width: 900px) {
  .footer-v2 .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Touch widths: 44px rows across the whole 0-900 band, not just <=600 */
  .footer-v2 .footer-col a { padding: 10px 0; min-height: 44px; }
}
@media (max-width: 600px) {
  .footer-v2 { padding: var(--sp-xl) var(--sp-md) var(--sp-lg); }
  .footer-v2 .footer-grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
}

/* ─── C9: Embed shells (cal.com inline) ─── */
.embed-shell {
  position: relative;
  min-height: 560px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
}
.embed-shell.loaded { display: block; }
.embed-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  text-align: center;
  padding: var(--sp-lg);
}
.embed-fallback p { color: var(--gray-readable); max-width: 38ch; }
@media (prefers-reduced-motion: no-preference) {
  .embed-shell.loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.04) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: shell-sheen 1.6s linear infinite;
  }
  @keyframes shell-sheen {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
  }
}
@media (max-width: 600px) {
  .embed-shell { min-height: 620px; }
}

/* ─── C10: Glyph slots (line-art system icons in bento cells) ─── */
.glyph-slot {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(216, 90, 48, 0.07);
  display: grid;
  place-content: center;
  color: var(--coral);
  flex-shrink: 0;
}
.glyph-slot svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ─── C11: Values grid (mission page) ─── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-sm);
}
.value-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.value-card h3 { font-size: 19px; }
.value-card p { color: var(--gray-readable); font-size: 16px; }
.value-card .mech {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  color: var(--coral-warm);
  letter-spacing: 0.04em;
  margin-top: auto;
  padding-top: var(--sp-xs);
}
.mission-statement {
  font-weight: 800;
  font-size: clamp(34px, 4.2vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
  max-width: 20ch;
}
@media (max-width: 768px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* ─── C12: Magnetic CTA (JS-driven; CSS provides the spring back) ─── */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-magnetic] { will-change: transform; }
}

/* ─── C12b: Founder quote + proof links + CTA alternatives ─── */
.founder-quote {
  margin-top: var(--sp-md);
  padding: var(--sp-md);
  border-left: 2px solid var(--coral);
  background: rgba(216, 90, 48, 0.05);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.founder-quote p {
  font-size: 18px;
  font-weight: 500;
  color: var(--white) !important;
  margin-bottom: var(--sp-xs) !important;
}
.proof-touch-link {
  color: var(--coral);
  text-decoration: none;
  font-weight: 600;
  /* wraps freely — the arrow is glued to the last word with &nbsp; */
}
.proof-touch-link:hover { color: var(--coral-warm); }
.proof-touch-link:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.proof-touch-link:active { color: var(--coral-warm); }
.cta-alternatives {
  margin-top: var(--sp-2xl);
  color: var(--tick);
  font-size: var(--fs-small);
  line-height: 2;
}
.cta-alternatives a {
  color: var(--gray-readable);
  font-weight: 600;
  text-decoration: none;
}
.cta-alternatives a:hover { color: var(--coral); }
.cta-alternatives a:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.cta-alternatives a:active { color: var(--coral-warm); }

/* ─── C13: Legacy-defect fixes (QA baseline) ─── */
/* 11-12px mono labels → 13px floor; low-contrast markers → readable */
.problem-layer-marker, .problem-layer-tag,
.offering-kicker, .offering-trend,
.qualify-col-eyebrow, .step-kicker {
  font-size: var(--fs-label) !important;
}

/* ─── P3-agent: services rail + page additions ───
   Scope: services.html anchor rail, its per-service intel microcopy line,
   contact.html's 3-tier grid layout. Token-consistent: JetBrains Mono 13px
   floor, coral accents, 44px tap targets, hover/focus-visible/active states,
   aria-current styling for the navspy active state. */

/* Services page — "jump to a system" anchor rail. Built from .cap-chip
   (existing pill token) wrapped as real links inside a flex rail; only new
   rule here is layout + interactive/active states, no new visual language. */
.svc-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: var(--sp-lg);
}
.svc-rail-link {
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: var(--bg-elevated);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.svc-rail-link:hover { border-color: var(--coral); color: var(--coral-warm); }
.svc-rail-link:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.svc-rail-link:active { color: var(--coral-warm); }
.svc-rail-link[aria-current="true"] {
  color: var(--white);
  background: rgba(216, 90, 48, 0.16);
  border-color: var(--coral);
}

/* Services page — Voice Agents sentence-link to /talk/ ("Our own intake
   assistant runs on this. Talk to it right now") sits directly under the
   3rd service-detail block, styled like .proof-touch-link (C12b) for
   consistency. */
.service-detail-touch {
  margin-top: var(--sp-xs);
  color: var(--coral);
  font-weight: 600;
}
.service-detail-touch a {
  color: var(--coral);
  text-decoration: none;
  /* wraps freely — the arrow is glued to the last word with &nbsp; */
}
.service-detail-touch a:hover { color: var(--coral-warm); }
.service-detail-touch a:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.service-detail-touch a:active { color: var(--coral-warm); }

/* Contact page — 3-tier conversion hub. .contact-grid (pages.css) is the
   existing 1fr/1fr 2-col grid that already stacks 1-col at ≤768px in
   document order; this modifier only fixes desktop placement so tier 1
   (the embed, tallest block) spans both rows on the left while tiers 2+3
   stack on the right — no change to the ≤768 stacking behaviour. */
.contact-grid--3tier {
  grid-template-rows: auto auto;
}
.contact-grid--3tier .contact-tier-embed {
  grid-row: 1 / 3;
  grid-column: 1;
}
.contact-grid--3tier .contact-tier-jack {
  grid-row: 1;
  grid-column: 2;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  align-items: flex-start;
}
.contact-grid--3tier .contact-tier-jack .btn { margin-top: var(--sp-xs); }
@media (max-width: 768px) {
  .contact-grid--3tier { grid-template-rows: none; }
  .contact-grid--3tier .contact-tier-embed,
  .contact-grid--3tier .contact-tier-jack {
    grid-row: auto;
    grid-column: auto;
  }
}

/* ─── Ship B: touch ergonomics ─── */
.contact-info a { min-height: 44px; }

/* Touch devices: no sticky hover-lift on cards (the first tap applies :hover
   and it stays applied until the user taps elsewhere) */
@media (hover: none) {
  .cap-card:hover,
  .service-preview-card:hover,
  .pricing-card:hover,
  .philosophy-card:hover,
  .offering-card:hover,
  .step-card:hover { transform: none; }
}