/* ============================================================
   BULBVPN landing — "Цены" (Prices) stylesheet
   Self-contained: @font-face + reset copied from main.css so this
   page does NOT depend on the home page's main.css. Below the reset
   live the prices-specific rules.

   Layout model mirrors the home page: three fixed-width absolute
   "canvases" (one per Figma artboard) toggled by the SAME media
   queries the home page uses, so each breakpoint reproduces its own
   artboard 1:1.
     desktop canvas  1654 x 2754   shown >= 1394px
     tablet  canvas  1133 x 2364   shown 813px..1393px
     phone   canvas   493-wide fluid (aspect 493:2788)  shown <= 812px
   Per-node coordinates (left/top/width/height/font-size) are kept
   inline in pricing.html as a direct transcription of the Figma
   absolute layout; this file owns shared component styling, the
   typography roles and the breakpoint switching.
   ============================================================ */

/* ---------- self-hosted fonts (copied from main.css) ---------- */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dmsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dmsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* ---------- reset (copied from main.css) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--c-page);
  color: var(--c-text-dark);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; border: 0; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; }
a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--c-purple);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- canvas ---------- */
.canvas {
  position: relative;
  margin: 0 auto;
  background: var(--c-page);
  overflow: hidden;          /* clip artboard bleed exactly like the Figma frame */
}
.bp-d { width: 1654px; height: 2754px; }
.bp-t { width: 1133px; height: 2364px; }
/* phone canvas is FLUID: caps at the 493px artboard width and scales down to
   ~360px. Height is definite via aspect-ratio so the absolutely-positioned
   children have a box to resolve against (design frame 493 x 2788). */
.bp-p {
  width: 100%;
  max-width: 493px;
  aspect-ratio: 493 / 2788;
  container-type: inline-size;
  --u: calc(100cqw / 493);      /* one Figma design pixel, fluid */
}

/* breakpoint switching — identical boundaries to the home page:
   midpoints between the three target widths (493 / 1133 / 1654). */
.bp-d, .bp-t, .bp-p { display: none; }
@media (min-width: 1394px) { .bp-d { display: block; } }
@media (min-width: 813px) and (max-width: 1393px) { .bp-t { display: block; } }
@media (max-width: 812px) { .bp-p { display: block; } }

/* ---------- scale-to-fit: the fixed-width artboard fills the viewport width
   at ANY screen size (no horizontal scroll, no empty margins). The .fit
   wrapper reflows to the scaled height via aspect-ratio; the canvas is scaled
   by container-query width (excludes the scrollbar, unlike 100vw). Phone stays
   fluid as-is. ---------- */
.fit { display: none; width: 100%; overflow: hidden; container-type: inline-size; }
@media (min-width: 1394px) {
  .fit-d { display: block; aspect-ratio: 1654 / 2754; }
  .fit-d > .bp-d { margin: 0; transform-origin: top left; transform: scale(calc(100cqw / 1654px)); }
}
@media (min-width: 813px) and (max-width: 1393px) {
  .fit-t { display: block; aspect-ratio: 1133 / 2364; }
  .fit-t > .bp-t { margin: 0; transform-origin: top left; transform: scale(calc(100cqw / 1133px)); }
}

/* ---------- primitives ---------- */
.abs { position: absolute; }
.nowrap { white-space: nowrap; }
.lm { display: contents; }
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #000; color: #fff; padding: 10px 16px; z-index: 99;
  font-family: var(--font-body);
}
.skip-link:focus { left: 8px; top: 8px; }

/* typography roles */
.dm    { font-family: var(--font-heading); font-variation-settings: "opsz" 14; line-height: normal; }
.dm-m  { font-weight: var(--w-medium); }
.dm-b  { font-weight: var(--w-bold); }
.dm-eb { font-weight: var(--w-extrabold); }
.dm-bl { font-weight: var(--w-black); }
.dm-th { font-weight: 200; }
.inter { font-family: var(--font-body); font-weight: var(--w-regular); line-height: normal; }

.c-w { color: var(--c-text-light); }
.c-b { color: var(--c-text-dark); }
.ls6 { letter-spacing: 0.6px; }
.ls-pill { letter-spacing: var(--ls-pill); }

/* Baseline match (same technique as the home page): the Figma source renders
   these absolutely-positioned text nodes with more leading above the cap height
   than the browser's line-height:normal (Cyrillic falls through to a
   taller-ascent fallback), so flowing text sits ~0.35em too high. Nudge it
   down. Scoped to desktop/tablet .dm/.inter flowing text; opt out the Latin
   logo wordmark, the big Latin price numbers and the whole phone artboard
   (which sets its own offsets). */
.bp-d .dm, .bp-d .inter,
.bp-t .dm, .bp-t .inter { transform: translateY(0.35em); }
.logo-text, .p-price { transform: translateY(0); }
.bp-p .dm, .bp-p .inter { transform: none; }

/* cards / helpers */
.card-ink   { background: var(--c-ink); }
.cover   { width: 100%; height: 100%; object-fit: cover; }
.contain { width: 100%; height: 100%; object-fit: contain; }
.p-ico   { object-fit: contain; }

/* Header/nav sits ABOVE the hero art. In Figma the nav pills are z-ordered on
   top of the Subtract hero card; in DOM order the hero <img> comes after the
   header and would otherwise paint over the active "ЦЕНЫ" pill (which sits on
   the card's black tab). Lift every header element above the content layer. */
header .abs, header img { z-index: 20; }

/* nav pill + buttons (same vocabulary as the home page) */
.pill {
  background: var(--c-black);
  color: var(--c-text-light);
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: var(--w-extrabold);
  font-variation-settings: "opsz" 14;
  font-size: 14px;
  letter-spacing: var(--ls-pill);
  display: flex; align-items: center; justify-content: center;
  line-height: normal;
}
.btn-buy {
  background: var(--c-ink);
  color: var(--c-text-light);
  border-radius: var(--r-btn);
  display: flex; align-items: center; justify-content: center;
}
.btn-login {
  background: transparent;
  color: var(--c-text-dark);
  border: 1px solid var(--c-black);
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
}
.btn-buy span, .btn-login span {
  font-family: var(--font-heading);
  font-weight: var(--w-bold);
  font-variation-settings: "opsz" 14;
}

/* ---------- prices: plan cards ---------- */
.p-card {
  position: absolute;
  background: var(--c-black);
  overflow: hidden;
}
.p-card--sub  { border: 2px solid var(--c-purple); border-radius: 41px; }
.p-card--best { border: 4px solid #84ff00; border-radius: 42px; }
.p-card > img { width: 100%; height: 100%; object-fit: cover; }
.p-veil { position: absolute; inset: 0; }
.veil20 { background: rgba(0,0,0,0.2); }
.veil49 { background: rgba(0,0,0,0.49); }

.p-badge { position: absolute; }                 /* green "лучший выбор" tag (img) */

/* buy buttons: best card = white face + green border + black text;
   others = solid black face + white text */
.p-buy {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 23px;
  background: var(--c-black);
  color: var(--c-text-light);
  font-family: var(--font-heading);
  font-weight: var(--w-extrabold);
  font-variation-settings: "opsz" 14;
  text-align: center;
}
.p-buy--best {
  background: #ffffff;
  color: var(--c-text-dark);
  border: 3px solid #84ff00;
}

/* ---------- prices: comparison cards ---------- */
.p-cmp {
  position: absolute;
  background: transparent;
  border: 1px solid var(--c-black);
  border-radius: 42px;
}

/* "C BULB VPN" phone gradient wordmark */
.p-grad {
  background: linear-gradient(90deg, #c547ff 1.88%, #51dcff 50.36%, #34c759 98.39%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- prices: footer neon panel ---------- */
.p-neon {
  position: absolute;
  overflow: hidden;
  border-radius: 42px;
  background: var(--c-black);
}
.p-neon > img { width: 100%; height: 100%; object-fit: cover; }
.p-neon > .veil { position: absolute; inset: 0; background: var(--overlay-65); }

/* footer payment-row opacity (matches home) */
.pay { opacity: 0.64; }
.fcol p { line-height: normal; }
.fcol a { display: inline-block; }

/* payment icon opacities */
.op40 { opacity: 0.4; }

/* phone hamburger bars */
.p-menu span { display: block; background: var(--grad-menu); border-radius: 2px; }
.bp-p .p-menu { background: none; border: 0; padding: 0; cursor: pointer; }

/* ============================================================
   PHONE / MOBILE  (Figma node 849:2 "Phone Цены" — 493 x 2788)
   Fluid 1:1: every coordinate is expressed in the design-pixel unit
        --u = canvas-width / 493
   via inline custom props on .pp nodes:
        --l left, --t top, --w width, --h height, --fs font-size
   ============================================================ */
.bp-p img { max-width: none; }
.bp-p .pp {
  position: absolute;
  left: calc(var(--l, 0) * var(--u));
  top:  calc(var(--t, 0) * var(--u));
  font-size: calc(var(--fs, 16) * var(--u));
}
.bp-p .pp-b {
  width:  calc(var(--w, 0) * var(--u));
  height: calc(var(--h, 0) * var(--u));
}
/* scale radii / borders / tracking with --u on phone */
.bp-p .p-card--sub  { border-width: calc(2 * var(--u)); border-radius: calc(41 * var(--u)); }
.bp-p .p-card--best { border-width: calc(4 * var(--u)); border-radius: calc(42 * var(--u)); }
.bp-p .p-buy        { border-radius: calc(23 * var(--u)); }
.bp-p .p-buy--best  { border-width: calc(3 * var(--u)); }
.bp-p .p-cmp        { border-width: calc(1 * var(--u)); border-radius: calc(42 * var(--u)); }
.bp-p .p-neon       { border-radius: calc(25 * var(--u)); }
.bp-p .p-hero-panel { position: absolute; background: var(--c-black); border-radius: calc(25 * var(--u)); }
.bp-p .ls6          { letter-spacing: calc(0.6 * var(--u)); }
.bp-p .p-menu span  { height: calc(4 * var(--u)); width: calc(37 * var(--u)); border-radius: calc(2 * var(--u)); }
.bp-p .p-menu span + span { margin-top: calc(4 * var(--u)); }