/* ---------- Scope + variables (prefixed, never touch :root) ---------- */
#bb-landing{
  --bb-green:#0d5a45; --bb-green-deep:#0a4636; --bb-green-soft:#e3eee9;
  --bb-pink:#e57c92; --bb-pink-mid:#f0a9b8; --bb-pink-light:#f8d5dd; --bb-blush:#fcecef;
  --bb-cream:#fffaf7; --bb-white:#ffffff; --bb-ink:#1f3a32; --bb-muted:#5d7069;
  --bb-line:rgba(13,90,69,.14); --bb-hairline:#e9e4e1;
  --bb-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --bb-sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --bb-hand:'Caveat', 'Comic Sans MS', cursive;
  --bb-shadow:0 24px 60px -24px rgba(13,90,69,.35);
  --bb-ease:cubic-bezier(.22,1,.36,1);
  /* break out of Elementor's boxed width so sections run edge to edge */
  position:relative; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  overflow-x:clip; background:var(--bb-cream); color:var(--bb-ink);
  font-family:var(--bb-sans); font-size:16px; font-weight:400; line-height:1.6; letter-spacing:normal;
  text-align:left; text-transform:none; -webkit-font-smoothing:antialiased;
}

/* ---------- Scoped reset: neutralise theme/Elementor kit styles ---------- */
#bb-landing *, #bb-landing *::before, #bb-landing *::after{box-sizing:border-box}
#bb-landing h1,#bb-landing h2,#bb-landing h3,#bb-landing h4,#bb-landing p,#bb-landing ul,#bb-landing li,
#bb-landing figure,#bb-landing details,#bb-landing summary,#bb-landing form,#bb-landing label{
  margin:0; padding:0; border:0; background:none; color:inherit; font-family:inherit; font-size:inherit;
  font-weight:inherit; line-height:inherit; letter-spacing:inherit; text-transform:none; text-shadow:none; list-style:none}
#bb-landing a{color:inherit; text-decoration:none; background:none; border:0; box-shadow:none; outline-offset:3px}
#bb-landing a:hover,#bb-landing a:focus{color:inherit}
#bb-landing button,#bb-landing input{
  -webkit-appearance:none; appearance:none; margin:0; padding:0; border:0; border-radius:0; background:none;
  box-shadow:none; color:inherit; font-family:inherit; font-size:inherit; font-weight:inherit; line-height:inherit;
  letter-spacing:normal; text-transform:none; text-decoration:none; text-shadow:none; min-height:0; height:auto;
  width:auto; max-width:100%; cursor:pointer; transition:none}
#bb-landing button:hover,#bb-landing button:focus{background:none; color:inherit; border:0}
#bb-landing input{cursor:text}
#bb-landing img{max-width:100%; height:auto; display:block; border:0; border-radius:0; box-shadow:none}
#bb-landing svg{display:inline-block; overflow:visible}
#bb-landing em{font-style:italic; color:var(--bb-pink)}
#bb-landing strong,#bb-landing b{font-weight:inherit}
#bb-landing .bb-sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
#bb-landing .bb-container{width:min(1180px, calc(100% - 32px)); margin-left:auto; margin-right:auto}

/* ---------- Announcement marquee ---------- */
#bb-landing .bb-announce{background:var(--bb-green); color:var(--bb-cream); font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; overflow:hidden; white-space:nowrap; padding:9px 0}
#bb-landing .bb-marquee{display:inline-flex; animation:bbMarquee 32s linear infinite}
#bb-landing .bb-marquee span{flex:none; white-space:nowrap; padding:0 22px; display:inline-flex; align-items:center; gap:22px}
#bb-landing .bb-marquee span::after{content:"✦"; color:var(--bb-pink-mid)}
@keyframes bbMarquee{to{transform:translateX(-50%)}}

/* ---------- Header ---------- */
#bb-landing .bb-header{position:sticky; top:0; z-index:50; background:rgba(255,250,247,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s}
body.admin-bar #bb-landing .bb-header{top:32px}
#bb-landing .bb-header.bb-scrolled{border-color:var(--bb-line); box-shadow:0 8px 30px -20px rgba(13,90,69,.4)}
#bb-landing .bb-header-inner{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:84px; transition:height .35s var(--bb-ease)}
#bb-landing .bb-header.bb-scrolled .bb-header-inner{height:66px}
#bb-landing .bb-nav{display:flex; gap:30px}
#bb-landing .bb-nav a{font-size:15px; font-weight:500; color:var(--bb-ink); position:relative; padding:4px 0}
#bb-landing .bb-nav a::after{content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:100%; background:var(--bb-pink); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--bb-ease)}
#bb-landing .bb-nav a:hover{color:var(--bb-green)}
#bb-landing .bb-nav a:hover::after{transform:scaleX(1); transform-origin:left}
#bb-landing .bb-brand{display:flex; align-items:center; gap:10px}
#bb-landing .bb-brand .bb-logo{width:38px; height:46px; transition:transform .5s var(--bb-ease)}
#bb-landing .bb-brand:hover .bb-logo{transform:rotate(-6deg) translateY(-2px)}
#bb-landing .bb-brand-name{font-family:var(--bb-serif); font-size:23px; color:var(--bb-green); letter-spacing:-.01em; line-height:1}
#bb-landing .bb-header-cta{justify-self:end; display:flex; align-items:center; gap:14px}

/* Buttons */
#bb-landing .bb-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:13px 24px; font-family:var(--bb-sans); font-weight:600; font-size:15px; line-height:1.2; letter-spacing:0; white-space:nowrap; transition:transform .3s var(--bb-ease), background-color .3s, color .3s, box-shadow .3s}
#bb-landing .bb-btn-green,#bb-landing .bb-btn-green:focus{background:var(--bb-green); color:var(--bb-cream)}
#bb-landing .bb-btn-green:hover{background:var(--bb-green-deep); color:var(--bb-cream); transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(13,90,69,.7)}
#bb-landing .bb-btn-pink,#bb-landing .bb-btn-pink:focus{background:var(--bb-pink); color:var(--bb-white)}
#bb-landing .bb-btn-pink:hover{background:#d96a81; color:var(--bb-white); transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(229,124,146,.9)}
#bb-landing .bb-btn[disabled]{opacity:.7; cursor:wait}

#bb-landing .bb-burger{display:none; width:42px; height:42px; border-radius:50%; align-items:center; justify-content:center}
#bb-landing .bb-burger span{display:block; width:20px; height:1.5px; background:var(--bb-green); position:relative; transition:.3s}
#bb-landing .bb-burger span::before,#bb-landing .bb-burger span::after{content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--bb-green); transition:.3s var(--bb-ease)}
#bb-landing .bb-burger span::before{top:-6px}
#bb-landing .bb-burger span::after{top:6px}
#bb-landing.bb-menu-open .bb-burger span{background:transparent}
#bb-landing.bb-menu-open .bb-burger span::before{top:0; transform:rotate(45deg)}
#bb-landing.bb-menu-open .bb-burger span::after{top:0; transform:rotate(-45deg)}
#bb-landing .bb-mobile-nav{position:fixed; inset:0; z-index:45; background:var(--bb-blush); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:26px; opacity:0; pointer-events:none; transition:opacity .4s var(--bb-ease)}
#bb-landing .bb-mobile-nav a{font-family:var(--bb-serif); font-size:32px; color:var(--bb-green); transform:translateY(16px); opacity:0; transition:.5s var(--bb-ease)}
#bb-landing.bb-menu-open .bb-mobile-nav{opacity:1; pointer-events:auto}
#bb-landing.bb-menu-open .bb-mobile-nav a{transform:none; opacity:1}

/* ---------- Hero ---------- */
#bb-landing .bb-hero{position:relative; overflow:hidden; background:
  radial-gradient(circle at 1px 1px, rgba(229,124,146,.18) 1px, transparent 0) 0 0/22px 22px,
  linear-gradient(180deg, var(--bb-blush), var(--bb-cream))}
#bb-landing .bb-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px; padding:72px 0 110px}
#bb-landing .bb-eyebrow{display:inline-flex; align-items:center; gap:10px; background:var(--bb-white); border:1px solid var(--bb-pink-light); color:var(--bb-green); border-radius:999px; padding:7px 16px 7px 12px; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; line-height:1.4}
#bb-landing .bb-pulse{width:9px; height:9px; border-radius:50%; background:var(--bb-pink); position:relative; flex:none}
#bb-landing .bb-pulse::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--bb-pink); animation:bbPulse 1.8s ease-out infinite}
@keyframes bbPulse{from{transform:scale(.5); opacity:1}to{transform:scale(1.6); opacity:0}}
#bb-landing .bb-h1{font-family:var(--bb-serif); font-weight:400; color:var(--bb-green); font-size:clamp(42px,6vw,80px); line-height:1.04; letter-spacing:-.025em; margin:22px 0}
#bb-landing .bb-h1 em{font-weight:300; position:relative; white-space:nowrap}
#bb-landing .bb-underline{position:absolute; left:0; bottom:-.08em; width:100%; height:.32em}
#bb-landing .bb-underline path{stroke:var(--bb-pink-mid); stroke-width:5; fill:none; stroke-linecap:round; stroke-dasharray:300; stroke-dashoffset:300; animation:bbDraw 1.2s 1s var(--bb-ease) forwards}
@keyframes bbDraw{to{stroke-dashoffset:0}}
#bb-landing .bb-lead{font-size:18px; color:var(--bb-muted); max-width:520px; line-height:1.65}
#bb-landing .bb-signup{display:flex; gap:8px; background:var(--bb-white); border:1.5px solid var(--bb-pink-light); border-radius:999px; padding:6px; max-width:500px; margin-top:30px; box-shadow:var(--bb-shadow); transition:border-color .3s}
#bb-landing .bb-signup:focus-within{border-color:var(--bb-pink)}
#bb-landing .bb-signup input{flex:1; min-width:0; background:transparent; padding:0 18px; font-size:16px; color:var(--bb-ink); outline:0}
#bb-landing .bb-signup input::placeholder{color:#9aa9a3; opacity:1}
#bb-landing .bb-fine{font-size:14px; color:var(--bb-muted); margin-top:14px; display:flex; align-items:center; gap:8px}
#bb-landing .bb-fine svg{flex:none}
#bb-landing .bb-success{display:none; align-items:center; gap:14px; background:var(--bb-white); border:1.5px solid var(--bb-green-soft); border-radius:20px; padding:16px 20px; max-width:500px; margin-top:30px; box-shadow:var(--bb-shadow); text-align:left; animation:bbPop .6s var(--bb-ease)}
#bb-landing .bb-success .bb-heart{width:42px; height:42px; border-radius:50%; background:var(--bb-blush); display:grid; place-items:center; color:var(--bb-pink); font-size:20px; flex:none}
#bb-landing .bb-success strong{font-family:var(--bb-serif); font-weight:500; color:var(--bb-green); font-size:18px; display:block; line-height:1.3}
#bb-landing .bb-success span{font-size:14px; color:var(--bb-muted)}
#bb-landing .bb-done .bb-signup,#bb-landing .bb-done .bb-fine,#bb-landing .bb-done form{display:none}
#bb-landing .bb-done .bb-success{display:flex}
@keyframes bbPop{from{transform:scale(.92); opacity:0}to{transform:none; opacity:1}}
#bb-landing .bb-chips{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
#bb-landing .bb-chip{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--bb-green); font-weight:500}
#bb-landing .bb-chip i{width:26px; height:26px; border-radius:50%; background:var(--bb-green-soft); display:grid; place-items:center; font-style:normal; font-size:12px}

/* Product illustration */
#bb-landing .bb-stage{position:relative; height:600px; display:grid; place-items:center}
#bb-landing .bb-blob{position:absolute; width:470px; height:470px; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--bb-white), var(--bb-pink-light) 70%); animation:bbBreathe 8s ease-in-out infinite}
@keyframes bbBreathe{50%{transform:scale(1.05)}}
#bb-landing .bb-product{position:relative; width:300px; height:520px; animation:bbFloat 6s ease-in-out infinite}
@keyframes bbFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(-1deg)}}
#bb-landing .bb-card{position:absolute; left:28px; right:28px; top:0; height:330px; background:var(--bb-white); border-radius:14px 14px 4px 4px; box-shadow:0 18px 40px -20px rgba(13,90,69,.45); padding:18px 16px; animation:bbSlideUp 1.4s .3s var(--bb-ease) both}
#bb-landing .bb-card::before{content:""; position:absolute; inset:6px; border:1px solid var(--bb-pink-light); border-radius:10px 10px 2px 2px; pointer-events:none}
@keyframes bbSlideUp{from{transform:translateY(150px)}to{transform:none}}
#bb-landing .bb-card-logo{display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:12px}
#bb-landing .bb-card-logo .bb-logo{width:24px; height:29px}
#bb-landing .bb-card-logo small{font-family:var(--bb-serif); color:var(--bb-pink); font-size:11.5px; line-height:1.2}
#bb-landing .bb-field{position:relative; font-family:var(--bb-serif); font-size:10.5px; color:var(--bb-ink); border-bottom:1px solid var(--bb-hairline); padding:5px 2px 3px; display:flex; gap:6px; align-items:baseline; line-height:1.3}
#bb-landing .bb-field b{font-weight:400; flex:none}
#bb-landing .bb-hw{font-family:var(--bb-hand); font-size:16px; color:var(--bb-green); line-height:1; white-space:nowrap; overflow:hidden; width:0; animation:bbWrite 1.1s steps(22) forwards}
@keyframes bbWrite{to{width:100%}}
#bb-landing .bb-field.bb-pinkf{color:var(--bb-pink)}
#bb-landing .bb-dates{display:grid; grid-template-columns:1fr 1fr; gap:8px}
#bb-landing .bb-dates .bb-field+.bb-field{border-left:1px solid var(--bb-pink-light); padding-left:8px}
#bb-landing .bb-blank{height:16px; border-bottom:1px solid var(--bb-hairline)}
#bb-landing .bb-book{position:absolute; left:0; right:0; bottom:0; height:300px; border-radius:6px 10px 10px 6px; background:repeating-linear-gradient(90deg, var(--bb-pink) 0 22px, var(--bb-pink-mid) 22px 44px); box-shadow:inset 6px 0 10px -6px rgba(0,0,0,.25), 0 30px 50px -24px rgba(13,90,69,.55); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--bb-green-deep)}
#bb-landing .bb-book::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(115deg, rgba(255,255,255,.28), transparent 40%)}
#bb-landing .bb-book-title{font-family:var(--bb-serif); font-weight:400; font-size:35px; line-height:1; color:var(--bb-green-deep)}
#bb-landing .bb-book-sub{font-family:var(--bb-serif); font-size:13px; letter-spacing:.14em; margin-top:6px; color:var(--bb-green-deep)}
#bb-landing .bb-book .bb-logo{position:absolute; bottom:26px; width:30px; height:36px}
#bb-landing .bb-sparkle{position:absolute; color:var(--bb-pink); animation:bbTwinkle 3s ease-in-out infinite}
#bb-landing .bb-sparkle.bb-g{color:var(--bb-green)}
@keyframes bbTwinkle{0%,100%{transform:scale(.6) rotate(0); opacity:.4}50%{transform:scale(1) rotate(20deg); opacity:1}}
#bb-landing .bb-tag{position:absolute; z-index:2; background:var(--bb-white); border-radius:14px; padding:10px 14px; box-shadow:var(--bb-shadow); font-size:13px; font-weight:500; color:var(--bb-green); display:flex; align-items:center; gap:10px; line-height:1.3; animation:bbBob 5s ease-in-out infinite}
#bb-landing .bb-tag i{font-style:normal; width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:var(--bb-blush)}
@keyframes bbBob{50%{transform:translateY(-10px)}}

/* Scallop dividers */
#bb-landing .bb-scallop{position:absolute; left:0; display:block; width:100%; height:28px; color:var(--bb-cream)}

/* ---------- Ribbon marquee ---------- */
#bb-landing .bb-ribbon{background:var(--bb-green); color:var(--bb-cream); overflow:hidden; white-space:nowrap; padding:22px 0; transform:rotate(-1.2deg) scaleX(1.02); margin-top:-14px; position:relative; z-index:2}
#bb-landing .bb-ribbon .bb-marquee{animation-duration:40s}
#bb-landing .bb-ribbon .bb-marquee span{font-family:var(--bb-serif); font-size:clamp(21px,2.6vw,32px); font-style:italic; font-weight:300; letter-spacing:0; text-transform:none; padding:0 28px; gap:28px}
#bb-landing .bb-ribbon .bb-marquee span::after{color:var(--bb-pink); font-style:normal}

/* ---------- Sections ---------- */
#bb-landing .bb-section{position:relative}
#bb-landing .bb-pad{padding:120px 0}
#bb-landing .bb-kicker{font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--bb-pink); display:inline-flex; align-items:center; gap:10px; line-height:1.4}
#bb-landing .bb-kicker::before{content:""; width:26px; height:1.5px; background:currentColor}
#bb-landing .bb-h2{font-family:var(--bb-serif); font-weight:400; color:var(--bb-green); font-size:clamp(34px,4.4vw,54px); line-height:1.1; letter-spacing:-.02em; margin:14px 0 18px}
#bb-landing .bb-h2 em{font-weight:300}
#bb-landing .bb-head{max-width:640px}
#bb-landing .bb-head.bb-center{text-align:center; margin-left:auto; margin-right:auto}
#bb-landing .bb-head.bb-center .bb-kicker::after{content:""; width:26px; height:1.5px; background:currentColor}

/* Feature explorer */
#bb-landing .bb-explore{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-top:60px}
#bb-landing .bb-feat-list{display:flex; flex-direction:column; gap:6px}
#bb-landing .bb-feat{display:grid; grid-template-columns:48px 1fr; gap:16px; align-items:start; text-align:left; padding:18px 20px; border-radius:18px; width:100%; transition:background-color .4s var(--bb-ease), box-shadow .4s}
#bb-landing .bb-feat:hover{background:rgba(255,255,255,.6)}
#bb-landing .bb-feat .bb-ico{width:48px; height:48px; border-radius:14px; background:var(--bb-blush); display:grid; place-items:center; color:var(--bb-pink); transition:.4s var(--bb-ease)}
#bb-landing .bb-feat-title{display:block; font-family:var(--bb-serif); font-weight:500; color:var(--bb-green); font-size:19px; line-height:1.35}
#bb-landing .bb-feat-text{display:block; font-size:15px; color:var(--bb-muted); line-height:1.55; max-height:0; overflow:hidden; opacity:0; transition:max-height .5s var(--bb-ease), opacity .4s, margin .4s}
#bb-landing .bb-feat.bb-active,#bb-landing .bb-feat.bb-active:hover{background:var(--bb-white); box-shadow:var(--bb-shadow)}
#bb-landing .bb-feat.bb-active .bb-ico{background:var(--bb-green); color:var(--bb-white); transform:rotate(-8deg)}
#bb-landing .bb-feat.bb-active .bb-feat-text{max-height:100px; opacity:1; margin-top:4px}
#bb-landing .bb-bar{grid-column:2; height:2px; background:var(--bb-pink-light); border-radius:2px; overflow:hidden; margin-top:10px; display:none}
#bb-landing .bb-feat.bb-active .bb-bar{display:block}
#bb-landing .bb-bar i{display:block; height:100%; width:0; background:var(--bb-pink)}
#bb-landing .bb-feat.bb-active.bb-auto .bb-bar i{animation:bbFill 4s linear forwards}
@keyframes bbFill{to{width:100%}}
#bb-landing .bb-bigwrap{position:relative; display:grid; place-items:center; padding:30px 0}
#bb-landing .bb-bigwrap::before{content:""; position:absolute; width:88%; aspect-ratio:1; border-radius:50%; background:var(--bb-blush)}
#bb-landing .bb-bigcard{position:relative; width:min(340px,100%); background:var(--bb-white); border-radius:18px; box-shadow:var(--bb-shadow); padding:28px 24px; transform:rotate(2deg)}
#bb-landing .bb-bigcard::before{content:""; position:absolute; inset:8px; border:1px solid var(--bb-pink-light); border-radius:12px; pointer-events:none}
#bb-landing .bb-bigcard .bb-card-logo .bb-logo{width:32px; height:39px}
#bb-landing .bb-bigcard .bb-card-logo small{font-size:14px}
#bb-landing .bb-bigcard .bb-field{font-size:13.5px; padding:8px 6px 6px}
#bb-landing .bb-bigcard .bb-hw{font-size:20px; width:auto; animation:none}
#bb-landing .bb-zone{border-radius:8px; transition:background-color .45s var(--bb-ease), box-shadow .45s}
#bb-landing .bb-zone.bb-lit{background:var(--bb-blush); box-shadow:0 0 0 2px var(--bb-pink-light)}
#bb-landing .bb-lined{margin-top:14px; background:repeating-linear-gradient(180deg, transparent 0 21px, var(--bb-hairline) 21px 22px); height:110px; border-radius:6px; padding:4px 6px; font-family:var(--bb-hand); color:var(--bb-green); font-size:19px; line-height:22px}

/* How it works */
#bb-landing .bb-how{background:var(--bb-blush)}
#bb-landing .bb-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:60px}
#bb-landing .bb-step{background:var(--bb-white); border-radius:24px; padding:36px 30px; position:relative; transition:transform .5s var(--bb-ease), box-shadow .5s}
#bb-landing .bb-step:hover{transform:translateY(-8px) rotate(-.6deg); box-shadow:var(--bb-shadow)}
#bb-landing .bb-num{font-family:var(--bb-serif); font-style:italic; font-weight:300; font-size:58px; color:var(--bb-pink); line-height:1}
#bb-landing .bb-step-title{font-family:var(--bb-serif); font-weight:500; color:var(--bb-green); font-size:22px; line-height:1.3; margin:16px 0 8px}
#bb-landing .bb-step-text{color:var(--bb-muted); font-size:15.5px}
#bb-landing .bb-doodle{position:absolute; top:28px; right:26px; width:58px; height:58px; color:var(--bb-green)}

/* Story */
#bb-landing .bb-story-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center}
#bb-landing .bb-photo{position:relative}
#bb-landing .bb-photo-frame{position:relative; border-radius:240px 240px 24px 24px; overflow:hidden; aspect-ratio:4/5; background:linear-gradient(160deg, var(--bb-pink-light), var(--bb-blush)); box-shadow:var(--bb-shadow)}
#bb-landing .bb-photo-frame img{width:100%; height:100%; object-fit:cover}
#bb-landing .bb-stamp{position:absolute; right:-24px; bottom:40px; width:128px; height:128px; animation:bbSpin 22s linear infinite}
#bb-landing .bb-stamp text{font-family:var(--bb-sans); font-size:10.5px; letter-spacing:3.4px; font-weight:600; fill:var(--bb-green); text-transform:uppercase}
@keyframes bbSpin{to{transform:rotate(360deg)}}
#bb-landing .bb-stamp-heart{position:absolute; right:20px; bottom:84px; width:40px; height:40px; display:grid; place-items:center; color:var(--bb-pink); font-size:24px}
#bb-landing .bb-story-p{color:var(--bb-muted); margin-bottom:16px; font-size:16.5px; max-width:560px}
#bb-landing .bb-pull{font-family:var(--bb-serif); font-size:22px; color:var(--bb-green); font-style:italic; font-weight:300; border-left:2px solid var(--bb-pink); padding-left:18px; margin:26px 0; line-height:1.4; max-width:560px}
#bb-landing .bb-sign{font-family:var(--bb-hand); font-size:35px; color:var(--bb-pink); margin-top:8px; line-height:1.2}

/* Made for */
#bb-landing .bb-who{background:var(--bb-green); color:var(--bb-cream); overflow:hidden}
#bb-landing .bb-who .bb-h2{color:var(--bb-cream)}
#bb-landing .bb-who .bb-h2 em{color:var(--bb-pink-mid)}
#bb-landing .bb-who .bb-kicker{color:var(--bb-pink-mid)}
#bb-landing .bb-pills{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:46px auto 0; max-width:900px}
#bb-landing .bb-pill{border:1.5px solid rgba(255,250,247,.25); border-radius:999px; padding:12px 22px; font-size:16px; color:var(--bb-cream); display:inline-flex; align-items:center; gap:10px; transition:.4s var(--bb-ease)}
#bb-landing .bb-pill:hover{background:var(--bb-pink); border-color:var(--bb-pink); transform:translateY(-4px) rotate(-2deg)}
#bb-landing .bb-pill b{color:var(--bb-pink-mid); font-weight:400}
#bb-landing .bb-pill:hover b{color:var(--bb-white)}
#bb-landing .bb-who .bb-sparkle{color:var(--bb-pink-mid)}

/* Waitlist CTA */
#bb-landing .bb-cta-card{position:relative; background:linear-gradient(140deg, var(--bb-white) 0%, var(--bb-blush) 100%); border-radius:36px; padding:80px 60px; text-align:center; overflow:hidden; box-shadow:var(--bb-shadow); border:1px solid var(--bb-pink-light)}
#bb-landing .bb-cta-card .bb-h2{max-width:720px; margin-left:auto; margin-right:auto}
#bb-landing .bb-cta-card .bb-lead{margin:0 auto}
#bb-landing .bb-cta-card .bb-form-wrap{display:flex; flex-direction:column; align-items:center}
#bb-landing .bb-cta-card .bb-signup{width:100%}
#bb-landing .bb-perks{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:44px auto 0; max-width:820px}
#bb-landing .bb-perk{display:flex; flex-direction:column; align-items:center; gap:10px; font-size:15px; color:var(--bb-green); font-weight:500}
#bb-landing .bb-perk i{font-style:normal; width:56px; height:56px; border-radius:50%; background:var(--bb-white); display:grid; place-items:center; box-shadow:0 10px 24px -14px rgba(13,90,69,.5); font-size:20px; color:var(--bb-pink)}
#bb-landing .bb-mini{position:absolute; width:70px; height:170px; border-radius:6px; background:repeating-linear-gradient(90deg, var(--bb-pink) 0 10px, var(--bb-pink-mid) 10px 20px); opacity:.9}
#bb-landing .bb-mini.bb-a{left:-16px; top:40px; transform:rotate(-18deg); animation:bbSway 7s ease-in-out infinite}
#bb-landing .bb-mini.bb-b{right:-10px; bottom:30px; transform:rotate(16deg); background:repeating-linear-gradient(90deg, var(--bb-green) 0 10px, #2b7360 10px 20px); animation:bbSway 8s ease-in-out infinite reverse}
@keyframes bbSway{50%{translate:0 -12px}}

/* FAQ */
#bb-landing .bb-faq-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:70px}
#bb-landing .bb-faq details{border-bottom:1px solid var(--bb-line); padding:22px 0}
#bb-landing .bb-faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--bb-serif); font-size:20px; color:var(--bb-green); line-height:1.35}
#bb-landing .bb-faq summary::-webkit-details-marker{display:none}
#bb-landing .bb-faq summary::marker{content:""}
#bb-landing .bb-plus{width:34px; height:34px; border-radius:50%; border:1.5px solid var(--bb-pink-light); flex:none; position:relative; transition:.4s var(--bb-ease)}
#bb-landing .bb-plus::before,#bb-landing .bb-plus::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:var(--bb-pink); transform:translate(-50%,-50%); transition:.4s var(--bb-ease)}
#bb-landing .bb-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
#bb-landing .bb-faq details[open] .bb-plus{background:var(--bb-pink); border-color:var(--bb-pink)}
#bb-landing .bb-faq details[open] .bb-plus::before,#bb-landing .bb-faq details[open] .bb-plus::after{background:var(--bb-white)}
#bb-landing .bb-faq details[open] .bb-plus::after{transform:translate(-50%,-50%) rotate(0)}
#bb-landing .bb-faq details p{color:var(--bb-muted); padding-top:12px; max-width:600px; animation:bbPop .4s var(--bb-ease)}
#bb-landing .bb-link-pink{color:var(--bb-pink)}
#bb-landing .bb-link-pink:hover{color:var(--bb-green)}

/* Footer */
#bb-landing .bb-footer{background:var(--bb-green-deep); color:rgba(255,250,247,.82); padding:80px 0 34px; position:relative}
#bb-landing .bb-foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px}
#bb-landing .bb-footer .bb-brand-name{color:var(--bb-cream)}
#bb-landing .bb-footer p{font-size:15px; max-width:340px; margin-top:16px}
#bb-landing .bb-foot-h{font-family:var(--bb-serif); font-weight:400; font-size:18px; color:var(--bb-cream); margin-bottom:14px}
#bb-landing .bb-footer ul{display:flex; flex-direction:column; gap:8px}
#bb-landing .bb-footer ul a{font-size:15px; color:rgba(255,250,247,.82); transition:color .3s}
#bb-landing .bb-footer ul a:hover{color:var(--bb-pink-mid)}
#bb-landing .bb-social{display:flex; gap:10px; margin-top:20px}
#bb-landing .bb-social a{width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,250,247,.25); display:grid; place-items:center; color:var(--bb-cream); transition:.3s var(--bb-ease)}
#bb-landing .bb-social a:hover{background:var(--bb-pink); border-color:var(--bb-pink); color:var(--bb-white); transform:translateY(-3px)}
#bb-landing .bb-foot-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid rgba(255,250,247,.14); margin-top:60px; padding-top:24px; font-size:13px; opacity:.75}
#bb-landing .bb-big-word{font-family:var(--bb-serif); font-size:clamp(40px,11.5vw,176px); line-height:.9; color:rgba(255,250,247,.06); text-align:center; margin-top:50px; letter-spacing:-.04em; -webkit-user-select:none; user-select:none; white-space:nowrap; overflow:hidden}

/* Popup */
#bb-landing .bb-modal{position:fixed; inset:0; z-index:99999; display:grid; place-items:center; padding:16px; background:rgba(10,70,54,.45); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .4s var(--bb-ease)}
#bb-landing .bb-modal.bb-open{opacity:1; pointer-events:auto}
#bb-landing .bb-modal-box{position:relative; width:min(760px,100%); display:grid; grid-template-columns:.85fr 1.15fr; background:var(--bb-cream); border-radius:28px; overflow:hidden; transform:translateY(30px) scale(.96); transition:transform .55s var(--bb-ease); box-shadow:0 40px 80px -30px rgba(0,0,0,.4)}
#bb-landing .bb-modal.bb-open .bb-modal-box{transform:none}
#bb-landing .bb-modal-art{background:repeating-linear-gradient(90deg, var(--bb-pink) 0 26px, var(--bb-pink-mid) 26px 52px); display:grid; place-items:center; min-height:380px}
#bb-landing .bb-disc{width:150px; height:150px; border-radius:50%; background:var(--bb-cream); display:grid; place-items:center; text-align:center; box-shadow:0 20px 40px -20px rgba(13,90,69,.6); animation:bbBob 4s ease-in-out infinite}
#bb-landing .bb-disc strong{font-family:var(--bb-serif); font-weight:400; font-size:45px; color:var(--bb-green); line-height:1; display:block}
#bb-landing .bb-disc span{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bb-pink); font-weight:600}
#bb-landing .bb-modal-body{padding:48px 40px}
#bb-landing .bb-modal-title{font-family:var(--bb-serif); font-weight:400; font-size:34px; color:var(--bb-green); line-height:1.12; margin:12px 0}
#bb-landing .bb-modal-body p{color:var(--bb-muted); font-size:15.5px}
#bb-landing .bb-modal-body form{display:flex; flex-direction:column; gap:10px; margin-top:22px}
#bb-landing .bb-modal-body input{border:1.5px solid var(--bb-pink-light); border-radius:999px; padding:14px 20px; background:var(--bb-white); color:var(--bb-ink); font-size:16px; outline:0; transition:border-color .3s; width:100%}
#bb-landing .bb-modal-body input:focus{border-color:var(--bb-pink)}
#bb-landing .bb-modal-body .bb-btn{width:100%}
#bb-landing .bb-later{font-size:14px; color:var(--bb-muted); text-decoration:underline; text-underline-offset:3px; margin-top:6px; align-self:center}
#bb-landing .bb-later:hover{color:var(--bb-green)}
#bb-landing .bb-modal-body .bb-success{margin-top:22px; box-shadow:none}
#bb-landing .bb-close{position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; background:var(--bb-white); display:grid; place-items:center; z-index:2; transition:transform .3s var(--bb-ease)}
#bb-landing .bb-close:hover{background:var(--bb-white); transform:rotate(90deg)}

/* Floating mobile CTA */
#bb-landing .bb-float{position:fixed; left:16px; right:16px; bottom:16px; z-index:40; display:none; transform:translateY(130%); transition:transform .5s var(--bb-ease)}
#bb-landing .bb-float.bb-show{transform:none}
#bb-landing .bb-float .bb-btn{width:100%}

/* Reveal on scroll (only hides content once JS is running, so nothing disappears in the editor if scripts are off) */
#bb-landing.bb-js .bb-reveal{opacity:0; transform:translateY(34px); transition:opacity 1s var(--bb-ease), transform 1s var(--bb-ease)}
#bb-landing.bb-js .bb-reveal.bb-in{opacity:1; transform:none}
#bb-landing .bb-d1{transition-delay:.1s!important}
#bb-landing .bb-d2{transition-delay:.2s!important}
#bb-landing .bb-d3{transition-delay:.3s!important}

/* ---------- Mobile-safety hardening ---------- */
#bb-landing{-webkit-text-size-adjust:100%; text-size-adjust:100%}
#bb-landing .bb-hero-grid>*,#bb-landing .bb-explore>*,#bb-landing .bb-story-grid>*,#bb-landing .bb-faq-wrap>*,
#bb-landing .bb-foot-grid>*,#bb-landing .bb-steps>*,#bb-landing .bb-perks>*{min-width:0; max-width:100%}
#bb-landing .bb-feat-list,#bb-landing .bb-feat{min-width:0; max-width:100%}
#bb-landing .bb-feat>span{min-width:0}
#bb-landing .bb-feat-title,#bb-landing .bb-feat-text{overflow-wrap:break-word; white-space:normal}
#bb-landing .bb-bigwrap{max-width:100%; overflow:hidden}
#bb-landing .bb-bigcard .bb-hw{white-space:normal; overflow-wrap:anywhere}
#bb-landing .bb-bigcard .bb-field{flex-wrap:wrap; row-gap:0}
/* force brand colors on buttons/links even if the theme uses !important */
#bb-landing a.bb-btn-pink,#bb-landing button.bb-btn-pink,#bb-landing a.bb-btn-pink:visited,#bb-landing a.bb-btn-pink:hover,#bb-landing button.bb-btn-pink:hover{color:#ffffff!important; -webkit-text-fill-color:#ffffff; background-color:var(--bb-pink)!important}
#bb-landing a.bb-btn-pink:hover,#bb-landing button.bb-btn-pink:hover{background-color:var(--bb-pink)!important; filter:brightness(.93)}
#bb-landing a.bb-btn-green,#bb-landing button.bb-btn-green,#bb-landing a.bb-btn-green:visited,#bb-landing a.bb-btn-green:hover,#bb-landing button.bb-btn-green:hover{color:var(--bb-cream)!important; -webkit-text-fill-color:var(--bb-cream); background-color:var(--bb-green)!important}
#bb-landing a.bb-btn-green:hover,#bb-landing button.bb-btn-green:hover{background-color:var(--bb-green-deep)!important}
#bb-landing .bb-nav a,#bb-landing .bb-nav a:visited{color:var(--bb-ink)!important}
#bb-landing .bb-mobile-nav a,#bb-landing .bb-mobile-nav a:visited,#bb-landing .bb-brand,#bb-landing .bb-brand:visited{color:var(--bb-green)!important}
#bb-landing .bb-footer ul a,#bb-landing .bb-footer ul a:visited{color:rgba(255,250,247,.82)!important}
#bb-landing .bb-footer ul a:hover{color:var(--bb-pink-mid)!important}
#bb-landing .bb-social a,#bb-landing .bb-social a:visited{color:var(--bb-cream)!important}
#bb-landing .bb-link-pink,#bb-landing .bb-link-pink:visited{color:var(--bb-pink)!important}
#bb-landing .bb-feat,#bb-landing .bb-feat:focus,#bb-landing .bb-later,#bb-landing .bb-burger{color:inherit!important; -webkit-tap-highlight-color:transparent}
#bb-landing .bb-later{color:var(--bb-muted)!important}

/* ---------- v2 additions ---------- */
#bb-landing .bb-logo{display:inline-block; flex:none; background:var(--bb-logo-img) center/contain no-repeat}
/* rotating hero word */
#bb-landing .bb-h1 .bb-rot-wrap{display:inline-block; position:relative; white-space:nowrap}
#bb-landing .bb-rot{display:inline-block; transition:opacity .35s ease, transform .35s ease}
#bb-landing .bb-rot.bb-out{opacity:0; transform:translateY(-.22em)}
/* explore: front / back / notebook views */
#bb-landing .bb-views{position:relative; display:grid; width:min(340px,100%); perspective:1400px}
#bb-landing .bb-views .bb-view{grid-area:1/1; width:100%; opacity:0; transform:rotateY(-80deg) scale(.96); transition:transform .7s var(--bb-ease), opacity .45s ease; pointer-events:none; -webkit-backface-visibility:hidden; backface-visibility:hidden}
#bb-landing .bb-views .bb-view.bb-show{opacity:1; transform:rotate(2deg); pointer-events:auto}
#bb-landing .bb-view-label{position:absolute; top:14px; right:16px; z-index:1; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--bb-pink); background:var(--bb-blush); border-radius:999px; padding:3px 9px; line-height:1.4}
#bb-landing .bb-stars{text-align:center; color:var(--bb-pink); font-size:28px; letter-spacing:4px; line-height:1; margin-top:22px}
#bb-landing .bb-review-title{text-align:center; font-family:var(--bb-serif); font-size:20px; color:var(--bb-ink); margin:10px 0 6px}
#bb-landing .bb-lined-tall{height:auto; min-height:220px}
#bb-landing .bb-back-logo{display:flex; justify-content:center; margin-top:14px}
#bb-landing .bb-back-logo .bb-logo{width:26px; height:32px}
#bb-landing .bb-views .bb-bigcard.bb-nb{padding-left:44px}
#bb-landing .bb-views .bb-bigcard.bb-nb::before{left:30px}
#bb-landing .bb-nb-cover{position:absolute; left:0; top:0; bottom:0; width:20px; border-radius:18px 0 0 18px; background:repeating-linear-gradient(180deg, var(--bb-pink) 0 12px, var(--bb-pink-mid) 12px 24px)}
#bb-landing .bb-field.bb-gap{margin-top:14px}
#bb-landing .bb-nb-note{margin-top:14px; font-size:13px; font-weight:500; color:var(--bb-green); background:var(--bb-green-soft); border-radius:999px; padding:6px 12px; text-align:center}
#bb-landing .bb-bigcard .bb-blank{height:26px}
/* footer tagline */
#bb-landing .bb-footer .bb-foot-tag{font-size:16px; max-width:460px; margin-top:22px; line-height:1.7; color:rgba(255,250,247,.82)}
#bb-landing .bb-pill-pink{display:inline-block; background:var(--bb-pink-light); color:var(--bb-green-deep); font-weight:600; border-radius:999px; padding:1px 12px; margin-right:4px; line-height:1.6}
#bb-landing .bb-footer .bb-foot-quote{font-family:var(--bb-serif); font-weight:500; font-size:clamp(26px,3vw,36px); line-height:1.15; letter-spacing:-.01em; color:var(--bb-cream); max-width:460px; margin-top:18px}
#bb-landing .bb-pinktext{color:var(--bb-pink-mid)}
#bb-landing .bb-footer .bb-brand-name{color:var(--bb-cream)!important}
@media (max-width:640px){
  #bb-landing .bb-views{width:100%; max-width:330px}
  #bb-landing .bb-views .bb-view.bb-show{transform:rotate(1deg)}
  #bb-landing .bb-stars{font-size:24px}
}

/* Responsive */
@media (max-width:980px){
  #bb-landing .bb-nav{display:none}
  #bb-landing .bb-burger{display:flex}
  #bb-landing .bb-header-inner{grid-template-columns:auto 1fr auto}
  #bb-landing .bb-brand{order:-1}
  #bb-landing .bb-header-cta .bb-btn{display:none}
  #bb-landing .bb-hero-grid{grid-template-columns:1fr; text-align:center; padding:48px 0 80px}
  #bb-landing .bb-hero-copy{display:flex; flex-direction:column; align-items:center}
  #bb-landing .bb-lead{margin-left:auto; margin-right:auto}
  #bb-landing .bb-chips{justify-content:center}
  #bb-landing .bb-stage{height:520px}
  #bb-landing .bb-explore,#bb-landing .bb-story-grid,#bb-landing .bb-faq-wrap{grid-template-columns:1fr; gap:50px}
  #bb-landing .bb-steps{grid-template-columns:1fr}
  #bb-landing .bb-foot-grid{grid-template-columns:1fr 1fr}
  #bb-landing .bb-foot-grid>div:first-child{grid-column:1/-1}
  #bb-landing .bb-photo{max-width:440px; margin:0 auto}
  #bb-landing .bb-float{display:block}
}
@media (max-width:782px){ body.admin-bar #bb-landing .bb-header{top:46px} }
@media (max-width:640px){
  #bb-landing .bb-pad{padding:84px 0}
  #bb-landing .bb-header-inner{height:70px}
  #bb-landing .bb-brand-name{font-size:20px}
  #bb-landing .bb-signup{flex-direction:column; border-radius:22px; padding:8px}
  #bb-landing .bb-signup input{padding:12px 14px; text-align:center}
  #bb-landing .bb-stage{height:470px; transform:scale(.86)}
  #bb-landing .bb-blob{width:380px; height:380px}
  #bb-landing .bb-tag{display:none}
  #bb-landing .bb-cta-card{padding:60px 22px; border-radius:26px}
  #bb-landing .bb-perks{grid-template-columns:1fr; gap:18px}
  #bb-landing .bb-mini{display:none}
  #bb-landing .bb-modal-box{grid-template-columns:1fr}
  #bb-landing .bb-modal-art{min-height:150px}
  #bb-landing .bb-disc{width:110px; height:110px}
  #bb-landing .bb-disc strong{font-size:32px}
  #bb-landing .bb-modal-body{padding:30px 24px}
  #bb-landing .bb-modal-title{font-size:27px}
  #bb-landing .bb-stamp{right:-6px; width:104px; height:104px}
  #bb-landing .bb-stamp-heart{right:32px; bottom:72px}
  #bb-landing .bb-foot-grid{grid-template-columns:1fr}
  #bb-landing .bb-explore{gap:36px; margin-top:40px}
  #bb-landing .bb-feat{padding:14px; gap:14px; grid-template-columns:42px 1fr}
  #bb-landing .bb-feat .bb-ico{width:42px; height:42px}
  #bb-landing .bb-feat-title{font-size:17px}
  #bb-landing .bb-bigwrap{padding:16px 0}
  #bb-landing .bb-bigwrap::before{width:100%}
  #bb-landing .bb-bigcard{width:100%; max-width:320px; padding:22px 18px}
  #bb-landing .bb-bigcard .bb-field{font-size:12.5px}
  #bb-landing .bb-bigcard .bb-hw{font-size:18px}
  #bb-landing .bb-lined{font-size:17px}
  #bb-landing .bb-h1{font-size:40px}
  #bb-landing .bb-h2{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  #bb-landing *,#bb-landing *::before,#bb-landing *::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}

/* ---------- plugin additions ---------- */
#bb-landing .bb-hp{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important}
#bb-landing .bb-error{display:none; color:#b4325a; font-size:14px; margin-top:10px}
#bb-landing .bb-error.bb-has{display:block}
#bb-landing .bb-stage-img{height:auto; padding:20px 0}
#bb-landing .bb-hero-img{position:relative; width:100%; max-width:500px; aspect-ratio:4/5; object-fit:cover; border-radius:240px 240px 28px 28px; box-shadow:var(--bb-shadow); animation:bbBob 7s ease-in-out infinite}
#bb-landing .bb-story-rich p{color:var(--bb-muted); margin-bottom:16px; font-size:16.5px; max-width:560px}
#bb-landing .bb-story-rich a,#bb-landing .bb-faq-a a,#bb-landing .bb-faq-intro a{color:var(--bb-pink)!important; text-decoration:underline}
#bb-landing .bb-faq-a{color:var(--bb-muted); padding-top:12px; max-width:600px}
#bb-landing .bb-faq-a p{margin-bottom:10px}
#bb-landing .bb-faq-intro p{margin:0}
#bb-landing.bb-nosticky .bb-header{position:relative}
#bb-landing .bb-modal-body .bb-error{margin-top:8px}
#bb-landing .bb-btn-pink:hover{filter:brightness(.95)}

/* ---------- v1.1: hero product slideshow ---------- */
#bb-landing .bb-stage-products{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; height:auto; min-height:600px; padding:10px 0}
#bb-landing .bb-stage-products .bb-blob{top:50%; left:50%; translate:-50% -50%}
#bb-landing .bb-prod-slides{position:relative; height:520px; aspect-ratio:433/1190; animation:bbFloat 6s ease-in-out infinite; filter:drop-shadow(0 28px 30px rgba(13,90,69,.28))}
#bb-landing .bb-prod-img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain; opacity:0; transform:scale(.97); transition:opacity .9s ease, transform .9s var(--bb-ease)}
#bb-landing .bb-prod-img.bb-active{opacity:1; transform:none}
#bb-landing .bb-prod-dots{position:relative; z-index:3; display:inline-flex; align-items:center; gap:8px; background:var(--bb-white); border-radius:999px; padding:8px 16px; box-shadow:0 12px 26px -16px rgba(13,90,69,.55); white-space:nowrap}
#bb-landing .bb-prod-dot{width:9px; height:9px; min-height:0; border-radius:9px; padding:0; background:var(--bb-pink-light)!important; transition:width .35s var(--bb-ease), background-color .3s}
#bb-landing .bb-prod-dot.bb-active{width:24px; background:var(--bb-pink)!important}
#bb-landing .bb-prod-name{font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--bb-green); margin-left:6px; min-width:64px}

/* hero TikTok link */
#bb-landing a.bb-hero-tt{display:inline-flex; align-items:center; gap:12px; margin-top:22px; background:var(--bb-white); border:1px solid var(--bb-pink-light); border-radius:999px; padding:7px 18px 7px 7px; color:var(--bb-ink)!important; box-shadow:0 10px 24px -16px rgba(13,90,69,.5); transition:transform .3s var(--bb-ease), box-shadow .3s, border-color .3s}
#bb-landing a.bb-hero-tt:hover{transform:translateY(-2px); box-shadow:var(--bb-shadow); border-color:var(--bb-pink)}
#bb-landing .bb-tt-ico{width:36px; height:36px; border-radius:50%; background:var(--bb-green); color:var(--bb-cream); display:grid; place-items:center; flex:none}
#bb-landing .bb-tt-txt{display:flex; flex-direction:column; text-align:left}
#bb-landing .bb-tt-txt small{font-size:12px; color:var(--bb-muted); line-height:1.25}
#bb-landing .bb-tt-txt b{font-size:15px; font-weight:600; color:var(--bb-green); line-height:1.3}
#bb-landing .bb-tt-arrow{color:var(--bb-pink); font-size:18px; transition:transform .3s var(--bb-ease)}
#bb-landing a.bb-hero-tt:hover .bb-tt-arrow{transform:translateX(3px)}

/* What's Inside photo views */
#bb-landing .bb-views .bb-imgview{display:flex; justify-content:center; align-items:center; position:relative; align-self:center}
#bb-landing .bb-view-cut{width:auto; height:auto; max-width:100%; max-height:560px; filter:drop-shadow(0 24px 28px rgba(13,90,69,.26))}
#bb-landing .bb-view-photo img{width:auto; height:auto; max-width:100%; max-height:560px; border-radius:20px; box-shadow:var(--bb-shadow)}
#bb-landing .bb-imgview .bb-view-label{top:-12px; right:auto; left:50%; transform:translateX(-50%); background:var(--bb-white); box-shadow:0 8px 18px -10px rgba(13,90,69,.5); z-index:2}

/* What's Inside blended into How It Works */
#bb-landing .bb-inside.bb-joined{background:var(--bb-blush); padding-top:10px; padding-bottom:150px}
#bb-landing .bb-join-scallop{display:none}
#bb-landing .bb-joined .bb-join-scallop{display:block; bottom:0}
#bb-landing .bb-joined .bb-bigwrap::before{background:var(--bb-white); opacity:.65}
#bb-landing .bb-joined .bb-feat:hover{background:rgba(255,255,255,.7)}

@media (max-width:980px){
  #bb-landing .bb-stage-products{min-height:0; padding:20px 0 10px}
  #bb-landing a.bb-hero-tt{margin-left:auto; margin-right:auto}
}
@media (max-width:640px){
  #bb-landing .bb-stage.bb-stage-products{transform:none; height:auto}
  #bb-landing .bb-prod-slides{height:420px}
  #bb-landing .bb-stage-products .bb-blob{width:330px; height:330px}
  #bb-landing .bb-view-cut,#bb-landing .bb-view-photo img{max-height:470px}
  #bb-landing .bb-inside.bb-joined{padding-bottom:110px}
}

/* ---------- v1.2: bold hero intro ---------- */
#bb-landing .bb-hero-intro{font-family:var(--bb-serif); font-weight:600; font-size:clamp(21px,2vw,26px); line-height:1.3; letter-spacing:-.01em; color:var(--bb-green); max-width:540px; margin:0 0 12px}
#bb-landing .bb-hero-intro em{font-weight:500}

/* ---------- v1.2: popup name fields ---------- */
#bb-landing .bb-names{display:grid; grid-template-columns:1fr 1fr; gap:10px}
#bb-landing .bb-names input{min-width:0}

/* ---------- v1.2: What's Inside diagram (Front / Inside / Back) ---------- */
#bb-landing .bb-anat-head .bb-lead{font-size:13.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--bb-muted); max-width:720px; margin:0 auto}
#bb-landing .bb-anat{position:relative; display:flex; justify-content:center; align-items:flex-end; flex-wrap:wrap; column-gap:clamp(28px,3.6vw,60px); row-gap:70px; margin-top:64px}
#bb-landing .bb-anat-arrows{position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; color:var(--bb-pink); z-index:4}
#bb-landing .bb-anat-arrows path.bb-arrow{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
#bb-landing .bb-anat-panel{display:flex; flex-direction:column; align-items:center}
#bb-landing .bb-anat-body{display:flex; align-items:stretch; gap:38px}
#bb-landing .bb-anat-side{display:flex; flex-direction:column; justify-content:space-around; gap:26px; width:225px; padding:10px 0}
#bb-landing .bb-anat-main{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:34px}
#bb-landing .bb-anat-row{display:flex; justify-content:center; gap:30px}
#bb-landing .bb-anat-bot{align-items:flex-start}
#bb-landing .bb-anat-media{position:relative; line-height:0; flex:none}
#bb-landing .bb-anat-media img{display:block; width:auto; max-width:none; height:520px}
#bb-landing .bb-anat-cut img{filter:drop-shadow(0 26px 28px rgba(13,90,69,.24))}
#bb-landing .bb-anat-photo img{height:440px; border-radius:20px; box-shadow:var(--bb-shadow)}
#bb-landing .bb-anat-lbl{margin-top:34px; background:var(--bb-pink-light); color:var(--bb-green-deep); border-radius:999px; padding:10px 34px; font-size:13px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; line-height:1.3}
#bb-landing .bb-call{max-width:225px; position:relative; z-index:5}
#bb-landing .bb-anat-row .bb-call{max-width:200px}
#bb-landing .bb-call-t{display:inline-block; background:var(--bb-pink-light); color:var(--bb-green-deep); font-family:var(--bb-serif); font-weight:500; font-size:18px; line-height:1.18; padding:8px 14px 9px; border-radius:14px}
#bb-landing .bb-call p{font-size:14.5px; line-height:1.5; color:var(--bb-muted); margin-top:9px; padding-left:2px}
#bb-landing .bb-call-n{display:none}
#bb-landing .bb-hot{position:absolute; z-index:3; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--bb-pink); box-shadow:0 0 0 4px rgba(255,255,255,.9), 0 4px 10px rgba(13,90,69,.3); line-height:1}
#bb-landing .bb-hot::after{content:""; position:absolute; inset:-7px; border-radius:50%; border:2px solid var(--bb-pink); opacity:0; animation:bbHot 2.2s ease-out infinite}
@keyframes bbHot{0%{transform:scale(.5); opacity:.9}100%{transform:scale(1.5); opacity:0}}
#bb-landing .bb-hot i{display:none; font-style:normal}
#bb-landing .bb-joined .bb-call-t{background:var(--bb-white)}
#bb-landing .bb-joined .bb-anat-lbl{background:var(--bb-white)}
#bb-landing .bb-inside-anat .bb-join-scallop{color:var(--bb-cream)}

@media (max-width:1240px){
  #bb-landing .bb-anat-media img{height:450px}
  #bb-landing .bb-anat-photo img{height:380px}
  #bb-landing .bb-anat-side{width:195px}
  #bb-landing .bb-anat-body{gap:28px}
  #bb-landing .bb-call-t{font-size:17.5px}
}
/* phones & tablets: stacked, numbered (no arrows) */
@media (max-width:980px){
  #bb-landing .bb-anat{flex-direction:column; align-items:center; row-gap:64px; margin-top:44px}
  #bb-landing .bb-anat-arrows{display:none}
  #bb-landing .bb-anat-panel{width:100%; max-width:440px}
  #bb-landing .bb-anat-body,#bb-landing .bb-anat-main{display:contents}
  #bb-landing .bb-anat-lbl{order:-3; margin:0 0 22px}
  #bb-landing .bb-anat-media{order:-2}
  #bb-landing .bb-anat-side,#bb-landing .bb-anat-row{order:0; width:100%; flex-direction:column; align-items:stretch; gap:16px; padding:0; margin-top:26px}
  #bb-landing .bb-anat-bot{order:1; margin-top:16px}
  #bb-landing .bb-anat-media img{height:min(460px,110vw)}
  #bb-landing .bb-anat-photo{width:100%; max-width:360px}
  #bb-landing .bb-anat-photo img{height:auto; width:100%}
  #bb-landing .bb-call,#bb-landing .bb-anat-row .bb-call{max-width:none; display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:start; text-align:left}
  #bb-landing .bb-call-t{grid-column:1 / -1; display:flex; align-items:center; gap:10px; width:max-content; max-width:100%; font-size:18px}
  #bb-landing .bb-call p{grid-column:1 / -1; margin-top:6px; padding-left:4px}
  #bb-landing .bb-call-n{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--bb-pink); color:var(--bb-white); font-family:var(--bb-sans); font-size:12px; font-weight:700; font-style:normal; flex:none}
  #bb-landing .bb-hot{width:21px; height:21px; margin:-10.5px 0 0 -10.5px}
  #bb-landing .bb-hot::after{inset:-5px}
  #bb-landing .bb-hot i{display:grid; place-items:center; width:100%; height:100%; color:var(--bb-white); font-size:12px; font-weight:700; font-family:var(--bb-sans)}
}
#bb-landing .bb-hero-intro-after{margin:22px 0 0}
/* v1.2 fit: keep Front / Inside / Back on one row on laptops & desktops */
#bb-landing .bb-anat{column-gap:clamp(26px,3vw,46px)}
#bb-landing .bb-anat-side{width:210px}
#bb-landing .bb-call{max-width:210px}
#bb-landing .bb-anat-row{gap:22px}
#bb-landing .bb-anat-row .bb-call{max-width:180px}
#bb-landing .bb-anat-back .bb-anat-row .bb-call{max-width:210px}
@media (max-width:1240px) and (min-width:981px){
  #bb-landing .bb-anat{column-gap:28px}
  #bb-landing .bb-anat-media img{height:430px}
  #bb-landing .bb-anat-photo img{height:360px}
  #bb-landing .bb-anat-side{width:180px}
  #bb-landing .bb-anat-body{gap:24px}
  #bb-landing .bb-call{max-width:180px}
  #bb-landing .bb-anat-row .bb-call{max-width:160px}
  #bb-landing .bb-anat-back .bb-anat-row .bb-call{max-width:185px}
  #bb-landing .bb-call-t{font-size:16.5px; padding:7px 12px 8px}
  #bb-landing .bb-call p{font-size:13.5px}
}
@media (max-width:980px){
  #bb-landing .bb-call,#bb-landing .bb-anat-row .bb-call,#bb-landing .bb-anat-back .bb-anat-row .bb-call{max-width:none}
  #bb-landing .bb-anat-side{width:100%}
}

/* ---------- v1.3 revisions ---------- */
/* 1. What's Inside intro: normal sentence case */
#bb-landing .bb-anat-head .bb-lead{font-size:18px; font-weight:400; letter-spacing:normal; text-transform:none; color:var(--bb-muted); line-height:1.65; max-width:640px; margin:0 auto}

/* 2. Column labels at the top, columns aligned at the top */
#bb-landing .bb-anat{align-items:flex-start}
#bb-landing .bb-anat-lbl{order:-1; margin:0 0 34px}
#bb-landing .bb-anat-panel{justify-content:flex-start}
#bb-landing .bb-anat-main{justify-content:flex-start}

/* 4 columns (with Unfolded): 2 x 2 grid on desktop */
@media (min-width:981px){
  #bb-landing .bb-anat.bb-anat-n4{display:grid; grid-template-columns:repeat(2,auto); justify-content:center; justify-items:center; align-items:start; column-gap:clamp(70px,9vw,140px); row-gap:90px}
}

/* 3. Inside photo now floats like Front & Back */
#bb-landing .bb-anat-cut img{height:520px; border-radius:0; box-shadow:none}
#bb-landing .bb-anat-photo img{height:470px}
@media (max-width:1240px) and (min-width:981px){
  #bb-landing .bb-anat-cut img{height:440px}
  #bb-landing .bb-anat-photo img{height:400px}
}
@media (max-width:980px){
  #bb-landing .bb-anat-lbl{order:-3; margin:0 0 22px}
  #bb-landing .bb-anat-cut img{height:min(460px,110vw); width:auto}
  #bb-landing .bb-anat-inside.bb-anat-panel .bb-anat-cut img{height:auto; width:100%; max-width:360px}
  #bb-landing .bb-anat-inside .bb-anat-cut{width:100%; max-width:360px}
  #bb-landing .bb-anat-photo{width:100%; max-width:360px}
  #bb-landing .bb-anat-photo img{height:auto; width:100%}
}