@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root{--ink:#071d2b;--muted:#61717c;--cream:#f5f2e9;--card:#fff;--lime:#b8ee37;--teal:#0b4552;--line:#dce2df}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif;min-height:100vh;overflow-x:hidden}img,svg{max-width:100%}
.shell{min-height:calc(100vh - 54px);display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);width:100%}
.hero{background:var(--ink);color:white;padding:54px clamp(32px,5vw,100px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;min-width:0}
.hero:after{content:"";position:absolute;width:460px;height:460px;border:1px solid #ffffff18;border-radius:50%;right:-260px;bottom:-120px;box-shadow:0 0 0 70px #ffffff08,0 0 0 140px #ffffff05}
.topbar{position:absolute;z-index:2;top:34px;left:clamp(32px,5vw,100px);right:clamp(32px,5vw,100px);display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.brand{display:flex;gap:9px;align-items:center;font-family:Manrope;font-size:20px;font-weight:800}.brand-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:white}.brand-name::first-letter{color:inherit}
.wifi-mark{width:27px;height:27px;display:grid;place-items:center;color:var(--lime);margin-left:-4px}.wifi-mark svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.wifi-mark circle{fill:currentColor;stroke:none}
.brand-mark{width:31px;height:31px;border:1px solid #ffffff42;border-radius:50%;display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:8px}.brand-mark i{display:block;width:3px;background:var(--lime);border-radius:3px}.brand-mark i:nth-child(1){height:6px}.brand-mark i:nth-child(2){height:10px}.brand-mark i:nth-child(3){height:14px}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700;color:#aebbc0;display:flex;align-items:center;gap:9px}.eyebrow span{width:20px;height:2px;background:var(--lime)}
.hero h1{font:800 clamp(36px,5vw,76px)/1.02 Manrope;margin:26px 0;max-width:100%;overflow-wrap:anywhere}.hero h1 em{color:var(--lime);font-style:normal}.hero>p{font-size:clamp(14px,1.25vw,17px);line-height:1.65;color:#b8c2c7;max-width:480px;overflow-wrap:anywhere}
.hero-bottom{margin-top:50px;display:flex;flex-direction:column;align-items:flex-start;gap:23px}.network-status{display:flex;align-items:center;gap:13px}.network-status div{display:flex;flex-direction:column}.network-status strong{font-size:12px;letter-spacing:.08em}.network-status small{color:#82929a;margin-top:3px}.pulse{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 7px #b8ee371a}
.support-contact{display:flex;align-items:center;gap:9px;color:white;text-decoration:none;padding:8px 11px 8px 8px;border:1px solid #ffffff25;background:#ffffff0b;border-radius:11px;transition:.2s;min-width:0;max-width:52%}.support-contact:hover{background:#ffffff14;border-color:#b8ee3766}.support-contact>span:last-child{display:flex;flex-direction:column;min-width:0}.support-contact small{color:#94a4aa;font-size:9px;text-transform:uppercase;letter-spacing:.08em;overflow:hidden;text-overflow:ellipsis}.support-contact strong{font:700 clamp(9px,1vw,11px) Manrope;margin-top:1px;overflow-wrap:anywhere}.support-icon{width:29px;height:29px;min-width:29px;border-radius:8px;display:grid;place-items:center;background:var(--lime);color:var(--ink);font-size:14px}
.checkout-panel{padding:clamp(50px,7vw,95px) clamp(35px,8vw,120px);display:flex;flex-direction:column;justify-content:center;max-width:960px;width:100%;min-width:0}
.panel-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}.panel-heading>div,.details-heading{display:flex;align-items:center;gap:13px;min-width:0}.panel-heading h2,.details-heading h2{font:700 clamp(19px,2vw,24px)/1.2 Manrope;margin:0;overflow-wrap:anywhere}.panel-heading p{font-size:13px;color:var(--muted);margin:0;text-align:right;max-width:220px;overflow-wrap:anywhere}.step{font:700 11px Manrope;color:#759000;background:#e6f5bc;border-radius:50%;width:29px;height:29px;min-width:29px;display:grid;place-items:center}
.plans{display:grid;gap:10px;min-width:0}.plan{position:relative;border:1px solid var(--line);border-radius:14px;background:#fafbf8;padding:19px 20px;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:15px;cursor:pointer;transition:.2s;min-width:0}.plan:hover{border-color:#9faf68;transform:translateY(-1px)}.plan:has(input:checked){border:2px solid var(--teal);background:#f9fbf5;padding:18px 19px;box-shadow:0 5px 18px #0736470c}.plan input{position:absolute;opacity:0}.plan-check{width:18px;height:18px;border:1.5px solid #acb8b7;border-radius:50%}.plan:has(input:checked) .plan-check{border:5px solid var(--teal)}.plan-copy{display:flex;flex-direction:column;min-width:0}.plan-copy strong{font:700 clamp(13px,1.5vw,15px)/1.25 Manrope;overflow-wrap:anywhere}.plan-copy small{font-size:clamp(10px,1.2vw,12px);line-height:1.35;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}.price{font:800 clamp(20px,2.2vw,25px) Manrope;white-space:nowrap}.price sup{font-size:11px;margin-right:3px}.popular{position:absolute;right:13px;top:-9px;background:var(--lime);color:#223400;font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;padding:4px 8px;border-radius:10px;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.details-heading{margin:30px 0 16px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.fields label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;min-width:0;overflow-wrap:anywhere}.fields label span{font-weight:400;color:#8b979b;text-transform:none}.fields input{display:block;margin-top:7px;width:100%;min-width:0;height:48px;border:1px solid var(--line);border-radius:10px;background:#fafbf8;padding:0 14px;font:14px "DM Sans";outline:none}.fields input:focus{border-color:var(--teal);box-shadow:0 0 0 3px #0b455211}.error{display:block;color:#b42318;margin-top:5px;text-transform:none}
.pay-button{border:0;text-decoration:none;margin-top:20px;min-height:52px;border-radius:10px;background:var(--teal);color:white;display:flex;align-items:center;justify-content:center;gap:15px;font:700 14px Manrope;cursor:pointer;width:100%;transition:.2s}.pay-button:hover{background:#083641;transform:translateY(-1px)}.pay-button b{font-size:20px;color:var(--lime)}.pay-button:disabled{opacity:.5}.security{text-align:center;color:#849094;font-size:11px}.security span{color:#799b11}.alert{padding:12px 14px;background:#fff1ef;border:1px solid #ffc9c2;color:#8f2016;border-radius:10px;font-size:13px;margin-bottom:15px}
footer{height:54px;padding:0 4vw;display:flex;justify-content:space-between;align-items:center;color:#869195;font-size:11px;border-top:1px solid #e2ded3}
.status-page{display:grid;place-items:center;padding:24px;background:var(--ink)}.status-card{max-width:520px;width:100%;background:white;border-radius:22px;padding:45px;text-align:center;box-shadow:0 30px 80px #0004}.status-icon{margin:auto;width:65px;height:65px;border-radius:50%;display:grid;place-items:center;background:#edf0eb;color:#778;font-size:30px}.status-icon.success{background:#e8f7bd;color:#527100}.status-card .eyebrow{justify-content:center;margin-top:25px;color:#718085}.status-card h1{font:800 36px Manrope;margin:12px}.status-card>p{color:var(--muted);line-height:1.6}.status-card dl{margin:28px 0;text-align:left;border-top:1px solid var(--line)}.status-card dl div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 0}.status-card dt{color:var(--muted)}.status-card dd{font-weight:700;margin:0}
.connected-card{overflow:hidden}.connected-brand{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:28px;font:800 19px Manrope}.connected-brand .brand-name{color:var(--ink);max-width:min(260px,70vw)}.connected-brand .wifi-mark{margin-left:0}.connected-network{display:flex;align-items:center;justify-content:center;gap:12px;margin:28px auto 0;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:#f9fbf5;max-width:320px}.connected-network>span:last-child{display:flex;flex-direction:column;text-align:left;min-width:0}.connected-network strong,.connected-network small{overflow-wrap:anywhere}.connected-network strong{font:700 13px Manrope}.connected-network small{color:var(--muted);margin-top:2px}.connected-support{display:block;margin-top:22px;color:var(--teal);font-size:13px;text-decoration:none;overflow-wrap:anywhere}.connected-support:hover{text-decoration:underline}
@media(max-width:1180px) and (min-width:851px){.shell{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.hero{padding-left:38px;padding-right:38px}.topbar{left:38px;right:38px}.checkout-panel{padding-left:38px;padding-right:38px}.hero h1{font-size:clamp(42px,4.5vw,54px)}.brand-mark{display:none}.support-icon{display:none}}
@media(max-width:850px){.shell{display:block;min-height:auto}.hero{min-height:min(570px,100svh);padding:112px 28px 55px}.topbar{top:25px;left:28px;right:28px}.hero h1{font-size:clamp(36px,10vw,52px)}.hero>p{font-size:15px}.hero-bottom{margin-top:30px}.checkout-panel{padding:45px clamp(20px,6vw,48px) 60px;margin:auto}.panel-heading{align-items:flex-start}.fields{grid-template-columns:1fr}footer{padding:12px 20px;height:auto;min-height:54px;gap:15px}.popular{right:9px}.status-card{padding:32px 22px}}
@media(max-width:560px){.hero{min-height:auto;padding:105px 20px 45px}.topbar{left:20px;right:20px;gap:8px}.brand-mark{display:none}.brand{gap:4px;font-size:16px;min-width:0}.brand-name{max-width:105px}.wifi-mark{width:22px;height:22px;min-width:22px}.wifi-mark svg{width:21px;height:21px}.support-contact{padding:7px;max-width:50%}.support-icon{display:none}.support-contact strong{font-size:9px}.hero h1{margin:20px 0}.checkout-panel{padding:38px 14px 50px}.panel-heading{margin-bottom:22px}.panel-heading p{display:none}.plan{grid-template-columns:18px minmax(0,1fr);padding:17px 14px;gap:11px}.plan:has(input:checked){padding:16px 13px}.price{grid-column:2;margin-top:6px;font-size:21px}.popular{right:8px;max-width:48%}.plan-copy small{max-width:none}.details-heading{margin-top:25px}.pay-button{padding:12px 14px;height:auto;min-height:52px;text-align:center}.security{line-height:1.45;padding:0 10px}footer{align-items:flex-start;flex-direction:column}.status-card h1{font-size:29px}.status-card dl div{gap:15px}.status-card dd{text-align:right;overflow-wrap:anywhere}}
@media(max-width:350px){.topbar{align-items:flex-start;flex-direction:column}.support-contact{max-width:100%}.hero{padding-top:145px}.hero h1{font-size:32px}.eyebrow{font-size:9px}.checkout-panel{padding-left:10px;padding-right:10px}.plan{border-radius:11px}.panel-heading h2,.details-heading h2{font-size:18px}}
