:root{--bg:#08090B;--fg:#F2F3F5;--mute:#8B929E;--dim:#6E7480;--line:#23262E;--panel:#0E1014;--sale:#F04349;--acc-l:#8FE0EA}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{padding-top:var(--promo-h,0px);background:var(--bg);color:var(--fg);font-family:Poppins,Rubik,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:300;direction:rtl;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.hdr{position:fixed;inset-inline:0;top:var(--promo-h,0px);z-index:900;display:flex;align-items:center;justify-content:space-between;
 gap:24px;padding:16px 5vw;background:rgba(8,9,11,.72);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.hdr.on{border-bottom-color:var(--line);background:rgba(8,9,11,.94)}
.hdr nav{display:flex;gap:30px;font-size:15px;font-weight:500;color:#E4E7EC;letter-spacing:.01em}
.hdr nav a{position:relative;padding-bottom:3px}
.hdr nav a:hover{color:#fff}
.hdr nav a:hover::after{content:'';position:absolute;inset-inline:0;bottom:0;height:1px;background:#fff}
.hdr .logo{height:20px;width:auto;flex:none;object-fit:contain;filter:brightness(0) invert(1);opacity:.95}
.call-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
 color:#E4E7EC;flex:none}
.call-btn svg{width:21px;height:21px}
.call-btn:hover{color:#fff}
.cart-btn{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;
 color:#E4E7EC;border:0;padding:0;flex:none}
.cart-btn svg{width:23px;height:23px}
.cart-btn:hover{color:#fff}
.cart-btn .cnt{position:absolute;top:0;right:-1px;box-sizing:border-box;min-width:17px;height:17px;padding:0 4px;
 border-radius:999px;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;
 font-family:Poppins,sans-serif;font-size:10px;font-weight:600;line-height:1}
.cart-btn .cnt[hidden]{display:none}
@media(max-width:749px){.hdr nav{display:none}}
.hdr-right{display:flex;align-items:center;gap:4px}
.burger{display:none;width:40px;height:40px;background:none;border:0;padding:0;cursor:pointer;
 flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:20px;height:1.5px;background:#E4E7EC;
 transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:749px){.burger{display:flex}}
.lead-pop{position:fixed;inset:0;z-index:980;display:flex;align-items:center;justify-content:center;padding:20px}
.lead-pop[hidden]{display:none}
.lead-pop-back{position:absolute;inset:0;background:rgba(2,3,4,.88);backdrop-filter:blur(9px);
 opacity:0;transition:opacity .3s}
.lead-pop.on .lead-pop-back{opacity:1}
.lead-card{position:relative;width:min(820px,100%);max-height:calc(100svh - 32px);
 display:grid;grid-template-columns:1.04fr .96fr;background:#0C0E12;
 border:1px solid rgba(47,196,207,.34);
 border-radius:18px;overflow:hidden;
 box-shadow:0 34px 90px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.05),0 0 60px rgba(47,196,207,.12);
 opacity:0;transform:translateY(16px) scale(.985);transition:opacity .32s,transform .32s cubic-bezier(.2,.7,.3,1)}
.lead-pop.on .lead-card{opacity:1;transform:none}
.lead-form{padding:40px 34px 30px;overflow-y:auto}
/* portrait slice of the living-room frame — the machine whole, the trainer whole.
   The old crop cut straight through both. */
.lead-media{position:relative;background:#14161A center/cover no-repeat;
 background-image:url("/img/lead-portrait.jpg")}
.lead-media::after{content:'';position:absolute;inset:0;
 background:linear-gradient(to right,rgba(12,14,18,.55) 0%,transparent 42%,transparent 100%)}
.lead-tag{position:absolute;bottom:16px;right:16px;left:16px;z-index:2;text-align:center;
 background:rgba(8,9,11,.62);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);
 border-radius:8px;padding:9px 12px;font-size:12px;color:#EAEDF2}
.lead-x{position:absolute;top:12px;left:12px;z-index:3;width:36px;height:36px;border-radius:50%;
 background:rgba(8,9,11,.55);backdrop-filter:blur(6px);border:1px solid var(--line);
 color:#C6CBD4;font-size:23px;line-height:1;cursor:pointer;transition:color .2s,background .2s}
.lead-x:hover{color:#fff;background:rgba(8,9,11,.85)}
.lead-kick{font-family:Poppins,sans-serif;font-size:11px;letter-spacing:.19em;color:var(--acc-l);margin-bottom:13px}
.lead-card h3{font-size:clamp(21px,2.6vw,27px);font-weight:600;letter-spacing:-.025em;line-height:1.28}
.lead-card p{font-size:14.5px;color:var(--mute);line-height:1.85;margin-top:13px}
.lead-card form{display:flex;flex-direction:column;gap:15px;margin-top:24px}
.lf{display:flex;flex-direction:column;gap:7px}
.lf>span{font-size:13px;font-weight:500;color:#CFD4DC;letter-spacing:.01em}
.lf>span i{font-style:normal;font-weight:400;color:var(--dim)}
.lead-card input{background:#1B1F26;border:1px solid #3A414C;border-radius:10px;
 color:#fff;font-family:inherit;font-size:16px;padding:14px 15px;width:100%;
 transition:border-color .18s,box-shadow .18s,background .18s}
.lead-card input::placeholder{color:#7C8494}
.lead-card input:hover{border-color:#4A525E}
.lead-card input:focus{outline:0;background:#20252D;border-color:var(--acc-l);
 box-shadow:0 0 0 3px rgba(143,224,234,.18)}
.lead-card input.bad{border-color:var(--sale);box-shadow:0 0 0 3px rgba(240,67,73,.16)}
.lf .err{font-size:12.5px;color:var(--sale);min-height:1px}
.lead-card .btn{margin-top:4px;width:100%;text-align:center;border-radius:10px;
 padding:16px 34px;font-weight:500}
.lead-msg{font-size:13.5px;line-height:1.7;min-height:1px}
.lead-fine{font-size:13px;color:var(--dim);margin-top:18px}
.lead-fine a{text-decoration:underline}
@media(max-height:760px){
  .lead-card{grid-template-columns:1fr !important;grid-template-rows:auto !important}
  .lead-media{display:none}
  .lead-form{padding:22px 20px 20px}
  .lead-card h3{font-size:20px}
  .lead-card p{font-size:13.5px;line-height:1.7;margin-top:9px}
  .lead-card form{gap:11px;margin-top:16px}
  .lead-card input{padding:11px 13px}
  .lead-fine{margin-top:12px}
}
@media(max-width:720px){
  .lead-card{grid-template-columns:1fr;grid-template-rows:150px auto}
  .lead-media{grid-row:1;background-position:center 34%}
  .lead-media::after{background:linear-gradient(to bottom,transparent 30%,rgba(12,14,18,.9) 100%)}
  .lead-tag{bottom:10px;font-size:11px;padding:7px 10px}
  .lead-form{grid-row:2;padding:24px 20px 22px}
  .lead-card h3{font-size:20px}
  .lead-card p{font-size:13.5px;margin-top:10px}
}
.mnav-back{position:fixed;inset:0;background:rgba(8,9,11,.62);backdrop-filter:blur(3px);
 z-index:958;opacity:0;transition:opacity .25s}
.mnav-back.on{opacity:1}
.mnav-back[hidden],.mnav[hidden]{display:none}
.mnav{position:fixed;top:0;bottom:0;right:0;width:min(86vw,330px);z-index:960;background:#0B0D11;
 border-inline-start:1px solid var(--line);box-shadow:-18px 0 46px rgba(0,0,0,.5);
 padding:calc(var(--promo-h,0px) + 84px) 24px 40px;overflow-y:auto;
 display:flex;flex-direction:column;
 transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.mnav.on{transform:translateX(0)}
.mnav a{font-size:17px;padding:16px 0;border-bottom:1px solid var(--line);color:#E4E7EC}
.mnav a:hover{color:#fff}
.mnav a.btn{border-bottom:0}
@media(min-width:750px){.mnav,.mnav-back{display:none!important}}

.bnr{position:relative;width:100%;overflow:hidden}
.bnr-wrap{padding:clamp(72px,10vh,132px) clamp(24px,3.6vw,56px)}
.bnr.inset{border-radius:4px;width:100%;margin:0}
@media(max-width:749px){.bnr-wrap{padding:44px 16px}}
.bnr picture,.bnr img{width:100%;height:auto}
.bnr img{aspect-ratio:var(--ar-d);object-fit:cover}
@media(max-width:749px){.bnr img{aspect-ratio:var(--ar-m)}}
.bnr-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 55%,rgba(8,9,11,calc(var(--scrim)*1.1)) 100%)}
.bnr:has(.side-right) .bnr-scrim{background:
 linear-gradient(to left,rgba(8,9,11,calc(var(--scrim)*1.6)) 0%,rgba(8,9,11,calc(var(--scrim)*.45)) 46%,transparent 72%)}
.bnr:has(.side-left) .bnr-scrim{background:
 linear-gradient(to right,rgba(8,9,11,calc(var(--scrim)*1.75)) 0%,rgba(8,9,11,calc(var(--scrim)*1.15)) 30%,
 rgba(8,9,11,calc(var(--scrim)*.4)) 55%,transparent 78%)}
.bnr:has(.side-left) .bnr-copy .bnr-h,.bnr:has(.side-left) .bnr-copy .bnr-p{text-shadow:0 2px 18px rgba(0,0,0,.6)}
/* A light edge sweeps the frame and the room changes behind it. Both frames were
   rendered from the same source, so the athlete and the machine do not move a pixel —
   only the environment does. That stillness is what sells the effect. */
.bnr .alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;
 clip-path:inset(0 0 0 100%);animation:bnrwipe 15s cubic-bezier(.65,0,.35,1) infinite}
@keyframes bnrwipe{0%,10%{clip-path:inset(0 0 0 100%)}45%,62%{clip-path:inset(0 0 0 0)}
 97%,100%{clip-path:inset(0 0 0 100%)}}
.bnr .bnr-edge{position:absolute;top:0;bottom:0;width:2px;z-index:3;pointer-events:none;opacity:0;
 background:linear-gradient(180deg,transparent,#8FE0EA 22%,#CFF3F8 50%,#8FE0EA 78%,transparent);
 box-shadow:0 0 28px 8px rgba(143,224,234,.40);
 animation:bnredge 15s cubic-bezier(.65,0,.35,1) infinite}
@keyframes bnredge{0%,10%{right:0;opacity:0}14%{opacity:1}
 45%{right:100%;opacity:1}51%,62%{right:100%;opacity:0}
 66%{right:100%;opacity:1}97%{right:0;opacity:1}99%,100%{right:0;opacity:0}}
@media(prefers-reduced-motion:reduce){.bnr .alt{animation:none;clip-path:inset(0 0 0 100%)}
 .bnr .bnr-edge{display:none}}
@media(max-width:749px){.bnr .bnr-edge{display:none}}
@media(prefers-reduced-motion:reduce){.bnr .alt{animation:none;opacity:0}}
@media(max-width:749px){.bnr .alt{display:none}}
.bnr .bnr-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
 display:flex;gap:9px;z-index:4}
.bnr .bnr-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.34);
 box-shadow:0 1px 4px rgba(0,0,0,.5);
 animation-duration:15s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.bnr .bnr-dots i:nth-child(1){animation-name:dotOne}
.bnr .bnr-dots i:nth-child(2){animation-name:dotTwo}
@keyframes dotOne{0%,28%{background:#fff}45%,62%{background:rgba(255,255,255,.34)}100%{background:#fff}}
@keyframes dotTwo{0%,28%{background:rgba(255,255,255,.34)}45%,62%{background:#fff}100%{background:rgba(255,255,255,.34)}}
@media(prefers-reduced-motion:reduce){.bnr .bnr-dots{display:none}}
@media(max-width:749px){.bnr .bnr-dots{display:none}}
.bnr-copy{position:absolute;top:0;bottom:0;z-index:3;display:flex;flex-direction:column;justify-content:center;
 align-items:flex-start;padding:0 calc(clamp(28px,4vw,68px) + var(--edge,0px));width:calc(min(560px,46%) + var(--edge,0px));text-align:start}
.bnr:not(.inset) .bnr-copy{--edge:50px}
.bnr-copy.side-right{right:0}
.bnr-copy.side-left{left:0}
.bnr-copy.bare.side-left{left:0;right:auto}
/* the docked video occupies the bottom-left corner — keep left-side copy clear of it */
@media(min-width:900px){
  .bnr-copy.side-left:not(.bare){padding-left:calc(max(clamp(28px,4vw,68px),200px) + var(--edge,0px));width:calc(min(620px,52%) + var(--edge,0px))}
}
/* artwork already carries its headline — the CTA tucks under it, same side, same rhythm */
.bnr-copy.bare{top:var(--bare-top,68%);bottom:auto;justify-content:flex-start;width:auto;
 padding:0 0 0 var(--bare-left,18%)}
@media(max-width:749px){
  .bnr-copy,.bnr-copy.bare{position:static;width:auto;padding:20px 7vw 26px;justify-content:flex-start;top:auto}
  .bnr:not(.inset) .bnr-copy{--edge:16px;padding-left:calc(7vw + 16px);padding-right:calc(7vw + 16px)}
  .bnr-copy.bare{padding-top:16px}
}
.kicker{font-family:Poppins,sans-serif;font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--mute);margin-bottom:14px}
.bnr-h{font-size:clamp(26px,4.4vw,60px);font-weight:500;letter-spacing:-.03em;line-height:1.12}
.bnr-p{font-size:clamp(14px,1.5vw,19px);color:#C6CBD4;margin-top:14px;font-weight:300}
.btn{display:inline-block;margin-top:26px;padding:15px 34px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font-size:15px;font-family:inherit;cursor:pointer;transition:opacity .25s}
.btn:disabled{opacity:.45;cursor:default}
.btn:hover{opacity:.85}
.btn.ghost{background:transparent;color:var(--fg)}
.btn.ghost:hover{background:var(--fg);color:var(--bg)}
.btn.link{background:transparent;border:0;padding:0;margin-top:22px;color:#8FE0EA;font-size:16px;font-weight:400;
 display:inline-flex;align-items:center;gap:7px}
.btn.link::after{content:'›';font-size:21px;line-height:0;transform:scaleX(-1) translateY(-1px)}
.btn.link:hover{opacity:1;color:#fff}

.sec{padding:clamp(80px,12vh,152px) 6vw;border-top:1px solid var(--line)}

.vstrip{position:relative;width:100%;background:#0B0D11}
.vs-box{position:relative;width:100%;aspect-ratio:16/9;max-height:86vh;overflow:hidden}
.vs-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vs-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(to left,
 rgba(8,9,11,calc(var(--vscrim,.46) * 1.7)) 0%,rgba(8,9,11,calc(var(--vscrim,.46) * .8)) 44%,transparent 78%)}
.vs-copy{position:absolute;top:0;bottom:0;right:0;z-index:3;width:min(620px,58%);
 display:flex;flex-direction:column;justify-content:center;padding:0 clamp(26px,5vw,80px)}
.vs-copy .kicker{margin-bottom:12px}
.vs-copy h2{font-size:clamp(23px,3.6vw,50px);font-weight:500;letter-spacing:-.03em;line-height:1.14;
 text-shadow:0 2px 20px rgba(0,0,0,.6)}
.vs-copy p{font-size:clamp(14px,1.5vw,18px);color:#D2D7DE;margin-top:14px;line-height:1.75;
 max-width:46ch;text-shadow:0 2px 16px rgba(0,0,0,.55)}
@media(max-width:860px){
  .vs-box{aspect-ratio:4/3;max-height:none}
  .vs-scrim{background:linear-gradient(180deg,transparent 22%,rgba(8,9,11,.92) 94%)}
  .vs-copy{top:auto;bottom:0;left:0;width:auto;justify-content:flex-end;padding:0 24px 28px}
}

/* the hero still paints its still image first — that stays the LCP element — and the
   clip fades in over it once it has enough buffered to play smoothly */
.bnr-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
 opacity:0;transition:opacity .28s linear;pointer-events:none}
.bnr-vid.on{opacity:1}
@media(max-width:749px){
  /* full screen on a phone. svh rather than vh so the browser chrome collapsing
     doesn't make the hero jump. */
  main > .bnr:first-child{height:calc(100svh - var(--promo-h,0px));min-height:520px}
  main > .bnr:first-child picture,
  main > .bnr:first-child img{height:100%;object-fit:cover}
  main > .bnr:first-child picture{position:absolute;inset:0;display:block;width:100%}
  main > .bnr:first-child img{aspect-ratio:auto}
}
.vs-por{position:relative;aspect-ratio:3/4;background:#0B0D11}
.vs-por video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.vmain-sec{border-top:0}
.vmain-sec.vmain-first{border-top:1px solid var(--line)}
.vmain{max-width:1180px;margin:38px auto 0;padding:0 clamp(14px,3.4vw,48px)}
.vmain-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
 border:1px solid var(--line);background:#0B0D11}
.vmain-frame video,.vmain-frame iframe,.vmain-poster{position:absolute;inset:0;width:100%;height:100%;
 border:0;object-fit:contain;background:#000;display:block}
.vmain-play{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:16px;background:rgba(8,9,11,.3);
 border:0;cursor:pointer;color:#fff;font-family:inherit;transition:background .25s}
.vmain-play:hover{background:rgba(8,9,11,.16)}
.vmain-play[hidden]{display:none!important}
.vs-play{border-radius:inherit}
.vs-play .ring{width:clamp(54px,5vw,70px);height:clamp(54px,5vw,70px)}
.vmain-play .ring{width:clamp(62px,7vw,88px);height:clamp(62px,7vw,88px);border-radius:50%;
 background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;
 transition:transform .25s}
.vmain-play .ring svg{width:38%;height:38%;fill:#08090B;display:block}
.vmain-play:hover .ring{transform:scale(1.08)}
.vmain-play .lbl{font-size:14.5px;letter-spacing:.02em;text-shadow:0 2px 14px rgba(0,0,0,.6)}

/* ── articles ─────────────────────────────────────────────────────────────
   The brand's line here is not neutral: AEKE argues it is the better machine.
   What keeps that from reading as noise is that every claim is followed by a
   number from a spec sheet or a link to someone outside the company. */
.art-hero{padding:calc(6vh + 74px) 6vw 0;max-width:900px;margin-inline:auto}
.art-hero .kicker{margin-bottom:14px}
.art-hero h1{font-size:clamp(28px,4.4vw,54px);font-weight:600;letter-spacing:-.03em;line-height:1.12}
.art-hero .deck{font-size:clamp(16px,1.8vw,20px);color:#C6CBD4;line-height:1.8;margin-top:20px}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font-size:13.5px;color:var(--dim)}
.art-meta b{color:#9AA1AD;font-weight:400}
.art-fig{max-width:1120px;margin:clamp(34px,5vh,56px) auto 0;padding:0 6vw}
.art-fig img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--line)}
.art{max-width:760px;margin-inline:auto;padding:0 6vw}
.art h2{font-size:clamp(23px,2.9vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.2;
 margin-top:clamp(44px,6vh,72px)}
.art h3{font-size:clamp(18px,2vw,23px);font-weight:600;margin-top:34px}
.art p{font-size:17px;color:#C6CBD4;line-height:1.95;margin-top:18px}
.art ul{margin-top:18px;padding-inline-start:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.art ul li{display:flex;gap:12px;font-size:16.5px;color:#C6CBD4;line-height:1.75}
.art ul li::before{content:'';flex:0 0 7px;height:7px;border-radius:50%;background:var(--acc-l);margin-top:11px}
.art strong{color:var(--fg);font-weight:600}
.art a{color:var(--acc-l);text-decoration:underline;text-underline-offset:3px}
.tldr{border:1px solid var(--line);border-radius:16px;background:var(--panel);
 padding:clamp(22px,3vw,32px);margin-top:clamp(34px,5vh,52px)}
.tldr .t{font-size:12px;letter-spacing:.18em;color:var(--acc-l);font-family:Poppins,sans-serif}
.tldr ul{margin-top:16px}
.toc{border-inline-start:2px solid var(--line);padding-inline-start:20px;margin-top:34px}
.toc a{display:block;font-size:15px;color:#9AA1AD;text-decoration:none;padding:6px 0}
.toc a:hover{color:var(--acc-l)}
.pull{border-inline-start:3px solid var(--acc-l);padding:6px 22px;margin-top:34px}
.pull p{font-size:clamp(18px,2.1vw,24px);color:var(--fg);line-height:1.6;font-weight:500;margin:0}
.pull cite{display:block;font-style:normal;font-size:14px;color:var(--dim);margin-top:12px}
/* The break-even calculator inside a cost article. It answers with the reader's own
   numbers rather than ours, which is the only version of this argument worth making. */
.calc{border:1px solid var(--line);border-radius:16px;background:var(--panel);
 padding:26px 24px 20px;margin-top:30px}
.calc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.calc-row label{font-size:14.5px;color:#CFD4DC;flex:1}
.calc-row input{width:130px;flex:none;background:#1B1F26;border:1px solid #3A414C;border-radius:9px;
 color:#fff;font-family:inherit;font-size:16px;padding:11px 13px;text-align:center;outline:none;
 transition:border-color .18s,box-shadow .18s}
.calc-row input:focus{border-color:var(--acc-l);box-shadow:0 0 0 3px rgba(143,224,234,.18)}
.calc-out{border-top:1px solid var(--line);margin-top:20px;padding-top:20px}
.calc-out .big{font-size:clamp(24px,3.2vw,34px);font-weight:500;letter-spacing:-.025em;color:var(--acc-l)}
.calc-out .sub{font-size:14px;color:var(--mute);margin-top:5px}
.calc-out .cmp-line{font-size:14.5px;color:#C6CBD4;margin-top:14px;line-height:1.7}
.calc-out b{color:var(--fg);font-weight:500}
.calc-note{font-size:12.5px;color:var(--dim);line-height:1.7;margin-top:16px}
@media(max-width:520px){.calc-row{flex-wrap:wrap;gap:8px}.calc-row input{width:100%}}
.says{display:grid;gap:14px;margin-top:26px}
.say{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--panel)}
.say q{display:block;font-size:16.5px;color:#D2D7DE;line-height:1.8;quotes:none}
.say .src{display:block;font-size:13.5px;color:var(--dim);margin-top:12px}
.art ol{margin-top:18px;padding-inline-start:22px}
.art ol li{font-size:16.5px;color:#C6CBD4;line-height:1.75;margin-top:10px}
.art-img{margin:34px 0 0}
.art-img img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line)}
.art-img figcaption{font-size:13.5px;color:var(--dim);margin-top:10px;text-align:center}
.art-vid{margin-top:34px;aspect-ratio:16/9}
.art-vid iframe,.art-vid video{width:100%;height:100%;border:0;border-radius:14px;background:#000}
.art hr{border:0;border-top:1px solid var(--line);margin:44px 0 0}
.art pre{margin-top:18px;white-space:pre-wrap;font-size:14px;color:#C6CBD4}
/* the reading column is 760px, which is right for prose and far too narrow for a
   four-column table — on a wide screen the table breaks out of the column instead */
@media(min-width:750px){
  .art .cmp2-wrap{width:min(1120px,88vw);
    margin-inline:calc((100% - min(1120px,88vw)) / 2)}
}

.art-cta{max-width:760px;margin:clamp(52px,8vh,90px) auto 0;padding:clamp(28px,4vw,44px) 6vw;
 border:1px solid var(--line);border-radius:18px;background:var(--panel);text-align:center}
.art-cta h2{margin-top:0}
.art-cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}

.acard{display:grid;grid-template-columns:300px 1fr;gap:clamp(20px,3vw,34px);
 border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);
 text-decoration:none;transition:border-color .25s}
.acard:hover{border-color:#3A414C}
.acard .ph{background:#101216}
.acard .ph img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/10}
.acard .bd{padding:clamp(20px,2.4vw,30px) clamp(18px,2.4vw,30px) clamp(20px,2.4vw,30px) 0}
.acard h2{font-size:clamp(19px,2.2vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.acard p{font-size:15px;color:var(--mute);line-height:1.8;margin-top:12px}
.acard .m{font-size:13px;color:var(--dim);margin-top:14px}
.alist{display:flex;flex-direction:column;gap:18px;max-width:1000px;margin:44px auto 0}
@media(max-width:749px){
  .acard{grid-template-columns:1fr}
  .acard .bd{padding:22px}
}

.cmp2-wrap{max-width:1120px;margin:40px auto 0;overflow-x:auto;
 -webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px}
.cmp2{width:100%;min-width:720px;border-collapse:collapse;font-size:15px}
.cmp2 thead th{padding:18px 14px;font-size:14px;font-weight:500;color:#9AA1AD;
 text-align:center;border-bottom:1px solid var(--line);background:#0B0D11;white-space:nowrap}
.cmp2 thead th.me{color:#fff;font-weight:600;background:rgba(143,224,234,.07)}
.cmp2 tbody th{text-align:right;padding:15px 16px;font-weight:400;color:#9AA1AD;
 border-bottom:1px solid var(--line);white-space:nowrap}
.cmp2 td{padding:15px 14px;text-align:center;color:#C6CBD4;border-bottom:1px solid var(--line)}
.cmp2 td.me{color:var(--fg);background:rgba(143,224,234,.05)}
.cmp2 td.win{font-weight:600;color:var(--acc-l)}
.cmp2-sub{display:block;font-size:12px;font-weight:400;color:var(--dim);margin-top:4px}
.cmp2 .yes{color:var(--acc-l);font-size:19px;line-height:1}
.cmp2 .no{color:#4A515D;font-size:17px;line-height:1}
@media(max-width:749px){
  /* a four-column table can't be read on a phone, so each spec becomes its own
     block: the label on top, then the three machines under it. No sideways scroll. */
  .cmp2-wrap{overflow:visible;border:0;border-radius:0}
  .cmp2,.cmp2 tbody,.cmp2 tr,.cmp2 td,.cmp2 th{display:block;min-width:0;width:auto}
  .cmp2 thead{display:none}
  .cmp2 tbody tr{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;
    overflow:hidden;background:var(--panel)}
  .cmp2 tbody th{background:#0B0D11;font-size:13.5px;color:#C6CBD4;padding:12px 16px;
    border-bottom:1px solid var(--line);white-space:normal}
  .cmp2 td{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    text-align:start;padding:11px 16px;font-size:14.5px;border-bottom:1px solid var(--line)}
  .cmp2 td::before{content:attr(data-c);font-size:12.5px;color:var(--dim);flex:0 0 auto}
  .cmp2 td.me::before{color:#9AA1AD}
  .cmp2 td:last-child{border-bottom:0}
  .cmp2 .yes,.cmp2 .no{font-size:17px}
  .cmp2-sub{display:inline;margin:0 6px 0 0}
}
.cmp2 tbody tr:last-child th,.cmp2 tbody tr:last-child td{border-bottom:0}
.cmp2-note{max-width:760px;margin:22px auto 0;text-align:center;font-size:14.5px;
 color:var(--dim);line-height:1.85}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);
 max-width:1120px;margin:clamp(38px,5vh,60px) auto 0}
.pf{border:1px solid var(--line);border-radius:14px;padding:26px 22px;background:var(--panel)}
.pf-n{font-size:clamp(21px,2.5vw,32px);font-weight:600;letter-spacing:-.02em;color:var(--acc-l)}
.pf-t{font-size:14.5px;font-weight:500;margin-top:8px}
.pf-d{font-size:13.5px;color:var(--mute);line-height:1.8;margin-top:9px}
@media(max-width:749px){.proof{grid-template-columns:1fr}}

.ft-sec{border-top:0;padding-block:clamp(52px,7.5vh,100px)}
.ft-sec.ft-first{border-top:1px solid var(--line)}
.ft{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.2vw,74px);
 align-items:center;max-width:1280px;margin-inline:auto}
.ft.flip .ft-im{order:2}
.ft-im{border-radius:16px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.ft-im img{width:100%;display:block;object-fit:cover;aspect-ratio:4/3}
.ft-tx h2{font-size:clamp(23px,2.9vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.16}
.ft-tx .kicker{margin-bottom:12px}
.ft-tx p{font-size:16px;color:#C6CBD4;line-height:1.9;margin-top:16px}
.ft-pts{margin-top:22px;display:flex;flex-direction:column;gap:13px}
.ft-pts li{list-style:none;display:flex;gap:12px;font-size:15px;color:#9AA1AD;line-height:1.65}
.ft-pts li b{color:var(--fg);font-weight:500}
.ft-pts li::before{content:'';flex:0 0 7px;height:7px;border-radius:50%;
 background:var(--acc-l);margin-top:9px}
@media(max-width:860px){
  .ft{grid-template-columns:1fr;gap:22px}
  .ft.flip .ft-im{order:0}
  .ft-im img{aspect-ratio:3/2}
}

.stack{padding:clamp(48px,7vh,90px) clamp(14px,3.6vw,56px) 0}
.stk{position:sticky;height:min(74vh,58vw);min-height:330px;margin-bottom:clamp(46px,7vh,92px)}
.stk:last-child{margin-bottom:0}
.stk-in{position:relative;height:100%;border-radius:20px;overflow:hidden;background:var(--bg);
 border:1px solid rgba(255,255,255,.12);
 /* a card slides up over the one below it, so the telling shadow is the one it throws
    upward — without it two light artworks in a row read as a single confused image */
 box-shadow:0 -22px 46px rgba(0,0,0,.55),0 26px 60px rgba(0,0,0,.5);
 transform-origin:50% 0%;will-change:transform}
/* Inside a card the banner fills the frame instead of setting its own height. <picture>
   is inline by default and an inline box ignores height, which left the artwork short of
   the card edges — and since a card is stacked over the one before it, that gap showed
   the card underneath. Absolute positioning removes the question, and the opaque
   background means nothing can ever bleed through even if an image has alpha. */
/* the inset wrapper's own padding is what the card frame provides now, and its auto
   height was what collapsed the banner inside it */
.stk .bnr-wrap{padding:0;height:100%}
.stk .bnr{position:relative;height:100%;border-radius:0;background:var(--bg)}
.stk .bnr picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.stk .bnr img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.stk-dim{position:absolute;inset:0;background:#08090B;opacity:0;pointer-events:none;z-index:5}
@media(max-width:749px){
  .stk{height:min(62vh,124vw);min-height:330px}
  .stk-in{border-radius:14px}
  /* a card marked contain holds artwork that carries its own words — it gets a card
     shaped like the artwork and is never cropped */
  .stk.stk-contain{height:auto;min-height:0}
  .stk.stk-contain .stk-in,.stk.stk-contain .bnr-wrap,.stk.stk-contain .bnr{height:auto}
  .stk.stk-contain .bnr picture{position:static;height:auto}
  .stk.stk-contain .bnr img{height:auto;aspect-ratio:var(--ar-m);object-fit:contain}
  /* phones normally drop banner copy below the artwork; inside a fixed-height card that
     puts it outside the frame, so it goes back to being an overlay along the bottom */
  .stk .bnr-copy,.stk .bnr-copy.bare{position:absolute;inset:auto 0 0 0;width:auto;
    justify-content:flex-end;padding:0 22px 22px;top:auto}
  .stk .bnr-scrim{background:linear-gradient(180deg,transparent 26%,rgba(8,9,11,.88) 100%)!important}
  .stk .bnr-h{font-size:24px}
  .stk .bnr-p{font-size:14px;margin-top:8px}
  .stk .btn{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
  .stk{position:static;height:auto;min-height:0}
  .stk .bnr-wrap,.stk .bnr{height:auto}
  .stk .bnr picture{position:static;height:auto}
  .stk .bnr img{height:auto;aspect-ratio:var(--ar-d)}
  .stk-in{transform:none!important}
  .stk-dim{opacity:0!important}
}

/* smooth-scroll shell — required by the inertial scroller; harmless when it never loads */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ── scroll rhythm ────────────────────────────────────────────────────────────
   Strips stacked edge to edge read as one undifferentiated wall. Each block now
   settles into place as it enters the viewport, which gives the eye a beat between
   sections and a reason to keep going. Nothing is hidden until JS confirms it can
   observe — a failed script must never leave the page blank. */
html.rv-on [data-rv]{--ease:cubic-bezier(.22,.61,.36,1);
 transition:opacity .75s var(--ease),transform .75s var(--ease),
            clip-path .95s var(--ease),filter .75s ease}
html.rv-on [data-rv].in{opacity:1;transform:none;filter:none}
html.rv-on [data-rv][data-rv-d="1"]{transition-delay:.09s}
html.rv-on [data-rv][data-rv-d="2"]{transition-delay:.18s}

/* Four entrances, cycled so no two neighbours share one. Hebrew reads right to left,
   so "in from the side" means in from the right. */
html.rv-on [data-rv-fx="slide"]{opacity:0;transform:translateX(64px)}
html.rv-on [data-rv-fx="rise"] {opacity:0;transform:translateY(42px) scale(.986)}
/* image and copy arrive from opposite sides — transform only, nothing to rasterise */
html.rv-on [data-rv-fx="split"]{opacity:0}
html.rv-on [data-rv-fx="split"] picture{display:block;transform:translateX(-54px);
 transition:transform .95s var(--ease)}
html.rv-on [data-rv-fx="split"] .bnr-copy{transform:translateX(60px);
 transition:transform .95s var(--ease)}
html.rv-on [data-rv-fx="split"].in picture,
html.rv-on [data-rv-fx="split"].in .bnr-copy{transform:none}
/* hint the compositor only while a block is still waiting; dropped the moment it lands
   so we aren't holding layers for the whole page */
html.rv-on [data-rv]:not(.in){will-change:transform,opacity,clip-path}
/* a wipe: the block is uncovered from the right edge inward, no fade at all */
html.rv-on [data-rv-fx="mask"] {clip-path:inset(0 0 0 100%)}
html.rv-on [data-rv-fx="mask"].in{clip-path:inset(0 0 0 0)}

/* the artwork drifts back to true scale as the strip arrives — slow enough to feel
   like depth rather than an animation. Not on the wipe; that one carries itself. */
html.rv-on .bnr[data-rv-fx="slide"] picture,
html.rv-on .bnr[data-rv-fx="rise"] picture{display:block;transform:scale(1.07);
 transform-origin:50% 50%;transition:transform 1.5s var(--ease)}
html.rv-on .bnr[data-rv-fx="slide"].in picture,
html.rv-on .bnr[data-rv-fx="rise"].in picture{transform:none}

@media(prefers-reduced-motion:reduce){
  html.rv-on [data-rv],html.rv-on .bnr[data-rv] picture{
    opacity:1!important;transform:none!important;filter:none!important;
    clip-path:none!important;transition:none!important}
}
.sec-h{font-size:clamp(26px,3.6vw,50px);font-weight:500;letter-spacing:-.03em;line-height:1.15;text-align:center}
.sec-p{font-size:16px;color:var(--mute);line-height:1.85;max-width:720px;margin:22px auto 0;text-align:center}

.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:44px}
.card{border:1px solid var(--line);background:var(--panel);border-radius:16px;overflow:hidden}
.card .ph{aspect-ratio:1;overflow:hidden;border-radius:14px;background:#000}
.card .ph img{width:100%;height:100%;object-fit:contain}
.card .bd{padding:24px}
.card .n{font-size:12px;color:var(--dim);letter-spacing:.14em;margin-bottom:8px}
.card .t{font-size:21px;font-weight:500;margin-bottom:10px}
.card .d{font-size:14px;color:var(--mute);line-height:1.7}

.marquee{overflow:hidden;padding:clamp(56px,8vh,104px) 0;border-top:1px solid var(--line)}
.marquee .track{display:flex;gap:14px;width:max-content;animation:slide 60s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(50%)}}
.chip{width:clamp(220px,20vw,300px);flex:0 0 auto}
.chip .ph{position:relative;aspect-ratio:1;background:#000;overflow:hidden;border-radius:14px}
.chip img{width:100%;height:100%;object-fit:contain}
.chip .badge{position:absolute;inset-inline-start:14px;bottom:14px;width:46px;height:46px;border-radius:50%;
 background:#fff;display:flex;align-items:center;justify-content:center;font-size:19px}
.chip .l{font-size:19px;font-weight:500;color:var(--fg);margin-top:16px}

.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(190px,15vw,240px),1fr));gap:10px;margin-top:44px}
.ig{aspect-ratio:1;overflow:hidden;background:var(--panel);display:block;border-radius:12px}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .3s}
.ig:hover img{transform:scale(1.06);opacity:.85}
.sec-vid{padding:70px 50px;border-top:0}
.vids{display:grid;grid-template-columns:repeat(4,1fr);
 grid-auto-rows:clamp(184px,20.8vw,300px);gap:clamp(10px,1.25vw,20px);margin-top:34px}
.vids .m{position:relative;overflow:hidden;border-radius:4px;background:#101216}
.vids .m video{width:100%;height:100%;object-fit:cover}
.vids .m.a{grid-area:1/1/3/3}
.vids .m.b{grid-area:2/3/3/5}
@media(max-width:749px){
 .sec-vid{padding:28px 16px}
 .vids{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,40vw,220px);gap:10px}
 .vids .m.a{grid-area:1/1/3/3}.vids .m.b{grid-area:3/1/4/3}
}

.tile{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:52px}
.tile .it{border:1px solid var(--line);background:var(--panel)}
.tile .it img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}
.tile .it .bd{padding:26px;text-align:center}
.tile .it .t{font-size:24px;font-weight:400;margin-bottom:8px}
.tile .it .p{font-size:15px;color:var(--mute)}

.ftr{padding:12vh 6vw 7vh;border-top:1px solid var(--line);font-size:14px;color:var(--mute);line-height:1.9}
.ftr .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:38px;margin-bottom:44px}
.ftr .h{color:var(--fg);font-size:13px;letter-spacing:.14em;margin-bottom:12px}
.ftr .fine{border-top:1px solid var(--line);padding-top:22px;font-size:12px;color:var(--dim)}
.ftr a:hover{color:var(--fg);text-decoration:underline}
/* The legal set sits on one line of its own, quieter than the navigation above it —
   present and findable, without competing with the links people actually click. */
.legal{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:34px;padding-top:22px;
 border-top:1px solid var(--line)}
.legal a{font-size:12.5px;color:var(--dim)}
.legal a:hover{color:var(--mute)}

#wa{position:fixed;right:20px;bottom:20px;width:54px;height:54px;border-radius:50%;background:#25D366;
 display:flex;align-items:center;justify-content:center;z-index:950;box-shadow:0 4px 18px rgba(0,0,0,.45);overflow:visible}
#wa svg{width:28px;height:28px;fill:#fff}
#callfab{position:fixed;right:20px;bottom:88px;width:54px;height:54px;border-radius:50%;
 background:#2FC4CF;border:0;display:flex;align-items:center;justify-content:center;
 z-index:949;color:#06262A;box-shadow:0 4px 18px rgba(0,0,0,.45);transition:transform .2s,filter .2s}
#callfab svg{width:26px;height:26px;stroke-width:1.8}
#callfab:hover{filter:brightness(1.08);transform:translateY(-2px)}
@media(max-width:749px){#callfab{bottom:84px;right:20px}}
#wa{animation:wanudge 9s ease-in-out infinite}
#wa::before{content:'';position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.55;
 animation:waring 9s ease-in-out infinite;z-index:-1}
/* Pinned to the top-right corner of the button, the way a phone badges an app icon.
   Every offset is stated outright — the product page defines a plain .badge pill with
   its own margin and border, and inheriting those was dropping this one below the
   corner on exactly the pages that stylesheet loads. */
#wa .badge{position:absolute;top:-3px;right:-3px;left:auto;bottom:auto;margin:0;border:0;
 z-index:2;box-sizing:border-box;
 min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#E5484D;
 display:flex;align-items:center;justify-content:center;
 font-family:Poppins,sans-serif;font-size:11px;font-weight:600;line-height:1;color:#fff;
 box-shadow:0 0 0 2px #0B0D10,0 1px 4px rgba(0,0,0,.5);pointer-events:none}
@keyframes wanudge{0%,84%,100%{transform:scale(1) rotate(0)}88%{transform:scale(1.09) rotate(-9deg)}
 92%{transform:scale(1.09) rotate(9deg)}96%{transform:scale(1) rotate(0)}}
@keyframes waring{0%,84%,100%{transform:scale(1);opacity:0}88%{opacity:.5}100%{transform:scale(1.9);opacity:0}}
@media(prefers-reduced-motion:reduce){#wa,#wa::before{animation:none}}
#fv{position:fixed;left:18px;bottom:18px;width:clamp(124px,9.5vw,158px);z-index:940;
 background:#000;border:1px solid var(--line);box-shadow:0 10px 34px rgba(0,0,0,.55);overflow:hidden;border-radius:16px}
#fv.hide{display:none}
#fv{transition:opacity .3s,transform .3s}
#fv:hover{opacity:.25}
#fv video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
#fv .x,#fv .pp{position:absolute;width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;
 background:rgba(0,0,0,.55);color:#fff;font-size:13px;line-height:26px;text-align:center;padding:0}
#fv .x{top:7px;right:7px}
#fv .pp{bottom:7px;left:7px}
@media(max-width:749px){#fv{width:112px;left:12px;bottom:12px}}

.pdp{display:grid;
 grid-template-columns:minmax(0,calc((100vh - var(--promo-h,0px) - 132px) * 0.75)) minmax(0,1fr);
 gap:clamp(32px,3.4vw,56px);padding:calc(4vh + 74px) clamp(20px,4vw,64px) 12vh;
 align-items:start;max-width:1460px;margin-inline:auto}
@media(max-width:960px){.pdp{grid-template-columns:minmax(0,1fr);gap:34px}}
.gal{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.gal .main{aspect-ratio:1;border:1px solid var(--line);background:var(--panel);overflow:hidden;border-radius:16px}
.gal .main img{width:100%;height:100%;object-fit:cover}
.gal .thumbwrap{position:relative;min-width:0;max-width:100%;overflow:hidden}
.tnav{position:absolute;top:calc(50% - 5px);transform:translateY(-50%);z-index:3;
 width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
 background:rgba(8,9,11,.86);backdrop-filter:blur(6px);color:var(--fg);
 font-family:inherit;font-size:20px;line-height:1;padding:0 0 2px;cursor:pointer;
 display:none;align-items:center;justify-content:center;transition:opacity .2s,border-color .2s}
.tnav.on{display:flex}
.tnav:hover:not(:disabled){border-color:var(--fg)}
.tnav:disabled{opacity:.25;cursor:default}
.tnav.prev{right:-8px}
.tnav.next{left:-8px}
.gal .thumbs{display:flex;gap:12px;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;
 scroll-snap-type:x proximity;scroll-behavior:smooth;padding-bottom:10px;
 scrollbar-width:thin;scrollbar-color:#3A3F4A transparent;overscroll-behavior-x:contain}
.gal .thumbs::-webkit-scrollbar{height:6px}
.gal .thumbs::-webkit-scrollbar-track{background:transparent}
.gal .thumbs::-webkit-scrollbar-thumb{background:#3A3F4A;border-radius:3px}
.gal .thumbs::-webkit-scrollbar-thumb:hover{background:#5A616E}
/* Fixed tile size: adding more images makes the strip scroll instead of shrinking
   every thumbnail. Snap keeps whole tiles in view rather than slivers. */
.gal .thumbs button{flex:0 0 clamp(92px,23%,124px);padding:0;border:1px solid var(--line);
 background:var(--panel);aspect-ratio:1;overflow:hidden;cursor:pointer;border-radius:11px;
 transition:border-color .2s;scroll-snap-align:start}
.gal .thumbs button[aria-current=true]{border-color:var(--fg)}
.gal .thumbs button:hover{border-color:#5A616E}
/* contain, not cover — a thumbnail shows the whole product, never a crop of it */
.gal .thumbs img{width:100%;height:100%;object-fit:contain;padding:5px}
/* The whole gallery — main image and the thumbnail collage under it — is capped to one
   width so their edges line up, and sized so both fit the first screen without scrolling.
   Square main + a row of thirds means total height = width * 4/3 + gap. */
@media(min-width:961px){ .gal{width:100%;max-width:none;margin-inline:0} }
.buy{min-width:0}
/* the two actions share the column width, pill-shaped, side by side */
.buy-err{margin-top:18px;border:1px solid #4A2C2E;background:#1A1113;border-radius:9px;
 padding:13px 15px;font-size:13.5px;line-height:1.75;color:#E8C9C6}
.buy-err[hidden]{display:none}
.buy-err a{color:#8FE0EA;text-decoration:underline}
/* three small pills on one line — the warranty is an add-on, not a second decision as
   big as the kit itself, so it should not take a third of the buy box */
.cdn{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px 18px;
 flex-wrap:wrap;border:1px solid rgba(240,67,73,.55);border-radius:12px;
 background:linear-gradient(180deg,rgba(240,67,73,.22),rgba(240,67,73,.08));padding:11px 16px}
.cdn[hidden]{display:none}
/* the label carries the urgency, the digits carry the reading — so the label gets the
   colour and the digits get plain white on near-black, which is the only pairing that
   stays legible on a phone in daylight */
.cdn-t{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:#FFD6D7;letter-spacing:.01em;margin:0}
.cdn-t::before{content:'';flex:none;width:16px;height:16px;background:#F04349;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M9.5 2.5h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M9.5 2.5h5'/%3E%3C/svg%3E") center/contain no-repeat;animation:cdnPulse 1.6s infinite}
@keyframes cdnPulse{0%,100%{opacity:1}50%{opacity:.22}}
/* fixed-width cells joined by colons read as one clock instead of four separate boxes */
.cdn-row{display:flex;gap:0}
.cdn .u{position:relative;flex:0 0 auto;width:52px;text-align:center;background:rgba(6,7,9,.8);
 border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px 0}
.cdn .u+.u{margin-inline-start:15px}
.cdn .u+.u::before{content:':';position:absolute;inset-inline-start:-11px;top:50%;
 transform:translateY(-64%);font-size:20px;font-weight:700;color:#F04349}
.cdn .u b{display:block;font-size:clamp(20px,2.5vw,26px);font-weight:600;letter-spacing:-.02em;
 color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.cdn .u i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.04em;
 color:#98A1AD;margin-top:4px}
@media(prefers-reduced-motion:reduce){.cdn-t::before{content:'';flex:none;width:16px;height:16px;background:#F04349;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M9.5 2.5h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M9.5 2.5h5'/%3E%3C/svg%3E") center/contain no-repeat;animation:cdnPulse 1.6s infinite}}

.war-note{margin-top:6px;font-size:12.5px;color:#2FC4CF}
/* Pre-order panel: brand cyan rather than the countdown's red, because this is the offer,
   not the pressure. It sits between the description and the price, where it is read
   before the number rather than after it. */
.po{margin:20px 0 18px;border:1px solid rgba(47,196,207,.5);border-radius:14px;
 background:linear-gradient(180deg,rgba(47,196,207,.14),rgba(47,196,207,.04));padding:14px 16px 13px}
.po[hidden],.badge[hidden]{display:none}
.po-h{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.po-tag{font-size:12px;font-weight:600;letter-spacing:.02em;background:#2FC4CF;color:#06262A;
 padding:4px 11px;border-radius:999px}
.po-date{font-size:13.5px;font-weight:500;color:#BFEFF3}
.po-t{margin:10px 0 0;font-size:15.5px;line-height:1.7;color:#EAF7F8}
.po-t b{color:#fff;font-weight:700;white-space:nowrap}
.po-cta{display:inline-flex;align-items:center;margin-top:12px;border:1.5px solid #2FC4CF;color:#8FE0EA;
 border-radius:999px;padding:9px 18px;font-size:14.5px;font-weight:600;text-decoration:none;
 transition:background .2s,color .2s}
.po-cta:hover{background:#2FC4CF;color:#06262A;text-decoration:none}
.po-fine{margin-top:9px;font-size:12.5px;color:#93A0AD;line-height:1.6}
.pcard .pre-cta{display:block;font-size:12.5px;color:#FFD6D7;margin-top:4px}
.war-note[hidden]{display:none}
.war{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.war-h{font-size:12px;letter-spacing:.14em;color:var(--dim);font-family:Poppins,sans-serif;flex:none}
.war-row{display:flex;gap:7px;flex:1 1 auto;min-width:0}
.war-opt{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;
 align-items:center;gap:1px;border:1px solid var(--line);border-radius:9px;
 padding:8px 6px;cursor:pointer;transition:border-color .2s,background .2s}
.war-opt:hover{border-color:#3A414C}
.war-opt[data-on="1"]{border-color:#2FC4CF;background:rgba(47,196,207,.07)}
.war-opt .n{font-size:13px;color:var(--fg);white-space:nowrap}
.war-opt .p{font-size:12px;color:var(--mute);white-space:nowrap}
.war-opt[data-on="1"] .p{color:#2FC4CF}
.war-opt .tag{position:absolute;top:-8px;inset-inline-start:50%;transform:translateX(-50%);
 font-size:9.5px;font-weight:600;padding:2px 6px;border-radius:4px;background:#2FC4CF;
 color:#06262A;white-space:nowrap}
@media(max-width:430px){.war{gap:8px}.war-h{flex:1 0 100%}}

.buy-actions{display:flex;gap:10px;margin-top:14px}
.buy-assure{margin-top:13px;font-size:12.5px;line-height:1.75;color:var(--mute);text-align:center}
.buy-actions .btn{flex:1 1 0;min-width:0;border-radius:999px;text-align:center;
 padding:15px 16px;font-size:15px;white-space:nowrap}
/* checkout is the action, so it wears the brand teal — the same one as the call button,
   not the pale accent used for links. It lifts and throws a light across on hover: a
   small, cheap signal that this is the button to press. */
.btn.go{background:#2FC4CF;border-color:#2FC4CF;color:#06262A;font-weight:600;
 position:relative;overflow:hidden;box-shadow:0 6px 20px rgba(47,196,207,.26);
 transition:transform .18s,box-shadow .22s,background .2s,border-color .2s}
.btn.go:hover{opacity:1;background:#3FD6E1;border-color:#3FD6E1;transform:translateY(-2px);
 box-shadow:0 11px 30px rgba(47,196,207,.46)}
.btn.go:active{transform:translateY(0);box-shadow:0 4px 14px rgba(47,196,207,.3)}
.btn.go::after{content:'';position:absolute;top:0;bottom:0;width:40%;pointer-events:none;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
 transform:translateX(-170%) skewX(-18deg);opacity:0}
.btn.go:hover::after{animation:goShine .7s ease}
@keyframes goShine{
  from{transform:translateX(-170%) skewX(-18deg);opacity:1}
  to{transform:translateX(330%) skewX(-18deg);opacity:1}}
.btn.go:disabled{opacity:.42;box-shadow:none;transform:none}
.btn.go:disabled::after{display:none}
@media(prefers-reduced-motion:reduce){
  .btn.go,.btn.go:hover,.btn.go:active{transform:none}
  .btn.go:hover::after{animation:none}
}
@media(max-width:430px){.buy-actions{flex-direction:column}.buy-actions .btn{width:100%}}
.buy h1{font-size:clamp(26px,3.2vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.buy .lede{font-size:15px;color:var(--mute);line-height:1.8;margin-top:14px}
.badge{display:inline-block;border:1px solid #3A3F4A;color:#C6CBD4;font-size:12px;padding:7px 14px;margin:22px 0 14px}
.prrow{display:flex;align-items:center;flex-wrap:wrap;gap:11px}
.pr{font-size:clamp(26px,3.1vw,40px);font-weight:500;letter-spacing:-.02em;color:var(--sale);
 display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
/* each price is its own bidi island — otherwise RTL runs the two ₪ signs together
   and the strike-through bleeds across both numbers */
.pr>span{unicode-bidi:isolate;white-space:nowrap}
.pr .was{font-size:1em;color:#C6CBD4;text-decoration:line-through;
 text-decoration-thickness:2px;text-decoration-color:#7C838F;margin:0}
.pill{font-size:clamp(14px,1.35vw,17px);font-weight:600;padding:10px 16px;border-radius:8px;white-space:nowrap;
 font-family:Rubik,Poppins,sans-serif}
.pill.save{background:var(--sale);color:#fff}
.pill.ship{background:#2FC4CF;color:#06262A}
.pill[hidden]{display:none}
/* kit picker: boxed choices in a row, like the brand's own product page */
.opts-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.opt{border:1px solid var(--line);padding:11px 13px;cursor:pointer;border-radius:9px;
 display:flex;flex-direction:row;align-items:center;gap:11px;flex:1 1 190px;min-width:0;
 transition:border-color .2s,background .2s}
.opt .th{width:54px;height:54px;flex:none;border-radius:7px;object-fit:contain;
 background:#fff;padding:3px}
.opt .meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.opt:hover{border-color:#5A616E}
.opt[data-on="1"]{border-color:var(--fg);background:var(--panel)}
.opt .n{font-size:14.5px;line-height:1.35}
.opt .p{font-size:14px;color:#C6CBD4}
.opt .tag{font-size:10.5px;letter-spacing:.1em;color:#08090B;background:#8FE0EA;
 padding:2px 7px;border-radius:4px;align-self:flex-start}
/* benefit grid under the buy button */
.perks{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
 border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:26px}
.perk{background:var(--bg);display:flex;align-items:center;gap:12px;padding:14px 13px}
.perk .v{flex:none;min-width:52px;height:38px;border:1px solid var(--line);border-radius:8px;
 display:flex;align-items:center;justify-content:center;font-family:Poppins,sans-serif;
 font-size:14px;font-weight:500;padding:0 7px}
.perk .t{min-width:0}
.perk .t b{display:block;font-weight:400;font-size:13.5px;margin-bottom:2px}
.perk .t span{color:var(--dim);font-size:12px;line-height:1.5;display:block}
@media(max-width:600px){.perks{grid-template-columns:1fr}}
.tag{font-size:11px;border:1px solid #3A3F4A;padding:2px 8px;margin-inline-start:9px;color:#9AA1AC}
.qty{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:14px;color:var(--mute)}
.qty button{width:38px;height:38px;background:transparent;border:1px solid var(--line);color:var(--fg);font-size:17px;cursor:pointer}
.trust{margin-top:22px;font-size:13px;color:var(--dim);line-height:1.9}
table.spec{width:100%;max-width:820px;margin:44px auto 0;border-collapse:collapse;font-size:15px}
table.spec td{padding:15px 18px;border-bottom:1px solid var(--line)}
table.spec td:first-child{color:var(--mute);width:45%}
table.spec td:last-child{text-align:start;color:var(--fg);font-weight:400}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;font-size:17px;display:flex;justify-content:space-between;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--mute)}
.faq details[open] summary::after{content:'–'}
.faq p{padding:0 0 24px;color:var(--mute);line-height:1.85;font-size:15px}
/* Hebrew callouts: photograph from the CDN, type rendered live by the browser —
   so it stays sharp at any density, is editable, and search engines can read it. */
.shot{position:relative;margin-top:44px;background:#000;overflow:hidden;border-radius:4px}
.shot>img{width:100%;display:block}
.shot .co{position:absolute;display:flex;align-items:center;gap:11px;color:#fff;font-size:15px;
 text-shadow:0 2px 16px rgba(0,0,0,.9)}
.shot .co .dot{width:10px;height:10px;border-radius:50%;background:#8FE0EA;flex:none;
 box-shadow:0 0 0 5px rgba(143,224,234,.20)}
.shot .co .tx{line-height:1.5}
.shot .co .tx i{display:block;font-style:normal;font-family:Poppins,sans-serif;font-size:11px;
 letter-spacing:.15em;color:#8FE0EA;margin-bottom:3px}
.shot .co1{top:16%;right:27%}
.shot .co2{top:31%;right:57%}
.shot .co3{top:80%;right:44%}
@media(max-width:749px){
  .shot .co{font-size:11px;gap:7px}
  .shot .co .dot{width:6px;height:6px;box-shadow:0 0 0 3px rgba(143,224,234,.20)}
  .shot .co .tx i{font-size:8.5px;margin-bottom:1px}
}
/* Customer reviews come from the Reviews CMS collection, so the owner adds and edits
   them in the dashboard. The section stays hidden until there is something real. */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px;margin-top:38px}
.rev{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
 display:flex;flex-direction:column}
.rev .media{aspect-ratio:4/5;background:#000;overflow:hidden}
.rev .media img,.rev .media video{width:100%;height:100%;object-fit:cover;display:block}
.rev .bd{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.rev .stars{color:#F5B851;font-size:14px;letter-spacing:2px}
.rev .tx{font-size:14.5px;line-height:1.8;color:#C6CBD4;flex:1}
.rev .who{font-size:13px;color:var(--dim);border-top:1px solid var(--line);padding-top:11px}
.rev .who b{color:var(--fg);font-weight:400}
.rev .kit{font-size:11.5px;color:var(--acc-l)}
/* An independent reviewer is the strongest thing on this page, so it is labelled as one
   rather than blended in with the customer notes. */
.rev .src{font-size:11.5px;color:var(--dim);display:flex;align-items:center;gap:5px;margin-top:2px}
.rev .src::before{content:'';width:5px;height:5px;border-radius:50%;background:#2FC4CF;flex:none}
.rev-sum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px;
 padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.rev-sum[hidden]{display:none}
.rev-sum .avg{font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1}
.rev-sum .st{color:#F5B851;font-size:15px;letter-spacing:2px}
.rev-sum .ct{font-size:13px;color:var(--dim)}
/* The video is the review here — it is not decoration, so it gets a real play control
   and it plays with sound, which a muted looping testimonial never could. */
.rev .media{position:relative}
.rev-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 background:rgba(8,9,11,.28);border:0;cursor:pointer;padding:0;transition:background .2s}
.rev-play:hover{background:rgba(8,9,11,.14)}
.rev-play[hidden]{display:none!important}
.rev-play .ring{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);
 display:flex;align-items:center;justify-content:center;transition:transform .2s;
 box-shadow:0 6px 20px rgba(0,0,0,.4)}
.rev-play .ring svg{width:40%;height:40%;fill:#08090B;display:block;margin-inline-start:3px}
.rev-play:hover .ring{transform:scale(1.08)}
.rev .yt-mark{position:absolute;bottom:10px;inset-inline-start:10px;font-size:10.5px;
 letter-spacing:.06em;background:rgba(8,9,11,.72);color:#fff;padding:4px 8px;border-radius:5px}
.cmp{width:100%;border-collapse:collapse;margin-top:44px;font-size:15px}
.cmp th{text-align:right;padding:16px 12px;border-bottom:1px solid var(--line);font-weight:500}
.cmp td{padding:15px 12px;border-bottom:1px solid var(--line);color:#C6CBD4;vertical-align:top}
.frm{max-width:560px;margin:34px auto 0;background:var(--panel);border:1px solid var(--line);
 border-radius:16px;padding:30px 28px 26px;display:flex;flex-direction:column;gap:15px}
/* A transparent box with a hairline under it reads as decoration on a dark page, not as
   somewhere to type. Same filled field as the popup: a lighter ground than the card it
   sits on, a border you can see before you focus it, and a placeholder that shows the
   expected shape of the answer. */
.frm label{display:block;font-size:13px;font-weight:500;color:#CFD4DC;letter-spacing:.01em;margin-bottom:7px}
.frm label i{font-style:normal;font-weight:400;color:var(--dim)}
.frm input{width:100%;background:#1B1F26;border:1px solid #3A414C;border-radius:10px;color:#fff;
 font-family:inherit;font-size:16px;padding:14px 15px;outline:none;
 transition:border-color .18s,box-shadow .18s,background .18s}
.frm input::placeholder{color:#7C8494}
.frm input:hover{border-color:#4A525E}
.frm input:focus{background:#20252D;border-color:var(--acc-l);
 box-shadow:0 0 0 3px rgba(143,224,234,.18)}
.frm input.bad{border-color:var(--sale);box-shadow:0 0 0 3px rgba(240,67,73,.16)}
.frm .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frm .btn{margin-top:4px;width:100%;text-align:center;border-radius:10px;padding:16px 34px;font-weight:500}
.frm .fine{font-size:12.5px;color:var(--dim);line-height:1.7;text-align:center}
@media(max-width:520px){.frm{padding:24px 18px 22px}.frm .row{grid-template-columns:1fr}}
#msg{font-size:14px;margin-top:16px;min-height:20px}
#cartbar{position:fixed;bottom:0;inset-inline:0;background:var(--panel);border-top:1px solid var(--line);
 padding:13px 6vw;display:none;align-items:center;justify-content:space-between;gap:16px;z-index:940}
#cartbar.on{display:flex}
#cartbar button{background:var(--fg);color:var(--bg);border:0;font-family:inherit;font-size:14px;padding:12px 28px;cursor:pointer}

.crumbs{padding:calc(7vh + 60px) 6vw 0;font-size:13px;color:var(--dim)}
.crumbs a:hover{color:var(--fg)}
.coll-head{padding:4vh 6vw 0}
.coll-head h1{font-size:clamp(28px,3.8vw,52px);font-weight:500;letter-spacing:-.03em}
.coll-head p{font-size:16px;color:var(--mute);line-height:1.85;margin-top:16px;max-width:680px}
.coll-head .coll-note{font-size:14.5px;margin-top:12px}
.coll-head .coll-note a{color:var(--acc-l);text-decoration:underline;text-underline-offset:3px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
 padding:5vh 6vw 3vh;font-size:14px;color:var(--mute)}
.bar select{background:var(--panel);color:var(--fg);border:1px solid var(--line);
 font-family:inherit;font-size:14px;padding:10px 14px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:1px;
 background:var(--line);border-block:1px solid var(--line);margin-bottom:12vh}
.pcard{background:var(--bg);padding:0 0 24px;display:flex;flex-direction:column}
.pcard .ph{aspect-ratio:1;background:var(--panel);overflow:hidden}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pcard:hover .ph img{transform:scale(1.04)}
.pcard .in{padding:20px 22px 0;display:flex;flex-direction:column;gap:9px;flex:1}
.pcard .nm{font-size:15px;line-height:1.5}
.pcard .ds{font-size:13px;color:var(--dim);line-height:1.6;flex:1}
.pcard .pz{font-size:19px;font-weight:400}
.pcard .pre{font-size:11px;color:#9AA1AC;border:1px solid var(--line);padding:3px 8px;align-self:flex-start}
.pcard button{margin:14px 22px 0;background:transparent;border:1px solid var(--line);color:var(--fg);
 font-family:inherit;font-size:13px;padding:11px;cursor:pointer}
.pcard button:hover{border-color:var(--fg)}
.empty{padding:14vh 6vw;text-align:center;color:var(--mute)}

.cart-wrap{display:grid;grid-template-columns:1fr 372px;gap:56px;padding:5vh 6vw 12vh;align-items:start}
@media(max-width:899px){.cart-wrap{grid-template-columns:1fr;gap:30px;padding:4vh 6vw 10vh}}
.ci{display:grid;grid-template-columns:104px 1fr auto;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.ci:first-child{border-top:1px solid var(--line)}
.ci .ph{width:104px;aspect-ratio:1;background:var(--panel);overflow:hidden;border-radius:3px}
.ci .ph img{width:100%;height:100%;object-fit:cover}
.ci .nm{font-size:16px;line-height:1.5;margin-bottom:6px}
.ci .nm a:hover{text-decoration:underline}
.ci .op{font-size:13px;color:var(--dim);line-height:1.7}
.ci .pre{display:inline-block;font-size:11px;color:#9AA1AC;border:1px solid var(--line);padding:3px 8px;margin-top:8px}
.ci .rt{text-align:end;display:flex;flex-direction:column;align-items:flex-end;gap:12px;white-space:nowrap}
.ci .lp{font-size:17px;font-weight:400}
.cqty{display:inline-flex;align-items:center;border:1px solid var(--line)}
.cqty button{width:34px;height:34px;background:transparent;border:0;color:var(--fg);font-family:inherit;
 font-size:16px;line-height:1;cursor:pointer}
.cqty button:hover:not(:disabled){background:var(--panel)}
.cqty button:disabled{opacity:.3;cursor:default}
.cqty span{min-width:34px;text-align:center;font-size:14px}
.rm{background:none;border:0;color:var(--dim);font-family:inherit;font-size:13px;cursor:pointer;padding:0}
.rm:hover{color:#E5484D;text-decoration:underline}
.cart-sum{border:1px solid var(--line);background:var(--panel);padding:28px 26px;position:sticky;top:calc(var(--promo-h,0px) + 96px)}
@media(max-width:899px){.cart-sum{position:static}}
.cart-sum h2{font-size:19px;font-weight:400;margin-bottom:22px}
.cart-sum .row{display:flex;justify-content:space-between;gap:14px;font-size:15px;color:var(--mute);padding:9px 0}
.cart-sum .row.tot{border-top:1px solid var(--line);margin-top:12px;padding-top:18px;color:var(--fg);font-size:20px}
.cart-sum .note{font-size:12.5px;color:var(--dim);line-height:1.8;margin-top:16px}
.cart-sum .btn{width:100%;text-align:center;margin-top:20px}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:11px;
 border:1px solid #25D366;color:#25D366;background:transparent;font-family:inherit;font-size:14.5px;
 padding:14px;cursor:pointer;text-decoration:none}
.wa-btn:hover{background:#25D366;color:#08090B}
.wa-btn svg{width:19px;height:19px;fill:currentColor}
.cart-empty{padding:12vh 6vw;text-align:center}
.cart-empty p{font-size:17px;color:var(--mute);margin-bottom:26px}

.doc{max-width:860px;margin-inline:auto;padding:calc(10vh + 60px) 6vw 14vh}
.doc h1{font-size:clamp(30px,4vw,52px);font-weight:300;letter-spacing:-.03em;line-height:1.15}
.doc .sub{font-size:17px;color:var(--mute);line-height:1.9;margin-top:20px}
.doc h2{font-size:22px;font-weight:500;margin:6vh 0 16px}
.doc p{font-size:16px;color:#C6CBD4;line-height:1.95;margin-bottom:16px}
.doc ul{margin:0 20px 20px 0;color:#C6CBD4;line-height:2}
.doc .note{border-inline-start:2px solid var(--line);padding-inline-start:20px;color:var(--mute);font-size:15px;line-height:1.9}
.doc .cta{margin-top:7vh}