:root{color-scheme:light;--ink:#33204A;--muted:#5E4C78;--accent:#8C6A2A;--accent-soft:#C9A45C;--paper:#F6F1E8;--card:#FBF8F2;--line:#E3D9C8}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:82px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body[data-brand="mo-yaa-alt"]{--ink:#263B37;--muted:#526B63;--accent:#94653D;--accent-soft:#C9945B;--paper:#F1F1E9;--card:#FAFAF4;--line:#D9DDD1}
body[data-brand="shea-luxury"]{--ink:#49372D;--muted:#735E51;--accent:#9B6349;--accent-soft:#C18B68;--paper:#F4EDE4;--card:#FBF7F1;--line:#E2D3C4}
a{color:inherit}
a:focus-visible{outline:3px solid var(--accent-soft);outline-offset:4px}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px clamp(18px,5vw,68px);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(12px)}
.wordmark{font-family:"Cormorant Garamond",Georgia,serif;font-size:23px;font-weight:700;letter-spacing:.07em;color:var(--accent);text-decoration:none}
.nav{display:flex;align-items:center;gap:clamp(10px,2.4vw,28px);font-size:12px}
.nav a{text-decoration:none;color:var(--muted)}
.nav .nav-cta{padding:9px 13px;background:var(--ink);color:var(--card)}
.wrap{width:min(1120px,100% - 40px);margin:0 auto}
.hero{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;padding:56px 0 64px}
.eyebrow{margin:0;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
h1,h2,.display{font-family:"Cormorant Garamond",Georgia,serif}
h1{margin:13px 0 15px;color:var(--accent);font-size:clamp(58px,12vw,112px);font-weight:600;line-height:.9;letter-spacing:-.02em}
.hero-copy{max-width:560px;color:var(--muted);font-size:15px;line-height:1.75}
.hero-copy strong{color:var(--ink)}
.badge{display:inline-flex;align-items:center;gap:8px;margin:6px 0 18px;padding:8px 11px;background:var(--card);border:1px solid var(--line);color:var(--accent);font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 15px;background:var(--ink);color:var(--card);font-size:10px;font-weight:700;letter-spacing:.08em;text-decoration:none;text-transform:uppercase}
.button.secondary{border:1px solid var(--line);background:transparent;color:var(--ink)}
.visual{position:relative;max-width:580px;margin:0 auto}
.visual>img{display:block;width:100%;height:auto}
.jar-label{position:absolute;left:35.5%;top:34%;width:29%;height:37%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:5px;background:var(--label,#F5F0E7);color:var(--ink);text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.brand-on-label{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(12px,2.6vw,23px);font-weight:600;line-height:.95;color:var(--accent)}
.label-rule{width:24%;height:1px;background:var(--accent-soft)}
.product-name{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(9px,1.8vw,15px);font-style:italic;line-height:1}
.product-type{font-size:clamp(4px,.75vw,7px);font-weight:600;letter-spacing:.16em}
.label-detail{font-size:clamp(4px,.66vw,6px);letter-spacing:.09em}
.visual-caption{margin:8px 0 0;color:var(--muted);font-size:11px;line-height:1.5;text-align:center}
.section{padding:44px 0;border-top:1px solid var(--line)}
.section h2{margin:8px 0 10px;font-size:clamp(33px,6vw,48px);font-weight:500;line-height:1}
.section-intro{max-width:700px;color:var(--muted);font-size:14px;line-height:1.7}
.kit-disclosure{padding:0}
.kit-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 18px;padding:24px 0;cursor:pointer;list-style:none}
.kit-summary::-webkit-details-marker{display:none}
.kit-summary .eyebrow{grid-column:1/-1}
.kit-summary-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(24px,4vw,32px);line-height:1.1}
.kit-summary-action{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.kit-summary-action::after{content:" +"}
.kit-disclosure[open] .kit-summary-action::after{content:" −"}
.kit-content{padding:8px 0 34px}
.kit-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:24px}
.kit-item{min-width:0;padding:14px;background:var(--card);border:1px solid var(--line)}
.kit-item h3{margin:12px 0 5px;font-family:"Cormorant Garamond",Georgia,serif;font-size:23px;font-weight:600}
.kit-item>p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}
.kit-visual{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1.55;background:var(--paper);overflow:hidden}
.kit-jar-photo{width:100%;height:100%;object-fit:cover}
.kit-jar-label{position:absolute;left:34%;top:33%;width:32%;height:36%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px;background:var(--label,#F5F0E7);color:var(--ink);text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.kit-jar-label .brand-on-label{font-size:clamp(10px,2vw,17px)}
.kit-jar-label .product-name{font-size:clamp(8px,1.3vw,12px)}
.kit-jar-label .product-type{font-size:clamp(4px,.65vw,6px)}
.kit-jar-label .label-detail{font-size:clamp(4px,.6vw,5px)}
.card-stack{position:relative;width:78%;height:68%}
.business-card{position:absolute;inset:0 auto auto 0;width:78%;height:72%;padding:14px;background:var(--ink);color:var(--card);box-shadow:0 8px 18px rgba(0,0,0,.14)}
.business-card strong{display:block;color:var(--accent-soft);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(15px,2.4vw,25px);font-weight:600}
.business-card span{display:block;margin-top:7px;font-size:8px;letter-spacing:.13em}
.business-card-back{position:absolute;right:0;bottom:0;width:78%;height:72%;padding:14px;border:1px solid var(--line);background:#fff;color:var(--muted);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.business-card-back strong{display:block;color:var(--accent);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(13px,2vw,20px)}
.business-card-back span{display:block;margin-top:10px;font-size:8px}
.social-art{width:72%;height:82%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:16px;background:var(--ink);color:var(--card);text-align:center}
.social-art .brand-on-label{color:var(--accent-soft);font-size:clamp(20px,4vw,38px)}
.social-art span{font-size:9px;letter-spacing:.16em}
.social-art .social-product{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(16px,2.5vw,25px);letter-spacing:0}
.social-mark{width:38px;height:1px;background:var(--accent-soft)}
.flyer-art{position:relative;width:70%;height:87%;padding:18px;background:var(--paper);border:1px solid var(--line);box-shadow:0 7px 16px rgba(0,0,0,.1)}
.flyer-art::after{position:absolute;right:0;bottom:0;width:34%;height:60%;background:var(--ink);content:""}
.flyer-art .brand-on-label{position:relative;z-index:1;display:block;font-size:clamp(17px,3vw,29px)}
.flyer-art .flyer-kicker{display:block;position:relative;z-index:1;margin-top:7px;color:var(--muted);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(13px,2vw,20px)}
.flyer-art .flyer-copy{display:block;position:relative;z-index:1;margin-top:9px;color:var(--muted);font-size:7px;letter-spacing:.1em}
.kit-item .concept-tag{display:block;margin-top:9px;color:var(--accent);font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.print-button{border:0;cursor:pointer;font-family:inherit}
.principles{display:grid;grid-template-columns:1fr;gap:2px;background:var(--line)}
.principle{min-height:145px;padding:21px;background:var(--card)}
.principle .num{display:block;margin-bottom:12px;color:var(--accent-soft);font-family:"Cormorant Garamond",Georgia,serif;font-size:28px}
.principle h3{margin:0 0 7px;font-size:13px}
.principle p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.principle .name-reason{margin-top:12px}
.principle .name-reason strong{display:block;margin-bottom:2px;color:var(--ink);font-size:10px;letter-spacing:.04em}
.principle>a{display:inline-block;margin-top:12px;color:var(--accent);font-size:12px;font-weight:600;text-decoration:none}
.option-nav{display:grid;grid-template-columns:1fr;gap:8px;margin:28px 0 0}
.option-nav a{padding:11px 13px;border:1px solid var(--line);background:var(--card);font-size:12px;text-decoration:none}
.option-nav a[aria-current="page"]{border-color:var(--accent);color:var(--accent);font-weight:700}
.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:22px 0 34px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}
.footer a{color:var(--accent)}
@media(min-width:720px){.hero{grid-template-columns:1fr 1fr;gap:52px;padding:76px 0 82px}.visual{width:100%}.principles{grid-template-columns:repeat(2,minmax(0,1fr))}.option-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:700px){.kit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.topbar{align-items:flex-start}.nav{justify-content:flex-end;flex-wrap:wrap;gap:8px 12px;font-size:10px}.nav .nav-cta{padding:7px 9px}.wrap{width:calc(100% - 32px)}.hero{padding-top:38px}}
@media print{.topbar,.buttons,.option-nav,.print-button,.kit-summary{display:none!important}.kit-disclosure:not([open])>.kit-content{display:block}.wrap{width:100%;max-width:none;padding:0 12mm}.hero,.section{break-inside:avoid}.kit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kit-item{break-inside:avoid}.footer{padding-bottom:0}body{background:#fff}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}