/* ═══════════════════════════════════════════════════════════════════════
   Homepage V6 — Clean light-mode design for DentistJourney
   Depends on: demo_landing_3_showcases.css, demo_landing_4.css
   Design: Light base, blue/violet accents, subtle Three.js hero
   ═══════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. RESET & BASE
   ════════════════════════════════════════════════════════════════ */
html {
  /* scroll-snap removed — replaced by JS debounced settle for smoother feel */
}
.hv6 {
  --hv6-accent: #2563eb;
  --hv6-accent-rgb: 37, 99, 235;
  --hv6-accent-light: #3b82f6;
  --hv6-accent2: #7c3aed;
  --hv6-accent2-rgb: 124, 58, 237;
  --hv6-accent2-light: #8b5cf6;
  --hv6-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --hv6-orb-primary-rgb: 37, 99, 235;
  --hv6-orb-secondary-rgb: 124, 58, 237;
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #0f172a;
  overflow-x: hidden;
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dental School mode (default) — blue-dominant */
.hv6[data-mode="predental"] {
  --hv6-accent: #2563eb;
  --hv6-accent-rgb: 37, 99, 235;
  --hv6-accent-light: #3b82f6;
  --hv6-accent2: #6d28d9;
  --hv6-accent2-rgb: 109, 40, 217;
  --hv6-gradient: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #7c3aed 100%);
  --hv6-orb-primary-rgb: 37, 99, 235;
  --hv6-orb-secondary-rgb: 109, 40, 217;
}

/* Residency mode — purple-dominant */
.hv6[data-mode="residency"] {
  --hv6-accent: #7c3aed;
  --hv6-accent-rgb: 124, 58, 237;
  --hv6-accent-light: #8b5cf6;
  --hv6-accent2: #ec4899;
  --hv6-accent2-rgb: 236, 72, 153;
  --hv6-gradient: linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #a855f7 100%);
  --hv6-orb-primary-rgb: 124, 58, 237;
  --hv6-orb-secondary-rgb: 167, 139, 250;
}
.hv6 *, .hv6 *::before, .hv6 *::after {
  box-sizing: border-box;
}


/* ════════════════════════════════════════════════════════════════
   2. NAVBAR — Raycast-style floating pill
   ════════════════════════════════════════════════════════════════ */
.hv6-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 100 !important;
  padding: 18px 32px 0 !important;
  background: none !important;
  border: none !important;
  pointer-events: none;
}

.hv6-nav__inner {
  display: flex !important;
  align-items: center !important;
  max-width: 1240px;
  margin: 0 auto;
  height: 72px !important;
  padding: 0 32px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.06),
              0 1px 3px rgba(0, 0, 0, 0.04);
  pointer-events: auto;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.hv6-nav.is-scrolled .hv6-nav__inner {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 40px rgba(0, 0, 0, 0.08),
              0 1px 3px rgba(0, 0, 0, 0.06);
}

.hv6-nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-right: 2.5rem;
}
.hv6-nav__logo img {
  height: 38px;
  width: auto;
  display: block;
  filter: none;
  opacity: 1;
}

.hv6-nav__links {
  flex: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex-direction: row !important;
}

.hv6-nav__link {
  display: inline-flex !important;
  align-items: center;
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  border-radius: 9px;
  transition: color 0.2s ease, background 0.2s ease;
}
.hv6-nav__link:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.04);
}

.hv6-nav__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: 2.5rem;
}
.hv6-nav__login {
  color: #475569 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}
.hv6-nav__login:hover {
  color: #0f172a !important;
  background: none !important;
}
/* Nav CTA — brand orange pill */
.hv6-nav .hv6-btn--primary {
  background: linear-gradient(135deg, #e05a0a 0%, #f28c28 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(224, 90, 10, 0.25) !important;
  font-size: 0.92rem;
  padding: 0.55rem 1.35rem;
  border-radius: 10px;
  font-weight: 600;
}
.hv6-nav .hv6-btn--primary:hover {
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(224, 90, 10, 0.35) !important;
}
/* Short CTA label is mobile-only; hidden on desktop (see mobile @media). */
.hv6-nav__free-call-text--mobile {
  display: none;
}

@media (max-width: 768px) {
  .hv6-nav__links,
  .hv6-nav__links-desktop {
    display: none !important;
  }
  .hv6-nav {
    /* Notch / status bar: keep pill below inset so hero padding can match real nav height */
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 0 !important;
  }
  .hv6-nav__inner {
    padding: 0 14px;
    height: 60px !important;
    border-radius: 14px;
  }
  /* Links are hidden on mobile, so the logo no longer needs the desktop gap
     that separated it from them — reclaim that space for the actions. */
  .hv6-nav__logo {
    margin-right: 0;
  }
  .hv6-nav__actions {
    margin-left: auto;
    gap: 10px;
  }
  .hv6-nav__logo img {
    height: 32px;
  }
  /* Keep the auth link on a single line so it can't wrap into the CTA. */
  .hv6-nav__login {
    white-space: nowrap;
    font-size: 0.8rem !important;
  }
  /* Shrink the CTA so the pill never overflows the viewport. */
  .hv6-nav__free-call {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.8rem !important;
  }
  /* Swap the CTA label to the short "Free Call" on mobile. */
  .hv6-nav__free-call-text {
    display: none;
  }
  .hv6-nav__free-call-text--mobile {
    display: inline;
  }
}


/* ════════════════════════════════════════════════════════════════
   3. BUTTONS
   ════════════════════════════════════════════════════════════════ */
.hv6-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0.625rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

/* Primary — warm orange gradient (brand CTA) */
.hv6-btn--primary {
  background: linear-gradient(135deg, #e05a0a 0%, #f28c28 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(224, 90, 10, 0.3),
              0 0 0 1px rgba(224, 90, 10, 0.1);
}
.hv6-btn--primary:hover {
  box-shadow: 0 4px 24px rgba(224, 90, 10, 0.4),
              0 0 0 1px rgba(224, 90, 10, 0.2);
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Outline — transparent with slate border */
.hv6-btn--outline {
  background: transparent;
  color: #334155;
  border: 1px solid #cbd5e1;
}
.hv6-btn--outline:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}

/* Ghost — minimal */
.hv6-btn--ghost {
  background: transparent;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.hv6-btn--ghost:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

/* Ghost white — for dark CTA sections */
.hv6-btn--ghost-white {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.hv6-btn--ghost-white:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

/* White solid */
.hv6-btn--white {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.hv6-btn--white:hover {
  background: #f8fafc;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* Large size */
.hv6-btn--lg {
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  border-radius: 0.75rem;
}


/* ════════════════════════════════════════════════════════════════
   4. HERO SECTION — Full viewport with Three.js canvas
   ════════════════════════════════════════════════════════════════ */
.hv6-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 140px;
  padding-bottom: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(var(--hv6-accent-rgb), 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(var(--hv6-accent2-rgb), 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 80%, rgba(var(--hv6-accent-rgb), 0.03) 0%, transparent 50%),
    linear-gradient(180deg, #f8fafc 0%, #eef2ff 30%, #e0e7ff 55%, #ede9fe 72%, #f5f3ff 88%, #f8fafc 100%);
}

/* ── Hero FOMO tags (slide-in badges left of hero) ── */
.hv6-hero-tags {
  position: absolute;
  left: clamp(1rem, 3vw, 2.5rem);
  top: 38%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.hv6-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.88) 100%);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
  line-height: 1.2;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 16px rgba(var(--hv6-accent-rgb), 0.08),
    inset 0 1px 0 rgba(255,255,255,0.7);
  opacity: 0;
  transform: translateX(-30px) scale(0.97);
  animation: hv6TagSlide 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: auto;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hv6-hero-tag:hover {
  transform: translateX(4px) scale(1.02);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.06),
    0 8px 24px rgba(var(--hv6-accent-rgb), 0.14),
    inset 0 1px 0 rgba(255,255,255,0.8);
}
.hv6-hero-tag:nth-child(1) { animation-delay: 1.2s; }
.hv6-hero-tag:nth-child(2) { animation-delay: 1.6s; }
.hv6-hero-tag:nth-child(3) { animation-delay: 2.0s; }
.hv6-hero-tag:nth-child(4) { animation-delay: 2.4s; }
.hv6-hero-tag:nth-child(5) { animation-delay: 2.8s; }
@keyframes hv6TagSlide {
  0%   { opacity: 0; transform: translateX(-30px) scale(0.97); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.hv6-hero-tag__icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.hv6-hero-tag__icon--blue {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1d4ed8;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}
.hv6-hero-tag__icon--violet {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #6d28d9;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.15);
}
.hv6-hero-tag__icon--amber {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #b45309;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.15);
}
.hv6-hero-tag__icon--rose {
  background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%);
  color: #be123c;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.15);
}
.hv6-hero-tag__icon--green {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #15803d;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.15);
}
.hv6-hero-tag__pulse { display: none; }

/* Subtle shimmer pass on each tag after it lands */
.hv6-hero-tag::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.5) 50%,
    transparent 60%
  );
  opacity: 0;
  animation: hv6TagShimmer 0.6s ease-out forwards;
  pointer-events: none;
}
.hv6-hero-tag { position: relative; overflow: hidden; }
.hv6-hero-tag:nth-child(1)::after { animation-delay: 2.1s; }
.hv6-hero-tag:nth-child(2)::after { animation-delay: 2.5s; }
.hv6-hero-tag:nth-child(3)::after { animation-delay: 2.9s; }
.hv6-hero-tag:nth-child(4)::after { animation-delay: 3.3s; }
.hv6-hero-tag:nth-child(5)::after { animation-delay: 3.7s; }
@keyframes hv6TagShimmer {
  0%   { opacity: 0; transform: translateX(-100%); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}

/* Hide tags on smaller screens */
@media (max-width: 1100px) {
  .hv6-hero-tags { display: none; }
}

/* Three.js canvas container — hidden (replaced by static gradient) */
.hv6-hero__canvas {
  display: none;
}
.hv6-hero__canvas canvas {
  display: none;
}

/* Hero content overlay */
.hv6-hero__content {
  position: relative;
  z-index: 2;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
  padding: 0 1.5rem;
  flex-shrink: 0;
}

/* Hero headline */
.hv6-hero__content h1 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #0f172a;
  margin: 0;
}

/* Gradient accent text */
.hv6-headline-accent {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hv6[data-mode="residency"] .hv6-headline-accent {
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Hero description */
.hv6-hero__content p.hv6-hero__desc {
  margin-top: 1.5rem;
  font-size: 1.15rem;
  color: #475569;
  line-height: 1.75;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* Hero badge */
.hv6-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.4rem 1rem;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #2563eb;
  margin-bottom: 1.5rem;
}
.hv6-hero__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  animation: hv6-pulse 2s infinite;
}

/* Hero buttons row */
.hv6-hero__buttons {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Hero social proof */
.hv6-hero__proof {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #94a3b8;
}
.hv6-hero__proof i {
  color: #2563eb;
}

/* Mode toggler (legacy — see section 21 for updated toggler styles) */
.hv6-hero__toggler {
  display: inline-flex;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 3px;
  margin-bottom: 1.5rem;
}

@keyframes hv6-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}


/* ════════════════════════════════════════════════════════════════
   5. FEATURE SECTIONS — Sticky stacking (each slides over previous)
   ════════════════════════════════════════════════════════════════ */
#hv6-features {
  position: relative;
}

.hv6-feature {
  position: sticky;
  top: 0;
  padding: 5rem 0 6rem;
  background: #ffffff;
  overflow: clip; /* clips gradient orbs without breaking sticky */
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* GPU compositing — eliminates flash when stacking */
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* scroll-snap-align removed — JS settle handles stopping */
}
/* Stacking z-index: each feature stacks above the previous */
.hv6-feature--1 { z-index: 2; }
.hv6-feature--2 { z-index: 3; }
.hv6-feature--3 { z-index: 4; }
.hv6-feature--4 { z-index: 5; }
.hv6-feature--5 { z-index: 6; }
.hv6-feature--6 { z-index: 7; }
.hv6-feature--7 { z-index: 8; }

/* Top-edge inset shadow on features (except first) for stacking separation */
.hv6-feature:not(.hv6-feature--1) {
  box-shadow: inset 0 20px 40px -12px rgba(0, 0, 0, 0.04);
}

/* ── Feature entrance animations ── */
.hv6-feature__text {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.hv6-feature--reversed .hv6-feature__text {
  transform: translateX(30px);
}
.hv6-mock-col {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.hv6-feature--in-view .hv6-feature__text {
  opacity: 1;
  transform: translateX(0);
}
.hv6-feature--in-view .hv6-mock-col {
  opacity: 1;
  transform: translateY(0);
}

.hv6-feature__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 2;
  width: 100%;
}

.hv6-feature__grid {
  display: grid;
  grid-template-columns: 2fr 3.5fr;
  gap: 3rem;
  align-items: center;
}

/* Reversed layout */
.hv6-feature--reversed .hv6-feature__grid {
  direction: rtl;
}
.hv6-feature--reversed .hv6-feature__grid > * {
  direction: ltr;
}

/* ── Gradient orbs on feature sections ── */

/* Odd features: purple orb on right (no filter: blur — use soft gradient) */
.hv6-feature:nth-child(odd)::before {
  content: '';
  position: absolute;
  top: -15%;
  right: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(var(--hv6-orb-secondary-rgb), 0.06) 0%, transparent 55%);
  border-radius: 50%;
  pointer-events: none;
}

/* Even features: blue orb on left (no filter: blur — use soft gradient) */
.hv6-feature:nth-child(even)::before {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -10%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(var(--hv6-orb-primary-rgb), 0.05) 0%, transparent 55%);
  border-radius: 50%;
  pointer-events: none;
}

/* Secondary orbs (soft pre-blurred gradient — NO filter: blur) */
.hv6-feature:nth-child(odd)::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: 5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(var(--hv6-orb-primary-rgb), 0.04) 0%, transparent 50%);
  border-radius: 50%;
  pointer-events: none;
}
.hv6-feature:nth-child(even)::after {
  content: '';
  position: absolute;
  top: -10%;
  right: 5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(var(--hv6-orb-secondary-rgb), 0.04) 0%, transparent 50%);
  border-radius: 50%;
  pointer-events: none;
}

/* No separator needed — stacking creates natural visual separation */


/* ════════════════════════════════════════════════════════════════
   6. FEATURE BADGES
   ════════════════════════════════════════════════════════════════ */
.hv6-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hv6-accent);
  background: rgba(var(--hv6-accent-rgb), 0.08);
  border: 1px solid rgba(var(--hv6-accent-rgb), 0.15);
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Legacy tag class support */
.hv6-feature__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hv6-feature__tag--dark {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.08);
}


/* ════════════════════════════════════════════════════════════════
   7. FEATURE TEXT
   ════════════════════════════════════════════════════════════════ */
.hv6-feature__text h2 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  color: #0f172a;
  margin: 1rem 0 0;
}

.hv6-feature__text p {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.7;
}

/* Check list items */
.hv6-feature__checks {
  margin-top: 1.5rem;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.hv6-feature__checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: #475569;
}
.hv6-feature__check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  font-size: 0.65rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Feature CTA link */
.hv6-feature__cta {
  margin-top: 2rem;
  display: inline-flex;
}


/* ════════════════════════════════════════════════════════════════
   8. MOCK FRAMES — Glassmorphism browser windows
   ════════════════════════════════════════════════════════════════ */
.hv6-mock-frame {
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.06),
    0 20px 40px -8px rgba(0, 0, 0, 0.08);
  position: relative;
}

/* Gradient glow border effect */
.hv6-mock-frame::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1rem;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(var(--hv6-accent2-rgb), 0.1),
    rgba(var(--hv6-accent-rgb), 0.06),
    transparent 60%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hv6-mock-frame--elevated {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.08),
    0 20px 50px -12px rgba(0, 0, 0, 0.12),
    0 0 60px -20px rgba(37, 99, 235, 0.08);
}

/* Chrome bar */
.hv6-mock-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

/* Legacy bar class support */
.hv6-mock-frame__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.hv6-mock-frame__bar--dark {
  background: #f1f5f9;
  border-bottom-color: #e2e8f0;
}

/* Traffic light dots */
.hv6-mock-chrome__dot,
.hv6-mock-frame__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.hv6-mock-chrome__dot--red,
.hv6-mock-frame__dot--red   { background: #ef4444; }
.hv6-mock-chrome__dot--yellow,
.hv6-mock-frame__dot--yellow { background: #f59e0b; }
.hv6-mock-chrome__dot--green,
.hv6-mock-frame__dot--green  { background: #22c55e; }

/* Chrome title */
.hv6-mock-chrome__title,
.hv6-mock-frame__title {
  margin-left: 8px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
}

/* Mock body */
.hv6-mock-body,
.hv6-mock-frame__body {
  padding: 0;
  overflow: hidden;
  min-height: 580px;
  max-height: 720px;
  background: #fff;
  color: #1e293b;  /* Reset text color — body inherits white from dark page theme */
  display: flex;
  flex-direction: column;
}
.hv6-mock-body--dark,
.hv6-mock-frame__body--dark {
  background: #0c0c12;
}

/* Dark variant */
.hv6-mock-frame--dark {
  background: #1e293b;
  border-color: #334155;
}
.hv6-mock-frame--dark .hv6-mock-body,
.hv6-mock-frame--dark .hv6-mock-frame__body {
  background: #0c0c12;
}

/* Scale wrapper — pointer-events allowed for interactivity */
.hv6-mock-scaled {
  transform: scale(0.92);
  transform-origin: top left;
  width: 109%;
  flex: 1;
  display: flex;
  flex-direction: column;
}


/* ════════════════════════════════════════════════════════════════
   9. MOCK CONTENT OVERRIDES — Fit dl4 mocks into glass frames
   ════════════════════════════════════════════════════════════════ */

/* Strip standalone bg/shadow/border/margin from dl4 mocks + stretch to fill */
.hv6-mock-frame .dl4-explorer-mock,
.hv6-mock-frame .dl4-ps-mock,
.hv6-mock-frame .dl4-ss-mock,
.hv6-mock-frame .dl4-mi-mock,
.hv6-mock-frame .dl4-psa-mock,
.hv6-mock-frame .dl4-pe-mock,
.hv6-mock-frame .dl4-psel-mock,
.hv6-mock-frame .dl4-residency-mock,
.hv6-mock-frame .dl5-advisor-mock {
  border-radius: 0;
  box-shadow: none;
  border: none;
  margin: 0;
  flex: 1;
  min-height: 0;
  height: 100%;
}
/* PSA grid must fill the PSA container */
.hv6-mock-frame .dl4-psa-mock__grid {
  flex: 1;
  min-height: 0;
}
/* PE mock grid must fill the PE container */
.hv6-mock-frame .dl4-pe-mock__grid {
  flex: 1;
  min-height: 0;
}
/* PS mock (Story Miner / Clinical Narrative) body must fill */
.hv6-mock-frame .dl4-ps-mock__body {
  flex: 1;
  min-height: 0;
}
/* PS mock feedback sidebar should fill & space evenly */
.hv6-mock-frame .dl4-ps-mock__feedback {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Dark MI mock */
.hv6-mock-frame--dark .dl4-mi-mock {
  background: #0c0c12;
}
.hv6-mock-frame--dark .dl4-mi-mock__chrome {
  background: #08011a;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ─── MI mock — full-width session + animated feedback page ─── */
.hv6-mock-frame .dl4-mi-mock__body {
  position: relative;
  overflow: hidden;
}
/* Page system: session fills entire body, feedback slides over */
.dl4-mi-mock__page {
  font-family: 'DM Sans', system-ui, sans-serif;
}
.dl4-mi-mock__page--session {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dl4-mi-mock__page--feedback {
  position: absolute;
  inset: 0;
  background: #f8fafc;
  overflow-y: auto;
  padding: 14px 16px;
  z-index: 5;
}
/* Feedback page entrance animation */
.dl4-mi-mock__page--feedback.dl4-mi-fb--entering {
  animation: dl4MiFbSlideIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dl4MiFbSlideIn {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Interview stage (full-width) ── */
.dl4-mi-mock__stage {
  padding: 12px 16px 8px;
}
.dl4-mi-mock__feeds {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.dl4-mi-mock__feed-main {
  flex: 1;
  min-height: 120px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 12px 14px;
  position: relative;
}
.dl4-mi-mock__feed-main .dl4-mi-mock__avatar-ai {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
}
.dl4-mi-mock__feed-badge {
  position: absolute; bottom: 8px; left: 10px;
  font-size: 9px; color: #64748b;
  display: flex; align-items: center; gap: 4px;
}
.dl4-mi-mock__feed-live-dot {
  width: 5px; height: 5px; border-radius: 50%; background: #ef4444;
  animation: dl5StatusPulse 2s ease-in-out infinite;
}
.dl4-mi-mock__feed-pip {
  width: 80px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.dl4-mi-mock__pip-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 14px;
}
.dl4-mi-mock__pip-tag {
  font-size: 9px; color: #64748b; margin-top: 4px;
}
/* Dialogue area (full width) */
.dl4-mi-mock__dialogue {
  flex: 1;
  padding: 0 16px 12px;
  overflow-y: auto;
}

/* ── Session Feedback page styles ── */
.dl4-mi-fb__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}
.dl4-mi-fb__header-left { display: flex; align-items: center; gap: 10px; }
.dl4-mi-fb__score-ring {
  width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(#7c3aed 82%, #e2e8f0 0);
  display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
}
.dl4-mi-fb__score-ring::before {
  content: '';
  width: 36px; height: 36px; border-radius: 50%;
  background: #f8fafc;
  position: absolute;
}
.dl4-mi-fb__score-num {
  position: relative; z-index: 1;
  font-size: 15px; font-weight: 800; color: #7c3aed;
  font-family: 'Inter Tight', sans-serif;
}
.dl4-mi-fb__header-copy h3 {
  font-size: 13px; font-weight: 800; color: #0f172a; margin: 0;
}
.dl4-mi-fb__header-copy p {
  font-size: 9px; color: #64748b; margin: 2px 0 0;
}
.dl4-mi-fb__premium-badge {
  font-size: 9px; font-weight: 700; color: #d97706;
  background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.15);
  border-radius: 20px; padding: 3px 10px;
  white-space: nowrap;
}
.dl4-mi-fb__premium-badge i { margin-right: 3px; font-size: 8px; }

/* Analytics grid */
.dl4-mi-fb__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.dl4-mi-fb__card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
}
.dl4-mi-fb__card-head {
  font-size: 11px; font-weight: 700; color: #334155;
  margin-bottom: 8px;
}
.dl4-mi-fb__card-head i { margin-right: 5px; color: #7c3aed; }

/* Waveform bars */
.dl4-mi-fb__waveform {
  display: flex; align-items: flex-end; gap: 2px;
  height: 24px; margin-bottom: 8px;
}
.dl4-mi-fb__waveform span {
  flex: 1; border-radius: 2px;
  background: linear-gradient(to top, #7c3aed, #a78bfa);
  animation: dl4MiWave 1.2s ease-in-out infinite alternate;
}
.dl4-mi-fb__waveform span:nth-child(1)  { height: 40%; animation-delay: 0s; }
.dl4-mi-fb__waveform span:nth-child(2)  { height: 70%; animation-delay: 0.05s; }
.dl4-mi-fb__waveform span:nth-child(3)  { height: 55%; animation-delay: 0.1s; }
.dl4-mi-fb__waveform span:nth-child(4)  { height: 85%; animation-delay: 0.15s; }
.dl4-mi-fb__waveform span:nth-child(5)  { height: 65%; animation-delay: 0.2s; }
.dl4-mi-fb__waveform span:nth-child(6)  { height: 90%; animation-delay: 0.25s; }
.dl4-mi-fb__waveform span:nth-child(7)  { height: 50%; animation-delay: 0.3s; }
.dl4-mi-fb__waveform span:nth-child(8)  { height: 75%; animation-delay: 0.35s; }
.dl4-mi-fb__waveform span:nth-child(9)  { height: 95%; animation-delay: 0.4s; }
.dl4-mi-fb__waveform span:nth-child(10) { height: 60%; animation-delay: 0.45s; }
.dl4-mi-fb__waveform span:nth-child(11) { height: 80%; animation-delay: 0.5s; }
.dl4-mi-fb__waveform span:nth-child(12) { height: 45%; animation-delay: 0.55s; }
.dl4-mi-fb__waveform span:nth-child(13) { height: 70%; animation-delay: 0.6s; }
.dl4-mi-fb__waveform span:nth-child(14) { height: 85%; animation-delay: 0.65s; }
.dl4-mi-fb__waveform span:nth-child(15) { height: 55%; animation-delay: 0.7s; }
.dl4-mi-fb__waveform span:nth-child(16) { height: 90%; animation-delay: 0.75s; }
.dl4-mi-fb__waveform span:nth-child(17) { height: 65%; animation-delay: 0.8s; }
.dl4-mi-fb__waveform span:nth-child(18) { height: 50%; animation-delay: 0.85s; }
.dl4-mi-fb__waveform span:nth-child(19) { height: 80%; animation-delay: 0.9s; }
.dl4-mi-fb__waveform span:nth-child(20) { height: 70%; animation-delay: 0.95s; }
.dl4-mi-fb__waveform span:nth-child(21) { height: 55%; animation-delay: 1.0s; }
.dl4-mi-fb__waveform span:nth-child(22) { height: 85%; animation-delay: 1.05s; }
.dl4-mi-fb__waveform span:nth-child(23) { height: 60%; animation-delay: 1.1s; }
.dl4-mi-fb__waveform span:nth-child(24) { height: 75%; animation-delay: 1.15s; }
@keyframes dl4MiWave {
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(0.4); }
}

/* Voice metrics */
.dl4-mi-fb__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.dl4-mi-fb__metric {
  background: #f8fafc;
  border-radius: 6px;
  padding: 6px 8px;
}
.dl4-mi-fb__metric span { display: block; font-size: 9px; color: #94a3b8; }
.dl4-mi-fb__metric strong { display: block; font-size: 13px; font-weight: 800; color: #0f172a; }
.dl4-mi-fb__metric small { font-size: 8px; color: #94a3b8; }
.dl4-mi-fb__metric small.dl4-mi-fb__good { color: #34d399; }
.dl4-mi-fb__metric small.dl4-mi-fb__warn { color: #fbbf24; }

/* Face analysis grid */
.dl4-mi-fb__face-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.dl4-mi-fb__face-stat { text-align: center; }
.dl4-mi-fb__face-stat small { display: block; font-size: 8px; color: #64748b; margin-top: 3px; line-height: 1.2; }
.dl4-mi-fb__ring-mini {
  width: 36px; height: 36px; border-radius: 50%;
  background: conic-gradient(#7c3aed 71%, #e2e8f0 0);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto; position: relative;
}
.dl4-mi-fb__ring-mini::before {
  content: ''; width: 28px; height: 28px; border-radius: 50%;
  background: #f8fafc; border: 1px solid #e2e8f0;
  position: absolute;
}
.dl4-mi-fb__ring-mini span {
  position: relative; z-index: 1;
  font-size: 10px; font-weight: 800; color: #334155;
}
.dl4-mi-fb__ring-mini--high { background: conic-gradient(#34d399 89%, #e2e8f0 0); }
.dl4-mi-fb__face-note {
  font-size: 9px; color: #64748b;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 6px; padding: 6px 8px; line-height: 1.4;
}
.dl4-mi-fb__face-note i { color: #fbbf24; margin-right: 4px; font-size: 9px; }

/* School-specific insight */
.dl4-mi-fb__school-insight {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.dl4-mi-fb__school-head {
  font-size: 11px; font-weight: 700; color: #334155;
  margin-bottom: 6px;
}
.dl4-mi-fb__school-head i { color: #6366f1; margin-right: 5px; }
.dl4-mi-fb__school-item {
  font-size: 9px; color: #475569;
  padding: 4px 0; line-height: 1.4;
  display: flex; gap: 5px; align-items: flex-start;
}
.dl4-mi-fb__school-item i { font-size: 9px; flex-shrink: 0; margin-top: 1px; }
.dl4-mi-fb__school-item--strong i { color: #34d399; }
.dl4-mi-fb__school-item--grow i { color: #818cf8; }

/* Trust bar */
.dl4-mi-fb__trust {
  display: flex; gap: 12px; justify-content: center;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}
.dl4-mi-fb__trust span {
  font-size: 8px; color: #94a3b8;
  display: flex; align-items: center; gap: 3px;
}
.dl4-mi-fb__trust i { font-size: 8px; }

/* Key Moments timeline */
.dl4-mi-fb__moments {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.dl4-mi-fb__moments-head {
  font-size: 11px; font-weight: 700; color: #334155;
  margin-bottom: 8px;
}
.dl4-mi-fb__moments-head i { color: #7c3aed; margin-right: 5px; }
.dl4-mi-fb__moment {
  display: grid;
  grid-template-columns: 36px auto 1fr;
  gap: 6px;
  align-items: start;
  padding: 5px 0;
  border-top: 1px solid #f1f5f9;
  font-size: 9px;
}
.dl4-mi-fb__moment:first-of-type { border-top: none; }
.dl4-mi-fb__moment-time {
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  color: #64748b;
  font-size: 10px;
}
.dl4-mi-fb__moment-tag {
  font-size: 8px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
  white-space: nowrap; display: inline-block;
}
.dl4-mi-fb__moment-tag--good { background: #ecfdf5; color: #059669; }
.dl4-mi-fb__moment-tag--warn { background: #fffbeb; color: #d97706; }
.dl4-mi-fb__moment-text { color: #475569; line-height: 1.4; }

/* Next Steps bar */
.dl4-mi-fb__next {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; margin-bottom: 8px;
}
.dl4-mi-fb__next-label {
  font-size: 10px; color: #94a3b8; margin-right: auto;
}
.dl4-mi-fb__next-btn {
  font-size: 10px; font-weight: 700; border-radius: 6px;
  padding: 5px 12px; cursor: pointer; border: none;
  display: inline-flex; align-items: center; gap: 4px;
  background: #f1f5f9; color: #475569;
}
.dl4-mi-fb__next-btn i { font-size: 9px; }
.dl4-mi-fb__next-btn--primary {
  background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff;
}

/* ─── PE mock — editor stats bar (homepage overrides) ─── */
.dl4-pe-mock__editor-stats {
  padding: 8px 14px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dl4-pe-mock__stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #64748b;
}
.dl4-pe-mock__stat-label {
  min-width: 105px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: #475569;
}
.dl4-pe-mock__stat-label i { font-size: 9px; color: #94a3b8; }
.dl4-pe-mock__stat-value {
  font-weight: 600;
  color: #334155;
}
.dl4-pe-mock__stat-value--good { color: #059669; }
.dl4-pe-mock__stat-value--match { color: #6366f1; }
.dl4-pe-mock__stat-value--match i { margin-right: 3px; font-size: 9px; }
.dl4-pe-mock__stat-meter {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #e2e8f0;
  overflow: hidden;
}
.dl4-pe-mock__stat-meter-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #7c3aed, #2563eb);
  transition: width 0.6s ease;
}
.dl4-pe-mock__stat-pct {
  font-size: 10px;
  font-weight: 700;
  color: #7c3aed;
  min-width: 28px;
  text-align: right;
}

/* ─── Story Miner + Clinical Narrative — story signal bar ─── */
.dl4-ps-mock__story-signal {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.15);
  border-radius: 8px;
  margin-top: 8px;
}
.dl4-ps-mock__story-signal-icon {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.dl4-ps-mock__story-signal-text {
  font-size: 10px;
  line-height: 1.45;
  color: #64748b;
}
.dl4-ps-mock__story-signal-text strong {
  color: #d97706;
  font-weight: 700;
}

/* ─── PSA mock — red-flag scan + applicant rank bar (homepage enrichment) ─── */
.dl4-psa-mock__flags {
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.dl4-psa-mock__flag-head {
  font-size: 10px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 5px;
}
.dl4-psa-mock__flag-head i { color: #2563eb; margin-right: 4px; font-size: 9px; }
.dl4-psa-mock__flag-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dl4-psa-mock__flag {
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dl4-psa-mock__flag--pass { color: #059669; }
.dl4-psa-mock__flag--pass i { font-size: 8px; }
.dl4-psa-mock__flag--warn { color: #d97706; }
.dl4-psa-mock__flag--warn i { font-size: 8px; }
.dl4-psa-mock__rank-bar {
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.dl4-psa-mock__rank-label {
  font-size: 10px;
  font-weight: 700;
  color: #334155;
  display: block;
  margin-bottom: 6px;
}
.dl4-psa-mock__rank-label i { color: #2563eb; margin-right: 4px; font-size: 9px; }
.dl4-psa-mock__rank-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: #e2e8f0;
  margin-bottom: 4px;
}
.dl4-psa-mock__rank-fill {
  position: absolute;
  top: 0; left: 0; height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
}
.dl4-psa-mock__rank-marker {
  position: absolute;
  top: -16px;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 800;
  color: #7c3aed;
}
.dl4-psa-mock__rank-note {
  font-size: 9px;
  color: #94a3b8;
}

/* Limit visible height for clean previews */
.hv6-mock-frame .dl4-explorer-mock__rows {
  max-height: 560px;
  overflow: hidden;
}
.hv6-mock-frame .dl4-ps-mock__messages {
  max-height: 650px;
  overflow: hidden;
}

/* SS mock: show preview only, hide input */
.hv6-mock-frame .dl4-ss-mock {
  display: flex;
  flex-direction: column;
}
.hv6-mock-frame .dl4-ss-mock__input {
  display: none;
}
.hv6-mock-frame .dl4-ss-mock__preview {
  flex: 1;
}

/* ─── Advisor mock — tracked-changes editor layout ─── */
.hv6-mock-frame .dl5-advisor-mock {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 580px;
  font-family: 'DM Sans', system-ui, sans-serif;
}
/* Advisor top bar */
.dl5-advisor-mock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: linear-gradient(90deg, rgba(139,92,246,0.06), rgba(37,99,235,0.04));
  border-bottom: 1px solid #e2e8f0;
}
.dl5-advisor-mock__bar-left { display: flex; align-items: center; gap: 8px; }
.dl5-advisor-mock__bar-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
}
.dl5-advisor-mock__bar-info strong { font-size: 11px; color: #1e293b; display: block; }
.dl5-advisor-mock__bar-info span { font-size: 9px; color: #94a3b8; }
.dl5-advisor-mock__bar-right { display: flex; align-items: center; gap: 8px; }
.dl5-advisor-mock__bar-status {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; color: #059669;
}
.dl5-advisor-mock__status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #10b981;
  animation: dl5StatusPulse 2s ease-in-out infinite;
}
@keyframes dl5StatusPulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.4; }
}
.dl5-advisor-mock__bar-pill {
  font-size: 9px; color: #6366f1; background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.12); border-radius: 20px;
  padding: 2px 8px; white-space: nowrap;
}
.dl5-advisor-mock__bar-pill i { margin-right: 3px; font-size: 8px; }
/* Revision summary strip */
.dl5-advisor-mock__rev-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 14px;
  background: #f8fafc; border-bottom: 1px solid #e2e8f0;
  font-size: 10px; color: #64748b;
}
.dl5-advisor-mock__rev-stat { display: flex; align-items: center; gap: 3px; }
.dl5-advisor-mock__rev-stat i { font-size: 9px; }
.dl5-advisor-mock__rev-stat--add { color: #059669; }
.dl5-advisor-mock__rev-stat--del { color: #dc2626; }
.dl5-advisor-mock__rev-accept {
  margin-left: auto; color: #7c3aed; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 3px;
}
/* Editor + comments grid */
.dl5-advisor-mock__editor {
  flex: 1; display: flex; gap: 0; min-height: 0; overflow: hidden;
}
.dl5-advisor-mock__doc {
  flex: 1; padding: 14px 16px; overflow-y: auto;
  line-height: 1.7; font-size: 11.5px; color: #334155;
}
.dl5-advisor-mock__para { margin: 0 0 10px; }
.dl5-advisor-mock__add {
  background: rgba(16,185,129,0.1); color: #047857;
  border-bottom: 2px solid rgba(16,185,129,0.35);
  padding: 0 2px; border-radius: 2px;
}
.dl5-advisor-mock__del {
  background: rgba(239,68,68,0.07); color: #b91c1c;
  text-decoration: line-through;
  padding: 0 2px; border-radius: 2px;
}
/* Comment sidebar */
.dl5-advisor-mock__comments {
  width: 195px; flex-shrink: 0; overflow-y: auto;
  background: #fafbfc; border-left: 1px solid #e2e8f0;
  padding: 10px;
}
.dl5-advisor-mock__cmt {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
  font-size: 10px; color: #475569; line-height: 1.5;
}
.dl5-advisor-mock__cmt--highlight {
  border-color: rgba(139,92,246,0.25);
  box-shadow: 0 0 0 1px rgba(139,92,246,0.08);
}
.dl5-advisor-mock__cmt-head {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 4px; font-size: 10px;
}
.dl5-advisor-mock__cmt-head strong { color: #1e293b; font-size: 10px; }
.dl5-advisor-mock__cmt-avatar {
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 8px; flex-shrink: 0;
}
.dl5-advisor-mock__cmt-time { font-size: 9px; color: #94a3b8; margin-left: auto; }
.dl5-advisor-mock__cmt p { margin: 0; }
.dl5-advisor-mock__cmt-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700; margin-top: 4px;
  padding: 2px 6px; border-radius: 4px;
}
.dl5-advisor-mock__cmt-tag--good { background: rgba(251,191,36,0.1); color: #d97706; }
.dl5-advisor-mock__cmt-tag--good i { margin-right: 2px; }
/* Thread replies */
.dl5-advisor-mock__cmt-thread {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid #f1f5f9;
  display: flex; gap: 6px; align-items: flex-start;
}
.dl5-advisor-mock__cmt-thread p { margin: 0; font-size: 10px; color: #64748b; }
.dl5-advisor-mock__cmt-thread--advisor p { color: #7c3aed; font-weight: 600; }
.dl5-advisor-mock__cmt-reply-avatar {
  width: 16px; height: 16px; border-radius: 50%;
  background: #e2e8f0; color: #64748b;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; flex-shrink: 0; margin-top: 1px;
}
.dl5-advisor-mock__cmt-thread--advisor .dl5-advisor-mock__cmt-reply-avatar {
  background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff;
}
/* Footer action bar */
.dl5-advisor-mock__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: linear-gradient(90deg, rgba(139,92,246,0.04), rgba(37,99,235,0.03));
  border-top: 1px solid #e2e8f0; flex-wrap: wrap; gap: 6px;
}
.dl5-advisor-mock__footer-left { display: flex; align-items: center; gap: 12px; }
.dl5-advisor-mock__footer-score {
  font-size: 10px; color: #475569;
}
.dl5-advisor-mock__footer-score strong { color: #059669; }
.dl5-advisor-mock__footer-score i { color: #10b981; margin-right: 3px; }
.dl5-advisor-mock__footer-badge {
  font-size: 9px; color: #d97706;
  background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.15);
  border-radius: 20px; padding: 2px 8px;
}
.dl5-advisor-mock__footer-badge i { margin-right: 3px; font-size: 8px; }
.dl5-advisor-mock__footer-right { display: flex; gap: 6px; }
.dl5-advisor-mock__footer-btn {
  font-size: 10px; font-weight: 700; border-radius: 6px;
  padding: 5px 12px; cursor: pointer; border: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.dl5-advisor-mock__footer-btn--outline {
  background: #fff; color: #475569; border: 1px solid #e2e8f0;
}
.dl5-advisor-mock__footer-btn--primary {
  background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff;
}

/* ════════════════════════════════════════════════════════════════
   10. MINI FEATURES GRID
   ════════════════════════════════════════════════════════════════ */
.hv6-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.hv6-mini-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.hv6-mini-card:hover {
  background: #fff;
  border-color: rgba(var(--hv6-accent-rgb), 0.2);
  transform: translateY(-3px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 0 30px -8px rgba(var(--hv6-accent-rgb), 0.1);
}

.hv6-mini-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.hv6-mini-card h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  color: #0f172a;
  font-size: 1.1rem;
  margin: 1rem 0 0;
}

.hv6-mini-card p {
  color: #64748b;
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
  line-height: 1.6;
}


/* ════════════════════════════════════════════════════════════════
   11. CTA SECTION
   ════════════════════════════════════════════════════════════════ */
.hv6-cta {
  position: relative;
  background: linear-gradient(to bottom, #f8fafc, #eef2ff);
  overflow: hidden;
}

/* CTA gradient orb backgrounds */
.hv6-cta::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.06), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}
.hv6-cta::after {
  content: '';
  position: absolute;
  bottom: -25%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(224, 90, 10, 0.06), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}

.hv6-cta__inner {
  max-width: 50rem;
  margin: 0 auto;
  padding: 6rem 1.5rem;
  position: relative;
  z-index: 2;
  text-align: center;
}

.hv6-cta h2 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #0f172a;
  line-height: 1.15;
  margin: 0;
}

.hv6-cta p {
  margin-top: 1.5rem;
  font-size: 1.2rem;
  color: #475569;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.hv6-cta__buttons {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Legacy CTA orb support */
.hv6-cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hv6-cta__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}
.hv6-cta__orb--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.06), transparent 70%);
  top: -30%;
  left: 20%;
}
.hv6-cta__orb--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(224, 90, 10, 0.06), transparent 70%);
  bottom: -20%;
  right: 15%;
}


/* ════════════════════════════════════════════════════════════════
   12. FOOTER
   ════════════════════════════════════════════════════════════════ */
.hv6-footer {
  background: #0f172a;
  border-top: 1px solid #e2e8f0;
  padding: 4rem 0;
}

.hv6-footer__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hv6-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}

.hv6-footer__group h4 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 1rem;
}

.hv6-footer__group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.hv6-footer a {
  text-decoration: none;
}

.hv6-footer__group a {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.2s ease;
}
.hv6-footer__group a:hover {
  color: #fff;
}

.hv6-footer__social a {
  color: rgba(255, 255, 255, 0.25);
  font-size: 1.1rem;
  transition: color 0.2s ease;
}
.hv6-footer__social a:hover {
  color: #fff;
}

.hv6-footer__bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hv6-footer__copy {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
}

.hv6-footer__logo-bottom {
  opacity: 0.3;
}
.hv6-footer__logo-bottom img {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
}


/* ════════════════════════════════════════════════════════════════
   13. SCROLL REVEAL ANIMATIONS
   ════════════════════════════════════════════════════════════════ */
.hv6-reveal {
  opacity: 0;
  transform: translateY(30px);
}
.hv6-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Directional variants */
.hv6-reveal[data-anim="slide-left"] {
  transform: translateX(40px) translateY(0);
}
.hv6-reveal[data-anim="slide-left"].is-visible {
  transform: translateX(0);
}
.hv6-reveal[data-anim="slide-right"] {
  transform: translateX(-40px) translateY(0);
}
.hv6-reveal[data-anim="slide-right"].is-visible {
  transform: translateX(0);
}
.hv6-reveal[data-anim="hero-mock"] {
  transform: translateY(40px) scale(0.96);
}
.hv6-reveal[data-anim="hero-mock"].is-visible {
  transform: translateY(0) scale(1);
}

/* Stagger delays on nth-child */
.hv6-reveal:nth-child(2) { transition-delay: 0.08s; }
.hv6-reveal:nth-child(3) { transition-delay: 0.16s; }
.hv6-reveal:nth-child(4) { transition-delay: 0.24s; }
.hv6-reveal:nth-child(5) { transition-delay: 0.32s; }
.hv6-reveal:nth-child(6) { transition-delay: 0.40s; }

/* Legacy class support */
.hv6-anim-reveal {
  opacity: 0;
  transform: translateY(30px);
}
.hv6-anim-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.hv6-anim-reveal[data-anim="slide-left"] {
  transform: translateX(40px) translateY(0);
}
.hv6-anim-reveal[data-anim="slide-left"].is-visible {
  transform: translateX(0);
}
.hv6-anim-reveal[data-anim="slide-right"] {
  transform: translateX(-40px) translateY(0);
}
.hv6-anim-reveal[data-anim="slide-right"].is-visible {
  transform: translateX(0);
}
.hv6-anim-reveal[data-anim="hero-mock"] {
  transform: translateY(40px) scale(0.96);
}
.hv6-anim-reveal[data-anim="hero-mock"].is-visible {
  transform: translateY(0) scale(1);
}
.hv6-anim-reveal:nth-child(2) { transition-delay: 0.08s; }
.hv6-anim-reveal:nth-child(3) { transition-delay: 0.16s; }
.hv6-anim-reveal:nth-child(4) { transition-delay: 0.24s; }
.hv6-anim-reveal:nth-child(5) { transition-delay: 0.32s; }
.hv6-anim-reveal:nth-child(6) { transition-delay: 0.40s; }


/* ════════════════════════════════════════════════════════════════
   14. STAT COUNTERS (legacy support)
   ════════════════════════════════════════════════════════════════ */
.hv6-stat {
  position: relative;
}
.hv6-stat::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: #e2e8f0;
}
.hv6-stat:last-child::after {
  display: none;
}


/* ════════════════════════════════════════════════════════════════
   15. ANNOUNCEMENT BAR (legacy support)
   ════════════════════════════════════════════════════════════════ */
.hv6-announcement {
  position: relative;
  background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 50%, #7c3aed 100%);
  color: #fff;
  padding: 0.6rem 2.5rem 0.6rem 1rem;
  z-index: 100;
}
.hv6-announcement__close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.25rem;
  transition: color 0.2s;
}
.hv6-announcement__close:hover {
  color: #fff;
}
.hv6-announcement.is-hidden {
  display: none;
}


/* ════════════════════════════════════════════════════════════════
   16. TESTIMONIAL CARDS (legacy support)
   ════════════════════════════════════════════════════════════════ */
.hv6-testimonial-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
  min-height: 200px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.hv6-testimonial-card__stars {
  color: #f59e0b;
  font-size: 0.75rem;
  display: flex;
  gap: 2px;
  margin-bottom: 0.75rem;
}

/* Splide overrides */
#hv6-testimonial-splide .splide__arrow {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  width: 2.5rem;
  height: 2.5rem;
  opacity: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
#hv6-testimonial-splide .splide__arrow svg {
  fill: #475569;
}
#hv6-testimonial-splide .splide__arrow:hover {
  background: #f8fafc;
}
#hv6-testimonial-splide .splide__pagination__page {
  background: #cbd5e1;
  width: 8px;
  height: 8px;
}
#hv6-testimonial-splide .splide__pagination__page.is-active {
  background: #2563eb;
  transform: scale(1.2);
}


/* ════════════════════════════════════════════════════════════════
   17. LOGO STRIP (legacy support)
   ════════════════════════════════════════════════════════════════ */
.hv6-logos__track {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}


/* ════════════════════════════════════════════════════════════════
   18. TWO-COLUMN GRID HELPER (legacy support)
   ════════════════════════════════════════════════════════════════ */
.hv6-two-col-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}


/* ════════════════════════════════════════════════════════════════
   19. HTML-CSS CLASS ALIGNMENT — Classes used in the template
   ════════════════════════════════════════════════════════════════ */

/* Traffic-light dots (HTML uses .hv6-mock-dot) */
.hv6-mock-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.hv6-mock-dot--red    { background: #ef4444; }
.hv6-mock-dot--yellow { background: #f59e0b; }
.hv6-mock-dot--green  { background: #22c55e; }

/* Check icon circles in feature lists */
.hv6-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(var(--hv6-accent-rgb), 0.1);
  color: var(--hv6-accent);
  font-size: 0.65rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Gradient accent text (hero headline) */
.hv6-gradient-text {
  background: var(--hv6-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero actions row */
.hv6-hero__actions {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Hero fade overlay at bottom */
.hv6-hero__fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #ffffff);
  pointer-events: none;
  z-index: 3;
}

/* Dark chrome bar */
.hv6-mock-chrome--dark {
  background: #1e293b;
  border-bottom-color: #334155;
}

/* Mini section inner */
.hv6-mini {
  position: relative;
  padding: 7rem 0;
  background: #f8fafc;
  overflow: hidden;
}
.hv6-mini__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 2;
}

/* Section heading & description */
.hv6-section-title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #0f172a;
  line-height: 1.15;
  margin: 0;
}
.hv6-section-desc {
  margin-top: 1rem;
  font-size: 1.15rem;
  color: #64748b;
  line-height: 1.7;
}

/* CTA glow orbs */
.hv6-cta__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.hv6-cta__glow--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.06), transparent 70%);
  top: -30%;
  left: 15%;
}
.hv6-cta__glow--2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(224, 90, 10, 0.06), transparent 70%);
  bottom: -25%;
  right: 10%;
}

/* CTA content block */
.hv6-cta__content {
  max-width: 50rem;
  margin: 0 auto;
  padding: 6rem 1.5rem;
  position: relative;
  z-index: 2;
  text-align: center;
}
.hv6-cta__title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #0f172a;
  line-height: 1.15;
  margin: 0;
}
.hv6-cta__desc {
  margin-top: 1.5rem;
  font-size: 1.2rem;
  color: #475569;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}
.hv6-cta__actions {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Footer heading & list (HTML classes) */
.hv6-footer__heading {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 1rem;
}
.hv6-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.hv6-footer__list a {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.2s ease;
  text-decoration: none;
}
.hv6-footer__list a:hover {
  color: #fff;
}
.hv6-footer__social {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}
.hv6-footer__social a {
  color: rgba(255, 255, 255, 0.35);
  font-size: 1.1rem;
  transition: color 0.2s ease;
  text-decoration: none;
}
.hv6-footer__social a:hover {
  color: #fff;
}


/* ════════════════════════════════════════════════════════════════
   20. MODE TOGGLE VISIBILITY
   ════════════════════════════════════════════════════════════════ */

/* Mode-based mock visibility */
.hv6-mode-predental,
.hv6-mode-residency {
  display: none;
}
.hv6[data-mode="predental"] .hv6-mode-predental {
  display: block;
}
.hv6[data-mode="residency"] .hv6-mode-residency {
  display: block;
}

/* Mode-based text visibility */
.hv6-text-predental,
.hv6-text-residency {
  display: none;
}
.hv6[data-mode="predental"] .hv6-text-predental {
  display: block;
}
.hv6[data-mode="residency"] .hv6-text-residency {
  display: block;
}


/* ════════════════════════════════════════════════════════════════
   21. HERO TOGGLER STYLES
   ════════════════════════════════════════════════════════════════ */
.hv6-hero__toggler-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.hv6-hero__toggler-label {
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.hv6-toggler {
  display: inline-flex;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.hv6-toggler__pill {
  padding: 0.5rem 1.25rem;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.01em;
}
.hv6-toggler__pill--active {
  background: var(--hv6-gradient);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--hv6-accent-rgb), 0.25);
}
.hv6-toggler__pill:hover:not(.hv6-toggler__pill--active) {
  color: #334155;
  background: rgba(15, 23, 42, 0.04);
}


/* ════════════════════════════════════════════════════════════════
   22. COLOR TRANSITIONS
   ════════════════════════════════════════════════════════════════ */
.hv6 {
  transition: --hv6-accent 0.5s ease, --hv6-accent-light 0.5s ease;
}
/* Badge, check icon, and button transitions */
.hv6-badge,
.hv6-check-icon,
.hv6-btn--primary,
.hv6-toggler__pill--active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ════════════════════════════════════════════════════════════════
   23. RESIDENCY MOCK OVERRIDES
   ════════════════════════════════════════════════════════════════ */
.hv6-mock-frame .dl4-residency-mock,
.hv6-mock-frame .dl4-psel-mock {
  border-radius: 0;
  box-shadow: none;
  border: none;
  margin: 0;
}
.hv6-mock-frame .dl4-residency-mock__rows {
  max-height: 560px;
  overflow: hidden;
}


/* ════════════════════════════════════════════════════════════════
   24. FORCE MOCK CONTENT VISIBLE + DOUBLE CHROME FIX
   Landing-4/5 CSS hides many elements at opacity:0 for scroll-triggered
   animations that never fire on homepage_v6. Force everything visible.
   Also fix double-chrome-bar issue on mocks with their own chrome.
   ════════════════════════════════════════════════════════════════ */

/* ─── Force ALL dl4/dl5 elements visible as baseline ─── */
/* Uses !important to beat landing-4 CSS default opacity:0 rules.
   The --animated parent class (added by JS on scroll) then adds CSS
   animations on top of this visible baseline.
   EXCLUDE PE mock fix/replace spans so their opacity:0 default stays intact
   until the --*-fixed class is added. */
.hv6-mock-scaled [class*="dl4-"],
.hv6-mock-scaled [class*="dl5-"] {
  opacity: 1 !important;
  visibility: visible !important;
}
/* PE mock crossfade is handled entirely by inline JS styles (style.cssText)
   which beat any stylesheet rule. No CSS overrides needed here. */

/* PE mock Apply buttons: landing demo sets pointer-events:none (auto-animated).
   On homepage the buttons must be clickable for interactive demo. */
.hv6-mock-scaled .dl4-pe-sugg__apply {
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* PE mock Quick Action sidebar buttons: also need to be clickable */
.hv6-mock-scaled .dl4-pe-qa {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Allow transforms/animations ONLY when --animated class is present.
   opacity: revert lets landing-4 animations control the fade-in.
   Higher specificity (0,3,0) beats the nuclear override (0,2,0). */
.hv6-mock-scaled [class*="dl4-explorer-mock--animated"] [class*="dl4-"],
.hv6-mock-scaled [class*="dl4-residency-mock--animated"] [class*="dl4-"],
.hv6-mock-scaled [class*="dl4-school-selector-mock--animated"] [class*="dl4-"],
.hv6-mock-scaled [class*="dl4-ps-mock--animated"] [class*="dl4-"],
.hv6-mock-scaled [class*="dl4-psa-mock--animated"] [class*="dl4-"],
.hv6-mock-scaled [class*="dl4-psel-mock--animated"] [class*="dl4-"],
.hv6-mock-scaled [class*="dl4-mi-mock--animated"] [class*="dl4-"],
.hv6-mock-scaled [class*="dl4-pe-mock--animated"] [class*="dl4-"] {
  animation: revert !important;
  transform: revert !important;
  opacity: revert !important;
}
/* Advisor uses dl5- prefix — separate revert rule */
.hv6-mock-scaled [class*="dl5-advisor-mock--animated"] [class*="dl5-"] {
  animation: revert !important;
  transform: revert !important;
  opacity: revert !important;
}

/* ─── Comp-fill bars: disable transition, let JS set width immediately ─── */
.hv6-mock-scaled .dl4-explorer-mock__comp-fill,
.hv6-mock-scaled .dl4-residency-mock__comp-fill,
.hv6-mock-scaled .dl4-psa-mock__bar-fill {
  transition: none !important;
}

/* ─── Double chrome fix: hide INNER chrome on mocks that have their own ─── */
.hv6-mock-scaled .dl4-ps-mock__chrome,
.hv6-mock-scaled .dl4-psel-mock__chrome,
.hv6-mock-scaled .dl4-pe-mock__chrome-dots {
  display: none !important;
}

/* PE mock: panel visibility controlled by JS (showPanel function) */

/* PE mock: lock the ENTIRE mock to a fixed height so switching
   between panels with different card counts never resizes the frame. */
.hv6-feature--4 .hv6-mock-body {
  height: 620px !important;
  min-height: 620px !important;
  max-height: 620px !important;
}
.hv6-feature--4 .dl4-pe-mock {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.hv6-feature--4 .dl4-pe-mock__grid {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.hv6-feature--4 .dl4-pe-mock__editor {
  overflow: hidden;
}
.hv6-feature--4 .dl4-pe-mock__editor-body {
  overflow-y: auto;
}
.hv6-feature--4 .dl4-pe-mock__suggestions {
  overflow: hidden;
}
.hv6-feature--4 .dl4-pe-sug-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* MI mock: inner chrome IS the whole mock structure (contains __top + __body).
   Instead hide the OUTER hv6 chrome bar for the dark-frame interview mock. */
.hv6-mock-frame--dark > .hv6-mock-chrome {
  display: none !important;
}
/* Give MI mock body rounded top corners since outer chrome is gone */
.hv6-mock-frame--dark > .hv6-mock-body {
  border-radius: 1rem 1rem 0 0;
}


/* ════════════════════════════════════════════════════════════════
   24b. MOCK ENTRANCE ANIMATIONS
   Custom CSS animations for PE, Advisor, MI feedback panel,
   and stagger delays for Explorer/Residency rows 5-6.
   Triggered when JS adds --animated class on scroll into view.
   ════════════════════════════════════════════════════════════════ */

/* ─── Shared keyframes ─── */
@keyframes hv6SlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hv6SlideRight {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes hv6SlideLeft {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes hv6FadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hv6ScaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes hv6BarGrow {
  from { width: 0; }
}
@keyframes hv6GlowPulse {
  0%   { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.45); }
  60%  { box-shadow: 0 0 0 5px rgba(168, 85, 247, 0.12); }
  100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}

/* ─── Explorer / Residency rows 5-6 (landing-4 only defines delays 1-4) ─── */
.dl4-explorer-mock--animated .dl4-explorer-mock__row:nth-child(5) { animation-delay: 0.65s; }
.dl4-explorer-mock--animated .dl4-explorer-mock__row:nth-child(6) { animation-delay: 0.75s; }
.dl4-residency-mock--animated .dl4-residency-mock__row:nth-child(5) { animation-delay: 0.65s; }
.dl4-residency-mock--animated .dl4-residency-mock__row:nth-child(6) { animation-delay: 0.75s; }

/* ─── PE Mock — 3-column entrance + inline highlight stagger ─── */
.dl4-pe-mock--animated .dl4-pe-mock__qa {
  animation: hv6SlideRight 0.5s ease-out 0.1s both;
}
.dl4-pe-mock--animated .dl4-pe-mock__editor {
  animation: hv6FadeIn 0.5s ease-out 0.2s both;
}
.dl4-pe-mock--animated .dl4-pe-mock__suggestions {
  animation: hv6SlideLeft 0.5s ease-out 0.35s both;
}
.dl4-pe-mock--animated .dl4-pe-grammar {
  animation: hv6GlowPulse 0.7s ease-out 0.7s both;
}
.dl4-pe-mock--animated .dl4-pe-fit {
  animation: hv6GlowPulse 0.7s ease-out 0.95s both;
}
.dl4-pe-mock--animated .dl4-pe-cliche--1 {
  animation: hv6GlowPulse 0.7s ease-out 1.2s both;
}
.dl4-pe-mock--animated .dl4-pe-cliche--2 {
  animation: hv6GlowPulse 0.7s ease-out 1.45s both;
}
.dl4-pe-mock--animated .dl4-pe-mock__editor-stats {
  animation: hv6SlideUp 0.4s ease-out 0.5s both;
}
.dl4-pe-mock--animated .dl4-pe-mock__editor-stats .dl4-pe-mock__stat-meter-fill {
  animation: hv6BarGrow 0.8s ease-out 0.9s both;
}

/* Story Miner / Clinical Narrative entrance */
.dl4-ps-mock--animated .dl4-ps-mock__story-signal {
  animation: hv6SlideUp 0.4s ease-out 0.8s both;
}

/* PSA mock — entrance for new elements */
.dl4-psa-mock--animated .dl4-psa-mock__flags {
  animation: hv6SlideUp 0.4s ease-out 0.7s both;
}
.dl4-psa-mock--animated .dl4-psa-mock__rank-bar {
  animation: hv6SlideUp 0.4s ease-out 0.85s both;
}
.dl4-psa-mock--animated .dl4-psa-mock__rank-fill {
  animation: hv6BarGrow 0.8s ease-out 1.0s both;
}

/* PE mock: structure suggestion badge */
.dl4-pe-sugg__badge--structure {
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
}

/* ─── Advisor Mock — editor entrance animations ─── */
.dl5-advisor-mock--animated .dl5-advisor-mock__bar {
  animation: hv6FadeIn 0.35s ease-out 0.05s both;
}
.dl5-advisor-mock--animated .dl5-advisor-mock__rev-strip {
  animation: hv6FadeIn 0.35s ease-out 0.15s both;
}
.dl5-advisor-mock--animated .dl5-advisor-mock__doc {
  animation: hv6FadeIn 0.5s ease-out 0.25s both;
}
.dl5-advisor-mock--animated .dl5-advisor-mock__add {
  animation: hv6GlowPulse 0.7s ease-out both;
}
.dl5-advisor-mock--animated .dl5-advisor-mock__para:nth-child(1) .dl5-advisor-mock__add { animation-delay: 0.6s; }
.dl5-advisor-mock--animated .dl5-advisor-mock__para:nth-child(2) .dl5-advisor-mock__add { animation-delay: 0.85s; }
.dl5-advisor-mock--animated .dl5-advisor-mock__para:nth-child(3) .dl5-advisor-mock__add { animation-delay: 1.1s; }
.dl5-advisor-mock--animated .dl5-advisor-mock__para:nth-child(4) .dl5-advisor-mock__add { animation-delay: 1.35s; }
.dl5-advisor-mock--animated .dl5-advisor-mock__comments {
  animation: hv6SlideLeft 0.45s ease-out 0.35s both;
}
.dl5-advisor-mock--animated .dl5-advisor-mock__cmt {
  animation: hv6SlideUp 0.35s ease-out both;
}
.dl5-advisor-mock--animated .dl5-advisor-mock__cmt:nth-child(1) { animation-delay: 0.5s; }
.dl5-advisor-mock--animated .dl5-advisor-mock__cmt:nth-child(2) { animation-delay: 0.7s; }
.dl5-advisor-mock--animated .dl5-advisor-mock__cmt:nth-child(3) { animation-delay: 0.9s; }
.dl5-advisor-mock--animated .dl5-advisor-mock__footer {
  animation: hv6SlideUp 0.4s ease-out 0.6s both;
}

/* ─── MI Feedback Page — staggered entrance inside the slide-in page ─── */
.dl4-mi-fb--entering .dl4-mi-fb__header {
  animation: hv6FadeIn 0.35s ease-out 0.3s both;
}
.dl4-mi-fb--entering .dl4-mi-fb__card {
  animation: hv6SlideUp 0.4s ease-out both;
}
.dl4-mi-fb--entering .dl4-mi-fb__card:nth-child(1) { animation-delay: 0.45s; }
.dl4-mi-fb--entering .dl4-mi-fb__card:nth-child(2) { animation-delay: 0.55s; }
.dl4-mi-fb--entering .dl4-mi-fb__school-insight {
  animation: hv6SlideUp 0.4s ease-out 0.65s both;
}
.dl4-mi-fb--entering .dl4-mi-fb__trust {
  animation: hv6FadeIn 0.35s ease-out 0.8s both;
}
.dl4-mi-fb--entering .dl4-mi-fb__moments {
  animation: hv6SlideUp 0.4s ease-out 0.75s both;
}
.dl4-mi-fb--entering .dl4-mi-fb__next {
  animation: hv6FadeIn 0.35s ease-out 0.85s both;
}

/* ─── GPU compositing hints for heavily-animated mock elements ───
   Promoting these to their own layers means transform/opacity changes
   skip paint and layout, eliminating the micro-jank that shows up when
   the cycling timelines run on lower-end machines. Scoped to .hv6-mock-frame
   so the standalone /demo-landing-4 page isn't affected. */
.hv6-mock-frame .dl4-explorer-mock__row,
.hv6-mock-frame .dl4-explorer-mock__sidebar,
.hv6-mock-frame .dl4-explorer-mock__header,
.hv6-mock-frame .dl4-explorer-mock__filter-label,
.hv6-mock-frame .dl4-explorer-mock__filter-select,
.hv6-mock-frame .dl4-explorer-mock__comp-fill,
.hv6-mock-frame .dl4-ps-mock__msg,
.hv6-mock-frame .dl4-ps-mock__check,
.hv6-mock-frame .dl4-ps-mock__chip,
.hv6-mock-frame .dl4-ps-mock__session-fill,
.hv6-mock-frame .dl4-ps-mock__meter-fill,
.hv6-mock-frame .dl4-ss-mock__podium-card,
.hv6-mock-frame .dl4-ss-mock__rank-row,
.hv6-mock-frame .dl4-residency-mock__row,
.hv6-mock-frame .dl4-psel-mock__row,
.hv6-mock-frame .dl5-advisor-mock__cmt,
.hv6-mock-frame .dl5-advisor-mock__add {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Smoother text rendering inside mocks during transforms — avoids the
   blurry-during-animation effect on Chrome with subpixel transforms. */
.hv6-mock-frame {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ─── School Selector entrance — slow down the cascade on hv6 ───
   The base demo_landing_4 timings (podium cards end ~1.1s, rank rows end
   ~1.7s) felt whip-fast once the mock observer was synchronised with the
   wrapper fade. Stretching durations ~2x and widening the stagger makes
   the cascade feel deliberate and legible. Scoped to .hv6-mock-frame so
   the standalone landing page demo is unaffected. */
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__type {
  animation-duration: 0.9s;
}
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__podium-label {
  animation-duration: 0.6s;
  animation-delay: 0.3s;
}
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__podium-card {
  animation-duration: 1.1s;
}
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__podium .dl4-ss-mock__podium-card:nth-child(1) { animation-delay: 0.35s; }
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__podium .dl4-ss-mock__podium-card:nth-child(2) { animation-delay: 0.60s; }
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__podium .dl4-ss-mock__podium-card:nth-child(3) { animation-delay: 0.85s; }
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__podium-card--gold .dl4-ss-mock__podium-glow {
  animation-duration: 1.8s;
  animation-delay: 1.2s;
}
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__rank-section-head {
  animation-duration: 0.55s;
  animation-delay: 1.25s;
}
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__rank-row {
  animation-duration: 0.65s;
}
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__rank-list .dl4-ss-mock__rank-row:nth-child(1) { animation-delay: 1.45s; }
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__rank-list .dl4-ss-mock__rank-row:nth-child(2) { animation-delay: 1.60s; }
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__rank-list .dl4-ss-mock__rank-row:nth-child(3) { animation-delay: 1.75s; }
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__rank-list .dl4-ss-mock__rank-row:nth-child(4) { animation-delay: 1.90s; }
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__rank-list .dl4-ss-mock__rank-row:nth-child(5) { animation-delay: 2.05s; }
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__rank-list .dl4-ss-mock__rank-row:nth-child(6) { animation-delay: 2.20s; }
.hv6-mock-frame .dl4-school-selector-mock--animated .dl4-ss-mock__rank-list .dl4-ss-mock__rank-row:nth-child(7) { animation-delay: 2.35s; }


/* ════════════════════════════════════════════════════════════════
   25. RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════════ */

/* ── Tablet: 1024px ── */
@media (max-width: 1024px) {
  .hv6-feature__grid,
  .hv6-two-col-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .hv6-mini-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Inline-style mini grid override */
  #hv6-mini > div > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .hv6-mock-scaled {
    transform: scale(0.85);
    width: 118%;
  }
  .hv6-mock-body,
  .hv6-mock-frame__body {
    min-height: 480px;
    max-height: 520px;
  }

  /* Undo RTL on stacked layout */
  .hv6-feature--reversed .hv6-feature__grid {
    direction: ltr;
  }
  /* MI feedback grid — single column at tablet */
  .dl4-mi-fb__grid { grid-template-columns: 1fr; }
  /* Advisor comments sidebar — narrower at tablet */
  .dl5-advisor-mock__comments { width: 150px; }
  /* PE editor stats compact */
  .dl4-pe-mock__stat-label { min-width: 80px; }
  /* PSA rank marker moves inside bar */
  .dl4-psa-mock__rank-marker { font-size: 8px; top: -14px; }
  /* Entrance animation still applies at 1024 (not disabled) */
  .hv6-feature--reversed .hv6-feature__text {
    transform: translateX(30px);
  }
}

/* ── Mobile: 768px ── */
@media (max-width: 768px) {
  /* Hide nav links */
  .hv6-nav__links,
  .hv6-nav__links-desktop {
    display: none !important;
  }

  /* Show mock columns on mobile — stacked below text */
  .hv6-mock-col {
    display: block;
  }
  .hv6-hero-mock-col {
    display: block;
  }

  /* Compact nav actions */
  .hv6-nav__actions .hv6-btn--ghost {
    display: none !important;
  }
  .hv6-nav__actions .hv6-btn--primary {
    padding: 0.4rem 0.9rem !important;
    font-size: 0.8rem !important;
  }

  /* Hero adjustments — clear fixed nav + safe-area (toggler was tucking under bar) */
  .hv6-hero {
    min-height: auto;
    /* Room for nav pill + gap; reveal/GSAP used to pull copy up ~30px on settle */
    padding-top: calc(132px + env(safe-area-inset-top, 0px));
    padding-bottom: 2rem;
  }
  /* No vertical reveal on hero copy — avoids toggler sliding up under fixed nav after IO/GSAP */
  .hv6-hero__content.hv6-reveal,
  .hv6-hero__content.hv6-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hv6-hero__content h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  /* Section padding reduced */
  .hv6-feature {
    padding: 4rem 0;
  }
  /* Exclude .hv6-hero: higher specificity (.hv6 section) was beating .hv6-hero and
     collapsing padding-top to 3rem — toggler sat under the fixed nav on mobile. */
  .hv6 section:not(.hv6-hero) {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Mock scaled */
  .hv6-mock-scaled {
    transform: scale(0.75);
    width: 133%;
  }
  .hv6-mock-body,
  .hv6-mock-frame__body {
    min-height: 380px;
    max-height: 420px;
  }
  /* Advisor comments — hide on mobile, doc fills full width */
  .dl5-advisor-mock__comments { display: none; }
  /* PE editor stats — compact */
  .dl4-pe-mock__editor-stats { padding: 6px 10px; gap: 3px; }
  .dl4-pe-mock__stat-label { min-width: 70px; font-size: 9px; }
  /* PSA flags + rank compact */
  .dl4-psa-mock__flags, .dl4-psa-mock__rank-bar { padding: 6px 8px; }
  /* MI feedback compact */
  .dl4-mi-fb__moments { padding: 8px 10px; }
  .dl4-mi-fb__moment { grid-template-columns: 30px auto 1fr; gap: 4px; }
  /* Story signal compact */
  .dl4-ps-mock__story-signal { padding: 6px 8px; }
  .dl4-ps-mock__story-signal-text { font-size: 9px; }

  /* Stats */
  .hv6-stat::after { display: none; }
  div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer 2 cols */
  .hv6-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }

  /* Logo wrap */
  div[style*="flex-wrap:wrap"] {
    gap: 1.5rem !important;
  }
}

/* ── Small mobile: 480px ── */
@media (max-width: 480px) {
  .hv6-mini-grid {
    grid-template-columns: 1fr;
  }

  /* Inline-style mini grid override */
  #hv6-mini > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .hv6-mock-frame {
    display: none;
  }

  /* Footer 1 col */
  .hv6-footer__grid {
    grid-template-columns: 1fr;
  }
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Stats */
  div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero */
  .hv6-hero__content h1 {
    font-size: 2rem;
  }
  .hv6-hero__buttons,
  .hv6-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Mini grid single column */
  .hv6-mini-grid {
    grid-template-columns: 1fr;
  }

  /* CTA actions stack */
  .hv6-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ════════════════════════════════════════════════════════════════
   26. HERO DEVICE MOCKUPS — Laptop + phone at bottom of hero
   ════════════════════════════════════════════════════════════════ */
.hv6-hero-devices {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  margin: 3.5rem auto 0;
  padding: 0 1.5rem;
}

/* ── Laptop ── */
.hv6-device-laptop {
  position: relative;
  width: 100%;
}
.hv6-device-laptop__screen {
  background: #0f1117;
  border-radius: 12px 12px 0 0;
  border: 2px solid #cbd5e1;
  border-bottom: none;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: 0 4px 60px rgba(0, 0, 0, 0.12),
              0 0 80px -20px rgba(var(--hv6-accent-rgb), 0.06);
}
.hv6-device-laptop__base {
  background: linear-gradient(to bottom, #d1d5db, #9ca3af);
  height: 18px;
  border-radius: 0 0 10px 10px;
  position: relative;
  border: 1px solid #d1d5db;
  border-top: 1px solid #e5e7eb;
}
.hv6-device-laptop__hinge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 5px;
  background: #9ca3af;
  border-radius: 0 0 4px 4px;
}

/* ── Dashboard UI inside laptop ── */
.hv6-dash-mock {
  display: flex;
  height: 100%;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

.hv6-dash-mock__side {
  width: 50px;
  background: rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 4px;
  flex-shrink: 0;
}
.hv6-dash-mock__side-logo {
  width: 30px;
  height: 30px;
  background: var(--hv6-gradient);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  margin-bottom: 10px;
}
.hv6-dash-mock__side-item {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  cursor: default;
}
.hv6-dash-mock__side-item--on {
  background: rgba(var(--hv6-accent-rgb), 0.15);
  color: var(--hv6-accent-light);
}

.hv6-dash-mock__main {
  flex: 1;
  padding: 14px 18px;
  overflow: hidden;
  min-width: 0;
}
.hv6-dash-mock__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.hv6-dash-mock__greeting {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.hv6-dash-mock__cycle {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.hv6-dash-mock__cycle i {
  margin-right: 3px;
  font-size: 9px;
}

/* Stat cards */
.hv6-dash-mock__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.hv6-dash-mock__card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hv6-dash-mock__card-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.hv6-dash-mock__card strong {
  display: block;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  line-height: 1.1;
}
.hv6-dash-mock__card small {
  display: block;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
}

/* Progress bar */
.hv6-dash-mock__prog {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.hv6-dash-mock__prog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}
.hv6-dash-mock__prog-top strong {
  color: var(--hv6-accent-light);
  font-weight: 700;
  font-size: 12px;
}
.hv6-dash-mock__prog-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  overflow: hidden;
}
.hv6-dash-mock__prog-fill {
  height: 100%;
  width: 72%;
  background: var(--hv6-gradient);
  border-radius: 5px;
}

/* School list */
.hv6-dash-mock__list {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
}
.hv6-dash-mock__list-hd {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}
.hv6-dash-mock__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}
.hv6-dash-mock__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.hv6-dash-mock__fit {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}
.hv6-dash-mock__fit--hi {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.15);
}
.hv6-dash-mock__fit--md {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.15);
}

/* Journey progress bar */
.hv6-dash-mock__journey {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.hv6-dash-mock__journey-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.hv6-dash-mock__journey-fill {
  height: 100%;
  width: 45%;
  background: var(--hv6-gradient);
  border-radius: 4px;
}
.hv6-dash-mock__journey-steps {
  display: flex;
  justify-content: space-between;
}
.hv6-dash-mock__step {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}
.hv6-dash-mock__step i { font-size: 7px; }
.hv6-dash-mock__step--done { color: #34d399; }
.hv6-dash-mock__step--on { color: var(--hv6-accent-light); }

/* Two-column: school list + tasks */
.hv6-dash-mock__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.hv6-dash-mock__tasks {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
}
.hv6-dash-mock__task {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.hv6-dash-mock__task i { font-size: 10px; }
.hv6-dash-mock__task--pend { color: rgba(255, 255, 255, 0.35); }

/* Bar right group */
.hv6-dash-mock__bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hv6-dash-mock__notif {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  cursor: default;
}
.hv6-dash-mock__notif-dot {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  border: 1px solid #0f1117;
}

/* Social proof bar */
.hv6-dash-mock__social-proof {
  display: flex;
  align-items: center;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 8px;
  padding: 5px 10px;
  margin-bottom: 10px;
}

/* Journey label */
.hv6-dash-mock__journey-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

/* Three-column: Applying + Favorites + Advisor */
.hv6-dash-mock__trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

/* Favorites panel */
.hv6-dash-mock__favs {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
}
.hv6-dash-mock__fav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.hv6-dash-mock__fav-row:last-of-type { border-bottom: none; }
.hv6-dash-mock__fav-name {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.hv6-dash-mock__fav-more {
  display: block;
  font-size: 9px;
  color: var(--hv6-accent-light);
  margin-top: 4px;
  font-weight: 600;
}

/* Advisor panel */
.hv6-dash-mock__advisor {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
}
.hv6-dash-mock__advisor-card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.hv6-dash-mock__advisor-avatar {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.hv6-dash-mock__advisor-info strong {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
}
.hv6-dash-mock__advisor-info small {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.35);
}
.hv6-dash-mock__advisor-cta {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: var(--hv6-gradient);
  border-radius: 6px;
  padding: 5px 0;
  text-align: center;
  margin-bottom: 6px;
  cursor: default;
}
.hv6-dash-mock__advisor-cta i { margin-right: 3px; font-size: 8px; }
.hv6-dash-mock__advisor-status {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
}

/* Activity panel */
.hv6-dash-mock__activity {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
}
.hv6-dash-mock__activity-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.hv6-dash-mock__activity-item:last-child { border-bottom: none; }
.hv6-dash-mock__activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.hv6-dash-mock__activity-item div {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.35;
}
.hv6-dash-mock__activity-item strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
.hv6-dash-mock__activity-item small {
  display: block;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 1px;
}

/* ── Phone — taller, positioned to the right ── */
.hv6-device-phone {
  position: absolute;
  right: -50px;
  bottom: 20px;
  width: 210px;
  max-height: 430px;
  background: #0b0d14;
  border-radius: 28px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  z-index: 3;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55),
              0 0 40px -10px rgba(var(--hv6-accent-rgb), 0.15);
}
.hv6-device-phone__notch {
  width: 70px;
  height: 6px;
  background: #1a1d28;
  border-radius: 3px;
  margin: 10px auto 6px;
}
.hv6-device-phone__screen {
  padding: 2px 12px 14px;
}

/* ── Fit score card inside phone ── */
.hv6-fit-mock {
  text-align: center;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.hv6-fit-mock__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 2px;
}
.hv6-fit-mock__ic {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(124, 58, 237, 0.2));
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #60a5fa;
}
.hv6-fit-mock__title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}
.hv6-fit-mock__badge {
  font-size: 8px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 7px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.hv6-fit-mock__badge i { font-size: 7px; margin-right: 2px; color: #a78bfa; }
.hv6-fit-mock__school {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  margin: 2px 0 8px;
}
.hv6-fit-mock__ring-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 6px;
}
.hv6-fit-mock__ring {
  display: block;
  width: 100%;
  height: 100%;
}
.hv6-fit-mock__score {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hv6-fit-mock__val {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  font-family: 'Inter Tight', sans-serif;
}
.hv6-fit-mock__pct {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}
.hv6-fit-mock__label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.hv6-fit-mock__conf {
  display: block;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 8px;
}
.hv6-fit-mock__pills {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.hv6-fit-mock__pill {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.hv6-fit-mock__pill i { font-size: 7px; }
.hv6-fit-mock__pill--ok {
  background: rgba(45, 206, 152, 0.12);
  color: #2dce98;
  border: 1px solid rgba(45, 206, 152, 0.15);
}
.hv6-fit-mock__pill--match {
  background: rgba(37, 99, 235, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(37, 99, 235, 0.15);
}
.hv6-fit-mock__pill--target {
  background: rgba(37, 99, 235, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(37, 99, 235, 0.15);
}
/* Factor breakdown */
.hv6-fit-mock__breakdown {
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}
.hv6-fit-mock__metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
.hv6-fit-mock__diff {
  font-size: 9px;
  font-weight: 600;
}
.hv6-fit-mock__diff i { font-size: 7px; margin-left: 2px; }
.hv6-fit-mock__diff--up { color: #34d399; }
.hv6-fit-mock__diff--ok { color: #60a5fa; }
.hv6-fit-mock__diff--down { color: #f87171; }

/* Factor breakdown header */
.hv6-fit-mock__bd-hd {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

/* Considerations section */
.hv6-fit-mock__considerations {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
  margin-top: 4px;
  text-align: left;
}
.hv6-fit-mock__consider-item {
  font-size: 8px;
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.hv6-fit-mock__consider-item i { font-size: 8px; flex-shrink: 0; }
.hv6-fit-mock__consider-item--pro { color: rgba(52, 211, 153, 0.85); }
.hv6-fit-mock__consider-item--note { color: rgba(96, 165, 250, 0.75); }

/* AI teaser */
.hv6-fit-mock__ai-teaser {
  display: flex;
  align-items: flex-start;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 8px;
  padding: 6px 8px;
  margin-top: 8px;
  text-align: left;
}
.hv6-fit-mock__ai-teaser span {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
  font-style: italic;
}


/* ════════════════════════════════════════════════════════════════
   27. HERO DEVICE — Responsive
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hv6-hero-devices {
    max-width: 800px;
    margin-top: 2.5rem;
  }
  .hv6-device-phone {
    width: 200px;
    right: -20px;
    bottom: 20px;
  }
  .hv6-dash-mock__trio {
    grid-template-columns: 1fr 1fr;
  }
  .hv6-dash-mock__advisor { display: none; }
}

@media (max-width: 768px) {
  .hv6-hero-devices {
    max-width: 100%;
    margin-top: 2rem;
  }
  .hv6-device-phone {
    width: 170px;
    right: -10px;
    bottom: 10px;
    border-radius: 20px;
  }
  .hv6-device-phone__notch {
    width: 50px;
    height: 5px;
    margin: 8px auto 4px;
  }
  .hv6-fit-mock__ring-wrap {
    width: 70px;
    height: 70px;
  }
  .hv6-fit-mock__val { font-size: 20px; }
  .hv6-fit-mock__pct { font-size: 9px; }
  .hv6-fit-mock__breakdown { display: none; }
  .hv6-fit-mock__considerations { display: none; }
  .hv6-fit-mock__ai-teaser { display: none; }
  .hv6-dash-mock__cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .hv6-dash-mock__card strong { font-size: 13px; }
  .hv6-dash-mock__greeting { font-size: 12px; }
  .hv6-dash-mock__trio { grid-template-columns: 1fr; }
  .hv6-dash-mock__favs { display: none; }
  .hv6-dash-mock__advisor { display: none; }
  .hv6-dash-mock__cols { grid-template-columns: 1fr; }
  .hv6-dash-mock__tasks { display: none; }
  .hv6-dash-mock__activity { display: none; }
  .hv6-dash-mock__journey-steps { display: none; }
  .hv6-dash-mock__social-proof { display: none; }
  /* Sticky features → normal on mobile */
  .hv6-feature {
    position: relative !important;
    min-height: auto !important;
  }
  /* Make mocks visible immediately on mobile — no entrance animation */
  .hv6-feature__text,
  .hv6-mock-col {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* MI feedback — compact on mobile */
  .dl4-mi-fb__grid { grid-template-columns: 1fr; }
  .dl4-mi-fb__face-grid { grid-template-columns: repeat(2, 1fr); }
  /* Advisor comments sidebar — hide on mobile */
  .dl5-advisor-mock__comments { display: none; }
  .dl5-advisor-mock__bar-pill { display: none; }
}

@media (max-width: 480px) {
  .hv6-device-phone {
    position: relative;
    right: auto;
    bottom: auto;
    width: 200px;
    margin: -20px auto 0;
  }
  .hv6-device-laptop__screen {
    aspect-ratio: 4 / 3;
  }
  .hv6-dash-mock__side { display: none; }
  .hv6-dash-mock__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .hv6-dash-mock__list { display: none; }
  .hv6-dash-mock__journey { display: none; }
  .hv6-fit-mock__breakdown { display: block; }
  .hv6-fit-mock__considerations { display: block; }
  .hv6-fit-mock__ai-teaser { display: flex; }
}

/* ════════════════════════════════════════════════════════════════
   LARGE-SCREEN SCALING — widen containers so content doesn't feel
   lost in a narrow column on big displays (1600px+, 1920px+, 2400px+).
   Keeps narrow CTA copy intentionally readable.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  .hv6-nav__inner { max-width: 1480px; }
  .hv6-feature__inner { max-width: 92rem; }      /* 1472px */
  .hv6-mini__inner { max-width: 92rem; }
  .hv6-footer__inner { max-width: 92rem; }
  .hv6-cta__inner,
  .hv6-cta__content { max-width: 60rem; }        /* 960px (readable CTA) */
}

@media (min-width: 1920px) {
  .hv6-nav__inner { max-width: 1640px; }
  .hv6-feature__inner { max-width: 104rem; }     /* 1664px */
  .hv6-mini__inner { max-width: 104rem; }
  .hv6-footer__inner { max-width: 104rem; }
  .hv6-cta__inner,
  .hv6-cta__content { max-width: 68rem; }
}

@media (min-width: 2400px) {
  .hv6-nav__inner { max-width: 1840px; }
  .hv6-feature__inner { max-width: 120rem; }     /* 1920px */
  .hv6-mini__inner { max-width: 120rem; }
  .hv6-footer__inner { max-width: 120rem; }
  .hv6-cta__inner,
  .hv6-cta__content { max-width: 76rem; }
}