/* ============================================================
   REFERRAL + AMBASSADOR PROGRAM PAGES
   templates/referral.php  ·  templates/ambassador.php

   Both pages share one program: same fees, same qualification,
   same payment terms, same agreement. Only the framing differs
   (open program vs. invitation). So they share one stylesheet.

   Built entirely from the existing brand primitives in
   oxycell-global.css (--ox-* tokens, .ox-section, .ox-capsule,
   .ox-pagehero, .ox-closing). Nothing here overrides a global.
   ============================================================ */

/* ---- audience cards (who it's for / who we invite) ---- */
.ox-ref__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.ox-ref__card {
  padding: clamp(24px, 2.4vw, 30px);
  border: 1px solid rgba(19, 28, 40, 0.1);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 60px -48px rgba(19, 28, 40, 0.35);
}
.ox-ref__card h3 {
  margin: 0;
  font-family: var(--ox-serif);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.12;
  letter-spacing: .015em;
  color: var(--ox-ink);
}
.ox-ref__card p {
  margin: 10px 0 0;
  font-family: var(--ox-sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ox-ink-muted);
}
.ox-ref__card p strong { color: var(--ox-ink); font-weight: 500; }

/* four-across variant (ambassador "why" row — avoids a lone orphan card) */
.ox-ref__cards--four { grid-template-columns: repeat(4, 1fr); }

/* ---- the plain-spoken line under the audience grid ---- */
.ox-ref__plain {
  margin: clamp(28px, 3vw, 40px) 0 0;
  max-width: 720px;
  font-family: var(--ox-serif);
  font-weight: 400;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: .015em;
  color: var(--ox-ink);
}

/* ---- numbered steps (how it works) ---- */
.ox-ref__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 26px);
  counter-reset: ox-ref-step;
}
.ox-ref__step {
  position: relative;
  padding: clamp(24px, 2.4vw, 30px);
  border: 1px solid rgba(19, 28, 40, 0.1);
  border-radius: 18px;
  background: rgb(247, 249, 252);
}
.ox-ref__step::before {
  counter-increment: ox-ref-step;
  content: counter(ox-ref-step);
  display: block;
  font-family: var(--ox-serif);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .08em;
  color: rgb(176, 30, 36);
  margin-bottom: 12px;
}
.ox-ref__step h3 {
  margin: 0;
  font-family: var(--ox-sans);
  font-weight: 500;
  font-size: 16.5px;
  color: var(--ox-ink);
}
.ox-ref__step p {
  margin: 9px 0 0;
  font-family: var(--ox-sans);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ox-ink-muted);
}

/* six-step variant (ambassador flow) */
.ox-ref__steps--six { grid-template-columns: repeat(3, 1fr); }

/* ---- fee panel (dark, so the numbers carry) ---- */
.ox-ref__fees {
  background: var(--ox-deep);
  color: var(--ox-on-deep);
  border-radius: 24px;
  padding: clamp(32px, 4vw, 56px);
}
.ox-ref__fees .ox-eyebrow { color: rgba(209, 230, 255, 0.7); }
.ox-ref__fees-title {
  margin: 14px 0 0;
  font-family: var(--ox-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.05;
  letter-spacing: .015em;
  color: #fff;
}
.ox-ref__fee-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(28px, 3.2vw, 40px);
}
.ox-ref__fee {
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
}
.ox-ref__fee-shell {
  font-family: var(--ox-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(209, 230, 255, 0.7);
}
.ox-ref__fee-amount {
  display: block;
  margin: 14px 0 0;
  font-family: var(--ox-serif);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 1;
  letter-spacing: .01em;
  color: #fff;
}
/* the escalator card carries two numbers, so it needs a smaller type size */
.ox-ref__fee-amount--range { font-size: clamp(30px, 3.4vw, 46px); }
.ox-ref__fee-amount em {
  display: block;
  margin: 12px 0 0;
  font-style: normal;
  font-family: var(--ox-sans);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(209, 230, 255, 0.7);
}
.ox-ref__fee-line {
  margin: 12px 0 0;
  font-family: var(--ox-sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(209, 230, 255, 0.78);
}
.ox-ref__fee-line strong { color: #fff; font-weight: 500; }

/* the true-up / no-cap notes under the fee cards */
.ox-ref__fee-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(20px, 2.4vw, 28px);
}
.ox-ref__fee-note {
  padding: 20px 22px 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ox-ref__fee-note strong {
  display: block;
  font-family: var(--ox-sans);
  font-weight: 500;
  font-size: 14.5px;
  color: #fff;
}
.ox-ref__fee-note span {
  display: block;
  margin-top: 8px;
  font-family: var(--ox-sans);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(209, 230, 255, 0.7);
}

/* ---- program tiers (ambassador page — athlete ladder) ---- */
.ox-tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
}
.ox-tier {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid rgba(19, 28, 40, 0.12);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 60px -44px rgba(19, 28, 40, 0.4);
}
/* the elite tier reads as the headline offer */
.ox-tier--lead {
  background: var(--ox-deep);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--ox-on-deep);
}
.ox-tier__rank {
  font-family: var(--ox-sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ox-ink-muted);
}
.ox-tier--lead .ox-tier__rank { color: rgba(209, 230, 255, 0.7); }
.ox-tier__name {
  margin: 12px 0 0;
  font-family: var(--ox-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.08;
  letter-spacing: .015em;
  color: var(--ox-ink);
}
.ox-tier--lead .ox-tier__name { color: #fff; }
.ox-tier__who {
  margin: 12px 0 0;
  font-family: var(--ox-sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ox-ink-muted);
}
.ox-tier--lead .ox-tier__who { color: rgba(209, 230, 255, 0.78); }
.ox-tier__label {
  margin: 26px 0 10px;
  font-family: var(--ox-sans);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(19, 28, 40, 0.45);
}
.ox-tier--lead .ox-tier__label { color: rgba(209, 230, 255, 0.55); }
.ox-tier ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.ox-tier li {
  padding-left: 20px;
  position: relative;
  font-family: var(--ox-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ox-ink-muted);
}
.ox-tier--lead li { color: rgba(209, 230, 255, 0.82); }
.ox-tier li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 7px; height: 1px;
  background: currentColor;
  opacity: .55;
}
.ox-tier li strong { color: var(--ox-ink); font-weight: 500; }
.ox-tier--lead li strong { color: #fff; }
.ox-tier__foot {
  margin: auto 0 0;
  padding-top: 22px;
  font-family: var(--ox-sans);
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(19, 28, 40, 0.5);
}
.ox-tier--lead .ox-tier__foot { color: rgba(209, 230, 255, 0.5); }

/* ---- terms band (qualification + ground rules, side by side) ---- */
.ox-ref__terms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.2vw, 48px);
  align-items: start;
}
.ox-ref__terms h3 {
  margin: 0 0 14px;
  font-family: var(--ox-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.12;
  letter-spacing: .015em;
  color: var(--ox-ink);
}
.ox-ref__terms p {
  margin: 0 0 14px;
  font-family: var(--ox-sans);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ox-ink-muted);
}
.ox-ref__terms p:last-child { margin-bottom: 0; }
.ox-ref__terms strong { color: var(--ox-ink); font-weight: 500; }
.ox-ref__rules {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ox-ref__rules li {
  padding-left: 20px;
  position: relative;
  font-family: var(--ox-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ox-ink-muted);
}
.ox-ref__rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 1px;
  background: var(--ox-ink);
  opacity: .45;
}

/* ---- fine print ---- */
.ox-ref__note {
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  font-family: var(--ox-sans);
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(19, 28, 40, 0.5);
}

/* ---- anchored sections clear the fixed header ---- */
#ox-ref-how,
#ox-ref-earn,
#ox-ref-join { scroll-margin-top: clamp(80px, 10vh, 110px); }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .ox-ref__cards, .ox-ref__cards--four { grid-template-columns: repeat(2, 1fr); }
  .ox-ref__steps, .ox-ref__steps--six { grid-template-columns: repeat(2, 1fr); }
  .ox-ref__fee-notes { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .ox-ref__terms { grid-template-columns: 1fr; }
  .ox-ref__fee-grid { grid-template-columns: 1fr; }
  .ox-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ox-ref__cards, .ox-ref__cards--four { grid-template-columns: 1fr; }
  .ox-ref__steps, .ox-ref__steps--six { grid-template-columns: 1fr; }
  .ox-ref__fees { border-radius: 18px; }
}

/* ============================================================
   v2 additions (2026-08-07) — three-tier ambassador layout,
   3-up steps/fees/terms variants, spec strip, fee-panel intro.
   ============================================================ */

/* ---- spec strip (ambassador "the program" section) ---- */
.ox-amb__specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 0;
  margin-top: clamp(28px, 3vw, 40px);
  padding: clamp(16px, 1.8vw, 22px) 0;
  border-top: 1px solid rgba(19, 28, 40, 0.12);
  border-bottom: 1px solid rgba(19, 28, 40, 0.12);
}
.ox-amb__specs span {
  font-family: var(--ox-sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ox-ink-muted);
}
.ox-amb__specs span + span::before {
  content: "\00b7";
  margin: 0 clamp(14px, 1.6vw, 24px);
  color: rgba(19, 28, 40, 0.35);
}
.ox-amb__specs sub { font-size: .68em; }

/* ---- three-tier grid (ICON / STAR / PRO) ---- */
.ox-tiers--three { grid-template-columns: repeat(3, 1fr); }

/* ---- three-step variant (purchase / deliver / rebate) ---- */
.ox-ref__steps--three { grid-template-columns: repeat(3, 1fr); }

/* ---- three-fee variant (tiered referral fees) ---- */
.ox-ref__fee-grid--three { grid-template-columns: repeat(3, 1fr); }

/* ---- three-column terms band (work / license / conduct) ---- */
.ox-ref__terms--three { grid-template-columns: repeat(3, 1fr); }

/* ---- intro line inside the dark fee panel ---- */
.ox-ref__fees-intro {
  margin: 16px 0 0;
  max-width: 760px;
  font-family: var(--ox-sans);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(209, 230, 255, 0.78);
}

/* ---- v2 responsive ---- */
@media (max-width: 1000px) {
  .ox-tiers--three { grid-template-columns: 1fr; }
  .ox-ref__terms--three { grid-template-columns: 1fr; }
  .ox-ref__steps--three { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .ox-ref__fee-grid--three { grid-template-columns: 1fr; }
}

/* ============================================================
   Page rhythm pass (2026-08-07, Tom spacing feedback).
   Scoped by enqueue: this sheet loads ONLY on the referral +
   ambassador templates, so these overrides of the global
   primitives apply to those two pages alone.

   Scale: nothing above ~56px. Sections breathe at 40-56px,
   heads sit 24-40px above their content. The old global values
   (128px section pads, 156px closing pads, 200px hero top) are
   what produced the cavernous gaps Tom flagged.
   ============================================================ */

/* hero: top pad only needs to clear the ~86px fixed header + a
   40-55px visible gap; bottom joins the normal section scale */
.ox-pagehero { padding: clamp(126px, 14vh, 142px) var(--ox-pad-x) clamp(40px, 5vw, 56px); }

/* hero body was max-width:560px — that forced the mid-phrase
   "You earn / referral fees" break. Let it fill the line. */
.ox-pagehero__body { max-width: 1000px; }

/* every light section: one consistent 40-56px band */
.ox-section { padding: clamp(40px, 5vw, 56px) var(--ox-pad-x); }

/* section heads hug their content (was 36-56px) */
.ox-own__head { margin-bottom: clamp(24px, 3vw, 40px); }

/* closing band on the same scale as everything else */
.ox-closing { padding: clamp(44px, 5vw, 56px) var(--ox-pad-x); }

/* ============================================================
   Ambassador imagery pass (2026-08-07, quiet-luxury rebuild).
   Cinematic athlete photography on the ambassador template:
   photo hero (LCP, preloaded), two full-width image bands, and
   a photo closing backdrop. All classes are ox-amb-* and appear
   only in templates/ambassador.php; heights come from imagery
   presence (min-height / band height), never from padding — the
   Page rhythm pass scale above stays authoritative for spacing.
   ============================================================ */

/* ---- photo hero (amb-football, the tunnel) ---- */
.ox-amb-hero {
  display: flex;
  align-items: flex-end;
  min-height: clamp(540px, 78vh, 800px);
}
.ox-amb-hero .ox-pagehero__inner { width: 100%; }
.ox-amb-hero__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* bottom-heavy scrim so the white hero type always carries */
.ox-amb-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(5, 11, 19, 0.5) 0%,
    rgba(5, 11, 19, 0.28) 38%,
    rgba(5, 11, 19, 0.58) 72%,
    rgba(4, 9, 16, 0.78) 100%
  );
}
.ox-amb-hero .ox-pagehero__body { max-width: 640px; }

/* ---- full-width image bands (flush; sections above/below
        already carry the 40-56px rhythm) ---- */
.ox-amb-band {
  position: relative;
  height: clamp(320px, 48vh, 540px);
  overflow: hidden;
}
.ox-amb-band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- tier-section foot line (italic, quiet) ---- */
.ox-amb-tiersfoot {
  margin: clamp(24px, 3vw, 40px) 0 0;
  font-family: var(--ox-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  letter-spacing: .01em;
  color: rgba(19, 28, 40, 0.6);
}

/* ---- deeper-involvement line inside the dark fee panel ---- */
.ox-ref__fees > .ox-ref__fee-line { margin-top: clamp(18px, 2vw, 26px); }

/* ---- photo closing (amb-tennis, the serve) ---- */
.ox-amb-closing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(420px, 56vh, 620px);
}
.ox-amb-closing__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ox-amb-closing__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(5, 11, 19, 0.66) 0%,
    rgba(5, 11, 19, 0.55) 50%,
    rgba(4, 9, 16, 0.74) 100%
  );
}

/* ---- sign-off line under the closing CTA ---- */
.ox-amb-signoff {
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  font-family: var(--ox-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 21px);
  letter-spacing: .02em;
  color: rgba(255, 255, 255, 0.68);
}

/* ---- anchors on this page clear the fixed header ---- */
#ox-amb-tiers { scroll-margin-top: clamp(80px, 10vh, 110px); }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .ox-amb-hero { min-height: clamp(460px, 72vh, 640px); }
  .ox-amb-band { height: clamp(210px, 30vh, 280px); }
  .ox-amb-closing { min-height: clamp(360px, 48vh, 480px); }
}

/* ============================================================
   Tier grading pass (2026-08-07, Tom tier-parity feedback).
   All three ambassador tier cards live in the same navy family,
   graded by depth: ICON keeps the deepest --ox-deep gradient
   (unchanged, .ox-tier--lead), STAR is one shade lighter, PRO a
   shade lighter again. Every card carries light-on-navy text so
   each reads premium — the hierarchy is depth grading, not
   haves-vs-have-nots. Text alphas step UP as the backgrounds
   lighten to hold WCAG-reasonable contrast on every card.
   Appended after the rhythm + imagery passes — keep this last.
   ============================================================ */
.ox-tier--star,
.ox-tier--pro {
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--ox-on-deep);
}
.ox-tier--star {
  background: linear-gradient(158deg, rgb(44, 88, 122) 0%, rgb(24, 50, 74) 60%, rgb(13, 30, 46) 100%);
}
.ox-tier--pro {
  background: linear-gradient(158deg, rgb(62, 108, 144) 0%, rgb(36, 68, 96) 60%, rgb(22, 46, 66) 100%);
}
.ox-tier--star .ox-tier__rank { color: rgba(212, 231, 255, 0.72); }
.ox-tier--pro  .ox-tier__rank { color: rgba(218, 235, 255, 0.76); }
.ox-tier--star .ox-tier__name,
.ox-tier--pro  .ox-tier__name { color: #fff; }
.ox-tier--star .ox-tier__who  { color: rgba(212, 231, 255, 0.82); }
.ox-tier--pro  .ox-tier__who  { color: rgba(218, 235, 255, 0.86); }
.ox-tier--star .ox-tier__label { color: rgba(212, 231, 255, 0.6); }
.ox-tier--pro  .ox-tier__label { color: rgba(218, 235, 255, 0.66); }
.ox-tier--star li { color: rgba(212, 231, 255, 0.86); }
.ox-tier--pro  li { color: rgba(218, 235, 255, 0.9); }
.ox-tier--star li strong,
.ox-tier--pro  li strong { color: #fff; }
.ox-tier--star .ox-tier__foot { color: rgba(212, 231, 255, 0.55); }
.ox-tier--pro  .ox-tier__foot { color: rgba(218, 235, 255, 0.6); }