/* Why Oh WiFi - Main Stylesheet */

/* ===== Samsung Internet & Browser Dark Mode Protection ===== */
/*
 * This tells browsers we handle our own dark mode.
 * Samsung Internet v26+ with "Adaptive Force Dark" enabled will respect this.
 * Older Samsung Internet versions may still override (known browser limitation).
 * Must be declared early in CSS for maximum effectiveness.
 * See: https://developer.samsung.com/internet/blog/en/2020/12/15/dark-mode-in-samsung-internet
 */
:root {
  color-scheme: light dark;
}

/* ===== CSS Variables ===== */
:root {
  /* Primary */
  --connection-blue: #0066CC;
  --connection-blue-dark: #0052A3;

  /* Accent - #E8551F provides 4.0:1 contrast with white (WCAG AA compliant) */
  --signal-orange: #E8551F;
  --signal-orange-light: #FF6B35;

  /* Success */
  --success-green: #00CC66;
  --success-green-dark: #00A854;

  /* Neutral */
  --light-blue: #F8FBFF;
  --sky-blue: #E8F2FF;
  --light-grey: #F9FAFB;
  --dark-grey: #1A1A1A;
  --text-grey: #6B7280;
  --border-grey: #E5E7EB;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing */
  --container-width: 1200px;
  --section-padding: 5rem;
  --section-padding-mobile: 3rem;
}

/* ===== Scroll Reveal Animations ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for child elements */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.3s; }

/* Slide from left variant */
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right variant */
.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up variant */
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* CTA Button Pulse Animation */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4); }
  50% { box-shadow: 0 4px 30px rgba(255, 107, 53, 0.6), 0 0 0 8px rgba(255, 107, 53, 0.1); }
}

.btn-primary.pulse {
  animation: pulse-glow 2s infinite;
}

.btn-primary.pulse:hover {
  animation: none;
}

/* Counter number animation helper */
.count-up {
  display: inline-block;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn-primary.pulse {
    animation: none;
  }
}

/* ===== Dark Mode Variables ===== */
[data-theme="dark"] {
  --light-blue: #1a1f2e;
  --sky-blue: #242938;
  --light-grey: #1e2330;
  --dark-grey: #f0f0f0;
  --text-grey: #a0aec0;
  --border-grey: #3d4556;
  --bg-white: #151820;
  --card-bg: #1e2330;
  /* Lighter blue for links - #66B2FF provides 7.3:1 contrast on dark backgrounds */
  --connection-blue: #66B2FF;
  --connection-blue-dark: #99CCFF;
}

/* ===== Dark Mode Immune Utility ===== */
/* Apply to components that should maintain their colours in both themes */
/* Examples: branded buttons, infographics, cards with explicit colour schemes */
.dark-mode-immune {
  /* Reset to light mode colours */
  --connection-blue: #0066CC;
  --connection-blue-dark: #0052A3;
  --dark-grey: #1A1A1A;
  --text-grey: #6B7280;
  --light-grey: #F9FAFB;
  --border-grey: #E5E7EB;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--dark-grey);
  background: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
  max-width: 100vw;
}

[data-theme="dark"] body {
  background: var(--bg-white);
}

/* ===== Accessibility ===== */
.skip-link {
  /* Visually hidden but accessible to screen readers */
  position: absolute !important;
  display: block !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  /* Visual styling when focused */
  background: var(--signal-orange);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-family: var(--font-display);
  border-radius: 0 0 8px 8px;
  z-index: 10000;
}

.skip-link:focus,
.skip-link:focus-visible {
  /* Reveal when focused */
  position: absolute !important;
  display: block !important;
  width: auto;
  height: auto;
  padding: 12px 24px;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  top: 0;
  left: 16px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Focus visible styles for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--signal-orange);
  outline-offset: 3px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-color: var(--connection-blue);
  border-color: var(--connection-blue);
}

/* Remove outline for mouse clicks but keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

/* Extended Plus Jakarta Sans usage for impact elements */
.lead,
.hero-subtitle,
.page-intro,
blockquote,
.testimonial-card blockquote,
.result-quote,
.stat-number,
.stat-label,
.bandwidth-label,
.callout-title,
.blog-category,
.wifi-badge,
.cta-section h3,
.price,
.price-amount,
.tagline {
  font-family: var(--font-display);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

@media (min-width: 768px) {
  h1 { font-size: 3.5rem; }
  h2 { font-size: 2.5rem; }
  h3 { font-size: 1.75rem; }
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--connection-blue);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--connection-blue-dark);
}

ul, ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.5rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ===== Container ===== */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ===== Glassmorphism Utility ===== */
/* Use on elements placed over gradient backgrounds */
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.glass-card-dark {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 1rem 2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: #FF6B35;
  color: #fff;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
}

.btn-primary:hover {
  background: #e55a2a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(255, 107, 53, 0.5);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  transform: translateY(-2px);
}

/* On light backgrounds, secondary needs different styling */
.problems .btn-secondary,
.how-it-works .btn-secondary,
.testimonials .btn-secondary,
.service-area .btn-secondary {
  background: transparent;
  color: var(--connection-blue);
  border: 2px solid var(--connection-blue);
  backdrop-filter: none;
}

.problems .btn-secondary:hover,
.how-it-works .btn-secondary:hover,
.testimonials .btn-secondary:hover,
.service-area .btn-secondary:hover {
  background: var(--connection-blue);
  color: #fff;
}

.btn-phone {
  background: #FF6B35;
  color: #fff;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
}

.btn-phone:hover {
  background: #e55a2a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(255, 107, 53, 0.5);
}

.btn-large {
  padding: 1.125rem 2.5rem;
  font-size: 1.125rem;
}

/* Blue button variant for CTA sections */
.btn-blue {
  background: var(--connection-blue);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 102, 204, 0.3);
}

.btn-blue:hover {
  background: #0052a3;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(0, 102, 204, 0.4);
}

/* Outline button variant */
.btn-outline {
  background: transparent;
  color: var(--connection-blue);
  border: 2px solid var(--connection-blue);
}

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

/* How It Works section CTA */
.how-it-works-cta {
  text-align: center;
  margin-top: 3rem;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid var(--border-grey);
  z-index: 100;
  padding: 1rem 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--connection-blue);
}

.logo-oh {
  color: var(--signal-orange);
}

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

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dark-grey);
  transition: 0.2s;
}

.nav-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

.nav-menu a {
  color: var(--dark-grey);
  font-weight: 500;
  padding: 0.5rem 0;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--connection-blue);
}

.header-phone {
  display: none;
  align-items: center;
  gap: 0.5rem;
  color: var(--signal-orange);
  font-weight: 600;
}

.phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex;
  }
}

/* Show phone number only on larger screens to prevent overflow */
@media (min-width: 900px) {
  .header-phone {
    display: flex;
  }
}

/* Mobile nav */
.nav-menu.active {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  padding: 1rem;
  border-bottom: 1px solid var(--border-grey);
  gap: 0;
}

.nav-menu.active li {
  margin: 0;
}

.nav-menu.active a {
  display: block;
  padding: 1rem;
  border-bottom: 1px solid var(--border-grey);
}

/* ===== Hero Section ===== */
.hero {
  background: linear-gradient(135deg, #0066CC 0%, #003366 100%);
  padding: 60px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Decorative background elements */
.hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border: 60px solid rgba(110, 231, 183, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  border: 40px solid rgba(255, 107, 53, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero h1 {
  color: #ffffff;
  margin-bottom: 1.5rem;
  font-size: 2.5rem; /* Fallback for browsers without clamp() support */
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
}

.hero-subtitle {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 2rem;
  line-height: 1.5;
}

.hero-badge {
  display: inline-block;
  background: #FF6B35;
  color: white;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero-price-box {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px 32px;
  display: inline-block;
  margin-bottom: 32px;
}

.hero-price-box .price-current {
  font-size: 3rem;
  font-weight: 800;
  color: #6EE7B7;
}

.hero-price-box .price-note {
  display: block;
  font-size: 1rem;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.9);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

@media (max-width: 768px) {
  .hero {
    padding: 40px 0 60px;
  }

  .hero::before,
  .hero::after {
    display: none;
  }

  .hero-price-box {
    padding: 20px 24px;
  }

  .hero-price-box .price-current {
    font-size: 2.5rem;
  }
}

/* ===== Problems Section ===== */
.problems {
  padding: var(--section-padding) 0;
  background: #ffffff;
}

.problems h2 {
  text-align: center;
  margin-bottom: 3rem;
  color: #0066CC;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.problem-item {
  background: #ffffff;
  padding: 2rem 1.5rem;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-top: 4px solid #6EE7B7;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.problem-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.problem-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  background: linear-gradient(135deg, var(--connection-blue) 0%, #003366 100%);
  border-radius: 12px;
}

.problem-icon svg {
  width: 28px;
  height: 28px;
  stroke: #fff;
}

.problem-item p {
  margin: 0;
  font-weight: 500;
  color: var(--dark-grey);
}

.solution-text {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.125rem;
}

/* ===== How It Works ===== */
.how-it-works {
  padding: var(--section-padding) 0;
  background: #f8fafc;
}

.how-it-works h2 {
  text-align: center;
  margin-bottom: 3rem;
  color: #0066CC;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.step {
  background: #ffffff;
  padding: 2.5rem 2rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  border-left: 5px solid #FF6B35;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

.step-number {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #0066CC 0%, #003366 100%);
  color: #fff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  margin: 0 auto 1.25rem;
}

.step h3 {
  margin-bottom: 0.75rem;
  color: #1a1a2e;
}

.step p {
  margin: 0;
  color: #64748b;
  line-height: 1.6;
}

/* ===== Google Reviews Widget ===== */
.google-reviews-widget {
  padding: 4rem 0;
  background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
}

.reviews-widget-card {
  max-width: 700px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border: 1px solid #E5E7EB;
}

.reviews-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
  border-bottom: 1px solid #E5E7EB;
}

.google-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.google-logo span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: #1A1A1A;
}

.reviews-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rating-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  color: #1A1A1A;
}

.rating-stars {
  display: flex;
  gap: 2px;
}

.reviews-widget-content {
  padding: 1.5rem;
}

.review-snippet {
  background: #F9FAFB;
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid #E5E7EB;
}

.review-snippet-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.75rem;
}

.review-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #374151;
  margin: 0 0 0.75rem 0;
  font-style: italic;
}

.review-author {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6B7280;
}

.reviews-widget-footer {
  padding: 1rem 1.5rem 1.25rem;
  background: #F9FAFB;
  border-top: 1px solid #E5E7EB;
  text-align: center;
}

.btn-reviews {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #FFFFFF;
  color: var(--connection-blue);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 8px;
  border: 2px solid var(--connection-blue);
  transition: all 0.2s ease;
}

.btn-reviews:hover {
  background: var(--connection-blue);
  color: white;
}

.btn-reviews svg {
  transition: transform 0.2s ease;
}

.btn-reviews:hover svg {
  transform: translate(2px, -2px);
}

/* Google Reviews Widget Mobile */
@media (max-width: 480px) {
  .reviews-widget-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .google-logo {
    justify-content: center;
  }

  .rating-number {
    font-size: 1.5rem;
  }

  .review-text {
    font-size: 0.9375rem;
  }
}

/* ===== Credibility ===== */
.credibility {
  padding: 60px 0;
  background: linear-gradient(135deg, #0066CC 0%, #003366 100%);
  color: #fff;
}

.credibility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
}

.credibility-item {
  text-align: center;
}

.cred-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
}

.cred-icon svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
}

.credibility-item p {
  margin: 0;
  font-weight: 500;
}

/* Credibility with Photo */
.credibility-with-photo {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.credibility-photo {
  flex-shrink: 0;
  text-align: center;
}

.karl-thumbnail {
  width: 64px;
  height: 64px;
  max-width: 64px;
  max-height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.photo-caption {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .credibility-with-photo {
    flex-direction: column;
    gap: 1.5rem;
  }

  .karl-thumbnail {
    width: 64px;
    height: 64px;
  }
}

/* ===== Service Area ===== */
.service-area {
  padding: var(--section-padding) 0;
  background: #ffffff;
}

.service-area h2 {
  text-align: center;
  margin-bottom: 3rem;
  color: #0066CC;
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.area-item {
  background: #ffffff;
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-top: 4px solid #6EE7B7;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.area-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.area-item h3 {
  margin-bottom: 0.5rem;
}

.area-item h3 a {
  color: #0066CC;
  text-decoration: none;
}

.area-item h3 a:hover {
  color: #003366;
}

.area-item p {
  margin: 0;
  color: #64748b;
}

/* ===== CTA Section ===== */
.cta-section {
  padding: 80px 0;
  background: #f8fafc;
  text-align: center;
}

.cta-section h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
  color: #1a1a2e;
}

.cta-section p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  color: #64748b;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.cta-or {
  font-weight: 600;
  color: #64748b;
}

.cta-section .btn-primary {
  background: #FF6B35;
  color: #fff;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
  padding: 1.125rem 2.5rem;
  font-size: 1.125rem;
}

.cta-section .btn-primary:hover {
  background: #e55a2a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(255, 107, 53, 0.5);
}

.cta-section .btn-phone {
  background: transparent;
  border: 2px solid #0066CC;
  color: #0066CC;
  box-shadow: none;
}

.cta-section .btn-phone:hover {
  background: #0066CC;
  color: #fff;
}

/* ===== Blog ===== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.blog-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.blog-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.blog-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-image-placeholder {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, var(--light-blue), var(--sky-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

.blog-card-content {
  padding: 1.5rem;
}

.blog-card-content time {
  font-size: 0.875rem;
  color: var(--text-grey);
}

.blog-card-content h2 {
  font-size: 1.25rem;
  margin: 0.5rem 0;
  color: var(--text-dark);
}

.blog-card-content p {
  color: var(--text-grey);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.read-more {
  color: var(--connection-blue);
  font-weight: 500;
}

.no-posts {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  background: var(--light-grey);
  border-radius: 12px;
}

/* Blog Post */
.blog-header {
  background: linear-gradient(135deg, var(--light-blue) 0%, var(--sky-blue) 100%);
  padding: 4rem 0;
}

.blog-header time {
  color: var(--connection-blue);
  font-weight: 500;
}

.blog-header h1 {
  margin: 0.5rem 0 1rem;
  max-width: 800px;
}

.blog-intro {
  font-size: 1.25rem;
  color: var(--text-grey);
  max-width: 700px;
}

.blog-body {
  padding: 4rem 0;
}

.blog-content-wrapper {
  max-width: 700px;
  margin: 0 auto;
}

.blog-content-wrapper h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.blog-content-wrapper p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.blog-content-wrapper ul,
.blog-content-wrapper ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.blog-content-wrapper li {
  margin-bottom: 0.5rem;
}

.blog-cta {
  max-width: 700px;
  margin: 3rem auto;
  padding: 2rem;
  background: var(--light-blue);
  border-radius: 12px;
  text-align: center;
}

.blog-cta h3 {
  margin-bottom: 0.5rem;
}

.blog-cta p {
  margin-bottom: 1.5rem;
  color: var(--text-grey);
}

.blog-nav {
  max-width: 700px;
  margin: 2rem auto 0;
  display: flex;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid var(--border-grey);
}

.blog-nav a {
  color: var(--connection-blue);
}

/* Blog Content Enhancements */
.blog-content-wrapper h3 {
  position: relative;
  padding-left: 2rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--connection-blue);
  font-size: 1.25rem;
}

.blog-content-wrapper h3::before {
  content: "📡";
  position: absolute;
  left: 0;
  font-size: 1.1rem;
}

/* Alternate icons for different sections */
.blog-content-wrapper h3:nth-of-type(1)::before { content: "📡"; }
.blog-content-wrapper h3:nth-of-type(2)::before { content: "📏"; }
.blog-content-wrapper h3:nth-of-type(3)::before { content: "🌡️"; }
.blog-content-wrapper h3:nth-of-type(4)::before { content: "📱"; }
.blog-content-wrapper h3:nth-of-type(5)::before { content: "🌐"; }
.blog-content-wrapper h3:nth-of-type(6)::before { content: "✓"; }

/* Styled blockquotes for "The fix:" sections */
/* Note: Use .fix-box class instead - :contains() is not valid CSS */
.blog-content-wrapper p strong:first-child {
  display: inline-block;
}

/* Enhanced blockquotes */
.blog-content-wrapper blockquote {
  background: linear-gradient(135deg, var(--light-blue) 0%, var(--sky-blue) 100%);
  border-left: 4px solid var(--connection-blue);
  padding: 1.5rem;
  border-radius: 0 12px 12px 0;
  margin: 1.5rem 0;
  font-style: italic;
}

.blog-content-wrapper blockquote p {
  margin-bottom: 0;
  color: var(--dark-grey);
}

/* List enhancements */
.blog-content-wrapper ul {
  list-style: none;
  padding-left: 0;
}

.blog-content-wrapper ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
}

.blog-content-wrapper ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--connection-blue);
  font-weight: bold;
}

/* Negative list items (Won't work section) */
.blog-content-wrapper h2 + ul li::before,
.blog-content-wrapper h2:contains("Won't") + ul li::before {
  content: "✗";
  color: #DC2626;
}

/* Signal strength indicator animation */
@keyframes pulse-signal {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.blog-content-wrapper h2 {
  position: relative;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid transparent;
  background: linear-gradient(90deg, var(--connection-blue) 0%, var(--success-green) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.5rem;
}

.blog-content-wrapper h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--connection-blue), var(--success-green));
  border-radius: 2px;
}

/* Reading time and estimated difficulty */
.blog-header .blog-meta {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-grey);
}

.blog-header .blog-meta span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Article progress bar */
.blog-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--connection-blue), var(--success-green));
  z-index: 9999;
  transition: width 0.1s ease;
}

/* Fix box - green success styling */
.fix-box {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border-left: 4px solid var(--success-green);
  padding: 1.25rem 1.5rem;
  border-radius: 0 12px 12px 0;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.fix-box strong {
  color: var(--success-green-dark);
  font-weight: 600;
}

/* Warning list - red/orange styling for "what won't work" */
.warning-list {
  background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
  border-left: 4px solid #DC2626;
  padding: 1.25rem 1.5rem;
  border-radius: 0 12px 12px 0;
  margin: 1rem 0 1.5rem;
}

.warning-list ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.warning-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
}

.warning-list li::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: #DC2626;
  font-weight: bold;
}

.warning-list li:last-child {
  margin-bottom: 0;
}

/* Key takeaway box */
.blog-takeaway {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 1px solid #F59E0B;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.blog-takeaway h4 {
  margin-top: 0;
}

.blog-takeaway h4 {
  color: #B45309;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-takeaway h4::before {
  content: "💡";
}

/* Dark mode adjustments for blog enhancements */
[data-theme="dark"] .blog-content-wrapper h2 {
  background: linear-gradient(90deg, #66B2FF 0%, #4ADE80 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme="dark"] .blog-content-wrapper h3 {
  color: #66B2FF;
}

[data-theme="dark"] .blog-content-wrapper blockquote {
  background: linear-gradient(135deg, var(--light-grey) 0%, var(--sky-blue) 100%);
  border-left-color: #66B2FF;
}

[data-theme="dark"] .blog-content-wrapper blockquote p {
  color: var(--dark-grey);
}

[data-theme="dark"] .blog-takeaway {
  background: linear-gradient(135deg, #422006 0%, #78350F 100%);
  border-color: #D97706;
}

[data-theme="dark"] .blog-takeaway h4 {
  color: #FCD34D;
}

[data-theme="dark"] .fix-box {
  background: linear-gradient(135deg, #052e16 0%, #14532d 100%);
  border-left-color: #22c55e;
}

[data-theme="dark"] .fix-box strong {
  color: #4ade80;
}

[data-theme="dark"] .warning-list {
  background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
  border-left-color: #ef4444;
}

[data-theme="dark"] .warning-list li::before {
  color: #f87171;
}

/* Lead paragraph */
.blog-content-wrapper .lead {
  font-size: 1.25rem;
  color: var(--dark-grey);
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--light-grey);
}

/* General lead/intro styling */
.lead,
.page-intro,
.hero-subtitle {
  font-weight: 500;
  line-height: 1.7;
}

/* Callout Boxes */
.callout {
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  position: relative;
}

.callout-warning {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-left: 4px solid #F59E0B;
}

.callout-tip {
  background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
  border-left: 4px solid var(--success-green);
}

.callout-insight {
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  border-left: 4px solid var(--connection-blue);
}

.callout-title {
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.callout-warning .callout-title { color: #92400E; }
.callout-tip .callout-title { color: #065F46; }
.callout-insight .callout-title { color: var(--connection-blue-dark); }

.callout p {
  margin-bottom: 0;
  color: var(--dark-grey);
}

.callout ul {
  margin: 0;
  padding-left: 1.25rem;
}

.callout li {
  margin-bottom: 0.5rem;
  color: var(--dark-grey);
}

/* Channel Diagram - Dark mode immune (maintains brand colours in both themes) */
.channel-diagram {
  background: linear-gradient(135deg, #0066CC 0%, #0052A3 100%) !important; /* Fixed brand blue */
  border-radius: 16px;
  padding: 2.5rem 2rem;
  margin: 2.5rem 0;
  color: white !important;
}

.channel-diagram h3 {
  color: white !important;
  margin-top: 0;
  text-align: center;
  font-size: 1.35rem;
  margin-bottom: 1.5rem;
}

.channel-diagram .channel-label,
.channel-diagram .legend-item {
  color: white !important;
}

.channel-visual {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.channel-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.channel-label {
  width: 80px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: right;
  flex-shrink: 0;
}

.channel-blocks {
  flex: 1;
  display: flex;
  gap: 4px;
  height: 40px;
}

.channel-block {
  flex: 1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.9;
}

.block-free { background: rgba(255,255,255,0.2); }
.block-yours { background: var(--signal-orange); }
.block-neighbour { background: #8B5CF6; }
.block-conflict {
  background: #EF4444;
  animation: pulse-conflict 1.5s infinite;
}

@keyframes pulse-conflict {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.5; }
}

.channel-legend {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

/* Comparison Section */
.comparison-section {
  background: var(--light-grey);
  border-radius: 16px;
  padding: 2rem;
  margin: 2.5rem 0;
}

.comparison-section h3 {
  margin-top: 0;
  text-align: center;
  color: var(--dark-grey);
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

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

.comparison-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comparison-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.comparison-card.recommended {
  border: 3px solid var(--success-green);
  position: relative;
}

.comparison-card.recommended::after {
  content: '✓ Recommended';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--success-green);
  color: white;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.bandwidth-label {
  font-size: 2rem;
  font-weight: 800;
  color: var(--connection-blue);
  margin-bottom: 0.5rem;
}

.bandwidth-subtitle {
  font-size: 0.85rem;
  color: var(--text-grey);
  margin-bottom: 1rem;
}

.bandwidth-pros {
  text-align: left;
  font-size: 0.875rem;
  padding-left: 0;
  list-style: none;
}

.bandwidth-pros li {
  margin-bottom: 0.5rem;
  padding-left: 1.25rem;
  position: relative;
}

.bandwidth-pros li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.comparison-card.good .bandwidth-pros li::before { background: var(--success-green); }
.comparison-card.problem .bandwidth-pros li::before { background: #EF4444; }

/* Future Section (6GHz) */
.future-section {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  margin: 2.5rem 0;
  color: white;
  position: relative;
  overflow: hidden;
}

.future-section::before {
  content: '6E';
  position: absolute;
  right: -20px;
  top: -20px;
  font-size: 180px;
  font-weight: 900;
  opacity: 0.05;
  line-height: 1;
}

.future-section h2 {
  color: white;
  border: none;
  padding: 0;
  margin: 0 0 1rem;
  background: none;
  -webkit-text-fill-color: white;
}

.future-section h2::after {
  display: none;
}

.future-section p {
  color: rgba(255, 255, 255, 0.9);
}

.wifi-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--signal-orange) 0%, #FF8C61 100%);
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Takeaways Section */
.takeaways {
  background: linear-gradient(135deg, var(--signal-orange) 0%, #FF8C61 100%);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  margin: 2.5rem 0;
  color: white;
}

.takeaways h2 {
  color: white;
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
  background: none;
  -webkit-text-fill-color: white;
}

.takeaways h2::after {
  display: none;
}

.takeaway-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.takeaway-list li {
  padding: 0.75rem 0 0.75rem 2.25rem;
  position: relative;
  font-size: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.takeaway-list li:last-child {
  border-bottom: none;
}

.takeaway-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 24px;
  height: 24px;
  background: white;
  color: var(--signal-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

/* Blog category badge */
.blog-category {
  display: inline-block;
  background: var(--signal-orange);
  color: white;
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

/* Dark mode adjustments for new blog elements */
[data-theme="dark"] .callout-warning {
  background: linear-gradient(135deg, #422006 0%, #78350F 100%);
  border-left-color: #D97706;
}

[data-theme="dark"] .callout-warning .callout-title { color: #FCD34D; }
[data-theme="dark"] .callout-warning p,
[data-theme="dark"] .callout-warning li { color: #FEF3C7; }

[data-theme="dark"] .callout-tip {
  background: linear-gradient(135deg, #052e16 0%, #14532d 100%);
  border-left-color: #22c55e;
}

[data-theme="dark"] .callout-tip .callout-title { color: #4ade80; }
[data-theme="dark"] .callout-tip p,
[data-theme="dark"] .callout-tip li { color: #D1FAE5; }

[data-theme="dark"] .callout-insight {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
  border-left-color: #3b82f6;
}

[data-theme="dark"] .callout-insight .callout-title { color: #93c5fd; }
[data-theme="dark"] .callout-insight p { color: #DBEAFE; }

[data-theme="dark"] .comparison-section {
  background: var(--card-bg);
}

[data-theme="dark"] .comparison-card {
  background: var(--bg-white);
}

[data-theme="dark"] .blog-content-wrapper .lead {
  color: var(--dark-grey);
  border-bottom-color: var(--border-grey);
}

/* ===== Footer ===== */
.site-footer {
  background: var(--dark-grey);
  color: #fff;
  padding: 4rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.footer-brand .logo-text {
  color: #fff;
  display: block;
  margin-bottom: 1rem;
}

.footer-brand p {
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.5rem;
}

.footer-brand .tagline {
  color: var(--signal-orange);
  font-weight: 500;
}

.site-footer h3 {
  color: #fff;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: 0.5rem;
}

.site-footer a {
  color: rgba(255,255,255,0.7);
}

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

.footer-address {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
}

/* Footer Trust Badges */
.footer-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2.5rem;
  padding: 2rem 0;
  margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.85);
  font-size: 0.875rem;
  font-weight: 500;
}

.trust-badge svg {
  color: var(--success-green);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .footer-trust-badges {
    gap: 1rem 1.5rem;
    padding: 1.5rem 0;
  }

  .trust-badge {
    font-size: 0.8125rem;
  }

  .trust-badge svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .footer-trust-badges {
    gap: 0.75rem 1rem;
  }

  .trust-badge span {
    font-size: 0.75rem;
  }
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 2rem;
  text-align: center;
  color: rgba(255,255,255,0.5);
}

.footer-bottom p {
  margin: 0;
}

.footer-legal-links {
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.footer-legal-links a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}

.footer-legal-links a:hover {
  color: white;
  text-decoration: underline;
}

/* Footer Suburbs - Collapsible SEO Section */
.footer-suburbs {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-suburbs details {
  margin: 0;
}

.footer-suburbs summary {
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-suburbs summary::-webkit-details-marker {
  display: none;
}

.footer-suburbs summary::before {
  content: '+';
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  font-size: 0.9rem;
  transition: transform 0.2s;
}

.footer-suburbs details[open] summary::before {
  content: '−';
}

.footer-suburbs summary:hover {
  color: #fff;
}

.suburbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding-bottom: 1rem;
}

.suburb-region h4 {
  color: rgba(255,255,255,0.9);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.suburb-region h4 a {
  color: rgba(255,255,255,0.9);
}

.suburb-region h4 a:hover {
  color: var(--connection-blue);
}

.suburb-region p {
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0;
}

.suburb-region p a {
  color: rgba(255,255,255,0.7);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.3);
}

.suburb-region p a:hover {
  color: #fff;
  text-decoration-color: #fff;
}

/* Social Links */
.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  transition: all 0.3s ease;
}

.social-link:hover {
  background: var(--signal-orange);
  color: #fff;
  transform: translateY(-2px);
}

.social-link svg {
  width: 20px;
  height: 20px;
}

/* ===== Page Header ===== */
.page-header {
  background: linear-gradient(135deg, #0066CC 0%, #003366 100%);
  padding: 4rem 0;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

/* Decorative elements matching hero */
.page-header::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  border: 50px solid rgba(110, 231, 183, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 150px;
  height: 150px;
  border: 30px solid rgba(255, 107, 53, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.page-header h1 {
  color: white;
  position: relative;
  z-index: 1;
}

.page-intro {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ===== Services Page ===== */
.services-list {
  padding: var(--section-padding) 0;
}

.service-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-top: 4px solid #6EE7B7;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 102, 204, 0.15);
}

.service-card.service-featured {
  border-top-color: var(--signal-orange);
  position: relative;
}

.service-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--signal-orange);
  color: white;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.service-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-grey);
}

.service-header h2 {
  margin: 0;
  color: var(--connection-blue);
}

.service-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--signal-orange);
}

.service-price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-grey);
}

.service-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.service-col h3 {
  font-size: 1.125rem;
  color: var(--dark-grey);
  margin-bottom: 1rem;
}

.service-col ul {
  margin-left: 1.25rem;
}

.service-col li {
  color: var(--text-grey);
}

.best-for {
  list-style: none;
  margin-left: 0;
}

.best-for li::before {
  content: "✓ ";
  color: var(--success-green);
  font-weight: bold;
}

.service-cta {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-grey);
}

.services-faq {
  padding: var(--section-padding) 0;
  background: var(--light-grey);
}

.services-faq h2 {
  text-align: center;
  margin-bottom: 2rem;
}

.faq-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto 2rem;
}

.faq-preview .faq-item {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
}

.faq-preview h3 {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.faq-preview p {
  margin: 0;
  color: var(--text-grey);
}

.faq-link {
  text-align: center;
}

/* ===== About Page ===== */
.about-content {
  padding: var(--section-padding) 0;
}

.about-intro {
  max-width: 800px;
  margin: 0 auto 4rem;
}

.about-intro .lead {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--connection-blue);
}

/* Intro with Photo - About Page */
.intro-with-photo {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.intro-photo {
  flex-shrink: 0;
}

.karl-headshot {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--connection-blue);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.intro-text {
  flex: 1;
}

.video-intro {
  font-size: 1rem;
  color: var(--text-grey);
  margin-bottom: 1rem;
  font-style: italic;
}

@media (max-width: 768px) {
  .intro-with-photo {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .karl-headshot {
    width: 150px;
    height: 150px;
  }
}

/* Intro Video */
.intro-video {
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.about-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.comparison-col {
  padding: 2rem;
  border-radius: 12px;
}

.comparison-col.bad {
  background: #FEF2F2;
  border: 1px solid #FECACA;
}

.comparison-col.good {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
}

.comparison-col h3 {
  margin-bottom: 1rem;
}

.comparison-col ul {
  margin-bottom: 1rem;
}

.comparison-col .tagline {
  font-weight: 600;
  color: var(--success-green-dark);
  margin: 0;
}

.about-name {
  max-width: 700px;
  margin: 0 auto 4rem;
  text-align: center;
}

.about-name .quote {
  font-size: 1.5rem;
  font-style: italic;
  color: var(--text-grey);
  margin: 1.5rem 0;
}

.about-boring {
  max-width: 400px;
  margin: 0 auto;
  background: var(--light-grey);
  padding: 2rem;
  border-radius: 12px;
}

.boring-list {
  list-style: none;
  margin: 0;
}

.boring-list li {
  margin-bottom: 0.5rem;
}

/* ===== Contact Page ===== */
.contact-content {
  padding: var(--section-padding) 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 2fr;
  }

  /* Form-first layout: form takes 2fr, contact info takes 1fr */
  .contact-grid-form-first {
    grid-template-columns: 2fr 1fr;
  }
}

.contact-info h2 {
  margin-bottom: 1.5rem;
}

.contact-method {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.contact-icon {
  font-size: 1.5rem;
}

.contact-method strong {
  display: block;
  margin-bottom: 0.25rem;
}

.contact-method a {
  color: var(--connection-blue);
  font-weight: 500;
}

.response-time {
  color: var(--text-grey);
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

.contact-form-wrapper h2 {
  margin-bottom: 1.5rem;
}

/* ===== Form Styles ===== */
.hp-field {
  position: absolute;
  left: -9999px;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--bg-white, #ffffff);
  color: var(--dark-grey, #1a1a2e);
  border: 1px solid var(--border-grey);
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

/* Dark mode form fields */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--card-bg, #1a1f2e);
  color: var(--dark-grey, #e2e8f0);
  border-color: var(--border-grey);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--connection-blue);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.radio-group {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  cursor: pointer;
}

.radio-label input {
  width: auto;
}

/* Consent checkbox styling */
.form-consent {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-grey);
  cursor: pointer;
  line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
  margin-top: 0.2rem;
  accent-color: var(--connection-blue);
}

.checkbox-label a {
  color: var(--connection-blue);
  text-decoration: underline;
}

.checkbox-label a:hover {
  color: var(--connection-blue-dark);
}

.form-message {
  padding: 1.5rem;
  border-radius: 12px;
  margin-top: 1.5rem;
}

.form-message.success {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
}

.form-message.error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
}

.form-message h3 {
  margin-bottom: 0.5rem;
}

.form-message p {
  margin: 0;
}

/* ===== FAQ Page ===== */
.faq-content {
  padding: var(--section-padding) 0;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--border-grey);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.faq-item h2 {
  font-size: 1.25rem;
  color: var(--connection-blue);
  margin-bottom: 1rem;
}

.faq-item p {
  margin: 0;
  color: var(--text-grey);
}

/* ===== Service Area Pages ===== */
.area-header {
  background: linear-gradient(135deg, var(--connection-blue) 0%, var(--connection-blue-dark) 100%);
  color: #fff;
}

.area-header h1 {
  color: #fff;
}

.area-header .page-intro {
  color: rgba(255,255,255,0.9);
}

.area-content {
  padding: var(--section-padding) 0;
}

.area-content h2 {
  color: var(--connection-blue);
  margin-top: 2rem;
}

.area-content h3 {
  margin-top: 1.5rem;
}

.area-services {
  padding: var(--section-padding) 0;
  background: var(--light-grey);
}

.area-services h2 {
  text-align: center;
  margin-bottom: 2rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.service-mini {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
}

.service-mini h3 {
  margin-bottom: 0.5rem;
  color: var(--connection-blue);
}

.service-mini .price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--signal-orange);
  margin-bottom: 0.5rem;
}

.service-mini p {
  margin: 0;
  color: var(--text-grey);
  font-size: 0.875rem;
}

.services-link {
  text-align: center;
}

/* ===== Single Page ===== */
.page-single {
  padding: var(--section-padding) 0;
}

.page-single h1 {
  margin-bottom: 2rem;
}

/* ===== Utility Classes ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* ===== Results / Case Studies Section ===== */
.results {
  padding: var(--section-padding) 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e8f2ff 50%, #f0fdf4 100%);
  position: relative;
}

.results::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--connection-blue), var(--success-green));
}

.results h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 2.25rem;
}

.results .container > p {
  text-align: center;
  color: var(--text-grey);
  font-size: 1.1rem;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2.5rem;
}

.result-card {
  background: white;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 10px 40px rgba(0, 102, 204, 0.1);
  border: none;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.result-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 102, 204, 0.15);
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, var(--connection-blue) 0%, #0052a3 100%);
  margin-bottom: 0;
  border-bottom: none;
}

.result-location {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: white;
}

.result-type {
  font-size: 0.8rem;
  color: var(--connection-blue);
  background: white;
  padding: 0.35rem 1rem;
  border-radius: 20px;
  font-weight: 600;
}

.result-problem {
  margin: 1.5rem 2rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, #FFF5F5 0%, #FED7D7 100%);
  border-radius: 12px;
  border-left: 5px solid #E53E3E;
  font-size: 0.95rem;
  line-height: 1.6;
}

.result-problem strong {
  color: #C53030;
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-top: none;
  border-bottom: none;
}

.stat {
  text-align: center;
  padding: 1.5rem 1rem;
  border-right: 1px solid rgba(0, 204, 102, 0.2);
}

.stat:last-child {
  border-right: none;
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--success-green);
  line-height: 1;
}

.stat-label {
  display: block;
  font-size: 0.7rem;
  color: #166534;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.5rem;
  font-weight: 600;
}

.result-solution {
  margin: 1.5rem 2rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, #F0FFF4 0%, #DCFCE7 100%);
  border-radius: 12px;
  border-left: 5px solid var(--success-green);
  font-size: 0.95rem;
  line-height: 1.6;
}

.result-solution strong {
  color: var(--success-green-dark);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.result-quote {
  font-style: normal;
  font-weight: 500;
  color: var(--dark-grey);
  font-size: 1.05rem;
  margin: 1.5rem 2rem 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--sky-blue);
  border-radius: 8px;
  border-left: 4px solid var(--connection-blue);
  line-height: 1.6;
}

.result-attribution {
  display: block;
  font-size: 0.85rem;
  color: var(--text-grey);
  text-align: right;
  padding: 0 2rem 1.5rem;
  font-weight: 500;
}

/* ===== Testimonials Section ===== */
.testimonials {
  padding: 80px 0;
  background: linear-gradient(135deg, #0066CC 0%, #003366 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.testimonials::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  width: 300px;
  height: 300px;
  border: 50px solid rgba(110, 231, 183, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.testimonials h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: white;
  position: relative;
  z-index: 1;
}

.testimonial-card {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: 2.5rem;
  position: relative;
  z-index: 1;
}

.testimonial-card.featured {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}

.testimonial-stars {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  color: #FFD700;
  margin-bottom: 1rem;
}

.testimonial-stars svg {
  width: 24px;
  height: 24px;
}

.testimonial-card blockquote {
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.95);
}

.testimonial-card cite {
  font-style: normal;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ===== Google Review CTA ===== */
.review-cta {
  margin-top: 3rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  text-align: center;
}

.review-cta p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.btn-review {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: #fff !important;
  color: #1a1a1a !important; /* Fixed dark text - immune to dark mode */
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-review:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  color: #1a1a1a !important; /* Fixed dark text - immune to dark mode */
}

.google-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #4285F4 25%, #34A853 25%, #34A853 50%, #FBBC05 50%, #FBBC05 75%, #EA4335 75%);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 4px;
}

/* ===== Sample Report Preview ===== */
.report-preview {
  margin: 2.5rem 0 1rem;
  padding: 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e8f2ff 100%);
  border-radius: 16px;
  text-align: center;
}

.report-preview h3 {
  color: var(--connection-blue);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.report-preview > p {
  color: var(--text-grey);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.report-preview img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 15px 50px rgba(0, 102, 204, 0.2);
  border: 4px solid white;
  transition: transform 0.3s ease;
}

.report-preview img:hover {
  transform: scale(1.02);
}

.report-preview-caption {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-grey);
  font-style: italic;
}

.report-preview-link {
  display: block;
  position: relative;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
}

.report-preview-overlay {
  position: absolute;
  /* Fallback for browsers without inset support */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(0, 102, 204, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  border-radius: 12px;
}

.report-preview-link:hover .report-preview-overlay {
  background: rgba(0, 102, 204, 0.85);
}

.report-preview-btn {
  color: white;
  font-weight: 700;
  font-size: 1.125rem;
  padding: 1rem 2rem;
  background: var(--signal-orange);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.report-preview-link:hover .report-preview-btn {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Report Highlight Cards (Services Page) ===== */
.report-highlight {
  margin-top: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, #E6F0FA 0%, #F0F7FF 100%);
  border-radius: 16px;
  border: 1px solid rgba(0, 102, 204, 0.1);
}

[data-theme="dark"] .report-highlight {
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.15) 0%, rgba(0, 102, 204, 0.08) 100%);
  border-color: rgba(0, 102, 204, 0.2);
}

.report-highlight h3 {
  font-size: 1.25rem;
  color: var(--connection-blue);
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.report-highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
  .report-highlight-grid {
    grid-template-columns: 1fr;
  }
}

.report-highlight-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}

.report-highlight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 102, 204, 0.1);
}

[data-theme="dark"] .report-highlight-card {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.report-highlight-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--connection-blue);
  border-radius: 10px;
}

.report-highlight-icon svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
}

.report-highlight-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.report-highlight-text strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-dark);
}

.report-highlight-text span {
  font-size: 0.8125rem;
  color: var(--text-grey);
  line-height: 1.4;
}

.report-highlight-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: white;
  background: linear-gradient(135deg, var(--connection-blue) 0%, var(--connection-blue-dark) 100%);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 1rem 1.75rem;
  border-radius: 10px;
  margin-top: 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s, gap 0.2s;
}

.report-highlight-cta:hover {
  gap: 1rem;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
}

[data-theme="dark"] .report-highlight-cta {
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}

/* ===== Breadcrumbs ===== */
.breadcrumbs {
  background: var(--background-secondary, #f9fafb);
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

[data-theme="dark"] .breadcrumbs {
  background: var(--background-secondary, #1a1f2e);
  border-bottom-color: rgba(255,255,255,0.05);
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb-item:not(:last-child)::after {
  content: "›";
  color: var(--text-muted, #6b7280);
  font-size: 1rem;
}

.breadcrumb-item a {
  color: var(--connection-blue, #0066CC);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb-item a:hover {
  color: var(--button-hover, #0052a3);
  text-decoration: underline;
}

.breadcrumb-item.current {
  color: var(--text-muted, #6b7280);
  font-weight: 500;
}

/* Breadcrumbs mobile */
@media (max-width: 767px) {
  .breadcrumbs {
    padding: 0.625rem 0;
  }

  .breadcrumb-list {
    font-size: 0.8125rem;
    gap: 0.375rem;
  }

  .breadcrumb-item:not(:last-child)::after {
    font-size: 0.875rem;
  }
}

/* ===== Mobile Adjustments ===== */
@media (max-width: 767px) {
  :root {
    --section-padding: 3rem;
  }

  .hero h1 br {
    display: none;
  }

  .hero-subtitle br {
    display: none;
  }

  .service-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .result-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .result-stats {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .stat {
    border-right: none;
    border-bottom: 1px solid rgba(0, 204, 102, 0.2);
    padding: 1rem;
  }

  .stat:last-child {
    border-bottom: none;
  }

  .stat-number {
    font-size: 1.75rem;
  }

  .result-problem,
  .result-solution,
  .result-quote {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .result-attribution {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .testimonial-card blockquote {
    font-size: 1.1rem;
  }
}

/* ===== Dark Mode Overrides ===== */
[data-theme="dark"] .site-header {
  background: var(--bg-white);
  border-bottom-color: var(--border-grey);
}

[data-theme="dark"] .nav-toggle span {
  background: var(--dark-grey);
}

[data-theme="dark"] .nav-menu.active {
  background: var(--bg-white);
  border-bottom-color: var(--border-grey);
}

[data-theme="dark"] .nav-menu.active a {
  border-bottom-color: var(--border-grey);
}

[data-theme="dark"] .problems,
[data-theme="dark"] .service-area {
  background: var(--bg-white);
}

[data-theme="dark"] .step,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .service-card {
  background: var(--card-bg);
  border-top-color: #6EE7B7;
}

[data-theme="dark"] .faq-item,
[data-theme="dark"] .service-mini {
  background: var(--card-bg);
  border-color: var(--border-grey);
}

[data-theme="dark"] .result-card {
  background: var(--card-bg);
}

[data-theme="dark"] .result-stats {
  background: linear-gradient(135deg, #1a2e1a 0%, #1e3a1e 100%);
}

[data-theme="dark"] .stat {
  border-right-color: rgba(0, 204, 102, 0.3);
}

[data-theme="dark"] .result-quote {
  background: var(--sky-blue);
}

[data-theme="dark"] .blog-card-content h2 {
  color: var(--dark-grey);
}

[data-theme="dark"] .services-faq {
  background: var(--light-grey);
}

[data-theme="dark"] .faq-preview .faq-item {
  background: var(--card-bg);
}

[data-theme="dark"] .about-boring {
  background: var(--light-grey);
}

[data-theme="dark"] .contact-form-wrapper input,
[data-theme="dark"] .contact-form-wrapper select,
[data-theme="dark"] .contact-form-wrapper textarea {
  background: var(--card-bg);
  border-color: var(--border-grey);
  color: var(--dark-grey);
}

[data-theme="dark"] .contact-form-wrapper input:focus,
[data-theme="dark"] .contact-form-wrapper select:focus,
[data-theme="dark"] .contact-form-wrapper textarea:focus {
  border-color: var(--connection-blue);
}

[data-theme="dark"] .area-content,
[data-theme="dark"] .page-single,
[data-theme="dark"] .about-content,
[data-theme="dark"] .contact-content,
[data-theme="dark"] .faq-content,
[data-theme="dark"] .services-list,
[data-theme="dark"] .blog-body {
  background: var(--bg-white);
}

[data-theme="dark"] .area-services {
  background: var(--light-grey);
}

[data-theme="dark"] .report-preview {
  background: linear-gradient(135deg, var(--light-grey) 0%, var(--sky-blue) 100%);
}

[data-theme="dark"] .blog-cta {
  background: var(--light-grey);
}

[data-theme="dark"] .blog-nav {
  border-top-color: var(--border-grey);
}

/* Search Toggle Button */
.search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.search-toggle:hover {
  background: var(--light-grey);
}

.search-toggle svg {
  width: 22px;
  height: 22px;
  color: var(--dark-grey);
  transition: color 0.2s;
}

[data-theme="dark"] .search-toggle:hover {
  background: var(--card-bg);
}

[data-theme="dark"] .search-toggle svg {
  color: var(--text-grey);
}

/* Dark Mode Toggle Button */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.theme-toggle:hover {
  background: var(--light-grey);
}

.theme-toggle svg {
  width: 24px;
  height: 24px;
  color: var(--dark-grey);
  transition: color 0.2s;
}

.theme-toggle .sun-icon {
  display: none;
}

.theme-toggle .moon-icon {
  display: block;
}

[data-theme="dark"] .theme-toggle .sun-icon {
  display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

[data-theme="dark"] .theme-toggle:hover {
  background: var(--card-bg);
}

/* ===== Search Modal ===== */
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.search-modal.active {
  opacity: 1;
  visibility: visible;
}

.search-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.search-modal-content {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 70vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transform: translateY(-20px);
  transition: transform 0.2s ease;
  margin: 0 1rem;
}

.search-modal.active .search-modal-content {
  transform: translateY(0);
}

.search-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-grey);
}

.search-modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--dark-grey);
}

.search-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.search-modal-close:hover {
  background: var(--light-grey);
}

.search-modal-close svg {
  width: 20px;
  height: 20px;
  color: var(--text-grey);
}

/* Pagefind UI Customizations */
#pagefind-container {
  padding: 1rem;
  max-height: calc(70vh - 60px);
  overflow-y: auto;
}

/* Override Pagefind default variables to match brand */
:root {
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: #0066CC;
  --pagefind-ui-text: #1A1A1A;
  --pagefind-ui-background: #ffffff;
  --pagefind-ui-border: #E5E7EB;
  --pagefind-ui-tag: #F3F4F6;
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 8px;
  --pagefind-ui-image-border-radius: 8px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Search input styling */
.pagefind-ui__search-input {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  padding: 0.875rem 1rem 0.875rem 2.75rem !important;
  border-radius: 10px !important;
  border: 2px solid var(--border-grey) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.pagefind-ui__search-input:focus {
  outline: none !important;
  border-color: var(--connection-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15) !important;
}

/* Search clear button */
.pagefind-ui__search-clear {
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Result styling */
.pagefind-ui__result {
  padding: 1rem !important;
  margin: 0.5rem 0 !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-grey) !important;
  transition: border-color 0.2s, background-color 0.2s !important;
}

.pagefind-ui__result:hover {
  border-color: var(--connection-blue) !important;
  background: #F8FBFF !important;
}

.pagefind-ui__result-link {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--connection-blue) !important;
  text-decoration: none !important;
}

.pagefind-ui__result-link:hover {
  text-decoration: underline !important;
}

.pagefind-ui__result-excerpt {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: var(--text-grey) !important;
}

.pagefind-ui__result-excerpt mark {
  background: rgba(0, 102, 204, 0.15) !important;
  color: var(--connection-blue) !important;
  padding: 0.1em 0.2em !important;
  border-radius: 2px !important;
}

/* Message styling */
.pagefind-ui__message {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--text-grey) !important;
  padding: 0.5rem 0 !important;
}

/* Dark mode for search modal */
[data-theme="dark"] .search-modal-content {
  background: #1E293B;
}

[data-theme="dark"] .search-modal-header {
  border-bottom-color: #334155;
}

[data-theme="dark"] .search-modal-title {
  color: #F3F4F6;
}

[data-theme="dark"] .search-modal-close:hover {
  background: #334155;
}

[data-theme="dark"] .search-modal-close svg {
  color: #9CA3AF;
}

/* Pagefind dark mode overrides */
[data-theme="dark"] {
  --pagefind-ui-primary: #60A5FA;
  --pagefind-ui-text: #F3F4F6;
  --pagefind-ui-background: #1E293B;
  --pagefind-ui-border: #334155;
  --pagefind-ui-tag: #334155;
}

[data-theme="dark"] .pagefind-ui__search-input {
  background: #0F172A !important;
  border-color: #334155 !important;
  color: #F3F4F6 !important;
}

[data-theme="dark"] .pagefind-ui__search-input:focus {
  border-color: #60A5FA !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

[data-theme="dark"] .pagefind-ui__search-input::placeholder {
  color: #64748B !important;
}

[data-theme="dark"] .pagefind-ui__result {
  border-color: #334155 !important;
  background: #0F172A !important;
}

[data-theme="dark"] .pagefind-ui__result:hover {
  border-color: #60A5FA !important;
  background: #1E3A5F !important;
}

[data-theme="dark"] .pagefind-ui__result-link {
  color: #60A5FA !important;
}

[data-theme="dark"] .pagefind-ui__result-excerpt {
  color: #9CA3AF !important;
}

[data-theme="dark"] .pagefind-ui__result-excerpt mark {
  background: rgba(96, 165, 250, 0.2) !important;
  color: #93C5FD !important;
}

[data-theme="dark"] .pagefind-ui__message {
  color: #9CA3AF !important;
}

/* Mobile responsive for search modal */
@media (max-width: 640px) {
  .search-modal {
    padding-top: 5vh;
  }

  .search-modal-content {
    max-height: 85vh;
    margin: 0 0.5rem;
    border-radius: 12px;
  }

  #pagefind-container {
    max-height: calc(85vh - 60px);
  }
}

/* ===== Dark Mode - Preserve Light Mode Styling for Coloured Backgrounds ===== */
/* These elements have their own coloured backgrounds, so text must stay dark */

/* Case Study Cards - Problem boxes (pink/red background) */
[data-theme="dark"] .result-problem {
  background: linear-gradient(135deg, #FFF5F5 0%, #FED7D7 100%);
  color: #1a1a1a;
}

[data-theme="dark"] .result-problem strong {
  color: #C53030;
}

/* Case Study Cards - Solution boxes (green background) */
[data-theme="dark"] .result-solution {
  background: linear-gradient(135deg, #F0FFF4 0%, #DCFCE7 100%);
  color: #1a1a1a;
}

[data-theme="dark"] .result-solution strong {
  color: #166534;
}

/* Case Study Cards - Quote section */
[data-theme="dark"] .result-quote {
  background: #E8F2FF;
  color: #1a1a1a;
}

/* Case Study Cards - Stats section */
[data-theme="dark"] .result-stats {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

[data-theme="dark"] .stat-label {
  color: #166534;
}

/* Case Study Cards - Header */
[data-theme="dark"] .result-header {
  background: linear-gradient(135deg, var(--connection-blue) 0%, #0052a3 100%);
}

[data-theme="dark"] .result-location {
  color: white;
}

[data-theme="dark"] .result-type {
  color: var(--connection-blue);
  background: white;
}

/* Case Study Cards - Attribution */
[data-theme="dark"] .result-attribution {
  color: #a0aec0;
}

/* Results Section Header */
[data-theme="dark"] .results {
  background: var(--bg-white);
}

[data-theme="dark"] .results h2 {
  color: var(--dark-grey);
}

[data-theme="dark"] .results > .container > p {
  color: var(--text-grey);
}

/* ===== Dark Mode - Footer Fixes ===== */
/* Footer has dark background in both modes - text must be light */
[data-theme="dark"] .site-footer {
  background: #0f1219;
}

[data-theme="dark"] .site-footer h3 {
  color: #ffffff;
}

[data-theme="dark"] .site-footer p,
[data-theme="dark"] .site-footer li,
[data-theme="dark"] .site-footer a {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .site-footer a:hover {
  color: #ffffff;
}

[data-theme="dark"] .footer-brand .logo-text {
  color: #ffffff;
}

[data-theme="dark"] .footer-brand .tagline {
  color: var(--signal-orange);
}

[data-theme="dark"] .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .footer-bottom p {
  color: rgba(255, 255, 255, 0.5);
}

/* ===== Dark Mode - Section Headers ===== */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
  color: #f0f0f0;
}

/* Hero section in dark mode */
[data-theme="dark"] .hero {
  background: linear-gradient(135deg, var(--light-blue) 0%, var(--sky-blue) 100%);
}

[data-theme="dark"] .hero h1 {
  color: #f0f0f0;
}

[data-theme="dark"] .hero-subtitle {
  color: var(--text-grey);
}

/* Page headers */
[data-theme="dark"] .page-header {
  background: linear-gradient(135deg, #0066CC 0%, #003366 100%);
}

[data-theme="dark"] .page-header h1 {
  color: white;
}

[data-theme="dark"] .page-intro {
  color: rgba(255, 255, 255, 0.9);
}

/* How it works section */
[data-theme="dark"] .how-it-works {
  background: var(--light-grey);
}

/* Problem grid items */
[data-theme="dark"] .problem-item {
  background: var(--card-bg);
}

[data-theme="dark"] .problem-item p {
  color: var(--dark-grey);
}

/* Area items */
[data-theme="dark"] .area-item {
  background: var(--card-bg);
}

/* Service area header - keep blue background with white text */
[data-theme="dark"] .area-header {
  background: linear-gradient(135deg, var(--connection-blue) 0%, #0052a3 100%);
}

[data-theme="dark"] .area-header h1 {
  color: #ffffff;
}

[data-theme="dark"] .area-header .page-intro {
  color: rgba(255, 255, 255, 0.9);
}

/* Blog header */
[data-theme="dark"] .blog-header {
  background: linear-gradient(135deg, var(--light-blue) 0%, var(--sky-blue) 100%);
}

/* Credibility section - keep blue background with white text */
[data-theme="dark"] .credibility {
  background: #0066CC; /* Use hardcoded brand blue, not the variable (which is lighter in dark mode for links) */
}

[data-theme="dark"] .credibility p {
  color: #ffffff;
}

/* CTA section - keep orange background with white text */
[data-theme="dark"] .cta-section {
  background: var(--signal-orange);
}

[data-theme="dark"] .cta-section h2,
[data-theme="dark"] .cta-section p {
  color: #ffffff;
}

/* Testimonials section - keep blue background with white text */
[data-theme="dark"] .testimonials {
  background: #0066CC; /* Use hardcoded brand blue */
}

[data-theme="dark"] .testimonials h2 {
  color: #ffffff;
}

[data-theme="dark"] .testimonial-card blockquote {
  color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .testimonial-card cite {
  color: rgba(255, 255, 255, 0.8);
}

/* ===== Dark Mode - About Page Comparison Boxes ===== */
/* These have coloured backgrounds - text must stay dark */

/* Pink/salmon "bad" comparison box */
[data-theme="dark"] .comparison-col.bad {
  background: #FEF2F2;
  border-color: #FECACA;
}

[data-theme="dark"] .comparison-col.bad h3 {
  color: #1a1a1a;
}

[data-theme="dark"] .comparison-col.bad ul,
[data-theme="dark"] .comparison-col.bad li {
  color: #1a1a1a;
}

/* Green "good" comparison box */
[data-theme="dark"] .comparison-col.good {
  background: #F0FDF4;
  border-color: #BBF7D0;
}

[data-theme="dark"] .comparison-col.good h3 {
  color: #1a1a1a;
}

[data-theme="dark"] .comparison-col.good ul,
[data-theme="dark"] .comparison-col.good li {
  color: #1a1a1a;
}

[data-theme="dark"] .comparison-col.good .tagline {
  color: #166534;
}

/* ===== Tips/Blog Section ===== */
.tips-section {
  padding: var(--section-padding) 0;
  background: var(--bg-white, #fff);
}

/* Header - matching WiFi Decoded style */
.tips-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #0066CC 0%, #003366 100%);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

/* Decorative elements */
.tips-header::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border: 40px solid rgba(110, 231, 183, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.tips-header::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 120px;
  height: 120px;
  border: 25px solid rgba(255, 107, 53, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

[data-theme="dark"] .tips-header {
  background: linear-gradient(135deg, #0066CC 0%, #003366 100%);
}

.tips-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #FF6B35;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 50px;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.tips-header h1 {
  margin-bottom: 1rem;
  font-size: 2.75rem;
  color: white;
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .tips-header h1 {
  color: white;
}

.tips-intro {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

/* Search and Filter Controls */
.tips-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: var(--light-grey);
  border-radius: 16px;
}

[data-theme="dark"] .tips-controls {
  background: var(--card-bg);
}

/* Search Box */
.tips-search {
  position: relative;
  min-width: 250px;
  max-width: 350px;
}

.tips-search input {
  width: 100%;
  padding: 0.875rem 1.25rem 0.875rem 3rem;
  font-size: 1rem;
  font-family: var(--font-body);
  border: 2px solid var(--border-grey);
  border-radius: 12px;
  background: #fff;
  color: var(--dark-grey);
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .tips-search input {
  background: var(--card-bg);
  border-color: var(--border-grey);
  color: var(--dark-grey);
}

.tips-search input:focus {
  outline: none;
  border-color: #E8551F;
  box-shadow: 0 0 0 3px rgba(232, 85, 31, 0.1);
}

.tips-search input::placeholder {
  color: var(--text-grey);
}

.tips-search .search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  min-width: 18px;
  max-width: 18px;
  min-height: 18px;
  max-height: 18px;
  color: var(--text-grey);
  pointer-events: none;
}

.tips-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.tip-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border-top: 4px solid #6EE7B7;
}

.tip-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 102, 204, 0.15);
}

.tip-card-content {
  padding: 2rem;
}

.tip-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.tip-category {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tip-category.basics {
  background: linear-gradient(135deg, #E8F2FF 0%, #D4E7FF 100%);
  color: #0066CC;
}

.tip-category.deep-dive {
  background: linear-gradient(135deg, #FFF5E6 0%, #FFE7CC 100%);
  color: #E8551F;
}

.tip-readtime,
.tip-date {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-grey);
}

.tip-readtime svg,
.tip-date svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  flex-shrink: 0;
}

.tip-card h2 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.tip-card h2 a {
  color: var(--dark-grey);
  text-decoration: none;
  transition: color 0.2s ease;
}

.tip-card h2 a:hover {
  color: var(--connection-blue);
}

.tip-excerpt {
  color: var(--text-grey);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.tip-link {
  display: inline-flex;
  align-items: center;
  color: var(--connection-blue);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  transition: gap 0.2s ease;
  gap: 0.25rem;
}

.tip-link::after {
  content: '\2192';
}

.tip-link:hover {
  gap: 0.5rem;
}

/* Tip Article (Single Post) */
.tip-article {
  padding: var(--section-padding) 0;
  background: var(--bg-white);
}

.tip-article-header {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-grey);
}

.tip-article-header .tip-meta {
  margin-bottom: 1.25rem;
}

.tip-article-header h1 {
  color: var(--dark-grey);
  max-width: 800px;
  line-height: 1.25;
}

.tip-article-content {
  max-width: 750px;
}

/* Enhanced Article Typography */
.tip-article-content .lead {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--text-grey);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--border-grey);
}

.tip-article-content h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--dark-grey);
  margin: 3rem 0 1.25rem;
  line-height: 1.3;
}

.tip-article-content h3 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--dark-grey);
  margin: 2.5rem 0 1rem;
}

.tip-article-content p {
  font-size: 1.0625rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.tip-article-content ul,
.tip-article-content ol {
  margin: 1.25rem 0 1.5rem;
  padding-left: 1.5rem;
}

.tip-article-content li {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}

/* Enhanced Code Styling */
.tip-article-content code {
  background: #1a2332;
  color: #4fc3f7;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-family: 'Monaco', 'Consolas', 'Liberation Mono', monospace;
  font-size: 0.9em;
}

.tip-article-content pre {
  background: #1a2332;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  overflow-x: auto;
}

.tip-article-content pre code {
  background: none;
  padding: 0;
  color: #e2e8f0;
}

/* Enhanced Table Styling */
.tip-article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.tip-article-content th {
  background: var(--connection-blue);
  color: white;
  font-weight: 600;
  padding: 0.875rem 1rem;
  text-align: left;
}

.tip-article-content td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-grey);
  background: var(--bg-white);
}

.tip-article-content tr:last-child td {
  border-bottom: none;
}

/* Scroll Reveal Animations */
.tip-article-content > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.tip-article-content > *.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Callout box entrance animation */
.tip-article-content .callout {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.tip-article-content .callout.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Takeaways box enhanced styling */
.tip-article-content .takeaways {
  background: linear-gradient(135deg, var(--connection-blue) 0%, var(--connection-blue-dark) 100%);
  color: white;
  border-radius: 16px;
  padding: 2rem;
  margin: 3rem 0;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.tip-article-content .takeaways.revealed {
  opacity: 1;
  transform: scale(1);
}

.tip-article-content .takeaways h2 {
  color: white;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.tip-article-content .takeaways .takeaway-list {
  margin: 1.25rem 0;
}

.tip-article-content .takeaways li {
  color: rgba(255,255,255,0.9);
}

.tip-article-content .takeaways .btn {
  background: white;
  color: var(--connection-blue);
  display: inline-block;
  padding: 0.875rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
}

.tip-article-content .takeaways .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Dark mode article enhancements */
[data-theme="dark"] .tip-article-content .lead {
  color: var(--text-grey);
  border-bottom-color: var(--border-grey);
}

[data-theme="dark"] .tip-article-content code {
  background: #0f172a;
  color: #7dd3fc;
}

[data-theme="dark"] .tip-article-content pre {
  background: #0f172a;
}

[data-theme="dark"] .tip-article-content th {
  background: #1e3a5f;
}

[data-theme="dark"] .tip-article-content td {
  background: var(--card-bg);
  border-bottom-color: var(--border-grey);
}

.tip-article-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-grey);
}

.back-to-tips {
  display: inline-flex;
  align-items: center;
  color: var(--connection-blue);
  font-weight: 500;
  text-decoration: none;
  gap: 0.5rem;
  transition: gap 0.2s ease;
}

.back-to-tips:hover {
  gap: 0.75rem;
}

/* Dark Mode - Tips Section */
[data-theme="dark"] .tips-section,
[data-theme="dark"] .tip-article {
  background: var(--bg-white);
}

[data-theme="dark"] .tip-card {
  background: var(--card-bg);
  border-top-color: #6EE7B7;
}

[data-theme="dark"] .tip-card h2 a {
  color: var(--dark-grey);
}

[data-theme="dark"] .tip-category.basics {
  background: linear-gradient(135deg, #1a3a5c 0%, #254a70 100%);
  color: #7ab3e8;
}

[data-theme="dark"] .tip-category.deep-dive {
  background: linear-gradient(135deg, #3d2a1a 0%, #4d3520 100%);
  color: #f5a060;
}

[data-theme="dark"] .tip-article-header {
  border-bottom-color: var(--border-grey);
}

[data-theme="dark"] .tip-article-footer {
  border-top-color: var(--border-grey);
}

/* ===== Forced Colors Mode Protection ===== */
/* Prevents Windows High Contrast Mode and similar accessibility features */
/* from overriding our carefully designed color choices */
@media (forced-colors: active) {
  * {
    forced-color-adjust: none;
  }
}

/* Ensure theme toggle icons are always visible in forced color modes */
.theme-toggle svg {
  forced-color-adjust: none;
}

/* ===== Fallback for browsers respecting prefers-color-scheme ===== */
/*
 * Samsung Internet v26+ with "Adaptive Force Dark" may trigger
 * prefers-color-scheme: dark. This ensures our dark theme applies
 * automatically if the user hasn't manually selected a theme.
 * The JS in head.html handles this for initial load, but this
 * provides a CSS-only fallback for browsers with JS disabled.
 */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    /* Apply dark mode when no explicit theme is set */
    --light-blue: #1a1f2e;
    --sky-blue: #242938;
    --light-grey: #1e2330;
    --dark-grey: #f0f0f0;
    --text-grey: #a0aec0;
    --border-grey: #3d4556;
    --bg-white: #151820;
    --card-bg: #1e2330;
    --connection-blue: #66B2FF;
    --connection-blue-dark: #99CCFF;
  }

  html:not([data-theme]) body {
    background: #151820;
    color: #f0f0f0;
  }
}

/* ===== WiFi Decoded Section ===== */

/* Main Section */
.wifi-decoded-section {
  padding: var(--section-padding) 0;
  background: var(--bg-white, #fff);
}

[data-theme="dark"] .wifi-decoded-section {
  background: var(--bg-white);
}

/* Header - centered like Tips section with gradient accent */
.wifi-decoded-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e8f2ff 100%);
  border-radius: 24px;
  border: 1px solid rgba(0, 102, 204, 0.08);
}

[data-theme="dark"] .wifi-decoded-header {
  background: linear-gradient(135deg, #1a1f2e 0%, #242938 100%);
  border-color: rgba(102, 178, 255, 0.1);
}

.wifi-decoded-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #0066CC 0%, #0052a3 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 50px;
  margin-bottom: 1rem;
}

.wifi-decoded-header h1 {
  color: var(--dark-grey);
  margin-bottom: 1rem;
  font-size: 2.75rem;
  background: linear-gradient(135deg, var(--dark-grey) 0%, var(--connection-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="dark"] .wifi-decoded-header h1 {
  background: linear-gradient(135deg, #fff 0%, #66B2FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wifi-decoded-intro {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-grey);
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Search and Filter Controls */
.wifi-decoded-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: var(--light-grey);
  border-radius: 16px;
}

[data-theme="dark"] .wifi-decoded-controls {
  background: var(--card-bg);
}

/* Search Box - polished design */
.wifi-decoded-search {
  position: relative;
  flex: 1;
  min-width: 250px;
  max-width: 400px;
}

.wifi-decoded-search input {
  width: 100%;
  padding: 0.875rem 1.25rem 0.875rem 3rem;
  font-size: 1rem;
  font-family: var(--font-body);
  border: 2px solid var(--border-grey);
  border-radius: 12px;
  background: #fff;
  color: var(--dark-grey);
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .wifi-decoded-search input {
  background: var(--card-bg);
  border-color: var(--border-grey);
  color: var(--dark-grey);
}

.wifi-decoded-search input:focus {
  outline: none;
  border-color: var(--connection-blue);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.wifi-decoded-search input::placeholder {
  color: var(--text-grey);
}

.wifi-decoded-search .search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  min-width: 18px;
  max-width: 18px;
  min-height: 18px;
  max-height: 18px;
  color: var(--text-grey);
  pointer-events: none;
  flex-shrink: 0;
}

/* Category Filters */
.wifi-decoded-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-btn {
  padding: 0.6rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  border: 2px solid var(--border-grey);
  border-radius: 25px;
  background: #fff;
  color: var(--text-grey);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .filter-btn {
  background: var(--card-bg);
  border-color: var(--border-grey);
  color: var(--text-grey);
}

.filter-btn:hover {
  border-color: var(--connection-blue);
  color: var(--connection-blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 102, 204, 0.1);
}

.filter-btn.active {
  background: linear-gradient(135deg, #0066CC 0%, #0052a3 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

[data-theme="dark"] .filter-btn.active {
  background: linear-gradient(135deg, #0066CC 0%, #004080 100%);
  border-color: transparent;
  color: #fff;
}

/* View Controls Bar */
.wifi-decoded-view-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.wifi-decoded-results-count {
  font-size: 0.9rem;
  color: var(--text-grey);
}

/* View Toggle Buttons */
.view-toggle {
  display: flex;
  gap: 0.25rem;
  background: var(--light-grey);
  padding: 0.25rem;
  border-radius: 8px;
}

[data-theme="dark"] .view-toggle {
  background: var(--card-bg);
}

.view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-grey);
  transition: all 0.2s ease;
}

.view-btn:hover {
  color: var(--connection-blue);
}

.view-btn.active {
  background: #fff;
  color: var(--connection-blue);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .view-btn.active {
  background: #2a2f3d;
}

/* Alphabetical List View */
.wifi-decoded-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.wifi-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--border-grey);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}

[data-theme="dark"] .wifi-list-item {
  background: var(--card-bg);
  border-color: var(--border-grey);
}

.wifi-list-item:hover {
  border-color: var(--connection-blue);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
  transform: translateX(4px);
}

.list-item-category {
  flex-shrink: 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
  min-width: 80px;
  text-align: center;
}

.list-item-category.basics {
  background: linear-gradient(135deg, #E8F2FF 0%, #D4E7FF 100%);
  color: #0066CC;
}

.list-item-category.nbn {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  color: #16A34A;
}

.list-item-category.geelong {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  color: #E8551F;
}

.list-item-category.troubleshooting {
  background: linear-gradient(135deg, #FEF2F2 0%, #FECACA 100%);
  color: #DC2626;
}

[data-theme="dark"] .list-item-category.basics {
  background: linear-gradient(135deg, #1a3a5c 0%, #254a70 100%);
  color: #7ab3e8;
}

[data-theme="dark"] .list-item-category.nbn {
  background: linear-gradient(135deg, #14532d 0%, #166534 100%);
  color: #86efac;
}

[data-theme="dark"] .list-item-category.geelong {
  background: linear-gradient(135deg, #3d2a1a 0%, #4d3520 100%);
  color: #f5a060;
}

[data-theme="dark"] .list-item-category.troubleshooting {
  background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
  color: #fca5a5;
}

.list-item-title {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--dark-grey);
  font-size: 1rem;
}

.list-item-arrow {
  color: var(--text-grey);
  transition: transform 0.2s ease;
}

.wifi-list-item:hover .list-item-arrow {
  transform: translateX(4px);
  color: var(--connection-blue);
}

/* Entry Grid - matches Tips section grid */
.wifi-decoded-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* Entry Card - polished styling matching Tips cards */
.wifi-entry-card {
  background: #fff;
  border: 1px solid var(--border-grey);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  border-top: 4px solid #6EE7B7;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .wifi-entry-card {
  background: var(--card-bg);
  border-color: var(--border-grey);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.wifi-entry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 102, 204, 0.15);
}

[data-theme="dark"] .wifi-entry-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.entry-card-content {
  padding: 2rem;
}

.entry-meta {
  margin-bottom: 0.75rem;
}

.entry-category {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 20px;
}

/* Category badges with gradients like Tips section */
.entry-category.basics {
  background: linear-gradient(135deg, #E8F2FF 0%, #D4E7FF 100%);
  color: #0066CC;
}

.entry-category.nbn {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  color: #16A34A;
}

.entry-category.geelong {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  color: #E8551F;
}

.entry-category.troubleshooting {
  background: linear-gradient(135deg, #FEF2F2 0%, #FECACA 100%);
  color: #DC2626;
}

[data-theme="dark"] .entry-category.basics {
  background: linear-gradient(135deg, #1a3a5c 0%, #254a70 100%);
  color: #7ab3e8;
}

[data-theme="dark"] .entry-category.nbn {
  background: linear-gradient(135deg, #14532d 0%, #166534 100%);
  color: #86efac;
}

[data-theme="dark"] .entry-category.geelong {
  background: linear-gradient(135deg, #3d2a1a 0%, #4d3520 100%);
  color: #f5a060;
}

[data-theme="dark"] .entry-category.troubleshooting {
  background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
  color: #fca5a5;
}

.wifi-entry-card h2 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.wifi-entry-card h2 a {
  color: var(--dark-grey);
  text-decoration: none;
}

.wifi-entry-card h2 a:hover {
  color: var(--connection-blue);
}

.wifi-entry-card h2 a.search-match {
  background: linear-gradient(120deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 102, 204, 0.1) 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.3em;
  background-position: 0 88%;
}

/* Entry excerpt - matches tip-excerpt */
.entry-excerpt {
  color: var(--text-grey);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

/* Entry link - matches tip-link */
.entry-link {
  display: inline-flex;
  align-items: center;
  color: var(--connection-blue);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  transition: gap 0.2s ease;
  gap: 0.25rem;
}

.entry-link::after {
  content: '\2192';
}

.entry-link:hover {
  gap: 0.5rem;
}

/* No Results - polished */
.wifi-decoded-no-results {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--light-grey);
  border-radius: 16px;
}

[data-theme="dark"] .wifi-decoded-no-results {
  background: var(--card-bg);
}

.no-results-content svg {
  width: 64px;
  height: 64px;
  color: var(--text-grey);
  margin-bottom: 1rem;
  opacity: 0.5;
}

.no-results-content p {
  color: var(--text-grey);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* Single Entry Page */
.wifi-decoded-entry {
  padding: 2rem 0 4rem;
}

.wifi-decoded-breadcrumb {
  margin-bottom: 2rem;
  font-size: 0.9rem;
  color: var(--text-grey);
}

.wifi-decoded-breadcrumb a {
  color: var(--connection-blue);
}

.breadcrumb-sep {
  margin: 0 0.5rem;
  color: var(--border-grey);
}

.wifi-decoded-breadcrumb .current {
  color: var(--dark-grey);
}

.wifi-decoded-entry .entry-header {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-grey);
}

.wifi-decoded-entry .entry-header h1 {
  font-size: 2.25rem;
  margin: 1rem 0;
}

.entry-quick-answer {
  font-size: 1.2rem;
  font-family: var(--font-display);
  color: var(--text-grey);
  font-style: italic;
  padding-left: 1rem;
  border-left: 4px solid var(--connection-blue);
}

.entry-content {
  font-size: 1.05rem;
  line-height: 1.8;
}

.entry-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--connection-blue);
}

[data-theme="dark"] .entry-content h2 {
  color: #66B2FF;
}

.entry-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.entry-content p {
  margin-bottom: 1.25rem;
}

.entry-content ul,
.entry-content ol {
  margin-bottom: 1.5rem;
}

.entry-content li {
  margin-bottom: 0.75rem;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.entry-content th,
.entry-content td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-grey);
}

.entry-content th {
  background: var(--light-grey);
  font-family: var(--font-display);
  font-weight: 600;
}

[data-theme="dark"] .entry-content th {
  background: var(--card-bg);
  color: var(--dark-grey);
}

[data-theme="dark"] .entry-content td {
  background: var(--bg-white);
  color: var(--dark-grey);
  border-bottom-color: var(--border-grey);
}

[data-theme="dark"] .entry-content table {
  border: 1px solid var(--border-grey);
  border-radius: 8px;
  overflow: hidden;
}

[data-theme="dark"] .entry-content tr:nth-child(even) td {
  background: var(--card-bg);
}

.entry-content strong {
  color: var(--dark-grey);
}

/* Related Entries */
.entry-related {
  background: var(--light-grey);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

[data-theme="dark"] .entry-related {
  background: var(--card-bg);
}

.entry-related h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.entry-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-related li {
  margin-bottom: 0.5rem;
}

.entry-related a {
  font-weight: 500;
}

/* Entry Disclaimer */
.entry-disclaimer {
  background: #FFF5F0;
  border-left: 4px solid var(--signal-orange);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 2rem 0;
  font-size: 0.9rem;
}

[data-theme="dark"] .entry-disclaimer {
  background: rgba(232, 85, 31, 0.1);
}

.entry-disclaimer p {
  margin: 0;
  color: var(--text-grey);
}

.entry-disclaimer strong {
  color: var(--dark-grey);
}

.entry-disclaimer a {
  color: var(--connection-blue);
}

/* Entry CTA Box */
.entry-cta-box {
  background: linear-gradient(135deg, var(--sky-blue) 0%, var(--light-blue) 100%);
  border-radius: 16px;
  padding: 2rem;
  margin: 3rem 0 2rem;
  text-align: center;
}

[data-theme="dark"] .entry-cta-box {
  background: linear-gradient(135deg, #242938 0%, #1a1f2e 100%);
}

.entry-cta-box h3 {
  color: var(--connection-blue);
  margin-bottom: 0.75rem;
}

[data-theme="dark"] .entry-cta-box h3 {
  color: #66B2FF;
}

.entry-cta-box p {
  color: var(--text-grey);
  max-width: 500px;
  margin: 0 auto 1.5rem;
}

.entry-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.entry-footer {
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--border-grey);
}

.back-link {
  font-family: var(--font-display);
  font-weight: 600;
}

/* Mobile Responsive - WiFi Decoded */
@media (max-width: 768px) {
  .wifi-decoded-section {
    padding: var(--section-padding-mobile) 0;
  }

  .wifi-decoded-header h1 {
    font-size: 2rem;
  }

  .wifi-decoded-intro {
    font-size: 1.05rem;
  }

  .wifi-decoded-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .wifi-decoded-search {
    max-width: none;
    order: -1;
  }

  .wifi-decoded-filters {
    justify-content: flex-start;
    gap: 0.4rem;
  }

  .filter-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
  }

  .wifi-decoded-grid {
    grid-template-columns: 1fr;
  }

  .wifi-entry-card {
    border-radius: 10px;
  }

  .entry-card-content {
    padding: 1.25rem;
  }

  .wifi-decoded-entry .entry-header h1 {
    font-size: 1.75rem;
  }

  .entry-cta-box {
    padding: 1.5rem;
    border-radius: 12px;
  }
}

/* ===== Enhanced Visual Components for Articles ===== */

/* Info Boxes - Tip, Warning, Important, Example */
.info-box {
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 12px;
  border-left: 4px solid var(--connection-blue);
  background: var(--sky-blue);
}

.info-box.tip {
  border-left-color: var(--success-green);
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
}

.info-box.warning {
  border-left-color: var(--signal-orange);
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
}

.info-box.important {
  border-left-color: #DC2626;
  background: linear-gradient(135deg, #FEF2F2 0%, #FECACA 100%);
}

.info-box.example {
  border-left-color: #8B5CF6;
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
}

.info-box strong:first-child {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-box.tip strong:first-child { color: var(--success-green-dark); }
.info-box.warning strong:first-child { color: #C2410C; }
.info-box.important strong:first-child { color: #DC2626; }
.info-box.example strong:first-child { color: #7C3AED; }

.info-box p { margin: 0; }
.info-box p + p { margin-top: 0.75rem; }

[data-theme="dark"] .info-box { background: var(--card-bg); }
[data-theme="dark"] .info-box.tip { background: rgba(0, 204, 102, 0.15); }
[data-theme="dark"] .info-box.warning { background: rgba(232, 85, 31, 0.15); }
[data-theme="dark"] .info-box.important { background: rgba(220, 38, 38, 0.15); }
[data-theme="dark"] .info-box.example { background: rgba(139, 92, 246, 0.15); }

/* Quick Summary Box */
.quick-summary {
  background: linear-gradient(135deg, var(--connection-blue) 0%, var(--connection-blue-dark) 100%);
  color: white;
  padding: 1.5rem 2rem;
  border-radius: 16px;
  margin: 1.5rem 0 2rem;
}

.quick-summary h3,
.quick-summary strong:first-child {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
  margin-bottom: 0.75rem;
  display: block;
}

.quick-summary p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
}

/* Comparison Grid - Pros/Cons, Good/Bad */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.comparison-card {
  background: var(--light-grey);
  border-radius: 12px;
  padding: 1.5rem;
  border-top: 4px solid var(--border-grey);
}

.comparison-card.pros,
.comparison-card.good,
.comparison-card.do {
  border-top-color: var(--success-green);
}

.comparison-card.cons,
.comparison-card.bad,
.comparison-card.dont {
  border-top-color: #DC2626;
}

.comparison-card h3,
.comparison-card h4 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.comparison-card.pros h3,
.comparison-card.good h3,
.comparison-card.do h3 { color: var(--success-green-dark); }

.comparison-card.cons h3,
.comparison-card.bad h3,
.comparison-card.dont h3 { color: #DC2626; }

.comparison-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comparison-card li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.comparison-card li::before {
  content: "•";
  position: absolute;
  left: 0;
  font-weight: bold;
}

.comparison-card.pros li::before,
.comparison-card.good li::before,
.comparison-card.do li::before {
  content: "✓";
  color: var(--success-green);
}

.comparison-card.cons li::before,
.comparison-card.bad li::before,
.comparison-card.dont li::before {
  content: "✗";
  color: #DC2626;
}

[data-theme="dark"] .comparison-card { background: var(--card-bg); }

/* Step Process Diagram */
.steps-process {
  counter-reset: step-counter;
  margin: 2rem 0;
}

.step-item {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border-grey);
}

.step-item:last-child {
  border-bottom: none;
}

.step-item::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--connection-blue);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.1rem;
}

.step-content h4 {
  margin: 0 0 0.5rem;
  color: var(--connection-blue);
}

.step-content p {
  margin: 0;
  color: var(--text-grey);
}

/* Icon Lists */
.icon-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.icon-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.icon-list li::before {
  position: absolute;
  left: 0;
  font-size: 1.1rem;
}

.icon-list.check li::before { content: "✓"; color: var(--success-green); }
.icon-list.cross li::before { content: "✗"; color: #DC2626; }
.icon-list.star li::before { content: "★"; color: var(--signal-orange); }
.icon-list.arrow li::before { content: "→"; color: var(--connection-blue); }
.icon-list.wifi li::before { content: "📶"; }
.icon-list.warning li::before { content: "⚠"; color: var(--signal-orange); }

/* Feature Cards Grid */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.feature-card {
  background: var(--light-grey);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.feature-card .icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  display: block;
}

.feature-card h4 {
  margin: 0 0 0.5rem;
  color: var(--connection-blue);
}

.feature-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-grey);
}

[data-theme="dark"] .feature-card { background: var(--card-bg); }

/* Statistics/Numbers Highlight */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.stat-item {
  text-align: center;
  padding: 1.25rem;
  background: var(--sky-blue);
  border-radius: 12px;
}

.stat-item .number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--connection-blue);
  font-family: var(--font-display);
  line-height: 1;
}

.stat-item .label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-grey);
  margin-top: 0.5rem;
}

[data-theme="dark"] .stat-item { background: var(--card-bg); }

/* Key Facts Box */
.key-facts {
  background: var(--light-grey);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin: 1.5rem 0;
}

.key-facts h3 {
  font-size: 1rem;
  color: var(--connection-blue);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.key-facts dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem 1.5rem;
  margin: 0;
}

.key-facts dt {
  font-weight: 600;
  color: var(--text-grey);
}

.key-facts dd {
  margin: 0;
}

[data-theme="dark"] .key-facts { background: var(--card-bg); }

/* Technology Comparison Table Enhancement */
.tech-comparison {
  overflow-x: auto;
  margin: 1.5rem 0;
}

.tech-comparison table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.tech-comparison th,
.tech-comparison td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-grey);
}

.tech-comparison th {
  background: var(--connection-blue);
  color: white;
  font-weight: 600;
  white-space: nowrap;
}

.tech-comparison th:first-child {
  border-radius: 8px 0 0 0;
}

.tech-comparison th:last-child {
  border-radius: 0 8px 0 0;
}

.tech-comparison tr:nth-child(even) {
  background: var(--light-grey);
}

.tech-comparison tr:hover {
  background: var(--sky-blue);
}

.tech-comparison .yes { color: var(--success-green); font-weight: 600; }
.tech-comparison .no { color: #DC2626; font-weight: 600; }
.tech-comparison .maybe { color: var(--signal-orange); font-weight: 600; }
.tech-comparison .best {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  font-weight: 600;
}

[data-theme="dark"] .tech-comparison tr:nth-child(even) { background: var(--card-bg); }
[data-theme="dark"] .tech-comparison tr:hover { background: rgba(102, 178, 255, 0.1); }

/* Visual Diagram Box */
.diagram-box {
  background: var(--light-grey);
  border: 2px dashed var(--border-grey);
  border-radius: 16px;
  padding: 2rem;
  margin: 1.5rem 0;
  text-align: center;
}

.diagram-box .diagram-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-grey);
  margin-bottom: 1rem;
}

.diagram-box .diagram-content {
  font-family: monospace;
  font-size: 0.9rem;
  line-height: 1.8;
  white-space: pre;
}

[data-theme="dark"] .diagram-box {
  background: var(--card-bg);
  border-color: var(--border-grey);
}

/* Inline Badge/Tag */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 9999px;
  background: var(--sky-blue);
  color: var(--connection-blue);
}

.badge.success { background: #DCFCE7; color: var(--success-green-dark); }
.badge.warning { background: #FFEDD5; color: #C2410C; }
.badge.danger { background: #FECACA; color: #DC2626; }
.badge.info { background: var(--sky-blue); color: var(--connection-blue); }

/* Quote/Callout Block */
.callout-quote {
  position: relative;
  padding: 1.5rem 2rem 1.5rem 3rem;
  margin: 1.5rem 0;
  background: var(--sky-blue);
  border-radius: 12px;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.7;
}

.callout-quote::before {
  content: """;
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  font-size: 3rem;
  color: var(--connection-blue);
  opacity: 0.3;
  font-family: Georgia, serif;
}

.callout-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-style: normal;
  color: var(--text-grey);
}

[data-theme="dark"] .callout-quote { background: var(--card-bg); }

/* ===== Service Area Page Enhancements ===== */

.area-header {
  background: linear-gradient(135deg, var(--sky-blue) 0%, var(--light-blue) 100%);
}

[data-theme="dark"] .area-header {
  background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-white) 100%);
}

.area-content {
  padding: 3rem 0;
}

/* Local Challenges Grid */
.challenges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.challenge-card {
  background: white;
  border: 1px solid var(--border-grey);
  border-radius: 12px;
  padding: 1.5rem;
  transition: box-shadow 0.2s;
}

.challenge-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.challenge-card .icon {
  width: 48px;
  height: 48px;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, var(--connection-blue) 0%, #003366 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG Icon Classes for Service Area Cards */
.icon-home::before,
.icon-briefcase::before,
.icon-vacation::before,
.icon-store::before,
.icon-car::before,
.icon-family::before,
.icon-expand::before,
.icon-laptop::before,
.icon-smartphone::before,
.icon-settings::before,
.icon-location::before {
  content: '';
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1); /* Make icons white */
}

.icon-home::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E");
}

.icon-briefcase::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E");
}

.icon-vacation::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E");
}

.icon-store::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4'/%3E%3C/svg%3E");
}

.icon-car::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 7h8m-8 4h8m-6 4h4m-8 0a3 3 0 01-3-3V6a3 3 0 013-3h12a3 3 0 013 3v6a3 3 0 01-3 3M6 18a2 2 0 104 0H6zm8 0a2 2 0 104 0h-4z'/%3E%3C/svg%3E");
}

.icon-family::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z'/%3E%3C/svg%3E");
}

.icon-expand::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4'/%3E%3C/svg%3E");
}

.icon-laptop::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E");
}

.icon-smartphone::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z'/%3E%3C/svg%3E");
}

.icon-settings::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E");
}

.icon-location::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E");
}

/* Location icon in stat grid - special styling */
.stat-item .icon-location {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

.stat-item .icon-location::before {
  width: 32px;
  height: 32px;
  filter: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230066CC' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E");
}

.challenge-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--connection-blue);
}

.challenge-card p {
  font-size: 0.9rem;
  color: var(--text-grey);
  margin: 0;
}

[data-theme="dark"] .challenge-card {
  background: var(--card-bg);
  border-color: var(--border-grey);
}

/* Infrastructure Info Box */
.infrastructure-box {
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem 0;
}

.infrastructure-box h3 {
  color: var(--connection-blue);
  margin-bottom: 1rem;
}

.infrastructure-box .tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.infrastructure-box .tech-tag {
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .infrastructure-box {
  background: var(--card-bg);
}

[data-theme="dark"] .infrastructure-box .tech-tag {
  background: var(--bg-white);
}

/* Area Services Enhancement */
.area-services {
  background: var(--light-grey);
  padding: 3rem 0;
}

[data-theme="dark"] .area-services {
  background: var(--card-bg);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.service-mini {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid var(--border-grey);
  transition: transform 0.2s, box-shadow 0.2s;
}

.service-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.service-mini h3 {
  color: var(--connection-blue);
  margin-bottom: 0.5rem;
}

.service-mini .price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--signal-orange);
  margin-bottom: 0.5rem;
}

.service-mini p {
  font-size: 0.9rem;
  color: var(--text-grey);
  margin: 0;
}

[data-theme="dark"] .service-mini {
  background: var(--bg-white);
  border-color: var(--border-grey);
}

.services-link {
  text-align: center;
  margin-top: 1rem;
}

.services-link a {
  color: var(--connection-blue);
  font-weight: 500;
}

/* Nearby Areas List */
.nearby-areas {
  background: var(--sky-blue);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.nearby-areas h3 {
  color: var(--connection-blue);
  margin-bottom: 1rem;
  font-size: 1rem;
}

.nearby-areas .areas-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nearby-areas .area-tag {
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text-grey);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.nearby-areas .area-tag:hover {
  background: var(--connection-blue);
  color: white;
}

[data-theme="dark"] .nearby-areas { background: var(--card-bg); }
[data-theme="dark"] .nearby-areas .area-tag { background: var(--bg-white); }

/* Responsive Adjustments */
@media (max-width: 768px) {
  .comparison-grid,
  .feature-cards,
  .challenges-grid,
  .services-grid {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .step-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .key-facts dl {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .key-facts dt {
    margin-top: 0.5rem;
  }

  .diagram-box .diagram-content {
    font-size: 0.75rem;
    overflow-x: auto;
  }
}

/* ===== Blog Post Components ===== */

/* Tip Box */
.tip-box {
  background: rgba(0, 102, 204, 0.08);
  border-left: 4px solid var(--connection-blue);
  padding: 1.25rem 1.5rem;
  border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

[data-theme="dark"] .tip-box {
  background: rgba(102, 178, 255, 0.1);
}

.tip-box .tip-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--connection-blue);
}

.tip-box .tip-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}

.tip-box .tip-content {
  flex: 1;
}

.tip-box .tip-content strong {
  color: var(--connection-blue);
}

/* Warning Box */
.warning-box {
  background: rgba(255, 107, 53, 0.08);
  border-left: 4px solid var(--signal-orange);
  padding: 1.25rem 1.5rem;
  border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

[data-theme="dark"] .warning-box {
  background: rgba(255, 107, 53, 0.1);
}

.warning-box .warning-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--signal-orange);
}

.warning-box .warning-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}

.warning-box .warning-content {
  flex: 1;
}

.warning-box .warning-content strong {
  color: var(--signal-orange);
}

/* Key Point / Quote Highlight */
.key-point {
  background: linear-gradient(135deg, #0a1628 0%, #1a2840 100%);
  color: #fff;
  padding: 1.5rem 2rem;
  border-radius: 12px;
  font-size: 1.1rem;
  margin: 2rem 0;
  position: relative;
}

.key-point::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--connection-blue) 0%, #6EE7B7 100%);
  border-radius: 12px 12px 0 0;
}

.key-point p {
  margin: 0;
  color: #fff;
}

.key-point strong {
  color: #6EE7B7;
}

/* Code Styling */
code {
  background: #1a2332;
  color: #4fc3f7;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-family: 'Monaco', 'Consolas', 'Fira Code', monospace;
  font-size: 0.9em;
}

[data-theme="light"] code {
  background: #f1f5f9;
  color: var(--connection-blue);
}

pre {
  background: #1a2332;
  border-radius: 8px;
  padding: 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

pre code {
  background: none;
  padding: 0;
  color: #e2e8f0;
  display: block;
  line-height: 1.6;
}

[data-theme="light"] pre {
  background: #1e293b;
}

[data-theme="light"] pre code {
  color: #e2e8f0;
}

/* Article Meta Header */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-grey);
  font-size: 0.9rem;
  color: var(--text-grey);
}

.article-category {
  display: inline-block;
  background: var(--connection-blue);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.article-date,
.article-reading-time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.article-date svg,
.article-reading-time svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

/* Step-by-Step in Articles */
.article-steps {
  counter-reset: step-counter;
  margin: 2rem 0;
}

.article-step {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.article-step::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--connection-blue);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-display);
}

.article-step-content h4 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.article-step-content p {
  margin: 0;
  color: var(--text-grey);
}

/* ===== SVG Icon Size Enforcement ===== */
/* Ensures SVG icons never inherit font-size and stay properly sized */
.testimonial-stars {
  display: flex !important;
  gap: 4px !important;
  justify-content: center !important;
  align-items: center !important;
}

.testimonial-stars svg {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.problem-icon svg {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0;
}

.cred-icon svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0;
}

/* Generic SVG icon sizing for badges */
.tips-badge svg,
.wifi-decoded-badge svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
}

/* ===== Page Header with Gradient + Circles ===== */
/* Applied to Tips, WiFi Decoded, About, Services, FAQ pages */
.page-header,
.tips-hero,
.wifi-decoded-hero,
.about-hero,
.services-hero,
.faq-hero {
  background: linear-gradient(135deg, #0066CC 0%, #003366 100%);
  color: white;
  padding: 60px 20px 80px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Large decorative circle - top right */
.page-header::before,
.tips-hero::before,
.wifi-decoded-hero::before,
.about-hero::before,
.services-hero::before,
.faq-hero::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border: 60px solid rgba(110, 231, 183, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

/* Smaller decorative circle - bottom left */
.page-header::after,
.tips-hero::after,
.wifi-decoded-hero::after,
.about-hero::after,
.services-hero::after,
.faq-hero::after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  border: 40px solid rgba(255, 107, 53, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

/* Ensure text is above circles */
.tips-hero h1,
.tips-hero p,
.tips-hero .tips-badge,
.wifi-decoded-hero h1,
.wifi-decoded-hero p,
.wifi-decoded-hero .wifi-decoded-badge {
  position: relative;
  z-index: 1;
}

/* White text for headers on gradient */
.tips-hero h1,
.wifi-decoded-hero h1 {
  color: white;
  margin-bottom: 1rem;
}

.tips-intro,
.wifi-decoded-intro {
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto;
}

/* Badge styling on gradient background */
.tips-badge,
.wifi-decoded-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: white;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* ===== Video Embed Styles ===== */
.video-container {
  margin: 2rem 0;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-caption {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-grey);
  margin-top: 1rem;
  font-style: italic;
}

/* Video Placeholder */
.video-placeholder {
  background: linear-gradient(135deg, var(--connection-blue) 0%, #003366 100%);
  border-radius: 16px;
  padding: 4rem 2rem;
  text-align: center;
  color: white;
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
}

.video-placeholder::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  border: 40px solid rgba(110, 231, 183, 0.1);
  border-radius: 50%;
}

.video-placeholder-content {
  position: relative;
  z-index: 1;
}

.video-placeholder-icon {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.video-placeholder-icon svg {
  width: 32px;
  height: 32px;
  stroke: white;
}

.video-placeholder h4 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.video-placeholder p {
  opacity: 0.9;
  max-width: 400px;
  margin: 0 auto;
}

/* ===== Google Reviews Widget ===== */
.google-reviews-widget {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin: 2rem 0;
}

[data-theme="dark"] .google-reviews-widget {
  background: var(--card-bg);
}

.reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-grey);
}

.reviews-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--dark-grey);
}

.btn-review-small {
  background: var(--connection-blue);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-review-small:hover {
  background: #0052a3;
  color: white;
}

.reviews-container {
  min-height: 100px;
}

.reviews-loading {
  text-align: center;
  color: var(--text-grey);
  padding: 2rem;
}

.review-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border-grey);
}

.review-item:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--connection-blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.review-meta {
  flex: 1;
}

.review-author {
  font-weight: 600;
  color: var(--dark-grey);
}

.review-date {
  font-size: 0.8rem;
  color: var(--text-grey);
}

.review-stars {
  display: flex;
  gap: 2px;
  color: #FBBC05;
}

.review-text {
  color: var(--text-grey);
  line-height: 1.6;
}

.reviews-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-grey);
  text-align: center;
}

.reviews-footer a {
  color: var(--connection-blue);
  font-weight: 500;
}

/* ===== Image Gallery ===== */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.gallery-item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.gallery-caption {
  padding: 1rem;
  background: white;
  font-size: 0.9rem;
  color: var(--text-grey);
}

[data-theme="dark"] .gallery-caption {
  background: var(--card-bg);
}

/* Before/After Comparison */
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (max-width: 600px) {
  .before-after {
    grid-template-columns: 1fr;
  }
}

.before-after-item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.before-after-item img {
  width: 100%;
  height: auto;
  display: block;
}

.before-after-label {
  padding: 0.75rem 1rem;
  font-weight: 600;
  text-align: center;
}

.before-after-item.before .before-after-label {
  background: #FEE2E2;
  color: #991B1B;
}

.before-after-item.after .before-after-label {
  background: #D1FAE5;
  color: #065F46;
}

/* ===== Browser Compatibility Fallbacks ===== */
/* Flexbox gap fallback for Safari < 14.1 and older browsers */
@supports not (gap: 1rem) {
  /* Header navigation */
  .site-header .container {
    margin-left: -1rem;
    margin-right: -1rem;
  }
  .site-header .container > * {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  /* Hero CTA buttons */
  .hero-cta {
    margin: -0.5rem;
  }
  .hero-cta > * {
    margin: 0.5rem;
  }

  /* CTA section buttons */
  .cta-buttons {
    margin: -0.5rem;
  }
  .cta-buttons > * {
    margin: 0.5rem;
  }

  /* Footer trust badges */
  .footer-trust-badges {
    margin: -0.75rem;
  }
  .footer-trust-badges > * {
    margin: 0.75rem;
  }

  /* Google reviews widget */
  .reviews-rating {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
  }
  .reviews-rating > * {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }

  /* Rating stars */
  .rating-stars {
    margin-left: -1px;
    margin-right: -1px;
  }
  .rating-stars > * {
    margin-left: 1px;
    margin-right: 1px;
  }
}

/* =====================================================
   SECURE DNS SERIES - VISUAL DIAGRAMS
   Added: 20 January 2026
   Blog posts: secure-dns-bypassing-filters, secure-dns-explained, block-dns-over-https
   ===================================================== */

/* DNS Bypass Flow Diagram */
.bypass-diagram,
.dns-diagram {
  background: linear-gradient(135deg, var(--light-grey) 0%, var(--sky-blue) 100%);
  border-radius: 16px;
  padding: 2rem;
  margin: 2.5rem 0;
  overflow-x: auto;
}

.bypass-diagram h3,
.dns-diagram h3 {
  text-align: center;
  color: var(--connection-blue);
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.bypass-visual,
.dns-visual {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bypass-row,
.dns-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bypass-row:hover,
.dns-row:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.bypass-row.normal,
.dns-row.allowed {
  border-left: 4px solid var(--success-green);
}

.bypass-row.bypassed,
.dns-row.blocked {
  border-left: 4px solid #DC2626;
}

.bypass-label,
.dns-label {
  min-width: 100px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-grey);
}

.bypass-flow,
.dns-flow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  flex-wrap: wrap;
}

.bypass-step,
.dns-step {
  background: var(--light-grey);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

.bypass-step.filter,
.dns-step.filter {
  background: linear-gradient(135deg, var(--connection-blue) 0%, var(--connection-blue-dark) 100%);
  color: white;
}

.bypass-step.cloudflare {
  background: linear-gradient(135deg, #F48120 0%, #FAAD3F 100%);
  color: white;
}

.bypass-arrow,
.dns-arrow {
  font-size: 1.25rem;
  color: var(--text-grey);
}

.bypass-arrow.bypass {
  color: #DC2626;
}

.dns-arrow.blocked {
  color: #DC2626;
}

.bypass-result,
.dns-result {
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  margin-left: auto;
}

.bypass-result.good,
.dns-result.good {
  background: #D1FAE5;
  color: #065F46;
}

.bypass-result.bad,
.dns-result.bad {
  background: #FEE2E2;
  color: #991B1B;
}

/* Check Result Boxes */
.check-result {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

.check-good,
.check-bad {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  font-size: 0.95rem;
}

.check-good {
  background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
  border-left: 4px solid var(--success-green);
}

.check-bad {
  background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
  border-left: 4px solid #DC2626;
}

.check-good strong {
  color: #065F46;
}

.check-bad strong {
  color: #991B1B;
}

/* IP Block List */
.ip-block-list {
  background: var(--light-grey);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.ip-block-list h4 {
  color: var(--connection-blue);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.ip-block-list pre {
  background: #1E1E2E;
  color: #CDD6F4;
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.8;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.ip-block-list pre:last-child {
  margin-bottom: 0;
}

/* Price Display in Takeaways */
.takeaways .price {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.takeaways .price-current {
  font-size: 2.25rem;
  font-weight: 800;
}

.takeaways .price-was {
  text-decoration: line-through;
  opacity: 0.7;
  font-size: 1rem;
  margin-left: 0.5rem;
}

.takeaways .cta-phone {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  opacity: 0.9;
}

/* Secondary button style for takeaways */
.takeaways .btn-secondary {
  background: transparent;
  border: 2px solid white;
  color: white;
  margin-left: 0.75rem;
}

.takeaways .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Dark Mode Support for DNS Diagrams */
[data-theme="dark"] .bypass-diagram,
[data-theme="dark"] .dns-diagram {
  background: linear-gradient(135deg, var(--card-bg) 0%, #1e2d40 100%);
}

[data-theme="dark"] .bypass-row,
[data-theme="dark"] .dns-row {
  background: var(--bg-white);
}

[data-theme="dark"] .bypass-step,
[data-theme="dark"] .dns-step {
  background: var(--card-bg);
  color: var(--dark-grey);
}

[data-theme="dark"] .check-good {
  background: linear-gradient(135deg, #052e16 0%, #14532d 100%);
}

[data-theme="dark"] .check-good strong {
  color: #4ade80;
}

[data-theme="dark"] .check-bad {
  background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
}

[data-theme="dark"] .check-bad strong {
  color: #fca5a5;
}

[data-theme="dark"] .ip-block-list {
  background: var(--card-bg);
}

/* Responsive adjustments for diagrams */
@media (max-width: 768px) {
  .bypass-diagram,
  .dns-diagram {
    padding: 1.25rem;
  }

  .bypass-row,
  .dns-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
  }

  .bypass-label,
  .dns-label {
    min-width: auto;
    font-size: 0.8rem;
  }

  .bypass-flow,
  .dns-flow {
    width: 100%;
    justify-content: flex-start;
  }

  .bypass-result,
  .dns-result {
    margin-left: 0;
    margin-top: 0.5rem;
  }

  .bypass-step,
  .dns-step {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
  }

  .check-result {
    grid-template-columns: 1fr;
  }

  .takeaways .btn-secondary {
    margin-left: 0;
    margin-top: 0.5rem;
    display: inline-block;
  }
}

/* ===========================================
   NBN ISP Explainer Styles
   =========================================== */

/* Myth vs Reality Boxes */
.myth-reality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

.myth-box,
.reality-box {
  padding: 1.5rem;
  border-radius: 12px;
}

.myth-box {
  background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
  border-left: 4px solid #DC2626;
}

.myth-box h4 {
  color: #DC2626;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

.reality-box {
  background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
  border-left: 4px solid var(--success-green);
}

.reality-box h4 {
  color: #047857;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

.myth-box p,
.reality-box p {
  margin: 0;
  line-height: 1.6;
}

/* Data Journey Diagram */
.data-journey {
  background: linear-gradient(135deg, var(--light-grey) 0%, var(--sky-blue) 100%);
  border-radius: 16px;
  padding: 2rem;
  margin: 2.5rem 0;
}

.data-journey h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--primary-blue);
}

.journey-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 0;
}

.journey-step {
  background: white;
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
  min-width: 90px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.journey-step.nbn-owned {
  border: 2px solid #9CA3AF;
  background: #F3F4F6;
}

.journey-step.poi {
  border: 2px solid var(--accent-orange);
  background: #FFF7ED;
}

.journey-step.isp-owned {
  border: 2px solid var(--primary-blue);
  background: #EFF6FF;
}

.step-icon {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.step-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--dark-grey);
}

.step-detail {
  font-size: 0.75rem;
  color: #6B7280;
  margin-top: 0.25rem;
}

.journey-arrow {
  font-size: 1.5rem;
  color: #9CA3AF;
  font-weight: bold;
}

.journey-arrow.isp-controlled {
  color: var(--primary-blue);
}

.journey-legend {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
  font-size: 0.85rem;
}

.legend-nbn {
  color: #6B7280;
}

.legend-isp {
  color: var(--primary-blue);
}

/* POI Map Section */
.poi-map-section {
  background: #F8FAFC;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
  border: 1px solid #E2E8F0;
}

.poi-map-section h3 {
  color: var(--primary-blue);
  margin-bottom: 1rem;
}

.poi-map-section table {
  width: 100%;
  margin: 1rem 0;
}

.poi-note {
  font-size: 0.9rem;
  color: #64748B;
  background: #FEF3C7;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border-left: 3px solid #F59E0B;
  margin-top: 1rem;
}

/* CVC Explainer */
.cvc-explainer {
  margin: 2.5rem 0;
}

.cvc-explainer h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--primary-blue);
}

.cvc-scenario {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cvc-scenario.good {
  border-left: 4px solid var(--success-green);
}

.cvc-scenario.bad {
  border-left: 4px solid #DC2626;
}

.cvc-scenario h4 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.cvc-scenario.good h4 {
  color: #047857;
}

.cvc-scenario.bad h4 {
  color: #DC2626;
}

.cvc-visual {
  margin: 1rem 0;
}

.cvc-bar {
  background: #E5E7EB;
  border-radius: 8px;
  height: 40px;
  position: relative;
  overflow: hidden;
}

.cvc-used {
  background: linear-gradient(90deg, var(--success-green) 0%, #34D399 100%);
  height: 100%;
  border-radius: 8px 0 0 8px;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
}

.cvc-bar.congested .cvc-used {
  background: linear-gradient(90deg, #DC2626 0%, #EF4444 100%);
}

.cvc-available {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: #6B7280;
  font-weight: 500;
}

.cvc-scenario p {
  margin: 0.5rem 0 0 0;
  font-size: 0.95rem;
  color: #4B5563;
}

/* ISP Transparency Section */
.isp-transparency {
  margin: 2rem 0;
}

.isp-transparency h3 {
  color: var(--primary-blue);
  border-bottom: 2px solid var(--primary-blue);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.isp-transparency h3:not(:first-child) {
  margin-top: 2rem;
}

/* Network Comparison Cards */
.network-comparison {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

.network-card {
  background: white;
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.network-card h4 {
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.network-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #4B5563;
  line-height: 1.5;
}

/* CDN Explainer */
.cdn-explainer {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.cdn-explainer h3 {
  color: var(--primary-blue);
  margin-bottom: 1rem;
}

.cdn-explainer table {
  background: white;
  border-radius: 8px;
}

.cdn-explainer p {
  margin-top: 1rem;
  margin-bottom: 0;
}

/* Glossary Section */
.glossary-section {
  background: #F8FAFC;
  border-radius: 16px;
  padding: 2rem;
  margin: 2.5rem 0;
}

.glossary-section h3 {
  text-align: center;
  color: var(--primary-blue);
  margin-bottom: 1.5rem;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.glossary-item {
  background: white;
  border-radius: 10px;
  padding: 1.25rem;
  border-left: 3px solid var(--primary-blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.glossary-item h4 {
  color: var(--primary-blue);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.glossary-item p {
  margin: 0;
  font-size: 0.9rem;
  color: #4B5563;
  line-height: 1.5;
}

/* Decision Guide */
.decision-guide {
  margin: 2.5rem 0;
}

.decision-guide h3 {
  text-align: center;
  color: var(--primary-blue);
  margin-bottom: 1.5rem;
}

.decision-step {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.step-number {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #003366 100%);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
  padding-top: 0.25rem;
}

.step-content h4 {
  margin: 0 0 0.5rem 0;
  color: var(--dark-grey);
  font-size: 1.05rem;
}

.step-content p {
  margin: 0;
  color: #4B5563;
  line-height: 1.6;
}

.step-content ul {
  margin: 0.5rem 0 0 0;
  padding-left: 1.25rem;
}

.step-content li {
  margin-bottom: 0.25rem;
  color: #4B5563;
}

/* Red Flags */
.red-flags {
  background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
  border-left: 4px solid #DC2626;
}

.red-flags ul {
  margin: 0;
  padding-left: 1.25rem;
}

.red-flags li {
  margin-bottom: 0.75rem;
  color: #7F1D1D;
  line-height: 1.5;
}

.red-flags li:last-child {
  margin-bottom: 0;
}

.red-flags strong {
  color: #DC2626;
}

/* Dark Mode for NBN ISP Explainer */
@media (prefers-color-scheme: dark) {
  .myth-box {
    background: linear-gradient(135deg, #450A0A 0%, #7F1D1D 100%);
    border-left-color: #EF4444;
  }

  .myth-box h4 {
    color: #FCA5A5;
  }

  .myth-box p {
    color: #FECACA;
  }

  .reality-box {
    background: linear-gradient(135deg, #022C22 0%, #064E3B 100%);
    border-left-color: #34D399;
  }

  .reality-box h4 {
    color: #6EE7B7;
  }

  .reality-box p {
    color: #A7F3D0;
  }

  .data-journey {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  }

  .journey-step {
    background: #1E293B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .journey-step.nbn-owned {
    background: #374151;
    border-color: #6B7280;
  }

  .journey-step.poi {
    background: #431407;
    border-color: var(--accent-orange);
  }

  .journey-step.isp-owned {
    background: #1E3A5F;
    border-color: #60A5FA;
  }

  .step-label {
    color: #F3F4F6;
  }

  .step-detail {
    color: #9CA3AF;
  }

  .journey-arrow {
    color: #6B7280;
  }

  .poi-map-section {
    background: #1E293B;
    border-color: #334155;
  }

  .poi-note {
    background: #422006;
    color: #FEF3C7;
    border-left-color: #F59E0B;
  }

  .cvc-scenario {
    background: #1E293B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .cvc-scenario.good h4 {
    color: #6EE7B7;
  }

  .cvc-scenario.bad h4 {
    color: #FCA5A5;
  }

  .cvc-bar {
    background: #374151;
  }

  .cvc-available {
    color: #9CA3AF;
  }

  .cvc-scenario p {
    color: #D1D5DB;
  }

  .network-card {
    background: #1E293B;
    border-color: #334155;
  }

  .network-card p {
    color: #D1D5DB;
  }

  .cdn-explainer {
    background: linear-gradient(135deg, #1E3A5F 0%, #0F172A 100%);
  }

  .cdn-explainer table {
    background: #1E293B;
  }

  .glossary-section {
    background: #0F172A;
  }

  .glossary-item {
    background: #1E293B;
    border-left-color: #60A5FA;
  }

  .glossary-item h4 {
    color: #60A5FA;
  }

  .glossary-item p {
    color: #D1D5DB;
  }

  .step-content h4 {
    color: #F3F4F6;
  }

  .step-content p,
  .step-content li {
    color: #D1D5DB;
  }

  .red-flags {
    background: linear-gradient(135deg, #450A0A 0%, #7F1D1D 100%);
    border-left-color: #EF4444;
  }

  .red-flags li {
    color: #FECACA;
  }

  .red-flags strong {
    color: #FCA5A5;
  }
}

/* Mobile Responsive for NBN ISP Explainer */
@media (max-width: 768px) {
  .myth-reality {
    grid-template-columns: 1fr;
  }

  .journey-diagram {
    flex-direction: column;
  }

  .journey-arrow {
    transform: rotate(90deg);
  }

  .journey-legend {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .network-comparison {
    grid-template-columns: 1fr;
  }

  .glossary-grid {
    grid-template-columns: 1fr;
  }

  .decision-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .step-content {
    padding-top: 0.5rem;
  }

  .step-content ul {
    text-align: left;
  }
}

/* ===========================================
   Best NBN Providers Article Styles
   =========================================== */

/* Sponsored Reality Section */
.sponsored-reality {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
  border-left: 4px solid #F59E0B;
}

.sponsored-reality h3 {
  color: #92400E;
  margin-bottom: 1rem;
}

.sponsored-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sponsored-card {
  background: white;
  border-radius: 10px;
  padding: 1.25rem;
}

.sponsored-card.big {
  border: 2px solid #DC2626;
}

.sponsored-card.hidden {
  border: 2px solid var(--success-green);
}

.sponsored-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.sponsored-card.big .sponsored-label {
  color: #DC2626;
}

.sponsored-card.hidden .sponsored-label {
  color: var(--success-green);
}

.sponsored-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

.sponsored-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #4B5563;
}

.sponsored-note {
  font-size: 0.85rem;
  color: #92400E;
  margin: 0;
  font-style: italic;
}

/* Provider Spotlight Cards */
.provider-spotlight {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 2.5rem 0;
}

.provider-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.provider-card.launtel {
  border-top: 4px solid #8B5CF6;
}

.provider-card.leaptel {
  border-top: 4px solid #10B981;
}

.provider-card.aussie {
  border-top: 4px solid #3B82F6;
}

.provider-header {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #E5E7EB;
}

.provider-header h3 {
  margin: 0;
  font-size: 1.5rem;
}

.provider-card.launtel .provider-header h3 {
  color: #7C3AED;
}

.provider-card.leaptel .provider-header h3 {
  color: #059669;
}

.provider-card.aussie .provider-header h3 {
  color: #2563EB;
}

.provider-tagline {
  font-size: 0.9rem;
  color: #6B7280;
  font-style: italic;
}

.provider-highlights {
  padding: 1.5rem;
  background: #F9FAFB;
  display: grid;
  gap: 0.75rem;
}

.highlight {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.highlight-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.highlight-text {
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.4;
}

.provider-details {
  padding: 1.5rem;
}

.provider-details h4 {
  color: var(--dark-grey);
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
}

.provider-details h4:not(:first-child) {
  margin-top: 1.5rem;
}

.provider-details p {
  margin: 0 0 0.75rem 0;
  color: #4B5563;
  line-height: 1.6;
}

.provider-details ul {
  margin: 0;
  padding-left: 1.25rem;
}

.provider-details li {
  color: #4B5563;
  margin-bottom: 0.25rem;
}

.provider-link {
  padding: 1rem 1.5rem;
  background: #F3F4F6;
  border-top: 1px solid #E5E7EB;
}

.provider-link a {
  font-weight: 600;
}

/* Gotcha Section */
.gotcha-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.gotcha-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #DC2626;
}

.gotcha-card.superloop {
  border-left-color: #DC2626;
}

.gotcha-card.speed-cap {
  border-left-color: #F59E0B;
}

.gotcha-card.support-wait {
  border-left-color: #F59E0B;
}

.gotcha-card.typical-speed {
  border-left-color: #10B981;
}

.gotcha-header {
  padding: 1rem 1.5rem;
  background: #FEF2F2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gotcha-card.speed-cap .gotcha-header,
.gotcha-card.support-wait .gotcha-header {
  background: #FFFBEB;
}

.gotcha-card.typical-speed .gotcha-header {
  background: #ECFDF5;
}

.gotcha-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--dark-grey);
}

.gotcha-severity {
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
}

.gotcha-severity.high {
  background: #FEE2E2;
  color: #DC2626;
}

.gotcha-severity.medium {
  background: #FEF3C7;
  color: #D97706;
}

.gotcha-severity.low {
  background: #D1FAE5;
  color: #059669;
}

.gotcha-content {
  padding: 1.5rem;
}

.gotcha-content p {
  margin: 0 0 1rem 0;
  color: #4B5563;
  line-height: 1.6;
}

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

/* Big Three Table Section */
.big-three {
  background: #F8FAFC;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.big-three h3 {
  color: var(--primary-blue);
  margin-bottom: 1rem;
}

.big-three table {
  margin-bottom: 1rem;
}

.big-three p {
  margin: 0;
  font-size: 0.95rem;
  color: #64748B;
}

/* Decision Checklist */
.decision-checklist {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.decision-checklist h3 {
  color: var(--primary-blue);
  margin-bottom: 1rem;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.checklist-item:last-child {
  border-bottom: none;
}

.checklist-item input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 18px;
  height: 18px;
  accent-color: var(--primary-blue);
}

.checklist-item label {
  flex: 1;
  font-size: 0.95rem;
  color: #1E3A5F;
  line-height: 1.5;
}

/* Dark Mode for Best NBN Providers */
@media (prefers-color-scheme: dark) {
  .sponsored-reality {
    background: linear-gradient(135deg, #422006 0%, #78350F 100%);
    border-left-color: #FBBF24;
  }

  .sponsored-reality h3 {
    color: #FDE68A;
  }

  .sponsored-card {
    background: #1E293B;
  }

  .sponsored-card p {
    color: #D1D5DB;
  }

  .sponsored-note {
    color: #FDE68A;
  }

  .provider-card {
    background: #1E293B;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .provider-header {
    border-bottom-color: #334155;
  }

  .provider-tagline {
    color: #9CA3AF;
  }

  .provider-highlights {
    background: #0F172A;
  }

  .highlight-text {
    color: #D1D5DB;
  }

  .provider-details h4 {
    color: #F3F4F6;
  }

  .provider-details p,
  .provider-details li {
    color: #D1D5DB;
  }

  .provider-link {
    background: #0F172A;
    border-top-color: #334155;
  }

  .gotcha-card {
    background: #1E293B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .gotcha-header {
    background: #450A0A;
  }

  .gotcha-card.speed-cap .gotcha-header,
  .gotcha-card.support-wait .gotcha-header {
    background: #422006;
  }

  .gotcha-card.typical-speed .gotcha-header {
    background: #022C22;
  }

  .gotcha-header h3 {
    color: #F3F4F6;
  }

  .gotcha-content p {
    color: #D1D5DB;
  }

  .big-three {
    background: #1E293B;
  }

  .big-three p {
    color: #9CA3AF;
  }

  .decision-checklist {
    background: linear-gradient(135deg, #1E3A5F 0%, #0F172A 100%);
  }

  .checklist-item {
    border-bottom-color: rgba(96, 165, 250, 0.2);
  }

  .checklist-item label {
    color: #BFDBFE;
  }
}

/* Mobile Responsive for Best NBN Providers */
@media (max-width: 768px) {
  .sponsored-grid {
    grid-template-columns: 1fr;
  }

  .provider-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .gotcha-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Context Warning (Friend Recommendations) */
.context-warning {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.context-warning h3 {
  color: #92400E;
  margin-bottom: 1rem;
  text-align: center;
}

.context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.context-card {
  background: white;
  border-radius: 10px;
  padding: 1.25rem;
  text-align: center;
}

.context-card.good {
  border: 2px solid var(--success-green);
}

.context-card.bad {
  border: 2px solid #DC2626;
}

.context-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  color: var(--dark-grey);
}

.context-card p {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  color: #4B5563;
}

.context-verdict {
  font-weight: 700;
  font-size: 0.85rem;
}

.context-card.good .context-verdict {
  color: var(--success-green);
}

.context-card.bad .context-verdict {
  color: #DC2626;
}

/* Source Grid */
.source-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

.source-card {
  background: white;
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.source-card.official {
  border-left: 4px solid var(--primary-blue);
}

.source-card.community {
  border-left: 4px solid var(--accent-orange);
}

.source-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: var(--dark-grey);
}

.source-card p {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  color: #4B5563;
  line-height: 1.5;
}

.source-card a {
  font-weight: 600;
  font-size: 0.9rem;
}

/* Telstra Provider Card Color */
.provider-card.telstra {
  border-top: 4px solid #0066CC;
}

.provider-card.telstra .provider-header h3 {
  color: #0066CC;
}

/* IT'S FUBAR Provider Card Color */
.provider-card.fubar {
  border-top: 4px solid #F97316;
}

.provider-card.fubar .provider-header h3 {
  color: #EA580C;
}

/* Dark Mode for New Components */
@media (prefers-color-scheme: dark) {
  .context-warning {
    background: linear-gradient(135deg, #422006 0%, #78350F 100%);
  }

  .context-warning h3 {
    color: #FDE68A;
  }

  .context-card {
    background: #1E293B;
  }

  .context-card h4 {
    color: #F3F4F6;
  }

  .context-card p {
    color: #D1D5DB;
  }

  .source-card {
    background: #1E293B;
    border-color: #334155;
  }

  .source-card h4 {
    color: #F3F4F6;
  }

  .source-card p {
    color: #D1D5DB;
  }
}

/* Mobile Responsive for New Components */
@media (max-width: 768px) {
  .context-grid {
    grid-template-columns: 1fr;
  }

  .source-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   NBN Switching Guide Styles
   =========================================== */

/* Switch Timeline */
.switch-timeline {
  position: relative;
  margin: 2rem 0;
  padding-left: 2rem;
}

.switch-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--primary-blue), var(--success-green));
  border-radius: 2px;
}

.timeline-step {
  position: relative;
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

.timeline-step:last-child {
  margin-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: -2rem;
  top: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, #003366 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  z-index: 1;
}

.timeline-content {
  background: white;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-left: 3px solid var(--primary-blue);
}

.timeline-content h4 {
  margin: 0 0 0.5rem 0;
  color: var(--dark-grey);
  font-size: 1.05rem;
}

.timeline-content p {
  margin: 0;
  color: #4B5563;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Switch Requirements */
.switch-requirements {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

.requirement-card {
  background: white;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: relative;
}

.requirement-card.easy {
  border-top: 4px solid var(--success-green);
}

.requirement-card.medium {
  border-top: 4px solid #F59E0B;
}

.requirement-card.rare {
  border-top: 4px solid #6B7280;
}

.requirement-card h4 {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
}

.requirement-card.easy h4 {
  color: #047857;
}

.requirement-card.medium h4 {
  color: #D97706;
}

.requirement-card.rare h4 {
  color: #4B5563;
}

.requirement-card ul {
  margin: 0 0 1rem 0;
  padding-left: 1.25rem;
}

.requirement-card li {
  color: #4B5563;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.effort-label {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
}

.requirement-card.easy .effort-label {
  background: #D1FAE5;
  color: #047857;
}

.requirement-card.medium .effort-label {
  background: #FEF3C7;
  color: #D97706;
}

.requirement-card.rare .effort-label {
  background: #F3F4F6;
  color: #4B5563;
}

/* Dark Mode for Switching Guide */
@media (prefers-color-scheme: dark) {
  .switch-timeline::before {
    background: linear-gradient(to bottom, #60A5FA, #34D399);
  }

  .timeline-content {
    background: #1E293B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border-left-color: #60A5FA;
  }

  .timeline-content h4 {
    color: #F3F4F6;
  }

  .timeline-content p {
    color: #D1D5DB;
  }

  .requirement-card {
    background: #1E293B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .requirement-card.easy h4 {
    color: #6EE7B7;
  }

  .requirement-card.medium h4 {
    color: #FBBF24;
  }

  .requirement-card.rare h4 {
    color: #9CA3AF;
  }

  .requirement-card li {
    color: #D1D5DB;
  }

  .requirement-card.easy .effort-label {
    background: #064E3B;
    color: #6EE7B7;
  }

  .requirement-card.medium .effort-label {
    background: #78350F;
    color: #FBBF24;
  }

  .requirement-card.rare .effort-label {
    background: #374151;
    color: #9CA3AF;
  }
}

/* Data-theme dark mode for Switching Guide (manual toggle) */
[data-theme="dark"] .switch-timeline::before {
  background: linear-gradient(to bottom, #60A5FA, #34D399);
}

[data-theme="dark"] .timeline-content {
  background: #1E293B;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border-left-color: #60A5FA;
}

[data-theme="dark"] .timeline-content h4 {
  color: #F3F4F6;
}

[data-theme="dark"] .timeline-content p {
  color: #D1D5DB;
}

[data-theme="dark"] .requirement-card {
  background: #1E293B;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .requirement-card.easy h4 {
  color: #6EE7B7;
}

[data-theme="dark"] .requirement-card.medium h4 {
  color: #FBBF24;
}

[data-theme="dark"] .requirement-card.rare h4 {
  color: #9CA3AF;
}

[data-theme="dark"] .requirement-card li {
  color: #D1D5DB;
}

[data-theme="dark"] .requirement-card.easy .effort-label {
  background: #064E3B;
  color: #6EE7B7;
}

[data-theme="dark"] .requirement-card.medium .effort-label {
  background: #78350F;
  color: #FBBF24;
}

[data-theme="dark"] .requirement-card.rare .effort-label {
  background: #374151;
  color: #9CA3AF;
}

/* Mobile Responsive for Switching Guide */
@media (max-width: 768px) {
  .switch-requirements {
    grid-template-columns: 1fr;
  }

  .switch-timeline {
    padding-left: 1.5rem;
  }

  .timeline-step {
    padding-left: 1.5rem;
  }

  .timeline-marker {
    left: -1.5rem;
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
}

/* ===========================================
   Self-Diagnosis Guide Styles
   =========================================== */

/* Comparison Truth Section */
.comparison-truth {
  background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
  border-left: 4px solid #DC2626;
}

.comparison-truth h3 {
  color: #991B1B;
  margin-bottom: 1rem;
  text-align: center;
}

.truth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.truth-card {
  background: white;
  border-radius: 10px;
  padding: 1.25rem;
  border: 2px solid #E5E7EB;
}

.truth-card.reality {
  border-color: #DC2626;
  background: #FEF2F2;
}

.truth-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  color: var(--dark-grey);
}

.truth-card.reality h4 {
  color: #991B1B;
}

.truth-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #4B5563;
}

/* Factors Grid */
.factors-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

.factor-card {
  background: white;
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-top: 4px solid var(--primary-blue);
}

.factor-number {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #003366 100%);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 auto 0.75rem;
}

.factor-content h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  color: var(--dark-grey);
}

.factor-content p {
  margin: 0;
  font-size: 0.85rem;
  color: #6B7280;
  line-height: 1.4;
}

/* Action Box */
.action-box {
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
  border-left: 4px solid var(--primary-blue);
}

.action-box h4 {
  color: var(--primary-blue);
  margin: 0 0 1rem 0;
}

.action-box ol {
  margin: 0;
  padding-left: 1.25rem;
}

.action-box li {
  margin-bottom: 0.5rem;
  color: #1E3A5F;
}

.action-box p {
  margin: 0.75rem 0 0 0;
  font-size: 0.9rem;
  color: #1E3A5F;
  font-style: italic;
}

/* Tech Comparison Cards */
.tech-comparison {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
}

.tech-card {
  background: white;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.tech-card.great {
  border-left: 4px solid var(--success-green);
}

.tech-card.okay {
  border-left: 4px solid #F59E0B;
}

.tech-card.poor {
  border-left: 4px solid #DC2626;
}

.tech-card.variable {
  border-left: 4px solid #8B5CF6;
}

.tech-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

.tech-card.great h4 { color: #047857; }
.tech-card.okay h4 { color: #D97706; }
.tech-card.poor h4 { color: #DC2626; }
.tech-card.variable h4 { color: #7C3AED; }

.tech-card p {
  margin: 0;
  flex: 1;
  font-size: 0.9rem;
  color: #4B5563;
  line-height: 1.5;
}

.tech-verdict {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tech-card.great .tech-verdict { color: var(--success-green); }
.tech-card.okay .tech-verdict { color: #D97706; }
.tech-card.poor .tech-verdict { color: #DC2626; }
.tech-card.variable .tech-verdict { color: #7C3AED; }

/* Equipment Check */
.equipment-check {
  background: #FEF3C7;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.equipment-check h4 {
  color: #92400E;
  margin: 0 0 0.75rem 0;
}

.equipment-check h4:not(:first-child) {
  margin-top: 1.5rem;
}

.equipment-check .red-list {
  margin: 0;
  padding-left: 1.25rem;
}

.equipment-check li {
  color: #78350F;
  margin-bottom: 0.5rem;
}

.equipment-check p {
  margin: 0;
  color: #78350F;
  line-height: 1.6;
}

/* WiFi Factors */
.wifi-factors {
  background: #F3F4F6;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.wifi-factors h4 {
  color: var(--dark-grey);
  margin: 0 0 1rem 0;
  text-align: center;
}

.wifi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}

.wifi-item {
  background: white;
  border-radius: 8px;
  padding: 1rem 0.5rem;
  text-align: center;
  border: 2px solid #E5E7EB;
}

.wifi-item.bad {
  border-color: #FECACA;
  background: #FEF2F2;
}

.wifi-icon {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.wifi-label {
  font-size: 0.75rem;
  color: #4B5563;
  line-height: 1.3;
}

/* Usage Guide */
.usage-guide {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.usage-guide h4 {
  color: var(--primary-blue);
  margin: 0 0 1rem 0;
}

.usage-guide table {
  margin-bottom: 1rem;
}

.usage-note {
  font-size: 0.9rem;
  color: #64748B;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid #E5E7EB;
}

/* Research Checklist */
.research-checklist {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.research-checklist .checklist-item {
  border-bottom-color: rgba(16, 185, 129, 0.2);
}

.research-checklist .checklist-item label {
  color: #064E3B;
}

/* Local Provider Section */
.local-provider {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
  border-left: 4px solid var(--primary-blue);
}

.local-provider h4 {
  color: var(--primary-blue);
  margin: 0 0 0.75rem 0;
  font-size: 1.2rem;
}

.local-provider p {
  margin: 0 0 0.75rem 0;
  color: #1E3A5F;
  line-height: 1.6;
}

.local-provider p:last-child {
  margin-bottom: 0;
}

/* Dark Mode for Self-Diagnosis Guide */
@media (prefers-color-scheme: dark) {
  .comparison-truth {
    background: linear-gradient(135deg, #450A0A 0%, #7F1D1D 100%);
    border-left-color: #EF4444;
  }

  .comparison-truth h3 {
    color: #FCA5A5;
  }

  .truth-card {
    background: #1E293B;
    border-color: #334155;
  }

  .truth-card.reality {
    background: #450A0A;
    border-color: #EF4444;
  }

  .truth-card h4 {
    color: #F3F4F6;
  }

  .truth-card.reality h4 {
    color: #FCA5A5;
  }

  .truth-card p {
    color: #D1D5DB;
  }

  .factor-card {
    background: #1E293B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .factor-content h4 {
    color: #F3F4F6;
  }

  .factor-content p {
    color: #9CA3AF;
  }

  .action-box {
    background: linear-gradient(135deg, #1E3A5F 0%, #0F172A 100%);
  }

  .action-box h4 {
    color: #60A5FA;
  }

  .action-box li,
  .action-box p {
    color: #BFDBFE;
  }

  .tech-card {
    background: #1E293B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .tech-card p {
    color: #D1D5DB;
  }

  .equipment-check {
    background: #422006;
  }

  .equipment-check h4 {
    color: #FDE68A;
  }

  .equipment-check li,
  .equipment-check p {
    color: #FEF3C7;
  }

  .wifi-factors {
    background: #1E293B;
  }

  .wifi-factors h4 {
    color: #F3F4F6;
  }

  .wifi-item {
    background: #0F172A;
    border-color: #334155;
  }

  .wifi-item.bad {
    background: #450A0A;
    border-color: #7F1D1D;
  }

  .wifi-label {
    color: #D1D5DB;
  }

  .usage-guide {
    background: #1E293B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .usage-note {
    color: #9CA3AF;
    border-top-color: #334155;
  }

  .research-checklist {
    background: linear-gradient(135deg, #064E3B 0%, #022C22 100%);
  }

  .research-checklist .checklist-item {
    border-bottom-color: rgba(52, 211, 153, 0.2);
  }

  .research-checklist .checklist-item label {
    color: #A7F3D0;
  }

  .local-provider {
    background: linear-gradient(135deg, #1E3A5F 0%, #0F172A 100%);
    border-left-color: #60A5FA;
  }

  .local-provider h4 {
    color: #60A5FA;
  }

  .local-provider p {
    color: #BFDBFE;
  }
}

/* Data-theme dark mode for Self-Diagnosis Guide (manual toggle) */
[data-theme="dark"] .comparison-truth {
  background: linear-gradient(135deg, #450A0A 0%, #7F1D1D 100%);
  border-left-color: #EF4444;
}

[data-theme="dark"] .comparison-truth h3 {
  color: #FCA5A5;
}

[data-theme="dark"] .truth-card {
  background: #1E293B;
  border-color: #334155;
}

[data-theme="dark"] .truth-card.reality {
  background: #450A0A;
  border-color: #EF4444;
}

[data-theme="dark"] .truth-card h4 {
  color: #F3F4F6;
}

[data-theme="dark"] .truth-card.reality h4 {
  color: #FCA5A5;
}

[data-theme="dark"] .truth-card p {
  color: #D1D5DB;
}

[data-theme="dark"] .factor-card {
  background: #1E293B;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .factor-content h4 {
  color: #F3F4F6;
}

[data-theme="dark"] .factor-content p {
  color: #9CA3AF;
}

[data-theme="dark"] .action-box {
  background: linear-gradient(135deg, #1E3A5F 0%, #0F172A 100%);
}

[data-theme="dark"] .action-box h4 {
  color: #60A5FA;
}

[data-theme="dark"] .action-box li,
[data-theme="dark"] .action-box p {
  color: #BFDBFE;
}

[data-theme="dark"] .tech-card {
  background: #1E293B;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .tech-card p {
  color: #D1D5DB;
}

[data-theme="dark"] .equipment-check {
  background: #422006;
}

[data-theme="dark"] .equipment-check h4 {
  color: #FDE68A;
}

[data-theme="dark"] .equipment-check li,
[data-theme="dark"] .equipment-check p {
  color: #FEF3C7;
}

[data-theme="dark"] .wifi-factors {
  background: #1E293B;
}

[data-theme="dark"] .wifi-factors h4 {
  color: #F3F4F6;
}

[data-theme="dark"] .wifi-item {
  background: #0F172A;
  border-color: #334155;
}

[data-theme="dark"] .wifi-item.bad {
  background: #450A0A;
  border-color: #7F1D1D;
}

[data-theme="dark"] .wifi-label {
  color: #D1D5DB;
}

[data-theme="dark"] .usage-guide {
  background: #1E293B;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .usage-note {
  color: #9CA3AF;
  border-top-color: #334155;
}

[data-theme="dark"] .research-checklist {
  background: linear-gradient(135deg, #064E3B 0%, #022C22 100%);
}

[data-theme="dark"] .research-checklist .checklist-item {
  border-bottom-color: rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] .research-checklist .checklist-item label {
  color: #A7F3D0;
}

[data-theme="dark"] .local-provider {
  background: linear-gradient(135deg, #1E3A5F 0%, #0F172A 100%);
  border-left-color: #60A5FA;
}

[data-theme="dark"] .local-provider h4 {
  color: #60A5FA;
}

[data-theme="dark"] .local-provider p {
  color: #BFDBFE;
}

/* Mobile Responsive for Self-Diagnosis Guide */
@media (max-width: 768px) {
  .truth-grid {
    grid-template-columns: 1fr;
  }

  .factors-grid {
    grid-template-columns: 1fr;
  }

  .wifi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

/* ===== Article Disclaimer ===== */
.article-disclaimer {
  background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 2rem 0;
  font-size: 0.9rem;
  color: #4B5563;
  border-left: 3px solid #9CA3AF;
}

.article-disclaimer em {
  font-style: normal;
}

.article-disclaimer a {
  color: var(--primary-blue);
  text-decoration: underline;
}

.article-disclaimer a:hover {
  color: var(--primary-blue-dark);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .article-disclaimer {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    border-left-color: #64748B;
    color: #9CA3AF;
  }

  .article-disclaimer a {
    color: #60A5FA;
  }

  .article-disclaimer a:hover {
    color: #93C5FD;
  }
}

/* Data-theme dark mode for article disclaimer (manual toggle) */
[data-theme="dark"] .article-disclaimer {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  border-left-color: #64748B;
  color: #9CA3AF;
}

[data-theme="dark"] .article-disclaimer a {
  color: #60A5FA;
}

[data-theme="dark"] .article-disclaimer a:hover {
  color: #93C5FD;
}

/* ===== CSS Icon System ===== */
/* All icons use CSS-only approach - NO EMOJIS */

/* Base icon styles */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
}

/* Icon container for highlight cards */
.highlight-icon,
.step-icon,
.wifi-icon,
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  font-size: 1.25rem;
}

/* SVG Icon Base */
.icon::before,
.highlight-icon::before,
.step-icon::before,
.wifi-icon::before,
.contact-icon::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Trophy Icon */
.icon-trophy::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E");
}

/* Lightning/Speed Icon */
.icon-speed::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
}

/* Refresh/Flexibility Icon */
.icon-refresh::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E");
}

/* Pause Icon */
.icon-pause::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='4' height='16' x='6' y='4'/%3E%3Crect width='4' height='16' x='14' y='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='4' height='16' x='6' y='4'/%3E%3Crect width='4' height='16' x='14' y='4'/%3E%3C/svg%3E");
}

/* Australia/Local Icon */
.icon-local::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Award/Medal Icon */
.icon-award::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E");
}

/* Phone Icon */
.icon-phone::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Lightbulb/Idea Icon */
.icon-idea::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
}

/* Chart/Data Icon */
.icon-chart::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E");
}

/* Trending Up Icon */
.icon-trending::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E");
}

/* Globe/Network Icon */
.icon-globe::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
}

/* Map Pin/Location Icon */
.icon-pin::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Dollar/Price Icon */
.icon-price::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='2' y2='22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='2' y2='22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
}

/* Tools/Wrench Icon */
.icon-tools::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

/* Home Icon */
.icon-home::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

/* Star Icon */
.icon-star::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}

/* WiFi/Signal Icon */
.icon-signal::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0'/%3E%3Cpath d='M1.42 9a16 16 0 0 1 21.16 0'/%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'/%3E%3Cline x1='12' x2='12.01' y1='20' y2='20'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0'/%3E%3Cpath d='M1.42 9a16 16 0 0 1 21.16 0'/%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'/%3E%3Cline x1='12' x2='12.01' y1='20' y2='20'/%3E%3C/svg%3E");
}

/* Lock Icon */
.icon-lock::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* Unlock Icon */
.icon-unlock::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E");
}

/* Satellite/Radio Icon */
.icon-satellite::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1C1 15.2 1 8.8 4.9 4.9'/%3E%3Cpath d='M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5'/%3E%3Cpath d='M19.1 4.9C23 8.8 23 15.1 19.1 19'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1C1 15.2 1 8.8 4.9 4.9'/%3E%3Cpath d='M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5'/%3E%3Cpath d='M19.1 4.9C23 8.8 23 15.1 19.1 19'/%3E%3C/svg%3E");
}

/* Plug/Connection Icon */
.icon-plug::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2'/%3E%3Cpath d='M15 8V2'/%3E%3Cpath d='M18 8v5a6 6 0 0 1-6 6v0a6 6 0 0 1-6-6V8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2'/%3E%3Cpath d='M15 8V2'/%3E%3Cpath d='M18 8v5a6 6 0 0 1-6 6v0a6 6 0 0 1-6-6V8Z'/%3E%3C/svg%3E");
}

/* Building/ISP Icon */
.icon-building::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01'/%3E%3Cpath d='M16 6h.01'/%3E%3Cpath d='M12 6h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01'/%3E%3Cpath d='M16 6h.01'/%3E%3Cpath d='M12 6h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3C/svg%3E");
}

/* Earth/Internet Icon */
.icon-earth::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
}

/* Brick/Wall Icon */
.icon-wall::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M9 3v6'/%3E%3Cpath d='M15 9v6'/%3E%3Cpath d='M9 15v6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M9 3v6'/%3E%3Cpath d='M15 9v6'/%3E%3Cpath d='M9 15v6'/%3E%3C/svg%3E");
}

/* Mirror/Reflection Icon */
.icon-mirror::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/%3E%3Cpath d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/%3E%3Cline x1='2' x2='22' y1='2' y2='22'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/%3E%3Cpath d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/%3E%3Cline x1='2' x2='22' y1='2' y2='22'/%3E%3C/svg%3E");
}

/* Radio/Interference Icon */
.icon-radio::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1C1 15.2 1 8.8 4.9 4.9'/%3E%3Cpath d='M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5'/%3E%3Cpath d='M19.1 4.9C23 8.8 23 15.1 19.1 19'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1C1 15.2 1 8.8 4.9 4.9'/%3E%3Cpath d='M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5'/%3E%3Cpath d='M19.1 4.9C23 8.8 23 15.1 19.1 19'/%3E%3C/svg%3E");
}

/* Mail Icon */
.icon-mail::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

/* Devices Icon */
.icon-devices::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='10' height='14' x='3' y='8' rx='2'/%3E%3Cpath d='M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4'/%3E%3Cpath d='M8 18h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='10' height='14' x='3' y='8' rx='2'/%3E%3Cpath d='M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4'/%3E%3Cpath d='M8 18h.01'/%3E%3C/svg%3E");
}

/* Multi-storey Icon */
.icon-floors::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M17 18h1'/%3E%3Cpath d='M12 18h1'/%3E%3Cpath d='M7 18h1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M17 18h1'/%3E%3Cpath d='M12 18h1'/%3E%3Cpath d='M7 18h1'/%3E%3C/svg%3E");
}

/* Rural/Farm Icon */
.icon-rural::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V8'/%3E%3Cpath d='M5 12H2a10 10 0 0 0 20 0h-3'/%3E%3Cpath d='M4 14v4'/%3E%3Cpath d='M20 14v4'/%3E%3Cpath d='M12 8a6 6 0 0 0-6 6'/%3E%3Cpath d='M12 8a6 6 0 0 1 6 6'/%3E%3Cpath d='M12 8V2l3 3-3 3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V8'/%3E%3Cpath d='M5 12H2a10 10 0 0 0 20 0h-3'/%3E%3Cpath d='M4 14v4'/%3E%3Cpath d='M20 14v4'/%3E%3Cpath d='M12 8a6 6 0 0 0-6 6'/%3E%3Cpath d='M12 8a6 6 0 0 1 6 6'/%3E%3Cpath d='M12 8V2l3 3-3 3'/%3E%3C/svg%3E");
}

/* Business/Briefcase Icon */
.icon-business::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E");
}

/* Hotel/Accommodation Icon */
.icon-hotel::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z'/%3E%3Cpath d='m9 16 .348-.24c1.465-1.013 3.84-1.013 5.304 0L15 16'/%3E%3Cpath d='M8 7h.01'/%3E%3Cpath d='M16 7h.01'/%3E%3Cpath d='M12 7h.01'/%3E%3Cpath d='M12 11h.01'/%3E%3Cpath d='M16 11h.01'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M10 22v-6.5m4 0V22'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z'/%3E%3Cpath d='m9 16 .348-.24c1.465-1.013 3.84-1.013 5.304 0L15 16'/%3E%3Cpath d='M8 7h.01'/%3E%3Cpath d='M16 7h.01'/%3E%3Cpath d='M12 7h.01'/%3E%3Cpath d='M12 11h.01'/%3E%3Cpath d='M16 11h.01'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M10 22v-6.5m4 0V22'/%3E%3C/svg%3E");
}

/* Beach/Vacation Icon */
.icon-beach::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 22H6.5a4.5 4.5 0 0 1 0-9h11a4.5 4.5 0 0 1 0 9Z'/%3E%3Cpath d='M12 13V2'/%3E%3Cpath d='M12 8 8 12'/%3E%3Cpath d='M12 8l4 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 22H6.5a4.5 4.5 0 0 1 0-9h11a4.5 4.5 0 0 1 0 9Z'/%3E%3Cpath d='M12 13V2'/%3E%3Cpath d='M12 8 8 12'/%3E%3Cpath d='M12 8l4 4'/%3E%3C/svg%3E");
}

/* Nature/Eco Icon */
.icon-nature::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
}

/* Orbiting Satellite Icon */
.icon-sat::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 7 2-2 4 4-2 2'/%3E%3Cpath d='m10.5 9.5-1 1'/%3E%3Cpath d='m13.5 6.5-1 1'/%3E%3Cpath d='m7 13 2-2'/%3E%3Cpath d='m15 11 2-2'/%3E%3Cpath d='m17 7-2-2'/%3E%3Cpath d='m3 21 9-9'/%3E%3Cpath d='M14 4 9 9l6 6 5-5-6-6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 7 2-2 4 4-2 2'/%3E%3Cpath d='m10.5 9.5-1 1'/%3E%3Cpath d='m13.5 6.5-1 1'/%3E%3Cpath d='m7 13 2-2'/%3E%3Cpath d='m15 11 2-2'/%3E%3Cpath d='m17 7-2-2'/%3E%3Cpath d='m3 21 9-9'/%3E%3Cpath d='M14 4 9 9l6 6 5-5-6-6Z'/%3E%3C/svg%3E");
}

/* ===== Verdict/Status Indicators ===== */
.context-verdict {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

.context-verdict.good {
  background: #DCFCE7;
  color: #166534;
}

.context-verdict.bad {
  background: #FEE2E2;
  color: #991B1B;
}

.bypass-result {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

.bypass-result.good {
  background: #DCFCE7;
  color: #166534;
}

.bypass-result.good::before {
  content: '';
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.25em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.bypass-result.bad {
  background: #FEE2E2;
  color: #991B1B;
}

.bypass-result.bad::before {
  content: '';
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.25em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

.dns-step.success::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  background-color: #16A34A;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.dns-step.blocked::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  background-color: #DC2626;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Dark Mode for Verdict Indicators */
@media (prefers-color-scheme: dark) {
  .context-verdict.good {
    background: #166534;
    color: #DCFCE7;
  }

  .context-verdict.bad {
    background: #991B1B;
    color: #FEE2E2;
  }

  .bypass-result.good {
    background: #166534;
    color: #DCFCE7;
  }

  .bypass-result.bad {
    background: #991B1B;
    color: #FEE2E2;
  }
}

/* Data-theme dark mode for verdict indicators (manual toggle) */
[data-theme="dark"] .context-verdict.good {
  background: #166534;
  color: #DCFCE7;
}

[data-theme="dark"] .context-verdict.bad {
  background: #991B1B;
  color: #FEE2E2;
}

[data-theme="dark"] .bypass-result.good {
  background: #166534;
  color: #DCFCE7;
}

[data-theme="dark"] .bypass-result.bad {
  background: #991B1B;
  color: #FEE2E2;
}

/* ===== Glossary Page Styles ===== */
.glossary-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--light-grey);
  border-radius: 8px;
}

.glossary-nav-label {
  font-weight: 600;
  color: var(--text-grey);
  font-size: 0.9rem;
}

.glossary-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.glossary-nav-links a {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: var(--connection-blue);
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.2s ease;
}

.glossary-nav-links a:hover {
  background: var(--connection-blue-dark);
}

.glossary-search {
  position: relative;
  max-width: 400px;
  margin: 1.5rem 0;
}

.glossary-search input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  border: 2px solid var(--border-grey);
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.glossary-search input:focus {
  outline: none;
  border-color: var(--connection-blue);
}

.glossary-search .search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background-color: var(--text-grey);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

.glossary-section {
  margin: 2rem 0;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.glossary-card {
  background: white;
  border: 1px solid var(--border-grey);
  border-radius: 8px;
  padding: 1.25rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.glossary-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--connection-blue);
}

.glossary-card h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
  color: var(--connection-blue);
  font-weight: 700;
}

.glossary-full {
  margin: 0 0 0.75rem 0;
  font-size: 0.85rem;
  color: var(--text-grey);
  font-style: italic;
}

.glossary-definition {
  margin: 0 0 0.75rem 0;
  line-height: 1.6;
  color: var(--dark-grey);
}

.glossary-example {
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: var(--sky-blue);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--connection-blue-dark);
}

.glossary-note {
  margin: 0.75rem 0 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-grey);
  font-size: 0.85rem;
  color: var(--text-grey);
}

.glossary-cta {
  text-align: center;
  padding: 2rem;
  margin: 2rem 0;
  background: linear-gradient(135deg, var(--connection-blue) 0%, var(--connection-blue-dark) 100%);
  border-radius: 12px;
  color: white;
}

.glossary-cta h2 {
  color: white;
  margin: 0 0 0.5rem 0;
}

.glossary-cta p {
  margin: 0 0 1rem 0;
  opacity: 0.95;
}

.glossary-cta .btn {
  background: white;
  color: var(--connection-blue);
}

.glossary-cta .cta-phone {
  margin-top: 0.75rem;
  opacity: 0.9;
}

/* Dark Mode Glossary */
@media (prefers-color-scheme: dark) {
  .glossary-nav {
    background: #1E293B;
  }

  .glossary-search input {
    background: #1E293B;
    border-color: #334155;
    color: #F3F4F6;
  }

  .glossary-search input:focus {
    border-color: #60A5FA;
  }

  .glossary-card {
    background: #1E293B;
    border-color: #334155;
  }

  .glossary-card:hover {
    border-color: #60A5FA;
  }

  .glossary-card h3 {
    color: #60A5FA;
  }

  .glossary-definition {
    color: #E5E7EB;
  }

  .glossary-example {
    background: #0F172A;
    color: #93C5FD;
  }
}

/* Data-theme dark mode for glossary page (manual toggle) */
[data-theme="dark"] .glossary-nav {
  background: #1E293B;
}

[data-theme="dark"] .glossary-search input {
  background: #1E293B;
  border-color: #334155;
  color: #F3F4F6;
}

[data-theme="dark"] .glossary-search input:focus {
  border-color: #60A5FA;
}

[data-theme="dark"] .glossary-card {
  background: #1E293B;
  border-color: #334155;
}

[data-theme="dark"] .glossary-card:hover {
  border-color: #60A5FA;
}

[data-theme="dark"] .glossary-card h3 {
  color: #60A5FA;
}

[data-theme="dark"] .glossary-definition {
  color: #E5E7EB;
}

[data-theme="dark"] .glossary-example {
  background: #0F172A;
  color: #93C5FD;
}

/* ===== Article Navigation ===== */
.article-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border-grey);
}

.article-nav-item {
  flex: 1;
  max-width: 45%;
}

.article-nav-item.prev {
  text-align: left;
}

.article-nav-item.next {
  text-align: right;
  margin-left: auto;
}

.article-nav-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-grey);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.article-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--connection-blue);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.article-nav-link:hover {
  color: var(--connection-blue-dark);
}

.article-nav-item.prev .article-nav-link::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

.article-nav-item.next .article-nav-link::after {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* Dark Mode Article Nav */
@media (prefers-color-scheme: dark) {
  .article-nav {
    border-top-color: #334155;
  }

  .article-nav-link {
    color: #60A5FA;
  }

  .article-nav-link:hover {
    color: #93C5FD;
  }
}

/* Data-theme dark mode for article navigation (manual toggle) */
[data-theme="dark"] .article-nav {
  border-top-color: #334155;
}

[data-theme="dark"] .article-nav-link {
  color: #60A5FA;
}

[data-theme="dark"] .article-nav-link:hover {
  color: #93C5FD;
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .article-nav {
    flex-direction: column;
  }

  .article-nav-item {
    max-width: 100%;
  }

  .article-nav-item.next {
    text-align: left;
    margin-left: 0;
  }

  .glossary-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Glossary Tooltip Popup ===== */
.glossary-term {
  color: var(--connection-blue);
  border-bottom: 2px dotted var(--connection-blue);
  cursor: help;
  position: relative;
  text-decoration: none;
  font-weight: 600;
}

.glossary-term:hover {
  border-bottom-style: solid;
  background: rgba(0, 102, 204, 0.08);
}

.glossary-popup {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  max-width: 90vw;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border: 2px solid var(--connection-blue);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  text-align: left;
}

.glossary-term:hover .glossary-popup,
.glossary-term:focus .glossary-popup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-4px);
}

.glossary-popup::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: var(--connection-blue);
}

.glossary-popup::before {
  content: '';
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #ffffff;
  z-index: 1;
}

.glossary-popup h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--connection-blue);
  font-family: var(--font-display);
}

.glossary-popup .popup-full {
  font-size: 0.9rem;
  color: #4B5563;
  font-style: italic;
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-grey);
}

.glossary-popup .popup-definition {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #1A1A1A;
}

.glossary-popup .popup-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--connection-blue);
}

/* Dark Mode Glossary Popup */
@media (prefers-color-scheme: dark) {
  .glossary-term {
    color: #60A5FA;
    border-bottom-color: #60A5FA;
  }

  .glossary-term:hover {
    background: rgba(96, 165, 250, 0.15);
  }

  .glossary-popup {
    background: #1E293B;
    border-color: #60A5FA;
  }

  .glossary-popup::after {
    border-top-color: #60A5FA;
  }

  .glossary-popup::before {
    border-top-color: #1E293B;
  }

  .glossary-popup h4 {
    color: #60A5FA;
  }

  .glossary-popup .popup-full {
    color: #94A3B8;
    border-bottom-color: #334155;
  }

  .glossary-popup .popup-definition {
    color: #E5E7EB;
  }

  .glossary-popup .popup-link {
    color: #93C5FD;
  }

  .glossary-popup .popup-link:hover {
    color: #BFDBFE;
  }
}

/* Data-theme dark mode for glossary popup (manual toggle) */
[data-theme="dark"] .glossary-term {
  color: #60A5FA;
  border-bottom-color: #60A5FA;
}

[data-theme="dark"] .glossary-term:hover {
  background: rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .glossary-popup {
  background: #1E293B;
  border-color: #60A5FA;
}

[data-theme="dark"] .glossary-popup::after {
  border-top-color: #60A5FA;
}

[data-theme="dark"] .glossary-popup::before {
  border-top-color: #1E293B;
}

[data-theme="dark"] .glossary-popup h4 {
  color: #60A5FA;
}

[data-theme="dark"] .glossary-popup .popup-full {
  color: #94A3B8;
  border-bottom-color: #334155;
}

[data-theme="dark"] .glossary-popup .popup-definition {
  color: #E5E7EB;
}

[data-theme="dark"] .glossary-popup .popup-link {
  color: #93C5FD;
}

[data-theme="dark"] .glossary-popup .popup-link:hover {
  color: #BFDBFE;
}