/* Kinetico Systems prototype: three versions (data-v a|b|c), five palettes (data-p 1-5), four type pairings (data-f 1-4) */
@font-face{font-family:"KGotham";src:url(fonts/Gotham-Light.otf) format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"KGotham";src:url(fonts/Gotham-Book.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"KGotham";src:url(fonts/Gotham-Medium.otf) format("opentype");font-weight:500 600;font-display:swap}
@font-face{font-family:"KGotham";src:url(fonts/Gotham-Bold.otf) format("opentype");font-weight:700 800;font-display:swap}
:root{--ease:cubic-bezier(.2,.7,.1,1);--wrap:1320px;--pad:clamp(20px,4vw,56px);--r:22px;--rs:14px;--btn:999px}
/* palettes: 1 and 2 are Kinetico's own (blue #003594, magenta #E70D85, sky #298FC2, ice #E3F0F8). --acc is a hair deeper than #E70D85 so white button text passes AA */
[data-p="1"]{--bg:#FFFFFF;--bg2:#EEF5FB;--card:#FFFFFF;--soft:#E3F0F8;--ink:#0B1B3F;--ink2:#2B3A5C;--mute:#56627C;--line:rgba(0,53,148,.13);--acc:#D60A7C;--acc-ink:#FFFFFF;--acc2:#E70D85;--em:#E70D85;--eb:#003594;--deep:#003594;--deep2:#00287A;--deep-ink:#FFFFFF;--deep-mute:#C5D3EE;--deep-acc:#7CC4EA}
[data-p="2"]{--bg:#FFFFFF;--bg2:#E3F0F8;--card:#FFFFFF;--soft:#E3F0F8;--ink:#0B1B3F;--ink2:#2B3A5C;--mute:#53617A;--line:rgba(41,143,194,.22);--acc:#003594;--acc-ink:#FFFFFF;--acc2:#298FC2;--em:#1D60A8;--eb:#1D60A8;--deep:#0B4F94;--deep2:#003594;--deep-ink:#FFFFFF;--deep-mute:#CFE3F3;--deep-acc:#9ED3F0}
[data-p="3"]{--bg:#F3F8F9;--bg2:#E3EEF0;--card:#FFFFFF;--soft:#DCEBEE;--ink:#0E2A33;--ink2:#2C4750;--mute:#536A72;--line:rgba(14,42,51,.13);--acc:#0B5E7A;--acc-ink:#FFFFFF;--acc2:#5FB7CF;--em:#0B6C8A;--eb:#0B5E7A;--deep:#0B3A4A;--deep2:#082E3B;--deep-ink:#F3F8F9;--deep-mute:#A9C7CF;--deep-acc:#8FD3E4}
[data-p="4"]{--bg:#F6F7F4;--bg2:#EAEDE8;--card:#FFFFFF;--soft:#E2E8EC;--ink:#15212D;--ink2:#33414F;--mute:#5A6571;--line:rgba(21,33,45,.14);--acc:#1F3B57;--acc-ink:#FFFFFF;--acc2:#3D8BC4;--em:#2A6EA3;--eb:#2A6EA3;--deep:#1F3B57;--deep2:#172D43;--deep-ink:#F6F7F4;--deep-mute:#B4C1CD;--deep-acc:#8CC2E8}
[data-p="5"]{--bg:#FAF7F0;--bg2:#F1EBDD;--card:#FFFDF8;--soft:#EDE5D3;--ink:#1B2433;--ink2:#38404E;--mute:#5F6370;--line:rgba(27,36,51,.14);--acc:#1D3A5F;--acc-ink:#FFFFFF;--acc2:#C98F2E;--em:#9A6A1C;--eb:#8A5E14;--deep:#1D3A5F;--deep2:#152C48;--deep-ink:#FAF7F0;--deep-mute:#C2C9D4;--deep-acc:#E3B666}
/* type: 1 is Kinetico's own Gotham, served from their font files */
[data-f="1"]{--fd:"KGotham",Montserrat,system-ui,sans-serif;--fb:"KGotham",Montserrat,system-ui,sans-serif;--dw:700;--dls:-.015em;--dem:normal;--ds:.9;--bw:400}
[data-f="2"]{--fd:"Fraunces",Georgia,serif;--fb:"Inter",system-ui,sans-serif;--dw:350;--dls:-.02em;--dem:italic;--ds:1.04;--bw:400}
[data-f="3"]{--fd:"Manrope",system-ui,sans-serif;--fb:"Manrope",system-ui,sans-serif;--dw:700;--dls:-.035em;--dem:normal;--ds:.92;--bw:500}
[data-f="4"]{--fd:"Plus Jakarta Sans",system-ui,sans-serif;--fb:"Plus Jakarta Sans",system-ui,sans-serif;--dw:700;--dls:-.03em;--dem:normal;--ds:.9;--bw:400}
[data-v="b"]{--r:28px;--rs:20px}
[data-v="c"]{--r:4px;--rs:3px;--btn:4px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--bw) 17px/1.62 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s}
[data-v="c"] body{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;background-attachment:fixed}
[data-v="c"] .sec--alt{background:color-mix(in srgb,var(--bg2) 88%,transparent)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--fd);font-weight:var(--dw);letter-spacing:var(--dls);line-height:1.05;margin:0}
h1 em,h2 em,h3 em{font-style:var(--dem);color:var(--em)}
h2{font-size:calc(clamp(34px,4.4vw,62px)*var(--ds))}
h3{font-size:calc(23px*var(--ds));line-height:1.2}
p{margin:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;background:var(--acc);color:var(--acc-ink);border-radius:8px}.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--acc2);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12.5px/1.3 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--eb)}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--acc2);flex:none}
[data-v="c"] .eyebrow,[data-v="c"] small,[data-v="c"] .crumb{font-family:"IBM Plex Mono",monospace;letter-spacing:.04em}
[data-v="b"] .eyebrow::before{width:8px;height:8px;border-radius:50%}
.lead{font-size:clamp(18px,1.45vw,21px);line-height:1.55;color:var(--ink2);max-width:640px;margin-top:22px}
.mute{color:var(--mute)}
.sec{padding:clamp(76px,9vw,130px) 0}
.sec--tight{padding:clamp(52px,6vw,90px) 0}
.sec--alt{background:var(--bg2)}
.sec--deep{background:var(--deep);color:var(--deep-ink)}
.sec--deep h2 em,.sec--deep .eyebrow{color:var(--deep-acc)}.sec--deep .eyebrow::before{background:var(--deep-acc)}
.sh{max-width:900px;margin-bottom:clamp(36px,5vw,60px)}.sh .eyebrow{margin-bottom:18px}
.sh--r{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,90px);align-items:center}
.split .eyebrow{margin-bottom:18px}
.pt{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sh .pt{margin-top:0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:var(--btn);background:var(--acc);color:var(--acc-ink);font:600 16px/1.1 var(--fb);border:1.5px solid var(--acc);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s;white-space:nowrap}
.btn svg{width:15px;height:15px;transition:transform .25s var(--ease)}.btn:hover svg{transform:translateX(4px)}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px var(--acc)}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}.btn--ghost:hover{box-shadow:none}
.btn--sm{padding:11px 18px;font-size:14.5px}
.tl{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--eb);border-bottom:1.5px solid currentColor;padding-bottom:3px}.tl svg{width:14px;height:14px}
.ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;color:var(--ink2)}.ticks li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}.ticks svg{width:18px;height:18px;margin-top:4px;color:var(--acc2)}
.ticks--lg{font-size:clamp(18px,1.4vw,20px);gap:18px;margin:0}.ticks--lg li{padding-bottom:18px;border-bottom:1px solid var(--line)}
/* version switch */
.js .vx{display:none}
[data-v="a"] .vx-a,[data-v="b"] .vx-b,[data-v="c"] .vx-c{display:block}
/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}.ln>span{display:block}
.js .lines .ln>span{transform:translateY(105%);transition:transform 1s var(--ease)}
.js .lines.in .ln>span{transform:none}.js .lines.in .ln:nth-child(2)>span{transition-delay:.08s}.js .lines.in .ln:nth-child(3)>span{transition-delay:.16s}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:60;transition:transform .45s var(--ease),background .3s,box-shadow .3s}
.hdr__in{max-width:1440px;margin:0 auto;padding:16px var(--pad);display:flex;align-items:center;gap:28px}
.hdr.solid{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.hdr.hide{transform:translateY(-100%)}
.logo{flex:none}.logo img{height:40px;width:auto}.logo .lw{display:none}
.home .hdr:not(.solid) .logo .lc{display:var(--lc,block)}.home .hdr:not(.solid) .logo .lw{display:var(--lw,none)}
[data-v="a"] .home .hdr:not(.solid){--lc:none;--lw:block;color:#fff}
.nav{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav .nl,.dd__b{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;font-weight:500;font-size:15px;background:none;border:0;cursor:pointer;transition:background .2s}
.dd__b svg{width:11px;height:11px;transition:transform .25s}
.nav .nl:hover,.dd__b:hover,.dd.open .dd__b{background:color-mix(in srgb,currentColor 9%,transparent)}
.nav .on>.dd__b,.nav .nl.on{color:var(--eb)}
[data-v="a"] .home .hdr:not(.solid) .nav .on>.dd__b{color:#fff}
.dd{position:relative}
.dd__m{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);min-width:290px;padding:10px;border-radius:var(--rs);background:var(--card);color:var(--ink);box-shadow:0 24px 60px -18px rgba(0,30,90,.35),0 0 0 1px var(--line);display:grid;opacity:0;visibility:hidden;transition:opacity .22s,transform .3s var(--ease),visibility 0s .3s}
.dd.open .dd__m,.dd:focus-within .dd__m{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s,transform .3s var(--ease)}
.dd.open .dd__b svg{transform:rotate(180deg)}
.dd__m a{display:grid;gap:2px;padding:11px 14px;border-radius:calc(var(--rs) - 4px)}.dd__m a:hover{background:var(--bg2)}
.dd__m span{font-weight:600}.dd__m small{font-size:13px;color:var(--mute)}
.hdr__act{display:flex;align-items:center;gap:16px}
.hdr__tel{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}.hdr__tel svg{width:16px;height:16px}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform .3s}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.nav-open .burger span:first-child{transform:translateY(4px) rotate(45deg)}.nav-open .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
.crumb{display:flex;gap:8px;font-size:13.5px;color:var(--mute);margin-bottom:22px}.crumb a:hover{color:var(--ink)}

/* ---------- home hero A: full-bleed photo, postal code ---------- */
.ha{position:relative;min-height:min(100svh,940px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.ha__bg{position:absolute;inset:0;overflow:hidden}
.ha__bg img{width:100%;height:100%;object-fit:cover;object-position:70% 30%;transform:scale(1.08);transition:transform 2.4s var(--ease)}
.js .ha.in .ha__bg img,.qa .ha__bg img{transform:scale(1)}
.ha__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,color-mix(in srgb,var(--deep2) 92%,transparent) 0%,color-mix(in srgb,var(--deep) 70%,transparent) 38%,transparent 70%),linear-gradient(0deg,color-mix(in srgb,var(--deep2) 60%,transparent),transparent 40%)}
.ha__in{position:relative;width:100%;padding-top:150px;padding-bottom:clamp(110px,13vw,170px)}
.ha .eyebrow{color:#fff}.ha .eyebrow::before{background:var(--acc2)}
.ha h1{font-size:calc(clamp(44px,8vw,118px)*var(--ds));margin-top:20px;max-width:12ch}
.ha h1 em{color:#fff;background:linear-gradient(transparent 72%,var(--acc2) 72%,var(--acc2) 86%,transparent 86%)}
.ha .lead{color:rgba(255,255,255,.9);max-width:560px}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(50px,7vw,110px);fill:var(--bg)}
.ha__w path{animation:wv 9s ease-in-out infinite alternate}
@keyframes wv{to{d:path("M0 50c140 40 260 50 380 30s220-46 340-40 250 40 370 44 240-26 350-44v80H0Z")}}
.pc{display:flex;gap:8px;margin-top:30px;max-width:560px;padding:7px;border-radius:calc(var(--btn) + 7px);background:#fff;box-shadow:0 20px 50px -20px rgba(0,0,0,.45)}
[data-v="c"] .pc{border-radius:6px}
.pc input{flex:1;min-width:0;border:0;background:none;padding:0 16px;font:500 16px var(--fb);color:#0B1B3F;outline:none}
.pc input::placeholder{color:#6B7486}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:26px 0 0;padding:0;font-size:14.5px;font-weight:500}
.chips li{display:flex;align-items:center;gap:7px}.chips svg{width:15px;height:15px;color:var(--acc2)}
.ha .chips svg{color:#7CC4EA}

/* ---------- home hero B: calm, ripples ---------- */
.hb{position:relative;padding:170px 0 clamp(80px,9vw,130px);overflow:hidden;background:linear-gradient(180deg,var(--soft),var(--bg) 85%)}
.ripple{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.hb__in{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,6vw,90px);align-items:center}
.hb h1{font-size:calc(clamp(52px,7.4vw,112px)*var(--ds));margin-top:20px}
.hb__btns{display:flex;gap:22px;align-items:center;margin-top:34px;flex-wrap:wrap}
.hb__f{margin:0;position:relative}
.hb__f img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 28px 28px;box-shadow:0 40px 80px -40px rgba(11,58,74,.5)}
.hb__f figcaption{position:absolute;left:-28px;bottom:36px;padding:16px 20px;border-radius:18px;background:var(--card);box-shadow:0 18px 40px -18px rgba(0,0,0,.3);font:var(--dw) 19px/1.25 var(--fd);max-width:220px}

/* ---------- home hero C: product stage with hotspots ---------- */
.hcx{padding:150px 0 clamp(70px,8vw,110px);overflow-x:clip}
.hcx__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(30px,5vw,80px);align-items:center}
.hcx h1{font-size:calc(clamp(48px,6.6vw,100px)*var(--ds));margin-top:20px}
.hcx__stage{position:relative;aspect-ratio:1/1;border:1px solid var(--line);background:radial-gradient(circle at 50% 60%,var(--card),var(--soft) 70%);display:grid;place-items:center;border-radius:var(--r)}
.hcx__stage::before{content:"FIG. 01 / NON-ELECTRIC";position:absolute;left:16px;top:14px;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;color:var(--mute)}
.hcx__p{max-height:76%;width:auto;filter:drop-shadow(0 30px 30px rgba(0,0,0,.18));transition:opacity .35s,transform .5s var(--ease)}
.hcx__p.swap{opacity:0;transform:translateY(10px)}
.hs{position:absolute;left:var(--x);top:var(--y);width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:0;background:none;cursor:pointer;padding:0}
.hs i{position:absolute;inset:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 22%,transparent)}
.hs i::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid var(--acc);animation:ping 2.2s var(--ease) infinite}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}
.hs__t{position:absolute;left:44px;top:50%;transform:translate(-6px,-50%);width:220px;padding:12px 14px;border-radius:var(--rs);background:var(--card);color:var(--ink);box-shadow:0 18px 40px -14px rgba(0,0,0,.3),0 0 0 1px var(--line);font-size:14px;line-height:1.45;text-align:left;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--ease)}
.hs__t b{display:block;font-size:15px;margin-bottom:2px}
.hs--l .hs__t{left:auto;right:44px;transform:translate(6px,-50%)}
.hs:hover .hs__t,.hs:focus-visible .hs__t,.hs.on .hs__t{opacity:1;transform:translate(0,-50%)}
.hcx__tabs{display:flex;gap:0;margin-top:14px;border:1px solid var(--line);border-radius:var(--rs);overflow:hidden}
.hcx__tab{flex:1;padding:13px 10px;border:0;background:var(--card);cursor:pointer;font-weight:600;font-size:14.5px;border-right:1px solid var(--line)}.hcx__tab:last-child{border-right:0}
.hcx__tab.on{background:var(--acc);color:var(--acc-ink)}

/* ---------- benefits: A bento, B stacking cards, C columns ---------- */
.bens{display:grid;gap:18px}
.ben{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.ben__i img{width:100%;height:100%;object-fit:cover}
.ben__t{padding:26px}.ben__t small{font-weight:600;color:var(--eb)}.ben__t h3{margin:8px 0 10px}.ben__t p{color:var(--ink2)}
[data-v="a"] .bens{grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto}
[data-v="a"] .ben:first-child{grid-row:span 2;display:grid;grid-template-rows:1fr auto}
[data-v="a"] .ben:first-child .ben__i{min-height:380px}
[data-v="a"] .ben:not(:first-child){display:grid;grid-template-columns:42% 1fr}
[data-v="b"] .bens{gap:0}
[data-v="b"] .ben{position:sticky;top:110px;display:grid;grid-template-columns:1fr 1fr;min-height:440px;margin-bottom:28px;box-shadow:0 30px 60px -40px rgba(11,58,74,.45),0 0 0 1px var(--line)}
[data-v="b"] .ben:nth-child(2){top:130px}[data-v="b"] .ben:nth-child(3){top:150px}
[data-v="b"] .ben__t{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
[data-v="b"] .ben__t h3{font-size:calc(clamp(28px,3vw,42px)*var(--ds))}
[data-v="c"] .bens{grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line)}
[data-v="c"] .ben{border-radius:0;box-shadow:none;border-right:1px solid var(--line)}[data-v="c"] .ben:last-child{border-right:0}
[data-v="c"] .ben__i{aspect-ratio:4/3;filter:saturate(.85)}

/* ---------- scroll words ---------- */
.mani{padding:clamp(70px,8vw,120px) 0}
.mani__p{font:var(--dw) calc(clamp(30px,4vw,58px)*var(--ds))/1.15 var(--fd);letter-spacing:var(--dls);max-width:1100px}
.mani__p span{color:color-mix(in srgb,var(--ink) 18%,transparent);transition:color .35s}
.mani__p span.lit{color:var(--ink)}
.mani__p span:nth-child(n+8):nth-child(-n+9).lit{color:var(--em)}

/* ---------- hardness calculator ---------- */
.hw{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:0 30px 70px -40px rgba(0,30,90,.4),0 0 0 1px var(--line)}
.hw__l{padding:clamp(24px,3vw,40px);display:grid;gap:20px;align-content:start}
.hw__l h3{font-size:calc(26px*var(--ds))}
.sel{display:grid;gap:8px;font-weight:600;font-size:14.5px}
.sel select,.form select{appearance:none;padding:13px 40px 13px 14px;border-radius:var(--rs);border:1px solid var(--line);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2356627C' stroke-width='1.6'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center/12px;font:500 16px var(--fb);color:var(--ink)}
.sl{display:grid;gap:10px;font-weight:600;font-size:14.5px}.sl span{display:flex;justify-content:space-between}.sl b{color:var(--eb)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--acc2) var(--f,50%),var(--line) var(--f,50%));outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--card);border:3px solid var(--acc);cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.15)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--card);border:3px solid var(--acc);cursor:pointer}
.hw__note{font-size:13px;color:var(--mute);line-height:1.5}.hw__note a{text-decoration:underline}
.hw__r{background:var(--deep);color:var(--deep-ink);padding:clamp(24px,4vw,56px);display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.hw__out{display:grid;gap:4px}.hw__out small{font-size:13px;color:var(--deep-mute)}.hw__out b{font:700 26px/1.1 var(--fd);margin-bottom:14px}
.hw__out .hw__big{font-size:calc(clamp(40px,4vw,58px)*var(--ds));color:var(--deep-acc)}
.hw__pipe{width:clamp(110px,14vw,190px);aspect-ratio:1;border-radius:50%;background:#9AA6B4;display:grid;place-items:center;box-shadow:inset 0 0 0 8px #C9D1DB}
.hw__pipe i{display:block;width:calc(88% - var(--k,30) * 1px);height:calc(88% - var(--k,30) * 1px);border-radius:50%;background:radial-gradient(circle at 35% 35%,#8FD3F0,#2A7FC0);box-shadow:0 0 0 calc(var(--k,30) * .5px) #E8E0CF;transition:all .6s var(--ease)}

/* ---------- product finder ---------- */
.fd{border-radius:var(--r);padding:clamp(24px,3vw,40px);background:var(--card);box-shadow:0 30px 70px -40px rgba(0,30,90,.4),0 0 0 1px var(--line);display:grid;gap:22px}
.fd__n{font-size:13px;font-weight:600;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.fd__q{margin-top:8px;font-size:calc(28px*var(--ds))}
.fd__s{display:none;gap:10px}
.fd[data-step="1"] .fd__s--1,.fd[data-step="hard"] .fd__s--hard,.fd[data-step="drink"] .fd__s--drink{display:grid}
.fd__s button{display:grid;gap:3px;text-align:left;padding:18px 20px;border-radius:var(--rs);border:1.5px solid var(--line);background:var(--bg);cursor:pointer;transition:border-color .2s,transform .25s var(--ease)}
.fd__s button:hover{border-color:var(--acc2);transform:translateX(4px)}
.fd__s b{font-size:17px}.fd__s span{font-size:14.5px;color:var(--mute)}
.fd__res{display:none}
.fd[data-step="done"] .fd__res{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center;animation:up .6s var(--ease)}
@keyframes up{from{opacity:0;transform:translateY(14px)}}
.fd__res .fd__img{background:radial-gradient(circle,var(--soft),transparent 70%);display:grid;place-items:center;height:180px}.fd__res img{max-height:170px;width:auto}
.fd__res small{color:var(--eb);font-weight:600}.fd__res h4{font:var(--dw) calc(30px*var(--ds))/1.1 var(--fd);margin:6px 0 8px}.fd__res p{color:var(--ink2);margin-bottom:16px}
.fd__back{display:none;justify-self:start;border:0;background:none;color:var(--mute);text-decoration:underline;cursor:pointer;padding:0;font-size:14.5px}
.fd:not([data-step="1"]) .fd__back{display:block}

/* ---------- features ---------- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{padding:30px;border-radius:var(--r);background:var(--card);box-shadow:0 0 0 1px var(--line);transition:transform .35s var(--ease),box-shadow .35s}
.feat:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(0,30,90,.35),0 0 0 1px var(--line)}
.feat__i{width:52px;height:52px;border-radius:50%;margin-bottom:22px;object-fit:cover}
.feat h3{margin-bottom:10px}.feat p{color:var(--ink2);font-size:16px}
[data-v="b"] .feats{gap:0;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
[data-v="b"] .feat{border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--line);padding:34px 28px 34px 0}
[data-v="b"] .feat:hover{transform:none}
[data-v="c"] .feats{gap:0;border:1px solid var(--line);background:var(--card)}
[data-v="c"] .feat{border-radius:0;box-shadow:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
[data-v="c"] .feat:nth-child(3n){border-right:0}[data-v="c"] .feat:nth-child(n+4){border-bottom:0}
[data-v="c"] .feat__i{border-radius:4px;filter:grayscale(1) contrast(1.2)}

/* ---------- compare ---------- */
.cmp{overflow-x:auto;border-radius:var(--r);background:var(--card);box-shadow:0 0 0 1px var(--line)}
.cmp table{width:100%;border-collapse:collapse;min-width:720px}
.cmp th,.cmp td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;font-size:15.5px}
.cmp tbody th{font-weight:600;color:var(--mute);width:18%;font-size:14px;letter-spacing:.02em}
.cmp thead th a{display:grid;gap:10px;justify-items:start;font:var(--dw) calc(22px*var(--ds))/1.15 var(--fd)}
.cmp thead img{height:120px;width:auto}
.cmp tbody tr:last-child>*{border-bottom:0}
.cmp td:nth-child(3){background:color-mix(in srgb,var(--soft) 55%,transparent)}

/* ---------- product rail ---------- */
.rail{position:relative}
.rail__t{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,calc((100% - 54px)/4));gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin}
.pc-card{scroll-snap-align:start;display:grid;grid-template-rows:240px auto;border-radius:var(--r);background:var(--card);box-shadow:0 0 0 1px var(--line);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.pc-card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(0,30,90,.4),0 0 0 1px var(--line)}
.pc-card__i{display:grid;place-items:center;background:radial-gradient(circle at 50% 70%,var(--card),var(--soft) 75%)}
.pc-card__i img{max-height:200px;width:auto;max-width:80%;transition:transform .5s var(--ease)}.pc-card:hover .pc-card__i img{transform:scale(1.05)}
.pc-card>div:last-child{padding:22px;display:grid;gap:6px;align-content:start}
.pc-card small{color:var(--eb);font-weight:600;font-size:13px}.pc-card p{color:var(--mute);font-size:15px;margin-bottom:8px}.pc-card .tl{justify-self:start;font-size:15px}
.rail__nav{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.rail__nav button,.qs__nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;display:grid;place-items:center}
[data-v="c"] .rail__nav button{border-radius:4px}
.rail__nav svg{width:16px;height:16px}.rail__nav button:first-child svg{transform:rotate(180deg)}
[data-v="b"] .rail__t{grid-auto-columns:minmax(280px,calc((100% - 36px)/3))}
[data-v="b"] .pc-card{grid-template-rows:300px auto;border-radius:200px 200px var(--r) var(--r)}

/* ---------- pillars (deep band) ---------- */
.pils{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px)}
.pil{border-top:1px solid color-mix(in srgb,var(--deep-ink) 25%,transparent);padding-top:22px}
.pil small{color:var(--deep-acc);font-weight:600}.pil h3{margin:12px 0 10px}.pil p{color:var(--deep-mute);font-size:16px}
[data-v="a"] .sec--deep{position:relative;overflow:hidden}
[data-v="a"] .sec--deep::before{content:"";position:absolute;right:-12%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc2) 30%,transparent),transparent 65%);pointer-events:none}

/* ---------- rewards ---------- */
.rwd{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rwd__c{padding:clamp(24px,3vw,40px);border-radius:var(--r);background:var(--deep);color:var(--deep-ink);display:grid;gap:8px;align-content:start;min-height:220px;position:relative;overflow:hidden}
.rwd__c--2{background:var(--acc);color:var(--acc-ink);transform:translateY(30px)}
.rwd__c small{font-weight:600;opacity:.85}.rwd__c b{font:700 calc(clamp(56px,6vw,96px)*var(--ds))/1 var(--fd);letter-spacing:-.03em}.rwd__c span{opacity:.9;font-size:15.5px}
.rwd--lg .rwd__c{min-height:300px}
.rwd__c::after{content:"";position:absolute;right:-30px;bottom:-30px;width:140px;height:140px;border-radius:50%;border:24px solid currentColor;opacity:.08}

/* ---------- guide, map, reviews ---------- */
.guide{display:grid;border-top:1px solid var(--line)}
.guide__r{display:grid;grid-template-columns:1fr 1.4fr 24px;gap:20px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);transition:padding .3s var(--ease)}
.guide__r b{font:var(--dw) calc(24px*var(--ds))/1.2 var(--fd)}.guide__r span{color:var(--ink2)}.guide__r svg{width:20px;height:20px;color:var(--eb);transition:transform .3s}
.guide__r:hover{padding-left:12px}.guide__r:hover svg{transform:translateX(6px)}
.amw{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,70px);align-items:center}
.am{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:clamp(24px,4vw,50px);align-items:center}
.am__s{width:100%;height:auto;overflow:visible}
.am__s polygon{fill:var(--soft);stroke:var(--eb);stroke-width:1.5;stroke-linejoin:round}
.am__s circle{fill:var(--acc);stroke:var(--card);stroke-width:2}
.js .am__d{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.am.in .am__d{opacity:1;transform:none;transition:all .5s var(--ease) calc(var(--i) * 60ms)}
.am__s text{font:600 15px var(--fb);fill:var(--ink)}
.am h3{font-size:calc(30px*var(--ds));margin-bottom:8px}
.am__l{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.am__l li{padding:7px 13px;border-radius:999px;background:var(--bg2);font-size:14px;font-weight:500}
[data-v="c"] .am__l li{border-radius:3px}
.rvw{border-radius:var(--r);padding:clamp(28px,4vw,50px);background:var(--bg2);border:1.5px dashed var(--line)}
.rvw__s{color:var(--acc2);font-size:26px;letter-spacing:4px}.rvw p{font:var(--dw) calc(26px*var(--ds))/1.3 var(--fd);margin:14px 0}.rvw small{color:var(--mute);font-size:13.5px}

/* ---------- product pages ---------- */
.pp{padding:140px 0 clamp(50px,6vw,90px);background:linear-gradient(180deg,var(--soft),var(--bg))}
.pp__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,80px);align-items:center}
.pp h1{font-size:calc(clamp(40px,5.2vw,78px)*var(--ds));margin-top:18px}
.pp__stage{aspect-ratio:1/1.05;border-radius:var(--r);background:radial-gradient(circle at 50% 62%,var(--card) 0,var(--card) 30%,transparent 70%);display:grid;place-items:center;position:relative}
.pp__stage img{max-height:82%;max-width:80%;width:auto;filter:drop-shadow(0 34px 30px rgba(0,30,90,.2));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.pp__best{display:grid;gap:2px;text-align:center;margin-top:8px;font-weight:600}.pp__best small{color:var(--mute);font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.1em}
[data-v="b"] .pp__stage{border-radius:999px 999px var(--r) var(--r);background:var(--card);box-shadow:0 40px 80px -50px rgba(11,58,74,.5)}
[data-v="c"] .pp{background:none}
[data-v="c"] .pp__stage{border:1px solid var(--line);background:var(--card)}
[data-v="c"] .pp__stage::before{content:"FIG. 01";position:absolute;left:14px;top:12px;font:500 11px "IBM Plex Mono",monospace;color:var(--mute)}
[data-v="c"] .pp__stage img{animation:none}
.pfs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pf{padding:clamp(26px,3vw,40px);border-radius:var(--r);background:var(--card);box-shadow:0 0 0 1px var(--line);position:relative}
.pf small{font-weight:600;color:var(--eb)}.pf h3{font-size:calc(28px*var(--ds));margin:10px 0 12px}.pf p{color:var(--ink2)}
.pf__i{width:120px;margin-top:18px}
[data-v="c"] .pfs{gap:0;border:1px solid var(--line);background:var(--card)}
[data-v="c"] .pf{border-radius:0;box-shadow:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.docs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.docs a{display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:center;padding:20px 22px;border-radius:var(--rs);background:var(--card);box-shadow:0 0 0 1px var(--line);font-weight:600;transition:transform .25s var(--ease),box-shadow .25s}
.docs a:hover{transform:translateX(6px);box-shadow:0 0 0 1.5px var(--acc2)}
.docs svg{width:20px;height:20px;color:var(--eb)}.docs small{color:var(--mute);font-size:12.5px;letter-spacing:.1em}

/* ---------- page heads, steps, forms ---------- */
.ph{padding:150px 0 clamp(40px,5vw,70px);background:linear-gradient(180deg,var(--soft),var(--bg))}
.ph h1{font-size:calc(clamp(44px,6.4vw,96px)*var(--ds));margin-top:20px;max-width:16ch}
.ph--rw .split{align-items:end}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.steps li{padding:30px;border-radius:var(--r);background:var(--card);box-shadow:0 0 0 1px var(--line)}
.steps small{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--acc);color:var(--acc-ink);font-weight:700;margin-bottom:18px}
[data-v="c"] .steps small{border-radius:3px}
.steps h3{margin-bottom:10px}.steps p{color:var(--ink2)}
.ct{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,60px);align-items:start}
.form{padding:clamp(24px,3vw,40px);border-radius:var(--r);background:var(--card);box-shadow:0 30px 70px -45px rgba(0,30,90,.4),0 0 0 1px var(--line);display:grid;gap:22px}
.form__g{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:grid;gap:7px;font-size:14px;font-weight:600;color:var(--ink2)}
.form .span2{grid-column:span 2}
.form input,.form textarea{padding:13px 14px;border-radius:var(--rs);border:1px solid var(--line);background:var(--bg);font:500 16px var(--fb);color:var(--ink)}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--acc2);outline-offset:1px}
.form .btn{justify-self:start}
.form__msg{font-size:14.5px;color:var(--eb)}
.cta{padding:clamp(24px,3vw,36px);border-radius:var(--r);background:var(--deep);color:var(--deep-ink);display:grid;gap:18px}
.cta h2{font-size:calc(34px*var(--ds))}.cta p{display:grid;gap:3px;color:var(--deep-mute)}.cta b{color:var(--deep-ink);font-size:13px;letter-spacing:.08em;text-transform:uppercase}.cta a{color:var(--deep-ink);font-weight:600;font-size:19px}

/* ---------- final + footer ---------- */
.final{position:relative;padding:clamp(100px,12vw,170px) 0;color:#fff;overflow:hidden;text-align:center}
.final__bg{position:absolute;inset:0}.final__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.final__bg::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--deep2) 80%,transparent)}
.final__in{position:relative;display:grid;justify-items:center;gap:22px}
.final h2{font-size:calc(clamp(40px,5.6vw,84px)*var(--ds));max-width:16ch}.final h2 em{color:var(--deep-acc)}
.final p{font-size:19px;color:rgba(255,255,255,.88);max-width:560px}
.final__btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.final .btn--ghost{color:#fff}.final .btn--ghost svg{width:16px;height:16px}
.btn--ghost svg{width:16px;height:16px}
.ftr{background:var(--deep2);color:var(--deep-mute);padding:clamp(60px,7vw,100px) 0 30px;font-size:15px}
.ftr__top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:clamp(24px,3vw,50px)}
.ftr__brand img{height:46px;width:auto;margin-bottom:20px}.ftr__brand p{max-width:340px}
.ftr h3{font:600 12.5px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--deep-ink);margin-bottom:18px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.ftr a:hover{color:var(--deep-ink)}
.ftr__bot{margin-top:50px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--deep-ink) 15%,transparent);display:grid;gap:10px;font-size:13px}
.mcta{display:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav{display:none}.hdr__tel span{display:none}
  .burger{display:block}
  .nav-open .nav{display:grid;position:fixed;inset:72px 0 auto;max-height:calc(100svh - 72px);overflow:auto;background:var(--bg);color:var(--ink);padding:14px var(--pad) 30px;gap:4px;box-shadow:0 30px 40px -20px rgba(0,0,0,.25)}
  .nav-open .hdr{background:var(--bg);color:var(--ink)}.nav-open .hdr .logo .lc{display:block!important}.nav-open .hdr .logo .lw{display:none!important}
  .nav-open .dd__m{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;padding:0 0 8px 8px;min-width:0;background:none}
  .nav-open .dd__b{width:100%;justify-content:space-between;font-size:17px}.nav-open .dd__b svg{display:none}
  .nav-open .nav .nl{font-size:17px}
  .feats,.pils{grid-template-columns:1fr 1fr}
  [data-v="c"] .feat:nth-child(3n){border-right:1px solid var(--line)}[data-v="c"] .feat:nth-child(2n){border-right:0}[data-v="c"] .feat:nth-child(n+4){border-bottom:1px solid var(--line)}
  .ftr__top{grid-template-columns:1fr 1fr}
  .rail__t{grid-auto-columns:minmax(250px,40%)}
}
@media (max-width:900px){
  .split,.hb__in,.hcx__in,.pp__in,.ct{grid-template-columns:1fr}
  .hw,.amw{grid-template-columns:1fr}
  [data-v="a"] .bens,[data-v="c"] .bens{grid-template-columns:1fr}
  [data-v="a"] .ben:first-child{grid-row:auto}[data-v="a"] .ben:first-child .ben__i{min-height:260px}
  [data-v="c"] .ben{border-right:0;border-bottom:1px solid var(--line)}
  [data-v="b"] .ben{grid-template-columns:1fr;min-height:0;position:relative;top:auto}
  [data-v="b"] .ben__i{aspect-ratio:16/10}
  [data-v="b"] .feats{grid-template-columns:1fr}
  .steps,.pfs{grid-template-columns:1fr}
  .hb__f{max-width:380px}.hb__f figcaption{left:12px}
  .pp__r{max-width:440px}
  .am{grid-template-columns:130px 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .logo img{height:32px}
  .hdr__act .btn{display:none}
  .ha{min-height:auto}.ha__in{padding-top:120px}
  .ha__bg img{object-position:72% 30%}
  .pc{flex-direction:column;border-radius:20px}.pc input{padding:12px 14px}.pc .btn{justify-content:center}
  [data-v="c"] .pc{border-radius:6px}
  .feats,.pils,.rwd,.form__g{grid-template-columns:1fr}
  .form .span2{grid-column:auto}
  [data-v="c"] .feat{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .rwd__c--2{transform:none}
  .rail__t{grid-auto-columns:78%}
  .guide__r{grid-template-columns:1fr 20px}.guide__r span{grid-column:1;grid-row:2}
  .fd[data-step="done"] .fd__res{grid-template-columns:1fr}
  .hw__r{grid-template-columns:90px 1fr}.hw__pipe{width:90px}
  .ftr__top{grid-template-columns:1fr}
  .mcta{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--deep2)}
  .mcta a{display:flex;justify-content:center;align-items:center;gap:8px;padding:16px;color:#fff;font-weight:600}.mcta a+a{background:var(--acc);color:var(--acc-ink)}.mcta svg{width:16px;height:16px}
  .ftr{padding-bottom:90px}
  .hcx__tabs{flex-wrap:wrap}
  .hs__t{width:170px}
  .am{grid-template-columns:1fr}.am__s{max-width:170px}
  .hw__out .hw__big{font-size:38px}.hw__out b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.qa *,.qa *::before,.qa *::after{animation:none!important;transition:none!important}

.dp-tab{position:fixed;right:0;top:50%;z-index:90;transform:translateY(-50%);writing-mode:vertical-rl;display:flex;align-items:center;gap:10px;padding:18px 12px;border:0;border-radius:12px 0 0 12px;background:#E70D85;color:#FFFFFF;font:700 13px/1 "Inter",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:-8px 0 30px rgba(0,0,0,.25);transition:right .45s var(--ease)}
.dp-tab svg{width:18px;height:18px;transform:rotate(90deg)}
.dp-open .dp-tab{right:380px}
.dp{position:fixed;top:0;right:0;bottom:0;width:380px;z-index:89;background:#06143A;color:#EDE9E1;transform:translateX(100%);transition:transform .45s var(--ease);overflow-y:auto;font-family:"Inter",system-ui,sans-serif;visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s}
.dp-open .dp{transform:none;visibility:visible;transition:transform .45s var(--ease);box-shadow:-30px 0 60px rgba(0,0,0,.35)}
.dp__in{padding:28px 26px 40px;display:grid;gap:12px}
.dp__head small{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#E70D85}
.dp__head b{display:block;font-size:22px;font-weight:600;margin-top:6px}
.dp__note{font-size:13.5px;line-height:1.55;color:#A7ADB8}
.dp h5{margin:16px 0 4px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7E8696;font-weight:600}
.dp-vers{display:grid;gap:8px}
.dp-ver{all:unset;box-sizing:border-box;display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:border-color .2s,background .2s}
.dp-ver em{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;font:700 15px/1 "Inter",sans-serif;font-style:normal;background:rgba(255,255,255,.07)}
.dp-ver b{display:block;font-size:15px;font-weight:600}
.dp-ver span{display:block;font-size:12.5px;color:#9097A5;margin-top:2px}
.dp-ver:hover{border-color:rgba(231,13,133,.5)}
.dp-ver.on{border-color:#E70D85;background:rgba(231,13,133,.08)}
.dp-ver.on em{background:#E70D85;color:#FFFFFF}
.dp-pals{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dp-pal{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:10px;cursor:pointer;font-size:13px}
.dp-pal i{display:flex;border-radius:6px;overflow:hidden;flex:none}
.dp-pal i s{display:block;width:12px;height:26px}
.dp-pal.on{border-color:#E70D85;background:rgba(231,13,133,.08)}
.dp-typs{display:grid;gap:8px}
.dp-typ{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;cursor:pointer}
.dp-typ b{font-size:21px;font-weight:400}
.dp-typ span{font-size:12px;color:#9097A5}
.dp-typ.on{border-color:#E70D85;background:rgba(231,13,133,.08)}
.dp-save{margin-top:14px;padding:18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);display:grid;gap:10px}
.dp-save b{font-size:15px}
.dp-save p{font-size:13px;color:#9097A5;line-height:1.5}
.dp-save input,.dp-save textarea{all:unset;box-sizing:border-box;width:100%;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:14px;color:#EDE9E1}
.dp-save textarea{min-height:70px}
.dp-save button{all:unset;box-sizing:border-box;text-align:center;padding:14px;border-radius:10px;background:#E70D85;color:#FFFFFF;font-weight:700;font-size:14px;cursor:pointer}
.dp-msg{font-size:13px;color:#9097A5}.dp-msg.ok{color:#7ee2b0}.dp-msg.err{color:#ff9b8f}
.dp-hp{position:absolute;left:-9999px}
.toast{position:fixed;left:50%;bottom:28px;z-index:95;transform:translate(-50%,30px);opacity:0;padding:12px 20px;border-radius:999px;background:#06143A;color:#EDE9E1;font:600 14px/1 "Inter",sans-serif;transition:opacity .3s,transform .4s var(--ease);pointer-events:none;box-shadow:0 20px 40px rgba(0,0,0,.3)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.dp__in{padding:28px 26px 40px;display:grid;gap:12px}
.dp__head small{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#E70D85}
.dp__head b{display:block;font-size:22px;font-weight:600;margin-top:6px}
.dp__note{font-size:13.5px;line-height:1.55;color:#A7ADB8}
@media (max-width:700px){.dp{width:100%}.dp-open .dp-tab{right:calc(100% - 46px)}}

@media (max-width:640px){.dp-tab{top:auto;bottom:78px;transform:none;padding:12px 8px;font-size:10.5px;gap:6px}.dp-tab svg{width:14px;height:14px}}