/* ══════════════════════════════════════════════════
   Design-system tokens — SmotriSunduk
   ══════════════════════════════════════════════════ */

:root {
  /* Colours */
  --color-bg-page:        #FFFFFF;
  --color-primary:        #2D68C4;
  --color-primary-hover:  #389C14;
  --color-text-main:      #000000;
  --color-text-sub:       #272424;
  --color-text-label:     #4C4F6D;
  --color-text-muted:     #64688D;
  --color-text-dark-gray: #333333;
  --color-text-gray:      #666666;
  --color-text-light-gray:#999999;
  --color-accent:         #EAF2FF;
  --color-divider:        #B6BBDD;
  --color-border:         #B6BBDD;
  --color-border-subtle:  #e5e7eb;
  --color-border-mid:     #cccccc;
  --color-bg-carousel:    #E5E5E5;
  --color-bg-error:       #FDF0EF;
  --color-bg-success:     #f0f9ed;
  --color-input-valid:    #389C14;
  --color-input-error:    #E74C6F;
  --color-danger:         #c0392b;
  --color-danger-strong:  #c62828;
  --color-success-strong: #2e7d32;
  --color-info:           #4a90d9;
  --color-white:          #FFFFFF;

  /* Radii */
  --radius-sm:    4px;
  --radius-card:  5px;
  --radius-btn:   25px;
  --radius-badge: 25px;

  /* Spacing scale (4-px base; see docs/design-system.md §4.1) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Typography */
  --font-base: 'Open Sans', sans-serif;
}

/* ── Reset ── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;          /* always show scrollbar gutter — prevents
                                  content shift between pages            */
}

body.page-new {
  margin: 0;
  overflow-x: hidden;          /* clip 100vw breakouts that include scrollbar
                                  width — keeps body at viewport width so
                                  margin:auto centering stays consistent   */
  font-family: var(--font-base);
  background-color: var(--color-bg-page);
  color: var(--color-text-main);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* ══════════════════════════════════════════════════
   Button
   ══════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-7);
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.25s ease;
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
  text-decoration: none;
}

/* Token-aligned outline variant (mockup used 2px solid primary +
   white-on-hover). */
.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--lg {
  padding: var(--space-4) var(--space-10);
  font-size: 24px;
}

/* ══════════════════════════════════════════════════
   Card (design-system component)
   ══════════════════════════════════════════════════ */

.ds-card {
  background-color: var(--color-accent);
  border-radius: var(--radius-card);
  border: none;
  padding: var(--space-4);
  text-align: left;
}

.ds-card__icon {
  font-size: 36px;
  margin-bottom: var(--space-2);
  line-height: 1;
}

.ds-card__title {
  margin: 0 0 var(--space-2);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

.ds-card__subtitle {
  margin: 0 0 var(--space-2);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-main);
}

.ds-card__text {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-main);
}

/* ══════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════ */

.sn-header {
  background-color: var(--color-white);
}

/* ── Top row ── */

.sn-header__top {
  width: 100%;
}

.sn-header__top-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.sn-header__logo-block {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.sn-header__logo-block:hover {
  text-decoration: none;
}

.sn-header__logo {
  height: 48px;
  width: auto;
}

.sn-header__title-main {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-main);
}

.sn-header__title-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-sub);
}

.sn-header__nav {
  display: flex;
  gap: var(--space-6);
  font-size: 16px;
  font-weight: 400;
}

.sn-header__nav-link {
  color: var(--color-text-main);
  text-decoration: none;
  white-space: nowrap;
}

.sn-header__nav-link:hover {
  color: var(--color-primary);
}

.sn-header__cta {
  flex-shrink: 0;
}

/* ── Divider between top & bottom ── */

.sn-header__divider {
  width: 100%;
  height: 2px;
  background-color: var(--color-divider);
}

/* ── Bottom row (badge) ── */

.sn-header__bottom {
  width: 100%;
  background-color: var(--color-white);
}

.sn-header__bottom-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-6) var(--space-3);
  display: flex;
  align-items: center;
}

.sn-header__badge {
  /* left-edge aligned with .sn-header__title-main via logo width+gap */
  margin-left: 60px;                /* logo 48 + gap 12 */
  background-color: rgba(178, 196, 224, 0.30);
  border-radius: var(--radius-badge);
  padding: var(--space-2) var(--space-6);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-primary);
  text-align: center;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════ */

.sn-footer {
  background-color: var(--color-white);
  margin-top: var(--space-10);
}

.sn-footer__separator {
  width: 100%;
  height: 2px;
  background-color: var(--color-divider);
}

/* ── Main footer content ── */

.sn-footer__content {
  width: 100%;
}

.sn-footer__content-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-6);
  display: flex;
  gap: var(--space-10);
}

/* Brand block — left ~1/4–1/3 */

.sn-footer__brand {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}

.sn-footer__brand:hover {
  text-decoration: none;
}

.sn-footer__logo {
  height: 48px;
  width: auto;
  flex-shrink: 0;
}

.sn-footer__brand-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sn-footer__brand-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-main);
  white-space: nowrap;
}

.sn-footer__brand-desc {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-sub);
}

.sn-footer__brand-contacts {
  margin-top: var(--space-2);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text-main);
  white-space: nowrap;
}

.sn-footer__brand-legal {
  margin-top: var(--space-2);
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-text-main);
  text-align: left;
}

/* Right column — links + lower */

.sn-footer__right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Links grid */

.sn-footer__links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.sn-footer__links-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sn-footer__link {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-main);
  text-decoration: none;
}

.sn-footer__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Divider between links & lower */

.sn-footer__divider {
  width: 100%;
  height: 2px;
  margin: var(--space-5) 0 0;
  background-color: var(--color-divider);
}

/* Lower part (payment icons) */

.sn-footer__lower {
  width: 100%;
  padding: var(--space-4) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sn-footer__pay-systems {
  height: 28px;
  width: auto;
}

/* ══════════════════════════════════════════════════
   MAIN content wrapper
   ══════════════════════════════════════════════════ */

.sn-main {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}

/* ══════════════════════════════════════════════════
   Section 1 — Hero (50/50 split)
   ══════════════════════════════════════════════════ */

.sn-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
  margin-bottom: var(--space-16);
}

.sn-hero__title {
  margin: 0 0 var(--space-5);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-main);
}

.sn-hero__lead {
  margin: 0 0 var(--space-5);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-main);
}

.sn-hero__list {
  padding-left: var(--space-5);
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-main);
  line-height: 1.6;
}

.sn-hero__list li + li {
  margin-top: var(--space-2);
}

/* ── Right column: carousel ── */

.sn-hero__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: 0;
}

.sn-hero__examples-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-main);
  margin: 0;
}

.sn-carousel {
  position: relative;
  width: 100%;
  height: 415px;
  background-color: var(--color-bg-carousel);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.sn-carousel__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.sn-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sn-carousel__slide img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.sn-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: rgba(45, 104, 196, 0.7);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.sn-carousel__btn:hover {
  background-color: rgba(45, 104, 196, 1);
}

.sn-carousel__btn--prev { left: 8px; }
.sn-carousel__btn--next { right: 8px; }

.sn-carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.sn-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-divider);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease;
}

.sn-carousel__dot--active {
  background-color: var(--color-primary);
}

/* ══════════════════════════════════════════════════
   Order form
   ══════════════════════════════════════════════════ */

.sn-order {
  margin-bottom: var(--space-12);
}

.sn-order__title {
  margin: 0 0 var(--space-6);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: left;
}

.sn-order-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.sn-order-form__group {
  border: none;
  margin: 0;
  padding: 0;
}

.sn-order-form__legend {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: var(--space-3);
  color: var(--color-text-label);
}

/* ── Legend with right-aligned icon ── */

.sn-order-form__legend--with-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-4);
}

.sn-order-form__legend-text {
  flex-shrink: 0;
}

.sn-cn-status-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  margin-left: auto;
  transition: opacity 0.3s ease;
}

/* Clickable state — pointer cursor */
.sn-cn-status-icon.is-clickable {
  cursor: pointer;
}

.sn-cn-status-icon__img {
  width: 100%;
  height: 100%;
  display: none;
}

/* Show the correct icon based on data-state */
.sn-cn-status-icon[data-state="success"] .sn-cn-status-icon__img--success {
  display: inline-block;
  /* Green var(--color-input-valid) #389C14 */
  filter: brightness(0) saturate(100%) invert(42%) sepia(96%) saturate(429%) hue-rotate(72deg) brightness(97%) contrast(91%);
}

.sn-cn-status-icon[data-state="error"] .sn-cn-status-icon__img--error {
  display: inline-block;
  /* Red var(--color-input-error) #E74C6F */
  /* Tuned via scipy.optimize (DE + Nelder-Mead) to land on RGB(231, 76, 111). */
  filter: brightness(0) saturate(100%) invert(46%) sepia(90%) saturate(510%) hue-rotate(296deg) brightness(78%) contrast(91%);
}

.sn-cn-status-icon[data-state="repeat"] .sn-cn-status-icon__img--repeat {
  display: inline-block;
  /* Grey-blue #B6BBDD */
  filter: brightness(0) saturate(100%) invert(82%) sepia(9%) saturate(847%) hue-rotate(197deg) brightness(97%) contrast(84%);
}

/* When clickable (repeat + all fields valid), show green repeat icon */
.sn-cn-status-icon[data-state="repeat"].is-clickable .sn-cn-status-icon__img--repeat {
  /* Green var(--color-input-valid) #389C14 */
  filter: brightness(0) saturate(100%) invert(42%) sepia(96%) saturate(429%) hue-rotate(72deg) brightness(97%) contrast(91%);
}

/* State: unknown — hidden with smooth transition */
.sn-cn-status-icon[data-state="unknown"] {
  opacity: 0;
  pointer-events: none;
}

/* State: validating — CSS spinner (no <img>, uses pseudo-element) */
.sn-cn-status-icon[data-state="validating"]::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--color-divider, #B6BBDD);
  border-top-color: var(--color-primary, #2D68C4);
  border-radius: 50%;
  animation: cn-spin 0.8s linear infinite;
}

@keyframes cn-spin {
  to { transform: rotate(360deg); }
}

.sn-order-form__cadastral {
  display: grid;
  grid-template-columns: 80px auto 80px auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-1);
  align-items: center;
  margin-bottom: var(--space-3);
}

.sn-cad-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-divider);
  user-select: none;
}

.sn-order-form__cadastral-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.sn-order-form__cadastral-wrap .sn-order-form__cadastral {
  margin-bottom: 0;
}

.sn-order-form__input {
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background-color: var(--color-white);
  padding: var(--space-3) var(--space-3);
  font-size: 16px;
  font-family: var(--font-base);
  color: var(--color-text-main);
  transition: border-color 0.2s ease;
}

.sn-order-form__input:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: var(--color-white);
}

.sn-order-form__input--valid {
  border-color: var(--color-input-valid);
}

.sn-order-form__input--error {
  border-color: var(--color-input-error);
}

.sn-order-form__input--short {
  max-width: 80px;
}

.sn-order-form__input--full {
  width: 100%;
}

.sn-order-form__input.confirmed {
  border-color: var(--color-input-valid);
  box-shadow: 0 0 0 2px rgba(56, 156, 20, 0.15); /* translucent --color-input-valid */
}

/* ── Add extra cadastral number button ── */

.sn-order-form__add-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  margin-top: var(--space-1);
}

.sn-order-form__add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.sn-order-form__add-text {
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text-label);
  font-family: var(--font-base);
}

/* ── Radio buttons ── */

.sn-radio-row {
  display: flex;
  gap: var(--space-6);
}

.sn-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text-muted);
  cursor: pointer;
}

.sn-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sn-radio__circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}

.sn-radio__circle::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.sn-radio input:checked + .sn-radio__circle {
  border-color: var(--color-primary);
}

.sn-radio input:checked + .sn-radio__circle::after {
  background-color: var(--color-primary);
}

/* ── Email section ── */

.sn-order-form__hint {
  margin: 0 0 var(--space-3);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ── Checkboxes ── */

.sn-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  cursor: pointer;
}

.sn-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sn-checkbox__box {
  flex-shrink: 0;
  margin-top: 2px;  /* optical alignment exception */
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 2px solid var(--color-border);
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sn-checkbox__box::after {
  content: '';
  display: none;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(-45deg);
  margin-top: -2px;
}

.sn-checkbox input:checked + .sn-checkbox__box {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.sn-checkbox input:checked + .sn-checkbox__box::after {
  display: block;
}

/* Unchecked error state */
.sn-checkbox--error .sn-checkbox__box {
  border-color: var(--color-input-error);
}

.sn-checkbox__label {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ── Submit footer ── */

.sn-order-form__footer {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-2);
}

.sn-order-form__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  color: var(--color-primary);
}

.sn-order-form__price-value {
  font-size: 64px;
  font-weight: 700;
}

.sn-order-form__price-currency {
  font-size: 64px;
  font-weight: 700;
}

/* ── Validation states ── */

.sn-order-form__input.error {
  border-color: var(--color-input-error);
  background-color: var(--color-bg-error);
}

.sn-order-form__input.success {
  border-color: var(--color-input-valid);
  background-color: var(--color-bg-success);
}

.sn-checkbox.error {
  color: var(--color-input-error);
}

.sn-checkbox.error .sn-checkbox__box {
  border-color: var(--color-input-error);
}

.sn-radio-row.error {
  outline: 2px solid var(--color-input-error);
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-1);
}

/* ── Remove cadastral row button ── */

.sn-order-form__remove-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  margin-top: var(--space-1);
}

.sn-order-form__remove-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background-color: var(--color-danger);
  color: var(--color-white);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.sn-order-form__remove-text {
  font-size: 18px;
  font-weight: 400;
  color: var(--color-danger);
  font-family: var(--font-base);
}

/* ── Error bar (fixed at top of viewport) ── */

.sn-order-form__error {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-error);
  border-bottom: 2px solid var(--color-input-error);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sn-order-form__error.active {
  display: block;
}

.sn-order-form__error-holder {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 1200px;
  margin: 0 auto;
}

.sn-order-form__error-icon {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--color-input-error);
}

.sn-order-form__error-text {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-dark-gray);
}

.sn-order-form__error-close {
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-light-gray);
  text-decoration: none;
  cursor: pointer;
}

.sn-order-form__error-close:hover {
  color: var(--color-text-dark-gray);
}

/* ── Loader overlay (full-page) ── */

.sn-order-form__loader {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  z-index: 999;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sn-order-form__loader.active {
  display: flex;
}

/* ── Progress Overlay Steps ── */

.sn-progress-overlay {
  width: 100%;
  max-width: 480px;
  padding: var(--space-10) var(--space-6);
}

.sn-progress-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.sn-progress-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.sn-progress-item.is-active,
.sn-progress-item.is-done {
  opacity: 1;
}

.sn-progress-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--color-border-mid);
  box-sizing: border-box;
  transition: border-color 0.3s, background 0.3s;
}

/* Spinner for active step */
.sn-progress-item.is-active .sn-progress-item__icon {
  border-color: var(--color-info);
  border-top-color: transparent;
  animation: sn-spin 0.8s linear infinite;
}

/* Green checkmark for done step */
.sn-progress-item.is-done .sn-progress-item__icon {
  border-color: var(--color-input-valid);
  background: var(--color-input-valid);
  animation: none;
}

.sn-progress-item.is-done .sn-progress-item__icon::after {
  content: '';
  display: block;
  width: 7px;
  height: 12px;
  border: solid var(--color-white);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.sn-progress-item__text {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-dark-gray);
}

.sn-progress-item.is-done .sn-progress-item__text {
  color: var(--color-input-valid);
}

@keyframes sn-spin {
  to { transform: rotate(360deg); }
}

/* ── Payment icons under form ── */

.sn-order__pay-icons {
  margin-top: var(--space-5);
  text-align: center;
}

.sn-order__pay-icons img {
  height: auto;
  width: auto;
}

/* ── Order two-column layout ── */

.sn-order__columns {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: var(--space-10);
  align-items: stretch;
}

.sn-order__left {
  min-width: 0;
  background-color: var(--color-accent);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-5);
}

.sn-order__right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  background-color: var(--color-accent);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-5);
}

/* ── Sidebar info block (ФАЙЛ) ── */

.sn-sidebar-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sn-sidebar-info__title {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sn-sidebar-info__icon-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sn-sidebar-info__icon {
  flex-shrink: 0;
}

.sn-sidebar-info__icon-img {
  width: 38px;
  height: 47px;
  display: inline-block;
  vertical-align: middle;
}

.sn-sidebar-info__icon-text {
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text-main);
}

/* ── Sidebar download button ── */

.btn--sm {
  padding: var(--space-2) var(--space-5);
  font-size: 14px;
}

/* Prevent download button from stretching inside flex-column sidebar */
.sn-order__right .btn--sm {
  align-self: flex-start;
}

/* ── Sidebar SVG icons ── */

.sn-svg {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

.sn-svg--pdf    { width: 38px; height: 47px; color: var(--color-primary); }
.sn-svg--sun    { width: 40px; height: 40px; color: var(--color-primary); }
.sn-svg--size   { width: 36px; height: 36px; color: var(--color-primary); }
.sn-svg--dividers { width: 36px; height: 40px; color: var(--color-primary); }
.sn-svg--pen    { width: 38px; height: 38px; color: var(--color-primary); }
.sn-svg--print  { width: 40px; height: 40px; color: var(--color-primary); }

/* ── Sidebar feature list ── */

.sn-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 auto;
  justify-content: space-evenly;
}

.sn-sidebar-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sn-sidebar-list__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
}

.sn-sidebar-list__text {
  font-weight: 500;
  font-size: 16px;
  color: var(--color-text-main);
  line-height: 1.4;
}

.sn-sidebar-list__text .text-block {
  display: block;
}


/* ══════════════════════════════════════════════════
   Cadastral help block (sidebar)
   ══════════════════════════════════════════════════ */

.sn-cadastral-help {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: center;
  gap: 0;
}

.sn-cadastral-help__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}

.sn-cadastral-help__text {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-main);
  line-height: 1.5;
  margin: 0 0 var(--space-3);
}

.sn-cadastral-help__btn {
  align-self: flex-start;
  margin-bottom: var(--space-3);
}

.sn-cadastral-help__warning {
  background-color: var(--color-bg-error);
  border-left: 3px solid var(--color-input-error);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
}

.sn-cadastral-help__warning-text {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-danger);
  line-height: 1.45;
}


/* ══════════════════════════════════════════════════
   Support / info bar (full-width)
   ══════════════════════════════════════════════════ */

.sn-support {
  background-color: var(--color-accent);
  border-radius: var(--radius-card);
  min-height: 106px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--space-12);
}

.sn-support__inner {
  max-width: 100%;
  padding: var(--space-5) var(--space-6);
  text-align: center;
}

.sn-support__text {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-main);
  line-height: 1.6;
}

.sn-support__text strong {
  font-weight: 700;
}

/* ══════════════════════════════════════════════════
   Help / Info-card sections
   ══════════════════════════════════════════════════ */

.sn-section {
  margin-bottom: var(--space-12);
}

.sn-section__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-main);
  margin: 0 0 var(--space-5);
}

.sn-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* ══════════════════════════════════════════════════
   Page title (about & similar pages)
   ══════════════════════════════════════════════════ */

.sn-page-title {
  margin: 0 0 var(--space-6);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-main);
  text-align: left;
}

/* ══════════════════════════════════════════════════
   Info block (full-width accent bar)
   ══════════════════════════════════════════════════ */

.sn-info-block {
  background-color: var(--color-accent);
  border-radius: var(--radius-card);
  min-height: 106px;
  max-width: 1440px;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-8);
}

.sn-info-block__inner {
  padding: var(--space-5) var(--space-6);
  width: 100%;
}

.sn-info-block__text {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-main);
  line-height: 1.6;
  text-align: left;
}

.sn-info-block__text strong {
  font-weight: 700;
}

/* ══════════════════════════════════════════════════
   Plans gallery (about page)
   ══════════════════════════════════════════════════ */

.sn-plans-gallery {
  margin-bottom: var(--space-12);
  text-align: center;
}

.sn-plans-gallery__caption {
  margin: 0 0 var(--space-4);
  font-size: 15px;
  color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════════
   Accent-top card variant (categorical accent border,
   color set inline per-instance via --ds-card-accent)
   ══════════════════════════════════════════════════ */

.ds-card--accent-top {
  border-top: 3px solid var(--ds-card-accent, var(--color-primary));
}

/* ══════════════════════════════════════════════════
   Centered CTA button
   ══════════════════════════════════════════════════ */

.sn-cta-center {
  text-align: center;
  margin-bottom: var(--space-12);
}

.sn-cta-center__title {
  font-size: 24px;
  text-align: center;
}

.sn-cta-center__sub {
  margin: var(--space-3) 0 0;
  font-size: 15px;
  color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════════
   Print section
   ══════════════════════════════════════════════════ */

.sn-print {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.sn-print__image {
  flex-shrink: 0;
}

.sn-print__image img {
  display: block;
  max-width: 450px;
  height: auto;
}

.sn-print__content {
  text-align: left;
}

.sn-print__label {
  margin: 0 0 var(--space-2);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

.sn-print__text {
  margin: 0 0 var(--space-2);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-label);
}

/* ══════════════════════════════════════════════════
   Legal document
   ══════════════════════════════════════════════════ */

.legal {
  max-width: 860px;
  margin: 0 auto;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-10) var(--space-12) var(--space-12);
}

.legal__header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--color-primary);
}

.legal__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
  color: var(--color-text-main);
  text-transform: uppercase;
  text-align: center;
}

.legal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.legal__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.legal__heading {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-main);
  text-transform: uppercase;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.legal__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-main);
  text-align: justify;
}

.legal__text strong {
  color: var(--color-text-main);
  font-weight: 600;
}

.legal__list {
  margin: 0;
  padding-left: var(--space-6);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-main);
}

.legal__list li + li {
  margin-top: var(--space-1);
}

/* ══════════════════════════════════════════════════
   Contacts page
   ══════════════════════════════════════════════════ */

.sn-content-divider {
  height: 2px;
  background-color: var(--color-accent);
  max-width: 1440px;
  margin: var(--space-6) 0;
}

.sn-contacts-section {
  margin-bottom: var(--space-10);
}

.sn-contacts-h2 {
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text-main);
  margin: 0 0 var(--space-2);
}

.sn-contacts-text {
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-main);
  text-align: left;
  margin: 0 0 var(--space-3);
  line-height: 1.6;
}

.sn-contacts-text-bold {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-main);
}

.sn-contacts-contact-info {
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text-main);
  margin: 0 0 var(--space-4);
}

.sn-contacts-list-disk {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-3);
}

.sn-contacts-list-disk li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-2);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-main);
  line-height: 1.6;
}

.sn-contacts-list-disk li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-text-main);
  font-size: 16px;
}

.sn-contacts-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.sn-contacts-history-body {
  position: relative;
  overflow: hidden;
}

.sn-contacts-history-right {
  float: right;
  margin: 0 0 var(--space-4) var(--space-6);
  text-align: center;
}

.sn-contacts-history-icon {
  width: 120px;
  height: auto;
  flex-shrink: 0;
}

.sn-contacts-terminal-wrap {
  margin-top: var(--space-4);
}

.sn-contacts-terminal-img {
  max-width: 350px;
  width: 100%;
  height: auto;
}

/* ══════════════════════════════════════════════════
   Content pages (payment, refunds)
   ══════════════════════════════════════════════════ */

.sn-content-section {
  margin-bottom: var(--space-10);
}

.sn-content-h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-main);
  margin: 0 0 var(--space-2);
}

.sn-content-h2 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text-main);
  margin: 0 0 var(--space-2);
}

.sn-content-h3 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-main);
  margin: 0 0 var(--space-2);
}

.sn-content-text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-main);
  text-align: left;
  margin: 0 0 var(--space-3);
  line-height: 1.6;
}

.sn-content-text-bold {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-main);
  display: block;
  margin: 0 0 var(--space-2);
}

/* Disk bullet list */
.sn-content-list-disk {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-3);
}

.sn-content-list-disk li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-2);
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-main);
  line-height: 1.6;
}

.sn-content-list-disk li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-text-main);
  font-size: 16px;
}

/* Ndash list */
.sn-content-list-ndash {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-3);
}

.sn-content-list-ndash li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-2);
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-main);
  line-height: 1.6;
}

.sn-content-list-ndash li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-text-main);
  font-size: 16px;
}

/* Notice / alert block with accent background */
.sn-content-notice {
  background-color: var(--color-accent);
  padding: var(--space-5) var(--space-6);
  max-width: 1440px;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-card);
}

.sn-content-notice .sn-content-text {
  margin-bottom: 0;
}

/* Image float right for content pages */
.sn-content-img-right {
  float: right;
  margin: 0 0 var(--space-4) var(--space-6);
  max-width: 280px;
}

.sn-content-img-right img {
  display: block;
  width: 100%;
  height: auto;
}

/* SBP icon next to heading */
.sn-content-heading-with-icon {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.sn-content-heading-with-icon .sn-content-h2 {
  margin-bottom: 0;
}

.sn-content-heading-icon {
  width: 60px;
  height: auto;
  flex-shrink: 0;
}

/* Two equal-height sections filling content area */
.sn-content-equal-sections {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - 300px);
}

.sn-content-equal-sections .sn-content-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Table styling for content pages */
.sn-content-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}

.sn-content-table td,
.sn-content-table th {
  border: 2px solid var(--color-text-main);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-main);
}

.sn-content-table th {
  font-weight: 700;
}

/* Numbered list */
.sn-content-list-numbered {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-3);
  counter-reset: ol-counter;
}

.sn-content-list-numbered li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-2);
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-main);
  line-height: 1.6;
  counter-increment: ol-counter;
}

.sn-content-list-numbered li::before {
  content: counter(ol-counter) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-text-main);
  font-size: 16px;
  font-weight: 400;
}

/* ══════════════════════════════════════════════════
   Article images & captions
   ══════════════════════════════════════════════════ */

/* Teaser image – fixed 200px width, used on article listing page */
.teaser-image {
  width: 200px;
  height: auto;
  background-color: var(--color-bg-page);
  display: block;
  object-fit: cover;
}

/* All images inside articles – centred, max 900px */
.article-image {
  max-width: 900px;
  width: 100%;
  height: auto;
  background-color: var(--color-bg-page);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.article-image--small  { max-width: 300px; }
.article-image--medium { max-width: 600px; }

/* Caption under image */
.image-caption {
  font-family: 'Open Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text-gray);
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* figure wrapper — reset browser defaults */
.article-figure {
  margin: 0 0 var(--space-6);
  padding: 0;
}

/* ══════════════════════════════════════════════════
   Related articles ("Читайте также")
   ══════════════════════════════════════════════════ */

.sn-related-articles__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.sn-related-articles__card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-accent);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease;
}

.sn-related-articles__card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  text-decoration: none;
}

.sn-related-articles__img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.sn-related-articles__title {
  padding: var(--space-3) var(--space-4) var(--space-1);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-main);
}

.sn-related-articles__desc {
  padding: 0 var(--space-4) var(--space-4);
  font-size: 14px;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .sn-related-articles__grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════
   404 page
   ══════════════════════════════════════════════════ */

.sn-404 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 300px);
}

.sn-404__container {
  text-align: center;
}

.sn-404__title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 200px;
  line-height: 1;
  color: var(--color-primary);
  margin: 0 0 var(--space-6);
}

.sn-404__text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--color-text-main);
  margin: 0 0 var(--space-8);
}

/* ══════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .sn-hero {
    grid-template-columns: 1fr;
  }

  .sn-carousel {
    width: 100%;
  }

  .sn-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sn-print {
    flex-direction: column;
  }

  .sn-footer__content-inner {
    flex-direction: column;
  }

  .sn-footer__links-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sn-order__columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sn-header__top-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .sn-order-form__add-text {
    font-size: 14px;
  }

  .sn-header__nav {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .sn-header__badge {
    margin-left: 0;
  }

  .sn-main {
    padding-inline: var(--space-4);
  }

  .sn-order-form__cadastral {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  }
  
  .sn-order-form__legend-text {
    flex-shrink: 1;
    min-width: 0;
  }

  .sn-order__title {
    white-space: normal;
  }

  .sn-order-form__footer {
    flex-wrap: wrap;
  }

  .sn-order-form__price-value,
  .sn-order-form__price-currency {
    font-size: 40px;
  }

  .sn-section__grid {
    grid-template-columns: 1fr;
  }

  .sn-footer__content-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .sn-footer__links-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .sn-footer__lower {
    flex-direction: column;
    gap: var(--space-3);
  }

  .sn-contacts-history-header {
    gap: var(--space-3);
  }

  .sn-contacts-history-icon {
    width: 80px;
  }

  .sn-contacts-history-right {
    float: none;
    margin: 0 auto var(--space-5);
  }

  .sn-contacts-terminal-wrap {
    display: none;
  }

  .sn-content-img-right {
    float: none;
    margin: 0 0 var(--space-4) 0;
    max-width: 100%;
  }

  .sn-content-heading-with-icon {
    flex-direction: column;
    align-items: flex-start;
  }

  .sn-404__title {
    font-size: 120px;
  }
}

/* ══════════════════════════════════════════════════
   Order Complete Page
   ════════════════════════════════════════════════ */

.order-complete {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: var(--space-12) 0 var(--space-16);
}

.order-complete__card {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-12) var(--space-10);
  background-color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.order-complete__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.order-complete__spinner {
  width: 64px;
  height: 64px;
}

.order-complete__status {
  font-size: 18px;
  color: var(--color-text-sub);
  font-weight: 600;
}

.order-complete__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-success-strong);
}

.order-complete__icon--error {
  background-color: var(--color-danger-strong);
}

.order-complete__result {
  padding: var(--space-2) 0;
}

.order-complete__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-success-strong);
  margin: 0 0 var(--space-3);
}

.order-complete__title--error {
  color: var(--color-danger-strong);
}

.order-complete__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-sub);
  margin: 0 0 var(--space-7);
}

.order-complete__btn {
  display: inline-block;
  padding: var(--space-4) var(--space-10);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-btn);
  transition: background-color 0.25s ease;
}

/* ══════════════════════════════════════════════════
   CN Pre-Validation — Status Icon & Overlay
   ══════════════════════════════════════════════════ */

/* CN Validation overlay — reuses .sn-order-form__loader base but scoped */
.sn-cn-validation-overlay {
  display: none;
}

.sn-cn-validation-overlay.active {
  display: flex;
}

@media (max-width: 640px) {
  .order-complete__card {
    padding: var(--space-8) var(--space-5);
    margin: 0 var(--space-4);
  }

  .order-complete__title {
    font-size: 22px;
  }

  .order-complete__icon {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }
}


/* ══════════════════════════════════════════════════
   NEW SECTIONS added from index-v3
   (preview grid, sn-block extended, steps,
    reviews, mentions, socials, pricing,
    sidebar-help, responsive additions)
   ══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   Доп. стили — то, чего нет в main_new.css
   (preview grid, steps, reviews, mentions, socials,
    pricing, block variant, print section)
   ══════════════════════════════════════════════════ */

/* ── PDF Preview grid ── */
.sn-preview { margin-bottom: var(--space-16); text-align: center; }
.sn-preview__title { font-size: 26px; font-weight: 700; margin: 0 0 var(--space-2); }
.sn-preview__sub { font-size: 15px; color: var(--color-text-muted); margin: 0 0 var(--space-7); }
.sn-preview__grid { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--space-4); }
.sn-preview__item {
  background: var(--color-white); border-radius: var(--radius-card); overflow: hidden;
  text-align: center; font-size: 13px; font-weight: 600; color: var(--color-text-sub);
  box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: all .3s;
  cursor: default;
}
.sn-preview__item:hover { transform: translateY(-4px); box-shadow: 0 6px 24px rgba(45,104,196,.14); }
.sn-preview__item img {
  width: 100%; height: 180px; object-fit: cover; background: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}
.sn-preview__item span { display: block; padding: var(--space-3) var(--space-2) var(--space-3); }
@media (max-width: 1024px) { .sn-preview__grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px) { .sn-preview__grid { grid-template-columns: repeat(2,1fr); } }

/* ── Block (text + image) ── */
.sn-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center;
  background: var(--color-accent); border-radius: var(--radius-card);
  padding: var(--space-8); box-shadow: 0 2px var(--space-4) rgba(45,104,196,0.08);
}
.sn-block__checklist { padding: 0; list-style: none; margin: 0 0 var(--space-4); }
.sn-block__checklist li {
  position: relative; padding-left: var(--space-6); margin-bottom: var(--space-3);
  font-size: 15px; line-height: 1.5;
}
.sn-block__checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }
.sn-block__price { font-weight: 700; color: var(--color-primary); font-size: 16px; margin-top: var(--space-4); }
.sn-block__visual { display: flex; justify-content: center; align-items: center; }
.sn-block__visual img { max-width: 100%; max-height: 280px; border-radius: 8px; }

/* ── Steps (Как получить) ── */
.sn-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); margin-bottom: var(--space-12); }
.sn-step {
  background: var(--color-white); border-radius: var(--radius-card);
  padding: var(--space-7) var(--space-6); text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.05); border: 1px solid rgba(45,104,196,.06);
  transition: all .3s;
}
.sn-step:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(45,104,196,.14); }
.sn-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), #4a8ad4);
  color: var(--color-white); font-size: 22px; font-weight: 800; margin-bottom: var(--space-4);
}
.sn-step__title { font-size: 17px; font-weight: 700; margin: 0 0 var(--space-2); }
.sn-step__text { font-size: 14px; color: var(--color-text-sub); margin: 0; line-height: 1.6; }

/* ── Reviews ── */
.sn-reviews__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
.sn-review {
  background: var(--color-white); border-radius: var(--radius-card); padding: var(--space-6);
  box-shadow: 0 2px 12px rgba(0,0,0,.05); border: 1px solid rgba(45,104,196,.06);
  display: flex; flex-direction: column;
}
.sn-review__text {
  font-size: 14px; font-style: italic; color: var(--color-text-sub);
  margin: 0 0 var(--space-4); flex: 1; line-height: 1.7;
  quotes: "„" "“" "‚" "‘";
}
.sn-review__text::before { content: "„"; color: var(--color-primary); font-size: 20px; }
.sn-review__author { font-size: 15px; font-weight: 600; color: var(--color-primary); }
.sn-review__source { font-size: 12px; color: var(--color-text-muted); margin-top: var(--space-1); }
.sn-reviews__link { text-align: center; margin-top: var(--space-5); }

/* ── Mentions ── */
.sn-mentions__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); margin-bottom: var(--space-12); }
.sn-mention {
  background: var(--color-white); border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6); text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.05); border: 1px solid rgba(45,104,196,.06);
}
.sn-mention__name { font-size: 16px; font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-1); }
.sn-mention__desc { font-size: 13px; color: var(--color-text-muted); }

/* ── Social ── */
.sn-social__grid { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-12); }
.sn-social__link {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-7); background: var(--color-accent); border-radius: var(--radius-btn);
  font-weight: 600; font-size: 15px; color: var(--color-text-main);
  transition: all .25s;
}
.sn-social__link:hover { background: var(--color-primary); color: var(--color-white); transform: translateY(-2px); text-decoration: none; }

/* ── Pricing ── */
.sn-pricing {
  text-align: center; margin-bottom: var(--space-16); padding: var(--space-10);
  background: linear-gradient(135deg, var(--color-accent), #dce8ff);
  border-radius: var(--radius-card);
}
.sn-pricing__label { font-size: 16px; color: var(--color-text-sub); }
.sn-pricing__price { font-size: 64px; font-weight: 800; color: var(--color-primary); line-height: 1.1; margin: var(--space-2) 0; }
.sn-pricing__note { font-size: 15px; color: var(--color-text-muted); margin-bottom: var(--space-4); }

/* ── Sidebar help (NSPD) ── */
.sn-sidebar-help { margin-top: var(--space-2); }
.sn-sidebar-help__title { font-size: 15px; font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-3); line-height: 1.3; }
.sn-sidebar-help__text { font-size: 13px; color: var(--color-text-sub); line-height: 1.6; margin: 0 0 var(--space-3); }
.sn-sidebar-help__warn {
  font-size: 13px; color: var(--color-input-error); background: rgba(231,76,111,0.08); /* translucent --color-input-error */
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-3); line-height: 1.5; margin-top: var(--space-1);
}
.sn-sidebar-help__warn strong { font-weight: 700; }

/* ── Print section ── */
.sn-print {
  display: flex; align-items: center; justify-content: center; gap: var(--space-8);
  margin-bottom: var(--space-12);
}
.sn-print__image { flex-shrink: 0; }
.sn-print__image img { display: block; max-width: 450px; height: auto; }
.sn-print__content { text-align: left; }
.sn-print__label { margin: 0 0 var(--space-2); font-size: 16px; font-weight: 700; color: var(--color-primary); }
.sn-print__text { margin: 0 0 var(--space-2); font-size: 14px; color: var(--color-text-muted); }

/* ── Block visual SVG fallback ── */
.sn-block__visual svg { max-width: 100%; max-height: 280px; border-radius: 8px; }

/* ── Hero why list ── */
.sn-hero__why-list { padding-left: var(--space-5); margin: 0; font-size: 15px; line-height: 1.7; }

/* ── Section grid 6 (insolation) ── */
.sn-section__grid--6 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }

/* ── Section grid 4 (landing-page card grids, e.g. 4-column planting zones) ── */
.sn-section__grid--4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-5); }

/* ── Responsive additions ── */
@media (max-width: 1024px) {
  .sn-block { grid-template-columns: 1fr; }
  .sn-reviews__grid { grid-template-columns: repeat(2,1fr); }
  .sn-steps { grid-template-columns: repeat(2,1fr); }
  .sn-mentions__grid { grid-template-columns: repeat(2,1fr); }
  .sn-section__grid--4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .sn-reviews__grid { grid-template-columns: 1fr; }
  .sn-steps { grid-template-columns: 1fr; }
  .sn-mentions__grid { grid-template-columns: 1fr; }
  .sn-section__grid--6 { grid-template-columns: repeat(2,1fr); }
  .sn-pricing { padding: var(--space-6); }
  .sn-pricing__price { font-size: 48px; }
  .sn-social__grid { gap: var(--space-3); }
  .sn-social__link { padding: var(--space-3) var(--space-5); font-size: 14px; }
  .sn-print { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .sn-section__grid--6 { grid-template-columns: 1fr; }
  .sn-section__grid--4 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .sn-order-form__cadastral {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
  }

  .sn-order-form__cadastral .sn-order-form__input {
    flex: 1 1 60px;
    min-width: 40px;
  }

  .sn-order-form__cadastral .sn-order-form__input--short {
    max-width: none;
    flex: 0 1 50px;
    min-width: 36px;
  }

  .sn-order-form__cadastral .sn-cad-sep {
    flex: 0 0 auto;
  }

  .sn-order-form__add-text {
    font-size: 13px;
  }

  .sn-order-form__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .sn-order-form__footer .btn--lg {
    font-size: 18px;
    padding: var(--space-3) var(--space-5);
    white-space: normal;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .sn-order-form__price-value,
  .sn-order-form__price-currency {
    font-size: 40px;
  }

  .sn-order-form__price {
    justify-content: center;
  }

  .sn-order-form__add-text,
  .sn-order-form__remove-text {
    font-size: 14px;
  }

  .sn-order-form__add-row,
  .sn-order-form__remove-row {
    align-items: flex-start;
  }

  .sn-order-form__add-icon,
  .sn-order-form__remove-icon {
    margin-top: 2px;  /* optical alignment exception */
  }
}

/* ══════════════════════════════════════════════════
   FAQ Accordion
   ══════════════════════════════════════════════════ */

.sn-faq {
  /* Last section on the page — bottom spacing is provided by
     .sn-main's bottom padding + .sn-footer's top margin, so no
     extra margin is needed here (avoids an oversized gap before
     the footer). */
  margin-bottom: 0;
}

.sn-faq__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-main);
  margin: 0 0 var(--space-5);
}

.sn-faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sn-faq__item {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  border: 1px solid rgba(45, 104, 196, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.sn-faq__item:hover {
  border-color: var(--color-divider);
  box-shadow: 0 4px 18px rgba(45, 104, 196, 0.12);
}

.sn-faq__item.is-open {
  border-color: var(--color-primary);
  box-shadow: 0 6px 22px rgba(45, 104, 196, 0.16);
}

.sn-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-main);
  text-align: left;
  gap: var(--space-4);
  transition: color 0.2s ease;
}

.sn-faq__question:hover {
  color: var(--color-primary);
}

.sn-faq__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-accent);
  transition: transform 0.3s ease, background-color 0.25s ease;
}

.sn-faq__item:hover .sn-faq__icon {
  background-color: rgba(45, 104, 196, 0.18);
}

.sn-faq__item.is-open .sn-faq__icon {
  background-color: var(--color-primary);
  transform: rotate(180deg);
}

.sn-faq__icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-primary);
  stroke-width: 2.5;
  fill: none;
  transition: stroke 0.25s ease;
}

.sn-faq__item.is-open .sn-faq__icon svg {
  stroke: var(--color-white);
}

.sn-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.sn-faq__answer-inner {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-sub);
  line-height: 1.65;
  padding: 0 var(--space-6) var(--space-5);
  border-top: 1px solid var(--color-accent);
  padding-top: var(--space-4);
}

.sn-faq__answer-inner p {
  margin: 0 0 var(--space-3);
}

.sn-faq__answer-inner p:last-child {
  margin-bottom: 0;
}

.sn-faq__answer-inner a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.sn-faq__answer-inner a:hover {
  text-decoration: underline;
}

.sn-faq__answer-inner ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}

.sn-faq__answer-inner ol li {
  margin-bottom: var(--space-2);
}

/* ══════════════════════════════════════════════════
   Breadcrumbs & article meta — SEO templates
   ══════════════════════════════════════════════════ */

.sn-breadcrumbs {
  font-size: 14px;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--color-text-muted);
}

.sn-breadcrumbs__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
}

.sn-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.sn-breadcrumbs__item:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-1);
  color: currentColor;
  opacity: .5;
}

.sn-breadcrumbs__link {
  color: var(--color-primary);
  text-decoration: none;
}

.sn-breadcrumbs__link:hover {
  text-decoration: underline;
}

.sn-breadcrumbs__current {
  color: inherit;
  font-weight: 600;
}

.sn-article-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}

/* ══════════════════════════════════════════════════
   AI Demo (chat window) — static/decorative mockup
   of an AI-assistant chat, used on landing pages
   ══════════════════════════════════════════════════ */

.sn-ai-demo {
  max-width: 750px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-divider);
}

.sn-ai-demo__header {
  background: var(--color-accent);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-divider);
}

.sn-ai-demo__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.sn-ai-demo__dot--red    { background: #FF5F56; }
.sn-ai-demo__dot--yellow { background: #FFBD2E; }
.sn-ai-demo__dot--green  { background: #27C93F; }

.sn-ai-demo__header-label {
  margin-left: var(--space-1);
}

.sn-ai-demo__body {
  padding: var(--space-5) var(--space-7);
  max-height: 350px;
  overflow-y: auto;
  background: var(--color-white);
  font-size: 15px;
  line-height: 1.7;
}

.sn-ai-demo__name {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: var(--space-2);
}

.sn-ai-demo__msg {
  margin: 0 0 var(--space-3);
  color: var(--color-text-main);
}

.sn-ai-demo__highlight {
  color: var(--color-primary);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════
   Media row (image + content, 50/50, optional flip)
   + inline .sn-expander disclosure
   Used by partials/passport_section.html
   ══════════════════════════════════════════════════ */

.sn-media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12); /* 48px per design-system §4.1 scale */
  align-items: start;
  margin-bottom: var(--space-12);
}

.sn-media-row__img img {
  display: block;
  width: 100%;
  aspect-ratio: 3508 / 2481;
  object-fit: cover;
  background-color: var(--color-accent);
  border-radius: var(--radius-card); /* 5px per design-system §9.3 */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.sn-media-row__body {
  min-width: 0; /* allow text wrap inside grid cell */
}

/* Kicker label above the H2 — mockup-aligned placement, token-aligned
   styling, rendered as a <span> so it has no heading-structure/SEO
   impact. */
.sn-media-row__label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}

.sn-media-row__title {
  margin: 0 0 var(--space-3);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-main);
}

.sn-media-row__subtitle {
  margin: 0 0 var(--space-4);
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Custom square bullets in primary blue (NOT green — accent-green
   stays deferred per design-system §10). 12px rounded squares
   drawn via ::before since native list-style can't be sized/colored
   consistently across browsers. */
.sn-media-row__list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-5);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-main);
}

.sn-media-row__list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: var(--space-2);
}

.sn-media-row__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 12px;
  height: 12px;
  background: var(--color-primary); /* #2D68C4 — primary blue */
  border-radius: 3px;
}

/* Small-print note with a top-border separator. Slot absorbs BOTH the
   "Исходные данные: ..." data-source lines AND the title-page footnote
   "* в процессе развития проекта..." per the partial's contract. */
.sn-media-row__note {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Chessboard order: put the image on the right. The grid auto-flow
   keeps the order; we just mirror the body. */
.sn-media-row--reverse .sn-media-row__img {
  order: 2;
}

.sn-media-row--reverse .sn-media-row__body {
  order: 1;
}

/* Responsive: collapse to a single column (image stacked above text)
   before the layout gets cramped. Placed AFTER the base .sn-media-row
   rules (rather than in the shared @media (max-width: 768px) block
   further up the file) so it wins by source order at equal
   specificity — a rule appearing earlier in the file was previously
   being overridden by the later base 2-column rule regardless of
   viewport width. */
@media (max-width: 900px) {
  .sn-media-row {
    gap: var(--space-8);
  }

  .sn-media-row,
  .sn-media-row--reverse {
    grid-template-columns: 1fr;
  }

  .sn-media-row--reverse .sn-media-row__img,
  .sn-media-row--reverse .sn-media-row__body {
    order: initial;
  }
}

@media (max-width: 768px) {
  .sn-media-row,
  .sn-media-row--reverse {
    gap: var(--space-5);
  }

  .sn-media-row__title {
    font-size: 20px;
  }

  .sn-media-row__list {
    font-size: 15px;
  }
}

/* ══════════════════════════════════════════════════
   .sn-expander — inline <details>/<summary> disclosure.
   One-off debt (single consumer = the about page) per
   docs/design-system.md §10. NOT a global design-system
   component. Keep CSS scoped to .sn-expander so it
   cannot leak into .sn-faq. Native HTML, zero JS.
   ══════════════════════════════════════════════════ */

.sn-expander {
  margin-top: var(--space-5);
}

.sn-expander__summary {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-accent);
  border-radius: var(--radius-card); /* 5px */
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none; /* hide native disclosure marker in Firefox */
}

.sn-expander__summary::-webkit-details-marker {
  display: none; /* hide native disclosure marker in WebKit */
}

.sn-expander__summary:hover {
  filter: brightness(0.97);
}

/* Label owns the row (flex: 1) so the header text — not the marker —
   is what makes the summary occupy the full container width. The
   marker is a fixed-size icon pinned to the right edge. */
.sn-expander__label {
  flex: 1;
}

.sn-expander__marker {
  flex: 0 0 auto;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.2s ease;
  color: var(--color-primary);
}

.sn-expander[open] > .sn-expander__summary .sn-expander__marker {
  transform: rotate(90deg);
}

.sn-expander__body {
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-accent);
  border-radius: var(--radius-card);
}

.sn-expander__list {
  margin: 0;
  padding-left: var(--space-6);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-main);
}

.sn-expander__list li {
  margin-bottom: var(--space-2);
}

.sn-expander__list li:last-child {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════
   Trust strip (airy) — replaces dense .ds-card--trust on /about/
   New scoped .sn-trust* classes; uses existing tokens only.
   Big primary-blue value + muted caption, centered, generous whitespace.
   No :root tokens introduced; reuses --color-primary, --color-text-muted,
   --color-text-main, --color-bg-page, --space-* scale, --font-base.
   ══════════════════════════════════════════════════ */

.sn-trust {
  /* Inherits .sn-section__grid 3-col layout; we just override the
     item presentation. Generous vertical padding makes the strip airy. */
  row-gap: var(--space-12);
  padding: var(--space-8) 0;
  max-width: 960px; /* keeps 3 items from stretching across full 1440px */
  margin-left: auto;
  margin-right: auto;
}

/* .sn-trust-section is a wrapper-scope class added to the <section>
   by the template; centers the section title above the trust strip. */
.sn-trust-section .sn-section__title {
  text-align: center;
}

.sn-trust__item {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.sn-trust__value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

.sn-trust__label {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 1024px) {
  .sn-trust__value { font-size: 32px; }
}

@media (max-width: 640px) {
  .sn-trust__value { font-size: 28px; }
}

/* .sn-reviews is a wrapper-scope class added to the <section>
   by the template; centers the section title above the reviews grid/ribbon,
   matching the centered pattern already used for .sn-trust-section and
   .sn-cta-center__title. */
.sn-reviews .sn-section__title {
  text-align: center;
}

/* ══════════════════════════════════════════════════
   Reviews — page-specific (about page only).
   Single markup source (.sn-reviews__grid > .sn-reviews__card figures).

   • No JS: plain CSS grid — true fallback, fully functional on its own.
   • With JS: initReviewsRibbon() (main_new.js) adds .is-ribbon to the
     SAME container, which this stylesheet turns into a multi-card
     testimonial ribbon (flex track + prev/next controls). The grid
     rules only apply while .is-ribbon is absent, so grid and ribbon
     are mutually exclusive -- never both visible.
   ══════════════════════════════════════════════════ */

.sn-reviews__card {
  margin: 0;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sn-reviews__card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  background-color: var(--color-accent);
}

@media (max-width: 640px) {
  .sn-reviews__card img { max-height: 360px; }
}

/* ── Ribbon mode (JS-enhanced) ──
   initReviewsRibbon() adds .is-ribbon to .sn-reviews__grid and wraps the
   figures in a .sn-reviews__track inside a .sn-reviews__viewport. Prev/next
   are absolutely-positioned OVERLAY buttons anchored to the viewport edges
   -- the exact same visual pattern as .sn-carousel__btn--prev/--next
   (main_new.css:533-558) -- not a separate full-width row stacked below the
   track. The dots row remains the single secondary nav row underneath.
   Visible-card count is controlled by the flex-basis percentage below
   (3 desktop / 2 @1024 / 1 @640), mirroring the grid fallback's own
   breakpoints. */
.sn-reviews__grid.is-ribbon {
  display: block;
  position: relative;
}

/* The card's own box-shadow (0 2px 12px rgba(0,0,0,.05), .sn-reviews__card
   above) bleeds ~12px past the card edge and the viewport's overflow:hidden
   would clip it -- most visible on the first card's LEFT edge (the right
   edge usually has the next card / gap as visual buffer). Give the viewport
   12px of negative-margin breathing room + matching padding so the track's
   visual origin stays exactly where it was while the shadow renders fully.
   Scroll math in initReviewsRibbon() reads the TRACK's transform only, so
   it is unaffected by this visual-only inset. */
.sn-reviews__viewport {
  position: relative;
  overflow: hidden;
  margin: -12px;
  padding: 12px;
}

.sn-reviews__track {
  display: flex;
  gap: var(--space-6);
  transition: transform 0.4s ease;
}

.sn-reviews__grid.is-ribbon .sn-reviews__card {
  flex: 0 0 calc((100% - 2 * var(--space-6)) / 3);
  min-width: 0;
}

/* Overlay prev/next -- mirrors .sn-carousel__btn exactly (position,
   sizing, color, hover), anchored to the viewport rather than free-floating
   in their own row. */
.sn-reviews__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: rgba(45, 104, 196, 0.7);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.sn-reviews__btn:hover {
  background-color: rgba(45, 104, 196, 1);
}

/* The viewport's -12px margin (see .sn-reviews__viewport above) widened the
   buttons' anchor box by 12px on each side, which would push the buttons
   12px outward. Compensate here (+12px) so each button sits at the exact
   same 8px-from-cards position it had before the shadow fix. */
.sn-reviews__btn--prev { left: 20px; }
.sn-reviews__btn--next { right: 20px; }

/* ── Reviews ribbon dots — mirrors .sn-carousel__dots/__dot/__dot--active
   (main_new.css:560-580) so both carousels look consistent. This is the
   ONLY secondary nav row -- prev/next no longer form a second row. ── */
.sn-reviews__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.sn-reviews__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-divider);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease;
}

.sn-reviews__dot--active {
  background-color: var(--color-primary);
}

@media (max-width: 1024px) {
  .sn-reviews__grid.is-ribbon .sn-reviews__card {
    flex: 0 0 calc((100% - 1 * var(--space-6)) / 2);
  }
}

@media (max-width: 640px) {
  .sn-reviews__grid.is-ribbon .sn-reviews__card {
    flex: 0 0 100%;
  }
}