/* Base styles */
:root{
  --bg: #0b0f14;
  --surface: #11161d;
  --muted: #1a212b;
  --text: #e9eef5;
  --subtext: #b8c3cf;
  --accent: #3db2ff;
  --accent-2: #6ee7b7;
  --border: #1f2732;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #0b0f14 0%, #0d1218 100%);
  line-height: 1.7;
}
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.eyebrow{
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  margin: 0 0 8px;
}
.site-header{
  padding: 60px 0 24px;
  background: radial-gradient(1000px 400px at 20% -10%, rgba(61,178,255,.15), transparent),
              radial-gradient(1000px 400px at 80% -10%, rgba(110,231,183,.12), transparent);
  border-bottom: 1px solid var(--border);
}
.site-header h1{
  margin: 0 0 12px;
  font-size: clamp(28px, 3.6vw, 44px);
}
.subhead{color:var(--subtext); max-width: 75ch}

.toc{margin: 18px auto 28px; padding: 12px 16px; background: var(--surface); border:1px solid var(--border); border-radius: 10px;}
.toc ul{display:flex; gap:16px; flex-wrap:wrap; list-style:none; padding:0; margin:6px 0 0}
.toc a{color: var(--accent); text-decoration:none}
.toc a:hover{text-decoration:underline}

main{padding: 8px 0 64px}
section{margin: 42px 0}
section h2{font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 8px}
section h3{font-size: clamp(18px, 2.2vw, 24px); margin: 16px 0 6px}

.table-wrapper{overflow:auto; border:1px solid var(--border); border-radius:10px; background: var(--surface); margin: 16px 0}
.compare{width:100%; border-collapse: collapse; min-width: 640px}
.compare caption{caption-side: top; text-align:left; color: var(--subtext); padding:10px 12px; font-weight:600}
.compare th,.compare td{border-top:1px solid var(--border); padding:10px 12px; text-align:left}
.compare thead th{background: var(--muted)}
.compare tbody tr:nth-child(even){background:rgba(255,255,255,0.02)}

.note{color: var(--subtext)}

.ranked{counter-reset:item; padding-left: 18px}
.card{background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin:14px 0}
.card.highlight{border-color: var(--accent)}
.biz-details{list-style:none; padding:0; margin: 8px 0; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 16px}

.site-footer{border-top:1px solid var(--border); padding: 24px 0; color: var(--subtext); text-align:center}

/* Accessibility */
a:focus{outline:2px dashed var(--accent); outline-offset: 2px}

/* Responsive tweaks */
@media (max-width: 600px){
  .compare{min-width:500px}
}