/* ============================================================
   home.css — homepage v3 ("owner-operator" redesign, 2026-07)
   Scoped: every selector is .hx- prefixed. Loaded ONLY by
   index.html, after brand.css + style.css. Marketing sections
   use brand tokens (theme-aware); product frames (.hxf-*) use
   fixed dark values — they depict the product UI, which is
   dark, exactly like a screenshot would.
   ============================================================ */

/* ---------- shared section scaffolding ---------- */
/* Phase 1 (base44-inspired): viewport-scale type, keynote whitespace, loud amber. */
.hx-section { padding: clamp(88px, 11vw, 156px) 0; }
.hx-section--tight { padding: 72px 0; }
.hx-container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.hx-container--narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }

.hx-kicker {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 20px;
}
.hx-h1 {
  font-family: var(--font-body);
  font-weight: 850;
  font-size: clamp(2.9rem, 8.6vw, 6.75rem);
  line-height: 0.98;
  letter-spacing: -0.042em;
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}
.hx-h2 {
  font-family: var(--font-body);
  font-weight: 820;
  font-size: clamp(2.25rem, 5.4vw, 3.85rem);
  line-height: 1.0;
  letter-spacing: -0.032em;
  color: var(--color-text);
  margin: 0 0 18px;
  text-wrap: balance;
}
.hx-h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0 0 8px;
}
.hx-lead {
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
}
.hx-body { font-size: 1rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0; }
.hx-center { text-align: center; }
.hx-em { color: var(--color-text); font-style: normal; }

/* ---------- buttons (no sheen, structural radii) ---------- */
.hx-btn,
.hx-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1;
  padding: 15px 26px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
  cursor: pointer;
}
.hx-btn {
  background: var(--color-accent);
  color: var(--color-text-on-amber);
  border: 1px solid transparent;
}
.hx-btn:hover { background: var(--color-accent-hover); transform: translateY(-1px); color: var(--color-text-on-amber); }
.hx-btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.hx-btn-ghost:hover { border-color: var(--color-text-secondary); transform: translateY(-1px); }
/* Link-state guard: brand.css `a:visited`/`a:hover` (0,1,1) would otherwise
   recolor CTA text — amber-on-amber for visited .hx-btn (same failure mode the
   style.css:7924 block pins for the legacy amber buttons). */
.hx-btn:link, .hx-btn:visited, .hx-btn:active, .hx-btn:focus { color: var(--color-text-on-amber); }
.hx-btn-ghost:link, .hx-btn-ghost:visited, .hx-btn-ghost:active, .hx-btn-ghost:focus, .hx-btn-ghost:hover { color: var(--color-text); }
.hx-final .hx-btn-ghost:link, .hx-final .hx-btn-ghost:visited, .hx-final .hx-btn-ghost:active, .hx-final .hx-btn-ghost:focus, .hx-final .hx-btn-ghost:hover { color: #F2EDE4; }
.hx-btn--lg, .hx-btn-ghost--lg { padding: 21px 42px; font-size: 1.1rem; border-radius: 12px; }

/* Loud full-bleed amber "beat" divider between major sections (base44's orange bars) */
.hx-beat { border: 0; height: 6px; margin: 0; background: var(--color-accent); }

/* ---------- icons ---------- */
.hx-ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hx-ic--accent { color: var(--color-accent); }

/* ---------- reveal (self-contained; no dependency on style.css) ---------- */
[data-hx-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 550ms cubic-bezier(0.16,1,0.3,1), transform 550ms cubic-bezier(0.16,1,0.3,1); }
[data-hx-reveal].hx-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-hx-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hx-hero { padding: clamp(124px, 15vw, 204px) 0 0; text-align: center; }
.hx-hero .hx-kicker { margin-bottom: 26px; }
.hx-hero__sub {
  max-width: 660px;
  margin: 30px auto 0;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.hx-hero__ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }
.hx-hero__frame-wrap { margin-top: clamp(64px, 8vw, 104px); position: relative; }
.hx-frame-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 12px;
}

/* ============================================================
   PRODUCT FRAMES (.hxf-*) — fixed dark, depicting the real UI
   ============================================================ */
.hxf {
  background: #131110;
  border: 1px solid #2E2B27;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(232, 165, 75, 0.18);
  overflow: hidden;
  text-align: left;
  font-size: 13px;
  line-height: 1.45;
  color: #F2EDE4;
}
.hxf * { box-sizing: border-box; }
.hxf__topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #242220;
  background: #161412;
}
.hxf__topbar-title { font-weight: 600; font-size: 12.5px; color: #F2EDE4; }
.hxf__topbar-right { display: flex; align-items: center; gap: 10px; }
.hxf__search {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: #8A8278;
  background: #1C1A18; border: 1px solid #2E2B27; border-radius: 7px;
  padding: 5px 10px;
}
.hxf__kbd { font-family: var(--font-mono); font-size: 10px; color: #6B655D; border: 1px solid #2E2B27; border-radius: 4px; padding: 1px 4px; }
.hxf__pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  color: #7BB894; border: 1px solid rgba(78, 148, 112, 0.4); border-radius: 999px;
  padding: 3px 9px;
}
.hxf__pill-dot { width: 6px; height: 6px; border-radius: 50%; background: #4E9470; }

.hxf__body { display: grid; grid-template-columns: 200px 1fr; min-height: 430px; }

/* sidebar */
.hxf__side {
  border-right: 1px solid #242220;
  background: #151312;
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 14px;
}
.hxf__brand { display: flex; flex-direction: column; gap: 2px; padding: 2px 8px 8px; }
.hxf__brand-name { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; color: #F2EDE4; }
.hxf__brand-sub { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; color: #C8841A; text-transform: uppercase; }
.hxf__navgroup { display: flex; flex-direction: column; gap: 1px; }
.hxf__navlabel { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: #8A8278; text-transform: uppercase; padding: 2px 8px 5px; }
.hxf__navitem {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #A69F94;
  padding: 6px 8px; border: 1px solid transparent; border-radius: 8px;
}
.hxf__navitem .hx-ic { width: 13px; height: 13px; }
.hxf__navitem--active { background: rgba(232,165,75,0.10); border-color: rgba(232,165,75,0.28); color: #F2EDE4; }
.hxf__navitem--active .hx-ic { color: #E8A54B; }
.hxf__navitem--badge::after { content: attr(data-n); margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: #E8A54B; background: rgba(232,165,75,0.12); border-radius: 999px; padding: 1px 6px; }

/* main pane */
.hxf__main { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.hxf__eyebrow { font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: #C8841A; text-transform: uppercase; margin: 0 0 6px; }
/* .hxf .hxf__h1 (0,2,0) must beat style.css's `[data-theme="light"] h3` (0,1,1)
   theme patch — frame content is a depiction of the dark product UI and must
   not re-theme. Same for the explicit font-family (brand.css h3 = display font). */
.hxf .hxf__h1 { font-family: var(--font-body); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #F2EDE4; margin: 0 0 4px; }
.hxf__sub { font-size: 12px; color: #8A8278; margin: 0; }

.hxf__card {
  background: #1B1917;
  border: 1px solid #262320;
  border-radius: 12px;
  padding: 14px 16px;
}
.hxf__card-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; color: #8A8278; text-transform: uppercase; margin: 0 0 10px; }
.hxf__card-label--amber { color: #C8841A; }

.hxf__grid2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; }

/* approval rows */
.hxf__appr { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid #242220; }
.hxf__appr:first-of-type { border-top: 0; }
.hxf__appr-txt { flex: 1; min-width: 0; }
.hxf__appr-title { font-size: 12.5px; color: #E8E2D8; font-weight: 500; }
.hxf__appr-meta { font-family: var(--font-mono); font-size: 10px; color: #6B655D; margin-top: 2px; }
.hxf__appr-actions { display: flex; gap: 6px; flex: none; }
.hxf__btn-approve {
  font-size: 11px; font-weight: 600; color: #1C1A18;
  background: #E8A54B; border-radius: 6px; padding: 5px 12px;
}
.hxf__btn-quiet { font-size: 11px; font-weight: 500; color: #A69F94; border: 1px solid #2E2B27; border-radius: 6px; padding: 5px 12px; }

/* agent status rows */
.hxf__agent { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #242220; }
.hxf__agent:first-of-type { border-top: 0; }
.hxf__avatar {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: rgba(232, 165, 75, 0.14); color: #E8A54B;
}
.hxf__agent-name { font-size: 12.5px; font-weight: 600; color: #E8E2D8; }
.hxf__agent-role { font-family: var(--font-mono); font-size: 9.5px; color: #6B655D; margin-left: 6px; }
.hxf__agent-task { font-size: 11.5px; color: #8A8278; margin-top: 1px; }
.hxf__status { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; border-radius: 999px; padding: 2px 8px; }
.hxf__status--active { color: #7BB894; background: rgba(78, 148, 112, 0.12); }
.hxf__status--idle { color: #8A8278; background: rgba(138, 130, 120, 0.12); }

/* activity feed */
.hxf__act { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid #242220; font-size: 11.5px; color: #A69F94; }
.hxf__act:first-of-type { border-top: 0; }
.hxf__act-time { font-family: var(--font-mono); font-size: 10px; color: #6B655D; flex: none; width: 44px; padding-top: 1px; }

/* chat frame */
.hxf--chat { max-width: 560px; margin: 0 auto; font-size: 13px; }
.hxf__chat-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.hxf__msg { max-width: 82%; border-radius: 12px; padding: 10px 13px; font-size: 12.5px; line-height: 1.55; }
.hxf__msg--agent { background: #1E1B19; border: 1px solid #262320; color: #D9D2C7; align-self: flex-start; border-bottom-left-radius: 4px; }
.hxf__msg--user { background: rgba(232, 165, 75, 0.16); border: 1px solid rgba(232, 165, 75, 0.25); color: #F2EDE4; align-self: flex-end; border-bottom-right-radius: 4px; }
.hxf__msg-time { display: block; font-family: var(--font-mono); font-size: 9px; color: #6B655D; margin-top: 6px; }
.hxf__chat-input {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 18px 18px; padding: 10px 14px;
  background: #1C1A18; border: 1px solid #2E2B27; border-radius: 10px;
  font-size: 12px; color: #6B655D;
}

/* cost mini-frame */
.hxf--mini { font-size: 12px; }
.hxf__meter { height: 6px; border-radius: 999px; background: #262320; overflow: hidden; margin: 10px 0 6px; }
.hxf__meter-fill { display: block; height: 100%; width: 34%; border-radius: 999px; background: #E8A54B; }
.hxf__meter-note { font-family: var(--font-mono); font-size: 10px; color: #6B655D; }

/* ============================================================
   HERO PRODUCT PREVIEW — dashboard ⇄ chat, with clickable tabs
   The dashboard view stays in flow (defines the stage height); the chat view
   overlays as a full-height panel. JS (progressive enhancement) auto-advances
   the view every ~8s, pauses on hover/focus, and lets the Dashboard/Chat tabs
   switch on click (which then yields control to the visitor). Cross-fade is a
   pure CSS opacity transition on the `data-view` state, so it's smooth whether
   the change is auto or a click, and honours prefers-reduced-motion.
   No JS → tabs stay hidden and the static dashboard shows (the default state).
   ============================================================ */
.hx-hero__stage { position: relative; }
.hx-hero__view { transition: opacity 600ms ease; }
.hx-hero__view--dash { position: relative; z-index: 1; }
/* Chat is now the SAME app surface as the dashboard — full width (not a
   narrow floating bubble list), with real app chrome (Chat/Mission Control
   tabs, an orchestration toolbar) so it reads as one product with two tabs,
   not two different widgets. Fills the full stage (= dashboard height);
   internally: appbar + toolbar (fixed) → canvas (flex:1, messages start at
   the TOP, growing down — matching the real app's behaviour on a short
   conversation) → input bar (pinned to the bottom by the flex layout). */
.hx-hero__view--chat {
  position: absolute; inset: 0;
  width: 100%;
  display: flex; flex-direction: column;
  opacity: 0; z-index: 2;
}
/* view state — JS sets data-view; the default (no data-view / "dash") shows the
   dashboard, so no-JS and reduced-motion visitors get a clean static frame. */
.hx-hero__stage[data-view="chat"] .hx-hero__view--dash { opacity: 0; }
.hx-hero__stage[data-view="chat"] .hx-hero__view--chat { opacity: 1; }

.hxf__appbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #242220;
  background: #161412;
  flex: none;
}
.hxf__appbar-left { display: flex; align-items: center; gap: 6px; }
.hxf__appbar-brand { font-weight: 700; font-size: 12.5px; letter-spacing: -0.01em; color: #F2EDE4; margin-right: 8px; }
.hxf__appbar-tab {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 12px; border-radius: 999px; color: #8A8278;
}
.hxf__appbar-tab--active { background: rgba(232, 165, 75, 0.14); color: #E8A54B; }
.hxf__appbar-right { display: flex; align-items: center; gap: 10px; }

.hxf__chat-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-bottom: 1px solid #242220;
  flex: none;
}
.hxf__chat-select { font-size: 11.5px; font-weight: 600; color: #D9D2C7; }
.hxf__chat-select-ic { width: 12px; height: 12px; color: #6B655D; }

.hxf__chat-canvas {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 20px 20px 8px;
  display: flex; flex-direction: column;
}
.hxf__chat-day {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #6B655D;
}
.hxf__chat-day::before, .hxf__chat-day::after { content: ''; flex: 1 1 auto; height: 1px; background: #242220; }

.hxf__msg-row { display: flex; flex-direction: column; margin-bottom: 16px; }
.hxf__msg-row--user { align-items: flex-end; }
.hxf__msg-row--agent { align-items: flex-start; }
.hxf__msg-row .hxf__msg { max-width: 68%; }
.hxf__msg-who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hxf__avatar--cos { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }
.hxf__msg-name { font-size: 11.5px; font-weight: 700; color: #E8E2D8; }
.hxf__msg-role { font-family: var(--font-mono); font-size: 9.5px; color: #6B655D; text-transform: lowercase; }
.hxf__msg-who .hxf__msg-time { display: inline; margin-top: 0; }

.hxf__chat-inputbar { flex: none; padding: 12px 16px 16px; }
.hxf__chat-inputfield {
  display: flex; align-items: baseline; gap: 8px;
  padding: 11px 14px;
  background: #1C1A18; border: 1px solid #2E2B27; border-radius: 10px;
  font-size: 12px; color: #8A8278;
  margin-bottom: 8px;
}
.hxf__chat-input-hint { font-family: var(--font-mono); font-size: 10px; color: #4A4642; }
.hxf__chat-controls { display: flex; align-items: center; gap: 8px; }
.hxf__chat-plus {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #2E2B27; color: #8A8278; font-size: 15px; line-height: 1;
}
.hxf__chat-pill {
  font-family: var(--font-mono); font-size: 10.5px; color: #8A8278;
  border: 1px solid #2E2B27; border-radius: 999px; padding: 4px 10px;
}
.hxf__chat-pill b { color: #D9D2C7; font-weight: 700; }
.hxf__chat-send {
  margin-left: auto;
  font-size: 11.5px; font-weight: 700; color: #1C1A18;
  background: #E8A54B; border-radius: 999px; padding: 6px 16px;
}

/* Clickable Dashboard/Chat tabs — hidden until JS enables them. */
.hx-hero__tabs { display: none; gap: 6px; justify-content: center; margin-top: 18px; }
.hx-hero__frame-wrap.has-controls .hx-hero__tabs { display: flex; }
.hx-hero__tab {
  font-family: inherit; font-size: 0.8rem; font-weight: 600;
  padding: 6px 15px; border-radius: 999px;
  border: 1px solid var(--color-border); background: transparent;
  color: var(--color-text-secondary); cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.hx-hero__tab:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.hx-hero__tab[aria-pressed="true"] {
  background: var(--color-accent); color: var(--color-text-on-amber);
  border-color: var(--color-accent);
}
.hx-hero__tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }

/* the "live" connection dot breathes (independent of the view switch) */
@media (prefers-reduced-motion: no-preference) {
  .hxf__pill-dot { animation: hx-live-pulse 2.4s ease-in-out infinite; }
}
@keyframes hx-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .hx-hero__view { transition: none; } }

/* ============================================================
   TRUST BAR
   ============================================================ */
.hx-trust { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 18px 0; margin-top: 72px; }
.hx-trust__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; }
.hx-trust__item { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--color-text-secondary); }
.hx-trust__item .hx-ic { width: 14px; height: 14px; color: var(--color-accent); }

/* ============================================================
   TEAM
   ============================================================ */
.hx-team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.hx-team__card {
  background: var(--color-bg-surface, var(--surface-0));
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 22px;
  transition: transform 160ms ease, border-color 160ms ease;
}
.hx-team__card:hover { transform: translateY(-2px); border-color: var(--color-accent); }
.hx-team__card--cos { grid-column: span 3; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; border-color: var(--color-accent); background: linear-gradient(180deg, rgba(232, 165, 75, 0.07), transparent 70%), var(--color-bg-surface, var(--surface-0)); }
.hx-team__avatar {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem;
  background: rgba(200, 132, 26, 0.14); color: var(--color-accent);
  margin-bottom: 14px;
}
.hx-team__card--cos .hx-team__avatar { margin-bottom: 0; }
.hx-team__role { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 10px; }
.hx-team__note { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   WHAT WILL YOUR TEAM RUN? (practical outcomes)
   ============================================================ */
.hx-run__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 52px; }
.hx-run__card {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-surface, var(--surface-0));
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 30px 30px 26px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
/* base44-style top accent edge — lights up on hover */
.hx-run__card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity 180ms ease;
}
.hx-run__card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14), 0 0 0 1px var(--color-accent);
}
.hx-run__card:hover::before { opacity: 1; }
.hx-run__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 13px;
  background: var(--color-accent); color: var(--color-text-on-amber, #1C1A18);
  /* theme-aware amber glow (was hardcoded dark-amber, off-hue in light mode);
     degrades gracefully to no glow where color-mix is unsupported */
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent) 22%, transparent);
  margin-bottom: 18px;
}
.hx-run__icon .hx-ic { width: 22px; height: 22px; stroke-width: 2; }
.hx-run__role { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 6px; }
.hx-run__title { font-family: var(--font-body); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; color: var(--color-text); margin: 0 0 10px; }
.hx-run__tags { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--color-border); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--color-accent); }
.hx-run__setup { margin-top: 40px; text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.hx-run__setup-head { font-size: 1.375rem; letter-spacing: -0.02em; margin-bottom: 10px; }
.hx-run__setup-body { margin: 0 auto 24px; }

/* ── Part C: click-to-play mini-flows ─────────────────────────────────────
   Each outcome card reveals a step-by-step "watch it run" flow on click (one
   open at a time). Steps stagger in; the final "waiting for your approval"
   step is amber, reinforcing the approval-gate promise. Collapses to the
   plain card with JS off or under prefers-reduced-motion (steps just appear). */
.hx-run__play {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; padding: 0;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  color: var(--color-accent); background: none; border: 0; cursor: pointer;
}
.hx-run__play-ic { width: 14px; height: 14px; transition: transform 200ms ease; }
.hx-run__play[aria-expanded="true"] .hx-run__play-ic { transform: rotate(90deg); }
.hx-run__play:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); border-radius: 4px; }
/* no-JS: the play button is inert, so hide it and just show the flow statically */
.hx-run__play { display: none; }
.hx-run__grid.has-play .hx-run__play { display: inline-flex; }

.hx-run__flow { list-style: none; margin: 0; padding: 0; }
.hx-run__grid.has-play .hx-run__flow {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 360ms ease, opacity 260ms ease, margin-top 360ms ease;
}
.hx-run__grid.has-play .hx-run__card.is-playing .hx-run__flow { max-height: 700px; opacity: 1; margin-top: 16px; }
.hx-run__flow li {
  position: relative; padding-left: 26px; margin: 0 0 12px;
  font-size: 0.9rem; line-height: 1.4; color: var(--color-text-secondary);
}
.hx-run__flow li:last-child { margin-bottom: 0; color: var(--color-accent); font-weight: 600; }
.hx-run__flow li::before {
  content: ''; position: absolute; left: 5px; top: 5px;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.hx-run__flow li::after {
  content: ''; position: absolute; left: 9px; top: 16px; bottom: -12px; width: 1px;
  background: var(--color-border);
}
.hx-run__flow li:last-child::after { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .hx-run__grid.has-play .hx-run__card.is-playing .hx-run__flow li { opacity: 0; transform: translateY(6px); animation: hx-step-in 420ms ease forwards; }
  .hx-run__grid.has-play .hx-run__card.is-playing .hx-run__flow li:nth-child(1) { animation-delay: 120ms; }
  .hx-run__grid.has-play .hx-run__card.is-playing .hx-run__flow li:nth-child(2) { animation-delay: 300ms; }
  .hx-run__grid.has-play .hx-run__card.is-playing .hx-run__flow li:nth-child(3) { animation-delay: 480ms; }
  .hx-run__grid.has-play .hx-run__card.is-playing .hx-run__flow li:nth-child(4) { animation-delay: 660ms; }
}
@keyframes hx-step-in { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   SPLIT SECTIONS (conversation / always-on)
   ============================================================ */
.hx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hx-split--rev .hx-split__text { order: 2; }
.hx-split__text .hx-lead { margin-top: 8px; }
.hx-split__points { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hx-split__points li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-secondary); }
.hx-split__points .hx-ic { margin-top: 3px; color: var(--color-accent); }

/* ============================================================
   OWNERSHIP
   ============================================================ */
.hx-own__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
.hx-own__col { background: var(--color-bg-surface, var(--surface-0)); border: 1px solid var(--color-border); border-radius: 12px; padding: 26px; }
.hx-own__col--local { border-color: var(--color-accent); }
.hx-own__col-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1rem; color: var(--color-text); margin: 0 0 16px; }
.hx-own__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hx-own__col li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; line-height: 1.5; color: var(--color-text-secondary); }
.hx-own__col li .hx-ic { margin-top: 2px; }
.hx-own__foot { margin-top: 24px; text-align: center; font-size: 0.9375rem; color: var(--color-text-secondary); }

/* ============================================================
   MARKETPLACE STATS
   ============================================================ */
.hx-mkt__stats { display: flex; gap: 12px 36px; justify-content: center; flex-wrap: wrap; margin: 32px 0 0; }
.hx-mkt__stat { text-align: center; }
.hx-mkt__stat-num { font-weight: 800; font-size: 1.9rem; letter-spacing: -0.02em; color: var(--color-text); }
.hx-mkt__stat-label { font-size: 0.8125rem; color: var(--color-muted); margin-top: 2px; }
.hx-mkt__pub { margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--color-border); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.hx-how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.hx-how__step { background: var(--color-bg-surface, var(--surface-0)); border: 1px solid var(--color-border); border-radius: 12px; padding: 26px; }
.hx-how__num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--color-accent); margin: 0 0 14px; }

/* ============================================================
   PRICING TEASER
   ============================================================ */
.hx-price__offer {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; font-weight: 600; color: var(--color-accent);
  border: 1px solid var(--color-accent); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 20px;
}
.hx-price__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.hx-price__card { position: relative; background: var(--color-bg-surface, var(--surface-0)); border: 1px solid var(--color-border); border-radius: 12px; padding: 26px; text-align: left; }
.hx-price__card--pop { border-color: var(--color-accent); }
.hx-price__badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--color-accent); color: var(--color-text-on-amber);
  border-radius: 999px; padding: 3px 12px; white-space: nowrap;
}
.hx-price__tier { font-weight: 600; font-size: 1rem; color: var(--color-text); margin: 0 0 12px; }
.hx-price__row { display: flex; align-items: baseline; gap: 8px; }
.hx-price__strike { font-size: 1rem; color: var(--color-muted); text-decoration: line-through; }
.hx-price__num { font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; color: var(--color-text); }
.hx-price__per { font-size: 0.8125rem; color: var(--color-muted); }
.hx-price__first { font-size: 0.8125rem; color: var(--color-accent); font-weight: 600; margin-top: 6px; }
.hx-price__who { font-size: 0.875rem; color: var(--color-text-secondary); margin-top: 14px; line-height: 1.5; }
.hx-price__note { margin-top: 26px; font-size: 0.875rem; color: var(--color-muted); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.hx-final { background: var(--color-kol, #1C1A18); padding: clamp(104px, 13vw, 180px) 0; text-align: center; border-top: 6px solid var(--color-accent); }
.hx-final .hx-h2, .hx-final .hx-h1 { color: #F2EDE4; }
.hx-final .hx-lead { color: #A69F94; max-width: 580px; margin: 20px auto 0; }
.hx-final__ctas { margin-top: 40px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hx-final .hx-btn-ghost { color: #F2EDE4; border-color: #3A362F; }
.hx-final .hx-btn-ghost:hover { border-color: #8A8278; }
.hx-final__small { margin-top: 18px; font-family: var(--font-mono); font-size: 0.71rem; letter-spacing: 0.08em; color: #6B655D; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hx-section { padding: 76px 0; }
  .hx-hero { padding: 128px 0 0; }
  .hx-team__grid { grid-template-columns: repeat(2, 1fr); }
  .hx-team__card--cos { grid-column: span 2; }
  .hx-split { grid-template-columns: 1fr; gap: 36px; }
  .hx-split--rev .hx-split__text { order: 0; }
  .hx-how__grid, .hx-price__grid { grid-template-columns: 1fr; }
  .hx-own__cols { grid-template-columns: 1fr; }
  .hxf__grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hx-team__grid { grid-template-columns: 1fr; }
  .hx-run__grid { grid-template-columns: 1fr; }
  .hx-team__card--cos { grid-column: span 1; grid-template-columns: 1fr; }
  .hxf__body { grid-template-columns: 1fr; }
  .hxf__side { display: none; }
  .hx-trust__inner { gap: 8px 20px; }
  .hxf__appr { flex-wrap: wrap; }
  .hxf__appr-actions { width: 100%; justify-content: flex-end; }
}