/* =============================================================================
   Hiring Intelligence Report — Landing page
   Google-SaaS-feel: generous whitespace, big bold type, floating product cards
   with soft shadows, gentle gradient washes per section, consistent rhythm.
   ============================================================================= */

:root {
    --hirl-ink:        #0F172A;
    --hirl-ink-2:      #1F2A44;
    --hirl-mute:       #5B6B8C;
    --hirl-mute-2:     #8A99B5;
    --hirl-line:       #E5EAF2;
    --hirl-line-2:     #EEF1F7;

    --hirl-bg:         #FFFFFF;
    --hirl-bg-alt:     #F7F9FC;
    --hirl-bg-blue:    #F4F8FE;
    --hirl-bg-purple:  #F6F4FE;
    --hirl-bg-green:   #F1FAF5;
    --hirl-bg-orange:  #FFF6EE;
    --hirl-bg-red:     #FEF3F4;
    --hirl-bg-yellow:  #FFFAEB;

    --hirl-tint-blue:    rgba(0, 113, 235, 0.08);
    --hirl-tint-purple:  rgba(107, 77, 230, 0.10);
    --hirl-tint-green:   rgba(0, 154, 68, 0.10);
    --hirl-tint-orange:  rgba(235, 122, 0, 0.10);
    --hirl-tint-red:     rgba(235, 0, 58, 0.10);
    --hirl-tint-yellow:  rgba(235, 185, 0, 0.14);

    --hirl-radius:     16px;
    --hirl-radius-lg:  22px;
    --hirl-radius-pill: 999px;

    --hirl-shadow-card:  0 1px 2px rgba(15, 23, 42, 0.04),
                         0 8px 24px -8px rgba(15, 23, 42, 0.10);
    --hirl-shadow-float: 0 1px 2px rgba(15, 23, 42, 0.06),
                         0 20px 50px -16px rgba(15, 23, 42, 0.18);
}

/* ----- Page shell ----- */
.hirl-body {
    background: var(--hirl-bg);
    color: var(--hirl-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.hirl-main { display: block; }

/* Inline-SVG hamburger / close icons inside the shared nav-toggle button.
   styles.css already handles the open/close swap via aria-expanded; these
   rules only need to scope display:block to the icon that should be visible
   (matching styles.css specificity), and tint the SVG to the nav ink color. */
.hirl-body .nav-toggle .nav-toggle-open,
.hirl-body .nav-toggle .nav-toggle-close { color: var(--hirl-ink); }
.hirl-body .nav-toggle[aria-expanded="false"] .nav-toggle-open  { display: block; }
.hirl-body .nav-toggle[aria-expanded="true"]  .nav-toggle-close { display: block; }

.hirl-section {
    padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 40px);
}
.hirl-section-inner {
    max-width: 1160px;
    margin: 0 auto;
}
.hirl-section-tight {
    max-width: 880px;
    margin: 0 auto;
}

.hirl-section-alt { background: var(--hirl-bg-alt); }

.hirl-section-compact {
    padding-top: clamp(40px, 5vw, 56px);
    padding-bottom: clamp(40px, 5vw, 56px);
}

/* Subtle eyebrow above section titles */
.hirl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--hirl-radius-pill);
    background: var(--hirl-tint-blue);
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hirl-eyebrow-red    { background: var(--hirl-tint-red);    color: var(--red); }
.hirl-eyebrow-orange { background: var(--hirl-tint-orange); color: var(--orange); }
.hirl-eyebrow-green  { background: var(--hirl-tint-green);  color: var(--green); }
.hirl-eyebrow-purple { background: var(--hirl-tint-purple); color: var(--purple); }

/* Author / credibility variant — neutral background so the Google brand
   letters can carry the color punch without competing with a tinted pill. */
.hirl-eyebrow-author {
    background: var(--hirl-bg-alt);
    color: var(--hirl-ink-2);
    text-transform: none;
    letter-spacing: 0.005em;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
}

.hirl-h1 {
    font-size: clamp(40px, 5.4vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin: 18px 0 18px;
    color: var(--hirl-ink);
}
.hirl-h2 {
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 800;
    margin: 14px 0 14px;
    color: var(--hirl-ink);
}
.hirl-h3 {
    font-size: clamp(20px, 1.7vw, 24px);
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--hirl-ink);
}
.hirl-deck {
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.55;
    color: var(--hirl-mute);
    margin: 0 0 28px;
    max-width: 640px;
}
.hirl-deck-center { margin-left: auto; margin-right: auto; }

/* CTA row */
.hirl-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.hirl-cta-row-center { justify-content: center; }

.hirl-cta-reassure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--hirl-mute);
}
.hirl-cta-reassure svg { color: var(--green); flex-shrink: 0; }


/* =============================================================================
   HERO  — centered text column with 4 floating cards (2 per side)
   ============================================================================= */
.hirl-hero {
    position: relative;
    /* Top breathing room sits between the snug "12-28px" pass and the
       original "28-56px" — leaves a comfortable gap below the nav without
       reintroducing the dead space of the first iteration. */
    padding: clamp(24px, 3vw, 44px) clamp(20px, 4vw, 40px) clamp(56px, 7vw, 96px);
    background:
        radial-gradient(1100px 540px at 80% -10%, var(--hirl-bg-blue) 0%, transparent 60%),
        radial-gradient(900px 480px at -10% 30%, var(--hirl-bg-purple) 0%, transparent 55%),
        #fff;
    overflow: hidden;
}
.hirl-hero-stage {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    min-height: clamp(520px, 54vw, 640px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The wrapper around the 4 floating cards needs to fill the stage so its
   absolute-positioned children anchor to the stage's box, not collapse to 0. */
.hirl-hero-cards {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hirl-hero-cards .hirl-floating {
    pointer-events: auto;
}

.hirl-hero-copy {
    position: relative;
    z-index: 5;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    /* Soft fade-to-white halo so floating cards behind/beside the text don't
       fight with the headline. The halo sits behind the text only. */
    padding: 0 8px;
}
.hirl-hero-copy::before {
    content: '';
    position: absolute;
    inset: -36px -48px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.6) 50%, transparent 80%);
    z-index: -1;
    pointer-events: none;
}

.hirl-hero-h1 {
    font-size: clamp(40px, 5.4vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-weight: 800;
    margin: 20px 0 22px;
}
.hirl-hero-h1 .hirl-hl-blue   { color: var(--blue); }
.hirl-hero-h1 .hirl-hl-orange { color: var(--orange); }

.hirl-hero-deck {
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.55;
    color: var(--hirl-mute);
    margin: 0 auto 32px;
    max-width: 560px;
}

/* Stat strip under the hero CTA — centered */
.hirl-hero-stats {
    margin-top: 36px;
    display: flex;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
}
.hirl-hero-stat-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hirl-mute-2);
    font-weight: 600;
}
.hirl-hero-stat-value {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--hirl-ink);
    margin-top: 2px;
}

/* Author byline under the stats — small, signature-style. The Google brand
   letters use Google's documented brand color palette (G blue, o red, o yellow,
   g blue, l green, e red) so the brand association reads at a glance. */
.hirl-hero-byline {
    margin-top: 38px;
    font-size: 15.5px;
    color: var(--hirl-mute);
    font-weight: 500;
}
.hirl-google-mark {
    font-weight: 700;
    letter-spacing: -0.005em;
    margin: 0 2px;
    font-size: 1.1em;
}
.hirl-google-mark > span { display: inline-block; }
.hirl-google-g1 { color: #4285F4; } /* blue */
.hirl-google-o1 { color: #EA4335; } /* red */
.hirl-google-o2 { color: #FBBC05; } /* yellow */
.hirl-google-g2 { color: #4285F4; } /* blue */
.hirl-google-l  { color: #34A853; } /* green */
.hirl-google-e  { color: #EA4335; } /* red */

/* Floating cards: 2 on the left side, 2 on the right side of the text column.
   Each rotated slightly so they read as "scattered". Below ~1080px they
   collapse into a grid below the text (see responsive section). */
.hirl-floating {
    position: absolute;
    background: #fff;
    border-radius: var(--hirl-radius);
    box-shadow: var(--hirl-shadow-float);
    border: 1px solid var(--hirl-line-2);
    padding: 18px 20px;
}

/* "Exploding outward" composition: rotations point each card away from the
   center, distances from the edge vary so the four cards don't form a
   symmetric rectangle, and the left pair vs. right pair have inverted
   vertical anchoring (left = upper-inner & lower-outer, right = upper-outer &
   lower-inner) so the whole arrangement reads off-axis. */

/* LEFT TOP — small, high, pushed inward toward the headline. Rotated firmly
   counter-clockwise so the top-left corner points up-and-away from center. */
.hirl-float-score {
    top: 4%;
    left: 9%;
    width: 230px;
    transform: rotate(-8deg);
    z-index: 4;
}
/* LEFT BOTTOM — wider card pinned to the left edge, tilted clockwise so the
   bottom-left corner points down-and-away from center. */
.hirl-float-salary {
    bottom: 9%;
    left: -4%;
    width: 320px;
    transform: rotate(4deg);
    z-index: 3;
}

/* RIGHT TOP — pinned to the right edge, tilted clockwise so the top-right
   corner points up-and-away. */
.hirl-float-funnel {
    top: 7%;
    right: 1%;
    width: 280px;
    transform: rotate(6deg);
    z-index: 4;
}
/* RIGHT BOTTOM — pulled noticeably inward from the right edge and lower than
   the funnel card, rotated counter-clockwise so the bottom-right corner
   points down-and-away. Different inset than the salary card on the left
   keeps the four-corner arrangement asymmetric. */
.hirl-float-employers {
    bottom: 9%;
    right: -2%;
    width: 300px;
    transform: rotate(-5deg);
    z-index: 3;
}

/* Compact employer-mock variant used in the hero (less padding, tighter rows) */
.hirl-float-employers .hirl-mock-employer-row {
    grid-template-columns: 22px 1fr 1fr 28px;
    gap: 8px;
    font-size: 12px;
    padding: 2px 0;
}
.hirl-float-employers-title {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hirl-mute);
    font-weight: 700;
    margin-bottom: 10px;
}
.hirl-float-employers-cap {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--hirl-line);
    font-size: 11px;
    color: var(--hirl-mute);
}
.hirl-float-employers-cap strong { color: var(--blue); }

/* ----- Score card mock ----- */
.hirl-mock-score {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.hirl-mock-score-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hirl-mute);
    font-weight: 700;
}
.hirl-mock-score-dot {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--hirl-tint-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hirl-mock-score-dot svg { color: var(--purple); }
.hirl-mock-score-num {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--hirl-ink);
    display: flex;
    align-items: baseline;
}
.hirl-mock-score-num small {
    font-size: 18px;
    font-weight: 700;
    color: var(--hirl-mute-2);
    margin-left: 4px;
}
.hirl-mock-score-pill {
    padding: 6px 14px;
    border-radius: var(--hirl-radius-pill);
    background: var(--hirl-tint-green);
    color: var(--green);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ----- Funnel card mock ----- */
.hirl-mock-funnel-title {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hirl-mute);
    font-weight: 700;
    margin-bottom: 10px;
}
.hirl-mock-funnel-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}
.hirl-mock-funnel-bar {
    height: 10px;
    border-radius: 999px;
    background: var(--hirl-line-2);
    overflow: hidden;
    position: relative;
}
.hirl-mock-funnel-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--w);
    background: linear-gradient(90deg, var(--purple), #a48bff);
    border-radius: inherit;
}
.hirl-mock-funnel-val {
    font-size: 13px;
    font-weight: 800;
    color: var(--hirl-ink);
    font-variant-numeric: tabular-nums;
}
.hirl-mock-funnel-cap {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--hirl-line);
    font-size: 12px;
    color: var(--hirl-mute);
}
.hirl-mock-funnel-cap strong { color: var(--red); }

/* ----- Salary card mock ----- */
.hirl-mock-salary-title {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hirl-mute);
    font-weight: 700;
    margin-bottom: 12px;
}
.hirl-mock-salary-row {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}
.hirl-mock-salary-row-label {
    font-size: 11px;
    color: var(--hirl-mute);
    font-weight: 600;
}
.hirl-mock-salary-row-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--hirl-line-2);
    overflow: hidden;
    position: relative;
}
.hirl-mock-salary-row-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--w);
    border-radius: inherit;
    background: var(--hirl-line);
}
.hirl-mock-salary-row-bar.hirl-fill-green::after  { background: linear-gradient(90deg, var(--green),  #56c98a); }
.hirl-mock-salary-row-bar.hirl-fill-purple::after { background: linear-gradient(90deg, var(--purple), #a48bff); }
.hirl-mock-salary-row-bar.hirl-fill-blue::after   { background: linear-gradient(90deg, var(--blue),   #4ea1f3); }
.hirl-mock-salary-row-bar.hirl-fill-yellow::after { background: linear-gradient(90deg, var(--yellow), #f3d75a); }
.hirl-mock-salary-row-bar.hirl-fill-orange::after { background: linear-gradient(90deg, var(--orange), #f5a655); }
.hirl-mock-salary-row-val {
    font-size: 12px;
    font-weight: 800;
    color: var(--hirl-ink);
    font-variant-numeric: tabular-nums;
}
.hirl-mock-salary-row-val.is-you { color: var(--orange); }


/* =============================================================================
   CREDIBILITY BANNER  (replaces the earlier 4-cell trust strip)
   Google-style: 3 large credential blocks across the top, then a small
   portrait + tight bio + signature line beneath. Generous whitespace,
   minimal chrome, no pills or cards.
   ============================================================================= */
.hirl-credibility {
    padding: clamp(32px, 4vw, 56px) clamp(20px, 4vw, 40px);
    background: #fff;
    border-top: 1px solid var(--hirl-line-2);
    border-bottom: 1px solid var(--hirl-line-2);
}
.hirl-credibility-inner {
    max-width: 1160px;
    margin: 0 auto;
}

.hirl-credibility-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(36px, 5vw, 80px);
    align-items: center;
}
.hirl-credibility-titlecol { min-width: 0; }
.hirl-credibility-h2 {
    margin: 14px 0 0;
    font-size: clamp(26px, 2.8vw, 36px);
}
.hirl-credibility-content {
    min-width: 0;
    display: grid;
    gap: clamp(22px, 2.5vw, 32px);
}

/* ----- 3 credibility stats ----- */
.hirl-credibility-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    text-align: left;
    margin: 0;
    max-width: none;
}
.hirl-credibility-stat-value {
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--hirl-ink);
    margin-bottom: 4px;
    white-space: nowrap;
}
.hirl-credibility-stat-label {
    font-size: 12px;
    color: var(--hirl-mute);
    font-weight: 500;
    line-height: 1.35;
}

/* ----- portrait + bio + signature ----- */
.hirl-credibility-bio-row {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 22px;
    align-items: center;
    max-width: none;
    margin: 0;
}
.hirl-credibility-portrait {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--hirl-bg-alt);
}
.hirl-credibility-bio-body { min-width: 0; }
.hirl-credibility-bio {
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.55;
    color: var(--hirl-ink-2);
    margin: 0 0 8px;
}
.hirl-credibility-sig {
    font-size: 13px;
    color: var(--hirl-mute);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}
.hirl-credibility-sig-name {
    color: var(--hirl-ink);
    font-weight: 700;
}
.hirl-credibility-sig-sep { color: var(--hirl-mute-2); }
.hirl-credibility-sig-li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px 3px 9px;
    background: #0A66C2;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    transition: background-color 0.15s ease;
}
.hirl-credibility-sig-li:hover {
    background: #08518F;
    text-decoration: none;
    color: #fff;
}


/* =============================================================================
   PROBLEM
   ============================================================================= */
/* Problem header: copy left, map illustration right */
.hirl-problem-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}
.hirl-problem-header-copy { min-width: 0; }
.hirl-problem-header-visual {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.hirl-mapcard-body {
    position: relative;
    width: 100%;
    max-width: 480px;
}
.hirl-mapcard-svg {
    width: 100%;
    height: auto;
    display: block;
}
.hirl-mapcard-pulse-ring-2 {
    transform-origin: center;
    transform-box: fill-box;
    animation: hirl-mapcard-ring 2.4s ease-out infinite;
}
.hirl-mapcard-pulse-ring-3 {
    transform-origin: center;
    transform-box: fill-box;
    animation: hirl-mapcard-ring 2.4s ease-out 0.6s infinite;
}
@keyframes hirl-mapcard-ring {
    0%   { transform: scale(0.6); opacity: 0.55; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* Floating city labels overlaid on the map */
.hirl-mapcard-label {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 8px;
    background: #fff;
    border: 1px solid var(--hirl-line);
    border-radius: var(--hirl-radius-pill);
    font-size: 11px;
    font-weight: 600;
    color: var(--hirl-ink);
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.18);
    white-space: nowrap;
    line-height: 1;
}
.hirl-mapcard-label-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.hirl-mapcard-label-city { color: var(--hirl-ink); }
.hirl-mapcard-label-num  { color: var(--hirl-ink); font-weight: 800; }

.hirl-mapcard-label-start { top: 18%; left: 6%;  }
.hirl-mapcard-label-end   { top: 22%; left: 62%; }

.hirl-problem-grid {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}
.hirl-problem-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.hirl-problem-card-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--red);
}
.hirl-problem-card-icon svg { color: var(--red); width: 26px; height: 26px; }
.hirl-problem-card-h {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hirl-ink);
}
.hirl-problem-card-body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--hirl-mute);
}
.hirl-problem-card-body strong { color: var(--hirl-ink); font-weight: 600; }


/* =============================================================================
   SOLUTION: WHAT'S IN THE REPORT  (alternating mockup + copy)
   ============================================================================= */
.hirl-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(32px, 4.5vw, 64px);
    align-items: center;
    margin: clamp(56px, 6.5vw, 88px) 0;
}
.hirl-feature-reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.hirl-feature-reverse .hirl-feature-visual { order: 2; }
.hirl-feature-reverse .hirl-feature-copy   { order: 1; }

.hirl-feature-copy { max-width: 500px; }
.hirl-feature-bullets {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    gap: 8px;
}
.hirl-feature-bullets li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--hirl-ink-2);
}
.hirl-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Generic visual frame (card-on-card with subtle gradient backdrop) */
.hirl-feature-visual {
    position: relative;
    padding: 18px;
    border-radius: var(--hirl-radius-lg);
    background: linear-gradient(160deg, var(--hirl-bg-alt) 0%, #fff 70%);
    border: 1px solid var(--hirl-line-2);
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hirl-feature-visual-purple { background: linear-gradient(160deg, var(--hirl-bg-purple) 0%, #fff 70%); }
.hirl-feature-visual-orange { background: linear-gradient(160deg, var(--hirl-bg-orange) 0%, #fff 70%); }
.hirl-feature-visual-red    { background: linear-gradient(160deg, var(--hirl-bg-red) 0%, #fff 70%); }
.hirl-feature-visual-green  { background: linear-gradient(160deg, var(--hirl-bg-green) 0%, #fff 70%); }
.hirl-feature-visual-blue   { background: linear-gradient(160deg, var(--hirl-bg-blue) 0%, #fff 70%); }

.hirl-mock-card {
    background: #fff;
    border-radius: var(--hirl-radius);
    box-shadow: var(--hirl-shadow-float);
    border: 1px solid var(--hirl-line-2);
    padding: 16px 18px;
    width: 100%;
    max-width: 440px;
}
.hirl-mock-card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: var(--hirl-radius-pill);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.hirl-mock-card-eyebrow-purple { background: var(--hirl-tint-purple); color: var(--purple); }
.hirl-mock-card-eyebrow-orange { background: var(--hirl-tint-orange); color: var(--orange); }
.hirl-mock-card-eyebrow-red    { background: var(--hirl-tint-red); color: var(--red); }
.hirl-mock-card-eyebrow-green  { background: var(--hirl-tint-green); color: var(--green); }
.hirl-mock-card-eyebrow-blue   { background: var(--hirl-tint-blue); color: var(--blue); }
.hirl-mock-card-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--hirl-ink);
    margin-bottom: 14px;
}
.hirl-mock-card-title .hirl-num-red    { color: var(--red); }
.hirl-mock-card-title .hirl-num-orange { color: var(--orange); }
.hirl-mock-card-title .hirl-num-blue   { color: var(--blue); }

/* Employer-list mock (used in section 1.3 illustration) */
.hirl-mock-employers {
    display: grid;
    gap: 10px;
}
.hirl-mock-employer-row {
    display: grid;
    grid-template-columns: 24px 92px 1fr 32px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.hirl-mock-employer-rank {
    color: var(--hirl-mute-2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.hirl-mock-employer-name { color: var(--hirl-ink); font-weight: 600; }
.hirl-mock-employer-bar  {
    height: 8px;
    border-radius: 999px;
    background: var(--hirl-line-2);
    overflow: hidden;
    position: relative;
}
.hirl-mock-employer-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--w);
    border-radius: inherit;
}
.hirl-mock-employer-bar.b1::after { background: var(--blue); }
.hirl-mock-employer-bar.b2::after { background: var(--purple); }
.hirl-mock-employer-bar.b3::after { background: var(--green); }
.hirl-mock-employer-bar.b4::after { background: var(--orange); }
.hirl-mock-employer-cnt {
    font-size: 12px;
    font-weight: 800;
    color: var(--hirl-ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.hirl-mock-employer-cnt.b1 { color: var(--blue); }
.hirl-mock-employer-cnt.b2 { color: var(--purple); }
.hirl-mock-employer-cnt.b3 { color: var(--green); }
.hirl-mock-employer-cnt.b4 { color: var(--orange); }

/* Annotation callout pointing to a number inside a mock card */
.hirl-callout {
    position: absolute;
    background: var(--hirl-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--hirl-radius-pill);
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
}
.hirl-callout::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
}
.hirl-callout-bottom-left::after {
    top: 100%;
    left: 14px;
    border: 6px solid transparent;
    border-top-color: var(--hirl-ink);
}
.hirl-callout-top-right::after {
    bottom: 100%;
    right: 14px;
    border: 6px solid transparent;
    border-bottom-color: var(--hirl-ink);
}

/* Cost-of-vacancy bubbles mock (section 3.2 illustration) */
.hirl-mock-cov-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.hirl-mock-cov-bubble {
    padding: 14px 16px;
    border-radius: var(--hirl-radius);
    background: var(--hirl-bg-alt);
    border: 1px solid var(--hirl-line-2);
}
.hirl-mock-cov-bubble.b-orange { background: var(--hirl-bg-orange); border-color: rgba(235, 122, 0, 0.18); }
.hirl-mock-cov-bubble.b-red    { background: var(--hirl-bg-red);    border-color: rgba(235, 0, 58, 0.18); }
.hirl-mock-cov-bubble-w {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hirl-mute);
}
.hirl-mock-cov-bubble-v {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--hirl-ink);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.hirl-mock-cov-bubble.b-orange .hirl-mock-cov-bubble-v { color: var(--orange); }
.hirl-mock-cov-bubble.b-red    .hirl-mock-cov-bubble-v { color: var(--red); }

/* Channel bars mock (section 4.1 illustration) */
.hirl-mock-channels {
    display: grid;
    gap: 14px;
}
.hirl-mock-channel-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
.hirl-mock-channel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
}
.hirl-mock-channel-name { color: var(--hirl-ink); font-weight: 700; }
.hirl-mock-channel-name.is-feature { color: var(--green); }
.hirl-mock-channel-prob {
    font-size: 11px;
    color: var(--hirl-mute);
    font-weight: 600;
}
.hirl-mock-channel-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--hirl-line-2);
    overflow: hidden;
    position: relative;
}
.hirl-mock-channel-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--w);
    border-radius: inherit;
}
.hirl-mock-channel-bar.c-green::after  { background: linear-gradient(90deg, var(--green),  #56c98a); }
.hirl-mock-channel-bar.c-purple::after { background: linear-gradient(90deg, var(--purple), #a48bff); }
.hirl-mock-channel-bar.c-blue::after   { background: linear-gradient(90deg, var(--blue),   #4ea1f3); }
.hirl-mock-channel-bar.c-mute::after   { background: var(--hirl-mute-2); }

/* 90-day plan timeline mock */
.hirl-mock-plan {
    display: grid;
    gap: 12px;
}
.hirl-mock-plan-row {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 14px;
    align-items: start;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--hirl-bg-alt);
}
.hirl-mock-plan-week {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
    padding: 4px 8px;
    background: var(--hirl-tint-blue);
    border-radius: 6px;
    text-align: center;
    white-space: nowrap;
}
.hirl-mock-plan-text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--hirl-ink);
}


/* =============================================================================
   METHODOLOGY
   ============================================================================= */
.hirl-method-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.hirl-method-card {
    background: #fff;
    border: 1px solid var(--hirl-line);
    border-radius: var(--hirl-radius);
    padding: 26px 24px;
    box-shadow: var(--hirl-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hirl-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: var(--hirl-radius-pill);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: fit-content;
}
.hirl-method-badge.is-estat   { background: var(--hirl-tint-orange); color: var(--orange); }
.hirl-method-badge.is-linked  { background: var(--hirl-tint-blue);   color: var(--blue); }
.hirl-method-badge.is-serper  { background: var(--hirl-tint-purple); color: var(--purple); }
.hirl-method-source {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--hirl-ink);
}
.hirl-method-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--hirl-mute);
}
.hirl-method-foot {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--hirl-line-2);
    font-size: 12px;
    color: var(--hirl-mute-2);
}


/* =============================================================================
   COMPARISON TABLE
   ============================================================================= */
.hirl-compare {
    margin-top: 40px;
    border: 1px solid var(--hirl-line);
    border-radius: var(--hirl-radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--hirl-shadow-card);
}
.hirl-compare-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--hirl-line-2);
}
.hirl-compare-row:last-child { border-bottom: 0; }
.hirl-compare-row.is-head {
    background: var(--hirl-bg-alt);
    font-weight: 700;
}
.hirl-compare-cell {
    padding: 18px 20px;
    font-size: 14px;
    color: var(--hirl-ink-2);
    line-height: 1.45;
    border-right: 1px solid var(--hirl-line-2);
}
.hirl-compare-cell:last-child { border-right: 0; }
.hirl-compare-cell.is-row-label {
    color: var(--hirl-mute);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--hirl-bg-alt);
}
.hirl-compare-cell.is-best {
    background: var(--hirl-bg-green);
    color: var(--hirl-ink);
}
.hirl-compare-col-head {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.hirl-compare-col-head .hirl-compare-col-sub {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--hirl-mute);
    margin-top: 2px;
    text-transform: none;
    letter-spacing: 0;
}
.hirl-compare-best-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-left: 8px;
}


/* =============================================================================
   HOW IT WORKS (3 steps)
   ============================================================================= */
.hirl-steps {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    counter-reset: hirl-step;
}
.hirl-step {
    background: #fff;
    border: 1px solid var(--hirl-line);
    border-radius: var(--hirl-radius);
    padding: 28px 24px;
    position: relative;
    box-shadow: var(--hirl-shadow-card);
}
.hirl-step::before {
    counter-increment: hirl-step;
    content: counter(hirl-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 14px;
}
.hirl-step:nth-child(1)::before { background: var(--blue); }
.hirl-step:nth-child(2)::before { background: var(--purple); }
.hirl-step:nth-child(3)::before { background: var(--green); }
.hirl-step-h {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--hirl-ink);
    margin: 0 0 8px;
}
.hirl-step-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--hirl-mute);
}
.hirl-step-meta {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--hirl-line-2);
    font-size: 12px;
    color: var(--hirl-mute-2);
    display: flex;
    align-items: center;
    gap: 6px;
}
.hirl-step-meta svg { color: var(--blue); }
.hirl-step:nth-child(1) .hirl-step-meta svg { color: var(--blue); }
.hirl-step:nth-child(2) .hirl-step-meta svg { color: var(--purple); }
.hirl-step:nth-child(3) .hirl-step-meta svg { color: var(--green); }


/* =============================================================================
   FAQ (open by default - no JS needed; uses <details>)
   ============================================================================= */
.hirl-faq {
    margin-top: 40px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.hirl-faq-item {
    border-bottom: 1px solid var(--hirl-line);
}
.hirl-faq-item:first-of-type { border-top: 1px solid var(--hirl-line); }
.hirl-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    font-size: 17px;
    font-weight: 700;
    color: var(--hirl-ink);
    user-select: none;
}
.hirl-faq-item summary::-webkit-details-marker { display: none; }
.hirl-faq-item summary::after {
    content: '';
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    transition: transform 200ms ease;
}
.hirl-faq-item[open] summary::after { transform: rotate(180deg); }
.hirl-faq-body {
    padding: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--hirl-mute);
    max-width: 660px;
}
.hirl-faq-body strong { color: var(--hirl-ink); }


/* =============================================================================
   FINAL CTA
   ============================================================================= */
.hirl-final {
    padding: clamp(72px, 9vw, 120px) clamp(20px, 4vw, 40px);
    background:
        radial-gradient(800px 360px at 50% -10%, var(--hirl-bg-blue) 0%, transparent 60%),
        radial-gradient(700px 320px at 70% 100%, var(--hirl-bg-purple) 0%, transparent 60%),
        #fff;
    text-align: center;
}
.hirl-final-inner {
    max-width: 760px;
    margin: 0 auto;
}
.hirl-final-h {
    font-size: clamp(32px, 4.2vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin: 0 0 18px;
}
.hirl-final-deck {
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.55;
    color: var(--hirl-mute);
    margin: 0 auto 32px;
    max-width: 560px;
}


/* =============================================================================
   SCROLL-REVEAL ANIMATION (gentle fade + slight rise)
   ============================================================================= */
.hirl-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 700ms cubic-bezier(.2, .7, .2, 1),
        transform 700ms cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
}
.hirl-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */
/* Below 1240px: floating cards start to crowd the text. Shrink card widths
   slightly so the layout stays breathable down to ~1024px. */
@media (max-width: 1240px) {
    .hirl-float-score     { width: 220px; }
    .hirl-float-salary    { width: 280px; }
    .hirl-float-funnel    { width: 250px; }
    .hirl-float-employers { width: 260px; }
}

/* Below 1024px: collapse floating cards into a 2x2 grid below the text. */
@media (max-width: 1024px) {
    .hirl-hero-stage {
        flex-direction: column;
        min-height: auto;
        gap: 40px;
    }
    /* Text/CTA reads first on mobile; cards drop below as a secondary visual. */
    .hirl-hero-copy  { max-width: 700px; order: 1; }
    .hirl-hero-cards { order: 2; }
    .hirl-hero-copy::before { display: none; }

    .hirl-floating {
        position: relative;
        top: auto; bottom: auto; left: auto; right: auto;
        transform: none;
        width: 100%;
        max-width: 320px;
    }
    /* Cards wrapper drops out of absolute positioning so its children flow
       into the normal grid below the text instead of overlapping it.
       Vertical margin separates the carousel block from the H1 above and the
       deck/CTAs below — keeps the rhythm consistent. */
    .hirl-hero-cards {
        position: static;
        inset: auto;
        pointer-events: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        width: 100%;
        max-width: 720px;
        margin: 32px auto 8px;
    }
    .hirl-hero-cards .hirl-floating {
        max-width: none;
    }
}

@media (max-width: 720px) {
    /* Stats stay in a single row but shrink type to fit. Bio row stacks the
       portrait above the text, all centered. */
    .hirl-credibility-stats { gap: 16px; }
    .hirl-credibility-stat-value { font-size: 18px; }
    .hirl-credibility-stat-label { font-size: 11.5px; }

    .hirl-credibility-bio-row {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
        justify-items: center;
    }
    .hirl-credibility-portrait { width: 64px; height: 64px; }
    .hirl-credibility-sig { justify-content: center; }
}

@media (max-width: 920px) {
    .hirl-problem-header { grid-template-columns: 1fr; gap: 36px; }
    .hirl-problem-header-visual { justify-content: center; }
    .hirl-mapcard-body { max-width: 440px; }
    .hirl-problem-grid { grid-template-columns: 1fr; }
    .hirl-credibility-grid { grid-template-columns: 1fr; gap: 28px; }
    .hirl-credibility-stats { text-align: center; }
    .hirl-credibility-bio-row { max-width: 660px; margin: 0 auto; }
    .hirl-method-grid  { grid-template-columns: 1fr; }
    .hirl-steps        { grid-template-columns: 1fr; }

    .hirl-feature {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .hirl-feature-reverse .hirl-feature-visual { order: 1; }
    .hirl-feature-reverse .hirl-feature-copy   { order: 2; }
    .hirl-feature-visual { min-height: 280px; padding: 18px; }

    /* Mobile: split the table into a stack of section cards so each
       Cost / Time / What / Commitment block reads on its own. */
    .hirl-compare {
        border: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
    }
    .hirl-compare-row.is-head { display: none; }
    .hirl-compare-row:not(.is-head) {
        grid-template-columns: 1fr;
        margin-bottom: 18px;
        border: 1px solid var(--hirl-line);
        border-radius: var(--hirl-radius);
        background: #fff;
        box-shadow: var(--hirl-shadow-card);
        overflow: hidden;
    }
    .hirl-compare-row:not(.is-head):last-child { margin-bottom: 0; }

    .hirl-compare-cell { border-right: 0; border-bottom: 1px solid var(--hirl-line-2); }
    .hirl-compare-cell:last-child { border-bottom: 0; }
    .hirl-compare-cell.is-row-label {
        padding: 12px 18px;
        background: var(--hirl-bg-alt);
        font-size: 12px;
    }
    .hirl-compare-row:not(.is-head) .hirl-compare-cell:not(.is-row-label) {
        padding: 14px 18px;
        font-size: 15px;
        color: var(--hirl-ink);
    }
    .hirl-compare-row:not(.is-head) .hirl-compare-cell:not(.is-row-label)::before {
        display: block;
        font-size: 10.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--hirl-mute);
        margin-bottom: 4px;
    }
    .hirl-compare-row:not(.is-head) .hirl-compare-cell:nth-child(2)::before { content: "DIY"; }
    .hirl-compare-row:not(.is-head) .hirl-compare-cell:nth-child(3)::before { content: "Agency"; }
    .hirl-compare-row:not(.is-head) .hirl-compare-cell:nth-child(4)::before { content: "SaiyouTeam"; color: var(--green); }
}

@media (max-width: 560px) {
    /* Stats: 3-column grid on phones with smaller type so each cell fits
       across without forcing them to stack. Longer values wrap naturally
       within their column. */
    .hirl-hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 12px;
        margin-top: 32px;
        text-align: center;
    }
    .hirl-hero-stat-label { font-size: 9.5px; letter-spacing: 0.06em; }
    .hirl-hero-stat-value { font-size: 12px; line-height: 1.3; }

    .hirl-hero-cards   { grid-template-columns: 1fr; max-width: 360px; }

    /* Carousel mode — JS adds .is-carousel on .hirl-hero-cards at <=560px
       and rotates which card is .is-active every few seconds. Without JS,
       cards remain stacked vertically (graceful degradation). */
    .hirl-hero-cards.is-carousel {
        position: relative;
        display: block;
        /* min-height is set inline by JS to the tallest card's natural height
           so each card shrinks to its own content (no empty bottom space). */
    }
    .hirl-hero-cards.is-carousel .hirl-floating {
        /* top/left/right define the box; `min-height: 100%` stretches each
           card up to the wrapper's height (which JS sets to the tallest card's
           natural content height). Shorter cards inflate visually to match,
           so the carousel feels like a consistent slot rather than a jumpy
           slideshow. Content alignment inside the card is handled per-card
           below — the score card centers its content; the others top-align. */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        min-height: 100%;
        box-sizing: border-box;
        max-width: none;
        opacity: 0;
        pointer-events: none;
        transition: opacity 500ms ease, transform 500ms ease;
        transform: translateY(8px);
    }

    /* Score card has the least content — center vertically so it fills the
       carousel slot gracefully instead of clustering at the top. */
    .hirl-hero-cards.is-carousel .hirl-float-score {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .hirl-hero-cards.is-carousel .hirl-float-score .hirl-mock-score {
        gap: 14px;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    .hirl-hero-cards.is-carousel .hirl-floating.is-active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    .hirl-hero-cards-dots {
        display: flex;
        gap: 10px;
        justify-content: center;
        /* Healthy gap above (separates dots from the card) and below
           (separates dots from the deck text that follows). */
        margin: 28px auto 36px;
        padding: 0;
    }
    .hirl-hero-cards-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--hirl-mute-2);
        opacity: 0.35;
        border: 0;
        padding: 0;
        cursor: pointer;
        transition: opacity 250ms ease, transform 250ms ease, background 250ms ease;
    }
    .hirl-hero-cards-dot:hover { opacity: 0.6; }
    .hirl-hero-cards-dot.is-active {
        opacity: 1;
        background: var(--blue);
        transform: scale(1.35);
    }

    /* Author eyebrow on mobile: shrink the font slightly and drop the weight
       so the full credential reads as one clean line at phone widths. */
    .hirl-eyebrow-author {
        display: inline-flex;
        white-space: nowrap;
        line-height: 1.3;
        padding: 5px 12px;
        font-size: 10.5px;
        font-weight: 500;
    }

    /* Stack CTAs full-width so neither button is awkwardly narrow. */
    .hirl-cta-row {
        flex-direction: column;
        align-items: stretch;
    }
    .hirl-cta-row .btn {
        width: 100%;
        justify-content: center;
    }

    /* Final-CTA section has its own .hirl-cta-row-center modifier; keep its
       children full-width too. */
    .hirl-cta-row-center { align-items: stretch; }

    /* Reassurance line wraps a long sentence — give it slightly tighter line-
       height + a max-width so it reads as a block, not a row of fragments. */
    .hirl-cta-reassure {
        line-height: 1.45;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
}