/* Shopika WiFi public site and account: loaded after portal.css on every page outside the captive flow
   (home, Find WiFi, agents, help, legal, My account). Served as /site.css?v=hash. */
/* Header: inline nav (desktop), menu sheet */
.nav{display:none}
.menu{position:relative;flex:none}
.menu>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;cursor:pointer}
.menu>summary::-webkit-details-marker,.amenu>summary::-webkit-details-marker{display:none}
.menu>summary::marker,.amenu>summary::marker{content:""}
.menu>summary:hover,.menu[open]>summary{background:rgba(255,255,255,.14)}
.sheet{position:absolute;right:0;top:52px;width:min(300px,calc(100vw - 24px));background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh2);padding:8px;z-index:25}
.sheet a{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 12px;border-radius:10px;color:var(--ink)!important;font-weight:600}
.sheet a:hover{background:var(--soft)}
.sheet a .i{color:var(--p2)}
.sheet a[aria-current]{background:var(--tint)}
.sheet hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
@media(min-width:860px){
 .nav{display:flex;gap:2px;margin-right:8px}
 .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;font-size:.9375rem;font-weight:600;color:rgba(255,255,255,.9)}
 .nav a:hover{background:rgba(255,255,255,.12);color:#fff}
 .nav a[aria-current]{background:rgba(255,255,255,.18);color:#fff}
 .menu{display:none}
}
/* Countdown ring (account) */
.status{display:flex;align-items:center;gap:16px}
.ringw{position:relative;flex:none;width:96px;height:96px}
.ringw svg{transform:rotate(-90deg)}
.ringw circle{fill:none;stroke-width:8}
.ringw .bg{stroke:var(--soft)}
.ringw .fg{stroke:var(--p2);stroke-linecap:round}
.ringw.low .fg{stroke:var(--a)}
.ringw b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.125rem;font-weight:700;font-variant-numeric:tabular-nums}
.ringw b small{font-size:.625rem;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.left{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
/* Accordion (FAQ) */
.faq{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);margin:12px 0}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 16px;font-weight:600;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{background:var(--soft)}
.faq summary .i{color:var(--mut);transition:transform .2s}
.faq details[open] summary .i{transform:rotate(180deg)}
.faq details p{margin:0;padding:0 16px 16px;color:var(--mut)}
/* Tabs (account) */
.tabs{display:flex;gap:4px;margin:0 0 16px;padding:4px;background:var(--soft);border-radius:12px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border-radius:9px;font-size:.9375rem;font-weight:600;color:var(--mut);text-decoration:none;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
@media(max-width:419px){.tabs a{padding:0 10px}.tabs a .i{display:none}}
.tabs a[aria-current]{background:var(--card);color:var(--ink);box-shadow:var(--sh),inset 0 0 0 1px var(--line)}
.who{display:flex;align-items:center;gap:12px;margin:4px 0 16px}
.who .av{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--tint);color:var(--p2);font-weight:700;font-size:1.0625rem;letter-spacing:.02em}
.who .grow{flex:1;min-width:0}
.who .nm{font-size:1.1875rem;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:0;color:var(--ink)}
.who p.num{margin:0;font-size:.875rem;color:var(--mut)}
.amenu{position:relative;flex:none}
.amenu>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:var(--card);color:var(--ink2)}
.amenu>summary::-webkit-details-marker{display:none}
.amenu .sheet{top:52px}
.amenu form{margin:0}
.amenu button{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:6px 12px;border:0;border-radius:10px;background:none;font:inherit;font-weight:600;color:var(--err);cursor:pointer;text-align:left}
.amenu button:hover{background:var(--errbg)}
/* Thread (support ticket) */
.bub{max-width:88%;padding:12px 14px;border-radius:16px;margin:10px 0;background:var(--card);border:1px solid var(--line)}
.bub.me{margin-left:auto;background:var(--tint);border-color:var(--infoline);border-bottom-right-radius:6px}
.bub.them{border-bottom-left-radius:6px}
.bub .who-l{font-size:.75rem;font-weight:700;color:var(--mut);margin:0 0 4px}
.bub p{margin:0;white-space:pre-line}
/* Marketing sections (public pages) */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 100% 0,var(--tint2) 0,transparent 55%),linear-gradient(180deg,var(--tint) 0,var(--bg) 100%);border-bottom:1px solid var(--line)}
.hero .in{max-width:1080px;margin:0 auto;padding:24px 16px 20px;display:grid;gap:8px;align-items:center}
.hero h1{font-size:clamp(2rem,7.5vw,3.25rem);line-height:1.08;letter-spacing:-.02em;margin:.1em 0 .3em;font-weight:700}
.hero .lead{font-size:clamp(1.0625rem,2.6vw,1.1875rem);max-width:36em}
.hero .btn{margin:20px 0 8px}
.hero-art{justify-self:center;width:min(250px,70%);margin-top:-4px}
.hero-art svg{display:block;width:100%;height:auto}
@media(min-width:860px){.hero .in{grid-template-columns:1.15fr .85fr;padding:56px 24px 64px}.hero .btn{width:auto;display:inline-flex;padding-left:28px;padding-right:28px}.hero-art{width:100%;max-width:380px}}
.live{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:.8125rem;font-weight:600;color:var(--ink2);box-shadow:var(--sh)}
.live i{width:8px;height:8px;border-radius:50%;background:#1f9d63;box-shadow:0 0 0 3px rgba(31,157,99,.18)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:20px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--sh)}
.stat b{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.2}
.stat span{display:block;font-size:.8125rem;color:var(--mut);margin-top:2px}
.stat.fact{grid-column:1/-1;display:flex;gap:12px;align-items:center}
.stat.fact>.ico{display:grid;place-items:center;flex:none;margin:0}
.stat.fact b{font-size:1rem;letter-spacing:0}
@media(min-width:860px){.stat.fact{grid-column:auto}}
.feats{display:grid;gap:12px;margin:14px 0}
@media(min-width:720px){.feats.c3{grid-template-columns:repeat(3,1fr)}.feats.c2{grid-template-columns:1fr 1fr}.feats.c4{grid-template-columns:repeat(4,1fr)}}
.feat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--sh);display:flex;gap:14px;align-items:flex-start}
.feat b{display:block;font-size:1rem;color:var(--ink);margin:2px 0 2px}
.feat p{margin:0;font-size:.9rem;color:var(--mut)}
@media(min-width:720px){.feats.stack .feat{flex-direction:column}}
.steps-h{counter-reset:st;list-style:none;margin:14px 0;padding:0;display:grid;gap:0}
.steps-h li{position:relative;display:flex;gap:14px;padding:0 0 18px}
.steps-h li:not(:last-child)::after{content:"";position:absolute;left:21px;top:46px;bottom:4px;width:2px;background:var(--line)}
.steps-h .ico{width:44px;height:44px;border-radius:50%;background:var(--card);border:1.5px solid var(--line2);color:var(--p2)}
.steps-h b{display:block;margin-top:2px}
.steps-h p{margin:2px 0 0;font-size:.9rem;color:var(--mut)}
.steps-h small{display:block;font-size:.7rem;font-weight:700;color:var(--p2);letter-spacing:.08em;text-transform:uppercase}
@media(min-width:860px){.steps-h{grid-template-columns:repeat(4,1fr);gap:16px}.steps-h.c3{grid-template-columns:repeat(3,1fr)}.steps-h.v{grid-template-columns:1fr;gap:0}.steps-h.v li{flex-direction:row;padding:0 0 18px}.steps-h.v li:not(:last-child)::after{left:21px;top:46px;bottom:4px;right:auto;width:2px;height:auto}.steps-h li{flex-direction:column;padding:0}.steps-h li:not(:last-child)::after{left:56px;right:-8px;top:21px;bottom:auto;width:auto;height:2px}}
.band{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a4757 0,#0f5a6e 50%,#12677e 100%);color:#e9f5f8;border-radius:20px;padding:24px 20px;margin:28px 0;box-shadow:var(--sh2)}
.band::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:28px solid rgba(255,255,255,.06)}
.band h2{color:#fff;margin:.1em 0 .35em;font-size:1.5rem}
.band p{color:#d6ecf1}
.band .eyebrow{color:#ffdccf}
.band ul{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}
.band li{display:flex;align-items:center;gap:10px;font-weight:600;color:#fff}
.band li .i{padding:6px;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.12)}
.band a:not(.btn){color:#fff}
@media(min-width:860px){.band{padding:36px 40px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}.band .btn{width:auto;display:inline-flex}}
.section{margin:32px 0}
/* Long-form (legal) */
.doc{display:grid;gap:20px}
@media(min-width:960px){.doc{grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start}.toc{position:sticky;top:80px}}
.toc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 8px;font-size:.875rem}
.toc b{display:block;padding:4px 10px 6px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:flex;align-items:center;min-height:44px;padding:4px 10px;border-radius:8px;text-decoration:none;color:var(--ink2);line-height:1.3}
.toc a:hover{background:var(--soft);color:var(--ink)}
.prose{max-width:68ch;font-size:1rem;line-height:1.7}
.prose h2{font-size:1.1875rem;margin:2em 0 .5em;padding-top:4px}
.prose ul,.prose ol{padding-left:1.25em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--p2)}
.doc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:.875rem;color:var(--mut);margin:0 0 8px}
/* Find WiFi */
.loc .loc-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.loc b{font-size:1.0625rem}
.loc .meta{display:flex;flex-direction:column;gap:4px;margin:10px 0 0;font-size:.875rem;color:var(--mut)}
.loc .meta span{display:flex;align-items:center;gap:8px}
.loc .meta .i{color:var(--p2)}
.loc .foot-r{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.loc .acts{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;flex:1 1 100%}
.loc .acts .btn{width:100%;margin:0}
@media(min-width:560px){.loc .acts{flex:0 0 auto;grid-auto-columns:auto}}
.loc .from{font-size:.875rem;color:var(--mut)}
.loc .from b{font-size:.9375rem;color:var(--ink)}
.search{position:relative;margin:12px 0}
.search .i{position:absolute;left:14px;top:50%;margin-top:-10px;color:var(--mut);pointer-events:none}
.search input{padding-left:44px}
#map{height:300px;border-radius:14px;border:1px solid var(--line);box-shadow:var(--sh);margin:12px 0}
@media(min-width:860px){.nearby{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:start}.nearby #map{position:sticky;top:80px;height:calc(100vh - 120px);max-height:640px;margin:0}}
/* Sticky mobile CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 18px -8px rgba(0,0,0,.2);transition:transform .2s}
.sticky-cta .btn{margin:0}
.sticky-cta.away{transform:translateY(110%)}
@media(min-width:860px){.sticky-cta{display:none}}
.has-cta{padding-bottom:76px}
@media(min-width:860px){.has-cta{padding-bottom:0}}
/* Footer */
.foot{margin-top:32px;background:var(--card);border-top:1px solid var(--line);color:var(--mut);font-size:.875rem}
.foot .in{max-width:1080px;margin:0 auto;padding:28px 16px 24px}
.foot-g{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px}
.foot-b,.foot-s{grid-column:1/-1}
@media(min-width:720px){.foot-g{grid-template-columns:1.5fr 1fr 1fr 1.3fr}.foot-b,.foot-s{grid-column:auto}}
.foot-b p{margin:10px 0 0;max-width:32ch}
.foot h2{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin:0 0 6px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink2);text-decoration:none}
.foot li a:hover{color:var(--p2);text-decoration:underline}
.foot li .i{color:var(--p2)}
.foot-l{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:.8125rem;display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:space-between}
.foot-l p{margin:0}
/* Misc */
.grid{display:grid;gap:12px}
@media(min-width:720px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:1fr 1fr 1fr}}
.pager{display:flex;justify-content:space-between;gap:12px;margin:8px 0}
.foot-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink2)}
.apply-g{display:grid;gap:20px;align-items:start}
@media(min-width:860px){.apply-g{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px}.apply-g aside{position:sticky;top:84px}}
/* Lists, notes, button rows, grouped forms (account and public pages) */
.list{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:12px 0;box-shadow:var(--sh);overflow:hidden}
.li{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:60px;color:inherit;text-decoration:none;border-top:1px solid var(--line)}
.li:first-child{border-top:0}
a.li:hover{background:var(--soft)}
.li .grow{flex:1;min-width:0}
.li .t{display:block;font-weight:600;color:var(--ink)}
.li .s{display:block;font-size:.8125rem;color:var(--mut);margin-top:1px}
.li .end{flex:none;text-align:right}
.li>.i:last-child{color:var(--mut)}
.btn.light{background:#fff;border-color:#fff;color:#0b4b5c}
.btn.light:hover{background:#eaf4f6;border-color:#eaf4f6}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.btns .btn{margin:0}
@media(min-width:560px){.btns .btn{width:auto;flex:0 0 auto}}
fieldset.grp{border:0;margin:0;padding:0}
fieldset.grp+fieldset.grp{margin-top:28px}
fieldset.grp legend{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;padding:0;margin:0}
.fgrid{display:grid;gap:0 14px}
@media(min-width:640px){.fgrid{grid-template-columns:1fr 1fr}.fgrid .full{grid-column:1/-1}}
.note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--infobg);border:1px solid var(--infoline);color:var(--ink);font-size:.9375rem;margin:16px 0}
.note .i{color:var(--info);margin-top:2px}
.note p{margin:0}
/* Home hosts (/nyumbani): tick lists, the example calculator, the caution note */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.9375rem}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks .i{color:var(--ok);margin-top:2px}
.note.warm{background:var(--hotbg);border-color:var(--hot)}
.note.warm .i{color:var(--hot)}
.fgrid.two-always{grid-template-columns:1fr 1fr;align-items:end}
@media(max-width:359px){.fgrid.two-always{grid-template-columns:1fr}}
.calc-res{margin:14px 0 8px;padding:12px 14px;border-radius:12px;background:var(--tint)}
.calc-out{font-size:2rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);margin:2px 0 0;line-height:1.15}
.near-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:4px 0 18px}
.near-bar p{margin:0;flex:1 1 220px}
@media(max-width:560px){.near-bar .btn{width:100%;justify-content:center}}