/* Supporting-page styles (collection, subscribe, lab results, quiz, about, FAQ, contact, policies) */

/* Mobile menu + age gate (chrome.js) */
.drawer{position:fixed;inset:0;z-index:90;background:#fff;transform:translateX(-100%);transition:transform .25s;display:flex;flex-direction:column;padding:2rem var(--gutter);gap:4px;overflow:auto}
.drawer.on{transform:none}
.drawer a{font-family:var(--head);text-transform:uppercase;font-size:2.4rem;padding:16px 0;border-bottom:1px solid var(--line);color:var(--purple)}
.drawer .x{align-self:flex-end;width:44px;height:44px;font-size:3rem;line-height:1}
.drawer small a{font-family:var(--body);text-transform:none;font-size:1.8rem;border:0;color:#000;font-weight:500}
.gate{position:fixed;inset:0;z-index:100;background:rgba(40,8,70,.86);display:grid;place-items:center;padding:20px}
.gate__box{background:var(--purple);color:#fff;border-radius:25px;border:2.5px solid #000;box-shadow:10px 10px 0 #000;max-width:440px;width:100%;padding:4rem 3rem;text-align:center;display:grid;gap:1.8rem;justify-items:center}
.gate__box img{width:180px}
.gate__row{display:flex;gap:12px;width:100%}
.gate__row .btn{flex:1;padding-inline:10px}
.gate small{font-size:1.35rem;opacity:.85;line-height:1.35}

/* Page hero band */
.band{padding:5.5rem 0 6rem;position:relative}
.band .lede{margin-top:1.6rem}
.band--split .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:5rem;align-items:center}
.band__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:2.6rem;align-items:center}
.crumbs{font-size:1.5rem;color:var(--mute);padding:18px 0 0}
.crumbs a:hover{text-decoration:underline}
.bg-purple .crumbs,.bg-blue .crumbs,.bg-black .crumbs{color:#fff;opacity:.85;padding:0 0 14px}

/* Collection */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-bottom:2.6rem}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid #000;border-radius:var(--pill);padding:10px 20px;font-weight:600;font-size:1.6rem;min-height:44px;line-height:1.1;background:#fff;transition:background .2s,color .2s;white-space:nowrap}
.chip[aria-pressed=true]{background:#000;color:#fff}
.sortsel{height:44px;border:1.5px solid #000;border-radius:var(--pill);padding:0 40px 0 18px;font:inherit;font-weight:600;font-size:1.6rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center/10px;appearance:none}
.flavors{grid-template-columns:repeat(4,1fr)}
.card[hidden]{display:none}
.count{font-size:1.6rem;color:var(--mute)}
.blend2{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem}
.blend2 article{border:2px solid #000;border-radius:var(--radius);padding:3rem;background:#fff;display:grid;gap:1.2rem;align-content:start}
.blend2 dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:1.8rem}
.blend2 dt{font-weight:600}.blend2 dd{margin:0}

/* Icon/benefit grids */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
@media (min-width:1101px){.perks--4{grid-template-columns:repeat(4,1fr)}}
.perk{border:2px solid #000;border-radius:var(--radius);padding:2.6rem;background:#fff;color:#000;display:grid;gap:8px;align-content:start}
.perk b{font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:2rem;line-height:1}
.perk .num{width:48px;height:48px;border-radius:50%;background:var(--lime);color:var(--forest);font-family:var(--head);display:grid;place-items:center;font-size:2rem;margin-bottom:6px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;counter-reset:s}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;text-align:center}
.stats b{font-family:var(--head);font-weight:400;font-size:clamp(4rem,5vw,6.4rem);line-height:1;display:block;color:var(--purple)}
.stats span{font-weight:600;font-size:2rem;display:block;margin-top:8px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.split--flip>:first-child{order:2}
.split__img{aspect-ratio:1;overflow:hidden}
.split__img img{width:100%;height:100%;object-fit:cover}
.prose{display:grid;gap:1.6rem;font-size:2rem;line-height:1.35}

/* Savings calculator */
.calc{background:#fff;color:#000;border:2.5px solid #000;border-radius:20px;box-shadow:10px 10px 0 #000;padding:3rem;display:grid;gap:2rem}
.calc__row{display:grid;gap:10px}
.calc label{font-weight:600}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{border:1.5px solid #000;border-radius:var(--pill);padding:10px 18px;font-weight:600;font-size:1.6rem;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
.seg input:checked+label{background:#000;color:#fff}
.seg input:focus-visible+label{outline:3px solid var(--blue);outline-offset:2px}
.calc__out{background:var(--lav-pale);border-radius:var(--radius);padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.calc__out b{font-family:var(--head);font-weight:400;font-size:3.2rem;display:block;line-height:1}
.calc__out span{font-size:1.5rem;color:var(--mute)}

/* Lab results */
.labtools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:2rem}
.search{flex:1;min-width:240px;height:48px;border:1.5px solid #000;border-radius:var(--pill);padding:0 20px;font:inherit;font-size:1.7rem}
.coa{width:100%;border-collapse:collapse;font-size:1.8rem}
.coa th{text-align:left;font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:1.4rem;padding:14px 12px;border-bottom:2px solid #000}
.coa td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.coa td:first-child{display:flex;gap:14px;align-items:center;font-weight:600}
.coa img{width:52px;height:52px;border-radius:8px;object-fit:contain;flex:none}
.coa tr[hidden]{display:none}
.coa .ok{color:var(--save);font-weight:600;white-space:nowrap}
.tablewrap{overflow-x:auto;border:2px solid #000;border-radius:var(--radius);background:#fff;padding:0 1rem}
.panels{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.panels li{border:2px solid #000;border-radius:var(--radius);padding:2rem;background:#fff;display:grid;gap:6px;align-content:start}
.panels b{font-weight:600;font-size:2rem}
.panels span{font-size:1.65rem;line-height:1.3}

/* Quiz */
.quiz{max-width:860px;margin:0 auto;padding:4rem 0 7rem}
.quiz__bar{height:10px;border-radius:10px;background:var(--lav);overflow:hidden;margin-bottom:10px}
.quiz__bar i{display:block;height:100%;background:var(--purple);transition:width .3s}
.quiz__meta{display:flex;justify-content:space-between;font-size:1.5rem;font-weight:600;margin-bottom:3rem}
.quiz__meta button{text-decoration:underline;text-underline-offset:3px}
.quiz h1{margin-bottom:10px}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:2.6rem}
.opt{border:2px solid #000;border-radius:var(--radius);background:#fff;padding:2.2rem;text-align:left;display:grid;gap:6px;min-height:110px;align-content:center;transition:transform .15s,box-shadow .15s,background .15s}
.opt:hover,.opt:focus-visible{transform:translate(-3px,-3px);box-shadow:6px 6px 0 #000;background:var(--lav-pale)}
.opt b{font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:2rem;line-height:1}
.opt span{font-size:1.7rem;color:#333;line-height:1.25}
.opt i{font-style:normal;font-size:3rem;line-height:1}
.result{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center;margin-top:3rem}
.result__img{aspect-ratio:1;border-radius:20px;border:2.5px solid #000;box-shadow:10px 10px 0 #000;display:grid;place-items:center;overflow:hidden}
.result__img img{width:84%}
.result__copy{display:grid;gap:1.4rem;justify-items:start}
.why{display:grid;gap:8px;font-size:1.8rem}
.why li{display:flex;gap:10px}
.why li::before{content:"✓";font-weight:700;color:var(--purple)}
.also{margin-top:5rem;border-top:2px solid #000;padding-top:3rem}
.also .grid{grid-template-columns:repeat(3,1fr);margin-top:2rem}

/* Contact */
.form{display:grid;gap:16px}
.form label{display:grid;gap:6px;font-weight:600}
.form input,.form textarea,.form select{border:1.5px solid #000;border-radius:var(--radius);padding:14px 16px;font:inherit;font-size:1.8rem;background:#fff;min-height:52px;width:100%}
.form textarea{min-height:150px;resize:vertical}
.infocards{display:grid;gap:16px}
.infocards div{border:2px solid #000;border-radius:var(--radius);padding:2.2rem;background:#fff}
.infocards b{font-weight:600;font-size:2rem;display:block;margin-bottom:4px}
.infocards a{text-decoration:underline}

/* Policies */
.policy{display:grid;grid-template-columns:260px minmax(0,760px);gap:6rem;padding:4rem 0 8rem;align-items:start}
.policy__nav{position:sticky;top:100px;display:grid;gap:2px}
.policy__nav a{padding:11px 14px;border-radius:8px;font-weight:600;font-size:1.7rem}
.policy__nav a[aria-current]{background:var(--lav)}
.policy__nav a:hover{background:var(--lav-pale)}
.legaltext{display:grid;gap:1.4rem;font-size:1.8rem;line-height:1.5}
.legaltext h1{margin-bottom:.4rem}
.legaltext h2{font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:2.2rem;line-height:1.05;margin-top:2.4rem}
.legaltext h3{font-weight:700;font-size:1.9rem;margin-top:1.2rem}
.legaltext ul{list-style:disc;padding-left:2.4rem;display:grid;gap:6px}
.legaltext a{text-decoration:underline}
.legaltext .updated{color:var(--mute);font-size:1.6rem}
.draft{background:#FFF3B0;border:1.5px dashed #b89b00;border-radius:8px;padding:12px 16px;font-size:1.5rem;color:#5b4a00;line-height:1.4}
.keyfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1rem 0}
.keyfacts div{background:var(--lav-pale);border-radius:var(--radius);padding:1.6rem}
.keyfacts b{font-family:var(--head);font-weight:400;font-size:2.2rem;display:block;line-height:1.05}
.keyfacts span{font-size:1.5rem}
.statelist{display:flex;gap:6px;flex-wrap:wrap}

/* FAQ page */
.faqnav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:3rem}
.faqgroup{margin-bottom:4rem}
.faqgroup h2{margin-bottom:1.6rem}

@media (max-width:1100px){
  .band--split .wrap,.split,.result{grid-template-columns:1fr;gap:3rem}
  .split--flip>:first-child{order:0}
  .flavors{grid-template-columns:repeat(3,1fr)}
  .perks,.steps{grid-template-columns:1fr 1fr}
  .panels{grid-template-columns:1fr 1fr}
  .policy{grid-template-columns:1fr;gap:2rem;padding-top:2rem}
  .policy__nav{position:static;display:flex;overflow-x:auto;gap:6px;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter)}
  .policy__nav a{white-space:nowrap;border:1.5px solid #000;border-radius:var(--pill);padding:9px 16px;font-size:1.5rem}
  .policy__nav a[aria-current]{background:#000;color:#fff}
}
@media (max-width:640px){
  .band{padding:3.6rem 0 4rem}
  .flavors{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .toolbar .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 4px;scrollbar-width:none;max-width:100vw}
  .blend2,.perks,.steps,.stats,.opts,.keyfacts{grid-template-columns:1fr}
  .panels{grid-template-columns:1fr}
  .also .grid{grid-template-columns:1fr 1fr}
  .calc{padding:2rem;box-shadow:6px 6px 0 #000}
  .calc__out b{font-size:2.6rem}
  .coa{font-size:1.6rem}
  .gate__box{padding:3rem 2rem}
  .prose{font-size:1.8rem}
}

/* COA viewer */
.modal{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.7);display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal__box{background:#fff;border-radius:16px;border:2.5px solid #000;box-shadow:10px 10px 0 var(--lime);width:min(1000px,100%);height:min(92vh,1100px);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.modal__head{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 18px;border-bottom:2px solid #000;flex-wrap:wrap}
.modal__head b{font-weight:600;font-size:1.9rem;display:block}
.modal__head span{font-size:1.4rem;color:var(--mute)}
.modal .x{width:44px;height:44px;font-size:3rem;line-height:1}
.modal iframe{width:100%;height:100%;border:0;background:#f3f3f3}
.modal p{padding:10px 18px;font-size:1.4rem;color:var(--mute);border-top:1px solid var(--line)}
.modal p a{text-decoration:underline}
.coa code{font-family:ui-monospace,Consolas,monospace;font-size:1.5rem;background:var(--lav-pale);padding:3px 8px;border-radius:6px}
@media (max-width:640px){.coa th:nth-child(4),.coa td:nth-child(4),.coa th:nth-child(6),.coa td:nth-child(6){display:none}.modal{padding:0}.modal__box{height:100vh;border-radius:0;border:0;box-shadow:none}}