/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE V6 — MOBILE OPTIMIZATION LAYER
   ═══════════════════════════════════════════════════════════════════
   Loaded AFTER homepage_v6.css so it wins the cascade.

   Strategy:
   - Kill the global scale(0.75) hack on phones — mocks render at native
     scale inside a full-bleed frame.
   - Each feature gets its own mobile treatment with slight variety in
     layout and entrance micro-animations so the page does not feel
     like 10 identical cards stacked.
   - All GSAP loops inside each mock keep working untouched — we only
     reshape the shell and the frame-level reveal.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   0. SHARED MOBILE FRAMEWORK (≤ 640px)
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* ── Mode toggler fix ──
     homepage_v6.css:2754 forces `.hv6-mock-col { display: block }` on
     mobile, which overrides the desktop mode-based visibility rules
     (`.hv6-mode-predental { display: none }`) and causes BOTH the
     dental-school and residency mocks to show at once. Re-apply the
     mode logic with enough specificity to beat that rule. */
  .hv6 .hv6-mode-predental,
  .hv6 .hv6-mode-residency {
    display: none !important;
  }
  .hv6[data-mode="predental"] .hv6-mode-predental {
    display: block !important;
  }
  .hv6[data-mode="residency"] .hv6-mode-residency {
    display: block !important;
  }
  /* Same for text blocks that live inside a single column. */
  .hv6 .hv6-text-predental,
  .hv6 .hv6-text-residency {
    display: none !important;
  }
  .hv6[data-mode="predental"] .hv6-text-predental {
    display: block !important;
  }
  .hv6[data-mode="residency"] .hv6-text-residency {
    display: block !important;
  }

  /* ── Global overflow containment ──
     Stop any demo grid or wide child from pushing the page past the
     viewport. Every mock container gets min-width:0 (so flex/grid
     children can shrink below their intrinsic content width) and the
     page itself is clipped horizontally. */
  html, body {
    overflow-x: hidden;
  }
  .hv6 {
    max-width: 100vw;
    overflow-x: clip;
  }
  .hv6-feature,
  .hv6-feature__inner,
  .hv6-feature__grid,
  .hv6-mock-col,
  .hv6-mock-frame,
  .hv6-mock-body,
  .hv6-mock-frame__body {
    max-width: 100%;
    min-width: 0;
  }

  /* Undo the scale(0.75) / width:133% hack — mocks render natively,
     full bleed to the edge of the section padding. */
  .hv6-mock-scaled {
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* Let the frame breathe to the true edge on small screens,
     keeping only a small margin so the rounded corner stays visible. */
  .hv6-feature__inner {
    padding: 0 0.75rem !important;
  }
  .hv6-feature__grid {
    gap: 1.5rem !important;
  }
  .hv6-mock-col {
    width: 100%;
  }

  /* Frame — tighter radius, slightly punchier shadow so the demo
     pops on white section bg. */
  .hv6-mock-frame {
    border-radius: 14px;
    box-shadow:
      0 2px 6px rgba(15, 23, 42, 0.06),
      0 18px 36px -18px rgba(37, 99, 235, 0.22);
  }
  .hv6-mock-frame::before { display: none; }

  /* Chrome bar — compact traffic-light row, smaller title. */
  .hv6-mock-chrome,
  .hv6-mock-frame__bar {
    padding: 0.5rem 0.75rem;
    gap: 5px;
  }
  .hv6-mock-dot,
  .hv6-mock-chrome__dot,
  .hv6-mock-frame__dot {
    width: 8px;
    height: 8px;
  }
  .hv6-mock-chrome__title,
  .hv6-mock-frame__title {
    font-size: 0.65rem;
    margin-left: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* Body — auto height instead of the 380–420 clamp that was
     chopping content on phones. Each demo tunes its own below. */
  .hv6-mock-body,
  .hv6-mock-frame__body {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }

  /* Soft, unified entrance reveal — kept very short so it does not
     fight the inner GSAP loops. */
  .hv6-mock-col {
    transform: translateY(8px);
    opacity: 0;
    animation: hv6MobileMockIn 520ms cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: 80ms;
  }
}

@keyframes hv6MobileMockIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion. */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .hv6-mock-col {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* ───────────────────────────────────────────────────────────────────
   1. FEATURE 1 — SCHOOL EXPLORER / RESIDENCY FINDER
   ─────────────────────────────────────────────────────────────────── */
/* Sidebar becomes a horizontal filter strip pinned at the top; list
   takes the rest. Rows show name + comp-bar + 2 key badges. Each row
   gets a thin left-accent that slides in. */
@media (max-width: 640px) {
  .hv6-feature--1 .dl4-explorer-mock,
  .hv6-feature--1 .dl4-residency-mock {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    min-height: 0;
  }

  /* Sidebar → horizontal scroll chip rail. */
  .hv6-feature--1 .dl4-explorer-mock__sidebar,
  .hv6-feature--1 .dl4-residency-mock__sidebar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(90deg, #f8fafc 0%, #fff 100%);
    min-height: 0 !important;
  }
  .hv6-feature--1 .dl4-explorer-mock__sidebar::-webkit-scrollbar,
  .hv6-feature--1 .dl4-residency-mock__sidebar::-webkit-scrollbar { display: none; }

  /* Search shrinks inside the strip. */
  .hv6-feature--1 .dl4-explorer-mock__search-wrap,
  .hv6-feature--1 .dl4-residency-mock__search-wrap {
    flex: 0 0 150px;
    min-width: 140px;
  }
  .hv6-feature--1 .dl4-explorer-mock__search,
  .hv6-feature--1 .dl4-residency-mock__search {
    font-size: 11px;
    padding: 5px 6px 5px 24px;
  }

  /* Hide the "State / Competitiveness / …" labels; keep only
     the selects themselves as pill-sized chips. */
  .hv6-feature--1 .dl4-explorer-mock__filter-label,
  .hv6-feature--1 .dl4-residency-mock__filter-label { display: none !important; }

  .hv6-feature--1 .dl4-explorer-mock__filter-select,
  .hv6-feature--1 .dl4-residency-mock__filter-select {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 5px 8px;
    border-radius: 100px;
    background: #fff;
    min-width: 0;
  }

  /* The chip row (Public / Private) already looks chip-like;
     just keep it inline. */
  .hv6-feature--1 .dl4-explorer-mock__chips,
  .hv6-feature--1 .dl4-residency-mock__chips {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .hv6-feature--1 .dl4-explorer-mock__apply,
  .hv6-feature--1 .dl4-residency-mock__apply {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 6px 10px;
    white-space: nowrap;
  }

  /* Main list fills width, tighter padding. */
  .hv6-feature--1 .dl4-explorer-mock__main,
  .hv6-feature--1 .dl4-residency-mock__main {
    padding: 10px 12px !important;
    min-height: 0 !important;
  }
  .hv6-feature--1 .dl4-explorer-mock__rows,
  .hv6-feature--1 .dl4-residency-mock__rows {
    gap: 6px !important;
  }

  /* Row: name on one line, comp bar, compact badge row. */
  .hv6-feature--1 .dl4-explorer-mock__row,
  .hv6-feature--1 .dl4-residency-mock__row {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    position: relative;
    overflow: hidden;
  }
  /* Accent sliver on each row — subtle brand cue. */
  .hv6-feature--1 .dl4-explorer-mock__row::before,
  .hv6-feature--1 .dl4-residency-mock__row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #2563eb, #7c3aed);
    opacity: 0.7;
    transform: scaleY(0);
    transform-origin: top;
    animation: hv6RowAccentIn 700ms ease-out forwards;
    animation-delay: 0.35s;
  }
  .hv6-feature--1[data-mode="residency"] .dl4-residency-mock__row::before,
  body[data-mode="residency"] .hv6-feature--1 .dl4-residency-mock__row::before {
    background: linear-gradient(180deg, #7c3aed, #ec4899);
  }

  .hv6-feature--1 .dl4-explorer-mock__row-top,
  .hv6-feature--1 .dl4-residency-mock__row-top {
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .hv6-feature--1 .dl4-explorer-mock__row-name,
  .hv6-feature--1 .dl4-residency-mock__row-name {
    font-size: 13px !important;
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
  }
  .hv6-feature--1 .dl4-explorer-mock__row-loc,
  .hv6-feature--1 .dl4-residency-mock__row-loc {
    font-size: 10px !important;
    flex-basis: 100%;
  }
  .hv6-feature--1 .dl4-explorer-mock__row-heart,
  .hv6-feature--1 .dl4-residency-mock__row-heart {
    position: absolute; top: 8px; right: 8px;
  }

  /* Comp bar — full-width, thicker for touch-scale readability. */
  .hv6-feature--1 .dl4-explorer-mock__comp-bar,
  .hv6-feature--1 .dl4-residency-mock__comp-bar {
    height: 5px !important;
  }
  .hv6-feature--1 .dl4-explorer-mock__comp-label,
  .hv6-feature--1 .dl4-residency-mock__comp-label {
    font-size: 9px !important;
  }
  .hv6-feature--1 .dl4-explorer-mock__comp-num,
  .hv6-feature--1 .dl4-residency-mock__comp-num {
    font-size: 11px !important;
  }

  /* Badges — keep only the first 3 on phones so the row stays one line. */
  .hv6-feature--1 .dl4-explorer-mock__row-badges,
  .hv6-feature--1 .dl4-residency-mock__row-badges {
    gap: 4px !important;
    flex-wrap: wrap;
  }
  .hv6-feature--1 .dl4-explorer-mock__row-badges .dl4-explorer-mock__badge:nth-child(n+4),
  .hv6-feature--1 .dl4-residency-mock__row-badges .dl4-residency-mock__badge:nth-child(n+4) {
    display: none;
  }
  .hv6-feature--1 .dl4-explorer-mock__badge,
  .hv6-feature--1 .dl4-residency-mock__badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }

  /* Only show the top 4 rows on phone — the rest scroll out anyway. */
  .hv6-feature--1 .dl4-explorer-mock__row:nth-child(n+5),
  .hv6-feature--1 .dl4-residency-mock__row:nth-child(n+5) {
    display: none;
  }

  /* Header */
  .hv6-feature--1 .dl4-explorer-mock__header,
  .hv6-feature--1 .dl4-residency-mock__header {
    padding: 8px 0 !important;
  }
  .hv6-feature--1 .dl4-explorer-mock__header-title,
  .hv6-feature--1 .dl4-residency-mock__header-title {
    font-size: 12px !important;
  }
}

@keyframes hv6RowAccentIn {
  to { transform: scaleY(1); }
}


/* ───────────────────────────────────────────────────────────────────
   2. FEATURE 2 — STORY MINER / CLINICAL NARRATIVE
   ─────────────────────────────────────────────────────────────────── */
/* Design constraint: chat messages stream in via GSAP, which naturally
   grows the container and shifts layout below. On mobile we lock the
   outer body to a fixed height, let messages anchor to the bottom, and
   clip older messages off the top as new ones arrive — so the demo
   looks like a live chat reel without pushing the page height.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Lock the outer body height so the frame never grows with messages. */
  .hv6-feature--2 .hv6-mock-body {
    height: 560px !important;
    min-height: 560px !important;
    max-height: 560px !important;
    overflow: hidden !important;
  }
  .hv6-feature--2 .dl4-ps-mock {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .hv6-feature--2 .dl4-ps-mock__chrome { flex-shrink: 0; }
  .hv6-feature--2 .dl4-ps-mock__body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Chat column stretches; feedback drawer stays fixed size at the bottom. */
  .hv6-feature--2 .dl4-ps-mock__chat {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 10px 12px !important;
  }
  .hv6-feature--2 .dl4-ps-mock__session-bar {
    flex-shrink: 0;
    padding: 6px 10px !important;
    font-size: 10px !important;
  }

  /* Messages: flex column anchored to bottom. As GSAP inserts new bubbles
     they push older ones up and off the top via overflow:hidden — the
     chat feels live without expanding the frame. */
  .hv6-feature--2 .dl4-ps-mock__messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 10px 0 !important;
    gap: 8px !important;
  }

  /* Chrome — hide long school name on phones. */
  .hv6-feature--2 .dl4-ps-mock__chrome-school {
    max-width: 50%;
  }
  .hv6-feature--2 .dl4-ps-mock__target-school {
    font-size: 9px !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .hv6-feature--2 .dl4-ps-mock__bubble {
    max-width: 92% !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
    line-height: 1.35 !important;
  }
  .hv6-feature--2 .dl4-ps-mock__bubble-label {
    font-size: 8.5px !important;
    margin-bottom: 3px !important;
  }
  .hv6-feature--2 .dl4-ps-mock__avatar {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }
  .hv6-feature--2 .dl4-ps-mock__composer {
    flex-shrink: 0;
    padding: 8px 10px !important;
  }
  .hv6-feature--2 .dl4-ps-mock__composer-hint {
    font-size: 11px !important;
  }

  /* Feedback aside — a fixed-height bottom drawer: horizontal theme
     chips + compact meter. Drop the tabs & big checks on phone;
     the demo still communicates feedback via chips and meter fill. */
  .hv6-feature--2 .dl4-ps-mock__feedback {
    flex-shrink: 0 !important;
    max-height: 150px !important;
    overflow: hidden !important;
    padding: 10px 12px !important;
    border-left: none !important;
    border-top: 1px solid #e2e8f0 !important;
    background: linear-gradient(180deg, #fbfbff 0%, #f6f7fb 100%) !important;
  }
  .hv6-feature--2 .dl4-ps-mock__feedback-head {
    margin-bottom: 6px !important;
  }
  .hv6-feature--2 .dl4-ps-mock__feedback-title {
    font-size: 11px !important;
  }
  .hv6-feature--2 .dl4-ps-mock__feedback-sub {
    font-size: 9px !important;
  }

  /* Drop tabs + the long check-list on phone — save vertical space. */
  .hv6-feature--2 .dl4-ps-mock__tabs,
  .hv6-feature--2 .dl4-ps-mock__panels {
    display: none !important;
  }

  /* Coach chips become a horizontal scroll row. */
  .hv6-feature--2 .dl4-ps-mock__coach {
    padding: 6px 0 !important;
    margin: 0 !important;
  }
  .hv6-feature--2 .dl4-ps-mock__coach-label {
    font-size: 9px !important;
    margin-bottom: 5px !important;
  }
  .hv6-feature--2 .dl4-ps-mock__chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 5px !important;
    scrollbar-width: none;
  }
  .hv6-feature--2 .dl4-ps-mock__chips::-webkit-scrollbar { display: none; }
  .hv6-feature--2 .dl4-ps-mock__chip {
    flex: 0 0 auto;
    font-size: 10px !important;
    padding: 4px 9px !important;
    white-space: nowrap;
  }

  /* Meter — compact. */
  .hv6-feature--2 .dl4-ps-mock__meter {
    padding: 6px 0 !important;
    margin-top: 6px !important;
  }
  .hv6-feature--2 .dl4-ps-mock__meter-label {
    font-size: 9px !important;
  }
  .hv6-feature--2 .dl4-ps-mock__meter-bar {
    height: 6px !important;
  }
  .hv6-feature--2 .dl4-ps-mock__meter-meta {
    font-size: 9px !important;
  }

  /* Story signal — tiny, single-line. */
  .hv6-feature--2 .dl4-ps-mock__story-signal {
    padding: 6px 8px !important;
    margin-top: 6px !important;
    font-size: 9px !important;
  }

  /* Pop animation on bubbles — light, one-shot, respects GSAP. */
  .hv6-feature--2 .dl4-ps-mock__bubble {
    transform-origin: left center;
  }
}


/* ───────────────────────────────────────────────────────────────────
   3. FEATURE 3 — PS ANALYZER
   ─────────────────────────────────────────────────────────────────── */
/* Hero ring centered and enlarged. Dimension bars stack full width
   with slight staggered fill. Cards become 2-up. */
@media (max-width: 640px) {
  .hv6-feature--3 .psa-demo {
    padding: 16px 14px !important;
    gap: 14px !important;
  }

  /* Hero ring — centered, bigger, score + label below in stacked col. */
  .hv6-feature--3 .psa-demo__hero {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }
  .hv6-feature--3 .psa-demo__ring {
    width: 110px !important;
    height: 110px !important;
  }
  .hv6-feature--3 .psa-demo__score {
    font-size: 12px !important;
  }

  /* Dimension bars — full width, thicker fills. */
  .hv6-feature--3 .psa-demo__dims {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .hv6-feature--3 .psa-demo__dim {
    padding: 6px 0;
  }
  .hv6-feature--3 .psa-demo__dim-name {
    font-size: 11px !important;
  }
  .hv6-feature--3 .psa-demo__dim-val {
    font-size: 11px !important;
  }
  .hv6-feature--3 .psa-demo__dim-track {
    height: 6px !important;
  }

  /* Rank bar kept, but smaller. */
  .hv6-feature--3 .psa-demo__rank {
    padding: 10px 12px !important;
  }
  .hv6-feature--3 .psa-demo__rank-label,
  .hv6-feature--3 .psa-demo__rank-marker {
    font-size: 9px !important;
  }

  /* Insight cards — 1 column, compact. */
  .hv6-feature--3 .psa-demo__insights {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .hv6-feature--3 .psa-demo__card {
    padding: 10px 12px !important;
  }
  .hv6-feature--3 .psa-demo__card-head {
    font-size: 11px !important;
  }
  .hv6-feature--3 .psa-demo__card-item {
    font-size: 10px !important;
  }

  /* Flags row collapses to 2-up. */
  .hv6-feature--3 .psa-demo__flags {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .hv6-feature--3 .psa-demo__flag {
    font-size: 9px !important;
  }

  /* The upgrade/blur CTA — confine to the card it belongs to. */
  .hv6-feature--3 .psa-demo__blur-cta {
    font-size: 11px !important;
    padding: 8px 10px !important;
  }

  /* Dimension bar fill gets a soft ease-in when in view so it feels
     alive without a second JS loop — the existing ring animation
     handles the hero. */
  .hv6-feature--3 .psa-demo__dim-fill {
    transition: width 1.1s cubic-bezier(.4, 0, .2, 1);
  }
}


/* ───────────────────────────────────────────────────────────────────
   4. FEATURE 4 — PS EDITOR
   ─────────────────────────────────────────────────────────────────── */
/* Design constraint: fixed body height; suggestions panel stripped to
   its essentials — one compact "old → new · approve" card. No scroll
   anywhere except inside the editor-body (that's the editor's own
   scroll, intentional to show the JS auto-scroll-to-suggestion flow). */
@media (max-width: 640px) {

  /* Lock the body to one height so the suggestions panel has a stable
     slot below the editor and nothing reflows as cards cycle. */
  .hv6-feature--4 .hv6-mock-body {
    height: 540px !important;
    min-height: 540px !important;
    max-height: 540px !important;
    overflow: hidden !important;
  }

  .hv6-feature--4 .dl4-pe-mock {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .hv6-feature--4 .dl4-pe-mock__top,
  .hv6-feature--4 .dl4-pe-mock__toolbar {
    flex-shrink: 0;
  }
  .hv6-feature--4 .dl4-pe-mock__grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Hide the Quick Actions sidebar on phones — the toolbar above
     already exposes the main actions, and the suggestions panel
     tells the user what the AI is doing. */
  .hv6-feature--4 .dl4-pe-mock__qa {
    display: none !important;
  }

  /* Top bar compacts; school and count keep their pills but shrink. */
  .hv6-feature--4 .dl4-pe-mock__top {
    padding: 8px 10px !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }
  .hv6-feature--4 .dl4-pe-mock__doc-title {
    font-size: 11px !important;
  }
  .hv6-feature--4 .dl4-pe-mock__school {
    font-size: 9px !important;
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .hv6-feature--4 .dl4-pe-mock__count {
    font-size: 10px !important;
  }

  /* Editor takes the flex-1 area; its body scrolls internally (JS
     auto-scrolls to the active suggestion — part of the demo). */
  .hv6-feature--4 .dl4-pe-mock__editor {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0;
  }
  .hv6-feature--4 .dl4-pe-mock__editor-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
  .hv6-feature--4 .dl4-pe-mock__editor-foot {
    flex-shrink: 0;
  }
  .hv6-feature--4 .dl4-pe-mock__para {
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }

  /* Toolbar: horizontal scroll still fine — these are tiny icons. */
  .hv6-feature--4 .dl4-pe-mock__toolbar {
    padding: 6px 8px !important;
    gap: 4px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hv6-feature--4 .dl4-pe-mock__toolbar::-webkit-scrollbar { display: none; }
  .hv6-feature--4 .dl4-pe-mock__toolbar > * {
    flex: 0 0 auto;
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
  .hv6-feature--4 .dl4-pe-mock__toolbar-status {
    font-size: 9px !important;
  }

  /* ── Suggestions panel — minimal card: diff + approve only ── */
  /* Fixed slot at bottom, no scroll. Show one panel at a time (the JS
     toggles which panel is visible). Within a panel, stacked compact
     cards that each fit on one line as "old → new · Approve". */
  .hv6-feature--4 .dl4-pe-mock__suggestions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    height: 140px !important;
    max-height: 140px !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #fafbff 0%, #f4f6fc 100%);
    border-top: 1px solid #e2e8f0;
  }

  /* Kill the header ("AI suggestions" title + hint) — too tall. */
  .hv6-feature--4 .dl4-pe-sug-head {
    display: none !important;
  }

  /* Suggestions list — natural block flow. Do NOT force display on
     .dl4-pe-sug-panel: the mock's JS toggles its inline display to
     show only the active panel (grammar / fit / cliche). A
     !important rule here would force every panel visible at once,
     stacking all cards and pushing the diff rows out of the 140px
     clipping area — leaving only the last Apply button visible. */
  .hv6-feature--4 .dl4-pe-sug-list {
    width: 100%;
    overflow: hidden;
    min-height: 0;
  }
  /* Space between cards when a panel has 2+ (cliche has two). */
  .hv6-feature--4 .dl4-pe-sug-panel .dl4-pe-sugg + .dl4-pe-sugg {
    margin-top: 6px;
  }

  /* Minimal suggestion card: hide the descriptive row & paragraph.
     Column layout so the diff (old → new) reads on top and the
     Approve button sits right under it, full-width. Works cleanly
     whether the old/new strings are short ("effect → affects") or
     long ("If I join this profession → If I train at NYU..."). */
  .hv6-feature--4 .dl4-pe-sugg {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    background: #fff;
    border: 1px solid #e2e8f0;
  }
  .hv6-feature--4 .dl4-pe-sugg__row,
  .hv6-feature--4 .dl4-pe-sugg__desc {
    display: none !important;
  }
  .hv6-feature--4 .dl4-pe-sugg__diff {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px 6px !important;
    font-size: 10px !important;
    margin: 0 !important;
  }
  .hv6-feature--4 .dl4-pe-sugg__old {
    color: #dc2626;
    text-decoration: line-through;
    font-weight: 500;
  }
  .hv6-feature--4 .dl4-pe-sugg__new {
    color: #059669;
    font-weight: 700;
  }
  .hv6-feature--4 .dl4-pe-sugg__diff i {
    font-size: 9px;
    color: #94a3b8;
  }
  .hv6-feature--4 .dl4-pe-sugg__apply {
    align-self: flex-end !important;
    font-size: 10px !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    white-space: nowrap;
  }

  /* Inline-text highlight colors (fit/grammar/cliche) shrink too. */
  .hv6-feature--4 .dl4-pe-cliche__orig,
  .hv6-feature--4 .dl4-pe-cliche__sugg,
  .hv6-feature--4 .dl4-pe-grammar__bad,
  .hv6-feature--4 .dl4-pe-grammar__good,
  .hv6-feature--4 .dl4-pe-fit__bad,
  .hv6-feature--4 .dl4-pe-fit__good {
    font-size: 10px !important;
  }

  /* Editor stats footer — compact. */
  .hv6-feature--4 .dl4-pe-mock__editor-foot {
    padding: 6px 10px !important;
    gap: 8px !important;
    font-size: 9px !important;
  }
  .hv6-feature--4 .dl4-pe-mock__editor-stats {
    padding: 0 !important;
    gap: 6px !important;
  }
  .hv6-feature--4 .dl4-pe-mock__stat-label {
    font-size: 9px !important;
    min-width: 0 !important;
  }
  .hv6-feature--4 .dl4-pe-mock__foot-val {
    font-size: 10px !important;
  }

  /* Subtle shimmer on the document — a distinct "editor" feel. */
  .hv6-feature--4 .dl4-pe-mock__editor-body {
    position: relative;
    overflow: hidden;
  }
  .hv6-feature--4 .dl4-pe-mock__editor-body::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 40%,
      rgba(124, 58, 237, 0.05) 50%,
      transparent 60%
    );
    transform: translateX(-100%);
    animation: hv6PEShimmer 6s ease-in-out 1.2s infinite;
    pointer-events: none;
  }
}

@keyframes hv6PEShimmer {
  0% { transform: translateX(-100%); }
  35%, 100% { transform: translateX(120%); }
}


/* ───────────────────────────────────────────────────────────────────
   5. FEATURE 5 — MOCK INTERVIEW
   ─────────────────────────────────────────────────────────────────── */
/* Design constraint: the mock must NOT scroll on phones, and the
   frame height must NOT jump when the JS transitions from the session
   page to the feedback page. Fix the body to a single height and make
   both pages fit inside it (feedback trims content rather than scroll).
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Lock the mock body to one height across both pages.
     Override the site-wide mobile rule that sets height: auto so the
     layout does not reflow when .dl4-mi-mock__page--feedback slides in. */
  .hv6-feature--5 .hv6-mock-body {
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    overflow: hidden !important;
  }
  .hv6-feature--5 .dl4-mi-mock {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .hv6-feature--5 .dl4-mi-mock__chrome { flex-shrink: 0; }
  .hv6-feature--5 .dl4-mi-mock__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
  }
  .hv6-feature--5 .dl4-mi-mock__page--session {
    height: 100%;
    overflow: hidden;
  }
  /* Kill feedback's internal scroll — content is trimmed below to fit. */
  .hv6-feature--5 .dl4-mi-mock__page--feedback {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    padding: 10px 12px !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* ── Chrome top bar (compact) ── */
  .hv6-feature--5 .dl4-mi-mock__top {
    padding: 7px 10px !important;
    gap: 6px !important;
    flex-wrap: wrap;
  }
  .hv6-feature--5 .dl4-mi-mock__call-label {
    font-size: 10px !important;
  }
  .hv6-feature--5 .dl4-mi-mock__school-line {
    font-size: 9px !important;
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .hv6-feature--5 .dl4-mi-mock__session-meta {
    gap: 6px !important;
  }
  .hv6-feature--5 .dl4-mi-mock__meta-chip,
  .hv6-feature--5 .dl4-mi-mock__live {
    font-size: 9px !important;
    padding: 3px 6px !important;
  }

  /* ── Session page: compact stage + dialogue so it fits 520px ── */
  .hv6-feature--5 .dl4-mi-mock__stage {
    padding: 8px 10px 6px !important;
  }
  .hv6-feature--5 .dl4-mi-mock__feeds {
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  .hv6-feature--5 .dl4-mi-mock__feed-main {
    min-height: 105px !important;
    padding: 12px 10px 10px !important;
  }
  .hv6-feature--5 .dl4-mi-mock__avatar-ai {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
  }
  .hv6-feature--5 .dl4-mi-mock__feed-badge {
    font-size: 9px !important;
    padding: 3px 7px !important;
  }
  .hv6-feature--5 .dl4-mi-mock__feed-pip {
    width: 66px !important;
    min-height: 105px !important;
  }
  .hv6-feature--5 .dl4-mi-mock__pip-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 10px !important;
  }
  .hv6-feature--5 .dl4-mi-mock__pip-tag {
    font-size: 8px !important;
  }
  .hv6-feature--5 .dl4-mi-mock__modes {
    gap: 4px !important;
    flex-wrap: wrap;
  }
  .hv6-feature--5 .dl4-mi-mock__mode {
    font-size: 9px !important;
    padding: 3px 7px !important;
  }

  .hv6-feature--5 .dl4-mi-mock__dialogue {
    padding: 8px 12px 10px !important;
    gap: 6px !important;
    overflow: hidden;
  }
  .hv6-feature--5 .dl4-mi-mock__bubble {
    padding: 8px 10px !important;
    max-width: 100% !important;
  }
  .hv6-feature--5 .dl4-mi-mock__bubble-tag {
    font-size: 8.5px !important;
    margin-bottom: 3px !important;
  }
  .hv6-feature--5 .dl4-mi-mock__question {
    font-size: 10.5px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }
  .hv6-feature--5 .dl4-mi-mock__transcript {
    font-size: 10.5px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }
  .hv6-feature--5 .dl4-mi-mock__transcript-label {
    font-size: 8.5px !important;
  }
  .hv6-feature--5 .dl4-mi-mock__capture {
    gap: 8px !important;
  }
  .hv6-feature--5 .dl4-mi-mock__analyzing {
    font-size: 9.5px !important;
    padding: 4px 8px !important;
  }

  /* ── Feedback page trim — everything fits in 500px without scroll ──
     Keep: header, 1 compact card (Voice), 2 key moments, next-step.
     Drop: waveform (space hog), Face & Presence card, school insight,
           trust bar, moments 3-4. */
  .hv6-feature--5 .dl4-mi-fb__header {
    gap: 10px !important;
    padding: 8px 10px !important;
    flex-wrap: wrap;
  }
  .hv6-feature--5 .dl4-mi-fb__score-ring {
    width: 46px !important;
    height: 46px !important;
    flex-shrink: 0;
  }
  .hv6-feature--5 .dl4-mi-fb__score-num {
    font-size: 15px !important;
  }
  .hv6-feature--5 .dl4-mi-fb__header-copy h3 {
    font-size: 13px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  .hv6-feature--5 .dl4-mi-fb__header-copy p {
    font-size: 9.5px !important;
    margin: 2px 0 0 !important;
    line-height: 1.3 !important;
  }
  .hv6-feature--5 .dl4-mi-fb__premium-badge {
    font-size: 9px !important;
    padding: 3px 7px !important;
  }

  /* Voice/Face grid → single column, and hide the 2nd card (Face). */
  .hv6-feature--5 .dl4-mi-fb__grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .hv6-feature--5 .dl4-mi-fb__grid > .dl4-mi-fb__card:nth-child(n+2) {
    display: none !important;
  }
  .hv6-feature--5 .dl4-mi-fb__card {
    padding: 8px 10px !important;
  }
  .hv6-feature--5 .dl4-mi-fb__card-head {
    font-size: 10px !important;
    margin-bottom: 5px !important;
  }
  .hv6-feature--5 .dl4-mi-fb__waveform {
    display: none !important;
  }
  .hv6-feature--5 .dl4-mi-fb__metrics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5px !important;
  }
  .hv6-feature--5 .dl4-mi-fb__metric {
    padding: 5px 6px !important;
    font-size: 9px !important;
  }
  .hv6-feature--5 .dl4-mi-fb__metric strong {
    font-size: 11px !important;
  }
  .hv6-feature--5 .dl4-mi-fb__metric small {
    font-size: 8.5px !important;
  }

  /* Drop large secondary sections. */
  .hv6-feature--5 .dl4-mi-fb__school-insight,
  .hv6-feature--5 .dl4-mi-fb__trust {
    display: none !important;
  }

  /* Moments: keep first 2, compact row. */
  .hv6-feature--5 .dl4-mi-fb__moments {
    padding: 8px 10px !important;
  }
  .hv6-feature--5 .dl4-mi-fb__moments-head {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
  .hv6-feature--5 .dl4-mi-fb__moment {
    grid-template-columns: 28px 1fr !important;
    gap: 6px !important;
    padding: 4px 0 !important;
  }
  .hv6-feature--5 .dl4-mi-fb__moment-tag { display: none !important; }
  .hv6-feature--5 .dl4-mi-fb__moments .dl4-mi-fb__moment:nth-child(n+4) {
    display: none !important;
  }
  .hv6-feature--5 .dl4-mi-fb__moment-time {
    font-size: 9px !important;
  }
  .hv6-feature--5 .dl4-mi-fb__moment-text {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  /* Next-step CTA at bottom — always visible. */
  .hv6-feature--5 .dl4-mi-fb__next {
    margin-top: auto !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    flex-wrap: wrap;
  }
  .hv6-feature--5 .dl4-mi-fb__next-label {
    font-size: 10px !important;
    flex-basis: 100%;
  }
  .hv6-feature--5 .dl4-mi-fb__next-btn {
    font-size: 10px !important;
    padding: 6px 10px !important;
    flex: 1 1 0;
  }

  /* Unique touch: soft radial pulse behind the score ring — "live AI". */
  .hv6-feature--5 .dl4-mi-fb__score-ring,
  .hv6-feature--5 .dl4-mi-fb__ring-mini {
    position: relative;
  }
  .hv6-feature--5 .dl4-mi-fb__score-ring::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.22) 0%, transparent 70%);
    animation: hv6MIPulse 2.4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
  }
}

@keyframes hv6MIPulse {
  0%, 100% { opacity: 0.6; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.1); }
}


/* ───────────────────────────────────────────────────────────────────
   6. FEATURE 6 — SCHOOL / PROGRAM SELECTOR
   ─────────────────────────────────────────────────────────────────── */
/* School Selector: just the landing card — it already reads like a
   phone screen. Hide the right-side preview/rank panel.
   Program Selector: single column with preferences on top, match
   list below. */
@media (max-width: 640px) {

  /* ── School Selector ── */
  .hv6-feature--6 .dl4-school-selector-mock {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .hv6-feature--6 .dl4-ss-mock__landing {
    padding: 16px 14px 18px !important;
    border-right: none !important;
  }
  .hv6-feature--6 .dl4-ss-mock__title {
    font-size: 1.15rem !important;
  }
  .hv6-feature--6 .dl4-ss-mock__subtitle {
    font-size: 0.8rem !important;
  }
  .hv6-feature--6 .dl4-ss-mock__badge {
    font-size: 0.62rem !important;
  }
  .hv6-feature--6 .dl4-ss-mock__cta {
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
  }
  .hv6-feature--6 .dl4-ss-mock__filters {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }
  .hv6-feature--6 .dl4-ss-mock__filter {
    font-size: 0.62rem !important;
    padding: 4px 8px !important;
  }
  /* Drop the right-side preview panel on phone — landing screen is
     enough to communicate the AI matching flow. */
  .hv6-feature--6 .dl4-ss-mock__preview,
  .hv6-feature--6 .dl4-ss-mock__podium,
  .hv6-feature--6 .dl4-ss-mock__rank-list {
    display: none !important;
  }

  /* ── Program Selector ── */
  .hv6-feature--6 .dl4-psel-mock__layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__header {
    padding: 8px 10px !important;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__product {
    font-size: 11px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__specialty-pill {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__live {
    font-size: 9px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__col {
    padding: 10px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__col-title {
    font-size: 11px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__kicker {
    font-size: 9px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__intro {
    font-size: 10px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__field {
    margin-bottom: 8px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__label {
    font-size: 9.5px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__chip-row {
    gap: 4px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__chip {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__list {
    gap: 6px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__row {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__rank {
    font-size: 10px !important;
    width: 20px !important;
    height: 20px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__pct {
    font-size: 11px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__bar {
    height: 4px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__disclaimer,
  .hv6-feature--6 .dl4-psel-mock__answers-note {
    font-size: 9px !important;
  }
  .hv6-feature--6 .dl4-psel-mock__results-head {
    font-size: 10px !important;
  }
}


/* ───────────────────────────────────────────────────────────────────
   7. FEATURE 7 — PS ADVISOR
   ─────────────────────────────────────────────────────────────────── */
/* Document full-bleed. Advisor bar compact. Comments column already
   hidden on mobile elsewhere — keep that but surface the number of
   open comments as a floating pill so the UI still signals review
   activity. */
@media (max-width: 640px) {
  .hv6-feature--7 .dl5-advisor-mock {
    display: flex !important;
    flex-direction: column !important;
  }
  .hv6-feature--7 .dl5-advisor-mock__bar {
    padding: 8px 10px !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }
  .hv6-feature--7 .dl5-advisor-mock__bar-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  .hv6-feature--7 .dl5-advisor-mock__bar-info strong {
    font-size: 11px !important;
  }
  .hv6-feature--7 .dl5-advisor-mock__bar-info span {
    font-size: 9px !important;
  }
  .hv6-feature--7 .dl5-advisor-mock__bar-status {
    font-size: 9px !important;
  }

  /* Editor fills the width. */
  .hv6-feature--7 .dl5-advisor-mock__editor {
    flex-direction: column !important;
  }
  .hv6-feature--7 .dl5-advisor-mock__doc {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
  }
  .hv6-feature--7 .dl5-advisor-mock__comments {
    display: none !important;
  }

  /* Footer pill row compacts. */
  .hv6-feature--7 .dl5-advisor-mock__footer {
    padding: 8px 10px !important;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .hv6-feature--7 .dl5-advisor-mock__footer-badge,
  .hv6-feature--7 .dl5-advisor-mock__footer-btn {
    font-size: 10px !important;
    padding: 5px 9px !important;
  }
  .hv6-feature--7 .dl5-advisor-mock__footer-score {
    font-size: 10px !important;
  }

  /* Unique touch: add a thin left gutter with a sliding highlight
     that mimics a reviewer scrubbing through the doc. */
  .hv6-feature--7 .dl5-advisor-mock__doc {
    position: relative;
  }
  .hv6-feature--7 .dl5-advisor-mock__doc::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      #7c3aed 30%,
      #ec4899 55%,
      transparent 85%
    );
    background-size: 100% 50%;
    background-repeat: no-repeat;
    background-position: 0 0;
    animation: hv6AdvisorScrub 5.5s ease-in-out 0.6s infinite;
    opacity: 0.8;
  }
}

@keyframes hv6AdvisorScrub {
  0%   { background-position: 0 0%; }
  50%  { background-position: 0 100%; }
  100% { background-position: 0 0%; }
}


/* ───────────────────────────────────────────────────────────────────
   8. SMALL-PHONE TUNING (≤ 480px)
   ─────────────────────────────────────────────────────────────────── */
/* Undo the "hide the entire demo" rule from the old mobile block —
   we've re-designed the demos properly so they should stay visible. */
@media (max-width: 480px) {
  .hv6-mock-frame { display: block !important; }

  /* A touch more breathing room on tiny screens. */
  .hv6-feature__inner {
    padding: 0 0.5rem !important;
  }
  .hv6-mock-chrome,
  .hv6-mock-frame__bar {
    padding: 0.4rem 0.6rem;
  }
  .hv6-mock-chrome__title,
  .hv6-mock-frame__title {
    font-size: 0.6rem;
  }

  /* F1: tighten further — 3 rows only on tiny screens. */
  .hv6-feature--1 .dl4-explorer-mock__row:nth-child(n+4),
  .hv6-feature--1 .dl4-residency-mock__row:nth-child(n+4) {
    display: none;
  }

  /* F2: drop story-signal line on tiny screens — keep chat+meter. */
  .hv6-feature--2 .dl4-ps-mock__story-signal {
    display: none !important;
  }

  /* F3: hero ring slightly smaller so score+dims fit above fold. */
  .hv6-feature--3 .psa-demo__ring {
    width: 96px !important;
    height: 96px !important;
  }

  /* F4: swap the 2nd suggestion card offscreen to hint at scroll. */
  .hv6-feature--4 .dl4-pe-mock__suggestions > * {
    flex: 0 0 210px;
  }

  /* F5: metrics row → 2-up on tiny phones. */
  .hv6-feature--5 .dl4-mi-fb__metrics {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* F7: extra compact advisor footer. */
  .hv6-feature--7 .dl5-advisor-mock__footer-badge:nth-child(n+3) {
    display: none;
  }
}


/* ───────────────────────────────────────────────────────────────────
   9. HERO DEVICES — phone-screen-inside-phone-screen gets
   awkward at narrow widths, so just clean up the existing hero
   dashboard/fit mocks for mobile width usage.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Dashboard cards keep 2-up but with slightly larger tap targets. */
  .hv6-dash-mock__cards {
    gap: 8px !important;
  }
  /* Ensure the phone mock's fit ring shows above card row on narrow. */
  .hv6-fit-mock__breakdown { display: none; }
}