/* ============================================================================
   Dealone by Belkins - shared stylesheet for all five pages.
   Served same-origin, which the CSP allows under style-src 'self'.
   One file so the five pages cannot drift apart.

   BRAND (locked, resolved from ~/.claude/rules/10-brand-resolution.md):
     Inter, single family, 400-900. Accent #FF5E00. Accent on white #C23E00.
     Dark surface #161718. Body text #3D3D3D. Hero heading solid white, no gradient.

   COMPOSITION: bookend theme. Dark masthead and hero, light body, dark footer.
     Applied identically on all five pages, so it reads as one deliberate
     composition rather than sections flipping at random.

   RADIUS RULE (one system, documented): inputs and buttons 8px,
     blocks and panels 12px, pills fully rounded. Nothing else.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* surfaces */
  --dark:      #161718;
  --dark-2:    #1C1D1F;
  --dark-3:    #232527;
  --dark-line: #2E3033;
  --paper:     #FFFFFF;
  --paper-2:   #F9F9F9;
  --paper-3:   #F5F5F5;
  --line:      #EBEBEB;
  --line-2:    #E0E0E0;

  /* ink */
  --ink:        #161718;
  --body:       #3D3D3D;
  --muted:      #666666;
  --faint:      #8F8F8F;
  --on-dark:    #FFFFFF;
  --on-dark-2:  #B8B8B8;
  --on-dark-3:  #7A7A7A;

  /* accent */
  --accent:      #FF5E00;
  --accent-text: #C23E00;   /* #FF5E00 fails small-text contrast on white */
  --accent-deep: #F24A0D;
  --accent-wash: #FFF3EC;

  /* type */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --code: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: clamp(36px, 5.0vw, 64px);
  --fs-h1:      clamp(32px, 4.6vw, 56px);
  --fs-h2:      clamp(25px, 3.1vw, 38px);
  --fs-h3:      20px;
  --fs-h4:      16.5px;
  --fs-lede:    clamp(17.5px, 1.5vw, 21px);
  --fs-body:    16px;
  --fs-sm:      14.5px;
  --fs-xs:      13px;
  --fs-micro:   11px;

  /* space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* radius */
  --r-sm: 8px; --r-md: 12px; --r-full: 999px;

  --shell: 1200px;
  --measure: 68ch;
}

html { scroll-behavior: auto; }

body {
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--accent); color: #fff; }
a { color: var(--accent-text); text-underline-offset: 3px; }
img, svg { max-width: 100%; }

.shell     { max-width: var(--shell); margin: 0 auto; padding: 0 28px; }
.shell-nar { max-width: 860px;        margin: 0 auto; padding: 0 28px; }
@media (max-width: 620px) { .shell, .shell-nar { padding: 0 20px; } }

/* skip link, because the masthead is sticky and keyboard users land in it */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 12px 18px;
  font-weight: 700; font-size: var(--fs-sm); border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- masthead */
.sentinel { position: absolute; top: 0; height: 1px; width: 100%; }

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--dark);
  border-bottom: 1px solid transparent;
}
.masthead-in {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: var(--shell); margin: 0 auto; padding: 18px 28px;
}
.masthead.is-stuck { border-bottom-color: var(--dark-line); }
.masthead.is-stuck .masthead-in { padding-top: 11px; padding-bottom: 11px; }
@media (max-width: 620px) { .masthead-in { padding: 14px 20px; } }

.wordmark { display: inline-flex; align-items: baseline; gap: 9px; text-decoration: none; }
.wordmark b { color: var(--on-dark); font-weight: 800; font-size: 17px; letter-spacing: -0.025em; }
.wordmark span {
  color: var(--accent); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  color: var(--on-dark-2); text-decoration: none; font-size: var(--fs-sm);
  font-weight: 500; white-space: nowrap;
}
.nav a:hover { color: var(--on-dark); }
.nav a.is-current { color: var(--on-dark); }
.nav a.is-current::after {
  content: ''; display: block; height: 2px; background: var(--accent); margin-top: 5px;
}
@media (max-width: 900px) { .nav { gap: 18px; } .nav a { font-size: 13.5px; } }
@media (max-width: 720px) { .nav .nav-hide { display: none; } }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: -0.01em; padding: 13px 22px; border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #FFFFFF; }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost-dark { background: transparent; color: var(--on-dark); border-color: #3D4043; }
.btn-ghost-dark:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); }
.btn-sm { padding: 9px 15px; font-size: var(--fs-xs); }

/* ------------------------------------------------------------------- hero */
.hero { background: var(--dark); color: var(--on-dark); padding: 72px 0 80px; }
.hero-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 56px; align-items: end; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; align-items: start; } }
.hero.compact { padding: 56px 0 60px; }

.kicker {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 22px;
}
h1 {
  font-size: var(--fs-display); font-weight: 900; line-height: 1.02;
  letter-spacing: -0.035em; color: var(--on-dark); margin-bottom: 24px;
}
.hero.compact h1 { font-size: var(--fs-h1); }
h1 em { font-style: normal; color: var(--accent); }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--on-dark-2); max-width: 56ch; }
/* the promise line: loud, but not competing with the h1 for line count */
.hero-claim {
  font-size: clamp(19px, 2.1vw, 27px); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.22; color: var(--accent); max-width: 26ch; margin: -8px 0 20px;
}
.lede strong { color: var(--on-dark); font-weight: 600; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero-terms { margin-top: 22px; font-size: var(--fs-xs); color: var(--on-dark-3); line-height: 1.7; }
.hero-terms b { color: var(--on-dark-2); font-weight: 600; }

/* the public counter, which ships at zero on purpose */
.counter { border: 1px solid var(--dark-line); border-radius: var(--r-md); padding: 20px 22px; }
.counter-h {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 16px;
}
.counter-row { display: grid; gap: 12px; }
.counter-row div { display: flex; align-items: baseline; gap: 10px; }
.counter-row b {
  font-size: 30px; font-weight: 900; letter-spacing: -0.04em; color: var(--accent);
  line-height: 1; min-width: 40px;
}
.counter-row span { font-size: var(--fs-sm); color: var(--on-dark-2); }
.counter-note { margin-top: 16px; font-size: var(--fs-xs); color: var(--on-dark-3); line-height: 1.6; }

/* ---------------------------------------------------- numbered sections */
.band { padding: var(--s9) 0; border-bottom: 1px solid var(--line); }
.band.tint { background: var(--paper-2); }
.band.dark { background: var(--dark); color: var(--on-dark-2); border-bottom-color: var(--dark-line); }
.band.dark h2, .band.dark h3, .band.dark .num { color: var(--on-dark); }
.band.dark .sub { color: var(--on-dark-2); }
@media (max-width: 720px) { .band { padding: var(--s8) 0; } }

/* the marker is a structural numeral in the gutter, not a micro-label */
.band-head { display: grid; grid-template-columns: 84px 1fr; gap: 28px; align-items: start; }
@media (max-width: 820px) { .band-head { grid-template-columns: 1fr; gap: 10px; } }
.num {
  font-size: 40px; font-weight: 900; letter-spacing: -0.05em; color: var(--line-2);
  line-height: 0.85;
}
.band.tint .num { color: #DCDCDC; }
.band.dark .num { color: #3A3D40; }
@media (max-width: 820px) { .num { font-size: 26px; color: var(--accent); } }

h2 {
  font-size: var(--fs-h2); font-weight: 800; line-height: 1.12;
  letter-spacing: -0.03em; color: var(--ink); max-width: 22ch;
}
h2 em { font-style: normal; color: var(--accent-text); }
.band.dark h2 em { color: var(--accent); }
.sub { font-size: 17px; color: var(--muted); max-width: var(--measure); margin-top: 16px; }
.band-body { margin-top: var(--s7); }
.band-head + .band-body { margin-top: var(--s7); }

h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
p + p { margin-top: 14px; }

/* ------------------------------------------------- editorial split layouts */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
.split-7-5 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
.split-5-7 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
@media (max-width: 900px) {
  .split, .split-7-5, .split-5-7 { grid-template-columns: 1fr; gap: 32px; }
}

/* a hairline-ruled list, used instead of card grids where cards add nothing */
.ruled { border-top: 1px solid var(--line); }
.ruled > li, .ruled > div {
  list-style: none; padding: 22px 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: start;
}
@media (max-width: 720px) { .ruled > li, .ruled > div { grid-template-columns: 1fr; gap: 8px; } }
.ruled dt, .ruled .k { font-weight: 700; color: var(--ink); font-size: var(--fs-h4); }
.ruled dd, .ruled .v { color: var(--muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------- moves */
.moves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 48px; }
@media (max-width: 820px) { .moves { grid-template-columns: 1fr; gap: 30px; } }
.move { border-top: 3px solid var(--accent); padding-top: 20px; }
.move-n {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.14em;
  color: var(--accent-text); margin-bottom: 9px;
}
.move p { font-size: var(--fs-sm); color: var(--muted); margin-top: 7px; }

/* --------------------------------------------------------------- tables */
.tbl-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
}
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: var(--fs-sm); }
th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); background: var(--paper-2);
  position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: none; }
tr.is-us { background: var(--accent-wash); }
tr.is-us td { color: var(--ink); }
td b, th b { color: var(--ink); font-weight: 700; }

.pill {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-full); white-space: nowrap;
}
.pill.human { background: var(--accent-wash); color: var(--accent-text); }
.pill.auto  { background: var(--paper-3); color: #525252; }
.pill.you   { background: var(--ink); color: #FFFFFF; }

/* --------------------------------------------------------------- ladder */
.rungs { display: grid; gap: 14px; }
.rung {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 24px; align-items: start;
  padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper);
}
.rung.is-core { border: 2px solid var(--accent); }
@media (max-width: 780px) { .rung { grid-template-columns: 1fr; gap: 12px; padding: 22px; } }
.rung-step {
  font-size: 26px; font-weight: 900; letter-spacing: -0.05em; color: var(--line-2); line-height: 1;
}
.rung.is-core .rung-step { color: var(--accent); }
@media (max-width: 780px) { .rung-step { font-size: 20px; color: var(--accent); } }
.rung-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 7px;
}
.rung.is-core .rung-label { color: var(--accent-text); }
.rung h3 { margin-bottom: 7px; }
.rung p { font-size: var(--fs-sm); color: var(--muted); }
.price { text-align: right; }
@media (max-width: 780px) { .price { text-align: left; } }
.price b {
  display: block; font-size: 32px; font-weight: 900; letter-spacing: -0.04em;
  color: var(--ink); line-height: 1; white-space: nowrap;
}
.rung.is-core .price b { color: var(--accent-text); }
.price small {
  display: block; font-size: var(--fs-xs); color: var(--faint);
  margin-top: 7px; line-height: 1.45; max-width: 21ch; margin-left: auto;
}
@media (max-width: 780px) { .price small { margin-left: 0; max-width: none; } }

/* the refund promise, deliberately the loudest block on the pricing page */
.promise {
  margin-top: 18px; padding: 22px 26px; border-radius: var(--r-md);
  background: var(--ink); color: var(--on-dark-2); font-size: var(--fs-sm); line-height: 1.65;
}
.promise b { color: var(--accent); font-weight: 700; }

/* --------------------------------------------------------------- notes */
.note {
  padding: 18px 22px; border-left: 3px solid var(--accent);
  background: var(--accent-wash); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm); line-height: 1.62; color: var(--body);
}
.note b { color: var(--ink); font-weight: 700; }
.cite {
  padding: 15px 18px; background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--line-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.6;
}
.quiet { color: var(--faint); font-size: var(--fs-xs); }

/* --------------------------------------------------------------- gates */
.gates { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px) { .gates { grid-template-columns: 1fr; } }
.gate { padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.gate.no { background: var(--paper-2); }
.gate h3 { margin-bottom: 14px; }
.gate ul { list-style: none; }
.gate li { font-size: var(--fs-sm); color: var(--body); padding: 8px 0 8px 26px; position: relative; }
.gate li::before { position: absolute; left: 0; top: 8px; font-weight: 800; }
.gate.yes li::before { content: '\2713'; color: var(--accent); }
.gate.no  li::before { content: '\2715'; color: var(--faint); }

/* --------------------------------------------------------------- refusals */
.refusals { display: grid; gap: 12px; }
.refusals div {
  padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); font-size: var(--fs-sm); color: var(--body);
}
.refusals b { display: block; color: var(--ink); font-weight: 700; margin-bottom: 3px; }

/* --------------------------------------------------------------- faq */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 18px; padding: 20px 0;
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-weight: 800; font-size: 22px; flex: none; }
.faq details[open] summary::after { content: '\2013'; }
.faq details p { padding: 0 0 20px; font-size: var(--fs-body); color: var(--muted); max-width: var(--measure); }
.faq details p + p { padding-top: 0; margin-top: -6px; padding-bottom: 20px; }

/* --------------------------------------------------------------- forms */
.form-card { background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: var(--r-md); padding: 30px; }
@media (max-width: 620px) { .form-card { padding: 20px; } }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .f-grid { grid-template-columns: 1fr; } }
.field { display: block; }
.field > span {
  display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 11px 13px;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.field .hint {
  display: block; font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--faint); margin-top: 6px;
}
.form-card .field > span { color: #9A9DA0; }
.form-card .field input, .form-card .field select, .form-card .field textarea {
  background: var(--dark-3); border-color: #3D4043; color: var(--on-dark);
}
.form-card .field .hint { color: var(--on-dark-3); }
.form-card .field input::placeholder, .form-card .field textarea::placeholder { color: #6E7175; }

.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font-size: var(--fs-sm); color: var(--on-dark-2); line-height: 1.55; }
.consent input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--accent); }
.consent b { color: var(--on-dark); font-weight: 700; }
.form-msg { margin-top: 16px; font-size: var(--fs-sm); font-weight: 600; display: none; }
.form-msg.on { display: block; }
.form-msg.ok  { color: #7FD1A8; }
.form-msg.bad { color: #FF8A5B; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------- tool */
.tool { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 30px; }
@media (max-width: 620px) { .tool { padding: 20px; } }
.tool .f-grid { grid-template-columns: 1fr 1fr; }
.req { float: right; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent-text); }
.own { margin-top: 20px; padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--r-md); background: var(--paper-2); }
.own > span {
  display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 7px;
}
.own p { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 14px; max-width: 64ch; }
.own-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 720px) { .own-grid { grid-template-columns: 1fr; } }
.own-grid input {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px;
}
.own-grid input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.tool-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.tool-err { color: var(--accent-text); font-size: var(--fs-sm); font-weight: 600; }
.out { margin-top: 26px; display: none; }
.out.on { display: block; }
.out-note { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.out-block { margin-bottom: 26px; }
.out-h { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.out-h h4 { font-size: var(--fs-sm); font-weight: 800; }
.copy {
  background: none; border: 1px solid var(--line-2); color: var(--muted);
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-sm); cursor: pointer;
}
.copy:hover { border-color: var(--accent); color: var(--accent-text); }
.q { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 15px; margin-bottom: 10px; background: var(--paper-2); }
.q code { display: block; font-family: var(--code); font-size: 12.5px; line-height: 1.6; color: var(--ink); word-break: break-word; }
.q-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 8px; }
.q em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.q a.run {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--accent-text); text-decoration: none; border-bottom: 1px solid rgba(194,62,0,0.35);
}
.q a.run:hover { border-bottom-color: var(--accent); }
.q .plain-tag { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
pre.draft {
  font-family: var(--code); font-size: 12.5px; line-height: 1.7; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 16px; white-space: pre-wrap; word-break: break-word;
}
.honest { margin-top: 10px; padding: 18px 20px; background: var(--ink); border-radius: var(--r-md); color: var(--on-dark-2); font-size: var(--fs-sm); line-height: 1.62; }
.honest b { color: var(--on-dark); font-weight: 700; }

/* --------------------------------------------------------------- diagrams */
figure.dia { margin: 0; }
figure.dia svg { display: block; width: 100%; height: auto; }
figure.dia figcaption { margin-top: 12px; font-size: var(--fs-xs); color: var(--faint); }

/* --------------------------------------------------------------- next-page */
.next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .next { grid-template-columns: 1fr; } }
.next a {
  display: block; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; background: var(--paper);
}
.next a:hover { border-color: var(--accent); }
.next b { display: block; color: var(--ink); font-size: var(--fs-h4); font-weight: 700; margin-bottom: 5px; }
.next span { display: block; color: var(--muted); font-size: var(--fs-xs); }

/* --------------------------------------------------------------- footer */
footer { background: var(--dark); color: var(--on-dark-3); padding: 56px 0 44px; font-size: var(--fs-xs); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } }
footer h5 { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-2); margin-bottom: 12px; }
footer a { color: var(--on-dark-2); text-decoration: none; }
footer a:hover { color: var(--accent); }
footer ul { list-style: none; display: grid; gap: 8px; }
.foot-note { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--dark-line); line-height: 1.7; }

/* --------------------------------------------------------------- motion
   Reveals are OPT-IN. Without JS the page is fully visible, because an
   unrevealed section would hide pricing, gates and the tool entirely. */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.js { scroll-behavior: smooth; }
  html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  html.js .reveal.in { opacity: 1; transform: none; }
  .btn, .next a, .masthead, .masthead-in { transition: background .15s ease, border-color .15s ease, color .15s ease, padding .18s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, html.js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   DIAGRAMS
   Composed in CSS rather than a fixed-viewBox SVG, because a 1000-unit SVG
   scaled to a 390px phone renders its labels at about 4px. These reflow.
   Inline SVG is used only for the connector glyphs, which have no text.
   ========================================================================= */

/* the signal-to-close pipeline */
.pipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
@media (max-width: 900px) { .pipe { grid-template-columns: 1fr; } }
.pipe-stage { position: relative; padding: 0 18px 0 0; }
.pipe-stage:last-child { padding-right: 0; }
@media (max-width: 900px) {
  .pipe-stage { padding: 0 0 0 24px; border-left: 2px solid var(--line-2); padding-bottom: 24px; }
  .pipe-stage:last-child { border-left-color: transparent; padding-bottom: 0; }
}
.pipe-rule { height: 2px; background: var(--line-2); position: relative; margin-bottom: 18px; }
.pipe-rule::before {
  content: ''; position: absolute; left: 0; top: -4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent);
}
.pipe-stage:not(:last-child) .pipe-rule::after {
  content: ''; position: absolute; right: 0; top: -3px;
  border-left: 7px solid var(--line-2); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
@media (max-width: 900px) {
  .pipe-rule { width: 2px; height: 0; margin: 0 0 12px -26px; background: none; }
  .pipe-rule::before { left: -5px; top: 4px; }
  .pipe-stage:not(:last-child) .pipe-rule::after { display: none; }
}
.pipe-k { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.pipe-t { font-size: var(--fs-h4); font-weight: 700; color: var(--ink); letter-spacing: -0.015em; margin-bottom: 6px; }
.pipe-d { font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; padding-right: 14px; }
.pipe-who { margin-top: 10px; }
.band.dark .pipe-t { color: var(--on-dark); }
.band.dark .pipe-d { color: var(--on-dark-2); }
.band.dark .pipe-rule { background: #3A3D40; }
.band.dark .pipe-stage:not(:last-child) .pipe-rule::after { border-left-color: #3A3D40; }

/* when money moves, relative to the founder's own cash */
.money { display: grid; gap: 0; }
.money-row {
  display: grid; grid-template-columns: 148px 1fr 96px; gap: 22px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.money-row:first-child { border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .money-row { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .money-bar { grid-column: 1 / -1; }
}
.money-when { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
/* the bar gets its own fixed track so a 100% fill cannot starve the label */
.money-bar { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: center; }
@media (max-width: 900px) { .money-bar { grid-template-columns: 110px 1fr; gap: 12px; } }
@media (max-width: 720px) { .money-bar { grid-template-columns: 1fr; gap: 8px; } }
.money-fill { height: 10px; border-radius: var(--r-full); background: var(--accent); }
.money-fill.ghost { background: var(--line-2); }
.money-label { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.money-amt { text-align: right; font-weight: 800; color: var(--ink); font-size: var(--fs-h4); white-space: nowrap; }
.money-amt.zero { color: var(--faint); font-weight: 600; }
.money-amt.pos { color: #1F7A4D; }

/* the ladder, as a stepped climb */
.climb { display: grid; gap: 8px; }
.climb-step {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline;
  padding: 16px 20px; border-radius: var(--r-sm); background: var(--paper-2);
  border-left: 3px solid var(--line-2);
}
.climb-step.is-core { background: var(--accent-wash); border-left-color: var(--accent); }
.climb-step b { color: var(--ink); font-weight: 700; font-size: var(--fs-h4); }
.climb-step span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }
.climb-step .amt { font-weight: 800; color: var(--ink); white-space: nowrap; }
.climb-step.is-core .amt { color: var(--accent-text); }

/* the flat line: activity is not demand */
.flat { padding: 8px 0 0; }
.flat-plot { position: relative; height: 132px; border-bottom: 2px solid var(--accent); }
.flat-y {
  position: absolute; left: 0; bottom: 8px; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
}
.flat-mark { position: absolute; bottom: 0; transform: translateX(-50%); text-align: center; width: 118px; }
.flat-mark i { display: block; width: 1px; height: 20px; background: var(--line-2); margin: 0 auto 8px; }
.flat-mark span { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }
.flat-x { display: flex; justify-content: space-between; margin-top: 10px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 760px) {
  .flat-plot { height: auto; border-bottom: none; display: grid; gap: 0; }
  .flat-y { position: static; margin-bottom: 12px; }
  .flat-mark { position: static; transform: none; width: auto; text-align: left; padding: 10px 0 10px 22px; border-left: 2px solid var(--accent); }
  .flat-mark i { display: none; }
  .flat-x { display: none; }
}

/* the counter, when it appears in the light body rather than the dark hero */
.tally { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .tally { grid-template-columns: 1fr; } }
.tally div { padding: 4px 24px; border-left: 1px solid var(--line); }
.tally div:first-child { border-left: none; padding-left: 0; }
@media (max-width: 720px) {
  .tally div { border-left: none; border-top: 1px solid var(--line); padding: 16px 0; }
  .tally div:first-child { border-top: none; padding-top: 0; }
}
.tally b { display: block; font-size: 56px; font-weight: 800; letter-spacing: -0.05em; color: var(--ink); line-height: 1; }
.tally span { display: block; margin-top: 8px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }

/* small utilities, so pages carry no inline style attributes */
.mt-s { margin-top: 18px; }
.mt-m { margin-top: 26px; }
.mt-l { margin-top: 36px; }
.mb-m { margin-bottom: 26px; }
.mb-l { margin-bottom: 34px; }
.center { text-align: center; }
.center h2, .center .sub { margin-left: auto; margin-right: auto; }
.center .cta-row { justify-content: center; }
.wide { max-width: 80ch; }
.ink { color: var(--ink); }
.band.dark .ink { color: var(--on-dark); }
.foot-blurb { margin-top: 14px; max-width: 34ch; line-height: 1.7; }

/* full rung detail blocks on the packages page */
.rung-full { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); padding: 30px 32px; margin-bottom: 16px; }
.rung-full.is-core { border: 2px solid var(--accent); }
@media (max-width: 620px) { .rung-full { padding: 22px; } }
.rung-full-head { display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start; padding-bottom: 22px; }
@media (max-width: 620px) { .rung-full-head { grid-template-columns: 1fr; gap: 10px; } }
.rung-price { font-size: 30px; font-weight: 900; letter-spacing: -0.04em; color: var(--ink); line-height: 1.1; margin-top: 8px; }
.rung-full.is-core .rung-price { color: var(--accent-text); }
.rung-full-body .ruled { border-top: 1px solid var(--line); }
.rung-full-body .ruled > div:last-child { border-bottom: none; padding-bottom: 0; }
blockquote.note { margin: 0; }

/* full move blocks on how-it-works */
.move-full { border-top: 2px solid var(--line-2); padding: 30px 0 36px; }
.move-full:first-child { border-top: none; padding-top: 0; }
.move-full-head { display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start; margin-bottom: 26px; }
@media (max-width: 620px) { .move-full-head { grid-template-columns: 1fr; gap: 8px; } }
.move-full-head h3 { font-size: var(--fs-h3); max-width: 34ch; }
.move-full-body .ruled { border-top: 1px solid var(--line); }
.move-full-body .ruled > div { grid-template-columns: 1fr; gap: 6px; }
.move-full-body .ruled > div:last-child { border-bottom: none; }
.move-full-body .ruled .k { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
code { font-family: var(--code); font-size: 0.88em; background: var(--paper-3); padding: 2px 6px; border-radius: 4px; color: var(--ink); }

/* the depth ladder on the teardown page */
.depth { display: grid; gap: 10px; }
.depth-row { display: flex; align-items: center; gap: 14px; }
.depth-bar { padding: 16px 20px; border-radius: var(--r-sm); }
.depth-bar b { display: block; font-size: var(--fs-h4); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.depth-bar span { display: block; font-size: var(--fs-xs); margin-top: 4px; line-height: 1.5; }
.depth-bar.is-top  { width: 52%; background: var(--accent); color: #FFFFFF; }
.depth-bar.is-mid  { width: 74%; background: var(--accent-wash); color: var(--ink); border: 1px solid var(--accent); }
.depth-bar.is-base { width: 100%; background: var(--paper-3); color: var(--body); }
@media (max-width: 720px) { .depth-bar.is-top, .depth-bar.is-mid, .depth-bar.is-base { width: 100%; } }
.depth-bar.is-top span { color: rgba(255,255,255,0.88); }
.depth-chip { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
.depth-chip.free { color: var(--faint); }
.depth-rule { display: flex; justify-content: space-between; gap: 16px; border-top: 2px dashed var(--line-2); padding-top: 10px; margin-top: 4px; }
.depth-rule span { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

/* ---------------------------------------------------------------- overflow
   Grid and flex children default to min-width:auto, so a child containing a
   wide table or a long unbroken label refuses to shrink and pushes the page
   sideways. These three rules are the fix, and the browser suite asserts it. */
.split > *, .split-7-5 > *, .split-5-7 > *, .hero-grid > *,
.gates > *, .moves > *, .next > *, .pipe > *, .band-head > *,
.rung > *, .rung-full-head > *, .move-full-head > *, .ruled > * > * { min-width: 0; }
.money-bar > *, .money-label { min-width: 0; }
.money-label { overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .btn { white-space: normal; text-align: center; }
}

/* ============================================================================
   COMMITMENT STRIP
   Every figure here is a term of the offer, traceable to DECISION_RECORD §2.
   It sits under the hero, which is where a proof strip belongs, and it exists
   so the honest 0/0/0 counter is not the only number on the page. Nothing in
   here is a performance claim, because there is no performance to claim yet.
   ========================================================================= */
.stats { background: var(--dark-2); border-top: 1px solid var(--dark-line); }
.stats-in { display: grid; grid-template-columns: repeat(5, 1fr); max-width: var(--shell); margin: 0 auto; }
@media (max-width: 1000px) { .stats-in { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .stats-in { grid-template-columns: 1fr; } }
.stat { padding: 30px 26px; border-left: 1px solid var(--dark-line); }
.stat:first-child { border-left: none; }
@media (max-width: 1000px) {
  .stat { border-left: none; border-top: 1px solid var(--dark-line); }
  .stat:nth-child(-n+2) { border-top: none; }
}
@media (max-width: 560px) {
  .stat { border-top: 1px solid var(--dark-line); }
  .stat:first-child { border-top: none; }
}
.stat b {
  display: block; font-size: 46px; font-weight: 900; letter-spacing: -0.05em;
  color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums;
}
.stat i {
  display: block; font-style: normal; font-size: var(--fs-h4); font-weight: 700;
  color: var(--on-dark); margin-top: 12px; letter-spacing: -0.015em;
}
.stat span { display: block; font-size: var(--fs-xs); color: var(--on-dark-3); margin-top: 6px; line-height: 1.5; }
.stats-foot {
  max-width: var(--shell); margin: 0 auto; padding: 0 28px 26px;
  font-size: var(--fs-xs); color: var(--on-dark-3);
}
@media (max-width: 620px) { .stats-foot { padding: 0 20px 22px; } }