/* ==========================================================================
   MomBoss About "Showroom" — Ticket D1.3 (TOKENS-LIVE v2, 19 Jul 2026)

   The illustrated soul-layer showcase: hero-gradient band with paper-cut
   clouds + drifting rose-gold petals, pink->rose-gold gradient headline,
   Her Business / Her Growth / Her Life pillar cards, paper-cloud dividers,
   and the "Find your kind of store" showroom grid (prices rendered by the
   template from mb_get_packages_catalog(), never hardcoded here).

   Tokens only; mood washes are color-mixes of live tokens. Illustration
   frames content, never sits behind body copy. Loaded raw + ?v=filemtime
   via mb-brand-tokens.php (wp_head:154). Cloud/petal keyframes are shared
   with mb-footer.css (both assets load globally).
   ========================================================================== */

/* --- 1. Illustrated hero ------------------------------------------------ */
.mb-about-hero2{position:relative;overflow:hidden;background:linear-gradient(160deg,#FFE0EC 0%,#E8D5F5 52%,#D1C4E9 100%);padding:64px 0 96px;text-align:center}
.mb-about-hero2__cloud{position:absolute;border-radius:var(--mb-radius-full,9999px);background:color-mix(in srgb,var(--mb-white,#FFFFFF) 58%,transparent);pointer-events:none;animation:mbCloudDrift 36s var(--mb-ease,cubic-bezier(.4,0,.2,1)) infinite alternate}
.mb-about-hero2__cloud--1{top:34px;left:7%;width:210px;height:52px}
.mb-about-hero2__cloud--1::before,.mb-about-hero2__cloud--2::before{content:"";position:absolute;top:-46%;left:24%;width:50%;height:120%;border-radius:var(--mb-radius-full,9999px);background:inherit}
.mb-about-hero2__cloud--2{bottom:56px;right:6%;width:170px;height:44px;animation-duration:44s;animation-direction:alternate-reverse}
.mb-about-hero2__petals{position:absolute;inset:0;pointer-events:none}
.mb-about-hero2__petals span{position:absolute;top:-40px;opacity:0;color:var(--mb-rose-gold,#B76E79);animation:mbPetalDrift 16s linear infinite}
.mb-about-hero2__petals span:nth-child(1){left:12%;font-size:18px;animation-delay:0s}
.mb-about-hero2__petals span:nth-child(2){left:30%;font-size:13px;animation-delay:6s;animation-duration:20s}
.mb-about-hero2__petals span:nth-child(3){left:52%;font-size:21px;animation-delay:3s;animation-duration:15s}
.mb-about-hero2__petals span:nth-child(4){left:71%;font-size:14px;animation-delay:9s;animation-duration:21s}
.mb-about-hero2__petals span:nth-child(5){left:88%;font-size:19px;animation-delay:4.5s;animation-duration:17s}
.mb-about-hero2 .mb-container{position:relative;z-index:2}
.mb-about-hero2__kicker{display:inline-block;font-family:var(--mb-font-body,'Poppins',sans-serif);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mb-rose-gold-deep,#C07C88);margin-bottom:12px}
.mb-about-hero2__title{font-family:var(--mb-font-display,'Playfair Display',serif);font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.16;margin:0 0 14px;background:linear-gradient(100deg,var(--mb-pink,#E91E63) 25%,var(--mb-rose-gold,#B76E79) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mb-about-hero2__sub{max-width:620px;margin:0 auto;color:color-mix(in srgb,var(--mb-ink,#3D2630) 84%,transparent);font-size:1.02rem;line-height:1.7}
.mb-about-hero2__wave{position:absolute;left:0;right:0;bottom:-1px;height:64px;line-height:0;z-index:1}
.mb-about-hero2__wave svg{display:block;width:100%;height:100%}

/* --- 2. Paper-cloud section divider ------------------------------------ */
.mb-cloud-divider{height:70px;line-height:0;overflow:hidden}
.mb-cloud-divider svg{display:block;width:100%;height:100%}

/* --- 3. Three Pillars: warm illustrated cards on the LIGHT system ------ */
.mb-about-pillars2{display:grid;grid-template-columns:1fr;gap:var(--mb-space-lg,24px);margin-top:var(--mb-space-lg,24px)}
@media(min-width:820px){.mb-about-pillars2{grid-template-columns:repeat(3,1fr)}}
.mb-pillar2{position:relative;background:var(--mb-white,#FFFFFF);border-radius:var(--mb-radius-lg,16px);box-shadow:var(--mb-shadow-card,0 2px 8px rgba(0,0,0,.06));padding:30px 24px 26px;text-align:center;transition:transform var(--mb-duration,250ms) var(--mb-ease,cubic-bezier(.4,0,.2,1)),box-shadow var(--mb-duration,250ms) var(--mb-ease,cubic-bezier(.4,0,.2,1));overflow:hidden}
.mb-pillar2:hover{transform:translateY(-3px);box-shadow:var(--mb-shadow-lg,0 8px 30px rgba(233,30,99,.12))}
.mb-pillar2::before{content:"";position:absolute;top:0;left:0;right:0;height:88px;opacity:.55;pointer-events:none}
.mb-pillar2--business::before{background:linear-gradient(180deg,color-mix(in srgb,var(--mb-pink-soft,#F48FB1) 34%,var(--mb-white,#FFFFFF)),transparent)}
.mb-pillar2--growth::before{background:linear-gradient(180deg,color-mix(in srgb,var(--mb-rose-gold-light,#E0BFB8) 44%,var(--mb-white,#FFFFFF)),transparent)}
.mb-pillar2--life::before{background:linear-gradient(180deg,color-mix(in srgb,var(--mb-purple-light,#CE93D8) 26%,var(--mb-white,#FFFFFF)),transparent)}
.mb-pillar2__icon{position:relative;width:64px;height:64px;margin:0 auto 14px;border-radius:var(--mb-radius-full,9999px);display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:var(--mb-white,#FFFFFF)}
.mb-pillar2--business .mb-pillar2__icon{background:var(--mb-gradient-primary,linear-gradient(135deg,#E91E63,#9C27B0))}
.mb-pillar2--growth .mb-pillar2__icon{background:var(--mb-gradient-rosegold,linear-gradient(135deg,#B76E79,#E0BFB8))}
.mb-pillar2--life .mb-pillar2__icon{background:var(--mb-gradient-soft,linear-gradient(135deg,#FFE0EC,#E8D5F5))}
.mb-pillar2__title{position:relative;font-family:var(--mb-font-display,'Playfair Display',serif);font-size:1.28rem;color:var(--mb-heading-plum,#7A2E45);margin:0 0 8px}
.mb-pillar2__desc{position:relative;font-size:.9rem;line-height:1.65;color:color-mix(in srgb,var(--mb-ink,#3D2630) 80%,transparent)}

/* --- 4. "Find your kind of store" showroom grid ------------------------- */
.mb-showroom{background:linear-gradient(180deg,var(--mb-off-white,#FFF8FA),var(--mb-bg,#FFF5F7))}
.mb-showroom__grid{display:grid;grid-template-columns:1fr;gap:var(--mb-space-lg,24px);margin-top:var(--mb-space-lg,24px)}
@media(min-width:640px){.mb-showroom__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.mb-showroom__grid{grid-template-columns:repeat(3,1fr)}}
.mb-showcard{display:flex;flex-direction:column;background:var(--mb-white,#FFFFFF);border-radius:var(--mb-radius-lg,16px);box-shadow:var(--mb-shadow-card,0 2px 8px rgba(0,0,0,.06));overflow:hidden;transition:transform var(--mb-duration,250ms) var(--mb-ease,cubic-bezier(.4,0,.2,1)),box-shadow var(--mb-duration,250ms) var(--mb-ease,cubic-bezier(.4,0,.2,1))}
.mb-showcard:hover{transform:translateY(-3px);box-shadow:var(--mb-shadow-lg,0 8px 30px rgba(233,30,99,.12))}
/* Illustrated header — ART-PENDING: gradient washes of live tokens until
   the design-engine pack lands; the emoji is the placeholder motif. */
.mb-showcard__art{position:relative;height:120px;display:flex;align-items:center;justify-content:center;font-size:2.6rem}
.mb-showcard__art--kitchen{background:linear-gradient(135deg,color-mix(in srgb,var(--mb-pink-soft,#F48FB1) 42%,var(--mb-white,#FFFFFF)),color-mix(in srgb,var(--mb-pink-light,#FF6B9D) 30%,var(--mb-white,#FFFFFF)))}
.mb-showcard__art--studio{background:linear-gradient(135deg,color-mix(in srgb,var(--mb-teal,#26A69A) 20%,var(--mb-white,#FFFFFF)),color-mix(in srgb,var(--mb-teal,#26A69A) 8%,var(--mb-white,#FFFFFF)))}
.mb-showcard__art--boutique{background:var(--mb-gradient-soft,linear-gradient(135deg,#FFE0EC,#E8D5F5))}
.mb-showcard__art--occasions{background:linear-gradient(135deg,color-mix(in srgb,var(--mb-purple-light,#CE93D8) 32%,var(--mb-white,#FFFFFF)),color-mix(in srgb,var(--mb-pink-soft,#F48FB1) 26%,var(--mb-white,#FFFFFF)))}
.mb-showcard__art--pod{background:var(--mb-gradient-rosegold,linear-gradient(135deg,#B76E79,#E0BFB8))}
.mb-showcard__art--dropship{background:linear-gradient(135deg,color-mix(in srgb,var(--mb-rose-gold-light,#E0BFB8) 55%,var(--mb-white,#FFFFFF)),color-mix(in srgb,var(--mb-rose-gold,#B76E79) 30%,var(--mb-white,#FFFFFF)))}
.mb-showcard__badge{position:absolute;top:10px;left:12px;background:color-mix(in srgb,var(--mb-white,#FFFFFF) 88%,transparent);color:var(--mb-pink,#E91E63);border-radius:var(--mb-radius-full,9999px);padding:4px 12px;font-family:var(--mb-font-body,'Poppins',sans-serif);font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.mb-showcard__body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.mb-showcard__name{font-family:var(--mb-font-display,'Playfair Display',serif);font-size:1.22rem;color:var(--mb-heading-plum,#7A2E45);margin:0 0 6px}
.mb-showcard__desc{font-size:.86rem;line-height:1.6;color:color-mix(in srgb,var(--mb-ink,#3D2630) 78%,transparent);margin:0 0 14px;flex:1}
.mb-showcard__foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mb-showcard__price{font-family:var(--mb-font-body,'Poppins',sans-serif);font-weight:700;color:var(--mb-pink,#E91E63);font-size:.95rem}
.mb-showcard__price small{display:block;font-weight:500;color:color-mix(in srgb,var(--mb-ink,#3D2630) 62%,transparent);font-size:.68rem}
.mb-showcard__cta{white-space:nowrap;background:none;border:1.5px solid var(--mb-pink,#E91E63);color:var(--mb-pink,#E91E63);border-radius:var(--mb-radius-full,9999px);padding:8px 16px;font-family:var(--mb-font-body,'Poppins',sans-serif);font-size:.8rem;font-weight:600;text-decoration:none;transition:background var(--mb-duration-fast,150ms) var(--mb-ease,cubic-bezier(.4,0,.2,1)),color var(--mb-duration-fast,150ms) var(--mb-ease,cubic-bezier(.4,0,.2,1))}
.mb-showcard__cta:hover{background:var(--mb-pink,#E91E63);color:var(--mb-white,#FFFFFF)}

/* --- 5. Section header treatment shared on this page -------------------- */
.mb-about-kicker{display:block;text-align:center;font-family:var(--mb-font-body,'Poppins',sans-serif);font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--mb-rose-gold-deep,#C07C88);margin-bottom:6px}
.mb-about-h2{text-align:center;font-family:var(--mb-font-display,'Playfair Display',serif);font-size:clamp(1.5rem,3vw,2.1rem);color:var(--mb-heading-plum,#7A2E45);margin:0 0 10px}
.mb-about-lede{text-align:center;max-width:620px;margin:0 auto var(--mb-space-lg,24px);color:color-mix(in srgb,var(--mb-ink,#3D2630) 78%,transparent);font-size:.96rem;line-height:1.7}

/* --- 6. Preserved sections (founders / AI team / CTA row) ---------------
   These classes never had styles anywhere in the theme — the old About page
   rendered them as raw stacked text. Styled here for the first time. */
.mb-about-founders{margin-top:var(--mb-space-md,16px)}
.mb-about-founder{display:flex;gap:20px;align-items:flex-start;background:var(--mb-white,#FFFFFF);border-radius:var(--mb-radius-lg,16px);box-shadow:var(--mb-shadow-card,0 2px 8px rgba(0,0,0,.06));padding:26px}
.mb-about-founder__avatar{flex-shrink:0;width:72px;height:72px;border-radius:var(--mb-radius-full,9999px);display:flex;align-items:center;justify-content:center;color:var(--mb-white,#FFFFFF);font-family:var(--mb-font-display,'Playfair Display',serif);font-size:1.15rem;font-weight:700}
.mb-about-founder__info h3{font-family:var(--mb-font-display,'Playfair Display',serif);color:var(--mb-heading-plum,#7A2E45);margin:0 0 2px;font-size:1.2rem}
.mb-about-founder__role{color:var(--mb-pink,#E91E63);font-size:.8rem;font-weight:600;margin:0 0 10px}
.mb-about-founder__info p{font-size:.9rem;line-height:1.65;color:color-mix(in srgb,var(--mb-ink,#3D2630) 80%,transparent);margin:0 0 10px}
@media(max-width:560px){.mb-about-founder{flex-direction:column;align-items:center;text-align:center}}

.mb-about-agents{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--mb-space-md,16px);margin-top:var(--mb-space-md,16px)}
@media(min-width:820px){.mb-about-agents{grid-template-columns:repeat(3,1fr)}}
.mb-about-agent{background:var(--mb-off-white,#FFF8FA);border:1px solid color-mix(in srgb,var(--mb-pink,#E91E63) 10%,transparent);border-radius:var(--mb-radius-lg,16px);padding:22px 16px;text-align:center;transition:transform var(--mb-duration,250ms) var(--mb-ease,cubic-bezier(.4,0,.2,1)),box-shadow var(--mb-duration,250ms) var(--mb-ease,cubic-bezier(.4,0,.2,1))}
.mb-about-agent:hover{transform:translateY(-3px);box-shadow:var(--mb-shadow-md,0 4px 12px rgba(233,30,99,.1))}
.mb-about-agent__avatar{width:56px;height:56px;margin:0 auto 10px;border-radius:var(--mb-radius-full,9999px);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--mb-white,#FFFFFF)}
.mb-about-agent__name{font-family:var(--mb-font-display,'Playfair Display',serif);color:var(--mb-heading-plum,#7A2E45);margin:0 0 2px;font-size:1.05rem}
.mb-about-agent__role{color:var(--mb-pink,#E91E63);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
.mb-about-agent__desc{font-size:.8rem;line-height:1.55;color:color-mix(in srgb,var(--mb-ink,#3D2630) 74%,transparent);margin:0}

.mb-about-cta-row{display:grid;grid-template-columns:1fr;gap:var(--mb-space-lg,24px)}
@media(min-width:820px){.mb-about-cta-row{grid-template-columns:repeat(2,1fr)}}
.mb-about-cta-card{background:var(--mb-white,#FFFFFF);border-radius:var(--mb-radius-lg,16px);box-shadow:var(--mb-shadow-card,0 2px 8px rgba(0,0,0,.06));padding:26px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.mb-about-cta-card h3{font-family:var(--mb-font-display,'Playfair Display',serif);color:var(--mb-heading-plum,#7A2E45);margin:0;font-size:1.15rem}
.mb-about-cta-card p{font-size:.88rem;line-height:1.65;color:color-mix(in srgb,var(--mb-ink,#3D2630) 80%,transparent);margin:0;flex:1}

/* --- 7. Founding story + community CTAs + feature trio (D2.2) ----------- */
.mb-about-story p{font-size:.92rem;line-height:1.75;color:color-mix(in srgb,var(--mb-ink,#3D2630) 84%,transparent);margin:0 0 14px}
.mb-about-community{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--mb-space-md,16px)}
.mb-about-community__btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--mb-radius-full,9999px);padding:11px 20px;font-family:var(--mb-font-body,'Poppins',sans-serif);font-size:.84rem;font-weight:600;text-decoration:none;transition:transform var(--mb-duration,250ms) var(--mb-ease-bounce,cubic-bezier(.34,1.56,.64,1)),box-shadow var(--mb-duration,250ms) var(--mb-ease,cubic-bezier(.4,0,.2,1))}
.mb-about-community__btn:hover{transform:translateY(-3px);box-shadow:var(--mb-shadow-md,0 4px 12px rgba(233,30,99,.1))}
.mb-about-community__btn--fb{background:var(--mb-gradient-primary,linear-gradient(135deg,#E91E63,#9C27B0));color:var(--mb-white,#FFFFFF)}
.mb-about-community__btn--wa{background:var(--mb-white,#FFFFFF);border:2px solid var(--mb-teal,#26A69A);color:var(--mb-teal,#26A69A)}

.mb-about-features{display:grid;grid-template-columns:1fr;gap:var(--mb-space-lg,24px);margin-top:var(--mb-space-lg,24px)}
@media(min-width:820px){.mb-about-features{grid-template-columns:repeat(3,1fr)}}
.mb-about-feature{background:var(--mb-white,#FFFFFF);border-radius:var(--mb-radius-lg,16px);box-shadow:var(--mb-shadow-card,0 2px 8px rgba(0,0,0,.06));padding:26px 22px;display:flex;flex-direction:column;align-items:flex-start;transition:transform var(--mb-duration,250ms) var(--mb-ease,cubic-bezier(.4,0,.2,1)),box-shadow var(--mb-duration,250ms) var(--mb-ease,cubic-bezier(.4,0,.2,1))}
.mb-about-feature:hover{transform:translateY(-3px);box-shadow:var(--mb-shadow-lg,0 8px 30px rgba(233,30,99,.12))}
.mb-about-feature__icon{width:52px;height:52px;border-radius:var(--mb-radius-full,9999px);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--mb-white,#FFFFFF);margin-bottom:12px}
.mb-about-feature h3{font-family:var(--mb-font-display,'Playfair Display',serif);color:var(--mb-heading-plum,#7A2E45);font-size:1.12rem;margin:0 0 8px}
.mb-about-feature p{font-size:.86rem;line-height:1.65;color:color-mix(in srgb,var(--mb-ink,#3D2630) 78%,transparent);margin:0 0 12px;flex:1}
.mb-about-feature a{color:var(--mb-pink,#E91E63);font-family:var(--mb-font-body,'Poppins',sans-serif);font-size:.84rem;font-weight:600;text-decoration:none}
.mb-about-close{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--mb-pink-soft,#F48FB1) 14%,var(--mb-white,#FFFFFF)))}

@media (prefers-reduced-motion:reduce){
	.mb-about-hero2__cloud{animation:none}
	.mb-about-hero2__petals span{animation:none;opacity:0}
	.mb-pillar2,.mb-showcard,.mb-about-agent,.mb-about-feature{transition:none}
}