/* Startup marketing (/startup-marketing/). A rate card in Trail: a hero,
   three numbered stages with prices on the right edge, the bundle discount
   as a comparison table, then terms and questions. Prices mirror
   offers/startup-gtm/rate-card.yaml in the Marketing Diagnostic Machine
   repo. No route here: the page is a menu, not a sequence a visitor walks. */

/* ---------- Hero ---------- */
.sm-hero { padding: clamp(var(--space-8), 7vw, var(--space-9)) 0; }
.sm-hero h1 { font-size: var(--text-display); line-height: 1; max-width: 14ch; }
.sm-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }
.sm-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: center;
}
.sm-hero-portrait { margin: 0; width: 100%; justify-self: end; }
.sm-hero-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); }

/* ---------- The ledger ---------- */
.sm-ledger { border-top: 2px solid var(--ink); }
.sm-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(var(--space-5), 4vw, var(--space-7));
  padding: var(--space-6) 0; border-bottom: 1px solid var(--line);
}
.sm-stage:last-child { border-bottom: 2px solid var(--ink); }
.sm-stage-head { display: flex; gap: var(--space-4); align-items: flex-start; }
.sm-stage-head .marker-num { flex: none; margin-top: 4px; }
.sm-stage-head h3 { font-size: var(--text-step); line-height: 1.15; }
.sm-stage-head p { margin-top: var(--space-3); font-size: var(--text-small); color: var(--muted); max-width: 34ch; }

.sm-rows { list-style: none; }
.sm-rows li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5); align-items: baseline;
  padding: var(--space-4) 0; border-bottom: 1px solid var(--line);
}
.sm-rows li:first-child { padding-top: 0; }
.sm-rows li:last-child { border-bottom: none; padding-bottom: 0; }
.sm-row-name { font-weight: 600; color: var(--ink); }
.sm-row-what { display: block; margin-top: var(--space-1); font-weight: 400; font-size: var(--text-small); color: var(--muted); line-height: 1.55; max-width: 52ch; }
.sm-row-price {
  font-family: var(--font-display); font-weight: 500; font-size: 26px;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sm-row-price small { font-family: var(--font-body); font-size: var(--text-small); font-weight: 500; color: var(--muted); margin-left: 2px; }
.sm-row-incl { font-family: var(--font-body); font-size: var(--text-small); font-weight: 600; color: var(--juniper); }

/* ---------- Bundle discount ---------- */
.sm-discount {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: start;
}
.sm-rule { margin-top: var(--space-5); font-family: var(--font-display); font-size: var(--fs-lead); line-height: 1.4; color: var(--ink); max-width: 30ch; }
.sm-rule-note { margin-top: var(--space-4); font-size: var(--text-small); max-width: 40ch; }
.sm-examples .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sm-examples thead th:first-child, .sm-examples td:first-child { padding-left: 0; }
.sm-examples td:last-child, .sm-examples th:last-child { padding-right: 0; }
.sm-examples td { color: var(--ink); }
.sm-examples td.is-theirs { color: var(--muted); }
.sm-examples td.pay { font-family: var(--font-display); font-weight: 500; font-size: 22px; }

/* ---------- Do it yourself (hidden until showDiy) ---------- */
.sm-diy { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-5), 4vw, var(--space-7)); }
.sm-diy li { border-top: 2px solid var(--ink); padding-top: var(--space-5); display: flex; flex-direction: column; }
.sm-diy p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--ink-soft); line-height: 1.55; }
.sm-diy .sm-diy-tool { margin-top: var(--space-1); font-weight: 600; color: var(--trail-text); }
.sm-diy .sm-diy-price { margin-top: var(--space-4); color: var(--ink); font-weight: 600; }
.sm-diy .sm-diy-link { margin-top: auto; padding-top: var(--space-4); color: var(--muted); }
.sm-diy-note { margin-top: var(--space-6); font-size: var(--text-small); color: var(--muted); }

/* ---------- Terms and questions ---------- */
.sm-fine {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: start;
}
.sm-fine h2 { font-size: var(--text-step); line-height: 1.15; margin-bottom: var(--space-5); }
.sm-terms .checks li { font-size: var(--text-small); line-height: 1.6; color: var(--ink-soft); }
.sm-qs .faq summary { font-size: 20px; }
.sm-qs .faq p { color: var(--ink-soft); font-size: var(--text-small); line-height: 1.6; }

/* ---------- Playbooks (partials/playbook-list.njk) ---------- */
.pbl-list { list-style: none; max-width: 42rem; border-top: 2px solid var(--ink); }
.pbl-list li { border-bottom: 1px solid var(--line); }
.pbl-list a {
  display: block; padding: var(--space-4) 0; text-decoration: none;
  font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.25; color: var(--ink);
}
.pbl-list a:hover { color: var(--juniper); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sm-stage, .sm-discount, .sm-fine { grid-template-columns: 1fr; }
  .sm-hero-grid { grid-template-columns: 1fr; }
  .sm-hero-portrait { justify-self: start; max-width: 240px; }
}
@media (max-width: 760px) {
  .sm-diy { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 520px) {
  .sm-rows li { grid-template-columns: 1fr; gap: var(--space-2); }
  .sm-examples td, .sm-examples th { padding-left: 6px; padding-right: 6px; }
}