/* NextServe pages (/nextserve, /nextserve/fit|glow|care). Mobile-first; dark navy theme from internal-theme.css, light sections for the brand wordmarks. */
:root{--ns-fit:#F25C1F;--ns-glow:#E0287A;--ns-care:#0FA38A;--ns-ink:#111}

/* wordmark: lowercase Montserrat 800, "x" and the brand word in the accent colour (logo SVGs replace this later) */
.wm{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-.045em;line-height:1;color:#111;display:inline-block;font-size:34px}
.wm .a{color:var(--c)}
.wm.sm{font-size:15px;color:#fff;position:relative;z-index:2}
.wm.sm .a{color:#fff}
.wm.md{font-size:30px}
.wm.lg{font-size:clamp(40px,11vw,54px)}
.wm.xl{font-size:clamp(54px,16vw,120px);color:#fff}
.wm.tab{font-size:19px;color:inherit}

/* hero */
.ns-hero{position:relative;overflow:hidden;padding:108px 20px 56px;background:radial-gradient(circle at 80% 8%,rgba(47,92,255,.2),transparent 34%),linear-gradient(160deg,#081018 0%,#070b10 60%,#0b1119 100%);border-bottom:1px solid #26303a;color:#f4f5f7}
.ns-hero.brand{background:radial-gradient(circle at 82% 6%,color-mix(in srgb,var(--c) 34%,transparent),transparent 38%),linear-gradient(160deg,#081018 0%,#070b10 60%,#0b1119 100%)}
.ns-eyebrow{display:inline-block;padding:7px 14px;border:1px solid #33404d;border-radius:999px;font:600 12px 'IBM Plex Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9fb4ff;margin-bottom:22px}
.ns-hero h1{font-size:clamp(46px,11.5vw,112px);line-height:.92;margin:0 0 22px;max-width:1040px;position:relative;z-index:1}
.ns-hero h1 mark{color:#8fa2ff}
.ns-hero.brand h1 mark{color:var(--c)}
.bigwm{margin:0 0 18px}
.ns-sub{max-width:660px;font-size:17px;line-height:1.6;color:#aeb7c1;margin:0;position:relative;z-index:1}
.ns-hero .pr-actions{margin-top:28px}
.ns-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0;padding:0;font-size:13px;color:#9aa6b2;position:relative;z-index:1}
.ns-trust span:before{content:'✓';color:#34d399;margin-right:8px;font-weight:700}

/* phone mockups (placeholders until real screenshots are added) */
.ns-phones{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:680px;margin:44px auto 0;align-items:end}
.ns-phone{position:relative;aspect-ratio:9/18.5;border-radius:20px;border:2px solid rgba(255,255,255,.16);background:linear-gradient(165deg,var(--c) 0%,color-mix(in srgb,var(--c) 28%,#0b1118) 46%,#0b1118 100%);padding:14px 9px 9px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:7px}
.ns-phone:nth-child(2){transform:translateY(-16px);aspect-ratio:9/19.5}
.ns-phone .n{position:absolute;top:5px;left:50%;width:30%;height:5px;margin-left:-15%;border-radius:4px;background:rgba(0,0,0,.45)}
.ns-phone .sk{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.28)}
.ns-phone .w70{width:70%}.ns-phone .w60{width:60%}.ns-phone .w50{width:50%}.ns-phone .w40{width:40%}
.ns-phone .blk{height:16%;border-radius:9px;background:rgba(255,255,255,.14)}
.ns-phone .blk.h{height:24%;background:rgba(255,255,255,.1)}

/* sections */
.ns-sec{position:relative;padding:72px 20px;background:#090e14;border-bottom:1px solid #222d37;color:#f4f5f7}
.ns-sec.alt{background:#0b1118}
.ns-sec .label{display:block;color:#4d7dff;margin-bottom:14px}
.ns-sec h2{font-size:clamp(40px,8.2vw,78px);line-height:.92;margin:0 0 22px;max-width:980px}
.ns-sec h2 mark{color:#8f9cab}
.ns-sec .pr-intro{margin-bottom:34px}
.ns-light{background:#f4f3ef;color:#111;border-bottom:1px solid #d9d6cd}
.ns-light .label{color:#5f6b75}
.ns-light h2{color:#111}
.ns-light h2 mark{color:#6b7580}
.ns-light .pr-intro{color:#4a535b}
.ns-foot{margin:28px 0 0;color:#8f9cab;font-size:14px;line-height:1.6;max-width:760px}

/* brand cards */
.ns-cards{display:grid;grid-template-columns:1fr;gap:18px}
.ns-card{background:#fff;border:1px solid #e1ded6;border-top:6px solid var(--c);border-radius:20px;padding:26px 24px 28px;display:flex;flex-direction:column;box-shadow:0 14px 40px rgba(17,17,17,.06)}
.ns-card .for{margin:12px 0 0;font:600 12px 'IBM Plex Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6b7580}
.ns-card h3{font:600 22px/1.25 'IBM Plex Sans',sans-serif;letter-spacing:-.01em;margin:12px 0 18px;color:#111}
.ns-card ul{list-style:none;margin:0 0 26px;padding:0;flex:1}
.ns-card li{position:relative;padding:11px 0 11px 28px;border-top:1px solid #ece9e1;font-size:15px;line-height:1.5;color:#2b3238}
.ns-card li:before{content:'';position:absolute;left:2px;top:17px;width:12px;height:7px;border-left:2.5px solid var(--c);border-bottom:2.5px solid var(--c);transform:rotate(-45deg)}
.btn.ink{background:#111;border-color:#111;color:#fff;border-radius:999px;align-self:flex-start}
.btn.ink:hover{background:var(--c);border-color:var(--c)}

/* features */
.ns-feat{display:grid;grid-template-columns:1fr;gap:14px}
.ns-f{border:1px solid #26313c;border-radius:16px;padding:22px;background:#0c131b}
.ns-f .ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:rgba(47,92,255,.14);color:#6f93ff;margin-bottom:16px}
.ns-f h3{font:600 19px 'IBM Plex Sans',sans-serif;letter-spacing:-.01em;margin:0 0 8px;color:#fff}
.ns-f p{margin:0;color:#aeb7c1;font-size:15px;line-height:1.55}

/* comparison */
.ns-tablewrap{overflow-x:auto;border:1px solid #d9d6cd;border-radius:16px;background:#fff;-webkit-overflow-scrolling:touch}
.ns-table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px;color:#2b3238}
.ns-table th,.ns-table td{padding:16px 18px;text-align:left;border-bottom:1px solid #ece9e1;vertical-align:top}
.ns-table thead th{font:700 14px 'IBM Plex Sans',sans-serif;color:#111;background:#faf9f6;border-bottom:2px solid #111}
.ns-table thead th small{display:block;font-weight:500;color:#6b7580;margin-top:3px;font-size:12px}
.ns-table tbody th{font-weight:600;color:#111;width:26%}
.ns-table .us{background:#111;color:#fff;font-weight:700}
.ns-table thead .us{background:#111;color:#fff;border-bottom-color:#111}
.ns-table tbody tr:last-child th,.ns-table tbody tr:last-child td{border-bottom:0}

.ns-swipe{margin:0 0 14px;font-size:13px;color:#6b7580}

/* pricing tabs: CSS only (radio inputs), so all three price lists stay in the HTML */
.ns-tabs>input{position:absolute;opacity:0;pointer-events:none}
.ns-tablist{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.ns-tablist label{cursor:pointer;padding:12px 20px;border:2px solid transparent;border-radius:999px;color:#111;background:#fff;opacity:.62;transition:opacity .2s,border-color .2s}.ns-tablist label:hover{opacity:.85}
.ns-tablist label .wm{color:inherit}
.ns-tablist label .wm .a{color:var(--c)}
#pt-fit:checked~.ns-tablist label[for=pt-fit],#pt-glow:checked~.ns-tablist label[for=pt-glow],#pt-care:checked~.ns-tablist label[for=pt-care]{border-color:var(--c);opacity:1}
#pt-fit:focus-visible~.ns-tablist label[for=pt-fit],#pt-glow:focus-visible~.ns-tablist label[for=pt-glow],#pt-care:focus-visible~.ns-tablist label[for=pt-care]{outline:3px solid #6f93ff;outline-offset:3px}
.ns-panel{display:none}
#pt-fit:checked~.ns-panels .p-fit,#pt-glow:checked~.ns-panels .p-glow,#pt-care:checked~.ns-panels .p-care{display:block}
.ns-tiers{display:grid;grid-template-columns:1fr;gap:16px}
.ns-tier{border:1px solid #26313c;border-radius:20px;padding:28px 24px;background:#0c131b;display:flex;flex-direction:column}
.ns-tier h3{font:600 22px 'IBM Plex Sans',sans-serif;letter-spacing:-.01em;margin:0 0 14px;color:#fff}
.ns-tier .pr{display:flex;align-items:baseline;gap:6px}
.ns-tier .pr b{font:800 46px 'Montserrat',sans-serif;letter-spacing:-.04em;color:var(--c)}
.ns-tier .pr span{color:#9aa6b2;font-size:15px}
.ns-tier .gst{margin:4px 0 20px;font-size:13px;color:#8f9cab}
.ns-tier ul{list-style:none;margin:0 0 26px;padding:0;flex:1}
.ns-tier li{padding:11px 0 11px 26px;border-top:1px solid #212c36;position:relative;color:#cbd2d9;font-size:15px;line-height:1.45}
.ns-tier li:before{content:'';position:absolute;left:2px;top:16px;width:11px;height:6px;border-left:2.5px solid var(--c);border-bottom:2.5px solid var(--c);transform:rotate(-45deg)}
.ns-tier .tierbtn{background:transparent;color:#fff;border-color:#3a4652;border-radius:999px;align-self:stretch}
.ns-tier .tierbtn:hover{background:var(--c);border-color:var(--c);color:#fff}

/* steps (3) */
.pr-steps.s3{grid-template-columns:1fr}

/* brand page */
.ns-bul{display:grid;grid-template-columns:1fr;gap:14px}
.ns-b{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid #e1ded6;border-left:6px solid var(--c);border-radius:14px;padding:20px 22px}
.ns-b span{font:700 13px 'IBM Plex Sans',sans-serif;letter-spacing:.14em;color:#6b7580;padding-top:3px}
.ns-b p{margin:0;font:600 18px/1.4 'IBM Plex Sans',sans-serif;color:#111}
.ns-others{display:grid;grid-template-columns:1fr;gap:16px}
.ns-others a{display:block;background:#fff;border:1px solid #e1ded6;border-top:6px solid var(--c,#111);border-radius:18px;padding:24px;color:#111}
.ns-others a.all{border-top-color:#111}
.ns-others .t{display:block;margin-top:10px;font:600 12px 'IBM Plex Sans',sans-serif;letter-spacing:.12em;color:#6b7580}
.ns-others p{margin:10px 0 14px;color:#2b3238;font-size:15px;line-height:1.5}
.ns-others em{font-style:normal;font-weight:700;color:#111}
.ns-others a:hover em{color:var(--c,#111)}

/* light FAQ */
.ns-light .pr-faq{border-top-color:#d9d6cd}
.ns-light .pr-faq details{border-bottom-color:#d9d6cd}
.ns-light .pr-faq summary{color:#111}
.ns-light .pr-faq details p{color:#3a434b}

@media(min-width:640px){
.ns-hero{padding:128px 5vw 70px}
.ns-sec{padding:90px 5vw}
.ns-feat{grid-template-columns:1fr 1fr}
.ns-bul{grid-template-columns:1fr 1fr}
.ns-phones{gap:18px}
.ns-phone{border-radius:26px;padding:18px 12px 12px}
.wm.sm{font-size:19px}
}
@media(min-width:900px){
.ns-swipe{display:none}
.ns-cards,.ns-tiers{grid-template-columns:repeat(3,1fr)}
.ns-others{grid-template-columns:repeat(3,1fr)}
.ns-feat{grid-template-columns:repeat(3,1fr)}
.pr-steps.s3{grid-template-columns:repeat(3,1fr)}
.ns-hero h1{max-width:980px}
.ns-hero{padding:150px 5vw 90px}
.ns-sec{padding:105px max(5vw,32px)}
.ns-phones{max-width:820px;margin-top:60px}
}
@media(prefers-reduced-motion:reduce){.ns-tablist label{transition:none}}