/* pricing.css — section 7 of 11 · Figma heading `Тарифы`
   desktop 3001:780 (1440 x 1413 @ 40,5376) · mobile 3001:3497 (335 x 2903 @ 0,6320.16)

   MOBILE-FIRST. Scoped rules ONLY: .pricing__* / .tariff*. No global selector, no :root, no
   .container override, no template stylesheet copy or link — this section uses NO template
   (comparison-table is ruled out at page level; nothing overflows, so no slider; no accordion,
   no marquee, no carousel) and needs NO JS. Its whole interactive surface is four <a>.

   Layer shapes, and the ONE layout switch:
     mobile  335 x 2903  — column gap 30: h2(25) + grid(2450, three stacked cards 732/783/895)
                           + spec banner(368). Cards are NATURAL height and must not be equalised.
     desktop 1440 x 1413 — column gap 40: h2(96) + grid(894, 3-up 467/466.5/466.5 gap 20, the
                           MIDDLE card inverted #232323) + spec banner(343, a 933/447 two-up).
   Both multi-column structures switch at 1024, NOT 768 (slice §11 D-11): a 3-up at 768 leaves
   181px of text per card and card 3's 92-char row would run ~8 lines. So 768-1023 renders the
   MOBILE composition at an interpolated type scale, and the only thing that can break in that
   band is TYPE — i.e. exactly the scoped tokens below, every one of which is declared three
   times (ragazzi-pdp2 shipped a badge 2x too large because 2 of 51 scoped tokens were missing
   from precisely this block).

   THE FOUR GEOMETRY FACTS THAT HOLD THE SECTION TOGETHER
   1. Figma's INSIDE / CENTER strokes do not participate in layout, CSS `border` does, so every
      stroked box is `padding: N-1` + `border: 1px`: cards 23/19 (not 24/20), the banner
      79px/19px (not 80/20). 1 + 23 + 419 + 23 + 1 = 467 and 1 + 19 + 1400 + 19 + 1 = 1440.
   2. ONE exception, measured: the DESKTOP badge pill. Its box is a fixed 40 while its own
      content is 8 + 22 + 8 = 38, and the text is drawn at y=9 because that 2px of slack centres
      it. So desktop keeps `padding-block: 8px` + border (1+8+22+8+1 = 40); mobile follows the
      normal subtraction, `7px` + border (1+7+14+7+1 = 30, text at y=8 as drawn).
   3. NO CARD CARRIES A PX HEIGHT. Figma pins all three desktop cards to 894 while their own
      content sums to 904 / 886 / 892; the row is built as a stretch grid with the CTA on
      `margin-top: auto`, so it lands at ~905 (+11px, 1px of which is fact 4). A flat px height
      inside a clamped type system is a defect class this pipeline has already paid for twice —
      at 1920 the clamped type would overflow 894, at 1024 it would leave dead space.
   4. Each card's `Line 36` divider is a height-0 Figma node with a 1px CENTER stroke: 0 in the
      Figma flow, 1 in the CSS flow. +1px per card, +3 on the mobile stack. Predicted, not a bug.

   Radius is 0 on every box here; the only rounded shapes are the two circular glyphs, which are
   `rx="11.7"` inside a 26-unit viewBox (a circle) — Figma's 60.667 is never transcribed. No
   shadow, no gradient, no raster asset: `Images: download` fetches nothing for this section. */

/* ============================================================================
   SECTION-SCOPED TOKENS — declared in ALL THREE BANDS, on `.pricing` and never on `:root`
   (the GLOBAL-SCOPE LOCK bars a section from writing :root; every consumer is a descendant, so
   inheritance delivers them identically — the same choice the other five builders made).

   Bounds are the §4.1a formulas, nothing eyeballed:
     M-min = round(M x 320/375)    M-max = round(M x 767/375)
     D-min = round(D x 1024/1520)  D-max = round(D x 1920/1520)
   Five type tokens come straight from slice §11 D-3 (the page ramp carries no D18/M12, D16/M12,
   D18/M14, D60/M32 or D20/M14 pair). The nine size/spacing tokens are the values that DIFFER
   per layer; values drawn identically on both layers stay flat px — the same rule the page
   applies to --grid-gap ("20 on BOTH layers, deliberately not clamped"), and the reason the
   CTA's 16/20 padding is flat: it makes BOTH drawn button heights land exactly (16+18+16 = 50
   mobile, 16+26+16 = 58 desktop).
   No token has min === base === max on any band (that collapse is what mechanically disables
   fluid scaling).
============================================================================ */
.pricing {
  /* --- type (D-3) --- */
  --text-tariff-badge:     clamp(10px, calc(12px + (var(--max-vw) - 375px) * 0.015), 25px);  /* D 18 */
  --text-tariff-save:      clamp(10px, calc(12px + (var(--max-vw) - 375px) * 0.015), 25px);  /* D 16 */
  --text-tariff-excl-lg:   clamp(12px, calc(14px + (var(--max-vw) - 375px) * 0.015), 29px);  /* D 18 — card 1 only */
  --text-tariff-spec-h:    clamp(27px, calc(32px + (var(--max-vw) - 375px) * 0.015), 65px);  /* D 60 */
  --text-tariff-spec-body: clamp(12px, calc(14px + (var(--max-vw) - 375px) * 0.015), 29px);  /* D 20 */

  /* --- size / spacing that differs per layer --- */
  --pricing-stack-gap:  clamp(26px, calc(30px + (var(--max-vw) - 375px) * 0.015), 61px);  /* D 40 */
  --tariff-pad:         clamp(16px, calc(19px + (var(--max-vw) - 375px) * 0.015), 39px);  /* D 23 (= Figma 24 − 1px border) */
  --tariff-gap:         clamp(17px, calc(20px + (var(--max-vw) - 375px) * 0.015), 41px);  /* D 24 — card inner column */
  --tariff-price-gap:   clamp(4px,  calc(5px  + (var(--max-vw) - 375px) * 0.015), 10px);  /* D 10 — price row ↔ note */
  --tariff-list-gap:    clamp(13px, calc(15px + (var(--max-vw) - 375px) * 0.015), 31px);  /* D 20 — label ↔ rows */
  --tariff-row-gap:     clamp(4px,  calc(5px  + (var(--max-vw) - 375px) * 0.015), 10px);  /* D 8 — row ↔ row */
  --tariff-ico:         clamp(17px, calc(20px + (var(--max-vw) - 375px) * 0.015), 41px);  /* D 26 — see note below */
  --tariff-mark-h:      clamp(42px, calc(49px + (var(--max-vw) - 375px) * 0.015), 100px); /* D 62 — card 3 SIRKA mark */
  --pricing-spec-pad:   clamp(25px, calc(29px + (var(--max-vw) - 375px) * 0.015), 59px);  /* D 79 (= Figma 80 − 1px border) */

  /* --- two values drawn IDENTICALLY on both layers that must still scale in the DESKTOP band ---
     MEASURED cause, not a precaution. Card 3's head row is at exactly 100% capacity in Figma at
     1520: `Partner` 119.91 + gap 10 + badge 243 = 372.91 = the text column, to the pixel. Cards 1
     and 2 are the same (119.3 + 10 + 147.8 = 277.1 at 1024). So every px that does NOT shrink
     with the card is borrowed from the name, and the badge's 2x9px padding + the 10px gap do not:
     at 1024 the card is 34% narrower while they stay put, which pushed `Partner` 17.8px past its
     63px column — 7.8px INTO the badge, a visible collision across 1024-1150.
     Flat px inside the desktop band is the defect class this pipeline has already paid for
     (`--lh-btn-shop` grew a pill 35% at 1024), and §4.1a is explicit that the desktop band scales
     LAYOUT AND TYPE TOGETHER. So these two scale from 1024 up; the mobile and pseudo-tablet bands
     keep the drawn flat value, and at 1520 both resolve to exactly 9 / 10 — the drawn numbers are
     untouched. (The section's other flat 10s / 4s / 16s are NOT under measured pressure and stay
     flat, matching the page's own --grid-gap rule; the general question is reported to the driver
     rather than answered by one section.) */
  --tariff-badge-pad-x: 9px;                /* Figma 10 − 1px border, both layers */
  --tariff-head-gap:    10px;               /* head / title-row / partner-grid gap, both layers */

  /* The glyph box is fluid on purpose. Figma draws 20 (mobile) and 26 (desktop) with a 2.6 /
     2.0 INSIDE stroke — exactly 10% of the box. Because both are ONE scaled viewBox, making the
     BOX fluid keeps that 10% ratio at every width for free, which a pair of hand-tuned SVGs or
     a discrete 20/26 switch would lose the moment the type clamps up past 1520. */

  /* A colour, not a ramp, so it is declared once: `что входит:` / `что не входит:` fill
     #25262780 on 6 nodes and §4.4's alpha ramp has no 50% of #252627 (it has --c-ink-50, the
     50% of #232323). The gate compares exact hex, so substituting the near-identical token
     would be a manufactured P1 either way — the drawn value ships, scoped. Card 2's label is
     #ffffff80, which DOES exist as --c-white-50 and is used as the page token there. */
  --pricing-c-list-label: rgba(37, 38, 39, 0.5);
}

/* PSEUDO-TABLET 768-1023 — INTERPOLATED, nothing is drawn here. MANDATORY: a token defined in
   only two bands silently inherits the wrong one across the third. This band has no layout of
   its own by decision (§11 D-11), so these tokens are the entire risk surface. */
@media (min-width: 768px) {
  .pricing {
    --text-tariff-badge:     clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 18px);
    --text-tariff-save:      clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 16px);
    --text-tariff-excl-lg:   clamp(14px, calc(14px + (var(--max-vw) - 768px) * 0.025), 18px);
    --text-tariff-spec-h:    clamp(32px, calc(32px + (var(--max-vw) - 768px) * 0.025), 60px);
    --text-tariff-spec-body: clamp(14px, calc(14px + (var(--max-vw) - 768px) * 0.025), 20px);

    --pricing-stack-gap:  clamp(30px, calc(30px + (var(--max-vw) - 768px) * 0.025), 40px);
    --tariff-pad:         clamp(19px, calc(19px + (var(--max-vw) - 768px) * 0.025), 23px);
    --tariff-gap:         clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 24px);
    --tariff-price-gap:   clamp(5px,  calc(5px  + (var(--max-vw) - 768px) * 0.025), 10px);
    --tariff-list-gap:    clamp(15px, calc(15px + (var(--max-vw) - 768px) * 0.025), 20px);
    --tariff-row-gap:     clamp(5px,  calc(5px  + (var(--max-vw) - 768px) * 0.025), 8px);
    --tariff-ico:         clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 26px);
    --tariff-mark-h:      clamp(49px, calc(49px + (var(--max-vw) - 768px) * 0.025), 62px);
    --pricing-spec-pad:   clamp(29px, calc(29px + (var(--max-vw) - 768px) * 0.025), 79px);

    /* Still the drawn flat value: this band renders the mobile composition, where 9 / 10 is what
       Figma draws. Re-declared so neither token can inherit a formula from another band. */
    --tariff-badge-pad-x: 9px;
    --tariff-head-gap:    10px;
  }
}

/* DESKTOP 1024+ — the drawn layer, proportional to --vw-base 1520 and capped by --max-vw. */
@media (min-width: 1024px) {
  .pricing {
    --text-tariff-badge:     clamp(12px, calc(18px * (var(--max-vw) / var(--vw-base))), 23px);
    --text-tariff-save:      clamp(11px, calc(16px * (var(--max-vw) / var(--vw-base))), 20px);
    --text-tariff-excl-lg:   clamp(12px, calc(18px * (var(--max-vw) / var(--vw-base))), 23px);
    --text-tariff-spec-h:    clamp(40px, calc(60px * (var(--max-vw) / var(--vw-base))), 76px);
    --text-tariff-spec-body: clamp(13px, calc(20px * (var(--max-vw) / var(--vw-base))), 25px);

    --pricing-stack-gap:  clamp(27px, calc(40px * (var(--max-vw) / var(--vw-base))), 51px);
    --tariff-pad:         clamp(15px, calc(23px * (var(--max-vw) / var(--vw-base))), 29px);
    --tariff-gap:         clamp(16px, calc(24px * (var(--max-vw) / var(--vw-base))), 30px);
    --tariff-price-gap:   clamp(7px,  calc(10px * (var(--max-vw) / var(--vw-base))), 13px);
    --tariff-list-gap:    clamp(13px, calc(20px * (var(--max-vw) / var(--vw-base))), 25px);
    --tariff-row-gap:     clamp(5px,  calc(8px  * (var(--max-vw) / var(--vw-base))), 10px);
    --tariff-ico:         clamp(18px, calc(26px * (var(--max-vw) / var(--vw-base))), 33px);
    --tariff-mark-h:      clamp(42px, calc(62px * (var(--max-vw) / var(--vw-base))), 78px);
    --pricing-spec-pad:   clamp(53px, calc(79px * (var(--max-vw) / var(--vw-base))), 100px);

    /* Proportional from here up — see the base block for the measurement that requires it.
       At 1520 these resolve to exactly 9px and 10px, so every drawn desktop box is unchanged. */
    --tariff-badge-pad-x: clamp(6px, calc(9px  * (var(--max-vw) / var(--vw-base))), 11px);
    --tariff-head-gap:    clamp(7px, calc(10px * (var(--max-vw) / var(--vw-base))), 13px);
  }
}

/* ============================================================================
   MOBILE BASE (0-767) — 3001:3497, a 335-wide column, gap 30, padding 0
============================================================================ */

/* Pattern A, gutter-bound: no fill on the section frame, nothing paints outside the content box,
   `padding [0,0,0,0]` on BOTH layers — the 20/40px gutter is `.container`'s and never a
   `padding` shorthand from here. The mobile section-to-section rhythm (50, the parent column's
   own auto-layout gap) is the page default in base.css and is deliberately NOT restated: the
   brief's `--pricing-mt: 0` mobile value would have ZEROED it, because in CSS that boundary is
   owned by `section + section`, not by a parent's gap. */
.pricing {
  display: flex;
  flex-direction: column;
  gap: var(--pricing-stack-gap);
}

/* The section-local glyph sprite must occupy nothing in the flow. */
.pricing__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 3001:3498 / 3001:782. `.t-h2` carries size, weight, tracking and --c-heading per band. */
.pricing__title {
  margin: 0;
}

/* ---------- the card stack / row ---------- */
/* 3001:3499: vertical, gap 20. Mobile heights are genuinely different (732 / 783 / 895) and
   close on the drawn 2450 exactly — natural height, never equalised. */
.pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}

/* 3001:3500 / 3001:3719: `border: 1px solid #2323234d` + `padding: 19px` → 1+19+295+19+1 = 335.
   `display: flex; column` with the CTA on `margin-top: auto` is what pins the CTA to the card
   bottom on BOTH layers: card 1 simply overflows its box in Figma and card 2 uses
   SPACE_BETWEEN, but both express the same intent, and a literal `space-between` would also
   spread the head / price / list blocks apart. On mobile there is no free space, so `auto`
   resolves to 0 and the drawn 20px gap stands. */
.tariff {
  display: flex;
  flex-direction: column;
  gap: var(--tariff-gap);
  padding: var(--tariff-pad);
  border: 1px solid var(--c-ink-30);
  border-radius: 0;
  color: var(--c-ink);
}

/* Card 2 carries NO border and a #232323 fill, so its padding absorbs the missing 1px and its
   inner content width stays identical to its neighbours' (20 + 295 + 20 = 335). Every ink
   inside it flips through `color` inheritance — that is why the ⊕ glyphs, the divider and the
   row text need no per-card colour rule of their own. */
.tariff--scale {
  border: 0;
  padding: calc(var(--tariff-pad) + 1px);
  background: var(--c-ink);
  color: var(--c-bg);
}

/* ---------- head ---------- */
/* 3001:3508 / 3001:792 — vertical, gap 10 (identical on both layers → flat px). */
.tariff__head {
  display: flex;
  flex-direction: column;
  gap: var(--tariff-head-gap);
}

/* 3001:3509 / 3001:793 — horizontal, gap 10, align CENTER. */
.tariff__title-row {
  display: flex;
  align-items: center;
  gap: var(--tariff-head-gap);
}

.tariff__name {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
  color: inherit;
}

/* 3001:3511 / 3001:795. `nowrap` + `flex: 0 0 auto` is MUST-APPLY: without it the long
   `Максимум результата` label wraps and breaks the drawn 30 / 40 row height. Radius 0 — the
   `pill` name in Figma is not a rounded shape anywhere on this page. */
.tariff__badge {
  flex: 0 0 auto;
  justify-self: start;
  padding-block: 7px;                       /* mobile: Figma 8 − 1px border → box 30 */
  padding-inline: var(--tariff-badge-pad-x);
  border: 1px solid var(--c-ink-30);
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-tariff-badge);
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}
.tariff--scale .tariff__badge {
  border-color: var(--c-bg);
  background: var(--c-bg);
  color: var(--c-ink);
}
.tariff--partner .tariff__badge {
  border-color: var(--c-ink);
  background: var(--c-ink-20);
}

.tariff__sub {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-alt);
  line-height: var(--lh-body-alt);
  letter-spacing: var(--ls-body-alt);
  color: inherit;
}

/* Card 3's flat head (§11 D-1): badge · mark · name · sub as four direct children, laid out by
   grid areas because the badge RE-PARENTS between layers and `order:` cannot express that.
   Mobile: badge on its own row first (justifyContent MAX in Figma), then mark beside the
   name/sub block with the mark BOTTOM-aligned (alignItems MAX, both 49 tall).
   30 + 10 + 22 + 10 + 17 = 89, the drawn head height. */
.tariff__head--partner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "badge badge"
    "mark  name"
    "mark  sub";
  gap: var(--tariff-head-gap);
  align-items: center;
}
.tariff__head--partner .tariff__badge { grid-area: badge; }
.tariff__head--partner .tariff__name  { grid-area: name; }
.tariff__head--partner .tariff__sub   { grid-area: sub; }
.tariff__mark {
  grid-area: mark;
  align-self: end;                          /* mobile: alignItems MAX */
  display: block;
  flex: 0 0 auto;
  width: calc(var(--tariff-mark-h) * 0.5741);   /* 28.13/49 = 35.593/62 = 0.5741 on both layers */
  height: var(--tariff-mark-h);
  color: var(--c-ink);
}
.tariff__mark svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

/* ---------- the `Line 36` divider ---------- */
/* height 0 + a 1px border = the +1px per card recorded in the header. `currentColor` covers all
   three cards at once: #232323 on cards 1 and 3, #ffffff on the inverted card 2. */
.tariff__rule {
  display: block;
  height: 0;
  border-top: 1px solid currentColor;
}

/* ---------- price block ---------- */
/* 3001:3515 / 3001:799 — vertical; the row↔note gap is 5 mobile / 10 desktop. */
.tariff__price {
  display: flex;
  flex-direction: column;
  gap: var(--tariff-price-gap);
}

/* `align-items: flex-end` is non-negotiable: Figma is alignItems MAX and every child's BOTTOM
   edge lands on the row's bottom (desktop amount @y=0 h=50, struck wrapper @y=28 h=22, chip
   @y=23 h=27 — all bottom at 50). A default `center` misplaces both. */
.tariff__price-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.tariff__amount-group {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}
.tariff__amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-price);
  line-height: var(--lh-price);
  letter-spacing: var(--ls-price);          /* per-layer: −6.25% mobile / −4.76% desktop */
  color: inherit;
}
/* 3001:3519 / 3001:803 — a real 4px-padded box around the struck price (4 + 14 + 4 = 22). */
.tariff__was-wrap {
  display: flex;
  align-items: center;
  padding-block: 4px;
}
.tariff__was {
  font-family: var(--font-body);
  font-weight: 600;                         /* page --text-meta lists 400/500; the node is 600 */
  font-size: var(--text-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-meta);
  text-decoration: line-through;            /* Figma textDecoration: STRIKETHROUGH */
  text-transform: uppercase;                /* textCase UPPER on the struck price only */
  color: inherit;
}

/* 3001:3521 / 3001:805 — the amount group is a fixed 290 in a 419 row, so the chip is flush
   right: 419 − 119 − 10 = 290. Built as `margin-left: auto`, verified against all six instances. */
.tariff__save {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 4px 6px;
  border-radius: 0;
  background: var(--c-ink-30);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-tariff-save);
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink);
}
.tariff--scale .tariff__save {
  background: var(--c-white-30);
  color: var(--c-bg);
}

.tariff__note {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-alt);
  line-height: var(--lh-body-alt);
  letter-spacing: var(--ls-body-alt);
  color: inherit;
}

/* Card 3's 2-line stack (3001:3737 / 3001:1020): gap 7, padding-block 4, both flat on both
   layers. `на старте` carries NO textCase and NO strikethrough — only the price below it does,
   which is why `text-transform` lives on .tariff__was and not on the stack. */
.tariff__start {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-block: 4px;
}
.tariff__start-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-meta);
  color: inherit;
}
.tariff__start .tariff__was { padding: 0; }

/* Card 3's 2-line profit note replaces the one-line note. Figma's alignItems CENTER is a no-op
   (both texts are the full column width with textAlign LEFT), so they stay left-aligned. */
.tariff__profit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-alt);
  line-height: var(--lh-body-alt);
  letter-spacing: var(--ls-body-alt);
  color: inherit;
}
.tariff__profit-line { font-weight: 600; }
strong.tariff__profit-line { font-weight: 700; }   /* 3001:1026 / 3001:3743 is drawn at 700 */

/* ---------- feature lists ---------- */
/* 3001:3524 / 3001:808 — label ↔ rows gap 15 mobile / 20 desktop. */
.tariff__list {
  display: flex;
  flex-direction: column;
  gap: var(--tariff-list-gap);
}
.tariff__list--excl { color: var(--c-ink-70); }
.tariff--scale .tariff__list--excl { color: var(--c-white-70); }

/* `--text-micro` matches the drawn D14/M12 and ls 0% exactly; only weight and line-height are
   overridden, and neither is ever clamped, so no three-band risk is created by reusing it. */
.tariff__list-label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-micro);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--pricing-c-list-label);
}
.tariff--scale .tariff__list-label { color: var(--c-white-50); }

.tariff__rows {
  display: flex;
  flex-direction: column;
  gap: var(--tariff-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rows are drawn at 1, 2 and 3 lines and the glyph is vertically CENTRED in each
   (26 in a 36 box at y=5). */
.tariff__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tariff__ico {
  flex: 0 0 auto;
  width: var(--tariff-ico);
  height: var(--tariff-ico);
  color: inherit;
}
/* MUST-APPLY. Figma's own output is `flex-[1_0_0] min-w-px`; a flex item defaults to
   `0 0 auto` and sizes to its content, so without this the 92-char row in card 3 renders on one
   line and blows the card ~600px wide. No per-item max-width is needed — the text column is a
   share of the row, not content-sized. */
.tariff__row-text {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  white-space: normal;
  color: inherit;
}
/* Card 2 row 1 / card 3 row 1 are textCase UPPER in Figma; the source string ships as typed. */
.tariff__row-text--upper { text-transform: uppercase; }
/* Card 3 row 2 is TWO real text nodes (3001:1042 / 3001:3759); the second is drawn at
   lh 120% / ls −3% while the first is 115% / −5%. */
.tariff__row-lines {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.tariff__row-lines .tariff__row-text { flex: 0 0 auto; }
.tariff__row-text--alt {
  line-height: var(--lh-body-alt);
  letter-spacing: var(--ls-body-alt);
}
/* 3001:998 / 3001:3714 fills #bdbdbd while its three siblings fill #ffffffb2 — on BOTH layers.
   The TEXT only: the ⊗ glyph keeps the row's inherited --c-white-70. */
.tariff__row--muted .tariff__row-text { color: var(--c-muted); }

/* Card 1's three DESKTOP excluded rows are 18px while its ten included rows are 16 and card 2's
   four excluded rows are 16. One card, three nodes, desktop only (mobile is 14 for both lists,
   which is what this token's M-base is) — honoured, not normalised to 16. */
.tariff--launch .tariff__list--excl .tariff__row-text { font-size: var(--text-tariff-excl-lg); }

/* ---------- card CTA ---------- */
/* 3001:3608 / 3001:892 — padding 16/20 flat on both layers, space-between, align center, radius
   0. `margin-top: auto` pins it to the card bottom on the stretched desktop row.
   The label's line-height is `normal`, NOT 1: all eight CTA labels in this section measure
   box ÷ size = 1.300 desktop / 1.286 desktop-mobile, i.e. Figma AUTO leading (FD-175). The page
   token --lh-btn is already `normal`, so `.t-btn` is correct as-is; writing `1` would shrink
   every label box by 6px / 4px and break the drawn 58 / 50 button heights. */
.tariff__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  border-radius: 0;
  background: var(--c-ink);
  color: var(--c-bg);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.tariff--scale .tariff__cta {
  background: var(--c-bg);
  color: var(--c-ink);
}
.tariff__cta-label { color: inherit; }

/* ---------- spec-price banner ---------- */
/* 3001:3846 / 3001:1129. The 1px #000000 CENTER stroke over the #232323 fill is near-invisible
   and deliberate: --c-hairline is a real, separate value from --c-ink and the gate compares
   exact hex, so it is kept. `padding: 29px 19px` + border → 1+29+308+29+1 = 368 and
   1+19+295+19+1 = 335 on mobile. */
.pricing__spec {
  padding-block: var(--pricing-spec-pad);
  padding-inline: 19px;
  border: 1px solid var(--c-hairline);
  border-radius: 0;
  background: var(--c-ink);
  color: var(--c-bg);
}
/* 3001:3847 — one column, gap 40 (a mobile-composition value; above 1024 the two blocks become
   a row and this gap is replaced, not interpolated). */
.pricing__spec-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
}
.pricing__spec-left {
  display: flex;
  flex-direction: column;
  gap: 15px;                                /* drawn 15 on both layers */
}
.pricing__spec-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-tariff-spec-h);
  line-height: 1;                           /* real 100%: 96 box ÷ 3 lines ÷ 32 = 1.00 */
  letter-spacing: -0.04em;                  /* desktop is −6% — see the 1024 block */
  text-transform: uppercase;
  color: inherit;
}
.pricing__spec-lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-tariff-spec-body);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: inherit;
}
/* 3001:3851 — gap 20 as drawn on mobile. On desktop the same `space-between` yields the drawn
   79px because the column is stretched to the left column's 183 (a fixed box in Figma, not the
   declared 15) — one rule covers both layers. */
.pricing__spec-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.pricing__spec-ask {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-h5);                /* an exact page-token match: D20 / M16 */
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-h5);
  text-transform: uppercase;
  color: inherit;
}
/* 3001:3853 / 3001:1136 — fill #ffffff, label #252627 (--c-ink-alt, NOT --c-ink: the gate
   compares exact hex), padding 15/35 flat on both layers, radius 0. */
.pricing__spec-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 35px;
  border-radius: 0;
  background: var(--c-bg);
  color: var(--c-ink-alt);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/* Weight 600, not the token's 800 — consistent on BOTH layers, so drawn intent, not drift. */
.pricing__spec-cta-label {
  font-weight: 600;
  color: inherit;
}

/* ---------- states (§10 BA-1: none is drawn, so this is the recorded default) ----------
   The page is monochrome with no shadow, so inverting the existing pair is the only hover that
   stays inside the drawn palette. The hairline that keeps an inverted button visible is an
   INSET box-shadow, never a border: a border would grow the button by 2px on hover, and the
   page-level norm in components.css is explicit that no hover may change geometry.
   The higher-specificity `opacity: 1` cancels that page-level opacity hover on these four
   controls only, so the two treatments cannot stack into a muddy half-tone. */
@media (hover: hover) {
  .pricing .tariff__cta:hover,
  .pricing .pricing__spec-cta:hover { opacity: 1; }

  .pricing .tariff--launch .tariff__cta:hover,
  .pricing .tariff--partner .tariff__cta:hover {
    background: var(--c-bg);
    color: var(--c-ink);
    box-shadow: inset 0 0 0 1px var(--c-ink);
  }
  .pricing .tariff--scale .tariff__cta:hover,
  .pricing .pricing__spec-cta:hover {
    background: var(--c-ink);
    color: var(--c-bg);
    box-shadow: inset 0 0 0 1px var(--c-bg);
  }
}
/* base.css gives every control a 2px --c-ink focus ring; on the two light-on-dark controls that
   ring would be invisible against its own surround, so it flips there. */
.tariff--scale .tariff__cta:focus-visible,
.pricing__spec-cta:focus-visible { outline-color: var(--c-bg); }

/* ============================================================================
   DESKTOP 1024+ — the drawn 3-up with the inverted middle card, and the 933/447 banner.
   This is the section's ONLY layout switch; 768-1023 keeps the mobile composition.
============================================================================ */
@media (min-width: 1024px) {
  /* The drawn `how-it-works → pricing` boundary is 101, one of the five non-120 desktop gaps
     (the page total 10011 closes exactly, so they must not be averaged to 120). Same single
     property as the page default in base.css, so this REPLACES it rather than adding to it.
     D-min = round(101 × 1024/1520) = 68 · D-base = 101 · D-max = round(101 × 1920/1520) = 128.
     The mobile 50 is page-owned and untouched. */
  .pricing {
    margin-block-start: clamp(68px, calc(101px * (var(--max-vw) / var(--vw-base))), 128px);
  }

  /* 3001:783: three columns of (1440 − 40)/3 = 466.667 — expressed as a share of the content
     box, not clamped px, so the percentage survives the 1024 seam and the --max-vw cap with no
     second set of numbers. `stretch` is what Figma paints (all three children pinned to 894),
     even though the frame reports alignItems MIN: flex-start with natural heights would leave
     ragged bottoms at 904 / 886 / 892. */
  .pricing__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  /* Desktop badge: keep the full 8px, do NOT subtract the border (see fact 2 in the header). */
  .tariff__badge { padding-block: 8px; }

  /* The badge re-parents: beside the name on row 1, with the mark spanning both rows and
     vertically CENTRED (62 in a 69 box → y=3.5). `1fr` on the name column reproduces Figma's
     `flex: 1 1 0` exactly: 372.91 − 10 − 243 = 119.91, the drawn name width. */
  .tariff__head--partner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "mark name badge"
      "mark sub  sub";
  }
  .tariff__mark { align-self: center; }

  /* 3001:1130: a 1400-wide inner row, 933 / 447 = 66.643% / 31.929%, the 1.428% remainder being
     the drawn 20px gap — so `space-between` with no gap reproduces it and cannot overflow when
     the container is narrower than 1400. `stretch` gives the right column the left column's
     183px height, which is what turns its `space-between` into the drawn 79px. */
  .pricing__spec-inner {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
  }
  .pricing__spec-left { flex: 0 1 66.643%; }
  .pricing__spec-right { flex: 0 1 31.929%; }

  .pricing__spec-title { letter-spacing: -0.06em; }

  /* MEASURED, not assumed. `--lh-btn: normal` is correct — Figma's `100%` on --text-btn is AUTO
     leading, and at the MOBILE size Blink's `normal` for Onest lands on the drawn 18 exactly
     (button 16+18+16 = 50 ✓, spec button 15+18+15 = 48 ✓). At the DESKTOP size it rounds the
     other way: 25 where Figma draws 26, which shipped 57 / 55 instead of the drawn 58 / 56.
     So the drawn ratio (26 ÷ 20 = 1.3) is pinned HERE, in the desktop band only, exactly as the
     `hero` build did for the same Blink-vs-Figma rounding. The mobile and pseudo-tablet bands
     keep `normal`, where it is already right. */
  .tariff__cta-label,
  .pricing__spec-cta-label { line-height: 1.3; }

  /* MUST-APPLY: the lead is drawn 562 wide inside the 933 column. Without the cap it flows to
     the full column and the banner reads wrong. 562 / 933 = 60.236% — a share of the column, so
     it scales instead of freezing at one width. */
  .pricing__spec-lead { max-width: 60.236%; }
}