/* Who We Help: the directory (/who-we-help) and the audience pages (/who-we-help/*).
   Audience pages: dark hero, what we automate as numbered paper cards, related systems and reading, case studies,
   the call. The lab page adds a XiFin proof section with a paper summary under the hero. */

/* ---- Directory ---- */
.wwh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.wwh-card { --ink: #1E2022; --ink-2: #3A3D3A; position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 22px 24px 24px; background: #FBFAF5; color: #1E2022; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 16px 30px -20px rgba(21, 24, 26, .5); transform: rotate(-.5deg); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); isolation: isolate; }
.wwh-card:nth-child(even) { transform: rotate(.45deg); }
.wwh-card:hover, .wwh-card:focus-visible { transform: rotate(0deg) translateY(-2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 22px 40px -20px rgba(21, 24, 26, .55); }
.wwh-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .028) 0 1px, transparent 1px 3px); }
.wwh-card .n, .aud-cards .n { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #6D6F68; }
.wwh-card h2 { padding-bottom: 10px; border-bottom: 1px dashed #C9C4B5; font-family: var(--f-display); font-stretch: 112%; font-weight: 740; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.18; letter-spacing: -.01em; color: var(--ink); }
.wwh-card p { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.wwh-card .btn-text { justify-self: start; margin-top: 6px; color: var(--ink); }
.wwh-card:hover .arr { transform: translateX(4px); }
@media (max-width: 1000px) { .wwh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wwh-grid { grid-template-columns: minmax(0, 1fr); } .wwh-card, .wwh-card:nth-child(even) { transform: none; } }

/* ---- Audience pages ---- */
.aud-hero h1 { max-width: 22ch; }
.aud-hero .lead { max-width: 62ch; }
.aud-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px clamp(40px, 5vw, 80px); align-items: start; }
.aud-text { display: grid; gap: 16px; align-content: start; }
.aud-text .h2 { margin-bottom: 4px; max-width: 20ch; }
.aud-text > p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.aud-text .btn-text { justify-self: start; margin-top: 4px; }
.aud-h { margin-bottom: 12px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .aud-split { grid-template-columns: minmax(0, 1fr); } }

/* XiFin summary sheet (lab page) */
.xf-sheet { --paper: #FBFAF5; --type: #1E2022; --faint-type: #6D6F68; --rule-type: #C9C4B5; position: relative; padding: clamp(20px, 2.4vw, 28px); background: var(--paper); color: var(--type); transform: rotate(1deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 22px 44px -22px rgba(21, 24, 26, .45); isolation: isolate; }
.xf-sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .028) 0 1px, transparent 1px 3px); }
.xf-top { padding-bottom: 8px; border-bottom: 1px dashed var(--rule-type); font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; letter-spacing: .06em; color: var(--faint-type); }
.xf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px dashed var(--rule-type); }
.xf-stats > div { display: grid; gap: 6px; padding: 18px 16px 18px 0; }
.xf-stats > div + div { padding-left: 18px; border-left: 1px dashed var(--rule-type); }
.xf-stats b { justify-self: start; padding: 0 .06em; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(56px, 6vw, 84px); line-height: .9; letter-spacing: -.05em; background: linear-gradient(transparent 55%, #F2C230 55%, #F2C230 90%, transparent 90%); }
.xf-stats span { font-size: 15px; line-height: 1.35; color: var(--faint-type); }
.xf-h { margin-top: 16px; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.xf-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-top: 6px; }
.xf-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--rule-type); font-size: 15px; }
.xf-list li::before { content: ""; width: 14px; height: 10px; background: repeating-linear-gradient(135deg, rgba(30, 32, 34, .4) 0 1.5px, transparent 1.5px 5px); border: 1px solid rgba(30, 32, 34, .55); }
@media (max-width: 900px) { .xf-sheet { transform: none; } }
@media (max-width: 480px) { .xf-list { grid-template-columns: minmax(0, 1fr); } }

/* What we automate: numbered paper cards */
.aud-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 28px; }
.aud-cards > div { --ink: #1E2022; --ink-2: #3A3D3A; position: relative; display: grid; gap: 10px; align-content: start; padding: 22px 24px 24px; background: #FBFAF5; color: #1E2022; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 16px 30px -20px rgba(21, 24, 26, .5); transform: rotate(-.5deg); isolation: isolate; }
.aud-cards > div:nth-child(even) { transform: rotate(.45deg); }
.aud-cards > div::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .028) 0 1px, transparent 1px 3px); }
.aud-cards h3 { padding-bottom: 10px; border-bottom: 1px dashed #C9C4B5; font-family: var(--f-display); font-stretch: 112%; font-weight: 720; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.aud-cards p { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 900px) { .aud-cards > div, .aud-cards > div:nth-child(even) { transform: none; } }

/* Related systems, links and reading */
.aud-related .sys { margin-top: 0; }
.aud-related .seg-links { margin-top: 18px; }

/* Case studies */
.aud-proven .post-grid { margin-top: 28px; }
.post-grid.aud-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .post-grid.aud-two { grid-template-columns: minmax(0, 1fr); } }
.aud-more { margin-top: 28px; }
.aud-note { max-width: 760px; }

/* Audience heroes with a paper proof sheet on the right (the same sheet as the lab page's XiFin summary). */
.aud-hero .phero-grid { gap: 40px clamp(40px, 5vw, 80px); }
.aud-hero .xf-sheet { margin: 0; }
.xf-stats.sm b { font-size: clamp(34px, 3.4vw, 48px); }
.xf-note { margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--faint-type); }
/* Payers: what we automate (yellow) next to what people decide (ink). */
.xf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.xf-cols .xf-list { grid-template-columns: minmax(0, 1fr); }
.xf-list.auto li::before { background: #F2C230; border-color: rgba(30, 32, 34, .6); }
.xf-list.people li::before { background: #1E2022; border-color: #1E2022; }
/* Numbered steps on a paper sheet (lab page: the UnitedHealthcare example). */
.xf-steps { list-style: none; counter-reset: s; margin-top: 6px; }
.xf-steps li { counter-increment: s; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px dashed var(--rule-type); font-size: 15px; line-height: 1.4; }
.xf-steps li::before { content: counter(s, decimal-leading-zero); padding-top: 2px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; font-weight: 600; color: var(--faint-type); }
@media (max-width: 480px) { .xf-cols { grid-template-columns: minmax(0, 1fr); } }
.xf-stats.one, .xf-list.one { grid-template-columns: minmax(0, 1fr); }
/* Five or six cards: three columns, so no card sits alone on a row. */
.aud-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .aud-cards.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .aud-cards.three { grid-template-columns: minmax(0, 1fr); } }