/* InHouse Test Prep - light theme (modeled on the HP Evaluation Hub principles)
   Soft washed background, white cards with hairline borders, tinted accents,
   no dark bands. Loaded after each page's inline styles so it overrides them. */

:root {
  --paper: #F6F5F1;
  --surface: #FFFFFF;
  --surface-2: #F3F5F9;
  --line: #E3E7EE;
  --line-soft: #EEF1F5;
  --navy-tint: #EAEFF7;
  --navy-line: #D3DCEA;
  --gold-tint: #F8F1DD;
  --gold-line: #E4D29B;
  --gold-deep: #7D6419;
  --shadow-sm: 0 1px 2px rgba(27,43,75,.04);
  --shadow: 0 1px 3px rgba(27,43,75,.05), 0 8px 24px rgba(27,43,75,.05);
  --shadow-hover: 0 1px 3px rgba(27,43,75,.06), 0 10px 24px rgba(27,43,75,.08);
  --appbg:
    radial-gradient(80% 55% at 90% -8%, rgba(46,74,122,.09), transparent 60%),
    radial-gradient(70% 50% at 4% 6%, rgba(201,171,76,.10), transparent 55%),
    linear-gradient(176deg, #FBFAF6, #F5F6FA 60%, #F1F3F8);
}

body { background: #F5F6FA; position: relative; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--appbg); pointer-events: none; }

/* ---------- Nav: light glass bar instead of a navy band ---------- */
.nav {
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.logo, .nav .logo { color: var(--navy); }
.logo-slot {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: var(--shadow-sm); padding: 4px;
}
.nav-items a { color: var(--ink-muted); font-weight: 500; }
.nav-items a:hover { color: var(--navy); }
.nav-items a.current { color: var(--navy); box-shadow: inset 0 -2px 0 var(--gold); padding-bottom: 4px; }
.nav-toggle { color: var(--navy); }
.nav-toggle:hover { color: var(--navy-light); }

/* ---------- Buttons: tinted fills, not solid blocks ---------- */
.btn-gold {
  background: var(--gold-tint); color: var(--navy);
  border: 1.5px solid var(--gold); border-radius: 4px; font-weight: 600;
}
.btn-gold:hover { background: #F1E5C0; border-color: #B8992E; }
.btn-outline {
  background: var(--surface); color: var(--navy);
  border: 1.5px solid var(--navy-line); border-radius: 4px; font-weight: 600;
}
.btn-outline:hover { background: var(--navy-tint); color: var(--navy); border-color: var(--navy-light); }

/* ---------- Sections: let the washed background show through ---------- */
section,
.hero, .video-section, .who-section, .why-section, .process-section,
.meet-section, .reviews-section, .tools-section { background: transparent; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--gold-deep); font-weight: 700; letter-spacing: .14em;
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--gold-tint); flex: 0 0 auto;
}
.video-section .eyebrow, .reviews-section .eyebrow { justify-content: center; }
.video-section .eyebrow, .reviews-section .eyebrow, .final-cta .eyebrow { display: flex; }

/* ---------- Hero ---------- */
.hero { padding-bottom: 24px; }
.photo-block, .meet-photo {
  border-radius: 6px; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: linear-gradient(180deg, #EEF1F6, #E4E9F0);
}

/* ---------- Trust strip: chips instead of a dark bar ---------- */
.trust-strip { background: transparent; padding: 28px 0 8px; }
.trust-inner { justify-content: flex-start; gap: 10px; color: var(--navy); }
.trust-inner > span:not(.trust-dot) {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; font-weight: 600; font-size: 13px; box-shadow: var(--shadow-sm);
}
.trust-dot { display: none; }

/* ---------- Video ---------- */
.video-frame {
  background: linear-gradient(160deg, var(--navy-tint), #DDE5F1);
  border: 1px solid var(--navy-line); border-radius: 6px; box-shadow: var(--shadow);
}
.video-play { background: #fff; border: 1.5px solid var(--gold); box-shadow: var(--shadow); }
.video-play i { color: var(--navy); }
.video-caption { color: var(--ink-faint); }

/* ---------- Cards ---------- */
.who-card, .review-card, .why-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .22s, transform .18s;
}
.who-card:hover, .review-card:hover, .why-card:hover {
  border-color: var(--navy-line); box-shadow: var(--shadow-hover); transform: translateY(-2px);
}
.who-card i {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 6px;
  background: var(--gold-tint); color: var(--gold-deep); font-size: 26px;
}
.who-card p { font-weight: 600; }
.why-card { border-left: 1px solid var(--line); padding: 24px 26px; }
.why-card h3 { font-weight: 600; }
.why-grid { gap: 14px; }

/* ---------- Process ---------- */
.process-step {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 26px 18px; box-shadow: var(--shadow-sm);
}
.step-num {
  background: var(--navy-tint); color: var(--navy);
  box-shadow: 0 0 0 5px rgba(234,239,247,.55); font-weight: 700;
}
.process-step h3 { font-weight: 600; }

/* ---------- Meet / credentials ---------- */
.credentials span {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; font-weight: 600; color: var(--navy);
}
.credentials { gap: 8px; }
.link-arrow { font-weight: 600; }

/* ---------- Dashboard: light panel ---------- */
.dashboard {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: var(--shadow);
}
.dashboard-header { background: var(--navy-tint); border-radius: 6px; }
.dashboard-header .title { color: var(--navy); font-weight: 600; }
.dashboard-header .week {
  color: var(--gold-deep); background: var(--gold-tint); border-radius: 999px;
  padding: 3px 10px; font-weight: 700;
}
.metric { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 6px; }
.metric-bar { background: #E6EAF1; }

/* ---------- Final CTA: light card, not a navy band ---------- */
.final-cta { background: transparent; padding: 40px 0 96px; }
.final-cta > .container {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(201,171,76,.14), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(46,74,122,.10), transparent 60%),
    var(--surface);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow);
  padding: 72px 48px; max-width: 1104px;
}
.final-cta h2 { color: var(--navy); }
.final-cta p { color: var(--ink-muted); }

/* ---------- Footer: light ---------- */
footer { background: transparent; border-top: 1px solid var(--line); }
footer .logo, .footer-inner .logo { color: var(--navy); }
.footer-meta { color: var(--ink-soft); }
footer a { color: var(--ink-muted); }

/* ---------- Mobile menu ---------- */
@media (max-width: 960px) {
  .nav-items {
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 18px 40px -16px rgba(27,43,75,.25);
  }
  .nav-items a.current { box-shadow: none; }
  .final-cta > .container { padding: 48px 24px; margin: 0 16px; }
}

/* ---------- Restraint pass: no pills, no dot badges, editorial details ---------- */
.eyebrow::before {
  width: 22px; height: 1px; border-radius: 0; background: var(--gold); box-shadow: none;
}
/* trust strip: plain text between hairlines */
.trust-strip { padding: 36px 0 0; }
.trust-inner { position: relative; }
.trust-strip .container > span { padding: 16px 0 !important; }
.trust-inner::before, .trust-inner::after { content: ""; position: absolute; left: 48px; right: 48px; height: 1px; background: var(--line); }
.trust-inner::before { top: 0; } .trust-inner::after { bottom: 0; }
@media (max-width: 960px) { .trust-inner::before, .trust-inner::after { left: 28px; right: 28px; } }
.trust-inner {
  justify-content: space-between; gap: 0;
  padding-top: 0; padding-bottom: 0;
}
.trust-inner > span:not(.trust-dot) {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; font-weight: 500; font-size: 13.5px; color: var(--ink-muted); letter-spacing: .02em;
}
.trust-dot { display: inline; color: var(--gold); opacity: .8; }
/* credentials: text with thin separators */
.credentials { gap: 0; }
.credentials span {
  background: none; border: 0; border-radius: 0; padding: 0 16px; font-weight: 500;
  color: var(--ink-muted); border-left: 1px solid var(--line);
}
.credentials span:first-child { padding-left: 0; border-left: 0; }
/* icons: just the gold glyph, no tinted tiles */
.who-card i { background: none; width: auto; height: auto; font-size: 30px; color: var(--gold); }
.dashboard-header .week { background: none; padding: 0; border-radius: 0; }
.step-num { box-shadow: none; border: 1px solid var(--navy-line); }
.video-play { border-radius: 50%; }
.nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.94); }
.who-card:hover, .review-card:hover, .why-card:hover { transform: none; }
@media (max-width: 560px) {
  .trust-inner { justify-content: center; gap: 8px 14px; }
  .trust-dot { display: none; }
}

/* hide photo placeholders once the real photo is in */
.photo-block:has(img) > i, .photo-block:has(img) > .caption,
.meet-photo:has(img) > i, .meet-photo:has(img) > .caption { display: none; }
.photo-block .photo-img { object-fit: cover; object-position: center bottom; }

/* inline links in body copy */
.lede a, .contact-alt a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.footer-meta a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }
