/* ===== PowderedPurple — editorial luxe (navy · charcoal · gold) ===== */
:root{
  /* surfaces — white shades of purple */
  --bone:#f5f1fb;       /* pale lavender page */
  --bone-2:#faf7ff;
  --paper:#ffffff;
  /* brand (purple) */
  --ink:#2a1d45;        /* deep purple — text + feature bands */
  --ink-soft:#4a3a68;
  --navy:#3a2168;       /* deep violet (pricing / featured) */
  --navy-2:#5a37a8;
  --royal:#8b5cf6;      /* bright violet accent */
  --gold-1:#7c3aed;     /* primary accent (readable on light) */
  --gold-2:#cbb6f2;     /* light lilac (accent on dark bands) */
  --gold-3:#a78bfa;     /* soft violet (borders) */
  --gold:linear-gradient(135deg,#7c3aed 0%,#a855f7 45%,#c084fc 100%); /* purple accent gradient */
  /* text */
  --text:#2a1d45;
  --muted:#6c6088;
  --on-dark:#f1ebfb;
  --on-dark-muted:#c5bae0;
  --border:rgba(70,45,120,.14);
  --border-strong:rgba(70,45,120,.26);
  /* system */
  --radius:18px;
  --radius-sm:12px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 24px 60px -28px rgba(70,40,120,.35);
  --shadow-sm:0 10px 30px -18px rgba(70,40,120,.3);
}

:root{
  --bone:#f7f1ec;
  --bone-2:#fffaf5;
  --ink:#241936;
  --ink-soft:#574962;
  --navy:#2d1b4d;
  --navy-2:#4b2f83;
  --royal:#7c3aed;
  --matcha:#607a3b;
  --cherry:#b94f5d;
  --saffron:#d39a36;
  --clay:#c87552;
  --gold-1:#6d3ed8;
  --gold-2:#ecd8aa;
  --gold-3:#9aad6d;
  --gold:linear-gradient(135deg,#6d3ed8 0%,#b94f5d 46%,#d39a36 100%);
  --text:#241936;
  --muted:#675d6d;
  --on-dark:#fff8ef;
  --on-dark-muted:#ddcfbf;
  --border:rgba(45,31,61,.14);
  --border-strong:rgba(45,31,61,.28);
  --radius:8px;
  --radius-sm:8px;
  --shadow:0 24px 60px -28px rgba(35,23,48,.32);
  --shadow-sm:0 10px 30px -18px rgba(35,23,48,.28);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bone);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto;line-height:1.08;letter-spacing:-.015em;font-weight:600;color:var(--ink)}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ===== subtle warm backdrop ===== */
.bg-mesh{position:fixed;inset:0;z-index:-1;overflow:hidden;opacity:.10;filter:blur(90px);mix-blend-mode:multiply}
.blob{position:absolute;width:46vw;height:46vw;border-radius:50%;animation:float 26s var(--ease) infinite}
.blob-1{background:var(--navy);top:-12%;left:-8%}
.blob-2{background:var(--gold-1);top:25%;right:-12%;animation-delay:-8s}
.blob-3{background:var(--royal);bottom:-18%;left:32%;animation-delay:-16s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(5%,7%) scale(1.1)}66%{transform:translate(-5%,-3%) scale(.95)}}

/* ===== Nav ===== */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(245,241,251,.72);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--border);background:rgba(245,241,251,.92)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:11px;font-weight:600}
.logo-img{height:40px;width:40px;object-fit:contain;border-radius:0;display:block;box-shadow:none}
.logo-light{display:none}
.logo-text{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.logo-text span{background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:.92rem;color:var(--ink-soft);font-weight:500;transition:color .2s;position:relative}
.nav-links>a,.nav-dropdown-link{padding:9px 14px;border:1px solid transparent;border-radius:999px}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1.5px;background:var(--gold);transition:width .3s var(--ease)}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-links a[aria-current="page"]{color:#fff!important;background:var(--purple,#7b3fc6);border:1px solid var(--purple,#7b3fc6);border-radius:999px;padding:9px 14px;font-weight:800;box-shadow:0 8px 18px -14px rgba(33,22,49,.8)}
.nav-links a[aria-current="page"]::after{display:none}
.nav-cta{color:#fff!important}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);transition:.3s var(--ease)}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:600;font-size:.95rem;padding:13px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s,background .3s,border-color .3s,color .3s}
.btn-sm{padding:10px 20px;font-size:.88rem}
.btn-lg{padding:16px 34px;font-size:1.02rem}
.btn-block{width:100%}
.btn-primary{background:var(--ink);color:#fff;border:1px solid #140d24;box-shadow:inset 0 2px 3px rgba(255,255,255,0.26), inset 0 -2px 3px rgba(0,0,0,0.22), var(--shadow-sm);}
.btn-primary:hover{transform:translateY(-3px);background:var(--navy);box-shadow:inset 0 2px 3px rgba(255,255,255,0.3), inset 0 -2px 3px rgba(0,0,0,0.3), 0 18px 40px -16px rgba(70,40,120,.55);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.65), inset 0 -1.5px 0 rgba(42,29,69,0.12), var(--shadow-sm);}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--ink);background:rgba(20,22,29,.03);box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.7), inset 0 -1.5px 0 rgba(42,29,69,0.15), var(--shadow-sm);}

/* ===== Hero ===== */
.hero{padding:96px 0 78px;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--border);padding:8px 18px;border-radius:999px;font-size:.82rem;color:var(--muted);margin-bottom:30px;box-shadow:var(--shadow-sm);letter-spacing:.01em}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--gold-1);box-shadow:0 0 0 0 rgba(139,92,246,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(139,92,246,.5)}70%{box-shadow:0 0 0 9px rgba(139,92,246,0)}100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}}
.hero-title{font-size:clamp(2.6rem,6.4vw,5rem);font-weight:600;max-width:15ch;margin:0 auto 24px;letter-spacing:-.025em}
.grad-text{font-style:italic;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:clamp(1.04rem,1.8vw,1.22rem);color:var(--muted);max-width:60ch;margin:0 auto 38px}
.hero-sub strong{color:var(--ink);font-weight:600}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}
.hero-trust{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--muted);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.trust-pills{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.pill{background:var(--paper);border:1px solid var(--border);padding:9px 18px;border-radius:999px;font-size:.9rem;color:var(--ink);letter-spacing:0;text-transform:none}

/* ===== Hero (homepage) — light lavender ===== */
body.home .hero{
  background:
    radial-gradient(70% 70% at 50% -5%, rgba(168,85,247,.16), transparent 60%),
    radial-gradient(50% 50% at 84% 6%, rgba(124,58,237,.12), transparent 62%),
    linear-gradient(180deg,#efe7fb 0%,#f5f1fb 62%,var(--bone) 100%);
  color:var(--text);
  position:relative;
  overflow:hidden;
  padding-top:118px;
}
body.home .hero>.container{position:relative;z-index:1}
.hero-logo{height:clamp(96px,15vw,168px);width:auto;margin:0 auto 28px;display:block;filter:drop-shadow(0 22px 40px rgba(139,92,246,0.36));animation:heroFloat 6s ease-in-out infinite}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
body.home .hero-cta .btn-primary{background:var(--gold);color:#fff;border:1px solid rgba(124,58,237,0.35);box-shadow:inset 0 2px 3px rgba(255,255,255,0.35), inset 0 -2px 3px rgba(0,0,0,0.2), 0 14px 40px -14px rgba(124,58,237,.6)}
body.home .hero-cta .btn-primary:hover{background:linear-gradient(135deg,#6d28d9,#a855f7)}

/* nav sits on the light hero (until scrolled) */
body.home .nav:not(.scrolled){background:rgba(245,241,251,.5);backdrop-filter:blur(10px);border-bottom-color:transparent}

/* ===== Stats ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding:0;margin:0 auto 90px;max-width:calc(var(--maxw) - 0px);background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.stat{text-align:center;padding:34px 18px;background:var(--bone-2)}
.stat-num{font-family:'Fraunces',serif;font-size:clamp(2rem,4vw,3rem);font-weight:600;color:var(--navy)}
.stat-plus{font-family:'Fraunces',serif;font-size:1.8rem;font-weight:600;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{display:block;margin-top:8px;color:var(--muted);font-size:.86rem;letter-spacing:.02em}

/* ===== Sections ===== */
.section{padding:100px 0}
.section-alt{background:var(--bone-2);color:var(--text)}
.section-alt h2,.section-alt h3,.section-alt h4{color:var(--ink)}
.section-alt .section-head p,.section-alt p{color:var(--muted)}
.section-head{text-align:center;max-width:660px;margin:0 auto 60px}
.eyebrow{display:inline-block;color:var(--gold-1);font-weight:600;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px}
.section-alt .eyebrow{color:var(--gold-1)}
.section-head h2{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:18px;letter-spacing:-.02em}
.section-head p{color:var(--muted);font-size:1.06rem}
.journal-section-head{max-width:none;display:grid;grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(42px,7vw,100px);text-align:left}
.journal-section-copy{max-width:620px}
.journal-section-visual{position:relative;min-height:390px;width:100%;max-width:510px;margin:0 auto}
.journal-section-visual figure{position:absolute;width:44%;margin:0;padding:8px;background:var(--paper);border:1.5px solid var(--purple,#7b3fc6);border-radius:8px;box-shadow:0 18px 38px rgba(29,17,47,.18)}
.journal-section-visual figure:nth-child(1){left:5%;top:7%;transform:rotate(-7deg);z-index:1}
.journal-section-visual figure:nth-child(2){right:5%;top:20%;transform:rotate(5deg);z-index:2}
.journal-section-visual figure:nth-child(3){left:30%;bottom:5%;transform:rotate(-2deg);z-index:3}
.journal-section-visual img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.journal-section-visual figcaption{padding:8px 4px 2px;color:var(--ink);font-size:.72rem;font-weight:700;letter-spacing:.03em}
.journal-section-ai-note{position:absolute;left:6%;bottom:-6px;margin:0!important;padding:6px 10px;border:1px solid var(--purple,#7b3fc6);border-radius:6px;background:rgba(255,255,255,.92);color:var(--muted)!important;font-size:.72rem!important;line-height:1.25!important}
@media (max-width:760px){.journal-section-head{grid-template-columns:1fr;gap:34px}.journal-section-copy{max-width:none}.journal-section-visual{min-height:330px;max-width:460px}.journal-section-ai-note{left:2%;bottom:-8px}}

/* ===== Cards / Bento ===== */
.card,.niche,.price-card,.post,.mini-card,.quote,.step{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.card:hover,.niche:hover,.post:hover,.quote:hover,.step:hover{transform:translateY(-6px);border-color:var(--gold-3);box-shadow:var(--shadow)}
.section-alt .card,.section-alt .niche,.section-alt .quote,.section-alt .step{background:var(--paper);border-color:var(--border)}
.section-alt .card:hover,.section-alt .niche:hover,.section-alt .quote:hover,.section-alt .step:hover{border-color:var(--gold-3);box-shadow:var(--shadow)}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{padding:34px}
.bento-lg{grid-row:span 2}
.bento-wide{grid-column:span 2}
.card-icon{font-size:1.9rem;margin-bottom:18px}
.card h3{font-size:1.35rem;margin-bottom:11px}
.card p{color:var(--muted)}
.ticks{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:9px}
.ticks li{position:relative;padding-left:26px;color:var(--muted);font-size:.92rem}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:2px;background:var(--gold)}
.section-alt .card p,.section-alt .ticks li{color:var(--muted)}

/* ===== Niches ===== */
.niche-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.niche{padding:38px}
.niche-emoji{font-size:2.4rem;margin-bottom:18px}
.niche h3{font-size:1.5rem;margin-bottom:12px}
.niche p{color:var(--muted);margin-bottom:20px}
.niche-tag{font-size:.78rem;color:var(--gold-1);font-weight:600;letter-spacing:.04em;text-transform:uppercase}

/* ===== Steps ===== */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{padding:34px}
.step-num{font-family:'Fraunces',serif;font-size:2.6rem;font-weight:600;font-style:italic;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:14px}
.step h3{font-size:1.25rem;margin-bottom:9px}
.step p{color:var(--muted);font-size:.93rem}

/* ===== Quotes ===== */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{padding:36px}
.quote blockquote{font-family:'Fraunces',serif;font-size:1.18rem;line-height:1.45;margin-bottom:20px;color:var(--ink)}
.section-alt .quote blockquote{color:var(--ink)}
.quote figcaption{color:var(--muted);font-size:.88rem;letter-spacing:.02em}
.quote figcaption strong{color:var(--ink)}
.section-alt .quote figcaption strong{color:var(--ink)}

/* ===== Pricing ===== */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.price-card{padding:40px 32px;position:relative}
.price-card.featured{background:linear-gradient(145deg, #1d123d, #0f0a21);color:#fff;border-color:var(--navy);border-color:var(--navy);box-shadow:var(--shadow);transform:scale(1.04)}
.price-card.featured h3,.price-card.featured .price-amt{color:#fff}
.price-card.featured .price-desc,.price-card.featured .ticks li{color:rgba(255,255,255,.8)}
.price-card.featured .ticks li::before{background:var(--gold)}
.price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--ink);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:999px}
.price-card h3{font-size:1.4rem;margin-bottom:16px}
.price{margin-bottom:6px}
.price-amt{font-family:'Fraunces',serif;font-size:2.6rem;font-weight:600}
.price-per{color:var(--muted)}
.price-card.featured .price-per{color:rgba(255,255,255,.7)}
.price-desc{color:var(--muted);font-size:.92rem;margin-bottom:22px}
.price-card .ticks{margin-bottom:30px}
.price-card.featured .btn-primary{background:#fff;color:var(--navy)}
.price-card.featured .btn-primary:hover{background:var(--gold-2)}

/* ===== Blog ===== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.blog-grid .post{height:100%;min-width:0}
.post{overflow:hidden;display:flex;flex-direction:column}
.post-thumb{height:190px;position:relative;overflow:hidden}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.post:hover .post-thumb img{transform:scale(1.06)}
.post-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 55%,rgba(20,22,29,.15));pointer-events:none}
.thumb-1{background:linear-gradient(140deg,var(--navy),var(--royal))}
.thumb-2{background:linear-gradient(140deg,var(--ink),var(--navy))}
.thumb-3{background:linear-gradient(140deg,var(--gold-1),var(--gold-2))}
.post-body{padding:26px;display:flex;flex-direction:column;gap:9px;flex:1}
.post-tag{align-self:flex-start;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-1);background:rgba(139,92,246,.1);padding:5px 11px;border-radius:999px}
.post h3{font-size:1.2rem;line-height:1.25}
.post h3 a{transition:color .2s}
.post h3 a:hover{color:var(--navy)}
.post p{color:var(--muted);font-size:.92rem;flex:1}
.post-meta{color:var(--muted);font-size:.8rem;letter-spacing:.04em}
.blog-more{text-align:center;margin-top:42px}

/* Tutorial series cards expose both destinations: filter the filmed library or
   continue to the accessible written guide. */
.series-card-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:15px}
.series-card-actions .series-watch{min-height:42px;padding:10px 14px;font-size:.76rem;white-space:nowrap}
.series-guide-link{color:var(--gold-1);font-size:.76rem;font-weight:800;line-height:1.35}
.series-guide-link:hover{color:var(--navy)}

/* ===== About ===== */
.about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.about-grid h2{font-size:clamp(2rem,4vw,2.9rem);margin:16px 0 20px;letter-spacing:-.02em}
.about-grid p{color:var(--muted);margin-bottom:18px}
.about-grid .btn{margin-top:12px}
.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mini-card{padding:26px}
.mini-card span{font-size:1.7rem}
.mini-card h4{margin:12px 0 5px;font-size:1.12rem}
.mini-card p{color:var(--muted);font-size:.88rem}

/* ===== CTA / contact ===== */
.cta-section{padding-bottom:120px}
.cta-card{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;background:var(--navy);color:#ffffff;border-radius:26px;padding:56px;position:relative;overflow:hidden}
.cta-card::before{content:"";position:absolute;top:-40%;right:-10%;width:50%;height:180%;background:radial-gradient(circle,rgba(168,85,247,.4),transparent 70%);pointer-events:none}
.cta-copy{position:relative}
.cta-copy h2{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:16px;color:#fff}
.cta-copy p{color:var(--on-dark-muted);font-size:1.06rem}
.cta-form{display:flex;flex-direction:column;gap:15px;position:relative}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.82rem;color:var(--on-dark-muted);letter-spacing:.02em}
.field input,.field select,.field textarea{background:#ffffff;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:13px 15px;color:var(--ink);font-family:inherit;font-size:.95rem;transition:border-color .2s,background .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:0.75}
.field select option{color:var(--ink);background:#ffffff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);background:#ffffff}
.field textarea{resize:vertical}
.cta-form .btn-primary{background:var(--gold);color:var(--ink);border:1px solid rgba(124,58,237,0.35);box-shadow:inset 0 2px 3px rgba(255,255,255,0.35), inset 0 -2px 3px rgba(0,0,0,0.2), var(--shadow-sm);}
.cta-form .btn-primary:hover{background:linear-gradient(135deg,#6d28d9,#a855f7);transform:translateY(-3px)}
.form-note{color:var(--gold-2);font-size:.9rem;text-align:center}

/* ===== Footer ===== */
.footer{background:#150d20;color:#fff;border-top:1px solid rgba(255,255,255,.08);padding:76px 0 30px}
.footer .logo-text{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:42px}
.footer-grid>div:first-child p{color:rgba(255,255,255,.68);font-size:.88rem;margin:18px 0;max-width:38ch}
.footer .footer-heading{color:#d2b8f5;font:700 .72rem Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;margin:0 0 16px}
.footer-grid a{display:block;color:rgba(255,255,255,.68);font-size:.88rem;margin:8px 0}
.footer-grid a:hover{color:#ffffff}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px}
.footer-brand p{color:var(--on-dark-muted);font-size:.92rem;margin:18px 0;max-width:34ch}
.socials{display:flex;gap:12px}
.socials a{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(20,22,29,.03);border:1px solid rgba(255,255,255,.12);color:var(--on-dark-muted);transition:.3s var(--ease)}
.socials a:hover{color:var(--ink);background:var(--gold);border-color:transparent;transform:translateY(-3px)}
.footer-col h4{font-size:.82rem;margin-bottom:18px;color:var(--gold-2);letter-spacing:.12em;text-transform:uppercase;font-family:'Inter',sans-serif;font-weight:600}
.footer-col a{display:block;color:var(--on-dark-muted);font-size:.9rem;padding:6px 0;transition:color .2s}
.footer-col a:hover{color:#ffffff}
.footer-social-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;color:var(--gold-2);font-size:.9rem;font-weight:700;text-decoration:none}
.footer-grid .footer-social-link{display:inline-flex;margin-top:14px}
.footer-social-icon{display:block;width:20px;height:20px;padding:3px;box-sizing:border-box;fill:currentColor;flex:none;border:1px solid rgba(203,182,242,.72);border-radius:5px;background:rgba(255,255,255,.08)}
.author-accountability{margin:4px 0 10px;color:var(--violet,#7c3bc7);font-size:.82rem;font-weight:700}
.footer-social-link:hover{color:#ffffff}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:55px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.68);font-size:.83rem}

/* Shared light footer system: readable links with a clear TikTok mark. */
.footer{background:#eee7f7;color:#211631;border-top:1px solid #d4c4e8}
.footer .logo-text{color:#211631!important}
.footer-grid>div:first-child p,.footer-brand p{color:#4c3b5f}
.footer .footer-heading,.footer-col h4{color:#5d2d9d}
.footer-grid a,.footer-col a{color:#332044}
.footer-grid a:hover,.footer-col a:hover{color:#6d32b7}
.footer-grid .footer-social-link,.footer .footer-social-link{color:#5d2d9d}
.footer-social-icon{border-color:rgba(93,45,157,.48);background:rgba(255,255,255,.62)}
.footer-social-link{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;width:max-content;max-width:100%;line-height:1}
.footer-social-link,.footer-social-link:hover,.footer-social-link:focus-visible{text-decoration:none!important}
.footer-social-label{display:inline-flex;align-items:center;white-space:nowrap;line-height:1}
.footer-social-icon{width:24px!important;height:24px!important;padding:3px;fill:#5d2d9d!important;border:1.5px solid rgba(93,45,157,.58);border-radius:5px;background:rgba(255,255,255,.72)}
.footer-grid .footer-social-link:hover,.footer .footer-social-link:hover{color:#211631}
.footer-bottom{border-top-color:#d4c4e8;color:#4c3b5f}

/* Keep the navigation surface identical to the shared footer surface. */
body .nav,body .nav.scrolled,body.home .nav:not(.scrolled){background:#eee7f7!important;border-bottom-color:#d4c4e8}
body .nav-links{background:#eee7f7}

/* ===== Scroll reveal ===== */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ===== Showcase / video library ===== */
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.vcard{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:9/16;cursor:pointer;border:1px solid var(--border);background:#ffffff;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;display:block}
.vcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--gold-3)}
.vcard img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:0}
.vcard-preview-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s cubic-bezier(.22,1,.36,1);z-index:1;pointer-events:none}
.vcard-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,24,.4) 0%,transparent 28%,transparent 52%,rgba(14,16,24,.93) 100%);display:flex;flex-direction:column;justify-content:space-between;padding:16px;z-index:2}
.vcard-top{display:flex;gap:7px;flex-wrap:wrap}
.vtag{font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.vtag-niche{background:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(6px)}
.vtag-info{background:var(--gold);color:var(--ink)}
.vcard-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.45);display:grid;place-items:center;transition:.3s var(--ease)}
.vcard:hover .vcard-play{background:var(--gold);border-color:transparent;transform:translate(-50%,-50%) scale(1.08)}
.vcard-play svg{width:22px;height:22px;margin-left:3px;fill:#fff}
.vcard:hover .vcard-play svg{fill:var(--ink)}
.vcard-bottom h3{color:#fff;font-size:1rem;line-height:1.25;margin-bottom:4px}
.vcard-bottom .vtopic{color:rgba(255,255,255,.72);font-size:.78rem}

/* modal player */
.vmodal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:28px;background:rgba(10,11,16,.82);backdrop-filter:blur(10px)}
.vmodal.open{display:flex}
.vmodal-inner{display:flex;gap:34px;max-width:980px;width:100%;align-items:center;justify-content:center}
.vmodal video{max-height:82vh;width:auto;max-width:min(48vh,90vw);border-radius:18px;background:#000;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.vmodal-info{color:var(--on-dark);max-width:340px}
.vmodal-info .vtag-info{display:inline-block;margin-bottom:14px}
.vmodal-info h2{color:#fff;font-size:1.8rem;margin-bottom:12px}
.vmodal-info p{color:var(--on-dark-muted);margin-bottom:18px}
.vmodal-tags{display:flex;gap:8px;flex-wrap:wrap}
.vmodal-tags span{font-size:.78rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;padding:5px 12px;border-radius:999px}
.vmodal-related-products{margin-top:4px;background:transparent!important;background-color:transparent!important;color:#fff!important;border-color:#d79a37!important;box-shadow:none!important}
.vmodal-related-products:hover,.vmodal-related-products:focus-visible{background:var(--ink)!important;color:#fff!important;border-color:#d79a37!important}
.vmodal-close{position:absolute;top:20px;right:24px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.25s var(--ease)}
.vmodal-close:hover{background:var(--gold);color:var(--ink);border-color:transparent}

@media (max-width:1100px){.video-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.vmodal-inner{flex-direction:column;gap:18px}.vmodal video{max-height:60vh}.vmodal-info{max-width:none;text-align:center}.vmodal-tags{justify-content:center}}
@media (max-width:680px){.video-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== Blog index page ===== */
.page-hero{padding:80px 0 40px;text-align:center}
.page-hero .eyebrow{margin-bottom:16px}
.page-hero h1{font-size:clamp(2.4rem,5.5vw,4rem);letter-spacing:-.025em;max-width:18ch;margin:0 auto 18px}
.page-hero p{color:var(--muted);font-size:1.08rem;max-width:56ch;margin:0 auto}

.blog-filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:36px 0 10px}
.chip{font-family:inherit;font-size:.86rem;font-weight:500;color:var(--ink-soft);background:var(--paper);border:1px solid var(--border);padding:9px 18px;border-radius:999px;cursor:pointer;transition:.25s var(--ease)}
.chip:hover{border-color:var(--gold-3)}
.chip.active{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm);border-color:var(--ink)}

.featured-post{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:48px;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.featured-post:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--gold-3)}
.featured-thumb{min-height:340px;position:relative;overflow:hidden}
.featured-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.featured-post:hover .featured-thumb img{transform:scale(1.04)}
.featured-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 50%,rgba(20,22,29,.15));pointer-events:none}
.featured-body{padding:46px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.featured-body .post-tag{align-self:flex-start}
.featured-label{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-1);font-weight:600}
.featured-body h2{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15}
.featured-body h2 a:hover{color:var(--navy)}
.featured-body p{color:var(--muted)}
.journal-hero p{max-width:72ch}
.journal-pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 34px}
.journal-pillar-grid article{background:rgba(255,255,255,.62);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.journal-pillar-grid span{display:block;color:var(--gold-1);font:600 2.2rem Fraunces,serif;margin-bottom:8px}
.journal-pillar-grid h3{font-size:1.18rem;margin-bottom:8px}
.journal-pillar-grid p{color:var(--muted);font-size:.92rem}
.journal-bridge{text-align:center;max-width:760px}
.journal-bridge h2{font-size:clamp(2rem,4vw,3.2rem);margin:12px 0 16px}
.journal-bridge p{color:var(--muted);font-size:1.04rem}

/* ===== Article page ===== */
.article-hero{padding:64px 0 0;text-align:center}
.article-kicker{display:inline-flex;gap:10px;align-items:center;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-1);font-weight:600;margin-bottom:20px}
.article-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.025em;max-width:20ch;margin:0 auto 22px}
.article-meta{display:flex;gap:18px;align-items:center;justify-content:center;color:var(--muted);font-size:.9rem;flex-wrap:wrap}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold-3)}
.article-author{display:flex;align-items:center;gap:10px}
/* Initials monogram rather than a photograph. A stock or generated portrait
   attached to a named health author would misrepresent a real person. */
.author-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(140deg,#7c3aed,#a855f7);color:#fff;
  display:grid;place-items:center;overflow:hidden;padding:0;
  font:800 .78rem/1 'Inter',system-ui,sans-serif;letter-spacing:.04em;
}
.author-avatar img{width:28px;height:28px;object-fit:contain;object-position:center;display:block}
.article-cover{max-width:var(--maxw);margin:44px auto 0;padding:0 28px}
.article-cover-inner{height:clamp(220px,40vw,440px);border-radius:var(--radius);position:relative;overflow:hidden}
.article-cover-inner img{width:100%;height:100%;object-fit:cover;display:block}
.article-cover-inner::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 55%,rgba(20,22,29,.15));pointer-events:none}

/* Journal image system: cards carry the purple frame, while media keeps an
   even inner gutter so no image border touches its host card. */
.blog-grid .post,.featured-post,.journal-pillar-grid article{border:1.5px solid #7b3fc6;box-shadow:var(--shadow-sm)}
.blog-grid .post:hover,.featured-post:hover,.journal-pillar-grid article:hover{border-color:#5d2d9d;box-shadow:var(--shadow)}
.blog-grid > .post{border:1.5px solid #7b3fc6;background:var(--paper);box-shadow:0 18px 38px -24px rgba(21,13,32,.72)}
.blog-grid > .post:hover{border-color:#5d2d9d;box-shadow:0 24px 46px -24px rgba(21,13,32,.82)}
.post-thumb,.featured-thumb{padding:7px;margin:10px 10px 0;background:#f3eaf8;border:1.5px solid #7b3fc6;border-radius:8px;box-sizing:border-box}
.post-thumb[class*="thumb-"],.featured-thumb[class*="thumb-"]{background:#f3eaf8!important;border:1.5px solid #7b3fc6;border-radius:8px}
.post-thumb img,.featured-thumb img{border-radius:4px}
.article-cover-inner{padding:8px;background:#fff;border:1.5px solid #7b3fc6;box-shadow:0 24px 46px -26px rgba(21,13,32,.8);box-sizing:border-box}
.article-cover-inner img{border-radius:4px}

.prose{max-width:740px;margin:56px auto 0;padding:0 28px;font-size:1.12rem;line-height:1.8;color:#2c2f38}
.prose>p{margin-bottom:26px}
.prose h2{font-size:1.85rem;margin:48px 0 18px;letter-spacing:-.02em}
.prose h3{font-size:1.35rem;margin:36px 0 14px}
.prose ul,.prose ol{margin:0 0 26px 1.2em;display:flex;flex-direction:column;gap:10px}
.prose li{padding-left:6px}
.prose li::marker{color:var(--gold-1)}
.prose a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold-3);text-underline-offset:3px}
.prose strong{color:var(--ink)}
.prose blockquote{font-family:'Fraunces',serif;font-size:1.5rem;line-height:1.4;color:var(--ink);border-left:3px solid;border-image:var(--gold) 1;padding:6px 0 6px 28px;margin:36px 0}
.prose .lead{font-size:1.28rem;line-height:1.6;color:var(--ink);margin-bottom:32px}
.callout{background:var(--bone-2);border:1px solid var(--border);border-left:4px solid var(--gold-1);border-radius:var(--radius-sm);padding:24px 26px;margin:32px 0;font-size:1rem;line-height:1.7}
.callout strong{display:block;margin-bottom:6px;font-family:'Fraunces',serif;font-size:1.05rem;color:var(--ink)}
.disclosure-note{font-size:.86rem;color:var(--muted);font-style:italic;border-top:1px solid var(--border);padding-top:20px;margin-top:44px}

.author-bio{max-width:740px;margin:56px auto 0;padding:28px;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);display:flex;gap:18px;align-items:flex-start}
.author-bio .author-avatar{width:54px;height:54px;font-size:1.15rem;flex-shrink:0}
.author-bio h3,.author-bio h4{font-size:1.1rem;margin-bottom:2px}
.author-bio h3 a{color:var(--ink);text-decoration:none}
.author-bio h3 a:hover{text-decoration:underline}
.author-bio p{color:var(--muted);font-size:.94rem}
.author-bio .author-role{
  font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-1);margin-bottom:10px;
}
.author-bio .author-links{margin-top:12px;font-size:.85rem}
.author-bio .author-links a{color:var(--gold-1);text-decoration:underline}
.article-author .author-avatar{width:28px;height:28px;font-size:.68rem}

.related{padding:90px 0 0}
.related h2{font-size:1.8rem;margin-bottom:32px;text-align:center}

.article-cta{margin:80px auto 0;max-width:var(--maxw);padding:0 28px}
.article-cta-inner{background:linear-gradient(145deg, #1d123d, #0f0a21);color:#fff;border-color:var(--navy);border-radius:24px;padding:48px;text-align:center;position:relative;overflow:hidden}
.article-cta-inner::before{content:"";position:absolute;top:-50%;left:-10%;width:50%;height:200%;background:radial-gradient(circle,rgba(168,85,247,.32),transparent 70%)}
.article-cta-inner h2{color:#fff;font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:14px;position:relative}
.article-cta-inner p{color:rgba(255,255,255,.8);margin-bottom:26px;max-width:48ch;margin-inline:auto;position:relative}
.article-cta-inner .btn-primary{background:var(--gold);color:var(--ink);position:relative}
.article-cta-inner .btn-primary:hover{background:linear-gradient(135deg,#6d28d9,#a855f7)}
.article-back-link{max-width:740px;margin:44px auto 64px;padding:0 28px}
.article-back-link .btn{min-width:180px}
/* Journal articles carry their editorial context in the article body; the
   site-wide current-affiliate-status banner belongs on commercial surfaces,
   not beside educational reading. */
.article-hero + .container > .top-disclosure,
main > article .disclosure-note{display:none!important}

.thumb-4{background:linear-gradient(140deg,var(--royal),var(--gold-1))}
.thumb-5{background:linear-gradient(140deg,var(--navy),var(--ink))}
.thumb-6{background:linear-gradient(140deg,var(--gold-2),var(--navy))}

@media (max-width:760px){
  .featured-post{grid-template-columns:1fr}
  .featured-thumb{min-height:200px}
  .featured-body{padding:30px}
  .journal-pillar-grid{grid-template-columns:1fr}
}

/* ===== Scroll progress bar ===== */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--gold);z-index:200;will-change:width}
.scroll-progress::after{content:"";position:absolute;right:0;top:0;height:100%;width:60px;background:linear-gradient(90deg,transparent,var(--gold-2))}

/* ===== Section intro (chapter) ===== */
.chapter-head{text-align:center;max-width:720px;margin:0 auto 56px}
.chapter-index{font-family:'Fraunces',serif;font-style:italic;font-size:1rem;color:var(--gold-1);letter-spacing:.04em;display:block;margin-bottom:14px}

/* ===== Horizontal scroll journey ===== */
.journey{background:#ffffff;color:var(--on-dark);position:relative}
.journey-intro{text-align:center;padding:96px 24px 0}
.journey-intro .eyebrow{color:var(--gold-2)}
.journey-intro h2{color:#fff;font-size:clamp(2rem,5vw,3.4rem);margin:14px auto 14px;max-width:18ch}
.journey-intro p{color:var(--on-dark-muted);max-width:54ch;margin:0 auto}
.journey-intro .scroll-hint{margin-top:26px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted);display:inline-flex;align-items:center;gap:10px}
.journey-intro .scroll-hint::after{content:"";width:46px;height:1px;background:var(--gold);display:inline-block}

.journey-pin{padding:60px 0 96px}
.journey-track{display:flex;flex-direction:column;gap:60px}
.journey-panel{width:100%;display:grid;grid-template-columns:1.05fr 1fr;gap:6vw;align-items:center;padding:0 8vw;--accent:var(--gold-2)}
.jp-text{max-width:38ch}
.jp-num{font-family:'Fraunces',serif;font-size:clamp(3rem,7vw,5.4rem);font-weight:600;line-height:1;color:var(--accent);opacity:.9}
.jp-kicker{display:inline-block;margin:10px 0 14px;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600}
.jp-title{color:#fff;font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:16px;letter-spacing:-.02em}
.jp-desc{color:var(--on-dark-muted);margin-bottom:24px}
.jp-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;font-size:.95rem;border-bottom:1px solid transparent;transition:gap .25s var(--ease),border-color .25s}
.jp-link:hover{gap:14px;border-color:var(--accent)}
.jp-posters{display:flex;gap:18px;justify-content:flex-start}
.jp-poster{flex:0 0 auto;width:clamp(120px,15vw,190px);aspect-ratio:9/16;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 50px -22px rgba(0,0,0,.7);position:relative;display:block}
.jp-poster:nth-child(2){margin-top:42px}
.jp-poster:nth-child(3){margin-top:-22px}
.jp-poster img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.jp-poster:hover img{transform:scale(1.06)}
.jp-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 60%,rgba(14,16,24,.55));pointer-events:none}

/* horizontal mode (enabled by JS on capable viewports) */
.journey.is-horizontal{overflow:hidden}
.journey.is-horizontal .journey-pin{height:100vh;padding:0;display:flex;align-items:center}
.journey.is-horizontal .journey-track{flex-direction:row;gap:0;height:100%;align-items:center;will-change:transform}
.journey.is-horizontal .journey-panel{flex:0 0 100vw;height:100vh;gap:5vw}

/* closing CTA panel */
.jp-cta{grid-template-columns:1fr;text-align:center;place-items:center}
.jp-cta .jp-text{max-width:42ch}

/* ===== Parallax helper ===== */
[data-parallax]{will-change:transform}

/* ===== Reveal upgrades (used when GSAP not driving) ===== */
.reveal-stagger>*{opacity:0;transform:translateY(20px)}
.reveal-stagger.in>*{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

@media (max-width:900px){
  .journey-panel{grid-template-columns:1fr;gap:32px;padding:0 24px}
  .jp-posters{justify-content:flex-start}
  .jp-poster:nth-child(2),.jp-poster:nth-child(3){margin-top:0}
}

/* ===== Atelier mist scene (landing) ===== */
.atelier{position:relative;overflow:hidden;color:var(--text);background:radial-gradient(125% 90% at 50% -5%,#efe6fb 0%,#f3edfc 45%,#e9defb 82%)}
.atelier-stage{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 24px;text-align:center}
.atelier-caption{position:relative;z-index:4;max-width:640px}
.atelier-caption .eyebrow{color:var(--gold-1)}
.atelier-caption h2{color:var(--ink);font-size:clamp(2rem,5vw,3.4rem);margin:14px 0 14px;letter-spacing:-.02em}
.atelier-caption p{color:var(--muted);max-width:50ch;margin:0 auto}
.atelier-products{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;gap:clamp(2px,1.5vw,20px);margin-top:48px;filter:drop-shadow(0 30px 44px rgba(70,40,120,.3))}
.atelier-products::before{content:"";position:absolute;left:-7%;right:-7%;bottom:-6px;height:1px;background:linear-gradient(90deg,transparent,rgba(124,58,237,.35),transparent)}
.atelier-products::after{content:"";position:absolute;left:8%;right:8%;bottom:-48px;height:64px;background:radial-gradient(60% 100% at 50% 0,rgba(139,92,246,.34),transparent 72%);filter:blur(12px)}
.product-frame{position:relative;flex:0 0 auto;width:clamp(116px,15vw,184px);height:clamp(204px,26vw,300px);margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(124,58,237,.28);box-shadow:0 26px 50px -22px rgba(70,40,120,.34)}
.product-frame.pf-tall{height:clamp(244px,32vw,362px)}
.product-frame.pf-low{height:clamp(150px,20vw,232px)}
.product-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.product-frame:hover img{transform:scale(1.05)}
.product-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(165deg,transparent 50%,rgba(14,16,24,.66));pointer-events:none}
.product-frame .pf-label{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:12px 12px 11px;font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.atelier-cats{position:relative;z-index:4;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:52px}
.atelier-cats span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-muted);border:1px solid rgba(255,255,255,.16);padding:7px 15px;border-radius:999px}
.mist{display:none!important}
.mist-veil{position:absolute;inset:-3%;background:linear-gradient(180deg,rgba(246,241,255,.72),rgba(235,227,250,.54));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mist-layer{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(250,246,255,.85),rgba(250,246,255,0) 72%);filter:blur(40px);will-change:transform,opacity}
.mist .m1{width:88vw;height:64vh;left:-14vw;bottom:0}
.mist .m2{width:62vw;height:54vh;right:-10vw;bottom:12vh;background:radial-gradient(closest-side,rgba(224,213,250,.62),transparent 72%)}
.mist .m3{width:54vw;height:46vh;left:16vw;bottom:-6vh}
.mist .m4{width:46vw;height:44vh;left:32vw;top:4vh;background:radial-gradient(closest-side,rgba(238,230,252,.6),transparent 72%)}
.mist .m-dark-powder{width:48vw;height:48vw;left:26vw;top:8vh;background:radial-gradient(closest-side,rgba(48, 12, 94, 0.96) 0%,rgba(124, 58, 237, 0.6) 45%,transparent 75%);filter:blur(24px);z-index:5}
@media (prefers-reduced-motion:no-preference){
  .mist .m1{animation:mistDrift1 19s ease-in-out infinite}
  .mist .m2{animation:mistDrift2 23s ease-in-out infinite}
  .mist .m4{animation:mistDrift2 27s ease-in-out infinite reverse}
}
@keyframes mistDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(4%,-3%)}}
@keyframes mistDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-5%,2%)}}
@media (max-width:640px){
  .atelier-products{gap:8px}
  .product-frame{width:clamp(80px,21vw,120px);height:clamp(150px,40vw,210px)}
  .product-frame.pf-tall{height:clamp(182px,48vw,250px)}
  .product-frame.pf-low{height:clamp(120px,32vw,170px)}
  .product-frame .pf-label{font-size:.54rem;padding:8px}
}

/* ===== Responsive ===== */
@media (max-width:960px){
  /* -170% (was -130%) so the closed menu always clears the viewport now that
     the standard nav carries five items plus the catalogue dropdown */
  /* Solid background and an explicit z-index: at .98 alpha the article
     headline still read through the open menu. -170% (was -130%) so the
     closed menu clears the viewport now the nav carries five items. */
  .nav-links{position:fixed;inset:74px 0 auto 0;z-index:60;flex-direction:column;background:#f4f1ea;padding:26px;gap:20px;border-bottom:1px solid var(--border);box-shadow:0 18px 40px -24px rgba(42,29,69,.5);transform:translateY(-170%);transition:transform .4s var(--ease)}
  .nav-links.open{transform:none}
  .nav-toggle{display:flex}
  .bento,.niche-grid,.steps,.quotes,.pricing-grid,.blog-grid{grid-template-columns:1fr 1fr}
  .bento-lg{grid-row:auto}.bento-wide{grid-column:span 2}
  .about-grid,.cta-card{grid-template-columns:1fr}
  .price-card.featured{transform:none}
  .footer-inner,.footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .stats{grid-template-columns:1fr 1fr}
  .bento,.niche-grid,.steps,.quotes,.pricing-grid,.blog-grid{grid-template-columns:1fr}
  .bento-wide{grid-column:auto}
  .footer-inner,.footer-grid{grid-template-columns:1fr}
  .cta-card{padding:34px 24px}
  .hero{padding:64px 0 54px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ===== Custom Product Curation Zoom ===== */
.price-card img {
  transition: transform 0.6s var(--ease) !important;
}
.price-card:hover img {
  transform: scale(1.06);
}

/* ===== Curated Comparison Tables ===== */
.comp-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  margin-top: 10px;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.comp-table-wrapper.active-comp {
  opacity: 1;
  transform: none;
}
.comp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  min-width: 720px;
}
.comp-table th {
  background: var(--bone-2);
  padding: 20px 24px;
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--border);
}
.comp-table td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  line-height: 1.6;
  text-align: center;
}
.comp-table td.criteria-label {
  font-weight: 600;
  color: var(--ink);
  background: rgba(124, 58, 237, 0.02);
  border-right: 1px solid var(--border);
  text-align: left;
}
.comp-table tr:last-child td {
  border-bottom: none;
}
.comp-table tr:hover td {
  background: rgba(124, 58, 237, 0.02);
}
.comp-table tr:hover td.criteria-label {
  background: rgba(124, 58, 237, 0.04);
}
.comp-table .btn-ghost {
  border-color: var(--border-strong) !important;
  color: var(--ink) !important;
}
.comp-table .btn-ghost:hover {
  background: rgba(20,22,29,.03) !important;
  border-color: var(--ink) !important;
}


/* ===== Premium Typography & Readability on White Backgrounds ===== */
.section:not(.section-alt):not(.cta-section) p,
.section:not(.section-alt):not(.cta-section) li,
.card:not(.cta-card) p,
.niche p,
.post p,
.step p,
.mini-card p,
.section-head p {
  color: var(--ink) !important;
}

/* Ensure highlight elements inside cards retain accent colors */
.ticks li::before {
  background: var(--gold) !important;
}


/* ===== Product & Media Asset Hub Styles ===== */
.product-hub-section {
  padding: 80px 0 120px;
}
.product-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 40px;
}
.product-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.product-card-image {
  height: 220px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bone-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card-image img {
  height: 80%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(42,29,69,0.18));
  transition: transform 0.4s var(--ease);
}
.product-card:hover .product-card-image img {
  transform: scale(1.06);
}
.product-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}
.product-card-meta {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-1);
}
.product-card h3 {
  font-size: 1.3rem;
  margin: 0;
  color: var(--ink);
}
.product-card p {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.product-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.product-card-actions .btn {
  width: 100%;
  padding: 11px 14px;
  font-size: .88rem;
}
.product-card-body > button.explore-assets-btn.btn-block {
  display: none;
}
.health-category-card.active {
  border-color: rgba(109,62,216,.42);
  box-shadow: var(--shadow);
}

/* Slide-out detail drawer */
.detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 40, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s;
  z-index: 999;
}
.detail-backdrop.open {
  opacity: 1;
  visibility: visible;
}
.detail-panel {
  position: fixed;
  top: 0;
  right: -600px;
  width: 580px;
  max-width: 100%;
  height: 100vh;
  background: var(--bone);
  z-index: 1000;
  box-shadow: -10px 0 40px rgba(20,10,40,0.15);
  transition: right 0.4s var(--ease);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.detail-panel.open {
  right: 0;
}
.detail-header {
  padding: 30px 40px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.detail-header h2 {
  font-size: 1.4rem;
  margin: 0;
  color: var(--ink);
}
.detail-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--muted);
  cursor: pointer;
  padding: 5px;
  line-height: 1;
  transition: color 0.2s;
}
.detail-close-btn:hover {
  color: var(--ink);
}
.detail-content {
  padding: 40px;
  flex: 1;
}

/* Tabs */
.panel-tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 30px;
  padding-bottom: 5px;
}
.panel-tab-btn {
  background: none;
  border: none;
  padding: 8px 0;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}
.panel-tab-btn:hover {
  color: var(--ink);
}
.panel-tab-btn.active {
  color: var(--ink);
}
.panel-tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ink);
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

/* Product facts table */
.facts-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.facts-table tr {
  border-bottom: 1px solid var(--border);
}
.facts-table tr:last-child {
  border-bottom: none;
}
.facts-table td {
  padding: 12px 0;
  font-size: 0.95rem;
  vertical-align: top;
}
.facts-table td.label-col {
  font-weight: 600;
  color: var(--ink);
  width: 32%;
}
.facts-table td.val-col {
  color: var(--ink);
}

/* Pros and Cons list */
.pros-cons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 15px;
}
.pc-col h4 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pc-col.pros h4 { color: #10b981; }
.pc-col.cons h4 { color: #ef4444; }
.pc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-list li {
  font-size: 0.9rem;
  color: var(--ink);
  position: relative;
  padding-left: 18px;
}
.pc-col.pros .pc-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: bold;
}
.pc-col.cons .pc-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ef4444;
  font-size: 1.2rem;
  line-height: 0.9;
}

/* Image grid in panel */
.panel-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.panel-img-wrapper {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.panel-img-wrapper img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* Reviews styles */
.panel-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}
.review-card {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.review-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.review-author {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.review-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink) !important;
  line-height: 1.45;
}

/* Review Form */
.review-form {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 24px;
  border-radius: 18px;
}
.review-form h4 {
  margin: 0 0 15px;
  color: var(--ink);
}
.review-form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 12px;
}
.review-form input, .review-form textarea, .review-form select {
  font-family: inherit;
  font-size: 0.92rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  background: var(--bone);
  color: var(--ink);
  outline: none;
  width: 100%;
}
.review-form input:focus, .review-form textarea:focus, .review-form select:focus {
  border-color: var(--ink);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .detail-panel {
    width: 100%;
    right: -100%;
  }
  .pros-cons-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== Header Navigation Dropdown ===== */
.nav-dropdown {
  position: relative;
  display: inline-block;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--paper);
  min-width: 190px;
  box-shadow: 0 10px 30px rgba(20,10,40,0.12);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.nav-dropdown:hover .nav-dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block !important;
  padding: 10px 20px !important;
  font-size: 0.88rem !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s;
  border-bottom: none !important;
  margin: 0 !important;
  text-align: left !important;
}
.nav-dropdown-menu a:hover {
  background: var(--bone-2) !important;
  color: var(--ink) !important;
}

/* Triangle indicator */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent var(--border) transparent;
}
.nav-dropdown-menu::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent var(--paper) transparent;
  margin-bottom: -1px;
}


/* Disable gold hover underline for dropdown sub-menu links */
.nav-links .nav-dropdown-menu a::after {
  display: none !important;
}

/* Mobile responsive inline dropdown adjustments */
@media (max-width: 960px) {
  .nav-links .nav-dropdown {
    width: 100%;
    text-align: center;
  }
  .nav-links .nav-dropdown-trigger {
    justify-content: center;
    width: 100%;
  }
  .nav-links .nav-dropdown-trigger .chevron {
    display: none !important;
  }
  .nav-links .nav-dropdown-menu {
    display: block !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    border: none !important;
    padding: 10px 0 0 0 !important;
    background: transparent !important;
    width: 100% !important;
    text-align: center !important;
  }
  .nav-links .nav-dropdown-menu a {
    text-align: center !important;
    padding: 8px 0 !important;
    font-size: 0.95rem !important;
    color: var(--ink-soft) !important;
  }
  .nav-links .nav-dropdown-menu a:hover {
    background: transparent !important;
    color: var(--ink) !important;
  }
}


/* ===== Grouped Category Heading Styles ===== */
.category-group-header {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  color: var(--ink);
  margin: 50px 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 10px;
  width: 100%;
}
.category-group-header span {
  font-size: 1.8rem;
}
.niche-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}
.health-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin: 22px 0 64px;
}
.health-category-card {
  min-height: 228px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255,250,245,.96), rgba(247,241,236,.78)),
    radial-gradient(circle at 90% 12%, rgba(211,154,54,.16), transparent 36%);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.health-category-card:hover {
  transform: translateY(-5px);
  border-color: rgba(109,62,216,.32);
  box-shadow: var(--shadow);
}
.health-category-card h3 {
  font-size: 1.35rem;
  margin: 0;
}
.health-category-card p {
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
.health-category-count,
.health-category-tags {
  color: var(--cherry);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.health-category-tags {
  color: var(--matcha);
  letter-spacing: .08em;
}
.category-group-section {
  margin-bottom: 50px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.category-group-section.hidden {
  display: none !important;
}


/* ===== Contrast Fixes for Featured (Editor's Choice) Cards ===== */
.price-card.featured h3 {
  color: #ffffff !important;
}
.price-card.featured p, 
.price-card.featured .price-desc {
  color: rgba(245, 241, 251, 0.9) !important; /* Soft light text */
}
.price-card.featured div {
  color: var(--gold-1) !important; /* Make stars stand out in bright gold */
}

/* ===== Scroll-stopping editorial refresh ===== */
h1,h2,h3,h4{letter-spacing:0}
.section-head h2,.about-grid h2,.atelier-caption h2,.hero-title{letter-spacing:0}

.bg-mesh{
  opacity:.55;
  filter:none;
  mix-blend-mode:normal;
  background:
    linear-gradient(90deg,rgba(36,25,54,.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(36,25,54,.03) 1px,transparent 1px);
  background-size:42px 42px;
}
.blob{display:none}

body.home .hero{
  min-height:calc(100vh - 74px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-items:center;
  padding:54px 0 28px;
  background:
    linear-gradient(180deg,rgba(247,241,236,.9) 0%,rgba(247,241,236,.58) 58%,var(--bone) 100%),
    linear-gradient(115deg,#f7f1ec 0%,#efe2dc 42%,#e7edd8 73%,#fffaf5 100%);
}
body.home .hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(36,25,54,.08) 1px,transparent 1px),
    linear-gradient(180deg,rgba(36,25,54,.06) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 80%);
}
body.home .hero::after{
  content:"";
  display:none;
}
body.home::after{
  content:"POWDEREDPURPLE";
  position:fixed;
  left:50%;
  top:22%;
  transform:translateX(-50%);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(4.8rem,11vw,9.8rem);
  line-height:1;
  letter-spacing:.12em;
  color:transparent;
  -webkit-text-stroke:1.2px rgba(109,62,216,.16);
  -webkit-text-stroke-width:1.2px;
  -webkit-text-stroke-color:rgba(109,62,216,.16);
  text-stroke:1.2px rgba(109,62,216,.16);
  text-shadow:
    0 0 18px rgba(211,154,54,.16),
    1px 1px 0 rgba(236,216,170,.08),
    -1px -1px 0 rgba(109,62,216,.05);
  white-space:nowrap;
  pointer-events:none;
  z-index:2;
  mix-blend-mode:multiply;
}
.hero-bg-stage{
  position:absolute;
  inset:0;
  max-width:1440px;
  margin:0 auto;
  z-index:1;
  pointer-events:none;
  transform:translate3d(calc(var(--mx, 0px) * .25),calc(var(--my, 0px) * .18),0);
  transition:transform .35s var(--ease);
}
.hero-artifact{
  position:absolute;
  width:172px;
  margin:0;
  overflow:hidden;
  border-radius:8px;
  border:1px solid rgba(36,25,54,.16);
  background:rgba(255,250,245,.76);
  box-shadow:0 26px 60px -34px rgba(36,25,54,.5);
  backdrop-filter:blur(10px);
  opacity:.86;
}
.hero-artifact img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.04) contrast(1.02)}
.hero-artifact figcaption{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  padding:7px 9px;
  border-radius:7px;
  background:rgba(255,250,245,.82);
  color:var(--ink);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-artifact-lg{left:7%;top:16%;height:236px;transform:rotate(-5deg)}
.hero-artifact-tall{right:9%;top:13%;width:150px;height:268px;transform:rotate(4deg)}
.hero-artifact-wide{left:8%;bottom:3%;width:226px;height:142px;transform:rotate(3deg)}
.hero-artifact-small{right:13%;bottom:2%;width:150px;height:190px;transform:rotate(-6deg)}
.hero-shell{
  position:relative;
  z-index:2;
  width:min(100%,1040px);
  max-width:1040px;
  text-align:center;
}
.hero-logo{
  height:58px;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  filter:drop-shadow(0 18px 34px rgba(36,25,54,.18));
}
.hero-badge{
  background:rgba(255,250,245,.86);
  border-color:rgba(36,25,54,.16);
  color:var(--ink-soft);
  margin-bottom:18px;
}
.pulse-dot{background:var(--matcha)}
.hero-title{
  max-width:20ch;
  margin-bottom:18px;
  font-size:3.9rem;
  text-wrap:balance;
}
.grad-text{
  background:linear-gradient(120deg,var(--royal),var(--cherry) 48%,var(--saffron));
  -webkit-background-clip:text;
  background-clip:text;
}
.hero-sub{
  max-width:760px;
  margin:0 auto 24px;
  font-size:0;
  line-height:0;
  color:transparent;
}
.hero-sub-copy{
  display:block;
  color:var(--ink-soft);
  font-size:1.05rem;
  line-height:1.55;
}
.hero-sub-copy strong{color:var(--ink)}
.hero-cta a[href="#edits"]:not(.hero-library-link){display:none}
.hero-signal-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  max-width:920px;
  margin:24px auto 0;
}
.hero-signal{
  min-height:106px;
  padding:14px;
  border-radius:8px;
  border:1px solid rgba(36,25,54,.15);
  background:rgba(255,250,245,.92);
  box-shadow:var(--shadow-sm);
  text-align:left;
  backdrop-filter:blur(14px);
}
.signal-kicker{
  display:block;
  margin-bottom:10px;
  color:var(--cherry);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hero-signal strong{
  display:block;
  color:var(--ink);
  font-size:.88rem;
  line-height:1.45;
}
.hero-cta{margin-bottom:0}
.hero-trust{display:none}

.stats{
  position:relative;
  z-index:3;
  grid-template-columns:repeat(3,1fr);
  margin-top:-24px;
  background:rgba(36,25,54,.16);
  border-color:rgba(36,25,54,.14);
  box-shadow:var(--shadow);
}
.stat{
  background:rgba(255,250,245,.92);
}
.stat:nth-child(2) .stat-num{color:var(--matcha)}
.stat:nth-child(3) .stat-num{color:var(--cherry)}
.stat:nth-child(4) .stat-num{color:var(--saffron)}

.card,.niche,.price-card,.post,.mini-card,.quote,.step,.product-card,.review-card{
  border-radius:8px;
}
.card:hover,.niche:hover,.post:hover,.quote:hover,.step:hover,.product-card:hover{
  transform:translateY(-5px);
}
.bento .card:nth-child(2),.quote:nth-child(2){
  border-color:rgba(96,122,59,.28);
}
.bento .card:nth-child(3),.quote:nth-child(3){
  border-color:rgba(185,79,93,.28);
}

/* Journal cards share one border colour across every card and interaction state. */
.blog-grid > .post,
.blog-grid > .post:hover,
.blog-grid > .post:focus-visible,
.blog-grid > .post:focus-within,
.featured-post,
.journal-pillar-grid article{
  border-color:#7b3fc6 !important;
}

.atelier{
  background:
    linear-gradient(180deg,#241936 0%,#352348 52%,#f7f1ec 100%);
}
.atelier-stage{
  min-height:92vh;
}
.atelier-caption h2,.atelier-caption p{color:#fff8ef}
.atelier-caption p{color:rgba(255,248,239,.72)}
.atelier-caption .eyebrow{color:var(--gold-2)}
.product-frame{
  border-radius:8px;
  border-color:rgba(255,248,239,.26);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.72);
}
.product-frame .pf-label{
  background:linear-gradient(180deg,transparent,rgba(36,25,54,.88));
}

@media (max-width:1100px){
  body.home::after{font-size:5.6rem;top:20%}
  .hero-artifact-lg{left:1%}
  .hero-artifact-wide{left:3%}
  .hero-artifact-tall{right:1%}
  .hero-artifact-small{right:4%}
}
@media (max-width:860px){
  body.home .hero>.hero-shell{
    width:100%;
    max-width:100%;
    padding:0 28px;
    justify-self:center;
    z-index:2;
  }
  body.home .hero{
    min-height:auto;
    padding-top:78px;
  }
  body.home::after{
    top:20%;
    font-size:4.7rem;
    opacity:.58;
  }
  .hero-bg-stage{
    position:absolute;
    inset:0;
    width:100%;
    height:auto;
    margin:0;
    transform:none;
  }
  .hero-artifact{width:138px}
  .hero-artifact-lg{left:-52px;top:210px;height:178px;opacity:.34}
  .hero-artifact-tall{right:-42px;top:178px;width:118px;height:202px;opacity:.34}
  .hero-artifact-wide{display:none}
  .hero-artifact-small{display:none}
  .hero-title{font-size:3.25rem;max-width:100%}
  .hero-sub,.hero-cta,.hero-signal-grid{max-width:100%}
  .hero-sub-copy{font-size:1.03rem}
  .hero-signal-grid{
    display:flex;
    gap:10px;
    margin-top:24px;
    overflow-x:auto;
    padding:0 0 8px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .hero-signal-grid::-webkit-scrollbar{display:none}
  .hero-signal{
    flex:0 0 252px;
    min-height:96px;
    text-align:left;
    scroll-snap-align:center;
  }
}
@media (max-width:640px){
  .hero-title{font-size:2.55rem}
  .hero-logo{height:58px}
  .hero-cta .btn{width:100%}
  .hero-bg-stage{height:214px}
  .hero-artifact figcaption{font-size:.58rem}
  .stats{margin-top:0}
}


/* Classified product mega menu */
.nav-dropdown{position:relative}.nav-dropdown-row{display:flex;align-items:center;gap:2px}.nav-dropdown-toggle{border:0;background:transparent;color:var(--ink-soft);padding:8px 5px;cursor:pointer;line-height:1;font-weight:800}.nav-dropdown-toggle span{display:block;transition:transform .25s}.nav-dropdown.open .nav-dropdown-toggle span,.nav-dropdown:hover .nav-dropdown-toggle span{transform:rotate(180deg)}
.nav-mega{position:absolute;top:calc(100% + 24px);right:-40px;width:min(620px,calc(100vw - 40px));padding:24px;background:rgba(250,247,252,.99);border:1px solid var(--border);box-shadow:0 30px 80px -30px rgba(33,22,49,.46);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s,visibility .22s,transform .22s;z-index:100}.nav-dropdown:hover .nav-mega,.nav-dropdown:focus-within .nav-mega,.nav-dropdown.open .nav-mega{opacity:1;visibility:visible;transform:none}
.nav-mega-intro{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:baseline;padding-bottom:18px;border-bottom:1px solid var(--border)}.nav-mega-intro span{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pp-orange-edge);font-weight:700}.nav-mega-intro strong{font:600 1.35rem Fraunces,serif}.nav-mega-intro p{grid-column:2;color:var(--muted);font-size:.78rem;margin-top:4px}.nav-mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;padding:22px 0}.nav-mega-grid > div + div{padding-left:28px;border-left:1px solid var(--border)}.nav-mega-grid h3{font:700 .8rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}.nav-links .nav-mega-grid a{display:block!important;padding:7px 10px!important;border-radius:6px;font-size:.78rem!important;font-weight:500!important;color:var(--muted)!important}.nav-links .nav-mega-grid a::after,.nav-links .nav-mega-all::after{display:none!important}.nav-links .nav-mega-grid a:hover,.nav-links .nav-mega-grid a:focus-visible{color:var(--pp-orange-ink)!important;background:var(--pp-orange-face)}.nav-mega-all{display:flex!important;justify-content:space-between;align-items:center;background:var(--ink);color:#fff!important;padding:13px 16px!important;font-size:.78rem!important;font-weight:700!important}.nav-links .nav-mega-all:hover,.nav-links .nav-mega-all:focus-visible{background:var(--pp-orange-face-open);color:var(--pp-orange-ink)!important}.nav-mega-all span{font-size:1.15rem}
@media(max-width:960px){.nav-dropdown{width:100%}.nav-dropdown-row{justify-content:center}.nav-dropdown-link{padding:0!important}.nav-dropdown-toggle{padding:8px}.nav-mega{display:none;position:static!important;width:100%!important;padding:16px!important;margin-top:8px;opacity:1!important;visibility:visible!important;transform:none!important;box-shadow:none!important;background:rgba(255,255,255,.6)!important}.nav-dropdown.open .nav-mega{display:block}.nav-dropdown:hover .nav-mega:not(:focus-within){display:none}.nav-dropdown.open:hover .nav-mega{display:block}.nav-mega-intro{display:block}.nav-mega-intro strong{display:block;margin:7px 0}.nav-mega-grid{grid-template-columns:1fr;padding:14px 0;gap:14px}.nav-mega-grid > div + div{padding-left:0;border-left:0}.nav-links .nav-mega-grid a{text-align:center!important}.nav-mega-all{justify-content:center!important;gap:12px}}

/* Button finish: white base, gold outline, ORANGE on hover.
   The article pages have their own button rules, so the orange hover has to be
   stated here too or half the site keeps the old ink hover. Tokens come from
   nav-rail.css, which both stylesheets load. The gold edge now runs vertically
   - light top and bottom, deepest through the middle - matching premium.css. */
.btn,
.btn-primary,
.btn-ghost,
.btn-secondary {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--pp-gold-face) border-box !important;
  border: 1.5px solid transparent !important;
  border-width: 1.5px !important;
  color: var(--ink, #211631) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(159,106,18,.12),
    0 10px 26px -20px rgba(33,22,49,.5) !important;
}
.btn::after,
.btn-primary::after,
.btn-ghost::after,
.btn-secondary::after {
  content: "";
  position: absolute;
  inset: 2px 12%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
  opacity: .42;
  pointer-events: none;
  z-index: -1;
}
.btn:hover,
.btn:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-ghost:hover,
.btn-ghost:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background:
    var(--pp-orange-face) padding-box,
    var(--pp-orange-face-open) border-box !important;
  border-color: transparent !important;
  border-width: 1.5px !important;
  /* Ink, not white: #f97316 against white is 2.8:1 and fails AA. */
  color: var(--pp-orange-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 16px 36px -18px rgba(194,65,12,.6) !important;
}
.btn:hover::after,
.btn:focus-visible::after,
.btn-primary:hover::after,
.btn-primary:focus-visible::after,
.btn-ghost:hover::after,
.btn-ghost:focus-visible::after,
.btn-secondary:hover::after,
.btn-secondary:focus-visible::after {
  opacity: 0;
}
.footer .btn,
.footer .btn-primary,
.footer .btn-ghost,
.footer .btn-secondary {
  color: var(--ink, #211631) !important;
}
.footer .btn:hover,
.footer .btn:focus-visible,
.footer .btn-primary:hover,
.footer .btn-primary:focus-visible,
.footer .btn-ghost:hover,
.footer .btn-ghost:focus-visible,
.footer .btn-secondary:hover,
.footer .btn-secondary:focus-visible {
  color: #fff !important;
}


/* ===== Standardised affiliate disclosure (compliance) ===== */
/* Rakuten's network policy (13 July 2026) requires the disclosure to be
   larger than the main text it precedes, in a colour that is not black or
   grey, and readable without scrolling. .prose is 1.12rem, so stay above it. */
.top-disclosure{
  display:block;border:2px solid #7b3fc6;border-left-width:6px;background:#f6f0ff;
  color:#4b246f;padding:16px 18px;margin:0 0 30px;font-size:1.2rem;line-height:1.55;
  font-weight:500;font-style:normal;border-radius:4px;
}
.top-disclosure strong{color:#7b3fc6;font-weight:800}
.top-disclosure a{color:#7b3fc6;text-decoration:underline}

/* Editorial (non-monetised) notice — distinct from the violet paid disclosure
   so a reader can tell at a glance whether a page carries compensation. */
.editorial-notice{
  display:block;border:1px solid rgba(33,22,49,.14);border-left:6px solid #758a55;
  background:#f7f8f4;color:#2f3a24;padding:16px 18px;margin:0 0 30px;
  font-size:1.2rem;line-height:1.55;font-weight:500;border-radius:4px;
}
.editorial-notice strong{color:#758a55;font-weight:800}
.editorial-notice a{color:#758a55;text-decoration:underline}
.retail-availability{
  margin:14px 0 0;padding:12px 14px;background:#faf8f5;
  border:1px dashed rgba(33,22,49,.14);border-radius:4px;font-size:.95rem;
}
.link-note{
  display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;
  background:#eef1e8;color:#41502e;font-size:.75rem;font-weight:700;white-space:nowrap;
}
.claim-attribution{
  font-size:.95rem;font-style:italic;border-left:3px solid rgba(33,22,49,.14);
  padding-left:14px;margin-bottom:14px;
}


/* ===== Article rating: polished gold stars, thin purple edge ===== */
.pp-rating{
  max-width:640px;margin:56px auto 0;padding:34px 30px;text-align:center;
  background:linear-gradient(168deg,#fffdf9 0%,#faf5ff 100%);
  border:1px solid #e6dcf5;border-radius:20px;
  box-shadow:0 18px 44px -30px rgba(75,36,111,.45);
}
.pp-rating-defs{position:absolute;width:0;height:0;overflow:hidden}
.pp-rating-head h3,.pp-rating-head h4{
  font-family:'Fraunces',Georgia,serif;font-size:1.35rem;color:#2a1d45;margin:0 0 6px;
}
.pp-rating-head p{font-size:.94rem;color:#6b5c80;margin:0}

.pp-stars{display:flex;justify-content:center;gap:10px;margin:20px 0 16px}
.pp-star-btn{
  -webkit-appearance:none;appearance:none;border:0;background:none;padding:2px;margin:0;
  cursor:pointer;line-height:0;border-radius:10px;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.pp-star-btn:hover,.pp-star-btn.preview{transform:translateY(-3px) scale(1.1)}
.pp-star-btn:active{transform:translateY(-1px) scale(1.02)}
.pp-star-btn:focus-visible{outline:2px solid #7b3fc6;outline-offset:3px}

.pp-star{width:44px;height:44px;display:block;overflow:visible}

/* unrated: soft lilac face */
.pp-star-fill{fill:#ece4f7;transition:fill .22s ease}
/* thin purple outline, constant weight at any size */
.pp-star-edge{
  fill:none;stroke:#7b3fc6;stroke-width:1;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;opacity:.55;transition:opacity .22s ease;
}
/* the travelling highlight, hidden until the star is lit */
.pp-star-sheen{fill:url(#ppSheen);opacity:0;transform:translateX(0)}

/* lit state: metallic gold + glow + glisten */
.pp-star-btn.on .pp-star-fill{fill:url(#ppGold)}
.pp-star-btn.on .pp-star-edge{opacity:1}
.pp-star-btn.on .pp-star{
  filter:drop-shadow(0 1px 1px rgba(140,90,0,.35)) drop-shadow(0 3px 10px rgba(233,175,40,.55));
}
.pp-star-btn.on .pp-star-sheen{opacity:1;animation:ppSheenSweep 2.8s ease-in-out infinite}
.pp-star-btn.on:nth-child(2) .pp-star-sheen{animation-delay:.16s}
.pp-star-btn.on:nth-child(3) .pp-star-sheen{animation-delay:.32s}
.pp-star-btn.on:nth-child(4) .pp-star-sheen{animation-delay:.48s}
.pp-star-btn.on:nth-child(5) .pp-star-sheen{animation-delay:.64s}

@keyframes ppSheenSweep{
  0%{transform:translateX(0)}
  55%{transform:translateX(46px)}
  100%{transform:translateX(46px)}
}

.pp-rating-msg{font-size:.98rem;font-weight:600;color:#4b246f;margin:0 0 6px;min-height:1.4em}
.pp-rating.rated .pp-rating-msg{color:#2a1d45}
.pp-rating-note{font-size:.78rem;color:#8a7b9c;margin:0;line-height:1.5}

@media (max-width:520px){
  .pp-rating{padding:26px 18px;margin-top:40px}
  .pp-star{width:36px;height:36px}
  .pp-stars{gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .pp-star-btn,.pp-star-btn:hover,.pp-star-btn.preview{transition:none;transform:none}
  .pp-star-btn.on .pp-star-sheen{animation:none;opacity:0}
}

/* ===== Related products on Journal articles ===== */
.pp-related{max-width:740px;margin:56px auto 0;padding-top:40px;border-top:1px solid var(--border)}
.pp-related-head{margin-bottom:20px}
.pp-related-head h3{font-family:'Fraunces',Georgia,serif;font-size:1.7rem;color:var(--ink);margin:8px 0 0;line-height:1.2}
.pp-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:22px}
.pp-related-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--border);border-radius:14px;overflow:hidden;text-decoration:none;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.pp-related-card:hover{transform:translateY(-4px);border-color:#7b3fc6;box-shadow:0 18px 38px -26px rgba(75,36,111,.55)}
.pp-related-media{aspect-ratio:1/1;background:#f3eefb;display:grid;place-items:center;overflow:hidden}
.pp-related-media img{width:100%;height:100%;object-fit:cover}
.pp-related-noimg{width:44px;height:44px;border-radius:50%;background:linear-gradient(140deg,#cbb6f2,#7b3fc6);opacity:.5}
.pp-related-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.pp-related-body small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#7b3fc6}
.pp-related-body h4{font-size:1.02rem;line-height:1.3;color:var(--ink);margin:0}
.pp-related-body p{font-size:.86rem;line-height:1.5;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pp-related-cta{margin-top:auto;padding-top:8px;font-size:.82rem;font-weight:700;color:#7b3fc6}
.pp-related-all{display:inline-block;margin-top:22px;font-size:.9rem;font-weight:700;color:#7b3fc6;text-decoration:underline}
@media (max-width:520px){
  .pp-related{margin-top:40px;padding-top:30px}
  .pp-related-grid{grid-template-columns:1fr}
  .pp-related-media{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){
  .pp-related-card,.pp-related-card:hover{transition:none;transform:none}
}

/* Search affordance inside the related-products block */
.pp-related-head p{margin:8px 0 0;color:var(--muted);font-size:.95rem;line-height:1.6}
.pp-related-search{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.pp-related-search input{flex:1 1 220px;min-width:0;padding:12px 14px;font:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--border);border-radius:10px}
.pp-related-search input:focus{outline:none;border-color:#7b3fc6;box-shadow:0 0 0 3px rgba(123,63,198,.15)}
.pp-related-search button{padding:12px 20px;font:inherit;font-size:.92rem;font-weight:700;color:#fff;background:#7b3fc6;border:0;border-radius:10px;cursor:pointer;transition:background .2s ease}
.pp-related-search button:hover{background:#4b246f}
.pp-related-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:.85rem}
.pp-related-chips span{color:var(--muted);font-weight:600}
.pp-related-chips a{padding:6px 13px;border:1px solid #d9c9f2;border-radius:999px;color:#4b246f;background:#f6f0ff;text-decoration:none;font-weight:600;transition:background .18s ease,border-color .18s ease}
.pp-related-chips a:hover{background:#7b3fc6;border-color:#7b3fc6;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:520px){
  .pp-related-search button{flex:1 1 100%}
}

/* ===== Privacy choices banner ===== */
.pp-privacy-banner{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:9999;display:grid;
  grid-template-columns:minmax(0,1fr);gap:16px;max-width:1140px;margin:0 auto;
  max-height:min(82dvh,680px);overflow-y:auto;padding:24px 28px;
  background:linear-gradient(135deg,#f5effb 0%,#ebe1f7 100%);
  border:1.5px solid #7b3fc6;border-radius:10px;
  box-shadow:0 26px 70px -30px rgba(33,22,49,.62),0 0 0 5px rgba(123,63,198,.08);color:#211631;
}
.pp-privacy-copy{max-width:74ch}
.pp-privacy-heading{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px;min-width:0}
.pp-privacy-banner strong{display:block;color:#211631;font-weight:900;margin-bottom:4px}
.pp-privacy-banner p{margin:0;color:#40304f;font-size:.92rem;line-height:1.5;max-width:68ch;overflow-wrap:anywhere}
.pp-privacy-banner a{display:inline-block;margin-top:8px;color:#7b3fc6;font-size:.88rem;font-weight:800;text-decoration:underline}
.pp-privacy-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.pp-privacy-actions .btn{min-height:48px;padding:12px 14px;white-space:normal;overflow-wrap:anywhere;font-size:.86rem;line-height:1.25}
.pp-privacy-actions .btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.pp-privacy-details{padding-top:16px;border-top:1px solid rgba(96,56,145,.22);color:#40304f}
.pp-privacy-details strong{margin-bottom:2px}
.pp-privacy-details-heading{margin-bottom:12px}
.pp-privacy-options{display:grid;gap:10px;margin:0;padding:0;border:0}
.pp-privacy-option{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;padding:12px 14px;background:rgba(255,255,255,.66);border:1px solid rgba(96,56,145,.24);border-radius:8px;cursor:pointer}
.pp-privacy-option:hover{background:rgba(255,255,255,.9);border-color:rgba(96,56,145,.5)}
.pp-privacy-option input{width:18px;height:18px;margin:2px 0 0;accent-color:#7b3fc6}
.pp-privacy-option strong{margin:0;color:#211631}
.pp-privacy-option small{display:block;margin-top:3px;color:#40304f;font-size:.82rem;line-height:1.45}
.pp-privacy-essential{display:grid;grid-template-columns:minmax(150px,.35fr) minmax(0,1fr);gap:12px;padding:12px 14px;color:#40304f;background:rgba(255,255,255,.36);border-left:3px solid #7b3fc6;border-radius:0 7px 7px 0;font-size:.84rem;line-height:1.45}
.pp-privacy-essential strong{margin:0;color:#211631}
.pp-privacy-detail-actions{display:flex;align-items:center;gap:12px;margin-top:14px}.pp-privacy-detail-actions .btn{min-height:44px;padding:10px 16px}.pp-privacy-status{color:#40304f;font-size:.82rem;font-weight:700}
.pp-privacy-gpc{margin-top:8px!important;color:#5c287c!important}
@media (max-width:880px){
  .pp-privacy-banner{left:12px;right:12px;bottom:12px;max-height:calc(100dvh - 24px);padding:20px}
  .pp-privacy-heading{grid-template-columns:1fr;gap:4px}
  .pp-privacy-actions{grid-template-columns:1fr}
  .pp-privacy-actions .btn{width:100%}
  .pp-privacy-essential{grid-template-columns:1fr;gap:4px}
}

/* Compliance evidence attached to every Journal article. */
.pp-editorial-sources{margin:36px 0;padding:20px 22px;background:#fff;border:1.5px solid #d79a37;border-radius:8px;box-shadow:0 16px 34px -30px rgba(33,22,49,.45)}
.pp-editorial-sources h2{margin:0 0 8px;font-size:1.12rem;color:var(--ink)}
.pp-editorial-sources p{margin:0;color:var(--muted);line-height:1.6}
.pp-editorial-sources a{color:#5d2d9d;font-weight:800;text-decoration:underline}

/* Editorial status uses a compact label/value grid across every Journal article. */
.pp-editorial-status dl{
  display:grid;
  grid-template-columns:minmax(150px,.7fr) minmax(0,1.6fr);
  column-gap:28px;
  margin:0;
}
.pp-editorial-status dt,
.pp-editorial-status dd{
  margin:0;
  padding:12px 0;
  border-top:1px solid var(--line,#e7ded5);
  line-height:1.5;
}
.pp-editorial-status dt{
  color:var(--ink,#21132f);
  font-weight:800;
}
.pp-editorial-status dd{color:var(--muted,#514260)}
.pp-editorial-status dt:first-of-type,
.pp-editorial-status dd:first-of-type{
  border-top:0;
  padding-top:0;
}
.pp-editorial-status a{color:#5d2d9d;font-weight:700;text-decoration:underline}
@media (max-width:640px){
  .pp-editorial-status dl{grid-template-columns:1fr;column-gap:0}
  .pp-editorial-status dt{border-top:1px solid var(--line,#e7ded5);padding-bottom:3px}
  .pp-editorial-status dd{border-top:0;padding-top:0}
  .pp-editorial-status dt:first-of-type{padding-top:0}
}

/* Shared navigation interaction states: predictable focus and a clear open menu. */
.nav-inner{position:relative}
.nav-toggle{position:relative;z-index:2;border-radius:6px}
.nav-toggle:focus-visible{outline:2px solid var(--purple,#7b3fc6);outline-offset:4px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:960px){
  .nav-links a[aria-current="page"]{font-weight:800;color:var(--ink)}
  .nav-links a[aria-current="page"]::before{content:"";display:inline-block;width:20px;height:2px;margin:0 8px 3px 0;background:var(--gold)}
}

/* Final shared navigation contract: one active colour, no mixed underlines. */
.nav-links>a,.nav-dropdown-link{display:inline-flex;align-items:center}
.nav-links>a::after,.nav-dropdown-link::after{display:none!important}
.nav-links>a:hover,.nav-dropdown-link:hover{color:var(--ink-soft);background:transparent;border-color:transparent}
.nav-links>a[aria-current="page"],.nav-dropdown-link[aria-current="page"]{color:#fff!important;background:var(--purple,#7b3fc6);border-color:var(--purple,#7b3fc6);border-radius:999px;box-shadow:0 8px 18px -14px rgba(33,22,49,.8);font-weight:800}
.nav-links>a[aria-current="page"]::before,.nav-dropdown-link[aria-current="page"]::before{display:none}

/* Keep the Journal active state identical to every other primary item. */
.nav-links>a[href$="blog.html"][aria-current="page"]{color:#fff!important;background:var(--purple,#7b3fc6)!important;border-color:var(--purple,#7b3fc6)!important;border-radius:999px;box-shadow:0 8px 18px -14px rgba(33,22,49,.8);font-weight:800}

/* Navigation layout contract: keep one stable brand slot and preserve menu
   geometry when the active item changes state. */
.nav-inner{display:grid;grid-template-columns:minmax(220px,auto) minmax(0,1fr) auto;align-items:center;column-gap:24px}
.nav-inner>.logo{grid-column:1;justify-self:start;min-width:0}
.nav-inner>.nav-links{grid-column:2;justify-self:end;min-width:0;flex-wrap:nowrap;gap:8px}
.nav-inner>.nav-toggle{grid-column:3;justify-self:end}
.nav-links>a,.nav-dropdown-link{font-family:'Inter',Arial,sans-serif;font-size:.85rem;font-weight:700;line-height:1;white-space:nowrap}
.nav-links>a[aria-current="page"],.nav-dropdown-link[aria-current="page"]{font-weight:700}
.nav-links .nav-dropdown-row{align-items:center}

/* Use one desktop navigation rhythm across legacy and refreshed page shells. */
@media (min-width:761px){
  .nav-links{gap:8px}
  .nav-links>a,.nav-dropdown-link{display:inline-flex;align-items:center;min-height:42px;padding:8px 12px;box-sizing:border-box;font-size:.85rem;font-weight:750;letter-spacing:.01em}
}

@media (max-width:960px){
  .nav-inner{grid-template-columns:1fr auto;column-gap:12px}
  .nav-inner>.nav-links{grid-column:1 / -1;justify-self:stretch;flex-wrap:wrap}
  .nav-inner>.nav-toggle{grid-column:2;grid-row:1}
}

/* Match the premium header surface used by the homepage and catalogue. */
.nav{background:rgba(250,246,241,.9);border-bottom-color:var(--border);box-shadow:0 8px 22px rgba(40,22,58,.035)}

/* Keep brand marks and social labels optically centered on every page. */
.logo{align-items:center;line-height:1}
.logo-img{display:block;flex:0 0 40px;align-self:center}
.logo-text{display:inline-flex;align-items:center;line-height:1;white-space:nowrap}
.footer .logo{align-items:center;line-height:1}
.footer .logo-text{line-height:1}
.footer-social-link{align-items:center;line-height:1;vertical-align:middle}
.footer-social-icon{display:block;flex:0 0 24px;align-self:center}
.footer-social-label{display:inline-flex;align-items:center;line-height:1}
.nav.scrolled{background:rgba(250,246,241,.96);border-bottom-color:var(--border)}

/* Keep every footer brand lockup optically centred. */
.footer .logo{display:inline-flex;align-items:center;justify-content:flex-start;gap:11px;min-height:40px;vertical-align:middle}
.footer .logo-img{display:block;flex:0 0 40px;width:40px;height:40px;object-fit:contain;margin:0;align-self:center}
.footer .logo-text{display:inline-flex;align-items:center;min-height:40px;line-height:1;white-space:nowrap;transform:translateY(1px)}

/* Keep the selected label typographically identical to its siblings. */
.nav-inner .nav-links>a,
.nav-inner .nav-links>a[aria-current="page"],
.nav-inner .nav-dropdown-link,
.nav-inner .nav-dropdown-link[aria-current="page"]{
  font-family:'Inter',Arial,sans-serif;
  font-size:.85rem;
  font-weight:700!important;
  letter-spacing:.01em;
  line-height:1;
}

/* Short answer — the decision-shaped summary that opens a comparison guide.
   Deliberately distinct from .callout, which carries evidence and safety
   notices, so a reader never mistakes a summary for a caution. */
.short-answer{background:linear-gradient(135deg,#f6f1ff 0%,#fbf8ff 100%);border:1.5px solid #c3a9ef;border-radius:var(--radius-sm);padding:22px 26px;margin:0 0 32px}
.short-answer > span{display:block;font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-1);margin-bottom:10px}
.short-answer p{margin:0;font-size:1.02rem;line-height:1.62;color:var(--text)}
.short-answer p + p{margin-top:10px}
.short-answer strong{color:var(--navy-2)}
@media(max-width:620px){.short-answer{padding:18px 20px}.short-answer p{font-size:.96rem}}


/* ===== Product Card Interactive Thumbnail Carousel ===== */
.catalog-card-thumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--paper, #fff);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.catalog-card-thumbs::-webkit-scrollbar {
  display: none;
}
.catalog-thumb-btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 2px;
  border-radius: 6px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* This was the one orange already on the site, at #e67a00. It now uses the
   shared tokens so it matches every other orange state, and hover and selected
   are told apart the same way they are elsewhere: mid orange for hover, the
   deeper tone for the thumbnail actually showing. */
.catalog-thumb-btn:hover,
.catalog-thumb-btn:focus-visible {
  border-color: var(--pp-orange);
  box-shadow: 0 0 0 2px var(--pp-orange);
  transform: scale(1.05);
}
.catalog-thumb-btn.is-active {
  border-color: var(--pp-orange-deep);
  box-shadow: 0 0 0 2px var(--pp-orange-deep);
  transform: scale(1.05);
}
.catalog-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}


/* Footer social row (Facebook, Instagram, TikTok, Pinterest).
   The links keep .footer-social-link so they inherit the existing icon and
   label treatment; only the layout is new. Selectors are qualified through
   .footer so they outrank the blanket .footer-grid a / .footer-social-link
   margins declared earlier in this sheet. */
.footer .footer-social{display:grid;grid-template-columns:repeat(2,max-content);align-items:center;gap:12px 22px;margin-top:18px}
.footer .footer-social .footer-social-link{margin:0}
@media (max-width:300px){
  .footer .footer-social{grid-template-columns:max-content}
}

/* Comparison-matrix pills.
   These were declared only as .pp-refresh .matrix-winner/.matrix-neutral in
   premium.css, but the one page that uses them - the magnesium comparison
   article - loads this sheet and has no pp-refresh class on <body>, so both
   pills rendered as unstyled inline text. Same values, unprefixed. */
.matrix-winner,
.matrix-neutral{display:inline-block;padding:4px 8px;border-radius:6px;font-weight:750;font-size:.75rem}
.matrix-winner{background:#e8f4e2;color:#2c631b}
.matrix-neutral{background:#f3eef8;color:#5d2d9d}

/* Journal pre-launch refresh: bring the article images into the first screen. */
.skip-link{position:fixed;top:10px;left:10px;z-index:9999;background:#fff;padding:10px 14px;border-radius:8px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.journal-page .journal-hero{padding:40px 0 20px;text-align:left}
.journal-page .journal-hero h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.1;max-width:23ch;margin:0 0 18px}
.journal-page .journal-hero p{margin:0;max-width:70ch}
.journal-page .blog-filters{justify-content:flex-start;margin-top:24px}
.journal-page .reveal{opacity:1;transform:none}
.journal-page .editorial-standard{margin:0 0 24px;border:1px solid #d4c4e8;border-radius:10px;background:#eee7f7;overflow:hidden}
/* Same accordion contract as the product panels: orange on hover, and an
   open header keeps a deeper orange so it marks the panel being read.
   Padding moved off the <details> and onto the parts, so the header fill
   reaches the panel edges instead of floating inside a gutter. */
.journal-page .editorial-standard summary{cursor:pointer;font-weight:600;color:#4b246f;padding:14px 18px;list-style:none;transition:background .2s ease,color .2s ease}
.journal-page .editorial-standard summary::-webkit-details-marker{display:none}
.journal-page .editorial-standard summary:hover{background:var(--pp-orange-face);color:var(--pp-orange-ink)}
.journal-page .editorial-standard[open] > summary{background:var(--pp-orange-face-open);color:var(--pp-orange-ink)}
.journal-page .editorial-standard summary:focus-visible{outline:2px solid var(--pp-orange-edge);outline-offset:-2px}
.journal-page .editorial-standard > :not(summary){padding:0 18px 14px}
.journal-page .journal-pillar-grid{margin:20px 0 0}
.journal-page a:focus-visible,.journal-page button:focus-visible,.journal-page summary:focus-visible{outline:3px solid #7b3fc6;outline-offset:4px}
@media(max-width:700px){.journal-page .journal-hero{padding-top:28px}.journal-page .journal-hero h1{max-width:none}.journal-page .journal-pillar-grid{grid-template-columns:1fr}}