/* ============================================================
   Hushpeak — soft/rounded commerce theme
   Montserrat · action-blue accent · large radii
   Source of truth: дизайн-файл «Платформа карточки — прототип».
   Перенесено 1:1; адаптированы только артефакты рамок устройств.
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  src: url("/app/fonts/Montserrat.ttf") format('truetype-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette */
  --bg:            #FFFFFF;
  --page:          #FFFFFF;
  --surface:       #F3F3F4;   /* cards, inputs, tertiary fills */
  --surface-2:     #ECECEE;   /* audio pills, hover */
  --black:         #0A0A0A;
  --blue:          #0071E3;
  --blue-press:    #0058B9;
  --blue-soft:     #D8E5F6;   /* "Сайт" pill bg */
  --blue-soft-tx:  #1B6FD6;

  --ink:           #111113;
  --ink-2:         rgba(17,17,19,0.52);   /* secondary text */
  --ink-3:         rgba(17,17,19,0.34);   /* faint / placeholder */
  --hair:          rgba(17,17,19,0.10);
  --hair-strong:   rgba(17,17,19,0.16);

  /* radii */
  --r-modal: 28px;
  --r-card:  22px;
  --r-btn:   16px;
  --r-input: 14px;
  --r-pill:  999px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  340ms;
  --dur-q: 200ms;

  --font: 'Montserrat', ui-sans-serif, system-ui, sans-serif;

  /* ---------- semantic colors (perf-cabinet) ---------- */
  --stage:        #EDEDEF;                 /* neutral stage behind floating panels */
  --success:      #1E9E54;                 /* verified / completed */
  --success-bg:   rgba(30,158,84,0.10);
  --notify:       #FF3B30;                 /* iOS-style notification badge */
  --notify-ring:  #FFFFFF;
  --focus-ring:   rgba(0,113,227,0.12);    /* 4px focus halo on blue */
  --warn:         #9A6700;                 /* deal warning (dispute / payment unavailable) */
  --warn-bg:      rgba(176,120,0,0.08);

  /* ---------- elevation ---------- */
  --shadow-card:  0 18px 40px rgba(0,0,0,0.08);
  --shadow-pop:   0 24px 60px rgba(0,0,0,0.18), 0 0 0 1px var(--hair);
  --shadow-modal: 0 40px 120px rgba(0,0,0,0.28);
  --scrim:        rgba(20,20,22,0.28);

  /* ---------- type tokens ---------- */
  --display-size:   52px;   --display-weight: 700;  --display-track: -0.025em; --display-lh: 1.04;
  --h1-size:        38px;   --h1-weight:      700;  --h1-track:      -0.025em; --h1-lh:      1.05;
  --h2-size:        24px;   --h2-weight:      700;  --h2-track:      -0.02em;
  --h3-size:        18px;   --h3-weight:      600;  --h3-track:      -0.01em;
  --body-size:      17px;   --body-lh:        1.5;
  --small-size:     15px;
  --caption-size:   14px;
  --eyebrow-size:   13px;   --eyebrow-track:  0.14em;
  --label-size:     12px;   --label-track:    0.09em;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--page); }
body { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ---------- type helpers (commerce tier) ---------- */
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--blue); text-transform: lowercase;
}
.eyebrow--caps { text-transform: uppercase; letter-spacing: 0.14em; }

.display {
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.04;
  color: var(--ink);
}
.h-name { font-size: 38px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.sec-head { font-size: 17px; font-weight: 600; color: var(--blue); }
.sec-head--ink { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

.field-label {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px;
}
.body { font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.body--ink { color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border: none; cursor: pointer;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  border-radius: var(--r-btn);
  transition: background var(--dur-q) var(--ease), opacity var(--dur-q) var(--ease), transform var(--dur-q) var(--ease);
  user-select: none; white-space: nowrap;
}
.btn:active { transform: scale(0.985); }
.btn--lg { height: 60px; padding: 0 26px; font-size: 18px; }
.btn--md { height: 52px; padding: 0 22px; }
.btn--blue  { background: var(--blue); color: #fff; }
.btn--blue:hover  { background: var(--blue-press); }
.btn--black { background: var(--black); color: #fff; }
.btn--black:hover { background: #262626; }
.btn--soft  { background: var(--surface); color: var(--ink); }
.btn--soft:hover  { background: var(--surface-2); }
.btn--site  { background: var(--blue-soft); color: var(--blue-soft-tx); height: 40px; padding: 0 22px; font-size: 16px; font-weight: 600; border-radius: 12px; }
.btn--site:hover { filter: brightness(0.97); }
.btn--full { width: 100%; }
.btn:disabled { cursor: default; }

/* ---------- inputs ---------- */
.fld {
  width: 100%; height: 56px;
  background: var(--surface);
  border: 1.5px solid transparent;
  border-radius: var(--r-input);
  padding: 0 18px;
  font-family: var(--font); font-size: 17px; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  transition: border-color var(--dur-q) var(--ease), background var(--dur-q) var(--ease);
  outline: none;
}
.fld::placeholder { color: var(--ink-3); }
.fld:focus, .fld.is-focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,113,227,0.12); }
textarea.fld { height: auto; min-height: 110px; padding: 16px 18px; line-height: 1.5; resize: none; }

/* ---------- hairline ---------- */
.hair { height: 1px; background: var(--hair); border: none; }

/* scrollbar tidy */
.scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- entrance animations ---------- */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------- cabinet / auth-flow primitives (additive) ---------- */
.inp {
  width: 100%; height: 54px; background: var(--surface);
  border: 1.5px solid transparent; border-radius: var(--r-input);
  padding: 0 16px; font-family: var(--font); font-size: 16px; color: var(--ink); outline: none;
  transition: border-color var(--dur-q) var(--ease), background var(--dur-q) var(--ease);
}
.inp::placeholder { color: var(--ink-3); }
.inp:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,113,227,0.12); }
textarea.inp { height: auto; min-height: 100px; padding: 14px 16px; line-height: 1.5; resize: vertical; }

.otp-box {
  width: 58px; height: 66px; text-align: center; font-size: 28px; font-weight: 700;
  background: var(--surface); border: 1.5px solid transparent; border-radius: var(--r-input);
  outline: none; color: var(--ink); font-family: var(--font);
  transition: border-color var(--dur-q) var(--ease), background var(--dur-q) var(--ease);
}
.otp-box:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,113,227,0.12); }
.otp-box.filled { border-color: var(--hair-strong); background: #fff; }

/* ---------- full-page app root (replaces device-frame insets) ---------- */
#root { min-height: 100vh; background: var(--page); }
.app-root { position: relative; min-height: 100vh; background: var(--page); }

/* ============================================================
   perf-cabinet additions — type, badges, pills, button size, motion
   ============================================================ */
.h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); letter-spacing: var(--h2-track); }
.h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); letter-spacing: var(--h3-track); }
.small   { font-size: var(--small-size); color: var(--ink-2); }
.caption { font-size: var(--caption-size); color: var(--ink-3); }
.wordmark { font-size: 15px; font-weight: 300; letter-spacing: 0.26em; color: var(--ink); text-transform: uppercase; user-select: none; }

/* small button (cabinet inline actions) */
.btn--sm { height: 40px; padding: 0 16px; font-size: 15px; }

/* notification badge (tab counts, "new" dots) */
.notif-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--notify); color: #fff; font-family: var(--font);
  font-size: 11px; font-weight: 700; line-height: 1; border-radius: var(--r-pill);
  box-shadow: 0 0 0 2px var(--notify-ring);
}
.notif-badge--dot { width: 8px; height: 8px; padding: 0; min-width: 0; }

/* status pill (used both as class and via StatusPill component) */
.pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: var(--r-pill);
}
.pill--blue    { color: var(--blue);    background: var(--blue-soft); }
.pill--success { color: var(--success); background: var(--success-bg); }
.pill--neutral { color: var(--ink-3);   background: var(--surface-2); }

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ============================================================
   how-it-works — секция «Как это работает» + футер + «О нас».
   Перенос дизайн-макета webapp/how-it-works/ 1:1.
   Токены/кнопки/пилюли берутся из theme.css выше (не дублируются).
   Адаптации: footer→.site-footer (без глобального селектора),
   мобильный дропдаун — без media-toggle (рендер управляет React).
   ============================================================ */
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 40px; }

/* header nav (desktop) */
.nav-main { display: flex; gap: 30px; font-size: 15px; color: var(--ink-2); }
.nav-main a { color: inherit; text-decoration: none; cursor: pointer; transition: color .2s; }
.nav-main a:hover { color: var(--ink); }
.nav-main a.active { color: var(--ink); font-weight: 600; }

/* header nav (mobile brand dropdown) */
.brand-dd { position: relative; }
.brand-trigger { display: flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; padding: 4px 0; font-family: var(--font); }
.brand-chev { font-size: 10px; color: var(--ink-3); transition: transform .25s var(--ease); transform: translateY(1px); }
.brand-dd.open .brand-chev { transform: translateY(1px) rotate(180deg); }
.dd-menu { position: absolute; top: calc(100% + 14px); left: 0; min-width: 232px; background: #fff;
  border-radius: var(--r-input); box-shadow: var(--shadow-pop); padding: 8px; z-index: 70;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
.brand-dd.open .dd-menu { opacity: 1; visibility: visible; transform: none; }
.dd-menu a { display: block; padding: 12px 14px; border-radius: 10px; font-size: 16px; color: var(--ink); text-decoration: none; transition: background .15s; cursor: pointer; }
.dd-menu a:hover { background: var(--surface); }
.dd-menu a.active { color: var(--blue); font-weight: 600; }

/* section scaffolding */
.hiw { padding-top: 72px; padding-bottom: 40px; scroll-margin-top: 90px; }
.lede { max-width: 600px; }
.lede h1 { font-size: 48px; margin: 16px 0 16px; }
.lede .body { font-size: 18px; }
.block { margin-top: 84px; }
.block-head { margin-bottom: 34px; max-width: 680px; }
.block-head .h2 { font-size: 30px; margin-top: 12px; }
.block-head .body { font-size: 17px; margin-top: 10px; }
.schema-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.soon-pill { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); background: var(--surface-2); padding: 3px 10px; border-radius: var(--r-pill); text-transform: uppercase; }

/* Схема 1 — flow */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.step { position: relative; padding-right: 18px; }
.step .dot { width: 46px; height: 46px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 600; position: relative; z-index: 2; }
.step.is-pay .dot { background: var(--blue); color: #fff; }
.step .rail { position: absolute; top: 22px; left: 23px; right: -23px; height: 2px; background: var(--hair-strong); z-index: 1; }
.step:last-child .rail { display: none; }
.step .slab { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin: 18px 0 7px; }
.step .stxt { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.fork { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
.fork-card { background: var(--surface); border-radius: var(--r-card); padding: 24px 26px; }
.fork-card .fc-top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; flex-wrap: wrap; }
.fork-card .fc-t { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.fork-card .body { font-size: 15px; }
.fork-card .note { font-size: 13.5px; color: var(--ink-3); margin-top: 12px; line-height: 1.5; }

/* Схема 2 — payment options */
.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.pay-card { background: var(--surface); border-radius: var(--r-card); border: 2px solid transparent; padding: 26px 26px 24px; display: flex; flex-direction: column; }
.pay-card.rec { background: #fff; border-color: var(--blue); box-shadow: var(--shadow-card); }
.pay-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.pay-top .pt { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.pay-card .desc { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin-bottom: 20px; }
.pay-meta { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--hair); }
.pay-meta .row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pay-meta .k { font-size: 13px; color: var(--ink-3); }
.pay-meta .v { font-size: 14px; font-weight: 600; text-align: right; }
.pay-meta .v.yes { color: var(--success); }
.pay-meta .v.no { color: var(--ink-3); }
.pay-card.rec .soon-pill { background: var(--surface); }

/* Схема 3 — deal timeline */
.deal { background: var(--surface); border-radius: var(--r-card); padding: 34px 38px; }
.dstep { display: grid; grid-template-columns: auto 1fr; gap: 18px; }
.drail { display: flex; flex-direction: column; align-items: center; }
.ddot { width: 22px; height: 22px; border-radius: var(--r-pill); background: #fff; border: 2px solid var(--hair-strong); flex-shrink: 0; position: relative; }
.dstep.done .ddot { background: var(--blue); border-color: var(--blue); }
.dstep.key .ddot { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 5px var(--focus-ring); }
.ddot .chk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }
.dline { width: 2px; flex: 1; background: var(--hair); margin: 5px 0; min-height: 26px; }
.dstep:last-child .dline { display: none; }
.dbody { padding-bottom: 26px; }
.dstep:last-child .dbody { padding-bottom: 0; }
.dbody .dt { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dbody .ds { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.dstep.soon .dbody { opacity: .62; }
.money-flag { font-size: 13px; font-weight: 600; color: var(--blue); background: var(--blue-soft); border-radius: var(--r-pill); padding: 3px 11px; display: inline-block; margin-top: 9px; }
.deal-foot { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair); display: flex; gap: 26px; flex-wrap: wrap; }
.deal-foot .ff { font-size: 13.5px; color: var(--ink-3); }
.deal-foot .ff b { color: var(--ink-2); font-weight: 600; }

/* callout */
.callout { position: relative; background: var(--blue-soft); border-radius: var(--r-card); padding: 28px 30px; margin-top: 24px; }
.callout .co-soon { float: right; margin: 0 0 8px 14px; }
.callout .co-tx { font-size: 18px; line-height: 1.5; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }

/* Схема 4 — commission */
.comm-band { background: var(--surface); border-radius: var(--r-card); padding: 38px 40px; }
.comm-bar { display: flex; height: 76px; border-radius: var(--r-input); overflow: hidden; gap: 4px; margin: 6px 0 14px; }
.comm-seg { display: flex; flex-direction: column; justify-content: center; padding: 0 26px; color: #fff; }
.comm-seg.payout { background: var(--ink); flex: 1 1 auto; }
.comm-seg.fee { background: var(--blue); flex: 0 0 188px; padding: 0 24px; }
.comm-seg .cs-k { font-size: 12.5px; letter-spacing: 0.02em; opacity: .82; }
.comm-seg .cs-v { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; white-space: nowrap; }
.comm-seg.fee .cs-v { font-size: 17px; }
.comm-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.comm-total .ct-k { font-size: 15px; color: var(--ink-2); }
.comm-total .ct-v { font-size: 18px; font-weight: 700; }
.comm-note { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin-top: 18px; max-width: 640px; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.tier { background: #fff; border-radius: var(--r-input); padding: 20px 22px; border: 2px solid transparent; }
.tier.active { border-color: var(--blue); }
.tier .tr-rate { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.tier .tr-when { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; }
.tier .tr-badge { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--blue); text-transform: uppercase; margin-top: 10px; display: inline-block; }

/* track B */
.trackb { background: var(--ink); color: #fff; border-radius: var(--r-card); padding: 46px 48px; margin-top: 84px; display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.trackb .tb-eye { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.trackb h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.trackb .tb-sub { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.72); margin-top: 16px; }
.tb-steps { display: flex; flex-direction: column; }
.tb-row { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); align-items: start; }
.tb-row:last-child { border-bottom: none; }
.tb-row .tb-n { width: 30px; height: 30px; border-radius: var(--r-pill); border: 1.5px solid rgba(255,255,255,.32); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.tb-row .tb-tx { font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.9); padding-top: 4px; }
.trackb .btn--soft { background: rgba(255,255,255,.12); color: #fff; margin-top: 24px; }
.trackb .btn--soft:hover { background: rgba(255,255,255,.2); }

/* final CTA */
.cta { text-align: center; padding: 90px 0 30px; }
.cta h2 { font-size: 38px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
.cta .body { font-size: 18px; max-width: 480px; margin: 16px auto 30px; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* footer */
.site-footer { border-top: 1px solid var(--hair); margin-top: 30px; padding: 38px 0 56px; }
.foot { max-width: 1140px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 26px; font-size: 15px; }
.foot nav a { color: var(--ink-2); text-decoration: none; cursor: pointer; }
.foot nav a:hover { color: var(--ink); }
.foot .fspring { flex: 1; }
.foot .fcap { font-size: 13px; color: var(--ink-3); }

/* about modal extras (поверх ModalShell) */
.about-h { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; margin: 14px 0 20px; max-width: 450px; }
.about-body p { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin-bottom: 16px; }
.about-body .modal-tag { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin: 6px 0 0; }

/* ===== how-it-works — tablet (≤900px) ===== */
@media (max-width: 900px) {
  .wrap, .foot { padding-left: 28px; padding-right: 28px; }
  .block { margin-top: 58px; }
  .block-head { margin-bottom: 26px; }
  .block-head .h2 { font-size: 26px; }
  .fork { grid-template-columns: 1fr; gap: 14px; }
  .pay-grid { grid-template-columns: 1fr; gap: 14px; }
  .trackb { grid-template-columns: 1fr; gap: 34px; padding: 38px 34px; }
  .trackb h2 { font-size: 27px; }
  .flow { display: block; background: var(--surface); border-radius: var(--r-card); padding: 4px 24px; }
  .step { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--hair); min-height: 0; }
  .step:last-child { border-bottom: none; }
  .step .dot { position: static; grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .step .rail { display: none; }
  .step .slab { grid-column: 2; grid-row: 1; margin: 2px 0 6px; }
  .step .stxt { grid-column: 2; grid-row: 2; font-size: 15px; }
}

/* ===== how-it-works — phone (≤560px) ===== */
@media (max-width: 560px) {
  .wrap, .foot { padding-left: 22px; padding-right: 22px; }
  .hiw { padding-top: 44px; padding-bottom: 24px; }
  .lede h1 { font-size: 30px; margin: 14px 0 14px; }
  .lede .body { font-size: 16px; }
  .block { margin-top: 54px; }
  .block-head .h2 { font-size: 24px; }
  .block-head .body { font-size: 16px; }
  .flow { padding: 2px 20px; }
  .step { padding: 20px 0; column-gap: 16px; }
  .step .dot { width: 40px; height: 40px; font-size: 17px; }
  .fork-card { padding: 22px 22px; }
  .pay-card { padding: 24px 22px 22px; }
  .deal { padding: 26px 22px; }
  .dstep { column-gap: 15px; }
  .deal-foot { flex-direction: column; gap: 12px; }
  .comm-band { padding: 26px 22px; }
  .comm-bar { flex-direction: column; height: auto; gap: 4px; margin: 4px 0 14px; }
  .comm-seg { padding: 18px 22px; }
  .comm-seg.fee { flex: 1 1 auto; min-width: 0; }
  .comm-seg .cs-v { font-size: 21px; }
  .comm-seg.fee .cs-v { font-size: 17px; }
  .comm-total { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 8px; }
  .comm-total .ct-v { font-size: 17px; }
  .comm-note { font-size: 14.5px; }
  .tiers { grid-template-columns: 1fr; gap: 12px; }
  .pay-meta .row { flex-wrap: wrap; }
  .pay-meta .v { text-align: left; }
  .callout { padding: 24px 22px; }
  .callout .co-tx { font-size: 16px; }
  .trackb { padding: 34px 24px; margin-top: 54px; }
  .trackb h2 { font-size: 25px; }
  .trackb .tb-sub { font-size: 15.5px; }
  .cta { padding: 64px 0 20px; }
  .cta h2 { font-size: 28px; }
  .cta .body { font-size: 16px; }
  .cta-btns { flex-direction: column; gap: 12px; }
  .cta-btns .btn { width: 100%; }
  .foot { flex-direction: column; align-items: flex-start; gap: 18px; }
}