/* WasItMe — patch.css
   Load AFTER /css/styles.css on every page.

   Why this file exists: index.html and assessment/index.html were written
   against a stylesheet that never shipped. Their class names (.hero-title,
   .dimension-card, .pricing-card, .final-cta, .footer-inner, and ~30 others)
   appear nowhere in styles.css, so both pages rendered as unstyled HTML in
   production. This file defines those classes using the existing design
   tokens so the look matches the rest of the site. Nothing here overrides
   an existing rule — it is purely additive.
*/

/* ---------- NAV (homepage uses div/a, styles.css assumes ul/li) ---------- */
.nav-links .nav-link{
  color:var(--text-secondary);font-family:Arial,sans-serif;font-size:0.82rem;
  letter-spacing:0.08em;text-transform:uppercase;transition:color var(--transition);
}
.nav-links .nav-link:hover{color:var(--gold)}
.btn-sm{padding:9px 20px;font-size:0.78rem}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

/* ---------- HERO ---------- */
.hero{padding:170px 0 90px;text-align:center;position:relative;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,0.09),transparent 62%);
  pointer-events:none;
}
.hero-inner{max-width:760px;margin:0 auto;padding:0 24px;position:relative}
.hero-title{font-size:clamp(2.1rem,5.4vw,3.4rem);color:var(--cream);letter-spacing:-0.02em;margin-bottom:24px;line-height:1.22}
.hero-subtitle{font-family:Arial,sans-serif;font-size:1.08rem;color:var(--text-secondary);max-width:580px;margin:0 auto 38px;line-height:1.8}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.hero-badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.badge{
  font-family:Arial,sans-serif;font-size:0.74rem;letter-spacing:0.06em;color:var(--text-muted);
  border:1px solid var(--border);border-radius:100px;padding:7px 15px;
}
.hero-disclaimer{
  font-family:Arial,sans-serif;font-size:0.78rem;color:var(--text-muted);
  max-width:600px;margin:0 auto;line-height:1.65;
}

/* ---------- SECTION HEADS ---------- */
.section-title{text-align:center;color:var(--cream);margin-bottom:12px}
.section-subtitle{
  text-align:center;font-family:Arial,sans-serif;font-size:0.95rem;
  color:var(--text-muted);max-width:600px;margin:0 auto 48px;line-height:1.75;
}

/* ---------- FIVE PATTERNS ---------- */
.dimensions{background:var(--navy-mid)}
.dimensions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.dimension-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px 26px;transition:all var(--transition);
}
.dimension-card:hover{border-color:rgba(201,168,76,0.45);transform:translateY(-3px)}
.dimension-icon{font-size:1.6rem;margin-bottom:14px;line-height:1}
.dimension-card h3{font-size:1.06rem;color:var(--cream);margin-bottom:10px}
.dimension-card p{font-family:Arial,sans-serif;font-size:0.87rem;color:var(--text-secondary);line-height:1.75}

/* ---------- WHO IT'S FOR ---------- */
.for-who-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.for-who-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px}
.for-who-card.for-you{border-left:3px solid var(--gold)}
.for-who-card.not-for-you{border-left:3px solid rgba(184,196,212,0.35)}
.for-who-card h3{font-size:1.02rem;margin-bottom:18px;color:var(--cream)}
.for-who-card ul{list-style:none}
.for-who-card li{
  font-family:Arial,sans-serif;font-size:0.88rem;color:var(--text-secondary);
  line-height:1.7;margin-bottom:12px;padding-left:18px;position:relative;
}
.for-who-card li::before{content:'—';position:absolute;left:0;color:var(--gold);opacity:0.55}

/* ---------- PRICING ---------- */
.pricing-label{
  font-family:Arial,sans-serif;font-size:0.7rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--text-muted);
}
.pricing-amount{font-family:Georgia,serif;font-size:3.2rem;color:var(--gold);margin:14px 0 8px;line-height:1}
.pricing-desc{font-family:Arial,sans-serif;font-size:0.88rem;color:var(--text-secondary);margin-bottom:28px}
.pricing-features{text-align:left;list-style:none;margin-bottom:30px}
.pricing-features li{
  display:flex;gap:9px;align-items:flex-start;margin-bottom:11px;
  font-family:Arial,sans-serif;font-size:0.86rem;color:var(--text-secondary);line-height:1.6;
}
.pricing-features li::before{content:'◆';color:var(--gold);font-size:0.48rem;padding-top:7px;flex-shrink:0}
.pricing-note{font-family:Arial,sans-serif;font-size:0.78rem;color:var(--text-muted);margin-top:14px}

/* ---------- FAQ ACCORDION ---------- */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{
  width:100%;background:none;border:none;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px 0;font-family:Georgia,serif;font-size:1rem;color:var(--cream);
}
.faq-q span{color:var(--gold);font-size:1.2rem;transition:transform var(--transition);flex-shrink:0}
.faq-item.open .faq-q span{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.35s ease}
.faq-item.open .faq-a{max-height:420px}
.faq-a p{font-family:Arial,sans-serif;font-size:0.9rem;color:var(--text-secondary);padding-bottom:22px;line-height:1.8}

/* ---------- FINAL CTA ---------- */
.final-cta{text-align:center;background:var(--navy-mid)}
.final-cta h2{margin-bottom:26px}
.final-cta .disclaimer-text{
  font-family:Arial,sans-serif;font-size:0.78rem;color:var(--text-muted);
  max-width:640px;margin:30px auto 0;line-height:1.7;
}

/* ---------- FOOTER (homepage variant) ---------- */
.footer{background:var(--navy);border-top:1px solid var(--border);padding:60px 0 34px}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 24px}
.footer-logo{font-family:Georgia,serif;font-size:1.3rem;color:var(--cream);letter-spacing:0.05em;margin-bottom:8px}
.footer-tagline{font-family:Arial,sans-serif;font-size:0.86rem;color:var(--text-muted);margin-bottom:38px}
.footer-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:26px;margin-bottom:34px}
.footer-col-title{
  font-family:Arial,sans-serif;font-size:0.7rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px;
}
.footer-col a{display:block;font-family:Arial,sans-serif;font-size:0.85rem;color:var(--text-secondary);margin-bottom:8px}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{
  border-top:1px solid var(--border);padding-top:22px;
  font-family:Arial,sans-serif;font-size:0.8rem;color:var(--text-muted);
}

/* ---------- ASSESSMENT ADDITIONS ---------- */
.safety-bar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:rgba(201,168,76,0.07);border-bottom:1px solid var(--border);
  padding:11px 24px;font-family:Arial,sans-serif;font-size:0.78rem;color:var(--text-muted);
}
.quick-exit{
  border:1px solid var(--border);border-radius:6px;padding:5px 13px;
  font-size:0.74rem;color:var(--text-secondary);white-space:nowrap;
}
.quick-exit:hover{border-color:var(--gold);color:var(--gold)}
.q-num{font-family:Arial,sans-serif;font-size:0.74rem;color:var(--text-muted);margin-bottom:12px}
.save-note{
  font-family:Arial,sans-serif;font-size:0.79rem;color:var(--text-muted);
  text-align:center;margin:26px 0 40px;
}
.answer-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- CATEGORY BARS (checkout + results) ---------- */
.cat-row{margin-bottom:26px}
.cat-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:12px}
.cat-name{font-family:Georgia,serif;font-size:0.95rem;color:var(--cream)}
.cat-score{font-family:Arial,sans-serif;font-size:0.82rem;color:var(--gold)}
.cat-track{height:8px;background:rgba(255,255,255,0.08);border-radius:100px;overflow:hidden}
.cat-fill{height:100%;background:linear-gradient(90deg,#a8893a,var(--gold));border-radius:100px;transition:width 0.8s ease}
.cat-insight{font-family:Arial,sans-serif;font-size:0.84rem;color:var(--text-secondary);line-height:1.7;margin-top:9px}

/* ---------- LOCKED PREVIEW ---------- */
.blur-wrap .locked-text{
  font-family:Arial,sans-serif;font-size:0.84rem;color:var(--text-secondary);
  line-height:1.7;margin-top:9px;filter:blur(3.4px);user-select:none;
}
.locked-note{
  font-family:Arial,sans-serif;font-size:0.82rem;color:var(--text-muted);
  text-align:center;margin-top:20px;
}

/* ---------- CHECKOUT REASSURANCE ---------- */
.reassure-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:38px}
.reassure{
  background:rgba(30,48,80,0.35);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;font-family:Arial,sans-serif;font-size:0.83rem;
  color:var(--text-secondary);line-height:1.7;
}
.reassure strong{color:var(--cream);display:block;margin-bottom:5px}

.insight-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;margin-bottom:16px;
}
.insight-card h4{color:var(--gold);font-family:Georgia,serif;font-size:1rem;margin-bottom:8px}
.insight-card p{font-family:Arial,sans-serif;font-size:0.88rem;line-height:1.7}

.alert-urgent{
  background:rgba(201,168,76,0.1);border:1px solid var(--gold);border-radius:var(--radius);
  padding:18px 22px;font-family:Arial,sans-serif;font-size:0.88rem;
  color:var(--cream);line-height:1.7;margin:28px 0;
}

/* ---------- ACCESSIBILITY / MOTION ---------- */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
  html{scroll-behavior:auto}
}
@media(max-width:640px){
  .hero{padding:130px 0 64px}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  section{padding:56px 0}
}