/* ==========================================================================
   HyperVPN — css/pricing.css
   Page-only styles for pricing.html: page head, plans section, payment band,
   comparison section, FAQ band, closing CTA. Components live in style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page head (§6.2): eyebrow → h1 → lead → guarantee badge + note, centred
   -------------------------------------------------------------------------- */
.phead{padding-top:48px;padding-bottom:40px}
.phead__inner{display:grid;justify-items:center;text-align:center;gap:18px;max-width:760px;margin-inline:auto}
.phead h1{max-width:14ch}
.phead .lead{max-width:56ch;margin:0}
.phead__guarantee{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:4px 0 0;font-size:14px;color:var(--text-3)}
.phead__guarantee .badge{height:28px;padding:0 12px 0 10px;font-size:13px}
.phead__guarantee .badge .icon{width:14px;height:14px;flex:none}
.phead__note{max-width:40ch}
@media (max-width:640px){
  .phead{padding-top:32px;padding-bottom:28px}
  .phead__inner{gap:14px}
}

/* --------------------------------------------------------------------------
   Plans section (§5.8): seg centred, 3 cards, line under the cards
   -------------------------------------------------------------------------- */
.plans-section{padding-top:16px}
.seg-wrap{display:grid;justify-items:center;margin-bottom:36px}
.plans{margin-top:8px}  /* room for the ribbon on the lifted card */
.plan{overflow-wrap:anywhere}
.plan__sub .badge{transition:opacity var(--dur-2) var(--ease-out)}
.plan__sub .badge[hidden]{display:none}
/* price crossfade: out 120ms (style.css .is-out) → in 180ms */
.plan__price.is-swap{transition-duration:180ms}
/* ?p=<plan> preselect: quiet highlight, no second primary */
.plan.is-picked{border-color:rgba(255,142,110,.55)}
.plan.is-picked:not(.plan--recommended){box-shadow:var(--border-inner),0 0 0 3px var(--accent-tint),var(--shadow-2)}
/* plan button: «Выбрать Про · 2 868 ₽ за год»; the price part is lighter and wraps under the label on narrow cards */
.plan__cta{gap:6px;flex-wrap:wrap;padding-inline:16px;line-height:1.2}
.plan__cta-price{font-weight:500;font-variant-numeric:tabular-nums;opacity:.85;white-space:nowrap}
.plans-line{margin:28px auto 0;text-align:center;font-size:14px;color:var(--text-3);max-width:70ch}
@media (max-width:899px){
  .plans-section{padding-top:8px}
  .seg-wrap{margin-bottom:28px}
  .plans{margin-top:12px}
  .plans-line{margin-top:24px}
}

/* --------------------------------------------------------------------------
   Payment band: heading + text left, the three chips right (stack ≤900)
   -------------------------------------------------------------------------- */
.pay-section{padding-block:clamp(40px,5vw,56px)}
.pay-band{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px 48px}
.pay-band h2{font-size:clamp(22px,2.2vw,28px);margin-bottom:8px}
.pay-band__text p{margin:0;font-size:15px;color:var(--text-3);max-width:52ch}
.pay-band .pay-row{justify-content:flex-end}
@media (max-width:899px){
  .pay-band{grid-template-columns:minmax(0,1fr)}
  .pay-band .pay-row{justify-content:flex-start}
}

/* --------------------------------------------------------------------------
   Comparison (§5.8 .cmp): the table is the card; note under it
   -------------------------------------------------------------------------- */
.cmp-section .section-head{margin-bottom:28px}
.cmp-wrap{box-shadow:var(--border-inner),var(--shadow-1)}
/* keyboard-scrollable region (tabindex=0): keep the focus ring on top of the card shadow */
.cmp-wrap:focus-visible{outline:none;box-shadow:var(--shadow-focus),var(--border-inner),var(--shadow-1)}
.cmp thead th{text-align:center}
.cmp tbody th{font-family:var(--font-body)}
.cmp th.is-rec{color:var(--accent-bright)}
html[data-theme="light"] .cmp th.is-rec{color:var(--accent)}
.cmp__yes .icon{stroke-width:2.5}
@media (max-width:640px){
  .cmp-section .section-head{margin-bottom:20px}
  .cmp-note{font-size:13px}
}

/* --------------------------------------------------------------------------
   FAQ band (§5.13): single column in --container-text
   -------------------------------------------------------------------------- */
.faq-section .section-head{margin-bottom:24px}
.faq-section .faq summary{padding-right:4px}

/* --------------------------------------------------------------------------
   Closing CTA (§6.2): accent card, hero mascot 200px at the right, cropped
   -------------------------------------------------------------------------- */
.closing-section{padding-top:0}
.closing{display:grid;gap:14px;justify-items:start;align-content:center;min-height:280px;
  padding:clamp(28px,4vw,48px);padding-right:clamp(240px,30%,360px)}
.closing h2{max-width:16ch;margin-top:2px}
.closing__text{margin:0;font-size:var(--fs-lead);color:var(--text-2);max-width:40ch}
.closing__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.closing__hero{position:absolute;right:clamp(24px,5vw,72px);bottom:-44px;width:220px;height:auto;pointer-events:none}
@media (max-width:1023px){.closing__hero{width:200px;right:16px}}
@media (max-width:767px){
  .closing{padding-right:clamp(20px,2.4vw,32px);min-height:0}
  .closing__hero{display:none}
}
@media (max-width:640px){
  .closing__actions{flex-direction:column;align-items:stretch;width:100%}
  .closing__actions .btn{width:100%}
}