/* Aroken — /web, #calc «Калькулятор выгоды» (владелец, 22.09; визуал усилен 22.09 — «показывать, а не рассказывать»). Бумажная полоса с одним ползунком (часов в день)
   и сроком рассрочки, под ней графитовая карточка-ответ: три числа (учёба → первые заказы → окупаемость, count-up при пересчёте), живой график по месяцам от старта
   (SVG без библиотек, рисует js/web-calc.js: пустые штриховые месяцы учёбы с платежом «из своих», столбики дохода с вилкой lo–hi, линия платежа с чипом, лаймовый маркер первых заказов,
   фиолетовая полоса окупаемости, шкала с разрывом «…» до последнего месяца рассрочки), ниже ключевая фраза «платёж закрывают заказы» — числа подсвечиваются при пересчёте.
   Логика и формулы — js/web-calc.js (js/plan-math.js подключён до него). Прежний калькулятор с планом по месяцам снят за тяжесть (владелец, 21.09): git show a043081:css/pages.css, .plan__*.
   Токены и .tile — css/main.css; переключатель срока и оговорка повторяют секцию рассрочки (css/pages.css, .installment__*) */

/* ---------- ввод: ползунок слева, срок справа ---------- */
.calc__in { margin-top: 40px; padding: 26px 32px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 56px; }
.calc__field { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 16px; }
.calc__label { font-size: 15px; line-height: 22px; font-weight: 500; color: rgba(23, 24, 28, .7); }
.calc__val { font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__hint { grid-column: 1 / -1; margin-top: 2px; font-size: 13px; line-height: 18px; color: rgba(23, 24, 28, .56); text-wrap: pretty; }
/* ползунок: обёртка несёт --p (доля хода, ставит js/web-calc.js) — по ней и заливка дорожки, и позиция подсказки; тап-зона 44 px на всех ширинах */
.calc__slider { --p: .3; position: relative; grid-column: 1 / -1; margin-top: 2px; }
.calc__range { display: block; width: 100%; height: 44px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.calc__range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--graphite) calc(13px + (100% - 26px) * var(--p)), rgba(23, 24, 28, .14) 0); }
.calc__range::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; border: 2px solid var(--graphite); border-radius: 50%; background: var(--lime-2); box-shadow: 0 6px 12px -4px rgba(23, 24, 28, .45); -webkit-appearance: none; appearance: none; transition: transform .25s var(--spring); }
.calc__range:active::-webkit-slider-thumb, .calc__slider.is-drag .calc__range::-webkit-slider-thumb { transform: scale(1.12); }
.calc__range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(23, 24, 28, .14); }
.calc__range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--graphite); }
.calc__range::-moz-range-thumb { width: 22px; height: 22px; border: 2px solid var(--graphite); border-radius: 50%; background: var(--lime-2); box-shadow: 0 6px 12px -4px rgba(23, 24, 28, .45); }
.calc__range:focus-visible { outline: none; }
.calc__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(23, 24, 28, .22); }
.calc__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(23, 24, 28, .22); }
/* подсказка над бегунком: «2,5 ч · ≈ 3 месяца» — видна, пока тянут (pointer) или двигают с клавиатуры; у краёв хода сдвигается внутрь (--tx), хвостик остаётся над бегунком */
.calc__tip { position: absolute; left: calc(13px + (100% - 26px) * var(--p)); bottom: calc(100% - 3px); z-index: 1; padding: 7px 11px; border-radius: 10px; background: var(--graphite); color: #fff; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; pointer-events: none; opacity: 0; --tx: calc(-20% - 60% * var(--p)); transform: translate(var(--tx), 6px) scale(.94); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55); transition: opacity .16s, transform .24s var(--spring); }
.calc__tip::after { content: ""; position: absolute; left: calc(20% + 60% * var(--p)); top: 100%; width: 10px; height: 10px; margin: -6px 0 0 -5px; border-radius: 2px; background: inherit; transform: rotate(45deg); }
.calc__slider.is-drag .calc__tip { opacity: 1; transform: translate(var(--tx), 0) scale(1); }
/* крайние значения хода — моно, как метрики */
.calc__ticks { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: -8px; padding: 0 2px; font: 500 11px/14px var(--mono); letter-spacing: -.01em; color: rgba(23, 24, 28, .42); }
.calc__ticks i { font-style: normal; }
/* срок — та же пилюля, что в секции рассрочки; выбор общий (событие aroken:term) */
.calc__term-field { display: grid; gap: 8px; justify-items: start; align-self: start; }
.calc__terms { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 3px; border: 1px solid rgba(23, 24, 28, .14); border-radius: 999px; background: rgba(255, 255, 255, .56); }
.calc__term { height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: rgba(23, 24, 28, .76); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.calc__term:hover { color: var(--ink); background: rgba(23, 24, 28, .06); }
.calc__term[aria-pressed="true"] { background: var(--graphite); color: #fff; font-weight: 600; }
.calc__term:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 999px; }

/* ---------- ответ: три числа ---------- */
.calc__out { --pad: 32px; margin-top: 16px; padding: 30px var(--pad) 28px; }
.calc__road { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* цветная линейка слева — тот же цвет, что у маркера на графике ниже: лайм — первые заказы, фиолетовый — окупаемость */
.calc__stop { position: relative; min-width: 0; padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, .16); }
.calc__stop--orders { border-color: var(--lime); }
.calc__stop--payback { border-color: var(--violet); }
.calc__stop-name { display: block; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -.005em; color: rgba(255, 255, 255, .6); } /* подпись шрифтом сайта: моно — только для кода и данных (оси графика) */
.calc__stop-big { display: block; margin-top: 8px; font-size: clamp(26px, calc(2.25vw / var(--z, 1)), 34px); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; } /* без tabular-nums: у Inter он растягивает и дефис в «3-му» */
.calc__stop--orders .calc__stop-big { color: var(--lime); }
.calc__stop--payback .calc__stop-big { color: var(--violet); }
.calc__stop-text { display: block; margin-top: 8px; max-width: 34ch; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .66); text-wrap: pretty; }
.calc__stop-text b { font-weight: 600; color: #fff; white-space: nowrap; }

/* ---------- график ---------- */
.calc__chart { margin: 28px 0 0; }
.calc__chart-cap { margin: 0 0 8px; max-width: 86ch; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .52); text-wrap: pretty; }
.calc__chart-cap b { font-weight: 500; color: rgba(255, 255, 255, .8); }
/* шкала с разрывом помещается в карточку и на 390; если месяцам совсем тесно (js: < 16 px на месяц, 360 и уже) — скролл внутри, страница не шире */
.calc__chart-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.calc__chart-scroll::-webkit-scrollbar { display: none; }
.calc__svg { display: block; width: 100%; height: 292px; overflow: hidden; }
.calc__svg text { font-family: var(--font); font-size: 12px; font-weight: 500; fill: rgba(255, 255, 255, .6); }
.calc__svg .calc__n { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: -.01em; fill: rgba(255, 255, 255, .5); }
.calc__svg .calc__v { font-size: 11.5px; fill: rgba(255, 255, 255, .88); }
.calc__svg .calc__ax.is-first { fill: var(--lime); }
.calc__svg .calc__ax.is-pb { fill: var(--violet); }
.calc__svg .calc__grid { stroke: rgba(255, 255, 255, .09); stroke-dasharray: 3 5; }
.calc__svg .calc__grid-n { fill: rgba(255, 255, 255, .34); }
.calc__svg .calc__axis { stroke: rgba(255, 255, 255, .2); }
/* месяцы учёбы — пустые штриховые столбики во всю высоту: дохода ещё нет; внизу — платёж «из своих» */
.calc__svg .calc__hatch { stroke: rgba(255, 255, 255, .1); }
.calc__svg .calc__slot { fill: url(#calc-hatch); stroke: rgba(255, 255, 255, .26); stroke-dasharray: 4 4; }
.calc__svg .calc__pb { fill: rgba(184, 163, 255, .09); }
.calc__svg .calc__pb-end { stroke: var(--violet); stroke-dasharray: 3 4; opacity: .75; }
.calc__svg .calc__cap { fill: rgba(255, 255, 255, .09); }
.calc__svg .calc__bar { fill: url(#calc-bar); }
.calc__svg .calc__pay { fill: rgba(255, 255, 255, .34); }
.calc__svg .calc__line { stroke: rgba(255, 255, 255, .62); stroke-width: 1.5; stroke-dasharray: 5 4; }
.calc__svg .calc__chip { fill: var(--graphite); stroke: rgba(255, 255, 255, .2); }
.calc__svg .calc__chip-t { font-size: 12px; fill: rgba(255, 255, 255, .8); }
.calc__svg .calc__chip-t .calc__n { font-size: 12px; fill: #fff; }
.calc__svg .calc__first { stroke: var(--lime); stroke-dasharray: 3 4; opacity: .8; }
.calc__svg .calc__first-glow { fill: rgba(199, 255, 46, .22); }
.calc__svg .calc__first-dot { fill: var(--lime); }
.calc__svg .calc__lbl { font-size: 12px; fill: rgba(255, 255, 255, .6); }
.calc__svg .calc__lbl--lime { fill: var(--lime); }
.calc__svg .calc__lbl--violet { fill: var(--violet); }
.calc__svg .calc__brk { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; stroke-linecap: round; }
/* легенда: месяцам тесно (390) — подписи маркеров и чип платежа уходят сюда (класс is-narrow ставит js/web-calc.js по ширине месяца) */
.calc__legend { display: none; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 10px; padding: 0; list-style: none; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .64); }
.calc__chart.is-narrow .calc__legend { display: flex; }
.calc__lg { white-space: nowrap; }
.calc__lg::before { content: ""; display: inline-block; vertical-align: -1px; width: 10px; height: 12px; margin-right: 6px; border-radius: 3px; }
.calc__lg[hidden] { display: none; }
.calc__lg--study::before { border: 1px dashed rgba(255, 255, 255, .4); background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 4px); }
.calc__lg--first { color: var(--lime); }
.calc__lg--first::before { width: 8px; height: 8px; margin: 0 8px 0 2px; vertical-align: 0; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(199, 255, 46, .22); }
.calc__lg--pb { color: var(--violet); }
.calc__lg--pb::before { background: rgba(184, 163, 255, .3); box-shadow: inset -1px 0 0 var(--violet); }
.calc__lg--pay::before { width: 14px; height: 0; vertical-align: 4px; border-radius: 0; border-top: 1.5px dashed rgba(255, 255, 255, .7); }
/* разрыв шкалы — тот же знак «//», что на оси */
.calc__lg--end::before { content: "//"; width: auto; height: auto; vertical-align: 0; border-radius: 0; font: 600 12px/16px var(--mono); letter-spacing: -.12em; color: rgba(255, 255, 255, .5); }
.calc__lg--pay b { font-weight: 600; color: #fff; }
.calc__chart.is-narrow .calc__svg .calc__lbl, .calc__chart.is-narrow .calc__svg .calc__chip, .calc__chart.is-narrow .calc__svg .calc__chip-t { display: none; }
/* маркеры и подписи проявляются после того, как выросли столбики (класс is-in ставит js по IntersectionObserver) */
.calc__svg .calc__marks { opacity: 0; transition: opacity .6s var(--ease) .5s; }
.calc__svg.is-in .calc__marks { opacity: 1; }

/* ---------- ключевая фраза ---------- */
.calc__key { margin-top: 22px; max-width: 78ch; font-size: 16px; line-height: 24px; letter-spacing: -.008em; color: rgba(255, 255, 255, .78); text-wrap: pretty; }
.calc__key b { font-weight: 600; color: #fff; }
.calc__key mark { padding: 0 .2em; border-radius: .2em; background: var(--lime); color: var(--ink); font-weight: 700; white-space: nowrap; }
/* пересчёт: числа вспыхивают лаймом и гаснут (класс is-hot ставит js на карточку и снимает после анимации) */
@keyframes calc-hot { from { color: var(--lime); } to { color: #fff; } }
@keyframes calc-hot-mark { from { background: #fff; } to { background: var(--lime); } }
.calc__out.is-hot .calc__key b, .calc__out.is-hot .calc__stop-text b { animation: calc-hot 1.1s var(--ease); }
.calc__out.is-hot .calc__key mark { animation: calc-hot-mark 1.1s var(--ease); }

/* оговорка — как под секцией рассрочки */
/* Primary под графиком (CRO-аудит 22.09, п. 2): разбор с методистом, часы с ползунка уходят в заявку (поле hours); оговорка про расчёт — в той же строке */
.calc__cta { display: flex; align-items: center; gap: 14px 32px; margin-top: 20px; }
.calc__cta .btn { flex: none; }
.calc__cta .calc__fine { margin-top: 0; }
.calc__fine { position: relative; max-width: 940px; margin-top: 20px; padding-left: 26px; font-size: 13px; line-height: 19px; color: var(--muted); text-wrap: pretty; }
.calc__fine::before { content: "!"; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 11px; line-height: 1; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .calc__range::-webkit-slider-thumb, .calc__term, .calc__tip, .calc__svg .calc__marks { transition: none; }
  .calc__out.is-hot .calc__key b, .calc__out.is-hot .calc__stop-text b, .calc__out.is-hot .calc__key mark { animation: none; }
}

/* планшет: ползунок и срок друг под другом */
@media (max-width: 1023px) {
  .calc__in { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .calc__term-field { align-self: auto; }
  .calc__svg { height: 256px; }
}

/* телефон: одной колонкой; числа — стопкой с той же линейкой слева; срок на всю ширину; график скроллится внутри карточки */
@media (max-width: 767px) {
  .calc__cta { flex-direction: column; align-items: stretch; margin-top: 18px; gap: 14px; }
  .calc__cta .btn { justify-content: space-between; }
  .calc__in { margin-top: 28px; padding: 20px 20px 16px; border-radius: 20px; gap: 16px; }
  .calc__label { font-size: 14px; line-height: 20px; }
  .calc__val { font-size: 22px; line-height: 26px; }
  .calc__terms { width: 100%; justify-content: space-between; }
  .calc__term { flex: 1 1 0; height: 40px; min-height: 44px; padding: 0 8px; }
  .calc__out { --pad: 20px; margin-top: 14px; padding: 22px var(--pad) 22px; border-radius: 20px; }
  .calc__road { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .calc__stop { padding-left: 14px; }
  .calc__stop-big { margin-top: 4px; font-size: 24px; line-height: 28px; }
  .calc__stop-text { max-width: none; }
  .calc__chart { margin-top: 22px; }
  .calc__svg { height: 228px; }
  .calc__key { margin-top: 18px; font-size: 15px; line-height: 22px; }
  .calc__fine { margin-top: 16px; }
}

/* ---------- Экран «Посчитай, когда курс окупится» (владелец, 22.09: «один экран — один смысл», текста минимум, визуал крупно).
   Пояснения к трём числам — по одной строке, подпись графика — одна строка, ключевая фраза — одна строка с лаймовой суммой «из своих»;
   подсказка под ползунком — только для скринридера (срок и так всплывает над бегунком). Три числа крупнее, график по высоте экрана ---------- */
.calc__in { margin-top: 32px; padding-block: 22px 18px; }
.calc__stop-big { font-size: clamp(28px, calc(2.7vw / var(--z, 1)), 46px); line-height: 1.1; }
.calc__stop-text { max-width: 44ch; font-size: 15px; line-height: 21px; }
.calc__chart { margin-top: 24px; }
.calc__chart-cap { max-width: none; font-size: 13px; line-height: 18px; }
.calc__key { margin-top: 18px; max-width: none; font-size: 17px; line-height: 26px; }
/* широкие: слева три числа сверху вниз — «учёба → первые заказы → окупаемость», справа график и ключевая фраза. Поле секции меньше, чем у ритма:
   ползунок, числа и график встают в один кадр и на 1536 × 864; высота графика — от высоты экрана */
@media (min-width: 1280px) {
  .calc { --section-pad: clamp(48px, calc(var(--screen-h) * .06), 88px); }
  .calc__out { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: clamp(40px, calc(4vw / var(--z, 1)), 72px); align-items: start; }
  .calc__road { grid-column: 1; grid-row: 1 / 3; align-self: center; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .calc__stop-big { margin-top: 4px; font-size: clamp(30px, calc(2.2vw / var(--z, 1)), 40px); }
  .calc__stop-text { margin-top: 6px; max-width: none; }
  .calc__chart { grid-column: 2; grid-row: 1; margin-top: 0; }
  .calc__key { grid-column: 2; grid-row: 2; }
  .calc__svg { height: clamp(240px, calc(var(--screen-h) - 600px), 360px); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .calc__svg { height: clamp(220px, calc(var(--screen-h) - 640px), 320px); }
}
@media (max-width: 767px) {
  .calc__stop-big { font-size: 26px; line-height: 30px; }
  .calc__stop-text { font-size: 14px; line-height: 20px; }
  .calc__key { font-size: 15px; line-height: 22px; }
}