/* ===== Bubble Bloomers - design tokens, typography, chrome =====
   Palette sampled directly from the design PDF so the site matches it
   rather than approximating it. */
:root{
  --pink:      #FF4A89;   /* headings, brand, primary CTA */
  --green:     #396C4F;   /* card and product titles, payment pills */
  --mint:      #BCEBD4;   /* header rule, wave divider */
  --cream:     #FFF3DC;   /* wave dividers, alternating sections */
  --sky:       #8ED4E8;   /* payment pill borders, logo ring */
  --gold:      #F4B93D;   /* dashed dividers, secondary CTA */
  --ink:       #6B584D;   /* body copy - a warm grey, not black */
  --ink-soft:  #8F8178;
  --line:      #EDE6DE;
  --white:     #FFFFFF;
  --radius:    28px;
  --radius-sm: 18px;
  --shadow:    0 18px 40px -18px rgba(107, 88, 77, .28);
  --shadow-lg: 0 26px 60px -22px rgba(107, 88, 77, .34);
  --wrap:      700px;     /* the design is a single centred column */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Quicksand',system-ui,sans-serif;
  font-weight:500;
  font-size:1.02rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:'Baloo 2',system-ui,sans-serif;margin:0;line-height:1.18;}
p{margin:0;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;}
.center{text-align:center;}
::selection{background:#FFD9E6;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}
[hidden]{display:none !important;}

/* --- Announcement bar --- */
.announce{
  padding:14px 22px;
  text-align:center;
  font-size:.86rem;
  font-weight:700;
  color:var(--ink);
  background:var(--white);
  line-height:1.5;
}

/* --- Header --- */
.site-header{
  background:var(--white);
  border-bottom:3px solid var(--mint);
  position:sticky;top:0;z-index:30;
}
.header-inner{
  display:flex;align-items:center;gap:14px;
  padding:14px 22px;
  max-width:var(--wrap);margin:0 auto;
}
.brandmark{display:flex;align-items:center;gap:12px;margin-right:auto;}
.brandmark img{width:56px;height:56px;border-radius:50%;}
.brand-name{
  font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:1.5rem;color:var(--pink);letter-spacing:.01em;
}
.nav-toggle{
  border:none;background:transparent;cursor:pointer;
  font-size:1.6rem;line-height:1;color:var(--ink);padding:4px 8px;
}
.nav-toggle:focus-visible{outline:3px solid var(--pink);outline-offset:2px;border-radius:8px;}
.site-nav{display:none;}
.site-nav.is-open{
  display:flex;flex-direction:column;gap:2px;
  padding:6px 22px 18px;
  max-width:var(--wrap);margin:0 auto;
}
.site-nav a{
  padding:11px 4px;font-weight:700;color:var(--green);
  border-bottom:1px solid var(--line);
}

/* --- Buttons --- */
.btn{
  display:inline-block;
  font-family:'Baloo 2',sans-serif;font-weight:700;
  font-size:1.05rem;
  padding:14px 34px;
  border-radius:999px;
  border:none;cursor:pointer;
  text-align:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:focus-visible{outline:3px solid var(--green);outline-offset:3px;}
.btn-pink{background:var(--pink);color:var(--white);box-shadow:0 6px 0 #D63E73;}
.btn-pink:hover{box-shadow:0 8px 0 #D63E73;}
.btn-gold{background:var(--gold);color:#5A4213;box-shadow:0 6px 0 #D89F27;}
.btn-gold:hover{box-shadow:0 8px 0 #D89F27;}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}

/* --- Wave dividers ---
   Drawn as inline SVG in the markup so the fill can follow the section it
   introduces; these only handle sizing. */
.wave{display:block;width:100%;height:auto;}
.wave-mint path{fill:var(--mint);}
.wave-cream path{fill:var(--cream);}

/* --- Section rhythm --- */
.section{padding:52px 0;}
.section-cream{background:var(--cream);}
.section-heading{
  font-size:1.6rem;color:var(--pink);
  margin-bottom:10px;
}
.section-heading.is-green{color:var(--green);}
.section-sub{color:var(--ink);max-width:34em;margin:0 auto;}

/* --- Footer --- */
.site-footer{
  padding:46px 22px 60px;
  text-align:center;
  color:var(--ink-soft);
  background:var(--white);
}
.site-footer img{width:64px;height:64px;border-radius:50%;margin:0 auto 14px;}
.footer-name{
  font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:1.35rem;color:var(--ink-soft);margin-bottom:6px;
}
.footer-line{font-size:.95rem;}
.footer-sign{margin-top:22px;font-size:1.05rem;color:var(--ink-soft);}