/* File: /assets/css/home-hero.css
   Module: The homepage hero (template-parts/home-hero.php, assets/js/home-hero.js)

   Loaded on the front page only. Light and dark tokens sit at the top and the
   foot of this file; every color below reads a token, so both themes are
   complete by construction. Light mode keeps light cards (LIGHT MODE HAS NO
   DARK PANELS); the dashboard is a white card on a soft aurora.

   THE TIMELINE. home-hero.js adds .is-play when the dashboard is on screen.
   Every story animation keys off it with backwards fill, so without the
   script, or before .is-js is set, everything shows its finished state:
     0.10s  the dashboard lifts in, the cards follow
     0.90s  the revenue line draws for 3.0s (--chh-at, --chh-for)
     each marker pops when the line reaches it (--d, from the template)
     3.90s  the deltas pop; home-hero.js starts the live orders
   The H1 and the lead never fade: one of them is the page's Largest
   Contentful Paint.

   Contrast: the gradient on "Actually Converts" only uses stops of 3:1 or
   more on the page (large text); the primary button stays on Emerald 700 and
   darker (white text 5.5:1 and up). Buttons declare color and background on
   every state: a:hover is blue site-wide at 0,1,1. */

/* ==========================================================================
   1. TOKENS (light)
   ========================================================================== */
.chh {
    --chh-ink:        #0F172A;
    --chh-mute:       #475569;
    --chh-faint:      #64748B;
    --chh-em:         #047857;
    --chh-em-hi:      #065F46;
    --chh-card:       #FFFFFF;
    --chh-card-2:     #F8FAFC;
    --chh-line:       rgba(15, 23, 42, 0.08);
    --chh-line-2:     #E2E8F0;
    --chh-shadow:     0 50px 90px -46px rgba(15, 23, 42, 0.42), 0 24px 50px -30px rgba(16, 185, 129, 0.28);
    --chh-shadow-sm:  0 18px 36px -20px rgba(15, 23, 42, 0.34);
    --chh-chip:       #E0E7FF;
    --chh-chip-ink:   #3730A3;
    --chh-delta:      #ECFDF5;
    --chh-delta-ink:  #047857;
    --chh-grid:       rgba(15, 23, 42, 0.07);
    --chh-stop-a:     rgba(16, 185, 129, 0.32);
    --chh-stop-b:     rgba(16, 185, 129, 0);
    --chh-dot:        rgba(15, 23, 42, 0.12);
    --chh-dot-lit:    rgba(5, 150, 105, 0.6);
    --chh-aurora-a:   rgba(16, 185, 129, 0.3);
    --chh-aurora-b:   rgba(6, 182, 212, 0.2);
    --chh-aurora-c:   rgba(37, 99, 235, 0.13);
    --chh-kicker:     #047857;
    --chh-kicker-bg:  rgba(16, 185, 129, 0.08);
    --chh-glass:      rgba(255, 255, 255, 0.74);
    --chh-glass-hi:   #FFFFFF;
    --chh-glass-line: #CBD5E1;
    --chh-poor:       #B91C1C;
    --chh-hl:         linear-gradient(100deg, #047857 0%, #059669 30%, #0E7490 55%, #059669 80%, #047857 100%);
    --chh-head-ring:  #FFFFFF;

    position: relative;
    isolation: isolate;
    padding: clamp(2.5rem, 6vw, 4.75rem) clamp(0.25rem, 2vw, 1rem) clamp(1rem, 3vw, 2.5rem);
}

/* ==========================================================================
   2. BACKGROUND: aurora, a dot field and the dots the cursor lights
   ========================================================================== */
.chh-bg {
    position: absolute;
    inset: -2rem 0 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
    mask-composite: intersect;
}

.chh-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    translate: calc(var(--chh-px, 0) * -26px) calc(var(--chh-py, 0) * -18px);
}

.chh-aurora.is-a {
    left: 2%;
    top: 4%;
    width: 46%;
    aspect-ratio: 1.2 / 1;
    background: radial-gradient(circle at 40% 40%, var(--chh-aurora-a), transparent 66%);
    animation: chhDriftA 18s ease-in-out infinite;
}

.chh-aurora.is-b {
    right: 0;
    top: 0;
    width: 52%;
    aspect-ratio: 1.3 / 1;
    background: radial-gradient(circle at 55% 45%, var(--chh-aurora-b), transparent 66%);
    animation: chhDriftB 22s ease-in-out infinite;
}

.chh-aurora.is-c {
    left: 34%;
    top: 36%;
    width: 44%;
    aspect-ratio: 1.4 / 1;
    background: radial-gradient(circle at 50% 50%, var(--chh-aurora-c), transparent 66%);
    animation: chhDriftC 26s ease-in-out infinite;
}

.chh-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--chh-dot) 1px, transparent 1.6px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 34%, #000 18%, transparent 74%);
    mask-image: radial-gradient(ellipse 72% 70% at 50% 34%, #000 18%, transparent 74%);
}

/* The same field in emerald, shown only in a circle around the cursor. */
.chh-dots.is-lit {
    background-image: radial-gradient(var(--chh-dot-lit) 1.2px, transparent 1.8px);
    -webkit-mask-image: radial-gradient(240px circle at var(--chh-mx, 50%) var(--chh-my, 30%), #000 0%, transparent 72%);
    mask-image: radial-gradient(240px circle at var(--chh-mx, 50%) var(--chh-my, 30%), #000 0%, transparent 72%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.chh.is-pointer .chh-dots.is-lit {
    opacity: 1;
}

@keyframes chhDriftA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(6%, 8%) scale(1.08); }
}

@keyframes chhDriftB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-8%, 6%) scale(1.1); }
}

@keyframes chhDriftC {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(5%, -8%) scale(0.94); }
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.chh-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.25rem, 5vw, 3.5rem);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.chh-copy {
    min-width: 0;
    text-align: center;
}

@media (min-width: 1100px) {
    .chh-inner {
        grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    }

    .chh-copy {
        text-align: left;
    }
}

/* ==========================================================================
   4. THE COPY COLUMN
   ========================================================================== */
@property --chh-ang {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.chh-kicker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.4rem;
    padding: 0.45rem 1rem 0.45rem 0.85rem;
    border-radius: 999px;
    background-color: var(--chh-kicker-bg);
    color: var(--chh-kicker);
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.2;
    text-transform: uppercase;
}

/* A gradient border that travels around the pill. */
.chh-kicker::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--chh-ang), rgba(16, 185, 129, 0.18), #10B981 18%, #06B6D4 30%, rgba(16, 185, 129, 0.18) 48%, rgba(16, 185, 129, 0.18));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: chhSpin 5s linear infinite;
}

.chh-kicker-dot {
    position: relative;
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #10B981;
}

.chh-kicker-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: #10B981;
    animation: chhPing 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.chh-title {
    margin: 0 0 1.35rem;
    color: var(--chh-ink);
    font-size: clamp(2.15rem, 1.1rem + 3.4vw, 3.65rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    text-wrap: balance;
}

@media (max-width: 1099px) {
    .chh-title {
        max-width: 17ch;
        margin-right: auto;
        margin-left: auto;
    }
}

.chh-hl {
    position: relative;
    display: inline-block;
    padding-bottom: 0.14em;
    color: var(--chh-em);
    background-image: var(--chh-hl);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: chhShimmer 7s linear infinite;
}

/* The underline is a trend line: it climbs left to right and ends in an arrow. */
.chh-trend {
    position: absolute;
    left: 0;
    bottom: -0.2em;
    width: 100%;
    height: 0.36em;
    overflow: visible;
    pointer-events: none;
}

.chh-trend-line,
.chh-trend-tip {
    fill: none;
    stroke: url(#chhTrendInk);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.chh-trend-tip {
    stroke: #06B6D4;
}

.chh.is-js .chh-trend {
    animation: chhWipe 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.45s backwards;
}

.chh.is-js .chh-trend-tip {
    animation: chhTip 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.45s backwards;
    transform-origin: 96% 20%;
    transform-box: view-box;
}

.chh-sub {
    max-width: 36em;
    margin: 0 auto 2rem;
    color: var(--chh-mute);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
    line-height: 1.65;
}

/* The one bold phrase of the line (PRODUCT-PAGES.md 3.1). */
.chh-sub strong {
    color: var(--chh-ink);
    font-weight: 700;
}

@media (min-width: 1100px) {
    .chh-sub {
        margin-left: 0;
    }
}

/* Entrance for the parts that are not the LCP. */
.chh.is-js .chh-kicker,
.chh.is-js .chh-actions,
.chh.is-js .chh-proof {
    animation: chhRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.chh.is-js .chh-kicker  { animation-delay: 0.05s; }
.chh.is-js .chh-actions { animation-delay: 0.22s; }
.chh.is-js .chh-proof   { animation-delay: 0.38s; }

/* --- 4.1 Buttons ------------------------------------------------------------ */
.chh-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
}

@media (min-width: 1100px) {
    .chh-actions {
        justify-content: flex-start;
    }
}

.chh a.chh-btn,
.chh a.chh-btn:visited {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 56px;
    padding: 0 1.5rem;
    border-radius: 16px;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), translate 0.25s ease-out, box-shadow 0.3s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chh-btn-ico {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
}

/* Primary: Emerald 700 into 800, a light rim, a glow that circles behind it. */
.chh a.chh-btn.is-primary,
.chh a.chh-btn.is-primary:visited {
    padding: 0 0.5rem 0 1.5rem;
    border: 1px solid rgba(4, 120, 87, 0.5);
    background-color: #047857;
    /* The sweep is the first layer: a band of light parked off the right
       edge that crosses to the left on hover, inside the button's own box. */
    background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.2) 50%, transparent 58%), linear-gradient(135deg, #047857 0%, #065F46 100%);
    background-size: 260% 100%, 100% 100%;
    background-position: 100% 0, 0 0;
    background-repeat: no-repeat;
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 30px -14px rgba(4, 120, 87, 0.75);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), translate 0.25s ease-out, box-shadow 0.3s ease, background-position 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.chh a.chh-btn.is-primary::before {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: -1;
    border-radius: 19px;
    background: conic-gradient(from var(--chh-ang), #10B981, #06B6D4, #34D399, #10B981);
    filter: blur(10px);
    opacity: 0.5;
    animation: chhSpin 4s linear infinite;
    transition: opacity 0.3s ease;
}

.chh a.chh-btn.is-primary .chh-btn-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.14);
}

.chh a.chh-btn.is-primary:hover,
.chh a.chh-btn.is-primary:focus-visible,
.chh a.chh-btn.is-primary:active {
    background-color: #065F46;
    background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.2) 50%, transparent 58%), linear-gradient(135deg, #065F46 0%, #064E3B 100%);
    background-position: 0 0, 0 0;
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 20px 40px -16px rgba(4, 120, 87, 0.85);
    transform: translateY(-2px);
}

.chh a.chh-btn.is-primary:hover::before,
.chh a.chh-btn.is-primary:focus-visible::before {
    opacity: 0.9;
}

.chh a.chh-btn.is-primary:hover .chh-btn-ico,
.chh a.chh-btn.is-primary:focus-visible .chh-btn-ico {
    background-color: rgba(255, 255, 255, 0.22);
    transform: translateX(3px);
}

.chh a.chh-btn.is-primary:active {
    transform: translateY(0) scale(0.98);
}

/* Ghost: frosted glass with an emerald icon. */
.chh a.chh-btn.is-ghost,
.chh a.chh-btn.is-ghost:visited {
    gap: 0.6rem;
    border: 1px solid var(--chh-glass-line);
    background-color: var(--chh-glass);
    color: var(--chh-ink);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 26px -20px rgba(15, 23, 42, 0.45);
}

.chh a.chh-btn.is-ghost .chh-btn-ico {
    color: var(--chh-em);
}

.chh a.chh-btn.is-ghost:hover,
.chh a.chh-btn.is-ghost:focus-visible,
.chh a.chh-btn.is-ghost:active {
    border-color: #10B981;
    background-color: var(--chh-glass-hi);
    color: var(--chh-em-hi);
    text-decoration: none;
    box-shadow: 0 16px 32px -20px rgba(4, 120, 87, 0.55), 0 0 0 3px rgba(16, 185, 129, 0.14);
    transform: translateY(-2px);
}

.chh a.chh-btn.is-ghost:hover .chh-btn-ico,
.chh a.chh-btn.is-ghost:focus-visible .chh-btn-ico {
    color: var(--chh-em-hi);
    transform: rotate(-8deg) scale(1.08);
}

.chh a.chh-btn.is-ghost:active {
    transform: translateY(0) scale(0.98);
}

.chh a.chh-btn:focus-visible {
    outline: 3px solid rgba(16, 185, 129, 0.55);
    outline-offset: 3px;
}

/* --- 4.2 Byline and platforms ---------------------------------------------- */
.chh-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
    margin-top: 1.9rem;
    color: var(--chh-mute);
    font-size: 0.88rem;
    line-height: 1.35;
}

@media (min-width: 1100px) {
    .chh-proof {
        justify-content: flex-start;
    }
}

.chh a.chh-proof-author,
.chh a.chh-proof-author:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--chh-mute);
    text-decoration: none;
}

.chh a.chh-proof-author:hover,
.chh a.chh-proof-author:focus-visible {
    color: var(--chh-ink);
    text-decoration: none;
}

.chh a.chh-proof-author:hover b,
.chh a.chh-proof-author:focus-visible b {
    color: var(--chh-em-hi);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.chh a.chh-proof-author:focus-visible {
    outline: 2px solid rgba(16, 185, 129, 0.55);
    outline-offset: 4px;
    border-radius: 8px;
}

.chh-proof-author img {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 2px solid var(--chh-card);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--chh-line-2), 0 6px 14px -8px rgba(15, 23, 42, 0.5);
}

.chh-proof-author b {
    color: var(--chh-ink);
    font-weight: 700;
}

.chh-proof-plat {
    display: inline-flex;
    gap: 0.45rem;
}

.chh-plat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--chh-line-2);
    border-radius: 999px;
    background-color: var(--chh-glass);
    color: var(--chh-ink);
    font-size: 0.8rem;
    font-weight: 700;
}

.chh-plat::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.chh-plat.is-shopify::before { background-color: #95BF47; }
.chh-plat.is-woo::before     { background-color: #7F54B3; }

/* ==========================================================================
   5. THE DASHBOARD
   Sized by aspect ratio from the first paint; everything inside is in em,
   and the em follows the dashboard's own width (cqi), so the composition is
   the same at 580px and at 330px.
   ========================================================================== */
.chh-visual {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    aspect-ratio: 1 / 0.9;
    container-type: inline-size;
}

.chh-visual > * {
    font-size: clamp(9px, 2.45cqi, 14.5px);
}

.chh.is-js:not(.is-play) .chh-visual {
    opacity: 0;
}

/* Failsafe: if home-hero.js never arrives, show the finished dashboard. */
.chh.is-js:not(.is-play):not(.is-armed) .chh-visual {
    animation: chhShow 0.4s ease 3s forwards;
}

.chh-layer {
    translate: calc(var(--chh-px, 0) * var(--depth, 10) * 1px) calc(var(--chh-py, 0) * var(--depth, 10) * 0.8px);
}

/* --- 5.1 The board ------------------------------------------------------------ */
.chh-board {
    position: absolute;
    top: 13%;
    bottom: 8%;
    left: 0;
    width: 87%;
    display: flex;
    flex-direction: column;
    padding: 1.15em 1.25em 1.1em;
    border: 1px solid var(--chh-line);
    border-radius: 1.4em;
    background-color: var(--chh-card);
    box-shadow: var(--chh-shadow);
}

/* An emerald glow under the board and a light that runs around its rim. */
.chh-board::before {
    content: "";
    position: absolute;
    inset: 12% 6% -4%;
    z-index: -1;
    border-radius: 2em;
    background: radial-gradient(ellipse at 50% 60%, rgba(16, 185, 129, 0.35), rgba(6, 182, 212, 0.12) 50%, transparent 72%);
    filter: blur(28px);
}

.chh-board::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--chh-ang), transparent 0%, transparent 62%, rgba(16, 185, 129, 0.9) 75%, rgba(6, 182, 212, 0.9) 82%, transparent 92%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: chhSpin 7s linear infinite;
    pointer-events: none;
}

.chh-board-head {
    display: flex;
    align-items: center;
    gap: 0.6em;
    min-width: 0;
    color: var(--chh-mute);
    font-size: 0.82em;
    font-weight: 600;
    white-space: nowrap;
}

.chh-store {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--chh-ink);
    font-weight: 700;
}

.chh-store-ico {
    display: inline-grid;
    place-items: center;
    width: 1.9em;
    height: 1.9em;
    border-radius: 0.6em;
    background-color: var(--chh-delta);
    color: var(--chh-em);
}

.chh-store-ico svg {
    width: 1.1em;
    height: 1.1em;
}

.chh-chip {
    padding: 0.18em 0.55em;
    border-radius: 999px;
    background-color: var(--chh-chip);
    color: var(--chh-chip-ink);
    font-size: 0.86em;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.chh-period {
    color: var(--chh-mute);
}

.chh-kpis {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6em;
    margin-top: 0.95em;
}

.chh-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.22em;
    min-width: 0;
    padding: 0.65em 0.75em 0.7em;
    border: 1px solid var(--chh-line);
    border-radius: 0.85em;
    background-color: var(--chh-card-2);
}

.chh-kpi-label {
    max-width: 100%;
    overflow: hidden;
    color: var(--chh-mute);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.chh-kpi:first-child .chh-kpi-val {
    font-size: 1.75em;
}

.chh-kpi-val {
    color: var(--chh-ink);
    font-size: 1.5em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1.1;
    white-space: nowrap;
}

.chh-delta {
    padding: 0.16em 0.5em;
    border-radius: 999px;
    background-color: var(--chh-delta);
    color: var(--chh-delta-ink);
    font-size: 0.72em;
    font-weight: 800;
    white-space: nowrap;
}

/* --- 5.2 The chart -------------------------------------------------------------- */
.chh-chart {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 1em;
    background-image: linear-gradient(var(--chh-grid) 1px, transparent 1px);
    background-size: 100% 25%;
    background-position: 0 12.5%;
    border-radius: 0.6em;
}

.chh-plot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chh-stop-a { stop-color: var(--chh-stop-a); }
.chh-stop-b { stop-color: var(--chh-stop-b); }

.chh-area {
    fill: url(#chhAreaFill);
}

.chh-line {
    fill: none;
    stroke: url(#chhLineInk);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chh.is-play .chh-plot {
    animation: chhWipe var(--chh-for, 3s) linear var(--chh-at, 0.9s) backwards;
}

/* The head that runs along the line. home-hero.js moves it by transform;
   without the script it sits at the end of the line. */
.chh-head {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate3d(var(--chh-head-x, 0), var(--chh-head-y, 0), 0);
    z-index: 4;
    width: 1em;
    height: 1em;
    margin: -0.5em 0 0 -0.5em;
    border: 0.22em solid #10B981;
    border-radius: 50%;
    background-color: var(--chh-head-ring);
    box-shadow: 0 0 0 0.35em rgba(16, 185, 129, 0.2), 0 0 1.3em rgba(16, 185, 129, 0.75);
    opacity: 0;
}

.chh.is-live .chh-head {
    opacity: 1;
}

.chh-head::after {
    content: "";
    position: absolute;
    inset: -0.22em;
    border-radius: 50%;
    border: 0.15em solid #10B981;
    opacity: 0;
}

.chh.is-done .chh-head::after {
    animation: chhPulse 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* The markers: a dot on the line and a tag with the fix. */
.chh-pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 3;
    width: 0;
    height: 0;
}

.chh.is-play .chh-pin {
    animation: chhPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 1s) backwards;
}

.chh-pin-dot {
    position: absolute;
    top: -0.42em;
    left: -0.42em;
    width: 0.84em;
    height: 0.84em;
    border: 0.2em solid #10B981;
    border-radius: 50%;
    background-color: var(--chh-card);
    box-shadow: 0 0 0 0.3em rgba(16, 185, 129, 0.18);
}

.chh-pin-tag {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.38em 0.6em;
    border: 1px solid var(--chh-line-2);
    border-radius: 0.65em;
    background-color: var(--chh-card);
    box-shadow: var(--chh-shadow-sm);
    color: var(--chh-mute);
    font-size: 0.76em;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.chh-pin-tag b {
    color: var(--chh-ink);
    font-weight: 800;
}

.chh-pin-tag em {
    color: var(--chh-em);
    font-style: normal;
    font-weight: 800;
}

.chh-pin-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.chh-pin-arrow {
    display: inline-flex;
    color: var(--chh-em);
}

.chh-pin-arrow svg {
    width: 0.95em;
    height: 0.95em;
}

/* Tags sit where the line is not: under the flat stretch after the first
   step, above the flat stretches that lead into the next two. */
.chh-pin.is-br .chh-pin-tag { left: 0.5em;   top: 0.95em; }
.chh-pin.is-tl .chh-pin-tag { right: 0.5em;  bottom: 1.05em; }

/* --- 5.3 The cards around it ----------------------------------------------------- */
.chh-card {
    position: absolute;
    border: 1px solid var(--chh-line);
    border-radius: 1.1em;
    background-color: var(--chh-card);
    box-shadow: var(--chh-shadow-sm);
}

.chh-card-label {
    color: var(--chh-mute);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Both cards sit on the bottom third of the chart, under the line: the
   curve is drawn in the top two thirds (home-hero.php) for exactly this. */
.chh-speed {
    right: 0;
    bottom: 14%;
    width: 30%;
    display: grid;
    gap: 0.45em;
    padding: 0.85em 1em 0.95em;
}

.chh-speed-val {
    color: var(--chh-ink);
    font-size: 1.65em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
}

.chh-speed-bar {
    position: relative;
    height: 0.45em;
    border-radius: 999px;
    background-color: var(--chh-line-2);
}

.chh-speed-bar i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--w, 38%);
    border-radius: inherit;
    background-image: linear-gradient(90deg, #10B981, #34D399);
}

/* Google's pass mark for Loading, 2.5 s on a 5 s bar. */
.chh-speed-mark {
    position: absolute;
    top: -0.25em;
    bottom: -0.25em;
    left: 50%;
    width: 2px;
    border-radius: 2px;
    background-color: var(--chh-ink);
    opacity: 0.35;
}

.chh-pass {
    justify-self: start;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    background-color: var(--chh-delta);
    color: var(--chh-delta-ink);
    font-size: 0.72em;
    font-weight: 800;
    transition: opacity 0.3s ease;
}

.chh-speed.is-poor .chh-speed-val { color: var(--chh-poor); }
.chh-speed.is-poor .chh-speed-bar i { background-image: linear-gradient(90deg, #F87171, #EF4444); }
.chh-speed.is-poor .chh-pass { opacity: 0; }

.chh-ring {
    bottom: 0;
    left: 3%;
    width: 24%;
    display: grid;
    justify-items: center;
    gap: 0.5em;
    padding: 0.9em 0.8em 0.95em;
}

.chh-ring-svg,
.chh-ring-text {
    grid-area: 1 / 1;
}

.chh-ring-svg {
    width: 82%;
    aspect-ratio: 1;
    transform: rotate(-90deg);
}

.chh-ring-track,
.chh-ring-arc {
    fill: none;
    stroke-width: 9;
}

.chh-ring-track {
    stroke: var(--chh-line-2);
}

.chh-ring-arc {
    stroke: #10B981;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--p, 65));
    filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.45));
}

.chh-ring-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    gap: 0.15em;
}

.chh-ring-val {
    color: var(--chh-ink);
    font-size: 1.45em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
}

.chh-ring .chh-card-label {
    font-size: 0.56em;
    letter-spacing: 0.04em;
}

.chh-ring .chh-delta {
    grid-area: 2 / 1;
}

/* --- 5.4 New orders: a stack, newest in front ------------------------------------- */
.chh-feed {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: 55%;
    height: 5.2em;
}

.chh-toast {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: calc(10 - var(--i, 0));
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.7em 0.85em;
    border: 1px solid var(--chh-line);
    border-radius: 1em;
    background-color: var(--chh-card);
    box-shadow: var(--chh-shadow-sm);
    opacity: calc(1 - var(--i, 0) * 0.32);
    transform: translateY(calc(var(--i, 0) * 0.62em)) scale(calc(1 - var(--i, 0) * 0.06));
    transform-origin: 50% 100%;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.chh-toast > * {
    opacity: calc(1 - var(--i, 0));
    transition: opacity 0.3s ease;
}

.chh-toast.is-new {
    animation: chhToastIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.chh-toast.is-gone {
    opacity: 0;
    transform: translateY(2.2em) scale(0.82);
}

.chh-toast-ico {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.3em;
    height: 2.3em;
    border-radius: 0.75em;
    background-color: var(--chh-delta);
    color: var(--chh-em);
}

.chh-toast-ico svg {
    width: 1.2em;
    height: 1.2em;
}

.chh-toast-body {
    display: flex;
    flex-direction: column;
    gap: 0.12em;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82em;
    line-height: 1.25;
}

.chh-toast-body b {
    color: var(--chh-ink);
    font-weight: 800;
}

.chh-toast-body span {
    overflow: hidden;
    color: var(--chh-mute);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chh-toast-amt {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    color: var(--chh-em);
    font-size: 0.92em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.chh-toast-amt small {
    color: var(--chh-mute);
    font-size: 0.72em;
    font-weight: 600;
}

/* "+$86.40" rising from the head of the line when an order lands. */
.chh-plus {
    position: absolute;
    left: var(--hx, 100%);
    top: var(--hy, 14%);
    z-index: 6;
    padding: 0.22em 0.55em;
    border-radius: 999px;
    background-color: #047857;
    color: #FFFFFF;
    font-size: 0.78em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: 0 8px 18px -8px rgba(4, 120, 87, 0.8);
    pointer-events: none;
    animation: chhPlus 1.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* --- 5.5 Entrances ----------------------------------------------------------------- */
.chh.is-play .chh-board { animation: chhLift 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards; }
.chh.is-play .chh-feed  { animation: chhLift 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.45s backwards; }
.chh.is-play .chh-speed { animation: chhLift 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.65s backwards; }
.chh.is-play .chh-ring  { animation: chhLift 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.85s backwards; }

.chh.is-play .chh-kpi .chh-delta,
.chh.is-play .chh-ring .chh-delta {
    animation: chhPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--chh-at, 0.9s) + var(--chh-for, 3s) + 0.15s) backwards;
}

/* ==========================================================================
   6. KEYFRAMES
   ========================================================================== */
@keyframes chhRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes chhLift {
    from { opacity: 0; transform: translateY(1.6em) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes chhShow {
    to { opacity: 1; }
}

@keyframes chhWipe {
    from { clip-path: inset(-30% 100% -30% 0); }
    to   { clip-path: inset(-30% -2% -30% 0); }
}

@keyframes chhTip {
    from { opacity: 0; transform: scale(0.2); }
    to   { opacity: 1; transform: none; }
}

@keyframes chhPop {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: none; }
}

@keyframes chhSpin {
    to { --chh-ang: 360deg; }
}

@keyframes chhPing {
    0%        { transform: scale(1);   opacity: 0.55; }
    70%, 100% { transform: scale(3.2); opacity: 0; }
}

@keyframes chhPulse {
    0%        { transform: scale(1);   opacity: 0.8; }
    80%, 100% { transform: scale(2.6); opacity: 0; }
}

@keyframes chhShimmer {
    from { background-position: 240% center; }
    to   { background-position: -40% center; }
}

@keyframes chhToastIn {
    from { opacity: 0; transform: translateY(-1.4em) scale(0.96); }
}

@keyframes chhPlus {
    0%   { opacity: 0; transform: translate(-50%, -40%) scale(0.7); }
    16%  { opacity: 1; transform: translate(-50%, -150%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -420%) scale(1); }
}

/* Off screen or in a background tab, nothing keeps drawing. */
.chh.is-off,
.chh.is-off *,
.chh.is-off *::before,
.chh.is-off *::after {
    animation-play-state: paused !important;
}

/* ==========================================================================
   7. PHONES AND NARROW DASHBOARDS
   ========================================================================== */
@media (max-width: 640px) {
    .chh-actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 22rem;
        margin: 0 auto;
    }

    .chh a.chh-btn.is-primary,
    .chh a.chh-btn.is-primary:visited {
        padding-left: 1.25rem;
    }

    .chh-kicker {
        font-size: 0.64rem;
        letter-spacing: 1.4px;
    }
}

@container (max-width: 460px) {
    .chh-visual > * {
        font-size: clamp(9.5px, 2.95cqi, 13px);
    }

    .chh-board {
        top: 15%;
        width: 100%;
        bottom: 11%;
        padding: 0.95em 0.95em 0.9em;
    }

    .chh-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chh-kpi:nth-child(3),
    .chh-speed,
    .chh-period,
    .chh-pin-tag .chh-pin-detail {
        display: none;
    }

    .chh-feed {
        width: 74%;
    }

    .chh-ring {
        right: 3%;
        bottom: 0;
        left: auto;
        width: 30%;
    }


}

/* ==========================================================================
   8. REDUCED MOTION: the finished dashboard, no loops, no travel
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .chh *,
    .chh *::before,
    .chh *::after {
        animation: none !important;
        transition: none !important;
    }

    .chh.is-js:not(.is-play) .chh-visual {
        opacity: 1;
    }

    .chh-layer,
    .chh-aurora {
        translate: none;
    }
}

/* ==========================================================================
   9. TOKENS (dark)
   ========================================================================== */
html[data-theme="dark"] .chh {
    --chh-ink:        #F1F5F9;
    --chh-mute:       #B6C2D2;
    --chh-faint:      #94A3B8;
    --chh-em:         #34D399;
    --chh-em-hi:      #6EE7B7;
    --chh-card:       #131E33;
    --chh-card-2:     #0F192C;
    --chh-line:       rgba(148, 163, 184, 0.16);
    --chh-line-2:     #334155;
    --chh-shadow:     0 50px 90px -40px rgba(0, 0, 0, 0.85), 0 30px 70px -44px rgba(16, 185, 129, 0.4);
    --chh-shadow-sm:  0 18px 36px -18px rgba(0, 0, 0, 0.8);
    --chh-chip:       rgba(129, 140, 248, 0.2);
    --chh-chip-ink:   #C7D2FE;
    --chh-delta:      rgba(16, 185, 129, 0.16);
    --chh-delta-ink:  #6EE7B7;
    --chh-grid:       rgba(148, 163, 184, 0.12);
    --chh-stop-a:     rgba(16, 185, 129, 0.38);
    --chh-stop-b:     rgba(16, 185, 129, 0);
    --chh-dot:        rgba(148, 163, 184, 0.16);
    --chh-dot-lit:    rgba(52, 211, 153, 0.75);
    --chh-aurora-a:   rgba(16, 185, 129, 0.3);
    --chh-aurora-b:   rgba(6, 182, 212, 0.22);
    --chh-aurora-c:   rgba(99, 102, 241, 0.22);
    --chh-kicker:     #6EE7B7;
    --chh-kicker-bg:  rgba(16, 185, 129, 0.12);
    --chh-glass:      rgba(15, 23, 42, 0.55);
    --chh-glass-hi:   rgba(16, 185, 129, 0.12);
    --chh-glass-line: #334155;
    --chh-poor:       #F87171;
    --chh-hl:         linear-gradient(100deg, #34D399 0%, #6EE7B7 30%, #22D3EE 55%, #6EE7B7 80%, #34D399 100%);
    --chh-head-ring:  #0F172A;
}