/* Plans and prices in the V4 journey (pages/planes_v4.php) — page layout on top of
   tokens.css, components.css and home.css (shared header/footer). Mobile first; desktop from 960px. */

body.v4-planes { margin: 0; }
.v4-planes img { max-width: 100%; }

/* ---------- Hero ---------- */
.v4-planes__hero { padding-bottom: var(--space-32); }
.v4-planes__title { font: 800 38px/42px var(--font-sans); letter-spacing: -0.02em; margin: 0 0 var(--space-12); }
.v4-planes__lead { font: 400 17px/26px var(--font-sans); color: var(--ink-muted); margin: 0 0 var(--space-24); max-width: 520px; }
.v4-planes__hero-grid { display: grid; gap: var(--space-8); }

/* ---------- Applicant quantity (drives every plan on the page) ---------- */
.v4-planes__qty {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-16); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.v4-planes__qty-label { display: flex; flex-direction: column; min-width: 0; }
.v4-planes__qty-label strong { font: 700 16px/22px var(--font-sans); }
.v4-planes__qty-label small { font: 500 13px/20px var(--font-sans); color: var(--ink-muted); }
.v4-planes__qty-label small:empty { display: none; }
.v4-planes .uv-stepper { flex: none; }
.v4-planes .uv-stepper button:disabled { opacity: .45; cursor: default; }

/* ---------- Plans ---------- */
.v4-planes__plans { padding-top: var(--space-32); }
.v4-planes__plans .v4-planes__qty { margin-bottom: var(--space-24); }
.v4-planes__grid { display: grid; gap: var(--space-16); }
.v4-planes__main { max-width: none; }
.v4-planes__side { display: grid; gap: var(--space-16); align-content: start; }
.v4-planes__side .uv-plan { padding: var(--space-24) var(--space-16); gap: var(--space-16); }
.v4-planes__side .uv-plan__price strong { white-space: nowrap; }
.v4-planes .uv-plan__meta .v4-planes__meta-text, .v4-planes .uv-plan__meta .v4-planes__meta-text span { display: inline; }
@media (max-width: 719px) {
  .v4-planes .uv-plan__top { flex-direction: column; gap: var(--space-8); }
  .v4-planes .uv-plan__price { text-align: left; }
}

/* ---------- Expandable lists: more benefits and price breakdown ---------- */
.v4-planes__more summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-8);
  min-height: var(--tap-min); font: 700 15px/20px var(--font-sans); color: var(--ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.v4-planes__more summary::-webkit-details-marker { display: none; }
.v4-planes__more summary .uv-icon { transition: transform .2s ease; color: var(--ink-muted); }
.v4-planes__more[open] summary .uv-icon { transform: rotate(180deg); }
.v4-planes__more .uv-checks { margin-top: var(--space-8); }
.v4-planes__breakdown {
  margin: var(--space-8) 0 0; padding: var(--space-12) var(--space-16); background: var(--surface-100);
  border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-8); font: 500 14px/20px var(--font-sans);
}
.v4-planes__breakdown div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); }
.v4-planes__breakdown dt { color: var(--ink-muted); }
.v4-planes__breakdown dd { margin: 0; font-weight: 700; white-space: nowrap; }
.v4-planes__breakdown .v4-planes__breakdown-total { border-top: 1px solid var(--line); padding-top: var(--space-8); }
.v4-planes__breakdown-total dt { color: var(--ink); font-weight: 700; }

/* ---------- Closing ---------- */
.v4-planes .v3-closing__text { margin-bottom: var(--space-24); }

@media (min-width: 960px) {
  .v4-planes__title { font-size: 56px; line-height: 60px; letter-spacing: -0.025em; }
  .v4-planes__lead { font-size: 18px; line-height: 28px; }
  .v4-planes__hero-grid { grid-template-columns: minmax(0, 1fr) 400px; align-items: end; column-gap: var(--space-48); }
  .v4-planes__hero-grid .v4-planes__lead { margin-bottom: 0; }
  .v4-planes__plans { padding-top: var(--space-48); }
  .v4-planes__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-24); align-items: start; }
  .v4-planes__side { gap: var(--space-24); }
  .v4-planes__side .uv-plan { padding: var(--space-32); }
}

@media (prefers-reduced-motion: reduce) {
  .v4-planes__more summary .uv-icon { transition: none; }
}