/* ============================================================
   Pricing - page-only layout. Figma frame 6157:1962
   (Ezee-VPN-Website, "Final Website UI").
   ============================================================ */

/* Figma variables Success/success-100 and Success/success-700 are not in
   ezee.css yet - scoped here for the "Save up to 63%" badge. */
:root{
  --success-100:#b6e9d1;
  --success-700:#0d824b;
}

/* ---------- 01 Hero (6158:2217) ---------- */
.pr-hero{padding-block:var(--space-9);background:var(--surface)}
.pr-hero__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.pr-hero__copy{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start;flex:0 1 588px;min-width:0}
.pr-hero__lead{color:var(--gray-600)}
/* 16px icon box; the tag glyph is mirrored vertically in Figma (rotate 180 + flip X) */
.pr-hero__chip-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none}
.pr-hero .eyebrow .pr-hero__chip-icon img{width:auto;height:auto;transform:scaleY(-1)}

.pr-guarantee{
  align-self:stretch;flex:none;width:420px;
  display:flex;flex-direction:column;justify-content:center;gap:var(--space-4);
  padding:var(--space-4);
  background:var(--primary-50);
  border:1px solid #b5d9d1; /* raw value in Figma (equals primary-100) */
  border-radius:var(--radius-md);
}
.pr-guarantee__head{display:flex;align-items:center;gap:14px} /* 14px gap is a raw Figma value */
.pr-guarantee__tile{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;background:var(--primary-50);border:1px solid var(--primary-100);border-radius:var(--radius-md)}
.pr-guarantee__tile img{width:auto;height:auto}
.pr-guarantee__body{color:var(--primary-800)}

/* ---------- 02 Plans (6152:41146) ---------- */
.pr-plans{padding:var(--space-6) 0 calc(var(--space-9) + var(--space-6));background:var(--surface)}
.pr-plans__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}

/* Billing switch (6158:2221) */
.pr-switch{display:inline-flex;gap:var(--space-1);padding:var(--space-1);background:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--radius-pill)}
.pr-switch__opt{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:10px var(--space-5);border-radius:var(--radius-pill);
  font-size:14px;line-height:20px;font-weight:700;color:var(--gray-600);
  transition:background-color .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease);
}
.pr-switch__opt[aria-pressed="true"]{background:var(--white);color:var(--gray-900);box-shadow:var(--shadow-card)}
.pr-switch__opt:focus-visible{outline-offset:2px;border-radius:var(--radius-pill)}
.pr-switch__save{padding:2px var(--space-2);border-radius:var(--radius-pill);background:var(--success-100);color:var(--success-700);font-size:12px;line-height:16px;font-weight:400}

/* Web/Pricing Card (6091:1075) */
.pr-cards{display:flex;align-items:flex-start;gap:var(--space-5);width:100%}
.plan{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);
  padding:var(--space-6);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);
}
.plan--featured{
  background:var(--brand-subtle);border:2px solid var(--brand);
  box-shadow:0 12px 16px rgba(18,33,28,.1); /* raw drop shadow in Figma */
}
.plan__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%}
.plan--featured .plan__head{align-items:stretch;justify-content:flex-start}
.plan__badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-1) var(--space-4);border-radius:var(--radius-pill);background:var(--brand);color:var(--text-on-brand);font-size:12px;line-height:16px;white-space:nowrap}
.plan__price{display:flex;align-items:baseline;gap:var(--space-1);white-space:nowrap}
.plan__price .t-num-lg{color:var(--text-primary)}
.plan__price .t-sm,.plan__note{color:var(--text-secondary)}
.plan__note{width:100%}
.plan__divider{width:100%;height:1px;margin:0;border:0;background:var(--border)}
.plan__list{display:flex;flex-direction:column;gap:var(--space-3);width:100%}
.plan__list li{display:flex;align-items:flex-start;gap:var(--space-2);font-size:14px;line-height:20px;color:var(--text-primary)}
.plan__check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px}
.plan__check img{width:auto;height:auto}

/* ---------- 03 What sits behind each price (6161:2309) ---------- */
.pr-compare-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.pr-compare-head .label-eyebrow{color:var(--primary-700)}

.cmp{position:relative;margin-top:var(--space-7)}
/* "Recommended column" - white card behind the VPN + Vault column, 6px offset edge */
.cmp__highlight{
  position:absolute;top:0;left:60%;width:20%;height:calc(100% + 6px);
  background:var(--white);
  border:1px solid var(--primary-500);border-right-width:6px;border-bottom-width:6px;
  border-radius:var(--radius-md);
}
.cmp__table{position:relative;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}
.cmp__col-feature{width:40%}
.cmp__table th,.cmp__table td{padding:0;font-weight:400;text-align:center;vertical-align:middle}
.cmp__table thead th,.cmp__table thead td{height:116px;padding:var(--space-2)}
.cmp__table thead th{font-family:var(--font-head);font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.16px;color:var(--gray-900)}
.cmp__group th{padding:var(--space-6) 0 var(--space-3);text-align:left;font-family:var(--font-head);font-weight:600;font-size:18px;line-height:28px;letter-spacing:-.18px;color:var(--gray-900)}
.cmp__table tbody tr:not(.cmp__group) > *{padding:var(--space-4) var(--space-2);border-top:1px solid var(--gray-100)}
.cmp__table tbody tr:not(.cmp__group) > th{padding-left:0;text-align:left}
.cmp__table tbody:last-child tr:last-child > *{border-bottom:1px solid var(--gray-100)}
.cmp__table td img{margin-inline:auto;width:auto;height:auto}
.cmp__name{display:block;font-size:14px;line-height:20px;color:var(--gray-900)}
.cmp__desc{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--gray-500)}

/* ---------- 04 Billing facts (6162:2357) ---------- */
.pr-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.pr-fact{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);min-width:0}
.pr-fact__tile{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--gray-50);border-radius:var(--radius-lg)}
.pr-fact__tile img{width:auto;height:auto}
.pr-fact p{color:var(--text-secondary)}

/* ---------- 05 FAQ (6162:2391) ---------- */
.pr-faq__intro{color:var(--gray-600)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .pr-hero__row{flex-direction:column;align-items:flex-start}
  .pr-hero__copy{flex:none;width:100%;max-width:588px}
  .pr-guarantee{align-self:flex-start;width:min(420px,100%)}
  .pr-facts{gap:var(--space-6)}
}
@media (max-width:900px){
  .pr-cards{flex-direction:column;align-items:stretch;max-width:480px;margin-inline:auto}
  .plan{flex:none}
}
@media (max-width:640px){
  .pr-plans{padding-bottom:var(--space-8)}
  .pr-switch__opt{min-height:44px}
  .pr-facts{grid-template-columns:1fr;gap:var(--space-6)}
  .cmp__col-feature{width:37%}
  .cmp__highlight{left:58%;width:21%}
  .cmp__table thead th,.cmp__table thead td{height:auto;padding:var(--space-4) 4px}
  .cmp__table thead th{font-size:14px;line-height:20px}
  .cmp__table tbody tr:not(.cmp__group) > *{padding:var(--space-3) 4px}
  .cmp__table tbody tr:not(.cmp__group) > th{padding-right:var(--space-2)}
}