/* ==========================================================================
   Paldo & Jonah — teaser landing page
   Palette locked to the official brand guide (_docs/paldo-jonah-brand-guide.md)
   ========================================================================== */

:root{
  --purple:      #5B3FD1;
  --purple-soft: #8B6DFF;
  --purple-deep: #4A2FB6;
  --coral:       #FF6B6B;
  --peach:       #FFA58F;
  --cream:       #FFF8F2;
  --navy:        #1E1B3A;

  --ink:        var(--navy);
  --ink-soft:   #4A4667;
  --card:       #FFFFFF;
  --tint-purple:#F1EDFF;
  --tint-coral: #FFEFEC;

  --radius-sm: 14px;
  --radius:    22px;
  --radius-lg: 34px;

  --shadow-sm: 0 4px 14px rgba(30,27,58,.06);
  --shadow:    0 10px 30px rgba(30,27,58,.08);
  --shadow-lg: 0 22px 50px rgba(30,27,58,.14);

  --font-display: "Baloo 2", "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-script:  "Lobster Two", "Brush Script MT", cursive;

  --shell: 1180px;
}

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

html{
  scroll-behavior:smooth;
  /* the hero blob bleeds past the shell on purpose — clip instead of hidden
     so position:sticky on the header keeps working */
  overflow-x:clip;
}

/* keep the sticky header from covering anchor targets */
#why,#families,#faq,#join,#top{ scroll-margin-top:92px; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:clamp(20px, 4vw, 58px);
}

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

.skip-link{
  position:absolute; left:-999px; top:8px; z-index:99;
  background:var(--purple); color:#fff; padding:10px 16px; border-radius:12px;
  text-decoration:none; font-weight:700;
}
.skip-link:focus{ left:16px; }

:focus-visible{
  outline:3px solid var(--purple-soft);
  outline-offset:3px;
  border-radius:6px;
}

/* ── Wordmark ─────────────────────────────────────────────────────────── */
.wordmark{
  font-family:var(--font-script);
  font-weight:700;
  font-style:italic;
  font-size:clamp(28px, 3.4vw, 40px);
  letter-spacing:-.005em;
  color:var(--purple);
  text-decoration:none;
  line-height:1.5;
  white-space:nowrap;
  /* sticker outline: em-based so it stays proportional at every size */
  paint-order:stroke fill;
  -webkit-text-stroke:.17em #fff;
  filter:drop-shadow(0 3px 2px rgba(30,27,58,.14));
}
.w-paldo{ color:var(--purple); }
.wordmark .amp{ color:var(--navy); font-size:.78em; }
.w-jonah{ color:var(--coral); }
.wordmark.small{ font-size:28px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; cursor:pointer; text-decoration:none;
  font-family:var(--font-display);
  font-weight:700; font-size:17px; letter-spacing:.1px;
  padding:15px 28px;
  border-radius:999px;
  white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-purple{
  background:linear-gradient(180deg,#6A4CE4,var(--purple));
  color:#fff;
  box-shadow:0 8px 20px rgba(91,63,209,.32);
}
.btn-coral{
  background:linear-gradient(180deg,#FF7C74,var(--coral));
  color:#fff;
  box-shadow:0 8px 20px rgba(255,107,107,.34);
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.btn:active{ transform:translateY(0); }
.btn-heart{ color:var(--coral); font-size:19px; }
.btn-purple .btn-heart{ color:#FF8E8E; }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,248,242,.86);
  backdrop-filter:blur(10px);
}
.header-inner{
  display:flex; align-items:center; gap:28px;
  padding-block:14px;
}
.site-nav{
  display:flex; gap:38px;
  margin-inline:auto;
  font-family:var(--font-display);
  font-weight:600; font-size:16px;
}
.site-nav a{
  text-decoration:none; color:var(--ink);
  padding:6px 2px; position:relative;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:3px;
  border-radius:3px; background:var(--coral); transition:right .2s ease;
}
.site-nav a:hover::after{ right:0; }

.header-cta{ padding:13px 26px; font-size:16px; }

.nav-toggle{
  display:none; margin-left:auto;
  width:46px; height:46px; border-radius:14px; border:none;
  background:var(--tint-purple); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ width:20px; height:2.5px; border-radius:2px; background:var(--purple); }

.mobile-nav{
  display:none; flex-direction:column; gap:6px;
  padding:8px 24px 20px;
  font-family:var(--font-display); font-weight:600;
}
.mobile-nav a{ text-decoration:none; padding:10px 4px; }
.mobile-nav .btn{ margin-top:8px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:24px; align-items:center;
  padding-block:26px 40px;
}

.hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(46px, 6.4vw, 86px);
  line-height:.98;
  letter-spacing:-1.5px;
  margin:0 0 22px;
  position:relative;
}
/* only the headline lines stack — not the decorative heart */
.line-navy,.line-purple{ display:block; }
.line-navy{ color:var(--navy); }
.line-purple{ color:var(--purple); }

.doodle-heart{
  position:absolute; left:-58px; top:6px;
  width:44px; height:auto;
}
.doodle-heart svg{ width:100%; fill:none; stroke:var(--coral); stroke-width:3.4; }

.lede{
  margin:0 0 26px;
  font-size:clamp(16px,1.35vw,18.5px);
  line-height:1.62;
  color:var(--ink-soft);
  max-width:56ch;
}
/* colour only the unclassed <b> — otherwise this outranks .c-purple/.c-coral
   on the words that are meant to be tinted */
.lede b{ font-weight:800; }
.lede b:not([class]){ color:var(--navy); }
.c-purple{ color:var(--purple); }
.c-coral{ color:var(--coral); }
.c-peach{ color:#FFD9CE; }

/* waitlist form */
.waitlist{
  display:flex; align-items:center;
  gap:0; flex-wrap:wrap;
  background:#fff;
  border:2.5px solid var(--purple);
  border-radius:999px;
  padding:6px 6px 6px 8px;
  max-width:540px;
  box-shadow:var(--shadow-sm);
  position:relative;
}
.waitlist .btn{ padding-inline:24px; font-size:16.5px; }
.field{
  display:flex; align-items:center; gap:10px;
  flex:1 1 150px; min-width:0;
  padding-left:12px;
}
.field .mail{
  width:23px; height:23px; flex:none;
  fill:none; stroke:var(--purple); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.waitlist input{
  flex:1; min-width:0;
  border:none; outline:none; background:transparent;
  font-family:var(--font-body); font-size:16.5px; color:var(--navy);
  padding:14px 6px;
}
.waitlist input::placeholder{ color:#9A96B4; }
.waitlist .btn{ flex:none; }
/* honeypot: off-screen rather than display:none, which some bots detect */
.gotcha{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; opacity:0; pointer-events:none;
}
.form-note{
  position:absolute; left:24px; top:calc(100% + 10px);
  margin:0; font-size:14.5px; font-weight:700; color:var(--coral);
}
.form-note.ok{ color:var(--purple); }
.waitlist.done{ border-color:var(--purple-soft); }

.tagline{
  margin:44px 0 0;
  font-family:var(--font-display);
  font-weight:700; font-size:clamp(19px,2vw,25px);
  line-height:1.35;
  color:var(--navy);
}
.tagline .heart{ color:var(--coral); font-size:1.15em; }
.tagline b{ font-weight:800; }

/* hero art */
.hero-art{
  /* the PNGs carry transparent padding at their inner edges — ~16% of the
     height on Paldo's right, ~9% on Jonah's left. The pull-in below cancels
     that dead space so the two actually stand together; it scales with
     --fig-h so the spacing holds at every viewport. */
  --fig-h:clamp(300px, 38vw, 470px);
  --fig-pull:calc(var(--fig-h) * -0.14);
  position:relative;
  min-height:440px;
  display:flex; align-items:flex-end; justify-content:center;
}
.hero-art .blob{
  position:absolute; inset:0 -6% 14% -4%;
  background:#EDE7FF;
  border-radius:52% 48% 44% 56% / 56% 52% 48% 44%;
  z-index:0;
}
.hero-art .fig{
  position:relative; z-index:1;
  height:var(--fig-h);
  width:auto;
  filter:drop-shadow(0 14px 22px rgba(30,27,58,.14));
}
.fig-paldo{ margin-right:var(--fig-pull); transform:rotate(-2deg); }
.fig-jonah{ margin-left:var(--fig-pull); transform:rotate(2deg); }

/* sparkles + dashes */
.hero-art .spark,
.hero-art .dash,
.hero-art .mini-heart{ position:absolute; z-index:2; }
.hero-art .spark{
  width:16px; height:16px;
  background:var(--purple);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
}
.s1{ left:12%; top:14%; }
.s2{ left:6%; top:30%; width:12px; height:12px; background:var(--purple-soft); }
.s3{ right:1%; top:60%; width:20px; height:20px; background:var(--purple-soft); }
.hero-art .dash{
  width:5px; height:26px; border-radius:4px; background:var(--purple-soft);
}
.d1{ left:6%; top:8%; transform:rotate(-28deg); }
.d2{ left:2%; top:15%; width:5px; height:20px; transform:rotate(-8deg); }
.d3{ right:16%; top:12%; background:var(--coral); transform:rotate(26deg); }
.hero-art .mini-heart{ color:var(--coral); font-size:30px; }
.mh1{ left:1%; top:46%; }
.mh2{ right:30%; top:2%; font-size:22px; color:var(--purple-soft); }

/* ── Duo cards ────────────────────────────────────────────────────────── */
.duo{
  display:grid;
  grid-template-columns:1.05fr .95fr 1.05fr;
  gap:16px;
  padding-block:14px 56px;
}
.duo-card{
  background:var(--card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:14px 22px;
  display:flex; align-items:center; gap:10px;
  min-height:180px;
  position:relative;
  overflow:hidden;
}
.duo-paldo{ background:linear-gradient(120deg,#F3EFFF,#FBF9FF); }
.duo-jonah{ background:linear-gradient(240deg,#FFF0EC,#FFFAF8); }
/* the character art is full-body; the cards need a bust crop so the faces
   stay readable at this size */
.duo-fig{
  flex:none;
  width:126px; height:150px;
  overflow:hidden;
  display:flex; justify-content:center; align-items:flex-start;
}
.duo-fig img{ width:auto; max-width:none; }
.duo-paldo .duo-fig img{ height:245px; margin-top:-6px; }
.duo-jonah .duo-fig img{ height:200px; margin-top:-4px; }
.duo-text{ flex:1; text-align:center; }
.duo-card h2.script{
  font-family:var(--font-script);
  font-size:clamp(30px,3.6vw,46px);
  margin:0 0 12px;
  font-weight:700;
  font-style:italic;
  line-height:1.25;
}
.twinkle{ font-size:.5em; color:var(--purple-soft); vertical-align:super; }
.twinkle.coral{ color:var(--peach); }
.chip{
  display:inline-block; margin:0;
  font-family:var(--font-display); font-weight:600; font-size:14.5px;
  color:#fff; padding:9px 14px; border-radius:14px;
  line-height:1.25;
}
.chip-purple{ background:var(--purple); }
.chip-coral{ background:var(--coral); }

.duo-center{
  justify-content:center; text-align:center;
  font-family:var(--font-display);
  font-weight:600; font-size:clamp(17px,1.6vw,20px);
  line-height:1.45;
  color:var(--navy);
}
.duo-center p{ margin:0; position:relative; }
.card-heart{
  position:absolute; right:-24px; bottom:-10px;
  color:var(--coral); font-size:26px;
}

/* ── More inside ──────────────────────────────────────────────────────── */
.more{ text-align:center; padding-block:10px 40px; }
.more h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(26px,3.6vw,44px);
  letter-spacing:-.6px;
  margin:0 0 8px;
  color:var(--navy);
  position:relative;
  display:inline-block;
}
.dash-left,.dash-right{
  position:absolute; top:50%; width:26px; height:4px; border-radius:4px;
  background:var(--purple-soft);
}
.dash-left{ left:-52px; transform:rotate(-30deg); box-shadow:0 14px 0 -1px var(--purple-soft); }
.dash-right{ right:-52px; transform:rotate(30deg); box-shadow:0 14px 0 -1px var(--purple-soft); }

.more-sub{
  margin:0 0 30px;
  font-family:var(--font-display);
  font-weight:600; font-size:clamp(17px,2vw,25px);
  color:var(--ink-soft);
}
.more-sub .wide{ letter-spacing:1px; font-weight:800; }

.features{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
}
.feature{
  display:flex; align-items:center; gap:12px;
  text-align:left;
  padding:16px 14px;
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow-sm);
  font-family:var(--font-display);
  font-weight:600; font-size:16px;
  line-height:1.18;
  color:var(--navy);
  transition:transform .18s ease, box-shadow .18s ease;
}
.feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.f-purple{ background:var(--tint-purple); }
.f-coral{ background:var(--tint-coral); }
.ico{ flex:none; width:38px; height:38px; display:grid; place-items:center; }
.ico svg{
  width:32px; height:32px;
  fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.f-purple .ico svg{ stroke:var(--purple); }
.f-coral  .ico svg{ stroke:var(--coral); }

/* ── CTA band ─────────────────────────────────────────────────────────── */
/* the CTA band carries four columns — it needs more room than the text shell */
.band{ padding-block:14px 56px; max-width:1330px; }
.band-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) minmax(0,.9fr) minmax(405px,1.4fr);
  align-items:center; gap:18px;
  padding:34px 36px;
  border-radius:var(--radius-lg);
  background:linear-gradient(100deg,var(--purple-deep) 0%,var(--purple) 34%,#9A4FC6 62%,var(--coral) 100%);
  color:#fff;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.band-inner::before,
.band-inner::after{
  content:""; position:absolute; border-radius:50%;
  background:rgba(255,255,255,.10);
}
.band-inner::before{ width:180px; height:180px; left:-40px; bottom:-70px; }
.band-inner::after{ width:120px; height:120px; right:12%; top:-60px; }

.band h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(23px,2.35vw,31px);
  line-height:1.12;
  margin:0;
  letter-spacing:-.4px;
}
.band-mid p{
  margin:0 0 10px;
  font-size:15.5px; line-height:1.5;
  color:rgba(255,255,255,.92);
}
.band-strong{ font-weight:800; }
/* the band crops their legs at its bottom edge, the way the mockup does */
.band-art{
  --band-fig-h:clamp(165px, 15.5vw, 212px);
  --band-fig-pull:calc(var(--band-fig-h) * -0.14);
  position:relative; z-index:1;
  display:flex; align-items:flex-end; justify-content:center;
  align-self:end;
  margin-bottom:-58px;
}
.band-art img{
  height:var(--band-fig-h); width:auto;
  filter:drop-shadow(0 10px 16px rgba(30,27,58,.22));
}
/* relative to the figure height, never a % — a percentage here resolves
   against the band width, which overshoots and swaps the two figures */
.band-art img:first-child{ margin-right:var(--band-fig-pull); transform:rotate(-3deg); }
.band-art img:last-child{ margin-left:var(--band-fig-pull); transform:rotate(3deg); }

.band-right{ position:relative; z-index:2; }
.band-right h2{ margin-bottom:16px; }
.waitlist-onband{
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.96);
  max-width:none;
}
.waitlist-onband input{ font-size:15px; }
.waitlist-onband .btn{ padding-inline:20px; font-size:15px; }
.waitlist-onband .form-note{ color:#fff; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq{ padding-block:10px 64px; }
.faq h2{
  font-family:var(--font-display);
  font-weight:800; font-size:clamp(26px,3vw,36px);
  text-align:center; margin:0 0 26px;
}
.faq-list{
  max-width:760px; margin-inline:auto;
  display:grid; gap:12px;
}
.faq details{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:4px 22px;
  transition:box-shadow .18s ease;
}
.faq details[open]{ box-shadow:var(--shadow); }
.faq summary{
  cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:700; font-size:17.5px;
  padding:18px 34px 18px 0;
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:26px; font-weight:700; color:var(--purple); line-height:1;
}
.faq details[open] summary::after{ content:"–"; color:var(--coral); }
.faq details p{
  margin:0 0 20px;
  color:var(--ink-soft); font-size:16px; line-height:1.6;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer{ padding-block:6px 34px; }
.footer-inner{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  border-top:1px solid rgba(30,27,58,.08);
  padding-top:20px;
}
.footer-nav{
  display:flex; align-items:center; gap:16px;
  margin-inline:auto;
  font-size:15.5px; color:var(--ink-soft);
}
.footer-nav a{ text-decoration:none; }
.footer-nav a:hover{ color:var(--purple); }
.footer-nav .sep{ color:rgba(30,27,58,.22); }
.copy{ margin:0; font-size:14.5px; color:var(--ink-soft); }
.foot-heart{ color:var(--purple); font-size:17px; }

/* ── Scroll reveal ────────────────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease;
}
.reveal.in{ opacity:1; transform:none; }

/* ── Responsive ───────────────────────────────────────────────────────── */

/* the band's four-column layout needs real width — restack it before the
   headline and the email field start getting squeezed */
@media (max-width:1200px){
  .band-inner{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "left  mid"
      "art   art"
      "right right";
    row-gap:26px;
  }
  .band-left{ grid-area:left; }
  .band-mid{ grid-area:mid; }
  /* art sits above the form here, so no negative offset */
  .band-art{ grid-area:art; margin-bottom:0; }
  .band-right{ grid-area:right; }
}

@media (max-width:1080px){
  .features{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:900px){
  .site-nav, .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-nav[data-open="true"]{ display:flex; }

  .hero{ grid-template-columns:1fr; text-align:center; padding-top:8px; }
  .hero-copy{ order:2; }
  .hero-art{ order:1; min-height:340px; }
  .doodle-heart{ display:none; }
  .lede{ margin-inline:auto; }
  .waitlist{ margin-inline:auto; }
  .tagline{ justify-content:center; margin-top:52px; }
  .form-note{ left:50%; transform:translateX(-50%); text-align:center; width:100%; }

  .duo{ grid-template-columns:1fr; }
  .duo-center{ order:3; }
  .dash-left,.dash-right{ display:none; }
}

@media (max-width:620px){
  body{ font-size:16px; }
  .features{ grid-template-columns:repeat(2,1fr); }
  .band-inner{
    grid-template-columns:1fr;
    grid-template-areas:"left" "mid" "art" "right";
    padding:28px 22px;
    text-align:center;
  }
  .waitlist{ border-radius:var(--radius); padding:10px; }
  .waitlist .btn{ width:100%; margin-top:6px; }
  .field{ width:100%; }
  .footer-inner{ justify-content:center; text-align:center; }
  .footer-nav{ order:3; width:100%; justify-content:center; }
  .duo-card img{ height:130px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}