/* Veilscope — Landing-only styles (scoped by body.home)
   Keeps global app.css unchanged for other pages. */

/* ---- Basics & tokens ---- */
:root{
  --home-maxw: 1200px;
  --home-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Reduce emphasis of non-primary nav items on the landing */
.home .primary-nav .nav-list a.nav-link--quiet{
  opacity:.75;
}
.home .primary-nav .nav-list a.nav-link--quiet:focus,
.home .primary-nav .nav-list a.nav-link--quiet:hover{
  opacity:1;
}

/* ---- HERO ---- */
.home .hero{
  position:relative;
  min-height:clamp(560px, 72vh, 900px);
  margin-top:var(--nav-height);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(900px 500px at 90% -10%, rgba(236,72,153,.18), transparent 60%),
    var(--color-primary);
  display:flex;
  align-items:center;
}
.home .hero-inner{
  max-width:var(--home-maxw);
  margin:0 auto;
  padding:clamp(32px, 4vw, 64px) 24px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:clamp(24px, 5vw, 60px);
  align-items:center;
}
@media (max-width: 900px){
  .home .hero-inner{ grid-template-columns: 1fr; }
}

.home .eyebrow{
  margin:0 0 6px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-highlight);
  font-size:12px;
}

.home .hero-title{
  font-weight:800;
  letter-spacing:-.02em;
  font-size:clamp(36px, 5.6vw, 56px);
  line-height:1.08;
  margin:0 0 14px;
  color:var(--color-secondary);
}

.home .hero-subtitle{
  font-size:clamp(16px, 2.2vw, 20px);
  max-width:60ch;
  margin:0 0 18px;
}

.home .hero-ctas{
  display:flex; gap:12px; flex-wrap:wrap;
}

/* Small chip list under CTAs for provenance/trust */
.home .trust-bar{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:14px 0 0; padding:0; list-style:none;
}
.home .chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; background:#fff;
  border:1px solid #e5e7eb; box-shadow:var(--home-shadow);
  font-size:14px;
}
.home .chip .dot{width:8px; height:8px; border-radius:999px; background:var(--color-accent-2);}

/* Right side hero visual (real image) */
.home .hero-visual img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  border-radius:16px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:var(--home-shadow);
}

/* Keep your existing scroll cue look */
.home .scroll-cue{ bottom:18px; }

/* ---- HOW IT WORKS ---- */
.home .section-how{
  background:var(--color-primary);
  padding:clamp(40px,7vw,84px) 24px;
}
.home .how-wrap{
  max-width:var(--home-maxw);
  margin:0 auto;
}
.home .how-head .how-title{
  margin:4px 0 8px;
  font-weight:800; letter-spacing:-.02em; line-height:1.12;
  color:var(--color-secondary);
  font-size:clamp(28px, 4.6vw, 44px);
}
.home .how-lede{ max-width:60ch; }
.home .how-steps{
  margin:24px 0 0; padding:0; list-style:none;
  display:grid; gap:14px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){
  .home .how-steps{ grid-template-columns: 1fr; }
}
.home .how-step{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:16px; box-shadow:var(--home-shadow);
}
.home .how-step h3{ margin:0 0 6px; font-size:18px }

/* ---- FEATURES ---- */
.home .section-features{
  background:var(--color-primary);
  padding:clamp(48px, 7vw, 88px) 24px;
}
.home .features-wrap{ max-width:var(--home-maxw); margin:0 auto; }
.home .features-title{ text-align:center; margin:0 0 22px; }
.home .features-grid{
  display:grid; gap:16px; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px){ .home .features-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .home .features-grid{ grid-template-columns: 1fr; } }
.home .feature{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:18px; box-shadow:var(--home-shadow);
}
.home .feature-title{ margin:0 0 6px; font-size:18px }

/* ---- FAQ ---- */
.home .faq{
  background:#fff;
  padding:clamp(32px,6vw,72px) 24px;
  border-top:1px solid #eef; border-bottom:1px solid #eef;
}
.home .faq-wrap{ max-width:var(--home-maxw); margin:0 auto; }
.home .faq details{ border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; margin:10px 0; background:#fff; }
.home .faq summary{ cursor:pointer; font-weight:700; }
.home .faq .disc-panel{ margin-top:10px; }

/* ---- FINAL CTA ---- */
.home .section-cta{
  background:var(--color-primary);
  padding:clamp(40px,7vw,84px) 24px;
}
.home .cta-wrap{ max-width:var(--home-maxw); margin:0 auto; }
.home .cta-copy{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  padding:clamp(18px,3vw,28px); box-shadow:var(--home-shadow);
  display:grid; gap:10px; justify-items:start;
}
.home .cta-title{ margin:0; }
.home .cta-actions{ display:flex; gap:12px; }
.home .cta-disclaimer{ margin:4px 0 0; color:var(--color-highlight); font-size:14px; }

/* ---- Accessibility niceties ---- */
:where(.home a, .home button, .home summary):focus-visible{
  outline:3px solid var(--color-accent);
  outline-offset:2px;
  border-radius:8px;
}
/* WCAG 2.2 target size hint (24px min) */
.home .btn,
.home .chip,
.home .drawer-link,
.home .nav-actions .btn,
.home .primary-nav a{ min-height:24px; }