/* Moku waitlist — tokens + page styles, self-contained for dadbuilt.app CSP (style-src self) */

/* Moku — Color tokens
 * A muted Scandinavian paper-cut palette: oatmeal paper, sage forest greens,
 * honey + terracotta + bark accents, one dusty-blue secondary.
 * Saturation stays low everywhere — nothing glows. */

:root {
  /* ---- Paper neutrals (warm oatmeal cardstock) ---- */
  --paper-0: #faf4e6; /* lightest highlight */
  --paper-1: #f4ead8; /* primary app canvas */
  --paper-2: #f2ead9; /* default page background */
  --paper-3: #e8ddc5; /* recessed / sky surface */
  --paper-4: #d9cfb8; /* paper edge / divider */
  --cream-surface: #fff8ed; /* raised button + card face */
  --cream-surface-translucent: rgba(255, 248, 231, 0.88);

  /* ---- Forest greens ---- */
  --forest-900: #24362f; /* darkest ink-green */
  --forest-800: #263c33; /* default ink */
  --forest-700: #315145; /* strong green text */
  --forest-600: #345f50; /* PRIMARY brand green */
  --forest-500: #426c52; /* mid green */
  --sage-400: #7fa36e; /* leaf mid */
  --sage-300: #8fb783; /* leaf light */
  --olive-leaf: #8a8f61; /* drifting-leaf olive */

  /* ---- Text / ink ---- */
  --ink: #263c33;
  --ink-soft: #4f6257;
  --ink-mute: #607467;
  --ink-faint: #6f7d72;
  --ink-on-dark: #fff8ed;

  /* ---- Accents (all low-chroma) ---- */
  --honey-600: #d7a84d; /* gold — focus rings, sliders, highlight */
  --honey-500: #e0af4e;
  --honey-300: #f7d889; /* soft honey fill */
  --terracotta-600: #b66a50; /* warm accent line / camera frame */
  --bark-800: #6d4a36; /* darkest wood */
  --bark-700: #7f5a3f; /* wood brown */
  --clay-500: #8a685a; /* muted clay */
  --dust-blue: #a9c3cd; /* dusty blue (watering can) */
  --dust-blue-deep: #7f9fab;

  /* ---- Hairlines / borders ---- */
  --line-soft: rgba(58, 79, 64, 0.16);
  --line-faint: rgba(49, 81, 69, 0.1);
  --line-ink: rgba(38, 60, 51, 0.18);

  /* ---- Semantic aliases ---- */
  --bg-app: var(--paper-1);
  --bg-page: var(--paper-2);
  --bg-sky: var(--paper-3);
  --surface-raised: var(--cream-surface);
  --surface-card: var(--cream-surface);

  --text-heading: var(--forest-800);
  --text-body: var(--ink-soft);
  --text-muted: var(--ink-mute);
  --text-brand: var(--forest-600);

  --accent-primary: var(--forest-600);
  --accent-gold: var(--honey-600);
  --accent-warm: var(--terracotta-600);
  --accent-wood: var(--bark-700);

  --focus-ring: var(--honey-500);
  --border-default: var(--line-soft);
}


/* Moku — Typography tokens
 *
 * Two voices:
 *  - Rounded sans for ALL UI + child-facing surfaces (warm, soft, friendly).
 *    Native stack is SF Rounded (ui-rounded) → Avenir Next → Nunito Sans.
 *    Web fallback: Nunito (rounded terminals, closest Google match).
 *  - A quiet serif for parent-facing marketing headlines only (calm, editorial).
 *    Native stack is Georgia / Iowan Old Style.
 */

:root {
  /* ---- Families ---- */
  --font-rounded:
    ui-rounded, "SF Pro Rounded", "Avenir Next", "Nunito", "Nunito Sans",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:
    Georgia, "Iowan Old Style", "Times New Roman", serif;

  /* Semantic */
  --font-ui: var(--font-rounded);
  --font-display: var(--font-serif); /* marketing headlines */
  --font-body: var(--font-rounded);

  /* ---- Weights ---- (UI runs heavy: 800–900 is normal here) */
  --weight-regular: 500;
  --weight-medium: 700;
  --weight-bold: 800;
  --weight-black: 900;

  /* ---- Type scale ---- */
  --text-2xs: 0.62rem;
  --text-xs: 0.72rem;
  --text-sm: 0.86rem;
  --text-md: 1rem;
  --text-lg: 1.22rem;
  --text-xl: 1.46rem;
  --text-2xl: 2.05rem;
  --text-3xl: 3rem;
  --text-display: 5.6rem; /* parent marketing hero */

  /* ---- Line height ---- */
  --leading-tight: 0.94;
  --leading-snug: 1.22;
  --leading-body: 1.45;

  /* ---- Letter spacing ---- (Moku uses none — letter-spacing: 0 everywhere) */
  --tracking-flat: 0;
}


/* Moku — Spacing, radius, shadow & motion tokens */

:root {
  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;

  /* ---- Radii ---- (soft paper corners; pill controls) */
  --radius-pill: 999px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-card: 18px;
  --radius-lg: 38px; /* device screen / large panel */
  --radius-leaf: 100% 0 100% 0; /* the falling-leaf shape */

  /* ---- Shadows ---- (warm-brown, soft and low; never black) */
  --shadow-soft: 0 10px 28px rgba(71, 64, 44, 0.14);
  --shadow-raised: 0 12px 30px rgba(71, 64, 44, 0.14);
  --shadow-card: 0 24px 60px rgba(73, 69, 48, 0.18);
  --shadow-float: 0 42px 90px rgba(71, 64, 44, 0.28);
  /* paper cut-out lift — applied as a filter on transparent PNGs */
  --shadow-paper: drop-shadow(0 9px 9px rgba(71, 64, 44, 0.2));
  --shadow-paper-soft: drop-shadow(0 6px 7px rgba(71, 64, 44, 0.16));

  /* ---- Motion ---- (calm by design — slow, gentle, no bounce/pop) */
  --ease-calm: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-drift: ease-in-out;
  --dur-quick: 180ms;
  --dur-gentle: 320ms;
  --dur-breathe: 16s; /* ambient life loops run in tens of seconds */

  /* ---- Control sizing ---- (generous, preschool-thumb friendly) */
  --hit-min: 44px;
  --control-sm: 38px;
  --control-md: 46px;
  --control-lg: 58px;
}



  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; font-family: var(--font-ui); color: var(--forest-800); background: var(--paper-1); overflow-x: hidden; }
  ::selection { background: var(--honey-300); }

  /* ===================== HERO (living world) ===================== */
  .hero { position: relative; height: 100vh; min-height: 660px; overflow: hidden; background: var(--paper-3); }
  .layer { position: absolute; inset: 0; will-change: transform; }
  .scene { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; object-position: 50% 88%; }
  .wash { position: absolute; inset: 0; pointer-events: none; z-index: 6;
    background:
      linear-gradient(95deg, rgba(244,234,216,0.88) 0%, rgba(244,234,216,0.56) 28%, transparent 52%),
      radial-gradient(120% 90% at 0% 0%, rgba(244,234,216,0.72) 0%, transparent 50%),
      linear-gradient(180deg, rgba(244,234,216,0.55) 0%, transparent 16%); }
  .grain { position: absolute; inset: 0; pointer-events: none; z-index: 7; opacity: 0.4;
    background:
      repeating-linear-gradient(0deg, rgba(49,81,69,0.022) 0 1px, transparent 1px 7px),
      repeating-linear-gradient(90deg, rgba(95,74,53,0.016) 0 1px, transparent 1px 9px); }

  .cloud { position: absolute; filter: drop-shadow(0 8px 10px rgba(71,64,44,0.14)); opacity: 0.92; z-index: 2; }
  .cloud.a { width: 17%; top: 9%; animation: drift-r 88s linear infinite; }
  .cloud.b { width: 12%; top: 18%; animation: drift-l 120s linear infinite; }
  @keyframes drift-r { from { left: -22%; } to { left: 120%; } }
  @keyframes drift-l { from { left: 120%; } to { left: -22%; } }
  .bird { position: absolute; width: 34px; z-index: 4; opacity: 0.85; animation: bird-path 32s ease-in-out infinite; }
  @keyframes bird-path { 0% { left: -6%; top: 22%; transform: rotate(-4deg) scaleX(1); } 49% { top: 14%; } 50% { left: 104%; top: 17%; transform: rotate(3deg) scaleX(1); } 50.01% { transform: scaleX(-1); } 100% { left: -6%; top: 24%; transform: rotate(-3deg) scaleX(-1); } }
  .leaf { position: absolute; width: 11px; height: 19px; background: var(--olive-leaf); border-radius: 100% 0 100% 0; box-shadow: 0 5px 7px rgba(71,64,44,0.16); z-index: 5; opacity: 0; }
  .leaf.l1 { left: 34%; top: -3%; animation: fall 24s linear infinite; }
  .leaf.l2 { left: 66%; top: -5%; animation: fall 30s linear 8s infinite; }
  @keyframes fall { 0% { opacity: 0; transform: translateY(0) rotate(8deg); } 8% { opacity: 0.7; } 86% { opacity: 0.7; } 100% { opacity: 0; transform: translateY(72vh) translateX(40px) rotate(220deg); } }

  .walker { position: absolute; bottom: 3%; left: 12%; z-index: 9; width: 15%; min-width: 168px; will-change: left, transform; cursor: pointer; }
  .walker .body { display: block; width: 100%; filter: drop-shadow(0 11px 9px rgba(71,64,44,0.24)); transform-origin: bottom center; }
  .walker.hop .body { animation: hop 0.7s ease-out; }
  @keyframes hop { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-46px) rotate(-4deg) scaleY(1.05); } 70% { transform: translateY(0) rotate(2deg) scaleY(0.94); } 100% { transform: translateY(0) rotate(0) scaleY(1); } }
  .puff { position: absolute; width: 16px; height: 26px; background: var(--terracotta-600); border-radius: 100% 0 100% 0; pointer-events: none; z-index: 40; opacity: 0; animation: puff 1s ease-out forwards; }
  @keyframes puff { 0% { opacity: 0; transform: translateY(0) scale(0.5) rotate(0); } 20% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-66px) scale(1) rotate(40deg); } }

  .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 24px clamp(22px, 4vw, 56px); }
  .brand { display: flex; align-items: center; gap: 11px; }
  .brand img { width: 34px; height: 34px; filter: drop-shadow(0 3px 4px rgba(71,64,44,0.18)); }
  .brand span { font-size: 1.5rem; font-weight: 900; color: var(--forest-700); }
  .pill { appearance: none; border: 0; cursor: pointer; font-family: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px; font-weight: 900; line-height: 1; transition: background var(--dur-quick) ease; }
  .pill.solid { background: var(--forest-600); color: var(--ink-on-dark); height: 48px; padding: 0 22px; font-size: 0.98rem; box-shadow: var(--shadow-soft); }
  .pill.solid:hover { background: #2c5144; }

  .hero-copy { position: absolute; top: clamp(100px, 15vh, 168px); left: clamp(22px, 5vw, 72px); z-index: 18; max-width: 620px; }
  .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 900; color: var(--forest-600); background: rgba(255,248,231,0.74); padding: 8px 14px; border-radius: 999px; margin-bottom: 22px; }
  .eyebrow .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--terracotta-600); animation: pulse 2.6s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
  h1 { font-family: var(--font-serif); font-weight: 500; color: var(--forest-800); font-size: clamp(2.8rem, 5.6vw, 5.2rem); line-height: 0.95; letter-spacing: 0; margin: 0; max-width: 15ch; text-wrap: balance; }
  .lede { color: var(--ink-soft); font-size: clamp(1.08rem, 1.6vw, 1.34rem); font-weight: 700; line-height: 1.5; margin: 22px 0 0; max-width: 24ch; }

  .signup { display: flex; gap: 10px; margin-top: 30px; max-width: 480px; flex-wrap: wrap; }
  .signup input { flex: 1 1 220px; min-width: 0; height: 58px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--cream-surface); color: var(--forest-800); font: inherit; font-size: 1.05rem; font-weight: 800; box-shadow: var(--shadow-soft); }
  .signup input::placeholder { color: var(--ink-faint); font-weight: 800; }
  .signup input:focus-visible { outline: 3px solid var(--honey-500); outline-offset: 2px; }
  .signup button { height: 58px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 1.05rem; font-weight: 900; background: var(--forest-600); color: var(--ink-on-dark); box-shadow: var(--shadow-soft); transition: background var(--dur-quick) ease; }
  .signup button:hover { background: #2c5144; }
  .formnote { margin: 14px 2px 0; font-size: 0.86rem; font-weight: 800; color: var(--ink-mute); }
  .success { display: none; margin-top: 30px; max-width: 480px; background: var(--cream-surface); border: 1px solid var(--line-soft); border-left: 4px solid var(--forest-600); border-radius: 16px; padding: 18px 22px; box-shadow: var(--shadow-soft); }
  .success strong { display: block; color: var(--forest-800); font-size: 1.12rem; font-weight: 900; }
  .success span { display: block; color: var(--ink-soft); font-size: 0.95rem; font-weight: 800; margin-top: 4px; }
  .is-sent .signup, .is-sent .formnote { display: none; }
  .is-sent .success { display: block; }

  .scrollcue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 18; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--forest-700); font-size: 0.8rem; font-weight: 900; opacity: 0.84; text-decoration: none; }
  .scrollcue .arrow { width: 22px; height: 22px; animation: nudge 1.8s ease-in-out infinite; }
  @keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

  /* ===================== SECTION SHELL ===================== */
  section.band { padding: clamp(64px, 9vh, 116px) clamp(22px, 5vw, 80px); position: relative; }
  .head { max-width: 760px; margin: 0 auto; text-align: center; }
  .head .kicker { font-size: 0.92rem; font-weight: 900; color: var(--terracotta-600); letter-spacing: 0.04em; text-transform: uppercase; }
  .head h2 { font-family: var(--font-serif); font-weight: 500; color: var(--forest-800); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.02; margin: 14px 0 0; letter-spacing: 0; }
  .head p { color: var(--ink-soft); font-size: 1.12rem; font-weight: 700; line-height: 1.5; margin: 18px auto 0; max-width: 42ch; }

  /* ---- explore: alternating feature rows ---- */
  .explore { background: var(--paper-1); }
  .features { max-width: 1080px; margin: clamp(40px, 6vh, 70px) auto 0; display: grid; gap: clamp(40px, 6vh, 72px); }
  .feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
  .feature.flip .media { order: 2; }
  .feature .media { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--line-soft); aspect-ratio: 16 / 10; background: var(--paper-3); }
  .feature .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .feature .label { font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: var(--forest-600); }
  .feature h3 { font-family: var(--font-serif); font-weight: 500; color: var(--forest-800); font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.04; margin: 10px 0 0; }
  .feature p { color: var(--ink-soft); font-size: 1.08rem; font-weight: 700; line-height: 1.55; margin: 14px 0 0; max-width: 36ch; }

  /* ---- remembers band ---- */
  .remembers { background: linear-gradient(180deg,#e4ecdf,#dbe6d6); text-align: center; }
  .remembers .head h2 { max-width: 18ch; margin-left: auto; margin-right: auto; }

  /* ---- activities (secondary, "dig in") ---- */
  .activities { background: var(--paper-2); }
  .grid { max-width: 1120px; margin: clamp(38px, 6vh, 58px) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .card { background: var(--cream-surface); border: 1px solid var(--line-soft); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform var(--dur-gentle) var(--ease-calm), box-shadow var(--dur-gentle) var(--ease-calm); }
  .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
  .card .thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-3); }
  .card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .card .place { position: absolute; top: 12px; left: 12px; font-size: 0.64rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 11px; border-radius: 999px; backdrop-filter: blur(4px); }
  .card .place.house { background: rgba(215,168,77,0.92); color: #4a350f; }
  .card .place.tree { background: rgba(52,95,80,0.92); color: var(--ink-on-dark); }
  .card .body { padding: 16px 18px 20px; }
  .card .body h4 { margin: 0; font-size: 1.2rem; font-weight: 900; color: var(--forest-800); }
  .card .body p { margin: 6px 0 0; font-size: 0.94rem; font-weight: 800; line-height: 1.36; color: var(--ink-soft); }
  .activities .note { text-align: center; margin: 26px auto 0; max-width: 46ch; color: var(--ink-mute); font-size: 0.96rem; font-weight: 800; }

  /* reveal */
  .reveal { transition: opacity 0.7s var(--ease-calm), transform 0.7s var(--ease-calm); }
  html.js .reveal { opacity: 0; transform: translateY(22px); }
  html.js .reveal.in { opacity: 1; transform: none; }

  /* ---- close / footer ---- */
  .close { background: var(--forest-600); color: var(--ink-on-dark); text-align: center; }
  .close h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 4vw, 3.2rem); margin: 0; line-height: 1.02; }
  .close > p { color: #d7e4d0; font-size: 1.12rem; font-weight: 800; margin: 16px auto 0; max-width: 40ch; }
  .close .signup { justify-content: center; margin: 32px auto 0; }
  .close .signup input { background: rgba(255,252,242,0.96); border-color: transparent; }
  .close .signup button { background: var(--honey-600); color: #3a2a08; }
  .close .signup button:hover { background: #e8b958; }
  .close .formnote { color: #cfe0c9; }
  .close .success { background: rgba(255,252,242,0.96); border-left-color: var(--honey-600); margin-left: auto; margin-right: auto; }
  .promises { display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap; margin: 30px auto 0; }
  .promises span { font-size: 0.92rem; font-weight: 900; color: #d7e4d0; }
  .promises span::before { content: "·  "; color: rgba(215,228,208,0.6); }

  /* hero trust chips (light background variant) */
  .hero .promises.on-light { justify-content: flex-start; margin: 24px 0 0; max-width: 480px; }
  .hero .promises.on-light span { color: var(--forest-700); }
  .hero .promises.on-light span::before { color: rgba(47, 74, 63, 0.4); }

  /* ---- moments band ---- */
  .moments-band { background: var(--paper-3); }
  .moments { max-width: 1020px; margin: clamp(38px, 6vh, 58px) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .moment { background: var(--cream-surface); border: 1px solid var(--line-soft); border-radius: var(--radius-card); padding: 28px 28px 30px; box-shadow: var(--shadow-soft); }
  .moment h3 { font-family: var(--font-serif); font-weight: 500; color: var(--forest-800); font-size: 1.5rem; line-height: 1.1; margin: 0; }
  .moment p { color: var(--ink-soft); font-size: 1rem; font-weight: 800; line-height: 1.5; margin: 10px 0 0; }
  .moments-close { text-align: center; margin: 34px auto 0; max-width: 52ch; color: var(--forest-700); font-size: 1.06rem; font-weight: 900; }

  footer { background: var(--forest-700); color: #b9cdbf; text-align: center; padding: 26px; font-size: 0.86rem; font-weight: 800; }
  footer a { color: var(--ink-on-dark); font-weight: 900; text-decoration: none; }
  footer a:hover { text-decoration: underline; }
  footer .fbrand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-on-dark); font-weight: 900; }
  footer .fbrand img { width: 22px; height: 22px; }

  @media (prefers-reduced-motion: reduce) {
    .cloud, .bird, .leaf, .walker .body, .scrollcue .arrow, .eyebrow .dot { animation: none !important; }
    .leaf { display: none; }
  }
  @media (max-width: 860px) {
    .feature { grid-template-columns: 1fr; }
    .feature.flip .media { order: 0; }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .moments { grid-template-columns: 1fr; max-width: 520px; }
    .walker { width: 26%; }
  }
  @media (max-width: 560px) { .grid { grid-template-columns: 1fr; } .hero-copy { left: 20px; right: 20px; top: clamp(88px, 13vh, 140px); } .lede { max-width: none; } .signup { max-width: none; } .topbar { padding: 18px 18px; } }