/* Refine (2026-10-28, after the alloca.io analysis in media/benmork-logos/out4): type, buttons and corners,
   states and motion on site and cabinet pages. Colours are the approved graphite set; every value comes
   from theme.css. Not loaded in the terminal, whose dense controls keep their own compact sizes.
   Motion runs once and short; motion.js only animates what the server already rendered, and
   prefers-reduced-motion switches every movement off (bottom of this file and foundation.css). */

/* ── Type: Montserrat 700 headlines at 1.12, Roboto text at 1.6 ── */
.display, .h2, .app-head h1 { font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: var(--tr-display); line-height: var(--lh-display); }
.h3, .band h2, .block h2, .help-topic-head h3, .market-tiles h3, .step-row h3, .faq summary, .tab-more-menu strong { font-family: var(--font-display); }
.h3, .band h2, .block h2, .help-topic-head h3, .market-tiles h3, .step-row h3 { font-weight: var(--w-display); letter-spacing: -0.01em; line-height: 1.2; }
.faq summary { font-weight: 600; }
.pt-card h3, .pt-assets h3, .pt-hub-card h2 { font-family: var(--font-display); font-weight: var(--w-display); line-height: 1.2; }
.lead, .hero-copy .lead { line-height: 1.6; }
.eyebrow, .label, .nav-links, .mobile-nav nav a, .side-nav a, .tabbar > a, .tab-more summary, .offer-size strong, .offer-price strong { font-family: var(--font-display); }
.eyebrow { font-weight: 500; }

/* ── Buttons: 60 px (56 on phones), corner 12, lift on hover, press on active ── */
.button {
  min-height: var(--btn-h); padding: 0 28px; gap: 10px; border-radius: var(--radius-button); font-size: 1rem; letter-spacing: 0;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.button-lg { min-height: var(--btn-h); padding-inline: 32px; font-size: 1.0625rem; }
.button-sm, .promo-row .button { min-height: var(--btn-h-sm); padding: 0 18px; font-size: var(--fs-small); }
.button svg { transition: transform var(--dur-fast) var(--ease-out); }
.button:hover { transform: translateY(-2px); }
.button:hover svg { transform: translateX(3px); }
.button:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; }
.button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-button); }
.button-primary:hover { background: color-mix(in srgb, var(--accent-fill) 84%, var(--ink-strong)); box-shadow: 0 14px 32px -16px var(--accent-fill); }
.button-primary:active { box-shadow: none; }
.button-quiet:hover { background: var(--surface-2); border-color: var(--muted); }
.button:disabled, .button[aria-disabled="true"] { transform: none; box-shadow: none; }
/* cabinet head: the action row (account select, «Показать», the main button) shares one 52 px line */
.app-head-actions .button, .app-head-actions select { min-height: var(--field-h); }
/* busy: the form went to the server, the pressed button shows a small ring */
.button.is-busy { pointer-events: none; }
.button.is-busy::after { content: ""; flex: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Corners: 12 for buttons, fields and cards; 16 for big panels; 8 and 6 for small parts ── */
.form-field input[type="email"], .form-field input[type="text"], .form-field input[type="password"], .filters select,
.promo-input, .pt-input, .pt-copy code, .dashboard-account select, .support-form input, .support-form textarea, .support-form select, .search { border-radius: var(--radius-field); }
.form-field input[type="email"], .form-field input[type="text"], .form-field input[type="password"], .filters select, .filters .button { min-height: var(--field-h); }
.pt-card, .pt-contract, .pt-step-info, .pt-more details, .dd-strip, .callout-gold, .callout-profit, .callout-loss, .promo { border-radius: var(--radius); }
.brief, .receipt, .pay-gate, .term-shot img { border-radius: var(--radius-lg); }
.pt-steps a, .pt-seg, .cal-day, .tab-more-menu, .user-chip { border-radius: var(--radius-sm); }
.chip, .tag, .pt-seg a, .pt-flag, .tab-more-menu a { border-radius: var(--radius-xs); }

/* ── Cards that lead somewhere: lift 4 px and a brighter edge ── */
.market-tiles li { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.market-tiles li:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line-strong), 0 20px 40px -24px var(--notch); }
.market-tiles li:focus-within { box-shadow: 0 0 0 1px var(--line-strong); }
.mk-go { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.market-tiles li:hover .mk-go { border-color: var(--accent); color: var(--accent-text); }
.mk-go svg { transition: transform var(--dur-fast) var(--ease-out); }
.mk-go:hover svg { transform: translateX(2px); }
.pt-card { transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.pt-card:has(> a.button, > .actions a.button):hover { border-color: var(--line-strong); transform: translateY(-2px); }
.step-row li .step-i { transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out); }
.step-row li:hover .step-i { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--accent); }
.leader-strip li { transition: border-color var(--dur-fast) var(--ease-out); }
.leader-strip li:hover { border-top-color: var(--accent); }
.data tbody tr, .board tbody tr { transition: background-color 160ms var(--ease-out); }
/* tables mix Montserrat figures and Roboto words: one baseline per row */
.data td, .data th[scope="row"], .board td, .board th[scope="row"] { vertical-align: baseline; }

/* choices: rows, pills, add-ons and payment methods answer the pointer */
.offer { transition: background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.offer-mark { transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-spring); }
.offer:hover .offer-mark { border-color: var(--muted); }
.offer:active .offer-mark { transform: scale(0.88); }
.pill, .addon, .pay-method, .plan-switch-row a { transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.pill:hover, .plan-switch-row a:hover { border-color: var(--muted); }
.pill:active { transform: scale(0.97); }

/* ── Navigation: underline grows from the left, the menu drops in, the rail answers ── */
.nav-links a { position: relative; transition: color var(--dur-fast) var(--ease-out); }
.nav-links a[aria-current="page"] { box-shadow: none; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease-out); }
.nav-links a:hover::after { transform: scaleX(1); background: var(--muted); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); }
.header-link { transition: color var(--dur-fast) var(--ease-out); }
.site-header { transition: background-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out), backdrop-filter 250ms var(--ease-out); }
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.mobile-nav summary { transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.mobile-nav summary span, .mobile-nav summary span::before, .mobile-nav summary span::after { transition: transform 240ms var(--ease-out), top 240ms var(--ease-out), background-color 120ms linear; }
.mobile-nav[open] summary { border-color: var(--accent); }
.mobile-nav[open] nav { animation: drop-in 240ms var(--ease-out) both; }
.mobile-nav[open] nav a { animation: rise-in 320ms var(--ease-out) both; font-size: 1.0625rem; }
.mobile-nav[open] nav a:nth-child(2) { animation-delay: 30ms; }
.mobile-nav[open] nav a:nth-child(3) { animation-delay: 60ms; }
.mobile-nav[open] nav a:nth-child(4) { animation-delay: 90ms; }
.mobile-nav[open] nav a:nth-child(5) { animation-delay: 120ms; }
.mobile-nav[open] nav a:nth-child(n+6) { animation-delay: 150ms; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } }
.side-nav a { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.side-nav a svg { transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.side-nav a:not(.nav-buy):hover svg { transform: translateX(2px); }
.tabbar > a svg, .tab-more summary svg { transition: transform var(--dur-fast) var(--ease-spring), color var(--dur-fast) var(--ease-out); }
.tabbar > a[aria-current="page"]:not(.nav-buy) svg { transform: translateY(-2px); }
.tabbar > a:active, .tab-more summary:active { transform: scale(0.96); }
.tab-more[open] .tab-more-menu { animation: drop-up 200ms var(--ease-out) both; }
@keyframes drop-up { from { opacity: 0; transform: translateY(6px); } }
.text-link { transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); }
.text-link:hover { text-decoration-color: var(--accent); }

/* ── Forms: the field lights up, the label follows, an error nudges once ── */
.form-field input, .filters select, .promo-input, .pt-input, .dashboard-account select, .support-form input, .support-form textarea, .support-form select {
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.form-field input:hover, .promo-input:hover, .pt-input:hover, .support-form input:hover, .support-form textarea:hover { border-color: var(--muted); }
.form-field input:focus, .filters select:focus, .promo-input:focus, .pt-input:focus, .dashboard-account select:focus, .support-form input:focus, .support-form textarea:focus, .support-form select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.form-field > label { transition: color var(--dur-fast) var(--ease-out); }
.form-field:focus-within > label { color: var(--accent-text); }
.has-error input { animation: nudge 320ms var(--ease-out) 1; }
.field-error, .form-alert { animation: rise-in 260ms var(--ease-out) both; }
@keyframes nudge { 25% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }
.check-line input, .addon input, .pay-method input { transition: transform 160ms var(--ease-spring); }
.check-line input:active, .addon input:active, .pay-method input:active { transform: scale(0.9); }
details[open] > summary + * { animation: rise-in 260ms var(--ease-out) both; }

/* ── Reveal on scroll: motion.js marks only blocks below the fold; without it nothing is hidden ── */
.motion .reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease-out) var(--delay, 0ms), transform 720ms var(--ease-out) var(--delay, 0ms); }
.motion .reveal.is-visible { opacity: 1; transform: none; }
.num[data-counting] { font-variant-numeric: tabular-nums lining-nums; }

/* ── The live phone on the landing: floats, the target bar fills, the equity line draws ── */
.hero-phone .phone { animation: phone-float 7s ease-in-out infinite alternate; will-change: transform; }
.hero-phone.is-paused .phone, .hero-phone.is-paused .ph-live { animation-play-state: paused; }
@keyframes phone-float { from { transform: translateY(0); } to { transform: translateY(-14px); } }
.ph-bar i { transform-origin: left; animation: bar-in 1400ms var(--ease-out) 400ms both; transition: width 900ms var(--ease-out); }
@keyframes bar-in { from { transform: scaleX(0); } }
.ph-spark { display: block; width: 100%; height: 44px; margin-top: 4px; overflow: visible; }
.ph-spark polyline { vector-effect: non-scaling-stroke; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 0; animation: draw 1800ms var(--ease-out) 300ms both; }
.ph-spark circle { fill: var(--accent); }
@keyframes draw { from { stroke-dashoffset: 400; } }
.ph-live { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--profit); vertical-align: 1px; animation: live 2s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--profit) 0%, transparent); } 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--profit) 45%, transparent); } }
.ph-row [data-tick] { border-radius: var(--radius-xs); transition: background-color 600ms var(--ease-out); padding-inline: 2px; margin-inline: -2px; }
.ph-row [data-tick].is-tick { background: var(--accent-soft); transition-duration: 0ms; }

@media (prefers-reduced-motion: reduce) {
  .motion .reveal { opacity: 1; transform: none; transition: none; }
  .hero-phone .phone, .ph-live, .ph-spark polyline, .ph-bar i { animation: none; }
  .button:hover, .button:active, .market-tiles li:hover, .pt-card:hover, .step-row li:hover .step-i, .tabbar > a[aria-current="page"] svg, .pill:active { transform: none; }
  .button:hover svg, .mk-go:hover svg, .side-nav a:hover svg { transform: none; }
  .has-error input, .field-error, .form-alert, .mobile-nav[open] nav, .mobile-nav[open] nav a, .tab-more[open] .tab-more-menu, details[open] > summary + * { animation: none; }
}