/* Mac5G.net — colors come from Brandon's globe logo: white pages, black trim (header and footer, where the logo lives),
   the logo's blue for actions and its cyan glow for accents. Layout after the cable-company sites people already know
   how to use: segment bar, dropdown nav, address-first, rounded split panels. Fonts are self-hosted (Fredoka display,
   Figtree text). */
@font-face { font-family: "Fredoka"; src: url(../fonts/Fredoka-var.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(../fonts/Figtree-var.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --white: #FFFFFF;
  --black: #000000;
  --tint: #F3F6FB;
  --tint-2: #E6EDF8;
  --blue: #0060F0;        /* the "5g" in the logo */
  --blue-600: #0052D6;
  --blue-700: #0047C4;    /* blue for small text on white */
  --blue-800: #00358F;
  --blue-50: #EEF4FF;
  --cyan: #18C0FC;        /* the logo's signal arcs and glow: accents, never small text on white */
  --cyan-50: #EAF8FE;
  --cyan-line: #BDE6FA;
  --night: #04122B;       /* the globe's navy */
  --ink: #0A0F1A;
  --ink-2: #2A3445;
  --muted: #526073;
  --line: #DEE4ED;
  --line-2: #C7D0DD;
  --on-dark: #C3CCDA;
  --ok: #1F7A3A;
  --warn: #D99A00;
  --warn-50: #FFF4D6;
  --warn-ink: #6E4A00;
  --bad: #B3261E;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(13, 13, 13, .05), 0 10px 30px rgba(13, 13, 13, .07);
  --shadow-lg: 0 2px 6px rgba(13, 13, 13, .06), 0 24px 60px rgba(13, 13, 13, .12);
  --display: "Fredoka", "Figtree", system-ui, sans-serif;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.06; letter-spacing: -.01em; margin: 0 0 .4em; color: var(--ink); }
h1 { font-size: clamp(40px, 5.6vw, 76px); font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: clamp(30px, 3.4vw, 46px); }
h3 { font-size: 24px; }
p { margin: 0 0 1em; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 700; }
.skip:focus { top: 10px; }
:root { --focus: var(--blue); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
/* a heading that script moves focus to (a new step, a confirmation) is announced, not operated: no ring on it */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: 0; }
.site-head, .site-foot, .split-dark, .band-cta, .split-blue, .dd-promo, .medal { --focus: var(--cyan); }
.band-cta, .split-blue { --focus: #fff; }
.hl { color: var(--blue); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hl { background: linear-gradient(95deg, #0047D6 0%, #0060F0 45%, #1590F0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.eyebrow { font: 800 13px/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 18px; }
.lede { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; color: var(--ink-2); max-width: 640px; }
.fine { font-size: 13px; line-height: 1.5; color: var(--muted); }
.section { padding: 88px 0; }
.section-sm { padding: 56px 0; }
.section-mist { background: var(--tint); }
.center { text-align: center; }
.stack > * + * { margin-top: 16px; }

/* ---------- buttons ---------- */
.pill { --pbg: var(--blue); --pfg: #fff; --pbd: var(--blue); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2px solid var(--pbd); background: var(--pbg); color: var(--pfg); font: 700 17px/1 var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .18s, box-shadow .18s, transform .18s, border-color .18s; }
.pill:hover { box-shadow: 0 0 0 4px rgba(0, 96, 240, .22); transform: translateY(-1px); }
.pill:active { transform: none; }
.pill-primary { --pbg: var(--blue); --pfg: #fff; --pbd: var(--blue); }
.pill-primary:hover { --pbg: var(--blue-600); }
.pill-dark { --pbg: var(--black); --pfg: #fff; --pbd: var(--black); }
.pill-dark:hover { --pbd: var(--cyan); }
.pill-light { --pbg: #fff; --pfg: var(--ink); --pbd: #fff; }
.pill-outline { --pbg: transparent; --pfg: var(--ink); --pbd: var(--ink); }
.pill-outline:hover { --pbg: var(--tint); }
.pill-block { display: flex; width: 100%; }
.pill-sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.pill[disabled], .pill[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.tlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blue-700); text-decoration: none; border-bottom: 2px solid var(--cyan); padding-bottom: 1px; }
.tlink .i { width: 18px; height: 18px; }
.tlink:hover { color: var(--ink); }

/* ---------- header: black, because the logo is made for black ----------
   Desktop: the logo spans both rows (segment bar + main nav). Once the segment row scrolls away the header sticks and
   the logo eases down to fit the one row left. Without JS the header simply scrolls with the page. */
:root { --top-h: 38px; --main-h: 78px; }
.site-head { position: relative; z-index: 50; background: var(--black); color: #fff; }
.js .site-head { position: sticky; top: calc(-1 * var(--top-h)); }
.head-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: var(--top-h); pointer-events: none; }
.head-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: var(--top-h) var(--main-h); grid-template-areas: "brand top" "brand main"; column-gap: 36px; }
.brand { grid-area: brand; align-self: center; display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.brand picture { display: block; line-height: 0; }
.logo-img { display: block; height: 100px; width: auto; }
/* The logo's starfield is near-black at the sides and bottom but navy along its top edge; the top 3.5% fades into the
   black so the art sits on the header without a box line. The image file itself is untouched (crop + resize only). */
.logo-img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3.5%); mask-image: linear-gradient(to bottom, transparent 0, #000 3.5%); }
.site-head .logo-img { transform-origin: 0 50%; transition: transform .28s ease; }
.site-head.stuck .logo-img { transform: translateY(calc(var(--top-h) / 2)) scale(.66); }
.head-top { grid-area: top; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 13.5px; border-bottom: 1px solid rgba(255, 255, 255, .12); min-width: 0; }
.segs { display: flex; gap: 10px; align-items: center; color: rgba(255, 255, 255, .32); }
.segs a, .topbar-r a { color: var(--on-dark); text-decoration: none; display: inline-flex; align-items: center; height: var(--top-h); padding: 0; }
.segs a.on { font-weight: 800; color: #fff; box-shadow: inset 0 -2px 0 var(--cyan); }
.segs a:hover, .topbar-r a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.topbar-r { display: flex; gap: 22px; }
.head-main { grid-area: main; display: flex; align-items: center; gap: 20px; min-width: 0; }
.mainnav { flex: 1; min-width: 0; }
.mainnav > ul { display: flex; gap: 2px; list-style: none; margin: 0 0 0 -12px; padding: 0; }
.nav-item { position: static; }
.nav-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 12px 12px; font: 600 17px/1 var(--text); color: #fff; cursor: pointer; border-radius: 10px; position: relative; }
.nav-btn .chev { width: 18px; height: 18px; transition: transform .2s; opacity: .8; }
.nav-btn:hover, .nav-item.open .nav-btn { background: rgba(255, 255, 255, .12); }
.nav-item.on .nav-btn::after { content: ""; position: absolute; left: 12px; right: 30px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--cyan); box-shadow: 0 0 10px rgba(24, 192, 252, .6); }
.nav-item.open .chev { transform: rotate(180deg); }
.dd { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: var(--ink); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .3); display: none; --focus: var(--blue); }
.nav-item.open .dd { display: block; }
.dd-in { max-width: var(--wrap); margin: 0 auto; padding: 30px 24px 36px; display: flex; gap: 56px; }
.dd-col { min-width: 220px; }
.dd-h { font: 800 12px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.dd ul { list-style: none; margin: 0; padding: 0; }
.dd li a { display: block; padding: 9px 0; text-decoration: none; font-weight: 600; font-size: 17px; }
.dd li a:hover { color: var(--blue-700); text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 4px; }
.dd-promo { margin-left: auto; width: 320px; border-radius: var(--radius-sm); background: radial-gradient(120% 130% at 100% 0%, rgba(24, 192, 252, .38), rgba(24, 192, 252, 0) 55%), linear-gradient(150deg, #000 0%, var(--night) 100%); color: #fff; padding: 24px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.dd-promo b { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.1; }
.dd-promo span { color: var(--on-dark); }
.dd-promo em { font-style: normal; font-weight: 800; margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--cyan); }
.dd-promo em .i { width: 18px; height: 18px; }
.head-icons { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ico-btn { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 0; background: none; color: var(--ink); cursor: pointer; text-decoration: none; }
.ico-btn:hover { background: var(--tint); }
.site-head .ico-btn, .drawer-top .ico-btn { color: #fff; }
.site-head .ico-btn:hover, .drawer-top .ico-btn:hover { background: rgba(255, 255, 255, .12); }
.ico-btn .i { width: 26px; height: 26px; }
.cart-n { position: absolute; top: 4px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--cyan); color: #000; font: 800 12px/20px var(--text); text-align: center; border: 2px solid #000; }
.acct { position: relative; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 280px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 18px; display: none; flex-direction: column; gap: 4px; --focus: var(--blue); }
.acct.open .acct-menu { display: flex; }
.acct-menu p { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.acct-menu a:not(.pill) { padding: 9px 2px; font-weight: 600; text-decoration: none; border-top: 1px solid var(--line); }
.acct-menu a:not(.pill):first-of-type { margin-top: 12px; }
.acct-menu a:not(.pill):hover { color: var(--blue-700); }
.menu-btn { display: none; }
.stripe { height: 3px; background: linear-gradient(90deg, #0038C8 0%, var(--blue) 40%, var(--cyan) 100%); box-shadow: 0 1px 10px rgba(24, 192, 252, .35); }

/* mobile drawer + search */
.drawer { position: fixed; inset: 0; z-index: 80; background: rgba(13, 13, 13, .45); }
.drawer-in { position: absolute; inset: 0 0 0 auto; width: min(420px, 100%); background: #fff; overflow: auto; padding: 16px 20px 28px; display: flex; flex-direction: column; }
.drawer-top { position: sticky; top: -16px; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin: -16px -20px 8px; padding: 8px 12px 8px 16px; background: var(--black); --focus: var(--cyan); }
.drawer-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, #0038C8 0%, var(--blue) 40%, var(--cyan) 100%); }
.drawer-top .logo-img { height: 56px; }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 2px; font: 600 20px/1 var(--display); cursor: pointer; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer details[open] .chev { transform: rotate(180deg); }
.drawer ul { list-style: none; margin: 0 0 12px; padding: 0; }
.drawer li a { display: block; padding: 11px 4px; text-decoration: none; font-weight: 600; color: var(--ink-2); }
.drawer-cta { margin-top: auto; padding-top: 24px; display: grid; gap: 12px; }
.search { position: fixed; inset: 0; z-index: 90; background: rgba(13, 13, 13, .45); }
.search-in { background: #fff; padding-top: 24px; padding-bottom: 28px; border-radius: 0 0 var(--radius) var(--radius); max-width: none; }
.search-form { max-width: 820px; margin: 0 auto; display: flex; align-items: center; gap: 12px; border: 2px solid var(--ink); border-radius: 999px; padding: 6px 8px 6px 20px; }
.search-form input { flex: 1; border: 0; outline: 0; font-size: 19px; padding: 10px 0; min-width: 0; background: none; }
.search-out { max-width: 820px; margin: 18px auto 0; display: grid; gap: 4px; }
.search-out a { display: flex; flex-direction: column; padding: 12px 16px; border-radius: 12px; text-decoration: none; }
.search-out a:hover, .search-out a:focus { background: var(--tint); }
.search-out b { font-size: 17px; }
.search-out span { font-size: 14px; color: var(--muted); }

/* ---------- announcement ---------- */
.notice { margin: 36px auto 0; }
.notice-in { display: flex; align-items: center; gap: 22px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 30px; }
.notice-in .i { width: 44px; height: 44px; color: var(--blue-700); }
.notice-in p { margin: 0; flex: 1; font-size: 17px; }
.notice-in a { font-weight: 800; color: var(--blue-700); white-space: nowrap; text-decoration: none; border-bottom: 2px solid var(--cyan); }

/* ---------- hero ---------- */
.hero { padding: 56px 0 24px; }
.hero-in { display: grid; grid-template-columns: 1.08fr 1fr; gap: 64px; align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 30px; }
.hero-media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1; background: var(--tint); box-shadow: var(--shadow); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-fine { margin-top: 26px; }
.price-chip { position: absolute; left: 22px; bottom: 22px; background: #fff; border-radius: 18px; padding: 14px 18px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); }
.price-chip small { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.price-chip .price { font-size: 38px; }
.price-chip span.note { font-size: 13px; color: var(--muted); }

/* price tag */
.price { display: inline-flex; align-items: flex-start; font-family: var(--display); font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--ink); font-size: 50px; }
.price .p-cur { font-size: .5em; margin: .12em .03em 0 0; }
.price .p-c { font-size: .46em; margin: .1em 0 0 .02em; }
.price .p-per { font-size: .34em; font-family: var(--text); font-weight: 700; color: var(--muted); align-self: flex-end; margin: 0 0 .28em .25em; letter-spacing: 0; }

/* ---------- address bar (pill) ---------- */
.addr { text-align: center; }
.addr-lead { font-size: 18px; font-weight: 600; margin: 0 0 18px; }
.addr-lead a { color: var(--blue-700); text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 4px; }
.addr-bar { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; background: #F2F4F8; border: 1px solid var(--line); border-radius: 999px; padding: 8px 8px 8px 22px; }
.addr-bar:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(0, 96, 240, .18); background: #fff; }
.addr-pin { width: 28px; height: 28px; color: var(--blue-700); }
.addr-bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 17px; padding: 10px 4px; }
.addr-bar input::placeholder { color: #5A6679; }
.addr-dark .addr-bar { background: #fff; border-color: #fff; --focus: var(--blue); }
.addr-dark .addr-bar:focus-within { box-shadow: 0 0 0 4px rgba(255, 255, 255, .45); }
.addr-dark .pill-primary { --pbg: var(--black); --pbd: var(--black); }
.addr-dark .pill-primary:hover { --pbg: #1A2130; box-shadow: 0 0 0 4px rgba(255, 255, 255, .4); }
.addr-section { padding: 40px 0 16px; }

/* ---------- icon row ---------- */
.find { padding: 64px 0 24px; }
.find h2 { margin-bottom: 36px; }
.iconrow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.iconrow-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.iconrow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.iconrow a { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; text-decoration: none; padding: 14px 8px; border-radius: 16px; }
.iconrow a:hover { background: var(--tint); }
.iconrow-badge { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-700); box-shadow: inset 0 0 0 1px rgba(24, 192, 252, .55); }
.iconrow-badge .i { width: 30px; height: 30px; }
.iconrow-t { font-weight: 700; text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 5px; text-decoration-thickness: 2px; line-height: 1.3; }

/* ---------- split panels ---------- */
.splits { display: grid; gap: 32px; padding: 32px 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius); overflow: hidden; min-height: 460px; }
.split-rev .split-media { order: 2; }
.split-media { position: relative; background: var(--tint-2); }
.split-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.split-body { padding: 64px 64px; display: flex; flex-direction: column; justify-content: center; }
.split-body h2 { font-size: clamp(28px, 2.8vw, 40px); }
.split-text { font-size: 19px; line-height: 1.55; max-width: 520px; }
.split-dark { background: linear-gradient(160deg, #000 0%, var(--night) 100%); color: #fff; }
.split-dark h2 { color: #fff; }
.split-dark .split-text { color: #DCE3EE; }
.split-blue { background: var(--blue); color: #fff; }
.split-blue h2 { color: #fff; }
.split-blue .split-text { color: rgba(255, 255, 255, .94); }
.split-blue .split-text a { color: #fff; }
.split-blue .pill-outline { --pfg: #fff; --pbd: rgba(255, 255, 255, .85); }
.split-blue .pill-outline:hover { --pbg: rgba(255, 255, 255, .12); --pbd: #fff; }
.split-mist { background: var(--tint); border: 1px solid var(--line); }
.split-cyan { background: var(--cyan-50); border: 1px solid var(--cyan-line); }
.chip { display: inline-block; align-self: flex-start; font: 800 12px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: #fff; color: var(--ink); margin: 0 0 18px; box-shadow: inset 0 0 0 1px var(--line); }
.split-dark .chip { background: transparent; color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(24, 192, 252, .6); }
.split-blue .chip { background: #fff; color: var(--blue-700); box-shadow: none; }
.medal { position: absolute; right: 26px; top: 26px; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 35% 28%, #1C2638 0%, #000 64%); box-shadow: 0 12px 30px rgba(0, 0, 0, .35), inset 0 0 0 5px var(--blue), inset 0 0 0 8px rgba(24, 192, 252, .55); color: #fff; z-index: 2; }
.medal b { display: block; font: 700 44px/1 var(--display); letter-spacing: -.02em; }
.medal span { display: block; font: 800 11px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; color: var(--cyan); }

/* ---------- cards ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 36px 30px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: box-shadow .2s, border-color .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow-lg); border-color: var(--ink); transform: translateY(-2px); }
.card-badge { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-700); margin-bottom: 18px; box-shadow: inset 0 0 0 1px rgba(24, 192, 252, .55); }
.card-badge .i { width: 34px; height: 34px; }
.card-k { font: 800 12px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.card h3 { font-size: 28px; margin-bottom: 10px; }
.card .from { margin: 4px 0 22px; color: var(--ink-2); font-size: 18px; }
.card .from b { font: 600 30px/1 var(--display); color: var(--ink); }
.card .pill { margin-top: auto; }

/* ---------- plans ---------- */
.plans-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.toggles { display: flex; flex-wrap: wrap; gap: 12px; }
.tog { display: inline-flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 10px 18px 10px 12px; cursor: pointer; font-weight: 700; user-select: none; }
.tog small { font-weight: 700; color: var(--blue-700); margin-left: 4px; }
.tog input { position: absolute; opacity: 0; pointer-events: none; }
.tog-ui { width: 44px; height: 26px; border-radius: 13px; background: #D3DAE5; position: relative; transition: background .2s; flex: none; }
.tog-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.tog input:checked + .tog-ui { background: var(--blue); }
.tog input:checked + .tog-ui::after { transform: translateX(18px); }
.tog input:focus-visible + .tog-ui { outline: 3px solid var(--focus); outline-offset: 2px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plan { position: relative; background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 30px 28px 28px; display: flex; flex-direction: column; }
.plan-hot { border: 2px solid var(--black); box-shadow: 0 0 0 5px rgba(0, 96, 240, .14); }
.plan-flag { position: absolute; top: -15px; left: 26px; margin: 0; background: var(--black); color: #fff; font: 800 12px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; padding: 9px 14px 9px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
.plan-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.plan-label { font: 800 12px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); margin: 6px 0 10px; }
.plan h3 { font-size: 30px; margin-bottom: 4px; }
.plan-net { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.plan-price { margin-bottom: 4px; }
.plan-when { font-size: 14px; font-weight: 700; color: var(--ink-2); margin: 0 0 4px; }
.plan-was { font-size: 13px; color: var(--muted); margin: 0 0 20px; min-height: 1.5em; }
.plan-facts { list-style: none; margin: 0 0 16px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.plan-facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.4; }
.plan-facts .i { width: 22px; height: 22px; color: var(--blue-700); margin-top: 1px; }
.plan .pill { margin-top: auto; }
.ticks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.4; }
.ticks .i { width: 20px; height: 20px; color: var(--blue-700); margin-top: 1px; flex: none; }
.ticks-sm li { font-size: 14.5px; color: var(--ink-2); }
.fam-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.fam-tabs button { border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 700; cursor: pointer; }
.fam-tabs button[aria-pressed="true"] { background: var(--black); color: #fff; border-color: var(--black); }
.plan[hidden] { display: none; }

/* compare table */
.compare-wrap { overflow-x: auto; border: 1.5px solid var(--line-2); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.compare { border-collapse: collapse; width: 100%; min-width: 980px; font-size: 14.5px; }
.compare th, .compare td { padding: 13px 11px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { background: var(--tint); font: 600 17px/1.2 var(--display); position: sticky; top: 0; }
.compare tbody th { font-weight: 700; color: var(--ink-2); white-space: nowrap; background: #FAFBFD; position: sticky; left: 0; }
.compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }
.compare .num { font: 600 18px/1 var(--display); white-space: nowrap; }

/* ---------- products ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.prod { background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.prod:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.prod-img { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 60%, #fff 0%, var(--tint) 70%); display: grid; place-items: center; overflow: hidden; }
.prod-img img { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); object-fit: contain; filter: drop-shadow(0 16px 16px rgba(13, 13, 13, .16)); }
/* a white product shot on its own white background (the eero units): multiplied into the card, the white disappears and
   the product keeps its real edges and its own shadow — no cut-out to go wrong on white-on-white */
.prod-img img.on-white { mix-blend-mode: multiply; filter: none; }
.prod-ph { display: grid; place-items: center; gap: 10px; color: var(--blue-700); font-weight: 700; font-size: 14px; }
.prod-ph .i { width: 64px; height: 64px; }
.prod-body { padding: 24px 24px 22px; display: flex; flex-direction: column; flex: 1; }
.prod-tag { font: 800 12px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-700); margin: 0 0 8px; }
.prod h3 { font-size: 22px; line-height: 1.15; margin-bottom: 8px; }
.prod-blurb { font-size: 15px; color: var(--ink-2); }
.prod-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.prod-price { display: flex; flex-direction: column; }
.prod-price .price { font-size: 34px; }
.prod-note { font-size: 13px; color: var(--muted); }

/* ---------- feature strip / reasons ---------- */
.reasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.reason { padding: 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.reason .i { width: 36px; height: 36px; color: var(--blue-700); margin-bottom: 14px; }
.reason h3 { font-size: 21px; margin-bottom: 8px; }
.reason p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: s; }
.step { position: relative; padding: 30px 26px 26px; border-radius: var(--radius); background: #fff; border: 1.5px solid var(--line-2); }
.step::before { counter-increment: s; content: counter(s, decimal-leading-zero); display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--black); color: var(--cyan); font: 600 18px/1 var(--display); margin-bottom: 16px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue); }
.step h3 { font-size: 22px; }
.step p { margin: 0; color: var(--ink-2); font-size: 16px; }

/* ---------- FAQ ---------- */
.faq { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 4px; cursor: pointer; font: 600 20px/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq-plus { width: 26px; height: 26px; flex: none; color: var(--blue-700); transition: transform .2s; }
.faq details[open] .faq-plus { transform: rotate(45deg); }
.faq-a { padding: 0 4px 22px; color: var(--ink-2); font-size: 17px; max-width: 760px; }
.faq-a p:last-child { margin: 0; }

/* ---------- CTA band + footer ---------- */
.band-cta { background: radial-gradient(90% 160% at 100% 0%, rgba(24, 192, 252, .5) 0%, rgba(24, 192, 252, 0) 55%), linear-gradient(115deg, #0030B0 0%, var(--blue) 72%); color: #fff; position: relative; overflow: hidden; }
.band-cta-in { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.band-cta h2 { color: #fff; }
.band-cta p { color: rgba(255, 255, 255, .92); font-size: 18px; margin: 0; }
.band-cta .addr-bar { margin: 0; }
.site-foot { background: var(--black); color: var(--on-dark); font-size: 15px; }
.f-stripe { height: 3px; background: linear-gradient(90deg, var(--cyan) 0%, var(--blue) 60%, #0038C8 100%); }
.f-top { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding: 52px 0 36px; }
.f-brand .brand { display: block; }
.f-brand .logo-img { width: 250px; height: auto; margin-left: -4px; }
.f-tag { font: 700 12px/1.7 var(--text); letter-spacing: .22em; text-transform: uppercase; color: #fff; margin: 10px 0 22px; }
.f-tag span + br + span { color: var(--cyan); }   /* as in the logo: "Faster today." white, "Brighter tomorrow." blue */
.f-help { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--on-dark); }
.f-phone { color: #fff; font: 600 26px/1.2 var(--display); text-decoration: none; border-bottom: 3px solid var(--cyan); align-self: flex-start; margin-bottom: 6px; }
.f-phone:hover { color: var(--cyan); }
.f-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.f-h { color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 14px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.f-h::-webkit-details-marker { display: none; }
.f-h .chev { display: none; width: 20px; height: 20px; transition: transform .2s; }
@media (min-width: 721px) { .f-h { cursor: default; pointer-events: none; } }
.f-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.f-col a { color: var(--on-dark); text-decoration: none; }
.f-col a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 4px; }
.f-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 22px 0 36px; font-size: 13px; color: #9AA6B8; }
.f-bottom p { margin: 0 0 6px; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label, .field .lbl { font-weight: 700; font-size: 15px; }
.field input, .field select, .field textarea { width: 100%; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 13px 14px; background: #fff; font-size: 16px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(0, 96, 240, .18); }
.field.err input, .field.err select, .field.err textarea, input.err { border-color: var(--bad); }
.field small { color: var(--muted); font-size: 13px; }
.result { margin: 0; font-weight: 600; min-height: 1.5em; }
.result.ok { color: var(--ok); }
.result.bad { color: var(--bad); }
.panel { background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 32px; }
.panel-mist { background: var(--tint); border-color: var(--line); }
.opt { display: flex; gap: 14px; align-items: flex-start; border: 1.5px solid var(--line-2); border-radius: 16px; padding: 16px 18px; cursor: pointer; background: #fff; }
.opt:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(0, 96, 240, .16); }
.opt input { margin-top: 4px; accent-color: var(--blue-700); width: 18px; height: 18px; }
.opt b { display: block; }
.opt span { font-size: 14px; color: var(--muted); }
.opt .opt-p { margin-left: auto; font: 600 20px/1 var(--display); white-space: nowrap; }
.opts { display: grid; gap: 12px; }

/* ---------- page heads ---------- */
.pagehead { padding: 48px 0 40px; }
.pagehead-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.pagehead .hero-media { aspect-ratio: 4 / 3; }
.pagehead-plain { padding: 56px 0 24px; }
.crumbs ol { list-style: none; display: flex; gap: 8px; padding: 18px 0 0; margin: 0; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--line-2); }
.crumbs a { color: var(--muted); }

/* ---------- utilities ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.grid2-wide { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.kpis { display: flex; gap: 28px; flex-wrap: wrap; margin: 20px 0 0; padding: 0; list-style: none; }
.kpis li { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.kpis .i { width: 22px; height: 22px; color: var(--blue-700); }
.note-box { background: var(--cyan-50); border: 1px solid var(--cyan-line); border-radius: var(--radius-sm); padding: 16px 18px; font-size: 15px; }
.table-simple { width: 100%; border-collapse: collapse; }
.table-simple th, .table-simple td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.table-simple td.r, .table-simple th.r { text-align: right; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tagpill { display: inline-flex; align-items: center; gap: 6px; background: var(--tint); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 14px; }
.tagpill .i { width: 16px; height: 16px; color: var(--blue-700); }
[hidden] { display: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .site-head .logo-img { height: 88px; }
  .head-grid { column-gap: 24px; }
  .mainnav .nav-btn { padding: 12px 9px; font-size: 16px; }
  .mainnav > ul { margin-left: -9px; }
  .head-main { gap: 12px; }
  .f-cols { grid-template-columns: repeat(3, 1fr); }
  .iconrow { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  :root { --top-h: 34px; --main-h: 68px; }
  .head-grid { grid-template-areas: "top top" "brand main"; column-gap: 12px; }
  .site-head .logo-img { height: 58px; }
  .site-head.stuck .logo-img { transform: none; }
  .head-top { font-size: 13px; }
  .mainnav { display: none; }
  .menu-btn { display: inline-grid; }
  .hero-in, .pagehead-in { grid-template-columns: 1fr; gap: 36px; }
  .hero-media { aspect-ratio: 16 / 11; }
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split-media { aspect-ratio: 16 / 10; }
  .split-rev .split-media { order: 0; }
  .split-body { padding: 40px 32px 44px; }
  .plan-grid, .prod-grid, .cards3 { grid-template-columns: 1fr 1fr; }
  .reasons { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .band-cta-in { grid-template-columns: 1fr; gap: 28px; }
  .f-top { grid-template-columns: 1fr; gap: 40px; }
  .grid2, .grid2-wide { grid-template-columns: 1fr; }
  .dd-promo { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .topbar-r a:not(:first-child) { display: none; }
  .section { padding: 60px 0; }
  .hero { padding-top: 28px; }
  .notice-in { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; }
  .notice-in .i { width: 34px; height: 34px; }
  .plan-grid, .prod-grid, .cards3, .reasons { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 30px 20px 26px; }
  .card .pill, .bcard .pill, .offers-sum .pill { white-space: normal; text-align: center; line-height: 1.2; padding-top: 10px; padding-bottom: 10px; }
  .iconrow { grid-template-columns: repeat(2, 1fr); }
  .addr-bar { flex-wrap: wrap; border-radius: 24px; padding: 10px; }
  .addr-bar .addr-pin { display: none; }
  .addr-bar input { flex-basis: 100%; padding: 12px 12px; background: #fff; border-radius: 14px; border: 1px solid var(--line); }
  .addr-bar .pill { width: 100%; }
  .split-body { padding: 32px 22px 36px; }
  .medal { width: 116px; height: 116px; right: 16px; top: 16px; }
  .medal b { font-size: 34px; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .f-cols { grid-template-columns: 1fr 1fr; }
  .price-chip { left: 14px; bottom: 14px; padding: 10px 14px; }
  .price-chip .price { font-size: 30px; }
  .panel { padding: 22px; }
  .compare { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-head, .site-foot, .band-cta, .addr, .drawer, .search { display: none !important; }
}

/* ---------- page-specific ---------- */
.h1-sm { font-size: clamp(34px, 4vw, 54px); letter-spacing: -.02em; }   /* also on the H2s that stand in as step titles */
.pill-on-dark { --pfg: #fff; --pbd: rgba(255, 255, 255, .7); }
.pill-on-dark:hover { --pbg: rgba(255, 255, 255, .08); --pbd: #fff; }
.fams { display: grid; gap: 44px; }
.fam-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); position: relative; }
.fam-head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 72px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.fam-head h3 { font-size: 26px; margin: 0; }
.fam-head p { margin: 0; color: var(--muted); }
.plan-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* long plan names (Business Internet Plus) run to two lines on a 4-up grid: every card holds two lines so prices line up */
@media (min-width: 721px) { .plan-grid-long .plan h3 { min-height: 2.12em; } }
.plan-grid-4 .plan { padding: 26px 22px 24px; }
.plan-grid-4 .plan h3 { font-size: 26px; }
.plan-grid-4 .price { font-size: 44px; }
.plan-flash { animation: flash 1.6s ease 1; }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 96, 240, 0); } 30% { box-shadow: 0 0 0 8px rgba(24, 192, 252, .55); } }
.olist { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 10px; }
.olist li::marker { font-weight: 800; color: var(--blue); }
.avail-out { margin-top: 20px; }
.avail-card { border: 2px solid var(--line-2); border-radius: var(--radius-sm); padding: 22px; background: var(--tint); }
.avail-card.ok { border-color: var(--blue); background: var(--blue-50); }
.avail-card h3 { font-size: 22px; }
.avail-rows { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.avail-rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.st-pill { display: inline-block; font: 800 12px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; white-space: nowrap; }
.st-pill.ok { background: #DDF3E4; color: #145C2E; }
.st-pill.wait { background: var(--warn-50); color: var(--warn-ink); box-shadow: inset 0 0 0 1px #F0D9A0; }
.st-pill.no { background: #FBE7E5; color: #8E1D16; }
.deal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.deal { border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 30px 28px; display: flex; flex-direction: column; background: #fff; }
.deal .card-badge { margin-bottom: 14px; }
.deal h3 { font-size: 25px; }
.deal p { color: var(--ink-2); }
.deal-terms { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; }
.deal-terms summary { cursor: pointer; font-weight: 700; color: var(--blue-700); }
.deal-terms p { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
/* support → billing: the "Manage your billing" card holds a one-field form; the note for a billing link that did not work */
.bill-note { margin: 0 0 24px; }
.card .bill-form { align-self: stretch; margin-top: auto; gap: 12px; text-align: left; }
.card .bill-form .pill { margin-top: 0; }
.card .bill-form .result { text-align: center; }
/* availability → offers: the sister-company phone-line switch under the Internet heading (only while that offer is on) */
.offer-tog { margin: 0 0 16px; }
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.use { text-align: center; padding: 20px 12px; }
.use .card-badge { margin: 0 auto 14px; }
.use h3 { font-size: 22px; }
.use p { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.net-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.net-card { background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 24px 22px; display: flex; flex-direction: column; }
.net-card h3 { font-size: 24px; margin-bottom: 4px; }
.net-best { font: 800 12px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-700); margin: 0 0 12px; }
.net-card p { font-size: 15.5px; color: var(--ink-2); }
.net-card .from { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.net-card .from b { font: 600 26px/1 var(--display); color: var(--ink); }
.compare-iot { min-width: 760px; }
.compare-iot thead th small { display: block; font: 700 12px/1.3 var(--text); color: var(--muted); margin-top: 4px; letter-spacing: 0; }
.compare-iot td { font-size: 15px; }
.split-product .split-media { background: radial-gradient(circle at 50% 55%, #fff 0%, var(--tint) 65%); }
.split-product .split-media img { object-fit: contain; object-position: 50% 100%; padding: 32px 32px 0; filter: drop-shadow(0 20px 22px rgba(13, 13, 13, .22)); }
.rent { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; background: var(--cyan-50); border: 1px solid var(--cyan-line); border-radius: var(--radius); padding: 44px 48px; }
.rent h2 { margin-bottom: 10px; }
.reasons-3 { grid-template-columns: repeat(3, 1fr); }
.topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.topic { display: flex; flex-direction: column; gap: 6px; padding: 26px; border: 1.5px solid var(--line-2); border-radius: var(--radius); text-decoration: none; background: #fff; transition: box-shadow .2s, border-color .2s; }
.topic:hover { border-color: var(--ink); box-shadow: var(--shadow-lg); }
.topic .card-badge { width: 60px; height: 60px; margin-bottom: 8px; }
.topic .card-badge .i { width: 28px; height: 28px; }
.topic b { font: 600 22px/1.2 var(--display); }
.topic span { color: var(--muted); }
.big-phone { font: 600 32px/1.1 var(--display); color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--cyan); }
.legal { max-width: 820px; }
.legal h2 { font-size: 26px; margin-top: 36px; }
.legal p { color: var(--ink-2); }
.nf-code { font: 700 clamp(56px, 19vw, 120px)/1 var(--display); color: var(--blue-700); margin: 0 0 22px; overflow-wrap: anywhere; }
.speed { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.speed-dial { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.dial { position: relative; width: min(380px, 80vw); aspect-ratio: 1; }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial-track, .dial-bar { fill: none; stroke-width: 16; stroke-linecap: round; }
.dial-track { stroke: var(--tint-2); stroke-dasharray: 395.8 527.8; }
.dial-bar { stroke: var(--blue); transition: stroke-dashoffset .25s linear; }
.dial::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--cyan); pointer-events: none; opacity: .6; }
.dial-read { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.dial-read b { font: 600 72px/1 var(--display); letter-spacing: -.02em; }
.dial-read span { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-size: 14px; }
.sp-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 440px; margin: 0; }
.sp-results div { background: var(--tint); border-radius: 14px; padding: 14px; text-align: center; }
.sp-results dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sp-results dd { margin: 6px 0 0; font: 600 22px/1 var(--display); }
.cart-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; margin-top: 24px; }
.cline { display: grid; grid-template-columns: 84px 1fr auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cline:last-child { border-bottom: 0; }
.cline img { width: 84px; height: 84px; object-fit: contain; background: var(--tint); border-radius: 12px; padding: 6px; }
.cline-ph { width: 84px; height: 84px; background: var(--tint); border-radius: 12px; }
.cline-b b { display: block; font-size: 17px; }
.cline-b span { display: block; font-size: 14px; color: var(--muted); margin: 2px 0 10px; }
.cline-p { font: 600 22px/1 var(--display); white-space: nowrap; }
.qty { display: inline-flex; align-items: center; gap: 8px; }
.qty button:not(.rm) { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-2); background: #fff; font-weight: 800; cursor: pointer; }
.qty button:not(.rm):hover { border-color: var(--ink); }
.qty output { min-width: 22px; text-align: center; font-weight: 800; }
.qty .rm { background: none; border: 0; color: var(--blue-700); font-weight: 700; text-decoration: underline; text-decoration-color: var(--cyan); cursor: pointer; margin-left: 10px; }
.summary h3 { font-size: 24px; }
.sum { margin: 0 0 18px; display: grid; gap: 10px; }
.sum div { display: flex; justify-content: space-between; gap: 12px; }
.sum dt { color: var(--ink-2); }
.sum dd { margin: 0; font-weight: 700; }
.sum-total { border-top: 2px solid var(--ink); padding-top: 12px; margin-top: 4px; }
.sum-total dt, .sum-total dd { font: 600 22px/1.1 var(--display); color: var(--ink); }
.mini { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mini img { width: 56px; height: 56px; object-fit: contain; background: var(--tint); border-radius: 10px; padding: 4px; }
.mini div { flex: 1; }
.mini b { display: block; font-size: 15px; }
.mini small { color: var(--muted); }
.mini > span { font-weight: 700; }
.pay-frame { border: 1.5px solid var(--line-2); border-radius: 14px; padding: 16px; margin-bottom: 14px; min-height: 120px; }
#co-form section + section { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
#co-form h3 { font-size: 22px; }
.done { max-width: 640px; margin: 0 auto; }
.done .card-badge { margin: 0 auto 14px; }
.status-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.status-head h1 { margin: 0; }
.st-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--line-2); flex: none; box-shadow: 0 0 0 6px rgba(0, 96, 240, .16); }
.st-dot.ok { background: #3C8F3F; }
.st-dot.maint { background: var(--warn); box-shadow: 0 0 0 6px rgba(224, 161, 0, .25); }
.st-dot.bad { background: var(--bad); box-shadow: 0 0 0 6px rgba(179, 38, 30, .2); }
.st-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.st-row:last-child { border-bottom: 0; }
.st-row .fine { display: block; margin: 2px 0 0; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--shadow-lg); border-radius: 18px; padding: 12px 14px 12px 18px; display: flex; align-items: center; gap: 14px; z-index: 95; max-width: calc(100vw - 32px); transition: transform .25s ease; }
.toast.on { transform: translate(-50%, 0); }
.toast .pill { flex: none; }
.tagpick { cursor: pointer; position: relative; white-space: nowrap; padding: 9px 14px; font-size: 15px; background: #fff; border: 1.5px solid var(--line-2); transition: background .15s, color .15s, border-color .15s; }
.tagpick:hover { border-color: var(--ink); }
.tagpick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tagpick::before { content: ""; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-2); background: #fff; flex: none; }
.tagpick:has(input:checked) { background: var(--black); color: #fff; border-color: var(--black); }
.tagpick:has(input:checked)::before { background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--cyan); }
.tagpick:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 1024px) {
  .plan-grid-4, .net-grid, .uses, .deal-grid, .topic-grid { grid-template-columns: 1fr 1fr; }
  .rent, .speed, .cart-grid { grid-template-columns: minmax(0, 1fr); }
  .reasons-3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .plan-grid-4, .net-grid, .uses, .deal-grid, .topic-grid { grid-template-columns: 1fr; }
  .rent { padding: 28px 22px; }
  .cline { grid-template-columns: 64px 1fr; }
  .cline img, .cline-ph { width: 64px; height: 64px; }
  .cline-p { grid-column: 2; font-size: 19px; }
  .sp-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-results div { padding: 12px 6px; }
  .sp-results dd { font-size: 18px; }
  .dial-read b { font-size: 56px; }
  .toast { bottom: 14px; flex-wrap: wrap; }
}

/* equipment: sections with one or two products use the full width */
.prod-grid.n2 { grid-template-columns: repeat(2, 1fr); }
.prod-grid.n2 .prod-img { aspect-ratio: 16 / 10; }
.prod-grid.n1 { grid-template-columns: 1fr; }
.prod-grid.n1 .prod { display: grid; grid-template-columns: 1fr 1fr; }
.prod-grid.n1 .prod-img { aspect-ratio: auto; min-height: 380px; }
.prod-grid.n1 .prod-body { padding: 40px 44px; justify-content: center; }
.prod-grid.n1 .prod h3 { font-size: 30px; }
@media (max-width: 720px) { .prod-grid.n2, .prod-grid.n1 .prod { grid-template-columns: 1fr; } .prod-grid.n1 .prod-img { min-height: 0; aspect-ratio: 4 / 3; } .prod-grid.n1 .prod-body { padding: 24px; } }

@media (max-width: 380px) {
  .head-grid { column-gap: 8px; }
  .head-icons { gap: 0; }
  .ico-btn { width: 40px; height: 40px; }
  .ico-btn .i { width: 23px; height: 23px; }
  .site-head .logo-img { height: 52px; }
}


/* =====================================================================================================================
   Cox/Spectrum layout pieces: focused address flow, offers builder, bundles, mobile & TV pages, footer accordions
   ===================================================================================================================== */
.i.flip { transform: scaleX(-1); }
.h3 { font-size: 24px; }
.card-note { font-size: 14px; color: var(--muted); margin: -12px 0 20px; }
.sec-head { max-width: 760px; margin-bottom: 28px; }
.sec-head.center { margin-left: auto; margin-right: auto; }
.sec-head .lede { margin: 8px 0 0; }
.sec-head.center .lede { margin-left: auto; margin-right: auto; }
.btns-center { justify-content: center; }

/* legal notes under offers (heading per offer, terms under it) */
.legal-sec { padding-top: 8px; }
.legal-notes { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 22px; max-width: 1000px; }
.legal-notes h3 { font: 700 14px/1.3 var(--text); margin: 16px 0 6px; color: var(--ink-2); }
.legal-notes h3:first-child { margin-top: 0; }
.legal-notes p { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0; }

/* focused layout (Check availability) */
.focus-head, .js .site-head.focus-head { position: relative; top: auto; }
.is-focus .offers-sum { top: 16px; }
.loc-step[data-step="address"], .loc-checking { min-height: 64vh; }
.focus-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; }
.focus-head .logo-img { height: 76px; }
.focus-help { margin: 0; color: var(--on-dark); font-size: 15px; }
.focus-help a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--cyan); }
.focus-foot .wrap { padding-top: 26px; padding-bottom: 32px; }
.focus-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 14px; }
.focus-links a { color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.focus-links a:hover { text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 4px; }
.focus-foot p { font-size: 13px; color: #9AA6B8; margin: 0 0 6px; }

.loc-step { padding: 56px 0 72px; }
.loc-narrow { max-width: 640px; }
.loc-h1 { font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 28px; }
.loc-form { display: grid; gap: 22px; }
.fl { position: relative; }
.fl input { width: 100%; height: 62px; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 20px 16px 6px; font-size: 18px; background: #fff; color: var(--ink); }
.fl label { position: absolute; left: 12px; top: 19px; padding: 0 5px; font-size: 18px; line-height: 1.2; color: var(--muted); pointer-events: none; background: #fff; border-radius: 4px; transition: top .15s ease, font-size .15s ease, color .15s ease; }
.fl input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 96, 240, .18); }
.fl input:focus + label, .fl input:not(:placeholder-shown) + label { top: -10px; font-size: 13.5px; color: var(--blue-700); font-weight: 700; }
.fl.err input { border-color: var(--bad); }
.fl.err label { color: var(--bad); }
.sugg { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); }
.sugg li { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 10px; cursor: pointer; font-size: 17px; }
.sugg li .i { width: 20px; height: 20px; color: var(--blue); }
.sugg li:hover, .sugg li[aria-selected="true"] { background: var(--blue-50); }
.loc-why { font-size: 15px; color: var(--ink-2); }
.loc-why p { margin: 0 0 4px; line-height: 1.6; }
.loc-why-q { font-weight: 700; color: var(--ink); }
.loc-go { min-height: 58px; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.loc-go.is-idle { --pbg: #fff; --pfg: #6B778A; --pbd: var(--line-2); box-shadow: none; transform: none; }
.loc-alt { margin: 24px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.9; }
.loc-alt a { color: var(--blue-700); font-weight: 700; }

.loc-checking { padding: 96px 0 120px; }
.loc-checking h2 { font-size: clamp(28px, 3.4vw, 40px); margin-top: 28px; outline: 0; }
.loc-where { font-weight: 700; color: var(--ink-2); }
.signal-anim { position: relative; width: 132px; height: 132px; margin: 0 auto; }
.signal-anim i { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 18px rgba(24, 192, 252, .8); }
.signal-anim span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--cyan); opacity: 0; animation: ripple 2.1s ease-out infinite; }
.signal-anim span:nth-child(3) { animation-delay: .7s; }
.signal-anim span:nth-child(4) { animation-delay: 1.4s; }
@keyframes ripple { 0% { transform: scale(.18); opacity: .95; } 100% { transform: scale(1); opacity: 0; } }

.loc-offers { padding-top: 28px; }
.loc-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--tint); margin-bottom: 22px; }
.loc-pin { display: inline-flex; align-items: center; gap: 10px; }
.loc-pin .i { color: var(--blue); }
.loc-bar button.tlink { background: none; border: 0; border-bottom: 2px solid var(--cyan); cursor: pointer; font-size: 16px; padding: 0 0 1px; }
.loc-banner { margin: 0 0 26px; }
.loc-banner h2 { margin-bottom: 8px; outline: 0; }
.loc-banner p { margin: 0; font-size: 17px; color: var(--ink-2); max-width: 860px; }
.loc-banner.is-ok h1 { color: var(--ok); }
.offers { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.offers-main { display: grid; gap: 22px; }
.offer-sec { background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 26px; }
.section-mist .offer-sec { border-color: var(--line); }
.offer-h { margin-bottom: 16px; }
.offer-h h2, .offer-h h3 { font-size: 26px; margin: 0 0 4px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.offer-h p { margin: 0; color: var(--muted); font-size: 15px; }
.opt-tag { font: 800 11px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 9px; }
.ocards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ocards-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ocard { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; border: 1.5px solid var(--line-2); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ocard:hover { border-color: var(--ink-2); }
.ocard:has(input:checked) { border: 2px solid var(--blue); padding: 17.5px 17.5px 15.5px; box-shadow: 0 0 0 4px rgba(0, 96, 240, .14); }
.ocard:has(input:checked)::after { content: ""; position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ocard:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.ocard.is-off { opacity: .55; cursor: not-allowed; background: var(--tint); }
.sr-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.oc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 26px; }
.oc-name { font: 600 21px/1.15 var(--display); }
.oc-flag { font: 800 10.5px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; background: var(--black); color: #fff; padding: 5px 8px; border-radius: 999px; }
.oc-meta { font-size: 14px; color: var(--muted); }
.oc-price { margin-top: 8px; }
.oc-price .price { font-size: 38px; }
.ocard-sm .oc-price b { font: 600 24px/1 var(--display); }
.ocard-sm .oc-price small { font-size: 13px; color: var(--muted); font-weight: 700; margin-left: 2px; }
.oc-when { font-size: 13px; color: var(--ink-2); font-weight: 700; }
.oc-off { font-size: 13px; font-weight: 800; color: var(--bad); }
.ocard-none .oc-name { font-family: var(--text); font-weight: 700; font-size: 17px; }
.more-plans { margin-top: 14px; border-top: 1px solid var(--line); }
.more-plans > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 14px 2px; font-weight: 700; color: var(--blue-700); }
.more-plans > summary::-webkit-details-marker { display: none; }
.more-plans > summary .chev { width: 20px; height: 20px; transition: transform .2s; }
.more-plans[open] > summary .chev { transform: rotate(180deg); }
.router-pick, .screens { border: 0; padding: 0; margin: 20px 0 0; min-width: 0; }
.router-pick legend, .screens legend { font-weight: 800; font-size: 15px; margin-bottom: 10px; padding: 0; }
.opts-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opts-row .opt { flex-wrap: wrap; }
.opts-row .opt .opt-p { margin-left: 0; width: 100%; font-size: 18px; }
/* the router model picker and the whole-home Wi-Fi add-on on the order page */
.model-pick { margin-top: 14px; }
.model-pick small { color: var(--muted); font-size: 13px; }
.model-pick option:disabled { color: var(--line-2); }
.wifi-units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt-tag { font: 700 12px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--tint); border-radius: 999px; padding: 6px 10px; }
.stepper { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 8px 12px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; }
.stepper[hidden] { display: none; }
.stepper-l { font-weight: 800; font-size: 15px; }
.stepper output { min-width: 22px; text-align: center; font: 600 22px/1 var(--display); }
.step-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line-2); background: #fff; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink); }
.step-btn:hover { border-color: var(--ink); }
.step-btn:disabled { opacity: .4; cursor: not-allowed; }
.step-btn .i { width: 18px; height: 18px; }
.plans-head .stepper { margin-top: 0; }
.seg-pick { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.seg-pick label { position: relative; }
.seg-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-pick span { display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #fff; font: 600 20px/1 var(--display); cursor: pointer; }
.seg-pick input:checked + span { background: var(--black); color: #fff; border-color: var(--black); }
.seg-pick input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.seg-pick input:disabled + span { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.plans-head .screens { margin: 0; }
.offers-sum { position: sticky; top: 16px; background: #fff; border: 2px solid var(--black); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.js body:not(.is-focus) .offers-sum { top: calc(var(--main-h) + 20px); }
.offers-sum h2, .offers-sum .h3 { font-size: 24px; margin-bottom: 14px; }
.offers-sum .sum { margin-bottom: 12px; }
.offers-sum .sum div { font-size: 15px; }
.offers-sum .sum dt { color: var(--ink-2); }
.sum-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sum-line.sum-total { border-top: 2px solid var(--ink); padding-top: 12px; margin-bottom: 10px; }
.sum-line.sum-total span { font: 600 20px/1 var(--display); }
.sum-line.sum-total b { font: 600 28px/1 var(--display); }
.offers-sum .pill { margin: 8px 0 12px; }
.loc-back { background: none; border: 0; cursor: pointer; margin-bottom: 22px; font-size: 16px; }
.loc-details h1 { outline: 0; }
.order-copy h2 { margin-bottom: 8px; }
.loc-done .done-check { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 0 0 8px var(--blue-50); margin-bottom: 20px; }
.loc-done .done-check .i { width: 40px; height: 40px; }
.loc-done h1 { outline: 0; }
.done-list { text-align: left; max-width: 520px; margin: 24px auto 28px; }

/* bundles */
.bgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.bgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bcard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 30px 22px 22px; }
.bcard h3 { font-size: 20px; line-height: 1.25; margin-bottom: 12px; }
.bcard-price .price { font-size: 44px; }
.bcard .plan-was { margin: 4px 0 12px; }
.bcard-more { margin: 0 0 16px; border-top: 1px solid var(--line); }
.bcard-more > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-weight: 700; color: var(--blue-700); font-size: 15px; }
.bcard-more > summary::-webkit-details-marker { display: none; }
.bcard-more > summary .chev { width: 18px; height: 18px; transition: transform .2s; }
.bcard-more[open] > summary .chev { transform: rotate(180deg); }
.bcard-more .sum div { font-size: 14px; }
.bcard .pill { margin-top: auto; }

/* mobile + TV */
.plan-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.plan-grid-5 .plan { padding: 26px 18px 20px; }
.plan-grid-5 .plan h3 { font-size: 26px; }
.plan-grid-5 .price { font-size: 42px; }
.plan-grid-5 .plan-facts li { font-size: 14.5px; }
.plan-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brand-chips { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.brand-chips li { padding: 12px 20px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line-2); font: 600 18px/1 var(--display); }
.duo .panel { display: flex; flex-direction: column; align-items: flex-start; }
.duo .panel .card-badge { margin-bottom: 14px; }
.duo .panel .pill { margin-top: auto; }
.dev-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.dev { background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
.dev-art { display: grid; place-items: center; height: 120px; border-radius: 16px; margin-bottom: 16px; background: radial-gradient(90% 120% at 50% 110%, rgba(24, 192, 252, .35), rgba(24, 192, 252, 0) 60%), linear-gradient(160deg, #000 0%, var(--night) 100%); color: #fff; }
.dev-art .i { width: 56px; height: 56px; }
.dev h3 { font-size: 21px; margin-bottom: 6px; }
.dev p { font-size: 15px; color: var(--ink-2); }
.dev-p { margin: auto 0 12px; }
.dev-p .price { font-size: 32px; }
.dev .pill { align-self: flex-start; }
.tv-table { margin-top: 24px; }
.tv-table > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue-700); margin-bottom: 14px; }
.tv-table > summary::-webkit-details-marker { display: none; }
.tv-table > summary .chev { width: 18px; height: 18px; transition: transform .2s; }
.tv-table[open] > summary .chev { transform: rotate(180deg); }
.compare-tv { min-width: 0; }
.compare-2 { min-width: 0; }
.compare-2 tbody th { white-space: normal; }

@media (max-width: 1180px) {
  .plan-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .offers { grid-template-columns: minmax(0, 1fr); }
  .offers-sum { position: static; }
  .dev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ocards-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bgrid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .loc-step { padding: 32px 0 56px; }
  .focus-in { min-height: 68px; }
  .focus-head .logo-img { height: 52px; }
  .focus-help { font-size: 13.5px; text-align: right; }
  .loc-h1 { margin-bottom: 22px; }
  .ocards, .ocards-sm, .opts-row, .wifi-units, .opts-2, .plan-grid-5, .plan-grid-2, .bgrid, .bgrid-3, .dev-grid { grid-template-columns: minmax(0, 1fr); }
  .offer-sec { padding: 20px 16px; }
  .offers-sum { padding: 20px; }
  .f-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .f-col { border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .f-col .f-h { margin: 0; padding: 18px 2px; cursor: pointer; }
  .f-col .f-h .chev { display: block; }
  .f-col[open] .f-h .chev { transform: rotate(180deg); }
  .f-col ul { padding: 0 2px 18px; }
  .plans-head .screens { width: 100%; }
  .seg-pick span { min-width: 44px; height: 44px; }
}

/* utilities (no inline style attributes anywhere, so a strict style-src CSP never blocks layout) */
.m0 { margin: 0 !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .m-6-0-0 { margin: 6px 0 0 !important; }
.mt-14 { margin-top: 14px !important; } .mt-16 { margin-top: 16px !important; } .mt-18 { margin-top: 18px !important; } .mt-20 { margin-top: 20px !important; }
.mt-22 { margin-top: 22px !important; } .mt-28 { margin-top: 28px !important; }
.mb-24 { margin-bottom: 24px !important; } .mb-26 { margin-bottom: 26px !important; } .mb-28 { margin-bottom: 28px !important; } .mb-36 { margin-bottom: 36px !important; } .mb-40 { margin-bottom: 40px !important; }
.pt-8 { padding-top: 8px !important; } .pb-72 { padding-bottom: 72px !important; } .jc-center { justify-content: center !important; }
.narrow-760 { max-width: 760px; } .narrow-720 { max-width: 720px; }
.search-empty { padding: 12px 16px; }

/* ---------- order number on the request confirmation; the order-complete page (where a payment link returns) ---------- */
.done-ref { font-size: 15px; color: var(--ink-2); margin: 4px 0 0; }
.done-ref b { font-family: var(--display); letter-spacing: .02em; color: var(--ink); }
#oc .done-check { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 0 0 8px var(--blue-50); margin: 8px 0 20px; transition: background .2s ease; }
#oc .done-check .i { width: 40px; height: 40px; }
#oc[data-state="checking"] .done-check { background: var(--ink-2); box-shadow: 0 0 0 8px var(--line); }
#oc[data-state="problem"] .done-check { background: #B42318; box-shadow: 0 0 0 8px #FEE4E2; }
.oc-sum { max-width: 460px; margin: 18px auto 6px; text-align: left; }

/* ---------- Learn: guides, the glossary and the hub ---------- */
.guide-head { padding: 48px 0 12px; }
.guide-head h1 { max-width: 880px; }
.guide-meta { font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.answer { margin: 26px 0 0; max-width: 820px; padding: 22px 26px; border-radius: var(--radius-sm); background: var(--blue-50); border-left: 5px solid var(--blue); font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; color: var(--ink); }
.answer b { color: var(--ink); }
.guide-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: start; }
.prose { max-width: 780px; font-size: 17.5px; line-height: 1.65; color: var(--ink-2); }
.prose h2 { font-size: clamp(26px, 2.6vw, 34px); color: var(--ink); margin: 52px 0 14px; scroll-margin-top: 110px; }
.prose h2:first-child { margin-top: 8px; }
.prose h3 { font-size: 21px; color: var(--ink); margin: 30px 0 10px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 24px; display: grid; gap: 8px; }
.prose li::marker { color: var(--blue); font-weight: 800; }
.prose a { color: var(--blue-700); }
.prose .compare { min-width: 640px; font-size: 15px; }
.prose .compare-wrap { margin: 8px 0 22px; }
.prose .note { font-size: 14px; color: var(--muted); }
.toc { position: sticky; top: 112px; padding: 22px 22px 18px; border-radius: var(--radius-sm); background: var(--tint); border: 1px solid var(--line); font-size: 15px; }
.toc h2 { font: 800 12.5px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.toc a { color: var(--ink); text-decoration: none; line-height: 1.35; display: block; }
.toc a:hover { color: var(--blue-700); text-decoration: underline; }
.guide-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.gcard.gcard-feature { grid-column: 1 / -1; border-color: var(--blue); background: var(--blue-50); }
.gcard.gcard-feature h3 { font-size: clamp(22px, 2.2vw, 28px); }
.gcard { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 22px; border-radius: var(--radius); background: #fff; border: 1.5px solid var(--line-2); color: var(--ink); text-decoration: none; transition: box-shadow .2s, border-color .2s, transform .2s; }
.gcard:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-2px); }
.gcard .k { font: 800 12px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); }
.gcard h3 { font-size: 21px; margin: 0; }
.gcard p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.gcard .go { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--blue-700); display: inline-flex; align-items: center; gap: 6px; }
.gloss { margin: 0; display: grid; gap: 0; }
.gloss > div { padding: 22px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.gloss dt { font: 600 21px/1.25 var(--display); color: var(--ink); margin: 0 0 6px; }
.gloss dd { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 780px; }
.gloss-az { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 18px 0 0; font-weight: 700; }
.gloss-az a { color: var(--blue-700); }
@media (max-width: 1024px) { .guide-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .toc { position: static; } .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .guide-cards { grid-template-columns: 1fr; } .answer { padding: 18px 18px; } .prose { font-size: 17px; } }

/* Brand band: Brandon's Mac5G banner exactly as delivered (resized only), on a night-sky band, with real links laid over
   the four painted icons. Shown at 768 px at most so the 1536 px original stays sharp on 2x screens. */
.brand-band { background: #02050D; padding-block: clamp(28px, 5vw, 56px); }
.brand-banner { position: relative; max-width: 768px; margin: 0 auto; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(120, 170, 255, .16), 0 18px 60px rgba(0, 96, 240, .28); }
.brand-banner img { display: block; width: 100%; height: auto; }
.banner-links { position: absolute; inset: 0; }
.banner-links .bl { position: absolute; top: 81%; height: 15%; border-radius: 12px; transition: background-color .2s; }
.banner-links .bl:hover { background: rgba(255, 255, 255, .08); }
.banner-links .bl:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; background: rgba(255, 255, 255, .1); }
.banner-links .bl-home { left: 4.5%; width: 19.5%; }
.banner-links .bl-biz { left: 25%; width: 21.5%; }
.banner-links .bl-comm { left: 48%; width: 22%; }
.banner-links .bl-any { left: 71.5%; width: 21.5%; }
@media (prefers-reduced-motion: reduce) { .banner-links .bl { transition: none; } }

/* ---- Mac5G Business Mobile: line cards and the volume ladder ---- */
/* The line cards carry uneven copy (a data line, a blurb, a "Fits" line), so the card is a column and the button is
   pushed to the bottom: every "Get this plan" sits on the same line however long the text above it runs. */
.plan-grid .plan-card { display: flex; flex-direction: column; }
.plan-card .plan-cta { margin-top: auto; align-self: flex-start; }
.plan-card .plan-data { font-weight: 700; color: var(--ink-2); margin: 0 0 6px; }
.plan-card .plan-blurb { margin: 10px 0; }

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.tier { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px; }
.tier h3 { font-size: 18px; margin: 0 0 6px; }
.tier-off { font: 800 26px/1.1 var(--display); margin: 0 0 8px; color: var(--ink); }
.tier-hi { border-color: var(--ink); box-shadow: 0 10px 30px -18px rgba(10, 15, 26, .45); }

/* ---- Mac5G TV: the price ladder ---- */
/* One row per package, one column per screen count. It scrolls sideways on a phone rather than reflowing, because the
   whole point of the table is reading a row across. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 24px; }
table.ladder { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
table.ladder th, table.ladder td { padding: 16px 14px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.ladder thead th { background: var(--mist, #F4F7FB); font: 700 15px/1.2 var(--text); color: var(--ink-2); white-space: nowrap; }
table.ladder thead th .fine { display: block; font-weight: 500; }
table.ladder tbody th[scope="row"] { text-align: left; min-width: 230px; font-weight: 400; }
table.ladder tbody th[scope="row"] strong { display: block; font: 600 19px/1.2 var(--display); color: var(--ink); margin-bottom: 4px; }
table.ladder tbody th[scope="row"] .fine { display: block; }
table.ladder tbody tr:last-child th, table.ladder tbody tr:last-child td { border-bottom: 0; }
table.ladder td { font: 700 21px/1.1 var(--display); color: var(--ink); white-space: nowrap; }
table.ladder td .fine { font: 500 13px/1 var(--text); color: var(--ink-2); }
table.ladder td.cell-hi { background: rgba(24, 192, 252, .10); position: relative; }
.cell-tag { display: block; margin-top: 6px; font: 800 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }

/* ---- Mobile & TV: the jazz pass ----
   These two pages were built from plain boxes and read flat next to the internet pages, which carry hero art, price
   cards and the brand gradient. Same components, given the same treatment: a coloured head on every product card, a
   floating price chip on the hero, the volume ladder as a climb rather than four grey squares, and icon rails instead
   of bullet lists. Nothing here is page-specific enough to belong in a page module. */

/* a price card floating over hero art, the way the home hero carries one */
.hero-chip { position: absolute; left: 22px; bottom: 22px; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 18px 40px -18px rgba(4, 18, 43, .55); max-width: 78%; }
.hero-chip .hc-k { font: 800 11px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 6px; }
.hero-chip .hc-p { font: 700 30px/1 var(--display); color: var(--ink); margin: 0; }
.hero-chip .hc-p sup { font-size: .5em; top: -.7em; position: relative; }
.hero-chip .hc-p span { font: 600 14px/1 var(--text); color: var(--ink-2); }
.hero-chip .hc-n { font: 500 13px/1.35 var(--text); color: var(--ink-2); margin: 6px 0 0; }
.hero-media { position: relative; }

/* product cards with a coloured head — mobile line plans and TV packages both use it */
.tier-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 10px -6px rgba(4, 18, 43, .3); transition: transform .18s, box-shadow .18s; }
.tier-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(4, 18, 43, .5); }
.tier-card .tc-head { padding: 18px 56px 16px 22px; background: linear-gradient(140deg, var(--night) 0%, #0A2A63 100%); color: #fff; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 96px; }
.tier-card.is-hi .tc-head { background: radial-gradient(120% 160% at 100% 0%, rgba(24, 192, 252, .55), rgba(24, 192, 252, 0) 58%), linear-gradient(140deg, #0030B0 0%, var(--blue) 78%); }
.tier-card .tc-head h3 { color: #fff; font-size: 21px; margin: 0; }
.tier-card .tc-sub { font: 600 13px/1.3 var(--text); color: rgba(255, 255, 255, .82); margin: 5px 0 0; }
.tier-card .tc-ico { position: absolute; right: 18px; bottom: 18px; width: 26px; height: 26px; color: rgba(255, 255, 255, .55); }
.tier-card .tc-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.tier-card .tc-price { font: 700 36px/1 var(--display); color: var(--ink); margin: 0 0 2px; letter-spacing: -.02em; }
.tier-card .tc-price sup { font-size: .46em; top: -.75em; position: relative; }
.tier-card .tc-price span { font: 600 14px/1 var(--text); color: var(--ink-2); letter-spacing: 0; }
.tier-card .tc-was { font: 500 13px/1.3 var(--text); color: var(--ink-2); margin: 0 0 12px; }
.tier-card .tc-txt { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; }
.tier-card .tc-fits { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.tier-card .tc-cta { margin-top: auto; padding-top: 18px; align-self: flex-start; }
.tier-card .tc-flag { position: absolute; right: 0; top: 0; z-index: 2; background: var(--cyan, #18C0FC); color: var(--night); font: 800 10.5px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; border-bottom-left-radius: 12px; }

/* the volume ladder as a climb: each rung carries a thicker, bluer bar than the one before it. Deliberately NOT called
   .step — that class is already the numbered how-it-works component above, and its ::before is a counter circle. */
.climb { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; align-items: stretch; }
.climb .rung { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px 20px 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.climb .rung::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill, 4px); background: linear-gradient(90deg, var(--blue), var(--cyan, #18C0FC)); }
.climb .rung-1 { --fill: 4px; } .climb .rung-2 { --fill: 9px; } .climb .rung-3 { --fill: 15px; } .climb .rung-4 { --fill: 22px; }
.climb .rung h3 { font-size: 15px; margin: 0 0 10px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); font-family: var(--text); font-weight: 800; }
.climb .st-off { font: 700 32px/1 var(--display); color: var(--blue-700); margin: 0 0 6px; letter-spacing: -.02em; }
.climb .st-off.st-quote { font-size: 24px; color: var(--ink); }
.climb .st-eg { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.climb .st-eg strong { display: block; color: var(--ink); font: 700 20px/1.1 var(--display); margin-top: 2px; }

/* an icon rail — what every plan includes, or how the TV service works */
.rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.rail .rail-i { display: flex; gap: 12px; align-items: flex-start; }
.rail .rail-i .i { width: 26px; height: 26px; flex: none; color: var(--blue); margin-top: 2px; }
.rail .rail-i h4 { margin: 0 0 3px; font: 600 16px/1.25 var(--display); }
.rail .rail-i p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }

/* device cards for TV hardware: icon, name, price chip */
.dev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.dev { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px; display: flex; flex-direction: column; transition: border-color .18s, transform .18s; }
.dev:hover { border-color: var(--blue); transform: translateY(-2px); }
.dev .i { width: 34px; height: 34px; color: var(--blue); margin-bottom: 14px; }
.dev h3 { font-size: 17px; margin: 0 0 6px; }
.dev p { margin: 0 0 16px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.dev .dev-p { margin-top: auto; display: inline-flex; align-items: baseline; gap: 2px; font: 700 24px/1 var(--display); color: var(--ink); }
.dev .dev-p sup { font-size: .5em; top: -.6em; position: relative; }

@media (max-width: 860px) {
  .hero-chip { position: static; max-width: none; margin-top: 14px; box-shadow: none; border: 1px solid var(--line); }
  .climb { align-items: stretch; }
}

/* two product cards side by side (Mac5G TV's Premium / Deluxe), held to a readable width rather than stretched across
   a 1200px wrap */
.plan-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
@media (max-width: 720px) { .plan-grid-2 { grid-template-columns: minmax(0, 1fr); } }
/* the flag sits over the head's top-right corner. The head's own content is bottom-aligned, so nothing collides and
   a flagged card keeps exactly the same height as an unflagged one — the price rows stay on one line across the row. */
@media (max-width: 720px) { .tier-card .tc-head { min-height: 0; } }

/* ---- Mac5G Voice ---- */
/* The business-only line. It is a statement of who may buy, not decoration, so it sits directly under the hero where
   nobody scrolls past it. */
.biz-only { display: flex; align-items: center; gap: 10px; margin: 0 auto; padding: 12px 18px; border-radius: 999px; background: var(--blue-50); border: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); width: fit-content; }
.biz-only .i { width: 20px; height: 20px; flex: none; color: var(--blue-700); }
/* the feature list inside a seat card, tighter than a standalone ticks list */
.tier-card .tc-list { margin: 14px 0 0; gap: 7px; font-size: 14.5px; }
.tier-card .tc-list .i { width: 17px; height: 17px; }
/* a rate that is a sentence ("From $39 /month") rather than a headline number, so it has to wrap as a sentence:
   display:block, not the inline-flex a headline price uses, or "From" and the figure land on separate lines. */
.dev .dev-p-sm { display: block; font: 700 21px/1.3 var(--display); color: var(--ink); }
.dev .rate-from { font: 600 13px/1 var(--text); color: var(--ink-2); letter-spacing: .02em; }
.dev .rate-per { font: 500 13px/1 var(--text); color: var(--ink-2); }
.dev .fine { display: block; margin-top: 6px; font-size: 12.5px; }

/* ---- Join our team: the application form ---- */
/* The printed application is eight numbered sections, and the page keeps that shape — a fieldset per section with the
   number in the legend, so somebody who has filled the paper one recognises where they are. */
.fs { border: 0; margin: 0 0 30px; padding: 0; }
.fs legend { font: 800 13px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-700); padding: 0 0 12px; }
.fs + .fs { padding-top: 26px; border-top: 1px solid var(--line); }
.fs h4 { font-size: 16px; }

/* weekly availability: a day per row on a phone, a compact grid above it */
.avail { display: grid; gap: 10px; }
.avail-day { display: grid; grid-template-columns: 52px 1fr 1fr; gap: 10px; align-items: center; }
.avail-day .lbl { font-weight: 700; font-size: 14px; color: var(--ink-2); margin: 0; }
.avail-day input { width: 100%; }

/* a yes/no row — the eligibility questions, and anything a role asks the same way */
.yn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.yn:last-child { border-bottom: 0; }
.yn .req { font-style: normal; font-size: 13px; color: var(--blue-700); }
.yn-btns { display: inline-flex; gap: 14px; flex: none; }
.yn-btns label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.yn-btns input { width: 20px; height: 20px; accent-color: var(--blue); }

/* the experience grid, drawn per role: what they have done, for how long, and when */
.exp-grid { display: grid; gap: 10px; margin: 6px 0 18px; }
.exp-head { display: none; }
.exp-row { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.exp-row:last-child { border-bottom: 0; }
.exp-what { font-weight: 600; font-size: 15.5px; }

.edu-row, .hist { margin-bottom: 14px; }
.hist { padding: 16px 0 4px; border-top: 1px solid var(--line); }
.hist:first-of-type { border-top: 0; padding-top: 0; }

@media (min-width: 720px) {
  .exp-head { display: grid; grid-template-columns: minmax(0, 1.6fr) 170px 1fr 1fr; gap: 12px; font: 700 12.5px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 6px; border-bottom: 1.5px solid var(--line-2); }
  .exp-row { grid-template-columns: minmax(0, 1.6fr) 170px 1fr 1fr; gap: 12px; align-items: center; }
}
@media (max-width: 719px) {
  .avail-day { grid-template-columns: 46px 1fr 1fr; }
  .yn { flex-direction: column; align-items: flex-start; }
}

/* ---- Bundles: the worked example ---- */
/* The saving as arithmetic rather than a claim — list, less each thing they added, and the number at the bottom. */
.worked { padding: 26px 28px 24px; }
.worked-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.worked-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.w-what { display: flex; flex-direction: column; font-weight: 600; }
.w-sub { font-weight: 400; font-size: 13.5px; color: var(--ink-2); }
.w-amt { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; }
.w-off { color: var(--blue-700); }
.worked-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 16px 0 10px; padding-top: 14px; border-top: 1.5px solid var(--line-2); font-size: 15.5px; color: var(--ink-2); }
.worked-total strong { font: 700 30px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.worked-total strong span { font: 600 14px/1 var(--text); color: var(--ink-2); }
.ticks-lg li { font-size: 16.5px; }
.climb .rung .st-off .fine { font-size: 14px; color: var(--ink-2); }

/* plan differentiator line: breathing room above the CTA */
.tc-diff { margin-bottom: 18px; font-weight: 600; }

/* pay my bill: what the account owes, shown after the lookup */
.pb-summary { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--mist, #eef4ff); line-height: 1.5; }
.mt-8 { margin-top: 8px; }

/* ---------- My Mac5G (the customer portal) ---------- */
.acct-wrap { max-width: 1060px; margin: 0 auto; }
.acct-head { margin-bottom: 26px; }
.acct-grid { align-items: start; }
.acct-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.acct-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 18px 0; }
.acct-cards .card { display: block; }
.acct-alert { margin: 8px 0 2px; padding: 10px 12px; border: 1px solid rgba(179, 38, 30, .35); border-left: 4px solid var(--bad); border-radius: var(--radius-sm); background: #FDF1F0; color: #7A1A14; font-size: 15px; font-weight: 600; line-height: 1.45; }
.pay-warn { color: var(--bad); }
.acct-amount { font-size: 2.4rem; font-weight: 800; line-height: 1; margin: 6px 0 4px; letter-spacing: -.02em; }
.acct-ok { font-weight: 600; margin: 0 0 8px; }
.acct-lines { list-style: none; padding: 0; margin: 8px 0 12px; }
.acct-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed rgba(0,0,0,.08); }
.tlink-btn { background: none; border: 0; padding: 0; color: var(--blue, #0060f0); font: inherit; text-decoration: underline; cursor: pointer; }
.acct-grid2 { margin-top: 6px; align-items: start; }
.acct-pay-list, .acct-news-list { list-style: none; padding: 0; margin: 10px 0 0; }
.acct-pay-list li { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.08); align-items: center; }
.acct-pay-list li.fine { display: block; }
.acct-news-list li { padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.acct-news-list li:last-child, .acct-pay-list li:last-child { border-bottom: 0; }
.acct-news-list p { margin: 4px 0 6px; }
.acct-tag { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue, #0060f0); margin-bottom: 4px; }
.acct-more { margin-top: 18px; }
.acct-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.acct-link { display: block; padding: 14px; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; text-decoration: none; color: inherit; background: #fff; }
.acct-link strong { display: block; margin-bottom: 4px; }
.acct-link span { font-size: .92rem; opacity: .8; }
.acct-link:hover { border-color: var(--blue, #0060f0); }
@media (max-width: 720px) { .acct-amount { font-size: 2rem; } .acct-pay-list li { grid-template-columns: 1fr auto; } .acct-pay-list li span:nth-child(2) { grid-column: 1 / -1; font-size: .9rem; opacity: .8; } }

.sms-opt { margin: 4px 0 18px; }
.sms-check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font: 500 13px/1.55 var(--text); color: var(--ink-2, #3a3f47); cursor: pointer; }
.sms-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue, #0060f0); }
.sms-check a { color: var(--blue, #0060f0); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }