/* ══════════════════════════════════════════════════════════════
   LIBRARY AND PROOF GROUP: Tier 1B design pass (W session, 2026-10-25)
   Loaded last on: the Learning Library (/blog/), its 3 posts, the quiz, the Outcomes Report,
   Reviews (/results/), the case studies index and the 11 case studies. Layout only; no copy here.
   Body classes: proof + pf-library | pf-post | pf-quiz | pf-outcomes | pf-results | pf-csindex | pf-case
   Log: Departments/strategy/execution/design-lane-1b-proof-2026-10-25.md
   ══════════════════════════════════════════════════════════════ */

/* ── Shared ── */
body.proof :is(h1,h2,h3){text-wrap:balance !important}
@media (max-width:720px){body.proof :is(h1,h2) .nowrap{white-space:normal}}
body.proof .pg-hero .pg-byline{font-size:14px !important;letter-spacing:.02em !important;color:rgba(255,255,255,.82) !important}
body.proof .pg-hero .pg-sub{max-width:62ch;margin-left:auto;margin-right:auto}
@media (max-width:720px){body.proof .pg-hero :is(.pg-byline,.pg-sub,h1){text-align:left !important}}
/* Quote marks: one mark, the same everywhere (Georgia, teal, readable size) */
body.proof .rq .rq-mark,body.proof .q-light .qm{font:400 0/0 Georgia,serif !important;height:34px;margin:0 0 8px !important;color:transparent}
body.proof .rq .rq-mark::before,body.proof .q-light .qm::before{content:"\201C";display:block;font:400 60px/.9 Georgia,serif;color:var(--teal,#1FC3CC)}
body.proof .rq.tp-card .rq-mark::before{color:var(--teal,#1FC3CC)}
/* Accents: never a sliver that ignores the card's corners */
body.proof :is(.res-card,.rq,.hcell,.cs-card,.frame-card,.ai-card){border-top-width:1px !important;border-left-width:1px !important;border-color:var(--ds-line,rgba(22,51,63,.10)) !important}
body.proof :is(.res-card,.rq,.hcell,.cs-card,.frame-card){border-radius:18px !important;box-shadow:0 18px 40px -30px rgba(22,51,63,.45) !important}
/* Dark sections: small links and labels in sky */
body.proof :is(.sec-navy,.rq-stat) :is(.arrow-link,.qa,small,cite,.chap){color:var(--sky,#8FE8ED) !important}
/* Phones: the closing panel's buttons fit; stacked cards in the closing panel */
@media (max-width:720px){
  body.proof section.sec-navy .btn{letter-spacing:.04em !important;font-size:12px !important;padding-left:14px !important;padding-right:14px !important;white-space:nowrap}
  body.proof section.sec-navy :is(.slim-cards,.cs-next,.np-cards,.next-grid){grid-template-columns:1fr !important;display:grid !important}
}
/* The byline sits on one rule, not three */
body.proof .byline{border-top:0 !important}

/* ── Posts (pf-post) and the Library: one reading column (720) for every block ── */
body.proof.pf-post section.sec > .container > :is(div[style*="max-width:760px"],.tldr,.faq-list,.tool-cards,.ep-card,.lk-table,.lk-prose,.lk-item,.byline){max-width:720px !important;margin-left:auto !important;margin-right:auto !important}
body.proof.pf-post.calm section.sec :is(div[style*="max-width:760px"],.lead-prose,.lk-prose){max-width:720px !important}
body.proof.pf-post .tool-cards{justify-content:center}
/* The table of contents as a two-column card list under the centered heading */
body.proof .toc-list{list-style:none;counter-reset:toc;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;max-width:720px;margin:24px auto 0 !important;padding:0 !important;line-height:1.4 !important}
body.proof .toc-list li{counter-increment:toc;margin:0}
body.proof .toc-list a{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--ds-line,rgba(22,51,63,.10));border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--navy,#223A4C);font-weight:600;font-size:15px;height:100%}
body.proof .toc-list a::before{content:counter(toc);flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--ds-tint,#EEF6F4);color:var(--ds-teal-text,#0A6870);font-size:13px}
body.proof .toc-list a:hover{border-color:rgba(10,104,112,.35)}
@media (max-width:620px){body.proof .toc-list{grid-template-columns:1fr}}
/* The eight signs as a numbered card grid */
body.proof .pf-signs{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1136px;margin:0 auto}
body.proof .pf-signs .lk-item{max-width:none !important;margin:0 !important;background:#fff;border:1px solid var(--ds-line,rgba(22,51,63,.10));border-radius:18px;padding:26px 26px 22px;box-shadow:0 18px 40px -30px rgba(22,51,63,.45)}
body.proof .pf-signs .lk-item h3{display:flex;gap:14px;align-items:flex-start;font-size:20px !important;line-height:1.3}
body.proof .pf-n{flex:0 0 40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--teal,#1FC3CC);color:transparent;font-size:0;line-height:0;overflow:hidden}
body.proof .pf-n::before{content:attr(data-n);color:#fff;font:600 17px/1 var(--font-display)}
body.proof .pf-signs .lk-item p{font-size:15.5px;line-height:1.7}
@media (max-width:820px){body.proof .pf-signs{grid-template-columns:1fr}}
/* The vocabulary table stacks on phones */
@media (max-width:620px){
  body.proof .lk-table table,body.proof .lk-table tbody,body.proof .lk-table tr,body.proof .lk-table td{display:block;width:100%}
  body.proof .lk-table thead{display:none}
  body.proof .lk-table tr{padding:12px 0}
  body.proof .lk-table td{padding:2px 0 !important}
  body.proof .lk-table td + td::before{content:"\2192\00a0";color:var(--ds-teal-text,#0A6870)}
}
/* FAQs and cards: one title face */
body.proof :is(.ep-card .ep-t,.res-card h3,.tool-cards h3){font-family:var(--font-display) !important;font-weight:500 !important}
/* The related list reads at body size */
body.proof .series-block :is(a,li){font-size:16px}

/* ── Library (pf-library): a lone card spans its row as a wide card ── */
body.proof.pf-library .res-grid > .res-card:only-child{grid-column:1 / -1;display:grid;grid-template-columns:200px 1fr auto;align-items:center;gap:6px 28px}
body.proof.pf-library .res-grid > .res-card:only-child .r-tag{grid-column:1;grid-row:1 / span 2;align-self:center}
body.proof.pf-library .res-grid > .res-card:only-child h3{grid-column:2;margin:0}
body.proof.pf-library .res-grid > .res-card:only-child p{grid-column:2;margin:0}
body.proof.pf-library .res-grid > .res-card:only-child .arrow-link{grid-column:3;grid-row:1 / span 2;align-self:center;white-space:nowrap}
@media (max-width:720px){body.proof.pf-library .res-grid > .res-card:only-child{display:flex;flex-direction:column;align-items:flex-start}}
/* two cards share the row equally (a 1/3 + 2/3 split left the wide card mostly empty) */
body.proof.pf-library .res-grid:has(> .res-card:nth-child(2):last-child){grid-template-columns:1fr 1fr !important}
/* Phones: card rows swipe instead of stacking twelve screens */
@media (max-width:720px){body.proof.pf-library .res-grid:has(> .res-card + .res-card){display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px !important;margin:0 calc(50% - 50vw) -12px !important;padding:4px calc(50vw - 50%) 30px !important;scrollbar-width:none}
  body.proof.pf-library .res-grid:has(> .res-card + .res-card) > .res-card{flex:0 0 84%;scroll-snap-align:center}}

/* ── Quiz (pf-quiz) ── */
body.proof.pf-quiz iframe{border-radius:18px;border:1px solid var(--ds-line,rgba(22,51,63,.10)) !important;background:#fff;box-shadow:0 18px 40px -30px rgba(22,51,63,.45)}

/* ── Outcomes (pf-outcomes) ── */
body.proof.pf-outcomes #employers .head{margin-bottom:30px}
body.proof.pf-outcomes #employers .marquee{margin:10px 0}
body.proof.pf-outcomes .f-num em{font-style:normal;color:var(--ds-teal-text,#0A6870);font-size:.55em;margin-left:2px}
body.proof.pf-outcomes .finding{display:flex;flex-direction:column}
body.proof.pf-outcomes .finding .f-src{margin-top:auto;padding-top:12px}
body.proof.pf-outcomes .seg{font-size:13px !important;font-weight:600}
body.proof.pf-outcomes :is(.mb-key,.mb-n,.mb-lbl){font-size:13.5px !important}
body.proof.pf-outcomes .mb-top{flex-wrap:nowrap;gap:12px}
@media (max-width:720px){body.proof.pf-outcomes .slim-row{grid-template-columns:1fr !important}}

/* ── Reviews (pf-results) ── */
body.proof.pf-results .rq-grid{align-items:stretch}
body.proof.pf-results .rq.big{grid-row:auto}
body.proof.pf-results .rq{display:flex;flex-direction:column}
body.proof.pf-results .rq .rq-who{margin-top:auto}
body.proof.pf-results .rq-stars{color:var(--teal,#1FC3CC) !important}
body.proof.pf-results .rq-stat .arrow-link{color:var(--sky,#8FE8ED) !important}
/* One tab style: the big segmented tabs take the chip look */
body.proof.pf-results .res-tab{font-family:var(--font-body) !important;font-weight:600 !important;font-size:14px !important;padding:12px 18px !important}
body.proof.pf-results .res-tab .rt-script{font-family:inherit !important;font-size:1em !important;line-height:inherit !important;color:inherit !important}
/* Phones: the company cards as a two-column compact grid */
@media (max-width:720px){
  body.proof.pf-results .hired-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important}
  body.proof.pf-results .hired .hcell{padding:14px 12px !important}
  body.proof.pf-results .hired .hcell .nm{font-size:15px !important}
}
/* "Is AIDA legit?" answers read as separated blocks */
body.proof.pf-results #legit h3{font-size:21px !important;margin-top:34px;padding-top:24px;border-top:1px solid var(--ds-line,rgba(22,51,63,.10))}
body.proof.pf-results #legit h3:first-of-type{border-top:0;padding-top:0}

/* ── Case studies index (pf-csindex) ── */
/* One accent color for every card (the teal/copper alternation meant nothing) */
body.proof.pf-csindex .csx-card::before{display:none !important}
body.proof.pf-csindex .csx-card{border:1px solid var(--ds-line,rgba(22,51,63,.10)) !important;border-radius:18px !important}
body.proof.pf-csindex .csx-card .csx-arc{background:var(--ds-tint,#EEF6F4) !important}
body.proof.pf-csindex .csx-card .a-line{background:linear-gradient(90deg,rgba(31,195,204,.25),var(--teal,#1FC3CC)) !important}
body.proof.pf-csindex .csx-card .a-line::after{border-left-color:var(--teal,#1FC3CC) !important}
body.proof.pf-csindex .csx-card .csx-tag{font:600 13px/1.35 var(--font-body) !important;letter-spacing:.02em !important;text-transform:none !important}
/* The last card on an odd row spans the grid */
body.proof.pf-csindex #csxGrid > .csx-card:last-child:nth-child(odd){grid-column:1 / -1}

/* ── Case study template (pf-case) ── */
/* The facts card now sits right under the hero (moved by the script): it reads as the summary */
body.proof.pf-case .cs-facts-top{padding:56px 0 8px !important}
body.proof.pf-case .cs-facts .frame-card{max-width:900px;margin:0 auto}
/* The monogram tile: smaller and level (a placeholder for the grad's photo) */
body.proof.pf-case .cs-big.is-mono .cs-photo--mono{transform:none !important;max-width:300px;aspect-ratio:1/1;margin-left:auto}
body.proof.pf-case .cs-big.is-mono .cs-mono{font-size:96px !important}
@media (max-width:900px){body.proof.pf-case .cs-big.is-mono .cs-photo--mono{display:none}}
/* Chapters: a narrower rail, the label as a real marker */
body.proof.pf-case .cs-article .bio-chap{grid-template-columns:200px minmax(0,1fr) !important;gap:18px 48px !important}
body.proof.pf-case .cs-article .bio-chap .chap{font:600 15px/1.3 var(--font-body) !important;letter-spacing:.02em !important;text-transform:none !important;color:var(--ds-attr,#8A4F2E) !important;padding-top:4px;border-top:2px solid var(--teal,#1FC3CC);padding-top:10px;max-width:160px}
body.proof.pf-case .cs-article .bio-chap.cs-words .chap{color:var(--sky,#8FE8ED) !important}
body.proof.pf-case .cs-article .bio-chap p{color:#3F5260}
/* Bands: one calm alternation (page ground and the soft tint), the navy quote band kept */
body.proof.pf-case .cs-article .bio-chap:nth-of-type(even){background:#F4F8F7 !important;box-shadow:0 0 0 100vmax #F4F8F7 !important}
body.proof.pf-case .cs-article .bio-chap.cs-words{background:var(--navy) !important;box-shadow:0 0 0 100vmax var(--navy) !important}
body.proof.pf-case .cs-article .bio-chap.cs-words .q-light.cs-pull{border-left:2px solid var(--teal) !important;border-radius:0 !important;padding-left:26px !important}
body.proof.pf-case .cs-article .bio-chap.cs-words .q-light .qa{color:var(--sky,#8FE8ED) !important}
body.proof.pf-case .cs-article .q-light.cs-pull{border-left-width:2px !important}
/* The bold inline quote becomes a quiet pull line */
body.proof.pf-case .cs-article .bio-chap > p > b:only-child{font-weight:600}
/* The closing panel's link cards: one label style */
body.proof.pf-case section.sec-navy :is(.arrow-link,.ac-more){letter-spacing:.02em !important;text-transform:none !important;font-size:14px !important}
body.proof .pf-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ══════════ ROUND 2 (round-1 ratings 6 to 7.5) ══════════ */
/* Phone bug: the teachers post's table kept a 560px minimum after it stacked, so its last row ran off the screen */
@media (max-width:720px){body.proof .lk-table table{min-width:0 !important}}
/* Phone bug: with the monogram off on phones, the before/after card no longer needs to climb into the hero (it covered the second button) */
@media (max-width:900px){body.proof.pf-case .cs-big.is-mono .grad-card{margin-top:0 !important}}
/* Contents: one width with the text, and a lone last item spans the row */
body.proof .toc-list{max-width:720px !important;width:100%}
body.proof .toc-list li:last-child:nth-child(odd){grid-column:1 / -1}
body.proof .toc-list a{align-items:center}
body.proof .toc-list{margin-bottom:8px !important}
/* Post dividers and blocks on the reading width */
body.proof.pf-post section.sec + section.sec > .container{max-width:1136px}
/* 8 signs: the number circles in the dark teal (white numbers read), and room under the grid */
body.proof .pf-n{background:var(--ds-teal-text,#0A6870) !important}
body.proof .pf-signs{margin-bottom:36px !important}
body.proof .pf-signs + p{margin-top:0}
/* Eyebrows: one casing (sentence case) */
body.proof :is(.r-tag,.ep-k,.tldr-k,.g-eyebrow,.csx-tag,.k){text-transform:none !important}
body.proof .ep-card :is(.ep-k,small,.k)::first-letter{text-transform:uppercase}
/* Library: single-card sections read left like every card; long button labels fit on phones */
@media (max-width:720px){
  body.proof.pf-library .res-grid > .res-card:only-child,body.proof.pf-library .res-grid > .res-card:only-child *{text-align:left !important}
  body.proof .btn{font-size:12.5px !important;letter-spacing:.06em !important;padding-left:22px !important;padding-right:22px !important}
}
/* Quiz: the frame sits below the hero with room, on a tinted placeholder while the quiz loads */
body.proof.pf-quiz section.quiz-embed{padding-top:44px !important}
body.proof.pf-quiz .quiz-shell iframe{background:linear-gradient(180deg,#fff,#F4F8F7) !important}
body.proof.pf-quiz .quiz-embed p a{font-weight:600}
/* Closing panel: even space above it, and cream between it and the dark footer */
body.proof section.sec-navy:not(:has(~ section.sec-navy)):has(~ section.pod-band){padding-top:72px !important;padding-bottom:88px !important}
/* Case studies: the story's last band meets the closing area with no white seam; reading lines about 70 characters, darker text */
body.proof.pf-case section.sec-paper:has(.cs-article){padding-bottom:0 !important}
body.proof.pf-case .cs-article > :last-child{padding-bottom:64px !important;margin-bottom:0 !important}
body.proof.pf-case .cs-article .bio-chap > div,body.proof.pf-case .cs-article .bio-chap > :not(.chap){max-width:680px}
body.proof.pf-case .cs-article .bio-chap p{color:#2E4250 !important;font-weight:400 !important}
/* Case study pull quotes in the display face, a size up from the body */
body.proof.pf-case .cs-article .q-light.cs-pull :is(p,q,blockquote){font-family:var(--font-display) !important;font-size:20px !important;line-height:1.45 !important}
/* Before/after strip stacks on phones */
@media (max-width:720px){
  body.proof .csx-arc{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:6px !important}
  body.proof .csx-arc .a-line{width:2px !important;height:18px !important;margin-left:10px;background:linear-gradient(180deg,rgba(31,195,204,.25),var(--teal,#1FC3CC)) !important}
  body.proof .csx-arc .a-line::after{display:none !important}
}
/* Case studies index: the last card on an odd row spans (the grid also holds a filter message, so count cards only) */
body.proof.pf-csindex #csxGrid > .csx-card:nth-last-child(1 of .csx-card):nth-child(odd of .csx-card){grid-column:1 / -1}
/* Outcomes: the employer strip gets its own breathing room between the two dark cards */
body.proof.pf-outcomes #employers .marquee{margin:34px 0 !important}
/* Reviews and outcomes: the contents box lone fifth item spans (same rule as above) */
/* Posts: one picture each where the text describes one */
body.proof .pf-split{max-width:720px;margin:-12px auto 44px}
body.proof .pf-bar{display:flex;height:16px;border-radius:99px;overflow:hidden;gap:3px}
body.proof .pf-bar .a{background:var(--ds-teal-text,#0A6870)}
body.proof .pf-bar .b{background:var(--peach,#F6C6A8)}
body.proof .pf-legend{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font-size:14px;color:var(--ink-soft,#3F5260)}
body.proof .pf-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:0}
body.proof .pf-legend i.a{background:var(--ds-teal-text,#0A6870)}
body.proof .pf-legend i.b{background:var(--peach,#F6C6A8)}
body.proof .pf-legend b{color:var(--navy,#223A4C);font-family:var(--font-display);font-weight:500;font-size:17px;margin-left:4px}
body.proof .pf-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 22px}
body.proof .pf-pair p{margin:0 !important;background:#fff;border:1px solid var(--ds-line,rgba(22,51,63,.10));border-radius:16px;padding:20px 22px;font-size:15.5px}
body.proof .pf-pair p:first-child{border-top:3px solid var(--ds-teal-text,#0A6870)}
body.proof .pf-pair p:last-child{border-top:3px solid var(--peach,#F6C6A8)}
@media (max-width:620px){body.proof .pf-pair{grid-template-columns:1fr}}
/* ══════════ ROUND 3: the plateau fix round (round-2 ratings 6 to 7.5; fixing the raters' named issues, then to Jill) ══════════ */
/* Outcomes: the "|" separator never starts a line on phones */
@media (max-width:720px){body.proof .rep-meta .sep{display:none}body.proof .rep-meta span{display:block}}
/* Reviews: the two links under the case-study row get real space between them */
body.proof .foot{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px}
/* Case-studies index: a quote mark you can see */
body.proof .bq-mark{font:400 64px/1 Georgia,serif !important;color:var(--teal,#1FC3CC) !important;height:40px;opacity:1 !important}
/* Case studies: pull quotes a real step above the body */
body.proof.pf-case .cs-article .q-light.cs-pull .qt{font-family:var(--font-display) !important;font-size:clamp(20px,1.9vw,24px) !important;line-height:1.45 !important;color:var(--navy,#223A4C)}
body.proof.pf-case .cs-article .bio-chap.cs-words .q-light.cs-pull .qt{color:#fff}
/* Case-study heroes on phones: a solid glass card (the blur showed a seam where the hero ends in a full-page render) */
@media (max-width:900px){body.proof.pf-case .grad-card{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:rgba(22,51,63,.72) !important}}
/* Teachers post: the pair as two plain cards with a straight accent, no curved top line */
body.proof .pf-pair p{border-top-width:1px !important;border-left:3px solid var(--ds-teal-text,#0A6870) !important;border-radius:4px 16px 16px 4px !important}
body.proof .pf-pair p:last-child{border-left-color:var(--peach,#F6C6A8) !important}
/* 8 signs on phones: the number above the title, so titles don't stack three ragged lines */
@media (max-width:620px){body.proof .pf-signs .lk-item h3{flex-direction:column;gap:12px}}
/* Library: "Prefer to listen?" sits inside the band above, not as its own strip */
body.proof.pf-library section.sec-paper:has(> .container > p:only-child){padding-top:28px !important;padding-bottom:56px !important}
/* Day in the life: the split bar with more presence */
body.proof .pf-bar{height:22px}
/* END PROOF GROUP */