/* ============================================================
   HOMEPAGE — WARM LIGHT EXPLORATION + DARK PRODUCT WINDOW
   ------------------------------------------------------------
   Dedicated file, loaded only by views/layout.ejs (confirmed via
   grep — .mh-hero/.mh-value-footer/.mh-trust-bar/hero.ejs are
   exclusive to the homepage; no other page includes them). No
   body-class scoping needed. Replaces the earlier
   body.mh-light-hybrid scoped-override approach entirely — that
   whole mechanism (and its now-broken half-state on the live repo)
   is retired in favor of this dedicated file, per the "prefer
   dedicated files over scoped body-class overrides" instruction.

   Palette (warm, matching why.css/architecture-light.css):
     page background   #F7F6F2
     alt section        #F2F3F1
     card                #FFFFFF
     subtle warm surface #FAF9F6
     border              #E5E7EB
     primary text        #0B1020
     secondary text      #5F6B82

   NOT touched, on purpose: the Live Interview Terminal
   (.mh-terminal-v2*, in hero-v2.css) — stays dark navy by design,
   "light premium marketing environment -> dark intelligent product
   surface" is the explicit, intentional transition this brief asks
   for. Its content (AI Engine Status, STAR Progress, Overall
   Intelligence Score, 5-Vector Intelligence, AI Activity Feed) and
   all five-vector colors are completely unmodified.
   ============================================================ */

.mh-hero {
  background: linear-gradient(
    100deg,
    #F7F8F6 0%,
    #F7F8F6 38%,
    #EEF2F7 50%,
    #DCE5F2 60%,
    #0B1427 74%,
    #080F20 100%
  );
}
.mh-hero-glow { background: none; }
.mh-hero-badge {
  background: rgba(30, 64, 175, 0.08);
  border-color: rgba(30, 64, 175, 0.2);
}
.mh-hero-badge-text { color: #0B1020; }
/* badge dot stays --blue-bright — a blue indicator dot, not a fully
   blue badge, per the approved direction. */
.mh-hero-h1 { color: #0B1020; }
.mh-hero-h2 { color: #5F6B82; }
.mh-hero-chip { background: #FFFFFF; border: 1px solid #D6DAE0; color: #1E293B; }
.mh-hero-chip-icon-purple  { background: rgba(167, 139, 250, 0.22); color: #7C3AED; }
.mh-hero-chip-icon-green   { background: rgba(5, 150, 105, 0.16);   color: #059669; }
.mh-hero-chip-icon-amber   { background: rgba(217, 119, 6, 0.16);   color: #B45309; }
.mh-hero-chip-icon-magenta { background: rgba(236, 72, 153, 0.18);  color: #DB2777; }
.mh-btn-primary { background: var(--royal-blue); color: #fff; }
.mh-btn-primary:hover { background: #1E3A8A; }
.mh-btn-outline {
  background: transparent;
  color: #0B1020;
  border: 1.5px solid #D6DAE0;
}
.mh-btn-outline:hover { background: #F2F3F1; }
.mh-hero-tertiary { color: #5F6B82; }
.mh-hero-tertiary:hover { color: #0B1020; }
.mh-hero-tertiary-icon { border-color: #D6DAE0; color: #5F6B82; }
.mh-hero-tertiary:hover .mh-hero-tertiary-icon { border-color: var(--blue-bright); color: var(--blue-bright); }

/* Homepage nav override REMOVED per explicit instruction: the nav must
   stay the existing dark navy global navigation (medhaiq.css), unchanged
   on every page including the homepage. No homepage-specific .mh-nav
   rule exists in this file anymore. */

.mh-hero-badge { margin-bottom: 14px; }
.mh-hero-h1 { margin-bottom: 14px; }
.mh-hero-h2 { margin-bottom: 20px; }
.mh-hero-chips { margin-bottom: 22px; gap: 8px; }
.mh-hero-chip { padding: 8px 12px; }
.mh-hero-actions { margin-bottom: 10px; }
.mh-hero-tertiary-row { margin-bottom: 0; }

/* Fixed-nav clearance: .mh-hero's original top padding (56px) was less
   than the fixed nav's own 68px height, so hero content — including the
   Terminal — started underneath it. */
.mh-hero {
  padding-top: 104px; /* 68px nav + ~36px breathing room */
}

/* Pre-existing left-edge mask (added to blend the terminal into the OLD
   dark hero) reveals the light background bleeding through at the edge
   now that the hero is light. Traced in an earlier round — the
   terminal's own background/border/content are untouched, this only
   disables a fade effect that no longer applies. */
.mh-terminal-v2 {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Modest proportional scale-down (not a height cap, which risks
   clipping content that doesn't fit) so the full Terminal — including
   the AI Activity Feed at the bottom — comfortably fits within the
   viewport below the now-taller nav clearance, on typical laptop
   heights, without ever being cut off. Scales the whole panel and its
   content together; nothing inside it is altered or truncated. */
.mh-hero-inner { grid-template-columns: 44% 56%; align-items: center; }

.mh-hero-mockup-wrap {
  filter: none;
  transform: none;
}

/* Desktop internal reorg — CSS grid placement only, DOM order
   unchanged (still Engine, STAR, Score, Vectors, Feed in the HTML,
   exactly as before). Row 1: Engine + STAR. Row 2: Score + Feed.
   Row 3: Vectors, full width. */
/* RESTORE ORIGINAL TALL VERTICAL TERMINAL LAYOUT */
.mh-terminal-v2-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.mh-terminal-v2-block,
.mh-terminal-v2-block-last {
  border-left: none !important;
  padding-left: 0 !important;
  width: 100% !important;
}

.mh-terminal-v2-vectors {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Value-footer strip directly below hero — quiet, subtle warm
   surface per "no additional shades just for variety" discipline */
.mh-value-footer {
  background: #FAF9F6;
  border-top: 1px solid #E5E7EB;
}
.mh-value-footer-title { color: #0B1020; }
.mh-value-footer-sub { color: #5F6B82; }
.mh-value-footer-icon-blue   { background: rgba(59, 130, 246, 0.14);  color: #1D4ED8; }
.mh-value-footer-icon-purple { background: rgba(167, 139, 250, 0.22); color: #7C3AED; }
.mh-value-footer-icon-orange { background: rgba(217, 119, 6, 0.16);   color: #B45309; }
.mh-value-footer-icon-teal   { background: rgba(45, 212, 191, 0.20);  color: #0F766E; }
.mh-value-footer-icon-violet { background: rgba(139, 92, 246, 0.20);  color: #6D28D9; }

/* Trust bar — text marquee of company names (no logo image assets
   exist for these companies in the codebase, confirmed via
   trust-bar.ejs; keeping the existing text-based treatment exactly,
   only recoloring for the light page it now sits on). */
.mh-trust-bar {
  background: #F2F3F1;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}
.mh-trust-label { color: #64748B; }
.mh-trust-name { color: #1E293B; }
.mh-trust-sep { color: #A8B2C0; }

@media (max-width: 900px) {
  .mh-hero {
    background: #F7F8F6;
    padding-top: 96px;
  }
  .mh-hero-inner { grid-template-columns: 1fr; }
  .mh-hero-mockup-wrap { width: 100%; }
  .mh-terminal-v2-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .mh-terminal-v2-block:nth-child(2),
  .mh-terminal-v2-block-last {
    border-left: none;
    padding-left: 0;
  }
  .mh-terminal-v2-vectors { grid-template-columns: 1fr; }
}

/* ============================================================
   LAYERED PRODUCT COMPOSITION — Career Workspace + Live Terminal
   ------------------------------------------------------------
   .mh-career-mock is entirely new markup (added to hero.ejs,
   necessary since no workspace-preview visual existed before).
   .mh-hero-mockup-wrap / .mh-terminal-v2 are the pre-existing,
   completely unmodified terminal — only its position/rotation
   changes here, never its content.
   ============================================================ */

.mh-hero-inner { grid-template-columns: 41% 59%; align-items: center; }

/* .mh-hero has overflow:hidden in the base rules (medhaiq.css) — safe
   to override here since .mh-hero is confirmed exclusive to this page
   (same reasoning as the .mh-terminal-v2 mask fix earlier). This was
   the actual cause of the workspace card's lower content (Recommended
   for You, footer stats) being clipped — not a sizing problem. */
.mh-hero { overflow: visible; }
.mh-hero-inner { overflow: visible; }

.mh-hero-product-stack {
  position: relative;
  perspective: 2000px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 10px 0 30px;
}

.mh-career-mock {
  width: 52%;
  flex-shrink: 0;
  z-index: 1;
  transform: rotateY(-10deg) rotateX(2deg);
  transform-style: preserve-3d;
  background: #0B1427;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.18),
    0 30px 70px -25px rgba(0, 0, 0, 0.55),
    0 0 60px -12px rgba(37, 99, 235, 0.35);
  padding: 18px 20px;
  font-family: var(--font-body);
}
.mh-career-mock-header { margin-bottom: 10px; }
.mh-career-mock-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94A3B8;
}
.mh-career-mock-greeting { color: #F8FAFC; font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.mh-career-mock-sub { color: #94A3B8; font-size: 11.5px; margin-bottom: 14px; }
.mh-career-mock-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.mh-career-mock-card {
  background: #111A2D;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  padding: 11px 13px;
}
.mh-career-mock-profile { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.mh-career-mock-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #16213A; color: #3B82F6;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.mh-career-mock-name { color: #F8FAFC; font-size: 12px; font-weight: 700; }
.mh-career-mock-role { color: #94A3B8; font-size: 10.5px; }
.mh-career-mock-strength { display: flex; align-items: center; gap: 9px; }
.mh-career-mock-ring {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid #2563EB;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #F8FAFC; flex-shrink: 0;
}
.mh-career-mock-strength-label { color: #F8FAFC; font-size: 10.5px; font-weight: 600; }
.mh-career-mock-strength-sub { color: #94A3B8; font-size: 9.5px; margin-top: 1px; }
.mh-career-mock-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #94A3B8; margin-bottom: 7px;
}
.mh-career-mock-practice-item,
.mh-career-mock-rec {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: #F8FAFC; padding: 4px 0;
}
.mh-career-mock-rec { color: #94A3B8; justify-content: flex-start; }
.mh-career-mock-score { color: #10B981; font-weight: 700; }
.mh-career-mock-footer {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 11px; margin-top: 2px;
}
.mh-career-mock-stat { display: block; color: #F8FAFC; font-size: 14px; font-weight: 700; }
.mh-career-mock-stat-label { display: block; color: #94A3B8; font-size: 9px; margin-top: 2px; }

.mh-hero-mockup-wrap {
  width: 50%;
  flex-shrink: 0;
  margin-left: -9%;
  margin-top: 56px;
  z-index: 2;
  filter: none;
  transform: rotateY(-7deg) rotateX(2deg);
  transform-style: preserve-3d;
}
.mh-terminal-v2 {
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.22),
    0 40px 80px -25px rgba(0, 0, 0, 0.6),
    0 0 70px -14px rgba(37, 99, 235, 0.4);
}

@media (max-width: 1200px) {
  .mh-hero-inner { grid-template-columns: 1fr; }
  .mh-hero-product-stack {
    perspective: none;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    margin-top: 32px;
  }
  .mh-career-mock,
  .mh-hero-mockup-wrap {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    transform: none;
    margin-bottom: 20px;
  }
}
/* ============================================================
   EXACT 2(9).png MATCH — LAYERED 3D PRODUCT COMPOSITION
   ============================================================ */

.mh-hero-inner {
  grid-template-columns: 40% 60% !important;
  align-items: center;
}

.mh-hero-product-stack {
  position: relative;
  perspective: 1800px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 10px 0 40px;
  width: 100%;
}

/* 1. CAREER WORKSPACE (REAR LAYER) */
.mh-career-mock {
  width: 58% !important;
  flex-shrink: 0;
  z-index: 1;
  transform: perspective(1800px) rotateY(-5deg) rotateX(1deg);
  transform-style: preserve-3d;
  background: #0B1427 !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.18),
    0 30px 70px -25px rgba(0, 0, 0, 0.55),
    0 0 55px -15px rgba(37, 99, 235, 0.25) !important;
  padding: 20px 22px;
  font-family: var(--font-body);
}

/* Workspace internal styling */
.mh-career-mock-card {
  background: #111A2D !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 10px;
  padding: 12px 14px;
}

/* 2. LIVE INTERVIEW TERMINAL (FRONT LAYER - VISUALLY DOMINANT & TALL) */
.mh-hero-mockup-wrap {
  width: 38% !important;
  flex-shrink: 0;
  margin-left: -16% !important; /* Overlaps workspace right edge */
  margin-top: 10px !important;
  z-index: 2 !important; /* Above workspace */
  filter: none;
  transform: perspective(1800px) rotateY(-7deg) rotateX(1deg);
  transform-style: preserve-3d;
}

.mh-terminal-v2 {
  background: #0B1427 !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.28),
    0 40px 80px -25px rgba(0, 0, 0, 0.65),
    0 0 65px -10px rgba(37, 99, 235, 0.35) !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .mh-hero-product-stack {
    perspective: none;
    flex-direction: column;
    align-items: stretch;
  }
  .mh-career-mock,
  .mh-hero-mockup-wrap {
    width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
    margin-bottom: 24px;
  }
}

/* ============================================================
   PROFESSIONAL PERSPECTIVES — supporting section, homepage only
   ------------------------------------------------------------
   Sits between #pricing and the CTA banner. A continuous horizontal
   marquee: the 6 cards render twice back-to-back (2nd pass has
   aria-hidden + .mh-perspective-dup, see partial), and the track is
   translated by exactly -50% of its own width — since both passes
   are identical, that point is visually indistinguishable from the
   start, so the loop has no visible seam. Deliberately compact:
   small section padding, small card footprint, no large whitespace.
   Illustrative-perspective cards, not customer testimonials (see
   professional-perspectives.ejs header comment).
   ============================================================ */
.mh-perspectives {
  background: #F2F3F1;
  padding: 40px var(--section-pad-x) 44px;
}
.mh-perspectives-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.mh-perspectives .mh-eyebrow {
  color: var(--royal-blue);
  margin-bottom: 8px;
}
.mh-perspectives .mh-section-title {
  color: #0B1020;
  font-size: clamp(20px, 3.4vw, 24px);
  margin-bottom: 22px;
}

/* Sprite host: defs-only, never painted */
.mh-perspectives-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.mh-perspectives-viewport {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.mh-perspective-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: mh-perspective-scroll 30s linear infinite;
}
.mh-perspectives-viewport:hover .mh-perspective-track {
  animation-play-state: paused;
}

@keyframes mh-perspective-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.mh-perspective-card {
  flex: 0 0 300px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(11, 16, 32, 0.04);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  text-align: left;
}
.mh-perspective-meta {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid #EEF0F3;
  font-family: var(--font-body);
  font-size: 12px;
  white-space: nowrap;
}
.mh-perspective-role {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--royal-blue);
}
.mh-perspective-location {
  color: #8A94A6;
}
.mh-perspective-quote {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: #334155;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .mh-perspective-card {
    flex-basis: 264px;
    padding: 14px 16px;
  }
}

@media (max-width: 640px) {
  .mh-perspectives {
    padding: 34px var(--section-pad-x) 38px;
  }
  .mh-perspective-card {
    flex-basis: 240px;
    padding: 14px 15px;
  }
}

/* Reduced motion: stop the marquee, drop the duplicated pass, and
   let the six cards wrap into a stable static arrangement instead. */
@media (prefers-reduced-motion: reduce) {
  .mh-perspectives-viewport {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .mh-perspective-track {
    animation: none;
    transform: none;
    width: auto;
    flex-wrap: wrap;
  }
  .mh-perspective-dup {
    display: none;
  }
}