/* ===================================
   Svitgrid Landing Page Styles
   =================================== */

/* CSS Variables */
:root {
  /* Primary Colors - Amber/Gold Solar Theme */
  --color-primary: #F59E0B;
  --color-primary-light: #FCD34D;
  --color-primary-dark: #D97706;
  --color-primary-darker: #B45309;

  /* Accent - Orange */
  --color-accent: #EA580C;
  --color-accent-light: #FB923C;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-gray-50: #FAF8F4;
  --color-gray-100: #F3EFE8;
  --color-gray-200: #E9E4DA;
  --color-gray-300: #D5CEC2;
  --color-gray-400: #A79E92;
  --color-gray-500: #8B8378;
  --color-gray-600: #6E675E;
  --color-gray-700: #57514A;
  --color-gray-800: #322D27;
  --color-gray-900: #15120E;

  /* Amber that is READ, not filled. #F59E0B is 2.15:1 on white and may never
     carry text; this is 5.02:1. See the redesign spec. */
  --color-primary-text: #B45309;

  /* NO GRADIENTS. The --gradient-* family and .text-gradient were deleted in
     the 2026-08 redesign; flat fills only. Do not reintroduce them. */

  /* Brand blue (sampled from the logo icon — the navy half of the mark) */
  --color-brand-blue: #1E3A5F;
  --color-brand-blue-dark: #142A47;

  /* Typography — one family at every size. JetBrains Mono glyphs are 0.6em
     wide against Inter's ~0.5em, so measures narrow and body sits at 15px. */
  --font-primary: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  --font-display: var(--font-primary);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 6px;
  --radius-xl: 10px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Responsive media by default — never overflow its container, never render
   at the HTML width/height attribute when CSS width is constrained. */
img,
video {
  max-width: 100%;
  height: auto;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-gray-800);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--color-gray-900);
  /* Mono has no narrow glyphs to fall back on, and Ukrainian compounds are
     long — without this a single word can push the whole body sideways. */
  overflow-wrap: break-word;
}

h1 { font-size: 1.7rem; letter-spacing: -0.04em; line-height: 1.05; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

@media (min-width: 480px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.06rem; }
}

/* 3.4rem was an Inter-era size. The hero text column is one half of a
   `1fr 1fr` grid — about 520px at 1280 — and a 54px mono headline broke
   "Один додаток для кожного інвертора" into four short lines there. Mono
   needs the big step held back until there is width for it. */
@media (min-width: 768px) {
  h1 { font-size: 2.6rem; }
  h2 { font-size: 1.95rem; }
  h3 { font-size: 1.1rem; }
}

@media (min-width: 1180px) {
  h1 { font-size: 3.1rem; }
}

/* Was a gradient-clipped text fill. Now the emphasis is an amber rule under
   the words — flat, and it survives on any background. */
.text-gradient {
  position: relative;
  display: inline-block;
  color: inherit;
}

.text-gradient::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.17em;
  height: 0.1em;
  min-height: 5px;
  border-radius: 5px;
  background: var(--color-primary);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.btn--primary:hover {
  background: var(--color-primary-dark);
  color: #1A1206;
}

.btn--blue {
  background: var(--color-white);
  color: var(--color-gray-900);
  box-shadow: inset 0 0 0 1px var(--color-gray-900);
}

.btn--blue:hover {
  background: var(--color-gray-50);
}

.btn--sm {
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.875rem;
}

.btn--full {
  width: 100%;
}

/* ===================================
   Header / Navigation
   =================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--space-md) 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.header--scrolled {
  padding: var(--space-sm) 0;
  box-shadow: var(--shadow-sm);
}





/* `gap` here is a FLOOR, not decoration: mono has no narrow glyphs, so eight
   nav labels are far wider than they were in Inter and space-between alone
   let the link row run up against the wordmark. */
.nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xl);
}

/* align-items: baseline here, plus align-self: center on the icon, is what
   makes the flex container adopt the WORD's baseline rather than synthesising
   one from the 32px image: an item that opts out of baseline alignment is
   skipped when the container picks its baseline. */
.nav__logo {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--color-gray-900);
  text-decoration: none;
}

.nav__logo-icon {
  color: var(--color-primary-text);
  align-self: center;
  width: 26px;
  height: 26px;
}

/* The language chip lives INSIDE this row, not beside it, so the baseline
   alignment set on .nav never reached it — this container defaulted to
   `stretch` and the chip's own padding decided where its text landed. Align
   here, or the chip sits low no matter what the padding says. */
.nav__links {
  display: none;
  align-items: baseline;
  gap: 1.375rem;
}

.nav__links a {
  color: var(--color-gray-600);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav__links a:hover {
  color: var(--color-primary-text);
}

/* The language chip and the hamburger travel together on the right.
   The chip is deliberately OUTSIDE .nav__links, because that row is
   `display: none` until 980px — while the chip lived in it, a phone had no
   visible language control at all and the only route was the ninth item of
   the hamburger menu, styled identically to "Features" and "Contact".

   align-items: baseline, with the hamburger opting out via align-self, is the
   same arrangement .nav uses: the chip is an inline-block with a real text
   baseline, so it is the item this container should take its own baseline
   from. Let the hamburger participate and the group's baseline comes from a
   3-bar flex column instead, and the chip drifts. */
.nav__actions {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.nav__actions .nav__hamburger {
  align-self: center;
}

/* The legal pages (privacy, terms, delete-account) pair the chip with a
   "Back to Home" button instead of a hamburger, and at 390px that pair is
   about 14px wider than the container: the button wrapped onto two lines and
   doubled the header's height. Keep the label on one line and take the
   fourteen pixels back out of padding and gap, which nobody sees. */
.nav__cta {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .nav__actions {
    gap: var(--space-xs);
  }

  .nav__cta.btn--sm {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

/* 360px and below (SE-class phones) needs another ~15px, and there is none
   left in the button. Take it from the wordmark and the row's own gutters —
   the header is the one place on the page where the logo does not need to be
   the largest thing. Below this the button wrapped to two lines even before
   the chip existed. */
@media (max-width: 360px) {
  .nav.container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* The 2rem gap is a floor for the desktop link row, and that row is
     display:none here — at this width it only holds the wordmark away from
     the buttons, which needs far less. */
  .nav {
    gap: var(--space-sm);
  }

  .nav__logo {
    font-size: 1.05rem;
  }
}

.nav__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-sm);
  background: none;
  border: none;
  cursor: pointer;
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-gray-800);
  transition: all 0.3s ease;
}

.nav__hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav__hamburger.active span:nth-child(2) {
  opacity: 0;
}

.nav__hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* 980px, not 768px. The eight nav labels need ~645px in JetBrains Mono
   (0.6em per glyph, no narrow forms) plus the wordmark and the language chip
   — about 930px of viewport. At the old 768px breakpoint the row appeared
   before it could fit and ran into the logo. Below this the hamburger serves,
   and BOTH rules must move together or a band exists with neither. */
@media (min-width: 980px) {
  .nav__links {
    display: flex;
  }

  .nav__hamburger {
    display: none;
  }
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: var(--color-white);
  padding-top: 80px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl);
}

.mobile-menu__link {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-800);
  text-decoration: none;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

/* ===================================
   Hero Section (Dark)
   =================================== */

.hero--home {
  position: relative;
  padding: 110px 0 var(--space-3xl);
  background: var(--color-white);
  overflow: hidden;
}

/* Centred, not top-aligned: a full phone screen is ~780px tall and the text
   beside it is ~470px, so top-aligning dumps the whole 450px difference
   underneath the stats row as dead space. Centring splits it. */
.hero__container {
  display: grid;
  gap: var(--space-3xl);
  align-items: center;
}

.hero__content {
  text-align: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-text);
  margin-bottom: var(--space-lg);
}

.hero--home .hero__title {
  color: var(--color-gray-900);
  margin-bottom: var(--space-xl);
}

.hero--home .hero__kicker {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gray-700);
  margin: 0 auto var(--space-md);
}

.hero--home .hero__subtitle {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-gray-700);
  max-width: 56ch;
  margin: 0 auto var(--space-xl);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

/* Do NOT scale, tint or rotate these on hover — Apple and Google both forbid
   modifying the badge artwork. Height 44px clears Apple's 40px onscreen
   minimum and Google's 28px; the 16px gap clears the 1/4-height clear space
   both require. The App Store badge must come FIRST in the markup. */
.store-badge {
  display: block;
  line-height: 0;
  border-radius: var(--radius-md);
}

.store-badge__img {
  height: 44px;
  width: auto;
  display: block;
}

.store-badge--large .store-badge__img {
  height: 56px;
}

.hero__visual {
  display: flex;
  justify-content: center;
}

.hero__phone {
  /* float animation removed — the video inside is already in motion */
}

/* No border, no padding, no card. The clip inside IS a phone screen, so a
   bordered box around it is a frame drawn around something that is already a
   shape — the same habit the redesign removed everywhere else. */
.hero__phone-frame {
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}

/* The radius belongs to the device in the recording, not to the page's 6px
   control token — it is standing in for physical glass. */
.hero__phone-img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  background: var(--color-white);
}

@media (min-width: 768px) {
  .hero--home {
    padding: 160px 0 var(--space-4xl);
  }

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

  .hero__content {
    text-align: left;
  }

  .hero--home .hero__subtitle {
    margin: 0 0 var(--space-xl);
  }

  .hero__cta {
    justify-content: flex-start;
  }
}

/* ===================================
   Section Header
   =================================== */

.section-header {
  text-align: left;
  max-width: 62ch;
  margin: 0 0 var(--space-2xl);
}

.section-header__title {
  color: var(--color-gray-900);
}

.section-header__subtitle {
  color: var(--color-gray-500);
  font-size: 1rem;
  margin-top: var(--space-sm);
}

/* ===================================
   Supported Inverters Section
   =================================== */

.inverters {
  padding: var(--space-4xl) 0;
  background: var(--color-white);
}

.inverters__grid {
  display: grid;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.inverter-card {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.inverter-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.inverter-card__brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-xs);
}

.inverter-card__count {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  display: block;
  margin-bottom: var(--space-md);
}

.inverter-card__types {
  font-size: 0.8125rem;
  color: var(--color-gray-400);
  line-height: 1.6;
}

.inverters__planned {
  text-align: center;
  padding: var(--space-lg);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-gray-300);
  font-size: 0.8125rem;
  color: var(--color-gray-400);
  margin-bottom: var(--space-lg);
}

.inverters__planned strong {
  color: var(--color-gray-600);
}

.inverters__link {
  text-align: center;
}

.inverters__link a {
  color: var(--color-primary-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
}

.inverters__link a:hover {
  text-decoration: underline;
}

@media (min-width: 640px) {
  .inverters__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .inverters__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===================================
   Features Section
   =================================== */

.features {
  padding: var(--space-4xl) 0;
  background: var(--color-gray-50);
}

.feature-row {
  display: grid;
  gap: var(--space-3xl);
  align-items: center;
  margin-bottom: var(--space-4xl);
}

.feature-row:last-child {
  margin-bottom: 0;
}

.feature-row__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-sm);
}

.feature-row__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-md);
}

.feature-row__desc {
  color: var(--color-gray-600);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.feature-row__screenshot {
  display: flex;
  justify-content: center;
}

.feature-row__screenshot--dual {
  gap: var(--space-md);
  align-items: center;
}

.feature-row__phone {
  max-width: 280px;
  background: var(--color-gray-900);
  border-radius: 32px;
  padding: 8px;
  box-shadow: var(--shadow-xl);
}

.feature-row__phone--small {
  max-width: 200px;
}

.feature-row__phone img,
.feature-row__phone video {
  width: 100%;
  height: auto;
  border-radius: 26px;
  display: block;
  background: #000;
}

.feature-row__arrow {
  font-size: 1.5rem;
  color: var(--color-gray-400);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr 1fr;
  }

  .feature-row--reverse {
    direction: rtl;
  }

  .feature-row--reverse > * {
    direction: ltr;
  }

  .feature-row__title {
    font-size: 1.75rem;
  }
}

/* ===================================
   Gateway Section
   =================================== */

.gateway {
  padding: var(--space-4xl) 0;
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-200);
}

.gateway__grid {
  display: grid;
  gap: var(--space-3xl);
  align-items: center;
}

.gateway__image-container {
  /* Plain block + text-align center; flex's `min-width: auto` on image
     children let the intrinsic 768px image leak through and overflow
     mobile viewports. */
  padding: 0;
  text-align: center;
}

.gateway__image {
  display: block;
  margin: 0 auto;
  max-width: 312px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.gateway__title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-gray-900);
  margin-bottom: var(--space-md);
}

.gateway__desc {
  color: var(--color-gray-700);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

.gateway .feature-row__label {
  color: var(--color-primary-text);
}

.gateway__checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
}

.gateway__checklist li {
  color: var(--color-gray-700);
  font-size: 0.875rem;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.gateway__checklist li::before {
  content: '\2713';
  color: var(--color-primary-text);
  font-weight: 700;
}

@media (min-width: 768px) {
  .gateway__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===================================
   How It Works Section
   =================================== */

.how-it-works {
  padding: var(--space-4xl) 0;
  background: var(--color-white);
}

.setup-paths {
  display: grid;
  gap: var(--space-xl);
  max-width: 800px;
  margin: 0 auto;
}

.setup-card {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  position: relative;
}

.setup-card--recommended {
  border: 2px solid var(--color-primary);
}

.setup-card__badge {
  position: absolute;
  top: -10px;
  right: var(--space-lg);
  background: var(--color-primary);
  color: var(--color-gray-900);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.setup-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.setup-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
}

.setup-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.setup-card__sub {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
}

.setup-card__steps {
  color: var(--color-gray-600);
  font-size: 0.875rem;
  line-height: 2.2;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.setup-card__best {
  padding: var(--space-md);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.setup-card--recommended .setup-card__best {
  background: #fffbeb;
}

.setup-card__best strong {
  display: block;
  font-size: 0.75rem;
  color: var(--color-gray-900);
  margin-bottom: 4px;
}

.setup-card__best p {
  font-size: 0.8125rem;
  color: var(--color-gray-600);
}

@media (min-width: 768px) {
  .setup-paths {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }
}

/* Three paths need three columns, but only once there is room for them: at
   768px three of these cards would each be ~230px, and the numbered steps
   inside would rag badly in mono. */
@media (min-width: 1060px) {
  .setup-paths {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===================================
   Reserve Form (gateway page)
   =================================== */

.reserve {
  padding: var(--space-4xl) 0;
  background: var(--color-gray-50);
}

.reserve__inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.reserve__title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-gray-900);
}

.reserve__subtitle {
  color: var(--color-gray-600);
  margin-bottom: var(--space-xl);
}

.reserve__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: left;
}

/* Honeypot for bots on the landing forms; see
   services/api/src/routes/public-landing-forms.ts. Off-screen rather than
   display:none, which some bots detect and skip. */
.form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.reserve__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* display:flex above would otherwise override the HTML [hidden] attribute
   (whose UA default is display:none). Restore the hide behavior so the
   country-conditional fields are actually hidden when toggled off. */
.reserve__field[hidden] {
  display: none;
}

.reserve__field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
}

.reserve__field input,
.reserve__field textarea {
  font-family: var(--font-primary);
  font-size: 1rem;
  padding: var(--space-md);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.reserve__field input:focus,
.reserve__field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.reserve__field textarea {
  resize: vertical;
  min-height: 96px;
}

.reserve__submit {
  margin-top: var(--space-sm);
  align-self: flex-start;
  position: relative;
  min-width: 160px;
}

.reserve__submit:disabled {
  opacity: 0.85;
  cursor: not-allowed;
}

/* Loading state: button text fades out and a spinner shows in its place. */
.reserve__submit--loading {
  color: transparent !important;
}
.reserve__submit--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: reserve-spin 0.7s linear infinite;
}
@keyframes reserve-spin {
  to { transform: rotate(360deg); }
}

.reserve__status {
  font-size: 0.9375rem;
  margin: 0;
  min-height: 1.5em;
}

.reserve__status[data-state="idle"] { color: transparent; }
.reserve__status[data-state="sending"] { color: var(--color-gray-600); }
.reserve__status[data-state="success"] { color: #15803d; }
.reserve__status[data-state="error"] { color: #b91c1c; }

/* ===================================
   CTA Section
   =================================== */

.cta {
  padding: var(--space-4xl) 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
}

.cta__content {
  text-align: center;
}

.cta__title {
  color: var(--color-gray-900);
  margin-bottom: var(--space-md);
}

.cta__subtitle {
  color: var(--color-gray-700);
  font-size: 0.9375rem;
  margin-bottom: var(--space-xl);
}

.cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

/* ===================================
   Contacts Section
   =================================== */

.contacts {
  padding: var(--space-4xl) 0;
  background: var(--color-gray-50);
}

.contacts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 720px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .contacts__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-card {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-decoration: none;
  color: var(--color-gray-900);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-brand-blue);
}

.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-brand-blue);
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.contact-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-gray-500);
  margin-bottom: var(--space-xs);
}

.contact-card__value {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-xs);
}

.contact-card__hint {
  font-size: 0.875rem;
  color: var(--color-gray-500);
}

/* ===================================
   Footer
   =================================== */

.footer {
  padding: var(--space-3xl) 0 var(--space-xl);
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
  color: var(--color-gray-500);
}

.footer__grid {
  display: grid;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-gray-900);
  text-decoration: none;
  margin-bottom: var(--space-md);
}

.footer__logo-icon {
  color: var(--color-primary-text);
}

.footer__tagline {
  color: var(--color-gray-500);
}

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

.footer__links-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

.footer__links a {
  color: var(--color-gray-400);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.2s ease;
}

.footer__links a:hover {
  color: var(--color-primary-text);
}

.footer__bottom {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-gray-800);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;
  font-size: 0.875rem;
}

.footer__made {
  color: var(--color-gray-500);
}

@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ===================================
   Subpage Layout
   =================================== */

.subpage {
  padding: 120px 0 var(--space-4xl);
}

/* ===================================
   Compatibility Page
   =================================== */

/* Summary on top, a bar that stays on screen with section jumps, search and a
   phase filter, then brand cards two per row and the EV chargers. Every model
   is in the HTML; js/compatibility.js only filters and collapses. */
.compat-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xl);
  align-items: end;
  padding-bottom: var(--space-xl);
}
.compat-hero__title { margin: 0 0 var(--space-sm); text-wrap: balance; }
.compat-hero__lead { margin: 0; color: var(--color-gray-600); max-width: 60ch; }
.compat-stats { display: flex; gap: var(--space-xl); flex-wrap: wrap; }
.compat-stats b { display: block; font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-gray-900); }
.compat-stats span { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gray-500); }

.compat-bar {
  position: sticky;
  top: 64px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
}
.compat-bar__jump { display: flex; gap: 6px; }
.compat-bar__jump a {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 7px 12px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md);
  font-size: 0.8125rem; font-weight: 600; color: var(--color-gray-700); text-decoration: none;
}
.compat-bar__jump a:hover { border-color: var(--color-gray-300); color: var(--color-gray-900); }
.compat-bar__jump a span { color: var(--color-gray-400); font-weight: 500; }
.compat-search { position: relative; flex: 1 1 260px; min-width: 0; }
.compat-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.compat-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; stroke: var(--color-gray-400); }
.compat-search input {
  width: 100%; font: inherit; font-size: 0.8125rem; color: var(--color-gray-900);
  padding: 9px 12px 9px 34px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-md);
  background: var(--color-gray-50);
}
.compat-search input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.compat-phases { display: flex; gap: 6px; flex-wrap: wrap; }
.compat-phases button {
  font: inherit; font-size: 0.75rem; cursor: pointer;
  padding: 6px 10px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-full);
  background: var(--color-white); color: var(--color-gray-600);
}
.compat-phases button[aria-pressed="true"] { background: var(--color-gray-900); border-color: var(--color-gray-900); color: var(--color-white); }
.compat-phases button:focus-visible, .compat-card__more:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.compat-section { padding-top: var(--space-2xl); scroll-margin-top: 130px; }
.compat-section__title { font-size: 1.5rem; margin: 0 0 4px; }
.compat-section__lead { margin: 0 0 var(--space-lg); color: var(--color-gray-600); max-width: 70ch; }

.compat-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-lg); }
.compat-way { display: flex; gap: var(--space-sm); align-items: flex-start; padding: 12px 14px; border: 1px dashed var(--color-gray-300); border-radius: var(--radius-md); }
.compat-way strong { display: block; font-size: 0.8125rem; color: var(--color-gray-900); }
.compat-way small { display: block; font-size: 0.75rem; line-height: 1.45; color: var(--color-gray-500); }
.compat-way__ico {
  flex: none; min-width: 34px; height: 28px; padding: 0 6px; display: grid; place-items: center;
  border-radius: var(--radius-md); background: var(--color-gray-100); color: var(--color-primary-text);
  font-size: 0.75rem; font-weight: 800;
}

.compat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); align-items: start; }
.compat-card {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 18px 18px 14px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); background: var(--color-white);
}
.compat-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.compat-card .compat-brand__name, .compat-ev__name { margin: 0; font-size: 1.25rem; font-weight: 800; }
.compat-card__count { font-size: 0.75rem; color: var(--color-gray-500); font-variant-numeric: tabular-nums; }
.compat-card__via { align-self: flex-start; margin: 0; padding: 3px 8px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); font-size: 0.71875rem; color: var(--color-gray-600); }
.compat-models { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-gray-200); }
.compat-models li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); padding: 7px 0; border-bottom: 1px solid var(--color-gray-200); font-size: 0.8125rem; }
.compat-models li[hidden], .compat-card[hidden], .compat-search[hidden], .compat-phases[hidden], .compat-card__more[hidden], .compat-none[hidden] { display: none; }
.compat-models__name { font-weight: 600; color: var(--color-gray-900); overflow-wrap: anywhere; }
.compat-models__type { font-size: 0.75rem; color: var(--color-gray-500); text-align: right; }
.compat-card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.compat-card__foot:empty { display: none; }
.compat-card__more { font: inherit; font-size: 0.78125rem; font-weight: 600; padding: 0; border: 0; background: none; color: var(--color-primary-text); cursor: pointer; }
.compat-card__link { font-size: 0.78125rem; font-weight: 600; color: var(--color-primary-text); text-decoration: none; margin-left: auto; }
.compat-card__more:hover, .compat-card__link:hover { text-decoration: underline; }

.compat-none { margin: var(--space-md) 0 0; padding: 18px; border: 1px dashed var(--color-gray-300); border-radius: var(--radius-xl); color: var(--color-gray-600); }
.compat-planned {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap;
  margin-top: var(--space-md); padding: 14px 18px; font-size: 0.8125rem; color: var(--color-gray-600);
  background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl);
}
.compat-planned strong { color: var(--color-gray-900); }
.compat-planned a { font-weight: 600; color: var(--color-primary-text); text-decoration: none; }

.compat-ev__badge { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gray-500); }
.compat-ev__badge--new { font-weight: 700; padding: 3px 8px; border-radius: var(--radius-sm); background: #E7F4EC; color: #2F7A50; }
.compat-ev__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.compat-tag { padding: 3px 8px; border-radius: var(--radius-sm); background: var(--color-gray-100); font-size: 0.71875rem; color: var(--color-gray-700); }
.compat-tag:first-child { background: none; border: 1px solid var(--color-gray-300); }
.compat-ev__spec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-md); margin: 0; font-size: 0.78125rem; }
.compat-ev__spec dt { color: var(--color-gray-500); }
.compat-ev__spec dd { margin: 0; font-weight: 600; color: var(--color-gray-900); }
.compat-ev__feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--space-md); }
.compat-ev__feats li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.8125rem; color: var(--color-gray-700); }
.compat-ev__feats li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 3px; background: #E7F4EC; box-shadow: inset 0 0 0 1.5px #2F8F5B; }
.compat-ev__feats li.is-no { color: var(--color-gray-500); }
.compat-ev__feats li.is-no::before { background: none; box-shadow: inset 0 0 0 1.5px var(--color-gray-300); }
.compat-ev__note { font-size: 0.75rem; color: var(--color-gray-500); }

@media (max-width: 820px) {
  .compat-hero { grid-template-columns: minmax(0, 1fr); }
  .compat-grid, .compat-ways { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the bar would hold a third of the screen while you scroll. */
  .compat-bar { position: static; }
  .compat-section { scroll-margin-top: 80px; }
}
@media (max-width: 480px) {
  .compat-ev__feats { grid-template-columns: minmax(0, 1fr); }
  .compat-models li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .compat-models__type { text-align: left; }
  .compat-stats { gap: var(--space-lg); }
}

/* ===================================
   Language Toggle
   =================================== */

.nav__lang {
  color: var(--color-gray-500);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 4px 8px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav__lang:hover {
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}



/* ===================================
   Animations
   =================================== */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================
   Gateway Product Page
   =================================== */

.gateway-page {
  display: grid;
  gap: var(--space-3xl);
  align-items: start;
}

.gateway-page__image {
  /* Plain block layout; flex's `min-width: auto` on image children let the
     intrinsic 768px width leak through and overflow mobile viewports. */
  padding: 0;
  text-align: center;
}

.gateway-page__image img {
  display: block;
  margin: 0 auto;
  max-width: 390px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* ===================================
   Modal (gateway page Buy → form)
   =================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.modal:not([hidden]) {
  display: flex;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal__panel {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}

.modal__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-gray-500);
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
}

.modal__close:hover {
  color: var(--color-gray-900);
  background: var(--color-gray-100);
}

.modal__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--color-gray-900);
}

.modal__subtitle {
  color: var(--color-gray-600);
  margin-bottom: var(--space-lg);
}

.modal .reserve__form {
  text-align: left;
}

.gateway-page__buy {
  margin-bottom: var(--space-xl);
}

/* On the gateway PRODUCT page the checklist sits on a white background,
   so the dark-section's gray-300 text is too faint. Darken it. */
.gateway-page__details .gateway__checklist li {
  color: var(--color-gray-800);
  font-size: 0.9375rem;
}
.gateway-page__details .gateway__checklist li::before {
  color: var(--color-brand-blue);
}

/* ===================================
   Reserve form — country & shipping fields
   =================================== */

.reserve__field select {
  font-family: var(--font-primary);
  font-size: 1rem;
  padding: var(--space-md);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-900);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: calc(var(--space-md) * 2 + 12px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.reserve__field select:focus {
  outline: none;
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.18);
}

.reserve__field select:disabled {
  background-color: var(--color-gray-50);
  color: var(--color-gray-500);
  cursor: not-allowed;
}

.reserve__field input:focus,
.reserve__field textarea:focus {
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.18);
}

.reserve__autocomplete {
  position: relative;
}

.reserve__autocomplete-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 240px;
  overflow-y: auto;
}

.reserve__autocomplete-list li {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--color-gray-800);
}

.reserve__autocomplete-list li:hover,
.reserve__autocomplete-list li[aria-selected="true"] {
  background: var(--color-gray-100);
}

.reserve__warehouse-list li[role="option"] {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.reserve__warehouse-list .reserve__wh-icon {
  flex: 0 0 auto;
  font-size: 1em;
  line-height: 1;
}

.reserve__warehouse-list .reserve__wh-type {
  flex: 0 0 auto;
  font-weight: 600;
  white-space: nowrap;
}

.reserve__warehouse-list .reserve__wh-addr {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reserve__warehouse-list .reserve__autocomplete-empty {
  color: var(--color-gray-500);
  cursor: default;
}

.reserve__hint {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  margin-top: var(--space-xs);
}

/* ===================================
   Order confirmation page
   =================================== */

.order-confirmed {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.order-confirmed__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #DCFCE7;
  color: #15803D;
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: var(--space-xl);
}

.order-confirmed__title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-gray-900);
}

.order-confirmed__lead {
  color: var(--color-gray-600);
  font-size: 1.0625rem;
  margin-bottom: var(--space-xl);
}

.order-confirmed__summary {
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin: var(--space-xl) 0;
  text-align: left;
}

.order-confirmed__summary-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-md);
}

.order-confirmed__list {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-sm) var(--space-md);
  margin: 0;
}
.order-confirmed__list dt {
  color: var(--color-gray-500);
  font-size: 0.875rem;
  font-weight: 500;
}
.order-confirmed__list dd {
  color: var(--color-gray-900);
  font-size: 0.9375rem;
  margin: 0;
  word-break: break-word;
}

@media (max-width: 540px) {
  .order-confirmed__list {
    grid-template-columns: 1fr;
    gap: 2px var(--space-md);
  }
  .order-confirmed__list dd {
    color: var(--color-gray-800);
    margin-bottom: var(--space-sm);
  }
}

.order-confirmed__empty {
  color: var(--color-gray-500);
  font-style: italic;
}

.gateway-page__status {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.gateway-page__title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-gray-900);
  margin-bottom: var(--space-sm);
}

/* Purchase block — stock status, price, Buy button stacked together
   (Rozetka-style: customer sees "in stock + price + CTA" as one unit). */

.purchase {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  column-gap: var(--space-lg);
  row-gap: var(--space-md);
  margin: var(--space-lg) 0 var(--space-2xl);
}

.purchase__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xs);
}

/* Force the Buy button to fill the full row height (stock + price stacked)
   instead of using its content-derived intrinsic height. With no vertical
   padding, a button that wraps onto its own row has nothing to stretch
   against and shrinks to its line height, about 20px (#708) — so the
   min-height is the floor, and on a phone it takes the whole row. */
.purchase .gateway-page__buy {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}
@media (max-width: 480px) {
  .purchase .gateway-page__buy {
    flex-basis: 100%;
    min-height: 48px;
  }
}

.purchase__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #15803D;
  margin: 0;
}
.purchase__stock::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16A34A;
}

.purchase__price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-gray-900);
  margin: 0;
  line-height: 1;
}

.purchase__price-currency {
  font-size: 1.5rem;
  font-weight: 700;
  margin-left: 2px;
}

.gateway-page__desc {
  color: var(--color-gray-600);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

.gateway-page__section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: var(--space-xl) 0 var(--space-md);
}

.gateway-page__specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  margin-bottom: var(--space-lg);
}

.gateway-page__specs td {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.gateway-page__specs td:first-child {
  color: var(--color-gray-500);
  width: 40%;
}

.gateway-page__specs td:last-child {
  color: var(--color-gray-900);
  text-align: right;
}

/* Group headings inside the specs table. The two boards share most of these
   rows, so the differences are grouped rather than given a column each — a
   third column leaves about 14 characters of measure on a phone, and mono has
   no narrow glyphs to recover it with. */
.gateway-page__specs .specs__group th {
  text-align: left;
  padding: var(--space-lg) 0 var(--space-sm);
  border-bottom: 1px solid var(--color-gray-300);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray-900);
}

.gateway-page__specs tbody:first-child .specs__group th {
  padding-top: 0;
}

@media (min-width: 768px) {
  .gateway-page {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===================================
   Mobile polish (iPhone-focused)
   =================================== */

/* Safety: prevent horizontal scroll from any rogue element + suppress
   iOS auto text size adjustment on orientation change. */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Long words shouldn't push the viewport */
.hero__title,
.section-header__title,
.feature-row__title,
.gateway__title,
.gateway-page__title,
.reserve__title,
.cta__title,
.setup-card__title {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Bigger tap target for the EN/UK language switcher in the header */
/* inline-block, not inline-flex. An inline-block's baseline is its text
   baseline, which is what the baseline-aligned nav row needs; a flex
   container whose items opt out of baseline alignment synthesises one from
   its border box instead and the chip drifts. Padding is asymmetric on
   purpose: the label is uppercase, so it never uses the descender space mono
   reserves below the baseline, and equal padding leaves it sitting high. */
.nav__lang {
  display: inline-block;
  line-height: 1;
  padding: 9px 12px 8px;
  min-height: 0;
  font-size: 0.8125rem;
}

/* Mobile-only refinements */
@media (max-width: 767px) {
  /* Dual-screenshot feature rows: stack vertically with rotated arrow */
  .feature-row__screenshot--dual {
    flex-direction: column;
  }
  .feature-row__arrow {
    transform: rotate(90deg);
  }

  /* Product photo on mobile: never exceed the viewport content area. */
  .gateway-page__image img {
    max-width: 100%;
    width: auto;
  }
  .gateway__image {
    max-width: 100%;
    width: auto;
  }

  /* Hero / feature phone mockups breathe better at a smaller width */
  .hero__phone-frame {
    width: 300px;
  }

  /* Specs table: prevent label/value collision on narrow screens */
  .gateway-page__specs td:first-child {
    width: 45%;
    font-size: 0.75rem;
  }
  .gateway-page__specs td:last-child {
    font-size: 0.8125rem;
  }

  /* Subpages: reclaim some space below the fixed header */
  .subpage {
    padding-top: 96px;
  }

  /* Hero: slightly tighter top padding */
  .hero--home {
    padding-top: 100px;
  }

  /* Inverters grid: keep planned-line readable */
  .inverters__planned {
    text-align: center;
  }

  /* CTA buttons center on small screens (they already flex-wrap) */
  .cta__buttons {
    flex-direction: column;
    align-items: center;
  }

  /* Reserve form: full-width submit reads better on phones */
  .reserve__submit {
    width: 100%;
  }
}

/* Very narrow phones (iPhone SE, older Androids) */
@media (max-width: 380px) {
  h1 { font-size: 2.125rem; }

  .hero__phone-frame { width: 220px; }

  .container {
    padding: 0 var(--space-md);
  }
}

/* Purchase-page honesty: buyers were reading "999 UAH" as the whole cost and
   meeting the paywall after delivery. This must be legible next to the price,
   not buried in a FAQ. */
.purchase__plan-note {
  margin: var(--space-md) 0 0;
  padding: 14px 16px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: #FEF6E7;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--color-gray-800);
}

.purchase__plan-note strong { color: var(--color-gray-900); }

.purchase__plan-alt {
  display: inline-block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #F3DCA8;
  color: var(--color-gray-700);
}
.purchase__plan-note a { color: var(--color-primary-text); }

/* ED-1 reads the inverter only over the network. A buyer whose inverter
   offers nothing there must learn it before paying, so this sits above the
   price, not in the FAQ. */
.purchase__warning {
  margin: 0 0 var(--space-md);
  padding: 14px 16px;
  border: 1px solid #E8B4A8;
  border-left: 4px solid #C2410C;
  border-radius: var(--radius-md);
  background: #FDF1EC;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-gray-800);
}
.purchase__warning strong { color: var(--color-gray-900); }
.purchase__warning a { color: var(--color-primary-text); }

.purchase__tip {
  margin: 0 0 var(--space-md);
  padding: 14px 16px;
  border: 1px solid var(--color-gray-200);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-gray-800);
}
.purchase__tip strong { color: var(--color-gray-900); }
.purchase__tip a { color: var(--color-primary-text); }

.gateway-page__trustline {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--color-gray-600);
}

/* ===== Gateway landing sections ===== */
.gateway-section {
  padding: 56px 0;
  border-top: 1px solid var(--color-gray-200);
}
.gateway-section .section-header__title { text-align: center; }
.gateway-section .section-header__subtitle {
  text-align: center;
  max-width: 640px;
  margin: 8px auto 32px;
}

.compare__table {
  width: 100%;
  border-collapse: collapse;
  max-width: 760px;
  margin: 0 auto;
}
.compare__table th,
.compare__table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200);
}
.compare__table th { font-family: var(--font-display); font-size: 0.95rem; }
.compare__col-gw { color: var(--color-brand-blue); }
.compare__yes { color: #16A34A; font-weight: 700; text-align: center; }
.compare__no { color: #9CA3AF; text-align: center; }
.compare__table td:not(:first-child) { text-align: center; }
@media (max-width: 560px) {
  .compare__table th,
  .compare__table td { padding: 10px 8px; font-size: 0.85rem; }
}

.steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 880px;
}
.steps__item { text-align: center; }
.steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-brand-blue);
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 12px;
}
.steps__title { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 6px; }
.steps__desc { color: var(--color-gray-600); font-size: 0.95rem; }
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; gap: 28px; }
}
.gateway-compat__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.trust-strip__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-gray-900);
}
.trust-strip__item span {
  color: var(--color-gray-600);
  font-size: 0.9rem;
}
@media (max-width: 560px) {
  .trust-strip { grid-template-columns: 1fr; gap: 20px; }
}
.gateway-liveproof__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.gateway-faq__inner {
  max-width: 720px;
  margin: 0 auto;
}
.faq {
  border-bottom: 1px solid var(--color-gray-200);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  padding: 16px 0;
  font-family: var(--font-display);
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 14px;
  font-size: 1.3rem;
  color: var(--color-gray-600);
}
.faq[open] summary::after { content: '−'; }
.faq p {
  padding: 0 0 16px;
  color: var(--color-gray-600);
}

.gateway-social__inner,
.gateway-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.gateway-cta { background: var(--color-gray-50); }
.gateway-cta__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin-bottom: 20px;
}
.purchase--cta {
  justify-content: center;
  gap: 20px;
  align-items: center;
}

/* ===================================
   ED-1 gallery + production band (gateway page)
   =================================== */

/* Scoped past `.gateway-page__image img`, which caps the hero at 390px. */
.gateway-page__image .gateway-gallery {
  list-style: none;
  margin: var(--space-md) auto 0;
  padding: 0;
  max-width: 390px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.gateway-page__image .gateway-gallery__item { margin: 0; }

.gateway-page__image .gateway-gallery img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.gateway-gallery__caption {
  display: block;
  margin-top: var(--space-sm);
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--color-gray-500);
  text-align: center;
}

.gateway-boards__figure { margin: var(--space-lg) 0 0; }

.gateway-boards__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
}

.gateway-boards__caption {
  margin-top: var(--space-md);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-gray-600);
  text-align: center;
}

@media (max-width: 640px) {
  .gateway-page__image .gateway-gallery { max-width: 100%; }
  .gateway-gallery__caption { font-size: 0.625rem; }
}

/* Gallery thumbnails are buttons: strip the UA chrome, keep a visible focus
   ring for keyboard users. */
.gateway-page__image .gateway-gallery__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
}

.gateway-page__image .gateway-gallery__btn img {
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.gateway-page__image .gateway-gallery__btn:hover img { border-color: var(--color-gray-500); }

.gateway-page__image .gateway-gallery__btn.is-active img {
  border-color: var(--color-gray-900);
}

.gateway-page__image .gateway-gallery__btn.is-active .gateway-gallery__caption {
  color: var(--color-gray-700);
}

.gateway-page__image .gateway-gallery__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* The hero swaps between a 1:1 photo and 4:3 detail shots. Left to size
   itself, the box collapsed 390 -> 293px on every click and slid the
   thumbnails out from under the pointer, so it is pinned to a square and the
   image is contained inside it. The fill is the exact ground the assets were
   rendered on (237,237,235), so the letterboxing is invisible. */
.gateway-page__image img[data-gallery-hero] {
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  /* Background is set per photo by js/main.js — see the note there. */
}

/* Thumbnails are mixed portrait/landscape and the photos are published
   untouched, so contain them rather than crop. */
.gateway-page__image .gateway-gallery img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--color-gray-100);
}

/* The boards photo is portrait; show it at its own ratio instead of forcing it
   into a full-width band. */
.gateway-boards__figure img {
  max-width: 420px;
  margin: 0 auto;
}

/* ===================================
   Gateway catalog — ED-1 and ED-1.1
   =================================== */

/* The board chooser. It replaces a "not sure which?" line that asked about
   the logger's behaviour — something a homeowner cannot observe. This asks
   about something they can check on their phone in thirty seconds. */
.chooser {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin-bottom: var(--space-2xl);
  background: var(--color-gray-50);
}
/* Below the product cards, so a visitor sees the boards first. */
.catalog + .chooser { margin-top: var(--space-2xl); }
.chooser__title { font-size: 1.15rem; margin-bottom: var(--space-md); }
.chooser__intro,
.chooser__test { font-size: 0.9375rem; line-height: 1.7; color: var(--color-gray-700); }
.chooser__test { margin-top: var(--space-sm); }
.chooser__body { display: grid; gap: var(--space-lg); margin-top: var(--space-md); }
@media (min-width: 820px) {
  .chooser__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}
.chooser__answers { list-style: none; display: grid; gap: var(--space-md); }
.chooser__answers li {
  display: grid;
  gap: 4px;
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-primary);
}
.chooser__q { font-weight: 700; font-size: 0.9375rem; color: var(--color-gray-900); }
.chooser__a { font-size: 0.9375rem; line-height: 1.6; color: var(--color-gray-700); }
.chooser__a a { color: var(--color-primary-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.catalog { margin: var(--space-lg) 0 var(--space-2xl); }
.catalog__head { margin-bottom: var(--space-lg); }
.catalog__title { font-size: 1.15rem; }
.catalog__sub { color: var(--color-gray-500); font-size: 0.875rem; margin-top: var(--space-xs); }

.catalog__grid { display: grid; gap: var(--space-lg); }
/* 700, not 860. Between the two the cards stacked one per row at full column
   width, and `aspect-ratio: 4/3` then made each product photo taller than the
   viewport — the two boards could not be compared without scrolling past a
   700px picture of one of them. */
@media (min-width: 700px) {
  .catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* No `overflow: hidden` here. It used to clip the Buy button whenever the price
   and the button did not fit on one row, silently, with no scrollbar. The
   rounded crop belongs to the image, so it lives on .product__media. */
.product {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
}

/* `contain`, not `cover`, and a shared ground — the same reasoning the gallery
   above already records: these photos are published untouched and are framed
   at different distances, so cropping them makes two variants of one product
   look like two unrelated things. */
.product__media {
  aspect-ratio: 4 / 3;
  background: var(--color-gray-50);
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.product__media img { width: 100%; height: 100%; object-fit: contain; display: block; }

.product__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-grow: 1;
}

.product__stock {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-text);
}
.product__stock--made { color: var(--color-primary-text); letter-spacing: 0.08em; }

.product__name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.product__tag { font-size: 0.8125rem; color: var(--color-gray-500); }
.product__desc { font-size: 0.875rem; color: var(--color-gray-700); line-height: 1.6; margin-top: var(--space-sm); }
.product__desc a { color: var(--color-primary-text); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

.product__foot {
  margin-top: auto;
  padding-top: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.product__foot .btn { flex: 0 0 auto; }
/* line-height 1, like .purchase__price — body's 1.75 gave a 38px line box
   around a 21.6px number and pushed the button off-centre. */
.product__price { font-size: 1.5rem; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--color-gray-900); }

.purchase__which { font-size: 0.8125rem; color: var(--color-gray-500); margin-top: var(--space-md); }

/* The board chooser in the order modal. The radios are `required`, so an
   order can never reach the inbox without naming which board it is for —
   that is the whole point of listing two products rather than one. */
.reserve__legend { display: block; font-size: 0.875rem; color: var(--color-gray-700); margin-bottom: var(--space-sm); }
.reserve__variants { display: grid; gap: var(--space-sm); }

.reserve__variant {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: 12px var(--space-md);
  cursor: pointer;
}
.reserve__variant:hover { border-color: var(--color-primary); }
.reserve__variant:has(input:checked) { border-color: var(--color-primary); background: var(--color-gray-50); }
.reserve__variant input { margin: 0; accent-color: var(--color-primary); }

.reserve__variant-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-grow: 1;
}
.reserve__variant-name { font-size: 0.875rem; font-weight: 600; color: var(--color-gray-900); }
.reserve__variant-price { font-size: 0.875rem; font-weight: 700; color: var(--color-gray-900); white-space: nowrap; }

/* A product option on the product page (ED-1.1's microSD slot), as tiles.
   The radio is the order form's `variant` field — see option_group() in
   gateway-src/build.py — so the whole tile is the target and the dot itself
   is hidden; the ticked tile carries a heavier border instead. */
.option-group { border: 0; padding: 0; margin: 0 0 var(--space-sm); min-width: 0; }
.option-group__title { padding: 0; font-size: 1rem; font-weight: 700; color: var(--color-gray-900); }
.option-group__sub { font-size: 0.8125rem; line-height: 1.5; color: var(--color-gray-500); margin: 2px 0 var(--space-sm); }

.option {
  position: relative;
  display: block;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  padding: 14px var(--space-md);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.option + .option { margin-top: var(--space-sm); }
.option:hover { border-color: var(--color-gray-500); }
.option:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.option:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

.option__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.option__name { font-size: 0.9375rem; font-weight: 600; color: var(--color-gray-900); }
.option__price { font-size: 0.9375rem; font-weight: 600; color: var(--color-gray-900); white-space: nowrap; }
.option__desc { display: block; margin-top: var(--space-xs); font-size: 0.8125rem; line-height: 1.55; color: var(--color-gray-600); }

/* Show the price that matches the ticked option, on the page and in the
   order modal alike. Plain board by default. */
[data-option-show="card"] { display: none; }
body:has(input[data-option="card"]:checked) [data-option-show="card"] { display: inline; }
body:has(input[data-option="card"]:checked) [data-option-show="none"] { display: none; }

.modal__choice { font-size: 0.9375rem; font-weight: 600; color: var(--color-gray-900); margin: calc(-1 * var(--space-xs)) 0 var(--space-sm); }

/* ===================================
   Product pages (/gateway/ed-1, /gateway/ed-1-1)
   =================================== */

/* The catalog page leads with the case for a Gateway at all; the two boards
   follow as cards. Nothing here is board-specific — that lives on the product
   pages, which is the whole reason they exist. */
.catalog-hero .subpage__title { margin-bottom: var(--space-md); }
.catalog-hero .subpage__subtitle {
  color: var(--color-gray-600);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--color-gray-400);
  margin-bottom: var(--space-xl);
}
.crumbs a { color: var(--color-primary-text); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Reading copy under the buy panel. Width comes from the shared measure
   below; the paragraphs inside get 68ch there too. Do not add a max-width
   here — that is how this page ended up with four different left edges. */
.product-page__prose {
  margin-top: var(--space-4xl);
  display: grid;
  gap: var(--space-2xl);
}
.product-page__block-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}
.product-page__block p { color: var(--color-gray-700); line-height: 1.75; }
.product-page__block a { color: var(--color-primary-text); text-decoration: underline; text-underline-offset: 3px; }

/* Three plain lines under the name, before the price. This is what the buyer
   is actually deciding on; the spec table is for after they have decided. */
.product-page__benefits {
  list-style: none;
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 var(--space-xl);
}
.product-page__benefits li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-gray-800);
}
.product-page__benefits li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-primary-text);
  font-weight: 700;
}

/* Specs and the capability list side by side, below the reading copy. */
.product-page__tech-grid { display: grid; gap: var(--space-2xl); margin-top: var(--space-lg); }
@media (min-width: 800px) {
  .product-page__tech-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

/* Wiring detail, labelled and out of the buyer's way. A homeowner reading this
   page should be able to see at a glance that this part is not for them. */
.product-page__installer { background: var(--color-gray-50); }
.product-page__installer .product-page__prose { margin-top: var(--space-xl); }

.product-page__video-el {
  width: 100%;
  height: auto;
  display: block;
  margin-top: var(--space-xl);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  background: var(--color-gray-900);
}
.product-page__video figcaption {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  margin-top: var(--space-sm);
}

/* One card, one column. Capping the width alone was not enough: the grid is
   still `repeat(2, 1fr)` above 860px, so the lone card took half of the cap
   and rendered at a 20-character measure. */
/* The cross-sell block takes the shared measure itself, so the card inside it
   can sit at that block's left edge rather than the container's. */
/* The lone cross-sell card. `margin-inline: 0` because the shared measure
   above centres every block, and one centred card under a left-aligned
   heading is the same mismatch this page was just fixed for. */
.catalog--single .catalog__grid {
  grid-template-columns: minmax(0, 420px);
  max-width: 420px;
  margin-inline: 0;
}

.product__name a { color: inherit; text-decoration: none; }
.product__name a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* The media is a link too, so the obvious click target works — but it is
   aria-hidden with tabindex -1, so keyboard and screen-reader users get one
   link per card (the name) rather than three saying the same thing. */
a.product__media { display: block; }

/* The catalog is its own full-width section now, so cap the measure rather
   than let two cards stretch to 564px each inside a 1152px container. */
.gateway-catalog .catalog { margin: 0; }
/* ONE measure for every block on these pages, and one axis to centre it on.
   Each block used to carry its own: the hero sat at the container edge at
   68ch, the chooser at 760px, the cards centred inside 1000px and the
   comparison table centred inside 760px. Four left edges down one page, which
   is exactly what it looked like. Add a block here, not a new max-width. */
.catalog-hero,
.chooser,
.catalog--single,
.catalog__head,
.catalog__grid,
.gateway-catalog .purchase__which,
.gateway-catalog .compare__table,
.crumbs,
.gateway-page,
.product-page__prose,
.product-page__tech-inner,
.product-page__installer-inner,
.product-page__video-inner {
  max-width: var(--measure, 1000px);
  margin-inline: auto;
}

/* Text still gets a readable line length inside that block — the block sets
   the edges, the paragraph sets the measure. */
.catalog-hero .subpage__subtitle,
.chooser__intro,
.chooser__test,
.product-page__block p { max-width: 68ch; }

/* Higher specificity than `.catalog`, whose `margin` shorthand sets the
   physical left/right longhands and was beating the group rule's
   `margin-inline: auto` on this element. */
.gateway-catalog .catalog--single { margin-left: auto; margin-right: auto; }

.gateway-catalog .compare { margin-top: var(--space-2xl); }

/* fieldset needs its user-agent chrome removed to sit in the form flow */
.reserve__field--group { border: 0; padding: 0; margin: 0 0 var(--space-md); }

/* The radio itself is a 13px default; the card is the real target, so the
   focus ring has to be on the card or keyboard users cannot see where they are. */
.reserve__variant:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Gateway product page, 2026-10: Buy is a link to the checkout. ED-1.1 has
   two (plain board, slot board); the ticked tile decides which shows. These
   need the .purchase scope: `.purchase .gateway-page__buy` sets display and
   would otherwise show both. */
.purchase .gateway-page__buy[data-option-show="card"] { display: none; }
body:has(input[data-option="card"]:checked) .purchase .gateway-page__buy[data-option-show="card"] { display: inline-flex; }
body:has(input[data-option="card"]:checked) .purchase .gateway-page__buy[data-option-show="none"] { display: none; }

.purchase__info-rows { margin: 0 0 var(--space-xl); display: grid; gap: 10px; font-size: 0.8125rem; }
.purchase__info-rows dt { font-weight: 700; color: var(--color-gray-900); }
.purchase__info-rows dd { margin: 2px 0 0; color: var(--color-gray-700); }

/* Phone: price and Buy are a bar pinned to the bottom of the screen from the
   first load, as in a shop app. Fixed, not sticky: the details block starts
   below the first screen, and a sticky bar cannot leave its container. */
@media (max-width: 767px) {
  .gateway-page__details .purchase {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0;
    flex-wrap: nowrap; align-items: center; column-gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--color-white); border-top: 1px solid var(--color-gray-200);
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06);
  }
  .gateway-page__details .purchase .gateway-page__buy { flex: 1 1 auto; flex-basis: auto; min-height: 52px; }
  .gateway-page__details .purchase__price { font-size: 1.5rem; }
  .gateway-page__details .purchase__price-currency { font-size: 1.125rem; }
  body:has(.gateway-page__details .purchase) { padding-bottom: 88px; }
}

/* Order confirmed: what happens next, as four steps. */
.order-confirmed__steps { list-style: none; margin: var(--space-lg) 0; padding: 0; display: grid; gap: 12px; text-align: left; }
.order-confirmed__steps li { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; font-size: 0.875rem; }
.order-confirmed__steps li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-gray-300); grid-row: span 2; margin-top: 2px; box-sizing: border-box; }
.order-confirmed__steps li.is-done::before { background: #15803d; border-color: #15803d; }
.order-confirmed__steps span { color: var(--color-gray-600); font-size: 0.8125rem; }
@media (min-width: 768px) { .order-confirmed__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ===================================
   Nav: grouped dropdowns + «Купити» CTA
   =================================== */

.nav__group {
  position: relative;
}

.nav__group-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-gray-600);
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav__group-btn::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.nav__group-btn:hover,
.nav__group-btn[aria-expanded="true"] {
  color: var(--color-primary-text);
}

.nav__group-btn[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(-135deg);
}

.nav__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: -14px;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Bridges the 12px gap so hover does not drop while the pointer travels
   from the trigger into the panel. */
.nav__menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav__group.open .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__links .nav__menu a {
  padding: 9px 12px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  color: var(--color-gray-800);
}

.nav__links .nav__menu a:hover {
  background: var(--color-gray-50);
  color: var(--color-primary-text);
}

.nav__links .nav__buy,
.nav__buy {
  position: relative;
  align-self: center;
  white-space: nowrap;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary-text);
}

/* The same marker-pen underline the hero puts under «цілодобово». */
.nav__buy::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 3px;
  border-radius: 3px;
  background: var(--color-primary);
  transition: height 0.15s ease, bottom 0.15s ease;
}

.nav__links .nav__buy:hover,
.nav__buy:hover {
  color: var(--color-gray-900);
}

.nav__buy:hover::after {
  bottom: -6px;
  height: 4px;
}

.nav__divider {
  align-self: center;
  width: 1px;
  height: 18px;
  background: var(--color-gray-300);
}

.nav__actions:has(.nav__buy) {
  align-items: center;
}

.nav__actions .nav__buy--mobile {
  margin: 0 var(--space-xs) 0 var(--space-sm);
}

@media (min-width: 980px) {
  .nav__links {
    align-items: center;
    gap: 1.75rem;
  }

  .nav__buy--mobile {
    display: none;
  }
}


.mobile-menu:has(.mobile-menu__heading) {
  overflow-y: auto;
}

.mobile-menu__content:has(.mobile-menu__heading) {
  gap: 0;
}

.mobile-menu__heading {
  margin: var(--space-lg) 0 var(--space-xs);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-text);
}

.mobile-menu__heading:first-child {
  margin-top: 0;
}

.mobile-menu__content:has(.mobile-menu__heading) .mobile-menu__link {
  font-size: 1.0625rem;
  padding: var(--space-sm) 0;
}

.mobile-menu__link--gap {
  margin-top: var(--space-lg);
}

.mobile-menu__download {
  margin: var(--space-xl) 0 var(--space-md);
  padding: var(--space-md);
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-gray-900);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--color-gray-900);
}

.mobile-menu__content .mobile-menu__link--quiet {
  border-bottom: none;
  color: var(--color-gray-600);
  font-size: 0.9375rem;
}

/* «Ще» as a three-column panel: every useful page that has no other entry
   point (firmware, logs, pinout, brand guides) gets one here. */
.nav__menu--mega {
  left: auto;
  right: -120px;
  flex-direction: row;
  gap: var(--space-md);
  padding: var(--space-md);
}

.nav__col {
  display: flex;
  flex-direction: column;
  min-width: 170px;
}

.nav__col-title {
  margin: 0 0 6px;
  padding: 0 12px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-text);
}

/* ===================================
   Contacts: heading left, contact rows right
   =================================== */

.contacts__layout {
  display: grid;
  gap: var(--space-2xl, 2.5rem);
}

@media (min-width: 900px) {
  .contacts__layout {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}

.contacts--split .section-header__title {
  text-align: left;
  margin-bottom: var(--space-md);
}

.contacts__lead {
  max-width: 34ch;
  color: var(--color-gray-600);
  line-height: 1.7;
}

.contacts__list {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
}

.contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  color: var(--color-gray-900);
  text-decoration: none;
}

.contact-row + .contact-row {
  border-top: 1px solid var(--color-gray-200);
}

.contact-row__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-brand-blue);
  color: var(--color-white);
}

.contact-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.contact-row__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.contact-row__value {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-gray-900);
  text-decoration: none;
}

a.contact-row__value:hover,
.contact-row--link:hover .contact-row__value {
  color: var(--color-primary-text);
}

.contact-row__arrow {
  flex: none;
  font-size: 1.125rem;
  color: var(--color-gray-500);
  transition: transform 0.15s ease, color 0.15s ease;
}

.contact-row--link:hover .contact-row__arrow {
  transform: translateX(3px);
  color: var(--color-primary-text);
}

.contact-row__chips {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.contact-chip {
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-gray-800);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-gray-300);
}

.contact-chip:hover {
  color: var(--color-primary-text);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

@media (max-width: 480px) {
  .contact-row {
    flex-wrap: wrap;
    padding: var(--space-md) var(--space-lg);
  }

  .contact-row__chips {
    width: 100%;
    justify-content: flex-start;
    padding-left: calc(40px + var(--space-md));
  }
}

/* ===================================
   Footer v2: dark, brand + contacts left, sitemap columns right
   =================================== */

.footer--v2 {
  padding: var(--space-4xl) 0 var(--space-xl);
  background: var(--color-gray-900);
  color: var(--color-gray-400);
}

.footer2__top {
  display: grid;
  gap: var(--space-2xl, 2.5rem) var(--space-xl);
  grid-template-columns: 1fr 1fr;
}

.footer2__brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 340px;
}

@media (min-width: 980px) {
  .footer2__top {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }

  .footer2__brand {
    grid-column: auto;
  }
}

.footer2__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  text-decoration: none;
}

.footer2__tagline {
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0;
}

.footer2__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer2__contact a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
}

.footer2__contact a:hover,
.footer2__col a:hover,
.footer2__legal a:hover {
  color: var(--color-primary);
}

.footer2__stores {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.footer2__stores img {
  display: block;
  height: 40px;
  width: auto;
}

.footer2__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer2__title {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.footer2__col a {
  font-size: 0.875rem;
  color: var(--color-gray-400);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer2__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8125rem;
}

.footer2__bottom p {
  margin: 0;
}

.footer2__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.footer2__legal a {
  color: var(--color-gray-400);
  text-decoration: none;
}