html, body { margin: 0; padding: 0; background: #FCE8DC; font-family: 'DM Sans', -apple-system, system-ui, sans-serif; }
  body { min-width: 0; }
  *, *::before, *::after { box-sizing: border-box; }
  .hfs-mock { color: #1A1614; line-height: 1.4; }
  .hfs-mock button { font-family: inherit; }
  .hfs-mock h1, .hfs-mock h2, .hfs-mock h3, .hfs-mock h4, .hfs-mock p { margin: 0; }

  /* ── Responsive / mobile ──────────────────────────────────── */
  img, svg, video { max-width: 100%; }
  .hfs-mock { overflow-x: hidden; }
  .hfs-nav-toggle { display: none; align-items: center; justify-content: center; }

  /* Header: collapse to the hamburger menu as soon as the full link row no
     longer fits (logo + 5 dropdown links + CTA need ~1200px). Below this the
     inline nav would wrap/scramble, so switch to the mobile menu early. */
  @media (max-width: 1200px) {
    .hfs-nav-links, .hfs-nav-right { display: none !important; }
    .hfs-nav-toggle { display: inline-flex !important; }
  }

  @media (max-width: 1080px) {
    .hfs-pad { padding-left: 36px !important; padding-right: 36px !important; }
    .hfs-grid-6 { grid-template-columns: repeat(3, 1fr) !important; }
    .hfs-grid-pills { grid-template-columns: repeat(3, 1fr) !important; }
    .hfs-hero-img { width: 32% !important; opacity: 0.4 !important; }
  }

  @media (max-width: 760px) {
    .hfs-pad { padding-left: 18px !important; padding-right: 18px !important; }
    .hfs-section-y { padding-top: 48px !important; padding-bottom: 48px !important; }
    .hfs-grid-6 { grid-template-columns: repeat(2, 1fr) !important; }
    .hfs-grid-4 { grid-template-columns: 1fr !important; }
    .hfs-grid-pills { grid-template-columns: repeat(2, 1fr) !important; }
    .hfs-hero { padding-bottom: 40px !important; }
    .hfs-hero-img { display: none !important; }
    .hfs-hero-calcrow { flex-direction: column !important; gap: 18px !important; }
    /* Review badges: side by side on mobile (component renders them stacked
       next to the calculator on desktop). The structural selector covers the
       currently-deployed bundle, which has no class on the badges wrapper. */
    .hfs-review-badges,
    .hfs-hero-calcrow > div:last-child { flex-direction: row !important; width: 100%; }
    .hfs-review-badges > a,
    .hfs-hero-calcrow > div:last-child > a { flex: 1 1 0; padding: 12px 14px !important; }
    .hfs-footer-card { padding: 40px 22px 44px !important; }
    .hfs-footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .hfs-footer-links { grid-template-columns: 1fr 1fr !important; }
    .hfs-mock h1 { font-size: 34px !important; letter-spacing: -1px !important; }
    .hfs-mock h2 { font-size: 28px !important; letter-spacing: -0.6px !important; }
  }

  @media (max-width: 420px) {
    .hfs-grid-6 { grid-template-columns: 1fr 1fr !important; }
    .hfs-grid-pills { grid-template-columns: 1fr !important; }
    .hfs-footer-links { grid-template-columns: 1fr !important; }
  }