/* ─────────────────────────────────────────────────────────────────────────
 * Partners page — page-specific LIGHT widgets, layered on styles.css +
 * marketing.css. NO page.css (that would flip to the dark documentation
 * theme). Everything uses the styles.css :root tokens so it stays on-brand.
 *
 * Reuses from styles.css: .mockup / .mm__table / .mm__widgets / .widget.
 * Reuses from marketing.css: .psec / .mstats / .msplit / .msteps / .mfeat / .mfaq / .mcta.
 * New here: hero partner-dashboard (.pdash), track cards (.ptrack),
 * tier ladder (.ptiers/.ptier), the dark earnings-calculator band (.pcalc).
 * ─────────────────────────────────────────────────────────────── */

/* ── Hero partner-dashboard mockup ──────────────────────────────── */
.pdash { padding: 20px 22px; }
.pdash .mm__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.pdash .mm__title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.pdash .mm__sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pdash .mm__widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.pdash .mm__table { width: 100%; }
.pdash__badge { font-size: 12px; font-weight: 700; color: #168f5b; background: rgba(22, 143, 91, 0.12); padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.pdash__cut { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; color: #168f5b; }

/* ── Partner track cards ────────────────────────────────────────── */
.ptracks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 1000px; margin: 0 auto; }
.ptrack {
  position: relative; display: flex; flex-direction: column;
  padding: 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ptrack:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.ptrack__ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; margin-bottom: 15px; background: var(--grad-soft); }
.ptrack__name { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 4px; }
.ptrack__for { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-2, var(--muted)); margin-bottom: 14px; }
.ptrack__desc { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.ptrack__deal { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--grad-soft); border: 1px solid var(--line); margin-bottom: 18px; }
.ptrack__deal b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ptrack__deal span { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.ptrack__list { list-style: none; padding: 0; margin: 0 0 4px; display: grid; gap: 9px; }
.ptrack__list li { position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.ptrack__list li::before { content: '✓'; position: absolute; left: 0; top: -1px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--grad); }

/* ── Tier ladder ────────────────────────────────────────────────── */
.ptiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1000px; margin: 0 auto; align-items: start; }
.ptier { position: relative; padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.ptier--feat { border-color: var(--brand); box-shadow: 0 22px 48px -22px rgba(124, 92, 255, 0.55); }
.ptier--feat::before { content: 'Most partners land here'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: var(--grad); padding: 5px 13px; border-radius: 999px; }
.ptier__name { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.ptier__pct { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 8px 0 2px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ptier__pct span { font-size: 15px; font-weight: 700; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.ptier__qual { font-size: 13px; color: var(--muted); padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.ptier__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.ptier__list li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.ptier__list li::before { content: '✓'; position: absolute; left: 0; color: #168f5b; font-weight: 800; }
.ptier__list li.off { color: var(--muted-2, #9aa3b2); }
.ptier__list li.off::before { content: '–'; color: var(--muted-2, #9aa3b2); }

/* ── Earnings calculator — dark band (rhythm break, like home's .replaces) ── */
.pcalc-band { background: #0b0d12; color: #eef1f7; padding: 84px 0; }
.pcalc-band .eyebrow { color: #9aa3b2; }
.pcalc-band .section__head h2 { color: #fff; }
.pcalc { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 30px; align-items: stretch; max-width: 940px; margin: 36px auto 0; }
.pcalc__inputs { background: #14171f; border: 1px solid #232734; border-radius: var(--radius); padding: 26px; }
.pcalc__row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #232734; }
.pcalc__row:last-child { border-bottom: 0; }
.pcalc__label { font-size: 14px; color: #c3cad6; }
.pcalc__val { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px; font-weight: 600; color: #fff; }
.pcalc__val em { color: #21d4fd; font-style: normal; }
.pcalc__out { display: flex; flex-direction: column; justify-content: center; text-align: center; background: linear-gradient(135deg, rgba(124, 92, 255, 0.16), rgba(33, 212, 253, 0.14)); border: 1px solid #2b3040; border-radius: var(--radius); padding: 28px; }
.pcalc__out-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #9aa3b2; }
.pcalc__out-big { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 8px 0 2px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pcalc__out-sub { font-size: 13px; color: #c3cad6; line-height: 1.5; }
.pcalc__note { text-align: center; font-size: 12.5px; color: #7a8494; margin: 20px auto 0; max-width: 640px; }

@media (max-width: 860px) {
  .ptracks { grid-template-columns: 1fr; }
  .ptiers { grid-template-columns: 1fr; }
  .ptier--feat { order: -1; }
  .pcalc { grid-template-columns: 1fr; }
  .pdash .mm__widgets { grid-template-columns: 1fr; }
}