/* ============================================================
   Homepage hero — dark-blue gradient showcase section + LIGHT app-faithful
   product panel (auto-advancing 5-stage journey). Built only from tokens.
   Everything scoped under .hx-hero; enqueued front-page only.
   Manager decision 2026-07-13: header = dark showcase; panel stays light.
   ============================================================ */
.hx-hero{background:var(--grad-hero);background-attachment:fixed;padding:clamp(28px,5vw,80px) var(--gutter)}
.hx-wrap{max-width:var(--container-wide);margin:0 auto;display:grid;grid-template-columns:1fr 1.18fr;gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:920px){.hx-wrap{grid-template-columns:1fr;gap:34px}}

/* ---- left copy (on dark) ---- */
.hx-eyebrow{display:inline-block;font-size:var(--t-caption);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c-eyebrow-dark);background:rgba(125,211,252,.12);border:1px solid rgba(125,211,252,.22);padding:7px 14px;border-radius:var(--r-full);margin-bottom:var(--sp-4)}
.hx-h1{font-size:var(--t-display);line-height:var(--lh-tight);letter-spacing:-.02em;color:var(--c-on-dark);font-weight:800;margin:0 0 var(--sp-4)}
.hx-hl{color:var(--c-eyebrow-dark)}
.hx-sub{font-size:var(--t-body-lg);color:var(--c-on-dark-muted);max-width:34ch;margin:0 0 var(--sp-6)}
.hx-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.hx-btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:600;font-size:var(--t-body);min-height:52px;padding:0 26px;border-radius:var(--r-full);cursor:pointer;border:1.5px solid transparent;text-decoration:none;transition:transform var(--dur-1) var(--ease),background var(--dur-2),border-color var(--dur-2)}
.hx-btn--p{background:var(--c-on-dark);color:var(--c-heading);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.hx-btn--p:hover{transform:translateY(-1px)}
.hx-btn--g{background:rgba(255,255,255,.06);color:var(--c-on-dark);border-color:rgba(255,255,255,.4)}
.hx-btn--g:hover{border-color:var(--c-on-dark);background:rgba(255,255,255,.1)}
.hx-btn:focus-visible{outline:2px solid var(--c-focus-on-dark);outline-offset:2px}
.hx-ticks{list-style:none;margin:0;padding:0;display:flex;gap:var(--sp-6);flex-wrap:wrap;font-size:var(--t-small);color:var(--c-on-dark-muted);font-weight:500}
.hx-ticks li{display:inline-flex;align-items:center;gap:7px}
.hx-ticks svg,.hx-ticks .icon{width:15px;height:15px;color:var(--node-reviewed-ondark)}

/* ---- panel (LIGHT, app-faithful) ---- */
.hx-panelwrap{min-width:0}
.hx-panel{background:var(--s-page);border-radius:var(--r-xl);overflow:hidden;border:1px solid rgba(255,255,255,.5);box-shadow:0 44px 84px -26px rgba(0,0,0,.55),0 14px 36px rgba(6,26,44,.34)}
.hx-undercap{text-align:center;font-size:var(--t-caption);color:var(--c-on-dark-muted);margin:15px 2px 0;font-weight:400}
/* Was a hard-coded rgba(255,255,255,.42) — 3.12:1, and fainter than --c-on-dark-faint,
   whose own comment restricts it to LARGE text or decoration. This is 12px caption text,
   so it takes --c-on-dark-muted like every other small string on a dark surface. */
.hx-chrome{display:flex;align-items:center;gap:var(--sp-2);padding:12px 15px;background:var(--s-sunken);border-bottom:1px solid var(--c-border)}
.hx-dot{width:11px;height:11px;border-radius:50%}
.hx-dot:nth-child(1){background:#FF5F57}.hx-dot:nth-child(2){background:#FEBC2E}.hx-dot:nth-child(3){background:#28C840}
.hx-addr{margin:0 auto;display:inline-flex;align-items:center;gap:7px;background:var(--s-page);border:1px solid var(--c-border);border-radius:var(--r-full);padding:4px 15px;font-size:12.5px;font-weight:500;color:var(--c-heading)}
.hx-addr svg{width:11px;height:11px;color:var(--c-muted)}.hx-addr b{font-weight:600}
.hx-tabs{display:flex;background:var(--s-page);border-bottom:1px solid var(--c-border);padding:0 6px}
.hx-tab{flex:1;position:relative;text-align:center;font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--c-tab-idle);padding:11px 3px;cursor:pointer;background:none;border:0;font-family:inherit;transition:color var(--dur-3)}
.hx-tab .hx-n{opacity:.6;margin-right:3px}
.hx-tab.is-done{color:var(--c-body);font-weight:700}
.hx-tab.is-on{color:var(--c-heading);font-weight:800}
.hx-tab.is-on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;border-radius:2px;background:var(--brand-blue)}
.hx-tab:focus-visible{outline:2px solid var(--c-focus);outline-offset:-2px;border-radius:6px}
@media(max-width:460px){.hx-tab{font-size:9.5px}.hx-tab .hx-n{display:none}}
.hx-stagehd{padding:15px 18px 2px}.hx-stitle{font-size:15px;font-weight:700;color:var(--c-heading)}.hx-ssub{font-size:var(--t-caption);color:var(--c-muted);margin-top:1px}
.hx-body{position:relative;min-height:266px;padding:12px 18px 16px}
.hx-view{display:none}.hx-view.is-on{display:block;animation:hx-fade var(--dur-4) var(--ease)}
@keyframes hx-fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* scope */
.hx-boundary{position:relative;border:1.5px dashed var(--c-border-strong);border-radius:var(--r-md);padding:22px 12px 14px;margin-top:6px}
.hx-blab{position:absolute;top:-9px;left:12px;background:var(--s-page);padding:0 8px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted)}
.hx-brow{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap}
.hx-bnode{font-size:11px;font-weight:600;color:var(--c-heading);background:var(--s-page);border:1px solid var(--c-border);border-left:3px solid var(--node-incomplete);border-radius:6px;box-shadow:var(--sh-sm);padding:6px 10px}
.hx-scopes{display:flex;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-4);flex-wrap:wrap}
.hx-sc{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--c-heading);background:var(--s-page);border:1px solid var(--c-border);box-shadow:var(--sh-sm);border-radius:var(--r-full);padding:5px 12px}
.hx-sc i{width:8px;height:8px;border-radius:50%}
.hx-sc svg{width:12px;height:12px;color:var(--node-reviewed)}

/* data */
.hx-tbl{width:100%;border-collapse:collapse;font-size:12px}
.hx-tbl th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--c-muted);padding:7px 6px;border-bottom:1px solid var(--c-border)}
.hx-tbl td{padding:9px 6px;border-bottom:1px solid var(--s-sunken);color:var(--c-body);vertical-align:top}
.hx-tbl .hx-ai{color:var(--c-link);font-size:10.5px}
.hx-tier{font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:6px}
.hx-tier.t1{color:var(--c-success);background:var(--c-success-tint)}
.hx-tier.t2{color:var(--c-link);background:var(--s-bluelt)}
.hx-tier.t3{color:var(--c-warning);background:var(--c-orange-tint)}

/* model */
.hx-mini{position:relative;height:236px;margin-top:2px;border-radius:var(--r-md);background:radial-gradient(var(--c-border-strong) 1px,transparent 1.5px) 0 0/20px 20px;background-color:var(--s-page)}
.hx-mn{position:absolute;transform:translate(-50%,-50%);width:104px;background:var(--s-page);border:1px solid var(--c-border);border-left:4px solid var(--node-reviewed);border-radius:7px;box-shadow:var(--sh-sm);padding:6px 8px;z-index:2}
.hx-mn .hx-nm{font-size:11px;font-weight:700;color:var(--c-link)}
.hx-mn .hx-scp{font-size:8px;font-weight:700;text-transform:uppercase;color:var(--c-muted);margin-top:1px}
.hx-mn .hx-vv{font-size:9.5px;color:var(--c-body);margin-top:3px}.hx-mn .hx-vv b{color:var(--c-heading)}
.hx-conn{position:absolute;background:#A9B2BD;z-index:1}
.hx-conn.h{height:1.7px;transform:translateY(-50%)}.hx-conn.v{width:1.7px;transform:translateX(-50%)}
.hx-port{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--s-page);border:1.8px solid #A9B2BD;box-sizing:border-box;z-index:3}
.hx-port.pr{right:-4px;top:50%;transform:translateY(-50%)}.hx-port.pl{left:-4px;top:50%;transform:translateY(-50%)}.hx-port.pb{bottom:-4px;left:50%;transform:translateX(-50%)}
.hx-mmetric{position:absolute;right:10px;bottom:10px;background:var(--s-page);border:1px solid var(--c-border);box-shadow:var(--sh-md);border-radius:var(--r-md);padding:6px 11px;text-align:right;z-index:4}
.hx-mmetric .hx-v{font-size:15px;font-weight:800;color:var(--c-heading)}.hx-mmetric .hx-v b{color:var(--node-reviewed)}.hx-mmetric .hx-l{font-size:8px;font-weight:600;text-transform:uppercase;color:var(--c-muted)}

/* report */
.hx-gauge{text-align:center;padding:4px 0}
.hx-gauge .hx-big{font-size:44px;font-weight:800;color:var(--c-heading);letter-spacing:-.03em;line-height:1}.hx-gauge .hx-big b{font-size:20px;color:var(--c-muted)}
.hx-gauge .hx-gsub{font-size:11.5px;color:var(--c-muted)}
.hx-grow{display:grid;grid-template-columns:118px 1fr 40px;align-items:center;gap:10px;margin:7px 0;font-size:12px;color:var(--c-body)}
.hx-grow .hx-gb{height:7px;background:var(--s-sunken);border-radius:var(--r-full);overflow:hidden}
.hx-grow .hx-gb i{display:block;height:100%;border-radius:var(--r-full);width:0;transition:width .9s var(--ease);transition-delay:calc(.35s + var(--i,0)*.18s)}
.hx-grow.ok .hx-gb i{background:var(--node-reviewed)}.hx-grow.mid .hx-gb i{background:var(--c-orange)}
.hx-grow .hx-pct{text-align:right;font-weight:700}.hx-grow.ok .hx-pct{color:var(--node-reviewed)}.hx-grow.mid .hx-pct{color:var(--c-warning)}

/* verify */
.hx-vchk{list-style:none;margin:2px 0 0;padding:0}
.hx-vchk li{display:flex;align-items:center;gap:11px;padding:9px 2px;font-size:13px;color:var(--c-body);border-bottom:1px solid var(--s-sunken);opacity:.5;transition:opacity var(--dur-4)}
.hx-vchk li.is-done{opacity:1;color:var(--c-heading);font-weight:600}
.hx-vchk .hx-ic{width:21px;height:21px;border-radius:50%;border:2px solid var(--c-border-strong);flex:none;display:flex;align-items:center;justify-content:center;transition:var(--dur-3)}
.hx-vchk li.is-done .hx-ic{background:var(--node-reviewed);border-color:var(--node-reviewed)}
.hx-vchk .hx-ic svg{width:12px;height:12px;color:#fff;opacity:0}.hx-vchk li.is-done .hx-ic svg{opacity:1}
.hx-doors{margin-top:12px;background:var(--c-success-tint);border:1px solid #BDE8C9;border-radius:var(--r-md);padding:13px 15px;opacity:0;transform:translateY(8px);transition:var(--dur-5) var(--ease)}
.hx-doors.is-show{opacity:1;transform:none}
.hx-doors .hx-dh{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--node-reviewed)}
.hx-doors .hx-dh svg{width:19px;height:19px;flex:none}
.hx-doors .hx-du{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted);margin:8px 0 7px}
.hx-uc{display:flex;flex-wrap:wrap;gap:6px}
.hx-chip{font-size:11.5px;font-weight:600;color:var(--c-heading);background:var(--s-page);border:1px solid var(--c-border);box-shadow:var(--sh-sm);border-radius:var(--r-full);padding:5px 11px;display:inline-flex;gap:5px;align-items:center}
.hx-chip svg{width:12px;height:12px;color:var(--node-reviewed)}
.hx-fine{font-size:10px;color:var(--c-muted);margin-top:8px}
.hx-vgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.hx-vgrid .hx-vchk li{padding:8px 2px}
.hx-vgrid .hx-doors{margin-top:0}
@media(max-width:520px){.hx-vgrid{grid-template-columns:1fr;gap:10px}}

/* ---- per-stage build-up animations ---- */
@keyframes hx-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes hx-rowin{from{opacity:0}to{opacity:1}}
@keyframes hx-nodein{from{opacity:0;transform:translate(-50%,calc(-50% + 9px))}to{opacity:1;transform:translate(-50%,-50%)}}
.hx-view[data-s="0"].is-on .hx-boundary{animation:hx-enter var(--dur-4) var(--ease) both}
.hx-view[data-s="0"].is-on .hx-bnode{animation:hx-enter var(--dur-4) var(--ease) both;animation-delay:calc(.25s + var(--i,0)*.13s)}
.hx-view[data-s="0"].is-on .hx-brow .hx-bnode:nth-child(2){--i:1}.hx-view[data-s="0"].is-on .hx-brow .hx-bnode:nth-child(3){--i:2}
.hx-view[data-s="0"].is-on .hx-sc{animation:hx-enter var(--dur-4) var(--ease) both;animation-delay:calc(.62s + var(--i,0)*.13s)}
.hx-view[data-s="0"].is-on .hx-scopes .hx-sc:nth-child(2){--i:1}.hx-view[data-s="0"].is-on .hx-scopes .hx-sc:nth-child(3){--i:2}
.hx-view[data-s="1"].is-on tbody tr{animation:hx-rowin .45s ease both;animation-delay:calc(var(--i,0)*.16s)}
.hx-view[data-s="1"].is-on tbody tr:nth-child(2){--i:1}.hx-view[data-s="1"].is-on tbody tr:nth-child(3){--i:2}.hx-view[data-s="1"].is-on tbody tr:nth-child(4){--i:3}
.hx-view[data-s="2"].is-on .hx-mn{animation:hx-nodein var(--dur-4) var(--ease) both;animation-delay:calc(var(--i,0)*.14s)}
.hx-view[data-s="2"].is-on .hx-conn{animation:hx-rowin .5s ease both;animation-delay:.62s}
.hx-view[data-s="2"].is-on .hx-port{animation:hx-rowin var(--dur-4) ease both;animation-delay:.68s}
.hx-view[data-s="2"].is-on .hx-mmetric{animation:hx-enter var(--dur-5) var(--ease) both;animation-delay:.9s}
.hx-view[data-s="3"].is-on .hx-gauge{animation:hx-enter var(--dur-4) var(--ease) both}
.hx-view[data-s="3"].is-on .hx-grow{animation:hx-rowin var(--dur-4) ease both;animation-delay:calc(.2s + var(--i,0)*.18s)}

@media(prefers-reduced-motion:reduce){
  .hx-view.is-on,.hx-view.is-on *{animation:none!important}
  .hx-grow .hx-gb i{transition:none}
  .hx-doors{transition:none}
}