/* ============ Pricing page (v2) ============
 * Plan-selection page rendered at /account/pricing/.
 * Layered on top of tokens.css, components.css, and auth_v2.css —
 * loaded after them via {% block pagestylesheet %} in pricing.html.
 *
 * The auth shell is 420px wide by default; pricing widens to fit a
 * two-up plan grid + features list, and neutralizes the .auth-card
 * wrapper so the inner content (plan cards, includes panel) lays
 * out freely on the page background.
 */

/* `align-items: center` on body.auth-body pushes the card above the
 * scroll origin when its height exceeds the viewport — on mobile, the
 * stacked plan cards overflow and the top card becomes unreachable.
 * `safe center` falls back to start-alignment whenever content overflows. */
body.pricing-body {
  align-items: safe center;
}

.pricing-body .auth-shell {
  max-width: 880px;
  gap: var(--s-6);
}

/* Strip the centered card chrome — pricing renders its own card grid below.
 * Re-establish vertical rhythm with flex+gap since the inner sections
 * (pricing-head, plan-grid, includes-card) are siblings of a now-bare div. */
.pricing-body .auth-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.pricing-head { text-align: center; }
.pricing-head .auth-sub { margin: 0; }

/* Two-up plan grid; stacks below 720px. */
.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}

.plan-card {
  display: flex;
  flex-direction: column;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-4);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.plan-card.is-featured {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.plan-card-head {
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.plan-name {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--c-fg);
}

.plan-card-body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1;
}

.plan-tagline {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--c-fg-muted);
}

.plan-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  color: var(--c-fg);
}
.plan-amount {
  font-size: var(--fs-28);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.plan-period {
  font-size: var(--fs-14);
  color: var(--c-fg-muted);
}

.plan-billed {
  margin: calc(var(--s-2) * -1) 0 0;
  font-size: var(--fs-12);
  color: var(--c-fg-faint);
}

.plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--fs-13);
  color: var(--c-fg);
}
.plan-features li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.plan-features svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--c-success);
}

/* "Coming Soon" tag for not-yet-shipped features (e.g. Interactive Reports).
 * Hex first + literal oklch second per CLAUDE.md §4.13 so the floor browser
 * keeps a readable pill instead of an oklch-at-computed-value transparent one. */
.feature-soon {
  display: inline-block;
  margin-left: var(--s-1);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #5a5a66;
  color: var(--c-fg-muted);
  background: #ececef;
  background: oklch(0.94 0.005 285);
}

.plan-cta {
  margin-top: auto;
  width: 100%;
  height: 40px;
  font-weight: 600;
}

/* "What's included" — single-column card with check rows. */
.includes-card {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-4);
  box-shadow: var(--sh-1);
  padding: var(--s-6);
}
.includes-title {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-18);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--c-fg);
}
.includes-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3) var(--s-5);
  font-size: var(--fs-13);
  color: var(--c-fg);
}
.includes-grid li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.includes-grid svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--c-success);
}

@media (max-width: 720px) {
  .plan-grid { grid-template-columns: 1fr; }
  .includes-grid { grid-template-columns: 1fr; }
}

/* ============ LEN-101: tiered pricing (toggle + 3-up grid + corporate) ============
 * Layered on top of the two-up base above. The pricing page renders a
 * monthly/annual toggle over a Pro / Max / Corporate grid (Standard retired). */

/* Cadence toggle — centered pill group above the grid. Stacked above the
 * plan cards (LEN-135): the featured Max card rises via negative margin +
 * transform, and on the floor browser the wrap's flex-gap collapses — the
 * z-index guarantees the lifted card can never click-shield the toggle. */
.plan-toggle {
  display: inline-flex;
  align-self: center;
  gap: 2px;
  padding: 3px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  position: relative;
  z-index: 2;
}
.plan-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border: 0;
  background: transparent;
  color: var(--c-fg-muted);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.plan-toggle-btn.is-active {
  background: var(--c-panel);
  color: var(--c-fg);
  box-shadow: var(--sh-1);
}
.plan-toggle-save {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--c-accent);
}

/* 3-up grid for Pro / Max / Corporate. Collapses 3 -> 1 on narrow viewports.
 * Equal specificity to .plan-grid but defined later, so it wins. */
.plan-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  /* No align-items override: cards stretch (grid default) so all three share the
     tallest card's height and their CTAs line up along a common baseline. */
}
@media (max-width: 860px) {
  .plan-grid-3 { grid-template-columns: 1fr; }
}

/* LEN-135: the old .plan-allowance ruled hero is gone — every per-tier limit
   (imports allowance + saved-content limits) now lives in each card's
   .plan-features bullets, per owner feedback that separate ruled sections
   were confusing. Only capabilities identical on every plan still live in
   .includes-card. */
.plan-note {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--c-fg-muted);
}

/* Corporate card: visually distinct via a soft tint (not a dashed border, which
   reads as unfinished). Its feature list takes the place of the allowance hero;
   the CTA still bottom-aligns with the other cards via .plan-cta margin-top. */
.plan-card.corporate {
  background: var(--c-bg-soft);
}
.plan-amount-custom {
  font-size: var(--fs-28);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ===== LEN-135 bake-off variant B: max-v-light =====
 * Direction B — the *light* flagship (counterpoint to the dark inverted A).
 * Sells the $40 upgrade through elevation + framing + scale, never darkness:
 *   1. Physical lift — the card floats above Pro/Corporate on a deep layered
 *      shadow and a small translateY, reading as literally raised off the page.
 *   2. Warm framing — accent hairline + a faint top-of-card glow (solid-white
 *      fallback first) + a full-width accent crown bar hairline the head.
 *   3. Scale & rhythm — larger, tighter price; roomier body; the 4 "plus"
 *      bullets become the payload, each with an accent check chip in a soft
 *      rounded square so the upgrade story is what the eye lands on.
 *   4. A solid-fill "Best value" pill so the crown reads at a glance.
 *
 * CSS-floor note (§4.13): the --c-* color tokens are oklch(). A var() whose
 * token resolves to oklch() is PARSE-TIME valid on the ~2017 floor browser —
 * it wins the cascade, then fails "invalid at computed-value time", which
 * discards any earlier fallback declaration. So wherever accent color is
 * load-bearing below, the pattern is: literal hex first, then a LITERAL
 * oklch() copied from tokens.css (parse-time dropped on the floor, so the
 * hex stands; modern engines take the oklch). Keep the literals in sync with
 * tokens.css: accent oklch(0.55 0.15 255) ~ #2971c6, accent-hover
 * oklch(0.49 0.16 255) ~ #025eb8, accent-soft oklch(0.96 0.03 255) ~ #e5f3ff. */

/* Lift + frame. The negative top margin lets the card grow taller upward while
 * the grid still stretches all three to a shared height (CTAs stay baselined). */
.plan-card.max-v-light {
  border: 1px solid #2971c6;                        /* floor: solid accent frame */
  border-color: oklch(0.55 0.15 255);               /* modern: exact --c-accent */
  box-shadow: var(--sh-3);                          /* rgba token — works on floor */
  border-radius: var(--r-5);
  margin-top: calc(var(--s-4) * -1);               /* rise above neighbours */
  /* Faint interior glow from the top over the white panel. Literal colors so
   * the whole stack computes on the floor browser too (a var()->oklch()
   * gradient would die IACVT and leave the card background transparent). */
  background:
    radial-gradient(120% 60% at 50% -8%, #e5f3ff 0%, rgba(229, 243, 255, 0) 62%),
    #ffffff;
  position: relative;
  transform: translateY(-8px);                      /* decorative extra lift */
}

/* Accent crown bar across the very top of the card. `overflow:hidden` on the
 * base .plan-card clips it neatly to the rounded corners. */
.plan-card.max-v-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #2971c6;
  background: oklch(0.55 0.15 255);
}

/* Head: transparent so the interior glow shows through, with a stronger
 * name and the badge inverted to a solid accent pill. */
.plan-card.max-v-light .plan-card-head {
  background: transparent;
  border-bottom-color: var(--c-border);
  padding-top: var(--s-6);
}
.plan-card.max-v-light .plan-name {
  font-size: var(--fs-18);
  letter-spacing: -0.01em;
}

/* Solid-fill flagship badge — inverted from the soft-tint default so the
 * "Best value" crown is unmistakable. The hex line is load-bearing on the
 * floor browser: without it the fill computes to transparent and the white
 * text vanishes on the white card. */
.plan-card.max-v-light .badge.accent {
  color: var(--c-accent-fg);
  background: #2971c6;
  background: oklch(0.55 0.15 255);
  border-color: #2971c6;
  border-color: oklch(0.55 0.15 255);
  padding: 2px 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--sh-1);
}

/* Body: roomier so the upgrade bullets breathe. */
.plan-card.max-v-light .plan-card-body {
  padding: var(--s-6) var(--s-6) var(--s-8);
  gap: var(--s-5);
}

/* Price: the biggest, tightest number on the page. */
.plan-card.max-v-light .plan-amount {
  font-size: 40px;
  letter-spacing: -0.03em;
  color: var(--c-fg);
}
.plan-card.max-v-light .plan-period {
  font-size: var(--fs-15);
}

/* "Everything in Pro, plus:" — promote to an eyebrow so the payload below
 * clearly reads as the differentiator, not fine print. */
.plan-card.max-v-light .plan-note {
  margin: var(--s-1) 0 calc(var(--s-1) * -1);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2971c6;
  color: oklch(0.55 0.15 255);
}

/* The four upgrade bullets are the payload: heavier weight, more air, and an
 * accent check chip in a soft rounded square so each line lands. */
.plan-card.max-v-light .plan-features {
  gap: var(--s-3);
  font-size: var(--fs-14);
  font-weight: 500;
}
.plan-card.max-v-light .plan-features li {
  align-items: flex-start;
  gap: var(--s-3);
  line-height: 1.35;
}
.plan-card.max-v-light .plan-features svg {
  width: 20px;
  height: 20px;
  padding: 3px;
  margin-top: 1px;
  border-radius: var(--r-2);
  color: #2971c6;
  color: oklch(0.55 0.15 255);
  background: #e5f3ff;                     /* soft-square chip behind it */
  background: oklch(0.96 0.03 255);
}

/* CTA: a touch taller so the flagship's call-to-action carries more weight;
 * still baselines with the others via the shared .plan-cta margin-top:auto.
 * The color pairs also repair a base floor bug for THIS card: .btn-accent's
 * background is var(--c-accent) (oklch), which computes to transparent on
 * the floor browser — a white-on-white invisible button. The flagship CTA
 * must never be invisible. */
.plan-card.max-v-light .plan-cta {
  height: 46px;
  font-size: var(--fs-15);
  box-shadow: var(--sh-2);
  color: var(--c-accent-fg);
  background: #2971c6;
  background: oklch(0.55 0.15 255);
}
.plan-card.max-v-light .plan-cta:hover {
  background: #025eb8;
  background: oklch(0.49 0.16 255);
}

/* At the ≤860px single-column collapse the lift/negative-margin would just
 * shove the card into the toggle above it — neutralize both so the stack
 * reads cleanly while keeping the frame, glow, crown, and bullet hierarchy. */
@media (max-width: 860px) {
  .plan-card.max-v-light {
    margin-top: 0;
    transform: none;
  }
}