/* ============================================================
   How it works — 5-stage explorer (LIGHT, app-faithful). Text-left + card-right
   per stage, tabbed, auto-advancing. Tokens-only; scoped under .hw. Front-page.
   ============================================================ */
.hw{max-width:var(--container);margin:0 auto}
.hw-head{text-align:center;margin-bottom:var(--sp-8)}
.hw-eyebrow{display:inline-block;font-size:var(--t-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-link);margin-bottom:var(--sp-2)}
.hw-title{font-size:var(--t-h2);line-height:var(--lh-heading);letter-spacing:-.01em;color:var(--c-heading);font-weight:800;margin:0}
.hw-title .hw-hl{color:var(--c-link)}
.hw-sub{font-size:var(--t-body);color:var(--c-muted);margin:var(--sp-2) 0 0}

.hw-tabs{display:flex;background:var(--s-sunken);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:5px;gap:2px;margin-bottom:var(--sp-8)}
.hw-tab{flex:1;position:relative;text-align:center;padding:10px 6px;border-radius:var(--r-md);cursor:pointer;background:none;border:0;font-family:inherit}
.hw-tab .hw-n{display:block;font-size:11px;font-weight:700;color:var(--brand-blue);opacity:.65}
.hw-tab .hw-l{display:block;font-size:12.5px;font-weight:600;color:var(--c-tab-idle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-tab.is-on{background:var(--s-page);box-shadow:var(--sh-sm)}
.hw-tab.is-on .hw-l{color:var(--c-heading);font-weight:700}
.hw-tab.is-done .hw-l{color:var(--c-body);font-weight:700}
.hw-tab:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
@media(max-width:640px){.hw-tabs{overflow-x:auto}.hw-tab{min-width:104px}.hw-tab .hw-l{font-size:11px}}

.hw-stages{position:relative}
.hw-stage{display:none;grid-template-columns:1fr 1.12fr;gap:clamp(24px,4vw,56px);align-items:center}
.hw-stage.is-on{display:grid;animation:hw-fade var(--dur-4) var(--ease)}
@keyframes hw-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:820px){.hw-stage{grid-template-columns:1fr;gap:var(--sp-6)}}
.hw-kick{font-size:var(--t-caption);font-weight:700;letter-spacing:.06em;color:var(--c-link);margin-bottom:var(--sp-3)}
.hw-h2{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.02em;color:var(--c-heading);font-weight:800;margin-bottom:var(--sp-3)}
.hw-h2 .hw-hl{color:var(--c-link)}
.hw-lead{font-size:var(--t-body);color:var(--c-body);margin-bottom:var(--sp-4);max-width:46ch}
.hw-blist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.hw-blist li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:14px}
.hw-blist svg{width:18px;height:18px;color:var(--node-reviewed);margin-top:2px}
.hw-blist b{color:var(--c-heading)}.hw-blist span{color:var(--c-body)}

/* card */
.hw-card{background:var(--s-page);border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden}
.hw-chead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;border-bottom:1px solid var(--c-border)}
.hw-chead b{font-size:14px;color:var(--c-heading)}
.hw-badge{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:var(--r-full);background:var(--s-bluelt);color:var(--c-link)}
.hw-badge.warn{background:var(--c-orange-tint);color:var(--c-warning)}
.hw-cbody{padding:16px 18px}
.hw-lbl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--c-muted);margin:0 0 8px}
.hw-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.hw-opt{font-size:12.5px;font-weight:600;color:var(--c-body);background:var(--s-page);border:1.5px solid var(--c-border);border-radius:var(--r-md);padding:7px 13px}
.hw-opt.sel{border-color:var(--brand-blue);color:var(--c-link)}
.hw-prow{display:flex;justify-content:space-between;font-size:12.5px;margin:6px 0}.hw-prow b{color:var(--c-heading)}.hw-prow .hw-st{color:var(--c-link);font-weight:600}
.hw-pbar{height:7px;background:var(--s-sunken);border-radius:var(--r-full);overflow:hidden}.hw-pbar i{display:block;height:100%;background:var(--brand-blue);border-radius:var(--r-full);width:20%}
.hw-note{margin-top:14px;background:var(--s-bluelt);border-radius:var(--r-md);padding:11px 13px;font-size:12.5px;color:var(--c-body)}.hw-note b{color:var(--c-heading)}
.hw-note.ai{background:var(--c-ai-tint)}.hw-note.ai b{color:var(--c-ai)}
.hw-note.warn{background:var(--c-orange-tint)}.hw-note.warn b{color:var(--c-warning)}
/* data table */
.hw-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.hw-tbl th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted);padding:6px 8px;border-bottom:1px solid var(--c-border)}
.hw-tbl td{padding:9px 8px;border-bottom:1px solid var(--s-sunken);vertical-align:top;color:var(--c-body)}
.hw-tbl .hw-src{font-size:11px;color:var(--c-link)}
.hw-q{font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px}
.hw-q.p1{background:var(--c-success-tint);color:var(--c-success)}.hw-q.p2{background:var(--s-bluelt);color:var(--c-link)}.hw-q.p3{background:var(--c-orange-tint);color:var(--c-warning)}
/* model mini */
.hw-mini{position:relative;height:236px;margin: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)}
.hw-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}
.hw-mn .hw-nm{font-size:11px;font-weight:700;color:var(--c-link)}.hw-mn .hw-scp{font-size:8px;font-weight:700;text-transform:uppercase;color:var(--c-muted);margin-top:1px}
.hw-mn .hw-vv{font-size:9.5px;color:var(--c-body);margin-top:3px}.hw-mn .hw-vv b{color:var(--c-heading)}
.hw-conn{position:absolute;background:#A9B2BD;z-index:1}.hw-conn.h{height:1.7px;transform:translateY(-50%)}.hw-conn.v{width:1.7px;transform:translateX(-50%)}
.hw-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}
.hw-port.pr{right:-4px;top:50%;transform:translateY(-50%)}.hw-port.pl{left:-4px;top:50%;transform:translateY(-50%)}.hw-port.pb{bottom:-4px;left:50%;transform:translateX(-50%)}
.hw-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}
.hw-mmetric .hw-v{font-size:15px;font-weight:800;color:var(--c-heading)}.hw-mmetric .hw-v b{color:var(--node-reviewed)}.hw-mmetric .hw-l{font-size:8px;font-weight:600;text-transform:uppercase;color:var(--c-muted)}
/* report gauge */
.hw-gauge{text-align:center;margin-bottom:10px}.hw-gauge .hw-big{font-size:46px;font-weight:800;color:var(--c-heading);letter-spacing:-.03em;line-height:1}.hw-gauge .hw-big b{font-size:22px;color:var(--c-muted)}.hw-gauge .hw-gsub{font-size:12px;color:var(--c-muted)}
.hw-grow{display:grid;grid-template-columns:120px 1fr 42px;align-items:center;gap:10px;margin:8px 0;font-size:12.5px;color:var(--c-body)}
.hw-grow .hw-gb{height:7px;background:var(--s-sunken);border-radius:var(--r-full);overflow:hidden}.hw-grow .hw-gb i{display:block;height:100%;border-radius:var(--r-full);width:0;transition:width 1s var(--ease)}
.hw-grow.ok .hw-gb i{background:var(--node-reviewed)}.hw-grow.mid .hw-gb i{background:var(--c-orange)}
.hw-grow .hw-pct{text-align:right;font-weight:700}.hw-grow.ok .hw-pct{color:var(--node-reviewed)}.hw-grow.mid .hw-pct{color:var(--c-warning)}
/* verify */
.hw-vchk{list-style:none;margin:0;padding:0}
.hw-vchk li{display:flex;align-items:center;gap:11px;padding:10px 4px;font-size:13.5px;color:var(--c-body);border-bottom:1px solid var(--s-sunken);opacity:.5;transition:opacity var(--dur-4)}
.hw-vchk li.is-done{opacity:1;color:var(--c-heading);font-weight:600}
.hw-vchk .hw-ic{width:22px;height:22px;border-radius:50%;border:2px solid var(--c-border-strong);flex:none;display:flex;align-items:center;justify-content:center;transition:var(--dur-3)}
.hw-vchk li.is-done .hw-ic{background:var(--node-reviewed);border-color:var(--node-reviewed)}.hw-vchk .hw-ic svg{width:13px;height:13px;color:#fff;opacity:0}.hw-vchk li.is-done .hw-ic svg{opacity:1}
.hw-doors{margin-top:14px;background:var(--c-success-tint);border:1px solid #BDE8C9;border-radius:var(--r-md);padding:15px 16px;opacity:0;transform:translateY(8px);transition:var(--dur-5) var(--ease)}
.hw-doors.is-show{opacity:1;transform:none}
.hw-doors .hw-dh{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--node-reviewed);margin-bottom:4px}
.hw-doors .hw-dh svg{width:18px;height:18px;flex:none}
.hw-doors .hw-du{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted);margin:9px 0 8px}
.hw-uc{display:flex;flex-wrap:wrap;gap:7px}
.hw-chip{font-size:12px;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:6px 12px;display:inline-flex;gap:5px;align-items:center}
.hw-chip svg{width:13px;height:13px;color:var(--node-reviewed)}
.hw-fine{font-size:10.5px;color:var(--c-muted);margin-top:9px}

@media(prefers-reduced-motion:reduce){.hw-stage.is-on{animation:none}.hw-grow .hw-gb i{transition:none}.hw-doors{transition:none}.hw-vchk li{transition:none}}