@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr); gap: 42px; }
  .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .command-grid { grid-template-columns: 1fr 1fr; grid-template-areas: 'feature feature' 'metrics shortlist' 'community shortlist'; }
  .feature-console { min-height: 540px; }
  /* .welcome-visual { min-height: 340px; }   */
}

@media (max-width: 960px) {
  :root { --header-height: 74px; --section-space: clamp(40px, 10vw, 108px); }
  .desktop-nav, .header-join { display: none; }
  .mobile-menu-button { display: block; }
  .brand-lockup img { width: 170px; }
  .hero { min-height: auto; padding-top: calc(var(--header-height) + 70px); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 780px; }
  .neural-stage { min-height: 600px; }
  .hero-stat-rail { grid-template-columns: repeat(2, 1fr); }
  .section-heading { grid-template-columns: 1fr; gap: 20px; }
  .matchmaker-shell { grid-template-columns: 1fr; }
  .match-results { min-height: auto; }
  .match-empty { min-height: 360px; }
  .atlas-toolbar { top: 78px; grid-template-columns: 1fr 1fr; }
  .search-field { grid-column: 1 / -1; }
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal-layout { grid-template-columns: 1fr; grid-template-areas: 'story' 'performance' 'rank' 'benefits'; }
  .community-layout { grid-template-columns: 1fr; }
  .community-copy { max-width: 760px; }
  .footer-grid { grid-template-columns: 1fr; gap: 46px; }
  .brand-dialog-layout { grid-template-columns: 1fr; }
  .brand-dialog-visual { min-height: 420px; }
  /* .welcome-dialog[open] { grid-template-columns: 1fr; } */
  /* .welcome-visual { min-height: 340px; } */
}

@media (max-width: 760px) {
  :root { --gutter: 16px; --cut: 18px; }
  h1 { font-size: clamp(3.2rem, 15vw, 5.2rem); }
  h2 { font-size: clamp(2.2rem, 10vw, 3.7rem); }
  .site-header, .site-header.is-scrolled { height: var(--header-height); }
  .header-inner { gap: 10px; }
  .brand-lockup img { width: 148px; }
  .header-actions .icon-button:nth-child(2) { display: none; }
  .hero { padding-bottom: 24px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; }
  .hero-trust { display: grid; gap: 10px; }
  .neural-stage { min-height: 500px; border-radius: 26px; }
  .neural-stage::before { inset: 14px; border-radius: 18px; }
  .neural-stage-topline { top: 21px; left: 22px; right: 22px; }
  .neural-corner { bottom: 22px; }
  .neural-corner-left { left: 22px; }
  .neural-corner-right { right: 22px; }
  .neural-instruction { display: none; }
  .hero-stat-rail { grid-template-columns: 1fr 1fr; margin-top: 24px; }
  .hero-stat { min-height: 96px; padding: 16px; }
  .activity-rail { grid-template-columns: 1fr; }
  .activity-label { min-height: 40px; box-shadow: none; border-bottom: 1px solid var(--line); }
  .activity-window { min-height: 44px; }
  .command-grid { grid-template-columns: 1fr; grid-template-areas: 'feature' 'metrics' 'shortlist' 'community'; }
  .feature-console { min-height: 560px; padding: 24px; }
  .feature-brand-line { align-items: flex-end; }
  .feature-logo { width: 82px; height: 82px; }
  .feature-watermark { width: 92%; right: -20%; }
  .metric-console, .shortlist-console, .community-console { padding: 22px; }
  .matchmaker-actions { align-items: flex-start; flex-direction: column; }
  .matchmaker-actions .button { width: 100%; }
  .priority-grid { gap: 8px; }
  .priority-chip { padding: 11px 13px; font-size: .68rem; }
  .match-results { padding: 20px; }
  .match-result { grid-template-columns: 62px 1fr auto; padding: 13px; }
  .match-result-logo { width: 62px; height: 52px; }
  .atlas-toolbar { position: relative; top: auto; grid-template-columns: 1fr; }
  .search-field { grid-column: auto; }
  .select-field { justify-content: space-between; }
  .toolbar-toggle { min-height: 48px; }
  .atlas-status { align-items: flex-start; flex-direction: column; gap: 5px; }
  .brand-grid { grid-template-columns: 1fr; }
  .brand-card { min-height: 360px; }
  .brand-logo-wrap { height: 112px; }
  .signal-bullets { grid-template-columns: 1fr; }
  .community-section { padding-block: 88px; }
  .footer-links { gap: 22px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .compare-dock { grid-template-columns: 1fr auto auto; bottom: 10px; padding: 10px 12px; }
  .compare-chips { grid-column: 1 / -1; grid-row: 1; }
  .compare-dock > div:first-child { grid-row: 2; }
  .compare-dock .button { grid-row: 2; }
  .compare-dock > .icon-button { grid-row: 2; }
  .back-to-top { right: 14px; bottom: 14px; }
  .toast-stack { right: 16px; bottom: 68px; }
  .modal { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 20px; }
  .modal-heading { padding: 54px 22px 16px; }
  .brand-dialog-visual { min-height: 320px; padding: 32px; }
  .brand-dialog-logo { width: 210px; }
  .brand-dialog-body { padding: 30px 22px; }
  .dialog-meta { grid-template-columns: 1fr; }
  .compare-table-wrap { padding: 8px 20px 28px; }
  .welcome-visual { min-height: 280px; }
  .welcome-copy { padding: 30px 22px; }
  .welcome-actions { align-items: flex-start; flex-direction: column; }
  .welcome-actions .button { width: 100%; }
}

@media (max-width: 520px) {
  .hero-stat-rail { grid-template-columns: 1fr; }
  .hero-stat { min-height: 88px; }
  .neural-stage { min-height: 420px; }
  .neural-corner-right { display: none; }
  .feature-console { min-height: 520px; }
  .feature-brand-line { align-items: flex-start; flex-direction: column; }
  .feature-console h3 { font-size: 2.7rem; }
  .metric-matrix { grid-template-columns: 1fr; }
  .shortlist-item { grid-template-columns: 54px 1fr; }
  .shortlist-rank { display: none; }
  .match-result { grid-template-columns: 52px 1fr; }
  .match-score { grid-column: 2; width: auto; height: auto; justify-self: start; padding: 5px 9px; border-radius: 999px; }
  .performance-grid { grid-template-columns: 1fr; }
  .social-card { grid-template-columns: 46px 1fr auto; }
  .social-symbol { width: 46px; height: 46px; }
  .footer-links { grid-template-columns: 1fr; }
  .header-actions .search-trigger { display: none; }
  .brand-lockup img { width: 142px; }
  .brand-card-actions { grid-template-columns: 1fr auto; }
  .brand-card-actions .visit-button { grid-column: 1 / -1; }
}

@media (hover: none), (pointer: coarse) {
  .cursor-aura { display: none; }
  .brand-card:hover, .match-result:hover, .button:hover, .shortlist-item:hover, .social-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal-block { opacity: 1; transform: none; }
}




/* =====================================================
   MOBILE-FIRST SQUARE WELCOME POPUP
   ===================================================== */

#welcomeDialog.welcome-dialog {
  position: relative;
  width: min(520px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;

  border: 1px solid rgba(255, 70, 78, 0.34);
  border-radius: 22px;

  color: var(--ink);
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255, 65, 77, 0.16),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(30, 9, 13, 0.99),
      rgba(10, 6, 8, 0.99)
    );

  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.78),
    0 0 70px rgba(255, 55, 75, 0.14);
}

/* Override the old desktop two-column layout */
#welcomeDialog.welcome-dialog[open] {
  display: block;
}

/* Square banner stage */
#welcomeDialog .welcome-visual {
  position: relative;

  width: 100%;
  height: min(
    calc(100vw - 44px),
    52dvh,
    520px
  );

  min-height: 0 !important;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255, 58, 73, 0.18),
      transparent 62%
    ),
    #080506;
}

/* Subtle border around the square artwork */
#welcomeDialog .welcome-visual::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 3;

  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      transparent 30%,
      transparent 75%,
      rgba(5, 3, 4, 0.2)
    );

  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.18);
}

/* Each square banner */
#welcomeDialog .welcome-slide {
  position: absolute;
  inset: 12px;
  z-index: 1;

  display: block;

  width: calc(100% - 24px);
  height: calc(100% - 24px);

  padding: 0;
  overflow: hidden;

  border: 0;
  border-radius: 18px;

  background: #080506;
  cursor: pointer;

  opacity: 0;
  pointer-events: none;
  transform: scale(0.985);

  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(.16, 1, .3, 1);
}

#welcomeDialog .welcome-slide.is-active {
  z-index: 2;

  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* Override the old absolute image styling */
#welcomeDialog .welcome-slide img {
  position: static;
  inset: auto;

  display: block;

  width: 100%;
  height: 100%;

  padding: 0;

  border-radius: inherit;

  object-fit: contain;
  object-position: center;

  opacity: 1;
  transform: none !important;
  transition: none;
}

/* Previous and next arrows */
#welcomeDialog .welcome-arrow {
  position: absolute;
  top: 50%;
  z-index: 6;

  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;

  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;

  color: #fff;
  background: rgba(10, 5, 7, 0.76);
  backdrop-filter: blur(10px);

  font-family: Arial, sans-serif;
  font-size: 25px;
  line-height: 1;

  cursor: pointer;
  transform: translateY(-50%);

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

#welcomeDialog .welcome-arrow:hover {
  border-color: rgba(255, 86, 95, 0.75);
  background: rgba(211, 32, 47, 0.92);
  transform: translateY(-50%) scale(1.06);
}

#welcomeDialog .welcome-arrow-prev {
  left: 20px;
}

#welcomeDialog .welcome-arrow-next {
  right: 20px;
}

/* Smaller close button */
#welcomeDialog > .modal-close {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 20;

  float: none;

  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;

  margin: 0;
  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;

  color: #fff;
  background: rgba(7, 4, 6, 0.78);
  backdrop-filter: blur(10px);

  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

#welcomeDialog > .modal-close:hover {
  border-color: rgba(255, 91, 101, 0.8);
  background: rgba(210, 31, 48, 0.95);
  transform: scale(1.06);
}

/* Copy beneath the banner */
#welcomeDialog .welcome-copy {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  padding: 20px 22px 24px;

  text-align: center;
}

#welcomeDialog .welcome-copy .section-kicker {
  color: var(--coral);
}

#welcomeDialog .welcome-copy h2 {
  max-width: 420px;

  margin: 9px 0 9px;

  font-size: clamp(1.65rem, 7vw, 2.25rem);
  line-height: 1.04;
}

#welcomeDialog .welcome-copy p {
  max-width: 410px;

  margin: 0;

  color: var(--muted);

  font-size: 0.88rem;
  line-height: 1.55;
}

/* CTA like the supplied reference */
#welcomeDialog .welcome-actions {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;

  gap: 9px;
  margin-top: 17px;
}

#welcomeDialog .welcome-actions .button {
  width: 100%;
  min-height: 48px;

  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      #d81f35,
      #ff4653
    );

  box-shadow:
    0 10px 28px rgba(216, 31, 53, 0.3);
}

#welcomeDialog .welcome-actions .button:hover {
  box-shadow:
    0 13px 35px rgba(216, 31, 53, 0.42);
}

#welcomeDialog .welcome-actions .text-button {
  min-height: 30px;
  padding: 4px 10px;

  color: var(--muted);
  font-size: 0.72rem;
}

/* Slide indicators */
#welcomeDialog .welcome-dots {
  display: flex;
  justify-content: center;

  gap: 7px;
  margin-top: 13px;
}

#welcomeDialog .welcome-dot {
  width: 7px;
  height: 7px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.18);

  transition:
    width 0.25s ease,
    background 0.25s ease;
}

#welcomeDialog .welcome-dot.is-active {
  width: 24px;
  border-radius: 999px;
  background: var(--gradient-brand);
}

/* Smaller phones */
@media (max-width: 420px) {
  #welcomeDialog.welcome-dialog {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 18px;
  }

  #welcomeDialog .welcome-visual {
    height: min(
      calc(100vw - 28px),
      49dvh,
      390px
    );
  }

  #welcomeDialog .welcome-slide {
    inset: 8px;

    width: calc(100% - 16px);
    height: calc(100% - 16px);

    border-radius: 14px;
  }

  #welcomeDialog .welcome-visual::after {
    inset: 8px;
    border-radius: 14px;
  }

  #welcomeDialog .welcome-copy {
    padding: 16px 16px 18px;
  }

  #welcomeDialog .welcome-copy h2 {
    margin: 7px 0;
    font-size: 1.55rem;
  }

  #welcomeDialog .welcome-copy p {
    font-size: 0.81rem;
    line-height: 1.45;
  }

  #welcomeDialog .welcome-actions {
    margin-top: 13px;
  }

  #welcomeDialog .welcome-actions .button {
    min-height: 44px;
  }

  #welcomeDialog .welcome-arrow {
    width: 30px;
    height: 30px;
    font-size: 22px;
  }

  #welcomeDialog .welcome-arrow-prev {
    left: 14px;
  }

  #welcomeDialog .welcome-arrow-next {
    right: 14px;
  }

  #welcomeDialog > .modal-close {
    top: 7px;
    right: 7px;

    width: 28px;
    height: 28px;

    font-size: 16px;
  }
}



/* =====================================================
   MOBILE BRAND GRID — ALWAYS TWO CARDS
   ===================================================== */

@media (max-width: 760px) {
  #brandGrid.brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  #brandGrid .brand-card {
    min-width: 0;
    min-height: 318px;
    padding: 10px;
    border-radius: 16px;
  }

  #brandGrid .brand-card-top {
    display: block;
  }

  #brandGrid .favourite-button {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;

    width: 28px;
    height: 28px;

    background: rgba(8, 5, 7, 0.82);
    backdrop-filter: blur(8px);
  }

  #brandGrid .brand-logo-wrap {
    height: 76px;
    margin-bottom: 10px;
    border-radius: 12px;
  }

  #brandGrid .brand-logo-wrap img {
    padding: 8px;
  }

  #brandGrid .brand-meta-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 7px;
  }

  #brandGrid .brand-category {
    font-size: 0.48rem;
  }

  #brandGrid .badge {
    max-width: 100%;
    padding: 3px 6px;
    overflow: hidden;

    font-size: 0.44rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #brandGrid .brand-title {
    margin-bottom: 7px;

    font-size: 0.88rem;
    line-height: 1.15;

    overflow-wrap: anywhere;
  }

  #brandGrid .brand-tags {
    min-height: 20px;
    margin-bottom: 9px;
    gap: 4px;
  }

  #brandGrid .brand-tags span {
    max-width: 100%;
    padding: 3px 5px;
    overflow: hidden;

    font-size: 0.48rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Keep only the first tag on narrow cards */
  #brandGrid .brand-tags span:nth-child(n + 2) {
    display: none;
  }

  #brandGrid .brand-perks {
    gap: 5px;
    margin-bottom: 10px;
  }

  #brandGrid .brand-perks li {
    gap: 5px;

    font-size: 0.57rem;
    line-height: 1.35;
  }

  /* Two benefits are enough for compact mobile cards */
  #brandGrid .brand-perks li:nth-child(n + 3) {
    display: none;
  }

  #brandGrid .brand-card-actions {
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 5px;
  }

  #brandGrid .brand-card-actions .button {
    min-width: 0;
    min-height: 34px;
    padding: 6px;

    font-size: 0.56rem;
  }

  #brandGrid .brand-card-actions .card-icon-button {
    width: 30px;
    height: 34px;
    font-size: 0.72rem;
  }

  #brandGrid .brand-card-actions .visit-button {
    grid-column: 1 / -1;

    width: 100%;
    min-height: 36px;
  }
}

@media (max-width: 370px) {
  #brandGrid.brand-grid {
    gap: 6px;
  }

  #brandGrid .brand-card {
    min-height: 300px;
    padding: 8px;
    border-radius: 13px;
  }

  #brandGrid .brand-logo-wrap {
    height: 66px;
  }

  #brandGrid .favourite-button {
    top: 13px;
    right: 13px;

    width: 26px;
    height: 26px;
  }

  #brandGrid .brand-title {
    font-size: 0.78rem;
  }

  #brandGrid .brand-perks li {
    font-size: 0.53rem;
  }
}


/* =====================================================
   SMALLER HERO + FEATURE BUTTON
   ===================================================== */

.hero-copy #heroTitle {
  max-width: 720px;
  margin-bottom: 21px;

  font-size: clamp(3.3rem, 5.25vw, 6.1rem);
  line-height: 0.94;
  letter-spacing: -0.065em;
}

.hero-copy .hero-lede {
  max-width: 640px;
  margin-bottom: 27px;

  font-size: clamp(0.94rem, 1.1vw, 1.08rem);
  line-height: 1.62;
}

.hero-copy .signal-label {
  font-size: 0.63rem;
}

.button-feature {
  border: 1px solid rgba(255, 85, 91, 0.38);

  color: var(--coral);
  background:
    linear-gradient(
      135deg,
      rgba(255, 66, 78, 0.12),
      rgba(255, 105, 88, 0.045)
    );

  box-shadow:
    inset 0 0 25px rgba(255, 70, 78, 0.035);
}

.button-feature:hover {
  border-color: rgba(255, 93, 100, 0.72);

  color: #fff;
  background:
    linear-gradient(
      135deg,
      rgba(210, 31, 48, 0.82),
      rgba(255, 70, 83, 0.72)
    );

  box-shadow:
    0 12px 32px rgba(217, 31, 51, 0.2);
}

#recommendedPanel {
  scroll-margin-top: calc(var(--header-height) + 26px);
}

@media (max-width: 760px) {
  .hero-copy #heroTitle {
    max-width: 520px;
    margin-bottom: 17px;

    font-size: clamp(2.45rem, 11.5vw, 3.8rem);
    line-height: 0.96;
    letter-spacing: -0.055em;
  }

  .hero-copy .hero-lede {
    margin-bottom: 22px;

    font-size: 0.9rem;
    line-height: 1.55;
  }

  .hero-actions {
    gap: 8px;
  }

  .hero-actions .button {
    min-height: 46px;
  }
}

@media (max-width: 390px) {
  .hero-copy #heroTitle {
    font-size: clamp(2.2rem, 11vw, 2.8rem);
  }

  .hero-copy .hero-lede {
    font-size: 0.84rem;
  }
}


/* =====================================================
   THREE FEATURED CASINO CARDS
   ===================================================== */

/*
 * Give the featured section the full command-deck width.
 */
.command-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "feature feature"
    "metrics shortlist"
    "community shortlist";
}

/*
 * The container holding all three cards.
 */
.featured-brand-grid {
  grid-area: feature;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 16px;
  min-width: 0;
}

/*
 * Override the original single featured-card grid area.
 */
.featured-brand-grid .feature-console {
  grid-area: auto;

  min-width: 0;
  min-height: 520px;

  padding: 28px;

  justify-content: flex-end;
}

/*
 * Scale card content for a three-column layout.
 */
.featured-brand-grid .feature-logo {
  width: 78px;
  height: 78px;

  border-radius: 19px;
}

.featured-brand-grid .feature-brand-line {
  align-items: center;

  gap: 14px;
  margin-bottom: 18px;
}

.featured-brand-grid .feature-console h3 {
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  line-height: 1;

  overflow-wrap: anywhere;
}

.featured-brand-grid .feature-tagline {
  margin-bottom: 20px;

  font-size: 0.84rem;
  line-height: 1.55;
}

.featured-brand-grid .feature-points {
  gap: 7px;
  margin-bottom: 22px;
}

.featured-brand-grid .feature-points li {
  font-size: 0.72rem;
  line-height: 1.4;
}

.featured-brand-grid .feature-actions {
  display: grid;
  grid-template-columns: 1fr;

  gap: 8px;
}

.featured-brand-grid .feature-actions .button {
  width: 100%;
  min-height: 44px;

  padding-inline: 12px;

  font-size: 0.67rem;
}

.featured-brand-grid .feature-watermark {
  top: 11%;
  right: -15%;

  width: 82%;
  max-height: 190px;
}

.featured-brand-grid .feature-sequence {
  top: 23px;
  right: 24px;

  font-size: 0.55rem;
}

.featured-brand-grid .feature-signal {
  align-self: flex-start;

  font-size: 0.52rem;
}

/* Tablet: two cards on the first row */
@media (max-width: 1050px) {
  .featured-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .featured-brand-grid .featured-brand-card:last-child {
    grid-column: 1 / -1;
  }

  .featured-brand-grid .feature-console {
    min-height: 490px;
  }

  .featured-brand-grid .featured-brand-card:last-child {
    min-height: 440px;
  }
}

/* Mobile: show all three cards vertically */
@media (max-width: 760px) {
  .featured-brand-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .featured-brand-grid .featured-brand-card:last-child {
    grid-column: auto;
  }

  .featured-brand-grid .feature-console,
  .featured-brand-grid .featured-brand-card:last-child {
    min-height: 470px;
    padding: 22px;
  }

  .featured-brand-grid .feature-logo {
    width: 72px;
    height: 72px;

    border-radius: 18px;
  }

  .featured-brand-grid .feature-brand-line {
    align-items: center;
  }

  .featured-brand-grid .feature-console h3 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .featured-brand-grid .feature-tagline {
    font-size: 0.85rem;
  }

  .featured-brand-grid .feature-points li {
    font-size: 0.74rem;
  }

  .featured-brand-grid .feature-actions {
    grid-template-columns: 1fr 1fr;
  }

  .featured-brand-grid .feature-actions .button {
    min-width: 0;
  }

  .featured-brand-grid .feature-watermark {
    right: -14%;

    width: 76%;
    opacity: 0.1;
  }
}

/* Narrow mobile */
@media (max-width: 430px) {
  .featured-brand-grid .feature-console,
  .featured-brand-grid .featured-brand-card:last-child {
    min-height: 450px;
    padding: 19px;
  }

  .featured-brand-grid .feature-actions {
    grid-template-columns: 1fr;
  }

  .featured-brand-grid .feature-console h3 {
    font-size: 2.1rem;
  }

  .featured-brand-grid .feature-sequence {
    top: 19px;
    right: 19px;
  }
}


/* =====================================================
   MOBILE HERO COMPACT MODE
   ===================================================== */

@media (max-width: 760px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: 20px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hero-copy {
    max-width: 100%;
  }

  .hero-copy #heroTitle,
  .hero-copy h1 {
    margin-bottom: 12px;
    font-size: clamp(2.3rem, 12vw, 3.7rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
  }

  .hero-copy .hero-lede,
  .hero-lede {
    margin-bottom: 16px;
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .hero-actions {
    gap: 8px;
  }

  .hero-actions .button {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.78rem;
  }

  .hero-trust {
    gap: 10px 16px;
    margin-top: 14px;
    font-size: 0.66rem;
  }

  .hero-trust span {
    gap: 6px;
  }

  /* This is the big space saver */
  .neural-stage {
    display: none;
  }

  .hero-stat-rail {
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-top: 16px;
  }

  .hero-stat {
    min-height: 78px;
    padding: 12px 12px 14px;
  }

  .hero-stat strong {
    margin-bottom: 4px;
    font-size: 1.45rem;
  }

  .hero-stat span {
    font-size: 0.55rem;
    letter-spacing: 0.06em;
  }

  .hero-stat small {
    right: 10px;
    bottom: 10px;
    font-size: 0.52rem;
  }

  .activity-label {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.55rem;
  }

  .activity-window {
    min-height: 38px;
  }

  .activity-item {
    padding-inline: 14px;
    font-size: 0.62rem;
  }
}

@media (max-width: 420px) {
  .hero {
    padding-top: calc(var(--header-height) + 22px);
    padding-bottom: 16px;
  }

  .hero-copy #heroTitle,
  .hero-copy h1 {
    font-size: clamp(2.05rem, 11vw, 3rem);
    margin-bottom: 10px;
  }

  .hero-copy .hero-lede,
  .hero-lede {
    margin-bottom: 14px;
    font-size: 0.82rem;
    line-height: 1.44;
  }

  .hero-actions .button {
    min-height: 42px;
    font-size: 0.74rem;
  }

  .hero-trust {
    margin-top: 12px;
    font-size: 0.62rem;
  }

  .hero-stat-rail {
    margin-top: 14px;
  }

  .hero-stat {
    min-height: 72px;
    padding: 10px 10px 12px;
  }

  .hero-stat strong {
    font-size: 1.28rem;
  }

  .hero-stat span {
    font-size: 0.5rem;
  }

  .hero-stat small {
    font-size: 0.48rem;
  }
}


/* =====================================================
   MOBILE FEATURED BRAND SLIDER
   ===================================================== */

@media (max-width: 760px) {
  .featured-brand-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .featured-brand-grid::-webkit-scrollbar {
    display: none;
  }

  .featured-brand-grid .feature-console,
  .featured-brand-grid .featured-brand-card {
    flex: 0 0 calc(100% - 4px);
    width: calc(100% - 4px);
    min-width: calc(100% - 4px);
    min-height: 410px;
    padding: 20px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .featured-brand-grid .feature-brand-line {
    gap: 12px;
    margin-bottom: 14px;
    align-items: center;
  }

  .featured-brand-grid .feature-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }

  .featured-brand-grid .feature-console h3 {
    font-size: clamp(2rem, 9vw, 2.8rem);
    line-height: 0.96;
  }

  .featured-brand-grid .feature-tagline {
    margin-bottom: 14px;
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .featured-brand-grid .feature-points {
    gap: 6px;
    margin-bottom: 16px;
  }

  .featured-brand-grid .feature-points li {
    font-size: 0.7rem;
    line-height: 1.35;
  }

  .featured-brand-grid .feature-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .featured-brand-grid .feature-actions .button {
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    font-size: 0.66rem;
  }

  .featured-brand-grid .feature-watermark {
    width: 72%;
    right: -14%;
    top: 12%;
    opacity: 0.08;
  }

  .featured-brand-grid .feature-sequence {
    top: 18px;
    right: 18px;
    font-size: 0.52rem;
  }

  .featured-brand-grid .feature-signal {
    margin-bottom: 10px;
    font-size: 0.52rem;
    padding: 5px 9px;
  }
}

@media (max-width: 430px) {
  .featured-brand-grid .feature-console,
  .featured-brand-grid .featured-brand-card {
    min-height: 390px;
    padding: 18px;
  }

  .featured-brand-grid .feature-logo {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }

  .featured-brand-grid .feature-console h3 {
    font-size: 1.9rem;
  }

  .featured-brand-grid .feature-tagline {
    font-size: 0.76rem;
  }

  .featured-brand-grid .feature-points li {
    font-size: 0.66rem;
  }

  .featured-brand-grid .feature-actions {
    grid-template-columns: 1fr;
  }

  .featured-brand-grid .feature-actions .button {
    min-height: 40px;
    font-size: 0.64rem;
  }
}


/* =====================================================
   FEATURED BRANDS HEADING + MOBILE SLIDER
   ===================================================== */

.featured-showcase {
  grid-area: feature;
  min-width: 0;
}

.featured-showcase .featured-brand-grid {
  grid-area: auto;
}

.featured-showcase-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 16px;
  margin-bottom: 15px;
}

.featured-showcase-head h3 {
  margin: 5px 0 0;

  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.featured-next-button {
  display: none;
  align-items: center;
  justify-content: center;

  gap: 7px;
  min-width: 84px;
  min-height: 36px;

  padding: 7px 12px;

  border: 1px solid rgba(255, 89, 96, 0.28);
  border-radius: 999px;

  color: var(--coral);
  background: rgba(255, 69, 81, 0.06);

  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.featured-next-button:hover {
  color: #fff;
  border-color: rgba(255, 91, 99, 0.72);
  background: rgba(216, 31, 52, 0.82);
  transform: translateX(2px);
}

.featured-slider-dots {
  display: none;
  align-items: center;
  justify-content: center;

  gap: 7px;
  min-height: 18px;
  margin-top: 9px;
}

.featured-slider-dot {
  width: 7px;
  height: 7px;

  padding: 0;

  border: 0;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.18);

  cursor: pointer;

  transition:
    width 0.3s ease,
    background 0.3s ease,
    transform 0.2s ease;
}

.featured-slider-dot:hover {
  background: rgba(255, 95, 102, 0.55);
}

.featured-slider-dot.is-active {
  width: 25px;
  background: var(--gradient-brand);
}

/* Mobile carousel */
@media (max-width: 760px) {
  .featured-showcase-head {
    align-items: center;

    margin-bottom: 10px;
    padding-inline: 2px;
  }

  .featured-showcase-head .section-kicker {
    font-size: 0.53rem;
  }

  .featured-showcase-head h3 {
    margin-top: 3px;
    font-size: 1.45rem;
  }

  .featured-next-button {
    display: inline-flex;
  }

  .featured-slider-dots {
    display: flex;
  }

  #recommendedPanel.featured-brand-grid {
    display: flex;
    grid-template-columns: none;

    gap: 10px;

    width: 100%;
    max-width: 100%;

    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;

    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #recommendedPanel.featured-brand-grid::-webkit-scrollbar {
    display: none;
  }

  #recommendedPanel .featured-brand-card {
    flex: 0 0 100%;

    width: 100%;
    min-width: 100%;
    max-width: 100%;

    min-height: 405px;

    padding: 20px;

    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  #recommendedPanel .feature-brand-line {
    align-items: center;
    flex-direction: row;

    gap: 12px;
    margin-bottom: 14px;
  }

  #recommendedPanel .feature-logo {
    width: 62px;
    height: 62px;

    border-radius: 16px;
  }

  #recommendedPanel .feature-logo img {
    padding: 9px;
  }

  #recommendedPanel .feature-console h3 {
    font-size: clamp(1.9rem, 9vw, 2.55rem);
    line-height: 0.98;
  }

  #recommendedPanel .feature-tagline {
    margin-bottom: 14px;

    font-size: 0.8rem;
    line-height: 1.45;
  }

  #recommendedPanel .feature-points {
    gap: 6px;
    margin-bottom: 16px;
  }

  #recommendedPanel .feature-points li {
    font-size: 0.68rem;
    line-height: 1.35;
  }

  #recommendedPanel .feature-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;
  }

  #recommendedPanel .feature-actions .button {
    min-width: 0;
    min-height: 40px;

    padding: 8px;

    font-size: 0.62rem;
  }

  #recommendedPanel .feature-watermark {
    top: 10%;
    right: -15%;

    width: 74%;

    opacity: 0.08;
  }

  #recommendedPanel .feature-sequence {
    top: 18px;
    right: 18px;

    font-size: 0.49rem;
  }

  #recommendedPanel .feature-signal {
    margin-bottom: 10px;
    padding: 5px 9px;

    font-size: 0.5rem;
  }
}

@media (max-width: 430px) {
  .featured-showcase-head h3 {
    font-size: 1.3rem;
  }

  .featured-next-button {
    min-width: 70px;
    min-height: 32px;

    padding: 6px 10px;

    font-size: 0.53rem;
  }

  #recommendedPanel .featured-brand-card {
    min-height: 385px;
    padding: 17px;
  }

  #recommendedPanel .feature-logo {
    width: 56px;
    height: 56px;
  }

  #recommendedPanel .feature-console h3 {
    font-size: 1.85rem;
  }

  #recommendedPanel .feature-tagline {
    font-size: 0.74rem;
  }

  #recommendedPanel .feature-points li {
    font-size: 0.63rem;
  }

  #recommendedPanel .feature-actions .button {
    min-height: 38px;
    font-size: 0.58rem;
  }
}