/* ============================================================================
   FieldPins — styles
   Mirrors JohnnyAI's CSS organization: token block in :root, then section
   comment headers. THEME IS A SCAFFOLD PLACEHOLDER — Prompt 1 owns the final
   palette + type. No build step: hand-authored vanilla CSS.
   ========================================================================= */

/* ─── Tokens (Prompt 1 — field-grade engineering brand) ─────────────────────
   Influences: map pins, blueprint/schema linework, monospace technical tags.
   Confident, structural. Light/warm page with dark structural sections.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* color — canonical brand palette */
  --ink:   #0E1116;   /* near-black, primary text + dark sections */
  --paper: #F7F6F2;   /* warm off-white page bg */
  --slate: #5B6470;   /* muted body / secondary text */
  --line:  #E2E0D8;   /* hairline borders, blueprint grid */
  --pin:   #E2483D;   /* signal accent — the "pin"; CTAs, highlights */
  --data:  #1D7A8C;   /* secondary accent — teal, for data/architecture */
  --ok:    #2E7D5B;   /* approved / privacy-safe states */

  /* derived tints (kept minimal — no new hues) */
  --pin-soft:  rgba(226, 72, 61, 0.10);
  --data-soft: rgba(29, 122, 140, 0.10);
  --ok-soft:   rgba(46, 125, 91, 0.10);
  --ink-soft:  rgba(14, 17, 22, 0.06);

  /* type — geometric grotesk heads / Inter body / mono technical tags.
     Two weights max per family. No 700. */
  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-6: 1.5rem;  --space-8: 2rem;
  --space-12: 3rem;    --space-16: 4rem;   --space-24: 6rem;  --space-32: 8rem;

  --container: 1180px;
  --container-narrow: 720px;
  --radius: 8px;       /* corners */
  --radius-lg: 12px;   /* cards */

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* blueprint grid — low-opacity hairlines, dark sections only */
  --grid-dark: rgba(226, 224, 216, 0.06);

  /* ── Bridge: legacy scaffold names → brand tokens ──────────────────────────
     Existing index.html component CSS (.hero/.nav/.section/.steps/.feature…)
     still references the Prompt-0 variable names. Aliasing them here re-skins
     the whole site to the new light brand in one move; per-section polish
     (dark structural sections, blueprint texture) lands in later prompts. */
  --bg:          var(--paper);
  --bg-elev:     #FFFFFF;
  --bg-elev-2:   #FCFBF7;
  --line-strong: #CFCDC4;
  --text:        var(--ink);
  --text-muted:  var(--slate);
  --text-faint:  #8A9099;
  --accent:      var(--pin);
  --accent-dim:  var(--pin-soft);
  --accent-glow: var(--pin-soft);
  --display:     var(--font-head);
  --body:        var(--font-body);
  --mono:        var(--font-mono);
}

/* ─── Reset / base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--pin); color: var(--paper); }

/* headings — geometric grotesk, weight 500, tight tracking, sentence case */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* ─── Container ─────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-8);
}
.container--narrow { max-width: var(--container-narrow); }
@media (max-width: 640px) {
  .container { padding: 0 var(--space-6); }
}

/* ─── Markers (technical labels) ────────────────────────────────────────── */
.marker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ─── Nav (sticky, hairline border, mobile collapse) ────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 246, 242, 0.86);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-4) var(--space-8);
  gap: var(--space-8);
}
.nav__brand { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); }
.nav__mark { color: var(--pin); }
.nav__wordmark { font-family: var(--font-head); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; }
.nav__brand .nav__wordmark { font-size: 2.5875rem; } /* top-left logo wordmark: +50% then +50% again (nav only; footer keeps base size) */
.nav__links { display: flex; align-items: center; gap: var(--space-8); }
.nav__links a { color: var(--slate); font-size: 0.95rem; transition: color 0.2s var(--ease); }
.nav__links a:hover { color: var(--ink); }
.nav__cta { white-space: nowrap; }

/* hamburger — hidden on desktop */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
}
.nav__toggle svg { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--space-2) var(--space-6) var(--space-6);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
  .nav__links .nav__cta { margin-top: var(--space-4); border-bottom: none; }
}
@media (max-width: 640px) { .nav__inner { padding: var(--space-4) var(--space-6); } }

/* anchored sections clear the sticky nav */
section[id] { scroll-margin-top: 80px; }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 500;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
}
/* no drop shadows — hover shifts color/border only */
.btn--primary { background: var(--pin); color: var(--paper); border-color: var(--pin); }
.btn--primary:hover { transform: translateY(-1px); background: #c83a30; border-color: #c83a30; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--pin); color: var(--pin); }
.btn--data { background: var(--data); color: var(--paper); border-color: var(--data); }
.btn--data:hover { transform: translateY(-1px); background: #186574; border-color: #186574; }
.btn--text { background: transparent; color: var(--slate); border: none; padding-left: 0; padding-right: 0; }
.btn--text:hover { color: var(--pin); }
.btn--full { width: 100%; justify-content: center; }

/* ─── Chip (technical tag — case-preserving mono) ───────────────────────────
   For schema names / identifiers: tenant_rdh, BotContext, JSON-LD.
   Distinct from .marker (uppercase section eyebrow). */
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  background: var(--ink-soft);
  padding: 0.35em 0.6em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  white-space: nowrap;
}
.chip--data { color: var(--data); background: var(--data-soft); border-color: rgba(29,122,140,0.25); }
.chip--pin  { color: var(--pin);  background: var(--pin-soft);  border-color: rgba(226,72,61,0.25); }
.chip--ok   { color: var(--ok);   background: var(--ok-soft);   border-color: rgba(46,125,91,0.25); }

/* ─── Card ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.card__kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.card__title { font-size: 1.25rem; margin: var(--space-3) 0 var(--space-2); }
.card p { color: var(--slate); font-size: 0.95rem; }
.card--data { border-top: 3px solid var(--data); }
.card--pin  { border-top: 3px solid var(--pin); }

/* ─── Dark structural section + blueprint grid ──────────────────────────────
   The one permitted texture: low-opacity --line hairlines on --ink. */
.section--dark {
  background: var(--ink);
  color: var(--paper);
  border-top-color: rgba(226,224,216,0.10);
}
.section--dark .section__title,
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark .section__sub,
.section--dark p { color: rgba(247,246,242,0.72); }
.section--dark .card { background: rgba(247,246,242,0.04); border-color: rgba(226,224,216,0.14); }
.section--dark .chip { color: var(--paper); background: rgba(247,246,242,0.06); border-color: rgba(226,224,216,0.18); }
.blueprint {
  background-image:
    linear-gradient(var(--grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ─── Sections ──────────────────────────────────────────────────────────── */
.section { padding: var(--space-32) 0; border-top: 1px solid var(--line); }
.section--accent { background: var(--bg-elev); }
.section__head { margin-bottom: var(--space-16); }
.section__head .marker { margin-bottom: var(--space-4); }
.section__title { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; }
.section__title em { font-style: italic; color: var(--accent); }
.section__title--center { text-align: center; }
.section__sub { color: var(--text-muted); margin-top: var(--space-4); max-width: 60ch; }

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.hero { padding: var(--space-16) 0 var(--space-24); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  align-items: center;
}
.hero__marker { margin-bottom: var(--space-6); }
.hero__headline { font-family: var(--font-head); font-weight: 500; letter-spacing: -0.025em; font-size: clamp(2.3rem, 5.4vw, 3.9rem); line-height: 1.04; }
.hero__headline span { display: block; }
.hero__accent { color: var(--pin); }
.hero__sub { color: var(--slate); font-size: 1.15rem; line-height: 1.55; max-width: 52ch; margin-top: var(--space-6); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-8); }
.hero__trust { margin-top: var(--space-8); color: var(--slate); font-size: 0.88rem; line-height: 1.5; max-width: 46ch; }
.hero__visual { display: flex; justify-content: center; }
.hero__visual svg { width: 100%; max-width: 460px; height: auto; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero__visual { order: -1; }
  .hero__visual svg { max-width: 380px; }
}

/* job-card SVG — token-driven linework, pin accent carries it */
.jc-card  { fill: #FFFFFF; stroke: var(--line); stroke-width: 1.5; }
.jc-frame { fill: #F2F1EC; stroke: var(--line); stroke-width: 1.5; }
.jc-bar   { fill: var(--line); }
.jc-bar--soft { fill: #ECEAE2; }
.jc-horizon { stroke: var(--line); stroke-width: 1.5; }
.jc-mono  { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.jc-kicker{ font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; fill: var(--data); }
.jc-pin   { fill: var(--pin); }
.jc-ok    { fill: var(--ok); }
.jc-chip-bg { fill: var(--data-soft); stroke: var(--data); stroke-width: 1.25; }
.jc-chip-tx { fill: var(--data); }

/* ─── Steps (Prompt 4 — flow: horizontal desktop, vertical mobile) ───────── */
.steps { display: flex; align-items: stretch; gap: var(--space-6); list-style: none; }
.step { flex: 1 1 0; position: relative; padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elev-2); }
.step__num { font-family: var(--mono); color: var(--accent); font-size: 0.85rem; }
.step__title { font-family: var(--display); font-size: 1.3rem; margin: var(--space-3) 0; }
.step p { color: var(--text-muted); font-size: 0.95rem; }
/* connectors — sit in the flex gap; point right on desktop, down on mobile */
.step:not(:last-child)::after {
  content: "\2192"; position: absolute; top: 50%; left: 100%;
  width: var(--space-6); transform: translateY(-50%);
  text-align: center; font-family: var(--mono); font-size: 1.15rem; color: var(--pin);
  pointer-events: none;
}
@media (max-width: 900px) {
  .steps { flex-direction: column; }
  .step:not(:last-child)::after { content: "\2193"; top: 100%; left: 50%; width: var(--space-6); height: var(--space-6); transform: translateX(-50%); }
}

/* ─── Features ──────────────────────────────────────────────────────────── */
.features { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.feature { padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.feature__icon { color: var(--accent); margin-bottom: var(--space-4); }
.feature h3 { font-family: var(--display); font-size: 1.25rem; margin-bottom: var(--space-3); }
.feature p { color: var(--text-muted); font-size: 0.95rem; }

/* ─── Cards grid (Prompt 4 — the problem) ───────────────────────────────── */
.cards { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ─── Architecture (Prompt 7 — inline SVG diagram lives here) ────────────── */
.arch { border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: var(--space-16); text-align: center; color: var(--text-faint); font-family: var(--mono); font-size: 0.85rem; }

/* ─── Architecture planes + notes (Prompt 5 — prose alongside the diagram) ── */
.planes { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); list-style: none; margin-top: var(--space-12); }
.plane { display: flex; flex-direction: column; gap: var(--space-3); }
.plane .card__title { margin: var(--space-2) 0 0; }
.section--dark .card__kicker { color: rgba(247, 246, 242, 0.55); }
.plane__bots { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.plane__bot { font-size: 0.9rem; line-height: 1.45; color: rgba(247, 246, 242, 0.72); }
.plane__bot strong { color: var(--paper); font-weight: 500; }
.plane__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.arch__notes { display: grid; gap: var(--space-8); grid-template-columns: 1fr 1fr; margin-top: var(--space-16); }
@media (max-width: 760px) { .arch__notes { grid-template-columns: 1fr; } }
.arch__note { color: rgba(247, 246, 242, 0.72); }
.arch__note strong { color: var(--paper); font-weight: 500; }

/* ─── Architecture diagram (Prompt 7) ──────────────────────────────────────
   Inline-SVG four-plane schematic. Hairline --line linework on the dark
   section; one accent (--pin) on the upward "approved" path; bots tinted
   --data (AI), deterministic services --ok (not AI). No gradients. */
.archdiag { margin: var(--space-12) 0 0; }
.archdiag__svg { display: block; width: 100%; height: auto; }
.archdiag--stack { display: none; }
@media (max-width: 760px) {
  .archdiag--wide { display: none; }
  .archdiag--stack { display: block; }
}
.archdiag__cap {
  margin-top: var(--space-4);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: rgba(247, 246, 242, 0.5);
  text-align: center;
}
/* "The CoreShift platform" label above the diagram (Prompt 14 branding) */
.archdiag__plat {
  margin: 0 0 var(--space-4);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--data);
  text-align: center;
}

/* dashed plane containers */
.dia-zone {
  fill: none;
  stroke: rgba(226, 224, 216, 0.22);
  stroke-width: 1;
  stroke-dasharray: 5 5;
}
/* solid region containers (the two middle planes) */
.dia-region { fill: rgba(247, 246, 242, 0.02); stroke: rgba(226, 224, 216, 0.16); stroke-width: 1; }
.dia-region--bots { stroke: rgba(29, 122, 140, 0.45); }
.dia-region--det  { stroke: rgba(46, 125, 91, 0.45); }

/* nodes */
.dia-node, .dia-bar {
  fill: rgba(247, 246, 242, 0.04);
  stroke: rgba(226, 224, 216, 0.20);
  stroke-width: 1;
  transition: fill 0.18s var(--ease, ease), stroke 0.18s var(--ease, ease);
}
.dia-node--bot  { fill: rgba(29, 122, 140, 0.16); stroke: var(--data); }
.dia-node--det  { fill: rgba(46, 125, 91, 0.14);  stroke: var(--ok); }
.dia-node--data { fill: rgba(247, 246, 242, 0.05); stroke: rgba(226, 224, 216, 0.30); }

/* labels + text */
.dia-zonelabel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: rgba(247, 246, 242, 0.5);
}
.dia-zonelabel--data { fill: var(--data); }
.dia-zonelabel--ok   { fill: var(--ok); }
.dia-title { font-family: var(--font-head); font-size: 14px; font-weight: 500; fill: var(--paper); }
.dia-sub   { font-family: var(--mono); font-size: 11px; fill: rgba(247, 246, 242, 0.55); }
.dia-node-tx { font-family: var(--font-body); font-size: 13px; fill: var(--paper); }
.dia-mono  { font-family: var(--mono); font-size: 13px; fill: rgba(247, 246, 242, 0.85); }

/* flow lines */
.dia-flow { stroke: rgba(226, 224, 216, 0.30); stroke-width: 1.4; fill: none; }
.dia-flow--up { stroke: var(--pin); stroke-width: 1.8; }
.dia-flowlabel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; fill: var(--pin); }

/* clickable boxes */
.archbox { cursor: pointer; }
.archbox text { pointer-events: none; }
.archbox:hover .dia-node,
.archbox:hover .dia-bar { fill: rgba(247, 246, 242, 0.10); stroke: rgba(247, 246, 242, 0.55); }
.archbox:hover .dia-node--bot { fill: rgba(29, 122, 140, 0.28); stroke: var(--data); }
.archbox:hover .dia-node--det { fill: rgba(46, 125, 91, 0.26);  stroke: var(--ok); }
.archbox:focus { outline: none; }
.archbox:focus-visible .dia-node,
.archbox:focus-visible .dia-bar { stroke: var(--pin); stroke-width: 2; }

/* scroll-link target pulse on the prose plane / note */
.plane.is-linked, .arch__note.is-linked {
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 2px var(--pin);
}
@media (prefers-reduced-motion: no-preference) {
  .plane.is-linked, .arch__note.is-linked { animation: linkpulse 1.8s var(--ease, ease); }
  @keyframes linkpulse {
    0%   { box-shadow: 0 0 0 0 rgba(226, 72, 61, 0); }
    14%  { box-shadow: 0 0 0 3px rgba(226, 72, 61, 0.9); }
    100% { box-shadow: 0 0 0 0 rgba(226, 72, 61, 0); }
  }
}

/* ─── Privacy-first (Prompt 8) ──────────────────────────────────────────────
   Two columns: always public (--ok / safe) vs never public (--pin, sparingly,
   for "blocked"). Closing line names the three enforcement points. */
.privacy__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.privacy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
}
@media (max-width: 760px) { .privacy { grid-template-columns: 1fr; } }
.privacy__col {
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.privacy__col--ok { border-top-color: var(--ok); }
.privacy__col--blocked { border-top-color: var(--pin); }
.privacy__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.privacy__title { font-family: var(--font-head); font-weight: 500; font-size: 1.2rem; }
.privacy__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.privacy__item { display: flex; align-items: flex-start; gap: var(--space-3); line-height: 1.45; }
.privacy__item em { font-style: normal; color: var(--text-faint); }
.pmark { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.pmark--ok { color: var(--ok); }
.pmark--no { color: var(--pin); }
.privacy__enforce { margin-top: var(--space-12); max-width: 64ch; line-height: 1.65; }
.privacy__enforce strong { font-weight: 500; }
.privacy__where { color: var(--ok); font-weight: 500; }
.pmark--muted { color: var(--text-faint); }

/* ─── Honest comparison table (Prompt 9) ───────────────────────────────────
   Restrained 3-column table. FieldPins column tinted (--pin-soft); rows carry
   a one-sentence rationale; competitor column is neutral/muted, not trash-talk. */
.cmptable__scroll { margin-top: var(--space-12); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmptable { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; }
.cmptable th, .cmptable td { padding: var(--space-4) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.cmptable thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line-strong);
}
.cmptable thead th.cmptable__us { color: var(--pin); }
.cmptable tbody th { font-weight: 400; }
.cmptable__row { display: block; font-family: var(--font-head); font-weight: 500; font-size: 1rem; color: var(--text); }
.cmptable__why { display: block; margin-top: var(--space-1); font-size: 0.85rem; line-height: 1.45; color: var(--text-muted); max-width: 46ch; }
/* FieldPins column highlight */
.cmptable__us { background: var(--pin-soft); }
.cmptable thead th.cmptable__us { background: var(--pin-soft); }
.cmpcell { display: flex; align-items: center; gap: var(--space-2); font-size: 0.92rem; line-height: 1.4; }
.cmpcell--na { color: var(--text-faint); }
.cmptable .pmark { width: 18px; height: 18px; margin-top: 0; }
.cmptable__note { margin-top: var(--space-6); font-size: 0.8rem; line-height: 1.5; color: var(--text-faint); max-width: 72ch; }

/* ─── Case study · RD Hydrojet (Prompt 10) ─────────────────────────────────
   Evidence-in-progress: setup + measurement plan + publish promise. No numbers
   fabricated — every metric reads "— pending"; the owner quote is a marked
   placeholder, never invented copy. */
.cs__badge {
  display: inline-block;
  margin: var(--space-3) 0 var(--space-6);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--data);
  background: var(--data-soft);
  border: 1px solid rgba(29, 122, 140, 0.3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
}
.cs { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: var(--space-8); margin-top: var(--space-12); align-items: start; }
@media (max-width: 860px) { .cs { grid-template-columns: 1fr; } }
.cs__setup { background: var(--bg-elev); }
.cs__seed { margin-top: var(--space-6); display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3) var(--space-4); align-items: start; }
.cs__seed dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--text-muted); padding-top: var(--space-1); }
.cs__seed dd { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cs__metrics { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.cs__metric { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4) var(--space-6); }
.cs__metric-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.cs__metric-label { font-family: var(--font-head); font-weight: 500; font-size: 1.02rem; }
.cs__metric-desc { margin-top: var(--space-1); font-size: 0.85rem; line-height: 1.45; color: var(--text-muted); }
.cs__metric-val { display: inline-block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--text-faint); }
.cs__promise { margin-top: var(--space-12); max-width: 70ch; line-height: 1.65; }
.cs__promise strong { font-weight: 500; }
.cs__quote { margin: var(--space-8) 0 0; padding: var(--space-8); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-elev-2); max-width: 70ch; }
.cs__quote-pending { font-family: var(--font-head); font-size: 1.15rem; font-style: italic; color: var(--text-faint); }
.cs__quote figcaption { margin-top: var(--space-4); font-size: 0.9rem; color: var(--text-muted); }
.cs__pendtag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--pin); }

/* ─── Pricing model (Prompt 11) ────────────────────────────────────────────
   Two parts (flat base + metered AI), joined by a "+". High-level, no hard
   numbers — amounts read as structure, not figures. */
.pricing {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.pricing__part { background: var(--bg-elev); display: flex; flex-direction: column; }
.pricing__name { font-family: var(--font-head); font-weight: 500; font-size: 1.3rem; margin: var(--space-2) 0 var(--space-1); }
.pricing__amt {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--pin);
  margin-bottom: var(--space-4);
}
.pricing__lede { color: var(--text-muted); }
.pricing__incl { list-style: none; margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.pricing__incl li { position: relative; padding-left: var(--space-6); font-size: 0.92rem; line-height: 1.45; }
.pricing__incl li::before { content: "+"; position: absolute; left: 0; color: var(--data); font-family: var(--font-mono); }
.pricing__plus {
  align-self: center;
  font-family: var(--font-head);
  font-size: 1.8rem;
  color: var(--text-faint);
}
.pricing__summary { margin-top: var(--space-8); max-width: 70ch; line-height: 1.65; }
.pricing__summary strong { font-weight: 500; }
@media (max-width: 760px) {
  .pricing { grid-template-columns: 1fr; }
  .pricing__plus { padding: var(--space-2) 0; }
}

/* ─── Built for your business (Prompt 6 — contextualization + comparator) ─── */
.ctx { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
@media (max-width: 800px) { .ctx { grid-template-columns: 1fr; gap: var(--space-10, 2.5rem); } }
.ctx h3 { font-family: var(--display); font-size: 1.3rem; margin-bottom: var(--space-3); }
.ctx__col > p { color: var(--text-muted); font-size: 0.95rem; }
.ctx__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.ctx__list li { position: relative; padding-left: var(--space-6); color: var(--text-muted); font-size: 0.95rem; }
.ctx__list li::before { content: "\2014"; position: absolute; left: 0; color: var(--pin); }

/* code block — mono, light surface, scrolls on overflow */
.code { font-family: var(--mono); font-size: 0.8rem; line-height: 1.55; color: var(--ink);
  background: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-4) var(--space-6); margin: var(--space-4) 0; overflow-x: auto; white-space: pre; }
.code .c-com { color: var(--slate); }

/* banned-phrase chip — struck through */
.chip--banned { color: var(--pin); background: var(--pin-soft); border-color: rgba(226,72,61,0.25); text-decoration: line-through; }

/* comparator */
.cmp { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elev); padding: var(--space-8); margin-top: var(--space-16); }
.cmp__head { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); }
.cmp__title { font-family: var(--display); font-size: 1.4rem; }
.cmp__toggle { display: inline-flex; flex-wrap: wrap; align-self: flex-start; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.cmp__tab { font-family: var(--body); font-size: 0.9rem; padding: var(--space-3) var(--space-6); background: transparent; border: none; color: var(--slate); cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.cmp__tab + .cmp__tab { border-left: 1px solid var(--line-strong); }
.cmp__tab.is-active { background: var(--pin); color: var(--paper); }
.cmp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
@media (max-width: 800px) { .cmp__grid { grid-template-columns: 1fr; } }
.cmp__pane { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cmp__label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.cmp__photo { display: flex; align-items: center; justify-content: center; gap: var(--space-2); aspect-ratio: 16 / 7; border: 1px solid var(--line); border-radius: var(--radius); background: #F2F1EC; color: var(--slate); font-family: var(--mono); font-size: 0.75rem; }
.cmp__caption { font-style: italic; color: var(--ink); font-size: 0.95rem; }
.cmp__row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.cmp__config { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4); margin-top: var(--space-2); }
.cmp__config dt { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding-top: 0.25em; }
.cmp__config dd { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; color: var(--text-muted); font-size: 0.9rem; }
.cmp__card { border: 1px solid var(--line); border-top: 3px solid var(--pin); border-radius: var(--radius-lg); background: var(--bg-elev-2); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.cmp__desc { color: var(--ink); font-size: 0.95rem; line-height: 1.55; }
.cmp__cta { font-family: var(--body); font-weight: 500; font-size: 0.9rem; text-align: center; color: var(--paper); background: var(--data); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }

/* agency angle — full-width card under the comparator */
.ctx__agency { margin-top: var(--space-12); }
.ctx__agency p { color: var(--text-muted); }

/* ─── Quiet section ─────────────────────────────────────────────────────── */
.quiet__copy { color: var(--text-muted); font-size: 1.1rem; max-width: 65ch; margin: var(--space-6) auto 0; text-align: center; }

/* ─── Waitlist ──────────────────────────────────────────────────────────── */
.waitlist { max-width: 520px; margin: var(--space-12) auto 0; display: flex; flex-direction: column; gap: var(--space-4); }
.waitlist__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .waitlist__row { grid-template-columns: 1fr; } }
.waitlist__field { display: flex; flex-direction: column; gap: var(--space-2); }
.waitlist__label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.waitlist input, .waitlist select {
  font-family: var(--body); font-size: 0.95rem; color: var(--text);
  background: var(--bg-elev-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
}
.waitlist input:focus, .waitlist select:focus { outline: none; border-color: var(--accent); }
.waitlist__fineprint { font-size: 0.8rem; color: var(--text-faint); text-align: center; }
.cta__sub { color: var(--text-muted); text-align: center; max-width: 56ch; margin: var(--space-4) auto 0; }
.waitlist__success, .waitlist__error { text-align: center; margin: var(--space-8) auto 0; max-width: 520px; }
.waitlist__success h3 { font-family: var(--display); font-size: 1.5rem; margin: var(--space-3) 0; }
.waitlist__success p, .waitlist__error p { color: var(--text-muted); }

/* ─── CTA / contact ─────────────────────────────────────────────────────── */
.section--cta, .section--contact { text-align: center; }
.contact__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--space-12); text-align: left; }
.contact__card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color 0.2s var(--ease); }
.contact__card:hover { border-color: var(--accent); }
.contact__label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.contact__value { font-size: 1.05rem; }
.contact__hint { font-size: 0.85rem; color: var(--text-faint); }

/* ─── Footer ────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding: var(--space-16) 0; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-6); }
.footer__tag { color: var(--text-faint); font-size: 0.9rem; margin-top: var(--space-2); }
.footer__coreshift { color: var(--text-muted); border-bottom: 1px solid var(--line-strong); transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.footer__coreshift:hover { color: var(--pin); border-bottom-color: var(--pin); }
.footer__meta { display: flex; align-items: center; gap: var(--space-3); color: var(--text-faint); font-size: 0.9rem; flex-wrap: wrap; }
.footer__meta a:hover { color: var(--accent); }
.footer__sep { color: var(--line-strong); }

/* ─── Legal pages ───────────────────────────────────────────────────────── */
.legal { max-width: var(--container-narrow); margin: 0 auto; padding: var(--space-24) var(--space-8); }
.legal h1 { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: var(--space-4); }
.legal h2 { font-family: var(--display); font-size: 1.3rem; margin: var(--space-8) 0 var(--space-3); }
.legal p, .legal li { color: var(--text-muted); margin-bottom: var(--space-4); }
.legal ul { padding-left: var(--space-6); }
.legal a { color: var(--accent); }
.legal__back { font-family: var(--mono); font-size: 0.8rem; }

/* ─── Scroll reveals ────────────────────────────────────────────────────── */
.scroll-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.scroll-reveal.is-visible { opacity: 1; transform: none; }
.reveal { opacity: 0; transform: translateY(12px); animation: reveal-in 0.8s var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
@keyframes reveal-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal, .reveal { opacity: 1; transform: none; animation: none; }
}