/* ==========================================================================
   Thrive at Work: company pages, group A (/partners, /privacy)
   Loaded after /redesign.css and /css/pages.css. Scoped extras only: nothing here
   changes a shared class outside .pn-* / .pv-*.
   ========================================================================== */

/* ---------- /partners ---------- */
/* No photo of its own (the page's only images are partner marks and one portrait, which
   must not lead), so the hero takes the homepage partner head's composition instead:
   the H1 across the page, the lede set to the right underneath it. */
.pn-ph .ph-copy{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.pn-ph .ph-copy>*{grid-column:1/-1}
/* the homepage partner head's split: first half left, second half pushed right */
.pn-h{display:flex;flex-wrap:wrap;column-gap:.24em}
.pn-h>span:last-child{margin-left:auto}
.pn-ph .ph-lede{grid-column:7/13;max-width:30.2em}
/* above 1100 the hero runs on the partner rows' own columns, so the lede starts on the
   descriptions' left edge below it (not 40px off it) */
@media (min-width:1101px){
  .pn-ph .ph-copy{grid-template-columns:48px 132px minmax(0,1fr) minmax(0,1.45fr);column-gap:clamp(16px,2.8vw,48px)}
  .pn-ph .ph-lede{grid-column:4}
}

/* the partner list starts right under the hero's hairline */
.pn{padding-top:clamp(40px,4.4vw,72px)}
.pn-list{margin-top:0}
/* the homepage rows, plus each partner's link under its description: rows run taller,
   so the cells align to the top and the number sits on the name's first line */
.pn-list .pt-row{align-items:start;padding:clamp(28px,3vw,40px) 0}
.pn-list .pt-n{padding-top:1.05em}
.pn-list .pt-name{padding-top:6px}
.pn-list .pt-desc{padding-top:8px}
.pn-list .pt-desc .tlink{margin-top:6px;color:var(--ink)}
.pn-list .pt-desc .tlink .ic{width:.95em;height:.95em}
.pn-more{display:flex;justify-content:center;margin-top:clamp(56px,6vw,96px)}
.pn-more .bullet{font:400 var(--fs-title)/1 var(--serif);gap:.7em}

/* ---------- /privacy ---------- */
/* hero: label and H1 across the page, then the note's own two columns, so the hero
   lines up with the rows below: the date in the heading margin (hairline first, like
   each row), the lede on the reading column's left edge. Stacked from 960 down. */
.pv-ph .ph-copy{grid-column:1/-1}
@media (min-width:961px){
  .pv-ph .ph-copy{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,6vw,104px);align-items:start}
  .pv-ph .ph-copy>*{grid-column:1/-1}
  .pv-ph .ph-lede{grid-column:2;grid-row:3}
  .pv-ph .pv-upd{grid-column:1;grid-row:3;margin-top:clamp(22px,2.6vw,34px)}
}
.pv-upd{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(24px,2.6vw,32px);padding-top:18px;border-top:1px solid var(--rule);min-width:min(100%,24em);font-size:var(--fs-small);color:var(--fg2);font-variant-numeric:tabular-nums}
.pv-upd::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--teal)}

/* the note: one row per part, its heading in the left margin (sticky while the text
   beside it scrolls), the text in a single reading column of about 70 characters */
.pv{padding-top:clamp(24px,3vw,48px)}
.pv-sec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px clamp(40px,6vw,104px);align-items:start;padding:clamp(40px,4.4vw,64px) 0;border-top:1px solid var(--rule)}
.pv-side{position:sticky;top:calc(var(--hd) + 32px);display:flex;flex-direction:column;gap:14px}
.pv-h{font:400 var(--fs-title)/1.1 var(--serif-t);letter-spacing:-.01em;color:var(--ink);text-wrap:balance;max-width:12em}
.pv .prose{max-width:38em;font-size:var(--fs-body)}
.pv .prose p,.pv .prose li{line-height:1.75}
.pv .prose li+li{margin-top:.8em}
/* the way out sits under the reading column */
.pv-end{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,6vw,104px);padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--rule)}
.pv-back{grid-column:2;justify-self:start}
.pv-back:hover .ic,.pv-back:focus-visible .ic{transform:translateX(-4px)}

@media (max-width:1100px){
  .pv-sec,.pv-end{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  /* rows stack the description under the name here: keep it close to its name */
  .pn-list .pt-row{row-gap:18px}
  .pn-list .pt-desc{padding-top:0}
}
@media (max-width:960px){
  /* the rows' tablet columns: the lede starts on the partner names' left edge */
  .pn-ph .ph-copy{grid-template-columns:40px 116px minmax(0,1fr);column-gap:clamp(16px,2.8vw,48px)}
  .pn-ph .ph-lede{grid-column:3}
}
@media (max-width:760px){
  .pn-ph .ph-lede{grid-column:1/-1}
  .pn-h{display:block}
  .pv-sec{grid-template-columns:minmax(0,1fr);padding:36px 0 40px}
  .pv-side{position:static;gap:10px}
  .pv-end{grid-template-columns:minmax(0,1fr)}
  .pv-back{grid-column:1}
  .pn-list .pt-row{row-gap:14px}
  .pn-list .pt-n{padding-top:16px}
}

@media print{
  .pv-side{position:static!important}
}