/* "Why Dealersip" brand story page.
   The stage deliberately echoes the ad creative: near-black, wide-tracked wordmark, one teal
   light bar. It stays near-black in light mode too - the letter-drop only reads on black -
   so .h-stage is one of the three dark slabs listed at the top of site.css, and everything
   inside it gets the dark theme's tokens back from the block there. The answer text is always in the DOM - JS only reveals it - so crawlers and
   no-JS visitors get the payoff without tapping anything. */

.h-stage {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 5rem;
    text-align: center;
    background:
        radial-gradient(700px 320px at 50% 42%, rgba(18, 184, 139, 0.16) 0%, transparent 70%),
        linear-gradient(180deg, #000000 0%, #01100b 100%);
}

.h-prompt {
    color: var(--fg);
    font-size: 1.35rem;
    margin: 0 0 2.2rem;
}

/* the wordmark */
.h-word {
    margin: 0;
    font-weight: 700;
    line-height: 1;
    color: var(--fg-strong);
    letter-spacing: 0.18em;
    /* fills the width on any screen without a pile of breakpoints */
    font-size: clamp(2rem, 11vw, 6.5rem);
    white-space: nowrap;
}

.h-letter {
    display: inline-block;
    max-width: 1.1em;
    overflow: hidden;
    color: var(--theme-orange);
    cursor: pointer;
    transition: max-width 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.45s ease,
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.3s ease;
}

.h-word.is-gone .h-letter {
    max-width: 0;
    opacity: 0;
    transform: translateY(0.55em) rotate(14deg);
}

/* the light bar under the name, straight from the ad */
.h-underline {
    height: 2px;
    max-width: 520px;
    margin: 1.4rem auto 2rem;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #25ffc4 50%, transparent);
    box-shadow: 0 0 26px rgba(37, 255, 196, 0.75);
}

.h-tally {
    transition: opacity 0.5s ease;
}

    .h-tally p {
        margin: 0 0 0.2rem;
        font-size: 1.15rem;
    }

.h-tally-teal {
    color: var(--theme-teal-light);
}

.h-tally-white {
    color: var(--fg);
}

.h-stage.is-revealed .h-tally {
    opacity: 0;
    pointer-events: none;
}

/* call to action, glowing pill like the creative */
.h-cta {
    position: relative;
    padding: 0.75rem 2.2rem;
    font-family: inherit;
    font-size: 1.05rem;
    color: var(--theme-teal-light);
    background: rgba(37, 255, 196, 0.07);
    border: 1px solid rgba(37, 255, 196, 0.55);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 0 26px rgba(37, 255, 196, 0.28);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

    .h-cta:hover {
        background: rgba(37, 255, 196, 0.16);
        color: #ffffff;
        transform: translateY(-2px);
    }

/* ---------- the CTA orbit ----------
   Same idea as Bella in the hero: a ring around the thing with a light travelling
   round it, so the button reads as live rather than decorative. Everything here moves
   with transform and opacity only - no custom-property or conic-angle animation - so
   it runs in every browser rather than sitting still in some of them. */

.h-cta-orbit {
    position: relative;
    display: inline-block;
    margin-top: 1.9rem;
    padding: 9px;
    border-radius: 999px;
    transition: opacity 0.4s ease;
}

/* the ring itself: a dashed pill outline, breathing so it is visible even before the
   light comes round to it */
.h-cta-orbit::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px dashed rgba(37, 255, 196, 0.4);
    border-radius: 999px;
    pointer-events: none;
    animation: hCtaRingBreathe 3.4s ease-in-out infinite;
}

/* the band the light lives in: a 2px ring cut out of the pill by the two-layer mask */
.h-cta-ring {
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 999px;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* the light: an oversized square carrying the gradient, spun by transform. The mask on
   the parent trims whatever is outside the band, so what shows is a head of light
   running round the ring. */
.h-cta-ring::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220%;
    aspect-ratio: 1 / 1;
    background: conic-gradient(rgba(37, 255, 196, 0) 0deg, rgba(37, 255, 196, 0) 240deg, rgba(37, 255, 196, 0.3) 300deg, var(--theme-teal-light) 345deg, var(--fg-strong) 357deg, rgba(37, 255, 196, 0) 360deg);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: hCtaSpin 3.4s linear infinite;
}

@keyframes hCtaSpin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes hCtaRingBreathe {
    0%, 100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

/* an outward ping off the button, in step with the light */
.h-cta::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(37, 255, 196, 0.55);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    animation: hCtaPing 3.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes hCtaPing {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    60%, 100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

/* hovering already tells the visitor it is a button, so the hint steps back */
.h-cta-orbit:hover .h-cta-ring::before,
.h-cta-orbit:hover::before,
.h-cta:hover::after {
    animation: none;
}

.h-cta:hover::after {
    opacity: 0;
}

/* once the answer is out the whole CTA goes, ring included */
.h-stage.is-revealed .h-cta-orbit {
    opacity: 0;
    pointer-events: none;
}

/* Deliberately no prefers-reduced-motion block, same call as the hero console.
   On Windows that preference is switched on by remote desktop sessions, battery saver and
   "adjust for best performance", so it flags a large number of visitors who never asked for
   still images - and it was leaving this CTA looking switched off for them, which defeats
   the point of the ring. Nothing here is a vestibular trigger: the ring light travels inside
   a 2px band and the ping grows by 18% of a small pill. Product decision, 2026-08-27. */

/* the answer: present for crawlers, revealed for visitors */
.h-answer {
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s ease 0.35s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

.h-stage.is-revealed .h-answer {
    opacity: 1;
    transform: none;
}

/* with JS off nothing gets a chance to reveal, so show it outright */
.no-js .h-answer {
    opacity: 1;
    transform: none;
}

.h-answer-lead {
    font-size: 1.5rem;
    color: var(--fg-strong);
    margin: 0 0 0.4rem;
}

    .h-answer-lead strong {
        color: var(--theme-orange);
    }

.h-answer-sub {
    color: var(--fg-dim);
    font-size: 1.1rem;
    margin: 0;
}

    .h-answer-sub strong {
        color: var(--theme-orange);
    }

/* the six H words */
.h-chip {
    text-align: center;
    padding: 0.85rem 0.5rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--hairline-soft);
    color: var(--fg-dim);
    font-weight: 600;
}

    .h-chip span {
        color: var(--theme-orange);
        font-weight: 800;
    }

@media (max-width: 575.98px) {
    .h-stage {
        padding: 3rem 0 3.5rem;
    }

    .h-prompt {
        font-size: 1.1rem;
    }

    .h-answer-lead {
        font-size: 1.2rem;
    }
}