/* =========================================================
   STOUGHTON MEDIA — Pricing Pages Stylesheet
   Extends styles.css (tokens, nav, footer, buttons) and
   blog.css (pagehead, crumb, linkcard, postlinks).
   Style: Dark Luxury Editorial — Bodoni Moda + Jost.
   No new fonts, weights, or colors — tokens only.
   ========================================================= */

/* ---------- Utilities ---------- */
.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;
}

.btn--sm { padding: .6rem 1.15rem; font-size: .86rem; }

/* ---------- Page sections ---------- */
.block { padding: clamp(4rem, 9vw, 7rem) 0; }
.block--alt { background: var(--ink-2); border-block: 1px solid var(--line); }
.block__head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Question-style H2 + direct answer (AEO pattern) */
.qa { max-width: 820px; }
.qa + .qa { margin-top: clamp(3rem, 6vw, 4.5rem); }
.answer {
  margin-top: 1.2rem; color: var(--cream); font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.6; border-left: 2px solid var(--gold); padding-left: 1.2rem; max-width: 68ch;
}
.answer strong { color: var(--gold); font-weight: 500; }
.qa__more { margin-top: 1.3rem; color: var(--muted); max-width: 66ch; }
.qa__more + .qa__more { margin-top: 1rem; }
.qa__more strong { color: var(--cream); font-weight: 500; }

/* ---------- Tables (shared base) ---------- */
.tbl-wrap {
  position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--stone);
}
.tbl-hint { margin-top: .8rem; font-size: .8rem; color: var(--muted-2); font-style: italic; }

.tbl {
  width: 100%; border-collapse: collapse; min-width: 640px;
  font-size: .96rem; color: var(--muted);
}
.tbl caption { text-align: left; }
.tbl th, .tbl td {
  padding: 1rem 1.15rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.tbl thead th {
  font-family: var(--serif); font-weight: 600; color: var(--cream);
  font-size: 1.05rem; letter-spacing: -0.01em; vertical-align: bottom;
  background: var(--ink-2);
}
.tbl tbody th[scope="row"] {
  font-family: var(--sans); font-weight: 500; color: var(--cream); font-size: .95rem;
  width: 30%; background: rgba(28,25,23,.4);
}
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td strong { color: var(--cream); font-weight: 500; }

/* Boolean cells */
.tick, .no { display: inline-flex; align-items: center; }
.tick svg { width: 20px; height: 20px; color: var(--gold); }
.no { color: var(--muted-2); font-size: 1.1rem; line-height: 1; }

/* ---------- Tier pricing table ---------- */
.tbl--tiers thead th { text-align: left; padding-top: 1.6rem; padding-bottom: 1.4rem; }
.tbl--tiers thead th:first-child { background: var(--ink-2); }

.ptier { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.ptier__tag {
  align-self: flex-start; font-family: var(--sans); font-size: .64rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  padding: .28rem .6rem; border-radius: 999px; margin-bottom: .1rem;
}
.ptier__name { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--cream); }
.ptier__price { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; color: var(--gold); line-height: 1; }
.ptier__price small { font-family: var(--sans); font-size: .8rem; font-weight: 400; color: var(--muted-2); letter-spacing: .01em; }
.ptier__sub { font-family: var(--sans); font-size: .8rem; color: var(--muted-2); font-weight: 400; }
.ptier .btn { margin-top: .5rem; }

/* Featured column (middle tier = 3rd cell) */
.tbl--tiers.is-feat-2 thead th:nth-child(3),
.tbl--tiers.is-feat-2 tbody td:nth-child(3) {
  background: linear-gradient(180deg, rgba(224,168,46,.10), rgba(224,168,46,.03));
  border-inline: 1px solid rgba(224,168,46,.35);
}
.tbl--tiers.is-feat-3 thead th:nth-child(4),
.tbl--tiers.is-feat-3 tbody td:nth-child(4) {
  background: linear-gradient(180deg, rgba(224,168,46,.10), rgba(224,168,46,.03));
  border-inline: 1px solid rgba(224,168,46,.35);
}

/* ---------- Two-option comparison (SEO / packages) ---------- */
.tbl--duo thead th:nth-child(n+2) { width: 35%; }

/* ---------- Guarantee mechanic callout ---------- */
.mech {
  display: grid; gap: 1.4rem; padding: clamp(1.8rem, 4vw, 2.6rem);
  background: linear-gradient(160deg, var(--stone) 0%, var(--ink-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.mech__row { display: flex; gap: 1.1rem; align-items: flex-start; }
.mech__num {
  flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--gold-glow); color: var(--gold);
  font-family: var(--serif); font-weight: 700; font-size: 1rem;
}
.mech__row h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--cream); margin-bottom: .3rem; }
.mech__row p { color: var(--muted); font-size: .96rem; max-width: 60ch; }
.mech__row p strong { color: var(--gold); font-weight: 500; }

/* ---------- Highlight note (intentional-price / key-fact) ---------- */
.note-band {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.2rem 1.4rem; margin-top: 1.6rem;
  background: rgba(224,168,46,.06); border: 1px solid rgba(224,168,46,.3);
  border-radius: 12px; color: var(--muted); font-size: .92rem; max-width: 72ch;
}
.note-band svg { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; margin-top: .1rem; }
.note-band strong { color: var(--cream); font-weight: 500; }

/* ---------- Simple lead paragraph under pagehead ---------- */
.pagehead__lead strong { color: var(--cream); font-weight: 500; }

/* ---------- Pricing page hero (taller + bigger headline than the blog pagehead) ---------- */
.pagehead--tall {
  padding-top: clamp(10rem, 26vh, 17rem);
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}
.pagehead--tall .pagehead__inner { max-width: 1060px; }
.pagehead--tall .pagehead__title {
  font-size: clamp(2.6rem, 8vw, 5.9rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
}
.pagehead--tall .pagehead__lead {
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  max-width: 62ch;
  margin-top: 2rem;
}
@media (max-width: 560px) {
  .pagehead--tall .pagehead__title { font-size: clamp(2.4rem, 11vw, 3rem); }
}

/* ---------- CTA row under tables ---------- */
.tbl-cta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.tbl-cta p { color: var(--muted); font-size: .95rem; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .tbl tbody th[scope="row"] { width: 42%; }
  .answer { padding-left: 1rem; }
}