/* 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: swap; 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: swap; 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: swap; 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: swap; 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: swap; 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.5%; 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: 92.5%; 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.9%; 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%; 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: 95%; 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: 97.5%; 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: 94.5%; 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: 93.9%; 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 .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; }
.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; color: var(--ink); min-height: 40px; font-size: 12px; border-radius: 6px; font-weight: 800; letter-spacing: 0.16em; }
.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 { 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; }
.btn-gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--ink); } .btn-gold:hover { box-shadow: 0 6px 24px rgba(201,154,30,0.35); transform: translateY(-1px); }
.btn-gold.big { width: 100%; padding: 18px; font-size: 15px; }
.btn-blue { background: transparent; border: 1px solid var(--blue); color: var(--sky); font-weight: 700; } .btn-blue:hover { background: rgba(27,95,214,0.08); }
.btn-ghost { background: transparent; border: 1px solid var(--gold); color: var(--gold2); font-weight: 700; } .btn-ghost:hover { background: rgba(201,154,30,0.1); }
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 .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; }
.city::before { content: ''; position: absolute; inset: auto 0 0 0; height: 220px; background: url(city-light.svg) bottom center / auto 220px repeat-x; opacity: 0.55; pointer-events: none; z-index: -1; }
.city.tall::before { height: 260px; background-size: auto 260px; opacity: 0.7; }
.city.faint::before { opacity: 0.32; }
.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); }