/* Roomwell brand site.
   Layout: Apple-style full-bleed bands; product stories centred, long reading left-aligned.
   Brand layer (wordmark, category names, the brand line) is set in Jost caps; product and reading text in Inter.
   The symbol is Ajar: a square room whose door stands 90°/φ⁴ open, light spilling across the floor (gen/common.py).
   The rounded tile (corner 1/φ³ of its side) is the recurring frame: the app icon, the "indoors" frame in the home
   hero and the frame around each category's motion art.
   Colour: the Ice profile (ice.css). White leads; black anchors the heroes; crimson is the brand mark, the main
   button, one band per page and live states; the frosted ice nav; cobalt for cards and art on white.
   The crimsons sit on a golden ladder: each step holds φ (1.618) times the light of the step below it.
   Proportion is golden throughout: type on 17px × φ^(n/4) (12 13 15 17 19 22 24 28 31 35 39 45 50 57 64 72 …),
   spacing and corners on 8px × φ^(n/2) (… 8 10 13 16 21 27 34 43 55 70 89 113 144), line heights by golden-ratio
   typography, two-column layouts split 61.8 / 38.2, the frame φ² wide, motion in φ-second steps
   (.146 .236 .382 .618 1 1.618). tools/golden.py keeps new values on these scales. */
:root{
  --black:#000000;
  --ink:#000000;
  --ink-2:#3d3d3d;
  --fog:#6b6b6b;
  --steel:#858585;
  --mist:#a3a3a3;
  --smoke:#d4d4d4;
  --line:#d4d4d4;
  --line-2:#e8e8e8;
  --cloud:#f5f5f5;
  --paper:#ffffff;
  --panel-d:#151515;
  --panel-d-2:#1c1c1c;
  --panel-d-line:#282828;
  --field-d:#1b1b1b;
  --field-d-line:#3a3a3a;
  --red-hi:#e83c48;
  --red:#c8102e;
  --red-press:#a20422;
  --red-deep:#820319;
  --red-oxblood:#680212;
  --red-glow:200,16,46;
  /* crimson metal: light from above, the body at the golden section, shadow below; a sheen crosses it on hover */
  --metal:linear-gradient(180deg,var(--red-hi) 0%,var(--red) 38.2%,var(--red-press) 100%);
  --metal-tile:linear-gradient(145deg,var(--red-hi) 0%,var(--red) 38.2%,var(--red-press) 100%);
  --metal-ring:conic-gradient(from 200deg,var(--red-press),var(--red-hi) 14.6%,var(--red) 23.6%,var(--red-deep) 38.2%,var(--red) 50%,var(--red-hi) 61.8%,var(--red) 76.4%,var(--red-deep) 85.4%,var(--red-press));
  --metal-sheen:linear-gradient(100deg,rgba(255,255,255,0) 38.2%,rgba(255,255,255,.26) 50%,rgba(255,255,255,0) 61.8%);
  --metal-edge:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.2);
  --error:#c9342a;
  --error-d:#ff7a6e;
  --maxw:1080px;
  --maxw-wide:1260px;
  --gutter:clamp(16px,4vw,43px);
  --nav-h:55px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --brand:"Jost","Futura","Avenir Next","Century Gothic","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.236,.764,.236,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 55px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--black);color:#f5f5f5;font-family:var(--font);font-size:17px;line-height:1.55;letter-spacing:-0.011em;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}
img,svg,canvas,video{max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--red);color:#fff;padding:10px 16px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:calc(var(--maxw-wide) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(70px,10vw,144px)}
.band-tight{padding-block:clamp(55px,7vw,89px)}
.dark{background:var(--black);color:#f5f5f5}
.light{background:var(--paper);color:var(--ink);color-scheme:light}
.cloud{background:var(--cloud);color:var(--ink);color-scheme:light}
.center{text-align:center}
h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance}
p{margin:0}
ul,ol{margin:0}
.eyebrow{font-size:17px;font-weight:600;letter-spacing:-0.015em;margin-bottom:10px}
.dark .eyebrow{color:var(--mist)}
.light .eyebrow,.cloud .eyebrow{color:var(--fog)}
.h-section{font-size:clamp(35px,5vw,57px);line-height:1.07;letter-spacing:-0.03em}
.h-sub{font-size:clamp(28px,3.4vw,39px);line-height:1.1;letter-spacing:-0.026em}
.lead{font-size:clamp(19px,2.1vw,22px);line-height:1.43;letter-spacing:-0.017em;margin-top:13px;text-wrap:pretty}
.center .lead{max-width:40ch;margin-inline:auto}
.dark .lead{color:var(--mist)}
.light .lead,.cloud .lead{color:var(--fog)}
.ico{width:28px;height:28px;flex:none}
.ico-sm{width:20px;height:20px;flex:none}
.silver{color:#f5f5f5}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .silver{background:linear-gradient(180deg,#ffffff 12%,#e6e6e6 48%,#aaaaaa 94%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.brandname{font-family:var(--brand);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.num{font-variant-numeric:tabular-nums}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 21px;border-radius:980px;border:1px solid transparent;font-size:17px;font-weight:500;letter-spacing:-0.012em;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .236s ease,color .236s ease,border-color .236s ease,transform .236s var(--ease)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* the main action in any group is red on every band; the second action is an outline */
.btn-primary{background:var(--metal-sheen) 160% 0/260% 100% no-repeat,var(--metal);color:#ffffff;box-shadow:var(--metal-edge),0 1px 2px rgba(0,0,0,.22);transition:background-position 1s var(--ease),transform .236s var(--ease)}
.btn-primary:hover{background-position:-60% 0,0 0}
.btn-primary:active{background:var(--red-press)}
.btn-primary:focus-visible{outline-color:var(--red-hi)}
.btn-light{background:#ffffff;color:#000000}
.btn-light:hover{background:#ececec}
.btn-light:focus-visible{outline-color:#ffffff}
.btn-outline-d{background:transparent;color:#f5f5f5;border-color:#6b6b6b}
.btn-outline-d:hover{border-color:#f5f5f5}
.btn-outline-l{background:transparent;color:var(--ink);border-color:var(--steel)}
.btn-outline-l:hover{border-color:var(--ink)}
.btn-wide{width:100%}
.btn-sm{min-height:36px;padding:0 16px;font-size:15px}
.btn[disabled],.btn[aria-busy="true"]{opacity:.55;cursor:default}
.btn .ico-sm{margin-left:-4px}
.more{display:inline-flex;align-items:center;gap:2px;font-size:17px;font-weight:500;text-decoration:none;color:var(--red);color:light-dark(var(--red),var(--red-hi));min-height:44px}
.more::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:rotate(45deg);margin-left:6px;margin-top:1px;transition:transform .236s var(--ease)}
.more:hover{text-decoration:underline;text-underline-offset:3px}
.more:hover::after{transform:translateX(2px) rotate(45deg)}
.more:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}
.textlink{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--red);text-decoration-color:light-dark(var(--red),var(--red-hi))}
.textlink:hover{text-decoration-thickness:2px}
::selection{background:var(--red);color:#ffffff}
.cta-row{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:27px}
.links-row{display:flex;flex-wrap:wrap;gap:4px 27px;justify-content:center;margin-top:21px}

/* pre-order state: [data-preorder] on <html> is "soon" until the launch moment (LAUNCH_ISO in gen/common.py), then "open" */
html:not([data-preorder="open"]) .if-open{display:none!important}
html[data-preorder="open"] .if-soon{display:none!important}

/* ---------- ribbon + global nav ---------- */
.ribbon{background:var(--metal);box-shadow:var(--metal-edge);color:#ffffff;font-size:15px;text-align:center;position:relative;z-index:41}
.ribbon p{padding:10px var(--gutter);text-wrap:balance}
.ribbon a{color:#ffffff;font-weight:600;text-decoration:none;white-space:nowrap;margin-left:6px}
.ribbon a:hover{text-decoration:underline}
.ribbon a:focus-visible{outline:2px solid #ffffff;outline-offset:2px;border-radius:4px}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(0,0,0,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.08);color:#f5f5f5;view-transition-name:site-nav}
.nav.is-static{position:relative;top:auto}
.nav-in{display:flex;align-items:center;gap:27px;min-height:var(--nav-h)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#f5f5f5;flex:none}
.brand:focus-visible{outline:2px solid #f5f5f5;outline-offset:4px;border-radius:6px}
.mk{display:block;flex:none;width:28px;height:28px;overflow:hidden}
.mk-room,.mk-door,.mk-swing{transform-box:view-box}
.mk-room{transform-origin:50% 50%}
.mk-door{transform-origin:0 100%;transform:rotate(-13.1deg)}   /* the hinge, bottom left; the door stands 90°/φ⁴ open */
.mk-swing{transform-origin:0 100%}
.word{font-family:var(--brand);font-weight:500;font-size:15px;letter-spacing:.18em}
.word>span{display:inline-block}
/* logo motion. The first page of a visit plays the intro: the room settles in, its door appears shut, swings open past
   ajar to 90°/φ³ and back to 90°/φ⁴, then the name follows letter by letter. Every later page opens the door again.
   After that the door breathes: every 12 s it swings a little wider and back. Golden steps throughout. The swings
   ride on .mk-swing, so hovering any logo can still open the door itself further. */
.motion .mk-door{transition:transform .618s var(--ease)}
.motion .brand:hover .mk-door,.motion .brand:focus-visible .mk-door{transform:rotate(-21.2deg)}
.logo-intro,.logo-swing{--logo-at:.146s}
.logo-intro:has([data-intro]){--logo-at:1.382s}   /* home: after the headline lands */
.motion.logo-intro .nav .mk-room{animation:rw-room .618s var(--ease) var(--logo-at) both}
.motion.logo-intro .nav .mk-swing{animation:rw-door 1.618s var(--ease) calc(var(--logo-at) + .236s) both,rw-breathe 12s ease-in-out calc(var(--logo-at) + 6s) infinite}
.motion.logo-swing .nav .mk-swing{animation:rw-door 1.618s var(--ease) var(--logo-at) both,rw-breathe 12s ease-in-out calc(var(--logo-at) + 6s) infinite}
.motion.logo-intro .nav .word>span{animation:rw-letter .618s var(--ease) calc(var(--logo-at) + .618s + var(--i) * .056s) both}
@keyframes rw-room{0%{transform:scale(.854);opacity:0}38.2%{opacity:1}100%{transform:none;opacity:1}}
@keyframes rw-door{0%{transform:rotate(13.1deg);opacity:0}14.6%{transform:rotate(13.1deg);opacity:1}61.8%{transform:rotate(-21.2deg)}100%{transform:none;opacity:1}}
@keyframes rw-breathe{0%,14.6%,100%{transform:none}7.3%{transform:rotate(-13.1deg)}}
@keyframes rw-letter{0%{transform:translateY(.618em);opacity:0}100%{transform:none;opacity:1}}
.nav-links{display:flex;align-items:center;gap:clamp(13px,2.2vw,27px);margin-left:auto}
.nav-links a{color:#d2d2d2;text-decoration:none;font-size:13px;padding-block:10px;position:relative;transition:color .236s ease}
.nav-links a.cat{font-family:var(--brand);font-weight:500;letter-spacing:.14em;font-size:12px}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#ffffff}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:.14em;bottom:4px;height:1.5px;background:var(--red-hi)}
.nav-links a.learn{letter-spacing:-0.005em;font-size:13px}
.nav-links a:focus-visible{outline:2px solid #f5f5f5;outline-offset:2px;border-radius:4px}
.nav-cta{flex:none}
.menu-btn{display:none;width:44px;height:44px;margin-right:-10px;border:0;background:none;cursor:pointer;align-items:center;justify-content:center;border-radius:10px}
.menu-btn:focus-visible{outline:2px solid #f5f5f5;outline-offset:0}
.menu-btn span{position:relative;display:block;width:18px;height:1.5px;background:#f5f5f5;transition:transform .382s var(--ease),background-color .236s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:#f5f5f5;transition:transform .382s var(--ease)}
.menu-btn span::before{top:-5px}
.menu-btn span::after{top:5px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(5px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-5px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:calc(var(--nav-h) + 27px + env(safe-area-inset-top,0px)) var(--gutter) 43px;overflow-y:auto;display:none}
.menu-open .menu{display:block}
.menu ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:2px}
.menu li a{display:flex;align-items:baseline;gap:13px;padding:10px 0;text-decoration:none;color:#f5f5f5}
.menu li a b{font-family:var(--brand);font-weight:500;letter-spacing:.12em;font-size:31px}
.menu li a small{font-size:13px;color:var(--steel)}
.menu .menu-plain a{font-size:24px;font-weight:600;letter-spacing:-0.02em}
.menu .menu-sep{height:1px;background:#262626;margin:13px 0}
.menu-open{overflow:hidden}
.menu-open .menu li{animation:menuIn .618s var(--ease) both}
.menu-open .menu li:nth-child(2){animation-delay:.04s}.menu-open .menu li:nth-child(3){animation-delay:.08s}.menu-open .menu li:nth-child(4){animation-delay:.12s}.menu-open .menu li:nth-child(5){animation-delay:.16s}.menu-open .menu li:nth-child(6){animation-delay:.2s}.menu-open .menu li:nth-child(7){animation-delay:.24s}.menu-open .menu li:nth-child(8){animation-delay:.28s}.menu-open .menu li:nth-child(9){animation-delay:.32s}.menu-open .menu li:nth-child(10){animation-delay:.36s}
@keyframes menuIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* local nav on product and category pages */
.localnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:38;background:rgba(0,0,0,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.08)}
.localnav-in{display:flex;align-items:center;gap:21px;min-height:var(--nav-h)}
.localnav .crumb{display:flex;align-items:baseline;gap:8px;font-size:22px;font-weight:600;letter-spacing:-0.02em;text-decoration:none;color:#f5f5f5}
.localnav .crumb small{font-family:var(--brand);font-weight:500;font-size:11px;letter-spacing:.16em;color:var(--steel)}
.localnav nav{display:flex;gap:21px;margin-left:auto}
.localnav nav a{font-size:13px;color:#d2d2d2;text-decoration:none;padding-block:10px}
.localnav nav a:hover{color:#fff}
.localnav nav a:focus-visible,.localnav .crumb:focus-visible{outline:2px solid #f5f5f5;outline-offset:2px;border-radius:4px}
.localnav .btn{flex:none}

/* ---------- home: the indoors frame ---------- */
.intro{position:relative;background:var(--black)}
.intro-stage{position:relative;min-height:calc(100svh - var(--nav-h) - 44px);display:grid;place-items:center;overflow:hidden;padding-block:clamp(27px,5vh,70px)}
.intro-air{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.intro-copy{position:relative;z-index:1;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}
.headline{font-family:var(--brand);font-weight:500;text-transform:uppercase;letter-spacing:.04em;line-height:.98;font-size:clamp(39px,6.8vw,92px);display:flex;flex-direction:column;align-items:center;gap:clamp(13px,2vw,27px);margin:0;width:100%}
.hl-out{display:block;color:#f5f5f5}
.hl-out .ld,.hl-in{display:block}
.frame-z{display:flex;justify-content:center;width:100%;transform-origin:50% 50%}
.frame{position:relative;display:grid;place-items:center;width:min(100%,920px);aspect-ratio:2.618/1;border-radius:clamp(34px,6vw,89px);border:2px solid transparent;background:radial-gradient(90% 120% at 50% 0%,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 62%);max-width:100%}
/* the frame's ring is polished crimson: highlights where light would catch a curved metal edge; it fades as you scroll in */
.frame::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:var(--metal-ring);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:var(--frame-o,1);pointer-events:none}
.hl-in{color:#ffffff;padding-left:.04em}
.intro-more{display:flex;flex-direction:column;align-items:center}
.intro-sub{margin-top:clamp(21px,3vw,34px);max-width:36ch;color:var(--mist);font-size:clamp(17px,2vw,22px);line-height:1.41;letter-spacing:-0.017em;text-wrap:pretty}
.intro .cta-row{margin-top:27px}
.intro-hint{position:absolute;left:50%;bottom:18px;margin-left:-11px;width:22px;height:34px;border-radius:13px;border:1.5px solid rgba(245,245,245,.35);display:none}
.intro-hint::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:rgba(245,245,245,.7);transform:translateX(-50%);animation:hint 2.618s var(--ease) infinite}
@keyframes hint{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}80%{opacity:0;transform:translate(-50%,10px)}100%{opacity:0}}
/* with motion, the intro pins and the frame carries you indoors as you scroll */
.motion .intro.is-pinned{height:calc(100svh + 70vh)}
.motion .intro.is-pinned .intro-stage{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));min-height:0}
.motion .intro.is-pinned .intro-hint{display:block}
.motion .intro [data-z="out"],.motion .intro [data-z="sub"]{will-change:transform,opacity}
.motion .ld{animation:introIn 1s var(--ease) backwards}
.motion .ld-1{animation-delay:.056s}
.motion .ld-2{animation-delay:.618s}
.motion .ld-3{animation-delay:.764s}
.motion .ld-4{animation-delay:.91s}
.motion .ld-frame{animation:frameIn 1.618s var(--ease) .15s backwards}
@keyframes introIn{from{opacity:0;transform:translateY(18px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes frameIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* ---------- countdown ---------- */
html:not(.js) [data-countdown]{display:none}
[data-countdown]:not(.is-ready){visibility:hidden}
.countdown{display:inline-flex;align-items:flex-start;gap:clamp(13px,3vw,34px);margin-top:27px}
.cd-unit{display:flex;flex-direction:column;align-items:center;min-width:2.2ch}
.cd-num{display:flex;font-size:clamp(39px,6.4vw,72px);line-height:1;font-weight:600;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.cd-num span{display:inline-block;overflow:hidden;height:1em;line-height:1}
.cd-num i{display:block;font-style:normal}
.cd-num i.roll{animation:roll .618s var(--ease) both}
@keyframes roll{from{transform:translateY(55%);opacity:0;filter:blur(3px)}to{transform:none;opacity:1;filter:blur(0)}}
.cd-label{margin-top:10px;font-size:13px;letter-spacing:.01em}
.dark .cd-label{color:var(--steel)}
.light .cd-label,.cloud .cd-label{color:var(--fog)}
.cd-colon{font-size:clamp(35px,5vw,57px);line-height:1.1;font-weight:300;color:#3a3a3a}
.light .cd-colon,.cloud .cd-colon{color:var(--line)}
.cd-when{margin-top:16px;font-size:15px}
.dark .cd-when{color:var(--mist)}
.light .cd-when,.cloud .cd-when{color:var(--fog)}
.countdown-sm{gap:13px;margin-top:0}
.countdown-sm .cd-num{font-size:28px;letter-spacing:-0.03em}
.countdown-sm .cd-label{margin-top:4px;font-size:11px}
.countdown-sm .cd-colon{font-size:24px;line-height:1.1}

/* ---------- PRANA spotlight + to-scale lineup ---------- */
.prana-spot{background:radial-gradient(72% 56% at 50% 86%,#232323 0%,#0d0d0d 48%,#000000 82%);text-align:center;overflow:hidden}
.motion .prana-spot{padding-top:clamp(34px,5vw,70px)}
.cat-name{font-family:var(--brand);font-weight:500;letter-spacing:.16em;line-height:1;text-transform:uppercase;padding-left:.16em}
.prana-spot .cat-name{font-size:clamp(64px,12vw,148px)}
.cat-kind{margin-top:13px;font-size:15px;color:var(--steel);letter-spacing:.02em}
.prana-spot h2{margin-top:27px;font-size:clamp(31px,4.6vw,50px);line-height:1.08;letter-spacing:-0.03em}
.scale{--u:clamp(170px,31vw,380px);--ra:.5379;position:relative;margin:clamp(43px,6vw,70px) auto 0;display:flex;align-items:flex-end;justify-content:center;gap:clamp(27px,7vw,89px);padding-inline:clamp(55px,9vw,89px)}
.scale::before{content:"";position:absolute;left:50%;bottom:calc(var(--u) * -0.06);width:min(92%,760px);height:calc(var(--u) * .16);transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(78,78,78,.85) 0%,rgba(78,78,78,0) 72%);pointer-events:none}
.unit{position:relative;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit}
.unit img{display:block;width:auto;max-width:none;position:relative}
.unit.v img{height:calc(var(--u) * 1.1038);margin-bottom:calc(var(--u) * -0.0993)}
.unit.a img{height:calc(var(--u) * var(--ra) * 1.1111);margin-bottom:calc(var(--u) * var(--ra) * -0.1056)}
.dim{position:absolute;bottom:0;width:9px;border-top:1px solid #6e6e6e;border-bottom:1px solid #6e6e6e}
.dim::before{content:"";position:absolute;left:4px;top:0;bottom:0;border-left:1px solid #6e6e6e}
.unit.v .dim{height:var(--u);left:-22px}
.unit.a .dim{height:calc(var(--u) * var(--ra));right:-22px}
.dim span{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;line-height:1.35;color:var(--steel);font-variant-numeric:tabular-nums;text-align:right}
.unit.v .dim span{right:16px}
.unit.a .dim span{left:16px;text-align:left}
.dim b{display:block;color:#d2d2d2;font-weight:600;letter-spacing:.02em}
.scale-note{margin-top:clamp(27px,4vw,43px);font-size:13px;color:var(--mist)}
/* home: the units float */
.scale.is-float{isolation:isolate;perspective:1500px}
.scale.is-float::before{display:none}
.scale.is-float .fl{display:flex;flex-direction:column;align-items:center;transform-origin:50% 80%}
.scale.is-live .fl{opacity:0;will-change:transform,opacity}
.scale.is-live .dim{opacity:0}
.pool{position:absolute;left:50%;bottom:calc(var(--u) * -0.085);width:170%;height:calc(var(--u) * .2);transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(105,105,105,.8) 0%,rgba(78,78,78,.3) 42%,rgba(78,78,78,0) 72%);pointer-events:none;z-index:-1}
.unit.a .pool{width:190%;height:calc(var(--u) * .13);bottom:calc(var(--u) * -0.06)}
.float-air{position:absolute;left:0;top:-24%;width:100%;height:124%;pointer-events:none;z-index:2}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:clamp(43px,5vw,55px);text-align:left}
.duo-card{display:flex;flex-direction:column;gap:6px;padding:27px 27px 21px;border-radius:27px;background:var(--panel-d);border:1px solid var(--panel-d-line);text-decoration:none;color:#f5f5f5;transition:border-color .236s ease,background-color .236s ease}
.duo-card:hover{border-color:#3a3a3a;background:#1a1a1a}
.duo-card:focus-visible{outline:2px solid #f5f5f5;outline-offset:3px}
.duo-card .pn{font-size:28px;font-weight:600;letter-spacing:.01em}
.duo-card .pt{color:var(--mist);font-size:17px}
.duo-card .pp{margin-top:10px;font-size:15px;color:#d2d2d2;font-variant-numeric:tabular-nums}
.duo-card .more{margin-top:auto;padding-top:8px;font-size:15px;min-height:36px}

/* ---------- category grid ---------- */
.cats-head{max-width:760px}
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(34px,5vw,55px)}
.ctile{position:relative;display:block;min-height:440px;border-radius:34px;overflow:hidden;background:#0a0a0a;border:1px solid #1d1d1d;text-decoration:none;color:#f5f5f5;isolation:isolate;transition:border-color .236s ease}
.ctile:hover{border-color:#3a3a3a}
.ctile:focus-visible{outline:2px solid #f5f5f5;outline-offset:4px}
.ctile.big{grid-column:span 2;min-height:520px;background:radial-gradient(70% 70% at 64% 100%,#262626 0%,#0e0e0e 52%,#070707 100%)}
.ctile.tall{min-height:520px}
.ctile canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
.ctile-copy{position:relative;padding:27px 27px 0;display:flex;flex-direction:column;gap:8px;max-width:420px}
.ctile .cat-name{font-size:31px}
.ctile .cat-name,.pl-soon .cat-name,.ctile-copy .cat-name{padding-left:0}
.ctile.big .ctile-copy{max-width:340px}
.ctile .ck{color:var(--mist);font-size:17px;line-height:1.35}
.status{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:6px;padding:6px 13px;border-radius:980px;font-size:13px;font-weight:500;border:1px solid #3a3a3a;color:#d2d2d2;background:rgba(0,0,0,.35)}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:#868686}
.status.live{border-color:#d2d2d2;color:#fff}
.status.live::before{background:var(--red-hi);box-shadow:0 0 0 4px rgba(var(--red-glow),.28)}
.ctile .go{position:absolute;right:22px;bottom:22px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(245,245,245,.1);border:1px solid rgba(245,245,245,.18);transition:background-color .236s ease,transform .382s var(--ease)}
.ctile .go svg{width:16px;height:16px}
.ctile:hover .go{background:var(--metal);border-color:transparent;transform:translateX(3px)}
.ctile .duo-pics{position:absolute;right:clamp(16px,6%,80px);bottom:0;display:flex;align-items:flex-end;gap:clamp(10px,2vw,27px);height:84%;pointer-events:none}
.ctile .duo-pics img{height:100%;width:auto;max-width:none;display:block}
.ctile .duo-pics img.a{height:54.4%;margin-bottom:1.5%}

/* ---------- facts (learn teaser) ---------- */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(27px,4vw,43px);margin-top:clamp(43px,5vw,70px);text-align:left}
.fact{border-top:1px solid var(--line);padding-top:21px}
.fact .big{display:block;font-size:clamp(45px,5.4vw,64px);line-height:1;font-weight:600;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.fact .big small{font-size:.4em;font-weight:600;letter-spacing:-0.01em;margin-left:4px}
.fact p{margin-top:13px;color:var(--ink-2);font-size:17px;line-height:1.47;text-wrap:pretty}
.fact cite{display:block;margin-top:10px;font-style:normal;font-size:13px;color:var(--fog)}
.fact cite a{color:inherit}

/* ---------- promise row ---------- */
.promise{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;padding:0;margin:0;text-align:left}
.promise li{display:flex;gap:13px;align-items:flex-start;font-size:13px;line-height:1.4}
.dark .promise li{color:var(--mist)}
.light .promise li,.cloud .promise li{color:var(--fog)}
.promise b{display:block;font-weight:600;font-size:15px}
.dark .promise b{color:#f5f5f5}
.light .promise b,.cloud .promise b{color:var(--ink)}
.promise-wrap{border-top:1px solid #1f1f1f;padding-top:27px;margin-top:clamp(43px,6vw,55px)}
.light .promise-wrap,.cloud .promise-wrap{border-color:var(--line)}

/* ---------- business teaser ---------- */
.biz-band{background:radial-gradient(60% 80% at 50% 0%,#181818 0%,#000 70%)}
.biz-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:clamp(34px,5vw,55px);text-align:left}
.bcard{background:var(--panel-d);border:1px solid var(--panel-d-line);border-radius:21px;padding:27px 21px 21px;display:flex;flex-direction:column;gap:8px}
.bcard .ico{color:#f5f5f5}
.bcard h3{font-size:19px;letter-spacing:-0.02em;margin-top:8px}
.bcard p{color:var(--mist);font-size:15px;line-height:1.47;flex-grow:1}
.bcard a{align-self:flex-start;margin-top:8px;color:var(--red-hi);font-size:15px;font-weight:500;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.bcard a:hover{text-decoration:underline}
.bcard a:focus-visible{outline:2px solid #f5f5f5;outline-offset:2px;border-radius:4px}

/* ---------- product page ---------- */
.p-hero{text-align:center;overflow:hidden;padding-block:clamp(43px,7vw,89px) 0}
.p-hero.dark{background:radial-gradient(62% 46% at 50% 78%,#292929 0%,#111111 48%,#000000 84%)}
.p-hero.cloud{background:radial-gradient(60% 50% at 50% 74%,#ffffff 0%,#f5f5f5 62%)}
.p-hero .kicker{font-size:17px;font-weight:600;letter-spacing:-0.012em}
.p-hero.dark .kicker{color:var(--mist)}
.p-hero.cloud .kicker{color:var(--fog)}
.pname{font-size:clamp(72px,14vw,148px);line-height:.94;letter-spacing:-0.012em;font-weight:600;margin-top:10px}
.p-hero.cloud .pname{color:var(--ink)}
.ptag{font-size:clamp(24px,3vw,35px);line-height:1.16;letter-spacing:-0.024em;font-weight:600;margin-top:16px}
.ptag span{color:var(--steel)}
.cloud .ptag span{color:var(--fog)}
.p-price{margin-top:16px;font-size:17px;font-variant-numeric:tabular-nums}
.p-hero.dark .p-price{color:#d2d2d2}
.p-hero.cloud .p-price{color:var(--ink-2)}
.p-hero .cta-row{margin-top:21px}
.p-shot{position:relative;margin:clamp(27px,4vw,43px) auto 0;width:min(100%,560px);display:flex;justify-content:center}
.p-shot img{display:block;height:clamp(380px,56vw,640px);width:auto;max-width:none;position:relative;z-index:1}
.p-hero.dark .p-shot::after{content:"";position:absolute;left:50%;bottom:4%;width:90%;height:9%;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(84,84,84,.9) 0%,rgba(84,84,84,0) 70%)}
.p-hero.cloud .p-shot::after{content:"";position:absolute;left:50%;bottom:4%;width:90%;height:9%;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.14) 0%,rgba(0,0,0,0) 70%)}
.p-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:27px;text-align:left;border-top:1px solid #1f1f1f;padding-top:34px}
.cloud .p-stats,.light .p-stats{border-color:var(--line)}
.stat b{display:block;font-size:clamp(35px,4vw,50px);line-height:1;font-weight:600;letter-spacing:-0.028em;font-variant-numeric:tabular-nums}
.stat b small{font-size:.4em;margin-left:5px;letter-spacing:-0.01em;font-weight:600}
.stat .l{display:block;margin-top:10px;font-size:13px;line-height:1.4}
.dark .stat .l{color:var(--mist)}
.cloud .stat .l,.light .stat .l{color:var(--fog)}
.flow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(27px,5vw,70px);align-items:center}
.flow-stage{position:relative;aspect-ratio:1/1.06;border-radius:34px;overflow:hidden;background:radial-gradient(70% 60% at 50% 60%,#1c1c1c 0%,#090909 70%);border:1px solid #1d1d1d}
.cloud .flow-stage{background:radial-gradient(70% 60% at 50% 60%,#ffffff 0%,#eeeeee 80%);border-color:var(--line-2)}
.flow-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
.flow-stage img{position:absolute;left:50%;bottom:7%;height:76%;width:auto;max-width:none;transform:translateX(-50%);z-index:1}
.flow-copy h2{font-size:clamp(31px,4.4vw,50px);line-height:1.06;letter-spacing:-0.03em}
.flow-steps{list-style:none;padding:0;margin:27px 0 0;display:flex;flex-direction:column;gap:0;counter-reset:fs}
.flow-steps li{position:relative;padding:16px 0 16px 43px;border-top:1px solid #262626;counter-increment:fs}
.cloud .flow-steps li{border-color:var(--line)}
.flow-steps li::before{content:counter(fs);position:absolute;left:0;top:17px;width:28px;height:28px;border-radius:6px;display:grid;place-items:center;font-size:13px;font-weight:600;border:1px solid #3a3a3a;color:#d2d2d2}
.cloud .flow-steps li::before{border-color:var(--line);color:var(--ink-2)}
.flow-steps b{display:block;font-size:19px;letter-spacing:-0.018em}
.flow-steps span{display:block;margin-top:4px;font-size:15px;line-height:1.47}
.dark .flow-steps span{color:var(--mist)}
.cloud .flow-steps span{color:var(--fog)}
.flow-note{margin-top:16px;font-size:13px}
.dark .flow-note{color:var(--steel)}
.cloud .flow-note{color:var(--fog)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;text-align:left}
.ftile{border-radius:21px;padding:27px 21px 27px;display:flex;flex-direction:column}
.dark .ftile{background:var(--panel-d);border:1px solid var(--panel-d-line)}
.dark .ftile .ico{color:#f5f5f5}
.cloud .ftile{background:#ffffff}
.light .ftile{background:var(--cloud)}
.cloud .ftile .ico,.light .ftile .ico{color:var(--ink)}
.ftile h3{font-size:19px;letter-spacing:-0.02em;margin-top:16px}
.ftile p{margin-top:6px;font-size:15px;line-height:1.47}
.dark .ftile p{color:var(--mist)}
.cloud .ftile p,.light .ftile p{color:var(--fog)}
.dots{display:flex;gap:4px;align-items:center;height:28px}
.dots i{width:9px;height:9px;border-radius:50%;display:block}
.inbox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);gap:clamp(27px,5vw,70px);align-items:center}
.inbox ul{list-style:none;padding:0;margin:21px 0 0;display:flex;flex-direction:column}
.inbox li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--line);font-size:17px}
.inbox li span{color:var(--fog)}
.inbox-pic{display:flex;justify-content:center;align-items:flex-end;gap:21px;min-height:320px}
.inbox-pic img{height:clamp(260px,32vw,380px);width:auto;max-width:none}
.buybox{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:21px 43px;align-items:center;padding:clamp(27px,3.4vw,43px);border-radius:34px;text-align:left}
.dark .buybox{background:var(--panel-d);border:1px solid var(--panel-d-line)}
.cloud .buybox{background:#ffffff}
.light .buybox{background:var(--cloud)}
.buybox .bb-name{font-size:24px;font-weight:600;letter-spacing:-0.02em}
.price{font-size:clamp(35px,4vw,50px);line-height:1.02;font-weight:600;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;margin-top:6px}
.split{margin-top:10px;font-size:15px;font-variant-numeric:tabular-nums}
.perks{margin-top:4px;font-size:13px}
.dark .perks{color:var(--mist)}
.cloud .perks,.light .perks{color:var(--fog)}
.bb-side{display:flex;flex-direction:column;align-items:flex-end;gap:13px}
.bb-side .countdown-sm{align-self:flex-end}
.specs{text-align:left}
.spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:43px}
.spec-row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:13px;padding:13px 0;border-bottom:1px solid;font-size:15px;line-height:1.47}
.dark .spec-row{border-color:#232323}
.cloud .spec-row,.light .spec-row{border-color:var(--line-2)}
.spec-row dt{font-weight:600}
.spec-row dd{margin:0}
.dark .spec-row dd{color:#d2d2d2}
.cloud .spec-row dd,.light .spec-row dd{color:var(--ink-2)}
.spec-grid dl{margin:0}
.next-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:27px;align-items:center;padding:27px 27px;border-radius:27px;text-decoration:none;color:inherit;transition:border-color .236s ease}
.dark .next-card{background:var(--panel-d);border:1px solid var(--panel-d-line)}
.cloud .next-card,.light .next-card{background:#ffffff;border:1px solid var(--line-2)}
.next-card:hover{border-color:var(--steel)}
.next-card:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.next-card img{height:120px;width:auto}
.nc-copy{display:block;min-width:0}
.nc-copy b{display:block;font-size:24px;font-weight:600;letter-spacing:.01em}
.nc-d{display:block;margin-top:4px;font-size:15px;line-height:1.4}
.dark .nc-d{color:var(--mist)}
.cloud .nc-d,.light .nc-d{color:var(--fog)}
.nc-btn .ico-sm{width:18px;height:18px;margin:0 -4px 0 0;transition:transform .236s var(--ease)}
.next-card:hover .nc-btn.btn-primary{background-position:-60% 0,0 0}
.next-card:hover .nc-btn .ico-sm{transform:translateX(3px)}
.next-card:active .nc-btn{transform:scale(.97)}

/* ---------- PRANA page ---------- */
.cat-hero{text-align:center;overflow:hidden;padding-block:clamp(55px,8vw,113px) clamp(43px,6vw,70px);background:radial-gradient(70% 52% at 50% 82%,#292929 0%,#131313 46%,#000000 82%)}
.cat-hero .cat-name{font-size:clamp(72px,14vw,167px)}
.cat-hero .meaning{margin-top:16px;font-size:15px;color:var(--steel)}
.cat-hero h1{margin-top:21px;font-size:clamp(31px,5vw,57px);line-height:1.06;letter-spacing:-0.032em}
.cat-hero .sub{max-width:38ch;margin:16px auto 0;color:var(--mist);font-size:clamp(17px,2vw,22px);line-height:1.4;letter-spacing:-0.016em;text-wrap:pretty}
.lineup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;text-align:center}
.lcard{position:relative;display:flex;flex-direction:column;align-items:center;padding:clamp(27px,4vw,43px) 27px 34px;border-radius:34px;overflow:hidden}
.lcard.dark{background:radial-gradient(70% 50% at 50% 70%,#232323 0%,#0b0b0b 80%);border:1px solid #1d1d1d}
.lcard.cloud{background:radial-gradient(70% 50% at 50% 70%,#ffffff 0%,#f5f5f5 80%)}
.lcard .lc-name{font-size:clamp(39px,5vw,57px);font-weight:600;letter-spacing:-0.01em;line-height:1}
.lcard .lc-tag{margin-top:10px;font-size:19px;letter-spacing:-0.016em;font-weight:600}
.lcard.dark .lc-tag span{color:var(--steel)}
.lcard.cloud .lc-tag span{color:var(--fog)}
.lcard img{height:clamp(240px,30vw,360px);width:auto;margin-top:27px}
.lcard .lc-facts{display:flex;gap:27px;justify-content:center;margin-top:21px;font-size:15px}
.lcard.dark .lc-facts{color:var(--mist)}
.lcard.cloud .lc-facts{color:var(--fog)}
.lcard .lc-facts b{display:block;font-size:22px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.lcard.dark .lc-facts b{color:#f5f5f5}
.lcard.cloud .lc-facts b{color:var(--ink)}
.lcard .lc-price{margin-top:21px;font-size:17px;font-variant-numeric:tabular-nums}
.lcard .cta-row{margin-top:16px}
.compare{width:100%;border-collapse:collapse;font-size:15px;text-align:left}
.compare-scroll{overflow-x:auto;margin-top:clamp(34px,5vw,43px);-webkit-overflow-scrolling:touch}
.compare th,.compare td{padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:top;line-height:1.47}
.compare thead th{font-size:24px;letter-spacing:-0.01em;padding-bottom:16px;border-bottom:1px solid var(--line);width:40%}
.compare thead th:first-child{width:20%}
.compare tbody th{font-weight:600;color:var(--ink);font-size:15px;white-space:nowrap;background:var(--paper)}
.nav.is-static .nav-cta{display:none}
.nav.is-static .menu-btn{margin-left:auto}
.compare td{color:var(--ink-2)}
.compare .na{color:var(--steel)}
.finder-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:21px;margin-top:clamp(34px,5vw,55px);text-align:left}
.panel{border-radius:27px;padding:clamp(21px,3.4vw,34px)}
.light .panel{background:var(--cloud)}
.chips{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0;min-width:0}
.chips legend{font-size:15px;font-weight:600;margin-bottom:13px;padding:0}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:8px 13px;border-radius:13px;border:1px solid var(--line);background:#ffffff;cursor:pointer;font-size:15px;line-height:1.25;font-weight:500}
.chip span small{font-size:12px;color:var(--fog);font-weight:400;font-variant-numeric:tabular-nums}
.chip input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.dims{display:flex;align-items:flex-end;gap:13px;margin-top:27px}
.dims .x{padding-bottom:13px;color:var(--fog);font-size:19px}
.area{margin-top:16px;font-size:15px;color:var(--fog);font-variant-numeric:tabular-nums}
.area strong{color:var(--ink);font-size:24px;letter-spacing:-0.02em;margin-right:4px}
.result{display:flex;flex-direction:column;justify-content:space-between;gap:21px;background:var(--ink);color:#f5f5f5}
.light .result{background:var(--ink)}
.result-top{display:flex;gap:21px;align-items:center}
.result img{height:clamp(140px,16vw,190px);width:auto;flex:none}
.result .eyebrow{color:var(--mist);margin-bottom:6px;font-size:15px}
.result h3{font-size:clamp(24px,2.8vw,31px);line-height:1.12;letter-spacing:-0.025em}
.result p{margin-top:8px;color:var(--mist);font-size:17px}
.result .btn{align-self:flex-start}

/* ---------- forms (shared) ---------- */
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f.full{grid-column:1/-1}
.f label{font-size:15px;font-weight:600;letter-spacing:-0.005em}
.f label .opt{font-weight:400;color:var(--fog)}
.f input,.f select,.f textarea{width:100%;font:inherit;font-size:17px;letter-spacing:-0.01em;height:50px;padding:0 13px;border-radius:13px;border:1px solid var(--line);background-color:#ffffff;color:var(--ink);transition:border-color .146s ease,box-shadow .146s ease}
.f select{appearance:none;-webkit-appearance:none;padding-right:43px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.f textarea{height:auto;min-height:96px;padding:13px 13px;resize:vertical;line-height:1.47}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,29,29,.12)}
.f .msg{font-size:13px;color:var(--error);min-height:0}
.f.err input,.f.err select{border-color:var(--error)}
.f .hint{font-size:13px;color:var(--fog)}
.phone{position:relative}
.phone span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--fog);font-size:17px;pointer-events:none}
.phone input{padding-left:55px}
.upper{text-transform:uppercase}
.dark .f label{color:#f5f5f5}
.dark .f label .opt,.dark .f .hint{color:var(--mist)}
.dark .f input,.dark .f select,.dark .f textarea{background-color:var(--field-d);border-color:var(--field-d-line);color:#f5f5f5}
.dark .f input::placeholder,.dark .f textarea::placeholder{color:#6e6e6e}
.dark .f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3a3a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.dark .f input:focus,.dark .f select:focus,.dark .f textarea:focus{border-color:#f5f5f5;box-shadow:0 0 0 3px rgba(245,245,245,.14)}
.dark .f .msg{color:var(--error-d)}
.dark .f.err input,.dark .f.err select{border-color:var(--error-d)}

/* ---------- pre-order page ---------- */
.po-hero{text-align:center;padding-block:clamp(55px,8vw,89px) clamp(43px,6vw,70px);background:radial-gradient(70% 60% at 50% 100%,#232323 0%,#0b0b0b 55%,#000 85%)}
.po-hero h1{font-size:clamp(39px,6vw,72px);line-height:1.04;letter-spacing:-0.035em}
.po-hero .lead{color:var(--mist);max-width:44ch;margin-inline:auto}
.notify-models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:clamp(34px,5vw,55px);text-align:left}
.nm{display:grid;grid-template-columns:auto minmax(0,1fr);gap:21px;align-items:center;padding:21px 27px;border-radius:27px;background:var(--panel-d);border:1px solid var(--panel-d-line)}
.nm img{height:132px;width:auto}
.nm b{display:block;font-size:24px;letter-spacing:.01em}
.nm small{display:block;margin-top:2px;font-size:13px;color:var(--mist)}
.nm .np{display:block;margin-top:8px;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.nm .btn{margin-top:13px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:clamp(34px,5vw,43px) 0 0;padding:0;list-style:none;text-align:left;counter-reset:st}
.steps li{background:#ffffff;border-radius:16px;padding:16px 16px 21px;font-size:13px;line-height:1.42;color:var(--fog);counter-increment:st}
.steps li::before{content:counter(st);font-size:13px;font-weight:600;color:var(--steel);font-variant-numeric:tabular-nums}
.steps li b{display:block;color:var(--ink);font-size:17px;letter-spacing:-0.015em;margin-top:6px;margin-bottom:4px}
.order-grid{display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:21px;margin-top:21px;align-items:start;text-align:left}
.card{background:#ffffff;border-radius:27px;padding:clamp(21px,3.4vw,34px)}
.order-form fieldset{border:0;margin:0;padding:0;min-width:0}
.order-form fieldset+fieldset{margin-top:34px}
.order-form legend{font-size:22px;font-weight:600;letter-spacing:-0.022em;margin-bottom:16px;padding:0}
.models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.mcard{position:relative;display:flex;gap:13px;align-items:center;padding:13px 16px;border-radius:21px;border:1px solid var(--line);background:#ffffff;cursor:pointer;transition:border-color .236s ease}
.mcard:hover{border-color:var(--steel)}
.mcard.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mcard input{position:absolute;opacity:0;width:1px;height:1px}
.mcard:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.mcard img{height:86px;width:auto;flex:none}
.mcard b{display:block;font-size:19px;letter-spacing:.01em}
.mcard small{display:block;font-size:13px;color:var(--fog);margin-top:2px}
.mcard .mp{display:block;margin-top:6px;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.qty-row{display:flex;flex-wrap:wrap;align-items:center;gap:13px 21px}
.stepper{display:inline-flex;align-items:center;gap:6px;background:var(--cloud);border-radius:980px;padding:4px}
.stepper button{width:40px;height:40px;border-radius:50%;border:0;background:#ffffff;color:var(--ink);font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.stepper output{min-width:36px;text-align:center;font-weight:600;font-size:17px;font-variant-numeric:tabular-nums}
.qty-note{font-size:13px;color:var(--fog)}
.summary{position:sticky;top:calc(var(--nav-h) + 24px + env(safe-area-inset-top,0px))}
.summary h3{font-size:22px;letter-spacing:-0.022em}
.s-item{display:flex;align-items:center;gap:13px;margin-top:16px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.s-item img{height:64px;width:auto;flex:none}
.s-item b{display:block;font-size:17px}
.s-item span{display:block;font-size:13px;color:var(--fog);font-variant-numeric:tabular-nums}
.s-rows{margin:13px 0 0;padding:0;list-style:none}
.s-rows li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:15px;font-variant-numeric:tabular-nums}
.s-rows li span:first-child{color:var(--fog)}
.s-rows .tot{border-top:1px solid var(--line-2);margin-top:10px;padding-top:13px;font-weight:600;font-size:17px}
.s-rows .tot span:first-child{color:var(--ink)}
.s-rows .today{font-weight:600}
.s-rows .today span:first-child{color:var(--ink)}
.s-note{margin-top:13px;font-size:13px;line-height:1.47;color:var(--fog)}
.s-cta{margin-top:21px}
.fine{margin-top:13px;font-size:12px;line-height:1.47;color:var(--fog);text-align:center}
.confirm{max-width:760px;margin:21px auto 0;text-align:center}
.confirm:focus{outline:none}
.check{width:56px;height:56px;margin:0 auto;color:var(--ink)}
.motion .confirm:not([hidden]) .check circle{stroke-dasharray:64;stroke-dashoffset:64;animation:draw 1s var(--ease) .1s forwards}
.motion .confirm:not([hidden]) .check path{stroke-dasharray:20;stroke-dashoffset:20;animation:draw .618s var(--ease) .7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.confirm h3{font-size:clamp(28px,3.4vw,35px);letter-spacing:-0.028em;margin-top:16px}
.code-box{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:10px 13px 10px 21px;border-radius:16px;background:var(--cloud)}
.code-box strong{font-size:clamp(28px,4vw,35px);letter-spacing:.04em;font-variant-numeric:normal}
.code{font-variant-numeric:normal;letter-spacing:.01em}
.iconbtn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 13px;border-radius:10px;border:1px solid var(--line);background:#ffffff;color:var(--ink);cursor:pointer;font-size:15px;font-weight:500}
.iconbtn:hover{border-color:var(--ink)}
.iconbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.c-note{margin:16px auto 0;max-width:48ch;color:var(--fog);font-size:17px;text-wrap:pretty}
.c-actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:27px}
.c-sum{margin:27px auto 0;max-width:420px;padding:0;list-style:none;text-align:left}
.c-sum li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:15px;font-variant-numeric:tabular-nums}
.c-sum li span:first-child{color:var(--fog)}
.share{margin-top:27px;padding:27px;border-radius:21px;background:var(--cloud);text-align:left}
.share h4{font-size:19px;letter-spacing:-0.02em}
.share p{margin-top:6px;color:var(--fog);font-size:15px}
.share-link{margin-top:13px;padding:13px 13px;border-radius:13px;background:#ffffff;border:1px solid var(--line-2);font-size:15px;color:var(--ink-2);overflow-wrap:anywhere;user-select:all}
.share-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:13px}
.restart{margin-top:21px;background:none;border:0;color:var(--fog);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:15px;min-height:44px}
.restart:hover{color:var(--ink)}

/* ---------- business page ---------- */
.biz-form{margin-top:13px;background:var(--panel-d);border:1px solid var(--panel-d-line);border-radius:27px;padding:clamp(21px,3.4vw,34px);text-align:left}
.biz-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:27px}
.biz-head h2{font-size:24px;letter-spacing:-0.025em}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:13px;background:#0b0b0b;border:1px solid var(--panel-d-line);margin:0;min-width:0}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:flex;align-items:center;min-height:40px;padding:0 16px;border-radius:10px;font-size:15px;font-weight:500;color:var(--mist);cursor:pointer;transition:background-color .236s ease,color .236s ease}
.seg input:checked+span{background:#2c2c2c;color:#ffffff}
.seg input:focus-visible+span{outline:2px solid #f5f5f5;outline-offset:1px}
.biz-foot{display:flex;flex-wrap:wrap;align-items:center;gap:13px 21px;margin-top:27px}
.biz-foot p{font-size:13px;color:var(--mist);max-width:46ch}

/* ---------- accordion: FAQ + policies ---------- */
.acc{max-width:840px;margin:clamp(34px,5vw,43px) auto 0;text-align:left}
.acc details{border-bottom:1px solid var(--line)}
.acc details:first-child{border-top:1px solid var(--line)}
.dark .acc details{border-color:#262626}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:21px;padding:21px 2px;font-size:19px;font-weight:600;letter-spacing:-0.018em}
.acc summary::-webkit-details-marker{display:none}
.acc summary:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:6px}
.chev{width:18px;height:18px;flex:none;transition:transform .236s var(--ease)}
details[open]>summary .chev{transform:rotate(180deg)}
.acc .body{padding:0 2px 27px;font-size:17px;line-height:1.56;max-width:66ch}
.light .acc .body,.cloud .acc .body{color:var(--ink-2)}
.dark .acc .body{color:var(--mist)}
.acc .body p+p,.acc .body ul+p,.acc .body p+ul{margin-top:10px}
.acc .body ul{margin:0;padding-left:21px}
.acc .body li+li{margin-top:6px}
.motion details[open] .body{animation:accIn .382s var(--ease)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.policies .acc{margin-top:0}
.policies .acc summary{font-size:17px;padding:16px 2px}
.policies .acc .body{font-size:15px}

/* ---------- category (coming soon) pages ---------- */
.cs-hero{position:relative;min-height:min(85.4svh,820px);display:grid;grid-template-columns:minmax(0,1fr);align-items:end;overflow:hidden;background:#000;isolation:isolate}
.cs-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
.cs-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:56%;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 58%,#000 100%);z-index:-1;pointer-events:none}
.cs-copy{width:100%;min-width:0;padding-block:clamp(113px,24vh,232px) clamp(43px,7vw,89px);text-align:center}
@media (max-width:400px){.cs-copy .cta-row .btn{font-size:15px;padding-inline:16px;gap:6px}}
/* --em is the word's width in ems, so long names (SOMNUS) shrink to fit narrow screens */
.cs-hero .cat-name{font-size:min(clamp(76px,16vw,200px),calc((100vw - 48px) / var(--em,4.4)));white-space:nowrap}
.cs-hero .meaning{margin-top:16px;font-size:15px;color:var(--steel)}
.cs-hero h1{margin-top:21px;font-size:clamp(31px,5vw,57px);line-height:1.06;letter-spacing:-0.032em}
.cs-hero .sub{max-width:40ch;margin:16px auto 0;color:var(--mist);font-size:clamp(17px,2vw,22px);line-height:1.42;letter-spacing:-0.016em;text-wrap:pretty}
.coming{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:clamp(34px,5vw,55px);text-align:left}
.coming .ftile{min-height:200px}
.learn-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:27px;align-items:center;padding:clamp(27px,3.4vw,34px);border-radius:27px;background:var(--cloud);color:var(--ink);text-decoration:none;text-align:left;transition:background-color .236s ease}
.learn-link:hover{background:#ececec}
.learn-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.learn-link b{display:block;font-size:24px;letter-spacing:-0.022em;color:var(--ink)}
.learn-link .ll-d{display:block;margin-top:6px;color:var(--fog);font-size:17px;max-width:52ch}
.learn-link i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--metal);box-shadow:var(--metal-edge);color:#fff;font-style:normal}
.learn-link i svg{width:16px;height:16px}
.others{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:clamp(27px,4vw,43px)}
.others .ctile{min-height:240px;border-radius:27px}
.others .ctile .cat-name{font-size:22px}
.others .ctile .ck{font-size:15px}
.others .ctile-copy{padding:21px 21px 0}
.others .ctile .go{right:16px;bottom:16px;width:36px;height:36px}
.others .ctile .duo-pics{height:52%;right:60px;gap:10px}

/* ---------- learn page ---------- */
.learn-hero{background:var(--paper);color:var(--ink);padding-block:clamp(70px,9vw,113px) clamp(43px,5vw,55px);color-scheme:light}
.learn-hero h1{font-size:clamp(39px,6.6vw,81px);line-height:1.02;letter-spacing:-0.04em;max-width:14ch}
.learn-hero .lead{max-width:44ch;margin-top:21px;color:var(--fog)}
.learn-hero .five{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;list-style:none;padding:0}
.learn-hero .five a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px 0 21px;border-radius:980px;background:var(--cloud);text-decoration:none;color:var(--ink);font-family:var(--brand);font-weight:500;font-size:13px;letter-spacing:.14em}
.learn-hero .five a:hover{background:#e8e8e8}
.learn-hero .five a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.learn-hero .five a b{font-family:var(--brand);font-weight:500;font-size:11px;letter-spacing:.14em;background:var(--ink);color:#fff;border-radius:980px;padding:5px 8px 5px 10px}
.learn-nav{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));z-index:30;background:rgba(255,255,255,.97);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line-2);color-scheme:light}
.learn-nav ul{display:flex;gap:6px;list-style:none;padding:8px 0;overflow-x:auto;scrollbar-width:none}
.learn-nav ul::-webkit-scrollbar{display:none}
.learn-nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border-radius:980px;font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:background-color .236s ease,color .236s ease}
.learn-nav a:hover{background:var(--cloud)}
.learn-nav a.is-here{background:var(--ink);color:#fff}
.learn-nav a.cat{font-family:var(--brand);font-weight:500;font-size:12px;letter-spacing:.14em;padding:0 13px 0 16px}
.learn-nav a:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.article{background:var(--paper);color:var(--ink);color-scheme:light}
.chapter{padding-block:clamp(70px,8vw,113px);border-top:1px solid var(--line-2)}
.chapter:first-child{border-top:0}
.chapter>.wrap>.prose:first-of-type{margin-top:8px}
.chapter-head{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:760px}
.chapter-head .cat-tag{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--fog);font-weight:500}
.chapter-head .cat-tag b{font-family:var(--brand);font-weight:500;font-size:12px;letter-spacing:.16em;color:var(--ink)}
.chapter h2{font-size:clamp(35px,5vw,57px);line-height:1.04;letter-spacing:-0.035em}
.chapter .lead{max-width:46ch;margin-top:6px}
.prose{max-width:667px;font-size:19px;line-height:1.53;letter-spacing:-0.012em;color:var(--ink-2)}
.prose h3{margin-top:clamp(43px,6vw,70px);font-size:clamp(24px,2.8vw,31px);line-height:1.15;letter-spacing:-0.024em;color:var(--ink)}
.prose p{margin-top:16px;text-wrap:pretty}
.prose ul{margin-top:16px;padding-left:21px}
.prose li+li{margin-top:8px}
.prose strong{color:var(--ink);font-weight:600}
sup.ref{font-size:.62em;line-height:0;margin-left:1px;font-weight:600}
sup.ref a{color:var(--fog);text-decoration:none;padding:0 1px}
sup.ref a:hover{color:var(--ink);text-decoration:underline}
sup.ref a:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-radius:2px}
.fig{margin:clamp(34px,4vw,43px) 0 0;max-width:960px}
.fig figcaption{margin-top:13px;font-size:13px;line-height:1.5;color:var(--fog);max-width:68ch}
.fig-card{border-radius:27px;background:var(--cloud);padding:clamp(21px,3.4vw,43px)}
.fig-dark{border-radius:27px;background:#000;color:#f5f5f5;padding:clamp(21px,3.4vw,43px);color-scheme:dark}
.hair{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(21px,4vw,43px);align-items:center}
.hair svg{width:clamp(180px,26vw,280px);height:auto;display:block}
.hair dl{margin:0;display:flex;flex-direction:column;gap:16px}
.hair dt{font-size:15px;color:var(--mist)}
.hair dd{margin:2px 0 0;font-size:clamp(28px,3vw,35px);font-weight:600;letter-spacing:-0.025em;font-variant-numeric:tabular-nums}
.hair p{font-size:15px;color:var(--mist);max-width:40ch}
.limits{display:flex;flex-direction:column;gap:27px}
.limits h4{font-size:15px;font-weight:600;letter-spacing:-0.01em;margin-bottom:10px}
.lbar{display:grid;grid-template-columns:132px minmax(0,1fr);gap:13px;align-items:center;font-size:13px;margin-top:8px}
.lbar span:first-child{color:var(--ink-2)}
.lbar .track{position:relative;height:24px}
.lbar .bar{font-style:normal;position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;font-variant-numeric:tabular-nums;transform-origin:0 50%}
.lbar .bar b,.lbar .out{font-weight:600;font-size:13px;font-variant-numeric:tabular-nums}
.lbar .out{position:absolute;top:50%;transform:translateY(-50%);color:var(--ink)}
.lgroup+.lgroup{margin-top:4px}
.lbar .bar.who{background:var(--ink);color:#fff}
.lbar .bar.ind{background:#a1a1a1;color:#000}
.motion .limits.is-in .bar{animation:grow 1s var(--ease) both}
.motion .limits.is-in .lbar:nth-of-type(2) .bar{animation-delay:.12s}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
.axis{display:grid;grid-template-columns:132px minmax(0,1fr);gap:13px;margin-top:6px;font-size:12px;color:var(--fog);font-variant-numeric:tabular-nums}
.axis div{position:relative;height:16px}
.axis i{position:absolute;top:0;transform:translateX(-50%);font-style:normal}
.axis i:first-child{transform:none}
.axis i.end{transform:translateX(-100%);white-space:nowrap}
.aqi-scale{display:grid;grid-template-columns:50fr 50fr 100fr 100fr 100fr 100fr;gap:3px;margin-top:4px}
.aqi-scale div{height:14px;border-radius:3px}
.aqi-ticks{display:grid;grid-template-columns:50fr 50fr 100fr 100fr 100fr 100fr;gap:3px;font-size:12px;color:var(--fog);margin-top:6px;font-variant-numeric:tabular-nums}
.aqi-ticks span:last-child{display:flex;justify-content:space-between}
.aqi-table{width:100%;border-collapse:collapse;font-size:15px;margin-top:21px}
.aqi-table th,.aqi-table td{text-align:left;padding:13px 13px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.47}
.aqi-table thead th{font-size:13px;color:var(--fog);font-weight:600;border-bottom-color:var(--steel)}
.aqi-table td.r{white-space:nowrap;font-variant-numeric:tabular-nums}
.aqi-table .aqi-band{display:inline-flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap}
.aqi-table .sw{width:14px;height:14px;border-radius:4px;flex:none;border:1px solid rgba(0,0,0,.08)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sources-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:8px}
.src{background:var(--paper);border-radius:21px;padding:21px 21px 21px}
.src svg{width:28px;height:28px;color:var(--ink)}
.src b{display:block;margin-top:13px;font-size:17px;letter-spacing:-0.015em}
.src span{display:block;margin-top:4px;font-size:13px;line-height:1.47;color:var(--fog)}
.callouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;max-width:680px;margin-top:27px}
.callouts .callout{margin-top:0;grid-template-columns:minmax(0,1fr);gap:10px}
.callout{margin-top:27px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline;padding:21px 27px;border-radius:21px;background:var(--ink);color:#f5f5f5;max-width:680px}
.callout b{font-size:clamp(35px,4vw,45px);line-height:1;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.callout p{font-size:17px;line-height:1.47;color:#d2d2d2}
.layers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);gap:clamp(21px,4vw,43px);align-items:center}
.layers svg{width:100%;height:auto;display:block}
.layers ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px;counter-reset:ly}
.layers li{position:relative;padding-left:43px;counter-increment:ly}
.layers li::before{content:counter(ly);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:6px;border:1px solid #3a3a3a;display:grid;place-items:center;font-size:12px;font-weight:600;color:#d2d2d2}
.layers li b{display:block;font-size:17px}
.layers li span{display:block;margin-top:3px;font-size:15px;line-height:1.47;color:var(--mist)}
.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:clamp(27px,4vw,43px);list-style:none;padding:0}
.tips li{background:var(--cloud);border-radius:21px;padding:21px 21px 27px}
.tips svg{width:26px;height:26px;color:var(--ink)}
.tips b{display:block;margin-top:13px;font-size:19px;letter-spacing:-0.018em;line-height:1.25}
.tips p{margin-top:6px;font-size:15px;line-height:1.47;color:var(--fog)}
.db-ladder{position:relative;margin-top:8px}
.db-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;min-height:52px;border-top:1px solid var(--line)}
.db-row .lvl{font-size:22px;font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.db-row .lvl small{font-size:12px;font-weight:600;margin-left:2px;color:var(--fog)}
.db-row p{font-size:15px;line-height:1.4;color:var(--ink-2);padding-block:10px}
.db-row p b{color:var(--ink)}
.db-meter{height:6px;border-radius:3px;background:var(--line-2);margin-top:6px;position:relative;overflow:hidden}
.db-meter i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--ink)}
.dayline{position:relative}
.dayline svg{width:100%;height:auto;display:block}
.dayline .dl-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.dayline .dl-legend div{border-top:1px solid #3a3a3a;padding-top:13px}
.dayline .dl-legend b{display:block;font-size:22px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.dayline .dl-legend span{display:block;margin-top:4px;font-size:13px;line-height:1.47;color:var(--mist)}
.prod-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:clamp(34px,4vw,43px);max-width:960px}
.pl-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:21px 21px;border-radius:27px;text-decoration:none;color:inherit;transition:border-color .236s ease}
.pl-card.dark{background:#000;color:#f5f5f5;border:1px solid #1d1d1d}
.pl-card.cloud{background:var(--cloud);border:1px solid transparent}
.pl-card:hover{border-color:var(--steel)}
.pl-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pl-card img{height:124px;width:auto}
.pl-card b{display:block;font-size:22px;letter-spacing:.01em}
.pl-card .t{display:block;margin-top:2px;font-size:15px}
.pl-card.dark .t{color:var(--mist)}
.pl-card.cloud .t{color:var(--fog)}
.pl-card .p{display:block;margin-top:8px;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.pl-soon{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:21px;align-items:center;margin-top:clamp(34px,4vw,43px);max-width:960px;min-height:180px;padding:27px 27px;border-radius:27px;overflow:hidden;background:#000;color:#f5f5f5;isolation:isolate;color-scheme:dark}
.pl-soon canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.9}
.pl-soon .cat-name{font-size:28px}
.pl-soon p{margin-top:8px;color:var(--mist);font-size:17px;max-width:40ch}
.pl-soon .btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.refs{max-width:860px;margin:0;padding:0;list-style:none;counter-reset:rf}
.refs li{position:relative;padding:13px 0 13px 43px;border-top:1px solid var(--line-2);font-size:15px;line-height:1.5;color:var(--ink-2);counter-increment:rf;overflow-wrap:anywhere}
.refs li::before{content:counter(rf);position:absolute;left:0;top:14px;font-weight:600;color:var(--fog);font-variant-numeric:tabular-nums}
.refs li:target{background:var(--cloud);border-radius:8px}
.refs a{color:var(--ink)}
.disclaimer{margin-top:27px;font-size:13px;color:var(--fog);max-width:68ch}

/* ---------- footer ---------- */
.foot{background:var(--black);color:var(--mist);font-size:13px;line-height:1.48;border-top:1px solid #161616}
.foot-grid{display:grid;grid-template-columns:1.618fr repeat(4,minmax(0,1fr));gap:34px;padding-block:55px 34px}
.foot h2{font-size:13px;font-weight:600;color:#f5f5f5;letter-spacing:0;margin-bottom:13px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.foot a{color:#d2d2d2;text-decoration:none}
.foot a:hover{color:#ffffff;text-decoration:underline}
.foot a:focus-visible,.foot button:focus-visible{outline:2px solid #f5f5f5;outline-offset:2px;border-radius:4px}
.foot .cat{font-family:var(--brand);font-weight:500;letter-spacing:.12em;font-size:12px}
.foot .tagline{margin-top:13px;color:var(--mist);max-width:28ch}
.contact-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.contact-line span{color:#d2d2d2;user-select:all}
.mini{background:none;border:1px solid #3a3a3a;color:#d2d2d2;border-radius:8px;min-height:32px;padding:0 10px;font-size:12px;cursor:pointer}
.mini:hover{border-color:#f5f5f5;color:#ffffff}
.legal{border-top:1px solid #1f1f1f;padding-block:21px 34px;display:flex;flex-wrap:wrap;gap:8px 27px;justify-content:space-between;color:var(--steel);font-size:12px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;background:#1d1d1d;color:#ffffff;border:1px solid #3a3a3a;padding:13px 16px;border-radius:13px;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100% - 32px)}
.motion .toast:not([hidden]){animation:toastIn .382s var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- 404 ---------- */
.nf{min-height:calc(100svh - var(--nav-h) - 44px);display:grid;place-items:center;text-align:center;padding-block:89px}
.nf .frame{width:min(100%,520px);aspect-ratio:2.618/1;margin:0 auto;font-family:var(--brand);font-weight:500;font-size:clamp(50px,10vw,92px);letter-spacing:.08em}
.nf h1{margin-top:34px;font-size:clamp(28px,4vw,39px);letter-spacing:-0.028em}
.nf p{margin-top:10px;color:var(--mist)}

/* ---------- reveal motion (only when motion is allowed; content stays visible otherwise) ---------- */
.motion [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.motion [data-reveal="focus"]{transform:translateY(16px) scale(.985);filter:blur(10px)}
.motion [data-reveal="zoom"]{transform:scale(.94);transition-duration:1.618s}
.motion [data-reveal].is-in{opacity:1;transform:none;filter:none}
.motion [data-stagger]>*{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.motion [data-stagger].is-in>*{opacity:1;transform:none}
.motion [data-stagger].is-in>*:nth-child(2){transition-delay:.08s}
.motion [data-stagger].is-in>*:nth-child(3){transition-delay:.16s}
.motion [data-stagger].is-in>*:nth-child(4){transition-delay:.24s}
.motion [data-stagger].is-in>*:nth-child(5){transition-delay:.32s}
.motion [data-stagger].is-in>*:nth-child(6){transition-delay:.4s}
.motion [data-parallax]{will-change:transform}

/* page-to-page fade where the browser supports it */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .236s ease both}
::view-transition-new(root){animation:vtIn .382s var(--ease) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}

/* ---------- responsive ---------- */
@media (max-width:1068px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-grid{grid-template-columns:minmax(0,1fr)}
  .summary{position:static}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-grid .fbrand{grid-column:1/-1}
  .others{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sources-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .nav-cta{margin-left:auto}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctile.big{grid-column:1/-1}
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow-stage{max-width:560px;width:100%;margin-inline:auto}
  .facts{grid-template-columns:minmax(0,1fr);gap:0}
  .fact{padding-block:21px}
  .tips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layers{grid-template-columns:minmax(0,1fr)}
  .layers svg{max-width:420px}
}
@media (max-width:820px){
  .finder-grid{grid-template-columns:minmax(0,1fr)}
  .biz-cards{grid-template-columns:minmax(0,1fr)}
  .duo{grid-template-columns:minmax(0,1fr)}
  .lineup{grid-template-columns:minmax(0,1fr)}
  .promise{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:21px}
  .p-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .inbox{grid-template-columns:minmax(0,1fr)}
  .notify-models{grid-template-columns:minmax(0,1fr)}
  .coming{grid-template-columns:minmax(0,1fr)}
  .prod-layout{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid .fcontact{grid-column:1/-1}
  .localnav nav{display:none}
  .localnav .btn{margin-left:auto}
  .hair{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .hair p{margin-inline:auto}
}
@media (max-width:734px){
  .cats{grid-template-columns:minmax(0,1fr)}
  .ctile,.ctile.tall{min-height:400px}
  .ctile.big{min-height:460px}
  .ctile .duo-pics{height:64%;right:50%;transform:translateX(50%)}
  .spec-grid{grid-template-columns:minmax(0,1fr)}
  .buybox{grid-template-columns:minmax(0,1fr)}
  .bb-side{align-items:stretch}
  .bb-side .btn{width:100%}
  .bb-side .countdown-sm{align-self:flex-start}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .models{grid-template-columns:minmax(0,1fr)}
  .next-card{grid-template-columns:auto minmax(0,1fr);gap:21px;padding:21px}
  .next-card img{height:104px}
  .next-card .nc-btn{grid-column:1/-1;width:100%}
  .learn-link{grid-template-columns:minmax(0,1fr)}
  .pl-soon{grid-template-columns:minmax(0,1fr)}
  .pl-soon .btns{justify-content:flex-start}
  .tips{grid-template-columns:minmax(0,1fr)}
  .sources-grid{grid-template-columns:minmax(0,1fr)}
  .dayline .dl-legend{grid-template-columns:minmax(0,1fr)}
  .lbar,.axis{grid-template-columns:96px minmax(0,1fr)}
  .prose{font-size:17px}
  .p-shot img{height:clamp(340px,96vw,480px)}
  .compare thead th{font-size:19px}
  .compare{min-width:600px;font-size:15px}
  .compare tbody th,.compare thead th:first-child{position:sticky;left:0;z-index:1;background:var(--paper)}
  .compare th,.compare td{padding:13px 13px}
}
@media (max-width:600px){
  .aqi-table thead{display:none}
  .aqi-table,.aqi-table tbody{display:block}
  .aqi-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
  .aqi-table td{border:0;padding:0}
  .aqi-table td.r{font-size:13px}
  .aqi-table td.r::before{content:attr(data-l) " ";color:var(--fog);font-size:12px}
  .aqi-table td:last-child{grid-column:1/-1;color:var(--ink-2);font-size:13px}
  .callouts{grid-template-columns:minmax(0,1fr)}
  .callout{grid-template-columns:minmax(0,1fr);gap:8px}
  .biz-head .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .seg span{justify-content:center;padding:0 8px}
  .countdown{gap:10px}
  .cd-colon{display:none}
  .frame{aspect-ratio:1.618/1}
  .headline{letter-spacing:.04em}
  .others{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .tiles{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .steps li{padding:13px 13px 16px}
  .steps li b{font-size:15px}
  .result-top{flex-direction:column;align-items:flex-start}
  .spec-row{grid-template-columns:112px minmax(0,1fr)}
  .scale{padding-inline:70px;gap:21px}
  .ribbon a{display:inline-block}
  .nm{grid-template-columns:minmax(0,1fr)}
  .nm img{height:150px}
  .promise{grid-template-columns:minmax(0,1fr)}
  .pl-card img{height:100px}
  .cta-row .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* ======================================================================
   Learn page: topic cards open one topic at a time
   ====================================================================== */
.learn-hero .topics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-top:clamp(27px,4vw,43px)}
.topic-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:4/5;padding:16px 16px 16px;border-radius:27px;overflow:hidden;background:#000;color:#f5f5f5;text-decoration:none;isolation:isolate;border:1px solid #000;transition:transform .382s var(--ease),box-shadow .382s var(--ease),opacity .236s ease}
.topic-card canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.topic-card .cat-name{font-size:clamp(15px,1.6vw,19px);letter-spacing:.14em;padding-left:0}
.topic-card .tc-time{align-self:flex-start;font-size:12px;font-weight:500;color:#d2d2d2;padding:4px 10px;border-radius:980px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14)}
.topic-card:hover{transform:translateY(-3px)}
.topic-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.js .topic-card.is-current{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.topics-body .topic{padding-block:clamp(43px,6vw,89px);border-top:1px solid var(--line-2)}
.js .topic:not(.is-open){display:none}
.motion .topic.is-open{animation:topicIn .618s var(--ease)}
@keyframes topicIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.topic-head{max-width:760px;display:flex;flex-direction:column;gap:8px}
.topic-head .cat-name{font-size:13px;letter-spacing:.18em;color:var(--fog);padding-left:0}
.topic-head h2{font-size:clamp(35px,5vw,57px);line-height:1.04;letter-spacing:-0.035em}
.topic-head .lead{max-width:46ch;margin-top:4px}
.topic-time{font-size:13px;color:var(--fog)}
.topic-end{margin-top:clamp(43px,6vw,70px);max-width:960px;display:flex;flex-direction:column;gap:13px}
.all-topics{align-self:flex-start;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.all-topics::before{content:"";width:7px;height:7px;border-left:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:rotate(45deg);margin-top:4px}
.all-topics:hover{text-decoration:underline;text-underline-offset:3px}
.next-topic{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:21px;min-height:200px;padding:27px 27px 27px;border-radius:27px;overflow:hidden;background:#000;color:#f5f5f5;text-decoration:none;isolation:isolate;color-scheme:dark}
.next-topic .nt-art{position:absolute;inset:0;z-index:-1}
.next-topic .nt-art canvas{width:100%;height:100%;display:block}
.next-topic .nt-copy{display:flex;flex-direction:column;gap:6px}
.next-topic .nt-label{font-size:13px;color:var(--steel)}
.next-topic .cat-name{font-size:clamp(31px,4vw,45px);letter-spacing:.14em;padding-left:0}
.next-topic .nt-title{font-size:19px;font-weight:600;letter-spacing:-0.018em}
.next-topic .go{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--metal);box-shadow:var(--metal-edge);color:#fff;transition:transform .382s var(--ease)}
.next-topic .go svg{width:18px;height:18px}
.next-topic:hover .go{transform:translateX(4px)}
.next-topic:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.prod-pick{margin-top:clamp(34px,4vw,43px);max-width:960px;border-radius:27px;background:var(--cloud);padding:clamp(21px,3vw,34px)}
.pp-head{display:flex;flex-direction:column;gap:6px;max-width:54ch}
.pp-head .cat-name{font-size:12px;letter-spacing:.18em;color:var(--fog);padding-left:0}
.pp-head h3{font-size:clamp(24px,2.8vw,31px);letter-spacing:-0.024em;line-height:1.12}
.pp-head p{font-size:15px;color:var(--fog);line-height:1.47}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:13px;margin-top:21px}
.pp-item{display:flex;flex-direction:column;gap:13px;padding:16px;border-radius:21px}
.pp-item.dark{background:#000;color:#f5f5f5;color-scheme:dark}
.pp-item.cloud{background:#fff;color:var(--ink)}
.pp-link{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;text-decoration:none;color:inherit}
.pp-link img{height:110px;width:auto}
.pp-link b{display:block;font-size:22px;letter-spacing:.01em}
.pp-link .t{display:block;margin-top:2px;font-size:13px;opacity:.72}
.pp-link .p{display:block;margin-top:8px;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.pp-btns{display:flex;flex-wrap:wrap;gap:8px}
.pp-link:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:13px}
.aqi-hook{display:flex;align-items:center;gap:13px;width:100%;max-width:680px;margin-top:21px;padding:16px 16px;border-radius:16px;border:1px solid var(--line);background:var(--paper);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .236s ease}
.aqi-hook:hover{border-color:var(--ink)}
.aqi-hook:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.aqi-hook>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px}
.aqi-hook b{font-size:17px;letter-spacing:-0.015em}
.aqi-hook>span:nth-child(2)>span{font-size:13px;color:var(--fog)}
.aqi-hook-dot{width:12px;height:12px;border-radius:50%;flex:none;background:conic-gradient(#00b050,#92d050,#f2d10a,#ff9900,#ff3b30,#b00020,#00b050)}
.aqi-live{background:var(--paper);color-scheme:dark;padding-block:0 clamp(43px,5vw,70px)}
.mbar{display:none}

/* ======================================================================
   Air quality: nav bubble, panel, inline card
   ====================================================================== */
.aqi-btn{display:inline-flex;align-items:center;gap:6px;flex:none;height:32px;padding:0 13px 0 10px;border-radius:980px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#f5f5f5;font:inherit;font-size:13px;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .236s ease,background-color .236s ease}
.aqi-btn:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.1)}
.aqi-btn:focus-visible{outline:2px solid #f5f5f5;outline-offset:2px}
.aqi-btn .aqi-pin{width:14px;height:14px}
.aqi-btn .aqi-dot{display:none;width:9px;height:9px;border-radius:50%;background:#868686;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.aqi-btn.has-data .aqi-dot{display:block}
.aqi-btn.has-data .aqi-pin{display:none}
.aqi-btn .aqi-unit{font-size:11px;font-weight:600;color:var(--mist);letter-spacing:.06em}
.aqi-btn:not(.has-data) .aqi-unit{display:none}
.aqi-btn.is-loading .aqi-pin{animation:aqiPulse 1s ease-in-out infinite}
@keyframes aqiPulse{50%{opacity:.25}}
.aqi-scrim{position:fixed;inset:0;z-index:68;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.aqi-pop{position:fixed;z-index:70;top:64px;right:16px;width:min(392px,calc(100vw - 32px));max-height:calc(100svh - 80px);overflow-y:auto;overscroll-behavior:contain;border-radius:27px;background:#141414;border:1px solid #2a2a2a;color:#f5f5f5;box-shadow:0 30px 80px rgba(0,0,0,.55);color-scheme:dark}
.motion .aqi-pop:not([hidden]){animation:popIn .382s var(--ease)}
@keyframes popIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.aqi-pop-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:13px;padding:16px 16px 13px 21px;background:#141414}
.aqi-pop-head h2{font-size:17px;letter-spacing:-0.015em}
.aqi-x{width:36px;height:36px;border-radius:50%;border:0;background:#232323;color:#f5f5f5;cursor:pointer;display:grid;place-items:center}
.aqi-x svg{width:16px;height:16px}
.aqi-x:focus-visible{outline:2px solid #f5f5f5;outline-offset:2px}
.aqi-detail{padding:0 21px 21px}
.aqi-h{font-size:clamp(24px,3vw,31px);letter-spacing:-0.026em;line-height:1.1;margin-bottom:13px}
.aqi-intro{font-size:15px;line-height:1.47;color:#d2d2d2;max-width:46ch}
.aqi-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:center}
.aqi-actions .btn .ico-sm{margin-left:-4px}
.aqi-city select{height:44px;border-radius:980px;padding:0 34px 0 16px;border:1px solid #3a3a3a;background-color:#1c1c1c;color:#f5f5f5;font:inherit;font-size:15px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3a3a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
.aqi-city select:focus-visible{outline:2px solid #f5f5f5;outline-offset:2px}
.aqi-fine{margin-top:13px;font-size:12px;line-height:1.47;color:var(--fog);max-width:52ch}
.aqi-wait{display:flex;align-items:center;gap:13px;min-height:88px;color:#d2d2d2;font-size:15px}
.aqi-spin{width:20px;height:20px;border-radius:50%;border:2px solid #3a3a3a;border-top-color:var(--red-hi);animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.aqi-top{display:flex;align-items:flex-end;gap:16px}
.aqi-num{display:flex;align-items:baseline;gap:6px}
.aqi-num b{font-size:clamp(57px,7vw,72px);line-height:.9;font-weight:600;letter-spacing:-0.045em;font-variant-numeric:tabular-nums}
.aqi-num span{font-size:13px;font-weight:600;color:var(--mist);letter-spacing:.08em}
.aqi-meta{display:flex;flex-direction:column;gap:6px;padding-bottom:4px;min-width:0}
.aqi-chip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:5px 13px 5px 8px;border-radius:980px;background:#232323;font-size:13px;font-weight:600}
.aqi-chip i{width:10px;height:10px;border-radius:50%;flex:none}
.aqi-place{font-size:13px;color:var(--mist)}
.aqi-scalebar{position:relative;display:grid;grid-template-columns:50fr 50fr 100fr 100fr 100fr 100fr;gap:2px;margin-top:16px}
.aqi-scalebar i{display:block;height:6px;border-radius:3px;opacity:.85}
.aqi-scalebar b{position:absolute;top:-5px;width:4px;height:16px;border-radius:2px;background:#fff;box-shadow:0 0 0 2px #141414;transform:translateX(-50%)}
.aqi-note{margin-top:13px;font-size:13px;line-height:1.47;color:#d2d2d2}
.aqi-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 0}
.aqi-stats div{padding:10px 13px;border-radius:13px;background:#1c1c1c}
.aqi-stats dt{font-size:12px;color:var(--steel);line-height:1.3}
.aqi-stats dd{margin:4px 0 0;font-size:15px;font-weight:600;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.aqi-trend{margin:16px 0 0}
.aqi-trend figcaption{display:flex;justify-content:space-between;gap:13px;font-size:12px;color:var(--steel);margin-bottom:6px}
.aqi-trend .aqi-tip{color:#f5f5f5;font-variant-numeric:tabular-nums}
.aqi-trend svg{display:block;width:100%;height:auto;touch-action:pan-y;cursor:crosshair}
.aqi-trend .l{fill:none;stroke:#f5f5f5;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.aqi-trend .a{fill:rgba(245,245,245,.08);stroke:none}
.aqi-trend .g{stroke:#868686;stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.aqi-trend .e{fill:#f5f5f5;stroke:#141414;stroke-width:2}
.aqi-trend .h{fill:#f5f5f5}
.aqi-axis{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:12px;color:var(--steel)}
.aqi-advice{margin-top:16px;padding:13px 16px;border-radius:16px;background:#1c1c1c}
.aqi-advice b{display:block;font-size:15px}
.aqi-advice p{margin-top:4px;font-size:15px;line-height:1.47;color:#d2d2d2}
.aqi-pick{margin-top:13px;padding:13px 16px 16px;border-radius:16px;border:1px solid #2a2a2a}
.aqi-pick>b{display:block;font-size:13px;margin-bottom:6px}
.aqi-prod{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:center;padding:8px 0;text-decoration:none;color:inherit;border-bottom:1px solid #232323}
.aqi-prod img{height:52px;width:auto}
.aqi-prod b{display:block;font-size:15px;letter-spacing:.01em}
.aqi-prod span span{display:block;font-size:12px;color:var(--mist)}
.aqi-prod .pr{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.aqi-prod:hover b{text-decoration:underline;text-underline-offset:3px}
.aqi-prod:focus-visible{outline:2px solid #f5f5f5;outline-offset:2px;border-radius:8px}
.aqi-pick-cta{margin-top:13px}
.aqi-foot{display:flex;gap:16px;margin-top:13px}
.aqi-link{background:none;border:0;padding:0;color:#f5f5f5;font:inherit;font-size:15px;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#6e6e6e;min-height:32px}
.aqi-link:hover{text-decoration-color:#f5f5f5}
.aqi-attr{margin-top:10px;font-size:12px;line-height:1.47;color:var(--fog)}
.aqi-demo{margin-top:6px;font-size:12px;color:#ffcc66}
.aqi-card{border-radius:34px;background:#000;color:#f5f5f5;padding:clamp(21px,3.6vw,43px);border:1px solid #1d1d1d}
.aqi-card .aqi-detail{padding:0}
.aqi-card .aqi-attr,.aqi-card .aqi-fine{color:var(--mist)}
.aqi-card.is-ready{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(27px,4vw,55px);align-items:start}
.aqi-card.is-ready .aqi-col{min-width:0}
.aqi-card .aqi-h{grid-column:1/-1}

@media (max-width:980px){
  .nav-cta{display:none!important}
  .nav .aqi-btn{margin-left:auto}
  .nav.is-static .menu-btn{margin-left:0}
  .learn-hero .topics{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:734px){
  .learn-hero .topics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topic-card{aspect-ratio:auto;min-height:150px}
  .topic-card:last-child{grid-column:1/-1;min-height:120px}
  .aqi-card.is-ready{display:block}
  .aqi-pop{top:auto!important;right:0!important;left:0;bottom:0;width:100%;max-height:86svh;border-radius:27px 27px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .motion .aqi-pop:not([hidden]){animation:sheetIn .382s var(--ease)}
  @keyframes sheetIn{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
  .aqi-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .next-topic{grid-template-columns:minmax(0,1fr);min-height:180px}
  .next-topic .go{position:absolute;right:20px;top:20px;width:44px;height:44px}
  .mbar{display:flex;align-items:center;gap:13px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:45;padding:10px 10px 10px 16px;border-radius:21px;background:rgba(22,22,22,.92);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid #2a2a2a;color:#f5f5f5;box-shadow:0 12px 40px rgba(0,0,0,.35);transform:translateY(calc(100% + 24px));transition:transform .382s var(--ease)}
  .mbar.is-on{transform:none}
  .mbar p{flex:1;font-size:13px;line-height:1.3;color:#d2d2d2;min-width:0}
  .mbar p b{color:#fff;font-family:var(--brand);font-weight:500;letter-spacing:.12em;font-size:12px;margin-right:4px}
  .mbar [data-cd-short]{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
  .aqi-open .mbar{transform:translateY(calc(100% + 24px))}
}
@media (max-width:420px){
  .aqi-stats dd{font-size:15px}
  .pp-link img{height:90px}
}
@media (prefers-reduced-motion:reduce){
  .aqi-btn.is-loading .aqi-pin,.aqi-spin{animation:none}
}

/* ======================================================================
   Home: air near you
   ====================================================================== */
.aqh{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(70px,9vw,144px);background:#ffffff}
.aqh-haze{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;pointer-events:none}
.aqh-grid{display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:clamp(34px,6vw,89px);align-items:center}
.aqh-main{min-width:0}
.aqh-eyebrow{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--fog);letter-spacing:-0.005em}
.aqh-eyebrow .ico-sm{width:18px;height:18px;margin-left:-2px}
.aqh-h{margin-top:13px;font-size:clamp(35px,5.2vw,57px);line-height:1.04;letter-spacing:-0.036em;max-width:15ch;text-wrap:balance}
.aqh-sub{margin-top:16px;font-size:clamp(17px,1.6vw,19px);line-height:1.47;color:var(--fog);max-width:42ch;text-wrap:pretty}
.aqh-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px;align-items:center}
.aqh-actions .btn .ico-sm{margin-left:-4px}
.aqh-city select{height:44px;border-radius:980px;padding:0 43px 0 16px;border:1px solid var(--line);background-color:#fff;color:var(--ink);font:inherit;font-size:17px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;cursor:pointer}
.aqh-city select:hover{border-color:var(--steel)}
.aqh-city select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.aqh-fine{margin-top:16px;font-size:12px;line-height:1.47;color:var(--steel);max-width:52ch}
.aqh-read{display:flex;align-items:flex-end;gap:clamp(13px,2vw,21px);margin-top:13px}
.aqh-num{font-size:clamp(117px,17vw,213px);line-height:.8;font-weight:600;letter-spacing:-0.065em;font-variant-numeric:tabular-nums;margin-left:-.04em}
.aqh-meta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:.4em}
.aqh-unit{font-size:15px;font-weight:600;letter-spacing:.12em;color:var(--fog)}
.aqh-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 10px;border-radius:980px;background:#fff;border:1px solid var(--line-2);font-size:15px;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.aqh-chip i{width:11px;height:11px;border-radius:50%;flex:none}
.aqh-scale{position:relative;display:grid;grid-template-columns:50fr 50fr 100fr 100fr 100fr 100fr;gap:3px;margin-top:34px;max-width:560px}
.aqh-scale i{display:block;height:8px;border-radius:4px}
.aqh-scale b{position:absolute;top:-7px;left:var(--pos);width:5px;height:22px;border-radius:3px;background:var(--ink);box-shadow:0 0 0 3px #fff;transform:translateX(-50%)}
.motion .aqh:not(.is-seen) .aqh-scale b{left:0}
.motion .aqh-scale b{transition:left 1.618s var(--ease)}
.aqh-ticks{display:grid;grid-template-columns:100fr 100fr 100fr 100fr 100fr 0fr;max-width:560px;margin-top:8px;font-size:12px;color:var(--steel);font-variant-numeric:tabular-nums}
.aqh-ticks span{white-space:nowrap}
.aqh-ticks span:last-child{justify-self:end}
.aqh-note{margin-top:16px;font-size:15px;line-height:1.47;color:var(--ink-2);max-width:46ch}
.aqh-side{min-width:0;padding:clamp(21px,3vw,34px);border-radius:27px;background:rgba(255,255,255,.86);border:1px solid var(--line-2);box-shadow:0 20px 60px rgba(0,0,0,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.aqh-k{font-size:15px;font-weight:600;letter-spacing:-0.01em}
.aqh-advice{margin-top:6px;font-size:17px;line-height:1.47;color:var(--ink-2);text-wrap:pretty}
.aqh-advice+.aqh-pick{margin-top:21px;padding-top:21px;border-top:1px solid var(--line-2)}
.aqh-prod{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:13px;align-items:center;padding:10px 0;text-decoration:none;color:inherit}
.aqh-prod+.aqh-prod{border-top:1px solid var(--line-2)}
.aqh-prod img{height:60px;width:auto;justify-self:center}
.aqh-prod b{display:block;font-size:17px;letter-spacing:.01em}
.aqh-prod span span{display:block;margin-top:2px;font-size:13px;color:var(--fog)}
.aqh-prod .pr{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.aqh-prod:hover b{text-decoration:underline;text-underline-offset:3px}
.aqh-prod:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:10px}
.aqh-pick .aqh-k{margin-bottom:4px}
.aqh-cta{margin-top:13px}
.aqh-foot{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:16px}
.aqh-link{display:inline-flex;align-items:center;min-height:32px;background:none;border:0;padding:0;color:var(--ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--steel)}
.aqh-link:hover{text-decoration-color:var(--ink)}
.aqh-attr{margin-top:8px;font-size:12px;line-height:1.47;color:var(--fog)}
.aqh-demo{margin-top:6px;font-size:12px;color:#a35200}
.aqh-wait{display:flex;align-items:center;gap:13px;min-height:120px;font-size:17px;color:var(--fog)}
.aqh-spin{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--red);animation:spin 1s linear infinite;flex:none}
@media (max-width:900px){
  .aqh-grid{grid-template-columns:minmax(0,1fr)}
  .aqh-h{max-width:18ch}
}
@media (prefers-reduced-motion:reduce){.aqh-spin{animation:none}}

/* ======================================================================
   Home: a room clearing as you scroll
   ====================================================================== */
.room{position:relative;background:#f5f5f5;color:var(--ink);color-scheme:light}
.motion .room{height:300svh}
.room-pin{position:relative;height:min(100svh,880px);min-height:560px;overflow:hidden;isolation:isolate}
.motion .room-pin{position:sticky;top:0;height:100svh}
.room-bg,.room-art{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.room-bg{z-index:-4;opacity:.3}
.room-haze{position:absolute;inset:-12%;z-index:-3;pointer-events:none;opacity:0;background:
  radial-gradient(34% 30% at 18% 28%,rgba(119,119,119,.2),rgba(119,119,119,0) 70%),
  radial-gradient(30% 26% at 72% 18%,rgba(119,119,119,.17),rgba(119,119,119,0) 70%),
  radial-gradient(42% 36% at 52% 66%,rgba(119,119,119,.18),rgba(119,119,119,0) 70%),
  radial-gradient(28% 28% at 88% 58%,rgba(119,119,119,.15),rgba(119,119,119,0) 70%),
  radial-gradient(36% 32% at 26% 84%,rgba(119,119,119,.16),rgba(119,119,119,0) 70%),
  rgba(140,140,140,.26)}
.room.is-live .room-haze{opacity:1;will-change:opacity,transform;animation:hazeDrift 4.236s ease-in-out infinite alternate}
@keyframes hazeDrift{from{transform:translate3d(-2.5%,-1%,0) scale(1.02)}to{transform:translate3d(2.5%,1.5%,0) scale(1.07)}}
.room-unit{position:absolute;left:0;top:0;width:auto;height:0;z-index:-2;pointer-events:none;max-width:none}
.room-art{z-index:-1}
.room-copy{position:relative;padding-top:calc(var(--nav-h) + clamp(34px,8vh,89px))}
.room-h{font-size:clamp(39px,5.4vw,72px);line-height:1.02;letter-spacing:-0.038em;max-width:9ch}
.room-meter{display:flex;align-items:flex-end;gap:13px;margin-top:clamp(21px,4vh,43px)}
.room-num{font-size:clamp(72px,9.5vw,131px);line-height:.8;font-weight:600;letter-spacing:-0.06em;font-variant-numeric:tabular-nums;min-width:2.15ch}
.room-side{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:.25em}
.room-unit{font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--fog)}
.room-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 10px;border-radius:980px;background:#fff;border:1px solid var(--line-2);font-size:15px;font-weight:600;white-space:nowrap}
.room-chip i{width:10px;height:10px;border-radius:50%;flex:none;transition:background-color .618s ease}
.room-note{margin-top:16px;font-size:13px;line-height:1.47;color:var(--fog);max-width:30ch}
.room-progress{position:absolute;left:50%;bottom:clamp(18px,4vh,36px);width:min(220px,46vw);height:2px;border-radius:2px;transform:translateX(-50%);background:rgba(0,0,0,.1);overflow:hidden}
.room-progress i{display:block;width:100%;height:100%;background:var(--red);transform-origin:left center;transform:scaleX(var(--p,1))}
.room:not(.is-live) .room-progress{display:none}
@media (max-width:734px){
  .room-h{max-width:11ch}
  .room-copy{padding-top:calc(var(--nav-h) + 27px)}
  .room-note{max-width:34ch}
}

/* ======================================================================
   Home: five categories, one particle field
   ====================================================================== */
.morph{padding-top:clamp(70px,10vw,144px)}
.morph-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:clamp(27px,4vw,70px)}
.morph-stage{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));align-self:start}
.morph-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.morph-dots{position:absolute;left:0;right:0;bottom:clamp(20px,4vh,40px);display:flex;justify-content:center;flex-wrap:wrap;gap:8px clamp(13px,2vw,27px);list-style:none;margin:0;padding:0;font-family:var(--brand);font-weight:500;font-size:12px;letter-spacing:.16em;color:#4a4a4a}
.morph-dots li{transition:color .382s ease}
.morph-dots li.is-on{color:#f5f5f5}
.morph-steps{display:flex;flex-direction:column}
.mstep{min-height:calc(86svh - var(--nav-h));display:flex;align-items:center}
.mstep:first-child,.mstep:last-child{min-height:calc(100svh - var(--nav-h))}
.mstep-in{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ms-num{font-size:13px;font-weight:600;letter-spacing:.06em;color:#6e6e6e;font-variant-numeric:tabular-nums}
.mstep .cat-name{font-size:clamp(50px,6.2vw,92px);padding-left:0;margin-top:4px}
.mstep .status{margin-top:6px}
.mstep .cta-row{margin-top:21px;justify-content:flex-start}
@media (max-width:980px){
  .morph-wrap{display:block}
  /* the steps slide up over the stage (not the stage down over the steps), so the sticky stage stops at the end of
     the section instead of hanging a screen's height into the next one */
  .morph-stage{z-index:0}
  .morph-steps{position:relative;z-index:1;margin-top:calc(var(--nav-h) - 100svh)}
  .mstep,.mstep:first-child,.mstep:last-child{min-height:calc(100svh - var(--nav-h));align-items:flex-end;padding-bottom:calc(10svh + 43px)}
  .mstep-in{width:100%}
  .mstep .cat-name{font-size:clamp(45px,13vw,72px)}
  .morph-dots{bottom:auto;top:18px}
}

/* ======================================================================
   About
   ====================================================================== */
.ab-hero{position:relative;overflow:hidden;isolation:isolate;min-height:min(72svh,680px);display:grid;grid-template-columns:minmax(0,1fr);align-items:end}
.ab-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
.ab-copy{width:100%;min-width:0;padding-block:clamp(113px,22vh,183px) clamp(43px,7vw,89px)}
.ab-eyebrow{font-size:15px;font-weight:600;color:var(--steel);letter-spacing:-0.005em}
.ab-hero h1{margin-top:13px;font-size:clamp(45px,7vw,92px);line-height:1.02;letter-spacing:-0.04em;max-width:11ch}
.ab-hero .lead{margin-top:21px;max-width:40ch;color:var(--mist)}
.ab-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:70%;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.75) 60%,#000 100%);z-index:-1;pointer-events:none}
.ab-others{grid-template-columns:repeat(5,minmax(0,1fr))}
.ab-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.ab-facts{margin:clamp(27px,4vw,43px) 0 0;max-width:820px;border-top:1px solid var(--line-2)}
.ab-facts .spec-row{grid-template-columns:200px minmax(0,1fr)}
.ab-facts dd{margin:0;color:var(--ink-2)}
.ab-facts a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--steel)}
@media (max-width:1100px){.ab-others{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.ab-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:734px){.ab-cards,.ab-others{grid-template-columns:minmax(0,1fr)}.ab-facts .spec-row{grid-template-columns:minmax(0,1fr);gap:2px}}

/* ---------- Notify me form (when the database is connected) ---------- */
html.nfy-open{overflow:hidden}
.nfy{padding:0;border:0;border-radius:27px;width:min(440px,calc(100vw - 32px));max-height:calc(100svh - 32px);overflow:auto;overscroll-behavior:contain;background:#ffffff;color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.45);color-scheme:light}
.nfy::backdrop{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.motion .nfy[open]{animation:popIn .236s var(--ease)}
.nfy-in{position:relative;padding:27px 27px 27px}
.nfy-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:var(--cloud);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.nfy-x svg{width:16px;height:16px}
.nfy-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nfy-kicker{font-family:var(--brand);font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog);padding-right:43px}
.nfy h2{font-size:24px;line-height:1.15;letter-spacing:-0.024em;margin-top:6px;padding-right:34px}
.nfy-sub{margin-top:8px;font-size:15px;color:var(--fog)}
.nfy-form .f{margin-top:16px}
.nfy-form .f + .f{margin-top:13px}
.nfy-err{margin-top:13px;font-size:15px;color:var(--error)}
.nfy-form .btn-wide{margin-top:21px}
.nfy-fine{margin-top:13px;font-size:12px;line-height:1.47;color:var(--fog);text-align:center}
.nfy-done{text-align:center;padding-top:8px}
.nfy-done:focus{outline:none}
.nfy-done h2{padding-right:0;margin-top:13px}
.nfy-done p{margin-top:8px;color:var(--fog);font-size:17px}
.motion .nfy-done:not([hidden]) .check circle{stroke-dasharray:64;stroke-dashoffset:64;animation:draw 1s var(--ease) .05s forwards}
.motion .nfy-done:not([hidden]) .check path{stroke-dasharray:20;stroke-dashoffset:20;animation:draw .618s var(--ease) .55s forwards}
.nfy-actions{display:flex;flex-direction:column;gap:10px;margin-top:21px}
@media (max-width:600px){
  .nfy{width:100%;max-width:100%;margin:auto 0 0;border-radius:27px 27px 0 0;max-height:92svh;padding-bottom:env(safe-area-inset-bottom,0px)}
  .motion .nfy[open]{animation:sheetIn .382s var(--ease)}
}

/* ---------- pre-order: saving problems and tracking ---------- */
.book-err{margin-top:13px;font-size:15px;line-height:1.4;color:var(--error);text-align:center}
.c-track{margin:16px auto 0;max-width:48ch;font-size:15px;color:var(--fog)}

/* ---------- Track your pre-order ---------- */
.ac-band{padding-block:clamp(43px,6vw,70px) clamp(55px,8vw,89px)}
.ac-wrap{max-width:calc(1000px + 2 * var(--gutter))}
.ac-demo{max-width:760px;margin:0 auto 16px;padding:13px 16px;border-radius:16px;background:#ffffff;border:1px dashed var(--smoke);font-size:13px;line-height:1.5;color:var(--ink-2)}
.ac-forms{display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:16px;align-items:start}
.ac-form h2,.ac-off h2{font-size:22px;letter-spacing:-0.022em}
.ac-form .fgrid{margin-top:16px}
.ac-form .f + .f{margin-top:0}
.ac-form [data-ac-step] > .f{margin-top:16px}
.ac-form .btn-wide{margin-top:16px}
.ac-sub,.ac-sent{margin-top:6px;font-size:15px;color:var(--fog)}
.ac-sent b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.ac-err{margin-top:13px;font-size:15px;line-height:1.47;color:var(--error)}
.ac-code{text-align:center;font-size:22px!important;letter-spacing:.32em;font-variant-numeric:tabular-nums}
.ac-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 21px;margin-top:6px}
.linkbtn{background:none;border:0;padding:0;min-height:44px;color:var(--ink-2);font-size:15px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:var(--ink)}
.ac-off{max-width:560px;margin-inline:auto;text-align:center}
.ac-off p{margin:8px auto 21px;color:var(--fog);max-width:44ch}
.ac-result{max-width:760px;margin-inline:auto}
.ac-result:focus{outline:none}
.ac-result-head{display:flex;align-items:center;justify-content:space-between;gap:13px;flex-wrap:wrap;margin-bottom:16px}
.ac-result-head h2{font-size:clamp(22px,2.6vw,28px);letter-spacing:-0.024em;overflow-wrap:anywhere}
.ac-card + .ac-card{margin-top:16px}
.ac-empty p{color:var(--fog)}
.ac-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:13px}
.ac-ref{font-size:24px;font-weight:600;letter-spacing:.04em}
.ac-date{margin-top:2px;font-size:13px;color:var(--fog)}
.ac-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 10px;border-radius:980px;background:var(--cloud);font-size:13px;font-weight:600;white-space:nowrap}
.ac-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--steel)}
.ac-chip[data-tone="wait"]::before{background:#fab219}
.ac-chip[data-tone="ok"]::before{background:#0ca30c}
.ac-chip[data-tone="go"]::before{background:var(--ink)}
.ac-chip[data-tone="done"]::before{background:var(--ink)}
.ac-item{display:flex;align-items:center;gap:13px;margin-top:16px;padding:13px 16px;border-radius:16px;background:var(--cloud)}
.ac-item img{height:64px;width:auto;flex:none}
.ac-item b{display:block;font-size:17px;letter-spacing:-0.012em}
.ac-item small{display:block;margin-top:2px;font-size:13px;color:var(--fog)}
.ac-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:27px 0 0;padding:0;list-style:none}
.ac-steps li{position:relative;padding-top:27px;text-align:center;font-size:13px;line-height:1.3}
.ac-steps li::after{content:"";position:absolute;top:6px;left:calc(50% + 12px);right:calc(-50% + 12px);height:2px;border-radius:2px;background:var(--line-2)}
.ac-steps li:last-child::after{display:none}
.ac-steps li.is-done::after{background:var(--ink)}
.ac-dot{position:absolute;top:0;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--line-2)}
.is-done .ac-dot{background:var(--ink)}
.is-now .ac-dot{background:#ffffff;border:2px solid var(--red);box-shadow:0 0 0 4px rgba(var(--red-glow),.12)}
.ac-steps b{display:block;font-weight:600;text-wrap:balance}
.ac-steps .is-todo b{color:var(--fog);font-weight:500}
.ac-steps small{display:block;margin-top:2px;font-size:12px;color:var(--fog)}
.ac-next{margin-top:21px;padding:16px 16px;border-radius:16px;border:1px solid var(--line-2)}
.ac-next p{font-size:15px;line-height:1.5;color:var(--ink-2)}
.ac-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:13px}
.ac-tracking{margin-top:10px;font-size:15px;color:var(--ink-2)}
.ac-sum{margin:16px 0 0;max-width:none}
.ac-help{display:flex;flex-wrap:wrap;align-items:center;gap:10px 21px;margin-top:21px}
.ac-cancel{font-size:15px;color:var(--fog)}
.ac-card.is-off .ac-ref{color:var(--fog)}
.ac-help-wrap .lead{max-width:52ch}
@media (max-width:900px){.ac-forms{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){
  .ac-steps li{font-size:12px}
  .ac-steps small{font-size:11px}
  .ac-ref{font-size:22px}
  .ac-card .btn{width:100%}
  .ac-help{flex-direction:column;align-items:stretch;text-align:center}
}

/* ======================================================================
   Ice: the site's colour profile. White leads with 61.8% of what a visitor sees; black, crimson, ice and cobalt
   follow, each the golden section of the share before it.
   Roles: .dark is the black anchor (heroes, spotlights), .light and .cloud the white ground, .crimson the support band,
   the frosted ice nav the ice, .cards-cobalt (and the art on white bands) the cobalt.
   This layer sits on styles.css, which keeps the shapes; here are the colours.
   ====================================================================== */
:root{
  --ice:#d6ecff;
  --cobalt:#0971b1;
  --air:#88bde1;           /* particle ink on black: ice mixed 38.2% toward cobalt */
  --frost:#e6f3ff;         /* ice one golden step toward white: OKLCH lightness gap ÷ φ, chroma ÷ φ */
  --nav-glass:rgba(230,243,255,.91);     /* frost at 1 − φ⁻⁵ opacity: reads light even over the black hero */
  --nav-line:rgba(9,113,177,.14);
  --panel-d:#0f0f0f;       /* cards on black: dark enough that crimson links (red-hi) hold 4.5:1 */
  --crimson-surface:
    radial-gradient(90% 70% at 38.2% 0%,rgba(232,60,72,.5) 0%,rgba(232,60,72,0) 61.8%),
    radial-gradient(90% 70% at 61.8% 100%,rgba(104,2,18,.62) 0%,rgba(104,2,18,0) 61.8%),
    linear-gradient(180deg,var(--red) 0%,var(--red-press) 100%);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --silver-ring:conic-gradient(from 200deg,#9a9a9a,#ffffff 14.6%,#d4d4d4 23.6%,#8a8a8a 38.2%,#d4d4d4 50%,#ffffff 61.8%,#cfcfcf 76.4%,#8a8a8a 85.4%,#9a9a9a);
}
/* past the last band (overscroll) the page is the footer's light grey, not black */
html{background:var(--cloud)}

/* ---------- the frosted ice nav ---------- */
.nav,.localnav{background:var(--nav-glass);border-bottom-color:var(--nav-line);color:var(--ink);color-scheme:light}
.brand{color:var(--ink)}
.brand:focus-visible{outline-color:var(--ink)}
.nav-links a{color:var(--ink-2)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{background:var(--red)}
.nav-links a:focus-visible,.menu-btn:focus-visible{outline-color:var(--ink)}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{background:var(--ink)}
.menu-open .menu-btn span{background:transparent}
.menu{background:rgba(230,243,255,.97);color:var(--ink);color-scheme:light}
.menu li a{color:var(--ink)}
.menu li a small{color:var(--fog)}
.menu .menu-sep{background:var(--nav-line)}
.aqi-btn{border-color:rgba(0,0,0,.14);background:rgba(255,255,255,.55);color:var(--ink)}
.aqi-btn:hover{border-color:rgba(0,0,0,.34);background:rgba(255,255,255,.85)}
.aqi-btn:focus-visible{outline-color:var(--ink)}
.aqi-btn .aqi-unit{color:var(--fog)}
.aqi-btn .aqi-dot{box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.localnav .crumb{color:var(--ink)}
.localnav .crumb small{color:var(--ink-2)}
.localnav nav a{color:var(--ink-2)}
.localnav nav a:hover{color:var(--ink)}
.localnav nav a:focus-visible,.localnav .crumb:focus-visible{outline-color:var(--ink)}

/* ---------- the light footer ---------- */
.foot{background:var(--cloud);color:var(--fog);border-top-color:var(--line-2);color-scheme:light}
.foot h2,.foot .brand{color:var(--ink)}
.foot a,.contact-line span{color:var(--ink-2)}
.foot a:hover{color:var(--ink)}
.foot a:focus-visible,.foot button:focus-visible{outline-color:var(--ink)}
.foot .tagline{color:var(--fog)}
.mini{border-color:var(--smoke);color:var(--ink-2)}
.mini:hover{border-color:var(--ink);color:var(--ink)}
.legal{border-color:var(--line-2);color:var(--fog)}

/* ---------- black anchor: art in the clean-air blue, the business band pure black ---------- */
.intro canvas,.prana-spot canvas,.cat-hero canvas{color:var(--air)}
.biz-band{background:#000000}

/* ---------- the crimson band: crimson metal at band scale, white type, the main button turns white ---------- */
.crimson{background:var(--grain),var(--crimson-surface);color:#ffffff;color-scheme:dark;
  --mist:rgba(255,255,255,.84);--steel:rgba(255,255,255,.74);--fog:rgba(255,255,255,.8);--ink:#ffffff;--ink-2:rgba(255,255,255,.9);
  --line:rgba(255,255,255,.3);--line-2:rgba(255,255,255,.2);--panel-d:rgba(70,0,14,.3);--panel-d-line:rgba(255,255,255,.18);--art-dust:84,0,16}
.crimson .btn-primary{background:#ffffff;color:var(--red);box-shadow:0 1px 2px rgba(0,0,0,.22)}
.crimson .btn-primary:hover{background:#f1f1f1}
.crimson .btn-primary:focus-visible{outline-color:#ffffff}
.crimson .btn-outline-d,.crimson .btn-outline-l{color:#ffffff;border-color:rgba(255,255,255,.62)}
.crimson .btn-outline-d:hover,.crimson .btn-outline-l:hover{border-color:#ffffff}
.crimson .more,.crimson .bcard a,.crimson .textlink{color:#ffffff;text-decoration-color:#ffffff}
.crimson .eyebrow,.crimson .lead,.crimson .cd-label,.crimson .cd-when{color:rgba(255,255,255,.86)}
.crimson .status{border-color:rgba(255,255,255,.42);color:#ffffff;background:rgba(70,0,14,.28)}
.crimson .status::before{background:rgba(255,255,255,.6)}
.crimson .status.live::before{background:#ffffff;box-shadow:0 0 0 4px rgba(255,255,255,.24)}
.crimson .frame::before{background:var(--silver-ring)}
.crimson .fact{border-color:rgba(255,255,255,.32)}
.crimson .fact cite{color:rgba(255,255,255,.8)}
.crimson .bcard,.crimson .ftile{background:rgba(70,0,14,.3);border:1px solid rgba(255,255,255,.18)}
.crimson .bcard .ico,.crimson .ftile .ico{color:#ffffff}
.crimson .bcard p,.crimson .ftile p{color:rgba(255,255,255,.88)}
.crimson .promise-wrap{border-color:rgba(255,255,255,.3)}
.crimson .learn-link{background:rgba(70,0,14,.3);border:1px solid rgba(255,255,255,.18)}
.crimson .learn-link:hover{background:rgba(70,0,14,.42)}
.crimson .learn-link:focus-visible{outline-color:#ffffff}
.crimson .learn-link i{background:#ffffff;color:var(--red);box-shadow:none}
.crimson ::selection{background:#ffffff;color:var(--red)}

/* ---------- white bands that used to be black: the parts that only had dark colours ---------- */
.light .btn-outline-d,.cloud .btn-outline-d{color:var(--ink);border-color:var(--steel)}
.light .btn-outline-d:hover,.cloud .btn-outline-d:hover{border-color:var(--ink)}
.light .status,.cloud .status{border-color:var(--smoke);color:var(--ink-2);background:#ffffff}
.light .status::before,.cloud .status::before{background:var(--mist)}
.light .status.live,.cloud .status.live{border-color:var(--ink-2);color:var(--ink)}
.light .status.live::before,.cloud .status.live::before{background:var(--red);box-shadow:0 0 0 4px rgba(var(--red-glow),.16)}
.light .silver,.cloud .silver{background:none;color:var(--ink);-webkit-text-fill-color:currentColor}
.light .bcard,.cloud .bcard{background:var(--cloud);border-color:var(--line-2)}
.cloud .bcard{background:#ffffff}
.light .bcard .ico,.cloud .bcard .ico{color:var(--ink)}
.light .bcard p,.cloud .bcard p{color:var(--fog)}
.light .bcard a,.cloud .bcard a{color:var(--red)}
.light .bcard a:focus-visible,.cloud .bcard a:focus-visible{outline-color:var(--ink)}
/* the categories band (home) */
.light .morph-dots{color:#b8b8b8}
.light .morph-dots li.is-on{color:var(--cobalt)}
.light .ms-num{color:var(--fog)}
.light canvas[data-art="morph"]{color:var(--cobalt)}
/* category tiles on white: light grey tiles, cobalt art */
.light .ctile,.cloud .ctile{background:var(--cloud);border-color:var(--line-2);color:var(--ink)}
.cloud .ctile{background:#ffffff}
.light .ctile.big,.cloud .ctile.big{background:radial-gradient(70% 70% at 64% 100%,#ffffff 0%,var(--cloud) 62%)}
.light .ctile:hover,.cloud .ctile:hover{border-color:var(--steel)}
.light .ctile:focus-visible,.cloud .ctile:focus-visible{outline-color:var(--ink)}
.light .ctile canvas,.cloud .ctile canvas{color:var(--cobalt)}
.light .ctile .ck,.cloud .ctile .ck{color:var(--fog)}
.light .ctile .go,.cloud .ctile .go{background:#ffffff;border-color:var(--line-2);color:var(--ink)}
.light .ctile:hover .go,.cloud .ctile:hover .go{background:var(--metal);border-color:transparent;color:#ffffff}
/* clean air leaving a purifier is drawn in cobalt on white (the dust stays grey) */
.light .flow-stage canvas,.cloud .flow-stage canvas{color:var(--cobalt)}
/* the 404 page */
.nf.light p{color:var(--fog)}

/* ---------- cobalt cards on the black business band ---------- */
.cards-cobalt .bcard{background:var(--cobalt);border-color:var(--cobalt);color:#ffffff}
.cards-cobalt .bcard .ico,.cards-cobalt .bcard p,.cards-cobalt .bcard a{color:#ffffff}
.cards-cobalt .bcard a:focus-visible{outline-color:#ffffff}

/* ---------- business enquiry form on light grey ---------- */
.cloud .biz-form,.light .biz-form{background:#ffffff;border-color:var(--line-2);text-align:left}
.cloud .seg,.light .seg{background:var(--cloud);border-color:var(--line-2)}
.cloud .seg span,.light .seg span{color:var(--fog)}
.cloud .seg input:checked+span,.light .seg input:checked+span{background:#ffffff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.cloud .seg input:focus-visible+span,.light .seg input:focus-visible+span{outline-color:var(--ink)}
.cloud .biz-foot p,.light .biz-foot p{color:var(--fog)}

/* ---------- crimson cards on a black band (About: how we work) ---------- */
.cards-crimson .bcard{background:var(--grain),var(--crimson-surface);border-color:rgba(255,255,255,.14);color:#ffffff}
.cards-crimson .bcard .ico,.cards-crimson .bcard a{color:#ffffff}
.cards-crimson .bcard p{color:rgba(255,255,255,.88)}

/* ---------- pre-order cards: black on the black hero, set off by a hairline ---------- */
.nm{background:#000000;border-color:#2a2a2a}

/* ---------- the guide opens on black ---------- */
.learn-hero.dark{background:var(--black);color:#f5f5f5;color-scheme:dark}
.learn-hero.dark .lead{color:var(--mist)}
.learn-hero.dark .topic-card{border-color:#2a2a2a}
.learn-hero.dark .topic-card:focus-visible{outline-color:#f5f5f5}
.js .learn-hero.dark .topic-card.is-current{box-shadow:0 0 0 2px var(--black),0 0 0 4px #f5f5f5}

/* ---------- light product cards keep dark type on a black band (PRANA: two sizes) ---------- */
.lcard.cloud{color:var(--ink);color-scheme:light}

/* the home promise strip runs straight into the business band: one black block, a shorter gap between them */
.promise-band+.biz-band{padding-top:clamp(43px,6vw,89px)}

/* spacing: two sections on the same ground in a row share one gap, not two */
.light.band+.light.band,.light.band-tight+.light.band,.light.band+.light.band-tight,.light.band-tight+.light.band-tight,
.cloud.band+.cloud.band,.cloud.band-tight+.cloud.band,.cloud.band+.cloud.band-tight,.cloud.band-tight+.cloud.band-tight{padding-top:0}
.nw{white-space:nowrap}

/* Instagram badge: the handle in a pill, with the platform named beside it */
.ig-badge{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:0 15px;border-radius:980px;border:1px solid var(--line);background:#ffffff;color:var(--ink);text-decoration:none;font-size:13px;line-height:1;white-space:nowrap;transition:border-color .236s ease,box-shadow .236s ease}
.ig-badge .ig-k{display:inline-flex;align-items:center;gap:10px;color:var(--fog);font-weight:500}
.ig-badge .ig-k::after{content:"";width:1px;height:14px;background:var(--line)}
.ig-badge .ig-h{font-weight:600;letter-spacing:-0.005em}
.ig-badge:hover{border-color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.06);text-decoration:none}
.ig-badge:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.foot a.ig-badge{color:var(--ink);margin-top:16px}
.foot a.ig-badge:hover{text-decoration:none;color:var(--ink)}
.contact-line a{word-break:break-all}
.nfy-actions .ig-badge{min-height:44px;justify-content:center}
.c-follow{margin-top:21px;display:flex;justify-content:center}
.biz-msg.is-err{color:var(--error)}
.ab-facts dd .ig-badge{text-decoration:none}