/* ============================================================
   Cable TV and WiFi — home page
   Self-contained: no external fonts, scripts, or images.
   Tokens live on :root. Never style inside a media query —
   redefine tokens instead, so the theme toggle can win.
   ============================================================ */

:root {
  /* --- brand --- */
  --blue:        #1263E6;
  --blue-deep:   #0B4CB8;
  --blue-wash:   #E7F0FE;
  --navy:        #0B2447;
  --navy-soft:   #143260;

  /* --- surfaces (blue-biased neutrals, not flat grey) --- */
  --ground:      #FFFFFF;
  --ground-tint: #F1F6FD;
  --card:        #FFFFFF;
  --band:        #0B2447;
  --line:        #DAE4F3;
  --line-soft:   #EAF0FA;

  /* --- ink --- */
  --ink:         #10203A;
  --ink-mid:     #46587A;
  --ink-soft:    #6E80A0;
  --ink-onband:  #FFFFFF;
  --ink-onband-soft: #A9C0E0;

  /* --- semantic --- */
  --save:        #0C7A55;
  --save-wash:   #E2F4EC;
  --star:        #EFA31D;

  /* --- type --- */
  --display: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t--1: 0.8125rem;
  --t-0:  1rem;
  --t-1:  1.0625rem;
  --t-2:  1.3125rem;
  --t-3:  1.625rem;
  --t-4:  2rem;
  --t-5:  clamp(2.25rem, 1.45rem + 3.3vw, 3.4rem);

  /* --- layout --- */
  --col: 1140px;
  --pad: 24px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --logo: var(--logo-color);

  --shadow-sm: 0 1px 2px rgba(11, 36, 71, .06), 0 2px 8px rgba(11, 36, 71, .05);
  --shadow-md: 0 4px 12px rgba(11, 36, 71, .08), 0 12px 32px rgba(11, 36, 71, .07);
  --shadow-lg: 0 8px 20px rgba(11, 36, 71, .10), 0 24px 56px rgba(11, 36, 71, .11);
}

@media (prefers-color-scheme: dark) {
  :root {
    --blue:        #4E95FF;
    --blue-deep:   #2E7BF0;
    --blue-wash:   #14294A;
    --navy:        #0A1A31;
    --navy-soft:   #16305A;

    --ground:      #0A1526;
    --ground-tint: #0E1C31;
    --card:        #122540;
    --band:        #13294A;
    --line:        #24405F;
    --line-soft:   #1B3253;

    --ink:         #E9F0FA;
    --ink-mid:     #A9BCD8;
    --ink-soft:    #8397B6;
    --ink-onband:  #FFFFFF;
    --ink-onband-soft: #A9C0E0;

    --save:        #4FD3A0;
    --save-wash:   #10362A;
    --star:        #FFBC42;

    --logo: var(--logo-white);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
  }
}

/* The viewer's theme toggle stamps data-theme on :root and must beat the media query. */
:root[data-theme="dark"] {
  --blue: #4E95FF; --blue-deep: #2E7BF0; --blue-wash: #14294A;
  --navy: #0A1A31; --navy-soft: #16305A;
  --ground: #0A1526; --ground-tint: #0E1C31; --card: #122540; --band: #13294A;
  --line: #24405F; --line-soft: #1B3253;
  --ink: #E9F0FA; --ink-mid: #A9BCD8; --ink-soft: #8397B6;
  --save: #4FD3A0; --save-wash: #10362A; --star: #FFBC42;
  --logo: var(--logo-white);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
}
:root[data-theme="light"] {
  --blue: #1263E6; --blue-deep: #0B4CB8; --blue-wash: #E7F0FE;
  --navy: #0B2447; --navy-soft: #143260;
  --ground: #FFFFFF; --ground-tint: #F1F6FD; --card: #FFFFFF; --band: #0B2447;
  --line: #DAE4F3; --line-soft: #EAF0FA;
  --ink: #10203A; --ink-mid: #46587A; --ink-soft: #6E80A0;
  --save: #0C7A55; --save-wash: #E2F4EC; --star: #EFA31D;
  --logo: var(--logo-color);
  --shadow-sm: 0 1px 2px rgba(11,36,71,.06), 0 2px 8px rgba(11,36,71,.05);
  --shadow-md: 0 4px 12px rgba(11,36,71,.08), 0 12px 32px rgba(11,36,71,.07);
  --shadow-lg: 0 8px 20px rgba(11,36,71,.10), 0 24px 56px rgba(11,36,71,.11);
}

* { box-sizing: border-box; }

/* Standalone reset.
   This page ships without a CSS framework and deliberately unloads the theme's
   stylesheet, so the browser's own default margins are all that's left to fight.
   figure and blockquote are the important ones — UA default is `margin: 1em 40px`,
   which otherwise indents every testimonial into a narrow ribbon. */
body, figure, blockquote, figcaption, form,
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd {
  margin: 0;
}

ul, ol { padding: 0; list-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

:where(a, button, summary, input):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

img, svg { max-width: 100%; }

/* ---------- shared layout primitives ---------- */

.wrap {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.band-tint { background: var(--ground-tint); }
.band-navy { background: var(--band); color: var(--ink-onband); }
.band-navy h2, .band-navy h3 { color: var(--ink-onband); }

.eyebrow {
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
}
.band-navy .eyebrow { color: #7FB0FF; }

.lede {
  color: var(--ink-mid);
  font-size: var(--t-1);
  max-width: 62ch;
}

.num { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-size: var(--t-0);
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); }

.btn-outline {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.btn-outline:hover { background: var(--blue-wash); }

.btn-sm { padding: 10px 18px; font-size: var(--t--1); }
.btn-block { width: 100%; }

/* Desktop only: primary buttons drop to 15px. Phones keep the 16px size, since
   smaller tap targets read worse on touch. The compact header button is excluded
   so it keeps its own size — drop the :not(.btn-sm) to bring it along too. */
@media (min-width: 901px) {
  .btn-primary:not(.btn-sm) { font-size: 15px; }
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }

/* Logo artwork, inlined so the page makes no external requests.
   600x150 source, so every rendered size keeps a 4:1 ratio. */
:root {
  --logo-color: url("data:image/png;base64,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");
  --logo-white: url("data:image/png;base64,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");
}

.brand-logo {
  display: block;
  width: 168px;
  height: 42px;
  background: var(--logo) left center / contain no-repeat;
}

.main-nav { display: flex; gap: 26px; margin-right: auto; }

.main-nav a {
  color: var(--ink-mid);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--blue); text-decoration: none; }

.header-phone {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  flex-shrink: 0;
}
.header-phone:hover { text-decoration: none; }
.header-phone svg { color: var(--blue); flex-shrink: 0; }
.header-phone strong { font-size: 0.9375rem; font-weight: 700; display: block; }
.header-phone span { font-size: 0.6875rem; color: var(--ink-soft); display: block; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 900px) {
  .main-nav, .header-phone strong, .header-phone span { display: none; }
  .nav-toggle { display: inline-flex; order: -1; }
  .brand-logo { width: 140px; height: 35px; }
  .brand { margin-inline: auto; }
  .header-cta { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero { position: relative; overflow: hidden; }

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding-block: 72px 128px;
}

.hero h1 {
  font-size: var(--t-5);
  font-weight: 800;
  margin-block: 18px 20px;
}
.hero h1 em {
  color: var(--blue);
  font-style: normal;
  display: block;
}

.hero .lede { max-width: 44ch; }
.hero .lede b { color: var(--blue); font-weight: 700; }

/* ZIP card floats over the band seam below */
.zip-card {
  position: relative;
  z-index: 2;
  margin-top: 34px;
  max-width: 430px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px;
}

.zip-card h2 {
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.zip-row { display: flex; gap: 10px; }

.zip-field { position: relative; flex: 1 1 auto; min-width: 0; }

.zip-field svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue);
  pointer-events: none;
}

.zip-field input {
  width: 100%;
  font-family: var(--body);
  font-size: var(--t-0);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 14px 14px 40px;
}
.zip-field input::placeholder { color: var(--ink-soft); }
.zip-field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}

.zip-note {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  margin-top: 14px;
  font-size: var(--t--1);
  color: var(--ink-mid);
}
.zip-note svg { color: var(--save); flex-shrink: 0; }

.zip-msg {
  margin-top: 12px;
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--blue);
  text-align: center;
}
.zip-msg:empty { display: none; }
.zip-msg[data-state="error"] { color: #C4362F; }

/* Hero art — WiFi arcs. Swap the whole .hero-art block for a photo if you have one. */
.hero-art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 100% at 72% 22%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 62%),
    linear-gradient(160deg, var(--blue-wash), color-mix(in srgb, var(--navy) 16%, var(--ground-tint)));
  overflow: hidden;
}
.hero-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art .arc { fill: none; stroke: var(--blue); stroke-linecap: round; }

@media (prefers-reduced-motion: no-preference) {
  .hero-art .arc { animation: pulse 3.6s ease-in-out infinite; }
  .hero-art .arc:nth-of-type(2) { animation-delay: .35s; }
  .hero-art .arc:nth-of-type(3) { animation-delay: .7s; }
  .hero-art .arc:nth-of-type(4) { animation-delay: 1.05s; }
}
@keyframes pulse {
  0%, 100% { opacity: .30; }
  50%      { opacity: .85; }
}

@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding-block: 40px 92px;
    text-align: center;
  }
  .hero h1 { font-size: clamp(2rem, 1.1rem + 4.4vw, 2.75rem); }
  .hero .lede { margin-inline: auto; font-size: var(--t-0); }
  .zip-card { margin-inline: auto; }
  /* Stacked field + full-width button, matching the mobile comp. */
  .zip-row { flex-direction: column; }
  .zip-row .btn { width: 100%; padding-block: 15px; }
  .hero-art { order: 2; aspect-ratio: 16 / 10; }
}

/* ============================================================
   PROVIDER BAND
   ============================================================ */

.providers { padding-block: 30px 34px; }

.providers p {
  text-align: center;
  font-size: var(--t--1);
  color: var(--ink-onband-soft);
  margin-bottom: 20px;
}

.provider-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 42px;
}

/* Text wordmarks stand in for the real provider logos — see the handoff notes. */
.provider-row span {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  opacity: .82;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .provider-row { gap: 14px 26px; }
  .provider-row span { font-size: 0.9375rem; }
}

/* ============================================================
   VALUE PROPS
   ============================================================ */

.values { padding-block: 56px; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.value {
  padding: 30px 26px;
  text-align: center;
  border-right: 1px solid var(--line-soft);
}
.value:last-child { border-right: 0; }

.value h3 { font-size: var(--t-0); font-weight: 700; margin-bottom: 7px; }
.value p { font-size: 0.9375rem; color: var(--ink-mid); }

.icon-badge {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue-wash);
  color: var(--blue);
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .value-grid { grid-template-columns: 1fr; }
  .value {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    text-align: left;
    padding: 20px 22px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .value:last-child { border-bottom: 0; }
  .icon-badge { grid-row: span 2; width: 44px; height: 44px; margin-bottom: 0; align-self: start; }
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */

.how { padding-block: 56px 68px; text-align: center; }
.how h2 { font-size: var(--t-4); margin-block: 10px 46px; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  position: relative;
}

/* Dotted connector, drawn behind the step markers */
.steps::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 16.66%;
  right: 16.66%;
  border-top: 2px dashed var(--line);
  z-index: 0;
}

.step { position: relative; z-index: 1; padding-inline: 12px; }

.step-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--blue-wash);
  color: var(--blue);
  margin-bottom: 18px;
  box-shadow: 0 0 0 8px var(--ground);
}

.step-mark b {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

.step h3 { font-size: var(--t-1); font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 0.9375rem; color: var(--ink-mid); }

@media (max-width: 780px) {
  .steps { grid-template-columns: 1fr; gap: 0; text-align: left; }
  .steps::before {
    top: 30px; bottom: 30px; left: 30px; right: auto;
    border-top: 0; border-left: 2px dashed var(--line);
  }
  .step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 20px;
    padding: 0 0 26px 0;
  }
  .step-mark { grid-row: span 2; margin-bottom: 0; width: 52px; height: 52px; }
}

/* ============================================================
   DEALS
   ============================================================ */

.deals { padding-block: 60px 68px; }

.deals-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 2fr);
  gap: 40px;
  align-items: center;
}

.deals-intro h2 { font-size: var(--t-3); margin-block: 10px 14px; }
.deals-intro p { color: var(--ink-mid); font-size: 0.9375rem; margin-bottom: 22px; }

.deal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.deal {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 24px 20px;
  text-align: center;
}

.deal-brand {
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}

.deal-speed { font-size: var(--t-2); font-weight: 700; margin-bottom: 6px; }

.deal-price {
  color: var(--blue);
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
}
.deal-price .dollar { font-size: var(--t-2); }
.deal-price .whole  { font-size: 3.25rem; }
.deal-price .cents  { font-size: var(--t-2); align-self: flex-start; padding-top: 6px; }
.deal-price .per    { font-size: var(--t-0); color: var(--ink-mid); font-weight: 600; margin-left: 3px; }
.deal-price .term-inline { display: none; }  /* phones only — see the 640px block */

.deal-term { font-size: var(--t--1); color: var(--ink-soft); margin-block: 6px 14px; }

.deal-save {
  align-self: center;
  background: var(--save-wash);
  color: var(--save);
  font-size: var(--t--1);
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.deal-perks {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 9px;
  text-align: left;
}
.deal-perks li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  color: var(--ink-mid);
}
.deal-perks svg { color: var(--blue); flex-shrink: 0; }

.deal .btn { margin-top: auto; }

@media (max-width: 1000px) {
  .deals-inner { grid-template-columns: 1fr; gap: 26px; }
  .deals-intro { text-align: center; }
  .deals-intro p { margin-inline: auto; }

  /* All three deals stay reachable — swipe instead of hiding two of them. */
  .deal-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1);   /* bleed past .wrap padding */
    padding: 4px var(--pad) 12px;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .deal-grid::-webkit-scrollbar { display: none; }
  .deal { flex: 0 0 85%; scroll-snap-align: center; }
}

/* Compact deal card for phones: price and term share a line, perks run inline. */
@media (max-width: 640px) {
  .deal { padding: 20px 18px; }
  .deal-brand { font-size: var(--t-1); padding-bottom: 12px; margin-bottom: 12px; }
  .deal-speed { font-size: var(--t-1); }
  .deal-price { flex-wrap: wrap; }
  .deal-price .whole { font-size: 2.5rem; }
  .deal-price .term-inline {
    display: inline;
    font-size: var(--t--1);
    color: var(--ink-soft);
    font-family: var(--body);
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 8px;
  }
  .deal-term { display: none; }
  .deal-save { margin-bottom: 14px; }
  .deal-perks {
    grid-auto-flow: column;
    justify-content: center;
    gap: 14px;
    margin-bottom: 16px;
  }
  .deal-perks li { font-size: 0.8125rem; }
  .deal-perks svg { display: none; }
  .deal-perks li + li::before { content: "•"; color: var(--ink-soft); }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.social { padding-block: 56px; }

.social-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: 44px;
  align-items: center;
}

.social-intro h2 { font-size: var(--t-3); margin-block: 10px 14px; }
.social-intro p { color: var(--ink-onband-soft); font-size: 0.9375rem; }

.rating {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.rating-row { display: flex; align-items: center; gap: 12px; }
.rating strong { font-size: var(--t-1); font-weight: 700; color: #fff; }
.rating small { display: block; margin-top: 5px; font-size: var(--t--1); color: var(--ink-onband-soft); }

.stars { display: inline-flex; gap: 2px; color: var(--star); }

.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.quote {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quote-mark { color: var(--blue); opacity: .5; }
.quote p { font-size: 0.9375rem; color: var(--ink-mid); }
.quote .stars { margin-top: auto; }

.quote-by { display: flex; align-items: center; gap: 11px; }

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue-wash);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: var(--t--1);
  font-weight: 700;
  line-height: 1;      /* so the glyph box centres exactly, not the 1.6 line box */
  flex-shrink: 0;
}
.quote-by strong { display: block; font-size: 0.875rem; color: var(--ink); }

/* Excluding .avatar matters: it is also a span inside .quote-by, so a bare
   `.quote-by span` outranks the .avatar rule and would flatten it back to
   display:block — which kills the centring of the initials. */
.quote-by span:not(.avatar) { display: block; font-size: 0.75rem; color: var(--ink-soft); }

@media (max-width: 1000px) {
  .social-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .rating-row { justify-content: center; }
  .quote { text-align: left; }

  .quote-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1);
    padding: 4px var(--pad) 12px;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .quote-grid::-webkit-scrollbar { display: none; }
  .quote { flex: 0 0 85%; scroll-snap-align: center; }
}

/* ---------- carousel dots (injected by script, mobile only) ---------- */

.dots {
  display: none;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}

.dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}
.band-navy .dots button { background: rgba(255, 255, 255, .3); }

.dots button[aria-current="true"] { background: var(--blue); width: 20px; border-radius: 999px; }
.band-navy .dots button[aria-current="true"] { background: #fff; }

@media (max-width: 1000px) {
  .dots { display: flex; }
}

/* ============================================================
   FAQ
   ============================================================ */

.faq { padding-block: 62px 70px; }

.faq-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.faq h2 { font-size: var(--t-3); margin-bottom: 22px; }

.faq-list { display: grid; gap: 10px; }

.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue); }

.faq-sign {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--blue);
}
.faq-sign::before,
.faq-sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.faq-sign::before { inset: 7px 0; height: 2px; }               /* horizontal bar */
.faq-sign::after  { inset: 0 7px; width: 2px; }                /* vertical bar */
.faq-item[open] .faq-sign::after { transform: rotate(90deg); opacity: 0; }

.faq-item .answer {
  padding: 0 18px 18px;
  font-size: 0.9375rem;
  color: var(--ink-mid);
  max-width: 62ch;
}

.help-card {
  background: var(--blue-wash);
  border-radius: var(--r-lg);
  padding: 30px 26px;
  text-align: center;
}
.help-card h3 { font-size: var(--t-2); margin-bottom: 8px; }
.help-card > p { font-size: 0.9375rem; color: var(--ink-mid); margin-bottom: 20px; }

.help-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.help-phone:hover { text-decoration: none; color: var(--blue); }
.help-phone svg { color: var(--blue); }

.help-hours {
  font-size: var(--t--1);
  color: var(--ink-soft);
  margin-block: 6px 20px;
}

@media (max-width: 880px) {
  .faq-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer { padding-block: 52px 0; }

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding-bottom: 40px;
}

.site-footer .brand-logo { background-image: var(--logo-white); }

.footer-blurb {
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--ink-onband-soft);
  max-width: 30ch;
}

.footer-col h4 {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-onband-soft);
  margin-bottom: 14px;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col a { color: #fff; font-size: 0.875rem; opacity: .88; }
.footer-col a:hover { opacity: 1; }

.socials { display: flex; gap: 14px; margin-top: 20px; color: #fff; }
.socials a { color: #fff; opacity: .8; display: inline-flex; }
.socials a:hover { opacity: 1; }

.colophon {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-block: 20px 26px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink-onband-soft);
}

@media (max-width: 780px) {
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .footer-brand-col { grid-column: 1 / -1; }
}

/* ============================================================
   PHONE-SIZE RHYTHM
   Vertical spacing is generous on desktop and too loose on a phone.
   Tightened here in one place rather than per-section.
   ============================================================ */

@media (max-width: 640px) {
  :root { --pad: 20px; }

  .values  { padding-block: 34px; }
  .how     { padding-block: 34px 44px; }
  .deals   { padding-block: 38px 44px; }
  .social  { padding-block: 36px; }
  .faq     { padding-block: 40px 46px; }
  .site-footer { padding-block: 38px 0; }

  .how h2, .deals-intro h2, .social-intro h2, .faq h2 { font-size: var(--t-3); }
  .how h2 { margin-block: 8px 32px; }

  .help-card { padding: 26px 22px; }
  .faq-item summary { padding: 15px 16px; }
  .faq-item .answer { padding: 0 16px 16px; }
}

/* ============================================================
   DEALS FLOW
   Providers -> plans -> address -> confirmation.
   Inherits every token from the landing page stylesheet above.
   ============================================================ */

.flow { padding-block: 44px 72px; min-height: 60vh; }

.flow-head { max-width: 62ch; margin-bottom: 32px; }
.flow-head h1 { font-size: var(--t-4); margin-block: 10px 12px; }
.flow-head .lede { font-size: var(--t-1); }

.back-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.flow-foot {
  margin-top: 30px;
  font-size: 0.9375rem;
  color: var(--ink-mid);
}

.flow-alert {
  background: #FDECEA;
  color: #8A2A22;
  border: 1px solid #F3C2BC;
  border-radius: var(--r-md);
  padding: 13px 16px;
  font-size: 0.9375rem;
  margin-bottom: 22px;
}

:root[data-theme="dark"] .flow-alert,
.flow-alert:where(:root[data-theme="dark"] *) {
  background: #3A1512;
  color: #FFC7BF;
  border-color: #6B2A22;
}

/* ---------- progress stepper ---------- */

.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

.step-pip {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.step-pip .pip {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--line-soft);
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.step-pip[data-state="current"] { color: var(--ink); font-weight: 600; }
.step-pip[data-state="current"] .pip { background: var(--blue); color: #fff; }

.step-pip[data-state="done"] { color: var(--ink-mid); }
.step-pip[data-state="done"] .pip { background: var(--save-wash); color: var(--save); }

/* ---------- provider grid ---------- */

.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.provider-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 20px;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.provider-card:hover {
  text-decoration: none;
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.provider-card-name {
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.tech-badge {
  background: var(--blue-wash);
  color: var(--blue);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.provider-card-blurb { font-size: 0.875rem; color: var(--ink-mid); }

.provider-card-meta {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.provider-card .btn { margin-top: auto; }

/* ---------- plan cards ---------- */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
  align-items: start;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 22px 22px;
  text-align: center;
}
.plan-card.is-featured {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
}

.plan-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

.plan-name { font-size: var(--t-1); font-weight: 700; margin-bottom: 10px; }
.plan-speed { font-size: var(--t-3); font-weight: 800; font-family: var(--display); letter-spacing: -0.02em; }
.plan-upload { font-size: 0.8125rem; color: var(--ink-soft); margin-bottom: 14px; }

.plan-perks {
  list-style: none;
  margin: 4px 0 20px;
  padding: 0;
  display: grid;
  gap: 9px;
  text-align: left;
}
.plan-perks li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  color: var(--ink-mid);
}
.plan-perks svg { color: var(--save); flex-shrink: 0; }

.plan-card .btn { margin-top: auto; }

/* ---------- address step ---------- */

.address-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.address-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 24px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { grid-column: 1 / -1; }

.field-split { flex-direction: row; gap: 16px; }
.field-inner { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; }

.field label,
.field-inner label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-mid);
}

.req { color: #C4362F; }
.opt { color: var(--ink-soft); font-weight: 400; }

.field input,
.field-inner input {
  width: 100%;
  font-size: var(--t-0);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 13px;
}
.field input:focus,
.field-inner input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}
.field input[readonly] { background: var(--ground-tint); color: var(--ink-soft); }

.field.has-error input { border-color: #C4362F; background: #FEF6F5; }

.btn-lg { padding: 16px 24px; font-size: var(--t-1); }

.consent {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  text-align: center;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- selection summary ---------- */

.plan-summary {
  background: var(--blue-wash);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  position: sticky;
  top: 92px;
}

.plan-summary h2 {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 12px;
}

.summary-provider {
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.summary-plan { font-size: 0.9375rem; color: var(--ink-mid); margin-bottom: 16px; }

.summary-rows { display: grid; gap: 9px; margin: 0 0 16px; }
.summary-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.875rem;
  padding-bottom: 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.summary-rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.summary-rows dt { color: var(--ink-mid); }
.summary-rows dd { margin: 0; font-weight: 600; }

.summary-note { font-size: 0.75rem; color: var(--ink-soft); line-height: 1.5; }

/* ---------- empty + confirmation ---------- */

.empty-state {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px 28px;
  text-align: center;
}
.empty-state h2 { font-size: var(--t-2); margin-bottom: 8px; }
.empty-state p { color: var(--ink-mid); }
.empty-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }

.thanks { max-width: 60ch; margin-inline: auto; text-align: center; padding-block: 20px 10px; }

.thanks-mark {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--save-wash);
  color: var(--save);
  margin-bottom: 22px;
}

.thanks h1 { font-size: var(--t-4); margin-bottom: 16px; }
.thanks .lede { margin-inline: auto; }

.thanks-card {
  background: var(--blue-wash);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  margin-top: 32px;
}
.thanks-card-label { font-size: 0.9375rem; color: var(--ink-mid); margin-bottom: 10px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .address-layout { grid-template-columns: 1fr; }
  .plan-summary { position: static; order: -1; }
}

@media (max-width: 640px) {
  .flow { padding-block: 30px 48px; }
  .flow-head h1, .thanks h1 { font-size: var(--t-3); }
  .field-grid { grid-template-columns: 1fr; }
  .address-form { padding: 22px 18px; }
  .stepper { gap: 8px 16px; }
  .step-pip .pip-label { display: none; }
  .step-pip[data-state="current"] .pip-label { display: inline; }
}

/* Starting price on the provider card. */
.provider-from {
  display: block;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 2px;
}


/* ============================================================
   BLOG + LONG-FORM PROSE
   Blog index, archives, single posts, privacy policy.
   ============================================================ */

.blog-index { padding-block: 44px 72px; }

/* ---------- category chips ---------- */

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 30px;
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-mid);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.cat-chip:hover {
  text-decoration: none;
  border-color: var(--blue);
  color: var(--blue);
}

.cat-chip.is-current {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.cat-count {
  background: var(--blue-wash);
  color: var(--blue);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.6875rem;
  font-weight: 700;
}
.cat-chip.is-current .cat-count {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* ---------- post cards ---------- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.post-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.post-card-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ground-tint); }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px;
  flex: 1 1 auto;
}

.post-card-cat {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
}

.post-card-title { font-size: var(--t-1); font-weight: 700; line-height: 1.3; }
.post-card-title a { color: var(--ink); }
.post-card-title a:hover { color: var(--blue); text-decoration: none; }

.post-card-excerpt { font-size: 0.9375rem; color: var(--ink-mid); }

.post-card-meta {
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* ---------- pagination ---------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.pager-count { font-size: 0.875rem; color: var(--ink-soft); }

.pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-mid);
}
.pager .page-numbers:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.pager .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- long-form prose ---------- */

.prose-page { padding-block: 44px 72px; }

.prose-head { max-width: 62ch; margin-bottom: 30px; }
.prose-head h1 { font-size: var(--t-4); margin-block: 10px 10px; }

.prose-updated { font-size: 0.875rem; color: var(--ink-soft); }

.post-hero {
  margin-bottom: 30px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.post-hero img { width: 100%; height: auto; display: block; }

.prose {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-mid);
}

.prose > * + * { margin-top: 1.1em; }

.prose h2 {
  font-size: var(--t-2);
  color: var(--ink);
  margin-top: 2em;
  margin-bottom: 0.1em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line-soft);
}
.prose h3 { font-size: var(--t-1); color: var(--ink); margin-top: 1.7em; }

.prose p { color: var(--ink-mid); }

.prose-lead {
  font-size: var(--t-1);
  color: var(--ink);
  padding: 18px 20px;
  background: var(--blue-wash);
  border-radius: var(--r-md);
}

.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.55em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { color: var(--ink-mid); }
.prose li::marker { color: var(--blue); }

.prose strong { color: var(--ink); font-weight: 700; }

.prose blockquote {
  border-left: 3px solid var(--blue);
  padding-left: 18px;
  color: var(--ink-mid);
  font-style: italic;
}

.prose img { border-radius: var(--r-md); height: auto; }

.prose :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.prose :where(th, td) {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
}
.prose :where(th) { color: var(--ink); font-weight: 700; }

/* Wide content must scroll in its own box, never the page body. */
.prose :where(pre) {
  overflow-x: auto;
  background: var(--ground-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  font-size: 0.875rem;
}

/* ---------- post footer nav ---------- */

.post-cats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 40px; }

.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.post-nav-link {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.post-nav-link:hover { border-color: var(--blue); text-decoration: none; }
.post-nav-next { text-align: right; grid-column: 2; }

.post-nav-dir { font-size: 0.75rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.07em; }
.post-nav-title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }

/* ---------- closing CTA ---------- */

.blog-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding: 28px 26px;
  background: var(--blue-wash);
  border-radius: var(--r-lg);
}
.blog-cta h2 { font-size: var(--t-2); margin-bottom: 5px; }
.blog-cta p { color: var(--ink-mid); font-size: 0.9375rem; }

@media (max-width: 640px) {
  .blog-index, .prose-page { padding-block: 30px 48px; }
  .prose-head h1 { font-size: var(--t-3); }
  .prose { font-size: 1rem; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-next { text-align: left; grid-column: 1; }
  .blog-cta { flex-direction: column; align-items: flex-start; }
}