/* Habitually U membership pages */

/* ============================================================
   HABITUALLY U · public pages + membership gate
   Brand: white, navy, pale sage, dark green. No pink.
   All classes mbr- prefixed and avoid the app's global-reset /
   nav-handler substrings, so this lifts into the SPA cleanly.
   ============================================================ */
:root{
  --mbr-navy:#243447; --mbr-navy-deep:#1F3A5F; --mbr-navy-ink:#1e2d3d;
  --mbr-green:#2F5D50; --mbr-green-dk:#264c42;
  --mbr-sage:#7d9e77; --mbr-sage-dk:#4f6f54; --mbr-sage-lt:#DDE5D8;
  --mbr-pale:#f3f7f1; --mbr-pale-2:#eef3ec;
  --mbr-white:#ffffff; --mbr-ink:#5a6a78; --mbr-ink-soft:#7a8894;
  --mbr-line:#e7ece6;
  --mbr-r:22px; --mbr-r-sm:14px;
  --mbr-sh:0 6px 24px rgba(36,52,71,.07);
  --mbr-sh-h:0 16px 40px rgba(36,52,71,.13);
  --mbr-tr:all .22s cubic-bezier(.4,0,.2,1);
  --mbr-pad:clamp(20px,5vw,56px);
  --mbr-serif:Georgia,'Times New Roman',serif;
  --mbr-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.mbr-app,.mbr-app *{box-sizing:border-box;}
.mbr-app{font-family:var(--mbr-sans);color:var(--mbr-ink);background:var(--mbr-white);-webkit-font-smoothing:antialiased;line-height:1.6;}
.mbr-app h1,.mbr-app h2,.mbr-app h3{font-family:var(--mbr-serif);color:var(--mbr-navy);margin:0;letter-spacing:-.01em;}
.mbr-app p{margin:0;}
.mbr-app button{font-family:inherit;cursor:pointer;}
.mbr-app :focus-visible{outline:3px solid var(--mbr-sage);outline-offset:3px;border-radius:8px;}
.mbr-wrap{max-width:1160px;margin:0 auto;padding-left:var(--mbr-pad);padding-right:var(--mbr-pad);}
.mbr-tm{font-size:.5em;vertical-align:super;opacity:.7;font-family:var(--mbr-sans);}

/* ---------- nav ---------- */
.mbr-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--mbr-line);}
.mbr-nav-in{display:flex;align-items:center;gap:18px;padding:13px var(--mbr-pad);max-width:1160px;margin:0 auto;}
.mbr-logo{display:flex;align-items:center;gap:9px;font-family:var(--mbr-serif);font-weight:700;color:var(--mbr-navy);font-size:1.12rem;cursor:pointer;}
.mbr-logo-mark{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--mbr-sage),var(--mbr-green));display:grid;place-items:center;color:#fff;font-size:.9rem;}
.mbr-nav-links{display:flex;gap:4px;margin-left:8px;}
.mbr-nav-link{background:transparent;border:none;color:var(--mbr-navy);font-size:.9rem;font-weight:600;padding:8px 14px;border-radius:50px;transition:var(--mbr-tr);}
.mbr-nav-link:hover{background:var(--mbr-pale);}
.mbr-nav-link.is-on{background:var(--mbr-pale);color:var(--mbr-green);}
.mbr-nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.mbr-demo{display:flex;align-items:center;gap:7px;background:var(--mbr-pale);border:1px solid var(--mbr-sage-lt);border-radius:50px;padding:5px 6px 5px 12px;font-size:.72rem;font-weight:700;color:var(--mbr-sage-dk);}
.mbr-demo b{color:var(--mbr-navy);}
.mbr-demo button{background:var(--mbr-white);border:1px solid var(--mbr-sage-lt);border-radius:50px;font-size:.72rem;font-weight:700;color:var(--mbr-navy);padding:4px 11px;}
.mbr-auth{display:flex;gap:8px;}
.mbr-login{background:transparent!important;color:var(--mbr-navy)!important;border:1.5px solid var(--mbr-sage-lt)!important;border-radius:50px;font-weight:700;font-size:.83rem;padding:8px 16px;transition:var(--mbr-tr);}
.mbr-login:hover{border-color:var(--mbr-sage)!important;background:var(--mbr-pale)!important;}
.mbr-join{background:var(--mbr-green)!important;color:#fff!important;border:none;border-radius:50px;font-weight:700;font-size:.83rem;padding:9px 18px;box-shadow:0 4px 14px rgba(47,93,80,.22);transition:var(--mbr-tr);}
.mbr-join:hover{background:var(--mbr-green-dk)!important;transform:translateY(-1px);}
.mbr-member-chip{display:inline-flex;align-items:center;gap:6px;background:var(--mbr-pale);border:1px solid var(--mbr-sage-lt);color:var(--mbr-green);border-radius:50px;font-weight:700;font-size:.82rem;padding:8px 15px;}

/* ---------- page / hero ---------- */
.mbr-page{display:none;}
.mbr-page.is-active{display:block;}
.mbr-hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 120% at 88% -10%,rgba(125,158,119,.34) 0%,transparent 52%),
             linear-gradient(150deg,var(--mbr-navy-deep) 0%,var(--mbr-navy) 60%,var(--mbr-navy-ink) 100%);}
.mbr-hero-in{position:relative;z-index:2;text-align:center;padding:clamp(56px,9vw,104px) 0 clamp(50px,7vw,86px);}
.mbr-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:50px;padding:6px 16px 6px 13px;font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#dfe9e0;margin-bottom:22px;}
.mbr-hero h1{color:#fff;font-size:clamp(2.3rem,6vw,3.9rem);font-weight:700;line-height:1.05;}
.mbr-hero-line{font-family:var(--mbr-serif);font-style:italic;font-size:clamp(1.05rem,2.1vw,1.4rem);color:#eaf1e6;margin:16px auto 0;max-width:640px;}
.mbr-hero-desc{font-size:clamp(.98rem,1.5vw,1.08rem);color:rgba(255,255,255,.8);margin:18px auto 0;max-width:600px;font-weight:300;}
.mbr-hero-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:32px;}
.mbr-scallop{display:block;width:100%;height:24px;color:var(--mbr-white);}

/* ---------- sections ---------- */
.mbr-sec{padding:clamp(46px,7vw,84px) 0;}
.mbr-sec.alt{background:var(--mbr-pale);}
.mbr-kicker{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mbr-sage-dk);text-align:center;margin-bottom:10px;}
.mbr-h2{font-size:clamp(1.6rem,3.4vw,2.35rem);font-weight:700;text-align:center;line-height:1.16;}
.mbr-lead{font-size:1.02rem;color:var(--mbr-ink);text-align:center;max-width:620px;margin:14px auto 0;line-height:1.7;}

/* ---------- buttons ---------- */
.mbr-btn{border:none;border-radius:50px;font-weight:700;font-size:.9rem;padding:13px 26px;transition:var(--mbr-tr);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;}
.mbr-btn-primary{background:var(--mbr-green)!important;color:#fff!important;box-shadow:0 6px 18px rgba(47,93,80,.24);}
.mbr-btn-primary:hover{background:var(--mbr-green-dk)!important;transform:translateY(-2px);box-shadow:var(--mbr-sh-h);}
.mbr-btn-light{background:#fff!important;color:var(--mbr-green)!important;box-shadow:0 6px 18px rgba(0,0,0,.14);}
.mbr-btn-light:hover{transform:translateY(-2px);}
.mbr-btn-outline{background:transparent!important;color:var(--mbr-navy)!important;border:1.5px solid var(--mbr-sage-lt)!important;}
.mbr-btn-outline:hover{border-color:var(--mbr-sage)!important;background:var(--mbr-pale)!important;}
.mbr-btn-ghost{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.45)!important;}
.mbr-btn-ghost:hover{background:rgba(255,255,255,.16)!important;}
.mbr-lockico{font-size:.82em;opacity:.9;}

/* ---------- cards ---------- */
.mbr-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));margin-top:42px;}
.mbr-grid.cols2{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));}
.mbr-panel{position:relative;background:var(--mbr-pale);border:1px solid var(--mbr-sage-lt);border-radius:var(--mbr-r);padding:24px 22px;display:flex;flex-direction:column;gap:11px;transition:var(--mbr-tr);box-shadow:var(--mbr-sh);}
.mbr-panel:hover{transform:translateY(-4px);box-shadow:var(--mbr-sh-h);border-color:var(--mbr-sage);}
.mbr-ic{width:54px;height:54px;border-radius:16px;background:var(--mbr-white);border:1px solid var(--mbr-sage-lt);display:grid;place-items:center;font-size:1.7rem;}
.mbr-panel h3{font-size:1.12rem;line-height:1.25;}
.mbr-panel p{font-size:.9rem;color:var(--mbr-ink);line-height:1.55;flex:1;}
.mbr-panel .mbr-act{margin-top:6px;}
/* locked treatment — aspirational, not blocked */
.mbr-lock-flag{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:5px;background:var(--mbr-white);border:1px solid var(--mbr-sage-lt);color:var(--mbr-sage-dk);border-radius:50px;padding:4px 10px 4px 8px;font-size:.64rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
.mbr-act-btn{width:100%;justify-content:center;background:var(--mbr-white)!important;color:var(--mbr-green)!important;border:1.5px solid var(--mbr-sage)!important;border-radius:50px;font-weight:700;font-size:.85rem;padding:11px 16px;transition:var(--mbr-tr);}
.mbr-act-btn:hover{background:var(--mbr-green)!important;color:#fff!important;}
.mbr-act-btn.solid{background:var(--mbr-green)!important;color:#fff!important;border-color:var(--mbr-green)!important;}
.mbr-act-btn.solid:hover{background:var(--mbr-green-dk)!important;}

/* ---------- "what is" two-up ---------- */
.mbr-explain{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;}
.mbr-explain .mbr-explain-art{background:var(--mbr-pale);border:1px solid var(--mbr-sage-lt);border-radius:var(--mbr-r);min-height:240px;display:grid;place-items:center;font-size:5rem;box-shadow:var(--mbr-sh);}
.mbr-explain h2{text-align:left;font-size:clamp(1.5rem,3vw,2.1rem);}
.mbr-explain p{font-size:1.02rem;color:var(--mbr-ink);line-height:1.75;margin-top:14px;}

/* ---------- journey steps (a real ordered sequence) ---------- */
.mbr-journey-ex{background:var(--mbr-white);border:1px solid var(--mbr-sage-lt);border-left:4px solid var(--mbr-sage);border-radius:var(--mbr-r-sm);padding:20px 24px;max-width:720px;margin:0 auto 40px;font-size:1.02rem;color:var(--mbr-navy);font-family:var(--mbr-serif);font-style:italic;line-height:1.6;}
.mbr-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step;}
.mbr-step{background:var(--mbr-pale);border:1px solid var(--mbr-sage-lt);border-radius:var(--mbr-r);padding:26px 22px;text-align:center;}
.mbr-step-n{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;background:var(--mbr-green);color:#fff;display:grid;place-items:center;font-family:var(--mbr-serif);font-size:1.2rem;font-weight:700;}
.mbr-step h3{font-size:1.05rem;}
.mbr-step p{font-size:.88rem;color:var(--mbr-ink);margin-top:7px;}

/* ---------- example rhythm cards ---------- */
.mbr-rh{background:var(--mbr-pale);border:1px solid var(--mbr-sage-lt);border-radius:var(--mbr-r);padding:24px 22px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--mbr-sh);transition:var(--mbr-tr);}
.mbr-rh:hover{transform:translateY(-4px);box-shadow:var(--mbr-sh-h);}
.mbr-rh-head{display:flex;align-items:center;gap:12px;}
.mbr-rh-ic{width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid var(--mbr-sage-lt);display:grid;place-items:center;font-size:1.4rem;}
.mbr-rh h3{font-size:1.1rem;}
.mbr-rh ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.mbr-rh li{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;color:var(--mbr-ink);}
.mbr-rh li::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--mbr-sage);margin-top:7px;}

/* ---------- storybook preview ---------- */
.mbr-book{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:center;background:var(--mbr-pale);border:1px solid var(--mbr-sage-lt);border-radius:var(--mbr-r);padding:28px;box-shadow:var(--mbr-sh);}
.mbr-book-cover{aspect-ratio:3/4;border-radius:var(--mbr-r-sm);background:linear-gradient(160deg,#eaf2f8,#fff);border:1px solid var(--mbr-sage-lt);display:grid;place-items:center;gap:8px;text-align:center;padding:20px;}
.mbr-book-cover span{font-size:3.4rem;}
.mbr-book-cover b{font-family:var(--mbr-serif);color:var(--mbr-navy);font-size:1.1rem;}
.mbr-book h3{font-size:1.4rem;}
.mbr-book p{color:var(--mbr-ink);margin-top:10px;line-height:1.7;}
.mbr-book .mbr-act{display:flex;gap:11px;flex-wrap:wrap;margin-top:18px;}

/* ---------- membership CTA band ---------- */
.mbr-cta{background:linear-gradient(135deg,var(--mbr-green) 0%,var(--mbr-navy) 100%);color:#fff;text-align:center;border-radius:var(--mbr-r);overflow:hidden;position:relative;padding:clamp(40px,6vw,64px) clamp(24px,5vw,56px);box-shadow:var(--mbr-sh-h);}
.mbr-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 130% at 85% -20%,rgba(125,158,119,.4),transparent 60%);pointer-events:none;}
.mbr-cta h2{color:#fff;font-size:clamp(1.5rem,3.2vw,2.15rem);position:relative;max-width:620px;margin:0 auto;}
.mbr-cta p{color:rgba(255,255,255,.85);max-width:560px;margin:14px auto 0;position:relative;font-size:1rem;line-height:1.7;}
.mbr-cta .mbr-act{margin-top:26px;position:relative;}

/* ---------- footer ---------- */
.mbr-foot{background:var(--mbr-navy);color:rgba(255,255,255,.7);padding:36px 0;text-align:center;font-size:.82rem;}
.mbr-foot b{color:#fff;font-family:var(--mbr-serif);}

/* ---------- modal ---------- */
.mbr-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(30,33,40,.55);backdrop-filter:blur(4px);}
.mbr-modal.is-open{display:flex;}
.mbr-modal-box{background:#fff;border-radius:var(--mbr-r);max-width:460px;width:100%;padding:32px 30px 28px;box-shadow:0 30px 80px rgba(0,0,0,.32);position:relative;text-align:center;}
.mbr-modal-box.wide{max-width:560px;text-align:left;}
.mbr-modal-mark{width:60px;height:60px;margin:0 auto 16px;border-radius:50%;background:var(--mbr-pale);border:1px solid var(--mbr-sage-lt);display:grid;place-items:center;font-size:1.7rem;}
.mbr-modal h3{font-size:1.4rem;line-height:1.25;}
.mbr-modal-text{color:var(--mbr-ink);font-size:.95rem;line-height:1.65;margin:12px 0 0;}
.mbr-modal-btns{display:flex;flex-direction:column;gap:10px;margin-top:24px;}
.mbr-modal-btns .mbr-btn{justify-content:center;width:100%;}
.mbr-modal-close{position:absolute;top:14px;right:15px;background:var(--mbr-pale);border:1px solid var(--mbr-sage-lt);width:34px;height:34px;border-radius:50%;font-size:1rem;color:var(--mbr-navy);display:grid;place-items:center;}
.mbr-modal-keep{background:transparent!important;color:var(--mbr-ink-soft)!important;border:none;font-weight:700;font-size:.86rem;padding:8px;}
.mbr-modal-keep:hover{color:var(--mbr-navy)!important;}

/* preview-modal body */
.mbr-pv-emoji{font-size:3rem;text-align:center;}
.mbr-pv-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.mbr-pv-list li{background:var(--mbr-pale);border:1px solid var(--mbr-sage-lt);border-radius:50px;padding:6px 13px;font-size:.82rem;font-weight:600;color:var(--mbr-sage-dk);}

/* ---------- toast ---------- */
.mbr-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(24px);z-index:140;background:var(--mbr-navy);color:#fff;padding:13px 22px;border-radius:50px;font-weight:700;font-size:.88rem;box-shadow:0 12px 34px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:9px;}
.mbr-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .mbr-explain{grid-template-columns:1fr;gap:24px;}
  .mbr-explain h2{text-align:center;}.mbr-explain p{text-align:center;}
  .mbr-steps{grid-template-columns:1fr;}
  .mbr-book{grid-template-columns:1fr;}.mbr-book-cover{max-width:260px;margin:0 auto;}
  .mbr-nav-links{display:none;}
}
@media(max-width:560px){
  .mbr-demo{display:none;}
  .mbr-hero-cta{flex-direction:column;}.mbr-hero-cta .mbr-btn{width:100%;justify-content:center;}
}
@media(prefers-reduced-motion:reduce){.mbr-app *{animation:none!important;transition:none!important;}}

/* in-app overrides */
.mbr-modal{z-index:3000!important;} .mbr-toast{z-index:3000!important;}