/* ============================================================
   GHOST ZERO — PRICING PAGE (full rewrite 2026-06-12)
   Command room + the CREAM SPEC-SHEET module (Jonny's favorite):
   B33 rung cards · B53 fuel-bar · B47 datasheet matrix · B32
   configurator · B70 hand-note · E ski-run markers per tier.
   NEVER A24 (passed). Figures are DRAFT — single source of truth
   is tierMap in scripts/site.js. Per DESIGN-CONTRACT.md.
   ============================================================ */

.pricing-hero {
  position: relative;
  background: var(--gz-graphite);
  padding: clamp(140px, 18vw, 210px) var(--pad-x) clamp(56px, 8vw, 88px);
  border-bottom: 1px solid var(--gz-steel);
  overflow: hidden;
}
.pricing-hero::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  background: radial-gradient(ellipse at 70% 30%, rgba(230,57,70,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.pricing-hero-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
  position: relative;
  z-index: 2;
}
@media (max-width: 880px) { .pricing-hero-grid { grid-template-columns: 1fr; gap: 28px; } }
.pricing-hero h1 { margin: 22px 0 0; color: var(--gz-white); }
.pricing-hero h1 em { color: var(--gz-ember); font-style: italic; }
.pricing-hero p { font-size: var(--t-lead); margin: 0 0 8px; max-width: 50ch; }

/* the honest stamp — figures are draft */
.draft-stamp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gz-signal);
  border: 1px dashed var(--gz-signal);
  padding: 7px 12px;
  margin-top: 18px;
}
.draft-stamp::before { content: "⚠"; font-size: 12px; }

/* ============================================================
   THE LADDER — cream spec-sheet band (B33 rungs)
   ============================================================ */
.ladder {
  background: var(--gz-bone);
  color: var(--gz-ink);
  padding-bottom: clamp(72px, 10vw, 120px);
}
.ladder-intro {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 72px) var(--pad-x) 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
@media (max-width: 880px) { .ladder-intro { grid-template-columns: 1fr; gap: 18px; } }
.ladder-intro h2 { color: var(--gz-ink); margin: 16px 0 0; }
.ladder-intro h2 em { color: var(--gz-ember); font-style: italic; }
.ladder-intro p { margin: 0; font-size: var(--t-lead); color: #3a3a48; }

.rungs {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px) { .rungs { grid-template-columns: 1fr; max-width: 620px; } }

.rung {
  position: relative;
  background: var(--gz-paper);
  border: 1px solid rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
}
.rung.featured { border: 2px solid var(--gz-ink); }
.rung .rec-tab {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--gz-ember);
  color: var(--gz-white);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 12px;
  white-space: nowrap;
}
.rung .r-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.35);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6a6a72;
}
.rung .r-head .ski { font-size: 9px; }
.rung .r-name {
  padding: 22px 18px 0;
  font-family: var(--font-shell);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--gz-ink);
  line-height: 1;
}
.rung .r-for {
  padding: 6px 18px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #6a6a72;
}
.rung .r-price {
  padding: 18px 18px 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rung .r-price .amt {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 58px);
  line-height: 0.9;
  color: var(--gz-ink);
}
.rung .r-price .per {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a6a72;
}
/* B53 fuel-bar — senior bandwidth gauge */
.fuelbar { padding: 14px 18px 4px; }
.fuelbar .fb-cap {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6a6a72;
  margin-bottom: 7px;
}
.fuelbar .fb-track {
  height: 10px;
  border: 1px solid rgba(0,0,0,0.4);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0,0,0,0.25) calc(10% - 1px) 10%);
  position: relative;
}
.fuelbar .fb-track i {
  position: absolute;
  top: 1px; bottom: 1px; left: 1px;
  background: var(--gz-ember);
}
/* B44 deliverable speclines */
.rung .r-specs {
  padding: 16px 18px;
  display: grid;
  gap: 9px;
  flex: 1;
}
.rung .specline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6a6a72;
}
.rung .specline .dots { flex: 1; border-bottom: 1px dotted rgba(0,0,0,0.35); transform: translateY(-2px); }
.rung .specline .val { color: var(--gz-ink); }
.rung .r-foot {
  padding: 16px 18px;
  border-top: 1px solid rgba(0,0,0,0.35);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.rung .r-foot .note {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6a6a72;
}

/* B70 hand-note in the margin */
.hand-note {
  max-width: var(--max-w);
  margin: 18px auto 0;
  padding: 0 var(--pad-x);
  font-family: var(--font-hand);
  font-size: 23px;
  color: #4a4038;
  transform: rotate(-1.2deg);
}
.hand-note b { color: var(--gz-ember); font-weight: 400; }

/* ============================================================
   HOW THE LADDER WORKS — B66-flavor flow on black
   ============================================================ */
.flow {
  background: var(--gz-void);
  border-top: 1px solid var(--gz-steel);
  border-bottom: 1px solid var(--gz-steel);
  padding: clamp(48px, 7vw, 80px) var(--pad-x);
}
.flow-inner { max-width: var(--max-w); margin: 0 auto; }
.flow h2 { color: var(--gz-white); margin: 14px 0 28px; }
.flow-track {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 880px) { .flow-track { grid-template-columns: 1fr; } .flow-track .arr { transform: rotate(90deg); justify-self: center; } }
.flow-step {
  border: 1px solid var(--gz-steel);
  background: var(--gz-graphite);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flow-step .fs-cap {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gz-ash);
  display: flex;
  justify-content: space-between;
}
.flow-step .fs-name {
  font-family: var(--font-shell);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 18px;
  color: var(--gz-white);
}
.flow-step p { margin: 0; font-size: 13px; color: var(--gz-fog); }
.flow-track .arr {
  align-self: center;
  font-family: var(--font-mono);
  color: var(--gz-ember);
  font-size: 18px;
}

/* ============================================================
   B47 DATASHEET MATRIX — what's in each tier
   ============================================================ */
.matrix-band {
  background: var(--gz-graphite);
  padding: clamp(56px, 8vw, 96px) var(--pad-x);
}
.matrix-inner { max-width: 1100px; margin: 0 auto; }
.matrix-inner h2 { color: var(--gz-white); margin: 14px 0 26px; }
.matrix {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--gz-steel);
  font-size: 14px;
}
.matrix th, .matrix td {
  border: 1px solid var(--gz-steel);
  padding: 13px 16px;
  text-align: left;
}
.matrix thead th {
  background: var(--gz-void);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gz-ash);
  vertical-align: bottom;
}
.matrix thead th .t-name {
  display: block;
  font-family: var(--font-shell);
  font-weight: 800;
  font-size: 16px;
  color: var(--gz-white);
  letter-spacing: 0;
  margin-bottom: 2px;
}
.matrix thead th .t-price { color: var(--gz-ember); font-size: 11px; }
.matrix tbody th {
  font-weight: 500;
  color: var(--gz-fog);
  font-size: 13.5px;
  background: var(--gz-graphite);
  width: 34%;
}
.matrix tbody td { font-family: var(--font-mono); font-size: 12px; color: var(--gz-fog); }
.matrix td .yes {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--gz-ember);
}
.matrix td .no {
  display: inline-block;
  width: 14px; height: 1.5px;
  background: var(--gz-iron);
  vertical-align: middle;
}
.matrix .featured-col { background: rgba(230,57,70,0.05); }
.matrix-foot {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gz-ash);
}
@media (max-width: 720px) {
  .matrix thead th:nth-child(2), .matrix tbody td:nth-child(2) { display: none; } /* hide Foundation col on phones */
}

/* ============================================================
   FAQ — B61 index rows (loved) via <details>
   ============================================================ */
.pfaq {
  background: var(--gz-charcoal);
  border-top: 1px solid var(--gz-steel);
  padding: clamp(56px, 8vw, 96px) var(--pad-x);
}
.pfaq-inner { max-width: 900px; margin: 0 auto; }
.pfaq h2 { color: var(--gz-white); margin: 14px 0 26px; }
.pfaq details {
  border: 1px solid var(--gz-steel);
  border-bottom: none;
  background: var(--gz-graphite);
}
.pfaq details:last-of-type { border-bottom: 1px solid var(--gz-steel); }
.pfaq summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  gap: 14px;
  align-items: baseline;
  padding: 18px 18px;
  color: var(--gz-white);
  font-weight: 500;
  font-size: 15px;
}
.pfaq summary::-webkit-details-marker { display: none; }
.pfaq summary .qnum {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--gz-ember);
}
.pfaq summary .tog {
  font-family: var(--font-mono);
  color: var(--gz-ash);
  text-align: right;
}
.pfaq details[open] summary .tog { color: var(--gz-ember); }
.pfaq details p {
  margin: 0;
  padding: 0 18px 20px 88px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--gz-fog);
}
@media (max-width: 600px) {
  .pfaq summary { grid-template-columns: 1fr 24px; }
  .pfaq summary .qnum { display: none; }
  .pfaq details p { padding-left: 18px; }
}


/* ============================================================
   THE RACK — a la carte add-ons (hybrid model, plan F1)
   B36 option cards on black. Prices TK until the review.
   ============================================================ */
.rack {
  background: var(--gz-void);
  border-top: 1px solid var(--gz-steel);
  border-bottom: 1px solid var(--gz-steel);
  padding: clamp(56px, 8vw, 96px) var(--pad-x);
}
.rack-inner { max-width: var(--max-w); margin: 0 auto; }
.rack-inner h2 { color: var(--gz-white); margin: 14px 0 8px; }
.rack-inner .rack-sub { color: var(--gz-fog); font-size: var(--t-lead); max-width: 58ch; margin: 0 0 28px; }
.rack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1080px) { .rack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .rack-grid { grid-template-columns: 1fr; } }
.rack-card {
  border: 1px solid var(--gz-steel);
  background: var(--gz-graphite);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: border-color 160ms ease;
}
.rack-card:hover { border-color: var(--gz-ember); }
.rack-card .rk-id {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gz-ember);
}
.rack-card h4 {
  margin: 0;
  font-family: var(--font-shell);
  font-weight: 700;
  font-size: 17px;
  color: var(--gz-white);
  line-height: 1.1;
}
.rack-card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--gz-fog); }
.rack-card .rk-price {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--gz-steel);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gz-ash);
}
.rack-card .rk-price .amt { color: var(--gz-signal); }
.rack-foot {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gz-ash);
}