/* Detail Vault — Precision Vault theme stylesheet.
   Palette from the approved media kit (G:\My Drive\Detail Vault\..d34481f4907c380a622cf24d.png,
   section 9): Deep Graphite / Slate Grey / Light Grey / Electric Cyan. */

:root {
  --dv-graphite: #0e1116;
  --dv-slate: #2a323b;
  --dv-lightgrey: #b8bdc4;
  --dv-cyan: #00b9ff;
  --dv-white: #ffffff;
  --dv-max-width: 1152px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--dv-graphite);
  color: var(--dv-lightgrey);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.dv-wrap {
  max-width: var(--dv-max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Header */
.dv-header {
  border-bottom: 1px solid var(--dv-slate);
  background: var(--dv-graphite);
}
.dv-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}
.dv-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dv-white);
}
.dv-logo svg { width: 2.25rem; height: 2.25rem; }
.dv-logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.dv-logo-text span:first-child { font-weight: 800; letter-spacing: 0.04em; font-size: 1.05rem; }
.dv-logo-text span:last-child { font-weight: 800; letter-spacing: 0.04em; font-size: 1.05rem; color: var(--dv-cyan); }

.dv-nav { display: none; gap: 1.5rem; font-size: 0.9rem; font-weight: 500; align-items: center; }
.dv-nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.dv-nav li { margin: 0; }
.dv-nav a:hover { color: var(--dv-white); }

.dv-search-form { display: none; align-items: center; gap: 0.75rem; }
.dv-search-form input {
  width: 14rem;
  border-radius: 0.375rem;
  border: 1px solid var(--dv-slate);
  background: transparent;
  color: var(--dv-white);
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
}
.dv-search-form input::placeholder { color: rgba(184,189,196,0.6); }

@media (min-width: 768px) {
  .dv-nav, .dv-search-form { display: flex; }
}

/* Buttons */
.dv-btn {
  display: inline-block;
  border-radius: 0.375rem;
  padding: 0.6rem 1.1rem;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid transparent;
  cursor: pointer;
}
.dv-btn-primary { background: var(--dv-cyan); color: var(--dv-graphite); }
.dv-btn-primary:hover { filter: brightness(1.1); }
.dv-btn-outline { border-color: var(--dv-slate); color: var(--dv-white); background: transparent; }
.dv-btn-outline:hover { border-color: var(--dv-cyan); }

/* Hero */
.dv-hero { border-bottom: 1px solid var(--dv-slate); text-align: center; padding: 5.5rem 0; background-size: cover; background-position: center; }
.dv-hero-eyebrow { color: var(--dv-cyan); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.dv-hero h1 { color: var(--dv-white); font-size: 2.5rem; font-weight: 800; margin: 1rem auto; max-width: 44rem; }
.dv-hero h1 .cyan { color: var(--dv-cyan); }
.dv-hero p.lead { max-width: 32rem; margin: 0.5rem auto; }
.dv-hero-search { display: flex; gap: 0.5rem; max-width: 28rem; margin: 2rem auto 0; }
.dv-hero-search input { flex: 1; border-radius: 0.375rem; border: 1px solid var(--dv-slate); background: transparent; color: var(--dv-white); padding: 0.65rem 1rem; }
.dv-hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; }
.dv-hero-trust { margin-top: 1.5rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(184,189,196,0.7); }

/* Grid / Cards */
.dv-section { padding: 3.5rem 0; }
.dv-section-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(184,189,196,0.7); margin-bottom: 1rem; }
.dv-grid { display: grid; gap: 1rem; grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .dv-grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dv-grid-4 { grid-template-columns: repeat(4, 1fr); } .dv-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.dv-card {
  border: 1px solid var(--dv-slate);
  border-radius: 0.5rem;
  padding: 1.25rem;
  transition: border-color 0.15s ease;
}
.dv-card:hover { border-color: var(--dv-cyan); }
.dv-card h3 { color: var(--dv-white); margin: 0 0 0.25rem; font-size: 1rem; }
.dv-card p { margin: 0; font-size: 0.9rem; }

.dv-badge { display: inline-block; background: var(--dv-slate); color: var(--dv-cyan); border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; }

/* Footer */
.dv-footer { border-top: 1px solid var(--dv-slate); padding: 3rem 0; font-size: 0.9rem; }
.dv-footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .dv-footer-grid { grid-template-columns: 1.2fr repeat(4, 1fr); } }
.dv-footer h3 { color: var(--dv-white); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.75rem; }
.dv-footer ul { list-style: none; margin: 0; padding: 0; }
.dv-footer li { margin-bottom: 0.5rem; }
.dv-footer li a:hover, .dv-footer-grid a:hover { color: var(--dv-white); }
.dv-footer-legal { margin-top: 2.5rem; font-size: 0.75rem; color: rgba(184,189,196,0.6); max-width: 40rem; }
.dv-footer-copy { margin-top: 1rem; font-size: 0.75rem; color: rgba(184,189,196,0.4); }

/* Content pages */
.dv-page { max-width: 48rem; margin: 0 auto; padding: 3rem 1.25rem; }
.dv-page h1 { color: var(--dv-white); font-size: 1.75rem; margin-bottom: 0.5rem; }
.dv-page .dv-content a { color: var(--dv-cyan); text-decoration: underline; }
.dv-page .dv-content h2 { color: var(--dv-white); margin-top: 2rem; }
.dv-page .dv-content ul { padding-left: 1.25rem; }
.dv-meta { font-size: 0.8rem; color: rgba(184,189,196,0.5); border-top: 1px solid var(--dv-slate); margin-top: 2rem; padding-top: 1.5rem; }

/* Single guide/product */
.dv-single { max-width: 44rem; margin: 0 auto; padding: 3rem 1.25rem; }
.dv-single h1 { color: var(--dv-white); font-size: 1.75rem; }
.dv-pros-cons { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 640px) { .dv-pros-cons { grid-template-columns: 1fr 1fr; } }
.dv-pros-cons h2 { color: var(--dv-white); font-size: 1rem; }
.dv-offers { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--dv-slate); }
.dv-offers .dv-btn { margin-right: 0.5rem; margin-bottom: 0.5rem; }

/* Empty state */
.dv-empty { color: rgba(184,189,196,0.6); font-size: 0.9rem; margin-top: 2rem; }

/* ---- Detail Vault Toolkit: offer buttons, ad zones, lead capture (added 2026-08-22) ---- */
.dv-offer-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; }
.dv-btn-offer { display: inline-block; padding: 0.6rem 1.1rem; border-radius: 6px; font-size: 0.9rem; font-weight: 600; text-decoration: none; background: var(--dv-cyan); color: var(--dv-graphite); transition: filter 0.15s; }
.dv-btn-offer:hover { filter: brightness(1.1); }
.dv-btn-offer.dv-btn-awin { background: transparent; border: 1px solid var(--dv-slate); color: var(--dv-white); }
.dv-btn-offer.dv-btn-awin:hover { border-color: var(--dv-cyan); }

.dv-ad-zone { display: flex; justify-content: center; align-items: center; margin: 1.75rem auto; overflow: hidden; }
.dv-ad-zone-leaderboard { min-height: 50px; }
.dv-ad-zone-sidebar { min-height: 250px; }
.dv-ad-mobile-only { display: block; }
.dv-ad-desktop-only { display: none; }
@media (min-width: 768px) { .dv-ad-mobile-only { display: none; } .dv-ad-desktop-only { display: block; } }

.dv-promo-banner { display: block; width: 100%; max-width: 728px; text-align: center; padding: 1rem 1.25rem; border-radius: 8px; background: linear-gradient(135deg, var(--dv-slate), var(--dv-graphite)); border: 1px solid var(--dv-slate); color: var(--dv-cyan); font-weight: 600; text-decoration: none; font-size: 0.95rem; }
.dv-promo-banner:hover { border-color: var(--dv-cyan); }

.dv-leadform { background: var(--dv-slate); border-radius: 10px; padding: 1.75rem; margin: 2rem 0; display: grid; gap: 1rem; }
.dv-leadform-copy h3 { color: var(--dv-white); margin: 0 0 0.4rem; font-size: 1.15rem; }
.dv-leadform-copy p { color: var(--dv-lightgrey); margin: 0; font-size: 0.9rem; }
.dv-leadform-footer { max-width: var(--dv-max-width); margin: 0 auto 2rem; }

/* ---- Product/card imagery (added 2026-08-22) ---- */
.dv-card-image { margin: -1px -1px 0.75rem; border-radius: 8px 8px 0 0; overflow: hidden; background: var(--dv-graphite); display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; }
.dv-card-image img { width: 100%; height: 100%; object-fit: contain; padding: 0.75rem; }
.dv-product-hero { margin: 1.25rem 0; border-radius: 10px; overflow: hidden; background: var(--dv-slate); display: flex; align-items: center; justify-content: center; max-height: 22rem; }
.dv-product-hero img { max-width: 100%; max-height: 22rem; object-fit: contain; padding: 1.5rem; }

/* ---- Page hero banner, reused across hub/category pages (added 2026-08-22) ---- */
.dv-page-hero { background-size: cover; background-position: center; padding: 3.5rem 0; border-bottom: 1px solid var(--dv-slate); text-align: center; }
.dv-page-hero h1 { color: var(--dv-white); font-size: 2rem; margin: 0 0 0.5rem; }
.dv-page-hero .lead { max-width: 34rem; margin: 0 auto; }