/* RestoreRadar — component styles (Lumina glass system). */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4); }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  background: rgba(255,255,255,0.7);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font: 600 19px/1 var(--font); color: var(--ink); display: flex; align-items: center; gap: 8px; letter-spacing: -0.02em; }
.brand .dot { width: 12px; height: 12px; border-radius: var(--r-pill); background: linear-gradient(120deg, var(--accent), var(--emergency)); }
.nav a { font: var(--label); color: var(--text-soft); margin-left: var(--s5); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font: var(--label); border-radius: var(--r-pill); padding: 11px 18px; border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { color: #fff; transform: translateY(-1px); }
.btn-emergency { background: var(--emergency); color: #fff; }
.btn-emergency:hover { color: #fff; transform: translateY(-1px); }
.btn-ghost { background: var(--glass); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--glass-strong); }

/* hero with gradient-border shell */
.hero { padding: var(--s8) 0 var(--s7); }
.hero-shell { padding: 1px; border-radius: var(--r-lg); background: var(--shell); box-shadow: var(--shadow); }
.hero-card { border-radius: calc(var(--r-lg) - 1px); padding: clamp(28px, 5vw, 56px); background: var(--wash), var(--glass); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
.hero h1 { font: var(--display); max-width: 16ch; }
.hero .bluff { font-size: 18px; color: var(--text); max-width: 60ch; margin: var(--s4) 0 var(--s5); }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.eyebrow { font: var(--label); text-transform: uppercase; letter-spacing: .08em; color: var(--emergency); margin-bottom: var(--s3); }

/* trust bar */
.trust { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s6); color: var(--text-soft); font: var(--label); }
.trust b { color: var(--ink); }

/* layout: directory = sidebar + grid */
.section { padding: var(--s7) 0; }
.section > h2 { font: var(--h2); }
.lede { color: var(--text-soft); max-width: 70ch; margin-bottom: var(--s6); }
.directory { display: grid; grid-template-columns: 260px 1fr; gap: var(--s6); align-items: start; }
@media (max-width: 820px) { .directory { grid-template-columns: 1fr; } }

/* filter sidebar */
.filters { position: sticky; top: 84px; padding: var(--s5); border-radius: var(--r-card); background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-sm); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
.filters h3 { font: var(--h3); }
.filters .f-group { margin-bottom: var(--s5); }
.filters label { display: flex; align-items: center; gap: 8px; font: var(--label); color: var(--text); padding: 6px 0; cursor: pointer; }
.filters input { accent-color: var(--accent); }

/* cards grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
.card { border-radius: var(--r-card); padding: var(--s6); background: var(--glass); border: 1px solid #fff; box-shadow: var(--shadow); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); display: flex; flex-direction: column; gap: var(--s3); }
.card.is-featured { border-color: rgba(59,130,246,0.5); box-shadow: rgba(59,130,246,0.12) 0 6px 28px -8px; }
.card h3 { font: var(--h3); margin: 0; }
.card .meta { font: var(--label); color: var(--text-soft); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { font: 500 12px/1 var(--font); padding: 6px 10px; border-radius: var(--r-pill); background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.badge.ok { background: rgba(59,130,246,0.10); color: var(--accent-strong); border-color: rgba(59,130,246,0.2); }
.badge.now { background: rgba(239,68,68,0.10); color: var(--emergency); border-color: rgba(239,68,68,0.2); }
.badge.sample { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.sponsored { font: 500 11px/1 var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.card .actions { margin-top: auto; display: flex; gap: var(--s2); }

/* faq */
.faq { display: grid; gap: var(--s3); }
.faq details { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4) var(--s5); background: var(--glass); }
.faq summary { font: var(--h3); cursor: pointer; }
.faq p { color: var(--text); margin: var(--s3) 0 0; }

/* sticky lead form */
.lead { border-radius: var(--r-card); padding: var(--s6); background: var(--wash), var(--glass-strong); border: 1px solid #fff; box-shadow: var(--shadow); }
.lead h3 { font: var(--h3); }
.lead .row { display: grid; gap: var(--s3); margin-top: var(--s3); }
.lead input, .lead select { font: var(--body); padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.disclosure { font: 12px/1.4 var(--font); color: var(--text-soft); margin-top: var(--s3); }

/* internal link rails (two-way, no dead ends) */
.rail { display: flex; flex-wrap: wrap; gap: var(--s2); }
.rail a { font: var(--label); padding: 8px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ink); }

/* breadcrumb */
.crumbs { font: var(--label); color: var(--text-soft); padding: var(--s5) 0 0; }
.crumbs a { color: var(--text-soft); }

/* footer */
.site-footer { border-top: 1px solid var(--line-soft); margin-top: var(--s9); padding: var(--s7) 0; color: var(--text-soft); font: var(--label); }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s6); }
@media (max-width: 700px) { .site-footer .cols { grid-template-columns: 1fr; } }

/* accessibility: visually-hidden form labels (placeholders are hints only) */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* featured paid placement — unmistakable */
.card.is-featured { border-color: rgba(59,130,246,0.55); box-shadow: rgba(59,130,246,0.16) 0 8px 30px -8px; }
.card.is-featured .sponsored { align-self: flex-start; color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent-strong)); padding: 4px 10px; border-radius: var(--r-pill); letter-spacing: .06em; }

/* mobile: show provider results before the filter sidebar so listings + CTA stay above the fold */
.results { min-width: 0; }
@media (max-width: 820px) {
  .directory { display: flex; flex-direction: column; }
  .directory .results { order: 1; }
  .directory .filters { order: 2; position: static; }
}

/* icons (Solar-style linear) */
.icon { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; flex: 0 0 auto; }
.btn .icon { width: 18px; height: 18px; }
.badge { display: inline-flex; align-items: center; gap: 6px; }
.filters label .icon { color: var(--text-soft); }

/* scroll-reveal motion (GSAP-free; only hides when JS is active, so no-JS stays visible) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }