/* ============================================================
   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-face{
  font-family:'Roca Two';
  src:url('../fonts/RocaTwo-Rg.woff2') format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Nunito';
  src:url('../fonts/Nunito-Regular.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}

/* ============================================================
   Design tokens — light first
   ============================================================ */
:root{
  --mint: #2E8C4F;
  --mint-soft: #E6F2EA;
  --mint-ink: #1F5F36;
  --amber: #B88A1F;
  --amber-soft: #FBF1D8;
  --amber-ink: #7E5E14;
  --sky: #2E6FB8;
  --sky-soft: #E5EEF8;
  --sky-ink: #1F4D81;

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

  --ink: #0F1410;
  --ink-2: #2A312C;
  --ink-muted: #5A6259;
  --ink-soft: #7C857C;

  --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(46,140,79,.35);

  --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);

  --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: #6E7C70;
  --mint: #6BC57B;
  --mint-soft: rgba(107,197,123,.14);
  --mint-ink: #B7E6C0;
  --amber: #E0BD66;
  --amber-soft: rgba(224,189,102,.14);
  --amber-ink: #F1D89C;
  --sky: #7DB1EA;
  --sky-soft: rgba(125,177,234,.14);
  --sky-ink: #BAD5F2;
  --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(107,197,123,.35);
}

@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: #6E7C70;
    --mint: #6BC57B;
    --mint-soft: rgba(107,197,123,.14);
    --mint-ink: #B7E6C0;
    --amber: #E0BD66;
    --amber-soft: rgba(224,189,102,.14);
    --amber-ink: #F1D89C;
    --sky: #7DB1EA;
    --sky-soft: rgba(125,177,234,.14);
    --sky-ink: #BAD5F2;
    --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(107,197,123,.35);
  }
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,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','Nunito',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(--amber-soft), var(--mint-soft));
  border-bottom:1px solid 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(--ink);color:var(--bg);
  padding:2px 8px;border-radius:var(--radius-pill);font-size:11px;margin-right:8px;
}

/* ============================================================
   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:#fff;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-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:#fff;box-shadow:var(--shadow-sm)}
.btn-sky:hover{background:var(--sky-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}
@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}

/* ============================================================
   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}
:root[data-theme="dark"] .proof-logos img:not(.has-dark-variant){
  filter:brightness(0) invert(.95);
}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .proof-logos img:not(.has-dark-variant){
    filter:brightness(0) invert(.95);
  }
}
.proof-logos .pl-dark{display:none}
:root[data-theme="dark"] .proof-logos .pl-light{display:none}
:root[data-theme="dark"] .proof-logos .pl-dark{display:block}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .proof-logos .pl-light{display:none}
  :root[data-theme="auto"] .proof-logos .pl-dark{display:block}
}

/* ============================================================
   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}

/* ============================================================
   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 h4{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)}

/* ============================================================
   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 h5{
  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:ui-monospace, SFMono-Regular, Menlo, 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','Nunito',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-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-form.hidden{display:none}

/* Badge preview modal — same shell, different inner layout */
.badge-preview{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.badge-preview-img{
  width:160px;height:160px;object-fit:contain;
  filter:drop-shadow(0 12px 32px rgba(15,20,16,.12));
}
.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:24px;color:var(--ink);margin:0}
.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.55;
  width:100%;text-align:left;
}
.badge-preview .badge-cond strong{color:var(--ink)}

/* ============================================================
   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){
  .topbar .brand-logo{height:54px;margin-top:0;margin-bottom:0}
  .topbar .brand:hover .brand-logo{transform:none}
  .topbar .brand::after{display:none}
  .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}
  .topbar-inner{gap:8px}
  .brand{font-size:18px}
  .lang{padding:2px}
  .lang a{padding:5px 10px;font-size:12px}
  .proof-logos{gap:18px 32px}
  .proof-logos img{height:48px}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 1ms !important;
    animation-iteration-count:1 !important;
    transition-duration: 1ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   Print
   ============================================================ */
@media print{
  .topbar, .final-ctas, .hero-ctas, .mockup-banner{display:none}
  body{background:#fff;color:#000}
}