/* ==========================================================================
   Pricing (/pricing/ and the kids parent plans page). Only tokens from app.css; RTL via logical properties.
   The duration switch is CSS-only: radio inputs precede the switch and the grid, `:checked ~` shows the options of
   the chosen length (works without JS and without :has()).
   ========================================================================== */

.pr { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
.pr-head { display: grid; gap: 10px; justify-items: center; text-align: center; max-inline-size: 760px; margin-inline: auto; }
.pr-kicker { margin: 0; color: var(--indigo); font-weight: 700; font-size: var(--fs-sm); }
.pr-head h1 { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-title); }
.pr-lead { margin: 0; color: var(--ink-2); font-size: var(--fs-md); }
.pr-status { margin: 4px 0 0; display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ok) 12%, var(--card)); color: var(--ink); font-size: var(--fs-sm); }
.pr-status .ic { color: var(--ok); }
.pr-closed { margin: 0; padding: 12px 16px; border-radius: var(--r-md); background: color-mix(in srgb, var(--saffron) 18%, var(--card));
  display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); }

/* duration switch ----------------------------------------------------------- */
.pr-plans { position: relative; display: grid; gap: 20px; }
.pr-r { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; pointer-events: none; }
.pr-switch { justify-self: center; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--paper-2); }
.pr-sw { min-block-size: 40px; min-inline-size: 88px; padding-inline: 16px; display: inline-grid; place-items: center; border-radius: 999px;
  font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; transition: background-color var(--dur-1) var(--ease-std), color var(--dur-1); }
.pr-sw:hover { color: var(--ink); }
#pr-d1:checked ~ .pr-switch .pr-sw1, #pr-d3:checked ~ .pr-switch .pr-sw3, #pr-d6:checked ~ .pr-switch .pr-sw6,
#pr-d12:checked ~ .pr-switch .pr-sw12 { background: var(--card); color: var(--ink); box-shadow: var(--e1); }
#pr-d1:focus-visible ~ .pr-switch .pr-sw1, #pr-d3:focus-visible ~ .pr-switch .pr-sw3, #pr-d6:focus-visible ~ .pr-switch .pr-sw6,
#pr-d12:focus-visible ~ .pr-switch .pr-sw12 { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* only the chosen length is visible (all of them stack when no radio is checked, e.g. without CSS support) */
.pr-r:checked ~ .pr-grid .pr-opt { display: none; }
#pr-d1:checked ~ .pr-grid .pr-m1, #pr-d3:checked ~ .pr-grid .pr-m3, #pr-d6:checked ~ .pr-grid .pr-m6,
#pr-d12:checked ~ .pr-grid .pr-m12 { display: grid; }

/* plan cards ----------------------------------------------------------------- */
.pr-grid { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 900px) { .pr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.pr-card { position: relative; background: var(--card); border-radius: var(--r-xl); box-shadow: var(--e1); padding: 24px 20px 20px;
  display: grid; gap: 14px; align-content: start; border: 1px solid transparent; }
.pr-card.is-hero { border: 2px solid var(--indigo); box-shadow: var(--e2); }
@media (min-width: 900px) { .pr-card.is-hero { transform: translateY(-8px); } }
.pr-card.is-suggested:not(.is-hero) { border-color: color-mix(in srgb, var(--indigo) 45%, var(--hair)); }
.pr-flag { position: absolute; inset-block-start: -13px; inset-inline-start: 20px; background: var(--indigo); color: var(--on-indigo);
  font-size: var(--fs-xs); font-weight: 700; padding: 2px 12px; border-radius: 999px; }
.pr-top { display: flex; gap: 12px; align-items: center; }
.pr-top h3 { margin: 0; font-size: var(--fs-xl); line-height: var(--lh-title); }
.pr-who { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.pr-ico { inline-size: 44px; block-size: 44px; border-radius: var(--r-md); display: grid; place-items: center; flex: none;
  background: var(--tint); color: var(--indigo); }
.pr-ico .ic { inline-size: 22px; block-size: 22px; }
.pr-card[id="tier-kids"] .pr-ico { background: color-mix(in srgb, var(--saffron) 24%, var(--card)); color: var(--ink); }
.pr-card[id="tier-family"] .pr-ico { background: var(--indigo); color: var(--on-indigo); }
.pr-desc { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-body); }

.pr-opt { display: grid; gap: 6px; padding-block: 14px 4px; border-block-start: 1px solid var(--sep); }
.pr-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.pr-amt { font-family: var(--f-body); font-size: var(--fs-2xl); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pr-cur { font-weight: 600; }
.pr-per { color: var(--ink-2); font-size: var(--fs-sm); }
.pr-sub { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.pr-badge { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700;
  background: color-mix(in srgb, var(--saffron) 30%, var(--card)); color: var(--ink); }
.pr-saves { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--fs-sm); color: var(--ok); font-weight: 600; }
.pr-saves s { color: var(--ink-2); font-weight: 400; margin-inline-end: 4px; }
.pr-none { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.pr-buy { display: grid; gap: 8px; margin-block-start: 6px; }
.pr-cta { inline-size: 100%; min-block-size: 48px; justify-content: center; }
.pr-coupon summary { cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); min-block-size: 32px; display: inline-flex; align-items: center; }
.pr-coupon input { inline-size: 100%; margin-block-start: 6px; }
.pr-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: var(--fs-sm); border-block-start: 1px solid var(--sep); padding-block-start: 14px; }
.pr-points li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.7; }
.pr-points .ic { color: var(--ok); margin-block-start: 3px; }

/* free tier ------------------------------------------------------------------ */
.pr-free { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--e1); padding: 24px 20px; display: grid; gap: 12px; }
.pr-free h2, .pr-compare h2, .pr-faq h2 { margin: 0; font-size: var(--fs-lg); }
.pr-free-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pr-free-grid { grid-template-columns: 1fr 1fr; } }
.pr-free-col h3 { margin: 0 0 8px; font-size: var(--fs-md); display: flex; gap: 8px; align-items: center; }
.pr-free-col h3 .ic { color: var(--indigo); }
.pr-free-col ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: var(--fs-sm); line-height: var(--lh-body); }

/* comparison ---------------------------------------------------------------- */
.pr-compare { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.pr-compare .table-wrap { position: relative; overflow-x: auto; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--e1); }
.pr-table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-inline-size: 640px; }
.pr-table th, .pr-table td { padding: 10px 12px; text-align: start; border-block-end: 1px solid var(--sep); vertical-align: top; }
.pr-table thead th { font-weight: 700; color: var(--ink); background: var(--paper); }
.pr-table tbody th { font-weight: 600; inline-size: 30%; }
.pr-table tr:last-child th, .pr-table tr:last-child td { border-block-end: 0; }
.pr-table .hl { background: color-mix(in srgb, var(--indigo) 7%, var(--card)); }
.pr-table thead .hl { color: var(--indigo); }
.pr-table .ic { color: var(--ok); }
.pr-note { margin: 0; color: var(--ink-2); font-size: var(--fs-xs); line-height: var(--lh-body); }

/* FAQ ------------------------------------------------------------------------ */
.pr-faq { display: grid; gap: 8px; max-inline-size: 820px; }
.pr-faq details { background: var(--card); border-radius: var(--r-md); box-shadow: var(--e1); padding: 0 16px; }
.pr-faq summary { cursor: pointer; min-block-size: 48px; display: flex; align-items: center; font-weight: 600; font-size: var(--fs-sm); }
.pr-faq p { margin: 0 0 14px; color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* kids parent plans page (kids/parent/plans.html) ------------------------------- */
.pr-kids .pr-grid { grid-template-columns: 1fr; }
@media (min-width: 760px) { .pr-kids .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pr-kids .pr-card.is-hero { transform: none; } }

@media (prefers-reduced-motion: reduce) { .pr-sw { transition: none; } }