/* =============================================================
   QMerse — p-partners.css (Partners page only; loads after site.css)
   The headline over the real canvas, what partners get as two ruled lists, who owns the client
   (a ruled list beside the refer-or-resell switch), the Founding Builder terms, and the application form.
   ============================================================= */

/* ---- Hero: words, then the canvas full width ---- */
.fp-note { margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--text-mute); }
.fp-note a { border-bottom: 1px solid var(--line-2); transition: color 0.25s, border-color 0.25s; }
.fp-note a:hover { color: var(--acc-hi); border-color: var(--acc); }
.ph-shot { margin-top: clamp(40px, 5vw, 72px); border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; background: #0d141d; box-shadow: 0 50px 120px -50px var(--shadow); }
.ph-shot img { width: 100%; height: auto; }

/* ---- What partners get: two ruled lists ---- */
.bn-plans { margin-top: 20px; }
.bn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); }
.bn-g > h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 2.4vw, 34px); letter-spacing: -0.02em; color: var(--text); padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.bn-g li { padding: 24px 0; border-bottom: 1px solid var(--line); }
.bn-g h4 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(18px, 1.5vw, 21px); letter-spacing: -0.012em; line-height: 1.3; color: var(--text); margin-bottom: 8px; }
.bn-g p { font-size: 16px; line-height: 1.6; color: var(--text-mute); max-width: 34em; }
@media (max-width: 880px) { .bn { grid-template-columns: minmax(0, 1fr); } }

/* ---- You own the client relationship: who does what, beside the refer-or-resell switch ---- */
.rel-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.rel-list { border-top: 1px solid var(--tp-line); }
.rel-list li { padding: 22px 0; border-bottom: 1px solid var(--tp-line); }
.rel-list h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 2vw, 30px); letter-spacing: -0.02em; line-height: 1.15; color: var(--tp-ink); margin-bottom: 6px; }
.rel-list p { font-size: 16px; line-height: 1.6; color: var(--tp-mute); }
.contract { color: var(--tp-ink); }
.ct-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.ct-k { font-family: var(--font-sans); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--tp-ink); }
.ct-seg { --track: rgba(29,39,42,0.07); --seg-on: #ffffff; }
.ct-seg button { color: var(--tp-mute); }
.ct-seg button[aria-pressed="true"] { color: var(--tp-ink); box-shadow: 0 1px 2px rgba(11,17,24,0.14), 0 0 0 1px var(--tp-line); }
.ct-seg button:not([aria-pressed="true"]):hover { color: var(--tp-ink); }
.ct-vis { margin: 18px 0 14px; padding: 12px; border: 1px solid var(--tp-line); border-radius: 10px; background-color: #fff; }
.ct-vis svg { display: block; width: 100%; height: auto; }
.ct-node { fill: #fff; stroke: var(--tp-line); stroke-width: 1.2; }
.ct-node.q { fill: rgba(11,82,208,0.07); stroke: var(--tp-acc); }
.ct-t { font-family: var(--font-sans); font-size: 11px; fill: var(--tp-mute); }
.ct-t.b { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; fill: var(--tp-ink); }
.ct-t.ok { fill: var(--tp-ok); }
.ct-line { stroke: var(--tp-acc); stroke-width: 1.4; stroke-dasharray: 4 4; }
.ct-line.ok { stroke: var(--tp-ok); }
.ct-head-m { fill: var(--tp-acc); }
.ct-mode { transition: opacity 0.45s var(--ease); }
.contract[data-mode="refer"] .ct-resell, .contract[data-mode="resell"] .ct-refer { opacity: 0; }
.ct-txt p { font-family: var(--font-serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -0.012em; color: var(--tp-ink); }
.ct-txt p:not([hidden]) { animation: rmFade 0.45s ease both; }
html:not(.js) .ct-seg, html:not(.js) .ct-vis { display: none; }
html:not(.js) .ct-txt p[hidden] { display: block; }
.zap-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 40px; margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--tp-line); }
.zap-line p { max-width: 52em; font-size: 16px; line-height: 1.6; color: var(--tp-mute); }
.zap-line b { font-weight: 500; color: var(--tp-ink); }
@media (max-width: 980px) { .rel-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ct-vis { margin-inline: calc(-1 * var(--gutter)); padding: 8px 0; border-inline: 0; border-radius: 0; }
  .ct-t { font-size: 12.5px; }
  .ct-t.b { font-size: 12px; }
}

/* ---- Founding Builders: a large five beside the three terms ---- */
.found-in { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.found-five { position: sticky; top: 110px; }
.ff-n { display: block; font-family: var(--font-serif); font-size: clamp(180px, 22vw, 320px); line-height: 0.8; letter-spacing: -0.04em; color: var(--acc); }
.perks { border-top: 1px solid var(--line-2); }
.perk { padding: 28px 0; border-bottom: 1px solid var(--line-2); }
.perk h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 10px; }
.perk p { font-size: 16px; line-height: 1.65; color: var(--text-mute); max-width: 36em; }
@media (max-width: 880px) { .found-in { grid-template-columns: minmax(0, 1fr); } .found-five { display: none; } }

/* ---- Apply: a few words beside the form ---- */
.apply-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.apply-side { position: sticky; top: 110px; }
.apply-side .lede { margin-top: 22px; font-size: clamp(17px, 1.4vw, 20px); }
.apply-alt { margin-top: 22px; font-size: 15.5px; line-height: 1.6; color: var(--tp-mute); }
.apply-alt a { color: var(--tp-acc); border-bottom: 1px solid currentColor; }
@media (max-width: 980px) { .apply-in { grid-template-columns: minmax(0, 1fr); } .apply-side { position: static; } }