:root{--vape-accent:#5ac8fa;--vape-accent-2:#7ef1d7}
/* inherit hemp-brief styles if present */

/* Hemp education formatted section */
.hemp-brief{background:var(--bg-900,#1F2328);padding:56px 18px 80px}
.hemp-wrap{max-width:980px;margin:0 auto}
.hemp-title{color:#f1f6fb;font-weight:800;letter-spacing:.2px;line-height:1.15;
  font-size:clamp(26px,3.8vw,44px);margin:0 0 10px}
.hemp-sub{color:#9fb0bf;margin:0 0 26px}

.hemp-grid{display:grid;grid-template-columns:240px 1fr;gap:26px}
@media (max-width: 920px){.hemp-grid{grid-template-columns:1fr}}

.toc{position:sticky;top:90px;align-self:start;background:rgba(17,21,25,.8);
  border:1px solid rgba(255,255,255,.06);backdrop-filter:saturate(130%) blur(6px);
  border-radius:14px;padding:16px 14px;color:#cbd7e3}
.toc h4{margin:0 0 10px;font-size:14px;color:#eaf2f8;font-weight:800}
.toc a{display:block;padding:8px 10px;border-radius:10px;color:#b8c7d6;text-decoration:none;font-size:14px}
.toc a:hover{background:rgba(32,209,194,.12);color:#eaf7f7}

.article{display:flex;flex-direction:column;gap:22px}
.section-card{background:rgba(16,20,24,.86);border:1px solid rgba(255,255,255,.06);
  border-radius:16px;padding:20px 20px 22px;color:#dfe9f4;box-shadow:0 14px 36px rgba(0,0,0,.34)}
.section-card h3{color:#f2f7fb;margin:0 0 10px;font-size:clamp(18px,2.4vw,26px)}
.section-card h4{margin:8px 0 8px;color:#eaf2f8}
.section-card p{margin:0 0 12px;line-height:1.75}
.section-card ul{margin:8px 0 4px 1.2rem;line-height:1.7}
.note{border-left:4px solid #20d1c2;padding-left:12px;color:#cfe9e6}
.caution{border-left:4px solid #ff7b72;padding-left:12px;color:#ffd8d4}
.rule{border-left:4px solid #88d2ff;padding-left:12px;color:#d6ecff}

.pull{font-size:clamp(17px,2vw,20px);font-style:italic;color:#e9f4f1;background:linear-gradient(90deg,rgba(32,209,194,.12),transparent 70%);
  padding:10px 12px;border-radius:10px}

/* Vape page tweaks */
.vape-brief .lead{max-width:900px;margin:0 auto 24px;color:#d8e2eb;opacity:.95}
.vape-brief .hero{background:linear-gradient(120deg,#0d1b26,#0b2233);border-radius:28px;padding:28px;margin:0 0 28px;position:relative;overflow:hidden}
.vape-brief .hero svg{position:absolute;inset:auto -80px -120px auto;opacity:.35}
.vape-brief .toc{position:sticky;top:88px;align-self:flex-start}
.vape-brief .toc a{color:#a6e8ff}
.vape-brief .toc a.active{color:#081b29;background:var(--vape-accent);}
.vape-brief .card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.vape-brief h2.section-title{display:flex;align-items:center;gap:10px}
.vape-brief h2.section-title svg{width:28px;height:28px}
    

/* Center the Vape Education sections on the page */
.vape-brief .container{
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 2.5vw, 32px);
}

/* Small polish: tighten hero spacing on very wide screens */
.vape-brief .hero.container{ margin-top: 8px; }


/* Align hero card's RIGHT edge with the content column (to the right of the TOC) */
.vape-brief .hero.container{
  width: calc(100% - (280px + 28px)); /* container width minus TOC (280) and gap (28) */
  margin-left: auto;                  /* push it to the right so right edges line up */
}

/* On smaller screens, let the hero go full width */
@media (max-width: 980px){
  .vape-brief .hero.container{ width: 100%; }
}