/* =========================================================
   AxioNetVPN — Unified Type System V6
   Final typography and sizing layer
   ========================================================= */

:root {
  /* Font stack: no external dependency */
  --ax-font:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  /* Display */
  --ax-display-xl:
    clamp(58px, 5.8vw, 88px);

  --ax-display-lg:
    clamp(46px, 4.7vw, 68px);

  --ax-display-md:
    clamp(39px, 3.8vw, 56px);

  /* Headings */
  --ax-h1:
    clamp(38px, 3.6vw, 52px);

  --ax-h2:
    clamp(29px, 2.7vw, 40px);

  --ax-h3:
    clamp(20px, 1.7vw, 26px);

  --ax-h4:
    17px;

  /* Text */
  --ax-body-lg:
    16px;

  --ax-body:
    14px;

  --ax-body-sm:
    13px;

  --ax-caption:
    12px;

  --ax-label:
    10px;

  /* Leading */
  --ax-leading-tight:
    1.04;

  --ax-leading-heading:
    1.13;

  --ax-leading-body:
    1.72;

  /* Tracking */
  --ax-tracking-display:
    -.052em;

  --ax-tracking-heading:
    -.032em;

  --ax-tracking-label:
    .13em;
}


/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
  font-family:
    var(--ax-font) !important;
}

body {
  font-size:
    var(--ax-body);

  line-height:
    var(--ax-leading-body);

  font-weight:
    400;

  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;

  text-rendering:
    optimizeLegibility;
}

button,
input,
textarea,
select {
  font-family:
    inherit;
}


/* =========================================================
   COMMON HEADINGS
   ========================================================= */

main h1,
main h2,
main h3,
main h4 {
  text-wrap:
    balance;
}

main h1 {
  font-size:
    var(--ax-h1);

  line-height:
    var(--ax-leading-tight);

  letter-spacing:
    var(--ax-tracking-display);

  font-weight:
    760;
}

main h2 {
  font-size:
    var(--ax-h2);

  line-height:
    var(--ax-leading-heading);

  letter-spacing:
    var(--ax-tracking-heading);

  font-weight:
    740;
}

main h3 {
  font-size:
    var(--ax-h3);

  line-height:
    1.18;

  letter-spacing:
    -.022em;

  font-weight:
    720;
}

main h4 {
  font-size:
    var(--ax-h4);

  line-height:
    1.25;

  letter-spacing:
    -.012em;

  font-weight:
    700;
}

main p,
main li {
  font-size:
    var(--ax-body);

  line-height:
    var(--ax-leading-body);
}


/* =========================================================
   EYEBROWS / SMALL LABELS
   ========================================================= */

.eyebrow,
.home-kicker,
.account-label,
.subscription-info-label,
.download-meta span {
  font-size:
    var(--ax-label) !important;

  line-height:
    1.3;

  font-weight:
    800;

  letter-spacing:
    var(--ax-tracking-label);

  text-transform:
    uppercase;
}


/* =========================================================
   HEADER
   ========================================================= */

.ax-brand,
.brand {
  font-size:
    14px !important;

  font-weight:
    820 !important;

  letter-spacing:
    -.018em;
}

.ax-nav > a,
.nav > a,
.nav-link {
  font-size:
    12px !important;

  font-weight:
    650 !important;

  letter-spacing:
    -.005em;
}

.ax-nav .ax-nav-cta,
.nav .nav-cta {
  font-size:
    12px !important;

  font-weight:
    800 !important;
}


/* =========================================================
   HOME
   ========================================================= */

.home-hero h1 {
  font-size:
    var(--ax-display-xl) !important;

  line-height:
    .97 !important;

  letter-spacing:
    -.065em !important;

  font-weight:
    760 !important;
}

.home-hero h1 span {
  font-weight:
    570 !important;

  letter-spacing:
    -.058em;
}

.home-hero-lead {
  font-size:
    var(--ax-body-lg) !important;

  line-height:
    1.7 !important;

  font-weight:
    400;
}

.home-section-heading h2,
.home-experience-title h2,
.home-final h2 {
  font-size:
    var(--ax-display-lg) !important;

  line-height:
    1.02 !important;

  letter-spacing:
    -.052em !important;

  font-weight:
    710 !important;
}

.home-section-heading > p {
  font-size:
    var(--ax-body) !important;

  line-height:
    1.75 !important;
}

.home-process-list h3 {
  font-size:
    19px !important;

  font-weight:
    700 !important;

  letter-spacing:
    -.022em;
}

.home-process-list p,
.home-side-line p,
.home-experience-list small {
  font-size:
    var(--ax-body-sm) !important;
}

.home-experience-list span {
  font-size:
    16px !important;

  font-weight:
    680 !important;
}

.home-button {
  font-size:
    13px !important;

  font-weight:
    780 !important;
}


/* =========================================================
   EDITORIAL PAGES
   contacts / service / legal
   ========================================================= */

.editorial-page main h1 {
  max-width:
    900px;

  font-size:
    var(--ax-display-md) !important;

  line-height:
    1.01 !important;

  letter-spacing:
    -.052em !important;

  font-weight:
    730 !important;
}

.editorial-page main > p,
.editorial-page .section-head > p {
  max-width:
    780px;

  font-size:
    15px !important;

  line-height:
    1.75 !important;
}

.page-contacts .contact-card h2,
.page-service .info-card h2,
.page-service .feature-card h2 {
  font-size:
    25px !important;

  line-height:
    1.14 !important;

  letter-spacing:
    -.032em !important;
}

.page-contacts .contact-card p,
.page-service .info-card p,
.page-service .feature-card p,
.page-service .info-card li,
.page-service .feature-card li {
  font-size:
    14px !important;

  line-height:
    1.75 !important;
}

.page-refund .legal-card h2,
.page-refund .legal-card h3,
.page-privacy .legal-card h2,
.page-privacy .legal-card h3,
.page-offer .legal-card h2,
.page-offer .legal-card h3 {
  font-size:
    21px !important;

  line-height:
    1.25 !important;

  letter-spacing:
    -.023em !important;

  font-weight:
    710 !important;
}

.page-refund .legal-card p,
.page-refund .legal-card li,
.page-privacy .legal-card p,
.page-privacy .legal-card li,
.page-offer .legal-card p,
.page-offer .legal-card li {
  font-size:
    14px !important;

  line-height:
    1.8 !important;
}


/* =========================================================
   AUTH
   ========================================================= */

body:not(.home-v2) main > .eyebrow + h1,
body:not(.home-v2) main h1 {
  font-weight:
    740;
}

/* Auth/card forms keep a calmer scale */

form label {
  font-size:
    12px;

  font-weight:
    680;
}

input,
select,
textarea {
  font-size:
    14px !important;
}

form button {
  font-size:
    13px !important;

  font-weight:
    780 !important;
}

.links,
.links a {
  font-size:
    12px !important;
}


/* =========================================================
   ACCOUNT
   ========================================================= */

.account-value {
  font-size:
    15px !important;

  line-height:
    1.4;

  font-weight:
    700 !important;
}

.subscription-name {
  font-size:
    20px !important;

  line-height:
    1.15;

  font-weight:
    720 !important;

  letter-spacing:
    -.025em;
}

.subscription-status,
.badge {
  font-size:
    10px !important;

  line-height:
    1;

  font-weight:
    780 !important;

  letter-spacing:
    .01em;
}

.subscription-card {
  font-size:
    13px;
}

.subscription-action,
.account-downloads-button,
#telegramLinkButton {
  font-size:
    13px !important;

  font-weight:
    760 !important;
}


/* =========================================================
   DEVICE CONNECTION
   ========================================================= */

.connect-title {
  font-size:
    18px !important;

  line-height:
    1.2;

  font-weight:
    720 !important;

  letter-spacing:
    -.02em;
}

.connect-intro,
.connect-client-description,
.connect-steps,
.connect-note {
  font-size:
    12px !important;

  line-height:
    1.68 !important;
}

.connect-client-title {
  font-size:
    14px !important;

  font-weight:
    710 !important;
}

button.connect-tab {
  font-size:
    12px !important;

  font-weight:
    690 !important;
}

.connect-button {
  font-size:
    12px !important;

  font-weight:
    760 !important;
}


/* =========================================================
   PLANS
   ========================================================= */

.plan-card h2,
.plan-card h3 {
  font-size:
    22px !important;

  line-height:
    1.15;

  font-weight:
    720 !important;
}

.plan-description {
  font-size:
    13px !important;

  line-height:
    1.65 !important;
}

.period-option {
  font-size:
    13px !important;
}

.period-price {
  font-weight:
    760 !important;
}


/* =========================================================
   DOWNLOADS
   ========================================================= */

.downloads-main h1 {
  font-size:
    var(--ax-display-md) !important;
}

.download-platform {
  font-size:
    20px !important;

  line-height:
    1.18;

  font-weight:
    720 !important;

  letter-spacing:
    -.024em;
}

.download-description {
  font-size:
    12px !important;

  line-height:
    1.6 !important;
}

.download-meta {
  font-size:
    12px !important;
}

.download-button {
  font-size:
    12px !important;

  font-weight:
    780 !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer,
.home-footer {
  font-size:
    11px !important;
}

.footer a,
.home-footer a {
  font-size:
    11px !important;
}


/* =========================================================
   MOBILE SCALE
   ========================================================= */

@media (max-width: 760px) {

  :root {
    --ax-display-xl:
      clamp(44px, 13vw, 64px);

    --ax-display-lg:
      clamp(37px, 10vw, 52px);

    --ax-display-md:
      clamp(35px, 9vw, 48px);

    --ax-h1:
      clamp(34px, 9vw, 44px);

    --ax-h2:
      clamp(27px, 7vw, 36px);

    --ax-h3:
      20px;

    --ax-body-lg:
      15px;

    --ax-body:
      14px;

    --ax-body-sm:
      12px;
  }

  .home-hero-lead {
    max-width:
      520px;
  }

  .editorial-page main > p,
  .editorial-page .section-head > p {
    font-size:
      14px !important;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

  :root {
    --ax-display-xl:
      43px;

    --ax-display-lg:
      36px;

    --ax-display-md:
      34px;

    --ax-h1:
      33px;

    --ax-h2:
      27px;
  }

  .ax-brand {
    font-size:
      13px !important;
  }

}