/* Hero-card internals unique to the /for/<slug> audience heroes: the new-grad
   tag row and the professionals milestone list. tailwind.build.css has no
   equivalents, so these are carried over verbatim from landing.css, which those
   pages no longer load. */

.hz-tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.hz-milestones { display: grid; gap: .65rem; }
.hz-milestone { display: flex; align-items: flex-start; gap: .6rem; }
.hz-milestone i { margin-top: .2rem; flex-shrink: 0; color: var(--stone-300); }
.hz-milestone.hz-milestone-active i { color: var(--accent-500); }
.hz-milestone i.fa-circle-check { color: var(--primary-600); }
.hz-milestone-phase { font-size: .72rem; font-weight: 600; color: var(--stone-600); }
.hz-milestone-title { font-size: .88rem; font-weight: 600; color: var(--stone-800); }

/* The opportunities item. It used to be a bare .hz-chip — one sentence, no
   title, no icon — which read as a stray label next to the proof cards. It now
   borrows the Aurora card's shape exactly (gradient icon badge, small-caps
   title, muted body) so it belongs to the same set. No new visual language:
   .hz-aurora-avatar, .hz-chat-name and .hz-chat-text do all the work. */
.hz-card-opportunity { display: flex; gap: .7rem; align-items: flex-start; }

/* The hero is sized by min-height: calc(100svh - 200px). Once the proof cards
   were narrowed and tucked they stopped filling that, leaving dead space above
   the marquee. Let the section take its content's height instead — and no
   bottom padding, because the marquee sits inside the section and is meant to
   close it; padding there would strand the band above a white gap. */
.hz-hero:not(.hz-hero-home) { min-height: 0 !important; padding-bottom: 0; }

/* The role ticker was a hairline rule and grey text on the page background, so
   it read as an afterthought. It becomes the band that closes the section:
   full-bleed teal, white role names, and the separators in the lighter amber
   (accent-200 rather than accent-500, which sits at 2.7:1 on this teal).
   The edge mask goes — it faded the band itself, not just the text. */
.hz-hero:not(.hz-hero-home) .hz-marquee {
    margin-top: 3.5rem; padding: 1.4rem 0; border-top: none;
    background: linear-gradient(90deg, var(--primary-700), var(--primary-600) 50%, var(--primary-700));
    -webkit-mask-image: none; mask-image: none;
}
.hz-hero:not(.hz-hero-home) .hz-marquee-track > span { color: white; font-size: .78rem; }
.hz-hero:not(.hz-hero-home) .hz-marquee-track i { color: var(--accent-200); }

/* The underemployment stat is a separate thought from the CTA's small print —
   it needs air above it, not the 1.4rem it inherits from the block. */
.hz-hero:not(.hz-hero-home) .hz-proof { margin-top: 3rem; }

/* Desktop hero visual, audience heroes only.

   tailwind.build.css positions the proof cards absolutely at fixed coordinates
   — top: 5rem, width: 21.5rem and so on. Those numbers are measured against
   /home's cards. These heroes carry more inside theirs (a four-line Aurora
   message, a tag row, a milestone list), so the same coordinates make the cards
   sit on top of one another. landing.css's answer was to drop the float
   entirely; this keeps the tilt, the horizontal stagger and the drift, but puts
   the cards back in flow so they can never overlap whatever their height.

   .hz-hero:not(.hz-hero-home) leaves /home on the absolute layout, where the
   card set is fixed and the coordinates are correct. */
@media (min-width: 1024px) {
    /* Widened past the 26rem landing.css used, so the cards can be offset from
       each other WITHOUT being narrowed. Shrinking them to make room is what
       cost the cards their content width. */
    .hz-hero:not(.hz-hero-home) .hz-visual {
        position: relative; display: grid !important; gap: .9rem !important;
        height: auto !important; max-width: 29rem !important;
        justify-items: start !important; margin-left: auto;
        /* Drops the group so its top edge meets the headline rather than the
           eyebrow pill: the pill is ~1.95rem tall on a 1.5rem bottom margin. */
        margin-top: 3.45rem !important;
    }
    /* position:relative rather than static — still in flow, so the cards can
       never run away from each other, but z-index works, which is what lets the
       corners tuck. .hz-chip-offer is deliberately not in here: it is nested
       inside .hz-card-main as that card's closing line. */
    .hz-hero:not(.hz-hero-home) .hz-visual > .hz-card,
    .hz-hero:not(.hz-hero-home) .hz-visual > .hz-chip {
        position: relative !important; inset: auto !important;
    }
    /* Narrower cards inside the same 32rem container, alternating start/end,
       each a little narrower than the one above: three different widths and
       three different edges is what makes it read as arranged rather than
       stacked. Negative top margins pull ~1rem of corner under the card above;
       with opposite rotations only the corners meet, never the text. */
    .hz-hero:not(.hz-hero-home) .hz-card-main {
        width: 25rem !important; justify-self: start !important; margin: 0 !important;
        transform: rotate(1.5deg) !important; z-index: 3;
        animation: hz-float 7s ease-in-out infinite !important;
    }
    .hz-hero:not(.hz-hero-home) .hz-card-chat {
        width: 23rem !important; justify-self: end !important;
        margin: -1.4rem 0 0 !important;
        transform: rotate(-2deg) !important; z-index: 4;
        animation: hz-float 8s ease-in-out 1.2s infinite !important;
    }
    .hz-hero:not(.hz-hero-home) .hz-card-roadmap {
        width: 23rem !important; justify-self: start !important;
        margin: -1.2rem 0 0 !important;
        transform: rotate(1.75deg) translateX(1.25rem) !important; z-index: 5;
        animation: hz-float 7.6s ease-in-out .8s infinite !important;
    }
    .hz-hero:not(.hz-hero-home) .hz-card-opportunity {
        width: 22rem !important; justify-self: start !important;
        margin: -1.2rem 0 0 !important;
        transform: rotate(2.25deg) translateX(1.75rem) !important; z-index: 6;
        animation: hz-float 7.5s ease-in-out 1.8s infinite !important;
    }
    .hz-hero:not(.hz-hero-home) .hz-card-main .hz-chip-offer {
        position: static !important; inset: auto !important;
        transform: none !important; animation: none !important;
        width: auto !important; margin: .25rem 0 0 !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hz-hero:not(.hz-hero-home) .hz-visual * { animation: none !important; }
}