/* =============================================================================
   Debrid Services Comparison - Improved Complete CSS
   - Unified card-first design for About, Speed Test, FAQ
   - Accessible header/navigation, hero, buttons
   - Tables, comparisons, search, referral, status, resources, notes
   - Age verification modal, loading states, footer, utilities
   ========================================================================== */

/* Root variables and theme */
:root{
  color-scheme: light dark;

  /* Brand + feedback */
  --primary:#6366f1;
  --primary-hover:#4f46e5;
  --primary-light:#a5b4fc;
  --primary-dark:#3730a3;
  --success:#10b981;
  --warning:#f59e0b;
  --error:#ef4444;
  --info:#3b82f6;

  /* Grays */
  --gray-50:#f8fafc;
  --gray-100:#f1f5f9;
  --gray-200:#e2e8f0;
  --gray-300:#cbd5e1;
  --gray-400:#94a3b8;
  --gray-500:#64748b;
  --gray-600:#475569;
  --gray-700:#334155;
  --gray-800:#1e293b;
  --gray-900:#0f172a;

  /* Text and background */
  --text-primary:var(--gray-900);
  --text-secondary:var(--gray-600);
  --text-tertiary:var(--gray-500);
  --text-muted:var(--gray-400);
  --bg-primary:#fff;
  --bg-secondary:var(--gray-50);
  --bg-tertiary:var(--gray-100);
  --bg-elevated:#fff;

  /* Borders and focus */
  --border-primary:var(--gray-200);
  --border-secondary:var(--gray-300);
  --border-focus:var(--primary);

  /* Radius */
  --radius-md:.375rem;
  --radius-lg:.5rem;
  --radius-xl:.75rem;
  --radius-2xl:1rem;
  --radius-full:9999px;

  /* Shadows */
  --shadow-sm:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-focus:0 0 0 3px rgb(99 102 241 / .15);

  /* Typography */
  --text-xs:.75rem;
  --text-sm:.875rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.25rem;
  --text-2xl:1.5rem;
  --text-3xl:1.875rem;
  --text-4xl:2.25rem;
  --text-5xl:3rem;
  --text-6xl:3.75rem;
  --font-normal:400;
  --font-medium:500;
  --font-semibold:600;
  --font-bold:700;
  --font-extrabold:800;

  /* Spacing */
  --space-px:1px;
  --space-0-5:.125rem;
  --space-1:.25rem;
  --space-1-5:.375rem;
  --space-2:.5rem;
  --space-2-5:.625rem;
  --space-3:.75rem;
  --space-3-5:.875rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-7:1.75rem;
  --space-8:2rem;
  --space-9:2.25rem;
  --space-10:2.5rem;
  --space-11:2.75rem;
  --space-12:3rem;
  --space-14:3.5rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;

  /* Layout */
  --container-max-width:1280px;
  --header-height:4.5rem;

  /* Z-index */
  --z-sticky:1020;
  --z-docked:10;
}
[data-theme="dark"]{
  --text-primary:var(--gray-50);
  --text-secondary:var(--gray-300);
  --text-tertiary:var(--gray-400);
  --text-muted:var(--gray-500);

  --bg-primary:var(--gray-900);
  --bg-secondary:var(--gray-800);
  --bg-tertiary:var(--gray-700);
  --bg-elevated:var(--gray-800);

  --border-primary:var(--gray-700);
  --border-secondary:var(--gray-600);
  --border-focus:var(--primary-light);

  --primary:#818cf8;
  --primary-hover:#a5b4fc;
  --primary-light:#c7d2fe;
  --primary-dark:#6366f1;

  --shadow-sm:0 1px 3px 0 rgb(0 0 0 / .4),0 1px 2px -1px rgb(0 0 0 / .4);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / .4),0 2px 4px -2px rgb(0 0 0 / .4);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .4),0 4px 6px -4px rgb(0 0 0 / .4);
  --shadow-focus:0 0 0 3px rgb(129 140 248 / .2);
}

/* Base and resets */
*,::before,::after{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-feature-settings:'cv01','cv03','cv04','cv11';
  background-color:var(--bg-primary);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh; margin:0; overflow-x:hidden;
}
img,svg,video,canvas{max-width:100%;height:auto}
a{color:var(--primary);text-decoration:none;transition:color .2s cubic-bezier(.4,0,.2,1)}
a:hover{color:var(--primary-hover);text-decoration:none}

/* Focus styles */
:focus{outline:2px solid var(--border-focus);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}

/* Layout wrappers */
.page-wrapper{min-height:100vh;display:flex;flex-direction:column;position:relative}
.container{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--space-6);width:100%}
.main-content{flex:1;position:relative}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:var(--space-4);top:var(--space-4);width:auto;height:auto;padding:var(--space-2) var(--space-3);background:var(--bg-primary);color:var(--text-primary);border:2px solid var(--border-focus);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:9999}

/* Header and navigation */
.site-header{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:rgb(255 255 255 / .8);
  -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
  border-bottom:1px solid var(--border-primary);
  height:var(--header-height);
  transition:background-color .2s,border-color .2s,backdrop-filter .3s,box-shadow .2s;
}
@supports not ((backdrop-filter: blur(1px))){.site-header{background:rgb(255 255 255 / .95)}}
[data-theme="dark"] .site-header{background:rgb(15 23 42 / .8)}
.header-content{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);gap:var(--space-8)}
.site-title{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);
  text-decoration:none;position:relative;transition:color .2s,transform .2s,text-shadow .2s;
}
.site-title:hover{color:var(--primary);transform:translateY(-1px)}
.site-title:focus-visible{border-radius:var(--radius-md);box-shadow:var(--shadow-focus)}
.logo-icon{font-size:var(--text-2xl);filter:drop-shadow(0 2px 4px rgb(99 102 241 / .2));transition:transform .2s,filter .2s}
.site-title:hover .logo-icon{transform:rotate(-5deg) scale(1.1)}

.header-nav{display:flex;align-items:center;gap:var(--space-6)}
.nav-link{
  position:relative;display:inline-flex;align-items:center;padding:var(--space-2) var(--space-3);
  font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);border-radius:var(--radius-lg);white-space:nowrap;
  transition:color .2s,background-color .2s,transform .2s,box-shadow .2s,border-color .2s;
}
.nav-link::before{
  content:'';position:absolute;bottom:-2px;left:50%;width:0;height:2px;background:var(--primary);
  border-radius:var(--radius-full);transition:width .2s,left .2s;transform:translateX(-50%);
}
.nav-link:hover{color:var(--primary);background:var(--bg-secondary);transform:translateY(-1px)}
.nav-link:hover::before{width:70%}
.nav-link:focus-visible{box-shadow:var(--shadow-focus)}
.nav-link[aria-current="page"]{color:var(--primary)}
.nav-link[aria-current="page"]::before{width:70%}

/* Dark mode toggle */
.dark-mode-toggle{
  display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:2px solid var(--border-primary);
  border-radius:var(--radius-full);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;position:relative;overflow:hidden;
  transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s,color .2s; touch-action:manipulation;
}
.dark-mode-toggle:hover{background:var(--bg-secondary);border-color:var(--primary);transform:scale(1.05);box-shadow:var(--shadow-md)}
.dark-mode-toggle:focus-visible{box-shadow:var(--shadow-focus)}
.sun-icon,.moon-icon{position:absolute;transition:opacity .2s,transform .2s}
.moon-icon{display:none;transform:rotate(180deg)}
[data-theme="dark"] .sun-icon{display:none}
[data-theme="dark"] .moon-icon{display:block;transform:rotate(0deg)}

/* Hero section */
.hero-section{
  position:relative;padding:var(--space-24) 0 var(--space-20);
  background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);
  overflow:hidden;
}
.hero-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,rgb(99 102 241 / .1) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgb(99 102 241 / .05) 0%,transparent 50%);
  pointer-events:none;
}
[data-theme="dark"] .hero-section{background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%)}
[data-theme="dark"] .hero-section::before{
  background:radial-gradient(circle at 30% 20%,rgb(129 140 248 / .15) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgb(129 140 248 / .08) 0%,transparent 50%)
}
.hero-content{text-align:center;max-width:900px;margin:0 auto;position:relative;animation:fadeInUp .8s ease-out}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.hero-title{font-size:clamp(var(--text-3xl),8vw,var(--text-6xl));font-weight:var(--font-extrabold);line-height:1.1;margin:0 0 var(--space-6);color:var(--text-primary);letter-spacing:-.02em}
.gradient-text{background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-theme="dark"] .gradient-text{background:linear-gradient(135deg,var(--primary-light) 0%,#c4b5fd 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-description{font-size:clamp(var(--text-lg),4vw,var(--text-xl));color:var(--text-secondary);margin:0 0 var(--space-10);max-width:650px;margin-left:auto;margin-right:auto;line-height:1.6}
.hero-actions{display:flex;gap:var(--space-4);justify-content:center;margin-bottom:var(--space-16);flex-wrap:wrap}
.hero-stats{display:flex;gap:var(--space-12);justify-content:center;flex-wrap:wrap}
.stat-item{text-align:center;position:relative}
.stat-item:not(:last-child)::after{content:'';position:absolute;right:calc(-1 * var(--space-6));top:50%;transform:translateY(-50%);width:1px;height:40px;background:var(--border-primary)}
.stat-number{display:block;font-size:clamp(var(--text-2xl),6vw,var(--text-4xl));font-weight:var(--font-extrabold);color:var(--primary);margin-bottom:var(--space-1);background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-label{font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;font-weight:var(--font-medium)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-4) var(--space-8);border:2px solid transparent;border-radius:var(--radius-xl);
  font-size:var(--text-base);font-weight:var(--font-semibold);text-decoration:none;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;text-align:center;min-width:140px;justify-content:center;
  transition:color .2s,background-color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;
  touch-action:manipulation;
}
.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left .5s}
.btn:hover::before{left:100%}
.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:var(--shadow-md)}
.btn-primary:hover{background:linear-gradient(135deg,var(--primary-hover) 0%,var(--primary) 100%);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-primary:focus-visible{box-shadow:var(--shadow-focus),var(--shadow-lg)}
.btn-secondary{background:transparent;color:var(--text-primary);border:2px solid var(--border-primary)}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary);background:var(--bg-secondary);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-secondary:focus-visible{box-shadow:var(--shadow-focus)}
input,select,textarea,button{accent-color:var(--primary)}

/* Section framework */
.section{padding:var(--space-24) 0;position:relative;content-visibility:auto;contain-intrinsic-size:1px 800px}
.section:nth-child(even){background:var(--bg-secondary)}
.section-header{text-align:center;margin-bottom:var(--space-16)}
.section-title{font-size:clamp(var(--text-3xl),6vw,var(--text-5xl));font-weight:var(--font-extrabold);margin:0 0 var(--space-6);color:var(--text-primary);letter-spacing:-.02em}
.section-description{font-size:clamp(var(--text-base),3vw,var(--text-xl));color:var(--text-secondary);margin:0;max-width:700px;margin-inline:auto;line-height:1.7}
.subsection{margin:var(--space-12) 0}
.subsection-title{margin:0 0 var(--space-4);font-size:var(--text-xl);font-weight:var(--font-bold)}

/* Quick navigation cards */
.quick-nav{padding:var(--space-20) 0;background:var(--bg-primary);position:relative;content-visibility:auto;contain-intrinsic-size:1px 600px}
.quick-nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-8)}
.quick-nav-card{
  display:block;padding:var(--space-8);background:var(--bg-elevated);border:2px solid var(--border-primary);border-radius:var(--radius-2xl);
  text-decoration:none;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;
  content-visibility:auto;contain:content;
}
.quick-nav-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--primary) 0%,transparent 100%);opacity:0;transition:opacity .2s;z-index:0}
.quick-nav-card:hover::before{opacity:.08}
.quick-nav-card:hover{border-color:var(--primary);transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg)}
.quick-nav-card:focus-visible{box-shadow:var(--shadow-focus),var(--shadow-lg)}
.quick-nav-card>*{position:relative;z-index:1}
.quick-nav-icon{font-size:var(--text-4xl);margin-bottom:var(--space-4);display:block;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .1));transition:transform .2s,filter .2s}
.quick-nav-card:hover .quick-nav-icon{transform:scale(1.1) rotate(-5deg)}
.quick-nav-card h3{margin:0 0 var(--space-3);font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary)}
.quick-nav-card p{margin:0;color:var(--text-secondary);font-size:var(--text-base);line-height:1.6}

/* Unified status cards (also used for speed tiles) */
.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)}
.status-card{
  display:block;padding:var(--space-6);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-xl);
  text-decoration:none;transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s;content-visibility:auto;contain:content;
}
.status-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.status-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}
.service-status-indicator{width:12px;height:12px;border-radius:var(--radius-full);background:var(--success);box-shadow:0 0 0 2px rgb(16 185 129 / .2)}
.status-card .status-indicator.online,.service-status-indicator.online{background:var(--success);box-shadow:0 0 0 2px rgb(16 185 129 / .2)}
.status-card p{margin:0;color:var(--text-secondary);font-size:var(--text-sm)}
.speed-grid .status-card{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start}
.speed-card .service-name{font-weight:var(--font-semibold);color:var(--text-primary)}
.speed-card .speed-test-label{font-size:var(--text-sm);color:var(--text-secondary)}

/* Chips and meta */
.meta-chips{display:flex;gap:.5rem;justify-content:center;margin-top:var(--space-4);flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:999px;
  background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-primary);
  font-size:.75rem;font-weight:var(--font-medium)
}
.chip-info{color:var(--primary);background:rgb(99 102 241 / .10);border-color:rgb(99 102 241 / .25)}

/* Stepper (ordered guidance) */
.stepper{counter-reset:step;list-style:none;padding-left:0;margin:var(--space-6) 0}
.stepper li{position:relative;padding-left:2.25rem;margin-bottom:.75rem}
.stepper li::before{
  counter-increment:step;content:counter(step);position:absolute;left:0;top:.1rem;width:1.5rem;height:1.5rem;
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--primary);color:#fff;font-size:.8rem;font-weight:700
}

/* Accordion (used in FAQ and Speed) */
.accordion{border:1px solid var(--border-primary);border-radius:var(--radius-xl);background:var(--bg-primary);margin:var(--space-4) 0;overflow:hidden}
.accordion>summary{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:var(--space-4);
  font-weight:var(--font-semibold);cursor:pointer;list-style:none
}
.accordion>summary::-webkit-details-marker{display:none}
.accordion[open]>summary{background:var(--bg-secondary)}
.accordion .chevron{transition:transform .2s}
.accordion[open] .chevron{transform:rotate(180deg)}
.accordion-content{padding:0 var(--space-4) var(--space-4);color:var(--text-secondary)}
.bullet-list{padding:var(--space-4) var(--space-6);margin:0}
.bullet-list li{margin:.25rem 0}
.accordion>summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:.5rem}
.accordion>summary:hover{background:var(--bg-secondary)}

/* Alerts */
.alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);margin:var(--space-4) 0;border:1px solid var(--border-primary)}
.alert-info{background:rgb(59 130 246 / .1);border-color:rgb(59 130 246 / .2);color:var(--info)}
.alert-warning{background:rgb(245 158 11 / .1);border-color:rgb(245 158 11 / .2);color:var(--warning)}
.alert-icon{flex-shrink:0;margin-top:2px}

/* Tables (data + pricing) */
.data-table-container{
  background:var(--bg-elevated);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-primary);
  margin:var(--space-8) 0;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)
}
.table-wrapper{overflow-x:auto;overflow-y:visible;border-radius:var(--radius-2xl);-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--primary) var(--bg-secondary)}
.table-wrapper::-webkit-scrollbar{height:10px}
.table-wrapper::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:var(--radius-md)}
.table-wrapper::-webkit-scrollbar-thumb{background:var(--primary);border-radius:var(--radius-md);border:2px solid var(--bg-secondary)}
.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--primary-hover)}

table{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:600px}
th,td{padding:var(--space-4) var(--space-6);text-align:left;border-bottom:1px solid var(--border-primary);white-space:nowrap}
th{
  background:var(--primary);color:#fff;font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em;font-size:var(--text-xs);
  position:sticky;top:0;z-index:var(--z-sticky)
}
th:first-child{position:sticky;left:0;z-index:calc(var(--z-sticky) + 1);background:var(--primary);background-clip:padding-box}
tr:hover{background:var(--bg-secondary)}
td{transition:background-color .15s,color .15s}
td:first-child{
  font-weight:var(--font-medium);position:sticky;left:0;background:var(--bg-primary);z-index:1;background-clip:padding-box;
  box-shadow:inset -1px 0 0 var(--border-primary)
}
tr:hover td:first-child{background:var(--bg-secondary)}

.status-cell{text-align:center!important}
.status-indicator{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-full);transition:background-color .15s,color .15s,transform .15s}
.status-indicator.supported{background:rgb(14 236 162 / .1);color:var(--success)}
.status-indicator.not-supported{background:rgb(211 29 29 / .1);color:var(--error)}
.status-indicator svg{width:16px;height:16px}

/* Pricing table highlight support */
.pricing-table th.highlighted,
.pricing-table td.highlighted{background:var(--bg-secondary)}

/* Search */
.search-section{margin-bottom:var(--space-8)}
.search-container.enhanced{position:relative;max-width:500px;margin:0 auto}
.search-icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--text-tertiary);z-index:1}
.search-input{
  width:100%;padding:var(--space-4) var(--space-12) var(--space-4) var(--space-12);
  border:2px solid var(--border-primary);border-radius:var(--radius-full);font-size:var(--text-base);background:var(--bg-primary);color:var(--text-primary);outline:none;
  transition:border-color .15s,box-shadow .15s,color .15s,background-color .15s;
}
.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgb(99 102 241 / .1)}
.clear-icon{
  position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:var(--space-1);
  border-radius:var(--radius-md);opacity:0;visibility:hidden;transition:opacity .15s,color .15s,background-color .15s,transform .15s;
}
.search-input:not(:placeholder-shown) + .clear-icon,.search-input:focus + .clear-icon{opacity:1;visibility:visible}
.clear-icon:hover{background:var(--bg-secondary);color:var(--text-primary)}
.search-results{text-align:center;padding:var(--space-2) 0;color:var(--text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-4)}

/* Compare UI */
.compare-controls{display:flex;align-items:end;gap:var(--space-6);margin-bottom:var(--space-12);flex-wrap:wrap}
.compare-select-group{flex:1;min-width:200px}
.compare-select-group label{display:block;margin-bottom:var(--space-2);font-weight:var(--font-medium);color:var(--text-primary)}
.select-wrapper{position:relative}
.select-wrapper::after{
  content:'';position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--text-tertiary);pointer-events:none;
}
select{
  width:100%;padding:var(--space-3) var(--space-8) var(--space-3) var(--space-4);border:2px solid var(--border-primary);border-radius:var(--radius-lg);
  background:var(--bg-primary);color:var(--text-primary);font-size:var(--text-base);cursor:pointer;appearance:none;
  transition:border-color .15s,box-shadow .15s,color .15s,background-color .15s;
}
select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgb(99 102 241 / .1)}
.compare-vs{flex-shrink:0;font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--primary);background:var(--bg-secondary);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);border:2px solid var(--border-primary);margin-bottom:var(--space-2)}

#compare-table-container{position:relative;background:var(--bg-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-primary);margin-top:var(--space-6);display:none}
.comparison-visible{display:block!important;animation:slideIn .3s ease-out}
.comparison-hiding{animation:slideOut .3s ease-in}
@keyframes slideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}

.comparison-header{padding:var(--space-6);border-bottom:1px solid var(--border-primary);background:var(--bg-secondary);border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.comparison-header h3{margin:0 0 var(--space-4);font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary);text-align:center}
.comparison-stats{display:flex;gap:var(--space-6);justify-content:center;margin-bottom:var(--space-6);flex-wrap:wrap}
.comparison-stats .stat{text-align:center;background:var(--bg-primary);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--border-primary);min-width:100px}
.stat-label{display:block;font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-1)}
.stat-value{display:block;font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--primary)}
.comparison-actions{display:flex;justify-content:center;gap:var(--space-3)}

.comparison-filters{padding:var(--space-4) var(--space-6);background:var(--bg-tertiary);border-bottom:1px solid var(--border-primary);display:flex;gap:var(--space-6);justify-content:center;flex-wrap:wrap}
.filter-option{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary)}
.filter-option input[type="radio"]{margin:0}
.filter-results{text-align:center;padding:var(--space-2) 0;color:var(--text-secondary);font-size:var(--text-sm);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary)}

.comparison-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:700px}
.comparison-table th,.comparison-table td{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border-primary);text-align:center}
.comparison-table th:first-child,.comparison-table td:first-child{text-align:left;font-weight:var(--font-medium)}
.comparison-table th{background:var(--primary);color:#fff;font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em;font-size:var(--text-xs);position:sticky;top:0;z-index:var(--z-sticky)}
.provider-header{position:relative}
.comparison-row.both-supported{background:rgb(16 185 129 / .05)}
.comparison-row.provider1-only{background:rgb(59 130 246 / .05)}
.comparison-row.provider2-only{background:rgb(168 85 247 / .05)}
.comparison-row.neither-supported{background:rgb(239 68 68 / .05)}
.status-badge{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.05em}
.status-badge.both-supported{background:rgb(16 185 129 / .1);color:var(--success)}
.status-badge.provider1-only{background:rgb(59 130 246 / .1);color:var(--info)}
.status-badge.provider2-only{background:rgb(168 85 247 / .1);color:#8b5cf6}
.status-badge.neither-supported{background:rgb(239 68 68 / .1);color:var(--error)}

#close-compare{
  background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);
  padding:var(--space-2) var(--space-4);display:flex;align-items:center;gap:var(--space-2);
  cursor:pointer;font-size:var(--text-sm);color:var(--text-primary);font-weight:var(--font-medium);
  transition:color .15s,background-color .15s,border-color .15s,transform .15s,box-shadow .15s;
}
#close-compare:hover{background:var(--error);color:#fff;border-color:var(--error);transform:translateY(-1px)}

.empty-state{text-align:center;padding:var(--space-16)}
.empty-state-icon{font-size:var(--text-5xl);margin-bottom:var(--space-4)}
.empty-state h3{margin:0 0 var(--space-2);font-size:var(--text-xl);color:var(--text-primary)}
.empty-state p{margin:0;color:var(--text-secondary)}

.warning-state{text-align:center;padding:var(--space-12);background:rgb(245 158 11 / .05);border-radius:var(--radius-lg);border:1px solid rgb(245 158 11 / .2)}
.warning-icon{font-size:var(--text-4xl);margin-bottom:var(--space-3)}
.warning-state h3{margin:0 0 var(--space-2);color:var(--warning)}
.warning-state p{margin:0;color:var(--text-secondary)}

/* Referral section */
.referral-section{margin-block:var(--space-16);padding:var(--space-8);background:var(--bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--border-primary);text-align:center;content-visibility:auto;contain-intrinsic-size:1px 400px}
.referral-header h3{margin:0 0 var(--space-2);color:var(--text-primary);font-size:var(--text-2xl);font-weight:var(--font-bold)}
.referral-header p{margin:0 auto var(--space-6);color:var(--text-secondary);max-width:800px}
.referral-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4);justify-items:center}
.referral-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-4) var(--space-3);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);
  text-decoration:none;width:100%;max-width:200px;box-shadow:var(--shadow-sm);
  transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s,color .2s;
}
.referral-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.referral-card .service-name{font-weight:var(--font-semibold);color:var(--text-primary);font-size:var(--text-base)}
.referral-badge{font-size:var(--text-xs);color:var(--primary);background:rgb(99 102 241 / .1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);font-weight:var(--font-medium)}

/* Important notes */
.important-notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6)}
.note-card{background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-6)}
.note-icon{font-size:var(--text-2xl);margin-bottom:var(--space-3)}
.note-card h3{margin-bottom:var(--space-3);color:var(--text-primary)}
.note-card p{margin:0;color:var(--text-secondary)}

/* Resources */
.resources-categories{display:grid;gap:var(--space-12)}
.resource-category h3{margin-bottom:var(--space-6);color:var(--primary)}
.resource-list{display:grid;gap:var(--space-4)}
.resource-item{
  display:block;padding:var(--space-4);background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-lg);
  text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s;
}
.resource-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary)}
.resource-item strong{display:block;color:var(--text-primary);margin-bottom:var(--space-1)}
.resource-item span{color:var(--text-secondary);font-size:var(--text-sm)}

/* Age verification modal */
.age-verification-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(5px)
}
.age-verification-modal{background:var(--bg-primary);border-radius:var(--radius-xl);padding:var(--space-8);max-width:500px;margin:var(--space-4);box-shadow:var(--shadow-lg);border:1px solid var(--border-primary)}
.age-verification-content{text-align:center}
.age-verification-content h3{color:var(--error);margin-bottom:var(--space-4)}
.age-verification-content p{margin-bottom:var(--space-4);color:var(--text-secondary)}
.age-verification-actions{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-6)}
@media (width <=768px){.age-verification-actions{flex-direction:column}}

/* Loading states */
.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);color:var(--text-secondary)}
.loading-spinner{width:32px;height:32px;border:3px solid var(--border-primary);border-top:3px solid var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin-bottom:var(--space-4)}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.loading-overlay{position:absolute;inset:0;background:rgb(255 255 255 / .9);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:1050;opacity:0;visibility:hidden;transition:opacity .2s}
[data-theme="dark"] .loading-overlay{background:rgb(15 23 42 / .9)}
.loading-overlay--visible{opacity:1;visibility:visible}
.loading-overlay--hiding{opacity:0}
.loading-content{text-align:center;color:var(--text-primary)}
.spinner-ring{width:40px;height:40px;border:4px solid var(--border-primary);border-top:4px solid var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin:0 auto var(--space-3)}
.loading-text{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}

/* Footer */
.site-footer{background:var(--bg-secondary);border-top:1px solid var(--border-primary);padding:var(--space-16) 0 var(--space-8);margin-top:auto;content-visibility:auto;contain-intrinsic-size:1px 500px}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-8);margin-bottom:var(--space-8)}
.footer-section h4{margin:0 0 var(--space-4);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)}
.footer-section p{margin:0;color:var(--text-secondary)}
.footer-section ul{list-style:none;padding:0;margin:0}
.footer-section li{margin-bottom:var(--space-2)}
.footer-section a{color:var(--text-secondary);text-decoration:none;transition:color .15s}
.footer-section a:hover{color:var(--primary)}
.footer-bottom{text-align:center;padding-top:var(--space-8);border-top:1px solid var(--border-primary)}
.footer-bottom p{margin:0;color:var(--text-tertiary);font-size:var(--text-sm)}
.footer-bottom a{color:var(--primary);text-decoration:none}

/* Back to top button */
.back-to-top{
  position:fixed;bottom:var(--space-6);right:var(--space-6);width:48px;height:48px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-full);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);
  transition:background-color .2s,transform .2s,box-shadow .2s,opacity .2s,visibility 0s linear .2s;
  opacity:0;visibility:hidden;transform:translateY(20px);z-index:var(--z-docked);
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.back-to-top:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* Responsive */
@media (width <=1024px){
  .container{padding:0 var(--space-4)}
}
@media (width <= 768px){
  .header-nav{display:none}
  .hero-title{font-size:var(--text-3xl)}
  .hero-description{font-size:var(--text-lg)}
  .hero-actions{flex-direction:column;align-items:center}
  .hero-stats{gap:var(--space-6)}

  .quick-nav-grid{grid-template-columns:1fr}
  .footer-content{grid-template-columns:1fr;text-align:center}

  .data-table-container{margin:var(--space-2) calc(-1 * var(--space-4));border-radius:0;border-left:none;border-right:none}
  .table-wrapper{border-radius:0}
  table{font-size:var(--text-xs);min-width:500px}
  th,td{padding:var(--space-2) var(--space-3)}
  th:first-child,td:first-child{min-width:120px;max-width:150px;white-space:normal;word-break:break-word}

  .comparison-header{padding:var(--space-4)}
  .comparison-header h3{font-size:var(--text-lg)}
  .comparison-stats{flex-direction:column;gap:var(--space-3)}
  .comparison-stats .stat{margin:0 auto;max-width:200px}
  .comparison-filters{flex-direction:column;align-items:center;gap:var(--space-3)}
  .comparison-table{min-width:500px}
  .comparison-table th,.comparison-table td{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}
}
@media (width <= 640px){
  .btn{width:100%;max-width:280px;padding:var(--space-4) var(--space-6)}
}
@media (width <= 480px){
  .section{padding:var(--space-12) 0}
  .stat-item:not(:last-child)::after{display:none}
  .comparison-stats{gap:var(--space-2)}
  .comparison-stats .stat{min-width:60px;padding:var(--space-1) var(--space-2)}
  .stat-value{font-size:var(--text-lg)}
  .stat-label{font-size:10px}
  table{min-width:400px}
  th:first-child,td:first-child{min-width:100px;max-width:120px}
}

/* Motion and contrast preferences */
@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
@media (prefers-contrast:high){
  :root{--border-primary:#000;--text-secondary:#000}
  [data-theme="dark"]{--border-primary:#fff;--text-secondary:#fff}
}

/* Pointer coarse: disable hover transforms for touch */
@media (pointer:coarse){
  .nav-link:hover,.btn:hover,.quick-nav-card:hover,.status-card:hover{transform:none;box-shadow:none}
}

/* Print */
@media print{
  .site-header,.hero-section,.quick-nav,.referral-section,.site-footer,.back-to-top,.dark-mode-toggle,.comparison-filters,.comparison-actions,#close-compare{display:none!important}
  .section{page-break-inside:avoid}
  .data-table-container{box-shadow:none;border:1px solid #000}
  .table-wrapper{overflow:visible}
  table{min-width:auto}
  th,td{border:1px solid #000}
}