@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-024F, U+0400-052F, U+1C80-1C8F, U+2DE0-2DFF, U+A640-A69F;
}

@font-face {
  font-family: "Unbounded";
  src: url("/assets/fonts/unbounded-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0000-024F, U+0400-052F, U+1C80-1C8F, U+2DE0-2DFF, U+A640-A69F;
}

:root {
  --paper: #f8f8f6;
  --white: #ffffff;
  --ink: #151515;
  --ink-soft: #333331;
  --muted: #6e6d68;
  --line: #d5d3cd;
  --line-strong: #99968e;
  --wash: #efeee9;
  --orange: #ff4d00;
  --orange-dark: #cf3e00;
  --orange-pale: #fff0e8;
  --success: #1f6b44;
  --danger: #9a2f16;
  --sans: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Unbounded", "Onest", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --page: min(1320px, calc(100vw - 64px));
  --header-height: 108px;
}

* {
  box-sizing: border-box;
}

html {
  /* Reverted to auto (change record 2026-08-25, «Расширение scope v9», reverts v8): sections
     are shown/hidden one at a time again, switched instantly by setView()'s own
     window.scrollTo({ top: 0 }), not smoothly scrolled between - there is no longer a
     multi-section scroll for `smooth` to apply to. */
  scroll-behavior: auto;
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}

html.referral-dialog-open,
body.referral-dialog-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.referral-dialog-open {
  min-height: var(--referral-locked-document-height, 100vh);
}

button,
input,
textarea {
  font: inherit;
}

button,
a,
summary,
label {
  -webkit-tap-highlight-color: transparent;
}

button,
[role="button"],
.button,
.main-nav a,
.utility-row a {
  transition: transform 140ms var(--ease-out), color 160ms var(--ease-out),
    background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

button:active,
[role="button"]:active,
.button:active,
.main-nav a:active,
.utility-row a:active {
  transform: scale(0.97);
}

a {
  color: inherit;
}

button {
  color: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

::selection {
  color: var(--white);
  background: var(--orange);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 12px 16px;
  color: var(--white);
  background: var(--ink);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: relative;
  z-index: 20;
  background: rgba(248, 248, 246, 0.97);
  border-bottom: 1px solid var(--line);
}

.utility-row,
.header-main {
  width: var(--page);
  margin-inline: auto;
}

.utility-row {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.utility-row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 34px;
  z-index: -1;
  background: var(--wash);
}

.utility-row span:first-child {
  color: var(--muted);
}

.utility-row a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.header-main {
  min-height: 74px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 34px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.06em;
  text-decoration: none;
}

.brand span {
  color: var(--orange);
}

.prototype-stamp,
.demo-badge,
.format-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  color: var(--ink);
  background: var(--orange);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

/* One CTA to search in the header, not two (change record 2026-08-25, «Расширение scope
   v10»): styled with the site's existing black-button classes (.button.button-primary on the
   element itself, see index.html) rather than a bespoke rule - this block only adds what a
   header-sized CTA needs beyond .button's own defaults: a tighter icon-to-text gap (.button's
   18px suits a full-width body CTA, not a compact header slot) and the "дыхание" pulse the
   owner asked for so the one remaining header action is easy to spot. No new colours - the
   pulse's halo reuses --ink (#151515 = rgb(21, 21, 21)) at low opacity, and .button-primary's
   own existing :hover (background: var(--ink-soft), in the (hover: hover) block below) is
   untouched. */
.header-cta {
  gap: 8px;
  animation: header-cta-pulse 3200ms ease-in-out infinite;
}

@keyframes header-cta-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(21, 21, 21, 0.22);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(21, 21, 21, 0);
  }
}

/* Pausing on hover/focus/press keeps the ambient pulse from fighting the button's own
   interaction feedback (.button-primary:hover below, the shared :active { scale(0.97) } rule
   above) - real interaction always wins over the ambient cue. prefers-reduced-motion is
   handled by the sitewide `*, *::before, *::after` rule further down this file
   (animation-duration: 0.01ms !important; animation-iteration-count: 1 !important) - the same
   mechanism already used for the referral dialog's entrance and the report loader steps, nothing
   new needed here: at 0.01ms/1 iteration the keyframe range collapses to its 100% state
   (no shadow), i.e. no visible pulse at all. */
.header-cta:hover,
.header-cta:focus-visible,
.header-cta:active {
  animation-play-state: paused;
  box-shadow: none;
}

main {
  min-height: calc(100vh - var(--header-height));
}

/* Site identification footer (ч. 2 ст. 10 ФЗ-149) - sits outside the SPA's [data-view]
   sections, so it stays visible on all four steps without being cloned per-view (change
   record 2026-08-25, «Расширение scope v6», пункт 2). Reuses the same "4px ink top
   border" divider already used for .query-card/.filters-panel/.trust-block/.service-map,
   and the existing --ink/--muted tokens - no new colours. */
.site-footer {
  width: var(--page);
  margin-inline: auto;
  padding: 28px 0 40px;
  border-top: 4px solid var(--ink);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.site-footer strong {
  color: var(--ink);
}

.site-footer p {
  margin: 0 0 10px;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

.view {
  width: var(--page);
  min-height: calc(100vh - var(--header-height));
  margin-inline: auto;
  padding: 76px 0 108px;
}

.landing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  gap: clamp(64px, 8vw, 132px);
  align-items: start;
}

.eyebrow,
.panel-kicker,
.query-head span,
.section-label,
.evidence-id {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.055em;
  line-height: 1.45;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
}

.accent-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--orange);
}

.hero-copy h1,
.page-intro h1,
.quote-header h1,
.report-top h1 {
  margin: 0;
  font-size: clamp(50px, 5.7vw, 88px);
  font-weight: 850;
  letter-spacing: -0.07em;
  line-height: 0.98;
  text-wrap: balance;
}

.hero-copy h1 em,
.page-intro h1 em,
.quote-header h1 em {
  color: var(--orange);
  font-style: normal;
}

.hero-lede,
.page-intro > p:last-child,
.quote-header > div > p:last-child,
.report-top > p:last-child {
  max-width: 760px;
  margin: 32px 0 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 38px;
}

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 20px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.button-primary {
  color: var(--white);
  background: var(--ink);
}

.button-secondary {
  color: var(--ink);
  background: var(--white);
  border-color: var(--ink);
}

.button-orange {
  color: var(--ink);
  background: var(--orange);
}

.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid currentColor;
  font-weight: 700;
  text-decoration: none;
}

.hero-demo-note {
  max-width: 650px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.service-map {
  margin-top: 42px;
  padding-top: 26px;
  border-top: 4px solid var(--ink);
}

.panel-kicker {
  margin: 0 0 14px;
}

.service-map h2,
.trust-block h2,
.sample-callout h2,
.price-panel h2,
.filters-content h2,
.generation-copy h2,
.ready-card h2,
.sheet-heading h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 820;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.service-map-heading > p:last-child {
  margin: 22px 0 30px;
  color: var(--muted);
}

.service-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--ink);
}

.service-steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.service-steps li > span {
  color: var(--orange);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
}

.service-steps strong {
  font-size: 16px;
}

.service-steps p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.trust-block {
  margin-top: 82px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  gap: 36px;
  align-items: start;
  color: var(--white);
  background: var(--ink);
}

.trust-block h2 {
  max-width: 760px;
  color: var(--white);
}

.trust-block p:not(.panel-kicker) {
  max-width: 760px;
  margin: 18px 0 0;
  color: #bab9b4;
}

.trust-block > a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid var(--orange);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}

/* -- партнёрская рекомендация «до 15%» -----------------------------------
   Перенесено из макета V5 без изменения цвета и шрифта: обе таблицы стилей
   объявляют одинаковый :root, поэтому здесь только раскладка. */

.referral-feature {
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(230px, 0.34fr) minmax(0, 1fr);
  margin-top: 28px;
  color: var(--white);
  background: var(--ink);
}

.referral-feature-index {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 38px 34px;
  color: var(--ink);
  background: var(--orange);
}

.referral-feature-index span {
  max-width: 170px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.45;
  text-transform: uppercase;
}

.referral-feature-index strong {
  font-family: var(--display);
  font-size: clamp(48px, 5.4vw, 76px);
  font-weight: 850;
  letter-spacing: -0.075em;
  line-height: 0.9;
}

.referral-feature-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 46px 52px 42px;
}

.referral-feature-body .panel-kicker {
  color: var(--orange);
}

.referral-feature-body h2 {
  max-width: 920px;
  margin: 18px 0 46px;
  color: var(--white);
  font-size: clamp(36px, 4.25vw, 64px);
  font-weight: 850;
  letter-spacing: -0.065em;
  line-height: 0.98;
  text-wrap: balance;
}

.referral-feature-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: end;
}

.referral-feature-footer p {
  max-width: 730px;
  margin: 0;
  color: #c9c8c3;
  font-size: 16px;
  line-height: 1.55;
}

.referral-feature-footer .button {
  min-width: 184px;
}

.page-intro {
  max-width: 980px;
  margin-bottom: 54px;
}

.page-intro h1 {
  max-width: 900px;
  font-size: clamp(48px, 5vw, 76px);
}

.search-layout {
  display: grid;
  gap: 34px;
  align-items: start;
}

.search-primary {
  min-width: 0;
  display: grid;
  gap: 22px;
  align-content: start;
}

.query-card {
  padding: 30px;
  background: var(--white);
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.query-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.query-head label,
.form-unit > label,
.sheet-panel > label {
  font-size: 15px;
  font-weight: 760;
}

textarea,
input[type="search"],
input[type="date"],
.range-inputs input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-size: 16px;
}

textarea {
  min-height: 118px;
  resize: vertical;
  font-size: 22px;
  font-weight: 680;
  line-height: 1.35;
}

input[type="search"] {
  padding-left: 44px;
  appearance: none;
}

input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

.field-help,
.mini-help {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.selected-chips,
.okpd2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.mode-row {
  min-width: 0;
  margin: 0;
  padding: 24px 30px;
  background: var(--white);
  border: 0;
  border-bottom: 1px solid var(--line);
}

.mode-row legend {
  width: 100%;
  margin-bottom: 14px;
  padding: 0;
  font-size: 15px;
  font-weight: 760;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink);
}

.segmented-control label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.segmented-control label + label {
  border-left: 1px solid var(--ink);
}

.segmented-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-control span {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-size: 13px;
  font-weight: 680;
  text-align: center;
}

.segmented-control input:checked + span {
  color: var(--white);
  background: var(--ink);
}

.segmented-control input:focus-visible + span {
  outline: 3px solid var(--orange);
  outline-offset: -4px;
}

.mode-example {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.active-summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 30px;
  color: var(--white);
  background: var(--ink);
}

.active-summary div {
  min-width: 0;
}

.active-summary strong,
.active-summary span {
  display: block;
}

.active-summary strong {
  font-size: 16px;
}

.active-summary div > span {
  margin-top: 4px;
  color: #aaa9a4;
  font-size: 12px;
}

.active-summary .panel-kicker {
  color: var(--orange);
}

.summary-format {
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--display);
  font-size: 11px;
  text-transform: uppercase;
}

.filters-panel {
  min-width: 0;
  background: var(--white);
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* 2026-09-02: the panel folds on every viewport (owner: «раскрыть и заново скрыть»). The summary
   is the one control: 56px tall (≥44px target), keyboard-focusable by nature, state text mirrors
   the open attribute. Before this the summary was hidden on desktop and the panel was forced
   open by app.js, so extra filters could never be put away. */
.filters-panel > summary {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 24px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 760;
  list-style: none;
  user-select: none;
}

.filters-panel > summary::-webkit-details-marker {
  display: none;
}

.filters-panel > summary:focus-visible {
  outline: 3px solid var(--orange-dark);
  outline-offset: -3px;
}

.summary-state {
  color: var(--orange-dark);
  font-size: 12px;
}

.filters-content {
  padding: 24px;
}

.filter-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ink);
}

.filters-content h2 {
  font-size: 26px;
}

.ghost-button {
  min-height: 44px;
  padding: 0 4px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.filter-block,
.form-unit {
  min-width: 0;
  margin: 0;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}

/* Filters panel: horizontal layout from the tablet breakpoint up (mobile keeps the vertical
   accordion list untouched, see MOBILE_QUERY in app.js / the max-width: 920px block below -
   change record 2026-08-25, «Расширение scope v4», пункт 4). The heading stays a full-width
   row above the grid of filter groups (the intro advice line it used to share this rule with
   was removed in «Расширение scope v7», пункт 4).
   Change record 2026-08-30-result-card-improvements, «Уточнение к п.10-11» (owner sent his own
   reference layout after Roseltorg/ЭТП were removed): switched from flex-wrap to CSS grid -
   true equal-width columns per row, not flex-grow's "whatever fits" widths, which is what the
   owner's own screenshot showed breaking ("сетка ломается ... разными ширинами"). Column count
   is exactly 7 after Roseltorg's checkbox (plan_version 4) and ЭТП's own fieldset (plan_version
   5) were removed - the same 7 sections, same order, as the owner's own reference file.
   Superseded by «Пункт 17 — уточнение спецификации: выбран вариант "Ровная сетка 4×2"»
   (2026-08-30, plan_version 10): auto-fit(minmax(250px,1fr)) let the browser pick a column
   count that varied with content width, which is exactly the "вразнобой" the owner complained
   about after seeing it live. Fixed 4-column grid (repeat(4, minmax(0, 1fr))) - row 1
   Источники/Субъекты РФ/Срок подачи/НМЦК, row 2 ОКПД2/КТРУ/Заказчик (4th cell empty) - column
   count no longer depends on viewport width between this breakpoint and the next, only the
   media query does. row-gap bumped 40px -> 48px per the same spec (artboard
   scratchpad/design-filters/Main.dc.html, section 1). */
@media (min-width: 921px) {
  .filters-content {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 48px;
    align-items: start;
  }

  .filter-heading {
    grid-column: 1 / -1;
  }

  .filter-block,
  .form-unit {
    min-width: 0;
    padding: 0;
    border: 0;
  }

  /* Row alignment overrides for this breakpoint live further down the file, right after the
     base rules they override (.filter-column-subtitle / .date-pair label > span /
     .range-inputs label > span / .customer-unit > label / .okpd2-heading / .okpd2-heading h3)
     - change record 2026-08-25, «Расширение scope v9», пункт 5. Placed here originally, they
     had identical selector specificity to those base rules and lost the cascade tie every
     time because the base rules sit later in source order, so margin-bottom silently stayed
     at the base (mobile-intended) values on desktop too, while min-height (not contested by
     any base rule) applied fine - that's why headings lined up but fields didn't. Search for
     "Row alignment (desktop)" below. */
}

.filter-block legend,
.okpd2-heading h3 {
  margin: 0 0 12px;
  padding: 0;
  font-size: 14px;
  font-weight: 780;
}

.check-row {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
}

.check-row input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--orange);
}

.autocomplete {
  position: relative;
}

.search-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  z-index: 2;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
  transform: translateY(-58%);
}

.search-icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

.suggestion-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 320px;
  overflow: auto;
  background: var(--white);
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(21, 21, 21, 0.12);
}

.suggestion-option {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--white);
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}

.suggestion-option.is-active,
.suggestion-option[aria-current="true"] {
  background: var(--orange-pale);
}

.customer-option,
.okpd2-option {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

.customer-option small,
.okpd2-option span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.okpd2-option strong {
  font-family: var(--display);
  font-size: 11px;
}

mark {
  padding: 0 2px;
  color: inherit;
  background: #ffd1bb;
}

.suggestion-empty,
.suggestion-limit {
  margin: 0;
  padding: 14px;
  color: var(--muted);
  font-size: 12px;
}

.suggestion-limit {
  border-top: 1px solid var(--line);
}

.selection-zone,
.okpd2-selection {
  margin-top: 12px;
}

.all-state {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  color: var(--muted);
  background: var(--wash);
  font-size: 12px;
}

.selection-chip {
  min-height: 44px;
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  font-size: 12px;
}

.selection-chip > span {
  display: flex;
  align-items: center;
  padding: 8px 10px;
}

.selection-chip > button {
  width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0;
  background: var(--wash);
  border: 0;
  border-left: 1px solid var(--line);
  cursor: pointer;
  font-size: 20px;
}

.okpd2-chip {
  width: 100%;
}

.okpd2-chip > span {
  min-width: 0;
  flex: 1;
  align-items: flex-start;
  flex-direction: column;
}

.okpd2-chip strong {
  font-family: var(--display);
  font-size: 11px;
}

.okpd2-chip span span {
  color: var(--muted);
  font-size: 11px;
}

.calm-advice {
  margin: 12px 0 0;
  padding: 13px 14px;
  color: var(--ink-soft);
  background: var(--wash);
  border-left: 3px solid var(--orange);
  font-size: 12px;
}

.date-pair,
.range-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.date-pair label,
.range-inputs label {
  min-width: 0;
}

.date-pair label > span,
.range-inputs label > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-family: var(--display);
  font-size: 11px;
  text-transform: uppercase;
}

/* Change record 2026-08-30-result-card-improvements, «Уточнение к п.10-11»: every one of the 7
   filter sections now carries a real subtitle (owner's own reference file, root-approved
   subtitles for THIS block specifically - the project's general "no hint text" rule stays in
   force everywhere else). font-size bumped from 11px to 13px to match that reference - this text
   is no longer mostly-empty decorative spacing (3 of 7 sections had nothing here before this
   CR), it is now real, load-bearing content on every column. */
.filter-column-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.okpd2-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.okpd2-heading h3 {
  margin-bottom: 4px;
}

.okpd2-mobile-trigger {
  display: none;
}

.customer-unit > label {
  display: block;
  margin-bottom: 10px;
}

/* Row alignment (desktop) - доводка по просьбе владельца after a live review (change record
   2026-08-25, «Расширение scope v7», пункт 6, довыровнено в «Расширение scope v9», пункт 5):
   every column reserves the same height between its heading and its actual field, whether
   that space holds real subtitle text (ОКПД2), the "от"/"до" micro-labels (Срок подачи,
   НМЦК) or nothing at all (Источники, Субъекты РФ, Заказчик) - so fields land on the same
   horizontal line across a row regardless of how many columns happen to share it at a given
   width (flex-wrap already varies that by container width, so alignment can't depend on a
   fixed per-row column count). min-height, not height, so it never clips content that needs
   more room. Desktop only (min-width: 921px) - mobile's single-column accordion has no row
   to align, so it keeps the base-rule spacing above untouched (10px/5px/0/4px/14px). This
   block is deliberately placed here, textually AFTER every base rule it overrides
   (.filter-column-subtitle, .date-pair/.range-inputs label > span, .customer-unit > label,
   .okpd2-heading, .okpd2-heading h3 all above) - same selector specificity means CSS breaks
   the tie by source order, so being later here is what makes these values actually win on
   desktop instead of being silently discarded (see the note next to .filter-block, .form-unit
   above for the bug this fixes).
   «Пункт 17 — уточнение спецификации: Ровная сетка 4×2» (2026-08-30, plan_version 10), пункт 2
   ("ключевой фикс вразнобой"): .filter-column-subtitle min-height raised 32px -> 38px - the old
   32px fit only ONE line of the 13px/1.45 subtitle text; ОКПД2's subtitle ("Отраслевой фильтр,
   отдельно от слов в документах") wraps to two lines at this column width and overflowed past
   32px, pushing ОКПД2's own field lower than its row-mates (Источники/Субъекты РФ/Срок подачи -
   the exact "сетка ... в разноброс" the owner pointed at). 38px reliably fits two lines
   (2 × 13px × 1.45 ≈ 37.7px) so every column in a row now starts its actual field at the same
   Y regardless of how many lines its own subtitle happens to wrap to. */
@media (min-width: 921px) {
  .filter-column-subtitle {
    min-height: 38px;
    margin-bottom: 8px;
  }

  .date-pair label > span,
  .range-inputs label > span {
    min-height: 32px;
    margin-bottom: 8px;
    font-weight: 500;
    letter-spacing: 0.08em;
  }

  .customer-unit > label {
    /* .form-unit > label (shared with .query-head/.sheet-panel, untouched there) sets
       15px/760; match the 14px/780 every other column's heading uses (.filter-block legend,
       .okpd2-heading h3) so "Заказчик" has the same line-height as its row-mates and the
       intermediate label line lands exactly on the shared row, not 1-2px lower. */
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 780;
  }

  .okpd2-heading {
    margin-bottom: 0;
  }

  .okpd2-heading h3 {
    margin-bottom: 12px;
  }
}

/* «Пункт 17 — уточнение спецификации: Ровная сетка 4×2» (2026-08-30, plan_version 10) - the
   remaining points of the spec (артборд scratchpad/design-filters/Main.dc.html, section
   "Пункт 17 — уточнение спецификации" в change record 2026-08-30-result-card-improvements.md).
   Desktop only (min-width: 921px) per пункт 8 of that spec - the ≤920px vertical accordion
   keeps every base rule above untouched. Placed after every base rule it overrides for the
   same cascade-order reason documented above the "Row alignment (desktop)" block - equal
   selector specificity means source order breaks the tie. */
@media (min-width: 921px) {
  /* Пункт 4: 2 equal columns gap 12px (base rule above sets 10px for both mobile and desktop -
     bumped only here so the ≤920px accordion keeps its original 10px per пункт 8). */
  .filters-content .date-pair,
  .filters-content .range-inputs {
    gap: 12px;
  }

  /* Пункт 3: every field in this block gets the same box (52px tall, 1.5px var(--ink) border,
     var(--white) fill, 15px/500 text). Scoped to .filters-content so the rest of the site's
     inputs (query textarea, sheet-panel/quote/price-panel search fields, the mobile ОКПД2
     dialog) are untouched - .range-inputs input is listed explicitly because the НМЦК от/до
     fields carry no type attribute (defaults to text, but [type="text"] only matches an
     attribute that is actually present in the markup, so it would silently miss them). */
  .filters-content input[type="search"],
  .filters-content input[type="date"],
  .filters-content input[type="text"],
  .filters-content .range-inputs input {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    border: 1.5px solid var(--ink);
    background: var(--white);
    font-size: 15px;
    font-weight: 500;
  }

  /* Re-applies the site-wide input[type="search"] { padding-left: 44px } (app.css line ~705)
     that the box reset above just overwrote with the shared 14px - Субъекты РФ/ОКПД2 need the
     room for the magnifier icon that sits at left: 15px inside .search-icon below. */
  .filters-content input[type="search"] {
    padding-left: 44px;
  }

  /* Заказчик (#customer-input) is type="search" for its native clear affordance but the spec
     draws no magnifier for it (пункт 3 names only "поисковые (.autocomplete Субъекты/ОКПД2)") -
     it is not wrapped in .autocomplete and has no .search-icon sibling, so the 44px reserved
     above would leave a bare gap before the text. Higher specificity than the two rules above,
     order-independent. */
  .filters-content .customer-unit input[type="search"] {
    padding-left: 14px;
  }

  /* Пункт 3 continued: .search-icon is a CSS-drawn glyph (border-radius circle + rotated
     ::after handle), not the artboard's inline SVG - keeping it exactly that way (no markup
     change) per пункт 8, only resized 15px -> 18px per the spec, handle scaled by the same
     ~1.2x ratio so it still meets the circle's edge. Scoped to .filters-content so the mobile
     ОКПД2 dialog's own .autocomplete .search-icon (only reachable through
     .okpd2-mobile-trigger, display: none above this breakpoint) keeps its original 15px. */
  .filters-content .search-icon {
    width: 18px;
    height: 18px;
  }

  .filters-content .search-icon::after {
    right: -6px;
    bottom: -4px;
    width: 7px;
  }

  /* Пункт 5: custom 22×22 checkbox for Источники (.check-row is only ever used by the two
     source checkboxes - see index.html - so this never leaks to any other checkbox on the
     site). appearance: none replaces the accent-color set on .check-row input in the base rule
     above; that base declaration is left in place on purpose so the ≤920px accordion keeps its
     plain native checkbox untouched (accent-color is simply inert once appearance: none wins
     at this breakpoint). */
  .check-row {
    min-height: 40px;
    gap: 8px;
    font-size: 15px;
  }

  .check-row input {
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--ink);
    background: var(--white);
    cursor: pointer;
  }

  .check-row input:checked {
    background-color: var(--orange);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
  }

  /* No custom :focus-visible override here on purpose - the site-wide rule (app.css line ~118,
     :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }) already applies
     to this checkbox once appearance: none takes it out of native rendering; keeping the same
     ring everywhere is correct behaviour, not an omission. */

  /* Пункт 6: "Все регионы РФ" / "Коды не выбраны" zones. */
  .filters-content .all-state {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
  }

  /* Пункт 7: block header. .panel-kicker and .filters-content h2 are shared classes used all
     over the page (service-map, trust-block, active-summary, sample-callout...) so the weight/
     letter-spacing/line-height tweaks are scoped to this heading specifically, matching the
     existing per-block override pattern (.active-summary .panel-kicker,
     .referral-feature-body .panel-kicker above). */
  .filter-heading {
    align-items: flex-end;
    border-bottom-width: 1.5px;
  }

  .filter-heading .panel-kicker {
    font-weight: 600;
    letter-spacing: 0.14em;
  }

  .filters-content h2 {
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
  }
}

.selected-customer {
  min-height: 54px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-top: 12px;
  border: 1px solid var(--line-strong);
}

.selected-customer > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
}

.selected-customer strong {
  font-size: 12px;
}

.selected-customer span {
  color: var(--muted);
  font-size: 11px;
}

.selected-customer button {
  width: 48px;
  min-height: 48px;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--wash);
  cursor: pointer;
  font-size: 22px;
}

.form-error {
  margin: 0;
  padding: 14px 16px;
  color: var(--danger);
  background: #fff0ec;
  border-left: 4px solid var(--danger);
  font-weight: 650;
}

.form-error p {
  margin: 0;
}

.form-error .button {
  width: fit-content;
  margin-top: 12px;
  background: var(--white);
}

.sticky-submit {
  position: relative;
  bottom: auto;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  background: rgba(248, 248, 246, 0.96);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  backdrop-filter: blur(10px);
}

.mobile-submit {
  display: none;
}

.sticky-submit strong,
.sticky-submit span {
  display: block;
}

.sticky-submit span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.loader-shell {
  position: fixed;
  inset: var(--header-height) 0 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(248, 248, 246, 0.94);
  backdrop-filter: blur(14px);
}

.loader-panel {
  width: min(650px, 100%);
  padding: clamp(28px, 5vw, 58px);
  color: var(--white);
  background: var(--ink);
  box-shadow: 14px 14px 0 var(--orange);
}

.loader-panel h2 {
  margin: 0 0 30px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.loader-steps,
.report-loader-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.loader-steps li,
.report-loader-steps li {
  min-height: 48px;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  border-top: 1px solid #343432;
  transition: color 180ms var(--ease-out), opacity 180ms var(--ease-out);
}

.loader-state {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
}

.loader-steps li.is-pending,
.report-loader-steps li.is-pending {
  opacity: 0.48;
}

.loader-steps li.is-current,
.report-loader-steps li.is-current {
  color: var(--white);
  opacity: 1;
}

.loader-steps li.is-current .loader-state,
.report-loader-steps li.is-current .loader-state {
  border-color: var(--orange);
  background: var(--orange);
}

.loader-steps li.is-complete,
.report-loader-steps li.is-complete {
  color: #a5d2b8;
  opacity: 1;
}

.loader-steps li.is-complete .loader-state,
.report-loader-steps li.is-complete .loader-state {
  color: var(--white);
  background: var(--success);
  border-color: var(--success);
}

.quote-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 42px;
  align-items: end;
  margin-bottom: 54px;
}

.quote-header h1 {
  max-width: 980px;
  font-size: clamp(48px, 5.6vw, 80px);
}

.demo-badge {
  margin-right: 8px;
}

.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 38px;
  align-items: start;
}

.mobile-price-teaser {
  display: none;
}

.evidence-section {
  min-width: 0;
}

.section-label {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.section-label span:last-child {
  color: var(--muted);
  text-align: right;
}

.request-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 22px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.request-summary > div {
  min-width: 0;
  min-height: 84px;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.request-summary > div > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.request-summary strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
}

.request-summary .columns-row {
  grid-column: 1 / -1;
  min-height: auto;
}

.quote-okpd2-list div + div {
  margin-top: 8px;
}

.quote-okpd2-list span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.demo-disclaimer {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--orange-pale);
  border-left: 4px solid var(--orange);
  font-size: 13px;
  font-weight: 620;
}

.evidence-list {
  margin-top: 22px;
  border-top: 1px solid var(--ink);
}

.evidence-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--ink);
}

.evidence-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.evidence-id {
  margin: 0;
  color: var(--orange-dark);
}

.format-badge {
  min-height: 24px;
  color: var(--white);
  background: var(--ink);
}

.evidence-item h3 {
  max-width: 760px;
  margin: 14px 0;
  font-size: 20px;
  letter-spacing: -0.025em;
}

.evidence-item blockquote {
  margin: 0;
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.evidence-location,
.evidence-footer {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.evidence-footer {
  margin-top: 5px;
}

.external-discovery {
  margin-top: 34px;
}

.source-family {
  margin-top: 12px;
  padding: 12px 0 3px 16px;
  border-left: 3px solid var(--orange);
}

.source-family {
  margin-top: 12px;
  padding: 12px 0 3px 16px;
  border-left: 3px solid var(--orange);
}

/* «Коммерция» is now a real group checkbox + collapsible drawer rather than a static
   label over an always-visible list (change record 2026-08-25, «Расширение scope v7»,
   пункт 6): checking it selects all platforms inside, individual platforms can still be
   unchecked one at a time, and their names stay hidden until the row itself (not the
   checkbox - see the click handler in app.js) is clicked to open the drawer. */
.source-family > summary {
  list-style: none;
}

.source-family > summary::-webkit-details-marker {
  display: none;
}

.source-family > summary .summary-state {
  margin-left: auto;
  color: var(--orange-dark);
  font-size: 12px;
  font-weight: 650;
}

.source-family-options {
  margin-top: 10px;
  padding-left: 34px;
  display: grid;
  gap: 2px;
}

.external-discovery-note {
  margin: 18px 0;
  padding: 15px 18px;
  color: var(--muted);
  background: var(--wash);
  border-left: 4px solid var(--orange);
  font-size: 13px;
}

.external-discovery-list {
  display: grid;
  gap: 12px;
}

.external-discovery-item {
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
}

.external-discovery-item h3 {
  margin: 9px 0;
  font-size: 20px;
}

.external-discovery-item p {
  margin: 6px 0;
}

.external-discovery-item blockquote {
  margin: 10px 0;
  padding-left: 14px;
  color: var(--ink);
  border-left: 2px solid var(--orange);
}

.external-discovery-item blockquote {
  margin: 10px 0;
  padding-left: 14px;
  color: var(--ink);
  border-left: 2px solid var(--orange);
}

.external-discovery-documents,
.external-discovery-empty {
  color: var(--muted);
  font-size: 12px;
}

.external-discovery-item a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  color: var(--orange-dark);
  border-bottom: 1px solid currentColor;
  font-weight: 700;
  text-decoration: none;
}

.sample-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-top: 30px;
  padding: 28px;
  background: var(--wash);
}

.sample-callout h2 {
  font-size: 28px;
}

.sample-callout p:not(.panel-kicker) {
  margin: 10px 0 0;
  color: var(--muted);
}

.price-panel {
  position: sticky;
  top: 22px;
  padding: 30px;
  color: var(--white);
  background: var(--ink);
  border-top: 5px solid var(--orange);
}

.price-panel h2 {
  color: var(--white);
  margin-bottom: 24px;
}

.package-comparison {
  display: grid;
  gap: 1px;
  margin-bottom: 24px;
  background: #494947;
  border: 1px solid #494947;
}

.package-comparison > div {
  padding: 13px 14px;
  background: var(--ink);
}

.package-comparison span,
.package-comparison strong {
  display: block;
}

.package-comparison span {
  margin-bottom: 5px;
  color: #aaa9a4;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.package-comparison strong {
  color: var(--white);
  font-size: 14px;
  line-height: 1.4;
}

.package-options {
  border-top: 1px solid #494947;
}

.price-option {
  position: relative;
  min-height: 82px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid #494947;
  cursor: pointer;
}

.price-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-ui {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid #aaa9a4;
  border-radius: 50%;
}

.price-option input:checked + .radio-ui {
  border: 6px solid var(--orange);
}

.price-option input:focus-visible + .radio-ui {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

.price-option strong,
.price-option small {
  display: block;
}

.price-option strong {
  font-size: 16px;
}

.price-option small {
  margin-top: 4px;
  color: #aaa9a4;
  font-size: 11px;
}

.order-note,
.payment-note,
.team-note {
  color: #aaa9a4;
  font-size: 11px;
}

.order-note {
  margin: 14px 0 0;
}

/* Change record 2026-09-07-payments-30-per-lot, нога P3: единственная строка состояния под
   кнопкой оплаты (пусто, когда состояние нормальное). 11px хватало сноске о порядке выдачи,
   но это сообщение читают в момент ошибки — размер как у остального служебного текста панели. */
.payment-note {
  margin: 14px 0 0;
  font-size: 13px;
}

.selected-price {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding: 16px 0;
  border-top: 1px solid #494947;
  border-bottom: 1px solid #494947;
}

.selected-price span {
  color: #aaa9a4;
}

.selected-price strong {
  text-align: right;
}

.prepay-note {
  margin-top: 18px;
  padding: 16px;
  color: var(--ink);
  background: var(--paper);
  border-left: 4px solid var(--orange);
  font-size: 12px;
}

.prepay-note p {
  margin: 7px 0 0;
}

.full-button {
  width: 100%;
  justify-content: space-between;
  margin-top: 18px;
}

.team-note {
  margin: 14px 0 0;
}

.team-note a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--white);
}

.report-view {
  max-width: 1080px;
}

.report-top {
  max-width: 880px;
}

.report-top h1 {
  font-size: clamp(56px, 7vw, 100px);
}

.status-check {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--success);
  border-radius: 50%;
  font-family: var(--sans);
}

.generation-card,
.ready-card {
  margin-top: 52px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 34px;
  padding: clamp(26px, 4vw, 46px);
  color: var(--white);
  background: var(--ink);
  border-top: 5px solid var(--orange);
}

.generation-mark {
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px solid #555552;
  color: var(--orange);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 750;
}

.generation-copy h2,
.ready-card h2 {
  color: var(--white);
  margin-bottom: 22px;
}

.report-loader-steps li {
  border-color: #3c3c3a;
}

.ready-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.ready-card p {
  color: #aaa9a4;
}

.ready-card small {
  display: block;
  color: #dddcd7;
}

/* Change record 2026-09-07-payments-30-per-lot, нога P3 (UI оплаты): колонка действий на
   карточке статуса оплаты (mini_site/static/checkout.html). За раз видно ровно одно из двух —
   «Скачать XLSX» либо «Проверить ещё раз», — но в одной колонке они не разъезжаются, если
   когда-нибудь окажутся видимы одновременно. Ширину кнопок на мобильном уже задаёт
   существующее правило `.ready-card .button { width: 100% }`. */
.checkout-actions {
  display: grid;
  gap: 12px;
}

.report-links {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 30px;
}

.report-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid currentColor;
  font-weight: 680;
  text-decoration: none;
}

.referral-dialog {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  overflow: hidden;
}

.referral-dialog::backdrop {
  background: rgba(15, 15, 15, 0.78);
}

.referral-dialog-panel {
  max-height: calc(100dvh - 24px);
  padding: 36px 40px calc(30px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 6px solid var(--orange);
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.28);
  opacity: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}

@starting-style {
  .referral-dialog[open] .referral-dialog-panel {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

.referral-dialog.is-keyboard-open .referral-dialog-panel {
  transition: none;
}

.referral-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.referral-dialog-heading h2 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(36px, 4.4vw, 58px);
  font-weight: 850;
  letter-spacing: -0.065em;
  line-height: 0.98;
  text-wrap: balance;
}

.referral-dialog-close {
  width: 48px;
  min-height: 48px;
  flex: 0 0 auto;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--ink);
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
}

.referral-dialog-lede {
  max-width: 720px;
  margin: 24px 0 14px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.referral-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--ink);
}

.referral-steps li {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.referral-steps li > span {
  padding-top: 2px;
  color: var(--orange-dark);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
}

.referral-steps strong {
  font-size: 17px;
}

.referral-steps p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.referral-disclosure {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--orange-pale);
  border-left: 4px solid var(--orange);
}

.referral-disclosure p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.referral-disclosure p + p {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 13px;
}

.referral-dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.referral-external-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.okpd2-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  overflow: hidden;
}

.okpd2-dialog::backdrop {
  background: rgba(15, 15, 15, 0.68);
  backdrop-filter: blur(4px);
}

.sheet-panel {
  max-height: min(820px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--paper);
  border-top: 5px solid var(--orange);
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.25);
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-drawer);
}

@starting-style {
  .okpd2-dialog[open] .sheet-panel {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

.sheet-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.sheet-heading button {
  width: 48px;
  min-height: 48px;
  flex: 0 0 auto;
  background: var(--white);
  border: 1px solid var(--ink);
  cursor: pointer;
  font-size: 24px;
}

.sheet-search > label {
  display: block;
  margin-bottom: 8px;
}

.sheet-results {
  position: relative;
  inset: auto;
  flex: 1;
  min-height: 200px;
  margin-top: 10px;
  overflow-y: auto;
  box-shadow: none;
}

.sheet-done {
  margin-top: 14px;
}

@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover,
  .utility-row a:hover,
  .text-link:hover,
  .report-links a:hover,
  .trust-block > a:hover {
    color: var(--orange);
  }

  .button-primary:hover {
    background: var(--ink-soft);
  }

  .button-secondary:hover,
  .suggestion-option:hover {
    background: var(--orange-pale);
    border-color: var(--orange);
  }

  .button-orange:hover {
    background: #ff6a2b;
  }
}

@media (min-width: 1121px) {
  .search-view {
    padding-top: 40px;
  }

  .search-intro {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
    column-gap: 40px;
    align-items: end;
    margin-bottom: 28px;
  }

  .search-intro .eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 16px;
  }

  .search-intro h1 {
    grid-column: 1;
    max-width: none;
    font-size: clamp(50px, 4.1vw, 60px);
  }

  .search-intro > p:not(.eyebrow):not(.canonical-note) {
    grid-column: 1;
    margin: 12px 0 0;
  }

  .search-primary {
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
    grid-template-areas:
      "query mode"
      "filters filters"
      "summary submit"
      "error error";
    gap: 16px 18px;
  }

  .query-card {
    grid-area: query;
    padding: 20px;
  }

  .filters-panel {
    grid-area: filters;
  }

  .query-card .query-head {
    margin-bottom: 10px;
  }

  .query-card textarea {
    min-height: 80px;
    font-size: 20px;
  }

  .mode-row {
    grid-area: mode;
    align-self: stretch;
    padding: 20px;
  }

  .active-summary {
    grid-area: summary;
    padding: 20px 22px;
  }

  .desktop-submit {
    grid-area: submit;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
  }

  .desktop-submit .button {
    width: 100%;
  }

  #search-error {
    grid-area: error;
  }
}

@media (max-width: 1120px) {
  .landing-grid {
    gap: 50px;
  }

  .hero-copy h1 {
    font-size: clamp(48px, 6vw, 70px);
  }

  .quote-grid {
    grid-template-columns: minmax(0, 1fr) 350px;
  }

  .main-nav {
    gap: 18px;
  }
}

@media (max-width: 920px) {
  :root {
    --page: min(100% - 32px, 760px);
    --header-height: 94px;
  }

  body {
    font-size: 16px;
  }

  .utility-row {
    min-height: 34px;
    justify-content: space-between;
    gap: 12px;
  }

  .utility-row span:first-child {
    max-width: 52%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .utility-row a {
    min-height: 44px;
  }

  .header-main {
    min-height: 60px;
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  .main-nav {
    display: none;
  }

  .header-cta {
    min-height: 44px;
    padding: 10px 14px;
    gap: 6px;
    font-size: 13px;
  }

  .view {
    min-height: auto;
    padding: 46px 0 64px;
  }

  .landing-grid,
  .quote-grid {
    grid-template-columns: 1fr;
  }

  .landing-grid {
    gap: 28px;
  }

  .hero-copy h1,
  .page-intro h1,
  .quote-header h1,
  .report-top h1 {
    font-size: clamp(42px, 9.8vw, 70px);
  }

  .hero-lede,
  .page-intro > p:last-child,
  .quote-header > div > p:last-child,
  .report-top > p:last-child {
    margin-top: 24px;
    font-size: 17px;
  }

  .service-map {
    margin-top: 28px;
  }

  .trust-block {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 48px;
    padding: 30px;
  }

  .trust-block > a {
    width: fit-content;
  }

  .referral-feature {
    min-height: 0;
    grid-template-columns: 1fr;
    margin-top: 18px;
  }

  .referral-feature-index {
    min-height: 104px;
    flex-direction: row;
    align-items: flex-end;
    gap: 24px;
    padding: 22px 28px;
  }

  .referral-feature-index strong {
    font-size: clamp(42px, 10vw, 62px);
  }

  .referral-feature-body {
    padding: 34px 30px 30px;
  }

  .referral-feature-body h2 {
    margin: 12px 0 34px;
    font-size: clamp(34px, 7.8vw, 54px);
  }

  .referral-dialog {
    width: calc(100vw - 24px);
  }

  .referral-dialog-panel {
    padding: 28px 28px calc(24px + env(safe-area-inset-bottom));
    box-shadow: none;
  }

  .referral-dialog-heading h2 {
    font-size: clamp(32px, 7vw, 46px);
  }

  .page-intro {
    margin-bottom: 34px;
  }

  .search-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .search-primary {
    gap: 16px;
  }

  .desktop-submit {
    display: none;
  }

  .mobile-submit {
    display: flex;
  }

  .query-card,
  .mode-row,
  .active-summary {
    padding: 22px;
  }

  textarea,
  .search-layout input,
  input[type="search"],
  input[type="date"],
  .range-inputs input,
  .segmented-control span {
    font-size: 16px;
  }

  textarea {
    font-size: 19px;
  }

  .ghost-button,
  .selection-chip,
  .selection-chip > button,
  .selected-customer button,
  .sheet-heading button,
  .okpd2-mobile-trigger {
    min-height: 44px;
  }

  .active-summary {
    flex-direction: column;
    gap: 12px;
  }

  .summary-format {
    align-self: flex-start;
  }

  .filters-panel {
    border-top-width: 1px;
  }

  .filters-panel > summary {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 18px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 760;
    list-style: none;
  }

  .filters-panel > summary::-webkit-details-marker {
    display: none;
  }

  .summary-state {
    color: var(--orange-dark);
    font-size: 12px;
  }

  .filters-content {
    padding: 20px;
    border-top: 1px solid var(--line);
  }

  .okpd2-desktop-search {
    display: none;
  }

  .okpd2-mobile-trigger {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 11px 14px 11px 44px;
    background: var(--white);
    border: 1px solid var(--line-strong);
    cursor: pointer;
    font-size: 16px;
    text-align: left;
  }

  .okpd2-mobile-trigger .search-icon {
    left: 15px;
  }

  .sticky-submit {
    position: relative;
    bottom: auto;
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: stretch;
    background: rgba(248, 248, 246, 0.98);
  }

  .sticky-submit .button {
    width: 100%;
  }

  .loader-shell {
    inset: var(--header-height) 0 0;
  }

  .quote-header {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 34px;
  }

  .quote-header .text-link {
    width: fit-content;
  }

  .mobile-price-teaser {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 22px;
    align-items: center;
    margin: -10px 0 24px;
    padding: 20px 22px;
    background: var(--white);
    border-top: 4px solid var(--orange);
    border-bottom: 1px solid var(--ink);
  }

  .mobile-price-teaser .panel-kicker {
    margin-bottom: 7px;
  }

  .mobile-price-teaser h2 {
    font-size: 22px;
    line-height: 1.1;
  }

  .mobile-price-teaser p:not(.panel-kicker) {
    margin: 7px 0 0;
    color: var(--muted);
    font-weight: 650;
  }

  .mobile-price-teaser small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
  }

  .text-button {
    min-height: 44px;
    padding: 0;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid currentColor;
    cursor: pointer;
    font: inherit;
    font-weight: 740;
  }

  .price-panel {
    position: static;
  }

  .sample-callout {
    grid-template-columns: 1fr;
  }

  .sample-callout .button {
    width: 100%;
  }

  .generation-card,
  .ready-card {
    grid-template-columns: 1fr;
  }

  .generation-mark {
    min-height: 110px;
  }

  .ready-card .button {
    width: 100%;
  }

  .okpd2-dialog {
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: 100dvh;
    margin: auto 0 0;
    overflow: hidden;
  }

  .sheet-panel {
    width: 100%;
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px 18px calc(14px + env(safe-area-inset-bottom));
    overflow: hidden;
    box-shadow: none;
  }

  .okpd2-dialog[open] .sheet-panel {
    transform: none;
    transition: opacity 160ms var(--ease-out);
  }

  .sheet-heading {
    margin-bottom: 0;
  }

  .sheet-heading h2 {
    font-size: clamp(24px, 7vw, 36px);
  }

  .sheet-search,
  .sheet-results {
    min-height: 0;
  }

  .sheet-results {
    margin-top: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sheet-done {
    min-height: 48px;
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  :root {
    --page: calc(100% - 24px);
  }

  .brand {
    font-size: 17px;
  }

  .prototype-stamp {
    display: none;
  }

  .header-cta span {
    display: none;
  }

  .view {
    padding-top: 36px;
  }

  .eyebrow {
    margin-bottom: 20px;
  }

  .hero-copy h1,
  .page-intro h1,
  .quote-header h1,
  .report-top h1 {
    font-size: clamp(38px, 12.5vw, 58px);
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-actions .text-link {
    width: fit-content;
  }

  .trust-block,
  .query-card,
  .mode-row,
  .active-summary,
  .price-panel {
    padding: 20px;
  }

  .referral-feature-index {
    min-height: 90px;
    padding: 18px 20px;
  }

  .referral-feature-index span {
    max-width: 140px;
  }

  .referral-feature-index strong {
    font-size: 38px;
  }

  .referral-feature-body {
    padding: 28px 22px 24px;
  }

  .referral-feature-body h2 {
    margin-bottom: 28px;
    font-size: clamp(31px, 9.4vw, 42px);
  }

  .referral-feature-footer {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .referral-feature-footer .button {
    width: 100%;
  }

  .referral-dialog-panel {
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  }

  .referral-dialog-heading {
    gap: 14px;
  }

  .referral-dialog-heading h2 {
    font-size: clamp(29px, 9vw, 38px);
  }

  .referral-dialog-lede {
    margin: 18px 0 12px;
    font-size: 15px;
  }

  .referral-steps li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 14px 0;
  }

  .referral-disclosure {
    margin-top: 18px;
    padding: 15px 16px;
  }

  .referral-dialog-actions {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }

  .segmented-control {
    grid-template-columns: 1fr;
  }

  .segmented-control label + label {
    border-left: 0;
    border-top: 1px solid var(--ink);
  }

  .request-summary {
    grid-template-columns: 1fr;
  }

  .request-summary .columns-row {
    grid-column: auto;
  }

  .section-label {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-label span:last-child {
    text-align: left;
  }

  .mobile-price-teaser {
    grid-template-columns: 1fr;
  }

  .mobile-price-teaser .text-button,
  .mobile-price-teaser small {
    grid-column: auto;
  }

  .mobile-price-teaser .text-button {
    width: fit-content;
  }

  .date-pair,
  .range-inputs {
    grid-template-columns: 1fr;
  }

  .filter-heading {
    align-items: center;
  }

  .filters-content h2 {
    font-size: 23px;
  }

  .okpd2-heading {
    flex-direction: column;
  }

  .evidence-item h3 {
    font-size: 18px;
  }

  .evidence-item blockquote {
    font-size: 19px;
  }

  .sample-callout,
  .generation-card,
  .ready-card {
    padding: 22px;
  }

  .report-links {
    flex-direction: column;
    gap: 8px;
  }

  .report-links a {
    width: fit-content;
  }
}

@media (max-width: 360px) {
  .utility-row span:first-child {
    display: none;
  }

  .utility-row {
    justify-content: flex-end;
  }

  .header-cta {
    max-width: 128px;
    padding: 10px 8px;
    text-align: center;
  }

  .hero-copy h1,
  .page-intro h1,
  .quote-header h1,
  .report-top h1 {
    font-size: 36px;
  }

  .query-card,
  .mode-row,
  .active-summary,
  .filters-content,
  .price-panel {
    padding: 17px;
  }

  .referral-feature-body {
    padding-inline: 18px;
  }

  .referral-dialog-panel {
    padding-inline: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .sheet-panel,
  .referral-dialog-panel,
  .loader-steps li,
  .report-loader-steps li {
    transition-property: opacity, color;
    transition-duration: 120ms;
  }

  .referral-dialog-panel {
    transform: none !important;
  }
}

/* 2026-09-03-site-beta-fixes п.5: blurred stand-in for a field withheld before payment. The
   dummy text is not the real value (the browser never receives it), so the blur is honest UI,
   not a lock that could be picked from the page source. */
.locked-field {
  display: inline-block;
  max-width: 100%;
  filter: blur(5px);
  color: var(--ink);
  user-select: none;
  pointer-events: none;
  vertical-align: baseline;
}

/* 2026-09-03-site-beta-fixes (owner, phone screenshot 02.09: «почему сузилась страница»): a quote
   from a Word document can be one long run of non-breaking spaces or a bare 40-digit number; with
   every card shown, such a quote stretched the document to ~800px and the phone zoomed out to fit.
   Break anywhere when there is no other way, never let a card widen the page. */
.evidence-item,
.evidence-item blockquote {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Examples by ОКПД2 group - the fifth wizard screen, rebuilt as an accordion (change record
   2026-09-07-site-examples-by-okpd2, нога EX-2; replaces the flat card grid of change record
   2026-09-02-site-examples-view). Same vocabulary as the rest of the page: 1px ink rules
   instead of boxes, --orange only for the open/closed marker, no new colours, no new fonts.
   Written mobile-first here - the set of groups is long enough that the phone layout is the
   real one, and the two min-width steps below only widen the example list into columns. */
.examples-groups {
  margin-top: 32px;
  border-top: 4px solid var(--ink);
}

.example-group {
  border-bottom: 1px solid var(--ink);
}

.example-group-heading {
  margin: 0;
  font: inherit;
}

/* The whole group header is the control: 60px tall on a phone (well past the 44px floor) and
   full width, so there is no small chevron to aim at. */
.example-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 16px 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.example-group-title {
  min-width: 0;
  font-size: 19px;
  font-weight: 820;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}

.example-group-toggle:hover .example-group-title {
  color: var(--orange-dark);
}

.example-group-marker {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

.example-group-marker::before,
.example-group-marker::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--orange);
  transition: transform 200ms var(--ease-out);
}

/* Closed: the two bars make a plus. Open: the vertical bar rotates flat into a minus. */
.example-group-marker::after {
  transform: rotate(90deg);
}

.example-group-toggle[aria-expanded="true"] .example-group-marker::after {
  transform: rotate(0deg);
}

.example-group-panel {
  padding-bottom: 10px;
}

.example-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.example-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 0 18px;
  border-top: 1px solid var(--line);
}

.example-query {
  margin: 0;
  font-size: 17px;
  font-weight: 760;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.example-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 8px 0 0;
  /* --ink-soft, not --muted: this row is 13px and --muted (#6e6d68 on #f8f8f6) lands at 4.46:1,
     just under the 4.5:1 floor for normal text. The hierarchy against .example-query is carried
     by size and weight (17px/760 vs 13px/400) instead of by contrast. */
  color: var(--ink-soft);
  font-size: 13px;
}

.example-mode {
  font-weight: 700;
}

.example-okpd2 {
  font-family: var(--display);
  font-size: 12px;
}

/* Filled in only when /api/search actually answered - stays [hidden] otherwise (see
   mini_site/static/search_examples.js: a failed or rate-limited count shows nothing at all). */
.example-found {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 760;
}

.example-item .button {
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 18px;
  align-self: flex-start;
}

.filters-examples-link {
  margin-top: 10px;
  font-size: 13px;
  color: var(--orange-dark);
}

@media (min-width: 720px) {
  .examples-groups {
    margin-top: 44px;
  }

  .example-group-title {
    font-size: 24px;
  }

  .example-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
}

@media (min-width: 1120px) {
  .example-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .example-group-marker::before,
  .example-group-marker::after {
    transition: none;
  }
}

@media (max-width: 600px) {
  .hero-actions .text-link {
    min-height: 44px;
  }
}