/* ============================================================
   Private equity. A solutions page built on the CRM Migration page:
   the body also carries .page--crm-migration, so the hero art, the
   slate accent, the FAQ and the closing all come from that page.
   This file only adds the pieces this page needs.
   ============================================================ */

/* ---- Section heads: the page's headings are long, so each one gets the
   full width (two lines, not four) and the intro sits below it ---- */
.page--private-equity .section-head { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.page--private-equity .section h2 { max-width: 34ch; text-wrap: balance; }
.page--private-equity .section-head .lede { max-width: 62ch; }

/* ---- The short answer: the question, then the one-sentence answer set
   large with its three steps marked, then the detail in two columns ---- */
.pe-answer-lead { margin-top: 56px; max-width: 40ch; font-family: var(--serif); font-weight: 450; font-size: 2.25rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink-500); text-wrap: pretty; }
.pe-clause { color: var(--ink-900); }
.pe-n { white-space: nowrap; }
.pe-n::before { content: attr(data-n) "\2009"; font-family: var(--font); font-size: 0.8125rem; font-weight: 600; line-height: 0; vertical-align: 0.9em; color: var(--sky-700); }
.pe-answer-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.pe-answer-more p { max-width: 48ch; color: var(--ink-600); }
.pe-trust.pe-why { margin-top: 24px; }
.pe-trust.pe-why li { grid-template-columns: 120px minmax(0, 1fr); }
.pe-answer-more strong { font-weight: 600; color: var(--ink-900); }
@media (max-width: 900px) { .pe-answer-lead { margin-top: 40px; font-size: 1.75rem; } .pe-answer-more { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; } }
@media (max-width: 600px) { .pe-answer-lead { font-size: 1.5rem; } }

/* ---- The problem: one customer as three CRMs record it, held beside the
   four points. As each point scrolls through the middle of the screen,
   the fields it talks about light up in the records. ---- */
.pe-problem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: start; }
.pe-records { position: sticky; top: 120px; margin: 0; display: grid; gap: 14px; }
.pe-rec { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 20px 18px; box-shadow: 0 10px 30px rgba(30, 35, 48, 0.05); }
.pe-rec:nth-child(1) { margin-right: 64px; }
.pe-rec:nth-child(2) { margin: 0 32px 0 32px; }
.pe-rec:nth-child(3) { margin-left: 64px; }
.pe-rec-h { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8125rem; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--ink-100); }
.pe-rec-h b { font-weight: 500; color: var(--ink-900); }
.pe-rec-h span { color: var(--ink-500); transition: color 0.35s ease; }
.pe-rec dl { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 7px 12px; font-size: 0.875rem; }
.pe-rec dt { color: var(--ink-500); }
.pe-rec dd { justify-self: start; margin: 0 -6px; padding: 0 6px; border-radius: var(--r-sm); color: var(--ink-900); overflow-wrap: anywhere; transition: background-color 0.35s ease, color 0.35s ease; }
.pe-rec dd.nil { color: var(--ink-400); font-style: italic; }
.pe-records .caption { margin-top: 10px; }
.pe-records[data-on="sys"] .pe-rec-h span { color: var(--sky-700); font-weight: 500; }
.pe-records[data-on="name"] dd[data-k="name"],
.pe-records[data-on="stage"] dd[data-k="stage"],
.pe-records[data-on="owner"] dd[data-k="owner"],
.pe-records[data-on="drift"] dd[data-k="name"],
.pe-records[data-on="drift"] dd[data-k="owner"] { background: var(--sky-50); color: var(--sky-700); }

.pe-points { list-style: none; margin: 0; padding: 0; counter-reset: pe; border-bottom: 1px solid var(--line); }
.pe-points li { counter-increment: pe; position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 40px 0; border-top: 1px solid var(--line); }
.pe-points li::before { content: counter(pe, decimal-leading-zero); grid-row: 1 / 3; padding-top: 5px; font-size: 0.8125rem; font-weight: 600; color: var(--sky-700); }
.pe-points li::after { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 2px; background: var(--sky-700); transition: width 0.5s var(--ease-out); }
.pe-points li.is-on::after { width: 120px; }
.pe-points h3 { font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-900); text-wrap: balance; }
.pe-points p { margin-top: 10px; color: var(--ink-600); max-width: 48ch; }
@media (max-width: 1000px) {
    .pe-problem { grid-template-columns: 1fr; gap: 56px; }
    .pe-records { position: static; }
}
@media (max-width: 600px) {
    .pe-rec:nth-child(n) { margin: 0; }
    .pe-rec { padding: 12px 16px 14px; }
    .pe-points li { grid-template-columns: 36px minmax(0, 1fr); padding: 32px 0; }
}

/* ---- The playbook: the rules that carry over, as a ruled list ---- */
.pe-rules { border-bottom: 1px solid var(--line); }
.pe-rules > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: baseline; padding: 28px 0; border-top: 1px solid var(--line); }
.pe-rules dt { font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-900); }
.pe-rules dd { color: var(--ink-600); max-width: 56ch; }
@media (max-width: 760px) { .pe-rules > div { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; } }

/* ---- Portfolio view: two points beside a small shared-customer table ---- */
.pe-portfolio { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.pe-duo > div + div { margin-top: 40px; }
.pe-duo h3 { font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-900); text-wrap: balance; }
.pe-duo p { margin-top: 10px; color: var(--ink-600); }
.pe-overlap { margin: 0; }
.pe-overlap-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.pe-overlap table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.9375rem; line-height: 1.4; }
.pe-overlap th { text-align: left; font-size: 0.8125rem; font-weight: 500; color: var(--ink-500); padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pe-overlap td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink-700); overflow-wrap: anywhere; }
.pe-overlap tr:last-child td { border-bottom: 0; }
.pe-overlap td:first-child { color: var(--ink-900); font-weight: 500; }
.pe-overlap td.pe-next { color: var(--sky-700); font-weight: 500; }
.pe-overlap th:first-child, .pe-overlap td:first-child { width: 30%; }
.pe-overlap th:last-child, .pe-overlap td:last-child { width: 30%; }
.pe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1000px) { .pe-portfolio { grid-template-columns: 1fr; gap: 56px; } }
@media (max-width: 600px) {
    .pe-overlap table { font-size: 0.875rem; }
    .pe-overlap table { table-layout: auto; }
    .pe-overlap th, .pe-overlap td { padding: 12px 8px; overflow-wrap: normal; }
    .pe-overlap th:first-child, .pe-overlap td:first-child { padding-left: 14px; }
    .pe-overlap th:first-child, .pe-overlap td:first-child, .pe-overlap th:last-child, .pe-overlap td:last-child { width: auto; }
}

/* ---- Before the exit: what a buyer checks, in three ruled columns ---- */
.pe-exit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pe-exit > div { padding: 28px 40px 0; border-left: 1px solid var(--line); }
.pe-exit > div:first-child { padding-left: 0; border-left: 0; }
.pe-exit h3 { font-size: 0.8125rem; font-weight: 500; color: var(--sky-700); }
.pe-exit p { margin-top: 12px; font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink-900); }
@media (max-width: 900px) {
    .pe-exit { grid-template-columns: 1fr; }
    .pe-exit > div { padding: 24px 0; border-left: 0; }
    .pe-exit > div + div { border-top: 1px solid var(--line); }
}

/* ---- You stay in control: the promise on the left, a merge waiting for
   approval on the right. When it scrolls in, the evidence fills in, the
   button presses, and the log line with Undo appears. ---- */
.pe-control-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: center; }
.pe-control-text .lede { margin-top: 24px; max-width: 46ch; }
.pe-trust { list-style: none; margin: 40px 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.pe-trust li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.pe-trust span { font-size: 0.8125rem; font-weight: 500; color: var(--sky-700); }
.pe-trust p { color: var(--ink-700); }
.pe-approve { margin: 0; }
.pe-approve-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 24px 20px; box-shadow: 0 24px 60px rgba(30, 35, 48, 0.08); }
.pe-approve-h { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8125rem; }
.pe-approve-h b { font-weight: 500; color: var(--ink-900); }
.pe-approve-h span { color: var(--ink-500); }
.pe-approve-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 18px; }
.pe-approve-pair > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); font-family: var(--serif); font-size: 1.125rem; color: var(--ink-900); }
.pe-approve-pair > div:last-child { border-color: var(--sky-200); background: var(--sky-50); }
.pe-approve-pair small { display: block; margin-bottom: 2px; font-family: var(--font); font-size: 0.75rem; color: var(--ink-500); }
.pe-approve-pair i { font-style: normal; color: var(--sky-700); }
.pe-approve-ev { margin-top: 20px; }
.pe-ev-h { font-size: 0.75rem; font-weight: 500; color: var(--ink-500); padding-bottom: 8px; border-bottom: 1px solid var(--ink-100); }
.pe-approve-ev dl { display: grid; grid-template-columns: 76px minmax(0, 1fr); font-size: 0.875rem; }
.pe-approve-ev dt, .pe-approve-ev dd { padding: 9px 0; border-bottom: 1px solid var(--ink-100); }
.pe-approve-ev dt { color: var(--ink-500); }
.pe-approve-ev dd { color: var(--ink-900); }
.pe-approve-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.pe-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--r); font-size: 0.875rem; font-weight: 500; border: 1px solid var(--line); color: var(--ink-700); background: #fff; transition: transform 0.12s ease, background-color 0.2s ease; }
.pe-btn--primary { background: var(--sky-700); border-color: var(--sky-700); color: #fff; }
.pe-approve-log { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ink-100); font-size: 0.8125rem; color: var(--ink-600); }
.pe-approve-log u { text-decoration: none; font-weight: 500; color: var(--sky-700); }
.pe-approve .caption { margin-top: 14px; }

html.js .pe-approve-ev dt, html.js .pe-approve-ev dd { opacity: 0; transform: translateY(4px); transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
html.js .pe-approve-ev dt:nth-of-type(2), html.js .pe-approve-ev dd:nth-of-type(2) { transition-delay: 0.25s; }
html.js .pe-approve-ev dt:nth-of-type(3), html.js .pe-approve-ev dd:nth-of-type(3) { transition-delay: 0.5s; }
html.js .pe-approve-ev dt:nth-of-type(4), html.js .pe-approve-ev dd:nth-of-type(4) { transition-delay: 0.75s; }
html.js .pe-approve.is-played .pe-approve-ev dt, html.js .pe-approve.is-played .pe-approve-ev dd { opacity: 1; transform: none; }
html.js .pe-approve.is-pressed .pe-btn--primary { transform: scale(0.95); background: var(--ink-900); border-color: var(--ink-900); }
html.js .pe-approve-log { opacity: 0; transform: translateY(4px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
html.js .pe-approve.is-logged .pe-approve-log { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.js .pe-approve-ev dt, html.js .pe-approve-ev dd, html.js .pe-approve-log { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 1000px) { .pe-control-grid { grid-template-columns: 1fr; gap: 56px; } }
@media (max-width: 600px) {
    .pe-approve-card { padding: 18px 16px 16px; }
    .pe-approve-pair { grid-template-columns: 1fr; gap: 6px; }
    .pe-approve-pair i { transform: rotate(90deg); justify-self: center; }
    .pe-trust li, .pe-trust.pe-why li { grid-template-columns: 1fr; gap: 4px; }
    .pe-approve-log { flex-direction: column; gap: 6px; }
}

/* ---- For partners: the heading, then who does what in two lanes ---- */
.pe-partners-head { max-width: 760px; }
.pe-partners-head .lede { margin-top: 24px; }
.pe-partners-head .lede strong { font-weight: 600; color: var(--ink-900); }
.pe-lanes { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); margin-top: 64px; border-top: 1px solid var(--line); }
.pe-lane { padding: 28px 40px 8px 0; }
.pe-lane--quill { padding-left: 40px; border-left: 1px solid var(--line); }
.pe-lane h3 { font-size: 0.8125rem; font-weight: 500; color: var(--ink-600); }
.pe-lane--quill h3 { color: var(--sky-700); }
.pe-lane ul { list-style: none; margin: 16px 0 0; padding: 0; }
.pe-lane li { font-family: var(--serif); font-weight: 450; font-size: 1.75rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-900); padding: 6px 0; }
.pe-partners .handoff-foot { margin-top: 48px; }
@media (max-width: 760px) {
    .pe-lanes { grid-template-columns: 1fr; margin-top: 40px; }
    .pe-lane { padding: 24px 0 8px; }
    .pe-lane--quill { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
    .pe-lane li { font-size: 1.375rem; }
}