/* FINICO landing — approved whole-page design v0 (27 Oct 2026), responsive implementation.
   Tokens from spec/tokens.json; desktop geometry follows visuals/FINICO-whole-page.svg landmarks. */
:root {
  --ink: #142A3E;
  --secondary: #566B7F;
  --blue: #096BEB;
  --pale: #EDF4FC;
  --rule: #D8E3EE;
  --white: #FFFFFF;
  --field-border: #B9CDE1;
  --focus: #0A4FB0;
  --font: "Segoe UI", "FINICO Arial Fallback", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(32px, 5.556vw, 80px);
  --inset: 4px;
  --header-h: 94px;
}

/* Approved stack is Segoe UI, Arial, sans-serif. Where Segoe UI is absent, the same local Arial-metric face
   is scaled to approach Segoe UI line widths so the approved line breaks hold. No font file is bundled. */
@font-face { font-family: "FINICO Arial Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); font-weight: 100 500; size-adjust: 94%; }
@font-face { font-family: "FINICO Arial Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 600 900; size-adjust: 94%; }

*, *::before, *::after { box-sizing: border-box; }
/* T94: anchors and focus stop 16 px below the sticky header (the header height follows the breakpoints). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html.smooth-scroll { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font);
  font-size: 23px;
  line-height: 34px;
  color: var(--ink);
  background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 21%, #F5F8FC 42%, #FFFFFF 64%, #EFF5FB 100%);
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
h1, h2, h3, p, dl, dd, ol, ul, blockquote, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 50; padding: 12px 18px;
  background: var(--white); color: var(--ink); border-radius: 12px; font-size: 18px; line-height: 24px;
  box-shadow: 0 6px 24px rgba(19, 56, 93, .16);
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.button:focus-visible, .pill:focus-visible { outline-offset: 3px; border-radius: 999px; }

.container { width: min(1280px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.scene { position: relative; }

/* Type scale (desktop 1440, tokens.typeDesktop) */
h1 { font-size: clamp(64px, 5.694vw, 82px); line-height: 1.073; font-weight: 600; letter-spacing: -0.5px; }
.h-overview { font-size: clamp(52px, 4.583vw, 66px); line-height: 1.152; font-weight: 600; letter-spacing: -0.4px; }
.h-support { font-size: clamp(44px, 3.75vw, 56px); line-height: 1.16; font-weight: 600; letter-spacing: -0.3px; }
.h-plans { font-size: clamp(44px, 3.75vw, 54px); line-height: 1.167; font-weight: 600; letter-spacing: -0.3px; }
.h-detail { font-size: clamp(42px, 3.472vw, 52px); line-height: 1.173; font-weight: 600; letter-spacing: -0.3px; }
.h-closing { font-size: clamp(46px, 4.028vw, 58px); line-height: 1.14; font-weight: 600; letter-spacing: -0.3px; }
.h-faq { font-size: 44px; line-height: 52px; font-weight: 600; }
.body, .lead { color: var(--secondary); font-size: 23px; line-height: 34px; }
.lead { font-size: 24px; line-height: 35px; }
.note { color: var(--secondary); font-size: 18px; line-height: 28px; }
.muted { color: var(--secondary); }
.fineprint { color: var(--secondary); font-size: 17px; line-height: 24px; }
.agent-label { color: var(--blue); font-size: 18px; line-height: 24px; font-weight: 600; }
.card-title { font-size: 24px; line-height: 32px; font-weight: 600; }
.block-title { font-size: 25px; line-height: 32px; font-weight: 600; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px;
  border-radius: 999px; border: 1px solid transparent; font-size: 22px; line-height: 28px; font-weight: 600;
  text-decoration: none; white-space: nowrap; transition: background-color .15s, box-shadow .15s, border-color .15s;
}
.button-primary { background: var(--blue); color: var(--white); }
.button-primary:hover { background: #075BC9; }
.button-outline { background: var(--white); color: var(--blue); border-color: #B5C9DD; }
.button-outline:hover { border-color: var(--blue); }
.text-link, .text-button {
  color: var(--blue); background: none; border: 0; padding: 0; font-size: 22px; line-height: 28px; font-weight: 500;
  text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
}
.text-link:hover, .text-button:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Header — sticky on every page (T94, owner blocks 121, 123): the approved heights 94 / 80 / 68 px, white at
   90 % over a blur (a solid white where the blur is missing, the reader asks for less transparency or more
   contrast, and on a phone); a thin shadow once the page has scrolled (app.js sets .is-scrolled). It never
   hides on scrolling down. Not sticky in a low window (≤ 500 px: zoom 200 %, a phone on its side) or in print. */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(1.8) blur(16px); backdrop-filter: saturate(1.8) blur(16px);
  transition: box-shadow .2s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--white); } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .site-header { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--rule), 0 6px 24px rgba(19, 56, 93, .08); }
.site-header.is-scrolled .header-row { border-bottom-color: transparent; }
.scroll-marker { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
@media (max-height: 500px) {
  html { scroll-padding-top: 16px; }
  .site-header { position: relative; }
  .site-header.is-scrolled { box-shadow: none; }
  .site-header.is-scrolled .header-row { border-bottom-color: var(--rule); }
}
@media print { .site-header { position: static; } }
.header-row { height: var(--header-h); display: flex; align-items: center; border-bottom: 1px solid var(--rule); }
/* T94 (Codex r1, DESIGN.md §8): every link and button of the header, the menu and the footer is at least 44 px
   high at every width — check.mjs reads min-height of these rules. T111 (the T96 gate with widths): and at least
   44 px wide — the kk «Кіру» was 38 px in the header and 33 px in the footer. The header and footer links get 8 px
   of padding left and right, given back by negative margins, so no text and no neighbour moves; min-width
   guarantees 44 px for any label (check.mjs reads it). */
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font-size: 31px; line-height: 1; font-weight: 700; letter-spacing: -0.5px; text-decoration: none; color: var(--ink); padding-block: 6px; }
.header-nav { margin-left: auto; display: flex; gap: 72px; margin-right: 47px; }
.header-nav a { min-height: 44px; min-width: 44px; font-size: 18px; line-height: 24px; text-decoration: none; color: var(--ink); padding: 10px 8px; margin-inline: -8px; }
.header-nav a:hover { color: var(--blue); }
.header-cta { min-height: 48px; width: 190px; padding: 0 20px; }
.menu-toggle {
  margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--white); font-size: 16px; line-height: 22px; font-weight: 500;
}
.mobile-menu {
  border-bottom: 1px solid var(--rule); background: rgba(255, 255, 255, .97);
  max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu nav { display: grid; gap: 4px; padding-block: 12px 20px; }
.mobile-menu a { min-height: 44px; min-width: 44px; font-size: 18px; line-height: 24px; padding: 12px 0; text-decoration: none; }
.mobile-menu .button { margin-top: 8px; justify-self: start; min-width: 200px; }

/* Scene 1 — hero */
.hero { padding-bottom: 152px; overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) min(560px, 44%); column-gap: 40px; padding-right: 39px; }
.hero-copy { padding-top: 56px; }
.hero .lead { margin-top: 80px; padding-left: var(--inset); }
.hero .lead-second { margin-top: 25px; }
.hero-actions { display: flex; align-items: center; gap: 36px; margin-top: 40px; padding-left: var(--inset); flex-wrap: wrap; }
.button-large { width: 216px; padding: 0 20px; }
.hero-fineprint { margin-top: 81px; padding-left: var(--inset); }
.hero-visual { position: relative; padding-top: 115px; }
.hero-glow {
  position: absolute; z-index: -1; left: 50%; top: 50%; width: 960px; height: 940px; transform: translate(-46%, -52%);
  background: radial-gradient(closest-side, rgba(205, 229, 255, .85), rgba(220, 235, 250, 0));
  pointer-events: none;
}
.ring-card {
  position: relative; border-radius: 38px; padding: 2px 4px 8px 4px;
  background: linear-gradient(90deg, #FFFFFF 0%, #B6C9DD 50%, #F7FBFF 65%, #C6D7E8 100%);
  box-shadow: 0 22px 50px rgba(19, 56, 93, .11);
}
.ring-card-inner { background: var(--white); border-radius: 35px; padding: 33px 29px 30px; }
.ring-card-head { display: flex; justify-content: space-between; align-items: baseline; padding-inline: 6px 8px; }
.ring-title { font-size: 22px; line-height: 28px; font-weight: 600; }
.ring-period { color: var(--secondary); font-size: 18px; line-height: 24px; }
.ring-floor {
  position: absolute; left: 50%; bottom: -18px; width: 440px; height: 50px; transform: translateX(-46%);
  background: rgba(35, 79, 126, .13); border-radius: 50%; filter: blur(25px); z-index: -1; pointer-events: none;
}
.ring-wrap { position: relative; width: 380px; max-width: 100%; margin: 0 auto; }
.ring { width: 100%; height: auto; overflow: visible; }
.ring-depth { fill: none; stroke: #C8D9E8; }
.ring-base { fill: none; stroke: transparent; }
.seg { cursor: pointer; outline: none; }
.seg-arc { fill: none; transition: stroke-width .14s var(--ease); }
.seg-focus { fill: none; stroke: var(--focus); stroke-width: 0; transition: stroke-width .14s var(--ease); }
.seg.is-selected .seg-arc { stroke-width: 47px; }
.seg:hover .seg-arc { stroke-width: 47px; }
.seg:focus-visible .seg-focus { stroke-width: 55px; }
.ring-center {
  position: absolute; left: 0; right: 0; top: 0; height: calc(366 / 382 * 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; padding-top: 4px;
}
.ring-total { font-size: 58px; line-height: 62px; font-weight: 600; letter-spacing: -0.5px; }
.ring-unit { color: var(--secondary); font-size: 19px; line-height: 26px; margin-top: 6px; }
.ring-selected {
  display: flex; align-items: center; gap: 13px; min-height: 62px; padding: 0 28px 0 21px; margin-top: 8px;
  background: #F0F6FD; border-radius: 16px; font-size: 20px; line-height: 28px;
}
.ring-selected .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); flex: none; }
.ring-selected-amount { margin-left: auto; font-size: 22px; font-weight: 600; white-space: nowrap; }

/* Scene 2 — intake */
.intake { padding-bottom: 80px; }
.intake-grid { display: grid; grid-template-columns: minmax(0, 1fr) min(709px, 55.9%); column-gap: 40px; padding: 0 8px 0 var(--inset); }
.intake-copy { padding-top: 0; }
.intake-copy .body { margin-top: 76px; }
.pill-tabs { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 74px; }
/* T109 (T96 gate, DESIGN.md §8): a tab is at least 44 px high at every width (was 42 px from 760 px). */
.pill {
  min-height: 44px; min-width: 111px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--white); color: var(--secondary); font-size: 18px; line-height: 24px; font-weight: 500;
  transition: background-color .15s, color .15s, border-color .15s;
}
.pill:hover { border-color: #9DB7D1; color: var(--ink); }
.pill.is-selected { background: var(--blue); border-color: var(--blue); color: var(--white); }
.intake .pill:first-child { min-width: 150px; }
.intake-note { font-size: 20px; line-height: 31px; margin-top: 26px; }

.intake-panel { background: var(--pale); border-radius: 34px; padding: 34px 34px 40px 34px; outline: none; }
.demo-disclosure {
  font-size: 17px; line-height: 24px; color: var(--ink); background: var(--white); border: 1px solid #C5D8EA;
  border-radius: 14px; padding: 10px 16px; margin-bottom: 16px;
}
.source-card { background: var(--white); border-radius: 21px; padding: 30px 27px 27px; min-height: 192px; }
.source-head { display: flex; flex-wrap: wrap; gap: 0 17px; align-items: flex-start; }
.doc-icon { color: var(--blue); flex: none; margin-top: 2px; }
.source-name { display: block; font-size: 24px; line-height: 30px; font-weight: 600; }
.source-sub { color: var(--secondary); font-size: 18px; line-height: 26px; margin-top: 12px; }
.source-head .source-sub { margin-top: 18px; }
.source-head > div { flex: 1 1 0; }
.source-totals { display: flex; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 22px; font-size: 22px; line-height: 28px; font-weight: 600; }
.file-toggle { font-size: 17px; line-height: 22px; margin-left: auto; margin-top: -10px; text-align: right; }
.source-head > div { min-width: 0; }
.file-excerpt {
  margin: 8px 0 0; padding: 14px 16px; background: #F5F9FD; border-radius: 12px; border: 1px solid var(--rule);
  font-family: var(--font); font-size: 16px; line-height: 24px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto;
}
.demo-textarea {
  display: block; width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--field-border); border-radius: 12px;
  font-size: 20px; line-height: 28px; resize: vertical; background: var(--white);
}
.transcript { font-size: 20px; line-height: 29px; margin-top: 12px; }
.dialog-flow { padding: 30px 4px 0; }
.agent-question { font-size: 23px; line-height: 32px; margin-top: 12px; }
.reply-slot { display: flex; justify-content: flex-end; margin-top: 30px; }
.reply-bubble, .reply-button {
  width: min(558px, 100%); background: #DDEBF9; border-radius: 20px; padding: 24px 26px 25px; font-size: 21px; line-height: 31px; text-align: left;
}
.reply-button { border: 2px dashed #8DB4E0; color: var(--ink); }
.reply-button:hover { background: #D2E4F7; }
.intake-result {
  display: flex; gap: 14px; align-items: flex-start; margin: 37px 4px 0; padding-top: 32px; border-top: 1px solid #C5D8EA;
}
.check-icon { color: var(--blue); margin-top: 6px; flex: none; }
.result-title { font-size: 21px; line-height: 28px; font-weight: 600; }
.result-sub { color: var(--secondary); font-size: 18px; line-height: 26px; margin-top: 10px; }
.reset-demo { font-size: 18px; margin: 12px 4px 0; }

/* Scene 3 — overview */
.overview { padding-bottom: 105px; }
.overview > .container { text-align: center; }
.overview-lead { font-size: 25px; line-height: 34px; margin-top: 72px; }
.overview-card {
  text-align: left; margin-top: 46px; background: var(--white); border: 1px solid #DCE7F1; border-radius: 32px;
  padding: 36px 40px 46px; box-shadow: 0 22px 50px rgba(19, 56, 93, .11);
}
.overview-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; }
.overview-head .card-title { font-size: 28px; line-height: 34px; }
.overview-head .muted { font-size: 20px; line-height: 28px; }
.metrics { display: grid; grid-template-columns: minmax(0, 293fr) minmax(0, 326fr) minmax(0, 581fr); margin-top: 38px; padding-bottom: 32px; border-bottom: 1px solid var(--rule); }
.metric dt { color: var(--secondary); font-size: 20px; line-height: 28px; }
.metric-value { display: block; font-size: 58px; line-height: 64px; font-weight: 600; letter-spacing: -0.5px; margin-top: 6px; white-space: nowrap; }
.metric-diff { border-left: 1px solid var(--rule); padding-left: 46px; }
.metric-diff dd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 14px; }
.metric-value-secondary { font-size: 40px; line-height: 48px; font-weight: 600; white-space: nowrap; }
.metric-note { font-size: 17px; line-height: 24px; }
.overview-columns { display: grid; grid-template-columns: minmax(0, 538fr) minmax(0, 558fr); column-gap: clamp(48px, 7.2vw, 104px); margin-top: 30px; }
.categories { display: flex; flex-direction: column; }
.bars { margin-top: 24px; display: grid; gap: 0; }
.bar-row {
  display: grid; grid-template-columns: 1fr auto; width: 100%; background: none; border: 0; padding: 12px 0 10px; text-align: left;
  font-size: 21px; line-height: 28px; border-radius: 8px; row-gap: 11px;
}
.bar-amount { font-weight: 600; white-space: nowrap; }
.bar-track { grid-column: 1 / -1; height: 9px; border-radius: 5px; background: #EAF0F6; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 5px; background: #1576DD; transition: background-color .14s var(--ease); }
.bar-row.is-selected .bar-fill { background: #075EC8; }
.bar-row:hover .bar-fill { background: #0A63D0; }
.bar-row:focus-visible { outline-offset: 4px; }
.categories-note { margin-top: auto; padding-top: 24px; }
.categories-note a { color: inherit; text-decoration: none; }
.categories-note a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.legend { display: flex; gap: 77px; margin-top: 26px; font-size: 17px; line-height: 24px; }
.legend-item { display: inline-flex; align-items: center; gap: 10px; }
.legend-line { width: 28px; height: 3px; background: var(--blue); border-radius: 2px; }
.legend-line-dashed { background: repeating-linear-gradient(90deg, #829DB8 0 5px, transparent 5px 8px); }
.trend-plot { position: relative; margin-top: 10px; }
.trend-svg { max-width: 100%; height: auto; overflow: visible; }
.trend-svg .grid { stroke: #DFE8F0; stroke-width: 1; }
.trend-svg .axis { fill: var(--secondary); font-family: var(--font); }
.trend-svg .line-oct { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.trend-svg .line-sep { fill: none; stroke: #829DB8; stroke-width: 3; stroke-dasharray: 6 5; }
.trend-svg .dot-sep { fill: #829DB8; }
.trend-svg .pt { cursor: pointer; outline: none; }
.trend-svg .pt-hit { fill: transparent; }
.trend-svg .pt-dot { fill: var(--white); stroke: var(--blue); stroke-width: 2; transition: r .1s; }
.trend-svg .pt.is-active .pt-dot { r: 7; stroke-width: 3; }
.trend-svg .pt:focus-visible .pt-hit { fill: none; stroke: var(--focus); stroke-width: 3; }
.chart-tip {
  position: absolute; z-index: 3; white-space: nowrap; padding: 10px 14px; background: var(--white); border: 1px solid var(--rule);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(19, 56, 93, .14); font-size: 16px; line-height: 23px; pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
}
.chart-tip strong { display: block; font-weight: 600; }
.chart-tip .tip-sep { color: var(--secondary); }
.trend-summary { font-size: 22px; line-height: 30px; font-weight: 600; margin-top: 4px; }
.trend .note { margin-top: 6px; }

/* Scene 4 — record/source */
.record { padding-bottom: 156px; }
.record-grid { display: grid; grid-template-columns: minmax(0, 1fr) min(722px, 56.9%); column-gap: 40px; padding-left: var(--inset); padding-right: 8px; }
.record-copy .body { margin-top: 82px; }
.record-row { display: flex; align-items: center; gap: 32px; margin-top: 82px; }
.record-card {
  flex: 0 1 442px; display: grid; text-align: left; background: var(--white); border: 1px solid var(--rule); border-radius: 20px;
  padding: 23px 27px 28px; transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.record-card:hover { border-color: #9DB7D1; }
.record-card.is-selected { border-color: #B9CDE1; }
.record-meta { color: var(--secondary); font-size: 20px; line-height: 28px; }
.record-amount { font-size: 42px; line-height: 48px; font-weight: 600; margin-top: 18px; white-space: nowrap; }
.record-sub { color: var(--secondary); font-size: 19px; line-height: 26px; margin-top: 24px; }
.record-arrow { color: var(--blue); flex: none; }
.record-source { background: var(--white); border: 1px solid var(--rule); border-radius: 28px; overflow: hidden; }
.record-source-inner { padding: 22px 33px 33px; }
.source-link { display: flex; align-items: center; gap: 11px; margin-top: 10px; }
.source-link .text-button { font-size: 19px; line-height: 26px; }
.source-excerpt { margin-top: 10px; background: #EFF5FC; border-radius: 12px; padding: 18px 21px 22px; font-size: 23px; line-height: 33px; }
.record-source .agent-label { margin-top: 31px; }
.agent-text { font-size: 21px; line-height: 30px; margin-top: 10px; }
.allocation { margin-top: 40px; }
.alloc-fields { display: grid; grid-template-columns: 308fr 329fr; gap: 18px; }
.field label { display: block; color: var(--secondary); font-size: 16px; line-height: 20px; }
.alloc-fields .field { position: relative; border: 1px solid var(--field-border); border-radius: 12px; padding: 10px 16px 9px; background: var(--white); }
.alloc-fields .field:focus-within { border-color: var(--blue); outline: 3px solid var(--focus); outline-offset: 2px; }
.alloc-fields .field.has-error { border-color: #B3261E; }
.alloc-fields .field-input { display: flex; align-items: baseline; gap: 5px; font-size: 21px; line-height: 28px; font-weight: 600; }
/* T109 (T96 gate, DESIGN.md §8): the input is a 44 × 44 px target inside the same box — 8 px of padding above
   and below, given back by negative margins, so neither the text nor the field moves (it was 41 × 28 px). */
.alloc-fields input { border: 0; padding: 8px 0; margin-block: -8px; min-width: 44px; max-width: 9ch; font-weight: 600; background: transparent; outline: none; field-sizing: content; }
.field-error { color: #B3261E; font-size: 15px; line-height: 20px; margin-top: 4px; font-weight: 400; }
.alloc-actions { display: flex; align-items: center; gap: 12px 20px; margin-top: 25px; flex-wrap: wrap; }
.alloc-total { font-size: 20px; line-height: 26px; font-weight: 600; margin-right: auto; }
.alloc-actions .button { width: 369px; max-width: 100%; }
.alloc-cancel { font-size: 18px; }
.alloc-status { font-size: 18px; line-height: 26px; margin-top: 12px; min-height: 0; }
.alloc-status:empty { display: none; }
.alloc-status.is-ok { color: #0B5E2E; }
.alloc-status.is-info { color: var(--ink); }

/* Scene 5 — obligations */
.conditions { padding-bottom: 180px; }
.conditions-grid { display: grid; grid-template-columns: minmax(0, 1fr) min(605px, 47.7%); grid-template-rows: auto 1fr; grid-template-areas: "copy panel" "needs panel"; column-gap: 40px; padding-left: var(--inset); padding-right: 8px; }
.conditions-copy { grid-area: copy; }
.debts-panel { grid-area: panel; }
.needs { grid-area: needs; align-self: start; }
.conditions-copy { padding-top: 20px; }
.conditions-copy .body { margin-top: 80px; }
.conditions .pill-tabs { gap: 12px; margin-top: 70px; }
.conditions .pill { min-width: 121px; }
.conditions .pill[data-debt="installment"] { min-width: 169px; }
.conditions .pill[data-debt="credit"] { min-width: 133px; }
.needs { max-width: 562px; margin-top: 50px; }
.needs-title { font-size: 27px; line-height: 34px; font-weight: 600; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.needs-list { margin-top: 12px; }
.needs-list div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 20px; line-height: 28px; }
.needs-list dd { color: var(--secondary); font-size: 19px; text-align: right; }
.needs .button-outline { margin-top: 26px; width: 241px; }
.conditions-help { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 16px; background: var(--white); font-size: 18px; line-height: 27px; }
.conditions-help p + p { margin-top: 10px; color: var(--secondary); }

.debts-panel { background: linear-gradient(90deg, #E4F1FF 0%, #FFFFFF 100%); border-radius: 34px; padding: 30px 40px 60px 38px; outline: none; }
.debts-label { color: var(--secondary); font-size: 22px; line-height: 28px; }
.debts-total { font-size: 56px; line-height: 64px; font-weight: 600; margin-top: 8px; white-space: nowrap; letter-spacing: -0.3px; }
.debts-list { margin-top: 18px; border-top: 1px solid #C9DBED; padding-top: 18px; }
.debts-list div { display: flex; justify-content: space-between; padding: 6px 0 7px; font-size: 22px; line-height: 32px; border-radius: 8px; transition: background-color .18s; }
.debts-list dd { font-size: 24px; font-weight: 600; white-space: nowrap; }
.debts-list div.is-current { background: rgba(9, 107, 235, .07); margin-inline: -10px; padding-inline: 10px; }
.debt-context { margin-top: 30px; }
.payment-card { background: var(--white); border-radius: 20px; padding: 22px 27px 22px 24px; min-height: 155px; }
.payment-label { color: var(--secondary); font-size: 19px; line-height: 26px; }
.payment-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin-top: 14px; }
.payment-amount { font-size: 34px; line-height: 40px; font-weight: 600; white-space: nowrap; }
.payment-amount.payment-unknown { font-size: 26px; line-height: 34px; white-space: normal; }
.payment-date { font-size: 23px; line-height: 30px; font-weight: 600; }
.payment-status { color: var(--secondary); font-size: 18px; line-height: 26px; margin-top: 10px; }
.debts-note { font-size: 17px; line-height: 24px; margin-top: 24px; padding-bottom: 26px; border-bottom: 1px solid #C9DBED; }
.agent-block { margin-top: 30px; }
.agent-block .agent-text { font-size: 22px; line-height: 33px; margin-top: 12px; }

/* Scene 6 — savings */
.savings { padding-bottom: 140px; }
.savings-grid { display: grid; grid-template-columns: min(580px, 46%) minmax(0, 564px); grid-template-rows: auto 1fr; grid-template-areas: "goal intro" "goal plans"; justify-content: space-between; padding-left: var(--inset); padding-right: 0; column-gap: 40px; }
.plans-intro { grid-area: intro; }
.goal { grid-area: goal; align-self: start; }
.plans { grid-area: plans; }
.goal { padding-top: 14px; }
.goal-title { font-size: 25px; line-height: 32px; font-weight: 600; }
.goal-figures { display: flex; align-items: baseline; gap: 12px 48px; flex-wrap: wrap; margin-top: 22px; }
.goal-saved { font-size: 70px; line-height: 76px; font-weight: 600; letter-spacing: -1px; white-space: nowrap; }
.goal-of { color: var(--secondary); font-size: 24px; line-height: 30px; white-space: nowrap; }
.goal-caption { font-size: 20px; margin-top: 18px; }
.goal-bar { height: 30px; border-radius: 15px; background: #DFE9F3; margin-top: 30px; overflow: hidden; }
.goal-bar-fill { display: block; height: 100%; border-radius: 15px; background: linear-gradient(90deg, #064DBD, #1384FF); }
.goal-remaining { font-size: 24px; line-height: 32px; font-weight: 600; margin-top: 22px; }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 70px -60px 0 -60px; max-width: calc(100% + 120px); }
.steps::before { content: ""; position: absolute; left: calc(12.5%); right: calc(12.5%); top: 12px; height: 3px; background: #B8CBDF; }
.steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.step-node { width: 29px; height: 29px; border-radius: 50%; background: var(--white); border: 3px solid var(--blue); transition: box-shadow .16s var(--ease), transform .16s var(--ease); }
.step-amount { font-size: 21px; line-height: 28px; font-weight: 600; margin-top: 26px; }
.step-label { color: var(--secondary); font-size: 16px; line-height: 22px; margin-top: 6px; }
.steps.is-emphasized .step-node { box-shadow: 0 0 0 6px rgba(9, 107, 235, .14); }
.steps-note { margin-top: 56px; }
.plans-intro .body { margin-top: 82px; }
.plan-fields { display: grid; grid-template-columns: 220px minmax(0, 320px); gap: 24px; margin-top: 54px; }
.plan-fields .field label { font-size: 18px; line-height: 24px; margin-bottom: 14px; }
.field-input-large { display: flex; align-items: center; gap: 6px; height: 66px; border: 1px solid #B8CCDF; border-radius: 12px; background: var(--white); padding: 0 20px; font-size: 25px; font-weight: 600; }
.field-input-large:focus-within { border-color: var(--blue); outline: 3px solid var(--focus); outline-offset: 2px; }
/* T109: the input fills the height of its box (66 / 56 px), so the whole field is the target (it was 34 / 28 px). */
.field-input-large input { align-self: stretch; border: 0; padding: 0; min-width: 2ch; max-width: 10ch; font-weight: 600; background: transparent; outline: none; field-sizing: content; }
.field-select { padding: 0; position: relative; font-weight: 400; }
.field-select select {
  appearance: none; -webkit-appearance: none; width: 100%; height: 100%; border: 0; background: transparent; padding: 0 44px 0 20px;
  font-size: 21px; color: var(--secondary); outline: none; border-radius: 12px; cursor: pointer;
}
.field-select select.has-value { color: var(--ink); }
.field-select::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--secondary); border-bottom: 2px solid var(--secondary); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.plan-form .note { margin-top: 30px; }
/* T109 (T96 gate, defect 4): at least the approved 244 px, wider when the label is longer (kk «Жоспарларды салыстыру»). */
.plan-form .button { margin-top: 26px; min-width: 244px; }
.plan-result { margin-top: 20px; padding: 16px 20px; border-radius: 16px; background: var(--pale); font-size: 18px; line-height: 27px; }
.plan-result p + p { margin-top: 8px; }
.plan-result strong { font-weight: 600; }

/* Questions */
.faq { padding-bottom: 88px; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 687px; column-gap: 40px; border-top: 1px solid var(--rule); padding: 62px 0 0 var(--inset); margin-left: calc(var(--inset) + max(0px, (100% - 1280px) / 2)); }
.faq-grid.container { width: min(1272px, 100% - 2 * var(--gutter)); margin-inline: auto; padding-left: 0; }
.faq-list { display: grid; }
.faq-item { padding-bottom: 32px; }
.faq-item + .faq-item { border-top: 1px solid var(--rule); padding-top: 22px; }
.faq-item h3 button {
  background: none; border: 0; padding: 4px 0; text-align: left; font-size: 25px; line-height: 32px; font-weight: 600; min-height: 44px;
  display: inline-flex; align-items: center; gap: 10px;
}
.faq-item h3 button::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--secondary); border-bottom: 2px solid var(--secondary); transform: rotate(45deg) translateY(-3px); opacity: 0; transition: opacity .15s; }
.faq-item h3 button:hover::after, .faq-item h3 button:focus-visible::after { opacity: 1; }
.faq-item h3 button[aria-expanded="false"]::after { opacity: 1; transform: rotate(-45deg); }
.faq-item p { color: var(--secondary); font-size: 21px; line-height: 31px; margin-top: 8px; }

/* Closing + footer */
.closing { padding-bottom: 76px; }
.closing-inner { text-align: center; }
.closing .body { font-size: 24px; margin-top: 20px; }
.closing-cta { margin-top: 30px; width: 230px; }
/* Footer — dark, full width, no rounding (T94, owner blocks 121, 123). The background is the ink token. On it
   the page tokens secondary (2.66:1) and focus (1.93:1) fail, so inside the footer they are field-border
   (9.01:1) and white (14.68:1): the global focus ring turns white here. Text: white (14.68:1), rule
   (11.28:1), field-border (9.01:1). The only new value is the line over the bottom row — 24 % white,
   decorative. Column links are underlined only on hover; a button there looks like a link. */
.site-footer {
  --secondary: var(--field-border);
  --focus: var(--white);
  background: var(--ink); color: var(--white); padding: 72px 0 32px;
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.7fr)); gap: 40px 32px; align-items: start; width: min(1272px, 100% - 2 * var(--gutter)); }
.wordmark-footer { font-size: 30px; color: var(--white); }
.footer-tagline { color: var(--field-border); font-size: 17px; line-height: 24px; margin-top: 16px; }
.footer-h { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--white); margin-bottom: 8px; }
.footer-col ul { display: grid; }
.footer-col a, .footer-link {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 4px 8px; margin-inline: -8px; border: 0; background: none; text-align: left;
  font-size: 16px; line-height: 22px; color: var(--rule); text-decoration: none;
}
.footer-col a:hover, .footer-link:hover, .footer-lang:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 16px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .24); color: var(--field-border); font-size: 15px; line-height: 20px;
}
.footer-lang { margin-left: auto; color: var(--white); font-size: 16px; line-height: 22px; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }

.br-desktop { display: inline; }
/* T109 (T96 gate, defect 3): from 1300 px the section headings kept their two desktop lines with
   white-space: nowrap, and a line longer than its column ran under the panel next to it (ru from 1366 px, kk
   wider). Now the two lines hold by size: in the narrow left columns the heading is at most as large as its
   column allows (container units, ru line widths in the fallback font + 2.5 %), never above the type scale; a
   line that is still too long (another font, the kk text) wraps inside the column. The kk «Жинақ жоспарларын»
   needs 4 % less than the type scale to stay one line; the ru savings heading fits as it is. */
@media (min-width: 1300px) {
  .intake-copy, .record-copy, .conditions-copy, .plans-intro, .plans { min-width: 0; }
  .intake-copy, .record-copy, .conditions-copy, .plans-intro { container-type: inline-size; }
  .h-support { font-size: min(clamp(44px, 3.75vw, 56px), 9.7cqi); }
  .h-detail { font-size: min(clamp(42px, 3.472vw, 52px), 9.15cqi); }
  :lang(kk) .h-plans { font-size: min(clamp(44px, 3.75vw, 54px), 9.2cqi); }
}
/* T109 (T96 gate, defect 6): the four steps reach 60 px past the goal on each side; where the gap between the
   two columns is only 40 px (up to 1365 px), «4-е пополнение» ran into «Сумма пополнения» — there 20 px. The
   steps are narrower then, so a label that would come closer than 12 px to the next one takes two lines. */
@media (min-width: 1100px) and (max-width: 1365px) {
  .steps { margin-inline: -20px; max-width: calc(100% + 40px); }
  .step-label { max-width: calc(100% - 12px); }
}

.source-dialog {
  width: min(640px, calc(100% - 32px)); max-height: calc(100% - 48px); border: 0; border-radius: 24px; padding: 24px 26px 26px;
  color: var(--ink); box-shadow: 0 30px 80px rgba(19, 56, 93, .25);
}
.source-dialog::backdrop { background: rgba(20, 42, 62, .38); }
.source-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.source-dialog .note { margin-top: 6px; }
.source-dialog .file-excerpt { max-height: 60vh; }
.dialog-close { width: 44px; height: 44px; flex: none; border: 1px solid var(--rule); border-radius: 50%; background: var(--white); font-size: 26px; line-height: 1; }
/* T94: the links stand in the header row from 1200 px (app.js closes the menu there); narrower — «Меню». */
@media (min-width: 1200px) { .menu-toggle, .mobile-menu { display: none !important; } }

/* ---------- Tablet 760–1099 ---------- */
@media (max-width: 1099px) {
  :root { --gutter: 32px; --header-h: 80px; }
  .header-nav { gap: 32px; margin-right: 28px; }
  .header-cta { width: auto; padding: 0 24px; }
  h1 { font-size: 64px; line-height: 70px; }
  .h-overview { font-size: 54px; line-height: 62px; }
  .h-support, .h-plans { font-size: 46px; line-height: 54px; }
  .h-detail { font-size: 44px; line-height: 52px; }
  .h-closing { font-size: 48px; line-height: 56px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  .hero-copy { padding-top: 48px; }
  .hero .lead { margin-top: 40px; }
  .hero-fineprint { margin-top: 40px; }
  .hero-visual { padding-top: 56px; width: min(560px, 100%); margin-inline: auto; }
  .hero { padding-bottom: 104px; }
  .intake-grid, .record-grid, .conditions-grid { grid-template-columns: minmax(0, 1fr); padding-right: var(--inset); }
  /* Narrow: meaning → known debts/payment and agent context → missing conditions (handoff mobile table). */
  .conditions-grid { grid-template-rows: none; grid-template-areas: "copy" "panel" "needs"; }
  .intake-panel, .record-source, .debts-panel { margin-top: 48px; }
  .intake-copy .body, .record-copy .body, .conditions-copy .body { margin-top: 32px; }
  .pill-tabs { margin-top: 40px; }
  .record-row { margin-top: 48px; }
  .overview-lead { margin-top: 32px; }
  .metrics { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .metric-diff { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 22px; }
  .overview-columns { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  /* Narrow: heading/explanation → progress and contributions → plan inputs and action. */
  .savings-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "goal" "plans"; row-gap: 40px; padding-right: var(--inset); }
  .goal { padding-top: 0; max-width: 640px; }
  .steps { margin-inline: 0; max-width: 100%; }
  .plans-intro .body { margin-top: 32px; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .br-desktop { display: none; }
}

/* ---------- Mobile 360–759 ---------- */
@media (max-width: 759px) {
  :root { --gutter: 20px; --header-h: 68px; --inset: 0px; }
  body { font-size: 18px; line-height: 28px; }
  .header-nav { gap: 16px; margin-right: 0; }
  .header-nav a { font-size: 16px; }
  .wordmark { font-size: 26px; }
  h1 { font-size: clamp(42px, 11.5vw, 52px); line-height: 1.08; }
  .h-overview, .h-support, .h-plans, .h-detail, .h-closing { font-size: clamp(34px, 9.4vw, 38px); line-height: 1.12; }
  .h-faq { font-size: 32px; line-height: 38px; }
  .body, .lead, .overview-lead, .closing .body { font-size: 18px; line-height: 28px; }
  .note, .needs-list dd { font-size: 16px; line-height: 22px; }
  .fineprint { font-size: 14px; line-height: 20px; }
  .card-title, .block-title, .overview-head .card-title, .needs-title, .goal-title { font-size: 20px; line-height: 26px; }
  .hero-copy { padding-top: 36px; }
  .hero .lead { margin-top: 24px; }
  .hero .lead-second { margin-top: 14px; }
  .hero-actions { margin-top: 28px; gap: 12px 24px; }
  .button { font-size: 18px; min-height: 52px; }
  .button-large, .closing-cta, .alloc-actions .button, .plan-form .button, .needs .button-outline { width: 100%; max-width: 280px; }
  .text-link { font-size: 18px; }
  .hero-fineprint { margin-top: 24px; }
  .hero-visual { padding-top: 40px; }
  .hero { padding-bottom: 80px; }
  .ring-card-inner { padding: 22px 16px 18px; border-radius: 30px; }
  .ring-card { border-radius: 33px; }
  .ring-title { font-size: 20px; }
  .ring-period { font-size: 16px; }
  .ring-total { font-size: clamp(36px, 11vw, 46px); line-height: 1.1; }
  .ring-unit { font-size: 16px; margin-top: 2px; }
  .ring-selected { font-size: 17px; min-height: 52px; padding: 0 16px; gap: 10px; }
  .ring-selected-amount { font-size: 18px; }
  .intake, .overview, .record, .conditions, .savings, .faq { padding-bottom: 84px; }
  .intake-panel { padding: 16px 16px 24px; border-radius: 26px; margin-top: 32px; }
  .source-card { padding: 20px 18px; min-height: 0; }
  .source-name { font-size: 18px; line-height: 24px; overflow-wrap: break-word; }
  .source-head .source-sub { margin-top: 8px; }
  .file-toggle { margin: 6px 0 0 50px; text-align: left; justify-content: flex-start; flex-basis: 100%; }
  .record-row:has(.record-card[aria-expanded="false"]) .record-arrow { display: none; }
  .source-sub { font-size: 15px; line-height: 21px; }
  .source-totals { font-size: 17px; line-height: 24px; flex-direction: column; gap: 4px; }
  .dialog-flow { padding-top: 22px; }
  .agent-question { font-size: 18px; line-height: 27px; }
  .reply-slot { margin-top: 18px; }
  .reply-bubble, .reply-button { font-size: 17px; line-height: 25px; padding: 16px 18px; width: 92%; }
  .intake-result { margin-top: 24px; padding-top: 22px; }
  .result-title { font-size: 17px; line-height: 24px; overflow-wrap: anywhere; }
  .result-sub { font-size: 15px; line-height: 21px; }
  .intake-note { font-size: 16px; line-height: 22px; }
  .pill-tabs { margin-top: 28px; gap: 10px; }
  .pill, .intake .pill:first-child, .conditions .pill, .conditions .pill[data-debt] { min-width: 0; min-height: 44px; padding: 0 18px; font-size: 16px; }
  .overview-lead { margin-top: 16px; }
  .overview-card { padding: 22px 18px 26px; border-radius: 24px; margin-top: 32px; }
  .overview-head .muted { font-size: 15px; }
  .metrics { margin-top: 22px; column-gap: 12px; padding-bottom: 22px; }
  .metric dt { font-size: 16px; line-height: 22px; }
  .metric-value { font-size: clamp(30px, 9vw, 40px); line-height: 1.15; }
  .metric-value-secondary { font-size: 28px; line-height: 34px; }
  .metric-note { font-size: 15px; }
  .overview-columns { margin-top: 22px; row-gap: 40px; }
  .bars { margin-top: 12px; }
  .bar-row { font-size: 17px; line-height: 24px; row-gap: 8px; padding: 10px 0 8px; }
  .legend { gap: 28px; font-size: 15px; margin-top: 14px; }
  .trend-summary { font-size: 18px; line-height: 26px; }
  .chart-tip { font-size: 15px; }
  .record-row { flex-direction: column; align-items: stretch; gap: 0; margin-top: 32px; }
  .record-card { flex-basis: auto; padding: 18px 20px 20px; }
  .record-meta { font-size: 16px; }
  .record-amount { font-size: 34px; line-height: 40px; margin-top: 10px; }
  .record-sub { font-size: 16px; margin-top: 12px; }
  .record-arrow { transform: rotate(90deg); margin: 10px auto; }
  .record-source { margin-top: 0; border-radius: 22px; }
  .record-source-inner { padding: 18px 18px 22px; }
  .source-excerpt { font-size: 17px; line-height: 26px; padding: 14px 16px; }
  .agent-text, .agent-block .agent-text { font-size: 17px; line-height: 26px; }
  .allocation { margin-top: 26px; }
  .alloc-fields { grid-template-columns: 1fr; gap: 12px; }
  .alloc-actions { flex-direction: column; align-items: stretch; }
  .alloc-actions .button { max-width: none; }
  .alloc-total { font-size: 17px; }
  .alloc-status { font-size: 16px; line-height: 24px; }
  .conditions-copy { padding-top: 0; }
  .conditions .pill-tabs { margin-top: 28px; }
  .needs { margin-top: 28px; }
  .needs-list div { font-size: 16px; line-height: 22px; }
  .debts-panel { padding: 22px 18px 28px; border-radius: 26px; margin-top: 36px; }
  .debts-label { font-size: 16px; }
  .debts-total { font-size: 38px; line-height: 44px; }
  .debts-list div { font-size: 17px; line-height: 26px; }
  .debts-list dd { font-size: 18px; }
  .payment-card { padding: 18px; min-height: 0; }
  .payment-label { font-size: 15px; }
  .payment-amount { font-size: 28px; line-height: 34px; }
  .payment-amount.payment-unknown { font-size: 20px; line-height: 27px; }
  .payment-date { font-size: 18px; }
  .payment-status { font-size: 15px; line-height: 21px; }
  .debts-note { font-size: 14px; line-height: 20px; }
  .conditions-help { font-size: 16px; line-height: 24px; }
  .goal-saved { font-size: 48px; line-height: 54px; }
  .goal-of { font-size: 18px; }
  .goal-figures { gap: 4px 16px; }
  .goal-caption { font-size: 16px; margin-top: 8px; }
  .goal-bar { height: 20px; margin-top: 22px; }
  .goal-remaining { font-size: 18px; line-height: 26px; margin-top: 16px; }
  /* Compact vertical four-step sequence */
  .steps { display: block; margin: 32px 0 0; }
  .steps::before { left: 13px; right: auto; top: 14px; bottom: 14px; width: 3px; height: auto; }
  .steps li { display: grid; grid-template-columns: 29px auto 1fr; align-items: center; column-gap: 16px; text-align: left; padding: 8px 0; }
  .step-amount { margin-top: 0; font-size: 18px; }
  .step-label { margin-top: 0; font-size: 15px; }
  .steps-note { margin-top: 24px; }
  .plan-fields { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
  .plan-fields .field label { font-size: 16px; margin-bottom: 8px; }
  .field-input-large { height: 56px; font-size: 20px; padding: 0 16px; }
  .field-select select { font-size: 18px; padding-left: 16px; }
  .plan-form .note { margin-top: 18px; }
  .plan-result { font-size: 16px; line-height: 24px; }
  .faq-grid { padding-top: 40px; row-gap: 20px; }
  .faq-item h3 button { font-size: 19px; line-height: 26px; }
  .faq-item p { font-size: 16px; line-height: 24px; }
  .faq-item { padding-bottom: 22px; }
  .closing-cta { max-width: 280px; }
  /* T94: a solid header on a phone (no blur over the moving hero); footer — «Продукт» and «Помощь» side by
     side, «Документы» and the bottom row across; no accordions. */
  .site-header { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-footer { padding: 48px 0 24px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .footer-col-docs { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 0; }
  .footer-lang { margin-left: 0; }
}
/* T94: the header's links stand in a line from 1200 px. Narrower (phone and tablet, where they wrapped into
   2–4 lines and pushed «Начать учёт» off the screen) the header is the logo, «Начать учёт» and «Меню»; the
   links are in the menu. The kk links fit in a line only from 1150 px, 6 px from the logo; at 1200 px — 50.
   Without scripts the links stay in the row and the button goes. */
@media (max-width: 1199px) {
  .has-js .header-nav, .header-cta { display: none; }
  .menu-toggle:not([hidden]) { display: inline-flex; align-items: center; }
}
/* «Начать учёт» next to «Меню» from 390 px (narrower, the kk label does not fit: the button stays in the menu);
   then the menu does not repeat it. */
@media (min-width: 390px) and (max-width: 1199px) {
  .has-js .header-cta { display: inline-flex; margin-left: auto; }
  .has-js .header-cta + .menu-toggle { margin-left: 12px; }
  .has-js .mobile-menu .button { display: none; }
}
@media (min-width: 390px) and (max-width: 759px) {
  .has-js .header-cta { min-height: 44px; padding: 0 16px; font-size: 16px; line-height: 22px; }
}
@media (max-width: 359px) {
  :root { --gutter: 16px; }
}

/* Reduced motion: no interpolation, looping or smooth scrolling */
@media (prefers-reduced-motion: reduce) {
  html.smooth-scroll { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
html.motion-reduced { scroll-behavior: auto; }
html.motion-reduced *, html.motion-reduced *::before, html.motion-reduced *::after { transition: none !important; animation: none !important; }

/* Inputs size to their content where supported; otherwise a fixed width that fits the example values. */
@supports not (field-sizing: content) {
  .alloc-fields input { width: 5ch; }
  .field-input-large input { width: 6ch; }
}
@media (min-width: 760px) {
  .source-head .source-sub { margin-left: -50px; }
  /* T109 (T96 gate, defect 5): the file name never gets narrower than itself; where it and «Показать учебный
     файл» do not fit in one row (1100–1300 px), the button wraps to a row of its own instead of covering it. */
  .source-head > div { min-width: min-content; }
}

/* ---------- T10 additions (KZ): legal draft pages. Same tokens, no new colours.
   T94: the footer's legal links and language moved into the dark footer above. ---------- */
.legal-body { font-size: 17px; line-height: 26px; }
/* T94: the legal header sticks like the landing's (no scripts here: its line is always on). */
.legal-header { box-shadow: 0 1px 0 var(--rule); }
.legal-header-row { display: flex; align-items: center; justify-content: space-between; min-height: 80px; }
.legal-lang { font-size: 17px; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }
.legal-main { max-width: 860px; padding-block: 8px 64px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.legal-nav a { font-size: 16px; line-height: 22px; color: var(--secondary); min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }
.legal-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; }
.legal-banner { margin-top: 24px; padding: 14px 18px; border-radius: 14px; background: var(--pale); color: var(--ink); font-size: 16px; line-height: 23px; }
/* T66 (e2e 31.10, defect 2): a word or a link wider than the column (the address of the data protection
   authority in the privacy policy and the contacts, «конфиденциальности» in the title at 320 px) breaks
   inside the column instead of widening the page. Inherited by every element of the document; tables
   still scroll inside .legal-table. */
.legal-doc { margin-top: 28px; overflow-wrap: break-word; }
.legal-doc h1 { font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.5px; }
.legal-doc h2 { font-size: 26px; line-height: 34px; font-weight: 600; margin-top: 40px; }
.legal-doc h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin-top: 28px; }
.legal-doc h4 { font-size: 17px; line-height: 26px; font-weight: 600; margin-top: 20px; }
.legal-doc p, .legal-doc ul, .legal-doc ol, .legal-doc blockquote, .legal-doc .legal-table { margin-top: 12px; }
.legal-doc ul { list-style: disc; padding-left: 24px; }
.legal-doc ol { list-style: decimal; padding-left: 28px; }
.legal-doc li + li { margin-top: 6px; }
.legal-doc li > ul, .legal-doc li > ol { margin-top: 6px; }
.legal-doc blockquote { border-left: 3px solid var(--rule); padding-left: 16px; color: var(--secondary); font-size: 15px; line-height: 22px; }
.legal-doc code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--pale); border-radius: 6px; padding: 1px 5px; overflow-wrap: anywhere; }
.legal-doc hr { border: 0; border-top: 1px solid var(--rule); margin: 32px 0; }
.legal-doc a { color: var(--blue); text-underline-offset: 3px; }
.legal-table { overflow-x: auto; }
.legal-table table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 23px; }
.legal-table th, .legal-table td { border-bottom: 1px solid var(--rule); padding: 8px 12px 8px 0; text-align: left; vertical-align: top; }
.legal-lawyer { background: none; color: var(--ink); font-weight: 600; }
.legal-footer { padding-top: 48px; }
@media (max-width: 759px) {
  .legal-doc h1 { font-size: 30px; line-height: 36px; }
  .legal-doc h2 { font-size: 22px; line-height: 29px; }
}
/* T66: below 360 px a long title word fits whole (288 px column at 320 px). */
@media (max-width: 359px) {
  .legal-doc h1 { font-size: 26px; line-height: 32px; }
}

/* ---------- Support dialog (task T27) ---------- */
.support-form { display: grid; gap: 14px; }
.support-contact { color: var(--secondary); font-size: 16px; line-height: 22px; }
.support-field { display: grid; gap: 6px; }
.support-field label { color: var(--ink); font-size: 16px; line-height: 20px; font-weight: 500; }
.support-field select, .support-field textarea, .support-field input {
  width: 100%; border: 1px solid var(--field-border); border-radius: 12px; background: var(--white); padding: 12px 14px; font-size: 17px; line-height: 24px;
}
.support-field textarea { resize: vertical; min-height: 132px; }
.support-field select:focus, .support-field textarea:focus, .support-field input:focus { border-color: var(--blue); outline: 3px solid var(--focus); outline-offset: 2px; }
.support-field [aria-invalid="true"] { border-color: #B3261E; }
.support-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.support-actions .button { min-width: 200px; }
.support-status { font-size: 16px; line-height: 23px; padding: 12px 14px; border-radius: 12px; background: var(--pale); color: var(--ink); }
.support-status.is-error { background: #FDECEA; color: #8C1D18; }
.closed-cases { display: grid; gap: 8px; }
.closed-stored { display: grid; gap: 8px; }
.closed-stored-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.closed-stored-row code { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.closed-cases li { padding: 10px 14px; border: 1px solid var(--rule); border-radius: 12px; font-size: 16px; line-height: 22px; }
@media (max-width: 759px) { .support-actions .button { width: 100%; } }