/* ========================================
   TOKENS
   ======================================== */

@font-face {
  font-family: 'Eloquia Display';
  src: url('/fonts/EloquiaDisplay-Bold.woff2') format('woff2'),
       url('/fonts/EloquiaDisplay-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #f5f5f7;
  --color-bg-secondary: #F4F2F0;
  --color-black: #231F20;
  --color-white: #FFFFFF;
  --color-text: #231F20;
  --color-text-secondary: #554844;
  --color-text-tertiary: #8A7F7B;
  --color-blue: #6497BF;
  --color-blue-hover: #4F7FA8;
  --color-red: #C02026;
  --color-red-hover: #A31B20;
  --color-taupe: #554844;
  --color-link: #6497BF;
  --color-link-hover: #4F7FA8;
  --color-border: #D1CBC8;
  --color-border-light: #E5E0DD;
  --color-green: #4A8C5C;
  --color-amber: #C08A30;

  --font-display: 'Eloquia Display', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --tracking-tight: -0.03em;
  --tracking-normal: -0.016em;

  --w-content: 980px;
  --w-narrow: 680px;

  --space-section: clamp(80px, 10vw, 140px);
}

/* ========================================
   RESET
   ======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.47;
  color: var(--color-text);
  background: var(--color-bg);
  letter-spacing: var(--tracking-normal);
}

img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  color: var(--color-text);
}

/* ========================================
   LAYOUT
   ======================================== */
.container {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow {
  max-width: var(--w-narrow);
}

.container--plans {
  max-width: 1520px;
}

.section {
  padding: var(--space-section) 0;
  border-top: 1px solid var(--color-border-light);
}

.section--tinted {
  background: var(--color-bg-secondary);
}

.section--dark + .section,
.stats-band + .section,
.promises + .section,
.photo-pair + .section,
.hero + .section,
.page-hero + .section,
.about-intro + .stats-band,
.about-intro + .section,
.section:first-child {
  border-top: none;
}

.page-hero + .section {
  padding-top: 0;
}

.section--dark {
  border-top: none;
}

.section--dark {
  background: var(--color-black);
  color: rgba(255,255,255,0.86);
}

.section--dark h2,
.section--dark h3 {
  color: #fff;
}

.section--dark p {
  color: rgba(255,255,255,0.7);
}

.section--dark .split-content p {
  color: rgba(255,255,255,0.7);
}

.section-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 64px;
}

.section-head h2 {
  font-size: clamp(32px, 4.5vw, 48px);
  margin-bottom: 16px;
}

.section-head p {
  font-size: 19px;
  color: var(--color-text-secondary);
  line-height: 1.42;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
  border-radius: 980px;
  padding: 12px 28px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none;
  line-height: 1.18;
  white-space: nowrap;
}

.btn:hover { text-decoration: none; }

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

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

.btn--dark {
  background: var(--color-black);
  color: #fff;
}

.btn--dark:hover {
  background: #3A3536;
}

.btn--red {
  background: var(--color-red);
  color: #fff;
}

.btn--red:hover {
  background: var(--color-red-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--color-blue);
  padding: 12px 4px;
}

.btn--ghost:hover {
  color: var(--color-blue-hover);
  text-decoration: underline;
}

.btn--ghost::after {
  content: '→';
  margin-left: 6px;
  display: inline-block;
}

.btn--ghost-light {
  background: transparent;
  color: rgba(255,255,255,0.86);
  padding: 12px 4px;
}

.btn--ghost-light:hover {
  color: #fff;
  text-decoration: underline;
}

.btn--ghost-light::after {
  content: '→';
  margin-left: 6px;
  display: inline-block;
}

.btn--large {
  font-size: 19px;
  padding: 16px 36px;
}

.btn-short { display: none; }

@media (max-width: 560px) {
  .btn-full { display: none; }
  .btn-short { display: inline; }
}

.btn--white {
  background: #fff;
  color: var(--color-text);
}

.btn--white:hover {
  background: rgba(255,255,255,0.88);
}

/* ========================================
   HEADER
   ======================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border-light);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo:hover { text-decoration: none; }

.logo-img {
  height: 32px;
  width: auto;
  filter: invert(1);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-link {
  display: block;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  opacity: 0.72;
  border-radius: 6px;
  transition: opacity 0.15s;
  text-decoration: none;
}

.nav-link:hover { opacity: 1; color: var(--color-blue); text-decoration: none; }

.nav-cta {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  margin-left: 8px;
}

.nav-account {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  margin-left: 8px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--color-text);
  border-radius: 1px;
  transition: all 0.2s;
}

.hamburger { position: relative; }
.hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; }
.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 16px 24px 24px;
    border-bottom: 1px solid var(--color-border-light);
    gap: 4px;
  }
  .main-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; width: 100%; }
  .nav-link { padding: 10px 16px; font-size: 17px; opacity: 0.88; }
  .nav-cta { margin-left: 0; margin-top: 8px; width: 100%; font-size: 17px; padding: 12px; }
  .nav-account { margin-left: 0; margin-top: 8px; width: 100%; font-size: 17px; padding: 12px; }

  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity 0.25s;
  }

  .nav-is-open .nav-overlay { display: block; }
}

/* ========================================
   HERO
   ======================================== */
.hero {
  padding: clamp(60px, 10vw, 120px) 0 clamp(40px, 5vw, 56px);
  text-align: center;
}

/* Place line above a page headline. The headline stays a brand line; this names
   the Hendry County towns people actually type into a search box. Same 13px eyebrow
   as the paid pages. */
.hero-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.hero-sub {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--color-text-secondary);
  line-height: 1.42;
  max-width: 540px;
  margin: 0 auto 40px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Hero image — full-bleed edge to edge */
.hero-image {
  width: 100%;
  line-height: 0;
}

.hero-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hero-image-grid img {
  width: 100%;
  height: clamp(300px, 40vw, 520px);
  object-fit: cover;
}

.hero-image-grid img:first-child {
  object-position: center 40%;
}

.hero-image-grid img:last-child {
  object-position: center 30%;
}

@media (max-width: 640px) {
  .hero-image-grid {
    grid-template-columns: 1fr;
  }
  .hero-image-grid img:first-child {
    display: none;
  }
  .hero-image-grid img:last-child {
    height: 240px;
  }
}

/* ========================================
   STATS BAND
   ======================================== */
.stats-band {
  background: var(--color-black);
  padding: clamp(28px, 4vw, 44px) 0;
}

.stats-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stats-band-item {
  text-align: center;
  position: relative;
}

.stats-band-item + .stats-band-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(255,255,255,0.1);
}

.stats-band-value {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: #fff;
}

.stats-band-label {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin-top: 6px;
}

@media (max-width: 560px) {
  .stats-band-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
  .stats-band-item:nth-child(3)::before {
    display: none;
  }
}

/* ========================================
   SPLIT SECTIONS (image + text side by side)
   ======================================== */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.split-section--reverse .split-media {
  order: 1;
}

.split-media img {
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
  aspect-ratio: 4/3;
}

.split-content h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: 20px;
}

.split-content p {
  font-size: 17px;
  color: var(--color-text-secondary);
  line-height: 1.58;
  margin-bottom: 16px;
}

.split-content p:last-of-type {
  margin-bottom: 28px;
}

@media (max-width: 700px) {
  .split-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .split-section--reverse .split-media {
    order: 0;
  }
}

/* ========================================
   PHOTO PAIR (two-column image grid)
   ======================================== */
.photo-pair {
  padding: clamp(80px, 10vw, 140px) 0;
}

.section:has(+ .photo-pair) {
  padding-bottom: 0;
}

.section--tinted:has(+ .photo-pair),
.section--dark:has(+ .photo-pair) {
  padding-bottom: var(--space-section);
}

.photo-pair + .section:not(.section--dark):not(.section--tinted) {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}


.photo-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.photo-pair-grid img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 16px;
}

@media (max-width: 640px) {
  .photo-pair-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ========================================
   PROMISES
   ======================================== */
.promises {
  background: var(--color-black);
  padding: clamp(80px, 10vw, 120px) 0;
}

.promises-heading {
  color: rgba(255,255,255,0.4);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: clamp(40px, 5vw, 64px);
  display: flex;
  align-items: center;
  gap: 6px;
}

.promises-logo {
  height: 1.1em;
  width: auto;
  display: inline-block;
  vertical-align: baseline;
  opacity: 0.4;
}

.promises-list {
  display: flex;
  flex-direction: column;
  max-width: 560px;
}

.promise-row {
  padding: clamp(32px, 4vw, 48px) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.promise-row:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.promise-statement {
  font-size: clamp(28px, 4vw, 44px);
  color: #fff;
  line-height: 1.1;
  margin-bottom: 16px;
}

.promise-detail {
  font-size: 17px;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
}

/* ========================================
   PLANS
   ======================================== */
.plans-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

.toggle-group {
  display: inline-flex;
  background: var(--color-bg-secondary);
  border-radius: 980px;
  padding: 3px;
}

.toggle-btn {
  padding: 7px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 980px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-btn.is-active {
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.location-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.location-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.plans-bbl-note {
  font-size: 13px;
  color: var(--color-text-tertiary);
  text-align: center;
  margin-top: 16px;
}

.plans-bbl-note a {
  color: var(--color-text-tertiary);
  text-decoration: underline;
}

.plans-bbl-note a:hover {
  color: var(--color-text);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.plans-panel[data-plantype="business"] .plans-grid,
.plans-grid--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 940px;
}

.plans-panel--gge .plans-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 940px;
}

.plan-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  padding: 36px 28px 32px;
  transition: box-shadow 0.3s;
  position: relative;
  display: flex;
  flex-direction: column;
}

.plan-card:hover {
  box-shadow: 0 8px 36px rgba(0,0,0,0.08);
}

.plan-card--featured {
  background: var(--color-black);
  color: rgba(255,255,255,0.86);
  border-color: var(--color-black);
  transform: scale(1.03);
}

.plan-card--featured:hover {
  box-shadow: 0 12px 48px rgba(0,0,0,0.25);
}

.plan-card--featured .plan-label {
  color: rgba(255,255,255,0.5);
}

.plan-card--featured .plan-name {
  color: #fff;
}

.plan-card--featured .plan-speed {
  color: rgba(255,255,255,0.7);
}

.plan-card--featured .plan-speed-burst {
  color: rgba(255,255,255,0.45);
}

.plan-card--featured .plan-desc {
  color: rgba(255,255,255,0.6);
}

.plan-card--featured .plan-price {
  color: #fff;
}

.plan-card--featured .plan-price span {
  color: rgba(255,255,255,0.5);
}

.plan-card--featured .plan-period {
  color: rgba(255,255,255,0.45);
}

.plan-card--featured .plan-features li {
  color: rgba(255,255,255,0.7);
}

.plan-card--featured .plan-features li + li {
  border-color: rgba(255,255,255,0.1);
}

.plan-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  height: 17px;
  margin-bottom: 8px;
}

.plan-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 12px;
}

.plan-speed {
  font-size: 15px;
  color: var(--color-text-secondary);
  font-weight: 500;
  line-height: 1.3;
}

.plan-speed-burst {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin-bottom: 12px;
}

.plan-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.45;
  min-height: 40px;
  margin-bottom: 20px;
}

.plan-price {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 4px;
}

.plan-price span {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  letter-spacing: 0;
}

.plan-period {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin-bottom: 28px;
}

.plan-price-location {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 28px;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.plan-card--featured .plan-price-location {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.15);
}

.compare-check-address {
  font-style: normal;
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.plan-features {
  margin-bottom: 28px;
  flex-grow: 1;
}

.plan-features li {
  padding: 8px 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.plan-features li + li {
  border-top: 1px solid var(--color-border-light);
}

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

.plan-bbl-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-blue);
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  text-align: center;
}

.plan-bbl-link:hover {
  text-decoration: underline;
}

.plan-card--featured .plan-bbl-link {
  color: rgba(255,255,255,0.6);
}

.plan-card--featured .plan-bbl-link:hover {
  color: #fff;
}

/* Broadband Facts Label — FCC Template */
.bbl {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}

.bbl.bbl--open {
  display: flex;
}

.bbl-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
}

.bbl-sheet {
  position: relative;
  background: #fff;
  border-radius: 16px;
  max-width: 460px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding: 24px;
}

.bbl-close {
  position: fixed;
  top: 24px;
  right: 24px;
  background: var(--color-black);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.bbl-close:hover {
  background: var(--color-red);
}

.bbl-label {
  border: 2px solid #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #000;
  line-height: 1.35;
}

.bbl-hdr {
  padding: 8px 10px;
  border-bottom: 2px solid #000;
}

.bbl-hdr-title {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.bbl-hdr-provider {
  font-size: 13px;
  margin-bottom: 1px;
}

.bbl-hdr-plan {
  font-size: 13px;
}

.bbl-hdr-type {
  font-size: 11px;
  color: #444;
}

.bbl-sec {
  padding: 4px 10px;
  border-bottom: 1px solid #ccc;
}

.bbl-sec--thick {
  border-bottom: 2px solid #000;
}

.bbl-r {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
  font-size: 13px;
  gap: 8px;
}

.bbl-r span:last-child {
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}

.bbl-r--lg {
  font-weight: 700;
  font-size: 15px;
  padding: 4px 0;
}

.bbl-r--heading {
  font-weight: 700;
  font-size: 14px;
  padding: 4px 0 2px;
}

.bbl-r--sub {
  font-weight: 600;
  font-size: 12px;
  padding: 4px 0 1px 8px;
}

.bbl-r--in {
  padding-left: 16px;
  font-size: 12px;
}

.bbl-r--gap {
  height: 6px;
}

.bbl-sec a {
  color: #000;
  font-size: 12px;
  word-break: break-all;
}

.bbl-foot {
  padding: 8px 10px;
  font-size: 11px;
  color: #444;
  line-height: 1.4;
}

.bbl-foot p {
  margin-bottom: 4px;
}

.bbl-foot-link {
  text-align: right;
  font-weight: 600;
  color: #000;
}

.bbl-foot-id {
  font-size: 10px;
  color: #888;
  border-top: 1px solid #ccc;
  padding-top: 6px;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .bbl-sheet {
    padding: 16px;
  }
  .bbl-hdr-title {
    font-size: 26px;
  }
}

/* Address Check Modal — Apple-inspired */
.address-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

body.address-modal-is-open .pac-container {
  display: none !important;
}

.address-modal.address-modal--open {
  display: flex;
}

.address-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.address-modal-sheet {
  position: relative;
  background: #fff;
  border-radius: 20px;
  max-width: 380px;
  width: calc(100% - 40px);
  padding: 48px 32px 36px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
  text-align: center;
}

.address-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.address-modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

.address-modal-icon {
  margin-bottom: 16px;
  color: var(--color-red);
}

.address-modal-icon svg {
  display: inline-block;
}

.address-modal-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-black);
  margin-bottom: 8px;
}

.address-modal-body {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 28px;
}

.address-modal-cta {
  width: 100%;
  display: block;
}

@media (max-width: 480px) {
  .address-modal-sheet {
    padding: 40px 24px 28px;
  }
  .address-modal-title {
    font-size: 20px;
  }
  .address-modal-body {
    font-size: 14px;
  }
}

.plans-footnote {
  font-size: 13px;
  color: var(--color-text-tertiary);
  text-align: center;
  margin-top: 24px;
  line-height: 1.5;
}

.plans-more {
  text-align: center;
  margin-top: 40px;
}

/* First Responder Pricing */
.plan-price-original {
  text-decoration: line-through;
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  margin-right: 6px;
}

.plan-card--featured .plan-price-original {
  color: rgba(255,255,255,0.35);
}

.fr-role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .fr-role-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .fr-role-grid {
    grid-template-columns: 1fr;
  }
}

.fr-role-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: left center;
  text-decoration: none;
}

.fr-role-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 24px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%);
  transition: background 0.3s;
}

.fr-role-card:hover .fr-role-card-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.15) 100%);
}

.fr-role-card:hover {
  text-decoration: none;
}

.fr-role-card h3 {
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.15;
}

.fr-role-card p {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
  margin-bottom: 0;
}

.fr-role-link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  margin-top: 12px;
  transition: color 0.2s;
}

.fr-role-card:hover .fr-role-link {
  color: #fff;
}

.fr-detail-header {
  padding: clamp(48px, 6vw, 80px) 0;
}

.fr-detail-header h1 {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.08;
  margin-bottom: 16px;
}

.fr-detail-sub {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--color-text-secondary);
  line-height: 1.47;
  margin-bottom: 32px;
}

.fr-detail-story {
  font-size: 17px;
  color: var(--color-text-secondary);
  line-height: 1.65;
  max-width: 640px;
  margin-bottom: 36px;
}

@media (max-width: 1100px) {
  .plans-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
  }
}

@media (max-width: 720px) {
  .plans-grid { grid-template-columns: 1fr; max-width: 380px; }

  /* The three-card grids (Golden Gate Estates and Business) set their columns with
     two-class selectors, which outranked the rule above and kept three squeezed
     cards side by side on a 390px phone. Same specificity here so they stack. */
  .plans-panel[data-plantype="business"] .plans-grid,
  .plans-panel--gge .plans-grid { grid-template-columns: 1fr; max-width: 380px; }
}

/* ========================================
   CITY LIST (used in coverage split-section)
   ======================================== */
.city-list-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

.city-list-group {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 14px;
  padding: 14px 16px;
}

.city-list-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.city-list-heading--active {
  color: var(--color-green);
}

.city-list-heading--upcoming {
  color: var(--color-amber);
}

.city-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.city-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--color-text);
}

.city-item--link {
  text-decoration: none;
  transition: color 0.15s;
}

.city-item--link:hover {
  color: var(--color-blue);
  text-decoration: none;
}

.city-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.city-dot--active { background: var(--color-green); }
.city-dot--upcoming { background: var(--color-amber); }

.city-item--upcoming { color: var(--color-text-secondary); }

@media (max-width: 820px) {
  .city-list-groups {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   TESTIMONIALS
   ======================================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testimonial {
  background: var(--color-bg-secondary);
  border-radius: 20px;
  padding: 36px 32px;
}

.testimonial-stars {
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--color-amber);
  margin-bottom: 12px;
}

.testimonial-quote {
  margin-bottom: 16px;
}

.testimonial-quote blockquote {
  font-size: 17px;
  line-height: 1.52;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testimonial.is-expanded .testimonial-quote blockquote {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.testimonial-toggle {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-blue);
  cursor: pointer;
  margin-bottom: 20px;
  display: block;
}

.testimonial-toggle:hover {
  color: var(--color-blue-hover);
  text-decoration: underline;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.testimonial-avatar img,
.testimonial-avatar svg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
}

.testimonial-avatar img {
  object-fit: cover;
}

.testimonial-attribution {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.3;
}

.testimonial-name {
  font-weight: 600;
}

.testimonial-location {
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.testimonial-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.testimonial-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-stars-sm {
  font-size: 14px;
  color: var(--color-amber);
  letter-spacing: 1px;
  margin-top: 2px;
}

.reviews-summary {
  font-size: 17px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.reviews-stars {
  color: var(--color-amber);
  letter-spacing: 1px;
}

.reviews-cta {
  text-align: center;
  margin-top: 36px;
}

@media (max-width: 700px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* ========================================
   CTA BAND
   ======================================== */
.cta-band {
  text-align: center;
  padding: var(--space-section) 0 clamp(40px, 5vw, 64px);
  background: var(--color-bg-secondary);
}

.cta-band h2 {
  font-size: clamp(32px, 4.5vw, 48px);
  margin-bottom: 12px;
}

.cta-band p {
  font-size: 19px;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.42;
}

.first-responder-hero {
  background: url('/images/first_responders_hero.jpg') center/cover no-repeat;
}

.first-responder-hero-inner {
  background: rgba(0,0,0,0.55);
  padding: var(--space-section) 0;
}

.first-responder-hero h2 {
  color: #fff;
  font-size: clamp(28px, 4vw, 42px);
}

.first-responder-hero p {
  color: rgba(255,255,255,0.85);
  font-size: 19px;
  line-height: 1.47;
  max-width: 540px;
  margin: 0 auto 28px;
}

.cta-band--dark {
  background: var(--color-black);
}

.cta-band--dark h2 {
  color: #fff;
}

.cta-band--dark p {
  color: rgba(255,255,255,0.6);
}

.cta-band-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ========================================
   BREADCRUMB
   ======================================== */
.breadcrumb {
  padding: 0;
  margin-bottom: 16px;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  font-size: 13px;
  color: var(--color-text-tertiary);
  min-width: 0;
}

.breadcrumb-list li {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.breadcrumb-list li + li::before {
  content: '›';
  margin: 0 8px;
  color: var(--color-border);
}

.breadcrumb-list li[aria-current="page"] {
  display: block;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.breadcrumb-list a {
  color: var(--color-text-tertiary);
}

.breadcrumb-list a:hover {
  color: var(--color-blue);
}

.page-hero .breadcrumb,
.article-header .breadcrumb {
  margin-bottom: 16px;
}

.page-hero .breadcrumb-list {
  justify-content: center;
}

/* ========================================
   CITY CONTEXT (markdown body on city pages)
   ======================================== */
.city-context h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 16px;
}

.city-context h3 {
  font-size: clamp(18px, 2.2vw, 22px);
  margin-top: 32px;
  margin-bottom: 12px;
}

.city-context p {
  font-size: 17px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.city-context p:last-child {
  margin-bottom: 0;
}

.city-context a {
  color: var(--color-link);
}

.city-context a:hover {
  color: var(--color-link-hover);
}

/* ========================================
   PAGE HERO (interior pages)
   ======================================== */
.page-hero {
  padding: clamp(56px, 8vw, 100px) 0;
  text-align: center;
}

.page-hero h1 {
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 16px;
}

.page-hero-sub {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--color-text-secondary);
  line-height: 1.47;
  max-width: 560px;
  margin: 0 auto;
}

/* ========================================
   COMPARISON TABLE
   ======================================== */
.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 580px;
}

.compare-table--business {
  display: none;
}

.compare-table th,
.compare-table td {
  padding: 14px 16px;
  text-align: center;
  vertical-align: middle;
}

.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--color-text-secondary);
  width: 160px;
}

.compare-table thead th {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  padding-bottom: 20px;
  border-bottom: 2px solid var(--color-border);
}

.compare-table tbody tr {
  border-bottom: 1px solid var(--color-border-light);
}

.compare-table tbody td {
  color: var(--color-text);
}

.compare-table tfoot td {
  padding-top: 24px;
  padding-bottom: 8px;
  border: none;
}

.compare-table-featured {
  background: rgba(35, 31, 32, 0.03);
}

.compare-table thead .compare-table-featured {
  background: rgba(35, 31, 32, 0.03);
  border-radius: 12px 12px 0 0;
}

.compare-table tfoot .compare-table-featured {
  border-radius: 0 0 12px 12px;
}

.btn--small {
  font-size: 14px;
  padding: 8px 20px;
}

.compare-table .activity-tight {
  color: var(--color-amber);
}

.compare-table .activity-no {
  color: var(--color-text-tertiary);
}

@media (max-width: 640px) {
  .compare-table {
    font-size: 13px;
  }
  .compare-table th,
  .compare-table td {
    padding: 10px 10px;
  }
  .compare-table th:first-child,
  .compare-table td:first-child {
    width: 120px;
  }
}

/* ========================================
   INCLUDED SECTION (dark, promises-style)
   ======================================== */
.included-section {
  border-top: none;
}

.included-header {
  margin-bottom: clamp(40px, 5vw, 64px);
}

.included-header h2 {
  font-size: clamp(32px, 4.5vw, 48px);
  color: #fff;
  margin-bottom: 12px;
}

.included-header p {
  font-size: 19px;
  color: rgba(255,255,255,0.45);
  line-height: 1.47;
}

.included-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(48px, 6vw, 80px);
}

.included-row {
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.included-row:nth-last-child(-n+2) {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.included-statement {
  font-size: clamp(20px, 2.5vw, 26px);
  color: #fff;
  line-height: 1.15;
  margin-bottom: 10px;
}

.included-detail {
  font-size: 15px;
  color: rgba(255,255,255,0.45);
  line-height: 1.55;
}

@media (max-width: 640px) {
  .included-list {
    grid-template-columns: 1fr;
  }
  .included-row:nth-last-child(2) {
    border-bottom: none;
  }
}

/* ========================================
   USAGE GUIDE CARDS
   ======================================== */
.usage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 940px;
  margin: 0 auto;
}



.usage-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}

.usage-card--featured {
  border-color: var(--color-black);
  border-width: 2px;
}

.usage-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.usage-card-header h3 {
  font-size: 22px;
  line-height: 1.2;
}

.usage-plan-tag {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
  background: var(--color-bg-secondary);
  padding: 4px 10px;
  border-radius: 980px;
}

.usage-card--featured .usage-plan-tag {
  background: var(--color-black);
  color: rgba(255,255,255,0.7);
}

.usage-speed {
  font-size: 15px;
  color: var(--color-text-secondary);
  margin-bottom: 20px;
}

.usage-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.usage-list li {
  padding: 8px 0;
  font-size: 15px;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border-light);
}

.usage-tier-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: 6px;
}

.usage-card--featured .usage-tier-label {
  color: rgba(255,255,255,0.45);
}

.usage-examples {
  font-size: 13px;
  color: var(--color-text-tertiary, #999);
  line-height: 1.5;
  margin-top: 4px;
}

.usage-card--featured .usage-examples {
  color: rgba(255,255,255,0.35);
}

.usage-rec {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-light);
}

.usage-rec strong {
  color: var(--color-text);
}

@media (max-width: 720px) {
  .usage-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
  }
}

/* ========================================
   FAQ
   ======================================== */
.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--color-border-light);
}

.faq-item:first-child {
  border-top: 1px solid var(--color-border-light);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  line-height: 1.35;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: '+';
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 300;
  color: var(--color-text-tertiary);
  margin-left: 16px;
  transition: transform 0.2s;
}

.faq-item[open] .faq-question::after {
  content: '−';
}

.faq-answer {
  padding-bottom: 24px;
}

.faq-answer p {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.faq-answer p + p {
  margin-top: 12px;
}

.faq-footer {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border-light);
}

.faq-footer p {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.faq-footer a {
  color: var(--color-link);
  font-weight: 500;
}

/* ========================================
   CARD GRID (resources, compare hubs)
   ======================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px;
}

.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-bg-secondary);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  text-decoration: none;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.card-image {
  overflow: hidden;
  line-height: 0;
}

.card-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card:hover .card-image img {
  transform: scale(1.03);
}

.card-body {
  padding: 20px 24px 24px;
}

.card-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
}

.card-title {
  font-size: 21px;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: 8px;
}

.card-desc {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

.article-header {
  padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 48px);
}

.article-category {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-bottom: 12px;
}

.article-header h1 {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.08;
  margin-bottom: 16px;
}

.article-intro {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--color-text-secondary);
  line-height: 1.47;
}

.article-updated {
  margin-top: 20px;
  font-size: 14px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.01em;
}

.article-hero {
  margin-bottom: 0;
  line-height: 0;
}

.article-hero + .article-header,
.article-hero + .about-intro,
.article-hero + .fr-detail-header {
  padding-top: clamp(80px, 10vw, 140px);
}

.article-hero + .page-hero {
  padding-top: clamp(56px, 8vw, 100px);
}

.article-hero img {
  width: 100%;
  height: clamp(240px, 30vw, 420px);
  object-fit: cover;
}

.article-body {
  padding-bottom: var(--space-section);
  /* Source lists quote bare URLs that are wider than a phone. */
  overflow-wrap: break-word;
}

.article-body h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-top: clamp(40px, 5vw, 56px);
  margin-bottom: 16px;
}

.article-body h3 {
  font-size: clamp(18px, 2.2vw, 22px);
  margin-top: 32px;
  margin-bottom: 12px;
}

.article-body p {
  font-size: 17px;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: 16px;
}

.article-body ul,
.article-body ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.article-body li {
  font-size: 17px;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: 6px;
  list-style: disc;
}

.article-body ol li {
  list-style: decimal;
}

.article-body a {
  color: var(--color-link);
}

.article-body a:hover {
  color: var(--color-link-hover);
}

.article-body a.btn--red,
.article-body a.btn--red:hover,
.article-body a.btn--dark,
.article-body a.btn--dark:hover,
.article-body a.btn--primary,
.article-body a.btn--primary:hover {
  color: #fff;
}

.article-body strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Answer-first summary at the top of a guide. Search and answer engines lift the
   first plain paragraph that answers the question, so it sits above the story.
   Same treatment as .routers-callout so the site keeps one callout look. */
.article-callout {
  background: var(--color-bg-secondary);
  border-left: 3px solid var(--color-blue);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 0 0 32px;
}

.article-body .article-callout p {
  margin: 0;
  color: var(--color-text);
}

/* Wrapper from layouts/_default/_markup/render-table.html. The table keeps its own
   look; the wrapper only takes over the vertical margin and scrolls on overflow. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0;
}

.article-body .table-scroll > table {
  margin: 0;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
}

.article-figure {
  margin: 32px 0;
}

.article-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.article-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: center;
  font-style: italic;
}

.article-pullquote {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin: 40px 0;
  padding: 28px 32px;
  background: var(--color-bg-secondary);
  border-left: 4px solid var(--color-red, #c8102e);
  border-radius: 8px;
}

.article-pullquote-photo {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
}

.article-pullquote-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-pullquote-body {
  flex: 1;
  min-width: 0;
}

.article-pullquote-quote {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.45;
  color: var(--color-text);
  font-weight: 500;
  margin: 0 0 16px 0;
  padding: 0;
  border: none;
}

.article-pullquote-quote p {
  margin: 0 0 12px 0;
}

.article-pullquote-quote p:last-child {
  margin-bottom: 0;
}

.article-pullquote-attribution {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.3;
}

.article-pullquote-attribution a {
  text-decoration: none;
  color: inherit;
}

.article-pullquote-attribution a:hover .article-pullquote-name {
  text-decoration: underline;
}

.article-pullquote-name {
  font-weight: 600;
  color: var(--color-text);
}

.article-pullquote-title {
  color: var(--color-text-secondary);
  font-size: 13px;
}

@media (max-width: 600px) {
  .article-pullquote {
    flex-direction: column;
    gap: 16px;
    padding: 24px;
  }

  .article-pullquote-photo {
    width: 64px;
    height: 64px;
  }
}

.article-body th,
.article-body td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}

.article-body th {
  font-weight: 600;
  color: var(--color-text);
}

.article-body td {
  color: var(--color-text-secondary);
}

.article-related {
  padding: var(--space-section) 0;
  border-top: 1px solid var(--color-border-light);
}

.article-related-heading {
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

.related-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-bg-secondary);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-card:hover {
  text-decoration: none;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.related-card-image {
  overflow: hidden;
  line-height: 0;
}

.related-card-image img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.related-card:hover .related-card-image img {
  transform: scale(1.03);
}

.related-card-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.related-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.related-card-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}

.related-card:hover .related-card-title {
  color: var(--color-blue);
}

@media (max-width: 560px) {
  .related-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .related-card-image img {
    height: 120px;
  }
  .related-card-desc {
    display: none;
  }
}

/* ========================================
   COVERAGE GRID (city cards)
   ======================================== */
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  max-width: 940px;
  margin: 0 auto;
}

.coverage-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.coverage-card:hover {
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border-color: var(--color-border);
}

.coverage-card--upcoming {
  background: transparent;
  border-style: dashed;
}

.coverage-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}

.coverage-card h3 {
  font-size: 22px;
  line-height: 1.15;
  color: var(--color-text);
}

.coverage-card-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-blue);
  margin-top: auto;
}

.coverage-card:hover .coverage-card-link {
  text-decoration: underline;
}

.section--tinted .coverage-card {
  background: #fff;
}

/* ========================================
   NEARBY LINKS (coverage page)
   ======================================== */
.nearby-links {
  margin-top: 28px;
}

.nearby-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  border-bottom: 1px solid var(--color-border-light);
  text-decoration: none;
  transition: background 0.18s;
}

.nearby-link:first-child {
  border-top: 1px solid var(--color-border-light);
}

.nearby-link:hover {
  text-decoration: none;
  background: rgba(0,0,0,0.02);
}

.nearby-link-name {
  font-size: 19px;
  font-weight: 600;
  color: var(--color-text);
  transition: color 0.18s;
}

.nearby-link:hover .nearby-link-name {
  color: var(--color-blue);
}

.nearby-link-arrow {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  transition: transform 0.18s, color 0.18s;
}

.nearby-link:hover .nearby-link-arrow {
  transform: translateX(4px);
  color: var(--color-blue);
}

/* ========================================
   HOW IT WORKS (numbered steps)
   ======================================== */
.step-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.step {
  display: flex;
  gap: 24px;
  padding: clamp(28px, 3.5vw, 40px) 0;
  border-top: 1px solid var(--color-border-light);
}

.step:last-child {
  border-bottom: 1px solid var(--color-border-light);
}

.step-number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-black);
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.step-content h3 {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.2;
  margin-bottom: 8px;
}

.step-content p {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* ========================================
   CONTACT PAGE
   ======================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 80px);
  align-items: start;
}

.contact-form-col h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 28px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  padding: 12px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23554844' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(100, 151, 191, 0.15);
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form .btn {
  align-self: flex-start;
}

.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.contact-info-block h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
}

.contact-info-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: 8px;
  text-decoration: none;
}

.contact-info-value:hover {
  color: var(--color-blue);
  text-decoration: none;
}

.contact-info-block p {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.contact-area-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  margin: 8px 0;
}

.contact-area-list li {
  font-size: 15px;
  color: var(--color-text);
}

.contact-area-note {
  font-size: 14px;
  color: var(--color-text-tertiary);
  font-style: italic;
  margin-bottom: 12px;
}

.contact-info-block .btn {
  margin-top: 4px;
}

@media (max-width: 700px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .form-row--half {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   AJAX FORMS
   ======================================== */
.af {
  position: relative;
  transition: min-height 380ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Honeypot: bots fill it, people never see it. */
.af-gotcha { display: none; }

.af-form-wrap {
  transition: opacity 240ms ease, transform 240ms ease;
}

.af-form-wrap.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* --- Field-level validation --- */
.af-field-error {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--color-red);
  animation: af-fade 200ms ease;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--color-red);
  background: rgba(192, 32, 38, 0.04);
}

.form-field.has-error input:focus,
.form-field.has-error select:focus,
.form-field.has-error textarea:focus {
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(192, 32, 38, 0.14);
}

.form-field.has-error {
  animation: af-shake 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes af-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* --- Submit button spinner --- */
.af-submit {
  position: relative;
}

.af-submit.is-sending {
  padding-right: 52px;
  opacity: 0.9;
  cursor: default;
}

.af-submit.is-sending::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 22px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: af-spin 620ms linear infinite;
}

@keyframes af-spin { to { transform: rotate(360deg); } }

/* --- Submission failure --- */
.af-error {
  padding: 12px 14px;
  background: rgba(192, 32, 38, 0.08);
  border-left: 3px solid var(--color-red);
  border-radius: 4px;
  color: var(--color-red);
  font-size: 14.5px;
  line-height: 1.5;
  animation: af-drop 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes af-drop {
  from { opacity: 0; transform: translateY(-6px); }
}

/* --- Thank-you panel --- */
.af-success {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  padding: 8px 0 4px;
}

.af-success.is-visible {
  opacity: 1;
  transform: none;
}

.af-success h2:focus { outline: none; }

.af-success-badge {
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--color-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(74, 140, 92, 0.28);
  opacity: 0;
  transform: scale(0.6);
}

.af-success.is-visible .af-success-badge {
  animation: af-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms forwards;
}

@keyframes af-pop {
  to { opacity: 1; transform: scale(1); }
}

/* The checkmark draws itself once the badge has landed. */
.af-success-badge path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

.af-success.is-visible .af-success-badge path {
  animation: af-draw 420ms ease 400ms forwards;
}

@keyframes af-draw { to { stroke-dashoffset: 0; } }

.af-success h2,
.af-success-lead,
.af-success-actions {
  opacity: 0;
  transform: translateY(8px);
}

.af-success.is-visible h2 { animation: af-rise 460ms ease 240ms forwards; }
.af-success.is-visible .af-success-lead { animation: af-rise 460ms ease 340ms forwards; }
.af-success.is-visible .af-success-actions { animation: af-rise 460ms ease 440ms forwards; }

@keyframes af-rise {
  to { opacity: 1; transform: none; }
}

@keyframes af-fade {
  from { opacity: 0; }
}

.af-success h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 12px;
}

.af-success-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 460px;
}

.af-success-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .af,
  .af-form-wrap,
  .af-success {
    transition: none;
  }
  .af-success,
  .af-success h2,
  .af-success-lead,
  .af-success-actions,
  .af-success-badge {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .af-success-badge path { stroke-dashoffset: 0; }
  .af-field-error,
  .af-error,
  .form-field.has-error,
  .af-submit.is-sending::after {
    animation: none;
  }
}

/* ========================================
   CHECK AVAILABILITY
   ======================================== */
.ca-hero {
  padding: clamp(80px, 12vw, 160px) 0 clamp(48px, 6vw, 80px);
  text-align: center;
}

.ca-hero h1 {
  font-size: clamp(40px, 7vw, 64px);
  margin-bottom: 16px;
}

.ca-hero-sub {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--color-text-secondary);
  line-height: 1.47;
  max-width: 480px;
  margin: 0 auto 40px;
}

.ca-input-wrap {
  display: flex;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
}

.ca-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 980px;
  padding: 16px 24px;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}

.ca-input:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(100,151,191,0.15);
}

.ca-btn {
  flex-shrink: 0;
}

.ca-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Wizard */
.ca-wizard {
  padding: 0 0 var(--space-section);
}

.ca-image-row {
  margin: 0;
  line-height: 0;
}

.ca-image-row img {
  width: 100%;
  height: clamp(220px, 28vw, 380px);
  object-fit: cover;
  display: block;
}

.ca-step {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  scroll-margin-top: 120px;
}

#ca-step-plans {
  max-width: 1520px;
}

.ca-step-title {
  font-size: clamp(24px, 4vw, 34px);
  margin-bottom: 8px;
}

.ca-step-desc {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  max-width: 480px;
  margin: 0 auto 28px;
}

/* Step progress bar */
.ca-step-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
}

.ca-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--color-bg-secondary);
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.ca-step-dot--active {
  background: var(--color-red);
  color: #fff;
}

.ca-step-dot--done {
  background: var(--color-green, #4a8c5c);
  color: #fff;
  font-size: 15px;
}

.ca-step-line {
  width: 40px;
  height: 2px;
  background: var(--color-border-light);
}

.ca-step-line--done {
  background: var(--color-green, #4a8c5c);
}

/* Status badges */
.ca-step-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--color-green, #4a8c5c);
  background: rgba(74,140,92,0.08);
  border-radius: 980px;
  padding: 8px 20px;
  margin-bottom: 24px;
}

.ca-step-status strong {
  color: var(--color-text);
}

.ca-check-icon {
  font-weight: 700;
}

.ca-step-status--out {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--color-text);
  background: #fff;
  border: 1px solid rgba(192, 138, 48, 0.28);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  padding: 16px 18px;
  max-width: 640px;
  margin: 0 auto 24px;
}

.ca-step-status-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.ca-step-status-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.ca-step-status--out strong {
  display: block;
  margin-top: 0;
  line-height: 1.3;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  word-break: break-word;
}

.ca-out-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(192, 138, 48, 0.14);
  color: var(--color-amber, #c08a30);
  border: 1px solid rgba(192, 138, 48, 0.35);
  font-weight: 700;
}

/* Plan selection cards */
.ca-plan-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
  text-align: left;
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.ca-plan-cards#ca-res-gge,
.ca-plan-cards#ca-biz {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 980px;
}

.ca-plan-card {
  position: relative;
  cursor: pointer;
  border: 2px solid var(--color-border-light);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ca-plan-card:hover {
  border-color: var(--color-text-tertiary);
}

.ca-plan-card--featured {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: scale(1.02);
}

.ca-plan-card.is-selected {
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(196,44,54,0.15);
}

.ca-plan-card.is-selected .ca-plan-card-inner::after {
  content: "✓ Selected";
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-red);
}

.ca-plan-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ca-plan-card-inner {
  padding: 20px;
}

.ca-plan-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--color-red);
  border-radius: 6px;
  padding: 3px 8px;
  display: inline-block;
  margin-bottom: 10px;
}

.ca-plan-name {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}

.ca-plan-speed {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
}

.ca-plan-price {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 14px;
}

.ca-plan-price span {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.ca-plan-feats {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.ca-plan-feats li::before {
  content: "✓ ";
  color: var(--color-green, #4a8c5c);
  font-weight: 600;
}

/* Type toggle (residential / business) */
.ca-type-toggle {
  display: inline-flex;
  background: var(--color-bg-secondary);
  border-radius: 980px;
  padding: 4px;
  margin-bottom: 24px;
}

.ca-type-btn {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-radius: 980px;
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ca-type-btn.is-active {
  background: var(--color-black);
  color: #fff;
}

/* First responder opt-in */
.ca-fr-optgroup {
  text-align: left;
  max-width: 460px;
  margin: 0 auto 24px;
  padding: 16px 20px;
  background: var(--color-bg-secondary);
  border-radius: 14px;
}

.ca-fr-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.ca-fr-check-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-red);
}

.ca-fr-role-wrap {
  margin-top: 14px;
}

.ca-select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 10px 14px;
  -webkit-appearance: none;
  appearance: none;
}

.ca-select:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(100,151,191,0.15);
}

.ca-fr-note {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: 8px;
}

/* Plan card price overrides for FR */
.ca-plan-price-original {
  text-decoration: line-through;
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  margin-right: 4px;
}

.ca-plan-savings {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-green, #4a8c5c);
  margin-bottom: 12px;
}

.ca-next-btn {
  width: 100%;
  max-width: 360px;
}

.ca-next-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Order / lead form */
.ca-order-form {
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

.ca-form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.ca-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  line-height: 1;
  margin-bottom: 16px;
}

.ca-field input,
.ca-date-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  padding: 12px 16px;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.ca-field input:focus,
.ca-date-input:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(100,151,191,0.15);
}

/* Optional referral — switch reveals the field */
.ca-referral {
  background: var(--color-bg-secondary);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 20px;
  transition: border-color 0.24s ease, background-color 0.24s ease;
}

.ca-referral.is-open {
  border-color: var(--color-border-light);
  background: #fff;
}

.ca-switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ca-switch-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  cursor: pointer;
  /* The switch itself is the hit target on the right; this label drives it too. */
  -webkit-tap-highlight-color: transparent;
}

.ca-switch-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.35;
}

.ca-switch-hint {
  font-size: 12px;
  color: var(--color-text-tertiary);
  line-height: 1.35;
}

.ca-switch-input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  background: var(--color-border);
  cursor: pointer;
  transition: background-color 0.24s ease;
}

.ca-switch-input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(35, 31, 32, 0.28);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.ca-switch-input:hover {
  background: var(--color-text-tertiary);
}

.ca-switch-input:checked,
.ca-switch-input:checked:hover {
  background: var(--color-red);
}

.ca-switch-input:checked::after {
  transform: translateX(18px);
}

.ca-switch-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(192, 32, 38, 0.22);
}

/* 0fr → 1fr animates to the content's natural height. Browsers without
   animatable grid-template-rows simply snap open, which is fine. */
.ca-referral-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s ease,
              visibility 0.3s;
}

.ca-referral.is-open .ca-referral-reveal {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}

.ca-referral-reveal-inner {
  overflow: hidden;
  min-height: 0;
}

.ca-referral .ca-field {
  padding-top: 16px;
}

.ca-referral .ca-field input {
  background: var(--color-bg-secondary);
}

.ca-referral-note {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin: 8px 0 0;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .ca-referral,
  .ca-referral-reveal,
  .ca-switch-input,
  .ca-switch-input::after {
    transition: none;
  }
}

.ca-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin: 0 0 18px;
}

.ca-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--color-red);
  flex: 0 0 auto;
}

.ca-consent a {
  color: var(--color-text);
  text-decoration: underline;
}

.ca-consent a:hover {
  color: var(--color-red);
}

/* Schedule step — calendar */
.ca-cal-wrap {
  max-width: 340px;
  margin: 0 auto 28px;
}

.ca-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ca-cal-month {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}

.ca-cal-nav {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.ca-cal-nav:hover:not(:disabled) {
  border-color: var(--color-text-tertiary);
}

.ca-cal-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ca-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.ca-cal-dow {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 0 8px;
}

.ca-cal-day {
  position: relative;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg-secondary);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 8px 0;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.ca-cal-day:hover:not(:disabled) {
  border-color: var(--color-text-tertiary);
}

.ca-cal-day--selected {
  border-color: var(--color-red);
  background: rgba(196,44,54,0.06);
  color: var(--color-red);
  font-weight: 700;
}

.ca-cal-day--blank {
  background: transparent;
  cursor: default;
}

.ca-cal-day--weekend,
.ca-cal-day--past {
  color: var(--color-text-tertiary);
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.ca-cal-day--full {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  text-decoration: line-through;
  opacity: 0.45;
}

.ca-cal-loading {
  font-size: 14px;
  color: var(--color-text-tertiary);
  text-align: center;
  padding: 12px 0;
}

.ca-cal-loading[hidden] {
  display: none;
}

/* Slots */
.ca-slots-instruction {
  font-size: 15px;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
  text-align: center;
}

.ca-slots-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.ca-slots {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.ca-slot-btn {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border-light);
  border-radius: 12px;
  padding: 14px 20px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ca-slot-btn:hover:not(:disabled) {
  border-color: var(--color-text-tertiary);
}

.ca-slot-btn.is-selected {
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(196,44,54,0.12);
  color: var(--color-red);
  font-weight: 600;
}

.ca-slot-btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.ca-slots-note {
  font-size: 14px;
  color: var(--color-text-tertiary);
  margin-bottom: 20px;
}

/* Order summary */
.ca-summary {
  max-width: 420px;
  margin: 0 auto 28px;
  background: var(--color-bg-secondary);
  border-radius: 14px;
  padding: 20px;
  text-align: left;
}

.ca-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 14px;
}

.ca-summary-row span {
  color: var(--color-text-secondary);
}

.ca-summary-row strong {
  text-align: right;
  max-width: 60%;
}

/* Confirmation */
.ca-confirm-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  background: rgba(74,140,92,0.12);
  color: var(--color-green, #4a8c5c);
  margin-bottom: 24px;
}

.ca-confirm-icon--amber {
  background: rgba(192,138,48,0.12);
  color: var(--color-amber, #c08a30);
}

@media (max-width: 700px) {
  .ca-plan-cards {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .ca-input-wrap {
    flex-direction: column;
  }
  .ca-btn {
    width: 100%;
  }
  .ca-slots {
    flex-direction: column;
    align-items: stretch;
  }
  .ca-step-status--out {
    text-align: center;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
  }
  .ca-step-status-label {
    font-size: 12px;
  }
  .ca-step-status--out strong {
    font-size: 15px;
  }
  .ca-out-icon {
    margin: 0 auto;
  }
  .ca-step-status--out strong {
    margin-top: 0;
  }
  .ca-step {
    scroll-margin-top: 92px;
  }
}

/* ========================================
   ABOUT / INTRO + ORIGIN
   ======================================== */
.about-intro {
  padding: clamp(56px, 8vw, 100px) 0 var(--space-section);
}

.about-intro-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto clamp(56px, 7vw, 88px);
}

.about-intro-header h1 {
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 16px;
}

.about-intro-header p {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--color-text-secondary);
  line-height: 1.47;
}

.about-origin {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.about-origin-media img {
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
  aspect-ratio: 3/4;
}

.about-origin-content h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: 20px;
}

.about-origin-content p {
  font-size: 17px;
  color: var(--color-text-secondary);
  line-height: 1.58;
  margin-bottom: 16px;
}

.about-origin-content p:last-child {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .about-origin {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-origin-media img {
    aspect-ratio: 4/3;
  }
}

/* ========================================
   ABOUT / TEAM
   ======================================== */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 48px);
}

@media (max-width: 800px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
}

.team-card {
  text-align: center;
  /* Clears the sticky header when deep-linked, e.g. /about/#omar-hernandez */
  scroll-margin-top: 96px;
}

.team-photo {
  margin-bottom: 16px;
}

.team-photo img,
.team-photo-placeholder svg {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.team-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}

.team-title {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.team-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-light);
  text-align: center;
}

.team-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.team-fact-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}

.team-fact-value {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.team-photo-link {
  display: block;
  cursor: pointer;
}

.team-photo-link:hover img {
  opacity: 0.88;
  transition: opacity 0.2s;
}

/* ========================================
   LIGHTBOX
   ======================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.lightbox-content {
  position: relative;
  max-width: 560px;
  width: 90vw;
  transform: scale(0.95);
  transition: transform 0.25s;
}

.lightbox.is-open .lightbox-content {
  transform: scale(1);
}

.lightbox-img {
  width: 100%;
  border-radius: 16px;
  display: block;
}

.lightbox-caption {
  text-align: center;
  margin-top: 16px;
}

.lightbox-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}

.lightbox-title {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
}

.lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}

.lightbox-close:hover {
  color: #fff;
}

/* ========================================
   CAREERS
   ======================================== */


.careers-dark-band {
  background: var(--color-black);
  padding: clamp(60px, 8vw, 100px) 0;
}

.careers-dark-band h2,
.careers-dark-band h3 {
  color: #fff;
}

.careers-dark-band p,
.careers-dark-band .split-content p {
  color: rgba(255,255,255,0.7);
}

/* ----------------------------------------
   CAREERS / JOB LISTINGS
   ---------------------------------------- */

.careers-perks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  margin-top: 40px;
}

.careers-perk h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.careers-perk p {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

@media (max-width: 600px) {
  .careers-perks { grid-template-columns: 1fr; gap: 28px; }
}

.job-listings {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.job-listing {
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.job-listing + .job-listing {
  margin-top: 16px;
}

.job-listing[open] {
  box-shadow: 0 2px 16px rgba(35, 31, 32, 0.06);
}

.job-listing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  cursor: pointer;
  list-style: none;
  gap: 20px;
}

.job-listing-header::-webkit-details-marker {
  display: none;
}

.job-listing-header:hover {
  background: var(--color-bg-secondary);
}

.job-listing-info {
  flex: 1;
}

.job-listing-title {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
}

.job-listing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.job-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.01em;
}

.job-listing-toggle {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  position: relative;
  border-radius: 50%;
  background: var(--color-bg-secondary);
  transition: transform 0.2s;
}

.job-listing-toggle::before,
.job-listing-toggle::after {
  content: '';
  position: absolute;
  background: var(--color-text-secondary);
  top: 50%;
  left: 50%;
  border-radius: 2px;
}

.job-listing-toggle::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.job-listing-toggle::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
  transition: transform 0.2s, opacity 0.2s;
}

.job-listing[open] .job-listing-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.job-listing-body {
  padding: 16px 28px 32px;
}

.job-section {
  margin-top: 28px;
}

.job-section:first-child {
  margin-top: 0;
}

.job-section h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--color-text);
  letter-spacing: 0;
  line-height: 1.3;
}

.job-section p {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.job-section p:last-child {
  margin-bottom: 0;
}

.job-section ul {
  list-style: none;
  padding: 0;
}

.job-section li {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  padding: 6px 0 6px 20px;
  position: relative;
}

.job-section li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  background: var(--color-red);
  border-radius: 50%;
}

.job-section li strong {
  color: var(--color-text);
  font-weight: 600;
}

.job-apply {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-light);
}

@media (max-width: 600px) {
  .job-listing-header { padding: 20px; }
  .job-listing-body { padding: 0 20px 24px; }
}

/* ========================================
   FOOTER
   ======================================== */
.site-footer {
  background: var(--color-black);
  font-size: 13px;
  padding: clamp(28px, 3vw, 36px) 0 clamp(24px, 3vw, 36px);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-col h4 {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  color: rgba(255,255,255,0.44);
  font-size: 13px;
}

.footer-col a:hover {
  color: #fff;
  text-decoration: none;
}

.footer-connect-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-connect-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-connect-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}

.footer-connect-block a {
  width: fit-content;
}

.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 14px;
}

.footer-social a {
  color: rgba(255,255,255,0.35);
  transition: color 0.2s;
}

.footer-social a:hover {
  color: #fff;
}

.footer-legal {
  padding-top: clamp(20px, 3vw, 28px);
  color: rgba(255,255,255,0.28);
  font-size: 12px;
  line-height: 1.6;
}

.footer-legal p + p {
  margin-top: 4px;
}

.footer-legal a {
  color: rgba(255,255,255,0.28);
}

.footer-legal a:hover {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ─── Referral Program — Steps Grid ─────────────────────────────────── */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 2rem;
}

.step-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-card .step-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-black);
  color: #fff;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.step-card h3 {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.2;
  margin: 0;
}

.step-card p {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 860px) {
  .steps-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ─── Business Page — Tier Split Cards ──────────────────────────────── */

.tier-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 2rem;
}

.tier-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  padding: clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tier-card--featured {
  background: var(--color-black);
  border-color: var(--color-black);
}

.tier-card-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue);
}

.tier-card--featured .tier-card-label {
  color: rgba(255,255,255,0.5);
}

.tier-card h3 {
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.15;
  margin: 0;
}

.tier-card--featured h3 {
  color: #fff;
}

.tier-card p {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

.tier-card--featured p {
  color: rgba(255,255,255,0.55);
}

.tier-card .usage-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tier-card .usage-list li {
  font-size: 15px;
  color: var(--color-text-secondary);
  padding: 8px 0 8px 18px;
  position: relative;
  border-top: 1px solid var(--color-border-light);
}

.tier-card .usage-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-blue);
}

.tier-card--featured .usage-list li {
  color: rgba(255,255,255,0.55);
  border-top-color: rgba(255,255,255,0.1);
}

.tier-cta-line {
  font-size: 15px;
  margin: 0;
}

.tier-card--featured .tier-cta-line {
  color: rgba(255,255,255,0.55);
}

.tier-card--featured .tier-cta-line strong {
  color: #fff;
}

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

@media (max-width: 760px) {
  .tier-split { grid-template-columns: 1fr; gap: 20px; }
}

/* ─── Routers Page — Pricing + Gear Cards ───────────────────────────── */

.routers-callout {
  background: var(--color-bg-secondary);
  border-left: 3px solid var(--color-blue);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 0 auto;
}

.routers-callout p {
  margin: 0;
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.tier-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
}

.tier-price-amount {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.tier-price-period {
  font-size: 15px;
  color: var(--color-text-secondary);
}

.tier-card--featured .tier-price-amount { color: #fff; }
.tier-card--featured .tier-price-period { color: rgba(255,255,255,0.55); }

.tier-price-note {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: -8px 0 0;
}

.tier-card--featured .tier-price-note { color: rgba(255,255,255,0.55); }

.gear-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 2rem;
}

.gear-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  padding: 28px 24px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.gear-card-media {
  background: var(--color-bg);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.gear-card-media img {
  width: 100%;
  max-width: 180px;
  height: 180px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

.gear-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin: 0 0 6px;
}

.gear-card h3 {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 8px;
}

.gear-card p {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 760px) {
  .gear-grid { grid-template-columns: 1fr; gap: 20px; }
  .gear-card { flex-direction: row; text-align: left; align-items: center; gap: 20px; padding: 20px; }
  .gear-card-media { margin-bottom: 0; flex-shrink: 0; width: 120px; padding: 12px; }
  .gear-card-media img { height: 96px; }
}

/* ─── Real Estate Referral — Tier Table ─────────────────────────────── */

.referral-tier-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 16px;
}

.referral-tier-table th,
.referral-tier-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}

.referral-tier-table th {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-border);
}

.referral-tier-table td:last-child,
.referral-tier-table th:last-child {
  text-align: right;
}

.referral-tier-table__highlight td {
  background: var(--color-tint);
  font-weight: 500;
}

.referral-tier-table__highlight td strong {
  color: var(--color-red);
  font-size: 18px;
}

/* ========================================
   MUSE PETITION LANDING PAGES
   ======================================== */
.muse-lp-hero {
  width: 100%;
  height: clamp(280px, 38vw, 480px);
  background:
    radial-gradient(circle at 20% 20%, rgba(192, 32, 38, 0.45), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(34, 62, 110, 0.55), transparent 55%),
    linear-gradient(135deg, #0d1422 0%, #1a2a44 70%);
  color: rgba(255, 255, 255, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding: 24px;
}

.muse-lp-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.muse-lp-hero--image {
  background: var(--color-black);
  padding: 0;
  color: transparent;
}

.muse-lp-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 20px;
}

.muse-lp-body {
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text);
}

.muse-lp-body p + p {
  margin-top: 20px;
}

.muse-lp-body h2,
.muse-lp-body h3 {
  margin-top: 56px;
  margin-bottom: 16px;
  line-height: 1.2;
}

.muse-lp-body h2 + p,
.muse-lp-body h3 + p {
  margin-top: 0;
}

.muse-lp-body p:first-of-type::first-line {
  font-weight: 500;
}

.muse-lp-pull {
  margin: 32px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--color-red);
  background: var(--color-bg-secondary);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text);
}

.muse-lp-pull strong {
  display: block;
  margin-bottom: 4px;
  color: var(--color-red);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.muse-lp-form-card {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(13, 20, 34, 0.08);
}

.muse-lp-form-card h2 {
  font-size: clamp(24px, 3vw, 30px);
  margin-bottom: 8px;
}

.muse-lp-form-card .muse-lp-form-lead {
  color: var(--color-text-secondary);
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.5;
}

.muse-lp-form-note {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin-top: 16px;
  line-height: 1.5;
}

.muse-lp-form-card .form-field {
  min-width: 0;
}

.muse-lp-form-card .form-field input,
.muse-lp-form-card .form-field select,
.muse-lp-form-card .form-field textarea {
  width: 100%;
  box-sizing: border-box;
}

.muse-lp-form-wrap,
.muse-lp-thankyou {
  transition: opacity 300ms ease;
}

.muse-lp-form-wrap.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.muse-lp-thankyou {
  opacity: 0;
  text-align: center;
  padding: 8px 0 4px;
}

.muse-lp-thankyou.is-visible {
  opacity: 1;
}

.muse-lp-thankyou-badge {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--color-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(192, 32, 38, 0.28);
}

.muse-lp-thankyou h2 {
  font-size: clamp(24px, 3vw, 30px);
  margin-bottom: 12px;
}

.muse-lp-thankyou-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 auto;
  max-width: 440px;
}

.muse-lp-form-error {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(192, 32, 38, 0.08);
  border-left: 3px solid var(--color-red);
  color: var(--color-red);
  font-size: 14px;
  line-height: 1.5;
  border-radius: 4px;
}

/* ========================================
   ARTICLE INLINE CTA
   ======================================== */
.article-cta {
  margin: 48px 0;
  padding: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 32px);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  text-align: center;
}

.article-cta-heading {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 10px;
}

.article-cta-sub {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 460px;
  margin: 0 auto 22px;
}

.article-cta .btn {
  margin: 0 auto;
}

/* The inline CTA has to be findable partway through a long read, so two things run
   together. A slow glow breathes underneath, so the button is never completely inert, and
   a highlight sweeps across it every few seconds like light crossing a physical object.
   Neither one moves the button: the hit target stays put, and the label stays crisp,
   which scaling a pill button does not guarantee on every display. */
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 2px 8px rgba(192, 32, 38, 0.20); }
  50%      { box-shadow: 0 6px 20px rgba(192, 32, 38, 0.38); }
}

/* Travel is measured in multiples of the sheen's own width rather than the button's, so
   it clears both ends whatever the label says. Rests through the last third. */
@keyframes cta-sheen {
  0%   { transform: translateX(-260%) skewX(-18deg); }
  62%  { transform: translateX(320%) skewX(-18deg); }
  100% { transform: translateX(320%) skewX(-18deg); }
}

.article-cta .btn--red {
  position: relative;
  overflow: hidden;
  animation: cta-glow 2.8s ease-in-out infinite;
}

.article-cta .btn--red::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  animation: cta-sheen 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Once they're on it, stop selling. */
.article-cta .btn--red:hover,
.article-cta .btn--red:focus-visible,
.article-cta .btn--red:hover::after,
.article-cta .btn--red:focus-visible::after {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .article-cta .btn--red {
    animation: none;
  }

  .article-cta .btn--red::after {
    display: none;
  }
}

/* ========================================
   SWITCH-TO-US LANDING PAGE
   ======================================== */
.switch-hero {
  padding-bottom: clamp(56px, 8vw, 96px);
}

.switch-hero-image {
  width: 100%;
  line-height: 0;
}

.switch-hero-image img {
  width: 100%;
  height: clamp(280px, 38vw, 520px);
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.switch-cta {
  max-width: 640px;
  margin: 48px auto 0;
  text-align: center;
}

.switch-cta-heading {
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  margin-bottom: 10px;
}

.switch-cta-sub {
  font-size: 17px;
  color: var(--color-text-secondary);
  line-height: 1.47;
  max-width: 520px;
  margin: 0 auto 24px;
}

.switch-address-form .ca-input-wrap {
  max-width: 560px;
  margin: 0 auto;
}

.switch-promo {
  padding: clamp(56px, 7vw, 88px) 0;
}

.switch-promo-card {
  background: linear-gradient(135deg, var(--color-red) 0%, #8E1216 100%);
  color: #fff;
  border-radius: 24px;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 56px);
  text-align: center;
  box-shadow: 0 12px 40px rgba(192, 32, 38, 0.18);
}

.switch-promo-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.18);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.switch-promo-card h2 {
  color: #fff;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.1;
  margin-bottom: 16px;
}

.switch-promo-card p {
  color: rgba(255,255,255,0.92);
  font-size: clamp(17px, 1.8vw, 19px);
  line-height: 1.5;
  max-width: 560px;
  margin: 0 auto;
}

.switch-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: clamp(32px, 4vw, 56px);
}

.switch-benefit {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  text-align: center;
}

.switch-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(192, 32, 38, 0.08);
  color: var(--color-red);
  margin-bottom: 20px;
}

.switch-benefit-icon svg {
  width: 32px;
  height: 32px;
}

.switch-benefit h3 {
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.2;
  margin-bottom: 12px;
}

.switch-benefit p {
  font-size: 17px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

@media (max-width: 800px) {
  .switch-benefits { grid-template-columns: 1fr; grid-template-rows: none; gap: 40px; max-width: 480px; margin: 0 auto; }
  .switch-benefit { grid-row: auto; grid-template-rows: none; }
}

.switch-steps-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 5vw, 56px);
}

.switch-testimonial {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.switch-testimonial .testimonial-quote blockquote {
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.switch-testimonial .testimonial-footer {
  justify-content: center;
}

.testimonial-location {
  display: block;
  font-size: 13px;
  color: var(--color-text-tertiary);
}

/* ========================================
   OUTAGE COST CALCULATOR (article shortcode)
   ======================================== */
.oc {
  margin: 48px 0;
  padding: clamp(24px, 4vw, 36px);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
}

.oc-head {
  margin-bottom: 24px;
}

.oc-title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0 0 8px;
}

.oc-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

.oc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px 14px;
}

.oc-field--wide  { grid-column: 1 / -1; }
.oc-field--half  { grid-column: span 3; }
.oc-field--third { grid-column: span 2; }

.oc .form-field input,
.oc .form-field select {
  background: #fff;
  width: 100%;
}

.oc-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.oc-affix {
  position: absolute;
  font-size: 17px;
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.oc-input-wrap--prefix .oc-affix { left: 16px; }
.oc-input-wrap--prefix input { padding-left: 30px; }
.oc-input-wrap--suffix .oc-affix { right: 16px; }
.oc-input-wrap--suffix input { padding-right: 34px; }

.oc-out {
  font-weight: 600;
  color: var(--color-text);
}

.oc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-border);
  margin: 10px 0 4px;
}

.oc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-red);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(35, 31, 32, 0.28);
  cursor: pointer;
}

.oc-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-red);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(35, 31, 32, 0.28);
  cursor: pointer;
}

.oc-range:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(100, 151, 191, 0.35);
}

.oc-scale {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.oc-results {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  text-align: center;
  /* Single gap owns every vertical space in this stack. Children carry no margins,
     so nothing drifts when a line is added, removed, or wraps. */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.oc-annual[hidden],
.oc-verdict[hidden] {
  display: none;
}

.oc-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.oc-line {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
}

.oc-line-label {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.oc-line-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 24px);
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.oc-total {
  padding-top: 8px;
}

.oc-total-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.oc-total-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 8vw, 68px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: -0.22em;
  letter-spacing: var(--tracking-tight);
  color: var(--color-red);
  font-variant-numeric: tabular-nums;
}

.oc-annual {
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 auto;
  max-width: 460px;
}

.oc-verdict {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 auto;
  max-width: 460px;
}

.oc-verdict--over {
  font-weight: 600;
  color: var(--color-red);
}

.oc-cta {
  margin: 0;
}

.oc-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  margin: 20px 0 0;
  text-align: center;
}

@media (max-width: 640px) {
  .oc-grid { grid-template-columns: 1fr; }
  .oc-field--half,
  .oc-field--third { grid-column: 1 / -1; }
  .oc-lines { grid-template-columns: 1fr; }
}

.oc-sources-link {
  display: inline-block;
  margin-left: 4px;
  color: var(--color-link);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.oc-sources-link:hover {
  color: var(--color-link-hover);
}

/* Deep-linkable article headings clear the sticky header */
.article-body h2,
.article-body h3 {
  scroll-margin-top: 96px;
}

/* Sources / methodology block at the foot of an article */
.article-sources {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.article-sources ol {
  padding-left: 22px;
}

.article-sources li {
  margin-bottom: 10px;
}

.article-sources a {
  overflow-wrap: anywhere;
}

/* ========================================
   FORMULA BLOCK (article shortcode support)
   ======================================== */
.formula {
  margin: 28px 0 32px;
  padding: 4px clamp(18px, 3vw, 26px);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
}

.formula-row {
  display: grid;
  grid-template-columns: minmax(150px, 195px) 1fr;
  gap: 4px 20px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.formula-row:last-child {
  border-bottom: 0;
}

.formula-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.formula-expr {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.formula-expr b {
  display: inline-block;
  margin: 0 3px;
  font-weight: 500;
  color: var(--color-red);
}

.formula-row--total .formula-label,
.formula-row--total .formula-expr {
  color: var(--color-text);
  font-weight: 600;
}

@media (max-width: 620px) {
  .formula-row { grid-template-columns: 1fr; padding: 14px 0; }
  .formula-label { font-size: 14px; }
  .formula-expr { font-size: 14px; }
}

/* ---- Calculator field polish (must follow the docked overrides to win on order) ---- */

/* Bottom-align inputs so a label that wraps to two lines doesn't drop its field. */
.oc-grid {
  align-items: end;
}

/* Kill number spinners. They crowded the $ and % affixes and added nothing. */
.oc input[type="number"]::-webkit-outer-spin-button,
.oc input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.oc input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Reserve room for the affixes at every breakpoint. These selectors carry the same
   weight as the docked padding shorthand and sit after it, so they win. */
.oc .oc-input-wrap--prefix input { padding-left: 30px; }
.oc .oc-input-wrap--suffix input { padding-right: 36px; }

.oc-affix {
  font-weight: 500;
}

/* ========================================
   ARTICLE + DOCKED CALCULATOR (wide screens)
   ======================================== */
/* Narrow screens: the aside is just another block in the flow, sitting between the
   article title and the article text. */
.article-aside {
  max-width: var(--w-narrow);
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 1200px) {
  /* Two equal columns, centred as one unit so neither side is left with a dead gutter.
     The header and the body share column 1; the tool holds column 2 across both rows and
     pins to the top of the viewport, so it rides alongside the title and then the text. */
  .article-grid--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 4vw, 72px);
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(24px, 3vw, 48px);
  }

  .article-grid--split > .article-header { grid-column: 1; grid-row: 1; }
  .article-grid--split > .article-body   { grid-column: 1; grid-row: 2; }

  .article-grid--split > .article-aside {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    max-width: none;
    padding: 0;
    /* Top: line the panel's edge up with the H1, clearing the header's top padding
       plus the breadcrumb row (13px text + its 16px margin).
       Bottom: sticky otherwise slides the panel right down onto the section boundary,
       eating the gap the text column gets from .article-body's padding-bottom. Reserving
       the same --space-section stops it level with where the article text stops. */
    margin: calc(clamp(40px, 6vw, 80px) + 35px) 0 var(--space-section);
  }

  /* The inner containers stop centring and constraining; the grid owns the measure now. */
  .article-grid--split .article-header > .container,
  .article-grid--split .article-body > .container {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .article-grid--split .article-aside .oc {
    margin: 0;
    padding: 21px;
    border-radius: 20px;
    box-shadow: 0 6px 28px rgba(35, 31, 32, 0.07);
  }

  /* Everything in the docked panel runs ~20% down from the inline sizing so the whole
     tool, CTA and footnote included, fits on screen without scrolling. */
  .article-grid--split .oc-head { margin-bottom: 14px; }
  .article-grid--split .oc-title { font-size: 17px; }
  .article-grid--split .oc-sub { font-size: 12px; }

  .article-grid--split .oc-grid { gap: 11px 10px; }
  .article-grid--split .oc .form-field { gap: 4px; }
  .article-grid--split .oc .form-field label { font-size: 12px; }
  .article-grid--split .oc .form-field input,
  .article-grid--split .oc .form-field select {
    font-size: 14px;
    padding: 9px 12px;
    border-radius: 10px;
  }
  .article-grid--split .oc .form-field select { background-position: right 12px center; padding-right: 32px; }
  .article-grid--split .oc-affix { font-size: 14px; }
  .article-grid--split .oc .oc-input-wrap--prefix input { padding-left: 24px; }
  .article-grid--split .oc .oc-input-wrap--suffix input { padding-right: 29px; }
  .article-grid--split .oc .oc-input-wrap--prefix .oc-affix { left: 12px; }
  .article-grid--split .oc .oc-input-wrap--suffix .oc-affix { right: 12px; }

  .article-grid--split .oc-range { height: 5px; margin: 6px 0 2px; }
  .article-grid--split .oc-range::-webkit-slider-thumb { width: 19px; height: 19px; border-width: 2px; }
  .article-grid--split .oc-range::-moz-range-thumb { width: 19px; height: 19px; border-width: 2px; }
  .article-grid--split .oc-scale { font-size: 11px; }
  .article-grid--split .oc-hint { font-size: 11px; padding: 9px 11px; }

  .article-grid--split .oc-results { margin-top: 16px; padding-top: 14px; gap: 12px; }
  .article-grid--split .oc-lines { gap: 8px; }
  .article-grid--split .oc-line { padding: 9px 10px; border-radius: 10px; }
  .article-grid--split .oc-line-label { font-size: 11px; margin-bottom: 2px; }
  .article-grid--split .oc-line-value { font-size: 16px; }
  .article-grid--split .oc-total { padding-top: 6px; }
  .article-grid--split .oc-total-label { font-size: 11px; margin-bottom: 12px; }
  .article-grid--split .oc-total-value { font-size: 37px; }
  .article-grid--split .oc-annual { font-size: 12px; max-width: none; }
  .article-grid--split .oc-verdict { font-size: 11px; max-width: none; }
  .article-grid--split .oc-cta { font-size: 15px; padding: 12px 24px; }
  .article-grid--split .oc-note { margin-top: 12px; font-size: 10px; }

  .article-grid--split .oc-cta { width: 100%; }
}

@media (min-width: 1200px) and (min-height: 820px) {
  .article-grid--split > .article-aside {
    position: sticky;
    top: 96px;
  }
}

@media (min-width: 1700px) {
  .article-grid--split { max-width: 1560px; }
  .article-grid--split .oc-total-value { font-size: 62px; }
}

/* ========================================
   GATEWAY PAIR (two-up product cards)
   ======================================== */
.gateway-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0 36px;
}

.gateway-card {
  margin: 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  overflow: hidden;
}

.gateway-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 14px;
  background: #fff;
}

.gateway-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gateway-card figcaption {
  padding: 14px 16px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.gateway-card figcaption b {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

@media (max-width: 520px) {
  .gateway-pair { grid-template-columns: 1fr; gap: 16px; }
  .gateway-card-media { aspect-ratio: 4 / 3; }
}

/* Zoom affordance on lightbox-enabled media */
.gateway-card-media.js-lightbox {
  position: relative;
  cursor: zoom-in;
  transition: background 0.2s;
}

.gateway-card-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(35, 31, 32, 0.62);
  color: #fff;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
}

.gateway-card-zoom svg { width: 15px; height: 15px; }

.gateway-card-media:hover .gateway-card-zoom,
.gateway-card-media:focus-visible .gateway-card-zoom {
  opacity: 1;
  transform: translateY(0);
}

.gateway-card-media:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: -3px;
}

/* ========================================
   LIGHTBOX
   ======================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 18, 0.82);
  backdrop-filter: blur(3px);
  cursor: zoom-out;
}

.lightbox-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: min(1100px, 100%);
  transform: scale(0.98);
  transition: transform 0.22s ease;
}

.lightbox.is-open .lightbox-panel { transform: scale(1); }

.lightbox-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.lightbox-caption {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.lightbox-close svg { width: 19px; height: 19px; }
.lightbox-close:hover { background: var(--color-bg-secondary); }
.lightbox-close:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; }

body.lightbox-open { overflow: hidden; }

@media (max-width: 600px) {
  .lightbox-close { top: -10px; right: -6px; width: 36px; height: 36px; }
  .lightbox-image { max-height: calc(100vh - 130px); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-panel, .gateway-card-zoom { transition: none; }
}

/* ========================================
   HOMEPAGE: OUTAGE CALCULATOR PROMO
   ======================================== */
.outage-calc-promo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 24px;
}

.outage-calc-promo-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(192, 32, 38, 0.08);
  color: var(--color-red);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outage-calc-promo-copy h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  margin-bottom: 14px;
}

.outage-calc-promo-copy p {
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin-bottom: 26px;
  max-width: 52ch;
}

/* The photo carries this section. The figure floats over its lower edge so the number
   still reads, without a second flat panel competing with the image. */
.outage-calc-promo-media {
  position: relative;
  padding-bottom: 46px;
}

.outage-calc-promo-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(35, 31, 32, 0.16);
}

.outage-calc-promo-figure {
  position: absolute;
  left: 22px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 24px 18px;
  background: #fff;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(35, 31, 32, 0.18);
}

.outage-calc-promo-figure-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  line-height: 1;
}

.outage-calc-promo-figure-value {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1;
  /* Cancels the unused descender space under the digits so the gap below the number
     matches the gap above it. See note above on line-height and font metrics. */
  margin-bottom: -0.22em;
  letter-spacing: var(--tracking-tight);
  color: var(--color-red);
  font-variant-numeric: tabular-nums;
}

.outage-calc-promo-figure-note {
  font-size: 13px;
  color: var(--color-text-tertiary);
  line-height: 1.2;
}

@media (max-width: 820px) {
  /* minmax(0, 1fr), not 1fr: a plain 1fr track grows to fit its widest unbreakable
     child, and the nowrap button label made this card 13px wider than a phone. */
  .outage-calc-promo-inner { grid-template-columns: minmax(0, 1fr); }
  .outage-calc-promo-media { order: -1; padding-bottom: 40px; }
  .outage-calc-promo-figure { left: 50%; transform: translateX(-50%); }
}

@media (max-width: 460px) {
  .outage-calc-promo-figure { padding: 13px 20px 15px; }
}

/* The base .btn is nowrap, which pushes a long label straight out of the pill on a narrow
   screen. Inside the calculator the CTA is full width, so let it wrap and scale instead. */
.oc-cta {
  white-space: normal;
  max-width: 100%;
  text-align: center;
}

@media (max-width: 520px) {
  .oc-cta {
    font-size: 17px;
    padding: 14px 20px;
  }
}

@media (max-width: 380px) {
  .oc-cta {
    font-size: 16px;
    padding: 13px 16px;
  }
}

/* Picture element wrapper needs to fill the hero the same way a bare img did. */
.article-hero picture {
  display: block;
  line-height: 0;
}

.article-hero picture img {
  width: 100%;
  height: clamp(240px, 30vw, 420px);
  object-fit: cover;
  display: block;
}

/* ========================================
   COLLAPSIBLE ARTICLE BLOCK
   ======================================== */
.article-details {
  margin: 28px 0 36px;
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  background: var(--color-bg-secondary);
  overflow: hidden;
}

.article-details-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.article-details-summary::-webkit-details-marker { display: none; }

.article-details-summary:hover { background: rgba(35, 31, 32, 0.03); }

.article-details-summary:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: -3px;
}

.article-details-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
}

.article-details-note {
  font-size: 14px;
  color: var(--color-text-tertiary);
}

.article-details-icon {
  margin-left: auto;
  display: flex;
  color: var(--color-text-secondary);
  transition: transform 0.2s;
}

.article-details-icon svg { width: 20px; height: 20px; }

.article-details[open] .article-details-icon { transform: rotate(180deg); }

.article-details-body {
  padding: 4px 22px 24px;
  border-top: 1px solid var(--color-border-light);
}

.article-details-body > :first-child { margin-top: 20px; }

.article-details-body h3 {
  font-size: 19px;
  margin-top: 30px;
}

.article-details-body h4 {
  font-size: 16px;
  margin-top: 24px;
  margin-bottom: 8px;
}

.article-details-body p,
.article-details-body li {
  font-size: 15px;
  line-height: 1.6;
}

.article-details-body table { font-size: 14px; }

@media (max-width: 560px) {
  .article-details-summary { padding: 15px 16px; gap: 8px; flex-wrap: wrap; }
  .article-details-note { flex-basis: 100%; }
  .article-details-body { padding: 4px 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .article-details-icon { transition: none; }
}

/* ── Sticky alternating figure ────────────────────────────────────────────────
   Image pins while the prose beside it scrolls, alternating sides down the page.
   Breaks out wider than the 680px prose column on desktop; stacks on mobile.
   Markup comes from layouts/shortcodes/stickyfig.html. */

.stickyfig {
  margin: clamp(40px, 6vw, 72px) 0;
}

.stickyfig__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.stickyfig__media figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--color-text-secondary);
  font-style: italic;
}

.stickyfig__body > *:first-child { margin-top: 0; }
.stickyfig__body > *:last-child  { margin-bottom: 0; }

@media (max-width: 899px) {
  .stickyfig__media { margin: 0 0 20px; }
  .stickyfig__media img { max-height: 62vh; object-fit: cover; }
}

@media (min-width: 900px) {
  /* Widen symmetrically past .container--narrow (680px minus 24px gutters).
     Negative margins rather than a transform, because a transformed ancestor
     would become the containing block and break the sticky child. */
  .stickyfig {
    --stickyfig-breakout: clamp(0px, calc((100vw - 632px) / 2 - 32px), 254px);
    margin-left: calc(var(--stickyfig-breakout) * -1);
    margin-right: calc(var(--stickyfig-breakout) * -1);
  }

  .stickyfig__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }

  .stickyfig__media {
    position: sticky;
    top: 96px;          /* clears the sticky site header */
    margin: 0;
  }

  /* Alternate: media moves to column two, prose to column one. */
  .stickyfig--right .stickyfig__media { order: 2; }
  .stickyfig--right .stickyfig__body  { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stickyfig__media { position: static; }
}

/* Inline note under the availability address field. Google's address autocomplete returns
   whole roads as well as premises, so a street-only pick gets rejected here rather than
   sending the customer to a "not available" screen for a road. */
.ca-address-note {
  max-width: 620px;
  margin: 12px auto 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(178, 34, 34, 0.06);
  border: 1px solid rgba(178, 34, 34, 0.18);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

/* Shown on the plan step when coverage came from a ZIP match rather than the address
   validator. The booking is real but unsurveyed, so the calendar is restricted and the
   customer is told we will confirm. See assets/js/serviceability.js. */
.ca-provisional-note {
  max-width: 640px;
  /* Bottom matches .ca-step-status so the step title sits the same distance below this note
     as it does below the availability pill when the note is hidden. */
  margin: 12px auto 24px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(197, 154, 42, 0.08);
  border: 1px solid rgba(197, 154, 42, 0.28);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

/* ========================================
   PAID LANDING CHROME + FB LANDING VARIANT
   Used by /check-availability-fb/ (lp_chrome: true).
   ======================================== */

/* Stripped header: logo + tap to call, nothing to click away to. */
.site-header--lp .header-inner {
  justify-content: space-between;
}

.lp-header-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 980px;
  padding: 9px 16px;
  transition: border-color 0.15s, background 0.15s;
}

.lp-header-call:hover {
  border-color: var(--color-text-tertiary);
  background: var(--color-bg-secondary);
}

.site-footer--lp {
  border-top: 1px solid var(--color-border-light);
  padding: 32px 0;
  background: var(--color-bg-secondary);
}

.footer-legal--lp {
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-tertiary);
}

.footer-legal--lp p {
  margin: 0 0 4px;
}

.footer-legal--lp a {
  color: var(--color-text-secondary);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.fb-hero {
  padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 3vw, 32px);
  text-align: center;
}

.fb-hero-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 14px;
}

.fb-hero-title {
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  margin-bottom: 14px;
}

.fb-hero-sub {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 540px;
  margin: 0 auto 20px;
}

.fb-trust {
  list-style: none;
  padding: 0;
  margin: 0 auto 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 620px;
}

.fb-trust li {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 980px;
  padding: 6px 13px;
}

.fb-trust li::before {
  content: "✓ ";
  color: var(--color-green);
}

/* ── The surprise offer reveal ───────────────────────────────────────────── */
/* Space is reserved before the reveal so the address box never jumps. */
.fb-surprise {
  max-width: 560px;
  margin: 0 auto;
  border-radius: 18px;
  padding: 3px;
  background: linear-gradient(100deg, #c42c36, #f0a202, #4a8c5c, #6497bf, #8e6bbf, #e8657f, #c42c36);
  background-size: 300% 100%;
  animation: fb-rainbow 6s linear infinite;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.94);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.18, 1.3, 0.4, 1);
}

.fb-surprise.is-revealed {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

@keyframes fb-rainbow {
  to { background-position: -300% 0; }
}

.fb-surprise-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: #fff;
  border-radius: 15px;
  padding: 15px 18px;
}

.fb-surprise-spark {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
  animation: fb-spark 1.4s ease-in-out 3;
}

@keyframes fb-spark {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-14deg) scale(1.18); }
  60% { transform: rotate(12deg) scale(1.1); }
}

.fb-surprise-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: var(--tracking-normal);
  margin: 0 0 3px;
}

.fb-surprise-body {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── Confetti ────────────────────────────────────────────────────────────── */
.fb-confetti-layer {
  position: absolute;
  pointer-events: none;
  z-index: 90;
  overflow: visible;
}

.fb-confetti {
  position: absolute;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation-name: fb-fall;
  animation-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1);
  animation-fill-mode: forwards;
}

.fb-confetti--round {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

@keyframes fb-fall {
  0% { opacity: 1; transform: translate(0, -10px) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--drift, 0), 260px) rotate(var(--spin, 360deg)); }
}

/* ── Step 1 tweaks on the paid variant ───────────────────────────────────── */
.ca-wizard--fb {
  padding-bottom: clamp(48px, 6vw, 80px);
}

.ca-wizard--fb #ca-step-address {
  padding-top: 8px;
}

.ca-step-title--fb {
  font-size: clamp(20px, 3vw, 26px);
  margin-bottom: 14px;
}

.ca-step1-help {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 460px;
  margin: 14px auto 0;
}

.ca-step1-alt {
  font-size: 14px;
  color: var(--color-text-tertiary);
  margin: 8px auto 0;
}

.ca-step1-alt a {
  font-weight: 600;
  white-space: nowrap;
}

/* ── Offer ribbon inside the wizard ──────────────────────────────────────── */
.ca-offer-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 20px;
  padding: 9px 16px 9px 9px;
  border-radius: 980px;
  background: #fff;
  border: 2px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(100deg, #c42c36, #f0a202, #4a8c5c, #6497bf, #8e6bbf, #e8657f, #c42c36);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 300% 100%;
  animation: fb-rainbow 6s linear infinite;
  font-size: 15px;
  font-weight: 600;
}

.ca-offer-ribbon.is-revealed {
  animation: fb-rainbow 6s linear infinite, fb-ribbon-pop 0.6s cubic-bezier(0.18, 1.3, 0.4, 1);
}

@keyframes fb-ribbon-pop {
  0% { transform: scale(0.86); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.ca-offer-ribbon-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--color-green);
  border-radius: 980px;
  padding: 4px 10px;
}

/* ── Plan step: auto-selection note ──────────────────────────────────────── */
.ca-plan-autonote {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 520px;
  margin: 0 auto 20px;
}

.ca-fr-gge-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  background: rgba(192, 138, 48, 0.09);
  border: 1px solid rgba(192, 138, 48, 0.28);
  border-radius: 12px;
  padding: 12px 16px;
  max-width: 560px;
  margin: 12px auto 0;
}

/* ── Continue button attention pulse ─────────────────────────────────────── */
.ca-next-btn--attention {
  animation: ca-cta-pulse 1.5s ease-out 3;
}

@keyframes ca-cta-pulse {
  0% { box-shadow: 0 0 0 0 rgba(192, 32, 38, 0.45); }
  70% { box-shadow: 0 0 0 14px rgba(192, 32, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(192, 32, 38, 0); }
}

/* ── Docked mobile CTA for the plan step ─────────────────────────────────── */
.ca-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--color-border-light);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
  animation: ca-sticky-in 0.28s ease-out;
}

.ca-sticky-cta[hidden] {
  display: none;
}

@keyframes ca-sticky-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.ca-sticky-cta-info {
  flex: 1;
  min-width: 0;
  text-align: left;
  line-height: 1.25;
}

.ca-sticky-cta-plan {
  display: block;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ca-sticky-cta-price {
  display: block;
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.ca-sticky-cta-btn {
  flex-shrink: 0;
  padding: 12px 22px;
}

/* Desktop never needs the docked bar: the real Continue button is reachable. */
@media (min-width: 900px) {
  .ca-sticky-cta { display: none; }
}

@media (max-width: 899px) {
  #ca-step-plans { padding-bottom: 92px; }
}

/* ── Below-fold sales content ────────────────────────────────────────────── */
.fb-proof {
  padding: clamp(48px, 7vw, 88px) 0;
  background: var(--color-bg-secondary);
}

.fb-proof-head {
  text-align: center;
  margin-bottom: 36px;
}

.fb-proof-head h2 {
  font-size: clamp(26px, 4vw, 38px);
  margin-bottom: 10px;
}

.fb-proof-head p {
  font-size: 16px;
  color: var(--color-text-secondary);
}

.fb-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.fb-how {
  padding: clamp(48px, 7vw, 88px) 0;
}

.fb-how-head {
  text-align: center;
  font-size: clamp(26px, 4vw, 38px);
  margin-bottom: 36px;
}

.fb-how-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 24px;
}

.fb-how-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.fb-how-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fb-how-steps h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.fb-how-steps p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
}

.fb-close {
  padding: clamp(48px, 7vw, 88px) 0;
  background: var(--color-bg-secondary);
  text-align: center;
}

.fb-close h2 {
  font-size: clamp(24px, 3.5vw, 34px);
  margin-bottom: 12px;
}

.fb-close p {
  font-size: 17px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 26px;
}

.fb-close-fine {
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-tertiary);
  max-width: 620px;
  margin: 28px auto 0;
}

@media (max-width: 900px) {
  .fb-proof-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .fb-surprise-inner { padding: 14px; gap: 11px; }
  .fb-surprise-spark { font-size: 26px; }
  .fb-surprise-title { font-size: 17px; }
  .fb-surprise-body { font-size: 13px; }
  .fb-trust { gap: 6px; }
  .fb-trust li { font-size: 12px; padding: 5px 11px; }
  .ca-offer-ribbon { font-size: 14px; }
}

/* Respect the OS setting: the offer still lands, it just stops moving. */
@media (prefers-reduced-motion: reduce) {
  .fb-surprise,
  .ca-offer-ribbon,
  .ca-offer-ribbon.is-revealed,
  .fb-surprise-spark,
  .ca-next-btn--attention,
  .ca-sticky-cta {
    animation: none;
  }
  .fb-surprise {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    background: linear-gradient(100deg, #c42c36, #f0a202, #4a8c5c, #6497bf, #8e6bbf);
  }
}

/* ── Free-month price treatment on the wizard plan cards ─────────────────── */
/* Only rendered when the page carries an offer, so the organic wizard is untouched. */
.ca-plan-price--free {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  color: var(--color-green);
  margin-bottom: 4px;
}

/* The amount is one flex item on purpose. A bare "$0" text node next to the cents span becomes
   its own anonymous flex item, and the container gap then opens a hole inside the price.
   These three are scoped to --free so they outrank `.ca-plan-price span`, which would otherwise
   drag the whole amount down to 14px tertiary grey. */
.ca-plan-price--free .ca-plan-amount {
  display: inline-flex;
  align-items: baseline;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--color-green);
}

.ca-plan-price--free .ca-plan-cents {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-green);
}

.ca-plan-price--free .ca-plan-term {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-green);
  text-transform: uppercase;
}

.ca-plan-after {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
  line-height: 1.5;
}

.ca-plan-after-install {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-green);
  background: rgba(74, 140, 92, 0.12);
  border-radius: 5px;
  padding: 2px 7px;
  margin-left: 2px;
  white-space: nowrap;
}

/* The broadband label link sat flush against the last feature bullet. */
.ca-plan-card .plan-bbl-link {
  margin-top: 18px;
  margin-bottom: 2px;
}

/* ── First responder: say the box is worth ticking ───────────────────────── */
/* The label runs to two lines on a phone, so the checkbox aligns to the first line rather than
   floating in the vertical middle, and the badge gets its own line with room to breathe. */
.ca-fr-optgroup {
  padding: 18px 20px;
}

.ca-fr-check-label {
  align-items: flex-start;
  gap: 12px;
}

.ca-fr-check-label input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.ca-fr-check-copy {
  display: block;
}

.ca-fr-check-text {
  display: block;
  line-height: 1.45;
}

.ca-fr-unlock {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--color-green);
  border-radius: 6px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* ── Schedule step: first opening held ───────────────────────────────────── */
.ca-slots-autonote {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 480px;
  margin: 14px auto 0;
}

/* The schedule Continue sat flush against the slot list / held-opening note. */
#ca-schedule-next {
  margin-top: 26px;
}

/* Once the hero folds away, the wizard becomes the first thing under the sticky header and the
   step bar ends up jammed against it. Only applies while the hero is actually hidden. */
#fb-hero[hidden] + .ca-wizard--fb {
  padding-top: 40px;
}

/* ── Essential-worker landing page (/check-availability-ew/) ──────────────────
   Only addition over the shared .fb-* paid-landing styles: the savings table.
   Everything else reuses the Facebook variant so the two pages cannot drift. */
.ew-price-table {
  overflow-x: auto;
  margin: 1.5rem 0 1rem;
}
.ew-price-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.ew-price-table th,
.ew-price-table td {
  padding: 0.65rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.ew-price-table th {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
}
.ew-price-table .ew-was {
  text-decoration: line-through;
  opacity: 0.55;
}
.ew-price-table .ew-now strong {
  color: #4a8c5c;
  font-size: 1.1rem;
}