/* ============================================================
   Homepage redesign — hybrid pass.
   Loaded after site.css and hvac-v2.css on index-v2.html only.

   Two different jobs in this file:

   1. The dashboard-assembly hero is functional — site.js binds to its
      exact ids (#stage, #pin, #dash, #calgrid, #bars, #bw...) and a few
      classes (.fly, .slot, .dseg, [data-count]). Per explicit decision,
      it keeps its HTML byte-for-byte and only gets a colour/shadow
      reskin here, scoped under .hv2home so nothing on index.html or
      pricing.html (which also uses .tier) is affected. Legend swatches
      and SVG stroke attributes are set as inline colour values in the
      HTML itself (CSS can't override those), so the actual palette
      swap for those lives in index-v2.html, not here.

   2. Everything else still riding on old site.css components (pricing
      tiers, calendar mock, recorded-call player) is reskinned the same
      scoped way — the sections around them were rebuilt with hv2-*
      markup directly in index-v2.html, reusing the component library
      from the industry pages. The live-demo widget itself was switched
      to the actual .hv2-widget component (no override needed here —
      hvac-v2.css already styles it identically to the industry pages).
   ============================================================ */

.hv2home{
  --hh-teal:#5B4FE9; --hh-blue:#5B4FE9;
  --hh-gradient:#5B4FE9;
  --hh-shadow-premium:0 1px 0 rgba(255,255,255,.6) inset,0 0 0 1px rgba(15,23,42,.06),
    0 30px 80px -30px rgba(11,30,63,.18),0 80px 120px -60px rgba(91,79,233,.10);
}

/* ===== dashboard-assembly hero — colour/shadow only, structure untouched =====
   The original "b1/b2/b3" blurred-circle background read as a diffuse,
   directionless haze once recoloured (the "apple liquid glass" note) —
   it's a blur-everything technique, not the confident two-corner gradient
   the rest of hv2 uses. Replaced with the same --hv-atmo-light formula the
   industry-page hero backgrounds actually use, and the blob layer is kept
   only as a faint accent underneath it rather than the main effect. */
.hv2home .pin{background:var(--hv-atmo-light);}
.hv2home .atmos{opacity:.5;}
.hv2home .atmos i{filter:blur(70px);}
.hv2home .b1{background:radial-gradient(ellipse at center,rgba(91,79,233,.4) 0%,rgba(91,79,233,0) 70%);}
.hv2home .b2{background:radial-gradient(ellipse at center,rgba(91,79,233,.28) 0%,rgba(91,79,233,0) 70%);}
.hv2home .b3{background:radial-gradient(ellipse at center,rgba(91,79,233,.3) 0%,rgba(91,79,233,0) 70%);}
.hv2home .atmos::after{background:linear-gradient(to bottom,#fbfffe 0%,rgba(251,255,254,0) 100%);}
.hv2home .stage-head .lede{color:#5b6363;}
.hv2home .hin h1{font-family:'Plus Jakarta Sans',var(--sans);font-weight:800;letter-spacing:-.02em;font-size:clamp(36px,5.6vw,62px);}

.hv2home .dash{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--hh-shadow-premium);}
/* Nav active-state: a soft teal wash + dark teal text/icon, not a solid
   colour block. A solid fill (teal, then blue, tried in that order) kept
   reading as one more loud colour competing with the KPI row above it —
   now that those are white cards with just an accent bar, the nav gets
   the same quieter treatment instead of standing out as the odd one out. */
.hv2home .side-nav a.on{background:rgba(91,79,233,.12);color:#0f6e56;font-weight:600;}
.hv2home .meter-bar i{background:var(--hh-teal);}
.hv2home .badge{background:rgba(91,79,233,.1);color:var(--hh-teal);}

.hv2home .chartbox,.hv2home .donutbox,.hv2home .tablecard{box-shadow:var(--hh-shadow-premium);}
/* Business/after-hours bars are both a slice of CALLS, so both stay
   teal — after-hours is the same colour at lower opacity, not a
   different pale hue (that's what was colliding with the donut's
   "no answer" tint and reading as dull). Appointments (the line, the
   "ok" chip, that KPI) are the one conversion/customer metric on the
   dashboard and are consistently blue — the secondary colour marking
   the thing calls turn into, not another calls measurement. */
/* both colours are literal stops on --hv-gradient (0% and 35% along its
   teal->blue run) rather than hand-picked hexes, so the bar chart reads
   as one consistent ramp instead of two unrelated tones. */
.hv2home .bars .bh{background:#5B4FE9;}
.hv2home .bars .ah{background:#2099ae;}
.hv2home .viewall{color:var(--hh-teal);}
.hv2home .line-dot{background:#12314a;box-shadow:none;}
.hv2home .chip.ok{border-color:#b7e8c9;color:#1f8a52;background:#eafbf1;}
.hv2home .chip.tr{border-color:#c3d8ea;color:var(--hh-blue);background:#f3f8fd;}
.hv2home .chip.vm{border-color:#f0dcb0;color:#946a1a;background:#fdf6ec;}
.hv2home .chip.spam{border-color:#e6c6c6;color:#a5403f;background:#fdf3f2;}

.hv2home .fly .kpi{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--hh-shadow-premium);}
/* Option C from the three tried: plain white cards, colour lives only in
   a left accent bar + the icon, each in the exact hex of its own series
   in the "Call volume & appointments" chart below (.hv2home .bars .bh/.ah
   and the appointment line). Full-card solid fills (tried first) and a
   flat tint wash (tried before that) both read as "too many colours" —
   this keeps the same card-to-series colour link without the card itself
   competing for attention. Left corners square off since a border-radius
   fights a single-sided border otherwise. */
.hv2home .hh-kpi-calls,
.hv2home .hh-kpi-appt,
.hv2home .hh-kpi-hours{border-radius:0 var(--r-sm) var(--r-sm) 0;border-left:3px solid;}
.hv2home .hh-kpi-calls{border-left-color:#5B4FE9;}
.hv2home .hh-kpi-appt{border-left-color:#12314a;}
.hv2home .hh-kpi-hours{border-left-color:#2099ae;}
.hv2home .hh-kpi-calls .k-ic{color:#5B4FE9;}
.hv2home .hh-kpi-appt .k-ic{color:#12314a;}
.hv2home .hh-kpi-hours .k-ic{color:#2099ae;}

/* ===== recorded-call player — colour/shadow only, structure untouched ===== */
.hv2home .player{box-shadow:var(--hh-shadow-premium);}
.hv2home .play:hover{border-color:var(--hh-teal);}
.hv2home .bigwave i{background:var(--hh-teal);}
.hv2home .who{color:var(--hh-teal);}

/* ===== pricing tiers — colour/shadow only ===== */
.hv2home .tier{box-shadow:var(--hh-shadow-premium);}
.hv2home .tier.lead{background:var(--hh-gradient);box-shadow:0 30px 80px -30px rgba(11,30,63,.25),0 80px 120px -60px rgba(91,79,233,.22);}
.hv2home .flagpop{background:#fff;color:var(--hh-blue);}
.hv2home .tlist li::before{background:var(--hh-teal);}
.hv2home .tier.lead .tlist li::before{background:#fff;}

/* ===== how-it-works on dark — .dark already turns h2/h3 white and mutes
   .lede/.eyebrow globally (site.css); hv2-step paragraphs need the same
   treatment since they're not headings. ===== */
.dark .hv2-step p{color:rgba(255,255,255,.7);}
.dark .hv2-step-n{box-shadow:0 8px 24px -8px rgba(91,79,233,.55);}
/* .dark itself is still the pre-hv2 site.css treatment (solid --ink plus
   an old aqua/deep-blue glow blob) — swap in the hv2 atmo-dark background
   so this band matches the rest of the redesign's palette instead of the
   old one. */
.hv2home .dark{background:var(--hv-atmo-dark);}
.hv2home .dark::before{content:none;}

/* ===== calendar mock — colour/shadow only ===== */
.hv2home .calcard{box-shadow:var(--hh-shadow-premium);}
.hv2home .cday.free{background:rgba(91,79,233,.1);color:var(--hh-teal);}
.hv2home .cday.pick{background:var(--hh-gradient);color:#fff;}
.hv2home .slots span.on{background:var(--hh-gradient);border-color:transparent;color:#fff;}