/* ttsCast /pricing — page-specific styles. Loads after home.css and uses
   its palette tokens (--h-*), container, type, buttons, FAQ and footer. */

/* ---------- hero ---------- */
.pricing-hero {
  padding: clamp(48px, 6vw, 96px) 0 clamp(40px, 4vw, 56px);
}
.pricing-hero h1 {
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 26px;
}
.pricing-hero h1 .l { display: block; }
.pricing-hero .sub {
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.55;
  color: var(--h-muted);
  max-width: 54ch;
}
.pricing-hero-cta { margin-top: 24px; }
.plan-same { font-size: 15px; line-height: 1.45; color: var(--h-muted); }

/* ---------- plan table: rows, one singled out by a green edge ---------- */
.plans { padding-bottom: clamp(72px, 8vw, 112px); }
/* Column heads. */
.plan-table-head {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(0, 1.45fr) minmax(0, 1.2fr) 200px;
  gap: 0 48px;
  padding: 16px 40px 14px;
  border-bottom: 1px solid var(--h-line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h-muted);
}
.plan-table {
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius-lg);
  overflow: hidden;
  background: var(--h-card);
}
.plan {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(0, 1.45fr) minmax(0, 1.2fr) 200px;
  grid-template-areas: "id minutes includes cta";
  gap: 24px 48px;
  align-items: center;
  padding: 36px 40px;
  border-top: 1px solid var(--h-line);
}
.plan-table-head + .plan { border-top: none; }
.plan-featured {
  background: #141a3c;
  box-shadow: inset 3px 0 0 var(--h-accent);
}
.plan-id { grid-area: id; }
.plan-minutes { grid-area: minutes; }
.plan-includes { grid-area: includes; }
.plan-cta { grid-area: cta; justify-self: end; }

.plan-id h3 { font-size: 20px; margin-bottom: 2px; }
.plan-tagline { font-size: 14px; color: var(--h-muted); }
.plan-price {
  margin-top: 18px !important;
  font-family: var(--h-serif);
  font-size: 46px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.plan-price .per {
  font-family: var(--h-sans);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--h-muted);
  margin-left: 4px;
}

.plan-min {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  color: var(--h-muted);
  margin-bottom: 14px !important;
}
.plan-min-n {
  font-family: var(--h-serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--h-text);
  font-variant-numeric: lining-nums tabular-nums;
}
/* The meter: 500 minutes end to end, so the three plans read as amounts
   of listening, not as tiers. */
.meter {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--h-line);
  overflow: hidden;
}
.meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--fill, 0) * 100%);
  min-width: 6px;
  background: var(--h-accent-dim);
  border-radius: 4px;
}
.plan-featured .meter span { background: var(--h-accent); }
.plans-footnote {
  margin-top: 16px !important;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--h-muted);
  max-width: 68ch;
}
.plan-min-note {
  margin-top: 12px !important;
  font-size: 13.5px;
  color: var(--h-muted);
}

.plan-includes { display: grid; gap: 10px; }
.plan-includes li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--h-text);
}
.plan-includes li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--h-accent);
  border-bottom: 2px solid var(--h-accent);
  transform: rotate(-45deg);
}
.plan-cta .btn { min-width: 190px; }

.plan-topup {
  display: flex;
  align-items: baseline;
  gap: 12px 28px;
  flex-wrap: wrap;
  padding: 22px 40px;
  border-top: 1px dashed var(--h-line);
  background: var(--h-bg);
}
.plan-topup-k {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--h-muted);
  min-width: 170px;
}
.plan-topup-v { font-size: 15px; color: var(--h-muted); }
.plan-topup-v strong { color: var(--h-text); font-weight: 600; }

/* ---------- billing notes ---------- */
/* Even columns so the heading sets as "Billed monthly / through the App
   Store." instead of stranding "through" on a line of its own. */
@media (min-width: 961px) {
  .billing-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.billing-notes {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 48px;
}
.billing-notes > div {
  border-top: 1px solid var(--h-line);
  padding-top: 22px;
}
.billing-notes dt {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--h-text);
  margin-bottom: 8px;
}
.billing-notes dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--h-muted);
  max-width: 40ch;
}

/* ---------- teams and volume ---------- */
.volume-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.volume-grid .section-head { margin-bottom: 0; }

.form-card {
  position: relative;
  background: var(--h-card);
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius-lg);
  padding: 36px;
}
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
.form-foot {
  display: flex;
  align-items: center;
  gap: 16px 24px;
  margin-top: 6px;
}
.form-foot .btn { flex: 0 0 auto; }
/* Two lines reserved so an error message never pushes the layout. */
.form-status {
  flex: 1 1 auto;
  min-height: 2.9em;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--h-muted);
}
.form-status.is-error { color: #F7B4AE; }
.form-status:focus { outline: none; }

.form-thanks {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 14px;
  min-height: 100%;
  padding: 12px 4px;
}
.form-thanks[hidden] { display: none; }
.form-thanks:focus { outline: none; }
.form-thanks h3 {
  font-family: var(--h-serif);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.form-thanks p { color: var(--h-muted); font-size: 16px; max-width: 44ch; }
.form-thanks-mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--h-accent-muted);
  position: relative;
}
.form-thanks-mark::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 19px;
  width: 16px;
  height: 9px;
  border-left: 2.5px solid var(--h-accent);
  border-bottom: 2.5px solid var(--h-accent);
  transform: rotate(-45deg);
}
[data-volume-card][style*="min-height"] { display: grid; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .plan-table-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0 40px; }
  .plan-table-head > :nth-child(n+3) { display: none; }
  .plan {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-areas: "id minutes" "includes cta";
    gap: 28px 40px;
    align-items: start;
  }
  .plan-cta { align-self: end; }
}

@media (max-width: 960px) {
  .billing-notes { grid-template-columns: 1fr; gap: 28px; }
  .volume-grid { grid-template-columns: 1fr; row-gap: 40px; }
}

@media (max-width: 640px) {
  .pricing-hero { padding: 36px 0 32px; }
  /* Two deliberate lines; "minutes of audio." (7.5em) sets the size. */
  .pricing-hero h1 { font-size: min(48px, calc((100vw - 40px) / 7.6)); letter-spacing: -0.028em; margin-bottom: 20px; }
  .pricing-hero .sub { font-size: 17px; }
  .pricing-hero-cta { margin-top: 24px; }
  .pricing-hero-cta .btn { width: 100%; height: 54px; font-size: 16px; }

  .plan {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "id" "minutes" "includes" "cta";
    gap: 22px;
    padding: 28px 20px;
  }
  /* Name and price share one baseline; the tagline gets the full width
     underneath instead of being squeezed beside the price. */
  .plan-id {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 16px;
  }
  .plan-id h3 { grid-column: 1; grid-row: 1; font-size: 22px; }
  .plan-tagline { grid-column: 1 / -1; grid-row: 2; margin-top: 4px !important; font-size: 15px; }
  .plan-price { grid-column: 2; grid-row: 1; margin-top: 0 !important; font-size: 36px; text-align: right; white-space: nowrap; }
  .plan-min-note { font-size: 14.5px; }
  .plan-includes li { font-size: 16px; }
  .plan-same { font-size: 16px; }
  /* One column: each plan already says "minutes a month". */
  .plan-table-head { display: none; }
  .plan-table-head + .plan { border-top: none; }
  .plan-no-includes { grid-template-areas: "id" "minutes" "cta"; }
  .plan-cta, .plan-cta .btn { width: 100%; justify-self: stretch; }
  .plan-topup { padding: 20px; flex-direction: column; gap: 6px; }
  .plan-topup-k { min-width: 0; }

  .form-card { padding: 24px 20px; }
  .field-row { grid-template-columns: 1fr; }
  .field { margin-bottom: 18px; }
  .form-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .form-foot .btn { width: 100%; }
  .form-status { min-height: 2.9em; }
}