/**
 * Closo Wholesale — net terms page (/wholesale/net-terms, 2026-08-23).
 * `wnt-` prefix, loaded ONLY by that document, AFTER
 * wholesale-market-landing.css, via the chrome's meta['css'] hook.
 *
 * This sheet is deliberately SMALL. The page wears the approved landing
 * vocabulary (`wml-` hero, stats strip, hairline sections, split panels,
 * numbered timeline, FAQ accordion, brand closing band) — same tokens, same
 * type scale, same rhythm: #452B90 accent · #1A202C ink · #556070 muted ·
 * #E4E2EE hairlines · #FAFAFC panel bg · Poppins display / Inter text /
 * JetBrains Mono numbers. Everything here is the delta this page needs and no
 * sibling has: the application form and the four state cards.
 *
 * ⛔ LINK COLOURS RIDE :where(), ALWAYS. A page-level `a { color: inherit }` at
 * ordinary specificity has already beaten .wm-btn-solid's white once on this
 * surface and left CTA text invisible until hover. :where() contributes ZERO
 * specificity, so component colours always win.
 *
 * Layout rule: every grid track is minmax(0, 1fr) and the page body must never
 * scroll horizontally — wide content wraps or stacks (360px-first).
 */

/* [hidden] must beat any display the classes below set (the surface's known
 * display-beats-hidden defect class — the .wmb-suggest lesson). */
.wnt [hidden] { display: none !important; }

:where(.wnt) a { color: inherit; } /* zero specificity — see the ⛔ note above */

/* ── the one-line answer after a submit ─────────────────────────────────── */
.wnt-notice {
  max-width: 1180px;
  margin: 16px auto 0;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid #E4E2EE;
  background: #FAFAFC;
  color: #1A202C;
}
.wnt-notice-ok   { border-color: #BFE3D0; background: #EFF8F3; }
.wnt-notice-warn { border-color: #E7CFA8; background: #FDF6EA; }

/* ── the state cards (applied / approved / declined / unreadable) ───────── */
/* A state is not a form, so it does not wear the form's furniture: one panel,
 * one sentence about where things stand, one way onward. */
.wnt-state {
  max-width: 720px;
  padding: 26px 28px;
  border: 1px solid #E4E2EE;
  border-radius: 16px;
  background: #FAFAFC;
}
.wnt-state-ok { background: #F4F2FA; border-color: #D7CCF2; }
.wnt-state h2 { margin-top: 0; }
.wnt-state p { max-width: 560px; }
.wnt-state .wm-btn-solid { margin-top: 8px; }

.wnt-lede { font-size: 16px; color: #556070; margin: -6px 0 22px; max-width: 560px; }

/* ── the application form ───────────────────────────────────────────────── */
.wnt-form { max-width: 780px; }

/* Two columns that collapse to one; every track is minmax(0,1fr) so a long
 * placeholder can never push the page sideways. */
.wnt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 20px;
  margin-top: 20px;
}
.wnt-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wnt-f-wide { grid-column: 1 / -1; }
.wnt-f > span {
  font-size: 12.5px;
  font-weight: 600;
  color: #1A202C;
}
/* ⛔ `:not([type=radio]):not([type=checkbox])` IS LOAD-BEARING, AND ITS ABSENCE
 *    WAS THE DEFECT. `.wnt-fs input` was written for the trade-reference text
 *    boxes, and it also matched the RADIO buttons inside the applicant-kind
 *    fieldset — every radio got `width: 100%`, a border and 11px of padding, so
 *    the choice rendered as two huge empty boxes with the dot floating in the
 *    middle and the label crushed into a one-character column at the edge.
 *    Screenshotted on prod 2026-08-23 before it was believed.
 *
 * ⛔ AND `box-sizing: border-box` IS NOT INHERITED FROM ANYWHERE. This chrome
 *    sets it on ONE component (wholesale-market.css:903), not globally — so
 *    `width: 100%` plus padding plus a border made every control wider than its
 *    container, and the reference inputs visibly overflowed the fieldset they
 *    sit in. Declared here, on the controls that need it. */
.wnt-f input,
.wnt-f select,
.wnt-f textarea,
.wnt-fs input:not([type="radio"]):not([type="checkbox"]) {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #E4E2EE;
  border-radius: 10px;
  padding: 11px 13px;
  font: 400 14px/1.45 "Inter", system-ui, sans-serif;
  color: #1A202C;
  background: #fff;
}
.wnt-f textarea { resize: vertical; }
.wnt-f input:focus,
.wnt-f select:focus,
.wnt-f textarea:focus,
.wnt-fs input:focus { outline: 2px solid #452B90; outline-offset: 1px; }

/* ── fieldsets: the applicant-kind choice and the references ────────────── */
.wnt-fs {
  box-sizing: border-box;
  border: 1px solid #E4E2EE;
  border-radius: 14px;
  padding: 16px 18px 18px;
  margin: 0;
  /* A fieldset's default `min-width: min-content` is not overridable by the
   * usual means and is why a long placeholder can push a form sideways. */
  min-width: 0;
  background: #fff;
}
.wnt-fs legend {
  font-size: 12.5px;
  font-weight: 600;
  color: #1A202C;
  padding: 0 6px;
}
.wnt-fs input + input { margin-top: 8px; }
.wnt-opt {
  font-weight: 500;
  color: #556070;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-left: 6px;
}

/* Both answers are first-class, so both wear the same card — the choice must
 * not look like one real option and one exception. */
.wnt-radio {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid #E4E2EE;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  margin-top: 10px;
}
.wnt-radio:hover { border-color: #D7CCF2; background: #FAFAFC; }
/* The dot never grows and never shrinks; the label takes the rest. Both halves
 * are stated because the bug above was exactly a radio that grew. */
.wnt-radio input {
  flex: 0 0 auto;
  width: auto;
  margin-top: 3px;
  padding: 0;
  border: 0;
  accent-color: #452B90;
}
.wnt-radio span { flex: 1 1 auto; font-size: 13.5px; line-height: 1.55; color: #556070; min-width: 0; }
.wnt-radio b { display: block; font-size: 14px; color: #1A202C; margin-bottom: 2px; }

.wnt-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #556070;
  cursor: pointer;
}
.wnt-check input { flex: 0 0 auto; width: auto; margin-top: 3px; padding: 0; border: 0; accent-color: #452B90; }
.wnt-check i { display: block; font-style: normal; font-size: 12.5px; color: #7A7290; margin-top: 2px; }
/* Consent is the basis of everything that happens after this form, so it is
 * not styled as fine print. */
.wnt-consent {
  padding: 14px 16px;
  border: 1px solid #D7CCF2;
  border-radius: 12px;
  background: #F4F2FA;
  color: #1A202C;
}

.wnt-go { margin-top: 22px; }
.wnt-fine { font-size: 12.5px; line-height: 1.6; color: #556070; margin: 12px 0 0; max-width: 560px; }

/* ── responsive: 360px-first, no horizontal scroll ──────────────────────── */
@media (max-width: 860px) {
  .wnt-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
  .wnt-notice { margin-left: 16px; margin-right: 16px; }
  .wnt-state { padding: 20px 18px; border-radius: 14px; }
  .wnt-fs { padding: 14px 14px 16px; }
  .wnt-radio { padding: 12px 13px; }
  .wnt-go { width: 100%; justify-content: center; }
}

/* ── the application, on its own page (operator 2026-08-23) ─────────────── */
/* The form is the whole page now, so it gets a narrower measure than a landing
 * section: a field row that spans a 1180px page is a row nobody can scan. */
.wnt-page .wnt-apply-head { padding-bottom: 0; }
.wnt-page .wnt-apply-head h1 {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 34px);
  letter-spacing: -.02em;
  margin: 10px 0 10px;
}
.wnt-page .wnt-lede { max-width: 620px; margin: 0 0 4px; }
.wnt-page .wnt-apply-body { padding-top: 22px; }
/* The way back to the explanation. It is a real link and it is FIRST: somebody
 * who arrived here from a shared URL has not read the offer yet. */
.wnt-back {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #452B90;
  text-decoration: none;
}
.wnt-back:hover { color: #321F69; }

/* ── the application, made legible (operator 2026-08-23: «сделай богатой») ──
   Fifteen inputs in one undifferentiated stack is a wall. Five numbered
   sections, each with a one-line reason, turn it into five short questions —
   and the numbers are the same device the landing's 01/02/03 already uses, so
   this is the page's own vocabulary rather than a second one. */
.wnt-sec { padding: 22px 0 4px; border-top: 1px solid #E4E2EE; }
.wnt-sec:first-of-type { border-top: 0; padding-top: 4px; }
.wnt-sec-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.wnt-sec-n {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EDE8F8; color: #452B90;
  font: 700 12px/1 "JetBrains Mono", monospace;
}
.wnt-sec-h h2 {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 600; font-size: 16px; letter-spacing: -.01em;
  margin: 3px 0 2px; color: #1A202C;
}
.wnt-sec-h p { margin: 0; font-size: 13px; line-height: 1.5; color: #556070; }

/* Required is MARKED, not discovered on submit. */
.wnt-req {
  font-style: normal; font-weight: 600; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: #8A5A00;
  margin-left: 6px;
}
.wnt-opt {
  font-weight: 500; color: #556070; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .06em; margin-left: 6px;
}

/* ⛔ THE REFUSAL POINTS AT ITS FIELD. One «something is wrong» above fifteen
   inputs makes a person hunt for which one — the summary links to the field
   and the field itself is marked. */
.wnt-err-sum {
  border: 1px solid #E5B4B4; background: #FBECEC; color: #8A1F1F;
  border-radius: 12px; padding: 12px 15px; margin-bottom: 18px;
  font-size: 13.5px; line-height: 1.6;
}
.wnt-err-sum b { display: block; margin-bottom: 2px; }
.wnt-err-sum a { color: #8A1F1F; text-decoration: underline; text-underline-offset: 3px; }
.wnt-f.is-bad input,
.wnt-f.is-bad select,
.wnt-f.is-bad textarea { border-color: #C7534F; background: #FEF7F7; }
.wnt-fs.is-bad { border-color: #C7534F; }
.wnt-check.is-bad { border-color: #C7534F; background: #FEF7F7; }

/* The one figure they choose deliberately gets a currency mark rather than a
   placeholder that vanishes the moment they type. */
.wnt-money { position: relative; display: block; }
.wnt-money i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-weight: 600; font-size: 14px; color: #556070;
  pointer-events: none;
}
.wnt-money input { padding-left: 26px; }

.wnt-submit { margin-top: 26px; padding-top: 22px; border-top: 1px solid #E4E2EE; }

/* A legend that exists for screen readers only — the section heading above it
   already says the same thing to everybody else. */
.wnt-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE APPLICATION, AS A CRAFTED FORM (operator 2026-08-23: «отступы, реакции,
   поведение»). Everything below is rhythm and state — no new vocabulary.

   ⛔ EVERY CONTROL ANSWERS THE POINTER, THE KEYBOARD AND ITS OWN STATE. A
      control that looks identical before and after you act on it makes a person
      doubt they acted: the selected radio card had NO styling of its own, so
      the only confirmation of the single most important choice on the form was
      a 13px dot.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── rhythm ──────────────────────────────────────────────────────────────
   One scale, stated once: 8 between a label and its control, 18 between
   controls, 34 between sections. The section head and the fields it owns share
   a left edge — they were 2px apart, which reads as a mistake rather than a
   choice. */
.wnt-page .wnt-apply-body { padding-top: 26px; }
.wnt-sec { padding: 30px 0 6px; }
.wnt-sec:first-of-type { padding-top: 0; }
.wnt-sec-h { margin-bottom: 18px; align-items: center; }
.wnt-grid { gap: 18px 22px; margin-top: 0; }
.wnt-f { gap: 8px; }
.wnt-sec > .wnt-fs + .wnt-grid { margin-top: 20px; }

/* ── what happens next ───────────────────────────────────────────────── */
.wnt-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  counter-reset: wnt-flow;
  margin: 22px 0 0;
  padding: 0;
}
.wnt-flow li {
  counter-increment: wnt-flow;
  position: relative;
  padding: 13px 15px 13px 40px;
  border: 1px solid #E4E2EE;
  border-radius: 12px;
  background: #FAFAFC;
  min-width: 0;
}
.wnt-flow li::before {
  content: counter(wnt-flow);
  position: absolute;
  left: 14px; top: 13px;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EDE8F8; color: #452B90;
  font: 700 10.5px/1 "JetBrains Mono", monospace;
}
.wnt-flow b { display: block; font-size: 13.5px; color: #1A202C; margin-bottom: 2px; }
.wnt-flow span { font-size: 12.5px; line-height: 1.5; color: #556070; }

/* ── section badge: it earns a tick ──────────────────────────────────────
   The number becomes a check once the section has what it needs. Set by the
   script; without script the badge is simply always a number, which is what it
   was. */
.wnt-sec-n { transition: background .15s ease, color .15s ease; }
.wnt-sec-n.is-done { background: #DFF3E7; color: #186A3B; }
.wnt-sec-n.is-done::after { content: '✓'; }
.wnt-sec-n.is-done { font-size: 0; }
.wnt-sec-n.is-done::after { font-size: 12px; font-weight: 700; }

/* ── reactions: the text controls ───────────────────────────────────────── */
.wnt-f input,
.wnt-f select,
.wnt-f textarea,
.wnt-fs input:not([type="radio"]):not([type="checkbox"]) {
  transition: border-color .13s ease, box-shadow .13s ease, background .13s ease;
}
.wnt-f input:hover,
.wnt-f select:hover,
.wnt-f textarea:hover,
.wnt-fs input:not([type="radio"]):not([type="checkbox"]):hover { border-color: #C9BEE8; }
/* ⛔ FOCUS IS A RING, NOT A COLOUR SWAP. An outline that only darkens the
 *    border is invisible to somebody tabbing through at speed. */
.wnt-f input:focus,
.wnt-f select:focus,
.wnt-f textarea:focus,
.wnt-fs input:not([type="radio"]):not([type="checkbox"]):focus {
  outline: none;
  border-color: #452B90;
  box-shadow: 0 0 0 3px rgba(69, 43, 144, .16);
}
.wnt-f input::placeholder,
.wnt-f textarea::placeholder { color: #9A94AC; }
/* A filled field is quietly different from an empty one, so scanning back up
 * the form shows what is answered without reading a word of it. */
.wnt-f input:not(:placeholder-shown) { background: #FEFEFF; border-color: #DCD6EC; }

/* ── reactions: the choice cards ─────────────────────────────────────────
   ⛔ THE SELECTED CARD MUST LOOK SELECTED. It had no state at all: picking
      «An individual» changed a dot and nothing else, on the one question the
      rest of the form branches on. */
.wnt-radio {
  transition: border-color .13s ease, background .13s ease, box-shadow .13s ease;
}
.wnt-radio:hover { border-color: #C9BEE8; background: #FAFAFC; }
.wnt-radio:has(input:checked) {
  border-color: #452B90;
  background: #F7F5FC;
  box-shadow: inset 3px 0 0 #452B90;
}
.wnt-radio:has(input:checked) b { color: #321F69; }
.wnt-radio:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(69, 43, 144, .16); }
/* `:has()` is unsupported on old engines, so the script mirrors the same state
 * onto a class — the card is never left without an answer. */
.wnt-radio.is-on { border-color: #452B90; background: #F7F5FC; box-shadow: inset 3px 0 0 #452B90; }
.wnt-radio.is-on b { color: #321F69; }

.wnt-check { transition: border-color .13s ease, background .13s ease; }
.wnt-consent:hover { border-color: #C0AEE8; }
.wnt-consent:has(input:checked) { border-color: #452B90; background: #F2EEFB; }
.wnt-consent.is-on { border-color: #452B90; background: #F2EEFB; }

/* ── the limit chips ─────────────────────────────────────────────────────
   They FILL the field rather than replacing it: any other number stays one
   keystroke away. */
.wnt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wnt-chips button {
  font: 600 12px/1 "Inter", system-ui, sans-serif;
  padding: 6px 11px;
  border: 1px solid #E4E2EE;
  border-radius: 999px;
  background: #fff;
  color: #556070;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.wnt-chips button:hover { border-color: #C9BEE8; background: #FAFAFC; color: #1A202C; }
.wnt-chips button.is-on { border-color: #452B90; background: #EDE8F8; color: #321F69; }
.wnt-chips button:focus-visible { outline: 2px solid #452B90; outline-offset: 2px; }

/* ── references ──────────────────────────────────────────────────────── */
.wnt-hint { font-size: 12.5px; line-height: 1.55; color: #556070; margin: 2px 0 12px; }
.wnt-refs input + input { margin-top: 10px; }
.wnt-add {
  margin-top: 10px;
  font: 600 12.5px/1 "Inter", system-ui, sans-serif;
  padding: 8px 12px;
  border: 1px dashed #C9BEE8;
  border-radius: 9px;
  background: transparent;
  color: #452B90;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.wnt-add:hover { background: #F7F5FC; border-color: #452B90; }
.wnt-add:focus-visible { outline: 2px solid #452B90; outline-offset: 2px; }

/* ── the action bar ──────────────────────────────────────────────────────
   It says what is still missing BEFORE the button is pressed. Press-fail-hunt
   is what this page already put somebody through once. */
.wnt-submit { margin-top: 34px; padding-top: 24px; }
.wnt-todo {
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid #E7CFA8;
  border-radius: 11px;
  background: #FDF6EA;
  color: #5A4409;
  font-size: 13px;
  line-height: 1.55;
}
.wnt-todo.is-ready { border-color: #BFE3D0; background: #EFF8F3; color: #17603C; }
.wnt-go { transition: transform .08s ease, background .13s ease; }
.wnt-go:active { transform: translateY(1px); }

/* ── narrow ───────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .wnt-flow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wnt-sec { padding-top: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE FORM IS AN OBJECT ON THE PAGE, NOT THE PAGE (operator 2026-08-23:
   «у этого есть структура но нету чётких границ и она сливается со всей
   страницей… она должна быть по центру»).

   ⛔ IT HAD STRUCTURE AND NO EDGES. Sections, rhythm and states were all there,
      but every one of them was drawn directly onto the page ground — same
      white, no boundary — so the eye had nothing to tell it where the form
      began or ended, and a 780px block sat hard against the left of a 1120px
      column with the rest of the width empty.

   TWO CHANGES, AND THEY ARE THE SAME CHANGE: give it a card, and put the card
   in the middle. Figure needs a ground: the card is the realm's tint, the
   controls inside it stay white, and that inversion is what makes a field read
   as a field rather than as a rectangle drawn on paper.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The column. `.wml` is 1120 and centred; the application is a document, not a
   landing, and a form measured wider than about 760 stops being scannable —
   the eye loses the left edge on the way back down. */
.wnt-page { max-width: 780px; margin: 0 auto; }

/* The header sits ABOVE the card and centred, so the card's top edge is the
   first hard line on the page and the eye lands on it. */
.wnt-page .wnt-apply-head {
  text-align: center;
  padding-bottom: 0;
  /* ⛔ AND NO RULE UNDER IT. `.wml-section` draws a divider on every section,
   * which was right when the page was a stack of sections and is noise now
   * that the card below supplies the only boundary the eye needs. Two lines
   * competing to say «a new thing starts here» is one line too many. */
  border-bottom: 0;
}
.wnt-page .wnt-apply-head .wnt-lede { margin-left: auto; margin-right: auto; }
.wnt-back { margin-bottom: 6px; }

/* ── THE CARD ─────────────────────────────────────────────────────────────
   A 1px line, a radius and a lifted shadow: enough to say «this is one thing»
   without a heavy frame. The tint is the same #FAFAFC the cabinet uses for a
   panel, so this is the realm's own vocabulary rather than a new one. */
.wnt-page .wnt-apply-body {
  box-sizing: border-box;
  border: 1px solid #E4E2EE;
  border-radius: 20px;
  background: #FAFAFC;
  padding: 30px 34px 34px;
  margin-top: 26px;
  box-shadow: 0 1px 2px rgba(26, 32, 44, .04), 0 10px 30px rgba(26, 32, 44, .05);
}
/* Inside the card the controls are WHITE — the inversion is what gives a field
   its edge. Without it the tint and the field are the same surface again. */
.wnt-page .wnt-apply-body .wnt-fs { background: #fff; }

/* The section rules are now INSIDE a bordered object, so they need less weight
   than they did when they were the only lines on the page. */
.wnt-page .wnt-sec { border-top-color: #EAE7F2; }
.wnt-page .wnt-sec:first-of-type { border-top: 0; }

/* The action bar closes the card: a full-width rule and a little more air, so
   the last thing above the button is a boundary rather than a field. */
.wnt-page .wnt-submit {
  margin: 34px -34px -34px;
  padding: 24px 34px 30px;
  border-top: 1px solid #EAE7F2;
  background: #fff;
  border-radius: 0 0 19px 19px;
}

/* The state cards (applied · approved · declined · signed out) are the same
   object in the same place — one page, one frame, whatever it is showing.
   A column with a gap rather than stacked margins: the parts of a state card
   are a short list, and a list is what a gap is for. */
.wnt-page .wnt-apply-body .wnt-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: none;
  border: 0;
  background: transparent;
  padding: 0;
}
.wnt-page .wnt-apply-body .wnt-state > * { margin: 0; }
/* The heading belongs to THIS page, not to a landing. `.wml-section h2` is
   clamp(26px, 3.4vw, 36px) — a headline for a marketing section, three times
   the weight of anything else inside the card. */
.wnt-page .wnt-apply-body .wnt-state h2 {
  font-size: 22px;
  line-height: 1.25;
  max-width: none;
}
.wnt-page .wnt-apply-body .wnt-state p { font-size: 14px; max-width: 560px; }

/* ⛔ `.wm-btn-solid` DECLARES NO `display`, SO AN `<a>` STAYS INLINE — and an
 *    inline box's vertical padding does not push the lines around it apart, so
 *    the button drew ON TOP of the paragraph above it. It never showed on the
 *    landings because there it always sits inside a flex row, which blockifies
 *    it. Anywhere it stands alone, it has to say so itself. */
.wnt-page .wm-btn-solid,
.wnt-state .wm-btn-solid { display: inline-flex; align-items: center; }

@media (max-width: 700px) {
  .wnt-page .wnt-apply-body {
    padding: 22px 18px 24px;
    border-radius: 16px;
    margin-top: 20px;
  }
  .wnt-page .wnt-submit {
    margin: 26px -18px -24px;
    padding: 20px 18px 22px;
    border-radius: 0 0 15px 15px;
  }
  .wnt-page .wnt-apply-head { text-align: left; }
}

/* ── the focus ring on a radio is SQUARE by default ──────────────────────
   Operator 2026-08-23: «убери квадратный ховер круга с точкой». Chrome draws
   its default focus outline as a rounded RECTANGLE around the control, so
   clicking either choice put a small square around the dot.

   ⛔ NOT REMOVED — RESHAPED. `outline: none` on a control somebody has to be
      able to reach with a keyboard is an accessibility regression traded for a
      cosmetic one, and the card's own `:has(input:focus-visible)` ring cannot
      cover it: `:has()` is unsupported on older engines, and there the focus
      would simply vanish. An outline follows the element's own border-radius,
      so a round control gets a round ring. */
.wnt-radio input,
.wnt-check input { border-radius: 50%; }
.wnt-check input { border-radius: 5px; } /* a checkbox is square by nature */
.wnt-radio input:focus-visible,
.wnt-check input:focus-visible {
  outline: 2px solid #452B90;
  outline-offset: 3px;
}
/* And nothing at all on a plain click — `:focus` without `:focus-visible` is
   the pointer, and the card already answers the pointer on its own. */
.wnt-radio input:focus:not(:focus-visible),
.wnt-check input:focus:not(:focus-visible) { outline: none; }

/* The client's own refusal, in the flow — never the browser's tooltip. */
.wnt-err-sum span { display: block; }

/* ── the dividers breathe equally on both sides ──────────────────────────
   Operator 2026-08-23: «сделай отступ у разделительной линии между шагами
   снизу и сверху одинаково». Measured on prod before touching anything:
   ABOVE 6px, BELOW 31px on every step rule, and 40/25 on the one above the
   button. A rule that separates two things has to sit between them; off-centre
   it reads as belonging to the block below, and the step above looks unfinished.

   ⚠️ THE «ABOVE» GAP IS THE PREVIOUS SECTION'S PADDING-BOTTOM, not this one's
      margin — a divider drawn as `border-top` is spaced by the element before
      it on one side and by itself on the other, which is exactly how the two
      halves drift apart. Symmetric padding is what keeps them equal. */
.wnt-page .wnt-sec { padding: 26px 0; }
.wnt-page .wnt-sec:first-of-type { padding-top: 0; }

/* Same rule, same reasoning, for the line that closes the card: its «above»
   was the last section's padding PLUS the bar's own margin, which is how it
   reached 40. The bar is full-bleed, so only the negative side margins stay. */
.wnt-page .wnt-submit {
  margin: 0 -34px -34px;
  padding: 26px 34px 30px;
}

@media (max-width: 700px) {
  .wnt-page .wnt-sec { padding: 22px 0; }
  .wnt-page .wnt-sec:first-of-type { padding-top: 0; }
  .wnt-page .wnt-submit { margin: 0 -18px -24px; padding: 22px 18px 22px; }
}