/*
Theme Name: BestAir Custom
Theme URI: https://bestairpurifiersforallergies.com/
Author: Landing Starter
Description: Custom wrapper theme carrying the bestairpurifiersforallergies.com landing page (agents 2-8 output) verbatim into WordPress.
Version: 1.0
Text Domain: bestair-custom
*/

/* bestairpurifiersforallergies.com — design tokens pulled from ../_ref-dna.json (humnutrition.com) */
@font-face{font-family:"Archivo";font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(assets/fonts/archivo-italic.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(assets/fonts/archivo.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/montserrat.woff2) format("woff2")}
@font-face{font-family:"Montserrat Fallback";src:local("Arial");size-adjust:112%;ascent-override:85%;descent-override:22%}
@font-face{font-family:"Archivo Fallback";src:local("Arial");size-adjust:118%;ascent-override:80%}

:root{
  /* palette — css_variables_colors + palette.backgrounds */
  --white:#ffffff;            /* bg #1 by area */
  --mist:#f5f9fc;             /* --color-light */
  --sage:#d7ddd9;             /* bg #3 */
  --blush:#f8c1d9;            /* bg #6 pink panels */
  --blush-lt:#ffe6f7;         /* --color-pink-light */
  --teal:#c8eedf;             /* --color-teal */
  --mag:#e10098;              /* --color-primary (the one accent) */
  --mag-dk:#d60092;           /* --color-primary-dark: AA on white for small text/fills */
  --mag-ink:#a8006f;          /* mag tinted for small text on blush */
  --ink:#141414;              /* text #1 */
  --black:#000000;            /* --color-night / utility bars */
  --gray:#6f6f6f;             /* --color-gray-ada-darker */
  --line:#d6d6d6;             /* border #1 */
  --line-2:#e0e0e0;           /* --color-outline */
  /* type */
  --f-display:"Archivo","Archivo Fallback",system-ui,sans-serif;
  --f-body:"Montserrat","Montserrat Fallback",system-ui,sans-serif;
  /* radii — radii[] */
  --r-card:15px; --r-pill:60px; --r-btn:4px; --r-panel:32px;
  /* motion — custom_easings[0] + durations */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-std:cubic-bezier(.4,0,.2,1);
  --t1:.3s; --t2:.4s; --t3:.6s;
  /* depth — shadows[] */
  --sh-1:0 4px 16px 4px rgba(0,0,0,.08);
  --sh-2:0 30px 70px rgba(0,0,0,.18);
  --wrap:1240px; --pad:clamp(20px,5vw,56px);
  --head-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 16px)}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.6 var(--f-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
@media (min-width:900px){body{font-size:18px;line-height:1.5}}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
strong{font-weight:700}
.sr{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--black);color:#fff;padding:10px 16px;border-radius:var(--r-btn);text-decoration:none;font-weight:700}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--mag-dk);outline-offset:3px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ---------- type ---------- */
.h2,.hero__h1,.trig__h{font-family:var(--f-display);text-transform:uppercase;margin:0;text-wrap:balance}
.hero__h1{font-weight:850;font-stretch:118%;font-size:clamp(2.35rem,1.3rem + 3.9vw,4.35rem);line-height:.95;letter-spacing:-.02em}
.hero__h1 .up{display:block;font-style:normal}
.hero__h1 .it{display:block;font-style:italic;font-weight:800;font-stretch:112%;margin-top:.12em;font-size:.62em;line-height:1;letter-spacing:-.01em}
.h2{font-style:italic;font-weight:850;font-stretch:112%;font-size:clamp(1.7rem,1.1rem + 2.3vw,3rem);line-height:1;letter-spacing:-.015em;margin-bottom:.7em}
.h2--xl{font-size:clamp(2rem,1.1rem + 3.6vw,4.1rem)}
.h2 .up{font-style:normal}
.h3{font-family:var(--f-body);font-weight:700;font-size:1.06em;letter-spacing:.06em;text-transform:uppercase;margin:1.9em 0 .55em;line-height:1.3}
.prose > .h3:first-child{margin-top:0}
.lede{font-size:1.12em;line-height:1.55}
.prose p{max-width:68ch}
mark.hl{background:none;color:inherit;position:relative;white-space:nowrap;z-index:0}
mark.hl::after{content:"";position:absolute;left:-.04em;right:-.06em;bottom:.04em;height:.26em;background:var(--mag);z-index:-1;transform-origin:left center;transform:scaleX(1);transition:transform 1s var(--ease)}
.js-motion mark.hl::after{transform:scaleX(0)}
.js-motion.is-ready mark.hl::after{transform:scaleX(1)}

.chip{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--ink);font:700 12px/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;margin-bottom:18px}
.chip--mag{background:var(--mag-dk);border-color:var(--mag-dk);color:#fff}

/* ---------- buttons (shine-sweep + arrow slide + inset highlight + press) ---------- */
.btn{--bh:52px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--bh);padding:0 26px;border-radius:var(--r-btn);font:700 15px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0;isolation:isolate;overflow:hidden;white-space:nowrap;transition:transform var(--t1) var(--ease),box-shadow var(--t2) var(--ease),background-color var(--t2) ease,color var(--t1) ease}
.btn--buy{background:var(--mag-dk);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.14),0 6px 16px -6px rgba(214,0,146,.55)}
.btn--buy::before{content:"";position:absolute;inset:0 auto 0 -60%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);z-index:-1;transition:left .7s var(--ease)}
.btn--buy:hover{background:#c40086;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.14),0 14px 26px -10px rgba(214,0,146,.6)}
.btn--buy:hover::before{left:120%}
.btn--buy:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
.btn__ar{width:18px;height:18px;transition:transform var(--t2) var(--ease)}
.btn--buy:hover .btn__ar{transform:translateX(4px)}
.btn--ghost{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--ink);transform:translateY(-1px)}
.btn--lg{--bh:58px;padding:0 32px;font-size:16px}
.btn--sm{--bh:44px;padding:0 18px;font-size:13px}
.btn--onblack{background:var(--white);color:var(--mag-dk);box-shadow:0 8px 24px -8px rgba(225,0,152,.6)}
.btn--onblack:hover{background:var(--white);color:#b0007a}

.buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.buy__note{margin:0;flex:1 1 260px;font-size:.92em;line-height:1.45;color:var(--gray)}
.buy--band{border:0;margin-top:36px;padding:22px 24px;border-radius:var(--r-card);background:var(--blush-lt)}
.buy--band .buy__note{color:#5d2a4a}

/* ---------- ticker (ref: 19.9s linear translate marquee) ---------- */
.ticker{background:var(--black);color:#fff;overflow:hidden;height:38px;display:flex;align-items:center}
.ticker__track{display:flex;gap:56px;white-space:nowrap;padding-left:56px;animation:tick 40s linear infinite;font:700 12.5px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase}
.ticker__track span{display:inline-flex;align-items:center;gap:56px}
.ticker__track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--mag)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line-2);transition:box-shadow var(--t2) var(--ease)}
.site-head.is-scrolled{box-shadow:0 6px 20px -12px rgba(0,0,0,.25)}
.site-head__in{display:flex;align-items:center;gap:20px;height:var(--head-h)}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo__mark{width:36px;height:36px}
.logo__word{font:850 italic 19px/1 var(--f-display);font-stretch:118%;text-transform:uppercase;letter-spacing:-.01em;display:flex;align-items:baseline;gap:2px}
.logo__word b{color:var(--mag-dk);font-weight:inherit}
.logo__word i{font:600 11px/1 var(--f-body);letter-spacing:.12em;margin-left:8px;color:var(--gray);font-style:normal}
.nav{display:none;margin-left:auto;gap:4px}
.nav a{font:600 13.5px/1 var(--f-body);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;padding:12px 12px;border-radius:var(--r-btn);position:relative}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--mag);transform:scaleX(0);transform-origin:left;transition:transform var(--t2) var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.btn--head{margin-left:auto;--bh:44px;padding:0 18px;font-size:13px}
.nav + .btn--head{margin-left:8px}
.burger{flex:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--white);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:border-color var(--t1) ease,background-color var(--t1) ease}
.burger span{width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform var(--t2) var(--ease),opacity var(--t1) ease,background-color var(--t1) ease}
.burger span:nth-child(2){width:14px;align-self:center;transform:translateX(3px)}
.burger:hover{border-color:var(--mag)}
.burger:hover span{background:var(--mag-dk)}
.burger[aria-expanded="true"]{border-color:var(--mag);background:var(--blush-lt)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:translateX(-6px)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{border-top:1px solid var(--line-2);background:var(--white);padding:8px var(--pad) 18px;display:grid}
.mnav[hidden]{display:none}
.mnav a{font:700 15px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:16px 4px;border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between}
.mnav a::after{content:"";width:8px;height:8px;border-right:2px solid var(--mag);border-top:2px solid var(--mag);transform:rotate(45deg);align-self:center}
@media (max-width:420px){.logo__word i{display:none}.logo__word{font-size:17px}.site-head__in{gap:10px}}
@media (min-width:1024px){.nav{display:flex}.burger,.mnav{display:none!important}}

/* ---------- image placeholders (agent 6 swaps for data-img) ---------- */
.ph{margin:0;position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--blush-lt);color:var(--mag-dk);isolation:isolate}
.ph__art{position:relative;width:100%;height:100%;display:grid;place-items:center;background:
  radial-gradient(circle at 78% 22%,rgba(255,255,255,.75) 0 14%,transparent 15%),
  repeating-linear-gradient(-45deg,transparent 0 14px,rgba(225,0,152,.07) 14px 15px),
  linear-gradient(160deg,var(--blush-lt),var(--blush))}
.ph__art svg{width:28%;max-width:150px;height:auto;opacity:.8}
.ph img{width:100%;height:100%;object-fit:cover}
.ph__cap{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(255,255,255,.92);color:var(--ink);font:500 12.5px/1.4 var(--f-body);padding:9px 12px;border-radius:10px}
.ph__cap b{display:inline-block;margin-right:6px;font-weight:700;color:var(--mag-dk);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.ph--hero{aspect-ratio:4/5}
.ph--tall{aspect-ratio:4/5}
.ph--square{aspect-ratio:1/1}
.ph--product{aspect-ratio:1/1}
.ph--wide{aspect-ratio:3/2}
.ph--band{aspect-ratio:16/7;margin-top:40px}
.ph--dark{background:#1c1c1c;color:var(--blush)}
.ph--dark .ph__art{background:radial-gradient(circle at 70% 25%,rgba(248,193,217,.18) 0 18%,transparent 19%),repeating-linear-gradient(-45deg,transparent 0 14px,rgba(255,255,255,.04) 14px 15px),linear-gradient(160deg,#262626,#111)}
.field--sage .ph{background:var(--mist)}
.field--sage .ph__art{background:radial-gradient(circle at 78% 22%,rgba(255,255,255,.8) 0 14%,transparent 15%),repeating-linear-gradient(-45deg,transparent 0 14px,rgba(20,20,20,.05) 14px 15px),linear-gradient(160deg,#eef3ef,#c9d2cc)}
.field--blush .ph__art,.field--blush-lt .ph__art{background:radial-gradient(circle at 78% 22%,rgba(255,255,255,.8) 0 14%,transparent 15%),repeating-linear-gradient(-45deg,transparent 0 14px,rgba(225,0,152,.06) 14px 15px),linear-gradient(160deg,#fff,var(--mist))}

/* ---------- fields ---------- */
section{padding:clamp(64px,9vw,128px) 0}
.field--mist{background:var(--mist)}
.field--sage{background:var(--sage)}
.field--blush{background:var(--blush)}
.field--blush-lt{background:var(--blush-lt)}
.field--black,.field--night{background:var(--black);color:#fff}
.field--night{background:#111}
.field--black .h2,.field--night .h2{color:#fff}
.field--night .buy{border-color:rgba(255,255,255,.18)}
.field--night .buy__note,.field--black p{color:#d9d9d9}
.field--night .chip{border-color:#fff}
.field--blush .buy{border-color:rgba(20,20,20,.18)}
.field--blush .buy__note{color:#4a2a3c}
.field--sage .buy__note{color:#3a3a3a}
.field--mist .buy__note{color:#5e5e5e}

/* ---------- hero ---------- */
.hero{isolation:isolate;padding:clamp(28px,5vw,72px) 0 clamp(56px,7vw,104px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:0;top:0;bottom:0;width:38%;background:var(--sage);z-index:-1}
.hero__grid{display:grid;gap:36px}
.hero__disc{margin:22px 0 0;max-width:62ch;font-size:.8em;line-height:1.5;color:var(--gray)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__media{position:relative;max-width:520px;width:100%;justify-self:end}
.ph--hero{background:var(--blush)}
.ph--hero .ph__cap{top:12px;bottom:auto}
.sticker{position:absolute;left:-14px;bottom:-26px;width:min(300px,82%);background:var(--white);border-radius:var(--r-card);padding:20px 20px 18px;box-shadow:var(--sh-2)}
.sticker .chip{margin-bottom:12px;height:26px;font-size:11px}
.sticker__name{font:850 italic 1.3rem/1.05 var(--f-display);font-stretch:112%;text-transform:uppercase;margin:0 0 6px}
.sticker__for{font-size:.86em;color:var(--gray);margin:0 0 14px}
@media (max-width:899px){
  .hero::before{width:100%;top:auto;height:44%}
  .hero__media{justify-self:stretch;max-width:none}
  .ph--hero{aspect-ratio:5/4}
  .sticker{left:12px;bottom:-30px}
  .hero__ctas .btn{flex:1 1 220px}
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);align-items:center;gap:56px}
  .sticker{left:-64px;bottom:40px}
}

/* ---------- glance + quick-pick shelf ---------- */
.glance{padding-top:clamp(72px,8vw,112px)}
.glance__grid{display:grid;gap:8px 64px;margin-bottom:56px}
@media (min-width:900px){.glance__grid{grid-template-columns:5fr 7fr}}
.answer{padding:20px 22px;border-radius:var(--r-card);background:var(--mist);border:1px solid var(--line-2)}
.shelf__title{margin-top:0}
.shelf{width:100%;border-collapse:collapse}
.shelf thead th{font:700 12px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;text-align:left;color:var(--gray);padding:0 14px 14px;border-bottom:2px solid var(--ink)}
.shelf td{padding:16px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.shelf tbody tr{transition:background-color var(--t1) ease}
.shelf tbody tr:hover{background:var(--mist)}
.shelf__role a{display:inline-block;padding:8px 0;font:850 italic 1.05rem/1.1 var(--f-display);font-stretch:112%;text-transform:uppercase;text-decoration:none;color:var(--mag-dk)}
.shelf__role a:hover{text-decoration:underline;text-underline-offset:4px}
.shelf__model{font-weight:700}
.shelf__tier{white-space:nowrap}
.shelf__act{text-align:right}
@media (max-width:759px){
  .shelf thead{display:none}
  .shelf,.shelf tbody{display:block}
  .shelf tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:18px 4px;border-bottom:1px solid var(--line)}
  .shelf td{padding:0;border:0}
  .shelf__role{grid-column:1/-1}
  .shelf__model{grid-column:1}
  .shelf td:nth-child(3){grid-column:1;font-size:.92em;color:var(--gray)}
  .shelf__tier{grid-column:1;font-size:.85em;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
  .shelf__act{grid-column:2;grid-row:2/5;align-self:center}
}

/* ---------- split ---------- */
.split{display:grid;gap:40px;align-items:start}
@media (min-width:900px){
  .split--media-right{grid-template-columns:7fr 5fr;gap:72px}
  .split--media-left{grid-template-columns:5fr 7fr;gap:72px}
  .split .ph{position:sticky;top:calc(var(--head-h) + 32px)}
  .why .split .ph{margin-top:120px}
}

/* ---------- methodology ---------- */
.method__grid{display:grid;gap:40px}
@media (min-width:900px){.method__grid{grid-template-columns:5fr 7fr;gap:72px}.method__head .ph{max-width:420px}}
.method__head .ph{margin-top:24px}
.checklist{list-style:none;counter-reset:c;padding:0;margin:28px 0;display:grid;gap:0}
.checklist li{counter-increment:c;position:relative;padding:18px 0 18px 64px;border-top:1px solid var(--line)}
.checklist li:last-child{border-bottom:1px solid var(--line)}
.checklist li::before{content:counter(c);position:absolute;left:0;top:14px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:850 italic 18px/1 var(--f-display);color:var(--mag-dk);border:1.5px solid var(--mag-dk)}

/* ---------- picks ---------- */
.pick__grid{display:grid;gap:36px;align-items:start}
.pick__media{display:grid;gap:16px}
.spec{margin:0;display:grid;grid-template-columns:repeat(3,auto);gap:0;border-top:2px solid currentColor;border-bottom:1px solid var(--line)}
.spec div{padding:12px 12px 12px 0}
.spec div + div{padding-left:12px;border-left:1px solid var(--line)}
.spec dt{font:700 11px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:6px}
.spec dd{margin:0;font-weight:600;font-size:.88em;line-height:1.3}
.field--night .spec{border-bottom-color:rgba(255,255,255,.2)}
.field--night .spec div + div{border-color:rgba(255,255,255,.2)}
.field--night .spec dt{color:#bdbdbd}
.field--blush .spec dt,.field--sage .spec dt{color:#4b4b4b}
.field--blush .spec,.field--blush .spec div + div{border-color:rgba(20,20,20,.2)}
@media (max-width:520px){.spec{grid-template-columns:1fr}.spec div + div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
@media (min-width:900px){
  .pick__grid{grid-template-columns:5fr 7fr;gap:72px}
  .pick--flip .pick__media{order:2}
  .pick--flip .pick__grid{grid-template-columns:7fr 5fr}
  .pick__media{position:sticky;top:calc(var(--head-h) + 32px)}
}
.pick#pick-overall .ph--product{background:var(--blush)}
.pick#pick-overall{position:relative;isolation:isolate}
.pick#pick-overall::before{content:"";position:absolute;left:0;top:0;width:min(46%,640px);height:72%;background:var(--mist);z-index:-1}

/* ---------- strip CTA ---------- */
.strip{background:var(--black);color:#fff}
.strip__in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding-top:18px;padding-bottom:18px}
.strip__lbl{margin:0;font:850 italic 1.15rem/1.15 var(--f-display);font-stretch:112%;text-transform:uppercase}

/* ---------- guide + calculator ---------- */
.guide__head{max-width:1000px;margin-bottom:48px}
.guide__grid{display:grid;gap:40px}
@media (min-width:900px){.guide__grid{grid-template-columns:4fr 8fr;gap:72px}.guide__fig{position:sticky;top:calc(var(--head-h) + 32px)}}
.formula{font:800 italic clamp(1.15rem,.9rem + 1vw,1.6rem)/1.25 var(--f-display);font-stretch:108%;text-transform:uppercase;padding:22px 24px;margin:6px 0 22px;border-radius:var(--r-card);background:var(--ink);color:#fff;max-width:none!important}
.formula strong{font-weight:inherit}
.formula--mag{background:var(--mag-dk)}
.calc{margin-top:56px;display:grid;gap:20px;align-items:end;padding:28px;border-radius:var(--r-panel);background:var(--teal)}
.calc__in{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc label{display:grid;gap:8px;font:700 12px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase}
.calc input,.calc select{font:700 22px/1 var(--f-body);height:56px;width:100%;padding:0 14px;border-radius:10px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);-moz-appearance:textfield}
.calc input:focus,.calc select:focus{outline:none;border-color:var(--mag-dk);box-shadow:0 0 0 3px rgba(225,0,152,.25)}
.calc__op{display:none;font:800 italic 24px/56px var(--f-display);align-self:end}
.calc__out{display:flex;align-items:baseline;gap:10px;background:var(--white);border-radius:var(--r-card);padding:16px 22px;justify-content:center}
.calc__num{font:900 italic clamp(2.6rem,2rem + 2vw,3.8rem)/1 var(--f-display);font-stretch:118%;color:var(--mag-dk);font-variant-numeric:tabular-nums}
.calc__unit{font:700 14px/1 var(--f-body);letter-spacing:.12em}
@media (min-width:900px){
  .calc{grid-template-columns:1fr auto}
  .calc__in{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:end}
  .calc__op{display:block;text-align:center}
  .calc__out{min-width:250px}
}
.video{position:relative;margin-top:40px;aspect-ratio:16/9;max-width:880px;border-radius:var(--r-card);overflow:hidden;background:#111;color:var(--blush);cursor:pointer;display:grid;place-items:center}
.video__poster{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 70% 30%,rgba(225,0,152,.25),transparent 45%),linear-gradient(160deg,#262626,#0d0d0d)}
.video__poster svg{width:16%;opacity:.4}
.video img,.video iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.video__play{position:relative;z-index:1;width:84px;height:84px;border-radius:50%;background:var(--mag-dk);color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(225,0,152,.7);transition:transform var(--t2) var(--ease)}
.video__play svg{width:32px;height:32px;margin-left:4px}
.video:hover .video__play{transform:scale(1.07)}
.video__cap{position:absolute;left:18px;bottom:16px;right:18px;z-index:1;color:#fff;font-weight:600;font-size:.9em}
.video__cap b{color:var(--blush)}

/* ---------- comparison tables ---------- */
.compare__head{display:grid;gap:8px 64px;margin-bottom:36px}
@media (min-width:900px){.compare__head{grid-template-columns:6fr 5fr;align-items:end}.compare__head .h2{margin:0}}
.tscroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-card);background:var(--white);box-shadow:var(--sh-1);border:1px solid var(--line-2)}
.ctable{width:100%;border-collapse:collapse;min-width:980px;font-size:.92em}
.ctable--tco{min-width:720px}
.ctable thead th{background:var(--ink);color:#fff;font:700 11.5px/1.2 var(--f-body);letter-spacing:.09em;text-transform:uppercase;text-align:left;padding:16px 14px;white-space:nowrap}
.ctable th[scope=row]{text-align:left;font-weight:700;position:sticky;left:0;background:var(--white);z-index:1;min-width:180px;box-shadow:1px 0 0 var(--line)}
.ctable td,.ctable th[scope=row]{padding:14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.ctable tbody tr:hover td,.ctable tbody tr:hover th{background:var(--blush-lt)}
.ctable td:last-child{text-align:right}
.compare__foot,.tco__foot{margin:20px 0 0;font-size:.95em}
.tier{display:inline-block;padding:6px 12px;border-radius:var(--r-pill);font-weight:700;font-size:.82em;white-space:nowrap}
.tier--1{background:var(--teal)}
.tier--2{background:var(--sage)}
.tier--3{background:var(--blush)}

/* ---------- allergy type ---------- */
.atype__grid{display:grid;gap:40px}
@media (min-width:900px){.atype__grid{grid-template-columns:5fr 7fr;gap:72px}.atype__head{position:sticky;top:calc(var(--head-h) + 32px);align-self:start}}
.atype__head .ph{margin-top:24px;max-width:380px}
.trig{padding:32px 0;border-top:2px solid var(--ink)}
.trig:last-child{border-bottom:1px solid var(--line)}
.trig__h{font-style:italic;font-weight:850;font-stretch:112%;font-size:clamp(1.35rem,1rem + 1.4vw,2.1rem);line-height:1;margin-bottom:16px}
.trig:nth-child(1) .trig__h{color:var(--mag-dk)}
.trig p{margin:0;max-width:62ch}

/* ---------- humidity scale ---------- */
.rh{margin:8px 0 26px;max-width:520px}
.rh__bar{display:block;height:14px;border-radius:var(--r-pill);background:#fff;position:relative;border:1px solid rgba(20,20,20,.15);overflow:hidden}
.rh__ok{position:absolute;left:30%;width:20%;top:0;bottom:0;background:var(--mag)}
.rh__lbl{display:flex;justify-content:space-between;font:700 11px/1 var(--f-body);letter-spacing:.06em;margin-top:8px;position:relative}
.rh__lbl i{font-style:normal}
.rh__lbl i:nth-child(2){position:absolute;left:30%;transform:translateX(-50%)}
.rh__lbl i:nth-child(3){position:absolute;left:50%;transform:translateX(-50%)}

/* ---------- TCO ---------- */
.tco__grid{display:grid;gap:40px;margin-bottom:48px}
@media (min-width:900px){.tco__grid{grid-template-columns:8fr 4fr;gap:72px;align-items:center}}

/* ---------- ozone ---------- */
.ozone__grid{display:grid;gap:40px}
@media (min-width:900px){.ozone__grid{grid-template-columns:6fr 6fr;gap:80px}}
.ozone__head .ph{margin-top:24px;max-width:360px}
.ozone__intro{font:850 italic 1.4rem/1 var(--f-display);font-stretch:112%;text-transform:uppercase;color:#fff!important;margin-bottom:22px}
.rules{list-style:none;padding:0;margin:0 0 28px;counter-reset:r}
.rules li{counter-increment:r;padding:22px 0 22px 70px;border-top:1px solid rgba(255,255,255,.2);position:relative;color:#d9d9d9}
.rules li strong{color:#fff;display:block;margin-bottom:4px}
.rules li::before{content:counter(r);position:absolute;left:0;top:18px;font:900 italic 44px/1 var(--f-display);color:var(--mag)}
.ozone__body > p{max-width:60ch}

/* ---------- placement ---------- */
.place__head{max-width:900px;margin-bottom:40px}
.place__grid{display:grid;gap:48px}
@media (min-width:900px){.place__grid{grid-template-columns:6fr 6fr;gap:72px}}
.place__side .ph{margin-bottom:8px}
.sched{list-style:none;padding:0;margin:0 0 22px}
.sched li{padding:14px 0 14px 34px;border-bottom:1px solid var(--line);position:relative}
.sched li::before{content:"";position:absolute;left:4px;top:23px;width:12px;height:12px;border-radius:50%;background:var(--mag)}

/* ---------- voices ---------- */
.voices__grid{display:grid;gap:40px}
@media (min-width:900px){.voices__grid{grid-template-columns:5fr 7fr;gap:72px}}
.voices__head .ph{margin-top:24px;max-width:380px}
.quotes{list-style:none;padding:0;margin:0}
.quotes li{padding:22px 0;border-top:1px solid rgba(20,20,20,.2)}
.quotes li strong{display:block;font:850 italic clamp(1.25rem,1rem + 1vw,1.75rem)/1.08 var(--f-display);font-stretch:108%;text-transform:uppercase;margin-bottom:8px}
.voices__take{font-weight:700;margin-top:20px}

/* ---------- FAQ ---------- */
.faq__grid{display:grid;gap:40px}
@media (min-width:900px){.faq__grid{grid-template-columns:5fr 7fr;gap:72px}.faq__head{position:sticky;top:calc(var(--head-h) + 32px);align-self:start}}
.faq__head .ph{max-width:380px;margin-top:8px}
.qa{border-top:1px solid var(--line)}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{margin:0;font:700 1.02em/1.35 var(--f-body)}
.qa summary::after{content:"";flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ink);background:linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 12px no-repeat;transition:transform var(--t2) var(--ease),background-color var(--t1) ease,border-color var(--t1) ease}
.qa[open] summary::after{transform:rotate(45deg);background-color:var(--blush);border-color:var(--mag-dk)}
.qa summary:hover h3{color:var(--mag-dk)}
.qa__a{padding:0 56px 22px 0}
.qa__a p{margin:0}

/* ---------- final ---------- */
.final{background:var(--mist);position:relative;overflow:hidden}
.final::before{content:"";position:absolute;right:0;bottom:0;width:42%;height:70%;background:var(--blush);z-index:0}
.final .wrap{position:relative;z-index:1}
.final__grid{display:grid;gap:40px}
@media (min-width:900px){.final__grid{grid-template-columns:6fr 6fr;gap:72px;align-items:center}}
@media (max-width:899px){.final::before{width:100%;height:45%}}
.final .h2 .it{display:block;font-size:.66em;margin-top:.12em}
.trio{list-style:none;padding:0;margin:20px 0 0;background:var(--white);border-radius:var(--r-card);box-shadow:var(--sh-2)}
.trio li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.trio li:last-child{border-bottom:0}
.trio__lbl{font-weight:700;font-size:.95em;line-height:1.3}
.final__note{margin-top:18px;font-weight:600}
@media (max-width:520px){.trio li{flex-direction:column;align-items:stretch}.trio .btn{width:100%}}

/* ---------- footer ---------- */
.foot{background:var(--black);color:#d9d9d9;padding:64px 0 120px}
.foot__grid{display:grid;gap:24px}
.logo--foot .logo__word{color:#fff}
.logo--foot .logo__word b{color:var(--mag)}
.logo--foot .logo__word i{color:#bdbdbd}
.foot__nav{display:flex;flex-wrap:wrap;gap:4px 8px}
.foot__nav a{text-decoration:none;font:600 13px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:14px 8px 14px 0;color:#fff}
.foot__nav a:hover{color:var(--blush)}
.foot__disc{max-width:80ch;font-size:.88em;line-height:1.6;margin:0;padding-top:24px;border-top:1px solid #333}
.foot__copy{font-size:.82em;color:#bdbdbd;margin:0}
.foot__legal{display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:center;width:100%;max-width:var(--wrap);margin:0 auto;padding-top:16px;border-top:1px solid #333}
.foot__legal a{text-decoration:none;font:600 13px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:10px 8px;color:#bdbdbd;transition:color var(--t1) ease}
.foot__legal a:hover{color:var(--blush)}
@media (min-width:900px){.foot{padding-bottom:64px}}

/* ---------- legal / utility pages (privacy, terms, contact, about, affiliate-disclosure) ---------- */
.legal{padding:clamp(48px,8vw,96px) 0 clamp(64px,9vw,112px)}
.legal__in{max-width:78ch;margin:0 auto}
.legal__kicker{display:inline-block;font:700 12px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--mag-dk);margin:0 0 14px}
.legal__in h1{font-family:var(--f-display);font-style:italic;font-weight:850;font-stretch:112%;text-transform:uppercase;font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem);line-height:1.05;letter-spacing:-.015em;margin:0 0 .5em}
.legal__updated{font-size:.88em;color:var(--gray);margin:0 0 2.4em}
.legal__in h2{font-family:var(--f-display);font-style:italic;font-weight:800;font-stretch:112%;text-transform:uppercase;font-size:clamp(1.15rem,1rem + .8vw,1.5rem);letter-spacing:-.01em;margin:1.8em 0 .6em}
.legal__in p{margin:0 0 1.1em;line-height:1.7}
.legal__in ul,.legal__in ol{margin:0 0 1.1em;padding-left:1.4em;line-height:1.7}
.legal__in li{margin-bottom:.4em}
.legal__in a{color:var(--mag-dk);text-decoration:underline;text-decoration-color:var(--line)}
.legal__in a:hover{text-decoration-color:var(--mag-dk)}
.legal__in strong{font-weight:700}
.legal__card{background:var(--mist);border-radius:var(--r-card);padding:24px clamp(20px,4vw,32px);margin:1.6em 0}

/* ---------- sticky mobile CTA ---------- */
.stickycta{position:fixed;left:10px;right:10px;bottom:10px;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;background:var(--black);color:#fff;border-radius:14px;box-shadow:0 14px 34px -10px rgba(0,0,0,.5);transform:translateY(140%);transition:transform var(--t3) var(--ease)}
.stickycta.is-on{transform:none}
.stickycta__lbl{font-size:13px;line-height:1.25;font-weight:600;min-width:0}
.stickycta__lbl b{display:block;font:850 italic 13px/1.1 var(--f-display);text-transform:uppercase;color:var(--blush);letter-spacing:.02em}
@media (min-width:900px){.stickycta{display:none}}

/* ---------- reveal (GSAP + ScrollTrigger toggles .is-in; content visible without JS) ---------- */
.js-motion .rv{opacity:0;transform:translateY(28px);transition:opacity var(--t3) var(--ease),transform .9s var(--ease)}
.js-motion .rv.is-in{opacity:1;transform:none}
.js-motion .rv-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
.js-motion .rv-clip.is-in{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none}
  .btn:hover,.btn:active,.btn--buy:hover .btn__ar,.video:hover .video__play{transform:none}
  .btn--buy::before{display:none}
  .stickycta{transition:opacity .2s linear;transform:none;opacity:0;pointer-events:none}
  .stickycta.is-on{opacity:1;pointer-events:auto}
  mark.hl::after{transition:none}
  .js-motion .rv,.js-motion .rv-clip{opacity:1;transform:none;clip-path:none}
}
