/* Generated from site.config.json by addons/sales-pages/build.mjs. Edit the config or assets/sales-pages.css, not this file. */
:root{
  --navy:#1B2C50;
  --cream:#F2EFE9;
  --off:#FFFDF8;
  --sun:#FFCC44;
  --gold:#C9952A;
  --green:#36CA37;
  --green-dk:#24952a;
  --mint:#DDF6DC;
  --peach:#FFE3C2;
  --sky:#DCEBFF;
  --pink:#FFDDE6;
  --muted:#5a6580;
  --navy-dk:#0e1a33;
  --footer-link:#c7cfe0;
  --error:#b4232a;
  --font-heading:'Fredoka',sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
  --font-script:'Caveat',cursive;
}
/* Sales pages add-on styles. Colors and fonts come from the :root block above (site.config.json brand). */
*{ box-sizing:border-box; }
body{ background:var(--cream); color:var(--navy); font-family:var(--font-body); font-size:17px; line-height:1.55; margin:0; }
.wrap{ max-width:880px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
section{ padding-block:32px; }
h1,h2,h3{ font-family:var(--font-heading); text-wrap:balance; margin:0; line-height:1.08; }
h1{ font-size:clamp(34px, 7vw, 58px); font-weight:700; }
h2{ font-size:clamp(26px, 4.6vw, 38px); font-weight:700; margin-bottom:10px; }
h3{ font-size:21px; font-weight:600; }
p{ margin:0; max-width:64ch; }
b{ font-weight:800; }
.hl{ background:linear-gradient(transparent 58%, #fff 58%, #fff 92%, transparent 92%); padding:0 4px; }
.scrawl{ font-family:var(--font-script); font-weight:700; font-size:28px; line-height:1.1; color:var(--gold); }
a{ color:var(--navy); }
a:focus-visible{ outline:3px solid var(--sun); outline-offset:3px; }

/* hero */
.sp-hero{ background:var(--sun); }
.sp-hero .wrap{ display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding-block:40px 34px; }
.sp-hero .wrap.check-first{ grid-template-columns:auto 1fr; }
.sp-hero .hero-text{ min-width:0; }
.sp-hero .scrawl{ color:var(--navy); margin-bottom:8px; }
.sp-hero p{ font-size:19px; font-weight:600; margin-top:14px; }
.sp-hero .mascot{ width:210px; max-width:100%; height:auto; display:block; }
.sp-hero.slim .wrap{ grid-template-columns:1fr; padding-block:34px 28px; }
.bigcheck{ width:96px; height:96px; border-radius:28px; background:var(--green); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:58px; font-weight:800; transform:rotate(-6deg); box-shadow:0 7px 0 rgba(27,44,80,.18); }

/* letter */
.letter{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; background:var(--off); border-radius:26px; padding:24px 26px; box-shadow:0 6px 0 rgba(27,44,80,.10); }
.letter img{ width:72px; height:72px; border-radius:50%; object-fit:cover; display:block; border:3px solid var(--sun); }
.letter > div{ min-width:0; display:grid; gap:12px; }

/* included items */
.items{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:20px; }
.item{ border-radius:24px; padding:22px 24px; display:grid; gap:8px; align-content:start; }
.item .top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.item .price{ font-family:var(--font-heading); font-weight:600; font-size:17px; background:rgba(255,255,255,.7); border-radius:999px; padding:2px 12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.item p{ font-size:16px; }
.sky{ background:var(--sky); } .mint{ background:var(--mint); } .peach{ background:var(--peach); } .pink{ background:var(--pink); }

/* options */
.options{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin-top:26px; align-items:stretch; }
.opt{ background:var(--off); border-radius:28px; padding:28px 26px 26px; position:relative; display:grid; gap:14px; align-content:start; box-shadow:0 6px 0 rgba(27,44,80,.10); }
.opt.star{ background:var(--navy); color:var(--off); box-shadow:0 8px 0 var(--sun); }
.opt .name{ font-family:var(--font-heading); font-weight:600; font-size:20px; }
.opt .amount{ font-family:var(--font-heading); font-weight:700; font-size:56px; line-height:1; font-variant-numeric:tabular-nums; }
.opt .was{ font-size:15px; font-weight:700; color:var(--muted); }
.opt.star .was{ color:var(--footer-link, #c7cfe0); }
.badge{ position:absolute; top:-14px; right:22px; background:var(--green); color:var(--navy); font-family:var(--font-heading); font-weight:700; font-size:15px; padding:5px 14px; border-radius:999px; transform:rotate(3deg); }
.checks{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.checks li{ position:relative; padding-left:38px; font-weight:700; font-size:16px; line-height:1.4; }
.checks li::before{ content:"✓"; position:absolute; left:0; top:-1px; width:26px; height:26px; border-radius:9px; background:var(--green); color:var(--navy); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; transform:rotate(-6deg); }
.checks li:nth-child(even)::before{ transform:rotate(5deg); }
.checks li span{ display:block; font-weight:600; font-size:14.5px; color:var(--muted); }
.opt.star .checks li span{ color:var(--footer-link, #c7cfe0); }

/* feature list (expandable groups) */
.feats{ display:grid; gap:12px; margin-top:20px; }
.feat{ background:var(--off); border-radius:20px; box-shadow:0 5px 0 rgba(27,44,80,.08); }
.feat summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:18px 22px; font-family:var(--font-heading); font-weight:600; font-size:19px; }
.feat summary::-webkit-details-marker{ display:none; }
.feat summary::before{ content:"+"; flex:none; width:30px; height:30px; border-radius:50%; background:var(--sun); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; }
.feat[open] summary::before{ content:"–"; }
.feat summary:focus-visible{ outline:3px solid var(--sun); outline-offset:2px; border-radius:20px; }
.feat .tag{ margin-left:auto; background:var(--green); color:var(--navy); font-size:13px; font-weight:700; padding:3px 12px; border-radius:999px; white-space:nowrap; }
.feat > p{ padding:0 22px; font-size:16px; }
.feat ul{ margin:0; padding:4px 22px 20px 64px; display:grid; gap:8px; font-size:16px; }
.feat.featured{ background:var(--mint); }
.feat.not{ background:transparent; box-shadow:none; border:2px dashed rgba(27,44,80,.25); }
.feat.not summary::before{ background:rgba(27,44,80,.12); }

/* panels */
.two{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.panel{ background:var(--off); border-radius:24px; padding:22px 24px; display:grid; gap:10px; align-content:start; }
.panel p{ font-size:16px; }

/* next steps + pay buttons */
.next{ background:var(--navy); color:var(--off); }
.next .wrap{ padding-block:40px; display:grid; gap:14px; }
.next .scrawl{ color:var(--sun); }
.next p{ font-size:18px; }
.next ol{ margin:0; padding-left:22px; display:grid; gap:8px; font-weight:700; }
.pay{ display:flex; flex-wrap:wrap; gap:14px; margin-block:6px; }
.pay-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:12px 26px; border-radius:999px; font-family:var(--font-heading); font-weight:600; font-size:19px; text-decoration:none; background:var(--off); color:var(--navy); box-shadow:0 5px 0 rgba(0,0,0,.25); }
.pay-btn.star{ background:var(--green); }
.pay-btn:hover{ transform:translateY(-1px); }
.pay-form{ display:contents; }
button.pay-btn{ border:0; cursor:pointer; }

/* optional sections: video, story, post-style showcase row, testimonial screenshots */
.sp-video{ width:100%; height:auto; border-radius:22px; background:var(--navy); display:block; }
.story{ background:var(--off); border-radius:26px; padding:24px 26px; box-shadow:0 6px 0 rgba(27,44,80,.10); display:grid; gap:12px; }
.story .scrawl{ color:var(--green-dk); }
.posts{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px max(16px, calc((100vw - 880px) / 2 + 16px)) 18px; scroll-padding-inline:max(16px, calc((100vw - 880px) / 2 + 16px)); -webkit-overflow-scrolling:touch; }
.post{ flex:0 0 min(78vw, 300px); scroll-snap-align:start; background:var(--off); border-radius:20px; box-shadow:0 6px 0 rgba(27,44,80,.10); overflow:hidden; display:grid; align-content:start; }
.post-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; font-weight:700; font-size:14px; }
.post-head img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.post-img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.post-img.contain{ object-fit:contain; background:var(--cream); }
.post video.post-img[controls]{ position:relative; z-index:2; }
.post-tile{ aspect-ratio:4/5; display:grid; place-content:center; gap:12px; padding:22px; text-align:center; }
.post-tile .em{ font-size:48px; }
.post-tile h3{ font-size:24px; line-height:1.2; }
.post > p{ padding:12px 14px 16px; font-size:15px; }
.post{ position:relative; }
.post-link{ position:absolute; inset:0; border-radius:20px; z-index:1; }
.post.linked:hover{ transform:translateY(-2px); }
.post-link:focus-visible{ outline:3px solid var(--sun); outline-offset:3px; }
.shots{ columns:2 260px; column-gap:16px; margin-top:16px; }
.shots figure{ break-inside:avoid; margin:0 0 16px; background:var(--off); border-radius:18px; padding:10px; box-shadow:0 6px 0 rgba(27,44,80,.10); }
.shots img{ width:100%; height:auto; display:block; border-radius:10px; }
.shots figcaption{ font-size:14px; padding:8px 4px 2px; color:var(--muted); }

/* extra join buttons: hero, price card, sticky bar (phones only) */
.hero-cta{ margin-top:18px; display:flex; }
.hero-cta .pay-btn{ font-size:17px; min-height:48px; padding:10px 22px; }
.card-pay{ margin-top:6px; display:flex; }
.card-pay .pay-btn{ width:100%; }
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:20; padding:10px max(16px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)); background:var(--navy); box-shadow:0 -4px 16px rgba(0,0,0,.18); display:flex; }
.sticky-cta[hidden]{ display:none; }
.sticky-cta .pay-btn{ width:100%; min-height:48px; font-size:17px; }
@media (min-width: 761px){ .sticky-cta{ display:none !important; } }
@media (max-width: 760px){ .has-sticky .sp-foot{ padding-bottom:96px; } }
.post-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.post-nav{ display:none; gap:10px; margin-left:auto; }
.post-nav button{ width:44px; height:44px; border-radius:50%; border:0; background:var(--navy); color:var(--off); font-size:20px; cursor:pointer; }
.post-nav button:focus-visible, .post video:focus-visible, .post-link:focus-visible{ outline:3px solid var(--navy); outline-offset:3px; }
@media (hover: hover) and (pointer: fine){ .post-nav{ display:flex; } .touch-hint{ display:none; } }

/* skimmable letter/story: big opener, emoji points, sticky note */
.opener{ font-family:var(--font-heading); font-weight:700; font-size:clamp(24px, 3.4vw, 30px); line-height:1.15; }
.letter.skim{ align-items:start; }
.lead{ font-weight:800; }
.points{ list-style:none; display:grid; gap:14px; margin:6px 0 4px; padding:0; }
.points li{ display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start; }
.pt-em{ width:48px; height:48px; border-radius:16px; background:var(--sky); display:flex; align-items:center; justify-content:center; font-size:24px; }
.points li:nth-child(4n+2) .pt-em{ background:var(--mint); } .points li:nth-child(4n+3) .pt-em{ background:var(--peach); } .points li:nth-child(4n+4) .pt-em{ background:var(--pink); }
.points b{ display:block; font-family:var(--font-heading); font-weight:700; font-size:19px; line-height:1.2; }
.points li > div > span{ display:block; font-size:16px; line-height:1.45; margin-top:2px; }
.points .pt-em{ display:flex; font-size:24px; line-height:1; }
.sticky{ background:#FFF3B8; border-radius:8px; padding:18px 22px; margin:10px 4px 4px; transform:rotate(-1.2deg); box-shadow:0 10px 18px rgba(27,44,80,.12); position:relative; }
.sticky::before{ content:""; position:absolute; top:-10px; left:50%; width:90px; height:22px; margin-left:-45px; background:rgba(255,255,255,.7); transform:rotate(-3deg); border-radius:3px; }
.sticky p{ font-size:17px; font-weight:700; }
@media (prefers-reduced-motion: reduce){ .sticky{ transform:none; } }

/* thank-you */
.card{ background:var(--off); border-radius:26px; padding:24px 26px; box-shadow:0 6px 0 rgba(27,44,80,.10); display:grid; gap:12px; }
.card .row{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:baseline; }
.card .pkg, .card .amt{ font-family:var(--font-heading); font-weight:600; font-size:22px; font-variant-numeric:tabular-nums; }
.note{ font-size:15px; color:var(--muted); font-weight:600; }
.textlink{ font-weight:800; }
.steps{ list-style:none; padding:0; margin:0; display:grid; gap:14px; counter-reset:s; }
.steps li{ counter-increment:s; border-radius:22px; padding:20px 22px 20px 74px; position:relative; display:grid; gap:6px; }
.steps li::before{ content:counter(s); position:absolute; left:20px; top:18px; width:38px; height:38px; border-radius:50%; background:var(--navy); color:var(--sun); font-family:var(--font-heading); font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; }
.steps li p{ font-size:16px; }
.sign{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
.sign img{ width:64px; height:64px; border-radius:50%; object-fit:cover; display:block; border:3px solid var(--sun); }

/* info page body (e.g. costs) */
.doc{ padding-block:28px 40px; display:grid; gap:16px; }
.doc h2{ margin-top:22px; }
.doc ul{ margin:0; padding-left:22px; display:grid; gap:8px; max-width:68ch; }
.doc .table{ overflow-x:auto; background:var(--off); border-radius:20px; box-shadow:0 5px 0 rgba(27,44,80,.08); }
.doc table{ border-collapse:collapse; width:100%; min-width:520px; font-size:15.5px; }
.doc th, .doc td{ text-align:left; padding:12px 14px; vertical-align:top; border-bottom:1px solid rgba(27,44,80,.10); }
.doc th{ font-family:var(--font-heading); font-weight:600; background:var(--sky); }
.doc tr:last-child td{ border-bottom:0; }
.doc .sources{ font-size:14.5px; color:var(--muted); }
/* phones: tables become one card per row, each value labeled with its column (labels come from build.mjs) */
@media (max-width: 640px){
  .doc .table:has(table.stack){ overflow:visible; background:none; box-shadow:none; border-radius:0; }
  .doc table.stack, .doc table.stack tbody, .doc table.stack tr, .doc table.stack td{ display:block; }
  .doc table.stack{ min-width:0; }
  .doc table.stack tr.head{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .doc table.stack tr{ background:var(--off); border-radius:18px; box-shadow:0 4px 0 rgba(27,44,80,.08); margin-bottom:12px; overflow:hidden; }
  .doc table.stack td{ padding:10px 16px; }
  .doc table.stack td:first-child{ background:var(--sky); font-family:var(--font-heading); font-weight:600; }
  .doc table.stack td[data-label]::before{ content:attr(data-label); display:block; font-family:var(--font-body); font-size:12.5px; font-weight:800; color:var(--muted); margin-bottom:2px; }
}

/* footer */
.sp-foot{ padding-block:24px 32px; text-align:center; font-size:14px; color:var(--muted); font-weight:700; }
.sp-foot nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 18px; margin-top:8px; font-weight:600; }
.sp-foot a{ color:var(--muted); }
.sp-foot .copy{ margin:10px auto 0; font-weight:600; font-size:13px; }

@media (max-width: 640px){
  .sp-hero .wrap, .sp-hero .wrap.check-first{ grid-template-columns:1fr; }
  .sp-hero .mascot{ width:140px; justify-self:end; margin-top:-6px; }
  .bigcheck{ width:76px; height:76px; font-size:46px; }
  .items, .options, .two{ grid-template-columns:1fr; }
  .options{ gap:28px; }
  .letter{ grid-template-columns:1fr; }
  .pay-btn{ flex:1 1 100%; }
  .steps li{ padding-left:64px; }
  .feat summary{ padding:16px 16px; font-size:18px; flex-wrap:wrap; }
  .feat ul{ padding:4px 16px 18px 40px; }
  .feat > p{ padding:0 16px; }
  .steps li::before{ left:16px; }
}
@media (prefers-reduced-motion: reduce){ .pay-btn:hover{ transform:none; } }

/* embed slot (filled by another add-on's script; hidden until it has something to show) */
.sp-embed[hidden]{ display:none; }
.sp-embed .embed-body{ margin-top:18px; }
.sp-embed .embed-cta{ margin-top:18px; }