:root {
  /* Five-shade background system (EDIT THESE PER THEME) */
  --template-colors-1: #f9f9f9;                 /* page background */
  --template-colors-2: rgba(255,255,255,1);     /* main cards */
  --template-colors-3: rgba(29,29,29,0.025);        /* inner elements */
  --template-colors-toggle-bg: rgba(29,29,29,0.05);
  --template-colors-toggle-knob: rgba(255,255,255,1);
  --template-colors-text: rgba(29,29,29,1);
  --template-colors-text-muted: rgba(29,29,29,0.5);
  --template-colors-divider: color-mix(in srgb, var(--template-colors-text) 12%, transparent);
  --template-colors-on-strong: rgba(255,255,255,1);

  /* Control accents (higher contrast than divider) */
  --control-neutral: color-mix(in srgb, var(--template-colors-text) 35%, transparent);

  /* Brand + status */
  --primary: rgba(60,109,234,1);
  --primary-2: rgba(96,138,244,1);
  --success: rgba(56,177,133,1);
  --warning: rgba(255,149,0,1);
  --danger: rgba(234,72,66,1);
  --white: rgba(255,255,255,1);
  --black: rgba(0,0,0,1);
  /* Attention color (gold) */
  --attn-gold: rgba(255, 215, 120, 1);
  --attn-gold-soft: rgba(255, 215, 120, 0.35);

  /* Figma-inspired tokens (compat) */
  --text: var(--template-colors-text);
  --text-strong: #282828;
  --success-emerald: var(--success);
  --danger-tomato: var(--danger);
  --muted-bg: var(--template-colors-1);

  /* GAFAM toggle colors */
  --toggle-gafam-off: rgba(231,233,238,1); /* light silver */

  /* Spacing scale aligned with production */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-2xs: 0.375rem; /* 6px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-base: 0.75rem; /* 12px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */

  /* Font scale aligned with production */
  /* Font scale aligned with production (will scale with root 17px) */
  --font-base: 0.875rem;    /* 14px */
  --font-size-xs: 0.625rem; /* 10px */
  --font-size-sm: 0.75rem;  /* 12px */
  --font-size-md: 0.875rem; /* 14px */
  --font-size-lg: 1rem;     /* 16px (becomes 17px at root 17px) */
  --font-size-xl: 1.125rem; /* 18px */
  --font-size-2xl: 1.375rem;/* 22px */
  --font-size-3xl: 1.75rem; /* 28px */
  --font-size-4xl: 2.125rem;/* 34px */
  --font-size-primary: var(--font-size-2xl);
  --font-size-secondary: var(--font-size-md);
  --font-size-small: var(--font-size-sm);

  /* Responsive layout defaults */
  --container-max-w: 430px;         /* phone default */
  --chart-h: 6.875rem;              /* default chart height */
  --live-list-max-h: 24rem;         /* default live list height */

  /* Aliases used by production HTML */
  --color-primary: var(--primary);
  --color-success: var(--success);
  /* Ensure font vars resolve even without Next.js font loader */
  --font-segoe: "Segoe UI"; /* local webfont alias */
  --font-inter: "Inter";
  --font-family: var(--font-segoe), var(--font-inter), Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Favicon presentation (test: show colored icons) */
  --favicon-filter: none;
}

/* Theme: Dark */
:root.theme-dark {
  /* brand hues in dark */
  --primary: rgba(79,127,255,1);
  --primary-2: rgba(126,161,255,1);

  /* Five-shade + text in dark (overlay approach) */
  --template-colors-1: #1D1D1D;
  --template-colors-2: rgba(255,255,255,0.03);
  --template-colors-3: rgba(255,255,255,0.03);
  --template-colors-toggle-bg: rgba(255,255,255,0.12);
  --template-colors-toggle-knob: rgba(255,255,255,1);
  --template-colors-text: rgba(255,255,255,1);
  --template-colors-text-muted: rgba(255,255,255,0.4);
  --template-colors-divider: color-mix(in srgb, var(--template-colors-text) 16%, transparent);
  /* Stronger neutral fill for controls in dark mode */
  --control-neutral: color-mix(in srgb, var(--template-colors-text) 35%, transparent);
  /* alias aligned to current scheme */
  --muted-bg: var(--template-colors-1);

  /* Keep same favicon look across themes (test: no filter) */
  --favicon-filter: none;
}

/* Blue template removed */

/* Local font faces to mirror dashboard */
/* Map Segoe UI to bundled SegoePro binaries */
@font-face {
  font-family: "Segoe UI";
  src: url('/fonts/segoe/SegoePro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Segoe UI";
  src: url('/fonts/segoe/SegoePro-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body, #__next {
  max-width: 100vw;
  overflow-x: hidden;
  min-height: 100%;
  height: auto;
}

/* Allow default overscroll behavior on mobile to avoid blocking scroll */

/* Device tooltip parity (match protected/unprotected states) */
#cd-tip .card { border: 0.25px solid rgba(29,29,29,0.05) !important; }
.theme-dark #cd-tip .card { background: rgba(36, 36, 36, 1) !important; border-color: rgba(255,255,255,0.06) !important; }
#cd-tip .divider { height: 1px; width: 100%; background: rgba(29,29,29,0.12) !important; }
.theme-dark #cd-tip .divider { background: rgba(255,255,255,0.16) !important; }

/* Override Tailwind preflight default (line-height: 1.5) */
html, :host {
  line-height: normal;
}

body {
  color: var(--template-colors-text);
  background: var(--template-colors-1);
  font-family: var(--font-family);
  letter-spacing: -0.03em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Disable text selection in dashboard/app contexts only (not marketing pages) */
.cd-dashboard, .cd-dashboard *, .app-container, .app-container * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cd-dashboard input, .cd-dashboard textarea, .cd-dashboard select, .cd-dashboard button,
.cd-dashboard [contenteditable="true"], .cd-dashboard .allow-select,
.app-container input, .app-container textarea, .app-container select, .app-container button,
.app-container [contenteditable="true"], .app-container .allow-select {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Respect safe areas in standalone PWA to avoid overlaps with iOS home indicator */
@media (display-mode: standalone) {
  .app-container {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* Connectivity (offline) tokens */
:root {
  --connectivity: #7A5CFF; /* vivid violet (not blue/green/red/amber) */
  --connectivity-soft: color-mix(in srgb, var(--connectivity) 16%, transparent);
  --primary-soft: color-mix(in srgb, var(--primary) 10%, transparent);
  --success-soft: color-mix(in srgb, var(--success) 12%, transparent);
  --warning-soft: color-mix(in srgb, var(--warning) 12%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
}
:root.theme-dark {
  --connectivity: #A78BFA; /* lighter violet for dark backgrounds */
  --connectivity-soft: color-mix(in srgb, var(--connectivity) 28%, transparent);
}

/* Heartbeat animation for FAB icon (collapsed state) */
@keyframes cd-heartbeat {
  0% { transform: scale(1); }
  25% { transform: scale(1.06); }
  50% { transform: scale(1); }
  75% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Card Styles - Match dnscheck.cleardns.com exactly */
.card {
  background: var(--template-colors-2);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-top: var(--spacing-md);
  padding: var(--spacing-base);
}

.card-header {
  margin-bottom: var(--spacing-base);
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0;
}

.card-subtitle {
  font-size: var(--font-size-md);
  color: var(--template-colors-text-muted);
  margin: 0.125rem 0 0;
  line-height: 1.5;
}

.card-text {
  font-size: var(--font-size-md);
  color: var(--template-colors-text-muted);
  line-height: 1.625;
}

/* DNS Checker Styles - Extends card styles */
.dns-checker-section {
  margin-top: var(--spacing-md);
}

.dns-checker-card {
  background: var(--template-colors-2);
  border-radius: 0.75rem;
  overflow: hidden;
  padding: var(--spacing-base);
}

.dns-checker-header {
  margin-bottom: var(--spacing-base);
}

.dns-checker-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dns-checker-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0;
}

.dns-checker-subtitle {
  font-size: var(--font-size-md);
  color: var(--template-colors-text-muted);
  margin: 0.125rem 0 0;
  line-height: 1.5;
}

/* DNS Resolver Rows - Flat design with dividers */
.dns-resolver-list {
  display: flex;
  flex-direction: column;
}

.dns-resolver-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-base);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--template-colors-divider);
  animation: slideIn 0.3s ease;
}

.dns-resolver-row:last-child {
  border-bottom: none;
}

.dns-resolver-details {
  flex: 1;
  min-width: 0;
}

.dns-resolver-ip {
  font-size: var(--font-size-md);
  font-weight: 600;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
  margin: 0;
}

.dns-resolver-meta {
  font-size: var(--font-size-sm);
  color: var(--template-colors-text-muted);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dns-resolver-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.dns-resolver-flag {
  width: 1.25rem;
  flex-shrink: 0;
}

.dns-resolver-flag img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.dns-resolver-proto {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--template-colors-3);
  color: var(--template-colors-text-muted);
}

/* Status badges */
.dns-status-badge {
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: var(--spacing-xs) var(--spacing-base);
  border-radius: 9999px;
  white-space: nowrap;
}

.dns-status-badge.ok {
  background: var(--success-soft);
  color: var(--success);
}

.dns-status-badge.warn {
  background: var(--warning-soft);
  color: var(--warning);
}

.dns-status-badge.checking {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Empty state */
.dns-empty-state {
  padding: var(--spacing-lg) 0;
  text-align: center;
  color: var(--template-colors-text-muted);
  font-size: var(--font-size-md);
}

/* Progress bar */
.dns-progress-track {
  height: 3px;
  width: 100%;
  background: var(--template-colors-3);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--spacing-sm);
}

.dns-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.dns-progress-bar.done {
  background: var(--success);
}

.dns-progress-bar.leak {
  background: var(--warning);
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

/* Progress bar styling for cards */
.progress-track {
  height: 3px;
  width: 100%;
  background: var(--template-colors-3);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--spacing-sm);
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.progress-bar.done {
  background: var(--success);
}

.progress-bar.leak {
  background: var(--warning);
}

/* Badge styles */
.badge {
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: var(--spacing-xs) var(--spacing-base);
  border-radius: 9999px;
  white-space: nowrap;
}

.badge.ok {
  background: var(--success-soft);
  color: var(--success);
}

.badge.warn {
  background: var(--warning-soft);
  color: var(--warning);
}

/* IP/DNS Info Styles */
.ip-inner {
  background: var(--template-colors-3);
  border-radius: 0.5rem;
  padding: var(--spacing-base);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.ip-isp-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
}

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

.ip-isp {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ip-ptr {
  font-size: var(--font-size-sm);
  color: var(--primary);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flag styling to prevent cropping */
.ip-flag {
  position: relative;
  width: 1.25rem;
  height: auto;
  flex-shrink: 0;
}

.ip-flag img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
}

.dns-resolver-flag {
  width: 1.25rem;
  height: auto;
  flex-shrink: 0;
}

.dns-resolver-flag img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
}

/* DNS Privacy Check specific styles */
.dpc-ip-ptr {
  font-size: var(--font-size-sm);
  color: var(--primary);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dpc-ip-flag {
  width: 1.25rem;
  height: auto;
  flex-shrink: 0;
}

.dpc-ip-flag img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
}

/* Dissolving pulse behind FAB icon (collapsed) */
@keyframes cd-dissolve {
  0% { transform: scale(0.9); opacity: 0.35; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* Stronger double-pulse (matches CUSTOM button intensity but as filled circle) */
@keyframes cd-dissolve-strong {
  0% { transform: scale(0.85); opacity: 0.55; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* Connection indicator flash (outer ring) */
@keyframes connFlash {
  0% { box-shadow: 0 0 0 0 var(--conn-ring-color, currentColor); opacity: 0.9; }
  100% { box-shadow: 0 0 0 8px transparent; opacity: 0; }
}

.traffic-source-pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: cd-dissolve-strong 1.6s ease-out infinite;
}

/* Horizontal overflow marquee for chip rows */
.cd-marquee-active { animation-name: cd-marquee; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes cd-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--slide-px, 0px))); } }

/* Horizontal overflow marquee for chip rows (auto when content overflows) */
.cd-marquee-active {
  animation-name: cd-marquee;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes cd-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--slide-px, 0px))); }
}

/* Mobile landscape: tighten vertical space */
@media (orientation: landscape) and (max-width: 767px) {
  :root {
    --spacing-xl: 1.5rem;
    --spacing-lg: 1.25rem;
    --chart-h: 5.25rem;
    --live-list-max-h: 14rem;
  }
}

/* Footer: unify contact/address line rhythm */
#site-footer .cd-footer-line {
  font-size: var(--font-size-lg);
  line-height: 1rem; /* matches leading-4 */
  letter-spacing: -0.03em;
  font-weight: 400;
  color: color-mix(in srgb, var(--template-colors-on-strong) 60%, transparent);
  white-space: nowrap; /* prevent random wraps that break rhythm */
}

/* Tablet portrait */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1023px) {
  :root { --container-max-w: 600px; }
}

/* Mobile and tablet: cap Activity scroller so it doesn't run full height */
@media (max-width: 1023px) {
  #cd-activity .cd-activity-scroller {
    height: auto !important;
    max-height: 24rem !important;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root { --container-max-w: 720px; }
}

/* Desktop: hide homepage Protection card; show the one inside side‑kick */
@media (min-width: 1024px) {
  #cd-protection-card { display: none !important; }
  #cd-sliding-menu-content #cd-protection-card { display: flex !important; }
}

/* Desktop: two-column layout for Activity and Network History only */
@media (min-width: 1024px) {
  #cd-two-col {
    display: grid;
    grid-template-columns: 6fr 4fr; /* 6/10 + 4/10 split */
    gap: var(--spacing-md);
    align-items: stretch; /* Both columns match the taller one */
  }
  /* Activity card uses flex column so content wrapper can stretch */
  #cd-activity {
    display: flex;
    flex-direction: column;
  }
  /* Content wrapper fills remaining space; scroller is absolutely positioned inside */
  #cd-activity-content-wrap {
    position: relative;
    flex: 1;
    min-height: 24rem;
  }
  #cd-activity-content-wrap > * {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Invite page: keep desktop width fixed to tablet portrait width */
@media (min-width: 1024px) {
  #cd-dashboard[data-page="invite"] { --container-max-w: 600px; }
}

/* Flash animations for fresh SSE entries */
@keyframes flash-allow {
  0% { background-color: color-mix(in srgb, var(--success) 18%, var(--template-colors-3)); }
  100% { background-color: var(--template-colors-3); }
}
@keyframes flash-block {
  0% { background-color: color-mix(in srgb, var(--danger) 18%, var(--template-colors-3)); }
  100% { background-color: var(--template-colors-3); }
}

/* New badge entrance */
@keyframes new-badge-in {
  0% { transform: translateY(-12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* New entry slide-in from top */
@keyframes slide-in-down {
  0% { transform: translateY(-8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}


/* Intro/logo theme toggles */
.logo-dark { display: none; }
.theme-dark .logo-dark { display: inline; }
.theme-dark .logo-light { display: none; }

/* Card ordering in sliding menu (safe visual reorder, no JSX moves) */
#cd-sliding-menu-content { display: flex; flex-direction: column; }
#cd-my-invitations { order: 20; }
#cd-my-devices { order: 21; }

/* (Removed legacy Segoe helper classes) */

/* Authentication Flow Styles */

/* Phone frame wrapper to mirror Figma frame (430x932) */
.phone-frame {
  width: 430px;
  height: 932px;
  border-radius: 1.5rem;
}

.auth-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 2rem 1.25rem;
}

.cleardns-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--template-colors-text) 6%, transparent);
  padding: 0.4rem 0.875rem;
  border-radius: 2rem;
  color: var(--template-colors-text);
}

.device-phone {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--template-colors-text) 10%, transparent);
  background: var(--template-colors-2);
  border-radius: 1.5rem;
  box-shadow: 0 1px 1px rgba(0,0,0,0.03), 0 8px 30px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}

.intro-title {
  font-size: 2rem;
  font-weight: 600;
}

.intro-lead {
  font-size: 1rem;
  color: var(--template-colors-text-muted);
}

.btn-primary {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
}

.text-muted { color: var(--template-colors-text-muted); }
.text-sm { font-size: var(--font-size-sm); }
.mb-0 { margin-bottom: 0; }

.loading-spinner { filter: drop-shadow(0 0 10px rgba(0,0,0,0.15)); }
.success-ring { filter: drop-shadow(0 0 10px rgba(0,0,0,0.15)); }

.icon-container {
  width: 8.625rem;
  height: 8.625rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.icon-slider-wrapper { position: relative; width: 100%; height: 100%; }
.icon-slide { position: absolute; inset: 0; display: grid; place-items: center; }

.conn-ring { animation: connFlash 0.9s ease-out 1; }

.cd-dashboard { letter-spacing: inherit; }

/* Expanded container widths (mirror dashboard homepage) */
:root { --container-max-w: 450px; }
@media (min-width: 640px) { :root { --container-max-w: 560px; } }
@media (min-width: 768px) { :root { --container-max-w: 720px; } }
@media (min-width: 1024px) { :root { --container-max-w: 960px; } }
@media (min-width: 1280px) { :root { --container-max-w: 1100px; } }

/* Hero artwork responsiveness */
#cd-hero .hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* fill the card on tablets/mobiles */
  object-position: right bottom;  /* keep phones anchored bottom-right */
  pointer-events: none;
  user-select: none;
  z-index: 1;                     /* above radial overlay; below text */
}

/* Hero card height: responsive sizing */
#cd-hero .hero-card { height: 420px; } /* Mobile */
@media (min-width: 640px) { #cd-hero .hero-card { height: 480px; } } /* Large mobile */
@media (min-width: 768px) { #cd-hero .hero-card { height: 520px; } } /* Tablet */
@media (min-width: 1024px) { #cd-hero .hero-card { height: 450px; } } /* Desktop */

/* Hero: background color + radial decoration overlay (anchored bottom-right) */
/* Both light and dark modes use the same dark hero styling */
#cd-hero .hero-card {
  background-color: rgb(13, 13, 13);
  position: relative;
}
#cd-hero .hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('/images/elements/radial-primary-dark-cropped.png');
  background-repeat: no-repeat;
  background-position: right 40% bottom 90%;
  background-size: 100% 90%;
  filter: blur(0px);
  opacity: 1;
  z-index: 0;
}

/* Hero text always white/light (dark hero in both themes) */
#cd-hero .hero-card h1,
#cd-hero .hero-card h1 span,
#cd-hero .hero-card p,
#cd-hero .hero-card small {
  color: rgba(255, 255, 255, 0.9) !important;
}
#cd-hero .hero-card p,
#cd-hero .hero-card p span {
  opacity: 1 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
#cd-hero .hero-card h1 span.font-bold {
  color: var(--primary) !important;
}
#cd-hero .hero-card small {
  opacity: 0.6 !important;
}

/* Tablet view - smaller hero background, positioned right-bottom with crop */
@media (min-width: 768px) and (max-width: 1024px) {
  #cd-hero .hero-card::after {
    background-size: 70% auto !important;
    background-position: right -10% bottom 0% !important;
  }
}

/* Card-top radial backgrounds (applies to any .card-top across sections) */
.card-top {
  background-color: rgba(13,13,13,1);
  background-image: url('/images/elements/radial-dark.svg');
  background-repeat: no-repeat;
  background-size: 140%;          /* zoom in on radial */
  background-position: center center;
}
.theme-dark .card-top {
  background-color: rgba(13,13,13,1);
  background-image: url('/images/elements/radial-dark.svg');
  background-repeat: no-repeat;
  background-size: 140%;          /* zoom in on radial */
  background-position: center center;
}

/* Card-top icons - larger size */
.card-top img {
  width: 80px !important;
  height: 80px !important;
}

/* Category card radial backgrounds */
.category-card {
  background-color: var(--template-colors-2);
  background-image: url('/images/elements/radial-primary-light.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.theme-dark .category-card {
  background-color: rgba(13,13,13,1);
  background-image: url('/images/elements/radial-dark.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* Responsive height for .card-top blocks */
.card-top { height: 200px; }
@media (min-width: 640px) { .card-top { height: 220px; } }

/* Category card icons - larger in default view */
.categories-grid > div img {
  width: 48px;
  height: 48px;
}

/* Subtle tinted panel (theme-aware) */
.soft-panel {
  background: color-mix(in srgb, var(--template-colors-text) 3%, transparent);
}

/* Card inner surface: solid tokens (no color-mix) */
.card-inner { background: var(--white); }
.theme-dark .card-inner { background: var(--template-colors-2); }

/* FAQ styles */
#cd-faq .faq-wrap { background: color-mix(in srgb, var(--template-colors-text) 3%, transparent); border-radius: 2rem; padding: var(--spacing-md); }
#cd-faq .faq-item { background: var(--template-colors-2); border-radius: 1.5rem; overflow: hidden; }
#cd-faq .faq-head { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md) var(--spacing-lg); cursor: pointer; }
#cd-faq .faq-title { font-size: 1.125rem; line-height: 1.5rem; color: var(--template-colors-text); font-weight: 500; }
#cd-faq .faq-answer { display: none; padding: 0 var(--spacing-lg) var(--spacing-md) var(--spacing-lg); color: var(--template-colors-text-muted); }
#cd-faq .faq-item.open .faq-answer { display: block; }
#cd-faq .faq-chevron { transition: transform 0.2s ease; stroke: var(--template-colors-text); }
#cd-faq .faq-item.open .faq-chevron { transform: rotate(180deg); }

/* Blog posts theming overrides (respect tokens) */
#blog-posts .text-\[\#1d1d1d\] { color: var(--template-colors-text) !important; }
#blog-posts .bg-white { background-color: var(--template-colors-2) !important; }
#blog-posts [class*="bg-white/"] { background-color: color-mix(in srgb, var(--template-colors-text) 3%, transparent) !important; }
/* Typography weight adjustments (closer to original) */
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold, b, strong { font-weight: 700 !important; }
/* Blog card hero images */
#blog-posts .blog-card-img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--template-colors-2);
}
/* Blog image light/dark mode switching */
.blog-img-dark { display: none !important; }
.theme-dark .blog-img-light { display: none !important; }
.theme-dark .blog-img-dark { display: block !important; }

/* Blog card containment fix for Safari */
#blog-posts .grid > div {
  position: relative;
  z-index: 1;
  isolation: isolate;
  contain: layout;
}

/* Native fullscreen mode for traffic map */
.traffic-map-demo:fullscreen,
.traffic-map-demo:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.traffic-map-demo:fullscreen #map-container,
.traffic-map-demo:-webkit-full-screen #map-container {
  height: 100vh !important;
}

.traffic-map-demo:fullscreen .traffic-map-header,
.traffic-map-demo:-webkit-full-screen .traffic-map-header {
  display: none !important;
}

/* Fix arc and icon flickering in Chrome */
.traffic-map-demo {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  isolation: isolate;
  contain: paint;
}

#live-traffic-map-container {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.traffic-arc {
  will-change: opacity, stroke-dashoffset;
}

/* Blog "Read more" buttons - light mode specific */
:root:not(.theme-dark) #blog-posts article a[href] {
  color: rgba(29, 29, 29, 1) !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  /* Hero images - hide on small screens */
  .hero-art {
    display: none !important;
  }
  /* Iron Dome image - show on mobile, bottom-right */
  #cd-hero-art.hero-art {
    display: block !important;
    position: absolute;
    inset: auto;
    right: 0; bottom: 0;
    width: 85%;
    height: 85%;
    object-fit: contain;
    object-position: right bottom;
    opacity: 1;
    z-index: 0;
  }

  .hero-card {
    min-height: auto !important;
  }

  /* Hero text container - more right padding on mobile */
  #cd-hero #heroText {
    width: min(665px, 80%) !important;
  }

  /* Hero titles - smaller on mobile */
  #cd-hero h1 {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  #cd-hero h1 span {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  /* Section titles - smaller on mobile */
  section h1, section h2 {
    font-size: 24px !important;
    line-height: 32px !important;
  }

  /* Section subtitles */
  section p[style*="font-size: var(--font-size-lg)"],
  section p[style*="font-size: 18px"] {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Ensure buttons don't wrap */
  a[href*="cleardns"],
  a[style*="border-radius: 32px"],
  .rounded-\\[32px\\] {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* GAFAM + Categories - stack on mobile */
  .gafam-categories-grid {
    grid-template-columns: 1fr !important;
  }

  /* Categories grid - 3 columns on mobile (3x4 grid) */
  .categories-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto !important;
  }

  /* Category cards - square on mobile with larger icons */
  .categories-grid > div {
    aspect-ratio: 1 !important;
    padding: 12px !important;
  }
  .categories-grid > div img {
    width: 4rem !important;
    height: 4rem !important;
  }

  /* Blog posts - single column on mobile */
  .blog-grid {
    grid-template-columns: 1fr !important;
  }

  /* Pricing - single column on mobile, source order is already Full → Stream → Analyze → Essential */
  #cd-pricing .grid {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Footer - 2 columns on mobile */
  #site-footer .grid {
    grid-template-columns: 1fr 1fr !important;
  }
  #site-footer .grid > div:first-child {
    grid-column: 1 / -1; /* Logo/CTA spans full width */
  }

  /* Section headers on mobile - reorder: label, title, subtitle, CTA */
  #cd-anonymous > .flex-col,
  #cd-how > .flex-col,
  #cd-categories > .flex-col,
  #cd-traffic-map > .flex-col {
    display: flex !important;
    flex-direction: column !important;
  }

  #cd-anonymous > .flex-col > small,
  #cd-how > .flex-col > small,
  #cd-categories > .flex-col > small,
  #cd-traffic-map > .flex-col > small { order: 1; }

  #cd-anonymous > .flex-col > .flex-row,
  #cd-how > .flex-col > .flex-row,
  #cd-categories > .flex-col > .flex-row,
  #cd-traffic-map > .flex-col > .flex-row {
    order: 2;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  #cd-anonymous > .flex-col > p,
  #cd-how > .flex-col > p,
  #cd-categories > .flex-col > p,
  #cd-traffic-map > .flex-col > p { order: 3; }

  /* Hide CTA inside title row, show separate full-width one */
  #cd-anonymous .flex-row .cta-btn,
  #cd-how .flex-row .cta-btn,
  #cd-categories .flex-row .cta-btn,
  #cd-traffic-map .flex-row .cta-btn {
    width: 100% !important;
    margin-top: 1.25rem !important;
    order: 10 !important;
  }

  /* Section titles - larger on mobile */
  #cd-anonymous h1,
  #cd-how h1,
  #cd-categories h1,
  #cd-traffic-map h1 {
    font-size: 32px !important;
    line-height: 40px !important;
  }

  /* Section subtitles - larger on mobile */
  #cd-anonymous > .flex-col > p,
  #cd-how > .flex-col > p,
  #cd-categories > .flex-col > p,
  #cd-traffic-map > .flex-col > p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-top: 0.5rem !important;
  }

  /* Blog "View all" button - show mobile text */
  .blog-view-all .desktop-text { display: none; }
  .blog-view-all .mobile-text { display: inline; }

  /* Card-top icons - 2x on mobile */
  .card-top img {
    width: 112px !important;
    height: 112px !important;
  }
}

/* Desktop - show desktop text for blog button */
.blog-view-all .mobile-text { display: none; }
.blog-view-all .desktop-text { display: inline; }

/* Tablet portrait — Iron Dome image bottom-right 25% of card area */
@media (min-width: 769px) and (max-width: 1023px) {
  #cd-hero #cd-hero-art.hero-art {
    inset: auto;
    right: 0; bottom: 0;
    width: 85%;
    height: 85%;
    object-fit: contain;
    object-position: right bottom;
    opacity: 1;
  }
}

/* Footer dark-mode gradient */
/* Footer uses hero card background in both themes via inline style var(--template-colors-2) */
@media (min-width: 1024px) {
  #cd-hero .hero-art {
    top: auto; left: auto;        /* revert to bottom-right anchor on desktop */
    right: 0; bottom: 0;
    width: min(58%, 780px);
    height: auto;
    object-fit: contain;
  }
  /* Iron Dome hero image: sized to fit, shifted left */
  #cd-hero #cd-hero-art.hero-art {
    right: 6%;
    bottom: 2%;
    top: 2%;
    left: auto;
    width: auto;
    max-width: 50%;
    height: 96%;
    object-fit: contain;
    object-position: center center;
  }
}

/* ============ DNS Privacy Check (dpc-*) ============ */

/* Status badge */
.dpc-status-badge {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: 20px; font-size: 0.75rem; font-weight: 600;
  background: var(--template-colors-3); color: var(--template-colors-text-muted);
  white-space: nowrap;
}
.dpc-status-badge.running { background: rgba(60,109,234,0.15); color: var(--primary); }
.dpc-status-badge.done { background: rgba(52,199,89,0.15); color: var(--success); }
.dpc-status-badge.leak { background: rgba(255,149,0,0.15); color: var(--warning); }
.dpc-status-badge.pulse { animation: dpcPulse 1.5s ease-in-out infinite; }
@keyframes dpcPulse { 0%,100% { opacity:1; } 50% { opacity:0.7; } }

/* Progress bar */
.dpc-progress-track { height: 3px; background: var(--template-colors-3); border-radius: 2px; overflow: hidden; }
.dpc-progress-bar { height: 100%; width: 0%; background: var(--primary); border-radius: 2px; transition: width 0.3s ease; }
.dpc-progress-bar.done { background: var(--success); }
.dpc-progress-bar.leak { background: var(--danger); }

/* Badge */
.dpc-badge {
  display: inline-flex; align-items: center; padding: 3px 8px;
  border-radius: 12px; font-size: 0.7rem; font-weight: 600;
  background: var(--template-colors-3); color: var(--template-colors-text-muted);
}
.dpc-badge.ok { background: rgba(52,199,89,0.15); color: var(--success); }
.dpc-badge.warn { background: rgba(255,149,0,0.15); color: var(--warning); }

/* Caps */
.dpc-cap-value {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700; color: var(--template-colors-text-muted);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  min-height: 1.25rem;
}
.dpc-cap-value.pass { color: var(--primary); }
.dpc-cap-value.fail { color: var(--danger); }
.dpc-cap-label {
  display: block; font-size: 0.625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--template-colors-text-muted); margin-top: 4px;
}

/* Gooey spinner */
.dpc-spinner { display: inline-block; width: 28px; height: 10px; color: var(--primary); }
.dpc-ellipses { fill: currentColor; }
.dpc-ellipse:nth-child(1) { animation: dpcGoo 1s cubic-bezier(0.59,0.8,0.29,0.1) infinite both alternate-reverse; animation-delay: 1s; }
@keyframes dpcGoo {
  to { transform: translate3d(230px,0,0); }
}
/* Muted spinner in DNSSEC cells */
.dpc-ds-cell .dpc-spinner { color: var(--template-colors-text-muted); opacity: 0.5; width: 24px; height: 8px; }

/* IP Card */
.dpc-ip-inner { display: flex; flex-direction: column; gap: 6px; }
.dpc-ip-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dpc-ip-isp-row { display: flex; align-items: center; gap: 8px; }
.dpc-ip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dpc-ip-isp { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--template-colors-text); }
.dpc-ip-flag { width: 20px; height: 14px; border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.dpc-ip-addr-row { display: flex; align-items: center; gap: 8px; }
.dpc-ip-proto {
  display: inline-flex; padding: 2px 6px; border-radius: 4px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
  background: var(--template-colors-3); color: var(--template-colors-text-muted);
}
.dpc-ip-addr { margin: 0; font-size: 0.85rem; color: var(--template-colors-text-muted); font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; }
.dpc-ip-location { font-size: 0.8rem; color: var(--template-colors-text-muted); }
.dpc-ip-divider { height: 1px; background: var(--template-colors-divider); margin: 4px 0; }
.dpc-ip-bottom { display: flex; align-items: center; }
.dpc-ip-ptr { font-size: 0.75rem; color: var(--template-colors-text-muted); }
.dpc-ip-ptr code { font-size: 0.75rem; background: var(--template-colors-3); padding: 1px 4px; border-radius: 3px; }

/* Resolver list */
.dpc-resolver-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--template-colors-divider);
}
.dpc-resolver-row:last-child { border-bottom: none; }
.dpc-resolver-details { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dpc-resolver-ip { margin: 0; font-size: 0.85rem; font-weight: 500; color: var(--template-colors-text); font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; }
.dpc-resolver-meta { font-size: 0.75rem; color: var(--template-colors-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpc-resolver-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 12px; }
.dpc-resolver-flag { width: 20px; height: 14px; border-radius: 2px; overflow: hidden; }
.dpc-resolver-proto {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 4px;
  background: var(--template-colors-3); color: var(--template-colors-text-muted);
}
.dpc-empty-state { font-size: 0.85rem; color: var(--template-colors-text-muted); padding: 16px 0; text-align: center; }

/* DNSSEC table */
.dpc-ds-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-top: 0.5rem; }
.dpc-ds-table th { text-align: center; font-weight: 600; color: var(--template-colors-text-muted); padding: 0.5rem; font-size: 0.75rem; border-bottom: 1px solid var(--template-colors-divider); line-height: 1.3; }
.dpc-ds-table td { text-align: center; padding: 0.5rem; color: var(--template-colors-text); font-size: 0.875rem; border-bottom: 1px solid var(--template-colors-divider); }
.dpc-ds-table td:first-child { text-align: left; font-size: 0.75rem; color: var(--template-colors-text-muted); }
.dpc-ds-table th:first-child { text-align: left; }
.dpc-ds-cell { font-weight: 700; font-size: 0.875rem; font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; }
.dpc-ds-cell.pass { color: var(--success); }
.dpc-ds-cell.fail { color: var(--danger); }


/* Mobile responsive */
@media (max-width: 768px) {
  #cd-dnscheck [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #cd-dnscheck [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}