/* HotSki — info templates: 6 «Доставка и оплата» (coolzone payment) and 9 «404» (coolzone page404).
   Skeleton coolzone: white sheet, crumbs, H1 44 caps centred, anchor menu left + narrow column, 1 px lines.
   Ours on top: red dot-numbers (brand sign), ice glass R13 for the free-delivery threshold with 3D ice flakes
   behind it (gl.js [data-snowflakes]), Alumni Sans numbers, a red sale panel cut by the page edge.
   Motion lives in js/info.js: transform/opacity only; HS.STATIC shows final states. */

/* ======================================================================
   6 · ДОСТАВКА И ОПЛАТА
   ====================================================================== */
.dv { --line: #e4e4e4; --menu: 200px; }

/* ---------- B1 · title + promise (cz payment B1 · R13 ice) ---------- */
.dv-top {
  position: relative; overflow: hidden; text-align: center;
  padding: calc(var(--hdr) + 30px) var(--pad) 78px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 54%, #ffffff 100%);
}
/* gl.js lays its 9 flakes out in world units with a fixed vertical FOV, so a flake's pixel offset from the centre
   depends only on the canvas height (px = X · (H/2) / (tan 17.5° · distance)), not on the page width.
   H 700 · top 80: the two far flakes (±5.9 / 6.2 at z −6) sit on the plate's left and right edges (±340 px),
   big ones frame the title from the sides, the red crystal falls below the section (y ≈ 660) — red is carried by the number */
.dv-top__gl { position: absolute; left: 0; top: 80px; width: 100%; height: 700px; pointer-events: none; }
/* flakes sink into white snow at the bottom edge instead of being cut by it */
.dv-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 88%);
}
.dv-top__crumbs { position: relative; z-index: 1; }
.dv-top__title { position: relative; z-index: 1; margin-top: 72px; }
.dv-top__title .ln { overflow: hidden; padding-bottom: 0.06em; }

.dv-promise {
  position: relative; z-index: 1; width: calc(2 * var(--col) + var(--gap)); max-width: 100%; margin: 42px auto 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 32px;
  padding: 24px 28px 26px; text-align: left; overflow: hidden; will-change: transform;
}
.dv-promise.ice {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.64), rgba(232, 240, 248, 0.3));
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(160, 196, 228, 0.5), 0 30px 60px rgba(60, 100, 140, 0.14);
}
.dv-promise .dots { position: absolute; left: 28px; top: 24px; }
.dv-promise__num {
  margin-top: 30px; font-family: var(--f-disp); font-weight: 800; font-size: 132px; line-height: 0.8;
  letter-spacing: -0.01em; color: var(--accent); white-space: nowrap; text-transform: uppercase;
}
.dv-promise__num small { font-size: 0.32em; letter-spacing: 0.03em; margin-left: 8px; color: var(--ink); }
.dv-promise__num .ch { display: inline-block; }
.dv-promise__text { position: relative; padding: 0 0 4px 22px; font-size: 15px; line-height: 1.45; }
.dv-promise__text::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 6px; width: 1px; background: rgba(21, 21, 21, 0.18); }
/* a glint that crosses the ice (transform only): ice-blue halo round a white core — pure white would vanish on
   the frosted white glass */
.dv-promise__glint {
  position: absolute; top: -40%; bottom: -40%; left: 0; width: 130px; pointer-events: none;
  background: linear-gradient(100deg, rgba(178, 208, 238, 0) 0%, rgba(178, 208, 238, 0.42) 36%, rgba(255, 255, 255, 0.96) 50%,
    rgba(178, 208, 238, 0.42) 64%, rgba(178, 208, 238, 0) 100%);
  transform: translateX(-160px) rotate(12deg); opacity: 0;
}

/* ---------- B2 · anchor menu left + content right (cz payment B2) ---------- */
/* the text column is centred like coolzone's (370–1070 on 1440); the menu (200 px, as coolzone) keeps the left
   gutter, min 290 px so it never touches the column on narrower screens */
.dv-body {
  display: grid; grid-template-columns: minmax(290px, 1fr) minmax(0, 820px) minmax(0, 1fr);
  padding: 0 var(--pad) 120px;
}
.dv-menu {
  grid-column: 1; align-self: start; position: sticky; top: calc(var(--hdr) + 34px);
  width: var(--menu); padding-top: 26px;
}
.dv-menu__rule, .dv-menu__prog { position: absolute; left: 0; right: 0; top: 0; height: 1px; transform-origin: 0 50%; }
.dv-menu__rule { background: var(--ink); }
.dv-menu__prog { top: -1px; height: 3px; background: var(--accent); transform: scaleX(0); }
.dv-menu__list { position: relative; display: grid; }
.dv-menu__list a {
  position: relative; display: block; padding: 9px 0 9px 20px; font-size: 13px; line-height: 1.15;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--gray); transition: color var(--tr);
}
.dv-menu__list a:hover, .dv-menu__list a:focus-visible, .dv-menu__list a.is-on { color: var(--ink); }
.dv-menu__out { display: inline-block; margin: 18px 0 0 20px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--accent); border-bottom: 1px solid currentColor; }   /* row 39 */
.dv-menu__list a:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.dv-menu__dot { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); pointer-events: none; }

.dv-main { grid-column: 2 / 4; min-width: 0; }
.dv-sec { position: relative; max-width: 820px; padding-top: 26px; scroll-margin-top: calc(var(--hdr) + 24px); }
.dv-sec + .dv-sec { margin-top: 104px; }
.dv-sec__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: 0 50%; }
.dv-sec__title { margin: 7px 0 44px; }
.dv-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
/* reading marker: the brand dot appears in the gutter beside the row under the cursor (transform only) */
.dv-tbl__row:not(.dv-tbl__head)::before, .dv-pay__row::before {
  content: ""; position: absolute; left: -22px; top: 29px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); transform: scale(0); transition: transform 0.3s var(--ease-out);
}
.dv-pay__row::before { top: 36px; }
.dv-pay__row:first-child::before { top: 16px; }
.dv-tbl__row:not(.dv-tbl__head):hover::before, .dv-pay__row:hover::before { transform: scale(1); }

/* ---------- B3 · terms table «куда · как · срок · цена» (cz payment B3) ---------- */
.dv-tbl { position: relative; }
.dv-tbl__row {
  position: relative; display: grid; grid-template-columns: 168px 222px 158px minmax(0, 1fr); column-gap: 24px;
  padding: 22px 0 24px; font-size: 15px; line-height: 1.4;
}
.dv-tbl__head { padding: 0 0 16px; font-size: 13px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 400; }
.dv-tbl__head .dv-line { background: var(--ink); }
.dv-tbl__where { font-size: 13px; line-height: 1.35; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; padding-top: 2px; }
.dv-tbl__na { color: var(--gray); }
.dv-price { display: grid; gap: 3px; }
.dv-price__v { font-size: 18px; line-height: 1.15; font-weight: 400; }
.dv-price__v.red { font-size: 13px; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
.dv-price__c { font-size: 12px; line-height: 1.35; color: var(--gray); }
.dv-price__c + .dv-price__v { margin-top: 12px; }

/* ---------- B4 · conditions with red dot-numbers (cz payment B4, our brand dot) ---------- */
.dv-conds { list-style: none; margin: 0; padding: 0; }
.dv-conds li { position: relative; display: grid; grid-template-columns: 94px minmax(0, 640px); padding: 22px 0 24px; }
.dv-conds li:first-child { padding-top: 4px; }
.dv-conds .dots { gap: 5px; padding-top: 7px; align-self: start; }
/* hover: the dot-number runs a small wave. It uses the separate `translate` property, so it never fights the
   GSAP reveal, which writes `transform: scale()` on the same dots */
.dv-conds .dot { width: 7px; height: 7px; transition: translate 0.35s var(--ease-out); }
.dv-conds li:hover .dot { translate: 0 -4px; }
.dv-conds li:hover .dot:nth-child(2) { transition-delay: 0.05s; }
.dv-conds li:hover .dot:nth-child(3) { transition-delay: 0.1s; }
.dv-conds li:hover .dot:nth-child(4) { transition-delay: 0.15s; }
.dv-conds li:hover .dot:nth-child(5) { transition-delay: 0.2s; }
.dv-conds p { font-size: 15px; line-height: 1.45; }
.ilink { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--tr); }
.ilink:hover, .ilink:focus-visible { color: var(--accent); }

/* ---------- B5 · payment: three ways (cz payment B5) ---------- */
.dv-pay { list-style: none; margin: 0; padding: 0; }
.dv-pay__row { position: relative; display: grid; grid-template-columns: 280px minmax(0, 516px); column-gap: 24px; padding: 24px 0 26px; align-items: start; }
.dv-pay__row:first-child { padding-top: 4px; }
.dv-pay__k { display: flex; align-items: center; gap: 16px; font-size: 13px; line-height: 1.2; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.dv-pay__ico { flex: 0 0 auto; width: 44px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 5px; position: relative; }
.dv-pay__ico svg { width: 22px; height: 22px; }
.dv-pay__v { font-size: 15px; line-height: 1.45; padding-top: 5px; }
.dv-pay__v .blink { margin-top: 2px; }

/* ---------- B6 · sale + order by phone: red panel cut by the page edge ---------- */
.dv-sec--wide { max-width: none; }
.dv-sale { position: relative; margin-right: calc(-1 * var(--pad)); color: var(--white); overflow: hidden; }
.dv-sale__bg { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; }
.dv-sale__wordbox { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; pointer-events: none; }
.dv-sale__word {
  position: absolute; left: 36px; bottom: -0.2em; white-space: nowrap;
  font-family: var(--f-disp); font-weight: 900; font-size: 300px; line-height: 0.8; letter-spacing: -0.005em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.1);
}
.dv-sale__in {
  position: relative; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 40px;
  min-height: 470px; padding: 30px 40px 40px;
}
.dv-sale__head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dv-sale__head h2 { display: flex; align-items: center; gap: 12px; }
.dv-sale__head .dot { background: var(--white); }
.dv-sale__warn { grid-column: 1 / -1; align-self: start; max-width: 860px; margin-top: 56px; font-size: 44px; line-height: 1.02; text-wrap: balance; }
.dv-sale__rule { grid-column: 1 / -1; align-self: end; height: 1px; margin-top: 60px; background: rgba(255, 255, 255, 0.55); transform-origin: 0 50%; }
.dv-sale__order { align-self: start; padding-top: 22px; font-size: 15px; line-height: 1.45; max-width: 420px; }
.dv-sale__order a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dv-sale__act { align-self: start; padding-top: 18px; display: flex; align-items: center; justify-content: flex-end; gap: 32px; flex-wrap: wrap; }
.dv-sale__tel { font-size: 30px; line-height: 1.1; font-weight: 300; white-space: nowrap; position: relative; }
.dv-sale__tel::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out); }
.dv-sale__tel:hover::after, .dv-sale__tel:focus-visible::after { transform: scaleX(1); }

/* ======================================================================
   9 · 404
   ====================================================================== */
.nf-stage {
  position: relative; overflow: hidden; display: grid; justify-items: center; align-content: start; text-align: center;
  min-height: 836px; padding: calc(var(--hdr) + 92px) var(--pad) 96px;
  background: radial-gradient(60% 55% at 50% 38%, #eef3f8 0%, rgba(238, 243, 248, 0) 100%);
}
/* «4 [skier] 4»: Alumni Sans digits, the cut-out skier instead of the zero (cz page404 · PRIEMY §6) */
.nf-num {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--f-disp); font-weight: 900; font-size: 410px; line-height: 0.8; letter-spacing: 0; color: var(--ink);
  height: 0.8em; user-select: none;
}
.nf-d { position: relative; z-index: 2; display: block; overflow: hidden; padding: 0 0.01em; }
.nf-d > span { display: block; }
/* the zero = the brand mark (red disc cut by the slope line, img/logo/mark.svg) sized like the «O» of the logo:
   diameter ≈ 1.02 × figure height (0.594 em), gap to the digits ≈ 0.1 × figure height; centred on the figures */
.nf-zero { position: relative; z-index: 1; display: block; width: 0.725em; height: 0.8em; }
.nf-mark { position: absolute; left: 50%; top: 0.101em; width: 0.605em; height: 0.605em; margin-left: -0.3025em; max-width: none; }
/* .nf-sk is a point on the centre of the zero; the image is offset so the skier's body (≈46 % · 42 % of the cut-out) sits on it */
.nf-sk { position: absolute; z-index: 3; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.nf-sk__f { position: absolute; width: 1.5em; left: -0.69em; top: -0.35em; transform-origin: 46% 42%; will-change: transform; }
/* static shadow (never animated) lifts the skier off the red disc; the float moves the promoted parent layer */
.nf-skier { display: block; width: 100%; height: auto; max-width: none; transform-origin: 46% 42%; filter: drop-shadow(0 24px 22px rgba(21, 21, 21, 0.2)); }
.nf-shadow {
  position: absolute; z-index: 1; left: 50%; bottom: -0.1em; width: 0.9em; height: 0.07em; margin-left: -0.45em; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(21, 21, 21, 0.2), rgba(21, 21, 21, 0)); opacity: 0.75;
}
.nf-copy { display: grid; justify-items: center; margin-top: 64px; }
.nf-title { font-size: 20px; }
.nf-search {
  display: flex; align-items: center; gap: 12px; width: 460px; max-width: 100%; margin-top: 40px;
  border-bottom: 1px solid var(--ink); padding-bottom: 10px; transition: border-color var(--tr);
}
.nf-search:focus-within { border-bottom-color: var(--accent); }
.nf-search > svg { flex: 0 0 auto; width: 16px; height: 16px; }
.nf-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 15px; padding: 4px 0; }
.nf-search input::placeholder { color: var(--gray); }
.nf-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nf-search .arr { flex: 0 0 auto; }
.nf-act { display: flex; align-items: center; justify-content: center; gap: 36px; margin-top: 40px; }

/* ======================================================================
   adaptive — ADAPTIVE.md §4 (6 доставка · 9 404): the same content, another packaging.
   md 768–1199: the anchor menu stays on the left, narrower; the table keeps its four columns in proportion;
     the sale panel puts the phone and the button under the text (they collided at 1024).
   <=1023: the terms table turns into blocks «куда · как · срок · цена» — each cell carries its column name
     in data-label, the header row stays for screen readers only.
   sm <=767: the anchors become a row that sticks under the header and scrolls sideways (the red dot and the
     reading-progress line move along it, js/info.js); the red panel runs edge to edge; payment rows stack;
     404 — «4 [skier] 4» in vw, the search the full width.
   1200+ is untouched: 1440 must match shots/r2.
   ====================================================================== */
@media (max-width: 1199px) {
  .dv { --menu: 168px; }
  .dv-body { grid-template-columns: var(--menu) minmax(0, 1fr); column-gap: clamp(28px, 4.6vw, 56px); padding-bottom: 96px; }
  .dv-main { grid-column: 2; }
  .dv-sec + .dv-sec { margin-top: 84px; }
  .dv-tbl__row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(0, 0.85fr) minmax(0, 1.1fr); column-gap: 20px; }
  .dv-pay__row { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); }
  .dv-sale__in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 30px 32px 36px; }
  .dv-sale__warn { font-size: clamp(28px, 1.5vw + 22px, 44px); margin-top: 44px; }
  .dv-sale__rule { margin-top: 48px; }
  .dv-sale__act { justify-content: flex-start; padding-top: 24px; gap: 18px 32px; }
  .dv-sale__word { font-size: min(300px, 30vw); }
  .nf-num { font-size: min(410px, 44vw); }
}

@media (max-width: 1023px) {
  .dv-tbl { border-top: 1px solid var(--ink); }
  .dv-tbl__head { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dv-tbl__row { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 22px 0 24px; }
  .dv-tbl__row > [data-label] { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .dv-tbl__row > [data-label]::before {
    content: attr(data-label); grid-row: 1 / span 4; padding-top: 3px;
    font-size: 10px; line-height: 1.3; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray);
  }
  .dv-price > * { grid-column: 2; }
  .dv-tbl__where { padding-top: 0; }
}

@media (max-width: 767px) {
  /* B1 — the flakes are laid out by the canvas height (see the note at .dv-top__gl): 380 px puts two of them on
     the plate's edges on a phone, as the far pair sits on them at 1440 */
  .dv-top { padding: calc(var(--hdr) + 22px) var(--pad) 58px; }
  .dv-top__gl { top: 50px; height: 380px; }
  .dv-top__title { margin-top: 44px; }
  .dv-promise { grid-template-columns: minmax(0, 1fr); row-gap: 18px; margin-top: 30px; padding: 22px 20px 24px; }
  .dv-promise .dots { left: 20px; top: 22px; }
  .dv-promise__num { margin-top: 26px; font-size: min(132px, 30vw); }

  /* B2 — anchors: a white row under the header that scrolls sideways; when the header slides away on scroll
     down, the stuck row follows it up (transform, same timing as the header) */
  .dv-body { display: block; padding-bottom: 72px; }
  .dv-menu {
    position: sticky; z-index: 20; top: var(--hdr); width: auto; padding: 0; margin: 0 calc(-1 * var(--pad)) 36px;
    background: var(--white); transition: transform 0.45s var(--ease-out);
  }
  .hdr.is-hidden ~ .dv .dv-menu.is-stuck { transform: translateY(calc(-1 * var(--hdr))); }
  .dv-menu__rule { top: auto; bottom: 0; background: #d9d9d9; }
  .dv-menu__prog { top: auto; bottom: -1px; height: 2px; }
  .dv-menu__list { display: flex; gap: 26px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 var(--pad); }
  .dv-menu__list::-webkit-scrollbar { display: none; }
  .dv-menu__list a { flex: 0 0 auto; padding: 17px 0 16px 16px; white-space: nowrap; }
  .dv-menu__out { display: none; }   /* phone: the returns link sits in the burger menu and the footer */

  .dv-sec { scroll-margin-top: calc(var(--hdr) + 72px); }
  .dv-sec + .dv-sec { margin-top: 64px; }
  .dv-sec__title { margin: 7px 0 26px; }
  .dv-tbl__row > [data-label] { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; }
  .dv-conds li { grid-template-columns: 64px minmax(0, 1fr); padding: 18px 0 20px; }
  .dv-pay__row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 20px 0 22px; }
  .dv-pay__v { padding: 0 0 0 60px; }
  .dv-tbl__row:not(.dv-tbl__head)::before, .dv-pay__row::before { display: none; }

  /* B6 — the red panel runs from edge to edge */
  .dv-sale { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); }
  .dv-sale__in { padding: 26px var(--pad) 32px; }
  .dv-sale__warn { margin-top: 34px; }
  .dv-sale__rule { margin-top: 36px; }
  .dv-sale__order { padding-top: 20px; }
  .dv-sale__act { padding-top: 22px; }
  .dv-sale__tel { font-size: 26px; }
  .dv-sale__word { left: 10px; font-size: 44vw; }

  /* 9 · 404 */
  .nf-stage { min-height: 0; padding: calc(var(--hdr) + 60px) var(--pad) 72px; }
  .nf-num { font-size: 50vw; }
  .nf-copy { width: 100%; max-width: 460px; margin-top: 46px; }
  .nf-search { width: 100%; margin-top: 30px; }
  .nf-act { flex-wrap: wrap; gap: 18px 30px; margin-top: 34px; }
}

/* ?shot=1 only (js/info.js): the menu stays in its flow place so stitched full-page shots do not repeat it */
.dv-menu.is-flow { position: relative; top: auto; }

/* ======================================================================
   P8 · seasons (logic/NEW_MAP_SEASON.md §1): one page, the season repaints it — tokens of css/base.css, no new colours.
   Summer (MailSport): the icy haze of the top turns to sand, the 3D snowflakes give way to a route of brand dots that
   runs behind the glass plate to a lime destination (js/info.js route()); the closing panel says «Связаться».
   ====================================================================== */
html[data-season="summer"] .dv-top { background: linear-gradient(180deg, #ffffff 0%, var(--surface) 56%, #ffffff 100%); }
.dv-top__route { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dv-top__route circle { fill: var(--accent); }
.dv-top__route .rt-pin { fill: var(--lime); }
.dv-top__route .rt-ring { fill: none; stroke: var(--accent); stroke-width: 1.2; }
/* payment, summer: cash and transfer are one paragraph of the client — two signs on one key */
.dv-pay__ico--two { width: 72px; display: flex; justify-content: center; gap: 2px; }
.dv-sale__cb { color: inherit; }

/* ======================================================================
   P8 · КЭШБЭК ЗА ОТЗЫВ (keshbek.html, mailsport /cechbec/): the delivery top (H1 + 999 on the glass plate), then the three
   steps of the client on a road of brand dots that ends in the 999 coin. Both seasons, the season's palette.
   ====================================================================== */
.kb-top { padding-bottom: 64px; }
.kb-steps {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px; column-gap: 48px; align-items: start;
  max-width: 1440px; margin: 0 auto; padding-top: 34px; padding-bottom: 130px;
}
/* the road: dots every 14 px on the line through the step signs (sign 30 px high -> centre 15 px), first sign to the coin */
.kb-road {
  position: absolute; left: calc(var(--pad) + 22px); right: calc(var(--pad) + 75px); top: calc(34px + 12px); height: 6px;
  background: radial-gradient(circle at 3px 3px, rgba(var(--accent-rgb), 0.6) 1.6px, rgba(var(--accent-rgb), 0) 2.2px) 0 0 / 14px 6px repeat-x;
}
.kb-road__cover { position: absolute; inset: -4px 0; background: var(--white); transform: scaleX(0); transform-origin: 100% 50%; }
.kb-path { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; margin: 0; padding: 0; list-style: none; }
.kb-step { display: grid; align-content: start; justify-items: start; row-gap: 26px; }
.kb-step__ico {
  position: relative; width: 44px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 5px;
  background: var(--white); transition: border-color var(--tr), color var(--tr);
}
.kb-step__ico svg { width: 22px; height: 22px; }
.kb-step:hover .kb-step__ico { border-color: var(--accent); color: var(--accent); }
.kb-step__text { max-width: 380px; font-size: 15px; line-height: 1.45; }
.kb-step__text .ilink { color: var(--accent); }
.kb-step__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.kb-step__tel { font-size: 20px; line-height: 1.2; font-weight: 300; white-space: nowrap; }
.kb-step__mail { font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; }
.kb-step__tel, .kb-step__mail { position: relative; }
.kb-step__tel::after, .kb-step__mail::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--tr);
}
.kb-step__tel:hover::after, .kb-step__mail:hover::after, .kb-step__tel:focus-visible::after, .kb-step__mail:focus-visible::after { transform: scaleX(1); }
/* the coin: the client's 999 in Alumni on the accent disc, a lime rim — where the road ends */
.kb-goal { position: relative; margin-top: -60px; display: grid; place-items: center; }
.kb-goal__coin {
  display: grid; place-items: center; align-content: center; width: 150px; height: 150px; border-radius: 50%;
  background: var(--accent); color: var(--white); box-shadow: 0 0 0 6px var(--white), 0 0 0 7px rgba(var(--accent-rgb), 0.35);
  font-family: var(--f-disp); text-transform: uppercase; line-height: 0.8;
}
html[data-season="summer"] .kb-goal__coin { box-shadow: 0 0 0 6px var(--white), 0 0 0 9px var(--lime); }
.kb-goal__coin b { font-weight: 800; font-size: 66px; letter-spacing: -0.01em; }
.kb-goal__coin small { font-size: 18px; font-weight: 700; letter-spacing: 0.04em; margin-top: 6px; }

/* adaptive — ADAPTIVE.md §4 for the P8 parts. 1024–1199: the steps keep three columns, the coin smaller.
   <=1023 (tablet and phone): the steps go down one by one, the road runs down the left edge through their signs to the coin
   (three columns of ~170 px at 768 turned the long step 4 into a narrow tower) */
@media (max-width: 1199px) {
  .kb-steps { grid-template-columns: minmax(0, 1fr) 120px; column-gap: 28px; padding-bottom: 104px; }
  .kb-path { column-gap: 26px; }
  .kb-road { right: calc(var(--pad) + 60px); }
  .kb-goal { margin-top: -45px; }
  .kb-goal__coin { width: 120px; height: 120px; }
  .kb-goal__coin b { font-size: 54px; }
}
@media (max-width: 767px) {
  .dv-pay__row--two .dv-pay__v { padding-left: 88px; }
  .kb-top { padding-bottom: 46px; }
}
@media (max-width: 1023px) {
  .kb-steps { grid-template-columns: minmax(0, 1fr); padding-top: 18px; padding-bottom: 72px; }
  .kb-step__text { max-width: 560px; }
  /* one 64 px column holds the signs, the road (its centre, 32 px) and the coin */
  .kb-road {
    left: calc(var(--pad) + 29px); right: auto; top: 33px; bottom: 104px; width: 6px; height: auto;
    background: radial-gradient(circle at 3px 3px, rgba(var(--accent-rgb), 0.6) 1.6px, rgba(var(--accent-rgb), 0) 2.2px) 0 0 / 6px 14px repeat-y;
  }
  .kb-road__cover { inset: 0 -4px; transform: scaleY(0); transform-origin: 50% 100%; }
  .kb-path { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .kb-step { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 14px; }
  .kb-step__ico { grid-row: 1 / span 2; justify-self: center; }
  .kb-step__text, .kb-step__act { grid-column: 2; }
  .kb-goal { margin-top: 36px; justify-items: start; }
  .kb-goal__coin { width: 64px; height: 64px; box-shadow: 0 0 0 5px var(--white), 0 0 0 6px rgba(var(--accent-rgb), 0.35); }
  html[data-season="summer"] .kb-goal__coin { box-shadow: 0 0 0 5px var(--white), 0 0 0 7px var(--lime); }
  .kb-goal__coin b { font-size: 30px; }
  .kb-goal__coin small { font-size: 10px; margin-top: 2px; }
}

/* ---------- legal pages (ticket 02, 11.10): politika / soglasie / vozvrat — built by tools/legal_pages.py ---------- */
.legal .dv-top { padding-bottom: 46px; }   /* row 39: the «Доставка» title block without its promise plate */
.legal__intro { padding-top: 0; }
.legal__text { max-width: 820px; font-size: 15px; line-height: 1.65; }
.legal__text > :first-child { margin-top: 0; }
.legal__text h3 { font-size: 18px; margin: 26px 0 10px; }
.legal__text p, .legal__text ul, .legal__text ol { margin: 0 0 12px; }
.legal__text ul, .legal__text ol { padding-left: 22px; }
.legal__text li { margin-bottom: 6px; }
.legal__text ul li { list-style: disc; }
.legal__text ol li { list-style: decimal; }
.legal__text a { text-decoration: underline; text-underline-offset: 3px; }
.legal-table { overflow-x: auto; margin: 6px 0 16px; }
.legal-table table { border-collapse: collapse; min-width: 560px; font-size: 14px; line-height: 1.5; }
.legal-table th, .legal-table td { border: 1px solid #e4e4e4; padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-table th { background: #f6f6f6; font-weight: 500; }
.legal-gap { background: #fff3c4; color: inherit; padding: 0 4px; border-radius: 3px; }
@media (max-width: 767px) { .legal .dv-top { padding-bottom: 30px; } .legal__text { font-size: 15px; } }