:root{--ink:#0b3554;--muted:#607f96;--lagoon:#078fce;--deep:#075d91;--foam:#edfaff;--sand:#dff4ff;--paper:#fbfdff;--sun:#70d6ff;--coral:#197fc0;--line:rgba(11,75,117,0.13);}*{box-sizing:border-box;}body{min-width:320px;margin:0;background:#eaf6fc;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;}button{font:inherit;cursor:pointer;}.app-shell{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;padding:22px clamp(18px,4vw,64px) 20px;background:radial-gradient(circle at 94% 3%,rgba(77,194,241,0.22),transparent 23%),radial-gradient(circle at 8% 86%,rgba(8,143,206,0.1),transparent 28%),linear-gradient(150deg,#eefaff 0%,#f9fdff 54%,#dceefa 100%);}.ambient{position:absolute;z-index:-1;border-radius:50%;}.ambient-one{width:330px;height:330px;right:-170px;bottom:-180px;border:44px solid rgba(7,143,206,0.09);}.ambient-two{width:190px;height:190px;left:-120px;top:34%;background:rgba(64,188,237,0.09);}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1310px;margin:0 auto 18px;}.brand{display:flex;align-items:center;gap:10px;color:var(--deep);text-decoration:none;font-size:23px;font-weight:820;letter-spacing:-1.45px;}.brand-copy{display:flex;align-items:baseline;gap:7px;}.brand-word > span{color:var(--coral);}.brand-copy small{color:#5b7d97;font-size:8px;font-weight:850;letter-spacing:1.2px;text-transform:uppercase;}.brand-mark{display:flex;align-items:end;gap:2px;width:27px;height:29px;}.brand-mark i{display:block;width:7px;border-radius:10px;background:var(--lagoon);transform:rotate(31deg);}.brand-mark i:first-child{height:12px;background:#72d8ff;}.brand-mark i:nth-child(2){height:25px;}.brand-mark i:last-child{height:17px;background:#2d99d4;}.topbar-actions,.station{display:flex;align-items:center;gap:10px;}.station{color:#587b94;font-size:11px;font-weight:650;}.pulse,.stage-pulse{width:8px;height:8px;border-radius:50%;background:#42af77;box-shadow:0 0 0 5px rgba(66,175,119,0.15);}.icon-button{border:1px solid var(--line);border-radius:99px;padding:8px 12px;color:var(--deep);background:rgba(255,255,255,0.68);font-size:10px;font-weight:850;}.service-panel{position:relative;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(350px,0.82fr);align-items:center;overflow:hidden;min-height:704px;max-width:1310px;margin:auto;border:7px solid rgba(255,255,255,0.88);border-radius:38px;background:#126f9f;box-shadow:0 32px 80px rgba(5,72,114,0.24);}.service-panel::before{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(2,39,67,0.86) 0%,rgba(3,64,98,0.59) 40%,rgba(4,73,108,0.08) 68%),linear-gradient(180deg,rgba(3,74,111,0.04) 45%,rgba(2,45,75,0.4) 100%);content:"";}.island-postcard{position:absolute;inset:0;}.island-postcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:0;transform:scale(1.01);transition:opacity 1.6s ease;}.island-postcard img.is-visible{opacity:1;}.intro-copy{position:relative;z-index:2;align-self:center;padding:68px clamp(34px,5vw,76px);color:#fff;}.local-welcome{display:inline-flex;margin-bottom:30px;border:1px solid rgba(255,255,255,0.28);border-radius:99px;padding:8px 13px;background:rgba(4,91,137,0.34);backdrop-filter:blur(12px);font-size:11px;font-weight:650;}.local-welcome b{color:#9fe8ff;}.eyebrow{margin:0 0 15px;color:var(--coral);font-size:9px;font-weight:880;letter-spacing:1.75px;text-transform:uppercase;}.intro-copy .eyebrow{color:#8ee3ff;}.intro-copy h1{max-width:670px;margin:0;color:#fff;font-size:clamp(53px,6vw,82px);line-height:0.94;letter-spacing:-4.8px;text-wrap:balance;}.intro-copy h1 em{color:#bfeeff;font-style:normal;}.lead{max-width:510px;margin:27px 0 0;color:rgba(239,250,255,0.86);font-size:16px;line-height:1.62;}.daily-note{display:flex;align-items:center;gap:13px;max-width:485px;margin-top:27px;border-top:1px solid rgba(255,255,255,0.24);padding-top:21px;}.note-icon{display:grid;flex:0 0 auto;width:39px;height:39px;place-items:center;border-radius:50%;color:#075d91;background:#a6e8ff;font-size:16px;}.daily-note b,.daily-note span{display:block;}.daily-note b{color:#fff;font-size:14px;}.daily-note div span{margin-top:4px;color:rgba(231,248,255,0.76);font-size:10px;line-height:1.45;}.rfid-stage{position:relative;z-index:3;justify-self:end;width:min(90%,410px);margin:34px 38px 34px 0;border:1px solid rgba(255,255,255,0.7);border-radius:31px;padding:28px 28px 25px;background:rgba(249,253,255,0.95);box-shadow:0 28px 60px rgba(0,54,91,0.31);backdrop-filter:blur(18px);}.stage-heading{display:flex;align-items:center;gap:13px;margin-bottom:22px;}.stage-pulse{flex:0 0 auto;}.stage-heading span:not(.stage-pulse){display:block;color:#76908e;font-size:9px;font-weight:780;letter-spacing:1.2px;text-transform:uppercase;}.stage-heading strong{display:block;margin-top:4px;color:var(--ink);font-size:18px;letter-spacing:-0.5px;}.reader{position:relative;overflow:hidden;border-radius:24px;padding:24px 18px 22px;color:#fff;background:linear-gradient(145deg,#0aa4dc,#075b95);box-shadow:inset 0 1px rgba(255,255,255,0.25),0 17px 29px rgba(5,93,145,0.25);text-align:center;}.reader::before,.reader::after{position:absolute;border:1px solid rgba(255,255,255,0.09);border-radius:50%;content:"";}.reader::before{width:190px;height:190px;right:-90px;top:-110px;}.reader::after{width:120px;height:120px;left:-70px;bottom:-65px;}.reader-face{position:relative;display:grid;width:176px;height:176px;margin:0 auto 20px;place-items:center;border:1px solid rgba(255,255,255,0.22);border-radius:50%;background:rgba(2,64,105,0.3);}.scan-rings{position:absolute;inset:0;display:grid;place-items:center;}.scan-rings b{position:absolute;width:66px;height:66px;border:1px solid rgba(226,255,248,0.62);border-radius:50%;}.scan-rings b:nth-child(2){width:112px;height:112px;border-color:rgba(226,255,248,0.28);}.scan-rings b:last-child{width:153px;height:153px;border-color:rgba(226,255,248,0.13);}.rfid-icon{position:relative;z-index:2;display:flex;align-items:center;gap:6px;width:74px;height:60px;padding-left:12px;border:2px solid #edfff9;border-radius:11px;box-shadow:0 0 29px rgba(145,255,228,0.72);}.rfid-icon span{width:5px;height:29px;border-radius:7px;background:#edfff9;}.rfid-icon span:nth-child(2){height:39px;}.rfid-icon span:last-child{height:20px;}.reader p{position:relative;z-index:1;margin:0;font-size:16px;font-weight:760;letter-spacing:-0.3px;}.reader small{position:relative;z-index:1;display:block;margin-top:6px;color:rgba(225,252,245,0.72);font-size:10px;}.reader.is-scanning .scan-rings{animation:scan 1.15s ease-out infinite;}.reader.is-scanning{background:linear-gradient(145deg,#18c3ea,#0b6ec1);}@keyframes scan{from{opacity:1;transform:scale(0.84);}to{opacity:0;transform:scale(1.17);}}.service-facts{display:flex;align-items:center;justify-content:center;gap:15px;margin:18px 0 0;color:#718886;font-size:9px;}.service-facts span{display:flex;align-items:baseline;gap:4px;}.service-facts b{color:var(--deep);font-size:11px;}.service-facts i{width:1px;height:18px;background:var(--line);}.text-action{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px;border:0;border-radius:14px;padding:13px;color:#076ca7;background:#e7f7ff;font-size:11px;font-weight:800;}.text-action span{font-size:16px;}.text-action:hover{background:#d8f1ff;}.text-action:disabled{opacity:0.5;cursor:default;}.account-screen{display:grid;grid-template-columns:minmax(520px,620px) minmax(300px,350px);align-items:stretch;justify-content:center;gap:22px;max-width:1030px;margin:54px auto;}.account-card,.dispensing-card{width:min(100%,620px);border:1px solid rgba(255,255,255,0.86);border-radius:31px;padding:32px;background:rgba(250,253,255,0.97);box-shadow:0 28px 65px rgba(8,76,119,0.17);}.account-card{width:100%;}.dispensing-card{margin:66px auto;}.is-hidden{display:none;}.account-screen.is-hidden{display:none;}.usage-guide{position:relative;overflow:hidden;border-radius:31px;padding:29px 27px 24px;color:#fff;background:linear-gradient(155deg,#087fb8 0%,#075b91 62%,#063e69 100%);box-shadow:0 28px 60px rgba(6,66,108,0.23);}.usage-guide::before,.usage-guide::after{position:absolute;border:1px solid rgba(255,255,255,0.09);border-radius:50%;content:"";}.usage-guide::before{width:180px;height:180px;top:-95px;right:-72px;}.usage-guide::after{width:110px;height:110px;left:-65px;bottom:-45px;}.guide-heading{position:relative;z-index:2;}.guide-heading .eyebrow{margin-bottom:9px;color:#8de1ff;}.guide-heading h2{margin:0;font-size:28px;line-height:1.02;letter-spacing:-1.4px;}.guide-heading > p:last-child{max-width:280px;margin:13px 0 0;color:rgba(235,255,249,0.72);font-size:11px;line-height:1.5;}.machine-demo{position:relative;z-index:2;height:250px;margin-top:10px;}.machine-demo svg{display:block;width:100%;height:100%;filter:drop-shadow(0 16px 18px rgba(0,31,34,0.2));}.guide-steps{position:relative;z-index:2;display:grid;gap:7px;}.guide-steps span{display:flex;align-items:center;gap:8px;color:rgba(239,255,250,0.73);font-size:9px;}.guide-steps b{display:grid;width:20px;height:20px;place-items:center;border-radius:50%;color:#075d91;background:#9ee5ff;font-size:8px;}.account-heading{display:flex;align-items:center;gap:14px;}.avatar{display:grid;width:50px;height:50px;place-items:center;border-radius:17px;color:#fff;background:linear-gradient(145deg,var(--coral),var(--lagoon));font-size:12px;font-weight:820;}.account-heading .eyebrow{margin:0 0 2px;font-size:8px;}.account-heading h2,.dispensing-card h2{margin:0;color:var(--ink);font-size:25px;letter-spacing:-1px;}.close-button{width:36px;height:36px;margin-left:auto;border:1px solid var(--line);border-radius:50%;color:#637c7b;background:#fff;font-size:22px;}.account-summary{display:grid;grid-template-columns:1fr 1fr;gap:1px;overflow:hidden;margin:26px 0;border:1px solid var(--line);border-radius:18px;background:var(--line);}.account-summary > div{padding:16px;background:#fbfdff;}.account-summary span{display:block;color:#748685;font-size:10px;font-weight:700;}.account-summary strong{display:block;margin-top:5px;color:var(--ink);font-size:23px;letter-spacing:-1px;}.account-summary small{color:#718482;font-size:10px;letter-spacing:0;}.selection-block{border-top:1px solid var(--line);padding-top:23px;}.selection-heading{display:flex;align-items:center;justify-content:space-between;}.selection-heading h3{margin:0;font-size:14px;}.selection-heading span{color:var(--lagoon);font-size:13px;font-weight:820;}.quantity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:15px;}.quantity{border:1px solid var(--line);border-radius:15px;padding:15px 5px;color:#667d7b;background:#fff;transition:0.2s ease;}.quantity b{display:block;color:var(--ink);font-size:20px;}.quantity span{font-size:10px;}.quantity.selected{border-color:var(--lagoon);background:#e8f7ff;box-shadow:0 0 0 3px rgba(7,143,206,0.12);transform:translateY(-2px);}.quantity.selected b{color:var(--lagoon);}.primary-action{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:23px;border:0;border-radius:17px;padding:17px 19px;color:#fff;background:linear-gradient(105deg,var(--deep),var(--lagoon));box-shadow:0 14px 24px rgba(7,104,163,0.23);font-size:14px;font-weight:820;}.action-arrow{display:grid;width:28px;height:28px;place-items:center;border-radius:9px;color:#075d91;background:#a8e8ff;font-size:17px;}.dispensing-card{max-width:450px;text-align:center;}.dispense-top{display:flex;justify-content:space-between;}.dispense-top .eyebrow{margin:0;}.dispense-top span:last-child{color:var(--lagoon);font-size:12px;font-weight:820;}.water-visual{display:grid;height:200px;place-items:center;}.droplet{position:relative;overflow:hidden;width:119px;height:148px;border:2px solid #a9d9ef;border-radius:61% 39% 56% 44% / 58% 45% 55% 42%;background:#e8f7fd;transform:rotate(45deg);}.fill{position:absolute;bottom:-20%;left:-35%;width:170%;height:0%;border-radius:42%;background:linear-gradient(#55d9f5,#078fce);transform:rotate(-45deg);transition:height 0.2s;}.dispensing-card > p{margin:8px 0 18px;color:#718482;font-size:12px;}.progress-track{overflow:hidden;height:8px;border-radius:20px;background:#dceef7;}.progress-value{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#078fce,#5bdcf5);transition:width 0.2s;}.secondary-action{margin-top:22px;border:0;color:#687d7b;background:transparent;font-size:11px;font-weight:800;}.update-overlay{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:20px;background:rgba(3,45,75,0.47);backdrop-filter:blur(12px);}.update-overlay.is-hidden{display:none;}.update-dialog{display:grid;grid-template-columns:auto 1fr;gap:18px;width:min(100%,510px);border:1px solid rgba(255,255,255,0.86);border-radius:28px;padding:26px;background:#fbfdff;box-shadow:0 30px 80px rgba(3,48,79,0.31);}.update-icon{display:grid;width:50px;height:50px;place-items:center;border-radius:16px;color:#fff;background:linear-gradient(145deg,var(--lagoon),var(--deep));font-size:28px;}.update-dialog .eyebrow{margin:2px 0 7px;}.update-dialog h2{margin:0;color:var(--ink);font-size:21px;line-height:1.15;letter-spacing:-0.8px;}.update-dialog p:not(.eyebrow){margin:7px 0 0;color:var(--muted);font-size:13px;}.update-actions{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:9px;margin-top:5px;}.update-actions button{border-radius:13px;padding:12px 16px;font-size:12px;font-weight:800;}.update-later{border:1px solid var(--line);color:#617b7a;background:#fff;}.update-now{border:0;color:#fff;background:var(--lagoon);box-shadow:0 10px 18px rgba(7,143,206,0.22);}.update-now:disabled{opacity:0.65;cursor:wait;}footer{display:flex;justify-content:space-between;max-width:1310px;margin:auto;padding:14px 4px 0;color:#5d7775;font-size:10px;}footer b{color:#2a5958;}footer a{color:#357898;text-decoration:none;}footer a:hover{text-decoration:underline;}.fade-in{animation:fade 0.45s ease both;}@keyframes fade{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}@media (max-width:860px){.app-shell{padding:18px 14px 16px;}.station{display:none;}.service-panel{grid-template-columns:1fr;align-items:end;min-height:auto;border-width:5px;border-radius:29px;}.service-panel::before{background:linear-gradient(180deg,rgba(3,48,78,0.24),rgba(3,48,78,0.8) 52%,#e9f6fc 52.2%);}.island-postcard{height:52%;}.island-postcard img{object-position:42% 28%;}.intro-copy{min-height:465px;padding:54px 27px 50px;}.local-welcome{margin-bottom:24px;}.intro-copy h1{font-size:clamp(48px,12vw,64px);letter-spacing:-3.5px;}.lead{max-width:530px;font-size:15px;}.daily-note{margin-top:22px;}.rfid-stage{justify-self:center;width:calc(100% - 30px);max-width:450px;margin:24px 15px 18px;}.account-screen{grid-template-columns:minmax(0,620px);max-width:620px;margin:45px auto;}.account-card,.dispensing-card{padding:24px;}.dispensing-card{margin:45px auto;}.usage-guide{min-height:520px;}.machine-demo{max-width:310px;margin:12px auto 0;}footer{gap:10px;font-size:9px;}}@media (max-width:480px){.brand{font-size:21px;}.service-panel::before{background:linear-gradient(180deg,rgba(3,48,78,0.26),rgba(3,48,78,0.82) 48%,#e9f6fc 48.2%);}.island-postcard{height:48%;}.intro-copy{min-height:520px;padding:45px 23px;}.intro-copy h1{font-size:48px;}.rfid-stage{padding:24px 20px 22px;}.reader-face{width:162px;height:162px;}.account-screen{margin:34px auto;}.usage-guide{min-height:510px;padding:25px 22px 22px;}.guide-heading h2{font-size:25px;}.update-dialog{grid-template-columns:1fr;padding:22px;}.update-actions{grid-column:auto;}.account-summary,.quantity-grid{grid-template-columns:1fr;}.quantity b,.quantity span{display:inline;}}@media (prefers-reduced-motion:reduce){.island-postcard img{transition:none;}.demo-card,.demo-reader b,.demo-screen i,.demo-spout i,.demo-bottle span{animation:none;}.demo-card{transform:translate(-94px,-68px);}.demo-spout i{transform:scaleY(1);opacity:1;}.demo-bottle span{height:72%;}}