*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#edf3f6;color:#18384b;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px}a{color:inherit}button{font:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #efaa27;outline-offset:5px}.shell{max-width:780px;margin:auto;background:#f7fafc;min-height:100vh}header{display:flex;align-items:center;justify-content:space-between;padding:25px 28px;background:white;border-bottom:1px solid #e5edf1}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;font-size:25px;letter-spacing:-1px;color:#005689}.brand-logo{display:block;width:92px;height:auto;object-fit:contain}.brand strong{font-weight:800}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:3px;color:#547183}.mark{display:grid;place-content:center;position:relative;width:46px;height:46px;background:#005689;color:white;border-radius:13px;font-size:35px;font-weight:800;letter-spacing:-6px;padding-right:7px}.mark span{color:#ffcc5e}.location{font-size:12px;color:#607988}main{padding:0 28px}.welcome{padding:31px 0 25px;position:relative}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#007b93}h1{font-size:clamp(25px,5vw,34px);letter-spacing:-1px;margin:9px 0}p{line-height:1.5}.welcome p{color:#597182;margin:6px 0;font-size:16px}.date{font-size:12px;color:#6b8290;margin-top:17px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.card{display:block;position:relative;background:white;border:1px solid #dfE8ee;border-radius:19px;padding:20px;text-decoration:none;box-shadow:0 4px 12px #16394d05;transition:transform .15s,border-color .15s}.card:hover{transform:translateY(-2px);border-color:#73a9c4}.icon{width:49px;height:49px;display:grid;place-items:center;border-radius:14px;color:#007b99;background:#e3f5fa}.icon svg{width:28px;height:28px}.arrow{position:absolute;right:18px;top:20px;color:#839aa7;font-size:19px}.card h2{font-size:18px;letter-spacing:-.3px;margin:16px 0 5px;line-height:1.25}.card p{font-size:12px;color:#637a88;margin:0;max-width:210px}.c0{background:#005689;color:white;border-color:#005689}.c0 .icon{background:#ffffff23;color:white}.c0 p,.c0 .arrow{color:#deedf6}.c1 .icon{background:#e9f3e8;color:#4b8450}.c2 .icon{background:#fff2d8;color:#a66d16}.c3 .icon{background:#e5f2ef;color:#27866f}.c4 .icon{background:#fff4d6;color:#ab7610}.c5 .icon{background:#f0eaf6;color:#846193}.c6 .icon{background:#ffebe7;color:#b85b4c}.c7 .icon{background:#e8efff;color:#526caf}.c8 .icon{background:#fff1df;color:#a97024}.c9 .icon{background:#e9f2f6;color:#397994}.demo{display:block;font-size:10px;color:#6d7e89;margin-top:8px}.card:last-child:nth-child(odd){grid-column:1 / -1}.install{display:flex;gap:12px;align-items:center;background:#e8f1f7;border:1px solid #d7e5ee;border-radius:16px;padding:18px;margin:24px 0 16px}.install-icon{font-size:29px;color:#005689}.install h2{font-size:14px;margin:0 0 4px}.install p{font-size:12px;margin:0;color:#506e80}button{background:#005689;border:0;border-radius:10px;padding:12px 17px;color:white;min-height:44px}.install button{margin-left:auto;font-size:13px}.portal{display:flex;justify-content:space-between;text-decoration:none;padding:18px 4px;font-size:14px;color:#005689;font-weight:650}footer{display:flex;justify-content:space-between;gap:15px;padding:22px 28px 30px;color:#718894;font-size:10px;border-top:1px solid #e3ebef;margin-top:10px}footer>span:first-child{font-size:16px;color:#547183}.offline{padding:14px;background:#fff1d0;border-radius:12px;font-size:14px}dialog{width:min(440px,calc(100% - 32px));border:0;border-radius:20px;padding:26px;color:#18384b;box-shadow:0 20px 80px #001d3855}dialog::backdrop{background:#0b2d4c80}dialog h2{font-size:22px}dialog p{color:#557181;white-space:pre-line}dialog form{text-align:right}.skip{position:absolute;top:-100px}.skip:focus{top:0;z-index:5;background:white;padding:15px}@media(min-width:800px){.shell{margin:30px auto;border-radius:25px;overflow:hidden;box-shadow:0 20px 80px #234b6412}main{padding:0 36px}.card{padding:24px}.card h2{font-size:21px}}@media(max-width:380px){header{padding:20px 16px}main{padding:0 16px}.card{padding:16px 12px}.card h2{font-size:16px}.grid{gap:10px}.location{display:none}.install{flex-wrap:wrap}.install button{margin-left:0}footer{padding:20px 16px}}@media(prefers-reduced-motion:reduce){.card{transition:none}}
.install[hidden]{display:none}.push-at-bottom{margin-top:24px}
@media(display-mode:standalone){.install{display:none}}

.push-panel{display:flex;align-items:center;gap:14px;padding:16px 18px;background:white;border:1px solid #d7e5ee;border-radius:16px}.push-panel h2{font-size:14px;margin:0 0 4px}.push-panel p{font-size:12px;color:#506e80;margin:0}.push-panel button{margin-left:auto;font-size:13px;flex-shrink:0}button:disabled{opacity:.6;cursor:default}@media(max-width:460px){.push-panel{align-items:flex-start;flex-direction:column}.push-panel button{margin-left:0}}

/* InfoVodice: quiet, consistent blue and white palette. */
body{background:#e9edf1;color:#23344d}.shell{background:#f7f8fa;max-width:720px}header{padding:20px 28px;border-bottom:1px solid #e6e9ee}.brand-logo{width:78px}.location{color:#758092;font-size:12px;letter-spacing:.5px}.welcome{padding:28px 0 24px}.eyebrow{color:#65738b;letter-spacing:1.8px}h1{font-size:29px;letter-spacing:-1px;color:#263553}.welcome p{font-size:14px;color:#758092}.date{color:#8993a2}.grid{gap:12px}.card{border:1px solid #e1e6ed;border-radius:16px;padding:23px 20px;background:#fff;box-shadow:0 3px 10px #23344d03;min-height:160px}.card:hover{border-color:#8095b4;box-shadow:0 6px 18px #23344d08}.card .icon{background:#f0f3f8;color:#3c5279;border-radius:13px;width:48px;height:48px}.icon svg{stroke-width:1.5;width:29px;height:29px}.card .arrow{color:#a0aaba;font-size:16px}.card h2{font-size:19px;font-weight:650;letter-spacing:-.4px}.card p{font-size:12px;color:#748093;line-height:1.5}.c0{background:#2e3e64;border-color:#2e3e64;color:#fff}.c0 .icon{background:#ffffff12;color:white}.c0 p,.c0 .arrow{color:#d4dbea}.card:last-child:nth-child(odd){min-height:110px;display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-content:center}.card:last-child .icon{grid-row:1 / 3;align-self:center}.card:last-child h2{margin:0 0 5px}.card:last-child p{max-width:none}.install{background:#edf1f6;border:1px solid #e0e6ef;border-radius:14px;padding:16px;margin:20px 0 10px}.install-icon{color:#3c5279}.install h2,.push-panel h2{color:#344563}.install p,.push-panel p{color:#768195}button{background:#34496f;border-radius:9px}.push-panel{background:transparent;border:0;border-bottom:1px solid #e2e7ed;border-radius:0;padding:12px 2px 20px}.push-panel button{background:#fff;color:#34496f;border:1px solid #ced7e4}.push-at-bottom{margin-top:22px}.portal{color:#455d80;font-size:13px;padding:22px 3px}footer{border-color:#e2e7ed;color:#8792a1}footer>span:first-child{color:#53627b}@media(min-width:800px){main{padding:0 32px}.shell{border-radius:22px;margin:24px auto}.card h2{font-size:20px}}@media(max-width:380px){.card{padding:19px 14px;min-height:156px}.card h2{font-size:17px}h1{font-size:25px}}
.contact-main{padding-top:24px;padding-bottom:32px}.back{display:inline-flex;text-decoration:none;font-size:14px;color:#536985;padding:10px 0;min-height:44px}.contact-main h1{margin:20px 0 8px}.contact-intro{font-size:15px;color:#748093;margin:0 0 24px}.contact-actions{display:grid;gap:12px;margin-bottom:28px}.contact-action{display:flex;align-items:center;gap:14px;border:1px solid #dee5ed;border-radius:14px;padding:19px;background:white;text-decoration:none;color:#34496f;font-weight:650;min-height:72px}.contact-action svg{width:26px;height:26px;flex-shrink:0}.contact-action span:last-child{margin-left:auto;color:#98a3b3}.about{background:#fff;border:1px solid #e1e6ed;padding:24px;border-radius:16px}.about h2{font-size:19px;margin:0 0 14px}.about p{font-size:14px;line-height:1.8;color:#68778d}.contact-details{font-style:normal;font-size:14px;line-height:1.9;margin-top:24px;color:#68778d}.contact-details strong{color:#344563}.contact-details a{color:#34496f}

/* Soft colour, strong readability, generous touch targets. */
body{background:#edf1f5}.shell{background:#f8fafc}header{padding-top:18px;padding-bottom:18px}.welcome{padding:26px 0}.welcome h1{font-weight:720;letter-spacing:-1.1px}.eyebrow{color:#49708e}.card{border-radius:20px;border-color:#e5ebf1;box-shadow:0 5px 15px #304d6810;padding:23px 21px;min-height:168px}.card:hover{transform:translateY(-3px);border-color:#b0c4d7;box-shadow:0 10px 25px #304d6818}.card h2{margin-top:18px;font-weight:700;color:#273951}.card p{color:#65768a;font-size:12px}.card .icon{width:52px;height:52px;border-radius:16px}.card .icon svg{width:29px;height:29px;stroke-width:1.7}.c0{background:#edf5ff;border-color:#d6e6fa}.c0 h2{color:#254e7a}.c0 p{color:#58738e}.c0 .arrow{color:#6e95bd}.c0 .icon{background:#dbeaff;color:#3478bb}.c1 .icon{background:#e4f3ec;color:#318367}.c2 .icon{background:#e4f2f3;color:#2b8290}.c3 .icon{background:#fff1d4;color:#b87c19}.c4 .icon{background:#edeaf6;color:#8671a7}.c5 .icon{background:#fbe7e7;color:#b9575b}.c6 .icon{background:#e9edff;color:#6574b9}.c7 .icon{background:#f9eddf;color:#af783d}.c8 .icon{background:#e7eff7;color:#4f7ba1}.install{background:#edf4fa;border-color:#dfe9f2;border-radius:17px}.install button{background:#355e85}.push-panel button{border-radius:11px}.contact-action{border-radius:17px;box-shadow:0 4px 12px #304d6808}.contact-action:first-child svg{color:#318367}.contact-action:last-child svg{color:#3478bb}@media(prefers-reduced-motion:reduce){.card:hover{transform:none}}@media(max-width:380px){.card{padding:19px 14px}.card h2{font-size:17px}}

header:has(.welcome){display:grid;grid-template-columns:78px minmax(0,1fr);gap:22px;align-items:center;padding:14px 28px}header .welcome{padding:0;min-width:0}header .welcome h1{font-size:24px;line-height:1.1;margin:2px 0;letter-spacing:-.8px}header .welcome .eyebrow{font-size:9px;letter-spacing:1.3px}header .welcome p{font-size:12px;margin:2px 0 3px;line-height:1.2}.date-line{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:11px;color:#748093;line-height:1.5}#vodice-clock{font-variant-numeric:tabular-nums;font-weight:650;color:#455d80}main>.grid{margin-top:22px}@media(max-width:440px){header:has(.welcome){grid-template-columns:64px minmax(0,1fr);gap:16px;padding:12px 18px}header .brand-logo{width:64px}header .welcome h1{font-size:21px}header .welcome p{font-size:11px}.date-line{font-size:10px}}@media(max-width:340px){header:has(.welcome){grid-template-columns:52px minmax(0,1fr);gap:12px}header .brand-logo{width:52px}header .welcome h1{font-size:19px}}

#install-guide{width:min(520px,calc(100% - 24px));max-height:90dvh;overflow:auto;padding:24px}#install-guide h2{padding-right:35px;margin:6px 0 8px}.guide-intro{font-size:14px;margin:0 0 22px}.guide-close{position:absolute;right:14px;top:12px}.guide-close button{background:#eef2f7;color:#34496f;font-size:24px;padding:0;width:44px}#guide-steps{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:20px}#guide-steps li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:16px;align-items:start}.guide-picture{width:62px;height:62px;background:#e8f0fb;color:#446fa1;border-radius:17px;display:grid;place-items:center}.guide-picture svg{width:33px;height:33px}.guide-number{font-size:10px;font-weight:750;letter-spacing:1px;color:#708097}#guide-steps h3{font-size:16px;margin:4px 0 6px}#guide-steps p{font-size:14px;line-height:1.5;margin:0}.guide-warning{background:#f4f6f9;border-radius:12px;padding:13px;font-size:12px}#guide-steps li:last-child .guide-picture{background:#e6f3ed;color:#3f8567}

.guide-picture img{display:block;width:62px;height:62px;border-radius:14px}#vodice-temperature{color:#457f89;text-decoration:none;font-weight:650;font-variant-numeric:tabular-nums}header .welcome h1{font-size:22px;margin:0 0 4px}header .welcome p{margin:0 0 6px;line-height:1.3}@media(max-width:440px){header .welcome h1{font-size:20px}}

.guide-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.guide-actions form{margin:0}.guide-actions button[hidden]{display:none}#push-welcome-later{background:#edf1f6;color:#415978}

/* Approved mockup: a compact two-column home screen. */
.shell{max-width:580px;background:#fcfdff}main{padding:0 16px}header:has(.welcome){grid-template-columns:68px minmax(0,1fr);gap:14px;padding:18px 18px 14px;border-bottom:0}header .brand-logo{width:68px}header .welcome h1{font-size:21px;line-height:1.12;letter-spacing:-.65px;color:#142e60}header .welcome p{font-size:11px;line-height:1.35;color:#697992;margin:5px 0 8px}.date-line{font-size:11px;color:#49678d;gap:6px}.grid{gap:9px}main>.grid{margin-top:8px}.card,.card:last-child:nth-child(odd){display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:10px;min-height:94px;padding:12px 10px;border-radius:15px;border:1px solid #e4e8f0;box-shadow:0 3px 10px #20304b06}.card .icon,.card:last-child .icon{grid-row:1 / 3;align-self:center;width:48px;height:53px;border-radius:14px}.card .icon svg{width:30px;height:30px;stroke-width:1.8}.card h2,.card:last-child h2{align-self:end;margin:0 0 5px;font-size:16px;font-weight:750;line-height:1.1;letter-spacing:-.45px;color:#152f62}.card p,.card:last-child p{align-self:start;margin:0;font-size:11px;line-height:1.35;color:#526b91;max-width:none}.card .arrow{display:none}.c0{background:#edf5ff;border-color:#c5dfff}.c1 .icon{background:#fceeee;color:#c05558}.c2 .icon{background:#e5f4f1;color:#24877e}.c3 .icon{background:#fff7e7;color:#dfaa39}.c4 .icon{background:#efecfd;color:#8a7cba}.c5 .icon{background:#fce8e8;color:#cf6465}.c6 .icon{background:#eaf4ff;color:#478ecd}.c7 .icon{background:#fff4df;color:#b88c3c}.card:last-child:nth-child(odd){grid-column:1/-1;min-height:70px;grid-template-columns:48px 1fr;padding:10px 12px}.card:last-child .icon{height:48px}.card:last-child .arrow{display:block;top:24px;right:18px}.push-panel{display:flex!important;flex-direction:row;align-items:center;padding:12px;gap:10px;border:1px solid #e4e8f0;border-radius:15px;background:white;margin:10px 0 0}.push-bell{display:grid;place-items:center;width:40px;height:44px;flex:0 0 40px;background:#e7f0ff;color:#366ca7;border-radius:12px}.push-bell svg{width:26px;height:26px}.push-panel>div{min-width:0}.push-panel h2{font-size:14px;line-height:1.2;color:#193866}.push-panel p{font-size:10px;line-height:1.3}.push-panel button{font-size:11px;padding:9px;min-height:40px;max-width:110px;margin-left:auto;border-color:#8395b4;color:#203e71}.portal{padding:16px 4px 14px;justify-content:center;gap:9px;margin-top:12px;border-top:1px solid #dce3ef;color:#193866;font-weight:750;font-size:14px}footer{display:none}.install{margin:8px 0 0;padding:12px}.install h2{font-size:13px}.install p{font-size:11px}.install button{padding:10px;font-size:12px}.push-at-bottom{margin-top:10px}
@media(min-width:650px){.shell{margin:20px auto;border-radius:26px;max-width:480px;box-shadow:0 16px 55px #27395712}main{padding:0 18px}.card{min-height:104px;padding:14px 12px;column-gap:12px;grid-template-columns:52px minmax(0,1fr)}.card .icon{width:52px;height:58px}.card h2{font-size:18px}.card p{font-size:12px}header:has(.welcome){padding:24px 20px 18px;grid-template-columns:72px minmax(0,1fr)}header .brand-logo{width:72px}}
@media(max-width:360px){main{padding:0 12px}.grid{gap:8px}.card{grid-template-columns:38px minmax(0,1fr);column-gap:8px;padding:10px 8px;min-height:91px}.card .icon{width:38px;height:46px}.card .icon svg{width:26px;height:26px}.card h2{font-size:14px}.card p{font-size:10px}header .welcome h1{font-size:18px}header:has(.welcome){padding:14px 14px 10px;gap:10px;grid-template-columns:58px minmax(0,1fr)}header .brand-logo{width:58px}}
@media(display-mode:standalone) and (min-height:740px) and (max-width:649px){.shell{min-height:100svh;display:flex;flex-direction:column}body .shell main{flex:1;display:flex;flex-direction:column}.grid{flex:1;grid-template-rows:repeat(4,minmax(94px,1fr)) 70px}.portal{margin-bottom:env(safe-area-inset-bottom,0px)}}

.weather-now-icon{display:inline-flex;vertical-align:middle;flex:0 0 22px;width:22px;height:22px;margin-right:-3px}.weather-now-icon[hidden]{display:none}.weather-now-icon img{width:22px;height:22px;object-fit:contain}

.install{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px 10px}.install-step{display:block;font-size:9px;font-weight:750;letter-spacing:.6px;color:#37617a;margin-bottom:5px}.install button{grid-column:2;justify-self:start}.install p{max-width:310px;margin-top:4px;line-height:1.45}

.install{background:#fff1f1;border:1px solid #efb2b5;border-left:4px solid #d8202b}.install .install-step{color:#b61924;font-size:11px;font-weight:800}.install h2{color:#a91620}.install .install-icon{color:#c61e29}.install button{background:#cf1f2b;color:#fff;border:1px solid #cf1f2b;font-weight:750}.install button:hover{background:#af1721;border-color:#af1721}