/* SURF NET homepage. Colours come from the CSS variables theme.php writes (Admin > Design). */
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:76px}
body.hm{margin:0;font:400 16px/1.6 "DM Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#18223a;background:var(--page-bg,#fff);-webkit-font-smoothing:antialiased}
.hm h1,.hm h2,.hm h3,.hm-brand b,.hm-price b{font-family:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;letter-spacing:-.02em}
.hm a{color:inherit}.hm-in{width:min(1160px,100% - 32px);margin:0 auto}
:focus-visible{outline:3px solid var(--h4);outline-offset:3px;border-radius:6px}

/* ticker + nav */
.hm-tick{background:var(--navy);color:#fff;text-align:center;font-size:13px;padding:7px 16px;overflow:hidden}
.hm-tick span{display:inline-block;transition:opacity .35s,transform .35s}.hm-tick span.out{opacity:0;transform:translateY(-6px)}
.hm-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.hm-nav.sc{border-color:#e6eaf3;box-shadow:0 6px 24px rgba(20,30,60,.06)}
.hm-nav .hm-in{display:flex;align-items:center;gap:20px;min-height:64px}
.hm-brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.hm-brand span:last-child{display:flex;flex-direction:column;line-height:1.1}.hm-brand b{font-size:18px}.hm-brand small{font-size:11px;color:#6b7690}
.hm-mark{width:40px;height:40px;border-radius:12px;display:grid!important;place-items:center;color:#fff;font:800 14px "Bricolage Grotesque",sans-serif;background:linear-gradient(135deg,var(--h1),var(--h2))}
.hm-nav nav{display:flex;gap:4px}.hm-nav nav a{padding:8px 12px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:500;color:#3a4560}.hm-nav nav a:hover{background:#eef2fb}
.hm-cta,.hm-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font:700 15px "DM Sans",sans-serif;transition:transform .15s,box-shadow .2s,background .2s}
.hm-cta{background:var(--h1);color:#fff;padding:10px 18px}.hm-btn{background:#fff;color:var(--navy)}
.hm-btn:hover,.hm-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.2)}
.hm-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

/* hero */
.hm-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;background:linear-gradient(150deg,var(--navy),var(--navy-2));padding:56px 0 72px}
.hm-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);opacity:.5;animation:hmDrift 16s ease-in-out infinite alternate}
.o1{width:420px;height:420px;background:var(--h1);left:-120px;top:-100px}.o2{width:380px;height:380px;background:var(--h3);right:-100px;bottom:-140px;animation-delay:-6s}
.hm-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hm-greet{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.12);font-size:14px}
.hm-greet em{font-style:normal;opacity:.75}.hm-live{width:9px;height:9px;border-radius:50%;background:#34d399;animation:hmPulse 1.8s infinite}
.hm-hero h1{margin:0;font-size:clamp(34px,6vw,60px);line-height:1.05;font-weight:800;max-width:15ch}
.hm-lead{font-size:clamp(16px,2.2vw,19px);max-width:46ch;margin:18px 0 26px;color:rgba(255,255,255,.86)}
.hm-actions{display:flex;flex-wrap:wrap;gap:12px}
.hm-stats{display:flex;flex-wrap:wrap;gap:12px 36px;margin:34px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.hm-stats dt{font-size:13px;opacity:.75}.hm-stats dd{margin:0;font:800 24px "Bricolage Grotesque",sans-serif}
.hm-stage{position:relative;display:grid;place-items:center;min-height:460px}
.hm-rings{position:absolute;right:8%;top:50%;width:0;height:0;z-index:-1}
.hm-rings i{position:absolute;width:520px;height:520px;margin:-260px;border-radius:50%;border:2px solid rgba(255,255,255,.35);animation:hmRing 6s ease-out infinite;opacity:0}
.hm-rings i:nth-child(2){animation-delay:2s}.hm-rings i:nth-child(3){animation-delay:4s}
.hm-phone{position:relative;width:250px;height:480px;border-radius:38px;background:#f4f6fb;border:9px solid #0a1122;box-shadow:0 40px 80px rgba(0,0,0,.45);overflow:hidden;color:#18223a;transform:rotate(3deg)}
.hm-scr{position:absolute;inset:0;padding:42px 18px 18px;display:flex;flex-direction:column;gap:12px;opacity:0;animation:hmScr 12s infinite both}
.hm-scr.s2{animation-delay:4s;background:#e9edf5}.hm-scr.s3{animation-delay:8s;align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,var(--h1),var(--h2));color:#fff}
.hm-scr p{margin:0;font-weight:700}.hm-pick{display:flex;justify-content:space-between;padding:14px;border-radius:14px;background:#fff;border:2px solid #16a34a;box-shadow:0 6px 16px rgba(20,30,60,.08)}
.hm-pick.dim{border-color:#e1e6f0;color:#6b7690}.hm-pbtn{margin-top:auto;text-align:center;padding:13px;border-radius:14px;background:#16a34a;color:#fff;font-weight:700}
.hm-sheet{margin-top:auto;margin-bottom:30px;padding:18px;border-radius:20px;background:#fff;text-align:center;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 30px rgba(20,30,60,.15)}
.hm-sheet small{color:#6b7690}.hm-pin{display:flex;justify-content:center;gap:12px;margin-top:10px}
.hm-pin i{width:14px;height:14px;border-radius:50%;background:#d3d9e6;animation:hmDot 12s infinite both}
.hm-pin i:nth-child(2){animation-delay:.35s}.hm-pin i:nth-child(3){animation-delay:.7s}.hm-pin i:nth-child(4){animation-delay:1.05s}
.hm-scr.s3 svg{width:92px;animation:hmPop 12s 8s infinite both}.hm-scr.s3 b{font:800 24px "Bricolage Grotesque",sans-serif}.hm-scr.s3 small{opacity:.85}

/* sections */
.hm-sec{padding:72px 0}.hm-sec.alt{background:#f4f6fb}
.hm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.hm-head h2{margin:0;font-size:clamp(26px,4vw,38px);line-height:1.1}.hm-head p{margin:8px 0 0;color:#5a6580}
.hm-count{padding:6px 14px;border-radius:999px;background:#eef2fb;font-size:14px;font-weight:700;color:#3a4560}
.hm-tabs{display:flex;gap:8px;overflow-x:auto;padding:0 0 18px;scrollbar-width:none}.hm-tabs::-webkit-scrollbar{display:none}
.hm-tabs button{flex:none;padding:9px 18px;border-radius:999px;border:1px solid var(--tab-border,#e5e7eb);background:var(--tab-bar,#fff);color:var(--tab-t,#4b5563);font:600 14px "DM Sans",sans-serif;cursor:pointer;transition:background .2s,color .2s}
.hm-tabs button.on{background:var(--tab-on,var(--h1));color:var(--tab-on-t,#fff);border-color:transparent}
.hm-grid{display:grid;grid-template-columns:repeat(var(--cols-p,2),1fr);gap:14px}
.hm-card{position:relative;display:flex;flex-direction:column;padding:20px 18px 18px;background:#fff;border:1px solid #e6eaf3;border-top:5px solid var(--a);border-radius:var(--c-radius,18px);box-shadow:0 8px 24px rgba(20,30,60,.06);transition:transform .2s,box-shadow .2s;opacity:0;transform:translateY(14px)}
.hm-card.in{opacity:1;transform:none;transition:opacity .5s calc(var(--i)*40ms),transform .5s calc(var(--i)*40ms),box-shadow .2s}
.hm-card.in:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(20,30,60,.13)}
.hm-card.feat{border-color:var(--a);box-shadow:0 14px 34px color-mix(in srgb,var(--a) 28%,transparent)}
.hm-card[hidden]{display:none}.hm-card h3{margin:0;font-size:17px;color:#3a4560}
.hm-badge{position:absolute;top:-1px;right:14px;padding:4px 10px;border-radius:0 0 10px 10px;background:var(--a);color:#fff;font-size:12px;font-weight:700}
.hm-price{display:flex;align-items:baseline;gap:5px;margin:10px 0 0;color:color-mix(in srgb,var(--a) 70%,#000)}.hm-price small{font-weight:700}.hm-price b{font-size:44px;line-height:1}
.hm-was{font-size:13px;color:#8a93a8;text-decoration:line-through}
.hm-card ul{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:7px;font-size:14px;color:#4b5570}
.hm-card li{display:flex;gap:8px}.hm-card li:before{content:"";flex:none;width:7px;height:7px;margin-top:8px;border-radius:50%;background:var(--a)}
.hm-buy{margin-top:auto;text-align:center;padding:12px 10px;border-radius:12px;background:var(--a);color:#fff;font-weight:700;font-size:14px;text-decoration:none;transition:filter .2s}.hm-buy:hover{filter:brightness(1.1)}
.hm-empty{padding:40px;text-align:center;border:2px dashed #d5dbea;border-radius:18px}

.hm-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(3,1fr);counter-reset:s}
.hm-steps li{padding:24px;background:#fff;border-radius:18px;border:1px solid #e6eaf3}
.hm-steps span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--h1);color:#fff;font-weight:800}
.hm-steps h3{margin:14px 0 6px;font-size:19px}.hm-steps p{margin:0;color:#5a6580}
.hm-faq{max-width:780px}.hm-faq details{border-bottom:1px solid #e6eaf3;padding:16px 0}
.hm-faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}.hm-faq summary::after{content:"+";font-size:22px;line-height:1;transition:transform .2s}
.hm-faq details[open] summary::after{transform:rotate(45deg)}.hm-faq p{margin:10px 0 0;color:#5a6580}
.hm-help{background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff;padding:52px 0}
.hm-help .hm-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}.hm-help h2{margin:0 0 6px;font-size:clamp(24px,3.6vw,34px)}.hm-help p{margin:0;opacity:.85}
.hm-foot{padding:24px 0 28px;font-size:14px;color:#5a6580}.hm-foot .hm-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}.hm-foot a{margin-left:16px;text-decoration:none}.hm-foot a:hover{text-decoration:underline}
.has-bar .hm-foot{padding-bottom:84px}

.hm-fab{position:fixed;right:18px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:55;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--fab,#6366f1);color:var(--fab-i,#fff);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.hm-fab svg{width:25px;height:25px}.has-bar .hm-fab{bottom:calc(78px + env(safe-area-inset-bottom))}
.hm-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding-bottom:env(safe-area-inset-bottom);background:#fff;box-shadow:0 -10px 34px rgba(8,16,32,.2)}
.hm-bar-t{display:block;width:100%;border:0;padding:15px 18px;cursor:pointer;color:#fff;font:500 14px "DM Sans",sans-serif;background:linear-gradient(90deg,var(--h1),var(--h2),var(--h3),var(--h4),var(--h1));background-size:300% 100%;animation:hmFlow var(--h-speed,14s) ease-in-out infinite}
.hm-bar-p{display:none;gap:12px;padding:16px;max-width:560px;margin:0 auto}.hm-bar.open .hm-bar-p{display:grid}
.hm-bar-p label{display:grid;gap:4px;font-size:13px;font-weight:700}.hm-bar-p input{padding:12px;border:1px solid #cfd6e6;border-radius:10px;font:500 16px "DM Sans",sans-serif;text-transform:none}
.hm-bar-p .hm-btn{background:var(--h1);color:#fff}.hm-msg{margin:0;font-size:14px;min-height:1.2em}.hm-msg.ok{color:#15803d}.hm-msg.err{color:#b91c1c}

/* payment modal (checkout opens in a sheet) */
.hm-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(8,16,32,.62);backdrop-filter:blur(3px)}
.hm-sheetbox{position:relative;width:100%;max-width:440px;max-height:92vh;overflow:auto;background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:hmUp .3s cubic-bezier(.2,.8,.2,1)}
.hm-sheetbox iframe{display:block;width:100%;border:0;min-height:320px}.hm-x{position:absolute;right:10px;top:8px;z-index:2;width:34px;height:34px;border:0;border-radius:50%;background:rgba(0,0,0,.08);font-size:22px;cursor:pointer}
body.pay-open{overflow:hidden}

@keyframes hmDrift{to{transform:translate(60px,40px) scale(1.15)}}
@keyframes hmRing{0%{transform:scale(.25);opacity:.7}100%{transform:scale(1.3);opacity:0}}
@keyframes hmPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.7)}100%{box-shadow:0 0 0 10px rgba(52,211,153,0)}}
@keyframes hmScr{0%{opacity:0}3%,30%{opacity:1}34%,100%{opacity:0}}
@keyframes hmDot{0%,35%{background:#d3d9e6}40%,100%{background:#18223a}}
@keyframes hmPop{0%,3%{transform:scale(.6)}8%,100%{transform:scale(1)}}
@keyframes hmFlow{50%{background-position:100% 0}}
@keyframes hmUp{from{transform:translateY(24px);opacity:0}}

@media(min-width:700px){.hm-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.hm-grid{grid-template-columns:repeat(var(--cols-d,4),1fr)}}
@media(max-width:900px){.hm-hero-grid{grid-template-columns:1fr}.hm-stage{min-height:420px}.hm-nav nav{display:none}.hm-steps{grid-template-columns:1fr}}
@media(max-width:560px){.hm-hero{padding:36px 0 48px}.hm-sec{padding:52px 0}.hm-modal{align-items:flex-end;padding:0}.hm-sheetbox{max-width:none;border-radius:22px 22px 0 0}.hm-price b{font-size:36px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}.hm-card{opacity:1;transform:none}.hm-scr.s1{opacity:1}}

/* Sizing pass: compact hero on tablet and phone, smaller 2-per-row package cards on phones. Colours and design unchanged. */
@media(max-width:1100px){.hm-hero{padding:44px 0 56px}.hm-phone{transform:rotate(3deg) scale(.88);margin:-29px -15px}}
@media(min-width:701px) and (max-width:900px){.hm-hero-grid{grid-template-columns:1.2fr .8fr;gap:20px}.hm-stage{min-height:0}.hm-phone{transform:rotate(3deg) scale(.78);margin:-53px -28px}.hm-rings i{width:380px;height:380px;margin:-190px}}
@media(max-width:700px){.hm-hero-grid{grid-template-columns:1fr}.hm-stage,.hm-rings{display:none}}
@media(max-width:560px){
.hm-tick{font-size:12px;padding:5px 12px}
.hm-nav .hm-in{min-height:54px}.hm-mark{width:34px;height:34px}.hm-brand b{font-size:16px}.hm-cta{padding:8px 14px;font-size:14px}
.hm-hero{padding:18px 0 22px}.hm-greet{margin:0 0 10px;padding:4px 12px;font-size:13px}
.hm-hero h1{font-size:27px;max-width:none}.hm-lead{font-size:14px;margin:10px 0 14px}
.hm-actions{gap:8px}.hm-actions .hm-btn{padding:10px 14px;font-size:14px;flex:1}
.hm-stats{margin-top:16px;padding-top:12px;gap:6px 20px}.hm-stats dd{font-size:18px}.hm-stats dt{font-size:12px}
.hm-sec{padding:28px 0}.hm-head{margin-bottom:14px}.hm-head h2{font-size:24px}.hm-head p{margin-top:4px;font-size:14px}.hm-count{display:none}
.hm-tabs{padding-bottom:12px}.hm-tabs button{padding:8px 14px;font-size:13px}
.hm-grid{gap:10px}
.hm-card{padding:16px 10px 12px;text-align:center;align-items:center}
.hm-card h3{font-size:13px;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--a) 65%,#000);color:#fff;font-weight:700}
.hm-price{justify-content:center;margin-top:8px}.hm-price b{font-size:34px}
.hm-card ul{margin:6px 0 12px}.hm-card li:not(:first-child){display:none}.hm-card li:before{display:none}.hm-card li{font-size:13px;justify-content:center}
.hm-buy{width:100%;padding:10px 6px;font-size:12.5px}
.hm-badge{right:8px;font-size:11px;padding:3px 8px}
.hm-steps li{padding:16px}.hm-help{padding:32px 0}.hm-faq details{padding:12px 0}
}

/* Phones: extra-compact package cards (name, price, duration, button only) */
@media(max-width:560px){
.hm-grid{gap:8px}
.hm-card{padding:10px 8px 8px;border-top-width:3px;border-radius:14px;box-shadow:0 3px 10px rgba(20,30,60,.07);gap:0}
.hm-card h3{font-size:11.5px;padding:4px 10px;line-height:1.2}
.hm-price{margin-top:5px;gap:3px}.hm-price small{font-size:12px}.hm-price b{font-size:26px}
.hm-was{font-size:11px;line-height:1.2}
.hm-card ul{margin:2px 0 8px}.hm-card li{font-size:12px;line-height:1.3}
.hm-buy{padding:8px 4px;font-size:11.5px;border-radius:9px}
.hm-badge{right:6px;font-size:10px;padding:2px 6px;border-radius:0 0 7px 7px}
.hm-card.feat{box-shadow:0 6px 16px color-mix(in srgb,var(--a) 25%,transparent)}
}

/* Phones: package card matches the approved design (light top, navy name pill, ksh price, coloured button area) */
@media(max-width:560px){
.hm-card{padding:0;border:0;overflow:hidden;gap:0;align-items:stretch;background:linear-gradient(160deg,color-mix(in srgb,var(--a) 8%,#fff),color-mix(in srgb,var(--a) 30%,#fff));box-shadow:0 4px 12px rgba(20,30,60,.1)}
.hm-card.feat{box-shadow:0 4px 12px rgba(20,30,60,.1)}
.hm-card h3{align-self:center;margin:12px 8px 0;font-size:11px;letter-spacing:.2px;text-transform:uppercase;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-price{margin-top:6px;color:color-mix(in srgb,var(--a) 65%,#000)}.hm-price small{text-transform:lowercase;font-size:14px;color:var(--a)}.hm-price b{font-size:30px}
.hm-card ul{margin:0 0 10px;padding:0 6px}.hm-card li{font-size:12px;color:color-mix(in srgb,var(--a) 85%,#000)}
.hm-bot{margin-top:auto;padding:9px 8px;background:var(--a)}
.hm-buy{display:block;width:100%;background:color-mix(in srgb,var(--a) 7%,#fff);color:color-mix(in srgb,var(--a) 55%,#000);box-shadow:0 3px 8px rgba(0,0,0,.18);padding:8px 2px;font-size:11px;border-radius:9px;white-space:nowrap}
.hm-badge{top:6px;right:6px;border-radius:6px}
}

/* Package cards: whole card is the link, smaller size, colour-shifting + floating animation */
.hm-card{overflow:hidden;cursor:pointer;padding:14px 14px 14px;transition:transform .2s,box-shadow .2s}
.hm-card.in{transition:opacity .5s calc(var(--i)*40ms),transform .2s,box-shadow .2s}
.hm-card h3{font-size:15px}.hm-price{margin-top:6px}.hm-price b{font-size:36px}
.hm-card ul{margin:10px 0 12px;gap:4px;font-size:13px}.hm-card li:before{margin-top:7px}
.hm-buy{padding:10px 8px;font-size:13px}
.hm-buy::after{content:"";position:absolute;inset:0;z-index:2}
.hm-card:focus-within{outline:3px solid var(--a);outline-offset:2px}
.hm-card:active{transform:scale(.97)}
@media(max-width:560px){
.hm-card{padding:0}
.hm-card h3{font-size:10.5px;margin:10px 8px 0}
.hm-price{margin-top:4px}.hm-price b{font-size:27px}
.hm-card ul{margin:0 0 8px}.hm-card li{font-size:11.5px}
.hm-bot{padding:7px}.hm-buy{padding:7px 2px;font-size:10.5px}
}

/* Package cards on every device: only name pill, ksh price, duration and connect button (approved card design) */
.hm-card{padding:0;border:0;gap:0;align-items:stretch;text-align:center;overflow:hidden;border-radius:var(--c-radius,18px);background:linear-gradient(160deg,color-mix(in srgb,var(--a) 8%,#fff),color-mix(in srgb,var(--a) 30%,#fff));box-shadow:0 6px 18px rgba(20,30,60,.1)}
.hm-card.feat{box-shadow:0 6px 18px rgba(20,30,60,.1)}
.hm-card h3{align-self:center;margin:16px 12px 0;padding:7px 16px;max-width:calc(100% - 24px);border-radius:999px;background:color-mix(in srgb,var(--a) 65%,#000);color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-price{justify-content:center;margin-top:10px;color:color-mix(in srgb,var(--a) 65%,#000)}.hm-price small{font-size:18px;text-transform:lowercase;color:var(--a)}.hm-price b{font-size:44px}
.hm-card ul{margin:0 0 16px;padding:0 10px}.hm-card li:not(:first-child){display:none}.hm-card li:before{display:none}.hm-card li{justify-content:center;font-size:16px;color:color-mix(in srgb,var(--a) 85%,#000)}
.hm-bot{margin-top:auto;padding:14px;background:var(--a)}
.hm-buy{display:block;width:100%;padding:11px 6px;font-size:14px;border-radius:12px;white-space:nowrap;background:color-mix(in srgb,var(--a) 7%,#fff);color:color-mix(in srgb,var(--a) 55%,#000);box-shadow:0 4px 10px rgba(0,0,0,.18)}
.hm-badge{top:8px;right:8px;border-radius:6px}
@media(max-width:560px){
.hm-card h3{margin:10px 8px 0;padding:4px 10px;font-size:10.5px;max-width:calc(100% - 16px)}
.hm-price{margin-top:4px}.hm-price small{font-size:13px}.hm-price b{font-size:27px}
.hm-card ul{margin:0 0 8px;padding:0 6px}.hm-card li{font-size:11.5px}
.hm-bot{padding:7px}.hm-buy{padding:8px 2px;font-size:10.5px;border-radius:9px}
.hm-badge{top:6px;right:6px}
}

/* ---- Connected settings, mobile menu and responsive polish ---- */
.hm-skip{position:absolute;left:-999px;top:8px}.hm-skip:focus{left:8px;z-index:200;background:#fff;padding:8px 14px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
/* Admin > Design: when auto card colours are off, cards use the single colour set */
.hm-card.th{background:linear-gradient(160deg,var(--c-light),var(--c-deep))}
.hm-card.th h3{background:var(--pill);color:var(--pill-t,#fff)}
.hm-card.th .hm-price{color:var(--price)}.hm-card.th .hm-price small{color:var(--cur)}
.hm-card.th li{color:var(--sub)}.hm-card.th .hm-bot{background:var(--bottom)}.hm-card.th .hm-buy{background:var(--btn);color:var(--btn-t)}
/* Header text colour and colour shifting now drive the hero */
.hm-hero{color:var(--h-text,#fff)}.hm-lead{color:inherit;opacity:.88}.hm-hero .hm-btn.ghost{color:inherit;border-color:currentColor}
/* Menu button */
.hm-burger{display:none;width:42px;height:42px;padding:0;border:0;border-radius:12px;background:#eef2fb;cursor:pointer}
.hm-burger i{display:block;width:18px;height:2px;margin:4px auto;background:#18223a;border-radius:2px;transition:transform .2s,opacity .2s}
.hm-nav.open .hm-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}.hm-nav.open .hm-burger i:nth-child(2){opacity:0}.hm-nav.open .hm-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hm-brand span:last-child{min-width:0}.hm-brand b,.hm-brand small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hm-cta{white-space:nowrap}.hm-tabs button{min-height:40px}
.hm-bar.open{max-height:92vh;overflow:auto}.hm-bar-p{width:100%}
@media(max-width:900px){
.hm-burger{display:block}.hm-nav .hm-brand{margin-right:auto}
.hm-nav nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:2px;padding:8px 16px 14px;background:#fff;border-bottom:1px solid #e6eaf3;box-shadow:0 18px 30px rgba(20,30,60,.12)}
.hm-nav.open nav{display:flex}.hm-nav nav a{padding:13px 14px;font-size:16px;border-radius:12px}
}
@media(min-width:700px){.hm-bar-p{max-width:880px;grid-template-columns:1fr 1fr auto;align-items:end}.hm-bar-p .hm-msg{grid-column:1/-1}}
@media(min-width:1400px){.hm-in{width:min(1280px,100% - 64px)}.hm-hero{padding:76px 0 92px}.hm-hero h1{font-size:64px}.hm-sec{padding:88px 0}}
@media(max-width:400px){.hm-in{width:calc(100% - 24px)}.hm-cta,.hm-brand small{display:none}.hm-hero h1{font-size:24px}.hm-stats{gap:6px 14px}.hm-grid{gap:8px}.hm-card h3{font-size:9.5px}.hm-price b{font-size:24px}.hm-buy{font-size:10px}}
@media(max-height:480px) and (orientation:landscape){.hm-hero{padding:24px 0 28px}.hm-sec{padding:36px 0}.hm-fab{width:44px;height:44px}.hm-nav .hm-in{min-height:52px}}
@media(hover:none){.hm-card.in:hover{transform:none;box-shadow:0 6px 18px rgba(20,30,60,.1)}.hm-btn:hover,.hm-cta:hover{transform:none;box-shadow:none}}

.hm-buy,.hm-bot{display:block}

/* "All" tab: same colour as the package name pills */
.hm-tabs button[data-f="all"].on{background:var(--pill,#1e3a9e);color:var(--pill-t,#fff)}
/* White hero button ("See packages"): make its text visible, matching the package colour */
.hm-hero .hm-btn:not(.ghost){background:#fff;color:var(--pill,#1e3a9e)}
/* Footer "Call" button: make its text visible on the white button */
.hm-help .hm-btn:not(.ghost){background:#fff;color:var(--pill,#1e3a9e)}

/* Special offers strip */
.hm-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.hm-offer{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:16px;background:linear-gradient(160deg,var(--pill,#1e3a9e),color-mix(in srgb,var(--pill,#1e3a9e) 70%,#000));color:var(--pill-t,#fff);box-shadow:0 8px 24px rgba(20,30,60,.12)}
.hm-offer b{font-size:16px}.hm-offer span{opacity:.85;font-size:14px}.hm-offer strong{font-size:30px;line-height:1.1;margin-top:4px}.hm-offer s{opacity:.7;font-size:13px}.hm-offer small{opacity:.8;font-size:12px;margin-bottom:8px}
.hm-offer .hm-buy{background:#fff;color:var(--pill,#1e3a9e);margin-top:auto;display:block}

/* ---- Package spacing: more room between and inside the cards ---- */
.hm-grid{gap:22px}
.hm-tabs{padding-bottom:22px;gap:10px}
.hm-card h3{margin-top:20px;margin-bottom:2px}
.hm-price{margin-top:14px}
.hm-was{margin:4px 0 0}
.hm-card ul{margin:8px 0 20px;gap:8px}
.hm-bot{padding:18px}
@media(min-width:1000px){.hm-grid{gap:28px}}
@media(max-width:560px){
.hm-grid{gap:14px}
.hm-tabs{padding-bottom:16px;gap:8px}
.hm-card h3{margin:14px 8px 0;padding:5px 10px}
.hm-price{margin-top:10px}
.hm-card ul{margin:4px 0 14px}
.hm-bot{padding:10px}
.hm-buy{padding:10px 4px}
}

/* ---- Badge: top-right corner, in a reserved strip so it never covers the package name ---- */
.hm-card .hm-badge{position:absolute!important;top:8px!important;right:8px!important;left:auto!important;margin:0!important;box-sizing:border-box;display:block;height:20px;max-width:calc(100% - 16px);padding:0 10px!important;border-radius:999px!important;font-size:10px!important;line-height:20px;letter-spacing:.2px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2}
/* When any package has a badge, every card reserves the same strip so all names line up. */
.hm-grid:has(.hm-card:not([hidden]) .hm-badge) .hm-card::before{content:"";order:-1;flex:none;height:28px}

/* ---- Animated "Connect another device" card: the 4th card in the steps grid, same size as the others ---- */
.hm-steps li.hm-dev-li{padding:0;border:0;background:none;border-radius:18px}
.hm-dev{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:8px;box-sizing:border-box;height:100%;min-height:100%;padding:24px;border-radius:18px;text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--h1,#2563eb),color-mix(in srgb,var(--h1,#2563eb) 65%,#000));box-shadow:0 12px 30px color-mix(in srgb,var(--h1,#2563eb) 35%,transparent);animation:hmDevIn .7s cubic-bezier(.2,.8,.2,1) both,hmDevFloat 4s ease-in-out .7s infinite;transition:box-shadow .2s}
.hm-dev:hover{box-shadow:0 18px 40px color-mix(in srgb,var(--h1,#2563eb) 45%,transparent)}
.hm-dev:focus-visible{outline:3px solid var(--h1,#2563eb);outline-offset:3px}
.hm-dev:before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);animation:hmDevShine 3.6s ease-in-out 1s infinite;pointer-events:none}
.hm-dev-ic{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--h1,#2563eb)}
.hm-dev-ic svg{width:22px;height:22px}
.hm-dev-ic:after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.85);animation:hmDevPulse 2.2s ease-out infinite}
.hm-dev-tx{position:relative;display:grid;gap:6px;margin-top:6px}
.hm-dev-tx b{font-size:19px;line-height:1.25;color:#fff}.hm-dev-tx small{font-size:15px;line-height:1.45;color:#fff;opacity:.95}
.hm-dev-go{position:relative;margin-top:auto;padding:10px 16px;border-radius:999px;background:#fff;color:var(--h1,#2563eb);font-weight:700;font-size:14px}
.hm-dev-tx{margin-bottom:10px}
.hm-dev-go i{display:inline-block;font-style:normal;animation:hmDevNudge 1.4s ease-in-out infinite}
@keyframes hmDevIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes hmDevFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes hmDevShine{0%{left:-60%}55%,100%{left:130%}}
@keyframes hmDevPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes hmDevNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.hm-dev,.hm-dev:before,.hm-dev-ic:after,.hm-dev-go i{animation:none!important}}
/* The steps grid styles every <span> as a numbered circle; reset that for the device card */
.hm-steps .hm-dev .hm-dev-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--h1,#2563eb);font-weight:400}
.hm-steps .hm-dev .hm-dev-tx{display:grid;place-items:stretch;width:auto;height:auto;border-radius:0;background:none;color:#fff;font-weight:400;gap:6px;margin:6px 0 10px;text-align:left}
.hm-steps .hm-dev .hm-dev-go{display:inline-block;place-items:normal;width:auto;height:auto;margin-top:auto;border-radius:999px;background:#fff;color:var(--h1,#2563eb);font-weight:700;text-align:center}
.hm-steps .hm-dev b,.hm-steps .hm-dev small{display:block}
@media(max-width:900px){.hm-steps .hm-dev .hm-dev-go{display:block;width:100%;box-sizing:border-box}}
/* Tighter device card so it matches the other step cards; all cards share one row height */
.hm-steps{grid-auto-rows:1fr}
.hm-dev{padding:20px 24px;gap:4px}
.hm-steps .hm-dev .hm-dev-ic{width:34px;height:34px}.hm-dev-ic svg{width:19px;height:19px}
.hm-steps .hm-dev .hm-dev-tx{margin:4px 0 8px;gap:4px}
.hm-dev-tx b{font-size:17px}.hm-dev-tx small{font-size:14px;line-height:1.4}
.hm-steps .hm-dev .hm-dev-go{padding:8px 14px;font-size:13px}

/* ---- Fix: "Buy a plan" nav button must always be visible (it was hidden on phones <=400px) ---- */
.hm-nav .hm-cta{display:inline-flex!important;visibility:visible!important;opacity:1!important;color:#fff!important;background-color:#2563eb;background-image:linear-gradient(var(--h1,#2563eb),var(--h1,#2563eb));flex:none;white-space:nowrap}
@media(max-width:400px){.hm-nav .hm-in{gap:10px}.hm-nav .hm-cta{padding:7px 12px;font-size:13px}}