/* The Feeling Habit — page overrides (hybrid mode)
   Uses global site styles from /style.css plus this file.
*/

.fh-page{
  background: #F7F7FA;
  color: #222;
}

.fh-page header{
  background: #0A1A3F;
  color: #fff;
}

.fh-page .brand{
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  text-transform: uppercase;
}
.fh-page .brand span{ color: #D4AF37; }

.fh-page main{
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.fh-page section{ margin-bottom: 3rem; }

/* Hero */
.fh-page .hero{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
  gap: 2.5rem;
  align-items: center;
}

.fh-page .eyebrow{
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #D4AF37;
  font-weight: 600;
}

.fh-page h1{
  font-size: clamp(2.1rem, 4vw, 2.7rem);
  margin: 0.4rem 0 0.6rem;
  color: #0A1A3F;
}
.fh-page h1 span{ color: #D4AF37; }

.fh-page h2{ color: #0A1A3F; }

.fh-page .hero-subtitle{ font-size: 1rem; margin-bottom: 1rem; }
.fh-page .hero-highlight{ font-weight: 600; color: #0A1A3F; }

.fh-page .hero-list{ margin: 0.5rem 0 1.5rem; padding-left: 1.1rem; }
.fh-page .hero-list li{ margin-bottom: 0.4rem; }

.fh-page .hero-cta-group{ display:flex; flex-wrap:wrap; gap: .75rem; align-items:center; }
.fh-page .hero-note{ font-size: .9rem; opacity: .85; margin-top: .4rem; }

/* Buttons */
.fh-page .fh-cta,
.fh-page .fh-nav-cta{
  border-radius: 999px;
  background: #D4AF37;
  color: #0A1A3F;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fh-page .fh-cta{ padding: .85rem 1.6rem; font-size: .98rem; }
.fh-page .fh-nav-cta{ padding: .6rem 1.2rem; font-size: .9rem; }

/* Right card */
.fh-page .hero-right{
  background:#fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 14px 35px rgba(10, 26, 63, 0.12);
  border: 1px solid rgba(10,26,63,0.06);
}
.fh-page .badge-book{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:600;
  color:#0A1A3F;
  margin-bottom:.8rem;
}


/* PATCH: Fix readability for the badge line ("Practical Communication • Real-World Tools")
   Some global hero color rules can bleed through; force contrast here without changing layout.
*/
.fh-page .badge-book{
  background: rgba(212, 175, 55, 0.18);
  padding: .35rem .6rem;
  border-radius: 999px;
  color: #0A1A3F !important;
}
.fh-page .badge-book *{ color: #0A1A3F !important; }

.fh-page .badge-dot{
  width:8px;height:8px;border-radius:50%;background:#D4AF37;
}
.fh-page .book-title{
  font-size:1.3rem;font-weight:700;margin:0 0 .3rem;color:#0A1A3F;
}
.fh-page .book-sub{ font-size:.9rem; opacity:.9; margin-bottom:.75rem; }
.fh-page .book-meta{ font-size:.85rem; opacity:.85; margin-bottom:.6rem; }
.fh-page .mini-divider{
  width:40px;height:3px;background:#D4AF37;border-radius:999px;margin:.6rem 0 .9rem;
}
.fh-page .book-note{
  font-size:.85rem;
  background:#f4f4fb;
  border-radius:8px;
  padding:.75rem .9rem;
  border-left:3px solid #D4AF37;
  margin-top:.5rem;
}

/* Content layouts */
.fh-page .two-column{
  display:grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr);
  gap: 2rem;
}

.fh-page .pill-list{
  list-style:none;
  padding:0;
  margin:.75rem 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.fh-page .pill-list li{
  font-size:.85rem;
  padding:.3rem .7rem;
  border-radius:999px;
  border:1px solid rgba(10,26,63,0.16);
  background: rgba(255,255,255,0.95);
}

.fh-page .feature-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}
.fh-page .feature-card{
  background:#fff;
  border-radius:12px;
  padding: 1rem 1.1rem;
  border:1px solid rgba(10,26,63,0.06);
  box-shadow: 0 10px 24px rgba(10,26,63,0.06);
}
.fh-page .feature-label{
  font-size:.8rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#D4AF37;
  margin-bottom:.3rem;
}
.fh-page .feature-card h3{ font-size:1.05rem; margin:0 0 .35rem; color:#0A1A3F; }
.fh-page .feature-card p{ font-size:.9rem; margin:0; }

.fh-page .pill-group{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:.75rem 0 0;
}
.fh-page .pill{
  font-size:.85rem;
  padding:.32rem .75rem;
  border-radius:999px;
  border:1px solid rgba(10,26,63,0.16);
  background: rgba(255,255,255,0.96);
}

.fh-page .callout{
  background:#0A1A3F;
  color:#fff;
  border-radius:16px;
  padding:2rem 1.6rem;
  text-align:center;
  margin-top:1rem;
}
.fh-page .callout p{ margin:.4rem 0; }
.fh-page .callout .btn{ background:#D4AF37; color:#0A1A3F; margin-top:.7rem; }

/* FAQ */
.fh-page .faq-item{
  background:#fff;
  border-radius:10px;
  padding:.9rem 1rem;
  border:1px solid rgba(10,26,63,0.08);
  margin-bottom:.6rem;
}
.fh-page .faq-q{ font-weight:700; font-size:.95rem; color:#0A1A3F; }
.fh-page .faq-a{ font-size:.9rem; margin-top:.25rem; }

/* Footer */
.fh-page footer{
  background:#0A1A3F;
  color: rgba(255,255,255,0.9);
  padding: 1.5rem 1.25rem 1.4rem;
  margin-top: 2rem;
}
.fh-page .footer-inner{
  max-width:1100px;
  margin:0 auto;
  font-size:.8rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.75rem;
  align-items:center;
}
.fh-page .footer-inner a{
  color: rgba(255,255,255,0.9);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Small utilities used from inline conversions */
.fh-small{ font-size: .9rem; }
.mb-06{ margin-bottom: .6rem; }
.mt-0{ margin-top: 0; }

/* Responsive */
@media (max-width: 840px){
  .fh-page .hero{ grid-template-columns: 1fr; }
  .fh-page .hero-right{ order:-1; }
  .fh-page .two-column{ grid-template-columns: 1fr; }
  .fh-page header{ position: static; }
  .fh-page .nav-cta{ display:none; }
}
@media (max-width: 480px){
  .fh-page .hero-cta-group{ flex-direction: column; align-items: flex-start; }
}

/* =========================
   SAFETY NET: white containers always readable
   Prevents global `.hero` color from making text unreadable on light panels.
========================= */
.fh-page .hero-right,
.fh-page .card,
.fh-page .panel{
  color:#222;
}
.fh-page .hero-right p,
.fh-page .hero-right li,
.fh-page .book-sub,
.fh-page .book-meta,
.fh-page .fh-small,
.fh-page .book-note{
  color:#222 !important;
  opacity: 1;
}

/* Badge block ("Practical Communication • Real-World Tools") */
.fh-page .badge-book{
  background: rgba(212, 175, 55, 0.18);
  padding: .35rem .6rem;
  border-radius: 999px;
  color: #0A1A3F !important;
  border: 1px solid rgba(0,0,0,0.08);
}
.fh-page .badge-book *{ color: #0A1A3F !important; }