/* ============================================================
   Workflow OS — Homepage v2 (preview)
   ------------------------------------------------------------
   Link AFTER styles.css + redesign.css + theme.css + home-redesign.css.
   Token-only (Phase-3 --wos-* / :root). Adds the buyer-path
   homepage: product-cockpit hero (light), "what stays the same",
   "what we capture", signal→closed pipeline, "what staff use",
   pilot model (included / not included), outcomes, CTA.
   Default LIGHT. Dark only via explicit toggle. Motion optional;
   content is never hidden by default (reveal is transform-only).
   ============================================================ */

/* ─── Nav: lead with the "Workflow OS by OmniVantrex" lockup (sizing in theme.css) ── */
.sitehead .brandlink { gap: 0; }

/* ─── Credibility strip + flow-trace primitives (self-contained; no
   dependency on redesign.css so this file can ship on production index) ─── */
.cred-strip {
  display: block; background: var(--a-subtle);
  border-top: 1px solid var(--b); border-bottom: 1px solid var(--b);
  padding: 18px var(--pad-x); margin: 0; text-align: left;
}
.cred-strip__inner {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-lg);
}
.cred-strip__item {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  letter-spacing: -0.003em; color: var(--m);
}
.cred-strip__sep {
  width: 6px; height: 6px; border-radius: 2px;
  background: var(--a); opacity: 0.75; flex-shrink: 0;
}
@media (max-width: 640px) {
  .cred-strip__inner { flex-direction: column; gap: var(--sp-sm); }
  .cred-strip__sep { display: none; }
}
.rd-trace { overflow: visible; display: block; }
.rd-trace .rd-trace__base {
  stroke: var(--wos-trace-stroke); stroke-opacity: var(--wos-trace-opacity);
  stroke-width: 1.2; fill: none; stroke-linecap: round;
}
.rd-trace .rd-trace__pulse {
  fill: none; stroke: var(--wos-accent); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 6 34; animation: flowPulse 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rd-trace .rd-trace__pulse { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   1 · HERO — product cockpit lead (light)
   Desktop: editorial headline + the full staff cockpit, shown
   light, so a pharmacist sees the product in the first screen.
   Mobile / iPad: a static single-task card stack (no scroll, no
   heavy mockup). Both render in HTML — JS is never required.
   ════════════════════════════════════════════════════════════ */
.hp-hero {
  background: var(--wos-canvas);
  color: var(--wos-text-primary);
  padding: clamp(40px, 6vw, 80px) 0 clamp(44px, 6vw, 72px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hp-hero__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 46% at 84% 8%, rgba(46,74,102,0.07) 0%, transparent 60%),
    radial-gradient(46% 56% at 4% 96%, rgba(46,74,102,0.05) 0%, transparent 60%);
}
.hp-hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(46,74,102,0.10) 1px, transparent 1.4px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
  opacity: 0.45;
}
html[data-theme="dark"] .hp-hero__bg {
  background:
    radial-gradient(58% 46% at 84% 8%, rgba(125,163,204,0.13) 0%, transparent 62%),
    radial-gradient(46% 56% at 4% 96%, rgba(125,163,204,0.07) 0%, transparent 60%);
}
html[data-theme="dark"] .hp-hero__bg::before {
  background-image: radial-gradient(rgba(125,163,204,0.10) 1px, transparent 1.4px);
}

.hp-hero__intro { max-width: 820px; margin: 0 0 clamp(32px, 4vw, 52px); }
.hp-kicker {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 13px; letter-spacing: 0.01em;
  color: var(--wos-text-tertiary); margin: 0 0 var(--sp-lg);
}
.hp-kicker__wm {
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 15px;
  letter-spacing: -0.01em; color: var(--wos-accent);
  display: inline-flex; align-items: center; gap: 9px;
}
.hp-kicker__wm::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--wos-accent); flex-shrink: 0;
}
.hp-kicker__sep { width: 1px; height: 13px; background: var(--wos-border-strong); opacity: 0.7; }
.hp-hero__title {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(38px, 5.4vw, 66px); line-height: 1.04;
  letter-spacing: -0.026em; color: var(--wos-text-primary);
  margin: 0 0 var(--sp-lg); max-width: 17ch; text-wrap: balance;
}
.hp-hero__title em { font-style: normal; color: var(--wos-accent); }
.hp-hero__lead {
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55;
  color: var(--wos-text-secondary); max-width: 60ch; margin: 0 0 var(--sp-xl);
}
.hp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-md); margin: 0 0 var(--sp-xl); }
.hp-actions .btn { padding: 13px 30px; font-size: 15px; white-space: nowrap; }
.hp-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  padding-top: var(--sp-lg); border-top: 1px solid var(--wos-border);
  width: 100%; max-width: 560px;
}
.hp-trust__item {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--wos-text-secondary);
}
.hp-trust__item::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--wos-accent); opacity: 0.85; flex-shrink: 0;
}

/* product frame (the cockpit, light) */
.hp-hero__product { position: relative; }
.hp-hero__producthead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-md); flex-wrap: wrap; margin: 0 0 var(--sp-md);
}
.hp-prodcap {
  font-size: 12px; letter-spacing: 0.04em; color: var(--wos-text-tertiary);
  text-transform: uppercase; font-weight: 500;
}
.rd-demo-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--wos-text-tertiary);
  border: 1px solid var(--wos-border); border-radius: var(--r-pill);
  padding: 6px 13px; white-space: nowrap; background: var(--wos-canvas);
}
.rd-demo-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--wos-warn); flex-shrink: 0;
}
.hp-hero .cockpit-scroll {
  overflow-x: auto; max-width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

/* Mobile / iPad static card stack — no scroll, no 960px mockup */
.hp-cardstack { display: none; max-width: 460px; }
.hp-cardstack .rd-flowcard {
  position: relative; width: 100%; margin: 0;
  background: var(--wos-surface); border: 1px solid var(--wos-border-strong);
  border-radius: var(--r-md); padding: 16px 18px 16px 22px;
  box-shadow: var(--wos-shadow-md); font-family: 'Inter', sans-serif;
}
.hp-cardstack .rd-flowcard__stripe {
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 2px; background: var(--wos-urgent);
}
.hp-cardstack .rd-flowcard__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 7px;
}
.hp-cardstack .rd-flowcard__title {
  font-size: 14px; font-weight: 500; color: var(--wos-text-primary);
  display: flex; align-items: center; gap: 7px; letter-spacing: -0.005em;
}
.hp-cardstack .rd-flowcard__overdue { font-size: 11px; font-weight: 500; color: var(--wos-urgent); white-space: nowrap; }
.hp-cardstack .rd-flowcard__meta {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  color: var(--wos-text-tertiary); margin-bottom: 11px;
}
.hp-cardstack .rd-flowcard__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-cardstack .mf-chip { font-size: 10.5px; font-weight: 500; padding: 3px 7px; border-radius: 4px; }
.hp-cardstack .mf-chip--now { background: var(--wos-urgent); color: #FBFCFD; }
.hp-cardstack .mf-chip--warn { background: var(--wos-warn); color: var(--t); border: 1px solid transparent; }
.hp-cardstack .rd-flowlink { display: flex; flex-direction: column; align-items: center; margin: 2px 0; }
.hp-cardstack .rd-flowlink .rd-trace { height: 34px; width: 12px; }
.hp-cardstack .rd-resolved { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.hp-cardstack .rd-resolved__chip {
  background: var(--wos-ok); color: #FBFCFD;
  font-size: 12px; font-weight: 500; padding: 7px 14px; border-radius: var(--r-sm);
}
.hp-cardstack .rd-resolved__sub { font-size: 11px; color: var(--wos-text-tertiary); font-family: 'JetBrains Mono', monospace; }

@media (max-width: 860px) {
  .hp-hero__product { display: none; }
  .hp-cardstack { display: block; }
  .hp-hero .cockpit-scroll { -webkit-mask-image: none; mask-image: none; }
}
/* ════════════════════════════════════════════════════════════
   Shared section header (buyer-path sections)
   ════════════════════════════════════════════════════════════ */
.hp-section { padding: clamp(52px, 6.5vw, 88px) 0; }
.hp-section--alt { background: var(--a-subtle); }
.hp-head { max-width: 760px; margin: 0 0 var(--sp-2xl); }
.hp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wos-text-tertiary); margin: 0 0 var(--sp-md);
}
.hp-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--wos-accent); flex-shrink: 0;
}
.hp-head h2 {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12;
  letter-spacing: -0.018em; color: var(--wos-text-primary); margin: 0;
}
.hp-head h2::before { display: none; }
.hp-head .hp-sub {
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55;
  color: var(--wos-text-secondary); margin: var(--sp-md) 0 0; max-width: 62ch;
}

/* ════════════════════════════════════════════════════════════
   2 · WHAT STAYS THE SAME (reassurance ledger)
   ════════════════════════════════════════════════════════════ */
.hp-stays {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 var(--sp-2xl); border-top: 1px solid var(--wos-border);
  list-style: none; margin: 0; padding: 0;
}
.hp-stays li {
  margin: 0; padding: 15px 0 15px 18px; position: relative;
  border-bottom: 1px solid var(--wos-border);
  font-size: 15px; font-weight: 500; color: var(--wos-text-primary);
}
.hp-stays li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 8px; height: 1.5px; margin-top: -0.75px;
  background: var(--wos-accent); opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════
   3 · WHAT WORKFLOW OS CAPTURES (cards ⇄ ledger via tweak)
   ════════════════════════════════════════════════════════════ */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
.cap-card {
  padding: var(--sp-lg) var(--sp-lg) calc(var(--sp-lg) + 2px);
  background: var(--wos-surface); border: 1px solid var(--wos-border);
  border-radius: var(--r-md);
  transition: box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
.cap-card:hover { border-color: var(--wos-border-strong); box-shadow: var(--wos-shadow-md); }
.cap-card strong {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 16px;
  letter-spacing: -0.005em; color: var(--wos-text-primary); margin-bottom: var(--sp-sm);
}
.cap-card strong::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--wos-accent); flex-shrink: 0;
}
.cap-card span { display: block; font-size: 14px; line-height: 1.55; color: var(--wos-text-secondary); }

@media (max-width: 880px) {
  .cap-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cap-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   4 · HOW IT WORKS — signal → task → owner → next action → closed
   ════════════════════════════════════════════════════════════ */
.pipe {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  border: 1px solid var(--wos-border); border-radius: var(--r-lg);
  overflow: hidden; background: var(--wos-surface);
}
.pipe__stage {
  position: relative; padding: var(--sp-lg) var(--sp-lg) calc(var(--sp-lg) + 2px);
  border-right: 1px solid var(--wos-border);
}
.pipe__stage:last-child { border-right: none; }
.pipe__num {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--wos-text-tertiary); letter-spacing: 0.04em; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.pipe__num::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--wos-accent); flex-shrink: 0;
}
.pipe__name {
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 17px;
  letter-spacing: -0.008em; color: var(--wos-text-primary); margin: 0 0 6px;
}
.pipe__desc { font-size: 13px; line-height: 1.5; color: var(--wos-text-secondary); margin: 0; max-width: none; }
.pipe__arrow {
  position: absolute; right: -7px; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--wos-accent); background: var(--wos-canvas); border-radius: 50%;
}
.pipe__stage:last-child .pipe__arrow { display: none; }
@media (max-width: 900px) {
  .pipe { grid-template-columns: 1fr; }
  .pipe__stage { border-right: none; border-bottom: 1px solid var(--wos-border); }
  .pipe__stage:last-child { border-bottom: none; }
  .pipe__arrow { right: auto; left: 50%; top: auto; bottom: -7px; transform: translateX(-50%) rotate(90deg); }
}

/* ════════════════════════════════════════════════════════════
   5 · WHAT STAFF USE (module cards)
   ════════════════════════════════════════════════════════════ */
.staff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
.staff-card {
  padding: var(--sp-lg) var(--sp-lg) calc(var(--sp-lg) + 2px);
  background: var(--wos-surface); border: 1px solid var(--wos-border);
  border-radius: var(--r-md);
  transition: box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
.staff-card:hover { border-color: var(--wos-border-strong); box-shadow: var(--wos-shadow-md); }
.staff-card strong {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 16px;
  letter-spacing: -0.005em; color: var(--wos-text-primary); margin-bottom: var(--sp-sm);
}
.staff-card strong::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--wos-accent); flex-shrink: 0;
}
.staff-card span { display: block; font-size: 14px; line-height: 1.55; color: var(--wos-text-secondary); }
@media (max-width: 880px) { .staff-grid { grid-template-columns: 1fr; } }

.hp-floorline {
  margin: var(--sp-2xl) 0 0; padding-left: 18px; position: relative;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; font-weight: 500;
  color: var(--wos-text-primary); max-width: 58ch;
}
.hp-floorline::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 1.5px; background: var(--wos-accent);
}

/* ════════════════════════════════════════════════════════════
   6 · PILOT MODEL — included / not included + risk control
   ════════════════════════════════════════════════════════════ */
.pilot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
.pilot-col {
  background: var(--wos-surface); border: 1px solid var(--wos-border);
  border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px);
}
.pilot-col__label {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 17px;
  letter-spacing: -0.008em; color: var(--wos-text-primary); margin: 0 0 var(--sp-lg);
}
.pilot-col__label::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
  background: var(--wos-accent);
}
.pilot-col--out .pilot-col__label::before { background: var(--wos-text-tertiary); border-radius: 50%; }
.pilot-list { list-style: none; margin: 0; padding: 0; }
.pilot-list li {
  position: relative; margin: 0; padding: 11px 0 11px 22px;
  font-size: 14.5px; line-height: 1.45; color: var(--wos-text-primary);
  border-bottom: 1px solid var(--wos-border);
}
.pilot-list li:last-child { border-bottom: none; }
.pilot-list li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 9px; height: 9px; border-radius: 2px; background: var(--wos-accent); opacity: 0.85;
}
.pilot-col--out .pilot-list li { color: var(--wos-text-secondary); }
.pilot-col--out .pilot-list li::before {
  width: 9px; height: 1.5px; border-radius: 0; top: 23px;
  background: var(--wos-text-tertiary); opacity: 0.8;
}
.pilot-note {
  grid-column: 1 / -1; margin: var(--sp-sm) 0 0;
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--wos-accent-subtle); border: 1px solid var(--wos-border);
  border-radius: var(--r-md); padding: 18px 22px;
}
.pilot-note__mark {
  flex-shrink: 0; width: 7px; height: 7px; border-radius: 2px;
  background: var(--wos-accent); margin-top: 7px;
}
.pilot-note p {
  margin: 0; font-size: 15px; line-height: 1.55; color: var(--wos-text-primary); max-width: none;
}
.pilot-note strong { font-weight: 600; }
@media (max-width: 760px) { .pilot-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   7 · OUTCOMES (what pharmacies gain)
   ════════════════════════════════════════════════════════════ */
.out-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
.out-card {
  padding: var(--sp-lg) var(--sp-lg) calc(var(--sp-lg) + 2px);
  background: var(--wos-surface); border: 1px solid var(--wos-border);
  border-radius: var(--r-md);
}
.out-card strong {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 16px;
  letter-spacing: -0.005em; color: var(--wos-text-primary); margin-bottom: var(--sp-sm);
}
.out-card strong::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--wos-accent); flex-shrink: 0;
}
.out-card span { display: block; font-size: 14px; line-height: 1.55; color: var(--wos-text-secondary); }
@media (max-width: 880px) { .out-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .out-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   8 · CTA band
   ════════════════════════════════════════════════════════════ */
.hp-cta { padding: clamp(48px, 6vw, 80px) 0; }
.hp-cta__inner {
  background: var(--wos-surface); border: 1px solid var(--wos-border);
  border-radius: var(--r-lg); padding: clamp(32px, 4.5vw, 56px);
  text-align: center; max-width: 760px; margin: 0 auto;
}
.hp-cta__inner h2 {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; letter-spacing: -0.018em;
  color: var(--wos-text-primary); margin: 0 0 var(--sp-md);
}
.hp-cta__inner h2::before { display: none; }
.hp-cta__inner p { margin: 0 auto var(--sp-xl); max-width: 52ch; color: var(--wos-text-secondary); font-size: 17px; }
.hp-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-md); justify-content: center; }

/* ─── Line icons (replace emoji in the cockpit + card stack) ── */
.wos-ic { width: 15px; height: 15px; flex-shrink: 0; display: inline-block; }
.wos-task-title .wos-ic { color: var(--wos-text-secondary); }
.wos-detail-head .wos-ic { width: 20px; height: 20px; color: var(--wos-accent); }
.rd-flowcard__title .wos-ic { width: 15px; height: 15px; color: var(--wos-text-secondary); }

/* ─── Preview meta note (not part of the drop-in) ─────────── */
.hp-note {
  max-width: var(--page-max); margin: 0 auto; padding: 12px var(--pad-x);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--wos-text-tertiary);
  border-bottom: 1px solid var(--b);
}
.hp-note strong { font-weight: 600; color: var(--wos-text-secondary); }
.hp-note .tag {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  border: 1px solid var(--b); border-radius: var(--r-sm); padding: 3px 8px; color: var(--m);
}