/* simplecredit theme — components. Colour and type come only from tokens.css;
   this file never names a hex value or a pixel size of text.
   Layout: one column, max --content-w (720px) — the offer list is a comparison,
   so the numbers stay under each other. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }   /* якорі не ховаються під липкою шапкою */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  color: var(--fg);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }
button, input, select { font: inherit; color: inherit; }
b, strong { font-weight: var(--w-bold); }
:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: var(--nums); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- layout ---- */
:root { --content-w: 960px; --gutter: 16px; }
.wrap { width: 100%; max-width: calc(var(--content-w) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.main { padding-bottom: 48px; }
.section { margin-top: 40px; }
@media (min-width: 768px) {
  :root { --gutter: 24px; }
  .section { margin-top: 56px; }
}

/* ---- header ---- */
.header { position: sticky; top: 0; z-index: 50; border-bottom: 3px solid var(--header-line); background: var(--page-bg); }   /* 27.09: синя лінія під меню — колір угорі на всіх сторінках */
.header__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; line-height: 24px; font-weight: var(--w-bold); letter-spacing: var(--tracking-display); color: var(--fg); text-decoration: none; }
.brand__mark { display: block; width: 28px; height: 28px; flex: 0 0 auto; }
.brand:hover { color: var(--fg); }
.brand__name { color: inherit; }
.brand__accent { color: var(--c-brand); }
.nav { display: flex; gap: 20px; }
.nav__link { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); text-decoration: none; }
.nav__link:hover { color: var(--fg); }

/* ---- hero ---- */
.hero { padding-top: 32px; }
.hero__title { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--w-bold); letter-spacing: var(--tracking-display); }
.hero__lead { margin-top: 12px; max-width: 560px; color: var(--fg-2); }
@media (min-width: 768px) { .hero { padding-top: 48px; } }

/* ---- amount chips ---- */
.amounts { margin-top: 24px; }
.amounts__label { display: block; margin-bottom: 8px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.amounts__list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--field-line); border-radius: 999px;
  font-size: var(--fs-chip); line-height: var(--lh-chip); font-variant-numeric: var(--nums);
  color: var(--fg); text-decoration: none;
}
.chip:hover { border-color: var(--fg-3); color: var(--fg); }
.chip.is-on { background: var(--chip-on-bg); border-color: var(--chip-on-line); color: var(--chip-on-fg); font-weight: var(--w-bold); }

/* ---- feature tiles ---- */
.tiles { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--card-line); border-radius: 12px; }
.tile__ic { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 50%; }
.tile__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile__ic--brand { background: var(--tile-brand-bg); color: var(--tile-brand-fg); }
.tile__ic--promo { background: var(--tile-promo-bg); color: var(--tile-promo-fg); }
.tile__ic--extra { background: var(--tile-extra-bg); color: var(--tile-extra-fg); }
.tile__val { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-bold); font-variant-numeric: var(--nums); }
.tile__cap { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }

/* ---- offers ---- */
.offers__title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--w-bold); }
.offers__meta { margin-top: 4px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.offers__list { display: grid; gap: 16px; margin-top: 20px; }
.empty { margin-top: 20px; padding: 20px; border: 1px dashed var(--field-line); border-radius: 12px; color: var(--fg-2); }

.offer { padding: 20px; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 12px; }
.offer__head { display: flex; align-items: center; gap: 12px; }
.offer__logo { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; flex: 0 0 auto; }
.offer__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-bold); }
.offer__marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.offer__marks:empty { display: none; }

.mark { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--w-bold); white-space: nowrap; }
.mark--promo { background: var(--mark-promo-bg); color: var(--mark-promo-fg); }
.mark--benefit { background: var(--mark-benefit-bg); color: var(--mark-benefit-fg); }
.mark--mine { background: var(--mark-mine-bg); color: var(--mark-mine-fg); }
.mark--extra { background: var(--mark-extra-bg); color: var(--mark-extra-fg); }

.offer__calc { display: grid; gap: 6px; margin-top: 16px; }
.offer__row { display: flex; justify-content: space-between; gap: 12px; }
.offer__row dt { color: var(--fg-2); }
.offer__row dd { text-align: right; font-variant-numeric: var(--nums); white-space: nowrap; }
.offer__row--total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--card-line); font-weight: var(--w-bold); } /* п. 15.1 постанови: цифри витрат і три умови — один розмір і колір, акцент лише вагою */
.offer__row--total dt { color: var(--fg); }
.offer__overpay { text-align: right; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }

/* NBU: three conditions in one font, colour and size; warning framed and bold right below */
.offer__terms { display: grid; gap: 2px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--card-line); list-style: none; color: var(--fg); }
.offer__warning { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--nbu-line); border-radius: 8px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg); }
.offer__warning strong { font-weight: var(--w-bold); }

.offer__howto { margin-top: 12px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.offer__howto summary { cursor: pointer; color: var(--link); }
.offer__howto > :not(summary) { margin-top: 8px; }
.offer__docs { margin-top: 12px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-3); }
.offer__go { width: 100%; margin-top: 16px; }

/* ---- the one button ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  border: 0; border-radius: 10px; background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--fs-btn); line-height: var(--lh-btn); font-weight: var(--w-bold);
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.btn:active { background: var(--btn-bg-active); }

/* ---- how it works ---- */
.how__title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--w-bold); }
.steps { display: grid; gap: 12px; margin-top: 16px; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-left: 44px; counter-increment: step; color: var(--fg-2); }
.steps li b { color: var(--fg); }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--tile-brand-bg); color: var(--tile-brand-fg);
  font-size: var(--fs-small); font-weight: var(--w-bold);
}

/* ---- footer ---- */
.footer { padding: 24px 0 32px; border-top: 1px solid var(--card-line); }
.footer__note { max-width: 640px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }
.footer__note + .footer__note { margin-top: 8px; }
.footer__copy { margin-top: 16px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }

/* ---- 404 ---- */
.err { padding-top: 64px; padding-bottom: 64px; }
.err__actions { margin-top: 24px; }

/* ---- marks by feature kind; a row with no marks takes no space ---- */
.mark--neutral { background: var(--panel-bg); color: var(--fg-2); }
.mark--plus { background: var(--mark-extra-bg); color: var(--mark-extra-fg); }
.mark--warn { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg-3); }
.offer__marks:not(:has(.mark)) { display: none; }

/* ---- calc row details ---- */
.offer__row--text dd { max-width: 62%; white-space: normal; }
.offer__hint { display: block; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }
.offer__intro { font-weight: var(--w-bold); }
.offer__strike { text-decoration: line-through; color: var(--fg-3); }

/* ---- text pages and landings ---- */
.prose p { max-width: 640px; }
.prose p { margin-top: 12px; color: var(--fg-2); }
.prose h2 + p { margin-top: 12px; }
.prose p b { color: var(--fg); }
.steps li a { color: var(--link); }


/* ---- one plain caution per page (ours, not the legal warning) ---- */
.caution { margin-top: 16px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.offer__docs { margin-top: 8px; }

/* ---- page width: 960 for the entry (path + showcase), 720 for reading and the list ---- */
.narrow { max-width: calc(720px + var(--gutter) * 2); }

/* ---- situation cards ---- */
.sit { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 700px) { .sit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .sit { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sit__card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--card-line); border-radius: 12px; color: var(--fg); text-decoration: none; }
.sit__card b { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-bold); }
.sit__card span { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.sit__card:hover { border-color: var(--fg-3); color: var(--fg); }
.sit__card--main { border-color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); }

/* ---- entry: path on the left, showcase on the right ---- */
.entry { display: grid; gap: 32px; margin-top: 36px; }
@media (min-width: 900px) { .entry { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; } }
.path { display: grid; gap: 18px; margin-top: 20px; }
.path__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.path__legend { margin-bottom: 8px; padding: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; }
.pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pick .chip { cursor: pointer; }
.pick input:checked + .chip { background: var(--chip-on-bg); border-color: var(--chip-on-line); color: var(--chip-on-fg); font-weight: var(--w-bold); }
.pick input:focus-visible + .chip { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.path__select, .path__check { display: block; margin-top: 10px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.path__select select { display: block; max-width: 100%; min-height: 40px; margin-top: 4px; padding: 0 10px; border: 1px solid var(--field-line); border-radius: 8px; background: var(--card-bg); color: var(--fg); font-size: var(--fs-chip); }
.path__check input { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; accent-color: var(--c-brand); }
.path__check small { color: var(--fg-3); }
.path__submit { margin-top: 4px; justify-self: start; }

/* ---- showcase ---- */
.showcase { padding: 16px; border: 1px solid var(--card-line); border-radius: 12px; }
.showcase__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-bold); }
.showcase__meta { margin-top: 2px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }
.mini { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--card-line); }
.mini__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mini__name { font-weight: var(--w-bold); }
.mini__total { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--w-bold); font-variant-numeric: var(--nums); white-space: nowrap; }
.mini__sub { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg); }
.mini .mark { justify-self: start; }
.mini__go { font-size: var(--fs-small); line-height: var(--lh-small); }
.showcase__all { display: inline-block; margin-top: 14px; font-size: var(--fs-small); }

/* ---- results page ---- */
.crumbs { margin-bottom: 8px; font-size: var(--fs-small); line-height: var(--lh-small); }
.summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.summary__item { text-decoration: none; }
.advice { display: grid; gap: 8px; margin-bottom: 20px; list-style: none; }
.advice__item { padding: 10px 12px; border-radius: 8px; background: var(--c-brand-soft); color: var(--c-brand-deep); font-size: var(--fs-small); line-height: var(--lh-small); }
.advice__item a { color: var(--c-brand-deep); }
.more { margin-top: 16px; }
.more__summary { padding: 14px 16px; border: 1px dashed var(--field-line); border-radius: 12px; list-style: none; cursor: pointer; }
.more__summary::-webkit-details-marker { display: none; }
.more__summary b { display: block; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.more__summary span { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.more[open] .more__summary { margin-bottom: 16px; border-style: solid; }

/* ---- short offer card (step 1: showcase and lists). П. 15.1: main and std lines — one size and colour ---- */
.short { display: grid; gap: 6px; padding: 16px; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 12px; }
.short__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.short__logo { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; flex: 0 0 auto; }
.short__logo--txt { display: grid; place-items: center; background: var(--panel-bg); border: 1px solid var(--card-line); font-size: 11px; font-weight: var(--w-bold); color: var(--fg-2); }
.short__name { margin-right: auto; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-bold); }
.short__main, .short__std { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); font-variant-numeric: var(--nums); }
.short__main b { font-weight: var(--w-bold); }
.short__due { margin-top: -4px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }
.short__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.short__docs { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }
/* уся картка клікабельна: розтягнуте посилання «Детальніше»; посилання на документи й підказки міток — над ним */
.short { position: relative; }
.short:hover { border-color: var(--fg-3); }
.short__more { justify-self: start; margin-top: 4px; }
.short__more::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.short__docs a, .short .mark[title] { position: relative; z-index: 1; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: var(--fs-small); line-height: var(--lh-small); border-radius: 8px; }
.showcase__list { display: grid; gap: 10px; margin-top: 12px; }
.showcase .short { padding: 12px; }
.offers__list .short + .short { margin-top: 0; }

/* ---- offer page (step 2, before /go) ---- */
.od { padding-top: 24px; }
.od__head { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.od__logo { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; flex: 0 0 auto; }
.od__logo--txt { display: grid; place-items: center; background: var(--panel-bg); border: 1px solid var(--card-line); font-size: 15px; font-weight: var(--w-bold); color: var(--fg-2); }
.od__title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--w-bold); }
.od__legal { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.od .offer__marks { margin-top: 12px; }
.od__calc { margin-top: 16px; }
.od__go { width: 100%; margin-top: 16px; }
.od__block { margin-top: 28px; }
.od__h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-bold); }
.od__list { display: grid; gap: 6px; margin-top: 10px; padding-left: 20px; }
.od__list b { font-weight: var(--w-bold); }
.od__html { margin-top: 10px; color: var(--fg); }
.od__html ul, .od__html ol { padding-left: 20px; }
.od__html p + p, .od__html li + li { margin-top: 6px; }
@media (min-width: 600px) { .od__go { width: auto; } }

/* ---- polish 27.09: numbers never break, balanced headlines, compact situations on phones, one tag in the showcase ---- */
.nw, .short__main b { white-space: nowrap; }
.hero__title, .offers__title, .od__title, .how__title, .od__h2, .showcase__title { text-wrap: balance; }
.showcase .short__tags .mark:nth-child(n+2) { display: none; }
.sit__short { display: none; }
@media (max-width: 699px) { .sit__card b.sit__short { display: block; } }
@media (max-width: 699px) {
  .sit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  .sit__card { align-items: center; padding: 8px 10px; border-radius: 999px; text-align: center; }
  .sit__card b { font-size: var(--fs-small); line-height: var(--lh-small); }
  .sit__card span, .sit__card b:not(.sit__short) { display: none; }
  .sit__card--main { box-shadow: none; background: var(--chip-on-bg); color: var(--chip-on-fg); }
  .entry { margin-top: 20px; }
}

/* ---- safety rules (concept 27.09: «кредит — це просто, якщо знати ціну», but it is a sharp tool) ---- */
.how-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
.rules__lead { margin-top: 12px; color: var(--fg-2); }
.rules__list { display: grid; gap: 12px; margin-top: 16px; list-style: none; }
.rules__list li { position: relative; padding-left: 30px; color: var(--fg-2); }
.rules__list li::before { content: "!"; position: absolute; left: 0; top: 3px; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--fg); border-radius: 50%; color: var(--fg); font-size: 12px; line-height: 1; font-weight: var(--w-bold); }
.rules__list b { color: var(--fg); }
.rules__list .rules__if { display: block; margin-top: 2px; }
.rules__more { margin-top: 16px; font-size: var(--fs-small); line-height: var(--lh-small); }
.od__deal { margin-top: 16px; padding: 14px 16px; background: var(--panel-bg); border-radius: 12px; }
.od__deal p { margin-top: 6px; }
.od__deal + .od__go { margin-top: 12px; }
.od__deal b { font-weight: var(--w-bold); }

/* ---- «Як читати ставку»: per day → per month → per year ---- */
.rate-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-variant-numeric: var(--nums); }
.rate-table th, .rate-table td { padding: 8px 10px; border-bottom: 1px solid var(--card-line); text-align: right; white-space: nowrap; }
.rate-table th:first-child, .rate-table td:first-child { text-align: left; white-space: normal; padding-left: 0; }
.rate-table th:last-child, .rate-table td:last-child { padding-right: 0; }
.rate-table th { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--w-regular); color: var(--fg-2); }
.rate-table__ref td { color: var(--fg-2); }
.rate-table__note { margin-top: 10px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }

/* ---- «Умова проста»: before — sober check, after — repay on time ---- */
.cond { display: grid; gap: 12px; margin-top: 16px; }
.cond__item { padding: 14px 16px; background: var(--panel-bg); border-radius: 12px; color: var(--fg-2); }
.cond__item b { display: block; color: var(--fg); font-weight: var(--w-bold); }
.cond__item p { margin-top: 8px; }
.cond__q { margin-top: 8px; padding-left: 22px; color: var(--fg); }
.cond__q li + li { margin-top: 2px; }
.od__check { color: var(--fg-2); }

/* ---- footer brand line: the name explained ---- */
.footer__brand { margin-bottom: 12px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.footer__brand b { color: var(--fg); font-weight: var(--w-bold); letter-spacing: var(--tracking-display); }

/* ---- 27.09: light azure band under the header, behind the situation cards (home only) ---- */
/* band: заливка секції на всю ширину — інструмент «по ситуації», 1–2 на сторінку; картки всередині білі */
.band { background: var(--band-bg); padding: 20px 0; }
.band--warm { background: var(--band-warm-bg); }
.band--grey { background: var(--band-grey-bg); }
.band--roomy { padding: 40px 0; }
.band .section, .band > .wrap > :first-child { margin-top: 0; }
.band :is(.tile, .short, .showcase, .cond__item, .od__deal) { background: var(--card-bg); }
.band .sit { margin-top: 0; }
@media (max-width: 699px) { .band { padding: 12px 0; } }
.band .sit__card { background: var(--card-bg); border-color: transparent; }
.band .sit__card:hover { border-color: var(--fg-3); }
.band .sit__card--main { border-color: var(--c-brand); }
@media (max-width: 699px) { .band .sit__card--main { background: var(--card-bg); color: var(--fg); box-shadow: inset 0 0 0 1px var(--c-brand); } }

/* ---- 27.09: «Пропозиція дня» in the showcase; explicit «Показати ще» button in results ---- */
.showcase__title--next { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--card-line); }
.short--day { background: var(--band-warm-bg); border-color: transparent; }
.showcase .short--day { padding: 14px; }
.more__hint { margin-top: 20px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.more { margin-top: 10px; }
.more__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--c-brand); border-radius: 10px; color: var(--link); font-weight: var(--w-bold); cursor: pointer; list-style: none; }
.more__btn::-webkit-details-marker { display: none; }
.more__btn:hover { background: var(--c-brand-soft); }
.more[open] .more__btn { display: none; }
.more[open] .offers__list { margin-top: 0; }

/* ---- contacts: footer line, feedback form, notices (27.09) ---- */
.footer__contact { margin-bottom: 12px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.notice { margin-top: 16px; padding: 12px 14px; border-radius: 10px; font-size: var(--fs-small); line-height: var(--lh-small); }
.notice--ok { background: var(--c-ok-soft); color: var(--c-ok); }
.notice--err { background: var(--c-danger-soft); color: var(--c-danger); }
.cform { display: grid; gap: 14px; max-width: 560px; margin-top: 16px; }
.cform__f { display: grid; gap: 6px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
.cform__f small { color: var(--fg-3); }
.cform input[type="text"], .cform input[type="email"], .cform textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: 8px; background: var(--card-bg); color: var(--fg); font-size: var(--fs-body); line-height: var(--lh-body); }
.cform textarea { min-height: 150px; resize: vertical; }
.cform input:focus, .cform textarea:focus { outline: 2px solid var(--c-brand); outline-offset: 1px; border-color: var(--c-brand); }
.cform__f--cap input { max-width: 180px; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform .btn { justify-self: start; }
.cform__note { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }

/* ---- amount: ranges (tier 1) and exact amounts (tier 2) from cms posts «Діапазони сум» (27.09) ---- */
.tier2 { margin-top: 10px; padding: 10px 12px; background: var(--panel-bg); border-radius: 10px; }
.tier2 + .tier2 { margin-top: 6px; }
.tier2__lbl { display: block; margin-bottom: 6px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-2); }

/* ---- 27.09: sticky header; on phones the menu becomes a hamburger (native <details>, works without JS) ---- */
.burger { display: none; position: relative; }
.burger__btn { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border-radius: 10px; color: var(--fg); cursor: pointer; list-style: none; }
.burger__btn::-webkit-details-marker { display: none; }
.burger__btn:hover { background: var(--panel-bg); }
.burger__btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.burger__btn .burger__x { display: none; }
.burger[open] .burger__btn .burger__bars { display: none; }
.burger[open] .burger__btn .burger__x { display: block; }
.burger__panel { position: fixed; left: 0; right: 0; top: var(--burger-top, 59px); max-height: calc(100vh - var(--burger-top, 59px)); overflow-y: auto; padding: 8px var(--gutter) 16px; background: var(--page-bg); border-bottom: 3px solid var(--header-line); }
.burger__panel a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--card-line); color: var(--fg); font-size: var(--fs-body); line-height: var(--lh-body); text-decoration: none; }
.burger__panel a:last-child { border-bottom: 0; color: var(--link); }
@media (max-width: 699px) {
  .nav { display: none; }
  .burger { display: block; }
}