/*
CHANGE LOG
File: static/css/prohrhq_home_v2.css
Purpose: Layout for the rebuilt homepage (templates/index.html, 2026-10-12): one hero with the
         carrier search, a three-panel visual story, four plain paths, the workforce/PEO block,
         carriers hiring now, research line and the compact link index. Uses only the site tokens
         in prohrhq_public.css (navy, blue, green, gold, warm background, EB Garamond + system sans);
         buttons reuse .ph-cta-primary / .ph-cta-secondary.
Version History:
  2026-10-13 - hv5-points.
  2026-10-13 - About Paychex tab and small dialog.
  2026-10-13 - hv5-audit, hv5-cred (Paychex strip).
  2026-10-13 - hv5-dialog (state-risk pop-up).
  2026-10-13 - hv5-book and hv5-sticky (booking invitations).
  2026-10-13 - hv5-state-table.
  2026-10-13 - PEO page uses one 880px column for images and text (Michael: text "lopsided throughout").
  2026-10-13 - hv5 classes for the PEO page built from copy v4.1.
  2026-10-13 - hv4-odds-fig for the odds SVG chart.
  2026-10-13 - hv4-odds (plain 1-in-N odds cards).
  2026-10-13 - PEO page v4 classes (hv4-fig, hv4-labels, hv4-more, hv4-note).
  2026-10-12 - hv2-sub and hv2-stats for the fleet-size risk point.
  2026-10-12 - PEO cost chart classes (hv2-chart*).
  2026-10-12 - PEO page classes appended (hv2-h1, hv2-prose, hv2-states, hv2-list, hv2-source, hv2-figure).
  2026-10-12 - Created (Michael: "the baseline is not good... not a good look for the front page";
               approved the canvas mockup and said "let's try that. Make sure the links make sense").
*/
.hv2 { color: var(--color-text); }
.hv2-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); box-sizing: border-box; }
.hv2-band { padding: var(--space-7) 0; }
.hv2-band--warm { background: var(--color-bg-warm); }
.hv2-band--alt { background: var(--color-bg-alt); border-top: 1px solid var(--color-rule-soft); border-bottom: 1px solid var(--color-rule-soft); }
.hv2-kicker { margin: 0 0 var(--space-3); font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--color-green); }
.hv2-serif { font-family: var(--font-serif); font-weight: 600; color: var(--color-navy-deep); }
.hv2 h2 { border-bottom: 0; padding-bottom: 0; }

/* Hero */
.hv2-hero { display: flex; flex-wrap: wrap; gap: var(--space-7); align-items: center; padding: var(--space-6) 0 var(--space-7); }
.hv2-hero-text { flex: 1 1 420px; min-width: 0; }
.hv2-hero h1 { margin: 0 0 var(--space-4); font-family: var(--font-serif); font-weight: 600; font-size: 2.9rem; line-height: 1.1; color: var(--color-navy-deep); border: 0; }
.hv2-lede { margin: 0 0 var(--space-5); font-size: 1.12rem; line-height: 1.55; color: var(--color-text-mute); }
.hv2-hero-img { flex: 1 1 460px; min-width: 0; }
.hv2-hero-img img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: 88% 75%; border-radius: var(--image-radius); }
.hv2-search label { display: block; margin-bottom: var(--space-2); font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; color: var(--color-navy-deep); }
.hv2-search-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hv2-search input { flex: 1 1 260px; min-width: 0; min-height: 48px; box-sizing: border-box; padding: 0 var(--space-4); font-size: 1rem; border: 1px solid #b9c2d3; border-radius: var(--radius); background: #fff; color: var(--color-text); }
.hv2-search-more { margin: var(--space-3) 0 0; font-family: var(--font-sans); font-size: 0.92rem; color: var(--color-text-mute); }

/* Visual story */
.hv2-story-h { margin: 0 0 var(--space-6); text-align: center; font-size: 2rem; }
.hv2-story { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.hv2-story figure { margin: 0; }
.hv2-story img { display: block; width: 100%; height: 210px; object-fit: cover; border-radius: var(--image-radius); margin-bottom: var(--space-3); }
.hv2-story .hv2-tag { margin: 0 0 var(--space-2); font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.hv2-tag--problem { color: #8a5a12; } .hv2-tag--solution { color: var(--color-accent); } .hv2-tag--outcome { color: var(--color-green); }
.hv2-story h3 { margin: 0 0 var(--space-2); font-family: var(--font-sans); font-size: 1.2rem; color: var(--color-navy-deep); }
.hv2-story figcaption { font-size: 1rem; line-height: 1.5; color: var(--color-text-mute); }
.hv2-story figcaption a { white-space: nowrap; }

/* Paths */
.hv2-paths-h { margin: 0 0 var(--space-5); font-size: 1.8rem; }
.hv2-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); column-gap: var(--space-5); }
.hv2-path { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) 0; border-top: 2px solid var(--color-navy-deep); text-decoration: none; min-height: 44px; }
.hv2-path strong { font-family: var(--font-sans); font-size: 1.12rem; color: var(--color-navy-deep); }
.hv2-path span { font-size: 0.98rem; line-height: 1.45; color: var(--color-text-mute); }
.hv2-path:hover strong { color: var(--color-link); }

/* Workforce / PEO */
.hv2-split { display: flex; flex-wrap: wrap; gap: var(--space-7); align-items: center; }
.hv2-split > * { flex: 1 1 420px; min-width: 0; }
.hv2-split img { display: block; width: 100%; height: 300px; object-fit: cover; border-radius: var(--image-radius); }
.hv2-split h2 { margin: 0 0 var(--space-3); font-size: 1.9rem; line-height: 1.2; }
.hv2-split p { font-size: 1.05rem; line-height: 1.55; color: var(--color-text-mute); }
.hv2-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

/* Hiring */
.hv2-hiring h2 { margin: 0 0 var(--space-4); font-family: var(--font-sans); font-size: 1.15rem; color: var(--color-navy-deep); }
.hv2-hiring-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4) var(--space-6); margin-bottom: var(--space-4); }
.hv2-hiring-grid a { display: flex; flex-direction: column; text-decoration: none; }
.hv2-hiring-grid strong { font-family: var(--font-sans); color: var(--color-link); }
.hv2-hiring-grid span { font-size: 0.92rem; color: var(--color-text-mute); }

/* Research + index */
.hv2-research { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: baseline; justify-content: space-between; }
.hv2-research p.hv2-serif { margin: 0; font-size: 1.45rem; font-weight: 500; }
.hv2-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.hv2-index h2 { margin: 0 0 var(--space-2); font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-green); }
.hv2-index ul { list-style: none; margin: 0; padding: 0; }
.hv2-index li { margin: 0 0 var(--space-2); font-size: 0.95rem; }
.hv2-anchors { position: relative; height: 0; }

@media (max-width: 640px) {
  .hv2-hero h1 { font-size: 2.15rem; }
  .hv2-hero-img img, .hv2-split img { height: 220px; }
  .hv2-band { padding: var(--space-6) 0; }
}

/* 2026-10-12: shared by the PEO page (templates/sections/_workforce_story.html). */
.hv2-h1 { margin: 0 0 var(--space-4); font-family: var(--font-serif); font-weight: 600; font-size: 2.6rem; line-height: 1.12; color: var(--color-navy-deep); border: 0; padding: 0; }
.hv2-prose { max-width: 760px; }
.hv2-wrap.hv2-prose { max-width: 1120px; }
.hv2-wrap.hv2-prose > * { max-width: 760px; }
.hv2-prose p { font-size: 1.05rem; line-height: 1.6; }
.hv2-source { font-size: 0.9rem !important; color: var(--color-text-mute); }
.hv2-figure { margin: 0 0 var(--space-5); }
.hv2-figure img { display: block; width: 100%; height: auto; border-radius: var(--image-radius); }
.hv2-list { padding-left: 1.2rem; margin: 0 0 var(--space-4); }
.hv2-list li { margin: 0 0 var(--space-3); font-size: 1.05rem; line-height: 1.55; }
.hv2-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4) var(--space-6); margin: var(--space-5) 0; }
.hv2-states div { border-top: 1px solid var(--color-rule); padding-top: var(--space-3); }
.hv2-states dt { font-family: var(--font-sans); font-weight: 600; color: var(--color-navy-deep); margin-bottom: var(--space-1); }
.hv2-states dd { margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--color-text-mute); }
.ph-peo-table caption { text-align: left; font-family: var(--font-sans); font-size: 0.9rem; color: var(--color-text-mute); padding-bottom: var(--space-2); }
@media (max-width: 640px) { .hv2-h1 { font-size: 2rem; } }

/* 2026-10-12: PEO cost chart (inline SVG). */
.hv2-chart { margin: var(--space-5) 0; max-width: 760px; }
.hv2-chart-h { margin: 0 0 var(--space-2); font-family: var(--font-sans); font-weight: 600; font-size: 1.1rem; color: var(--color-navy-deep); }
.hv2-chart-svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.hv2-chart figcaption { font-size: 0.9rem; line-height: 1.5; color: var(--color-text-mute); margin-top: var(--space-2); }

/* 2026-10-12: PEO page stat pair and sub-heading. */
.hv2-sub { margin: var(--space-5) 0 var(--space-2); font-family: var(--font-sans); font-size: 1.2rem; color: var(--color-navy-deep); }
.hv2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
.hv2-stats div { border-top: 3px solid var(--color-navy-deep); padding-top: var(--space-3); }
.hv2-stats div + div { border-top-color: var(--color-gold); }
.hv2-stats strong { display: block; font-family: var(--font-serif); font-size: 2.6rem; line-height: 1; color: var(--color-navy-deep); }
.hv2-stats span { display: block; margin-top: var(--space-2); font-size: 0.98rem; color: var(--color-text-mute); }

/* 2026-10-13: PEO page v4 (limbic story). */
.hv4-fig { margin: var(--space-4) 0 var(--space-6); }
.hv4-fig img { display: block; width: 100%; height: auto; border-radius: var(--image-radius); }
.hv4-fig figcaption { max-width: 780px; margin-top: var(--space-3); font-size: 1.08rem; line-height: 1.55; color: var(--color-text); }
.hv4-note { display: block; margin-top: var(--space-2); font-size: 0.9rem; color: var(--color-text-mute); }
.hv4-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-2); text-align: center; font-family: var(--font-sans); font-size: 0.95rem; color: var(--color-text-mute); }
.hv4-labels b { display: block; font-size: 1.25rem; color: var(--color-navy-deep); }
.hv4-more { border-top: 1px solid var(--color-rule); padding: var(--space-3) 0; }
.hv4-more summary { cursor: pointer; font-family: var(--font-sans); font-weight: 600; color: var(--color-navy-deep); min-height: 44px; display: flex; align-items: center; }
.hv4-more p { max-width: 780px; line-height: 1.6; }
@media (max-width: 640px) { .hv4-labels { font-size: 0.8rem; } .hv4-labels b { font-size: 1rem; } }

/* 2026-10-13: odds as plain "1 in N". */
.hv4-odds { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0 var(--space-4); }
.hv4-odds > div { background: #fff; border-top: 4px solid var(--color-rule); padding: var(--space-4); text-align: center; }
.hv4-odds > div.hv4-odds-top { border-top-color: var(--color-gold); }
.hv4-odds-size { display: block; font-family: var(--font-sans); font-weight: 600; color: var(--color-text-mute); font-size: 0.95rem; }
.hv4-odds strong { display: block; margin: var(--space-2) 0 0; font-family: var(--font-serif); font-size: 2.6rem; line-height: 1.05; color: var(--color-navy-deep); }
.hv4-odds span:not(.hv4-odds-size) { display: block; font-size: 1rem; color: var(--color-text); }
.hv4-odds em { display: block; margin-top: var(--space-2); font-style: normal; font-size: 0.9rem; color: var(--color-text-mute); }
.hv4-odds-cap { max-width: 720px; margin-left: auto; margin-right: auto; font-size: 1.08rem; line-height: 1.55; }

/* 2026-10-13: odds chart. */
.hv4-odds-fig { max-width: 720px; margin-left: auto; margin-right: auto; }
.hv4-odds-fig .hv4-odds-narrow { margin: 0 auto; }


/* 2026-10-13: PEO page v5 (frozen copy v4.1). */
.hv5-lede { max-width: 780px; font-size: 1.2rem; line-height: 1.55; color: var(--color-text); margin: 0; }
.hv5-fig { margin: var(--space-4) auto var(--space-5); max-width: 1000px; }
.hv5-chart { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.hv5-disclose { max-width: 780px; margin: var(--space-3) auto 0; font-size: 0.95rem; line-height: 1.5; color: var(--color-text-mute); text-align: center; }
.hv5-cap { display: block; font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; color: var(--color-navy-deep); margin-bottom: var(--space-2); }
.hv5-pull { max-width: 780px; font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.4; color: var(--color-navy-deep); }

/* 2026-10-13: PEO page - one column width for images and text, so nothing sits lopsided. */
.hv5 .hv2-wrap, .hv5 .hv2-wrap.hv2-prose { max-width: 880px; }
.hv5 .hv4-fig figcaption, .hv5 .hv2-prose, .hv5 .hv2-prose > *, .hv5 .hv5-pull, .hv5 .hv5-lede, .hv5 .hv5-disclose, .hv5 .hv4-more p { max-width: none; }
.hv5 .hv5-disclose { text-align: left; }

/* 2026-10-13: state risk table. */
.hv5-state-table th[scope=row] { font-weight: 600; text-align: left; }
.hv5-state-table td, .hv5-state-table th { padding: 8px 12px; }

/* 2026-10-13: booking invitations on the PEO page. */
.hv5-book { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; font-family: var(--font-sans); font-size: 1.05rem; color: var(--color-navy-deep); }
.hv5-sticky { display: none; }
@media (min-width: 1400px) {
  .hv5-sticky { display: flex; flex-direction: column; gap: 4px; position: fixed; right: 24px; top: 50%; transform: translateY(-50%); width: 190px; padding: 14px 16px; background: #fff; border: 1px solid var(--color-rule); border-left: 4px solid var(--color-gold); border-radius: 6px; box-shadow: var(--shadow-soft); text-decoration: none; z-index: 20; font-family: var(--font-sans); }
  .hv5-sticky strong { color: var(--color-navy-deep); font-size: 0.98rem; }
  .hv5-sticky span { color: var(--color-link); font-size: 0.92rem; text-decoration: underline; }
}

/* 2026-10-13: state-risk pop-up. */
.hv5-dialog { width: min(760px, 94vw); max-height: 86vh; padding: var(--space-5); border: 0; border-radius: 8px; box-shadow: 0 20px 60px rgba(20,33,61,.35); }
.hv5-dialog::backdrop { background: rgba(20,33,61,.55); }
.hv5-dialog-head { display: flex; justify-content: space-between; align-items: center; }
.hv5-dialog-head h2 { margin: 0; font-size: 1.7rem; }
.hv5-dialog-close { font-size: 2rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--color-navy-deep); min-width: 44px; min-height: 44px; }
.hv5-fleet { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.hv5-fleet button { min-height: 44px; padding: 0 14px; border: 1px solid var(--color-navy-deep); background: #fff; color: var(--color-navy-deep); border-radius: 6px; font-weight: 600; cursor: pointer; }
.hv5-fleet button[aria-pressed=true] { background: var(--color-navy-deep); color: #fff; }
.hv5-dialog-body { max-height: 52vh; overflow-y: auto; border: 1px solid var(--color-rule); border-radius: 6px; }
.hv5-dialog-body thead th { position: sticky; top: 0; background: var(--color-bg-alt); }

/* 2026-10-13: audit-cost note and Paychex credibility strip. */
.hv5-audit { border-left: 4px solid var(--color-gold); padding: var(--space-2) 0 var(--space-2) var(--space-4); margin: var(--space-5) 0; }
.hv5-audit .hv2-sub { margin-top: 0; }
.hv5-audit p { font-size: 1.05rem; line-height: 1.55; }
.hv5-cred { background: #fff; border: 1px solid var(--color-rule); border-radius: 8px; padding: var(--space-4); margin: var(--space-5) 0 var(--space-3); }
.hv5-cred-h { margin: 0 0 var(--space-3); font-family: var(--font-sans); font-weight: 700; color: var(--color-navy-deep); font-size: 1.1rem; }
.hv5-cred-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.hv5-cred-row strong { display: block; font-family: var(--font-serif); font-size: 2.2rem; line-height: 1; color: var(--color-navy-deep); }
.hv5-cred-row span { display: block; margin-top: 4px; font-size: 0.95rem; color: var(--color-text-mute); }
.hv5-cred-note { margin: var(--space-3) 0 0; font-size: 0.88rem; color: var(--color-text-mute); }
.hv5-sticky em { font-style: normal; color: var(--color-text); font-size: 0.9rem; }

/* 2026-10-13: About Paychex tab and pop-up. */
.hv5-dialog--sm { width: min(560px, 94vw); }
.hv5-dialog--sm .hv5-cred-row { grid-template-columns: repeat(2, 1fr); margin: var(--space-3) 0; }
.hv5-sticky-tab { display: none; }
@media (min-width: 1400px) {
  .hv5-sticky-tab { display: block; position: fixed; right: 24px; top: calc(50% - 126px); width: 190px; padding: 8px 12px; background: var(--color-navy-deep); color: #fff; border: 0; border-radius: 6px 6px 0 0; font-family: var(--font-sans); font-weight: 600; font-size: 0.92rem; text-align: left; cursor: pointer; z-index: 21; }
}

/* 2026-10-13: Paychex points (restrained). */
.hv5-points { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: var(--space-2) 0 var(--space-3); font-family: var(--font-sans); font-weight: 600; color: var(--color-navy-deep); font-size: 0.98rem; }
.hv5-points li::before { content: "\2713"; color: var(--color-green); margin-right: 6px; }