/* Pricing page (Figma frame 8206:13352). Prefix: pr- */

/* ---------- 01 Plans (8207:56869) ---------- */
.pr-plans .wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-top: var(--hero-top);
  padding-bottom: var(--sp-10);
}
.pr-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  text-align: center;
}
.pr-intro h1 { width: 100%; }
.pr-intro__support { width: 620px; }

/* Plans · billing (8247:55099) */
.pr-billing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-7);
  width: 100%;
}

/* Billing toggle (6801:1658): click the unselected segment */
.pr-toggle {
  --toggle-ease: cubic-bezier(0.77, 0, 0.175, 1);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--bg-raised);
  border: 1px solid var(--alpha-100);
  border-radius: var(--r-md);
}
.pr-toggle__indicator {
  position: absolute;
  top: 4px;
  left: 96px;
  width: 174px;
  height: 36px;
  background: var(--neutral-800);
  border-radius: var(--r-sm);
  transition: left 250ms var(--toggle-ease), width 250ms var(--toggle-ease);
}
main[data-billing="monthly"] .pr-toggle__indicator { left: 4px; width: 88px; }
.pr-toggle__seg {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  white-space: nowrap;
}
.pr-toggle__seg--monthly { width: 88px; }
.pr-toggle__seg--yearly { width: 174px; }
.pr-toggle__seg[aria-pressed="true"] { cursor: default; }
.pr-toggle__label {
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.16px;
  transition: color 250ms var(--toggle-ease);
}
.pr-toggle__seg[aria-pressed="true"] .pr-toggle__label { color: var(--text-primary); }
.pr-toggle__save {
  color: var(--green-500);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.12px;
}

.pr-cards-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
}
.pr-variants {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}
.pr-cards {
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  width: 100%;
  transition: opacity 250ms cubic-bezier(0.77, 0, 0.175, 1), visibility 0s linear 0s;
}
main[data-billing="yearly"] .pr-cards[data-variant="monthly"],
main[data-billing="monthly"] .pr-cards[data-variant="yearly"] {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 250ms;
}
.pr-note {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
  text-align: center;
  white-space: nowrap;
}

/* Pricing card v3 (6801:1749) · State=Default / Hover (ON_HOVER, smart animate 200ms ease-out) */
.pr-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  min-width: 1px;
  padding: var(--sp-6);
  background-color: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
/* 1.5px stroke (included in layout): Chrome floors fractional borders, so 1px border + 0.5px inset shadow + 0.5px padding */
.pr-card--recommended { border-color: var(--accent); padding: 32.5px; }
.pr-card.pr-card--recommended::after { box-shadow: inset 0 0 0 0.5px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.pr-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface-selected);
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.pr-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--r-xl) - 1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
  transition: box-shadow 200ms ease-out;
}
.pr-card:hover { background-color: var(--bg-base); }
.pr-card--recommended:hover { background-color: var(--bg-raised); }
.pr-card:hover::before { opacity: 1; }
.pr-card:hover { border-color: var(--border-strong); }
.pr-card--recommended:hover { border-color: var(--accent); }
/* Recommended hover stroke is 2px: 1px border + 1px inside */
.pr-card--recommended:hover::after {
  box-shadow: inset 0 0 0 1px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pr-card__identity {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
}
.pr-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  white-space: nowrap;
}
.pr-badge {
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--field-chip);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
  white-space: nowrap;
}
.pr-badge--accent {
  background: var(--accent-tint);
  color: var(--text-accent);
}
.pr-card__includes {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.pr-card__includes p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
}
.pr-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  white-space: nowrap;
}
.pr-card__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
}
.pr-card__amount {
  color: var(--text-primary);
  font-size: 56px;
  font-weight: 600;
  line-height: 60px;
  letter-spacing: -1.4px;
}
.pr-card__period {
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.pr-card__saving {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
}
.pr-card__saving--save { color: var(--green-500); }
.pr-card__cta { width: 100%; }
.pr-card__divider {
  width: 100%;
  height: 1px;
  background: var(--border-subtle);
}
.pr-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
}
.pr-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--neutral-200);
  font-size: 16px;
  line-height: 24px;
}
.pr-card__guarantee {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
  white-space: nowrap;
}

/* icon/check (accent), 20px: Group inset 25% 16.67% 29.17%, stroke overhang 1px */
.pr-check {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  overflow: hidden;
}
.pr-check img { position: absolute; left: 2.333px; top: 4px; }

/* Other plans (8228:13765) */
.pr-other {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  width: 100%;
  margin-top: var(--sp-6); /* 64px from the plans block (gap 32 + 32) */
}
.pr-other__label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex-shrink: 0;
  width: 282px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}
.pr-other__list {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  min-width: 1px;
}
.pr-other__row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border-subtle);
}
.pr-other__plan {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: var(--sp-4);
  min-width: 1px;
}
.pr-other__marks {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-shrink: 0;
  width: 68px;
}
.pr-other__name {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  min-width: 1px;
  white-space: nowrap;
}
.pr-other__title { color: var(--text-primary); font-size: 16px; line-height: 26px; }
.pr-other__product { color: var(--text-tertiary); font-size: 14px; line-height: 22px; }
.pr-other__price {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  gap: var(--sp-1);
  white-space: nowrap;
}
.pr-other__amount {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.09px;
}
.pr-other__period {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
}
.pr-other__row .btn { flex-shrink: 0; }

/* ---------- shared heading row (02 / 03) ---------- */
.pr-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}
.pr-head-row__title { width: 690px; }
.pr-head-row__support { width: 408px; }

/* ---------- 02 Features included (8210:13629) ---------- */
.pr-features .wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}
.pr-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
}
.pr-panel__headers {
  display: flex;
  align-items: flex-start;
  background: var(--bg-raised);
}
.pr-panel__header {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 1px;
  padding: var(--sp-6);
}
.pr-panel__header--split { border-left: 1px solid var(--border-strong); }
.pr-panel__name {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  white-space: nowrap;
}
.pr-panel__row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--border-subtle);
}
.pr-panel__cell {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 1px;
  padding: var(--sp-6);
}
.pr-panel__cell + .pr-panel__cell { border-left: 1px solid var(--border-subtle); }
.pr-panel__cell.pr-panel__cell--split { border-left-color: var(--border-strong); }

/* ---------- 03 Compare plans (8211:13661) ---------- */
.pr-compare .wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}
.pr-table {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  width: 100%;
  padding: var(--sp-6) 0;
}
/* Recommended column (8230:13746): raised fill, 1.5px inside blue stroke, xl radius */
.pr-table__band {
  position: absolute;
  left: 600px;
  top: 0;
  bottom: 0;
  width: 306px;
  background: var(--bg-raised);
  border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
/* Best value chip (8230:13747): visible bound to Billing v3/show/best-value (Yearly only) */
.pr-table__chip {
  position: absolute;
  left: 713px;
  top: -12px;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  width: 80px;
  height: 24px;
  padding: var(--sp-1) var(--sp-2);
  overflow: hidden;
  border-radius: var(--r-pill);
  background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--bg-base);
  color: var(--text-accent);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
  white-space: nowrap;
}
main[data-billing="monthly"] .pr-table__chip { display: none; }
/* Two plans (Monthly vs Yearly): 282px label, two fluid plan columns; the
   band and chip sit on the second (Yearly) column */
.pr-table--two .pr-table__plan,
.pr-table--two .pr-table__value,
.pr-table--two .pr-table__action { flex: 1 1 0; width: auto; min-width: 0; }
.pr-table--two .pr-table__band {
  left: calc((100% - 330px) / 2 + 318px);
  width: calc((100% - 330px) / 2 + 24px);
}
.pr-table--two .pr-table__chip { left: calc((100% - 330px) / 4 * 3 + 290px); }
.pr-table__header,
.pr-table__row,
.pr-table__actions {
  position: relative;
  display: flex;
  gap: var(--gutter);
  width: 100%;
}
.pr-table__header { align-items: flex-end; }
.pr-table__label { flex-shrink: 0; width: 282px; }
.pr-table__label--action { height: 48px; }
.pr-table__plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  width: 282px;
  white-space: nowrap;
}
.pr-table__marks {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
}
.pr-table__groups {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  width: 100%;
}
.pr-table__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
}
.pr-table__rows {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.pr-table__row {
  align-items: center;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.pr-table__row--yearly { padding: var(--sp-4) 0; }
.pr-table__label--stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
}
.pr-table__label-main { color: var(--text-primary); font-size: 16px; line-height: 26px; }
.pr-table__label-sub { color: var(--text-tertiary); font-size: 14px; line-height: 22px; }
.pr-table__value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  width: 282px;
  min-height: 24px;
}
.pr-table__value--stack { flex-direction: column; gap: var(--sp-1); }
.pr-table__value--baseline { align-items: baseline; }
.pr-table__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  font-weight: 500;
}
.pr-table__amount-l {
  color: var(--text-primary);
  font-size: 40px;
  font-weight: 500;
  line-height: 46px;
  letter-spacing: -0.8px;
}
.pr-table__amount-s {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.09px;
}
.pr-table__per {
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.pr-table__save {
  color: var(--green-500);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
}
.pr-table__text { color: var(--text-secondary); font-size: 16px; line-height: 26px; }
.pr-table__text--none { color: var(--text-tertiary); }
.pr-table__actions { align-items: flex-start; }
.pr-table__action {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  width: 282px;
}
.pr-table__action .btn { flex: 1 0 0; min-width: 1px; }

/* Every plan (8230:13749) */
.pr-every {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  width: 100%;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.pr-every__label { flex-shrink: 0; width: 282px; white-space: nowrap; }
.pr-every__items {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: var(--sp-6);
  min-width: 1px;
}
.pr-every__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 26px;
  white-space: nowrap;
}

/* ---------- 04 Questions (8206:13438) ---------- */
.pr-questions .wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}
.pr-questions__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  flex-shrink: 0;
  width: 384px;
}
.pr-questions__help {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}
.pr-questions__contact {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 24px;
}

/* FAQ item (6781:334) */
.pr-faq {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  min-width: 1px;
}
.pr-faq__item {
  --faq-ease: cubic-bezier(0.23, 1, 0.32, 1);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--alpha-100);
  cursor: pointer;
}
.pr-faq__header {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  width: 100%;
}
.pr-faq__q {
  flex: 1 0 0;
  min-width: 1px;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
}
.pr-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  overflow: hidden;
}
.pr-faq__icon img { position: absolute; }
.pr-faq__plus { left: 3.166px; top: 3.166px; }
.pr-faq__minus { left: 3.166px; top: 9px; display: none; }
.pr-faq__item.is-open .pr-faq__plus { display: none; }
.pr-faq__item.is-open .pr-faq__minus { display: block; }
.pr-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 200ms var(--faq-ease), opacity 200ms var(--faq-ease);
}
.pr-faq__item.is-open .pr-faq__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-duration: 250ms;
}
.pr-faq__inner { overflow: hidden; min-height: 0; }
.pr-faq__a {
  width: 640px;
  padding-top: var(--sp-3);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 24px;
}

/* ---------- 05 Final CTA (8206:13448) ---------- */
.pr-final { padding-bottom: var(--sp-10); }
.pr-final__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-9) 0;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
}
.pr-final__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1200px;
  padding-left: 40px;
  overflow: hidden;
  background: var(--bg-raised);
  border-radius: var(--r-xl);
}
.pr-final__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.pr-final__copy {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  min-width: 1px;
}
.pr-final__title { width: 562px; }
.pr-final__ctas {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.pr-final__visual {
  position: relative;
  flex-shrink: 0;
  width: 556px;
  height: 513px;
}
.pr-final__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.pr-final__photo img {
  position: absolute;
  left: -6.21%;
  top: -63.93%;
  width: 106.29%;
  height: 172.77%;
  max-width: none;
}
.pr-final__float {
  position: absolute;
  display: flex;
  padding: 8px;
  overflow: hidden;
  background: rgba(19, 19, 21, 0.6);
  border: 0.958px solid #131315;
  border-radius: 9.526px;
}
.pr-final__float--vpn { left: 214px; top: 347px; }
.pr-final__float--vault { left: 254px; top: 427px; }
.pr-final__float-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 261.704px;
  padding: 0 9.526px;
  background: var(--bg-base);
  border-radius: 7.145px;
  filter: drop-shadow(0 4px 4.4px rgba(47, 47, 47, 0.4));
}
.pr-final__float--vault .pr-final__float-inner { padding: 4.763px 9.526px; }
.pr-final__float-row {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: space-between;
  min-width: 1px;
}
.pr-final__float--vpn .pr-final__float-row { padding: 7.667px 0; }
.pr-final__float-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
}
.pr-final__float-text--gap { gap: 2px; }
.pr-final__float-title {
  color: var(--neutral-200);
  font-size: 11.908px;
  font-weight: 500;
  line-height: 19.168px;
  letter-spacing: -0.1533px;
}
.pr-final__float-sub {
  color: var(--text-tertiary);
  font-size: 10.717px;
  line-height: 15.335px;
  letter-spacing: -0.115px;
}
.pr-final__float-icon {
  display: flex;
  align-items: center;
  padding: 6px;
  background: var(--accent-tint);
  border-radius: 4px;
}

/* toggol (333:9826 Default / 333:9828 Variant2) — click swaps variants with a 300ms dissolve */
.pr-toggol {
  position: relative;
  display: grid;
  flex-shrink: 0;
  width: 46px;
  height: 24px;
}
.pr-toggol__face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2px;
  border-radius: 44px;
  transition: opacity 300ms ease-out;
}
.pr-toggol__face--off { align-items: flex-start; background: var(--text-tertiary); }
.pr-toggol__face--on { align-items: flex-end; background: var(--blue-400); opacity: 0; }
.pr-toggol.is-on .pr-toggol__face--on { opacity: 1; }
.pr-toggol.is-on .pr-toggol__face--off { opacity: 0; }
.pr-toggol__knob {
  width: 28px;
  height: 20px;
  background: #fcfcfc;
  border-radius: 22px;
}

/* Ecosystem reference (8206:13450) */
.pr-eco {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.pr-eco__step {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--sp-3);
}
.pr-eco__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  white-space: nowrap;
}
.pr-eco__label {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
}
.pr-eco__product {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.pr-eco__product.is-muted { color: var(--text-secondary); }
.pr-eco__connector {
  position: relative;
  flex: 1 0 0;
  min-width: 1px;
  height: 0;
}
.pr-eco__connector img {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
}

/* ==========================================================================
   Responsive (below the 1440 Figma frame). Desktop rules above are untouched.
   ========================================================================== */
@media (max-width: 1279px) {
  .pr-intro__support { width: 100%; max-width: 620px; }
  .pr-head-row__title { width: auto; }
  .pr-head-row__support { width: 100%; max-width: 408px; }

  /* Compare table: four equal fluid columns instead of 4 × 282px */
  .pr-table__label,
  .pr-table__plan,
  .pr-table__value,
  .pr-table__action { flex: 1 1 0; width: auto; min-width: 0; }
  .pr-table__band {
    left: calc((100% - 72px) / 2 + 36px);
    width: calc((100% - 72px) / 4 + 24px);
  }
  .pr-table__chip { left: calc((100% - 72px) / 8 * 5 + 48px - 40px); }
  .pr-table--two .pr-table__band {
    left: calc((100% - 48px) / 3 * 2 + 36px);
    width: calc((100% - 48px) / 3 + 24px);
  }
  .pr-table--two .pr-table__chip { left: calc((100% - 48px) / 6 * 5 + 8px); }
  .pr-every__label { width: calc((100% - 72px) / 4); }

  .pr-final__card { width: calc(100% - 2 * var(--page-padding)); max-width: 1200px; }
  .pr-final__title { width: 100%; max-width: 562px; }
  .pr-final__copy { padding-right: var(--sp-6); }
}

@media (max-width: 1023px) {
  .pr-plans .wrap { padding-bottom: var(--sp-9); }
  .pr-cards { flex-direction: column; align-items: stretch; max-width: 480px; margin: 0 auto; }
  .pr-card { flex: none; width: 100%; }
  .pr-note { white-space: normal; }

  .pr-other { flex-direction: column; gap: var(--sp-5); }
  .pr-other__label { width: 100%; }
  .pr-other__list { width: 100%; flex: none; }

  .pr-features .wrap,
  .pr-compare .wrap,
  .pr-questions .wrap { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
  .pr-features .wrap,
  .pr-compare .wrap { gap: var(--sp-7); }
  .pr-head-row { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  .pr-head-row__support { max-width: 620px; }

  /* Features panel: each product's header followed by its six features, two per row */
  .pr-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-panel__headers,
  .pr-panel__row { display: contents; }
  .pr-panel__header { grid-column: 1 / -1; background: var(--bg-raised); }
  .pr-panel__header--split { order: 2; border-left: 0; border-top: 1px solid var(--border-strong); }
  .pr-panel__cell { order: 1; border-top: 1px solid var(--border-subtle); }
  .pr-panel__cell:nth-child(3),
  .pr-panel__cell:nth-child(4) { order: 3; }
  .pr-panel__cell:nth-child(odd) { border-left: 0; }
  .pr-panel__cell:nth-child(even) { border-left: 1px solid var(--border-subtle); }
  .pr-panel__cell.pr-panel__cell--split { border-left: 0; }

  .pr-table__row { white-space: normal; }
  .pr-table__plan { white-space: normal; text-align: center; }
  .pr-table__text { text-align: center; }
  .pr-table__label-sub { white-space: nowrap; }
  .pr-every { flex-wrap: wrap; row-gap: var(--sp-3); }
  .pr-every__label { width: 100%; }
  .pr-every__items { flex: 1 1 100%; flex-wrap: wrap; row-gap: var(--sp-2); }

  .pr-questions .wrap { flex-direction: column; gap: var(--sp-7); }
  .pr-questions__heading { width: 100%; }
  .pr-faq { width: 100%; flex: none; }
  .pr-faq__a { width: 100%; max-width: 640px; }

  .pr-final { padding-bottom: var(--sp-9); }
  .pr-final__band { padding: var(--sp-8) 0; }
  .pr-final__card { flex-direction: column; align-items: stretch; padding-left: 0; }
  .pr-final__copy { padding: 40px 40px var(--sp-7); }
  .pr-final__visual { width: 100%; height: auto; aspect-ratio: 556 / 513; }
  .pr-final__float--vpn { left: auto; right: 11.22%; top: 67.64%; transform-origin: right top; }
  .pr-final__float--vault { left: auto; right: 4.03%; top: 83.24%; transform-origin: right top; }
}

@media (max-width: 767px) {
  .pr-plans .wrap,
  .pr-features .wrap,
  .pr-compare .wrap,
  .pr-questions .wrap { padding-bottom: var(--sp-8); }
  .pr-features .wrap,
  .pr-compare .wrap,
  .pr-questions .wrap { padding-top: var(--sp-8); }
  .pr-card,
  .pr-card.pr-card--recommended { padding: var(--sp-5); }
  .pr-card__amount { font-size: 44px; line-height: 48px; }
  .pr-card__head { flex-wrap: wrap; gap: var(--sp-2); white-space: normal; }
  .pr-card__includes { flex-wrap: wrap; }
  .pr-card__includes p { white-space: normal; }
  .pr-card__guarantee { white-space: normal; }

  .pr-other__row { flex-wrap: wrap; row-gap: var(--sp-3); }
  .pr-other__plan { flex: 1 1 100%; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .pr-other__marks { width: auto; }
  .pr-other__name { flex: none; width: 100%; white-space: normal; }
  .pr-other__price { margin-right: auto; }

  .pr-panel { grid-template-columns: minmax(0, 1fr); }
  .pr-panel__cell:nth-child(even) { border-left: 0; }
  .pr-panel__header,
  .pr-panel__cell { padding: var(--sp-5); }
  .pr-panel__name { white-space: normal; }

  /* Compare table on phones: each row label sits on its own line above
     three equal plan columns, so all plans stay in view */
  .pr-table { gap: var(--sp-6); }
  .pr-table__header,
  .pr-table__row,
  .pr-table__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
  }
  .pr-table__header > .pr-table__label,
  .pr-table__label--action { display: none; }
  .pr-table__row > .pr-table__label { grid-column: 1 / -1; width: 100%; }
  .pr-table__row--yearly { padding: var(--sp-3) 0; }
  .pr-table__band {
    left: calc((100% - 16px) / 3 + 4px);
    width: calc((100% - 16px) / 3 + 8px);
  }
  .pr-table__chip { left: calc(50% - 40px); }
  .pr-table--two .pr-table__header,
  .pr-table--two .pr-table__row,
  .pr-table--two .pr-table__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-table--two .pr-table__band {
    left: calc((100% - 8px) / 2 + 4px);
    width: calc((100% - 8px) / 2 + 4px);
  }
  .pr-table--two .pr-table__chip { left: calc((100% - 8px) / 4 * 3 - 32px); }
  .pr-table__plan { padding: 0 var(--sp-1); }
  .pr-table__plan .t-h4 { font-size: 15px; line-height: 20px; }
  .pr-table__price { flex-wrap: wrap; justify-content: center; column-gap: 2px; }
  .pr-table__amount-l { font-size: 28px; line-height: 34px; letter-spacing: -0.5px; }
  .pr-table__amount-s { font-size: 16px; line-height: 22px; }
  .pr-table__per { font-size: 12px; line-height: 18px; }
  .pr-table__save { text-align: center; }
  .pr-table__value { padding: 0 var(--sp-1); }
  .pr-table__text { font-size: 14px; line-height: 20px; }
  .pr-table__action { padding: 0 var(--sp-1); }
  .pr-table__action .btn { padding-left: var(--sp-2); padding-right: var(--sp-2); white-space: normal; text-align: center; }

  .pr-every__items { flex-direction: column; align-items: flex-start; }
  .pr-every__item { white-space: normal; align-items: flex-start; }

  .pr-faq__q { font-size: 18px; }

  .pr-final { padding-bottom: var(--sp-8); }
  .pr-final__band { padding: var(--sp-7) 0; }
  .pr-final__copy { padding: var(--sp-6) var(--sp-5) var(--sp-6); }
  .pr-final__ctas { flex-wrap: wrap; }
  .pr-final__float { transform: scale(0.6); }

  .pr-eco { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .pr-eco__connector { flex: none; width: 32px; height: 24px; }
  .pr-eco__connector img { left: 4px; top: 11.5px; width: 24px; transform: rotate(90deg); }
  .pr-eco__product { flex-wrap: wrap; }
}