:root{
  --cream:#FFF8EC; --cream-2:#FCEFDD;
  --blush:#F7DFE3; --blush-2:#F1CBD2;
  --berry:#561D33; --berry-2:#7A2C49;
  --rose:#E85D75; --rose-dark:#B8304C;
  --sage:#5B7453; --sage-dark:#3D5237;
  --honey:#E8A93C; --honey-dark:#8A5500;
  --text:#2D1F27; --text-soft:#65545D;
  --line:rgba(45,31,39,.14);
  --on-berry:#FFF5E6; --on-berry-soft:rgba(255,245,230,.82); --on-berry-line:rgba(255,245,230,.22);
  --shadow: 0 16px 34px rgba(86,29,51,.12);
  --r: 20px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream:#1D141C; --cream-2:#261A24;
    --text:#F7EDF2; --text-soft:#D6C4CD;
    --line:rgba(247,237,242,.15);
    --berry:#2A131E; --berry-2:#3B1E2C;
  }
}
:root[data-theme="dark"]{
  --cream:#1D141C; --cream-2:#261A24;
  --text:#F7EDF2; --text-soft:#D6C4CD;
  --line:rgba(247,237,242,.15);
  --berry:#2A131E; --berry-2:#3B1E2C;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--text); 
  font-family:'Nunito',system-ui,sans-serif; font-size:16px; line-height:1.65; 
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Baloo 2',system-ui,sans-serif; margin:0; 
  color:var(--text); font-weight:700; line-height:1.2;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,52px)}
.script{font-family:'Caveat',cursive; font-weight:700}
p.lede{font-size:18px; color:var(--text-soft); max-width:58ch; line-height:1.75}
p.body-copy{font-size:15.5px; color:var(--text-soft); max-width:60ch; line-height:1.8}

/* Pills with verified high contrast */
.pill{display:inline-flex; align-items:center; gap:8px; background:var(--honey); color:#2A1A00; font-weight:800; font-size:13px; padding:7px 16px; border-radius:100px}
.pill.rose{background:var(--rose-dark); color:#FFFFFF}
.pill.sage{background:var(--sage-dark); color:#FFFFFF}
.pill.on-berry{background:rgba(255,245,230,.16); color:var(--on-berry); border:1px solid var(--on-berry-line)}

/* Buttons with clear outlines and text contrast */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Nunito',sans-serif; font-weight:800; font-size:15px; padding:14px 30px; border-radius:100px; cursor:pointer; border:2px solid transparent; transition:transform .18s ease, box-shadow .2s ease;}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-rose{background:var(--rose-dark); color:#FFFFFF; box-shadow:0 6px 0 #851C33}
.btn-rose:hover{box-shadow:0 3px 0 #851C33; transform:translateY(2px)}
.btn-outline{border-color:var(--berry); color:var(--berry); background:transparent}
.btn-outline:hover{background:var(--berry); color:var(--on-berry)}
.btn-outline.on-berry{border-color:var(--on-berry); color:var(--on-berry); background:transparent}
.btn-outline.on-berry:hover{background:var(--on-berry); color:var(--berry)}
.btn-ghost{color:var(--rose-dark); font-weight:800; border-bottom:2px dashed var(--rose-dark); padding:0; border-radius:0; cursor:pointer}

.section{padding:92px 0}
.section.tight{padding:64px 0}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:36px; margin-bottom:44px; flex-wrap:wrap}
.section-head h2{font-size:clamp(28px,3.2vw,42px); max-width:600px}

/* ── STRICT HIGH-CONTRAST SECTION THEMES ── */
.on-berry{background:var(--berry); color:var(--on-berry)}
.on-berry h1, .on-berry h2, .on-berry h3, .on-berry h4{color:var(--on-berry)}
.on-berry p{color:var(--on-berry-soft)}
.on-berry strong{color:#FFFFFF}

.on-blush{background:var(--blush); color:var(--text)}
.on-blush h1, .on-blush h2, .on-blush h3, .on-blush h4{color:var(--berry)}
.on-blush p{color:var(--text-soft)}

.on-sage{background:var(--sage-dark); color:#FFFFFF}
.on-sage h1, .on-sage h2, .on-sage h3, .on-sage h4{color:#FFFFFF}
.on-sage p{color:rgba(255,255,255,0.85)}
.on-sage strong{color:#FFFFFF}

/* Scalloped divider */
.scallop{height:22px; background-repeat:repeat-x; background-size:28px 28px; background-position:top center}
.scallop-berry-top{background-image:radial-gradient(circle at 14px 0, transparent 14px, var(--berry) 15px)}

/* ---------- NAV ---------- */
header.top{position:sticky; top:0; z-index:80; background:var(--cream); border-bottom:2px dashed var(--line)}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:16px clamp(20px,4vw,52px); gap:24px; max-width:1240px; margin:0 auto}
.brand{display:flex; align-items:center; gap:12px; cursor:pointer}
.badge-mark{width:46px; height:46px; border-radius:50%; background:var(--rose-dark); display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:17px; color:#fff; flex:none; border:3px dashed var(--cream); box-shadow:0 0 0 2px var(--rose-dark)}
.brand-name{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:19px; line-height:1.1; color:var(--text)}
.brand-sub{font-size:11px; color:var(--text-soft); margin-top:2px}
nav.links{display:flex; align-items:center; gap:26px; font-size:14.5px; font-weight:700; color:var(--text-soft)}
nav.links span{cursor:pointer; padding:6px 2px; border-bottom:2px solid transparent; transition:color .15s, border-color .15s}
nav.links span:hover, nav.links span.active{color:var(--rose-dark); border-color:var(--rose-dark)}
.nav-actions{display:flex; align-items:center; gap:16px}
.login-link{font-size:13.5px; color:var(--text-soft); cursor:pointer; font-weight:700}
.login-link:hover{color:var(--rose-dark)}

/* Mobile navigation replaces the desktop links on smaller screens. */
.mobile-menu-toggle{display:none;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:9px 12px;border:2px solid var(--line);border-radius:12px;background:transparent;color:var(--text);font:700 13px 'Nunito',sans-serif;cursor:pointer;flex:none}
.mobile-menu-toggle svg{width:22px;height:22px;flex:none}
.mobile-menu-toggle .close-icon{display:none}
.mobile-menu-toggle[aria-expanded="true"] .menu-icon{display:none}
.mobile-menu-toggle[aria-expanded="true"] .close-icon{display:block}
.mobile-nav{position:absolute;top:100%;left:0;right:0;display:grid;gap:4px;padding:12px clamp(20px,4vw,52px) calc(18px + env(safe-area-inset-bottom));border-bottom:2px dashed var(--line);background:var(--cream);color:var(--text);max-height:calc(100vh - var(--nav-bottom,100px));max-height:calc(100dvh - var(--nav-bottom,100px));overflow-y:auto;overscroll-behavior:contain}
.mobile-nav[hidden]{display:none}
.mobile-nav button{width:100%;min-height:44px;padding:12px;text-align:left;background:transparent;border:0;border-radius:8px;color:inherit;font:700 15px 'Nunito',sans-serif;cursor:pointer}
.mobile-nav button:hover{background:var(--cream-2)}
.mobile-nav button.active,.mobile-nav .mobile-join{background:var(--rose-dark);color:#FFFFFF}
.mobile-nav .mobile-join{text-align:center;margin-top:8px}
.mobile-menu-toggle:focus-visible,.mobile-nav button:focus-visible{outline:3px solid var(--honey);outline-offset:3px}
@media(max-width:1240px){
  nav.links,.nav-actions>.login-link{display:none}
  .mobile-menu-toggle{display:inline-flex}
  .nav-row{gap:16px}
  .nav-row .brand{min-width:0;flex:1}
  .nav-row .brand .badge-mark{flex:none}
  .nav-actions{flex:none;gap:10px}
}
@media(max-width:620px){
  .nav-actions>.header-join{display:none}
  .nav-row{padding-top:12px;padding-bottom:12px;gap:12px}
  .nav-row .brand{gap:10px}
  .nav-row .brand-sub{max-width:160px;line-height:1.4}
}
@media(min-width:1241px){.mobile-nav{display:none}}

/* ---------- HERO ---------- */
.hero{background:var(--blush); position:relative; overflow:hidden}
.hero .wrap{padding-top:80px; padding-bottom:70px; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; position:relative; z-index:2}
.hero-copy h1{font-size:clamp(36px,5vw,62px); line-height:1.06; color:var(--berry)}
.hero-copy h1 .script{color:var(--rose-dark); font-size:1.15em}
.hero-copy p{margin:22px 0 32px; color:var(--text-soft); font-size:17px}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap}
.hero-photo-wrap{position:relative; height:460px}
.blob{position:absolute; inset:0; border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; overflow:hidden; box-shadow:var(--shadow)}
.blob img{width:100%; height:100%; object-fit:cover}
.sticker{position:absolute; background:var(--honey); color:#3A2600; font-family:'Baloo 2',sans-serif; font-weight:800; border-radius:50%; width:112px; height:112px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:13px; line-height:1.25; transform:rotate(-9deg); box-shadow:0 10px 24px rgba(0,0,0,.18); border:3px dashed rgba(255,255,255,.8); z-index:3}
.sticker.s1{top:-14px; right:6%}
.sticker.s2{bottom:6%; left:-20px; background:var(--sage-dark); color:#FFFFFF; transform:rotate(8deg)}
.hero-blob-bg{position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(232,93,117,.18), transparent 70%); top:-160px; left:-160px; z-index:1}

/* ---------- STAT STRIP ---------- */
.stat-strip{background:var(--cream-2); border-top:2px dashed var(--line); border-bottom:2px dashed var(--line)}
.stat-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr)}
.stat-strip div{padding:30px 22px; text-align:center; border-right:2px dashed var(--line)}
.stat-strip div:last-child{border-right:none}
.stat-strip .num{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:clamp(26px,3vw,38px); color:var(--rose-dark)}
.stat-strip .lbl{font-size:13px; color:var(--text-soft); font-weight:700; margin-top:6px}

/* ---------- POLAROID / TAPE CARDS ---------- */
.polaroid{background:#FFFFFF; padding:12px 12px 46px; border-radius:6px; box-shadow:var(--shadow); position:relative; transform:rotate(var(--rot,-2deg)); transition:transform .2s ease}
.polaroid:hover{transform:rotate(0deg) translateY(-4px)}
.polaroid img{border-radius:2px; aspect-ratio:1; object-fit:cover; width:100%}
.polaroid .cap{position:absolute; bottom:12px; left:14px; right:14px; font-family:'Caveat',cursive; font-weight:700; font-size:20px; color:var(--berry); text-align:center}
.tape{position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg); width:70px; height:26px; background:rgba(232,93,117,.75); border:1px solid rgba(255,255,255,.6)}

/* ---------- CARDS ---------- */
.grid{display:grid; gap:24px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:#FFFFFF; border:2px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .card{background:var(--cream-2)}}
:root[data-theme="dark"] .card{background:var(--cream-2)}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.card .thumb{aspect-ratio:4/3; background-size:cover; background-position:center}
.card .pad{padding:22px}
.card h4{font-size:19px; margin-bottom:8px; color:var(--berry)}
.card p{font-size:14px; color:var(--text-soft); margin:0 0 14px}
.meta-row{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--text-soft); border-top:2px dashed var(--line); padding-top:12px; margin-top:4px}

/* White cards keep dark text even when the surrounding page uses dark mode. */
.badge-card,.step,.testi,.polaroid{
  --text:#2D1F27;
  --text-soft:#58434E;
  --berry:#561D33;
  --berry-2:#7A2C49;
  --line:rgba(45,31,39,.14);
  color:var(--text);
}

/* ---------- BADGE / TIER CARDS ---------- */
.badge-card{position:relative; background:#FFFFFF; border:2px solid var(--line); border-radius:22px; padding:34px 30px; text-align:center}
.badge-card.featured{border-color:var(--rose-dark); background:linear-gradient(180deg,#FFFFFF, var(--blush) 140%)}
.badge-circle{width:88px; height:88px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:15px; color:#FFFFFF; border:4px dashed rgba(255,255,255,.85)}
.badge-card h3{font-size:22px; margin-bottom:6px; color:var(--berry)}
.badge-card .price{font-family:'Baloo 2',sans-serif; font-size:30px; font-weight:800; color:var(--rose-dark); margin:14px 0 4px}
.badge-card ul{list-style:none; padding:0; margin:20px 0 0; text-align:left; display:grid; gap:10px}
.badge-card li{font-size:14px; color:var(--text); display:flex; gap:10px}
.badge-card li::before{content:"✓"; color:var(--sage-dark); font-weight:800; flex:none}

/* ---------- TIMELINE ---------- */
.timeline{position:relative; margin-left:14px; border-left:3px dashed var(--rose); padding-left:38px}
.tl-item{position:relative; padding-bottom:44px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"🧁"; position:absolute; left:-58px; top:-4px; width:36px; height:36px; border-radius:50%; background:var(--cream-2); border:2px dashed var(--rose-dark); display:flex; align-items:center; justify-content:center; font-size:16px}
.tl-year{font-family:'Baloo 2',sans-serif; font-weight:800; color:var(--rose-dark); font-size:14px; margin-bottom:6px}
.tl-item h4{font-size:20px; margin-bottom:8px; color:var(--berry)}

/* ---------- STEPS ---------- */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
.step{background:#FFFFFF; border:2px dashed var(--line); border-radius:16px; padding:24px 20px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .step{background:var(--cream-2)}}
:root[data-theme="dark"] .step{background:var(--cream-2)}
.step .n{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:26px; color:var(--rose-dark); margin-bottom:10px}
.step h4{font-size:15.5px; margin-bottom:6px; color:var(--berry)}
.step p{font-size:13px; color:var(--text-soft); margin:0}

/* ---------- TABS ---------- */
.tabbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px}
.tabbar button{font-family:'Nunito',sans-serif; font-weight:800; font-size:13.5px; padding:11px 20px; border-radius:100px; border:2px solid var(--line); background:transparent; color:var(--text-soft); cursor:pointer; transition:all .15s ease}
.tabbar button:hover{background:rgba(232,93,117,0.1); color:var(--rose-dark)}
.tabbar button.active{background:var(--rose-dark); border-color:var(--rose-dark); color:#FFFFFF}
.tabpanel{display:none}
.tabpanel.active{display:block}

/* ---------- ACCORDION ---------- */
.faq-light{--text:#2D1F27;--text-soft:#58434E;--berry:#561D33;--line:rgba(45,31,39,.14)}
.accordion-item{border-bottom:2px dashed var(--line)}
.accordion-item:first-child{border-top:2px dashed var(--line)}
.acc-q{display:flex; justify-content:space-between; align-items:center; padding:20px 4px; cursor:pointer; font-size:16.5px; font-weight:700; font-family:'Baloo 2',sans-serif; color:var(--text)}
.acc-icon{font-family:'Baloo 2',sans-serif; font-size:20px; color:var(--text); transition:transform .25s ease; flex:none; margin-left:20px}
.accordion-item.open .acc-icon{transform:rotate(45deg)}
.acc-a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.accordion-item.open .acc-a{max-height:280px}
.acc-a p{padding:0 4px 20px; font-size:14.5px; color:var(--text); line-height:1.75; margin:0}

/* ---------- MASONRY GALLERY ---------- */
.masonry{columns:4 220px; column-gap:16px}
.masonry .m-item{break-inside:avoid; margin-bottom:16px; border-radius:14px; overflow:hidden; position:relative}
.masonry .m-item img{width:100%; display:block}
.masonry .m-item .m-cap{position:absolute; bottom:0; left:0; right:0; background:linear-gradient(0deg, rgba(45,15,26,.88), transparent); color:#FFFFFF; font-size:12.5px; padding:22px 12px 10px; font-weight:700}

/* ---------- TESTIMONIALS ---------- */
.testi{background:#FFFFFF; border:2px solid var(--line); border-radius:18px; padding:26px; width:320px}
.testi p{font-family:'Caveat',cursive; font-size:21px; color:var(--berry); line-height:1.5; margin:0 0 14px}
.testi strong{font-size:13px; font-family:'Nunito',sans-serif; color:var(--text-soft); display:block}

/* ---------- MARQUEE ---------- */
.marquee{overflow:hidden}
.marquee-track{display:flex; width:max-content; gap:20px; animation:scrollx 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- FORMS ---------- */
.field label{display:block; font-size:12.5px; font-weight:800; color:var(--text-soft); margin-bottom:8px}
.field .fake-input{border:2px dashed var(--line); background:#FFFFFF; padding:14px 16px; font-size:14.5px; color:var(--text); border-radius:12px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .field .fake-input{background:var(--cream-2); color:var(--text)}}
:root[data-theme="dark"] .field .fake-input{background:var(--cream-2); color:var(--text)}
.field{margin-bottom:16px}

/* ---------- TABLE ---------- */
table.compare{width:100%; border-collapse:collapse; background:#FFFFFF; border-radius:14px; overflow:hidden; border:2px solid var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) table.compare{background:var(--cream-2)}}
:root[data-theme="dark"] table.compare{background:var(--cream-2)}
table.compare th, table.compare td{padding:16px 20px; text-align:left; font-size:14.5px; border-bottom:2px dashed var(--line)}
table.compare thead th{background:var(--blush); font-family:'Baloo 2',sans-serif; font-weight:800; font-size:13.5px; color:var(--berry)}
table.compare td:first-child{color:var(--text-soft); font-weight:600}

/* ---------- FOOTER ---------- */
footer{background:var(--berry); color:var(--on-berry-soft)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding:60px 0 36px; font-size:14px}
.foot-grid .col-title{color:var(--on-berry); font-family:'Baloo 2',sans-serif; font-size:15px; font-weight:800; margin-bottom:14px}
.foot-grid a{display:block; padding:5px 0; cursor:pointer; color:var(--on-berry-soft); transition:color .15s}
.foot-grid a:hover{color:var(--honey)}
.foot-bottom{border-top:1px dashed var(--on-berry-line); padding:20px 0; display:flex; justify-content:space-between; font-size:12.5px; flex-wrap:wrap; gap:10px}

/* ---------- SPA PAGES SYSTEM ---------- */
.page{display:none}
.page.active{display:block}

/* ---------- BENTO (Dashboard) ---------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.bento .cell{background:#FFFFFF; border:2px solid var(--line); border-radius:18px; padding:26px; display:flex; flex-direction:column; justify-content:flex-end; min-height:150px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bento .cell{background:var(--cream-2)}}
:root[data-theme="dark"] .bento .cell{background:var(--cream-2)}
.bento .cell.big{grid-column:span 3; min-height:200px}
.bento .cell.wide{grid-column:span 2}
.bento .cell.narrow{grid-column:span 2}
.bento .cell.rose{background:var(--rose-dark); color:#FFFFFF}
.bento .cell.honey{background:var(--honey); color:#2A1A00}
.bento .cell.sage{background:var(--sage-dark); color:#FFFFFF}
.bento .lbl-title{font-size:16px; font-weight:800; font-family:'Baloo 2',sans-serif; margin-bottom:8px}
.bento .lbl-sub{font-size:13px; opacity:.92}

@media (max-width:980px){
  nav.links{display:none}
  .hero .wrap{grid-template-columns:1fr; padding-top:36px}
  .hero-photo-wrap{order:-1; height:320px; margin-top:0}
  .stat-strip .wrap{grid-template-columns:repeat(2,1fr)}
  .grid.cols-2, .grid.cols-3, .grid.cols-4{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .masonry{columns:2 200px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .cell.big,.bento .cell.wide,.bento .cell.narrow{grid-column:span 2}
  table.compare{overflow-x:auto; display:block}
}
@media (max-width:620px){
  .grid.cols-2, .grid.cols-3, .grid.cols-4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .masonry{columns:1 100%}
}