/* Autorestage — the pricing page.
 *
 * Tokens and the shared furniture (nav, pills, footer, reveals, the dark
 * closing band) come from style.css and sections.css; this is only what the
 * pricing page adds. Nothing here defines a colour of its own. */

.price-hero { padding: clamp(48px, 7vw, 92px) var(--gut) clamp(28px, 4vw, 48px); max-width: var(--wrap); margin: 0 auto; text-align: center; }
.price-hero h1 { margin-top: 18px; font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.4rem); font-weight: 600; line-height: 1.01; letter-spacing: -.05em; }
.price-lede { max-width: 56ch; margin: 22px auto 0; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.55; }

/* ── monthly / yearly ─────────────────────────────────────────────────── */
.term { display: inline-flex; gap: 4px; margin-top: 34px; padding: 5px; border-radius: 999px; background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line); }
.term button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-size: .93rem; font-weight: 500; cursor: pointer; transition: background-color .25s var(--ease), color .25s; }
.term button:hover { color: var(--ink); }
.term button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s); }
.term button span { padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .72rem; font-weight: 600; }

/* ── the tiers ────────────────────────────────────────────────────────── */
.tiers { max-width: var(--wrap); margin: clamp(30px, 4vw, 52px) auto 0; padding: 0 var(--gut); display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-s), 0 0 0 1px var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-l), 0 0 0 1px var(--line); }
/* The recommended tier is marked by weight and a ring, not by being bigger:
   a scaled card shifts every neighbour when the term toggles. */
.tier-pop { box-shadow: var(--shadow-l), 0 0 0 2px var(--accent); }
.tier-flag { position: absolute; top: -11px; left: clamp(22px, 2.4vw, 30px); padding: 3px 11px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tier h2 { font-size: 1.22rem; font-weight: 600; letter-spacing: -.03em; }
.tier-blurb { margin-top: 5px; min-height: 2.9em; color: var(--ink-3); font-size: .88rem; line-height: 1.45; }
.tier-price { margin-top: 14px; display: flex; align-items: baseline; gap: 6px; }
.tier-price strong { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.7rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.tier-price .per { color: var(--ink-3); font-size: .95rem; }
.tier-per { margin-top: 8px; color: var(--ink-2); font-size: .89rem; }
.tier-per b { color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.tier-cta { margin-top: 20px; width: 100%; }
.tier-list { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; color: var(--ink-2); font-size: .91rem; }
.tier-list li { position: relative; padding-left: 26px; }
.tier-list li::before { content: ''; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent-soft); }
.tier-list li::after { content: ''; position: absolute; left: 5px; top: 7px; width: 5px; height: 8px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; rotate: 40deg; }

/* ── what one credit buys ─────────────────────────────────────────────── */
.included { max-width: var(--wrap); margin: var(--sec) auto 0; padding: clamp(28px, 4vw, 48px) var(--gut); }
.included { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(26px, 4vw, 64px); align-items: center; }
.inc-copy h2 { margin-top: 16px; font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.6rem); font-weight: 600; line-height: 1.05; letter-spacing: -.045em; }
.inc-copy p { margin-top: 14px; color: var(--ink-2); max-width: 34ch; }
.inc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: var(--r-m); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.inc-grid li { padding: 22px 18px; background: var(--surface); }
.inc-grid b { display: block; font-size: 1.9rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.inc-grid span { display: block; margin-top: 8px; color: var(--ink-2); font-size: .86rem; line-height: 1.4; }

/* ── packs ────────────────────────────────────────────────────────────── */
.packs { padding: var(--sec) var(--gut); background: var(--bg-alt); margin-top: var(--sec); }
.sec-note { margin: 16px auto 0; max-width: 54ch; color: var(--ink-2); }
.sec-head.center .sec-note { text-align: center; }
.pack-row { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pack { padding: 22px 18px; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-s), 0 0 0 1px var(--line); text-align: center; transition: transform .4s var(--ease); }
.pack:hover { transform: translateY(-3px); }
.pack b { display: block; font-size: 1.7rem; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pack span { display: block; color: var(--ink-3); font-size: .8rem; }
.pack em { display: block; margin-top: 12px; font-style: normal; font-size: 1.15rem; font-weight: 600; color: var(--accent-ink); }
.pack i { display: block; margin-top: 3px; font-style: normal; color: var(--ink-3); font-size: .8rem; }

/* ── the comparison ───────────────────────────────────────────────────── */
.compare { padding: var(--sec) var(--gut); }
.cmp-table { max-width: 1000px; margin: 0 auto; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-s), 0 0 0 1px var(--line); overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); }
.cmp-row + .cmp-row { border-top: 1px solid var(--line); }
.cmp-row span { display: flex; align-items: center; padding: 17px clamp(14px, 2.4vw, 26px); font-size: .97rem; line-height: 1.4; overflow-wrap: anywhere; }
.cmp-row span:last-child { justify-content: flex-end; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-head span { padding-block: 14px; color: var(--ink-3); font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.cmp-us { background: var(--accent-soft); }
.cmp-us span:first-child { font-weight: 600; }
.cmp-us span:last-child b { font-size: 1.15rem; color: var(--accent-ink); }
.cmp-quiet span { color: var(--ink-3); }
.js .cmp-table .cmp-row { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + .15s); }
.js .cmp-table.in .cmp-row { opacity: 1; transform: none; }
.cmp-row:nth-child(2) { --i: 1; } .cmp-row:nth-child(3) { --i: 2; } .cmp-row:nth-child(4) { --i: 3; }
.cmp-row:nth-child(5) { --i: 4; } .cmp-row:nth-child(6) { --i: 5; } .cmp-row:nth-child(7) { --i: 6; }

/* ── questions ────────────────────────────────────────────────────────── */
.faq { padding: 0 var(--gut) var(--sec); }
.faq-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(26px, 4vw, 64px); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { padding: 20px 34px 20px 0; position: relative; font-size: 1.04rem; font-weight: 500; letter-spacing: -.02em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 11px; height: 11px; margin-top: -7px; border: solid var(--ink-3); border-width: 0 1.8px 1.8px 0; rotate: 45deg; transition: rotate .3s var(--ease); }
.faq details[open] summary::after { rotate: -135deg; margin-top: -3px; }
.faq summary:hover { color: var(--accent-ink); }
.faq p { padding: 0 24px 22px 0; margin: 0; color: var(--ink-2); max-width: 46ch; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .included { grid-template-columns: minmax(0, 1fr); }
  .pack-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .inc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .cmp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* The "how they charge" column is the first thing to go on a phone: the
     vendor and the number are what the comparison is. */
  .cmp-row span:nth-child(2) { display: none; }
  .cmp-head span:nth-child(2) { display: none; }
}
@media (max-width: 560px) {
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .tier-blurb { min-height: 0; }
  .term { width: 100%; justify-content: center; }
}