/* ============================================================
   HAXOR — v3 Product-page layer
   Extends styles/v3-system.css (load AFTER it). Everything is
   scoped under `.page`, reusing the same tokens (--bg, --surface,
   --accent, --hair, --muted …). This adds only the few components
   the flagship page did not already provide: product hero status,
   a numbered spec list, an engagement-step strip, capability chips,
   and a large lede. Do NOT duplicate tokens here — they live in
   v3-system.css. Light + dark come for free via those tokens.
   ============================================================ */

/* logo: kill the legacy main.css `.logo::after` slash — the v3 markup
   already provides `HAXOR<b>/</b>`, so without this it renders `HAXOR//`.
   Match the flagship's single-slash logo. */
.page .logo::after{content:none;margin:0}

/* product status pill (hero) — sits on the dark cinematic hero */
.page .prod-status{display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:#9FB1AC;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 12px}
.page .prod-status .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--accent);animation:hxpulse 2.4s infinite}
.page .prod-status b{color:#EAF3F0;font-weight:600}

/* large lede paragraph for section intros */
.page .lede{font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.55;color:var(--text);
  max-width:60ch;margin:0;letter-spacing:-.015em;text-wrap:pretty}
.page .lede.muted{color:var(--muted)}
.page .lede + .lede{margin-top:1.2rem}

/* capability chips */
.page .tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.page .tagrow span{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:6px 11px;border:1px solid var(--hair);border-radius:999px;background:var(--surface)}

/* numbered spec list (What it is / Why it exists) */
.page .spec-list{border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:var(--surface)}
.page .spec{display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:start;
  padding:24px 26px;border-bottom:1px solid var(--hair);transition:background .25s}
.page .spec:last-child{border-bottom:0}
.page .spec:hover{background:var(--bg-2)}
.page .spec .sn{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--accent);
  text-transform:uppercase;padding-top:3px}
.page .spec h3{font-size:1.08rem;font-weight:600;letter-spacing:-.015em;margin:0 0 .35rem;line-height:1.2}
.page .spec p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55;max-width:64ch}

/* engagement steps strip */
.page .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:var(--surface)}
.page .steps > div{padding:26px 22px;border-right:1px solid var(--hair);transition:background .3s}
.page .steps > div:last-child{border-right:0}
.page .steps > div:hover{background:var(--bg-2)}
.page .steps .sn{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
.page .steps h4{margin:14px 0 6px;font-size:1.02rem;letter-spacing:-.01em}
.page .steps p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.5}

/* manifesto-style pull line */
.page .pull{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:56px 0;text-align:center}
.page .pull p{font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.12;letter-spacing:-.03em;font-weight:700;
  max-width:24ch;margin:0 auto;text-wrap:balance}
.page .pull .accent{color:var(--accent)}
.page .pull .attr{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-top:22px;font-weight:400}

/* product hero: single-column lean variant reuse of .hero-in when no readout on mobile */
@media (max-width:900px){
  .page .steps{grid-template-columns:1fr}
  .page .steps > div{border-right:0;border-bottom:1px solid var(--hair)}
  .page .steps > div:last-child{border-bottom:0}
  .page .spec{grid-template-columns:1fr;gap:8px}
}