/* =============================================================================
   Proximatory — product marketing site. A product of chabasan.ai.
   Shares the chabasan.ai product-site design system (warm dark palette,
   gold / eclipse-red / cyan accents used sparingly). Base atoms below are the
   common stylesheet; the Proximatory-specific additions (product hero with
   image, pending App Store badge, license teaser, data/licenses area) live in
   the "Proximatory additions" section at the end of this file.
   No frameworks, no external fonts. CSP-safe: no inline styles or scripts.
   ============================================================================= */

:root {
  --c-bg:       #050506;
  --c-bg-soft:  #0b0c10;
  --c-text:     #F6F2EA;
  --c-muted:    #B8B2A8;
  --c-gold:     #F6B34E;
  --c-red:      #E45B4A;
  --c-cyan:     #78D7E8;
  --c-border:   rgba(246, 242, 234, 0.14);
  --c-border-soft: rgba(246, 242, 234, 0.08);
  --radius-img: 8px;
  --content-max: 1200px;
  --copy-max: 44rem;
}

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

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

h1 {
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1.05;
  font-weight: 700;
}
h2 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.12;
  font-weight: 650;
}
p { max-width: var(--copy-max); }

a { color: var(--c-cyan); }
a:hover { color: var(--c-text); }

:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Skip link --------------------------------------------------------------- */

.skip-link {
  position: absolute;
  inset-inline-start: 0.75rem;
  top: -4rem;
  z-index: 100;
  padding: 0.55rem 1rem;
  background: var(--c-bg-soft);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.75rem; }

/* --- Header: sticky, compact, slightly transparent ---------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 5, 6, 0.92);
  border-bottom: 1px solid var(--c-border-soft);
}
/* The blur lives on a ::before layer, NOT on .site-header itself: a
   backdrop-filter on the header would make it the containing block for
   fixed-position descendants (per spec), which broke the mobile language
   bottom sheet (#lang-panel is position: fixed and must anchor to the
   viewport, not to the 56px header). A pseudo-element has no descendants,
   so the blur is safe there. */
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .site-header {
    background: transparent;
  }
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(5, 5, 6, 0.7);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.header-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  min-height: 56px;
  padding: 0.45rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
}

/* Left header cell: Home plus (German only) a Funktionen link, so visitors can
   switch between the landing page and the feature catalog from the top bar. */
.header-nav { justify-self: start; display: flex; align-items: center; gap: 0.1rem; }

.nav-home,
.nav-features {
  color: var(--c-text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
}
.nav-home:hover,
.nav-features:hover { background: rgba(246, 242, 234, 0.08); color: var(--c-text); }

.brand-product {
  justify-self: center;
  color: var(--c-text);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.brand-product:hover { color: var(--c-gold); }

/* Screen-reader-only text (e.g. the "shown in English" note on locales
   that have no translation yet). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Language menu ------------------------------------------------------------ */

.lang-menu { justify-self: end; position: relative; }

.lang-toggle {
  font: inherit;
  font-size: 0.9rem;
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 11rem;
}
.lang-toggle .lang-current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang-toggle::after {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.45em;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-15%);
}
.lang-toggle:hover { border-color: var(--c-cyan); }
.lang-menu.open .lang-toggle { border-color: var(--c-cyan); color: var(--c-cyan); }

.lang-panel { display: none; }
.lang-menu.open .lang-panel,
html.no-js .lang-menu:focus-within .lang-panel {
  display: block;
}

.lang-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.15rem 0.5rem;
}
.lang-grid a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--c-text);
  text-decoration: none;
  font-size: 0.9rem;
  min-width: 0;
}
.lang-flag {
  flex: none;
  font-size: 1.05rem;
  line-height: 1;
  /* Keep the two-letter fallback (no emoji-flag support, e.g. Windows) tidy. */
  font-variant-emoji: emoji;
}
.lang-name {
  min-width: 0;
  /* Long native names (e.g. "Português (Portugal)") may wrap to a second
     line; the EN fallback badge must never be clipped or pushed out — it is
     the non-color indicator for untranslated locales. */
  overflow-wrap: anywhere;
}
/* Push the EN fallback badge to the trailing edge regardless of name length. */
.lang-grid .lang-note { margin-inline-start: auto; }
.lang-grid a:hover { background: rgba(246, 242, 234, 0.08); color: var(--c-text); }
.lang-grid a[data-available="false"] { color: var(--c-muted); }
.lang-grid a[aria-current="true"] {
  border-color: var(--c-gold);
  color: var(--c-gold);
  font-weight: 600;
}
.lang-note {
  flex: none;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 0 0.3em;
  line-height: 1.5;
}

/* Desktop / large: anchored dropdown */
@media (min-width: 768px) {
  .lang-panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.5rem);
    width: min(58rem, calc(100vw - 2rem));
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 0.75rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }
}
/* Tablet: max four columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .lang-panel { width: min(40rem, calc(100vw - 2rem)); }
  .lang-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Mobile: fixed bottom sheet, single column, scrollable */
@media (max-width: 767px) {
  .lang-panel {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    max-height: 72vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--c-bg-soft);
    border-top: 1px solid var(--c-border);
    border-radius: 14px 14px 0 0;
    padding: 0.9rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.65);
  }
  .lang-grid { grid-template-columns: 1fr; gap: 0.1rem; }
  .lang-grid a { padding: 0.65rem 0.75rem; font-size: 1rem; }
  /* 44px minimum touch target (Apple HIG / WCAG AAA) for the toggle. */
  .lang-toggle { min-height: 44px; }
}

html.lang-sheet-open { overflow: hidden; }

/* Phone header: the fixed 3-column grid (Home + Funktionen on the left, brand
   centered, language on the right) is too wide for a narrow phone once the
   Funktionen link is present, so it overflowed horizontally. Switch to a
   content-sized flex row and collapse the language toggle to flag + chevron
   (the "Deutsch" label stays for screen readers) so the whole bar fits. */
@media (max-width: 640px) {
  .header-inner {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    padding-inline: 0.85rem;
  }
  .nav-home,
  .nav-features { padding: 0.3rem 0.4rem; font-size: 0.9rem; }
  .brand-product { font-size: 1rem; letter-spacing: 0.02em; }
  .lang-toggle { padding: 0.3rem 0.5rem; gap: 0.3rem; }
  .lang-toggle .lang-current {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
}

/* --- Shared text atoms ---------------------------------------------------------- */

.kicker {
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.accent-cyan .kicker { color: var(--c-cyan); }
.accent-red  .kicker { color: var(--c-red); }
.accent-gold .kicker { color: var(--c-gold); }

/* --- Hero ------------------------------------------------------------------------ */

.hero {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: clamp(3.5rem, 9vh, 7rem) 1.25rem 2.5rem;
  text-align: center;
}
.hero .kicker { margin-bottom: 1rem; }
.hero h1 { margin-inline: auto; max-width: 18ch; }
.hero-body {
  margin: 1.5rem auto 0;
  max-width: var(--copy-max);
  font-size: 1.125rem;
  color: var(--c-muted);
}
.hero-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.cta {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
}
.cta-secondary {
  color: var(--c-cyan);
  border: 1px solid var(--c-cyan);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cta-secondary:hover {
  background: var(--c-cyan);
  color: var(--c-bg);
}
/* Post-release primary CTA: filled App Store pill with the Apple glyph. */
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--c-text);
  color: var(--c-bg);
  border: 1px solid var(--c-text);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cta-primary:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-bg);
}
.cta-apple {
  flex: none;
  width: 0.9em;
  height: auto;
  /* Optically center the glyph with the cap height of the label. */
  margin-top: -0.12em;
}

.hero-divider {
  width: min(11rem, 50%);
  height: 2px;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--c-gold), var(--c-red), var(--c-cyan));
}

/* --- Feature sections -------------------------------------------------------------- */

.feature {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: clamp(3rem, 7vh, 5.5rem) 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.feature + .feature { border-top: 1px solid var(--c-border-soft); }

.feature-copy .kicker { margin-bottom: 0.9rem; }
.feature-copy h2 { max-width: 24ch; }
.feature-body {
  margin-top: 1.25rem;
  color: var(--c-text);
}
.feature-support {
  color: var(--c-muted);
  font-size: 1rem;
  border-top: 1px solid var(--c-border-soft);
  padding-top: 1.1rem;
}

.feature-media {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}
.feature-media img {
  width: 100%;
  border-radius: var(--radius-img);
}

/* Mobile / stacked: edge-to-edge feel, 16/10 crop */
@media (max-width: 1023px) {
  .feature-media img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
  /* The hotel photo must stay uncropped: the iPhone (lower left), the window,
     the wall clock and the moon over the sea together carry the message and a
     hard 16/10 crop would cut them (spec §1). Show its natural 3:2 frame. */
  .feature--hotel .feature-media img {
    aspect-ratio: auto;
    object-fit: fill;
  }
}

/* Desktop: two-column grid, media column spans copy + support rows */
@media (min-width: 1024px) {
  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    row-gap: 1.75rem;
    align-items: center;
  }
  .media-left  .feature-media   { grid-column: 1; grid-row: 1 / span 2; }
  .media-left  .feature-copy    { grid-column: 2; grid-row: 1; align-self: end; }
  .media-left  .feature-support { grid-column: 2; grid-row: 2; align-self: start; }
  .media-right .feature-media   { grid-column: 2; grid-row: 1 / span 2; }
  .media-right .feature-copy    { grid-column: 1; grid-row: 1; align-self: end; }
  .media-right .feature-support { grid-column: 1; grid-row: 2; align-self: start; }

  /* No support line (e.g. the hotel section): the copy spans both rows and
     centers vertically against the full-height media — no empty bottom row. */
  .feature--no-support .feature-copy { grid-row: 1 / span 2; align-self: center; }

  /* Eclipse mosaic: large family-map + smaller overlapping couple-simulator */
  .feature--eclipse .feature-media { display: block; position: relative; }
  .feature--eclipse .fig-mosaic-main { width: 90%; }
  .feature--eclipse .fig-mosaic-overlap {
    width: 56%;
    margin-block-start: -18%;
    margin-inline-start: auto;
  }
  .feature--eclipse .fig-mosaic-overlap img {
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65);
    outline: 1px solid var(--c-border-soft);
    outline-offset: -1px;
  }
}

/* --- Personal story (spec §2) ----------------------------------------------------------
   Rendered as two feature blocks so it shares the rest of the page's text/image
   rhythm (childhood half, then travel/why half). The copy is multi-paragraph,
   so it reads top-aligned beside its photo rather than vertically centered. */

.story-body p { max-width: none; }
.story-body p + p { margin-top: 1.1rem; }
.feature--story .feature-body { margin-top: 1.5rem; }

@media (min-width: 1024px) {
  /* Long copy reads better starting at the top (kicker + heading lead), while
     the photo is centered against it so the column has no large empty gap. */
  .feature--story { align-items: start; }
  .feature--story .feature-copy  { grid-row: 1 / span 2; align-self: start; }
  .feature--story .feature-media { grid-row: 1 / span 2; align-self: center; }
}

/* --- Final CTA ------------------------------------------------------------------------ */

.final-cta {
  border-top: 1px solid var(--c-border-soft);
  background: var(--c-bg-soft);
  text-align: center;
  padding: clamp(4rem, 10vh, 6.5rem) 1.25rem;
}
.final-cta h2 { margin-inline: auto; max-width: 22ch; }
.final-cta-body {
  margin: 1.25rem auto 0;
  max-width: var(--copy-max);
  color: var(--c-muted);
  font-size: 1.125rem;
}
.final-cta-actions {
  margin: 2rem auto 0;
  max-width: none;
}

/* --- Legal pages (Impressum / Datenschutz) ---------------------------------------------
   German-only mirrors of the central chabasan.ai legal texts, served on this
   domain so visitors never leave the product site. Long-form document
   typography, scoped so the marketing sections keep their display sizes. */

.legal-page { padding: clamp(2.5rem, 6vh, 4.5rem) 1.25rem; }
.legal-inner { max-width: 46rem; margin-inline: auto; }
.legal-page .page-logo { height: 3rem; width: auto; margin-bottom: 2rem; }
.legal-note {
  font-size: 0.9rem;
  color: var(--c-muted);
  border: 1px dashed var(--c-border);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  margin-bottom: 2.25rem;
}
.legal-page h1 {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  margin-bottom: 1.25rem;
}
.legal-page h2 {
  font-size: 1.35rem;
  font-weight: 650;
  margin: 2.25rem 0 0.8rem;
}
.legal-page h3 {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 1.6rem 0 0.6rem;
}
.legal-page p { margin-bottom: 0.9rem; }
.legal-page ul {
  margin: 0 0 1rem;
  padding-inline-start: 1.4rem;
}
.legal-page li { margin-bottom: 0.45rem; }
.legal-page li::marker { color: var(--c-muted); }
.legal-page .index { list-style: none; padding-inline-start: 0; }
.legal-page .index li { margin-bottom: 0.2rem; }
.legal-page a { overflow-wrap: anywhere; }
.legal-page .seal {
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: var(--c-muted);
}
.legal-page .seal a { color: var(--c-muted); }
.legal-page .seal a:hover { color: var(--c-text); }

/* --- 404 ------------------------------------------------------------------------------ */

.error-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.25rem;
}
.error-page .error-code {
  font-size: clamp(3rem, 10vw, 5.5rem);
  color: var(--c-gold);
}
.error-page .error-sub { margin: 0.75rem auto 0; color: var(--c-muted); }
.error-page .error-home { margin-top: 2rem; }

/* --- Features catalog page (/funktionen/) ----------------------------------------------
   Same two-column rhythm as the homepage: each image block is a .feature row
   (composite one side, copy the other) alternating sides; text-only blocks are
   centered interludes. Reuses .feature / .media-left|right / .feature-media /
   .feature-copy from the homepage. */

.features-hero { padding-bottom: 1.5rem; }

.feature--cat .feat-lead {
  margin-top: 1.1rem;
  color: var(--c-muted);
  font-size: 1.0625rem;
}

/* The catalog copy column carries more than the homepage's heading + one line,
   so it spans both grid rows and centers against the media. The media column is
   made the wider one (~56%) so the screenshots get more room (owner request),
   while the page keeps the homepage's alternating two-column rhythm. */
@media (min-width: 1024px) {
  .feature.feature--cat .feature-copy  { grid-row: 1 / span 2; align-self: center; }
  .feature.feature--cat .feature-media { grid-row: 1 / span 2; align-self: center; }
  .feature--cat.media-left  { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .feature--cat.media-right { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* The composites are 16:9; override the homepage's 16:10 mobile crop so the
   outer phones of multi-phone scenes are never cut off. */
@media (max-width: 1023px) {
  .feature--cat .feature-media img { aspect-ratio: 16 / 9; object-fit: cover; }
}

/* Bulleted capabilities */
.feat-points { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.6rem; }
.feat-points li { position: relative; padding-inline-start: 1.4rem; color: var(--c-text); }
.feat-points li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-gold);
}
.accent-cyan .feat-points li::before { background: var(--c-cyan); }
.accent-red  .feat-points li::before { background: var(--c-red); }

/* Labelled groups (e.g. the three calculation methods), rendered inline */
.feat-groups-title { font-weight: 650; margin: 1.5rem 0 0; }
.feat-groups { margin: 0.8rem 0 0; display: grid; gap: 0.8rem; }
.feat-group dt { display: inline; font-weight: 650; color: var(--c-gold); }
.feat-group dd { display: inline; margin: 0; color: var(--c-text); }
.accent-cyan .feat-group dt { color: var(--c-cyan); }
.accent-red  .feat-group dt { color: var(--c-red); }
.feat-group dt::after { content: " – "; color: var(--c-muted); font-weight: 400; }

/* Example callout */
.feat-example {
  margin-top: 1.5rem; padding: 0.9rem 1.1rem;
  border-inline-start: 3px solid var(--c-gold);
  background: var(--c-bg-soft); border-radius: 0 8px 8px 0;
  color: var(--c-muted); font-size: 0.98rem;
}
.accent-cyan .feat-example { border-inline-start-color: var(--c-cyan); }
.accent-red  .feat-example { border-inline-start-color: var(--c-red); }

/* Text-only interlude between image blocks: centered band; on wider screens the
   bullets split into two readable columns so the section stays balanced. */
.feat-interlude {
  max-width: var(--content-max); margin-inline: auto;
  padding: clamp(2.75rem, 7vh, 4.5rem) 1.25rem;
  border-top: 1px solid var(--c-border-soft);
  text-align: center;
}
.feat-interlude-inner { max-width: 52rem; margin-inline: auto; }
.feat-interlude .kicker { margin-bottom: 0.8rem; }
.feat-interlude h2 { margin-inline: auto; max-width: 24ch; }
.feat-interlude .feat-lead {
  margin: 1.1rem auto 0; max-width: var(--copy-max);
  color: var(--c-muted); font-size: 1.0625rem;
}
.feat-interlude .feat-points { margin-top: 1.75rem; text-align: start; }
.feat-interlude .feat-example { margin-inline: auto; max-width: 40rem; text-align: start; }
@media (min-width: 768px) {
  .feat-interlude .feat-points { grid-template-columns: 1fr 1fr; gap: 0.7rem 2.5rem; }
}
.feat-interlude + .feature,
.feat-midcta + .feature { border-top: 1px solid var(--c-border-soft); }

/* Mid-page App Store CTA */
.feat-midcta {
  max-width: var(--content-max); margin-inline: auto;
  padding: clamp(2rem, 5vh, 3rem) 1.25rem; text-align: center;
  border-top: 1px solid var(--c-border-soft);
}
.feat-midcta-line { margin: 0 auto 1.2rem; font-size: 1.25rem; font-weight: 600; color: var(--c-text); }

/* --- Footer ----------------------------------------------------------------------------- */

main { flex: 1; }

.site-footer {
  border-top: 1px solid var(--c-border-soft);
  background: var(--c-bg);
}
.footer-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 1.6rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--c-muted);
}
.footer-inner p { max-width: none; }
.site-footer a { color: var(--c-muted); text-decoration: none; }
.site-footer a:hover { color: var(--c-text); text-decoration: underline; }
/* Maker attribution: small chabasan.ai logo + "product of Csaba Lengyel",
   same style and proportions as the chabasan.ai footer. */
.footer-brand { display: flex; align-items: center; gap: 0.9rem; }
.footer-logo { height: 26px; width: auto; opacity: 0.6; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-brand { flex-direction: column; gap: 0.6rem; }
  .footer-links { justify-content: center; }
}

/* =============================================================================
   Proximatory additions
   ============================================================================= */

/* Pending App Store badge: rendered as a non-interactive <span> until the store
   URL is live (build.mjs appStoreCta). Looks like the primary CTA but has no
   hover shift and a default cursor, so it doesn't read as clickable. */
.app-store-cta.is-pending { cursor: default; }
.app-store-cta.is-pending:hover {
  background: var(--c-text);
  border-color: var(--c-text);
  color: var(--c-bg);
}

/* --- Homepage license teaser: keeps the OSM/ODbL notice visible everywhere ----- */
.license-teaser {
  border-top: 1px solid var(--c-border-soft);
  background: var(--c-bg-soft);
  padding: clamp(3rem, 8vh, 5rem) 1.25rem;
  text-align: center;
}
.license-teaser-inner { max-width: 52rem; margin-inline: auto; }
.license-teaser h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-inline: auto;
  max-width: 22ch;
}
.license-teaser p { margin: 1rem auto 0; color: var(--c-muted); }
.license-attribution {
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.license-teaser-cta { margin-top: 1.75rem; }

/* --- Data / licenses area (/data/osm-admin-level-2/) ----------------------------- */
.data-page { padding: clamp(2.5rem, 6vh, 4.5rem) 1.25rem; }
.data-inner { max-width: 52rem; margin-inline: auto; }
.data-page h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin: 0.6rem 0 0; }
.data-lead { margin-top: 1.25rem; color: var(--c-muted); font-size: 1.0625rem; }

.data-block { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--c-border-soft); }
.data-block h2 { font-size: 1.4rem; font-weight: 650; margin-bottom: 1rem; }
.data-attribution { font-weight: 650; color: var(--c-text); }
.data-block p { margin-bottom: 0.75rem; }

.data-links { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; }

.data-meta { display: grid; }
.data-row {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: 0.4rem 1.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--c-border-soft);
}
.data-row dt { color: var(--c-muted); }
.data-row dd { margin: 0; overflow-wrap: anywhere; max-width: none; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  color: var(--c-gold);
  overflow-wrap: anywhere;
}
.data-path { color: var(--c-muted); }
.data-path code { color: var(--c-muted); }

.data-downloads { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.75rem; }
.data-download {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.data-download:hover { border-color: var(--c-cyan); background: var(--c-bg); }
.data-download-name { font-weight: 650; color: var(--c-text); }
.data-download-note { font-size: 0.9rem; color: var(--c-muted); }

@media (max-width: 560px) {
  .data-row { grid-template-columns: 1fr; gap: 0.15rem; }
  .data-row dt { font-size: 0.85rem; }
}