/* ============================================================
   InTheMude — Pricing page (page-specific layout only)
   Inherits ALL tokens & components from /styles.css.
   Nothing here redefines colors, fonts, or shared components —
   it only arranges pricing-specific bits that the shared sheet
   doesn't already cover. Strict CSP: external file, no inline.
   ============================================================ */

/* ---------- Pricing hero (compact, copy-only) ---------- */
.pricing-hero {
  padding-block: clamp(56px, 9vw, 104px) var(--sp-7);
  text-align: center;
}

.pricing-hero .container-narrow {
  margin-inline: auto;
}

.pricing-hero h1 {
  font-size: var(--fs-h1);
}

.pricing-hero h1 em {
  font-style: italic;
  color: var(--brass);
}

.pricing-hero .lead {
  margin-top: var(--sp-5);
  margin-inline: auto;
  max-width: 600px;
}

/* Billing toggle is just a quiet anchor pair, not a control */
.pricing-hero__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--muted-2);
}

/* ---------- Plan cards: a few pricing-only refinements ---------- */
/* The featured card is emphasized by its brass border, glow, and "Best
   value" ribbon — NOT by a vertical lift. A translateY here would push the
   featured card (and its CTA) out of line with the other cards' buttons,
   so we deliberately keep all three cards on the same baseline. */

/* A ribbon on the featured (best value) plan */
.price-card {
  position: relative;
}

.price-card__ribbon {
  align-self: flex-start;
  margin-bottom: var(--sp-1);
}

.price-card__sub {
  color: var(--muted-2);
  font-size: var(--fs-small);
}

/* Keep the CTA pinned to the bottom so cards align across the row.
   The shared sheet gives .price-card ul { flex: 1 }, which grows the bullet
   list to fill the card and pushes the button to the bottom edge; this
   margin just sets the gap above it. Buttons line up because the cards are
   equal height (grid align-items: stretch) and the empty checkout-status
   below paid buttons collapses to zero height (see below). */
.price-card .btn {
  margin-top: var(--sp-3);
}

/* The strike-through "value" hint next to the annual price */
.price-card__strike {
  margin-left: var(--sp-2);
  color: var(--muted-2);
  font-size: 0.9rem;
  text-decoration: line-through;
  text-decoration-color: var(--muted-2);
}

/* Status line under a checkout button (mirrors .form-status voice).
   min-height is 0 so the EMPTY status row adds no height — otherwise the
   paid cards' buttons would sit ~20px higher than the free card's button
   (which has no status line), breaking the row's button alignment. When a
   message appears it simply expands in place. */
.checkout-status {
  min-height: 0;
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--brass);
}

/* When empty (the normal state) remove the status row entirely so it adds
   no flex gap beneath the paid cards' buttons. Otherwise those buttons sit
   higher than the free card's button, which has no status line after it,
   and the row of CTAs no longer lines up. It reappears when JS fills it. */
.checkout-status:empty {
  display: none;
}

.checkout-status[data-error="true"] {
  color: #e89aa3;
}

/* ---------- "What's included" band ---------- */
.included-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.included-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
}

.included-point .mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--brass-line);
  color: var(--brass);
  background: var(--brass-soft);
  font-weight: 700;
}

.included-point h3 {
  font-size: 1.1rem;
  margin-bottom: var(--sp-1);
}

.included-point p {
  color: var(--muted);
  font-size: 0.94rem;
}

/* ---------- Billing FAQ (disclosure list) ---------- */
.faq-list {
  display: grid;
  gap: var(--sp-3);
  max-width: var(--max-narrow);
  margin-inline: auto;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
  overflow: hidden;
  transition: border-color var(--t-med) var(--ease);
}

.faq-item[open] {
  border-color: var(--brass-line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--cream);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* A brass +/- affordance that rotates open */
.faq-item summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--brass-line);
  color: var(--brass);
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease);
}

.faq-item[open] summary::after {
  content: "\2212"; /* minus */
  background: var(--brass-soft);
}

.faq-item summary:hover,
.faq-item summary:focus-visible {
  color: var(--cream);
}

.faq-item__body {
  padding: 0 var(--sp-6) var(--sp-5);
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.62;
}

.faq-item__body .tbd {
  color: var(--muted-2);
  font-style: italic;
}

/* ---------- Closing CTA ---------- */
.pricing-cta {
  text-align: center;
}

.pricing-cta .hero__actions {
  justify-content: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  .included-grid {
    grid-template-columns: 1fr;
  }
  .faq-item summary {
    padding: var(--sp-4) var(--sp-5);
    font-size: 1.04rem;
  }
  .faq-item__body {
    padding: 0 var(--sp-5) var(--sp-5);
  }
}