/* ============================================================
   encirkl v2 — Shared design system
   Used by every v2 mockup page (index, partner, badges, loops, legal).
   Page-specific layouts live in each page's own <style> block.
   ============================================================ */

/* Font-faces + universal easing live in css/foundations.css (load first) */

/* ============================================================
   Design tokens — light first
   ============================================================ */
:root{
  --mint: #0E7048;
  --mint-soft: #DDF4E6;
  --mint-ink: #095333;
  --amber: #B88A1F;
  --amber-soft: #FBF1D8;
  --amber-ink: #7E5E14;
  --sky: #235AA0;
  --sky-soft: #E5EEF8;
  --sky-ink: #163E70;
  --ceramic: #B84A2E;
  --ceramic-soft: #F5E1D9;
  --ceramic-ink: #7A2E1B;

  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F2F0E8;
  --border: #E5E3DA;
  --border-strong: #D2CFC4;

  --ink: #0F1410;
  --ink-2: #2A312C;
  --ink-muted: #5A6259;
  --ink-soft: #595E58;

  --shadow-xs: 0 1px 2px rgba(15,20,16,.04);
  --shadow-sm: 0 2px 8px rgba(15,20,16,.06);
  --shadow-md: 0 8px 24px rgba(15,20,16,.08);
  --shadow-lg: 0 20px 48px rgba(15,20,16,.10);
  --ring: 0 0 0 3px rgba(14,112,72,.40);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --container: 1180px;
  --pad-x: clamp(20px, 4vw, 52px);
  --pad-y: clamp(64px, 9vw, 120px);

  --btn-fg: #ffffff;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 600ms;
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0E1411;
  --surface: #15201A;
  --surface-2: #1B2820;
  --border: #233027;
  --border-strong: #2E3D33;
  --ink: #F2EFE6;
  --ink-2: #D7D3C7;
  --ink-muted: #99A89B;
  --ink-soft: #849383;
  --btn-fg: #0E1411;
  --mint: #34D399;
  --mint-soft: rgba(52,211,153,.14);
  --mint-ink: #6EE7B7;
  --amber: #E0BD66;
  --amber-soft: rgba(224,189,102,.14);
  --amber-ink: #F1D89C;
  --sky: #7DB1EA;
  --sky-soft: rgba(125,177,234,.14);
  --sky-ink: #BAD5F2;
  --ceramic: #E88764;
  --ceramic-soft: rgba(232,135,100,.14);
  --ceramic-ink: #F2B198;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.3);
  --shadow-md: 0 10px 28px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 56px rgba(0,0,0,.45);
  --ring: 0 0 0 3px rgba(52,211,153,.40);
}

@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    color-scheme: dark;
    --bg: #0E1411;
    --surface: #15201A;
    --surface-2: #1B2820;
    --border: #233027;
    --border-strong: #2E3D33;
    --ink: #F2EFE6;
    --ink-2: #D7D3C7;
    --ink-muted: #99A89B;
    --ink-soft: #849383;
    --btn-fg: #0E1411;
    --mint: #34D399;
    --mint-soft: rgba(52,211,153,.14);
    --mint-ink: #6EE7B7;
    --amber: #E0BD66;
    --amber-soft: rgba(224,189,102,.14);
    --amber-ink: #F1D89C;
    --sky: #7DB1EA;
    --sky-soft: rgba(125,177,234,.14);
    --sky-ink: #BAD5F2;
    --ceramic: #E88764;
    --ceramic-soft: rgba(232,135,100,.14);
    --ceramic-ink: #F2B198;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 2px 10px rgba(0,0,0,.3);
    --shadow-md: 0 10px 28px rgba(0,0,0,.4);
    --shadow-lg: 0 24px 56px rgba(0,0,0,.45);
    --ring: 0 0 0 3px rgba(52,211,153,.40);
  }
}

/* ============================================================
   Desktop scale — feedback from desktop users: the page reads
   noticeably better at ~130% browser zoom on large monitors.
   The token system here is hardcoded px throughout (no rem), so
   rather than rewrite hundreds of values, we replicate that zoom
   level natively via the CSS `zoom` property on the root element —
   root-level zoom is treated like real page zoom by all evergreen
   engines (Chrome/Edge always, Safari 17+, Firefox 126+); older
   browsers simply ignore it and see the current, unscaled layout.
   Scoped to wide viewports with margin above the 960px desktop-nav
   breakpoint, so mid-size laptop windows are unaffected and no
   window can dip into the mobile layout as a side effect of zoom.
   ============================================================ */
@media (min-width: 1280px){
  html{ zoom: 1.3; }
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Nunito',sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
img,svg{max-width:100%;display:block;height:auto}
a{color:var(--mint-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
h1,h2,h3,h4{
  font-family:'Roca Two',serif;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0 0 .4em;
  line-height:1.08;
}
h1{font-size:clamp(40px, 6.2vw, 76px); line-height:1.02; letter-spacing:-.025em}
h2{font-size:clamp(28px, 3.6vw, 46px)}
h3{font-size:clamp(20px, 2.1vw, 26px); line-height:1.18}
h4{font-size:18px; line-height:1.25}
p{margin:0 0 1em}
hr{border:none;border-top:1px solid var(--border);margin:0}

:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-xs)}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--bg);
  padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;
  font-weight:600;z-index:1000;
}
.skip:focus{left:0}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
}
section{padding:var(--pad-y) 0}

/* ============================================================
   Mockup banner (remove for production)
   ============================================================ */
.mockup-banner{
  background:linear-gradient(90deg, var(--ceramic-soft), color-mix(in srgb, var(--ceramic-soft) 55%, var(--mint-soft)));
  border-bottom:1px solid color-mix(in srgb, var(--ceramic) 22%, var(--border));
  padding:8px var(--pad-x);
  font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--ink-2);text-align:center;
}
.mockup-banner .tag{
  display:inline-block;background:var(--ceramic);color:#FFFFFF;
  padding:2px 8px;border-radius:var(--radius-pill);font-size:11px;margin-right:8px;letter-spacing:.04em;
}
.mockup-banner a{color:var(--ceramic-ink);text-decoration:underline;text-underline-offset:2px}
.mockup-banner a:hover{color:var(--ceramic)}
:root[data-theme="dark"] .mockup-banner .tag{color:#1A0C05}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .mockup-banner .tag{color:#1A0C05}
}

/* ============================================================
   Utility classes
   ============================================================ */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint-ink);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";width:22px;height:1.5px;background:currentColor;border-radius:2px;
}
.eyebrow.amber{color:var(--amber-ink)}
.eyebrow.sky{color:var(--sky-ink)}
.lead{font-size:clamp(17px, 1.4vw, 20px); color:var(--ink-muted); line-height:1.6}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;
  font-family:inherit;font-size:16px;font-weight:700;
  border:1.5px solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;text-decoration:none;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  min-height:48px;white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--mint);color:var(--btn-fg);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--mint-ink);box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--ink);background:var(--surface-2)}
.btn-ghost{background:transparent;color:var(--ink-2);padding:10px 14px}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-outline-mint{background:transparent;color:var(--mint);border:2px solid var(--mint);box-shadow:none;font-weight:700}
.btn-outline-mint:hover{background:var(--mint-soft);color:var(--mint-ink);border-color:var(--mint-ink)}
.btn-amber{background:var(--amber);color:#1A140A;box-shadow:var(--shadow-sm)}
.btn-amber:hover{background:var(--amber-ink);color:#fff}
.btn-sky{background:var(--sky);color:var(--btn-fg);box-shadow:var(--shadow-sm)}
.btn-sky:hover{background:var(--sky-ink)}
.btn-ceramic{background:var(--ceramic);color:#FFFFFF;box-shadow:var(--shadow-sm)}
.btn-ceramic:hover{background:var(--ceramic-ink);color:#FFFFFF;box-shadow:var(--shadow-md)}
:root[data-theme="dark"] .btn-ceramic{color:#1A0C05}
:root[data-theme="dark"] .btn-ceramic:hover{color:#1A0C05}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .btn-ceramic{color:#1A0C05}
  :root[data-theme="auto"] .btn-ceramic:hover{color:#1A0C05}
}
.btn-outline-ceramic{background:transparent;color:var(--ceramic);border:2px solid var(--ceramic);box-shadow:none;font-weight:700}
.btn-outline-ceramic:hover{background:var(--ceramic-soft);color:var(--ceramic-ink);border-color:var(--ceramic-ink)}
.btn svg{width:18px;height:18px}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;
  padding:6px 12px;border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--border);
}
.chip.mint{background:var(--mint-soft);color:var(--mint-ink);border-color:transparent}
.chip.amber{background:var(--amber-soft);color:var(--amber-ink);border-color:transparent}
.chip.sky{background:var(--sky-soft);color:var(--sky-ink);border-color:transparent}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:28px;
  box-shadow:var(--shadow-xs);
  transition:transform var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease);
}
.card-hover:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-strong)}

/* ============================================================
   Topbar (sticky, with overhanging wordmark + shrink-on-scroll)
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:50;
  overflow:visible;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:var(--container);
  margin:0 auto;
  display:flex;align-items:center;gap:24px;
  padding:10px var(--pad-x);
  min-height:60px;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Roca Two',serif;font-weight:800;font-size:22px;color:var(--ink);
  letter-spacing:-.01em;text-decoration:none;
}
.brand:hover{text-decoration:none}
.brand-logo{width:auto;display:block}
.brand-logo--dark{display:none}
:root[data-theme="dark"] .brand-logo--light{display:none}
:root[data-theme="dark"] .brand-logo--dark{display:block}

/* Hero market-note — Spazierclub reference (DE only).
   Subtle "note" styling: light background, small text, slight indent.
   Positioned below the hero-proof strip within the copy column. */
.hero-market-note{
  display:block;
  margin-top:20px;
  padding:14px 16px;
  background:color-mix(in srgb, var(--mint-soft, #ecf7ef) 60%, transparent);
  border-left:3px solid var(--mint, #4a9d63);
  border-radius:6px;
  font-size:13px;
  line-height:1.55;
  color:var(--ink-muted);
  max-width:560px;
}
.hero-market-note-label{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mint-ink, #2a6b3d);
  margin-bottom:6px;
}

/* App badges — footer.
   Consolidated here so cascade order is deterministic: layout rule first,
   then theme-swap. Scoped Astro styles caused specificity collisions. */
.app-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;align-items:flex-start}
.app-badge{display:inline-block;line-height:0;transition:transform 160ms var(--ease),opacity 160ms var(--ease)}
.app-badge:hover,.app-badge:focus-visible{transform:translateY(-1px);opacity:.92}
.app-badge-img{display:block;height:54px;width:auto;max-width:100%}
.app-badge-stack{display:flex;flex-direction:column;gap:4px}
.app-badge-caption{font-size:11px;letter-spacing:.03em;color:var(--ink-muted);text-transform:uppercase;padding-left:2px}

/* App Store badge theme swap — Apple Black lockup on light bg,
   White lockup on dark bg. Same pattern as brand-logo. Rules AFTER
   .app-badge-img so cascade order picks the swap when both classes match. */
.app-badge-img--dark{display:none}
:root[data-theme="dark"] .app-badge-img--light{display:none}
:root[data-theme="dark"] .app-badge-img--dark{display:block}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .app-badge-img--light{display:none}
  :root[data-theme="auto"] .app-badge-img--dark{display:block}
}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .brand-logo--light{display:none}
  :root[data-theme="auto"] .brand-logo--dark{display:block}
}

.topbar .brand{
  position:relative;isolation:isolate;
  line-height:0;
}
.topbar .brand-logo{
  height:120px;
  margin-top:0;
  margin-bottom:-60px;
  filter:drop-shadow(0 14px 28px rgba(15,20,16,.14));
  transition:
    height var(--t-base) var(--ease),
    margin-top var(--t-base) var(--ease),
    margin-bottom var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    filter var(--t-base) var(--ease);
}
.topbar .brand:hover .brand-logo{transform:scale(1.03)}
.topbar .brand::after{
  content:"";position:absolute;
  top:-8px; bottom:-60px; left:-20px; right:-20px;
  background:radial-gradient(ellipse at 30% 35%, var(--mint-soft) 0%, transparent 65%);
  filter:blur(20px);
  opacity:.55;
  z-index:-1;pointer-events:none;
  transition:opacity var(--t-base) var(--ease);
}
.topbar .brand:hover::after{opacity:1}

.topbar.scrolled .brand-logo{
  height:56px;
  margin-top:0;
  margin-bottom:0;
}
.topbar.scrolled .brand::after{opacity:0}

.footer-brand .brand-logo{height:80px}

:root[data-theme="dark"] .topbar .brand-logo{
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.6));
}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .topbar .brand-logo{
    filter:drop-shadow(0 14px 30px rgba(0,0,0,.6));
  }
}

.nav{
  display:flex;align-items:center;gap:4px;margin-left:24px;
}
.nav a{
  font-size:15px;font-weight:600;color:var(--ink-2);
  padding:8px 12px;border-radius:var(--radius-xs);
}
.nav a:hover{color:var(--ink);background:var(--surface-2);text-decoration:none}
.nav a.on{color:var(--ink);background:var(--surface-2)}
.nav-spacer{flex:1}
.utilities{display:flex;align-items:center;gap:6px}
.iconbtn{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);
  border-radius:var(--radius-pill);color:var(--ink-2);cursor:pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.iconbtn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--border-strong)}
.iconbtn svg{width:18px;height:18px}
.lang{
  display:inline-flex;background:var(--surface-2);border-radius:var(--radius-pill);
  padding:3px;border:1px solid var(--border);
}
.lang a{
  font-size:13px;font-weight:700;padding:6px 12px;border-radius:var(--radius-pill);color:var(--ink-muted);
}
.lang a.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-xs)}
.lang a:hover{text-decoration:none;color:var(--ink)}
.menu-toggle{display:none}

/* ============================================================
   Mobile drawer — slide-down nav panel triggered by .menu-toggle
   Injected by initMobileDrawer in js/v2-shared.js
   ============================================================ */
.mobile-drawer{
  position:fixed;left:0;right:0;top:60px;z-index:49;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-md);
  transform:translateY(-110%);
  opacity:0;pointer-events:none;
  transition:
    transform var(--t-base) var(--ease),
    opacity var(--t-base) var(--ease);
}
.mobile-drawer.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.mobile-drawer-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:16px var(--pad-x) 24px;
  display:flex;flex-direction:column;gap:4px;
}
.mobile-drawer .md-link{
  display:block;
  padding:14px 16px;
  font-size:17px;font-weight:600;
  color:var(--ink);
  border-radius:var(--radius-sm);
  text-decoration:none;
}
.mobile-drawer .md-link:hover,
.mobile-drawer .md-link:focus-visible{
  background:var(--surface-2);
  text-decoration:none;
}
.mobile-drawer .md-link.on{
  background:var(--surface-2);
  color:var(--ink);
}
.mobile-drawer .md-cta{
  margin:12px 0 8px;
  display:flex;align-items:center;justify-content:center;
  padding:14px 22px;
  background:var(--mint);color:#fff;
  border:none;border-radius:var(--radius-pill);
  font-family:inherit;font-size:16px;font-weight:700;
  cursor:pointer;text-decoration:none;
  width:100%;
  transition:background var(--t-fast) var(--ease);
}
.mobile-drawer .md-cta:hover{
  background:var(--mint-ink);
  color:#fff;text-decoration:none;
}
.mobile-drawer .md-lang{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px 4px;
  font-size:13px;color:var(--ink-muted);
}
.mobile-drawer .md-lang-pills{
  display:inline-flex;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:3px;margin-left:auto;
}
.mobile-drawer .md-lang-pills a{
  font-size:13px;font-weight:700;
  padding:5px 12px;border-radius:var(--radius-pill);
  color:var(--ink-muted);
}
.mobile-drawer .md-lang-pills a.on{
  background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow-xs);
}
.mobile-drawer .md-lang-pills a:hover{
  text-decoration:none;color:var(--ink);
}

/* Burger → X cross morph when drawer is open.
   SVG viewBox is 0 0 24 24; paths sit at y=6/12/18 horizontally.
   transform-box: view-box anchors transforms on the SVG centre (12,12). */
.menu-toggle svg path{
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition:
    transform var(--t-base) var(--ease),
    opacity   var(--t-base) var(--ease);
}
.menu-toggle[aria-expanded="true"] svg path:nth-child(1){ transform: translateY(6px)  rotate(45deg) }
.menu-toggle[aria-expanded="true"] svg path:nth-child(2){ opacity: 0 }
.menu-toggle[aria-expanded="true"] svg path:nth-child(3){ transform: translateY(-6px) rotate(-45deg) }
@media (prefers-reduced-motion: reduce){
  .menu-toggle svg path{ transition:none }
}

/* ============================================================
   Proof strip — used on landing & partner pages
   ============================================================ */
.proof-strip{
  padding:40px 0 16px;
}
.proof-strip .container{display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.proof-strip-label{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.proof-logos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:24px 56px;
}
.proof-logos a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 4px;border-radius:var(--radius-sm);
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.proof-logos a:hover{transform:translateY(-2px); background:var(--surface-2)}
.proof-logos img{
  height:64px;width:auto;max-width:200px;object-fit:contain;
  opacity:.95;
  transition:opacity var(--t-fast);
}
.proof-logos a:hover img{opacity:1}
/* Hide the explicit dark-variant when stadtplatz logo has one — we render
   light variant on white card in dark mode (uniform treatment for all). */
.proof-logos .pl-dark{display:none}

/* Dark-mode treatment for partner logos: render on a near-white card so
   logos with white backgrounds (Farmlyplace) and dark logos (IPB) both
   remain legible. Filter-based silhouette approach failed on filled-area
   logos — card approach is colour-faithful and works for any logo. */
:root[data-theme="dark"] .proof-logos a{
  background:rgba(255,255,255,0.96);
  padding:10px 16px;
}
:root[data-theme="dark"] .proof-logos a:hover{
  background:#ffffff;transform:translateY(-2px);
}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .proof-logos a{
    background:rgba(255,255,255,0.96);
    padding:10px 16px;
  }
  :root[data-theme="auto"] .proof-logos a:hover{
    background:#ffffff;transform:translateY(-2px);
  }
}

/* ============================================================
   Section header pattern — used on every content section
   ============================================================ */
.section-header{max-width:760px;margin-bottom:48px}
.section-header.center{margin-left:auto;margin-right:auto;text-align:center}

/* ============================================================
   Steps grid (How it works on landing, also reusable)
   ============================================================ */
.steps-grid{
  display:grid;grid-template-columns:repeat(3, 1fr); gap:20px;
}
.step{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:28px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.step-num{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Nunito',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--mint-ink);
}
.step-num .n{
  width:26px;height:26px;border-radius:50%;
  background:var(--mint-soft);color:var(--mint-ink);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Roca Two',serif;font-size:13px;font-weight:800;
}
.step h3{margin:0 0 6px}
.step p{margin:0;color:var(--ink-muted)}
.step-illus{
  height:140px;
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg, var(--mint-soft), transparent 60%), var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border-strong);
  margin-bottom:6px;
}
.step-illus svg{width:84px;height:84px;color:var(--mint)}

.step-num.amber{color:var(--amber-ink)}
.step-num.amber .n{background:var(--amber-soft);color:var(--amber-ink)}
.step-num.sky{color:var(--sky-ink)}
.step-num.sky .n{background:var(--sky-soft);color:var(--sky-ink)}

/* ============================================================
   Example card (real-example callout)
   ============================================================ */
.example-card{
  margin-top:32px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:22px 26px;
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  box-shadow:var(--shadow-sm);
}
.example-card .ex-icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--amber-soft); color:var(--amber-ink);
  display:flex;align-items:center;justify-content:center;
}
.example-card .ex-meta{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
.example-card .ex-title{font-family:'Roca Two',serif;font-weight:800;color:var(--ink);font-size:18px;line-height:1.35}
.example-card .ex-title strong{color:var(--mint-ink);font-weight:800}
:root[data-theme="dark"] .example-card .ex-title strong{color:var(--mint)}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .example-card .ex-title strong{color:var(--mint)}
}
.example-card .ex-cta{font-weight:700;font-size:14px;color:var(--mint-ink);white-space:nowrap}

/* How-it-works — privacy trust block. Sits below the 3 steps and the
   example card; makes the site's data-handling claims concrete and
   checkable instead of a generic "we care about privacy" line. */
.how-privacy{
  margin-top:32px;
  padding-top:32px;
  border-top:1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.how-privacy-header{margin-bottom:18px}
.how-privacy-header h3{
  margin:6px 0 0;
  font-size:clamp(20px, 2.1vw, 24px);
  line-height:1.25;
}
.how-privacy-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:760px;
}
.how-privacy-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.how-privacy-icon{
  flex-shrink:0;
  width:26px;height:26px;
  margin-top:1px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--mint-soft);
  color:var(--mint-ink);
}
.how-privacy-icon svg{width:14px;height:14px}
.how-privacy-item p{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-2);
}
.how-privacy-link{
  display:inline-block;
  margin-top:18px;
  font-size:14px;
  font-weight:700;
  color:var(--mint-ink);
}

/* ============================================================
   Partner setup steps (numbered cards)
   ============================================================ */
.partner-steps{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;list-style:none;padding:0}
.partner-step{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:flex-start;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:18px 22px;
}
.partner-step .num{
  width:36px;height:36px;border-radius:50%;
  background:var(--amber-soft);color:var(--amber-ink);
  display:flex;align-items:center;justify-content:center;
  font-family:'Roca Two',serif;font-weight:800;font-size:18px;
  flex-shrink:0;
}
.partner-step h3{margin:0 0 2px;color:var(--ink)}
.partner-step p{margin:0;color:var(--ink-muted);font-size:15px}

.partner-pricing{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:22px 26px;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  box-shadow:var(--shadow-xs);
}
.partner-pricing .price{font-family:'Roca Two',serif;font-weight:800;font-size:28px;color:var(--ink)}
.partner-pricing .price span{color:var(--amber-ink)}
.partner-pricing p{margin:0;font-size:14px;color:var(--ink-muted)}

/* ============================================================
   Lanes (three audiences) and city cards — reusable card patterns
   ============================================================ */
.lanes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.lane{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:32px 30px 30px;
  display:flex;flex-direction:column;gap:18px;
  position:relative;overflow:hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.lane:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.lane::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--mint);
}
.lane.partner::before{background:var(--amber)}
.lane.city::before{background:var(--sky)}
.lane h3{margin:0}
.lane p{margin:0;color:var(--ink-muted)}
.lane ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.lane ul li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.lane ul li svg{width:16px;height:16px;color:var(--mint);flex-shrink:0;margin-top:4px}
.lane.partner ul li svg{color:var(--amber)}
.lane.city ul li svg{color:var(--sky)}
.lane .lane-icon{
  width:56px;height:56px;border-radius:var(--radius-sm);
  background:var(--mint-soft);color:var(--mint-ink);
  display:flex;align-items:center;justify-content:center;
}
.lane.partner .lane-icon{background:var(--amber-soft);color:var(--amber-ink)}
.lane.city .lane-icon{background:var(--sky-soft);color:var(--sky-ink)}
.lane .lane-icon svg{width:28px;height:28px}
.lane .lane-cta{margin-top:auto;padding-top:8px}

/* ============================================================
   Filter pills (for badges, loops)
   ============================================================ */
.filters{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:36px;
}
.filter-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:600;
  background:var(--surface);
  border:1.5px solid var(--border);
  color:var(--ink-2);cursor:pointer;
  transition: all var(--t-fast) var(--ease);
}
.filter-pill:hover{border-color:var(--border-strong);color:var(--ink)}
.filter-pill.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filter-pill .count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  font-size:11px;font-weight:700;
  background:var(--surface-2);color:var(--ink-muted);
  border-radius:var(--radius-pill);
}
.filter-pill.on .count{background:color-mix(in srgb, var(--bg) 30%, transparent);color:var(--bg)}

/* ============================================================
   Loops — advanced filters (length, duration, partner, near-me)
   ============================================================ */
.loop-adv-filters{
  display:flex;flex-direction:column;gap:14px;
  margin-bottom:28px;padding:18px 20px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md, 14px);
}
.loop-adv-filters-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.loop-adv-filters-label{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-muted);min-width:64px;
}
.loop-adv-filters-chips{display:flex;flex-wrap:wrap;gap:8px}
.filter-pill.chip-sm{padding:6px 14px;font-size:13px}
.loop-adv-filters-toggles{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px;
  padding-top:12px;border-top:1px solid var(--border);
}
.loop-toggle{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;
}
.loop-toggle input{width:18px;height:18px;accent-color:var(--mint);cursor:pointer;flex-shrink:0}
.loop-toggle-hint{font-size:12px;font-weight:400;color:var(--ink-muted)}
.loop-toggle-denied{
  display:none;font-size:12px;color:var(--amber-ink, #92400e);
  width:100%;margin-top:-4px;
}
.loop-adv-filters-reset{
  margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-muted);
  background:none;border:none;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;
}
.loop-adv-filters-reset:hover{color:var(--ink)}
.loop-filters-empty{
  display:none;padding:40px 20px;text-align:center;
  color:var(--ink-muted);font-size:15px;
}

/* ============================================================
   Card grid (used for badges, loops, generic content cards)
   ============================================================ */
.grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
}

/* ============================================================
   Final CTA section
   ============================================================ */
.final{background:var(--surface-2);position:relative;overflow:hidden}
.final::before{
  content:"";position:absolute;inset:auto -10% -30% -10%;height:60%;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, var(--mint-soft) 0%, transparent 60%);
  filter: blur(30px);opacity:.7;pointer-events:none;
}
.final .container{position:relative;text-align:center}
.final h2{margin-bottom:14px}
.final .lead{max-width:620px;margin:0 auto 28px}
.final-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.final-tagline{margin-top:32px;font-size:14px;color:var(--ink-soft);letter-spacing:.05em}

/* ============================================================
   Footer
   ============================================================ */
footer.site{
  background:var(--bg);border-top:1px solid var(--border);
  padding: clamp(40px, 5vw, 64px) 0 24px;
}
.footer-grid{
  display:grid;grid-template-columns: 1.4fr repeat(3, 1fr); gap:36px;
}
.footer-brand p{color:var(--ink-muted);font-size:15px;max-width:280px}
.footer-col h3{
  font-family:'Roca Two',serif;font-size:14px;
  color:var(--ink);margin:0 0 12px;text-transform:uppercase;letter-spacing:.12em;
}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer-col a{font-size:15px;color:var(--ink-muted)}
.footer-col a:hover{color:var(--ink);text-decoration:none}
.footer-bottom{
  margin-top:32px;padding-top:20px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;
  font-size:13px;color:var(--ink-soft);
}

/* ============================================================
   Long-form prose (used on legal pages)
   ============================================================ */
.prose{
  max-width:760px;margin:0 auto;
  font-size:17px;line-height:1.7;color:var(--ink-2);
}
.prose h2{font-size:clamp(22px, 2.6vw, 32px);margin:2.4em 0 .6em}
.prose h2:first-of-type{margin-top:0}
.prose h3{font-size:clamp(18px, 2vw, 22px);margin:1.8em 0 .4em}
.prose p{margin:0 0 1em}
.prose ul, .prose ol{padding-left:1.4em;margin:0 0 1em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--mint-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong{color:var(--ink)}
.prose code{
  font-family:monospace;
  font-size:.92em;background:var(--surface-2);
  padding:2px 6px;border-radius:var(--radius-xs);
  border:1px solid var(--border);
}
.prose hr{margin:2.4em 0}

/* ============================================================
   Modal system — light-first, accessible
   Used for: beta signup, partner inquiry, funding talk, contact,
   badge preview, video.
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  background:rgba(15,20,16,.55);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  opacity:0;transition:opacity var(--t-base) var(--ease);
  padding: clamp(12px, 3vw, 32px);
}
.modal-overlay.active{display:flex;opacity:1}
.modal-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  width:100%;max-width:560px;max-height:90vh;
  overflow-y:auto;overscroll-behavior:contain;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px);
  position:relative;
  box-shadow:var(--shadow-lg);
  transform:translateY(16px) scale(.98);
  transition:transform var(--t-base) var(--ease);
}
.modal-overlay.active .modal-box{transform:translateY(0) scale(1)}
.modal-close{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;
  border:1px solid transparent;background:transparent;
  color:var(--ink-muted);font-size:22px;cursor:pointer;
  border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  transition: all var(--t-fast) var(--ease);
}
.modal-close:hover{background:var(--surface-2);color:var(--ink);border-color:var(--border)}
.modal-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint-ink);
  margin-bottom:14px;
}
.modal-badge svg{width:18px;height:18px}
.modal-badge.amber{color:var(--amber-ink)}
.modal-badge.sky{color:var(--sky-ink)}
.modal-h{
  font-family:'Roca Two',serif;font-weight:800;
  font-size:clamp(22px, 2.4vw, 28px);color:var(--ink);
  line-height:1.18;margin-bottom:8px;
}
.modal-sub{font-size:16px;color:var(--ink-muted);margin-bottom:24px;line-height:1.5}

/* Form fields */
.mf-form{display:flex;flex-direction:column;gap:14px}
.mf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:500px){.mf-row{grid-template-columns:1fr}}
.mf-group{display:flex;flex-direction:column;gap:6px}
.mf-label{
  font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted);
}
.mf-input,.mf-select,.mf-textarea{
  width:100%;
  background:var(--surface-2);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-family:inherit;font-size:16px;
  color:var(--ink);outline:none;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.mf-input:focus,.mf-select:focus,.mf-textarea:focus{
  border-color:var(--mint);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(46,140,79,.18);
}
.mf-input::placeholder,.mf-textarea::placeholder{color:var(--ink-soft)}
.mf-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6259' fill='none' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:36px;
}
.mf-textarea{resize:vertical;min-height:88px}
.mf-submit{
  width:100%;padding:14px 22px;
  border:none;border-radius:var(--radius-pill);
  background:var(--mint);color:#fff;
  font-family:inherit;font-size:16px;font-weight:700;
  letter-spacing:.02em;cursor:pointer;
  transition: all var(--t-fast) var(--ease);
  box-shadow:var(--shadow-sm);margin-top:6px;
}
.mf-submit:hover{background:var(--mint-ink);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.mf-submit:active{transform:translateY(0)}
.mf-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.mf-submit.amber{background:var(--amber);color:#1A140A}
.mf-submit.amber:hover{background:var(--amber-ink);color:#fff}
.mf-submit.sky{background:var(--sky);color:var(--btn-fg)}
.mf-submit.sky:hover{background:var(--sky-ink)}
.mf-privacy{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:8px;line-height:1.5}
.mf-privacy a{color:var(--ink-muted);text-decoration:underline;text-underline-offset:2px}

/* Success state */
.mf-success{display:none;text-align:center;padding:16px 0 4px}
.mf-success.show{display:block}
.mf-success-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--mint-soft);color:var(--mint-ink);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:32px;margin-bottom:16px;
}
.mf-success-h{font-family:'Roca Two',serif;font-weight:800;font-size:22px;color:var(--ink);margin-bottom:8px}
.mf-success-p{font-size:16px;color:var(--ink-muted);line-height:1.6}
.mf-success-p a{color:var(--mint-ink);text-decoration:underline}
.mf-success-cta{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:18px;padding:12px 20px;
  border-radius:var(--radius-pill);
  background:var(--mint);color:var(--btn-fg);
  font-weight:700;font-size:14.5px;
  text-decoration:none;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mf-success-cta:hover{background:var(--mint-ink);color:var(--btn-fg);text-decoration:none;transform:translateY(-1px)}
.mf-form.hidden{display:none}

/* Badge preview modal — bigger image, v1 floating animation, tag pill */
.modal-card--badge{max-width:620px}
.badge-preview{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.badge-preview-img{
  width:clamp(220px, 42vw, 420px);
  height:auto; max-height:50vh;
  object-fit:contain;
  filter:drop-shadow(0 16px 40px rgba(15,20,16,.18));
  animation: bp-float 3s ease-in-out infinite;
}
@keyframes bp-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@media (prefers-reduced-motion: reduce){ .badge-preview-img{animation:none} }
.badge-preview .badge-cat{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mint-ink);
}
.badge-preview .badge-cat.character{color:var(--amber-ink)}
.badge-preview .badge-cat.season{color:var(--sky-ink)}
.badge-preview h3{font-family:'Roca Two',serif;font-weight:800;font-size:clamp(22px, 2.6vw, 30px);color:var(--ink);margin:0;line-height:1.15}
.badge-preview .badge-cond{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:16px 20px;
  font-size:15px;color:var(--ink-2);line-height:1.6;
  max-width:520px;text-align:left;
}
.badge-preview .badge-cond strong{color:var(--ink)}
/* tag pill — visual condition / token at the bottom of the modal */
.badge-preview .bp-tag{
  display:inline-block;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mint-ink); background:var(--mint-soft);
  padding:6px 14px; border-radius:var(--radius-pill);
  margin-top:4px;
}
.modal-card--badge.amber .badge-preview .bp-tag{color:var(--amber-ink); background:var(--amber-soft)}
.modal-card--badge.season .badge-preview .bp-tag{color:var(--sky-ink);  background:var(--sky-soft)}

/* ============================================================
   Reveal (scroll-triggered fade-up)
   JS adds .in when element scrolls into view.
   CSS animation fallback ensures visibility even if JS fails
   (animation fires after 2s, overridden when .in is added).
   ============================================================ */
.reveal{
  opacity:0;transform:translateY(16px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  animation: revealFallback 700ms var(--ease) 2s forwards;
  will-change:opacity, transform;
}
.reveal.in{
  opacity:1;transform:translateY(0);
  animation:none;
}
@keyframes revealFallback{
  to{opacity:1;transform:translateY(0)}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px){
  .topbar .brand-logo{height:92px;margin-top:0;margin-bottom:-32px}
  .footer-brand .brand-logo{height:60px}
  .steps-grid,.lanes{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .nav{display:none}
  .menu-toggle{display:inline-flex}
}
@media (max-width: 600px){
  /* Brand stays visible — never shrinks below natural size */
  .topbar .brand{flex-shrink:0; min-width:0; max-width:60%}
  .topbar .brand-logo{height:54px;margin-top:0;margin-bottom:0; max-width:100%; object-fit:contain; object-position:left center}
  .topbar .brand:hover .brand-logo{transform:none}
  .topbar .brand::after{display:none}
  /* Compact header on phones: App-CTA + Lang-Switcher move into the drawer */
  .topbar .utilities{gap:4px}
  .topbar .utilities > .btn{display:none}
  .topbar .utilities .lang{display:none}
  .topbar-inner{gap:8px; padding:8px var(--pad-x)}
  .footer-brand .brand-logo{height:52px}
  .steps-grid,.lanes{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .example-card{grid-template-columns:auto 1fr}
  .example-card .ex-cta{grid-column:1 / -1;justify-self:start}
  h1{font-size:38px}
  .badge-preview-img{width:clamp(180px, 60vw, 320px)}
  .badge-preview .badge-cond{font-size:14px;padding:14px 16px}
  .modal-card--badge{padding:32px 24px}
}

/* ============================================================
   Landing-page section layouts (formerly inline in index.html)
   Moved here so Astro pages inherit the same grid rules.
   ============================================================ */
.how{background:var(--surface-2)}
.how-header{max-width:680px;margin-bottom:48px}
.how-steps{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}

/* ── Homepage interactive loop simulation (replaces the old 3-step grid) ── */
.sim{position:relative;margin-bottom:40px}
.sim-badge{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  padding:6px 14px;border-radius:var(--radius-pill);
  background:var(--ceramic-soft);color:var(--ink-2);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.sim-stage{
  display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start;
}

/* Phone mockup */
.sim-phone{
  position:relative;
  width:100%;aspect-ratio:280 / 560;max-width:280px;
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:34px;
  box-shadow:var(--shadow-md);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.sim-phone-bar{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px 8px;flex:0 0 auto;
}
.sim-phone-dot{width:8px;height:8px;border-radius:50%;background:var(--mint)}
.sim-phone-loopname{font-size:12px;font-weight:700;color:var(--ink-2)}
.sim-screen{
  position:relative;flex:1 1 auto;overflow:hidden;
  display:none;flex-direction:column;
}
.sim-screen.is-active{display:flex}

.sim-map-bg{
  position:relative;flex:1 1 auto;margin:0 12px;border-radius:14px;
  background-color:var(--surface-2);
  background-size:cover;background-position:center;
  border:1px solid var(--border);
  overflow:hidden;
  filter:grayscale(1) brightness(.8) saturate(.4);
  transition:filter var(--t-slow, .6s) var(--ease);
}
.sim-map-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,30,24,.05), rgba(20,30,24,.25));
  pointer-events:none;
}
.sim[data-step="1"] .sim-map-bg,.sim[data-step="2"] .sim-map-bg{filter:grayscale(.4) brightness(.95) saturate(.85)}
.sim[data-step="3"] .sim-map-bg,.sim[data-step="4"] .sim-map-bg,.sim[data-step="5"] .sim-map-bg{filter:none}
.sim-cta-row{display:flex;gap:8px;padding:10px 12px 14px}
.sim-cta{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 10px;border-radius:var(--radius-pill);
  font-size:11.5px;font-weight:700;
}
.sim-cta-start{background:var(--mint);color:var(--btn-fg,#0b3d24)}
.sim-cta-discard{background:var(--surface-2);color:var(--ink-muted);border:1px solid var(--border)}

.sim-challenge-card,.sim-redeem-card{
  margin:12px;padding:16px;flex:1 1 auto;
  background:var(--surface-2);border:1px solid var(--border);border-radius:14px;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;position:relative;
}
.sim-challenge-flag,.sim-redeem-icon{width:22px;height:22px;color:var(--amber-ink)}
.sim-challenge-flag svg,.sim-redeem-icon svg{width:100%;height:100%}
.sim-challenge-name,.sim-redeem-name{font-weight:800;font-size:14px;color:var(--ink)}
.sim-challenge-date,.sim-redeem-sub{font-size:12px;color:var(--ink-muted)}
.sim-challenge-check{
  display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:12px;font-weight:700;color:var(--mint-ink);
}
.sim-challenge-check svg{width:14px;height:14px}
.sim-badge-pop{
  position:absolute;top:14px;right:14px;width:26px;height:26px;color:var(--amber-ink);
  opacity:0;transform:scale(.6);transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.sim-badge-pop svg{width:100%;height:100%}
.sim[data-step="4"] .sim-badge-pop,.sim[data-step="5"] .sim-badge-pop{opacity:1;transform:scale(1)}
.sim-redeem-card .sim-cta{flex:none;margin-top:auto;width:100%}

.sim-tabbar{
  flex:0 0 auto;display:flex;justify-content:space-around;
  padding:8px 6px 12px;border-top:1px solid var(--border);
}
.sim-tab{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--ink-muted);
}
.sim-tab svg{width:18px;height:18px}
.sim-tab em{font-size:9px;font-style:normal;font-weight:700}
.sim-tab.is-active{color:var(--mint-ink)}

/* Right-hand control panel */
.sim-panel{display:flex;flex-direction:column;gap:18px}
.sim-status{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:10px;
}
.sim-stat{
  padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  display:flex;flex-direction:column;gap:4px;min-width:0;
}
.sim-stat-track{height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden;order:-1;margin-bottom:2px}
.sim-stat-fill{display:block;height:100%;width:0;background:var(--mint);transition:width var(--t-slow, .6s) var(--ease)}
.sim-stat-value{font-size:15px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-stat-label{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}

.sim-msg{
  margin:0;padding:12px 16px;border-radius:12px;
  background:var(--mint-soft);color:var(--mint-ink);font-weight:600;font-size:14.5px;
  min-height:20px;
}

.sim-controls{display:flex;flex-wrap:wrap;gap:10px}
.sim-controls .btn{font-size:14px;padding:10px 18px}
.sim-controls .btn:disabled{opacity:.45;cursor:not-allowed}
.sim-btn-play.is-playing{background:var(--amber);color:var(--amber-ink)}

.sim-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sim-tl-item{
  display:grid;grid-template-columns:28px 1fr;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border);
  opacity:.55;transition:opacity var(--t-base) var(--ease);
}
.sim-tl-item:last-child{border-bottom:none}
.sim-tl-item.is-active,.sim-tl-item.is-done{opacity:1}
.sim-tl-num{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;
  background:var(--surface-2);color:var(--ink-muted);border:1px solid var(--border);
  transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.sim-tl-item.is-active .sim-tl-num{background:var(--mint);color:var(--btn-fg,#0b3d24);border-color:var(--mint)}
.sim-tl-item.is-done .sim-tl-num{background:var(--mint-soft);color:var(--mint-ink);border-color:var(--mint-soft)}
.sim-tl-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:2px}
.sim-tl-item h4{margin:0 0 2px;font-size:15px}
.sim-tl-item p{margin:0;font-size:13.5px;color:var(--ink-muted)}

@media (prefers-reduced-motion: reduce){
  .sim-loop-path,.sim-loop-fill,.sim-stat-fill,.sim-badge-pop,.sim-tl-num{transition-duration:.01ms !important}
}

@media (max-width: 960px){
  .sim-stage{grid-template-columns:1fr}
  .sim-phone{margin:0 auto;max-width:240px}
  .sim-status{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 600px){
  .sim-controls{flex-direction:column}
  .sim-controls .btn{width:100%}
}

.lanes-header{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end;margin-bottom:40px}
.lanes-header p{margin:0;color:var(--ink-muted)}

.partner-section{background:var(--surface-2)}
.partner-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.partner-grid h2{margin-top:6px}
.partner-grid .lead{margin-bottom:24px}
.partner-illus{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow-md);
  position:relative;overflow:hidden;
}
.partner-illus svg{width:100%;height:auto}
.partner-illus .partner-loop-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber-ink);background:var(--amber-soft);
  padding:6px 12px;border-radius:var(--radius-pill);
  margin-bottom:14px;
}

.city-header{max-width:760px;margin-bottom:40px}
.city-cards{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;margin-bottom:36px}
.city-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:28px;display:flex;flex-direction:column;gap:14px;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.city-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.city-card .ic{
  width:48px;height:48px;border-radius:var(--radius-sm);
  background:var(--sky-soft);color:var(--sky-ink);
  display:flex;align-items:center;justify-content:center;
}
.city-card .ic svg{width:26px;height:26px}
.city-card h3{font-size:20px;margin:0}
.city-card p{margin:0;color:var(--ink-muted);font-size:15px}
.city-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  background:linear-gradient(120deg, var(--sky-soft), transparent 70%), var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-md);
  padding:24px 28px;
}
.city-cta p{margin:0;color:var(--ink-muted);max-width:520px}
.city-cta strong{color:var(--ink)}

@media (max-width: 960px){
  .how-steps,.city-cards{grid-template-columns:1fr 1fr}
  .partner-grid{grid-template-columns:1fr;gap:32px}
  .lanes-header{grid-template-columns:1fr;gap:18px}
}
@media (max-width: 600px){
  .how-steps,.city-cards{grid-template-columns:1fr}
}

/* ============================================================
   /badges page layouts (formerly inline in v2-badges-de.html)
   Moved here so Astro pages inherit the same rules.
   ============================================================ */
.page-hero{
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(40px, 5vw, 64px);
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:-10% -5% auto -5%;height:60%;
  background:
    radial-gradient(ellipse 60% 50% at 25% 30%, var(--mint-soft) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 75% 20%, var(--amber-soft) 0%, transparent 60%);
  filter: blur(20px);pointer-events:none;z-index:0;opacity:.85;
}
.page-hero .container{position:relative;z-index:1}
.page-hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.page-hero h1{margin:0 0 16px}
.page-hero h1 .accent{
  color:var(--mint);
  background:linear-gradient(120deg, var(--mint) 0%, var(--mint-ink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-hero .lead{max-width:560px;margin:0 0 16px}
.badge-types{display:flex;gap:8px;flex-wrap:wrap}
.badge-types .chip{font-size:12px}

.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.preview-cell{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:14px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:var(--shadow-xs);
}
.preview-cell img{width:48px;height:48px;object-fit:contain}
.preview-cell .pname{font-size:11px;font-weight:700;color:var(--ink-2);line-height:1.2}

.badge-grid-section{padding-top: clamp(32px, 4vw, 56px)}
.badge-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:24px 20px;
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.badge-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.badge-card img{
  width:120px;height:120px;object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(15,20,16,.08));
  transition: transform var(--t-base) var(--ease);
}
.badge-card:hover img{transform:scale(1.05)}
.badge-card h3{font-size:17px;margin:0;line-height:1.2}
.badge-card .badge-cat{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-ink)}
.badge-card .badge-cat.character{color:var(--amber-ink)}
.badge-card .badge-cat.season{color:var(--sky-ink)}
.badge-card p{margin:0;font-size:14px;color:var(--ink-muted);line-height:1.55}

.legend{
  background:var(--surface-2);border-radius:var(--radius-md);
  padding:24px 28px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:48px;
}
.legend-item{display:flex;flex-direction:column;gap:6px}
.legend-item h4{margin:0;font-size:16px}
.legend-item p{margin:0;font-size:14px;color:var(--ink-muted);line-height:1.55}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:8px}
.legend-dot.act{background:var(--mint)}
.legend-dot.cha{background:var(--amber)}
.legend-dot.sea{background:var(--sky)}

@media (max-width:960px){
  .page-hero-grid{grid-template-columns:1fr;gap:32px}
  .preview-grid{grid-template-columns:repeat(4,1fr)}
  .legend{grid-template-columns:1fr}
}
@media (max-width:600px){
  .preview-grid{grid-template-columns:repeat(3,1fr)}
}

/* Play Store icon inside .btn-primary CTAs (encircle_play_store_logo_512x512.webp) */
.btn .btn-play-icon{
  width:28px;height:28px;border-radius:6px;
  object-fit:cover;flex-shrink:0;
  margin-right:6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.btn.btn-primary{display:inline-flex;align-items:center;gap:0}

/* Partner-section Seoul illustration (replaces SVG, uses encirkl-illustration-seoul.webp) */
.partner-illus img{
  width:100%;height:auto;display:block;
  border-radius: calc(var(--radius-lg) - 4px);
}

/* Hero Play Store card (encircle_play_store_logo_512x512.webp as hero illustration) */
.hero-app-card{
  display:flex;flex-direction:column;gap:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow-md);
  text-decoration:none;color:var(--ink);
  max-width:420px;margin:0 auto;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.hero-app-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--mint);
}
.hero-app-card img{
  width:100%;height:auto;aspect-ratio:1/1;
  border-radius:var(--radius-md);
  object-fit:cover;
  display:block;
}
.hero-app-card-meta{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.hero-app-card-eyebrow{
  display:inline-flex;align-items:center;
  background:var(--mint);color:#fff;
  padding:4px 12px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.hero-app-card-text{font-weight:700;color:var(--ink);font-size:15px}

/* ============================================================
   Homepage hero layout (formerly inline in index.html)
   .hero-illus carries no framing — that's the .hero-app-card's job.
   ============================================================ */
.hero{
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);
  position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:-10% -5% auto -5%;height:70%;
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, var(--mint-soft) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 30%, var(--amber-soft) 0%, transparent 60%);
  filter: blur(20px);
  pointer-events:none;z-index:0;opacity:.85;
}
.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns: 1.05fr .95fr;gap:64px;align-items:center;
}
.hero h1 .accent{
  color:var(--mint);
  background: linear-gradient(120deg, var(--mint) 0%, var(--mint-ink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
}
.hero .lead{margin:18px 0 28px;max-width:560px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:14px;color:var(--ink-muted)}
.hero-proof strong{color:var(--ink);font-weight:700}
.hero-proof .sep{width:4px;height:4px;border-radius:50%;background:var(--border-strong)}

/* .hero-illus is now just a grid cell — the card inside provides framing */
.hero-illus{position:relative;display:flex;align-items:center;justify-content:center}

@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width: 600px){
  .hero h1{font-size:38px}
}

/* ============================================================
   /loops page layouts (formerly inline in v2-loops-de.html)
   .page-hero rules already in shared (from /badges) — just add
   loop-card family + featured + grid override.
   ============================================================ */
.loop-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:22px;
  display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.loop-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--mint);
}
.loop-card.community::before{background:var(--amber)}
.loop-card.season::before{background:var(--sky)}
.loop-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--border-strong);
}
.loop-card .loop-cat{
  font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mint-ink);
}
.loop-card.community .loop-cat{color:var(--amber-ink)}
.loop-card.season .loop-cat{color:var(--sky-ink)}
.loop-card h3{font-size:20px;margin:0;line-height:1.2}
.loop-card .loop-desc{
  margin:0;font-size:14px;color:var(--ink-muted);
  line-height:1.55;flex-grow:1;
}

.loop-stats{
  display:flex;flex-wrap:wrap;gap:8px;
  padding-top:10px;border-top:1px solid var(--border);
}
.loop-stat{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--ink-2);
  padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--surface-2);
}
.loop-stat svg{width:13px;height:13px;color:var(--ink-muted)}
.loop-stat.mint{background:var(--mint-soft);color:var(--mint-ink)}
.loop-stat.mint svg{color:var(--mint)}
.loop-stat.amber{background:var(--amber-soft);color:var(--amber-ink)}
.loop-stat.amber svg{color:var(--amber)}

/* ============================================================
   Trust-Band — narrow horizontal strip on homepage between hero
   and proof strip. Three axes: Community · Privacy · Platforms.
   ============================================================ */
.trust-band{
  padding:20px 0;
  background:color-mix(in srgb, var(--ceramic-soft) 55%, var(--surface));
  border-top:1px solid color-mix(in srgb, var(--ceramic) 28%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--ceramic) 28%, transparent);
}
.trust-band-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  align-items:start;
}
@media (max-width:720px){
  .trust-band-grid{grid-template-columns:1fr;gap:16px}
}
.trust-band-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.trust-band-icon{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid color-mix(in srgb, var(--ceramic) 42%, transparent);
  color:var(--ceramic-ink);
}
.trust-band-icon svg{width:20px;height:20px;display:block}
.trust-band-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.trust-band-headline{
  font-weight:800;
  font-size:14px;
  line-height:1.3;
  color:var(--ink);
  letter-spacing:-.005em;
}
.trust-band-sub{
  font-size:12.5px;
  line-height:1.45;
  color:var(--ink-muted);
}

/* ============================================================
   /get-started page — platform cards + support callout
   ============================================================ */
.platform-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
  gap:28px;
  margin:0 0 64px;
}
.platform-card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px 30px 30px;
  display:flex;
  flex-direction:column;
  gap:22px;
  box-shadow:var(--shadow-sm, 0 2px 6px rgba(15,20,16,.04));
}
.platform-card--live{
  background:linear-gradient(180deg, var(--mint-soft) 0%, var(--surface) 25%);
  border-color:var(--mint);
}
.platform-card--beta{
  background:linear-gradient(180deg, color-mix(in srgb, var(--amber-soft) 60%, transparent) 0%, var(--surface) 25%);
  border-color:var(--amber);
}
.platform-card-head{
  display:flex;flex-direction:column;gap:6px;
  padding-bottom:6px;
}
.platform-card-head h3{margin:8px 0 0;font-size:28px;line-height:1.15;letter-spacing:-.01em}
.platform-sub{font-size:14px;color:var(--ink-muted);font-weight:600}
.platform-badge{
  align-self:flex-start;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:var(--radius-pill);
}
.platform-badge--live{background:var(--mint);color:#fff}
.platform-badge--beta{background:var(--amber);color:var(--amber-ink)}
.platform-desc{
  margin:0;
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink);
}
.platform-flow{
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin:2px 0 4px;
  flex-wrap:wrap;
}
.platform-flow-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:76px;
}
.platform-flow-icon{
  width:34px;height:34px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--amber-soft);
  color:var(--amber-ink);
  border:1px solid color-mix(in srgb, var(--amber) 40%, transparent);
}
.platform-flow-icon svg{width:17px;height:17px;display:block}
.platform-flow-label{
  font-size:10.5px;
  line-height:1.25;
  text-align:center;
  color:var(--ink-muted);
  font-weight:700;
}
.platform-flow-arrow{
  color:var(--ink-muted);
  opacity:.55;
  flex-shrink:0;
  margin-top:8px;
}
.platform-flow-arrow svg{width:15px;height:15px;display:block}
.platform-req, .platform-steps{
  border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent);
  padding-top:18px;
}
.platform-req h4, .platform-steps h4{
  margin:0 0 12px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}
.platform-req ul, .platform-steps ol{
  margin:0;
  padding-left:22px;
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink);
}
.platform-req ul li, .platform-steps ol li{margin:6px 0}
.platform-note{
  margin:0;
  padding:14px 16px;
  background:color-mix(in srgb, var(--border) 20%, transparent);
  border-left:3px solid var(--amber);
  border-radius:6px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-muted);
}

/* Android card — hardware guidance callout. GPS/GNSS chipset quality
   varies far more across Android's device landscape than on iPhone,
   so this gives concrete pointers instead of a single spec line. */
.platform-hwnote{
  margin:0;
  padding:16px 18px;
  background:color-mix(in srgb, var(--mint-soft) 55%, transparent);
  border-left:3px solid var(--mint);
  border-radius:6px;
}
.platform-hwnote h4{
  margin:0 0 6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mint-ink);
}
.platform-hwnote p{
  margin:0 0 10px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-2);
}
.platform-hwnote ul{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.platform-hwnote li{
  font-size:13px;
  line-height:1.55;
  color:var(--ink-muted);
}

/* Native-badge CTA inside a platform card.
   Reuses .app-badge-img (defined earlier in this file) for size + theme swap. */
.platform-cta-badge{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  margin-top:auto;
  padding-top:8px;
  line-height:0;
  transition:transform 160ms var(--ease), opacity 160ms var(--ease);
}
.platform-cta-badge:hover, .platform-cta-badge:focus-visible{
  transform:translateY(-1px);
  opacity:.92;
}
.platform-cta-badge .app-badge-img{
  height:56px;
  width:auto;
  max-width:100%;
}

/* iPhone card — App Store badge (installs TestFlight first) paired with
   a plain-text "Zu TestFlight" link (opens the TestFlight join link
   directly, useful if TestFlight is already installed). */
.platform-cta-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  margin-top:auto;
  padding-top:8px;
}
.platform-cta-row .platform-cta-badge{
  margin-top:0;
  padding-top:0;
}
.platform-cta-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 16px;
  border-radius:var(--radius-pill);
  border:1.5px solid var(--amber);
  color:var(--amber-ink);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.platform-cta-link:hover, .platform-cta-link:focus-visible{
  background:var(--amber-soft);
  border-color:var(--amber-ink);
  text-decoration:none;
}
.platform-cta-link svg{width:16px;height:16px}
.platform-cta-hint{
  margin:12px 0 0;
  font-size:12.5px;
  line-height:1.55;
  color:var(--ink-muted);
}

/* Page-hero on /get-started — a bit more breathing room */
.page-hero{padding:56px 0 40px}
@media (min-width:960px){
  .page-hero{padding:80px 0 56px}
}

/* After-install narrative + support card */
.after-install{padding:40px 0 24px}
.support{padding:24px 0 72px}
.support-card{
  max-width:680px;
  background:linear-gradient(180deg, var(--mint-soft) 0%, var(--surface) 40%);
  border:1px solid var(--mint);
  border-radius:var(--radius-lg);
  padding:32px 30px;
  margin:0 auto 24px;
}
.support-card h2{margin:8px 0 14px}
.support-card p{margin:0 0 20px;font-size:15.5px;line-height:1.6;color:var(--ink-muted)}
.back-link{text-align:center;margin:20px 0 0;font-size:14px}
.back-link a{color:var(--ink-muted);text-decoration:none}
.back-link a:hover{color:var(--mint-ink);text-decoration:underline}

/* Featured loops — one or two portrait cards side by side.
   Each card is self-contained: image (portrait/mobile format) on top,
   body (cat, title, desc, tip, stats) below. Cards wrap gracefully. */
.featured-loops-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:20px;
  margin-bottom:32px;
}
.feature-loop{
  background:linear-gradient(180deg, var(--mint-soft) 0%, var(--surface) 40%);
  border:1.5px solid var(--mint);
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
}
.feature-loop-figure{
  margin:0;
  aspect-ratio:9/16;
  max-height:420px;
  background:var(--mint-soft);
  overflow:hidden;
  border-bottom:1px solid color-mix(in srgb, var(--mint) 30%, transparent);
}
.feature-loop-figure img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.feature-loop-body{
  padding:22px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.feature-loop-body h3{margin:0}
.feature-loop-body .loop-desc{margin:0;font-size:15px;line-height:1.55;color:var(--ink-muted)}
.feature-loop-body .loop-stats{margin-top:auto;padding-top:4px}

/* Editorial tip callout inside a featured card */
.feature-loop-tip{
  margin:0;
  padding:12px 14px;
  background:color-mix(in srgb, var(--mint-soft) 55%, transparent);
  border-left:3px solid var(--mint);
  border-radius:6px;
  font-size:14px;
  line-height:1.55;
  color:var(--ink);
}
.feature-loop-tip p{margin:0}
.feature-loop-tip-label{
  display:block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mint-ink, #2a6b3d);
  margin-bottom:6px;
}
.feature-loop .loop-cat{display:inline-flex;align-items:center;gap:6px}
.feature-loop .loop-cat::before{
  content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 4px var(--mint-soft);
}

.grid-cards.loops{grid-template-columns:repeat(auto-fill, minmax(290px, 1fr))}

/* Section header used on subpages */
.section-header{max-width:780px;margin:0 auto 36px;text-align:left}
.section-header h2{margin:0 0 8px}
.section-header .lead{margin:0;max-width:680px}

/* ============================================================
   /partner page layouts (formerly inline in v2-partner-de.html)
   .partner-illus* already in shared (homepage PartnerSection).
   .tier.popular::before content moved to i18n-driven markup.
   ============================================================ */
.partner-hero{
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);
  position:relative;overflow:hidden;
}
.partner-hero::before{
  content:"";position:absolute;inset:-10% -5% auto -5%;height:70%;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, var(--amber-soft) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 30%, var(--mint-soft) 0%, transparent 60%);
  filter: blur(20px);pointer-events:none;z-index:0;opacity:.85;
}
.partner-hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;
}
.partner-hero h1{line-height:1.08;padding-bottom:.04em}
.partner-hero h1 .accent{
  color:var(--amber-ink);
  background:linear-gradient(120deg, var(--amber) 0%, var(--amber-ink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
  line-height:1.18;padding-bottom:.06em;
}
.partner-hero .lead{margin:18px 0 28px;max-width:560px}
.partner-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.partner-hero-stats{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--ink-muted)}
.partner-hero-stats strong{color:var(--ink);font-weight:700}
.partner-hero-stats .sep{width:4px;height:4px;border-radius:50%;background:var(--border-strong)}

.benefits{background:var(--surface-2)}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.benefit{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:24px;
  display:flex;flex-direction:column;gap:10px;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.benefit:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.benefit .ic{
  width:44px;height:44px;border-radius:var(--radius-sm);
  background:var(--amber-soft);color:var(--amber-ink);
  display:flex;align-items:center;justify-content:center;
}
.benefit .ic svg{width:22px;height:22px}
.benefit h3{font-size:17px;margin:0}
.benefit p{margin:0;font-size:14px;color:var(--ink-muted);line-height:1.55}

.setup .step-num{color:var(--amber-ink)}
.setup .step-num .n{background:var(--amber-soft);color:var(--amber-ink)}
.setup .step-illus{background:linear-gradient(180deg, var(--amber-soft), transparent 60%), var(--surface-2)}
.setup .step-illus svg{color:var(--amber)}

.pricing{background:var(--surface-2)}
.pricing-header{max-width:680px;margin:0 auto 48px;text-align:center}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tier{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius-md);padding:32px 28px;
  display:flex;flex-direction:column;gap:16px;
  position:relative;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tier.popular{
  border-color:var(--amber);
  background: linear-gradient(180deg, var(--amber-soft) 0%, transparent 26%), var(--surface);
  box-shadow:var(--shadow-sm);
}
/* Note: popular tier badge text now in markup, styled here */
.tier-badge{
  position:absolute;top:-12px;left:24px;
  background:var(--amber);color:#1A140A;
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--radius-pill);
}
.tier h3{margin:0;font-size:22px}
.tier-price{display:flex;align-items:baseline;gap:6px}
.tier-price .amount{font-family:'Roca Two',serif;font-weight:800;font-size:40px;color:var(--ink);line-height:1}
.tier-price .per{font-family:'Nunito',sans-serif;font-weight:600;font-size:14px;color:var(--ink-muted)}
.tier .tier-blurb{margin:0;font-size:15px;color:var(--ink-muted);min-height:42px}
.tier ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.tier ul li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.tier ul li svg{width:16px;height:16px;color:var(--amber);flex-shrink:0;margin-top:4px}
.tier .tier-cta{margin-top:auto;padding-top:14px}

.case-study{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:36px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  box-shadow:var(--shadow-md);
}
.case-study .case-meta{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:6px}
.case-study h3{font-size:clamp(22px, 2.4vw, 30px);margin:0 0 14px}
.case-study blockquote{
  margin:0;font-family:'Roca Two',serif;font-style:italic;font-size:18px;
  color:var(--ink-2);line-height:1.5;
  border-left:3px solid var(--amber);padding-left:16px;
}
.case-study cite{display:block;margin-top:8px;font-size:13px;color:var(--ink-soft);font-style:normal}
.case-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.case-stat{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px}
.case-stat .num{font-family:'Roca Two',serif;font-weight:800;font-size:36px;color:var(--amber-ink);line-height:1}
.case-stat .lbl{font-size:13px;color:var(--ink-muted);margin-top:4px}

.faq{display:flex;flex-direction:column;gap:8px;max-width:760px;margin:0 auto}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:0 22px;transition: border-color var(--t-fast) var(--ease)}
.faq details[open]{border-color:var(--border-strong)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 0;
  display:flex;align-items:center;gap:12px;
  font-family:'Roca Two',serif;font-weight:800;font-size:17px;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:24px;font-weight:300;color:var(--ink-muted);transition: transform var(--t-fast) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-body{padding:0 0 18px;color:var(--ink-muted)}
.faq-body p:last-child{margin-bottom:0}

.platform{background:var(--surface-2)}
.platform-header{max-width:680px;margin-bottom:48px}
.platform-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:28px}
.plat-card .ic{
  width:48px;height:48px;border-radius:var(--radius-sm);
  background:var(--mint-soft);color:var(--mint-ink);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.plat-card .ic svg{width:24px;height:24px}
.plat-card h3{font-size:19px;margin:0 0 8px}
.plat-card p{margin:0;font-size:15px;color:var(--ink-muted);line-height:1.55}

@media (max-width:960px){
  .partner-hero-grid{grid-template-columns:1fr;gap:36px}
  .benefits-grid{grid-template-columns:1fr 1fr}
  .pricing-grid,.platform-cards{grid-template-columns:1fr}
  .case-study{grid-template-columns:1fr;gap:28px;padding:28px}
}
@media (max-width:600px){
  .benefits-grid{grid-template-columns:1fr}
  .case-stats{grid-template-columns:1fr}
}

/* ============================================================
   Legal document tables (datenschutz.html / privacy-en.html) —
   data-processing tables were plain unstyled <table> markup.
   Bordered, lightly shaded, smaller type than body copy, header
   row shaded + centered, cell content left/top-aligned.
   ============================================================ */
.data-table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0 28px;
  font-size:13.5px;
  line-height:1.55;
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
}
.data-table th,
.data-table td{
  padding:10px 14px;
  border:1px solid var(--border);
  text-align:left;
  vertical-align:top;
  color:var(--ink-2);
}
.data-table th{
  background:var(--surface-2);
  color:var(--ink);
  font-weight:800;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  vertical-align:middle;
}
.data-table tbody tr:nth-child(even) td{
  background:color-mix(in srgb, var(--surface-2) 45%, transparent);
}
@media (max-width:600px){
  .data-table{font-size:12.5px}
  .data-table th,.data-table td{padding:8px 10px}
}