/* =========================================================================
   Glass Pages 2026 — оформление контентных страниц под тот же язык,
   что и главная: статьи, список статей, города, список городов.

   Слой поверх существующих стилей: разметку и логику не трогает,
   отключается удалением <link> в шаблонах app/server.js.

   Параметры стекла сняты с реальной главной, а не подобраны на глаз:
   градиент белого 94%, рамка rgba(255,255,255,.92), радиус 16-18px,
   тень 0 26px 60px rgba(9,17,32,.42), blur(18px) saturate(1.7).
   ========================================================================= */

/* ---------- шрифты (те же файлы, что на главной) ---------- */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Unbounded;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/unbounded-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/unbounded-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}

:root{
  --gp-blue:#155eef;
  --gp-blue-deep:#0b3b91;
  --gp-ink:#111827;
  --gp-muted:#5b6f88;
  --gp-line:#c7d4e6;
  --gp-glass:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 100%);
  --gp-glass-soft:linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.74) 100%);
  --gp-glass-border:1px solid rgba(255,255,255,.92);
  --gp-glass-shadow:0 26px 60px rgba(9,17,32,.16), inset 0 1px 0 rgba(255,255,255,.9);
  --gp-glass-shadow-soft:0 16px 38px rgba(9,17,32,.1), inset 0 1px 0 rgba(255,255,255,.85);
}

/* ---------- подложка страницы ----------
   Стекло проявляется только на неоднородном фоне, поэтому даём
   контентным страницам ту же светлую градиентную подложку. */
html body.knowledge-page,
html body.article-page{
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(21,94,239,.13), transparent 62%),
    radial-gradient(900px 520px at 8% 4%, rgba(148,190,255,.16), transparent 58%),
    linear-gradient(180deg, #eef3f9 0%, #f5f7fb 46%, #f2f5fa 100%) !important;
  background-attachment:fixed !important;
  color:var(--gp-ink) !important;
}

/* ---------- типографика ---------- */
html body.knowledge-page,
html body.article-page,
html body.knowledge-page button,
html body.article-page button,
html body.knowledge-page input,
html body.article-page input,
html body.knowledge-page select,
html body.article-page select,
html body.knowledge-page textarea,
html body.article-page textarea{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif !important;
}

html body.knowledge-page h1,
html body.article-page h1,
html body.knowledge-page h2,
html body.article-page h2,
html body.knowledge-page h3,
html body.article-page h3,
html body.knowledge-page .brand span,
html body.article-page .brand span{
  font-family:Unbounded,Inter,sans-serif !important;
  letter-spacing:-.01em;
}

html body.article-page .article-head h1{
  font-size:clamp(26px,3.2vw,32px) !important;
  line-height:1.16 !important;
  font-weight:400 !important;
}

html body.article-page .article-content h2,
html body.knowledge-page .knowledge-hero h1,
html body.knowledge-page .location-hero h1{
  font-size:clamp(21px,2.2vw,24px) !important;
  line-height:1.24 !important;
  font-weight:400 !important;
}

html body.article-page .article-content h3{
  font-size:19px !important;
  font-weight:400 !important;
}

html body.article-page .article-content p,
html body.article-page .article-content li{
  font-size:16px !important;
  line-height:1.72 !important;
  color:#26313f !important;
}

/* ---------- шапка сайта ---------- */
html body.knowledge-page .topbar,
html body.article-page .topbar{
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,.8) !important;
  box-shadow:0 8px 26px rgba(9,17,32,.07) !important;
}

/* ---------- стеклянные карточки ---------- */
html body.article-page .article-head,
html body.article-page .article-content,
html body.article-page .article-faq,
html body.knowledge-page .knowledge-card > a,
html body.knowledge-page .location-card > a{
  background:var(--gp-glass) !important;
  border:var(--gp-glass-border) !important;
  border-radius:18px !important;
  box-shadow:var(--gp-glass-shadow) !important;
  backdrop-filter:blur(18px) saturate(1.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.7);
}

html body.article-page .article-related{
  background:var(--gp-glass-soft) !important;
  border:var(--gp-glass-border) !important;
  border-radius:16px !important;
  box-shadow:var(--gp-glass-shadow-soft) !important;
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
}

/* article — только контейнер сетки, всё оформление на ссылке внутри */
html body.knowledge-page .knowledge-card,
html body.knowledge-page .location-card{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 !important;
}

html body.knowledge-page .knowledge-card > a,
html body.knowledge-page .location-card > a{
  height:100% !important;
}

/* карточки в списках приподнимаются при наведении */
html body.knowledge-page .knowledge-card > a,
html body.knowledge-page .location-card > a{
  transition:transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  html body.knowledge-page .knowledge-card > a:hover,
  html body.knowledge-page .location-card > a:hover{
    transform:translateY(-2px);
    box-shadow:0 30px 66px rgba(9,17,32,.2), inset 0 1px 0 rgba(255,255,255,.9) !important;
  }
}

/* ---------- бейдж категории ---------- */
html body.article-page .eyebrow,
html body.knowledge-page .knowledge-card span:first-child,
html body.knowledge-page .location-card span:first-child{
  font-family:Inter,sans-serif !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase;
  color:var(--gp-blue-deep) !important;
  background:rgba(21,94,239,.1) !important;
  border:1px solid rgba(147,197,253,.6) !important;
  border-radius:999px !important;
  padding:5px 11px !important;
}

/* ---------- хлебные крошки ---------- */
html body.knowledge-page .breadcrumbs,
html body.article-page .breadcrumbs{
  font-size:13px !important;
  color:var(--gp-muted) !important;
}
html body.knowledge-page .breadcrumbs a,
html body.article-page .breadcrumbs a{
  color:var(--gp-blue-deep) !important;
  text-decoration:none;
}
html body.knowledge-page .breadcrumbs a:hover,
html body.article-page .breadcrumbs a:hover{text-decoration:underline}

/* ---------- дата актуальности ---------- */
html body.article-page .article-meta{
  font-size:12.5px !important;
  color:var(--gp-muted) !important;
}

/* ---------- кнопки ---------- */
html body.knowledge-page .primary-btn,
html body.article-page .primary-btn{
  background:linear-gradient(180deg,#3b82f6,var(--gp-blue)) !important;
  border:0 !important;
  border-radius:12px !important;
  color:#fff !important;
  font-weight:500 !important;
  box-shadow:0 10px 26px rgba(21,94,239,.34), inset 0 1px 0 rgba(255,255,255,.45) !important;
  transition:transform .16s ease, box-shadow .16s ease;
}
@media (hover:hover){
  html body.knowledge-page .primary-btn:hover,
  html body.article-page .primary-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 32px rgba(21,94,239,.42), inset 0 1px 0 rgba(255,255,255,.5) !important;
  }
}
html body.knowledge-page .primary-btn:focus-visible,
html body.article-page .primary-btn:focus-visible{
  outline:2px solid var(--gp-blue-deep);
  outline-offset:2px;
}

/* ---------- блок призыва внизу статьи ---------- */
html body.article-page .article-cta{
  background:linear-gradient(135deg, rgba(21,94,239,.96), rgba(11,59,145,.96)) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  border-radius:18px !important;
  box-shadow:0 24px 54px rgba(11,59,145,.28) !important;
  color:#fff !important;
}
html body.article-page .article-cta h2,
html body.article-page .article-cta h3,
html body.article-page .article-cta p{color:#fff !important}
html body.article-page .article-cta .primary-btn{
  background:rgba(255,255,255,.96) !important;
  color:var(--gp-blue-deep) !important;
  box-shadow:0 10px 24px rgba(6,26,64,.28) !important;
}

/* ---------- FAQ ---------- */
html body.article-page .article-faq summary{
  font-weight:500 !important;
  color:var(--gp-ink) !important;
  cursor:pointer;
}
html body.article-page .article-faq details{
  border-bottom:1px solid rgba(199,212,230,.55) !important;
}

/* ---------- подвал ---------- */
html body.knowledge-page .footer,
html body.article-page .footer{
  background:linear-gradient(180deg,#0f172a,#0b1324) !important;
}

/* =========================================================================
   Мобильные правила — закладываем сразу, чтобы не чинить вторым заходом
   ========================================================================= */
@media (max-width:767px){
  /* фон фиксируется только на десктопе: на iOS fixed-подложка
     вызывает рывки при прокрутке */
  html body.knowledge-page,
  html body.article-page{background-attachment:scroll !important}

  /* поля не мельче 16px, иначе Safari зумит страницу при фокусе */
  html body.knowledge-page input,
  html body.article-page input,
  html body.knowledge-page select,
  html body.article-page select,
  html body.knowledge-page textarea,
  html body.article-page textarea{font-size:16px !important}

  /* длинные слова в заголовках переносятся, а не распирают вёрстку */
  html body.article-page h1,
  html body.knowledge-page h1,
  html body.article-page .article-content h2,
  html body.article-page .article-content h3{overflow-wrap:anywhere}

  /* карточки: скромнее радиус и отступы, слабее тень */
  html body.article-page .article-head,
  html body.article-page .article-content,
  html body.article-page .article-faq,
  html body.knowledge-page .knowledge-card > a,
  html body.knowledge-page .location-card > a{
    border-radius:14px !important;
    box-shadow:0 14px 30px rgba(9,17,32,.13), inset 0 1px 0 rgba(255,255,255,.85) !important;
  }

  html body.article-page .article-cta{border-radius:14px !important}

  /* размытие на слабых телефонах ощутимо дороже — снижаем радиус */
  html body.article-page .article-head,
  html body.article-page .article-content,
  html body.article-page .article-faq{
    backdrop-filter:blur(12px) saturate(1.5);
    -webkit-backdrop-filter:blur(12px) saturate(1.5);
  }
}

@media (prefers-reduced-motion:reduce){
  html body.knowledge-page *,
  html body.article-page *{transition:none !important}
}

/* =========================================================================
   Меню иконкой (19.08.2026)
   Лента занимала высоту в шапке и обрезалась по краям. Прячем разделы
   под иконку: список открывается панелью поверх страницы.
   ========================================================================= */

/* кнопка меню скрыта на широких экранах — там меню видно строкой */
html body.knowledge-page .nav-toggle,
html body.article-page .nav-toggle{display:none}

@media (max-width:1120px){
  html body.knowledge-page .topbar-inner,
  html body.article-page .topbar-inner{
    position:relative;
    flex-wrap:nowrap !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  html body.knowledge-page .nav-toggle,
  html body.article-page .nav-toggle{
    display:flex !important;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    width:42px;
    height:42px;
    padding:0 11px;
    margin-left:auto;
    flex:0 0 auto;
    background:rgba(21,94,239,.1);
    border:1px solid rgba(147,197,253,.6);
    border-radius:11px;
    cursor:pointer;
  }
  html body.knowledge-page .nav-toggle i,
  html body.article-page .nav-toggle i{
    display:block;height:2px;background:var(--gp-blue-deep);border-radius:2px;
  }
  html body.knowledge-page .nav-toggle:focus-visible,
  html body.article-page .nav-toggle:focus-visible{
    outline:2px solid var(--gp-blue);outline-offset:2px;
  }

  html body.knowledge-page .nav,
  html body.article-page .nav{
    display:none !important;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    left:0;
    flex-direction:column;
    gap:2px;
    padding:8px !important;
    margin:0 !important;
    background:rgba(255,255,255,.98);
    border:1px solid rgba(199,212,230,.8);
    border-radius:14px;
    box-shadow:0 20px 46px rgba(9,17,32,.18);
    z-index:60;
  }
  html body.knowledge-page .topbar-inner.nav-open .nav,
  html body.article-page .topbar-inner.nav-open .nav{display:flex !important}

  html body.knowledge-page .nav a,
  html body.article-page .nav a{
    padding:12px 14px !important;
    border-radius:9px !important;
    background:transparent !important;
    border:0 !important;
    color:var(--gp-ink) !important;
    font-size:15px !important;
    text-decoration:none !important;
  }

  /* «Запись» не дублируем: то же действие у плавающей кнопки */
  html body.knowledge-page .nav a[href="/#bookingFormStart"],
  html body.article-page .nav a[href="/#bookingFormStart"]{display:none !important}
}


/* =========================================================================
   ТИПОГРАФИКА: единая система (19.08.2026)

   Было: 31 комбинация размера и насыщенности на главной, 19 на статьях.
   Один кегль жил с четырьмя весами сразу, Unbounded встречался и в 400,
   и в 700 — отсюда ощущение, что шрифты везде разные.

   Правила системы:
     • семейства два — Unbounded для крупных заголовков, Inter для всего;
     • Unbounded только веса 400 и только от 20px;
     • веса Inter только 400 / 500 / 600, вес 700 не используется;
     • шкала кеглей: 32 · 24 · 19 · 17 · 16 · 15 · 13.
   ========================================================================= */

/* ---------- крупные заголовки: Unbounded, всегда 400 ---------- */
html body h1,
html body h2.section-title,
html body .content-section > h2,
html body .article-head h1,
html body .knowledge-hero h1,
html body .location-hero h1{
  font-family:Unbounded,Inter,sans-serif !important;
  font-weight:400 !important;
  letter-spacing:-.01em;
}

/* ---------- средние и мелкие заголовки: Inter 600 ---------- */
html body h3,
html body h4,
html body .screen-head h2,
html body .side-panel h2,
html body .article-related h2,
html body .article-faq h2,
html body .knowledge-card h2,
html body .location-card h2{
  font-family:Inter,system-ui,-apple-system,sans-serif !important;
  font-weight:600 !important;
}

/* ---------- вес 700 не используется нигде ---------- */
html body b,
html body strong,
html body th,
html body .brand span,
html body .primary-btn,
html body .secondary-btn,
html body button{
  font-weight:600 !important;
}

/* ---------- текст и элементы интерфейса: Inter ---------- */
html body p,
html body li,
html body label,
html body input,
html body select,
html body textarea,
html body small,
html body span,
html body a,
html body td,
html body summary,
html body figcaption{
  font-family:Inter,system-ui,-apple-system,sans-serif !important;
}

/* ---------- выбросы кегля приводим к шкале ---------- */
html body .article-head h1{font-size:clamp(26px,3.2vw,32px) !important}
html body .article-content h2,
html body .content-section > h2{font-size:clamp(21px,2.2vw,24px) !important}
html body .article-related h2,
html body .article-faq h2{font-size:19px !important}
html body .brand span{font-size:17px !important}

/* добор: элементы, которые перебивали систему более узкими селекторами */
html body.article-page .brand,
html body.knowledge-page .brand,
html body.article-page .support-chat-button,
html body.knowledge-page .support-chat-button,
html body.article-page .breadcrumbs a,
html body.knowledge-page .breadcrumbs a,
html body.article-page .breadcrumbs span,
html body.knowledge-page .breadcrumbs span,
html body.article-page .article-content a,
html body.article-page .article-related a,
html body .floating-booking-cta span,
html body .nav a{font-weight:600 !important}

html body.article-page .article-cta h2,
html body .final-cta h2{
  font-family:Unbounded,Inter,sans-serif !important;
  font-weight:400 !important;
  font-size:clamp(21px,2.4vw,26px) !important;
}


/* =========================================================================
   СИСТЕМА: цвет, радиусы, кнопки — то же, что на главной (19.08.2026)
   ========================================================================= */
html body.knowledge-page .article-content p,
html body.article-page .article-content p,
html body.knowledge-page small,
html body.article-page small,
html body.knowledge-page .breadcrumbs,
html body.article-page .breadcrumbs,
html body.article-page .article-meta{color:var(--gp-muted) !important}

/* радиусы: три ступени */
html body.knowledge-page .primary-btn,
html body.article-page .primary-btn,
html body.knowledge-page button:not(.nav-toggle),
html body.article-page button:not(.nav-toggle),
html body.knowledge-page input,
html body.article-page input{border-radius:12px !important}

html body.knowledge-page .knowledge-card > a,
html body.knowledge-page .location-card > a,
html body.article-page .article-head,
html body.article-page .article-content,
html body.article-page .article-faq,
html body.article-page .article-related,
html body.article-page .article-cta{border-radius:16px !important}

/* кнопки: один вид */
html body.knowledge-page .primary-btn,
html body.article-page .primary-btn{
  min-height:48px !important;
  padding:0 20px !important;
  font-size:15px !important;
  font-weight:600 !important;
  display:inline-flex !important;
  align-items:center;
}

/* «Задать вопрос» — заметная */
html body.knowledge-page .support-chat-button,
html body.article-page .support-chat-button{
  background:var(--gp-blue) !important;
  border:0 !important;
  color:#fff !important;
  font-weight:600 !important;
  box-shadow:0 8px 20px rgba(21,94,239,.3) !important;
  min-height:44px !important;
  border-radius:12px !important;
}

/* янтарный -> синий */
html body.knowledge-page *,
html body.article-page *{
  scrollbar-color:rgba(21,94,239,.55) rgba(15,23,42,.08) !important;
}
html body.knowledge-page ::-webkit-scrollbar-thumb,
html body.article-page ::-webkit-scrollbar-thumb{
  background:rgba(21,94,239,.55) !important;border-radius:999px;
}
html body.knowledge-page ::-webkit-scrollbar,
html body.article-page ::-webkit-scrollbar{width:8px;height:8px}
html body.knowledge-page :focus-visible,
html body.article-page :focus-visible{outline-color:var(--gp-blue) !important}

/* бейджи по содержимому: раньше это были блоки во всю ширину карточки,
   а высота скакала от 29 до 38px в зависимости от длины подписи */
html body.knowledge-page .knowledge-card span:first-child,
html body.knowledge-page .location-card span:first-child,
html body.article-page .eyebrow{
  display:inline-flex !important;
  align-items:center;
  width:auto !important;
  max-width:100%;
  min-height:26px !important;
  padding:0 11px !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1 !important;
  /* карточка — grid, без этого бейдж растягивается на всю колонку */
  justify-self:start !important;
  align-self:start !important;
}

/* ---------- пункты города: карточка стала входом в запись 22.08.2026 ----------
   Раньше это был список адресов: человек читал их и всё равно шёл в форму выбирать
   заново. Теперь вся карточка — ссылка, которая несёт город и пункт. Оболочка li
   отдаёт оформление ссылке, иначе получается карточка внутри карточки. */
html body.location-page .location-station-list li{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  border-radius:0 !important;
}
html body.location-page .location-station-list .location-station-link{
  display:grid !important;
  gap:5px !important;
  padding:15px 16px !important;
  border:1px solid rgba(199,212,230,.85) !important;
  border-radius:var(--r-lg,16px) !important;
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important;
  text-decoration:none !important;
  color:inherit !important;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
html body.location-page .location-station-list .location-station-link:hover{
  border-color:rgba(120,160,215,.95) !important;
  background:rgba(255,255,255,.92) !important;
  transform:translateY(-1px);
}
html body.location-page .location-station-list .location-station-link:focus-visible{
  outline:2px solid #155eef !important;
  outline-offset:2px !important;
}
html body.location-page .location-station-list .station-district{
  color:#5b6f88 !important;
  font-size:13.5px !important;
}
html body.location-page .location-station-list .station-go{
  color:#1c58c9 !important;
  font-size:13.5px !important;
  font-weight:600 !important;
}
@media (prefers-reduced-motion:reduce){
  html body.location-page .location-station-list .location-station-link{transition:none}
  html body.location-page .location-station-list .location-station-link:hover{transform:none}
}

/* City selection stays compact; booking and knowledge articles keep their styles. */
html body.location-page .location-layout{
  padding-top:28px !important;
  gap:24px !important;
}
html body.location-page .location-head,
html body.location-page .location-stations{
  padding:0 !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html body.location-page .location-head h1{
  margin:14px 0 !important;
  font-size:30px !important;
  letter-spacing:0;
}
html body.location-page .location-head p:not(.eyebrow){
  margin:12px 0 !important;
  font-size:17px !important;
  line-height:1.5 !important;
}
html body.location-page .location-head .article-meta{
  margin:16px 0 0 !important;
  gap:8px !important;
}
html body.location-page .location-head p.location-freshness{
  font-size:12px !important;
  font-weight:400 !important;
  color:var(--gp-muted) !important;
  line-height:1.5 !important;
}
html body.location-page .location-stations h2{
  font-size:23px !important;
  letter-spacing:0;
}
html body.location-page .location-stations h3{
  font-size:18px !important;
  letter-spacing:0;
}
html body.location-page .location-station-list{
  padding:0 !important;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
html body.location-page .location-station-list .location-station-link{
  height:100%;
  box-sizing:border-box;
  border-radius:8px !important;
  align-content:start;
  overflow-wrap:anywhere;
}
html body.location-page .location-station-list .station-prices{
  font-weight:400 !important;
  line-height:1.5;
}
html body.location-page .location-station-list .station-category{
  display:block;
  margin:2px 0;
}
@media (max-width:640px){
  html body.location-page .location-layout{padding-top:20px !important;gap:20px !important}
  html body.location-page .location-head h1{font-size:26px !important}
  html body.location-page .location-stations h2{font-size:21px !important}
  html body.location-page .location-station-list{grid-template-columns:minmax(0,1fr)}
}

/* The opt-in registration guide uses the existing city page typography. */
html body.location-page .registration-nav{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:16px}
html body.location-page .registration-nav a{padding:10px 0;line-height:1.5;text-underline-offset:4px}
html body.location-page .registration-guide{padding:24px 0 !important;border:0 !important;border-top:1px solid #c7d4e6 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;backdrop-filter:none}
html body.location-page .registration-guide h2{font-size:23px !important;letter-spacing:0;line-height:1.3}
html body.location-page .registration-guide h3{font-size:18px !important;letter-spacing:0;line-height:1.4;margin-top:26px}
html body.location-page .registration-guide p{line-height:1.6 !important}
html body.location-page .registration-offices{list-style:none;padding:0 !important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
html body.location-page .registration-offices>li{padding:16px 0 !important;margin:0 !important;border-bottom:1px solid #c7d4e6;min-width:0}
html body.location-page .registration-offices strong{display:block;font-size:16px;line-height:1.4}
html body.location-page .registration-offices p{margin:8px 0 !important}
html body.location-page .registration-offices a{display:inline-block;padding:8px 0;font-size:14px;text-underline-offset:3px}
html body.location-page .registration-source-note{font-size:13px !important;color:#52647a !important;line-height:1.6 !important}
html body.location-page .registration-steps{padding-left:24px !important}
html body.location-page .registration-steps>li{padding-left:6px;margin:16px 0 !important}
html body.location-page .registration-steps p{margin:6px 0 !important}
html body.location-page .registration-answers details{border-top:1px solid #c7d4e6;padding:0}
html body.location-page .registration-answers summary{padding:16px 0;min-height:48px;box-sizing:border-box;font-size:16px !important;line-height:1.5;cursor:pointer}
html body.location-page .registration-answers details[open]{padding-bottom:12px}
html body.location-page .registration-next{padding-top:4px}
html body.location-page .registration-guide a:focus-visible,html body.location-page .registration-nav a:focus-visible,html body.location-page .registration-guide summary:focus-visible{outline:2px solid #155eef;outline-offset:3px}
html body.location-page #registration,html body.location-page #city-stations{scroll-margin-top:100px}
@media(max-width:640px){
  html body.location-page .registration-guide h2{font-size:21px !important}
  html body.location-page .registration-offices{grid-template-columns:minmax(0,1fr)}
  html body.location-page .registration-nav{gap:0 20px}
  html body.location-page .registration-guide .primary-btn{white-space:normal;text-align:center;max-width:100%;box-sizing:border-box}
}
.location-page .registration-guide summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.location-page .registration-eligibility { border-block: 1px solid #ccd6e4; padding: 4px 0; margin: 20px 0; }
.location-page .registration-evidence { font-size: 13px; }