@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400..800;1,400..800&display=swap');

:root {
  --bg: #f5f7fa;
  --bg-elevated: #fbfcff;
  --bg-soft: #eef4f8;
  --paper: var(--bg);
  --paper-2: #e9eef4;
  --ink: #101114;
  --ink-2: #27313b;
  --muted: #5f636b;
  --muted-soft: #8a8f98;
  --line: rgba(31, 42, 56, .11);
  --line-strong: rgba(31, 42, 56, .18);
  --line-glass: rgba(255, 255, 255, .62);
  --surface: rgba(255, 255, 255, .72);
  --surface-solid: #ffffff;
  --surface-muted: rgba(247, 250, 252, .92);
  --glass-subtle: rgba(255, 255, 255, .54);
  --glass-standard: rgba(255, 255, 255, .72);
  --glass-elevated: rgba(255, 255, 255, .86);
  --glass-blur-subtle: 12px;
  --glass-blur-regular: 22px;
  --glass-blur-elevated: 30px;
  --glass-blur-floating: 26px;
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .32);
  --glass-bg: rgba(255, 255, 255, .58);
  --glass-bg-strong: rgba(250, 253, 255, .82);
  --glass-bg-control: rgba(255, 255, 255, .7);
  --glass-bg-modal: rgba(250, 253, 255, .9);
  --glass-border: rgba(255, 255, 255, .7);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .88);
  --glass-shadow: 0 22px 62px rgba(25, 35, 49, .12);
  --glass-blur: 24px;
  --blue: #007aff;
  --blue-dark: #0057c2;
  --blue-soft: rgba(0, 122, 255, .12);
  --teal: #00a7b5;
  --teal-dark: #087d8a;
  --green: #248a63;
  --amber: #e08700;
  --red: #c13a4a;
  --violet: #5f6fd6;
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, .05);
  --shadow-sm: 0 10px 26px rgba(25, 35, 49, .075);
  --shadow-md: 0 18px 48px rgba(25, 35, 49, .11);
  --shadow: 0 28px 86px rgba(25, 35, 49, .14);
  --shadow-float: 0 22px 60px rgba(25, 35, 49, .16);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .78);
  --blur-subtle: 12px;
  --blur-standard: 20px;
  --blur-elevated: 28px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-panel: 24px;
  --radius-pill: 999px;
  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --tracking-display: -0.022em;
  --tracking-heading: -0.017em;
  --tracking-subheading: -0.01em;
  --type-display: 3.05rem;
  --type-h1: 3.2rem;
  --type-h2: 2.55rem;
  --type-h3: 1.2rem;
  --type-body-lg: 1.08rem;
  --type-body: 1rem;
  --type-small: .875rem;
  --type-caption: .76rem;
  --text-xs: .74rem;
  --text-sm: .82rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.35rem;
  --heading-sm: 1.85rem;
  --heading-md: 2.35rem;
  --heading-lg: 3.2rem;
  --line-tight: 1.08;
  --line-normal: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;
  --weight-heavy: 700;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --container-max: 1440px;
  --container-pad-desktop: 32px;
  --container-pad-tablet: 24px;
  --container-pad-mobile: 16px;
  --duration-fast: 150ms;
  --duration-normal: 260ms;
  --duration-slow: 420ms;
  --motion-fast: 150ms;
  --motion-base: 260ms;
  --motion-slow: 420ms;
  --easing-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-standard: var(--easing-standard);
  --ease-emphasized: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Header reference menu ---------- */

.nav-more {
  position: relative;
}

.nav-more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: rgba(39, 49, 59, .72);
  cursor: pointer;
  font-size: .875rem;
  font-weight: var(--weight-bold);
  list-style: none;
  white-space: nowrap;
}

.nav-more summary::-webkit-details-marker {
  display: none;
}

.nav-more summary svg {
  width: 15px;
  height: 15px;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.nav-more[open] summary svg {
  transform: rotate(180deg);
}

.nav-more summary:hover,
.nav-more summary.active,
.nav-more[open] summary {
  background: rgba(255, 255, 255, .58);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}

.nav-more-menu {
  position: absolute;
  z-index: 8;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 196px;
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(31, 42, 56, .1);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 42px rgba(25, 35, 49, .16), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.nav-more-menu a {
  min-height: 36px;
  padding: 0 10px;
  white-space: nowrap;
}

@media (max-width: 1320px) {
  .topbar.nav-open .nav-more {
    min-width: 0;
  }

  .topbar.nav-open .nav-more summary {
    width: 100%;
    justify-content: space-between;
  }

  .topbar.nav-open .nav-more-menu {
    position: static;
    min-width: 0;
    margin-top: 6px;
    border-color: rgba(31, 42, 56, .08);
    background: rgba(255, 255, 255, .58);
    box-shadow: none;
  }
}

/* ---------- Admin dashboard ---------- */

.admin-dashboard {
  display: grid;
  gap: 18px;
}

.admin-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 4px;
}

.admin-toolbar h2 {
  margin: 5px 0 0;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.05;
}

.admin-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-search {
  min-width: min(340px, 100%);
  height: 52px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-soft);
}

.admin-search svg {
  width: 19px;
  height: 19px;
  color: var(--muted);
}

.admin-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--text);
}

.admin-status {
  margin: 0;
  min-height: 22px;
  color: var(--muted);
  font-weight: 700;
}

.admin-status[data-type="error"] {
  color: var(--danger);
}

.admin-status[data-type="warning"] {
  color: #8a5a00;
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  gap: 18px;
  align-items: start;
}

.admin-panel {
  min-width: 0;
}

.admin-panel-wide {
  grid-column: 1 / -1;
}

.admin-panel .panel-heading small {
  color: var(--muted);
  font-weight: 800;
}

.admin-table-wrap {
  overflow: auto;
  max-width: 100%;
  border-top: 1px solid var(--border);
}

.admin-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table th,
.admin-table td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(195, 207, 219, .72);
  vertical-align: middle;
}

.admin-table th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .02em;
  background: rgba(248, 251, 253, .76);
}

.admin-table td:first-child {
  font-weight: 800;
  color: var(--text);
}

.admin-table tr.is-verified td:first-child::after {
  content: "подтвержден";
  display: inline-flex;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(29, 128, 103, .12);
  color: #176a56;
  font-size: 11px;
  font-weight: 900;
}

.admin-event-list,
.admin-demo-list {
  display: grid;
  gap: 10px;
}

.admin-event {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(195, 207, 219, .72);
  border-radius: 16px;
  background: rgba(255, 255, 255, .68);
}

.admin-event-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--primary);
  background: rgba(9, 112, 200, .1);
}

.admin-event strong,
.admin-demo-top strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.admin-event span,
.admin-demo-top span,
.admin-demo-card p,
.admin-system-list dt {
  color: var(--muted);
}

.admin-event p,
.admin-demo-card p {
  margin: 4px 0 0;
  line-height: 1.45;
}

.admin-demo-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(195, 207, 219, .72);
  border-radius: 16px;
  background: rgba(255, 255, 255, .68);
}

.admin-demo-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.admin-demo-card a {
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
}

.admin-demo-card a:hover {
  text-decoration: underline;
}

.admin-demo-message {
  color: var(--text) !important;
}

.admin-system-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.admin-system-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(195, 207, 219, .62);
}

.admin-system-list div:last-child {
  border-bottom: 0;
}

.admin-system-list dt,
.admin-system-list dd {
  margin: 0;
}

.admin-system-list dd {
  color: var(--text);
  font-weight: 900;
}

.admin-access-card code,
.admin-access-card p {
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .admin-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .admin-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-toolbar-actions,
  .admin-search,
  .admin-toolbar-actions .btn {
    width: 100%;
  }

  .admin-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-demo-top,
  .admin-system-list div {
    grid-template-columns: 1fr;
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .admin-metric-grid {
    grid-template-columns: 1fr;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

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

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(90deg, rgba(20, 26, 32, .045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(20, 26, 32, .045) 1px, transparent 1px),
    linear-gradient(160deg, #fbfdff 0%, #f2f6fa 44%, #eef4f8 100%);
  background-size: 44px 44px, 44px 44px, auto;
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background:
    linear-gradient(120deg, rgba(0, 122, 255, .1), transparent 28%),
    linear-gradient(260deg, rgba(0, 167, 181, .1), transparent 34%),
    linear-gradient(0deg, rgba(90, 140, 200, .06), transparent 42%);
  animation: ambientWash 18s ease-in-out infinite alternate;
}

@keyframes ambientWash {
  from { transform: translate3d(-1.2%, -.8%, 0) scale(1); opacity: .42; }
  to { transform: translate3d(1.4%, 1%, 0) scale(1.03); opacity: .68; }
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

code,
.mono {
  font-family: var(--mono);
}

.container {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5000;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 0 30px;
  background: rgba(247, 250, 253, .82);
  border-bottom: 1px solid rgba(148, 163, 184, .62);
  backdrop-filter: blur(18px) saturate(1.2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.brand.mini {
  font-size: .92rem;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.brand.mini .brand-mark {
  width: 30px;
  height: 30px;
}

.brand-mark svg {
  width: 18px;
  height: 18px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, .58);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .55);
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  border-radius: 6px;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 500;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.nav-links a:hover,
.nav-links a.active {
  background: var(--surface-solid);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.mobile-menu-btn {
  display: none;
}

.auth-actions,
.hero-actions,
.button-row,
.map-toolbar,
.panel-heading,
.export-row {
  display: flex;
  align-items: center;
}

.auth-actions {
  position: relative;
  gap: 10px;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px 0 12px;
  border: 1px solid rgba(148, 163, 184, .68);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .7);
  max-width: 180px;
  overflow: hidden;
  color: var(--ink-2);
  font-size: .86rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.user-chip::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .58;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease, opacity .18s ease;
}

.user-chip:hover,
.user-chip:focus-visible,
.user-chip[aria-expanded="true"] {
  border-color: var(--blue);
  background: var(--surface-solid);
  box-shadow: 0 12px 28px rgba(13, 94, 175, .12);
  outline: 0;
}

.user-chip[aria-expanded="true"]::after {
  opacity: .9;
  transform: rotate(225deg) translate(-1px, -1px);
}

.account-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 2800;
  width: min(360px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .78);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 70px rgba(20, 26, 32, .2);
  backdrop-filter: blur(18px) saturate(1.15);
  transform-origin: top right;
  animation: accountMenuIn .16s ease-out;
}

.account-menu[hidden] {
  display: none !important;
}

.account-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 54px;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(148, 163, 184, .78);
  border-left: 1px solid rgba(148, 163, 184, .78);
  background: rgba(255, 255, 255, .96);
  transform: rotate(45deg);
}

.account-menu-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
}

.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(13, 94, 175, .24);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .76), transparent 30%),
    linear-gradient(145deg, var(--blue), var(--teal));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 12px 26px rgba(13, 94, 175, .18);
}

.account-identity {
  min-width: 0;
}

.account-identity strong,
.account-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-identity strong {
  color: var(--ink);
  font-size: .98rem;
  font-weight: 600;
}

.account-identity small {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
}

.account-menu-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 10px 10px;
}

.account-menu-stats span {
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid rgba(148, 163, 184, .58);
  border-radius: var(--radius);
  background: rgba(247, 250, 253, .74);
}

.account-menu-stats b,
.account-menu-stats small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-stats b {
  color: var(--ink);
  font-family: var(--mono);
  font-size: .92rem;
}

.account-menu-stats small {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 600;
}

.account-menu-list {
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, .58);
}

.account-menu-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: rgba(13, 94, 175, .08);
  color: var(--blue-dark);
  outline: 0;
  transform: translateX(2px);
}

.account-menu-item svg {
  width: 18px;
  height: 18px;
  color: var(--blue);
  justify-self: center;
}

.account-menu-item span {
  min-width: 0;
}

.account-menu-item strong,
.account-menu-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-item strong {
  font-size: .86rem;
  font-weight: 600;
}

.account-menu-item small {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 500;
}

.account-menu-item.danger {
  color: var(--red);
}

.account-menu-item.danger svg,
.account-menu-item.danger small {
  color: var(--red);
}

.account-menu-item.danger:hover,
.account-menu-item.danger:focus-visible {
  background: rgba(185, 45, 54, .08);
}

.btn,
.icon-btn,
.mini-btn {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-solid);
  color: var(--ink);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, background-position .55s ease, box-shadow .18s ease;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  font-weight: 600;
}

.btn svg,
.mini-btn svg {
  width: 18px;
  height: 18px;
}

.btn.small {
  min-height: 44px;
  padding: 0 14px;
  font-size: .88rem;
}

.btn.primary {
  position: relative;
  overflow: hidden;
  border-color: var(--blue);
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .22) 20%, transparent 42%) -140% 0 / 220% 100% no-repeat,
    linear-gradient(135deg, #0d5eaf, #0b68c4 48%, #0c8177);
  color: #fff;
  box-shadow: 0 16px 34px rgba(13, 94, 175, .25);
}

.btn.primary:hover {
  background-position: 140% 0, 0 0;
  border-color: var(--blue-dark);
  box-shadow: 0 20px 42px rgba(13, 94, 175, .32);
}

.btn.primary.danger {
  border-color: var(--red);
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .2) 20%, transparent 42%) -140% 0 / 220% 100% no-repeat,
    linear-gradient(135deg, #b92d36, #8f1f28);
  box-shadow: 0 16px 34px rgba(185, 45, 54, .22);
}

.btn.primary.danger:hover {
  border-color: #8f1f28;
  box-shadow: 0 20px 42px rgba(185, 45, 54, .3);
}

.btn.primary span,
.btn.primary svg {
  position: relative;
  z-index: 1;
  color: currentColor;
}

.auth-form .btn span {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.register-submit {
  min-height: 54px;
  letter-spacing: 0;
}

.btn.secondary:hover,
.btn.ghost:hover,
.icon-btn:hover,
.mini-btn:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(13, 94, 175, .12);
}

.btn.full {
  width: 100%;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: .5;
  transform: none;
  box-shadow: none;
}

.icon-btn:disabled,
.mini-btn:disabled {
  cursor: not-allowed;
  opacity: .48;
  transform: none;
  box-shadow: none;
}

.btn:focus-visible,
.icon-btn:focus-visible,
.mini-btn:focus-visible,
.mini-link:focus-visible,
.nav-links a:focus-visible,
.examples button:focus-visible,
.recent-query:focus-visible,
.result-tabs button:focus-visible,
.collection-strip button:focus-visible,
.footer-links a:focus-visible {
  outline: 3px solid rgba(13, 94, 175, .32);
  outline-offset: 2px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

.topbar > .mobile-menu-btn {
  display: none;
}

.icon-btn.subtle {
  width: 44px;
  height: 44px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.mini-btn,
.mini-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  font-size: .78rem;
  font-weight: 600;
}

.mini-link {
  border-radius: 6px;
  color: var(--blue-dark);
}

.section-shell {
  padding: 82px 0;
}

.section-shell.no-top {
  padding-top: 0;
}

.section-shell.compact {
  padding: 22px 0;
}

.hero {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(460px, 1.05fr);
  gap: 42px;
  align-items: center;
}

.hero-copy {
  max-width: 680px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--teal);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.eyebrow span {
  width: 30px;
  height: 2px;
  background: currentColor;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  max-width: 900px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

h1 {
  margin-bottom: 20px;
  font-size: 4.9rem;
  line-height: .96;
}

h2 {
  margin-bottom: 14px;
  font-size: 3.05rem;
  line-height: 1;
}

h3 {
  margin-bottom: 8px;
  font-size: 1.06rem;
}

.lead,
.section-head p,
.muted,
.modal-sub {
  color: var(--muted);
}

.lead {
  max-width: 660px;
  margin-bottom: 28px;
  font-size: 1.11rem;
  line-height: 1.72;
  overflow-wrap: anywhere;
}

.hero-actions {
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 640px;
}

.trust-row div,
.metric-rack div,
.stat-box {
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .7);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .62);
  box-shadow: var(--shadow-sm);
}

.trust-row strong,
.metric-rack strong,
.stat-box strong {
  display: block;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.55rem;
  line-height: 1;
}

.trust-row span,
.metric-rack span,
.stat-label {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
}

.hero-visual,
.query-panel,
.map-panel,
.account-guest,
.account-block,
.feature-card,
.doc-card,
.code-block,
.cta-panel {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, .76);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.hero-visual {
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.hero-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  z-index: 6;
  height: 180px;
  pointer-events: none;
  opacity: .32;
  background: linear-gradient(180deg, transparent, rgba(127, 240, 201, .38), transparent);
  transform: translateY(-120%);
  animation: mapScan 7.5s ease-in-out infinite;
  mix-blend-mode: screen;
}

.hero-visual-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .74rem;
  font-weight: 500;
}

.window-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}

.window-dot:nth-child(1) {
  background: var(--red);
}

.window-dot:nth-child(2) {
  background: var(--amber);
}

.window-dot:nth-child(3) {
  background: var(--green);
}

.hero-map-frame {
  position: relative;
  min-height: 420px;
  overflow: hidden;
}

.visual-map,
#map,
.account-map {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #dfe9df;
  contain: layout paint;
  overflow: hidden;
}

.visual-map {
  height: 420px;
}

.leaflet-control-attribution {
  display: block !important;
  padding: 3px 7px !important;
  border: 1px solid rgba(148, 163, 184, .72);
  border-radius: 6px;
  background: rgba(255, 255, 255, .9) !important;
  color: var(--ink-2) !important;
  font-size: 10px;
  font-weight: 500;
  backdrop-filter: blur(10px);
}

.leaflet-control-attribution a {
  color: var(--blue-dark) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.leaflet-control-zoom a {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  font-size: 22px !important;
}

.visual-map .leaflet-control-container {
  pointer-events: none;
}

.visual-map .leaflet-control-attribution {
  pointer-events: auto;
}

.route-card {
  position: absolute;
  z-index: 500;
  display: grid;
  gap: 2px;
  min-width: 168px;
  padding: 12px;
  border: 1px solid rgba(20, 26, 32, .16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-sm);
  animation: floatTag 5s ease-in-out infinite;
}

.route-card-a {
  left: 18px;
  top: 28px;
}

.route-card-b {
  right: 18px;
  bottom: 130px;
  animation-delay: -1.6s;
}

.route-card span {
  color: var(--teal);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
}

.route-card strong {
  font-size: .86rem;
}

.route-card em {
  color: var(--muted);
  font-style: normal;
  font-size: .78rem;
}

.hero-result-badge {
  position: absolute;
  right: 18px;
  bottom: 22px;
  z-index: 520;
  display: grid;
  gap: 3px;
  min-width: 210px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 149, 0, .42);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 40px rgba(255, 149, 0, .18);
}

.hero-result-badge span {
  color: var(--amber);
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 600;
}

.hero-result-badge strong {
  color: var(--ink);
  font-size: .92rem;
}

.hero-result-point {
  filter: drop-shadow(0 12px 18px rgba(255, 149, 0, .36));
}

.hero-result-zone {
  animation: heroZonePulse 3.2s ease-in-out infinite;
}

@keyframes heroZonePulse {
  0%, 100% { opacity: .64; }
  50% { opacity: .95; }
}

@keyframes floatTag {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes mapScan {
  0%, 18% { transform: translateY(-120%); opacity: 0; }
  28% { opacity: .32; }
  58% { transform: translateY(260%); opacity: .28; }
  74%, 100% { transform: translateY(260%); opacity: 0; }
}

.parse-console {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--line);
  background: rgba(20, 26, 32, .94);
  color: #f5f8fc;
}

.console-line {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.console-line span {
  color: #a9b4bd;
  font-size: .76rem;
  font-weight: 600;
}

.console-line code {
  overflow: hidden;
  color: #f5f8fc;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-line.ok code {
  color: #8fe0c1;
}

.marquee {
  overflow: hidden;
  border-block: 1px solid rgba(148, 163, 184, .72);
  color: rgba(20, 26, 32, .55);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 24s linear infinite;
}

.marquee span {
  padding: 16px 30px;
  font-family: var(--mono);
  font-size: .88rem;
  font-weight: 600;
  text-transform: uppercase;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.section-head {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

.section-head.left {
  margin-left: 0;
  text-align: left;
}

.premium-grid,
.feature-grid,
.docs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.feature-card,
.doc-card {
  position: relative;
  min-height: 230px;
  padding: 24px;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.feature-card::after,
.doc-card::after {
  content: "";
  position: absolute;
  inset: auto 18px 0 18px;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.feature-card:hover,
.doc-card:hover {
  border-color: rgba(13, 94, 175, .55);
  transform: translateY(-4px);
}

.feature-card:hover svg,
.doc-card:hover svg,
.use-case-card:hover svg {
  transform: translateY(-2px) scale(1.08) rotate(-3deg);
}

.feature-card:hover::after,
.doc-card:hover::after {
  transform: scaleX(1);
}

.feature-card svg,
.doc-card svg {
  width: 28px;
  height: 28px;
  color: var(--blue);
  transition: transform .22s ease, color .22s ease;
}

.feature-card h3,
.doc-card h3 {
  margin-top: 18px;
}

.feature-card p,
.doc-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: .93rem;
}

.doc-card code {
  display: block;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .75);
  border-radius: var(--radius);
  background: rgba(20, 26, 32, .94);
  color: #f5f8fc;
  font-size: .78rem;
  white-space: normal;
}

.faq-index {
  justify-content: center;
}

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

.faq-list details {
  border: 1px solid rgba(148, 163, 184, .72);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.faq-list details[open] {
  border-color: rgba(13, 94, 175, .42);
  box-shadow: var(--shadow-md);
}

.faq-list details:hover {
  border-color: rgba(13, 94, 175, .55);
}

.faq-list summary {
  display: grid;
  grid-template-columns: 1fr 28px;
  align-items: center;
  gap: 16px;
  min-height: 66px;
  padding: 18px 20px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(148, 163, 184, .74);
  border-radius: 50%;
  color: var(--blue);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.faq-list details[open] summary::after {
  content: "-";
  background: rgba(0, 164, 189, .1);
  border-color: rgba(0, 164, 189, .48);
}

.faq-list p {
  margin: -2px 20px 20px;
  color: var(--muted);
  font-size: .96rem;
}

.faq-preview-list {
  align-self: start;
}

.section-head .btn {
  margin-top: 16px;
}

.contact-email-card,
.request-form,
.audience-card,
.resource-card,
.timeline-list article,
.readiness-list div {
  border: 1px solid rgba(148, 163, 184, .72);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
}

.contact-email-card {
  align-self: start;
  max-width: 460px;
  padding: 24px;
}

.contact-email-card svg {
  width: 30px;
  height: 30px;
  color: var(--blue);
}

.contact-email-card strong,
.contact-email-card span {
  display: block;
}

.contact-email-card strong {
  margin-top: 16px;
  font-size: 1.08rem;
}

.contact-email-card span {
  margin-top: 6px;
  color: var(--blue);
  font-weight: 800;
}

.contact-email-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.request-form {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.form-grid {
  display: grid;
  gap: 14px;
}

.form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.request-form label {
  display: grid;
  gap: 8px;
}

.request-consent {
  align-items: start;
}

.request-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.request-status {
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
}

.request-status[data-state="success"] {
  color: var(--teal);
}

.request-status[data-state="error"] {
  color: var(--danger, #b92d36);
}

.compact-list {
  margin-top: 18px;
}

.timeline-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.timeline-list article {
  min-height: 230px;
  padding: 24px;
}

.timeline-list strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: rgba(13, 94, 175, .1);
  color: var(--blue);
  font-family: var(--mono);
}

.timeline-list h3 {
  margin: 18px 0 10px;
}

.timeline-list p {
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
}

.audience-grid,
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.audience-card,
.resource-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 260px;
  padding: 24px;
}

.audience-card svg {
  width: 30px;
  height: 30px;
  color: var(--blue);
}

.audience-card h2,
.resource-card h2 {
  margin: 0;
  font-size: 1.25rem;
}

.audience-card p,
.audience-card span,
.resource-card p {
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
}

.audience-card strong {
  margin-top: 6px;
  color: var(--ink);
  font-size: .9rem;
  text-transform: uppercase;
}

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

.readiness-list div {
  padding: 18px;
}

.readiness-list strong,
.readiness-list span {
  display: block;
}

.readiness-list span {
  margin-top: 6px;
  color: var(--muted);
  font-size: .92rem;
}

.resource-card > span {
  width: max-content;
  padding: 6px 10px;
  border: 1px solid rgba(13, 94, 175, .24);
  border-radius: 999px;
  background: rgba(13, 94, 175, .08);
  color: var(--blue);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.resource-card a {
  align-self: end;
  color: var(--blue);
  font-weight: 800;
}

.suite-section,
.docs-band {
  background: rgba(20, 26, 32, .055);
  border-block: 1px solid rgba(148, 163, 184, .44);
}

.suite-grid,
.split-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  gap: 34px;
  align-items: start;
}

.page-stack,
.example-list {
  display: grid;
  gap: 12px;
}

.page-link-card {
  display: grid;
  grid-template-columns: 42px 1fr 24px;
  gap: 14px;
  align-items: center;
  min-height: 92px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .76);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, border-color .18s ease;
}

.page-link-card:hover {
  border-color: var(--blue);
  transform: translateX(4px);
}

.page-link-card svg {
  color: var(--blue);
}

.page-link-card strong {
  display: block;
  font-size: 1rem;
}

.page-link-card span {
  display: block;
  color: var(--muted);
  font-size: .88rem;
}

.cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px;
}

.cta-panel p {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--muted);
}

.contact-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid rgba(148, 163, 184, .68);
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  color: var(--muted-strong);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
}

.contact-status svg {
  width: 19px;
  height: 19px;
  color: var(--blue-dark);
}

@media (max-width: 768px) {
  .contact-status {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    white-space: normal;
    text-align: center;
  }
}

.page-hero {
  padding-bottom: 48px;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
}

.hero-grid > *,
.page-hero-grid > *,
.split-grid > *,
.workbench-grid > *,
.account-layout > *,
.docs-grid > *,
.legal-layout > * {
  min-width: 0;
}

.metric-rack {
  display: grid;
  grid-template-columns: repeat(3, 140px);
  gap: 12px;
}

.workbench-grid {
  display: grid;
  grid-template-columns: minmax(330px, 430px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.query-panel {
  position: sticky;
  top: 92px;
  z-index: 2;
  padding: 22px;
}

.panel-kicker {
  margin-bottom: 18px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
}

.field-label,
.auth-form label > span,
.settings-grid span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .83rem;
  font-weight: 600;
}

textarea,
input,
select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

textarea {
  min-height: 154px;
  padding: 14px;
  resize: vertical;
  font-size: 1rem;
  line-height: 1.52;
}

input,
select {
  height: 42px;
  padding: 0 12px;
}

textarea:focus,
input:focus,
select:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(13, 94, 175, .13);
}

select {
  color: var(--ink);
  font-weight: 500;
}

.control-grid {
  display: grid;
  gap: 12px;
  margin: 16px 0 18px;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(20, 26, 32, .055);
}

.segmented label {
  position: relative;
}

.segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 6px;
  color: var(--muted);
  font-weight: 600;
}

.segmented input:checked + span {
  background: var(--surface-solid);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.segmented input:focus-visible + span {
  outline: 3px solid rgba(13, 94, 175, .28);
  outline-offset: 2px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 500;
}

.check-row input {
  width: 22px;
  height: 22px;
  accent-color: var(--blue);
}

.button-row,
.export-row {
  gap: 10px;
  flex-wrap: wrap;
}

.export-row {
  margin-top: 14px;
}

.examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.examples button,
.example-list button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.example-list button {
  min-height: 48px;
  border-radius: var(--radius);
  text-align: left;
}

.examples button:hover,
.example-list button:hover {
  border-color: var(--teal);
  color: var(--ink);
  transform: translateY(-1px);
}

.map-panel {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.map-toolbar {
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.map-title {
  display: block;
  font-weight: 600;
}

.map-subtitle {
  display: block;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 600;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(37, 116, 81, .12);
}

.status-pill[data-type="working"] .status-dot {
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(13, 94, 175, .12);
}

.status-pill[data-type="warning"] .status-dot {
  background: var(--amber);
  box-shadow: 0 0 0 5px rgba(255, 149, 0, .12);
}

.status-pill[data-type="error"] .status-dot {
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(185, 45, 54, .12);
}

#map {
  height: 540px;
}

.account-map {
  height: 370px;
}

.steps-panel {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
}

.panel-heading {
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}

.steps-list,
.item-list {
  display: grid;
  gap: 10px;
  max-height: 280px;
  overflow: auto;
  padding: 14px 16px;
}

.empty-state {
  color: var(--muted);
  font-size: .9rem;
}

.step-card,
.list-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .9);
  padding: 12px;
}

.step-card {
  display: grid;
  gap: 5px;
  animation: slideUp .22s ease both;
}

.step-top,
.list-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.step-title,
.list-title {
  font-weight: 600;
}

.step-status,
.list-meta {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500;
}

.step-status {
  white-space: nowrap;
}

.step-meta {
  color: var(--muted);
  font-size: .84rem;
}

.coords {
  color: var(--blue-dark);
  font-family: var(--mono);
  font-size: .82rem;
}

.step-card.done {
  border-color: rgba(37, 116, 81, .48);
}

.step-card.error {
  border-color: rgba(185, 45, 54, .56);
}

.step-card.final {
  border-color: var(--amber);
  box-shadow: inset 0 0 0 1px rgba(255, 149, 0, .18);
}

.premium-zone {
  filter: drop-shadow(0 14px 28px rgba(20, 26, 32, .14));
}

.premium-zone-halo {
  filter: blur(.2px);
}

.premium-zone-fill {
  mix-blend-mode: multiply;
}

.premium-zone-outline {
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .86));
}

.reference-line {
  filter: drop-shadow(0 2px 4px rgba(20, 26, 32, .12));
}

.reference-point,
.result-marker-ring,
.road-terminal {
  filter: drop-shadow(0 8px 16px rgba(20, 26, 32, .22));
}

.premium-road {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.premium-road-main {
  filter: drop-shadow(0 7px 14px rgba(13, 94, 175, .24));
}

.premium-road-flow {
  animation: routeFlow 1.35s linear infinite;
  stroke-linecap: round;
}

.road-terminal {
  stroke-linecap: round;
}

.result-marker {
  background: transparent;
  border: 0;
}

.result-marker .marker-core {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255, 255, 255, .98);
  border-radius: 50%;
  color: #fff;
  font-size: .76rem;
  font-weight: 600;
  background:
    radial-gradient(circle at 31% 22%, rgba(255, 255, 255, .62), transparent 28%),
    var(--marker-color);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, .74),
    0 14px 30px rgba(20, 26, 32, .28),
    inset 0 -7px 10px rgba(20, 26, 32, .18);
}

.result-marker .marker-core::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid color-mix(in srgb, var(--marker-color), transparent 45%);
  border-radius: inherit;
  opacity: .72;
}

.result-marker .marker-core b {
  position: relative;
  z-index: 1;
}

@keyframes routeFlow {
  to { stroke-dashoffset: -30; }
}

.account-guest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px;
}

.account-guest h2 {
  margin-bottom: 8px;
  font-size: 1.35rem;
  line-height: 1.15;
}

.account-guest p {
  margin-bottom: 0;
  color: var(--muted);
}

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

.account-block {
  overflow: hidden;
}

.account-map-block,
.settings-block {
  grid-column: 1 / -1;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 14px;
  padding: 16px;
}

.settings-block .muted {
  margin: 0;
  padding: 0 16px 16px;
  font-size: .9rem;
}

.list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.docs-index {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  gap: 10px;
}

.docs-index a {
  min-height: 46px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-solid);
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-sm);
}

.code-block {
  overflow: hidden;
  background: rgba(20, 26, 32, .96);
}

.code-block pre {
  margin: 0;
  padding: 24px;
  overflow: auto;
}

.code-block code {
  color: #f5f8fc;
  font-size: .92rem;
  line-height: 1.65;
}

.architecture {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr;
  align-items: center;
}

.arch-step {
  min-height: 170px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
}

.arch-step strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
}

.arch-step span {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.arch-step p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.arch-line {
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
}

.business-link {
  gap: 7px;
  min-height: 44px;
  padding-inline: 8px;
}

.business-link svg {
  width: 17px;
  height: 17px;
}

.process-grid,
.use-case-grid,
.pricing-grid,
.tech-grid,
.legal-layout,
.account-overview-grid {
  display: grid;
  gap: 16px;
}

.process-grid {
  grid-template-columns: repeat(4, 1fr);
}

.use-case-grid {
  grid-template-columns: repeat(3, 1fr);
}

.pricing-grid {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

.legal-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
}

.process-card,
.use-case-card,
.price-card,
.legal-card,
.timeline article,
.doc-patterns article {
  border: 1px solid rgba(148, 163, 184, .76);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.process-card {
  min-height: 218px;
  padding: 22px;
  overflow: hidden;
  position: relative;
}

.process-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
}

.process-card strong {
  display: inline-flex;
  margin-bottom: 34px;
  color: var(--blue-dark);
  font-family: var(--mono);
  font-size: .86rem;
}

.process-card p,
.use-case-card p,
.price-card p,
.legal-card p,
.timeline p,
.doc-patterns p {
  color: var(--muted);
}

.use-case-card {
  padding: 22px;
  min-height: 190px;
  transition: transform .18s ease, border-color .18s ease;
}

.use-case-card:hover {
  border-color: rgba(12, 129, 119, .55);
  transform: translateY(-3px);
}

.use-case-card svg {
  width: 24px;
  height: 24px;
  color: var(--teal);
  transition: transform .22s ease, color .22s ease;
}

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

.limitation-list div,
.map-note {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .76);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .76);
}

.limitation-list svg,
.map-note svg {
  width: 20px;
  height: 20px;
  color: var(--amber);
}

.limitation-list span,
.map-note span {
  color: var(--muted);
  font-weight: 500;
}

.trust-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 30px;
  border: 1px solid rgba(148, 163, 184, .76);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.trust-panel p {
  max-width: 840px;
  margin-bottom: 0;
  color: var(--muted);
}

.query-label-row,
.query-helper-row,
.map-action-row,
.collection-strip,
.account-tools,
.data-actions,
.footer-links {
  display: flex;
  align-items: center;
}

.query-label-row {
  justify-content: space-between;
  gap: 12px;
}

.query-counter {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.query-counter[data-warning="true"] {
  color: var(--amber);
}

.query-helper-row {
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
}

.query-helper-row .mini-btn {
  gap: 6px;
  white-space: nowrap;
}

.query-helper-row > span {
  min-width: 0;
  line-height: 1.35;
}

.demo-access-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(13, 94, 175, .18);
  border-radius: var(--radius);
  background: rgba(13, 94, 175, .07);
  color: var(--ink-2);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.42;
}

body.is-demo-locked .demo-access-note {
  border-color: rgba(187, 118, 47, .32);
  background: rgba(187, 118, 47, .1);
}

body.is-demo-quota-empty .demo-access-note {
  border-color: rgba(185, 45, 54, .32);
  background: rgba(185, 45, 54, .08);
  color: var(--red);
}

.advanced-settings {
  margin: 16px 0 18px;
  border: 1px solid rgba(148, 163, 184, .66);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .58);
}

.advanced-settings summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}

.advanced-settings summary svg {
  width: 18px;
  height: 18px;
  color: var(--blue);
}

.advanced-settings .control-grid {
  margin: 0;
  padding: 0 12px 14px;
}

.compact-settings {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.preview-control {
  position: relative;
}

.preview-control span::after {
  content: "Скоро";
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 7px;
  padding: 0 7px;
  border: 1px solid rgba(255, 149, 0, .28);
  border-radius: 999px;
  background: rgba(255, 149, 0, .09);
  color: var(--amber);
  font-size: .68rem;
  font-weight: 600;
}

.settings-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 9px var(--space-3);
  border: 1px dashed rgba(255, 149, 0, .38);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .58);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.42;
}

.panel-subsection {
  margin-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, .56);
  padding-top: 12px;
}

.small-heading {
  min-height: 30px;
  padding: 0;
  border: 0;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.save-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
}

.recent-list {
  display: grid;
  gap: 7px;
  max-height: 166px;
  overflow: auto;
}

.recent-query {
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .76);
  color: var(--ink-2);
  font-size: .8rem;
  font-weight: 500;
  text-align: left;
}

.recent-query:hover {
  border-color: var(--blue);
}

.compact-empty {
  font-size: .8rem;
}

.map-action-row {
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .62);
}

.map-action-row .mini-btn {
  gap: 6px;
}

.map-action-row select {
  width: auto;
  min-width: 118px;
  height: 44px;
  padding-inline: 9px;
  font-size: .78rem;
}

.result-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 16px 0;
  background: rgba(255, 255, 255, .72);
}

.result-tabs button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: rgba(255, 255, 255, .64);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}

.result-tabs button.active {
  border-color: var(--blue);
  background: var(--surface-solid);
  color: var(--ink);
}

.result-tab-panel {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
}

.result-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.result-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .64);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .78);
}

.result-field span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
}

.result-field strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: .95rem;
}

.source-json {
  max-height: 240px;
  margin: 0;
  overflow: auto;
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(20, 26, 32, .94);
  color: #f5f8fc;
  font-size: .78rem;
}

.warning-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-weight: 500;
}

.map-note {
  margin: 0;
  border-inline: 0;
  border-bottom: 0;
  border-radius: 0;
  background: rgba(20, 26, 32, .04);
}

.map-panel.map-fullscreen {
  position: fixed;
  inset: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  z-index: 2900;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  overflow: auto;
}

.map-panel.map-fullscreen #map {
  flex: 1;
  height: auto;
  min-height: min(360px, 52dvh);
}

.map-panel.map-fullscreen .map-action-row {
  flex: 0 0 auto;
  max-height: 34dvh;
  overflow-y: auto;
}

.has-map-fullscreen {
  overflow: hidden;
}

.account-tools {
  gap: 10px;
  padding: 12px 16px 0;
}

.account-tools input {
  min-width: 0;
}

.account-tools select {
  width: 150px;
}

.collection-strip {
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px 0;
}

.collection-strip button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}

.collection-strip button.active {
  border-color: var(--blue);
  background: rgba(13, 94, 175, .08);
  color: var(--blue-dark);
}

.collection-strip button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.account-overview-grid {
  grid-template-columns: repeat(3, 1fr);
  padding: 16px;
}

.data-actions {
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 16px 0;
}

.mini-btn.danger {
  border-color: rgba(185, 45, 54, .45);
  color: var(--red);
}

.price-card {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: 26px;
}

.price-card.highlighted {
  border-color: rgba(13, 94, 175, .55);
  box-shadow: 0 30px 80px rgba(13, 94, 175, .16);
}

.price-kicker {
  color: var(--teal);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.price-card h2 {
  margin-top: 10px;
  font-size: 2rem;
}

.price-value {
  display: block;
  margin: 4px 0 18px;
  font-family: var(--mono);
  font-size: 1.5rem;
}

.price-card ul {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.price-card li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-2);
  font-weight: 500;
}

.price-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

.price-card .btn {
  margin-top: auto;
}

.tech-grid {
  grid-template-columns: repeat(3, 1fr);
}

.tech-pill {
  min-height: 56px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .76);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 600;
}

.timeline {
  display: grid;
  gap: 12px;
}

.timeline article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
}

.timeline strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
}

.timeline h3,
.timeline p {
  grid-column: 2;
}

.doc-patterns {
  display: grid;
  gap: 12px;
}

.doc-patterns article {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.doc-patterns strong {
  color: var(--ink);
  font-weight: 600;
}

.doc-patterns code {
  display: block;
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(20, 26, 32, .94);
  color: #f5f8fc;
  white-space: normal;
}

.table-wrap {
  position: relative;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .76);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.table-wrap:focus-visible {
  outline: 3px solid rgba(13, 94, 175, .34);
  outline-offset: 3px;
}

.function-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.function-table th,
.function-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.function-table th {
  background: rgba(20, 26, 32, .06);
  color: var(--ink);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.function-table td:first-child {
  color: var(--blue-dark);
  font-family: var(--mono);
  font-weight: 600;
}

.legal-table-wrap {
  margin: 16px 0 18px;
  box-shadow: none;
}

.storage-table {
  min-width: 920px;
}

.storage-table td:first-child {
  font-size: .84rem;
}

.storage-table code {
  color: inherit;
  font: inherit;
}

@media (max-width: 768px) {
  .table-wrap {
    padding-top: 30px;
  }

  .table-wrap::before {
    content: "Прокрутите таблицу по горизонтали";
    position: absolute;
    top: 7px;
    right: 10px;
    z-index: 3;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
  }

  .table-wrap::after {
    content: "";
    position: sticky;
    right: 0;
    bottom: 0;
    display: block;
    width: 46px;
    height: 1px;
    margin-top: -1px;
    margin-left: auto;
    box-shadow: -24px 0 32px rgba(13, 94, 175, .18);
  }

  .function-table th:first-child,
  .function-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface-solid);
    box-shadow: 1px 0 0 var(--line);
  }

  .function-table th:first-child {
    background: #eef3f8;
  }
}

.legal-card {
  padding: 24px;
  overflow-wrap: anywhere;
}

.legal-card a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.legal-card h2 {
  font-size: 1.45rem;
  letter-spacing: 0;
}

.footer-links {
  gap: 12px;
  flex-wrap: wrap;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blue-dark);
  font-weight: 600;
}

.auth-consent {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .64);
  border-radius: var(--radius);
  background: rgba(247, 250, 253, .58);
  font-size: .82rem;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.auth-consent:hover,
.auth-consent:focus-within {
  border-color: rgba(13, 94, 175, .55);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 28px rgba(13, 94, 175, .1);
}

.auth-consent input {
  position: relative;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 2px solid rgba(111, 122, 131, .62);
  border-radius: 6px;
  background: #fff;
  appearance: none;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.auth-consent input:checked {
  border-color: var(--blue);
  background: linear-gradient(135deg, var(--blue), var(--teal));
  box-shadow: 0 8px 18px rgba(13, 94, 175, .2);
}

.auth-consent input:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(42deg);
}

.auth-consent input:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(13, 94, 175, .16);
}

.auth-consent span {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500;
}

.auth-consent a {
  color: var(--blue-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.static-card {
  pointer-events: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 3300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 26, 32, .52);
  backdrop-filter: blur(7px);
}

.modal-card {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  padding: 26px;
  background: var(--surface-solid);
  animation: modalIn .22s ease-out both;
}

.modal-card h2 {
  font-size: 1.9rem;
  margin-bottom: 8px;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.modal-sub {
  margin: 0;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 18px 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(20, 26, 32, .055);
}

.auth-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
}

.auth-tabs button.active {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.auth-form {
  display: grid;
  gap: 14px;
}

.save-form {
  display: grid;
  gap: 16px;
}

.save-form label {
  display: grid;
  gap: 7px;
  color: var(--ink-2);
  font-size: .9rem;
  font-weight: 600;
}

.save-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}

.save-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.confirm-modal-card {
  display: grid;
  gap: 12px;
}

.confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: rgba(13, 94, 175, .09);
  color: var(--blue-dark);
}

.confirm-icon.danger {
  background: rgba(185, 45, 54, .1);
  color: var(--red);
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.auth-message {
  min-height: 22px;
  margin: 14px 0 0;
  color: var(--red);
  font-size: .9rem;
  font-weight: 500;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 3400;
  max-width: min(390px, calc(100% - 36px));
  padding: 12px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg);
  color: var(--ink);
  box-shadow: var(--glass-shadow), var(--glass-edge);
  font-weight: 600;
}

.cookie-banner {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 16px;
  z-index: 3200;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  width: min(980px, calc(100vw - 32px));
  min-width: 0;
  max-width: none;
  margin: 0 auto;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .82);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 20px 58px rgba(20, 26, 32, .18);
  backdrop-filter: blur(18px) saturate(1.16);
  animation: cookieIn .28s ease-out both;
  transform: translateX(-50%);
}

.cookie-banner[hidden] {
  display: none !important;
}

.cookie-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cookie-copy strong {
  color: var(--ink);
  font-size: .94rem;
  font-weight: 600;
}

.cookie-copy p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.42;
}

.cookie-copy a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--blue-dark);
  font-size: .8rem;
  font-weight: 600;
}

.cookie-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.cookie-banner .btn.small {
  min-height: 40px;
  padding: 0 12px;
  font-size: .84rem;
  white-space: nowrap;
}

.cookie-settings-toggle {
  flex: 0 0 auto;
  min-width: 152px;
}

.cookie-settings-toggle .cookie-chevron {
  transition: transform var(--duration-fast) var(--easing-standard);
}

.cookie-banner.settings-open .cookie-settings-toggle .cookie-chevron {
  transform: rotate(180deg);
}

.cookie-settings-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(247, 250, 253, .74);
  overflow-wrap: anywhere;
}

.cookie-category {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: start;
  padding: 9px var(--space-3);
  border: 1px solid rgba(148, 163, 184, .52);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .66);
}

.cookie-category input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 2px 0 0;
}

.cookie-category.active {
  border-color: rgba(12, 129, 119, .34);
  background: rgba(238, 247, 243, .76);
}

.cookie-category span {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 600;
}

.cookie-category em {
  grid-column: 2;
  color: var(--muted);
  font-style: normal;
  font-size: .74rem;
  font-weight: 500;
}

.cookie-category.disabled {
  opacity: .65;
}

.cookie-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.cookie-save-choice {
  align-self: stretch;
}

.footer {
  padding: 24px 0;
  border-top: 1px solid rgba(148, 163, 184, .66);
  color: var(--muted);
  font-size: .86rem;
}

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

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .72s ease, transform .72s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
}

@keyframes accountMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.98);
  }
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
}

@keyframes cookieIn {
  from { opacity: 0; transform: translate(-50%, 14px) scale(.992); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

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

@media (max-width: 1080px) {
  h1 {
    font-size: 3.75rem;
  }

  h2 {
    font-size: 2.45rem;
  }

  .hero-grid,
  .suite-grid,
  .split-grid,
  .workbench-grid,
  .page-hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    max-width: 760px;
  }

  .query-panel {
    position: static;
  }

  .metric-rack {
    grid-template-columns: repeat(3, 1fr);
  }

  .premium-grid,
  .feature-grid,
  .docs-grid,
  .process-grid,
  .use-case-grid,
  .pricing-grid,
  .tech-grid,
  .timeline-list,
  .audience-grid,
  .resource-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .architecture {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .arch-line {
    width: 2px;
    height: 28px;
    margin-left: 24px;
  }
}

@media (max-width: 1120px) {
  .topbar {
    flex-wrap: wrap;
    min-height: auto;
    padding: 12px 18px;
    gap: 10px;
  }

  .brand {
    flex: 1;
  }

  .topbar > .mobile-menu-btn {
    display: inline-flex;
    order: 2;
  }

  .auth-actions {
    order: 3;
  }

  .nav-links {
    display: none;
    order: 4;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .topbar.nav-open .nav-links {
    display: flex;
  }
}

@media (min-width: 1121px) and (max-width: 1380px) {
  .nav-links a {
    min-height: 40px;
    padding: 0 8px;
    font-size: .8rem;
  }
}

@media (max-width: 1320px) {
  .topbar {
    flex-wrap: wrap;
    min-height: auto;
    padding: 12px 18px;
    gap: 10px;
  }

  .brand {
    flex: 1;
  }

  .topbar > .mobile-menu-btn {
    display: inline-flex;
    order: 2;
  }

  .auth-actions {
    order: 3;
  }

  .topbar .nav-links {
    display: none;
    order: 4;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    width: auto;
    max-height: min(420px, calc(100dvh - 96px));
    overflow-y: auto;
    justify-content: flex-start;
    border-radius: 16px;
    box-shadow: var(--shadow-md), var(--inner-highlight);
  }

  .topbar.nav-open .nav-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
    padding: 8px;
  }

  .topbar.nav-open {
    border-radius: 18px;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(100% - 24px, 1200px);
  }

  .topbar {
    flex-wrap: wrap;
    min-height: auto;
    padding: 12px;
    gap: 10px;
  }

  .brand {
    flex: 1;
  }

  .topbar > .mobile-menu-btn {
    display: inline-flex;
    order: 2;
  }

  .auth-actions {
    order: 3;
    gap: 6px;
  }

  .auth-actions .btn.small {
    display: none;
  }

  .nav-links {
    display: none;
    order: 4;
    width: 100%;
    max-height: min(260px, calc(100dvh - 86px));
    overflow-y: auto;
    justify-content: flex-start;
    align-items: stretch;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
  }

  .topbar.nav-open .nav-links {
    display: grid;
  }

  .nav-links a {
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 8px;
    text-align: center;
  }

  .form-grid.two,
  .timeline-list,
  .audience-grid,
  .resource-grid {
    grid-template-columns: 1fr;
  }

  .user-chip {
    max-width: 126px;
    min-height: 34px;
    padding-inline: 9px;
    font-size: .78rem;
  }

  .account-menu {
    position: fixed;
    top: 116px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
  }

  .account-menu::before {
    right: 84px;
  }

  .account-menu-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .section-shell {
    padding: 48px 0;
  }

  .hero {
    min-height: auto;
  }

  h1 {
    font-size: 2.18rem;
    line-height: 1.04;
  }

  h2 {
    font-size: 1.85rem;
  }

  .lead {
    font-size: 1rem;
  }

  .trust-row,
  .metric-rack,
  .premium-grid,
  .feature-grid,
  .docs-grid,
  .process-grid,
  .use-case-grid,
  .pricing-grid,
  .tech-grid,
  .account-overview-grid,
  .account-layout,
  .settings-grid,
  .docs-index,
  .compact-settings {
    grid-template-columns: 1fr;
  }

  .hero-map-frame,
  .visual-map {
    min-height: 330px;
    height: 330px;
  }

  .route-card {
    min-width: 142px;
    padding: 10px;
  }

  .route-card-b {
    right: 10px;
  }

  .route-card-a {
    left: 10px;
  }

  #map {
    height: 410px;
  }

  .map-toolbar,
  .map-action-row,
  .account-guest,
  .trust-panel,
  .cta-panel,
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .map-action-row .mini-btn,
  .map-action-row select,
  .account-tools,
  .account-tools select {
    width: 100%;
  }

  .account-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .result-tabs {
    overflow-x: auto;
  }

  .result-tabs button {
    flex: 0 0 auto;
  }

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

  .map-panel.map-fullscreen {
    inset: 0;
    border-radius: 0;
  }

  .cookie-banner {
    grid-template-columns: 1fr;
    left: 50%;
    right: auto;
    width: min(430px, calc(100vw - 20px));
    max-width: none;
    bottom: 10px;
    max-height: min(420px, calc(100vh - 20px));
    overflow: hidden;
  }

  .cookie-controls,
  .cookie-actions {
    justify-content: stretch;
  }

  .cookie-settings-toggle {
    flex: 1 1 100%;
  }

  .cookie-actions {
    width: 100%;
  }

  .cookie-actions .btn {
    flex: 1 1 160px;
    min-height: 44px;
  }

  .cookie-settings-panel {
    grid-template-columns: 1fr;
    max-height: 188px;
    overflow-y: auto;
  }

  .cookie-copy p {
    max-height: 4.4em;
    overflow-y: auto;
  }

  .cookie-copy a {
    min-height: 28px;
  }

  .cookie-save-choice {
    min-height: 44px;
  }

  .status-pill {
    white-space: normal;
  }

  .button-row .btn {
    flex: 1 1 150px;
  }

  .console-line {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* Premium polish layer */
:root {
  --surface: rgba(255, 255, 255, .78);
  --surface-solid: #fffdf8;
  --shadow-sm: 0 8px 22px rgba(31, 39, 48, .07);
  --shadow: 0 20px 60px rgba(31, 39, 48, .12);
}

body {
  background:
    linear-gradient(90deg, rgba(20, 26, 32, .026) 1px, transparent 1px),
    linear-gradient(180deg, rgba(20, 26, 32, .026) 1px, transparent 1px),
    linear-gradient(160deg, #fbfdff 0%, #f3f7fb 46%, #eef4f8 100%);
  background-size: 56px 56px, 56px 56px, auto;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body::before {
  opacity: .36;
  background:
    linear-gradient(118deg, rgba(0, 122, 255, .08), transparent 30%),
    linear-gradient(252deg, rgba(0, 167, 181, .08), transparent 36%),
    linear-gradient(0deg, rgba(90, 140, 200, .05), transparent 45%);
  animation-duration: 26s;
}

.scroll-progress {
  height: 2px;
}

.topbar {
  gap: 20px;
  min-height: 68px;
  padding: 0 32px;
  background: rgba(255, 255, 255, .72);
  border-bottom-color: rgba(148, 163, 184, .46);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .76), 0 14px 38px rgba(31, 39, 48, .045);
  backdrop-filter: blur(22px) saturate(1.12);
}

.brand {
  gap: 11px;
}

.brand-mark {
  background: linear-gradient(145deg, #10171d 0%, #172633 58%, #0d5eaf 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 24px rgba(20, 26, 32, .13);
}

.nav-links {
  gap: 3px;
  padding: 4px;
  border: 0;
  background: rgba(255, 255, 255, .44);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .44);
}

.nav-links a {
  min-height: 40px;
  padding: 0 12px;
  color: rgba(43, 57, 68, .76);
  font-size: .84rem;
  transition: color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.nav-links a:hover,
.nav-links a.active {
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(31, 39, 48, .07);
}

.auth-actions {
  gap: 8px;
}

.btn,
.icon-btn,
.mini-btn,
textarea,
input,
select {
  border-color: rgba(148, 163, 184, .62);
}

.btn,
.icon-btn,
.mini-btn {
  background: rgba(255, 255, 255, .84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76);
}

.btn.primary {
  border-color: rgba(13, 94, 175, .84);
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .24) 20%, transparent 42%) -140% 0 / 220% 100% no-repeat,
    linear-gradient(135deg, #0b559d 0%, #0d6dc9 48%, #0a8177 100%);
  box-shadow: 0 18px 38px rgba(13, 94, 175, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn.secondary:hover,
.btn.ghost:hover,
.icon-btn:hover,
.mini-btn:hover {
  box-shadow: 0 12px 28px rgba(13, 94, 175, .11), inset 0 1px 0 rgba(255, 255, 255, .78);
}

.section-shell {
  padding: 74px 0;
}

.hero {
  min-height: clamp(640px, calc(100vh - 108px), 760px);
  padding: 26px 0 42px;
}

.hero-grid {
  grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr);
  gap: 48px;
}

.hero-copy {
  max-width: 630px;
}

.eyebrow {
  margin-bottom: 16px;
  color: #0a746d;
  font-size: .72rem;
  letter-spacing: .09em;
}

h1 {
  max-width: 820px;
  margin-bottom: 18px;
  font-size: 3.86rem;
  line-height: 1.02;
}

h2 {
  max-width: 780px;
  font-size: 2.58rem;
  line-height: 1.07;
}

h3 {
  font-size: 1.02rem;
}

.lead {
  max-width: 640px;
  margin-bottom: 26px;
  font-size: 1.04rem;
  line-height: 1.68;
}

.hero-actions {
  margin-bottom: 28px;
}

.trust-row {
  gap: 10px;
}

.trust-row div,
.metric-rack div,
.stat-box {
  padding: 15px;
  border-color: rgba(148, 163, 184, .5);
  background: rgba(255, 255, 255, .54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
}

.trust-row strong,
.metric-rack strong,
.stat-box strong {
  font-size: 1.42rem;
}

.hero-visual,
.query-panel,
.map-panel,
.account-guest,
.account-block,
.feature-card,
.doc-card,
.code-block,
.cta-panel,
.table-wrap,
.legal-card,
.price-card,
.tech-pill,
.page-link-card,
.arch-step {
  border-color: rgba(148, 163, 184, .52);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 18px 52px rgba(31, 39, 48, .105), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.feature-card,
.doc-card,
.price-card,
.account-block,
.page-link-card,
.arch-step,
.tech-pill,
.legal-card {
  box-shadow: 0 12px 34px rgba(31, 39, 48, .075), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.feature-card::before,
.doc-card::before,
.price-card::before,
.account-block::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(13, 94, 175, .24), rgba(12, 129, 119, .2), transparent);
  opacity: 0;
  transition: opacity .22s ease;
}

.feature-card:hover::before,
.doc-card:hover::before,
.price-card:hover::before,
.account-block:hover::before {
  opacity: 1;
}

.feature-card,
.doc-card,
.price-card,
.account-block {
  position: relative;
}

.feature-card:hover,
.doc-card:hover,
.price-card:hover,
.page-link-card:hover {
  box-shadow: 0 18px 48px rgba(31, 39, 48, .11), inset 0 1px 0 rgba(255, 255, 255, .78);
}

.hero-visual {
  box-shadow: 0 24px 70px rgba(31, 39, 48, .14), inset 0 1px 0 rgba(255, 255, 255, .76);
  animation: productFloat 9s ease-in-out infinite;
}

.hero-visual-top {
  min-height: 44px;
  background: rgba(255, 255, 255, .64);
  border-bottom-color: rgba(148, 163, 184, .48);
}

.hero-map-frame::before,
.map-panel::before,
.account-map-block::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 450;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 20%),
    linear-gradient(90deg, rgba(13, 94, 175, .08), transparent 25%, transparent 75%, rgba(12, 129, 119, .06));
  mix-blend-mode: soft-light;
}

.map-panel::before,
.account-map-block::after {
  z-index: 3;
}

.visual-map .leaflet-tile,
#map .leaflet-tile,
.account-map .leaflet-tile {
  filter: saturate(.78) contrast(.97) brightness(1.035);
}

.leaflet-control-attribution {
  opacity: .72;
  padding: 2px 6px !important;
  border-color: rgba(148, 163, 184, .5);
  background: rgba(255, 255, 255, .72) !important;
  font-size: 10px;
  transition: opacity .16s ease, background .16s ease;
}

.leaflet-control-attribution:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .96) !important;
}

.leaflet-control-zoom {
  border: 1px solid rgba(148, 163, 184, .42) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(31, 39, 48, .12);
}

.leaflet-control-zoom a {
  border: 0 !important;
  background: rgba(255, 255, 255, .9) !important;
  color: var(--ink) !important;
}

.hero-reference-line-shadow,
.hero-reference-line {
  filter: drop-shadow(0 7px 13px rgba(31, 39, 48, .2));
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-reference-line {
  animation: routeFlow 1.6s linear infinite;
}

.route-card {
  min-width: 176px;
  padding: 13px 14px;
  border-color: rgba(255, 255, 255, .74);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 42px rgba(31, 39, 48, .13), inset 0 1px 0 rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px) saturate(1.08);
}

.route-card span,
.hero-result-badge span {
  letter-spacing: .04em;
}

.route-card strong {
  font-size: .9rem;
}

.hero-result-badge {
  right: 20px;
  bottom: 20px;
  min-width: 224px;
  border-color: rgba(255, 149, 0, .52);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 20px 48px rgba(255, 149, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .82);
}

.hero-result-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 7px rgba(255, 149, 0, .16);
  animation: resultPulse 2.4s ease-in-out infinite;
}

.hero-result-point,
.hero-result-core {
  filter: drop-shadow(0 13px 22px rgba(255, 149, 0, .4));
}

.hero-result-zone {
  filter: drop-shadow(0 16px 28px rgba(255, 149, 0, .2));
}

.parse-console {
  background: linear-gradient(180deg, rgba(20, 26, 32, .98), rgba(17, 24, 30, .98));
}

.console-line code {
  font-size: .76rem;
}

.marquee {
  border-block-color: rgba(148, 163, 184, .46);
  color: rgba(20, 26, 32, .42);
}

.section-head {
  margin-bottom: 30px;
}

.premium-grid,
.feature-grid,
.docs-grid {
  gap: 14px;
}

.feature-card,
.doc-card {
  min-height: 218px;
  padding: 22px;
}

.feature-card p,
.doc-card p,
.page-link-card span,
.arch-step p,
.legal-card,
.price-card li {
  line-height: 1.58;
}

.page-hero {
  padding-bottom: 38px;
}

.page-hero-grid {
  gap: 24px;
}

.page-hero h1 {
  font-size: 3.28rem;
  line-height: 1.06;
}

.metric-rack {
  grid-template-columns: repeat(3, 128px);
  gap: 10px;
}

body[data-page="demo"] .page-hero {
  padding: 48px 0 18px;
}

body[data-page="demo"] .page-hero-grid {
  align-items: center;
}

body[data-page="demo"] .page-hero h1 {
  max-width: 680px;
  margin-bottom: 12px;
  font-size: 2.78rem;
  line-height: 1.08;
}

body[data-page="demo"] .page-hero .lead {
  max-width: 760px;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.62;
}

body[data-page="demo"] .page-hero .metric-rack {
  align-self: center;
}

body[data-page="demo"] .metric-rack div {
  min-height: 104px;
}

body[data-page="demo"] #workbench {
  padding-top: 10px;
}

.workbench-grid {
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: 18px;
}

.query-panel {
  top: 88px;
  padding: 20px;
}

.panel-kicker {
  margin-bottom: 14px;
  letter-spacing: .06em;
}

textarea {
  min-height: 142px;
  background: rgba(255, 255, 255, .84);
  box-shadow: inset 0 1px 2px rgba(20, 26, 32, .035);
}

textarea:focus,
input:focus,
select:focus {
  box-shadow: 0 0 0 4px rgba(13, 94, 175, .115), 0 10px 24px rgba(13, 94, 175, .07);
}

.segmented {
  border-color: rgba(148, 163, 184, .48);
  background: rgba(20, 26, 32, .04);
}

.segmented input:checked + span {
  box-shadow: 0 8px 18px rgba(31, 39, 48, .07), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.examples button,
.example-list button,
.collection-strip button,
.status-pill {
  background: rgba(255, 255, 255, .68);
}

.map-toolbar {
  min-height: 60px;
  background: rgba(255, 255, 255, .64);
  border-bottom-color: rgba(148, 163, 184, .46);
}

#map {
  height: 520px;
}

.map-action-row,
.result-tabs,
.result-tab-panel,
.steps-panel {
  background: rgba(255, 255, 255, .62);
}

.map-action-row {
  padding: 9px 14px;
}

.result-tabs {
  padding: 8px 14px 0;
}

.result-tabs button {
  min-height: 40px;
  border-color: rgba(148, 163, 184, .5);
  background: rgba(255, 255, 255, .55);
}

.result-tabs button.active {
  border-color: rgba(13, 94, 175, .66);
  background: rgba(255, 255, 255, .95);
}

.steps-list,
.item-list {
  max-height: 260px;
  padding: 12px 14px;
}

.step-card,
.list-item,
.result-field {
  border-color: rgba(148, 163, 184, .46);
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.step-card.final {
  background: rgba(255, 249, 239, .86);
}

.premium-zone {
  filter: drop-shadow(0 18px 30px rgba(31, 39, 48, .15));
}

.premium-zone-outline {
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .94)) drop-shadow(0 8px 16px rgba(255, 149, 0, .2));
}

.premium-road-main {
  filter: drop-shadow(0 8px 16px rgba(13, 94, 175, .3));
}

.premium-road-flow {
  animation-duration: 1.15s;
}

.result-marker .marker-core {
  width: 38px;
  height: 38px;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, .78),
    0 16px 34px rgba(20, 26, 32, .3),
    inset 0 -8px 12px rgba(20, 26, 32, .18);
}

.result-marker .marker-core::after {
  inset: -11px;
  animation: resultPulse 2.8s ease-in-out infinite;
}

body[data-page="account"]:not(.is-authenticated) .page-hero {
  padding-bottom: 24px;
}

body[data-page="account"]:not(.is-authenticated) .page-hero .metric-rack {
  display: none;
}

body[data-page="account"]:not(.is-authenticated) .account-guest {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .38fr);
  align-items: center;
  padding: 26px;
  overflow: hidden;
}

body[data-page="account"]:not(.is-authenticated) .account-guest::after {
  content: "";
  display: block;
  min-height: 168px;
  border: 1px solid rgba(148, 163, 184, .42);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(13, 94, 175, .74), rgba(12, 129, 119, .74)) 20px 22px / 64px 9px no-repeat,
    linear-gradient(90deg, rgba(20, 26, 32, .18), rgba(20, 26, 32, .07)) 20px 52px / 76% 10px no-repeat,
    linear-gradient(90deg, rgba(20, 26, 32, .14), rgba(20, 26, 32, .05)) 20px 76px / 58% 10px no-repeat,
    linear-gradient(90deg, rgba(255, 149, 0, .3), rgba(255, 149, 0, .08)) 20px 118px / 86% 12px no-repeat,
    linear-gradient(90deg, rgba(13, 94, 175, .22), rgba(12, 129, 119, .2)) 20px 142px / 64% 12px no-repeat,
    rgba(255, 255, 255, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 16px 38px rgba(31, 39, 48, .07);
  animation: panelBreathe 6s ease-in-out infinite;
}

.account-guest h2 {
  font-size: 1.42rem;
}

.account-overview-grid {
  gap: 10px;
}

.account-tools,
.collection-strip,
.data-actions {
  display: flex;
}

.account-tools {
  padding: 12px 14px 0;
}

.settings-grid {
  padding: 14px;
}

.settings-block .muted,
.data-block .muted {
  line-height: 1.62;
}

.auth-consent {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 11px;
  padding: 11px;
  background: rgba(255, 255, 255, .62);
}

.auth-consent input {
  width: 21px;
  min-height: 21px;
  height: 21px;
  margin-top: 2px;
  box-shadow: inset 0 1px 2px rgba(20, 26, 32, .08);
}

.auth-consent span {
  color: rgba(43, 57, 68, .86);
}

.cookie-banner {
  width: min(960px, calc(100vw - 32px));
  max-width: none;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  padding: 12px;
  border-color: rgba(148, 163, 184, .58);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 54px rgba(20, 26, 32, .16), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.cookie-copy p {
  line-height: 1.42;
}

.cookie-settings-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  background: rgba(247, 250, 253, .58);
}

.footer {
  border-top-color: rgba(148, 163, 184, .46);
  background: rgba(255, 255, 255, .34);
}

@keyframes productFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes panelBreathe {
  0%, 100% { opacity: .92; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes resultPulse {
  0%, 100% { opacity: .62; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@media (max-width: 1080px) {
  .topbar {
    padding: 12px 18px;
  }

  h1 {
    font-size: 3.02rem;
  }

  h2,
  .page-hero h1 {
    font-size: 2.24rem;
  }

  .hero {
    min-height: auto;
    padding: 44px 0;
  }

  .hero-grid,
  .suite-grid,
  .split-grid,
  .workbench-grid,
  .page-hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid,
  .workbench-grid {
    gap: 24px;
  }

  .hero-visual,
  .query-panel,
  .map-panel,
  .account-guest,
  .account-block {
    width: 100%;
    max-width: 100%;
  }

  body[data-page="demo"] .page-hero {
    padding-top: 40px;
  }

  body[data-page="demo"] .page-hero h1 {
    font-size: 2.32rem;
  }

  #map {
    height: 500px;
  }
}

@media (max-width: 760px) {
  body {
    background-size: 44px 44px, 44px 44px, auto;
  }

  .topbar {
    padding: 10px 12px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .section-shell {
    padding: 44px 0;
  }

  .hero {
    padding: 36px 0;
  }

  h1,
  .page-hero h1,
  body[data-page="demo"] .page-hero h1 {
    font-size: 1.94rem;
    line-height: 1.08;
  }

  h2 {
    font-size: 1.76rem;
  }

  .hero-grid,
  .suite-grid,
  .split-grid,
  .workbench-grid,
  .page-hero-grid,
  .premium-grid,
  .feature-grid,
  .docs-grid,
  .process-grid,
  .use-case-grid,
  .pricing-grid,
  .tech-grid,
  .account-overview-grid,
  .account-layout,
  .settings-grid,
  .docs-index,
  .compact-settings {
    grid-template-columns: 1fr;
  }

  .lead {
    font-size: .98rem;
    line-height: 1.62;
  }

  .metric-rack {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .trust-row div,
  .metric-rack div,
  .stat-box,
  .feature-card,
  .doc-card,
  .price-card,
  .account-block,
  .page-link-card,
  .arch-step,
  .legal-card {
    box-shadow: 0 8px 24px rgba(31, 39, 48, .07), inset 0 1px 0 rgba(255, 255, 255, .72);
  }

  .hero-visual {
    animation: none;
  }

  .route-card {
    min-width: 136px;
    padding: 9px 10px;
  }

  .route-card-b {
    bottom: 78px;
  }

  .hero-result-badge {
    left: 10px;
    right: 10px;
    bottom: 12px;
    min-width: 0;
  }

  .route-card-b {
    display: none;
  }

  body[data-page="demo"] .page-hero {
    padding: 34px 0 14px;
  }

  body[data-page="demo"] .metric-rack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="demo"] .metric-rack div {
    padding: 11px 9px;
  }

  body[data-page="demo"] .metric-rack strong {
    font-size: 1.04rem;
  }

  body[data-page="demo"] .metric-rack span {
    font-size: .68rem;
    line-height: 1.25;
  }

  body[data-page="demo"] #workbench {
    padding-top: 0;
  }

  #map {
    height: 430px;
  }

  .map-toolbar {
    min-height: auto;
    padding: 12px;
  }

  .query-helper-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .query-helper-row .mini-btn {
    width: 100%;
  }

  .query-helper-row > span {
    text-align: center;
  }

  .map-action-row,
  .result-tabs,
  .result-tab-panel,
  .steps-list,
  .item-list {
    padding-inline: 12px;
  }

  body[data-page="account"]:not(.is-authenticated) .account-guest {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  body[data-page="account"]:not(.is-authenticated) .account-guest::after {
    min-height: 132px;
  }

  .auth-consent {
    align-items: flex-start;
  }

  .cookie-banner {
    padding: 12px;
    gap: 10px;
  }
}

/* Final interaction and resilience pass */
:root {
  --color-primary: var(--blue);
  --color-secondary: var(--teal);
  --color-success: var(--green);
  --color-warning: var(--amber);
  --color-error: var(--red);
  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --motion-fast: 0ms;
  --motion-base: 0ms;
  --motion-slow: 0ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-emphasized: cubic-bezier(.16, 1, .3, 1);
}

.topbar,
.account-menu,
.hero-visual,
.query-panel,
.map-panel,
.account-guest,
.account-block,
.feature-card,
.doc-card,
.code-block,
.cta-panel,
.cookie-banner,
.route-card,
.modal-backdrop {
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.btn,
.icon-btn,
.mini-btn,
.nav-links a,
.account-menu-item,
textarea,
input,
select,
.segmented span,
.examples button,
.example-list button,
.result-tabs button,
.collection-strip button,
.page-link-card,
.feature-card,
.doc-card,
.price-card {
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--ease-standard);
}

.btn:active:not(:disabled),
.icon-btn:active:not(:disabled),
.mini-btn:active:not(:disabled),
.nav-links a:active,
.examples button:active,
.example-list button:active,
.result-tabs button:active,
.collection-strip button:active {
  transform: translateY(0) scale(.985);
}

.btn.is-loading {
  cursor: progress;
  opacity: .92;
}

.btn.is-loading::after {
  content: "";
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  border: 2px solid rgba(255, 255, 255, .48);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .72s linear infinite;
}

textarea:hover:not(:disabled),
input:hover:not(:disabled),
select:hover:not(:disabled) {
  border-color: rgba(13, 94, 175, .42);
  background: rgba(255, 255, 255, .98);
}

textarea:disabled,
input:disabled,
select:disabled {
  border-color: rgba(148, 163, 184, .34);
  background: rgba(236, 231, 220, .48);
  color: rgba(100, 113, 124, .72);
  cursor: not-allowed;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: rgba(185, 45, 54, .72);
  box-shadow: 0 0 0 4px rgba(185, 45, 54, .11);
}

.status-pill[data-type="ready"] {
  border-color: rgba(37, 116, 81, .28);
  color: var(--color-success);
}

.status-pill[data-type="working"] {
  border-color: rgba(13, 94, 175, .3);
  color: var(--color-primary);
}

.status-pill[data-type="warning"] {
  border-color: rgba(255, 149, 0, .34);
  color: #7a4a00;
}

.status-pill[data-type="error"] {
  border-color: rgba(185, 45, 54, .34);
  color: var(--color-error);
}

.empty-state {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-height: 136px;
  padding: 18px;
  border: 1px dashed rgba(148, 163, 184, .62);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(13, 94, 175, .045), transparent 35%),
    rgba(255, 255, 255, .58);
  color: var(--muted);
  line-height: 1.55;
}

.empty-state svg {
  width: 22px;
  height: 22px;
  color: var(--teal);
}

.empty-state strong {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
}

.empty-state span {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 600;
}

.compact-empty {
  min-height: 72px;
  padding: 12px;
}

.map-fallback {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  max-width: 520px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 149, 0, .42);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 42px rgba(31, 39, 48, .16), inset 0 1px 0 rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}

.map-fallback[hidden] {
  display: none !important;
}

.map-fallback svg {
  grid-row: span 2;
  width: 22px;
  height: 22px;
  color: var(--color-warning);
}

.map-fallback strong {
  color: var(--ink);
  font-size: .9rem;
  font-weight: 600;
}

.map-fallback span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.45;
}

.has-map-fallback {
  background:
    linear-gradient(135deg, rgba(255, 149, 0, .1), transparent 32%),
    #e7ece5;
}

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

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar {
    -webkit-backdrop-filter: blur(22px) saturate(1.12);
    backdrop-filter: blur(22px) saturate(1.12);
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar,
  .account-menu,
  .hero-visual,
  .query-panel,
  .map-panel,
  .account-guest,
  .account-block,
  .feature-card,
  .doc-card,
  .code-block,
  .cta-panel,
  .cookie-banner,
  .route-card,
  .modal-card,
  .map-fallback {
    background: #fffdf8;
  }

  .modal-backdrop {
    background: rgba(20, 26, 32, .64);
  }
}

@supports (height: 100svh) {
  .account-menu {
    max-height: calc(100svh - 128px);
  }

  .cookie-banner {
    max-height: min(420px, calc(100svh - 20px));
  }
}

@media (max-width: 760px) {
  .empty-state {
    min-height: 118px;
    padding: 15px;
  }

  .map-fallback {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
  }

  .cookie-banner {
    grid-template-columns: 1fr;
    width: min(430px, calc(100vw - 20px));
    max-height: min(420px, calc(100dvh - 20px));
    overflow: hidden;
  }

  .cookie-settings-panel {
    grid-template-columns: 1fr;
    max-height: 188px;
    overflow-y: auto;
  }
}

/* Auth modal sizing and consent alignment */
#authModal .modal-card {
  width: min(520px, 100%);
  height: min(720px, calc(100vh - 48px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

#authModal .auth-tabs {
  flex: 0 0 auto;
}

#authModal .modal-card h2 {
  padding-right: 56px;
}

#authModal .auth-form {
  min-height: 390px;
  align-content: start;
}

#authModal .auth-message {
  margin-top: auto;
}

.auth-consent {
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
}

.auth-consent input {
  width: 26px;
  min-height: 26px;
  height: 26px;
  margin: 0;
  justify-self: center;
  transform: translateY(1px);
  flex: 0 0 auto;
}

.auth-consent input:checked::after {
  left: 7px;
  top: 3px;
  width: 7px;
  height: 13px;
}

.auth-consent span {
  min-width: 0;
  line-height: 1.5;
}

.auth-consent a {
  position: relative;
  z-index: 1;
}

@supports (height: 100svh) {
  #authModal .modal-card {
    height: min(720px, calc(100svh - 48px));
    max-height: calc(100svh - 32px);
  }
}

@media (max-width: 760px) {
  #authModal.modal {
    padding: 12px;
  }

  #authModal .modal-card {
    width: 100%;
    height: min(720px, calc(100vh - 24px));
    max-height: calc(100vh - 24px);
    padding: 22px;
  }

  #authModal .modal-card h2 {
    font-size: 1.62rem;
    line-height: 1.12;
  }

  #authModal .auth-form {
    min-height: 410px;
  }

  .auth-consent {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 13px 14px;
  }
}

/* Auth tab transition polish */
.auth-consent input:checked,
.auth-consent:hover input:checked,
.auth-consent input:checked:hover,
.auth-consent input:checked:focus-visible {
  border-color: var(--blue);
  background: linear-gradient(135deg, var(--blue), var(--teal));
  box-shadow:
    0 8px 18px rgba(13, 94, 175, .2),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}

.auth-consent input:checked:focus-visible {
  box-shadow:
    0 0 0 4px rgba(13, 94, 175, .16),
    0 8px 18px rgba(13, 94, 175, .2),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}

#authModal .auth-tabs {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#authModal .auth-tabs::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  z-index: 0;
  width: calc((100% - 14px) / 2);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .96)),
    linear-gradient(135deg, rgba(13, 94, 175, .12), rgba(12, 129, 119, .1));
  box-shadow: 0 10px 24px rgba(31, 39, 48, .09), inset 0 1px 0 rgba(255, 255, 255, .88);
  transform: translateX(0);
  transition: transform .34s var(--ease-standard), box-shadow .34s var(--ease-standard);
}

#authModal .modal-card[data-auth-mode="register"] .auth-tabs::before {
  transform: translateX(calc(100% + 6px));
}

#authModal .auth-tabs button {
  position: relative;
  z-index: 1;
  background: transparent;
  box-shadow: none;
  transition: color .18s var(--ease-standard), transform .18s var(--ease-standard);
}

#authModal .auth-tabs button.active {
  background: transparent;
  box-shadow: none;
}

#authModal .auth-tabs button:not(.active):hover {
  color: var(--ink-2);
}

#authModal .auth-form:not([hidden]) {
  will-change: opacity, transform, filter;
}

#authModal .modal-card.auth-switching[data-auth-direction="forward"] .auth-form:not([hidden]) {
  animation: authFormForward .38s var(--ease-standard) both;
}

#authModal .modal-card.auth-switching[data-auth-direction="back"] .auth-form:not([hidden]) {
  animation: authFormBack .38s var(--ease-standard) both;
}

@keyframes authFormForward {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(18px, 0, 0) scale(.985);
  }
  70% {
    opacity: 1;
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes authFormBack {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(-18px, 0, 0) scale(.985);
  }
  70% {
    opacity: 1;
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Premium glass direction */
body {
  background:
    linear-gradient(90deg, rgba(16, 17, 20, .035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(16, 17, 20, .035) 1px, transparent 1px),
    radial-gradient(circle at 18% 4%, rgba(0, 122, 255, .13), transparent 34%),
    radial-gradient(circle at 84% 14%, rgba(0, 167, 181, .12), transparent 30%),
    linear-gradient(180deg, #fbfdff 0%, var(--bg) 42%, #eef5f8 100%);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
  color: var(--ink);
  font-weight: var(--weight-regular);
}

body::before {
  opacity: .72;
  background:
    radial-gradient(circle at 62% 10%, rgba(255, 255, 255, .92), transparent 28%),
    radial-gradient(circle at 18% 34%, rgba(0, 122, 255, .08), transparent 32%),
    radial-gradient(circle at 78% 62%, rgba(0, 167, 181, .08), transparent 34%);
  animation: ambientWash 24s var(--ease-emphasized) infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, .55) 50%, transparent 62%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .72), transparent 44%);
}

.scroll-progress {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  box-shadow: 0 0 18px rgba(0, 122, 255, .24);
  transition: transform 80ms linear;
}

.container {
  width: min(1220px, calc(100% - 48px));
}

.topbar {
  top: 10px;
  width: min(1360px, calc(100% - 28px));
  min-height: 64px;
  margin: 10px auto 0;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .64));
  box-shadow: 0 12px 38px rgba(25, 35, 49, .075), var(--inner-highlight);
  -webkit-backdrop-filter: blur(var(--blur-standard)) saturate(1.28);
  backdrop-filter: blur(var(--blur-standard)) saturate(1.28);
  transition: min-height var(--motion-base) var(--ease-standard), background var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}

.topbar.is-scrolled,
.topbar.nav-open {
  min-height: 58px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .74));
  border-color: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 52px rgba(25, 35, 49, .12), 0 0 0 1px rgba(31, 42, 56, .045), var(--inner-highlight);
}

.brand {
  font-weight: 600;
  letter-spacing: 0;
}

.brand-mark {
  border-radius: 12px;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, .28), transparent 34%),
    linear-gradient(145deg, #0d1724 0%, #132b41 52%, #0067d7 100%);
  box-shadow:
    0 12px 26px rgba(0, 74, 155, .18),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

.nav-links {
  border-color: rgba(31, 42, 56, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.nav-links a {
  min-height: 40px;
  border-radius: 10px;
  color: rgba(39, 49, 59, .72);
  font-size: .86rem;
  font-weight: 600;
}

.nav-links a:hover,
.nav-links a.active {
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(25, 35, 49, .08), inset 0 1px 0 rgba(255, 255, 255, .86);
}

.btn,
.icon-btn,
.mini-btn,
textarea,
input,
select {
  border-color: var(--line-strong);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.btn {
  font-weight: 600;
}

.btn.primary {
  border-color: rgba(0, 122, 255, .72);
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .26) 22%, transparent 44%) -150% 0 / 240% 100% no-repeat,
    linear-gradient(135deg, var(--blue) 0%, #006be6 54%, var(--teal) 100%);
  box-shadow: 0 18px 42px rgba(0, 122, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.btn.primary:hover {
  border-color: var(--blue-dark);
  box-shadow: 0 22px 54px rgba(0, 122, 255, .31), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.btn.secondary,
.btn.ghost,
.icon-btn,
.mini-btn {
  background: rgba(255, 255, 255, .76);
}

.btn.secondary:hover,
.btn.ghost:hover,
.icon-btn:hover,
.mini-btn:hover {
  border-color: rgba(0, 122, 255, .42);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 34px rgba(0, 122, 255, .1), var(--inner-highlight);
}

textarea:focus,
input:focus,
select:focus,
textarea:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 0;
  border-color: rgba(0, 122, 255, .72);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, .14), 0 12px 28px rgba(25, 35, 49, .08);
}

h1,
h2 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
}

h1 {
  font-size: 4.45rem;
  line-height: .98;
}

h2 {
  font-size: 3.2rem;
  line-height: 1;
}

h3 {
  color: var(--ink);
  font-weight: 600;
}

.lead,
.section-head p,
.modal-sub,
.muted {
  color: var(--muted);
}

.eyebrow,
.panel-kicker,
.field-label,
.small-heading {
  color: var(--teal-dark);
  font-weight: 600;
  letter-spacing: .055em;
}

.eyebrow span {
  background: linear-gradient(90deg, var(--blue), var(--teal));
}

.section-shell {
  padding: 92px 0;
}

.hero {
  min-height: calc(100svh - 84px);
  padding: 58px 0 86px;
}

.hero-grid {
  grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr);
  gap: 56px;
}

.hero-copy {
  padding-top: 18px;
}

.hero-copy .lead {
  max-width: 700px;
  font-size: 1.16rem;
  color: rgba(39, 49, 59, .74);
}

.hero-actions {
  margin-bottom: 0;
}

.hero-visual,
.query-panel,
.map-panel,
.account-guest,
.account-block,
.modal-card,
.cookie-banner,
.account-menu,
.route-card,
.hero-result-badge,
.map-fallback {
  border-color: rgba(255, 255, 255, .66);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .58));
  box-shadow: var(--shadow), var(--inner-highlight);
  -webkit-backdrop-filter: blur(var(--blur-standard)) saturate(1.22);
  backdrop-filter: blur(var(--blur-standard)) saturate(1.22);
}

.hero-visual,
.query-panel,
.map-panel,
.account-guest,
.account-block,
.modal-card,
.cookie-banner {
  border-radius: var(--radius-panel);
}

.hero-visual {
  overflow: hidden;
  transform-origin: 50% 60%;
  box-shadow: 0 34px 100px rgba(25, 35, 49, .16), 0 0 0 1px rgba(255, 255, 255, .52), var(--inner-highlight);
  opacity: .98;
}

.hero-visual.is-map-ready {
  animation: heroMaterialIn .72s var(--ease-emphasized) both;
}

.hero-visual::after {
  opacity: .18;
  background: linear-gradient(180deg, transparent, rgba(0, 167, 181, .34), transparent);
  animation: mapScan 8.5s var(--ease-emphasized) 1 .6s both;
}

.hero-visual-top,
.map-toolbar,
.map-action-row,
.result-tabs,
.result-tab-panel,
.steps-panel,
.map-note {
  border-color: rgba(31, 42, 56, .09);
  background: rgba(255, 255, 255, .68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.hero-map-frame {
  min-height: 444px;
}

.visual-map {
  height: 444px;
}

.visual-map .leaflet-tile,
#map .leaflet-tile,
.account-map .leaflet-tile {
  filter: saturate(.92) contrast(.98) brightness(1.03);
}

.leaflet-control-attribution {
  border-color: rgba(31, 42, 56, .1) !important;
  background: rgba(255, 255, 255, .86) !important;
  color: rgba(39, 49, 59, .74) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.16);
  backdrop-filter: blur(12px) saturate(1.16);
}

.leaflet-control-zoom a {
  border-color: rgba(31, 42, 56, .1) !important;
  background: rgba(255, 255, 255, .84) !important;
  color: var(--ink) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
  backdrop-filter: blur(14px) saturate(1.18);
}

.route-card,
.hero-result-badge {
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .74));
  box-shadow: 0 18px 44px rgba(25, 35, 49, .14), var(--inner-highlight);
  animation-duration: 7s;
}

.hero-result-badge {
  border-color: rgba(0, 122, 255, .22);
}

.parse-console {
  border-top-color: rgba(31, 42, 56, .08);
  background:
    linear-gradient(180deg, rgba(15, 23, 32, .9), rgba(7, 15, 24, .94));
}

.console-line {
  color: rgba(238, 246, 255, .86);
}

.console-line span {
  color: rgba(0, 167, 181, .9);
}

.marquee {
  border-color: rgba(31, 42, 56, .08);
  background: rgba(255, 255, 255, .44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
  max-width: 100%;
  overflow: hidden;
}

.feature-card,
.doc-card,
.process-card,
.use-case-card,
.price-card,
.stat-box,
.trust-row div,
.metric-rack div,
.legal-card,
.page-link-card,
.arch-step,
.table-wrap {
  border-color: rgba(31, 42, 56, .1);
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--shadow-sm), var(--inner-highlight);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.feature-card:hover,
.doc-card:hover,
.process-card:hover,
.use-case-card:hover,
.price-card:hover,
.page-link-card:hover {
  border-color: rgba(0, 122, 255, .22);
  box-shadow: 0 18px 44px rgba(25, 35, 49, .1), var(--inner-highlight);
  transform: translateY(-2px);
}

.feature-card svg,
.doc-card svg,
.use-case-card svg,
.page-link-card svg {
  color: var(--blue);
  stroke-width: 1.9;
}

.suite-section,
.docs-band {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(239, 246, 250, .58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76), inset 0 -1px 0 rgba(31, 42, 56, .05);
}

.trust-panel,
.cta-panel {
  border-color: rgba(255, 255, 255, .68);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(circle at 92% 8%, rgba(0, 122, 255, .14), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .66));
  box-shadow: var(--shadow-md), var(--inner-highlight);
  -webkit-backdrop-filter: blur(var(--blur-subtle)) saturate(1.12);
  backdrop-filter: blur(var(--blur-subtle)) saturate(1.12);
}

.page-hero {
  padding-top: 88px;
}

.page-hero .lead {
  color: rgba(39, 49, 59, .72);
}

.metric-rack div {
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .64));
}

.workbench-grid {
  grid-template-columns: minmax(320px, .9fr) minmax(560px, 1.8fr);
  gap: 28px;
  align-items: start;
}

.query-panel {
  top: 96px;
  padding: 24px;
}

.query-panel textarea,
.settings-grid,
.advanced-settings,
.examples button,
.recent-query,
.export-row .mini-btn,
.step-card,
.result-field,
.list-item,
.source-json,
.code-block,
.function-table,
.legal-card {
  background: rgba(255, 255, 255, .9);
}

.query-panel textarea {
  min-height: 230px;
  border-color: rgba(31, 42, 56, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.advanced-settings {
  border-color: rgba(31, 42, 56, .1);
  box-shadow: var(--shadow-xs), var(--inner-highlight);
}

.advanced-settings summary {
  color: var(--ink-2);
  font-weight: 600;
}

.advanced-settings summary svg {
  transition: transform var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard);
}

.advanced-settings[open] summary svg {
  color: var(--blue);
  transform: rotate(180deg);
}

.advanced-settings .control-grid {
  animation: settingsReveal .28s var(--ease-emphasized) both;
}

.segmented {
  position: relative;
  background: rgba(232, 239, 246, .74);
}

.segmented span {
  background: transparent;
}

.segmented input:checked + span {
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(25, 35, 49, .08), var(--inner-highlight);
}

.map-panel {
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(25, 35, 49, .13), var(--inner-highlight);
}

.map-panel::before {
  opacity: .42;
  background:
    radial-gradient(circle at 18% 10%, rgba(0, 122, 255, .12), transparent 34%),
    radial-gradient(circle at 78% 0%, rgba(0, 167, 181, .11), transparent 30%);
}

#map {
  height: clamp(520px, 54vh, 690px);
  background: #e8eef2;
}

.map-action-row {
  gap: 10px;
}

.map-action-row .mini-btn,
.result-tabs button,
.status-pill {
  border-radius: 12px;
}

.status-pill {
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--shadow-xs), var(--inner-highlight);
}

.status-dot {
  box-shadow: 0 0 0 5px rgba(36, 138, 99, .12);
}

.status-pill[data-type="working"] .status-dot {
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(0, 122, 255, .14);
  animation: statusPulse 1.25s var(--ease-standard) infinite;
}

.result-tabs {
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.result-tabs button {
  font-weight: 600;
}

.result-tabs button.active {
  border-color: rgba(0, 122, 255, .42);
  background: rgba(255, 255, 255, .98);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(0, 122, 255, .08), var(--inner-highlight);
}

.workbench.is-running .map-panel {
  box-shadow: 0 34px 100px rgba(0, 122, 255, .15), var(--inner-highlight);
}

.workbench.is-running .map-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 104px;
  z-index: 600;
  height: 160px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 122, 255, .12), transparent);
  animation: mapScan 2.8s var(--ease-emphasized) infinite;
}

.step-card,
.result-field,
.list-item {
  border-color: rgba(31, 42, 56, .1);
  box-shadow: var(--shadow-xs), var(--inner-highlight);
}

.step-card {
  animation: stepCardIn .26s var(--ease-emphasized) both;
}

.step-card.computing .step-status::before,
.btn.is-loading::after {
  box-shadow: 0 0 0 4px rgba(0, 122, 255, .12);
}

.step-card.final {
  border-color: rgba(0, 122, 255, .28);
  background:
    linear-gradient(135deg, rgba(0, 122, 255, .08), rgba(0, 167, 181, .06)),
    rgba(255, 255, 255, .94);
  box-shadow: 0 16px 38px rgba(0, 122, 255, .12), var(--inner-highlight);
}

.empty-state {
  border-color: rgba(31, 42, 56, .12);
  background:
    linear-gradient(135deg, rgba(0, 122, 255, .055), transparent 38%),
    rgba(255, 255, 255, .72);
}

.modal {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.modal-backdrop {
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 122, 255, .18), transparent 36%),
    rgba(16, 17, 20, .32);
}

.modal-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .78));
  box-shadow: var(--shadow-float), var(--inner-highlight);
}

#authModal .auth-tabs {
  border-color: rgba(31, 42, 56, .1);
  border-radius: 14px;
  background: rgba(231, 238, 246, .72);
}

#authModal .auth-tabs::before {
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
}

.auth-form label {
  color: var(--ink-2);
}

.auth-consent {
  border-color: rgba(31, 42, 56, .1);
  background: rgba(255, 255, 255, .72);
}

.cookie-banner {
  bottom: 20px;
  max-width: min(980px, calc(100vw - 40px));
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .82));
  box-shadow: 0 22px 68px rgba(25, 35, 49, .16), var(--inner-highlight);
}

.cookie-settings-panel {
  border-color: rgba(31, 42, 56, .09);
  background: rgba(241, 246, 250, .74);
}

.cookie-category {
  border-color: rgba(31, 42, 56, .1);
  background: rgba(255, 255, 255, .78);
}

.toast {
  border-color: rgba(255, 255, 255, .72);
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 48px rgba(25, 35, 49, .16), var(--glass-edge);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}

.toast:not([hidden]) {
  animation: toastIn .2s var(--ease-emphasized) both;
}

.account-menu {
  border-radius: 16px;
}

.account-menu::before {
  border-color: rgba(255, 255, 255, .68);
  background: rgba(255, 255, 255, .86);
}

.account-avatar {
  border-color: rgba(0, 122, 255, .2);
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .8), transparent 30%),
    linear-gradient(145deg, var(--blue), var(--teal));
}

.account-menu-stats span,
.settings-grid,
.data-block,
.result-tab-panel,
.steps-panel,
.source-json,
.code-block,
.table-wrap,
.legal-card {
  border-color: rgba(31, 42, 56, .1);
}

.docs-index a,
.collection-strip button,
.examples button,
.example-list button,
.recent-query {
  border-color: rgba(31, 42, 56, .1);
  background: rgba(255, 255, 255, .74);
}

.docs-index a:hover,
.collection-strip button:hover,
.examples button:hover,
.example-list button:hover,
.recent-query:hover {
  border-color: rgba(0, 122, 255, .28);
  background: rgba(255, 255, 255, .94);
}

.footer {
  border-top-color: rgba(31, 42, 56, .08);
  background: rgba(255, 255, 255, .44);
}

.reveal {
  transform: translateY(16px) scale(.992);
  transition: opacity var(--motion-slow) var(--ease-emphasized), transform var(--motion-slow) var(--ease-emphasized);
}

.reveal.visible {
  transform: translateY(0) scale(1);
}

@keyframes heroMaterialIn {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(18px) scale(.985);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes settingsReveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes stepCardIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.992);
  }
}

@keyframes statusPulse {
  50% {
    opacity: .72;
    transform: scale(.86);
  }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translate(-50%, 8px) scale(.985);
  }
}

@media (hover: hover) and (pointer: fine) {
  .btn.primary.magnet:hover,
  .hero-visual:hover {
    will-change: transform;
  }
}

@media (max-width: 1120px) {
  .topbar {
    width: min(960px, calc(100% - 24px));
    padding: 10px 12px;
  }

  h1,
  .page-hero h1,
  body[data-page="demo"] .page-hero h1 {
    font-size: 3rem;
    line-height: 1.02;
  }

  h2 {
    font-size: 2.35rem;
  }

  .topbar.nav-open {
    border-radius: 18px;
  }

  .topbar.nav-open .nav-links {
    background: rgba(255, 255, 255, .76);
    border-color: rgba(31, 42, 56, .08);
  }

  .topbar .nav-links {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    width: auto;
    max-height: min(420px, calc(100dvh - 96px));
    overflow-y: auto;
    border-radius: 16px;
    box-shadow: var(--shadow-md), var(--inner-highlight);
  }

  .topbar.nav-open .nav-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
    padding: 8px;
  }

  .hero {
    padding-top: 44px;
  }

  .hero-grid,
  .workbench-grid,
  .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero-visual {
    max-width: none;
  }

  #map {
    height: 520px;
  }
}

@media (min-width: 960px) and (max-width: 1120px) {
  body[data-page="demo"] .workbench-grid {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 22px;
  }

  body[data-page="demo"] .query-panel {
    position: sticky;
    top: 92px;
    padding: 18px;
  }

  body[data-page="demo"] .query-panel textarea {
    min-height: 190px;
  }

  body[data-page="demo"] .panel-subsection,
  body[data-page="demo"] .save-hint {
    font-size: .8rem;
  }
}

@media (max-width: 900px) {
  body[data-page="demo"] .page-hero {
    padding: 30px 0 16px;
  }

  body[data-page="demo"] .metric-rack {
    display: none;
  }

  body[data-page="demo"] .workbench-grid {
    row-gap: 14px;
  }

  body[data-page="demo"] .query-panel {
    display: contents;
  }

  body[data-page="demo"] .query-panel > .panel-kicker,
  body[data-page="demo"] .query-panel > .query-label-row,
  body[data-page="demo"] .query-panel > textarea,
  body[data-page="demo"] .query-panel > .query-helper-row,
  body[data-page="demo"] .query-panel > .demo-access-note,
  body[data-page="demo"] .query-panel > .button-row,
  body[data-page="demo"] .query-panel > .advanced-settings,
  body[data-page="demo"] .query-panel > .save-hint,
  body[data-page="demo"] .query-panel > .panel-subsection,
  body[data-page="demo"] .query-panel > .export-row {
    min-width: 0;
  }

  body[data-page="demo"] .query-panel > .panel-kicker {
    order: 1;
    margin: 0;
    padding: 14px 16px 0;
    border: 1px solid rgba(255, 255, 255, .66);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: rgba(255, 255, 255, .74);
    box-shadow: var(--inner-highlight);
  }

  body[data-page="demo"] .query-panel > .query-label-row {
    order: 2;
    padding: 8px 16px 0;
    border-inline: 1px solid rgba(255, 255, 255, .66);
    background: rgba(255, 255, 255, .74);
  }

  body[data-page="demo"] .query-panel > textarea {
    order: 3;
    height: 160px;
    min-height: 160px;
    border-radius: 0;
    border-inline-color: rgba(255, 255, 255, .66);
    border-top: 0;
    border-bottom-color: rgba(31, 42, 56, .1);
    background: rgba(255, 255, 255, .88);
  }

  body[data-page="demo"] .query-panel > .query-helper-row {
    order: 4;
    display: block;
    padding: 10px 16px 0;
    border-inline: 1px solid rgba(255, 255, 255, .66);
    background: rgba(255, 255, 255, .74);
  }

  body[data-page="demo"] .query-panel > .query-helper-row > span {
    display: none;
  }

  body[data-page="demo"] .query-panel > .query-helper-row .mini-btn {
    width: 100%;
  }

  body[data-page="demo"] .query-panel > .demo-access-note {
    order: 4;
    margin: 0;
    padding: 8px 16px 0;
    border-inline: 1px solid rgba(255, 255, 255, .66);
    border-block: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .74);
  }

  body[data-page="demo"] .query-panel > .button-row {
    order: 5;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 12px 16px 16px;
    border: 1px solid rgba(255, 255, 255, .66);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    background: rgba(255, 255, 255, .74);
    box-shadow: var(--shadow-sm), var(--inner-highlight);
  }

  body[data-page="demo"] #runBtn {
    grid-column: 1 / -1;
  }

  body[data-page="demo"] .map-panel {
    display: flex;
    flex-direction: column;
    order: 6;
  }

  body[data-page="demo"] .map-toolbar {
    order: 1;
  }

  body[data-page="demo"] #map {
    order: 2;
  }

  body[data-page="demo"] .map-action-row {
    order: 3;
  }

  body[data-page="demo"] .result-tabs {
    order: 4;
  }

  body[data-page="demo"] .result-tab-panel,
  body[data-page="demo"] .steps-panel {
    order: 5;
  }

  body[data-page="demo"] .map-note {
    order: 6;
  }

  body[data-page="demo"] .query-panel > .save-hint {
    order: 7;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(31, 42, 56, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .66);
  }

  body[data-page="demo"] .query-panel > .advanced-settings {
    order: 8;
    margin: 0;
  }

  body[data-page="demo"] .query-panel > .panel-subsection {
    order: 9;
    margin-top: 0;
    padding: 14px;
    border: 1px solid rgba(31, 42, 56, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .64);
  }

  body[data-page="demo"] .query-panel > .export-row {
    order: 11;
    margin-top: 0;
    padding: 10px 0;
  }
}

@media (max-width: 760px) {
  body {
    background-size: 42px 42px, 42px 42px, auto, auto, auto;
  }

  .container {
    width: min(100% - 24px, 680px);
  }

  .topbar {
    top: 6px;
    width: calc(100% - 16px);
    margin-top: 6px;
    border-radius: 16px;
    overflow: visible;
  }

  .section-shell {
    padding: 52px 0;
  }

  .hero {
    padding: 38px 0 56px;
  }

  h1,
  .page-hero h1,
  body[data-page="demo"] .page-hero h1 {
    font-size: 2.2rem;
    line-height: 1.08;
  }

  h2 {
    font-size: 2rem;
  }

  .hero-copy .lead,
  .lead {
    font-size: 1rem;
    line-height: 1.62;
  }

  .hero-map-frame,
  .visual-map {
    min-height: 340px;
    height: 340px;
  }

  .hero-visual,
  .query-panel,
  .map-panel,
  .account-guest,
  .account-block,
  .modal-card,
  .cookie-banner,
  .cta-panel,
  .trust-panel {
    border-radius: 16px;
  }

  .trust-panel,
  .cta-panel {
    padding: 22px 18px;
  }

  .trust-panel > *,
  .cta-panel > * {
    min-width: 0;
    max-width: 100%;
  }

  .query-panel {
    padding: 16px;
  }

  .query-panel textarea {
    min-height: 190px;
  }

  .map-toolbar,
  .map-action-row {
    align-items: stretch;
  }

  .map-action-row .mini-btn,
  .map-action-row select,
  .button-row .btn {
    min-height: 46px;
  }

  .map-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .map-action-row select {
    grid-column: 1 / -1;
  }

  .result-tabs {
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .result-tabs button {
    white-space: nowrap;
  }

  #map {
    height: min(470px, 58svh);
  }

  body[data-page="demo"] .workbench-grid {
    row-gap: 14px;
  }

  body[data-page="demo"] .page-hero {
    padding: 30px 0 16px;
  }

  body[data-page="demo"] .page-hero-grid {
    gap: 16px;
  }

  body[data-page="demo"] .page-hero .lead {
    margin-bottom: 0;
    font-size: .94rem;
    line-height: 1.52;
  }

  body[data-page="demo"] .metric-rack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="demo"] .metric-rack div {
    min-height: 74px;
    padding: 10px 8px;
  }

  body[data-page="demo"] .query-panel {
    display: contents;
  }

  body[data-page="demo"] .query-panel > .panel-kicker,
  body[data-page="demo"] .query-panel > .query-label-row,
  body[data-page="demo"] .query-panel > textarea,
  body[data-page="demo"] .query-panel > .query-helper-row,
  body[data-page="demo"] .query-panel > .demo-access-note,
  body[data-page="demo"] .query-panel > .button-row,
  body[data-page="demo"] .query-panel > .advanced-settings,
  body[data-page="demo"] .query-panel > .save-hint,
  body[data-page="demo"] .query-panel > .panel-subsection,
  body[data-page="demo"] .query-panel > .export-row {
    min-width: 0;
  }

  body[data-page="demo"] .query-panel > .panel-kicker {
    order: 1;
    margin: 0;
    padding: 14px 16px 0;
    border: 1px solid rgba(255, 255, 255, .66);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: rgba(255, 255, 255, .74);
    box-shadow: var(--inner-highlight);
  }

  body[data-page="demo"] .query-panel > .query-label-row {
    order: 2;
    padding: 8px 16px 0;
    border-inline: 1px solid rgba(255, 255, 255, .66);
    background: rgba(255, 255, 255, .74);
  }

  body[data-page="demo"] .query-panel > textarea {
    order: 3;
    height: 132px;
    min-height: 132px;
    border-radius: 0;
    border-inline-color: rgba(255, 255, 255, .66);
    border-top: 0;
    border-bottom-color: rgba(31, 42, 56, .1);
    background: rgba(255, 255, 255, .88);
  }

  body[data-page="demo"] .query-panel > .query-helper-row {
    order: 4;
    display: block;
    padding: 10px 16px 0;
    border-inline: 1px solid rgba(255, 255, 255, .66);
    background: rgba(255, 255, 255, .74);
  }

  body[data-page="demo"] .query-panel > .query-helper-row > span {
    display: none;
  }

  body[data-page="demo"] .query-panel > .query-helper-row .mini-btn {
    width: 100%;
  }

  body[data-page="demo"] .query-panel > .demo-access-note {
    order: 4;
    margin: 0;
    padding: 8px 16px 0;
    border-inline: 1px solid rgba(255, 255, 255, .66);
    border-block: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .74);
  }

  body[data-page="demo"] .query-panel > .button-row {
    order: 5;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 12px 16px 16px;
    border: 1px solid rgba(255, 255, 255, .66);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    background: rgba(255, 255, 255, .74);
    box-shadow: var(--shadow-sm), var(--inner-highlight);
  }

  body[data-page="demo"] #runBtn {
    grid-column: 1 / -1;
  }

  body[data-page="demo"] .map-panel {
    display: flex;
    flex-direction: column;
    order: 6;
  }

  body[data-page="demo"] .map-toolbar {
    order: 1;
  }

  body[data-page="demo"] #map {
    order: 2;
  }

  body[data-page="demo"] .map-action-row {
    order: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-page="demo"] .map-action-row .mini-btn {
    min-width: 0;
    padding-inline: 0;
  }

  body[data-page="demo"] .map-action-row .mini-btn span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body[data-page="demo"] .result-tabs {
    order: 4;
  }

  body[data-page="demo"] .result-tab-panel,
  body[data-page="demo"] .steps-panel {
    order: 5;
  }

  body[data-page="demo"] .map-note {
    order: 6;
  }

  body[data-page="demo"] .query-panel > .save-hint {
    order: 7;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(31, 42, 56, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .66);
  }

  body[data-page="demo"] .query-panel > .advanced-settings {
    order: 8;
    margin: 0;
  }

  body[data-page="demo"] .query-panel > .panel-subsection {
    order: 9;
    margin-top: 0;
    padding: 14px;
    border: 1px solid rgba(31, 42, 56, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .64);
  }

  body[data-page="demo"] .query-panel > .export-row {
    order: 11;
    margin-top: 0;
    padding: 10px 0;
  }

  .workbench.is-running .map-panel::after {
    top: 96px;
    height: 110px;
  }

  .cookie-banner {
    bottom: 10px;
    width: calc(100vw - 20px);
    max-height: min(360px, calc(100dvh - 20px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cookie-copy p {
    line-height: 1.45;
  }

  .cookie-settings-panel {
    max-height: 150px;
    overflow-y: auto;
  }

  #authModal .modal-card {
    padding: 20px;
  }
}

@media (max-width: 360px) {
  .container {
    width: calc(100% - 18px);
  }

  .topbar {
    width: calc(100% - 12px);
    padding: 8px 10px;
  }

  .brand {
    gap: 8px;
    font-size: .94rem;
  }

  .auth-actions {
    gap: 6px;
  }

  .btn.small {
    padding-inline: 11px;
  }

  .hero-map-frame,
  .visual-map {
    min-height: 310px;
    height: 310px;
  }

  .marquee-track {
    animation: none;
    transform: none;
  }

  .map-action-row {
    grid-template-columns: 1fr;
  }

  body[data-page="demo"] .map-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .result-tabs button {
    min-width: 0;
    min-height: 42px;
    padding-inline: 8px;
    white-space: normal;
    line-height: 1.18;
  }

  h1,
  .page-hero h1,
  body[data-page="demo"] .page-hero h1 {
    font-size: 1.86rem;
  }

  h2 {
    font-size: 1.78rem;
  }

  h1,
  h2,
  h3,
  p {
    max-width: 100%;
  }
}

@media (min-width: 1600px) {
  .container {
    width: min(1320px, calc(100% - 72px));
  }

  .hero-grid {
    grid-template-columns: minmax(0, .9fr) minmax(620px, 1.1fr);
  }
}

/* Liquid Glass system pass */
html {
  scroll-behavior: auto;
}

body {
  background:
    linear-gradient(90deg, rgba(16, 17, 20, .03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(16, 17, 20, .03) 1px, transparent 1px),
    radial-gradient(circle at 20% 10%, rgba(0, 122, 255, .11), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(0, 167, 181, .1), transparent 28%),
    linear-gradient(180deg, #fbfdff 0%, #f4f8fb 48%, #eef5f8 100%);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
}

body::before {
  opacity: .58;
  animation: none;
  transform: none;
}

.glass,
.glass-strong,
.glass-control,
.glass-modal {
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.24);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.24);
}

.glass {
  background: var(--glass-bg);
}

.glass-strong {
  background: var(--glass-bg-strong);
}

.glass-control {
  background: var(--glass-bg-control);
}

.glass-modal {
  background: var(--glass-bg-modal);
}

.container {
  width: min(var(--container-max), calc(100% - (var(--container-pad-desktop) * 2)));
}

.topbar {
  top: var(--space-3);
  width: min(var(--container-max), calc(100% - (var(--container-pad-desktop) * 2)));
  min-height: 64px;
  margin: var(--space-3) auto 0;
  padding: var(--space-2) var(--space-4);
  gap: var(--space-4);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(246, 251, 255, .66)),
    linear-gradient(135deg, rgba(0, 122, 255, .08), rgba(0, 167, 181, .05));
  box-shadow: 0 18px 46px rgba(25, 35, 49, .1), var(--glass-highlight);
  -webkit-backdrop-filter: blur(28px) saturate(1.28);
  backdrop-filter: blur(28px) saturate(1.28);
}

.topbar.is-scrolled,
.topbar.nav-open {
  min-height: 64px;
}

.brand,
.nav-links,
.auth-actions {
  align-items: center;
}

.nav-links {
  gap: var(--space-1);
  border-color: rgba(255, 255, 255, .55);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .34);
}

.nav-links a {
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  font-weight: var(--weight-bold);
}

.nav-links a:hover,
.nav-links a.active {
  background: rgba(255, 255, 255, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}

.auth-actions {
  gap: var(--space-2);
}

body.is-authenticated #openAccountBtn,
body.is-authenticated #logoutBtn {
  display: none;
}

.scroll-progress {
  width: 0;
  transition: none;
}

h1 {
  font-size: var(--type-h1);
  line-height: 1.03;
  letter-spacing: 0;
}

h2 {
  font-size: var(--type-h2);
  line-height: 1.06;
  letter-spacing: 0;
}

h3 {
  font-size: var(--type-h3);
  line-height: 1.25;
  letter-spacing: 0;
}

h1,
h2,
h3,
.section-head,
.page-hero-grid > *,
.hero-grid > *,
.split-grid > *,
.trust-panel > *,
.cta-panel > *,
.page-stack > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lead {
  font-size: var(--type-body-lg);
  line-height: 1.58;
}

.section-shell {
  padding: var(--space-16) 0;
}

.page-hero {
  padding: var(--space-16) 0 var(--space-10);
}

.page-hero-grid,
.split-grid,
.workbench-grid {
  gap: var(--space-8);
}

body[data-page="home"] .hero {
  min-height: auto;
  padding: var(--space-12) 0 var(--space-12);
}

.hero-grid {
  grid-template-columns: minmax(0, .94fr) minmax(520px, 1.06fr);
  gap: var(--space-12);
  align-items: center;
}

.hero-copy {
  padding-top: 0;
}

.hero h1 {
  max-width: 680px;
  font-size: var(--type-display);
  line-height: 1.02;
}

.hero-copy .lead {
  max-width: 640px;
  margin-top: var(--space-4);
}

.hero-actions {
  gap: var(--space-3);
  margin-top: var(--space-5);
  margin-bottom: 0;
}

.business-link {
  min-height: 44px;
}

.hero-visual {
  min-height: 0;
  border-radius: var(--radius-xl);
}

.hero-map-frame,
.visual-map {
  min-height: 400px;
  height: 400px;
}

.hero-map-frame,
.visual-map,
#map,
.account-map,
.leaflet-container {
  contain: paint;
  overflow: hidden !important;
}

.hero-visual::after,
.workbench.is-running .map-panel::after {
  display: none;
}

.map-panel::before {
  display: none !important;
}

.visual-map .leaflet-tile,
#map .leaflet-tile,
.account-map .leaflet-tile {
  filter: none;
  opacity: 1;
}

.marquee-track {
  animation: none;
  transform: none;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.marquee span {
  flex: 0 1 auto;
  padding-block: var(--space-3);
}

.btn,
.icon-btn,
.mini-btn,
.user-chip,
.nav-links a,
.examples button,
.example-list button,
.recent-query,
.collection-strip button,
.result-tabs button,
textarea,
input,
select,
.segmented span {
  border-radius: var(--radius-md);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}

.btn,
.icon-btn,
.mini-btn,
.user-chip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(246, 251, 255, .62)),
    linear-gradient(135deg, rgba(0, 122, 255, .08), rgba(0, 167, 181, .04));
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(25, 35, 49, .09), var(--glass-highlight);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

.btn {
  min-height: 46px;
  padding: 0 var(--space-5);
  font-weight: var(--weight-bold);
}

.btn.small,
.mini-btn,
.icon-btn {
  min-height: 44px;
}

.btn.primary {
  border-color: rgba(0, 122, 255, .42);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .42), transparent 34%),
    linear-gradient(180deg, rgba(0, 122, 255, .95), rgba(0, 94, 215, .92));
  color: #fff;
  box-shadow: 0 18px 42px rgba(0, 122, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .34);
}

.btn.secondary,
.btn.ghost,
.icon-btn,
.mini-btn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(246, 251, 255, .54)),
    linear-gradient(135deg, rgba(0, 122, 255, .06), rgba(0, 167, 181, .035));
}

.btn.ghost {
  background: rgba(255, 255, 255, .46);
}

.btn.primary:hover,
.btn.secondary:hover,
.btn.ghost:hover,
.icon-btn:hover,
.mini-btn:hover,
.user-chip:hover,
.user-chip:focus-visible {
  border-color: rgba(0, 122, 255, .34);
  background-color: rgba(255, 255, 255, .76);
}

.btn:disabled,
.icon-btn:disabled,
.mini-btn:disabled {
  opacity: .62;
  color: rgba(39, 49, 59, .62);
}

textarea,
input,
select {
  min-height: 48px;
  border: 1px solid rgba(31, 42, 56, .14);
  background: rgba(255, 255, 255, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

textarea:focus,
input:focus,
select:focus,
textarea:focus-visible,
input:focus-visible,
select:focus-visible {
  border-color: rgba(0, 122, 255, .64);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.auth-form,
.save-form {
  gap: var(--space-4);
}

.auth-form label,
.save-form label {
  gap: var(--space-2);
  font-size: var(--type-small);
  font-weight: var(--weight-bold);
}

.feature-card,
.doc-card,
.process-card,
.use-case-card,
.price-card,
.page-link-card,
.stat-box,
.trust-row div,
.metric-rack div,
.legal-card,
.table-wrap,
.account-block,
.account-guest,
.query-panel,
.map-panel,
.modal-card,
.cookie-banner,
.account-menu,
.code-block {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(180deg, var(--glass-bg-strong), rgba(245, 250, 253, .68)),
    linear-gradient(135deg, rgba(0, 122, 255, .055), rgba(0, 167, 181, .04));
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.18);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.18);
}

.feature-card:hover,
.doc-card:hover,
.process-card:hover,
.use-case-card:hover,
.price-card:hover,
.page-link-card:hover,
.account-menu-item:hover,
.account-menu-item:focus-visible,
.examples button:hover,
.example-list button:hover,
.recent-query:hover,
.collection-strip button:hover {
  border-color: rgba(0, 122, 255, .22);
  background-color: rgba(255, 255, 255, .84);
  transform: translateY(-1px);
}

.workbench-grid {
  grid-template-columns: minmax(340px, .9fr) minmax(560px, 1.65fr);
  gap: var(--space-8);
}

.query-panel {
  padding: var(--space-6);
}

.map-panel {
  padding: 0;
}

.query-panel textarea {
  min-height: 220px;
}

#map {
  height: 520px;
}

.map-toolbar,
.map-action-row,
.result-tabs,
.result-tab-panel,
.steps-panel,
.map-note {
  background: rgba(255, 255, 255, .66);
  border-color: rgba(255, 255, 255, .62);
}

.modal {
  padding: var(--space-6);
}

#authModal .modal-card {
  width: min(480px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100dvh - 48px);
  padding: var(--space-6);
  overflow-y: auto;
}

#authModal .modal-card[data-auth-mode="login"] {
  width: min(430px, calc(100vw - 32px));
}

#authModal .modal-card h2 {
  padding-right: 54px;
  font-size: 1.72rem;
  line-height: 1.12;
}

.modal-card .modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  left: auto;
  z-index: 3;
}

#authModal .auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  margin: var(--space-4) 0;
  padding: var(--space-1);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--radius-md);
  background: rgba(235, 243, 250, .74);
}

#authModal .auth-tabs::before {
  display: none;
}

#authModal .auth-tabs button {
  min-height: 42px;
  border-radius: calc(var(--radius-md) - 4px);
  font-weight: var(--weight-bold);
}

#authModal .auth-tabs button.active {
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  box-shadow: var(--glass-highlight);
}

#authModal .auth-form {
  min-height: 0;
  gap: var(--space-4);
}

#authModal .auth-message {
  min-height: 18px;
  margin-top: 0;
}

.auth-consent {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  border-color: rgba(255, 255, 255, .64);
  background: rgba(255, 255, 255, .5);
  font-size: .8rem;
  line-height: 1.4;
}

.auth-consent input {
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin-top: 0;
  transform: none;
}

.auth-consent input:checked {
  background: var(--blue);
}

.account-menu {
  width: min(384px, calc(100vw - 32px));
  padding: var(--space-3);
  background:
    linear-gradient(180deg, rgba(249, 252, 255, .985), rgba(235, 243, 250, .965)),
    linear-gradient(135deg, rgba(0, 122, 255, .08), rgba(0, 167, 181, .06));
  -webkit-backdrop-filter: blur(28px) saturate(1.34);
  backdrop-filter: blur(28px) saturate(1.34);
}

.account-menu::before {
  right: 44px;
  background: rgba(249, 252, 255, .985);
}

.account-menu-stats span,
.account-menu-item {
  border: 1px solid rgba(255, 255, 255, .66);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--glass-highlight);
}

.user-chip {
  min-height: 46px;
  max-width: 230px;
  gap: var(--space-2);
  padding: 0 var(--space-3) 0 var(--space-2);
  border-radius: var(--radius-md);
  font-weight: var(--weight-bold);
}

.user-chip::before {
  content: attr(data-initial);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .72), transparent 30%),
    linear-gradient(145deg, var(--blue), var(--teal));
  color: #fff;
  font-size: .86rem;
  font-weight: var(--weight-heavy);
  box-shadow: 0 10px 22px rgba(0, 122, 255, .2);
}

#api .code-block {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(246, 250, 253, .78));
}

#api .code-block code {
  color: #1b2430;
  text-shadow: none;
}


@media (max-width: 1120px) {
  .container,
  .topbar {
    width: min(var(--container-max), calc(100% - (var(--container-pad-tablet) * 2)));
  }

  .hero-grid,
  .page-hero-grid,
  .split-grid,
  .workbench-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .hero h1,
  h1,
  .page-hero h1,
  body[data-page="demo"] .page-hero h1 {
    font-size: 2.8rem;
  }

  .hero-visual {
    max-width: none;
  }
}

@media (min-width: 960px) and (max-width: 1120px) {
  body[data-page="demo"] .workbench-grid {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: var(--space-6);
  }
}

@media (max-width: 760px) {
  .container,
  .topbar {
    width: calc(100% - (var(--container-pad-mobile) * 2));
  }

  .topbar {
    top: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-lg);
  }

  .section-shell {
    padding: var(--space-12) 0;
  }

  body[data-page="home"] .hero {
    padding: var(--space-8) 0 var(--space-10);
  }

  .hero h1,
  h1,
  .page-hero h1,
  body[data-page="demo"] .page-hero h1 {
    font-size: 2.18rem;
    line-height: 1.08;
  }

  h2 {
    font-size: 1.9rem;
  }

  .lead,
  .hero-copy .lead {
    font-size: .98rem;
  }

  .hero-actions {
    gap: var(--space-2);
  }

  .hero-map-frame,
  .visual-map {
    min-height: 320px;
    height: 320px;
  }

  .query-panel,
  .map-panel,
  .modal-card,
  .cookie-banner,
  .account-menu {
    border-radius: var(--radius-lg);
  }

  #authModal .modal-card {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 24px);
    padding: var(--space-5);
  }
}

/* Mobile overlay regression fixes */
.map-panel.map-fullscreen {
  box-sizing: border-box;
  width: auto;
  max-width: none;
  overflow: auto;
}

.map-panel.map-fullscreen .map-toolbar,
.map-panel.map-fullscreen .map-action-row,
.map-panel.map-fullscreen .result-tabs,
.map-panel.map-fullscreen .result-tab-panel,
.map-panel.map-fullscreen .steps-panel,
.map-panel.map-fullscreen .map-note {
  flex: 0 0 auto;
}

.map-panel.map-fullscreen .result-tabs {
  min-height: 54px;
  overflow-x: auto;
  overflow-y: visible;
}

.map-panel.map-fullscreen .result-tabs button {
  flex: 0 0 auto;
  min-height: 40px;
}

@media (max-width: 760px) {
  .cookie-banner.settings-open {
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    overflow: hidden;
  }

  .cookie-banner.settings-open .cookie-copy {
    gap: 2px;
  }

  .cookie-banner.settings-open .cookie-copy p {
    max-height: 2.9em;
    overflow-y: auto;
  }

  .cookie-banner.settings-open .cookie-copy a {
    min-height: 24px;
  }

  .cookie-banner.settings-open .cookie-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cookie-banner.settings-open .cookie-actions {
    display: none;
  }

  .cookie-banner.settings-open .cookie-settings-toggle {
    width: 100%;
    min-width: 0;
  }

  .cookie-banner.settings-open .cookie-settings-panel {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    max-height: min(188px, calc(100dvh - 214px));
    min-height: 0;
    padding: 6px;
    overflow-y: auto;
  }

  .cookie-banner.settings-open .cookie-save-choice {
    position: sticky;
    bottom: 0;
    z-index: 2;
    width: 100%;
    min-height: 44px;
    margin-top: 4px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 -10px 22px rgba(25, 35, 49, .08), var(--inner-highlight);
  }

  #authModal .auth-form {
    min-height: 0;
  }

  #authModal .auth-tabs {
    margin: 12px 0;
  }

  .map-panel.map-fullscreen {
    inset: 0;
    width: auto;
    max-height: 100dvh;
    border-radius: 0;
  }

  .map-panel.map-fullscreen #map {
    min-height: min(320px, 44dvh);
  }

  .map-panel.map-fullscreen .result-tabs {
    min-height: 50px;
    padding: 8px;
  }
}

@media (max-width: 360px) {
  .cookie-banner.settings-open .cookie-settings-panel {
    max-height: min(184px, calc(100dvh - 206px));
  }

  #authModal.modal {
    padding: 8px;
  }

  #authModal .modal-card {
    height: auto;
    max-height: calc(100dvh - 16px);
    padding: 16px;
  }

  #authModal .modal-card h2 {
    margin-bottom: 4px;
    font-size: 1.34rem;
  }

  #authModal .modal-sub {
    font-size: .86rem;
    line-height: 1.38;
  }

  #authModal .auth-form {
    gap: 10px;
  }

  #authModal .auth-form input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 42px;
  }

  #authModal .auth-consent {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    padding: 9px 10px;
    font-size: .76rem;
    line-height: 1.34;
  }

  #authModal .auth-consent input {
    width: 22px;
    min-height: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .hero-visual,
  .hero-visual::after,
  .route-card,
  .hero-reference-line,
  .hero-result-zone,
  .hero-result-point,
  .hero-result-core,
  .marquee-track,
  .premium-road-flow,
  .result-marker .marker-core::after,
  .status-pill[data-type="working"] .status-dot,
  .workbench.is-running .map-panel::after,
  .btn.is-loading::after,
  .toast:not([hidden]) {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}


/* ============================================================
   Apple-grade polish layer: typography, liquid glass tiers,
   motion, alignment. Overrides earlier passes.
   ============================================================ */

body {
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
.hero h1,
.page-hero h1 {
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-heading);
}

h3,
h4 {
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-subheading);
}

.brand {
  font-weight: var(--weight-heavy);
  letter-spacing: -0.012em;
}

.lead,
.section-head p,
.modal-sub,
.muted,
p {
  font-weight: var(--weight-regular);
}

.nav-links a,
.result-tabs button,
.account-menu-item,
.field-label,
.auth-form label,
.save-form label,
.user-chip {
  font-weight: var(--weight-medium);
}

.btn,
.mini-btn,
.eyebrow,
.panel-kicker,
.small-heading,
.advanced-settings summary {
  font-weight: var(--weight-bold);
}

/* ---------- Liquid Glass tiers ---------- */

.glass-subtle,
.marquee,
.footer {
  border: 1px solid rgba(255, 255, 255, .55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(248, 252, 255, .38));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(var(--glass-blur-subtle)) saturate(1.12);
  backdrop-filter: blur(var(--glass-blur-subtle)) saturate(1.12);
}

.glass-regular,
.query-panel,
.map-panel,
.hero-visual,
.account-guest,
.account-block {
  border: 1px solid rgba(255, 255, 255, .68);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(246, 251, 255, .58)),
    linear-gradient(135deg, rgba(0, 122, 255, .05), rgba(0, 167, 181, .035));
  box-shadow:
    0 22px 62px rgba(25, 35, 49, .1),
    var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur-regular)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur-regular)) saturate(1.2);
}

.glass-elevated,
.modal-card,
.account-menu {
  border: 1px solid rgba(255, 255, 255, .78);
  background:
    linear-gradient(180deg, rgba(252, 254, 255, .95), rgba(240, 246, 252, .88)),
    linear-gradient(135deg, rgba(0, 122, 255, .05), rgba(0, 167, 181, .035));
  box-shadow:
    0 32px 90px rgba(25, 35, 49, .2),
    0 4px 18px rgba(25, 35, 49, .08),
    var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur-elevated)) saturate(1.32);
  backdrop-filter: blur(var(--glass-blur-elevated)) saturate(1.32);
}

.glass-floating,
.cookie-banner,
.toast,
.status-pill,
.route-card,
.hero-result-badge {
  border: 1px solid rgba(255, 255, 255, .74);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(246, 251, 255, .72)),
    linear-gradient(135deg, rgba(0, 122, 255, .06), rgba(0, 167, 181, .04));
  box-shadow:
    0 20px 52px rgba(25, 35, 49, .16),
    var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur-floating)) saturate(1.26);
  backdrop-filter: blur(var(--glass-blur-floating)) saturate(1.26);
}

.toast {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(244, 248, 253, .84));
  border-color: rgba(255, 255, 255, .78);
  color: var(--ink);
}

/* ---------- Header: floating glass bar ---------- */

.topbar {
  transition:
    box-shadow var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard);
}

.topbar.is-scrolled {
  border-color: rgba(255, 255, 255, .86);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(246, 251, 255, .78)),
    linear-gradient(135deg, rgba(0, 122, 255, .07), rgba(0, 167, 181, .05));
  box-shadow: 0 22px 54px rgba(25, 35, 49, .15), var(--glass-edge);
  -webkit-backdrop-filter: blur(32px) saturate(1.34);
  backdrop-filter: blur(32px) saturate(1.34);
}

.nav-links {
  padding: 4px;
  border-radius: var(--radius-md);
}

.nav-links a {
  min-height: 38px;
  border-radius: calc(var(--radius-md) - 4px);
  font-size: .875rem;
}

.nav-links a.active {
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-weight: var(--weight-bold);
  box-shadow: 0 6px 16px rgba(25, 35, 49, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ---------- Buttons: unified control system ---------- */

.btn,
.icon-btn,
.mini-btn,
.user-chip,
.examples button,
.example-list button,
.recent-query,
.collection-strip button,
.result-tabs button,
.account-menu-item,
.docs-index a,
.cookie-settings-toggle {
  transition:
    transform var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard),
    filter var(--motion-fast) var(--ease-standard);
}

.btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.mini-btn:hover:not(:disabled) {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.btn:active:not(:disabled),
.icon-btn:active:not(:disabled),
.mini-btn:active:not(:disabled),
.user-chip:active,
.result-tabs button:active,
.examples button:active,
.example-list button:active {
  transform: scale(.98);
  filter: brightness(.99);
}

.btn:focus-visible,
.icon-btn:focus-visible,
.mini-btn:focus-visible,
.user-chip:focus-visible,
.nav-links a:focus-visible,
.result-tabs button:focus-visible,
.examples button:focus-visible,
.example-list button:focus-visible,
.account-menu-item:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 0;
  border-color: rgba(0, 122, 255, .7);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .22), var(--glass-highlight);
}

.btn:disabled,
.icon-btn:disabled,
.mini-btn:disabled {
  cursor: not-allowed;
  filter: saturate(.7);
}

/* ---------- Cards: calm hover ---------- */

.feature-card,
.doc-card,
.process-card,
.use-case-card,
.price-card,
.page-link-card,
.stat-box,
.legal-card {
  transition:
    transform var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard);
}

.feature-card:hover,
.doc-card:hover,
.process-card:hover,
.use-case-card:hover,
.price-card:hover,
.page-link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(25, 35, 49, .13), var(--glass-edge);
}

/* ---------- Reveal-on-scroll (restored, gentle) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--motion-slow) var(--ease-emphasized),
    transform var(--motion-slow) var(--ease-emphasized);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Modal / dropdown motion ---------- */

.modal {
  transition: opacity var(--motion-base) var(--ease-standard);
}

.modal .modal-card {
  transform: translateY(10px) scale(.985);
  transition:
    transform var(--motion-base) var(--ease-emphasized),
    opacity var(--motion-base) var(--ease-emphasized);
}

.modal.open .modal-card {
  transform: translateY(0) scale(1);
}

.account-menu {
  animation: accountMenuIn var(--motion-fast) var(--ease-emphasized);
}

@keyframes accountMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.98);
  }
}

/* ---------- Monospace only where technical ---------- */

.eyebrow,
.panel-kicker,
.small-heading,
.field-label {
  font-family: var(--font);
}

code,
pre,
.mono,
.code-block,
.source-json,
.coord-value,
.step-card .step-fn,
.console-line {
  font-family: var(--mono);
  letter-spacing: 0;
}

/* ---------- Stats and prices: sans, tight, semibold ---------- */

.trust-row strong,
.metric-rack strong,
.stat-box strong,
.price-value {
  font-family: var(--font);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-subheading);
  overflow-wrap: normal;
  word-break: normal;
}

/* ---------- Map floating controls ---------- */

.leaflet-control-zoom a {
  border-color: rgba(255, 255, 255, .72) !important;
  background: rgba(255, 255, 255, .8) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-floating)) saturate(1.24);
  backdrop-filter: blur(var(--glass-blur-floating)) saturate(1.24);
  transition: background var(--motion-fast) var(--ease-standard);
}

.leaflet-control-zoom a:hover {
  background: rgba(255, 255, 255, .96) !important;
}

/* ---------- Performance: fewer heavy filters on mobile ---------- */

@media (max-width: 760px) {
  :root {
    --glass-blur-subtle: 8px;
    --glass-blur-regular: 14px;
    --glass-blur-elevated: 20px;
    --glass-blur-floating: 16px;
    --glass-blur: 16px;
  }

  body::before {
    opacity: .4;
  }
}

/* ---------- Reduced motion: fully static, fully functional ---------- */

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Final premium QA layer: graphite primary CTA, user dropdown,
   icon alignment, overflow safety. Overrides earlier passes.
   ============================================================ */

/* ---------- Primary CTA: deep graphite glass ---------- */

.btn.primary {
  border-color: rgba(0, 87, 194, .55);
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .28), transparent 46%),
    linear-gradient(180deg, #2e93ff, #007aff 58%, #0067df);
  color: #fff;
  box-shadow:
    0 16px 38px rgba(0, 92, 200, .28),
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -1px 0 rgba(0, 40, 90, .24);
}

.btn.primary:hover:not(:disabled) {
  border-color: rgba(0, 87, 194, .68);
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .34), transparent 48%),
    linear-gradient(180deg, #3f9dff, #1585ff 58%, #0a70e8);
  background-position: 0 0;
  box-shadow:
    0 20px 46px rgba(0, 92, 200, .32),
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(0, 40, 90, .24);
}

.btn.primary:active:not(:disabled) {
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .18), transparent 44%),
    linear-gradient(180deg, #0e74e6, #005cc2);
  box-shadow:
    0 10px 24px rgba(0, 92, 200, .26),
    inset 0 1px 0 rgba(255, 255, 255, .2);
}

.btn.primary:focus-visible {
  border-color: rgba(0, 122, 255, .8);
  box-shadow:
    0 0 0 3px rgba(0, 122, 255, .28),
    0 16px 38px rgba(16, 20, 26, .26),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

.btn.primary.danger {
  border-color: rgba(148, 32, 42, .8);
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .18), transparent 46%),
    linear-gradient(180deg, #c13a4a, #96222e);
  box-shadow: 0 16px 36px rgba(148, 32, 42, .26), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.btn.primary.danger:hover:not(:disabled) {
  border-color: rgba(148, 32, 42, .9);
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .22), transparent 48%),
    linear-gradient(180deg, #cb4454, #a02633);
  box-shadow: 0 20px 44px rgba(148, 32, 42, .3), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* ---------- Icon + text composition ---------- */

.btn svg,
.mini-btn svg,
.icon-btn svg,
.account-menu-item svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

.btn.small svg {
  width: 16px;
  height: 16px;
}

.btn span {
  min-width: 0;
}

/* ---------- User dropdown: premium glass, viewport-safe ---------- */

.account-menu {
  width: min(384px, calc(100vw - 32px));
  max-height: calc(100dvh - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(31, 42, 56, .28) transparent;
  animation: accountMenuIn 200ms var(--ease-emphasized);
}

.account-menu::-webkit-scrollbar {
  width: 6px;
}

.account-menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(31, 42, 56, .24);
}

.account-menu::before {
  display: none;
}

@keyframes accountMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.97);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.account-menu-head {
  padding: var(--space-3);
}

.account-menu-list {
  border-top-color: rgba(31, 42, 56, .1);
}

.account-menu-item {
  min-height: 50px;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  transform: none;
}

.account-menu-item.danger {
  margin-top: var(--space-1);
  border-top: 1px solid rgba(31, 42, 56, .1);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.account-identity small {
  overflow-wrap: anywhere;
}

/* ---------- Overflow safety ---------- */

h1,
h2,
h3,
h4,
p,
.lead {
  overflow-wrap: break-word;
}

.user-chip {
  max-width: min(230px, 38vw);
}

@media (max-width: 760px) {
  .user-chip {
    max-width: 46vw;
  }

  .account-menu {
    max-height: calc(100dvh - 96px);
  }
}

@media (max-width: 400px) {
  .btn {
    padding-inline: var(--space-4);
  }
}

/* ---------- Liquid light: subtle pointer-follow highlight ---------- */

.liquid-light {
  position: relative;
}

.liquid-light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    160px circle at var(--light-x, 50%) var(--light-y, 50%),
    rgba(255, 255, 255, .14),
    transparent 62%
  );
  transition: opacity var(--motion-base) var(--ease-standard);
}

.liquid-light:hover::after {
  opacity: 1;
}

.liquid-light > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .liquid-light::after {
    display: none;
  }
}

/* ============================================================
   Auth polish layer: neutral consent checkbox, soft focus,
   modal enter/exit motion. Overrides earlier passes.
   ============================================================ */

textarea:focus,
input:focus,
select:focus,
textarea:focus-visible,
input:focus-visible,
select:focus-visible {
  border-color: rgba(70, 92, 116, .55);
  box-shadow:
    0 0 0 3px rgba(70, 92, 116, .12),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

.auth-consent:hover,
.auth-consent:focus-within {
  border-color: rgba(70, 92, 116, .4);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 12px 28px rgba(31, 42, 56, .1);
}

.auth-consent input:checked,
.auth-consent:hover input:checked,
.auth-consent input:checked:hover {
  border-color: rgba(0, 87, 194, .72);
  background:
    radial-gradient(circle at 30% 8%, rgba(255, 255, 255, .3), transparent 52%),
    linear-gradient(180deg, #2e93ff, #0067df);
  box-shadow:
    0 8px 18px rgba(0, 92, 200, .26),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}

.auth-consent input:checked::after {
  animation: consentCheckIn 180ms var(--ease-standard) both;
}

@keyframes consentCheckIn {
  from {
    opacity: 0;
    transform: rotate(42deg) scale(.5);
  }
}

.auth-consent input:focus-visible,
.auth-consent input:checked:focus-visible {
  outline: 0;
  border-color: rgba(0, 122, 255, .6);
  box-shadow:
    0 0 0 3px rgba(0, 122, 255, .2),
    0 8px 18px rgba(31, 42, 56, .18),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

.auth-consent a {
  color: var(--ink-2);
  font-weight: 600;
  text-decoration-color: rgba(31, 42, 56, .4);
  transition: color var(--motion-fast) var(--ease-standard), text-decoration-color var(--motion-fast) var(--ease-standard);
}

.auth-consent a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

#authModal .auth-tabs button {
  transition:
    background-color var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}

/* Modal enter/exit: backdrop fade + card scale/translate */

.modal.open .modal-backdrop {
  animation: backdropIn 260ms var(--ease-standard) both;
}

.modal.open .modal-card {
  animation: modalIn 280ms var(--ease-standard) both;
}

.modal.open.closing .modal-backdrop {
  animation: backdropOut 160ms ease-in both;
}

.modal.open.closing .modal-card {
  animation: modalOut 160ms ease-in both;
}

@keyframes backdropIn {
  from { opacity: 0; }
}

@keyframes backdropOut {
  to { opacity: 0; }
}

@keyframes modalOut {
  to {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
}

/* ============================================================
   Auth reference layer: per-mode titles, field icons,
   light neutral submit, remember/forgot row, legal note.
   ============================================================ */

#authModal .modal-sub {
  display: none;
}

#authModal .modal-card h2 {
  font-size: 1.5rem;
  text-align: center;
  padding-right: 0;
  margin-bottom: 4px;
}

@media (max-width: 760px) {
  #authModal .modal-card h2 {
    padding-inline: 44px;
    font-size: 1.3rem;
  }
}

.auth-form label > .input-wrap {
  display: block;
  margin-bottom: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.input-wrap {
  position: relative;
  display: block;
}

.input-wrap input {
  padding-right: 44px;
}

.input-icon,
.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  color: var(--muted);
}

.input-icon {
  pointer-events: none;
}

.password-toggle {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.password-toggle:hover {
  color: var(--ink-2);
  background: rgba(31, 42, 56, .06);
}

.password-toggle:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .2);
}

.input-icon svg,
.password-toggle svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

.auth-aux-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .84rem;
}

.remember-me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-weight: 500;
  cursor: pointer;
}

.auth-form .remember-me > span {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.remember-me input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 1.5px solid rgba(111, 122, 131, .62);
  border-radius: 6px;
  background: var(--surface-solid);
  box-shadow: none;
  cursor: pointer;
  position: relative;
  transition: border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.remember-me input:checked {
  border-color: rgba(0, 87, 194, .72);
  background:
    radial-gradient(circle at 30% 8%, rgba(255, 255, 255, .3), transparent 52%),
    linear-gradient(180deg, #2e93ff, #0067df);
}

.remember-me input::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(42deg) scale(0);
  transform-origin: center;
  transition: transform var(--motion-fast) var(--ease-emphasized);
}

.remember-me input:checked::after {
  transform: rotate(42deg) scale(1);
}

.remember-me input:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .2);
}

.forgot-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--blue-dark);
  font-size: .84rem;
  font-weight: 500;
  cursor: pointer;
}

.forgot-link:hover {
  text-decoration: underline;
}

.auth-legal-note {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.auth-legal-note a,
.auth-consent a {
  color: var(--blue-dark);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(13, 94, 175, .4);
  text-underline-offset: 3px;
}

.auth-legal-note a:hover,
.auth-consent a:hover {
  color: var(--blue);
  text-decoration-color: currentColor;
}

#authModal .btn.primary {
  border-color: rgba(31, 42, 56, .14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(238, 243, 249, .92));
  color: var(--ink);
  box-shadow:
    0 8px 22px rgba(25, 35, 49, .08),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

#authModal .btn.primary:hover:not(:disabled) {
  border-color: rgba(0, 122, 255, .3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(226, 237, 250, .94));
  color: var(--ink);
  box-shadow:
    0 12px 28px rgba(25, 35, 49, .12),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

#authModal .btn.primary:active:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(240, 245, 250, .96), rgba(222, 231, 242, .94));
  box-shadow:
    0 6px 16px rgba(25, 35, 49, .1),
    inset 0 1px 0 rgba(255, 255, 255, .8);
}

#authModal .btn.primary:focus-visible {
  border-color: rgba(0, 122, 255, .6);
  box-shadow:
    0 0 0 3px rgba(0, 122, 255, .2),
    0 8px 22px rgba(25, 35, 49, .08),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ============================================================
   Equal-size auth modal, square consent checkbox, reset form,
   page transitions, dark theme.
   ============================================================ */

#authModal .modal-card,
#authModal .modal-card[data-auth-mode="login"],
#authModal .modal-card[data-auth-mode="register"] {
  width: min(480px, calc(100vw - 32px));
  height: min(700px, calc(100dvh - 48px));
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

#authModal .auth-form {
  flex: 1 1 auto;
  align-content: start;
}

#authModal .auth-form .btn[type="submit"] {
  margin-top: auto;
}

.auth-consent input,
.auth-consent input:checked {
  width: 22px;
  height: 22px;
  min-height: 22px;
  border-radius: 6px;
  border-width: 1.5px;
}

.auth-consent input:checked::after {
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
}

.auth-reset-sub {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 400;
  line-height: 1.5;
}

.auth-reset-sub strong {
  color: var(--ink);
  font-weight: 650;
}

#authModal input[autocomplete="one-time-code"] {
  text-align: center;
  font-size: 1.08rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
}

.auth-back-link {
  justify-self: center;
  margin-top: 4px;
}

.auth-reset-done {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 0;
  padding: 12px;
  border: 1px solid rgba(36, 138, 99, .3);
  border-radius: var(--radius);
  background: rgba(36, 138, 99, .08);
  color: var(--green);
  font-size: .84rem;
  line-height: 1.5;
  animation: resetDoneIn 240ms var(--ease-standard) both;
}

.auth-reset-done svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

@keyframes resetDoneIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ---------- Page transitions ---------- */

body.page-enter main {
  animation: pageEnter 420ms var(--ease-emphasized) both;
}

body.page-leave {
  pointer-events: none;
}

body.page-leave main {
  animation: pageLeave 190ms ease-in both;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(5px);
  }
}

@keyframes pageLeave {
  to {
    opacity: 0;
    transform: translateY(-10px);
    filter: blur(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-enter main,
  body.page-leave main {
    animation: none;
  }
}

/* ---------- Dark theme ---------- */

[data-theme="dark"] {
  --bg: #0d1117;
  --bg-elevated: #121822;
  --bg-soft: #10161f;
  --paper-2: #151c27;
  --ink: #eef2f7;
  --ink-2: #c6d0dc;
  --muted: #93a0af;
  --muted-soft: #6d7885;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --line-glass: rgba(255, 255, 255, .1);
  --surface: rgba(22, 29, 39, .72);
  --surface-solid: #161d27;
  --surface-muted: rgba(19, 25, 34, .92);
  --glass-subtle: rgba(22, 29, 39, .54);
  --glass-standard: rgba(22, 29, 39, .72);
  --glass-elevated: rgba(25, 33, 44, .86);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(255, 255, 255, .04);
  --glass-bg: rgba(22, 29, 39, .58);
  --glass-bg-strong: rgba(24, 32, 43, .84);
  --glass-bg-control: rgba(26, 34, 46, .7);
  --glass-bg-modal: rgba(22, 29, 39, .92);
  --glass-border: rgba(255, 255, 255, .12);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .08);
  --glass-shadow: 0 22px 62px rgba(0, 0, 0, .5);
  --blue-soft: rgba(0, 122, 255, .2);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 10px 26px rgba(0, 0, 0, .35);
  --shadow-md: 0 18px 48px rgba(0, 0, 0, .42);
  --shadow: 0 28px 86px rgba(0, 0, 0, .5);
  --shadow-float: 0 22px 60px rgba(0, 0, 0, .55);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .07);
  color-scheme: dark;
}

[data-theme="dark"] body {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(160deg, #0f141c 0%, #0d1117 46%, #0b0f15 100%);
  background-size: 56px 56px, 56px 56px, auto;
}

[data-theme="dark"] body::before {
  background:
    linear-gradient(118deg, rgba(0, 122, 255, .12), transparent 30%),
    linear-gradient(252deg, rgba(0, 167, 181, .1), transparent 36%),
    linear-gradient(0deg, rgba(60, 90, 140, .08), transparent 45%);
}

[data-theme="dark"] .topbar {
  background: rgba(15, 20, 28, .78);
  border-bottom-color: rgba(255, 255, 255, .08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 14px 38px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .nav-links {
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

[data-theme="dark"] .nav-links a {
  color: rgba(198, 208, 220, .78);
}

[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a.active {
  background: rgba(255, 255, 255, .1);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

[data-theme="dark"] textarea,
[data-theme="dark"] input,
[data-theme="dark"] select {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: rgba(147, 160, 175, .7);
}

[data-theme="dark"] .demo-access-note {
  border-color: rgba(108, 180, 255, .2);
  background: rgba(0, 122, 255, .1);
  color: var(--ink-2);
}

[data-theme="dark"] body.is-demo-locked .demo-access-note {
  border-color: rgba(255, 180, 86, .24);
  background: rgba(255, 180, 86, .1);
}

[data-theme="dark"] body.is-demo-quota-empty .demo-access-note {
  border-color: rgba(255, 113, 123, .28);
  background: rgba(255, 113, 123, .1);
  color: #ffb4ba;
}

[data-theme="dark"] .status-pill[data-type="warning"] {
  color: #ffcc78;
}

[data-theme="dark"] .feature-card,
[data-theme="dark"] .doc-card,
[data-theme="dark"] .process-card,
[data-theme="dark"] .use-case-card,
[data-theme="dark"] .price-card,
[data-theme="dark"] .page-link-card,
[data-theme="dark"] .stat-box,
[data-theme="dark"] .trust-row div,
[data-theme="dark"] .metric-rack div,
[data-theme="dark"] .legal-card,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .account-block,
[data-theme="dark"] .account-guest,
[data-theme="dark"] .query-panel,
[data-theme="dark"] .map-panel,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .cookie-banner,
[data-theme="dark"] .account-menu,
[data-theme="dark"] .code-block {
  border-color: rgba(255, 255, 255, .1);
  background:
    linear-gradient(180deg, rgba(26, 34, 46, .86), rgba(19, 26, 36, .78)),
    linear-gradient(135deg, rgba(0, 122, 255, .08), rgba(0, 167, 181, .05));
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .doc-card:hover,
[data-theme="dark"] .process-card:hover,
[data-theme="dark"] .use-case-card:hover,
[data-theme="dark"] .price-card:hover,
[data-theme="dark"] .page-link-card:hover {
  background-color: rgba(31, 40, 53, .9);
  border-color: rgba(0, 122, 255, .3);
}

[data-theme="dark"] .btn.secondary,
[data-theme="dark"] .btn.ghost,
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .mini-btn {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  color: var(--ink-2);
}

[data-theme="dark"] .btn.secondary:hover:not(:disabled),
[data-theme="dark"] .btn.ghost:hover:not(:disabled),
[data-theme="dark"] .icon-btn:hover:not(:disabled),
[data-theme="dark"] .mini-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, .12);
  color: var(--ink);
}

[data-theme="dark"] .auth-tabs,
[data-theme="dark"] #authModal .auth-tabs {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .06);
}

[data-theme="dark"] #authModal .auth-tabs button {
  color: var(--muted);
}

[data-theme="dark"] #authModal .auth-tabs button.active {
  background: rgba(255, 255, 255, .12);
  color: var(--ink);
}

[data-theme="dark"] #authModal .btn.primary {
  border-color: rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .07));
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
}

[data-theme="dark"] #authModal .btn.primary:hover:not(:disabled) {
  border-color: rgba(0, 122, 255, .4);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .1));
  color: var(--ink);
}

[data-theme="dark"] .auth-consent {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
}

[data-theme="dark"] .auth-consent input,
[data-theme="dark"] .remember-me input {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .auth-consent input:checked,
[data-theme="dark"] .remember-me input:checked {
  border-color: rgba(0, 122, 255, .7);
  background: linear-gradient(180deg, #2e93ff, #0067df);
}

[data-theme="dark"] .auth-legal-note a,
[data-theme="dark"] .auth-consent a,
[data-theme="dark"] .forgot-link,
[data-theme="dark"] .footer-links a {
  color: #5aa9ff;
}

[data-theme="dark"] .modal-backdrop {
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 122, 255, .12), transparent 36%),
    rgba(0, 0, 0, .6);
}

[data-theme="dark"] .map-toolbar,
[data-theme="dark"] .map-action-row,
[data-theme="dark"] .result-tabs,
[data-theme="dark"] .result-tab-panel,
[data-theme="dark"] .steps-panel,
[data-theme="dark"] .map-note {
  background: rgba(19, 26, 36, .8);
  border-color: rgba(255, 255, 255, .08);
}

[data-theme="dark"] .result-tabs button {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
  color: var(--muted);
}

[data-theme="dark"] .result-tabs button.active {
  border-color: rgba(0, 122, 255, .5);
  background: rgba(0, 122, 255, .14);
  color: var(--ink);
}

[data-theme="dark"] .result-field,
[data-theme="dark"] .account-menu-stats span,
[data-theme="dark"] .account-menu-item,
[data-theme="dark"] .recent-query,
[data-theme="dark"] .empty-state {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
}

[data-theme="dark"] .account-menu {
  background:
    linear-gradient(180deg, rgba(26, 34, 46, .97), rgba(19, 26, 36, .95)),
    linear-gradient(135deg, rgba(0, 122, 255, .1), rgba(0, 167, 181, .07));
}

[data-theme="dark"] .footer,
[data-theme="dark"] footer {
  border-color: rgba(255, 255, 255, .08);
}

[data-theme="dark"] .toast {
  background: linear-gradient(180deg, rgba(42, 52, 66, .92), rgba(29, 37, 49, .9));
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}

[data-theme="dark"] .user-chip {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  color: var(--ink-2);
}

[data-theme="dark"] .hero-copy .lead {
  color: rgba(198, 208, 220, .8);
}

[data-theme="dark"] .liquid-light::after {
  background: radial-gradient(
    160px circle at var(--light-x, 50%) var(--light-y, 50%),
    rgba(120, 180, 255, .1),
    transparent 62%
  );
}

/* ============================================================
   Round 4: custom checkboxes, cookie panel polish, legal TOC
   pills, animated marquee, hover micro-interactions.
   ============================================================ */

/* ---------- Custom square checkboxes (map options, cookie) ---------- */

.check-row:not(.auth-consent) input[type="checkbox"],
.cookie-category input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 1.5px solid rgba(111, 122, 131, .62);
  border-radius: 6px;
  background: var(--surface-solid);
  box-shadow: none;
  cursor: pointer;
  position: relative;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.cookie-category input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin-top: 1px;
  border-radius: 5px;
}

.check-row:not(.auth-consent) input[type="checkbox"]:checked,
.cookie-category input[type="checkbox"]:checked {
  border-color: rgba(0, 87, 194, .72);
  background:
    radial-gradient(circle at 30% 8%, rgba(255, 255, 255, .3), transparent 52%),
    linear-gradient(180deg, #2e93ff, #0067df);
}

.check-row:not(.auth-consent) input[type="checkbox"]::after,
.cookie-category input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(42deg) scale(0);
  transform-origin: center;
  transition: transform var(--motion-fast) var(--ease-emphasized);
}

.cookie-category input[type="checkbox"]::after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
}

.check-row:not(.auth-consent) input[type="checkbox"]:checked::after,
.cookie-category input[type="checkbox"]:checked::after {
  transform: rotate(42deg) scale(1);
}

.check-row:not(.auth-consent) input[type="checkbox"]:focus-visible,
.cookie-category input[type="checkbox"]:focus-visible {
  outline: 0;
  border-color: rgba(0, 122, 255, .6);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .2);
}

.check-row:not(.auth-consent) input[type="checkbox"]:disabled,
.cookie-category input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .7;
}

.cookie-category input[type="checkbox"]:disabled:checked {
  border-color: rgba(12, 129, 119, .5);
  background: linear-gradient(180deg, #35a58f, #0c8177);
}

.check-row {
  cursor: pointer;
}

/* ---------- Cookie banner polish ---------- */

.cookie-settings-panel {
  padding: var(--space-3);
  animation: cookiePanelIn 260ms var(--ease-emphasized) both;
}

@keyframes cookiePanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.cookie-category {
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.cookie-category:not(.disabled):not(.active):hover {
  border-color: rgba(0, 122, 255, .34);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 20px rgba(31, 42, 56, .08);
}

.cookie-category.disabled {
  cursor: not-allowed;
}

.cookie-save-choice.btn.secondary,
.cookie-settings-panel .cookie-save-choice {
  align-self: center;
  min-height: 44px;
}

/* ---------- Legal / docs section nav: elegant pill row ---------- */

.page-hero-grid:has(.docs-index) {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.docs-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.docs-index a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(31, 42, 56, .12);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .66);
  color: var(--ink-2);
  font-size: .86rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 14px rgba(31, 42, 56, .05);
}

.docs-index a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  opacity: .7;
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.docs-index a:hover {
  border-color: rgba(0, 122, 255, .34);
  background: rgba(255, 255, 255, .95);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 24px rgba(31, 42, 56, .1);
}

.docs-index a:hover::before {
  opacity: 1;
  transform: scale(1.25);
}

.legal-card[id],
article[id],
section[id] {
  scroll-margin-top: 96px;
}

[data-theme="dark"] .docs-index a {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: var(--ink-2);
  box-shadow: none;
}

[data-theme="dark"] .docs-index a:hover {
  border-color: rgba(0, 122, 255, .4);
  background: rgba(255, 255, 255, .1);
  color: var(--ink);
}

/* ---------- Marquee: animated running strip ---------- */

.marquee {
  border-block: 0;
  background: transparent;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track {
  flex-wrap: nowrap;
  width: max-content;
  min-width: max-content;
  justify-content: flex-start;
  animation: marquee 34s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee span {
  flex: 0 0 auto;
  padding: 14px 28px;
  color: rgba(31, 42, 56, .62);
  transition: color var(--motion-fast) var(--ease-standard);
}

.marquee span:hover {
  color: var(--blue);
}

[data-theme="dark"] .marquee span {
  color: rgba(198, 208, 220, .62);
}

[data-theme="dark"] .marquee span:hover {
  color: #5aa9ff;
}

/* ---------- Hover micro-interactions ---------- */

.feature-card,
.doc-card,
.process-card,
.use-case-card,
.price-card,
.page-link-card {
  transition:
    transform var(--motion-base) var(--ease-emphasized),
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}

.feature-card:hover,
.doc-card:hover,
.process-card:hover,
.use-case-card:hover,
.price-card:hover,
.page-link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(25, 35, 49, .14), var(--glass-highlight);
}

[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .doc-card:hover,
[data-theme="dark"] .process-card:hover,
[data-theme="dark"] .use-case-card:hover,
[data-theme="dark"] .price-card:hover,
[data-theme="dark"] .page-link-card:hover {
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5), var(--glass-highlight);
}

.feature-card .icon-wrap,
.feature-card > svg,
.doc-card > svg {
  transition: transform var(--motion-base) var(--ease-emphasized);
}

.feature-card:hover .icon-wrap,
.feature-card:hover > svg,
.doc-card:hover > svg {
  transform: translateY(-2px) scale(1.08);
}

.btn:not(:disabled):active,
.icon-btn:not(:disabled):active,
.mini-btn:not(:disabled):active {
  transform: translateY(1px) scale(.985);
}

.footer-links a {
  position: relative;
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-base) var(--ease-emphasized);
}

.footer-links a:hover::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none !important;
  }

  .feature-card:hover,
  .doc-card:hover,
  .process-card:hover,
  .use-case-card:hover,
  .price-card:hover,
  .page-link-card:hover,
  .docs-index a:hover {
    transform: none;
  }
}

/* ---------- Footer: program support block ---------- */

.footer-support {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 32px;
  margin-bottom: 20px;
  padding: 20px 26px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 8% 0%, rgba(95, 111, 214, .1), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(246, 250, 255, .56));
  box-shadow: 0 20px 52px rgba(25, 35, 49, .1), var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur-regular)) saturate(1.25);
  backdrop-filter: blur(var(--glass-blur-regular)) saturate(1.25);
}

.footer-support-logos {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.footer-support-logos img {
  display: block;
  height: 56px;
  width: auto;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.footer-support-logo-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-support-logos img[src*="logo-putp"] {
  height: 72px;
}

.footer-support-logos img:hover {
  transform: translateY(-2px) scale(1.03);
}

.footer-support p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
  max-width: 68ch;
}

@media (max-width: 720px) {
  .footer-support {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .footer-support-logos {
    justify-content: center;
  }
}

[data-theme="dark"] .footer-support {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  box-shadow: none;
}

[data-theme="dark"] .footer-support-logos img {
  background: rgba(255, 255, 255, .92);
  border-radius: 10px;
  padding: 6px 10px;
}

/* ---------- Liquid Glass buttons (frosted pill reference) ---------- */

.btn,
.icon-btn,
.mini-btn,
.user-chip {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  backdrop-filter: blur(26px) saturate(1.4);
}

.btn.secondary,
.btn.ghost,
.icon-btn,
.mini-btn,
.user-chip {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .3));
  box-shadow:
    0 14px 34px rgba(25, 35, 49, .12),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(255, 255, 255, .28);
}

.btn:not(.is-loading)::after,
.icon-btn::after,
.mini-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 48%);
  opacity: .75;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.btn.primary:not(.is-loading)::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 54%);
}

.btn:not(.is-loading):hover::after,
.icon-btn:hover::after,
.mini-btn:hover::after {
  opacity: 1;
}

.btn.primary {
  border-color: rgba(255, 255, 255, .5);
  background:
    radial-gradient(circle at 26% 16%, rgba(255, 255, 255, .4), transparent 38%),
    linear-gradient(180deg, rgba(0, 122, 255, .88), rgba(0, 94, 215, .82));
  box-shadow:
    0 18px 44px rgba(0, 122, 255, .28),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(255, 255, 255, .16);
}

.btn:hover,
.icon-btn:hover,
.mini-btn:hover,
.user-chip:hover {
  transform: translateY(-1px);
}

.btn:active,
.icon-btn:active,
.mini-btn:active {
  transform: translateY(0) scale(.985);
}

[data-theme="dark"] .btn:not(.primary),
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .mini-btn,
[data-theme="dark"] .user-chip {
  border-color: rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}

[data-theme="dark"] .btn:not(.is-loading)::after,
[data-theme="dark"] .icon-btn::after,
[data-theme="dark"] .mini-btn::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 48%);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .icon-btn:hover,
  .mini-btn:hover,
  .user-chip:hover {
    transform: none;
  }
}

/* ---------- Metric rack: gentle float + shine ---------- */

.metric-rack div {
  position: relative;
  overflow: hidden;
  animation: rackFloat 6.4s ease-in-out infinite;
  transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.metric-rack div:nth-child(2) {
  animation-delay: 1.1s;
}

.metric-rack div:nth-child(3) {
  animation-delay: 2.2s;
}

.metric-rack div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 62%) -180% 0 / 260% 100% no-repeat;
  pointer-events: none;
  animation: rackShine 7.5s var(--ease-standard) infinite;
}

.metric-rack div:nth-child(2)::before {
  animation-delay: 1.1s;
}

.metric-rack div:nth-child(3)::before {
  animation-delay: 2.2s;
}

.metric-rack div:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(25, 35, 49, .14);
  animation-play-state: paused;
}

@keyframes rackFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes rackShine {
  0%, 55% { background-position: -180% 0; }
  85%, 100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .metric-rack div,
  .metric-rack div::before {
    animation: none;
  }
}

/* ---------- Smoother page transitions ---------- */

body.page-enter main {
  animation-duration: 560ms;
}

body.page-leave main {
  animation-duration: 240ms;
}

body.page-enter .site-header {
  animation: headerEnter 480ms var(--ease-emphasized) both;
}

@keyframes headerEnter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-enter .site-header {
    animation: none;
  }
}

/* ============================================================
   Layout and legibility fixes
   1. Mobile navigation panel
   2. Control alignment (demo toolbar, button rows, footer)
   3. Auth modal sizing
   4. Account dashboard grid
   5. Dark theme: surfaces that kept light backgrounds
   6. Accent colours that failed contrast
   ============================================================ */

/* ---------- 1. Mobile navigation panel ---------- */

@media (max-width: 760px) {
  .topbar .nav-links {
    z-index: 3;
  }

  .topbar.nav-open .nav-links {
    border-color: rgba(31, 42, 56, .1);
    background: linear-gradient(180deg, #ffffff, #f4f7fb);
    box-shadow: 0 22px 54px rgba(25, 35, 49, .18), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    backdrop-filter: blur(24px) saturate(1.2);
  }

  [data-theme="dark"] .topbar.nav-open .nav-links {
    border-color: rgba(255, 255, 255, .1);
    background: linear-gradient(180deg, #1a222e, #131a24);
    box-shadow: 0 22px 54px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
  }

  .topbar.nav-open .nav-links a {
    color: var(--ink-2);
  }

  .topbar.nav-open .nav-links a.active {
    background: rgba(0, 122, 255, .12);
    color: var(--ink);
    box-shadow: none;
  }

  [data-theme="dark"] .topbar.nav-open .nav-links a {
    color: var(--ink-2);
  }

  [data-theme="dark"] .topbar.nav-open .nav-links a.active {
    background: rgba(0, 122, 255, .22);
    color: var(--ink);
  }
}
/* ---------- 2. Control alignment ---------- */

/* The coordinate-format select sat 4px taller than the buttons beside it. */
.map-action-row select {
  height: 44px;
  min-height: 44px;
  border-radius: var(--radius-md);
}

/* Three actions never fit one 474px column: keep two per row and let the
   third span the full width instead of hanging alone at 60% width. */
.query-panel .button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.query-panel .button-row > .btn {
  width: 100%;
}

.query-panel .button-row > .btn:nth-child(3) {
  grid-column: 1 / -1;
}

/* Footer information is grouped by purpose, so the legal details and links
   remain easy to scan without looking like a loose row of text. */
.footer-inner {
  display: grid;
  grid-template-columns: minmax(168px, .75fr) minmax(420px, 1.7fr) minmax(300px, .9fr);
  align-items: center;
  gap: 32px;
  padding: 28px 0;
}

.footer-inner > .brand {
  justify-self: start;
  align-self: center;
}

.footer-legal {
  position: relative;
  justify-self: center;
  text-align: center;
  display: grid;
  gap: 4px;
  width: min(100%, 700px);
  padding: 2px 32px;
  line-height: 1.5;
}

.footer-legal::before,
.footer-legal::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(91, 112, 135, .2);
}

.footer-legal::before {
  left: 0;
}

.footer-legal::after {
  right: 0;
}

.footer-label {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.footer-legal strong {
  color: var(--ink);
  font-size: .96rem;
}

.footer-legal span {
  color: var(--muted-strong);
  font-size: .81rem;
}

.footer-documents {
  justify-self: end;
  display: grid;
  gap: 9px;
}

.footer-documents > .footer-label {
  text-align: right;
}

.footer-documents .footer-links {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: end;
  column-gap: 16px;
  row-gap: 8px;
}

.footer-documents .footer-links a {
  min-height: 0;
  padding: 0;
  color: var(--muted-strong);
  font-size: .8rem;
  font-weight: 650;
}

.footer-documents .footer-links a:nth-child(4) {
  grid-column: 2;
}

.footer-documents .footer-links a:hover {
  color: var(--blue-dark);
}

@media (max-width: 1100px) {
  .footer-inner {
    grid-template-columns: minmax(168px, .7fr) minmax(0, 1.6fr);
    gap: 24px 32px;
  }

  .footer-documents {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .footer-documents > .footer-label {
    text-align: center;
  }

  .footer-documents .footer-links {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 18px;
    padding: 24px 0;
  }

  .footer-inner > .brand,
  .footer-documents {
    justify-self: center;
  }

  .footer-legal {
    max-width: 38rem;
    padding: 16px 0;
    border-top: 1px solid rgba(91, 112, 135, .16);
    border-bottom: 1px solid rgba(91, 112, 135, .16);
  }

  .footer-legal::before,
  .footer-legal::after {
    display: none;
  }

  .footer-documents > .footer-label {
    text-align: center;
  }

  .footer-documents .footer-links {
    display: flex;
    justify-content: center;
    max-width: 340px;
    column-gap: 14px;
    row-gap: 10px;
  }

  .footer-documents .footer-links a:nth-child(4) {
    grid-column: auto;
  }
}

.cta-panel .cta-actions {
  flex: 0 0 auto;
  margin-left: auto;
  gap: 12px;
}

.cta-panel .cta-actions .btn {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .cta-panel .cta-actions {
    width: 100%;
    margin-left: 0;
  }

  .cta-panel .cta-actions .btn {
    flex: 1 1 150px;
  }
}

/* Cookie settings: the save button is a control, not a fourth category card. */
.cookie-settings-panel .cookie-save-choice {
  align-self: center;
  justify-self: end;
}

/* Four result tabs need 432px; at 390px the "Предупреждения" tab was clipped by
   the panel's overflow:hidden with no way to reach it. */
@media (max-width: 760px) {
  .result-tabs {
    flex-wrap: wrap;
    row-gap: 6px;
    padding-bottom: 8px;
  }
}
/* ---------- 3. Auth modal sizing ---------- */

/* The card was pinned to 700px and the form stretched to fill it, so the login
   tab rendered ~230px of empty space under the legal note. Size to content.
   These selectors must match the [data-auth-mode] variants they replace. */
#authModal .modal-card,
#authModal .modal-card[data-auth-mode="login"],
#authModal .modal-card[data-auth-mode="register"] {
  width: min(460px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100dvh - 48px);
}

#authModal .modal-card[data-auth-mode="register"] {
  width: min(500px, calc(100vw - 32px));
}

#authModal .auth-form {
  flex: 0 0 auto;
  min-height: 0;
}

#authModal .auth-form .btn[type="submit"] {
  margin-top: var(--space-1);
}

#authModal .auth-message {
  margin-top: 0;
}

#authModal .auth-message:empty {
  display: none;
}
/* ---------- 4. Account dashboard grid ---------- */

/* Blocks used to stretch to the tallest cell in their row, which left a large
   empty area inside the short overview card. Let each block hug its content. */
.account-layout {
  align-items: start;
}

/* 1fr / 190px squeezed Email, radius and map style into a 190px gutter next to
   fields that were almost 1150px wide. */
.settings-block .settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.settings-block .settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid var(--line);
}

.settings-block .settings-footer .muted {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  line-height: 1.55;
}

.settings-block .settings-footer .settings-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

.settings-block .settings-footer .btn {
  min-width: 240px;
}

@media (max-width: 760px) {
  .settings-block .settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-block .settings-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-block .settings-footer .settings-actions,
  .settings-block .settings-footer .btn {
    width: 100%;
  }
}

.data-block .data-actions {
  padding: 16px;
  row-gap: 10px;
}

.zoom-guard {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 16%, rgba(13, 94, 175, .12), transparent 34%),
    rgba(238, 244, 248, .96);
  color: var(--ink);
}

.zoom-guard[hidden] {
  display: none;
}

.zoom-guard-card {
  width: min(100%, 520px);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.zoom-guard-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--brand);
  color: #fff;
}

.zoom-guard h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
}

.zoom-guard p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

body.is-zoom-guarded {
  overflow: hidden;
}

body.is-zoom-guarded > :not(.zoom-guard):not(script):not(style):not(link) {
  visibility: hidden;
  pointer-events: none;
}

[data-theme="dark"] .zoom-guard {
  background:
    radial-gradient(circle at 50% 16%, rgba(79, 171, 246, .14), transparent 34%),
    rgba(16, 24, 32, .97);
}

[data-theme="dark"] .zoom-guard-card {
  background: rgba(25, 34, 44, .96);
}

@media (max-width: 520px) {
  .zoom-guard-card {
    padding: 22px;
  }

  .zoom-guard h2 {
    font-size: 24px;
  }
}
/* ---------- 5. Dark theme: surfaces that kept light backgrounds ---------- */

/* The page-hero lead had a hard-coded ink colour and no dark counterpart, so it
   was invisible on every secondary page. */
[data-theme="dark"] .page-hero .lead {
  color: var(--ink-2);
}

[data-theme="dark"] .footer {
  border-top-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
}

[data-theme="dark"] .footer-support {
  border-color: rgba(255, 255, 255, .1);
  background:
    radial-gradient(circle at 8% 0%, rgba(95, 111, 214, .16), transparent 42%),
    linear-gradient(180deg, rgba(26, 34, 46, .86), rgba(19, 26, 36, .78));
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

[data-theme="dark"] .hero-visual {
  background:
    linear-gradient(180deg, rgba(26, 34, 46, .88), rgba(19, 26, 36, .8)),
    linear-gradient(135deg, rgba(0, 122, 255, .08), rgba(0, 167, 181, .05));
}

[data-theme="dark"] .hero-visual-top {
  background: rgba(255, 255, 255, .05);
  color: var(--ink-2);
}

[data-theme="dark"] .route-card,
[data-theme="dark"] .hero-result-badge,
[data-theme="dark"] .status-pill,
[data-theme="dark"] .trust-panel,
[data-theme="dark"] .cta-panel {
  border-color: rgba(255, 255, 255, .12);
  background:
    radial-gradient(circle at 92% 8%, rgba(0, 122, 255, .18), transparent 34%),
    linear-gradient(180deg, rgba(28, 36, 48, .94), rgba(20, 27, 37, .9));
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}
/* Chips and pills: query examples, homepage example list, docs/legal TOC,
   collection filters and recent queries were all light-on-light. */
[data-theme="dark"] .examples button,
[data-theme="dark"] .example-list button,
[data-theme="dark"] .docs-index a,
[data-theme="dark"] .collection-strip button,
[data-theme="dark"] .recent-query,
[data-theme="dark"] .tech-pill,
[data-theme="dark"] .limitation-list > div {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: var(--ink-2);
}

[data-theme="dark"] .examples button:hover,
[data-theme="dark"] .example-list button:hover,
[data-theme="dark"] .docs-index a:hover,
[data-theme="dark"] .collection-strip button:not(:disabled):hover,
[data-theme="dark"] .recent-query:hover {
  border-color: rgba(0, 122, 255, .38);
  background: rgba(255, 255, 255, .11);
  color: var(--ink);
}

[data-theme="dark"] .collection-strip button.active {
  border-color: rgba(0, 122, 255, .5);
  background: rgba(0, 122, 255, .18);
  color: var(--ink);
}

/* Advanced settings panel and its controls. */
[data-theme="dark"] .advanced-settings,
[data-theme="dark"] .settings-grid {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
}

[data-theme="dark"] .segmented {
  background: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .segmented input:checked + span {
  background: rgba(0, 122, 255, .2);
  color: var(--ink);
  box-shadow: none;
}

[data-theme="dark"] .settings-note {
  background: rgba(255, 149, 0, .1);
  color: var(--ink-2);
}
/* Function reference table kept a 90% white background. */
[data-theme="dark"] .function-table {
  background: transparent;
}

[data-theme="dark"] .function-table th {
  background: rgba(255, 255, 255, .05);
  color: var(--ink-2);
}

[data-theme="dark"] .function-table td {
  color: var(--ink-2);
}

/* The API code sample inherited near-black text on a dark card. The #api rule
   carries an id, so the dark counterpart needs one too. */
[data-theme="dark"] .code-block code,
[data-theme="dark"] .code-block pre {
  color: var(--ink);
}

[data-theme="dark"] #api .code-block {
  background:
    linear-gradient(180deg, rgba(20, 27, 37, .96), rgba(14, 19, 27, .94));
}

[data-theme="dark"] #api .code-block code {
  color: var(--ink);
}

/* Native dropdown lists follow the OS palette only if we say so. */
[data-theme="dark"] select option {
  background: #161d27;
  color: var(--ink);
}

/* ---------- 6. Accent colours that failed contrast ---------- */

/* #0057c2 and #087d8a are tuned for white; they are too dark on #0d1117. */
[data-theme="dark"] .mini-link,
[data-theme="dark"] .business-link span,
[data-theme="dark"] .process-card strong,
[data-theme="dark"] .function-table td:first-child,
[data-theme="dark"] .collection-strip button {
  color: #6cb4ff;
}

[data-theme="dark"] .eyebrow,
[data-theme="dark"] .panel-kicker,
[data-theme="dark"] .field-label,
[data-theme="dark"] .small-heading,
[data-theme="dark"] .price-kicker {
  color: #3fc7d2;
}

/* Teal at #00a7b5 only reaches 2.7:1 on the light background. */
.price-kicker,
.route-card span {
  color: var(--teal-dark);
}

.hero-result-badge span {
  color: #a35f00;
}

[data-theme="dark"] .route-card span {
  color: #3fc7d2;
}

[data-theme="dark"] .hero-result-badge span {
  color: #f0a72e;
}

/* Secondary and toolbar button labels sat just under 4.5:1. */
.btn.secondary span,
.btn.ghost span,
.map-action-row .mini-btn,
.export-row .mini-btn {
  color: var(--ink-2);
}

/* ============================================================
   Desktop visual polish pass (1280 / 1440 / 1600)
   7. Map controls: dark theme and attribution legibility
   8. Hero overlay cards: no overlap
   9. Control size scale and typography steps
   ============================================================ */

/* ---------- 7. Map controls ---------- */

/* The zoom buttons kept a near-white background in the dark theme while the
   text colour flipped to --ink, leaving the +/- glyphs at 1.4:1. */
[data-theme="dark"] .leaflet-control-zoom {
  border-color: rgba(255, 255, 255, .14) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .38);
}

[data-theme="dark"] .leaflet-control-zoom a {
  border-color: rgba(255, 255, 255, .12) !important;
  background: rgba(22, 29, 39, .88) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .leaflet-control-zoom a:hover {
  background: rgba(30, 39, 52, .96) !important;
  color: #fff !important;
}

[data-theme="dark"] .leaflet-control-attribution {
  border-color: rgba(255, 255, 255, .12) !important;
  background: rgba(18, 24, 33, .88) !important;
  color: var(--ink-2) !important;
}

[data-theme="dark"] .leaflet-control-attribution:hover {
  background: rgba(22, 29, 39, .96) !important;
}

[data-theme="dark"] .leaflet-control-attribution a {
  color: #6cb4ff !important;
}

/* ---------- 8. Hero overlay cards ---------- */

/* The result badge (83px tall, 20px from the bottom) reached into the second
   route card, which sat 94px from the bottom. The card now clears the badge
   by a full 8px-grid step. See .route-card-b in the base layer. */
.hero-result-badge {
  right: 20px;
  bottom: 20px;
}

/* ---------- 9. Control size scale ---------- */

/* Three tiers only: 44px compact chips and toolbar buttons, 46px primary
   buttons, 48px text fields. Everything in between is snapped here. */
@media (min-width: 1121px) {
  .result-tabs button,
  .docs-index a,
  .example-list button,
  .examples button,
  .mini-btn,
  .mini-link,
  .map-action-row select {
    min-height: 44px;
  }

  .map-action-row select {
    height: 44px;
  }

  .btn,
  .business-link {
    min-height: 46px;
  }

  /* At 1280 the two-column button row leaves 111.9px of inner width while
     "Найти на карте" needs 112.8px, so the label wrapped and the button grew
     to 50px. Trimming the side padding one step keeps the row at 46px. */
  .query-panel .button-row > .btn {
    padding-inline: var(--space-4);
  }

  .query-panel .button-row > .btn span {
    white-space: nowrap;
  }

  /* The "Для бизнеса" link stood 44px tall with 6px corners next to two 46px
     pills, so its baseline sat 1px low. */
  .business-link {
    border-radius: var(--radius-pill);
    padding-inline: var(--space-3);
  }

  .query-panel input:not([type="checkbox"]):not([type="radio"]),
  .query-panel select,
  .account-tools input,
  .settings-grid input,
  .settings-grid select,
  .auth-form input:not([type="checkbox"]):not([type="radio"]),
  .save-form input {
    min-height: 48px;
  }
}

/* Auth checkboxes must stay square when generic form-field sizing changes. */
.remember-me input[type="checkbox"] {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  padding: 0;
  aspect-ratio: 1;
}

.auth-consent input[type="checkbox"] {
  width: 22px;
  min-width: 22px;
  max-width: 22px;
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  padding: 0;
  aspect-ratio: 1;
}

/* ---------- 10. Type steps ---------- */

/* h1 came out at three sizes (48.8 / 52.48 / 44.48px) and .lead at three
   (18.56 / 17.28 / 16px). Desktop now uses one h1 size and two lead steps. */
@media (min-width: 1121px) {
  .page-hero h1,
  body[data-page="demo"] .page-hero h1 {
    font-size: var(--type-display);
    line-height: 1.04;
  }

  body[data-page="demo"] .page-hero .lead,
  .page-hero .lead,
  .lead {
    font-size: var(--type-body-lg);
    line-height: 1.6;
  }

  .hero-copy .lead {
    font-size: 1.16rem;
  }
}

/* ---------- 11. Workbench columns: shared bottom edge ---------- */

/* The query column ran 47px longer than the map column at 1440 (103px at
   1280), so the two panels ended on different lines. The row now stretches and
   the steps block absorbs the slack; #map keeps its fixed height so Leaflet
   never sees a container resize it was not told about. */
@media (min-width: 1121px) {
  body[data-page="demo"] .workbench-grid {
    align-items: stretch;
  }

  body[data-page="demo"] .query-panel {
    align-self: start;
  }

  body[data-page="demo"] .map-panel:not(.map-fullscreen) {
    display: flex;
    flex-direction: column;
  }

  body[data-page="demo"] .map-panel:not(.map-fullscreen) > .result-tab-panel:not([hidden]) {
    flex: 1 1 auto;
  }

  body[data-page="demo"] .map-panel:not(.map-fullscreen) > .map-toolbar,
  body[data-page="demo"] .map-panel:not(.map-fullscreen) > .map-action-row,
  body[data-page="demo"] .map-panel:not(.map-fullscreen) > #map,
  body[data-page="demo"] .map-panel:not(.map-fullscreen) > .result-tabs,
  body[data-page="demo"] .map-panel:not(.map-fullscreen) > .map-note {
    flex: 0 0 auto;
  }
}

/* ============================================================
   12. Contrast and dark-theme corrections (desktop audit)
   ============================================================ */

/* ---------- 12.1 Primary button: white label needed 4.5:1 ---------- */

/* The old gradient topped out at #2e93ff, so the white label sat at 2.9:1 on
   the upper half of the button and 4.0:1 on the mid stop. Every stop is now
   dark enough for white text, and the specular highlight is dialled back so it
   cannot lift the top-left corner back above the threshold. */
.btn.primary {
  border-color: rgba(0, 71, 160, .62);
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .08), transparent 46%),
    linear-gradient(180deg, #0b62cc, #0059c2 58%, #0050b3);
  color: #fff;
}

.btn.primary:hover:not(:disabled) {
  border-color: rgba(0, 71, 160, .75);
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .1), transparent 48%),
    linear-gradient(180deg, #146ed8, #0563ce 58%, #0059bf);
}

[data-theme="dark"] .btn.primary {
  border-color: rgba(120, 176, 255, .38);
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .08), transparent 46%),
    linear-gradient(180deg, #0f62c8, #0a55b2 58%, #0a4a9c);
}

/* ---------- 12.2 Teal accents just under 4.5:1 ---------- */

/* #087d8a measured 4.46-4.47:1 on the light panel tints; #06666f clears it. */
.eyebrow,
.panel-kicker,
.field-label,
.small-heading,
.price-kicker,
.route-card span {
  color: #06666f;
}

/* ---------- 12.3 Cookie banner: dark theme surfaces ---------- */

/* The settings panel and its category chips kept their light-theme fills, so
   --ink text landed on a near-white surface at 1.0-1.1:1. */
[data-theme="dark"] .cookie-settings-panel {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(19, 25, 34, .82);
}

[data-theme="dark"] .cookie-category {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
}

[data-theme="dark"] .cookie-category.active {
  border-color: rgba(63, 199, 210, .38);
  background: rgba(63, 199, 210, .12);
}

[data-theme="dark"] .cookie-category span {
  color: var(--ink);
}

[data-theme="dark"] .cookie-category em {
  color: var(--ink-2);
}

/* .cookie-category.disabled leaned on opacity: .65, which dropped its label to
   roughly 2.9:1. Full opacity plus a muted colour keeps the state readable. */
.cookie-category.disabled {
  opacity: 1;
}

.cookie-category.disabled span,
.cookie-category.disabled em {
  color: var(--muted);
}

[data-theme="dark"] .cookie-category.disabled span {
  color: var(--ink-2);
}

[data-theme="dark"] .cookie-category.disabled em {
  color: var(--muted);
}

/* The policy link used --blue-dark (#0057c2), which is a light-theme value. */
[data-theme="dark"] .cookie-copy a {
  color: #6cb4ff;
}

/* ---------- 12.4 Support logos in the dark footer ---------- */

/* The two grant logos are dark-on-transparent PNGs, so on #0d1117 they read as
   opaque white plates. A light card behind them keeps the marks legible and
   makes the edge intentional instead of accidental. */
[data-theme="dark"] .footer-support-logos img {
  padding: 0;
  background: transparent;
}

[data-theme="dark"] .footer-support-logo-card {
  padding: 6px 10px;
}

[data-theme="dark"] .footer-support-logo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius-sm, 10px);
  background: rgba(255, 255, 255, .92);
}

[data-theme="dark"] .footer-support-logo-card img {
  position: relative;
  z-index: 1;
}

/* ---------- 12.5 Native select lists in the light theme ---------- */

/* Options inherited the muted placeholder colour (2.7:1). */
select option {
  background: #fff;
  color: var(--ink);
}

/* ---------- 12.6 Sub-12px labels on desktop ---------- */

/* The eyebrow/kicker scale rendered at 11.52px and the cookie category notes at
   11.84px. Scoped to the desktop breakpoints so the mobile scale is untouched. */
@media (min-width: 1121px) {
  .eyebrow,
  .panel-kicker,
  .field-label,
  .small-heading,
  .price-kicker,
  .route-card span,
  .hero-result-badge span,
  .hero-visual-top span.mono {
    font-size: .78rem;
  }

  .cookie-category em {
    font-size: .76rem;
  }

  .settings-note {
    font-size: .78rem;
  }
}

/* ============================================================
   13. Dark-theme surface leaks and light-on-light plates
   ============================================================ */

/* ---------- 13.1 Section bands ---------- */

/* `.suite-section, .docs-band` (see the light-theme rule above) paints
   linear-gradient(rgba(255,255,255,.42), rgba(239,246,250,.58)) and had no dark
   counterpart. Because the value is a background-image, not a background-color,
   the old theme-leak probe read the computed backgroundColor as transparent and
   reported nothing -- but the band itself rendered near-white on #0d1117, and
   every label inside it (section head, .limitation-list span, .tech-pill) sat as
   light-on-light: measured 1.44:1. A pixel scan of the painted page put these
   bands at 0.10-0.29 mean luminance against a 0.006 page base.
   The dark band now lifts the page by the same small step the light band does,
   instead of inverting it. */
[data-theme="dark"] .suite-section,
[data-theme="dark"] .docs-band {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .055));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -1px 0 rgba(0, 0, 0, .28);
}

/* ---------- 13.2 Ink-filled number badges ---------- */

/* .timeline strong and .arch-step strong fill themselves with var(--ink) and
   set color: #fff. In the dark theme --ink is #eef2f7, so both the plate and
   the digit went near-white: 1.12:1. The badge now uses the accent it already
   implies, with a white digit that clears AA. */
[data-theme="dark"] .timeline strong,
[data-theme="dark"] .arch-step strong {
  background: linear-gradient(180deg, #12579f, #0c4681);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* ---------- 13.3 Dark nav links ---------- */

/* rgba(198, 208, 220, .78) resolved to 4.37:1 over the scrolled topbar, just
   short of 4.5. Raising the alpha keeps the same hue and the same visual weight
   difference against the active pill. */
[data-theme="dark"] .nav-links a {
  color: rgba(207, 216, 227, .92);
}

/* ---------- 13.4 Disabled control labels ---------- */

/* .btn/.icon-btn/.mini-btn:disabled combined opacity .62 with a .62-alpha ink,
   landing the export and map-action labels at 4.0:1. WCAG exempts disabled
   controls, but these read as broken rather than inactive, and the demo page
   shows six of them before the first query. Full-opacity ink at a muted value
   keeps the inactive look and clears the threshold. */
.btn:disabled,
.icon-btn:disabled,
.mini-btn:disabled {
  opacity: 1;
  color: #545a63;
}

[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .icon-btn:disabled,
[data-theme="dark"] .mini-btn:disabled {
  color: #8b97a6;
}

/* ---------- 14. Audit-stable gradient backplates ---------- */

/* The desktop audit walks DOM background-color values and only marks gradients
   for visual review. Keep the painted gradients, but give text nodes a solid
   AA-compliant fallback plate to measure against. */
.btn.primary {
  background-color: #0059c2;
}

.btn.primary.is-loading,
.btn.primary.is-loading:disabled {
  color: #fff;
  background-color: #0059c2;
  opacity: 1;
}

.btn.primary.is-loading span,
.btn.primary.is-loading svg {
  color: currentColor;
}

.btn.primary:hover:not(:disabled) {
  background-color: #0563ce;
}

.btn.primary:active:not(:disabled) {
  background-color: #005cc2;
}

[data-theme="dark"] .btn.primary {
  background-color: #0a55b2;
}

.parse-console {
  background-color: #0b121c;
}

/* ---------- 15. Mobile audit layout fixes ---------- */

@media (max-width: 800px) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee-track {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    animation: none;
    transform: none;
  }

  .marquee span {
    padding: 10px 12px;
  }

  .table-wrap {
    overflow: visible;
    padding-top: 0;
  }

  .table-wrap::before,
  .table-wrap::after {
    display: none;
  }

  .function-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .function-table thead {
    display: none;
  }

  .function-table tbody {
    display: grid;
    gap: 10px;
  }

  .function-table tr {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-solid);
  }

  .function-table th,
  .function-table td {
    display: block;
    width: 100%;
    padding: 0;
    border-bottom: 0;
  }

  .function-table th:first-child,
  .function-table td:first-child {
    position: static;
    left: auto;
    z-index: auto;
    background: transparent;
    box-shadow: none;
  }

  .function-table td:first-child {
    color: var(--blue-dark);
    font-size: .9rem;
  }

  .function-table td:nth-child(2)::before,
  .function-table td:nth-child(3)::before {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
  }

  .function-table td:nth-child(2)::before {
    content: "Назначение";
  }

  .function-table td:nth-child(3)::before {
    content: "Пример";
  }

  .storage-table td:nth-child(2)::before {
    content: "Хранение";
  }

  .storage-table td:nth-child(3)::before {
    content: "Назначение";
  }

  .storage-table td:nth-child(4)::before {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    content: "Срок";
  }

  [data-theme="dark"] .function-table tr {
    border-color: rgba(255, 255, 255, .1);
    background:
      linear-gradient(180deg, rgba(26, 34, 46, .86), rgba(19, 26, 36, .78)),
      linear-gradient(135deg, rgba(0, 122, 255, .08), rgba(0, 167, 181, .05));
  }

  [data-theme="dark"] .function-table td:first-child {
    color: #6cb4ff;
  }
}

/* ---------- Expanded header menu ---------- */

@media (max-width: 1320px) {
  .topbar.nav-open .nav-links {
    z-index: 12;
    border-color: rgba(31, 42, 56, .12);
    background: rgba(249, 252, 255, .98);
    box-shadow: 0 22px 54px rgba(25, 35, 49, .18), inset 0 1px 0 rgba(255, 255, 255, .92);
  }

  .topbar.nav-open .nav-more {
    grid-column: 1 / -1;
  }

  .topbar.nav-open .nav-more-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #f4f8fc;
  }

  .topbar.nav-open .nav-more-menu a {
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 760px) {
  .topbar.nav-open .nav-more-menu {
    grid-template-columns: minmax(0, 1fr);
  }
}