/* The partner page. Everything structural comes from site.css and home.css; this file
   is only the parts that page has and no other: the four kinds, the two columns of
   commitments, the steps, and the application form. */

/* A subpage has no hero behind the nav, so the bar is solid from the first pixel and the
   first chapter has to clear it. */
body.sub #nav{position:sticky}
.p-hero{padding-top:clamp(64px,8vw,104px)}
.p-hero h1{font-size:clamp(38px,4.4vw,60px);font-weight:600;letter-spacing:-.03em;line-height:1.02;margin:0 0 20px}
.p-hero .lede{margin-bottom:18px}
.p-note{max-width:62ch;color:var(--muted);font-size:15.5px;line-height:1.55;
  border-left:2px solid var(--turq);padding-left:16px;margin:0 0 26px}

/* The hero holds its diagram beside the copy on a wide screen and under it on a narrow
   one, where a 520-unit drawing beside text would shrink both. */
.p-hero .inner{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:48px;align-items:center}
.p-hero .inner > *:not(.p-diag){grid-column:1}
.p-diag{grid-column:2;grid-row:1 / span 6;width:100%;height:auto;align-self:center}
.d-clients circle{fill:rgba(0,194,168,.1);stroke:rgba(0,194,168,.5);stroke-width:1.5}
.d-clients text{fill:var(--turq);font-family:var(--mono);font-size:15px;text-anchor:middle}
.d-cap,.d-sub{fill:var(--muted)!important;font-family:var(--mono)!important;font-size:12px!important;
  letter-spacing:.1em;text-anchor:middle}
.d-wire{color:rgba(95,176,255,.55)}
.d-wire path{fill:none;stroke:currentColor;stroke-width:1.6}
.d-wire.sub{color:rgba(0,194,168,.6)}
.d-wire.sub path{stroke-dasharray:5 5}
.d-you rect{fill:rgba(95,176,255,.12);stroke:var(--sky);stroke-width:1.5}
.d-us rect{fill:rgba(0,194,168,.1);stroke:var(--turq);stroke-width:1.5}
.d-you text,.d-us text{font-family:var(--display);font-weight:600;font-size:17px;
  text-anchor:middle;fill:var(--ink)}

/* ── the four kinds ── */
.p-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:34px}
.p-card{background:#fff;border:1px solid #dfe5ee;border-radius:var(--r);padding:24px 26px}
.p-card h3{font-size:19px;color:#0b2a4a;margin-bottom:8px}
.p-card p{color:#3d5473;font-size:15.5px;line-height:1.55;margin:0}

/* ── what each side commits to ── */
.p-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.p-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--turq);font-weight:400;margin:0 0 18px}
.p-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.p-list li{font-size:15.5px;line-height:1.55;color:var(--ink-2);padding-left:18px;position:relative}
.p-list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--turq)}
.p-list b{color:var(--ink);font-weight:600}

/* ── the steps ── */
.p-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin:34px 0 0;padding:0;counter-reset:none}
.p-steps li{border-top:2px solid #cfd8e6;padding-top:16px}
.p-steps span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  color:#00806f;margin-bottom:8px}
.p-steps b{display:block;font-family:var(--display);font-weight:600;font-size:18px;
  letter-spacing:-.01em;color:#0b2a4a;margin-bottom:6px}
.p-steps p{font-size:15px;line-height:1.5;color:#3d5473;margin:0}

/* ── the application ── */
.p-form{display:grid;gap:22px;margin-top:30px}
.p-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.p-set{border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px 20px;margin:0}
.p-set legend{font-size:14px;color:var(--ink-2);font-weight:500;padding:0 8px}
.p-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.p-checks.wide{grid-template-columns:repeat(4,1fr)}
.p-check{display:flex;align-items:center;gap:10px;border:1px solid var(--rule-2);
  background:#071e36;border-radius:var(--r-sm);padding:11px 13px;font-size:14.5px;
  color:var(--ink-2);cursor:pointer;transition:border-color .15s,color .15s}
.p-check:hover{border-color:var(--sky);color:var(--ink)}
.p-check input{width:16px;height:16px;margin:0;flex:0 0 auto;accent-color:var(--turq)}
.p-check:has(input:checked){border-color:var(--turq);color:var(--ink)}
.p-legal{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0}
.p-submit{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.p-status{margin:0;font-size:14.5px;color:var(--muted)}
.p-status.bad{color:var(--danger)}
.p-status.good{color:var(--leaf)}
/* A field the page itself marked wrong, so the first one is findable without scrolling. */
.p-form .wrong input,.p-form .wrong select,.p-form .wrong textarea,
.p-set.wrong{border-color:var(--danger)}

/* What replaces the form once it has been sent. The page does not pretend to be a
   different page: the answer stands where the question was. */
.p-done{border:1px solid rgba(0,194,168,.4);background:rgba(0,194,168,.07);
  border-radius:var(--r);padding:26px 28px;margin-top:30px}
.p-done h3{font-size:20px;margin-bottom:10px}
.p-done p{color:var(--ink-2);font-size:15.5px;line-height:1.6;margin:0 0 10px}
.p-done p:last-child{margin-bottom:0}

@media (max-width:1100px){
  .p-hero .inner{grid-template-columns:1fr}
  .p-diag{grid-column:1;grid-row:auto;max-width:520px;margin-top:8px}
}
@media (max-width:860px){
  .p-grid,.p-two,.p-row,.p-checks{grid-template-columns:1fr}
  .p-checks.wide{grid-template-columns:1fr 1fr}
  .p-steps{grid-template-columns:1fr;gap:18px}
}

/* the portal section and the two places it is linked from */
.p-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.p-portal-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:26px}
.p-portal-cta .muted{font-size:14px}
#portal .p-grid{grid-template-columns:1fr 1fr;margin-top:30px}
@media(max-width:860px){#portal .p-grid{grid-template-columns:1fr}}