/* ── Interior Page Cinematic Layer ───────────────────────────────────────
   Applies the dark-hero, gold-accent, scroll-reveal aesthetic from the
   home page to FAQ, Resources, and Planning Tools interior pages.
   All content HTML is untouched — this is purely presentation.
   Respects prefers-reduced-motion via the cinematic.css base layer.
   ─────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   1. CINEMATIC PAGE HERO
   ══════════════════════════════════════════════════════════════════════════ */

.page-hero {
  background: linear-gradient(
    160deg,
    rgba(0,13,26,.97)  0%,
    rgba(0,29,58,.93)  45%,
    rgba(0,45,93,.88)  75%,
    rgba(0,70,160,.82) 100%
  ) !important;
  position: relative;
  overflow: hidden;
  padding: 96px 0 80px !important;
  color: #fff;
}

/* Radial glow layers */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 65%, rgba(0,87,168,.22) 0%, transparent 58%),
    radial-gradient(ellipse at 82% 18%, rgba(245,183,0,.07) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 90%, rgba(0,45,93,.15) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

/* Diagonal cut at bottom */
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 52px;
  background: #f8f9fa;
  clip-path: polygon(0 100%, 100% 12px, 100% 100%);
  pointer-events: none;
  z-index: 1;
}

/* Content above overlays */
.page-hero > .container { position: relative; z-index: 2; }

/* Text colors */
.page-hero h1 {
  color: #fff !important;
  text-shadow: 0 2px 28px rgba(0,0,0,.35);
}
.page-hero .page-hero-sub {
  color: rgba(255,255,255,.78) !important;
  font-size: 1.1rem;
  line-height: 1.65;
}
.page-hero .breadcrumb     { color: rgba(255,255,255,.45) !important; }
.page-hero .breadcrumb a   { color: rgba(245,183,0,.8)  !important; }
.page-hero .breadcrumb a:hover { color: #F5B700 !important; }

.page-hero .edu-disclaimer {
  background: rgba(255,255,255,.07)  !important;
  border-left-color: rgba(245,183,0,.45) !important;
  color: rgba(255,255,255,.62) !important;
  font-size: 13px !important;
}

.page-hero .btn {
  background: #F5B700  !important;
  color: #001529  !important;
  border: none  !important;
  font-weight: 700;
}
.page-hero .btn:hover,
.page-hero .btn:focus-visible {
  background: #e0a800 !important;
}

/* Scene label (01 · FAQ, etc.) */
.cin-scene-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #F5B700;
  opacity: .85;
  margin-bottom: 14px;
}

/* Animated background orb — same keyframe as kiosk */
@keyframes pcOrb {
  0%,100% { transform: scale(1)   translate(0,0); }
  33%      { transform: scale(1.1) translate(12px,-8px); }
  66%      { transform: scale(.95) translate(-8px,10px); }
}
.page-hero .pc-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  animation: pcOrb 14s ease-in-out infinite;
  z-index: 0;
}
.page-hero .pc-orb-1 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(0,87,168,.22) 0%, transparent 70%);
  top: -80px; left: -60px;
  animation-duration: 16s;
}
.page-hero .pc-orb-2 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(245,183,0,.10) 0%, transparent 70%);
  bottom: -60px; right: 10%;
  animation-duration: 20s;
  animation-delay: -6s;
}


/* ══════════════════════════════════════════════════════════════════════════
   2. SECTION RHYTHM
   ══════════════════════════════════════════════════════════════════════════ */

.section h2,
.section-alt h2 {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 20px;
}
.section h2::after,
.section-alt h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  background: #F5B700;
  border-radius: 2px;
}

/* Don't underline headings that already have pill badges — avoid double decoration */
.section h2:has(.pill)::after,
.section-alt h2:has(.pill)::after {
  display: none;
}

.highlight-box {
  border-left: 3px solid #F5B700 !important;
  background: linear-gradient(90deg, rgba(245,183,0,.05) 0%, transparent 100%) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. FAQ ACCORDION — cinematic feel
   ══════════════════════════════════════════════════════════════════════════ */

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.faq-item-accordion {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,45,93,.10) !important;
  background: #fff;
  transition: box-shadow .28s, border-color .28s, transform .2s;
  will-change: transform;
}
.faq-item-accordion:hover {
  border-color: rgba(245,183,0,.45) !important;
  box-shadow: 0 6px 28px rgba(0,45,93,.09) !important;
  transform: translateY(-1px);
}

.faq-question {
  transition: background .22s, color .22s, border-color .22s;
  border-left: 3px solid transparent;
  padding-left: 20px !important;
}
.faq-question[aria-expanded="true"] {
  background: linear-gradient(90deg, rgba(0,29,58,.04) 0%, transparent 100%) !important;
  color: #1565c0 !important;
  border-left-color: #F5B700 !important;
}

.faq-icon {
  transition: transform .3s cubic-bezier(.4,0,.2,1), color .2s;
}
.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
  color: #F5B700;
}

.faq-answer-inner {
  padding: 16px 20px 20px !important;
  border-top: 1px solid rgba(0,45,93,.07);
}


/* ══════════════════════════════════════════════════════════════════════════
   4. CONCERN CARDS
   ══════════════════════════════════════════════════════════════════════════ */

.concern-card {
  border: 1px solid rgba(0,45,93,.10) !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s, border-color .28s !important;
  will-change: transform;
}
.concern-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(245,183,0,.40) !important;
  box-shadow: 0 10px 36px rgba(0,45,93,.12) !important;
}
.concern-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. CATEGORY HUB CARDS
   ══════════════════════════════════════════════════════════════════════════ */

.category-hub-card {
  border: 1px solid rgba(0,45,93,.10) !important;
  transition: transform .32s cubic-bezier(.4,0,.2,1), box-shadow .32s, border-color .32s !important;
  position: relative;
  overflow: hidden;
}
.category-hub-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(245,183,0,.04) 100%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.category-hub-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(245,183,0,.5) !important;
  box-shadow: 0 14px 44px rgba(0,45,93,.14) !important;
}
.category-hub-card:hover::before { opacity: 1; }
.category-hub-card:hover .category-hub-count { color: #F5B700; }
.category-hub-card:hover .category-hub-link  { color: #1565c0; }


/* ══════════════════════════════════════════════════════════════════════════
   6. RELATED / NAV CARDS
   ══════════════════════════════════════════════════════════════════════════ */

.related-card {
  border: 1px solid rgba(0,45,93,.10) !important;
  transition: transform .25s, box-shadow .25s, border-color .25s !important;
}
.related-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(245,183,0,.35) !important;
  box-shadow: 0 8px 28px rgba(0,45,93,.10) !important;
}
.related-card strong { display: block; margin-bottom: 4px; }
.related-card .related-card-desc {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   7. RESOURCE CARDS
   ══════════════════════════════════════════════════════════════════════════ */

.resource-card {
  border: 1px solid rgba(0,45,93,.10) !important;
  transition: transform .28s, box-shadow .28s, border-color .28s !important;
  position: relative;
  overflow: hidden;
}
.resource-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #F5B700, #1565c0);
  opacity: 0;
  transition: opacity .3s;
}
.resource-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 36px rgba(0,45,93,.12) !important;
  border-color: rgba(245,183,0,.3) !important;
}
.resource-card:hover::after { opacity: 1; }


/* ══════════════════════════════════════════════════════════════════════════
   8. PLANNING TOOL STAGE BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */

.stage-btn.stage-icon-card {
  border: 1.5px solid rgba(0,45,93,.12) !important;
  transition: transform .28s, box-shadow .28s, border-color .28s, background .28s !important;
}
.stage-btn.stage-icon-card:hover {
  transform: translateY(-5px) !important;
  border-color: #F5B700 !important;
  box-shadow: 0 10px 32px rgba(245,183,0,.18) !important;
  background: linear-gradient(135deg, rgba(0,29,58,.03) 0%, rgba(245,183,0,.05) 100%) !important;
}
.stage-btn.stage-icon-card.active {
  border-color: #F5B700 !important;
  background: linear-gradient(135deg, rgba(0,29,58,.05) 0%, rgba(245,183,0,.08) 100%) !important;
  box-shadow: 0 6px 24px rgba(245,183,0,.20) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   9. TOOL CARD FRAMES
   ══════════════════════════════════════════════════════════════════════════ */

.tool-card-frame {
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(0,45,93,.10) !important;
  border-top: 3px solid #F5B700 !important;
  box-shadow: 0 4px 28px rgba(0,45,93,.08) !important;
  border-radius: 14px !important;
  overflow: hidden;
}
.tool-card-header {
  background: linear-gradient(90deg, rgba(0,29,58,.03) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(0,45,93,.08) !important;
  font-weight: 700;
  letter-spacing: .02em;
}

.out {
  background: linear-gradient(135deg, rgba(0,29,58,.03) 0%, rgba(245,183,0,.03) 100%) !important;
  border: 1px solid rgba(0,45,93,.08) !important;
  border-radius: 10px !important;
}

.kpi {
  color: #1565c0 !important;
  font-weight: 800 !important;
  font-size: 1.15em;
}


/* ══════════════════════════════════════════════════════════════════════════
   10. STAT / INFO CARDS (planning tools "Why Independent" section)
   ══════════════════════════════════════════════════════════════════════════ */

.nm-stat-card {
  border: 1px solid rgba(0,45,93,.10) !important;
  transition: transform .25s, box-shadow .25s, border-color .25s !important;
}
.nm-stat-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(245,183,0,.4) !important;
  box-shadow: 0 8px 28px rgba(0,45,93,.10) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   11. SEARCH INPUT — polished
   ══════════════════════════════════════════════════════════════════════════ */

.resources-search-wrap {
  position: relative;
}
.resources-search-input,
#faqSearchInput {
  border: 1.5px solid rgba(0,45,93,.18) !important;
  border-radius: 50px !important;
  padding: 14px 24px 14px 48px !important;
  font-size: 16px !important;
  transition: border-color .22s, box-shadow .22s !important;
  background: #fff !important;
}
.resources-search-input:focus,
#faqSearchInput:focus {
  border-color: #F5B700 !important;
  box-shadow: 0 0 0 3px rgba(245,183,0,.18) !important;
  outline: none !important;
}

#faqSearchInput {
  padding-left: 20px !important;
  border-radius: 10px !important;
  width: 100%;
  max-width: 640px;
  display: block;
}


/* ══════════════════════════════════════════════════════════════════════════
   12. PILL BADGES
   ══════════════════════════════════════════════════════════════════════════ */

.pill {
  background: rgba(245,183,0,.12) !important;
  color: #8a6000 !important;
  border: 1px solid rgba(245,183,0,.3) !important;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 50px;
  vertical-align: middle;
  margin-left: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   13. FAQ CATEGORY JUMP GRID — scene-card style
   ══════════════════════════════════════════════════════════════════════════ */

#faqCategorySection .related-card {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #1a2744;
  padding: 14px 18px;
}
#faqCategorySection .related-card .related-icon {
  color: #F5B700;
  font-size: 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   14. DARK CTA STRIP (state tabs, bottom sections)
   ══════════════════════════════════════════════════════════════════════════ */

.state-tabs .state-tab-btn {
  transition: background .22s, color .22s, border-color .22s !important;
}
.state-tabs .state-tab-btn[aria-selected="true"] {
  border-bottom-color: #F5B700 !important;
  color: #F5B700 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   15. PLANNING STORIES / SCENARIO CARDS
   ══════════════════════════════════════════════════════════════════════════ */

.scenario-card,
.planning-story-card {
  border: 1px solid rgba(0,45,93,.10) !important;
  transition: transform .25s, box-shadow .25s, border-color .25s !important;
}
.scenario-card:hover,
.planning-story-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(245,183,0,.35) !important;
  box-shadow: 0 8px 28px rgba(0,45,93,.10) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   16. NV CHECKLIST — tactile checkboxes
   ══════════════════════════════════════════════════════════════════════════ */

.nv-checklist input[type="checkbox"] {
  accent-color: #F5B700;
  width: 16px;
  height: 16px;
}
.nv-checklist-group {
  border: 1px solid rgba(0,45,93,.08) !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  background: #fff;
  transition: border-color .22s, box-shadow .22s;
}
.nv-checklist-group:hover {
  border-color: rgba(245,183,0,.3) !important;
  box-shadow: 0 4px 18px rgba(0,45,93,.07) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   17. SCROLL REVEAL — stagger for grid children
   ══════════════════════════════════════════════════════════════════════════ */

/* When a grid is given .cin-stagger, each child gets its own delay */
.cin-stagger > *:nth-child(1)  { transition-delay: .04s; }
.cin-stagger > *:nth-child(2)  { transition-delay: .10s; }
.cin-stagger > *:nth-child(3)  { transition-delay: .16s; }
.cin-stagger > *:nth-child(4)  { transition-delay: .22s; }
.cin-stagger > *:nth-child(5)  { transition-delay: .28s; }
.cin-stagger > *:nth-child(6)  { transition-delay: .34s; }
.cin-stagger > *:nth-child(7)  { transition-delay: .40s; }
.cin-stagger > *:nth-child(8)  { transition-delay: .46s; }
.cin-stagger > *:nth-child(9)  { transition-delay: .52s; }
.cin-stagger > *:nth-child(10) { transition-delay: .58s; }
.cin-stagger > *:nth-child(11) { transition-delay: .64s; }
.cin-stagger > *:nth-child(12) { transition-delay: .70s; }

/* ══════════════════════════════════════════════════════════════════════════
   18. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .page-hero {
    padding: 72px 0 60px !important;
  }
  .page-hero::after {
    height: 32px;
    clip-path: polygon(0 100%, 100% 8px, 100% 100%);
  }
  .page-hero h1 {
    font-size: clamp(1.6rem, 6vw, 2.4rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero .pc-orb { animation: none; }
  .faq-item-accordion,
  .concern-card,
  .category-hub-card,
  .related-card,
  .resource-card,
  .stage-btn.stage-icon-card,
  .nm-stat-card {
    transition: none !important;
    transform: none !important;
  }
}