/* ==========================================================================
   CutWatt home - "Heat made visible" scroll story (loaded on the home route only)
   Concept: one particle body re-formed by scroll. Waste = red/orange, saving =
   mint, cold = ice. Shared tokens/components come from cutwatt.css (--cw-*).
   Layout mirrors in RTL through logical properties; the 3D stage is NOT
   mirrored, so story copy keeps the physical side the scene composition expects
   (only text direction, rail, nav, forms and the lens beat flip).
   ========================================================================== */

.is-story{--gut:max(16px,env(safe-area-inset-left,0px));--gutr:max(16px,env(safe-area-inset-right,0px));--iron:linear-gradient(to top,#00000a 0%,#1a006b 14%,#750085 32%,#d61a38 50%,#fa6b0a 66%,#ffcc1f 82%,#ffffdb 100%)}
.is-story main{padding-inline:var(--gut) var(--gutr)}
[dir="rtl"] .is-story main{padding-inline:var(--gutr) var(--gut)}

/* ---- stage ---- */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;transform-origin:50% 50%;background:var(--cw-bg)}
.glow,.vig,.grain{display:none} /* the page background is the flat logo navy (#012547), no tinting layers */
.grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.06;background-image:url("../img/grain.svg");animation:stGr 1.2s steps(6) infinite}
@keyframes stGr{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.nogl #gl{display:none}
.nogl body,html.nogl{background:var(--cw-bg)}

/* header backdrop: copy that scrolls under the logo must not show through it */
.is-story .nav{background:linear-gradient(rgba(1,37,71,.97),rgba(1,37,71,.92) 72%,rgba(1,37,71,.72))}

/* ---- step rail: compact dots, label only for the active step ---- */
.rail{position:fixed;z-index:15;inset-inline-end:max(16px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:13px;align-items:flex-end;font:500 11px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--cw-dim);margin:0;padding:0;list-style:none}
.rail li{display:flex;align-items:center;justify-content:flex-end;gap:10px;height:9px;transition:color .4s}
.rail span{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .45s,opacity .45s}
.rail .on span{max-width:130px;opacity:1}
.rail b{width:7px;height:7px;border-radius:50%;border:1px solid currentColor;flex:none;transition:all .4s}
.rail .on{color:var(--cw-fg)}
.rail .on b{background:var(--cw-orange);border-color:var(--cw-orange);box-shadow:0 0 14px var(--cw-orange)}
.rail li.c.on b{background:var(--cw-ice);border-color:var(--cw-ice);box-shadow:0 0 14px var(--cw-ice)}
.rail li.m.on b{background:var(--cw-mint);border-color:var(--cw-mint);box-shadow:0 0 14px var(--cw-mint)}
[dir="rtl"] .rail{inset-inline-end:auto;inset-inline-start:max(16px,env(safe-area-inset-left,0px));align-items:flex-start}
[dir="rtl"] .rail li{justify-content:flex-start}

/* ---- beats ---- */
.is-story main{position:relative;z-index:10}
.beat{position:relative;min-height:var(--h,175vh)}
.beat.free{min-height:110vh;padding-block:12vh}
.stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-inline:clamp(0px,3vw,48px);padding-right:calc(clamp(0px,3vw,48px) + 84px)}
[dir="rtl"] .stick{padding-right:clamp(0px,3vw,48px);padding-left:calc(clamp(0px,3vw,48px) + 84px)}
/* the 3D stage is not mirrored, so keep copy on the physical side the scene expects */
[dir="rtl"] .beat:not(.free):not(.st-lens) .stick{direction:ltr}
[dir="rtl"] .beat:not(.free):not(.st-lens) .st-copy{direction:rtl}
.beat.free .stick{position:relative;height:auto;padding-top:84px}
.st-copy{max-width:520px}
.beat.r .stick{justify-content:flex-end}
.st-copy .lead{font-size:clamp(16px,1.35vw,19px);color:var(--cw-mut);margin:24px 0 0;max-width:46ch}
.st-copy .chips{margin-top:24px}
.st-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.is-story main h1,.is-story main h2{font-family:var(--fd);font-weight:800;letter-spacing:-.03em;line-height:1.04;margin:0;text-wrap:balance}
.is-story main h1{font-size:clamp(38px,6.6vw,100px)}
.is-story main h2{font-size:clamp(30px,4.3vw,62px)}
[dir="rtl"] .is-story main h1,[dir="rtl"] .is-story main h2{line-height:1.3}
[dir="rtl"] .is-story main h1{font-size:clamp(34px,5.6vw,84px)}
[dir="rtl"] .is-story main h2{font-size:clamp(27px,3.7vw,54px)}
.is-story main h1 .mintword{color:var(--cw-mint)}
.is-story main h1 .w{display:inline-block;opacity:0;transform:translateY(.5em);filter:blur(10px);animation:stRise 1.1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes stRise{to{opacity:1;transform:none;filter:none}}
.st-cap{font:500 11px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--cw-dim);margin:26px 0 0}
.st-cap.ok2{color:var(--cw-mint)}
.st-cap + .chips{margin-top:10px}
.scrollcue{position:absolute;inset-inline-start:0;bottom:calc(28px + env(safe-area-inset-bottom,0px));font:500 11px var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--cw-dim);display:flex;align-items:center;gap:14px}
.scrollcue i{width:1px;height:38px;background:linear-gradient(var(--cw-fg),transparent);animation:stCue 2s ease-in-out infinite;transform-origin:top}
@keyframes stCue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.st-hint{margin-top:22px;font:500 12px var(--fm);letter-spacing:.08em;color:var(--cw-dim);display:flex;gap:10px;align-items:center}
.st-hint::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cw-orange);box-shadow:0 0 12px var(--cw-orange);animation:stPulse 1.6s infinite;flex:none}
@keyframes stPulse{50%{opacity:.3}}

/* equipment beats: label chip + one headline + one line */
.eq .st-copy{max-width:420px}
#comp .st-copy{max-width:520px}
.eq h2{font-size:clamp(30px,3.7vw,54px)}
[dir="rtl"] .is-story main .eq h2{font-size:clamp(26px,3.1vw,44px)}
.eq .lead{margin-top:16px;font-size:clamp(16px,1.25vw,18px)}
.st-step{display:inline-flex;align-items:center;gap:10px;font:500 12px/1.3 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--ey,var(--cw-orange));padding:6px 16px 6px 6px;border:1px solid var(--cw-line);border-radius:999px;background:rgba(0,28,54,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin:0 0 20px}
[dir="rtl"] .st-step{padding:6px 6px 6px 16px}
.st-ico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);flex:none}
.st-ico svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pair{display:flex;align-items:center;gap:8px;margin:22px 0 0}
.pair figure{margin:0;position:relative;flex:1 1 0;max-width:250px;aspect-ratio:3/2;border-radius:14px;overflow:hidden;border:1px solid var(--cw-line);background:#001f3b}
.pair img{width:100%;height:100%;object-fit:cover;display:block}
.pair figcaption{position:absolute;inset-inline-start:7px;bottom:6px;font:500 10px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(1,37,71,.78);padding:3px 8px;border-radius:999px;white-space:nowrap}
.pair .arr{width:24px;height:24px;display:grid;place-items:center;flex:none;color:var(--cw-mut)}
.pair .arr svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .pair .arr svg{transform:scaleX(-1)}

/* ---- pins (positioned from JS in screen pixels, so physical left/right) ---- */
#pins{position:fixed;inset:0;z-index:12;pointer-events:none;overflow:hidden}
.pin{position:absolute;left:0;top:0;opacity:0;visibility:hidden;will-change:transform,opacity}
.pin .dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--cw-orange);box-shadow:0 0 0 4px rgba(255,122,26,.22),0 0 18px var(--cw-orange)}
.pin.cool .dot{background:var(--cw-mint);box-shadow:0 0 0 4px rgba(20,240,160,.2),0 0 18px var(--cw-mint)}
.pin__card{position:absolute;left:34px;top:-44px;min-width:150px;padding:10px 14px;border:1px solid var(--cw-line);border-radius:12px;background:rgba(0,26,50,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);white-space:nowrap}
.pin__card::before{content:"";position:absolute;left:-34px;top:44px;width:34px;height:1px;background:linear-gradient(90deg,var(--cw-orange),rgba(255,255,255,.3))}
.pin.cool .pin__card::before{background:linear-gradient(90deg,var(--cw-mint),rgba(255,255,255,.3))}
.pin.low .pin__card{top:20px}
.pin.low .pin__card::before{top:-20px}
.pin.flip .pin__card{left:auto;right:34px}
.pin.flip .pin__card::before{left:auto;right:-34px;background:linear-gradient(270deg,var(--cw-orange),rgba(255,255,255,.3))}
.pin.cool.flip .pin__card::before{background:linear-gradient(270deg,var(--cw-mint),rgba(255,255,255,.3))}
.pin .k{font:500 10px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--cw-mut)}
.pin .v{font:800 21px var(--fd);letter-spacing:-.02em;line-height:1.15;color:var(--cw-fg)}
.pin .v small{font:500 12px var(--fm);color:var(--cw-mut);margin-inline-start:4px}
.pin .n{font:400 11px var(--fm);color:var(--cw-orange)}
.pin.cool .n{color:var(--cw-mint)}
[dir="rtl"] .pin .k,[dir="rtl"] .pin .n{font-size:11.5px}
#ret{position:fixed;left:0;top:0;z-index:13;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;border:1px solid rgba(255,255,255,.55);pointer-events:none;opacity:0;will-change:transform;direction:ltr}
#ret::before,#ret::after{content:"";position:absolute;background:rgba(255,255,255,.6)}
#ret::before{left:50%;top:-10px;width:1px;height:106px}
#ret::after{top:50%;left:-10px;height:1px;width:106px}
#ret span{position:absolute;left:96px;top:18px;font:500 22px var(--fm);color:var(--cw-fg);text-shadow:0 0 20px #000;white-space:nowrap}
#ret small{position:absolute;left:96px;top:48px;font:400 10px var(--fm);letter-spacing:.14em;color:var(--cw-mut);text-transform:uppercase;white-space:nowrap}
[dir="rtl"] #ret small{direction:rtl}

/* ---- panels + form controls ---- */
.st-panel{width:min(100%,540px);padding:clamp(20px,3vw,32px);border:1px solid var(--cw-line);border-radius:22px;background:var(--cw-glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.st-panel h2{font-size:clamp(26px,3vw,40px)}
.st-l{display:block;font:500 12px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--cw-mut);margin:22px 0 9px}
.st-panel .field>label{font:500 12px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--cw-mut)}
.st-panel .input,.st-panel .select{background:rgba(255,255,255,.05);border-radius:12px}
.st-money{position:relative}
.st-money span{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);font:500 13px var(--fm);color:var(--cw-mut);pointer-events:none}
.st-money .input{padding-inline-start:56px;font-variant-numeric:tabular-nums}
.is-story input[type=range]{width:100%;accent-color:var(--cw-mint);min-height:32px}
#age,#cmpRg,#thr{direction:ltr}
[dir="rtl"] #age{direction:rtl}
.ticks{display:flex;justify-content:space-between;gap:6px;font:400 11px var(--fm);color:var(--cw-dim);margin-top:4px}
[dir="rtl"] .ticks{font-size:11.5px}
.disc{font:400 11.5px/1.6 var(--fm);color:var(--cw-dim);margin-top:18px}
[dir="rtl"] .disc{font-size:12px}
.ok{display:none;margin-top:16px;padding:14px 16px;border-radius:12px;background:rgba(20,240,160,.08);border:1px solid rgba(20,240,160,.35);color:var(--cw-mint);font-size:14px}

/* ---- SCAN: real photo with a thermal lens ---- */
/* step 6 follows the sticky-step template: picture on the left, copy on the right (same sides in Arabic, like the other steps) */
.scanw{width:100%;max-width:1240px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.8fr);gap:clamp(28px,4.2vw,72px);align-items:center;direction:ltr}
.scan-copy{min-width:0;max-width:520px}
[dir="rtl"] .scan-copy{direction:rtl}
.scan-viz{min-width:0}
.scan-viz .cmp{margin-top:0}
.scanw h2{max-width:14ch}
.scanw .lead{max-width:46ch;margin-top:22px}
.scan-copy .caps{grid-template-columns:1fr;gap:14px;margin-top:28px}
.cmp{position:relative;margin-top:26px;border-radius:24px;overflow:hidden;border:1px solid var(--cw-line);background:#001f3b;aspect-ratio:960/642;touch-action:pan-y;cursor:crosshair;outline-offset:4px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);direction:ltr}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
.cmp .th{position:absolute;inset:0;clip-path:circle(var(--r,90px) at var(--x,50%) var(--y,50%));-webkit-clip-path:circle(var(--r,90px) at var(--x,50%) var(--y,50%))}
.cmp .lr{position:absolute;left:var(--x,50%);top:var(--y,50%);width:calc(var(--r,90px)*2);height:calc(var(--r,90px)*2);margin:calc(var(--r,90px)*-1) 0 0 calc(var(--r,90px)*-1);border-radius:50%;border:2px solid var(--cw-mint);box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 34px rgba(20,240,160,.4);pointer-events:none}
.cmp .lr::before,.cmp .lr::after{content:"";position:absolute;background:rgba(20,240,160,.85)}
.cmp .lr::before{left:50%;top:-9px;width:1px;height:calc(100% + 18px)}
.cmp .lr::after{top:50%;left:-9px;height:1px;width:calc(100% + 18px)}
.cmp .cc{position:absolute;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
[dir="rtl"] .cmp .cc{direction:rtl}
.cmp .cc span{font:500 11px/1.3 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(1,37,71,.8);border:1px solid var(--cw-line);border-radius:999px;padding:6px 12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cmp .tt{position:absolute;left:0;top:0;font:500 16px var(--fm);color:#fff;background:rgba(1,37,71,.86);border:1px solid var(--cw-mint);border-radius:10px;padding:5px 11px;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;will-change:transform}
.cmpbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:16px}
.cmpbar .sw{display:flex;gap:8px}
.cmpbar button{font:500 12px var(--fm);letter-spacing:.06em;color:var(--cw-mut);background:rgba(255,255,255,.04);border:1px solid var(--cw-line);border-radius:999px;padding:0 16px;cursor:pointer;min-height:44px}
.cmpbar button[aria-pressed=true]{color:var(--cw-ink-on-mint);background:var(--cw-mint);border-color:var(--cw-mint)}
.cmpbar .rg{flex:1 1 200px;display:flex;align-items:center;gap:12px;font:500 11px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--cw-dim)}
.cmpbar .rg input{flex:1}
.caps{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.caps p{margin:0;font-size:15px;color:var(--cw-mut);padding-inline-start:14px;border-inline-start:2px solid var(--cw-line)}
.caps p b{display:block;font:500 11px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--cw-fg);margin-bottom:2px}
.caps p:last-child{border-color:var(--cw-orange)}

/* ---- ESTIMATOR ---- */
.st-est{width:min(100%,1060px);margin-inline:auto}
.st-est h2{font-size:clamp(24px,2.9vw,40px);max-width:32ch;line-height:1.12}
[dir="rtl"] .is-story main .st-est h2{font-size:clamp(22px,2.5vw,34px);line-height:1.4;max-width:40ch}
.egrid{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;margin-top:28px;align-items:stretch}
.egrid .st-panel{width:auto}
.cx{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--cw-line);border-radius:14px;background:rgba(255,255,255,.03);cursor:pointer;margin-top:10px;transition:border-color .2s,background .2s;min-height:44px}
.cx:has(input:checked){border-color:rgba(20,240,160,.6);background:rgba(20,240,160,.07)}
.cx input{margin-top:3px;accent-color:var(--cw-mint);width:20px;height:20px;flex:none}
.cx b{display:block;font:500 14.5px/1.4 var(--fb);color:var(--cw-fg)}
.cx small{display:block;font-size:12.5px;color:var(--cw-mut);margin-top:3px;line-height:1.45}
.kick{display:flex;justify-content:space-between;align-items:center;gap:12px;font:500 12px/1.4 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--cw-mut)}
.kick i{font-style:normal;color:var(--cw-orange);border:1px solid rgba(255,122,26,.5);border-radius:999px;padding:3px 10px;font-size:11px;white-space:nowrap}
.big{font:800 clamp(38px,5vw,60px) var(--fd);letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;margin-top:14px;background:linear-gradient(100deg,var(--cw-red),var(--cw-orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.rng{margin:8px 0 0;font-size:14px;color:var(--cw-mut);min-height:2.9em}
.st-bar{position:relative;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--cw-red),var(--cw-orange) 45%,var(--cw-yellow) 75%,var(--cw-mint));margin-top:20px;overflow:hidden}
.st-bar i{position:absolute;inset-inline-end:0;top:0;bottom:0;width:70%;background:#00203d;transition:width .5s cubic-bezier(.2,.8,.2,1)}
[dir="rtl"] .st-bar{background:linear-gradient(270deg,var(--cw-red),var(--cw-orange) 45%,var(--cw-yellow) 75%,var(--cw-mint))}
.st-scale{display:flex;justify-content:space-between;gap:8px;font:400 11px var(--fm);color:var(--cw-dim);margin-top:6px}
.st-est dl{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:20px 0 0;font-size:14px}
.st-est dt{color:var(--cw-mut)}
.st-est dd{margin:0;font:500 15px var(--fm);font-variant-numeric:tabular-nums;text-align:end}
.st-est .btn{width:100%;margin-top:22px;min-height:52px}

/* ---- CONTACT ---- */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;align-items:start}
.cgrid .st-panel{width:auto}
.contact{width:min(100%,1060px);margin-inline:auto}
.contact h2{max-width:20ch}
.contact .lead{margin-top:24px;max-width:60ch}
.direct h3{margin:0;font:500 12px/1.4 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--cw-mint)}
.crow{margin-top:20px}
.crow .st-l{margin:0 0 6px}
.cval{font:800 clamp(24px,2.6vw,34px)/1.15 var(--fd);letter-spacing:-.02em;color:var(--cw-fg);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}
.cact{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cb{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 13px var(--fb);color:var(--cw-fg);background:rgba(255,255,255,.06);border:1px solid var(--cw-line);border-radius:999px;min-height:44px;padding:0 18px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.cb svg{width:16px;height:16px;display:block;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cb:hover{background:rgba(255,255,255,.12)}
.cb.pri{background:var(--cw-mint);color:var(--cw-ink-on-mint);border-color:var(--cw-mint)}
.cb.sq{width:44px;padding:0}
.cb.is-done{border-color:var(--cw-mint);color:var(--cw-mint)}
.cnote{min-height:20px;margin-top:8px;font:400 12px var(--fm);color:var(--cw-mint)}
[dir="rtl"] .cnote{font-size:12.5px}
.form-errors{margin:0 0 16px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,122,107,.5);background:rgba(255,122,107,.08);color:#ffb3aa;font-size:14px}
.form-errors ul{margin:6px 0 0;padding-inline-start:18px}
.est-attached{margin:0 0 14px;padding:10px 14px;border-radius:12px;background:rgba(20,240,160,.07);border:1px solid rgba(20,240,160,.3);color:var(--cw-mint);font-size:13.5px}

/* ---- LENS beat: copy slides + HUD viewfinder ---- */
.beat.st-lens{--h:440vh}
.st-lens .stick{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:20px;align-items:stretch;padding-top:calc(76px + env(safe-area-inset-top,0px));padding-bottom:18px}
.lcopy{display:grid;align-self:center;min-width:0}
.lcopy .ph{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .4s,transform .4s,visibility 0s .4s}
.lcopy .ph.on{opacity:1;visibility:visible;transform:none;transition:opacity .4s,transform .4s}
.lcopy h2{font-size:clamp(26px,3.2vw,46px)}
[dir="rtl"] .is-story main .lcopy h2{font-size:clamp(23px,2.7vw,38px)}
.lcopy .lead{margin-top:16px;font-size:clamp(15px,1.2vw,17px);color:var(--cw-mut);max-width:46ch}
.lcopy .chips{margin-top:16px}
.st-hp{width:100%;margin-top:20px;padding:18px 20px;border:1px solid var(--cw-line);border-radius:18px;background:var(--cw-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.st-hp-h{display:flex;justify-content:space-between;gap:12px;font:500 12px/1.4 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--cw-mint);border-bottom:1px solid var(--cw-line);padding-bottom:10px}
.st-hp dl{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:14px 0 0;font-size:14px}
.st-hp dt{color:var(--cw-mut)}
.st-hp dd{margin:0;font:500 15px var(--fm);font-variant-numeric:tabular-nums;color:var(--cw-fg);text-align:end}
.isov{display:flex;align-items:baseline;gap:6px;margin:12px 0 2px;direction:ltr;justify-content:flex-start}
[dir="rtl"] .isov{justify-content:flex-end}
.isov output{font:800 46px/1 var(--fd);color:#fff;font-variant-numeric:tabular-nums}
.isov small{font:500 18px var(--fm);color:var(--cw-mint)}
#thr{-webkit-appearance:none;appearance:none;height:30px;margin:4px 0 0;cursor:pointer;touch-action:pan-y;background:transparent}
#thr::-webkit-slider-runnable-track{height:10px;border-radius:5px;border:1px solid rgba(255,255,255,.3);background:linear-gradient(90deg,#750085 0%,#d61a38 30%,#fa6b0a 55%,#ffcc1f 80%,#ffffdb 100%)}
#thr::-moz-range-track{height:10px;border-radius:5px;border:1px solid rgba(255,255,255,.3);background:linear-gradient(90deg,#750085 0%,#d61a38 30%,#fa6b0a 55%,#ffcc1f 80%,#ffffdb 100%)}
#thr::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;background:var(--cw-mint);border:2px solid #02150a;box-shadow:0 0 0 1px var(--cw-mint),0 0 16px var(--cw-mint);border-radius:50%}
#thr::-moz-range-thumb{width:22px;height:22px;background:var(--cw-mint);border:2px solid #02150a;box-shadow:0 0 0 1px var(--cw-mint),0 0 16px var(--cw-mint);border-radius:50%}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
button.chip{cursor:pointer;min-height:44px;transition:all .2s}
button.chip:hover,button.chip.on{color:var(--cw-ink-on-mint);background:var(--cw-mint);border-color:var(--cw-mint)}
.dbig{font:800 clamp(38px,4.4vw,54px)/1 var(--fd);color:var(--cw-mint);font-variant-numeric:tabular-nums;margin:14px 0 2px}
.dbig small{font:500 14px var(--fm);color:var(--cw-mut);letter-spacing:.1em;margin-inline-start:8px}
.lensbox{position:relative;container-type:size;min-height:0;pointer-events:none;color:var(--cw-mint);font-family:var(--fm);text-shadow:0 0 8px rgba(0,0,0,.9);opacity:0}
.lensbox .ring{position:absolute;left:50%;top:50%;width:88%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(20,240,160,.3)}
@supports (width:1cqw){.lensbox .ring{width:min(94cqw,94cqh)}}
.lensbox .ring::before{content:"";position:absolute;inset:3.5%;border-radius:50%;border:1px dashed rgba(20,240,160,.2)}
.lensbox .ring i{position:absolute;background:rgba(20,240,160,.55)}
.ring .n{left:50%;top:-8px;width:1px;height:16px}.ring .s{left:50%;bottom:-8px;width:1px;height:16px}
.ring .w{top:50%;left:-8px;height:1px;width:16px}.ring .e{top:50%;right:-8px;height:1px;width:16px}
.lensbox .br{position:absolute;width:26px;height:26px;border:0 solid var(--cw-mint);opacity:.85}
.br.tl{left:0;top:0;border-left-width:2px;border-top-width:2px}.br.tr{right:0;top:0;border-right-width:2px;border-top-width:2px}
.br.bl{left:0;bottom:0;border-left-width:2px;border-bottom-width:2px}.br.rb{right:0;bottom:0;border-right-width:2px;border-bottom-width:2px}
.lhl,.lhr,.lhb{position:absolute;font-size:12px;line-height:1.55;letter-spacing:.08em;text-transform:uppercase}
.lhl{inset-inline-start:14px;top:12px}.lhr{inset-inline-end:14px;top:12px;text-align:end}.lhb{inset-inline-end:14px;bottom:12px;text-align:end}
.lensbox b{font-weight:400;color:#fff}
.rec{display:flex;align-items:center;gap:8px;color:#fff}
.rec i{width:9px;height:9px;border-radius:50%;background:#ff3b30;box-shadow:0 0 10px #ff3b30;animation:stBlink 1.1s steps(2) infinite;flex:none}
@keyframes stBlink{50%{opacity:.15}}
.mx{color:var(--cw-orange)}.mn{color:var(--cw-ice)}
.lpal{position:absolute;inset-inline-end:22px;top:50%;transform:translateY(-50%);height:min(220px,38%);width:10px}
@supports (height:1cqh){.lpal{height:min(260px,40cqh)}}
.lpal .bar2{position:relative;width:10px;height:100%;border:1px solid rgba(255,255,255,.5);background:var(--iron)}
.lpal .lb{position:absolute;inset-inline-end:20px;font-size:11px;letter-spacing:.06em;color:var(--cw-mint);white-space:nowrap;line-height:1}
.lpal .lb.t{top:-2px}.lpal .lb.b{bottom:-2px}.lpal .lb.m{top:50%;margin-top:-6px}
.lpal .mk{position:absolute;left:-7px;bottom:0;width:24px;height:0;border-top:2px solid #fff;margin-bottom:-1px;opacity:0}
.lpal .iso{position:absolute;left:-12px;bottom:0;width:34px;height:0;border-top:2px dashed #b6ff7a;opacity:0}
.lflash{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(234,255,240,.9),transparent 70%);opacity:0}
#spot{position:fixed;left:0;top:0;z-index:13;width:58px;height:58px;margin:-29px 0 0 -29px;border:1px solid var(--cw-mint);border-radius:50%;pointer-events:none;opacity:0;will-change:transform;box-shadow:0 0 14px rgba(20,240,160,.35);direction:ltr}
#spot::before,#spot::after{content:"";position:absolute;background:var(--cw-mint)}
#spot::before{left:50%;top:-10px;width:1px;height:78px}
#spot::after{top:50%;left:-10px;height:1px;width:78px}
#spot .rd{position:absolute;left:72px;top:2px;white-space:nowrap;text-align:left}
#spot.flip .rd{left:auto;right:72px;text-align:right}
#spT{display:block;font:500 26px/1.1 var(--fm);color:#fff;text-shadow:0 0 14px #000,0 0 3px #000}
#spS{display:block;font:500 12px var(--fm);letter-spacing:.1em;color:var(--cw-mint);text-transform:uppercase;text-shadow:0 0 8px #000,0 0 3px #000;margin-top:2px}
[dir="rtl"] #spS{direction:rtl;unicode-bidi:plaintext}

@media (max-width:1100px){
  .egrid,.cgrid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .rail,[dir="rtl"] .rail{inset-inline:auto;inset-inline-start:50%;inset-block-start:calc(var(--cw-nav-h) + 8px + env(safe-area-inset-top,0px));top:calc(var(--cw-nav-h) + 8px + env(safe-area-inset-top,0px));transform:translateX(-50%);flex-direction:row;gap:9px;align-items:center;left:50%;right:auto}
  [dir="rtl"] .rail{transform:translateX(50%);left:auto;right:50%}
  .rail li,[dir="rtl"] .rail li{height:7px;gap:0;justify-content:center}.rail span{display:none}
  .stick,[dir="rtl"] .stick{align-items:flex-end;padding-inline:clamp(0px,3vw,48px);padding-right:clamp(0px,3vw,48px);padding-left:clamp(0px,3vw,48px);padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .st-copy{max-width:none;position:relative}
  /* full-bleed scrim under the copy instead of a boxed panel: the picture sits in the band above it */
  .beat:not(.free):not(.st-lens) .stick::before{content:"";position:absolute;left:calc(-1 * var(--gut));right:calc(-1 * var(--gutr));bottom:0;height:72%;pointer-events:none;z-index:-1;
    background:linear-gradient(to top,rgba(1,37,71,.98) 0%,rgba(1,37,71,.94) 34%,rgba(1,37,71,.7) 62%,rgba(1,37,71,0) 100%)}
  .is-story main .eyebrow{font-size:11px;letter-spacing:.1em;margin-bottom:14px}
  #leak .lead{font-size:15.5px;margin-top:16px;line-height:1.6}
  #leak .st-row{margin-top:22px}
  #leak .st-row .btn--ghost{display:none}
  #measure .chips{display:none}
  #measure .lead,#see .lead,#correct .lead{font-size:15.5px;margin-top:14px;line-height:1.6}
  .eq .st-copy{max-width:none}
  .beat.free .stick{align-items:flex-start}
  .beat.free{padding-block:14vh 4vh}
  .pin.dsk,.pin.dsk2{display:none}
  .pin__card{min-width:0;width:max-content;max-width:min(176px,48vw);white-space:normal;padding:7px 10px}
  .pin .v{font-size:17px}
  .scrollcue{display:none}
  #ret{display:none}
  .is-story main h1{font-size:clamp(34px,10.4vw,60px)}
  .is-story main h2{font-size:clamp(28px,8.4vw,44px)}
  [dir="rtl"] .is-story main h1{font-size:clamp(30px,9vw,52px)}
  [dir="rtl"] .is-story main h2{font-size:clamp(25px,7.2vw,38px)}
  .eq h2,[dir="rtl"] .is-story main .eq h2{font-size:clamp(26px,7.6vw,38px)}
  .eq .lead{margin-top:12px;font-size:16px}
  .st-step{margin-bottom:14px}
  .cmp .cc span{font-size:10px;padding:5px 9px}
  .caps{grid-template-columns:1fr}
  .scanw{grid-template-columns:minmax(0,1fr);gap:22px}
  .scan-copy{max-width:none}
  .scan-copy .caps{margin-top:20px}
  .st-lens .stick,[dir="rtl"] .st-lens .stick{display:flex;flex-direction:column;gap:10px;align-items:stretch;padding-top:calc(var(--cw-nav-h) + 40px + env(safe-area-inset-top,0px));padding-bottom:calc(78px + env(safe-area-inset-bottom,0px));padding-inline:0}
  .lcopy{align-self:stretch}
  .lcopy h2,[dir="rtl"] .is-story main .lcopy h2{font-size:clamp(23px,6.6vw,32px)}
  .lcopy .ph.p1 .lead,.lcopy .ph.p2 .lead,.lcopy .st-hint,.lcopy .chips{display:none}
  .lcopy .lead{font-size:14.5px;margin-top:10px;line-height:1.5}
  .lcopy .eyebrow{margin-bottom:10px}
  .st-hp{margin-top:12px;padding:12px 14px;border-radius:14px}
  .st-hp-h{display:none}
  .isov{margin:0}.isov output{font-size:34px}.isov small{font-size:15px}
  #thr{margin:0;height:28px}
  .presets{margin-top:6px}
  button.chip{min-height:44px;padding:5px 11px}
  .st-hp dl{margin-top:8px;font-size:13px;gap:3px 12px}
  .st-hp .disc{display:none}
  .dbig{font-size:34px;margin:6px 0 0}
  .lensbox{flex:1 1 auto;min-height:200px}
  .lhl,.lhr,.lhb{font-size:10.5px;letter-spacing:.04em}
  .lhl{inset-inline-start:10px;top:8px}.lhr{inset-inline-end:10px;top:8px}.lhb{inset-inline-end:10px;bottom:8px}
  .lhl .hide-m{display:none}
  .lpal{inset-inline-end:12px;top:52px;transform:none;height:min(120px,30%);width:8px}
  @supports (height:1cqh){.lpal{height:min(130px,32cqh)}}
  .lpal .bar2{width:8px}.lpal .lb{font-size:10px;inset-inline-end:14px}.lpal .lb.m{display:none}
  #spot{width:50px;height:50px;margin:-25px 0 0 -25px}
  #spot .rd{left:60px;top:0}#spot.flip .rd{right:60px}
  #spT{font-size:22px}#spS{font-size:11px}
}
@media (max-height:700px) and (min-width:821px){
  .lcopy .ph.p1 .lead{display:none}
  .lcopy .lead{margin-top:12px}
  .st-hp{margin-top:14px;padding:14px 16px}
  .isov output{font-size:38px}
  .lcopy .chips{margin-top:12px}
}

/* ---- no-WebGL / saved-data fallback: the same story as plain stacked content ---- */
.nogl .rail,.nogl .bill{display:none}
.nogl .beat{min-height:0}
.nogl .beat.free{padding-block:0}
.nogl .beat .stick,.nogl .beat.free .stick{position:relative;height:auto;display:block;padding-block:64px;padding-inline:clamp(0px,3vw,48px)}
.nogl .beat.st-lens{--h:auto}
.nogl .st-lens .stick{padding-top:64px}
.nogl .lcopy{display:block}
.nogl .lcopy .ph{opacity:1;visibility:visible;transform:none;margin-bottom:36px}
.nogl .lcopy .ph.p1 .lead,.nogl .lcopy .ph.p2 .lead,.nogl .lcopy .chips,.nogl .lcopy .st-hint{display:block}
.nogl .lensbox,.nogl #spot,.nogl #pins,.nogl #ret{display:none}
.nogl .st-copy{background:none;margin-inline:0;padding:0}
.nogl .scrollcue{display:none}
.nogl .stick::before{display:none}
.nogl .beat.r .stick{justify-content:flex-start}
.nogl .st-copy{max-width:640px}
.nogl .beat + .beat{border-top:1px solid var(--cw-line-soft)}
.nogl .st-hint{display:none}
[dir="rtl"] .nogl .beat:not(.free):not(.st-lens) .stick{direction:rtl}

/* touch screens have no cursor to scan with */
@media (hover:none){#see .st-hint{display:none}}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .is-story main h1 .w{animation-duration:.01s}
  .scrollcue i,.st-hint::before,.rec i{animation:none}
  .lcopy .ph,.rail span{transition:none}
}

/* RTL: keep numeric readouts with their units in LTR order */
[dir=rtl] #retT,[dir=rtl] #spT,[dir=rtl] .pin .v,[dir=rtl] .st-money{direction:ltr;unicode-bidi:isolate}
/* Arabic: the step rail stays on the right, so step 6 (a free beat) keeps its copy clear of it like the sticky steps */

/* ==========================================================================
   Mobile pass 3: nothing overlaps, no dead gaps
   ========================================================================== */
@media (max-width:820px){
  /* the floating value cards cover the pictures on a phone: the copy below already says the same thing */
  #pins{display:none}
  /* solid header band (logo, bill line, step dots) so free sections never scroll visibly underneath it */
  .is-story .nav{background:rgba(1,37,71,.97)}
  .is-story .nav::after{content:"";position:absolute;inset-inline:0;top:100%;height:34px;pointer-events:none;
    background:linear-gradient(rgba(1,37,71,.97),rgba(1,37,71,.9) 60%,rgba(1,37,71,0))}
  .rail,[dir="rtl"] .rail{z-index:61}
  body:has(.mobile-menu.is-open) .rail{display:none}
  /* lens: the lens never runs under the call bar */
  .st-lens .stick,[dir="rtl"] .st-lens .stick{padding-bottom:calc(98px + env(safe-area-inset-bottom,0px))}
  /* phones: the lens (picture) on top, the copy right under it */
  .lensbox{order:-1}
  .lcopy{flex:0 0 auto}
  .lcopy .ph{align-self:start}
  .lcopy .ph.p1 .st-hp dl{display:none}
  .presets{display:flex;flex-wrap:nowrap;gap:6px}
  .presets button.chip{flex:1 1 0;min-width:0;min-height:40px;padding:4px 6px;font-size:11px;justify-content:center;white-space:nowrap}
  .lensbox{min-height:240px}
}
@media (max-width:820px) and (max-height:700px){
  .lcopy .lead{display:none}
  .lensbox{min-height:200px}
}

/* estimator and contact: the long heading no longer fills the first laptop screen */
#estimate h2,#contact h2{font-size:clamp(28px,3.2vw,48px);max-width:26ch}
[dir="rtl"] .is-story main #estimate h2,[dir="rtl"] .is-story main #contact h2{font-size:clamp(25px,2.8vw,40px)}
/* header stays readable when the free sections scroll underneath it */
@media (min-width:821px){
  .is-story .nav{background:rgba(1,37,71,.96)}
  .is-story .nav::after{content:"";position:absolute;inset-inline:0;top:100%;height:26px;pointer-events:none;background:linear-gradient(rgba(1,37,71,.85),rgba(1,37,71,0))}
}

/* the bill line sits above the fade band under the header (the band was drawing over its lower half) */
.is-story .nav::after{z-index:0}
.is-story .nav .bill{z-index:3}

/* step 6 on desktop: same template as the sticky steps - a full screen, a large picture on the left,
   the copy at the right edge where the other right-hand steps put theirs */
@media (min-width:821px) and (max-width:1499px){#scan .cmpbar .rg span{display:none}}
@media (min-width:821px){
  #scan.beat.free{min-height:100vh;min-height:100svh;padding-block:0;display:flex;align-items:center}
  #scan .stick{width:100%;padding-top:calc(var(--cw-nav-h) + 24px);padding-bottom:32px;min-height:100vh;min-height:100svh;display:flex;align-items:center}
  /* copy column = the 520px column the right-hand steps use, pinned to the same right edge; the photo takes the
     rest from the left edge, with a clear gap between them (like "Fix settings, not budgets") */
  #scan .scanw{max-width:none;grid-template-columns:minmax(0,1fr) minmax(300px,min(520px,38vw));gap:clamp(40px,4.5vw,110px)}
  #scan .scan-viz{justify-self:start;width:100%}
  #scan .scan-viz{display:flex;flex-direction:column;align-items:flex-start}
  /* a comfortable size: about 43% of the screen width (440-860px), never taller than the screen allows */
  #scan .scan-viz{--cmpw:min(860px,max(440px,43vw),calc((100svh - var(--cw-nav-h) - 160px) * 960 / 642))}
  #scan .scan-viz .cmp{width:var(--cmpw);max-width:100%;aspect-ratio:960/642}
  #scan .scan-viz .cmpbar{width:var(--cmpw);max-width:100%}
  #scan .cmpbar{flex-wrap:nowrap;gap:10px}
  #scan .cmpbar .rg{min-width:0;flex:1 1 auto}
  #scan .cmpbar button{padding:0 13px;white-space:nowrap}
  #scan .scan-copy{justify-self:end;max-width:520px}
  #scan h2{font-size:clamp(30px,4.3vw,62px);max-width:none}
  #scan .lead{max-width:none}
}
/* phones: the cold store stays bright behind the estimator and contact, so their heading and lead get a soft navy halo */
@media (max-width:820px){
  #estimate .eyebrow,#estimate h2,#contact .eyebrow,#contact h2,#contact .lead{text-shadow:0 0 14px rgba(1,37,71,.95),0 0 4px rgba(1,37,71,.95),0 1px 2px rgba(1,37,71,.9)}
}

/* phones: step 8 caption on one line, the three case chips on one row (they scale to the width, never wrap) */
@media (max-width:820px){
  #correct .st-cap{white-space:nowrap;font-size:clamp(8.5px,2.75vw,11px);letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis}
  #correct .chips{flex-wrap:nowrap;gap:6px}
  #correct .chip{flex:1 1 auto;min-width:0;justify-content:center;white-space:nowrap;padding:6px clamp(6px,2vw,12px);font-size:clamp(9.5px,3vw,12.5px);letter-spacing:0}
  #correct .chip b{margin-inline-end:3px}
}