/*
Theme Name: Protivoves VPN
Description: Custom foundation for the Protivoves VPN website, payments and client account.
Version: 1.2.1
Text Domain: protivoves
*/
:root {
  --ink: #0b0b12;
  --ink-soft: #10101b;
  --panel: #141421;
  --panel-hi: #1c1b2b;
  --line: rgba(255, 255, 255, 0.105);
  --line-hi: rgba(139, 124, 255, 0.35);
  --text: #f5f1e8;
  --muted: #a9a4b3;
  --accent: #8b7cff;
  --accent-2: #9b8cff;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.46);
  --radius: 22px;
  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--ink);
  color: var(--text);
  font:
    500 16px/1.65 Inter,
    Manrope,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(
      ellipse 70% 45% at 75% -5%,
      rgba(155, 140, 255, 0.16),
      transparent 66%
    ),
    radial-gradient(
      ellipse 55% 40% at 5% 20%,
      rgba(139, 124, 255, 0.08),
      transparent 68%
    ),
    linear-gradient(180deg, #10101b 0%, #0b0b12 65%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.17;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 76%);
}
::selection {
  background: var(--accent);
  color: #17100a;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
}
.site-shell {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(7, 9, 13, 0.78);
  backdrop-filter: blur(22px) saturate(140%);
}
.header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -0.025em;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(139, 124, 255, 0.55);
  border-radius: 12px;
  background: linear-gradient(
    145deg,
    rgba(139, 124, 255, 0.2),
    rgba(155, 140, 255, 0.08)
  );
  color: var(--accent);
  box-shadow: inset 0 0 24px rgba(139, 124, 255, 0.08);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b8c0bd;
  font-size: 14px;
}
.site-nav > a:not(.button) {
  padding: 10px 12px;
  border-radius: 10px;
  transition: 0.2s ease;
}
.site-nav > a:not(.button):hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  font: inherit;
  font-weight: 820;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform 0.28s var(--ease),
    border-color 0.28s,
    background 0.28s,
    box-shadow 0.28s;
}
.button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.09);
}
.button--primary {
  border-color: rgba(139, 124, 255, 0.82);
  background: rgba(139, 124, 255, 0.075);
  color: #e1ddff;
  box-shadow:
    inset 0 0 0 1px rgba(139, 124, 255, 0.04),
    0 10px 28px rgba(5, 4, 16, 0.2);
}
.button--primary:hover {
  border-color: #aaa0ff;
  background: rgba(139, 124, 255, 0.16);
  color: #fff;
  box-shadow: 0 14px 34px rgba(92, 77, 220, 0.16);
}
.button--ghost {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(20, 20, 33, 0.48);
}
.button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.tariff-checkout-form {
  margin: 0;
}
.tariff-checkout-form .button {
  width: 100%;
}
.vpn-app-actions .tariff-checkout-form {
  display: flex;
  flex: 1;
}
.hero {
  padding: 118px 0 92px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(350px, 0.85fr);
  align-items: center;
  gap: 80px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid rgba(139, 124, 255, 0.25);
  border-radius: 999px;
  background: rgba(139, 124, 255, 0.055);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.hero h1,
.section-heading h1,
.section-heading h2 {
  margin: 20px 0 18px;
  font-weight: 780;
  line-height: 0.98;
  letter-spacing: -0.065em;
}
.hero h1 {
  max-width: 760px;
  font-size: clamp(48px, 6.4vw, 82px);
}
.hero p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.visual-card,
.card {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(
    145deg,
    rgba(20, 27, 37, 0.94),
    rgba(11, 15, 21, 0.94)
  );
  box-shadow: var(--shadow);
}
.visual-card {
  padding: 25px;
  border-radius: 26px;
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
  isolation: isolate;
}
.visual-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(139, 124, 255, 0.35),
    transparent 35%,
    rgba(155, 140, 255, 0.18)
  );
  filter: blur(12px);
  opacity: 0.6;
}
.visual-card::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -80px;
  top: -100px;
  border: 1px solid rgba(139, 124, 255, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 38px rgba(139, 124, 255, 0.025),
    0 0 0 76px rgba(139, 124, 255, 0.018);
}
.visual-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d7d2ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 0 5px rgba(139, 124, 255, 0.1),
    0 0 16px var(--accent);
}
.server-list {
  position: relative;
  display: grid;
  gap: 10px;
}
.server {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  transition: 0.25s ease;
}
.server:hover {
  border-color: rgba(139, 124, 255, 0.22);
  background: rgba(139, 124, 255, 0.055);
  transform: translateX(3px);
}
.section {
  padding: 88px 0;
}
.section-heading {
  max-width: 760px;
  margin-bottom: 38px;
}
.section-heading h1,
.section-heading h2 {
  font-size: clamp(38px, 5vw, 58px);
}
.section-heading p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}
.feature-grid,
.pricing-grid,
.account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.card {
  padding: 28px;
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform 0.35s var(--ease),
    border-color 0.35s,
    background 0.35s;
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.19);
  background: linear-gradient(
    145deg,
    rgba(25, 33, 45, 0.98),
    rgba(13, 18, 25, 0.98)
  );
}
.card h2,
.card h3 {
  margin: 10px 0 8px;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.card h3 {
  font-size: 21px;
}
.card p {
  margin: 0;
  color: var(--muted);
}
.icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(139, 124, 255, 0.18);
  border-radius: 13px;
  background: rgba(139, 124, 255, 0.07);
  color: var(--accent);
  font-weight: 850;
}
.tariff-section {
  padding-top: 105px;
}
.pricing-grid {
  align-items: stretch;
  padding-top: 14px;
}
.card--pricing {
  display: flex;
  min-height: 430px;
  flex-direction: column;
  padding: 30px;
}
.card--pricing h2 {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card--pricing.card--featured {
  border-color: rgba(139, 124, 255, 0.48);
  background: linear-gradient(
    155deg,
    rgba(48, 38, 61, 0.92),
    rgba(14, 13, 24, 0.98) 60%
  );
  transform: translateY(-10px);
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(139, 124, 255, 0.08);
}
.card--pricing.card--featured:hover {
  transform: translateY(-15px);
}
.plan-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 6px 9px;
  border: 1px solid rgba(139, 124, 255, 0.28);
  border-radius: 999px;
  background: rgba(139, 124, 255, 0.09);
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.price {
  margin: 24px 0 2px;
  color: #dce4e1;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.price span {
  color: #fff;
  font-size: 52px;
  font-weight: 790;
  letter-spacing: -0.065em;
}
.price-note {
  color: var(--muted);
  font-size: 13px;
}
.plan-list {
  display: grid;
  gap: 12px;
  padding: 22px 0 0;
  margin: 22px 0 28px;
  border-top: 1px solid var(--line);
  list-style: none;
  color: #cbd2d0;
}
.plan-list li {
  display: flex;
  align-items: center;
}
.plan-list li::before {
  content: "";
  width: 17px;
  height: 17px;
  margin-right: 10px;
  border: 1px solid rgba(139, 124, 255, 0.35);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0 3px, transparent 4px);
}
.card--pricing .button {
  width: 100%;
  margin-top: auto;
}
.account-wrap {
  padding: 72px 0 100px;
}
.account-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 28px;
}
.account-head h1 {
  margin: 0;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -0.055em;
}
.account-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.account-value {
  margin-top: 5px;
  font-size: 20px;
  font-weight: 760;
}
.empty-state {
  grid-column: 1/-1;
  padding: 48px;
  text-align: center;
}
.content-page {
  padding: 68px 0 100px;
}
.content-page h1 {
  font-size: clamp(40px, 5vw, 60px);
  letter-spacing: -0.055em;
}
.entry-content {
  max-width: 820px;
  color: #cbd2d0;
}
.notice-box {
  padding: 17px 18px;
  border: 1px solid rgba(139, 124, 255, 0.22);
  border-radius: 14px;
  background: rgba(139, 124, 255, 0.06);
  color: #d8ebe4;
}
.notice-box--success {
  border-color: rgba(85, 214, 162, 0.3);
  background: rgba(85, 214, 162, 0.08);
}
.notice-box--error {
  border-color: rgba(255, 131, 150, 0.34);
  background: rgba(255, 131, 150, 0.08);
  color: #ffd7dd;
}
.telegram-login-card {
  max-width: 680px;
  margin: auto;
}
.telegram-login-button {
  display: flex;
  justify-content: center;
  min-height: 52px;
  margin: 26px 0 14px;
}
.button--telegram {
  min-width: 238px;
  border-color: #249bd7;
  background: #249bd7;
}
.telegram-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}
.account-devices {
  margin-top: 40px;
}
.device-list {
  display: grid;
  gap: 12px;
}
.device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.device-row p {
  margin: 3px 0 0;
}
.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.footer-inner {
  min-height: 112px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.footer-links a {
  transition: 0.2s;
}
.footer-links a:hover {
  color: var(--accent);
}
.button--support {
  border-color: rgba(139, 124, 255, 0.5);
  background: linear-gradient(135deg, var(--accent), #63b3ff);
  color: #17100a;
  box-shadow: 0 12px 32px rgba(139, 124, 255, 0.15);
}
.mobile-toggle {
  display: none;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-grid > * {
  animation: rise 0.75s var(--ease) both;
}
.hero-grid > *:nth-child(2) {
  animation-delay: 0.12s;
}
.feature-grid .card,
.pricing-grid .card {
  animation: rise 0.65s var(--ease) both;
}
.feature-grid .card:nth-child(2),
.pricing-grid .card:nth-child(2) {
  animation-delay: 0.08s;
}
.feature-grid .card:nth-child(3),
.pricing-grid .card:nth-child(3) {
  animation-delay: 0.16s;
}
@media (max-width: 900px) {
  .hero {
    padding-top: 76px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }
  .visual-card {
    max-width: 620px;
    transform: none;
  }
  .feature-grid,
  .pricing-grid,
  .account-grid {
    grid-template-columns: 1fr 1fr;
  }
  .card--pricing.card--featured {
    transform: none;
  }
  .card--pricing.card--featured:hover {
    transform: translateY(-5px);
  }
  .mobile-toggle {
    display: inline-flex;
  }
  .site-nav {
    display: none;
    position: absolute;
    left: 24px;
    right: 24px;
    top: 66px;
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #141421;
    box-shadow: var(--shadow);
  }
  .site-nav.is-open {
    display: flex;
  }
  .site-nav .button {
    width: 100%;
  }
}
@media (max-width: 620px) {
  .site-shell {
    width: min(100% - 28px, 1180px);
  }
  .header-inner {
    min-height: 66px;
  }
  .hero {
    padding: 58px 0 48px;
  }
  .hero h1 {
    font-size: clamp(43px, 13vw, 58px);
  }
  .hero p {
    font-size: 17px;
  }
  .hero-actions {
    display: grid;
  }
  .button {
    width: 100%;
    min-height: 50px;
  }
  .section {
    padding: 60px 0;
  }
  .tariff-section {
    padding-top: 66px;
  }
  .section-heading {
    margin-bottom: 28px;
  }
  .section-heading h1,
  .section-heading h2 {
    font-size: 40px;
  }
  .feature-grid,
  .pricing-grid,
  .account-grid {
    grid-template-columns: 1fr;
  }
  .card,
  .card--pricing {
    padding: 22px;
  }
  .card--pricing {
    min-height: 390px;
  }
  .plan-badge {
    position: static;
    width: max-content;
    margin-bottom: 16px;
  }
  .account-head,
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }
  .footer-inner {
    padding: 28px 0;
  }
  .footer-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .empty-state {
    padding: 30px 18px;
  }
  .telegram-login-card {
    padding: 28px 18px;
  }
  .device-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}
.step-list {
  display: grid;
  gap: 15px;
  padding: 22px 0 0;
  margin: 22px 0 30px;
  border-top: 1px solid var(--line);
  list-style: none;
  counter-reset: steps;
}
.step-list li {
  position: relative;
  padding-left: 36px;
  color: #ddd8e2;
  font-weight: 600;
}
.step-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 8px;
  background: rgba(155, 140, 255, 0.14);
  color: #c9c1ff;
  font-size: 11px;
  font-weight: 900;
  counter-increment: steps;
  content: counter(steps);
}
.notice-box--help {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}
.notice-box--help span {
  margin-right: auto;
  color: var(--muted);
}
.notice-box--help .button {
  width: auto;
  flex: 0 0 auto;
}
.site-nav {
  font-weight: 650;
}
.card p,
.section-heading p,
.hero p {
  color: #b9b4c2;
}
.price-note,
.account-label {
  color: #b9b4c2;
}
@media (max-width: 900px) {
  .notice-box--help {
    align-items: flex-start;
    flex-direction: column;
  }
  .notice-box--help .button {
    width: 100%;
  }
}
.button--telegram {
  border-color: rgba(77, 163, 255, 0.75);
  background: rgba(77, 163, 255, 0.09);
  color: #dcebff;
}
.button--telegram:hover {
  border-color: #71b5ff;
  background: rgba(77, 163, 255, 0.17);
}
.button--support {
  position: relative;
  overflow: visible;
  border-color: rgba(77, 163, 255, 0.82);
  background: rgba(77, 163, 255, 0.07);
  color: #dcebff;
  box-shadow: none;
  animation: support-pulse 3.2s ease-in-out infinite;
}
.button--support:hover {
  border-color: #79b9ff;
  background: rgba(77, 163, 255, 0.16);
  color: #fff;
  animation-play-state: paused;
}
.button--support::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(77, 163, 255, 0.55);
  border-radius: inherit;
  pointer-events: none;
  animation: support-ring 3.2s ease-out infinite;
}
@keyframes support-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(77, 163, 255, 0);
  }
  50% {
    box-shadow: 0 0 24px rgba(77, 163, 255, 0.16);
  }
}
@keyframes support-ring {
  0%,
  35% {
    opacity: 0;
    transform: scale(1);
  }
  55% {
    opacity: 0.45;
  }
  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}
.account-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
@media (max-width: 620px) {
  .account-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }
  .account-actions .button {
    width: 100%;
  }
}
.account-payments {
  margin-top: 40px;
}
.payment-list {
  display: grid;
  gap: 12px;
}
.payment-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.payment-row p {
  margin: 4px 0 0;
}
.payment-meta {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 5px;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .payment-row {
    flex-direction: column;
    gap: 14px;
  }
  .payment-meta {
    align-items: flex-start;
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
.mobile-app-nav {
  display: none;
}
@media (max-width: 900px) {
  body:not(:has(.vpn-app)) {
    padding-bottom: 92px;
  }
  body:not(:has(.vpn-app)) .mobile-toggle,
  body:not(:has(.vpn-app)) .site-nav {
    display: none !important;
  }
  body:not(:has(.vpn-app)) .mobile-app-nav {
    position: fixed;
    z-index: 60;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 8px max(12px, env(safe-area-inset-left))
      calc(8px + env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-right));
    border-top: 1px solid #ffffff16;
    background: #0d101bf2;
    box-shadow: 0 -14px 38px #0005;
    backdrop-filter: blur(22px) saturate(145%);
  }
  .mobile-app-nav-item {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 5px 3px;
    border-radius: 11px;
    color: #9e9baa;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transition:
      color 0.2s,
      background 0.2s;
  }
  .mobile-app-nav-item span:first-child {
    display: grid;
    place-items: center;
    width: 27px;
    height: 25px;
    border-radius: 9px;
    color: inherit;
    font-size: 17px;
    line-height: 1;
  }
  .mobile-app-nav-item.is-active {
    background: #8b7cff20;
    color: #ddd8ff;
  }
  .mobile-app-nav-item.is-active span:first-child {
    background: #8b7cff2b;
    color: #c9c1ff;
  }
  .mobile-app-nav-item:active,
  .mobile-app-nav-item:focus-visible {
    background: #8b7cff20;
    color: #ddd8ff;
  }
}
.account-identity {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 28px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  background: linear-gradient(
    135deg,
    rgba(27, 29, 49, 0.93),
    rgba(16, 19, 31, 0.93)
  );
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
}
.account-identity-mark {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid #229ed966;
  border-radius: 13px;
  background: #229ed922;
  color: #82d5ff;
  font-size: 20px;
}
.account-identity-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-identity-copy {
  min-width: 0;
  flex: 1;
}
.account-identity-label {
  display: block;
  margin-bottom: 3px;
  color: #a9a5b6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.account-identity-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.account-identity-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: #55d6a222;
  color: #8ff0c1;
  font-size: 11px;
  font-weight: 700;
}
.account-identity-status::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #74e7af;
  content: "";
}
@media (max-width: 620px) {
  .account-identity {
    align-items: flex-start;
    padding: 13px;
  }
  .account-identity-status {
    padding: 6px 8px;
    font-size: 10px;
  }
}
.site-support-section {
  padding-top: 68px;
}
.site-support-chat-card {
  max-width: 820px;
  margin: 0 auto;
}
.site-support-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.site-support-chat-head > div {
  display: flex;
  flex-direction: column;
}
.site-support-chat-head strong {
  font-size: 17px;
}
.site-support-chat-head span {
  color: var(--muted);
  font-size: 13px;
}
.site-support-chat-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(139, 124, 255, 0.35);
  border-radius: 13px;
  background: rgba(139, 124, 255, 0.12);
  color: var(--accent);
  font-weight: 850;
}
.site-support-chat-messages {
  display: grid;
  gap: 9px;
  min-height: 170px;
  max-height: 440px;
  overflow: auto;
  padding: 18px 0;
}
.site-support-chat-bubble {
  width: fit-content;
  max-width: min(80%, 620px);
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px 14px 14px 4px;
  background: rgba(255, 255, 255, 0.055);
  color: #ddd8e2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.site-support-chat-sent {
  justify-self: end;
  border-color: rgba(139, 124, 255, 0.22);
  border-radius: 14px 14px 4px 14px;
  background: rgba(139, 124, 255, 0.14);
}
.site-support-chat-form {
  display: grid;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.site-support-chat-form label {
  color: #ddd8e2;
  font-weight: 700;
}
.site-support-chat-form textarea {
  width: 100%;
  min-height: 126px;
  resize: vertical;
}
.site-support-chat-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.site-support-chat-actions .button {
  width: auto;
}
@media (max-width: 620px) {
  .site-support-section {
    padding-top: 50px;
  }
  .site-support-chat-card {
    padding: 18px;
  }
  .site-support-chat-messages {
    min-height: 150px;
  }
  .site-support-chat-bubble {
    max-width: 92%;
  }
  .site-support-chat-actions .button {
    width: 100%;
  }
}

/* Support chat controls use the same dark surface on the site and in the app. */
.site-support-chat-form textarea,
.vpn-app-support-field textarea,
.support-form input:not([type="hidden"]),
.support-form textarea {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  box-sizing: border-box;
  background: #10131f !important;
  color: #f5f1e8 !important;
  -webkit-text-fill-color: #f5f1e8;
  border-color: #ffffff18 !important;
  caret-color: #fff;
}
.form {
  display: grid;
  gap: 16px;
}
.form--support {
  gap: 18px;
}
.form-field {
  display: grid;
  gap: 7px;
  color: #cbd2d0;
  font-size: 13px;
  font-weight: 650;
}
.form-field input,
.form-field textarea {
  margin-top: 0;
}
.vpn-app-login-brand-centered {
  justify-content: center;
}
.vpn-app-card--spaced {
  margin-top: 10px;
}
.vpn-app-item--subscription {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.vpn-app-subscription-url {
  display: block;
  margin-top: 8px;
  color: #d9d5df;
  white-space: normal;
  overflow-wrap: anywhere;
}
.site-support-chat-form textarea:focus,
.vpn-app-support-field textarea:focus,
.support-form input:not([type="hidden"]):focus,
.support-form textarea:focus {
  background: #15192b !important;
  border-color: #8b7cff99 !important;
  outline: 2px solid transparent;
}
.site-support-chat-form textarea::placeholder,
.vpn-app-support-field textarea::placeholder,
.support-form input::placeholder,
.support-form textarea::placeholder {
  color: #8f8a9d;
  opacity: 1;
}
.site-support-chat-messages,
#vpn-chat-messages {
  max-height: 440px;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #6759bd #10131f;
}
.site-support-chat-messages::-webkit-scrollbar,
#vpn-chat-messages::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.site-support-chat-messages::-webkit-scrollbar-track,
#vpn-chat-messages::-webkit-scrollbar-track {
  background: #10131f;
  border-radius: 999px;
}
.site-support-chat-messages::-webkit-scrollbar-thumb,
#vpn-chat-messages::-webkit-scrollbar-thumb {
  background: #6759bd;
  border: 2px solid #10131f;
  border-radius: 999px;
}
.site-support-chat-messages::-webkit-scrollbar-thumb:hover,
#vpn-chat-messages::-webkit-scrollbar-thumb:hover {
  background: #8b7cff;
}

.account-identity-initial,
.vpn-app-identity-initial {
  display: grid !important;
  place-items: center;
  position: absolute;
  inset: 0;
  color: #dcd7ff;
  font-size: 18px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}
.account-identity-initial[hidden],
.vpn-app-identity-initial[hidden] {
  display: none !important;
}
.account-identity-mark,
.vpn-app-telegram-mark {
  position: relative;
}
.account-identity-photo,
.vpn-app-telegram-photo {
  position: relative;
  z-index: 1;
}
.site-support-chat-avatar,
.vpn-chat-avatar {
  flex: 0 0 auto;
  line-height: 1;
  text-align: center;
  user-select: none;
}
.site-support-chat-head .site-support-chat-avatar,
.vpn-chat-head .vpn-chat-avatar {
  display: grid !important;
  place-items: center;
  margin-top: 0 !important;
  color: #fff !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
/* WooCommerce / Platega checkout */
body.woocommerce-checkout,
body.woocommerce-order-pay {
  background: #080a10;
  color: #f4f2f8;
}
body.woocommerce-checkout .woocommerce,
body.woocommerce-order-pay .woocommerce {
  width: min(100% - 28px, 920px);
  margin: 0 auto;
  padding: 48px 0 64px;
  color: #dcd8e5;
}
body.woocommerce-checkout .woocommerce h1,
body.woocommerce-checkout .woocommerce h2,
body.woocommerce-order-pay .woocommerce h1,
body.woocommerce-order-pay .woocommerce h2 {
  color: #fff;
  letter-spacing: -0.04em;
}
body.woocommerce-checkout .woocommerce form.checkout,
body.woocommerce-checkout .woocommerce form#order_review,
body.woocommerce-order-pay .woocommerce form.checkout,
body.woocommerce-order-pay .woocommerce form#order_review {
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 22px;
  background: linear-gradient(
    145deg,
    rgba(24, 28, 42, 0.97),
    rgba(11, 14, 22, 0.98)
  );
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}
.woocommerce-checkout .form-row label {
  display: block;
  margin: 0 0 7px;
  color: #bdb8c9;
  font-size: 12px;
  font-weight: 700;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce form.login input.input-text {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  outline: none;
  box-shadow: none;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce form.login input.input-text:focus {
  border-color: rgba(139, 124, 255, 0.8);
  background: rgba(139, 124, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(139, 124, 255, 0.12);
}
.woocommerce-checkout .form-row {
  margin: 0 0 16px;
}
.woocommerce-checkout .col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.woocommerce-checkout table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  background: transparent;
  color: #e8e4ee;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  vertical-align: top;
}
.woocommerce-checkout table.shop_table .product-name {
  width: 68%;
  text-align: left;
  overflow-wrap: anywhere;
}
.woocommerce-checkout table.shop_table .product-quantity {
  width: 12%;
  text-align: center;
  white-space: nowrap;
}
.woocommerce-checkout table.shop_table .product-subtotal,
.woocommerce-checkout table.shop_table .product-total {
  width: 20%;
  text-align: right;
  white-space: nowrap;
}
.woocommerce-checkout table.shop_table tfoot th {
  text-align: left;
}
.woocommerce-checkout table.shop_table tfoot tr:last-child th,
.woocommerce-checkout table.shop_table tfoot tr:last-child td {
  padding-top: 14px;
  border-bottom: 0;
  color: #fff;
  font-size: 18px;
}
.woocommerce-checkout table.shop_table tr.cart-subtotal {
  display: none;
}
.woocommerce-checkout #payment {
  margin-top: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  margin: 0;
  border: 0;
  list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.woocommerce-checkout
  #payment
  ul.payment_methods
  li.payment_method_platega
  > label {
  display: none;
}
.woocommerce-checkout
  #payment
  ul.payment_methods
  li.payment_method_platega
  > input[name="payment_method"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
  color: #fff;
  font-weight: 750;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method img {
  max-width: 88px;
  max-height: 28px;
  vertical-align: middle;
}
.woocommerce-checkout #payment div.payment_box {
  margin: 8px 0 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #bdb8c9;
}
.woocommerce-checkout #payment div.payment_box::before {
  display: none !important;
  content: none !important;
  border: 0 !important;
}
.woocommerce-checkout #payment .place-order {
  padding: 16px 0 0;
  margin: 0;
  border: 0;
}
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout button#place_order {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(139, 124, 255, 0.9);
  border-radius: 13px;
  background: #8b7cff;
  color: #15121f;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(139, 124, 255, 0.2);
  transition: 0.2s ease;
}
.woocommerce-checkout #payment #place_order:hover,
.woocommerce-checkout button#place_order:hover {
  background: #aaa0ff;
  transform: translateY(-1px);
}
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  color: #9691a2;
  font-size: 12px;
  line-height: 1.5;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 0;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text strong {
  display: block;
  margin-bottom: 4px;
  color: #e9e5ff;
  font-size: 13px;
  font-weight: 800;
}
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(139, 124, 255, 0.28);
  border-radius: 13px;
  background: rgba(139, 124, 255, 0.09);
  color: #e9e5ff;
}
.woocommerce-checkout .woocommerce-error {
  border-color: rgba(255, 116, 145, 0.36);
  background: rgba(255, 116, 145, 0.1);
  color: #ffd9e1;
}
.woocommerce-checkout .woocommerce-form-login {
  padding: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}
.wc-block-checkout__main,
.wc-block-checkout__sidebar {
  color: #e5e1eb;
}
.wc-block-components-checkout-step,
.wc-block-components-order-summary {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.045) !important;
}
.wc-block-components-text-input input,
.wc-block-components-combobox .components-combobox-control__input {
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #fff !important;
}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}
.wc-block-components-checkout-place-order-button {
  width: 100%;
  border: 1px solid rgba(139, 124, 255, 0.9) !important;
  border-radius: 13px !important;
  background: #8b7cff !important;
  color: #15121f !important;
  font-weight: 850 !important;
}
@media (max-width: 620px) {
  body.woocommerce-checkout .woocommerce,
  body.woocommerce-order-pay .woocommerce {
    padding-top: 28px;
    padding-bottom: 48px;
  }
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    width: 100%;
    float: none;
  }
  .woocommerce-checkout table.shop_table th,
  .woocommerce-checkout table.shop_table td {
    padding: 9px 0;
  }
  .woocommerce-checkout #payment .place-order {
    padding: 14px 0 0;
  }
  .woocommerce-checkout .woocommerce-privacy-policy-text {
    padding: 13px 14px;
  }
}
.protivoves-payment-methods {
  margin: 0;
  padding: 0;
  border: 0;
}
.protivoves-payment-methods legend {
  margin: 0 0 5px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}
.protivoves-payment-methods > p {
  margin: 0 0 8px;
  color: #aaa5b5;
  font-size: 12px;
}
.protivoves-payment-method-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: color 0.2s ease;
}
.protivoves-payment-method-option:hover {
  color: #d9d4ff;
}
.protivoves-payment-method-option input {
  width: 17px;
  height: 17px;
  accent-color: #8b7cff;
}
.protivoves-payment-method-option input:checked + span {
  color: #d9d4ff;
  font-weight: 750;
}
.protivoves-payment-method-logo {
  display: block;
  width: 112px;
  height: 40px;
  flex: 0 0 112px;
  object-fit: contain;
}
.protivoves-payment-method-option .protivoves-payment-method-logo {
  margin-left: 2px;
}
.protivoves-method-settings .protivoves-payment-method-logo {
  display: inline-block;
  margin-right: 7px;
  vertical-align: middle;
}
.protivoves-method-settings label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}
.woocommerce-checkout .woocommerce-privacy-policy-text {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(139, 124, 255, 0.22);
  border-radius: 14px;
  background: rgba(139, 124, 255, 0.07);
  color: #aaa5b5;
}
.protivoves-checkout-conditions {
  display: block;
}
.protivoves-checkout-conditions strong {
  display: block;
  margin-bottom: 6px;
  color: #e9e5ff;
  font-size: 13px;
  font-weight: 800;
}
.protivoves-checkout-conditions > span {
  display: block;
}
.woocommerce-checkout #order_review_heading,
.woocommerce-order-pay #order_review_heading {
  margin: 18px 0 10px !important;
  font-size: 18px;
  line-height: 1.2;
}
.woocommerce-checkout #payment h3,
.woocommerce-order-pay #payment h3 {
  margin: 0 0 10px !important;
  font-size: 18px;
  line-height: 1.2;
}
.woocommerce-checkout #payment p,
.woocommerce-order-pay #payment p {
  margin: 0;
}
.woocommerce-checkout #payment .payment_box p,
.woocommerce-order-pay #payment .payment_box p {
  margin: 0;
}
.woocommerce-checkout #payment .place-order,
.woocommerce-order-pay #payment .place-order {
  margin: 0 !important;
}
.woocommerce-checkout #order_review,
.woocommerce-order-pay #order_review {
  margin: 0 !important;
}
.woocommerce-checkout #payment h2,
.woocommerce-checkout #payment h3,
.woocommerce-order-pay #payment h2,
.woocommerce-order-pay #payment h3 {
  margin: 0 0 10px !important;
  font-size: 18px;
  line-height: 1.2;
}
.protivoves-tariff-change-note {
  margin: 0 0 20px;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
  color: #d9d4ff;
  font-size: 12px;
  line-height: 1.5;
}
.protivoves-tariff-change-note ul {
  display: grid;
  gap: 7px;
  margin: 9px 0 0;
  padding-left: 18px;
  color: #bdb8c9;
}
.account-plan-notice {
  margin: 18px 0;
}
.vpn-app-plan-notice {
  margin-top: 14px;
  border-color: rgba(139, 124, 255, 0.28);
  background: rgba(139, 124, 255, 0.08);
}
.woocommerce-order-pay .woocommerce-error {
  position: relative;
  margin: 0 0 18px;
  padding: 14px 16px 14px 48px;
  list-style: none;
}
.woocommerce-order-pay .woocommerce-error::before {
  left: 16px;
}
.woocommerce-order-pay .woocommerce-error li {
  margin: 0;
}
.woocommerce-order-pay .woocommerce-info,
.woocommerce-order-pay .woocommerce-message {
  position: relative;
  padding: 14px 16px;
}
.woocommerce-order-pay .woocommerce-info::before,
.woocommerce-order-pay .woocommerce-message::before {
  display: none !important;
  content: none !important;
}
.woocommerce-order-pay #payment {
  margin-top: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.woocommerce-order-pay #payment ul.payment_methods {
  padding: 0;
  margin: 0;
  border: 0;
  list-style: none;
}
.woocommerce-order-pay #payment ul.payment_methods li.wc_payment_method {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.woocommerce-order-pay #payment div.payment_box {
  margin: 8px 0 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #bdb8c9;
}
.woocommerce-order-pay #payment div.payment_box::before {
  display: none !important;
  content: none !important;
  border: 0 !important;
}
.woocommerce-order-pay #payment .place-order {
  padding: 14px 0 0;
  margin: 0 !important;
  border: 0;
}
.woocommerce-order-pay .woocommerce-privacy-policy-text {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(139, 124, 255, 0.22);
  border-radius: 14px;
  background: rgba(139, 124, 255, 0.07);
  color: #aaa5b5;
  font-size: 12px;
  line-height: 1.5;
}
.woocommerce-order-pay
  .woocommerce-privacy-policy-text
  .protivoves-checkout-conditions {
  display: block;
}
.woocommerce-order-pay .protivoves-checkout-conditions strong {
  display: block;
  margin-bottom: 6px;
  color: #e9e5ff;
  font-size: 13px;
  font-weight: 800;
}
.woocommerce-order-pay .protivoves-checkout-conditions > span {
  display: block;
}
.woocommerce-order-pay #payment #place_order {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(139, 124, 255, 0.9);
  border-radius: 13px;
  background: #8b7cff;
  color: #15121f;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(139, 124, 255, 0.2);
}
.woocommerce-checkout .woocommerce,
.woocommerce-order-pay .woocommerce {
  box-sizing: border-box;
  width: min(100% - 32px, 860px);
  margin: 0 auto;
  padding: clamp(42px, 7vw, 88px) 0 clamp(56px, 8vw, 96px);
}
.woocommerce-checkout form.checkout,
.woocommerce-order-pay form#order_review {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
}
.woocommerce-checkout .protivoves-checkout-conditions--top,
.woocommerce-order-pay .protivoves-checkout-conditions--top {
  display: grid;
  gap: 7px;
  margin: 0 0 22px;
  padding: 15px 17px;
  border: 1px solid rgba(139, 124, 255, 0.24);
  border-radius: 14px;
  background: rgba(139, 124, 255, 0.07);
  color: #bdb8c9;
  font-size: 12px;
  line-height: 1.55;
}
.protivoves-checkout-conditions--top strong {
  color: #f1edff;
  font-size: 14px;
  font-weight: 800;
}
.protivoves-checkout-conditions--top small {
  color: #9691a2;
  font-size: 11px;
}
.protivoves-checkout-conditions--top a {
  color: #c8c0ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce-checkout .woocommerce-privacy-policy-text:empty,
.woocommerce-order-pay .woocommerce-privacy-policy-text:empty {
  display: none;
}
.protivoves-payment-method-logos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  min-width: 92px;
  height: 32px;
  flex: 0 0 auto;
}
.protivoves-payment-method-logo {
  display: block;
  width: auto;
  height: 28px;
  max-width: 48px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 4px;
}
.protivoves-payment-method-logos.logo-sbp .protivoves-payment-method-logo {
  width: 76px;
  max-width: 76px;
  height: 32px;
}
.protivoves-payment-method-logos.logo-erip .protivoves-payment-method-logo {
  width: 76px;
  max-width: 76px;
  height: 32px;
}
.protivoves-payment-method-option {
  display: grid;
  grid-template-columns: 17px minmax(92px, auto) 1fr;
  align-items: center;
  gap: 11px;
  min-height: 50px;
  padding: 8px 0;
}
.protivoves-payment-method-option input {
  margin: 0;
}
.protivoves-payment-method-option > span:last-child {
  line-height: 1.25;
}
.protivoves-payment-method-commission {
  grid-column: 3;
  color: #9691a2;
  font-size: 11px;
  line-height: 1.25;
}
.protivoves-payment-commission-list {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(139, 124, 255, 0.16);
  color: #9691a2;
  font-size: 11px;
}
.protivoves-payment-commission-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.protivoves-payment-commission-row > span:last-child {
  color: #c8c0ff;
}
.protivoves-method-settings label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.protivoves-method-settings .protivoves-payment-method-logos {
  min-width: 92px;
}
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout button#place_order,
.woocommerce-order-pay #payment #place_order {
  color: #fff !important;
}
.protivoves-payment-method-option > span:last-child,
.protivoves-payment-method-option input:checked + span {
  color: #fff !important;
}
@media (max-width: 620px) {
  .woocommerce-checkout .woocommerce,
  .woocommerce-order-pay .woocommerce {
    width: min(100% - 24px, 860px);
    padding-top: 30px;
    padding-bottom: 48px;
  }
  .woocommerce-checkout form.checkout,
  .woocommerce-order-pay form#order_review {
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }
  .protivoves-payment-method-option {
    grid-template-columns: 17px 92px 1fr;
    gap: 9px;
  }
  .protivoves-payment-method-logos {
    min-width: 92px;
  }
  .woocommerce-checkout .protivoves-checkout-conditions--top,
  .woocommerce-order-pay .protivoves-checkout-conditions--top {
    margin-bottom: 20px;
    padding: 14px;
  }
}

/* Keep card logos and labels readable on narrow checkout screens. */
.protivoves-payment-method-option {
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas: "radio logos" "radio label";
  align-items: center;
  column-gap: 10px;
  row-gap: 5px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 0;
  background: transparent;
}
.protivoves-payment-method-option > input {
  grid-area: radio;
  margin: 0;
}
.protivoves-payment-method-option > .protivoves-payment-method-logos {
  grid-area: logos;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.protivoves-payment-method-option .protivoves-payment-method-logo {
  display: block;
  flex: 0 0 auto;
  width: auto !important;
  max-width: 52px;
  height: 28px;
  object-fit: contain;
}
.protivoves-payment-method-option > span:not(.protivoves-payment-method-logos) {
  grid-area: label;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
}
.protivoves-payment-method-option br {
  display: none;
}
@media (max-width: 620px) {
  .protivoves-payment-method-option {
    padding: 10px;
  }
  .protivoves-payment-method-option .protivoves-payment-method-logo {
    max-width: 46px;
    height: 25px;
  }
  .protivoves-payment-methods > p {
    margin: 0 0 10px;
    font-size: 13px;
  }
}
.protivoves-payment-method-content {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.protivoves-payment-method-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
}
.protivoves-payment-method-content .protivoves-payment-method-logos {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.protivoves-payment-method-content .protivoves-payment-method-logo {
  width: auto !important;
  max-width: 52px;
  height: 28px;
  flex: 0 0 auto;
}

/* One visual contract for the Telegram WebApp and the public mobile shell. */
.mobile-app-nav,
.vpn-app-tabs {
  position: fixed;
  z-index: 100;
  right: 10px;
  bottom: 18px;
  left: 10px;
  width: auto;
  height: 74px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 5px;
  border: 1px solid #8b7cff42;
  border-radius: 38px;
  background: linear-gradient(135deg, #17192af5, #10131ff5);
  box-shadow:
    0 12px 32px #0009,
    0 0 0 1px #8b7cff12;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mobile-app-nav-item,
.vpn-app-tab {
  display: flex;
  min-width: 0;
  height: 64px;
  min-height: 64px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  border-radius: 32px;
  background: transparent;
  color: #b9b4c2;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow: hidden;
  cursor: pointer;
  transform: none;
  transition:
    color 0.2s,
    background 0.2s;
}
.mobile-app-nav-item:hover,
.mobile-app-nav-item:focus-visible,
.vpn-app-tab:hover,
.vpn-app-tab:focus {
  color: #fff;
  background: transparent;
  outline: none;
}
.mobile-app-nav-item.is-active,
.vpn-app-tab.is-active {
  background: #8b7cff30;
  color: #e6e1ff;
}
.mobile-app-nav-item > span:first-child,
.mobile-app-nav-item .vpn-app-tab-icon,
.vpn-app-tab-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  margin: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  transform: none;
}
.mobile-app-nav-item.is-active > span:first-child,
.mobile-app-nav-item.is-active .vpn-app-tab-icon,
.vpn-app-tab.is-active .vpn-app-tab-icon {
  background: transparent;
  color: #c9c1ff;
}
.mobile-app-nav-item > span:last-child,
.vpn-app-tab > span:last-child {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: inherit;
  transform: none;
}
.mobile-app-nav {
  display: none;
}
@media (max-width: 900px) {
  html:not(:has(.vpn-app)),
  body:not(:has(.vpn-app)) {
    padding-bottom: 112px;
  }
  body:not(:has(.vpn-app)) .mobile-app-nav {
    display: grid;
  }
}
html.vpn-keyboard-open .vpn-app-tabs {
  display: none;
}

/* Home page composition. Components stay in the global layer; these rules only arrange the page. */
.home-enhanced .hero {
  padding-bottom: 88px;
}
.home-enhanced .hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  color: #b9b4c2;
  font-size: 13px;
}
.home-enhanced .hero-proof span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.home-enhanced .home-section-intro {
  max-width: 700px;
}
.home-enhanced .home-section-intro p {
  max-width: 620px;
}
.home-enhanced .steps-grid,
.home-enhanced .home-pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.home-enhanced .step-card .icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: rgba(139, 124, 255, 0.14);
  color: #c9c1ff;
  font-weight: 800;
}
.home-enhanced .card--pricing {
  min-height: 310px;
  padding: 26px;
}
.home-enhanced .card--pricing.card--featured {
  transform: none;
}
.home-enhanced .card--pricing.card--featured:hover {
  transform: translateY(-5px);
}
.home-enhanced .card--pricing h3 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.home-enhanced .home-price {
  margin: 20px 0 2px;
  color: #fff;
  font-size: 46px;
  font-weight: 790;
  letter-spacing: -0.06em;
}
.home-enhanced .home-price small {
  color: #b9b4c2;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}
.home-enhanced .card--pricing ul {
  display: grid;
  gap: 9px;
  margin: 16px 0 22px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  color: #cbd2d0;
  list-style: none;
}
.home-enhanced .card--pricing li::before {
  margin-right: 8px;
  color: #a99dff;
  content: "✓";
  font-weight: 800;
}
.home-enhanced .card--pricing .button {
  width: 100%;
  margin-top: auto;
}
.home-enhanced .platform-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.home-enhanced .platform-pill {
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.04);
  color: #ddd8e2;
}
.home-enhanced .home-faq {
  display: grid;
  gap: 10px;
  max-width: 820px;
}
.home-enhanced .home-faq details {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}
.home-enhanced .home-faq summary {
  cursor: pointer;
  color: #fff;
  font-weight: 750;
}
.home-enhanced .home-faq p {
  margin: 12px 0 0;
  color: #b9b4c2;
}
.home-enhanced .home-final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px;
  border: 1px solid rgba(139, 124, 255, 0.3);
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(139, 124, 255, 0.13),
    rgba(77, 163, 255, 0.06)
  );
}
.home-enhanced .home-final-cta h2 {
  margin: 0 0 8px;
}
.home-enhanced .home-final-cta p {
  margin: 0;
  color: #b9b4c2;
}
@media (max-width: 800px) {
  .home-enhanced .steps-grid,
  .home-enhanced .home-pricing {
    grid-template-columns: 1fr;
  }
  .home-enhanced .home-final-cta {
    align-items: stretch;
    flex-direction: column;
  }
  .home-enhanced .home-final-cta .button {
    width: 100%;
  }
}
.real-instructions-page {
  padding: 105px 0 88px;
}
.instruction-subscription-box {
  margin-bottom: 36px;
}
.instruction-subscription-box h2 {
  margin-top: 0;
}
.instruction-subscription-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 16px;
}
.instruction-subscription-row code {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  color: #ddd8e2;
  overflow: auto;
  white-space: nowrap;
}
.real-instructions-platform {
  margin-top: 48px;
}
.real-instructions-platform > h2 {
  margin-bottom: 20px;
  font-size: 32px;
}
.real-instructions-apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.real-instructions-app {
  height: 100%;
}
.real-instructions-app-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.real-instructions-app-heading h3 {
  margin-top: 0;
}
.real-instructions-app-heading .button {
  width: auto;
  flex: 0 0 auto;
}
.real-instructions-app .step-list {
  margin-bottom: 20px;
}
.instruction-note {
  font-size: 14px;
}
.notice-box--help {
  display: block;
  padding: 28px;
  margin-top: 48px;
}
.notice-box--help .step-list {
  max-width: 680px;
}
.notice-box--help .button {
  margin-top: 4px;
}
.notice-box--contact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 17px 18px;
  margin-top: 22px;
}
.notice-box--contact span {
  margin-right: 0;
}
.notice-box--contact .button {
  margin-top: 0;
}
.real-instructions-page a:not(.button) {
  color: #c9c1ff;
  text-decoration: underline;
  text-decoration-color: rgba(201, 193, 255, 0.4);
  text-underline-offset: 3px;
}
@media (max-width: 900px) {
  .real-instructions-apps {
    grid-template-columns: 1fr;
  }
  .notice-box--contact {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .real-instructions-page {
    padding: 66px 0 60px;
  }
  .instruction-subscription-row {
    align-items: stretch;
    flex-direction: column;
  }
  .instruction-subscription-row .button {
    width: 100%;
  }
  .real-instructions-platform > h2 {
    font-size: 28px;
  }
  .real-instructions-app-heading {
    flex-direction: column;
  }
  .real-instructions-app-heading .button {
    width: 100%;
  }
}
.home-enhanced .hero{padding-bottom:88px}
.home-enhanced .hero-proof{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;color:#b9b4c2;font-size:13px}
.home-enhanced .hero-proof span{padding:8px 11px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04)}
.home-enhanced .home-section-intro{max-width:700px}
.home-enhanced .home-section-intro p{max-width:620px}
.home-enhanced .steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.home-enhanced .step-card .icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:18px;border-radius:13px;background:rgba(139,124,255,.14);color:#c9c1ff;font-weight:800}
.home-enhanced .home-pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.home-enhanced .card--pricing{display:flex;min-height:310px;flex-direction:column;padding:26px}
.home-enhanced .card--featured{border-color:rgba(139,124,255,.5);background:linear-gradient(155deg,rgba(48,38,61,.92),rgba(14,13,24,.98))}
.home-enhanced .card--pricing h3{margin:0;text-transform:uppercase;letter-spacing:.06em}
.home-enhanced .home-price{margin:20px 0 2px;color:#fff;font-size:46px;font-weight:790;letter-spacing:-.06em}
.home-enhanced .home-price small{color:#b9b4c2;font-size:15px;font-weight:500;letter-spacing:0}
.home-enhanced .card--pricing ul{display:grid;gap:9px;margin:16px 0 22px;padding:16px 0 0;border-top:1px solid var(--line);list-style:none;color:#cbd2d0}
.home-enhanced .card--pricing li::before{content:'ºw^~)Þw';margin-right:8px;color:#a99dff;font-weight:800}
.home-enhanced .card--pricing .button{width:100%;margin-top:auto}
.home-enhanced .platform-row{display:flex;flex-wrap:wrap;gap:12px}
.home-enhanced .platform-pill{padding:13px 16px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.04);color:#ddd8e2}
.home-enhanced .home-faq{display:grid;gap:10px;max-width:820px}
.home-enhanced .home-faq details{padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035)}
.home-enhanced .home-faq summary{cursor:pointer;color:#fff;font-weight:750}
.home-enhanced .home-faq p{margin:12px 0 0;color:#b9b4c2}
.home-enhanced .home-final-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px;border:1px solid rgba(139,124,255,.3);border-radius:20px;background:linear-gradient(135deg,rgba(139,124,255,.13),rgba(77,163,255,.06))}
.home-enhanced .home-final-cta h2{margin:0 0 8px}
.home-enhanced .home-final-cta p{margin:0;color:#b9b4c2}
@media(max-width:800px){.home-enhanced .steps-grid,.home-enhanced .home-pricing{grid-template-columns:1fr}.home-enhanced .home-final-cta{align-items:stretch;flex-direction:column}.home-enhanced .home-final-cta .button{width:100%}}
.home-enhanced .card--pricing .button-primary,
.home-enhanced .card--pricing .tariff-checkout-form .button-primary{
  border-color:rgba(77,163,255,.82);
  background:rgba(77,163,255,.07);
  color:#dcebff;
  box-shadow:none;
}
.home-enhanced .card--pricing .button-primary:hover,
.home-enhanced .card--pricing .tariff-checkout-form .button-primary:hover{
  border-color:#79b9ff;
  background:rgba(77,163,255,.16);
  color:#fff;
  box-shadow:none;
}
.home-enhanced .card--pricing li::before{content:"\2713";margin-right:8px;color:#a99dff;font-weight:800}

/* Email authentication inside the live account card */
.telegram-login-card{width:min(100% - 28px,540px);padding:38px 42px 34px;border-color:rgba(139,124,255,.25);border-radius:28px;background:linear-gradient(155deg,rgba(27,27,43,.98),rgba(11,15,22,.98));box-shadow:0 30px 90px rgba(0,0,0,.4)}
.telegram-login-card h1{margin:18px 0 10px;font-size:clamp(32px,5vw,46px);letter-spacing:-.055em}
.telegram-login-card>p{max-width:380px;margin:0 auto;color:#b9b4c2;line-height:1.55}
.telegram-login-card .telegram-login-button{margin:26px 0 20px}
.telegram-login-card .button--telegram{width:100%;min-height:54px;border-radius:14px}
.telegram-login-card .auth-divider{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:#777386;font-size:12px}
.telegram-login-card .auth-divider:before,.telegram-login-card .auth-divider:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.1)}
.telegram-login-card .auth-form{display:grid;gap:15px;text-align:left}
.telegram-login-card .auth-form label{display:grid;gap:7px;color:#d9d4e2;font-size:12px;font-weight:750}
.telegram-login-card .auth-form input{width:100%;min-height:50px;box-sizing:border-box;padding:0 14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;outline:0;background:rgba(5,8,13,.68);color:#fff;font:inherit;font-size:14px;transition:.2s ease}
.telegram-login-card .auth-form input:focus{border-color:rgba(139,124,255,.8);box-shadow:0 0 0 4px rgba(139,124,255,.12)}
.telegram-login-card .auth-form .button-primary{width:100%;min-height:52px;margin-top:4px}
.telegram-login-card .auth-recovery{display:block;margin:0;text-align:center;color:#aaa3c1;font-size:12px}
@media(max-width:620px){.telegram-login-card{width:min(100% - 28px,540px);padding:30px 20px 28px}}

.telegram-login-card>.eyebrow{display:flex;width:max-content;margin:0 auto 16px;padding:8px 13px;font-size:12px;letter-spacing:.12em}
.telegram-login-card>.eyebrow+p{margin:0 auto 24px;max-width:360px;line-height:1.6}
.telegram-login-card .telegram-login-button{margin:0 0 26px}

.telegram-login-card .auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 22px;padding:4px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.035)}
.telegram-login-card .auth-tab{border:0;border-radius:9px;padding:11px 12px;background:transparent;color:#8f8a9d;font:inherit;font-size:13px;font-weight:750;cursor:pointer}
.telegram-login-card .auth-tab:hover{color:#fff}
.telegram-login-card .auth-tab.is-active{background:rgba(139,124,255,.16);color:#e5e0ff;box-shadow:inset 0 0 0 1px rgba(139,124,255,.2)}

.telegram-login-card .auth-form[hidden]{display:none!important}
.telegram-login-card .auth-form{display:grid;gap:15px;text-align:left}.telegram-login-card .auth-form label{display:grid;gap:7px;color:#d9d4e2;font-size:12px;font-weight:750}.telegram-login-card .auth-form input{width:100%;min-height:50px;box-sizing:border-box;padding:0 14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;outline:0;background:rgba(5,8,13,.68);color:#fff;font:inherit;font-size:14px}.telegram-login-card .auth-form input:focus{border-color:rgba(139,124,255,.8);box-shadow:0 0 0 4px rgba(139,124,255,.12)}.telegram-login-card .auth-form .button-primary{width:100%;min-height:52px;margin-top:4px}.auth-message{margin:12px 0;padding:11px 14px;border:1px solid rgba(139,124,255,.3);background:rgba(139,124,255,.1);border-radius:10px;color:#dcd6ff;font-size:13px;text-align:left}.auth-message.is-error{border-color:#e06b78;background:rgba(224,107,120,.12);color:#ffb5bd}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 22px;padding:4px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.035)}.auth-tab{border:0;border-radius:9px;padding:11px 12px;background:transparent;color:#8f8a9d;font:inherit;font-size:13px;font-weight:750;cursor:pointer}.auth-tab.is-active{background:rgba(139,124,255,.16);color:#e5e0ff}.auth-form[hidden],.auth-tabs[hidden]{display:none!important}.auth-code-group{margin:16px 0 20px}.auth-code-label{display:block;margin:0 0 10px;text-align:center;color:#aebbd0;font-size:13px;font-weight:600}.auth-code-boxes{display:grid;grid-template-columns:repeat(6,36px);justify-content:center;gap:8px;width:100%}.auth-code-cell{width:36px!important;min-width:36px!important;max-width:36px!important;height:40px!important;min-height:40px!important;padding:0!important;text-align:center!important;font-size:18px!important;line-height:40px!important;border-radius:8px!important}.auth-step-note{margin:2px 0 4px;color:#9da8bb;font-size:13px}.auth-recovery-intro{margin:0 0 16px;text-align:left}.auth-recovery-intro strong{display:block;color:#fff;font-size:20px}.auth-recovery-intro p{margin:5px 0 0;color:#9da8bb;font-size:13px}.auth-recovery{display:block;margin:0;text-align:center;color:#aaa3c1;font-size:12px}@media(max-width:420px){.auth-code-boxes{grid-template-columns:repeat(6,32px);gap:6px}.auth-code-cell{width:32px!important;min-width:32px!important;max-width:32px!important;height:38px!important;min-height:38px!important;font-size:17px!important}}/* Mobile site wheel scrolling. */
@media (max-width: 900px) {
  html:not(:has(.vpn-app)),
  body:not(:has(.vpn-app)) {
    overflow-y: auto !important;
    overflow-x: hidden;
    min-height: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

/* Final mobile client contract. */
@media (max-width: 900px) {
  html, body { width:100%; min-width:320px; overflow-x:hidden; }
  body, body:not(:has(.vpn-app)) { padding-bottom:10px !important; }
  .site-shell { width:min(calc(100% - 32px),1180px); }
  .header-inner { min-height:64px; gap:12px; }
  .brand { min-width:0; gap:9px; font-size:16px; }
  .brand-mark { width:34px; height:34px; flex:0 0 34px; }
  .mobile-toggle { min-height:42px; padding:0 14px; flex:0 0 auto; }
  .site-nav { top:calc(100% + 8px); left:16px; right:16px; gap:5px; padding:10px; border-radius:16px; background:rgba(16,19,31,.98); z-index:80; }
  .site-nav > a:not(.button) { min-height:44px; display:flex; align-items:center; padding:10px 12px; }
  .site-nav .button { min-height:46px; }
  .hero { padding:56px 0 48px; }
  .hero-grid { gap:32px; }
  .hero h1 { max-width:none; font-size:clamp(38px,12vw,58px); line-height:1; }
  .hero p { font-size:16px; line-height:1.55; }
  .hero-actions, .account-actions { display:grid; grid-template-columns:1fr; gap:10px; margin-top:24px; }
  .hero-actions .button, .account-actions .button { width:100%; }
  .section { padding:48px 0; }
  .section-heading { margin-bottom:20px; }
  .section-heading h1, .section-heading h2 { margin:14px 0 12px; font-size:clamp(28px,8vw,40px); line-height:1.05; }
  .section-heading p { font-size:15px; line-height:1.55; }
  .feature-grid, .pricing-grid, .account-grid, .steps-grid, .home-pricing, .real-instructions-platforms, .real-instructions-apps { grid-template-columns:1fr; gap:14px; }
  .card, .card--pricing, .visual-card { padding:20px; border-radius:18px; }
  .card--pricing { min-height:0; }
  .card--pricing.card--featured { transform:none; }
  .card--pricing.card--featured:hover, .button:hover { transform:none; }
  .home-final-cta { gap:18px; align-items:stretch; flex-direction:column; }
  .home-final-cta .button { width:100%; }
  .platform-row { gap:8px; }
  .platform-pill { padding:8px 11px; font-size:12px; }
  .account-identity { margin-bottom:18px; padding:13px; }
  .account-payments { margin-top:24px; }
  .payment-row { gap:10px; padding:16px; }
  .payment-row code, .payment-row p, .payment-meta { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
  .payment-meta { align-items:flex-start; text-align:left; }
  .form, .support-form, .site-support-chat-card { padding:18px; }
  .site-support-chat-messages, #vpn-chat-messages { max-height:46vh; }
  .form-field input, .form-field textarea, .site-support-chat-form textarea { font-size:16px; }
  .mobile-app-nav { right:8px; bottom:10px; left:8px; width:auto; height:68px; padding:4px; border-radius:24px; }
  .mobile-app-nav-item { height:58px; min-height:58px; font-size:9px; }
}
@media (max-width:480px) {
  .site-shell { width:min(calc(100% - 24px),1180px); }
  .hero { padding-top:42px; }
  .eyebrow { max-width:100%; font-size:9px; letter-spacing:.1em; }
  .card, .card--pricing, .visual-card { padding:16px; }
  .mobile-app-nav { right:6px; bottom:8px; left:6px; }
  .mobile-app-nav-item > span:last-child { font-size:8px; }
}
@media (hover:none) {
  .button:hover, .mobile-app-nav-item:hover { transform:none; }
}

/* Keep short mobile pages filled without a blank tail after the footer. */
@media (max-width: 900px) {
  body { display:flex; flex-direction:column; min-height:100vh; }
  body > main { width:100%; flex:1 0 auto; }
  body > .site-footer { flex:0 0 auto; }
}

/* Mobile support chat polish. */
@media (max-width: 620px) {
  .site-support-section { padding-top: 36px; }
  .site-support-section .section-heading { margin-bottom: 16px; }
  .site-support-chat-card { width: 100%; padding: 16px; }
  .site-support-chat-head { align-items: flex-start; padding-bottom: 13px; }
  .site-support-chat-head > div { min-width: 0; }
  .site-support-chat-head strong { font-size: 15px; line-height: 1.3; }
  .site-support-chat-head span { font-size: 12px; line-height: 1.35; }
  .site-support-chat-messages {
    min-height: 120px;
    max-height: 48vh;
    gap: 8px;
    margin: 0 -2px;
    padding: 14px 2px;
    border-radius: 12px;
  }
  .site-support-chat-bubble {
    width: auto;
    max-width: 88%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .site-support-chat-form { gap: 8px; padding-top: 14px; }
  .site-support-chat-form textarea { min-height: 96px; max-height: 180px; }
  .site-support-chat-actions { margin-top: 2px; }
}

.support-title-mobile { display:none; }
@media (max-width:620px) { .support-title-desktop { display:none; } .support-title-mobile { display:inline; } }

/* Support chat message sizing fix. */
.site-support-chat-messages {
  align-items: start;
}
.site-support-chat-bubble {
  align-self: start;
  height: auto;
  min-height: 0;
}
.site-support-chat-form textarea {
  min-height: 96px;
}