/* =============================================================
   PARTNER CABINET
   Rides on the landing's tokens and primitives (/styles.css) so the
   two pages are the same product; only what is unique to the
   cabinet lives here.
   ============================================================= */

.pmain { padding-top: var(--hdr-h); }

/* ---------- hero ---------- */
.phero { padding: clamp(48px,7vw,96px) 0 clamp(32px,4vw,56px); }
.phero__h1 {
  margin-top: 22px;
  font-size: clamp(2.2rem,5.6vw,4.25rem); font-weight: 600;
  letter-spacing: -.045em; line-height: 1.02;
}
.phero__sub { margin-top: 22px; max-width: 60ch; font-size: clamp(1rem,1.4vw,1.125rem); line-height: 1.65; color: var(--ink-2); }
.ptags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.ptags li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: var(--r-pill);
  background: var(--bg-2); font-size: 14px; font-weight: 500; color: var(--ink-2);
}
.ptags .i { color: var(--accent); font-size: 16px; }

/* ---------- cards ---------- */
.pcard {
  background: var(--bg-1); border-radius: 30px; padding: clamp(26px,3vw,36px);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pcard__t { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px; }
.pcard__h { font-size: clamp(1.3rem,2.4vw,1.75rem); font-weight: 600; letter-spacing: -.035em; }
.pcard__p { margin-top: 12px; font-size: .95rem; line-height: 1.6; color: var(--ink-3); max-width: 52ch; }
.pcard__note { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }

/* ---------- login gate ---------- */
.plogin { padding-bottom: clamp(48px,6vw,84px); }
.pcard--login { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: clamp(34px,4.4vw,54px); }
.pcard__ico {
  display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 18px;
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); font-size: 26px;
}
.pcard--login .pcard__p { margin-inline: auto; }
.tgbtn { margin-top: 26px; min-height: 46px; display: flex; justify-content: center; }
#loginErr { color: var(--neg); }

/* ---------- cabinet ---------- */
.pcab { padding-bottom: clamp(48px,6vw,84px); }
.pcab__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }

.pgrid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.prow { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.prow:first-of-type { border-top: 0; padding-top: 0; }
.prow dt { font-size: .9rem; color: var(--ink-3); }
.prow dd { font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.pcard--bal { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 22%, var(--bg-1)), var(--bg-1) 62%); }
.pbal { font-family: var(--ff); font-size: clamp(2.2rem,4.4vw,3.25rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.pbal__cap { margin: 8px 0 22px; font-size: 13px; color: var(--ink-3); }
.pcard--bal .btn { margin-top: 20px; }

/* ten metrics, sized so they never drop below a readable two-up */
.pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 16px; }
.pstat { background: var(--bg-1); border-radius: 22px; padding: 22px; box-shadow: inset 0 0 0 1px var(--line); }
.pstat__k { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pstat__v { margin-top: 10px; font-family: var(--ff); font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ---------- referral materials ---------- */
.pmat { margin-top: 16px; }
.pmat__row { margin-top: 20px; }
.pmat__row label { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.pmat__field { display: flex; gap: 10px; align-items: stretch; }
.pmat__field input {
  flex: 1; min-width: 0; border: 0; outline: none;
  background: var(--field); color: var(--ink);
  border-radius: 16px; padding: 14px 16px;
  font-family: var(--fm); font-size: 13px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.pmat__field .btn { flex: none; }
.pmat__foot { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }

/* ---------- how it works ---------- */
.phow { padding: clamp(48px,6vw,90px) 0; }
.psteps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 34px; }
.psteps li { background: var(--bg-1); border-radius: 26px; padding: 30px; box-shadow: inset 0 0 0 1px var(--line); }
.pstep__n { font-family: var(--fm); font-size: 13px; font-weight: 600; color: var(--accent); }
.psteps h3 { margin-top: 16px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.03em; }
.psteps p { margin-top: 12px; font-size: .92rem; line-height: 1.6; color: var(--ink-3); }

/* ---------- terms, on the white sheet the brand uses for rhythm ---------- */
.pterms { padding-bottom: clamp(56px,7vw,110px); }
.ptgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px 34px; }
.ptgrid h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; color: #0A0A0A; }
.ptgrid p { margin-top: 10px; font-size: .92rem; line-height: 1.6; color: #8E8E93; }

@media (max-width: 900px) {
  .pgrid, .psteps, .ptgrid { grid-template-columns: minmax(0,1fr); }
  .ptgrid { gap: 24px; }
}
@media (max-width: 620px) {
  .pmat__field { flex-direction: column; }
  .pmat__field .btn { width: 100%; }
}