/* ==========================================================================
   HireUA landing pages: Position + Industry (v0.3.3, v0.3.4)
   Styles the "HireUA / ..." Gutenberg patterns (native core blocks + classes):
   Benefit Cards, 3 Case Studies, Video Testimonial Row, comparison, Pricing
   Grid, Big CTA, FAQ Text; v0.3.4 adds Proof Strip, Role Pods, 3 Value Cards
   (cards on navy), Video Proof Row (testimonial card + plain text) and
   4-Step Process (4-up cards). Colours come from tokens.css. Buttons follow the
   final rule: each hovers to a darker shade of its own colour.
   Loaded on landing pages (any page containing the Position Hero, or using the
   "HireUA Landing (full width)" template) and inside the block editor.
   ========================================================================== */
.hu-landing { display: block; color: var(--hu-ink); }
.hu-landing > .hu-landing-content > * { margin: 0; }
.hu-landing a { color: inherit; }

/* Sections + wrapper */
.wp-block-group.hu-section { margin: 0; padding: 86px 0; background: var(--hu-white); }
.wp-block-group.hu-section--soft { background: var(--hu-surface); border-top: 1px solid var(--hu-line); border-bottom: 1px solid var(--hu-line); }
.wp-block-group.hu-section--navy { background: var(--hu-navy); color: var(--hu-white); border-top: 1px solid rgba(var(--hu-white-rgb), .07); border-bottom: 1px solid rgba(var(--hu-white-rgb), .07); }
.hu-section .hu-wrap { width: min(1180px, calc(100% - 42px)); margin-inline: auto; }
.hu-section :is(.hu-wrap, .hu-section-head, .hu-section-head-main, .hu-card-grid, .hu-card, .hu-case-grid, .hu-case-card, .hu-case-copy,
	.hu-case-footer, .hu-testimonial-grid, .hu-testimonial-card, .hu-testimonial-copy, .hu-testimonial-footer, .hu-compare, .hu-compare-col,
	.hu-pricing, .hu-pricing-intro, .hu-pricing-intro-copy, .hu-price-grid, .hu-price-card, .hu-big-cta, .hu-big-cta-copy, .hu-faq, .hu-faq-item, .hu-proof-strip, .hu-pod-grid, .hu-pod,
	.hu-score-grid, .hu-fit-grid, .hu-fit-card, .hu-story-lead, .hu-timeline, .hu-timeline-item, .hu-timeline-copy, .hu-team-photos, .hu-now-grid, .hu-now-card) > * {
	margin-block: 0;
}

/* Section head */
.hu-section .hu-section-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: end; margin-bottom: 32px; }
.hu-section .hu-eyebrow { color: var(--hu-blue); font-size: 10px; font-weight: 850; letter-spacing: .15em; line-height: 1.4; text-transform: uppercase; }
.hu-section--navy .hu-eyebrow { color: var(--hu-yellow); }
.hu-section .hu-section-title { margin-top: 8px !important; color: inherit; font-size: clamp(36px, 4.7vw, 62px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.hu-section .hu-section-dek { color: var(--hu-muted); font-size: 16px; line-height: 1.65; }
.hu-section--navy .hu-section-dek { color: #B8C5D7; }

/* Benefit cards */
.hu-section .hu-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hu-section .hu-card { padding: 24px; border: 1px solid var(--hu-line); border-radius: 8px; background: var(--hu-white); color: var(--hu-ink); transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.hu-section .hu-card:hover { border-color: rgba(var(--hu-blue-rgb), .45); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(var(--hu-navy-rgb), .08); }
.hu-section .hu-card-num { color: var(--hu-blue); font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.hu-section .hu-card-title { margin: 13px 0 7px !important; color: var(--hu-navy); font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; }
.hu-section .hu-card-text { color: var(--hu-muted); font-size: 14px; line-height: 1.55; }

/* Shared pills */
.hu-section :is(.hu-company-pill, .hu-role-pill, .hu-compare-label) {
	display: inline-flex; align-items: center; justify-self: start; width: max-content; max-width: 100%;
	min-height: 25px; padding: 0 9px; border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase;
}
.hu-section .hu-company-pill { background: #EEF2F8; color: var(--hu-navy); }
.hu-section :is(.hu-role-pill, .hu-compare-label) { min-height: 26px; background: var(--hu-yellow); color: var(--hu-navy); letter-spacing: .08em; }

/* Video media (native Wistia, no overlays; controls follow Wistia settings) */
.hu-landing .hu-video { aspect-ratio: 16 / 9; overflow: hidden; background: #020713; }
.hu-landing .hu-video wistia-player { display: block; width: 100%; height: 100%; }
.hu-landing .hu-video wistia-player:not(:defined) { display: block; padding-top: 56.25%; }

/* 3 case studies (homepage proof-card language) */
.hu-section .hu-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hu-section .hu-case-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(var(--hu-white-rgb), .12); border-radius: 9px; background: var(--hu-white); color: var(--hu-navy); box-shadow: 0 20px 54px rgba(0, 0, 0, .18); }
.hu-section:not(.hu-section--navy) .hu-case-card { border-color: var(--hu-line); box-shadow: 0 14px 34px rgba(var(--hu-navy-rgb), .08); }
.hu-section .hu-case-copy { display: flex; flex: 1; flex-direction: column; padding: 22px 22px 20px; }
.hu-section .hu-case-stat { margin-top: 16px !important; color: var(--hu-blue); font-size: 44px; font-weight: 900; line-height: .96; letter-spacing: -.055em; }
.hu-section .hu-case-metric { margin-top: 1px !important; color: var(--hu-blue); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.hu-section .hu-case-title { margin: 14px 0 8px !important; color: var(--hu-navy); font-size: 22px; font-weight: 800; line-height: 1.12; letter-spacing: -.03em; }
.hu-section .hu-case-story { color: var(--hu-muted); font-size: 13px; line-height: 1.55; }
.hu-section .hu-case-footer { display: grid; gap: 10px; margin-top: auto !important; padding-top: 16px; border-top: 1px solid var(--hu-line); }
.hu-section .hu-case-story + .hu-case-footer { margin-top: 19px !important; }
.hu-section .hu-case-link { font-size: 11px; font-weight: 850; }
.hu-section .hu-case-link a { color: var(--hu-blue); text-decoration: none; }
.hu-section .hu-case-link a:hover { color: var(--hu-link-hover); }

/* Video testimonial row */
.hu-section .hu-testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hu-section .hu-testimonial-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hu-line); border-radius: 8px; background: var(--hu-white); color: var(--hu-navy); }
.hu-section .hu-testimonial-media { border-bottom: 2px solid var(--hu-blue); background: #101A2C; }
.hu-section .hu-testimonial-copy { display: flex; flex: 1; flex-direction: column; padding: 20px 20px 18px; }
.hu-section .hu-testimonial-person { color: var(--hu-muted); font-size: 10px; line-height: 1.35; }
.hu-section .hu-testimonial-person strong { display: inline-block; margin-bottom: 3px; color: var(--hu-navy); font-size: 14px; }
.hu-section .wp-block-quote.hu-testimonial-quote { margin: 12px 0 0 !important; padding: 0; border: 0; }
.hu-section .hu-testimonial-quote p { margin: 0; color: #28354D; font-size: 16px; font-weight: 760; line-height: 1.48; letter-spacing: -.01em; }
.hu-section .hu-testimonial-footer { margin-top: auto !important; padding-top: 14px; border-top: 1px solid var(--hu-line); }
.hu-section .hu-testimonial-quote + .hu-testimonial-footer { margin-top: 17px !important; }

/* Two-column comparison */
.hu-section .hu-compare { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--hu-line); border-radius: 9px; }
.hu-section .hu-compare-col { padding: 30px; background: var(--hu-white); color: var(--hu-navy); }
.hu-section .hu-compare-col + .hu-compare-col { border-left: 1px solid var(--hu-line); }
.hu-section .hu-compare-col.is-featured { background: var(--hu-navy); color: var(--hu-white); }
.hu-section .hu-compare-title { margin: 13px 0 !important; color: inherit; font-size: 29px; font-weight: 800; line-height: 1.1; letter-spacing: -.035em; }
.hu-section .hu-compare-list { display: grid; gap: 10px; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.hu-section .hu-compare-col:not(.is-featured) .hu-compare-list { color: var(--hu-muted); }

/* Pricing grid */
.hu-section .hu-pricing { overflow: hidden; border: 1px solid var(--hu-line); border-radius: 10px; background: var(--hu-white); color: var(--hu-navy); }
.hu-section .hu-pricing-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 28px 30px; border-bottom: 1px solid var(--hu-line); }
.hu-section .hu-pricing-title { margin: 0 0 5px !important; color: var(--hu-navy); font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
.hu-section .hu-pricing-note { color: var(--hu-muted); font-size: 13px; }
.hu-section .hu-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hu-section .hu-price-card { display: flex; flex-direction: column; padding: 28px; border-right: 1px solid var(--hu-line); }
.hu-section .hu-price-card:last-child { border-right: 0; }
.hu-section .hu-price-card.is-popular { background: var(--hu-navy); color: var(--hu-white); }
.hu-section .hu-price-kicker { color: var(--hu-blue); font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.hu-section .hu-price-card.is-popular .hu-price-kicker { color: var(--hu-yellow); }
.hu-section .hu-price { margin: 10px 0 2px !important; font-size: 36px; font-weight: 900; line-height: 1.05; letter-spacing: -.05em; }
.hu-section .hu-price-note { margin-bottom: 18px !important; color: var(--hu-muted); font-size: 10px; }
.hu-section .hu-price-card.is-popular .hu-price-note { color: #B9C5D6; }
.hu-section .hu-price-list { display: grid; gap: 9px; padding-left: 17px; font-size: 12px; line-height: 1.45; }
.hu-section .hu-price-card:not(.is-popular) .hu-price-list { color: var(--hu-muted); }
.hu-section .hu-price-cta { margin-top: auto !important; padding-top: 22px; }
.hu-section .hu-price-cta .wp-block-button { width: 100%; }
.hu-section .hu-price-cta .wp-block-button__link { width: 100%; min-height: 44px; font-size: 11px; }
.hu-section .hu-price-disclaimer { padding: 13px 28px; border-top: 1px solid var(--hu-line); background: #FAFBFD; color: var(--hu-muted); font-size: 10px; }

/* Big Electric Yellow CTA */
.hu-section .hu-big-cta { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; padding: 42px; border: 1px solid var(--hu-yellow-hover); border-radius: 10px; background: var(--hu-yellow); color: var(--hu-navy); }
.hu-section .hu-big-cta .hu-eyebrow { color: var(--hu-navy); }
.hu-section .hu-big-cta-title { margin: 8px 0 10px !important; color: var(--hu-navy); font-size: clamp(34px, 5vw, 60px); font-weight: 800; line-height: .98; letter-spacing: -.05em; }
.hu-section .hu-big-cta-text { max-width: 670px; font-size: 15px; line-height: 1.55; }

/* FAQ text */
.hu-section .hu-faq { max-width: 850px; }
.hu-section .hu-faq-item { padding: 23px 0; border-top: 1px solid var(--hu-line); }
.hu-section .hu-faq-item:last-child { border-bottom: 1px solid var(--hu-line); }
.hu-section .hu-faq-q { margin: 0 0 8px !important; color: var(--hu-navy); font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.025em; }
.hu-section .hu-faq-a { color: var(--hu-muted); font-size: 14px; line-height: 1.65; }

/* ---------- v0.3.4 Industry components ---------- */
/* Proof Strip: slim band of 3 result tiles right under the hero */
.wp-block-group.hu-section--strip { padding: 34px 0; background: var(--hu-surface); border-bottom: 1px solid var(--hu-line); }
.hu-section .hu-proof-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--hu-line); border-radius: 8px; background: var(--hu-line); }
.hu-section .hu-proof-stat { margin: 0; padding: 23px; background: var(--hu-white); color: var(--hu-muted); font-size: 10px; line-height: 1.4; }
.hu-section .hu-proof-stat strong { display: block; margin-bottom: 5px; color: var(--hu-navy); font-size: 27px; font-weight: 850; line-height: 1.1; letter-spacing: -.04em; }
.hu-section .hu-proof-stat br { display: none; }

/* Role Pods: 2-up cards with role chips */
.hu-section .hu-pod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hu-section .hu-pod { padding: 26px; border: 1px solid var(--hu-line); border-radius: 8px; background: var(--hu-white); color: var(--hu-ink); }
.hu-section .hu-pod-num { color: var(--hu-blue); font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.hu-section .hu-pod-title { margin: 10px 0 13px !important; color: var(--hu-navy); font-size: 26px; font-weight: 800; line-height: 1.12; letter-spacing: -.035em; }
.hu-section .hu-pod-text { margin-bottom: 17px !important; color: var(--hu-muted); font-size: 13px; line-height: 1.55; }
.hu-section .hu-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 !important; padding: 0; list-style: none; }
.hu-section .hu-chips > li { margin: 0; padding: 7px 9px; border: 1px solid var(--hu-line); border-radius: 999px; background: var(--hu-surface); color: var(--hu-navy); font-size: 9px; font-weight: 800; line-height: 1.2; }

/* 3 Value Cards: the Benefit Card component inside a navy section */
.hu-section--navy .hu-card { border-color: rgba(var(--hu-white-rgb), .12); background: rgba(var(--hu-white-rgb), .05); color: var(--hu-white); }
.hu-section--navy .hu-card:hover { border-color: rgba(var(--hu-white-rgb), .26); box-shadow: none; }
.hu-section--navy .hu-card-num { color: var(--hu-yellow); font-size: 11px; letter-spacing: .08em; }
.hu-section--navy .hu-card-title { color: var(--hu-white); font-size: 24px; line-height: 1.1; }
.hu-section--navy .hu-card-text { color: #B8C5D7; font-size: 13px; }

/* Video Proof Row: testimonial card with a plain-text summary (not a quote) */
.hu-section .hu-testimonial-text { margin-top: 12px !important; color: #28354D; font-size: 15px; font-weight: 740; line-height: 1.48; letter-spacing: -.01em; }
.hu-section .hu-testimonial-text + .hu-testimonial-footer { margin-top: 17px !important; }

/* 4-Step Process: Benefit Card component, 4 across */
.hu-section .hu-card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hu-section .hu-card-grid--4 .hu-card-title { font-size: 20px; margin: 10px 0 7px !important; }
.hu-section .hu-card-grid--4 .hu-card-text { font-size: 12.5px; }
@media (min-width: 921px) and (max-width: 1100px) {
	.hu-section .hu-card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- v0.3.5 card edges (3 Case Studies, Video Testimonial / Proof rows) ----------
   Cause of the light ring on navy: the card had a white background painted
   under its own 1px rgba(255,255,255,.12) border (background-clip:
   border-box), so the border read as a solid white line around the video,
   plus white anti-aliasing at the rounded corners behind the video.
   Fix: the card itself is transparent (white lives on the copy area only),
   no border on navy (shadow separates it), and the video clips to the card's
   inner radius. Light sections keep the intended subtle #DDE2EC border. */
.hu-section :is(.hu-case-card, .hu-testimonial-card) { --hu-card-r: 9px; --hu-card-bw: 1px; background: transparent; border-radius: var(--hu-card-r); }
.hu-section .hu-testimonial-card { --hu-card-r: 8px; }
.hu-section :is(.hu-case-copy, .hu-testimonial-copy) { background: var(--hu-white); }
.hu-section :is(.hu-case-card, .hu-testimonial-card) > .hu-video {
	border-radius: calc(var(--hu-card-r) - var(--hu-card-bw)) calc(var(--hu-card-r) - var(--hu-card-bw)) 0 0;
	clip-path: inset(0 round calc(var(--hu-card-r) - var(--hu-card-bw)) calc(var(--hu-card-r) - var(--hu-card-bw)) 0 0);
}
.hu-section--navy :is(.hu-case-card, .hu-testimonial-card) { --hu-card-bw: 0px; border: 0; }

/* ---------- v0.3.6 Region components ---------- */
/* Country Chips: strip of market chips under the Region Hero */
.wp-block-group.hu-section--chips { padding: 26px 0; background: var(--hu-surface); border-bottom: 1px solid var(--hu-line); }
.hu-section .hu-country-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0; list-style: none; }
.hu-section .hu-country-chips > li { margin: 0; padding: 9px 12px; border: 1px solid var(--hu-line); border-radius: 999px; background: var(--hu-white); color: var(--hu-navy); font-size: 11px; font-weight: 800; line-height: 1.2; }

/* Score Cards: 4 big-word tiles */
.hu-section .hu-score-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hu-section .hu-score { margin: 0; padding: 24px; border: 1px solid var(--hu-line); border-top: 3px solid var(--hu-blue); border-radius: 8px; background: var(--hu-white); color: var(--hu-muted); font-size: 12px; line-height: 1.45; }
.hu-section .hu-score strong { display: block; margin-bottom: 6px; color: var(--hu-blue); font-size: 29px; font-weight: 850; line-height: 1.05; letter-spacing: -.04em; }
.hu-section .hu-score br { display: none; }

/* Good Fit vs Bad Fit */
.hu-section .hu-fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hu-section .hu-fit-card { padding: 30px; border: 1px solid var(--hu-line); border-radius: 9px; background: var(--hu-white); color: var(--hu-navy); }
.hu-section .hu-fit-card.is-best { border-color: var(--hu-navy); background: var(--hu-navy); color: var(--hu-white); }
.hu-section .hu-fit-tag { display: inline-flex; align-items: center; width: max-content; max-width: 100%; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--hu-yellow); color: var(--hu-navy); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hu-section .hu-fit-card:not(.is-best) .hu-fit-tag { background: var(--hu-surface-2, #E9EEF6); }
.hu-section .hu-fit-title { margin: 14px 0 !important; color: inherit; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
.hu-section .hu-fit-list { display: grid; gap: 10px; margin: 0 !important; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.hu-section .hu-fit-card:not(.is-best) .hu-fit-list { color: var(--hu-muted); }

/* Market Reality Table (core Table block) */
.hu-section .wp-block-table.hu-market-table { margin: 0; overflow: hidden; border: 1px solid var(--hu-line); border-radius: 9px; background: var(--hu-white); }
.hu-section .hu-market-table table { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; }
.hu-section .hu-market-table td { padding: 18px 20px; border: 0; border-top: 1px solid var(--hu-line); border-left: 1px solid var(--hu-line); color: var(--hu-muted); font-size: 13px; line-height: 1.5; vertical-align: top; }
.hu-section .hu-market-table tr:first-child td { border-top: 0; }
.hu-section .hu-market-table td:first-child { width: 180px; border-left: 0; color: var(--hu-navy); font-weight: 850; }
.hu-section .hu-market-table td:nth-child(2) { color: #1F4EC0; font-weight: 750; }

/* ---------- v0.3.6 About components ---------- */
.hu-section .hu-story-lead { max-width: 860px; }
.hu-section .hu-story-title { margin: 10px 0 22px !important; color: var(--hu-navy); font-size: clamp(40px, 5vw, 67px); font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.hu-section .hu-story-lead > p:not(.hu-eyebrow) { margin-bottom: 20px !important; color: #344159; font-size: 19px; line-height: 1.7; }

/* Founder quote breakout (core Quote block) */
.hu-section .wp-block-quote.hu-breakout { margin: 56px 0 !important; padding: 34px; border: 0; border-left: 5px solid var(--hu-yellow); border-radius: 8px; background: var(--hu-navy); color: var(--hu-white); }
.hu-section .hu-breakout p { margin: 0; color: inherit; font-size: 28px; font-weight: 750; line-height: 1.35; letter-spacing: -.025em; }
.hu-section .hu-breakout cite { display: block; margin-top: 14px; color: #AFC0D5; font-size: 11px; font-style: normal; }

/* Vertical timeline: Groups + Headings + Paragraphs */
.hu-section .hu-timeline { position: relative; display: grid; }
.hu-section .hu-timeline::before { content: ""; position: absolute; left: 89px; top: 12px; bottom: 12px; width: 1px; background: var(--hu-line); }
.hu-section .hu-timeline-item { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 40px; padding: 0 0 44px; }
.hu-section .hu-timeline-item:last-child { padding-bottom: 0; }
.hu-section .hu-timeline-year { padding-top: 4px; color: var(--hu-blue); font-size: 13px; font-weight: 900; line-height: 1.3; }
.hu-section .hu-timeline-copy { position: relative; padding-left: 18px; }
.hu-section .hu-timeline-copy::before { content: ""; position: absolute; left: -26px; top: 7px; width: 9px; height: 9px; border: 3px solid var(--hu-navy); border-radius: 999px; background: var(--hu-yellow); }
.hu-section .hu-timeline-title { margin: 0 0 10px !important; color: var(--hu-navy); font-size: 30px; font-weight: 800; line-height: 1.08; letter-spacing: -.04em; }
.hu-section .hu-timeline-copy > p { margin-bottom: 12px !important; color: var(--hu-muted); font-size: 15px; line-height: 1.7; }
.hu-section .hu-timeline-copy > p:last-child { margin-bottom: 0 !important; }
.hu-section .hu-timeline-copy strong { color: var(--hu-ink); }

/* Team photos (core Image blocks, caption overlaid on a navy fade) */
.hu-section .hu-team-photos { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; }
.hu-section .wp-block-image.hu-team-photo { position: relative; min-height: 380px; margin: 0; overflow: hidden; border-radius: 9px; background: #101827; }
.hu-section .hu-team-photo img { display: block; width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.hu-section .hu-team-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(var(--hu-navy-rgb), .78)); pointer-events: none; }
.hu-section .hu-team-photo figcaption { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; margin: 0; color: var(--hu-white); font-size: 11px; font-weight: 800; text-align: left; }

/* "What HireUA is now" cards */
.hu-section .hu-now-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hu-section .hu-now-card { padding: 30px; border: 1px solid var(--hu-line); border-radius: 9px; background: var(--hu-white); color: var(--hu-navy); }
.hu-section .hu-now-card.is-accent { border-color: var(--hu-yellow-hover); background: var(--hu-yellow); }
.hu-section .hu-now-title { margin: 0 0 12px !important; color: var(--hu-navy); font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
.hu-section .hu-now-card > p { color: var(--hu-muted); font-size: 14px; line-height: 1.65; }
.hu-section .hu-now-card.is-accent > p { color: #273750; }

@media (min-width: 921px) and (max-width: 1100px) {
	.hu-section .hu-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
	.hu-section .hu-market-table table, .hu-section .hu-market-table tbody, .hu-section .hu-market-table tr, .hu-section .hu-market-table td { display: block; width: 100% !important; }
	.hu-section .hu-market-table tr + tr { border-top: 1px solid var(--hu-line); }
	.hu-section .hu-market-table td { border-left: 0; border-top: 1px solid var(--hu-line); padding: 14px 18px; }
	.hu-section .hu-market-table td:first-child { border-top: 0; padding-bottom: 6px; }
	.hu-section .hu-market-table td:first-child + td { border-top: 0; padding-top: 0; }
	.hu-section .hu-timeline::before { left: 69px; }
	.hu-section .hu-timeline-item { grid-template-columns: 55px minmax(0, 1fr); gap: 30px; }
	.hu-section .hu-breakout p { font-size: 22px; }
	.hu-section .wp-block-quote.hu-breakout { margin: 40px 0 !important; padding: 26px 22px; }
	.hu-section .wp-block-image.hu-team-photo, .hu-section .hu-team-photo img { min-height: 260px; }
}
@media (max-width: 480px) {
	.hu-section .hu-fit-card, .hu-section .hu-now-card { padding: 24px 20px; }
	.hu-section .hu-timeline-title { font-size: 25px; }
	.hu-section .hu-story-lead > p:not(.hu-eyebrow) { font-size: 17px; }
}

/* Buttons (core Button block + class). Rule: darker shade of own colour. */
.hu-section .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.hu-section :is(.hu-btn-yellow, .hu-btn-navy, .hu-btn-blue, .hu-btn-white) > .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 22px;
	border: 1px solid transparent; border-radius: 5px; font-size: 13px; font-weight: 850; line-height: 1.2; text-decoration: none; white-space: nowrap;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.hu-section .hu-btn-yellow > .wp-block-button__link { background: var(--hu-yellow); border-color: var(--hu-yellow-edge); color: var(--hu-navy); }
.hu-section .hu-btn-yellow > .wp-block-button__link:is(:hover, :focus-visible, :active) { background: var(--hu-yellow-hover); border-color: var(--hu-yellow-hover); color: var(--hu-navy); }
.hu-section .hu-btn-navy > .wp-block-button__link { background: var(--hu-navy); border-color: var(--hu-navy); color: var(--hu-white); }
.hu-section .hu-btn-navy > .wp-block-button__link:is(:hover, :focus-visible, :active) { background: var(--hu-navy-hover); border-color: var(--hu-navy-hover); color: var(--hu-white); }
.hu-section .hu-btn-blue > .wp-block-button__link { background: var(--hu-blue); border-color: var(--hu-blue); color: var(--hu-white); }
.hu-section .hu-btn-blue > .wp-block-button__link:is(:hover, :focus-visible, :active) { background: var(--hu-blue-hover); border-color: var(--hu-blue-hover); color: var(--hu-white); }
.hu-section .hu-btn-white > .wp-block-button__link { background: var(--hu-white); border-color: var(--hu-line); color: var(--hu-navy); }
.hu-section .hu-btn-white > .wp-block-button__link:is(:hover, :focus-visible, :active) { background: var(--hu-white-hover); color: var(--hu-navy); }
.hu-section :is(.hu-btn-yellow, .hu-btn-navy, .hu-btn-blue, .hu-btn-white) > .wp-block-button__link:focus-visible { outline: 3px solid var(--hu-navy); outline-offset: 2px; box-shadow: 0 0 0 2px var(--hu-white); }

/* Mobile: everything stacks cleanly */
@media (max-width: 920px) {
	.wp-block-group.hu-section { padding: 62px 0; }
	.hu-section .hu-section-head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 26px; }
	.hu-section :is(.hu-card-grid, .hu-case-grid, .hu-testimonial-grid, .hu-price-grid, .hu-compare, .hu-proof-strip, .hu-pod-grid, .hu-score-grid, .hu-fit-grid, .hu-team-photos, .hu-now-grid) { grid-template-columns: minmax(0, 1fr); }
	.hu-section .hu-price-card { border-right: 0; border-bottom: 1px solid var(--hu-line); }
	.hu-section .hu-price-card:last-child { border-bottom: 0; }
	.hu-section .hu-compare-col + .hu-compare-col { border-left: 0; border-top: 1px solid var(--hu-line); }
	.hu-section .hu-pricing-intro { flex-direction: column; align-items: flex-start; }
	.hu-section .hu-big-cta { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 30px 24px; }
}
@media (max-width: 480px) {
	.hu-section .hu-wrap { width: calc(100% - 32px); }
	.hu-section :is(.hu-btn-yellow, .hu-btn-navy) > .wp-block-button__link { white-space: normal; text-align: center; }
	.hu-section .hu-big-cta-buttons, .hu-section .hu-big-cta-buttons .wp-block-button, .hu-section .hu-big-cta-buttons .wp-block-button__link { width: 100%; }
	.hu-section .hu-pricing-intro, .hu-section .hu-price-card, .hu-section .hu-compare-col { padding: 22px 20px; }
}

/* ---------- v0.3.8 shared archive / directory / generic-page components ---------- */
.hu-placeholder { display: inline-block; padding: 2px 6px; border: 1px dashed #C2410C; border-radius: 4px; background: #FFF7ED; color: #9A3412; font-size: 11px; font-weight: 800; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.hu-editor-note { margin: 0; }
[data-hu-item][hidden], [data-hu-empty][hidden], [data-hu-more][hidden] { display: none !important; }

/* Filter / search bar (Case Studies, Testimonials, Directory). Chips are white
   buttons -> darker white on hover; the active chip is navy -> darker navy. */
.hu-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 28px; }
.hu-filterbar .hu-filter, .hu-filterbar a.hu-filter {
	display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border: 1px solid var(--hu-line); border-radius: 999px;
	background: var(--hu-white); color: var(--hu-navy); font: inherit; font-size: 11px; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.hu-filterbar .hu-filter:is(:hover, :focus-visible, :active) { background: var(--hu-white-hover); color: var(--hu-navy); }
.hu-filterbar .hu-filter.is-active { background: var(--hu-navy); border-color: var(--hu-navy); color: var(--hu-white); }
.hu-filterbar .hu-filter.is-active:is(:hover, :focus-visible, :active) { background: var(--hu-navy-hover); border-color: var(--hu-navy-hover); color: var(--hu-white); }
.hu-filterbar .hu-filter:focus-visible { outline: 3px solid var(--hu-blue); outline-offset: 2px; }
.hu-filterbar .hu-searchbox, .hu-filterbar input[type="search"] {
	margin-left: auto; min-width: 250px; min-height: 40px; padding: 0 15px; border: 1px solid var(--hu-line); border-radius: 999px;
	background: var(--hu-white); color: var(--hu-ink); font: inherit; font-size: 13px;
}
.hu-filterbar .hu-searchbox:focus { outline: 2px solid var(--hu-blue); outline-offset: 1px; border-color: var(--hu-blue); }
.hu-filterbar form { display: flex; gap: 8px; margin-left: auto; }
.hu-filterbar form .hu-searchbox { margin-left: 0; }
.hu-filter-empty { margin: 24px 0 0; color: var(--hu-muted); font-size: 14px; }
.hu-section .hu-case-title a { color: inherit; text-decoration: none; }
.hu-section .hu-case-title a:hover { color: var(--hu-blue); }
.hu-landing .hu-video--empty { display: grid; place-items: center; padding: 16px; color: rgba(var(--hu-white-rgb), .75); font-size: 13px; font-weight: 800; text-align: center; }

/* Directory hub: switcher, intro + quick card, directory cards */
.wp-block-group.hu-section--hubnav { padding: 20px 0; background: var(--hu-surface); border-bottom: 1px solid var(--hu-line); }
.hu-hub-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.hu-hub-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border: 1px solid var(--hu-line); border-radius: 999px; background: var(--hu-white); color: var(--hu-navy); font-size: 11px; font-weight: 900; text-decoration: none; transition: background-color .16s ease, border-color .16s ease; }
.hu-hub-nav a:is(:hover, :focus-visible) { background: var(--hu-white-hover); color: var(--hu-navy); }
.hu-hub-nav a.is-active { background: var(--hu-navy); border-color: var(--hu-navy); color: var(--hu-white); }
.hu-hub-nav a.is-active:is(:hover, :focus-visible) { background: var(--hu-navy-hover); border-color: var(--hu-navy-hover); color: var(--hu-white); }
.hu-section .hu-hub-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: start; }
.hu-section .hu-hub-intro > *, .hu-section .hu-quick-card > * { margin-block: 0; }
.hu-section .hu-hub-title { margin: 8px 0 15px !important; color: var(--hu-navy); font-size: clamp(36px, 4.3vw, 50px); font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.hu-section .hu-hub-intro-main > p:not(.hu-eyebrow) { color: var(--hu-muted); font-size: 16px; line-height: 1.65; }
.hu-section .hu-quick-card { padding: 24px; border: 1px solid var(--hu-yellow-hover); border-radius: 9px; background: var(--hu-yellow); color: var(--hu-navy); }
.hu-section .hu-quick-card .hu-eyebrow { color: var(--hu-navy); }
.hu-section .hu-quick-title { margin: 7px 0 14px !important; color: var(--hu-navy); font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.035em; }
.hu-section .hu-quick-links { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 !important; padding: 0; list-style: none; }
.hu-section .hu-quick-links > li { margin: 0; padding: 0; }
.hu-section .hu-quick-links > li, .hu-section .hu-quick-links a { font-size: 10px; font-weight: 850; line-height: 1.2; }
.hu-section .hu-quick-links > li { display: inline-flex; padding: 8px 10px; border-radius: 999px; background: var(--hu-navy); color: var(--hu-white); }
.hu-section .hu-quick-links a { color: var(--hu-white); text-decoration: none; }
.hu-section .hu-quick-links > li:has(a) { padding: 0; }
.hu-section .hu-quick-links > li > a { display: inline-flex; padding: 8px 10px; border-radius: 999px; transition: background-color .16s ease; }
.hu-section .hu-quick-links > li > a:is(:hover, :focus-visible) { background: var(--hu-navy-hover); color: var(--hu-white); }
.hu-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hu-directory-card { position: relative; display: flex; flex-direction: column; min-height: 210px; padding: 25px; border: 1px solid var(--hu-line); border-radius: 9px; background: var(--hu-white); color: var(--hu-ink); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.hu-directory-card:hover, .hu-directory-card:focus-within { border-color: rgba(var(--hu-blue-rgb), .45); box-shadow: 0 12px 28px rgba(var(--hu-navy-rgb), .07); transform: translateY(-2px); }
.hu-directory-kind { margin: 0; color: var(--hu-blue); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.hu-directory-card h3 { margin: 12px 0 9px; color: var(--hu-navy); font-size: 27px; font-weight: 800; line-height: 1.08; letter-spacing: -.04em; }
.hu-directory-card h3 a { color: inherit; text-decoration: none; }
.hu-directory-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hu-directory-card p { margin: 0; color: var(--hu-muted); font-size: 13px; line-height: 1.55; }
.hu-directory-more { margin-top: auto !important; padding-top: 18px; color: var(--hu-blue) !important; font-size: 11px !important; font-weight: 850; }
.hu-directory-card:hover .hu-directory-more { color: var(--hu-blue-hover) !important; }

/* Generic page shell: content + optional sidebar, split content, contact, legal */
.hu-section .hu-content-shell { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 55px; align-items: start; }
.hu-section .hu-content-main > * { margin-block: 0 16px; }
.hu-section .hu-content-main > *:last-child { margin-bottom: 0; }
.hu-section .hu-content-main > h2 { margin-top: 0; color: var(--hu-navy); font-size: clamp(32px, 3.6vw, 42px); font-weight: 800; line-height: 1.05; letter-spacing: -.045em; }
.hu-section .hu-content-main > h3 { margin-top: 28px; color: var(--hu-navy); font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }
.hu-section .hu-content-main p:not(.hu-eyebrow):not(.hu-card-num):not(.hu-card-text), .hu-section .hu-content-main li { color: #344159; font-size: 16px; line-height: 1.72; }
.hu-section .hu-content-main .hu-card-grid { margin-top: 28px; }
.hu-section .hu-side-card { position: sticky; top: 110px; padding: 24px; border: 1px solid var(--hu-line); border-radius: 8px; background: var(--hu-surface); color: var(--hu-ink); }
.hu-section .hu-side-card > * { margin-block: 0; }
.hu-section .hu-side-title { margin: 8px 0 10px !important; color: var(--hu-navy); font-size: 24px; font-weight: 800; line-height: 1.12; letter-spacing: -.03em; }
.hu-section .hu-side-card > p:not(.hu-eyebrow) { margin-bottom: 18px; color: var(--hu-muted); font-size: 13px; line-height: 1.55; }
.hu-section .hu-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hu-section .hu-split > * , .hu-section .hu-split-copy > * { margin-block: 0; }
.hu-section .hu-split-copy > p:not(.hu-eyebrow) { margin-top: 14px; color: var(--hu-muted); font-size: 16px; line-height: 1.65; }
.hu-section .hu-split-copy .wp-block-buttons { margin-top: 24px; }
.hu-section .hu-split-media { overflow: hidden; border-radius: 10px; }
.hu-section .hu-split-media img { display: block; width: 100%; height: auto; }
.hu-section .hu-contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 34px; align-items: start; }
.hu-section .hu-contact-grid > *, .hu-section .hu-contact-intro > *, .hu-section .hu-contact-card > * { margin-block: 0; }
.hu-section .hu-contact-title { margin: 10px 0 14px !important; color: var(--hu-navy); font-size: clamp(36px, 4.3vw, 48px); font-weight: 800; line-height: 1.02; letter-spacing: -.05em; }
.hu-section .hu-contact-intro > p:not(.hu-eyebrow) { color: var(--hu-muted); font-size: 16px; line-height: 1.65; }
.hu-section .hu-contact-next { margin-top: 20px !important; }
.hu-section .hu-contact-card { padding: 28px; border: 1px solid var(--hu-line); border-radius: 9px; background: var(--hu-white); }
.hu-section .hu-contact-card :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea, select) { width: 100%; padding: 12px; border: 1px solid var(--hu-line); border-radius: 5px; background: var(--hu-white); color: var(--hu-ink); font: inherit; font-size: 14px; }
.hu-section .hu-contact-card label { color: var(--hu-muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hu-section .hu-contact-card :is(button, input[type="submit"]) { min-height: 50px; padding: 0 20px; border: 1px solid var(--hu-yellow-edge); border-radius: 5px; background: var(--hu-yellow); color: var(--hu-navy); font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; }
.hu-section .hu-contact-card :is(button, input[type="submit"]):is(:hover, :focus-visible, :active) { background: var(--hu-yellow-hover); border-color: var(--hu-yellow-hover); }
.hu-section .hu-legal { max-width: 790px; }
.hu-section .hu-legal > * { margin-block: 0; }
.hu-section .hu-legal-updated { color: var(--hu-muted); font-size: 14px; }
.hu-section .hu-legal h2 { margin: 42px 0 12px !important; color: var(--hu-navy); font-size: 32px; font-weight: 800; line-height: 1.12; letter-spacing: -.035em; }
.hu-section .hu-legal h3 { margin: 28px 0 8px !important; color: var(--hu-navy); font-size: 22px; font-weight: 800; line-height: 1.2; }
.hu-section .hu-legal :is(p, li) { color: #3C4960; font-size: 15px; line-height: 1.75; }
.hu-section .hu-legal p { margin-bottom: 14px !important; }
.hu-section .hu-legal ul, .hu-section .hu-legal ol { margin: 0 0 14px !important; padding-left: 22px; }
.hu-section .hu-legal a { color: var(--hu-blue); }
.hu-section .hu-legal a:hover { color: var(--hu-blue-hover); }
.hu-section--narrow .hu-wrap { width: min(790px, calc(100% - 42px)); }

@media (max-width: 920px) {
	.hu-section .hu-hub-intro, .hu-directory-grid, .hu-section .hu-content-shell, .hu-section .hu-split, .hu-section .hu-contact-grid { grid-template-columns: minmax(0, 1fr); }
	.hu-section .hu-hub-intro { gap: 26px; }
	.hu-section .hu-side-card { position: static; }
	.hu-filterbar .hu-searchbox, .hu-filterbar input[type="search"], .hu-filterbar form { width: 100%; min-width: 0; margin-left: 0; }
	.hu-filterbar form .hu-searchbox { flex: 1; }
	.hu-directory-card { min-height: 0; }
}
/* spacing that must survive the ".hu-section .hu-wrap > * { margin-block: 0 }" reset */
.hu-section .hu-wrap > .hu-filterbar { margin-bottom: 28px; }
.hu-section .hu-wrap > .hu-filter-empty { margin-top: 24px; }
.hu-section .hu-wrap > .hu-pagination { margin-top: 32px; }
.hu-section .hu-wrap > .hu-loadmore { margin-top: 30px; }

/* v0.3.12 generic page shell extras */
.hu-section .hu-contact-next { padding: 22px; border: 1px solid var(--hu-line); border-radius: 9px; background: var(--hu-white); }
.hu-section .hu-contact-next > * { margin-block: 0; }
.hu-section .hu-contact-next .hu-role-pill { display: inline-flex; }
.hu-section .hu-contact-next h3 { margin: 12px 0 6px !important; color: var(--hu-navy); font-size: 22px; font-weight: 800; line-height: 1.14; letter-spacing: -.03em; }
.hu-section .hu-contact-next p:not(.hu-role-pill) { color: var(--hu-muted); font-size: 13px; line-height: 1.56; }
.hu-section .hu-price-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hu-section .hu-legal h1 { margin: 12px 0 8px !important; color: var(--hu-navy); font-size: clamp(40px, 5vw, 56px); font-weight: 800; line-height: 1.02; letter-spacing: -.055em; }
.hu-landing .hu-page-hero--simple:not(:has(.hu-hero-dek)) .hu-hero-title { margin-bottom: 0; }
/* Founder Files signup on pattern-built pages (same look as the Resources archive) */
.hu-landing .ff-optin { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin: 0; padding: 32px; border: 1px solid var(--hu-yellow-hover); border-radius: 9px; background: var(--hu-yellow); color: var(--hu-navy); }
.hu-landing .ff-optin h2 { margin: 0 0 8px; color: var(--hu-navy); font-size: 34px; font-weight: 800; line-height: 1.08; letter-spacing: -.04em; }
.hu-landing .ff-optin p { margin: 0; color: #273750; font-size: 14px; line-height: 1.55; }
.hu-landing .ff-optin-form { display: flex; gap: 8px; }
.hu-landing .ff-optin-form input { min-width: 260px; height: 50px; padding: 0 14px; border: 1px solid rgba(var(--hu-navy-rgb), .2); border-radius: 5px; background: var(--hu-white); color: var(--hu-ink); font: inherit; font-size: 14px; }
.hu-landing .ff-optin-form button { min-height: 50px; padding: 0 20px; border: 1px solid var(--hu-navy); border-radius: 5px; background: var(--hu-navy); color: var(--hu-white); font: inherit; font-size: 13px; font-weight: 850; white-space: nowrap; cursor: pointer; transition: background-color .16s ease; }
.hu-landing .ff-optin-form button:is(:hover, :focus-visible, :active) { background: var(--hu-navy-hover); border-color: var(--hu-navy-hover); }
@media (max-width: 920px) {
	.hu-section .hu-price-grid--2 { grid-template-columns: minmax(0, 1fr); }
	.hu-landing .ff-optin { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
	.hu-landing .ff-optin-form { flex-direction: column; }
	.hu-landing .ff-optin-form input { min-width: 0; width: 100%; }
}

/* v0.3.13: hub intro stacks tightly on phones (heading -> quick card ~18px) */
@media (max-width: 920px) {
	.hu-section .hu-hub-intro { gap: 18px; }
	.hu-section .hu-hub-title { margin-bottom: 0 !important; }
}

/* v0.3.20 Case card media fallback: featured image when there is no Wistia ID (16:9 cover crop). */
.hu-landing .hu-case-media--image { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #020713; }
.hu-landing .hu-feature-video > .hu-case-media--image { height: 100%; }
.hu-landing .hu-case-media--image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .35s ease; }
.hu-landing .hu-case-card:hover .hu-case-media--image img { transform: scale(1.025); }
@media (prefers-reduced-motion: reduce) { .hu-landing .hu-case-media--image img { transition: none; } .hu-landing .hu-case-card:hover .hu-case-media--image img { transform: none; } }

/* ==========================================================================
   v0.3.25 Proof-first components (Kyle, 2026-10-08)
   Proof Hero (client story + video), Proof Cards (2-up), subtle Flag Strip,
   Pay Card, Math Row, Review Card, Slot note. Same tokens, Inter, buttons
   follow the rule (darker shade of their own colour). No external assets.
   ========================================================================== */

/* Proof Hero: copy left (eyebrow, result headline, role line, story, CTA + text link),
   video card with the click-to-play facade + quote right. Uses the Position Hero styles. */
.wp-block-group.hu-page-hero--proof { padding: 72px 0 70px; }
.hu-page-hero--proof .hu-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.hu-page-hero--proof .hu-hero-title { margin: 14px 0 18px !important; font-size: clamp(46px, 6.6vw, 94px); }
.hu-page-hero--proof .hu-proof-role {
	display: inline-flex; align-items: center; width: max-content; max-width: 100%; min-height: 30px; margin: 0 0 18px !important; padding: 0 12px;
	border: 1px solid var(--hero-panel-border); border-radius: 999px; background: var(--hero-stat-bg);
	color: var(--hero-heading); font-size: 10px; font-weight: 850; letter-spacing: .1em; line-height: 1.25; text-transform: uppercase;
}
.hu-page-hero--proof .hu-hero-dek { max-width: 560px; font-size: 17px; }
.hu-page-hero .hu-proof-media { overflow: hidden; border: 1px solid var(--hero-panel-border); border-radius: 12px; background: var(--hero-panel-bg); box-shadow: var(--hero-media-shadow); }
.hu-page-hero .hu-proof-media > * { margin-block: 0; }
.hu-page-hero .hu-proof-media .hu-video { border: 0; border-radius: 0; }
.hu-page-hero .wp-block-quote.hu-proof-quote { margin: 0 !important; padding: 20px 22px 22px; border: 0; border-top: 1px solid var(--hero-panel-border); }
.hu-page-hero .hu-proof-quote p { margin: 0; color: var(--hero-heading); font-size: 18px; font-weight: 750; line-height: 1.42; letter-spacing: -.015em; }
.hu-page-hero .hu-proof-quote cite { display: block; margin-top: 10px; color: var(--hero-panel-muted); font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.4; }
.hu-page-hero .hu-proof-quote cite strong { color: var(--hero-heading); }
@media (max-width: 900px) {
	.wp-block-group.hu-page-hero--proof { padding: 50px 0 48px; }
	.hu-page-hero--proof .hu-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.hu-page-hero .hu-proof-quote p { font-size: 16px; }
}
@media (max-width: 420px) {
	.hu-page-hero--proof .hu-hero-title { font-size: 44px; }
	.hu-page-hero .wp-block-quote.hu-proof-quote { padding: 16px 16px 18px; }
}

/* Subtle flag strip (region heroes): small local PNG flags above the headline, muted.
   Decorative only (aria-hidden); never large. Class per country: .hu-flag--co etc. */
.hu-flag-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 16px !important; padding: 0; list-style: none; }
.hu-flag-strip > li { flex: 0 0 auto; width: 27px; height: 20px; margin: 0; border-radius: 3px; background: #8A94A6 center / cover no-repeat; opacity: .6; filter: saturate(.7); box-shadow: inset 0 0 0 1px rgba(var(--hu-white-rgb), .16); }
:is(.is-style-hu-hero-white, .is-style-hu-hero-yellow, .hu-section:not(.hu-section--navy)) .hu-flag-strip > li { opacity: .78; box-shadow: inset 0 0 0 1px rgba(var(--hu-navy-rgb), .12); }
@media (max-width: 480px) { .hu-flag-strip { gap: 6px; } .hu-flag-strip > li { width: 24px; height: 18px; } }
.hu-flag--co { background-image: url(../img/flags/co.png) !important; }
.hu-flag--mx { background-image: url(../img/flags/mx.png) !important; }
.hu-flag--ar { background-image: url(../img/flags/ar.png) !important; }
.hu-flag--br { background-image: url(../img/flags/br.png) !important; }
.hu-flag--ve { background-image: url(../img/flags/ve.png) !important; }
.hu-flag--ec { background-image: url(../img/flags/ec.png) !important; }
.hu-flag--gt { background-image: url(../img/flags/gt.png) !important; }
.hu-flag--hn { background-image: url(../img/flags/hn.png) !important; }
.hu-flag--uy { background-image: url(../img/flags/uy.png) !important; }
.hu-flag--py { background-image: url(../img/flags/py.png) !important; }
.hu-flag--bo { background-image: url(../img/flags/bo.png) !important; }
.hu-flag--cr { background-image: url(../img/flags/cr.png) !important; }
.hu-flag--sv { background-image: url(../img/flags/sv.png) !important; }
.hu-flag--bz { background-image: url(../img/flags/bz.png) !important; }
/* Many flags (10+, e.g. Latin America = 14): one faint single row, smaller chips. Auto via :has(), or add .hu-flag-strip--many. */
.hu-flag-strip:is(.hu-flag-strip--many, :has(> li:nth-child(10))) { flex-wrap: nowrap; gap: 5px; max-width: 100%; overflow: hidden; }
.hu-flag-strip:is(.hu-flag-strip--many, :has(> li:nth-child(10))) > li { width: 20px; height: 15px; border-radius: 2px; opacity: .45; }
:is(.is-style-hu-hero-white, .is-style-hu-hero-yellow, .hu-section:not(.hu-section--navy)) .hu-flag-strip:is(.hu-flag-strip--many, :has(> li:nth-child(10))) > li { opacity: .6; }
@media (max-width: 480px) { .hu-flag-strip:is(.hu-flag-strip--many, :has(> li:nth-child(10))) { gap: 4px; } .hu-flag-strip:is(.hu-flag-strip--many, :has(> li:nth-child(10))) > li { width: 17px; height: 13px; } }
.hu-flag--pe { background-image: url(../img/flags/pe.png) !important; }
.hu-flag--cl { background-image: url(../img/flags/cl.png) !important; }
.hu-flag--ua { background-image: url(../img/flags/ua.png) !important; }
.hu-flag--rs { background-image: url(../img/flags/rs.png) !important; }
.hu-flag--bg { background-image: url(../img/flags/bg.png) !important; }
.hu-flag--md { background-image: url(../img/flags/md.png) !important; }
.hu-flag--xk { background-image: url(../img/flags/xk.png) !important; }
.hu-flag--mk { background-image: url(../img/flags/mk.png) !important; }
.hu-flag--al { background-image: url(../img/flags/al.png) !important; }
.hu-flag--ro { background-image: url(../img/flags/ro.png) !important; }
.hu-flag--pl { background-image: url(../img/flags/pl.png) !important; }
.hu-flag--ba { background-image: url(../img/flags/ba.png) !important; }
.hu-flag--me { background-image: url(../img/flags/me.png) !important; }

/* v0.3.29 (Kyle, Oct 8 16:15): videos inside proof components use the STANDARD facade, the same
   poster + Wistia-style yellow play button as every other Wistia video (style.css .hu-wf-*). The old
   0.3.25 circular-button override that lived here is removed on purpose. YouTube embeds in the same
   cards (core/embed + the 0.3.23 YouTube facade) get the same play button so the cards match. */
.hu-landing :is(.hu-case-card, .hu-proof-media, .hu-testimonial-card) .hu-video-facade::after { content: none; }
.hu-landing :is(.hu-case-card, .hu-proof-media, .hu-testimonial-card) .hu-video-play {
	z-index: 1; width: clamp(56px, 19.6%, 125px); height: auto; aspect-ratio: 125 / 80; border-radius: 0; box-shadow: none;
	background: rgba(var(--hu-yellow-rgb), .86); transition: background-color .16s ease;
}
.hu-landing :is(.hu-case-card, .hu-proof-media, .hu-testimonial-card) .hu-video-play::before {
	left: 51%; width: 19%; height: 41%; border: 0; background: rgba(0, 0, 0, .55); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.hu-landing :is(.hu-case-card, .hu-proof-media, .hu-testimonial-card) .hu-video-facade:is(:hover, :focus-visible) .hu-video-play { background: var(--hu-yellow-hover); transform: translate(-50%, -50%); }
@media (max-width: 600px) {
	.hu-landing :is(.hu-case-card, .hu-proof-media, .hu-testimonial-card) .hu-video-play { width: clamp(56px, 19.6%, 125px); height: auto; }
}

/* v0.3.29 Flag Scatter (Kyle, Oct 8 16:15: "scatter them throughout the whole hero" instead of one row).
   Markup (pattern "HireUA / Proof Hero (Region, flags)"): first child of a hero section with
   .hu-has-flag-scatter, a Custom HTML block:
     <div class="hu-flag-scatter" aria-hidden="true"><span class="hu-flag hu-flag--co is-e" style="--x:2%;--y:20%;--s:34px;--r:-10deg"></span>…</div>
   --x/--y = the flag's centre in the hero (percent), --s = width, --r = rotation. Tiers: .is-e edge flags
   (every width), .is-t hidden at 480px and below, .is-d desktop only (hidden at 900px and below: the
   column gutter and the band under the content). Decorative, low opacity, behind the content, clipped
   to the hero (no overflow). Any hu-flag--xx country class works, so other region pages can reuse it. */
.hu-page-hero.hu-has-flag-scatter,
.hu-page-hero:has(> .hu-flag-scatter) { position: relative; overflow: hidden; isolation: isolate; }
.hu-flag-scatter { position: absolute; inset: 0; z-index: 0; margin: 0 !important; pointer-events: none; overflow: hidden; }
.hu-flag-scatter ~ .hu-wrap { position: relative; z-index: 1; }
.hu-flag-scatter > .hu-flag {
	position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: var(--s, 28px); aspect-ratio: 4 / 3; height: auto;
	border-radius: 3px; background: #8A94A6 center / cover no-repeat; opacity: .2; filter: saturate(.75);
	box-shadow: inset 0 0 0 1px rgba(var(--hu-white-rgb), .12);
	transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}
:is(.is-style-hu-hero-white, .is-style-hu-hero-yellow) .hu-flag-scatter > .hu-flag { opacity: .22; box-shadow: inset 0 0 0 1px rgba(var(--hu-navy-rgb), .1); }
@media (max-width: 900px) {
	.hu-flag-scatter > .is-d { display: none; }
	.hu-flag-scatter > .hu-flag { width: calc(var(--s, 28px) * .62); opacity: .14; }
}
@media (max-width: 480px) {
	.hu-flag-scatter > .is-t { display: none; }
	.hu-flag-scatter > .hu-flag { width: calc(var(--s, 28px) * .5); }
}

/* v0.3.29 Social Proof row (Kyle: "snapshots of his social accounts underneath that player").
   Three cards: profile screenshot (core Image, linked), platform label, "View profile ↗" link (new tab).
   Sits in the hero under the hero grid (.hu-hero-after) or in any section. Stacks on mobile. */
.hu-page-hero .hu-wrap.hu-hero-after { margin-top: 34px; }
.hu-social-proof > * { margin-block: 0; }
.hu-social-proof .hu-social-proof-title { margin: 0 0 14px !important; color: var(--hero-kicker, var(--hu-blue)); font-size: 10px; font-weight: 850; letter-spacing: .15em; line-height: 1.3; text-transform: uppercase; }
.hu-social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hu-social-grid > * { margin-block: 0; min-width: 0; }
.hu-social-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hero-panel-border, var(--hu-line)); border-radius: 12px; background: var(--hero-panel-bg, var(--hu-white)); }
.hu-social-card > * { margin-block: 0; }
.hu-social-card .wp-block-image.hu-social-shot { margin: 0; aspect-ratio: 2 / 1; overflow: hidden; background: #FFFFFF; }
.hu-social-card .hu-social-shot a, .hu-social-card .hu-social-shot img { display: block; width: 100%; height: 100%; }
.hu-social-card .hu-social-shot img { max-width: none; object-fit: contain; object-position: center; }
/* v0.3.31 safety: if a Group still gets core's inner-container wrapper, let the cards be direct grid/flex children */
.hu-social-proof .wp-block-group__inner-container { display: contents; }
.hu-social-card .hu-social-platform { margin: 14px 16px 2px !important; color: var(--hero-heading, var(--hu-navy)); font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.hu-social-card .hu-social-link { margin: 0 16px 15px !important; font-size: 12px; font-weight: 750; }
.hu-social-card .hu-social-link a { color: var(--hero-panel-muted, var(--hu-blue)); text-decoration: none; }
.hu-social-card .hu-social-link a:is(:hover, :focus-visible) { color: var(--hero-link-hover, #104BC4); text-decoration: underline; }
:where(.hu-section) .hu-social-card .hu-social-link a { color: var(--hu-blue); }
:where(.hu-section) .hu-social-card .hu-social-link a:is(:hover, :focus-visible) { color: #104BC4; }
@media (max-width: 760px) {
	.hu-social-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Pay Card: big monthly range + what moves it (salary guidance, not HireUA fees) */
.hu-section .hu-pay-card { display: grid; grid-template-columns: .95fr 1.05fr; overflow: hidden; border: 1px solid var(--hu-line); border-radius: 10px; background: var(--hu-white); color: var(--hu-navy); }
.hu-section :is(.hu-pay-card, .hu-pay-main, .hu-pay-side, .hu-pay-tiers, .hu-pay-tier) > * { margin-block: 0; }
.hu-section .hu-pay-main { padding: 34px; background: var(--hu-navy); color: var(--hu-white); }
.hu-section .hu-pay-main .hu-eyebrow { color: var(--hu-yellow); }
.hu-section .hu-pay-range { margin: 12px 0 6px !important; color: var(--hu-white); font-size: clamp(40px, 5vw, 64px); font-weight: 900; line-height: 1; letter-spacing: -.055em; }
.hu-section .hu-pay-unit { color: #B8C5D7; font-size: 13px; line-height: 1.5; }
.hu-section .hu-pay-side { padding: 34px; }
.hu-section .hu-pay-side h3 { margin: 0 0 14px !important; color: var(--hu-navy); font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.025em; }
.hu-section .hu-pay-side ul { display: grid; gap: 10px; margin: 0 !important; padding-left: 18px; color: var(--hu-muted); font-size: 14px; line-height: 1.55; }
.hu-section .hu-pay-note { margin-top: 18px !important; color: var(--hu-muted); font-size: 12px; line-height: 1.5; }
.hu-section .hu-pay-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px !important; background: rgba(var(--hu-white-rgb), .14); border: 1px solid rgba(var(--hu-white-rgb), .14); border-radius: 8px; overflow: hidden; }
.hu-section .hu-pay-tier { padding: 16px; background: var(--hu-navy); color: #B8C5D7; font-size: 11px; line-height: 1.4; }
.hu-section .hu-pay-tier strong { display: block; margin-bottom: 3px; color: var(--hu-white); font-size: 28px; font-weight: 900; line-height: 1.05; letter-spacing: -.045em; }
@media (max-width: 920px) { .hu-section .hu-pay-card { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .hu-section :is(.hu-pay-main, .hu-pay-side) { padding: 24px 20px; } .hu-section .hu-pay-tier strong { font-size: 23px; } }

/* Math Row: "$1,000,000 ÷ 2,000 hrs = $500 / hr" as three tiles with operators */
.hu-section .hu-math { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 12px; }
.hu-section .hu-math > * { margin-block: 0; }
.hu-section .hu-math-tile { margin: 0; padding: 24px; border: 1px solid var(--hu-line); border-radius: 9px; background: var(--hu-white); color: var(--hu-muted); font-size: 12px; line-height: 1.45; }
.hu-section .hu-math-tile strong { display: block; margin-bottom: 6px; color: var(--hu-navy); font-size: clamp(30px, 3.4vw, 44px); font-weight: 900; line-height: 1.02; letter-spacing: -.05em; }
.hu-section .hu-math-tile br { display: none; }
.hu-section .hu-math-tile.is-result { border-color: var(--hu-yellow-hover); background: var(--hu-yellow); color: #273750; }
.hu-section .hu-math-op { display: grid; place-items: center; margin: 0; color: var(--hu-blue); font-size: 30px; font-weight: 900; line-height: 1; }
@media (max-width: 920px) {
	.hu-section .hu-math { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.hu-section .hu-math-op { font-size: 24px; }
}

.hu-tp-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; padding: 18px 24px; border: 1px solid var(--hu-line); border-radius: 10px; background: var(--hu-white); color: var(--hu-navy); font-size: 15px; line-height: 1.3; }
.hu-tp-strip > * { margin: 0 !important; }
.hu-tp-strip .hu-tp-strip-label { font-size: 20px; font-weight: 850; letter-spacing: -.02em; }
.hu-tp-strip .hu-tp-stars { display: block; width: auto; height: 26px; }
.hu-tp-strip .hu-tp-strip-meta { color: var(--hu-muted); }
.hu-tp-strip .hu-tp-strip-meta strong { color: var(--hu-navy); font-weight: 850; }
.hu-tp-strip .hu-tp-label { color: #191919; font-weight: 700; }
.hu-tp-strip a { color: var(--hu-blue); font-weight: 800; text-decoration: none; }
.hu-tp-strip a:is(:hover, :focus-visible) { color: var(--hu-link-hover); text-decoration: underline; }
@media (max-width: 680px) { .hu-tp-strip { flex-direction: column; gap: 8px; padding: 20px 18px; text-align: center; } }

/* Spacing between stacked blocks inside one section */
.hu-section .hu-wrap > .hu-stack-gap { margin-top: 18px !important; }
.hu-section .hu-wrap > .hu-section-foot { margin-top: 22px !important; color: var(--hu-muted); font-size: 13px; line-height: 1.55; }
.hu-section--navy .hu-wrap > .hu-section-foot { color: #B8C5D7; }
.hu-section .hu-section-foot a { color: var(--hu-blue); font-weight: 850; text-decoration: none; }
.hu-section--navy .hu-section-foot a { color: var(--hu-yellow); }
.hu-section .hu-section-foot a:is(:hover, :focus-visible) { color: var(--hu-link-hover); }
.hu-section--navy .hu-section-foot a:is(:hover, :focus-visible) { color: var(--hu-yellow-hover); }

/* v0.3.25 2026 Logo Refresh lockup bands (patterns "HireUA / Brand Lockup — …", "Tag Lockup Strip").
   Outlined SVGs from assets/img/brand/ (no font). */
.wp-block-group.hu-brand-band { padding: 64px 0; }
.wp-block-group.hu-brand-band--navy { background: var(--hu-navy); }
.wp-block-group.hu-brand-band--white { background: var(--hu-white); border-top: 1px solid var(--hu-line); border-bottom: 1px solid var(--hu-line); }
.wp-block-group.hu-brand-band--light { background: #F3F5F8; }
.wp-block-group.hu-brand-band--yellow { background: var(--hu-yellow); }
.hu-section .wp-block-image.hu-brand-lockup { margin: 0 auto; text-align: center; }
.hu-section .hu-brand-lockup img { display: inline-block; max-width: 100%; height: auto; }
.wp-block-group.hu-tag-band { padding: 48px 0; }
.hu-section .hu-tag-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.hu-section .hu-tag-strip > * { margin-block: 0; }
.hu-section .wp-block-image.hu-tag-lockup { margin: 0; }
.hu-section .hu-tag-lockup img { display: block; max-width: 100%; height: auto; }
.hu-section .hu-tag-strip-text { padding-left: 40px; border-left: 1.5px solid rgba(var(--hu-white-rgb), .28); color: #C4D0E1; font-size: 17px; font-weight: 600; line-height: 1.5; }
@media (max-width: 920px) {
	.hu-section .hu-tag-strip { grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: center; text-align: center; }
	.hu-section .hu-tag-strip-text { padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(var(--hu-white-rgb), .16); }
	.wp-block-group.hu-brand-band { padding: 48px 0; }
}


/* ---------- v0.3.25 Related Guides ([hireua_related_guides]) ---------- */
.hu-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; }
.hu-guide-grid--1 { grid-template-columns: minmax(0, 420px); }
.hu-guide-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hu-guide-card { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--hu-line); border-radius: var(--hu-card-r, 12px); background: var(--hu-white); color: var(--hu-ink); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.hu-guide-card:hover, .hu-guide-card:focus-within { border-color: rgba(var(--hu-blue-rgb), .45); box-shadow: 0 12px 28px rgba(var(--hu-navy-rgb), .08); transform: translateY(-2px); }
.hu-guide-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--hu-navy); }
.hu-guide-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hu-guide-copy { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.hu-guide-title { margin: 0 0 9px !important; color: var(--hu-navy); font-size: 20px; font-weight: 800; line-height: 1.18; letter-spacing: -.025em; }
.hu-guide-title a { color: inherit; text-decoration: none; }
.hu-guide-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hu-guide-title a:focus-visible { outline: none; }
.hu-guide-card:focus-within { outline: 2px solid var(--hu-blue); outline-offset: 2px; }
.hu-guide-excerpt { margin: 0 0 16px !important; color: var(--hu-muted); font-size: 14px; line-height: 1.55; }
.hu-guide-more { margin: auto 0 0 !important; color: var(--hu-blue); font-size: 13px; font-weight: 800; }
.hu-guide-card:hover .hu-guide-more { color: var(--hu-blue-hover); }
@media (max-width: 1050px) { .hu-guide-grid, .hu-guide-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
	.hu-guide-grid, .hu-guide-grid--2, .hu-guide-grid--1 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.hu-guide-title { font-size: 19px; }
}

/* ---------- v0.3.25 Case-study + testimonial cards: EXISTING components only ----------
   batch11 / Trustpilot blocks reuse .hu-case-card (3 Case Studies) and .hu-testimonial-card
   (Video Testimonial Row). Only layout modifiers and one small Trustpilot variant are added. */
.hu-section .hu-case-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hu-section .hu-testimonial-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hu-section .hu-testimonial-grid--1 { grid-template-columns: minmax(0, 780px); }
@media (max-width: 920px) { .hu-section :is(.hu-case-grid--2, .hu-testimonial-grid--2, .hu-testimonial-grid--1) { grid-template-columns: minmax(0, 1fr); } }
/* YouTube (core/embed -> theme facade) as the media of an existing case card */
.hu-section .hu-case-card > .wp-block-embed { margin: 0; overflow: hidden; background: #020713; border-radius: calc(var(--hu-card-r) - var(--hu-card-bw)) calc(var(--hu-card-r) - var(--hu-card-bw)) 0 0; }
.hu-section .hu-case-card > .wp-block-embed .hu-video-frame { aspect-ratio: 16 / 9; }
/* Testimonial card, Trustpilot variant: green Trustpilot stars (inline SVG: white stars on #00B67A,
   remainder #DCDCE6) + plain-text label above the quote; name + "Read on Trustpilot" in the footer. */
.hu-section .hu-testimonial-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; line-height: 1; }
.hu-section .hu-testimonial-rating .hu-tp-stars { display: block; flex: 0 0 auto; width: auto; height: 20px; }
.hu-section .hu-testimonial-rating .hu-tp-label { color: #191919; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.hu-section .hu-testimonial-card--tp .hu-testimonial-rating + .hu-testimonial-quote { margin-top: 14px !important; }
.hu-section .hu-testimonial-card--tp .hu-testimonial-quote p + p { margin-top: .7em; }
.hu-section .hu-testimonial-card--tp .hu-testimonial-footer { display: grid; gap: 8px; }
.hu-section .hu-testimonial-card--tp .hu-testimonial-footer > * { margin: 0; }

/* ---------- v0.3.33 Readability pass (Kyle QA, 2026-10-08) ----------
   Kyle: proof cards were hard to read (8px tag pills, crushed 44px stat, 9px label,
   13px light-grey body), the Trustpilot quote was a bold wall of text, and the
   one-line "problem" paragraphs read as a wall. Fixes below apply to every page that
   uses these components. Body copy on white uses slate #334155 / #475569 (AA+). */

/* Proof cards (.hu-case-card): no tag pill look; readable stat, label, body, link */
.hu-section .hu-case-copy { padding: 24px 24px 22px; }
.hu-section .hu-case-card .hu-company-pill {
	display: block; justify-self: auto; width: auto; min-height: 0; padding: 0; border-radius: 0; background: none;
	color: #334155; font-size: 13px; font-weight: 700; letter-spacing: .01em; line-height: 1.4; text-transform: none;
}
.hu-section .hu-case-stat { margin-top: 12px !important; color: var(--hu-blue); font-size: clamp(34px, 3.2vw, 44px); font-weight: 850; line-height: 1.05; letter-spacing: -.02em; text-transform: none; }
.hu-section .hu-case-copy > .hu-case-stat:first-child { margin-top: 0 !important; }
.hu-section .hu-case-metric { margin-top: 8px !important; color: #475569; font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1.45; text-transform: uppercase; }
.hu-section .hu-case-title { margin: 16px 0 10px !important; font-size: clamp(20px, 1.75vw, 22px); line-height: 1.2; letter-spacing: -.02em; }
.hu-section .hu-case-story { color: #334155; font-size: 15px; line-height: 1.6; }
.hu-section .hu-case-card .hu-case-story { margin-bottom: 20px !important; }
.hu-section .hu-case-story + .hu-case-footer { margin-top: auto !important; }
.hu-section .hu-case-footer { padding-top: 16px; }
.hu-section .hu-case-link { font-size: 14px; font-weight: 750; line-height: 1.4; }
.hu-section .hu-case-title .hu-latam-cc, .hu-section .hu-case-title .hu-flag-inline { vertical-align: -.08em; }

/* Proof card without a video: navy panel at the same 16:9 height as the media cards */
.hu-section .hu-case-card > .hu-case-panel {
	position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
	aspect-ratio: 16 / 9; margin: 0; padding: clamp(22px, 2.6vw, 32px); overflow: hidden;
	border-radius: calc(var(--hu-card-r) - var(--hu-card-bw)) calc(var(--hu-card-r) - var(--hu-card-bw)) 0 0;
	background: radial-gradient(circle at 88% 12%, rgba(var(--hu-blue-rgb), .55), transparent 46%), radial-gradient(rgba(var(--hu-white-rgb), .09) 1.2px, transparent 1.3px) 0 0 / 14px 14px, var(--hu-navy);
	color: var(--hu-white);
}
.hu-section .hu-case-panel > * { position: relative; margin: 0; }
.hu-section .hu-case-panel-name { color: var(--hu-yellow); font-size: 15px; font-weight: 800; letter-spacing: .01em; line-height: 1.3; }
.hu-section .hu-case-panel-line { max-width: 22ch; color: var(--hu-white); font-size: clamp(22px, 2.3vw, 30px); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; }

/* Testimonial cards: readable person line */
.hu-section .hu-testimonial-person { color: #475569; font-size: 13px; line-height: 1.45; }
.hu-section .hu-testimonial-person strong { font-size: 15px; }

/* Testimonial card without a video: navy quote card */
.hu-section .hu-testimonial-card--quote { border-color: var(--hu-navy); }
.hu-section .hu-testimonial-card--quote > .hu-testimonial-copy {
	padding: clamp(24px, 2.6vw, 32px);
	background: radial-gradient(circle at 88% 10%, rgba(var(--hu-blue-rgb), .5), transparent 46%), var(--hu-navy); color: var(--hu-white);
}
.hu-section .hu-testimonial-card--quote .hu-testimonial-person { color: #C4D0E1; }
.hu-section .hu-testimonial-card--quote .hu-testimonial-person strong { color: var(--hu-yellow); }
.hu-section .hu-testimonial-card--quote .wp-block-quote.hu-testimonial-quote { order: 1; margin: 0 0 24px !important; }
.hu-section .hu-testimonial-card--quote .hu-testimonial-person { order: 2; margin-top: auto !important; }
.hu-section .hu-testimonial-card--quote .hu-testimonial-footer { order: 3; }
.hu-section .hu-testimonial-card--quote .hu-testimonial-quote p { color: var(--hu-white); font-size: clamp(26px, 2.6vw, 34px); text-wrap: balance; font-weight: 800; line-height: 1.18; letter-spacing: -.025em; }
.hu-section .hu-testimonial-card--quote .hu-testimonial-footer { margin-top: 16px !important; padding-top: 16px; border-top: 1px solid rgba(var(--hu-white-rgb), .14); }
.hu-section .hu-testimonial-card--quote .hu-case-link a { color: var(--hu-yellow); }
.hu-section .hu-testimonial-card--quote .hu-case-link a:hover { color: var(--hu-yellow-hover); }

/* Trustpilot card: regular-weight quote, tidy header and reviewer row */
.hu-section .hu-testimonial-card--tp > .hu-testimonial-copy { padding: clamp(22px, 3vw, 34px); }
.hu-section .hu-testimonial-card--tp .hu-testimonial-rating { justify-content: space-between; gap: 10px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--hu-line); }
.hu-section .hu-testimonial-card--tp .hu-testimonial-rating .hu-tp-stars { height: 22px; }
.hu-section .hu-testimonial-card--tp .hu-tp-label { display: inline-flex; align-items: center; gap: 6px; color: #191919; font-size: 15px; font-weight: 700; }
.hu-section .hu-testimonial-card--tp .hu-tp-label::before {
	content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: #00B67A;
	clip-path: polygon(50% 0, 61.8% 36.2%, 100% 36.2%, 69.1% 58.8%, 80.9% 95.1%, 50% 72.7%, 19.1% 95.1%, 30.9% 58.8%, 0 36.2%, 38.2% 36.2%);
}
.hu-section .hu-testimonial-card--tp .hu-testimonial-rating + .hu-testimonial-quote { margin-top: 20px !important; }
.hu-section .hu-testimonial-card--tp .hu-testimonial-quote p { max-width: 65ch; color: #1E293B; font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: 0; }
.hu-section .hu-testimonial-grid--1 .hu-testimonial-card--tp .hu-testimonial-quote p { font-size: clamp(17px, 1.45vw, 18px); }
.hu-section .hu-testimonial-card--tp .hu-testimonial-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 22px !important; padding-top: 18px; border-top: 1px solid var(--hu-line); }
.hu-section .hu-testimonial-card--tp .hu-testimonial-person { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: #475569; font-size: 14px; line-height: 1.4; }
.hu-section .hu-testimonial-card--tp .hu-testimonial-person strong { margin: 0; color: var(--hu-navy); font-size: 16px; }
.hu-section .hu-testimonial-card--tp .hu-testimonial-person br { display: none; }
.hu-section .hu-testimonial-card--tp .hu-tp-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }

/* Problem block: heading + pain points (left), what you actually need (navy card, right) */
.hu-section .hu-problem { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px 64px; align-items: end; }
.hu-section :is(.hu-problem, .hu-problem-main, .hu-problem-card) > * { margin-block: 0; }
.hu-section .hu-problem-main .hu-section-title { margin-bottom: 28px !important; }
.hu-section .hu-problem-list { display: grid; margin: 0 !important; padding: 0; list-style: none; border-top: 1px solid var(--hu-line); }
.hu-section .hu-problem-list > li { position: relative; margin: 0; padding: 16px 0 16px 38px; border-bottom: 1px solid var(--hu-line); color: #334155; font-size: 17px; line-height: 1.55; }
.hu-section .hu-problem-list > li::before {
	content: ""; position: absolute; left: 0; top: 18px; width: 24px; height: 24px; border-radius: 50%;
	background: rgba(var(--hu-blue-rgb), .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2L2 8' stroke='%23155EEF' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.hu-section .hu-problem-list strong { color: var(--hu-navy); font-weight: 750; }
.hu-section .hu-problem-card { padding: clamp(26px, 3vw, 38px); border-radius: 10px; background: radial-gradient(circle at 90% 8%, rgba(var(--hu-blue-rgb), .45), transparent 48%), var(--hu-navy); color: var(--hu-white); }
.hu-section .hu-problem-card-title { margin-bottom: 14px !important; color: var(--hu-white); font-size: clamp(24px, 2.3vw, 30px); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }
.hu-section .hu-problem-card > p:not(.hu-problem-card-title):not(.hu-problem-close) { margin-bottom: 14px !important; color: #C4D0E1; font-size: 17px; line-height: 1.6; }
.hu-section .hu-problem-close { margin-top: 22px !important; padding-top: 20px; border-top: 1px solid rgba(var(--hu-white-rgb), .14); color: #C4D0E1; font-size: 17px; line-height: 1.55; }
.hu-section .hu-problem-close strong { display: block; margin-bottom: 4px; color: var(--hu-yellow); font-size: clamp(19px, 1.7vw, 21px); font-weight: 800; line-height: 1.3; letter-spacing: -.015em; }
@media (max-width: 920px) {
	.hu-section .hu-problem { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.hu-section .hu-problem-list > li { font-size: 16px; }
	.hu-section .hu-problem-card > p:not(.hu-problem-card-title):not(.hu-problem-close), .hu-section .hu-problem-close { font-size: 16px; }
}

/* Related guides: four guides sit in one row of four (two on tablet), never 3 + 1 orphan */
.hu-guide-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hu-guide-grid--4 .hu-guide-title { font-size: 18px; }
.hu-guide-grid--4 .hu-guide-copy { padding: 18px 18px 20px; }
@media (max-width: 1100px) { .hu-guide-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .hu-guide-grid--4 { grid-template-columns: minmax(0, 1fr); gap: 14px; } .hu-guide-grid--4 .hu-guide-title { font-size: 19px; } }

/* Readability floor: no card/label text under 12px, body copy in dark slate */
.hu-section :is(.hu-section-title, .hu-case-title, .hu-case-panel-line, .hu-problem-card-title, .hu-problem-close strong, .hu-card-title, .hu-pod-title, .hu-directory-card h3) { text-wrap: balance; } /* no orphan last word ('Real Searches. Real / People.') */
.hu-section .hu-section-dek { color: #475569; }
.hu-section .hu-card-num { font-size: 12px; letter-spacing: .08em; }
.hu-section .hu-card-text, .hu-section .hu-card-grid--4 .hu-card-text { color: #475569; font-size: 15px; line-height: 1.6; }
.hu-section--navy .hu-card-text, .hu-section--navy .hu-card-grid--4 .hu-card-text { color: #C4D0E1; font-size: 15px; }
.hu-section .hu-pod-num, .hu-directory-kind { font-size: 12px; letter-spacing: .08em; }
.hu-section .hu-pod-text { color: #475569; font-size: 15px; line-height: 1.6; }
.hu-section .hu-compare-list { font-size: 15px; line-height: 1.55; }
.hu-section .hu-compare-col:not(.is-featured) .hu-compare-list { color: #475569; }
.hu-section .hu-faq-a { color: #475569; font-size: 15px; line-height: 1.65; }
.hu-section .hu-market-table td { color: #475569; font-size: 14.5px; line-height: 1.55; }
.hu-section .hu-chips > li { padding: 7px 10px; font-size: 12px; font-weight: 700; }
.hu-directory-card p { color: #475569; font-size: 15px; line-height: 1.6; }
.hu-directory-more { font-size: 14px !important; }
.hu-guide-excerpt { color: #475569; font-size: 15px; line-height: 1.6; }
.hu-section .hu-price-kicker { font-size: 12px; letter-spacing: .08em; }
.hu-section :is(.hu-price-note, .hu-price-disclaimer) { color: #475569; font-size: 13px; line-height: 1.5; }
.hu-section .hu-big-cta-text { font-size: 16px; }

/* v0.3.39 QA: pin testimonial footers (person + link) to the card bottom so links line up across a row */
.hu-section .hu-testimonial-copy > .hu-testimonial-quote { margin-bottom: 17px !important; }
.hu-section .hu-testimonial-quote + .hu-testimonial-footer,
.hu-section .hu-testimonial-text + .hu-testimonial-footer { margin-top: auto !important; }

/* v0.3.77: in-page anchors (e.g. "See their story") land below the sticky header, with smooth scroll */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hu-proof-media[id],.wp-block-group[id],section[id]{scroll-margin-top:calc(var(--hu-hdr-h,76px) + 16px)}

/* v0.3.82 Team photos (About, SDR): equal columns, both photos the same 1614x839 shape, no cover-cropping */
.hu-section .hu-team-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.hu-section .wp-block-image.hu-team-photo, .hu-section .hu-team-photo img { min-height: 0; }
.hu-section .hu-team-photo img { height: auto; aspect-ratio: 1614 / 839; object-fit: cover; }
@media (max-width: 760px) { .hu-section .hu-team-photos { grid-template-columns: minmax(0, 1fr); } }