/* /affiliate-program — page-specific styles.
 *
 * Layered on top of public/style.css (tokens, .wrap, .section,
 * .btn, .mono, .reveal, .faq*). Mirrors the structure of the education
 * page CSS — no form blocks here since the page links straight out to
 * Tapfiliate. Sections covered:
 *   .aff-head           — page header (h1 + hero-grid + meta-strip)
 *   .fifty              — the big 20% display in the hero
 *   .meta-strip         — 4-cell summary strip
 *   .elig / .ecard      — eligibility cards (Why join + Who fits)
 *   .coverage           — left intro + right product list
 *   .product-list/.prow — price rows (customer pays / 20% you receive)
 *   .steps / .step      — how-it-works strip
 *   .inst               — closing CTA card
 *
 * Tokens come from style.css; values lifted from the design handoff in
 * imaginando-3-0/project/Imaginando Affiliate Program.html.
 */

/* ---------- Page head ---------- */
.aff-head {
  padding: 36px 0 56px;
  border-bottom: 0.5px solid var(--line);
  position: relative;
  overflow: hidden;
}
.aff-head .crumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--fg-faint);
  margin-bottom: 18px;
}
.aff-head .crumbs .sep { color: var(--fg-faint); }
.aff-head .crumbs .here { color: var(--fg); }
.aff-head h1 {
  font-family: var(--display);
  font-weight: 500;
  /* Floor was 56px — too large for the longest heading line on phones, which
     overflowed and got clipped by .aff-head's overflow:hidden. Drop the floor
     so it scales down on small screens; the line still wraps if it has to. */
  font-size: clamp(56px, 8.4vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.aff-head h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

/* hero grid — lede on the left, big 20 on the right */
.aff-head .hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  margin-top: 48px;
  align-items: end;
}
.aff-head .hero-grid .lede {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.aff-head .hero-grid .lede p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 50ch;
  margin: 0;
  text-wrap: pretty;
}
.aff-head .hero-grid .lede p strong {
  color: var(--fg);
  font-weight: 500;
}
.aff-head .hero-grid .lede p.lede-sub {
  color: var(--fg-faint);
  font-size: 15px;
}
.aff-head .hero-grid .actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .aff-head .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* the big 20 */
.fifty {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0;
  min-height: 280px;
}
.fifty .num {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(180px, 22vw, 320px);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: var(--fg);
  position: relative;
  display: inline-block;
}
.fifty .num em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.fifty .num .pct {
  font-size: 0.32em;
  vertical-align: 0.55em;
  color: var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  margin-left: 0.04em;
}
.fifty .label {
  position: absolute;
  top: 40px;
  right: -3.1vw;
  max-width: 55%;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  text-align: left;
  line-height: 0.8;
  white-space: pre-line;
}
.fifty .label em {
  font-style: normal;
  color: var(--fg);
  font-weight: 500;
}
@media (max-width: 900px) {
  .fifty {
    justify-content: flex-start;
    min-height: 0;
  }
  .fifty .label {
    position: static;
    text-align: left;
    margin-bottom: 8px;
  }
}
/* On phones the row of label + giant number no longer fits: the number is
   pinned to its 180px clamp minimum and overflows the viewport, colliding with
   the "commission on every referred…" label. Stack the label above the number
   and let the number scale with the viewport so it fits. */
@media (max-width: 640px) {
  .fifty {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .fifty .label {
    max-width: none;
    margin-bottom: 0;
  }
  .fifty .num {
    font-size: clamp(112px, 42vw, 180px);
  }
}

/* meta strip — 4 numeric cells under the hero (vs education's 3) */
.aff-head .meta-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 0.5px solid var(--line);
  border-radius: 14px;
  margin-top: 64px;
  background: var(--card, #0e0e12);
  overflow: hidden;
}
.aff-head .meta-strip .cell {
  padding: 22px 24px;
  border-right: 0.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aff-head .meta-strip .cell:last-child { border-right: 0; }
.aff-head .meta-strip .cell .num {
  font-family: var(--display);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.aff-head .meta-strip .cell .num em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.aff-head .meta-strip .cell .lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
@media (max-width: 760px) {
  .aff-head .meta-strip { grid-template-columns: repeat(2, 1fr); }
  .aff-head .meta-strip .cell:nth-child(2) { border-right: 0; }
  .aff-head .meta-strip .cell:nth-child(-n+2) { border-bottom: 0.5px solid var(--line); }
}

/* ---------- Section head (page-local variant) ---------- */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.sec-head .l { max-width: 42ch; }
.sec-head .l .index { display: block; margin-bottom: 8px; }
.sec-head h2.section-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(34px, 4.5vw, 60px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 8px 0 0;
  text-wrap: balance;
}
.sec-head h2.section-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.sec-head .meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
}

/* ---------- Eligibility (Why + Fits) ---------- */
.elig {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .elig { grid-template-columns: 1fr; }
}
.ecard {
  position: relative;
  border: 0.5px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  background: var(--card, #0e0e12);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 340px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.ecard:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.ecard .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.ecard .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.1em;
}
.ecard .tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding: 5px 9px;
  border: 0.5px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}
.ecard h4 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  line-height: 1.02;
}
.ecard h4 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.ecard p {
  margin: 0;
  color: var(--fg-dim);
  font-size: 14.5px;
  line-height: 1.6;
  text-wrap: pretty;
  flex: 1;
}
.ecard .req {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
  padding: 14px 0 0;
  border-top: 0.5px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ecard .req b {
  color: var(--fg);
  font-weight: 500;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
.ecard .req .item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.ecard .req .item::before {
  content: "→";
  color: var(--accent);
}
.ecard .apply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0.5px solid var(--line-strong);
  font-size: 13px;
  color: var(--fg);
  align-self: flex-start;
  transition: all 0.25s ease;
}
.ecard .apply:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.ecard .apply .arrow { transition: transform 0.25s ease; }
.ecard .apply:hover .arrow { transform: translateX(3px); }

/* ---------- Coverage ---------- */
.coverage {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 1000px) {
  .coverage { grid-template-columns: 1fr; gap: 32px; }
}
.coverage .l p {
  color: var(--fg-dim);
  font-size: 16px;
  line-height: 1.6;
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0 0 18px;
}
.coverage .l p em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.coverage .l .pull {
  margin: 24px 0 0;
  padding: 18px 22px;
  border-left: 2px solid var(--accent);
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
  max-width: 34ch;
}
.coverage .l .pull em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

/* The coverage product list (.product-list / .prow, commission variant)
 * is shared chrome — see public/style.css. */

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
}
.step {
  padding: 28px 24px 28px;
  border-right: 0.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
  position: relative;
}
.step:last-child { border-right: 0; }
.step .n {
  font-family: var(--display);
  font-weight: 500;
  font-size: 48px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg-faint);
}
.step.lit .n { color: var(--accent); }
.step.lit .n em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.step h5 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
.step p {
  margin: 0;
  color: var(--fg-dim);
  font-size: 13.5px;
  line-height: 1.55;
  text-wrap: pretty;
}
.step .tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: auto;
}
@media (max-width: 900px) {
  .step:nth-child(2) { border-right: 0; }
  .step:nth-child(-n+2) { border-bottom: 0.5px solid var(--line); }
}
@media (max-width: 560px) {
  .step {
    border-right: 0;
    border-bottom: 0.5px solid var(--line);
    min-height: 0;
  }
  .step:last-child { border-bottom: 0; }
}

/* ---------- Closing CTA card ---------- */
.inst {
  position: relative;
  border: 0.5px solid var(--line);
  border-radius: 18px;
  padding: 48px;
  background: var(--card, #0e0e12);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: end;
}
.inst::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 100%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 55%);
  pointer-events: none;
}
.inst .l { position: relative; }
.inst .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 14px;
}
.inst h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-wrap: balance;
  max-width: 18ch;
}
.inst h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.inst p {
  color: var(--fg-dim);
  font-size: 15px;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0;
  text-wrap: pretty;
}
.inst .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  position: relative;
}
@media (max-width: 800px) {
  .inst {
    grid-template-columns: 1fr;
    padding: 32px;
  }
  .inst .actions { justify-content: flex-start; }
}