/* foundation - the values every other file reads: colours, type sizes, spacing,
   radii, shadows, plus the page reset and the base typography.
   Load order matters: these four files are the old single <style> split apart,
   and the browser still applies them in exactly this order. */

/* ---------- ЕДИНСТВЕННЫЙ ШРИФТ СТРАНИЦЫ: SF UI Display ---------------
   Вся страница набрана одним семейством — San Francisco (SF UI Display).
   Прежних двух шрифтов, Unbounded и Golos Text, на странице нет: они убраны
   вместе с загрузкой с fonts.googleapis.com, поэтому вид текста больше
   не зависит от интернета.
   Файлы лежат в assets/fonts/sf-ui-display. Подключены только те начертания,
   которые реально стоят в правилах ниже: 400 — обычный текст, 500 — ссылки
   в шапке, 600, 700 — кнопки и подзаголовки, 800 — заголовки. Каждый файл
   обрезан до латиницы, кириллицы, знаков препинания и символов валют, поэтому
   весит около 54 КБ вместо 300.
   В наборе нет только знака «примерно» и эмодзи: их браузер берёт из системного
   набора (на маке это тот же San Francisco и системные эмодзи). Поэтому
   в запасной части стека стоят системные имена, а не другие веб-шрифты. */
  /* Тонкое начертание — только цифры и основные знаки (2,4 КБ). Нужно для
     номеров «01 · 02 · 03» во втором блоке: там они стоят крупно и набраны
     светлым. Больше нигде не используется. */
  @font-face{font-family:"SF UI Display";font-style:normal;font-weight:300;font-display:swap;
    src:url("../fonts/sf-ui-display/sf-ui-display-300.woff2") format("woff2")}
  @font-face{font-family:"SF UI Display";font-style:normal;font-weight:400;font-display:swap;
    src:url("../fonts/sf-ui-display/sf-ui-display-400.woff2") format("woff2")}
  @font-face{font-family:"SF UI Display";font-style:normal;font-weight:500;font-display:swap;
    src:url("../fonts/sf-ui-display/sf-ui-display-500.woff2") format("woff2")}
  @font-face{font-family:"SF UI Display";font-style:normal;font-weight:600;font-display:swap;
    src:url("../fonts/sf-ui-display/sf-ui-display-600.woff2") format("woff2")}
  @font-face{font-family:"SF UI Display";font-style:normal;font-weight:700;font-display:swap;
    src:url("../fonts/sf-ui-display/sf-ui-display-700.woff2") format("woff2")}
  @font-face{font-family:"SF UI Display";font-style:normal;font-weight:800;font-display:swap;
    src:url("../fonts/sf-ui-display/sf-ui-display-800.woff2") format("woff2")}

  :root{
    --brand:#3b61ce;
    --brand-2:#2f51b4;
    /* the selected currency button takes the brand at 10%, the filled part of
       the slider at 50% */
    --brand-10:rgba(59,97,206,.1);
    --brand-50:rgba(59,97,206,.5);
    --navy:#10213b;
    --ink:#10213b;
    --ink-2:#4a5b73;
    --ink-3:#66758c;
    --paper:#ffffff;
    --paper-2:#e8eefb;
    --line:#e4eaf5;
    /* те же линии-разделители, но чуть плотнее — на 15% (цвет чернил
       с плотностью 15%). Используется в «Этапах работ» и «Частых вопросах». */
    --line-strong:rgba(16,33,59,.15);
    --ok:#0c7a3c;
    --ok-bg:#eaf6ee;
    --focus:#3b61ce;
    --maxw:1120px;
    --shadow:0 14px 40px rgba(16,33,59,.10);
    --shadow-s:0 6px 20px rgba(16,33,59,.07);
    --section:clamp(56px,9vw,120px);
    /* Верхнее поле секции — эталон первого экрана: от верхней границы его
       синего поля до первой строки текста. В первом экране это высота шапки
       плюс просвет под ней, поэтому и у секций считается так же — тогда
       заголовки всех секций стоят на одном расстоянии от своей границы,
       что и «Покупка · Рассрочка · Аренда» в первом экране. Ниже 901 точки
       шапка в первом экране считается по-своему (92 + отступ). */
    --sec-top:calc(clamp(48px,6vw,80px) + 92px);
    /* воздух от заголовка секции до её контента. Одно значение на все блоки:
       заголовок везде отбивается от содержимого одинаково. */
    --head-gap:clamp(36px,4.6vw,68px);
    --gutter:clamp(16px,4vw,40px);
    /* the air above the hero content and the air under it are the same value.
       The blue field is no longer stretched to the viewport height: it ends on
       the trust strip, and on a taller screen the next section simply shows. */
    --hero-gap:clamp(20px,4.2vh,72px);
    /* просвет между блоками смысловой колонки: заголовок -> пункты и
       пункты -> кнопки. Одно значение на оба места, чтобы они не разъезжались. */
    --hero-line-gap:clamp(12px,1.9vh,24px);
    /* размер цифр в полосе доверия. От него зависит и выравнивание логотипа
       банка: его низ поднимается на высоту выносных элементов цифр, чтобы
       просвет до подписи был такой же, как у чисел. */
    --ht-num:clamp(26px,2.8vw,36px);
    --header-h:88px;
    /* --- композиция первого экрана -------------------------------------
       Раньше эти числа скрипт вычислял при каждой загрузке и каждом
       изменении размера окна: мерил линейкой элементы, ловил верх букв
       на невидимом canvas и двигал блоки через transform. Теперь это
       обычная раскладка: колонки стартуют от одной линии, а накладки
       заданы отступами. Менять здесь — сразу видно на экране. */
    /* насколько плашка с цифрами наезжает на верх фотографии */
    --plate-overlap:28px;
    /* насколько белый калькулятор наезжает на низ фотографии */
    --calc-overlap:88px;
    /* the photo width inside the document column. Its right edge sits exactly
       on the site grid line (where the header phone ends), so the left offset
       is derived from the width — never typed twice. A 162% photo would keep
       that edge only by growing over the headline, so it stopped at 144%;
       затем снимок уменьшили ещё на 10% — 129,6%. Правый край при этом
       остаётся на той же линии: он привязан к ширине колонки, а не к снимку. */
    --photo-w:129.6%;
    --photo-x:calc(100% - var(--photo-w));
    /* the calculator is wide enough to keep the exchange rate on the same line as
       the three currency buttons: it needs 306px inside, and 96% of the column
       leaves 316px even in the narrowest desktop window */
    --calc-w:96%;
    /* the calculator is centred on the photo, not on the column */
    --calc-x:calc(100% - var(--photo-w) / 2 - var(--calc-w) / 2);
    /* One surface for everything that stands on the blue field: the stats plate
       and the digits in the bullet list are the same material, so both are set
       from these values and can never drift apart. There is no light gradient
       and no bright top line on purpose — the fill is the field's own blue, so
       the plate reads as part of the background instead of a bright lid on it. */
    --onblue-edge:rgba(255,255,255,.14);
    --onblue-text:#f4f7ff;

    /* --- синее поле первого экрана -------------------------------------
       Три точки градиента и два свечения. Раньше эти цвета были вписаны
       цифрами прямо в .hero; теперь поле меняется здесь и только здесь. */
    --field-1:#173e82;
    --field-2:#143875;
    --field-3:#112f63;
    --field-glow:rgba(101,142,226,.40);
    --field-deep:rgba(9,27,58,.55);
    --field-dot:rgba(255,255,255,.14);

    /* текст, линии и подсветки на синем */
    --onblue-muted:#afc0de;
    --onblue-soft:#d9e3f7;
    --onblue-line:rgba(255,255,255,.22);
    --onblue-line-soft:rgba(255,255,255,.18);
    --onblue-line-strong:rgba(255,255,255,.30);
    --onblue-frame:rgba(255,255,255,.32);
    --onblue-hover:rgba(255,255,255,.12);

    /* акцент-обещание в заголовке */
    --accent-mint:#658ee2;

    /* --- чернила -------------------------------------------------------
       --ink уже есть выше; --ink-0 чуть темнее: им набраны подписи на
       белой кнопке и в нижней полосе, где нужен максимальный контраст. */
    --ink-0:#0a1729;

    /* --- заливки и состояния на белом ---------------------------------- */
    --tint-hover:#e8eefb;    /* наведение на белую кнопку */
    --tint-neutral:#e4eaf6;  /* наведение на нейтральную плашку */

    /* --- сообщения ------------------------------------------------------ */
    --danger:#b22222;
    --danger-line:#c2410c;
    --ok-line:#cdecd6;

    /* --- подвал --------------------------------------------------------- */
    --foot-text:#d9d9d9;
    --foot-link:#ffffff;
    --foot-legal:#a3a3a3;
    --foot-chip:rgba(255,255,255,.08);
    --foot-chip-hover:rgba(255,255,255,.16);

    /* --- тени -----------------------------------------------------------
       Собраны по назначению, а не по величине: то, что раньше копировали
       строкой из блока в блок, теперь меняется одним движением. */
    --shadow-header:0 6px 24px rgba(16,33,59,.06);
    --shadow-pop:0 18px 40px rgba(6,10,40,.32);
    --shadow-notepad:0 26px 56px rgba(6,10,40,.20);
    --shadow-card-blue:0 26px 52px rgba(0,6,60,.34);
    --shadow-photo:0 1px 2px rgba(2,8,50,.34),0 8px 18px rgba(2,8,50,.24),0 26px 56px rgba(0,6,60,.32);
    --shadow-photo-flat:0 1px 2px rgba(2,8,50,.28),0 10px 24px rgba(2,8,50,.20);
    --shadow-plate:inset 0 -14px 22px -16px rgba(0,8,70,.55),0 18px 38px rgba(0,6,60,.34);
    --photo-cast:rgba(0,4,44,.62);

    /* --- шкала шрифта ---------------------------------------------------
       Только те значения, которые уже стоят в файлах: подстановка ничего
       не меняет на экране. Редкие размеры (11, 12.5, 12.6, 14.5, 15.5,
       19, 32, 53 и clamp-ы) намеренно оставлены на месте — их сводим к
       шкале в этапе 2, вместе с переделкой раскладки, чтобы не менять
       размеры текста до того, как из hero уйдёт выравнивание скриптом. */
    --fs-note:12px;
    --fs-caption:13px;
    --fs-small:14px;
    --fs-body-s:15px;
    --fs-body:16px;
    --fs-body-l:17px;
    --fs-lead:18px;
    --fs-h4:20px;
    --fs-h3:22px;
    /* --- зерно бумаги ---------------------------------------------------
       Раньше один файл 1024x1024 (166 КБ) показывался плиткой 512 px, и к нему
       на лету применялись filter: grayscale/brightness/contrast плюс
       background-blend-mode. Фильтр на весь экран — самое дорогое, что было
       на странице. Теперь рисунок уже обезцвечен и растянут по контрасту
       заранее, лежит двумя плитками по ~20 КБ, и фильтра нет вовсе.
       Поле первого экрана смотрит на зерно сильнее, поэтому у него своя,
       более контрастная плитка. */
    --grain-image:url("../textures/paper/grain-soft.webp");
    --grain-image-field:url("../textures/paper/grain-field.webp");
    /* плитки показываются в своём родном размере: растяжение давало мыло */
    --grain-tile:512px 512px;      /* синее поле: плитка 512 и показ 512 */
    --grain-tile-small:256px 256px; /* карточки: плитка 256 и показ 256 */
    --grain-blue:.22;
    --grain-photo:.07;
    /* зерно карточек-бумаги: заметная фактура листа — текст, цифры и ползунок
       читаются напечатанными на шероховатой бумаге, а не нарисованными на экране.
       Сам рисунок зерна очень бледный, поэтому плотность поднята до уровня, на
       котором шероховатость реально видна глазом; карточка при этом остаётся
       белой — multiply снимает всего несколько уровней яркости.
       .5 — максимум, .35 — на 30% слабее, .245 — ещё на 30% слабее. */
    --grain-card:.245;

    /* --- блоки под первым экраном ---------------------------------------
       Пять блоков после первого экрана собраны из того же материала, что и
       он: белая бумага с зерном, честная тень по порядку наложения и
       маленький наклон у предметов. Здесь три уровня тени — лист на столе,
       лист поверх листа и лист, приподнятый над столом, — и три наклона,
       чтобы предметы не кланялись все в одну сторону. */
    --print-tilt:-1.2deg;              /* наклон печатного снимка */
    --print-frame:8px;                 /* поля белого листа вокруг снимка */
    --tilt-a:-1.2deg;
    --tilt-b:.9deg;
    --tilt-c:-.7deg;
    --sheet-2:0 2px 4px rgba(6,12,40,.07),0 22px 48px rgba(6,12,40,.13);
    --sheet-3:0 3px 6px rgba(6,12,40,.08),0 34px 68px rgba(6,12,40,.17);
    --sheet-radius:4px;
    --fs-num:clamp(26px,2.8vw,36px);   /* цифры результата в кейсе */
    --fs-quote:clamp(21px,2.4vw,29px); /* цитата основателя */
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
  body{
    margin:0;
    font-family:"SF UI Display",-apple-system,system-ui,"Segoe UI",sans-serif;
    font-size:18px;
    /* Жирность обычного текста — та же, что у подписей в полосе доверия
       («в финансах и праве», «Оценка Яндекс»). Раньше здесь был более тонкий
       набор; этот вес задан один раз на всю страницу, поэтому его получают
       все тексты, которые не переопределяют вес сами: абзацы, подписи,
       тексты карточек и буллеты первого экрана. */
    font-weight:500;
    line-height:1.6;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  [hidden]{display:none !important}
  img,svg{display:block;max-width:100%}
  h1,h2,h3,h4{line-height:1.14;margin:0;color:var(--ink);font-weight:800;letter-spacing:-0.01em}
  p{margin:0}
  a{color:var(--brand);text-decoration:none}
  a:hover{text-decoration:underline}

  :focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

  .skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;z-index:200}
  .skip:focus{left:0}

  .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}