/* Self-hosted Google Fonts (latin subset) — no third-party request, no render-blocking stylesheet. Files in web/fonts/. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: optional; src: url(fonts/Barlow-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: optional; src: url(fonts/Barlow-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: optional; src: url(fonts/Barlow-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 600 900; font-display: optional; src: url(fonts/Exo2-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Exo 2'; font-style: italic; font-weight: 900; font-display: optional; src: url(fonts/Exo2-900i.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Metric-matched local fallbacks (Arial / Liberation Sans): widths measured against the real fonts — display faces on the
   UPPERCASE headings they set, body faces on running text — vertical metrics from the font tables ÷ size-adjust, so the swap
   to the web font moves (almost) nothing. */
@font-face { font-family: 'Barlow Fallback'; font-weight: 100 450; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 95.1%; ascent-override: 104.7%; descent-override: 20.9%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Fallback'; font-weight: 451 550; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 90.7%; ascent-override: 108.1%; descent-override: 21.6%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Fallback'; font-weight: 551 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Neue Bold'), local('Helvetica-Bold'); size-adjust: 90.5%; ascent-override: 110.0%; descent-override: 22.0%; line-gap-override: 0%; }
@font-face { font-family: 'Exo 2 Fallback'; font-weight: 100 650; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Neue Bold'), local('Helvetica-Bold'); size-adjust: 96.3%; ascent-override: 104.1%; descent-override: 20.9%; line-gap-override: 0%; }
@font-face { font-family: 'Exo 2 Fallback'; font-weight: 651 750; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Neue Bold'), local('Helvetica-Bold'); size-adjust: 98%; ascent-override: 105.2%; descent-override: 21.2%; line-gap-override: 0%; }
@font-face { font-family: 'Exo 2 Fallback'; font-weight: 751 850; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Neue Bold'), local('Helvetica-Bold'); size-adjust: 100.1%; ascent-override: 102.5%; descent-override: 20.6%; line-gap-override: 0%; }
@font-face { font-family: 'Exo 2 Fallback'; font-weight: 851 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Neue Bold'), local('Helvetica-Bold'); size-adjust: 101.9%; ascent-override: 105.7%; descent-override: 21.3%; line-gap-override: 0%; }
@font-face { font-family: 'Exo 2 Fallback'; font-weight: 851 900; font-style: italic; src: local('Arial Bold Italic'), local('Arial-BoldItalicMT'), local('Liberation Sans Bold Italic'), local('Helvetica-BoldOblique'); size-adjust: 102.4%; ascent-override: 106.4%; descent-override: 21.4%; line-gap-override: 0%; }

/* Mac Wireless Co. — one design system for every page.
   Tokens → type → layout rhythm → components. Black ground, electric blue for wayfinding, gold for the one thing to press. */
:root {
  /* Daylight city — white and cool-gray ground with the logo's skyline in light tints; black, gold and electric blue stay the accents. */
  --bg: #F6F8FC; --bg2: #EEF2F9; --card: #FFFFFF; --card2: #F3F6FB; --line: #DEE4EE; --line2: #C5CEDD; --field: #FFFFFF;
  --text: #0B1220; --soft: #3B4658; --muted: #5A667A; --ink: #0B1220;
  --blue: #1B5FD6; --sky: #1A57C9; --gold: #C99A1E; --gold-hi: #F0C64A; --gold2: #8A6A0B; --green: #157A44; --red: #C0392B;
  --tint-gold: #FBF3D9; --tint-blue: #E8F0FF; --tint-green: #E2F4EA; --tint-red: #FCE8E6; --shadow: 0 10px 30px rgba(11,18,32,0.08);
  --display: 'Exo 2', 'Exo 2 Fallback', Arial, sans-serif; --body: 'Barlow', 'Barlow Fallback', 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1200px; --gutter: 40px; --sec: 88px; --radius: 8px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: 96px; }  /* anchors land below the sticky header */
html, body { overflow-x: clip; }  /* clip, not hidden: hidden would disable position: sticky on the header */
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }  /* short pages (empty cart, 404, notices) keep the footer at the bottom of the viewport */
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
input, select, textarea, .field { min-width: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- type ---------- */
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
h1, .h1 { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -0.01em; }
h2, .h2 { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(26px, 3vw, 38px); line-height: 1.06; letter-spacing: -0.005em; }
h3, .h3 { font-weight: 800; font-size: 18px; line-height: 1.2; }
.eyebrow, .kicker { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold2); }
.eyebrow.blue { color: var(--sky); } .eyebrow.green { color: var(--green); }
.lede { font-size: 17px; color: var(--soft); max-width: 35em; margin: 0; }
.sub { font-size: 14px; color: var(--muted); line-height: 1.6; }
.fine { font-size: 12px; color: var(--muted); line-height: 1.6; }
.gold { color: var(--gold2); } .sky { color: var(--sky); } p a.sky, .lede a.sky, .sub a.sky, .fine a.sky, .id a.sky, li a.sky, figcaption a.sky, .q a, .terms a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(27,95,214,0.45); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- layout rhythm ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 860px; }
main.wrap { padding-top: 48px; padding-bottom: 96px; }
main.wrap h1 { margin-bottom: 24px; }
main.wrap h2:not(.plain) { font-weight: 800; font-style: normal; font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold2); margin: 30px 0 12px; }
.page { padding: 48px 0 96px; } .page > .wrap > * + * { margin-top: 32px; }
.section { padding: var(--sec) 0; border-top: 1px solid var(--line); }
.section.tight { padding: 56px 0; }
.section.tint { background: var(--bg2); }
.sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; max-width: 760px; }
.sec-head.row { flex-direction: row; align-items: flex-end; justify-content: space-between; max-width: none; gap: 24px; }
.sec-head.row > div { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.split.wide-left { grid-template-columns: 1.25fr 1fr; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.col, .stack { display: flex; flex-direction: column; gap: 10px; } .col > label, .stack > label { flex-grow: 0; }  /* labels only grow inside .row; in a column they would swallow the spare height */
.row { display: flex; gap: 10px; align-items: flex-end; } .row > * { min-width: 0; } .wrap-row { flex-wrap: wrap; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; }

/* ---------- header / footer: carrier frame — segment/utility bar, mega-menu nav, sign-in dropdown ---------- */
.topbar { background: #000; color: #C9D0DC; font-family: var(--display); font-weight: 600; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 var(--gutter); min-height: 40px; }
.topbar nav { display: flex; gap: 18px; align-items: center; } .topbar a, .topbar button { color: #C9D0DC; padding: 0; min-height: 40px; display: inline-flex; align-items: center; border: 0; background: none; font: inherit; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
.topbar a:hover, .topbar button:hover { color: #FFFFFF; } .topbar .seg a[aria-current] { color: #FFFFFF; border-bottom: 2px solid var(--gold-hi); }
.topbar .util-search { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 78px; } .topbar .util-search::before { content: ''; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; box-shadow: 4px 4px 0 -1px currentColor; transform: translate(-1px,-1px) scale(.85); }
.nav { display: flex; align-items: center; gap: 22px; padding: 10px var(--gutter); border-bottom: 1px solid #1B2334; background: rgba(5,7,11,0.97); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 30; color: #F2F4F8; }
.brand { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; color: #FFFFFF; margin-right: 8px; } .brand img { width: auto; height: 50px; display: block; }
.brand .brand-lockup { height: 62px; width: auto; display: block; }
.foot-top .brand .brand-lockup { height: 84px; }
.brand .lockup { display: flex; flex-direction: column; line-height: 1; } .brand .mac { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; color: #FFFFFF; } .brand .wireless { font-family: var(--display); font-weight: 700; font-size: 9.5px; letter-spacing: 0.4em; text-transform: uppercase; color: #5AA0FF; margin-top: 3px; } .brand .tag { font-family: var(--display); font-weight: 700; font-size: 7.5px; letter-spacing: 0.26em; text-transform: uppercase; color: #C9D0DC; margin-top: 5px; } .brand .tag em { font-style: normal; color: var(--gold-hi); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menu { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.menu > a, .menu .mm > a { color: #C9D0DC; padding: 12px 11px; border-radius: 6px; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; } .menu > a:hover, .menu .mm:hover > a, .menu .mm:focus-within > a, .menu a[aria-current] { color: #FFFFFF; background: rgba(255,255,255,0.06); }
.menu a[aria-current] { box-shadow: inset 0 -2px 0 var(--gold-hi); border-radius: 6px 6px 0 0; }
.menu .mm { position: relative; } .menu .mm > a::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 8px; opacity: .7; }
.menu .mm .panel { display: none; position: absolute; left: 0; top: 100%; min-width: 460px; background: #FFFFFF; color: var(--text); border: 1px solid var(--line); border-radius: 0 0 12px 12px; box-shadow: 0 24px 50px rgba(11,18,32,0.25); padding: 22px 26px 24px; grid-template-columns: 1fr 1fr; gap: 24px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14.5px; z-index: 40; }
/* the panel is white on every page — the night-look consoles too — so its palette is pinned here rather than inherited from the page's tokens */
.menu .mm .panel { --text: #0B1220; --soft: #3B4658; --muted: #5A667A; --line: #DEE4EE; --line2: #C5CEDD; --gold2: #8A6A0B; --blue: #1B5FD6; --sky: #1A57C9; }
.menu .mm .panel.one { min-width: 240px; grid-template-columns: 1fr; } .menu .mm.right { margin-left: auto; } .menu .mm.right .panel { left: auto; right: 0; }
.menu .mm:hover .panel, .menu .mm:focus-within .panel, .menu .mm.open .panel { display: grid; } .menu .mm.closed .panel { display: none !important; }
.menu .mm > a[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-2px); }
.menu .panel h4 { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold2); } .menu .panel a { display: block; padding: 7px 0; color: var(--text); border-bottom: 1px solid var(--line); } .menu .panel a:last-child { border-bottom: 0; } .menu .panel a:hover { color: var(--blue); }
.menu .cart-link { border: 1px solid #2E394F; border-radius: 999px; padding: 7px 12px; color: #C9D0DC; margin-left: auto; min-height: 36px; } .menu .cart-link.has { border-color: var(--gold-hi); color: var(--gold-hi); } .menu .mm.right { margin-left: 0; }
.menu .acct { border: 1px solid #3A4661; border-radius: 6px; padding: 10px 14px; color: #FFFFFF; min-height: 40px; } .menu .mm.right > a::after { display: none; } .menu .mm.right > a:hover { border-color: #fff; }
.menu .cta { margin-left: 4px; padding: 11px 18px; min-height: 40px; font-size: 12px; border-radius: 8px; font-weight: 800; letter-spacing: 0.18em; }
.menu-btn { display: none; }
.nav .gold { color: var(--gold-hi); }
.foot { border-top: 1px solid #1B2334; padding: 48px var(--gutter) 28px; font-size: 13px; color: #9AA3B5; background: #05070B; }
.foot .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 28px; max-width: var(--wrap); margin: 0 auto; }
.foot h4, .foot .foot-h { font-family: var(--display); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-hi); margin: 0 0 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .foot ul a { display: inline-block; padding: 3px 0; } .foot a:hover { color: #FFFFFF; }
.foot .legal { max-width: var(--wrap); margin: 36px auto 0; padding-top: 20px; border-top: 1px solid #1B2334; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; } .foot .legal a:hover { color: #FFFFFF; } .foot .links { color: #9AA3B5; } .foot .badge-r { border-color: #2E394F; background: linear-gradient(180deg, #10151F, #0B0F18); } .foot .badge-r b { color: #F2F4F8; } .foot .badge-r small { color: #9AA3B5; } .foot .badge-r .mark { color: #F2F4F8; }   /* the marks inherit var(--ink); on the footer's dark badge that is black on black */

/* ---------- forms & buttons ---------- */
.chk { flex-direction: row; align-items: flex-start; gap: 10px; flex-grow: 0; font-size: 13.5px; line-height: 1.5; color: var(--soft); } .chk input { width: 18px; height: 18px; margin-top: 3px; accent-color: #D4AF37; flex-shrink: 0; } .chk a { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; } .chk.err span { color: var(--red); }
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--soft); flex-grow: 1; } .hint { color: var(--muted); font-size: 12px; }
.field { background: var(--field); border: 1px solid var(--line2); border-radius: 4px; padding: 13px 14px; font-size: 15px; color: var(--text); font-family: inherit; width: 100%; min-height: 46px; }
.field::placeholder { color: var(--muted); } .field:focus { border-color: var(--sky); outline: none; } .field.err { border-color: var(--red); }
select.field { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.btn-gold, .btn-blue, .btn-ghost, .btn-outline, .btn-white { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; border: 0; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; padding: 14px 24px; min-height: 46px; border-radius: 4px; white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
/* the site button, everywhere: deep navy with a thin gold glow around it and white letter-spaced type — his reference button */
.btn-gold, .btn-blue, .btn-ghost, .btn-outline, .btn-white { background: linear-gradient(180deg, #0B1636 0%, #10245E 100%); color: #FFFFFF; border: 1.5px solid #F0C64A; border-radius: 10px; letter-spacing: 0.22em; box-shadow: 0 0 0 1px rgba(240,198,74,0.16), 0 0 18px rgba(240,198,74,0.32), inset 0 -12px 26px rgba(27,95,214,0.32); font-weight: 800; }
.btn-gold:hover, .btn-blue:hover, .btn-ghost:hover, .btn-outline:hover, .btn-white:hover { box-shadow: 0 0 0 1px rgba(240,198,74,0.35), 0 0 30px rgba(240,198,74,0.6), inset 0 -12px 30px rgba(27,95,214,0.5); transform: translateY(-1px); background: linear-gradient(180deg, #0B1636 0%, #10245E 100%); }
.btn-gold:focus-visible, .btn-blue:focus-visible, .btn-ghost:focus-visible, .btn-outline:focus-visible, .btn-white:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.btn-gold.big { width: 100%; padding: 18px; font-size: 15px; }
/* .btn-blue and .btn-ghost keep their names for the markup; they paint the same button as .btn-gold now */

button:disabled { opacity: 0.6; cursor: wait; }
.result { font-size: 14px; line-height: 1.5; color: var(--soft); min-height: 1em; margin-top: 8px; } .result.ok { color: var(--green); } .result.bad { color: var(--red); }

/* ---------- surfaces ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: 0 1px 2px rgba(11,18,32,0.04); }
.card.demo { color: var(--muted); font-size: 13px; line-height: 1.5; } code { color: var(--sky); }
.card > .eyebrow + h2, .card > .kicker + h2 { margin-top: 8px; }
.card h2.plain, h2.plain { font-size: 24px; text-transform: none; letter-spacing: 0; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.tile .n { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.3em; color: var(--gold2); }
.tile b { font-family: var(--display); font-weight: 800; font-size: 16px; } .tile p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.stat { display: flex; flex-direction: column; gap: 4px; } .stat b { font-family: var(--display); font-weight: 800; font-size: 18px; } .lbl { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold2); }
.total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 10px; color: var(--soft); } .total b { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 34px; color: var(--gold2); }
.note { background: var(--tint-gold); border: 1px solid var(--gold); border-radius: 6px; padding: 12px 14px; color: var(--gold2); font-size: 14px; margin-top: 12px; }
details.danger { margin-top: 24px; border: 1px solid #F0C4BE; border-radius: 6px; padding: 12px 16px; color: var(--soft); } details.danger summary { cursor: pointer; color: var(--red); font-weight: 600; }
.meter .bar { height: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 8px 0; } .meter .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--sky)); width: 0; }
.choices { display: flex; flex-direction: column; gap: 8px; } .choices label { flex-direction: row; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; cursor: pointer; }
.planlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plan { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "r n p" "r b b"; gap: 4px 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 14px; cursor: pointer; color: var(--text); }
.plan.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; } .plan input { grid-area: r; } .plan .pn { grid-area: n; font-family: var(--display); font-weight: 800; } .plan .pp { grid-area: p; font-family: var(--display); font-weight: 900; font-style: italic; font-size: 20px; } .plan .pp small { font-size: 11px; font-style: normal; color: var(--muted); } .plan .pb { grid-area: b; font-size: 12px; color: var(--muted); }
.done h2 { color: var(--text); font-size: 24px; letter-spacing: 0; text-transform: none; font-style: italic; font-weight: 900; margin: 6px 0 10px; } .done p { color: var(--soft); line-height: 1.6; } .done img { width: 220px; height: 220px; border-radius: 6px; background: #fff; border: 1px solid var(--line); }

/* ---------- segmented tabs + filter toolbar (shop, coverage) ---------- */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.seg button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; cursor: pointer; color: var(--soft); font-family: inherit; transition: border-color .12s ease, background .12s ease; }
.seg button b { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--text); letter-spacing: 0.02em; } .seg button small { font-size: 12.5px; color: var(--muted); }
.seg button:hover { border-color: var(--line2); background: var(--card2); }
.seg button.on { border-color: var(--gold); background: var(--tint-gold); box-shadow: 0 0 0 1px var(--gold) inset; } .seg button.on b { color: var(--gold2); }
.toolbar { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toolbar .lbl { margin-right: 2px; }
.toolbar .search { margin-left: auto; flex: 0 1 300px; min-width: 200px; }
.tab { font-family: var(--display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--line); color: var(--soft); background: transparent; cursor: pointer; }
.tab:hover { border-color: var(--line2); color: var(--text); } .tab.on { border-color: var(--gold); color: var(--gold2); background: var(--tint-gold); }
.count { font-size: 13px; color: var(--muted); padding: 12px 0 4px; }

/* ---------- promo artwork: waving feather flag + retractable banner ---------- */
.flag-wrap { display: flex; justify-content: center; align-items: flex-end; } canvas.flag { display: block; max-width: 100%; }
.promo-flag { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: center; }
.promo-banner { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: center; }
.promo-banner img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow); display: block; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .grid4, .grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  :root { --gutter: 20px; --sec: 56px; }
  .split, .split.wide-left, .grid2, .grid3, .planlist, .promo-flag, .promo-banner { grid-template-columns: 1fr; }
  .flag-wrap { order: -1; } .sec-head.row { flex-direction: column; align-items: flex-start; }
  .row { flex-wrap: wrap; } .brand img { height: 42px; } .brand .brand-lockup { height: 46px; } .brand .mac { font-size: 19px; } .brand .tag { display: none; }
}
/* tablets & phones: the menu folds behind a Menu button; the top bar keeps phone + search */
@media (max-width: 1100px) {
  .nav { flex-wrap: wrap; gap: 10px; position: sticky; }
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; background: none; border: 1px solid #3A4661; border-radius: 6px; color: #fff; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 14px; min-height: 44px; cursor: pointer; }
  .menu-btn span { width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; display: block; }
  .menu { display: none; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 10px; border-top: 1px solid #1B2334; max-height: calc(100vh - 80px); overflow-y: auto; }
  .menu.open { display: flex; }
  .menu > a, .menu .mm > a { display: flex; width: 100%; padding: 14px 8px; border-radius: 0; border-bottom: 1px solid #141b2b; font-size: 14px; } .menu .mm > a::after { margin-left: auto; margin-right: 6px; } .menu .mm.open > a { border-radius: 6px 6px 0 0; }
  .menu .mm .panel { display: none; position: static; min-width: 0; background: none; color: #C9D0DC; border: 0; box-shadow: none; padding: 4px 6px 10px 16px; border-radius: 0; } .menu .mm.open .panel { display: block; } .menu .mm.open > a { color: #FFFFFF; background: rgba(255,255,255,0.06); } .menu .panel h4 { color: var(--gold-hi); margin-top: 8px; } .menu .panel a { color: #E4E8EF; border-bottom-color: #141b2b; padding: 9px 0; }
  .menu .cart-link, .menu .acct, .menu .cta { margin: 8px 6px 0; justify-content: center; } .menu .mm.right { margin-left: 0; } .menu .mm.right .panel { display: none; }
  .topbar .seg a:not([aria-current]) { display: none; } .topbar .util a:not([href^="tel"]) { display: none; }
}
@media (max-width: 640px) {
  .seg { grid-template-columns: 1fr; } .toolbar .search { margin-left: 0; flex-basis: 100%; }
  .btn-gold, .btn-blue, .btn-ghost { white-space: normal; text-align: center; }
  .page { padding: 28px 0 64px; } main.wrap { padding-top: 28px; padding-bottom: 64px; } .foot .cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .grid4, .grid5 { grid-template-columns: 1fr; } }

/* ---------- trust badges: authorized reseller marks (Mac Wireless's own artwork, no manufacturer logos) ---------- */
.badges { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.badge-r { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line2); border-radius: 8px; padding: 8px 12px 8px 8px; background: linear-gradient(180deg, #FFFFFF, #F3F6FB); }
.badge-r .seal { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gold); display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 11px; color: var(--gold2); background: radial-gradient(circle at 50% 35%, #FBF3D9, #FFFFFF); flex-shrink: 0; }
.badge-r b { display: block; font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); line-height: 1.2; }
.badge-r small { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.badge-r.stripe .seal { border-color: var(--sky); color: var(--sky); }
/* brand marks (Apple logo, Samsung wordmark) — replace with the official program artwork when Apple/Samsung supply it */
.badge-r .mark { display: grid; place-items: center; height: 30px; color: var(--ink); flex-shrink: 0; }
.badge-r .mark.apple { width: 30px; } .badge-r .mark.apple svg { display: block; }
.badge-r .mark.samsung { width: 78px; } .badge-r .mark.samsung svg { display: block; width: 76px; height: auto; }
.badge-r.brand { padding-left: 10px; }
.badge-r .mark.stripe { width: 30px; height: 30px; border-radius: 7px; background: #635BFF; color: #fff; } .badge-r .mark.stripe svg { width: 20px; height: 20px; }  /* Stripe purple tile with the S mark */
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--ink); padding: 10px 14px; border-radius: 4px; z-index: 100; font-weight: 700; } .skip:focus { left: 8px; }

/* ---------- the city (logo skyline, daylight tints) ---------- */
.city { position: relative; isolation: isolate; }
/* the skyline band is cut from our own hero artwork rather than drawn flat, so the city under a section is the city on our posters */
.city::before { content: ''; position: absolute; inset: auto 0 0 0; height: 220px; background: image-set(url(city-day-3200.webp) 2x, url(city-day-1600.webp) 1x) bottom center / auto 220px repeat-x; opacity: 0.8; pointer-events: none; z-index: -1; }
.city.night::before { background-image: image-set(url(city-skyline-3200.webp) 2x, url(city-skyline-1600.webp) 1x); opacity: 0.55; }
.city.tall::before { height: 260px; background-size: auto 260px; opacity: 0.9; }
.city.faint::before { opacity: 0.5; }
.foot.city::before { display: none; }
.art-tile { border-radius: 10px; box-shadow: var(--shadow); }
@media (max-width: 640px) { .city::before { height: 140px; background-size: auto 140px; } }

/* ---------- site search overlay ---------- */
.search-ov { position: fixed; inset: 0; background: rgba(5,7,11,0.62); z-index: 60; display: none; padding: 8vh 16px 0; backdrop-filter: blur(4px); } .search-ov.on { display: block; }
.search-box { max-width: 720px; margin: 0 auto; background: var(--card); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,0.45); padding: 16px; }
.search-form { display: flex; gap: 8px; } .search-form .field { font-size: 18px; min-height: 52px; } .search-form .close { width: 52px; border: 1px solid var(--line2); border-radius: 6px; background: var(--card2); font-size: 26px; cursor: pointer; color: var(--soft); }
.search-hint { font-size: 12.5px; color: var(--muted); padding: 8px 4px 0; }
.search-results { margin-top: 8px; max-height: 60vh; overflow: auto; } .search-results a { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 8px; border-top: 1px solid var(--line); color: var(--text); font-size: 15px; } .search-results a:hover { background: var(--tint-blue); }
.search-results .k { font-family: var(--display); font-weight: 800; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold2); } .search-results .none { padding: 14px 8px; color: var(--muted); font-size: 14px; }

/* ---------- footer: brand row above the columns (every page) ---------- */
.foot-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: center; max-width: var(--wrap); margin: 0 auto 36px; padding-bottom: 28px; border-bottom: 1px solid #1B2334; }
.foot-top .tag { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: #FFFFFF; margin-top: 8px; } .foot-top .tag .gold { color: var(--gold-hi); }
.foot-top nav { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; } .foot-top nav a { color: #C9D0DC; white-space: nowrap; } .foot-top nav a:hover { color: #FFFFFF; }
.foot-top .btn-gold { padding: 12px 22px; }
.foot .tomorrow { font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-hi); }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr; text-align: center; justify-items: center; } .foot-top > div:last-child { align-items: center !important; } }
@media (min-width: 901px) { .foot-top { grid-template-columns: 272px minmax(0, 1fr) 316px; } } @media (min-width: 1220px) { .foot-top nav { flex-wrap: nowrap; } } /* fixed side columns + no re-wrap: the font swap cannot move the footer */

/* ---------- form controls: tap-friendly radios and checkboxes, gold accent ---------- */
input[type=radio], input[type=checkbox] { width: 18px; height: 18px; accent-color: #D4AF37; flex-shrink: 0; vertical-align: -3px; margin: 0 6px 0 0; }
label:has(> input[type=radio]), label:has(> input[type=checkbox]) { cursor: pointer; }
a[href^="mailto:"], .email, .contact-info b, .contact-info a { overflow-wrap: anywhere; }

/* ---------- tile CTA baseline: in a row of equal-height tiles the button sits on the same line ---------- */
.tile > .btn-ghost:last-child, .tile > .btn-gold:last-child, .tile > .btn-blue:last-child, .tile > .btn-outline:last-child { margin-top: auto; align-self: flex-start; }
.empty img { display: block; margin: 0 auto 18px; max-width: 100%; height: auto; }

/* A field the server rejected, so the applicant's eye lands on it rather than on the error line alone. */
.bad-field { border-color: var(--red, #E5484D) !important; box-shadow: 0 0 0 2px rgba(229,72,77,.18); }

/* ---- mailing-list popup (campaign.js) ---- */
.pop-back { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5,7,11,0.72); backdrop-filter: blur(4px); animation: pop-in 0.18s ease-out; }
@keyframes pop-in { from { opacity: 0; } to { opacity: 1; } }
.pop { position: relative; display: grid; grid-template-columns: 300px minmax(0, 420px); width: min(720px, 100%); max-height: min(92vh, 860px); overflow: auto; background: #0B1220; color: #FFFFFF; border: 1px solid #2A3650; border-radius: 16px; box-shadow: 0 40px 90px rgba(0,0,0,0.6); }
.pop-x { position: absolute; top: 10px; right: 14px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--gold-hi); font-size: 30px; line-height: 1; cursor: pointer; border-radius: 8px; }
.pop-x:hover { background: rgba(240,198,74,0.14); }
.pop-art { display: flex; align-items: center; justify-content: center; background: radial-gradient(70% 62% at 50% 42%, rgba(27,95,214,0.38), transparent 72%), linear-gradient(180deg, #05070B, #0B1220); border-right: 1px solid #1F2A3D; padding: 28px; }
.pop-art img { width: 100%; max-width: 300px; height: auto; }
.pop-body { padding: 34px 32px 28px; display: flex; flex-direction: column; gap: 10px; }
.pop-body .eyebrow { color: var(--gold-hi); }
.pop-body h2 { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1.06; margin: 2px 0 0; }
.pop-body h2 .gold { color: var(--gold-hi); }
.pop-lede { font-size: 15.5px; line-height: 1.55; color: #C9D3E6; margin: 0; }
.pop-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pop-form .field { background: #0F172A; border: 1px solid #2A3650; color: #FFFFFF; border-radius: 8px; padding: 13px 14px; font: inherit; font-size: 15px; width: 100%; }
.pop-form .field::placeholder { color: #8A96B0; }
.pop-form .field:focus { outline: 2px solid var(--gold-hi); outline-offset: 1px; border-color: var(--gold-hi); }
.pop-body .sr, .pop-form .sr { color: #C9D3E6; }
.pop-check { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: #AEB8CC; }
.pop-check input { margin-top: 2px; accent-color: var(--gold); }
.pop-fine { font-size: 12.5px; color: #8A96B0; margin: 0; } .pop-fine a { color: #C9D3E6; }
.pop-form .btn-gold { width: 100%; padding: 15px; font-size: 14px; }
.pop-form .result { font-size: 13.5px; } .pop-form .result.bad { color: #FF9B8F; } .pop-form .result.ok { color: #7BE3A6; }
.pop-thanks { font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.35; color: var(--gold-hi); margin: 6px 0 12px; }
.pop-no { background: none; border: 0; color: #AEB8CC; font: inherit; font-size: 13.5px; text-decoration: underline; cursor: pointer; padding: 4px; }
.pop-no:hover { color: #FFFFFF; }
.pop-privacy { font-size: 12px; color: #6F7C93; margin: 0; line-height: 1.5; }
@media (max-width: 720px) { .pop { grid-template-columns: 1fr; } .pop-art { display: none; } .pop-body { padding: 42px 22px 24px; } .pop-body h2 { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .pop-back { animation: none; } }
/* Answer blocks (config/answers/*.html, appended by server/seo.js) and the guides that share their parts: the answer in
   the first sentence, tables with a caption, questions that open in place. */
.mw-ans .wrap { max-width: 980px; }
.mw-ans h2, .mw-ans h2.plain { margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 30px); color: var(--ink); }
.mw-ans h2 + .mw-lead, .mw-lead { font-size: 17px; line-height: 1.65; color: var(--soft); max-width: 46em; margin: 0 0 18px; }
.mw-ans h3 { font-family: var(--display); font-weight: 800; font-size: 18px; margin: 26px 0 8px; }
.mw-ans p, .mw-ans li { font-size: 15.5px; line-height: 1.65; color: var(--soft); }
.mw-ans .mw-gap { height: 26px; }
.mw-tw { overflow-x: auto; margin: 18px 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.mw-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; font-variant-numeric: tabular-nums; }
.mw-table caption { text-align: left; padding: 14px 16px 6px; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink); }
.mw-table th, .mw-table td { text-align: left; padding: 11px 16px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.mw-table thead th { font-family: var(--display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border-top: 0; background: var(--card2); }
.mw-table tbody th { font-weight: 600; color: var(--text); }
.mw-table td { color: var(--soft); }
.mw-qa { display: grid; gap: 10px; margin: 14px 0 6px; }
.mw-qa details { background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.mw-qa summary { cursor: pointer; list-style: none; padding: 16px 20px; font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--ink); display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.mw-qa summary::-webkit-details-marker { display: none; }
.mw-qa summary::after { content: '+'; font-size: 22px; color: var(--gold2); font-weight: 400; flex: none; }
.mw-qa details[open] summary::after { content: '–'; }
.mw-qa summary:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 10px; }
.mw-qa details > div { padding: 0 20px 18px; } .mw-qa details > div p { margin: 0 0 10px; } .mw-qa details > div p:last-child { margin: 0; }
.mw-links { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.mw-links li { margin: 0; }
.mw-links a { display: flex; flex-direction: column; gap: 4px; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.mw-links a b { font-family: var(--display); font-weight: 800; font-size: 15.5px; }
.mw-links a span { font-size: 14px; line-height: 1.5; color: var(--muted); }
.mw-links a:hover, .mw-links a:focus-visible { border-color: var(--gold); }
.mw-facts { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: 0; margin: 14px 0 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.mw-facts dt, .mw-facts dd { margin: 0; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; }
.mw-facts dt { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.mw-facts dd { color: var(--soft); }
.mw-facts dt:first-of-type, .mw-facts dt:first-of-type + dd { border-top: 0; }
.mw-index-all { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.mw-index-all > summary { cursor: pointer; padding: 16px 20px; font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--ink); }
.mw-index-all > summary:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.mw-index-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 28px; padding: 0 20px 20px; }
.mw-index-col h3 { margin: 12px 0 2px; } .mw-index-col .fine { margin: 0 0 8px; }
.mw-index-col ul { list-style: none; padding: 0; margin: 0; }
.mw-index-col li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.mw-index-col li a { color: var(--ink); text-decoration: none; } .mw-index-col li a:hover { color: var(--sky); text-decoration: underline; }
.mw-index-col li span { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .mw-table { min-width: 0; font-size: 14px; } .mw-table th, .mw-table td { padding: 9px 10px; } .mw-table caption { padding: 12px 10px 4px; } .mw-facts { grid-template-columns: 1fr; } .mw-facts dd { border-top: 0; padding-top: 0; } .mw-index-col li { flex-direction: column; gap: 2px; } .mw-index-col li span { white-space: normal; } }
/* links inside definitions, fact lists and the catalog count read as links without relying on color */
.mw-facts dd a, .gl dd a, dd a.sky, .lp-bar .count a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(27,95,214,0.45); }
.hero-pic picture { display: block; }

/* Phones: the city band's call-to-action buttons stack full width. Side by side, whether two fitted on one line depended
   on which font had arrived, so the swap from the fallback face moved everything under them (CLS 0.1 on a phone). */
@media (max-width: 600px) { .actions > .btn-gold, .actions > .btn-blue, .actions > .btn-ghost, .actions > .btn-outline, .actions > .btn-white { flex: 1 1 100%; } }

/* The catalogue hero reserves the box it settles in (440 x 460 with object-fit: contain). The photo behind it is a
   distributor picture of unknown shape — often twice as tall as the placeholder ratio — and without this the box
   resized the moment it arrived (desktop CLS 0.065 on phones.html). */
.hero-pic img { aspect-ratio: 44 / 46; }

/* Text-message consent (carrier / TCR): an optional, never pre-checked box under a form's fields */
.sms-opt { margin: 4px 0 6px; font-size: 12.5px; line-height: 1.5; }
.sms-opt a { word-break: break-word; }