/* Continue home page, light refresh. Scoped to .cx so the theme's own pages are untouched.
   Same airy, soft feel as before, but with Continue's own signatures (left-aligned hero with a product panel,
   warm paper tone, dark buttons with an orange arrow, orange ticker) so it does not read as the Elkiya sites. */
.cx{
 --o:#ff6600;--o2:#ff8a3d;--o-600:#e65c00;--o-50:#fff5ec;--o-100:#ffe8d6;--o-200:#ffd1ad;
 --ink:#1a1410;--ink-2:#4d453f;--muted:#6f665d;--line:rgba(26,20,16,.09);--line-2:rgba(26,20,16,.14);
 --paper:#fcfaf7;--tint:#f6f1eb;--card:#fff;--r:22px;--r-sm:14px;
 --shadow:0 1px 2px rgba(26,20,16,.04),0 10px 30px -18px rgba(26,20,16,.18);
 --shadow-lg:0 2px 6px rgba(26,20,16,.05),0 30px 60px -30px rgba(26,20,16,.28);
 --mono:"Plus Jakarta Sans",system-ui,sans-serif;
 --ease:cubic-bezier(.22,1,.36,1);--gut:20px;
 font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:var(--paper);
 font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
@media (min-width:768px){.cx{--gut:32px}}
.cx *,.cx *::before,.cx *::after{box-sizing:border-box}
.cx :where(h1,h2,h3,p,ul,ol,figure,blockquote){margin:0;padding:0}
.cx :where(ul,ol){list-style:none}
:where(.cx) img{display:block;max-width:100%;height:auto}
.cx a{color:inherit;text-decoration:none}
.cx svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cx-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.cx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx .cx-mono{font-family:inherit;font-size:13px;font-weight:500}
.cx-more{margin-top:40px;display:flex;justify-content:center}

/* Type */
.cx .cx-h1{font-size:clamp(40px,5.6vw,72px);line-height:1.03;letter-spacing:-.04em;font-weight:700;color:var(--ink);text-wrap:balance}
.cx .cx-h2{font-size:clamp(30px,3.8vw,48px);line-height:1.08;letter-spacing:-.035em;font-weight:700;color:var(--ink);text-wrap:balance}
.cx .cx-accent{font-style:normal;color:var(--o)}
.cx .cx-lead{font-size:clamp(16px,1.4vw,18px);color:var(--ink-2);max-width:560px;line-height:1.65}
.cx .cx-sub{font-size:16px;color:var(--ink-2);line-height:1.65;max-width:560px}
.cx .cx-sub+.cx-sub{margin-top:12px}
.cx .cx-fine{font-size:12.5px;color:var(--muted);line-height:1.55}

/* Header: centred label, heading and intro */
.cx-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:48px}
.cx-trust__copy .cx-h2{margin-top:4px}
.cx-head .cx-sub{margin:16px auto 0}
.cx-head--stack{align-items:flex-start;text-align:left}
.cx .cx-h3{font-size:22px;font-weight:700;letter-spacing:-.025em;color:var(--ink);margin-bottom:18px}
@media (max-width:767px){.cx-head{margin-bottom:32px}}

/* Buttons */
.cx .cx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font:600 15px/1 "Plus Jakarta Sans",sans-serif;border:1px solid transparent;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s,color .25s,border-color .25s;white-space:nowrap}
.cx .cx-btn>svg{font-size:18px}
.cx .cx-btn:active{transform:scale(.98)}
.cx .cx-btn--primary{background:var(--o);color:#fff}
/* Buttons with the orange arrow chip: the chip sits the same distance from the top, bottom and right edge. */
.cx .cx-btn:has(.cx-btn__arrow){padding-right:7px;gap:14px}
.cx .cx-btn--wide:has(.cx-btn__arrow){padding-right:8px}
.cx .cx-btn--wide .cx-btn__arrow{width:40px;height:40px}
.cx-btn__arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--o-600);font-size:17px;transition:transform .4s var(--ease)}
.cx .cx-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.cx .cx-btn--ghost svg{color:var(--o)}
.cx .cx-btn--light{background:#fff;color:var(--ink)}
.cx .cx-btn--light svg{color:var(--o)}
.cx-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:4px;transition:border-color .25s,color .25s}
.cx-link svg{color:var(--o);transition:transform .35s var(--ease)}
.cx-link:hover{color:var(--o-600);border-color:var(--o)}
.cx-link:hover svg{transform:translateX(4px)}
.cx :focus-visible{outline:2px solid var(--o);outline-offset:3px;border-radius:12px}
.cx-stars{display:inline-flex;gap:1px;color:var(--o)}
.cx-stars svg{fill:currentColor;stroke:none;font-size:13px}

/* Sections */
.cx-sec{padding:104px 0}
.cx-sec--tint{background:var(--tint)}
.cx-sec--flush{padding:24px 0}
.cx-sec--last{padding-bottom:128px}
@media (max-width:767px){.cx-sec{padding:68px 0}.cx-sec--flush{padding:12px 0}}

/* Hero: centred copy over a warm sunrise arc, product card below */
.cx-hero{position:relative;padding:64px 0 0;isolation:isolate;overflow:hidden}
.cx-hero__sun{position:absolute;z-index:-1;left:50%;top:330px;width:min(1500px,180vw);aspect-ratio:1;transform:translateX(-50%);pointer-events:none}
.cx-hero__sun span{position:absolute;inset:0;border-radius:50%}
.cx-hero__sun span:nth-child(1){background:radial-gradient(closest-side,rgba(255,138,61,.30),rgba(255,138,61,.10) 55%,transparent 70%)}
.cx-hero__sun span:nth-child(2){inset:12%;border:1px solid rgba(255,102,0,.16)}
.cx-hero__sun span:nth-child(3){inset:24%;border:1px solid rgba(255,102,0,.12)}
.cx-hero__copy{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.cx-hero__copy .cx-h1{max-width:980px}
.cx-hero__copy .cx-lead{max-width:640px}
.cx-proofs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px}
.cx-proofs li{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.cx-proofs i{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;background:var(--o);color:#fff;font-size:12px}
.cx-proofs svg{stroke-width:3}
.cx-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px}
.cx-badge-line{font-size:13.5px;color:var(--muted);max-width:520px;line-height:1.55}
.cx-badge-line .cx-mono{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-2)}
.cx-stage{position:relative;margin-top:56px;border-radius:28px;overflow:hidden;aspect-ratio:16/7;background:#ff7a1f;box-shadow:var(--shadow-lg)}
.cx-stage__img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;transform-origin:50% 50%}
@supports (animation-timeline:view()){
 
 @keyframes cx-settle{from{transform:scale(1.1)}to{transform:scale(1)}}
}
.cx-label{position:absolute;left:clamp(16px,4vw,48px);bottom:clamp(16px,4vw,44px);display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-radius:16px;background:#fff;box-shadow:var(--shadow-lg);max-width:260px;animation:cx-rise .9s var(--ease) .8s both}
.cx-label .cx-mono{display:flex;align-items:center;gap:6px;color:var(--ink);font-size:13px;font-weight:600}
.cx-label>span:last-child{font-size:13px;color:var(--ink-2)}
.cx-spec{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.cx-spec li{display:flex;align-items:center;gap:14px;padding:22px 24px 22px 0;font-size:15px;font-weight:600;line-height:1.4}
.cx-spec li+li{padding-left:24px;border-left:1px solid var(--line-2)}
.cx-spec__icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--o-50);color:var(--o);font-size:19px;flex:none}
.cx-spec strong{color:var(--o-600)}
.cx-count{font-variant-numeric:tabular-nums}
@media (max-width:899px){
 .cx-spec{grid-template-columns:1fr}
 .cx-spec li,.cx-spec li+li{padding:16px 0;border-left:0}
 .cx-spec li+li{border-top:1px solid var(--line)}
}
@media (max-width:767px){
 .cx-hero{padding-top:40px}
 .cx-hero__sun{top:420px}
 .cx-actions{width:100%}.cx-actions .cx-btn{flex:1 1 220px}
 .cx-stage{aspect-ratio:4/3.6;margin-top:40px;border-radius:22px}
 .cx-stage__img{object-position:50% 55%}
 /* Phones (2026-10): the rating sits under the photo as a slim strip, so it never covers the products */
 .cx-stage{aspect-ratio:auto;background:#fff}
 .cx-stage__img{display:block;height:auto;aspect-ratio:4/3.1}
 .cx-stage .cx-label{position:static;max-width:none;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:12px 16px;border-radius:0;box-shadow:none;font-size:13px}
}

/* Hero intro (CSS only) */
.cx-in{animation:cx-rise .9s var(--ease) both;animation-delay:calc(var(--d,0)*.08s + .05s)}
@keyframes cx-rise{from{opacity:0;transform:translateY(16px)}}

/* Catalog */
.cx-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.cx-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.cx-tabs::-webkit-scrollbar{display:none}
.cx .cx-tab{flex:none;border:1px solid var(--line-2);background:transparent;font:600 14px/1 "Plus Jakarta Sans",sans-serif;color:var(--ink-2);padding:11px 16px;border-radius:12px;cursor:pointer;transition:all .3s var(--ease)}
.cx .cx-tab:hover{border-color:var(--ink);color:var(--ink)}
.cx .cx-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cx-rail-nav{display:flex;gap:8px;flex:none}
.cx .cx-square{width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);display:grid;place-items:center;font-size:18px;cursor:pointer;transition:all .25s}
.cx .cx-square:disabled{opacity:.35;cursor:default}
.cx [data-rail-prev] svg{transform:rotate(180deg)}
.cx-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*20px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 20px;margin:0 -4px;scrollbar-width:none;overscroll-behavior-x:contain}
.cx-rail::-webkit-scrollbar{display:none}
.cx-product{scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.cx-product[hidden]{display:none}
.cx-product.is-entering{animation:cx-pop .5s var(--ease) both;animation-delay:calc(var(--n,0)*40ms)}
@keyframes cx-pop{from{opacity:0;transform:translateY(10px)}}
.cx-product__media{position:relative;display:block;aspect-ratio:1;background:#fafafa;overflow:hidden}
.cx-product__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cx-product__off{position:absolute;right:12px;top:12px;padding:5px 9px;border-radius:8px;background:var(--ink);color:#fff;font:600 12px/1 var(--mono)}
.cx-product__body{display:flex;flex-direction:column;gap:3px;padding:16px 18px 18px;border-top:1px solid var(--line);flex:1}
.cx .cx-product__title{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.cx-product__title a:hover{color:inherit}
/* What the product is for, as a small label under the name (2026-10) */
.cx-product__tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px}
.cx-product__cat{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:7px;background:var(--o-50);border:1px solid var(--o-100);color:var(--o-600);font-size:12px;font-weight:600;line-height:1.2}
/* WhatsApp-only selling: no button on the cards; the whole card leads to the product page */
html[data-checkout=off] .cx .cx-add{display:none}
.cx-product__row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}
.cx-price{display:flex;flex-direction:column;line-height:1.25}
.cx-price small{font-size:12.5px;color:var(--muted);font-family:var(--mono)}
.cx-price b{font-size:16px;font-weight:700}
.cx-price s{font-size:12.5px;color:var(--muted)}
.cx .cx-add{width:42px;height:42px;border-radius:12px;border:0;background:var(--o-50);color:var(--o-600);display:grid;place-items:center;font-size:19px;cursor:pointer;transition:background-color .25s,color .25s,transform .35s var(--ease)}
.cx .cx-add.is-added{background:var(--o);color:#fff}
@media (max-width:1023px){.cx-rail{grid-auto-columns:calc((100% - 2*16px)/2.6);gap:16px}}
@media (max-width:767px){
 .cx-toolbar{margin:0 calc(var(--gut)*-1) 20px}.cx-tabs{padding:0 var(--gut)}.cx-rail-nav{display:none}
 .cx-rail{grid-auto-columns:70%;margin:0 calc(var(--gut)*-1);padding:4px var(--gut) 16px;scroll-padding:0 var(--gut)}
}

/* Member app */
.cx-app{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cx-app__visual{position:relative;border-radius:28px;background:#fff;border:1px solid var(--line);overflow:hidden;aspect-ratio:1;box-shadow:var(--shadow)}
.cx-app__visual::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(255,138,61,.14));pointer-events:none}
.cx-app__img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.cx-app__visual:hover .cx-app__img{transform:scale(1.03)}
.cx-app__side{display:flex;flex-direction:column;gap:32px}
.cx-list{border-top:1px solid var(--line-2)}
.cx-list li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line-2)}
.cx-list__icon{width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;box-shadow:var(--shadow)}
.cx-list__icon img{width:22px;height:22px}
.cx-list strong{display:block;font-size:17px;font-weight:700;letter-spacing:-.015em;margin-bottom:4px}
.cx-list li>span:nth-child(2)>span{font-size:15px;color:var(--ink-2);line-height:1.6}
@media (max-width:899px){.cx-app{grid-template-columns:1fr;gap:32px}}

/* Lab / COA */
.cx-lab{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}
.cx-lab__doc{display:flex;flex-direction:column;gap:12px}
/* The COA card on its own (2026-10: the sample photo was removed) */
.cx-lab--solo{grid-template-columns:1fr;max-width:640px;margin-inline:auto}
.cx-scan{position:relative;border-radius:var(--r);overflow:hidden;background:var(--tint);border:1px solid var(--line);flex:1;min-height:340px}
.cx .cx-lab__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.cx-lab:hover .cx-lab__img{transform:scale(1.02)}
.cx-scan__line{position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(180deg,transparent,rgba(255,102,0,.12) 75%,rgba(255,102,0,.4));border-bottom:2px solid var(--o);opacity:0;pointer-events:none}
.cx-lab.is-in .cx-scan__line{animation:cx-scan 3.4s var(--ease) .5s 2}
@keyframes cx-scan{0%{opacity:0;transform:translateY(-40%)}15%,85%{opacity:1}100%{opacity:0;transform:translateY(290%)}}
.cx-lab__sheet{display:flex;flex-direction:column;gap:22px;padding:32px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.cx .cx-sheet__title{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:12.5px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.cx-sheet__title svg{color:var(--o);font-size:18px}
.cx-sheet{display:flex;flex-direction:column;gap:14px;flex:1}
.cx-sheet li{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600}
.cx-sheet__dots{flex:1;border-bottom:1.5px dotted var(--line-2);transform:translateY(4px)}
.cx-sheet i{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--o);color:#fff;font-size:14px}
.cx-sheet svg{stroke-width:3}
.cx-lab__sheet .cx-btn{align-self:flex-start}
@media (max-width:899px){.cx-lab{grid-template-columns:1fr}.cx-lab__sheet{padding:24px}}

/* Formats */
.cx-formats{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cx-format{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:5/4;background:#000;isolation:isolate}
.cx-format__media,.cx-format__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cx-format__media img{transition:transform 1.2s var(--ease)}
.cx-format:hover .cx-format__media img{transform:scale(1.05)}
.cx-format__body{position:absolute;left:14px;right:14px;bottom:14px;padding:20px 22px;border-radius:18px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);transition:transform .5s var(--ease)}
.cx-format:hover .cx-format__body{transform:translateY(-4px)}
.cx .cx-format__body h3{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:4px 0 6px}
.cx-format__body p{font-size:14.5px;color:var(--ink-2);line-height:1.55}
@media (max-width:767px){.cx-formats{grid-template-columns:1fr;gap:16px}.cx-format{aspect-ratio:auto;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line)}.cx-format__media{position:relative;aspect-ratio:4/3}.cx-format__body{position:static;border-radius:0;background:#fff}}

/* Trust */
.cx-trust{display:grid;grid-template-columns:1.1fr .9fr;border-radius:32px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.cx-trust__copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:64px}
.cx-trust__copy .cx-h2 .cx-count{color:var(--o)}
.cx-trust__copy .cx-btn{margin-top:10px}
.cx-trust__media{position:relative;min-height:440px}
.cx-trust__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:899px){.cx-trust{grid-template-columns:1fr;border-radius:24px}.cx-trust__copy{padding:32px 24px}.cx-trust__media{min-height:260px;order:-1}}

/* Journey */
.cx-journey{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.cx-journey__visual{border-radius:28px;overflow:hidden;background:var(--tint);aspect-ratio:4/5}
.cx .cx-journey__visual img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.cx-steps{position:relative;display:flex;flex-direction:column}
.cx-steps__line{position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
.cx-steps__line span{position:absolute;inset:0;background:var(--o);transform-origin:top;transform:scaleY(var(--p,0))}
.cx-step{position:relative;display:grid;grid-template-columns:56px 1fr;gap:22px;padding:22px 0}
.cx .cx-step__num{position:relative;z-index:1;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line-2);font-size:14px;color:var(--muted);transition:all .5s var(--ease)}
.cx .cx-step.is-active .cx-step__num{background:var(--o);border-color:var(--o);color:#fff}
.cx .cx-step h3{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:4px 0 8px}
.cx-step p{font-size:15px;color:var(--ink-2);line-height:1.65;max-width:560px}
.cx-step p.cx-fine{margin-top:12px;font-size:12.5px;color:var(--muted)}
@media (max-width:899px){.cx-journey{grid-template-columns:1fr;gap:32px}.cx-journey__visual{aspect-ratio:16/10;order:-1}}
@media (max-width:767px){.cx-step{grid-template-columns:44px 1fr;gap:14px;padding:16px 0}.cx .cx-step__num{width:44px;height:44px;border-radius:13px}.cx-steps__line{left:21px}}

/* Comparison */
.cx-compare{display:grid;grid-template-columns:.9fr 1.2fr 1.1fr;border-radius:var(--r);background:#fff;border:1px solid var(--line);overflow:hidden}
.cx-compare__row{display:contents}
.cx-compare__row>span{padding:20px 24px;border-top:1px solid var(--line);display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5}
.cx .cx-compare__row--head>span{border-top:0;padding-top:24px;padding-bottom:20px;align-items:center;color:var(--ink);font-weight:700}
.cx-compare__feature{font-weight:700}
.cx-compare__us{background:var(--o-50);font-weight:500;box-shadow:inset 1px 0 var(--o-100),inset -1px 0 var(--o-100)}
.cx-compare__row--head .cx-compare__us{box-shadow:inset 1px 0 var(--o-100),inset -1px 0 var(--o-100),inset 0 3px var(--o)}
.cx-compare__them{color:var(--muted)}
.cx-wordmark{font-size:24px;font-weight:800;letter-spacing:-.05em;color:var(--o);text-transform:lowercase}
.cx-compare__who{display:none}
.cx-yes,.cx-no{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none;margin-top:1px;font-size:14px}
.cx-yes{background:var(--o);color:#fff}.cx-yes svg{stroke-width:3}
.cx-no{background:#efeae4;color:#a0968c}.cx-no svg{stroke-width:2.6}
/* Tablets keep the full table (tighter cells); only phones switch to the check/cross matrix below. */
@media (max-width:899px){.cx-compare__row>span{padding:16px 16px;font-size:14px;gap:10px}}
@media (max-width:599px){
 .cx-compare{display:none}
}

/* Reviews */
.cx-score{display:flex;align-items:center;gap:14px;margin-top:22px;text-align:left}
.cx-score b{font-size:56px;font-weight:700;letter-spacing:-.05em;line-height:1}
.cx-score>span{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2)}
.cx-wall{display:flex;flex-direction:column;gap:20px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cx-wall__row{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;outline:0}
.cx-wall__row::-webkit-scrollbar{display:none}
.cx-wall__row.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.cx-wall__row:focus-visible{box-shadow:inset 0 0 0 2px var(--o)}
.cx-wall__nav{display:flex;justify-content:center;gap:8px;margin-top:20px}
.cx [data-wall-prev] svg{transform:rotate(180deg)}
.cx-wall__track{display:flex;gap:20px;width:max-content;padding:4px 0}
.cx-review{position:relative;width:390px;display:flex;flex-direction:column;gap:18px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.cx-review__mark{position:absolute;right:22px;top:6px;font-size:72px;line-height:1;font-weight:700;color:var(--o-100)}
.cx-review blockquote{position:relative;font-size:16px;line-height:1.6;color:var(--ink)}
.cx-review figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.cx-review figcaption .cx-stars{margin-left:auto}
.cx-avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--o);overflow:hidden;flex:none}
.cx-avatar img{width:100%;height:100%;object-fit:cover}
.cx-review figcaption strong{display:block;font-size:15px}
.cx-review figcaption small{font-size:13px;color:var(--muted)}
@media (max-width:767px){.cx-review{width:300px;padding:22px}}

/* Articles: each in its own box, equal heights, link pinned to the bottom */
.cx-articles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.cx-article{display:flex;flex-direction:column;gap:16px;padding:10px 10px 22px;background:#fff;border:1px solid var(--line-2);border-radius:24px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.cx-article:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--o-200)}
.cx-article__media{display:block;aspect-ratio:16/10;border-radius:16px;background:var(--tint);overflow:hidden}
.cx-article__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.cx-article:hover .cx-article__media img{transform:scale(1.05)}
.cx-article__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:0 12px}
.cx .cx-article__body small{color:var(--muted)}
.cx-article__body strong{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.cx-article:hover strong{color:var(--o-600)}
.cx-article__excerpt{font-size:14.5px;color:var(--ink-2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cx-article__body .cx-link{margin-top:auto;align-self:flex-start;font-size:14px}
@media (max-width:1023px){.cx-articles{gap:14px}.cx-article__body{padding:0 8px}.cx-article__body strong{font-size:17px}.cx-article__excerpt{font-size:14px}}
@media (max-width:699px){.cx-articles{grid-template-columns:1fr;gap:14px}.cx-article:hover{transform:none}}

/* Consultation CTA: the one big orange block */
.cx-cta{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:end;padding:64px;border-radius:32px;color:#fff;background:var(--o)}
.cx-cta::before{content:"";position:absolute;z-index:-1;right:-120px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent);animation:cx-drift 12s ease-in-out infinite}
.cx-cta::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:28px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 14px);-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000)}
@keyframes cx-drift{50%{transform:translate(-40px,30px) scale(1.08)}}
.cx .cx-cta .cx-h2{color:#fff}
.cx .cx-cta .cx-sub{color:rgba(255,255,255,.9);margin-top:14px}
.cx-cta__side{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cx .cx-cta .cx-fine{color:rgba(255,255,255,.75)}
@media (max-width:899px){.cx-cta{grid-template-columns:1fr;gap:28px;padding:44px 24px;border-radius:24px}}

/* FAQ */
.cx-faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
.cx-faq__side{position:sticky;top:110px}
.cx-faq__side .cx-head{margin-bottom:32px}
.cx-faq__help{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.cx-faq__help strong{font-size:18px;letter-spacing:-.015em}
.cx-faq__help p{font-size:14.5px;color:var(--ink-2);margin-bottom:6px}
.cx-faq__list{border-top:1px solid var(--line-2)}
.cx-qa{border-bottom:1px solid var(--line-2)}
.cx-qa summary{list-style:none;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:22px 0;cursor:pointer;font-size:17px;font-weight:600;letter-spacing:-.01em}
.cx-qa summary::-webkit-details-marker{display:none}
.cx-qa[open] .cx-qa__q{color:var(--o-600)}
.cx-qa summary i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--ink);flex:none;transition:transform .4s var(--ease),background-color .3s,color .3s,border-color .3s}
.cx-qa[open] summary i{transform:rotate(45deg);background:var(--o);border-color:var(--o);color:#fff}
/* The answer folds with its bottom space (padding sits on the grid, not the text, so nothing jumps at the end). */
.cx-qa__a{display:grid;grid-template-rows:1fr;padding-bottom:24px;transition:grid-template-rows .4s var(--ease),padding-bottom .4s var(--ease)}
.cx-qa__a p{overflow:hidden;min-height:0;margin:0;padding:0 56px 0 0;font-size:15px;color:var(--ink-2);line-height:1.7}
.cx-qa.is-closing .cx-qa__a,.cx-qa.is-opening .cx-qa__a{grid-template-rows:0fr;padding-bottom:0}
.cx-faq__list .cx-fine{margin-top:20px}
@media (max-width:899px){.cx-faq{grid-template-columns:1fr;gap:24px}.cx-faq__side{position:static}.cx-faq__help{display:none}.cx-qa summary{font-size:16px}.cx-qa__a{padding-bottom:20px}.cx-qa__a p{padding:0}.cx-qa.is-closing .cx-qa__a,.cx-qa.is-opening .cx-qa__a{padding-bottom:0}}

/* Newsletter */
.cx-news{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px;border-radius:32px;background:var(--tint)}
.cx-news__copy{display:flex;flex-direction:column;gap:14px}
.cx-news__copy .cx-sub+.cx-sub{margin-top:0}
.cx-news__form{display:flex;flex-direction:column;gap:12px}
.cx-news__form label{display:flex;flex-direction:column;gap:6px}
.cx .cx-news__form label .cx-mono{font-size:12.5px;color:var(--muted)}
.cx-news__form input{width:100%;height:52px;padding:0 18px;border-radius:14px;border:1px solid var(--line-2);background:#fff;font:500 15px "Plus Jakarta Sans",sans-serif;color:var(--ink);transition:border-color .25s,box-shadow .25s;outline:0}
.cx-news__form input:focus{border-color:var(--o);box-shadow:0 0 0 4px var(--o-100)}
.cx-news__form .cx-btn{margin-top:6px;align-self:flex-start}
.cx-news__form .cx-btn[disabled]{opacity:.6;pointer-events:none}
.cx-news__status{font-size:14px;font-weight:600;min-height:1.4em}
.cx-news__status.is-ok{color:#1a8f4c}.cx-news__status.is-error{color:#c2410c}
@media (max-width:899px){.cx-news{grid-template-columns:1fr;padding:32px 22px;gap:28px;border-radius:24px}}

/* Mobile action dock */
.cx-dock{display:none}
@media (max-width:767px){
 .cx-dock{display:flex;gap:8px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;padding:8px;border-radius:999px;background:rgba(252,250,247,.88);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid var(--line);box-shadow:0 18px 40px -16px rgba(26,20,16,.35);transform:translateY(140%);transition:transform .5s var(--ease)}
 .cx-dock.is-shown{transform:none}
 .cx-dock .cx-btn{min-height:48px}
 .cx-dock .cx-btn--primary{flex:1;justify-content:space-between;padding-left:22px}
 .cx-dock .cx-btn:has(.cx-btn__arrow){padding-right:7px}
 .cx-dock .cx-btn__arrow{width:34px;height:34px}
 .cx-dock .cx-btn--icon{width:50px;padding:0;background:#fff}
 .cx-dock .cx-btn--icon span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* Scroll reveal (only once the script has confirmed it can show things again) */
.cx-js .cx-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.cx-js .cx-reveal.is-in{opacity:1;transform:none}

/* Page background behind the theme's header/footer gaps matches the paper tone */
body:has(.cx){background:#fcfaf7}

@media (prefers-reduced-motion:reduce){
 .cx *,.cx *::before,.cx *::after{animation:none!important;transition:none!important}
 .cx-js .cx-reveal{opacity:1;transform:none}
}

/* ===== Shared page bits ===== */
.cx-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.cx-crumbs a{color:var(--ink-2);transition:color .2s}.cx-crumbs a:hover{color:var(--o-600)}
.cx-crumbs [aria-current]{color:var(--ink)}
.cx-gap{height:96px}
.cx-toolbar--end{justify-content:flex-end}
.cx .cx-h1--page{font-size:clamp(38px,5vw,64px)}
.cx-product__best{color:var(--o-600);font:600 12px/1 var(--mono)}

/* ===== All products ===== */
.cx-shop-hero{position:relative;padding:40px 0 8px;overflow:hidden;isolation:isolate}
.cx-shop-hero .cx-crumbs{justify-content:center;margin-bottom:36px}
.cx-shop-hero .cx-head{margin-bottom:0}
.cx-hero__sun--low{top:180px;width:min(1200px,160vw)}
.cx-sec--shop{padding-top:48px}
.cx-filters{position:sticky;top:var(--header-height,64px);z-index:5;display:grid;grid-template-columns:300px 1fr auto;gap:16px;align-items:center;padding:14px 0;margin-bottom:24px;background:var(--bg,#fcfaf7);border-bottom:1px solid var(--line)}
@media (max-width:767px){.cx-filters{position:static}}
.cx-search{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--muted);transition:border-color .25s,box-shadow .25s}
.cx-search:focus-within{border-color:var(--o);box-shadow:0 0 0 4px var(--o-100)}
.cx-search svg{font-size:18px}
.cx .cx-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:500 15px "Plus Jakarta Sans",sans-serif;color:var(--ink);padding:0}
.cx-search input::-webkit-search-cancel-button{opacity:.5}
.cx-chips{grid-column:1/-1;grid-row:2;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.cx-filters__end{grid-column:3}
.cx-chips::-webkit-scrollbar{display:none}
.cx .cx-chip{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:transparent;font:600 14px/1 "Plus Jakarta Sans",sans-serif;color:var(--ink-2);cursor:pointer;transition:all .3s var(--ease)}
.cx .cx-chip .cx-mono{font-size:12.5px;color:var(--muted);transition:color .3s}
.cx .cx-chip:hover{border-color:var(--ink);color:var(--ink)}
.cx .cx-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cx .cx-chip[aria-pressed="true"] .cx-mono{color:var(--o2)}
.cx-filters__end{display:flex;align-items:center;gap:16px}
.cx .cx-count-line{color:var(--muted);white-space:nowrap}
.cx-sort{display:flex;align-items:center;gap:8px}
.cx .cx-sort .cx-mono{color:var(--muted);font-size:12.5px}
.cx .cx-sort select{height:42px;padding:0 36px 0 14px;border-radius:12px;border:1px solid var(--line-2);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1410' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px;-webkit-appearance:none;appearance:none;font:600 14px "Plus Jakarta Sans",sans-serif;color:var(--ink);cursor:pointer}
.cx .cx-sort select:focus-visible{outline:2px solid var(--o);outline-offset:2px}
.cx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cx-grid .cx-product{scroll-snap-align:none}
.cx-empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:72px 20px;text-align:center;color:var(--ink-2);border:1px dashed var(--line-2);border-radius:var(--r)}
.cx-empty[hidden]{display:none}
.cx-spec--boxed{margin-top:0;padding:0 24px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff}
@media (max-width:1023px){.cx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){
 .cx-shop-hero{padding-top:28px}.cx-shop-hero .cx-crumbs{margin-bottom:24px}
 .cx-sec--shop{padding-top:24px}
 .cx-filters{grid-template-columns:1fr;gap:10px;margin:0 calc(var(--gut)*-1) 16px;padding:10px var(--gut)}
 .cx-chips{grid-row:auto;margin:0 calc(var(--gut)*-1);padding:2px var(--gut)}
 .cx-filters__end{grid-column:auto;justify-content:space-between}
 .cx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .cx-grid .cx-product__body{padding:12px 12px 14px}
 .cx-grid .cx-product__title{font-size:15px}
 .cx-grid .cx-product__cat{font-size:11px;min-height:22px;padding:2px 7px;border-radius:6px}
 .cx-grid .cx-product__tags{margin-top:5px}
 .cx-grid .cx-product__best{display:none}
 .cx-grid .cx-price b{font-size:13.5px;white-space:nowrap}
 .cx-grid .cx-price s{white-space:nowrap}
 .cx-grid .cx-add{width:36px;height:36px;border-radius:10px}
 .cx-spec--boxed{padding:0 18px}
}

/* ===== Product page ===== */
.cx-pdp{position:relative;padding:28px 0 72px;isolation:isolate}
.cx-pdp::before{content:"";position:absolute;z-index:-1;left:-15%;top:0;width:70%;height:90%;background:radial-gradient(closest-side,rgba(255,138,61,.16),transparent);pointer-events:none}
.cx-pdp .cx-crumbs{margin-bottom:28px}
.cx-pdp__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.cx-gallery{position:sticky;top:calc(var(--header-height,64px) + 20px);display:flex;flex-direction:column;gap:12px}
.cx-gallery__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);scrollbar-width:none;overscroll-behavior-x:contain}
.cx-gallery__track::-webkit-scrollbar{display:none}
.cx-gallery__slide{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:1;overflow:hidden}
.cx-gallery__slide img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.cx-gallery__track:hover .cx-gallery__slide img{transform:scale(1.03)}
.cx-gallery__off{position:absolute;left:18px;top:18px;padding:7px 11px;border-radius:10px;background:var(--ink);color:#fff;font:600 13px/1 var(--mono)}
.cx-gallery__off[hidden]{display:none}
.cx-gallery__thumbs{display:flex;gap:10px}
.cx .cx-thumb{width:76px;height:76px;padding:0;border-radius:16px;overflow:hidden;border:1.5px solid var(--line);background:#fff;cursor:pointer;opacity:.65;transition:opacity .25s,border-color .25s,transform .3s var(--ease)}
.cx .cx-thumb img{width:100%;height:100%;object-fit:cover}
.cx .cx-thumb:hover{opacity:1;transform:translateY(-2px)}
.cx .cx-thumb[aria-current="true"]{opacity:1;border-color:var(--o)}
.cx-buy{display:flex;flex-direction:column;gap:20px;padding-top:4px}
.cx-buy__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cx-pill-tag{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:9px;background:var(--o-50);border:1px solid var(--o-100);color:var(--o-600);font-size:13px;font-weight:600}
.cx .cx-h1--product{font-size:clamp(38px,4.6vw,60px);margin-top:-6px}
.cx-buy__rating{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);align-self:flex-start;margin-top:-8px}
.cx-buy__rating b{color:var(--ink)}
.cx-buy__rating:hover span{text-decoration:underline;text-underline-offset:3px}
.cx-buy .cx-lead{font-size:16px}
.cx-buy__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:20px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.cx-buy__price>b{font-size:34px;font-weight:700;letter-spacing:-.03em}
.cx-buy__price s{font-size:17px;color:var(--muted)}
.cx-buy__price [hidden]{display:none}
.cx-save{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:9px;background:#ecf8f0;color:#15803d;font-size:13px;font-weight:600}
.cx-variants{border:0;margin:0;padding:0;min-width:0}
.cx .cx-variants legend{padding:0;margin-bottom:10px;color:var(--muted);font-size:12.5px}
.cx-variants__list{display:flex;flex-wrap:wrap;gap:10px}
.cx-variants__note{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.cx-variants__note[hidden]{display:none}
.cx .cx-variant{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:120px;min-height:52px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);font:700 16px/1.2 "Plus Jakarta Sans",sans-serif;cursor:pointer;transition:all .25s var(--ease)}
.cx .cx-variant small{font-size:12.5px;color:var(--muted);font-weight:500}
.cx .cx-variant:hover:not(:disabled){border-color:var(--ink)}
.cx .cx-variant[aria-checked="true"]{border-color:var(--o);background:var(--o-50);box-shadow:0 0 0 3px var(--o-100)}
.cx .cx-variant[aria-checked="true"] small{color:var(--o-600)}
.cx .cx-variant:disabled{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.cx-buy__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cx .cx-btn--wide{width:100%;min-height:56px}
.cx .cx-buy__actions .cx-btn--primary{justify-content:space-between;padding-left:22px}
.cx .cx-buy__actions .cx-btn--primary>svg:first-child{font-size:19px;margin-right:-2px}
.cx .cx-buy__actions .cx-btn--primary span{flex:0 1 auto;text-align:center}
.cx .cx-btn:disabled{opacity:.45;cursor:not-allowed}
.cx .cx-btn.is-added .cx-btn__arrow{background:#15803d}
.cx-buy__trust{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cx-buy__trust li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:600}
.cx-buy__trust li>span{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--o-50);color:var(--o);font-size:17px;flex:none}
@media (max-width:1023px){.cx-pdp__grid{grid-template-columns:1fr 1fr;gap:36px}}
@media (max-width:899px){
 .cx-pdp{padding-top:16px}.cx-pdp .cx-crumbs{margin-bottom:16px}
 .cx-pdp__grid{grid-template-columns:1fr;gap:28px}
 .cx-gallery{position:relative;top:0;margin:0 calc(var(--gut)*-1)}
 .cx-gallery__track{border-radius:0;border-inline:0;box-shadow:none}
 .cx-gallery__thumbs{padding:0 var(--gut)}
 .cx .cx-thumb{width:56px;height:56px;border-radius:12px}
 .cx-gallery__off{left:calc(var(--gut) + 4px)}
}
@media (max-width:767px){.cx-buy__actions{grid-template-columns:1fr}.cx-buy__trust{grid-template-columns:1fr 1fr}.cx-buy__trust li{font-size:13px;padding:10px 12px}.cx-buy__price>b{font-size:30px}}

/* Details */
.cx-sec--details{padding-top:24px;border-top:1px solid var(--line)}
.cx-details{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.cx-details:not(:has(.cx-details__copy)){grid-template-columns:1fr}
.cx-details__spec{position:sticky;top:calc(var(--header-height,64px) + 24px)}
.cx-specs{margin:0;border-top:1px solid var(--line-2)}
.cx-specs>div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.cx .cx-specs dt{color:var(--muted);font-size:12.5px;padding-top:3px}
.cx-specs dd{margin:0;font-size:15px;font-weight:600}
.cx-acc{border-top:1px solid var(--line-2)}
.cx-acc:last-of-type{border-bottom:1px solid var(--line-2)}
.cx-acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;cursor:pointer;font-size:20px;font-weight:700;letter-spacing:-.02em}
.cx-acc summary::-webkit-details-marker{display:none}
.cx-acc summary:hover{color:var(--o-600)}
.cx-acc summary i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line-2);flex:none;transition:transform .4s var(--ease),background-color .3s,color .3s,border-color .3s}
.cx-acc[open] summary i{transform:rotate(45deg);background:var(--o);border-color:var(--o);color:#fff}
.cx-acc__body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s var(--ease)}
.cx-acc.is-closing .cx-acc__body,.cx-acc.is-opening .cx-acc__body{grid-template-rows:0fr}
.cx-rte{overflow:hidden}
.cx-rte>*{overflow:hidden}
.cx-rte p{font-size:16px;line-height:1.75;color:var(--ink-2);margin:0 0 14px}
.cx-rte p:last-child{margin-bottom:24px}
.cx-rte strong{color:var(--ink)}
.cx-rte ul,.cx-rte ol{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.cx-rte li{position:relative;padding:12px 14px 12px 44px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--ink-2)}
.cx-rte li::before{content:"";position:absolute;left:14px;top:14px;width:18px;height:18px;border-radius:6px;background:var(--o) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%273.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m5 12.5 4.2 4.2L19 7%27/%3E%3C/svg%3E") center/12px no-repeat}
@media (max-width:899px){.cx-details{grid-template-columns:1fr;gap:40px}.cx-details__spec{position:static}.cx-specs>div{grid-template-columns:110px 1fr}.cx-acc summary{font-size:18px}}

/* Sticky buy bar */
.cx-buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:rgba(252,250,247,.9);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-top:1px solid var(--line);box-shadow:0 -12px 30px -18px rgba(26,20,16,.3);transform:translateY(110%);transition:transform .5s var(--ease)}
.cx-buybar.is-shown{transform:none}
.cx-buybar__inner{display:flex;align-items:center;gap:14px}
.cx-buybar img{width:48px;height:48px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}
.cx-buybar__name{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.cx-buybar__name strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-buybar__name small{font-size:13px;color:var(--ink-2)}
.cx .cx-buybar .cx-btn{min-height:48px}
.cx .cx-buybar .cx-btn--icon{width:48px;padding:0}
.cx .cx-buybar .cx-btn--icon span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:767px){.cx-buybar img{display:none}.cx .cx-buybar .cx-btn--primary span{font-size:14px}.cx .cx-buybar .cx-btn--primary{padding-left:16px}}
.cx .cx-buybar .cx-btn__arrow{width:34px;height:34px}

/* Video testimonial */
.cx-sec--video{background:var(--tint)}
.cx-video{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:center}
.cx-video__frame{position:relative;width:min(380px,100%);justify-self:center;aspect-ratio:9/16;border-radius:32px;overflow:hidden;background:#1a1410;box-shadow:var(--shadow-lg),0 0 0 8px #fff}
.cx-video__frame video{width:100%;height:100%;object-fit:cover;display:block}
.cx .cx-video__play{position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0;background:linear-gradient(180deg,transparent 55%,rgba(26,20,16,.35));cursor:pointer}
.cx-video__play span{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--o);color:#fff;font-size:28px;box-shadow:0 0 0 10px rgba(255,255,255,.35),0 20px 40px -12px rgba(255,102,0,.7);transition:transform .4s var(--ease)}
.cx-video__play span svg{fill:currentColor;stroke:none;margin-left:4px}
.cx .cx-video__play:hover span{transform:scale(1.08)}
.cx-video__frame.is-playing .cx-video__play{display:none}
.cx-video__copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.cx-video__tag{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--o-600)}
.cx-video__tag svg{fill:currentColor;stroke:none;font-size:12px}
.cx-score--left{margin:4px 0 6px}
.cx-score--left b{font-size:44px}
@media (max-width:899px){.cx-video{grid-template-columns:1fr;gap:36px}.cx-video__frame{width:min(320px,82%)}.cx-video__copy{align-items:center;text-align:center}.cx-video__copy .cx-sub{margin:0 auto}}

/* Comparison on phones: a check/cross matrix; tap a row to read both answers */
.cx-vs{display:none}
@media (max-width:599px){
 .cx-vs{--us:78px;--them:76px;--gap:10px;--chev:18px;display:block;position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:0 14px;overflow:hidden;isolation:isolate}
 .cx-vs::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:calc(14px + var(--chev) + var(--them) + 2*var(--gap));width:var(--us);background:var(--o-50)}
 .cx-vs__head,.cx-vs__row summary{display:grid;grid-template-columns:1fr var(--us) var(--them) var(--chev);column-gap:var(--gap);align-items:center}
 .cx-vs__head{min-height:64px}
 .cx-vs__us{align-self:stretch;display:grid;place-items:center;margin:0;background:var(--o);border-radius:0}
 .cx-vs__us .cx-wordmark{color:#fff;font-size:17px}
 .cx-vs__them{font-size:12px;font-weight:700;line-height:1.2;text-align:center;color:var(--ink-2);max-width:var(--them);text-wrap:balance;overflow-wrap:normal;hyphens:none;justify-self:center}
 .cx-vs__them span{display:block}
 .cx-vs__row{border-top:1px solid var(--line)}
 .cx-vs__row summary{list-style:none;min-height:58px;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .cx-vs__row summary::-webkit-details-marker{display:none}
 .cx-vs__feature{font-size:14.5px;font-weight:700;line-height:1.3;padding:12px 0}
 .cx-vs__mark{justify-self:center;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:15px}
 .cx-vs__mark svg{stroke-width:3}
 .cx-vs__mark--yes{background:var(--o);color:#fff}
 .cx-vs__mark--no{background:#efeae4;color:#a0968c}
 .cx-vs__row summary i{justify-self:end;color:var(--muted);font-size:16px;transition:transform .35s var(--ease)}
 .cx-vs__row[open] summary i{transform:rotate(90deg);color:var(--o)}
 .cx-vs__detail{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s var(--ease)}
 .cx-vs__row.is-opening .cx-vs__detail,.cx-vs__row.is-closing .cx-vs__detail{grid-template-rows:0fr}
 .cx-vs__detail>div{overflow:hidden;background:#fff}
 .cx-vs__line{display:grid;grid-template-columns:86px 1fr;gap:10px;margin:0 0 8px;padding:12px;border-radius:12px;background:var(--paper);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
 .cx-vs__line b{font-size:12.5px;color:var(--muted);line-height:1.5}
 .cx-vs__line--us{background:#fff;border:1px solid var(--o-100);color:var(--ink)}
 .cx-vs__line--us b{color:var(--o-600);font-size:14px;font-weight:800;letter-spacing:-.04em;line-height:1.35}
 .cx-vs__row[open] .cx-vs__detail>div{padding-bottom:6px}
 .cx-vs__hint{margin:0 -14px;padding:12px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);text-align:center;background:var(--paper)}
}

.cx-steps__note{margin:8px 0 0 78px;max-width:560px}
@media (max-width:767px){.cx-steps__note{margin-left:58px}}

/* Proof in numbers */
.cx-proofband{padding:56px 0 8px}
.cx-proofband__list{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-2);border-radius:24px;background:#fff;overflow:hidden}
.cx-proofband__list li+li{border-left:1px solid var(--line-2)}
.cx-proofband__list a{display:flex;flex-direction:column;gap:4px;padding:26px 24px;height:100%;transition:background-color .3s}
.cx-proofband__list a:hover{background:var(--o-50)}
.cx-proofband__list b{font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1.05;color:var(--ink)}
.cx-proofband__list li:first-child b{color:var(--o)}
.cx-proofband__list a>span{font-size:14px;color:var(--ink-2)}
@media (max-width:767px){.cx-proofband{padding:40px 0 0}.cx-proofband__list{grid-template-columns:1fr 1fr}.cx-proofband__list li+li{border-left:0}.cx-proofband__list li:nth-child(2n){border-left:1px solid var(--line-2)}.cx-proofband__list li:nth-child(n+3){border-top:1px solid var(--line-2)}.cx-proofband__list a{padding:20px 16px}}

/* Shop by goal: a line about the selected area */
.cx-catnote{margin:-6px 0 22px;font-size:15px;color:var(--ink-2);min-height:1.6em}
.cx-catnote span{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.cx-catnote [hidden]{display:none}
.cx-catnote .cx-link{font-size:14px}

/* From batch to your door */
.cx-process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step;position:relative}
.cx-process::before{content:"";position:absolute;left:12%;right:12%;top:31px;height:2px;background:repeating-linear-gradient(90deg,var(--o-200) 0 8px,transparent 8px 14px);z-index:0}
.cx-process__step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:0 8px}
.cx-process__icon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:#fff;border:1px solid var(--line-2);color:var(--o);font-size:26px;box-shadow:var(--shadow);margin-bottom:6px}
.cx-process__step:last-child .cx-process__icon{background:var(--o);border-color:var(--o);color:#fff}
.cx-process__step strong{font-size:17px;font-weight:700;letter-spacing:-.015em}
.cx-process__step p{font-size:14.5px;color:var(--ink-2);line-height:1.55;max-width:240px}
.cx-coa{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;margin-top:48px;padding:32px;border-radius:28px;background:var(--ink);color:#fff}
.cx-coa__label{width:220px;padding:18px;border-radius:16px;background:#fff;color:var(--ink);display:flex;flex-direction:column;gap:12px;transform:rotate(-3deg);box-shadow:0 20px 40px -16px rgba(0,0,0,.6)}
.cx-coa__brand{font-size:20px;font-weight:800;letter-spacing:-.05em;color:var(--o)}
.cx-coa__row{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;border:2px solid var(--o);background:var(--o-50)}
.cx-coa__row small{font-size:11px;color:var(--ink-2)}
.cx-coa__row b{font-size:17px;letter-spacing:.04em}
.cx-coa__lines{display:flex;flex-direction:column;gap:6px}
.cx-coa__lines i{height:6px;border-radius:3px;background:#efeae4}
.cx-coa__lines i:last-child{width:60%}
.cx-coa__copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cx .cx-coa__copy h3{font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.03em;color:#fff}
.cx-coa__copy p{font-size:15.5px;color:rgba(255,255,255,.78);max-width:520px;margin-bottom:6px}
.cx .cx-coa .cx-btn--primary{background:#fff;color:var(--ink)}
@media (max-width:899px){.cx-process{grid-template-columns:1fr 1fr;row-gap:28px}.cx-process::before{display:none}}
@media (max-width:767px){
 .cx-process{grid-template-columns:1fr;gap:0}
 .cx-process__step{flex-direction:row;align-items:flex-start;text-align:left;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
 .cx-process__step:first-child{border-top:0}
 .cx-process__icon{width:48px;height:48px;border-radius:15px;font-size:21px;margin:0;flex:none}
 .cx-process__step strong{display:block;margin:2px 0 2px}
 .cx-process__step p{max-width:none}
 .cx-process__step{display:grid;grid-template-columns:48px 1fr;column-gap:16px}
 .cx-process__step .cx-process__icon{grid-row:span 2}
 .cx-coa{grid-template-columns:1fr;gap:28px;padding:28px 22px;margin-top:32px}
 .cx-coa__label{justify-self:center}
}

/* Research, not treatment */
.cx-honest{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cx-honest__col{padding:28px;border-radius:24px;background:#fff;border:1px solid var(--line)}
.cx .cx-honest__col h3{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.cx-honest__col h3 svg{width:28px;height:28px;padding:6px;border-radius:9px;background:var(--o);color:#fff;stroke-width:3}
.cx-honest__col--no h3 svg{background:#efeae4;color:#8a8178}
.cx-honest__col li{padding:12px 0;border-top:1px solid var(--line);font-size:15.5px;color:var(--ink-2)}
.cx-honest__status{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;font-size:14.5px;font-weight:600;color:var(--ink)}
.cx-honest__status svg{color:var(--o);font-size:20px}
.cx-sec--tint .cx-more{gap:16px;align-items:center;flex-wrap:wrap}
@media (max-width:767px){.cx-honest{grid-template-columns:1fr}.cx-honest__col{padding:22px}.cx-honest__status{justify-content:flex-start;text-align:left}}

/* Peptides & longevity, by the research */
.cx-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px}
.cx-points li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.cx-points span{grid-row:span 2;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--o-50);color:var(--o-600);font-weight:700;font-size:15px}
.cx-points strong{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.cx-points p{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.cx-map{padding:20px;border-radius:28px;background:var(--tint);border:1px solid var(--line)}
.cx-map__areas{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;margin-bottom:18px}
.cx-map__areas::-webkit-scrollbar{display:none}
.cx-map .cx-chip{background:#fff}
.cx-map .cx-chip[aria-pressed="true"]{background:var(--ink)}
.cx-map__panel[hidden]{display:none}
.cx-map__panel.is-entering{animation:cx-pop .5s var(--ease) both}
.cx-map__intro{font-size:15.5px;color:var(--ink-2);margin:0 4px 16px;max-width:720px}
.cx-map__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cx-compound{padding:20px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.cx-compound header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.cx .cx-compound h3{font-size:20px;font-weight:700;letter-spacing:-.025em}
.cx-compound header .cx-link{font-size:13.5px}
.cx-study{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 0;border-top:1px solid var(--line)}
.cx-study p{font-size:14.5px;line-height:1.55;color:var(--ink)}
.cx-study a{font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.cx-study a:hover{color:var(--o-600)}
.cx-ev{display:inline-flex;padding:4px 9px;border-radius:7px;font-size:12px;font-weight:700;background:#efeae4;color:var(--ink-2)}
.cx-ev--human-rct{background:var(--o);color:#fff}
.cx-ev--human{background:var(--o-100);color:var(--o-600)}
.cx-ev--review{background:#e8eef9;color:#3b5a8c}
.cx-ev--animal,.cx-ev--cell{background:#efeae4;color:#6f665e}
.cx-map__note{margin:16px 4px 2px}
@media (max-width:899px){.cx-points{grid-template-columns:1fr;gap:10px}.cx-map__grid{grid-template-columns:1fr}}
@media (max-width:767px){.cx-map{padding:14px;margin:0 calc(var(--gut)*-1);border-radius:0;border-inline:0}.cx-compound{padding:16px}.cx-points li{padding:18px}}

/* Home teaser for the research page */
.cx-areas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cx-area{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line-2);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.cx-area:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--o-200)}
.cx-area strong{font-size:18px;font-weight:700;letter-spacing:-.02em}
.cx-area p{font-size:14.5px;color:var(--ink-2);line-height:1.55;flex:1}
.cx-area__foot{display:flex;flex-direction:column;gap:6px;padding-top:12px;margin-top:4px;border-top:1px solid var(--line)}
.cx-area__foot>span{font-size:13px;font-weight:600;color:var(--ink)}
.cx-area__foot em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:13px;font-weight:600;color:var(--o-600)}
.cx-area:hover .cx-area__foot em svg{transform:translateX(3px)}
.cx-area__foot em svg{transition:transform .3s var(--ease)}
@media (max-width:1023px){.cx-areas{grid-template-columns:1fr 1fr}}
@media (max-width:599px){.cx-areas{grid-template-columns:1fr;gap:10px}.cx-area{padding:18px}}

/* Research page */
.cx-sec--research{padding:48px 0 32px}
.cx-legend{margin-top:16px;padding:24px;border-radius:24px;background:#fff;border:1px solid var(--line)}
.cx-legend ul{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cx-legend li{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cx-legend p{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.cx-sec--flush-top{padding-top:0}
.cx-center-note{text-align:center;margin:-40px 0 24px}
@media (max-width:1023px){.cx-legend ul{grid-template-columns:1fr 1fr}}
@media (max-width:599px){.cx-legend{padding:18px}.cx-legend ul{grid-template-columns:1fr}.cx-legend li{flex-direction:row;align-items:baseline;gap:10px}.cx-legend .cx-ev{flex:none;min-width:116px;justify-content:center}}

/* Cold-chain shipping */
.cx-cold{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cx-cold__times{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:16px;padding:32px;border-radius:24px;background:var(--ink);color:#fff;min-height:220px}
.cx-cold__times>svg{position:absolute;right:-30px;top:-30px;font-size:180px;color:rgba(255,255,255,.06);stroke-width:1.2}
.cx-cold__times div{display:flex;flex-direction:column;gap:4px}
.cx-cold__times b{font-size:clamp(34px,4vw,52px);font-weight:700;letter-spacing:-.04em;line-height:1}
.cx-cold__times div:first-of-type b{color:var(--o2)}
.cx-cold__times span{font-size:14.5px;color:rgba(255,255,255,.75)}
.cx-cold__box{padding:28px;border-radius:24px;background:#fff;border:1px solid var(--line)}
.cx .cx-cold__box h3{font-size:18px;font-weight:700;letter-spacing:-.015em;margin-bottom:8px}
.cx-cold__box li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:15px;font-weight:600}
.cx-cold__box li span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--o-50);color:var(--o);font-size:19px;flex:none}
.cx-promises{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.cx-promises li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.cx-promises span{grid-row:span 2;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--o);color:#fff;font-size:19px}
.cx-promises strong{font-size:16px;font-weight:700;margin-bottom:4px}
.cx-promises p{font-size:14.5px;color:var(--ink-2);line-height:1.55}
/* Product page: what every order gets, one card with a row per point (replaces the tiles and loose lines, 2026-10) */
.cx-perks{background:#fff;border:1px solid var(--line);border-radius:18px;padding:4px 16px}
.cx-perks li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;padding:12px 0}
.cx-perks li+li{border-top:1px solid var(--line)}
.cx-perks__icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--o-50);color:var(--o);font-size:18px}
.cx-perks strong{display:block;font-size:14.5px;font-weight:700;line-height:1.3;color:var(--ink)}
.cx-perks small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.cx-perks a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media (max-width:899px){.cx-cold{grid-template-columns:1fr}.cx-promises{grid-template-columns:1fr;gap:10px}}
@media (max-width:767px){.cx-cold__times{padding:24px;min-height:0}.cx-cold__box{padding:22px}.cx-promises li{padding:18px}}
/* Phones: the buy bar's add button shrinks to its icon so the product name and price fit */
@media (max-width:480px){.cx .cx-buybar .cx-btn--primary{padding:0 5px;width:48px;justify-content:center}.cx .cx-buybar .cx-btn--primary span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.cx .cx-buybar .cx-btn__arrow{width:38px;height:38px}.cx-buybar__name strong{font-size:16px}}

/* "You are leaving Continue" notice */
.cx-exit{--o:#ff6600;--o-50:#fff5ec;--o-100:#ffe8d6;--o-600:#e65c00;--ink:#1a1410;--ink-2:#4d453f;--muted:#6f665d;--line:rgba(26,20,16,.09);--line-2:rgba(26,20,16,.14);--paper:#fcfaf7;--ease:cubic-bezier(.22,1,.36,1);position:fixed;inset:0;z-index:2147482000;display:grid;place-items:center;padding:16px;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink)}
.cx.cx-exit{background:transparent;overflow:visible}
.cx-exit[hidden]{display:none}
.cx-exit__backdrop{position:absolute;inset:0;background:rgba(26,20,16,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}
.cx-exit__card{position:relative;width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:28px;border-radius:26px;background:var(--paper);border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(26,20,16,.45);outline:0;transform:translateY(12px) scale(.98);opacity:0;transition:transform .35s var(--ease),opacity .25s}
.cx-exit.is-open .cx-exit__backdrop{opacity:1}
.cx-exit.is-open .cx-exit__card{transform:none;opacity:1}
.cx-exit__icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--o-50);color:var(--o);font-size:20px;margin-bottom:14px}
.cx-exit__icon svg{transform:rotate(-45deg)}
.cx-exit h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.03em;margin-bottom:8px}
.cx-exit p{margin:0}
.cx-exit__card>p{font-size:15px;color:var(--ink-2);line-height:1.55}
.cx-exit__actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.cx-exit__actions .cx-btn{width:100%}
.cx .cx-exit__actions .cx-btn--primary{justify-content:space-between;padding-left:22px}
.cx-exit__ask{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:18px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.cx-exit__ask p{font-size:13.5px;color:var(--ink-2)}
.cx-exit__ask .cx-link svg{color:var(--o)}
html.cx-locked{overflow:hidden}
@media (max-width:600px){.cx-exit{place-items:end center;padding:0}.cx-exit__card{width:100%;border-radius:24px 24px 0 0;padding:24px 20px calc(20px + env(safe-area-inset-bottom))}}

/* Research page: in short, key data, community */
.cx-compound__sum{font-size:15px;line-height:1.55;color:var(--ink);margin-bottom:14px}
.cx-compound__sum b{color:var(--o-600)}
.cx-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:6px}
.cx-metric{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
.cx-metric b{font-size:26px;font-weight:700;letter-spacing:-.04em;line-height:1.05;color:var(--ink)}
.cx-metric>span:not(.cx-ev){font-size:13.5px;font-weight:600;line-height:1.35}
.cx-metric small{font-size:12px;color:var(--muted);line-height:1.4;flex:1}
.cx-metric .cx-ev{font-size:11px;padding:3px 7px}
.cx-metric a{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.cx-community{margin-top:6px;padding:14px;border-radius:16px;background:var(--paper);border:1px dashed var(--line-2)}
.cx-community__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:6px}
.cx-community__head b{font-size:14px}
.cx-community__head span{font-size:12px;color:var(--muted)}
.cx-community__list li{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid var(--line)}
.cx-community__list li:first-child{border-top:0}
.cx-community a{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
.cx-community a span{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:6px;background:#ffe9df;color:#c2410c;font-size:11px;font-weight:700}
.cx-community a:hover{color:var(--o-600)}
.cx-community small{font-size:12.5px;color:var(--ink-2)}

/* Product page: three facts and visible benefits */
.cx-sec--facts{padding-top:24px}
.cx-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cx-fact{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:24px;border-radius:24px;background:#fff;border:1px solid var(--line-2)}
.cx-fact:first-child{background:var(--ink);color:#fff;border-color:var(--ink)}
.cx-fact b{font-size:clamp(34px,4vw,48px);font-weight:700;letter-spacing:-.045em;line-height:1}
.cx-fact:first-child b{color:var(--o2)}
.cx-fact>span:not(.cx-ev){font-size:15px;font-weight:600;line-height:1.35}
.cx-fact small{font-size:13px;color:var(--muted);line-height:1.45;flex:1}
.cx-fact:first-child small{color:rgba(255,255,255,.7)}
.cx-fact a{font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.cx-fact:first-child a{color:rgba(255,255,255,.75)}
.cx-sec--benefits{padding-top:24px}
.cx-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cx-benefits li{display:flex;gap:12px;align-items:flex-start;padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.cx-benefits span{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--o);color:#fff;font-size:15px;flex:none}
.cx-benefits span svg{stroke-width:3}
.cx-benefits p{font-size:15px;line-height:1.5;color:var(--ink)}
.cx-benefits__note{text-align:center;margin-top:16px}
@media (max-width:899px){.cx-facts{grid-template-columns:1fr}.cx-benefits{grid-template-columns:1fr 1fr}}
@media (max-width:599px){.cx-benefits{grid-template-columns:1fr;gap:8px}.cx-benefits li{padding:14px}.cx-fact{padding:20px}}
.cx-metric--caveat{background:#fff;border-style:dashed}
.cx-metric--caveat b{color:var(--ink-2)}
.cx-metric__tag{font-style:normal;font-size:11.5px;font-weight:700;color:#8a6d1f;background:#fbf1d3;padding:3px 8px;border-radius:7px}
/* Research page: one compound per row, so its key numbers sit side by side */
.cx-page-research .cx-map__grid{grid-template-columns:1fr}
.cx-page-research .cx-compound{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-items:start}
.cx-page-research .cx-compound>header,.cx-page-research .cx-compound__sum,.cx-page-research .cx-metrics{grid-column:1/-1}
.cx-page-research .cx-compound>ul{grid-column:1}
.cx-page-research .cx-community{grid-column:2;grid-row:span 3;margin-top:14px}
@media (max-width:899px){.cx-page-research .cx-compound{display:block}.cx-page-research .cx-community{margin-top:10px}}

.cx-community__sum{font-size:14px;line-height:1.55;color:var(--ink);margin:2px 0 10px}
.cx-themes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cx-theme{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:600;border:1px solid transparent}
.cx-theme small{font-size:11px;font-weight:500;opacity:.75}
.cx-theme--positive{background:#ecf8f0;color:#15803d;border-color:#c9ecd6}
.cx-theme--neutral{background:#f1eeeb;color:#5d554e;border-color:#e4ddd6}
.cx-theme--negative{background:#fdf3e2;color:#a15c07;border-color:#f6dfb8}
.cx-community__more summary{list-style:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--o-600);padding:8px 0 2px}
.cx-community__more summary::-webkit-details-marker{display:none}
.cx-community__more[open] summary{display:none}
.cx-community__more .cx-community__list li:first-child{border-top:1px solid var(--line)}
.cx-sec--pdp-community{padding-top:24px}
.cx-sec--pdp-community .cx-community{max-width:860px;margin:0 auto;padding:22px;background:#fff}
.cx-impacts{display:grid;gap:8px;margin:4px 0 12px}
.cx-impacts li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.cx-impacts li>span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--o-50);color:var(--o);font-size:16px;flex:none}
.cx-impacts p{font-size:14.5px;line-height:1.5;color:var(--ink);font-weight:500}
.cx-impacts small{display:block;margin-top:3px;font-size:12px;color:var(--muted);font-weight:500}
.cx-sec--pdp-community .cx-impacts{grid-template-columns:repeat(3,1fr)}
@media (max-width:899px){.cx-sec--pdp-community .cx-impacts{grid-template-columns:1fr}}

/* Dropdowns (public/ui-select.js) in the refreshed look */
.cx .cx-sort .ui-select--full{min-width:180px}
.cx .cx-sort .ui-select__trigger{min-height:42px;padding:0 12px 0 14px;border:1px solid var(--line-2);border-radius:12px;background:#fff;font:600 14px "Plus Jakarta Sans",sans-serif;color:var(--ink);cursor:pointer}
.cx .cx-sort .ui-select__trigger:hover{border-color:var(--ink)}
.cx .cx-sort .ui-select--full.is-open .ui-select__trigger,.cx .cx-sort .ui-select__trigger:focus-visible{border-color:var(--o);box-shadow:0 0 0 3px var(--o-100)}
.cx-community__more-note{margin:-4px 0 12px;font-size:12.5px;color:var(--muted)}

/* Community threads: a standard statement of what people report, with the source and a link to the thread. */
.cx-threads__head{margin:14px 0 8px;font-size:12.5px;font-weight:700;color:var(--muted)}
.cx-threads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.cx-compound .cx-threads{grid-template-columns:1fr}
.cx .cx-community a.cx-thread{display:flex;flex-direction:column;justify-content:space-between;gap:14px;height:100%;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--ink);transition:border-color .25s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.cx .cx-community a.cx-thread:hover{border-color:var(--o);transform:translateY(-2px);box-shadow:0 14px 30px -22px rgb(26 20 16/.35);color:var(--ink)}
.cx-thread b{font-size:15px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.cx .cx-community .cx-thread__meta{display:flex;align-items:center;gap:8px;margin:0;padding:0;border-radius:0;background:none;color:var(--muted);font-size:12.5px;font-weight:600}
.cx-thread__meta i{font-style:normal;padding:1px 6px;border-radius:6px;background:#ffe9df;color:#c2410c;font-size:11px;font-weight:700}
.cx-community__more .cx-threads{margin-top:10px}
@media (max-width:760px){.cx-threads{grid-template-columns:1fr}}

/* ===== Research knowledge base: /research hub and one page per compound ===== */
.cx-kb__filters{margin-bottom:22px}
.cx-kb__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cx .cx-kb-card{display:flex;flex-direction:column;gap:10px;min-height:100%;padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line-2);color:var(--ink);transition:border-color .3s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.cx .cx-kb-card:hover{border-color:var(--o);transform:translateY(-3px);box-shadow:0 22px 44px -30px rgb(26 20 16/.4)}
.cx .cx-kb-card[hidden]{display:none}
.cx-kb-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.cx-kb-card__area{font-size:12.5px;font-weight:700;color:var(--o-600)}
.cx-kb-card__pop{padding:3px 9px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:700}
.cx .cx-kb-card__name{margin:0;font-size:26px;font-weight:700;line-height:1.1;letter-spacing:-.03em}
.cx-kb-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cx-kb-card__foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px}
.cx-kb-card__meta{font-size:12.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-kb-card__foot i{margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--o-50);color:var(--o);font-size:16px;transition:background .3s,color .3s,transform .35s var(--ease)}
.cx-kb-card:hover .cx-kb-card__foot i{background:var(--o);color:#fff;transform:translateX(2px)}
.cx-kb__legend{margin-top:28px;border:1px solid var(--line-2);border-radius:18px;background:#fff}
.cx-kb__legend summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;font-weight:700;cursor:pointer;list-style:none}
.cx-kb__legend summary::-webkit-details-marker{display:none}
.cx-kb__legend[open] summary i{transform:rotate(45deg)}
.cx-kb__legend summary i{transition:transform .3s var(--ease);color:var(--o)}
.cx-kb__legend ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0;padding:0 20px 20px;list-style:none}
.cx-kb__legend li{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cx-kb__legend p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}

.cx-kb-head{padding:28px 0 36px}
.cx-kb-head__tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 14px}
.cx .cx-kb-head__title{margin:0;font-size:clamp(44px,6.4vw,80px);letter-spacing:-.045em}
.cx .cx-kb-head__lead{max-width:760px;margin:16px 0 0;font-size:clamp(17px,1.6vw,20px)}
.cx-kb-head__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:20px 0 0;font-size:13.5px;color:var(--muted)}
.cx-kb-head__meta>span:not(.cx-ev)+span::before{content:"·";margin-right:16px;color:var(--line-2)}
.cx-kb-head__meta .cx-ev+span::before{content:none}
.cx-kb-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start;padding-bottom:24px}
.cx-kb-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.cx-kb-toc p{margin:0 0 10px;font-size:12.5px;font-weight:700;color:var(--muted)}
.cx-kb-toc ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--line-2)}
.cx-kb-toc a{display:block;margin-left:-1px;padding:7px 0 7px 14px;border-left:2px solid transparent;font-size:14px;color:var(--ink-2);transition:color .25s,border-color .25s}
.cx-kb-toc a:hover{color:var(--ink)}
.cx-kb-toc a.is-active{color:var(--o-600);border-left-color:var(--o);font-weight:600}
.cx-kb-body{max-width:760px;min-width:0}
.cx-kb-sec{padding:30px 0;border-top:1px solid var(--line)}
.cx-kb-sec:first-child{border-top:0;padding-top:0}
.cx .cx-kb-h2{margin:0 0 14px;font-weight:700;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.03em;scroll-margin-top:96px}
.cx-kb-p{margin:0;font-size:17px;line-height:1.7;color:var(--ink-2)}
.cx-kb-p+.cx-kb-p{margin-top:12px}
.cx-kb-p--muted{font-size:14.5px;color:var(--muted);margin-bottom:6px}
.cx-facts--kb{grid-template-columns:repeat(3,minmax(0,1fr))}
.cx-kb__grid--parts{grid-template-columns:repeat(2,minmax(0,1fr))}
.cx-kb-studies{margin:0;padding:0;list-style:none}
.cx-kb-studies .cx-study:first-child{border-top:0}
.cx-kb-studies .cx-study p{font-size:16px}
.cx-kb-notes{margin:0;padding:0 0 0 18px;list-style:disc;display:grid;gap:10px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.cx-kb-notes li::marker{color:var(--o)}
.cx-kb-notes a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.cx-kb-sec .cx-community{margin-top:10px}
.cx-kb-buy{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:16px;border-radius:20px;background:#fff;border:1px solid var(--line-2)}
.cx-kb-buy img{width:64px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.cx-kb-buy__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.cx-kb-buy__text small{font-size:12px;color:var(--muted)}
.cx-kb-buy__text strong{font-size:16px;line-height:1.25}
.cx-kb-buy__text span{font-size:13.5px;color:var(--ink-2)}
.cx-kb-buy__text s{color:var(--muted);font-size:12.5px}
.cx .cx-kb-buy .cx-btn{grid-column:1/-1;min-height:48px;justify-content:space-between;padding-left:20px}
.cx-kb-buy--inline{display:none;margin-top:8px}
.cx-kb-more{padding-top:24px}
.cx-kb-more__nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:28px}
@media (max-width:1000px){.cx-kb__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cx-kb-layout{grid-template-columns:1fr;gap:0}.cx-kb-aside{display:none}.cx-kb-buy--inline{display:grid}}
@media (max-width:640px){.cx-kb__grid,.cx-kb__grid--parts,.cx-facts--kb{grid-template-columns:1fr}.cx-kb-sec{padding:24px 0}.cx-kb-p{font-size:16px}.cx-kb-head{padding-bottom:24px}}

/* Icon badges keep their shape: a box that holds only an icon never shrinks in a row whose text wraps
   (that is what turned round and square badges into ovals), and icons themselves never shrink. */
:where(span,div,i,b,em,a,button,figure,label):has(> svg:only-child){flex-shrink:0}
/* Page not found (2026-10) */
.cx-notfound{padding:clamp(72px,12vw,140px) 0;text-align:center}
.cx-notfound .cx-h1{margin:10px auto 16px;max-width:760px}
.cx-notfound .cx-sub{margin:0 auto;max-width:560px}
.cx-notfound__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
/* Product page on phones (2026-10): the photo stays big (a full square, nearly the screen width, with side space and
   rounded corners); the space comes from a tighter title, price and size block, so price, sizes and the buy button
   are on the first screen. The description follows the buttons. */
@media (max-width:767px){
 .cx-pdp{padding-top:var(--gut)}
 .cx-pdp .cx-crumbs,.cx-buy__top{display:none}
 .cx-pdp__grid{gap:var(--gut)} /* the photo has the same space above, below and beside it */
 .cx-pdp .cx-gallery{margin:0}
 .cx-pdp .cx-gallery__track{background:none;border:0;border-radius:0}
 .cx-pdp .cx-gallery__slide img{border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(26,20,16,.08)}
 .cx-pdp .cx-gallery__off{top:12px;left:12px}
 .cx-buy{gap:10px;padding-top:0}
 .cx-buy .cx-h1--product{font-size:26px;line-height:1.1;margin-top:0}
 .cx-buy__rating{margin-top:-6px;font-size:13px;gap:6px}
 .cx-buy__price{padding:4px 0;gap:4px 10px;align-items:center}
 .cx-buy__price>b{font-size:24px}
 .cx-buy__price s{font-size:14px}
 .cx-buy__price .cx-save{padding:3px 8px;font-size:11.5px}
 .cx-buy__price .cx-save b{font-size:inherit}
 /* Size choices: the label on the same line as its buttons */
 .cx-variants legend{float:left;width:58px;margin:0;padding-top:10px;font-size:12px}
 .cx-variants__list{gap:8px}
 .cx .cx-variant{min-height:38px;min-width:84px;padding:5px 14px;font-size:14px;border-radius:12px}
 .cx-buy [data-pdp-actions] .cx-btn{min-height:52px}
 .cx-buy>.cx-lead{order:1}
 .cx-buy>[data-pdp-actions]~*{order:2}
}

/* Blog, articles and videos (2026-10) */
.cx-blog-feature{margin-bottom:56px}
.cx-article--feature{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:32px;padding:12px}
.cx-article--feature .cx-article__media{aspect-ratio:16/11}
.cx-article--feature .cx-article__body{padding:12px 20px 12px 0;gap:14px}
.cx-article--feature .cx-article__body strong{font-size:clamp(24px,2.6vw,34px);line-height:1.15}
.cx-article--feature .cx-article__excerpt{font-size:16px;-webkit-line-clamp:4}
.cx-blog-label{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 22px}
/* Article header (restored 2026-10-13, owner): centred title, wide cover below. */
.cx-post__head{max-width:760px;padding-top:28px}
.cx-post__title{font-size:clamp(32px,4.6vw,54px);line-height:1.06;letter-spacing:-.035em;font-weight:700;margin:22px 0 16px;text-wrap:balance}
.cx .cx-post__meta{color:var(--muted);font-size:14px;margin:0}
.cx-post__cover{max-width:1240px;margin:36px auto 0}
.cx-post__cover img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:28px;background:var(--tint)}
.cx .cx-editorial-figure{max-width:900px;margin:28px auto}
.cx .cx-editorial-figure img{display:block;width:100%;height:auto;margin:0;border-radius:16px}
.cx .cx-editorial-figure figcaption{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.5}
.cx .cx-editorial-figure p{font-size:16px;line-height:1.65;margin-top:8px}
.cx-post__body{max-width:760px;padding-top:44px}
.cx-prose{font-size:18px;line-height:1.75;color:var(--ink-2)}
.cx-prose>*+*{margin-top:1.1em}
.cx-prose h2{font-size:28px;line-height:1.2;letter-spacing:-.025em;color:var(--ink);margin-top:1.8em;font-weight:700}
.cx-prose h3{font-size:22px;line-height:1.25;letter-spacing:-.02em;color:var(--ink);margin-top:1.5em;font-weight:700}
.cx-prose a{color:var(--o-600);text-decoration:underline;text-underline-offset:3px}
.cx-prose ul,.cx-prose ol{padding-left:1.3em}.cx-prose li+li{margin-top:.4em}
.cx-prose img{width:100%;height:auto;border-radius:20px;margin:1.6em 0}
.cx-prose blockquote{border-left:3px solid var(--o);padding:4px 0 4px 20px;color:var(--ink);font-weight:600}
.cx-prose table{width:100%;border-collapse:collapse;font-size:15px}.cx-prose td,.cx-prose th{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}
.cx-post__share{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:48px 0 20px;padding-top:28px;border-top:1px solid var(--line)}
.cx-post__share>span{font-weight:700;margin-right:6px}
.cx-post__share .cx-chip{display:inline-flex;align-items:center;gap:8px}
.cx-post__share svg{width:16px;height:16px}
.cx-post__ctabox{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 36px;border-radius:28px;background:var(--tint);border:1px solid var(--line)}
.cx-post__ctabox h2{font-size:26px;letter-spacing:-.025em;margin:0 0 6px}.cx-post__ctabox p{margin:0;color:var(--ink-2)}
.cx-vids{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cx-vid{margin:0;display:flex;flex-direction:column;gap:14px}
.cx-vid__frame{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:22px;overflow:hidden;background:var(--ink);cursor:pointer}
.cx-vid__frame img,.cx-vid__frame video,.cx-vid__frame iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.cx-vid__frame i{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--o);color:#fff;display:grid;place-items:center;transition:transform .4s var(--ease)}
.cx-vid__frame:hover i{transform:scale(1.08)}.cx-vid__frame i svg{width:24px;height:24px}
.cx-vid figcaption{display:flex;flex-direction:column;gap:6px;padding:0 4px}.cx-vid figcaption strong{font-size:18px;letter-spacing:-.02em}.cx-vid figcaption span{font-size:14.5px;color:var(--ink-2);line-height:1.5}
@media (max-width:1023px){.cx-vids{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.cx-article--feature{grid-template-columns:1fr;gap:14px;padding:10px 10px 22px}.cx-article--feature .cx-article__body{padding:0 8px}.cx-blog-feature{margin-bottom:36px}
 .cx-post__cover img{aspect-ratio:4/3;border-radius:20px}.cx-prose{font-size:17px}.cx-post__ctabox{flex-direction:column;align-items:flex-start;padding:26px 22px}.cx-vids{grid-template-columns:1fr}}
.cx-blog-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 28px}.cx-blog-links .cx-chip{display:inline-flex;align-items:center;gap:8px}.cx-blog-links svg{width:16px;height:16px}
.cx-vid__frame video{object-fit:contain}.cx-shop-hero+.cx-sec--flush-top .cx-vids,.cx-shop-hero+.cx-sec--flush-top .cx-empty{margin-top:12px}

/* No moving decorations (2026-10). Sections ease in as they scroll into view; hover and tap feedback stay. */
.cx *,.cx *::before,.cx *::after{animation:none!important}

/* Video player (2026-10): poster until play, spinner while buffering. The app section's picture became its video. */
.cx-player{position:relative;margin:0;overflow:hidden;background:#1a1410}
.cx-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#1a1410}
.cx-player.is-playing video{object-fit:contain}
.cx-player__wait{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;opacity:0;pointer-events:none}
.cx-player.is-playing.is-waiting .cx-player__wait{opacity:1;animation:cx-spin .8s linear infinite!important}
@keyframes cx-spin{to{transform:rotate(360deg)}}
.cx-player.is-playing .cx-video__play{display:none}
.cx-app__visual--video{aspect-ratio:4/5;width:min(480px,100%);justify-self:center;background:#f3ece4}
.cx-app__visual--video::after{display:none}
.cx-app__visual--video video{background:#f3ece4}
.cx-vid__frame.cx-player{aspect-ratio:9/16;max-width:380px}

/* No native disclosure triangles (2026-10, owner rule): the browser's ▼/▶ is hidden everywhere; a collapsible row shows a plus that turns into a minus when open. */
.cx summary{list-style:none}.cx summary::-webkit-details-marker{display:none}.cx summary::marker{content:""}

/* Hero first screen (2026-10): headline, banner, lead, buttons and the research note fit one screen on every device.
   The block is the screen height minus the header (--cx-hero-top, measured by cx.js); the banner takes what's left. */
.cx-hero:has(.cx-hero__fold){padding-top:calc(var(--cx-head,0px) + clamp(6px,1vh,16px))}
.cx-hero__fold{height:calc(100svh - var(--cx-hero-top,72px) - var(--cx-head,0px) - clamp(6px,1vh,16px));min-height:520px;max-height:1040px;gap:clamp(10px,2vh,22px);padding-bottom:clamp(14px,2.6vh,28px)}
.cx-hero__fold .cx-h1{font-size:clamp(28px,min(5.4vw,6.2vh),72px)}
.cx-hero__fold .cx-stage{flex:1 1 0;min-height:150px;width:100%;margin:0;aspect-ratio:auto;border-radius:clamp(18px,2.4vw,28px);background:#ff7a1f}
.cx-hero__fold .cx-stage__img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 55%}
.cx-hero__fold .cx-stage .cx-label{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);flex-direction:column;align-items:flex-start;gap:2px;padding:9px 13px;border-radius:14px;box-shadow:var(--shadow-lg);font-size:12.5px}
.cx-hero__fold .cx-lead{font-size:clamp(15px,min(1.6vw,2vh),19px);margin:0}
.cx-hero__fold .cx-actions{flex-wrap:wrap;justify-content:center}
.cx-hero__fold .cx-badge-line{margin:0}
/* Phones: the banner is a vertical rectangle (4:5) that fills the height left over; on short phones it gets narrower
   rather than turning square. The two buttons share one row to give it room. */
@media (max-width:599px){
 .cx-hero__fold{gap:clamp(10px,1.7vh,16px)}
 .cx-hero__fold .cx-stage{width:auto;max-width:100%;aspect-ratio:4/5;align-self:center}
 .cx-hero__fold .cx-stage__img{object-position:50% 50%}
 .cx-hero__fold .cx-lead{font-size:clamp(13px,1.7vh,15px);line-height:1.45}
 .cx-hero__fold .cx-actions{width:100%;display:flex;flex-wrap:nowrap;gap:8px}
 .cx-hero__fold .cx-actions>.cx-btn{flex:1 1 auto;min-width:0;min-height:50px;font-size:13.5px;white-space:nowrap;gap:7px}
 .cx-hero__fold .cx-actions>.cx-btn--primary{justify-content:space-between;padding:0 6px 0 16px}
 .cx-hero__fold .cx-actions>.cx-btn--primary .cx-btn__arrow{width:36px;height:36px;flex:none}
 .cx-hero__fold .cx-actions>.cx-btn--ghost{padding:0 14px}
 .cx-hero__fold .cx-badge-line{font-size:11px;line-height:1.4}
 .cx-hero__fold .cx-actions>.cx-btn{min-height:46px}
 .cx-hero__fold .cx-stage .cx-label{left:10px;bottom:10px;padding:7px 11px;border-radius:12px;font-size:11.5px}
 .cx-hero__fold .cx-stage .cx-label .cx-mono{font-size:12px}
}
/* Very narrow phones: the two buttons stack so neither label is cut. */
@media (max-width:384px){.cx-hero__fold .cx-actions{flex-direction:column}.cx-hero__fold .cx-actions>.cx-btn--primary{justify-content:center;gap:12px}}
.cx-hero__fold .cx-lead,.cx-hero__fold .cx-badge-line{text-wrap:pretty}

/* Hero: the consultation button sits on white so it reads clearly over the warm background. */
.cx .cx-hero__fold .cx-btn--ghost{background:#fff;border-color:var(--line-2)}

/* Hero trust label: one short line above the headline, as a pill. */
.cx-hero__tag{display:inline-flex;align-items:center;gap:8px;margin:0;padding:5px 14px 5px 5px;border-radius:999px;background:#fff;border:1px solid var(--line-2);box-shadow:0 6px 18px -12px rgba(26,20,16,.25);font-size:13px;font-weight:600;line-height:1.2;color:var(--ink);text-align:left}
.cx-hero__tag-icon{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--o-50);color:var(--o)}
.cx-hero__tag-icon svg{width:15px;height:15px}
.cx-hero__tag strong{color:var(--o-600)}
@media (max-width:599px){.cx-hero__tag{font-size:12px;padding:4px 12px 4px 4px}.cx-hero__tag-icon{width:24px;height:24px}}

/* Hero photo (locker shot): centred on the vial; phones zoom in so the vial and label read larger. */
.cx-hero__fold .cx-stage__img--art{object-position:50% 58%}
@media (max-width:599px){.cx-hero__fold .cx-stage__img--art{object-position:50% 64%;transform:scale(1.32);transform-origin:50% 66%}
 .cx-hero__fold .cx-stage:has(.cx-stage__img--art) .cx-label{top:10px;bottom:auto}}

/* Home: the header sits over the hero, see-through while at the top and solid once scrolled. */
html.cx-home-hero .header-section{margin-bottom:calc(-1 * var(--cx-head,60px));z-index:20}
html #header-component[data-appearance]{transition:background-color .3s ease,box-shadow .3s ease!important}
html.cx-head-top #header-component[data-appearance]{background-color:transparent!important;background:transparent!important;box-shadow:none!important;border-color:transparent!important}
html.cx-head-top #header-component[data-appearance] .header__row{background:transparent!important}
/* The text column under the banner takes the banner's width. */
.cx-hero__fold>.cx-lead,.cx-hero__fold>.cx-actions,.cx-hero__fold>.cx-badge-line{width:100%;max-width:min(var(--cx-stage-w,100%),100%)}
/* Tablet and desktop: banner and paragraph share one column, at most 880px wide. */
@media (min-width:600px){.cx-hero__fold>.cx-stage{max-width:880px}.cx-hero__fold>.cx-lead{max-width:min(880px,var(--cx-stage-w,100%))}.cx-hero__fold>.cx-actions{width:auto}}

/* Video player controls (2026-10): our own bar instead of the browser's. Hidden until the video starts; fades out
   while playing and returns on touch, hover or keys; always shown when paused. */
.cx-player:focus{outline:none}
.cx-player.is-started .cx-video__play{display:none}
.cx-player__bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:6px;padding:28px 12px 12px;
 background:linear-gradient(180deg,transparent,rgba(20,15,12,.62));color:#fff;opacity:0;transform:translateY(8px);pointer-events:none;
 transition:opacity .25s ease,transform .25s ease}
.cx-player.is-started.is-awake .cx-player__bar,.cx-player.is-started:not(.is-playing) .cx-player__bar,.cx-player.is-started:focus-within .cx-player__bar{opacity:1;transform:none;pointer-events:auto}
.cx .cx-player__btn{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;padding:0;transition:background-color .2s ease}
.cx .cx-player__btn:hover,.cx .cx-player__btn:focus-visible{background:rgba(255,255,255,.18);outline:none}
.cx-player__btn svg{width:20px;height:20px;fill:currentColor}
.cx-player__btn .cx-vi-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-v-toggle] svg:last-child,.cx-player.is-playing [data-v-toggle] svg:first-child+svg{display:none}
.cx-player:not(.is-playing) [data-v-toggle] svg:first-child{display:none}
.cx-player:not(.is-playing) [data-v-toggle] svg:last-child{display:block}
[data-v-mute] svg:last-child{display:none}
.cx-player.is-muted [data-v-mute] svg:first-child{display:none}
.cx-player.is-muted [data-v-mute] svg:last-child{display:block}
/* progress: orange played part, light buffered part, round thumb */
.cx .cx-player__seek{flex:1 1 auto;min-width:40px;width:auto;height:20px;margin:0 4px;padding:0;border:0!important;border-radius:0;box-shadow:none!important;-webkit-appearance:none;appearance:none;background:transparent!important;cursor:pointer;--p:0%;--b:0%}
.cx-player__seek::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--o) var(--p),rgba(255,255,255,.55) var(--p),rgba(255,255,255,.55) var(--b),rgba(255,255,255,.25) var(--b))}
.cx-player__seek::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--o) var(--p),rgba(255,255,255,.55) var(--p),rgba(255,255,255,.55) var(--b),rgba(255,255,255,.25) var(--b))}
.cx-player__seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .15s ease}
.cx-player__seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.cx-player__seek:active::-webkit-slider-thumb{transform:scale(1.25)}
.cx-player__seek:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}
.cx-player__time{flex:none;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.92;padding:0 2px;white-space:nowrap}
/* quality menu */
.cx-player__q{position:relative;flex:none}
.cx .cx-player__qbtn{width:auto;min-width:36px;gap:6px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;font:600 12px/1 "Plus Jakarta Sans",sans-serif;white-space:nowrap}
.cx-player__qbtn svg{width:18px;height:18px}
.cx-player__menu{position:absolute;right:0;bottom:calc(100% + 8px);min-width:128px;padding:6px;border-radius:14px;background:rgba(26,20,16,.94);box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
 opacity:0;transform:translateY(6px) scale(.98);transform-origin:100% 100%;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.cx-player.is-menu .cx-player__menu{opacity:1;transform:none;pointer-events:auto}
.cx .cx-player__menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:#fff;font:600 13px/1 "Plus Jakarta Sans",sans-serif;cursor:pointer;text-align:left}
.cx .cx-player__menu button:hover{background:rgba(255,255,255,.12)}
.cx .cx-player__menu button[aria-checked="true"]{color:var(--o)}
.cx .cx-player__menu button[aria-checked="true"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--o)}
/* "tap for sound" pill while it plays muted on its own */
.cx .cx-player__sound{position:absolute;top:12px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border:0;border-radius:999px;background:rgba(26,20,16,.78);color:#fff;font:600 13px/1 "Plus Jakarta Sans",sans-serif;cursor:pointer;transition:background-color .2s ease,opacity .25s ease}
.cx .cx-player__sound[hidden]{display:none}
.cx .cx-player__sound:hover{background:rgba(26,20,16,.88)}
.cx-player__sound svg{width:18px;height:18px;fill:currentColor}
.cx-player__sound .cx-vi-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cx-player.is-full{border-radius:0!important;background:#000}
.cx-player.is-full video{object-fit:contain}
/* Phones: one tidy row; quality shows as a gear (the menu still lists the options); smaller sound pill. */
@media (max-width:599px){
 .cx-player__bar{gap:0;padding:26px 6px 6px}
 .cx-player__time{font-size:11px;padding:0 4px}
 .cx .cx-player__btn{width:34px;height:34px}
 .cx .cx-player__qbtn{width:34px;min-width:34px;padding:0;justify-content:center}
 .cx-player__qbtn [data-v-qlabel]{display:none}
 .cx .cx-player__seek{margin:0 6px}
 .cx .cx-player__sound{top:10px;right:10px;gap:6px;padding:6px 11px 6px 8px;font-size:12px}
 .cx-player__sound svg{width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){.cx-player__bar,.cx-player__menu{transition:none}}

/* Hero buttons (2026-10): side by side only when both fit the text column, otherwise stacked full width; the arrow
   can never be pushed into the next button. Short screens (Safari with its bars) drop the small trust note, which
   repeats the pill above the headline, so the banner keeps its size. */
.cx-hero__fold .cx-actions{display:flex;flex-wrap:wrap;gap:8px}
.cx-hero__fold .cx-actions>.cx-btn{flex:1 1 auto;min-width:max-content}
@media (max-width:599px){.cx-hero__fold .cx-actions>.cx-btn--primary{justify-content:space-between}}
@media (max-height:760px) and (max-width:899px){.cx-hero__fold>.cx-badge-line{display:none}}
/* Phones: the banner always takes the full width and its height fills what is left (tall on tall phones, closer to
   square on short screens), so the text and buttons below never get squeezed into a narrow column. */
@media (max-width:599px){.cx-hero__fold>.cx-stage{width:100%;max-width:100%;aspect-ratio:auto}}

/* SEO block (2026-10): the short answer and extra questions written in the admin SEO editor */
.cx-seo-block{padding-top:clamp(28px,5vw,56px)}
.cx-seo-summary{max-width:760px;margin:0 auto 18px;font-size:17px;line-height:1.65;color:inherit}
.cx-seo-summary strong{font-weight:700}
.cx-seo-faq{max-width:760px;margin:0 auto}
.cx-seo-h{max-width:760px;margin:0 auto 14px;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1.15}
.cx-seo-block{padding-bottom:clamp(28px,5vw,56px)}
/* About and policy pages (2026-10) */
.cx-legal{max-width:720px;margin:0 auto;font-size:16.5px;line-height:1.75;color:var(--ink-2,#3a3a3a)}
.cx-legal h2{margin:2.1em 0 .55em;font-size:clamp(20px,2.2vw,24px);line-height:1.25;letter-spacing:-.01em;color:var(--ink,#111)}
.cx-legal h2:first-child{margin-top:0}
.cx-legal p,.cx-legal ul{margin:0 0 1.1em}
.cx-legal ul{padding-left:1.2em}
.cx-legal li{margin:.35em 0}
.cx-legal strong{color:var(--ink,#111)}
.cx-legal a{color:var(--brand,#f05a00);text-decoration:underline;text-underline-offset:3px}

/* Buttons, not underlined links (2026-10, owner): every text link that leads somewhere is a fully rounded button. */
.cx .cx-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:14px;line-height:1;text-decoration:none;white-space:nowrap;transition:border-color .2s,background-color .2s,color .2s,transform .2s var(--ease)}
.cx .cx-link:hover{border-color:var(--o);color:var(--o-600);background:#fff}
.cx .cx-link:active{transform:scale(.97)}
.cx .cx-link svg{width:16px;height:16px;flex:none}
.cx-more .cx-btn{flex:0 0 auto;align-self:center}

/* Shopify-store banner (2026-10): products right of centre on the wide shot, at the top on the tall phone shot. */
.cx-stage picture{display:contents}
.cx .cx-stage .cx-stage__img--ribbon{object-position:66% 50%;transform:none}
@media (max-width:599px){.cx .cx-stage .cx-stage__img--ribbon{object-position:50% 34%}}

/* Page headers (2026-10, owner): no breadcrumb, headline the size of the home banner headline, tighter spacing, so the
   products, studies or articles start within the first screen on a phone. */
.cx .cx-h1--page{font-size:clamp(28px,min(5.4vw,6.2vh),72px)}
.cx-shop-hero{padding:28px 0 4px}
.cx-shop-hero .cx-head .cx-sub{margin-top:10px}
@media (max-width:640px){
 .cx-shop-hero{padding:16px 0 0}
 .cx-shop-hero .cx-h1{margin-bottom:8px}
 .cx-shop-hero .cx-sub{font-size:14.5px;line-height:1.55;margin-top:6px}
 .cx-sec--shop,.cx-shop-hero+.cx-sec{padding-top:18px}
 .cx-blog-links{margin:14px 0 12px}
}

/* Compact rhythm (2026-10, owner): one spacing system on every page, section headings at the banner headline size,
   every section button centered. */
.cx .cx-sec{padding:64px 0}
.cx .cx-head{margin-bottom:28px}
.cx .cx-head .cx-sub{margin-top:12px}
.cx .cx-h2{font-size:clamp(28px,min(5.4vw,6.2vh),72px);line-height:1.04;letter-spacing:-.04em}
.cx .cx-more{margin-top:24px;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.cx .cx-rail{padding-bottom:40px;margin-bottom:-32px}
.cx .cx-toolbar{margin-bottom:16px}
.cx-more--rail .cx-square{flex:none}
.cx-lab__sheet .cx-btn,.cx-news__form .cx-btn{align-self:center}
.cx-trust__copy,.cx-app__side>.cx-reveal{text-align:center}
.cx-app__side>.cx-reveal{display:flex;justify-content:center}
.cx-coa .cx-btn__arrow{background:var(--o);color:#fff}
.cx .cx-btn.is-added .cx-btn__arrow{color:#fff}
@media (max-width:767px){
 .cx .cx-sec{padding:44px 0}
 .cx .cx-head{margin-bottom:20px}
 .cx .cx-more{margin-top:18px}
 .cx-more--rail .cx-square{display:none}
 .cx-app{gap:22px}
}
/* Silent app loop */
.cx-loop{margin:0}
.cx-loop video{display:block;width:100%;height:100%;object-fit:cover}
/* Page headers lead straight into the content (collection, research, blog) */
.cx .cx-shop-hero{padding-bottom:0}
.cx .cx-shop-hero .cx-head{margin-bottom:0}
.cx .cx-shop-hero+.cx-sec{padding-top:24px}
@media (max-width:767px){.cx .cx-shop-hero+.cx-sec{padding-top:16px}}
/* Standalone buttons sit on the centre line of their column */
.cx-lab__sheet .cx-btn,.cx-video__copy .cx-btn,.cx-faq__help .cx-btn,.cx-post__ctabox .cx-btn,.cx-cta__side .cx-btn,.cx-trust__copy .cx-btn{display:flex;width:fit-content;margin-inline:auto}
.cx-cta__side{align-items:center;text-align:center}
.cx-faq__help{text-align:center}
.cx-video__copy .cx-score--left{justify-content:center}
/* 8px rhythm (2026-10): sections 48/32, heading to content 24/16, card gaps 20/12, list rows 16. */
.cx .cx-sec{padding:48px 0}
.cx .cx-head{margin-bottom:24px}
.cx .cx-head .cx-sub{margin-top:8px}
.cx .cx-more{margin-top:20px}
.cx .cx-list li{padding:16px 0;gap:16px}
.cx-lab__sheet{gap:16px;padding:24px}
.cx .cx-app{gap:40px}
@media (max-width:767px){
 .cx .cx-sec{padding:32px 0}
 .cx .cx-head{margin-bottom:16px}
 .cx .cx-more{margin-top:16px}
 .cx .cx-h2{font-size:26px}
 .cx .cx-sub{font-size:15px;line-height:1.55}
 .cx .cx-rail{gap:12px}
 .cx .cx-app{gap:16px}
 .cx .cx-shop-hero{padding-top:12px}
 .cx .cx-shop-hero+.cx-sec{padding-top:12px}
}

/* Every button on the centre line (2026-10, owner): links inside cards centre in their card, section buttons sit
   under the section, the consultation banner and COA card are one centered column. */
.cx .cx-link{display:flex;width:fit-content;margin-inline:auto}
.cx .cx-cta{grid-template-columns:1fr;gap:20px;text-align:center;justify-items:center;align-items:center}
.cx .cx-cta__side{align-items:center}
.cx .cx-coa{grid-template-columns:1fr;gap:24px;justify-items:center;text-align:center}
.cx .cx-coa__copy .cx-btn{display:flex;width:fit-content;margin-inline:auto}
.cx .cx-coa__label{transform:rotate(-2deg)}
.cx-lab--solo .cx-lab__sheet{margin-inline:auto;max-width:720px}
.cx .cx-score--left{justify-content:center}
.cx-video__copy{text-align:center}.cx-video__copy .cx-video__tag{justify-content:center}
.cx-trust__copy .cx-tag{margin-inline:auto}
.cx .cx-list{text-align:left}
.cx-faq>.cx-more{grid-column:1/-1}
/* Product cards (2026-10): the price sits right under the tag instead of being pushed to the card's bottom */
.cx .cx-product__body{padding:14px 16px 16px;gap:4px}
.cx .cx-product__row{margin-top:8px;padding-top:0}
/* Category tags stay on one line so every card in a row is the same height */
.cx .cx-product__cat{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:18px}
@media (max-width:767px){.cx .cx-product__body{padding:12px 12px 12px}}

/* Header (2026-10, owner): see-through at the top of every page, solid once scrolled. */
html:not(.cx-head-top) #header-component[data-appearance]{background:#fff!important;box-shadow:none!important}
/* Phone menu slides in from the right */
.menu-drawer{left:auto!important;right:0!important;transform:translateX(100%)!important}
.menu-open>.menu-drawer{transform:translateX(0)!important}
@keyframes menu-drawer-nav-open{0%{visibility:hidden;opacity:0;transform:translateX(.5rem)}100%{visibility:visible;opacity:1;transform:translateX(0)}}
/* Hero rating on phones: one slim row along the bottom, clear of the vial */
@media (max-width:599px){
 /* Phone banner (2026-10): the photo is pinned to its top so the pens never lose their caps whatever the screen height;
    the rating is a compact box at the bottom left, narrow enough to stay clear of the vial in the middle. */
 .cx .cx-stage .cx-stage__img--ribbon{object-position:50% 0}
 .cx-hero__fold .cx-stage .cx-label{left:10px;right:auto;bottom:10px;max-width:37%;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 10px;border-radius:12px;box-shadow:0 8px 20px -12px rgba(26,20,16,.35)}
 .cx-hero__fold .cx-stage .cx-label .cx-mono{font-size:11px;gap:4px;white-space:nowrap}
 .cx-hero__fold .cx-stage .cx-label .cx-mono svg,.cx-hero__fold .cx-stage .cx-label .cx-stars svg{width:10px;height:10px}
 .cx-hero__fold .cx-stage .cx-label>span:last-child{font-size:10.5px;line-height:1.3}
}
/* No sticky bottom bars */
.cx-dock,.cx-buybar{display:none!important}
/* Button labels centered (2026-10, owner): text and arrow sit together in the middle of every button, the same way the
   icon and label do on "Konsultasi gratis". */
.cx .cx-btn--primary,.cx .cx-buy__actions .cx-btn--primary,.cx .cx-exit__actions .cx-btn--primary,.cx .cx-kb-buy .cx-btn,.cx-hero__fold .cx-actions>.cx-btn--primary{justify-content:center;gap:10px;padding:0 20px}
.cx .cx-btn--primary .cx-btn__arrow{position:static;width:30px;height:30px;transform:none;margin:0}
.cx .cx-btn--primary>span{flex:0 1 auto;text-align:center}
.cx .cx-btn.cx-btn--primary{padding:0 20px}

/* Buttons carry an icon before the label (cart, WhatsApp, flask, document), no arrow circle (2026-10, owner) */
.cx .cx-btn.cx-btn--primary{justify-content:center;gap:9px;padding:0 20px}
.cx .cx-btn--primary>svg{width:18px;height:18px;flex:none}
.cx .cx-btn--ghost>svg{width:18px;height:18px;flex:none}
.cx .cx-btn.is-added>svg{color:#15803d}
/* Consultation banner: copy and paragraph centered on desktop too */
.cx .cx-cta__copy{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:760px}
.cx .cx-cta .cx-sub{margin-inline:auto}

.cx .cx-sec--bare{padding-top:16px}
@media (max-width:767px){.cx .cx-sec--bare{padding-top:10px}}

.cx-exit__backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(26,20,16,.55)}
@media (max-width:767px){.cx-format__body{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,.96)!important}.cx-filters{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* Outline of the next page, shown the instant a link is tapped (navigation.js) */
.cx-shell{min-height:100vh}
.cx-skel{padding:24px 20px 60px;display:flex;flex-direction:column;gap:14px}
.cx-skel i{display:block;border-radius:10px;background:linear-gradient(90deg,#efeae4 25%,#f7f3ee 50%,#efeae4 75%);background-size:400% 100%;animation:cx-skel 1.1s linear infinite!important}
@keyframes cx-skel{from{background-position:100% 0}to{background-position:0 0}}
.cx-skel__img{aspect-ratio:1;border-radius:24px;overflow:hidden;background:#f3ece4}
.cx-skel__img img{width:100%;height:100%;object-fit:cover;display:block}
.cx-skel__title{font-size:28px;line-height:1.1;letter-spacing:-.03em;font-weight:700;margin:6px 0 0;color:var(--ink)}
.cx-skel__price{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.cx-skel__line{height:16px;width:100%}
.cx-skel__line--short{width:62%}
.cx-skel__line--title{height:34px;width:70%;border-radius:12px}
.cx-skel__btn{height:52px;border-radius:999px;background:#ffd1ad!important;animation:none!important}
.cx-skel__btn--ghost{background:#f3ece4!important}
.cx-skel__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cx-skel__card{aspect-ratio:3/4.4;border-radius:20px}
@media (min-width:768px){.cx-skel--product{display:grid;grid-template-columns:1fr 1fr;gap:16px 48px;align-items:start;padding-top:40px}.cx-skel--product .cx-skel__img{grid-row:1/8}.cx-skel__grid{grid-template-columns:repeat(4,1fr)}}
/* The real page crossfades over the outline */
::view-transition-old(root),::view-transition-new(root){animation-duration:.14s}

/* Smoother page changes (2026-10, owner): the outline matches the product page's layout so the photo stays put, the
   real page crossfades in, a thin progress line runs while it loads, and a tapped card dips. */
.cx-skel{padding:20px 20px 60px}
.cx-skel__img{border-radius:28px;border:1px solid var(--line);box-shadow:var(--shadow)}
.cx-skel__title{font-size:clamp(28px,4.6vw,38px);margin:12px 0 0}
main.cx-shell{animation:cx-shell-in .18s ease both}
@keyframes cx-shell-in{from{opacity:.4}to{opacity:1}}
.cx-skel__img img,.cx-gallery__slide:first-child img[data-pdp-img]{view-transition-name:pdp-photo}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s;animation-timing-function:ease}
::view-transition-old(pdp-photo),::view-transition-new(pdp-photo){animation-duration:.22s;mix-blend-mode:normal}
.cx-prog{position:fixed;left:0;top:0;z-index:2147483000;height:2px;width:0;background:var(--o);border-radius:0 2px 2px 0;box-shadow:0 0 8px rgba(255,102,0,.6);transition:width 1.2s cubic-bezier(.1,.6,.2,1),opacity .25s;pointer-events:none}
.cx-prog.is-on{width:82%}
.cx-prog.is-done{width:100%;opacity:0;transition:width .15s ease,opacity .25s .1s}
.cx-product,.cx-kb-card,.cx-post-card{transition:transform .12s ease,box-shadow .45s var(--ease),border-color .3s}
.cx-kb-card:active,.cx-post-card:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.cx-product:active,.cx-kb-card:active{transform:none}main.cx-shell{animation:none}}

/* Photos arrive over their own colours (2026-10, owner): the box is painted first, the photo fades in */
.cx-product__media,.cx-gallery__slide,.cx-skel__img{background:var(--tint,#f3ece4)}
img.cx-fade{opacity:0;transition:opacity .4s ease,transform .7s var(--ease)}
img.cx-fade.is-in{opacity:1}
.cx-gallery__slide img.cx-fade{transition:opacity .4s ease,transform 1.2s var(--ease)}
/* The painted boxes keep the photo's rounded corners */
.cx-pdp .cx-gallery__slide{border-radius:22px;overflow:hidden}
.cx-product__media{border-radius:22px 22px 0 0}
.cx-skel__img{border-radius:22px}
/* Price block: the separator lines get room above and below (2026-10, owner) */
@media (max-width:767px){.cx-pdp .cx-buy__price{padding:14px 0!important;margin:10px 0 6px}}
.cx-pdp .cx-buy__price{margin-inline:0}
/* The whole product card opens the product (2026-10, owner): the title link stretches over the card; the add button stays on top */
.cx-product{position:relative}
.cx-product__title a::after{content:'';position:absolute;inset:0;z-index:1}
.cx-product .cx-add,.cx-product .cx-product__off{position:relative;z-index:2}
.cx-product .cx-add{z-index:2}
/* Short phones (2026-10): the banner keeps the photo's full height instead of squeezing into the first screen, so the
   pens and vial are never cut; the lead and buttons simply start a little below the fold there. */
@media (max-width:599px){.cx-hero__fold .cx-stage{min-height:calc(var(--cx-stage-w,100vw) * 1.1)}}

/* 2026-10 UI audit: contrast and control sizes */
.cx-wall__nav [data-wall-pause]{margin-right:auto;width:auto;padding:0 16px;gap:8px;font:600 13px/1 "Plus Jakarta Sans",sans-serif}
.cx-wall__nav [data-wall-pause] svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* Phone menu in the storefront's own language: Plus Jakarta Sans, hairlines, pill buttons, warm paper. */
.menu-drawer{--line:rgba(26,20,16,.09);--line-2:rgba(26,20,16,.14);--ink:#1a1410;--ink-2:#4d453f;--muted:#6f665d;--o:#ff6600;--o-600:#e65c00;background:#fcfaf7!important;font-family:"Plus Jakarta Sans",sans-serif}
.menu-drawer .menu-drawer__close-button{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;flex:none;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink);margin:12px 0 0 20px}
.menu-drawer .menu-drawer__close-button svg{width:16px;height:16px}
.menu-drawer .menu-drawer__navigation{padding-top:16px}
.menu-drawer .menu-drawer__menu{padding:0 20px!important}
.menu-drawer .menu-drawer__list-item--divider{border-block-end:0}
.menu-drawer .menu-drawer__menu-item--mainlist{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0!important;font:600 21px/1.2 "Plus Jakarta Sans",sans-serif;letter-spacing:-.01em;color:var(--ink)}
.menu-drawer .menu-drawer__menu-item--mainlist svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.menu-drawer .cx-menu__toggle{width:100%;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit}
.menu-drawer .cx-menu__toggle svg{transform:rotate(90deg);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.menu-drawer .cx-menu__group.is-open .cx-menu__toggle svg{transform:rotate(-90deg)}
.menu-drawer .cx-menu__fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.menu-drawer .cx-menu__group.is-open .cx-menu__fold{grid-template-rows:1fr}
.menu-drawer .cx-menu__fold>ul{min-height:0;overflow:hidden}
.menu-drawer .cx-menu__sub{list-style:none;margin:0;padding:0 0 0 14px;width:100%}
.menu-drawer .cx-menu__sub li:last-child{padding-bottom:6px!important}
.menu-drawer .cx-menu__sub .menu-drawer__list-item--divider{border:0;margin:0!important;padding:0!important}
.menu-drawer .cx-menu__sub .menu-drawer__menu-item--mainlist{min-height:44px;font-size:15.5px;font-weight:500;color:var(--ink-2)}
.menu-drawer .cx-menu__sub .menu-drawer__menu-item--mainlist svg{display:none}
@media (prefers-reduced-motion:reduce){.menu-drawer .cx-menu__fold,.menu-drawer .cx-menu__toggle svg{transition:none}}
.menu-drawer .cx-menu__actions{display:grid;gap:10px;padding:26px 0 8px;border:0}
.menu-drawer .cx-menu__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 20px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--ink);font:600 15px/1 "Plus Jakarta Sans",sans-serif;text-decoration:none;transition:background-color .25s,border-color .25s}
.menu-drawer .cx-menu__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-drawer .cx-menu__btn--primary{background:var(--o);border-color:var(--o);color:#fff}
.menu-drawer .menu-drawer__utility-links{position:absolute;top:14px;right:20px;padding:0;margin:0;display:flex;align-items:center}
.menu-drawer .menu-drawer__utility-links .language-selector{padding:0!important;margin:0!important}
.menu-drawer .menu-drawer__localization,.menu-drawer .menu-drawer__localization *{background:transparent!important}
/* Hero rating box: text reads from the left (2026-10, owner) */
.cx-label,.cx-label>span{text-align:left}
/* Phones (2026-10, owner): the first screen is about one screen tall, not squeezed to fit exactly. The banner keeps its
   4:5 shape at full width and the rest follows at its natural size. */
@media (max-width:599px){
 .cx-hero__fold{height:auto;min-height:0;max-height:none}
 .cx-hero__fold .cx-stage{flex:none;width:100%;max-width:100%;aspect-ratio:4/5;min-height:0;align-self:stretch}
}

/* A card's shadow is not cropped by its scrolling row (2026-10, owner) */
.cx .cx-rail{padding-top:12px;margin-top:-12px}
@media (max-width:767px){.cx .cx-rail{padding-bottom:36px;margin-bottom:-28px}}

/* One spacing scale for the whole storefront (2026-10, owner). Section gaps, heading gaps, grid gaps and card padding come
   from these four values per screen size; the older per-section numbers above are superseded by this block.
   --sec is the distance between two sections: each section pads half of it, so neighbours add up to --sec exactly. */
.cx{--sec:80px;--sec-after-hero:40px;--head-gap:32px;--grid-gap:24px;--card-pad:24px}
@media (max-width:1023px){.cx{--sec:64px;--sec-after-hero:32px;--head-gap:28px;--grid-gap:20px;--card-pad:20px}}
@media (max-width:767px){.cx{--sec:48px;--sec-after-hero:24px;--head-gap:24px;--grid-gap:12px;--card-pad:16px}}
.cx .cx-sec{padding:calc(var(--sec) / 2) 0}
.cx .cx-sec--flush{padding:calc(var(--sec) / 4) 0}
.cx .cx-hero+.cx-sec,.cx .cx-shop-hero+.cx-sec,.cx .cx-sec--bare,.cx .cx-sec--flush-top{padding-top:var(--sec-after-hero)}
.cx .cx-sec:last-of-type,.cx .cx-sec--last{padding-bottom:var(--sec)}
.cx .cx-head{margin-bottom:var(--head-gap)}
.cx .cx-grid,.cx .cx-articles{gap:var(--grid-gap)}
.cx .cx-rail{gap:var(--grid-gap)}
.cx .cx-product__body{padding:var(--card-pad)}
.cx .cx-pdp{padding-bottom:calc(var(--sec) / 2)}
.cx .cx-pdp+.cx-sec{padding-top:calc(var(--sec) / 2)}
/* Search field matches the category chips (42px) and sits right under the header on phones. */
.cx .cx-search{height:42px;padding:0 14px;gap:8px}.cx .cx-search svg{font-size:17px}.cx .cx-search input{font-size:14.5px}
@media (max-width:767px){.cx .cx-sec--shop{padding-top:6px}.cx .cx-sec--shop .cx-filters{padding-top:2px;gap:10px}}
/* Header: fully see-through at the top of every page (the theme's white underlay included); once scrolled it takes the
   page's warm background with a light blur instead of flat white. */
html.cx-head-top #header-component .header__underlay-closed{opacity:0}
#header-component .header__underlay-closed{transition:opacity .35s ease,height var(--animation-speed-slow) var(--ease-out-cubic)}
html:not(.cx-head-top) #header-component[data-appearance]{background:rgba(252,250,247,.97)!important}
/* No backdrop blur on the header: iOS Safari leaves a hard edge where a blurred layer ends after a page swap. */
#header-component,#header-component *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html:not(.cx-head-top) #header-component .header__underlay-closed{opacity:0}
/* Category pages: crumbs, title and intro read as one left-aligned block above the search. */
.cx .cx-sec--shop .cx-crumbs{margin-bottom:14px}
.cx .cx-sec--shop .cx-head--left{align-items:flex-start;text-align:left;max-width:64ch;margin-bottom:var(--head-gap)}
.cx .cx-sec--shop .cx-head--left .cx-h1{margin:0 0 10px;letter-spacing:-.02em}
.cx .cx-sec--shop .cx-head--left .cx-sub{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)}
@media (max-width:767px){.cx .cx-sec--shop .cx-crumbs{margin-bottom:10px}.cx .cx-sec--shop .cx-head--left{margin-bottom:20px}.cx .cx-sec--shop .cx-head--left .cx-h1{font-size:28px;line-height:1.1;margin-bottom:8px}.cx .cx-sec--shop .cx-head--left .cx-sub{font-size:14.5px}}
/* Buttons do not change on hover (owner, 2026-10). */
.menu-drawer .cx-menu__btn:hover,.menu-drawer .cx-menu__btn:focus-visible{color:var(--ink)!important;background:#fff!important;border-color:var(--line-2)!important}
.menu-drawer .cx-menu__btn--primary:hover,.menu-drawer .cx-menu__btn--primary:focus-visible{background:var(--o)!important;border-color:var(--o)!important;color:#fff!important}
.menu-drawer .menu-drawer__menu-item--mainlist:hover{color:var(--ink)}
/* iPhone: tapping a card, button, chip or menu row shows no grey flash and never selects its text. Body copy stays selectable. */
.cx a,.cx button,.cx summary,.cx label,.menu-drawer a,.menu-drawer button,header-component a,header-component summary,.cx-dock a{-webkit-tap-highlight-color:transparent}
.cx-product,.cx-product *,.cx .cx-btn,.cx .cx-chip,.cx .cx-add,.cx .cx-square,.cx-qa summary,.cx-acc summary,.cx-vs__row summary,.cx-kb-card,.cx-post-card,.cx-rail,.cx-wall,.menu-drawer .menu-drawer__menu,.cx-menu__btn,.cx-dock{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Menu rows: descenders are not clipped; text colour never changes on hover, focus or press. */
.menu-drawer .menu-drawer__menu-item-text{overflow:visible;line-height:1.3}
.menu-drawer .menu-drawer__menu-item--mainlist,.menu-drawer .menu-drawer__menu-item--mainlist:hover,.menu-drawer .menu-drawer__menu-item--mainlist:focus,.menu-drawer .menu-drawer__menu-item--mainlist:active,.menu-drawer .menu-drawer__menu-item--mainlist *{color:var(--ink)!important}
.menu-drawer .cx-menu__sub .menu-drawer__menu-item--mainlist,.menu-drawer .cx-menu__sub .menu-drawer__menu-item--mainlist *{color:var(--ink-2)!important}
.menu-drawer .cx-menu__btn,.menu-drawer .cx-menu__btn:hover,.menu-drawer .cx-menu__btn:focus,.menu-drawer .cx-menu__btn:active,.menu-drawer .cx-menu__btn *{color:var(--ink)!important}
.menu-drawer .cx-menu__btn--primary,.menu-drawer .cx-menu__btn--primary:hover,.menu-drawer .cx-menu__btn--primary:focus,.menu-drawer .cx-menu__btn--primary:active,.menu-drawer .cx-menu__btn--primary *{color:#fff!important}
/* The theme draws a dark hairline under the header row on phones (its mobile border width); the see-through header has none. */
#header-component .header__row,#header-component .header__row .header__columns{border-bottom:0!important}
/* Phones: no pinch or double-tap zoom, and every field is 16px so iOS does not zoom in on focus. */
html,body{touch-action:pan-x pan-y}
@media (max-width:767px){.cx input,.cx select,.cx textarea,.cx .cx-search input,.cx-news input,.wa-popup-modal__phone-input,input[type="tel"],input[type="email"],input[type="text"],input[type="search"],select,textarea{font-size:16px!important}}
/* No line or shadow under the header in any state (owner, 2026-10). */
#header-component,#header-component[data-appearance],#header-component .header__row,#header-component .header__underlay{box-shadow:none!important;border:0!important}
/* Only the page and the product photo take part in page-swap transitions; the theme's sticky header must not be captured
   as its own layer (iOS Safari left that layer on screen as a line under the header until the next reload). */
#header-component,.header[data-sticky-state],.header[data-sticky-state='active']{view-transition-name:none!important}
/* Header is always the page colour (same as the section below it), and paints a 2px strip of that colour under its
   bottom edge so nothing can show at the seam (owner, 2026-10). */
html #header-component[data-appearance],html.cx-head-top #header-component[data-appearance],html:not(.cx-head-top) #header-component[data-appearance]{background:#fcfaf7!important;box-shadow:0 2px 0 #fcfaf7!important}
html #header-component .header__underlay-closed{opacity:0}
/* Landing pages (city pages and guides, unlisted): readable prose, tables that scroll on phones, calculator. */
.cx .cx-land{max-width:760px}
.cx .cx-land__hero .cx-head{max-width:760px}
.cx .cx-land__lead{font-size:17px;line-height:1.65;color:var(--ink-2);margin-top:12px}
.cx .cx-land__meta{margin-top:10px;font-size:13px;color:var(--muted)}
.cx .cx-land__actions{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}
.cx .cx-land__h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:14px;text-align:left}
.cx .cx-land p,.cx .cx-land li{font-size:16px;line-height:1.7;color:var(--ink-2)}
.cx .cx-land p+p{margin-top:12px}
.cx .cx-land ul,.cx .cx-land ol{margin:10px 0 12px;padding-left:22px;display:grid;gap:6px}
.cx .cx-land a:not(.cx-btn):not(.cx-chip){color:var(--o-600);text-decoration:underline;text-underline-offset:2px}
.cx .cx-land h3{font-size:17px;font-weight:600;margin:22px 0 8px}
.cx .cx-land table{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cx .cx-land th,.cx .cx-land td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cx .cx-land th{font-weight:600;background:var(--o-50,#fff5ec);color:var(--ink)}
.cx .cx-land__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
.cx .cx-land__scroll table{min-width:560px}
.cx .cx-land__figure{margin:0;border-radius:var(--r);overflow:hidden;max-width:960px;background:#f6efe8}
.cx .cx-land__figure img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover}
.cx .cx-land__chips{display:flex;flex-wrap:wrap;gap:8px}
.cx .cx-land__chips .cx-chip{text-decoration:none}
.cx .cx-land__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){.cx .cx-land__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cx .cx-calc{margin:16px 0;padding:18px;border:1px solid var(--line-2);border-radius:16px;background:#fff}
.cx .cx-calc__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cx .cx-calc label{display:grid;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.cx .cx-calc input{height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:10px;font:500 16px "Plus Jakarta Sans",sans-serif;background:#fcfaf7}
.cx .cx-calc__out{margin-top:14px;display:grid;gap:4px}
.cx .cx-calc__out strong{color:var(--ink)}
@media (max-width:767px){.cx .cx-calc__row{grid-template-columns:1fr}.cx .cx-land__lead{font-size:16px}}
.cx .cx-land__hero .cx-crumbs{justify-content:flex-start;margin-bottom:14px}
.cx .cx-land__hero .cx-head--left{align-items:flex-start;text-align:left;margin-bottom:0}
.cx .cx-land__hero .cx-land__lead{text-align:left}
.cx .cx-land__hero .cx-land__actions{justify-content:flex-start}
@media (max-width:767px){.cx .cx-land__hero .cx-land__actions .cx-btn{flex:1 1 100%}.cx .cx-land__figure img{max-height:300px}}
.cx .cx-land th,.cx .cx-land td{line-height:1.35;height:auto}
@media (max-width:767px){.cx .cx-land__scroll table{min-width:0}.cx .cx-land th,.cx .cx-land td{padding:8px;font-size:13.5px}.cx .cx-land__scroll th:nth-child(5),.cx .cx-land__scroll td:nth-child(5){display:none}}
/* Rewritten blog posts: tables, sources and FAQ in the article body. */
.cx .cx-prose h3{font-size:18px;font-weight:600;margin:20px 0 6px}
.cx .cx-prose table{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;border:1px solid var(--line);margin:8px 0}
.cx .cx-prose th,.cx .cx-prose td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.4}
.cx .cx-prose th{background:var(--o-50,#fff5ec);font-weight:600}
.cx .cx-prose .cx-land__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:767px){.cx .cx-prose .cx-land__scroll table{min-width:520px}}
.cx .cx-post__cover img{max-height:440px;width:100%;object-fit:cover;border-radius:var(--r)}
/* Category guide, product sources, contact card (2026-10 content pass). */
.cx .cx-catguide{display:grid;gap:20px;margin-top:48px}
.cx .cx-catguide__block{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.cx .cx-catguide__block .cx-h2{font-size:clamp(20px,2.2vw,26px);text-align:left;margin-bottom:12px}
.cx .cx-catguide__block ul{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ink-2);line-height:1.6}
.cx .cx-catguide__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cx .cx-catguide table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.cx .cx-catguide th,.cx .cx-catguide td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
.cx .cx-catguide th{background:var(--o-50,#fff5ec);font-weight:600}
.cx .cx-catguide a{color:var(--o-600);text-decoration:underline;text-underline-offset:2px}
@media (max-width:767px){.cx .cx-catguide__block{padding:18px}.cx .cx-catguide{margin-top:32px}}
/* Landing pages v2 (2026-10 redesign): hero with photo, fact cards, card grid, two-column FAQ, phone dock. */
.cx .cx-lhero{padding:20px 0 8px}
.cx .cx-lhero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.cx .cx-lhero__text .cx-crumbs{justify-content:flex-start;margin-bottom:16px}
.cx .cx-lhero__eyebrow{display:inline-block;margin:0 0 10px;padding:5px 10px;border-radius:999px;background:var(--o-50,#fff5ec);color:var(--o-600);font-size:12.5px;font-weight:600;letter-spacing:.02em}
.cx .cx-lhero__title{margin:0 0 14px;text-align:left;font-size:clamp(32px,4.4vw,56px);line-height:1.05}
.cx .cx-lhero__lead{margin:0 0 18px;font-size:17px;line-height:1.65;color:var(--ink-2);max-width:60ch}
.cx .cx-lhero__chips{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cx .cx-lhero__chips li{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--ink)}
.cx .cx-lhero__chips svg{width:15px;height:15px;color:var(--o-600);fill:none;stroke:currentColor;stroke-width:2}
.cx .cx-lhero__actions{display:flex;flex-wrap:wrap;gap:10px}
.cx .cx-lhero__meta{margin:14px 0 0;font-size:13px;color:var(--muted)}
.cx .cx-lhero__media{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/5;max-height:560px;background:#f3ebe3}
.cx .cx-lhero__media img{width:100%;height:100%;object-fit:cover;display:block}
.cx .cx-lfacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cx .cx-lfact{display:grid;gap:4px;padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.cx .cx-lfact__ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--o-50,#fff5ec);color:var(--o-600);margin-bottom:6px}
.cx .cx-lfact__ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.cx .cx-lfact small{font-size:12.5px;color:var(--muted)}
.cx .cx-lfact strong{font-size:15.5px;line-height:1.35;color:var(--ink)}
.cx .cx-lgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cx .cx-lcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;max-width:none}
.cx .cx-lcard--wide{grid-column:1/-1}
.cx .cx-lcard__h{font-size:clamp(19px,2vw,23px);line-height:1.25;margin:0 0 12px;letter-spacing:-.01em}
.cx .cx-lcard ol{counter-reset:st;list-style:none;padding:0;display:grid;gap:10px}
.cx .cx-lcard ol li{counter-increment:st;position:relative;padding:12px 14px 12px 50px;border-radius:14px;background:var(--bg,#fcfaf7)}
.cx .cx-lcard ol li::before{content:counter(st);position:absolute;left:14px;top:11px;width:24px;height:24px;border-radius:50%;background:var(--o);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
.cx .cx-lcard ul{padding-left:20px}
.cx .cx-lcard .cx-land__chips{margin:8px 0}
.cx .cx-lcard .cx-chip{cursor:default}
.cx .cx-lfaq{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.cx .cx-lfaq__side{position:sticky;top:110px}
.cx .cx-lfaq__side .cx-h2{text-align:left;margin-bottom:10px}
.cx .cx-lfaq__side p{color:var(--ink-2);margin:0 0 16px}
.cx .cx-ldock{display:none}
@media (max-width:1023px){.cx .cx-lfacts{grid-template-columns:repeat(2,minmax(0,1fr))}.cx .cx-lhero__grid{gap:28px}}
@media (max-width:767px){
 .cx .cx-lhero{padding-top:8px}.cx .cx-lhero__grid{grid-template-columns:1fr;gap:20px}
 .cx .cx-lhero__media{aspect-ratio:1;max-height:380px}
 .cx .cx-lhero__lead{font-size:16px}
 .cx .cx-lhero__actions .cx-btn{flex:1 1 100%}
 .cx .cx-lgrid{grid-template-columns:1fr;gap:12px}.cx .cx-lcard{padding:20px;border-radius:18px}
 .cx .cx-lfacts{gap:10px}.cx .cx-lfact{padding:14px}
 .cx .cx-lfaq{grid-template-columns:1fr;gap:20px}.cx .cx-lfaq__side{position:static}
 .cx .cx-ldock{display:block;position:fixed;left:16px;right:16px;bottom:14px;z-index:30;transform:translateY(140%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
 .cx .cx-ldock.is-on{transform:none}.cx .cx-ldock .cx-btn{width:100%;box-shadow:0 12px 30px -12px rgba(230,92,0,.6)}
}
.cx-page-landing .cx-head--left{align-items:flex-start;text-align:left}
.cx-page-landing .cx-head--left .cx-h2{text-align:left;font-size:clamp(24px,3vw,36px)}

.cx-pdp-knowledge{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.cx-pdp-knowledge--single{grid-template-columns:minmax(0,1fr);max-width:840px;margin:auto}
.cx .cx-pdp-spec,.cx .cx-pdp-sources{min-width:0;margin:0;padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
.cx .cx-pdp-knowledge__title{display:flex;align-items:center;gap:12px;font-size:22px;line-height:1.3;font-weight:650;letter-spacing:-.025em;margin:0 0 22px}
.cx-pdp-knowledge__icon{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:var(--o-50);color:var(--o)}
.cx-pdp-knowledge__icon svg{width:21px;height:21px}
.cx-pdp-spec table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.65}
.cx-pdp-spec th,.cx-pdp-spec td{text-align:left;padding:16px 0;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.cx-pdp-spec th{width:28%;padding-right:20px;font-weight:600;color:var(--ink)}
.cx-pdp-spec td{color:var(--ink-2)}
.cx-pdp-spec tr:first-child th,.cx-pdp-spec tr:first-child td{padding-top:0}
.cx-pdp-spec tr:last-child th,.cx-pdp-spec tr:last-child td{border:0;padding-bottom:0}
.cx .cx-pdp-sources ul{display:grid;gap:0;margin:0;padding:0;list-style:none}
.cx .cx-pdp-sources li{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.cx .cx-pdp-sources li:first-child{padding-top:0}
.cx .cx-pdp-sources li:last-child{border-bottom:0}
.cx .cx-pdp-sources li>div{min-width:0;flex:1}
.cx .cx-pdp-sources__number{font-size:12px;line-height:24px;font-weight:600;color:var(--o-600)}
.cx .cx-pdp-sources li a{display:inline-flex;gap:8px;align-items:center;font-size:15px;line-height:1.6;font-weight:600;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.cx .cx-pdp-sources li a:hover{color:var(--o-600)}
.cx .cx-pdp-sources li a:focus-visible{outline:2px solid var(--o);outline-offset:4px;border-radius:4px}
.cx .cx-pdp-sources li a svg{width:16px;height:16px;color:var(--o)}
.cx .cx-pdp-sources__evidence{display:block;margin-top:5px;color:var(--muted);font-size:13px;line-height:1.5}
.cx .cx-pdp-sources__date{margin:14px 0 24px;font-size:12.5px;color:var(--muted)}
.cx .cx-pdp-sources{display:flex;flex-direction:column}.cx .cx-pdp-sources__more{display:flex;justify-content:space-between;gap:12px;margin-top:auto;font-size:14px;white-space:normal;text-align:left;text-decoration:none;color:var(--ink)}
@media(max-width:899px){.cx-pdp-knowledge{grid-template-columns:minmax(0,1fr);gap:18px}.cx .cx-pdp-spec,.cx .cx-pdp-sources{padding:24px}}
@media(max-width:599px){.cx .cx-pdp-spec,.cx .cx-pdp-sources{padding:20px}.cx .cx-pdp-knowledge__title{font-size:20px;gap:10px;margin-bottom:20px}.cx-pdp-spec table{font-size:14px}.cx-pdp-spec th{width:36%;padding-right:14px}.cx-pdp-spec th,.cx-pdp-spec td{padding-top:14px;padding-bottom:14px}}

.cx-lfact__more{display:block;margin-top:6px;font-size:14px;font-weight:500;color:var(--accent,#e65c00);text-decoration:underline;text-underline-offset:3px}

/* Split blocks read left to right again (owner, 2026-10-13): trust and testimonial copy left-aligned,
   16px between heading, text and button, as before the 9 October centring. */
.cx-trust__copy,.cx-video__copy{align-items:flex-start;text-align:left;gap:16px}
.cx-trust__copy .cx-h2,.cx-video__copy .cx-h2{margin:0}
.cx-trust__copy .cx-btn,.cx-video__copy .cx-btn{margin-inline:0}
.cx-video__copy .cx-sub{margin:0}
.cx-video__tag,.cx-video__copy .cx-score--left{justify-content:flex-start}

/* Split sections (owner, 2026-10-13): heading, text and button in the left column, the visual on the right,
   inside the header width. Replaces the centred stack from 9 October for app, lab, journey and the COA card. */
.cx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.cx-split__copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
.cx .cx-split .cx-head{text-align:left;align-items:flex-start;margin:0}
.cx .cx-split .cx-head .cx-sub{margin-inline:0;max-width:520px}
.cx-split__cta{margin:0}
.cx-split .cx-app__side>.cx-reveal{justify-content:flex-start;text-align:left}
.cx-split .cx-app__visual--video{justify-self:end}
.cx-split .cx-lab--solo,.cx-split .cx-lab--solo .cx-lab__sheet{max-width:none;margin:0}
@media (min-width:768px){
 .cx .cx-coa{grid-template-columns:auto 1fr;gap:48px;justify-items:start;text-align:left;padding:40px 48px}
 .cx .cx-coa__copy .cx-btn{margin-inline:0}
}
@media (max-width:899px){.cx-split{grid-template-columns:1fr;gap:28px}.cx-split .cx-app__visual--video{justify-self:center}}
/* Heading to description: 16px (12px on phones); 8px read as one block. */
.cx .cx-head .cx-sub,.cx .cx-split .cx-head .cx-sub{margin-top:16px}
@media (max-width:767px){.cx .cx-head .cx-sub,.cx .cx-split .cx-head .cx-sub{margin-top:12px}}
/* Process and cold-chain as splits (owner, 2026-10-13): steps or promises listed under the heading on the left,
   the COA card or the delivery cards on the right. */
.cx-split--process,.cx-split--cold{align-items:start}
.cx-split .cx-process{grid-template-columns:1fr;gap:0;width:100%}
.cx-split .cx-process::before{display:none}
.cx-split .cx-process__step{display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:start;text-align:left;padding:16px 0;border-top:1px solid var(--line)}
.cx-split .cx-process__step:first-child{border-top:0;padding-top:0}
.cx-split .cx-process__step .cx-process__icon{grid-row:span 2;width:48px;height:48px;border-radius:15px;font-size:21px;margin:0}
.cx-split .cx-process__step strong{margin:2px 0}
.cx-split .cx-process__step p{max-width:none}
.cx .cx-split .cx-coa{grid-template-columns:1fr;justify-items:start;text-align:left;gap:28px;margin:0;padding:40px;align-self:stretch;align-content:center}
.cx .cx-split .cx-coa__label{justify-self:start}
.cx-split .cx-promises{grid-template-columns:1fr;gap:12px;margin:0;width:100%}
.cx-split .cx-cold{grid-template-columns:1fr;gap:16px}
/* Home banner spans the header width; the paragraph under it stays a readable 720px. */
@media (min-width:600px){
 .cx-hero__fold>.cx-stage{max-width:none;width:100%}
 .cx-hero__fold>.cx-lead{max-width:720px}
}
/* Format cards (pen / vial) show the whole photo (owner, 2026-10-13): square image, caption underneath, on every width. */
.cx-format{aspect-ratio:auto;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line)}
.cx-format__media{position:relative;aspect-ratio:1}
.cx-format__media img{object-fit:cover}
.cx-format__body{position:static;border-radius:0;background:#fff}
.cx-format:hover .cx-format__body{transform:none}
/* Articles share the page's left edge (owner, 2026-10-13) and its full width (owner, 2026-10-15): title, meta and
   body run as wide as the cover and header. The question box keeps its button at the right end. */
.cx-post__head,.cx-post__body{max-width:1240px}
.cx-post__head>*,.cx-post__body>*{max-width:none}
.cx .cx-post__ctabox .cx-btn{margin-inline:0;flex:none}
/* Landing heroes use square frames with square photos; document images are shown whole. */
.cx-lhero__media{aspect-ratio:1}
.cx-lhero__media img[src*="COA_"]{object-fit:contain;background:#fff}
/* Product rails on phones: one card nearly fills the screen, with a short peek of the next (owner, 2026-10-15). */
@media (max-width:767px){.cx-rail{grid-auto-columns:84%}}
/* Consistency pass (2026-10-15). The homepage and product page are the reference; everything else follows them.
   One left edge: the header logo, every section and the footer start on the same line as .cx-wrap
   (1240px wide including a 32px gutter, 20px on phones). */
.header__row,.continue-footer{grid-template-columns:1fr min(1176px,calc(100% - 64px)) 1fr!important}
.continue-footer>.cf{max-width:none;width:auto;margin:0;grid-column:2!important}
@media (max-width:767px){.header__row,.continue-footer{grid-template-columns:1fr calc(100% - 40px) 1fr!important}
 .header__row>.header__columns{grid-column:2!important;padding-inline:0!important}}
/* Text lists: the base reset removes markers, so lists that only added indent showed text hanging in the air.
   They now sit on the text edge with the same small orange dot the research notes use. */
.cx .cx-prose ul,.cx .cx-legal ul,.cx .cx-land ul,.cx .cx-lcard ul,.cx .cx-catguide__block ul{padding-left:0;list-style:none;display:grid;gap:8px}
.cx .cx-prose ul>li,.cx .cx-legal ul>li,.cx .cx-land ul:not([class])>li,.cx .cx-lcard ul:not([class])>li,.cx .cx-catguide__block ul>li{position:relative;padding-left:20px;margin:0}
.cx .cx-prose ul>li::before,.cx .cx-legal ul>li::before,.cx .cx-land ul:not([class])>li::before,.cx .cx-lcard ul:not([class])>li::before,.cx .cx-catguide__block ul>li::before{content:"";position:absolute;left:3px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--o)}
.cx .cx-prose ol{padding-left:1.3em}
/* Guide heroes: the photo fills its column, so its right edge meets the page edge like the cards below it. */
.cx-lhero__media{width:100%;max-height:none;aspect-ratio:1/1}
@media (max-width:767px){.cx-lhero__media{aspect-ratio:4/3}}
/* Fact cards read value first, label second, like the home proof band. */
.cx-lfact strong{order:2}.cx-lfact small{order:3}.cx-lfact__ic{order:1}
/* City tables: every city ships from Jakarta, so phones drop that column and keep the estimate on one line. */
@media (max-width:767px){.cx .cx-citytable th:nth-child(3),.cx .cx-citytable td:nth-child(3){display:none}
 .cx .cx-citytable td:last-child{white-space:nowrap}}
/* Product cards: the category chip wraps instead of being cut off. */
.cx-product__cat{white-space:normal;overflow:visible;text-overflow:clip;max-width:100%;line-height:1.3}
/* Filter chips that scroll sideways fade at the edge so the cut-off reads as "more". */
.cx-chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
/* Reviewer credit: a quiet line on the page, above the closing consultation band. */
.cx-editorial-reviewer{padding:8px 0 32px}
.cx-editorial-reviewer p{font-size:13.5px;color:var(--muted);margin:0}
/* Q&A blocks without classes (videos and similar pages) get the same rhythm as the guide pages. */
.cx .cx-land h2:not([class]){font-size:clamp(20px,2.2vw,24px);line-height:1.25;letter-spacing:-.02em;color:var(--ink);margin:32px 0 8px}
.cx .cx-land h2:not([class]):first-child{margin-top:0}
/* A single video sits beside its caption instead of alone in a three-column grid. */
@media (min-width:768px){.cx-vids:has(>.cx-vid:only-child){grid-template-columns:1fr}
 .cx-vid:only-child{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:56px;align-items:center}
 .cx-vid:only-child figcaption strong{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;line-height:1.15}
 .cx-vid:only-child figcaption span{font-size:16.5px;line-height:1.65;max-width:52ch}}
/* Contact: company card and form side by side, in the same white cards as the rest of the site. */
.cx-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.cx-contact .cx-contact-card{margin:0;padding:28px;border-radius:24px;border:1px solid var(--line);background:#fff}
.cx-contact .cx-contact-card h2{font-size:clamp(20px,2.2vw,24px);letter-spacing:-.02em;margin:0 0 16px}
.cx-contact .cx-contact-card dl div{padding:10px 0;border-top:1px solid var(--line);margin:0}
.cx-contact .cx-contact-card dt{font-size:13.5px;color:var(--muted)}
.cx-contact .cx-contact-card dd{margin:0;font-size:15px;color:var(--ink);font-weight:500}
.cx-contact .cx-contact-card a{color:var(--o-600);font-weight:600}
.cx-contact .cx-contact-card>p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:8px 0 18px}
.cx-contact .cx-contact-qa h3{font-size:15.5px;margin:16px 0 4px;color:var(--ink)}
.cx-contact .cx-contact-qa p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:0}
.cx-contact__form{display:grid;gap:14px;padding:28px;border-radius:24px;border:1px solid var(--line);background:#fff;position:sticky;top:110px}
.cx-contact__form .cx-h3{font-size:clamp(20px,2.2vw,24px);letter-spacing:-.02em;margin:0 0 4px}
.cx-contact__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cx-contact__field{display:grid;gap:6px}
.cx-contact__field span{font-size:13.5px;font-weight:600;color:var(--ink)}
.cx-contact__field input,.cx-contact__field textarea{width:100%;min-height:50px;padding:12px 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg,#fcfaf7);font:inherit;font-size:15px;color:var(--ink);transition:border-color .25s,box-shadow .25s,background-color .25s}
.cx-contact__field textarea{min-height:140px;resize:vertical}
.cx-contact__field input:focus,.cx-contact__field textarea:focus{outline:0;border-color:var(--o);background:#fff;box-shadow:0 0 0 4px rgba(255,107,0,.12)}
.cx-contact__form .cx-btn{justify-self:start}
@media (max-width:899px){.cx-contact{grid-template-columns:1fr}.cx-contact__form{position:static}}
@media (max-width:559px){.cx-contact__row{grid-template-columns:1fr}.cx-contact .cx-contact-card,.cx-contact__form{padding:20px;border-radius:20px}.cx-contact__form .cx-btn{justify-self:stretch}}
/* Round 2. Wide tables scroll inside their card; the card itself never grows past the screen. */
.cx-catguide>*,.cx-catguide__block{min-width:0}
.cx-catguide__scroll{-webkit-overflow-scrolling:touch}
/* The PubMed note sits under its table instead of being pulled up over the table's own date. */
.cx-center-note{margin:16px 0 24px}
/* Hero photos whose product sits on the right keep it in frame. */
.cx-lhero__media img[src*="hero-rt"],.cx-lhero__media img[src*="ribbon"],.cx-lhero__media img[src*="hf_20260424"]{object-position:78% 50%}
/* Round 3. On the product page the community box spans the page like the sections around it. */
.cx-page-pdp .cx-community{max-width:none}
.cx-lfact__more{order:4}

/* Brand sections pass (2026-10-15). A page head followed by the tinted video band keeps the usual section rhythm. */
.cx-shop-hero+.cx-sec--video{margin-top:8px}
.cx-page-landing .cx-land__grid{margin-top:8px}

/* Audit 3. Guide and city question cards are numbered, like the home batch and journey steps. */
.cx-lgrid{counter-reset:lq}
.cx-lgrid>.cx-lcard>.cx-lcard__h{counter-increment:lq}
.cx-lgrid>.cx-lcard>.cx-lcard__h::before{content:counter(lq,decimal-leading-zero);display:block;margin-bottom:10px;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--o-600)}
/* The videos Q&A card holds an accordion. */
.cx-lcard.cx-faq__list{padding:8px 26px}
@media (max-width:767px){.cx-lcard.cx-faq__list{padding:4px 18px}}
/* Home banner (the original Shopify hero, 2026-10-15). On wide screens the products sit at the photo's right edge, so
   it is anchored there; up to 1023px the portrait photo is used (products on top) and the copy starts below them. */
@media (min-width:1024px){.continue-hero-image__media{object-position:100% 50%!important}}
@media (min-width:1024px) and (max-width:1199px){.continue-hero-image__content{max-width:min(520px,48%)!important}}
@media (max-width:1023px){
 .continue-hero-image__media{object-position:50% 0!important}
 .continue-hero-image__content{padding-top:92vw!important;padding-bottom:56px!important}
 .continue-hero-image__overlay{background:linear-gradient(180deg,transparent 0,transparent 70vw,rgba(214,88,20,.55) 98vw,rgba(214,88,20,.72) 100%)!important}
}
@media (min-width:750px) and (max-width:1023px){.continue-hero-image__content{max-width:640px}}
/* Over the banner the header is see-through with the white logo; once scrolled it is the usual solid header. */
html.cx-head-top:has(.continue-hero-image) #header-component[data-appearance]{background:transparent!important;box-shadow:none!important}
html:not(.cx-head-top):has(.continue-hero-image) #header-component[data-appearance]{--header-logo-display:block!important;--header-logo-inverse-display:none!important;--color-foreground:#202020!important;--color-foreground-rgb:32 32 32!important;color:#202020!important}
/* Tablets: the product photo is capped at about 60% of the screen height and centred, its sides fading into the banner's
   orange, so the headline and button still start on the first screen. */
@media (min-width:600px) and (max-width:1023px){
 .continue-hero-image{--pv:min(100vw,calc(62vh*1.08));background:linear-gradient(180deg,#f07a2c,#e2600f)!important}
 .continue-hero-image__media-layer{left:50%!important;right:auto!important;bottom:auto!important;width:var(--pv)!important;height:calc(var(--pv)*1.06)!important;transform:translateX(-50%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,#000 90%,transparent);mask-composite:intersect}
 .continue-hero-image__media-wrapper,.continue-hero-image__media{width:100%!important;height:100%!important}
 .continue-hero-image__overlay{display:none}
 .continue-hero-image__content{padding-top:calc(var(--pv)*1.02)!important}
}
/* Up to tablet width the banner grows with its copy (it had the screen's fixed height, so the trust bar covered the text). */
@media (max-width:1023px){
 .continue-hero-image{height:auto!important}
 .continue-hero-image__content{padding-bottom:calc(var(--bar,88px) + 36px)!important}
}
/* Desktop: the banner is never taller than the photo's own shape (796×462), so a tall window does not zoom the photo
   and slide the products under the copy. */
@media (min-width:1024px){.continue-hero-image{height:auto!important;min-height:clamp(600px,58vw,100vh)!important}.continue-hero-image__content{padding-bottom:calc(88px + 40px)!important}}
/* Banner calls to action (2026-10-17): catalogue (white) and WhatsApp consultation (white outline) side by side,
   stacked full width on phones. */
.continue-hero-image__buttons{display:flex!important;flex-wrap:wrap;gap:12px}
.continue-hero-image__button--wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 26px;border-radius:999px;border:1.5px solid rgba(255,255,255,.8);background:rgba(255,255,255,.1);color:#fff!important;font-weight:600;font-size:16px;text-decoration:none;transition:background-color .25s ease,border-color .25s ease}
.continue-hero-image__button--wa:hover{background:rgba(255,255,255,.2);border-color:#fff}
@media (max-width:599px){.continue-hero-image__buttons{flex-direction:column;align-items:stretch}.continue-hero-image__buttons>a{width:100%!important;justify-content:center}}
/* Product page: one Buy button across the full width of the buy box. */
.cx-buy__actions [data-order-choice]{grid-column:1/-1;width:100%}
/* Consultation pop-up (2026-10-17): even spacing on one 24px rhythm, WhatsApp green for the action, and a country
   list that fades and slides open instead of appearing at once. */
html whatsapp-popup-modal .wa-popup-modal__container{padding:32px 28px 26px!important}
html whatsapp-popup-modal .wa-popup-modal__heading{padding:0 32px!important;margin:0 0 8px!important}
html whatsapp-popup-modal .wa-popup-modal__body{margin:0 0 22px!important;gap:14px!important}
html whatsapp-popup-modal .wa-popup-modal__phone-container{margin:0 0 18px!important}
html whatsapp-popup-modal .wa-popup-modal__checkbox-container{margin:0 0 22px!important}
html whatsapp-popup-modal .wa-popup-modal__button{background:#25d366!important;color:#fff!important;border:0!important;box-shadow:0 10px 24px -12px rgba(18,140,74,.7);transition:background-color .25s ease,opacity .25s ease,transform .15s ease!important}
html whatsapp-popup-modal .wa-popup-modal__button:hover{background:#1fb959!important}
html whatsapp-popup-modal .wa-popup-modal__button:active{transform:scale(.98)}
html whatsapp-popup-modal .wa-popup-modal__button.is-disabled{background:#25d366!important;color:#fff!important;opacity:.45;box-shadow:none;cursor:not-allowed}
html whatsapp-popup-modal .wa-popup-modal__trust{margin:14px 0 0!important}
html whatsapp-popup-modal .wa-popup-modal__custom-options{display:flex!important;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px) scale(.98);transform-origin:top left;transition:opacity .18s ease,transform .24s cubic-bezier(.22,1,.36,1),visibility 0s linear .24s}
html whatsapp-popup-modal .wa-popup-modal__custom-select.is-open .wa-popup-modal__custom-options{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .18s ease,transform .24s cubic-bezier(.22,1,.36,1),visibility 0s}
html whatsapp-popup-modal .wa-popup-modal__caret{transition:transform .24s ease}
html whatsapp-popup-modal .wa-popup-modal__custom-select.is-open .wa-popup-modal__caret{transform:rotate(180deg)}
@media (max-width:599px){html whatsapp-popup-modal .wa-popup-modal__container{padding:28px 20px 22px!important}html whatsapp-popup-modal .wa-popup-modal__heading{padding:0 28px!important}}
/* Pop-up size (2026-10-17). Desktop: as tall as its content, no inner scroll, and the country list may extend past the
   card instead of being cut off. Phone: nearly full screen with a 12px margin, scrolling inside if the screen is short. */
@media (min-width:600px){
 html whatsapp-popup-modal .wa-popup-modal__container{max-height:none!important;overflow:visible!important}
 html whatsapp-popup-modal .wa-popup-modal__custom-options{z-index:5}
}
@media (max-width:599px){
 html whatsapp-popup-modal .wa-popup-modal__container{width:calc(100vw - 24px)!important;max-width:none!important;max-height:calc(100dvh - 24px)!important;overflow:auto!important;border-radius:22px!important;margin:12px!important}
}
/* Performance (2026-10-17): the banner's trust bar blurred the photo behind it (backdrop-filter), and Chrome re-ran that
   blur on every keystroke in the consultation pop-up, which made typing lag. A solid translucent orange looks the same. */
.continue-hero-image__bottom-bar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(214,92,22,.86)!important}
/* The vial/pen cards are 90% white already; their live blur cost more than it showed. */
.cx-format__body{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,.94)!important}
/* Consultation pop-up header, second version (owner, 2026-10-17): WhatsApp badge, two-line headline with the channel
   in WhatsApp green, a short line, and three things people get, so the form reads as worth filling in. */
html whatsapp-popup-modal .wa-popup-modal__badge{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;border-radius:16px;background:#25d366;color:#fff;box-shadow:0 10px 24px -12px rgba(18,140,74,.75)}
html whatsapp-popup-modal .wa-popup-modal__badge svg{width:28px;height:28px}
html whatsapp-popup-modal .wa-popup-modal__heading{display:block;margin:0 0 10px!important;padding:0 24px!important;background:none!important;border:0!important;box-shadow:none!important;color:var(--ink,#1a1410)!important;-webkit-text-fill-color:currentColor!important;font-size:clamp(22px,2.4vw,26px)!important;line-height:1.15!important;letter-spacing:-.03em;font-weight:700;text-align:center}
html whatsapp-popup-modal .wa-popup-modal__heading span{display:block;color:#16a34a;-webkit-text-fill-color:#16a34a}
html whatsapp-popup-modal .wa-popup-modal__line{text-align:center;margin:0 auto!important;max-width:34ch;font-size:15px;line-height:1.55;color:var(--ink-2,#4a4038)}
html whatsapp-popup-modal .wa-popup-modal__perks{list-style:none;margin:6px 0 0;padding:14px 16px;display:grid;gap:10px;border-radius:16px;background:#fff;border:1px solid rgba(26,20,16,.08)}
html whatsapp-popup-modal .wa-popup-modal__perks li{display:flex;align-items:flex-start;gap:10px;text-align:left;font-size:14.5px;line-height:1.4;color:var(--ink,#1a1410)}
html whatsapp-popup-modal .wa-popup-modal__perks i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#dcfce7;color:#16a34a;margin-top:1px}
/* Phones: a sheet 12px from every edge (it was centred with a transform, which the margin pushed off-centre); the
   button sits at the bottom, in thumb reach. */
@media (max-width:599px){
 html whatsapp-popup-modal[class] .wa-popup-modal__container{position:fixed!important;inset:12px!important;width:auto!important;height:auto!important;max-height:none!important;margin:0!important;transform:none!important;display:flex!important;flex-direction:column;overflow:auto!important;padding:24px 20px 20px!important;border-radius:24px!important;animation:cx-sheet-in .32s cubic-bezier(.22,1,.36,1)}
 html whatsapp-popup-modal[class] .wa-popup-modal__content{display:flex;flex-direction:column;flex:1 0 auto}
 html whatsapp-popup-modal[class] .wa-popup-modal__checkbox-container{margin-top:auto!important}
 @keyframes cx-sheet-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
/* Language switch (2026-10-17): the toggle grew to 40px but its knob kept the 32px layout (3px from the top, 11px from
   the bottom). The knob is now centred, 30px, with the same 4px gap at either end; labels sit centred in each half. */
header-component .lang-switch__toggle{display:inline-flex;align-items:center;justify-content:space-between;width:76px;height:40px;padding:0 12px!important;box-sizing:border-box}
header-component .lang-switch__knob{top:50%!important;left:4px!important;width:30px!important;height:30px!important;transform:translateY(-50%)!important;transition:transform .28s cubic-bezier(.22,1,.36,1)!important}
header-component .lang-switch__toggle[aria-checked="true"] .lang-switch__knob{transform:translate(36px,-50%)!important}
header-component .lang-switch__knob .lang-flag{inset:3px!important;width:24px!important;height:24px!important}
header-component .lang-switch__label{width:20px;text-align:center;font-size:12px;font-weight:600;letter-spacing:.02em}
/* Pop-up, third pass (owner, 2026-10-17). Phones: the sheet is as tall as its content and centred (the full-height
   version left an empty gap above the button). Button: proportional and centred, not full width. The country code
   uses the same font and size as the number. */
@media (max-width:599px){
 html whatsapp-popup-modal[class] .wa-popup-modal__container{inset:auto 12px!important;top:50%!important;transform:translateY(-50%)!important;max-height:calc(100dvh - 24px)!important;animation:cx-sheet-in-c .32s cubic-bezier(.22,1,.36,1)}
 html whatsapp-popup-modal[class] .wa-popup-modal__content{flex:0 0 auto}
 html whatsapp-popup-modal[class] .wa-popup-modal__checkbox-container{margin-top:0!important}
 @keyframes cx-sheet-in-c{from{opacity:0;transform:translateY(calc(-50% + 16px))}to{opacity:1;transform:translateY(-50%)}}
}
html whatsapp-popup-modal .wa-popup-modal__button{display:flex!important;width:auto!important;min-width:min(260px,100%);max-width:100%;margin:0 auto!important;padding:14px 34px!important}
html whatsapp-popup-modal .wa-popup-modal__trust{justify-content:center;text-align:left}
html whatsapp-popup-modal .wa-popup-modal__selected-code,html whatsapp-popup-modal .wa-popup-modal__phone-input,html whatsapp-popup-modal .wa-popup-modal__option-code{font-family:"Plus Jakarta Sans",system-ui,sans-serif!important;font-size:16px!important;font-weight:500!important;letter-spacing:0!important;font-variant-numeric:tabular-nums}
/* The button sizes to its label (a block parent stretched width:auto), and the language pill keeps its white
   background over the see-through banner header too. */
html whatsapp-popup-modal .wa-popup-modal__button{width:fit-content!important}
/* Banner, still (owner, 2026-10-17): no wobble or parallax. Up to tablet width the RETA vial sits 2.2% left of centre in
   the portrait photo, so the photo is nudged right by that much (with a slight zoom so no edge shows). On load the photo
   fades in once, moving gently down from just above. */
@media (max-width:1023px){.continue-hero-image__media{transform:translateX(2.2%) scale(1.045);transform-origin:50% 30%}}
@media (prefers-reduced-motion:no-preference){
 .continue-hero-image__media-wrapper{animation:cx-banner-in .9s cubic-bezier(.22,1,.36,1) both}
 @keyframes cx-banner-in{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
}
/* Banner buttons, one style (owner, 2026-10-17): both white with orange text, told apart by their icon (a catalogue
   grid, the WhatsApp logo). */
.continue-hero-image__button--primary{display:inline-flex!important;align-items:center;justify-content:center;gap:8px}
.continue-hero-image__button-icon{flex:none}
html .continue-hero-image__button--wa{background:#fff!important;border:0!important;color:#e65c00!important;box-shadow:0 8px 20px -14px rgba(0,0,0,.5)}
html .continue-hero-image__button--wa:hover{background:#fff5ec!important}
/* Pop-up on phones, fourth pass (2026-10-27, customers could not reach the button on iPhone). The sheet follows the
   area that is actually visible (Safari's bars and the keyboard taken out, from window.visualViewport via cx.js), so it
   no longer sits under the toolbar or jumps when the toolbar resizes. The button stays pinned at the bottom of the
   sheet, and the content is tighter so it usually fits without scrolling. */
@media (max-width:599px){
 html whatsapp-popup-modal[class] .wa-popup-modal__container{top:calc(var(--cx-vv-top,0px) + var(--cx-vv-h,100svh) / 2)!important;max-height:calc(var(--cx-vv-h,100svh) - 24px)!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:20px 18px 0!important;transition:top .2s ease,max-height .2s ease}
 html whatsapp-popup-modal .wa-popup-modal__badge{width:44px!important;height:44px!important;margin-bottom:10px!important}
 html whatsapp-popup-modal .wa-popup-modal__badge svg{width:24px;height:24px}
 html whatsapp-popup-modal .wa-popup-modal__heading{font-size:21px!important;margin-bottom:6px!important}
 html whatsapp-popup-modal .wa-popup-modal__line{font-size:13.5px!important;margin-bottom:10px!important}
 html whatsapp-popup-modal .wa-popup-modal__body{margin:0 0 14px!important}
 html whatsapp-popup-modal .wa-popup-modal__perks{padding:10px 12px;gap:7px}
 html whatsapp-popup-modal .wa-popup-modal__perks li{font-size:13.5px;line-height:1.35}
 html whatsapp-popup-modal .wa-popup-modal__phone-container{margin:0 0 12px!important}
 html whatsapp-popup-modal .wa-popup-modal__checkbox-container{margin:0 0 4px!important}
 html whatsapp-popup-modal .wa-popup-modal__button{position:sticky!important;bottom:12px;z-index:2;margin:10px auto 0!important;box-shadow:0 0 0 12px #fcfaf7,0 -18px 22px 6px #fcfaf7!important}
 html whatsapp-popup-modal .wa-popup-modal__content{padding-bottom:16px}
 /* While typing (keyboard up) the button is not pinned, so it never covers the number field. */
 html whatsapp-popup-modal .wa-popup-modal__container:focus-within .wa-popup-modal__button{position:relative!important;bottom:auto;box-shadow:none!important}
}
/* Short phones (iPhone SE, mini, or Safari with both bars): no badge or subtitle, so the form fits. */
@media (max-width:599px) and (max-height:740px){
 html whatsapp-popup-modal .wa-popup-modal__badge,html whatsapp-popup-modal .wa-popup-modal__line{display:none!important}
}
/* Pop-up offer (2026-10-27): one short message in a WhatsApp-style bubble instead of a list. */
html whatsapp-popup-modal .wa-popup-modal__body p.wa-popup-modal__offer{position:relative;margin:4px 0 0!important;padding:14px 16px!important;border:0!important;border-radius:18px!important;background:#dcf8c6!important;color:var(--ink,#1a1410);font-size:15px;line-height:1.5;text-align:center;text-wrap:balance}
html whatsapp-popup-modal .wa-popup-modal__offer b{font-weight:700}
html whatsapp-popup-modal .wa-popup-modal__offer span{display:block;margin-top:6px;font-weight:600;color:#128c4a}
@media (max-width:599px){html whatsapp-popup-modal .wa-popup-modal__body p.wa-popup-modal__offer{font-size:14px;padding:12px 14px!important}}
/* The closed country list took up its full height (only hidden), so the pop-up showed a scrollbar for nothing
   (2026-10-27). Closed, it has no height; it opens with the same fade as before. */
html whatsapp-popup-modal .wa-popup-modal__custom-select:not(.is-open) .wa-popup-modal__custom-options{max-height:0!important;overflow:hidden!important;transition:opacity .18s ease,transform .24s cubic-bezier(.22,1,.36,1),visibility 0s linear .24s,max-height 0s linear .24s}
/* Offer as a small discount ticket (owner, 2026-10-27): big number, short label, notched sides. Bigger title on phones. */
html whatsapp-popup-modal .wa-popup-modal__body p.wa-popup-modal__offer{display:flex;box-sizing:border-box;width:100%;max-width:none!important;align-items:center;justify-content:center;gap:16px;padding:12px 20px!important;border-radius:16px!important;background:linear-gradient(135deg,#e6f8ec,#d3f3de)!important;text-wrap:initial}
html whatsapp-popup-modal .wa-popup-modal__body p.wa-popup-modal__offer::before,html whatsapp-popup-modal .wa-popup-modal__body p.wa-popup-modal__offer::after{content:"";position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:#fcfaf7}
html whatsapp-popup-modal .wa-popup-modal__body p.wa-popup-modal__offer::before{left:-8px}
html whatsapp-popup-modal .wa-popup-modal__body p.wa-popup-modal__offer::after{right:-8px}
html whatsapp-popup-modal .wa-popup-modal__offer b{font-size:38px;line-height:1;font-weight:800;letter-spacing:-.04em;color:#128c4a}
html whatsapp-popup-modal .wa-popup-modal__offer span{display:block;margin:0!important;padding-left:14px;border-left:1.5px dashed rgba(18,140,74,.4);text-align:left;font-size:15px;line-height:1.25;font-weight:600;color:var(--ink,#1a1410)}
html whatsapp-popup-modal .wa-popup-modal__offer i{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#128c4a}
@media (max-width:599px){
 html whatsapp-popup-modal .wa-popup-modal__heading{font-size:26px!important;padding:0 30px!important}
 html whatsapp-popup-modal .wa-popup-modal__body p.wa-popup-modal__offer{padding:10px 18px!important}
}
html whatsapp-popup-modal .wa-popup-modal__trust a{color:#128c4a;font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
html whatsapp-popup-modal .wa-popup-modal__offer small{display:block;margin-bottom:2px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center}
html whatsapp-popup-modal .wa-popup-modal__offer em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;color:#128c4a}
/* Promo bar above the header (owner, 2026-10-27). */
.cx-promo-bar{position:relative;z-index:30;display:flex;align-items:center;justify-content:center;gap:4px;min-height:36px;padding:8px 16px;background:#128c4a;color:#fff!important;font-size:13px;line-height:1.3;font-weight:500;text-align:center;text-decoration:none!important;transition:background .2s ease}
.cx-promo-bar:hover{background:#0f7a40}
.cx-promo-bar b{font-weight:700}
.cx-promo-bar em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;min-width:9.5ch;text-align:left}
html .cx-promo-bar{display:block;border-radius:0!important;margin:0!important;width:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .cx-promo-bar em{display:inline-block}
@media (max-width:599px){html .cx-promo-bar{font-size:12.5px;padding:9px 12px}}
html a.cx-promo-bar.cx-promo-bar{border-radius:0!important;box-shadow:none!important;height:auto!important;letter-spacing:0!important}
html a.cx-promo-bar.cx-promo-bar>*{display:inline!important;margin:0!important;padding:0!important;min-width:0}
@media (max-width:599px){html a.cx-promo-bar.cx-promo-bar{font-size:12px;padding:9px 10px}}
/* Sticky promo bar (owner, 2026-10-27): it stays at the top and the sticky header sits right below it. */
html a.cx-promo-bar.cx-promo-bar{position:sticky;top:0;z-index:9;height:36px!important;min-height:0;padding-top:0;padding-bottom:0;line-height:36px}
body:has(> #header-group > .cx-promo-bar) #header-group > .header-section{top:35px}
/* Countdown in a white pill so the days and time read at a glance. */
html a.cx-promo-bar.cx-promo-bar>em{display:inline-block!important;margin-left:6px!important;padding:0 8px!important;border-radius:6px;background:#fff;color:#0f7a40;font-weight:700;line-height:22px;vertical-align:1px;letter-spacing:.02em!important}
/* Note under the form (owner, 2026-10-27): two short centred lines, then the two numbers as chips. */
html whatsapp-popup-modal p.wa-popup-modal__trust--claim{display:block!important;margin:12px 0 0!important;text-align:center;font-size:12.5px;line-height:1.45;color:#6b625a}
html whatsapp-popup-modal .wa-popup-modal__alt{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:8px 0 0!important}
html whatsapp-popup-modal .wa-popup-modal__alt a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #cfe9d9;border-radius:999px;background:#f1faf4;color:#128c4a!important;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;text-decoration:none!important;white-space:nowrap;transition:background .2s ease,border-color .2s ease}
html whatsapp-popup-modal .wa-popup-modal__alt a:hover{background:#e3f6ea;border-color:#a9dcbd}
html whatsapp-popup-modal .wa-popup-modal__alt svg{width:14px;height:14px;flex:none}
/* Pop-up opens with a small bounce; uses scale/translate so the centring transform is left alone. */
@keyframes cx-pop-bounce{0%{opacity:0;scale:.88;translate:0 28px}55%{opacity:1;scale:1.03;translate:0 -4px}78%{scale:.99;translate:0 2px}100%{scale:1;translate:0 0}}
html whatsapp-popup-modal.is-active .wa-popup-modal__container{animation:cx-pop-bounce .6s cubic-bezier(.3,.7,.4,1) both}
@media (prefers-reduced-motion:reduce){html whatsapp-popup-modal.is-active .wa-popup-modal__container{animation:none}}
/* Smaller note and both numbers on one line, even on narrow phones (owner, 2026-10-27). */
html whatsapp-popup-modal p.wa-popup-modal__trust--claim{margin-top:10px!important;font-size:11.5px;line-height:1.4}
html whatsapp-popup-modal .wa-popup-modal__alt{flex-wrap:nowrap;gap:6px;margin-top:6px!important}
html whatsapp-popup-modal .wa-popup-modal__alt a{gap:4px;padding:4px 9px;font-size:min(11.5px,3.1vw);font-weight:700}
html whatsapp-popup-modal .wa-popup-modal__alt svg{width:12px;height:12px}
/* Centre bounce: scales out from the middle, no slide. */
@keyframes cx-pop-center{0%{opacity:0;scale:.7}45%{opacity:1;scale:1.06}68%{scale:.97}86%{scale:1.01}100%{scale:1}}
html whatsapp-popup-modal.is-active .wa-popup-modal__container{transform-origin:50% 50%;animation:cx-pop-center .55s cubic-bezier(.3,.7,.4,1) both}
@media (prefers-reduced-motion:reduce){html whatsapp-popup-modal.is-active .wa-popup-modal__container{animation:none}}
/* One-line title with the WhatsApp logo, and no sideways scroll on narrow phones (owner, 2026-10-27). */
html whatsapp-popup-modal .wa-popup-modal__heading.wa-popup-modal__heading--inline{display:flex!important;align-items:center;justify-content:center;gap:8px;padding:0 34px!important;margin-bottom:12px!important;font-size:clamp(20px,6vw,24px)!important;white-space:nowrap}
html whatsapp-popup-modal .wa-popup-modal__heading--inline svg{flex:none;width:1.15em;height:1.15em;color:#16a34a}
html whatsapp-popup-modal .wa-popup-modal__container{overflow-x:hidden!important}
html whatsapp-popup-modal .wa-popup-modal__phone-input{min-width:0!important;width:auto!important;flex:1 1 0!important}
html whatsapp-popup-modal .wa-popup-modal__custom-options{max-width:calc(100vw - 72px)}
/* Narrow phones: the bar keeps the offer and the countdown, and the pop-up button stays on one line. */
@media (max-width:379px){html a.cx-promo-bar.cx-promo-bar>.cx-promo-bar__ends{display:none!important}}
@media (max-width:599px){html whatsapp-popup-modal .wa-popup-modal__button{white-space:nowrap;font-size:min(15px,4.2vw)!important;padding-left:14px!important;padding-right:14px!important}}
/* Ticket never wraps (owner, 2026-10-27): every line stays on one line and the sizes shrink with narrow phones. */
html whatsapp-popup-modal .wa-popup-modal__body p.wa-popup-modal__offer{gap:clamp(10px,3.6vw,16px);padding-left:clamp(12px,4vw,20px)!important;padding-right:clamp(12px,4vw,20px)!important}
html whatsapp-popup-modal .wa-popup-modal__offer b{font-size:clamp(30px,9.6vw,38px);white-space:nowrap}
html whatsapp-popup-modal .wa-popup-modal__offer small,html whatsapp-popup-modal .wa-popup-modal__offer i{font-size:clamp(9.5px,2.9vw,11px);letter-spacing:.1em;white-space:nowrap}
html whatsapp-popup-modal .wa-popup-modal__offer span{font-size:clamp(13px,4.1vw,15px);padding-left:clamp(10px,3.6vw,14px);white-space:nowrap}
html whatsapp-popup-modal .wa-popup-modal__phone-label{display:block;text-align:center}
/* Narrowest phones: a little smaller still so the ticket fits. */
@media (max-width:340px){
 html whatsapp-popup-modal .wa-popup-modal__offer b{font-size:28px}
 html whatsapp-popup-modal .wa-popup-modal__offer span{font-size:12.5px;padding-left:9px}
 html whatsapp-popup-modal .wa-popup-modal__body p.wa-popup-modal__offer{gap:9px;padding-left:10px!important;padding-right:10px!important}
}
/* Smaller 21+ line (owner, 2026-10-27). */
html whatsapp-popup-modal .wa-popup-modal__checkbox-text{font-size:12px!important;line-height:1.4!important;color:#6b625a}
html whatsapp-popup-modal .wa-popup-modal__checkbox-label{align-items:center!important;gap:8px!important}
html whatsapp-popup-modal .wa-popup-modal__checkbox-label input[type=checkbox],html whatsapp-popup-modal .wa-popup-modal__checkbox-custom{width:18px!important;height:18px!important;flex:none}
/* "24/7 Support Tersedia" is longer: shrink with the screen so it clears the close button on small phones. */
html whatsapp-popup-modal .wa-popup-modal__heading.wa-popup-modal__heading--inline{font-size:clamp(16px,5.3vw,24px)!important;padding:0 28px!important;gap:7px}
html whatsapp-popup-modal .wa-popup-modal__phone-label{white-space:nowrap;font-size:clamp(12.5px,3.9vw,15px)!important}
html whatsapp-popup-modal .wa-popup-modal__container:focus{outline:none}
/* Ticket, more appealing (owner, 2026-10-27): solid green coupon, white type, boxed countdown. */
html whatsapp-popup-modal .wa-popup-modal__body p.wa-popup-modal__offer{background:radial-gradient(120% 140% at 0% 0%,#2fbf6c 0%,#16a34a 45%,#0f7a40 100%)!important;color:#fff;box-shadow:0 8px 20px -10px rgba(15,122,64,.55),inset 0 1px 0 rgba(255,255,255,.25);padding-top:12px!important;padding-bottom:12px!important}
html whatsapp-popup-modal .wa-popup-modal__offer b{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.12)}
html whatsapp-popup-modal .wa-popup-modal__offer small,html whatsapp-popup-modal .wa-popup-modal__offer i{color:rgba(255,255,255,.85)}
html whatsapp-popup-modal .wa-popup-modal__offer > span{border-left-color:rgba(255,255,255,.45)!important;color:#fff}
html whatsapp-popup-modal .wa-popup-modal__offer em{display:flex;gap:4px;margin-top:5px;color:inherit}
html whatsapp-popup-modal .wa-popup-modal__offer span.cx-cd{display:flex;flex-direction:column;align-items:center;min-width:clamp(26px,8vw,32px);margin:0!important;padding:3px 3px 2px!important;border:0!important;border-radius:7px;background:#fff;box-shadow:0 2px 6px -2px rgba(0,0,0,.18);text-align:center;line-height:1}
html whatsapp-popup-modal .wa-popup-modal__offer span.cx-cd__n{display:block;padding:0!important;border:0!important;font-size:clamp(13px,4vw,15px);font-weight:800;color:#0f7a40;font-variant-numeric:tabular-nums;letter-spacing:0}
html whatsapp-popup-modal .wa-popup-modal__offer span.cx-cd__l{display:block;margin-top:2px;padding:0!important;border:0!important;font-size:8px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b8f7a}
/* Checkbox lines up with the first line of its text and stays square (owner, 2026-10-27). */
html whatsapp-popup-modal .wa-popup-modal__checkbox-label{align-items:flex-start!important}
html whatsapp-popup-modal .wa-popup-modal__checkbox-custom{margin-top:0!important;aspect-ratio:1;min-width:18px;box-sizing:border-box}