/* ============================================================
   Brijcode — Loyalty page responsive
   ============================================================ */

@media (max-width: 1199px) {
  .loyalty-hero-media {
    width: min(58%, 760px);
  }

  .loyalty-float-card--reward {
    right: min(12%, 160px);
  }

  .loyalty-sync-badge {
    right: min(14%, 180px);
  }

  .consumer-ecosystem-section .consumer-ecosystem-stage {
    width: min(100% - 28px, 1040px);
    max-width: 1040px;
    height: clamp(420px, 48vw, 540px);
  }

  .consumer-ecosystem-section .ecosystem-phone {
    max-width: 520px;
  }
}

@media (max-width: 991px) {
  .loyalty-hero {
    min-height: auto;
    display: block;
  }

  .loyalty-hero-media {
    position: relative;
    width: 100%;
    height: min(52vh, 420px);
    right: auto;
    bottom: auto;
  }

  .loyalty-hero-shade {
    position: absolute;
    inset: 0;
    height: min(52vh, 420px);
    background: linear-gradient(
      180deg,
      rgba(10, 24, 38, 0.35) 0%,
      rgba(10, 24, 38, 0.15) 40%,
      var(--loyalty-navy-deep) 100%
    );
  }

  .loyalty-hero-grid {
    display: none;
  }

  .loyalty-hero-container {
    padding-top: 28px;
    padding-bottom: 56px;
    margin-top: -48px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      var(--loyalty-navy-deep) 12%,
      var(--loyalty-navy) 100%
    );
  }

  .loyalty-hero-copy {
    max-width: none;
  }

  .loyalty-hero-signals {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: min(52vh, 420px);
  }

  .loyalty-float-card--survey {
    top: auto;
    bottom: 18%;
    left: 16px;
    right: auto;
  }

  .loyalty-float-card--reward {
    top: 18%;
    bottom: auto;
    right: 16px;
  }

  .loyalty-sync-badge {
    top: 14%;
    right: auto;
    left: 16px;
  }

  /* Tablet — same collage geometry, scaled phones */
  .consumer-ecosystem-section {
    padding-top: 56px;
  }

  .consumer-ecosystem-section .consumer-ecosystem-stage {
    width: min(100% - 24px, 860px);
    max-width: 860px;
    height: clamp(380px, 52vw, 480px);
  }

  .consumer-ecosystem-section .ecosystem-phone {
    max-width: 420px;
    transform: rotate(43deg);
  }
}

@media (max-width: 767px) {
  html.loyalty-page-root,
  .loyalty-page {
    overflow-x: clip;
  }

  /* Hero — hide floating cards on mobile */
  .loyalty-float-card--survey,
  .loyalty-float-card--reward {
    display: none !important;
  }

  .loyalty-hero-media {
    height: min(46vh, 340px);
  }

  .loyalty-hero-shade {
    height: min(46vh, 340px);
  }

  .loyalty-hero-signals {
    height: min(46vh, 340px);
  }

  .loyalty-hero-container {
    padding-top: 20px;
    padding-bottom: 48px;
    margin-top: -40px;
  }

  .loyalty-hero-title {
    font-size: clamp(1.85rem, 7vw, 2.35rem);
  }

  .loyalty-hero-lede {
    font-size: 0.95rem;
  }

  /* Hero journey strip — wrap so step 4 stays visible */
  .loyalty-hero-flow {
    overflow: visible;
    margin-bottom: 22px;
  }

  .loyalty-flow-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 8px 10px;
    padding: 12px 14px;
    border-radius: 16px;
  }

  .loyalty-flow-arrow {
    display: none;
  }

  .loyalty-flow-step {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
    max-width: calc(50% - 5px);
    font-size: 0.7rem;
    white-space: normal;
    line-height: 1.25;
  }

  .loyalty-flow-step i {
    flex-shrink: 0;
  }

  .loyalty-hero-ctas {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .loyalty-hero-ctas .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 0.72em 0.85em;
    font-size: clamp(0.72rem, 3.2vw, 0.88rem);
    white-space: nowrap;
  }

  .loyalty-hero-ctas .btn .ico {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .loyalty-sync-badge {
    top: auto;
    bottom: 14%;
    left: 16px;
    right: auto;
  }

  .loyalty-hero-trust {
    gap: 1rem 1.5rem;
  }

  /* Ecosystem — single collage instead of absolute phones */
  .consumer-ecosystem-section {
    padding: 40px 0 8px;
  }

  .consumer-ecosystem-section .consumer-ecosystem-intro {
    margin-bottom: 12px;
    padding: 0 16px;
  }

  .consumer-ecosystem-section .ecosystem-title {
    font-size: clamp(1.4rem, 5.8vw, 1.85rem);
  }

  .consumer-ecosystem-section .ecosystem-desc {
    font-size: 0.9rem;
  }

  .consumer-ecosystem-section .ecosystem-grid {
    opacity: 1;
  }

  .consumer-ecosystem-section .consumer-ecosystem-stage {
    width: min(100% - 24px, 420px);
    max-width: 420px;
    height: auto;
    min-height: 0;
    margin: 0 auto 8px;
    overflow: visible;
  }

  .consumer-ecosystem-section .ecosystem-phone,
  .consumer-ecosystem-section .ecosystem-chips {
    display: none !important;
  }

  .consumer-ecosystem-section .ecosystem-collage {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  .consumer-ecosystem-section .ecosystem-collage img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
  }

  /* Command center — center bridge copy */
  .section-command-center {
    padding: 36px 0 48px;
  }

  .section-command-center .command-center-intro {
    width: min(100% - 32px, 100%);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
    padding: 0 12px;
    text-align: center;
  }

  .section-command-center .command-center-title {
    font-size: clamp(1.45rem, 6.2vw, 1.9rem);
    text-align: center;
  }

  .section-command-center .command-center-desc {
    font-size: 0.9rem;
    max-width: 32em;
    margin-left: auto;
    margin-right: auto;
    padding: 0 4px;
    text-align: center;
  }

  .section-command-center .command-center-visual {
    width: min(100% - 16px, 400px);
    height: auto;
    min-height: 0;
    margin-bottom: 8px;
    padding-bottom: 8px;
    overflow: visible;
  }

  .section-command-center .command-dashboard-secondary {
    position: relative;
    width: 88%;
    left: auto;
    top: auto;
    margin: 0 auto -22%;
    z-index: 2;
    transform: rotate(-2deg) scale(0.94);
    opacity: 0.8;
    filter: saturate(0.9) brightness(0.93);
  }

  .section-command-center .command-dashboard-main {
    position: relative;
    width: 94%;
    left: auto;
    right: auto;
    top: auto;
    margin: 0 auto 0;
    z-index: 5;
    transform: rotate(1.4deg) scale(1);
  }

  .section-command-center .command-metrics {
    position: relative;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 8px;
    min-height: 0;
  }

  .section-command-center .command-metric {
    position: static;
    opacity: 1;
  }

  .section-command-center .command-metric--outlets,
  .section-command-center .command-metric--rewards {
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }

  .section-command-center .command-metric--rate,
  .section-command-center .command-metric--points {
    display: none;
  }

  .section-command-center .command-flow {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 0 auto 4px;
    max-width: calc(100% - 12px);
    width: max-content;
  }

  .section-command-center .command-center-bridge {
    margin: 8px auto 16px;
    text-align: center;
    width: min(100% - 32px, 520px);
  }

  .section-command-center .command-center-bridge p {
    font-size: 0.92rem;
    text-align: center;
  }

  .section-command-center .dashboard-marquee {
    overflow: hidden;
    touch-action: pan-y;
    padding: 0;
    mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  }

  .section-command-center .dashboard-marquee-track {
    animation: commandMarquee 36s linear infinite;
    padding-bottom: 4px;
  }

  .section-command-center .dashboard-marquee-item {
    width: min(68vw, 240px);
  }

  /* CTA — overlap footer like desktop (no extra page scroll gap) */
  .loyalty-cta {
    padding: 28px 0 0;
    overflow-x: clip;
    overflow-y: visible;
  }

  .loyalty-cta__inner {
    display: block;
    min-height: 0;
    margin-bottom: -64px;
    overflow: visible;
  }

  .loyalty-cta__content {
    position: relative;
    z-index: 3;
    max-width: none;
    width: 100%;
    padding: 28px 22px 36px;
  }

  .loyalty-cta__title {
    max-width: 18ch;
    font-size: clamp(1.4rem, 6vw, 1.75rem);
  }

  .loyalty-cta__description {
    max-width: none;
    margin-bottom: 20px;
  }

  .loyalty-cta__visual {
    position: absolute;
    right: -12%;
    bottom: -8%;
    width: min(58%, 240px);
    z-index: 1;
    opacity: 0.9;
  }

  .loyalty-cta__arrow,
  .loyalty-cta.is-revealed .loyalty-cta__arrow {
    transform: rotate(-14deg) scale(1);
    max-width: 240px;
  }

  .loyalty-cta.is-revealed .loyalty-cta__arrow {
    animation-name: loyaltyCtaArrowFloatMobile;
  }

  .loyalty-page .site-footer {
    padding: 5.5rem 0 1.75rem;
  }
}

@media (max-width: 575px) {
  .loyalty-flow-track {
    padding: 10px 12px;
    gap: 8px;
  }

  .loyalty-flow-step {
    flex: 1 1 calc(50% - 8px);
    max-width: calc(50% - 4px);
    font-size: 0.66rem;
    gap: 6px;
  }

  .loyalty-flow-step i {
    width: 18px;
    height: 18px;
    font-size: 0.58rem;
  }

  .loyalty-sync-badge {
    font-size: 0.6rem;
    padding: 5px 10px;
  }
}

@media (max-width: 480px) {
  .loyalty-hero-title {
    font-size: 1.72rem;
  }

  .loyalty-hero-media {
    height: 38vh;
  }

  .loyalty-hero-shade,
  .loyalty-hero-signals {
    height: 38vh;
  }
}

/* ============================================================
   SECTION 3 · Command Center — responsive
   ============================================================ */

@media (max-width: 1199px) {
  .section-command-center .command-center-visual {
    width: min(100% - 24px, 920px);
    height: clamp(360px, 48vw, 460px);
  }

  .section-command-center .command-dashboard-secondary {
    width: min(56%, 520px);
    transform: translate3d(-2%, 0, 0) rotate(-3deg) scale(0.88);
  }

  .section-command-center .command-dashboard-main {
    width: min(70%, 680px);
    right: 0;
    transform: rotate(1.8deg) scale(1.01);
  }

  .section-command-center .dashboard-marquee-item {
    width: clamp(180px, 22vw, 240px);
  }
}

@media (max-width: 991px) {
  .section-command-center {
    padding: 40px 0 68px;
  }

  .section-command-center .command-center-intro {
    margin-bottom: 14px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    text-align: center;
  }

  .section-command-center .command-center-title {
    text-align: center;
  }

  .section-command-center .command-center-desc {
    max-width: 36em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .section-command-center .command-center-visual {
    width: min(100% - 20px, 700px);
    height: clamp(380px, 62vw, 480px);
    margin-bottom: 10px;
  }

  .section-command-center .command-dashboard-secondary {
    width: min(74%, 480px);
    left: 0;
    top: 0;
    transform: rotate(-2.4deg) scale(0.88);
    opacity: 0.8;
  }

  .section-command-center .command-dashboard-main {
    width: min(84%, 540px);
    right: 0;
    top: 24%;
    transform: rotate(1.6deg) scale(1.02);
  }

  .section-command-center .command-metric--points {
    display: none;
  }

  .section-command-center .command-flow {
    bottom: 3%;
    gap: 6px;
    padding: 7px 12px;
    max-width: calc(100% - 16px);
  }

  .section-command-center .command-flow-step {
    font-size: 0.58rem;
  }

  .section-command-center .command-flow-line {
    width: 14px;
  }

  .section-command-center .command-center-bridge {
    margin: 12px auto 14px;
    text-align: center;
    width: min(100% - 40px, 520px);
  }

  .section-command-center .command-center-bridge p {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .section-command-center {
    padding: 36px 0 60px;
  }

  .section-command-center .command-center-intro {
    width: min(100% - 32px, 100%);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
    padding: 0 12px;
    text-align: center;
  }

  .section-command-center .command-center-title {
    font-size: clamp(1.45rem, 6.2vw, 1.9rem);
    text-align: center;
  }

  .section-command-center .command-center-desc {
    font-size: 0.9rem;
    max-width: 32em;
    margin-left: auto;
    margin-right: auto;
    padding: 0 4px;
    text-align: center;
  }

  .section-command-center .command-center-visual {
    width: min(100% - 16px, 400px);
    height: auto;
    min-height: 0;
    margin-bottom: 8px;
    padding-bottom: 8px;
    overflow: visible;
  }

  /* Mobile: stack dashboards — no fixed stage height */
  .section-command-center .command-dashboard-secondary {
    position: relative;
    width: 88%;
    left: auto;
    top: auto;
    margin: 0 auto -22%;
    z-index: 2;
    transform: rotate(-2deg) scale(0.94);
    opacity: 0.8;
    filter: saturate(0.9) brightness(0.93);
  }

  .section-command-center .command-dashboard-main {
    position: relative;
    width: 94%;
    left: auto;
    right: auto;
    top: auto;
    margin: 0 auto 0;
    z-index: 5;
    transform: rotate(1.4deg) scale(1);
  }

  .section-command-center .command-metrics {
    position: relative;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 8px;
    min-height: 0;
  }

  .section-command-center .command-metric {
    position: static;
    opacity: 1;
  }

  .section-command-center .command-metric--outlets,
  .section-command-center .command-metric--rewards {
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }

  .section-command-center .command-metric--rate,
  .section-command-center .command-metric--points {
    display: none;
  }

  .section-command-center .command-flow {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 0 auto 4px;
    max-width: calc(100% - 12px);
    width: max-content;
  }

  .section-command-center .command-center-bridge {
    margin: 8px auto 16px;
    text-align: center;
    width: min(100% - 32px, 520px);
  }

  .section-command-center .command-center-bridge p,
  .section-command-center .command-center-bridge span {
    font-size: 0.92rem;
    text-align: center;
  }

  /* Keep CSS marquee; no page-level horizontal scroll */
  .section-command-center .dashboard-marquee {
    overflow: hidden;
    touch-action: pan-y;
    padding: 0;
    mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  }

  .section-command-center .dashboard-marquee-track {
    animation: commandMarquee 36s linear infinite;
    padding-bottom: 4px;
  }

  .section-command-center .dashboard-marquee-item {
    width: min(68vw, 240px);
  }
}

@media (max-width: 575px) {
  .section-command-center .command-center-visual {
    height: auto;
    width: min(100% - 12px, 100%);
  }

  .section-command-center .command-metric {
    padding: 7px 10px;
    max-width: 150px;
  }

  .section-command-center .command-metric strong {
    font-size: 0.8rem;
  }

  .section-command-center .command-metric span:last-child {
    font-size: 0.62rem;
  }

  .section-command-center .command-flow-step {
    font-size: 0.54rem;
    letter-spacing: 0.04em;
  }
}

/* ============================================================
   FINAL CTA — responsive
   ============================================================ */

@media (max-width: 991px) {
  .loyalty-cta {
    padding: 36px 0 24px;
  }

  .loyalty-cta__inner {
    min-height: 300px;
  }

  .loyalty-cta__content {
    max-width: 52%;
    padding: 36px 20px 36px 32px;
  }

  .loyalty-cta__title {
    max-width: 16ch;
  }

  .loyalty-cta__visual {
    width: min(48%, 340px);
    right: -6%;
    bottom: -16%;
  }
}

@media (max-width: 767px) {
  .loyalty-cta {
    padding: 28px 0 0;
    overflow-x: clip;
    overflow-y: visible;
  }

  .loyalty-cta__inner {
    display: block;
    min-height: 0;
    margin-bottom: -64px;
    overflow: visible;
  }

  .loyalty-cta__content {
    position: relative;
    z-index: 3;
    max-width: none;
    width: 100%;
    padding: 28px 22px 36px;
  }

  .loyalty-cta__title {
    max-width: 18ch;
    font-size: clamp(1.4rem, 6vw, 1.75rem);
  }

  .loyalty-cta__description {
    max-width: none;
    margin-bottom: 20px;
  }

  .loyalty-cta__visual {
    position: absolute;
    right: -12%;
    bottom: -8%;
    width: min(58%, 240px);
    z-index: 1;
    opacity: 0.9;
  }

  .loyalty-cta__arrow,
  .loyalty-cta.is-revealed .loyalty-cta__arrow {
    transform: rotate(-14deg) scale(1);
    max-width: 240px;
  }

  .loyalty-cta.is-revealed .loyalty-cta__arrow {
    animation-name: loyaltyCtaArrowFloatMobile;
  }

  .loyalty-page .site-footer {
    padding: 5.5rem 0 1.75rem;
  }
}

@keyframes loyaltyCtaArrowFloatMobile {
  0%, 100% {
    transform: rotate(-14deg) translateY(0) scale(1);
  }
  50% {
    transform: rotate(-12.5deg) translateY(-6px) scale(1);
  }
}

@media (max-width: 575px) {
  .loyalty-cta__content {
    padding: 24px 18px 32px;
  }

  .loyalty-cta__button {
    width: 100%;
  }

  .loyalty-cta__visual {
    width: 48%;
    right: -10%;
    bottom: -6%;
  }
}