/* Self-hosted display and body faces (Fontshare licences) */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('./assets/fonts/CabinetGrotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('./assets/fonts/CabinetGrotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('./assets/fonts/CabinetGrotesk-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./assets/fonts/Satoshi-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./assets/fonts/Satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./assets/fonts/Satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Pinnacia — design system
   Two-tone brand architecture. Industrial precision, modern software.

   LAYER 1 — PINNACIA (the company): cool, elevated, precise. Midnight
   slate-navy chrome (nav, footer, headers, legal, partners) against a cool
   alpine off-white for content surfaces. This is the dominant palette.

   LAYER 2 — RAZORBACK (the engine): crimson, scoped deliberately to the
   engine itself — pipeline active states, the engine layer stack, confidence
   and review-gate highlights, and primary CTAs. Never ambient.

   Reading rule for a visitor: cool navy = the firm, red = the engine running.
   ========================================================================== */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --text-3xl: clamp(2.375rem, 1.4rem + 3.4vw, 4.25rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* PINNACIA LAYER — midnight slate-navy (company chrome) */
  --pinnacia-900: #0c1420;
  --pinnacia-800: #111c2b;
  --pinnacia-700: #18253a;
  --pinnacia-rule: rgba(238, 242, 247, 0.14);
  --pinnacia-rule-strong: rgba(238, 242, 247, 0.3);

  /* PINNACIA LAYER — alpine off-white (content surfaces) */
  --alpine-100: #eef1f6;
  --alpine-50: #f8fafc;
  --alpine-200: #e3e8ef;
  --alpine-rule: rgba(12, 20, 32, 0.15);
  --alpine-rule-strong: rgba(12, 20, 32, 0.34);

  /* RAZORBACK LAYER — engine crimson (scoped signal colour) */
  --razorback: #bf1d2f;
  --razorback-hover: #a01526;
  --razorback-bright: #ff5d6a;

  /* Structural aliases used throughout the sheet */
  --ink: var(--pinnacia-900);
  --ink-2: var(--pinnacia-800);
  --ink-3: var(--pinnacia-700);
  --ink-rule: var(--pinnacia-rule);
  --ink-rule-strong: var(--pinnacia-rule-strong);
  --paper: var(--alpine-100);
  --paper-2: var(--alpine-50);
  --paper-3: var(--alpine-200);
  --paper-rule: var(--alpine-rule);
  --paper-rule-strong: var(--alpine-rule-strong);
  --crimson: var(--razorback);
  --crimson-hover: var(--razorback-hover);
  --crimson-bright: var(--razorback-bright);

  /* Semantic defaults (alpine context) */
  --color-bg: var(--alpine-100);
  --color-text: #101a28;
  --color-text-muted: #495568;
  --color-text-faint: #5a6678;
  --color-rule: var(--paper-rule);

  /* Two accents. Cool is the company default; crimson is opt-in via
     .engine-scope on anything that represents the Razorback engine. */
  --accent-cool: #2c4a72;
  --engine-accent: var(--razorback);
  --color-accent: var(--accent-cool);
  --color-focus: var(--razorback);

  /* Radius — restrained, mechanical */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 680px;
  --content-default: 960px;
  --content-wide: 1200px;

  --font-display: 'Cabinet Grotesk', 'Satoshi', 'Helvetica Neue', sans-serif;
  --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* --------------------------------------------------------------------------
   Bands: ink (charcoal) and paper (off-white) contexts
   -------------------------------------------------------------------------- */
.band {
  padding-block: clamp(var(--space-16), 8vw, var(--space-32));
  border-top: 1px solid var(--color-rule);
}

.band--tight {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}

/* Anything sitting on the midnight slate layer lightens both accents. */
.band--ink,
.hero,
.page-hero,
.site-header,
.site-footer,
.callout,
.form {
  --accent-cool: #93b4dd;
  --engine-accent: var(--razorback-bright);
  --color-accent: var(--accent-cool);
  --color-focus: var(--razorback-bright);
}

/* The engine layer. Applied to the pipeline diagram, the engine section, the
   layer stack, the confidence/review highlights — nothing else. */
.engine-scope {
  --color-accent: var(--engine-accent);
}

.band--ink {
  --color-bg: var(--ink);
  --color-text: #eef2f7;
  --color-text-muted: #a3b0c2;
  --color-text-faint: #8c9aae;
  --color-rule: var(--ink-rule);
  background: var(--ink);
  color: var(--paper);
}

.band--paper {
  --color-bg: var(--paper);
  --color-text: #101a28;
  --color-text-muted: #495568;
  --color-text-faint: #5a6678;
  --color-rule: var(--paper-rule);
  --accent-cool: #2c4a72;
  --engine-accent: var(--razorback);
  --color-accent: var(--accent-cool);
  --color-focus: var(--razorback);
  background: var(--paper);
  color: #101a28;
}

.band--paper-2 {
  background: var(--paper-2);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .wrap {
    padding-inline: var(--space-8);
  }
}

.grid {
  display: grid;
  gap: var(--space-8);
}

.cols-2 {
  grid-template-columns: 1fr;
}

.cols-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Section head: mono eyebrow + display heading + lede */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--color-accent);
  flex: none;
}

h1,
h2,
h3,
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}

h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.035em;
}

h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.03em;
  max-width: 22ch;
}

h3 {
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}

.lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 60ch;
  margin-top: var(--space-6);
}

.section-head {
  max-width: var(--content-default);
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

p + p {
  margin-top: var(--space-4);
}

.muted {
  color: var(--color-text-muted);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rule {
  height: 1px;
  background: var(--color-rule);
  border: 0;
}

.placeholder {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--color-text-faint);
  border-bottom: 1px dotted currentColor;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--crimson);
  color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--crimson-hover);
}

.btn--ghost {
  border-color: var(--color-rule-strong, var(--color-rule));
  border-color: var(--color-text-faint);
  color: var(--color-text);
  background: transparent;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--color-text);
  background: rgba(127, 127, 127, 0.08);
}

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

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(12, 20, 32, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-rule);
  color: var(--paper);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 68px;
  padding-block: var(--space-3);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--paper);
  text-decoration: none;
  flex: none;
}

.logo__mark {
  color: #eef2f7;
  flex: none;
}

.logo__mark .logo__apex {
  color: var(--razorback-bright);
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.logo__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.logo__sub {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #93a1b5;
}

.nav {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: #c7d0dd;
  text-decoration: none;
  padding-block: var(--space-2);
  position: relative;
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-interactive);
}

.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current='true'] {
  color: var(--paper);
}

.nav a:hover::after,
.nav a:focus-visible::after,
.nav a[aria-current='true']::after {
  transform: scaleX(1);
}

.nav__cta {
  margin-left: var(--space-2);
}

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: var(--space-3);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--ink-rule-strong);
  border-radius: var(--radius-sm);
}

@media (min-width: 1000px) {
  .nav {
    display: flex;
  }
  .nav-toggle {
    display: none;
  }
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--ink-rule);
  background: var(--ink);
  padding: var(--space-4) 0 var(--space-6);
}

.mobile-nav[data-open='true'] {
  display: block;
}

@media (min-width: 1000px) {
  .mobile-nav[data-open='true'] {
    display: none;
  }
}

.mobile-nav ul {
  list-style: none;
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.mobile-nav a {
  display: block;
  padding: var(--space-3) 0;
  color: #c7d0dd;
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 500;
  border-bottom: 1px solid var(--ink-rule);
}

.mobile-nav a:hover {
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  background: var(--ink);
  color: #eef2f7;
  --color-text: #eef2f7;
  --color-text-muted: #a3b0c2;
  --color-text-faint: #8c9aae;
  --color-rule: var(--ink-rule);
  padding-block: clamp(var(--space-16), 9vw, var(--space-32));
  position: relative;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
  align-items: start;
}

@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
  }
}

.hero h1 {
  max-width: 18ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

.hero__meta {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--ink-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8c9aae;
}

.hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__meta span::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--color-accent);
  flex: none;
}

/* Summit / elevation motif — a small ascent tick that marks a section head.
   Restrained: two hairline strokes, no imagery. */
.summit-mark {
  display: block;
  width: 34px;
  height: 14px;
  margin-bottom: var(--space-4);
  color: var(--color-accent);
}

/* Razorback engine badge — subordinate to the Pinnacia logo, always crimson. */
.eng-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--engine-accent);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  padding: 3px var(--space-2);
  line-height: 1.4;
}

.eng-badge svg {
  flex: none;
  color: inherit;
}

.eng-badge--plain {
  border: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Figures / diagrams
   -------------------------------------------------------------------------- */
.figure {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: rgba(127, 127, 127, 0.04);
}

.band--ink .figure,
.hero .figure {
  background: var(--ink-2);
}

.figure figcaption {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  max-width: none;
}

.diagram {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Cards, lists
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  background: rgba(255, 255, 255, 0.6);
}

.band--ink .card {
  background: var(--ink-2);
}

.card--flat {
  background: transparent;
}

.card:hover {
  border-color: var(--paper-rule-strong);
}

.band--ink .card:hover {
  border-color: var(--ink-rule-strong);
}

.card h3 {
  margin-bottom: var(--space-3);
}

.card p {
  color: var(--color-text-muted);
}

.card__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-4);
}

/* Problem blocks — staggered, not a symmetrical 3-up */
.problem-list {
  container-type: inline-size;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-rule);
}

.problem-list > li {
  display: grid;
  gap: var(--space-3) var(--space-8);
  padding-block: clamp(var(--space-6), 3vw, var(--space-10));
  border-bottom: 1px solid var(--color-rule);
  max-width: none;
}

@container (min-width: 800px) {
  .problem-list > li {
    grid-template-columns: 5rem minmax(0, 17rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

.problem-list h3 {
  font-size: var(--text-lg);
}

.problem-list p {
  color: var(--color-text-muted);
}

.callout {
  margin-top: clamp(var(--space-10), 4vw, var(--space-16));
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
}

.callout p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #dde4ee;
  max-width: 46ch;
}

.callout .mono {
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-4);
}

/* Engine layer list */
.layers {
  list-style: none;
  counter-reset: layer;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-rule);
  container-type: inline-size;
}

.layers > li {
  counter-increment: layer;
  display: grid;
  gap: var(--space-2) var(--space-6);
  grid-template-columns: 3rem minmax(0, 1fr);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
  max-width: none;
  transition: background var(--transition-interactive);
}

.layers > li > * {
  grid-column: 2;
}

.layers > li::before {
  content: 'L' counter(layer);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-accent);
  padding-top: 0.35em;
}

@container (min-width: 660px) {
  .layers > li {
    grid-template-columns: 3rem minmax(0, 16rem) minmax(0, 1fr);
    align-items: baseline;
  }
  .layers > li h3 {
    grid-column: 2;
  }
  .layers > li p {
    grid-column: 3;
  }
}

.layers p {
  color: var(--color-text-muted);
}

/* Fit / not-fit columns */
.fit-col {
  border-top: 2px solid var(--color-accent);
  padding-top: var(--space-6);
}

.fit-col--no {
  border-top-color: var(--color-text-faint);
}

.fit-col h3 {
  margin-bottom: var(--space-5);
}

.check-list {
  list-style: none;
  display: grid;
  gap: var(--space-4);
}

.check-list li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--space-3);
  color: var(--color-text-muted);
  max-width: 46ch;
}

.check-list li::before {
  content: '';
  width: 10px;
  height: 10px;
  margin-top: 0.5em;
  background: var(--color-accent);
}

.fit-col--no .check-list li::before {
  background: transparent;
  border: 1px solid var(--color-text-faint);
}

/* Verticals */
.verticals {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

@media (min-width: 700px) {
  .verticals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .verticals {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.verticals li {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  max-width: none;
}

.verticals .mono {
  display: block;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.verticals p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.verticals strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

/* Timeline */
.timeline {
  list-style: none;
  display: grid;
  gap: var(--space-8);
  counter-reset: step;
  margin-top: var(--space-8);
}

@media (min-width: 900px) {
  .timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

.timeline > li {
  counter-increment: step;
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-5);
  position: relative;
  max-width: none;
}

.timeline > li::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--color-accent);
}

.timeline .step-no {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-text-faint);
  display: block;
  margin-bottom: var(--space-3);
}

.timeline h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
}

.timeline p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.timeline .dur {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  border: 1px solid var(--color-rule);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* Pricing */
.pricing {
  display: grid;
  gap: 0;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pricing__row {
  display: grid;
  gap: var(--space-4) var(--space-8);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border-bottom: 1px solid var(--color-rule);
}

.pricing__row:last-of-type {
  border-bottom: 0;
}

@media (min-width: 860px) {
  .pricing__row {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 15rem);
    align-items: start;
  }
}

.pricing__row h3 {
  font-size: var(--text-lg);
}

.pricing__row p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.pricing__figure {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.pricing__figure small {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-2);
  letter-spacing: 0.04em;
}

.pricing__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.pricing__foot p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* FAQ accordion */
.faq {
  border-top: 1px solid var(--color-rule);
  max-width: var(--content-default);
}

.faq__item {
  border-bottom: 1px solid var(--color-rule);
}

.faq__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  min-height: 44px;
}

@media (min-width: 700px) {
  .faq__trigger {
    font-size: var(--text-lg);
  }
}

.faq__trigger:hover {
  color: var(--color-accent);
}

.faq__icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.35em;
  position: relative;
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  background: var(--color-accent);
  transition: transform var(--transition-interactive);
}

.faq__icon::before {
  left: 0;
  top: 7.5px;
  width: 16px;
  height: 1.5px;
}

.faq__icon::after {
  left: 7.5px;
  top: 0;
  width: 1.5px;
  height: 16px;
}

.faq__trigger[aria-expanded='true'] .faq__icon::after {
  transform: scaleY(0);
}

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq__panel[data-open='true'] {
  grid-template-rows: 1fr;
}

.faq__panel > div {
  overflow: hidden;
}

.faq__panel p {
  color: var(--color-text-muted);
  padding-top: var(--space-2);
  padding-bottom: var(--space-6);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.cta-grid {
  display: grid;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
}

@media (min-width: 1000px) {
  .cta-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

.form {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  background: var(--ink-2);
}

.form__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 620px) {
  .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .field--full {
    grid-column: 1 / -1;
  }
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a3b0c2;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--space-3) var(--space-4);
  background: var(--ink-3);
  border: 1px solid var(--ink-rule-strong);
  border-radius: var(--radius-sm);
  color: var(--paper);
  font-size: var(--text-sm);
}

.field textarea {
  min-height: 96px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #8c9aae;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: #55647c;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--razorback-bright);
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 93, 106, 0.32);
}

.form__foot {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.form__note {
  font-size: var(--text-xs);
  color: #8c9aae;
  line-height: 1.6;
  max-width: none;
}

.form__status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--razorback-bright);
  border-radius: var(--radius-sm);
  color: var(--paper);
  background: rgba(255, 93, 106, 0.12);
  display: none;
}

.form__status[data-ok='true'] {
  border-color: #7fc79a;
  background: rgba(127, 199, 154, 0.12);
}

/* In-flight "Sending…" notice — neutral, so a pending state never reads as an
   error. Text stays --paper (#eef1f6) on the ink form field: AA-clear. */
.form__status[data-pending='true'] {
  border-color: #8c9aae; /* AA non-text contrast against the ink form field */
  background: rgba(238, 242, 247, 0.06);
}

.form__status[data-visible='true'] {
  display: block;
}

/* Honeypot. Off-screen rather than display:none so naive bots still see it,
   but kept out of the tab order and the accessibility tree in the markup. */
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* In-flight submit state. Label swaps to "Sending…" in app.js; the button
   keeps the crimson field and #fff text so contrast is unchanged, and only
   loses a little presence via the border + cursor. */
.btn[data-loading='true'],
.btn:disabled {
  cursor: progress;
  border-color: rgba(255, 255, 255, 0.35);
}

.btn--primary[data-loading='true'],
.btn--primary:disabled {
  background: var(--crimson-hover);
  color: #fff;
}

.contact-block {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
}

.contact-block a {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
}

.contact-block a:hover {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  --color-text-muted: #a3b0c2;
  --color-rule: var(--ink-rule);
  border-top: 1px solid var(--ink-rule);
  padding-block: var(--space-16) var(--space-10);
}

.footer__top {
  display: grid;
  gap: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--ink-rule);
}

@media (min-width: 860px) {
  .footer__top {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  }
}

.footer__blurb {
  color: #a3b0c2;
  font-size: var(--text-sm);
  margin-top: var(--space-5);
  max-width: 42ch;
}

.footer h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8c9aae;
  margin-bottom: var(--space-5);
  max-width: none;
}

.footer__list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.footer__list a {
  color: #c7d0dd;
  font-size: var(--text-sm);
  text-decoration: none;
}

.footer__list a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: #8c9aae;
}

.proof-slot {
  margin-top: var(--space-10);
  border: 1px dashed var(--ink-rule-strong);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: #8c9aae;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Sub-page (legal / partners) typography
   -------------------------------------------------------------------------- */
.page-hero {
  background: var(--ink);
  color: #eef2f7;
  padding-block: clamp(var(--space-12), 7vw, var(--space-24));
  --color-text: #eef2f7;
  --color-text-muted: #a3b0c2;
  --color-text-faint: #8c9aae;
  --color-rule: var(--ink-rule);
}

.page-hero h1 {
  font-size: var(--text-2xl);
  max-width: 24ch;
}

.prose > * {
  max-width: var(--content-narrow);
}

.prose h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  max-width: 30ch;
}

.prose h3 {
  font-size: var(--text-base);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose p,
.prose li {
  color: var(--color-text-muted);
}

.prose ul,
.prose ol {
  margin-top: var(--space-4);
  padding-left: var(--space-6);
  display: grid;
  gap: var(--space-2);
}

.prose > p:first-child {
  font-size: var(--text-lg);
  color: var(--color-text);
}

.prose a {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

.doc-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Motion — fade and rise on section entry
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal[data-visible='true'] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Schematic diagram primitives (inline SVG)
   -------------------------------------------------------------------------- */
.dg { color: var(--color-text); }
.dg-box { fill: none; stroke: currentColor; stroke-opacity: 0.3; stroke-width: 1.25; }
.dg-fill { fill: currentColor; fill-opacity: 0.05; stroke: currentColor; stroke-opacity: 0.3; stroke-width: 1.25; }
.dg-line { stroke: currentColor; stroke-opacity: 0.3; stroke-width: 1.25; fill: none; }
/* .dg-accent* = the Razorback engine layer (crimson inside .engine-scope). */
.dg-accent { stroke: var(--color-accent); stroke-width: 1.5; fill: none; }
.dg-accent[stroke-dasharray] { fill: none; }
.dg-accent-fill { fill: var(--color-accent); }
.dg-accent-soft { fill: var(--color-accent); fill-opacity: 0.1; stroke: var(--color-accent); stroke-width: 1.5; }
/* .dg-cool* = the Pinnacia / client-owned layer. */
.dg-cool { stroke: var(--accent-cool); stroke-width: 1.5; fill: none; }
.dg-cool-fill { fill: var(--accent-cool); }
.dg-cool-soft { fill: var(--accent-cool); fill-opacity: 0.1; stroke: var(--accent-cool); stroke-width: 1.5; }
.dg-label--cool { fill: var(--accent-cool); fill-opacity: 1; }
.dg-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; fill: currentColor; }
.dg-label { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em; fill: currentColor; fill-opacity: 0.6; }
.dg-label--accent { fill: var(--color-accent); fill-opacity: 1; }
.dg-note { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; fill: currentColor; fill-opacity: 0.5; }
.dg-tick { stroke: currentColor; stroke-opacity: 0.22; stroke-width: 1; fill: none; }

/* Diagram text scales up on small screens so labels stay readable
   when the SVG viewBox is compressed into a narrow column. */
@media (max-width: 700px) {
  .dg-title { font-size: 26px; }
  .dg-label { font-size: 19px; }
  .dg-note { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   Contrast corrections (WCAG AA)
   -------------------------------------------------------------------------- */

a.btn.btn--primary,
button.btn.btn--primary,
.nav a.btn--primary,
.mobile-nav a.btn--primary {
  color: #fff;
}