/* ============================================================
   PALMER LEAD MACHINE — v3 components
   Section-level building blocks. Tokens only — no literal hex.
   ============================================================ */

/* ============================================================
   HERO VISUAL — a live-looking CRM frame
   ============================================================ */
.frame {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
}
.frame::after {
  /* accent rim light along the top edge */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber-line) 30%, var(--amber-line) 70%, transparent);
}

.frame-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
}
.frame-bar i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line-2);
  flex: none;
}
.frame-bar .url {
  margin-left: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  color: var(--faint);
}

.frame-body { padding: 18px; }

.crm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.crm-title { font-size: .87rem; font-weight: 600; letter-spacing: -.02em; }
.crm-pill {
  font-family: "JetBrains Mono", monospace;
  font-size: .64rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  color: var(--amber);
}

/* Lead rows */
.lead {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px 13px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  margin-bottom: 8px;
  overflow: hidden;
}
/* Left bar = SLA freshness, never score. Mirrors the real CRM. */
.lead .bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ok);
}
.lead.warm .bar { background: var(--amber); }
.lead.hot  .bar { background: var(--hot); }

.lead .av {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 600;
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--muted);
  flex: none;
}
.lead .meta { flex: 1; min-width: 0; }
.lead .nm {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.lead .nm .new {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--glow);
  flex: none;
}
.lead .sm {
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  color: var(--faint);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lead .tag {
  font-family: "JetBrains Mono", monospace;
  font-size: .61rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  flex: none;
}
.lead .tag.live {
  border-color: var(--amber-line);
  background: var(--amber-soft);
  color: var(--amber);
}

/* The "new lead landed" flash */
.lead.flash { animation: flash 2.2s var(--ease); }
@keyframes flash {
  0%   { background: var(--amber-soft); border-color: var(--amber-line); }
  100% { background: var(--card); border-color: var(--line); }
}

/* Incoming-call popover */
.callpop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--amber-line);
  background: linear-gradient(135deg, var(--amber-soft), transparent);
}
.callpop .ring {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-grad);
  color: var(--on-accent);
  flex: none;
  animation: ringpulse 1.8s var(--ease) infinite;
}
.callpop .ring svg { width: 16px; height: 16px; }
@keyframes ringpulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--glow); }
  50%      { box-shadow: 0 0 0 9px transparent; }
}
.callpop .a { font-size: .84rem; font-weight: 600; letter-spacing: -.02em; }
.callpop .b { font-family: "JetBrains Mono", monospace; font-size: .67rem; color: var(--faint); margin-top: 2px; }

/* ============================================================
   THE MACHINE — the signature diagram.
   Five stages and a closed feedback loop. Selecting a package
   lights only the stages that package includes.
   ============================================================ */
.machine-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  padding: 44px 34px 34px;
  overflow: hidden;
}
.machine-wrap::before {
  content: "";
  position: absolute;
  left: 50%; top: -40%;
  width: 900px; height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--amber-soft), transparent 66%);
  pointer-events: none;
}

.machine { position: relative; }

/* --- the SVG rail (desktop) --- */
.rail { width: 100%; height: auto; overflow: visible; }
.rail .track { stroke: var(--line-2); stroke-width: 1.5; fill: none; }
.rail .lit {
  stroke: url(#railGrad);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--glow));
  stroke-dasharray: var(--len, 2400);
  stroke-dashoffset: calc(var(--len, 2400) - (var(--progress, 0) * var(--len, 2400)));
  transition: stroke-dashoffset .18s linear;
}
.rail .pulse { fill: var(--amber-hi); filter: drop-shadow(0 0 8px var(--glow)); }

/* Lead Engine stops at capture — so the loop must not read as closed.
   The lit path recedes and the pulse stops circulating. */
.machine[data-pkg="1"] .lit { opacity: .22; }
.machine[data-pkg="1"] .pulse { opacity: 0; }
.machine[data-pkg="1"] .loop-label { fill: var(--faint); }
.rail .loop-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--amber);
}

/* --- stage nodes --- */
.stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 26px;
}
.stage {
  position: relative;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  transition: opacity .55s var(--ease), border-color .55s var(--ease),
              background-color .55s var(--ease), transform .55s var(--ease);
}
.stage .num {
  font-family: "JetBrains Mono", monospace;
  font-size: .64rem;
  letter-spacing: .14em;
  color: var(--faint);
  margin-bottom: 9px;
}
.stage h4 {
  font-family: Sora, sans-serif;
  font-size: .97rem;
  font-weight: 600;
  letter-spacing: -.028em;
  margin-bottom: 7px;
}
.stage p { font-size: .82rem; line-height: 1.55; color: var(--muted); }
.stage .metric {
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  color: var(--amber);
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

/* Lit = included in the selected package. Dim = not included. */
.stage.on {
  border-color: var(--amber-line);
  background: linear-gradient(180deg, var(--amber-soft), transparent);
}
.stage.dim { opacity: .26; }
.stage.dim .metric { color: var(--muted); }

/* The loop caption under the diagram */
.machine-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.machine-foot .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: .69rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.machine-foot .val { font-size: .93rem; color: var(--muted); max-width: 68ch; }
.machine-foot .val b { color: var(--text); font-weight: 600; }

/* Mobile fallback: a vertical rail, no SVG. */
.machine-mobile { display: none; }
.mstage {
  position: relative;
  padding: 0 0 26px 34px;
  border-left: 1.5px solid var(--line-2);
  margin-left: 8px;
}
.mstage:last-child { border-left-color: transparent; padding-bottom: 0; }
.mstage::before {
  content: "";
  position: absolute;
  left: -7px; top: 2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--amber);
  box-shadow: 0 0 12px var(--glow);
}
.mstage .num {
  font-family: "JetBrains Mono", monospace;
  font-size: .63rem;
  letter-spacing: .14em;
  color: var(--faint);
  margin-bottom: 5px;
}
.mstage h4 { font-family: Sora, sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: -.028em; margin-bottom: 6px; }
.mstage p { font-size: .88rem; color: var(--muted); }
.mstage .metric { font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--amber); margin-top: 8px; }
.mloop {
  margin: 4px 0 0 8px;
  padding: 14px 16px;
  border: 1px dashed var(--amber-line);
  border-radius: var(--r-sm);
  background: var(--amber-soft);
  font-size: .85rem;
  color: var(--muted);
}
.mloop b { color: var(--amber); font-weight: 600; }

/* ============================================================
   PACKAGES — the three engagements
   ============================================================ */
/* Stretch, not start — so the three footers land on one line and the
   comparison reads as a set rather than three loose cards. */
.pkgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color .45s var(--ease), background-color .45s var(--ease),
              transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pkg:hover { border-color: var(--line-2); transform: translateY(-3px); }

.pkg.sel {
  border-color: var(--amber-line);
  background: linear-gradient(180deg, var(--amber-soft), transparent 60%);
  box-shadow: 0 24px 60px -28px var(--glow);
}

.pkg .flag {
  position: absolute;
  top: -1px; right: 22px;
  transform: translateY(-50%);
  font-family: "JetBrains Mono", monospace;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-grad);
  color: var(--on-accent);
  font-weight: 600;
  white-space: nowrap;
}

.pkg .pnum {
  font-family: "JetBrains Mono", monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  color: var(--faint);
  margin-bottom: 12px;
}
.pkg h3 {
  font-family: Sora, sans-serif;
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -.034em;
  line-height: 1.14;
  margin-bottom: 10px;
}
.pkg .tag-line { font-size: .93rem; color: var(--muted); margin-bottom: 22px; min-height: 3.2em; }

.pkg .feats { display: grid; gap: 11px; margin-bottom: 26px; }
.pkg .feats li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--muted);
}
.pkg .feats svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--amber); }
.pkg .feats li b { color: var(--text); font-weight: 600; }

.pkg .pfoot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.pkg .terms {
  font-family: "JetBrains Mono", monospace;
  font-size: .69rem;
  color: var(--faint);
  line-height: 1.6;
  margin-bottom: 16px;
}
.pkg .pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .87rem;
  font-weight: 600;
  color: var(--amber);
}
.pkg .pick svg { width: 16px; height: 16px; transition: transform .32s var(--spring); }
.pkg:hover .pick svg { transform: translateX(4px); }

/* Screen-reader-only helper for the radio semantics */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pkgs-foot {
  margin-top: 26px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}
.pkgs-foot p { font-size: .92rem; color: var(--muted); max-width: 70ch; }
.pkgs-foot b { color: var(--text); font-weight: 600; }

/* ============================================================
   THE LEAK — the problem, told with one number
   ============================================================ */
.leak {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.leak-clock {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  padding: 40px;
  overflow: hidden;
}
.leak-clock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, var(--amber-soft), transparent 60%);
  pointer-events: none;
}
.decay { display: grid; gap: 14px; position: relative; }
.decay-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: center; }
.decay-row .t {
  font-family: "JetBrains Mono", monospace;
  font-size: .74rem;
  color: var(--muted);
  white-space: nowrap;
}
.decay-row .track {
  height: 8px;
  border-radius: 999px;
  background: var(--card-2);
  overflow: hidden;
}
.decay-row .fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent-grad);
  width: 0;
  transition: width 1.1s var(--ease);
}
.decay-row .v {
  font-family: "JetBrains Mono", monospace;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text);
  min-width: 42px;
  text-align: right;
}
.decay-row.cold .fill { background: linear-gradient(135deg, var(--line-2), var(--faint)); }
.decay-row.cold .v { color: var(--faint); }

/* ============================================================
   ARSENAL — the depth behind the package
   ============================================================ */
.arsenal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cap { position: relative; overflow: hidden; }
.cap .ico {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--amber);
  margin-bottom: 18px;
}
.cap .ico svg { width: 19px; height: 19px; }
.cap h3 { margin-bottom: 9px; }
.cap p { font-size: .89rem; color: var(--muted); line-height: 1.58; }

/* Status chip — tells the truth about what is running today
   vs what we have built and run before. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: .6rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  margin-bottom: 14px;
}
.status.live { border-color: rgba(74, 222, 128, .32); color: var(--ok); }
.status.live::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px rgba(74, 222, 128, .8);
}
.status.built { border-color: var(--amber-line); color: var(--amber); }

/* ============================================================
   PRODUCT SHOWCASE
   ============================================================ */
.sc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.tab {
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .86rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--card);
  transition: all .3s var(--ease);
}
.tab:hover { border-color: var(--line-2); color: var(--text); }
.tab.active {
  border-color: var(--amber-line);
  background: var(--amber-soft);
  color: var(--amber);
}

.panel { display: none; }
.panel.active { display: block; animation: fadeUp .55s var(--ease); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kv {
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
}
.kv .k {
  font-family: "JetBrains Mono", monospace;
  font-size: .63rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.kv .v {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -.035em;
  margin-top: 6px;
}
.kv .v.up { color: var(--ok); }
.kv .v.acc { color: var(--amber); }

/* Simple CSS bar chart for the dashboard mock */
.bars { display: flex; align-items: flex-end; gap: 7px; height: 108px; margin-top: 16px; }
.bars i {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--amber), var(--amber-lo));
  opacity: .82;
  min-height: 6px;
  transition: height .8s var(--ease), opacity .3s var(--ease);
}
.bars i:hover { opacity: 1; }
.bars i.mute { background: var(--card-2); }

/* ============================================================
   FIT — who this is for, and who it isn't
   ============================================================ */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fit-col { padding: 30px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.fit-col.yes { background: linear-gradient(180deg, var(--amber-soft), transparent 55%); border-color: var(--amber-line); }
.fit-col.no  { background: var(--card); }
.fit-col h3 { margin-bottom: 20px; }
.fit-col li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: .91rem;
  line-height: 1.55;
  color: var(--muted);
}
.fit-col li:last-child { border-bottom: 0; }
.fit-col svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.fit-col.yes svg { color: var(--amber); }
.fit-col.no svg { color: var(--faint); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 54px; align-items: center; }
.headshot {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: linear-gradient(160deg, var(--bg-3), var(--bg));
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.headshot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 40% 25%, var(--amber-soft), transparent 62%);
}
.headshot .ph {
  font-family: "JetBrains Mono", monospace;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
  position: relative;
  padding: 0 20px;
}

.creds { display: grid; gap: 12px; margin-top: 28px; }
.cred {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
}
.cred .n {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--amber);
  letter-spacing: -.03em;
  flex: none;
  min-width: 62px;
}
.cred .t { font-size: .89rem; color: var(--muted); line-height: 1.5; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { display: grid; gap: 10px; max-width: 860px; }
.q {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  overflow: hidden;
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.q.open { border-color: var(--amber-line); background: var(--card-2); }
.q-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.024em;
}
.q-head .chev {
  width: 18px; height: 18px;
  flex: none;
  color: var(--muted);
  transition: transform .38s var(--spring), color .3s var(--ease);
}
.q.open .q-head .chev { transform: rotate(180deg); color: var(--amber); }
.q-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease);
}
.q-body p {
  padding: 0 24px 22px;
  font-size: .93rem;
  color: var(--muted);
  line-height: 1.68;
  max-width: 72ch;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-final {
  position: relative;
  z-index: 1;
  padding: 128px 0;
  text-align: center;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1100px; height: 700px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--amber-soft), transparent 62%);
  pointer-events: none;
}
.cta-final .h1 { max-width: 18ch; margin: 0 auto 22px; }
.cta-final .lede { margin: 0 auto 36px; text-align: center; }
.cta-inner { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }

.cta-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
}
.cta-strip span {
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .pkgs { grid-template-columns: 1fr; }
  .pkg .tag-line { min-height: 0; }
  .arsenal { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 38px; }
  .headshot { max-width: 340px; }
  .leak { grid-template-columns: 1fr; gap: 38px; }
}

@media (max-width: 900px) {
  /* The SVG rail needs horizontal room it does not have on phones —
     swap to the vertical rail rather than shrinking it into mush. */
  .rail, .stages { display: none; }
  .machine-mobile { display: block; }
  .machine-wrap { padding: 30px 22px 26px; }
  .fit { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .arsenal { grid-template-columns: 1fr; }
  .leak-clock { padding: 26px 22px; }
  .decay-row { grid-template-columns: 78px 1fr auto; gap: 10px; }
  .pkg { padding: 26px 22px; }
  .cta-final { padding: 92px 0; }
  .q-head { padding: 17px 19px; font-size: .95rem; }
  .q-body p { padding: 0 19px 19px; }
}
/* ============================================================
   LEAD QUALITY SPLIT — the open form vs the qualified form.
   Cause on top, effect on the bottom, one component vocabulary
   on both sides so only the CONTENT differs.

   The junk column carries NO amber at all. On this site amber
   means "act here" — there is nothing on that side to act on.
   Deliberately NOT --hot: that hue already means "slipping"
   (the lead bar, the red first-dial figure). One hue, one meaning.
   ============================================================ */

/* Grid/flex children default to min-width:auto — same trap documented
   in styles.css. A mono chip would push a track past its container and
   body's overflow-x:hidden would clip it silently, mid-word. */
.split > *, .split-col > *, .split-out > * { min-width: 0; }

.split {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;   /* the spine IS the gap */
  align-items: stretch;
  gap: 0;
}

.split-col {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  transition: border-color .45s var(--ease), background-color .45s var(--ease);
}
.split-col.junk:hover { border-color: var(--line-2); }

/* Two background layers rather than a ::before — avoids any stacking
   fight with the column's own content. */
.split-col.real {
  border-color: var(--amber-line);
  background:
    radial-gradient(560px circle at 50% -12%, var(--amber-soft), transparent 62%),
    linear-gradient(180deg, var(--amber-soft), transparent 58%);
  box-shadow: 0 30px 70px -34px var(--glow);
}

/* --- the spine --- */
.split-spine { position: relative; display: grid; place-items: center; }
.split-spine::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}
.split-spine span {
  position: relative;
  writing-mode: vertical-rl;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  /* masks the hairline behind the label. The section sits on --bg. */
  background: var(--bg);
  padding: 16px 0;
}

/* --- column caption --- */
.split-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 5px 11px;
  margin-bottom: 16px;
}
.split-col.real .split-tag {
  border-color: var(--amber-line);
  background: var(--amber-soft);
  color: var(--amber);
}
.split-cap h3 { margin-bottom: 10px; }
.split-cap p {
  font-size: .91rem;
  line-height: 1.58;
  color: var(--muted);
  margin-bottom: 24px;
}

/* ---------------- MOCK FORM ---------------- */
.mf {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  overflow: hidden;
}
.split-col.real .mf {
  border-color: var(--amber-line);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
}

.mf-head {
  display: flex;
  flex-wrap: wrap;              /* the two mono strings must never overflow */
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .61rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mf-head em { font-style: normal; color: var(--faint); }
.split-col.real .mf-head { color: var(--amber); border-bottom-color: var(--amber-line); }
.split-col.real .mf-head em { color: var(--muted); }

.mf-body { padding: 14px; display: grid; gap: 13px; }
.mf-row  { display: grid; gap: 7px; min-width: 0; }

.mf-q {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--muted);
}
.split-col.real .mf-q { color: var(--text); }

/* An input nobody filled in — the label is the platform's, not the homeowner's. */
.mf-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .67rem;
  color: var(--faint);
}
.mf-input .fillin { color: var(--muted); }
/* the one the homeowner actually typed */
.mf-input.on { border-color: var(--amber-line); background: var(--amber-soft); }
.mf-input.on .fillin { color: var(--amber); }

/* Answer chips */
.mf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-chip {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .64rem;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--faint);
  white-space: nowrap;
}
.mf-chip.on {
  border-color: var(--amber-line);
  background: var(--amber-soft);
  color: var(--amber);
}

/* The conditional branch — the single most important line on the panel. */
.mf-branch {
  position: relative;
  margin: 3px 0 0 13px;
  padding-left: 17px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .62rem;
  line-height: 1.55;
  color: var(--faint);
}
.mf-branch::before {
  content: "";
  position: absolute;
  left: 0; top: -7px; bottom: 8px;
  width: 11px;
  border-left: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  border-bottom-left-radius: 6px;
}

.mf-submit {
  margin-top: 3px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--card-2);
  color: var(--faint);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -.012em;
}
.split-col.real .mf-submit {
  border-color: transparent;
  background: var(--accent-grad);
  color: var(--on-accent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .30) inset, 0 8px 24px -10px var(--glow);
}

/* ============================================================
   THE OUTPUT — pinned to the bottom of both columns so the two
   lead rows land on the SAME baseline. Same component, same
   place, opposite content: that is the whole argument.
   ============================================================ */
.split-out { margin-top: auto; padding-top: 28px; }

.split-arrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.split-arrow svg { width: 14px; height: 14px; flex: none; }
.split-col.real .split-arrow { color: var(--amber); }

.split-out .lead { margin-bottom: 0; }

/* The left bar means SLA freshness. On a lead nobody can reach it means
   nothing, so it goes neutral rather than borrowing a signal color. */
.split-col.junk .lead .bar { background: var(--line-2); }
.split-col.junk .lead .av  { border-style: dashed; color: var(--faint); }
.split-col.junk .lead .nm  { color: var(--muted); }

.split-col.real .lead {
  border-color: var(--amber-line);
  background: linear-gradient(90deg, var(--amber-soft), transparent 72%);
}

.split-foot {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .68rem;
  line-height: 1.62;
  color: var(--faint);
}
.split-foot b { color: var(--muted); font-weight: 500; }
.split-col.real .split-foot { color: var(--muted); }
.split-col.real .split-foot b { color: var(--amber); }

/* ---------------- RESPONSIVE — system breakpoints ---------------- */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }

  /* The spine rotates: vertical hairline becomes a horizontal one,
     and the label reads normally again. */
  .split-spine { padding: 24px 0; }
  .split-spine::before {
    top: 50%; bottom: auto; left: 0; right: 0;
    width: auto; height: 1px;
    transform: none;
    background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
  }
  .split-spine span { writing-mode: horizontal-tb; padding: 0 16px; }

  /* Nothing left to push against once the columns are stacked. */
  .split-out { margin-top: 28px; }
}

@media (max-width: 620px) {
  .split-col { padding: 24px 20px; }
  .split-cap p { font-size: .88rem; margin-bottom: 20px; }
  .mf-body { padding: 12px; gap: 11px; }
  .mf-head { font-size: .58rem; padding: 10px 12px; }
  .mf-chip { font-size: .62rem; padding: 6px 10px; }
  .split-out { padding-top: 22px; }
}

/* ============================================================
   THE LOOP, NAMED — the CAPI band inside the machine section.
   Deliberately ONE row tall: it sits between the diagram and
   PACKAGES, and the packages copy says "the diagram above."
   ============================================================ */
.loop-band > * { min-width: 0; }
.loop-band .card h3 { margin-bottom: 12px; }
.loop-band .card p { font-size: 1rem; line-height: 1.65; color: var(--muted); }
.loop-band .card p b { color: var(--text); font-weight: 600; }
.loop-band .source em { font-style: normal; color: var(--muted); }

/* ============================================================
   WORKED & TRACKED — the accountability instrument.
   Deliberately NOT a diagram: THE MACHINE owns the drawn loop.
   This block is a REPORT — a table, a verdict, a measured axis.
   ONE HUE, ONE MEANING inside this section:
     amber      = the system flagged this
     --text     = a recorded event
     --line-2   = elapsed time / nothing happening
   Nothing else in here is allowed to be amber.
   ============================================================ */

/* Grid children default to min-width:auto, so one unbreakable mono metric
   can push a track past its container — and body's overflow-x:hidden then
   CLIPS it silently. Same reason as the shared rule in styles.css. */
.board-row > *, .finding-grid > *, .discipline > *, .tl-row > *, .verdict > * { min-width: 0; }

/* ---------- THE PANEL ---------- */
.tracker {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  overflow: hidden;
}
.tracker-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
}
.tracker-bar .t, .tracker-bar .w {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.tracker-bar .t { color: var(--muted); }
.tracker-bar .w { color: var(--faint); }

/* ---------- THE BOARD — a real table, the one form the page does
     not already use, so it cannot compete with the loop ---------- */
.board { padding: 6px 14px 10px; }

.board-row {
  display: grid;
  grid-template-columns: 1.5fr .6fr 1.05fr .92fr .78fr .8fr 1.05fr;
  gap: 14px;
  align-items: center;
  padding: 13px 8px;
  border-bottom: 1px solid var(--line);
}
.board-row:last-child { border-bottom: 0; }
.board-row.head { border-bottom-color: var(--line-2); padding-top: 10px; }
.board-row.head .bc {
  font-size: .59rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}
.board-row.sum { border-bottom: 0; border-top: 1px solid var(--line-2); }
.board-row.sum .bc { color: var(--muted); }

.bc {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  letter-spacing: -.012em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bc.rep  { font-weight: 600; }
.bc.sub  { color: var(--muted); }   /* quiet supporting figure */
.bc.hit  { color: var(--amber); }   /* the exact cells the flag is about */
.bc.none { color: var(--faint); }

/* Status is a small pill, never a tinted row. */
.vpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .57rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--amber-line);
  background: var(--amber-soft);
  color: var(--amber);
  white-space: nowrap;
}
.vpill::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--glow);
  flex: none;
}

/* ---------- THE VERDICT — the system writing a sentence ---------- */
.verdict {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 4px 14px 16px;
  padding: 18px 20px;
  border: 1px solid var(--amber-line);
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--amber-soft), transparent 72%);
}
.verdict .lbl {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .59rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
  flex: none;
  padding-top: 4px;
}
.verdict p { font-size: .92rem; line-height: 1.62; color: var(--muted); max-width: 84ch; }
.verdict p b { color: var(--text); font-weight: 600; }

/* ---------- THE FINDING ---------- */
.finding { padding: 34px; margin-top: 40px; }
.finding-kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
}
.finding > .lede { margin-top: 16px; font-size: 1rem; max-width: 78ch; }

.finding-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 44px;
  align-items: start;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

/* ---------- THE MEASURED AXIS — a ruled chart, not a progress bar.
     Linear, 0 to 10 hours, hairline every 2 hours. ---------- */
.tl { display: grid; gap: 26px; }
.tl-row { display: grid; gap: 9px; }
.tl-lbl {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* The value is ANCHORED to where the event actually happened on the axis,
   not right-aligned in the row — a right-aligned figure above a 6px mark
   reads as "this happened at 10 hours", the opposite of the point. */
.tl-plot { position: relative; padding-top: 30px; }
.tl-val {
  position: absolute;
  top: 0;
  left: var(--w, 0);
  padding-left: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.035em;
  color: var(--text);
  white-space: nowrap;
}
.tl-val::after {          /* the stem down to its mark on the bar */
  content: "";
  position: absolute;
  left: 0; bottom: -13px;
  width: 1px; height: 13px;
  background: currentColor;
  opacity: .5;
}
/* past the midpoint the callout hangs LEFT of its mark or it runs off */
.tl-val.at-end { padding: 0 10px 0 0; transform: translateX(-100%); }
.tl-val.at-end::after { left: auto; right: 0; }
.tl-val.flag { color: var(--amber); }

.tl-bar {
  position: relative;
  height: 13px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
}
.tl-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 999px 2px 2px 999px;
  transition: width 1.3s var(--ease) .2s;
}
.tl-fill.fast { background: var(--text); }              /* a recorded event */
.tl-fill.slow {                                          /* elapsed dead time */
  background: linear-gradient(90deg, var(--card-2), var(--line-2));
  border-right: 3px solid var(--amber);
}
.tl-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    transparent 0 19.85%, var(--line-2) 19.85%, var(--line-2) 20%);
}
/* Draws itself off the page's existing scroll observer — no new JS. */
.reveal.in .tl-fill { width: var(--w, 0); min-width: 6px; }

.tl-axis {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 2px;
}
.tl-axis span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .59rem;
  letter-spacing: .1em;
  color: var(--faint);
  text-align: right;
}
.tl-axis .zero { position: absolute; left: 0; top: 0; text-align: left; }
.tl-note { margin-top: 20px; max-width: 76ch; }

/* ---------- WHAT THE SYSTEM DID WITH IT ---------- */
.steps { display: grid; }
.steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.steps li:first-child { padding-top: 0; }
.steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps .n {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .63rem;
  letter-spacing: .1em;
  color: var(--faint);
  padding-top: 3px;
}
.steps h4 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 7px;
}
.steps p { font-size: .875rem; line-height: 1.58; color: var(--muted); }

.finding-close {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 1.03rem;
  line-height: 1.62;
  color: var(--muted);
  max-width: 84ch;
}
.finding-close b { color: var(--text); font-weight: 600; }

/* ---------- THE DISCIPLINE STRIP ---------- */
.disc-head { display: flex; align-items: center; gap: 16px; margin: 46px 0 18px; }
.disc-head .k {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.disc-head .ln { height: 1px; flex: 1; background: linear-gradient(90deg, var(--line-2), transparent); }

.discipline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.disc { padding: 26px 24px; }
.disc .n {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .63rem;
  letter-spacing: .14em;
  color: var(--faint);
  margin-bottom: 13px;
}
.disc h4 {
  font-family: Sora, Inter, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.25;
  margin-bottom: 9px;
}
.disc p { font-size: .87rem; line-height: 1.58; color: var(--muted); }

/* ---------- RESPONSIVE — system breakpoints only ---------- */
@media (max-width: 1080px) {
  .finding-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* A seven-column mono table does not survive a phone, and shrinking it
   into mush is worse than changing its shape. Each row becomes a card and
   every cell carries its own label — no duplicated markup. 900 matches
   the breakpoint .grid-2 and .fit already collapse at. */
@media (max-width: 900px) {
  .discipline { grid-template-columns: 1fr; }

  .board { padding: 14px; display: grid; gap: 10px; }
  .board-row.head { display: none; }
  .board-row {
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    padding: 16px 17px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
  }
  .board-row.sum { border-top: 1px solid var(--line-2); background: none; }
  .bc[data-l]::before {
    content: attr(data-l);
    display: block;
    font-size: .55rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 5px;
  }
  .bc.rep {
    grid-column: 1 / -1;
    font-size: .95rem;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--line);
  }
  .bc.rep::before { content: none; }
  .bc.st { grid-column: 1 / -1; }
  .bc.st.none { display: none; }
}

@media (max-width: 620px) {
  .tracker-bar { padding: 13px 16px; }
  .tracker-bar .t, .tracker-bar .w { font-size: .62rem; }
  .verdict { flex-direction: column; gap: 11px; margin: 4px 10px 12px; padding: 17px 18px; }
  .finding { padding: 24px 21px; }
  .board { padding: 10px; }
}

/* ============================================================
   PROOF — the diagnosis blocks.
   Amber marks the cheap end and the levers we control; an
   expensive market is a FACT, never a warning color.
   ============================================================ */
.drivers > *, .levers > * { min-width: 0; }

/* Accent-framed card. NOT `.accent` — that is already a text-color utility.
   Loaded after styles.css, so it also wins over `.card:hover`, which is
   deliberate: the highlighted card must not flash to a neutral on hover. */
.card.hl {
  border-color: var(--amber-line);
  background: linear-gradient(180deg, var(--amber-soft), transparent 60%);
}

.drivers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.driver {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.driver:hover { border-color: var(--line-2); background: var(--card-2); }
.dnum { font-size: .635rem; letter-spacing: .14em; color: var(--faint); }
.driver h4 {
  font-family: Sora, Inter, sans-serif;
  font-size: 1.03rem;
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 11px 0 8px;
}
.driver p { font-size: .885rem; line-height: 1.58; color: var(--muted); }

.levers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.lever { padding-top: 17px; border-top: 1px solid var(--amber-line); }
.lever .lk {
  display: block;
  font-size: .595rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}
.lever h4 {
  font-family: Sora, Inter, sans-serif;
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.028em;
  margin-bottom: 7px;
}
.lever p { font-size: .86rem; line-height: 1.56; color: var(--muted); }

@media (max-width: 1080px) { .drivers, .levers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .drivers, .levers { grid-template-columns: 1fr; } .driver { padding: 22px; } }
/* ============================================================
   PROOF — the ledger, the market ladder, the drivers
   Tokens only. The ladder deliberately reads as an instrument,
   not a sales chart: hairline rules, mono numerals, one accent.
   ============================================================ */
.ledger {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 34px;
}
.lg-cell { background: var(--bg-2); padding: 26px 22px 24px; }
.lg-cell.hero-cell { background: linear-gradient(180deg, var(--amber-soft), transparent 70%), var(--bg-2); }
.lg-n {
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--text);
}
.lg-cell.hero-cell .lg-n { color: var(--amber); }
.lg-n .unit { font-size: .5em; color: var(--muted); margin: 0 .06em; }
.lg-cell.hero-cell .lg-n .unit { color: var(--amber); opacity: .7; }
.lg-k { margin-top: 12px; font-size: .93rem; font-weight: 600; color: var(--text); }
.lg-s { margin-top: 5px; font-size: .82rem; line-height: 1.5; color: var(--faint); }

.market {
  margin-top: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  overflow: hidden;
}
.mk-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.15fr) minmax(90px, 2fr) auto;
  gap: 22px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.mk-row:last-child { border-bottom: 0; }
.mk-row.own { background: linear-gradient(90deg, var(--amber-soft), transparent 70%); }
.mk-lab b { display: block; font-size: .97rem; font-weight: 600; color: var(--text); }
.mk-lab span { display: block; margin-top: 3px; font-size: .8rem; line-height: 1.45; color: var(--faint); }
.mk-bar { height: 8px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.mk-bar i { display: block; height: 100%; border-radius: 99px; background: var(--line-2); }
.mk-row.own .mk-bar i { background: var(--accent-grad); box-shadow: 0 0 18px var(--glow); }
.mk-v { font-size: 1.08rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.mk-row.own .mk-v { color: var(--amber); }

.drv { display: grid; gap: 14px; }
.drv li { position: relative; padding-left: 20px; font-size: .95rem; line-height: 1.62; color: var(--muted); }
.drv li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--line-2);
}
.card.lit.hl .drv li::before { background: var(--amber); }
.drv b { color: var(--text); font-weight: 600; }

@media (max-width: 900px) {
  .ledger { grid-template-columns: repeat(2, 1fr); }
  .mk-row { grid-template-columns: 1fr auto; gap: 10px 16px; }
  .mk-bar { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 520px) {
  .ledger { grid-template-columns: 1fr; }
}

/* ============================================================
   READING TYPE — 2026-07-28
   The display scale was right and the READING scale was not:
   body copy sat at 14.5px and provenance at 11px in --faint,
   which is roughly 4:1 on this background. The material that
   carries the argument was the hardest thing on the page to
   read. Everything below raises reading sizes only; headings,
   ledes and the mono numerals are untouched.
   ============================================================ */
.card p,
.split-cap p,
.cap p,
.arsenal .cap p            { font-size: 1rem; line-height: 1.65; }
.q-body p                  { font-size: 1rem; line-height: 1.72; }
.feats li span             { font-size: .95rem; line-height: 1.58; }
.fit-col li span           { font-size: .97rem; line-height: 1.6; }
.drv li                    { font-size: .97rem; line-height: 1.65; }
.terms                     { font-size: .86rem; line-height: 1.55; }
.tag-line                  { font-size: 1rem;  line-height: 1.6; }

/* Provenance: readable, and no longer the faintest thing on the page. */
.source {
  font-size: .82rem;
  line-height: 1.68;
  color: var(--muted);
}
.source b { color: var(--text); }

/* Small captions inside instruments. */
.lg-s      { font-size: .84rem; line-height: 1.55; color: var(--muted); }
.mk-lab span { font-size: .84rem; line-height: 1.5; color: var(--muted); }
.mk-lab b    { font-size: 1.02rem; }

/* Nav: current page gets the accent rather than a scroll position. */
.nav-links a.on,
.mobile-menu a.on:not(.btn) { color: var(--amber); }

@media (max-width: 900px) {
  .card p, .split-cap p, .cap p, .q-body p { font-size: 1.02rem; }
  .source { font-size: .86rem; }
}
.pkg .tag-line { font-size: 1rem; line-height: 1.6; }

/* ============ LEGAL PAGES (privacy / terms) ============ */
.legal-body { max-width: 720px; }
.legal-body .updated { font-size: 12.5px; color: var(--faint); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 34px; display: block; }
.legal-body h3 { font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 600; color: var(--text); margin: 38px 0 12px; }
.legal-body p, .legal-body li { font-size: 15px; line-height: 1.75; color: var(--muted); margin: 0 0 14px; }
.legal-body ul { padding-left: 22px; margin: 0 0 16px; }
.legal-body li { margin-bottom: 10px; }
.legal-body b { color: var(--text); font-weight: 600; }
.legal-body a { color: var(--amber); text-decoration: none; border-bottom: 1px solid var(--amber-line); }
.legal-body a:hover { border-bottom-color: var(--amber); }