/* ============================================================
   PITCH PAGES — one per prospect, generated by ops/make-pitch.mjs.
   Loaded after site.css, so every token, the nav, the footer, the
   buttons, and the glass come from the main system. This file only
   adds what a proposal needs that the homepage doesn't.
   ============================================================ */

.pitch-shell {
  max-width: calc(880px + 2 * var(--pad));
  margin-inline: auto; padding-inline: var(--pad);
}

/* shown only on the sample pitch, never on a real one */
.sample-bar {
  position: relative; z-index: 2;
  padding: 10px var(--pad); text-align: center;
  background: #fff4d6; border-bottom: 1px solid #ecd9a2;
  color: #5a4712; font-size: .82rem; line-height: 1.5;
}

/* the letterhead reference, top right */
.ref {
  margin-left: auto; text-align: right;
  font-size: .72rem; line-height: 1.6; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ref b { color: var(--ink); font-weight: 600; }
.ref span { white-space: nowrap; }

/* ── opening ── */
.p-hero { padding-block: var(--s9) var(--s7); }
.p-hero .eyebrow { margin-bottom: var(--s5); }
.p-hero .title {
  font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: .98; text-wrap: balance;
}
.p-hero .lede { margin-top: var(--s5); max-width: 56ch; }

.p-sect { padding-block: var(--s8); }
.p-sect h2.title { font-size: clamp(1.9rem, 3.6vw, 2.7rem); text-wrap: balance; }
.p-note { margin-top: var(--s4); max-width: 60ch; color: var(--ink-2); }

/* ── what we noticed: the part that proves someone actually looked ── */
.obs {
  list-style: none; padding: 0; margin-top: var(--s6);
  border-top: 1px solid rgba(20,38,31,.12);
}
.obs li {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s4);
  padding: var(--s5) 0; border-bottom: 1px solid rgba(20,38,31,.10);
}
.obs .no { padding-top: 5px; }
.obs h3 { margin-bottom: 4px; }
.obs p { color: var(--ink-2); font-size: .95rem; max-width: 62ch; }

/* ── the work itself, in a phone ── */
.show {
  display: grid; grid-template-columns: minmax(220px, 290px) 1fr;
  gap: var(--s8); align-items: center; margin-top: var(--s7);
}
.phone {
  padding: 10px; border-radius: 40px; background: var(--ink);
  box-shadow: 0 44px 64px -32px rgba(20,38,31,.5), 0 2px 6px rgba(20,38,31,.14);
}
.phone img { width: 100%; border-radius: 30px; }
.show-copy h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; letter-spacing: -.02em; }
.show-copy p { margin-top: var(--s3); color: var(--ink-2); max-width: 44ch; }
.show-copy .btn { margin-top: var(--s6); }
.show-url {
  display: block; margin-top: var(--s4);
  font-size: .8rem; color: var(--ink-3); overflow-wrap: anywhere;
}

/* ── included ── */
.inc { list-style: none; padding: 0; margin-top: var(--s6); }
.inc li {
  position: relative; padding: 13px 0 13px var(--s6);
  border-bottom: 1px solid rgba(20,38,31,.08); font-size: .97rem;
}
.inc li::before {
  content: ''; position: absolute; left: 0; top: 25px;
  width: 12px; height: 1.5px; background: var(--moss);
}

/* ── the price ── */
.price-card { margin-top: var(--s6); padding: var(--s7) var(--s7) var(--s6); border-radius: var(--r-xl); }
.price-card .eyebrow { margin-bottom: var(--s3); }
.amount {
  display: flex; align-items: baseline; gap: var(--s3);
  font-family: var(--serif); font-size: clamp(3rem, 8vw, 4.6rem);
  line-height: 1; letter-spacing: -.035em;
}
.amount span {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.price-card dl { margin-top: var(--s6); border-top: 1px solid rgba(20,38,31,.12); }
.price-card dl div {
  display: grid; grid-template-columns: 130px 1fr; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid rgba(20,38,31,.08); font-size: .92rem;
}
.price-card dt {
  padding-top: 3px; font-size: .66rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.price-card dd { margin: 0; color: var(--ink-2); }
.price-cta { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); }
.price-fine { margin-top: var(--s4); font-size: .8rem; color: var(--ink-3); }
.price-fine a, .honest a {
  text-decoration: underline; text-decoration-color: rgba(20,38,31,.3); text-underline-offset: 3px;
}

.p-steps .steps { margin-top: var(--s6); }

/* the line that keeps a spec pitch honest — required on every pitch */
.honest {
  grid-column: 1 / -1; margin-top: var(--s4); padding-left: var(--s4);
  border-left: 2px solid var(--sand);
  font-size: .8rem; color: var(--ink-3); max-width: 78ch;
}

@media (max-width: 760px) {
  .ref { font-size: .66rem; }
  .p-hero { padding-block: var(--s8) var(--s6); }
  .p-sect { padding-block: var(--s7); }
  .show { grid-template-columns: 1fr; gap: var(--s6); }
  .phone { max-width: 250px; margin-inline: auto; }
  .show-copy { text-align: center; }
  .show-copy p { margin-inline: auto; }
  .price-card { padding: var(--s6) var(--s5) var(--s5); }
  .price-card dl div { grid-template-columns: 1fr; gap: 2px; }
  .price-cta .btn { width: 100%; justify-content: center; }
}