/* =============================================================
   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; }

.bn-plans { margin-top: 20px; }

/* ---- 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="resell"] .ct-addon, .contract[data-mode="addon"] .ct-resell { opacity: 0; }
.ct-fine { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--tp-mute); }
.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; } }


/* ---- Icon tiles: why partner, and what you build. A line icon, a short title, one line ---- */
.pt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pt { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px; border: 1px solid var(--tp-line, var(--line)); border-radius: var(--radius-lg);
  background: var(--tp-bg, var(--bg)); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); }
html[data-theme="light"] .why-partner .pt { background: #fff; }
.pt-dark .pt { background: var(--surface); border-color: var(--line); }
.pt:hover { border-color: var(--tp-acc, var(--acc)); transform: translateY(-2px); }
.pi { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: rgba(var(--acc-rgb), 0.09); }
.pi svg { width: 30px; height: 30px; stroke: var(--tp-ink, var(--text)); }
.pi svg .ac { stroke: var(--tp-acc, var(--acc-hi)); }
.pt h3 { margin-top: 6px; font-family: var(--font-sans); font-weight: 500; font-size: 19px; letter-spacing: -0.012em; line-height: 1.25; color: var(--tp-ink, var(--text)); }
.pt p { font-size: 15px; line-height: 1.5; color: var(--tp-mute, var(--text-mute)); }
.pb-foot { margin-top: 26px; font-size: 15.5px; color: var(--tp-mute); }
.pb-foot .text-link { margin-left: 8px; }
@media (max-width: 980px) { .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pt-grid { grid-template-columns: 1fr; gap: 10px; } .pt { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 16px; padding: 18px; } .pt h3 { margin: 0; flex: 1; } .pt p { flex-basis: 100%; } }

/* ---- What a domain partner builds: on your own, or with us ---- */
.bn-how { margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: rgba(var(--acc-rgb), 0.05); }
.bn-how-k { font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.02em; line-height: 1.15; color: var(--text); margin-bottom: 18px; }
.bn-how-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(24px, 4vw, 56px); }
.bn-how h4 { font-family: var(--font-sans); font-weight: 500; font-size: 18px; line-height: 1.3; color: var(--text); margin-bottom: 6px; }
.bn-how p { font-size: 15.5px; line-height: 1.6; color: var(--text-mute); }
.bh { display: flex; align-items: center; gap: 16px; }
@media (max-width: 720px) { .bn-how-g { grid-template-columns: 1fr; } }