/* ══════════════════════════════════════════════════════════════════════════
   KWICKEY® — Stylesheet
   ──────────────────────────────────────────────────────────────────────────
   Naming convention
     - Reusable components use BEM:
         .block, .block__element, .block--modifier
         State classes: .is-* (e.g. .is-active, .is-discounted)
     - Page-specific section styles (hero, steps, scenarios, …) stay on
       their original kebab-case classes for minimal churn.
   ──────────────────────────────────────────────────────────────────────────
   TABLE OF CONTENTS
     1.  Tokens & reset
     2.  Utilities (fade-in, pill-btn)
     3.  COMPONENTS
         3.1  Button (.btn)
         3.2  Link (.link)
         3.3  Nav (.nav)
         3.4  Footer (.footer)
         3.5  Modal — base (.modal)
         3.6  Modal — visuals (.modal__visual)
         3.7  Form (.form__*)
         3.8  Auth form (.auth-form)
         3.9  Buy form (.buy__*)
     4.  PAGE SECTIONS
         4.1  Section primitives (.section, .section-label, …)
         4.2  Hero (home)
         4.3  Trust bar
         4.4  Steps grid (how it works)
         4.5  Scenarios
         4.6  Comparison table
         4.7  Calculator
         4.8  Testimonials
         4.9  Final CTA
         4.10 Page hero (sub-pages)
         4.11 FAQ accordion
         4.12 Legal pages
         4.13 Support box
     5.  Responsive overrides
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS & RESET ─── */

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

:root {
  color-scheme: light;

  /* Brand */
  --mint: #5a5eff;
  --mint-dim: rgba(90, 94, 255, 0.1);
  --mint-border: rgba(90, 94, 255, 0.3);
  --mint-hover: #4a4eff;

  /* Surfaces */
  --dark: #0a0a0a;
  --dark2: #141414;
  --white: #fff;
  --off-white: #f9f9f7;
  --warm-bg: #f6f5f0;

  /* Feedback */
  --error: #c0392b;
  --error-bg: rgba(231, 76, 60, 0.08);
  --error-border: rgba(231, 76, 60, 0.25);
  --warn: #8a6d00;
  --warn-bg: rgba(255, 196, 0, 0.08);
  --warn-border: rgba(255, 196, 0, 0.3);
  --stale: #9a3f0a;
  --success: #1f8a4c;
  --success-bg: rgba(46, 204, 113, 0.08);
  --success-border: rgba(46, 204, 113, 0.25);

  /* Typography */
  --font-display: 'Anybody', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Typography scale (used by app section + future refactors) */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  /* App surfaces — tech-startup neutrals */
  --app-bg: #fafaf8;
  --app-surface: #ffffff;
  --app-surface-2: #f5f4ef;
  --app-border: rgba(15, 15, 30, 0.06);
  --app-border-strong: rgba(15, 15, 30, 0.12);
  --app-divider: rgba(15, 15, 30, 0.06);
  --app-text: #0a0a0a;
  --app-muted: #6b6b76;
  --app-muted-2: #9a9aa3;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 15, 30, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 15, 30, 0.05);
  --shadow-md: 0 6px 20px rgba(15, 15, 30, 0.06);
  --shadow-lg: 0 16px 48px rgba(15, 15, 30, 0.1);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Semantic theme tokens (light defaults) */
  --page-bg: #fff;
  --surface: var(--off-white);
  --surface-2: var(--warm-bg);
  --hero-bg: var(--dark); /* modal visuals / app image stages only */
  /* Home hero keeps the near-black look in both themes; final CTA + page heroes
     stay dark in light mode, but in a softer, friendlier graphite. */
  --hero-section-bg: #050506;
  --hero-section-bg-alt: #23262f;
  --trust-bar-bg: var(--page-bg);
  --hero-text: var(--on-dark);
  --hero-text-muted: #a8aab4;
  --hero-text-subtle: #83858f;
  --btn-outline-border: rgba(255, 255, 255, 0.25);
  --footer-bg: #050505;
  --text: #111;
  --text-muted: #555;
  --text-subtle: #777;
  --text-faint: #999;
  --on-dark: #fff;
  --on-dark-muted: #999;
  --on-dark-subtle: #666;
  --border: #eee;
  --border-2: #eaeaea;
  --border-3: #f0f0f0;
  --border-strong: #ddd;
  --nav-bg: rgba(255, 255, 255, 0.92);
  --drawer-bg: #fff;
  --modal-close-bg: rgba(255, 255, 255, 0.92);
  --input-bg: var(--off-white);
  --input-bg-focus: #fff;
  --placeholder: #aaa;
  --checkbox-bg: #fff;
  --checkbox-border: #d8d8d8;
  --spinner-track: rgba(10, 10, 10, 0.25);
  --oauth-btn-bg: #fff;
  --oauth-btn-hover: #f7f8f8;
  --oauth-divider: #e6e6e6;
  --pill-inactive-border: #333;
  --pill-inactive-text: #777;
  --product-media-bg: #f4f4f4;
  --soldout-bg: #fef3f2;
  --soldout-border: #fecdca;
  --soldout-text: #b42318;
  --badge-neutral-bg: #f0f0f0;
  --badge-neutral-border: #e0e0e0;
  --badge-neutral-text: #888;
  /* Step watermark picks up the section's beige so it reads as a tint of the
     background rather than grey. */
  --step-num: var(--surface-2);
  --pw-bar-bg: #e8e8e6;
  --pw-bullet: #c0c0bd;
  --spline-gradient: linear-gradient(160deg, #f6f5f0 0%, #efeee8 100%);
  --anhaenger-pill-bg: #eef0f3;
  --anhaenger-pill-text: #5b6470;
  --anhaenger-pill-border: #d9dde3;
  --form-group-hover: #eeede6;
  --health-card-bg: #f6f6f8;
  --health-card-border: #e8e8ec;
  --health-pass-bg: #eef9f2;
  --health-pass-border: #2d9a5a;
  --health-fail-bg: #fdf0f0;
  --health-fail-border: #d64545;
  --lang-card-bg: #fff;
  --lang-card-border: #e5e5e5;
  --lang-card-hover: #c4c4c4;
  --lang-flag-bg: #f0f0f0;
  --footer-lang-border: #3a3a3a;
  --footer-lang-color: #aaa;
  --footer-lang-hover-bg: rgba(255, 255, 255, 0.06);
  --footer-lang-hover-color: #eee;
  --footer-link: #666;
  --footer-link-hover: #999;
  --footer-info: #555;
  --nav-cta-bg: #111;
  --nav-cta-hover: #000;
  --logo-mark: #444;
  --drawer-backdrop: rgba(10, 10, 10, 0.45);
  --modal-backdrop: rgba(10, 10, 10, 0.55);
  --compare-dash: #ccc;
  /* One step darker than the beige body rows so the head reads as a band. */
  --compare-head-bg: #efeee8;
  --calc-muted: #bbb;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --dark: #0a0a0a;
  --dark2: #141414;
  --white: #fff;
  --off-white: #16171c;
  --warm-bg: #1d1e25;

  /* Error / warn text on dark surfaces needs lighter hues than light mode. */
  --error: #ff8a7a;
  --warn: #f0c84a;
  --warn-bg: rgba(255, 196, 0, 0.12);
  --warn-border: rgba(255, 196, 0, 0.35);
  --stale: #ffb070;

  --page-bg: #0e0f13;
  --surface: #16171c;
  --surface-2: #1d1e25;
  --hero-bg: #050506;
  --hero-section-bg: #050506;
  --hero-section-bg-alt: #050506;
  --trust-bar-bg: var(--surface-2);
  --hero-text: var(--on-dark);
  --hero-text-muted: var(--on-dark-muted);
  --hero-text-subtle: var(--on-dark-subtle);
  --btn-outline-border: rgba(255, 255, 255, 0.25);
  --footer-bg: #050506;
  --text: #f2f2f4;
  --text-muted: #b6b7c0;
  --text-subtle: #8c8d98;
  --text-faint: #6b6c77;
  --on-dark: #fff;
  --on-dark-muted: #b0b0b8;
  --on-dark-subtle: #888;
  --border: rgba(255, 255, 255, 0.10);
  --border-2: rgba(255, 255, 255, 0.14);
  --border-3: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.18);
  --nav-bg: rgba(14, 15, 19, 0.92);
  --drawer-bg: #16171c;
  --modal-close-bg: rgba(22, 23, 28, 0.92);
  --input-bg: #1d1e25;
  --input-bg-focus: #22232a;
  --placeholder: #6b6c77;
  --checkbox-bg: #1d1e25;
  --checkbox-border: rgba(255, 255, 255, 0.18);
  --spinner-track: rgba(255, 255, 255, 0.25);
  --oauth-btn-bg: #1d1e25;
  --oauth-btn-hover: #22232a;
  --oauth-divider: rgba(255, 255, 255, 0.12);
  --pill-inactive-border: rgba(255, 255, 255, 0.2);
  --pill-inactive-text: var(--text-subtle);
  /* Product shots keep their white background in dark mode. */
  --product-media-bg: #ffffff;
  --soldout-bg: rgba(180, 35, 24, 0.12);
  --soldout-border: rgba(254, 205, 202, 0.3);
  --soldout-text: #f5a8a3;
  --badge-neutral-bg: #22232a;
  --badge-neutral-border: rgba(255, 255, 255, 0.12);
  --badge-neutral-text: var(--text-subtle);
  --step-num: var(--surface-2);
  --pw-bar-bg: rgba(255, 255, 255, 0.12);
  --pw-bullet: rgba(255, 255, 255, 0.25);
  --spline-gradient: linear-gradient(160deg, #1a1b22 0%, #14151a 100%);
  --anhaenger-pill-bg: #22232a;
  --anhaenger-pill-text: #a8adb8;
  --anhaenger-pill-border: rgba(255, 255, 255, 0.12);
  --form-group-hover: #22232a;
  --health-card-bg: #16171c;
  --health-card-border: rgba(255, 255, 255, 0.10);
  --health-pass-bg: rgba(45, 154, 90, 0.12);
  --health-pass-border: #2d9a5a;
  --health-fail-bg: rgba(214, 69, 69, 0.12);
  --health-fail-border: #d64545;
  --lang-card-bg: #1d1e25;
  --lang-card-border: rgba(255, 255, 255, 0.14);
  --lang-card-hover: rgba(255, 255, 255, 0.22);
  --lang-flag-bg: #22232a;
  --footer-lang-border: rgba(255, 255, 255, 0.18);
  --footer-lang-color: #888;
  --footer-lang-hover-bg: rgba(255, 255, 255, 0.08);
  --footer-lang-hover-color: #ddd;
  --footer-link: #888;
  --footer-link-hover: #bbb;
  --footer-info: #888;
  --nav-cta-bg: var(--mint);
  --nav-cta-hover: var(--mint-hover);
  --logo-mark: #888;
  --drawer-backdrop: rgba(0, 0, 0, 0.6);
  --modal-backdrop: rgba(0, 0, 0, 0.7);
  --compare-dash: rgba(255, 255, 255, 0.25);
  --compare-head-bg: #22232a;
  --calc-muted: rgba(255, 255, 255, 0.3);

  --app-bg: #0e0f13;
  --app-surface: #16171c;
  --app-surface-2: #1d1e25;
  --app-border: rgba(255, 255, 255, 0.08);
  --app-border-strong: rgba(255, 255, 255, 0.14);
  --app-divider: rgba(255, 255, 255, 0.08);
  --app-text: #f2f2f4;
  --app-muted: #b6b7c0;
  --app-muted-2: #8c8d98;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);

  --error-bg: rgba(231, 76, 60, 0.12);
  --error-border: rgba(231, 76, 60, 0.35);
  --success-bg: rgba(46, 204, 113, 0.12);
  --success-border: rgba(46, 204, 113, 0.35);
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  width: 100%;
  max-width: 100%;
}

/* App skin — only applied on web-app pages (account, contact-card, scan) */
body[data-nav-variant="app"] {
  background: var(--app-bg);
}
body[data-nav-variant="app"] .nav {
  background: var(--nav-bg);
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; }

body.modal-locked { overflow: hidden; }

/* ─── 1b. Overflow guardrails (all viewports) ─── */

main,
header,
footer,
section,
.section-inner,
.app-page,
.app-page__inner,
.modal,
.modal__panel,
.auth-form,
.app-form {
  max-width: 100%;
  min-width: 0;
}

img, video, iframe, spline-viewer {
  max-width: 100%;
}

.form__field,
.app-form__fieldset,
.app-form__group {
  min-width: 0;
  max-width: 100%;
}

.form__field input,
.form__field textarea,
.app-form textarea,
select,
button {
  max-width: 100%;
  min-width: 0;
}

.form__label,
.app-checkbox-native span,
.app-form__legend,
.app-form__group-label {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ─── 2. UTILITIES ─── */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  padding: 12px 18px;
  background: var(--mint);
  color: var(--dark);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transform: translateY(-120%);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--dark);
  outline-offset: 2px;
}

.fade-in {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in.d1 { transition-delay: 0.12s; }
.fade-in.d2 { transition-delay: 0.24s; }
.fade-in.d3 { transition-delay: 0.36s; }
.fade-in.d4 { transition-delay: 0.5s; }

.hero-el { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.hero-el.show { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .hero-el {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.scenario-content { animation: fadeUp 0.4s ease; }

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

.pill-btn {
  padding: 8px 16px; border-radius: 99px; border: 1px solid var(--pill-inactive-border);
  background: transparent; color: var(--pill-inactive-text); font-size: 13px; cursor: pointer;
  transition: all 0.2s; font-family: var(--font-body);
}
.pill-btn.active { border-color: var(--mint); background: var(--mint-dim); color: var(--mint); }

/* ══════════════════════════════════════════════════════════════════════════
   3. COMPONENTS
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 3.1 Button ─────────────────────────────────────────────────────────
   Usage:
     <button class="btn btn--mint">…</button>
     <button class="btn btn--outline">…</button>
     <button class="btn btn--mint btn--lg">…</button>
     <button class="btn btn--cta">
       <span class="btn__label">…</span>
       <span class="btn__spinner" aria-hidden="true"></span>
     </button>
   `.btn--cta` is the form-submit style with loading spinner support.
   ──────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 99px; cursor: pointer;
  font-family: var(--font-body); font-weight: 700;
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  position: relative;
}
@media (hover: hover) { .btn:hover { transform: scale(1.04); } }
.btn:active { transform: scale(1); }
.btn[disabled] { cursor: not-allowed; opacity: 0.7; }
.btn:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

.btn--mint    { background: var(--mint); color: var(--dark); padding: 14px 36px; font-size: 16px; }
.btn--outline { background: transparent; color: var(--hero-text); border: 1px solid var(--btn-outline-border); padding: 14px 28px; font-size: 15px; }
.btn--lg      { padding: 16px 48px; font-size: 18px; }
@media (hover: hover) { .btn--mint:hover { background: var(--mint-hover); } }

/* Inline submit button used inside modals/forms. */
.btn--cta {
  width: 100%;
  background: var(--mint); color: var(--dark);
  padding: 15px 24px; font-size: 16px;
}
@media (hover: hover) { .btn--cta:hover { background: var(--mint-hover); transform: translateY(-1px); } }
.btn--cta:active { transform: translateY(0); }

.btn__spinner {
  display: none;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--spinner-track);
  border-top-color: var(--dark);
  animation: spin 0.7s linear infinite;
}
.btn.loading .btn__label { opacity: 0.7; }
.btn.loading .btn__spinner { display: inline-block; }

/* ─── 3.2 Link ───────────────────────────────────────────────────────────
   Inline mint-coloured action link, used inside text passages and form
   labels. Renders as a real <button> when it triggers JS (mode-switching).
   ──────────────────────────────────────────────────────────────────────── */

.link {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--mint); cursor: pointer; font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
@media (hover: hover) { .link:hover { border-bottom-color: var(--mint); } }
.link:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 2px; }
.link--sm { font-size: 12px; font-weight: 500; }

/* ─── 3.3 Nav ────────────────────────────────────────────────────────────
   Rendered by js/components/nav.js into `<header data-nav>`. Active link
   is identified via `body[data-page]`.
   ──────────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  gap: 12px;
  box-sizing: border-box;
}
.nav__logo {
  font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.5px;
  flex-shrink: 0;
  line-height: 1;
}
/* White-label brands render their name as a text wordmark (no logo image), so
   it adapts to light/dark like the KWICKEY wordmark. Demo brands also show a
   "Demo" marker, and the "LOST & FOUND" descriptor sits after that (branded
   sites only). Everything is baseline-aligned so the small descriptor sits
   flush with the bottom of the brand-name letters. */
html[data-brand] .nav__logo {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
/* "Demo" reads as part of the wordmark — same font, size, weight and color as
   the brand name (only "LOST & FOUND" stays small). */
.brand-wordmark__demo {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.nav__logo-suffix {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
}
.nav__logo-mark {
  color: var(--logo-mark);
  font-size: 0.42em;
  font-weight: 600;
  margin-left: 1px;
  line-height: 1;
  /* position: relative + top keeps the line box tight, so the wordmark
     stays properly centred in the 64px nav (esp. on mobile at 28px). */
  position: relative;
  top: -0.75em;
}

.nav__links {
  display: flex; gap: 28px; align-items: center;
  flex-shrink: 1; min-width: 0;
}
.nav__link { font-size: 14px; color: var(--text-muted); transition: color 0.2s ease; }
@media (hover: hover) { .nav__link:hover { color: var(--text); } }
.nav__link.is-active { color: var(--text); font-weight: 600; }

.nav__cta {
  background: var(--nav-cta-bg); color: var(--on-dark);
  border-radius: 99px;
  padding: 10px 24px; font-size: 14px; font-weight: 600;
  line-height: 1.4;
  transition: background 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) { .nav__cta:hover { background: var(--nav-cta-hover); transform: translateY(-1px); color: var(--on-dark); } }

/* Desktop: theme + language grouped tight (no extra chrome) */
.nav__settings {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.nav__settings .nav__theme,
.nav__settings .nav__lang {
  width: 29px;
  height: 29px;
}

.nav__settings .nav__theme svg,
.nav__settings .nav__lang svg {
  width: 14px;
  height: 14px;
}

.nav__mobile-actions .nav__theme,
.nav__mobile-actions .nav__lang {
  width: 29px;
  height: 29px;
}

.nav__mobile-actions .nav__theme svg,
.nav__mobile-actions .nav__lang svg {
  width: 14px;
  height: 14px;
}

.nav__mobile-actions {
  display: none;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.nav__lang--mobile {
  flex-shrink: 0;
}

/* Burger toggle — hidden on desktop, shown on mobile via media query */
.nav__burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  background: none; border: none; padding: 0;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav__burger-line {
  position: absolute; left: 10px; right: 10px;
  height: 2px; background: currentColor; border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.nav__burger-line:nth-child(1) { top: 13px; }
.nav__burger-line:nth-child(2) { top: 19px; }
.nav__burger-line:nth-child(3) { top: 25px; }
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* Off-canvas drawer — invisible on desktop, slides in on mobile when open */
.nav__drawer {
  position: fixed; inset: 0;
  z-index: 110;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}
.nav-drawer-open .nav__drawer {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}
.nav__drawer-backdrop {
  position: absolute; inset: 0;
  background: var(--drawer-backdrop);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nav-drawer-open .nav__drawer-backdrop { opacity: 1; }
.nav__drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--drawer-bg);
  padding: 80px 28px 32px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
}
.nav-drawer-open .nav__drawer-panel { transform: translateX(0); }
.nav__drawer-link {
  font-size: 17px; color: var(--text);
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-3);
  display: block;
  transition: color 0.2s ease;
}
@media (hover: hover) { .nav__drawer-link:hover { color: var(--mint); } }
.nav__drawer-link.is-active { color: var(--text); font-weight: 600; }
.nav__drawer-link--btn {
  background: none; border: none; padding: 14px 4px;
  font: inherit; color: var(--text); text-align: left;
  border-bottom: 1px solid var(--border-3);
  cursor: pointer;
}
@media (hover: hover) { .nav__drawer-link--btn:hover { color: var(--mint); } }
.nav__drawer-cta {
  margin-top: 20px;
  background: var(--mint); color: var(--on-dark);
  border-radius: 99px;
  padding: 14px 24px;
  font-size: 15px; font-weight: 600;
  text-align: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) { .nav__drawer-cta:hover { background: var(--mint-hover); color: var(--on-dark); transform: translateY(-1px); } }

body.nav-drawer-open { overflow: hidden; }

/* ─── 3.4 Footer ─────────────────────────────────────────────────────────
   Rendered by js/components/footer.js into `<footer data-footer>`.
   ──────────────────────────────────────────────────────────────────────── */

.footer {
  background: var(--footer-bg); padding: 40px 32px;
  text-align: center; color: var(--on-dark);
}
.footer__logo { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin-bottom: 12px; }
.footer__logo-mark { color: var(--mint); }
.footer__info { font-size: 13px; color: var(--footer-info); }
.footer__links { display: flex; justify-content: center; gap: 20px; margin-top: 12px; }
.footer__links a { font-size: 13px; color: var(--footer-link); }
@media (hover: hover) { .footer__links a:hover { color: var(--footer-link-hover); } }
.footer__social { display: flex; justify-content: center; gap: 18px; margin-top: 20px; }
.footer__social-link {
  display: inline-flex; opacity: 0.65;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) { .footer__social-link:hover { opacity: 1; transform: translateY(-2px); } }
.footer__social-link:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 4px; }
.footer__social-link img { width: 20px; height: 20px; display: block; filter: invert(1); }

/* ─── 3.5 Modal — base ───────────────────────────────────────────────────
   Generic modal. Subclasses add `.modal--<variant>` for theming.

     <div class="modal modal--auth" id="modal-auth" aria-hidden="true" role="dialog" aria-modal="true">
       <div class="modal__backdrop" data-modal-close></div>
       <div class="modal__panel" role="document">
         <button class="modal__close" data-modal-close>×</button>
         <div class="modal__visual modal__visual--dark">…</div>
         <div class="modal__body">…</div>
       </div>
     </div>
   ──────────────────────────────────────────────────────────────────────── */

.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  max-width: 100%;
  overflow-x: clip;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
@supports not (overflow: clip) {
  .modal { overflow-x: hidden; }
}
.modal.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}

.modal__backdrop {
  position: absolute; inset: 0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.modal__panel {
  position: relative; z-index: 1;
  width: min(880px, calc(100vw - 48px));
  max-width: 100%;
  max-height: calc(100vh - 48px);
  background: var(--page-bg);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.modal button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.modal.open .modal__panel { transform: translateY(0) scale(1); opacity: 1; }

.modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--modal-close-bg);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
@media (hover: hover) { .modal__close:hover { background: var(--page-bg); transform: rotate(90deg); color: var(--mint); } }
.modal__close:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.modal__body {
  position: relative;
  padding: 40px 40px 36px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  background: var(--page-bg);
}

/* ─── 3.6 Modal visuals ───
   `.modal__visual` is the left-side spline container. Two themes:
     .modal__visual--dark  → for the auth modal (dark scene)
     .modal__visual--warm  → for the buy modal (light scene)

   Layout is identical for both themes: the spline scene sits inset from
   every edge with the same padding, keeping it visually consistent across
   modals and fully centered both horizontally and vertically.
   ──────────────────────────────────────────────────────────────────────── */

.modal__visual {
  position: relative;
  min-height: 360px;
  padding: 64px;
  overflow: hidden;
  isolation: isolate;
  display: flex; align-items: center; justify-content: center;
}
.modal__visual--dark { background: var(--hero-bg); }
.modal__visual--warm { background: var(--surface-2); }

/* The spline scene is locked to a 1:1 box, capped by the smaller of the
   available width / height. That keeps it perfectly square regardless of
   how tall the modal body next to it grows. */
.modal__visual spline-viewer {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  --logo-color: transparent;
  z-index: 0;
}
.modal__visual spline-viewer::part(logo) { display: none !important; visibility: hidden !important; }

.modal__visual-fade {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle at 20% 100%, rgba(90, 94, 255, 0.18) 0%, transparent 55%),
    linear-gradient(180deg, rgba(5, 5, 5, 0) 60%, rgba(5, 5, 5, 0.5) 100%);
}

/* ─── 3.7 Form ───────────────────────────────────────────────────────────
   Reusable form primitives. Used inside modals and elsewhere.
   ──────────────────────────────────────────────────────────────────────── */

.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__label {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.form__field input,
.form__field textarea,
.form__field select {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 13px 16px;
  /* ≥16px prevents iOS Safari auto-zoom on focus / autofill */
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--text);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.form__field input::placeholder,
.form__field textarea::placeholder { color: var(--placeholder); }
@media (hover: hover) {
  .form__field input:hover,
  .form__field textarea:hover,
  .form__field select:hover { border-color: var(--checkbox-border); }
}
.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus {
  outline: none;
  background: var(--input-bg-focus);
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(90, 94, 255, 0.12);
}
.form__field input:focus-visible,
.form__field textarea:focus-visible,
.form__field select:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

/* iOS autofill can inject smaller computed font-size — keep at 16px */
.form__field input:-webkit-autofill,
.form__field input:-webkit-autofill:hover,
.form__field input:-webkit-autofill:focus,
.form__field textarea:-webkit-autofill,
.form__field textarea:-webkit-autofill:hover,
.form__field textarea:-webkit-autofill:focus {
  font-size: 16px;
  -webkit-text-fill-color: var(--text);
}

/* Password input + eye toggle */
.form__input-wrap { position: relative; }
.form__input-wrap input { padding-right: 48px; }
.form__eye {
  position: absolute; top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 0; background: transparent; color: var(--text-faint);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.2s ease, background 0.2s ease;
}
@media (hover: hover) { .form__eye:hover { color: var(--mint); background: rgba(90, 94, 255, 0.08); } }
.form__eye:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.form__eye .form__eye-hide { display: none; }
.form__eye[data-visible="true"] .form__eye-show { display: none; }
.form__eye[data-visible="true"] .form__eye-hide { display: inline-flex; color: var(--mint); }

/* Checkbox */
.form__checkbox {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.5; color: var(--text-muted);
  cursor: pointer; margin-top: 2px;
}
.form__checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.form__checkbox-box {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 1px solid var(--checkbox-border);
  background: var(--checkbox-bg);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  margin-top: 1px;
}
.form__checkbox-box svg {
  width: 12px;
  height: 12px;
  display: block;
}
.form__checkbox input:checked + .form__checkbox-box {
  background: var(--mint); border-color: var(--mint); color: var(--dark);
}
.form__checkbox input:focus-visible + .form__checkbox-box {
  outline: 2px solid var(--mint); outline-offset: 2px;
}
.form__checkbox-text a {
  color: var(--mint);
  border-bottom: 1px solid var(--mint-border);
  transition: border-color 0.2s ease;
}
@media (hover: hover) { .form__checkbox-text a:hover { border-bottom-color: var(--mint); } }

/* Feedback messages */
.form__error,
.form__success {
  margin: -4px 0 -2px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px; line-height: 1.5;
}
.form__error   { background: var(--error-bg);   border: 1px solid var(--error-border);   color: var(--error); }
.form__success { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success); }

/* Password strength meter
   Inserted by js/components/password-strength.js right after the
   `.form__input-wrap` of a "new password" field. Hidden while empty. */
.pw-strength {
  display: flex; flex-direction: column; gap: 8px;
  margin: 2px 0 0;
  animation: fadeUp 0.25s ease;
}
.pw-strength[hidden] { display: none; }

.pw-strength__bar {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--pw-bar-bg);
  overflow: hidden;
}
.pw-strength__bar-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: var(--error);
  border-radius: inherit;
  transition: width 0.25s ease, background-color 0.25s ease;
}
.pw-strength[data-strength="1"] .pw-strength__bar-fill { width: 20%; background: var(--error); }
.pw-strength[data-strength="2"] .pw-strength__bar-fill { width: 40%; background: #e67e22; }
.pw-strength[data-strength="3"] .pw-strength__bar-fill { width: 60%; background: #e67e22; }
.pw-strength[data-strength="4"] .pw-strength__bar-fill { width: 80%; background: #b8a72c; }
.pw-strength[data-strength="5"] .pw-strength__bar-fill { width: 100%; background: var(--success); }

.pw-strength__list {
  list-style: none;
  display: flex; flex-direction: column; gap: 4px;
  margin: 0; padding: 0;
}
.pw-strength__item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 1.4;
  color: var(--text-subtle);
}
.pw-strength__item--ok { display: none; }

.pw-strength__bullet {
  flex: 0 0 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--pw-bullet);
}

/* Success row — shown in place of the list when every rule passes. */
.pw-strength__done {
  display: none;
  align-items: center; gap: 8px;
  font-size: 12px; line-height: 1.4;
  color: var(--success);
  font-weight: 600;
}
.pw-strength__done-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--success);
  color: var(--on-dark);
}
.pw-strength--valid .pw-strength__done { display: inline-flex; }
.pw-strength--valid .pw-strength__list { display: none; }

/* ─── 3.8 Auth form ──────────────────────────────────────────────────────
   Specific layout for the 4 forms inside the auth modal.
   ──────────────────────────────────────────────────────────────────────── */

.auth-form {
  display: flex; flex-direction: column; gap: 16px;
  animation: fadeUp 0.35s ease;
}
.auth-form[hidden] { display: none; }

.auth-form__header { margin-bottom: 4px; }
.auth-form__title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.5px; line-height: 1.15;
  color: var(--text); margin-bottom: 8px;
}
.auth-form__switch {
  font-size: 14px; color: var(--text-subtle); line-height: 1.5;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
.auth-form__mini { font-size: 13px; color: var(--text-subtle); text-align: center; margin-top: 4px; }

/* Social login — "Continue with Google" block under the email form. */
.auth-oauth { display: flex; flex-direction: column; gap: 14px; margin-top: 2px; }
.auth-oauth__divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-faint); font-size: 13px;
}
.auth-oauth__divider::before,
.auth-oauth__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--oauth-divider);
}
.btn--oauth {
  width: 100%;
  background: var(--oauth-btn-bg); color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 13px 24px; font-size: 15px;
}
@media (hover: hover) { .btn--oauth:hover { background: var(--oauth-btn-hover); transform: translateY(-1px); } }
.btn--oauth:active { transform: translateY(0); }
.btn--oauth .btn__icon { display: inline-flex; align-items: center; }
.btn--oauth .btn__spinner { border-color: rgba(0, 0, 0, 0.2); border-top-color: var(--text); }
.auth-oauth__consent { font-size: 12px; color: var(--text-faint); text-align: center; line-height: 1.5; margin: 0; }
.auth-oauth__consent a { color: inherit; text-decoration: underline; }

/* OAuth callback page (/oauth-callback.html). */
.app-page--center { display: flex; align-items: center; justify-content: center; min-height: 70vh; }
.oauth-callback__card {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center; padding: 40px 24px;
}
.oauth-callback__spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.12); border-top-color: var(--mint);
  animation: spin 0.7s linear infinite;
}
.oauth-callback__msg { font-size: 16px; color: var(--text); margin: 0; }
.oauth-callback__msg--error { color: var(--error); }
.oauth-callback__retry { width: auto; }

/* ─── 3.9 Buy form ───────────────────────────────────────────────────────
   Quantity stepper, price display, status meta inside the buy modal.
   ──────────────────────────────────────────────────────────────────────── */

.buy__eyebrow {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 2px;
  color: var(--text-muted); text-transform: uppercase; font-weight: 600; margin-bottom: 8px;
}
.buy__eyebrow-mark { color: var(--mint); }
.buy__title {
  font-family: var(--font-display); font-size: 26px; font-weight: 800;
  letter-spacing: -0.5px; line-height: 1.15; color: var(--text); margin-bottom: 6px;
}
.buy__sub { font-size: 14px; color: var(--text-subtle); line-height: 1.55; margin-bottom: 18px; }

.buy__product-picker {
  --toggle-padding: 4px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 20px;
  padding: var(--toggle-padding);
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.buy__product-picker__bg {
  position: absolute;
  top: var(--toggle-padding);
  bottom: var(--toggle-padding);
  left: var(--toggle-padding);
  width: calc((100% - 2 * var(--toggle-padding)) / 2);
  transform: translateX(calc(var(--toggle-active, 0) * 100%));
  background: var(--page-bg);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  transition: transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
  pointer-events: none;
}
.buy__product-btn {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color 0.2s ease;
}
.buy__product-btn.is-active {
  color: var(--text);
}
.buy__product-btn:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.modal--buy .modal__panel {
  width: min(920px, calc(100vw - 48px));
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.modal__visual--product {
  position: relative;
  background: #fff;
  padding: 8px;
  min-height: 420px;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.modal__visual--product .buy__product-image {
  width: 100%;
  max-width: none;
  max-height: min(540px, calc(100vh - 120px));
  height: auto;
  object-fit: contain;
  display: block;
  --buy-img-scale: 1;
  transform: scale(var(--buy-img-scale));
}

.modal__visual--product .buy__product-image--anhaenger {
  --buy-img-scale: 1.18;
}

.modal--buy[data-buy-product="anhaenger"] .buy__price-badge {
  display: none !important;
  visibility: hidden !important;
}

.modal--buy .buy__price-row {
  flex-wrap: nowrap;
  align-items: center;
  min-height: 76px;
}

.modal--buy .buy__price-display {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.modal--buy .buy__price-original[hidden] {
  display: inline !important;
  visibility: hidden;
}

.modal--buy .buy__price-badge[hidden] {
  display: inline-block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.modal--buy .buy__price-badge {
  flex-shrink: 0;
  white-space: nowrap;
}

.buy__qty-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 6px;
}
.buy__qty-label { font-size: 14px; font-weight: 600; color: var(--text); }
.buy__qty-control {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border-2); border-radius: 99px; padding: 4px;
  background: var(--surface);
}
.buy__qty-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: var(--page-bg); color: var(--text);
  font-size: 18px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
@media (hover: hover) { .buy__qty-btn:hover { background: var(--mint); color: var(--dark); } }
.buy__qty-btn:active { transform: scale(0.94); }
.buy__qty-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) { .buy__qty-btn[disabled]:hover { background: var(--page-bg); color: var(--text); } }
.buy__qty-value {
  min-width: 32px; text-align: center;
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text);
}
.buy__qty-hint { font-size: 12px; color: var(--text-faint); margin-bottom: 22px; }

.buy__price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.buy__price-label {
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600; margin-bottom: 4px;
}
.buy__price-display { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.buy__price-original { color: var(--text-faint); font-size: 18px; font-weight: 500; }
.buy__price-final {
  font-family: var(--font-display); font-size: 44px; font-weight: 800;
  color: var(--text); letter-spacing: -1px; line-height: 1;
  transition: color 0.25s ease;
}
.buy__price-final.is-discounted { color: var(--mint); }
.buy__price-badge {
  display: inline-block;
  font-size: 12px; font-weight: 600; color: var(--mint);
  background: var(--mint-dim); border: 1px solid var(--mint-border);
  padding: 6px 12px; border-radius: 99px;
}
.buy__price-badge b { font-weight: 700; }

.btn--cta.is-soldout {
  background: var(--soldout-text);
  color: #fff;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
  box-shadow: none;
}
@media (hover: hover) {
  .btn--cta.is-soldout:hover {
    background: var(--soldout-text);
    color: #fff;
    transform: none;
    box-shadow: none;
  }
}

.buy__meta { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; }
.buy__meta-line { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.buy__status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55);
  animation: statusPulse 2.4s ease-in-out infinite;
  flex-shrink: 0; margin-top: 6px;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. PAGE SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 4.1 Section primitives ─── */

.section { padding: 100px 32px; }
.section-inner { max-width: 960px; margin: 0 auto; }
.section-label {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 2px;
  color: var(--mint); text-transform: uppercase; margin-bottom: 12px; font-weight: 600;
}
.section-title {
  font-family: var(--font-display); font-size: clamp(32px, 5vw, 48px);
  font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin-bottom: 16px;
}
.section-desc { font-size: 17px; color: var(--text-subtle); max-width: 500px; line-height: 1.6; }

/* ─── 4.2 Hero (home) ─── */

.hero {
  /* Matches the dark-theme values so the hero renders identically in both themes. */
  --hero-text-muted: #b0b0b8;
  --hero-text-subtle: #888;
  background: var(--hero-section-bg); color: var(--hero-text);
  padding: 100px 32px 80px; position: relative; overflow: hidden;
}
.hero-glow-1 {
  position: absolute; top: -140px; right: -100px; width: 780px; height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(97, 96, 255, 0.38) 0%, rgba(90, 94, 255, 0.16) 42%, transparent 72%);
  pointer-events: none;
}
.hero-glow-2 {
  position: absolute; bottom: -100px; left: -100px; width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 94, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.hero-spline {
  position: absolute;
  top: 2%;
  right: -10%;
  width: clamp(320px, 62%, 880px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 75% 36%, #000 12%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.2) 65%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 80% at 75% 36%, #000 12%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.2) 65%, transparent 100%);
}
.hero-spline spline-viewer {
  width: 100%; height: 100%;
  --logo-color: transparent;
  background: transparent;
}
.hero-spline spline-viewer::part(logo) { display: none !important; visibility: hidden !important; }

@media (max-width: 860px) {
  .hero-spline {
    opacity: 0.38;
    top: 2%;
    right: -18%;
    width: clamp(280px, 82%, 520px);
  }
}
.hero-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
.hero-badge {
  display: inline-block; padding: 6px 16px; border-radius: 99px;
  border: 1px solid var(--mint-border); background: rgba(90, 94, 255, 0.08);
  font-size: 13px; color: var(--mint); margin-bottom: 28px; font-weight: 500;
}
.hero h1 {
  font-family: var(--font-display); font-size: clamp(42px, 7vw, 72px);
  font-weight: 800; line-height: 1.05; letter-spacing: -2px; margin-bottom: 24px;
}
.hero h1 .accent { color: var(--mint); }
.hero-sub { font-size: 19px; line-height: 1.6; color: var(--hero-text-muted); max-width: 480px; margin-bottom: 40px; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-features { display: flex; gap: 32px; margin-top: 56px; flex-wrap: wrap; }
.hero-feat { flex: 1 1 140px; min-width: 0; }
.hero-feat-title { font-size: 14px; font-weight: 600; color: var(--hero-text); margin-bottom: 4px; }
.hero-feat-sub { font-size: 13px; color: var(--hero-text-subtle); }

/* ─── 4.3 Trust bar ─── */

.trust-bar {
  background: var(--trust-bar-bg); padding: 20px 32px;
  display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; align-items: center;
}
.trust-bar span { font-size: 13px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.3px; }

/* ─── 4.4 Steps grid ─── */

.how-section { background: var(--surface-2); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step-card {
  background: var(--page-bg); border-radius: 16px; padding: 40px 28px;
  position: relative; border: 1px solid var(--border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) { .step-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); } }
.step-icon { font-size: 40px; margin-bottom: 16px; }
.step-num {
  font-family: var(--font-display); font-size: 64px; font-weight: 800;
  color: var(--step-num); position: absolute; top: 16px; right: 20px; line-height: 1;
  pointer-events: none;
  user-select: none;
}
.step-card h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.step-card p { font-size: 15px; color: var(--text-subtle); line-height: 1.6; }

/* ─── 4.4b Product cards (Sticker vs. Anhänger) ─── */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}

.product-card {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  }
}

.product-card__media {
  aspect-ratio: 4 / 3;
  background: var(--product-media-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Product image gallery (cards + buy modal) ─── */

.product-gallery {
  position: relative;
  width: 100%;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.product-card__media.product-gallery {
  /* aspect-ratio on .product-card__media defines the box */
  display: block;
}

.product-gallery__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.product-gallery__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.product-gallery--instant .product-gallery__track {
  transition: none;
}

.product-gallery__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.product-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  color: var(--text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background 0.15s ease;
}

.product-gallery__nav--prev { left: 10px; }
.product-gallery__nav--next { right: 10px; }

.product-gallery:focus-within .product-gallery__nav {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: hover) {
  .product-gallery:hover .product-gallery__nav {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (hover: hover) {
  .product-gallery__nav:hover {
    background: #fff;
  }
}

.product-gallery__nav:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
  opacity: 1;
  pointer-events: auto;
}

.product-gallery__dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.product-gallery__dot {
  pointer-events: auto;
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.product-gallery__dot.is-active,
.product-gallery__dot[aria-selected="true"] {
  background: var(--mint);
  transform: scale(1.2);
}

.product-gallery__dot:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.product-gallery--single .product-gallery__nav,
.product-gallery--single .product-gallery__dots {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  .product-gallery:not(.product-gallery--single) .product-gallery__nav {
    opacity: 0.92;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-gallery__track {
    transition: none;
  }
}

.product-card__body {
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card__name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.product-card__pitch {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 20px;
}

.product-card__ideal {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.product-card__ideal li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--text-subtle);
  line-height: 1.5;
  margin-bottom: 6px;
}

.product-card__ideal li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--mint);
  font-weight: 700;
}

.product-card__format {
  font-size: 13px;
  color: var(--text-faint);
  margin-bottom: 16px;
  line-height: 1.5;
}

.product-card__price {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  margin-top: auto;
}

.product-card__price-note {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-faint);
  margin-top: 4px;
}

.product-card__cta {
  margin-top: 0;
  align-self: flex-start;
}

.product-card__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  background: var(--badge-neutral-bg);
  border: 1px solid #e0e0e0;
  padding: 8px 14px;
  border-radius: 99px;
}

.product-card__badge--soldout {
  color: var(--soldout-text);
  background: var(--soldout-bg);
  border-color: var(--soldout-border);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.restock-notify {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.restock-notify__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.restock-notify__form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.restock-notify__input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.restock-notify__input:focus {
  outline: none;
  border-color: var(--mint);
  background: #fff;
}

html[data-theme="dark"] .restock-notify__input,
html[data-theme="dark"] .restock-notify__input:focus {
  background: var(--input-bg-focus);
}

.restock-notify__btn {
  flex: 0 0 auto;
  padding: 12px 18px;
  font-size: 14px;
  white-space: nowrap;
}

.restock-notify__btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.restock-notify__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.restock-notify__privacy {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-faint);
}

.restock-notify__status {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.restock-notify__status.is-success {
  color: var(--mint);
}

.restock-notify__status.is-error {
  color: #c44;
}

html[data-theme="dark"] .restock-notify__status.is-error {
  color: #ff8a8a;
}

/* ─── 4.5 Scenarios ─── */

.scenarios { background: var(--surface-2); }
.scenario-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.scenario-btn {
  padding: 10px 20px; border-radius: 99px; border: 1px solid var(--border-strong);
  background: var(--page-bg); color: var(--text-muted); font-size: 14px; cursor: pointer;
  transition: all 0.3s; font-family: var(--font-body);
}
.scenario-btn.active { border-color: var(--mint); background: var(--mint-dim); color: var(--mint); }
.scenario-card {
  background: var(--page-bg); border-radius: 16px; padding: 48px 40px;
  border: 1px solid var(--border); box-shadow: var(--shadow-md); min-height: 180px;
}
.scenario-flex { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; }
.scenario-text { flex: 1; min-width: 280px; }
.scenario-text .icon { font-size: 56px; line-height: 1; margin-bottom: 12px; }
.scenario-text h3 { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.scenario-text p { font-size: 16px; color: var(--text-subtle); line-height: 1.6; max-width: 440px; }
.scenario-cost {
  background: var(--mint-dim); border: 1px solid var(--mint-border);
  border-radius: 12px; padding: 20px 28px; text-align: center; min-width: 160px;
}
.scenario-cost-label { font-size: 12px; color: var(--mint); letter-spacing: 0.02em; margin-bottom: 4px; }
.scenario-cost-val { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--text); }

/* ─── 4.6 Comparison table ─── */

.compare-table {
  border-radius: 16px; border: 1px solid var(--border);
  overflow: hidden;
  max-width: 100%;
}
.compare-table__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  overscroll-behavior-x: contain;
}
.compare-header {
  background: var(--compare-head-bg);
  font-weight: 600; font-size: 13px; color: var(--text-muted);
}
.compare-header th {
  padding: 14px 24px;
  text-align: left;
  font-weight: 600;
}
.compare-header th:nth-child(2),
.compare-header th:nth-child(3) {
  width: 100px;
  text-align: center;
}
.compare-row th,
.compare-row td {
  padding: 14px 24px;
  border-top: 1px solid var(--border-3);
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}
/* Beige on the odd rows: the head band is followed by beige, and with seven
   feature rows the table closes on beige again. */
.compare-row:nth-child(odd) th,
.compare-row:nth-child(odd) td { background: var(--surface); }
.compare-row .check { text-align: center; }
.compare-row .check-icon { color: var(--mint); display: inline-block; vertical-align: middle; }
.compare-row .compare-dash { color: var(--compare-dash); font-size: 18px; line-height: 1; }
.compare-header .compare-reg { font-size: 0.6em; vertical-align: super; margin-left: 1px; }
.compare-header__brand { color: var(--text); }

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

/* ─── 4.7 Calculator ─── */

.calc-section { background: var(--surface-2); }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.calc-box { background: var(--page-bg); border: 1px solid var(--border); box-shadow: var(--shadow-md); border-radius: 16px; padding: 36px 32px; max-width: 520px; }
.calc-title { font-family: var(--font-display); font-size: 13px; letter-spacing: 2px; color: var(--mint); text-transform: uppercase; margin-bottom: 16px; }
.calc-desc { font-size: 15px; color: var(--text-subtle); margin-bottom: 24px; line-height: 1.6; }
.calc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.calc-box .pill-btn { border-color: var(--border-strong); color: var(--text-muted); }
.calc-box .pill-btn.active { border-color: var(--mint); background: var(--mint-dim); color: var(--mint); }
.calc-result {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--border); padding-top: 20px;
}
.calc-result-label { font-size: 13px; color: var(--text-faint); }
.calc-result-val { font-family: var(--font-display); font-size: 42px; font-weight: 700; color: var(--text); letter-spacing: -1px; }
.calc-result-val.green { color: var(--mint); }
.calc-result-val.muted { color: var(--calc-muted); }
.calc-result-val--priceless { font-size: 26px; }
.calc-ratio { font-size: 14px; color: var(--mint); margin-top: 12px; text-align: center; }

/* ─── 4.7b Privacy / anonymous mode section ───
   Public/anonymous toggle (home.js sets .is-redacted on the card view):
   public shows the owner's chosen contact rows, anonymous collapses them
   and slides in an abstract finder form (contact fields + location). */

.privacy-section { background: var(--surface); }
.privacy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Copy column follows the demo toggle (js/pages/home.js) — on each mode
   swap its children re-enter with a small stagger. */
.privacy-copy.is-swapping > * {
  animation: privacy-copy-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.privacy-copy.is-swapping > *:nth-child(2) { animation-delay: 0.06s; }
.privacy-copy.is-swapping > *:nth-child(3) { animation-delay: 0.12s; }
.privacy-copy.is-swapping > *:nth-child(4) { animation-delay: 0.18s; }
@keyframes privacy-copy-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.privacy-points,
.lost-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.privacy-points li,
.lost-points li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
}
.privacy-points li::before,
.lost-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mint-dim);
  color: var(--mint);
  font-size: 12px;
  font-weight: 700;
}

/* Narrow enough to look like a phone card, wide enough that the longest
   line (the finder message) still fits on one line in both languages. */
.privacy-demo { max-width: 430px; justify-self: center; width: 100%; }
.privacy-demo__toggle {
  --toggle-padding: 4px;
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  padding: var(--toggle-padding);
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  background: var(--page-bg);
  margin-bottom: 18px;
}
.privacy-demo__toggle-bg {
  position: absolute;
  top: var(--toggle-padding);
  bottom: var(--toggle-padding);
  left: var(--toggle-padding);
  width: calc((100% - 2 * var(--toggle-padding)) / 2);
  transform: translateX(calc(var(--toggle-active, 0) * 100%));
  background: var(--mint);
  border-radius: 99px;
  transition: transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
  pointer-events: none;
}
.privacy-demo__mode {
  position: relative;
  z-index: 1;
  padding: 9px 22px;
  border: none;
  border-radius: 99px;
  background: transparent;
  color: var(--text-subtle);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
}
.privacy-demo__mode.is-active { color: #fff; }

.privacy-demo__card {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.privacy-demo__title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}
/* Build-up: the card's three blocks arrive one after another the first time
   the section is scrolled into view (class set in js/pages/home.js). Only
   opacity and transform move, so the card keeps its height throughout. */
.pdemo-view.is-revealing .pdemo-step {
  animation: pdemo-step-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--step, 0) * 0.45s);
}
@keyframes pdemo-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Mint reward banner — mirrors .app-finder-reward on the real scan card,
   bleeding to the card's top and side edges (negative margins match the card
   padding, the card clips them to its rounded corners). */
.pdemo-reward {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: -28px -28px 20px;
  padding: 18px 24px 20px;
  background: var(--mint);
  text-align: center;
}
.pdemo-reward__label {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.pdemo-reward__amount {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: #ffffff;
}

/* "Label: value" lines like the real finder card. */
.pdemo-line {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  overflow-wrap: anywhere;
}
.pdemo-line strong {
  color: var(--text-faint);
  font-weight: 500;
  display: inline-block;
  min-width: 78px;
}
.pdemo-link {
  color: var(--mint);
  border-bottom: 1px solid var(--mint-border);
}

.pdemo-rule {
  border: none;
  border-top: 1px solid var(--border-3);
  margin: 16px 0;
}

/* Mode swap inside the card: public shows the owner's chosen contact rows,
   anonymous collapses them and slides in the finder form (contact fields +
   location) instead. Height animates via the 0fr→1fr grid trick; the block
   that opens waits for the other one to close (transition-delay). */
.pdemo-owner,
.pdemo-anon-extra {
  display: grid;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.pdemo-owner__inner,
.pdemo-anon-extra__inner { overflow: hidden; min-height: 0; }

.pdemo-owner { grid-template-rows: 1fr; opacity: 1; transition-delay: 0.4s; }
.pdemo-view.is-redacted .pdemo-owner {
  grid-template-rows: 0fr;
  opacity: 0;
  transition-delay: 0s;
}

.pdemo-anon-extra { grid-template-rows: 0fr; opacity: 0; }
.pdemo-view.is-redacted .pdemo-anon-extra {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 0.4s;
}

/* Abstract finder form: placeholder-style boxes, no real inputs. */
.pdemo-fake-form { display: grid; gap: 10px; }
.pdemo-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pdemo-input__box {
  display: block;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--border-2);
  border-radius: 12px;
  background: var(--input-bg);
  font-size: 14px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdemo-owner .pdemo-geo-btn { margin-top: 6px; }
.pdemo-geo-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.pdemo-geo-btn svg { color: var(--mint); }

@media (prefers-reduced-motion: reduce) {
  .pdemo-owner, .pdemo-anon-extra { transition: none; }
  .pdemo-view.is-revealing .pdemo-step { animation: none; }
  .privacy-copy.is-swapping > * { animation: none; }
  .privacy-demo__toggle-bg, .buy__product-picker__bg { transition: none; }
}

@media (max-width: 900px) {
  .privacy-grid { grid-template-columns: 1fr; gap: 36px; }
  .privacy-demo { justify-self: stretch; }
}

/* ─── 4.7c Lost-report section (Fundbüro-Service) ───
   Text left, stylised map right. The map loops a 10s story once scrolled
   into view (home.js adds .is-visible): item pin drops → search radius
   grows → office pins pop up → mail badges turn into checkmarks → summary
   chip. Without .is-visible (JS off / reduced motion) the map shows the
   static end state, so every element is visible by default and only the
   keyframes hide it. */

.lost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.lost-visual { max-width: 520px; width: 100%; justify-self: center; }

/* Label-free abstract city map (img/lost-map-dark.png, a dark grayscale
   render). The image sits on a ::before layer so the light theme can
   invert it via filter without touching the pins on top. Blending that
   layer in luminosity mode keeps the map's shading but takes the hue from
   the warm background, so the map is beige instead of grey; isolation
   keeps the blend inside the card. */
.lost-map {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.lost-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/lost-map-dark.png") center / cover no-repeat;
  filter: invert(1) brightness(1.2) contrast(0.95);
  mix-blend-mode: luminosity;
}
:root[data-theme="dark"] .lost-map::before { filter: none; mix-blend-mode: normal; }

/* Search radius around the lost item (+ a pinging echo ring). */
.lost-radius {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 66%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid var(--mint);
  background: var(--mint-dim);
  border-radius: 50%;
}
.lost-radius--ping {
  background: transparent;
  border-color: var(--mint-border);
  opacity: 0;
}

/* The lost item: classic teardrop pin, tip anchored on the wrapper. */
.lost-pin-wrap {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 0;
  height: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
}
.lost-pin {
  position: absolute;
  left: -16px;
  top: -38px;
  width: 32px;
  height: 32px;
  background: var(--mint);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.lost-pin::after {
  content: "";
  position: absolute;
  inset: 9px;
  background: #fff;
  border-radius: 50%;
}

/* Lost & found offices (--i staggers their pop-in). */
.lost-office {
  position: absolute;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
}
.lost-office__pin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--page-bg);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-size: 17px;
  box-shadow: var(--shadow-md);
}
.lost-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 28px;
  height: 28px;
}
.lost-badge__mail,
.lost-badge__check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.lost-badge__mail {
  background: var(--page-bg);
  border: 1px solid var(--mint-border);
  color: var(--mint);
  font-size: 19px;
  line-height: 1;
  opacity: 0;
}
.lost-badge__check {
  background: var(--mint);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.lost-chip {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 7px 16px;
  background: var(--mint);
  color: #fff;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}

/* One shared 10s loop; every element animates its own keyframe window.
   `both` keeps the 0% frame (hidden) during the staggered delays. */
.lost-visual.is-visible .lost-pin-wrap {
  animation: lost-item 10s ease infinite both;
}
.lost-visual.is-visible .lost-radius {
  animation: lost-radius 10s ease infinite both;
}
.lost-visual.is-visible .lost-radius--ping {
  animation: lost-ping 10s ease-out infinite both;
}
.lost-visual.is-visible .lost-office {
  animation: lost-office 10s ease infinite both;
  animation-delay: calc(var(--i, 0) * 0.25s);
}
.lost-visual.is-visible .lost-badge__mail {
  animation: lost-mail 10s ease infinite both;
  animation-delay: calc(var(--i, 0) * 0.25s);
}
.lost-visual.is-visible .lost-badge__check {
  animation: lost-check 10s ease infinite both;
  animation-delay: calc(var(--i, 0) * 0.25s);
}
.lost-visual.is-visible .lost-chip {
  animation: lost-chip 10s ease infinite both;
}

@keyframes lost-item {
  0% { opacity: 0; transform: translateY(-18px); }
  3% { opacity: 1; transform: translateY(0); }
  4.5% { transform: translateY(-5px); }
  6%, 92% { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes lost-radius {
  0%, 7% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  14%, 92% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  97%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes lost-ping {
  0%, 16% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  17% { opacity: 0.7; }
  27% { opacity: 0; transform: translate(-50%, -50%) scale(1.22); }
  33% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  34% { opacity: 0.7; }
  44%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22); }
}
@keyframes lost-office {
  0%, 18% { opacity: 0; transform: scale(0.3); }
  22% { opacity: 1; transform: scale(1.12); }
  24%, 88% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes lost-mail {
  0%, 36% { opacity: 0; transform: scale(0.4); }
  40%, 54% { opacity: 1; transform: scale(1); }
  58%, 100% { opacity: 0; transform: scale(0.6); }
}
@keyframes lost-check {
  0%, 56% { opacity: 0; transform: scale(0.4); }
  60% { opacity: 1; transform: scale(1.15); }
  62%, 88% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes lost-chip {
  0%, 72% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  76%, 90% { opacity: 1; transform: translateX(-50%) translateY(0); }
  95%, 100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lost-visual.is-visible .lost-pin-wrap,
  .lost-visual.is-visible .lost-radius,
  .lost-visual.is-visible .lost-radius--ping,
  .lost-visual.is-visible .lost-office,
  .lost-visual.is-visible .lost-badge__mail,
  .lost-visual.is-visible .lost-badge__check,
  .lost-visual.is-visible .lost-chip { animation: none; }
}

@media (max-width: 900px) {
  .lost-grid { grid-template-columns: 1fr; gap: 36px; }
  .lost-visual { justify-self: stretch; max-width: none; }
}

/* ─── 4.8 Testimonial badge ───
   The old testimonial card grid was replaced by the success globe (4.8b);
   the badge style survives because the styleguide showcases it. */

.testimonial-badge {
  display: inline-block; font-size: 11px; font-weight: 600; color: var(--mint);
  background: var(--mint-dim); padding: 4px 10px; border-radius: 99px;
  margin-bottom: 16px; align-self: flex-start;
}

/* ─── 4.8b Success globe (Osmo "Interactive Globe", Mapbox) ───
   Worldwide return stories in the testimonials section. Markup lives in
   index.html / en/index.html ([data-globe-container]), logic in
   js/components/globe.js, stories in js/components/globe-stories.js.
   Colors are theme tokens only — light/dark both covered. */

.globe-container { width: 100%; position: relative; }

/* Desktop: break out of .section-inner (max-width 960px) — the map wants
   more room. left:50% + negative half-width margin re-centers it in the
   viewport (no transform: .fade-in animates transform already). */
@media (min-width: 992px) {
  .globe-container {
    --globe-breakout: min(1320px, 100vw - 64px);
    width: var(--globe-breakout);
    left: 50%;
    margin-left: calc(var(--globe-breakout) / -2);
  }
}

.globe-wrap {
  --globe-info-width: 330px;
  width: 100%;
  height: clamp(480px, 78vh, 680px);
  position: relative;
  overflow: clip;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
}

@media (min-width: 992px) {
  .globe-wrap { height: clamp(540px, 80vh, 760px); }
}

.globe-map { z-index: 0; width: 100%; height: 100%; position: absolute; inset: 0; }

/* Info panel */
.globe-info {
  z-index: 10;
  color: var(--text);
  width: var(--globe-info-width);
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: absolute;
  top: 16px;
  bottom: 16px;
  right: 16px;
  box-shadow: var(--shadow-md);
}

[data-globe-info] {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
  transition: all 0.65s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-globe-init][data-collapsed="true"] [data-globe-info] {
  opacity: 0;
  visibility: hidden;
  transform: translate(64px, 0);
}

.globe-info__collection { width: 100%; height: 100%; }

.globe-info__list {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  position: absolute;
  inset: 0;
  overflow: hidden auto;
  border-radius: inherit;
  outline: none;
}
.globe-info__list:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.globe-info__list-item {
  display: flex;
  flex-flow: column;
  gap: 14px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 100%;
  padding: 20px;
  scroll-snap-align: start;
  cursor: pointer;
}

.globe-info__list-item-visual {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: radial-gradient(120% 120% at 50% 0%, var(--mint-dim) 0%, transparent 70%), var(--surface-2);
  border: 1px solid var(--border-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}

.globe-info__list-item-icon { font-size: 52px; line-height: 1; }

.globe-info__list-item-text {
  display: flex;
  flex-flow: column;
  gap: 8px;
  align-items: flex-start;
}

.globe-info__list-item-label {
  font-family: var(--font-display); font-size: 11px; letter-spacing: 1.5px;
  color: var(--mint); text-transform: uppercase; font-weight: 600; margin: 0;
}

.globe-info__list-item-h {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  letter-spacing: -0.3px; line-height: 1.25; margin: 0;
}

.globe-info__list-item-story { font-size: 14px; line-height: 1.65; color: var(--text-muted); margin: 0; }

.globe-info__list-item-time {
  display: inline-block; font-size: 11px; font-weight: 600; color: var(--mint);
  background: var(--mint-dim); padding: 4px 10px; border-radius: 99px; margin: 0;
}

/* Close button (floats over the panel) */
.globe-close { z-index: 11; position: absolute; top: 12px; right: 12px; }

.globe-close__button {
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--page-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 99px;
  box-shadow: var(--shadow-sm);
}
@media (hover: hover) { .globe-close__button:hover { color: var(--mint); } }
.globe-close__button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.globe-close__icon { width: 10px; }

/* Prev / next navigation */
.globe-nav {
  z-index: 10;
  display: flex; gap: 8px; align-items: center; justify-content: center;
  color: var(--text);
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px;
  position: absolute;
  bottom: 16px;
  right: calc(var(--globe-info-width) + 32px);
  box-shadow: var(--shadow-sm);
}

[data-globe-nav] { transition: all 0.65s cubic-bezier(0.625, 0.05, 0, 1); }

[data-globe-init][data-collapsed="true"] [data-globe-nav] { right: 16px; }

.globe-nav__button {
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 99px; color: inherit;
}
@media (hover: hover) { .globe-nav__button:hover { background: var(--mint-dim); color: var(--mint); } }
.globe-nav__button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.globe-nav__button-icon { width: 12px; }

.globe-nav__counter {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 1px;
  min-width: 52px; text-align: center; margin: 0;
}

/* Reopen tab (right edge, only when collapsed) */
.globe-reopen {
  z-index: 12;
  height: 48px; padding: 0 10px;
  color: var(--text); background: var(--page-bg);
  border: 1px solid var(--border); border-right: none;
  border-radius: 8px 0 0 8px;
  position: absolute; top: 50%; right: 0;
}
.globe-reopen:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.globe-reopen__icon { width: 16px; }

[data-globe-reopen] {
  opacity: 0;
  visibility: hidden;
  transform: translate(32px, -50%);
  transition: all 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-globe-init][data-collapsed="true"] [data-globe-reopen] {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

/* Map pins (emoji per story) */
.globe-marker {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mint);
  border: 2px solid var(--page-bg);
  border-radius: 99px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  position: relative;
}
.globe-marker__emoji { font-size: 15px; line-height: 1; }

[data-globe-marker][data-active="true"] {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

[data-globe-marker-template] { display: none; }

/* Mapbox controls → theme tokens */
.globe-wrap .mapboxgl-ctrl-group {
  background: var(--page-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.globe-wrap .mapboxgl-ctrl-group button { background: transparent; }
.globe-wrap .mapboxgl-ctrl-group button + button { border-top: 1px solid var(--border); }
:root[data-theme="dark"] .globe-wrap .mapboxgl-ctrl button .mapboxgl-ctrl-icon { filter: invert(1); }
:root[data-theme="dark"] .globe-wrap .mapboxgl-ctrl-attrib { background: rgba(14, 15, 19, 0.6); }
:root[data-theme="dark"] .globe-wrap .mapboxgl-ctrl-attrib a { color: var(--text-muted); }

@media (max-width: 991px) {
  .globe-wrap { height: auto; display: flex; flex-flow: column; }

  .globe-map { aspect-ratio: 1; flex: none; height: auto; position: relative; inset: auto; }

  .globe-info {
    z-index: auto;
    width: 100%;
    position: relative; inset: auto;
    border-radius: 0;
    border-style: solid none none;
    box-shadow: none;
  }

  .globe-info__list {
    display: flex;
    scroll-snap-type: x mandatory;
    position: relative; inset: auto;
    overflow: auto hidden;
  }

  .globe-info__list-item {
    flex: 0 0 82%;
    min-width: 82%;
    scroll-snap-align: center;
    border-right: 1px solid var(--border);
    padding: 20px 20px 24px;
  }

  .globe-info__list-item-h { font-size: 18px; }

  .globe-close, .globe-reopen { display: none; }

  .globe-nav {
    position: relative; inset: auto;
    justify-content: space-between;
    border: none; border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 12px 20px;
    box-shadow: none;
  }
}

@media (max-width: 479px) {
  .globe-info__list-item { gap: 12px; padding: 16px 16px 20px; }
  .globe-info__list-item-visual { border-radius: 8px; }
  .globe-info__list-item-icon { font-size: 44px; }
}

/* ─── 4.9 Final CTA ─── */

.final-cta {
  background: var(--hero-section-bg-alt); color: var(--hero-text); text-align: center;
  position: relative; overflow: hidden;
}
.final-cta-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 94, 255, 0.1) 0%, transparent 60%);
  pointer-events: none;
}
.final-cta-inner { position: relative; z-index: 1; }
.final-cta h2 {
  font-family: var(--font-display); font-size: clamp(36px, 6vw, 56px);
  font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 20px;
}
.final-cta p { font-size: 17px; color: var(--hero-text-muted); max-width: 480px; margin: 0 auto 36px; line-height: 1.6; }
.final-cta .sub { font-size: 13px; color: var(--hero-text-subtle); margin-top: 16px; }
.pay-strip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px; margin-top: 22px;
}
.pay-strip [role="listitem"] { display: contents; }
.pay-strip__logo {
  height: 32px; width: auto; display: block;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ─── 4.10 Page hero (sub-pages) ─── */

.page-hero {
  background: var(--hero-section-bg-alt); color: var(--hero-text);
  padding: 120px 32px 100px;
  position: relative; overflow: hidden; text-align: center;
}
.page-hero-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.page-hero h1 {
  font-family: var(--font-display); font-size: clamp(48px, 8vw, 84px);
  font-weight: 800; letter-spacing: -2.5px; line-height: 1; margin-bottom: 24px;
}
.page-hero h1 .accent { color: var(--mint); }
.page-hero p { font-size: 18px; line-height: 1.65; color: var(--hero-text-muted); max-width: 520px; margin: 0 auto; }
.page-hero p a {
  color: var(--mint);
  border-bottom: 1px solid var(--mint-border); padding-bottom: 1px;
  transition: border-color 0.2s ease;
}
@media (hover: hover) { .page-hero p a:hover { border-bottom-color: var(--mint); } }

/* ─── 4.11 FAQ accordion ─── */

.faq-section { padding: 80px 32px 60px; }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border-2); }
.faq-item:first-child { border-top: 1px solid var(--border-2); }
.faq-question {
  width: 100%; background: transparent; border: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 4px; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--text);
  transition: color 0.25s ease;
}
@media (hover: hover) { .faq-question:hover { color: var(--mint); } }
.faq-question:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 4px; }
.faq-icon {
  position: relative; width: 22px; height: 22px; flex-shrink: 0;
  color: var(--text);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
}
@media (hover: hover) { .faq-question:hover .faq-icon { color: var(--mint); } }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.faq-icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq-icon::after  { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }
.faq-item.open .faq-icon { transform: rotate(45deg); color: var(--mint); }
.faq-answer {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.faq-item.open .faq-answer { opacity: 1; }
.faq-answer-inner { padding: 0 4px 28px; font-size: 16px; color: var(--text-muted); line-height: 1.7; max-width: 620px; }
.faq-answer-inner ol, .faq-answer-inner ul { margin: 6px 0 0; padding-left: 22px; }
.faq-answer-inner li { margin-bottom: 4px; }
.faq-answer-inner li:last-child { margin-bottom: 0; }
.faq-answer-inner strong { color: var(--text); font-weight: 600; }

/* ─── 4.12 Legal pages ─── */

.legal-section { padding: 72px 32px 120px; }
.legal-content {
  max-width: 720px; margin: 0 auto; color: var(--text-muted); line-height: 1.7;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  .legal-content { overflow-x: hidden; }
}
.legal-content h2 {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  letter-spacing: -0.4px; color: var(--text); margin: 48px 0 14px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--text); letter-spacing: -0.2px; margin: 28px 0 10px;
}
.legal-content p { font-size: 16px; margin-bottom: 14px; }
.legal-content ul, .legal-content ol { margin: 6px 0 16px; padding-left: 22px; }
.legal-content li { margin-bottom: 6px; }
.legal-content li:last-child { margin-bottom: 0; }
.legal-content strong { color: var(--text); font-weight: 600; }
.legal-content a { color: var(--mint); border-bottom: 1px solid var(--mint-border); transition: border-color 0.2s ease; }
@media (hover: hover) { .legal-content a:hover { border-bottom-color: var(--mint); } }
.legal-content .legal-subheading {
  font-family: var(--font-display); font-weight: 700; color: var(--text);
  font-size: 15px; letter-spacing: -0.1px; margin: 24px 0 8px;
}
.legal-table-wrap {
  margin: 6px 0 18px; border: 1px solid var(--border); border-radius: 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: 100%;
  overscroll-behavior-x: contain;
}
.legal-content table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 540px; }
.legal-content thead { background: var(--surface); }
.legal-content th, .legal-content td {
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.legal-content th {
  font-family: var(--font-display); font-weight: 600; color: var(--text);
  font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase;
}
.legal-content tr:last-child td { border-bottom: none; }
.legal-content td:first-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text); font-weight: 600; white-space: nowrap;
}
.legal-content .legal-table-note { font-size: 13px; color: var(--text-faint); margin: -6px 0 24px; }
.legal-meta {
  display: inline-block;
  font-size: 13px; color: var(--text-faint);
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px;
  padding: 6px 14px; margin-bottom: 32px;
}
.legal-placeholder {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--mint); background: var(--mint-dim);
  padding: 2px 8px; border-radius: 4px;
}

/* ─── 4.13 Support box (FAQ page) ─── */

.support-section { padding: 40px 32px 120px; }
.support-box {
  max-width: 720px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 40px 36px; text-align: center;
}
.support-box h2,
.support-box h3 {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  letter-spacing: -0.5px; margin-bottom: 10px;
}
.support-box p { font-size: 15px; color: var(--text-subtle); line-height: 1.65; margin-bottom: 20px; }
.support-box a {
  display: inline-block; font-family: var(--font-display); font-size: 17px; font-weight: 600;
  color: var(--mint); padding: 10px 22px; border-radius: 99px;
  background: var(--mint-dim); border: 1px solid var(--mint-border);
  transition: transform 0.2s ease, background 0.2s ease;
}
@media (hover: hover) { .support-box a:hover { transform: translateY(-2px); background: rgba(90, 94, 255, 0.18); } }

/* ══════════════════════════════════════════════════════════════════════════
   5. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 5.0 Touch input ────────────────────────────────────────────────────
   Every `:hover` rule in this file is wrapped in `@media (hover: hover)`.
   On touch screens hover either never fires or stays stuck on the last
   tapped element, so those styles are switched off entirely there and a
   press state takes over as the feedback channel instead.
   ──────────────────────────────────────────────────────────────────────── */

@media (hover: none) {
  a:active,
  button:not([disabled]):active,
  [role="button"]:active {
    opacity: 0.6;
  }
  /* Kept separate: an unsupported :has() would invalidate the whole list. */
  label:has(input):active {
    opacity: 0.6;
  }
}

@media (max-width: 1024px) {
  .section { padding-left: 24px; padding-right: 24px; }
  .hero { padding-left: 24px; padding-right: 24px; }
  .page-hero { padding-left: 24px; padding-right: 24px; }
  .app-page { padding-left: 20px; padding-right: 20px; }
  .legal-section { padding-left: 24px; padding-right: 24px; }
  .faq-section { padding-left: 24px; padding-right: 24px; }
  .app-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  }
  .scenario-text { min-width: 0; }
  .legal-content td:first-child { white-space: normal; }
}

@media (max-width: 768px) {
  /* Nav — desktop links collapse into a burger drawer */
  .nav { padding: 0 16px; }
  .nav__logo { font-size: 28px; letter-spacing: -0.7px; }
  html[data-brand] .nav__logo { gap: 6px; }
  .nav__logo-suffix {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .nav__links { display: none !important; }
  .nav__mobile-actions { display: flex !important; }
  .nav__burger { display: inline-flex !important; align-items: center; justify-content: center; }

  /* Sections */
  .br-desktop { display: none; }
  .steps-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card__body { padding: 24px 20px 28px; }
  .product-card__name { font-size: 22px; }
  .product-card__price { font-size: 24px; }
  .compare-scroll { margin: 0; padding: 0; width: 100%; }
  .compare-header th,
  .compare-row th,
  .compare-row td {
    padding: 12px 12px;
  }
  .compare-header th:nth-child(2),
  .compare-header th:nth-child(3),
  .compare-row td.check {
    width: 70px;
  }
  .compare-header { font-size: 12px; }
  .scenario-text { min-width: 0; }
  .scenario-cost { min-width: 0; width: 100%; }
  .trust-bar { gap: 12px 20px; padding: 16px 20px; }
  .calc-grid { grid-template-columns: 1fr; }
  .hero-features { flex-direction: column; gap: 10px; margin-top: 32px; }
  .hero-feat { flex: none; }
  .hero h1 { font-size: 42px; }
  .section { padding: 64px 20px; }
  .hero { padding: 64px 20px 56px; }
  .scenario-card { padding: 32px 24px; }
  .page-hero { padding: 72px 20px 56px; }
  .faq-section { padding: 56px 20px 40px; }
  .support-section { padding: 24px 20px 72px; }
  .support-box { padding: 32px 24px; }
  .faq-question { font-size: 17px; padding: 22px 2px; gap: 16px; }
  .legal-section { padding: 48px 20px 80px; }
  .legal-content h2 { font-size: 21px; margin-top: 40px; }
  .legal-content h3 { font-size: 16px; }
}

@media (max-width: 880px) {
  /* Modal — stack on small screens */
  .modal { padding: 12px; align-items: flex-end; }
  .modal__panel {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 22px;
  }
  .modal__body { padding: 28px 24px 28px; }
  .modal__visual { min-height: 240px; padding: 40px; }

  .auth-form__title,
  .buy__title { font-size: 22px; }
  .buy__price-final { font-size: 36px; }
}

/* Auth + buy modal mobile — hide spline, compact form, sheet-style entry */
@media (max-width: 768px) {
  .modal--auth .modal__visual,
  .modal--buy .modal__visual { display: none; }
  .modal--auth .modal__panel,
  .modal--buy .modal__panel {
    /* The visual column is hidden here — collapse the 2-column desktop grid
       (.modal--buy .modal__panel is too specific for the generic override). */
    grid-template-columns: 1fr;
    width: min(480px, 100%);
    border-radius: 22px;
  }
  .modal--auth .modal__body,
  .modal--buy .modal__body { padding: 32px 24px 24px; }
  .buy__title { font-size: 22px; letter-spacing: -0.4px; }
  .buy__sub { font-size: 13px; margin-bottom: 18px; }
  .auth-form { gap: 14px; }
  .auth-form__header { margin-bottom: 2px; }
  .auth-form__title { font-size: 22px; letter-spacing: -0.4px; }
  .auth-form__switch { font-size: 13px; }
  .form__field input,
  .form__field textarea,
  .form__field select { padding: 12px 14px; border-radius: 10px; }
  .form__label { font-size: 12px; }
}

@media (max-width: 480px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal__visual { min-height: 200px; padding: 28px; }
  .modal__body { padding: 24px 20px 22px; }
  .buy__price-row { flex-wrap: wrap; }
  .buy__price-badge { font-size: 11px; padding: 5px 10px; }
  .buy__price-final { font-size: 32px; }

  /* Edge-to-edge bottom sheet for auth, buy, add-code + lang on small mobiles */
  .modal--auth .modal__panel,
  .modal--buy .modal__panel,
  .modal--add-code .modal__panel,
  .modal--lang .modal__panel,
  .modal--theme .modal__panel {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 12px);
    border-radius: 22px 22px 0 0;
  }
  .modal--auth .modal__body,
  .modal--buy .modal__body { padding: 30px 22px 28px; }
  .auth-form__title,
  .buy__title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .modal, .modal__panel, .modal__close { transition: none; }
  .auth-form { animation: none; }
  .buy__status-dot { animation: none; }
  .pw-strength { animation: none; }
  .pw-strength__bar-fill { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. APP — Tech-startup skin (Konto / Kontakt-Karte / Scan)
   ──────────────────────────────────────────────────────────────────────────
   Scoped to body[data-nav-variant="app"]. Marketing pages are untouched.
   TABLE OF CONTENTS
     6.1  Page shell (.app-page)
     6.2  Status / hints
     6.3  Toolbar
     6.4  Buttons (.app-btn)
     6.5  Cards (.app-card)
     6.6  Empty state
     6.7  Spline header
     6.8  Forms (.app-form)
     6.9  Scan + finder card
     6.10 Add-code modal
     6.11 Nav helpers
     6.12 Responsive overrides
   ══════════════════════════════════════════════════════════════════════════ */

.nav__link--btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0 4px;
}
@media (hover: hover) { .nav__link--btn:hover { color: var(--mint); } }

/* ─── 6.1 Page shell ─── */

.app-page {
  padding: 56px 24px 96px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  max-width: 100%;
}
@supports not (overflow: clip) {
  .app-page { overflow-x: hidden; }
}

/* Sticky footer (app pages): body is a full-height flex column so the footer
   sits flush at the bottom of the screen on short pages instead of being
   pushed below the fold by the main element's own min-height. On tall pages
   everything flows normally. */
body[data-nav-variant="app"] {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body[data-nav-variant="app"] .app-page {
  flex: 1 0 auto;
  min-height: 0;
}

.app-page__inner {
  max-width: 1040px;
  margin: 0 auto;
  min-width: 0;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  .app-page__inner { overflow-x: hidden; }
}
.app-page__inner--narrow { max-width: 640px; }

.app-page__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.1;
  color: var(--app-text);
  margin: 0 0 6px;
}
.app-page__lead {
  margin: 0 0 28px;
  color: var(--app-muted);
  font-size: var(--text-md);
  line-height: 1.5;
}

.app-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.app-page__intro { min-width: 0; flex: 1 1 200px; }
.app-page__intro .app-page__lead { margin-bottom: 0; }
.app-page__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin-left: auto;
}

/* ─── 6.2 Status / hints ─── */

.app-status {
  font-size: var(--text-sm);
  color: var(--app-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}
.app-status:empty { display: none; }

.app-status--error,
.app-status--warn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 500;
  font-size: var(--text-sm);
}
.app-status--error {
  color: var(--error);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
}
.app-status--warn {
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
}
.app-status--error code,
.app-status--warn code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* ─── Purchase success (Stripe return) ─── */

.purchase-success {
  margin: 0 0 24px;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(90, 94, 255, 0.35);
  background: linear-gradient(135deg, rgba(90, 94, 255, 0.08) 0%, rgba(90, 94, 255, 0.02) 100%);
}

.purchase-success[hidden] {
  display: none !important;
}

.purchase-success__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0 0 10px;
  color: var(--app-fg);
}

.purchase-success__text,
.purchase-success__hint {
  margin: 0 0 10px;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--app-muted);
}

.purchase-success__hint {
  margin-bottom: 16px;
}

.purchase-success__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.purchase-success__dismiss {
  margin-top: 4px;
}

.app-hint {
  font-size: var(--text-sm);
  color: var(--app-muted);
  line-height: 1.55;
  margin: 12px 0;
}
.app-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--app-surface);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--app-border);
}

/* ─── 6.3 Toolbar ─── */

.app-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* ─── 6.4 Buttons ─── */

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  border-radius: 999px;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface);
  color: var(--app-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease,
              transform 0.15s ease, color 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .app-btn:hover { border-color: var(--app-text); } }
.app-btn:active { transform: scale(0.98); }
.app-btn:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.app-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) { .app-btn[disabled]:hover { border-color: var(--app-border-strong); } }

.app-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  width: 16px;
  height: 16px;
}

.app-btn--primary {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--on-dark);
  box-shadow: 0 4px 14px rgba(90, 94, 255, 0.25);
}
@media (hover: hover) {
  .app-btn--primary:hover {
    background: var(--mint-hover);
    border-color: var(--mint-hover);
    box-shadow: 0 6px 20px rgba(90, 94, 255, 0.32);
  }
}

.app-btn--secondary {
  background: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border-strong);
}
@media (hover: hover) { .app-btn--secondary:hover { border-color: var(--app-text); } }

.app-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--app-muted);
}
@media (hover: hover) {
  .app-btn--ghost:hover {
    color: var(--app-text);
    background: var(--app-surface);
    border-color: transparent;
  }
}

.app-btn--danger {
  background: var(--app-surface);
  border-color: var(--app-border-strong);
  color: var(--error);
}
@media (hover: hover) { .app-btn--danger:hover { border-color: var(--error); background: var(--error-bg); } }

/* ─── 6.5 Cards ─── */

.app-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.app-card {
  position: relative;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
@media (hover: hover) {
  .app-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--app-border-strong);
  }
}

.app-card__spline {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--spline-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.app-card__spline--link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: filter 0.2s ease;
}
@media (hover: hover) { .app-card__spline--link:hover { filter: brightness(1.03); } }
.app-card__spline--link:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -2px;
  z-index: 1;
}
.app-card__spline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(90, 94, 255, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
.app-card__spline spline-viewer {
  width: 100%;
  height: 100%;
  --logo-color: transparent;
  pointer-events: none;
}
.app-card__spline spline-viewer::part(logo) { display: none !important; visibility: hidden !important; }
.app-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Product-type pill (Sticker / Anhänger) */
.app-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mint-dim);
  color: var(--mint);
  border: 1px solid var(--mint-border);
  white-space: nowrap;
}
.app-pill--anhaenger {
  background: var(--anhaenger-pill-bg);
  color: var(--anhaenger-pill-text);
  border-color: var(--anhaenger-pill-border);
}
.app-pill--on-media {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  backdrop-filter: blur(2px);
}

.app-card__body {
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.app-card__title {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--app-text);
  line-height: 1.3;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.app-card__meta {
  font-size: var(--text-xs);
  color: var(--app-muted);
  margin: 0 0 14px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.app-card__meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  background: var(--app-surface-2);
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--app-text);
  letter-spacing: 0.2px;
}
.app-card__actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.app-card__actions .app-btn {
  flex: 1;
  min-height: 36px;
  padding: 8px 12px;
}

/* ─── 6.6 Empty state ─── */

.app-empty {
  padding: 64px 24px;
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--radius-lg);
  color: var(--app-muted);
  text-align: center;
  font-size: var(--text-md);
  background: var(--app-surface);
}

/* ─── Social queue page ─── */

.social-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.social-block {
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  background: var(--app-surface);
  box-shadow: var(--shadow-xs);
  padding: 18px;
}

.social-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.social-block__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.2px;
  margin: 0;
  color: var(--app-text);
}

.social-block__count {
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  margin-left: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--app-text);
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
}

.social-views__head {
  flex-wrap: wrap;
}

.social-views__field {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.social-views__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.social-views__select {
  width: auto;
  min-width: 190px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 10px 42px 10px 14px;
  font-size: 15px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .social-views__select:hover {
    border-color: var(--checkbox-border);
  }
}

.social-views__select:focus {
  outline: none;
  background-color: var(--input-bg-focus);
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(90, 94, 255, 0.12);
}

.social-view[hidden] {
  display: none;
}

.social-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.social-form .form__field {
  margin-bottom: 0;
}

.social-form textarea {
  min-height: 90px;
  resize: vertical;
}

.social-form__checkbox {
  margin-top: 2px;
}

.social-form__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}

.social-card.is-focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 2px rgba(90, 94, 255, 0.2), var(--shadow-md);
}

.social-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--page-bg);
  border-bottom: 1px solid var(--app-border);
  overflow: hidden;
}

.social-card__media--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.social-card__media--template {
  padding: 14% 12%;
  display: flex;
  flex-direction: column;
}

.social-card__quote {
  margin: auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.4px;
  color: var(--app-text);
}

.social-card__logo {
  margin-top: auto;
  margin-bottom: 6px;
  text-align: center;
}

.social-card__logo-img {
  display: inline-block;
  width: min(58%, 220px);
  height: auto;
}

.social-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--app-border-strong);
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  background: var(--app-surface-2);
  color: var(--app-text);
}

.social-card__badge--queued {
  color: #214fce;
  border-color: rgba(33, 79, 206, 0.3);
  background: rgba(33, 79, 206, 0.08);
}

.social-card__badge--published {
  color: #1f8a4c;
  border-color: rgba(31, 138, 76, 0.35);
  background: rgba(46, 204, 113, 0.08);
}

.social-card__badge--failed {
  color: var(--error);
  border-color: rgba(192, 57, 43, 0.3);
  background: rgba(231, 76, 60, 0.08);
}

.social-card__caption,
.social-card__tags {
  margin: 0 0 10px;
  font-size: var(--text-sm);
  color: var(--app-muted);
  line-height: 1.45;
}

.social-card__tags {
  color: var(--mint-hover);
}

.social-card__fmtchip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--app-border-strong);
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  color: var(--app-muted);
  background: var(--app-surface-2);
}

.social-card__formats {
  border: 0;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.social-card__formats legend {
  float: left;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-muted);
}

.social-card__formats label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  color: var(--app-text);
  cursor: pointer;
}

.social-card__formats input[type="radio"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--mint-hover, #2ecc71);
  cursor: pointer;
}

.social-card__fix {
  margin: 0 0 12px;
}

.social-card__fix-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-muted);
}

.social-card__fix-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.social-card__fix-btn {
  font-size: 13px;
  padding: 8px 12px;
}

.social-card__busy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: rgba(12, 14, 22, 0.62);
  color: #fff;
  text-align: center;
  z-index: 2;
}

.social-card__busy[hidden] {
  display: none;
}

.social-card__busy-text {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  max-width: 16em;
}

.social-card__spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  animation: social-spin 0.8s linear infinite;
}

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

.social-card.is-busy {
  pointer-events: none;
  opacity: 0.96;
}

.social-card__open { text-decoration: none; }

/* ─── 6.6b Suggestion detail page ─── */

.app-status--success {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 500;
  font-size: var(--text-sm);
  color: #1f8a4c;
  background: rgba(46, 204, 113, 0.08);
  border: 1px solid rgba(31, 138, 76, 0.35);
}

.social-detail__back {
  display: inline-block;
  margin-bottom: 10px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--app-muted);
  text-decoration: none;
}
@media (hover: hover) { .social-detail__back:hover { color: var(--app-text); } }

.social-detail__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.social-detail__media,
.social-detail__edit { margin: 0; }

.social-detail__image-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.social-detail__image {
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
}

.social-detail__image-wrap .social-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
}

.social-detail__imgform { margin-top: 4px; }

.social-detail__hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--app-muted);
}

.social-detail__versions { margin-top: 18px; }

.social-detail__versions-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-muted);
}

.social-detail__version-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.social-version {
  flex: 0 0 auto;
  width: 124px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.social-version__img {
  width: 124px;
  height: 186px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
}

.social-version.is-active .social-version__img {
  border-color: var(--mint-hover, #2ecc71);
  box-shadow: 0 0 0 2px var(--mint-hover, #2ecc71);
}

.social-version__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--app-muted);
}

.social-version__src { font-weight: 700; color: var(--app-text); }
.social-version__active { font-weight: 700; color: #1f8a4c; }

.social-version__prompt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.social-version__btn {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 12px;
}

@media (max-width: 820px) {
  .social-detail__body { grid-template-columns: 1fr; }
}

/* ─── 6.7 Spline header (kontakt-karte) ─── */

.app-spline-header {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  overflow: hidden;
  background: var(--spline-gradient);
  border: 1px solid var(--app-border);
  isolation: isolate;
}
.app-spline-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(90, 94, 255, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.app-spline-header spline-viewer {
  width: 100%;
  height: 100%;
  --logo-color: transparent;
}
.app-spline-header spline-viewer::part(logo) { display: none !important; visibility: hidden !important; }
.app-spline-header__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── 6.8 Forms ─── */

.app-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Collapsible form groups (Kontakt-Karte) */
.app-form__group {
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface);
  border-radius: var(--radius-lg);
  margin: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.app-form__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  background: var(--app-surface-2);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}
@media (hover: hover) { .app-form__group-toggle:hover { background: var(--form-group-hover); } }
.app-form__group.is-open .app-form__group-toggle {
  background: var(--mint-dim);
  border-bottom: 1px solid var(--mint-border);
}
.app-form__group-toggle:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -2px;
}
.app-form__group-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--app-text);
  letter-spacing: -0.35px;
  line-height: 1.15;
}
.app-form__group.is-open .app-form__group-label { color: var(--mint); }
@media (hover: hover) { .app-form__group-toggle:hover .app-form__group-label { color: var(--mint); } }
.app-form__group-icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--app-text);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}
.app-form__group-icon::before,
.app-form__group-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.app-form__group-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}
.app-form__group-icon::after {
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 100%;
  transform: translateX(-50%);
}
.app-form__group.is-open .app-form__group-icon {
  transform: rotate(45deg);
  color: var(--mint);
}
.app-form__group-panel {
  padding: 16px 18px 18px;
  background: var(--app-surface);
}
.app-form__group:not(.is-open) .app-form__group-panel { display: none; }

.app-form__security-note {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: #8a6d00;
  background: rgba(255, 196, 0, 0.08);
  border: 1px solid rgba(255, 196, 0, 0.3);
}

/* Legacy fieldset (if used elsewhere) */
.app-form__fieldset {
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  margin: 0;
  box-shadow: var(--shadow-xs);
}
.app-form__legend {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  color: var(--app-text);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 0 12px;
  display: block;
  float: none;
  width: fit-content;
  margin: 0 auto 14px;
  text-align: center;
}

.app-form .form__field { margin-bottom: 14px; }
.app-form .form__field:last-of-type { margin-bottom: 4px; }
.app-form .form__field input {
  border-radius: 10px;
  padding: 12px 14px;
}

.app-form textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px 14px;
  background: var(--input-bg);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--app-text);
  resize: vertical;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.app-form textarea::placeholder { color: var(--placeholder); }
.app-form textarea:focus {
  outline: none;
  background: var(--input-bg-focus);
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(90, 94, 255, 0.12);
}

.app-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.app-form__actions .btn--cta { flex: 0 1 260px; }

.app-link {
  font-size: var(--text-sm);
  color: var(--mint);
  font-weight: 500;
  transition: opacity 0.18s ease;
}
@media (hover: hover) { .app-link:hover { opacity: 0.7; } }

.app-checkbox-native {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 2px;
  padding: 14px 16px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--app-text);
}
.app-checkbox-native input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--mint);
}

/* intl-tel-input — full width, no page-level horizontal scroll */
.form__field--phone {
  overflow: hidden;
  max-width: 100%;
}
.app-form .form__field--phone .iti {
  display: flex !important;
  align-items: stretch;
  width: 100% !important;
  max-width: 100% !important;
}
.app-form .form__field--phone .iti__country-container { flex-shrink: 0; }
.app-form .form__field--phone .iti__selected-country { max-width: 38vw; }
.app-form .form__field--phone .iti__tel-input,
.app-form .form__field--phone .iti input[type="tel"] {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
}
.iti { max-width: 100%; }
.iti input[type="tel"] { font-size: 16px; }

/* ─── 6.9 Scan + finder card ─── */

.app-scan {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-scan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  align-items: center;
}
.app-scan-actions .btn--cta { flex: 0 1 260px; }

.app-finder-card {
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  padding: 26px 24px 22px;
  background: var(--app-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.app-finder-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: -26px -24px 22px;
  padding: 24px 24px 26px;
  background: var(--mint);
  text-align: center;
}
.app-finder-reward__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.app-finder-reward__amount {
  font-family: var(--font-display);
  font-size: clamp(48px, 11vw, 84px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
  color: #ffffff;
}
.app-finder-card p {
  margin: 0 0 8px;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--app-text);
}
.app-finder-card p strong {
  color: var(--app-muted);
  font-weight: 500;
  display: inline-block;
  min-width: 90px;
}
.app-finder-card a {
  color: var(--mint);
  border-bottom: 1px solid var(--mint-border);
  transition: border-color 0.2s ease;
}
@media (hover: hover) { .app-finder-card a:hover { border-bottom-color: var(--mint); } }
.app-finder-card .btn--cta {
  margin-top: 8px;
  width: auto;
  display: inline-flex;
}
.app-finder-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 6px;
}
.app-finder-contact p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.app-finder-card .app-finder-promo {
  margin: 0 0 22px;
  text-align: center;
  color: var(--app-muted);
  font-size: var(--text-sm);
}
.app-finder-card .app-finder-promo a {
  font-weight: 600;
  margin-left: 4px;
}

.app-rule {
  border: none;
  border-top: 1px solid var(--app-divider);
  margin: 18px 0;
}

/* ─── 6.9a Contact mode switch (Kontaktkarte einrichten) ─── */

.app-mode-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  border: none;
}
.app-mode-choice__legend {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--app-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
  padding: 0;
}
.app-mode-choice__option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  background: var(--app-surface);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) { .app-mode-choice__option:hover { border-color: var(--mint-border); } }
.app-mode-choice__option:has(input:checked) {
  border-color: var(--mint);
  box-shadow: 0 0 0 1px var(--mint);
}
.app-mode-choice__option input[type="radio"] {
  flex: 0 0 auto;
  margin-top: 3px;
  accent-color: var(--mint);
  width: 18px;
  height: 18px;
}
.app-mode-choice__label {
  display: block;
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--app-text);
}
.app-mode-choice__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--app-muted);
  line-height: 1.5;
}
.app-mode-choice__hint {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--mint-border);
  color: var(--app-text);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* ─── 6.9b Finder wizard (anonymous contact mode) ─── */

.app-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.app-wizard-seeking {
  font-size: var(--text-sm);
  color: var(--app-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
}
.app-finder-card .app-wizard-seeking { margin-bottom: 12px; }
.app-wizard-message {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.5;
}
.app-wizard-question {
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.4;
}
.app-finder-card .app-wizard-question { margin-bottom: 4px; }

.app-wizard-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
.app-wizard-form .form__error { margin: 0; }

/* Wizard actions: stacked, full-width, equal-height buttons (card is narrow
   even on desktop, so one column reads best on every viewport). */
.app-wizard-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 20px;
}
.app-wizard-form .app-wizard-actions { margin-top: 8px; }
.app-wizard-actions .btn--cta { width: 100%; }
.app-wizard-actions .app-btn {
  width: 100%;
  min-height: 52px;
  font-size: 15px;
  border-radius: 99px;
}

/* On phones, dock the wizard actions in a fixed bar at the bottom browser
   edge (mirroring the sticky header) so the CTAs stay visible while the
   finder page scrolls. The public-mode location tip keeps its button in
   flow — docking it would leave a large empty gap above the footer. */
@media (max-width: 640px) {
  .app-finder-card .app-wizard-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
  }
  .app-finder-share-loc .app-wizard-actions {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    margin-top: 8px;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: none;
  }
  .app-finder-card .app-wizard-actions .btn--cta { margin-top: 0; }
  /* Keep the card's trailing content (hints, links) clear of the docked bar. */
  .app-page:has(.app-finder-card .app-wizard-actions):not(:has(.app-finder-share-loc .app-wizard-actions)) {
    padding-bottom: calc(160px + env(safe-area-inset-bottom));
  }
}

.app-finder-card .app-wizard-link {
  margin: 14px 0 2px;
  text-align: center;
}

.app-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--mint);
  border-bottom: 1px solid var(--mint-border);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
@media (hover: hover) { .app-link-btn:hover { border-bottom-color: var(--mint); } }

.app-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.app-channel-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  background: var(--app-surface);
  color: var(--app-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) { .app-channel-btn:hover { border-color: var(--mint-border); } }
.app-channel-btn.is-active {
  border-color: var(--mint);
  box-shadow: 0 0 0 1px var(--mint);
}
.app-channel-btn__icon {
  display: inline-flex;
  color: var(--mint);
}

.app-geo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.app-geo-row .app-btn { display: inline-flex; align-items: center; gap: 8px; }
.app-geo-row [hidden] { display: none !important; }
.app-geo-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--mint);
}

.app-finder-share-loc {
  margin-top: 4px;
}
.app-finder-share-loc .app-wizard-form {
  margin-top: 12px;
}

/* ─── 6.9c Finder reports (account page) ─── */

.app-reports { margin-top: 40px; }
.app-reports__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 6px;
}
.app-reports__lead {
  margin: 0 0 18px;
  color: var(--app-muted);
  font-size: var(--text-md);
}
.app-reports__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.app-report {
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  background: var(--app-surface);
  box-shadow: var(--shadow-sm);
}
.app-report p {
  margin: 0 0 6px;
  font-size: var(--text-md);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.app-report p strong {
  color: var(--app-muted);
  font-weight: 500;
}
.app-report a {
  color: var(--mint);
  border-bottom: 1px solid var(--mint-border);
  transition: border-color 0.2s ease;
}
@media (hover: hover) { .app-report a:hover { border-bottom-color: var(--mint); } }
.app-report__meta {
  font-size: var(--text-sm);
  color: var(--app-muted);
  margin-bottom: 10px;
}
.app-report__contact--anon {
  font-style: italic;
  color: var(--app-muted);
}
.app-report__actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
}

/* ─── 6.10 Add-code modal ─── */

.modal--add-code .modal__panel {
  grid-template-columns: 1fr;
  width: min(480px, 100%);
}
.modal--add-code .modal__body { padding: 36px 32px 28px; }

.add-code-qr-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--hero-bg);
  min-height: 200px;
  border: 1px solid var(--app-border-strong);
}
.add-code-qr-video {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  vertical-align: middle;
}
.app-add-qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.app-add-qr-result {
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0 0 8px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--app-border);
  color: var(--app-text);
}
.app-add-qr-result--error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error);
}
.app-add-qr-result--ok {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.app-modal-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.4px;
  line-height: 1.15;
  color: var(--app-text);
}
.app-modal-text {
  margin: 0 0 18px;
  font-size: var(--text-md);
  color: var(--app-muted);
  line-height: 1.55;
}
.app-modal-hint {
  margin: 16px 0 0;
  font-size: var(--text-xs);
  color: var(--app-muted-2);
  line-height: 1.5;
}
.app-modal-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--app-text);
}
.app-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.app-modal-back {
  margin-bottom: 14px;
  align-self: flex-start;
}

/* ─── 6.11 Responsive overrides ─── */

@media (max-width: 1024px) {
  .app-page { padding: 48px 24px 80px; }
  .app-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  }
}

@media (max-width: 768px) {
  /* App nav follows the same burger pattern */
  body[data-nav-variant="app"] .nav__links { display: none; }

  .app-page { padding: 24px 16px 64px; }
  .app-page__title {
    font-size: clamp(22px, 6vw, 26px);
    letter-spacing: -0.4px;
  }
  .app-page__header {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 20px;
  }
  .app-page__intro {
    flex: 1 1 auto;
    min-width: 0;
  }
  .app-page__actions {
    justify-content: flex-end;
    margin-left: auto;
    flex-shrink: 0;
  }
  .app-page__actions .app-btn--icon-add .app-btn__label {
    display: none;
  }
  .app-page__actions .app-btn--icon-add {
    width: 44px;
    min-width: 44px;
    padding: 0;
    gap: 0;
  }
  .app-page__actions .app-btn--icon-add .app-btn__icon {
    width: auto;
    height: auto;
    font-size: 22px;
    font-weight: 700;
  }
  .app-page__lead {
    font-size: var(--text-sm);
    margin-bottom: 20px;
  }
  .app-page__intro .app-page__lead { margin-bottom: 0; }
  .app-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .app-card__body { padding: 16px; }
  .app-card__actions .app-btn { min-height: 40px; }

  .social-block {
    padding: 14px;
    border-radius: 14px;
  }
  .social-block__head {
    margin-bottom: 12px;
  }
  .social-views__field {
    width: 100%;
  }
  .social-views__select {
    flex: 1;
    min-width: 0;
  }
  .social-form {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .social-form__actions {
    margin-top: 2px;
  }

  .app-form { gap: 14px; }
  .app-form__group-toggle { padding: 14px 16px; }
  .app-form__group-panel { padding: 14px 16px 16px; }
  .app-form__fieldset {
    padding: 18px 16px 12px;
    border-radius: 14px;
  }
  .app-form .form__field--phone .iti__selected-country { max-width: 34vw; }
  .app-form__actions { gap: 12px; }
  .app-form__actions .btn--cta { flex: 1 1 100%; }

  .app-finder-card { padding: 22px 20px 18px; }
  .app-finder-reward { margin: -22px -20px 20px; padding: 22px 20px 24px; }
  .app-finder-contact {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .app-finder-contact p {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .app-finder-contact p strong {
    min-width: 0;
    flex: 0 0 auto;
  }
  .app-spline-header {
    aspect-ratio: 16 / 8;
    margin-bottom: 18px;
    border-radius: 14px;
  }

  .modal--add-code .modal__body { padding: 28px 22px 24px; }
  .app-modal-title { font-size: 22px; }

  /* Slightly bigger touch targets on mobile */
  .app-btn {
    min-height: 44px;
    padding: 10px 18px;
  }
}

@media (max-width: 480px) {
  .app-finder-card p strong {
    display: block;
    min-width: 0;
    margin-bottom: 2px;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }
}

/* ─── Stripe Test Mode banner ─── */

body.has-stripe-test-banner {
  padding-top: 52px;
}

.stripe-test-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 8px 16px;
  background: #7c2d12;
  color: #fff7ed;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.stripe-test-banner__title {
  font-weight: 700;
  margin: 0 0 2px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stripe-test-banner__text {
  margin: 0;
}

.stripe-test-banner code {
  background: rgba(255, 255, 255, 0.15);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.stripe-test-banner a {
  color: #fed7aa;
  margin-left: 8px;
  text-decoration: underline;
}

/* ── Language switcher — icon buttons (nav + footer) ── */
.nav__lang {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.nav__lang svg { width: 18px; height: 18px; display: block; }
@media (hover: hover) {
  .nav__lang:hover {
    color: var(--text);
    border-color: var(--calc-muted);
    background: var(--surface-2);
  }
}
.nav__lang:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

/* Theme switcher — mirrors language icon button */
.nav__theme {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.nav__theme svg { width: 18px; height: 18px; display: block; }
@media (hover: hover) {
  .nav__theme:hover {
    color: var(--text);
    border-color: var(--calc-muted);
    background: var(--surface-2);
  }
}
.nav__theme:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}
.nav__theme--drawer { align-self: flex-end; }

.nav__lang--drawer { align-self: flex-end; }

.footer__theme-btn,
.footer__lang-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-lang-color);
  background: transparent;
  border: 1px solid var(--footer-lang-border);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.footer__theme-btn svg,
.footer__lang-btn svg { width: 18px; height: 18px; display: block; }
@media (hover: hover) {
  .footer__theme-btn:hover,
  .footer__lang-btn:hover {
    color: var(--footer-lang-hover-color);
    border-color: var(--footer-link-hover);
    background: var(--footer-lang-hover-bg);
  }
}
.footer__theme-btn:focus-visible,
.footer__lang-btn:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.footer__lang {
  margin-top: 16px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* Drawer header row that holds the language icon at the top-right of the drawer. */
.nav__drawer-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-3);
}

/* ── Language modal ── */
.modal--lang .modal__panel,
.modal--theme .modal__panel {
  grid-template-columns: 1fr;
  width: min(420px, 100%);
}
.modal--lang .modal__body,
.modal--theme .modal__body { padding: 32px 28px 28px; }

.lang-list--theme {
  grid-template-columns: 1fr;
}

.lang__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.6px;
  margin: 0 0 6px;
  color: var(--text);
}
.lang__lead {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--on-dark-subtle);
  line-height: 1.5;
}

.lang-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.lang-list__item { margin: 0; min-width: 0; }
.lang-list__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background: var(--lang-card-bg);
  border: 1px solid var(--lang-card-border);
  border-radius: 14px;
  color: var(--text);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, border-width 0.2s ease, background 0.2s ease;
}
@media (hover: hover) {
  .lang-list__btn:hover:not(.is-active) {
    border-color: var(--lang-card-hover);
  }
}
.lang-list__btn:focus,
.lang-list__btn:focus-visible {
  outline: none;
}
.lang-list__flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: var(--lang-flag-bg);
  flex-shrink: 0;
}
.lang-list__flag svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lang-list__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.2;
  color: var(--text);
}
.lang-list__code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--placeholder);
  text-transform: uppercase;
}
/* Active card: white fill + thicker mint border (inactive = 1px grey). */
.lang-list__btn.is-active {
  background: var(--lang-card-bg);
  border-color: var(--mint);
  border-width: 2px;
  cursor: default;
}

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

/* ── Health status (/health-check) ── */
.health-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.health-page__title {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.health-page__meta {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 24px;
}
.health-page__meta--stale {
  color: var(--stale);
  font-weight: 600;
}
.health-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}
.health-summary__card {
  flex: 1 1 140px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--health-card-bg);
  border: 1px solid var(--health-card-border);
}
.health-summary__card--ok { border-color: var(--health-pass-border); background: var(--health-pass-bg); }
.health-summary__card--fail { border-color: var(--health-fail-border); background: var(--health-fail-bg); }
.health-summary__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}
.health-summary__label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.health-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--health-card-border);
  background: var(--page-bg);
}
.health-check__lamp {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--compare-dash);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.health-check--pass .health-check__lamp {
  background: var(--health-pass-border);
  box-shadow: 0 0 8px rgba(45, 154, 90, 0.45);
}
.health-check--fail .health-check__lamp {
  background: var(--health-fail-border);
  box-shadow: 0 0 8px rgba(214, 69, 69, 0.4);
}
.health-check--skip .health-check__lamp {
  background: var(--text-faint);
}
.health-check__body { min-width: 0; flex: 1; }
.health-check__label {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
}
.health-check__detail {
  font-size: 12px;
  color: var(--on-dark-subtle);
  margin-top: 4px;
  word-break: break-word;
}
.health-check__ms {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.health-group-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin: 28px 0 12px;
  grid-column: 1 / -1;
}
.health-run-hint {
  margin-top: 24px;
  padding: 16px;
  border-radius: 10px;
  background: #f0f4ff;
  border: 1px solid #d8e0ff;
  font-size: 13px;
  color: #334;
}
.health-run-hint code {
  font-size: 12px;
  background: rgba(0,0,0,0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Contact-card photos (token_image)
   ══════════════════════════════════════════════════════════════════════════ */

.cc-images__hint {
  margin: 0 0 14px;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--app-muted);
}

.cc-images__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 520px) {
  .cc-images__grid { grid-template-columns: repeat(2, 1fr); }
}

.cc-thumb,
.cc-upload {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
}

.cc-thumb {
  border: 1px solid var(--app-border);
  background: var(--surface);
}

.cc-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cc-thumb__delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--on-dark);
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(2px);
  transition: background 0.18s ease, transform 0.15s ease;
}
@media (hover: hover) { .cc-thumb__delete:hover { background: #c0392b; transform: scale(1.06); } }
.cc-thumb__delete:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.cc-thumb--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
}

.cc-thumb__spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--app-border-strong);
  border-top-color: var(--mint);
  animation: spin 0.7s linear infinite;
}

.cc-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--app-border-strong);
  background: var(--app-surface);
  color: var(--app-muted);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
@media (hover: hover) {
  .cc-upload:hover {
    border-color: var(--mint);
    color: var(--mint);
    background: var(--surface);
  }
}
.cc-upload:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.cc-upload__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cc-upload__label {
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Confirm modal (delete photo) */
.modal--confirm .modal__panel {
  grid-template-columns: 1fr;
  width: min(420px, 100%);
}
.modal--confirm .modal__body { padding: 36px 32px 28px; }
.modal--confirm .cc-confirm__actions { margin-top: 8px; }

.cc-confirm__actions .app-btn,
.cc-confirm__actions .btn { width: 100%; }

.btn--danger {
  background: #c0392b;
  color: var(--on-dark);
}
@media (hover: hover) { .btn--danger:hover { background: #a93226; } }
.btn--danger .btn__spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: var(--on-dark);
}

/* ============================================================
   White Label (admin-only generator)
   ============================================================ */
.wl-muted { color: var(--app-muted); }

.wl-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .wl-form__row { grid-template-columns: 1fr; }
}

.wl-color {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wl-color input[type="color"] {
  width: 48px;
  height: 44px;
  padding: 2px;
  border: 1px solid var(--app-border, rgba(0, 0, 0, 0.14));
  border-radius: 10px;
  background: var(--app-surface, #fff);
  cursor: pointer;
}
.wl-color input[type="text"] { flex: 1; min-width: 0; }

.wl-slug {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wl-slug input[type="text"] { flex: 1; min-width: 160px; }
.wl-slug__suffix { color: var(--app-muted); font-weight: 600; white-space: nowrap; }
.wl-slug__regen { padding: 8px 14px; }

.wl-hint {
  display: block;
  margin-top: 6px;
  font-size: var(--text-xs, 12px);
  color: var(--app-muted);
}

.wl-preview {
  display: inline-flex;
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--app-border, rgba(0, 0, 0, 0.18));
  border-radius: 10px;
  background:
    repeating-conic-gradient(rgba(0, 0, 0, 0.06) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}
.wl-preview__img { max-width: 140px; max-height: 90px; object-fit: contain; display: block; }

.wl-result__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 880px) {
  .wl-result__grid { grid-template-columns: 1fr; }
}
.wl-sub {
  margin: 18px 0 12px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}
.wl-result__col > .wl-sub:first-child { margin-top: 0; }

.wl-kv {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--app-divider, rgba(0, 0, 0, 0.08));
  font-size: 14px;
}
.wl-kv__k { width: 110px; flex: none; color: var(--app-muted); }
.wl-kv__v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wl-copy {
  flex: none;
  border: 1px solid var(--app-border, rgba(0, 0, 0, 0.14));
  background: transparent;
  color: var(--mint);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
@media (hover: hover) { .wl-copy:hover { background: var(--mint-dim); } }

.wl-image {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--app-surface-2, rgba(0, 0, 0, 0.04));
}
.wl-image__img { display: block; width: 100%; height: auto; }
.wl-image__regen { margin: 10px; }
/* RETRY + upload-your-own controls grouped under an image slot. */
.wl-image__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; }
.wl-image__actions .wl-image__regen,
.wl-image__actions .wl-image__upload { margin: 0; }
.wl-image__upload { cursor: pointer; }
.wl-image__upload input { display: none; }
/* Scannable raw QR thumbnail shown beside the engraved QR back side. */
.wl-qr-raw {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 10px;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: var(--app-muted);
  font-size: 12px;
}
.wl-qr-raw__img {
  display: block;
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
}
.wl-image__pending {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px;
  color: var(--app-muted);
  font-size: 14px;
}
.wl-spinner {
  width: 22px;
  height: 22px;
  flex: none;
  border: 3px solid var(--mint-border, rgba(90, 94, 255, 0.3));
  border-top-color: var(--mint, #5a5eff);
  border-radius: 50%;
  animation: wl-spin 0.8s linear infinite;
}
@keyframes wl-spin { to { transform: rotate(360deg); } }

/* White-label tabs: switch between the create form and the existing brands so
   the two are never shown at once. */
.wl-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 20px;
  border: 1px solid var(--app-border, rgba(0, 0, 0, 0.1));
  border-radius: 12px;
  background: var(--app-surface-2, rgba(0, 0, 0, 0.04));
}
.wl-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--app-muted, #555);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
@media (hover: hover) { .wl-tab:hover { color: var(--text); } }
.wl-tab.is-active {
  background: var(--app-surface, #fff);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.wl-tab__count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--mint-dim, rgba(90, 94, 255, 0.12));
  color: var(--mint, #5a5eff);
  font-size: 12px;
  font-weight: 700;
}
.wl-panel { animation: wl-fade 0.2s ease; }
@keyframes wl-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 520px) {
  .wl-tabs { display: flex; width: 100%; }
  .wl-tab { flex: 1; justify-content: center; }
}

/* Visual font picker: every combo previewed in its real heading + body fonts. */
.wl-fontpicker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.wl-font-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 12px 36px 12px 14px;
  border: 1px solid var(--app-border, rgba(0, 0, 0, 0.12));
  border-radius: 12px;
  background: var(--app-surface, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
@media (hover: hover) { .wl-font-opt:hover { border-color: var(--mint-border, rgba(90, 94, 255, 0.4)); } }
.wl-font-opt.is-active {
  border-color: var(--mint, #5a5eff);
  box-shadow: inset 0 0 0 1px var(--mint, #5a5eff);
  background: var(--mint-dim, rgba(90, 94, 255, 0.06));
}
.wl-font-opt__head { font-size: 21px; line-height: 1.2; color: var(--text); }
.wl-font-opt__body { font-size: 13px; line-height: 1.3; color: var(--app-muted, #666); }
.wl-font-opt__check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--app-border, rgba(0, 0, 0, 0.25));
}
.wl-font-opt.is-active .wl-font-opt__check {
  border-color: var(--mint, #5a5eff);
  background: var(--mint, #5a5eff);
  box-shadow: inset 0 0 0 3px var(--app-surface, #fff);
}

.wl-demos { margin-top: 4px; }
.wl-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--app-border, rgba(0, 0, 0, 0.1));
  border-radius: 14px;
  overflow: hidden;
  background: var(--app-surface, #fff);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) { .wl-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1); } }
.wl-card__thumb {
  aspect-ratio: 1 / 1;
  background: var(--app-surface-2, rgba(0, 0, 0, 0.04));
  display: grid;
  place-items: center;
  padding: 6px;
}
/* Product renders are square with the disc centered — contain keeps the whole
   disc visible and centered (no crop), and also fits non-square uploads. */
.wl-card__thumb img { width: 100%; height: 100%; object-fit: contain; }
.wl-card__placeholder {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--mint-dim, rgba(90, 94, 255, 0.12));
}
.wl-card__body { padding: 12px 14px 14px; }
.wl-card__title { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.wl-card__link { font-size: 12px; color: var(--mint); word-break: break-all; }
.wl-card__badge {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--mint-dim, rgba(90, 94, 255, 0.12));
  color: var(--mint);
}
.wl-card__creds {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--app-divider, rgba(0, 0, 0, 0.08));
}
.wl-card__creds-h {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-muted);
}
.wl-cred {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}
.wl-cred__k { width: 62px; flex: none; color: var(--app-muted); }
.wl-cred__v {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.wl-card__actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--app-divider, rgba(0, 0, 0, 0.08));
  display: flex;
  justify-content: flex-end;
}
.wl-card__delete {
  font-size: 12px;
  padding: 4px 12px;
  color: var(--app-danger, #d33);
}
@media (hover: hover) { .wl-card__delete:hover { color: var(--app-danger, #d33); } }

/* —— Report lost (Fundbüro) —— */
.app-pill--lost {
  background: color-mix(in srgb, #e85d4c 18%, transparent);
  color: #c43b2b;
  margin-left: 6px;
  vertical-align: middle;
}
.rl-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0 20px;
}
.rl-steps__item {
  border: 1px solid var(--app-divider, rgba(0,0,0,.12));
  background: var(--app-surface, #fff);
  color: var(--app-muted, #666);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.rl-steps__item.is-active {
  border-color: var(--mint, #5a5eff);
  color: var(--mint, #5a5eff);
}
.rl-steps__item:disabled { opacity: .45; cursor: default; }
.rl-help { font-size: 14px; color: var(--app-muted, #666); margin: 0 0 12px; }
.rl-map {
  width: 100%;
  height: min(52vh, 420px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--app-divider, rgba(0,0,0,.1));
  margin-bottom: 16px;
}
.rl-radius {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  font-size: 14px;
}
.rl-offices { display: grid; gap: 10px; margin-bottom: 16px; }
.rl-office {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--app-divider, rgba(0,0,0,.1));
  border-radius: 14px;
  background: var(--app-surface, #fff);
  cursor: pointer;
}
.rl-office--disabled { opacity: .72; cursor: default; }
.rl-office__body { display: grid; gap: 2px; font-size: 13px; color: var(--app-muted, #666); }
.rl-office__name { font-size: 15px; color: var(--app-text, #0a0a0a); }
.rl-office__warn { color: #c43b2b; }
.rl-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  font-size: 14px;
}
.rl-photos { margin-bottom: 12px; }
.rl-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.rl-thumb {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--app-divider, rgba(0,0,0,.12));
  display: block;
}
.rl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-thumb input {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
}
.rl-thumb__del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
}
.rl-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px dashed var(--app-divider, rgba(0,0,0,.2));
  cursor: pointer;
  font-size: 13px;
}
.rl-done-list { padding-left: 18px; margin: 12px 0 16px; }
.rl-done-list li { margin-bottom: 6px; }
.app-page__back { margin: 0 0 8px; font-size: 14px; }
.app-page__back a { color: var(--app-muted, #666); text-decoration: none; }
@media (hover: hover) { .app-page__back a:hover { color: var(--mint, #5a5eff); } }

.rl-test-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, #e8a317 18%, transparent);
  color: #8a5a00;
  font-size: 13px;
  font-weight: 600;
}