/* ============================================================
   FIELDAMIGO — public site stylesheet
   Aesthetic: Workshop Almanac
   Typography: Bungee (display) / Source Serif 4 (body) / JetBrains Mono (numbers)
   Palette: cream paper · forest green · mustard · terracotta accent

   ONE stylesheet for every page. Do not inline CSS into a page
   again — continuity.html was a clone of this file and drifted
   four separate ways before anyone noticed.
   ============================================================ */

/* ============================================================
   FONTS — self-hosted, latin-subset woff2.
   Was a render-blocking Google Fonts request on every page to two
   third-party hosts. Self-hosting removes that hop, cuts the bytes
   (the CDN served the full 300-900 range plus italics), and makes
   "no third-party requests, no analytics, no cookies" literally
   true site-wide — which the security page claims.
   Source Serif 4 and JetBrains Mono keep their weight axes, so
   bold is real, not synthesised.
   ============================================================ */

@font-face {
  font-family: 'Bungee';
  src: url('/fonts/bungee.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-italic.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* paper / surface */
  --paper:        #f5edd4;
  --paper-deep:   #ebe0bd;
  --paper-edge:   #e0d2a8;
  --paper-tint:   #faf4e0;

  /* ink */
  --ink:          #1d2516;
  --ink-soft:     #3a4630;
  --ink-mute:     #6a7059;

  /* signal colors */
  --field:        #2e5d3d;       /* forest green — primary accent */
  --field-deep:   #1a3a2a;       /* deeper green for headings */
  --field-glow:   #3d8456;       /* lighter green for hover */
  --mustard:      #c98c1a;       /* warm mustard yellow */
  --mustard-hot:  #a87308;       /* deeper mustard for emphasis */
  --terracotta:   #a04621;       /* rust accent for warnings/competitor */
  --terracotta-soft: #c46438;

  /* rules */
  --rule:         #c1ad75;
  --rule-strong:  #8a7536;

  /* type stacks */
  --font-display: 'Bungee', 'Impact', sans-serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* spacing scale */
  --gut: clamp(1rem, 2.5vw, 1.6rem);
  --gut-x: clamp(1.5rem, 5vw, 4rem);

  /* page max */
  --max: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  /* Subtle paper grain via SVG noise data URI + soft top-right tone */
  background-image:
    radial-gradient(ellipse at top right, rgba(201, 140, 26, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(46, 93, 61, 0.06) 0%, transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.15  0 0 0 0 0.09  0 0 0 0.045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-attachment: fixed, fixed, fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: 'kern','liga','onum','pnum';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--mustard); color: var(--paper); }

a { color: var(--field); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color 0.15s ease; }
a:hover { color: var(--mustard-hot); }

/* ============================================================
   LAYOUT — page wrapper
   ============================================================ */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gut-x);
  padding-right: var(--gut-x);
}

/* ============================================================
   MASTHEAD
   ============================================================ */

.masthead {
  border-bottom: 2px solid var(--ink);
  background: var(--paper-tint);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(2px);
}
.masthead::before {
  content: "";
  display: block;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0 18px,
    transparent 18px 28px
  );
}
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0.9rem var(--gut-x);
  max-width: var(--max);
  margin: 0 auto;
}
.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
}
.brand-logo {
  width: 68px;
  height: 68px;
  display: block;
  flex: none;
}
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.brand-mark {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw + 0.6rem, 1.45rem);
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1;
}
.brand-mark .b-amigo { color: var(--field); }
.brand-vol {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
/* Six items rather than v1's five once Safety Gate was added, so the gap and the
   tracking flex a little with the viewport. nowrap is the load-bearing part: without
   it "Why Us" and "How It Goes" break across two lines and the masthead grows a
   ragged second row somewhere around 1280px. */
.nav {
  display: flex;
  gap: clamp(0.85rem, 1.5vw, 1.4rem);
  align-items: baseline;
}
.nav a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: clamp(0.06em, 0.3vw, 0.12em);
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { color: var(--mustard-hot); }
.nav-cta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper) !important;
  padding: 0.5rem 0.95rem;
  text-decoration: none !important;
  border: 2px solid var(--ink);
  transition: all 0.15s ease;
}
.nav-cta:hover { background: var(--field); border-color: var(--field); color: var(--paper) !important; }

@media (max-width: 760px) {
  .nav { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5.5rem);
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: end;
  position: relative;
}
/* Two columns from 880px: the copy, and a plate of the product. Below that it
   stacks — copy first, because a phone-width visitor came to read the headline,
   not to squint at a screenshot above it.

   The ratio is deliberately lopsided. The headline runs to two lines and the
   deck to five, so the text column needs room; the plate is a phone and has a
   fixed sensible width of its own, so it takes what's left. */
@media (min-width: 880px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
}
/* The eyebrow is a rule followed by one line of tracked-out mono. It runs the
   full width above both columns so it stays one line. */
.hero-grid > .hero-eyebrow { grid-column: 1 / -1; }

.hero-shot {
  /* A hero phone at full .shot--phone width would make the hero 715px tall on
     its own and push everything below the fold. */
  max-width: 17rem;
  margin: 0 auto;
  animation: fade-rise 0.9s ease-out both;
  animation-delay: 0.6s;
}
.hero-shot .shot { max-width: none; }
@media (min-width: 880px) {
  .hero-shot { margin-right: 0; }
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mustard-hot);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
  animation: fade-rise 0.7s ease-out both;
}
.hero-eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 2px;
  background: var(--mustard-hot);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.6vw, 4.7rem);
  line-height: 0.94;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.hero-title .line {
  display: block;
  animation: fade-rise 0.8s ease-out both;
}
.hero-title .line-1 { animation-delay: 0.1s; }
.hero-title .line-2 {
  color: var(--field-deep);
  animation-delay: 0.28s;
}

.hero-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: 2rem;
  animation: fade-rise 0.8s ease-out both;
  animation-delay: 0.45s;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  animation: fade-rise 0.8s ease-out both;
  animation-delay: 0.6s;
}
.btn {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.95rem 1.4rem;
  text-decoration: none;
  border: 2px solid var(--ink);
  transition: all 0.15s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper) !important;
}
.btn-primary:hover {
  background: var(--field);
  border-color: var(--field);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn-ghost {
  background: transparent;
  color: var(--ink) !important;
}
.btn-ghost:hover {
  background: var(--mustard);
  border-color: var(--mustard);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}

/* Hero side-decoration: a stamp/seal element */
.hero-stamp {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  animation: fade-rise 1s ease-out both;
  animation-delay: 0.5s;
}
.stamp {
  border: 3px double var(--terracotta);
  color: var(--terracotta);
  padding: 1.1rem 1.4rem;
  text-align: center;
  transform: rotate(-6deg);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.45;
  background: var(--paper-tint);
  position: relative;
  max-width: 16rem;
}
.stamp::before, .stamp::after {
  content: "";
  position: absolute;
  inset: 0.35rem;
  border: 1px solid var(--terracotta);
  pointer-events: none;
}
.stamp .stamp-big {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  margin: 0.4rem 0 0.2rem;
  color: var(--terracotta);
}
@media (max-width: 880px) {
  .hero-stamp { justify-content: flex-start; padding-top: 1rem; }
  .stamp { max-width: 14rem; transform: rotate(-3deg); }
}

/* ============================================================
   CHAPTER / SECTION COMMON
   ============================================================ */

.chapter {
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  position: relative;
}
.chapter + .chapter {
  border-top: 1px solid var(--rule);
}

.chapter-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.2rem;
  align-items: end;
  margin-bottom: 2.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--ink);
}
.chapter-head .ch-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 0.85;
  color: var(--mustard-hot);
  letter-spacing: -0.02em;
}
/* Chapter titles are real <h2>s (an <h1> on continuity) so the page has a
   document outline — they were <span>s until 2026-08-17, which left every page
   as one <h1> over undifferentiated text and gave screen readers no heading
   navigation at all.
   `font-weight: inherit` is load-bearing: the universal reset zeroes margins
   but NOT weight, so a heading element arrives bold and the browser SYNTHESISES
   that bold, because Bungee ships a single weight. Without this line all 51
   chapter titles would thicken and smudge. */
.chapter-head .ch-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  margin: 0;
  font-weight: inherit;
}
.chapter-head .ch-kicker {
  grid-column: 2;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}

/* §02 — Two Ways to Hold It */
.holds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); }
.hold {
  border: 2px solid var(--ink);
  background: var(--paper-tint);
  padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column;
}
.hold-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  padding: 0.25rem 0.6rem; margin-bottom: 0.8rem;
}
.hold h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.15rem; line-height: 1.15; color: var(--field-deep);
  margin: 0 0 0.6rem;
}
.hold p { margin: 0 0 0.9rem; color: var(--ink-soft); }
.hold ul { list-style: none; margin: 0; padding: 0; }
.hold li {
  font-size: 0.92rem; padding: 0.3rem 0 0.3rem 1.3rem;
  position: relative; border-top: 1px solid var(--paper-edge);
}
.hold li::before { content: "•"; position: absolute; left: 0.2rem; color: var(--field); }
.hold li strong { color: var(--ink); }
.bridge {
  display: flex; gap: 1rem; align-items: flex-start;
  margin-top: var(--gut); padding: 1.2rem 1.4rem;
  background: var(--field-deep); color: var(--paper);
  border-left: 5px solid var(--mustard);
}
.bridge strong { color: var(--mustard); }
.bridge em { color: var(--paper-edge); }
.bridge a { color: var(--mustard); }
.bridge-arrow { font-family: var(--font-display); font-size: 1.6rem; color: var(--mustard); line-height: 1; }

/* §08 pricing — managed vs owned */
.price-head {
  font-family: var(--font-display); font-weight: 400; font-size: 1.1rem;
  color: var(--field-deep); margin: 0 0 1rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
}
.price-head-note {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute);
}
.tier-price .per { font-family: var(--font-mono); font-size: 0.5em; color: var(--ink-mute); }
.managed-foot { margin: 1rem 0 0; color: var(--ink-soft); font-size: 0.95rem; }
.managed-foot strong { color: var(--field-deep); }
.price-rule { border: 0; border-top: 2px solid var(--rule); margin: 2.4rem 0 1.6rem; }

@media (max-width: 720px) { .holds { grid-template-columns: 1fr; } }

/* ============================================================
   §01 — THE MATH
   ============================================================ */

.math-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.35;
  color: var(--field-deep);
  border-left: 4px solid var(--mustard);
  padding-left: 1.4rem;
  max-width: 50ch;
  margin: 0 0 2.4rem;
}

.rate-card {
  background: var(--paper-tint);
  border: 2px solid var(--ink);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  position: relative;
  box-shadow: 6px 6px 0 var(--ink);
}
.rate-card::before {
  content: "EST. 2026  ·  TAMPA, FL";
  position: absolute;
  top: -0.7em;
  right: 1.4rem;
  background: var(--paper);
  padding: 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.rate-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.rate-table th, .rate-table td {
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: baseline;
}
.rate-table th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.6rem;
}
.rate-table td.competitor {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--terracotta);
  font-size: 1.05rem;
}
.rate-table td.num {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  text-align: right;
}
.rate-table td.save {
  font-family: var(--font-mono);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--field);
  text-align: right;
}
.rate-table tr:last-child td { border-bottom: none; }

/* Screen-reader-only: the table caption, which sighted readers get from the header row */
.visually-hidden {
  position: absolute;
  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;
}

/* Wide comparison table — let it scroll on phones rather than crush the columns */
.rate-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rate-scroll .rate-table { min-width: 34rem; }
.rate-table td.seat {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-align: right;
}
.rate-table td.addon {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
/* The Fieldamigo row — the answer, set apart from the field */
.rate-table tr.us td { background: rgba(46, 93, 61, 0.07); border-bottom: none; }
.rate-table tr.us td.competitor { color: var(--field-deep); font-style: normal; font-weight: 700; }
.rate-table tr.us td.seat, .rate-table tr.us td.addon { color: var(--field); }
.rate-notes {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--ink-mute);
}
.rate-notes span { display: block; }

.math-foot {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.2rem;
  border-top: 2px dashed var(--rule);
}
.math-foot .foot-fact {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.math-foot .foot-fact strong { color: var(--field-deep); font-weight: 700; }
.math-scope {
  margin-top: 1.4rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-mute);
  max-width: 60ch;
}

/* ============================================================
   §03 — BOTH SIDES ON THE TABLE (the ledger)
   ============================================================ */

.ledger {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  position: relative;
}
@media (min-width: 760px) {
  .ledger {
    grid-template-columns: 1fr 1fr;
    gap: 0 0;
  }
  .ledger > div {
    padding: 0 2rem;
  }
  .ledger > div:first-child { padding-left: 0; border-right: 2px solid var(--ink); }
  .ledger > div:nth-child(2) { padding-right: 0; }
  .ledger > div:nth-child(3) { padding-left: 0; padding-top: 2rem; border-top: 2px dashed var(--rule-strong); border-right: 2px solid var(--ink); }
  .ledger > div:nth-child(4) { padding-right: 0; padding-top: 2rem; border-top: 2px dashed var(--rule-strong); }
}

.ledger h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--field-deep);
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.ledger h3 .marker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--mustard-hot);
  letter-spacing: 0.12em;
}

.ledger ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1rem;
}
.ledger li {
  padding: 0.45rem 0;
  position: relative;
  padding-left: 1.6rem;
  border-bottom: 1px dotted var(--rule);
  line-height: 1.45;
}
.ledger li:last-child { border-bottom: none; }
.ledger li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.45rem;
  color: var(--field);
  font-weight: 700;
}
.ledger li.dot::before {
  content: "·";
  font-size: 1.6rem;
  line-height: 0.9;
  color: var(--mustard);
  top: 0.3rem;
}
.ledger li strong { color: var(--ink); }
.ledger li code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-deep);
  padding: 0 0.3em;
  border-radius: 2px;
}

/* ============================================================
   §04 — NO LIMITS
   ============================================================ */

.limits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 2px solid var(--ink);
  background: var(--paper-tint);
  font-variant-numeric: tabular-nums;
}
.limits-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  border-bottom: 1px solid var(--rule);
}
.limits-row:last-child { border-bottom: none; }
.limits-row.head {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.limits-row > div {
  padding: 0.85rem 1.1rem;
  border-right: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
}
.limits-row > div:last-child { border-right: none; }
.limits-row.head > div {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-right-color: var(--paper-deep);
  color: var(--paper-deep);
}
.limits-row.head > div:first-child { color: var(--paper); }
.lim-label { font-weight: 600; color: var(--ink); }
.lim-saas {
  font-family: var(--font-mono);
  color: var(--terracotta);
  font-style: italic;
}
.lim-saas s { opacity: 0.8; }
.lim-fa {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--field);
  text-transform: uppercase;
}
.unlimited-stamp {
  display: inline-block;
  border: 2px solid var(--field);
  color: var(--field);
  padding: 0.2rem 0.6rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  transform: rotate(-2deg);
}
@media (max-width: 660px) {
  .limits-row { grid-template-columns: 1fr; }
  .limits-row > div {
    border-right: none;
    border-bottom: 1px dashed var(--rule);
    padding: 0.5rem 1rem;
  }
  .limits-row > div:last-child { border-bottom: none; }
  .limits-row.head { display: none; }
  .limits-row > div:nth-child(2)::before { content: "Them: "; color: var(--ink-mute); font-style: normal; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 0.5rem; }
  .limits-row > div:nth-child(3)::before { content: "Fieldamigo: "; color: var(--ink-mute); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 0.5rem; }
}

/* ============================================================
   §06 — JHA SAFETY GATE
   ============================================================ */
.gate-lead {
  font-size: 1.05rem; color: var(--ink-soft); max-width: 68ch;
  line-height: 1.6; margin: 0 0 1.6rem;
}
.gate-lead strong { color: var(--field-deep); }
/* The trade cards. This used to ride on `.gates`, which v1 defined here as 3-up — but
   Phase 2 added a SECOND `.gates` rule further down for the two-column module-gates
   layout, and same specificity means the later one silently won. The trade cards had
   been rendering 2-up and ragged ever since. Own class, so the two layouts can't
   collide again. */
.trade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--gut);
  align-items: start;
}
.gate-disclaimer {
  margin: var(--gut) 0 0; font-family: var(--font-mono);
  font-size: 0.74rem; line-height: 1.6; letter-spacing: 0.01em;
  color: var(--ink-mute); max-width: 80ch;
}
@media (max-width: 860px) { .gates, .trade-grid { grid-template-columns: 1fr; } }

/* ============================================================
   §07 — HOW IT GOES (timeline)
   ============================================================ */

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  counter-reset: step;
}
.timeline li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.2rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--rule);
  counter-increment: step;
  align-items: baseline;
}
.timeline li:last-child { border-bottom: none; }
.timeline li::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--mustard-hot);
  letter-spacing: -0.02em;
  line-height: 1;
}
/* Step headings. The element varies by page so the outline never skips a level
   — h3 on index (nested under a chapter h2), h2 on continuity (nested under the
   page h1). Styling is identical either way; h4 is kept for any page that still
   uses one.
   No margin-top here on purpose: the universal reset at the top of this file
   already zeroes it, so the UA's per-level heading margins (h2 0.83em, h3 1em,
   h4 1.33em) never applied and must not be reintroduced — doing so adds ~21px
   per step and walks the whole page down. */
.timeline h2,
.timeline h3,
.timeline h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.timeline p {
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 60ch;
  line-height: 1.55;
}
.timeline-foot {
  margin-top: 1.6rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--field-deep);
  text-align: right;
}

/* ============================================================
   §07 — PRICING
   ============================================================ */

.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}
@media (min-width: 760px) {
  .tiers { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
}
.tier {
  background: var(--paper-tint);
  border: 2px solid var(--ink);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tier:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.tier.popular {
  border-color: var(--field);
  border-width: 3px;
  background: linear-gradient(180deg, var(--paper-tint) 0%, #f0e9d0 100%);
}
.tier .tier-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.7rem;
}
.tier .star {
  color: var(--field);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  font-family: var(--font-mono);
}
.tier .tier-price {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--field-deep);
  line-height: 1;
  letter-spacing: -0.02em;
}
.tier .tier-eventual {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-mute);
  margin-top: -0.4rem;
  font-style: italic;
}
.tier .tier-eventual::before { content: "eventually "; opacity: 0.75; }
.tier .tier-desc {
  font-size: 0.96rem;
  color: var(--ink-soft);
  flex-grow: 1;
}
.tier .tier-desc strong { color: var(--ink); font-weight: 600; }
.tier .tier-support {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mustard-hot);
  border-top: 1px dotted var(--rule);
  padding-top: 0.7rem;
}

.scarcity {
  background: var(--ink);
  color: var(--paper-tint);
  padding: 1.2rem 1.4rem;
  border-left: 5px solid var(--mustard);
  margin-bottom: 1.4rem;
  font-size: 1rem;
}
.scarcity strong {
  font-family: var(--font-display);
  color: var(--mustard);
  font-weight: normal;
  letter-spacing: 0.04em;
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.3rem;
}

.buyout-card {
  border: 2px dashed var(--field);
  background: rgba(46, 93, 61, 0.06);
  padding: 1.2rem 1.4rem;
}
.buyout-card strong {
  font-family: var(--font-display);
  color: var(--field);
  letter-spacing: 0.04em;
  font-size: 1rem;
}
.buyout-card p { color: var(--ink-soft); margin-top: 0.4rem; font-size: 0.97rem; }

.spotlight {
  background: var(--field-deep);
  color: var(--paper-tint);
  padding: 1.6rem 1.8rem;
  border-left: 5px solid var(--mustard);
  margin-top: 1.6rem;
}
.spotlight-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--field-deep);
  background: var(--mustard);
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.75rem;
}
.spotlight h3 {
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--paper);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
}
.spotlight p {
  color: var(--paper-deep);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}

.retainer-line {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-mute);
}
.retainer-line code {
  font-family: var(--font-mono);
  font-style: normal;
  background: var(--paper-deep);
  padding: 0 0.3em;
  color: var(--field-deep);
}

.retainer-details {
  margin-top: 1.5rem;
  border: 1px solid var(--rule);
  background: var(--paper-tint);
  padding: 0.6rem 1.2rem;
}
.retainer-details summary {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--field-deep);
  cursor: pointer;
  list-style: none;
  padding: 0.4rem 0;
  user-select: none;
}
.retainer-details summary::-webkit-details-marker { display: none; }
.retainer-details summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 0.5em;
  transition: transform 0.2s ease;
  color: var(--mustard-hot);
  font-size: 0.7em;
}
.retainer-details[open] summary::before { transform: rotate(90deg); }
.retainer-details ul {
  margin: 0.8rem 0 0.6rem;
  padding-left: 1.4rem;
  list-style: disc;
}
.retainer-details ul li {
  margin: 0.35rem 0;
  font-size: 0.97rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.retainer-details ul li strong { color: var(--field-deep); }
.retainer-details > p {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--rule);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.retainer-details > p strong { color: var(--terracotta); }

.timeline-intro {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--field-deep);
  border-left: 3px solid var(--mustard);
  padding: 0.6rem 0 0.6rem 1.4rem;
  margin: 0 0 1.8rem;
  max-width: 60ch;
  line-height: 1.5;
}
.timeline-intro em { color: var(--ink); font-style: normal; font-weight: 600; }

/* ============================================================
   §08 — NOTE FROM THE MAKER (editorial column)
   ============================================================ */

.note-col {
  max-width: 58ch;
  margin: 0 auto;
  padding: 0 var(--gut);
}
.note-col .lede {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.4rem;
  line-height: 1.5;
}
.note-col p {
  font-size: 1.07rem;
  margin-bottom: 1.1rem;
  color: var(--ink);
  line-height: 1.65;
}
.note-col p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.3rem;
  float: left;
  line-height: 0.9;
  margin: 0.15rem 0.65rem 0 -0.05rem;
  color: var(--field);
}
.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.15;
  color: var(--field-deep);
  text-align: center;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 1.6rem 0;
  margin: 2rem 0;
  letter-spacing: 0.01em;
}
.note-signoff {
  font-family: var(--font-body);
  font-size: 1.05rem;
  margin-top: 1.5rem;
  color: var(--ink-soft);
}
.note-signoff em { color: var(--ink); }
.status-foot {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
}
.status-foot strong { color: var(--ink-soft); }

/* ============================================================
   §10 — BUILT BY CHARLES
   ============================================================ */

.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 760px) {
  .about { grid-template-columns: 1fr 1.3fr; gap: 2.5rem; }
}
.about-portrait {
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(135deg, var(--paper-deep) 0%, var(--paper-edge) 100%);
  border: 2px solid var(--ink);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-align: center;
  text-transform: uppercase;
  padding: 1.4rem;
}
.about-portrait::after {
  content: "";
  position: absolute;
  inset: -8px -8px 8px 8px;
  border: 2px solid var(--mustard);
  z-index: -1;
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-text h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
  color: var(--ink);
  text-transform: uppercase;
}
.about-text p { font-size: 1.05rem; margin-bottom: 0.9rem; color: var(--ink-soft); line-height: 1.6; }
.about-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mustard-hot);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dotted var(--rule);
}
.about-meta span { color: var(--ink); }

/* ============================================================
   §11 — TALK TO CHARLES (final CTA)
   ============================================================ */

.contact-card {
  background: var(--field-deep);
  color: var(--paper);
  padding: clamp(2rem, 4vw, 3rem);
  border: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.contact-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(201, 140, 26, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.contact-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
  text-transform: uppercase;
  position: relative;
}
.contact-card h3 .accent { color: var(--mustard); }
.contact-card p {
  font-size: 1.1rem;
  color: rgba(245, 237, 212, 0.85);
  max-width: 50ch;
  margin-bottom: 1.6rem;
  position: relative;
}
.contact-card .ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  position: relative;
}
.contact-card .btn {
  border-color: var(--paper);
  color: var(--paper) !important;
}
.contact-card .btn-primary { background: var(--mustard); border-color: var(--mustard); color: var(--ink) !important; }
.contact-card .btn-primary:hover { background: var(--paper); border-color: var(--paper); color: var(--ink) !important; box-shadow: 4px 4px 0 var(--mustard); }
.contact-card .btn-ghost:hover { background: var(--paper); color: var(--ink) !important; box-shadow: 4px 4px 0 var(--mustard); }

.live-system-note {
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: rgba(245, 237, 212, 0.55);
  position: relative;
}
.live-system-note code { color: var(--mustard); }

/* ============================================================
   FOOTER / COLOPHON
   ============================================================ */

footer.colophon {
  border-top: 2px solid var(--ink);
  padding: 2rem 0 2.5rem;
  margin-top: 3rem;
  font-size: 0.85rem;
}
.colophon-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.2rem;
  align-items: baseline;
}
.colophon .mark {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.colophon .meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  max-width: 36rem;
  text-align: right;
}
.colophon .meta strong { color: var(--ink-soft); font-weight: 500; }

/* ============================================================
   §05 — THE FIELD SIDE (crew phones)
   ============================================================ */

.phones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gut);
  margin-top: 2rem;
}
@media (max-width: 980px) { .phones { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .phones { grid-template-columns: 1fr; } }

.phone { margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.ph-screen {
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--paper-tint);
  aspect-ratio: 9 / 16;
  padding: 0.85rem 0.7rem;
  position: relative;
  overflow: hidden;
  box-shadow: 5px 5px 0 var(--ink);
}
.ph-screen::before { /* speaker slot */
  content: "";
  display: block;
  width: 36%; height: 5px;
  margin: 0 auto 0.75rem;
  border-radius: 3px;
  background: var(--ink);
  opacity: 0.85;
}
/* drop-in real screenshots: <img> replaces .ph-sketch, frame does the cropping */
.ph-screen img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}

.ph-sketch { display: flex; flex-direction: column; gap: 0.55rem; height: calc(100% - 1.3rem); }
.ph-head {
  font-family: var(--font-mono);
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.45rem;
}
.ph-card {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 6px;
  padding: 0.55rem 0.6rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.ph-card.now { border-width: 2px; box-shadow: 3px 3px 0 var(--mustard); }
.ph-card.dim { opacity: 0.55; }
.ph-line { height: 0.45rem; border-radius: 3px; background: var(--rule); }
.ph-line.w40 { width: 40%; } .ph-line.w45 { width: 45%; }
.ph-line.w50 { width: 50%; } .ph-line.w55 { width: 55%; }
.ph-line.w60 { width: 60%; } .ph-line.w65 { width: 65%; }
.ph-line.w70 { width: 70%; } .ph-line.w75 { width: 75%; }
.ph-line.w80 { width: 80%; } .ph-line.w85 { width: 85%; }
.ph-chip {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--mustard); color: var(--ink);
  padding: 0.18rem 0.45rem; border-radius: 3px;
}
.ph-chip.dim { background: var(--paper-edge); color: var(--ink-soft); }
.ph-chip.warn { background: var(--terracotta); color: var(--paper); align-self: stretch; text-align: center; }
.ph-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; }
.ph-photos span {
  aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--ink-mute);
  border-radius: 5px;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-mute);
}
.ph-tick { display: flex; align-items: center; gap: 0.5rem; }
.ph-tick > span { font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem; color: var(--field); }
.ph-tick .ph-line { flex: 1; }
.ph-sig {
  border: 1.5px dashed var(--ink-mute);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  color: var(--field-deep);
}
.ph-sig svg { width: 100%; height: auto; display: block; }
.ph-btn {
  margin-top: auto;
  background: var(--field-deep); color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center;
  padding: 0.6rem; border-radius: 6px;
}
.ph-note {
  margin-top: auto;
  font-family: var(--font-body); font-style: italic;
  font-size: 0.75rem; color: var(--ink-mute);
  text-align: center;
}
.phone figcaption { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.45; }
.phone figcaption strong {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: 0.98rem; color: var(--field-deep);
  margin-bottom: 0.15rem;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reveal-on-scroll for chapters (CSS-only, no JS, broad-support fallback) */
.chapter {
  view-timeline-name: --reveal;
  view-timeline-axis: block;
}
@supports (animation-timeline: view()) {
  .chapter {
    animation: fade-rise both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   PRINT (lite — site is not primarily for printing,
   but be civil if someone hits Cmd+P)
   ============================================================ */

@media print {
  body { background: white; color: black; }
  .masthead, .nav-cta, .hero-stamp, .scarcity, .contact-card { background: white !important; color: black !important; }
  .masthead { position: static; }
  a { color: black; text-decoration: underline; }
}

/* ============================================================
   V2 COMPONENTS
   Added for the multi-page site. Everything above this line is
   the v1 stylesheet, extracted verbatim from index.html.
   ============================================================ */

/* ============================================================
   INTRO SPLASH
   The real page renders underneath; this only ever sits on top.
   JS-off, crawlers and reduced-motion visitors never see it.
   ============================================================ */

.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at top right, rgba(201, 140, 26, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(46, 93, 61, 0.10) 0%, transparent 60%);
  overflow: hidden;
  cursor: pointer;
}
.splash[hidden] { display: none; }

.splash-inner { text-align: center; transform-origin: 50% 22%; will-change: transform, opacity; }

.splash-mark {
  font-family: var(--font-display);
  font-size: 13.2vw;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transform: scale(1.06);
}

.splash-rule { height: 3px; background: var(--mustard); margin: clamp(0.9rem, 2vw, 1.6rem) auto 0; width: 0; }

/* The category spelled out, so it has to carry ~30 characters rather than the
   nine of "Your custom FSM + CRM". Tracking comes down from 0.42em to 0.2em to
   buy that room, and the size goes up instead — a tagline nobody has time to
   read is decoration. Wraps to two lines on a narrow phone rather than shrinking
   to unreadable. */
.splash-tag {
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 2.05vw, 1.55rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: clamp(0.9rem, 2vw, 1.5rem);
  max-width: 92vw;
  margin-inline: auto;
  text-wrap: balance;
  opacity: 0;
  padding-left: 0.2em;
}

/* --ink-mute was too light to catch in three seconds — it read as a caption rather
   than the second half of the tagline. --ink-soft at 600 keeps it subordinate to the
   line above without making the reader hunt for it. */
.splash-tagsub {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(0.92rem, 1.45vw, 1.22rem);
  color: var(--ink-soft);
  margin-top: clamp(0.45rem, 1vw, 0.75rem);
  opacity: 0;
}

/* Unregistered mark — ™, never ®, until a registration actually issues. */
.tm {
  font-size: 0.3em;
  vertical-align: super;
  letter-spacing: 0;
  line-height: 1;
  margin-left: 0.06em;
}

.splash-skip {
  position: absolute;
  bottom: clamp(1.2rem, 4vh, 2.4rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-mute);
  opacity: 0;
}

.splash.is-running .splash-mark { animation: mark-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.splash.is-running .splash-rule { animation: rule-out 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.26s forwards; }
.splash.is-running .splash-tag    { animation: tag-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.34s forwards; }
.splash.is-running .splash-tagsub { animation: tag-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.62s forwards; }
/* Not tag-in: that keyframe animates `transform` to translateY(0), which wipes
   out the translateX(-50%) doing the centering and leaves the skip hint sitting
   half a width right of centre. Own keyframe, carrying the offset through. */
.splash.is-running .splash-skip   { animation: skip-in 0.5s ease 1.1s forwards; }

.splash.is-leaving { animation: splash-fade 0.62s cubic-bezier(0.65, 0, 0.35, 1) forwards; pointer-events: none; }
.splash.is-leaving .splash-inner { animation: splash-zoom 0.62s cubic-bezier(0.65, 0, 0.35, 1) forwards; }

@keyframes mark-in {
  from { opacity: 0; transform: scale(1.06); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
@keyframes rule-out { from { width: 0; } to { width: min(62vw, 620px); } }
@keyframes tag-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes skip-in {
  from { opacity: 0; transform: translate(-50%, 0.5rem); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes splash-zoom {
  from { transform: scale(1) translateY(0); opacity: 1; }
  to   { transform: scale(0.26) translateY(-14vh); opacity: 0; }
}
@keyframes splash-fade { from { opacity: 1; } to { opacity: 0; } }

.page-enter .hero-content > * { animation: fade-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.page-enter .hero-content > *:nth-child(1) { animation-delay: 0.10s; }
.page-enter .hero-content > *:nth-child(2) { animation-delay: 0.20s; }
.page-enter .hero-content > *:nth-child(3) { animation-delay: 0.30s; }
.page-enter .hero-content > *:nth-child(4) { animation-delay: 0.40s; }

/* ============================================================
   MOBILE NAV DRAWER
   v1 had `@media (max-width:760px){ .nav{display:none} }` and
   nothing else — a phone had no navigation at all.
   ============================================================ */

a.brand { text-decoration: none; color: inherit; }
a.brand:hover { color: inherit; }

.navdrawer { display: none; margin-left: auto; }

.navdrawer > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  background: var(--paper-deep);
  padding: 0.5rem 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.navdrawer > summary::-webkit-details-marker { display: none; }
.navdrawer > summary::marker { content: ""; }

.navdrawer-bars {
  display: inline-block;
  width: 15px;
  height: 2px;
  background: var(--ink);
  box-shadow: 0 5px 0 var(--ink), 0 -5px 0 var(--ink);
}

.navdrawer-panel {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--paper-tint);
  border-bottom: 2px solid var(--ink);
  border-top: 1px solid var(--rule);
  padding: var(--gut) var(--gut-x) calc(var(--gut) * 1.2);
  display: grid;
  gap: 0.1rem;
  box-shadow: 0 14px 24px -18px rgba(29, 37, 22, 0.6);
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}
.navdrawer-panel a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.68rem 0;
  border-bottom: 1px dotted var(--rule);
}
.navdrawer-panel a:hover { color: var(--field); }
.navdrawer-panel .nav-cta {
  margin-top: 0.9rem;
  text-align: center;
  justify-self: start;
  border-bottom: 2px solid var(--ink);
}

@media (max-width: 880px) {
  .masthead-inner > .nav,
  .masthead-inner > .nav-cta { display: none; }
  .navdrawer { display: block; }
}

/* ============================================================
   OFFSITE LINK — proof you can check, not a call to action
   ============================================================ */

a.offsite {
  color: var(--terracotta);
  font-style: italic;
  text-decoration-color: var(--terracotta-soft);
  text-underline-offset: 0.22em;
  white-space: nowrap;
}
a.offsite:hover { color: var(--mustard-hot); text-decoration-color: var(--mustard-hot); }
a.offsite .ext { font-style: normal; font-size: 0.8em; margin-left: 0.18em; vertical-align: 0.1em; }

/* ============================================================
   §02 MANIFESTO
   ============================================================ */

.ch-title--lead {
  font-size: clamp(1.9rem, 4.8vw, 3.5rem);
  line-height: 0.98;
  color: var(--ink);
}
.ch-title--lead b { color: var(--field-deep); font-weight: inherit; }

.manifesto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.manifesto .prose p { font-size: 1.08rem; }
.manifesto .prose p + p { margin-top: 1.1rem; }

.rules { list-style: none; margin-top: clamp(1.4rem, 3vw, 2rem); border-top: 2px solid var(--ink); }
.rules li {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 0.35rem 1.4rem;
  padding: 0.85rem 0;
  border-bottom: 1px dotted var(--rule);
  align-items: baseline;
}
.rule-name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--field-deep);
}
.rule-why { color: var(--ink-soft); font-size: 0.97rem; }

/* ============================================================
   ONE PRICE BLOCK
   ============================================================ */

.price-block {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.price-card {
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--paper-tint);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.price-tag {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 0.9;
  color: var(--field-deep);
  font-variant-numeric: tabular-nums;
}
.price-per {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.6rem;
  display: block;
}
.price-hr { border: 0; border-top: 2px solid var(--ink); margin: 1.2rem 0; }
.price-line {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.42rem 0;
  border-bottom: 1px dotted var(--rule);
}
.price-line:last-of-type { border-bottom: 0; }
.price-line span:last-child { color: var(--ink); font-weight: 700; text-align: right; }

.included-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mustard-hot);
  margin-bottom: 1rem;
}
.included { list-style: none; columns: 2; column-gap: clamp(1rem, 3vw, 2.5rem); font-size: 0.95rem; }
.included li {
  break-inside: avoid;
  padding: 0.4rem 0 0.4rem 1.4rem;
  border-bottom: 1px dotted var(--rule);
  position: relative;
  color: var(--ink-soft);
}
.included li::before { content: "✓"; position: absolute; left: 0; color: var(--field); font-weight: 700; }
.included-note { margin-top: 1.2rem; font-size: 0.95rem; color: var(--ink-soft); max-width: 54ch; }

/* ============================================================
   MODULE GATES — "only the tools you use"
   ============================================================ */

.gates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.gate-nav {
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--paper-tint);
  overflow: hidden;
}
.gate-nav-head {
  background: var(--field-deep);
  color: var(--paper-tint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.gate-nav-head span:last-child { color: var(--mustard); }
.gate-list { list-style: none; }
.gate-list li {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 0.6rem 1rem;
  border-bottom: 1px dotted var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--ink);
}
.gate-list li:last-child { border-bottom: 0; }
.gate-list li.off {
  color: var(--ink-mute);
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(138, 117, 54, 0.09) 6px 12px);
}
.gate-list li.off .gate-name { text-decoration: line-through; text-decoration-color: var(--rule-strong); }
.gate-pill {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.gate-pill.on { color: var(--field); }
.gate-pill.hid { color: var(--ink-mute); }
.gate-caption {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.gate-layers { list-style: none; margin-top: 1.4rem; }
.gate-layers li {
  padding: 0.75rem 0 0.75rem 2.4rem;
  border-bottom: 1px dotted var(--rule);
  position: relative;
  color: var(--ink-soft);
  font-size: 0.97rem;
}
.gate-layers li:last-child { border-bottom: 0; }
.gate-layers .n {
  position: absolute;
  left: 0;
  top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--mustard-hot);
  letter-spacing: 0.1em;
}

/* ============================================================
   PLATFORM CARD GRID
   ============================================================ */

.platform {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1rem, 2.2vw, 1.5rem);
}
.pcard {
  border: 2px solid var(--ink);
  background: var(--paper-tint);
  box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.pcard:hover { color: var(--ink); transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.pcard-num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--mustard-hot);
}
.pcard-name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  line-height: 1.06;
  color: var(--field-deep);
}
.pcard-desc { font-size: 0.92rem; color: var(--ink-soft); flex: 1; }
.pcard-go {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--field);
}
.pcard.wide {
  grid-column: 1 / -1;
  background: var(--paper-deep);
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.9rem 1.4rem;
}
.pcard.wide .pcard-desc { min-width: min(100%, 32ch); }

/* One card in the grid is allowed to shout. The safety gate is the module a
   prospect either needs badly or not at all, so it gets found rather than
   scanned past. */
.pcard.featured {
  --jha-gold: #e0a835;   /* lightened mustard; plain --mustard is 4.3:1 on this ground */
  background: var(--field-deep);
  border-color: var(--field-deep);
  color: var(--paper);
}
.pcard.featured:hover { color: var(--paper); box-shadow: 8px 8px 0 var(--ink); }
.pcard.featured .pcard-num { color: var(--jha-gold); }
.pcard.featured .pcard-name { color: var(--paper); }
.pcard.featured .pcard-desc { color: var(--paper-edge); }
.pcard.featured .pcard-desc strong { color: var(--paper); }
.pcard.featured .pcard-go { color: var(--jha-gold); }
.pcard-flag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--field-deep);
  background: var(--jha-gold);
  padding: 0.18rem 0.5rem;
}

/* ============================================================
   JHA SAFETY GATE BAND
   The one section that inverts the paper. A safety record is the
   most adversarial artifact the software produces — it exists for
   the day somebody disputes what happened — so the section that
   sells it reads like the record itself rather than like a
   brochure. Palette tones are lightened against the dark ground
   to clear 4.5:1; --mustard itself only reaches 4.3:1 there and
   is used for large text only.
   ============================================================ */

.safety-band {
  --jha-gold:  #e0a835;
  --jha-warn:  #e8865a;
  --jha-ok:    #79c493;
  background: var(--field-deep);
  border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  color: var(--paper);
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
}
.safety-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
}

.sb-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jha-gold);
  margin-bottom: 0.8rem;
}

/* The gate readout — deliberately machine-voiced. */
.gate-panel {
  border: 1px solid rgba(245, 237, 212, 0.28);
  background: rgba(0, 0, 0, 0.22);
  padding: clamp(0.9rem, 2vw, 1.3rem);
}
.gate-status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(245, 237, 212, 0.2);
  padding-bottom: 0.7rem;
  margin-bottom: 0.9rem;
}
.gate-job {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--paper-edge);
  letter-spacing: 0.06em;
}
.gate-verdict {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  line-height: 1;
  color: var(--jha-warn);
}
.gate-checks { list-style: none; margin: 0; padding: 0; }
.gate-checks li {
  position: relative;
  padding: 0.28rem 0 0.28rem 1.9rem;
  font-size: 0.9rem;
  color: var(--paper-edge);
}
.gate-checks li::before {
  position: absolute;
  left: 0;
  top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.gate-checks li.ok::before   { content: "[✓]"; color: var(--jha-ok); }
.gate-checks li.wait::before { content: "[ ]"; color: var(--jha-warn); }
.gate-checks li.wait { color: var(--paper); }
.gate-foot {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(245, 237, 212, 0.2);
  font-size: 0.92rem;
  color: var(--paper);
}
.gate-foot strong { color: var(--jha-gold); }

/* What the sign-off actually writes down. */
.rec-list { list-style: none; margin: 0; padding: 0; }
.rec-list li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.2rem 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(245, 237, 212, 0.14);
  font-size: 0.9rem;
  color: var(--paper-edge);
}
.rec-list li:last-child { border-bottom: 0; }
.rec-list dfn {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jha-gold);
  font-style: normal;
  padding-top: 0.22rem;
}

/* The seal strip — full width under the split. */
.seal-strip {
  border-top: 2px solid var(--jha-gold);
  padding-top: clamp(1.1rem, 2.4vw, 1.6rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1.1rem, 2.4vw, 2rem);
}
.seal-strip h3 {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.1;
  color: var(--jha-gold);
  margin-bottom: 0.5rem;
}
.seal-strip p { font-size: 0.92rem; color: var(--paper-edge); }
.seal-strip p + p { margin-top: 0.6rem; }
.seal-strip strong { color: var(--paper); }

/* The boundary. Sits outside the band, on paper, in the site's own voice —
   the claim and its limit should not look like they came from the same
   marketing department. */
.safety-bound {
  margin-top: clamp(1.2rem, 2.6vw, 1.8rem);
  border-left: 4px solid var(--terracotta);
  padding: 0.2rem 0 0.2rem 1.1rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.safety-bound strong { color: var(--ink); }

/* ============================================================
   SCREENSHOT PLATES
   A reserved plate, the way a manual reserves PLATE IV. Correct
   aspect ratio is held so dropping in the real image causes no
   layout shift.
   ============================================================ */

.shot {
  position: relative;
  border: 2px dashed var(--rule-strong);
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(138, 117, 54, 0.055) 10px 20px),
    var(--paper-deep);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
}
.shot::before, .shot::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--mustard);
  border-style: solid;
}
.shot::before { top: 7px; left: 7px; border-width: 2px 0 0 2px; }
.shot::after { bottom: 7px; right: 7px; border-width: 0 2px 2px 0; }

.shot--desktop { aspect-ratio: 16 / 10; }
.shot--phone { aspect-ratio: 9 / 19.5; }

/* A phone plate never widens past a phone. Without this, the moment the
   two-column .shot-row collapses at 860px the frame takes the full content
   width and a 9/19.5 ratio makes it 1800px tall. */
.shot--phone, .shot--phone-step { max-width: 21rem; }

.shot-plate {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mustard-hot);
  margin-bottom: 0.7rem;
}
.shot-label {
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 1.1vw, 0.8rem);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  max-width: 32ch;
}
.shot-hint {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.shot-row {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}

/* A phone plate is 9/19.5. In the 2.1fr column that made it 691px wide and
   1497px tall — taller than the viewport, dwarfing the prose beside it. Phone
   plates take the narrow column instead and the explanation takes the wide
   one, so the shot reads at roughly the size of a real phone. */
.shot-row--phone { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); }

/* ------------------------------------------------------------
   A FILLED PLATE — the same frame, with the screenshot in it.
   The placeholder's dashed rule and hatch fill are the visual
   language for "reserved"; once the image lands the frame turns
   solid and the mustard corner marks stay, so a filled plate
   still reads as a plate and not as a floating image.
   ------------------------------------------------------------ */

.shot.is-filled {
  padding: 0;
  overflow: hidden;
  border-style: solid;
  border-color: var(--rule-strong);
  background: var(--paper-tint);
  box-shadow: 0 1px 0 rgba(31, 41, 33, 0.06), 0 10px 24px -18px rgba(31, 41, 33, 0.5);
}
/* Corner marks sit above the image rather than under it. */
.shot.is-filled::before, .shot.is-filled::after { z-index: 2; }

.shot.is-filled picture,
.shot.is-filled img {
  display: block;
  width: 100%;
  height: 100%;
}
/* `cover` + top anchoring: the frame's aspect ratio and the encoded image's
   are the same number (scripts/plate-encode.py crops to the CSS ratio, and
   build-site.js writes the real dimensions into the tag), so this crops
   nothing in practice — it is here so a future ratio change degrades by
   trimming the bottom of a screenshot instead of squashing the whole thing. */
.shot.is-filled img { object-fit: cover; object-position: top center; }

/* The estimator pair. A wizard step is a short screen, so these two are
   cropped to 9/17.5 rather than a full phone's 9/19.5 — see the note in
   scripts/plate-encode.py. Both plates share the ratio so the pair aligns. */
.shot--phone-step { aspect-ratio: 9 / 17.5; }

.plate-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem);
  align-items: start;
  max-width: 40rem;
}
.plate-pair > div > .shot { max-width: none; }
.plate-pair figcaption { grid-column: 1 / -1; }

/* ------------------------------------------------------------
   CONTACT SHEET — §05 on the homepage
   Three plates at a third of their usual size, the way a proof
   sheet shows frames. Small on purpose: these are evidence that
   the seven cards above describe real screens, not a gallery.
   ------------------------------------------------------------ */

.cs-lead {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.contact-sheet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem);
  margin-top: 0.9rem;
}
@media (max-width: 760px) {
  .contact-sheet { grid-template-columns: minmax(0, 1fr); max-width: 26rem; }
}

.cs-item {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* Thinner rule and no corner marks: at a third size the marks read as noise,
   and three heavy frames in a row fight the cards above them. */
.cs-item .shot { border-width: 1px; }
.cs-item .shot::before, .cs-item .shot::after { display: none; }
.cs-item .shot {
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cs-item:hover .shot {
  border-color: var(--mustard-hot);
  transform: translateY(-2px);
}

.cs-cap {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.cs-cap b {
  color: var(--mustard-hot);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.cs-item:hover .cs-cap { color: var(--ink-soft); }

/* The prose that would have sat beside a single plate, once a pair has taken
   the full width. Capped so the measure stays readable — the full content
   column is 1052px, which is around 120 characters a line. */
.steps-below {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 44rem;
}
/* The step number under each half of the pair — it is the flow that makes the
   two shots mean something, so the order is labelled rather than implied. */
.plate-step {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.plate-step b { color: var(--mustard-hot); font-weight: 700; }

/* A caption belongs to the plate, so it hangs off the figure rather than
   living in the prose column. */
.plate-cap {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.plate-cap b {
  color: var(--ink-soft);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.62rem;
}

/* ============================================================
   SPEC LIST — feature pages
   A labelled term against its explanation. Used where a feature
   page has to state mechanics precisely rather than argue.
   ============================================================ */

.spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.spec-list li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0.3rem 1.4rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.spec-list dfn {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mustard-hot);
  font-style: normal;
  padding-top: 0.3rem;
}
.spec-list p { font-size: 0.98rem; color: var(--ink-soft); }
.spec-list strong { color: var(--ink); }
@media (max-width: 640px) {
  .spec-list li { grid-template-columns: minmax(0, 1fr); }
  .spec-list dfn { padding-top: 0; }
}

/* ============================================================
   STATUS LEDGER — the security page
   Every row carries a state. The whole credibility of that page
   rests on PLANNED being as visible as LIVE, so the pills are
   the same size and weight and only the color separates them —
   a "planned" row must never look like a footnote.
   ============================================================ */

.status-group { margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
.status-group > h3 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.1;
  color: var(--field-deep);
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 0.2rem;
}
.status-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 1.4rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.status-item h4 {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}
.status-item p {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 68ch;
}
.pill {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.62rem;
  white-space: nowrap;
  border: 1px solid;
  justify-self: end;
}
.pill--live    { color: var(--field-deep); background: #cfe3d3; border-color: var(--field); }
.pill--rolling { color: #6b4a05;           background: #f2e0b4; border-color: var(--mustard-hot); }
.pill--planned { color: var(--ink-soft);   background: var(--paper-deep); border-color: var(--rule-strong); }

/* ============================================================
   FEATURE PAGE HERO — larger than life
   ============================================================ */

.feature-hero {
  padding-top: clamp(3rem, 9vh, 6.5rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid var(--rule);
}
.fh-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mustard-hot);
  margin-bottom: clamp(0.8rem, 2vw, 1.3rem);
}
/* The feature-page title is one word set in Bungee at display size, and Bungee
   is wide — about 0.72em per character with the tracking below. A single clamp
   cannot serve both LEDGER (6 characters) and FOUNDATION (10): at 15vw/12rem the
   long ones ran 230px past the content column, and because body carries
   overflow-x: hidden the page didn't scroll — it just quietly cut the last
   letters off. Nothing reported it, which is why it survived a whole phase.

   So the size is also capped at whatever fits the content column. --fh-chars is
   the character count of the longest word in the title; the .fh-cN classes below
   set it. A page that forgets one gets the 10-character cap, which is safe. */
.fh-title {
  --fh-chars: 10;
  font-family: var(--font-display);
  font-size: min(
    clamp(3.2rem, 15vw, 12rem),
    calc((min(var(--max), 100vw) - 2 * var(--gut-x)) / var(--fh-chars) / 0.72)
  );
  line-height: 0.82;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
}
.fh-c5  { --fh-chars: 5; }
.fh-c6  { --fh-chars: 6; }
.fh-c7  { --fh-chars: 7; }
.fh-c8  { --fh-chars: 8; }
.fh-c9  { --fh-chars: 9; }
.fh-c10 { --fh-chars: 10; }
.fh-deck {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.45;
  max-width: 40ch;
  color: var(--field-deep);
  border-left: 4px solid var(--mustard);
  padding-left: clamp(0.9rem, 2vw, 1.4rem);
}
.fh-facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  margin-top: clamp(2rem, 5vw, 3rem);
  border-top: 2px solid var(--ink);
}
.fh-facts li { padding: 1.1rem 1.1rem 1.1rem 0; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.fh-facts li:last-child { border-right: 0; }
.fh-fact-n {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--field-deep);
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
}
.fh-fact-t {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.5rem;
  display: block;
}

/* ============================================================
   HONEST CAVEAT
   The difference between marketing and a field manual.
   ============================================================ */

.caveat {
  border: 2px solid var(--terracotta);
  border-left-width: 8px;
  background: rgba(160, 70, 33, 0.05);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  max-width: 72ch;
}
.caveat-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 0.6rem;
}
.caveat p { color: var(--ink-soft); }
.caveat p + p { margin-top: 0.7rem; }

/* ============================================================
   SECURITY POSTURE TABLE
   ============================================================ */

.posture { border-top: 2px solid var(--ink); }
.posture-group {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mustard-hot);
  padding: 1.6rem 0 0.5rem;
  border-bottom: 1px solid var(--rule-strong);
}
.posture-row {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) auto;
  gap: 0.5rem 1.4rem;
  padding: 0.85rem 0;
  border-bottom: 1px dotted var(--rule);
  align-items: baseline;
}
.posture-name { font-weight: 700; color: var(--ink); }
.posture-desc { color: var(--ink-soft); font-size: 0.93rem; }

.pill {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
  justify-self: end;
}
.pill.live { color: var(--field); }
.pill.rolling { color: var(--mustard-hot); }
.pill.planned { color: var(--ink-mute); }

/* ============================================================
   PAGE BREAK LABEL
   ============================================================ */

.pagebreak {
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  background: var(--paper-deep);
  padding: 1rem 0;
}
.pagebreak p {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
}

/* ============================================================
   V2 RESPONSIVE
   ============================================================ */

@media (max-width: 860px) {
  .price-block, .gates, .shot-row, .manifesto { grid-template-columns: minmax(0, 1fr); }
  .included { columns: 1; }
  .pcard.wide { flex-direction: column; align-items: stretch; }
}

/* Two phones side by side stop being readable somewhere around 170px each. */
@media (max-width: 560px) {
  .plate-pair { grid-template-columns: minmax(0, 1fr); max-width: 21rem; }
}

@media (max-width: 720px) {
  .posture-row { grid-template-columns: minmax(0, 1fr) auto; }
  .posture-desc { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .rules li { grid-template-columns: minmax(0, 1fr); }
  .fh-facts li { border-right: 0; }
}

/* ============================================================
   LEGAL DOCUMENT PAGES  (body class="legal")
   Folded in from privacy.html / terms.html, which each carried
   their own divergent mini design system. Scoped under .legal so
   these bare element selectors can't reach the marketing pages.
   ============================================================ */

.legal .wrap { max-width: 780px; }

.legal header.topbar { border-bottom: 2px solid var(--ink); background: var(--paper-tint); padding: 1rem 0; }
.legal header.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.legal .mark { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); }
.legal .back {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--field);
}
.legal .back:hover { color: var(--mustard-hot); }

.legal main { padding-top: clamp(2rem, 6vh, 3.5rem); padding-bottom: clamp(2.5rem, 8vh, 4.5rem); }

.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  line-height: 1.05;
  color: var(--field-deep);
  margin-bottom: 0.8rem;
}
.legal h2 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  line-height: 1.15;
  color: var(--field-deep);
  margin: 2.2rem 0 0.7rem;
}
.legal h3 {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mustard-hot);
  margin: 1.6rem 0 0.5rem;
}
.legal p, .legal li { color: var(--ink-soft); }
.legal p + p { margin-top: 0.9rem; }
.legal ul { margin: 0.7rem 0 0.7rem 1.3rem; }
.legal li { margin-bottom: 0.4rem; }
.legal strong { color: var(--ink); }

.legal .updated {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 2rem;
}
.legal .lede { font-size: 1.1rem; color: var(--ink); }
.legal .caps { font-size: 0.95rem; }

.legal .callout {
  border: 2px solid var(--ink);
  background: var(--paper-tint);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0;
}
.legal .callout p:last-child { margin-bottom: 0; }

.legal code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--paper-deep);
  padding: 0.1em 0.35em;
}

.legal table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; font-size: 0.92rem; }
.legal th, .legal td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
.legal th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--paper-deep);
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
}