/* Nestbalm — Phase-0 landing page · standalone stylesheet.
   Decoupled from the React SPA: no Tailwind runtime. Token values are
   copied verbatim from resources/brand/nestbalm/tokens/nestbalm.tokens.v2.css
   so the page stays 100% on-brand. Fonts are self-hosted (GDPR §13 — no
   third-party font fetch). Mobile-first: base styles target 375px, then
   scale up at >=768px. HARD RULE: honey is fill-only, NEVER on text. */

:root {
  /* meadow — brand / primary CTA */
  --nb-meadow-700:#0B6B47; --nb-meadow-600:#0F8A5A; --nb-meadow-500:#18A472;
  --nb-meadow-400:#34C28C; --nb-meadow-300:#76DFB4; --nb-meadow-100:#DFF7EC;
  /* coral — accent / energy CTA */
  --nb-coral-600:#E8542E; --nb-coral-500:#FF6B45; --nb-coral-300:#FF9D80; --nb-coral-100:#FFE3D8;
  /* honey — FILL ONLY, never text */
  --nb-honey-500:#FFC24D; --nb-honey-100:#FFF1D2;
  /* sky — Meet Vesper */
  --nb-sky-600:#2F73D8; --nb-sky-500:#4F93F2; --nb-sky-300:#8FBEF8; --nb-sky-100:#E3EEFF;
  /* ink — text (warm pine, never pure black) */
  --nb-ink-900:#13302A; --nb-ink-700:#2C4A41; --nb-ink-500:#5C7268; --nb-ink-300:#9DB0A8; --nb-ink-100:#E7ECE9;
  /* surfaces */
  --nb-cloud:#FCFBF8; --nb-cream:#FFF7ED; --nb-mint:#E8FBF1; --nb-skybg:#E9F2FF; --nb-white:#FFFFFF;
  /* shape + elevation */
  --nb-radius-md:12px; --nb-radius-lg:16px; --nb-radius-full:9999px;
  --nb-shadow-card:0 6px 24px rgba(19,48,42,.08);
  --nb-shadow-lift:0 14px 40px rgba(19,48,42,.12);
  --nb-shadow-coral:0 10px 28px rgba(255,107,69,.28);
  /* type */
  --nb-display:"Nunito",ui-rounded,"Segoe UI Rounded",system-ui,sans-serif;
  --nb-ui:"Inter",ui-sans-serif,system-ui,sans-serif;
}

/* ── self-hosted fonts ───────────────────────────────────────────────── */
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;
  src:url("/_landing/fonts/nunito-700.woff2") format("woff2");}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;
  src:url("/_landing/fonts/nunito-800.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/_landing/fonts/inter-400.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("/_landing/fonts/inter-500.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("/_landing/fonts/inter-600.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
  src:url("/_landing/fonts/inter-700.woff2") format("woff2");}

/* ── base ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--nb-ui);color:var(--nb-ink-900);
  background:var(--nb-cloud);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--nb-display);font-weight:800;line-height:1.15;margin:0 0 .4em;color:var(--nb-ink-900);}
h1{font-size:32px;letter-spacing:-.01em;}
h2{font-size:25px;}
h3{font-size:18px;font-weight:700;}
p{margin:0 0 1em;color:var(--nb-ink-700);}
a{color:var(--nb-meadow-700);text-decoration:none;}
img,svg{max-width:100%;display:block;}

.wrap{max-width:520px;margin:0 auto;padding:0 20px;}
section{padding:48px 0;}
.eyebrow{font-family:var(--nb-ui);font-weight:700;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--nb-coral-600);margin:0 0 12px;}

/* section backgrounds (per build-spec §3) */
.bg-mint{background:var(--nb-mint);}
.bg-cream{background:var(--nb-cream);}
.bg-sky{background:var(--nb-skybg);}
.bg-cloud{background:var(--nb-cloud);}
.bg-white{background:var(--nb-white);}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--nb-ui);font-weight:700;font-size:16px;line-height:1;
  padding:15px 26px;border-radius:var(--nb-radius-full);border:0;cursor:pointer;
  text-align:center;transition:transform .08s ease,box-shadow .15s ease,background .15s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--nb-coral-600);color:#fff;box-shadow:var(--nb-shadow-coral);}
.btn-primary:hover{background:var(--nb-coral-500);}
.btn-meadow{background:var(--nb-meadow-600);color:#fff;}
.btn-meadow:hover{background:var(--nb-meadow-500);}
.btn-block{display:flex;width:100%;}
.linkbtn{background:none;border:0;color:var(--nb-meadow-700);font-family:var(--nb-ui);
  font-weight:600;font-size:15px;cursor:pointer;padding:8px 4px;text-decoration:underline;}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:10;background:rgba(252,251,248,.9);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--nb-ink-100);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;}
.brand{display:flex;align-items:center;gap:2px;font-family:var(--nb-display);font-weight:800;
  font-size:21px;color:var(--nb-ink-900);}
.brand .dot{color:var(--nb-coral-500);}
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-link{font-weight:600;font-size:14px;color:var(--nb-meadow-700);}
.nav-login{font-weight:600;font-size:13px;color:var(--nb-ink-500);}
.lang-toggle{display:flex;gap:2px;border:1px solid var(--nb-ink-100);border-radius:var(--nb-radius-full);overflow:hidden;}
.lang-toggle button{background:none;border:0;font-family:var(--nb-ui);font-weight:700;font-size:12px;
  padding:5px 9px;color:var(--nb-ink-500);cursor:pointer;}
.lang-toggle button[aria-pressed="true"]{background:var(--nb-meadow-500);color:#fff;}

/* ── hero ────────────────────────────────────────────────────────────── */
.pill{display:inline-block;background:var(--nb-white);border:1px solid var(--nb-meadow-100);
  color:var(--nb-meadow-700);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 14px;border-radius:var(--nb-radius-full);margin-bottom:18px;box-shadow:var(--nb-shadow-card);}
.hero h1{font-size:34px;margin-bottom:.35em;}
.hero .sub{font-size:18px;color:var(--nb-ink-700);max-width:34ch;}
.hero-shot{margin:26px auto 18px;max-width:300px;border-radius:24px;box-shadow:var(--nb-shadow-lift);overflow:hidden;background:var(--nb-white);}
.reward-line{font-weight:700;color:var(--nb-meadow-700);margin:14px 0 6px;}
.microtrust{font-size:13px;color:var(--nb-ink-500);margin:0;}

/* ── checks list ─────────────────────────────────────────────────────── */
.checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px;}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--nb-ink-700);}
.checks .tick{flex:0 0 22px;width:22px;height:22px;border-radius:var(--nb-radius-full);
  background:var(--nb-meadow-100);color:var(--nb-meadow-700);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;margin-top:1px;}

/* ── cards ───────────────────────────────────────────────────────────── */
.card{background:var(--nb-white);border-radius:var(--nb-radius-lg);box-shadow:var(--nb-shadow-card);padding:22px;}
.vesper{display:flex;gap:14px;align-items:center;margin-bottom:14px;}
.vesper .avatar{flex:0 0 52px;width:52px;height:52px;border-radius:var(--nb-radius-full);
  background:linear-gradient(135deg,#4F93F2,#8FBEF8);color:#fff;font-family:var(--nb-display);
  font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center;}
.vesper .name{font-family:var(--nb-display);font-weight:800;font-size:18px;}
.vesper .role{font-size:13px;color:var(--nb-ink-500);}
.quote{font-family:var(--nb-display);font-weight:700;font-size:20px;color:var(--nb-ink-900);margin:6px 0 8px;}

/* ── form ────────────────────────────────────────────────────────────── */
.form-card{background:var(--nb-white);border-radius:var(--nb-radius-lg);box-shadow:var(--nb-shadow-lift);padding:24px;margin-top:20px;}
.form-card input[type=email]{width:100%;font-family:var(--nb-ui);font-size:16px;color:var(--nb-ink-900);
  padding:14px 16px;border:1.5px solid var(--nb-ink-100);border-radius:var(--nb-radius-md);background:var(--nb-cloud);margin-bottom:12px;}
.form-card input[type=email]:focus{outline:none;border-color:var(--nb-meadow-500);background:#fff;}
.skip-context{font-size:13px;color:var(--nb-ink-500);margin:12px 0 0;}
.conditions{font-size:12px;color:var(--nb-ink-500);margin:14px 0 0;text-align:center;}
.form-error{display:none;background:var(--nb-coral-100);color:var(--nb-coral-600);font-size:14px;font-weight:600;
  padding:10px 14px;border-radius:var(--nb-radius-md);margin-bottom:12px;}
.form-error.show{display:block;}

/* ── survey ──────────────────────────────────────────────────────────── */
.survey-intro{text-align:center;margin-bottom:24px;}
.survey-intro h1{font-size:28px;}
.q{border:0;padding:0;margin:0 0 30px;min-width:0;}
.q legend,.q-legend{display:block;width:100%;font-family:var(--nb-display);font-weight:800;font-size:18px;
  line-height:1.3;color:var(--nb-ink-900);margin:0 0 12px;padding:0;}
.q .req{color:var(--nb-coral-600);font-weight:800;}
.q .optional{font-family:var(--nb-ui);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--nb-ink-500);margin-left:6px;}
.opts{display:grid;gap:10px;}
.opt{display:flex;align-items:center;gap:12px;min-height:48px;padding:12px 16px;cursor:pointer;
  border:1.5px solid var(--nb-ink-100);border-radius:var(--nb-radius-md);background:var(--nb-white);
  font-size:15px;color:var(--nb-ink-700);transition:border-color .12s ease,background .12s ease;}
.opt:hover{border-color:var(--nb-meadow-300);}
.opt input{flex:0 0 20px;width:20px;height:20px;margin:0;accent-color:var(--nb-meadow-600);}
.opt:has(input:checked){border-color:var(--nb-meadow-500);background:var(--nb-meadow-100);color:var(--nb-ink-900);}
.q input[type=email],.q input[type=text],.q textarea{width:100%;font-family:var(--nb-ui);font-size:16px;
  color:var(--nb-ink-900);padding:14px 16px;border:1.5px solid var(--nb-ink-100);border-radius:var(--nb-radius-md);
  background:var(--nb-cloud);}
.q input[type=email]:focus,.q input[type=text]:focus,.q textarea:focus{outline:none;border-color:var(--nb-meadow-500);background:#fff;}
.q textarea{min-height:92px;resize:vertical;}
.pledge{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:14px;color:var(--nb-ink-700);cursor:pointer;}
.pledge input{flex:0 0 18px;width:18px;height:18px;margin-top:2px;accent-color:var(--nb-meadow-600);}
.fineprint{font-size:12px;color:var(--nb-ink-500);margin:10px 0 0;}
.survey-outro{font-weight:700;color:var(--nb-meadow-700);text-align:center;margin:6px 0 16px;}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--nb-ink-100);padding:16px 0;}
.faq summary{font-family:var(--nb-display);font-weight:700;font-size:16px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:12px;color:var(--nb-ink-900);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--nb-meadow-600);font-weight:800;}
.faq details[open] summary::after{content:"–";}
.faq p{margin:12px 0 0;font-size:15px;}

/* ── footer ──────────────────────────────────────────────────────────── */
.footer{background:var(--nb-ink-900);color:var(--nb-cloud);padding:40px 0 48px;}
.footer .brand{color:var(--nb-cloud);}
.footer p{color:#B7C7C0;font-size:14px;margin:.5em 0;}
.footer a{color:var(--nb-meadow-300);}
.footer .legal{font-size:12px;color:#7E938B;margin-top:18px;}

/* ── kids' click-discover band ───────────────────────────────────────── */
.kids-peek{padding:40px 0;}
.kids-peek .wrap{text-align:center;}
.kids-peek-card{display:flex;flex-direction:column;align-items:center;gap:6px;
  width:100%;max-width:420px;margin:0 auto;cursor:pointer;font-family:var(--nb-ui);
  background:var(--nb-white);border:1.5px solid var(--nb-sky-300);border-radius:var(--nb-radius-lg);
  box-shadow:var(--nb-shadow-card);padding:22px 24px;
  transition:transform .08s ease,box-shadow .15s ease;}
.kids-peek-card:hover{box-shadow:var(--nb-shadow-lift);}
.kids-peek-card:active{transform:translateY(1px);}
.kids-peek-card:focus-visible{outline:3px solid var(--nb-sky-500);outline-offset:3px;}
.kids-dots{display:inline-flex;gap:7px;margin-bottom:6px;}
.kids-dot{width:12px;height:12px;border-radius:var(--nb-radius-full);background:var(--nb-coral-500);
  transition:transform .25s ease;}
.kids-peek-card[aria-expanded="true"] .kids-dot:nth-child(1){transform:translateY(-4px) scale(1.15);}
.kids-peek-card[aria-expanded="true"] .kids-dot:nth-child(2){transform:translateY(-7px) scale(1.2);}
.kids-peek-card[aria-expanded="true"] .kids-dot:nth-child(3){transform:translateY(-4px) scale(1.15);}
.kids-peek-label{font-family:var(--nb-display);font-weight:800;font-size:18px;color:var(--nb-ink-900);}
.kids-peek-hint{font-size:13px;font-weight:600;color:var(--nb-coral-600);transition:opacity .2s ease;}
.kids-peek-card[aria-expanded="true"] .kids-peek-hint{opacity:.45;}
.kids-peek-reveal{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .25s ease-out,opacity .25s ease-out;}
.kids-peek-card[aria-expanded="true"] ~ .kids-peek-reveal{max-height:280px;opacity:1;}
.kids-peek-reveal p{max-width:420px;margin:16px auto 0;font-size:15px;color:var(--nb-ink-700);}
/* full-viewport confetti overlay — delight on tap, never intercepts input */
.nb-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999;}
@media (prefers-reduced-motion:reduce){
  .kids-dot,.kids-peek-hint,.kids-peek-reveal,.kids-peek-card{transition:none;}
}

/* ── scroll-reveal (sections fade/rise into view) + card hover-lift ───── */
.reveal-enabled .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s ease;}
.reveal-enabled .reveal.reveal-in{opacity:1;transform:none;}
.card{transition:transform .15s ease,box-shadow .15s ease;}
.card:hover{transform:translateY(-2px);box-shadow:var(--nb-shadow-lift);}
@media (prefers-reduced-motion:reduce){
  .reveal-enabled .reveal{opacity:1;transform:none;transition:none;}
  .card{transition:none;}
}

/* ── thanks page ─────────────────────────────────────────────────────── */
.thanks{min-height:80vh;display:flex;align-items:center;}
.thanks .card{max-width:460px;margin:40px auto;text-align:center;}
.thanks .badge{width:64px;height:64px;border-radius:var(--nb-radius-full);margin:0 auto 16px;
  background:var(--nb-meadow-100);color:var(--nb-meadow-700);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;}

/* ── cookie consent banner ───────────────────────────────────────────── */
.consent-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;
  background:var(--nb-white);border:1px solid var(--nb-ink-100);border-radius:var(--nb-radius-lg);
  box-shadow:var(--nb-shadow-lift);padding:16px 18px;display:none;max-width:560px;margin:0 auto;}
.consent-banner.show{display:block;}
.consent-banner p{font-size:13px;color:var(--nb-ink-700);margin:0 0 12px;}
.consent-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.consent-actions .btn{padding:10px 20px;font-size:14px;}
@media (min-width:560px){.consent-banner{left:auto;right:24px;bottom:24px;}}

/* ── desktop scale-up ────────────────────────────────────────────────── */
@media (min-width:768px){
  body{font-size:18px;}
  .wrap{max-width:680px;}
  h1{font-size:44px;}
  .hero h1{font-size:50px;}
  h2{font-size:30px;}
  section{padding:72px 0;}
  .hero-shot{max-width:340px;}
  .checks{grid-template-columns:1fr 1fr;}
}