/* =========================================================
   FULFILIX RETAIL ERP — PREMIUM MOBILE RESPONSIVE LAYER
   Load LAST on retail-management.php.
   Desktop > 1024px stays unchanged.
   ========================================================= */

/* ---------- Tablet / small laptop ---------- */
@media (max-width: 1024px) {

  html,
  body.fr-page {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body.home-v2.fr-page .fr-main {
    overflow: hidden !important;
  }

  body.home-v2.fr-page .fr-main .ff-shell {
    width: min(100% - 36px, 760px) !important;
    max-width: 760px !important;
    margin-inline: auto !important;
  }

  body.home-v2.fr-page .fr-main .ff-section {
    min-height: 0 !important;
    padding-top: 82px !important;
    padding-bottom: 82px !important;
  }

  /* Navbar */
  body.fr-page .navbar {
    padding: 12px 14px 0 !important;
  }

  body.fr-page .navbar .nav-shell,
  body.fr-page .navbar.scrolled .nav-shell {
    min-height: 66px !important;
    height: 66px !important;
    padding: 0 13px 0 18px !important;
    border-radius: 20px !important;
  }

  body.fr-page .navbar .nav-logo,
  body.fr-page .navbar.scrolled .nav-logo {
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  body.fr-page .navbar .nav-logo img,
  body.fr-page .navbar.scrolled .nav-logo img {
    width: 155px !important;
    max-width: 155px !important;
    height: 44px !important;
    object-fit: contain !important;
  }

  body.fr-page .navbar .nav-links,
  body.fr-page .navbar .nav-trial {
    display: none !important;
  }

  /* Hero */
  body.home-v2.fr-page .fr-hero {
    min-height: 0 !important;
    padding-top: 132px !important;
    padding-bottom: 70px !important;
  }

  body.home-v2.fr-page .fr-hero .ff-hero-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 38px !important;
    align-items: center !important;
  }

  body.home-v2.fr-page .fr-hero-copy {
    max-width: 720px !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  body.home-v2.fr-page .fr-hero-copy .ff-eyebrow {
    margin-inline: auto !important;
  }

  body.home-v2.fr-page .fr-hero .ff-display {
    max-width: 680px !important;
    margin-inline: auto !important;
    font-size: clamp(48px, 7vw, 64px) !important;
    line-height: 1.02 !important;
  }

  body.home-v2.fr-page .fr-hero .ff-hero-lead {
    max-width: 650px !important;
    margin-inline: auto !important;
    font-size: 16px !important;
    line-height: 1.72 !important;
  }

  body.home-v2.fr-page .fr-hero .ff-hero-actions {
    justify-content: center !important;
  }

  body.home-v2.fr-page .fr-hero .ff-benefit-row {
    max-width: 620px !important;
    margin-inline: auto !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  }

  body.home-v2.fr-page .fr-hero-stage {
    width: 100% !important;
    min-height: 0 !important;
    margin-inline: auto !important;
  }

  body.home-v2.fr-page .fr-hero-composition {
    width: min(680px, 100%) !important;
    min-height: 440px !important;
    margin-inline: auto !important;
    transform: none !important;
  }

  /* Generic split layouts */
  body.home-v2.fr-page .fr-pos-layout,
  body.home-v2.fr-page .fr-barcode-layout,
  body.home-v2.fr-page .fr-variants-layout,
  body.home-v2.fr-page .fr-branch-layout,
  body.home-v2.fr-page .fr-purchasing-layout,
  body.home-v2.fr-page .fr-audience-layout,
  body.home-v2.fr-page .fr-returns-layout,
  body.home-v2.fr-page .fr-reports-layout {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  body.home-v2.fr-page .fr-pos-copy,
  body.home-v2.fr-page .fr-barcode-copy,
  body.home-v2.fr-page .fr-variants-copy,
  body.home-v2.fr-page .fr-branch-copy,
  body.home-v2.fr-page .fr-purchasing-copy {
    max-width: 680px !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  body.home-v2.fr-page .fr-pos-copy .ff-kicker,
  body.home-v2.fr-page .fr-barcode-copy .ff-kicker,
  body.home-v2.fr-page .fr-variants-copy .ff-kicker,
  body.home-v2.fr-page .fr-branch-copy .ff-kicker,
  body.home-v2.fr-page .fr-purchasing-copy .ff-kicker {
    margin-inline: auto !important;
  }

  body.home-v2.fr-page .fr-pos-copy h2,
  body.home-v2.fr-page .fr-barcode-copy h2,
  body.home-v2.fr-page .fr-variants-copy h2,
  body.home-v2.fr-page .fr-branch-copy h2,
  body.home-v2.fr-page .fr-purchasing-copy h2,
  body.home-v2.fr-page .fr-pos-copy > p,
  body.home-v2.fr-page .fr-barcode-copy > p,
  body.home-v2.fr-page .fr-variants-copy > p,
  body.home-v2.fr-page .fr-purchasing-copy > p {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home-v2.fr-page .fr-flow,
  body.home-v2.fr-page .fr-chip-grid {
    justify-content: center !important;
  }

  body.home-v2.fr-page .fr-browser-frame,
  body.home-v2.fr-page .fr-barcode-visual,
  body.home-v2.fr-page .fr-variants-visual,
  body.home-v2.fr-page .fr-purchasing-visual,
  body.home-v2.fr-page .fr-branch-network,
  body.home-v2.fr-page .fr-returns-visual,
  body.home-v2.fr-page .fr-reports-visual {
    width: min(100%, 700px) !important;
    margin-inline: auto !important;
    transform: none !important;
  }

  /* Audience */
  body.home-v2.fr-page .fr-audience-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;
  }

  body.home-v2.fr-page .fr-audience-visual,
  body.home-v2.fr-page .fr-audience-visual img {
    min-height: 420px !important;
  }

  /* Capabilities */
  body.home-v2.fr-page .fr-capabilities .ff-bento {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;
  }

  body.home-v2.fr-page .fr-capabilities .ff-bento-wide {
    grid-column: span 2 !important;
    grid-template-columns: 1fr !important;
  }

  /* Cards */
  body.home-v2.fr-page .fr-loyalty-grid,
  body.home-v2.fr-page .fr-role-grid,
  body.home-v2.fr-page .fr-kpi-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  body.home-v2.fr-page .fr-integration-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }

  /* Super admin */
  body.home-v2.fr-page .fr-superadmin-visual {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  body.home-v2.fr-page .fr-superadmin-visual > img {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  body.home-v2.fr-page .fr-admin-kpi {
    position: static !important;
    min-width: 0 !important;
  }

  /* CTA */
  body.home-v2.fr-page .fr-cta-card {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  body.home-v2.fr-page .fr-cta-card .ff-cta-copy h2,
  body.home-v2.fr-page .fr-cta-card .ff-cta-copy > p {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767px) {

  html {
    scroll-behavior: smooth;
  }

  body.home-v2.fr-page {
    background:
      radial-gradient(95% 34% at 50% -2%, rgba(103,48,204,.20), transparent 68%),
      #07070d !important;
  }

  body.home-v2.fr-page *,
  body.home-v2.fr-page *::before,
  body.home-v2.fr-page *::after {
    box-sizing: border-box;
  }

  body.home-v2.fr-page .fr-main .ff-shell {
    width: calc(100% - 28px) !important;
    max-width: 560px !important;
  }

  body.home-v2.fr-page .fr-main .ff-section {
    min-height: 0 !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  body.home-v2.fr-page .fr-main .ff-section::before {
    left: 14px !important;
    right: 14px !important;
  }

  /* ---------- Compact mobile navbar ---------- */
  body.fr-page .navbar,
  body.fr-page .navbar.scrolled {
    padding: 10px 12px 0 !important;
    background: transparent !important;
  }

  body.fr-page .navbar .nav-shell,
  body.fr-page .navbar.scrolled .nav-shell {
    min-height: 58px !important;
    height: 58px !important;
    padding: 0 10px 0 14px !important;
    border-radius: 17px !important;
    gap: 8px !important;
    background: rgba(249,248,252,.985) !important;
    border: 1px solid rgba(255,255,255,.96) !important;
    box-shadow:
      0 12px 32px -22px rgba(44,10,95,.78),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  body.fr-page .navbar .nav-logo,
  body.fr-page .navbar.scrolled .nav-logo {
    min-width: 0 !important;
    padding: 0 !important;
  }

  body.fr-page .navbar .nav-logo img,
  body.fr-page .navbar.scrolled .nav-logo img {
    width: 126px !important;
    max-width: 126px !important;
    height: 36px !important;
    object-fit: contain !important;
  }

  body.fr-page .navbar .nav-links,
  body.fr-page .navbar .nav-trial {
    display: none !important;
  }

  body.fr-page .navbar .nav-toggle,
  body.fr-page .navbar .menu-toggle,
  body.fr-page .navbar .navbar-toggler,
  body.fr-page .navbar .hamburger {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 11px !important;
  }

  /* ---------- Shared heading rhythm ---------- */
  body.home-v2.fr-page .fr-main .ff-kicker,
  body.home-v2.fr-page .fr-main .ff-eyebrow {
    min-height: 29px !important;
    padding: 0 11px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: .10em !important;
    text-align: center !important;
  }

  body.home-v2.fr-page .fr-main .ff-section-head {
    width: 100% !important;
    margin: 0 auto 30px !important;
  }

  body.home-v2.fr-page .fr-main .ff-section-head .ff-kicker {
    margin: 0 auto 13px !important;
  }

  body.home-v2.fr-page .fr-main .ff-section-head h2,
  body.home-v2.fr-page .fr-main .ff-section-split-head h2,
  body.home-v2.fr-page .fr-pos-copy h2,
  body.home-v2.fr-page .fr-barcode-copy h2,
  body.home-v2.fr-page .fr-variants-copy h2,
  body.home-v2.fr-page .fr-branch-copy h2,
  body.home-v2.fr-page .fr-purchasing-copy h2,
  body.home-v2.fr-page .fr-cta-card .ff-cta-copy h2 {
    font-size: clamp(30px, 8.7vw, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance !important;
  }

  body.home-v2.fr-page .fr-main .ff-section-head > p,
  body.home-v2.fr-page .fr-main .ff-section-split-head p,
  body.home-v2.fr-page .fr-pos-copy > p,
  body.home-v2.fr-page .fr-barcode-copy > p,
  body.home-v2.fr-page .fr-variants-copy > p,
  body.home-v2.fr-page .fr-purchasing-copy > p,
  body.home-v2.fr-page .fr-cta-card .ff-cta-copy > p {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }

  body.home-v2.fr-page .fr-main .ff-section-split-head {
    display: block !important;
    margin-bottom: 28px !important;
    text-align: center !important;
  }

  body.home-v2.fr-page .fr-main .ff-section-split-head .ff-kicker {
    margin: 0 auto 13px !important;
  }

  body.home-v2.fr-page .fr-main .ff-section-split-head > div:last-child {
    max-width: 100% !important;
    margin-top: 12px !important;
    justify-self: auto !important;
  }

  body.home-v2.fr-page .fr-main .ff-section-split-head p {
    margin: 0 auto !important;
  }

  /* ---------- Hero ---------- */
  body.home-v2.fr-page .fr-hero {
    min-height: 0 !important;
    padding-top: 100px !important;
    padding-bottom: 46px !important;
  }

  body.home-v2.fr-page .fr-hero .ff-hero-layout {
    gap: 26px !important;
  }

  body.home-v2.fr-page .fr-hero-copy {
    text-align: center !important;
  }

  body.home-v2.fr-page .fr-hero-copy .ff-eyebrow {
    margin: 0 auto 15px !important;
  }

  body.home-v2.fr-page .fr-hero .ff-display {
    width: 100% !important;
    max-width: 470px !important;
    margin: 0 auto !important;
    font-size: clamp(39px, 10.6vw, 50px) !important;
    line-height: 1.01 !important;
    letter-spacing: -.052em !important;
    text-align: center !important;
  }

  body.home-v2.fr-page .fr-hero .ff-hero-lead {
    max-width: 460px !important;
    margin: 16px auto 0 !important;
    font-size: 13.5px !important;
    line-height: 1.66 !important;
    text-align: center !important;
  }

  body.home-v2.fr-page .fr-hero .ff-hero-actions {
    width: 100% !important;
    max-width: 440px !important;
    margin: 21px auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
  }

  body.home-v2.fr-page .fr-main .ff-btn,
  body.home-v2.fr-page .fr-hero .restaurant-signin-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 47px !important;
    padding: 0 12px !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  body.home-v2.fr-page .fr-hero .ff-benefit-row {
    width: 100% !important;
    max-width: 440px !important;
    margin: 22px auto 0 !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  body.home-v2.fr-page .fr-hero .ff-benefit {
    min-width: 0 !important;
    padding: 9px !important;
    gap: 8px !important;
    border: 1px solid rgba(155,111,255,.10) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.015) !important;
    text-align: left !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  body.home-v2.fr-page .fr-hero .ff-benefit-icon {
    width: 32px !important;
    height: 32px !important;
  }

  body.home-v2.fr-page .fr-hero .ff-benefit-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  body.home-v2.fr-page .fr-hero-stage {
    min-height: 0 !important;
    perspective: none !important;
  }

  body.home-v2.fr-page .fr-hero-composition {
    width: 100% !important;
    min-height: 275px !important;
    transform: none !important;
    animation: none !important;
  }

  body.home-v2.fr-page .fr-hero-rear-panel {
    top: 12px !important;
    left: auto !important;
    right: 0 !important;
    width: 92% !important;
    border-radius: 16px !important;
    transform: none !important;
    animation: none !important;
  }

  body.home-v2.fr-page .fr-hero-front-panel {
    left: 0 !important;
    bottom: 0 !important;
    width: 58% !important;
    border-radius: 14px !important;
    transform: none !important;
    animation: none !important;
  }

  body.home-v2.fr-page .ff-orbit {
    display: none !important;
  }

  /* ---------- Who it's for ---------- */
  body.home-v2.fr-page .fr-audience {
    padding-top: 64px !important;
  }

  body.home-v2.fr-page .fr-audience-layout {
    gap: 22px !important;
  }

  body.home-v2.fr-page .fr-audience-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 9px !important;
  }

  body.home-v2.fr-page .fr-audience-card {
    min-height: 0 !important;
    padding: 16px 13px !important;
    border-radius: 15px !important;
  }

  body.home-v2.fr-page .fr-audience-icon {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 12px !important;
    border-radius: 11px !important;
  }

  body.home-v2.fr-page .fr-audience-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  body.home-v2.fr-page .fr-audience-card h3 {
    margin-bottom: 6px !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
  }

  body.home-v2.fr-page .fr-audience-card p {
    font-size: 10px !important;
    line-height: 1.5 !important;
  }

  body.home-v2.fr-page .fr-audience-visual {
    min-height: 0 !important;
    border-radius: 17px !important;
  }

  body.home-v2.fr-page .fr-audience-visual img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }

  /* ---------- Capabilities ---------- */
  body.home-v2.fr-page .fr-capabilities .ff-bento {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.home-v2.fr-page .fr-capabilities .ff-bento-wide {
    grid-column: auto !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.home-v2.fr-page .fr-capabilities .ff-bento-card {
    min-height: 0 !important;
    padding: 17px !important;
    border-radius: 16px !important;
  }

  body.home-v2.fr-page .fr-capabilities .ff-bento-card h3 {
    margin: 10px 0 7px !important;
    font-size: 16px !important;
    line-height: 1.28 !important;
  }

  body.home-v2.fr-page .fr-capabilities .ff-bento-card p {
    font-size: 11px !important;
    line-height: 1.55 !important;
  }

  body.home-v2.fr-page .fr-highlight-list {
    gap: 7px !important;
    margin-top: 13px !important;
  }

  body.home-v2.fr-page .fr-highlight-list li {
    font-size: 10px !important;
    line-height: 1.42 !important;
  }

  body.home-v2.fr-page .fr-pos-ui {
    margin-top: 2px !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }

  body.home-v2.fr-page .fr-pos-ui-row {
    padding: 8px 0 !important;
    font-size: 8px !important;
  }

  body.home-v2.fr-page .fr-pos-ui-total {
    padding: 10px !important;
    font-size: 9px !important;
  }

  /* ---------- POS showcase ---------- */
  body.home-v2.fr-page .fr-pos-layout,
  body.home-v2.fr-page .fr-barcode-layout,
  body.home-v2.fr-page .fr-variants-layout,
  body.home-v2.fr-page .fr-branch-layout,
  body.home-v2.fr-page .fr-purchasing-layout,
  body.home-v2.fr-page .fr-returns-layout,
  body.home-v2.fr-page .fr-reports-layout {
    gap: 24px !important;
  }

  body.home-v2.fr-page .fr-pos-copy,
  body.home-v2.fr-page .fr-barcode-copy,
  body.home-v2.fr-page .fr-variants-copy,
  body.home-v2.fr-page .fr-branch-copy,
  body.home-v2.fr-page .fr-purchasing-copy {
    text-align: center !important;
  }

  body.home-v2.fr-page .fr-pos-copy .ff-kicker,
  body.home-v2.fr-page .fr-barcode-copy .ff-kicker,
  body.home-v2.fr-page .fr-variants-copy .ff-kicker,
  body.home-v2.fr-page .fr-branch-copy .ff-kicker,
  body.home-v2.fr-page .fr-purchasing-copy .ff-kicker {
    margin: 0 auto 13px !important;
  }

  body.home-v2.fr-page .fr-flow {
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 18px !important;
  }

  body.home-v2.fr-page .fr-flow-step {
    min-height: 30px !important;
    padding: 0 9px !important;
    font-size: 7.5px !important;
    border-radius: 8px !important;
  }

  body.home-v2.fr-page .fr-flow-arrow {
    font-size: 12px !important;
  }

  body.home-v2.fr-page .fr-browser-frame {
    border-radius: 16px !important;
    transform: none !important;
  }

  body.home-v2.fr-page .fr-browser-bar {
    height: 30px !important;
    padding: 0 10px !important;
  }

  body.home-v2.fr-page .fr-browser-bar span {
    width: 6px !important;
    height: 6px !important;
  }

  /* ---------- Barcode ---------- */
  body.home-v2.fr-page .fr-barcode-visual {
    min-height: 330px !important;
    border-radius: 17px !important;
  }

  body.home-v2.fr-page .fr-barcode-tag {
    width: 78% !important;
    padding: 18px !important;
    border-radius: 16px !important;
    transform: rotate(-2deg) !important;
  }

  body.home-v2.fr-page .fr-tag-name {
    font-size: 14px !important;
  }

  body.home-v2.fr-page .fr-tag-variant {
    font-size: 9px !important;
  }

  body.home-v2.fr-page .fr-barcode-bars {
    height: 62px !important;
    margin: 15px 0 9px !important;
  }

  body.home-v2.fr-page .fr-tag-meta {
    font-size: 7px !important;
  }

  body.home-v2.fr-page .fr-tag-price {
    margin-top: 12px !important;
    font-size: 17px !important;
  }

  body.home-v2.fr-page .fr-mini-cart {
    right: 10px !important;
    bottom: 10px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 8px !important;
  }

  body.home-v2.fr-page .fr-scan-beam {
    left: 8% !important;
    right: 8% !important;
  }

  /* ---------- Variants ---------- */
  body.home-v2.fr-page .fr-variants-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  body.home-v2.fr-page .fr-variants-visual {
    order: 2 !important;
    border-radius: 16px !important;
  }

  body.home-v2.fr-page .fr-variants-copy {
    order: 1 !important;
  }

  body.home-v2.fr-page .fr-variant-table {
    margin-top: 18px !important;
    border-radius: 13px !important;
  }

  body.home-v2.fr-page .fr-variant-row {
    min-height: 42px !important;
    padding: 0 12px !important;
    grid-template-columns: 1fr 60px !important;
    gap: 10px !important;
    font-size: 9.5px !important;
  }

  /* ---------- Multi branch ---------- */
  body.home-v2.fr-page .fr-chip-grid,
  body.home-v2.fr-page .fr-reports-list {
    gap: 6px !important;
    margin-top: 18px !important;
  }

  body.home-v2.fr-page .fr-chip {
    min-height: 30px !important;
    padding: 0 9px !important;
    font-size: 8px !important;
  }

  body.home-v2.fr-page .fr-branch-image {
    margin-top: 18px !important;
    border-radius: 15px !important;
  }

  body.home-v2.fr-page .fr-branch-network {
    min-height: 360px !important;
    padding: 20px 12px !important;
    gap: 24px !important;
    border-radius: 17px !important;
  }

  body.home-v2.fr-page .fr-node {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 11px !important;
    border-radius: 11px !important;
    font-size: 8.5px !important;
  }

  body.home-v2.fr-page .fr-node-root {
    min-width: 150px !important;
  }

  body.home-v2.fr-page .fr-node-line {
    height: 38px !important;
    margin-top: -14px !important;
    margin-bottom: -14px !important;
  }

  body.home-v2.fr-page .fr-branch-nodes {
    width: 100% !important;
    max-width: 290px !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ---------- Purchasing ---------- */
  body.home-v2.fr-page .fr-flow-vertical {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  body.home-v2.fr-page .fr-purchasing-visual {
    border-radius: 16px !important;
  }

  /* ---------- Returns ---------- */
  body.home-v2.fr-page .fr-returns-cards {
    gap: 9px !important;
  }

  body.home-v2.fr-page .fr-glass-card {
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 15px !important;
  }

  body.home-v2.fr-page .fr-glass-card h3 {
    margin-bottom: 9px !important;
    font-size: 10px !important;
  }

  body.home-v2.fr-page .fr-glass-row {
    min-height: 42px !important;
    font-size: 9.5px !important;
  }

  body.home-v2.fr-page .fr-returns-visual {
    min-height: 0 !important;
    border-radius: 16px !important;
  }

  body.home-v2.fr-page .fr-returns-visual img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }

  /* ---------- Loyalty ---------- */
  body.home-v2.fr-page .fr-loyalty-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.home-v2.fr-page .fr-big-card {
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 16px !important;
  }

  body.home-v2.fr-page .fr-big-card-icon {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 13px !important;
  }

  body.home-v2.fr-page .fr-big-card h3 {
    margin-bottom: 12px !important;
    font-size: 17px !important;
  }

  body.home-v2.fr-page .fr-note {
    margin-top: 15px !important;
    font-size: 9.5px !important;
    line-height: 1.55 !important;
  }

  /* ---------- Roles ---------- */
  body.home-v2.fr-page .fr-role-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  body.home-v2.fr-page .fr-role-card {
    min-height: 96px !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }

  body.home-v2.fr-page .fr-role-card h3 {
    margin-bottom: 5px !important;
    font-size: 12px !important;
  }

  body.home-v2.fr-page .fr-role-card p {
    font-size: 9px !important;
  }

  /* ---------- Reporting ---------- */
  body.home-v2.fr-page .fr-kpi-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  body.home-v2.fr-page .fr-kpi-card {
    min-height: 88px !important;
    padding: 13px !important;
    border-radius: 13px !important;
  }

  body.home-v2.fr-page .fr-kpi-card span {
    font-size: 8.5px !important;
  }

  body.home-v2.fr-page .fr-kpi-card b {
    font-size: 16px !important;
    overflow-wrap: anywhere !important;
  }

  body.home-v2.fr-page .fr-reports-visual {
    border-radius: 16px !important;
  }

  body.home-v2.fr-page .fr-reports-visual img {
    width: 100% !important;
    height: auto !important;
  }

  body.home-v2.fr-page .fr-reports-list {
    justify-content: center !important;
  }

  /* ---------- Integrations ---------- */
  body.home-v2.fr-page .fr-integration-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  body.home-v2.fr-page .fr-integration-card {
    min-height: 94px !important;
    gap: 8px !important;
    padding: 10px 7px !important;
    border-radius: 13px !important;
    font-size: 8.5px !important;
    text-align: center !important;
  }

  body.home-v2.fr-page .fr-integration-card img,
  body.home-v2.fr-page .fr-integration-generic-icon {
    width: 31px !important;
    height: 31px !important;
  }

  body.home-v2.fr-page .fr-integration-generic-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* ---------- Super admin ---------- */
  body.home-v2.fr-page .fr-superadmin-visual {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-height: 0 !important;
  }

  body.home-v2.fr-page .fr-superadmin-visual > img {
    width: 100% !important;
    border-radius: 16px !important;
  }

  body.home-v2.fr-page .fr-admin-kpi {
    min-width: 0 !important;
    padding: 11px 12px !important;
    border-radius: 12px !important;
  }

  body.home-v2.fr-page .fr-admin-kpi span {
    font-size: 8px !important;
  }

  body.home-v2.fr-page .fr-admin-kpi b {
    font-size: 14px !important;
  }

  /* ---------- Pricing ---------- */
  body.home-v2.fr-page #pricing.fr-pricing {
    padding-top: 66px !important;
    padding-bottom: 72px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-head {
    margin-bottom: 28px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-head h2 {
    font-size: clamp(30px, 8.7vw, 40px) !important;
    line-height: 1.08 !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-head > p {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-toggle {
    width: 100% !important;
    max-width: 330px !important;
    margin-top: 20px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-toggle button {
    min-width: 0 !important;
    min-height: 39px !important;
    flex: 1 !important;
    padding: 0 9px !important;
    font-size: 10px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-toggle button span {
    display: none !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-single {
    width: 100% !important;
    max-width: 460px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card {
    min-height: 0 !important;
    padding: 20px 17px !important;
    border-radius: 18px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card:hover {
    transform: none !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card .pricing-card-top {
    grid-template-columns: 48px minmax(0,1fr) !important;
    gap: 10px !important;
    min-height: 60px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card .pricing-icon {
    width: 48px !important;
    height: 48px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card .pricing-title-wrap h3 {
    font-size: 17px !important;
    white-space: normal !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card .pricing-title-wrap p {
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card .pricing-price-wrap {
    min-height: 64px !important;
    margin: 18px 0 12px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card .price span {
    font-size: 29px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card .price small {
    font-size: 10px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card .onboard {
    min-height: 50px !important;
    margin-bottom: 15px !important;
    padding: 10px 11px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card .onboard strong,
  body.home-v2.fr-page #pricing .fr-pricing-card .onboard span {
    font-size: 9.5px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card .fr-pricing-list {
    gap: 8px !important;
    margin-bottom: 18px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card .fr-pricing-list li {
    min-height: 19px !important;
    padding-left: 26px !important;
    font-size: 10.5px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card .fr-pricing-list li::before {
    width: 16px !important;
    height: 16px !important;
    background-size: 12px 12px !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card .pricing-cta {
    min-height: 45px !important;
    font-size: 11px !important;
  }

  /* ---------- Final CTA ---------- */
  body.home-v2.fr-page .fr-final-cta {
    padding-top: 64px !important;
    padding-bottom: 68px !important;
  }

  body.home-v2.fr-page .fr-cta-card {
    min-height: 0 !important;
    padding: 26px 17px !important;
    gap: 18px !important;
    border-radius: 19px !important;
  }

  body.home-v2.fr-page .fr-cta-card .ff-kicker {
    margin: 0 auto 13px !important;
  }

  body.home-v2.fr-page .fr-cta-card .ff-cta-copy > p {
    margin: 13px auto 20px !important;
  }

  body.home-v2.fr-page .fr-cta-card .ff-cta-actions {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.home-v2.fr-page .fr-cta-art {
    min-height: 150px !important;
  }

  body.home-v2.fr-page .fr-cta-mock-wrap {
    width: min(100%, 300px) !important;
    animation: none !important;
  }

  body.home-v2.fr-page .fr-cta-mock {
    transform: none !important;
    border-radius: 14px !important;
  }

  /* ---------- Footer ---------- */
  body.home-v2.fr-page .ff-footer {
    padding-top: 46px !important;
  }

  body.home-v2.fr-page .ff-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
  }

  body.home-v2.fr-page .ff-footer-brand,
  body.home-v2.fr-page .ff-footer-subscribe {
    grid-column: 1 / -1 !important;
  }

  body.home-v2.fr-page .ff-footer-brand {
    text-align: center !important;
  }

  body.home-v2.fr-page .ff-footer-socials {
    justify-content: center !important;
  }

  body.home-v2.fr-page .ff-footer-bottom {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }

  /* ---------- Scroll top ---------- */
  body.fr-page .scroll-top {
    right: 14px !important;
    bottom: 16px !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 90 !important;
  }

  /* Disable desktop tilt transforms on touch layouts */
  body.home-v2.fr-page .ff-tilt,
  body.home-v2.fr-page .fr-audience-card,
  body.home-v2.fr-page .ff-bento-card,
  body.home-v2.fr-page .fr-big-card,
  body.home-v2.fr-page .fr-role-card,
  body.home-v2.fr-page .fr-integration-card {
    transform: none !important;
  }
}


/* Extra-small phones */
@media (max-width: 420px) {

  body.home-v2.fr-page .fr-main .ff-shell {
    width: calc(100% - 22px) !important;
  }

  body.home-v2.fr-page .fr-hero {
    padding-top: 94px !important;
  }

  body.home-v2.fr-page .fr-hero .ff-display {
    font-size: clamp(35px, 10.7vw, 43px) !important;
  }

  body.home-v2.fr-page .fr-hero .ff-hero-actions {
    grid-template-columns: 1fr !important;
  }

  body.home-v2.fr-page .fr-hero-composition {
    min-height: 245px !important;
  }

  body.home-v2.fr-page .fr-audience-grid {
    grid-template-columns: 1fr !important;
  }

  body.home-v2.fr-page .fr-audience-card {
    padding: 15px !important;
  }

  body.home-v2.fr-page .fr-role-grid,
  body.home-v2.fr-page .fr-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  body.home-v2.fr-page .fr-integration-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  body.home-v2.fr-page #pricing .fr-pricing-card {
    padding: 18px 15px !important;
  }

  body.home-v2.fr-page .ff-footer-grid {
    grid-template-columns: 1fr !important;
  }

  body.home-v2.fr-page .ff-footer-brand,
  body.home-v2.fr-page .ff-footer-subscribe {
    grid-column: auto !important;
  }
}


/* Touch devices */
@media (hover:none) and (pointer:coarse) {
  body.home-v2.fr-page .fr-pricing-card:hover,
  body.home-v2.fr-page .fr-audience-card:hover,
  body.home-v2.fr-page .ff-bento-card:hover,
  body.home-v2.fr-page .fr-big-card:hover,
  body.home-v2.fr-page .fr-role-card:hover,
  body.home-v2.fr-page .fr-integration-card:hover {
    transform: none !important;
  }
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  body.home-v2.fr-page .fr-hero-rear-panel,
  body.home-v2.fr-page .fr-hero-front-panel,
  body.home-v2.fr-page .fr-scan-beam,
  body.home-v2.fr-page .fr-cta-mock-wrap,
  body.home-v2.fr-page .ff-reveal {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
/* =========================================================
   RETAIL ERP — SUPER ADMIN MOBILE POLISH V2
   Fixes the narrow vertical KPI stack under the dashboard.
   Keep this block LAST in retail-mobile.css.
   ========================================================= */

@media (max-width: 767px) {

  body.home-v2.fr-page .fr-superadmin .ff-section-head {
    margin-bottom: 26px !important;
  }

  body.home-v2.fr-page .fr-superadmin-visual {
    width: 100% !important;
    max-width: 520px !important;
    min-height: 0 !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  body.home-v2.fr-page .fr-superadmin-visual > img {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 0 2px !important;

    border-radius: 15px !important;
    object-fit: contain !important;

    box-shadow:
      0 22px 42px -32px rgba(0,0,0,.95),
      0 16px 34px -30px rgba(101,48,190,.72) !important;
  }

  body.home-v2.fr-page .fr-admin-kpi {
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 72px !important;

    padding: 10px 7px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    border: 1px solid rgba(171,121,252,.18) !important;
    border-radius: 13px !important;

    background:
      linear-gradient(
        160deg,
        rgba(25,17,45,.92),
        rgba(11,8,20,.96)
      ) !important;

    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 14px 26px -22px rgba(0,0,0,.9) !important;

    text-align: center !important;
    overflow: hidden !important;
  }

  body.home-v2.fr-page .fr-admin-kpi span {
    width: 100% !important;

    color: #9f94aa !important;

    font-family: 'Inter', sans-serif !important;
    font-size: 7.5px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;

    white-space: normal !important;
  }

  body.home-v2.fr-page .fr-admin-kpi b {
    width: 100% !important;

    color: #ffffff !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -.025em !important;

    white-space: nowrap !important;
  }

  body.home-v2.fr-page .fr-admin-kpi-1,
  body.home-v2.fr-page .fr-admin-kpi-2,
  body.home-v2.fr-page .fr-admin-kpi-3 {
    inset: auto !important;
  }
}

@media (max-width: 420px) {

  body.home-v2.fr-page .fr-superadmin-visual {
    gap: 7px !important;
  }

  body.home-v2.fr-page .fr-admin-kpi {
    min-height: 68px !important;
    padding: 9px 5px !important;
    border-radius: 12px !important;
  }

  body.home-v2.fr-page .fr-admin-kpi span {
    font-size: 7px !important;
  }

  body.home-v2.fr-page .fr-admin-kpi b {
    font-size: 12px !important;
  }
}

@media (max-width: 350px) {

  body.home-v2.fr-page .fr-superadmin-visual {
    grid-template-columns: 1fr !important;
  }

  body.home-v2.fr-page .fr-superadmin-visual > img {
    grid-column: 1 !important;
  }

  body.home-v2.fr-page .fr-admin-kpi {
    min-height: 58px !important;
  }
}

/* =========================================================
   FULFILIX RETAIL ERP — MOBILE V3 FINAL POLISH
   Keep this block at the VERY END of retail-mobile.css.
   Desktop/tablet above 767px remains untouched.
   ========================================================= */

@media (max-width: 767px) {

  /* ---------------------------------------------------------
     Global mobile rhythm
     --------------------------------------------------------- */
  body.home-v2.fr-page .fr-main .ff-shell {
    width: calc(100% - 24px) !important;
    max-width: 560px !important;
    margin-inline: auto !important;
  }

  body.home-v2.fr-page .fr-main .ff-section {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  /*
     Fewer heading lines:
     remove forced desktop <br> breaks and let mobile rebalance.
  */
  body.home-v2.fr-page .fr-hero .ff-display br,
  body.home-v2.fr-page .fr-main .ff-section-head h2 br,
  body.home-v2.fr-page .fr-main .ff-section-split-head h2 br,
  body.home-v2.fr-page .fr-pos-copy h2 br,
  body.home-v2.fr-page .fr-barcode-copy h2 br,
  body.home-v2.fr-page .fr-variants-copy h2 br,
  body.home-v2.fr-page .fr-branch-copy h2 br,
  body.home-v2.fr-page .fr-purchasing-copy h2 br,
  body.home-v2.fr-page .fr-cta-card .ff-cta-copy h2 br {
    display: none !important;
  }

  body.home-v2.fr-page .fr-main .ff-section-head h2,
  body.home-v2.fr-page .fr-main .ff-section-split-head h2,
  body.home-v2.fr-page .fr-pos-copy h2,
  body.home-v2.fr-page .fr-barcode-copy h2,
  body.home-v2.fr-page .fr-variants-copy h2,
  body.home-v2.fr-page .fr-branch-copy h2,
  body.home-v2.fr-page .fr-purchasing-copy h2,
  body.home-v2.fr-page .fr-cta-card .ff-cta-copy h2 {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(25px, 6.8vw, 30px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body.home-v2.fr-page .fr-main .ff-section-head > p,
  body.home-v2.fr-page .fr-main .ff-section-split-head p,
  body.home-v2.fr-page .fr-pos-copy > p,
  body.home-v2.fr-page .fr-barcode-copy > p,
  body.home-v2.fr-page .fr-variants-copy > p,
  body.home-v2.fr-page .fr-purchasing-copy > p,
  body.home-v2.fr-page .fr-cta-card .ff-cta-copy > p {
    max-width: 455px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
  }

  /* ---------------------------------------------------------
     HERO — 1 compact heading + 2 buttons in one row
     --------------------------------------------------------- */
  body.home-v2.fr-page .fr-hero {
    padding-top: 98px !important;
    padding-bottom: 44px !important;
  }

  body.home-v2.fr-page .fr-hero .ff-display {
    max-width: 430px !important;
    font-size: clamp(28px, 7.3vw, 33px) !important;
    line-height: 1.03 !important;
  }

  body.home-v2.fr-page .fr-hero .ff-display br {
    display: none !important;
  }

  body.home-v2.fr-page .fr-hero .ff-display .fr-gradient-text {
    display: inline !important;
  }

  body.home-v2.fr-page .fr-hero .ff-hero-lead {
    max-width: 450px !important;
    margin-top: 14px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
  }

  body.home-v2.fr-page .fr-hero .ff-hero-actions {
    width: 100% !important;
    max-width: 450px !important;
    margin: 20px auto 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  body.home-v2.fr-page .fr-hero .ff-hero-actions .ff-btn,
  body.home-v2.fr-page .fr-hero .ff-hero-actions .restaurant-signin-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 45px !important;
    padding-inline: 7px !important;
    justify-content: center !important;
    font-size: 9.8px !important;
    white-space: nowrap !important;
  }

  body.home-v2.fr-page .fr-hero .restaurant-signin-btn {
    gap: 5px !important;
  }

  body.home-v2.fr-page .fr-hero .restaurant-signin-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }

  body.home-v2.fr-page .fr-hero .ff-benefit-row {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    max-width: 450px !important;
    gap: 8px !important;
  }

  /* ---------------------------------------------------------
     WHO IT'S FOR — 2 cards per row instead of tall single stack
     --------------------------------------------------------- */
  body.home-v2.fr-page .fr-audience .ff-section-split-head {
    text-align: center !important;
    margin-bottom: 24px !important;
  }

  body.home-v2.fr-page .fr-audience .ff-section-split-head h2 {
    max-width: 390px !important;
  }

  body.home-v2.fr-page .fr-audience-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  body.home-v2.fr-page .fr-audience-card {
    min-width: 0 !important;
    min-height: 132px !important;
    padding: 13px 11px !important;
    border-radius: 14px !important;
  }

  body.home-v2.fr-page .fr-audience-icon {
    width: 34px !important;
    height: 34px !important;
    margin-bottom: 9px !important;
  }

  body.home-v2.fr-page .fr-audience-card h3 {
    font-size: 11px !important;
    line-height: 1.24 !important;
  }

  body.home-v2.fr-page .fr-audience-card p {
    font-size: 8.5px !important;
    line-height: 1.4 !important;
  }

  body.home-v2.fr-page .fr-audience-visual {
    margin-top: 2px !important;
  }

  /* ---------------------------------------------------------
     Core capabilities: full clean width
     --------------------------------------------------------- */
  body.home-v2.fr-page .fr-capabilities .ff-section-head h2 {
    max-width: 405px !important;
  }

  body.home-v2.fr-page .fr-capabilities .ff-bento {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.home-v2.fr-page .fr-capabilities .ff-bento-card,
  body.home-v2.fr-page .fr-capabilities .ff-bento-wide {
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
  }

  /* ---------------------------------------------------------
     Split sections — keep content centered but less tall
     --------------------------------------------------------- */
  body.home-v2.fr-page .fr-pos-layout,
  body.home-v2.fr-page .fr-barcode-layout,
  body.home-v2.fr-page .fr-variants-layout,
  body.home-v2.fr-page .fr-branch-layout,
  body.home-v2.fr-page .fr-purchasing-layout,
  body.home-v2.fr-page .fr-returns-layout,
  body.home-v2.fr-page .fr-reports-layout {
    gap: 20px !important;
  }

  /* ---------------------------------------------------------
     Variant section — fix narrow table/column issue from screenshot
     --------------------------------------------------------- */
  body.home-v2.fr-page .fr-variants-copy {
    width: 100% !important;
    max-width: 500px !important;
  }

  body.home-v2.fr-page .fr-variants-copy h2 {
    max-width: 360px !important;
  }

  body.home-v2.fr-page .fr-variant-table {
    width: 100% !important;
    max-width: 470px !important;
    margin: 16px auto 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  body.home-v2.fr-page .fr-variant-row {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 13px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 62px !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 9px !important;
  }

  body.home-v2.fr-page .fr-variant-row > span:first-child {
    text-align: left !important;
    min-width: 0 !important;
  }

  body.home-v2.fr-page .fr-variant-row > span:last-child {
    text-align: right !important;
  }

  body.home-v2.fr-page .fr-variants-visual {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
  }

  body.home-v2.fr-page .fr-variants-visual img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* ---------------------------------------------------------
     Return/Loyalty/roles/report cards
     --------------------------------------------------------- */
  body.home-v2.fr-page .fr-returns-cards,
  body.home-v2.fr-page .fr-loyalty-grid,
  body.home-v2.fr-page .fr-role-grid,
  body.home-v2.fr-page .fr-kpi-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  body.home-v2.fr-page .fr-big-card {
    min-width: 0 !important;
    padding: 15px !important;
  }

  body.home-v2.fr-page .fr-big-card h3 {
    font-size: 14px !important;
  }

  /* ---------------------------------------------------------
     Integrations stay compact 2/3-up
     --------------------------------------------------------- */
  body.home-v2.fr-page .fr-integration-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 7px !important;
  }

  /* ---------------------------------------------------------
     Final CTA — 2-line heading + two buttons left/right
     --------------------------------------------------------- */
  body.home-v2.fr-page .fr-final-cta {
    padding-top: 58px !important;
    padding-bottom: 62px !important;
  }

  body.home-v2.fr-page .fr-cta-card {
    padding: 24px 15px !important;
    gap: 15px !important;
  }

  body.home-v2.fr-page .fr-cta-card .ff-cta-copy h2 {
    max-width: 390px !important;
    font-size: clamp(25px, 6.7vw, 29px) !important;
    line-height: 1.05 !important;
  }

  body.home-v2.fr-page .fr-cta-card .ff-cta-copy h2 br {
    display: none !important;
  }

  body.home-v2.fr-page .fr-cta-card .ff-cta-actions {
    width: 100% !important;
    max-width: 440px !important;
    margin: 18px auto 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  body.home-v2.fr-page .fr-cta-card .ff-cta-actions .ff-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 45px !important;
    padding-inline: 7px !important;
    font-size: 9.7px !important;
    white-space: nowrap !important;
  }

  body.home-v2.fr-page .fr-cta-art {
    min-height: 132px !important;
  }

  body.home-v2.fr-page .fr-cta-mock-wrap {
    width: min(100%, 320px) !important;
  }
}


/* =========================================================
   SMALL PHONES — preserve paired layout
   ========================================================= */
@media (max-width: 420px) {

  body.home-v2.fr-page .fr-main .ff-shell {
    width: calc(100% - 20px) !important;
  }

  body.home-v2.fr-page .fr-hero .ff-display {
    font-size: clamp(26px, 7vw, 29px) !important;
  }

  /* Override older V2 rules that stacked these */
  body.home-v2.fr-page .fr-hero .ff-hero-actions,
  body.home-v2.fr-page .fr-cta-card .ff-cta-actions {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px !important;
  }

  body.home-v2.fr-page .fr-hero .ff-hero-actions .ff-btn,
  body.home-v2.fr-page .fr-hero .ff-hero-actions .restaurant-signin-btn,
  body.home-v2.fr-page .fr-cta-card .ff-cta-actions .ff-btn {
    min-height: 43px !important;
    padding-inline: 5px !important;
    font-size: 8.7px !important;
  }

  /* Override older V2 one-column audience */
  body.home-v2.fr-page .fr-audience-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  body.home-v2.fr-page .fr-audience-card {
    min-height: 124px !important;
    padding: 12px 9px !important;
  }

  body.home-v2.fr-page .fr-audience-card h3 {
    font-size: 10.3px !important;
  }

  body.home-v2.fr-page .fr-audience-card p {
    font-size: 8px !important;
  }

  body.home-v2.fr-page .fr-main .ff-section-head h2,
  body.home-v2.fr-page .fr-main .ff-section-split-head h2,
  body.home-v2.fr-page .fr-pos-copy h2,
  body.home-v2.fr-page .fr-barcode-copy h2,
  body.home-v2.fr-page .fr-variants-copy h2,
  body.home-v2.fr-page .fr-branch-copy h2,
  body.home-v2.fr-page .fr-purchasing-copy h2,
  body.home-v2.fr-page .fr-cta-card .ff-cta-copy h2 {
    font-size: clamp(23px, 6.35vw, 27px) !important;
  }

  body.home-v2.fr-page .fr-returns-cards,
  body.home-v2.fr-page .fr-loyalty-grid,
  body.home-v2.fr-page .fr-role-grid,
  body.home-v2.fr-page .fr-kpi-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  body.home-v2.fr-page .fr-integration-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}


@media (max-width: 350px) {
  body.home-v2.fr-page .fr-hero .ff-display {
    font-size: 24px !important;
  }

  body.home-v2.fr-page .fr-hero .ff-hero-actions .ff-btn,
  body.home-v2.fr-page .fr-hero .ff-hero-actions .restaurant-signin-btn,
  body.home-v2.fr-page .fr-cta-card .ff-cta-actions .ff-btn {
    font-size: 8px !important;
  }
}