/* pricing page only.  Loaded after theme.css and scene.css.
   Two cream cards side by side: the $4 one-card ticket (the main thing, large price, terracotta button, the pigeon
   perched on its top edge) and the quieter "Post pigeon" plan. Self-contained: nothing here is read by another page. */

/* info.css caps every .container inside <main> at 64rem; two cards want a little more room */
main.pricing-page .container { max-width: 70rem; }
.pricing-page { padding: clamp(28px, 4vw, 56px) 0 clamp(60px, 8vw, 110px); }

.pricing-head { width: fit-content; max-width: 100%; }
.pricing-head h1 { font-size: var(--step-5); line-height: 1; margin-top: .75rem; }
.pricing-head p { font-size: var(--step-1); max-width: 28em; }

/* the row leaves room above the ticket for the bird */
.price-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(84px, 7vw, 100px); align-items: stretch;
}
.price-row .card { display: flex; flex-direction: column; align-items: flex-start; position: relative; }
.price-row .card h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

.price-amount { margin: .25rem 0 1.25rem; font: 400 clamp(4rem, 7.4vw, 6.2rem)/.95 var(--font-heading); color: var(--terra); letter-spacing: -.02em; }
.price-amount small { font: 500 1.15rem var(--font-body); letter-spacing: 0; color: var(--ink-dim); }

/* the tear-off line between the price and what it covers */
.price-row hr.tear { align-self: stretch; margin: 1.6rem 0 1.4rem; border: 0; border-top: 2px dotted rgb(var(--ink-rgb) / .35); }
.price-desc { margin-bottom: .9rem; font: 700 .8125rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }

/* the plan is the quiet one: a flat cream card (no hard shadow, no dashed edge), a smaller ink price and a plain
   secondary button, so the $4 ticket is the one thing that asks for a click. It sits at the top of its column
   and ends where its own text does, instead of stretching to the ticket's height. */
.price-row .plan { align-self: start; }
.plan .price-amount { font-size: clamp(2.4rem, 4vw, 3.2rem); color: var(--ink); margin-bottom: 1rem; }
.plan .price-amount small { font-size: 1rem; }
.plan h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.plan .checks li { font-size: 1.0625rem; }

/* the pigeon stands on the ticket's top edge */
.ticket-bird { position: absolute; right: clamp(22px, 3vw, 40px); bottom: calc(100% - 5px); width: 132px; height: auto; pointer-events: none; }

.pricing-foot { width: fit-content; max-width: 100%; margin-top: clamp(28px, 4vw, 44px); font: 500 1rem/1.4 var(--font-ui); }

@media (max-width: 900px) {
  .price-row { grid-template-columns: 1fr; margin-top: 36px; }
  .ticket { margin-top: 48px; }
  .ticket-bird { width: 112px; }
}
@media (max-width: 480px) {
  .price-amount { font-size: 4rem; }
}

.plan-math { margin: -.4rem 0 1.1rem; font: 700 1rem/1.35 var(--font-ui); color: var(--ink); }