/* Start:/referral/style.css?179050853073916*/
/* ===========================================================================
   referral.css — GATE referral landing page
   ASSEMBLED from .omc/build/referral/sections/*.css — edit those fragments and
   re-run assembly rather than editing this file directly.
   Load order: template.css -> about.css (shared chrome) -> this file.
   =========================================================================== */

/* ====================== 00-base.css ====================== */
/* ==========================================================================
   Unit 00 — base: body background override, tokens, container, chrome overlay,
   shared display-heading helpers.
   ========================================================================== */

/* Overrides template.css:6623 body{background:#05070e}. Same specificity
   (0,0,0,1 vs 0,0,0,1) as about.css:5 body{background-color:#f4f4f6}; wins by
   load order (referral.css is linked last, per shell-head.html). Verified by
   reading template.css:6623 and about.css:5 — both are bare `body` selectors,
   no ids/classes, so cascade order alone decides. */
   body {
    background-color: #f4f4f6;
  }
  
  .referral {
    --rf-teal: #004650;
    --rf-pink: #FF467C;
    --rf-emerald: #A6E4D3;
    --rf-lemon: #F1F44F;
    --rf-bright-teal: #F2FEFB;
    --rf-gray-1: #414141;
    --rf-gray-2: #737373;
    --rf-gray-3: #A1A1AA;
    --rf-shadow-2:
            0 9px 20px rgba(0, 9, 10, .10),
            0 36px 36px rgba(0, 9, 10, .09),
            0 80px 48px rgba(0, 9, 10, .05),
            0 143px 57px rgba(0, 9, 10, .01),
            0 223px 62px rgba(0, 9, 10, 0);
    --rf-breakpoint-tablet: 768px;
    --rf-breakpoint-mobile: 480px;
  }
  
  /* --- Container ------------------------------------------------------------ */
  
  .referral__container {
    max-width: 1328px;
    margin-inline: auto;
    box-sizing: border-box;
  }
  
  .referral__container_gap {
    padding-bottom: 100px;
  }
  
  /* --- Chrome overlay: navbar sits inside the teal hero panel ---------------
     Own rule (NOT borrowed from .about-hero__header) — same specificity as
     about.css:.about-hero__header, but referral.css loads after about.css, so
     this rule wins on load order alone. Modeled on css/about.css:18-27.
     Verified: .referral-hero (see unit 01) establishes position:relative same
     as .about-hero does at about.css:224, so this absolute overlay is
     positioned against the hero panel, not the viewport — checked against the
     about.css precedent before writing this rule. */
  .referral-hero__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 32px 56px 16px;
  }
  
  /* --- Shared display-heading helpers ---------------------------------------
     Use on every section's <h2>: class="referral__h2", with the coloured run
     wrapped in <span class="referral__h2-accent">. Accent colour is NOT set
     here (light sections use --rf-pink, dark sections use --rf-lemon) — set
     `color` on the accent span locally per section, per SPEC's two-tone rule. */
  .referral__h2 {
    font-family: var(--font-cofo-kak);
    font-weight: 900;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: 1px;
    color: var(--rf-teal);
    margin: 0;
  }
  
  .referral__h2-accent {
    color: inherit;
  }
  
  .referral__h3 {
    font-family: var(--font-cofo-kak);
    font-weight: 900;
    font-size: 50px;
    line-height: 1.25;
    letter-spacing: 2px;
    color: var(--rf-teal);
    margin: 0;
  }
  
  .referral__h4 {
    font-size: 32px;
    color: var(--rf-teal);
    font-weight: bold;
  }
  
  .referral section:not(:first-child):not(:last-child) {
    padding: 0 56px 100px 56px;
  }
  
  /* ====================== 01-hero.css ====================== */
  /* ==========================================================================
     Unit 01 — hero. Continues the .referral-hero section opened in
     shell-head.html (which also holds .referral-hero__header, styled in
     00-base.css). This file establishes position:relative on .referral-hero
     itself, per the comment in 00-base.css.
     ========================================================================== */
  
  .referral-hero {
    position: relative;
    min-height: 640px;
    background: linear-gradient(191deg, var(--rf-teal) 22.86%, #009FB6 233.38%);
    border-radius: 0 0 64px 64px;
    padding-bottom: 40px;
    margin-top: -92px;
  }
  
  /* --- Two-column body: text + collage --------------------------------------
     CSS Grid so both columns shrink together with the viewport — the second
     track has a min/max clamp instead of a fixed px width, so no 1200/1024
     breakpoint is needed to prevent overflow; the grid math handles it. ---- */
  
  .referral-hero__body {
    padding-top: 179px;
    display: grid;
    grid-template-columns: 1fr minmax(240px, 511px);
    align-items: start;
    gap: 40px;
  }
  
  .referral-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    max-width: 1328px;
    min-width: 0;
  }
  
  .referral-hero__title {
    margin: 0;
    font-family: var(--font-cofo-kak);
    font-weight: 900;
    font-size: 64px;
    line-height: 1.15;
    letter-spacing: 2.56px;
    color: #fff;
    z-index: 1;
  }
  
  .referral-hero__subcopy {
    margin: 0;
    max-width: 728px;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.5;
    color: var(--rf-bright-teal);
  }
  
  .referral-hero__accent {
    font-family: var(--font-cofo-kak);
    font-weight: 900;
    color: var(--rf-lemon);
  }

  .referral-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    width: 270px;
    border-radius: 999px;
    background: var(--rf-pink);
    color: #fff;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
   
    transition: opacity 0.7s ease, visibility 0.7s linear 0.7s;
  }
  .referral-hero__cta.presentation{
    background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    border: 1px solid rgba(255, 70, 124, 1);
    margin-left: 32px;
  }

.referral-hero__cta.presentation:hover{
  background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
}

  .referral-hero__cta.referral-hero__cta-fixable {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
  }

  .referral-hero__cta-fixable.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.7s ease, width 0.75s ease;
  }

  .referral-hero__cta:not(.presentation):hover,
  .referral-hero__cta:not(.presentation):focus-visible {
    background: #ff2f6d;
  }
  
  .referral-hero__cta-fixable:hover,
  .referral-hero__cta-fixable:focus-visible {
    width: 250px;
  }
  
  /* --- Photo collage -------------------------------------------------------
     Genuinely overlapping collage (per SPEC exemption) — fluid, not fixed-px.
     The wrapper is a normal grid column sized by aspect-ratio (511:412, the
     collage group's own footprint from GEOMETRY.md, node 14094:112499). Each
     photo is positioned in PERCENT, derived by subtracting the group's origin
     (833,145) from its absolute coords and dividing by 511 wide / 412 tall:
       circle 1039,145 186x186 -> (206,0)   -> left 40.31% top 0%     w 36.40% h 45.15%
       large   833,200 245x245 -> (0,55)    -> left 0%     top 13.35% w 47.95% h 59.47%
       wide    972,376 300x181 -> (139,231) -> left 27.20% top 56.07% w 58.71% h 43.93%
       square 1176,251 168x168 -> (343,106) -> left 67.12% top 25.73% w 32.88% h 40.78%
     Percent positioning means the whole collage scales with its container at
     any width — no breakpoint needed to keep it inside the viewport. -------- */
  
  .referral-hero__collage {
    position: relative;
    width: 100%;
    max-width: 511px;
    aspect-ratio: 511 / 412;
    margin-top: -34px; /* NO COMP — inferred: nudges the collage's 145px design
      top back in line with the 179px text-column top now that both share one
      grid row start; 179 - 145 = 34. */
  }
  
  .referral-hero__photo {
    position: absolute;
    display: block;
    object-fit: cover;
    box-shadow: var(--rf-shadow-2);
  }
  
  .referral-hero__photo--circle {
    left: 40.31%;
    top: 0%;
    width: 36.40%;
    height: 45.15%;
    border-radius: 50%;
  }
  
  .referral-hero__photo--large {
    left: 0%;
    top: 13.35%;
    width: 47.95%;
    height: 59.47%;
    border-radius: 24px;
  }
  
  .referral-hero__photo--wide {
    left: 27.2%;
    top: 56.07%;
    width: 58.71%;
    height: 43.93%;
    border-radius: 24px;
  }
  
  .referral-hero__photo--square {
    left: 67.12%;
    top: 25.73%;
    width: 32.88%;
    height: 40.78%;
    border-radius: 13px;
  }
  
  /* ====================== 02-calculator.css ====================== */
  /* ==========================================================================
     Unit 02 — «Рассчитайте свой доход» income calculator.
     Geometry from get_design_context on 14086:112456: white card 878x343 r24;
     left control column 369px, right 405px; slider track 369x4 r24 in
     --rf-emerald with a 20px thumb; chips 96x28 r24, gap 7px; result panel
     814x180 r16 in --rf-emerald with 64px CoFo Kak figure.
     ========================================================================== */
  
  .referral-calc {
    padding-top: 100px !important;
  }
  
  .referral-calc__title {
    margin: 0 0 40px;
    text-align: center;
  }
  
  .referral-calc__accent {
    color: var(--rf-pink);
  }
  
  .referral-calc__card {
    box-sizing: border-box;
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    padding: 20px 32px 32px;
    border-radius: 24px;
    background: #fff;
  }
  
  /* --- Controls row -------------------------------------------------------- */
  
  .referral-calc__controls {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 20px;
  }
  
  .referral-calc__control {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  .referral-calc__control--clients {
    flex: 0 1 397px;
  }
  
  .referral-calc__control--size {
    flex: 0 1 405px;
  }
  
  .referral-calc__label {
    display: block;
    padding: 0;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    color: var(--rf-teal);
    white-space: nowrap;
  }
  
  .referral-calc__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
  }
  
  .referral-calc__value {
    flex: 0 0 auto;
    font-family: var(--font-cofo-kak);
    font-weight: 900;
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: 0.64px;
    color: var(--rf-pink);
    font-variant-numeric: tabular-nums;   /* stops the row shifting as digits change */
  }
  
  /* --- Slider -------------------------------------------------------------
     Styled native <input type="range">. The filled portion is painted with a
     --fill custom property that the JS updates, so the emerald track shows
     progress without an extra element. ------------------------------------ */
  
  .referral-calc__slider-wrap {
    padding-top: 6px;
  }
  
  .referral-calc__slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 20px;                      /* room for the thumb */
    margin: 0;
    background: transparent;
    cursor: pointer;
  }
  
  /* track — WebKit */
  .referral-calc__slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 24px;
    background: linear-gradient(
            to right,
            var(--rf-teal) 0 var(--rf-calc-fill, 4%),
            var(--rf-emerald) var(--rf-calc-fill, 4%) 100%
    );
  }
  
  .referral-calc__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -8px;                  /* centre the 20px thumb on the 4px track */
    border: 0;
    border-radius: 50%;
    background: var(--rf-pink);
    box-shadow: 0 1px 4px rgba(0, 9, 10, 0.25);
  }
  
  /* track — Firefox */
  .referral-calc__slider::-moz-range-track {
    height: 4px;
    border-radius: 24px;
    background: var(--rf-emerald);
  }
  
  .referral-calc__slider::-moz-range-progress {
    height: 4px;
    border-radius: 24px;
    background: var(--rf-teal);
  }
  
  .referral-calc__slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: var(--rf-pink);
    box-shadow: 0 1px 4px rgba(0, 9, 10, 0.25);
  }
  
  .referral-calc__slider:focus-visible {
    outline: 2px solid var(--rf-pink);
    outline-offset: 6px;
    border-radius: 24px;
  }
  
  .referral-calc__scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 10px;
    line-height: 1.4;
    color: #000;
    opacity: 0.2;
  }
  
  /* --- Business-size chips ------------------------------------------------ */
  
  .referral-calc__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
  }
  
  /* Radios drive state; they are removed from paint but kept focusable so the
     native radio group keyboard behaviour (arrow keys) still works. */
  .referral-calc__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  
  .referral-calc__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 96px;
    height: 28px;
    padding: 5px 18px;
    border-radius: 24px;
    background: rgba(197, 197, 197, 0.5);
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    color: var(--rf-teal);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  
  .referral-calc__chip:hover {
    background: rgba(197, 197, 197, 0.75);
  }
  
  .referral-calc__radio:checked + .referral-calc__chip {
    background: var(--rf-pink);
    font-weight: 500;
    color: #fff;
  }
  
  /* opacity .7 in the comp applies to the UNSELECTED label text only */
  .referral-calc__radio:not(:checked) + .referral-calc__chip {
    opacity: 0.7;
  }
  
  .referral-calc__radio:focus-visible + .referral-calc__chip {
    outline: 2px solid var(--rf-pink);
    outline-offset: 3px;
  }
  
  /* --- Result panel ------------------------------------------------------- */
  
  .referral-calc__result {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    min-height: 180px;
    padding: 15px 24px 10px;
    border-radius: 16px;
    background: var(--rf-emerald);
    color: var(--rf-teal);
    text-align: center;
  }
  
  .referral-calc__result-label {
    margin: 0;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.32px;
    text-transform: uppercase;
  }
  
  .referral-calc__result-year {
    margin: 0;
    font-family: var(--font-cofo-kak);
    font-weight: 900;
    font-size: 64px;
    line-height: 1.25;
    letter-spacing: 1.28px;
    font-variant-numeric: tabular-nums;
  }
  
  .referral-calc__result-month {
    margin: 0;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.44;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
  }
  
  .referral-calc__note {
    max-width: 878px;
    margin: 10px auto 0;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
    color: var(--rf-teal);
    opacity: 0.7;
  }
  
  /* ====================== 02b-commission.css ====================== */
  /* ==========================================================================
     Unit 02 — commission. Lower half of s2_calc.png ONLY: heading + two
     percentage cards. The income calculator above it is a separate unit and
     is intentionally NOT built here.
     ========================================================================== */
  
  .referral-commission__heading {
    margin: 16px 0 24px;
    /* Figma's heading node 14086:110710 is 1440x62 — 62px is exactly two lines at
       24px/1.3, i.e. the copy wraps to 2 lines across the FULL frame width. A 984px
       cap pushed "GATE" onto a third line. */
    max-width: 1140px;
    margin-inline: auto;
    text-align: center;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.3;
    color: var(--rf-gray-1);
  }
  
  .referral-commission__cards {
    display: flex;
    gap: 54px;
  }
  
  .referral-commission__card {
    display: flex;
    align-items: stretch;
    flex-basis: 50%;
    min-width: 0;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(191deg, var(--rf-teal) 22.86%, #009FB6 233.38%);
  }
  
  .referral-commission__photo {
    flex: 0 0 268px;
    width: 268px;
    object-fit: cover;
    border-radius: 24px;
  }
  
  .referral-commission__photo_left {
    object-position: left;
  }
  
  .referral-commission__photo_right {
    object-position: right;
  }
  
  .referral-commission__panel {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 53px 24px 53px 32px;
  }
  
  .referral-commission__percent {
    margin: 0;
    font-family: var(--font-cofo-kak);
    font-weight: 900;
    font-size: 80px;
    line-height: 1.2;
    letter-spacing: 1.6px;
    color: var(--rf-lemon);
  }
  
  .referral-commission__desc {
    margin: 0;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3;
    color: #fff;
  }
  
  /* ====================== 03-benefits.css ====================== */
  /* ==========================================================================
     Unit 03 — «Почему это выгодно» (benefits)
     ========================================================================== */
  
  .referral-benefits {
    padding-block: 0;
  }
  
  .referral-benefits__title {
    text-align: center;
    margin-bottom: 40px;
  }
  
  .referral-benefits__accent {
    color: var(--rf-pink);
  }
  
  .referral-benefits__grid {
    display: grid;
    grid-template-columns: 654fr 642fr;
    gap: 32px;
    align-items: stretch;
  }
  
  /* --- Left: tall dark-teal hero card ---------------------------------------- */
  
  .referral-benefits__hero {
    position: relative;
    height: 100%;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 24px;
    padding: 40px;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    background: url("/referral/img/bg-ruble.jpg");
    background-size: cover;
  }
  
  .referral-benefits__hero-top {
    display: flex;
  }
  
  .referral-benefits__badge {
    width: 255px;
    height: 255px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .referral-benefits__badge-icon {
    width: 188px;
    height: 188px;
  }
  
  .referral-benefits__hero-bottom {
    max-width: 480px;
  }
  
  .referral-benefits__hero-title {
    color: #fff;
    margin-bottom: 16px;
  }
  
  .referral-benefits__hero-text {
    font-family: var(--font-inter);
    font-size: 18px;
    line-height: 1.44;
    color: #fff;
    margin: 0;
  }
  
  /* --- Right: three stacked light cards --------------------------------------- */
  
  .referral-benefits__list {
    display: flex;
    flex-direction: column;
    gap: 21px;
  }
  
  .referral-benefits__card {
    border-radius: 20px;
    background: linear-gradient(180deg, #DFECE9 0%, #EEEEEE 100%);
    padding: 32px 40px;
    box-sizing: border-box;
  }
  
  .referral-benefits__card-head {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
  }
  
  .referral-benefits__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .referral-benefits__icon img {
    width: 28px;
    height: 28px;
  }
  
  .referral-benefits__card-title {
    font-family: var(--font-cofo-kak);
    font-weight: 900;
    font-size: 24px;
    line-height: 1.3;
    color: var(--rf-teal);
    margin: 0;
  }
  
  .referral-benefits__card-text {
    font-family: var(--font-inter);
    font-size: 18px;
    line-height: 1.44;
    color: var(--rf-gray-1);
    margin: 0;
  }
  
  /* ====================== 04-who.css ====================== */
  /* ==========================================================================
     Unit 04 — «Кто может стать партнером?» (who)
     ========================================================================== */
  
  .referral-who {
    padding-block: 96px;
  }
  
  .referral-who__title {
    text-align: center;
    margin-bottom: 40px;
  }
  
  .referral-who__accent {
    color: var(--rf-pink);
  }
  
  .referral-who__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    border-radius: 24px;
    background: linear-gradient(180deg, #DFECE9 0%, #EEEEEE 100%);
    overflow: hidden;
  }
  
  .referral-who__content {
    display: flex;
    flex-direction: column;
    padding: 56px 48px 56px 40px;
    box-sizing: border-box;
  }
  
  .referral-who__list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
  }
  
  .referral-who__item {
    padding-block: 24px;
    border-top: 1px solid rgba(0, 70, 80, 0.12);
  }
  
  .referral-who__item:first-child {
    padding-top: 0;
    border-top: none;
  }
  
  .referral-who__item-title {
    font-family: var(--font-inter);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.3;
    color: var(--rf-teal);
    margin: 0 0 8px;
  }
  
  .referral-who__item-text {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    margin: 0;
    color: black;
  }
  
  .referral-who__note {
    font-family: var(--font-inter);
    font-size: 20px;
    line-height: 1.4;
    color: #fff;
    background-color: var(--rf-teal);
    border-radius: 12px;
    padding: 24px;
    margin: auto 0 0;
  }
  
  .referral-who__media {
    width: 604px;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 24px;
    justify-self: end;
    object-position: top;
  }
  
  /* ====================== 05-stories.css ====================== */
  /* ==========================================================================
     Unit 05 — «Истории партнеров». Geometry from get_design_context on
     14086:110932: section is a 40px-gap column with 56px inline padding; cards
     are white, radius 24, padding 32px top/bottom, 32px left / 24px right, with
     a 352px content column; dots are 12px circles at rgba(0,70,80,.25) with the
     active one a 28x12 pill in solid --rf-teal.
     ========================================================================== */
  
  .referral-stories {
    padding-block: 60px;
  }
  
  .referral-stories__title {
    /* Unlike every other section heading, this one is single-tone dark teal in the
       comp — no pink/lemon accent run. Do not add one. */
    margin: 0 0 40px;
    text-align: center;
  }
  
  /* Mobile-only forced break between "Истории" / "партнеров" (comp 14132:113835
     shows this as a deliberate 2-liner). Hidden on desktop. */
  .referral-stories__break {
    display: none;
  }
  
  /* --- Carousel ------------------------------------------------------------ */
  
  .referral-stories__carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  
  .referral-stories__track {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;             /* the dot rail is the affordance */
    -ms-overflow-style: none;
  }
  
  .referral-stories__track::-webkit-scrollbar {
    display: none;
  }
  
  .referral-stories__track:focus-visible {
    outline: 2px solid var(--rf-pink);
    outline-offset: 4px;
    border-radius: 24px;
  }
  
  /* --- Card --------------------------------------------------------------- */
  
  .referral-stories__card {
    position: relative;
    flex: 0 0 auto;
    /* three cards + two 24px gaps inside the 1328px content column */
    width: calc((100% - 48px) / 3);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 24px 32px 32px;
    border-radius: 24px;
    background: #fff;
    overflow: hidden;
    scroll-snap-align: start;
  }
  
  /* Card 2 carries a decorative rotated ₽ watermark at 5% opacity (node
     14086:110966). Rendered as a background layer rather than 26 <img> tags. */
  .referral-stories__card--pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/referral/img/bg-ruble-pattern.svg");
    background-repeat: repeat;
    background-size: 260px auto;
    opacity: 0.05;
    transform: rotate(15deg) scale(1.6);
    transform-origin: center;
    pointer-events: none;
  }
  
  .referral-stories__card > * {
    position: relative;               /* above the watermark */
    z-index: 1;
  }
  
  .referral-stories__person {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .referral-stories__avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  /* Cards 4-6 have no real portrait in the design — node 14053:110220 uses one shared
     grey placeholder circle for every avatar. Rendered as a real <img> (not a CSS shape)
     so swapping in a photo is a src change with no rule edits. alt="" because a generic
     grey circle carries no information. */
  .referral-stories__avatar--placeholder {
    background: #d9d9d9;
  }
  
  .referral-stories__name {
    margin: 0;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.32px;
    color: #000;
  }
  
  .referral-stories__headline {
    margin: 0;
    font-family: var(--font-cofo-kak);
    font-weight: 900;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.32px;
    color: var(--rf-teal);
  }
  
  .referral-stories__accent {
    color: var(--rf-pink);
  }
  
  .referral-stories__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .referral-stories__body p {
    margin: 0;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: 0.24px;
    color: #000;
  }
  
  /* --- Dot rail (built by js/referral.js) --------------------------------- */
  
  .referral-stories__dots {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .referral-stories__dots[hidden] {
    display: none;
  }
  
  /* Defensive: when the measured page count is 1 the script empties the rail, but the
     rail element itself stays in the flow and the carousel's 24px gap still applies,
     leaving dead space under the cards at >=1024. Collapse it on :empty so the layout
     is correct regardless of whether the script's `hidden` flag is set. */
  .referral-stories__dots:empty {
    display: none;
  }
  
  .referral-stories__dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 70, 80, 0.25);
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
  }
  
  .referral-stories__dot[aria-current="true"] {
    width: 28px;
    background: var(--rf-teal);
  }
  
  .referral-stories__dot:focus-visible {
    outline: 2px solid var(--rf-pink);
    outline-offset: 3px;
  }
  
  /* ====================== 06-steps.css ====================== */
  /* ==========================================================================
     Unit 06 — «Начать зарабатывать с GATE просто» (node 14086:111174)
     ========================================================================== */
  
  .referral-steps {
    padding-block: 96px;
  }
  
  .referral-steps__heading {
    text-align: center;
  }
  
  .referral-steps__accent {
    color: var(--rf-pink);
  }
  
  /* --- 3-step progress row ---------------------------------------------------
     Flex row: circles are fixed-size flex items, rules are flex-grow items
     between them. This keeps the line behind/between the circles without any
     absolute positioning.
     Geometry (GEOMETRY.md, node 14086:111187 vs root 14086:111174): progress
     row is 952px wide inside the 1328px content column (centred, not full
     width) — circles at x=0/452/904 (48px each), rule 1 spans x=68..432 (a
     20px gap off each circle), rule 2 the mirror. */
  .referral-steps__progress {
    display: flex;
    align-items: center;
    width: 952px;
    max-width: 100%;
    margin: 64px auto 40px;
  }
  
  .referral-steps__circle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    font-family: var(--font-inter);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    color: var(--rf-teal);
    position: relative;
    width: 56px;
    height: 56px;
  }
  
  .referral-steps__circle--dashed {
    border-style: dashed;
    border-color: var(--rf-gray-2);
  }
  
  .referral-steps__line {
    flex: 1 1 auto;
    height: 1px;
    background: var(--rf-gray-3);
    margin-inline: 20px;
  }
  
  /* --- Step cards: 3-up static row at desktop, 1-up carousel at mobile ------
     Mirrors the .referral-stories carousel pattern exactly: the card-width
     rules alone decide the behaviour, js/referral.js measures how many cards
     fit and derives the page count. `.referral-steps__dots` is injected by
     that script - never put it in the markup. */
  
  .referral-steps__carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  
  .referral-steps__track {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .referral-steps__track::-webkit-scrollbar {
    display: none;
  }
  
  .referral-steps__track:focus-visible {
    outline: 2px solid var(--rf-pink);
    outline-offset: 4px;
    border-radius: 20px;
  }
  
  .referral-steps__card {
    /* three cards + two 24px gaps inside the content column */
    flex: 0 0 auto;
    width: calc((100% - 48px) / 3);
    min-width: 0;
    background: linear-gradient(180deg, #DFECE9 0%, #EEEEEE 100%);
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
    scroll-snap-align: start;
  }
  
  /* Desktop keeps the single .referral-steps__progress row above the cards; the
     per-slide marker is mobile-only (see the 768 block). */
  .referral-steps__marker {
    display: none;
  }
  
  .referral-steps__card-title {
    font-family: var(--font-inter);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: var(--rf-teal);
    margin: 0 0 12px;
  }
  
  .referral-steps__card-body {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--rf-gray-2);
    margin: 0;
  }
  
  /* --- Dot rail (built by js/referral.js) --------------------------------- */
  
  .referral-steps__dots {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .referral-steps__dots[hidden] {
    display: none;
  }
  
  /* Defensive: same fix the stories rail needed - when the measured page count
     is 1 the script empties the rail, but the element stays in flow and the
     carousel's 24px gap would leave dead space under the row at desktop. */
  .referral-steps__dots:empty {
    display: none;
  }
  
  .referral-steps__dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 70, 80, 0.25);
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
  }
  
  .referral-steps__dot[aria-current="true"] {
    width: 28px;
    background: var(--rf-teal);
  }
  
  .referral-steps__dot:focus-visible {
    outline: 2px solid var(--rf-pink);
    outline-offset: 3px;
  }
  
  /* ====================== 07-industries.css ====================== */
  /* ==========================================================================
     Unit 07 — «Кому рекомендовать GATE» (node 14086:111503)
     GEOMETRY.md only captured the outer panel for this node before the Figma
     quota died (56,90 1328x1885, i.e. the panel fills the full content
     column) — no card-level x/y was recorded. Row wide/narrow orientation
     below is verified against s7.png pixel proportions instead (see report):
     row1 energy(wide,photo)/industry(narrow,pale); row2 IT(narrow,dark)/
     construction(wide,pale); row3 pharma(narrow,pale)/trade(wide,photo);
     row4 consulting(equal,pale)/sport(equal,dark) — matches spec table exactly.
     ========================================================================== */
  
  .referral-industries {
    padding-block: 96px;
  }
  
  .referral-industries__heading {
    text-align: center;
    margin-bottom: 40px;
  }
  
  .referral-industries__accent {
    color: var(--rf-pink);
  }
  
  .referral-industries__panel {
    background: #fff;
    border-radius: 32px;
    padding: 40px;
  }
  
  /* --- (a) "Компаниям, которые:" checklist card ------------------------------ */
  
  .referral-industries__intro {
    background: linear-gradient(204.16deg, #004650 22.86%, #009FB6 233.38%);
    border-radius: 24px;
    padding: 40px 48px;
    color: #fff;
  }
  
  .referral-industries__intro-title {
    font-family: var(--font-inter);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 24px;
  }
  
  .referral-industries__checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 48px;
  }
  
  .referral-industries__check-col {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .referral-industries__check-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  
  .referral-industries__check-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
  }
  
  .referral-industries__check-item span {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
  }
  
  /* --- (b) "Актуальные отрасли" asymmetric grid ------------------------------ */
  
  .referral-industries__grid-heading {
    text-align: center;
    margin: 56px 0 32px;
  }
  
  .referral-industries__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .referral-industries__card {
    position: relative;
    border-radius: 20px;
    padding: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 220px;
  }
  
  /* Row pattern per spec: row1 wide/narrow, row2 narrow/wide, row3 narrow/wide,
     row4 equal/equal. Wide ~7/12, narrow ~5/12, equal 6/6. */
  .referral-industries__card--wide { grid-column: span 8; }
  .referral-industries__card--narrow { grid-column: span 4; }
  .referral-industries__card--equal { grid-column: span 6; }
  
  .referral-industries__card--pale {
    background: linear-gradient(180deg, #DFECE9 0%, #EEEEEE 100%);
  
  }
  
  .referral-industries__card--dark {
    background: linear-gradient(135deg, var(--rf-teal) 0%, #002830 100%);
  }
  
  .referral-industries__card--photo {
    color: #fff;
    justify-content: flex-end;
    min-height: 280px;
  }
  
  .referral-industries__card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  
  .referral-industries__card--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 20, 24, .15) 0%, rgba(0, 20, 24, .8) 100%);
    z-index: 1;
  }
  
  .referral-industries__card-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    margin-bottom: 8px;
  }
  
  .referral-industries__card-icon img {
    width: 22px;
    height: 22px;
  }
  
  .referral-industries__card-title {
    position: relative;
    z-index: 2;
    font-family: var(--font-cofo-kak);
    font-weight: 900;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: .5px;
    color: var(--rf-teal);
    margin: 0;
  }
  
  .referral-industries__card-title_big {
    font-size: 32px;
  }
  
  .referral-industries__card--dark .referral-industries__card-title,
  .referral-industries__card--photo .referral-industries__card-title {
    color: #fff;
  }
  
  .referral-industries__card-body {
    position: relative;
    z-index: 2;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--rf-gray-2);
    margin: 0;
  }
  
  .referral-industries__card--dark .referral-industries__card-body,
  .referral-industries__card--photo .referral-industries__card-body {
    color: rgba(255, 255, 255, .85);
  }
  
  /* ====================== 08-easy.css ====================== */
  /* ==========================================================================
     Unit 08 — "Рекомендовать GATE легко"
     Full-width dark-teal panel, 3 feature cards, pink pill CTA.
     ========================================================================== */
  
  .referral-easy {
    background: var(--rf-teal);
    border-radius: 32px;
    padding: 56px 40px 40px 40px;
    overflow: hidden;
  }
  
  .referral-easy-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: content-box;
  }
  
  .referral-easy__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }
  
  .referral-easy__h2 {
    color: var(--rf-bright-teal);
  }
  
  .referral-easy__h2-accent {
    color: var(--rf-lemon);
  }
  
  .referral-easy__subcopy {
    max-width: 780px;
    margin: 0 0 32px;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    color: var(--rf-bright-teal);
  }
  
  .referral-easy__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
  }
  
  .referral-easy__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    background: rgba(242, 254, 251, 0.08);
    border-radius: 20px;
    text-align: left;
  }
  
  .referral-easy__card-head {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .referral-easy__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
  }
  
  .referral-easy__card-title {
    margin: 0;
    font-family: var(--font-inter);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: var(--rf-bright-teal);
  }
  
  .referral-easy__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .referral-easy__list li {
    position: relative;
    padding-left: 20px;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.44;
    color: var(--rf-bright-teal);
  }
  
  .referral-easy__list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rf-bright-teal);
  }
  
  .referral-easy__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    padding: 17px 27px;
    border-radius: 999px;
    background: var(--rf-pink);
    color: var(--rf-bright-teal);
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.2s ease;
  }
  
  .referral-easy__cta:hover,
  .referral-easy__cta:focus-visible {
    filter: brightness(1.08);
  }
  
  .referral-easy__cta:focus-visible {
    outline: 2px solid var(--rf-bright-teal);
    outline-offset: 3px;
  }
  
  /* ====================== 09-cta.css ====================== */
  /* ==========================================================================
     Unit 09 — CTA banner (node 14086:111774, s10.png — teal-toned photo variant).
     Full-bleed photo, dark left-side gradient scrim, left-aligned white heading.
     ========================================================================== */
  
  .referral-cta {
    padding-block: 40px;
  }
  
  .referral-cta__banner {
    position: relative;
    height: 379px;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    background-image: url("/referral/img/the-man.jpg");
    background-size: cover;
    background-position-y: -75px;
  }
  
  .referral-cta__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  .referral-cta__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 9, 10, 0.85) 0%, rgba(0, 9, 10, 0.55) 45%, rgba(0, 9, 10, 0) 75%);
    z-index: 1;
  }
  
  .referral-cta__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    height: 100%;
    padding: 48px 56px;
    justify-content: center;
    max-width: 620px;
  }
  
  .referral-cta__title {
    margin: 0;
    font-family: var(--font-cofo-kak);
    font-weight: 900;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: 1px;
    color: var(--rf-bright-teal);
  }
  
  .referral-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 36px;
    border-radius: 999px;
    background: var(--rf-pink);
    color: var(--rf-bright-teal);
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.2s ease;
  }
  
  .referral-cta__button:hover,
  .referral-cta__button:focus-visible {
    filter: brightness(1.08);
  }
  
  .referral-cta__button:focus-visible {
    outline: 2px solid var(--rf-bright-teal);
    outline-offset: 3px;
  }
  
  /* ====================== 10-faq.css ====================== */
  /* ==========================================================================
     Unit 10 — FAQ "Часто задаваемые вопросы" (node 14086:111838, s11_footer.png
     — filename says "footer", this is the FAQ; no footer exists in this design).
     Ships all-collapsed, chevrons down, independent toggles — deliberate
     deviation from the comp, which draws every item expanded with chevrons up.
     Chevron is a pure-CSS glyph (border/transform): icon-chevron.svg does not
     exist yet per team-lead (Figma asset export blocked on quota), and a
     two-line chevron is trivial geometry that doesn't warrant an SVG asset.
     ========================================================================== */
  
  .referral-faq {
    background: var(--rf-teal);
    border-radius: 32px 32px 0 0;
    padding: 64px 0 96px;
  }
  
  .referral-faq__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  
  .referral-faq__h2 {
    color: var(--rf-bright-teal);
    text-align: center;
  }
  
  .referral-faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 920px;
  }
  
  .referral-faq__item {
    border-radius: 20px;
    background: var(--rf-bright-teal);
    overflow: hidden;
  }
  
  .referral-faq__question-wrap {
    margin: 0;
    font-weight: normal;
  }
  
  .referral-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 24px;
    border: none;
    background: none;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.3;
    color: var(--rf-gray-1);
    text-align: left;
    cursor: pointer;
  }
  
  .referral-faq__chevron {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--rf-teal);
    border-bottom: 2px solid var(--rf-teal);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -4px;
  }
  
  .referral-faq__question[aria-expanded="true"] .referral-faq__chevron {
    transform: rotate(-135deg);
    margin-top: 4px;
  }
  
  .referral-faq__answer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 24px 24px;
  }
  
  .referral-faq__answer[hidden] {
    display: none;
  }
  
  .referral-faq__answer p,
  .referral-faq__answer ul {
    margin: 0;
    padding: 0;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--rf-gray-2);
  }
  
  .referral-faq__answer ul {
    padding-left: 20px;
  }
  
  .referral-faq__answer li {
    list-style: disc;
  }
  
  /* ====================== 99-responsive.css ====================== */
  /* ==========================================================================
     Responsive — every media query of the page, collected in one place instead
     of being scattered through the section blocks above.
  
     One @media per breakpoint, widest first. Inside a block the rules keep the
     exact order they had before, and the blocks run widest→narrowest, which is
     the order the sections used too — so which rule wins at any width is
     unchanged. No declaration was edited, added or dropped; only moved.
     Each run is labelled with the section fragment it came from.
     ========================================================================== */
  /* ---------- ≤ 1200px ---------- */
  @media (max-width: 1200px) {
    /* 03-benefits */
    /* NO COMP — inferred */
    .referral-benefits__card-title {
      font-size: 22px;
    }
  
    /* 04-who */
    /* NO COMP — inferred */
    .referral-who__content {
      padding: 40px 32px;
    }
  
    /* 07-industries */
    /* NO COMP — inferred */
    .referral-industries__intro {
      padding: 32px 36px;
    }
  
    /* 01-hero */
    /* NO COMP — inferred */
    .referral-hero {
      min-height: 0;
      padding-bottom: 48px;
    }
    .referral-hero__collage {
      margin-top: 0;
    }
  
    /* 02b-commission */
    /* NO COMP — inferred */
    .referral-commission__percent {
      font-size: 56px;
    }
  
    /* 06-steps */
    /* NO COMP - inferred */
    .referral-steps__card {
      padding: 28px 22px;
    }
  
    /* 07-industries */
    /* NO COMP — inferred */
    .referral-industries__panel {
      padding: 32px;
    }
  
    .referral-industries__checklist {
      gap: 16px 32px;
    }
  
    .referral__h3 {
      font-size: 40px;
    }
  
    .referral-benefits__hero-bottom {
      margin-top: 32px;
    }
  
  
    /* 05-stories */
    /* NO COMP — inferred: 2 cards visible, matching the JS reference table. */
    .referral-stories__card {
      width: calc((100% - 24px) / 2);
    }
  }

  @media (max-width: 1199px) {

    .referral-hero__cta.presentation{display: none;}
    /* 03-benefits */
    /* NO COMP — inferred */
    /* NO COMP — inferred. The 654fr/642fr split keeps dividing below ~1024, which
       crushed the left card to ~105px at an 800 viewport and forced the display h3
       ("Реальные деньги, а не бонусы") to break mid-word. Collapse to one column
       before that happens rather than letting the ratio squeeze it. */
    .referral-benefits__grid {
      grid-template-columns: 1fr;
    }
  
    /* 04-who */
    /* NO COMP — inferred */
    .referral-who {
      padding-block: 72px;
    }
  
    .referral-who__card {
      display: flex;
      flex-direction: column-reverse;
    }
  
    .referral-who__media {
      width: auto;
      height: 524px;
      order: -1;
    }
  
    .referral-hero__body {
      padding-top: 140px;
      grid-template-columns: 1fr minmax(200px, 380px);
      gap: 24px;
    }
  
    /* 03-benefits */
    .referral-benefits {
      padding-block: 72px;
    }
  
    .referral-benefits__hero {
      min-height: 420px;
      padding: 32px;
    }
  
    .referral-benefits__badge {
      width: 140px;
      height: 140px;
    }
  
    .referral-benefits__badge-icon {
      width: 80px;
      height: 80px;
    }
  
    /* 08-easy */
    /* NO COMP — inferred */
    .referral-easy__grid {
      grid-template-columns: 1fr;
    }
    /* 02-calculator */
    /* NO COMP — inferred: stack the two controls once 369+405+32 no longer fits. */
    .referral-calc__controls {
      gap: 24px;
    }
  
    .referral-calc__chips{
      gap: 3px
    }
  
    .referral-calc__card {
      padding: 15px 25px 26px 25px;
    }
  
    .referral-calc__chip {
      font-size: 11px;
      width: auto;
      padding: 3px 17px;
    }
  
    .referral-calc__result-label {
      font-size: 12px;
    }
  
    .referral-calc__result {
      min-height: 141px;
    }
  
    .referral-calc__note {
      font-size: 12px;
    }
  
  /*  .referral-commission h2 {
      display: none;
    } */
  
    .referral-calc__control--clients,
    .referral-calc__control--size {
      flex: 1 1 auto;
      width: 100%;
    }
  
    .referral-calc__result-year {
      font-size: 48px;
    }
  
    .referral-calc__label {
      white-space: wrap;
      font-size: 12px;
    }
  
    .referral-calc__value {
      font-size: 25px;
    }
  
    .referral-calc__control--size {
      min-width: 330px;
    }
  
  
    .referral__h2 {
      /* Fluid here too: at a fixed 36px, "рекомендовать" overflowed its box around
         520px and broke mid-word. Measured ceiling is ~34px at 520. */
      font-size: clamp(19px, 6.2vw, 36px);
    }
  
    /* 01-hero */
    /* NO COMP — inferred: stack text above collage, collage centred and capped,
       still visible (not hidden) at phone/tablet widths. */
    .referral-hero {
      border-radius: 0 0 40px 40px;
    }
  
    .referral-hero__body {
      padding-top: 160px;
      grid-template-columns: 1fr;
      gap: 32px;
    }
  
    .referral-hero__title {
      /* Fluid: "Реферальная" is ~470px at 44px but the column is ~408px at 520. */
      font-size: clamp(24px, 7vw, 40px);
      letter-spacing: 1.5px;
    }
  
    .referral-hero__subcopy {
      font-size: 18px;
    }

    .referral-hero__collage {
      max-width: 510px;
      margin-inline: auto;
      margin-top: 0;
    }
  
    .referral__h2 {
      font-size: 28px;
    }
  
    .referral section:not(:first-child):not(:last-child) {
      padding: 0 40px 80px 40px;
    }
  
    /* 02b-commission */
    /* NO COMP — inferred */
    .referral-commission {
      padding-block: 48px;
    }
  
    .referral-commission__heading {
      font-size: 24px;
    }
  
    .referral-commission__break {
      display: none;
    }
  
    /* 03-benefits */
    /* NO COMP — inferred */
    .referral-benefits {
      padding-block: 56px;
    }
  
    .referral-benefits__grid {
      grid-template-columns: 1fr;
    }
  
    .referral-benefits__hero {
      min-height: 0;
    }
  
    .referral-benefits__hero-bottom {
      max-width: 100%;
    }
  
    .referral-benefits__title {
      margin-bottom: 32px;
    }
  
    /* 04-who */
    /* NO COMP — inferred */
    .referral-who {
      padding-block: 56px;
    }
  
    .referral-who__title {
      margin-bottom: 32px;
    }
  
    .referral-who__content {
      padding: 32px 24px;
    }
  
    .referral-who__item-title {
      font-size: 20px;
    }
  
    .referral-hero__body {
      padding-inline: 40px;
    }
  
  
    /* 08-easy */
    /* NO COMP — inferred */
    .referral-easy {
      border-radius: 24px;
      padding-block: 48px;
    }
  
    .referral-easy__subcopy {
      font-size: 18px;
    }
  
    .referral-easy__card {
      padding: 24px;
    }
  
    /* 09-cta */
    /* NO COMP — inferred */
    .referral-cta__banner {
      height: 320px;
      border-radius: 20px;
      background-position-y: 0;
    }
  
    .referral-cta__content {
      padding: 32px;
      max-width: 100%;
    }
  
    .referral-cta__title {
      /* Same reason as the <=480 rule below: a fixed size in the 481-768 band still
         let "Присоединяйтесь" exceed the banner's inner width at ~560. */
      font-size: clamp(16px, 4.4vw, 30px);
    }
  
    /* 10-faq */
    /* NO COMP — inferred */
    .referral-faq {
      border-radius: 24px 24px 0 0;
      padding: 48px 40px 64px 40px;
    }
  
    .referral-faq__question {
      padding: 20px;
      font-size: 18px;
    }
  
    .referral-faq__answer {
      padding: 0 20px 20px;
    }
  
    /* 02-calculator */
    /* NO COMP — inferred */
    .referral-calc {
      padding-block: 40px 20px;
      padding-bottom: 32px !important;
    }
  
    .referral-calc__title {
      margin-bottom: 28px;
    }
  
    .referral-calc__card {
      padding: 20px;
    }
  
    .referral-calc__label-row {
      align-items: flex-start;
    }
  
    .referral-calc__value {
      font-size: 28px;
    }
  
    .referral-calc__result-year {
      font-size: 40px;
      letter-spacing: 0.8px;
    }
  
    .referral-calc__result {
      gap: 12px;
      min-height: 0;
      padding: 20px 16px;
    }
  
    /* 05-stories */
    /* Mobile comp (node 14132:113835). Real values, not inferred, for the
       ACTIVE card (14154:121598): one card per page below 768 with 21px of the
       next one peeking past the right edge (cards 2-3 in the comp are the same
       card at the same size, offset by the 8px gap - not separate target sizes),
       rail plus swipe are the paging means.
       Card radius ~19px (was 24), padding ~26/19/26/26 (was 24/20 uniform),
       avatar shrinks to ~39px (was 48), name 13px (was 16), body copy 10px
       (was 12); headline stays 16px, unchanged. The comp's track uses a FIXED
       16px gutter (not the container's stepped 24px→16px ladder) — matches the
       MOBILE-SPEC's "16px side gutters" baseline directly, so pin it rather
       than inherit the wider 24px tier that applies 480-768px elsewhere.
       The comp's per-card internal gap is actually two-tier (person↔text 13px,
       headline↔body 7px); approximated here as a single blended 12px on
       .referral-stories__card rather than restructuring the card into a nested
       wrapper — close visually, flagged in the report. */
    .referral-stories {
      padding-block: 40px;
    }
  
    .referral-stories__title {
      font-size: 28px;
      margin-bottom: 28px;
    }
  
    .referral-stories__break {
      display: inline;
    }
  
    /* Track needs a FIXED 16px gutter, so it escapes the section's own inline
       padding with a matching negative margin and then applies its own 16px.
       The gutter comes from `.referral section:not(:first-child):not(:last-child)`
       in 00-base — 56px here, stepping to 16px at <=480 (the `.referral__container`
       padding rules never apply: their media queries use var(), which is invalid).
       The carousel is a centred flex column, so the track must also drop its
       width:100% and stretch instead — with a definite width the negative
       margins only shift the box sideways instead of widening it, which left
       the card narrow and the right gutter oversized. */
    .referral-stories__track {
      width: auto;
      align-self: stretch;
      margin-inline: -40px;
      padding-inline: 40px;
      /* One card per page. The gap is purely visual now: js/referral.js scrolls
         to each card's measured position, so the pitch no longer has to match
         the track's clientWidth. */
      gap: 8px;
      /* Without this, `scroll-snap-align: start` snaps to the padding edge and
         eats the left gutter, pinning the card to the screen edge. */
      scroll-padding-inline: 40px;
    }
  
    .referral-stories__card {
      /* Peek: the comp puts a 330px card in a 375px window with a 16px gutter and
         an 8px gap, so 21px of the NEXT card stays visible past the right edge -
         the affordance that tells you the row scrolls. 100% here is the track's
         content box (viewport - 2x16), so `- 13px` leaves exactly that 21px.
         The pitch (card + gap) is smaller than the track's clientWidth; the
         script pages by the cards' measured offsets, not by clientWidth. */
      width: calc(100% - 13px);
      gap: 12px;
      padding: 26px 19px 26px 26px;
      border-radius: 19px;
    }
  
    .referral-stories__avatar {
      width: 39px;
      height: 39px;
    }
  
    .referral-stories__name {
      font-size: 13px;
    }
  
    .referral-stories__body p {
      font-size: 10px;
    }
  
    .referral-commission__photo {
      width: 287px;
      height: 268px;
    }
  
    .referral-steps__track {
      flex-direction: column;
    }
  
    .referral-steps__card {
      width: 100%;
    }
  
    .referral-steps__container {
      display: flex;
      gap: 32px;
      margin-top: 32px;
    }
  
    .referral-steps__progress {
      flex-direction: column;
      width: auto;
      margin: 0 0 80px 0;
    }
  
    .referral-steps__line {
      width: 1px;
    }
  
    .referral-steps__dots {
      display: none;
    }
  
    .referral-industries {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  
    .referral-industries__checklist {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  
    .referral-industries__grid {
      grid-template-columns: 1fr;
    }
  
    .referral-industries__card--wide,
    .referral-industries__card--narrow,
    .referral-industries__card--equal {
      grid-column: span 1;
    }
  
    .referral-industries__card-title_big {
      font-size: 28px;
    }
  
    .referral-industries__card-body {
      font-size: 16px;
    }
  
    #referral-cta-title {
      text-align: left !important;
      font-size: 28px;
    }
  
    .referral-cta__button {
      font-weight: 400;
      padding: 18px 78px;
    }
  
    .referral-commission__cards {
      flex-direction: column;
      gap: 24px;
    }

    .referral-hero__cta:not(.referral-hero__cta-fixable) {
      display: none;
    }
  }
  
  /* ---------- ≤ 640px ---------- */
  @media (max-width: 767px) {
    /* 00-base */
    /* --- Long-word breaking on narrow viewports -------------------------------
       NO COMP — inferred. Russian display headings contain words long enough
       ("Реферальная", "зарабатывать", "Присоединяйтесь") that their min-content
       width exceeds a 375px viewport, which forced document-level horizontal
       overflow. Allow them to break rather than push the page wide. Applied only
       at <=640 so desktop line-breaking is untouched. */
    .referral h1,
    .referral h2,
    .referral h3,
    .referral__h2,
    .referral__h2-accent,
    .referral__h3 {
      /* `anywhere` rather than `break-word`: only `anywhere` reduces the element's
         MIN-CONTENT size. With `break-word` these headings are flex/grid items whose
         width still resolves to min-content (380px for "Реферальная" at 34px), which
         pushed the document to 396px on a 375px viewport. */
      overflow-wrap: anywhere;
      /* let the heading shrink below min-content inside a flex column */
      min-width: 0;
      max-width: 100%;
    }
  
    /* 07-industries */
    /* NO COMP — inferred */
    .referral-industries__intro-title {
      font-size: 21px;
    }
  
    .referral-industries__card-title {
      font-size: 20px;
    }
  
    .referral-commission__photo {
      flex: none;
      width: 150px;
      height: 144px;
    }
  
    .referral-commission__panel {
      padding: 24px;
    }
  
    .referral-hero__title {
      font-size: 57px;
    }
  
    .referral-cta__banner {
      background-position-y: 0;
      background-position: center;
    }
  
    /* 06-steps */
    /* Mobile comp, node 14132:113931 (real values, not inferred).
       The comp is a horizontal track 1066px wide inside a 343px window: each slide
       carries its own numbered marker whose centre sits on the card centre, with a
       1.6px #D9D9D9 rule running out of it to both window edges. That is why the
       desktop .referral-steps__progress row is swapped for a per-slide
       .referral-steps__marker here rather than being merely restyled.
       Measured: section gap 24px, marker 38.53px, marker->card gap 21px, card
       radius 24, padding 24, title/body gap 6.4px, title 20/1.2/0.4px tracking,
       body 12/1.5 #000, dots 12px with a 28px active pill. */
    .referral-steps {
      padding-block: 64px;
    }
  
    .referral-steps__heading {
      text-align: center;
    }
  
    /* Replaced by the per-slide marker below. */
    .referral-steps__progress {
      display: none;
    }
  
    .referral-steps__carousel {
      gap: 24px;
      margin-top: 24px;
    }
  
    /* Same full-bleed track as .referral-stories__track: escape the section's
       own inline padding so the gutter is a fixed 16px, and let the next slide
       peek 21px past the right edge. The carousel is a centred flex column, so
       the track must stretch instead of keeping width:100% - with a definite
       width the negative margins only shift the box instead of widening it. */
    .referral-steps__track {
      width: auto;
      align-self: stretch;
      margin-inline: -40px;
      padding-inline: 16px;
      gap: 8px;
      /* else `scroll-snap-align: start` snaps to the padding edge and pins the
         card to the screen edge */
      scroll-padding-inline: 16px;
    }
  
    .referral-steps__card {
      width: calc(100% - 13px);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 21px;
      background: none;
      border-radius: 0;
      padding: 0;
      /* clips the marker's connector rules at the slide edge so they cannot
         inflate the track's scrollWidth and throw off the JS page maths */
      overflow: hidden;
    }
  
    .referral-steps__marker {
      display: block;
      position: relative;
      flex: 0 0 auto;
      width: 39px;
      height: 39px;
      line-height: 0;
    }
  
    .referral-steps__marker img {
      width: 100%;
      height: 100%;
      display: block;
    }
  
    /* the connector rules: out of the marker to both edges of the slide */
    .referral-steps__marker::before,
    .referral-steps__marker::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 100vw;
      height: 1.6px;
      background: #d9d9d9;
    }
  
    .referral-steps__marker::before {
      right: 100%;
      margin-right: 16px;
    }
  
    .referral-steps__marker::after {
      left: 100%;
      margin-left: 16px;
    }
  
    .referral-steps__panel {
      width: 100%;
      background: linear-gradient(180deg, #DFECE9 0%, #EEEEEE 100%);
      border-radius: 24px;
      padding: 24px;
      text-align: center;
    }
  
    .referral-steps__card-title {
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: 0.4px;
      margin-bottom: 6px;
    }
  
    .referral-steps__card-body {
      font-size: 12px;
      line-height: 1.5;
      color: #000;
    }
  
    /* 07-industries */
    /* NO COMP — inferred */
    .referral-industries {
      padding-block: 64px;
    }
  
    .referral-industries__panel {
      padding: 24px;
      border-radius: 24px;
    }
  
    .referral-industries__intro {
      padding: 24px;
      border-radius: 20px;
    }
  
    .referral-industries__card--photo {
      min-height: 240px;
    }
  
    .referral-steps__track {
      flex-direction: row;
    }
  
    .referral-steps__dots {
      display: flex;
    }
  
    .referral-steps__card:first-child .referral-steps__marker:before{
      display: none;
    }
  
    .referral-steps__card:last-child .referral-steps__marker:after{
      display: none;
    }
  
    .referral-calc__control--size {
      width: 100%;
      min-width: auto;
    }
  
    .referral-calc__controls {
      flex-direction: column;
      gap: 18px;
    }
  
    .referral-steps__carousel {
      width: 100%;
    }
  }
  
  /* ---------- (max-width: var(--rf-breakpoint-mobile)) — DEAD BLOCK ----------
     var() is not allowed in a media query, so this never matches and the
     rules inside have never applied. Kept verbatim and in its original
     cascade position - fixing it would change what the page renders. */
  @media (max-width: var(--rf-breakpoint-mobile)) {
    /* 00-base */
    /* NO COMP — inferred */
    .referral__container {
      padding-inline: 16px;
    }
  
    .referral__h2 {
      /* Fluid below 480 so long Russian display words ("Рассчитайте",
         "Присоединяйтесь") shrink to fit instead of being broken mid-word by the
         overflow-wrap:anywhere safety net further down this file. A fixed 31px
         stopped shrinking and started hyphen-less mid-word breaks at <=390px. */
      font-size: clamp(19px, 6.2vw, 31px);
    }
  
    .referral__h3 {
      font-size: 26px;
    }
  
    /* 02-calculator */
    .referral-calc {
      padding: 0;
    }
  }
  
  /* ---------- ≤ 480px ---------- */
  @media (max-width: 640px) {
    /* 00-base */
    .referral section:not(:first-child):not(:last-child) {
      padding: 0 16px 80px 16px;
    }
  
    /* 00-base */
    .referral__h2 {
      font-size: 21px;
    }
  
    /* 01-hero */
    /* NO COMP — inferred */
    .referral-hero__body {
      padding-top: 150px;
      padding-inline: 16px;
    }
  
    .referral-hero__title {
      /* Fluid: "Реферальная" is 363px at 34px and the column is only 273px at a
         320 viewport, so a fixed size forced a mid-word break. */
      font-size: clamp(20px, 7vw, 34px);
    }
  
    .referral-hero__subcopy {
      font-size: 16px;
    }
  
    .referral-hero__cta {
      height: 52px;
      padding: 0 24px;
    }
  
    .referral-hero__collage {
      max-width: 320px;
    }
  
    /* 02-calculator */
    /* NO COMP — inferred: four 96px chips + gaps exceed a 320-375px card, so let
       them share two rows evenly rather than overflow. */
    .referral-calc__chips {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  
    .referral-calc__chip {
      width: 100%;
      padding: 5px 0;
      font-weight: 400 !important;
    }
  
    .referral-calc__result-year {
      font-size: 28px;
    }
  
    .referral-calc__label {
      font-size: 14px;
    }
  
    .referral-calc__result-label {
      font-size: 12px;
    }
  
    .referral-calc__result-month {
      font-size: 10px;
    }
  
    .referral-calc__note {
      font-size: 8px;
    }
  
    /* 02b-commission */
    /* NO COMP — inferred */
    .referral-commission__heading {
      font-size: 16px;
    }
  
    .referral-commission__desc {
      font-size: 12px;
    }
  
    .referral-commission__panel {
      padding: 17px;
    }
  
    /* 03-benefits */
    .referral-benefits__hero-top {
      justify-content: center;
    }
  
    .referral-benefits__hero-bottom {
      text-align: center;
      margin-top: 70px;
    }
  
    .referral__h3 {
      font-size: 24px;
    }
  
    .referral-benefits__hero-text {
      font-size: 16px;
    }
  
    /* 03-benefits */
    /* NO COMP — inferred */
    .referral-benefits {
      padding-block: 40px;
    }
  
    .referral-benefits__hero {
      padding: 24px;
    }
  
    .referral-benefits__badge {
      width: 112px;
      height: 112px;
    }
  
    .referral-benefits__badge-icon {
      width: 64px;
      height: 64px;
    }
  
    .referral-benefits__card {
      padding: 32px 24px;
      text-align: center;
    }
  
    .referral-benefits__card-head {
      flex-wrap: wrap;
      justify-content: center;
    }
  
    .referral-benefits__card-title {
      font-size: 18px;
    }
  
    .referral-benefits__card-text {
      font-size: 16px;
    }
  
    .referral-benefits__icon {
      width: 40px;
      height: 40px;
    }
  
    .referral-benefits__list {
      gap: 32px;
    }
  
    /* 04-who */
    /* NO COMP — inferred */
    .referral-who {
      padding-block: 40px;
    }
  
    .referral-who__content {
      padding: 24px 16px;
    }
  
    .referral-who__media {
      min-height: 240px;
    }
  
    .referral-who__item {
      padding-block: 16px;
    }
  
    .referral-who__note {
      padding: 16px;
    }
  
    .referral-who__item-text, .referral-who__note {
      font-size: 16px;
    }
  
    /* 05-stories */
    /* The section's gutter steps to 16px here — keep the track's negative margin
       in sync with it so the net gutter stays a fixed 16px. */
    .referral-stories__track {
      margin-inline: -16px;
    }
  
    /* 06-steps */
    /* The section's gutter steps to 16px here - keep the track's negative margin
       in sync with it so the net gutter stays a fixed 16px. */
    .referral-steps {
      padding-block: 48px;
    }
  
    .referral-steps__track {
      margin-inline: -16px;
    }
  
    .referral-cta__banner {
      background-position-x: 440px;
    }
  
    .referral-cta__content {
      width: 90%;
    }
  
    /* 07-industries */
    /* NO COMP — inferred */
    .referral-industries {
      padding-block: 48px;
      padding: 0 0 80px 0 !important;
    }
  
    #referral-industries-heading {
      padding: 0 16px;
    }
  
    .referral-industries__panel {
      padding: 16px 16px 0 16px;
    }
  
    .referral-industries__intro {
      padding: 20px;
    }
  
    .referral-industries__card {
      padding: 20px;
      min-height: auto;
    }
  
    .referral-industries__card--photo {
      min-height: 200px;
    }
  
    .referral-industries__card-title {
      font-size: 18px;
    }
  
    /* 08-easy */
    /* NO COMP — inferred */
    .referral-easy {
      border-radius: 16px;
      padding: 40px 16px;
    }
  
    .referral-easy__subcopy, .referral-easy__list li {
      font-size: 16px;
    }
  
    .referral-easy__card-title {
      font-size: 24px;
    }
  
    .referral-easy__cta {
      width: 100%;
      padding: 16px 24px;
    }
  
    /* 09-cta */
    /* NO COMP — inferred */
    .referral-cta__banner {
      height: 360px;
    }
  
    .referral-cta__content {
      padding: 20px 16px;
      justify-content: flex-end;
    }
  
    .referral-cta__title {
      /* Fluid: "Присоединяйтесь" is the longest word on the page; at a fixed 24px
         it exceeded the banner's inner width and broke mid-word. */
      /* Ratio solved by measurement, not guessed: "Присоединяйтесь" (15 chars) needs
         <=14.9px at a 320 viewport, <=18.8px at 375, <=21.6px at 414. 4.4vw sits under
         that curve at every width, so the word never breaks mid-way. */
      font-size: clamp(14px, 4.4vw, 24px);
    }
  
    .referral-easy-wrapper {
      padding: 0 0 80px 0 !important;
    }
  
  
    .referral-cta__button {
      width: 100%;
    }
  
    /* 10-faq */
    /* NO COMP — inferred */
    .referral-faq {
      border-radius: 16px 16px 0 0;
      padding: 56px 16px 80px 16px;
    }
  
    .referral-faq__list {
      gap: 12px;
    }
  
    .referral-faq__question {
      padding: 16px;
      font-size: 16px;
    }
  
    .referral-faq__answer {
      padding: 0 16px 16px;
    }
  
    .referral-faq__answer p,
    .referral-faq__answer ul {
      font-size: 14px;
    }
  
    .referral__h4 {
      font-size: 20px;
      margin: 40px 0 24px 0;
    }
  }
  
  /* ---------- (prefers-reduced-motion: reduce) ---------- */
  @media (prefers-reduced-motion: reduce) {
    /* 02-calculator */
    .referral-calc__chip {
      transition: none;
    }
  
    /* 05-stories */
    .referral-stories__dot {
      transition: none;
    }
  
    /* 06-steps */
    .referral-steps__dot {
      transition: none;
    }
  }
  
  .link-faq {
    color: #004650;
    text-decoration: underline;
    text-decoration-color: #004650;
  }
  
  @media (min-width: 1200px) {
      .referral-commission__heading {
          max-width: 700px;
      }
  }

  /* Стили переносов */

.break-440 {
  display: none;
}
@media (min-width: 440px) {
  .break-440 {
    display: inline;
  }
}

.break-1200 {
  display: none;
}
@media (min-width: 1200px) {
  .break-1200 {
    display: inline;
  }
}

@media (min-width: 1200px) and (max-width: 1390px) {
  .referral-hero__title {
    font-size: 56px;
  }
}

/* End */
/* /referral/style.css?179050853073916 */