/* Viera Mobile Experience 2.0 — premium mobile product layer. */
body[data-vmx="1"] .vmx-toc-toggle {
  display: none;
}

/* Resource Center 1.0 — blog-only clone of the approved homepage mobile system. */
.vmx-mobile-card-image,
.vmx-swipe-cue,
body[data-vmx="1"][data-vmx-page="blog"] .mobile-sticky-cta {
  display: none;
}

@media screen and (max-width: 768px) {
  body[data-vmx="1"][data-vmx-page="blog"] {
    --vrc-ink: #14273f;
    --vrc-copy: #405064;
    --vrc-canvas: #f2efe7;
    --vrc-paper: #fffdf8;
    --vrc-sage: #dce5dc;
    --vrc-sage-deep: #6f816f;
    --vrc-gold: #ad8b53;
    --vrc-line: rgba(20, 39, 63, 0.11);
    --vrc-radius: 20px;
    --vrc-shadow: 0 8px 24px rgba(20, 39, 63, 0.07);
    background: var(--vrc-canvas) !important;
    color: var(--vrc-copy) !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.hero, .search-section, .gux-section, .recent-guides, .fin-ready-section, .guidance-section, footer) {
    scroll-margin-top: calc(76px + env(safe-area-inset-top));
  }

  body[data-vmx="1"][data-vmx-page="blog"] .hero {
    padding: calc(6.15rem + env(safe-area-inset-top)) var(--vmx-page-gutter) 2rem !important;
    background: linear-gradient(145deg, rgba(255, 253, 248, 0.99), rgba(242, 239, 231, 0.97)) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .hero-inner {
    width: 100%;
    max-width: 42rem;
    margin: 0 auto;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .hero h1 {
    max-width: 10.8em !important;
    margin: 0 0 1rem !important;
    color: var(--vrc-ink) !important;
    font-size: clamp(2.25rem, 9.7vw, 2.85rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.025em !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .hero h1 em {
    color: var(--vrc-ink) !important;
    text-decoration: underline;
    text-decoration-color: rgba(173, 139, 83, 0.58);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.1em;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .hero-sub {
    max-width: 38rem;
    margin: 0 !important;
    color: var(--vrc-copy) !important;
    font-size: clamp(1.06rem, 4.4vw, 1.16rem) !important;
    line-height: 1.7 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .hero-positioning {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.55rem !important;
    margin: 1.25rem 0 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .hero-positioning-badge {
    min-height: 44px;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(111, 129, 111, 0.18);
    border-radius: 14px;
    color: #526255 !important;
    background: rgba(220, 229, 220, 0.56);
    font-size: 0.78rem !important;
    line-height: 1.4;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .search-section--blog {
    padding: 1.5rem var(--vmx-page-gutter) 2rem !important;
    border: 0 !important;
    background: var(--vrc-canvas) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .search-inner {
    max-width: 42rem;
    padding: 1.35rem !important;
    border: 1px solid var(--vrc-line);
    border-radius: var(--vrc-radius);
    background: var(--vrc-paper) !important;
    box-shadow: var(--vrc-shadow);
  }

  body[data-vmx="1"][data-vmx-page="blog"] .search-heading {
    margin-bottom: 0.55rem !important;
    color: var(--vrc-ink) !important;
    font-size: clamp(1.7rem, 7.6vw, 2rem) !important;
    line-height: 1.12 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .search-sub {
    margin-bottom: 1rem !important;
    color: var(--vrc-copy) !important;
    font-size: 1rem !important;
    line-height: 1.68 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .search-bar-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.55rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .search-input {
    width: 100%;
    min-width: 0;
    min-height: 52px !important;
    padding: 0.8rem 0.9rem !important;
    border: 1px solid rgba(20, 39, 63, 0.22) !important;
    border-radius: 13px !important;
    color: var(--vrc-ink) !important;
    background: #fff !important;
    font-size: 1rem !important;
    line-height: 1.3;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .search-btn {
    min-width: 88px;
    min-height: 52px !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid var(--vrc-gold) !important;
    border-radius: 13px !important;
    color: #fff !important;
    background: var(--vrc-ink) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.search-input, .search-btn, .search-chip, .gux-card, .browse-group a, .recent-guide-card, .mobile-sticky-cta a):focus-visible {
    outline: 3px solid #d6a74a !important;
    outline-offset: 3px !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .search-chips {
    display: flex !important;
    gap: 0.55rem !important;
    margin: 1rem calc(var(--vmx-page-gutter) * -0.25) 0 !important;
    padding: 0.15rem calc(var(--vmx-page-gutter) * 0.25) 0.45rem !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .search-chips::-webkit-scrollbar { display: none; }

  body[data-vmx="1"][data-vmx-page="blog"] .search-chip {
    flex: 0 0 auto;
    min-height: 44px !important;
    padding: 0.6rem 0.8rem !important;
    border: 1px solid rgba(111, 129, 111, 0.25) !important;
    border-radius: 12px !important;
    color: var(--vrc-ink) !important;
    background: rgba(220, 229, 220, 0.5) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    scroll-snap-align: start;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.gux-section, .recent-guides, .fin-ready-section, .guidance-section) {
    padding: 3rem var(--vmx-page-gutter) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.gux-section--white, .recent-guides, .fin-ready-section) {
    border: 0 !important;
    background: var(--vrc-paper) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .gux-section--cream {
    border: 0 !important;
    background: var(--vrc-canvas) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.gux-inner, .recent-guides-inner, .fin-ready, .guidance-inner) {
    max-width: 42rem;
    margin-inline: auto;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.situation-header, .recent-guides-header) {
    margin-bottom: 1.5rem !important;
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.situation-header h2, .recent-guides-header h2, .fin-ready-title, .guidance-heading) {
    margin: 0.9rem 0 0.65rem !important;
    color: var(--vrc-ink) !important;
    font-size: clamp(2rem, 8.6vw, 2.4rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.section-desc, .recent-guides-header p, .fin-ready-note, .guidance-sub) {
    max-width: 38rem;
    color: var(--vrc-copy) !important;
    font-size: 1.06rem !important;
    line-height: 1.72 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-situation-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.8rem !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-situation-grid .gux-card {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 1.05rem !important;
    border: 1px solid var(--vrc-line) !important;
    border-radius: 18px !important;
    background: var(--vrc-paper) !important;
    box-shadow: var(--vrc-shadow) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-situation-grid .gux-card::before { display: none; }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-situation-grid .gux-card-icon {
    width: 42px !important;
    height: 42px !important;
    margin: 0 0 0.8rem !important;
    padding: 0.55rem;
    border-radius: 12px;
    color: var(--vrc-ink) !important;
    background: var(--vrc-sage);
  }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-situation-grid .gux-card-title {
    margin-bottom: 0.55rem !important;
    color: var(--vrc-ink) !important;
    font-size: clamp(1.28rem, 5.4vw, 1.5rem) !important;
    line-height: 1.15 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-situation-grid .gux-card-desc {
    margin-bottom: 0.85rem !important;
    color: var(--vrc-copy) !important;
    font-size: 1rem !important;
    line-height: 1.58 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .gux-card-link,
  body[data-vmx="1"][data-vmx-page="blog"] .browse-view-link {
    color: #6f542b !important;
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-swipe-cue {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.35rem 0 0.8rem;
    color: #5b6d5d;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-swipe-cue::after {
    content: "→";
    font-size: 1rem;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.vmx-featured-grid, .vmx-workbook-grid, .recent-guides-grid) {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(82vw, 330px) !important;
    gap: 1rem !important;
    margin-inline: calc(var(--vmx-page-gutter) * -1) !important;
    padding: 0.2rem var(--vmx-page-gutter) 1.25rem !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--vmx-page-gutter);
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.vmx-featured-grid, .vmx-workbook-grid, .recent-guides-grid)::-webkit-scrollbar { display: none; }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.vmx-featured-grid .gux-card, .vmx-workbook-grid .gux-card, .recent-guide-card) {
    min-width: 0 !important;
    min-height: 100% !important;
    padding: 1.25rem !important;
    border: 1px solid var(--vrc-line) !important;
    border-radius: var(--vrc-radius) !important;
    background: var(--vrc-paper) !important;
    box-shadow: var(--vrc-shadow) !important;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-featured-grid .gux-card {
    padding-top: 0 !important;
    overflow: hidden;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-featured-grid .gux-card::before,
  body[data-vmx="1"][data-vmx-page="blog"] .vmx-workbook-grid .gux-card::before { display: none; }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-mobile-card-image {
    display: block;
    width: calc(100% + 2.5rem);
    max-width: none;
    height: 176px;
    margin: 0 -1.25rem 1.15rem;
    object-fit: cover;
    object-position: center;
    background: var(--vrc-sage);
  }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-featured-grid .gux-card:first-child .vmx-mobile-card-image {
    object-position: center 42%;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.vmx-featured-grid, .vmx-workbook-grid) .gux-card-title {
    color: var(--vrc-ink) !important;
    font-size: clamp(1.42rem, 6vw, 1.65rem) !important;
    line-height: 1.16 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.vmx-featured-grid, .vmx-workbook-grid) .gux-card-desc {
    color: var(--vrc-copy) !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .gux-card-tag {
    color: #6f542b !important;
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .workbook-downloads {
    margin-top: 2.75rem !important;
    padding-top: 2.5rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .browse-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .browse-group {
    padding: 1.25rem !important;
    border: 1px solid var(--vrc-line) !important;
    border-radius: var(--vrc-radius) !important;
    background: var(--vrc-paper) !important;
    box-shadow: var(--vrc-shadow) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .browse-group-head {
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin-bottom: 0.85rem !important;
    padding-bottom: 0.85rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .browse-group-head svg {
    width: 42px !important;
    height: 42px !important;
    padding: 0.55rem;
    border-radius: 12px;
    color: var(--vrc-ink) !important;
    background: var(--vrc-sage);
  }

  body[data-vmx="1"][data-vmx-page="blog"] .browse-group-title {
    padding-top: 0.35rem;
    color: var(--vrc-ink) !important;
    font-size: clamp(1.4rem, 6.1vw, 1.65rem) !important;
    line-height: 1.16 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .browse-group-desc,
  body[data-vmx="1"][data-vmx-page="blog"] .browse-list a {
    color: var(--vrc-copy) !important;
    font-size: 1rem !important;
    line-height: 1.62 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .browse-list li { margin-bottom: 0.4rem !important; }

  body[data-vmx="1"][data-vmx-page="blog"] .browse-list a {
    min-height: 44px;
    padding: 0.45rem 0;
    align-items: flex-start !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .recent-guide-card {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .rgc-tag {
    color: #6f542b !important;
    font-size: 0.75rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .rgc-title {
    color: var(--vrc-ink) !important;
    font-size: clamp(1.4rem, 6vw, 1.65rem) !important;
    line-height: 1.18 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .rgc-date {
    color: var(--vrc-copy) !important;
    font-size: 0.9rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .fin-ready-section {
    background: var(--vrc-sage) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .fin-ready {
    padding: 1.4rem !important;
    border: 1px solid rgba(20, 39, 63, 0.12) !important;
    border-radius: var(--vrc-radius) !important;
    background: rgba(255, 253, 248, 0.82) !important;
    box-shadow: none !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .fin-ready-eyebrow {
    color: #596b5b !important;
    font-size: 0.75rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .fin-ready-cta {
    width: 100%;
    min-height: 50px;
    border-radius: 13px !important;
    color: #fff !important;
    background: var(--vrc-ink) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .guidance-section {
    background: linear-gradient(165deg, #14273f, #0c1a2d) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .guidance-heading,
  body[data-vmx="1"][data-vmx-page="blog"] .guidance-sub,
  body[data-vmx="1"][data-vmx-page="blog"] .guidance-section :where(label, .guidance-reassurance, .guidance-support-line) {
    color: #fff !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .guidance-sub,
  body[data-vmx="1"][data-vmx-page="blog"] .guidance-section .form-trust-values li {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 1rem !important;
    line-height: 1.62 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .form-trust-values {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    gap: 0.55rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .guidance-form {
    margin-top: 1.5rem;
    padding: 1.15rem !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--vrc-radius);
    background: rgba(255, 255, 255, 0.06);
  }

  body[data-vmx="1"][data-vmx-page="blog"] .guidance-fields {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .guidance-field :where(input, select) {
    width: 100%;
    min-height: 50px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .guidance-btn {
    width: 100%;
    min-height: 50px !important;
    border-radius: 13px !important;
    color: var(--vrc-ink) !important;
    background: #e7d8bd !important;
    font-size: 0.9rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] footer {
    padding: 3rem var(--vmx-page-gutter) calc(2rem + env(safe-area-inset-bottom)) !important;
    background: #060d1a !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .footer-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .footer-brand { max-width: none !important; }

  body[data-vmx="1"][data-vmx-page="blog"] .footer-brand p,
  body[data-vmx="1"][data-vmx-page="blog"] .footer-col a,
  body[data-vmx="1"][data-vmx-page="blog"] .footer-nap-inner,
  body[data-vmx="1"][data-vmx-page="blog"] .footer-linkedin a,
  body[data-vmx="1"][data-vmx-page="blog"] .fcopy {
    font-size: 0.94rem !important;
    line-height: 1.68 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .footer-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.75rem 1rem !important;
    width: 100%;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .footer-col h4 {
    margin-bottom: 0.65rem !important;
    font-size: 0.78rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .footer-col a {
    min-height: 44px;
    margin: 0 !important;
    padding: 0.35rem 0;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .footer-nap-inner {
    align-items: stretch !important;
    gap: 0.7rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .footer-nap-col {
    width: 100%;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .footer-seo-links {
    justify-content: flex-start !important;
    gap: 0.4rem 1rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .footer-seo-links a {
    min-height: 44px;
    font-size: 0.85rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .mobile-sticky-cta {
    display: block !important;
    padding-top: 0.45rem !important;
    padding-bottom: calc(0.45rem + env(safe-area-inset-bottom)) !important;
    background: rgba(15, 31, 56, 0.98) !important;
    border-top: 1px solid rgba(169, 131, 75, 0.4) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .mobile-sticky-cta-inner {
    grid-template-columns: minmax(74px, 0.85fr) 48px minmax(120px, 1.3fr) !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .mobile-sticky-cta a {
    display: inline-flex !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .mobile-sticky-cta .msc-review {
    border-color: var(--vrc-gold) !important;
    color: var(--vrc-ink) !important;
    background: #e7d8bd !important;
    font-weight: 700 !important;
  }
}

@media screen and (max-width: 340px) {
  body[data-vmx="1"][data-vmx-page="blog"] .vmx-situation-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .search-bar-wrap {
    grid-template-columns: 1fr !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .search-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-vmx="1"][data-vmx-page="blog"] :where(.vmx-featured-grid, .vmx-workbook-grid, .recent-guides-grid, .search-chips) {
    scroll-behavior: auto !important;
  }
}

/*
 * VMX 2.0 visual direction
 * A calm, editorial New Jersey property help center composed specifically for phones.
 */
@media screen and (max-width: 768px) {
  body[data-vmx="1"] {
    --vmx-page-gutter: clamp(1.1rem, 5.4vw, 1.5rem);
    --vmx-ink: #14273f;
    --vmx-ink-soft: #405064;
    --vmx-paper: #fffdf8;
    --vmx-canvas: #f2efe7;
    --vmx-sage: #dce5dc;
    --vmx-sage-deep: #6f816f;
    --vmx-sand: #e7d8bd;
    --vmx-gold: #ad8b53;
    --vmx-coral: #b9664b;
    --vmx-line: rgba(20, 39, 63, 0.11);
    --vmx-card-shadow: 0 18px 50px rgba(20, 39, 63, 0.1);
    --vmx-card-shadow-soft: 0 8px 24px rgba(20, 39, 63, 0.07);
    color: var(--vmx-ink-soft);
    background: var(--vmx-canvas);
  }

  body[data-vmx="1"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at 100% 8%, rgba(173, 139, 83, 0.12), transparent 24rem),
      radial-gradient(circle at 0 42%, rgba(111, 129, 111, 0.11), transparent 22rem),
      var(--vmx-canvas);
  }

  body[data-vmx="1"] :where(h1, h2, h3, h4) {
    color: var(--vmx-ink);
    text-wrap: balance;
  }

  body[data-vmx="1"] :where(p, li) {
    line-height: 1.72;
  }

  body[data-vmx="1"] nav {
    min-height: calc(70px + env(safe-area-inset-top));
    padding: calc(0.7rem + env(safe-area-inset-top)) var(--vmx-page-gutter) 0.7rem !important;
    background: rgba(16, 35, 57, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(9, 23, 39, 0.16) !important;
    backdrop-filter: blur(18px);
  }

  body[data-vmx="1"] nav::after {
    content: "NJ Property Help Center";
    position: absolute;
    left: var(--vmx-page-gutter);
    bottom: 0.45rem;
    color: rgba(255, 255, 255, 0.62);
    font: 600 0.58rem/1.1 'DM Sans', sans-serif;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    pointer-events: none;
  }

  body[data-vmx="1"] nav :where(.nlogo, .logo, .nav-logo) {
    align-self: flex-start;
  }

  body[data-vmx="1"] nav :where(.nlogo-img, .logo-img, .nav-logo img, img) {
    max-width: min(178px, 56vw) !important;
    max-height: 34px !important;
  }

  body[data-vmx="1"] .mobile-menu-btn {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07) !important;
  }

  body[data-vmx="1"] .nlinks:is(.mobile-open, .vig-mobile-open) {
    top: calc(70px + env(safe-area-inset-top)) !important;
    padding: 1rem var(--vmx-page-gutter) calc(1.5rem + env(safe-area-inset-bottom)) !important;
    background: rgba(16, 35, 57, 0.985) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  body[data-vmx="1"] .nlinks:is(.mobile-open, .vig-mobile-open) li {
    border-bottom-color: rgba(255, 255, 255, 0.09) !important;
  }

  body[data-vmx="1"] .nlinks:is(.mobile-open, .vig-mobile-open) a {
    min-height: 54px;
    font-size: 1rem !important;
  }

  /* Heroes become editorial opening screens rather than compressed desktop banners. */
  body[data-vmx="1"] :where(.hero, .blog-hero, .rc-hero) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
      linear-gradient(145deg, rgba(255, 253, 248, 0.99), rgba(242, 239, 231, 0.97)) !important;
    border-bottom: 0 !important;
  }

  body[data-vmx="1"] :where(.hero, .blog-hero, .rc-hero)::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 15rem;
    height: 15rem;
    right: -7rem;
    top: 5rem;
    border: 1px solid rgba(173, 139, 83, 0.25);
    border-radius: 48% 52% 42% 58%;
    background: rgba(220, 229, 220, 0.54);
    transform: rotate(18deg);
  }

  body[data-vmx="1"] .hero,
  body[data-vmx="1"] .rc-hero {
    padding-top: calc(6.25rem + env(safe-area-inset-top)) !important;
    padding-bottom: 2.4rem !important;
  }

  body[data-vmx="1"] .blog-hero-inner {
    padding-top: calc(6.25rem + env(safe-area-inset-top)) !important;
    padding-bottom: 2.4rem !important;
  }

  body[data-vmx="1"] :where(.hero-inner, .blog-hero-inner, .rc-hero-inner, .hero-grid) {
    gap: 1.65rem !important;
  }

  body[data-vmx="1"] :where(.eyebrow, .hero .eyebrow, .section-eyebrow) {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.5rem 0.72rem;
    border: 1px solid rgba(111, 129, 111, 0.25);
    border-radius: 999px;
    color: #566c59 !important;
    background: rgba(220, 229, 220, 0.72);
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase;
  }

  body[data-vmx="1"] :where(.hero h1, .blog-hero h1, .rc-hero h1) {
    max-width: 11.5em;
    color: var(--vmx-ink) !important;
    font-size: clamp(2.45rem, 11vw, 3.35rem) !important;
    font-weight: 500 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.035em !important;
    text-shadow: none !important;
  }

  body[data-vmx="1"] :where(.hero-sub, .hero-desc, .rc-hero-desc, .rc-hero-subtitle) {
    color: var(--vmx-ink-soft) !important;
    font-size: 1.02rem !important;
    line-height: 1.7 !important;
  }

  body[data-vmx="1"] :where(.hero-sub, .hero-desc, .rc-hero-desc) a {
    color: var(--vmx-ink) !important;
    border-bottom-color: rgba(173, 139, 83, 0.6) !important;
  }

  body[data-vmx="1"] :where(.hero-reassure, .hero-qa, .rc-hero-subtitle) {
    position: relative;
    margin: 0 0 1.25rem !important;
    padding: 0.9rem 1rem 0.9rem 2.8rem !important;
    border: 1px solid rgba(111, 129, 111, 0.18);
    border-radius: 16px;
    color: #526255 !important;
    background: rgba(220, 229, 220, 0.56);
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
  }

  body[data-vmx="1"] :where(.hero-reassure, .hero-qa, .rc-hero-subtitle)::before {
    content: "✓";
    position: absolute;
    left: 1rem;
    top: 0.87rem;
    width: 1.25rem;
    height: 1.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: var(--vmx-sage-deep);
    font: 700 0.7rem/1 'DM Sans', sans-serif;
  }

  body[data-vmx="1"] :where(.hero-ctas, .rc-hero-ctas) {
    gap: 0.7rem !important;
    margin-bottom: 1.3rem !important;
  }

  body[data-vmx="1"] :where(.btn-primary, .ncta, .county-cta-btn, .hc-submit, .lcf-submit, .bfc-submit, .guidance-btn) {
    min-height: 54px !important;
    padding: 0.95rem 1.2rem !important;
    border: 1px solid var(--vmx-ink) !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: var(--vmx-ink) !important;
    box-shadow: 0 10px 24px rgba(20, 39, 63, 0.2) !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.025em !important;
    text-transform: none !important;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
  }

  body[data-vmx="1"] :where(.btn-primary, .ncta, .county-cta-btn, .hc-submit, .lcf-submit, .bfc-submit, .guidance-btn):active {
    transform: scale(0.985);
    box-shadow: 0 5px 14px rgba(20, 39, 63, 0.16) !important;
  }

  body[data-vmx="1"] :where(.btn-soft, .btn-ghost, .btn-outline-white) {
    min-height: 52px !important;
    border: 1px solid rgba(20, 39, 63, 0.16) !important;
    border-radius: 16px !important;
    color: var(--vmx-ink) !important;
    background: rgba(255, 255, 255, 0.72) !important;
  }

  body[data-vmx="1"] :where(.hero-card, .hero-form-card, .blog-form-card, .rc-hero-right) {
    padding: 1.4rem !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: var(--vmx-card-shadow) !important;
    backdrop-filter: blur(16px);
  }

  body[data-vmx="1"] .vmx-mobile-form-stage {
    position: relative;
    z-index: 2;
    margin: -0.45rem var(--vmx-page-gutter) 2rem;
  }

  body[data-vmx="1"] .vmx-mobile-form-stage::before {
    content: "Private property review";
    display: block;
    width: fit-content;
    margin: 0 0 0.7rem 0.8rem;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
    background: var(--vmx-ink);
    font: 700 0.61rem/1 'DM Sans', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  body[data-vmx="1"] :where(.hero-card, .hero-form-card, .blog-form-card, .rc-hero-right) :where(h2, h3, p, label, li) {
    color: var(--vmx-ink-soft) !important;
  }

  body[data-vmx="1"] :where(.hero-card, .hero-form-card, .blog-form-card, .rc-hero-right) :where(h2, h3) {
    color: var(--vmx-ink) !important;
  }

  body[data-vmx="1"] :where(.hero-card-values, .hero-trust-badges, .hero-positioning) {
    gap: 0.55rem !important;
  }

  body[data-vmx="1"] :where(.hero-card-values li, .hero-badge, .hero-positioning-badge, .rc-hero-trust-item) {
    min-height: 36px;
    padding: 0.55rem 0.72rem !important;
    border: 1px solid rgba(20, 39, 63, 0.1) !important;
    border-radius: 999px !important;
    color: var(--vmx-ink-soft) !important;
    background: rgba(255, 255, 255, 0.68) !important;
    font-size: 0.68rem !important;
  }

  body[data-vmx="1"] input:not([type="checkbox"]):not([type="radio"]),
  body[data-vmx="1"] select,
  body[data-vmx="1"] textarea {
    min-height: 52px !important;
    border: 1px solid rgba(20, 39, 63, 0.14) !important;
    border-radius: 14px !important;
    color: var(--vmx-ink) !important;
    background: #faf8f2 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  body[data-vmx="1"] input:focus,
  body[data-vmx="1"] select:focus,
  body[data-vmx="1"] textarea:focus {
    border-color: var(--vmx-gold) !important;
    background: #fff !important;
  }

  /* Homepage: an image-led opening followed by compact decision decks. */
  body[data-vmx="1"][data-vmx-page="home"] .hero-left {
    display: flex !important;
    flex-direction: column;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero-left::after {
    content: "";
    order: 6;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0.15rem 0 1rem;
    border: 4px solid rgba(255, 255, 255, 0.9);
    border-radius: 26px 26px 72px 26px;
    background:
      linear-gradient(180deg, transparent 55%, rgba(14, 31, 50, 0.25)),
      url('/images/articles/homepage-resource.webp') center 48% / cover no-repeat;
    box-shadow: var(--vmx-card-shadow);
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero-left > .eyebrow { order: 1; }
  body[data-vmx="1"][data-vmx-page="home"] .hero-left > h1 { order: 2; }
  body[data-vmx="1"][data-vmx-page="home"] .hero-left > .hero-reassure { order: 3; }
  body[data-vmx="1"][data-vmx-page="home"] .hero-left > .hero-ctas { order: 4; }
  body[data-vmx="1"][data-vmx-page="home"] .hero-left::after { order: 5; }
  body[data-vmx="1"][data-vmx-page="home"] .hero-left > .hero-sub { order: 6; }
  body[data-vmx="1"][data-vmx-page="home"] .hero-left > .hero-trust-badges { order: 7; }

  body[data-vmx="1"][data-vmx-page="home"] :where(.section, .start-here-section, .search-resource-center, .risks-section, .process-section, .founder-section, .talk-ray-section) {
    padding: 3.65rem var(--vmx-page-gutter) !important;
    border: 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.section:nth-of-type(even), .start-here-section, .risks-section, .founder-section) {
    background: rgba(255, 253, 248, 0.88) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.section-header, .search-resource-inner, .start-here-inner) {
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.section-header h2, .search-resource-inner h2, .start-here-inner h2, .risks-inner h2) {
    margin-top: 0.85rem !important;
    color: var(--vmx-ink) !important;
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.025em;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.section-desc, .src-desc, .sh-desc) {
    margin-left: 0 !important;
    font-size: 0.96rem !important;
    line-height: 1.72 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.situations-grid, .recent-grid) {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 330px);
    gap: 1rem !important;
    width: calc(100% + var(--vmx-page-gutter));
    max-width: none !important;
    padding: 0.4rem var(--vmx-page-gutter) 1.1rem 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.situations-grid, .recent-grid)::-webkit-scrollbar {
    display: none;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.sit-card, .recent-card) {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body[data-vmx="1"][data-vmx-page="home"] .sit-card {
    display: flex !important;
    min-height: 300px !important;
    padding: 1.55rem !important;
    border: 1px solid rgba(20, 39, 63, 0.09) !important;
    border-radius: 26px !important;
    background: var(--vmx-paper) !important;
    box-shadow: var(--vmx-card-shadow-soft) !important;
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .sit-card:nth-child(3n + 1) { background: #fffdf8 !important; }
  body[data-vmx="1"][data-vmx-page="home"] .sit-card:nth-child(3n + 2) { background: #edf2ec !important; }
  body[data-vmx="1"][data-vmx-page="home"] .sit-card:nth-child(3n + 3) { background: #f3e9dc !important; }

  body[data-vmx="1"][data-vmx-page="home"] .sit-card-icon {
    width: 50px !important;
    height: 50px !important;
    margin: 0 0 auto !important;
    padding: 0.72rem;
    border-radius: 16px;
    color: var(--vmx-ink) !important;
    background: rgba(255, 255, 255, 0.72);
  }

  body[data-vmx="1"][data-vmx-page="home"] .sit-card :where(h3, p, .sit-card-link) {
    grid-column: auto;
  }

  body[data-vmx="1"][data-vmx-page="home"] .sit-card h3 {
    margin-top: 1.3rem;
    font-size: 1.65rem !important;
    line-height: 1.08 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .sit-card-link {
    margin-top: auto;
    color: var(--vmx-ink) !important;
    font-size: 0.75rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .recent-card {
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 26px !important;
    background: var(--vmx-paper) !important;
    box-shadow: var(--vmx-card-shadow-soft) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .recent-card-img {
    width: 100%;
    height: 190px !important;
    object-fit: cover;
  }

  body[data-vmx="1"][data-vmx-page="home"] .recent-card-body {
    padding: 1.35rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .sh-grid {
    gap: 0.7rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .sh-card {
    min-height: 82px !important;
    padding: 1rem 1.1rem !important;
    border: 1px solid var(--vmx-line) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: none !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .sh-emoji {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--vmx-sage);
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.risk-card, .process-step, .faq-item) {
    border: 1px solid var(--vmx-line) !important;
    border-radius: 22px !important;
    background: var(--vmx-paper) !important;
    box-shadow: var(--vmx-card-shadow-soft) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .risk-card {
    padding: 1.35rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .process-step {
    position: relative;
    padding: 1.4rem 1.3rem 1.4rem 4.3rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .process-num {
    position: absolute;
    left: 1.2rem;
    top: 1.35rem;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: white !important;
    background: var(--vmx-ink) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .faq-trigger {
    min-height: 64px;
    padding: 1rem 1.1rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.search-resource-center, .talk-ray-section) {
    margin: 0 var(--vmx-page-gutter) 2rem;
    padding: 1.7rem !important;
    border-radius: 28px !important;
    background: var(--vmx-ink) !important;
    box-shadow: var(--vmx-card-shadow);
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.search-resource-center, .talk-ray-section) :where(h2, h3, p, .src-desc) {
    color: rgba(255, 255, 255, 0.84) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.search-resource-center, .talk-ray-section) :where(h2, h3) {
    color: white !important;
  }

  /* Reading screens: content is grouped into calm, purposeful modules. */
  body[data-vmx="1"] :where(.article, .rc-content, .guide-content) {
    color: var(--vmx-ink-soft) !important;
    background: transparent !important;
  }

  body[data-vmx="1"] :where(.article, .rc-content, .guide-content) > p {
    margin-bottom: 1.35rem !important;
    font-size: 1.02rem !important;
    line-height: 1.82 !important;
  }

  body[data-vmx="1"] .rc-content {
    padding-top: 1.4rem !important;
  }

  body[data-vmx="1"] .rc-section {
    margin: 0 0 1.15rem !important;
    padding: 1.45rem 1.25rem !important;
    border: 1px solid rgba(20, 39, 63, 0.08) !important;
    border-radius: 26px !important;
    background: rgba(255, 253, 248, 0.94) !important;
    box-shadow: var(--vmx-card-shadow-soft) !important;
  }

  body[data-vmx="1"] .rc-section:nth-child(4n + 1) {
    background: rgba(237, 242, 236, 0.96) !important;
  }

  body[data-vmx="1"] .rc-section-header {
    display: block !important;
    margin-bottom: 1.35rem !important;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--vmx-line);
  }

  body[data-vmx="1"] .rc-section-num {
    width: fit-content;
    margin-bottom: 0.7rem;
    padding: 0.42rem 0.62rem;
    border-radius: 999px;
    color: #5d6f60 !important;
    background: var(--vmx-sage) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  body[data-vmx="1"] .rc-section-header h2,
  body[data-vmx="1"] :where(.article, .guide-content) h2 {
    color: var(--vmx-ink) !important;
    font-size: clamp(1.85rem, 8.2vw, 2.4rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em;
  }

  body[data-vmx="1"] :where(.article, .rc-content, .guide-content) h3 {
    margin-top: 2rem !important;
    font-size: 1.45rem !important;
    line-height: 1.2 !important;
  }

  body[data-vmx="1"] :where(.quick-answer, .rc-warning, .callout, .cta-decision-point, .cta-mid-guidance) {
    position: relative;
    margin: 1.5rem 0 !important;
    padding: 1.35rem 1.25rem !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: #e8eee6 !important;
    box-shadow: none !important;
  }

  body[data-vmx="1"] :where(.rc-warning, .callout)::before {
    content: "Important";
    display: block;
    width: fit-content;
    margin-bottom: 0.8rem;
    padding: 0.38rem 0.58rem;
    border-radius: 999px;
    color: #fff;
    background: var(--vmx-coral);
    font: 700 0.6rem/1 'DM Sans', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  body[data-vmx="1"] .rc-warning {
    background: #f3e5de !important;
  }

  body[data-vmx="1"] :where(.rc-checklist, .rc-mistakes) {
    display: grid;
    gap: 0.75rem;
    padding: 0 !important;
  }

  body[data-vmx="1"] :where(.rc-checklist li, .rc-mistake) {
    margin: 0 !important;
    padding: 1rem 1rem 1rem 3.15rem !important;
    border: 1px solid var(--vmx-line) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.76) !important;
  }

  body[data-vmx="1"] .rc-checklist .rc-check {
    left: 1rem !important;
    top: 1.05rem !important;
    width: 1.45rem !important;
    height: 1.45rem !important;
    border-radius: 50% !important;
    background: var(--vmx-sage-deep) !important;
  }

  body[data-vmx="1"] :where(.rc-icon-cards, .rc-official-grid, .rc-related-grid, .related-grid, .gux-grid, .recent-guides-grid) {
    gap: 0.9rem !important;
  }

  body[data-vmx="1"] :where(.rc-icon-card, .rc-official-card, .rc-related, .related-card, .gux-card, .recent-guide-card) {
    padding: 1.3rem !important;
    border: 1px solid var(--vmx-line) !important;
    border-radius: 22px !important;
    background: var(--vmx-paper) !important;
    box-shadow: var(--vmx-card-shadow-soft) !important;
  }

  body[data-vmx="1"] :where(.rc-faq-item, .faq-item) {
    margin-bottom: 0.7rem !important;
    overflow: hidden;
    border: 1px solid var(--vmx-line) !important;
    border-radius: 19px !important;
    background: var(--vmx-paper) !important;
    box-shadow: none !important;
  }

  body[data-vmx="1"] :where(.rc-faq-trigger, .faq-trigger) {
    min-height: 64px;
    padding: 1rem !important;
  }

  body[data-vmx="1"] .rc-toc {
    margin-top: -1.2rem !important;
    border: 1px solid rgba(20, 39, 63, 0.08) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: var(--vmx-card-shadow-soft);
  }

  body[data-vmx="1"] .vmx-toc-toggle {
    min-height: 58px;
    padding: 0.95rem 1rem;
    color: var(--vmx-ink);
  }

  /* Resource center and guides use card decks instead of long desktop grids. */
  body[data-vmx="1"][data-vmx-page="blog"] :where(.gux-grid, .recent-guides-grid),
  body[data-vmx="1"] :where(.rc-related-grid, .related-grid) {
    grid-auto-columns: min(84vw, 330px) !important;
    gap: 1rem !important;
    padding-bottom: 1.15rem !important;
    scrollbar-width: none;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.gux-card, .recent-guide-card) {
    min-height: 250px;
    padding: 1.45rem !important;
    border-radius: 24px !important;
    background: var(--vmx-paper) !important;
    box-shadow: var(--vmx-card-shadow-soft) !important;
  }

  /* Sticky action is a quiet, integrated system bar. */
  body[data-vmx="1"] .mobile-sticky-cta {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.11) !important;
    background: rgba(16, 35, 57, 0.97) !important;
    box-shadow: 0 -12px 32px rgba(9, 23, 39, 0.16) !important;
    backdrop-filter: blur(18px);
  }

  body[data-vmx="1"] .mobile-sticky-cta-inner {
    min-height: calc(68px + env(safe-area-inset-bottom));
    padding: 0.65rem var(--vmx-page-gutter) calc(0.65rem + env(safe-area-inset-bottom)) !important;
    gap: 0.55rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-vmx="1"] .mobile-sticky-cta a {
    min-height: 44px !important;
    border-radius: 13px !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.015em !important;
    text-transform: none !important;
  }

  body[data-vmx="1"] :where(.msc-call, .msc-text) {
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    background: rgba(255, 255, 255, 0.07) !important;
  }

  body[data-vmx="1"] .msc-review {
    border-color: var(--vmx-sand) !important;
    color: var(--vmx-ink) !important;
    background: var(--vmx-sand) !important;
  }

  body[data-vmx="1"].vmx-footer-in-view .mobile-sticky-cta,
  body[data-vmx="1"].vmx-form-in-view .mobile-sticky-cta {
    transform: translateY(110%);
  }

  body[data-vmx="1"] .vmx-reading-progress {
    top: calc(70px + env(safe-area-inset-top));
    height: 3px;
    background: rgba(20, 39, 63, 0.08);
  }

  body[data-vmx="1"] .vmx-reading-progress span {
    background: linear-gradient(90deg, var(--vmx-sage-deep), var(--vmx-gold));
  }

  @media (prefers-reduced-motion: no-preference) {
    body[data-vmx="1"] :where(.hero h1, .hero-sub, .hero-reassure, .hero-ctas, .hero-left::after) {
      animation: vmx2-arrive 560ms both cubic-bezier(.2, .75, .25, 1);
    }

    body[data-vmx="1"] .hero-sub { animation-delay: 70ms; }
    body[data-vmx="1"] .hero-reassure { animation-delay: 120ms; }
    body[data-vmx="1"] .hero-ctas { animation-delay: 170ms; }
    body[data-vmx="1"] .hero-left::after { animation-delay: 220ms; }
  }

  @keyframes vmx2-arrive {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media screen and (max-width: 768px) {
  html:has(body[data-vmx="1"]) {
    max-width: 100%;
    overflow-x: clip;
  }

  body[data-vmx="1"] {
    --vmx-page-gutter: clamp(1rem, 4.8vw, 1.35rem);
    --vmx-reading-width: 42rem;
    --vmx-surface: #fffefa;
    --vmx-surface-soft: #f7f4ed;
    --vmx-border: rgba(15, 31, 56, 0.13);
    --vmx-border-gold: rgba(184, 156, 106, 0.34);
    --vmx-shadow: 0 10px 28px rgba(15, 31, 56, 0.08);
    overflow-x: clip;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(74px + env(safe-area-inset-top));
  }

  body[data-vmx="1"][data-vmx-page="home"],
  body[data-vmx="1"][data-vmx-page="article"],
  body[data-vmx="1"][data-vmx-page="resource"],
  body[data-vmx="1"][data-vmx-page="guide"] {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  body[data-vmx="1"] *,
  body[data-vmx="1"] *::before,
  body[data-vmx="1"] *::after {
    box-sizing: border-box;
  }

  body[data-vmx="1"] img,
  body[data-vmx="1"] svg,
  body[data-vmx="1"] video,
  body[data-vmx="1"] iframe {
    max-width: 100%;
  }

  body[data-vmx="1"] :where(h1, h2, h3, h4, p, li, a, label, button) {
    overflow-wrap: break-word;
  }

  body[data-vmx="1"] :where(a, button, input, select, textarea, summary) {
    -webkit-tap-highlight-color: rgba(184, 156, 106, 0.18);
  }

  body[data-vmx="1"] :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid #b89c6a !important;
    outline-offset: 3px !important;
  }

  body[data-vmx="1"] :where(button, [role="button"], input[type="submit"], input[type="button"], .btn, .ncta, .county-cta-btn, .lcf-submit, .bfc-submit) {
    min-height: 44px;
  }

  body[data-vmx="1"] :where(.article, .rc-content, .guide-content) :where(h2, h3, h4, [id]) {
    scroll-margin-top: calc(84px + env(safe-area-inset-top));
  }

  /* Compact, stable mobile header */
  body[data-vmx="1"] nav {
    min-height: calc(60px + env(safe-area-inset-top));
    padding: calc(0.55rem + env(safe-area-inset-top)) var(--vmx-page-gutter) 0.55rem !important;
    gap: 0.75rem;
  }

  body[data-vmx="1"] nav :where(.logo, .nav-logo) {
    min-width: 0;
    max-width: calc(100% - 58px);
  }

  body[data-vmx="1"] nav :where(.logo-img, .nav-logo img, img) {
    width: auto !important;
    max-width: min(216px, 66vw) !important;
    max-height: 42px !important;
    object-fit: contain;
  }

  body[data-vmx="1"] .mobile-menu-btn {
    display: grid !important;
    place-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin: -0.25rem -0.35rem -0.25rem 0;
    border-radius: 10px;
    touch-action: manipulation;
  }

  body[data-vmx="1"] nav .nav-right {
    display: none !important;
  }

  body[data-vmx="1"] .mobile-menu-btn:active {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(0.97);
  }

  body[data-vmx="1"] .nlinks:is(.mobile-open, .vig-mobile-open) {
    max-height: calc(100dvh - 60px - env(safe-area-inset-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }

  body[data-vmx="1"] .nlinks:is(.mobile-open, .vig-mobile-open) a {
    display: flex !important;
    align-items: center;
    min-height: 48px;
    padding-block: 0.7rem !important;
  }

  /* Heroes answer the core question without consuming the full viewport. */
  body[data-vmx="1"] :where(.hero, .blog-hero, .rc-hero) {
    min-height: 0 !important;
  }

  body[data-vmx="1"] .hero,
  body[data-vmx="1"] .rc-hero {
    padding-top: calc(4.6rem + env(safe-area-inset-top)) !important;
    padding-bottom: 2rem !important;
  }

  body[data-vmx="1"] :where(.hero-inner, .blog-hero-inner, .rc-hero-inner, .hero-grid) {
    width: 100%;
    padding-left: var(--vmx-page-gutter) !important;
    padding-right: var(--vmx-page-gutter) !important;
    gap: 1.25rem !important;
  }

  body[data-vmx="1"] .blog-hero-inner {
    padding-top: calc(4.55rem + env(safe-area-inset-top)) !important;
    padding-bottom: 1.35rem !important;
  }

  body[data-vmx="1"] :where(.hero-left, .blog-hero-left) {
    padding-top: 0 !important;
  }

  body[data-vmx="1"] :where(.hero h1, .blog-hero h1, .rc-hero h1) {
    font-size: clamp(2rem, 9vw, 2.65rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.015em;
    margin-bottom: 0.85rem !important;
  }

  body[data-vmx="1"] :where(.hero-sub, .hero-desc, .rc-hero-desc, .rc-hero-subtitle) {
    max-width: 38rem;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    margin-bottom: 1.15rem !important;
  }

  body[data-vmx="1"] :where(.eyebrow, .hero .eyebrow) {
    margin-bottom: 0.75rem !important;
    letter-spacing: 0.14em !important;
  }

  body[data-vmx="1"] :where(.hero-ctas, .rc-hero-ctas) {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.65rem !important;
    margin-bottom: 1.25rem !important;
  }

  body[data-vmx="1"] :where(.hero-ctas, .rc-hero-ctas) a {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    text-align: center;
  }

  body[data-vmx="1"] :where(.hero-trust-badges, .hero-positioning, .rc-hero-trust) {
    gap: 0.65rem 1rem !important;
    margin-top: 1rem !important;
  }

  body[data-vmx="1"] :where(.hero-card, .hero-form-card, .blog-form-card) {
    position: relative !important;
    top: auto !important;
    margin: 0 !important;
    border-radius: 14px !important;
    box-shadow: var(--vmx-shadow) !important;
  }

  body[data-vmx="1"] .hero-img-wrap img {
    max-height: 210px !important;
    object-position: center 38%;
  }

  /* Reading rhythm */
  body[data-vmx="1"] :where(.article, .rc-content) {
    width: 100%;
    max-width: var(--vmx-reading-width);
    margin-inline: auto;
    padding: 2rem var(--vmx-page-gutter) 3.25rem !important;
  }

  body[data-vmx="1"] :where(.article, .rc-content) > :first-child {
    margin-top: 0;
  }

  body[data-vmx="1"] :where(.article, .rc-content) h2 {
    font-size: clamp(1.65rem, 7vw, 2.05rem) !important;
    line-height: 1.2 !important;
    margin-top: 2.75rem !important;
    margin-bottom: 0.9rem !important;
  }

  body[data-vmx="1"] :where(.article, .rc-content) h3 {
    font-size: clamp(1.3rem, 5.8vw, 1.6rem) !important;
    line-height: 1.28 !important;
    margin-top: 2.15rem !important;
    margin-bottom: 0.75rem !important;
  }

  body[data-vmx="1"] :where(.article, .rc-content) h4 {
    font-size: 1.08rem !important;
    line-height: 1.35 !important;
  }

  body[data-vmx="1"] :where(.article, .rc-content) :where(p, li) {
    font-size: 1rem !important;
    line-height: 1.72 !important;
  }

  body[data-vmx="1"] :where(.article, .rc-content) p {
    margin-bottom: 1.15rem !important;
  }

  body[data-vmx="1"] :where(.article, .rc-content) :where(ul, ol) {
    padding-left: 1.35rem;
    margin-block: 0.85rem 1.4rem;
  }

  body[data-vmx="1"] :where(.article, .rc-content) li + li {
    margin-top: 0.55rem;
  }

  body[data-vmx="1"] :where(.article, .rc-content) table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }

  /* Calm grouping for existing high-value content structures. */
  body[data-vmx="1"] :where(
    .callout, .quick-answer, .warning-box, .rc-warning, .rc-official-card,
    .county-cta, .guide-covers, .worksheet-card, .explore-related,
    .related-reading, .county-situations, .hero-qa, .twr
  ) {
    margin-block: 1.6rem !important;
    border-radius: 14px !important;
    border-color: var(--vmx-border-gold) !important;
    box-shadow: none !important;
  }

  body[data-vmx="1"] :where(
    .callout, .quick-answer-body, .warning-box, .rc-warning, .rc-official-card-body,
    .county-cta, .worksheet-card, .explore-related, .related-reading,
    .county-situations, .hero-qa
  ) {
    padding: 1.25rem !important;
  }

  body[data-vmx="1"] :where(.guide-covers-grid, .related-grid, .related-card-grid, .rc-icon-cards, .rc-related-grid, .county-grid) {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  body[data-vmx="1"] :where(.guide-covers-item, .related-card, .rc-icon-card) {
    min-height: 0 !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    background: var(--vmx-surface) !important;
    border: 1px solid var(--vmx-border) !important;
    box-shadow: none !important;
  }

  body[data-vmx="1"] :where(.related-card, .rc-icon-card):active {
    transform: scale(0.99);
    background: var(--vmx-surface-soft) !important;
  }

  /* Homepage: situation-first choices, not compressed desktop columns. */
  body[data-vmx="1"][data-vmx-page="home"] :where(section, .section) {
    scroll-margin-top: calc(74px + env(safe-area-inset-top));
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.situations-grid, .risk-grid, .sh-grid, .recent-grid) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.sit-card, .risk-card, .sh-card, .recent-card) {
    min-height: 0 !important;
    padding: 1.15rem !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .sit-card {
    display: grid !important;
    grid-template-columns: 42px 1fr;
    column-gap: 0.9rem;
    align-items: start;
  }

  body[data-vmx="1"][data-vmx-page="home"] .sit-card :where(h3, p, .sit-card-link) {
    grid-column: 2;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.trust-strip, .hero-trust-badges) {
    overflow: visible !important;
  }

  /* Resource Center: search first, compact choices. */
  body[data-vmx="1"][data-vmx-page="blog"] :where(.search-section, .featured-section, .situations-section, .recent-guides) {
    padding: 2.25rem var(--vmx-page-gutter) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.search-inner, .featured-inner, .situations-inner, .recent-guides-inner) {
    width: 100%;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.gux-grid, .recent-guides-grid) {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 320px);
    gap: 0.75rem !important;
    max-width: 100%;
    padding: 0.2rem 0.1rem 0.85rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    contain: inline-size;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.gux-card, .recent-guide-card) {
    padding: 1.15rem !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    scroll-snap-align: start;
  }

  body[data-vmx="1"] :where(.search-bar-wrap, .src-search-wrap, .rc-search-wrap, .bss-search-wrap) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem !important;
    width: 100%;
  }

  body[data-vmx="1"] :where(.search-input, input[type="search"]) {
    min-width: 0;
    min-height: 48px;
    font-size: 16px !important;
  }

  body[data-vmx="1"] .search-btn {
    min-width: 48px;
    min-height: 48px;
  }

  body[data-vmx="1"] :where(.search-chips, .category-nav, .filter-chips) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    overflow-x: auto;
    padding: 0.25rem 0 0.6rem;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    contain: inline-size;
  }

  body[data-vmx="1"] :where(.search-chip, .category-nav a, .filter-chips a) {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    scroll-snap-align: start;
  }

  /* Existing resource TOC becomes a progressive-enhancement disclosure. */
  body[data-vmx="1"] .rc-toc-wrap {
    display: block !important;
    padding: 0 !important;
  }

  body[data-vmx="1"] .rc-toc {
    position: static !important;
    width: auto !important;
    margin: 1rem var(--vmx-page-gutter) 0 !important;
    padding: 0 !important;
    border: 1px solid var(--vmx-border-gold) !important;
    border-radius: 14px !important;
    background: var(--vmx-surface) !important;
    overflow: hidden;
  }

  body[data-vmx="1"] .rc-toc.vmx-toc-ready > h4 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body[data-vmx="1"] .vmx-toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 0.85rem 1rem;
    border: 0;
    color: var(--navy, #0f1f38);
    background: transparent;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  body[data-vmx="1"] .vmx-toc-toggle::after {
    content: "+";
    flex: 0 0 auto;
    margin-left: 1rem;
    font-size: 1.3rem;
    font-weight: 400;
  }

  body[data-vmx="1"] .vmx-toc-toggle[aria-expanded="true"]::after {
    content: "−";
  }

  body[data-vmx="1"] .rc-toc.vmx-toc-ready ol {
    margin: 0;
    padding: 0.25rem 1rem 1rem 2.35rem;
    border-top: 1px solid var(--vmx-border);
  }

  body[data-vmx="1"] .rc-toc li {
    margin: 0 !important;
  }

  body[data-vmx="1"] .rc-toc a {
    display: block;
    min-height: 44px;
    padding: 0.65rem 0;
    line-height: 1.45;
  }

  body[data-vmx="1"] .rc-checklist li {
    position: relative;
    display: block !important;
    min-width: 0;
    padding-left: 1.8rem !important;
  }

  body[data-vmx="1"] .rc-checklist .rc-check {
    position: absolute;
    top: 0.72rem;
    left: 0;
  }

  body[data-vmx="1"] .rc-checklist .inline-link {
    display: inline !important;
  }

  /* Forms retain their behavior while reading like guided onboarding. */
  body[data-vmx="1"] :where(form[action*="formspree.io"], .hero-card-form, .bfc-form) {
    width: 100%;
  }

  body[data-vmx="1"] :where(.form-row, .bfc-row, .lcf-row) {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  body[data-vmx="1"] form[action*="formspree.io"] :where(label, .form-label) {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.88rem !important;
    line-height: 1.4;
  }

  body[data-vmx="1"] form[action*="formspree.io"] :where(input:not([type="hidden"]), select, textarea) {
    width: 100% !important;
    min-height: 48px;
    padding: 0.75rem 0.85rem !important;
    border-radius: 9px !important;
    font-size: 16px !important;
    line-height: 1.35;
    scroll-margin-bottom: calc(100px + env(safe-area-inset-bottom));
  }

  body[data-vmx="1"] form[action*="formspree.io"] textarea {
    min-height: 112px;
    resize: vertical;
  }

  body[data-vmx="1"] form[action*="formspree.io"] :where(button[type="submit"], input[type="submit"]) {
    width: 100% !important;
    min-height: 50px;
    margin-top: 0.4rem;
    font-size: 0.94rem !important;
  }

  body[data-vmx="1"] :where(.form-reassurance, .lcf-reassurance, .lcf-alt, .form-trust-values) {
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
  }

  /* Two primary actions plus a compact secondary text control. */
  body[data-vmx="1"] .mobile-sticky-cta {
    display: block !important;
    padding: 0.55rem max(0.7rem, env(safe-area-inset-right)) calc(0.55rem + env(safe-area-inset-bottom)) max(0.7rem, env(safe-area-inset-left)) !important;
    background: rgba(15, 31, 56, 0.97) !important;
    border-top: 1px solid rgba(184, 156, 106, 0.38) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(12px);
    transition: transform 180ms ease, opacity 180ms ease;
  }

  body[data-vmx="1"] .mobile-sticky-cta-inner {
    display: grid !important;
    grid-template-columns: minmax(76px, 0.8fr) 48px minmax(118px, 1.25fr);
    gap: 0.45rem !important;
    max-width: 430px !important;
  }

  body[data-vmx="1"] .mobile-sticky-cta a {
    min-width: 0;
    min-height: 48px !important;
    padding: 0.55rem 0.65rem !important;
    border-radius: 10px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.035em !important;
  }

  body[data-vmx="1"] .mobile-sticky-cta .msc-text {
    width: 48px;
    padding-inline: 0 !important;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.82) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    font-size: 0 !important;
  }

  body[data-vmx="1"] .mobile-sticky-cta .msc-text svg {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }

  body[data-vmx="1"] .mobile-sticky-cta a:active {
    transform: scale(0.98);
  }

  body[data-vmx="1"].vmx-form-in-view .mobile-sticky-cta,
  body[data-vmx="1"].vmx-footer-in-view .mobile-sticky-cta {
    opacity: 0;
    pointer-events: none;
    transform: translateY(110%);
  }

  /* Subtle reading progress, never interactive. */
  body[data-vmx="1"] .vmx-reading-progress {
    position: fixed;
    top: calc(60px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    z-index: 98;
    height: 2px;
    pointer-events: none;
    background: transparent;
  }

  body[data-vmx="1"] .vmx-reading-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: #b89c6a;
    transform: scaleX(var(--vmx-progress, 0));
    transform-origin: left center;
  }

  /* Footers remain usable above the action area. */
  body[data-vmx="1"] footer {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
  }

  body[data-vmx="1"] :where(.footer-inner, .footer-top, .footer-nap-inner) {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  body[data-vmx="1"] footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media screen and (max-width: 350px) {
  body[data-vmx="1"] {
    --vmx-page-gutter: 0.95rem;
  }

  body[data-vmx="1"] nav :where(.logo-img, .nav-logo img, img) {
    max-width: 62vw !important;
  }

  body[data-vmx="1"] .mobile-sticky-cta-inner {
    grid-template-columns: minmax(70px, 0.75fr) 46px minmax(108px, 1.2fr);
    gap: 0.35rem !important;
  }

  body[data-vmx="1"] .mobile-sticky-cta a {
    padding-inline: 0.45rem !important;
    letter-spacing: 0 !important;
  }
}

@media screen and (max-width: 768px) and (orientation: landscape) {
  body[data-vmx="1"] :where(.hero, .rc-hero) {
    padding-bottom: 1.5rem !important;
  }

  body[data-vmx="1"] .nlinks:is(.mobile-open, .vig-mobile-open) {
    max-height: calc(100dvh - 54px - env(safe-area-inset-top));
  }
}

@media screen and (max-width: 768px) and (prefers-reduced-motion: reduce) {
  body[data-vmx="1"] *,
  body[data-vmx="1"] *::before,
  body[data-vmx="1"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   VMX 3.0 — HOMEPAGE MOBILE RECOMPOSITION
   A purpose-built New Jersey property-help experience for phones.
   Scoped entirely to body[data-vmx="1"][data-vmx-page="home"] and to
   max-width:768px, so desktop and every other VMX page are untouched.
   Loaded last, so this layer intentionally supersedes VMX 1.0 / 2.0 on the
   homepage only. Enhancement hooks (.vmx-hero-secondary and .vmx-sh-icon)
   are added by vmx-mobile.js and hidden on desktop below.
   ============================================================================ */

/* Desktop guard: mobile-only enhancement nodes never render on desktop. */
body[data-vmx="1"][data-vmx-page="home"] .vmx-hero-secondary,
body[data-vmx="1"][data-vmx-page="home"] .vmx-sh-icon {
  display: none;
}

@media screen and (max-width: 768px) {
  body[data-vmx="1"][data-vmx-page="home"] {
    /* Refined VMX 3.0 tokens layered over the existing palette. */
    --v3-ink: #12263f;
    --v3-ink-soft: #43536a;
    --v3-paper: #fffdf7;
    --v3-paper-2: #f6f2e9;
    --v3-sage: #e3ebe1;
    --v3-sage-deep: #64775f;
    --v3-gold: #a9834b;
    --v3-gold-soft: rgba(169, 131, 75, 0.14);
    --v3-line: rgba(18, 38, 63, 0.1);
    --v3-radius: 20px;
    --v3-radius-lg: 26px;
    --v3-shadow: 0 12px 34px rgba(18, 38, 63, 0.09);
    --v3-shadow-soft: 0 6px 18px rgba(18, 38, 63, 0.06);
    --v3-pad: clamp(1.15rem, 5.2vw, 1.5rem);
  }

  /* ---- 1. Phone-first information flow (visual reorder, DOM order kept) ----
     Body becomes a single column so sections can be resequenced with `order`
     without moving any DOM node — SEO/source order and desktop stay intact.
     Fixed nav and the sticky action bar are out of flow, so they are unaffected. */
  body[data-vmx="1"][data-vmx-page="home"] {
    display: flex !important;
    flex-direction: column;
  }

  body[data-vmx="1"][data-vmx-page="home"] > .hero { order: 1; }
  body[data-vmx="1"][data-vmx-page="home"] > .start-here-section { order: 2; }
  body[data-vmx="1"][data-vmx-page="home"] > #services { order: 3; }
  body[data-vmx="1"][data-vmx-page="home"] > .property-toolkit-start { order: 4; }
  body[data-vmx="1"][data-vmx-page="home"] > .search-resource-center { order: 5; }
  body[data-vmx="1"][data-vmx-page="home"] > .talk-ray-section { order: 6; }
  body[data-vmx="1"][data-vmx-page="home"] > #recent-situations { order: 7; }
  body[data-vmx="1"][data-vmx-page="home"] > .founder-section { order: 8; }
  body[data-vmx="1"][data-vmx-page="home"] > .process-section { order: 9; }
  body[data-vmx="1"][data-vmx-page="home"] > .risks-section { order: 10; }
  body[data-vmx="1"][data-vmx-page="home"] > .vmx-mobile-form-stage { order: 11; }
  body[data-vmx="1"][data-vmx-page="home"] > #faq { order: 12; }
  body[data-vmx="1"][data-vmx-page="home"] > .fin-ready-section { order: 13; }
  body[data-vmx="1"][data-vmx-page="home"] > .final-cta-section { order: 14; }
  /* Runtime-injected trust/role sections (production-standard.js) sit in the
     trust cluster near the end, mirroring their desktop before-footer position.
     Without an explicit order they would default to 0 and jump above the hero. */
  body[data-vmx="1"][data-vmx-page="home"] > .vig-trust-section { order: 15; }
  body[data-vmx="1"][data-vmx-page="home"] > .authority-ribbon { order: 16; }
  body[data-vmx="1"][data-vmx-page="home"] > footer { order: 17; }
  /* Defensive: any other future body-level child stays within the flow
     (just before the statewide band and footer) rather than above the hero. */
  body[data-vmx="1"][data-vmx-page="home"] > *:not([class]):not([id]) { order: 14; }

  /* ---- 2-3. Compact hero: message + two actions in the first screen ---- */
  body[data-vmx="1"][data-vmx-page="home"] .hero,
  body[data-vmx="1"][data-vmx-page="home"] .rc-hero {
    padding-top: calc(4.4rem + env(safe-area-inset-top)) !important;
    padding-bottom: 1.9rem !important;
    background:
      radial-gradient(circle at 108% -4%, rgba(169, 131, 75, 0.12), transparent 40%),
      linear-gradient(168deg, #fffdf7 0%, #f4efe5 100%) !important;
  }

  /* Remove the desktop dark image overlay so the calm paper hero shows through. */
  body[data-vmx="1"][data-vmx-page="home"] .hero::after {
    display: none !important;
  }

  /* Drop the doubled top padding from the base hero-inner; .hero clears the nav. */
  body[data-vmx="1"][data-vmx-page="home"] .hero-inner {
    padding-top: 0 !important;
    gap: 0 !important;
  }

  /* Clean, compact header: drop the overlapping VMX chrome tagline on home. */
  body[data-vmx="1"][data-vmx-page="home"] nav::after {
    display: none !important;
  }

  /* Neutralise the VMX 2.0 tall decorative circle. */
  body[data-vmx="1"][data-vmx-page="home"] .hero::before {
    width: 11rem !important;
    height: 11rem !important;
    right: -5.5rem !important;
    top: 3.4rem !important;
    opacity: 0.7;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero .eyebrow {
    margin-bottom: 0.85rem !important;
    padding: 0.42rem 0.75rem !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.12em !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero h1 {
    max-width: 13ch !important;
    margin-bottom: 0.7rem !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(2.3rem, 10.5vw, 3rem) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
  }

  /* Hero sub becomes a short, direct reassurance; long paragraph is de-emphasised. */
  body[data-vmx="1"][data-vmx-page="home"] .hero .hero-sub {
    display: none !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero .hero-reassure {
    order: 3;
    margin: 0 0 1.15rem !important;
    padding: 0.85rem 1rem 0.85rem 2.65rem !important;
    border: 1px solid rgba(100, 119, 95, 0.22);
    border-radius: 15px;
    background: rgba(227, 235, 225, 0.62);
    color: #4a5a4a !important;
    font-family: 'DM Sans', sans-serif !important;
    font-style: normal !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero .hero-reassure::before {
    content: "✓";
    position: absolute;
    left: 0.95rem;
    top: 0.85rem;
    width: 1.2rem;
    height: 1.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--v3-sage-deep);
    font: 700 0.68rem/1 'DM Sans', sans-serif;
  }

  /* Two actions, both visible in the first screen. */
  body[data-vmx="1"][data-vmx-page="home"] .hero .hero-ctas {
    order: 4;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.6rem !important;
    margin-bottom: 1.25rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero .hero-ctas .btn-primary {
    background: var(--v3-ink) !important;
    border-color: var(--v3-ink) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-hero-secondary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px !important;
    padding: 0.9rem 1.2rem !important;
    border: 1px solid rgba(18, 38, 63, 0.2) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.7) !important;
    color: var(--v3-ink) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    text-decoration: none;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-hero-secondary:active {
    transform: scale(0.985);
    background: rgba(255, 255, 255, 0.95) !important;
  }

  /* Restrained, regionally-accurate NJ imagery strip (accurate NJ + skyline). */
  body[data-vmx="1"][data-vmx-page="home"] .hero-left::after {
    order: 5;
    aspect-ratio: 16 / 8 !important;
    margin: 0.1rem 0 0.25rem !important;
    border: 3px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 20px 20px 44px 20px !important;
    background:
      linear-gradient(180deg, transparent 52%, rgba(12, 26, 43, 0.32)),
      url('/images/defaults/homepage-hero.webp') center 32% / cover no-repeat !important;
    box-shadow: var(--v3-shadow) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero-left > .hero-reassure { order: 3; }
  body[data-vmx="1"][data-vmx-page="home"] .hero-left > .hero-ctas { order: 4; }
  body[data-vmx="1"][data-vmx-page="home"] .hero-left::after { order: 5; }
  body[data-vmx="1"][data-vmx-page="home"] .hero-left > .hero-trust-badges { order: 6; }

  body[data-vmx="1"][data-vmx-page="home"] .hero-trust-badges {
    margin-top: 1.1rem !important;
    gap: 0.5rem 0.75rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero-badge {
    padding: 0.42rem 0.7rem !important;
    border: 1px solid rgba(18, 38, 63, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    color: #4a5a6a !important;
    font-size: 0.63rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero-badge svg { opacity: 0.8; }

  /* ---- Shared section rhythm: one idea per viewport, calm whitespace ---- */
  body[data-vmx="1"][data-vmx-page="home"] :where(.section, .start-here-section, .search-resource-center, .risks-section, .process-section, .founder-section, .talk-ray-section) {
    padding: 3.1rem var(--v3-pad) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.section-header, .start-here-inner, .risks-inner .section-header) {
    margin-bottom: 1.5rem !important;
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.section-eyebrow, .start-here-inner .exp-opener) {
    justify-content: flex-start !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .section-eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    padding: 0.4rem 0.72rem !important;
    border: 1px solid rgba(100, 119, 95, 0.22);
    border-radius: 999px;
    background: rgba(227, 235, 225, 0.7);
    color: #566c59 !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.11em !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .section-eyebrow::before,
  body[data-vmx="1"][data-vmx-page="home"] .section-eyebrow::after {
    display: none !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.section-header h2, .start-here-inner h2, .risks-inner h2) {
    margin-top: 0.7rem !important;
    font-size: clamp(1.95rem, 8.6vw, 2.5rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em;
  }

  body[data-vmx="1"][data-vmx-page="home"] .exp-opener {
    font-size: 1rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.section-desc, .sh-desc, .src-desc) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 0.94rem !important;
  }

  /* ---- 4. Situation selector: a true mobile decision interface ---- */
  body[data-vmx="1"][data-vmx-page="home"] .start-here-section {
    background: var(--v3-paper) !important;
    border-top: 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .sh-grid,
  body[data-vmx="1"][data-vmx-page="home"] .sh-grid--four {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .sh-card {
    position: relative;
    display: grid !important;
    grid-template-columns: 46px 1fr 18px;
    align-items: center;
    gap: 0.9rem;
    min-height: 72px !important;
    padding: 1rem 1.05rem !important;
    border: 1px solid var(--v3-line) !important;
    border-radius: var(--v3-radius) !important;
    background: var(--v3-paper) !important;
    box-shadow: var(--v3-shadow-soft) !important;
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .sh-card:active {
    transform: scale(0.99);
    border-color: var(--v3-gold) !important;
    background: #fffef9 !important;
  }

  /* Refined line icon replaces the decorative emoji on mobile. */
  body[data-vmx="1"][data-vmx-page="home"] .sh-emoji {
    display: none !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-sh-icon {
    display: grid !important;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--v3-sage);
    color: var(--v3-sage-deep);
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-sh-icon svg {
    width: 22px;
    height: 22px;
  }

  body[data-vmx="1"][data-vmx-page="home"] .sh-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: var(--v3-ink) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .sh-note {
    margin-top: 0.15rem;
    font-size: 0.74rem !important;
    color: var(--v3-ink-soft) !important;
  }

  /* Chevron affordance drawn into the third grid column. */
  body[data-vmx="1"][data-vmx-page="home"] .sh-card::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--v3-gold);
    border-bottom: 2px solid var(--v3-gold);
    transform: rotate(-45deg);
    justify-self: end;
    opacity: 0.7;
  }

  /* ---- 3 (nav). Compact, calm header sits above the flow ---- */
  body[data-vmx="1"][data-vmx-page="home"] nav {
    background: rgba(15, 31, 56, 0.97) !important;
  }

  /* ---- 5 (featured). Difficult-situation cards: calm vertical deck ---- */
  body[data-vmx="1"][data-vmx-page="home"] #services {
    background: var(--v3-paper-2) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] #services .situations-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
    grid-auto-columns: auto !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] #services .sit-card {
    display: block !important;
    min-height: 0 !important;
    padding: 1.4rem !important;
    border: 1px solid var(--v3-line) !important;
    border-radius: var(--v3-radius) !important;
    background: var(--v3-paper) !important;
    box-shadow: var(--v3-shadow-soft) !important;
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] #services .sit-card::before {
    height: 3px;
    background: linear-gradient(90deg, var(--v3-gold), #cbab77);
    transform: scaleX(1);
  }

  body[data-vmx="1"][data-vmx-page="home"] #services .sit-card-icon {
    width: 46px !important;
    height: 46px !important;
    margin: 0 0 0.9rem !important;
    padding: 0.6rem;
    border-radius: 13px;
    background: var(--v3-gold-soft) !important;
    color: var(--v3-gold) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] #services .sit-card h3 {
    margin: 0 0 0.5rem !important;
    font-size: 1.5rem !important;
    line-height: 1.12 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] #services .sit-card > p {
    font-size: 0.9rem !important;
  }

  /* Featured planning tools: swipeable card row. */
  body[data-vmx="1"][data-vmx-page="home"] .property-toolkit-start {
    background: var(--v3-paper) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .property-toolkit-start .situations-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: min(82vw, 300px);
    gap: 0.8rem !important;
    max-width: none !important;
    margin: 0 calc(var(--v3-pad) * -1);
    padding: 0.3rem var(--v3-pad) 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  body[data-vmx="1"][data-vmx-page="home"] .property-toolkit-start .situations-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-vmx="1"][data-vmx-page="home"] .property-toolkit-start .sit-card {
    display: flex !important;
    flex-direction: column;
    min-height: 214px !important;
    padding: 1.4rem !important;
    border: 1px solid var(--v3-line) !important;
    border-radius: var(--v3-radius) !important;
    background: var(--v3-paper) !important;
    box-shadow: var(--v3-shadow-soft) !important;
    scroll-snap-align: start;
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .property-toolkit-start .sit-card h3 {
    font-size: 1.35rem !important;
    line-height: 1.14 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .property-toolkit-start .sit-card-link {
    align-self: flex-start !important;
    margin-top: auto;
    color: var(--v3-gold) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .section-cta-row {
    margin-top: 1.6rem !important;
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .section-cta-row .btn-primary,
  body[data-vmx="1"][data-vmx-page="home"] .section-cta-row .btn-soft {
    display: inline-flex !important;
    width: 100%;
    max-width: none !important;
    align-items: center;
    justify-content: center;
  }

  /* ---- Navy conversion panels: search + trust ---- */
  body[data-vmx="1"][data-vmx-page="home"] .search-resource-center,
  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-section {
    margin: 0 var(--v3-pad) !important;
    padding: 1.7rem 1.5rem !important;
    border-radius: var(--v3-radius-lg) !important;
    background: linear-gradient(160deg, #14273f, #0e1d32) !important;
    border: 1px solid rgba(169, 131, 75, 0.3) !important;
    box-shadow: var(--v3-shadow);
  }

  body[data-vmx="1"][data-vmx-page="home"] .search-resource-center :where(h2, .exp-opener, .src-desc),
  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-section :where(h2, p, .exp-opener) {
    color: rgba(255, 255, 255, 0.86) !important;
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .search-resource-center h2,
  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-section h2 {
    color: #fff !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .search-resource-inner .exp-opener,
  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-text .exp-opener {
    color: var(--goldl) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .src-search-wrap {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.55rem !important;
    margin: 1.1rem 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .src-search-wrap .search-input {
    min-height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    font-size: 16px !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .src-search-wrap .search-btn {
    min-height: 52px;
    border-radius: 14px !important;
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--v3-ink) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .src-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    margin: 0 calc(var(--v3-pad) * -1);
    padding: 0.2rem var(--v3-pad) 0.3rem;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  body[data-vmx="1"][data-vmx-page="home"] .src-chips::-webkit-scrollbar { display: none; }

  body[data-vmx="1"][data-vmx-page="home"] .src-chip {
    flex: 0 0 auto;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.86) !important;
    scroll-snap-align: start;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-inner {
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-inner::before { display: none; }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-avatar {
    width: 64px !important;
    height: 64px !important;
    border-color: var(--gold) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-badges { justify-content: flex-start !important; }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-badges span {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-badges svg { color: var(--goldl) !important; }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-cta,
  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-cta .btn-primary {
    width: 100% !important;
    max-width: none !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-cta .btn-primary {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--v3-ink) !important;
  }

  /* ---- 7. Recent situations: swipeable image deck ---- */
  body[data-vmx="1"][data-vmx-page="home"] #recent-situations {
    background: var(--v3-paper) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .recent-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: 84%;
    gap: 1rem !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    padding: 0.3rem 0 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(18, 38, 63, 0.24) transparent;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body[data-vmx="1"][data-vmx-page="home"] .recent-grid::-webkit-scrollbar { height: 4px; }
  body[data-vmx="1"][data-vmx-page="home"] .recent-grid::-webkit-scrollbar-track { background: transparent; }
  body[data-vmx="1"][data-vmx-page="home"] .recent-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(18, 38, 63, 0.24);
  }

  body[data-vmx="1"][data-vmx-page="home"] .recent-grid:focus-visible {
    outline: 2px solid var(--v3-gold);
    outline-offset: 4px;
  }

  body[data-vmx="1"][data-vmx-page="home"] .recent-card {
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--v3-line) !important;
    border-radius: var(--v3-radius) !important;
    background: var(--v3-paper) !important;
    box-shadow: var(--v3-shadow-soft) !important;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  body[data-vmx="1"][data-vmx-page="home"] .recent-card-img {
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  body[data-vmx="1"][data-vmx-page="home"] .recent-card-body {
    padding: 1.25rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .recent-swipe-cue {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    margin: -0.35rem 0 0.55rem;
    color: var(--v3-ink-soft);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  body[data-vmx="1"][data-vmx-page="home"] .recent-swipe-cue::after {
    content: "→";
    color: var(--v3-gold);
    font-size: 0.9rem;
  }

  /* ---- 8. Meet Ray: calm founder card ---- */
  body[data-vmx="1"][data-vmx-page="home"] .founder-section {
    background: var(--v3-paper-2) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .founder-inner {
    grid-template-columns: 1fr !important;
    gap: 1.3rem !important;
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .founder-media {
    max-width: 190px !important;
    margin: 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .founder-media img {
    border-radius: var(--v3-radius) !important;
    box-shadow: var(--v3-shadow) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .founder-content .section-eyebrow {
    justify-content: flex-start !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .founder-body {
    margin: 0 0 1.1rem !important;
    font-size: 0.94rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .founder-cta .btn-soft {
    display: inline-flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 16px !important;
  }

  /* ---- 9. How the process works: numbered rail ---- */
  body[data-vmx="1"][data-vmx-page="home"] .process-section {
    background: var(--v3-paper) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .process-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .process-steps::before { display: none !important; }

  body[data-vmx="1"][data-vmx-page="home"] .process-step {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    column-gap: 1rem;
    align-items: start;
    padding: 1.35rem 1.3rem !important;
    border: 1px solid var(--v3-line) !important;
    border-radius: var(--v3-radius) !important;
    background: var(--v3-paper) !important;
    box-shadow: var(--v3-shadow-soft) !important;
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .process-num {
    width: 2.4rem !important;
    height: 2.4rem !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--v3-ink) !important;
    color: #fff !important;
    font-size: 1.15rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .process-step h3 {
    grid-column: 2;
    margin: 0 0 0.3rem !important;
    font-size: 1.3rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .process-step p {
    grid-column: 2;
    font-size: 0.9rem !important;
  }

  /* ---- 10 (support). Risks: why acting early matters ---- */
  body[data-vmx="1"][data-vmx-page="home"] .risks-section {
    background: var(--v3-paper-2) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .risk-grid,
  body[data-vmx="1"][data-vmx-page="home"] .risks-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .risk-card {
    padding: 1.3rem !important;
    border: 1px solid var(--v3-line) !important;
    border-radius: var(--v3-radius) !important;
    background: var(--v3-paper) !important;
    box-shadow: var(--v3-shadow-soft) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .risk-card-icon {
    background: var(--v3-gold-soft) !important;
    color: var(--v3-gold) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .risks-reassurance {
    margin-top: 1.4rem !important;
    text-align: left !important;
    font-size: 0.9rem !important;
  }

  /* ---- 11. Private property review: dedicated experience ---- */
  body[data-vmx="1"][data-vmx-page="home"] .vmx-mobile-form-stage {
    margin: 0 var(--v3-pad) !important;
    padding: 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-mobile-form-stage::before {
    content: "Private property review" !important;
    margin: 0 0 0.85rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-mobile-form-stage .hero-card {
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--v3-line) !important;
    border-radius: var(--v3-radius-lg) !important;
    background: var(--v3-paper) !important;
    box-shadow: var(--v3-shadow) !important;
    backdrop-filter: none;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-mobile-form-stage .hero-card-header {
    padding: 1.4rem 1.4rem 1.2rem !important;
    background: linear-gradient(160deg, #14273f, #0e1d32) !important;
    border-bottom: 2px solid var(--gold) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-mobile-form-stage .hero-card-header :where(h3, p) {
    color: rgba(255, 255, 255, 0.88) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-mobile-form-stage .hero-card-header h3 {
    color: #fff !important;
    font-size: 1.4rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-mobile-form-stage .hero-card-values li {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-mobile-form-stage .hero-card-form {
    padding: 1.4rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-mobile-form-stage .hc-submit {
    background: var(--v3-ink) !important;
    border-color: var(--v3-ink) !important;
  }

  /* ---- 12. FAQ: quiet accordion ---- */
  body[data-vmx="1"][data-vmx-page="home"] #faq { background: var(--v3-paper) !important; }

  body[data-vmx="1"][data-vmx-page="home"] .faq-intro {
    text-align: left !important;
    font-size: 0.92rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .faq-item {
    margin-bottom: 0.6rem !important;
    border: 1px solid var(--v3-line) !important;
    border-radius: 16px !important;
    background: var(--v3-paper) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .faq-item.open {
    background: var(--v3-paper) !important;
    border-color: rgba(169, 131, 75, 0.3) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .faq-trigger {
    min-height: 60px;
    padding: 0.95rem 1.1rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .faq-trigger h3 { font-size: 0.95rem !important; }

  /* ---- 13-14. Financial readiness + final CTA ---- */
  body[data-vmx="1"][data-vmx-page="home"] .final-cta-section {
    padding: 3rem var(--v3-pad) !important;
    background: linear-gradient(165deg, #14273f, #0c1a2d) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .final-cta-inner { text-align: left !important; }

  body[data-vmx="1"][data-vmx-page="home"] .final-cta-inner p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .final-cta-inner .btn-primary {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--v3-ink) !important;
  }

  /* ---- 15. Statewide ribbon: quiet trust footer band ---- */
  body[data-vmx="1"][data-vmx-page="home"] .authority-ribbon {
    padding: 1.5rem var(--v3-pad) !important;
    background: #0e1d32 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .authority-ribbon-inner { text-align: center; }

  /* ---- Bottom action area: two dominant actions + compact text ---- */
  body[data-vmx="1"][data-vmx-page="home"] .mobile-sticky-cta {
    background: rgba(15, 31, 56, 0.98) !important;
    border-top: 1px solid rgba(169, 131, 75, 0.4) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .mobile-sticky-cta-inner {
    grid-template-columns: minmax(74px, 0.85fr) 48px minmax(120px, 1.3fr) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .msc-review {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--v3-ink) !important;
    font-weight: 700 !important;
  }
}

/* Home-only tightening for the smallest phones. */
@media screen and (max-width: 360px) {
  body[data-vmx="1"][data-vmx-page="home"] .sh-card {
    grid-template-columns: 42px 1fr 16px;
    gap: 0.7rem;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-sh-icon {
    width: 42px;
    height: 42px;
  }
}

/* ============================================================================
   VMX 3.1 — HOMEPAGE MOBILE VISUAL CONSISTENCY REPAIR
   One cohesive mobile design system, applied from the hero through the footer.
   Appended last so it supersedes earlier VMX layers on the homepage only.
   Scoped to body[data-vmx="1"][data-vmx-page="home"] + max-width:768px, so the
   desktop layout and every other page are untouched.

   Goals: one design language top-to-bottom; cream canvas + deep-navy ink;
   restrained gold/sage accents; consistent radius / border / shadow / padding;
   controlled type scale; pills only as small labels; no lower section reverting
   to the desktop look; readable dark panels; a compact, correctly-labelled bar.
   ============================================================================ */
@media screen and (max-width: 768px) {
  body[data-vmx="1"][data-vmx-page="home"] {
    --v31-ink: #12263f;
    --v31-ink-soft: #43536a;
    --v31-paper: #fffdf7;
    --v31-paper-2: #f6f2e9;
    --v31-sage: #e3ebe1;
    --v31-sage-deep: #5f7359;
    --v31-gold: #a9834b;
    --v31-gold-soft: rgba(169, 131, 75, 0.12);
    --v31-line: rgba(18, 38, 63, 0.1);
    --v31-radius: 20px;
    --v31-radius-lg: 24px;
    --v31-shadow-soft: 0 6px 18px rgba(18, 38, 63, 0.06);
    --v31-shadow: 0 12px 34px rgba(18, 38, 63, 0.09);
    --v31-pad: clamp(1.15rem, 5.2vw, 1.5rem);
  }

  /* ---------------------------------------------------------------------------
     1. HERO — clarity and balance, ~1–1.5 viewports tall
     --------------------------------------------------------------------------- */

  /* Controlled H1: readable and authoritative, ~3–5 lines on a 390px screen —
     never most of the viewport. Removes the narrow 13ch cap that forced tall,
     awkwardly-broken lines. */
  body[data-vmx="1"][data-vmx-page="home"] .hero h1 {
    max-width: none !important;
    margin-bottom: 0.85rem !important;
    font-size: clamp(2.05rem, 8vw, 2.55rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
  }

  /* Hero eyebrow: the copy is a full phrase, so present it as a clean editorial
     label with a short leading rule — not an oversized pill. */
  body[data-vmx="1"][data-vmx-page="home"] .hero .eyebrow {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    width: auto !important;
    margin-bottom: 0.9rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--v31-gold) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero .eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 26px;
    height: 1px;
    background: var(--v31-gold);
  }

  /* Short supporting paragraph: plain, readable, no heavy sage callout box. */
  body[data-vmx="1"][data-vmx-page="home"] .hero .hero-reassure {
    order: 3;
    margin: 0 0 1.2rem !important;
    padding: 0 0 0 0.9rem !important;
    border: 0 !important;
    border-left: 2px solid rgba(95, 115, 89, 0.55) !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--v31-ink-soft) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-style: normal !important;
    font-size: 0.96rem !important;
    line-height: 1.6 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero .hero-reassure::before {
    display: none !important;
  }

  /* Compact trust row: inline items with subtle dividers — not pills. */
  body[data-vmx="1"][data-vmx-page="home"] .hero-trust-badges {
    order: 5;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.85rem !important;
    margin-top: 1.15rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero-badge {
    position: relative;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--v31-ink-soft) !important;
    font-size: 0.66rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero-badge svg {
    color: var(--v31-gold) !important;
    opacity: 1 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero-badge + .hero-badge {
    padding-left: 0.9rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .hero-badge + .hero-badge::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: rgba(18, 38, 63, 0.18);
  }

  /* NJ neighborhood image sits below the actions and trust row. Focal point is
     lowered onto the homes (not the skyline) and lightly graded for clarity. */
  body[data-vmx="1"][data-vmx-page="home"] .hero-left > .hero-reassure { order: 3 !important; }
  body[data-vmx="1"][data-vmx-page="home"] .hero-left > .hero-ctas { order: 4 !important; }
  body[data-vmx="1"][data-vmx-page="home"] .hero-left > .hero-trust-badges { order: 5 !important; }
  body[data-vmx="1"][data-vmx-page="home"] .hero-left::after {
    order: 6 !important;
    aspect-ratio: 16 / 9 !important;
    margin: 1.3rem 0 0.1rem !important;
    border: 3px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: var(--v31-radius) var(--v31-radius) 40px var(--v31-radius) !important;
    background:
      linear-gradient(180deg, transparent 58%, rgba(12, 26, 43, 0.22)),
      url('/images/defaults/homepage-hero.webp') center 66% / cover no-repeat !important;
    filter: saturate(1.05) contrast(1.04) brightness(1.04);
    box-shadow: var(--v31-shadow) !important;
  }

  /* ---------------------------------------------------------------------------
     2. SHARED SECTION SYSTEM — consistent rhythm, labels and headings
     --------------------------------------------------------------------------- */
  body[data-vmx="1"][data-vmx-page="home"] :where(.section, .start-here-section, .search-resource-center, .risks-section, .process-section, .founder-section, .talk-ray-section, .fin-ready-section, .vig-trust-section) {
    padding: 3.1rem var(--v31-pad) !important;
    border: 0 !important;
  }

  /* Short section eyebrows stay as small sage category-label pills (matching the
     reference's label chips); this is the ONE approved pill use. */
  body[data-vmx="1"][data-vmx-page="home"] .section-eyebrow,
  body[data-vmx="1"][data-vmx-page="home"] .fin-ready-eyebrow,
  body[data-vmx="1"][data-vmx-page="home"] .vig-trust-label {
    display: inline-flex !important;
    align-items: center;
    width: fit-content !important;
    margin: 0 0 0.5rem !important;
    padding: 0.4rem 0.72rem !important;
    border: 1px solid rgba(95, 115, 89, 0.26) !important;
    border-radius: 999px !important;
    background: var(--v31-sage) !important;
    color: #566c59 !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase;
  }

  body[data-vmx="1"][data-vmx-page="home"] .section-eyebrow::before,
  body[data-vmx="1"][data-vmx-page="home"] .section-eyebrow::after {
    display: none !important;
  }

  /* Consistent section-heading scale (~32–40px), no oversized headings. */
  body[data-vmx="1"][data-vmx-page="home"] :where(.section-header h2, .start-here-inner h2, .risks-inner h2, .founder-content h2, .fin-ready-title, .vig-trust-section h2, .search-resource-inner h2, .talk-ray-text h2) {
    max-width: none !important;
    margin-top: 0.6rem !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(1.95rem, 8.4vw, 2.4rem) !important;
    font-weight: 500 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
  }

  /* Consistent card-heading scale (~21–26px). */
  body[data-vmx="1"][data-vmx-page="home"] :where(.sit-card h3, .recent-card-body h3, .risk-card h3, .process-step h3, .vig-role-grid strong, .vig-help-grid strong) {
    font-size: 1.32rem !important;
    line-height: 1.16 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.section-desc, .sh-desc, .src-desc, .faq-intro) {
    font-size: 0.94rem !important;
    line-height: 1.72 !important;
  }

  /* ---------------------------------------------------------------------------
     3. SITUATION SELECTOR — two clean cards per row (not four crammed across)
     --------------------------------------------------------------------------- */
  body[data-vmx="1"][data-vmx-page="home"] .start-here-section .sh-grid,
  body[data-vmx="1"][data-vmx-page="home"] .start-here-section .sh-grid--four {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .start-here-section .sh-card {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.55rem !important;
    min-height: 138px !important;
    padding: 1rem !important;
    border: 1px solid var(--v31-line) !important;
    border-radius: var(--v31-radius) !important;
    background: var(--v31-paper) !important;
    box-shadow: var(--v31-shadow-soft) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .start-here-section .vmx-sh-icon {
    width: 42px;
    height: 42px;
  }

  body[data-vmx="1"][data-vmx-page="home"] .start-here-section .sh-label {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .start-here-section .sh-note {
    font-size: 0.72rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .start-here-section .sh-card::after {
    margin-top: auto;
    align-self: flex-start;
    justify-self: unset;
  }

  /* ---------------------------------------------------------------------------
     4. DARK PANELS — used selectively, always readable
     Search stays navy; the "A Real Person" conversation module becomes a light
     trust card so two navy panels no longer sit back-to-back and its heading is
     no longer low-contrast.
     --------------------------------------------------------------------------- */
  body[data-vmx="1"][data-vmx-page="home"] .search-resource-center {
    margin: 0 var(--v31-pad) !important;
    padding: 1.75rem 1.5rem !important;
    border: 1px solid rgba(169, 131, 75, 0.3) !important;
    border-radius: var(--v31-radius-lg) !important;
    background: linear-gradient(160deg, #14273f, #0e1d32) !important;
    box-shadow: var(--v31-shadow) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .search-resource-center :where(h2, p, .src-desc, .exp-opener) {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .search-resource-center h2 {
    color: #fff !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .search-resource-inner .exp-opener {
    color: var(--goldl) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-section {
    margin: 0 var(--v31-pad) !important;
    padding: 1.75rem 1.5rem !important;
    border: 1px solid var(--v31-line) !important;
    border-radius: var(--v31-radius-lg) !important;
    background: var(--v31-paper) !important;
    box-shadow: var(--v31-shadow-soft) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-inner {
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-inner::before {
    display: none !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-text h2 {
    color: var(--v31-ink) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-text > p {
    color: var(--v31-ink-soft) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-text .exp-opener {
    color: var(--v31-gold) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-avatar {
    width: 64px !important;
    height: 64px !important;
    border-color: var(--v31-gold) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-badges span {
    color: var(--v31-ink-soft) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-badges svg {
    color: var(--v31-gold) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .talk-ray-cta .btn-primary {
    background: var(--v31-ink) !important;
    border-color: var(--v31-ink) !important;
    color: #fff !important;
  }

  /* ---------------------------------------------------------------------------
     6. MEET RAY — one cohesive founder card, balanced photo
     --------------------------------------------------------------------------- */
  body[data-vmx="1"][data-vmx-page="home"] .founder-inner {
    grid-template-columns: 1fr !important;
    gap: 1.1rem !important;
    padding: 1.5rem 1.4rem !important;
    border: 1px solid var(--v31-line) !important;
    border-radius: var(--v31-radius-lg) !important;
    background: var(--v31-paper) !important;
    box-shadow: var(--v31-shadow-soft) !important;
    text-align: left !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .founder-media {
    max-width: 148px !important;
    margin: 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .founder-media img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover;
    object-position: center 22%;
    border-radius: 16px !important;
    box-shadow: var(--v31-shadow-soft) !important;
  }

  /* Founder eyebrow is a long phrase — render as a clean label, not a long pill. */
  body[data-vmx="1"][data-vmx-page="home"] .founder-content .section-eyebrow {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--v31-gold) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.14em !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .founder-content .section-eyebrow::before {
    content: "";
    display: block !important;
    flex: 0 0 auto;
    width: 26px;
    height: 1px;
    background: var(--v31-gold);
  }

  body[data-vmx="1"][data-vmx-page="home"] .founder-trustline {
    font-size: 0.74rem !important;
    color: var(--v31-gold) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .founder-body {
    margin: 0 0 1.1rem !important;
    font-size: 0.94rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .founder-cta .btn-soft {
    display: inline-flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 16px !important;
  }

  /* ---------------------------------------------------------------------------
     7. PRIVATE PROPERTY REVIEW — compact dark header + checkmark benefits
     --------------------------------------------------------------------------- */
  /* Section label matches the sage category-label system (was a navy pill). */
  body[data-vmx="1"][data-vmx-page="home"] .vmx-mobile-form-stage::before {
    padding: 0.4rem 0.72rem !important;
    border: 1px solid rgba(95, 115, 89, 0.26) !important;
    border-radius: 999px !important;
    color: #566c59 !important;
    background: var(--v31-sage) !important;
    font: 700 0.6rem/1.2 'DM Sans', sans-serif !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase;
  }

  /* Replace the oversized gray pill "benefits" with a clean checkmark list. */
  body[data-vmx="1"][data-vmx-page="home"] .vmx-mobile-form-stage .hero-card-values {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
    margin: 1rem 0 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-mobile-form-stage .hero-card-values li {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vmx-mobile-form-stage .hero-card-header h3 {
    font-size: 1.35rem !important;
  }

  /* ---------------------------------------------------------------------------
     8. FINANCIAL READINESS — themed as a system card (was desktop-styled)
     --------------------------------------------------------------------------- */
  body[data-vmx="1"][data-vmx-page="home"] .fin-ready-section {
    background: var(--v31-paper) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .fin-ready {
    max-width: none !important;
    margin: 0 !important;
    padding: 1.5rem 1.4rem !important;
    border: 1px solid var(--v31-line) !important;
    border-left: 1px solid var(--v31-line) !important;
    border-radius: var(--v31-radius-lg) !important;
    background: var(--v31-paper-2) !important;
    box-shadow: var(--v31-shadow-soft) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .fin-ready p {
    max-width: none !important;
    font-size: 0.94rem !important;
    color: var(--v31-ink-soft) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .fin-ready-cta {
    display: flex !important;
    width: 100% !important;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem !important;
    border: 1px solid var(--v31-ink) !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: var(--v31-ink) !important;
    text-transform: none !important;
  }

  /* ---------------------------------------------------------------------------
     9. COORDINATED NETWORK + OUR ROLE (runtime trust sections)
     Previously un-themed on mobile — they reverted to plain desktop boxes.
     Now rebuilt as system cards so they belong to the same design language.
     --------------------------------------------------------------------------- */
  body[data-vmx="1"][data-vmx-page="home"] .vig-professional-network {
    background: var(--v31-paper) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vig-our-role {
    background: var(--v31-paper-2) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vig-trust-inner {
    max-width: none !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vig-trust-section p {
    font-size: 0.94rem !important;
    line-height: 1.72 !important;
    color: var(--v31-ink-soft) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vig-help-grid,
  body[data-vmx="1"][data-vmx-page="home"] .vig-role-grid {
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
    margin: 1.3rem 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vig-help-grid p,
  body[data-vmx="1"][data-vmx-page="home"] .vig-role-grid p {
    margin: 0 !important;
    padding: 1.3rem !important;
    border: 1px solid var(--v31-line) !important;
    border-radius: var(--v31-radius) !important;
    background: var(--v31-paper) !important;
    box-shadow: var(--v31-shadow-soft) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vig-help-grid strong,
  body[data-vmx="1"][data-vmx-page="home"] .vig-role-grid strong {
    margin-bottom: 0.4rem !important;
    color: var(--v31-ink) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vig-brand-promise {
    padding: 1rem 1.15rem !important;
    border-left: 3px solid var(--v31-gold) !important;
    border-radius: 0 14px 14px 0 !important;
    background: var(--v31-gold-soft) !important;
    color: var(--v31-ink) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vig-network-summary {
    color: var(--v31-ink) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vig-professional-note {
    color: var(--v31-ink-soft) !important;
  }

  /* Conversation CTA: a single navy accent card with a gold primary action. */
  body[data-vmx="1"][data-vmx-page="home"] .vig-conversation-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    margin-top: 1.4rem !important;
    padding: 1.4rem !important;
    border-radius: var(--v31-radius) !important;
    background: linear-gradient(160deg, #14273f, #0e1d32) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vig-conversation-cta strong {
    color: #fff !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vig-conversation-cta span,
  body[data-vmx="1"][data-vmx-page="home"] .vig-conversation-cta p {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .vig-conversation-cta a {
    display: flex !important;
    width: 100% !important;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gold) !important;
    border-radius: 16px !important;
    background: var(--gold) !important;
    color: var(--v31-ink) !important;
    font-weight: 700;
  }

  /* ---------------------------------------------------------------------------
     10. FINAL CTA (navy) — ensure strong contrast
     --------------------------------------------------------------------------- */
  body[data-vmx="1"][data-vmx-page="home"] .final-cta-inner :where(h2, p) {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .final-cta-inner h2 {
    color: #fff !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .final-cta-inner .exp-opener {
    color: var(--goldl) !important;
  }

  /* ---------------------------------------------------------------------------
     11. BUTTON STANDARDISATION — consistent height, radius, casing
     --------------------------------------------------------------------------- */
  body[data-vmx="1"][data-vmx-page="home"] :where(.btn-primary, .btn-soft, .hc-submit, .vmx-hero-secondary, .fin-ready-cta) {
    min-height: 52px !important;
    border-radius: 16px !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
  }

  /* ---------------------------------------------------------------------------
     12. BOTTOM ACTION BAR — compact, safe-area aware, three clear labels
     Removes the doubled safe-area + tall min-height that left a large empty
     navy block beneath the controls, and restores a readable "Text" label.
     --------------------------------------------------------------------------- */
  body[data-vmx="1"][data-vmx-page="home"] {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .mobile-sticky-cta {
    padding: 0.5rem var(--v31-pad) calc(0.5rem + env(safe-area-inset-bottom)) !important;
    background: rgba(15, 31, 56, 0.98) !important;
    border-top: 1px solid rgba(169, 131, 75, 0.4) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .mobile-sticky-cta-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.35fr !important;
    gap: 0.5rem !important;
    min-height: 0 !important;
    max-width: 460px !important;
    padding: 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .mobile-sticky-cta a {
    min-width: 0;
    min-height: 48px !important;
    padding: 0.5rem 0.4rem !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
  }

  /* Restore the "Text" label (the site-wide layer hides it as icon-only). */
  body[data-vmx="1"][data-vmx-page="home"] .mobile-sticky-cta .msc-text {
    width: auto !important;
    padding-inline: 0.4rem !important;
    overflow: visible !important;
    font-size: 0.72rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .mobile-sticky-cta .msc-text svg {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.msc-call, .msc-text) {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .msc-review {
    border: 1px solid var(--gold) !important;
    background: var(--gold) !important;
    color: var(--v31-ink) !important;
    font-weight: 700 !important;
  }
}

/* Smallest phones: keep the three bar labels readable, selector still 2-up. */
@media screen and (max-width: 360px) {
  body[data-vmx="1"][data-vmx-page="home"] .mobile-sticky-cta a {
    font-size: 0.66rem !important;
    padding-inline: 0.3rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .start-here-section .sh-card {
    min-height: 128px !important;
    padding: 0.85rem !important;
  }
}

/* ============================================================================
   VMX 3.2 — FINAL PRODUCTION POLISH
   A production-polish pass over the mobile experience. No redesign: URLs,
   markup, schema, forms, CTA behavior and desktop layouts are untouched.
   Everything below is scoped to body[data-vmx="1"] inside max-width:768px, so
   desktop stays pixel-identical. Appended last so it supersedes earlier layers.

   Spacing rhythm is normalised to an 8 / 16 / 24 / 32 scale throughout.
   ============================================================================ */
@media screen and (max-width: 768px) {

  /* ---------------------------------------------------------------------------
     1. HEADER — premium, minimal, vertically centred
     Remove the decorative "NJ Property Help Center" chrome tagline that sat at
     the bottom edge and overlapped the logo on interior templates; centre the
     logo and hamburger; settle the header at a stable ~72px.
     --------------------------------------------------------------------------- */
  body[data-vmx="1"] nav {
    min-height: calc(72px + env(safe-area-inset-top)) !important;
    padding-top: calc(0.5rem + env(safe-area-inset-top)) !important;
    padding-bottom: 0.5rem !important;
    align-items: center !important;
  }

  body[data-vmx="1"] nav::after {
    display: none !important;
  }

  body[data-vmx="1"] nav :where(.nlogo, .logo, .nav-logo) {
    align-self: center !important;
  }

  body[data-vmx="1"] .mobile-menu-btn {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Keep the open menu docked directly beneath the taller header. */
  body[data-vmx="1"] .nlinks:is(.mobile-open, .vig-mobile-open) {
    top: calc(72px + env(safe-area-inset-top)) !important;
    max-height: calc(100dvh - 72px - env(safe-area-inset-top)) !important;
  }

  body[data-vmx="1"] .vmx-reading-progress {
    top: calc(72px + env(safe-area-inset-top)) !important;
  }

  /* ---------------------------------------------------------------------------
     2. GUIDE / RESOURCE CHECKLISTS — icon fully outside the text column
     The green circular check previously sat ~6px from the copy and clipped the
     first letter. Move it fully outside the text column with a consistent ~20px
     gutter so it never covers a glyph.
     --------------------------------------------------------------------------- */
  body[data-vmx="1"] .rc-checklist li {
    padding-left: 2.7rem !important;
  }

  body[data-vmx="1"] .rc-checklist .rc-check {
    left: 0 !important;
    top: 0.7rem !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  /* ---------------------------------------------------------------------------
     3. CONTENT WIDTH — let long legal articles breathe (~92%)
     Replace the narrow fixed reading column with a ~92% measure; side breathing
     room now comes from the auto margins rather than a tight fixed cap.
     --------------------------------------------------------------------------- */
  body[data-vmx="1"] :where(.article, .rc-content, .guide-content) {
    max-width: 92% !important;
    margin-inline: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Slightly airier reading line-height for body copy on reading templates. */
  body[data-vmx="1"] :where(.article, .rc-content, .guide-content) :where(p, li) {
    line-height: 1.8 !important;
  }

  /* ---------------------------------------------------------------------------
     4 & 5. HERO IMAGE — warm evening, homes as the focal point
     Lift exposure/midtones and thin the black gradient so the neighbourhood
     reads clearly (warm evening, not a night scene) while keeping contrast; and
     lower the crop off the skyline onto the houses, trees and front porches.
     Border, radius, aspect-ratio and shadow are inherited from VMX 3.1.
     --------------------------------------------------------------------------- */
  body[data-vmx="1"][data-vmx-page="home"] .hero-left::after {
    background:
      linear-gradient(180deg, transparent 64%, rgba(12, 26, 43, 0.12)),
      url('/images/defaults/homepage-hero.webp') center 80% / cover no-repeat !important;
    filter: brightness(1.13) contrast(1.05) saturate(1.09) sepia(0.05) !important;
  }

  /* ---------------------------------------------------------------------------
     6. CARD CONSISTENCY — one radius / border / shadow across content cards
     --------------------------------------------------------------------------- */
  body[data-vmx="1"][data-vmx-page="home"] :where(
    .sit-card, .recent-card, .risk-card, .process-step, .sh-card, .faq-item,
    .founder-inner, .fin-ready, .vig-help-grid p, .vig-role-grid p
  ) {
    border: 1px solid var(--v31-line) !important;
    border-radius: var(--v31-radius) !important;
    box-shadow: var(--v31-shadow-soft) !important;
  }

  /* ---------------------------------------------------------------------------
     7. TYPOGRAPHY — editorial, not poster. Ease oversized headings down a step
     and open up body line-height for a calmer read.
     --------------------------------------------------------------------------- */
  body[data-vmx="1"][data-vmx-page="home"] .hero h1 {
    font-size: clamp(2rem, 7.4vw, 2.4rem) !important;
    line-height: 1.12 !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(
    .section-header h2, .start-here-inner h2, .risks-inner h2, .founder-content h2,
    .fin-ready-title, .vig-trust-section h2, .search-resource-inner h2, .talk-ray-text h2
  ) {
    font-size: clamp(1.85rem, 7.4vw, 2.25rem) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(
    .section-desc, .sh-desc, .src-desc, .faq-intro, .founder-body,
    .risks-reassurance, .sit-card p, .risk-card p, .process-step p
  ) {
    line-height: 1.78 !important;
  }

  /* ---------------------------------------------------------------------------
     8. STICKY BAR — Call / Text / Free Review (labels unchanged)
     Slightly shorter, equal spacing, and perfectly centred controls.
     --------------------------------------------------------------------------- */
  body[data-vmx="1"][data-vmx-page="home"] .mobile-sticky-cta {
    padding-top: 0.45rem !important;
    padding-bottom: calc(0.45rem + env(safe-area-inset-bottom)) !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .mobile-sticky-cta-inner {
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  body[data-vmx="1"][data-vmx-page="home"] .mobile-sticky-cta a {
    display: inline-flex !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
  }

  /* ---------------------------------------------------------------------------
     9. MICRO SPACING — one 8 / 16 / 24 / 32 rhythm around section blocks
     heading → paragraph → cards → next section, aligned to the scale.
     --------------------------------------------------------------------------- */
  body[data-vmx="1"][data-vmx-page="home"] :where(.section-header, .risks-inner .section-header) {
    margin-bottom: 1.5rem !important; /* 24px: block → cards */
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.section-header h2, .start-here-inner h2, .risks-inner h2) {
    margin-top: 1rem !important;      /* 16px: eyebrow → heading */
    margin-bottom: 0.5rem !important; /* 8px:  heading → paragraph */
  }

  body[data-vmx="1"][data-vmx-page="home"] :where(.sh-desc, .section-desc, .src-desc) {
    margin-bottom: 1.5rem !important; /* 24px: paragraph → cards */
  }

body[data-vmx="1"][data-vmx-page="home"] .section-cta-row {
    margin-top: 1.5rem !important;    /* 24px: cards → CTA */
  }
}

/* Resource Center cascade guard: keep blog-only patterns after shared VMX layers. */
@media screen and (max-width: 768px) {
  body[data-vmx="1"][data-vmx-page="blog"] :where(.eyebrow, .section-eyebrow) {
    font-size: 0.75rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .gux-card-tag {
    font-size: 0.75rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-situation-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 0.8rem !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    contain: none !important;
    scroll-snap-type: none !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-situation-grid .gux-card {
    min-height: 0 !important;
    padding: 1.05rem !important;
    border-radius: 18px !important;
    box-shadow: var(--vrc-shadow) !important;
    scroll-snap-align: none !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.vmx-featured-grid, .vmx-workbook-grid, .recent-guides-grid) {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(82vw, 330px) !important;
    gap: 1rem !important;
    margin-inline: calc(var(--vmx-page-gutter) * -1) !important;
    padding: 0.2rem var(--vmx-page-gutter) 1.25rem !important;
    overflow-x: auto !important;
    contain: none !important;
    scrollbar-width: none !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.vmx-featured-grid .gux-card, .vmx-workbook-grid .gux-card, .recent-guide-card) {
    min-height: 100% !important;
    padding: 1.25rem !important;
    border-radius: var(--vrc-radius) !important;
    box-shadow: var(--vrc-shadow) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-featured-grid .gux-card {
    padding-top: 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .mobile-sticky-cta {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99 !important;
  }
}

@media screen and (max-width: 340px) {
  body[data-vmx="1"][data-vmx-page="blog"] .vmx-situation-grid {
    grid-template-columns: 1fr !important;
  }
}

@media screen and (max-width: 768px) {
  body[data-vmx="1"][data-vmx-page="blog"] {
    padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .hero-inner {
    padding-inline: 0 !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .vmx-situation-grid .gux-card-title {
    font-size: clamp(1.35rem, 5.6vw, 1.5rem) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] footer {
    padding: 2rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .mobile-sticky-cta {
    min-height: 0 !important;
    padding: 0.45rem 5.2vw calc(0.45rem + env(safe-area-inset-bottom)) !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .mobile-sticky-cta-inner {
    grid-template-columns: 1fr 1fr 1.35fr !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0.5rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .mobile-sticky-cta a,
  body[data-vmx="1"][data-vmx-page="blog"] .mobile-sticky-cta .msc-text {
    width: auto !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0.5rem 0.4rem !important;
    font-size: 0.72rem !important;
    line-height: 1.7 !important;
    letter-spacing: 0.035em !important;
    overflow: visible !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .mobile-sticky-cta svg,
  body[data-vmx="1"][data-vmx-page="blog"] .mobile-sticky-cta .msc-text svg {
    width: 14px !important;
    height: 14px !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .breadcrumbs {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0.7rem var(--vmx-page-gutter) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--vrc-line) !important;
    background: var(--vrc-paper) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .breadcrumbs::after {
    display: none !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .breadcrumbs-list {
    max-width: 42rem;
    margin-inline: auto !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .breadcrumbs-item,
  body[data-vmx="1"][data-vmx-page="blog"] .breadcrumbs-item a {
    color: var(--vrc-copy) !important;
    font-size: 0.75rem !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .breadcrumbs-item a {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px !important;
    align-items: center;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.vmx-featured-grid, .vmx-workbook-grid, .recent-guides-grid) {
    grid-auto-columns: min(78vw, 314px) !important;
    align-items: start !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] :where(.vmx-featured-grid .gux-card, .vmx-workbook-grid .gux-card, .recent-guide-card) {
    min-height: 0 !important;
    align-self: start !important;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .nlogo {
    min-height: 44px;
  }

  body[data-vmx="1"][data-vmx-page="blog"] .browse-view-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  body[data-vmx="1"][data-vmx-page="blog"] footer a {
    min-width: 44px;
  }
}