:root{--forest:#05342c;--green:#24724b;--ink:#164c40;--yellow:#ffda63;--paper:#f3f7ed;--body:'Nunito',sans-serif;--display:'Fredoka',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 var(--body);overflow-x:clip}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.035em;line-height:1.1}h2{font-size:clamp(45px,5.6vw,84px)}h2 em{font-style:normal;color:var(--green)}:focus-visible{outline:3px solid #1c84bf;outline-offset:5px}::selection{background:var(--yellow);color:var(--forest)}.visual-filters{position:absolute;pointer-events:none;overflow:hidden}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:var(--yellow);padding:12px}.skip-link:focus{top:10px}
.hero{position:relative;background:var(--forest);overflow:hidden;color:#f1f5dc;isolation:isolate}.hero::before{content:"";position:absolute;inset:0 0 auto;height:min(67.5vw,977.4px);background:linear-gradient(#8bc9f1 0%,#bce2f4 65%,#80b3a8 77%,#315d35 88%,var(--forest) 100%)}
.hero-world{position:relative;max-width:1448px;margin:auto;aspect-ratio:4/2.7;overflow:hidden}
.world-scene{width:100%;height:auto;min-height:100%;object-fit:cover;object-position:center top;will-change:transform}
.hero-world::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 84%,#05342c88 92%,var(--forest) 100%)}
.hero-branding{position:relative;display:flex;align-items:center;flex-direction:column;max-width:900px;margin:-32px auto 0;padding:0 24px 75px;background:var(--forest)}
.hero-logo{width:min(75vw,620px);height:auto;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.hero h1{font-size:clamp(25px,3.2vw,44px);line-height:1.2;text-align:center;margin:1px 0 22px;letter-spacing:-.025em}
.resources{display:flex;justify-content:center;gap:clamp(28px,4.5vw,72px)}
.resource{display:flex;align-items:center;flex-direction:column;gap:0;font:20px/1.2 var(--display);color:#d7e6c9}
.utility-icon{display:block;flex:none;width:90px;height:90px;background-image:url('assets/gnisti-utility-icons.png');background-size:300% 100%;background-repeat:no-repeat;filter:url(#remove-white)}
.utility-el{background-position:0% 50%}.utility-vand{background-position:50% 50%}.utility-varme{background-position:100% 50%}



.app-screen{overflow:hidden;border:7px solid #fffdf4;background:#d8eff0;border-radius:33px;box-shadow:0 7px 0 #a6bca8,16px 24px 55px #164e3820}
.app-screen img{width:100%;height:auto;display:block}



.club-section{background:#dcebd1;padding:105px 7vw 115px}
.club-heading{text-align:center;margin:0 auto 58px;max-width:1000px}
.eyebrow{font:500 clamp(25px,2.8vw,38px)/1.2 var(--display);letter-spacing:.035em;color:#497149;margin-bottom:20px}
.club-heading h2{font-size:clamp(49px,6.5vw,94px)}
.club-layout{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:7vw;max-width:1280px;margin:auto}
.negotiation-wrap{min-width:0}.negotiation-scene{position:relative;width:100%;aspect-ratio:4/3;border-radius:38px;overflow:hidden;background:#bfd1b9;box-shadow:0 9px 0 #bccdaf,0 25px 40px #34563416}

.club-benefits{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:36px}
.club-benefits li{display:flex;gap:20px;align-items:baseline}.benefit-number{font:500 15px var(--display);color:#789c69;flex:none}.club-benefits h3{font-size:clamp(27px,2.8vw,40px);margin-bottom:10px}.club-benefits p{font-size:18px;font-weight:700;line-height:1.55;color:#608064;max-width:390px}


.signup-section{background:var(--forest);color:#edf2dc}.beta-copy h2 em{color:#b4d798}
.beta{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:9vw;max-width:1400px;margin:auto;padding:105px 8vw 110px}
.beta-copy h2{font-size:clamp(48px,5.8vw,84px)}
.signup-card{color:var(--ink);border-radius:32px;background:#e8f0df;border:3px solid #fffdf6;padding:28px 34px 33px;box-shadow:0 7px 0 #c8d6be;max-width:500px}
form{display:flex;flex-direction:column}form>label{font-size:14px;font-weight:900;color:#416750;margin:13px 0 7px}form>input{border:2px solid #cfddc5;border-radius:14px;padding:12px 16px;background:#fffdf8;color:#244632;font-size:16px;width:100%}form>input::placeholder{color:#8a9e89}
#beta-form>.button{margin-top:24px}
.button{border:0;border-radius:18px;padding:17px 20px;display:inline-flex;gap:18px;align-items:center;justify-content:center;font-family:var(--display);font-weight:500;font-size:15px;line-height:1.3;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-3px)}.button:active{transform:translateY(2px)}.primary{background:var(--yellow);color:#384423;box-shadow:0 5px 0 #cba430}
.form-status{font-size:13px;font-weight:800;line-height:1.5;margin:12px 0 0;color:#306b43}
.motion-toggle{position:fixed;z-index:40;bottom:15px;right:16px;border:1px solid #c8d6bf;background:#f4f9ebee;color:#527361;border-radius:20px;padding:7px 12px;font-weight:900;font-size:11px;display:flex;align-items:center;gap:8px;box-shadow:0 2px 0 #a8c1b1}.motion-icon{font-size:14px;line-height:1}
footer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:28px 8vw 40px;border-top:0;background:var(--forest);color:#adc6b7;font-size:13px;font-weight:700}.footer-copyright{font-size:12px;color:#93b4a4}.footer-brand{width:174px;height:auto;object-fit:contain;clip-path:inset(1% round 25%)}
.motion-enabled .reveal{opacity:0;transform:translateY(23px);transition:opacity .6s,transform .7s ease-out}.motion-enabled .reveal.visible{opacity:1;transform:none}.motion-paused .reveal{opacity:1;transform:none}.motion-paused *{animation:none!important;transition:none!important}html.motion-paused{scroll-behavior:auto}
@media(min-width:1449px){.hero-world{mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}}
@media(max-width:1100px){.club-layout{gap:5vw}.club-benefits{gap:27px}.club-benefits p{font-size:17px}.beta{padding-inline:6vw;gap:6vw}.signup-card{padding:24px}.button{font-size:14px}}
@media(max-width:760px){.hero::before{height:90vw}.hero-world{aspect-ratio:10/9}.world-scene{width:auto;max-width:none;height:100vw;min-height:0;position:relative;left:50%;translate:-50% 0}.hero-branding{margin-top:-16px;padding:0 18px 46px}.hero-logo{width:min(100%,520px)}.hero h1{font-size:clamp(24px,6.2vw,39px);margin-bottom:17px}.utility-icon{width:76px;height:76px}.resource{font-size:18px}.resources{gap:29px}.club-section{padding:74px 26px 80px}.club-heading{margin-bottom:40px}.club-heading h2{font-size:clamp(44px,10.6vw,72px)}.club-layout{grid-template-columns:1fr;gap:52px;max-width:540px}.negotiation-scene{border-radius:27px}.club-benefits{gap:26px}.club-benefits h3{font-size:32px}.club-benefits p{font-size:17px}.benefit-number{font-size:14px}.beta{grid-template-columns:1fr;padding:75px 26px 85px;gap:38px}.beta-copy h2{font-size:clamp(46px,11.3vw,70px)}.signup-card{width:100%;max-width:none;border-radius:27px;padding:20px 24px 27px}.motion-label{display:none}.motion-toggle{padding:9px;bottom:12px;right:12px;width:33px;height:33px;justify-content:center}footer{padding:25px 18px 52px;font-size:12px;gap:12px}.footer-brand{width:100px}.eyebrow{font-size:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}.world-scene,.app-screen-main{transform:none!important}}





@media(max-width:370px){footer{padding-inline:12px;gap:8px}.footer-brand{width:76px}}

/* Large, separate product stories keep both price and consumption readable. */
.price-section{max-width:1500px;margin:auto;display:grid;grid-template-columns:.85fr 1.3fr;align-items:center;gap:6vw;padding:110px 6vw 90px;min-height:620px}
.price-copy{position:relative;z-index:2;min-width:0}.price-copy h2{font-size:clamp(42px,4.8vw,72px);max-width:560px;margin-inline:auto;text-align:center}
.app-showcase{position:relative;min-width:0;width:100%;padding:15px 0 0;perspective:1400px}
.app-screen-main{width:100%;max-width:820px;position:relative;margin:auto;transform:rotate(-1.6deg);will-change:transform}
.app-caption,.history-card figcaption{text-align:center;font-size:13px;line-height:1.5;color:#627f6c;letter-spacing:.01em;margin-top:23px}
.history-section{max-width:1500px;margin:auto;padding:20px 6vw 120px;display:grid;grid-template-columns:1.3fr .85fr;gap:6vw;align-items:center}
.history-copy{grid-column:2;grid-row:1;min-width:0;container-type:inline-size;text-align:center}.history-copy h2{font-size:clamp(38px,3.6vw,54px);max-width:570px;margin-inline:auto}
.history-cards{grid-column:1;grid-row:1;min-width:0;display:grid;gap:44px}.history-card{min-width:0;margin:0}.history-card .app-screen{width:100%;border-radius:30px}.history-card img{display:block;width:100%;height:auto}.history-card figcaption{margin-top:16px}
.club-heading{max-width:1220px}.club-heading h2{font-size:clamp(42px,5.2vw,76px);line-height:1.13}.club-benefits h3{font-size:clamp(27px,2.6vw,38px)}
@media(max-width:1000px){.price-section{grid-template-columns:1fr;padding:78px 7vw 75px;gap:38px;min-height:0}.price-copy h2{max-width:700px;font-size:clamp(44px,7vw,70px)}.app-showcase{max-width:850px;margin:auto}.history-section{grid-template-columns:1fr;padding:20px 7vw 85px;gap:38px}.history-copy{grid-column:1;grid-row:1}.history-copy h2{max-width:800px;font-size:clamp(41px,6.5vw,66px)}.history-cards{grid-column:1;grid-row:2;max-width:850px;width:100%;margin:auto;gap:38px}}
@media(max-width:760px){.price-section{padding:70px 24px 65px;gap:32px}.price-copy h2{font-size:clamp(42px,10.8vw,66px)}.history-section{padding:10px 24px 74px;gap:32px}.history-copy h2{font-size:clamp(38px,9.5vw,60px)}.app-screen{border-width:5px;border-radius:25px}.history-card .app-screen{border-radius:25px}.history-cards{gap:32px}.app-caption,.history-card figcaption{font-size:12px;margin-top:17px}.club-heading h2{font-size:clamp(37px,8.8vw,64px)}.club-benefits h3{font-size:30px}}

/* Give the club name prominence and pair water with heat. */
.club-heading .club-name{font:700 clamp(48px,7.4vw,110px)/1 var(--display);letter-spacing:.02em;color:var(--forest);margin-bottom:26px}
.utility-history{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;min-width:0;align-items:start}
.utility-history .app-screen{border-width:5px}
@media(max-width:1000px){.utility-history{grid-column:1;grid-row:3;gap:26px}}
@media(max-width:600px){.utility-history{grid-template-columns:1fr;gap:32px}.club-heading .club-name{font-size:clamp(43px,11.5vw,69px)}}

/* A gold splash in the open sky leads straight to the signup form. */
.hero-splash{position:absolute;z-index:3;top:clamp(28px,4vw,58px);left:clamp(28px,4.8vw,70px);width:clamp(156px,18vw,244px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;color:var(--forest);font:600 clamp(17px,2vw,26px)/1.1 var(--display);transform:rotate(-10deg);filter:drop-shadow(0 5px 0 #c08724) drop-shadow(0 10px 12px #153c4b26);transition:transform .2s ease}
.hero-splash::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 35% 20%,#fff3ac 0%,#ffdb62 45%,#ffc039 85%);clip-path:polygon(50% 0%,59% 8%,71% 5%,76% 17%,89% 17%,90% 30%,100% 39%,94% 50%,100% 61%,90% 70%,89% 83%,76% 83%,71% 95%,59% 92%,50% 100%,41% 92%,29% 95%,24% 83%,11% 83%,10% 70%,0% 61%,6% 50%,0% 39%,10% 30%,11% 17%,24% 17%,29% 5%,41% 8%)}
.hero-splash strong{font-size:1.16em;letter-spacing:.045em;font-weight:700;white-space:nowrap}.hero-splash:hover{transform:rotate(-6deg) scale(1.035)}.hero-splash:active{transform:rotate(-6deg) scale(.98)}.hero-splash:focus-visible{outline-color:var(--forest);outline-offset:8px;border-radius:24px}
.history-utilities{margin-top:18px;font:600 clamp(28px,10cqw,64px)/1.2 var(--display);color:var(--green);white-space:nowrap;text-align:center}.history-description{max-width:none;margin-top:24px;font-size:clamp(16px,4.1cqw,22px);font-weight:700;line-height:1.5;color:#608064;text-wrap:pretty}
@media(max-width:760px){.hero-splash{width:clamp(108px,28vw,156px);top:15px;left:12px;font-size:clamp(12px,3.1vw,18px);gap:6px;filter:drop-shadow(0 4px 0 #c08724) drop-shadow(0 7px 8px #153c4b20)}.history-description{margin-top:20px}}

/* Social profile links sit together under the centered footer artwork. */
.footer-social{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin-top:5px}
.footer-social a{width:46px;height:46px;display:grid;place-items:center;flex:none;border-radius:50%;background:#174b40;color:#d8e8d9;transition:color .2s,background .2s,transform .2s}
.footer-social svg{display:block;width:23px;height:23px}
.footer-social a:hover{color:var(--forest);background:var(--yellow);transform:translateY(-3px)}.footer-social a:focus-visible{outline-color:var(--yellow);outline-offset:4px}
@media(max-width:370px){.footer-social{gap:10px}.footer-social a{width:44px;height:44px}}

/* Launch signup includes the visitor's city and phone platform. */
.platform-choice{padding:0;margin:20px 0 0;border:0;min-width:0}.platform-choice legend{padding:0;margin-bottom:9px;color:#416750;font-size:14px;font-weight:900}
.platform-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.platform-options label{display:flex;align-items:center;gap:8px;padding:12px 10px;border:2px solid #cfddc5;border-radius:14px;background:#fffdf8;color:#416750;font-size:14px;font-weight:800;line-height:1.3;cursor:pointer}.platform-options input{accent-color:#24724b;width:17px;height:17px;margin:0;flex:none}.platform-options label:has(input:checked){border-color:#24724b;background:#dbeacc;color:#164c40}
.saving-advice{grid-column:1/-1;display:grid;gap:36px;justify-items:center;width:100%;padding-top:10px}.saving-advice .history-description{margin:0;max-width:900px;text-align:center;font:500 clamp(28px,3.4vw,48px)/1.2 var(--display);color:var(--ink)}
@media(max-width:430px){.platform-options{grid-template-columns:1fr}}

/* The approved Gnisti scene carries real, selectable HTML price advice. */
.notification-figure{width:min(100%,1100px);container-type:inline-size;margin:0 auto}
.live-advice-scene{position:relative;width:100%;border-radius:clamp(16px,3cqw,34px);overflow:hidden;isolation:isolate}
.advice-art{display:block;width:100%;height:auto;aspect-ratio:3/2}
.live-advice-panel{position:absolute;left:34.8%;right:8.1%;top:27.2%;bottom:26%;display:flex;flex-direction:column;justify-content:center;gap:.45cqw;color:#fff5d8;text-align:left}
.advice-header{display:flex;justify-content:space-between;gap:8px;align-items:center;font:700 clamp(9px,1.8cqw,20px)/1.1 var(--body);letter-spacing:.04em;margin-bottom:.5cqw}
.advice-header [data-advice-area]{font-weight:600;letter-spacing:0;color:#b7d7c4;white-space:nowrap}
.live-advice-panel h3{font:600 clamp(13px,3.7cqw,42px)/1.1 var(--display);letter-spacing:0;margin:0}
.advice-period{display:block;font:700 clamp(21px,6.1cqw,69px)/1.1 var(--display);letter-spacing:0;white-space:nowrap;color:#ffda68}
.advice-reason{font:500 clamp(11px,2.2cqw,24px)/1.22 var(--body);margin:0}
.advice-overnight{font:600 clamp(10px,1.85cqw,20px)/1.16 var(--body);margin:0}
.advice-price-row{display:flex;align-items:center;gap:.65cqw;margin-top:.3cqw}.advice-price{font:800 clamp(10px,2.3cqw,26px)/1.2 var(--body);color:#fff5d8;margin:0;white-space:nowrap}.advice-overnight{color:#ffda68}
.advice-price:empty,.advice-overnight:empty,.advice-note:empty{display:none}
.advice-basis{display:grid;place-items:center;flex:none;width:clamp(18px,3cqw,32px);height:clamp(18px,3cqw,32px);border:0;background:none;padding:2px;border-radius:50%}.advice-basis:hover{background:#ffffff18}.advice-basis:focus-visible{outline-color:#ffda68;outline-offset:2px}
.advice-basis img{width:clamp(12px,1.9cqw,21px);height:auto;filter:brightness(0) invert(1);opacity:.8}.advice-note{font:500 13px/1.5 var(--body);color:#31574e;margin:12px 12px 0;text-align:center}.advice-pending .advice-price-row{display:none}
.advice-pending .advice-period{font-size:clamp(17px,4.7cqw,50px)}
@container(max-width:430px){.live-advice-panel{left:34.2%;right:7.2%;top:26%;bottom:25%;gap:1px}.advice-header{font-size:8px;margin-bottom:1px}.live-advice-panel h3{font-size:13px}.advice-reason{font-size:10px}.advice-period{font-size:22px}.advice-overnight{font-size:9px}.advice-price{font-size:10.5px}}
@container(max-width:310px){.advice-header{font-size:7px}.live-advice-panel h3{font-size:11px}.advice-period{font-size:19px}.advice-reason{font-size:9px}.advice-price{font-size:9px}.advice-overnight{font-size:8px}}

/* Keep movement calm, local to the scene and stopped when it is not in view. */
.motion-enabled .hero-world .world-scene{transform-origin:55% 38%;animation:coastal-breath 12s ease-in-out infinite;animation-play-state:paused}
.motion-enabled .resources .utility-icon{animation:utility-hover 6s ease-in-out infinite;animation-play-state:paused}
.motion-enabled .resources .resource:nth-child(2) .utility-icon{animation-delay:-2s}.motion-enabled .resources .resource:nth-child(3) .utility-icon{animation-delay:-4s}
.motion-enabled .motion-in-view .world-scene,.motion-enabled .motion-in-view .utility-icon{animation-play-state:running}
.motion-enabled .notification-started .live-advice-scene{animation:notification-arrive .85s cubic-bezier(.2,.8,.2,1) .4s both}
.motion-enabled .notification-figure:not(.motion-in-view) .live-advice-scene,.page-hidden *{animation-play-state:paused!important}
@keyframes coastal-breath{0%,100%{scale:1}50%{scale:1.012}}
@keyframes utility-hover{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes notification-arrive{0%{opacity:0;transform:translateY(-22px) scale(.96)}72%{opacity:1;transform:translateY(3px) scale(1)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.gnisti-canvas{visibility:hidden!important}.notification-companion img{opacity:1!important}}