/* ==========================================================================
   AKA CONNECT — pricing page
   Figma node 134:6165 (1470x2500): hero at top 161 (w 694), free-trial band
   at top 469 (w 1310), tier row at top 589 (w 1430, p 60), white-label panel
   at top 1427 (1310x493).
   ========================================================================== */

/* ---------- hero ---------- */

.p-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 694px;
  margin: 51px auto 0;          /* header is 110px tall; design hero top is 161 */
  padding: 0 20px;
  text-align: center;
}
.p-hero__heading { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.p-hero__title {
  font: var(--h1);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
.p-hero__lead {
  max-width: 408px;
  font: var(--t1);
  letter-spacing: 0;
  color: var(--ink);
}

/* ---------- free-trial band — Figma 278:13612 ---------- */

.free-band {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--content);
  margin: 60px auto 0;
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--gray-purple);
  border-radius: var(--r-plan);
}
.free-band__head { display: none; }

.free-band__price {
  font: var(--h-num);
  letter-spacing: var(--ls-num);
  color: var(--ink);
  white-space: nowrap;
}
.free-band__limits {
  display: flex;
  flex-direction: column;
  gap: 15px;
  font: var(--t-body);
  letter-spacing: var(--ls-body);
  color: var(--ink);
}
.free-band__feats { display: flex; gap: 40px; }
.free-band__feats .feat { color: var(--ink-text); }
.free-band .btn-pill { flex: none; }

/* ---------- tier row — Figma 134:6167 ---------- */

/* A grid rather than a row of flex cards, so the four cards can share row
   tracks: the plan blurbs wrap to different depths and Enterprise prices a
   word where the others price a number, which left every card's button — and
   its feature list under it — at its own height. */
.tiers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 60px var(--gutter);
}

/* "The most popular" sits on the highlighted card itself, so it travels with
   it once the row turns into a swipeable strip on a phone */
.tiers__badge {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
}

.tier {
  position: relative;
  /* head, price, limits, button, features, note — six rows taken from the
     parent, so the same band of each card lines up with its neighbours' and
     every card ends up the same height without anyone being stretched */
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 30px;
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--r-plan);
}
/* the wrapper would hide its children from the subgrid, and it draws nothing */
.tier__body { display: contents; }
.tier__head { display: flex; flex-direction: column; gap: 20px; color: var(--gray-purple); }
.tier__name { font: var(--h2); letter-spacing: 0; }
.tier__desc { font: var(--t-med); letter-spacing: 0; }

.tier__price {
  display: flex;
  align-items: flex-end;
  padding: 10px 0;
  color: var(--ink-text);
  white-space: nowrap;
  --price-size: 65px;
  /* so the Enterprise word below can measure itself against the card */
  container-type: inline-size;
}
.tier__amount { font: var(--h-num); font-size: var(--price-size); letter-spacing: var(--ls-num); }

/* The Enterprise price is a word where the others are numbers, and it is the
   one string here that cannot be trusted to fit: at the numbers' 65px "Custom"
   is 222px wide, uz "Individual" is 258px and ru "Индивидуально" is 453px —
   in a card that narrows to 237px around 1300px of viewport.

   So it takes the numbers' size and gives it up only as far as its own card
   requires. --word-fit is 100 ÷ the word's width at 1px, which makes 100cqi
   exactly one cardful; English and Uzbek reach the full 65px at every width
   the grid actually produces, and only Russian comes down. */
.tier__amount--word { font-size: min(var(--price-size), var(--word-fit)); }
:root           { --word-fit: 13.5cqi; }   /* ru, the longest — and the safe default */
html[lang="en"] { --word-fit: 28cqi; }
html[lang="uz"] { --word-fit: 24cqi; }
.tier__per { font: var(--h3); letter-spacing: 0; }

.tier__limits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--ink-text);
}
.tier .feat { color: var(--ink-text); }
.tier__note {
  font: var(--t-med);
  letter-spacing: 0;
  text-align: center;
  color: var(--gray-purple);
}

/* the highlighted tier — Figma 134:6188 */
.tier--dark {
  background: var(--ink);
  border-color: transparent;
}
.tier--dark .tier__head { color: var(--gray-purple); }
.tier--dark .tier__name,
.tier--dark .tier__price,
.tier--dark .tier__limits,
.tier--dark .feat { color: var(--white); }

/* ---------- white label — Figma 134:6258 ---------- */

.wl {
  position: relative;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--content);
  margin: 0 auto 80px;
  padding: 80px 60px;
  overflow: hidden;
  background: var(--ink);
  border-radius: 40px;
  color: var(--white);
}
/* Background bloom — Figma 134:6259/6260/6261 are blurred radial ellipses.
   Reproduced as CSS gradients with the same stops and opacity: the gradient
   already resolves to the panel colour before its edge, so the 41px Gaussian
   blur in the export is redundant and three large blur filters are not worth
   the paint cost. */
.wl__glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: .3;
  background: radial-gradient(closest-side,
              #66538C 0%, #D3BDFF 40.4%, #1E1E1E 93.3%, rgba(30, 30, 30, 0) 100%);
}
.wl__glow--1 { right: -829px; top: -79px;  width: 1040px; height: 596px; }
.wl__glow--2 { left: -833px;  top: -461px; width: 1289px; height: 765px; }
.wl__glow--3 {
  left: 50%; top: 81px;
  width: 596px; height: 1130px;
  transform: translateX(-50%);
  opacity: .15;
}

.wl__grid {
  position: relative;
  display: grid;
  /* Figma 134:6258 splits its 1190 content as 527 copy / 78 gutter / 585 card.
     Our band is wider, so both tracks are fr — a fixed left column would hand
     all the extra width to the card and blow its proportion out. */
  grid-template-columns: minmax(0, 527fr) minmax(0, 585fr);
  gap: 78px;
  align-items: start;
}

.wl__title {
  margin-top: 10px;
  font: var(--h2);
  letter-spacing: 0;
  color: var(--white);
}
.wl__lead {
  margin-top: 30px;
  max-width: 456px;
  font: var(--t1);
  letter-spacing: 0;
  color: var(--gray-purple);
}
.wl__cta { margin-top: 40px; }

.wl__card {
  position: relative;
  padding: 30px;
  border-radius: var(--r-plan);
  /* Figma 134:6264: `bg-gradient-to-l from-[rgba(54,56,66,0)] from-[31.731%]
     to-[#363842]`. With `to left` the from-stop sits at the RIGHT edge, so the
     card is solid on the left and fades out to the right — not the reverse. */
  background: linear-gradient(to left, rgba(54, 56, 66, 0) 31.7%, #363842);
}
.wl__card .feat {
  gap: 15px;
  font: var(--t-body);
  letter-spacing: var(--ls-body);
  color: var(--white);
}
.wl__card .feat li { font: var(--t-body); letter-spacing: var(--ls-body); }
/* Figma 134:6273 hangs the badge off the card's top-LEFT corner: the card
   starts at x=665 and the badge at x=635, 23px above its top edge. */
.wl__badge { position: absolute; left: -30px; top: -23px; z-index: 1; }

/* ---------- responsive ---------- */

@media (max-width: 1380px) {
  /* the cards wrap once four no longer fit; each row of them keeps its own set
     of tracks, so they stay aligned with the cards beside them */
  .tiers { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); padding: 40px var(--gutter); }
  .free-band { flex-wrap: wrap; }
  .wl { padding: 60px 40px; }
  .wl__grid { grid-template-columns: 1fr; gap: 40px; }
  .wl__badge { left: 0; }
}

@media (max-width: 780px) {
  /* the mobile design left-aligns the hero rather than centring it */
  .p-hero { margin-top: 24px; gap: 24px; align-items: stretch; text-align: left; }
  .p-hero__lead { max-width: none; }
  .p-hero__title { font-size: 38px; }
  .free-band__price { font-size: clamp(36px, 13.5vw, 62px); }
  /* the card was reading as airier than the tiers beside it: same block gap,
     and the limits carry the weight the design gives them */
  .free-band { gap: 30px; }
  .free-band__limits { font-size: 18px; }
  .tier__limits { font-size: 16px; }
  .free-band__feats { flex-direction: column; gap: 10px; }
  .free-band .btn-pill { width: 100%; }
  /* ---- plans, phone — Figma 2131330069 ----
     The design swipes the plans sideways rather than stacking them, free trial
     first. The wrapper is the scroller and `.tiers` steps out of the way with
     display: contents, so its four cards join the free trial as siblings in
     one strip. Every slide is the width of the white-label card below, and
     snapping is mandatory so a swipe always settles on a whole card.
     Scrolling is reachable from the keyboard through the cards' own buttons,
     which pull their card into view as they take focus. */
  .plans {
    display: flex;
    align-items: stretch;
    /* matching the gutter puts the next card's edge exactly at the screen's,
       so no sliver of it shows beside the panel below when a short card is
       pulled up against it */
    gap: var(--gutter);
    /* the scroller clips vertically too, so the top padding has to clear the
       badge that hangs above the highlighted card */
    padding: 52px var(--gutter) 32px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    /* pricing.js pulls this up so the panel below follows the card in view */
    transition: margin-bottom .25s ease;
  }
  .tiers { display: contents; }
  /* with .tiers out of the way there is no parent grid left to borrow tracks
     from, so the card goes back to being a column in its own right */
  .tier {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
  }
  .tier__body { display: flex; flex-direction: column; gap: 30px; }
  .free-band,
  .tier {
    flex: 0 0 auto;
    width: 100%;              /* the scroller's content box, i.e. the .wl width */
    max-width: none;
    margin: 0;
    scroll-snap-align: start;
  }
  /* the free trial reads as one of the plan cards once it is in the strip.
     It carries no closing note, so stretching it to the tallest card left a
     block of empty space under its feature list — it takes its own height. */
  .free-band {
    align-self: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 30px;
    border-color: var(--card-border);
  }
  /* the design puts the action above the feature list, as the tiers do */
  .free-band__feats { order: 1; }
  /* as a card in the strip it carries a plan name and line, like the tiers */
  .free-band__head { display: flex; flex-direction: column; gap: 4px; }
  .free-band__name {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--gray-purple);
  }
  .free-band__desc {
    font: var(--t-med);
    letter-spacing: 0;
    color: var(--gray-purple);
  }

  /* a phone's scrollbar would sit across the cards; the strip snaps, so the
     cards themselves show where you are */
  .plans { scrollbar-width: none; }
  .plans::-webkit-scrollbar { display: none; }
  /* over the card's top-right corner, as the design draws it */
  .tiers__badge {
    left: auto;
    right: -10px;
    top: -36px;
    transform: rotate(7deg);
  }
  /* The design gives the price the same weight it has on a wide screen, so it
     scales with the viewport up to a cap set by the longest unbreakable string
     rather than by English — "Bepul sinov" for the plans below. The Enterprise
     word measures itself against the card, so it follows this size too and
     drops under it only where its own translation would not fit. */
  .tier__price { white-space: normal; --price-size: clamp(36px, 13.5vw, 62px); }
  .tier__amount { min-width: 0; }
  .tier__per { white-space: nowrap; }
  .wl { padding: 40px 22px; border-radius: 28px; }
  .wl__title { font-size: 28px; }
  .wl__badge { position: static; display: inline-flex; margin-bottom: 16px; }
}