/* ==========================================================================
   partner.css — Affiliate Program experience
   Landing page, application, partner login and partner dashboard.

   Everything here is scoped to affiliate surfaces through the `.aff-*`
   class prefix and the `.page-partner` body class, so no rule can leak into
   the storefront, shop, product or account pages. Built on the existing
   design tokens in variables.css — no new colours or fonts.
   ========================================================================== */

/* ============================ landing hero ============================ */

.aff-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 360px at 92% -20%, rgba(201, 164, 92, 0.16), transparent 60%),
    radial-gradient(640px 320px at -10% 120%, rgba(47, 128, 121, 0.1), transparent 60%),
    linear-gradient(180deg, var(--cream-100), var(--bg));
  border-bottom: 1px solid var(--line-soft);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.aff-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.aff-hero__copy {
  max-width: 40rem;
}

.aff-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-800);
  margin-bottom: var(--sp-4);
}

.aff-hero__eyebrow::before {
  content: '';
  width: 40px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  flex: 0 0 auto;
}

.aff-hero__title {
  font-size: clamp(2.1rem, 4.8vw, 3.35rem);
  line-height: 1.08;
  margin-bottom: var(--sp-4);
}

.aff-hero__lead {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 46ch;
  margin-bottom: var(--sp-6);
}

.aff-hero__actions {
  margin-bottom: var(--sp-7);
}

/* Honest, config-derived assurances under the hero buttons. */
.aff-assure {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  max-width: 34rem;
}

.aff-assure__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--gold-400);
}

.aff-assure__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--navy-800);
  line-height: 1.1;
}

.aff-assure__label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
}

.aff-hero__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  aspect-ratio: 4 / 3;
  background: var(--navy-800);
}

.aff-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aff-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(216, 186, 121, 0.5);
  border-radius: var(--r-lg);
  pointer-events: none;
}

.aff-hero__card {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  right: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(253, 251, 247, 0.94);
  box-shadow: var(--sh-md);
  backdrop-filter: blur(6px);
}

.aff-hero__card-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: var(--navy-900);
}

.aff-hero__card-icon svg {
  width: 20px;
  height: 20px;
}

.aff-hero__card-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--navy-800);
  font-weight: 600;
  line-height: 1.2;
}

.aff-hero__card-text {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  margin: 0;
}

/* ============================ how it works ============================ */

.aff-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
  counter-reset: affstep;
}

.aff-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.aff-step:hover {
  transform: translateY(-4px);
  border-color: var(--gold-400);
  box-shadow: var(--sh-card-hover);
}

.aff-step__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.aff-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  flex: 0 0 auto;
}

.aff-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  color: var(--teal-600);
  flex: 0 0 auto;
}

.aff-step__icon svg {
  width: 18px;
  height: 18px;
}

.aff-step h3 {
  font-size: var(--fs-md);
  margin: 0;
}

.aff-step p {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin: 0;
}

/* ============================== benefits ============================== */

.aff-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.aff-benefit {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.aff-benefit__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--grad-brand-soft);
  color: var(--gold-800);
}

.aff-benefit__icon svg {
  width: 22px;
  height: 22px;
}

.aff-benefit h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-1);
}

.aff-benefit p {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin: 0;
}

/* ========================= showcase / storytelling ==================== */

.aff-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.aff-story--flip .aff-story__media {
  order: 2;
}

.aff-story__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
  aspect-ratio: 4 / 3;
  background: var(--navy-800);
}

.aff-story__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aff-story__copy h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  margin-bottom: var(--sp-4);
}

.aff-story__copy p {
  color: var(--text-soft);
  margin-bottom: var(--sp-4);
}

/* ============================ commission box ========================== */

.aff-commission-head {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.aff-figure {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  text-align: center;
}

.aff-figure__value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--navy-800);
  line-height: 1.1;
}

.aff-figure__label {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
}

/* ============================== rules grid ============================ */

.aff-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

/* ========================== partner journey =========================== */

.aff-journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}

.aff-journey__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

.aff-journey__badge {
  align-self: flex-start;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--cream-100);
  color: var(--gold-800);
  border: 1px solid var(--line);
}

.aff-journey__card h3 {
  font-size: var(--fs-md);
  margin: 0;
}

.aff-journey__card p {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin: 0;
  flex: 1 1 auto;
}

/* ============================== final CTA ============================= */

.aff-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.aff-cta__inner {
  max-width: 44rem;
  margin-inline: auto;
}

.aff-cta h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom: var(--sp-4);
}

.aff-cta p {
  font-size: var(--fs-lg);
  color: var(--cream-300);
  margin-bottom: var(--sp-6);
}

.aff-cta .aff-cta__note {
  font-size: var(--fs-xs);
  color: var(--cream-300);
  opacity: 0.85;
  max-width: 52ch;
  margin: var(--sp-6) auto 0;
}

/* ========================= application experience ===================== */

.aff-apply {
  max-width: 68rem;
  margin-inline: auto;
}

.aff-apply__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.aff-apply__aside {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.aff-aside-card {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

.aff-aside-card h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-3);
}

.aff-apply__intro {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--cream-100);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
}

.aff-apply__intro-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--gold-800);
  box-shadow: var(--sh-xs);
}

.aff-apply__intro p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.aff-apply__intro strong {
  color: var(--heading);
}

/* --------------------------- login split screen ---------------------- */

.aff-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  min-height: 76vh;
}

.aff-auth__brand {
  position: relative;
  overflow: hidden;
  background: var(--grad-navy-deep);
  color: var(--cream-100);
  padding: clamp(2rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
}

.aff-auth__brand-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
}

.aff-auth__brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 20, 38, 0.35), rgba(6, 20, 38, 0.85));
}

.aff-auth__brand > * {
  position: relative;
  z-index: 1;
}

.aff-auth__brand .aff-hero__eyebrow {
  color: var(--gold-300);
}

.aff-auth__brand .aff-hero__eyebrow::before {
  background: var(--gold-400);
}

.aff-auth__list span {
  display: inline-flex;
}

.aff-auth__brand-title {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  color: var(--cream-50);
  margin: 0;
}

.aff-auth__brand-lead {
  color: var(--cream-300);
  max-width: 32ch;
  margin: 0;
}

.aff-auth__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
}

.aff-auth__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--cream-200);
}

.aff-auth__list svg {
  width: 18px;
  height: 18px;
  color: var(--gold-400);
  flex: 0 0 auto;
  margin-top: 2px;
}

.aff-auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4rem) var(--gutter);
  background: var(--bg);
}

.aff-auth__form {
  width: min(430px, 100%);
}

.aff-auth__form h1 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-2);
}

.aff-auth__form > p.lead {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
}

.aff-auth__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
}

.aff-auth__meta a {
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ========================= partner dashboard ========================== */

.aff-dash__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-5);
  background:
    radial-gradient(600px 260px at 100% 0%, rgba(201, 164, 92, 0.14), transparent 60%),
    linear-gradient(180deg, var(--cream-100), var(--surface));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-5);
}

.aff-dash__identity {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}

.aff-dash__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--grad-navy);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
}

.aff-dash__name {
  font-size: var(--fs-xl);
  margin: 0;
}

.aff-dash__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.aff-dash__agent {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--navy-800);
}

/* skeleton shimmer for genuine loading (never shown as zero data) */
.aff-skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--cream-100) 25%, var(--cream-200) 37%, var(--cream-100) 63%);
  background-size: 400% 100%;
  animation: aff-shimmer 1.4s ease-in-out infinite;
}

@keyframes aff-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.aff-dash__skeleton-card {
  min-height: 92px;
}

/* ======================= partner dashboard portal ===================== */

.aff-portal {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}

/* --- side navigation ------------------------------------------------ */

.aff-portal__side {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}

.aff-portal__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--grad-navy);
  color: var(--cream-100);
}

.aff-portal__brand-label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-300);
  font-weight: 600;
}

.aff-portal__brand-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-lg);
  color: var(--white);
  word-break: break-all;
}

.aff-portal__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aff-portal__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-soft);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.aff-portal__link:hover {
  background: var(--cream-100);
  color: var(--navy-800);
}

.aff-portal__link:focus-visible {
  outline: none;
  box-shadow: var(--ring-navy);
}

.aff-portal__link.is-active {
  background: var(--navy-800);
  color: var(--white);
}

.aff-portal__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.aff-portal__icon svg {
  width: 18px;
  height: 18px;
}

.aff-portal__label {
  min-width: 0;
}

.aff-portal__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}

.aff-portal__foot-link {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-sm);
}

.aff-portal__foot-link:hover {
  color: var(--navy-800);
  background: var(--cream-100);
}

.aff-portal__side {
  min-width: 0;
}

.aff-portal__nav {
  min-width: 0;
}

.aff-portal__body {
  min-width: 0;
}

/* Grid items default to min-width:auto, which lets their content (the
   activity table, the stat grid) push the track far wider than the screen.
   Zero the minimum so cards shrink and the table scrolls inside its wrapper. */
.aff-portal__body .grid,
.aff-portal__body .grid > *,
.aff-portal .stat-grid > *,
.aff-portal .aff-filters,
.aff-portal .aff-figures,
.aff-portal .aff-profile {
  min-width: 0;
}

/* --- view shell ----------------------------------------------------- */

.aff-view {
  display: block;
  animation: aff-view-in var(--dur) var(--ease-out) both;
}

.aff-view[hidden] {
  display: none;
}

@keyframes aff-view-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.aff-view__head {
  margin-bottom: var(--sp-5);
}

.aff-view__eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
  font-weight: 700;
}

.aff-view__head h2 {
  margin: 0 0 var(--sp-1);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.aff-view__head p {
  margin: 0;
  color: var(--text-soft);
  max-width: 58ch;
}

/* --- panel head (h3 + helper copy) --------------------------------- */

.aff-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.aff-panel__head h3 {
  margin: 0 0 2px;
  font-size: var(--fs-lg);
}

.aff-panel__head p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

/* --- referral link cards ------------------------------------------- */

.aff-link-card {
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

.aff-link-card + .aff-link-card,
.aff-link-card + .card,
.card + .aff-link-card {
  margin-top: var(--sp-4);
}

.aff-link-card__top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.aff-link-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--cream-100);
  color: var(--navy-800);
}

.aff-link-card__icon svg {
  width: 20px;
  height: 20px;
}

.aff-link-card__label {
  display: block;
  font-weight: 600;
  color: var(--heading);
}

.aff-link-card__note {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.aff-link-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-3);
  background: var(--cream-100);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}

.aff-link-row__url {
  flex: 1 1 16rem;
  min-width: 0;
  padding: var(--sp-1) var(--sp-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  color: var(--navy-800);
  word-break: break-all;
}

.aff-link-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

.aff-link-note svg {
  width: 15px;
  height: 15px;
  color: var(--success);
}

.aff-link-note--warn {
  color: var(--danger);
}

.aff-link-valid {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--success-bg);
  color: var(--success);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.aff-link-valid svg {
  width: 14px;
  height: 14px;
}

/* --- activity filters ---------------------------------------------- */

.aff-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}

.aff-filter {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.aff-filter__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 600;
}

/* --- commission figures -------------------------------------------- */

.aff-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-4);
}

.aff-figure__hint {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

/* --- account profile ----------------------------------------------- */

.aff-profile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3) var(--sp-5);
  margin: 0;
}

.aff-profile__item {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line-soft);
}

.aff-profile__item dt {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 600;
}

.aff-profile__item dd {
  margin: 2px 0 0;
  color: var(--heading);
  word-break: break-word;
}

/* --- help quick facts ---------------------------------------------- */

.aff-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
}

.aff-facts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}

.aff-facts li:last-child {
  border-bottom: 0;
}

.aff-facts li span {
  color: var(--text-soft);
}

.aff-facts li strong {
  color: var(--heading);
  text-align: right;
}

/* --- inline info tooltip ------------------------------------------- */

.aff-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--cream-300);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: help;
  position: relative;
  vertical-align: middle;
}

.aff-tip:focus-visible {
  outline: none;
  box-shadow: var(--ring-navy);
}

.aff-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: var(--z-float);
  width: max-content;
  max-width: 220px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--navy-800);
  color: var(--cream-100);
  font-size: var(--fs-2xs);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease);
}

.aff-tip:hover::after,
.aff-tip:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* --- stacked tables on small screens ------------------------------- */

@media (max-width: 720px) {
  .aff-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .aff-stack,
  .aff-stack tbody,
  .aff-stack tr,
  .aff-stack th,
  .aff-stack td {
    display: block;
    width: 100%;
  }

  .aff-stack tr {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .aff-stack tr:last-child {
    border-bottom: 0;
  }

  .aff-stack th,
  .aff-stack td {
    border: 0;
    padding: var(--sp-1) 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    text-align: right;
  }

  .aff-stack th::before,
  .aff-stack td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-mute);
    font-weight: 600;
    text-align: left;
  }

  .aff-stack tbody th {
    font-size: var(--fs-md);
  }
}

/* ============================ responsive ============================== */

@media (max-width: 1000px) {
  .aff-hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .aff-hero__copy {
    max-width: 40rem;
    margin-inline: auto;
  }

  .aff-hero__eyebrow {
    justify-content: center;
  }

  .aff-hero__lead {
    margin-inline: auto;
  }

  .aff-hero__actions {
    justify-content: center;
  }

  .aff-assure {
    margin-inline: auto;
    text-align: left;
  }

  .aff-hero__media {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
  }

  .aff-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aff-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aff-apply__grid {
    grid-template-columns: 1fr;
  }

  .aff-apply__aside {
    position: static;
  }

  .aff-auth {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .aff-auth__brand {
    padding-block: var(--sp-7);
  }

  .aff-portal {
    grid-template-columns: 1fr;
  }

  .aff-portal__side {
    position: static;
    top: auto;
  }

  .aff-portal__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--sp-1);
    padding-bottom: var(--sp-1);
  }

  .aff-portal__link {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .aff-portal__foot {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
}

@media (max-width: 760px) {
  .aff-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aff-story,
  .aff-story--flip {
    grid-template-columns: 1fr;
  }

  .aff-story--flip .aff-story__media {
    order: 0;
  }

  .aff-rules,
  .aff-commission-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .aff-assure {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .aff-steps,
  .aff-benefits,
  .aff-journey {
    grid-template-columns: 1fr;
  }

  .aff-hero__card {
    position: static;
    margin: var(--sp-4);
  }

  .aff-auth__brand {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aff-step,
  .aff-step__n {
    transition: none;
  }

  .aff-skeleton {
    animation: none;
  }

  .aff-view {
    animation: none;
  }
}

/* ====================== join (three information cards) =============== */

.aff-join-section {
  scroll-margin-top: 96px;
}

.aff-join {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: start;
}

.aff-join__card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.aff-join__card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-400);
  box-shadow: var(--sh-card-hover);
}

.aff-join__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--navy-800);
  overflow: hidden;
}

.aff-join__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aff-join__media--graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(360px 240px at 82% -10%, rgba(216, 186, 121, 0.45), transparent 68%),
    linear-gradient(135deg, var(--navy-800), var(--navy-900));
}

.aff-join__media--teal {
  background:
    radial-gradient(360px 240px at 82% -10%, rgba(47, 128, 121, 0.55), transparent 68%),
    linear-gradient(135deg, var(--navy-800), var(--navy-900));
}

.aff-join__art {
  display: inline-flex;
  color: #fff;
  opacity: 0.92;
}

.aff-join__art svg {
  width: 58px;
  height: 58px;
}

.aff-join__ribbon {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: rgba(253, 251, 247, 0.94);
  color: var(--navy-800);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aff-join__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
}

.aff-join__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.aff-join__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--grad-brand);
  color: var(--navy-900);
}

.aff-join__icon svg {
  width: 22px;
  height: 22px;
}

.aff-join__head h3 {
  margin: 0;
  font-size: var(--fs-lg);
}

.aff-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.aff-point {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.5;
}

.aff-point strong {
  color: var(--navy-800);
}

.aff-point__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  color: var(--teal-600);
  margin-top: 1px;
}

.aff-point__icon svg {
  width: 16px;
  height: 16px;
}

.aff-earn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--grad-brand-soft);
  border: 1px dashed var(--gold-400);
}

.aff-earn__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-800);
}

.aff-earn__value {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--navy-800);
}

.aff-earn__note {
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

@media (max-width: 1000px) {
  .aff-join {
    grid-template-columns: 1fr;
    max-width: 34rem;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aff-join__card {
    transition: none;
  }
}