@charset "UTF-8";
/* =========================================================
   IMMIX REFERRAL PROGRAM V1
   Locked Immix style page CSS
   Rebuilt by Ken Buis, Fervid Solutions

   Page:
   /referral-program.php

   Design doctrine:
   Content visible first. JavaScript enhancement second.
   Inter for UI/body. Noto Serif for display H1.
   No body copy below 17px.
========================================================= */

:root {
  --ix-shell: 1180px;
  --ix-shell-wide: 1320px;
  --ix-gutter: clamp(20px, 3vw, 48px);

  --ix-page: #f7faf5;
  --ix-page-soft: #fbfdf9;
  --ix-white: #ffffff;

  --ix-navy-950: #071f3d;
  --ix-navy-900: #092a50;
  --ix-navy-850: #0b2d54;
  --ix-navy-800: #12345d;
  --ix-navy-700: #163f73;
  --ix-navy-650: #29547f;

  --ix-green-750: #4f842e;
  --ix-green-700: #568f32;
  --ix-green-650: #5f9938;
  --ix-green-600: #69a63d;
  --ix-green-100: #eaf5e3;
  --ix-green-050: #f6fbf2;

  --ix-ink: #263a4f;
  --ix-muted: #566f87;
  --ix-muted-2: #6b8195;

  --ix-line: rgba(18, 58, 102, 0.09);
  --ix-line-strong: rgba(18, 58, 102, 0.14);

  --ix-shadow-soft: 0 12px 30px rgba(13, 30, 52, 0.06);
  --ix-shadow-card: 0 28px 64px rgba(13, 30, 52, 0.09), 0 8px 22px rgba(13, 30, 52, 0.035);
  --ix-shadow-dark: 0 28px 70px rgba(7, 31, 61, 0.22);

  --ix-radius-md: 18px;
  --ix-radius-lg: 24px;
  --ix-radius-xl: 32px;
  --ix-radius-xxl: 40px;

  --ix-font-sans: Inter, Arial, sans-serif;
  --ix-font-serif: "Noto Serif", Georgia, serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

body {
  min-width: 320px;
  background: var(--ix-page);
  color: var(--ix-ink);
  font-family: var(--ix-font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

.ixref-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 12%, rgba(105, 166, 61, 0.06), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(18, 58, 102, 0.045), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f7faf5 100%);
}

.ixref-wrap {
  width: min(100% - var(--ix-gutter), var(--ix-shell));
  margin-inline: auto;
}

.ixref-kicker,
.ixref-card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 1rem;
  color: var(--ix-green-650);
  font-family: var(--ix-font-sans);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.ixref-kicker::after,
.ixref-card-kicker::after {
  content: "";
  width: 42px;
  height: 2px;
  border-radius: 999px;
  background: rgba(105, 166, 61, 0.72);
}

.ixref-card-kicker {
  margin-bottom: 0.7rem;
}

.ixref-card-kicker::after {
  width: 28px;
}

.ixref-btn {
  min-height: 54px;
  padding: 0 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border-radius: 14px;
  border: 1px solid transparent;
  font-family: var(--ix-font-sans);
  font-size: 17px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none !important;
  transition:
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ixref-btn:hover,
.ixref-btn:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.ixref-btn--primary {
  background: linear-gradient(180deg, #70ab43 0%, var(--ix-green-700) 100%);
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(105, 166, 61, 0.24);
}

.ixref-btn--secondary {
  background: rgba(255, 255, 255, 0.96);
  color: var(--ix-navy-800) !important;
  border-color: rgba(18, 58, 102, 0.14);
  box-shadow: 0 12px 26px rgba(13, 30, 52, 0.06);
}

/* =========================================================
   HERO
========================================================= */

.ixref-hero {
  position: relative;
  min-height: clamp(620px, 52vw, 780px);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  background: #edf4ef;
}

.ixref-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ixref-hero__media img {
  width: 100%;
  height: 100%;
  min-height: clamp(620px, 52vw, 780px);
  object-fit: cover;
  object-position: center center;
}

.ixref-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(248, 251, 247, 0.995) 0%,
      rgba(248, 251, 247, 0.985) 27%,
      rgba(248, 251, 247, 0.82) 49%,
      rgba(248, 251, 247, 0.44) 72%,
      rgba(248, 251, 247, 0.08) 100%
    );
}

.ixref-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 78% 20%, rgba(18, 58, 102, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.18));
}

.ixref-hero__inner {
  position: relative;
  z-index: 4;
  width: min(100% - var(--ix-gutter), var(--ix-shell-wide));
  min-height: clamp(620px, 52vw, 780px);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.65fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 6vw, 5.6rem) 0;
}

.ixref-hero__content {
  max-width: 720px;
  padding: clamp(2rem, 3vw, 3rem);
  border-radius: 34px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.90) 100%);
  border: 1px solid rgba(18, 58, 102, 0.08);
  box-shadow: var(--ix-shadow-card);
  backdrop-filter: blur(3px);
}

.ixref-hero__content h1 {
  max-width: 11ch;
  margin: 0 0 1.1rem;
  color: var(--ix-navy-800);
  font-family: var(--ix-font-serif);
  font-size: clamp(52px, 6vw, 86px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.ixref-hero__content p {
  max-width: 38rem;
  margin: 0 0 1.8rem;
  color: #405973;
  font-size: clamp(18px, 1.25vw, 22px);
  font-weight: 650;
  line-height: 1.55;
}

.ixref-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.ixref-hero__panel {
  align-self: stretch;
  min-height: 330px;
  padding: clamp(2rem, 3vw, 3rem);
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #ffffff;
  background:
    radial-gradient(circle at 100% 0%, rgba(105, 166, 61, 0.20), transparent 34%),
    linear-gradient(135deg, var(--ix-navy-800) 0%, var(--ix-navy-950) 100%);
  box-shadow: var(--ix-shadow-dark);
}

.ixref-hero__panel-kicker {
  margin: 0 0 0.75rem;
  color: rgba(255,255,255,0.78);
  font-size: 17px;
  font-weight: 850;
  letter-spacing: 0.10em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ixref-hero__panel h2 {
  max-width: 10.5ch;
  margin: 0 0 1rem;
  color: #ffffff;
  font-size: clamp(34px, 3vw, 48px);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.ixref-hero__panel p {
  max-width: 34rem;
  margin: 0;
  color: rgba(255,255,255,0.82);
  font-size: 17px;
  line-height: 1.65;
}

/* =========================================================
   ACTIONS
========================================================= */

.ixref-actions {
  position: relative;
  padding: clamp(76px, 7vw, 116px) 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(105, 166, 61, 0.07), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fbf7 100%);
}

.ixref-actions__intro {
  max-width: 800px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.ixref-actions__intro .ixref-kicker {
  justify-content: center;
}

.ixref-actions__intro .ixref-kicker::after {
  display: none;
}

.ixref-actions__intro h2 {
  max-width: 13ch;
  margin: 0 auto 1rem;
  color: var(--ix-navy-800);
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.ixref-actions__intro p {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--ix-muted);
  font-size: 17px;
  line-height: 1.72;
}

.ixref-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  align-items: stretch;
}

.ixref-action-card,
.ixref-gift-card {
  position: relative;
  min-height: 330px;
  padding: clamp(1.5rem, 2.5vw, 2.4rem);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(105, 166, 61, 0.07), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbf7 100%);
  border: 1px solid rgba(18, 58, 102, 0.08);
  box-shadow: var(--ix-shadow-card);
}

.ixref-action-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ixref-action-card__icon {
  width: 58px;
  height: 58px;
  margin-bottom: 1.4rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--ix-green-700);
  background: rgba(105, 166, 61, 0.10);
  border: 1px solid rgba(105, 166, 61, 0.18);
  font-size: 22px;
}

.ixref-action-card h3 {
  max-width: 22ch;
  margin: 0 0 1.5rem;
  color: var(--ix-navy-800);
  font-size: clamp(26px, 2.2vw, 38px);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.ixref-action-card .ixref-btn {
  align-self: flex-start;
}

.ixref-gift-card {
  grid-column: 1 / -1;
  min-height: 250px;
  display: grid;
  grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.2rem, 2vw, 1.8rem);
}

.ixref-gift-card__image {
  min-height: 220px;
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f7fbf5, #eef6ea);
  border: 1px solid rgba(18, 58, 102, 0.07);
}

.ixref-gift-card__image img {
  width: min(88%, 340px);
  height: auto;
  object-fit: contain;
}

.ixref-gift-card__copy {
  padding-right: clamp(0rem, 2vw, 2rem);
}

.ixref-gift-card__copy h3 {
  max-width: 15ch;
  margin: 0;
  color: var(--ix-navy-800);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

/* =========================================================
   COMMUNITY
========================================================= */

.ixref-community {
  position: relative;
  padding: clamp(76px, 7vw, 116px) 0;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 20%, rgba(105, 166, 61, 0.18), transparent 32%),
    radial-gradient(circle at 86% 82%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(135deg, var(--ix-navy-800) 0%, var(--ix-navy-950) 100%);
}

.ixref-community__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.65fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.ixref-community .ixref-kicker {
  color: #a9d68a;
}

.ixref-community .ixref-kicker::after {
  background: rgba(169, 214, 138, 0.74);
}

.ixref-community__content h2 {
  max-width: 14ch;
  margin: 0 0 1.25rem;
  color: #ffffff;
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.ixref-community__content p {
  max-width: 68ch;
  margin: 0 0 1rem;
  color: rgba(255,255,255,0.82);
  font-size: 17px;
  line-height: 1.75;
}

.ixref-community__content p:last-child {
  margin-bottom: 0;
}

.ixref-community__panel {
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0%, rgba(105, 166, 61, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 28px 70px rgba(0,0,0,0.22);
}

.ixref-community__stat {
  min-height: 116px;
  padding: 1.1rem;
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}

.ixref-community__stat span {
  display: block;
  margin-bottom: 0.45rem;
  color: #ffffff;
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
}

.ixref-community__stat p {
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.45;
}

/* =========================================================
   STEPS
========================================================= */

.ixref-steps {
  position: relative;
  padding: clamp(76px, 7vw, 116px) 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(18, 58, 102, 0.045), transparent 28%),
    linear-gradient(180deg, #f8fbf7 0%, #ffffff 100%);
}

.ixref-steps__card {
  padding: clamp(1.6rem, 3vw, 2.8rem);
  border-radius: 34px;
  background:
    radial-gradient(circle at 100% 0%, rgba(105, 166, 61, 0.08), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f9fbf7 100%);
  border: 1px solid rgba(18, 58, 102, 0.08);
  box-shadow: var(--ix-shadow-card);
}

.ixref-steps__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.ixref-steps__intro h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--ix-navy-800);
  font-size: clamp(36px, 4vw, 62px);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.ixref-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.ixref-step {
  min-height: 230px;
  padding: 1.35rem;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(18, 58, 102, 0.08);
  box-shadow: 0 12px 26px rgba(13, 30, 52, 0.045);
}

.ixref-step span {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 3rem;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(180deg, var(--ix-green-600), var(--ix-green-750));
  font-size: 17px;
  font-weight: 850;
}

.ixref-step h3 {
  margin: 0 0 0.65rem;
  color: var(--ix-navy-800);
  font-size: 24px;
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.ixref-step p {
  margin: 0;
  color: var(--ix-muted);
  font-size: 17px;
  line-height: 1.65;
}

.ixref-steps__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(18, 58, 102, 0.10);
}

/* =========================================================
   CLOSING
========================================================= */

.ixref-closing {
  position: relative;
  padding: 0 0 clamp(80px, 8vw, 128px);
  background: #ffffff;
}

.ixref-closing__card {
  padding: clamp(2rem, 4vw, 4rem);
  border-radius: 34px;
  color: #ffffff;
  background:
    radial-gradient(circle at 92% 14%, rgba(105, 166, 61, 0.18), transparent 32%),
    linear-gradient(135deg, var(--ix-navy-800) 0%, var(--ix-navy-950) 100%);
  box-shadow: var(--ix-shadow-dark);
}

.ixref-closing__card .ixref-kicker {
  color: #a9d68a;
}

.ixref-closing__card .ixref-kicker::after {
  background: rgba(169, 214, 138, 0.76);
}

.ixref-closing__card h2 {
  max-width: 17ch;
  margin: 0 0 1.6rem;
  color: #ffffff;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1080px) {
  .ixref-hero__inner,
  .ixref-community__grid,
  .ixref-steps__intro {
    grid-template-columns: 1fr;
  }

  .ixref-hero,
  .ixref-hero__media img,
  .ixref-hero__inner {
    min-height: auto;
  }

  .ixref-hero {
    padding: 3rem 0;
  }

  .ixref-hero__panel {
    min-height: auto;
  }

  .ixref-community__panel {
    max-width: 640px;
  }

  .ixref-steps__grid {
    grid-template-columns: 1fr;
  }

  .ixref-step {
    min-height: 0;
  }

  .ixref-step span {
    margin-bottom: 1rem;
  }
}

@media (max-width: 820px) {
  .ixref-action-grid,
  .ixref-gift-card {
    grid-template-columns: 1fr;
  }

  .ixref-gift-card {
    gap: 1rem;
  }

  .ixref-gift-card__image {
    min-height: 190px;
  }
}

@media (max-width: 680px) {
  .ixref-hero {
    padding: 2rem 0;
  }

  .ixref-hero__content,
  .ixref-hero__panel,
  .ixref-action-card,
  .ixref-gift-card,
  .ixref-community__panel,
  .ixref-steps__card,
  .ixref-closing__card {
    border-radius: 24px;
  }

  .ixref-hero__content,
  .ixref-hero__panel {
    padding: 1.4rem;
  }

  .ixref-hero__content h1 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .ixref-actions,
  .ixref-community,
  .ixref-steps {
    padding: 56px 0;
  }

  .ixref-closing {
    padding-bottom: 72px;
  }

  .ixref-hero__actions,
  .ixref-steps__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ixref-btn {
    width: 100%;
  }
}

/* Accessibility utility if base CSS is absent. */
.ix-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 1px, 1px) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* =========================================================
   REFERRAL PROGRAM V1.1 HERO PANEL IMAGE POLISH
   Adds referral7.png to the top of the blue hero panel
   Final refinement by Ken Buis, Fervid Solutions
========================================================= */

.ixref-hero__panel {
  justify-content: space-between !important;
  gap: clamp(1.2rem, 2.2vw, 2rem) !important;
  min-height: clamp(520px, 44vw, 650px) !important;
  padding: clamp(1.35rem, 2.4vw, 2.1rem) !important;
  overflow: hidden !important;
}

.ixref-hero__panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,0.13), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.00) 42%) !important;
}

.ixref-hero__panel > * {
  position: relative !important;
  z-index: 1 !important;
}

.ixref-hero__panel-image {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    0 22px 46px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

.ixref-hero__panel-image img {
  width: 100% !important;
  height: clamp(190px, 16vw, 270px) !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

.ixref-hero__panel-copy {
  max-width: 100% !important;
}

.ixref-hero__panel-kicker {
  margin-top: 0 !important;
}

.ixref-hero__panel h2 {
  max-width: 11ch !important;
}

@media (max-width: 1080px) {
  .ixref-hero__panel {
    min-height: auto !important;
  }

  .ixref-hero__panel-image img {
    height: clamp(220px, 34vw, 330px) !important;
  }
}

@media (max-width: 760px) {
  .ixref-hero__panel {
    padding: 1rem !important;
    border-radius: 28px !important;
  }

  .ixref-hero__panel-image {
    border-radius: 22px !important;
  }

  .ixref-hero__panel-image img {
    height: 220px !important;
  }
}
@media (min-width: 1081px) {
  .ixref-hero__inner {
    grid-template-columns: minmax(0, 0.96fr) minmax(410px, 0.72fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
  }

  .ixref-hero__content,
  .ixref-hero__panel {
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
  }

  .ixref-hero__content {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
  }

  .ixref-hero__panel {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}
/* =========================================================
   REFERRAL HERO OVERLAP PATCH
   White and blue cards overlap like locked Immix hero style
   Final refinement by Ken Buis, Fervid Solutions
========================================================= */

@media (min-width: 1081px) {
  .ixref-hero__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 0.98fr) minmax(430px, 0.62fr) !important;
    gap: 0 !important;
    align-items: center !important;
    width: min(100% - var(--ix-gutter), 1420px) !important;
    margin-inline: auto !important;
  }

  .ixref-hero__content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: clamp(520px, 39vw, 680px) !important;
    padding-right: clamp(4.5rem, 9vw, 9rem) !important;
    border-radius: 36px !important;
    box-shadow:
      0 30px 70px rgba(13, 30, 52, 0.13),
      0 10px 28px rgba(13, 30, 52, 0.045) !important;
  }

  .ixref-hero__panel {
    position: relative !important;
    z-index: 4 !important;
    width: min(100%, 610px) !important;
    max-width: 610px !important;
    min-height: clamp(440px, 32vw, 600px) !important;
    margin-left: clamp(-92px, -5vw, -54px) !important;
    justify-self: start !important;
    align-self: center !important;
    border-radius: 32px !important;
    box-shadow:
      0 32px 76px rgba(7, 31, 61, 0.28),
      0 10px 26px rgba(7, 31, 61, 0.12) !important;
  }

  .ixref-hero__panel-image {
    margin: 0 0 clamp(1.25rem, 2vw, 1.75rem) !important;
  }

  .ixref-hero__panel-image img {
    width: 100% !important;
    max-height: clamp(150px, 15vw, 230px) !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 24px !important;
  }
}

/* Slightly reduce overlap on smaller desktop screens */
@media (min-width: 1081px) and (max-width: 1280px) {
  .ixref-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.58fr) !important;
  }

  .ixref-hero__content {
    padding-right: 5.5rem !important;
  }

  .ixref-hero__panel {
    margin-left: -54px !important;
  }
}
/* =========================================================
   REFERRAL HERO TRUE OVERLAP PATCH
   Forces the blue card to overlap the white card like locked Immix hero style
   Final refinement by Ken Buis, Fervid Solutions
========================================================= */

@media (min-width: 1081px) {
  .ixref-page .ixref-hero__inner {
    width: min(100% - var(--ix-gutter), 1340px) !important;
    display: grid !important;
    grid-template-columns: minmax(680px, 0.92fr) minmax(360px, 0.48fr) !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  .ixref-page .ixref-hero__content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: clamp(430px, 34vw, 570px) !important;
    padding:
      clamp(3.1rem, 4.4vw, 4.8rem)
      clamp(8rem, 10vw, 11rem)
      clamp(3.1rem, 4.4vw, 4.8rem)
      clamp(3.1rem, 4.8vw, 5.2rem) !important;
    border-radius: 36px !important;
    background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.99) 0%,
        rgba(255, 255, 255, 0.985) 68%,
        rgba(255, 255, 255, 0.92) 100%
      ) !important;
    box-shadow:
      0 30px 70px rgba(13, 30, 52, 0.13),
      0 10px 28px rgba(13, 30, 52, 0.045) !important;
  }

  .ixref-page .ixref-hero__panel {
    position: relative !important;
    z-index: 5 !important;
    width: min(100%, 500px) !important;
    max-width: 500px !important;
    min-height: clamp(430px, 32vw, 560px) !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
    transform: translateX(clamp(-150px, -8.5vw, -94px)) !important;
    border-radius: 32px !important;
    box-shadow:
      0 34px 78px rgba(7, 31, 61, 0.30),
      0 12px 28px rgba(7, 31, 61, 0.16) !important;
  }

  .ixref-page .ixref-hero__panel-image {
    margin: 0 0 clamp(1.15rem, 1.6vw, 1.55rem) !important;
  }

  .ixref-page .ixref-hero__panel-image img {
    width: 100% !important;
    height: clamp(128px, 12vw, 190px) !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 22px !important;
  }

  .ixref-page .ixref-hero__panel h2 {
    max-width: 10ch !important;
  }
}

/* Medium desktop: reduce overlap so it does not crowd the content. */
@media (min-width: 1081px) and (max-width: 1280px) {
  .ixref-page .ixref-hero__inner {
    grid-template-columns: minmax(620px, 0.92fr) minmax(340px, 0.48fr) !important;
  }

  .ixref-page .ixref-hero__content {
    padding-right: 7.25rem !important;
  }

  .ixref-page .ixref-hero__panel {
    width: min(100%, 450px) !important;
    transform: translateX(-86px) !important;
  }
}

/* Tablet and mobile: stack normally. */
@media (max-width: 1080px) {
  .ixref-page .ixref-hero__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .ixref-page .ixref-hero__content,
  .ixref-page .ixref-hero__panel {
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    border-radius: 28px !important;
  }
}

/* =========================================================
   REFERRAL PROGRAM TYPOGRAPHY HANDOFF + CONSISTENCY PATCH
   Supports /assets/css/immix-locked-typography.css.
   Keep this at the end of immix-referral-program-v1.css.
========================================================= */

.ixref-page {
  font-family: var(--ix-font-sans, Inter, Arial, Helvetica, sans-serif);
}

/* Keep page typography from leaking into shared header/footer. */
.ixref-page :where(header, footer, .ixf-footer, .main-header, .main-header-two, .immix-topbar, .main-menu, .main-menu-two),
.ixref-page :where(header, footer, .ixf-footer, .main-header, .main-header-two, .immix-topbar, .main-menu, .main-menu-two) * {
  font-family: Inter, Arial, Helvetica, sans-serif !important;
}

/* Hero display scale: locked style, but restrained enough for the long title. */
.ixref-page .ixref-hero__content h1,
.ixref-page .ixref-hero h1 {
  max-width: 11ch !important;
  font-family: var(--ix-font-serif, "Noto Serif", Georgia, serif) !important;
  font-size: clamp(52px, 5.45vw, 86px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
}

.ixref-page .ixref-hero__content p:not(.ixref-kicker) {
  font-size: clamp(18px, 1.18vw, 21px) !important;
  line-height: 1.62 !important;
}

/* Dark surfaces: hero panel, community band, and closing CTA. */
.ixref-page :is(
  .ixref-hero__panel,
  .ixref-community,
  .ixref-community__grid,
  .ixref-community__panel,
  .ixref-community__stat,
  .ixref-closing__card
) {
  color: #ffffff;
}

.ixref-page :is(
  .ixref-hero__panel,
  .ixref-community,
  .ixref-community__grid,
  .ixref-community__panel,
  .ixref-community__stat,
  .ixref-closing__card
) :is(h1, h2, h3, h4, h5, h6, strong) {
  color: #ffffff !important;
}

.ixref-page :is(
  .ixref-hero__panel,
  .ixref-community,
  .ixref-community__grid,
  .ixref-community__panel,
  .ixref-community__stat,
  .ixref-closing__card
) :is(p, li, span, a) {
  color: rgba(255, 255, 255, 0.88) !important;
}

.ixref-page :is(
  .ixref-hero__panel,
  .ixref-community,
  .ixref-community__grid,
  .ixref-closing__card
) :is(.ixref-kicker, .ixref-card-kicker, .ixref-hero__panel-kicker, [class*="kicker"], [class*="eyebrow"]) {
  color: rgba(199, 232, 179, 0.96) !important;
}

.ixref-page :is(
  .ixref-hero__panel,
  .ixref-community,
  .ixref-community__grid,
  .ixref-closing__card
) :is(.ixref-kicker::after, .ixref-card-kicker::after, [class*="kicker"]::after, [class*="eyebrow"]::after) {
  background: rgba(199, 232, 179, 0.72) !important;
}

/* Light cards remain dark-on-light after the typography lock loads. */
.ixref-page :is(
  .ixref-hero__content,
  .ixref-actions__intro,
  .ixref-action-card,
  .ixref-gift-card,
  .ixref-gift-card__copy,
  .ixref-steps__card,
  .ixref-step
) :is(h1, h2, h3, h4, h5, h6, strong) {
  color: var(--ix-navy-800, #12345d) !important;
}

.ixref-page :is(
  .ixref-hero__content,
  .ixref-actions__intro,
  .ixref-action-card,
  .ixref-gift-card,
  .ixref-gift-card__copy,
  .ixref-steps__card,
  .ixref-step
) :is(p, li, span) {
  color: var(--ix-muted, #566f87) !important;
}

.ixref-page :is(.ixref-kicker, .ixref-card-kicker) {
  color: var(--ix-green-650, #5f9938) !important;
}

/* Card title polish so the page reads like the newer locked pages. */
.ixref-page :is(
  .ixref-actions__intro h2,
  .ixref-community__content h2,
  .ixref-steps__intro h2,
  .ixref-closing__card h2
) {
  font-size: clamp(34px, 3.45vw, 56px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.047em !important;
}

.ixref-page :is(.ixref-action-card h3, .ixref-gift-card__copy h3) {
  font-size: clamp(25px, 2.1vw, 36px) !important;
  line-height: 1.08 !important;
}

.ixref-page .ixref-step h3 {
  font-size: clamp(22px, 1.55vw, 27px) !important;
  line-height: 1.14 !important;
}

/* Button contrast protection */
.ixref-page .ixref-btn--primary {
  color: #ffffff !important;
}

.ixref-page .ixref-btn--secondary {
  color: var(--ix-navy-800, #12345d) !important;
}

/* Footer CTA text and button contrast guard */
.ixref-page :is(
  .ixf-footer .ixf-lead-band,
  footer .ixf-lead-band,
  footer [class*="lead-band"],
  footer [class*="footer-cta"],
  footer [class*="cta"]
) :is(h1, h2, h3, h4, h5, h6, strong) {
  color: #ffffff !important;
}

.ixref-page :is(
  .ixf-footer .ixf-lead-band,
  footer .ixf-lead-band,
  footer [class*="lead-band"],
  footer [class*="footer-cta"],
  footer [class*="cta"]
) :is(p, li, span, a) {
  color: rgba(255, 255, 255, 0.90) !important;
}

.ixref-page :is(
  .ixf-footer .ixf-lead-band__actions a:first-child,
  .ixf-footer .ixf-lead-band__actions a:first-of-type,
  footer .ixf-lead-band__actions a:first-child,
  footer .ixf-lead-band__actions a:first-of-type,
  footer [class*="lead-band"] [class*="actions"] a:first-child,
  footer [class*="lead-band"] [class*="actions"] a:first-of-type
) {
  color: #12345d !important;
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.92) !important;
}

.ixref-page :is(
  .ixf-footer .ixf-lead-band__actions a:first-child *,
  .ixf-footer .ixf-lead-band__actions a:first-of-type *,
  footer .ixf-lead-band__actions a:first-child *,
  footer .ixf-lead-band__actions a:first-of-type *,
  footer [class*="lead-band"] [class*="actions"] a:first-child *,
  footer [class*="lead-band"] [class*="actions"] a:first-of-type *
) {
  color: #12345d !important;
}

.ixref-page :is(
  .ixf-footer .ixf-lead-band__actions a:not(:first-child),
  footer .ixf-lead-band__actions a:not(:first-child),
  footer [class*="lead-band"] [class*="actions"] a:not(:first-child)
),
.ixref-page :is(
  .ixf-footer .ixf-lead-band__actions a:not(:first-child) *,
  footer .ixf-lead-band__actions a:not(:first-child) *,
  footer [class*="lead-band"] [class*="actions"] a:not(:first-child) *
) {
  color: #ffffff !important;
}

@media (max-width: 760px) {
  .ixref-page .ixref-hero__content h1,
  .ixref-page .ixref-hero h1 {
    max-width: 100% !important;
    font-size: clamp(40px, 11vw, 58px) !important;
    line-height: 1.01 !important;
  }

  .ixref-page :is(
    p,
    li,
    a,
    .ixref-hero__content p,
    .ixref-hero__panel p,
    .ixref-actions__intro p,
    .ixref-community__content p,
    .ixref-community__stat p,
    .ixref-step p
  ) {
    font-size: 17px !important;
    line-height: 1.58 !important;
  }
}