/* ===== EXTENSION ===== */
.ext-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border); transition: border-color 0.3s ease; }
@media (max-width: 1024px) { .ext-hero { grid-template-columns: 1fr; } }
.ext-icon { width: 72px; height: 72px; background: var(--orange); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; color: #000; }
.ext-icon svg { width: 36px; height: 36px; }
.ext-title {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em; margin-bottom: 16px;
}
.ext-desc { 
  color: var(--text-muted); 
  font-size: 14px; 
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 32px; 
  line-height: 1.7; 
  max-width: 600px; 
}
.install-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange); color: #000;
  padding: 16px 32px;
  font-weight: 700; text-decoration: none;
  font-size: 12px; font-family: var(--font-body);
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.15s;
}
.install-btn:hover { background: var(--orange-hover); }
.layer-list { display: flex; flex-direction: column; border: 1px solid var(--border); margin-top: 32px; transition: border-color 0.3s ease; }
.layer { display: flex; gap: 24px; padding: 24px; border-bottom: 1px solid var(--border); align-items: flex-start; transition: border-color 0.3s ease; }
.layer:last-child { border-bottom: none; }
.layer-badge {
  padding: 4px 12px;
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; flex-shrink: 0;
  margin-top: 2px;
}
.layer-badge.dns { background: var(--orange-dim); color: var(--orange); }
.layer-badge.ext { background: rgba(138,138,138,0.15); color: var(--text-muted); }
.layer-badge.yt { background: var(--red-dim); color: var(--red); }
.layer-text { 
  font-size: 13.5px; color: var(--text-muted); line-height: 1.6; text-transform: uppercase; letter-spacing: 0.03em;
}
.layer-text strong { 
  color: var(--text); display: block; margin-bottom: 6px; font-weight: 700; font-size: 15px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em;
}
.note-box {
  background: var(--surface); border-left: 3px solid var(--amber);
  padding: 24px; margin-top: 24px;
  font-size: 13.5px; color: var(--text-muted); line-height: 1.7; text-transform: uppercase; letter-spacing: 0.04em;
  transition: background-color 0.3s ease;
}
.note-box strong { color: var(--amber); }

/* Secondary (grey) install button, used for the .mobileconfig download */
.install-btn--secondary { margin-top: 24px; background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong); }