/* ==========================================================
   Jhelum Networks — main stylesheet (mobile first)
   ========================================================== */

:root {
	--jn-navy: #0B1B2E;
	--jn-navy-2: #12263F;
	--jn-navy-3: #07131F;
	--jn-line-dark: #22406A;
	--jn-accent: #F5A524;
	--jn-accent-ink: #0B1B2E;
	--jn-ink: #0F172A;
	--jn-text: #1E293B;
	--jn-muted: #475569;
	--jn-muted-2: #556274;
	--jn-on-dark: #C2CFDD;
	--jn-on-dark-2: #A9BACD;
	--jn-grey: #F4F6F9;
	--jn-line: #E2E8F0;
	--jn-line-2: #CBD5E1;
	--jn-teal: #0E6A82;
	--jn-green: #0F7A3F;
	--jn-green-bg: #E7F7EE;
	--jn-soon: #8A5A00;
	--jn-soon-bg: #FFF4DE;
	--jn-radius: 14px;
	--jn-radius-lg: 20px;
	--jn-shadow: 0 24px 60px rgba(3, 10, 20, 0.28);
	--jn-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--jn-gutter: 16px;
}
@media (min-width: 768px) { :root { --jn-gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	font-family: var(--jn-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--jn-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--jn-teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--jn-navy); }
:focus-visible { outline: 3px solid var(--jn-accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.jn-icon { flex: none; }
.jn-sr, .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.jn-skip {
	position: absolute; left: 12px; top: -60px; z-index: 1000;
	background: var(--jn-accent); color: var(--jn-accent-ink); font-weight: 700;
	padding: 12px 18px; border-radius: 10px; text-decoration: none;
}
.jn-skip:focus { top: 12px; }
.jn-main:focus { outline: none; }

.jn-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: var(--jn-gutter); }
.jn-wrap--narrow { max-width: 820px; }
.jn-center { text-align: center; }
.jn-small { font-size: 14px; color: var(--jn-muted-2); margin: 0; }
.jn-accent { color: var(--jn-accent); }

/* ---------- Buttons ---------- */
.jn-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 12px 22px; border-radius: 12px; border: 1.5px solid transparent;
	font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none;
	cursor: pointer; transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.jn-btn:hover { transform: translateY(-1px); }
.jn-btn:active { transform: none; }
.jn-btn--lg { min-height: 54px; padding: 14px 26px; }
.jn-btn--block { width: 100%; }
.jn-btn--accent { background: var(--jn-accent); color: var(--jn-accent-ink); }
.jn-btn--accent:hover { background: #FFB43A; color: var(--jn-accent-ink); }
.jn-btn--dark { background: var(--jn-navy); color: #fff; }
.jn-btn--dark:hover { background: #142c48; color: #fff; }
.jn-btn--light { background: #fff; color: var(--jn-navy); }
.jn-btn--light:hover { color: var(--jn-navy); }
.jn-btn--outline { background: transparent; color: #fff; border-color: #3B5C82; }
.jn-btn--outline:hover { color: #fff; border-color: #fff; }
.jn-btn--outline .jn-icon { color: #3DDC84; }
.jn-btn--wa { background: var(--jn-green); color: #fff; }
.jn-btn--wa:hover { background: #0c6634; color: #fff; }
.jn-btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.jn-link-btn {
	background: none; border: 0; padding: 10px 0; min-height: 44px; cursor: pointer;
	font: inherit; font-weight: 700; color: var(--jn-teal);
}
.jn-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; min-height: 44px; }

/* ---------- Top bar ---------- */
.jn-topbar { display: none; background: var(--jn-navy-3); color: var(--jn-on-dark); font-size: 13px; }
.jn-topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 9px; }
.jn-topbar__note { display: flex; align-items: center; gap: 8px; margin: 0; }
.jn-topbar__note .jn-icon { color: var(--jn-accent); }
.jn-topbar__links { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.jn-topbar a { color: var(--jn-on-dark); text-decoration: none; }
.jn-topbar a:hover { color: #fff; }
.jn-topbar__phone { color: #fff !important; font-weight: 700; }
@media (min-width: 1024px) { .jn-topbar { display: block; } }

/* ---------- Header & navigation ---------- */
.jn-header { position: sticky; top: 0; z-index: 100; background: var(--jn-navy); border-bottom: 1px solid #1C3350; }
.admin-bar .jn-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .jn-header { top: 32px; } }
.jn-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.jn-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.jn-brand:hover { color: #fff; }
.jn-brand__img { max-height: 48px; width: auto; }
.jn-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.jn-brand__name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.jn-brand__tag { font-size: 12px; color: #9FB0C4; font-weight: 500; }

.jn-menu-toggle {
	display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
	background: transparent; border: 1.5px solid #2A4A70; border-radius: 12px; color: #fff; cursor: pointer;
}
.jn-menu-toggle__close { display: none; }
.jn-nav-open .jn-menu-toggle__open { display: none; }
.jn-nav-open .jn-menu-toggle__close { display: inline-flex; }

.jn-nav {
	display: none; position: absolute; left: 0; right: 0; top: 100%;
	background: var(--jn-navy); border-top: 1px solid #1C3350; padding: 8px var(--jn-gutter) 24px;
	max-height: calc(100vh - 68px); overflow-y: auto; box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
}
.jn-nav-open .jn-nav { display: block; }
.jn-menu { list-style: none; margin: 0; padding: 0; }
.jn-menu a {
	display: flex; align-items: center; min-height: 52px; color: #E6ECF3; font-weight: 600;
	font-size: 17px; text-decoration: none; border-bottom: 1px solid #1C3350;
}
.jn-menu a:hover, .jn-menu .current-menu-item > a, .jn-menu .current_page_item > a { color: #fff; }
.jn-menu .current-menu-item > a, .jn-menu .current_page_item > a { box-shadow: inset 3px 0 0 var(--jn-accent); padding-left: 12px; }
.jn-nav__cta { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.jn-nav__phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; text-decoration: none; min-height: 44px; justify-content: center; }
.jn-nav__phone:hover { color: #fff; }

@media (min-width: 1024px) {
	.jn-menu-toggle { display: none; }
	.jn-nav {
		display: flex !important; position: static; align-items: center; gap: 28px; padding: 0;
		background: none; border: 0; box-shadow: none; max-height: none; overflow: visible; flex: 1; justify-content: flex-end;
	}
	.jn-menu { display: flex; gap: 26px; }
	.jn-menu a { min-height: 44px; font-size: 15px; border: 0; }
	.jn-menu .current-menu-item > a, .jn-menu .current_page_item > a { box-shadow: inset 0 -2px 0 var(--jn-accent); padding-left: 0; }
	.jn-nav__cta { flex-direction: row; margin: 0; align-items: center; }
	.jn-nav__phone { display: none; }
	.jn-nav .jn-btn { min-height: 44px; padding: 10px 18px; font-size: 15px; }
}

/* ---------- Hero ---------- */
.jn-hero { position: relative; overflow: hidden; background: var(--jn-navy); color: #fff; }
.jn-hero__lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .35; pointer-events: none; }
.jn-hero__lines path { fill: none; stroke: #24476E; stroke-width: 1.5; }
.jn-hero__lines .jn-hero__glow { stroke: var(--jn-accent); stroke-opacity: .6; }
.jn-hero__inner { position: relative; display: grid; gap: 40px; padding-block: 48px 64px; }
@media (min-width: 1024px) {
	.jn-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 56px; padding-block: 88px 104px; }
}
.jn-hero__copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.jn-badge {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0;
	border: 1px solid #2A4A70; color: #CFE0F2; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
}
.jn-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; }
.jn-badge--soon .jn-badge__dot { background: var(--jn-accent); }
.jn-hero__title { margin: 0; font-size: clamp(36px, 7vw, 58px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
.jn-hero__text { margin: 0; font-size: clamp(17px, 2.2vw, 19px); line-height: 1.6; color: var(--jn-on-dark); max-width: 580px; }
.jn-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479px) { .jn-hero__actions .jn-btn { width: 100%; } }
.jn-hero__ticks { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; color: var(--jn-on-dark-2); font-weight: 500; }
.jn-hero__ticks li { display: inline-flex; align-items: center; gap: 8px; }
.jn-hero__ticks .jn-icon { color: var(--jn-accent); }
.jn-hero__form { min-width: 0; }

/* ---------- Forms ---------- */
.jn-form-card { background: #fff; color: var(--jn-ink); border-radius: var(--jn-radius-lg); padding: 24px; box-shadow: var(--jn-shadow); scroll-margin-top: 96px; }
@media (min-width: 480px) { .jn-form-card { padding: 32px; } }
.jn-section .jn-form-card, .jn-embed .jn-form-card { box-shadow: 0 10px 30px rgba(11, 27, 46, .10); border: 1px solid var(--jn-line); }
.jn-form { display: flex; flex-direction: column; gap: 16px; }
.jn-form__head { display: flex; flex-direction: column; gap: 6px; }
.jn-form__title { margin: 0; font-size: 23px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.jn-form__text { margin: 0; font-size: 15px; color: var(--jn-muted); }
.jn-form__alt { margin: 0; text-align: center; font-size: 14px; color: var(--jn-muted-2); }
.jn-form__alt a { font-weight: 700; }
.jn-field { display: flex; flex-direction: column; gap: 6px; }
.jn-field label { font-size: 14px; font-weight: 600; }
.jn-opt { font-weight: 400; color: var(--jn-muted-2); }
.jn-field input, .jn-field select, .jn-field textarea {
	font: inherit; font-size: 16px; color: var(--jn-ink); background: #fff;
	min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--jn-line-2); border-radius: 10px; width: 100%;
}
.jn-field input:focus, .jn-field select:focus { border-color: var(--jn-navy); outline: 3px solid rgba(245, 165, 36, .55); outline-offset: 0; }
.jn-field input[aria-invalid="true"] { border-color: #B42318; }
.jn-error { margin: 0; color: #B42318; font-size: 14px; font-weight: 600; }
.jn-error:empty, .jn-availability:empty { display: none; }
.jn-availability { margin: 0; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 8px; }
.jn-availability.is-live { background: var(--jn-green-bg); color: var(--jn-green); }
.jn-availability.is-soon { background: var(--jn-soon-bg); color: var(--jn-soon); }
.jn-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jn-alert { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; }
.jn-alert--ok { background: var(--jn-green-bg); color: var(--jn-green); }
.jn-alert--err { background: #FDECEA; color: #B42318; }
.jn-form-done { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.jn-form-done:focus { outline: none; }
.jn-form-done__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--jn-green-bg); color: var(--jn-green); display: flex; align-items: center; justify-content: center; }

/* ---------- Stats ---------- */
.jn-stats { border-bottom: 1px solid var(--jn-line); }
.jn-stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0 auto; padding-block: 32px; }
@media (min-width: 900px) { .jn-stats__grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; } }
.jn-stats__grid li { display: flex; flex-direction: column; gap: 2px; }
.jn-stats__num { font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: var(--jn-navy); }
.jn-stats__label { font-size: 14px; color: var(--jn-muted); line-height: 1.4; }

/* ---------- Sections ---------- */
.jn-section { padding-block: 64px; }
@media (min-width: 1024px) { .jn-section { padding-block: 96px; } }
.jn-section--tight { padding-block: 40px; }
@media (min-width: 1024px) { .jn-section--tight { padding-block: 56px; } }
.jn-section--grey { background: var(--jn-grey); }
.jn-section--dark { background: var(--jn-navy); color: #fff; }
.jn-section--dark .jn-lead { color: #B8C6D6; }
.jn-section__head { display: flex; flex-direction: column; gap: 12px; max-width: 700px; margin-bottom: 40px; }
.jn-section__head--row { max-width: none; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.jn-section__head--row > div { max-width: 680px; display: flex; flex-direction: column; gap: 12px; }
.jn-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--jn-teal); }
.jn-eyebrow--accent { color: var(--jn-accent); }
.jn-h2 { margin: 0; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; }
.jn-h3 { margin: 28px 0 14px; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.jn-lead { margin: 0; font-size: 17px; line-height: 1.7; color: var(--jn-muted); }
.jn-split { display: grid; gap: 40px; align-items: center; }
.jn-split--top { align-items: start; }
@media (min-width: 1024px) { .jn-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; } }
.jn-split__text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }

/* ---------- Packages ---------- */
.jn-packages { display: flex; flex-direction: column; gap: 28px; }
.jn-toggle { align-self: flex-start; display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid #D8E0EA; border-radius: 12px; }
.jn-toggle__btn { font: inherit; font-size: 14px; font-weight: 700; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--jn-muted); cursor: pointer; }
.jn-toggle__btn[aria-pressed="true"] { background: var(--jn-navy); color: #fff; }
.jn-pkg-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.jn-pkg {
	display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--jn-radius-lg);
	background: #fff; border: 1px solid #DCE3EC;
}
.jn-pkg--featured { background: var(--jn-navy); color: #fff; border: 2px solid var(--jn-accent); box-shadow: 0 20px 48px rgba(11, 27, 46, .22); }
.jn-pkg__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jn-pkg__name { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--jn-teal); }
.jn-pkg--featured .jn-pkg__name { color: var(--jn-accent); }
.jn-pill { background: var(--jn-accent); color: var(--jn-accent-ink); font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; letter-spacing: .03em; text-transform: uppercase; }
.jn-pkg__speed { margin: 0; font-size: 20px; font-weight: 700; color: var(--jn-muted); line-height: 1; }
.jn-pkg__speed span { font-size: 60px; font-weight: 800; letter-spacing: -0.04em; color: inherit; }
.jn-pkg__speed { color: var(--jn-ink); }
.jn-pkg--featured .jn-pkg__speed { color: #fff; }
.jn-pkg__price { display: flex; align-items: baseline; gap: 6px; padding-top: 18px; border-top: 1px solid var(--jn-line); }
.jn-pkg--featured .jn-pkg__price { border-color: var(--jn-line-dark); }
.jn-pkg__cur, .jn-pkg__per { font-size: 15px; font-weight: 600; color: var(--jn-muted); }
.jn-pkg--featured .jn-pkg__cur, .jn-pkg--featured .jn-pkg__per { color: #B8C6D6; }
.jn-pkg__amount { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.jn-pkg__note { margin: -10px 0 0; font-size: 13px; color: var(--jn-muted-2); }
.jn-pkg--featured .jn-pkg__note { color: #A9BACD; }
.jn-pkg__feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.jn-pkg__feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--jn-text); }
.jn-pkg--featured .jn-pkg__feats li { color: #E6ECF3; }
.jn-pkg__feats .jn-icon { color: var(--jn-accent); margin-top: 2px; }
.jn-pkg--na { opacity: .6; }

/* ---------- Comparison table ---------- */
.jn-table-wrap { overflow-x: auto; border: 1px solid var(--jn-line); border-radius: 16px; width: 100%; }
.jn-table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 15px; }
.jn-table th, .jn-table td { text-align: left; padding: 14px 18px; border-top: 1px solid var(--jn-line); }
.jn-table thead th, .jn-table thead td { border-top: 0; background: var(--jn-grey); font-weight: 700; color: var(--jn-muted); }
.jn-table tbody th { font-weight: 600; }
.jn-table td { color: var(--jn-muted); }
.jn-table .jn-table__us { background: #FFFAF0; color: var(--jn-ink); font-weight: 700; }
.jn-table thead .jn-table__us { background: var(--jn-soon-bg); color: var(--jn-navy); font-weight: 800; }

/* ---------- Business cards ---------- */
.jn-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.jn-card {
	height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 16px;
	background: var(--jn-navy-2); border: 1px solid var(--jn-line-dark); color: #fff; text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}
.jn-card:hover { color: #fff; border-color: var(--jn-accent); transform: translateY(-2px); }
.jn-card__icon { color: var(--jn-accent); }
.jn-card__title { font-size: 19px; font-weight: 700; }
.jn-card__text { font-size: 15px; color: #B8C6D6; line-height: 1.6; }

/* ---------- Coverage ---------- */
.jn-areas { display: flex; flex-direction: column; gap: 32px; }
.jn-search { max-width: 640px; display: flex; flex-direction: column; gap: 8px; }
.jn-search__label { font-weight: 700; font-size: 15px; }
.jn-search__box { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 56px; border: 1.5px solid var(--jn-line-2); border-radius: 14px; background: #fff; color: var(--jn-muted); }
.jn-search__box:focus-within { border-color: var(--jn-navy); outline: 3px solid rgba(245, 165, 36, .55); }
.jn-search__box input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 17px; color: var(--jn-ink); background: transparent; min-height: 52px; }
.jn-search__results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.jn-search__hit { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--jn-line); color: var(--jn-ink); text-decoration: none; font-weight: 700; }
.jn-search__hit:hover { border-color: var(--jn-navy); color: var(--jn-ink); }
.jn-search__status { font-size: 13px; font-weight: 700; color: var(--jn-green); background: var(--jn-green-bg); padding: 4px 10px; border-radius: 999px; }
.jn-search__hit.is-soon .jn-search__status { color: var(--jn-soon); background: var(--jn-soon-bg); }
.jn-search__none { padding: 14px 16px; border-radius: 12px; background: var(--jn-soon-bg); color: var(--jn-soon); font-weight: 600; }
.jn-area-group__title { margin: 0 0 14px; font-size: 18px; font-weight: 800; }
.jn-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.jn-chip {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 999px;
	background: #fff; border: 1px solid #DCE3EC; color: var(--jn-ink); font-weight: 600; font-size: 15px; text-decoration: none;
}
.jn-section:not(.jn-section--grey) .jn-chip { background: var(--jn-grey); border-color: transparent; }
.jn-chip:hover { border-color: var(--jn-navy); color: var(--jn-ink); }
.jn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jn-green); }
.jn-chip--soon .jn-dot { background: #D9921A; }
.jn-chip__tag { font-size: 12px; color: var(--jn-soon); background: var(--jn-soon-bg); padding: 2px 8px; border-radius: 999px; }
.jn-chip--all { font-weight: 700; color: var(--jn-teal); }

/* ---------- Area page ---------- */
.jn-areahero { background: var(--jn-navy); color: #fff; padding-block: 24px 64px; }
@media (min-width: 1024px) { .jn-areahero { padding-block: 32px 80px; } }
.jn-areahero__grid { display: grid; gap: 32px; align-items: end; }
@media (min-width: 1024px) { .jn-areahero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; } }
.jn-areahero__copy { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.jn-areahero__title { margin: 0; font-size: clamp(32px, 6vw, 54px); line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; }
.jn-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jn-facts li { background: var(--jn-navy-2); border: 1px solid var(--jn-line-dark); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.jn-facts__num { font-size: 22px; font-weight: 800; }
.jn-facts__label { font-size: 13px; color: #B8C6D6; }
.jn-streets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); width: 100%; }
.jn-streets li { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--jn-grey); font-weight: 600; font-size: 15px; }
.jn-streets .jn-icon { color: var(--jn-green); }
.jn-map { border-radius: var(--jn-radius-lg); overflow: hidden; border: 1px solid #DCE3EC; background: #EEF2F7; min-height: 320px; }
.jn-map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.jn-map--tall, .jn-map--tall iframe { min-height: 420px; }

/* ---------- Breadcrumbs & page head ---------- */
.jn-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: #9FB0C4; }
.jn-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .7; }
.jn-crumbs a { color: #9FB0C4; text-decoration: none; }
.jn-crumbs a:hover { color: #fff; }
.jn-crumbs [aria-current] { color: #fff; }
.jn-pagehead { background: var(--jn-navy); color: #fff; padding-block: 24px 48px; }
@media (min-width: 1024px) { .jn-pagehead { padding-block: 32px 64px; } }
.jn-pagehead__title { margin: 24px 0 0; font-size: clamp(30px, 5vw, 48px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.jn-pagehead__text, .jn-pagehead__meta { margin: 14px 0 0; color: var(--jn-on-dark); font-size: 18px; max-width: 700px; }
.jn-pagehead__search { margin-top: 20px; max-width: 520px; }

/* ---------- Prose (editor content) ---------- */
.jn-prose { font-size: 17px; line-height: 1.75; color: var(--jn-text); }
.jn-prose > * { margin-block: 0 1.1em; }
.jn-prose h2 { font-size: clamp(24px, 3.5vw, 32px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--jn-ink); margin-top: 1.6em; }
.jn-prose h3 { font-size: 21px; font-weight: 800; color: var(--jn-ink); margin-top: 1.4em; }
.jn-prose ul, .jn-prose ol { padding-left: 1.3em; }
.jn-prose img { border-radius: 14px; }
.jn-prose .jn-pkg-grid, .jn-prose .jn-form-card, .jn-prose .jn-support-grid, .jn-prose .jn-faq, .jn-prose .jn-contact, .jn-prose .jn-areas { font-size: 16px; line-height: 1.6; margin-block: 32px; }
.jn-feature-img { width: 100%; border-radius: 16px; margin-bottom: 28px; }

/* ---------- FAQ ---------- */
.jn-faq { border-top: 1px solid var(--jn-line); width: 100%; min-width: 0; }
.jn-faq__item { border-bottom: 1px solid var(--jn-line); }
.jn-faq__q {
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 20px 4px; min-height: 56px; font-size: 17px; font-weight: 700; color: var(--jn-ink);
}
.jn-faq__q::-webkit-details-marker { display: none; }
.jn-faq__icon { flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; background: #EEF2F7; transition: transform .16s ease, background-color .16s ease; }
.jn-faq__icon::before, .jn-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--jn-navy); transform: translate(-50%, -50%); }
.jn-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.jn-faq__item[open] .jn-faq__icon { background: var(--jn-navy); transform: rotate(45deg); }
.jn-faq__item[open] .jn-faq__icon::before, .jn-faq__item[open] .jn-faq__icon::after { background: #fff; }
.jn-faq__a { padding: 0 4px 22px; font-size: 16px; line-height: 1.7; color: var(--jn-muted); max-width: 760px; }
.jn-faq__a p { margin: 0 0 .8em; }

/* ---------- Reviews ---------- */
.jn-reviews { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.jn-reviews > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.jn-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; background: #fff; border: 1px solid #DCE3EC; border-radius: 16px; padding: 18px 22px; }
.jn-rating__num { font-size: 36px; font-weight: 800; }
.jn-rating__stars { display: inline-flex; color: var(--jn-accent); }
.jn-rating__stars .jn-icon { fill: currentColor; }
.jn-rating__label { font-size: 14px; color: var(--jn-muted); }

/* ---------- Support / contact ---------- */
.jn-support-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.jn-support-card {
	height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 16px;
	background: #fff; border: 1px solid var(--jn-line); color: var(--jn-ink); text-decoration: none;
}
.jn-support-card:hover { border-color: var(--jn-navy); color: var(--jn-ink); }
.jn-support-card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--jn-soon-bg); color: var(--jn-navy); display: flex; align-items: center; justify-content: center; }
.jn-support-card__title { font-weight: 800; font-size: 17px; }
.jn-support-card__text { font-size: 14px; color: var(--jn-muted); }
.jn-contact { display: grid; gap: 32px; }
@media (min-width: 1024px) { .jn-contact { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; } }
.jn-contact__info { display: flex; flex-direction: column; gap: 24px; }
.jn-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.jn-contact__list li { display: flex; gap: 14px; align-items: flex-start; }
.jn-contact__list .jn-icon { color: var(--jn-teal); margin-top: 3px; }
.jn-contact__list span { display: flex; flex-direction: column; gap: 2px; }
.jn-contact__list address { font-style: normal; }

/* ---------- Blog ---------- */
.jn-posts { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.jn-post-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--jn-line); }
.jn-post-card__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.jn-post-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.jn-post-card__title { margin: 0; font-size: 19px; line-height: 1.35; }
.jn-post-card__title a { color: var(--jn-ink); text-decoration: none; }
.jn-post-card__title a:hover { color: var(--jn-teal); }
.jn-post-card__excerpt { margin: 0; color: var(--jn-muted); font-size: 15px; }
.jn-pagination { margin-top: 32px; }
.jn-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.jn-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--jn-line); text-decoration: none; font-weight: 700; color: var(--jn-ink); }
.jn-pagination .current { background: var(--jn-navy); color: #fff; border-color: var(--jn-navy); }
.search-form { display: flex; gap: 8px; }
.search-form label { flex: 1; }
.search-form .search-field { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid #3B5C82; font: inherit; }
.search-form .search-submit { min-height: 48px; padding: 0 18px; border-radius: 10px; border: 0; background: var(--jn-accent); color: var(--jn-accent-ink); font: inherit; font-weight: 700; cursor: pointer; }

/* ---------- CTA band & footer ---------- */
.jn-cta { background: var(--jn-accent); color: var(--jn-navy); }
.jn-cta__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-block: 48px; }
.jn-cta__title { margin: 0 0 8px; font-size: clamp(28px, 4vw, 38px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.jn-cta__text { margin: 0; font-size: 17px; color: #3A2A06; max-width: 620px; }
.jn-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479px) { .jn-cta__actions, .jn-cta__actions .jn-btn { width: 100%; } }

.jn-footer { background: var(--jn-navy-3); color: var(--jn-on-dark-2); font-size: 15px; padding-top: 56px; }
.jn-footer a { color: var(--jn-on-dark-2); text-decoration: none; }
.jn-footer a:hover { color: #fff; }
.jn-footer__grid { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.jn-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.jn-footer__col li a { display: inline-flex; align-items: center; min-height: 36px; }
.jn-footer__col p { margin: 0 0 10px; }
.jn-footer__brand { font-size: 18px; font-weight: 800; color: #fff; }
.jn-footer__addr { font-style: normal; line-height: 1.7; margin-bottom: 12px; }
.jn-footer__phone { color: #fff !important; font-weight: 800; font-size: 18px; }
.jn-footer__hours { font-size: 14px; }
.jn-footer__h { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.jn-footer__bottom { margin-top: 40px; padding-block: 22px; border-top: 1px solid #1C3350; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; }
.jn-footer__bottom p { margin: 0; }
.jn-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- Mobile action bar & WhatsApp button ---------- */
.jn-mobilebar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr 1.4fr;
	background: #fff; border-top: 1px solid var(--jn-line); box-shadow: 0 -8px 24px rgba(11, 27, 46, .10);
	padding-bottom: env(safe-area-inset-bottom);
}
.jn-mobilebar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 62px; font-size: 13px; font-weight: 700; color: var(--jn-navy); text-decoration: none; }
.jn-mobilebar__wa { color: var(--jn-green) !important; }
.jn-mobilebar__main { background: var(--jn-accent); color: var(--jn-accent-ink) !important; }
body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
.jn-wa-float { display: none; }
@media (min-width: 768px) {
	.jn-mobilebar { display: none; }
	body { padding-bottom: 0; }
	.jn-wa-float {
		position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 60px; height: 60px; border-radius: 50%;
		display: flex; align-items: center; justify-content: center; background: var(--jn-green); color: #fff;
		box-shadow: 0 10px 28px rgba(7, 19, 31, .35);
	}
	.jn-wa-float:hover { color: #fff; transform: scale(1.05); }
}

/* ---------- WordPress core alignments ---------- */
.alignwide { max-width: 1200px; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }
.wp-block-button__link { border-radius: 12px; font-weight: 700; }
.wp-block-image figcaption { font-size: 14px; color: var(--jn-muted-2); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
	.jn-topbar, .jn-header, .jn-mobilebar, .jn-wa-float, .jn-cta { display: none !important; }
}

/* ==========================================================
   v1.1 — package finder, price zones, GPS locate, coverage map
   ========================================================== */

/* Zone toggle (inside / outside city) */
.jn-packages__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.jn-zone { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid #D8E0EA; border-radius: 12px; }
.jn-zone__btn { font: inherit; font-size: 14px; font-weight: 700; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--jn-muted); cursor: pointer; }
.jn-zone__btn[aria-pressed="true"] { background: var(--jn-navy); color: #fff; }
.jn-packages__title { margin-top: 56px; }
.jn-pkg__best { margin: -6px 0 0; font-size: 14px; line-height: 1.5; color: var(--jn-muted); }
.jn-pkg--featured .jn-pkg__best { color: #B8C6D6; }
.jn-pkg__note { margin: -10px 0 0; }

/* 9 packages: swipe row on phones, grid on larger screens */
@media (max-width: 767px) {
	.jn-pkg-grid {
		grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%;
		overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px;
		margin-inline: calc(var(--jn-gutter) * -1); padding-inline: var(--jn-gutter); scroll-padding-inline: var(--jn-gutter);
		-webkit-overflow-scrolling: touch;
	}
	.jn-pkg { scroll-snap-align: start; }
}
@media (min-width: 768px) { .jn-pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jn-pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Package finder */
.jn-finder { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .jn-finder { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; } }
.jn-finder__form { display: flex; flex-direction: column; gap: 24px; background: #fff; border: 1px solid #DCE3EC; border-radius: var(--jn-radius-lg); padding: 24px; }
@media (min-width: 480px) { .jn-finder__form { padding: 28px; } }
.jn-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.jn-q__title { display: flex; align-items: flex-start; gap: 10px; padding: 0; margin-bottom: 12px; font-weight: 700; font-size: 17px; line-height: 1.4; }
.jn-q__num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--jn-navy); color: #fff; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.jn-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.jn-opts--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.jn-opt-card { position: relative; display: flex; }
.jn-opt-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jn-opt-card span {
	flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 10px 12px;
	border: 1.5px solid var(--jn-line-2); border-radius: 12px; font-weight: 600; font-size: 15px; line-height: 1.3; cursor: pointer; background: #fff;
	transition: border-color .12s ease, background-color .12s ease;
}
.jn-opts--wide .jn-opt-card span { justify-content: flex-start; text-align: left; }
.jn-opt-card span:hover { border-color: var(--jn-navy); }
.jn-opt-card input:checked + span { border-color: var(--jn-navy); background: var(--jn-navy); color: #fff; }
.jn-opt-card input:focus-visible + span { outline: 3px solid var(--jn-accent); outline-offset: 2px; }
.jn-finder__result {
	display: flex; flex-direction: column; gap: 12px; background: var(--jn-navy); color: #fff;
	border-radius: var(--jn-radius-lg); padding: 28px; position: sticky; top: 96px;
}
.jn-finder__result .jn-eyebrow { color: var(--jn-accent); }
.jn-finder__speed { margin: 0; font-size: 22px; font-weight: 700; color: #B8C6D6; line-height: 1; }
.jn-finder__speed span { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; color: #fff; }
.jn-finder__name { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--jn-accent); }
.jn-finder__best { margin: 0; color: #C2CFDD; font-size: 15px; }
.jn-finder__price { margin: 4px 0 0; display: flex; align-items: baseline; gap: 6px; }
.jn-finder__price [data-jn-r-price] { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.jn-finder__result .jn-pkg__cur, .jn-finder__result .jn-pkg__per { color: #B8C6D6; }
.jn-finder__result .jn-small { color: #A9BACD; }
.jn-finder__result .jn-zone { background: transparent; border-color: var(--jn-line-dark); align-self: flex-start; }
.jn-finder__result .jn-zone__btn { color: #C2CFDD; }
.jn-finder__result .jn-zone__btn[aria-pressed="true"] { background: #fff; color: var(--jn-navy); }
.jn-finder__up:empty, .jn-finder__why:empty, .jn-finder__best:empty { display: none; }
@media (max-width: 1023px) { .jn-finder__result { position: static; } }

/* GPS locate button */
.jn-locate {
	display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; text-align: left;
	background: var(--jn-soon-bg); border: 1.5px dashed #D9921A; border-radius: 14px; color: var(--jn-navy); cursor: pointer; font: inherit;
}
.jn-locate:hover { border-style: solid; }
.jn-locate[disabled] { opacity: .7; cursor: progress; }
.jn-locate.is-done { background: var(--jn-green-bg); border-color: var(--jn-green); border-style: solid; }
.jn-locate__icon { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--jn-accent); color: var(--jn-navy); display: flex; align-items: center; justify-content: center; }
.jn-locate.is-done .jn-locate__icon { background: var(--jn-green); color: #fff; }
.jn-locate__text { display: flex; flex-direction: column; line-height: 1.3; }
.jn-locate__text strong { font-size: 16px; }
.jn-locate__text span { font-size: 13px; color: var(--jn-muted); }
.jn-locate__status { margin: -6px 0 0; font-size: 14px; font-weight: 600; line-height: 1.5; padding: 10px 12px; border-radius: 10px; background: var(--jn-grey); }
.jn-locate__status:empty { display: none; }
.jn-locate__status.is-live { background: var(--jn-green-bg); color: var(--jn-green); }
.jn-locate__status.is-soon { background: var(--jn-soon-bg); color: var(--jn-soon); }

/* Coverage map */
.jn-covmap-wrap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.jn-covmap { height: 460px; border-radius: var(--jn-radius-lg); border: 1px solid #DCE3EC; background: #EEF2F7; z-index: 0; }
@media (min-width: 1024px) { .jn-covmap-wrap { position: sticky; top: 96px; } }

/* ==========================================================
   v1.2 — live network notices
   ========================================================== */
:root {
	--jn-red: #DC2626; --jn-red-ink: #7F1D1D; --jn-red-bg: #FEF2F2;
	--jn-amber: #D97706; --jn-amber-ink: #78350F; --jn-amber-bg: #FFFBEB;
	--jn-blue: #0E6A82; --jn-blue-bg: #ECF7FA;
	--jn-ok: #16A34A; --jn-ok-bg: #F0FDF4;
}
@keyframes jnPulse { 0% { transform: scale(.6); opacity: .7; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes jnSlideDown { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Banner under the header */
.jn-alerts { position: relative; z-index: 50; }
.jn-alerts[hidden] { display: none; }
.jn-alert { border-bottom: 1px solid rgba(0, 0, 0, .06); animation: jnSlideDown .35s ease both; }
.jn-alert--outage { background: linear-gradient(90deg, #FEE2E2, #FEF2F2 40%); color: var(--jn-red-ink); }
.jn-alert--maintenance { background: linear-gradient(90deg, #FEF3C7, #FFFBEB 40%); color: var(--jn-amber-ink); }
.jn-alert--info { background: linear-gradient(90deg, #DBEFF5, #ECF7FA 40%); color: #0B3D4A; }
.jn-alert--resolved { background: linear-gradient(90deg, #DCFCE7, #F0FDF4 40%); color: #14532D; }
.jn-alert__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: center; padding-block: 12px; }
.jn-alert__icon { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.jn-alert__pulse { position: absolute; inset: 4px; border-radius: 50%; background: currentColor; opacity: .25; animation: jnPulse 1.8s ease-out infinite; }
.jn-alert--resolved .jn-alert__pulse, .jn-alert--info .jn-alert__pulse, .is-scheduled .jn-alert__pulse { animation: none; opacity: .12; }
.jn-alert__emoji { position: relative; font-size: 20px; line-height: 1; }
.jn-alert__body { min-width: 0; }
.jn-alert__top { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; font-weight: 700; }
.jn-alert__type { text-transform: uppercase; letter-spacing: .06em; }
.jn-alert__where { font-weight: 600; opacity: .85; }
.jn-alert__main { margin: 2px 0 0; font-weight: 700; font-size: 15px; line-height: 1.4; }
.jn-alert__eta { margin: 2px 0 0; font-size: 14px; opacity: .9; }
.jn-alert__actions { display: flex; align-items: center; gap: 4px; }
.jn-alert__link { font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; padding-inline: 8px; white-space: nowrap; }
.jn-alert__link:hover { color: inherit; }
.jn-alert__x { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 26px; line-height: 1; border-radius: 10px; cursor: pointer; opacity: .7; }
.jn-alert__x:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.jn-alert__more { display: block; text-align: center; padding: 8px; font-size: 14px; font-weight: 700; background: #fff; border-bottom: 1px solid var(--jn-line); }
@media (max-width: 599px) {
	.jn-alert__inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; padding-block: 10px; gap: 10px; }
	.jn-alert__icon { width: 32px; height: 32px; }
	.jn-alert__link { display: none; }
	.jn-alert__main { font-size: 14px; }
	.jn-alert { cursor: pointer; }
}

/* Small status chips */
.jn-chip-s { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .7); text-transform: none; letter-spacing: 0; }
.jn-chip-s::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.jn-chip-s--investigating::before, .jn-chip-s--fixing::before { animation: jnBlink 1.2s ease-in-out infinite; }
@keyframes jnBlink { 50% { opacity: .25; } }

/* Status pill (top bar, menu, footer) */
.jn-statuspill { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.jn-statuspill__dot { width: 9px; height: 9px; border-radius: 50%; background: #9CA3AF; position: relative; flex: none; }
.is-ok .jn-statuspill__dot { background: #22C55E; }
.is-issue .jn-statuspill__dot { background: #EF4444; }
.is-maint .jn-statuspill__dot { background: #F59E0B; }
.is-issue .jn-statuspill__dot::after, .is-ok .jn-statuspill__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: jnPulse 2s ease-out infinite; }
.jn-topbar .is-issue { color: #FCA5A5 !important; font-weight: 700; }
.jn-statuspill--nav { color: #E6ECF3; font-weight: 600; min-height: 44px; justify-content: center; }
@media (min-width: 1024px) { .jn-statuspill--nav { display: none; } }
.jn-footer__status { display: inline-flex; align-items: center; gap: 8px; }

/* Toasts */
.jn-toasts { position: fixed; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 120; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
@media (min-width: 768px) { .jn-toasts { left: auto; right: 96px; bottom: 24px; width: 380px; } }
.jn-toast {
	pointer-events: auto; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; text-decoration: none;
	background: var(--jn-navy); color: #fff; box-shadow: 0 18px 40px rgba(7, 19, 31, .35); border-left: 5px solid var(--jn-accent);
	transform: translateY(20px) scale(.97); opacity: 0; transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), opacity .3s ease;
}
.jn-toast.is-in { transform: none; opacity: 1; }
.jn-toast:hover { color: #fff; }
.jn-toast--outage { border-left-color: #EF4444; }
.jn-toast--resolved { border-left-color: #22C55E; }
.jn-toast__emoji { font-size: 24px; }
.jn-toast__body { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; }
.jn-toast__body strong { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--jn-accent); }

/* Area page alert */
.jn-areaalert { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; border-radius: 14px; animation: jnSlideDown .35s ease both; }
.jn-areaalert > div { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.jn-areaalert__emoji { font-size: 22px; }
.jn-areaalert--outage { background: var(--jn-red-bg); color: var(--jn-red-ink); }
.jn-areaalert--maintenance { background: var(--jn-amber-bg); color: var(--jn-amber-ink); }
.jn-areaalert--info { background: var(--jn-blue-bg); color: #0B3D4A; }
.jn-areaalert--resolved { background: var(--jn-ok-bg); color: #14532D; }

/* Hint inside the connection form */
.jn-formhint { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.jn-formhint--outage { background: var(--jn-red-bg); color: var(--jn-red-ink); }
.jn-formhint--maintenance, .jn-formhint--info { background: var(--jn-amber-bg); color: var(--jn-amber-ink); }

/* Status page */
.jn-status { display: flex; flex-direction: column; gap: 28px; }
.jn-status__hero { display: flex; align-items: center; gap: 20px; padding: 28px; border-radius: 22px; background: var(--jn-ok-bg); color: #14532D; border: 1px solid #BBF7D0; }
.jn-status__hero.is-issue { background: var(--jn-red-bg); color: var(--jn-red-ink); border-color: #FECACA; }
.jn-status__hero.is-maint { background: var(--jn-amber-bg); color: var(--jn-amber-ink); border-color: #FDE68A; }
.jn-status__orb { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--jn-ok); position: relative; box-shadow: 0 0 0 8px rgba(22, 163, 74, .15); }
.jn-status__orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: jnPulse 2.2s ease-out infinite; }
.is-issue .jn-status__orb { background: var(--jn-red); box-shadow: 0 0 0 8px rgba(220, 38, 38, .15); }
.is-maint .jn-status__orb { background: var(--jn-amber); box-shadow: 0 0 0 8px rgba(217, 119, 6, .15); }
.jn-status__title { margin: 0; font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.jn-status__sub { margin: 4px 0 0; font-size: 16px; opacity: .9; }
.jn-status__list { display: grid; gap: 16px; }
.jn-status__list:empty { display: none; }
.jn-scard { background: #fff; border: 1px solid var(--jn-line); border-left: 6px solid var(--jn-amber); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; animation: jnSlideDown .35s ease both; }
.jn-scard--outage { border-left-color: var(--jn-red); }
.jn-scard--info { border-left-color: var(--jn-blue); }
.jn-scard--resolved { border-left-color: var(--jn-ok); }
.jn-scard__head { display: flex; gap: 14px; align-items: flex-start; }
.jn-scard__emoji { font-size: 28px; line-height: 1; }
.jn-scard__type { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--jn-muted); }
.jn-scard__type .jn-chip-s { background: var(--jn-grey); color: var(--jn-ink); }
.jn-scard--outage .jn-chip-s { background: var(--jn-red-bg); color: var(--jn-red-ink); }
.jn-scard__title { margin: 4px 0 0; font-size: 21px; font-weight: 800; line-height: 1.3; }
.jn-scard__areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jn-scard__areas li, .jn-scard__areas a { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 12px; border-radius: 999px; background: var(--jn-grey); font-weight: 600; font-size: 14px; color: var(--jn-ink); text-decoration: none; }
.jn-scard__areas li:has(a) { padding: 0; background: none; }
.jn-scard__msg { margin: 0; color: var(--jn-text); }
.jn-scard__eta { margin: 0; font-weight: 700; font-size: 16px; }
.jn-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: s; }
.jn-steps li { position: relative; padding-top: 14px; font-size: 13px; font-weight: 600; color: var(--jn-muted-2); text-align: center; }
.jn-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 999px; background: var(--jn-line); }
.jn-steps li.is-done::before { background: var(--jn-ok); }
.jn-steps li.is-now { color: var(--jn-ink); }
.jn-steps li.is-now::before { background: linear-gradient(90deg, var(--jn-ok), var(--jn-accent)); background-size: 200% 100%; animation: jnBar 1.4s linear infinite; }
@keyframes jnBar { to { background-position: -200% 0; } }
.jn-status__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
@media (max-width: 599px) {
	.jn-status__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jn-status__grid a { padding: 10px; gap: 2px 8px; }
	.jn-status__aname { font-size: 14px; }
	.jn-status__astate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.jn-status__grid a { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--jn-line); color: var(--jn-ink); text-decoration: none; min-height: 56px; }
.jn-status__grid a:hover { border-color: var(--jn-navy); color: var(--jn-ink); }
.jn-sdot { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; background: #22C55E; }
.is-issue .jn-sdot { background: var(--jn-red); box-shadow: 0 0 0 4px rgba(220, 38, 38, .15); }
.is-maint .jn-sdot { background: var(--jn-amber); }
.jn-status__aname { font-weight: 700; font-size: 15px; }
.jn-status__astate { font-size: 13px; color: var(--jn-muted-2); }
.is-issue .jn-status__astate { color: var(--jn-red-ink); font-weight: 600; }
.jn-status__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479px) { .jn-status__actions .jn-btn { width: 100%; } }
.jn-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.jn-history__item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--jn-line); }
.jn-history__item > div { display: flex; flex-direction: column; gap: 2px; }
.jn-history__dot { flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--jn-amber); }
.jn-history__dot--outage { background: var(--jn-red); }
.jn-history__dot--info { background: var(--jn-blue); }
.jn-status__checked { text-align: center; }
@media (prefers-reduced-motion: reduce) {
	.jn-alert__pulse, .jn-status__orb::after, .jn-statuspill__dot::after, .jn-chip-s::before { animation: none !important; }
}

/* ==========================================================
   v1.3 — photo hero, speed chips, trust strip, two-step form
   ========================================================== */
.jn-hero--photo { background: var(--jn-navy); isolation: isolate; }
.jn-hero__photo { position: absolute; inset: 0; z-index: -2; display: block; }
.jn-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--jn-focus, 72%) 35%; }
.jn-hero__shade {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(11, 27, 46, .97) 0%, rgba(11, 27, 46, .92) 30%, rgba(11, 27, 46, .62) 50%, rgba(11, 27, 46, .14) 70%, rgba(11, 27, 46, 0) 100%),
		linear-gradient(0deg, rgba(11, 27, 46, .95) 0%, rgba(11, 27, 46, .35) 22%, rgba(11, 27, 46, 0) 45%);
}
.jn-hero--photo .jn-hero__lines { z-index: -1; opacity: .5; }
.jn-hero--photo .jn-hero__lines path { stroke: #2A4A70; }
.jn-hero--photo .jn-hero__glow { stroke: var(--jn-accent); stroke-opacity: .7; stroke-dasharray: 90 1400; animation: jnFiber 7s linear infinite; }
.jn-hero--photo .jn-hero__glow--2 { animation-delay: -3.5s; stroke-opacity: .45; }
@keyframes jnFiber { from { stroke-dashoffset: 1500; } to { stroke-dashoffset: 0; } }
.jn-hero--photo .jn-hero__inner { display: block; padding-block: 64px 28px; }
.jn-hero--photo .jn-hero__copy { max-width: 600px; gap: 20px; }
.jn-hero--photo .jn-hero__title { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.jn-hero__formwrap { position: relative; padding-bottom: 40px; }
@media (min-width: 1024px) {
	.jn-hero--photo { min-height: 640px; display: flex; flex-direction: column; justify-content: flex-end; }
	.jn-hero--photo .jn-hero__inner { padding-block: 80px 32px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.jn-hero__shade { background: linear-gradient(90deg, rgba(11, 27, 46, .96) 0%, rgba(11, 27, 46, .8) 55%, rgba(11, 27, 46, .35) 100%), linear-gradient(0deg, rgba(11, 27, 46, .95), rgba(11, 27, 46, 0) 45%); }
}
/* Phones: photo on top, headline rising out of it */
@media (max-width: 767px) {
	.jn-hero__photo { position: relative; height: 360px; z-index: 0; }
	.jn-hero__photo img { object-position: 50% 30%; }
	.jn-hero__shade { inset: 0 0 auto 0; height: 362px; z-index: 1; background: linear-gradient(0deg, var(--jn-navy) 0%, rgba(11, 27, 46, .55) 30%, rgba(11, 27, 46, 0) 60%), linear-gradient(180deg, rgba(11, 27, 46, .35), rgba(11, 27, 46, 0) 25%); }
	.jn-hero--photo .jn-hero__lines { display: none; }
	.jn-hero--photo .jn-hero__inner { position: relative; z-index: 2; margin-top: -120px; padding-block: 0 24px; }
	.jn-hero--photo .jn-badge { background: rgba(11, 27, 46, .6); backdrop-filter: blur(6px); }
	.jn-hero__formwrap { padding-bottom: 32px; }
}

/* Speed chips */
.jn-speedchips { display: flex; flex-wrap: wrap; gap: 8px; }
.jn-speedchip {
	display: inline-flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 8px 14px; border-radius: 14px;
	background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: #fff; text-decoration: none; line-height: 1.15;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.jn-speedchip:hover { color: #fff; background: rgba(255, 255, 255, .16); border-color: var(--jn-accent); transform: translateY(-2px); }
.jn-speedchip__mbps { font-size: 18px; font-weight: 800; }
.jn-speedchip__mbps small { font-size: 12px; font-weight: 600; opacity: .8; }
.jn-speedchip__price { font-size: 12px; font-weight: 600; color: #C2CFDD; }
.jn-speedchip.is-featured { border-color: var(--jn-accent); background: rgba(245, 165, 36, .16); }
.jn-speedchip.is-featured .jn-speedchip__price { color: var(--jn-accent); }
.jn-speedchip--all { flex-direction: row; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; background: transparent; border-style: dashed; }
@media (max-width: 479px) {
	.jn-speedchips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--jn-gutter) * -1); padding-inline: var(--jn-gutter); padding-bottom: 4px; scrollbar-width: none; }
	.jn-speedchip { flex: none; }
}

/* Trust strip */
.jn-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; color: var(--jn-on-dark); }
.jn-trust li { display: inline-flex; align-items: center; gap: 6px; }
.jn-trust li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #3B5C82; margin-right: 12px; }
.jn-trust strong { color: #fff; }
.jn-trust .jn-statuspill { color: #fff; font-weight: 600; min-height: 32px; }
.jn-trust__star { color: var(--jn-accent); }

/* Two-step form */
.jn-form__head { position: relative; }
.jn-form__steps { position: absolute; top: 4px; right: 0; display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.jn-form__steps li { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--jn-grey); color: var(--jn-muted); }
.jn-form__steps li.is-on { background: var(--jn-navy); color: #fff; }
html:not(.jn-js) .jn-form__steps, html:not(.jn-js) .jn-form__continue, html:not(.jn-js) .jn-form__back { display: none; }
.jn-form__step1, .jn-form__step2 { display: flex; flex-direction: column; gap: 16px; }
html.jn-js .jn-form-card:not(.is-step2) .jn-form__step2 { display: none; }
html.jn-js .jn-form-card.is-step2 .jn-form__continue { display: none; }
.jn-form-card.is-step2 .jn-form__step2 { animation: jnSlideDown .3s ease both; }
.jn-form__continue { width: 100%; }
.jn-form__msgs { display: flex; flex-direction: column; gap: 8px; }
.jn-form__msgs:not(:has(> :not(:empty))) { display: none; }
.jn-form__msgs .jn-locate__status { margin: 0; }
.jn-form__send { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.jn-form__back { align-self: center; }
.jn-form-card .jn-hp + .jn-form__step1 { margin-top: 0; }

/* Bar layout (homepage hero, wide screens) */
@media (min-width: 1024px) {
	.jn-form-card--bar { padding: 22px 26px; border-radius: 22px; box-shadow: 0 30px 70px rgba(3, 10, 20, .45); }
	.jn-form-card--bar .jn-form { gap: 14px; }
	.jn-form-card--bar .jn-form__head { flex-direction: row; align-items: baseline; gap: 14px; padding-right: 70px; }
	.jn-form-card--bar .jn-form__title { font-size: 20px; }
	.jn-form-card--bar .jn-form__text { font-size: 14px; }
	.jn-form-card--bar .jn-form__steps { top: 0; }
	.jn-form-card--bar .jn-form__step1 { display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; }
	.jn-form-card--bar .jn-locate { min-height: 52px; width: auto; padding: 6px 14px 6px 8px; }
	.jn-form-card--bar .jn-locate__icon { width: 36px; height: 36px; }
	.jn-form-card--bar .jn-locate__text span { display: none; }
	.jn-form-card--bar .jn-form__continue { width: auto; min-height: 52px; padding-inline: 26px; }
	.jn-form-card--bar .jn-form__step2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) auto; align-items: end; gap: 12px; }
	html.jn-js .jn-form-card--bar:not(.is-step2) .jn-form__step2 { display: none; }
	.jn-form-card--bar .jn-form__send { flex-direction: row; align-items: center; }
	.jn-form-card--bar .jn-form__send .jn-btn { width: auto; min-height: 52px; white-space: nowrap; }
	.jn-form-card--bar .jn-form__alt { text-align: left; }
	.jn-form-card--bar .jn-form-done { flex-direction: row; align-items: center; gap: 20px; }
	.jn-form-card--bar .jn-form-done__body { flex: 1; }
	.jn-form-card--bar .jn-form-done__actions { display: flex; flex-direction: column; align-items: center; min-width: 300px; }
}
.jn-form-done__body { display: flex; flex-direction: column; gap: 6px; }
.jn-form-done__actions { display: flex; flex-direction: column; gap: 4px; width: 100%; }
@media (prefers-reduced-motion: reduce) { .jn-hero--photo .jn-hero__glow { animation: none; } }

/* ---------- v1.3 slim alert bar ---------- */
.jn-alert { animation: jnSlideDown .3s ease both; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.jn-alert--outage { background: #FDECEC; color: #8A1C1C; }
.jn-alert--maintenance { background: #FFF6E0; color: #7A4A00; }
.jn-alert__inner { display: flex; align-items: center; gap: 10px; min-height: 46px; padding-block: 4px; }
.jn-alert__dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.jn-alert__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: jnPulse 1.8s ease-out infinite; }
.is-scheduled .jn-alert__dot::after { animation: none; }
.jn-alert__line {
	flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none;
	color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden;
}
.jn-alert__kind { text-transform: uppercase; letter-spacing: .05em; font-size: 12px; font-weight: 800; flex: none; }
.jn-alert__where { font-weight: 700; flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.jn-alert__what { overflow: hidden; text-overflow: ellipsis; }
.jn-alert__eta { margin-left: auto; padding-left: 10px; font-weight: 600; opacity: .85; flex: none; }
.jn-alert__actions { display: flex; align-items: center; gap: 2px; flex: none; }
.jn-alert__nav, .jn-alert__x { width: 36px; height: 36px; border: 0; background: transparent; color: inherit; font-size: 22px; line-height: 1; border-radius: 8px; cursor: pointer; }
.jn-alert__nav:hover, .jn-alert__x:hover { background: rgba(0, 0, 0, .07); }
.jn-alert__count { font-size: 12px; font-weight: 700; min-width: 28px; text-align: center; opacity: .8; }
.jn-alert__more { padding-block: 0 12px; padding-left: calc(var(--jn-gutter) + 20px); font-size: 14px; animation: jnSlideDown .25s ease both; }
.jn-alert__more p { margin: 0 0 6px; }
.jn-alert__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.jn-alert__meta a { color: inherit; font-weight: 700; }
@media (max-width: 767px) {
	.jn-alert__line { flex-wrap: wrap; white-space: normal; gap: 0 8px; padding-block: 6px; font-size: 13px; line-height: 1.35; }
	.jn-alert__where { max-width: none; }
	.jn-alert__what { flex: 1 1 100%; overflow: visible; }
	.jn-alert__eta { margin-left: 0; padding-left: 0; flex: 1 1 100%; font-size: 12px; }
	.jn-alert__count { display: none; }
	.jn-alert__nav, .jn-alert__x { width: 40px; height: 40px; }
}

/* ---------- v1.3 bell ---------- */
.jn-header__inner { position: relative; }
.jn-bell { position: relative; margin-left: auto; }
@media (min-width: 1024px) {
	.jn-header__inner > .jn-brand { order: 1; }
	.jn-nav { order: 2; }
	.jn-bell { order: 3; margin-left: 0; }
}
.jn-bell__btn {
	position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	border: 1.5px solid #2A4A70; border-radius: 12px; background: transparent; color: #fff; cursor: pointer;
}
.jn-bell__btn:hover { border-color: #fff; }
.jn-bell__btn.has-alert { border-color: #EF4444; }
.jn-bell__btn.is-pop { animation: jnBellPop .7s ease; }
@keyframes jnBellPop { 0%, 100% { transform: none; } 20% { transform: rotate(-14deg) scale(1.08); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
.jn-bell__badge {
	position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
	background: #EF4444; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
	border: 2px solid var(--jn-navy);
}
.jn-bell__badge[hidden] { display: none; }
.jn-bell__panel {
	position: absolute; right: 0; top: calc(100% + 12px); z-index: 200; width: 380px; max-height: min(70vh, 560px); overflow: auto;
	background: #fff; color: var(--jn-ink); border-radius: 18px; box-shadow: 0 24px 60px rgba(7, 19, 31, .3); border: 1px solid var(--jn-line);
	animation: jnSlideDown .2s ease both;
}
.jn-bell__head { position: sticky; top: 0; background: #fff; display: flex; align-items: center; gap: 10px; padding: 14px 12px 12px 18px; border-bottom: 1px solid var(--jn-line); }
.jn-bell__head strong { font-size: 16px; flex: 1; }
.jn-bell__head a { font-size: 13px; font-weight: 700; }
.jn-bell__close { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--jn-grey); color: var(--jn-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.jn-bell__list { list-style: none; margin: 0; padding: 6px 0; }
.jn-bell__item { display: flex; gap: 12px; padding: 12px 18px; border-left: 3px solid transparent; }
.jn-bell__item + .jn-bell__item { border-top: 1px solid #F1F4F8; }
.jn-bell__item.is-new { background: #FFFBF2; }
.jn-bell__item--outage { border-left-color: #EF4444; }
.jn-bell__item--maintenance { border-left-color: #F59E0B; }
.jn-bell__item--info { border-left-color: var(--jn-blue); }
.jn-bell__item--resolved { border-left-color: #22C55E; opacity: .85; }
.jn-bell__emoji { font-size: 20px; line-height: 1.2; }
.jn-bell__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jn-bell__body p { margin: 0; }
.jn-bell__top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--jn-muted-2); }
.jn-bell__top .jn-chip-s { background: var(--jn-grey); color: var(--jn-ink); }
.jn-bell__mine { background: var(--jn-navy); color: #fff; padding: 2px 8px; border-radius: 999px; letter-spacing: 0; text-transform: none; }
.jn-bell__title { font-weight: 700; font-size: 15px; line-height: 1.35; }
.jn-bell__where { font-size: 13px; color: var(--jn-muted); }
.jn-bell__eta { font-size: 13px; font-weight: 600; }
.jn-bell__msg { font-size: 13px; color: var(--jn-text); }
.jn-bell__empty { display: flex; align-items: center; gap: 10px; padding: 22px 18px; color: var(--jn-muted); font-weight: 600; }
.jn-bell__okdot { width: 10px; height: 10px; border-radius: 50%; background: #22C55E; }
.jn-bell__backdrop { display: none; }
@media (max-width: 767px) {
	.jn-bell__btn { width: 48px; height: 48px; }
	.jn-bell { margin-right: 4px; }
	.jn-bell__panel {
		position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 78vh; z-index: 300;
		border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: jnSheetUp .28s cubic-bezier(.2, .9, .3, 1) both;
	}
	.jn-bell__head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 999px; background: var(--jn-line-2); }
	.jn-bell__head { padding-top: 18px; }
	.jn-bell__backdrop { display: block; position: fixed; inset: 0; z-index: 250; background: rgba(7, 19, 31, .5); animation: jnFade .2s ease both; }
	.jn-bell__backdrop[hidden] { display: none; }
	body.jn-bell-open { overflow: hidden; }
}
@keyframes jnSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes jnFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .jn-alert__dot::after, .jn-bell__btn.is-pop { animation: none !important; } }
body.jn-bell-open .jn-header { z-index: 400; }
.jn-alerts .jn-alert { padding: 0; margin: 0; border-radius: 0; font-size: inherit; font-weight: inherit; }

/* ==========================================================
   v1.4 — payments, tax badge
   ========================================================== */
.jn-taxchip { display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 0; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--jn-green-bg); color: var(--jn-green); font-size: 12px; font-weight: 700; }
.jn-pkg--featured .jn-taxchip, .jn-taxchip--dark { background: rgba(61, 220, 132, .14); color: #7EE2A8; }
.jn-taxnote { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--jn-green-bg); color: #14532D; font-size: 15px; }
.jn-taxnote .jn-icon { color: var(--jn-green); margin-top: 2px; }

.jn-pay { display: flex; flex-direction: column; gap: 28px; font-size: 16px; line-height: 1.55; }
.jn-pay__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.jn-pay__steps li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--jn-grey); font-weight: 600; font-size: 15px; }
.jn-pay__steps span { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--jn-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.jn-pay__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.jn-paycard { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #DCE3EC; box-shadow: 0 8px 24px rgba(11, 27, 46, .05); }
.jn-paycard__head { display: flex; align-items: center; gap: 14px; }
.jn-paycard__head h3 { margin: 0; font-size: 18px; font-weight: 800; }
.jn-paycard__head p { margin: 0; font-size: 13px; color: var(--jn-muted-2); }
.jn-paycard__logos { display: flex; flex-direction: column; gap: 4px; }
.jn-paycard__logo { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 44px; padding: 0 10px; border-radius: 12px; font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.jn-paycard__logos .jn-paycard__logo { height: 26px; min-width: 92px; font-size: 13px; border-radius: 8px; }
.jn-paycard__logo--bank { background: #006A4E; color: #fff; }
.jn-paycard__logo--jc { background: #FFF2E0; color: #C2410C; }
.jn-paycard__logo--jc b { color: #B91C1C; }
.jn-paycard__logo--ep { background: #E8F7EE; color: #15803D; font-weight: 700; }
.jn-paycard__logo--ep b { color: #0F5132; }
.jn-paycard__logo--office { background: var(--jn-soon-bg); color: var(--jn-navy); }
.jn-paycard__rows { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.jn-paycard__rows > div { display: flex; flex-direction: column; gap: 4px; }
.jn-paycard__rows dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--jn-muted-2); }
.jn-paycard__rows dd { margin: 0; }
.jn-paycard__plain { font-weight: 700; font-size: 17px; }
.jn-paycard__how, .jn-paycard__addr { margin: 0; font-size: 14px; color: var(--jn-muted); }
.jn-paycard__addr { font-weight: 600; color: var(--jn-ink); font-size: 15px; }
.jn-copy {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 8px 8px 8px 14px;
	border: 1.5px solid var(--jn-line-2); border-radius: 12px; background: var(--jn-grey); cursor: pointer; font: inherit; color: var(--jn-ink); text-align: left;
	transition: border-color .15s ease, background-color .15s ease;
}
.jn-copy:hover { border-color: var(--jn-navy); }
.jn-copy__val { font-size: 18px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; word-break: break-all; }
.jn-copy__btn { flex: none; padding: 7px 12px; border-radius: 8px; background: var(--jn-navy); color: #fff; font-size: 13px; font-weight: 700; }
.jn-copy.is-copied { border-color: var(--jn-green); background: var(--jn-green-bg); }
.jn-copy.is-copied .jn-copy__btn { background: var(--jn-green); }
.jn-paid { display: grid; gap: 20px; align-items: start; padding: 24px; border-radius: 22px; background: var(--jn-navy); scroll-margin-top: 96px; }
@media (min-width: 1024px) { .jn-paid { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); padding: 32px; gap: 32px; } }
.jn-paid__intro .jn-h3 { margin: 0 0 8px; color: #fff; font-size: 24px; }
.jn-paid__intro .jn-small { color: var(--jn-on-dark); font-size: 15px; }
.jn-form-card--pay { box-shadow: none; }
.jn-field__legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.jn-pay__fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.jn-pay .jn-form-done__body h3 { margin: 0; }
.jn-prose .jn-pay__steps, .jn-prose .jn-paycard__rows { padding-left: 0; }
.jn-prose .jn-pay > *, .jn-prose .jn-paycard > * { margin-block: 0; }

/* ==========================================================
   v1.5 — live coverage cloud
   ========================================================== */
.jn-section--net { background: linear-gradient(180deg, #fff 0, #fff 40%, var(--jn-grey) 40%); }
.jn-section--net-page { padding-top: 40px; }
.jn-net__areas { margin-top: 48px; }
.jn-net__note { margin-top: 14px; text-align: center; }
.jn-netmap {
	position: relative; border-radius: 28px; overflow: hidden; background: #0A1626; isolation: isolate;
	box-shadow: 0 30px 80px rgba(7, 19, 31, .28), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.jn-netmap__map { height: 600px; background: #0A1626; z-index: 0; }
.jn-netmap__fade { position: absolute; inset: 0 auto 0 0; width: 46%; z-index: 401; pointer-events: none; background: linear-gradient(90deg, rgba(10, 22, 38, .92) 0%, rgba(10, 22, 38, .55) 55%, rgba(10, 22, 38, 0) 100%); }
.jn-netmap .leaflet-container { background: #0A1626; font-family: var(--jn-font); }
.jn-cloud, .jn-pulses { pointer-events: none; }
.jn-cloud { transition: opacity .25s ease; mix-blend-mode: screen; }
.jn-pulses { position: absolute; inset: 0; z-index: 410; mix-blend-mode: screen; }
.jn-netmap .leaflet-control-zoom { border: 0 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .35) !important; margin: 16px !important; }
.jn-netmap .leaflet-control-zoom a { background: rgba(18, 38, 63, .92); color: #fff; border-color: #22406A; width: 36px; height: 36px; line-height: 36px; }
.jn-netmap .leaflet-control-zoom a:hover { background: #1C3A60; color: #fff; }
.jn-netmap .leaflet-control-attribution { background: rgba(10, 22, 38, .7) !important; color: #7C8DA3; font-size: 10px; }
.jn-netmap .leaflet-control-attribution a { color: #A9BACD; }

/* Floating info panel */
.jn-netmap__panel {
	position: absolute; z-index: 420; top: 28px; left: 28px; width: min(380px, calc(100% - 56px));
	display: flex; flex-direction: column; gap: 14px; color: #fff;
}
.jn-netmap__title { margin: 0; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }
.jn-netmap__stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jn-netmap__stats li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(18, 38, 63, .75); border: 1px solid rgba(245, 165, 36, .35); font-size: 14px; font-weight: 700; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.jn-netmap__stats li.is-soon { border-style: dashed; color: #E6ECF3; font-weight: 600; }
.jn-netmap__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jn-accent); box-shadow: 0 0 10px 2px rgba(245, 165, 36, .8); }
.is-soon .jn-netmap__dot { background: transparent; border: 1.5px dashed var(--jn-accent); box-shadow: none; }
.jn-netmap__locate {
	display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; min-height: 60px; align-self: flex-start;
	border: 0; border-radius: 16px; background: var(--jn-accent); color: var(--jn-navy); cursor: pointer; font: inherit; text-align: left;
	box-shadow: 0 12px 30px rgba(245, 165, 36, .35); transition: transform .15s ease, box-shadow .15s ease;
}
.jn-netmap__locate:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(245, 165, 36, .45); }
.jn-netmap__locate[disabled] { opacity: .75; cursor: progress; }
.jn-netmap__locate span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.jn-netmap__locate strong { font-size: 17px; }
.jn-netmap__locate small { font-size: 13px; font-weight: 600; opacity: .8; }
.jn-netmap__locate-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--jn-navy); color: var(--jn-accent); display: flex; align-items: center; justify-content: center; }
.jn-netmap__result { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: rgba(18, 38, 63, .92); border: 1px solid #22406A; font-size: 14px; color: #C2CFDD; backdrop-filter: blur(8px); animation: jnSlideDown .3s ease both; }
.jn-netmap__result strong { font-size: 17px; color: #fff; }
.jn-netmap__result.is-live { border-color: rgba(61, 220, 132, .6); }
.jn-netmap__result.is-live strong { color: #6EE7A0; }
.jn-netmap__result.is-near { border-color: rgba(245, 165, 36, .6); }
.jn-netmap__result.is-near strong { color: var(--jn-accent); }
.jn-netmap__result .jn-btn { margin-top: 6px; min-height: 44px; padding: 10px 16px; font-size: 15px; }

/* Legend + explore */
.jn-netmap__legend { position: absolute; z-index: 420; left: 28px; bottom: 22px; list-style: none; margin: 0; padding: 8px 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; border-radius: 12px; background: rgba(10, 22, 38, .78); color: #C2CFDD; font-size: 12px; font-weight: 600; backdrop-filter: blur(6px); }
.jn-netmap__legend li { display: inline-flex; align-items: center; gap: 7px; }
.jn-lg { width: 12px; height: 12px; border-radius: 50%; }
.jn-lg--live { background: radial-gradient(circle, #FFE2A8 0 20%, rgba(245, 165, 36, .9) 21%, rgba(245, 165, 36, 0) 75%); box-shadow: 0 0 8px rgba(245, 165, 36, .8); }
.jn-lg--soon { border: 1.5px dashed var(--jn-accent); }
.jn-lg--issue { background: #EF4444; box-shadow: 0 0 8px rgba(239, 68, 68, .9); }
.jn-lg--you { background: #3B82F6; border: 2px solid #fff; }
.jn-netmap__explore { position: absolute; z-index: 420; right: 16px; bottom: 16px; min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid #22406A; background: rgba(18, 38, 63, .92); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.jn-netmap__explore[hidden] { display: none; }
.jn-netmap.is-exploring .jn-netmap__explore { background: var(--jn-accent); color: var(--jn-navy); border-color: var(--jn-accent); }
.jn-netmap__noscript { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; z-index: 500; }

/* Popup card, tooltip, labels, "you" marker */
.jn-mappop .leaflet-popup-content-wrapper { background: #0F2238; color: #fff; border-radius: 16px; border: 1px solid #2A4A70; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.jn-mappop .leaflet-popup-tip { background: #0F2238; border: 1px solid #2A4A70; }
.jn-mappop .leaflet-popup-content { margin: 16px 18px; min-width: 210px; }
.jn-mappop a.leaflet-popup-close-button { color: #A9BACD; width: 32px; height: 32px; font-size: 22px; line-height: 30px; }
.jn-mapcard { display: flex; flex-direction: column; gap: 6px; font-family: var(--jn-font); }
.jn-mapcard__state { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: rgba(61, 220, 132, .15); color: #6EE7A0; }
.jn-mapcard__state.is-soon { background: rgba(245, 165, 36, .15); color: var(--jn-accent); }
.jn-mapcard__state.is-issue { background: rgba(239, 68, 68, .18); color: #FCA5A5; }
.jn-mapcard__state.is-maint { background: rgba(217, 119, 6, .2); color: #FCD34D; }
.jn-mapcard__name { font-size: 18px; font-weight: 800; }
.jn-mapcard__price, .jn-mapcard__issue, .jn-mapcard__extra { margin: 0 !important; font-size: 14px; color: #C2CFDD; }
.jn-mapcard__issue { color: #FCA5A5; font-weight: 600; }
.jn-mapcard__actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.jn-mapcard__go { min-height: 40px; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--jn-accent); color: var(--jn-navy); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.jn-mapcard__more { color: #A9BACD !important; font-size: 13px; font-weight: 700; }
.jn-maptip { background: #0F2238; color: #fff; border: 1px solid #2A4A70; border-radius: 8px; font-weight: 700; font-family: var(--jn-font); box-shadow: none; }
.jn-maptip::before { display: none; }
.jn-maplabel span { display: inline-block; transform: translate(-50%, 10px); white-space: nowrap; font: 700 12px/1 var(--jn-font); color: #FFE2A8; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); pointer-events: none; }
.jn-me span { position: absolute; inset: 3px; border-radius: 50%; background: #3B82F6; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(59, 130, 246, .7); animation: jnMe 1.8s infinite; }
@keyframes jnMe { 70% { box-shadow: 0 0 0 16px rgba(59, 130, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } }

@media (max-width: 767px) {
	.jn-netmap { border-radius: 22px; display: flex; flex-direction: column; }
	.jn-netmap__map { height: 420px; order: 2; }
	.jn-netmap__fade { display: none; }
	.jn-netmap__panel { position: static; width: auto; order: 1; padding: 22px 18px 16px; background: linear-gradient(180deg, #0F2238, #0A1626); }
	.jn-netmap__legend { left: 12px; bottom: 12px; right: 120px; font-size: 11px; gap: 4px 10px; padding: 6px 10px; }
	.jn-netmap__explore { right: 12px; bottom: 12px; }
	.jn-netmap__map { position: relative; }
	.jn-netmap.is-exploring .leaflet-popup-pane, .jn-netmap .leaflet-popup-pane { z-index: 700; }
	.jn-netmap .leaflet-control-zoom { display: none; }
	.jn-netmap.is-exploring .leaflet-control-zoom { display: block; }
}
@media (min-width: 768px) and (max-width: 1023px) { .jn-netmap__map { height: 540px; } .jn-netmap__fade { width: 60%; } }
@media (prefers-reduced-motion: reduce) { .jn-me span { animation: none; } }

/* Darkened OpenStreetMap tiles (no API key needed) */
.jn-netmap.is-osm .leaflet-tile-pane { filter: invert(1) hue-rotate(195deg) brightness(.72) contrast(.92) saturate(.35); }
.jn-section--net .jn-chip { background: #fff; border-color: #DCE3EC; }
.jn-section--net .jn-chip:hover { border-color: var(--jn-navy); }
.jn-net__areas .jn-section__head { margin-bottom: 24px; }