/* sections/pricing.css
 *
 * /pricing redesign — Figma node 188:4103.
 *
 * Every selector here is scoped to `.ays-light` so the dark legacy
 * `.plan-*` rules in sections/legacy-dark.css remain intact for any
 * surface that still consumes the original dark plan card. Markup
 * lives in AysPlanCard + AysBillingToggle + AysStartCard +
 * AysFaqSection.
 *
 * Two scope conventions:
 *   .ays-light .ays-pricing-{section}-{element}  — new page sections
 *   .ays-light .plan-* / .pricing-toggle-*       — light overrides on
 *                                                  shared primitives
 *
 * Add new rules here for /pricing-only behavior. Cross-page tweaks
 * (e.g. how AysFaqSection looks in general) belong in
 * sections/components.css.
 *
 * Load order in Layout.astro: 4th (last — overrides everything that
 * needs to be overridden for the light /pricing experience).
 */

/* Section frames inherit the global rhythm tokens
   (--ays-section-padding-block / --ays-section-padding-inline). */

/* FAQ wrapper on /pricing is a <div> (not <section>) to avoid
 * nesting with the <section> AysFaqSection renders internally —
 * which would otherwise create an untitled outline entry. Mirror
 * the section rhythm padding here so the FAQ block keeps its
 * vertical breathing between the plans section above and the
 * AysCTASection below. */
.ays-pricing-faq-wrap {
  padding: var(--ays-section-padding-block) var(--ays-section-padding-inline);
}

/* Trial section sits on a faint ink-on-cream wash (black @ 4%)
   to separate it from the surrounding sections per Figma. */
.ays-light .ays-pricing-trial {
  background: var(--ays-color-black-004);
}

/* Two-column split shared by ays-pricing-plans and trial. The FAQ
   reuses Home's `.ays-home-faq-grid` instead so the pattern is
   identical across pages. */
.ays-light .ays-pricing-plans-split,
.ays-light .ays-pricing-trial-split {
  display: grid;
  grid-template-columns: minmax(0, 332px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.ays-light .ays-pricing-plans-heading,
.ays-light .ays-pricing-trial-heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ays-light .ays-pricing-plans-intro {
  color: var(--ays-text-secondary);
}

.ays-light .ays-pricing-plans-credit-legend {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ays-light .ays-pricing-plans-credit-legend li {
  padding-left: 24px;
  position: relative;
  color: var(--ays-text-secondary);
}
.ays-light .ays-pricing-plans-credit-legend li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--ays-text-brand);
  font-weight: var(--fw-h3);
}

/* ── Billing toggle ──
   Container is white + 1px `--ays-border-base` (same border the
   non-featured / "enabled" plan card uses). The active pill
   carries the brand purple gradient so the selected state
   reads strongly against the white track. ───────────────── */
.ays-light .pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ays-color-neutral-000);
  border: 1px solid var(--ays-border-base);
  margin-bottom: 24px;
}

.ays-light .pricing-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: var(--fs-button-m);
  font-weight: var(--fw-p-medium);
  color: var(--ays-text-secondary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ays-light .pricing-toggle-btn:hover {
  color: var(--ays-text-primary);
}

.ays-light .pricing-toggle-btn.is-active {
  background: var(--grad-button);
  color: var(--ays-color-neutral-000);
}
.ays-light .pricing-toggle-btn.is-active:hover {
  color: var(--ays-color-neutral-000);
}

/* Badge sits inline next to the "Annual" label. White-on-soft-
   purple when the surrounding button is inactive; flips to
   purple-on-white when the button is active so it stays legible
   against the gradient. */
.ays-light .pricing-toggle-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ays-text-brand);
  color: var(--ays-color-neutral-000);
  /* 10px sits below the BDS marketing scale floor (smallest is
   * --fs-p4 = 12px). Kept hardcoded; logged in
   * docs/bds-coverage-gaps.md under "Sub-scale type". */
  font-size: 10px;
  font-weight: var(--fw-h6);
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease;
}
.ays-light .pricing-toggle-btn.is-active .pricing-toggle-badge {
  background: var(--ays-color-neutral-000);
  color: var(--ays-text-brand);
}

/* ── Plan cards grid ──────────────────────────────────── */
.ays-light .ays-pricing-plans-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Plan card — light theme variant */
.ays-light .plan-card {
  background: var(--ays-color-neutral-050);
  border: 1px solid var(--ays-border-base);
  padding: 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 360px;
}

.ays-light .plan-card.featured {
  border-color: var(--ays-text-brand);
  background: var(--ays-color-neutral-000);
}

.ays-light .plan-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ays-light .plan-name {
  font-family: var(--serif);
  color: var(--ays-text-primary);
  margin: 0;
}

.ays-light .plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ays-text-brand);
  color: var(--ays-color-neutral-000);
  font-family: var(--sans);
  font-size: var(--fs-p4);
  font-weight: var(--fw-p-medium);
  white-space: nowrap;
}

.ays-light .plan-tagline {
  color: var(--ays-text-secondary);
  margin: 0;
}

.ays-light .plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 8px 0;
}

.ays-light .plan-price-amount {
  font-family: var(--serif);
  /* Price tag must stay visually invariant across breakpoints so the
   * dollar amount reads the same on every device. BDS's stepped
   * scale (h1 = 56/48/36) would grow it on desktop and shrink it on
   * mobile, which is not the intent. Hardcoded; logged in
   * docs/bds-coverage-gaps.md under "Breakpoint-invariant headings". */
  font-size: 48px;
  font-weight: var(--fw-h6);
  line-height: 1;
  color: var(--ays-text-primary);
}

.ays-light .plan-price-period {
  font-family: var(--sans);
  font-size: var(--fs-p2);
  color: var(--ays-text-secondary);
}

.ays-light .plan-savings {
  margin: -8px 0 0;
  color: var(--ays-text-tertiary);
}

/* Benefits list with circular check icon */
.ays-light .plan-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ays-light .plan-benefit {
  position: relative;
  padding-left: 32px;
  /* The benefit text may wrap to multiple lines. We want the check
     icon vertically aligned with the FIRST line, so the line-height
     becomes the icon's vertical reference. Padding above and below
     keeps the icon honestly centered on that first line regardless
     of the BDS p3 font-size shift between breakpoints. */
  min-height: 21px;
  display: flex;
  align-items: flex-start;
  color: var(--ays-text-primary);
}

.ays-light .plan-benefit::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1em * var(--lh-body, 1.45) - 21px) / 2);
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--ays-color-primary-100);
}
.ays-light .plan-benefit::after {
  content: "";
  position: absolute;
  left: 5px;
  top: calc((1em * var(--lh-body, 1.45) - 21px) / 2 + 5px);
  width: 10px;
  height: 5px;
  border-left: 1.5px solid var(--ays-text-brand);
  border-bottom: 1.5px solid var(--ays-text-brand);
  transform: rotate(-45deg);
}

/* Plan CTAs — light theme variants */
.ays-light .plan-card .plan-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: var(--fs-button-m);
  font-weight: var(--fw-p-medium);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}
.ays-light .plan-card .plan-btn-outline {
  background: transparent;
  border: 1px solid var(--ays-text-brand);
  color: var(--ays-text-brand);
}
.ays-light .plan-card .plan-btn-outline:hover {
  background: var(--ays-color-primary-100);
}
.ays-light .plan-card .plan-btn-fill {
  background: var(--grad-button);
  color: var(--ays-color-neutral-000);
  border: none;
}
.ays-light .plan-card .plan-btn-fill:hover {
  transform: scale(1.02);
  opacity: 0.94;
}

/* ── Billing variant visibility — toggle JS flips
   [data-billing-state] on the host. ──────────────────── */
[data-billing-state="monthly"] [data-billing-variant="annual"],
[data-billing-state="annual"]  [data-billing-variant="monthly"] {
  display: none;
}

/* ── Trial section — plain 2x2 grid, no per-item chrome.
   Each step is icon + h6 title + body paragraph. The trial
   section's outer black-004 wash already separates the grid
   from neighboring sections, so individual cards would
   over-frame the content. ───────────────────────────────── */
.ays-light .ays-pricing-trial-summary {
  color: var(--ays-text-secondary);
}

.ays-light .ays-pricing-trial-summary strong {
  color: var(--ays-text-primary);
}

.ays-light .ays-pricing-trial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 24px;
}

.ays-light .ays-pricing-trial-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ays-light .ays-pricing-trial-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ays-color-primary-100);
  color: var(--ays-text-brand);
  font-family: var(--serif);
  /* Step number sits inside a fixed-size 56px circle and must stay
   * visually centered regardless of viewport. Using --fs-p1 (which
   * is responsive: 20/18/18) would shrink the digit asymmetrically
   * vs the circle. Hardcoded; logged in
   * docs/bds-coverage-gaps.md under "Breakpoint-invariant headings". */
  font-size: 20px;
  font-weight: var(--fw-h6);
}

.ays-light .ays-pricing-trial-step-title {
  color: var(--ays-text-primary);
  margin: 0;
}

.ays-light .ays-pricing-trial-step-body {
  color: var(--ays-text-secondary);
  margin: 0;
}

/* FAQ visuals come from the shared `.ays-home-faq*` block above —
   pricing reuses the same wrappers as Home so the pattern stays
   transversal. No `.ays-pricing-faq*` selectors needed here. */

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .ays-light .ays-pricing-plans-split,
  .ays-light .ays-pricing-trial-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ays-light .ays-pricing-plans-cards {
    grid-template-columns: 1fr;
  }
  .ays-light .ays-pricing-trial-grid {
    grid-template-columns: 1fr;
  }
}