/* Self-hosted fonts (SIL Open Font License 1.1): Inter, Plus Jakarta Sans, JetBrains Mono. Latin subset, variable weight. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ==========================================================================
   HackGuard.com — Scroll-Craft + AI SEO High-Craft Design System
   Engineered to pair with /engine/scrollcraft.css & /engine/scrollcraft.js
   ========================================================================== */

:root {
  /* Scroll-Craft 6-Token Palette (Deep Command Slate Default) */
  --sc-canvas: #0B1220;
  --sc-surface: #131E32;
  --sc-ink: #F8FAFC;
  --sc-ink-soft: #94A3B8;
  --sc-accent: #10B981;
  --sc-accent-ink: #04130D;

  /* Secondary Brand & Editorial Ground Tokens */
  --hg-amber: #F59E0B;
  --hg-amber-bright: #FBBF24;
  --hg-amber-ink: #1C1202;
  --hg-danger: #F43F5E;
  --hg-blue: #38BDF8;
  --hg-border-dark: rgba(255, 255, 255, 0.10);
  --hg-border-light: rgba(15, 23, 42, 0.10);

  /* Typography */
  --sc-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sc-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid Type Scale */
  --sc-t-hero: clamp(2.5rem, 4.4vw + 1rem, 4.35rem);
  --sc-t-h1: clamp(2.15rem, 3.5vw + 0.85rem, 3.5rem);
  --sc-t-h2: clamp(1.75rem, 2.5vw + 0.65rem, 2.65rem);
  --sc-t-h3: clamp(1.25rem, 1.2vw + 0.65rem, 1.6rem);
  --sc-t-lead: clamp(1.08rem, 0.45vw + 0.95rem, 1.28rem);
  --sc-t-body: clamp(1rem, 0.2vw + 0.94rem, 1.08rem);
  --sc-t-sm: 0.875rem;
  --sc-t-xs: 0.76rem;

  /* Radii & Transitions */
  --hg-r-sm: 8px;
  --hg-r-md: 14px;
  --hg-r-lg: 22px;
  --hg-r-xl: 30px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-sans);
  font-size: var(--sc-t-body);
  line-height: 1.65;
  overflow-x: hidden;
}

/* Warm Editorial Ivory Section Ground (Restates --sc-ink per taste.md §1) */
.hg-ground-ivory {
  --sc-canvas: #F7F5F0;
  --sc-surface: #FFFFFF;
  --sc-ink: #0F172A;
  --sc-ink-soft: #475569;
  --sc-accent: #059669;
  --sc-accent-ink: #FFFFFF;
  background-color: var(--sc-canvas);
  color: var(--sc-ink);
}

.hg-ground-slate {
  --sc-canvas: #0E1729;
  --sc-surface: #16233B;
  --sc-ink: #F8FAFC;
  --sc-ink-soft: #94A3B8;
  background-color: var(--sc-canvas);
  color: var(--sc-ink);
}

.hg-ground-deep {
  --sc-canvas: #070C16;
  --sc-surface: #101A2D;
  --sc-ink: #F8FAFC;
  --sc-ink-soft: #94A3B8;
  background-color: var(--sc-canvas);
  color: var(--sc-ink);
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* Accessibility Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 9999;
  background: var(--hg-amber);
  color: var(--hg-amber-ink);
  padding: 0.75rem 1.25rem;
  border-radius: var(--hg-r-sm);
  font-weight: 700;
}
.skip-link:focus {
  top: 1rem;
}

/* Visually Hidden Screen Reader Only Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Container & Layout */
.hg-wrap {
  width: min(1240px, 100% - clamp(2rem, 6vw, 5rem));
  margin-inline: auto;
}

.hg-wrap-narrow {
  width: min(860px, 100% - clamp(2rem, 6vw, 4rem));
  margin-inline: auto;
}

.hg-section {
  padding-block: clamp(4.25rem, 8vw, 7.5rem);
  position: relative;
}

/* Sub-page top section / breadcrumbs container */
main > .hg-section:first-child,
.hg-section:has(.hg-breadcrumbs) {
  padding-top: clamp(1.75rem, 2.5vw, 2.5rem);
}

/* Typography Discipline */
h1, h2, h3, h4 {
  font-family: var(--sc-font-display);
  color: var(--sc-ink);
  margin-top: 0;
  letter-spacing: -0.028em;
  line-height: 1.12;
  text-wrap: balance;
}

p, li {
  text-wrap: pretty;
}

.hg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--sc-accent);
  margin-bottom: 1rem;
}

.hg-ground-ivory .hg-eyebrow {
  color: #047857;
}

.hg-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--sc-accent);
  box-shadow: 0 0 12px var(--sc-accent);
}

.hg-lead {
  font-size: var(--sc-t-lead);
  color: var(--sc-ink-soft);
  max-width: 62ch;
  line-height: 1.65;
}

/* ==========================================================================
   Top Telemetry Bar & Sticky Navigation Header
   ========================================================================== */
.hg-topbar {
  background: #060A12;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
  color: #CBD5E1;
  padding: 0.5rem 0;
}

.hg-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hg-topbar-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sc-font-mono);
  font-size: 0.76rem;
}

.hg-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: hgPulse 2.2s infinite;
}

@keyframes hgPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.65); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.hg-topbar-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.hg-topbar-links a {
  color: #E2E8F0;
  font-weight: 500;
}
.hg-topbar-links a:hover {
  color: var(--hg-amber-bright);
}

.hg-topbar-phone {
  color: var(--hg-amber-bright) !important;
  font-family: var(--sc-font-mono);
  font-weight: 700 !important;
}

.hg-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(11, 18, 32, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.hg-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 76px;
  padding: 0.35rem 0;
}

.hg-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

@keyframes hgHeartbeat {
  0%, 12%, 28%, 42%, 100% { transform: scale(0.94); }
  18% { transform: scale(1.015); }
  34% { transform: scale(1.04); }
}

.hg-brand-mark {
  width: 62px;
  height: 62px;
  border-radius: 0;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hg-brand-mark img,
.hg-brand-heart-logo {
  width: 62px;
  height: 62px;
  object-fit: contain;
  transform-origin: center;
  animation: hgHeartbeat 2.2s ease-in-out infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hg-brand-mark img,
  .hg-brand-heart-logo {
    animation: none;
  }
}

.hg-brand-text {
  display: flex;
  flex-direction: column;
}

.hg-brand-name {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  line-height: 1.1;
}

.hg-brand-name span {
  color: var(--sc-accent);
}

.hg-brand-sub {
  /* Two short lines, each stretched to the width of the "HackGuard.com" title
     (letter-spacing is fine-tuned by js/site.js so it holds with any font) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  line-height: 1.3;
  font-weight: 600;
  color: #94A3B8;
  letter-spacing: 0.08em;
}
.hg-brand-sub > span {
  display: block;
  width: max-content;
  white-space: nowrap;
}

.hg-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.hg-nav-link {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #E2E8F0;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.hg-nav-link:hover,
.hg-nav-link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.hg-nav-dropdown {
  position: relative;
}

.hg-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 320px;
  background: #111C30;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--hg-r-md);
  box-shadow: 0 24px 48px -12px rgba(2, 6, 23, 0.75);
  padding: 0.65rem;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 120;
}

.hg-nav-dropdown:hover .hg-nav-dropdown-menu,
.hg-nav-dropdown:focus-within .hg-nav-dropdown-menu {
  display: flex;
}

.hg-nav-dropdown-item {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.hg-nav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.hg-nav-dropdown-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #F8FAFC;
}

.hg-nav-dropdown-desc {
  font-size: 0.75rem;
  color: #94A3B8;
}

.hg-header-ctas {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.hg-header-ctas .hg-btn {
  text-align: center;
  justify-content: center;
}

/* Buttons */
.hg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.55rem;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.78rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, background 0.2s ease;
  text-decoration: none;
  line-height: 1.25;
}

.hg-btn,
.hg-btn *,
.hg-btn-sm,
.hg-btn-lg,
.hg-role-btn,
.hg-pain-chip,
.hg-filter-tab,
.hg-menu-toggle,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  text-align: center;
}

.hg-btn:hover {
  transform: translateY(-2px);
}

.hg-btn-amber {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  color: #170F02;
  box-shadow: 0 10px 24px -6px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.hg-btn-amber:hover {
  box-shadow: 0 14px 28px -6px rgba(245, 158, 11, 0.6);
}

.hg-btn-emerald {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #03150E;
  box-shadow: 0 10px 24px -6px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.hg-btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #F8FAFC;
  border-color: rgba(255, 255, 255, 0.18);
}

.hg-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.hg-ground-ivory .hg-btn-ghost {
  background: rgba(15, 23, 42, 0.05);
  color: #0F172A;
  border-color: rgba(15, 23, 42, 0.18);
}

.hg-ground-ivory .hg-sidebar-card.is-dark .hg-btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #F8FAFC;
  border-color: rgba(255, 255, 255, 0.22);
}

.hg-ground-ivory .hg-sidebar-card.is-dark .hg-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
}

.hg-btn-sm {
  padding: 0.55rem 1.05rem;
  font-size: 0.85rem;
}

.hg-btn-lg {
  padding: 0.95rem 1.75rem;
  font-size: 1.04rem;
}

/* Mobile Menu Button */
.hg-menu-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================
   Act 1: Dimensional Multi-Plane Hero (hero-depth.md)
   ========================================================================== */
.hg-hero {
  position: relative;
  padding-top: clamp(1.75rem, 2.5vw, 2.5rem);
  padding-bottom: clamp(4rem, 7vw, 6.5rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(16, 185, 129, 0.14), transparent 42%),
    radial-gradient(circle at 82% 28%, rgba(245, 158, 11, 0.12), transparent 45%),
    linear-gradient(180deg, #090F1C 0%, #0B1220 100%);
}

/* Plane 1: Background Command Grid */
.hg-hero-bg-grid {
  position: absolute;
  inset: -10% 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 55%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.hg-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}

.hg-hero-copy {
  position: relative;
  z-index: 3;
}

.hg-hero-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.35rem;
}

.hg-pill-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #6EE7B7;
  font-family: var(--sc-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
}

.hg-pill-review {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #FCD34D;
  font-size: 0.8rem;
  font-weight: 600;
}

.hg-hero-title {
  font-size: var(--sc-t-hero);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.032em;
  color: #FFFFFF;
  margin-bottom: 1.25rem;
}

.hg-hero-title-accent {
  background: linear-gradient(92deg, #34D399 0%, #60A5FA 52%, #FBBF24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hg-hero-lead {
  font-size: var(--sc-t-lead);
  color: #CBD5E1;
  max-width: 58ch;
  margin-bottom: 1.75rem;
}

.hg-hero-lead strong {
  color: #FFFFFF;
}

.hg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.65rem;
}

.hg-hero-guarantees {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hg-hero-guarantee-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: #CBD5E1;
}

.hg-hero-guarantee-item svg,
.hg-hero-guarantee-item img {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Planes 2, 3, 4: Multi-Plane Visual Stage */
.hg-hero-stage {
  position: relative;
  min-height: 510px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Plane 2: Midground Telemetry Console */
.hg-hero-console {
  width: 100%;
  background: rgba(19, 30, 50, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--hg-r-lg);
  box-shadow:
    0 28px 60px -15px rgba(2, 6, 23, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  padding: 1.4rem;
  position: relative;
  z-index: 2;
}

.hg-console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.95rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.hg-console-dots {
  display: flex;
  gap: 6px;
}

.hg-console-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.hg-console-dots span:nth-child(1) { background: #F43F5E; }
.hg-console-dots span:nth-child(2) { background: #F59E0B; }
.hg-console-dots span:nth-child(3) { background: #10B981; }

.hg-console-tag {
  font-family: var(--sc-font-mono);
  font-size: 0.73rem;
  color: #6EE7B7;
  background: rgba(16, 185, 129, 0.12);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}

.hg-console-rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.hg-console-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(9, 15, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 0.68rem 0.9rem;
  font-size: 0.84rem;
}

.hg-console-row-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #E2E8F0;
  font-weight: 500;
}

.hg-console-row-status {
  font-family: var(--sc-font-mono);
  font-size: 0.74rem;
  color: #34D399;
  font-weight: 600;
  white-space: nowrap;
}

/* Plane 3: Focal Founder Card Overlapping Console */
.hg-hero-founder-card {
  position: relative;
  margin-top: 1rem;
  background: linear-gradient(135deg, #172540 0%, #0F192C 100%);
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: var(--hg-r-md);
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 20px 40px -12px rgba(2, 6, 23, 0.8);
  z-index: 3;
}

.hg-hero-founder-avatar {
  /* large portrait: the image carries its own circle, so no border or crop here */
  width: 190px;
  height: auto;
  flex-shrink: 0;
  margin: -0.35rem 0;
}

@media (max-width: 480px) {
  .hg-hero-founder-card { flex-direction: column; text-align: center; }
  .hg-hero-founder-avatar { width: 210px; }
  .hg-hero-founder-phone { white-space: nowrap; font-size: 0.78rem; }
}
.hg-hero-founder-meta h3 {
  font-size: 1.02rem;
  margin-bottom: 0.2rem;
  color: #FFFFFF;
}

.hg-hero-founder-meta p {
  margin: 0;
  font-size: 0.82rem;
  color: #CBD5E1;
  line-height: 1.45;
}

.hg-hero-founder-phone {
  display: inline-block;
  margin-top: 0.35rem;
  font-family: var(--sc-font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--hg-amber-bright);
}

/* Plane 4: Foreground Verification Chip */
.hg-hero-float-chip {
  position: absolute;
  top: -34px;
  right: -10px;
  z-index: 4;
  background: #064E3B;
  border: 1px solid #34D399;
  color: #ECFDF5;
  padding: 0.55rem 0.95rem;
  border-radius: 12px;
  font-family: var(--sc-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 16px 32px -8px rgba(2, 6, 23, 0.75);
}

/* ==========================================================================
   Act 2: Verified Authority & Trust Ledger Bar
   ========================================================================== */
.hg-trustbar {
  background: #0E172A;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2.75rem 0 3.5rem;
}

.hg-trustbar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: center;
}

.hg-trust-metric {
  padding-left: 1rem;
  border-left: 2px solid rgba(16, 185, 129, 0.45);
}

.hg-trust-metric-val {
  font-family: var(--sc-font-display);
  font-size: clamp(1.55rem, 2.2vw, 2.15rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hg-trust-metric-val span {
  color: var(--hg-amber-bright);
}

.hg-trust-metric-label {
  font-size: 0.82rem;
  color: #94A3B8;
  margin-top: 0.25rem;
}

/* ==========================================================================
   Act 3: The One Engineered Peak — "The Clean Scan Trap" (data-sc-act="pin")
   ========================================================================== */
.hg-peak-pin {
  background:
    radial-gradient(circle at 75% 30%, rgba(16, 185, 129, 0.12), transparent 45%),
    radial-gradient(circle at 25% 70%, rgba(244, 63, 94, 0.10), transparent 45%),
    #080E1A;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hg-peak-stage {
  display: flex;
  align-items: center;
  /* extra top padding keeps content clear of the fixed site header */
  padding-block: 5.5rem 2rem;
}

@media (max-width: 1024px) {
  .hg-peak-pin {
    height: auto !important;
  }
  .hg-peak-stage.sc-stage {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
    padding-block: 3.5rem;
  }
}

.hg-peak-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: center;
  width: 100%;
}

/* Keep the standard page gutter inside the pinned stage */
.hg-peak-layout.hg-wrap {
  width: min(1240px, 100% - clamp(2rem, 6vw, 5rem));
}

.hg-peak-steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.hg-peak-step {
  padding: 0.75rem 1.1rem;
  border-radius: var(--hg-r-md);
  background: rgba(19, 30, 50, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.28s ease;
}

.hg-peak-step.is-active {
  background: rgba(19, 30, 50, 0.98);
  border-color: var(--sc-accent);
  box-shadow: 0 14px 30px -10px rgba(16, 185, 129, 0.28);
  transform: translateX(6px);
}

.hg-peak-step[data-step="1"].is-active {
  border-color: var(--hg-amber);
}
.hg-peak-step[data-step="2"].is-active {
  border-color: var(--hg-danger);
}

.hg-peak-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.3rem;
}

.hg-peak-step-title {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: #FFFFFF;
}

.hg-peak-step-tag {
  font-family: var(--sc-font-mono);
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #CBD5E1;
}

.hg-peak-step p {
  margin: 0;
  font-size: 0.86rem;
  color: #94A3B8;
  line-height: 1.5;
  /* only the active step shows its description, so the pinned stage fits short screens */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.28s ease;
}
.hg-peak-step .hg-peak-step-head { margin-bottom: 0; }
.hg-peak-step.is-active .hg-peak-step-head { margin-bottom: 0.3rem; }
.hg-peak-step.is-active p { max-height: 8rem; opacity: 1; }
/* Short desktop screens: tighten the pinned stage so nothing is cut off */
@media (min-width: 1025px) and (max-height: 780px) {
  .hg-peak-pin .hg-eyebrow { display: none; }
  .hg-peak-pin h2 { font-size: 1.5rem !important; margin-bottom: 0.5rem !important; }
  .hg-peak-pin .hg-peak-layout > :first-child > p { font-size: 0.9rem !important; line-height: 1.45; }
  .hg-peak-stage { padding-block: 4.75rem 1.25rem; align-items: flex-start; }
}
@media (max-width: 1024px) {
  /* not pinned on tablets/phones: show every description */
  .hg-peak-step p { max-height: none; opacity: 1; }
  .hg-peak-step .hg-peak-step-head { margin-bottom: 0.3rem; }
}

.hg-peak-step.is-active p {
  color: #E2E8F0;
}

/* Forensic Visualizer Window */
.hg-forensic-window {
  background: #0D1627;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--hg-r-lg);
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.hg-forensic-topbar {
  background: #070C16;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hg-forensic-progress-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  width: 100%;
}

.hg-forensic-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #F43F5E, #10B981);
  width: calc(var(--sc-p, 0.25) * 100%);
  transition: width 0.12s linear;
}

.hg-forensic-body {
  padding: 1.5rem;
}

.hg-forensic-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  border-radius: 12px;
  margin-bottom: 1.2rem;
  font-family: var(--sc-font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.hg-forensic-banner[data-state="plugin"] {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #FCD34D;
}

.hg-forensic-banner[data-state="exposed"] {
  background: rgba(244, 63, 94, 0.16);
  border: 1px solid rgba(244, 63, 94, 0.45);
  color: #FDA4AF;
}

.hg-forensic-banner[data-state="hardening"] {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #BAE6FD;
}

.hg-forensic-banner[data-state="secured"] {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #6EE7B7;
}

.hg-forensic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.hg-forensic-card {
  background: rgba(7, 12, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 1rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.hg-forensic-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  font-family: var(--sc-font-mono);
  font-size: 0.76rem;
}

.hg-forensic-file {
  color: #93C5FD;
  font-weight: 600;
}

.hg-forensic-badge {
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
}

.hg-forensic-badge.is-warn {
  background: rgba(244, 63, 94, 0.2);
  color: #FDA4AF;
}

.hg-forensic-badge.is-safe {
  background: rgba(16, 185, 129, 0.2);
  color: #6EE7B7;
}

.hg-forensic-card h4 {
  font-size: 0.94rem;
  margin-bottom: 0.3rem;
  color: #FFFFFF;
}

.hg-forensic-card p {
  margin: 0;
  font-size: 0.8rem;
  color: #94A3B8;
  line-height: 1.45;
}

.hg-forensic-footer {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: #CBD5E1;
}

/* ==========================================================================
   Act 4: Asymmetric 4-Pillar Craft Ledger (Warm Ivory Editorial Ground)
   ========================================================================== */
.hg-pillars-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.hg-pillars-sticky {
  position: sticky;
  top: 100px;
}

.hg-pillars-ledger {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hg-pillar-row {
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: var(--hg-r-lg);
  padding: 1.75rem 2rem;
  box-shadow: 0 12px 30px -12px rgba(15, 23, 42, 0.08);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.35rem;
  align-items: start;
}

.hg-pillar-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #0F172A;
  border: 1px solid rgba(16, 185, 129, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.hg-pillar-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.hg-pillar-tag {
  font-family: var(--sc-font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #047857;
  margin-bottom: 0.35rem;
}

.hg-pillar-row h3 {
  font-size: 1.32rem;
  color: #0F172A;
  margin-bottom: 0.55rem;
}

.hg-pillar-row p {
  margin: 0 0 0.85rem;
  color: #334155;
  font-size: 0.97rem;
}

.hg-pillar-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hg-pillar-checks li {
  font-size: 0.78rem;
  font-weight: 600;
  background: #F1F5F9;
  color: #0F172A;
  padding: 0.28rem 0.68rem;
  border-radius: 999px;
}

/* ==========================================================================
   Act 5: Bespoke Signature Move — Live WordPress Protection & Rate Diagnostic
   ========================================================================== */
.hg-diagnostic-shell {
  background: linear-gradient(145deg, #131F35 0%, #0C1424 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--hg-r-xl);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  box-shadow:
    0 32px 70px -20px rgba(2, 6, 23, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.hg-diagnostic-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}

.hg-contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}

.hg-diag-group {
  margin-bottom: 1.65rem;
}

.hg-diag-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 0.96rem;
  color: #FFFFFF;
  margin-bottom: 0.7rem;
}

.hg-role-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  background: #080E1A;
  padding: 0.4rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hg-role-btn {
  background: transparent;
  border: none;
  color: #94A3B8;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.7rem 1rem;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hg-role-btn.is-active {
  background: var(--sc-accent);
  color: #04130D;
  box-shadow: 0 6px 16px -4px rgba(16, 185, 129, 0.5);
}

.hg-range-wrap {
  background: #080E1A;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
}

.hg-range-input {
  width: 100%;
  accent-color: var(--hg-amber);
  cursor: pointer;
  height: 8px;
}

.hg-range-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--sc-font-mono);
  font-size: 0.74rem;
  color: #94A3B8;
  margin-top: 0.5rem;
}

.hg-pain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.hg-pain-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: #080E1A;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #CBD5E1;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
}

.hg-pain-chip.is-selected {
  background: rgba(16, 185, 129, 0.14);
  border-color: #34D399;
  color: #FFFFFF;
}

.hg-pain-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.hg-pain-chip.is-selected .hg-pain-check {
  background: #10B981;
  border-color: #10B981;
  color: #04130D;
  font-weight: 900;
}

/* Diagnostic Output Card */
.hg-diag-output {
  background: #080E1A;
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: var(--hg-r-lg);
  padding: 1.65rem;
}

.hg-diag-plan-badge {
  display: inline-block;
  font-family: var(--sc-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #FCD34D;
  background: rgba(245, 158, 11, 0.15);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.65rem;
}

.hg-diag-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}

.hg-diag-price-main {
  font-family: var(--sc-font-display);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 800;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hg-diag-price-unit {
  font-size: 0.95rem;
  color: #94A3B8;
}

.hg-diag-daily {
  font-family: var(--sc-font-mono);
  font-size: 0.83rem;
  color: #6EE7B7;
  margin-bottom: 1.15rem;
}

.hg-diag-savings-box {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-size: 0.83rem;
  color: #D1FAE5;
  margin-bottom: 1.2rem;
}

.hg-diag-checklist-title {
  font-family: var(--sc-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94A3B8;
  margin-bottom: 0.6rem;
}

.hg-diag-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.hg-diag-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: #E2E8F0;
}

.hg-diag-checklist li::before {
  content: "✓";
  color: #34D399;
  font-weight: 800;
}

.hg-diag-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* ==========================================================================
   Act 6: AI SEO Comparison Matrix Table (Human vs. Plugin vs. Shared Host)
   ========================================================================== */
.hg-table-wrap {
  overflow-x: auto;
  border-radius: var(--hg-r-lg);
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #FFFFFF;
  box-shadow: 0 20px 45px -18px rgba(15, 23, 42, 0.1);
}

.hg-compare-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.93rem;
  color: #0F172A;
}

.hg-compare-table th,
.hg-compare-table td {
  padding: 1.05rem 1.25rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  vertical-align: top;
}

.hg-compare-table thead th {
  background: #0F172A;
  color: #FFFFFF;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 0.95rem;
}

.hg-compare-table thead th.is-hg-col {
  background: #065F46;
  color: #ECFDF5;
}

.hg-compare-table tbody td.is-hg-col {
  background: rgba(16, 185, 129, 0.07);
  font-weight: 600;
  color: #064E3B;
}

.hg-compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* ==========================================================================
   Act 7: Client Video Testimonials & Native <dialog> Lightbox
   ========================================================================== */
.hg-video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.25rem;
}

.hg-video-card {
  background: #131E32;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--hg-r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, border-color 0.22s ease;
}

.hg-video-card:hover {
  transform: translateY(-4px);
  border-color: var(--hg-amber);
}

.hg-video-thumb-btn {
  position: relative;
  border: none;
  padding: 0;
  background: #060A12;
  cursor: pointer;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hg-video-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease, opacity 0.25s ease;
}

.hg-video-card:hover .hg-video-thumb-btn img {
  transform: scale(1.04);
}

.hg-video-play-pill {
  position: absolute;
  inset: auto auto 12px 12px;
  background: rgba(11, 18, 32, 0.9);
  border: 1px solid rgba(245, 158, 11, 0.65);
  color: #FCD34D;
  font-family: var(--sc-font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hg-video-card-body {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.hg-video-card-body h3 {
  font-size: 1rem;
  color: #FFFFFF;
  margin-bottom: 0.4rem;
}

.hg-video-card-body p {
  font-size: 0.84rem;
  color: #94A3B8;
  margin: 0 0 0.8rem;
}

.hg-video-ext-link {
  font-family: var(--sc-font-mono);
  font-size: 0.75rem;
  color: var(--hg-amber-bright);
}

/* Native <dialog> Modal for Video Player */
.hg-video-dialog {
  width: min(920px, 94vw);
  background: #090F1C;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--hg-r-lg);
  padding: 1.25rem;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.9);
}

.hg-video-dialog::backdrop {
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(6px);
}

.hg-video-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.hg-video-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

.hg-video-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   Act 8: Pricing Cards & 4-Column Included Matrix
   ========================================================================== */
.hg-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin-top: 2.25rem;
}

/* Services page: "Calculate your monthly rate" button sits above the Ten-Pack card (right column) on desktop */
.hg-calc-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin-top: 1.5rem;
}
.hg-calc-row > a { grid-column: 2; justify-self: start; }
.hg-calc-row + .hg-pricing-grid { margin-top: 1.5rem; }
@media (max-width: 768px) {
  .hg-calc-row { grid-template-columns: 1fr; }
  .hg-calc-row > a { grid-column: 1; }
}

.hg-price-card {
  background: #131E32;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--hg-r-lg);
  padding: 2.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hg-price-card.is-featured {
  background: linear-gradient(155deg, #172742 0%, #101B30 100%);
  border-color: var(--hg-amber);
  box-shadow: 0 24px 55px -15px rgba(245, 158, 11, 0.22);
}

.hg-price-ribbon {
  position: absolute;
  top: -13px;
  right: 24px;
  background: var(--hg-amber);
  color: #170F02;
  font-family: var(--sc-font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hg-price-amount {
  font-family: var(--sc-font-display);
  font-size: clamp(2.4rem, 3.8vw, 3.35rem);
  font-weight: 800;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin: 0.6rem 0 0.25rem;
}

.hg-price-amount span {
  font-size: 1rem;
  font-weight: 500;
  color: #94A3B8;
}

.hg-price-list {
  list-style: none;
  padding: 0;
  margin: 1.35rem 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.hg-price-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: #E2E8F0;
}

.hg-price-list li::before {
  content: "✓";
  color: #34D399;
  font-weight: 800;
}

.hg-included-matrix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.hg-matrix-col {
  background: rgba(19, 30, 50, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--hg-r-md);
  padding: 1.4rem;
}

.hg-matrix-col h4 {
  font-size: 1rem;
  color: var(--hg-amber-bright);
  margin-bottom: 0.85rem;
  font-family: var(--sc-font-display);
}

.hg-matrix-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #CBD5E1;
}

.hg-matrix-col ul li::before {
  content: "• ";
  color: var(--sc-accent);
  font-weight: 700;
}

/* ==========================================================================
   AI SEO BLUF Callout, FAQ Accordion & Topic Cluster Cards
   ========================================================================== */
.hg-bluf-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(15, 23, 42, 0.9) 100%);
  border-left: 4px solid #10B981;
  border-top: 1px solid rgba(16, 185, 129, 0.3);
  border-right: 1px solid rgba(16, 185, 129, 0.3);
  border-bottom: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 0 var(--hg-r-md) var(--hg-r-md) 0;
  padding: 1.35rem 1.6rem;
  margin: 1.5rem 0 2rem;
}

.hg-ground-ivory .hg-bluf-box {
  background: #ECFDF5;
  border-color: #059669;
  color: #064E3B;
}

.hg-bluf-label {
  font-family: var(--sc-font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #34D399;
  margin-bottom: 0.4rem;
  display: block;
}

.hg-ground-ivory .hg-bluf-label {
  color: #047857;
}

.hg-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.hg-faq-item {
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--hg-r-md);
  padding: 1.15rem 1.4rem;
  color: #0F172A;
}

.hg-faq-item summary {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #0F172A;
}

.hg-faq-item summary::-webkit-details-marker {
  display: none;
}

.hg-faq-item summary::after {
  content: "+";
  font-family: var(--sc-font-mono);
  font-size: 1.25rem;
  color: #059669;
  font-weight: 700;
}

.hg-faq-item[open] summary::after {
  content: "−";
}

.hg-faq-body {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  color: #334155;
  font-size: 0.96rem;
}

/* Knowledge Base & Article Layout */
.hg-cluster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.hg-cluster-card {
  background: #131E32;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--hg-r-lg);
  padding: 1.85rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.hg-cluster-card:hover {
  transform: translateY(-3px);
  border-color: var(--sc-accent);
}

.hg-ground-ivory .hg-cluster-card {
  background: #FFFFFF;
  border-color: rgba(15, 23, 42, 0.12);
  color: #0F172A;
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.08);
}

.hg-article-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
}

.hg-article-card {
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: var(--hg-r-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #0F172A;
  box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.07);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.hg-article-card:hover {
  transform: translateY(-3px);
  border-color: #059669;
}

.hg-article-card h3 {
  font-size: 1.18rem;
  color: #0F172A;
  margin-bottom: 0.55rem;
}

.hg-article-card p {
  color: #475569;
  font-size: 0.92rem;
  margin: 0 0 1rem;
}

/* Breadcrumbs */
.hg-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sc-font-mono);
  font-size: 0.78rem;
  color: #94A3B8;
  margin-bottom: 1.25rem;
}

.hg-breadcrumbs a {
  color: #6EE7B7;
}
.hg-breadcrumbs a:hover {
  text-decoration: underline;
}

/* Single Article Content Layout */
.hg-article-shell {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.hg-prose {
  background: #FFFFFF;
  color: #0F172A;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: var(--hg-r-lg);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  box-shadow: 0 16px 40px -16px rgba(15, 23, 42, 0.08);
}

.hg-prose h2,
.hg-prose h3,
.hg-prose h4 {
  color: #0F172A;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.hg-prose h2 {
  font-size: 1.55rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.hg-prose p,
.hg-prose li {
  color: #1E293B;
  font-size: 1.03rem;
  line-height: 1.75;
}

.hg-prose p {
  margin: 0 0 1.15rem;
}

.hg-prose ul,
.hg-prose ol {
  margin: 0 0 1.35rem;
  padding-left: 1.4rem;
}

.hg-prose li {
  margin-bottom: 0.45rem;
}

.hg-prose a {
  color: #047857;
  font-weight: 600;
  text-decoration: underline;
}

.hg-prose { min-width: 0; }
.hg-prose p,
.hg-prose li { overflow-wrap: anywhere; }

.hg-prose pre,
.hg-code-block {
  max-width: 100%;
  background: #0B1220;
  color: #E2E8F0;
  padding: 1.1rem 1.25rem;
  border-radius: 10px;
  overflow-x: auto;
  font-family: var(--sc-font-mono);
  font-size: 0.84rem;
  line-height: 1.6;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.hg-prose figure {
  margin: 1.75rem 0;
  background: #F8FAFC;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  padding: 1rem;
}

.hg-prose figcaption {
  font-size: 0.82rem;
  color: #475569;
  margin-top: 0.55rem;
  text-align: center;
}

.hg-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hg-sidebar-card {
  background: #FFFFFF;
  color: #0F172A;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--hg-r-md);
  padding: 1.4rem;
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] .hg-sidebar-card {
  background: #232526;
  color: #F8FAFC;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .hg-sidebar-card h2,
[data-theme="dark"] .hg-sidebar-card h3,
[data-theme="dark"] .hg-sidebar-card h4 {
  color: #FFFFFF;
}

[data-theme="dark"] .hg-sidebar-card p {
  color: #CBD5E1;
}

.hg-sidebar-card.is-dark {
  background: #0F172A;
  color: #F8FAFC;
  border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="dark"] .hg-sidebar-card.is-dark {
  background: #1B1C1D;
  border-color: rgba(0, 128, 64, 0.45);
}

.hg-sidebar-card.is-dark h3,
.hg-sidebar-card.is-dark h4 {
  color: #FFFFFF;
}

/* Filter Controls on Knowledge Base */
.hg-kb-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 2.25rem;
  text-align: center;
}

.hg-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
}

.hg-filter-tab {
  background: #FFFFFF;
  color: #334155;
  border: 1px solid rgba(15, 23, 42, 0.15);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.18s ease;
}

.hg-filter-tab.is-active {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

.hg-search-input {
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  border: 1px solid #767B84;
  background: #FFFFFF;
  color: #0F172A;
  font-size: 0.92rem;
  min-width: 260px;
}

.hg-search-input::placeholder {
  color: #5F646D;
  opacity: 1;
}

/* Footer */
.hg-footer {
  background: #050911;
  color: #94A3B8;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 4.5rem 0 2.5rem;
}

.hg-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.25rem;
  margin-bottom: 3rem;
}

.hg-footer h4 {
  color: #FFFFFF;
  font-size: 0.96rem;
  margin-bottom: 1rem;
}

.hg-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.88rem;
}

.hg-footer a:hover {
  color: #FFFFFF;
}

.hg-footer-bottom {
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
}

/* ==========================================================================
   Mobile Art Direction & Responsive Breakpoints (hero-depth.md §5)
   ========================================================================== */
@media (max-width: 1024px) {
  .hg-hero-grid,
  .hg-peak-layout,
  .hg-pillars-layout,
  .hg-diagnostic-grid,
  .hg-contact-grid,
  .hg-article-shell {
    grid-template-columns: 1fr;
  }

  .hg-pillars-sticky,
  .hg-sidebar {
    position: static;
  }

  .hg-trustbar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hg-video-grid,
  .hg-included-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hg-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .hg-menu-toggle {
    display: inline-flex;
  }

  .hg-header-ctas {
    display: none;
  }

  .hg-brand-sub {
    display: none;
  }

  .hg-topbar-status {
    display: none;
  }

  .hg-topbar-links {
    width: 100%;
    justify-content: space-between;
    font-size: 0.76rem;
    gap: 0.5rem;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .hg-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0B1220;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding: 1rem;
    flex-direction: column;
    align-items: stretch;
  }

  .hg-nav.is-open {
    display: flex;
  }

  .hg-nav-dropdown-menu {
    position: static;
    width: 100%;
    display: flex;
    box-shadow: none;
    margin-top: 0.35rem;
  }

  /* Separate Mobile Hero Composition */
  .hg-hero {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }

  .hg-hero-guarantees,
  .hg-pricing-grid,
  .hg-cluster-grid,
  .hg-article-grid,
  .hg-forensic-grid,
  .hg-pain-grid {
    grid-template-columns: 1fr;
  }

  .hg-hero-stage {
    min-height: auto;
    flex-direction: column;
  }

  .hg-hero-float-chip {
    position: static;
    margin-bottom: 0.75rem;
    align-self: flex-start;
  }

  .hg-trustbar-grid,
  .hg-video-grid,
  .hg-included-matrix,
  .hg-footer-grid {
    grid-template-columns: 1fr;
  }

  .hg-pillar-row {
    grid-template-columns: 1fr;
    padding: 1.35rem;
  }
}

/* ==========================================================================
   Theme Toggle & Light Theme Design System Overrides
   ========================================================================== */
.hg-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #E2E8F0;
  font-family: var(--sc-font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s ease;
  user-select: none;
}

.hg-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}

.hg-theme-toggle .hg-theme-icon {
  font-size: 0.95rem;
  line-height: 1;
  display: inline-block;
}


/* ==========================================================================
   VERSION 2: HACKREPAIR.COM SIGNATURE COLOR PALETTE + COLOR SCIENCE
   --------------------------------------------------------------------------
   Palette DNA extracted from https://hackrepair.com/ & refined with OKLCH
   perceptual color science for WCAG AA/AAA contrast and visual warmth:
   - Signature HackRepair Orange: #F4931E (banners/fills) · #AD5000 (AA text)
   - Signature Forest Kelly Green: #008040 (primary brand green, 5.14:1 on #FFF)
   - Signature Heart Crimson Red: #C81E1E (emblem & alert emphasis)
   - Signature Trust Cobalt Blue: #1554C0 (callout pill & action links, 7.1:1)
   - Warm Charcoal Ink & Footer: #231F20 (headings) · #333333 (body) · #2E3030 (footer)
   - 4 Multi-Pastel Callout Surfaces (Sky #EDF6FC, Sage #EEF8E4, Blush #FDF1F1, Buttercream #FEFBE6)
   ========================================================================== */

:root {
  --hr-orange-500: #F4931E;
  --hr-orange-600: #DF7B08;
  --hr-orange-700: #AD5000;
  --hr-orange-800: #9A4800;
  --hr-green-500: #10984E;
  --hr-green-600: #008040;
  --hr-green-700: #006834;
  --hr-green-800: #054A26;
  --hr-blue-600: #1554C0;
  --hr-red-600: #C81E1E;
  --hr-charcoal-900: #231F20;
  --hr-charcoal-800: #2E3030;
  --hr-charcoal-700: #333333;
  --hr-stone-600: #57534E;
}

/* Smooth cross-fade when toggling themes */
@media (prefers-reduced-motion: no-preference) {
  html.hg-theme-anim, html.hg-theme-anim * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
  }
}

/* --------------------------------------------------------------------------
   1. LIGHT THEME (Default — Authentic HackRepair.com Bright & Warm Palette)
   -------------------------------------------------------------------------- */
html[data-theme="light"] {
  --sc-canvas: #FFFFFF;
  --sc-surface: #FFFFFF;
  --sc-ink: #231F20;
  --sc-ink-soft: #4A4744;
  --sc-accent: #008040;
  --sc-accent-ink: #FFFFFF;
  --hg-amber: #F4931E;
  --hg-amber-bright: #AD5000;
  --hg-amber-ink: #1F1100;
  --hg-danger: #C81E1E;
  --hg-blue: #1554C0;
  --hg-border-dark: rgba(35, 31, 32, 0.12);
  --hg-border-light: rgba(35, 31, 32, 0.11);
  color-scheme: light;
}

/* Section Grounds in Light Mode */
[data-theme="light"] .hg-ground-ivory {
  --sc-canvas: #FAF8F3;
  --sc-surface: #FFFFFF;
  --sc-ink: #231F20;
  --sc-ink-soft: #4A4744;
  --sc-accent: #008040;
  background-color: var(--sc-canvas);
  color: var(--sc-ink);
}

[data-theme="light"] .hg-ground-slate {
  --sc-canvas: #F5F7F4;
  --sc-surface: #FFFFFF;
  --sc-ink: #231F20;
  --sc-ink-soft: #4A4744;
  --sc-accent: #008040;
  background-color: var(--sc-canvas);
  color: var(--sc-ink);
  border-top: 1px solid #E4E8E1;
  border-bottom: 1px solid #E4E8E1;
}

[data-theme="light"] .hg-ground-deep {
  --sc-canvas: #FDFCF7;
  --sc-surface: #FFFFFF;
  --sc-ink: #231F20;
  --sc-ink-soft: #4A4744;
  --sc-accent: #008040;
  background-color: var(--sc-canvas);
  color: var(--sc-ink);
  border-top: 1px solid #EFEAD8;
  border-bottom: 1px solid #EFEAD8;
}

/* Signature HackRepair Orange Final CTA Ribbon Banner (last section in main) */
[data-theme="light"] main > section.hg-ground-deep:last-of-type {
  background: linear-gradient(135deg, #E8820C 0%, #F4931E 50%, #D97206 100%) !important;
  color: #231F20 !important;
  border-top: 3px solid #AD5000;
  border-bottom: none;
}
[data-theme="light"] main > section.hg-ground-deep:last-of-type h2 {
  color: #231F20 !important;
}
[data-theme="light"] main > section.hg-ground-deep:last-of-type .hg-lead {
  color: #231F20 !important;
  font-weight: 500;
}
[data-theme="light"] main > section.hg-ground-deep:last-of-type .hg-lead strong {
  color: #231F20 !important;
  text-decoration: underline;
}
[data-theme="light"] main > section.hg-ground-deep:last-of-type .hg-eyebrow {
  background: rgba(255, 255, 255, 0.94);
  color: #006834 !important;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] main > section.hg-ground-deep:last-of-type .hg-btn-amber {
  background: #231F20 !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px -6px rgba(35, 31, 32, 0.45);
}
[data-theme="light"] main > section.hg-ground-deep:last-of-type .hg-btn-amber:hover {
  background: #111111 !important;
}

/* Eyebrow & Buttons */
[data-theme="light"] .hg-eyebrow {
  color: #007339;
}
[data-theme="light"] .hg-eyebrow-dot {
  background: #008040;
  box-shadow: 0 0 10px rgba(0, 128, 64, 0.55);
}

.hg-btn-amber {
  background: linear-gradient(180deg, #F79D2B 0%, #EA840E 100%);
  color: #1F1100;
  box-shadow: 0 10px 24px -6px rgba(244, 147, 30, 0.45);
}
.hg-btn-amber:hover {
  background: linear-gradient(180deg, #FAAB42 0%, #F4931E 100%);
}

.hg-btn-emerald {
  background: linear-gradient(180deg, #0A7F40 0%, #006834 100%);
  color: #FFFFFF;
  box-shadow: 0 10px 24px -6px rgba(0, 128, 64, 0.38);
}

[data-theme="light"] main .hg-btn-ghost,
[data-theme="light"] .hg-header .hg-btn-ghost {
  background: #FFFFFF;
  color: #231F20;
  border-color: #CFCBC4;
}
[data-theme="light"] main .hg-btn-ghost:hover,
[data-theme="light"] .hg-header .hg-btn-ghost:hover {
  background: #FFF8EE;
  border-color: #DF7B08;
  color: #9A4800;
}
[data-theme="light"] .hg-sidebar-card.is-dark .hg-btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.24);
}

/* --------------------------------------------------------------------------
   2. Signature HackRepair.com Orange Top Announcement Bar + White Pill
   -------------------------------------------------------------------------- */
[data-theme="light"] .hg-topbar {
  background: linear-gradient(90deg, #E5810D 0%, #F4931E 50%, #E5810D 100%);
  border-bottom: 1px solid #CC6D00;
  color: #231F20;
  padding: 0.42rem 0;
}

[data-theme="light"] .hg-topbar-status {
  background: #FFFFFF;
  color: #1554C0;
  padding: 0.22rem 0.85rem;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(35, 31, 32, 0.14);
}

[data-theme="light"] .hg-topbar-status .hg-pulse-dot {
  background: #008040;
}

[data-theme="light"] .hg-topbar-links a {
  color: #231F20;
  font-weight: 600;
}

[data-theme="light"] .hg-topbar-links a:hover {
  color: #231F20;
  text-decoration: underline;
}

[data-theme="light"] .hg-topbar-phone {
  background: #FFFFFF !important;
  color: #B85200 !important;
  padding: 0.2rem 0.78rem;
  border-radius: 999px;
  text-shadow: none !important;
  box-shadow: 0 2px 6px rgba(35, 31, 32, 0.14);
}

[data-theme="light"] .hg-topbar-phone:hover {
  color: #1554C0 !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   3. Sticky Header & Pulsing Heart Brand Identity
   -------------------------------------------------------------------------- */
[data-theme="light"] .hg-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #E5E0D8;
  box-shadow: 0 4px 16px -6px rgba(35, 31, 32, 0.06);
}
[data-theme="light"] .hg-header .hg-brand-mark {
  background: transparent;
  border: none;
}
[data-theme="light"] .hg-header .hg-brand-name {
  color: #231F20;
}
[data-theme="light"] .hg-header .hg-brand-name span {
  color: #008040;
}
[data-theme="light"] .hg-header .hg-brand-sub {
  color: #AD5000;
  font-weight: 600;
}
[data-theme="light"] .hg-nav-link {
  color: #333333;
  font-weight: 600;
}
[data-theme="light"] .hg-nav-link:hover,
[data-theme="light"] .hg-nav-link[aria-current="page"] {
  background: #FFF6E9;
  color: #B85200;
}
[data-theme="light"] .hg-nav-dropdown-menu {
  background: #FFFFFF;
  border-color: #E2DDD5;
  box-shadow: 0 18px 40px -12px rgba(35, 31, 32, 0.16);
}
[data-theme="light"] .hg-nav-dropdown-item {
  border-bottom-color: #F3EFEA;
}
[data-theme="light"] .hg-nav-dropdown-item:hover {
  background: #FFF8EE;
}
[data-theme="light"] .hg-nav-dropdown-title {
  color: #AD5000;
}
[data-theme="light"] .hg-nav-dropdown-desc {
  color: #57534E;
}
[data-theme="light"] .hg-menu-toggle {
  background: #FFF8EE;
  color: #231F20;
  border-color: #E6C8A3;
}

/* --------------------------------------------------------------------------
   4. Hero Section (Warm Alabaster, Forest Green & HackRepair Orange)
   -------------------------------------------------------------------------- */
[data-theme="light"] .hg-hero {
  background:
    radial-gradient(circle at 16% 22%, rgba(0, 128, 64, 0.08), transparent 44%),
    radial-gradient(circle at 84% 26%, rgba(244, 147, 30, 0.12), transparent 46%),
    linear-gradient(180deg, #FFFFFF 0%, #FAF7F0 100%);
  border-bottom: 1px solid #EAE4D8;
}
[data-theme="light"] .hg-hero-bg-grid {
  background-image:
    linear-gradient(to right, rgba(35, 31, 32, 0.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(35, 31, 32, 0.038) 1px, transparent 1px);
}
[data-theme="light"] .hg-hero-title {
  color: #231F20;
}
[data-theme="light"] .hg-hero-title-accent {
  background-image: linear-gradient(92deg, #008040 0%, #1554C0 48%, #D96B00 100%);
}
[data-theme="light"] .hg-hero-lead {
  color: #3D3A37;
}
[data-theme="light"] .hg-hero-lead strong {
  color: #006834;
}
[data-theme="light"] .hg-hero-guarantee-item {
  color: #333333;
}
[data-theme="light"] .hg-pill-trust {
  background: #EBF8EE;
  border-color: #9AD9AC;
  color: #006834;
}
[data-theme="light"] .hg-pill-review {
  background: #FFF6E5;
  border-color: #F6C87A;
  color: #9A4800;
}
[data-theme="light"] .hg-hero-console {
  background: #FFFFFF;
  border: 1px solid #DFD9CE;
  box-shadow: 0 24px 52px -16px rgba(35, 31, 32, 0.14);
}
[data-theme="light"] .hg-console-header {
  border-bottom-color: #F0ECE3;
}
[data-theme="light"] .hg-console-tag {
  color: #006834;
  background: #EBF8EE;
}
[data-theme="light"] .hg-console-row:nth-child(1) {
  background: #EDF6FC;
  border-color: #B4D5ED;
}
[data-theme="light"] .hg-console-row:nth-child(2) {
  background: #EEF8E4;
  border-color: #B5D99C;
}
[data-theme="light"] .hg-console-row:nth-child(3) {
  background: #FEFBE6;
  border-color: #EFE096;
}
[data-theme="light"] .hg-console-row:nth-child(4) {
  background: #FDF1F1;
  border-color: #ECC0C0;
}
[data-theme="light"] .hg-console-row-label {
  color: #231F20;
}
[data-theme="light"] .hg-console-row-status {
  color: #006834;
}
[data-theme="light"] .hg-hero-founder-card {
  background: #FFFDF7;
  border: 2px solid #F4931E;
  box-shadow: 0 18px 40px -14px rgba(35, 31, 32, 0.15);
}
[data-theme="light"] .hg-hero-founder-meta h3 {
  color: #008040;
}
[data-theme="light"] .hg-hero-founder-meta p {
  color: #3D3A37;
}
[data-theme="light"] .hg-hero-founder-phone {
  color: #AD5000;
}
[data-theme="light"] .hg-hero-float-chip {
  background: #008040;
  border-color: #A3E6BE;
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   5. Trust Bar & Pinned Peak Act ("The Clean Scan Trap")
   -------------------------------------------------------------------------- */
[data-theme="light"] .hg-trustbar {
  background: #FFFFFF;
  border-top: 1px solid #EAE4D8;
  border-bottom: 2px solid #F4931E;
  padding: 2.75rem 0 3.5rem;
}
[data-theme="light"] .hg-trust-metric {
  border-left-color: #008040;
}
[data-theme="light"] .hg-trust-metric-val {
  color: #231F20;
}
[data-theme="light"] .hg-trust-metric-val span {
  color: #AD5000;
}
[data-theme="light"] .hg-trust-metric-label {
  color: #57534E;
}

[data-theme="light"] .hg-peak-pin {
  --sc-ink: #231F20;
  --sc-ink-soft: #4A4744;
  --sc-accent: #008040;
  background:
    radial-gradient(circle at 75% 30%, rgba(0, 128, 64, 0.07), transparent 45%),
    radial-gradient(circle at 25% 70%, rgba(244, 147, 30, 0.09), transparent 45%),
    #F7F5EE;
  border-bottom: 1px solid #E5DFD2;
  color: #231F20;
}
[data-theme="light"] .hg-peak-step {
  background: #FFFFFF;
  border-color: #E2DDD2;
}
[data-theme="light"] .hg-peak-step.is-active {
  background: #FFFDF7;
  border-color: #008040;
  box-shadow: 0 14px 28px -12px rgba(0, 128, 64, 0.2);
}
[data-theme="light"] .hg-peak-step-title {
  color: #AD5000;
}
[data-theme="light"] .hg-peak-step.is-active .hg-peak-step-title {
  color: #006834;
}
[data-theme="light"] .hg-peak-step-tag {
  background: #F4F1EA;
  color: #4A4744;
}
[data-theme="light"] .hg-peak-step p {
  color: #57534E;
}
[data-theme="light"] .hg-peak-step.is-active p {
  color: #231F20;
}
[data-theme="light"] .hg-forensic-window {
  background: #FFFFFF;
  border-color: #D6D0C4;
  box-shadow: 0 28px 60px -18px rgba(35, 31, 32, 0.18);
}
[data-theme="light"] .hg-forensic-topbar {
  background: #2E3030;
  border-bottom-color: #231F20;
  color: #F7F5F0;
}
[data-theme="light"] .hg-forensic-progress-track {
  background: #E5E0D5;
}
[data-theme="light"] .hg-forensic-progress-bar {
  background: linear-gradient(90deg, #F4931E, #C81E1E, #008040);
}
[data-theme="light"] .hg-forensic-banner[data-state="plugin"] {
  background: #FEFBE6;
  border-color: #EED47B;
  color: #8A4B00;
}
[data-theme="light"] .hg-forensic-banner[data-state="exposed"] {
  background: #FDF1F1;
  border-color: #EBAFAF;
  color: #9B1C24;
}
[data-theme="light"] .hg-forensic-banner[data-state="hardening"] {
  background: #EDF6FC;
  border-color: #A3CCE9;
  color: #0B4F8A;
}
[data-theme="light"] .hg-forensic-banner[data-state="secured"] {
  background: #EEF8E4;
  border-color: #A7D18C;
  color: #146128;
}
[data-theme="light"] .hg-forensic-card {
  background: #FAF8F3;
  border-color: #E2DDD2;
}
[data-theme="light"] .hg-forensic-file {
  color: #1554C0;
}
[data-theme="light"] .hg-forensic-badge.is-warn {
  background: #F9DBDB;
  color: #9B1C24;
}
[data-theme="light"] .hg-forensic-badge.is-safe {
  background: #D9EDC2;
  color: #146128;
}
[data-theme="light"] .hg-forensic-card h4 {
  color: #231F20;
}
[data-theme="light"] .hg-forensic-card p {
  color: #4A4744;
}
[data-theme="light"] .hg-forensic-footer {
  border-top-color: #E5E0D5;
  color: #333333;
}

/* --------------------------------------------------------------------------
   6. Act 4: Signature HackRepair.com 4-Pastel Callout Cards (Sky, Sage, Blush, Gold)
   -------------------------------------------------------------------------- */
[data-theme="light"] .hg-pillars-ledger .hg-pillar-row:nth-child(1) {
  background: #EDF6FC;
  border: 1px solid #A5CDE8;
}
[data-theme="light"] .hg-pillars-ledger .hg-pillar-row:nth-child(1) .hg-pillar-icon {
  background: #1554C0;
  border-color: #93C5FD;
}
[data-theme="light"] .hg-pillars-ledger .hg-pillar-row:nth-child(1) .hg-pillar-tag {
  color: #0C4A8A;
}

[data-theme="light"] .hg-pillars-ledger .hg-pillar-row:nth-child(2) {
  background: #EEF8E4;
  border: 1px solid #A8D08D;
}
[data-theme="light"] .hg-pillars-ledger .hg-pillar-row:nth-child(2) .hg-pillar-icon {
  background: #008040;
  border-color: #86EFAC;
}
[data-theme="light"] .hg-pillars-ledger .hg-pillar-row:nth-child(2) .hg-pillar-tag {
  color: #146128;
}

[data-theme="light"] .hg-pillars-ledger .hg-pillar-row:nth-child(3) {
  background: #FDF1F1;
  border: 1px solid #E9B3B3;
}
[data-theme="light"] .hg-pillars-ledger .hg-pillar-row:nth-child(3) .hg-pillar-icon {
  background: #C81E1E;
  border-color: #FCA5A5;
}
[data-theme="light"] .hg-pillars-ledger .hg-pillar-row:nth-child(3) .hg-pillar-tag {
  color: #9B1C24;
}

[data-theme="light"] .hg-pillars-ledger .hg-pillar-row:nth-child(4) {
  background: #FEFCE6;
  border: 1px solid #EED67E;
}
[data-theme="light"] .hg-pillars-ledger .hg-pillar-row:nth-child(4) .hg-pillar-icon {
  background: #D97208;
  border-color: #FDE047;
}
[data-theme="light"] .hg-pillars-ledger .hg-pillar-row:nth-child(4) .hg-pillar-tag {
  color: #8A4B00;
}

[data-theme="light"] .hg-pillar-row h3 {
  color: #231F20;
}
[data-theme="light"] .hg-pillar-row p {
  color: #333333;
}
[data-theme="light"] .hg-pillar-checks li {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(35, 31, 32, 0.1);
  color: #231F20;
}

/* --------------------------------------------------------------------------
   7. Rate Diagnostic, Comparison Table, Video Stories & Pricing Cards
   -------------------------------------------------------------------------- */
[data-theme="light"] .hg-diagnostic-shell {
  background: #FFFFFF;
  border: 2px solid #008040;
  box-shadow: 0 26px 60px -22px rgba(35, 31, 32, 0.16);
}
[data-theme="light"] .hg-diag-label {
  color: #231F20;
}
[data-theme="light"] .hg-role-toggle {
  background: #F4F1EA;
  border-color: #DFD9CE;
}
[data-theme="light"] .hg-role-btn {
  color: #4A4744;
}
[data-theme="light"] .hg-role-btn.is-active {
  background: #008040;
  color: #FFFFFF;
}
[data-theme="light"] .hg-range-wrap {
  background: #FAF8F3;
  border-color: #E2DDD2;
}
[data-theme="light"] .hg-range-ticks {
  color: #57534E;
}
[data-theme="light"] .hg-pain-chip {
  background: #FAF8F3;
  border-color: #D6D0C4;
  color: #333333;
}
[data-theme="light"] .hg-pain-chip.is-selected {
  background: #EEF8E4;
  border-color: #008040;
  color: #054A26;
}
[data-theme="light"] .hg-pain-check {
  border-color: #9C968E;
}
[data-theme="light"] .hg-pain-chip.is-selected .hg-pain-check {
  background: #008040;
  border-color: #008040;
  color: #FFFFFF;
}
[data-theme="light"] .hg-diag-output {
  background: #FEFCE6;
  border: 2px solid #F4931E;
}
[data-theme="light"] .hg-diag-plan-badge {
  background: #F4931E;
  color: #1F1100;
}
[data-theme="light"] .hg-diag-price-main {
  color: #231F20;
}
[data-theme="light"] .hg-diag-price-unit {
  color: #57534E;
}
[data-theme="light"] .hg-diag-daily {
  color: #006834;
}
[data-theme="light"] .hg-diag-savings-box {
  background: #EEF8E4;
  border-color: #A8D08D;
  color: #146128;
}
[data-theme="light"] .hg-diag-checklist-title {
  color: #57534E;
}
[data-theme="light"] .hg-diag-checklist li {
  color: #333333;
}
[data-theme="light"] .hg-diag-checklist li::before,
[data-theme="light"] .hg-price-list li::before {
  color: #008040;
}

/* Comparison Table in HackRepair Palette */
[data-theme="light"] .hg-compare-table thead th {
  background: #2E3030;
  color: #FFFFFF;
}
[data-theme="light"] .hg-compare-table thead th.is-hg-col {
  background: #008040;
  color: #FFFFFF;
}
[data-theme="light"] .hg-compare-table tbody td.is-hg-col {
  background: #EEF8E4;
  color: #054A26;
}

/* Video Story Cards (with HackRepair Orange Titles like hackrepair.com service cards) */
[data-theme="light"] .hg-video-card {
  background: #FFFFFF;
  border: 1px solid #E0DCD3;
  box-shadow: 0 8px 22px -10px rgba(35, 31, 32, 0.12);
}
[data-theme="light"] .hg-video-card:hover {
  border-color: #F4931E;
}
[data-theme="light"] .hg-video-card-body h3 {
  color: #AD5000;
}
[data-theme="light"] .hg-video-card-body p {
  color: #3D3A37;
}

/* Pricing Cards & Matrix Columns */
[data-theme="light"] .hg-price-card {
  background: #FFFFFF;
  border: 1px solid #DFD9CE;
  box-shadow: 0 14px 34px -14px rgba(35, 31, 32, 0.12);
}
[data-theme="light"] .hg-price-card.is-featured {
  background: linear-gradient(160deg, #FFFDF5 0%, #FFFFFF 60%);
  border: 2px solid #F4931E;
  box-shadow: 0 22px 48px -16px rgba(244, 147, 30, 0.26);
}
[data-theme="light"] .hg-price-amount {
  color: #231F20;
}
[data-theme="light"] .hg-price-amount span {
  color: #57534E;
}
[data-theme="light"] .hg-price-list li {
  color: #333333;
}
[data-theme="light"] .hg-matrix-col {
  background: #FFFFFF;
  border: 1px solid #E0DCD3;
  box-shadow: 0 6px 18px -8px rgba(35, 31, 32, 0.08);
}
[data-theme="light"] .hg-matrix-col h4 {
  color: #AD5000 !important;
}
[data-theme="light"] .hg-matrix-col ul {
  color: #333333;
}

/* Knowledge Base, Cluster Cards & Articles */
[data-theme="light"] .hg-cluster-card {
  background: #FFFFFF;
  border: 1px solid #E0DCD3;
  box-shadow: 0 8px 22px -10px rgba(35, 31, 32, 0.1);
}
[data-theme="light"] .hg-cluster-card h3 {
  color: #AD5000;
}
[data-theme="light"] .hg-article-card h3 {
  color: #231F20;
}
[data-theme="light"] .hg-article-card:hover h3 {
  color: #008040;
}
[data-theme="light"] .hg-breadcrumbs {
  color: #57534E;
}
[data-theme="light"] .hg-breadcrumbs a {
  color: #006834;
  font-weight: 600;
}
[data-theme="light"] .hg-bluf-box {
  background: #EEF8E4;
  border-color: #008040;
  color: #144923;
}
[data-theme="light"] .hg-bluf-label {
  color: #006834;
}
[data-theme="light"] .hg-prose a {
  color: #1554C0;
}
[data-theme="light"] .hg-prose a:hover {
  color: #AD5000;
}
[data-theme="light"] .hg-sidebar-card.is-dark {
  background: #2E3030;
  border-color: #F4931E;
}
[data-theme="light"] .hg-filter-tab.is-active {
  background: #008040;
  border-color: #008040;
  color: #FFFFFF;
}

/* Inline-styled light-on-dark copy inside main (skip intentional dark cards, forensic topbar, and final orange banner) */
[data-theme="light"] .hg-forensic-topbar [data-forensic-stage-label] {
  color: #E7E5E0 !important;
}
[data-theme="light"] main [style*="color: #E2E8F0"]:not(.is-dark *):not(pre *):not(.hg-forensic-topbar *):not(section.hg-ground-deep:last-of-type *),
[data-theme="light"] main [style*="color: #CBD5E1"]:not(.is-dark *):not(pre *):not(.hg-forensic-topbar *):not(section.hg-ground-deep:last-of-type *) {
  color: #333333 !important;
}
[data-theme="light"] main [style*="color: #94A3B8"]:not(.is-dark *):not(.hg-forensic-topbar *):not(section.hg-ground-deep:last-of-type *) {
  color: #57534E !important;
}
[data-theme="light"] main [style*="color: #6EE7B7"]:not(.is-dark *):not(.hg-forensic-topbar *):not(section.hg-ground-deep:last-of-type *),
[data-theme="light"] main [style*="color: #34D399"]:not(.is-dark *):not(.hg-forensic-topbar *):not(section.hg-ground-deep:last-of-type *),
[data-theme="light"] main [style*="color: #047857"]:not(.is-dark *):not(.hg-forensic-topbar *):not(section.hg-ground-deep:last-of-type *) {
  color: #006834 !important;
}
[data-theme="light"] main [style*="color: #FBBF24"]:not(.is-dark *):not(.hg-forensic-topbar *):not(section.hg-ground-deep:last-of-type *),
[data-theme="light"] main [style*="color: #FCD34D"]:not(.is-dark *):not(.hg-forensic-topbar *):not(section.hg-ground-deep:last-of-type *) {
  color: #AD5000 !important;
}
[data-theme="light"] main [style*="color: #FFFFFF"]:not(.is-dark *):not(.hg-btn):not(.hg-btn *):not(.hg-forensic-topbar *):not(section.hg-ground-deep:last-of-type *),
[data-theme="light"] main [style*="color: #F8FAFC"]:not(.is-dark *):not(.hg-btn):not(.hg-btn *):not(.hg-forensic-topbar *):not(section.hg-ground-deep:last-of-type *) {
  color: #231F20 !important;
}

/* --------------------------------------------------------------------------
   8. Grounded Warm Charcoal Footer (Exact hackrepair.com #333434 / #2E3030)
   -------------------------------------------------------------------------- */
.hg-footer {
  background: #2E3030;
  color: #D6D3CD;
  border-top: 4px solid #F4931E;
}
.hg-footer .hg-brand-name {
  color: #FFFFFF;
}
.hg-footer .hg-brand-name span {
  color: #4ADE80;
}
.hg-footer .hg-brand-sub {
  color: #F4931E;
}
.hg-footer h4 {
  color: #F4931E;
}
.hg-footer a {
  color: #E7E5E0;
}
.hg-footer a:hover {
  color: #F4931E;
}
.hg-footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.14);
  color: #C7C3BC;
}

/* --------------------------------------------------------------------------
   9. WARM CHARCOAL DARK MODE (html[data-theme="dark"] in Version 2)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --sc-canvas: #1B1C1D;
  --sc-surface: #262829;
  --sc-ink: #F7F5F0;
  --sc-ink-soft: #C7C3BC;
  --sc-accent: #22C55E;
  --sc-accent-ink: #052E16;
  --hg-amber: #F4931E;
  --hg-amber-bright: #FBBF24;
  --hg-amber-ink: #1F1100;
  color-scheme: dark;
}

[data-theme="dark"] .hg-topbar {
  background: linear-gradient(90deg, #E5810D 0%, #F4931E 50%, #E5810D 100%);
  color: #231F20;
}
[data-theme="dark"] .hg-topbar-links a {
  color: #231F20;
}
[data-theme="dark"] .hg-topbar-links a:hover {
  text-decoration: underline;
}
[data-theme="dark"] .hg-topbar-phone {
  background: #1B1C1D !important;
  color: #FBBF24 !important;
  padding: 0.2rem 0.78rem;
  border-radius: 999px;
}
[data-theme="dark"] .hg-header {
  background: rgba(27, 28, 29, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .hg-hero {
  background:
    radial-gradient(circle at 18% 22%, rgba(0, 128, 64, 0.18), transparent 42%),
    radial-gradient(circle at 82% 28%, rgba(244, 147, 30, 0.16), transparent 45%),
    linear-gradient(180deg, #161718 0%, #1B1C1D 100%);
}
[data-theme="dark"] .hg-trustbar {
  background: #232526;
  border-bottom: 2px solid #F4931E;
  padding: 2.75rem 0 3.5rem;
}
[data-theme="dark"] .hg-peak-pin {
  background:
    radial-gradient(circle at 75% 30%, rgba(0, 128, 64, 0.14), transparent 45%),
    radial-gradient(circle at 25% 70%, rgba(244, 147, 30, 0.12), transparent 45%),
    #18191A;
}
[data-theme="dark"] .hg-peak-step {
  background: rgba(46, 48, 48, 0.75);
}
[data-theme="dark"] .hg-peak-step.is-active {
  background: #2E3030;
}
[data-theme="dark"] .hg-forensic-window {
  background: #232526;
}
[data-theme="dark"] .hg-forensic-topbar {
  background: #161718;
}
[data-theme="dark"] .hg-forensic-card {
  background: #1B1C1D;
}
[data-theme="dark"] .hg-ground-slate {
  --sc-canvas: #202223;
  --sc-surface: #2B2D2E;
}
[data-theme="dark"] .hg-ground-deep {
  --sc-canvas: #161718;
  --sc-surface: #232526;
}
[data-theme="dark"] .hg-diagnostic-shell {
  background: linear-gradient(145deg, #282A2B 0%, #1D1E1F 100%);
  border-color: rgba(244, 147, 30, 0.45);
}
[data-theme="dark"] .hg-role-toggle,
[data-theme="dark"] .hg-range-wrap,
[data-theme="dark"] .hg-pain-chip,
[data-theme="dark"] .hg-diag-output {
  background: #161718;
}
[data-theme="dark"] .hg-video-card,
[data-theme="dark"] .hg-price-card,
[data-theme="dark"] .hg-cluster-card {
  background: #262829;
}
[data-theme="dark"] .hg-price-card.is-featured {
  background: linear-gradient(155deg, #322B22 0%, #242526 100%);
  border-color: #F4931E;
}
[data-theme="dark"] .hg-matrix-col {
  background: rgba(46, 48, 48, 0.75);
}

/* Mobile Nav Panel */
@media (max-width: 768px) {
  [data-theme="light"] .hg-nav {
    background: #FFFFFF;
    border-bottom-color: #E5E0D8;
    box-shadow: 0 14px 30px -10px rgba(35, 31, 32, 0.16);
  }
  [data-theme="dark"] .hg-nav {
    background: #1B1C1D;
  }
}

/* Phones: keep the orange top strip to a single row */
@media (max-width: 480px) {
  .hg-topbar { padding: 0.4rem 0; }
  .hg-tb-brand { display: none; }
  .hg-topbar-links { font-size: 0.72rem; }
  .hg-topbar-links .hg-topbar-phone { padding: 0.28rem 0.7rem; }
}

/* Very narrow phones: drop the review count so the phone number is never cut off */
@media (max-width: 360px) {
  .hg-tb-count { display: none; }
}
/* ==========================================================================
   Home page: pinned-scene "Next" button and hero "next section" arrow
   ========================================================================== */
.hg-peak-next-row { margin-top: 0.85rem; }
.hg-peak-next {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: #F8FAFC;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hg-peak-next:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); }
.hg-peak-next:active { transform: translateY(1px); }
.hg-peak-next:focus-visible,
.hg-hero-down:focus-visible {
  outline: 3px solid #F4931E;
  outline-offset: 3px;
}
[data-theme="light"] .hg-peak-next {
  background: #FFFFFF;
  border-color: #8A8478;
  color: #231F20;
}
[data-theme="light"] .hg-peak-next:hover { background: #F4F1EA; border-color: #006834; color: #006834; }

/* The scene is only pinned on desktop; below that every stage is already visible */
@media (max-width: 1024px) {
  .hg-peak-next-row { display: none; }
}
@media (min-width: 1025px) and (max-height: 780px) {
  .hg-peak-next-row { margin-top: 0.6rem; }
  .hg-peak-next { min-height: 36px; padding: 0.35rem 0.9rem; }
}

.hg-hero-down {
  position: absolute;
  left: 50%;
  /* sits at the bottom of the first screen on tall heroes, at the hero's own bottom on short ones */
  top: min(calc(100vh - 12rem), calc(100% - 3.5rem));
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #F8FAFC;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hg-hero-down:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.55); }
@media (max-width: 1024px) {
  /* stacked hero: park the arrow in the bottom padding instead */
  .hg-hero-down { top: auto; bottom: 0.75rem; }
}
[data-theme="light"] .hg-hero-down {
  background: #FFFFFF;
  border-color: #8A8478;
  color: #231F20;
}
[data-theme="light"] .hg-hero-down:hover { border-color: #006834; color: #006834; }
@media (prefers-reduced-motion: no-preference) {
  .hg-hero-down svg { animation: hg-down-nudge 2.4s ease-in-out infinite; }
}
@keyframes hg-down-nudge {
  0%, 70%, 100% { transform: translateY(0); }
  35% { transform: translateY(3px); }
}

/* ==========================================================================
   Contrast fixes (WCAG AA): dark theme cards on light ivory sections
   ========================================================================== */
[data-theme="dark"] .hg-ground-ivory .hg-cluster-card {
  background: #FFFFFF;
}
[data-theme="dark"] .hg-sidebar-card:not(.is-dark) [style*="color: #475569"] {
  color: #C7C3BC !important;
}
[data-theme="dark"] .hg-sidebar-card:not(.is-dark) [style*="color: #047857"] {
  color: #4ADE80 !important;
}

/* Short desktop windows: keep the hero arrow at the hero's own bottom so it never sits on the copy */
@media (min-width: 1025px) and (max-height: 759px) {
  .hg-hero-down { top: auto; bottom: 1rem; }
}
/* Very short desktop windows: slim the pinned scene's left column so the Next button stays on screen */
@media (min-width: 1025px) and (max-height: 680px) {
  .hg-peak-pin .hg-peak-layout > :first-child > p + p { display: none; }
  .hg-peak-stage { padding-block: 4.5rem 0.75rem; }
  .hg-peak-step { padding: 0.5rem 0.9rem; }
  .hg-peak-steps { margin-top: 0.6rem; gap: 0.35rem; }
  .hg-peak-next-row { margin-top: 0.45rem; }
  .hg-peak-next { min-height: 34px; padding: 0.25rem 0.85rem; }
}

/* ==========================================================================
   Tablet and small laptop widths (769 to 1239 px): the full nav plus the
   amber button does not fit in one row, so use the same Menu toggle as phones.
   Keeps the "Protect My Site" button visible next to the toggle.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1239px) {
  .hg-menu-toggle {
    display: inline-flex;
    order: 3;
  }

  .hg-header-ctas {
    order: 2;
    margin-left: auto;
  }

  .hg-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0B1220;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding: 1rem;
    flex-direction: column;
    align-items: stretch;
  }

  .hg-nav.is-open {
    display: flex;
  }

  .hg-nav-dropdown-menu {
    position: static;
    width: 100%;
    display: flex;
    box-shadow: none;
    margin-top: 0.35rem;
  }

  [data-theme="light"] .hg-nav {
    background: #FFFFFF;
    border-bottom-color: #E5E0D8;
    box-shadow: 0 14px 30px -10px rgba(35, 31, 32, 0.16);
  }
  [data-theme="dark"] .hg-nav {
    background: #1B1C1D;
  }
}

/* Orange top strip: centered on tablets and large phones (481 to 980 px), where the items either sit far apart or wrap to two rows.
   Phones (480 px and below) keep the edge-aligned row that lines up with the logo and Menu button. */
@media (min-width: 481px) and (max-width: 980px) {
  .hg-topbar-inner {
    justify-content: center;
  }
  .hg-topbar-links {
    justify-content: center;
    gap: 1.25rem;
  }
}

/* ==========================================================================
   Mobile touch comfort (2026-11-07): bigger tap areas, 16px form text,
   larger slider handle. Looks the same; only the touchable area grows.
   ========================================================================== */
.hg-search-input {
  font-size: 1rem; /* 16px stops iPhones zooming the page on focus */
}

.hg-range-input {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 34px;
  margin: 0;
}
.hg-range-input::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: #94A3B8;
}
.hg-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--hg-amber);
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(2, 6, 23, 0.5);
}
.hg-range-input::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: #94A3B8;
}
.hg-range-input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hg-amber);
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(2, 6, 23, 0.5);
}
.hg-range-input:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 4px;
}

@media (max-width: 768px) {
  .hg-topbar-links { font-size: 0.78rem; }
  .hg-topbar-links a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }

  .hg-breadcrumbs a {
    display: inline-block;
    padding: 0.55rem 0;
  }

  .hg-footer-bottom a {
    display: inline-block;
    padding: 0.6rem 0;
  }
  .hg-theme-toggle { min-height: 40px; }

  /* Phone and email links that stand alone in a line, cell or box */
  :is(span, td, div) > a[href^="tel:"],
  :is(span, td, div) > a[href^="mailto:"],
  .hg-hero-founder-phone {
    display: inline-block;
    padding-block: 0.65rem;
  }

  .hg-article-card > a,
  .hg-article-card div[style*="justify-content"] > a,
  .hg-cluster-card > a,
  .hg-cluster-card div > a[href*="articles/"],
  .hg-sidebar-card > a,
  .hg-forensic-footer a,
  .hg-video-ext-link {
    display: inline-block;
    padding-block: 0.65rem;
  }

  /* The dots between byline items look stray when the row wraps */
  .hg-dot { display: none; }
}

/* ==========================================================================
   Phone layouts (2026-11-07): stacked comparison table, shorter hero text,
   tap-to-open plan lists, and a slim "Call Jim" bar. Desktop is unchanged.
   ========================================================================== */
.hg-phone-only { display: none; }
.hg-callbar { display: none; }

@media (max-width: 768px) {
  .hg-full-only { display: none; }
  .hg-phone-only { display: inline; }

  /* Comparison table: one card per row instead of a sideways-scrolling grid */
  .hg-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .hg-compare-table,
  .hg-compare-table tbody,
  .hg-compare-table tr,
  .hg-compare-table td {
    display: block;
    width: 100%;
  }
  .hg-compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .hg-compare-table tbody tr {
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 14px;
    margin-bottom: 0.8rem;
    overflow: hidden;
    box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.25);
  }
  .hg-compare-table tbody td {
    padding: 0.55rem 0.9rem;
    font-size: 0.88rem;
    line-height: 1.4;
  }
  .hg-compare-table tbody tr td:not(:last-child) {
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  }
  .hg-compare-table tbody tr td:last-child {
    border-bottom: 0;
  }
  .hg-compare-table tbody td:first-child {
    background: #0F172A;
    color: #FFFFFF;
    font-family: var(--sc-font-display);
    font-weight: 700;
  }
  [data-theme="light"] .hg-compare-table tbody td:first-child {
    background: #2E3030;
  }
  .hg-compare-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: #475569;
  }
  .hg-compare-table tbody td.is-hg-col::before {
    color: #05603A;
  }

  /* "What every plan includes": tap a heading to open its list */
  .hg-matrix-col.is-acc {
    padding: 0.2rem 1.1rem;
  }
  .hg-matrix-col.is-acc h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 48px;
    margin-bottom: 0;
    cursor: pointer;
  }
  .hg-matrix-col.is-acc h4::after {
    content: "+";
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 500;
  }
  .hg-matrix-col.is-acc.is-open h4::after {
    content: "\2013";
  }
  .hg-matrix-col.is-acc.is-open {
    padding-bottom: 1rem;
  }
  .hg-matrix-col.is-acc:not(.is-open) ul {
    display: none;
  }
  .hg-matrix-col.is-acc h4:focus-visible {
    outline: 2px solid #059669;
    outline-offset: 2px;
    border-radius: 6px;
  }

  /* Slim call bar, left of the chat bubble */
  .hg-callbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: fixed;
    left: 12px;
    right: 84px;
    bottom: 12px;
    z-index: 60;
    min-height: 48px;
    padding: 0 1rem;
    border-radius: 999px;
    background: #F4931E;
    color: #1F1300;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 10px 24px -8px rgba(2, 6, 23, 0.55);
    transform: translateY(160%);
    transition: transform 0.25s ease;
  }
  .hg-callbar.is-visible {
    transform: none;
  }
  body.has-callbar {
    padding-bottom: 72px;
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .hg-callbar { transition: none; }
}

/* ==========================================================================
   Hero "real human": a very slow color drift (about 18 seconds each way).
   Off for visitors who ask their device for reduced motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hg-hero-title-accent {
    background-size: 150% 100%;
    background-position: 0% 50%;
    animation: hg-accent-drift 18s ease-in-out infinite alternate;
  }
}
@keyframes hg-accent-drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Impeccable review fixes (test copy) */
.hg-prose h2.hg-h3look{font-size:1.17em;padding-bottom:0;border-bottom:0}
[data-theme="dark"] .hg-sidebar-card .hg-eyebrow{color:#4ADE80}
[data-theme="dark"] .hg-sidebar-card a[style*="color: #0F172A"] { color: #E2E8F0 !important; }

/* ==== Utility classes (replace repeated inline styles) ==== */
/* Kept last so they win ties the way inline styles did. Styles that a theme rule matches by text stay inline. */
.hg-u-amber-label { color: #F59E0B !important; font-size: 0.95rem !important; margin-bottom: 0.45rem !important; }
.hg-u-author-card { margin-top: 2.5rem !important; padding: 1.5rem !important; background: #F8FAFC !important; border: 1px solid rgba(15,23,42,0.12) !important; border-radius: 14px !important; display: flex !important; gap: 1.15rem !important; align-items: flex-start !important; flex-wrap: wrap !important; }
.hg-u-card-name { margin-top: 0 !important; margin-bottom: 0.3rem !important; font-size: 1.1rem !important; }
.hg-u-center-round { margin-inline: auto !important; border-radius: 8px !important; }
.hg-u-figure-img { max-height: 360px !important; width: auto !important; margin-inline: auto !important; border-radius: 8px !important; }
.hg-u-flex-1-min220 { flex: 1 !important; min-width: 220px !important; }
.hg-u-fs-1-mb-075 { font-size: 1rem !important; margin-bottom: 0.75rem !important; }
.hg-u-fs-115-mb-035 { font-size: 1.15rem !important; margin-bottom: 0.35rem !important; }
.hg-u-fs-115-mb-05 { font-size: 1.15rem !important; margin-bottom: 0.5rem !important; }
.hg-u-h1-mb-1 { font-size: var(--sc-t-h1) !important; margin-bottom: 1rem !important; }
.hg-u-h1-narrow { font-size: var(--sc-t-h1) !important; max-width: 26ch !important; margin-bottom: 1rem !important; }
.hg-u-h2-mb-075 { font-size: var(--sc-t-h2) !important; margin-bottom: 0.75rem !important; }
.hg-u-inline-flex-center { display: inline-flex !important; align-items: center !important; }
.hg-u-inline-noshrink { flex-shrink: 0 !important; display: inline-block !important; }
.hg-u-link-plain-dark { text-decoration: none !important; color: #170F02 !important; }
.hg-u-mb-0 { margin-bottom: 0 !important; }
.hg-u-mb-035 { margin-bottom: 0.35rem !important; }
.hg-u-mb-04 { margin-bottom: 0.4rem !important; }
.hg-u-mb-1 { margin-bottom: 1rem !important; }
.hg-u-mb-35 { margin-bottom: 3.5rem !important; }
.hg-u-meta-text { margin-bottom: 0.65rem !important; font-size: 0.9rem !important; color: #334155 !important; }
.hg-u-mono-muted { font-family: var(--sc-font-mono) !important; font-size: 0.75rem !important; color: #64748B !important; }
.hg-u-mt-0 { margin-top: 0 !important; }
.hg-u-mt-1 { margin-top: 1rem !important; }
.hg-u-no-underline { text-decoration: none !important; }
.hg-u-note-box { background: #F8FAFC !important; border-left: 3px solid #059669 !important; padding: 0.65rem 0.85rem !important; font-size: 0.83rem !important; color: #334155 !important; margin-bottom: 1rem !important; }
.hg-u-pb-3 { padding-bottom: 3rem !important; }
.hg-u-plain-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 0.45rem !important; font-size: 0.86rem !important; }
.hg-u-plain-list-roomy { list-style: none !important; padding: 0 !important; margin: 0 0 0.85rem !important; display: flex !important; flex-direction: column !important; gap: 0.6rem !important; font-size: 0.86rem !important; }
.hg-u-ring-accent { border-radius: 50% !important; border: 2px solid var(--sc-accent) !important; }
.hg-u-ring-green-fixed { border-radius: 50% !important; border: 2px solid #059669 !important; flex-shrink: 0 !important; display: block !important; }
.hg-u-row-gap-075 { display: flex !important; gap: 0.75rem !important; flex-wrap: wrap !important; }
.hg-u-row-gap-125 { display: flex !important; gap: 1.25rem !important; flex-wrap: wrap !important; align-items: center !important; }
.hg-u-w-full { width: 100% !important; }
.hg-u-w-full-mb-05 { width: 100% !important; margin-bottom: 0.5rem !important; }