/* ============================================================
   Luckee homepage v2 — brand-narrative sections
   Builds on website.css (page chrome) + root tokens.
   ============================================================ */

/* Type-scale tokens from the design kit (inline styles reference these;
   --fs-h2 drives all six section titles) */
:root {
  --fs-h1: clamp(2.6rem, 5vw, 4.1rem);
  --fs-h1-hero: clamp(2.7rem, 5.2vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 3.2vw, 2.7rem);
  --fs-h3: 1.4rem;
  --fs-h4: 1.1rem;
  --fs-lead: 1.18rem;
  --fs-body: 1rem;
  --fs-small: .9rem;
  --fs-eyebrow: .72rem;
}

/* ---- Hero: workbench composition ---- */
.wb-visual { position: relative; }
.wb-visual::before {
  content: ""; position: absolute; inset: -8% -6% -12% -4%;
  background: radial-gradient(60% 60% at 70% 28%, rgba(201,168,76,.16), transparent 70%);
  filter: blur(10px); z-index: 0; pointer-events: none;
}
.wb-frame {
  position: relative; z-index: 1;
  background: var(--card); border: 1px solid var(--hair-dark); border-radius: var(--r-sheet);
  box-shadow: var(--sh-float); overflow: hidden; font-size: 12px; color: var(--neutral-900);
}
.wb-bar {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--hair); background: var(--oat-200);
}
.wb-bar .hd-url { color: var(--neutral-700); background: rgba(28,43,29,.06); }
.wb-body { display: grid; grid-template-columns: 196px 1fr; }

.wb-queue { background: var(--oat-100); border-right: 1px solid var(--hair); padding: 12px 10px; display: flex; flex-direction: column; gap: 7px; }
.wb-queue h4 { font: 700 .6rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px 4px; }
.wb-q-item { border: 1px solid var(--hair); border-radius: 11px; background: var(--card); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.wb-q-item b { font: 600 .7rem var(--sans); color: var(--neutral-900); line-height: 1.3; }
.wb-q-item span { font: 500 .62rem var(--sans); color: var(--muted); }
.wb-q-item.active { border-color: var(--forest-300); background: var(--forest-050); box-shadow: var(--sh-sm); }
.wb-q-item.active b { color: var(--forest-800); }
.wb-q-foot { margin-top: auto; padding: 8px 4px 0; border-top: 1px solid var(--hair); font: 500 .6rem var(--mono); color: var(--muted); line-height: 1.5; }

.wb-detail { padding: 13px 15px; display: flex; flex-direction: column; gap: 9px; }
.wb-sku { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wb-sku b { font: 600 .72rem var(--mono); color: var(--neutral-900); }
.wb-goal { font: 600 .62rem var(--sans); color: var(--forest-700); background: var(--forest-050); border: 1px solid var(--forest-100); border-radius: 999px; padding: 3px 9px; }
.wb-action { background: var(--oat-100); border: 1px solid var(--hair); border-radius: 11px; padding: 9px 11px; }
.wb-action em { display: block; font: 700 .58rem var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--forest-600); margin-bottom: 3px; }
.wb-action p { font: 500 .74rem var(--sans); color: var(--neutral-900); margin: 0; line-height: 1.45; }
.wb-rows { display: flex; flex-direction: column; }
.wb-row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 5px 2px; border-top: 1px solid var(--hair); align-items: baseline; }
.wb-row:first-child { border-top: 0; }
.wb-row b { font: 600 .62rem var(--sans); color: var(--muted); }
.wb-row span { font: 500 .68rem var(--sans); color: var(--neutral-700); line-height: 1.4; }
.wb-row span strong { color: var(--success-600); font-weight: 700; }
.wb-cta { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.wb-approve { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; border: none; cursor: pointer; background: var(--forest-600); color: var(--oat-100); font: 600 .68rem var(--sans); box-shadow: var(--sh-brand); }
.wb-evidence { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(61,90,62,.3); background: transparent; cursor: pointer; color: var(--forest-700); font: 600 .68rem var(--sans); }

/* floating Slack approval card */
.slack-float {
  position: absolute; z-index: 2; left: -26px; bottom: -22px; width: 252px;
  background: var(--card); border: 1px solid var(--hair); border-radius: 14px;
  box-shadow: var(--sh-card-hover); padding: 11px 13px; font-size: 12px;
  pointer-events: none;
}
.slack-float .sf-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.slack-float .sf-logo { width: 18px; height: 18px; border-radius: 5px; background: var(--forest-600); color: var(--oat-100); display: grid; place-items: center; font: 400 .68rem var(--serif); }
.slack-float .sf-head b { font: 700 .66rem var(--sans); color: var(--neutral-900); }
.slack-float .sf-head span { font: 500 .62rem var(--mono); color: var(--muted); }
.slack-float p { font: 500 .68rem var(--sans); color: var(--neutral-700); margin: 0 0 8px; line-height: 1.45; }
.slack-float .sf-actions { display: flex; gap: 6px; }
.slack-float .sf-actions span { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: 7px; font: 600 .64rem var(--sans); }
.slack-float .sf-actions span:first-child { background: var(--success-600); color: #fff; }
.slack-float .sf-actions span:last-child { border: 1px solid var(--border); color: var(--neutral-700); }

/* floating monitoring chip */
.monitor-float {
  position: absolute; z-index: 2; right: -14px; top: -14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--forest-850); border: 1px solid var(--hair-dark); border-radius: 999px;
  padding: 7px 13px; font: 600 .68rem var(--sans); color: var(--forest-300); box-shadow: var(--sh-lg);
}
.monitor-float i { width: 6px; height: 6px; border-radius: 50%; background: var(--success-600); animation: pulseDot 1.2s infinite var(--ease); }

/* ---- Contrast section (not another dashboard) ---- */
.contrast-tile h3 { margin: 10px 0 8px; font-size: 1.45rem; }
.contrast-tile p { color: var(--muted); font-size: .92rem; line-height: 1.62; margin: 0; }
.contrast-tile .ct-label { font: 700 .64rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.contrast-tile.is-luckee { background: var(--forest-600); border-color: var(--forest-600); }
.contrast-tile.is-luckee h3 { color: var(--oat-100); }
.contrast-tile.is-luckee p { color: var(--forest-100); }
.contrast-tile.is-luckee .ct-label { color: var(--gold-light); }

/* ---- Workbench decision module ---- */
.decision-card {
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card);
  box-shadow: var(--sh-card); overflow: hidden; font-size: 13px;
}
.decision-card .dc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; background: var(--forest-900); }
.decision-card .dc-head b { font: 400 1rem var(--serif); color: var(--oat-100); letter-spacing: .01em; }
.decision-card .dc-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.agents-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.agents-row span { font: 500 .7rem var(--mono); color: var(--forest-700); background: var(--forest-050); border: 1px solid var(--forest-100); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }

/* ---- Copilot strip ---- */
.copilot-strip {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card);
  box-shadow: var(--sh-card); padding: 26px 30px;
}
.copilot-strip h3 { margin: 6px 0 4px; }
.copilot-strip p { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0; max-width: 64ch; }

/* ---- Operator Kernel ---- */
.kernel-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.kernel-cell { flex: 0 0 calc(25% - 9px); }
.kernel-cell {
  background: rgba(217,232,218,.05); border: 1px solid var(--hair-dark); border-radius: 14px;
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px;
}
.kernel-cell i { font: 500 .62rem var(--mono); font-style: normal; color: var(--forest-400); }
.kernel-cell b { font: 400 1.05rem var(--serif); color: var(--oat-100); letter-spacing: .01em; }
.kernel-cell p { font: 400 .78rem var(--sans); color: var(--forest-300); line-height: 1.55; margin: 0; }

/* ---- Vision (Today / Next) ---- */
.vision-card { display: flex; flex-direction: column; gap: 12px; }
.vision-card h3 { font-size: 1.55rem; margin: 4px 0 0; }
.vision-card p { color: var(--muted); margin: 0; line-height: 1.65; }
.vision-rail { display: flex; align-items: center; gap: 10px; font: 500 .7rem var(--mono); color: var(--muted); margin-bottom: 18px; }
.vision-rail i { flex: 1; height: 1px; background: var(--hair); }

/* ---- v2 interactions ---- */
/* Hard guarantee: revealed elements are always visible (overrides any cascade
   quirk between website.css reveal rules and runtime class application). */
.js .reveal.in { opacity: 1 !important; transform: none !important; }
.js .reveal-stagger.in > * { opacity: 1 !important; transform: none !important; }

.brand span { white-space: nowrap; }

/* Growth loop — self-cycling strip */
.loop-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; position: relative; }
.loop-strip::before { content: ""; position: absolute; top: 27px; left: 7%; right: 7%; height: 2px; z-index: 0; background: linear-gradient(90deg, var(--forest-100), var(--forest-300) 50%, var(--forest-100)); opacity: .7; }
.loop-step { position: relative; z-index: 1; cursor: pointer; }
.loop-step span { cursor: pointer; }
.loop-step > span {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 18px;
  background: var(--card); border: 2px solid var(--forest-100); color: var(--forest-600);
  font-family: var(--serif); font-size: 1.4rem; box-shadow: var(--sh-sm);
  transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), background .4s var(--ease-out), color .4s var(--ease-out);
}
.loop-step > b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; margin-bottom: 6px; transition: color .4s var(--ease-out); }
.loop-step > p { font-size: .85rem; color: var(--muted); line-height: 1.55; margin: 0; }
.loop-step.active > span { background: var(--forest-600); border-color: var(--forest-600); color: var(--oat-100); transform: translateY(-4px); box-shadow: var(--sh-brand); }
.loop-step.active > b { color: var(--forest-700); }
.loop-step.done > span { border-color: var(--forest-400); color: var(--forest-500); }

/* Evidence drawer (decision card) */
.evidence-drawer { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .45s var(--ease-out), opacity .45s var(--ease-out), margin .45s var(--ease-out); margin-top: 0; }
.evidence-drawer.open { max-height: 360px; opacity: 1; margin-top: 4px; }
.evidence-frame { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--oat-100); }
.evidence-frame .ef-bar { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-bottom: 1px solid var(--hair); background: var(--oat-200); font: 500 .64rem var(--mono); color: var(--muted); }
.evidence-frame img { width: 100%; max-height: 260px; object-fit: cover; object-position: top; display: block; }

/* Copilot strip with product shot */
.copilot-strip { grid-template-columns: auto 1fr 300px; }
.copilot-shot { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--oat-100); box-shadow: var(--sh-md); }
.copilot-shot .ef-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--hair); background: var(--oat-200); font: 500 .62rem var(--mono); color: var(--muted); }
.copilot-shot img { width: 100%; height: 150px; object-fit: cover; object-position: left top; display: block; }

/* Vision — horizon imagery */
.vision-band { position: relative; background: var(--card); overflow: hidden; }
.vision-horizon {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 480px;
  pointer-events: none; display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 32%, #000 62%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 32%, #000 62%);
}
.vision-band > .wrap { position: relative; z-index: 1; }
.vision-band .section { padding-bottom: 300px; }

/* ---- Product guide + simplified principles ---- */
.product-guide-band .section { padding-bottom: 300px; }
.product-guide-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.product-guide-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: 0 20px 48px -22px rgba(28,43,29,.42), 0 4px 14px -8px rgba(28,43,29,.14);
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.product-guide-card span {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--forest-050);
  border: 1px solid var(--forest-100);
  color: var(--forest-700);
  font: 700 .64rem var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.product-guide-card h3 {
  margin: 2px 0 0;
  color: var(--neutral-900);
  font-size: clamp(1.45rem, 2vw, 1.75rem);
  line-height: 1.12;
}
.product-guide-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}
.product-guide-card strong {
  margin-top: auto;
  color: var(--forest-700);
  font: 700 .9rem var(--sans);
}
.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 22px;
}
.principle-tile {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 0 10px;
  border-top: 1px solid var(--hair);
}
.principle-tile span {
  color: var(--forest-500);
  font: 700 .72rem var(--mono);
}
.principle-tile h3 {
  margin: 0;
  color: var(--neutral-900);
  font-size: clamp(1.14rem, 1.6vw, 1.42rem);
  line-height: 1.22;
}
@media (hover: hover) {
  .product-guide-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-card-hover);
    border-color: rgba(62,91,63,.22);
  }
}
@media (max-width: 980px) {
  .product-guide-grid,
  .principle-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .product-guide-card {
    min-height: 0;
    padding: 24px;
  }
  .principle-tile {
    min-height: 0;
  }
}

.wb-q-item { cursor: pointer; transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease); }
.wb-q-item:hover { border-color: var(--forest-300); transform: translateY(-1px); }
.wb-q-item .wb-q-done { color: var(--success-600); font-weight: 700; }
.wb-approve, .wb-evidence { transition: transform .16s var(--ease), background .16s var(--ease), opacity .16s var(--ease); }
.wb-approve:hover { transform: translateY(-1px); background: var(--forest-700); }
.wb-approve:active { transform: scale(.98); }
.wb-approve.is-approved { background: var(--success-600); cursor: default; }
.wb-evidence:hover { background: var(--forest-050); }
.wb-detail-swap { animation: wbSwap .32s var(--ease-out); }
@keyframes wbSwap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.slack-float { transition: box-shadow .3s var(--ease-out); }
.slack-float.is-approved .sf-actions span:first-child { background: var(--success-bg); color: var(--success-600); }
.kernel-cell { transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), background .3s var(--ease-out); }
.kernel-cell:hover { transform: translateY(-3px); border-color: rgba(201,168,76,.45); background: rgba(217,232,218,.09); }

/* ---- Micro-viz system: tiny brand-language diagrams ---- */
@keyframes vizSpin { to { transform: rotate(360deg); } }
@keyframes vizFill { 0% { width: 12%; } 60% { width: 64%; } 100% { width: 64%; } }
@keyframes vizPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.viz { display: flex; align-items: center; gap: 8px; min-height: 48px; }

.viz-bars { flex-direction: column; align-items: flex-start; gap: 5px; justify-content: center; }
.viz-bars i { display: block; height: 7px; border-radius: 99px; background: var(--forest-100); position: relative; }
.viz-bars i.hot { background: var(--forest-300); }
.viz-bars i b { position: absolute; right: -11px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--warning-600); }

.viz-minicard { width: 92px; background: var(--card); border: 1px solid var(--hair); border-radius: 9px; padding: 7px 8px; box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 5px; }
.viz-minicard i { display: block; height: 5px; border-radius: 99px; background: var(--oat-250); }
.viz-minicard em { align-self: flex-start; font: 700 .56rem var(--mono); font-style: normal; color: var(--success-600); background: var(--success-bg); border-radius: 99px; padding: 2px 7px; }

.viz-pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 11px; border-radius: 99px; font: 700 .62rem var(--sans); background: var(--forest-600); color: var(--oat-100); box-shadow: var(--sh-brand); white-space: nowrap; }
.viz-pill.ghost { background: transparent; border: 1px solid var(--hair); color: var(--muted); box-shadow: none; font-weight: 600; }

.viz-progress { width: 96px; height: 7px; border-radius: 99px; background: var(--oat-250); overflow: hidden; }
.viz-progress i { display: block; height: 100%; width: 64%; border-radius: 99px; background: linear-gradient(90deg, var(--forest-500), var(--forest-700)); }
.loop-step.active .viz-progress i { animation: vizFill 2.2s var(--ease-out) infinite; }
.viz-bracket { font: 600 .9rem var(--mono); color: var(--forest-300); }

.viz-delta { align-items: flex-end; gap: 4px; }
.viz-delta i { display: block; width: 11px; border-radius: 4px 4px 0 0; background: var(--oat-400); }
.viz-delta i.after { background: var(--forest-500); }
.viz-delta em { font: 700 .66rem var(--mono); font-style: normal; color: var(--success-600); margin-left: 5px; }

.viz-stack { flex-direction: column; align-items: flex-start; gap: 4px; justify-content: center; }
.viz-stack i { display: block; height: 8px; border-radius: 99px; background: var(--forest-500); }
.viz-stack i:nth-child(1) { width: 38px; opacity: .3; }
.viz-stack i:nth-child(2) { width: 52px; opacity: .55; }
.viz-stack i:nth-child(3) { width: 66px; opacity: .9; }

.viz-radar { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--forest-100); flex-shrink: 0; overflow: hidden; }
.viz-radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(62,91,63,.4), transparent 80deg, transparent); animation: vizSpin 4s linear infinite; }
.viz-radar b { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--forest-500); }
.viz-radar b:nth-child(1) { top: 11px; right: 12px; }
.viz-radar b:nth-child(2) { bottom: 9px; left: 14px; background: var(--gold); }
.viz-mono { font: 600 .68rem var(--mono); color: var(--muted); }

.viz-chip { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--hair); font: 600 .76rem var(--mono); color: var(--forest-700); flex-shrink: 0; }
.viz-chip.brand { background: var(--forest-600); border-color: var(--forest-600); color: var(--oat-100); font-family: var(--serif); }
.viz-arrow { font: 400 1rem var(--serif); color: var(--forest-300); }

.viz-ranked { flex-direction: column; align-items: flex-start; gap: 6px; justify-content: center; }
.viz-ranked i { display: flex; align-items: center; gap: 6px; }
.viz-ranked i::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--oat-400); }
.viz-ranked i b { display: block; height: 6px; border-radius: 99px; background: var(--oat-400); }
.viz-ranked i:first-child::before { background: var(--gold); }
.viz-ranked i:first-child b { background: var(--forest-500); }

.viz-chain i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--forest-300); flex-shrink: 0; }
.viz-chain em { width: 18px; height: 2px; background: var(--forest-100); font-style: normal; }
.viz-chain i.done { border-color: var(--forest-600); background: var(--forest-600); position: relative; }
.viz-chain i.done::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 8px var(--sans); color: var(--oat-100); }

.viz-merge i { width: 24px; height: 24px; border-radius: 50%; background: rgba(62,91,63,.12); border: 1px solid rgba(62,91,63,.22); flex-shrink: 0; }
.viz-merge i + i { margin-left: -10px; }
.viz-merge i.core { background: var(--forest-600); border-color: var(--forest-600); width: 14px; height: 14px; margin-left: 8px; }

.viz-doc { position: relative; width: 32px; height: 40px; background: var(--card); border: 1px solid var(--hair); border-radius: 6px; padding: 7px 5px; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.viz-doc i { display: block; height: 3px; border-radius: 99px; background: var(--oat-250); }
.viz-doc b { position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px; border-radius: 6px; background: var(--forest-050); border: 1px solid var(--forest-100); display: grid; place-items: center; font: 700 9px var(--sans); color: var(--forest-600); }

.viz-trend { align-items: flex-end; gap: 5px; }
.viz-trend i { display: block; width: 10px; border-radius: 4px 4px 0 0; background: var(--forest-100); }
.viz-trend i.top { background: var(--gold); }

.viz-bubbles { flex-direction: column; align-items: flex-start; gap: 5px; justify-content: center; }
.viz-bubbles i { display: flex; flex-direction: column; gap: 3px; background: var(--oat-200); border-radius: 10px 10px 10px 3px; padding: 6px 9px; }
.viz-bubbles i b { display: block; width: 44px; height: 4px; border-radius: 99px; background: var(--oat-400); }
.viz-bubbles i.q { align-self: flex-end; border-radius: 10px 10px 3px 10px; background: var(--card); border: 1px solid var(--hair); font: 600 .72rem var(--mono); color: var(--muted); padding: 4px 9px; }

.viz-ring { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.viz-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(217,232,218,.3); border-top-color: var(--gold-light); animation: vizSpin 3s linear infinite; }
.viz-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 .8rem var(--sans); color: var(--oat-100); }

/* Workbench feature grid (replaces dry checklist) */
.wb-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.wb-feat { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: 12px 14px; box-shadow: var(--sh-sm); }
.wb-feat .viz { min-height: 44px; flex-shrink: 0; width: 112px; justify-content: center; flex-wrap: wrap; gap: 5px; }
.wb-feat .viz-chip { width: 21px; height: 21px; font-size: .62rem; border-radius: 6px; }
.wb-feat .viz-arrow { font-size: .85rem; }
.wb-feat .viz-pill { height: 21px; padding: 0 8px; font-size: .58rem; }
.wb-feat .viz-pill.ghost { height: 21px; padding: 0 8px; }
.wb-feat > span { font: 500 .82rem var(--sans); color: var(--neutral-700); line-height: 1.45; }

/* loop step vignettes */
.loop-step .viz { min-height: 44px; margin-bottom: 8px; }

/* contrast card vignettes */
.contrast-tile .viz { min-height: 56px; margin-bottom: 6px; }

@media (max-width: 980px) {
  .wb-feats { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .loop-strip { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
  .loop-strip::before { display: none; }
  .copilot-strip { grid-template-columns: 1fr; }
  .vision-band .section { padding-bottom: 240px; }
  .wb-body { grid-template-columns: 1fr; }
  .wb-queue { border-right: 0; border-bottom: 1px solid var(--hair); }
  .kernel-cell { flex-basis: calc(50% - 6px); }
  .slack-float { left: 8px; bottom: -28px; }
  .copilot-strip { grid-template-columns: 1fr; }
}

/* ============================================================
   v3 — expressiveness layer
   Choreographed entrances, living atmosphere, tactile depth.
   Everything motion-bearing is gated on prefers-reduced-motion;
   everything pointer-bearing is gated on (hover:hover).
   ============================================================ */

/* Extend the stagger wave past 6 children (9-card grid, 7-cell kernel) */
.reveal-stagger.in > *:nth-child(7) { transition-delay: .38s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .44s; }
.reveal-stagger.in > *:nth-child(9) { transition-delay: .50s; }

@media (prefers-reduced-motion: no-preference) {

  /* ---- Hero overture: left column cascades, workbench lands, UI ticks in ---- */
  .js .home-hero .reveal { transition-duration: .75s; }
  .home-hero .eyebrow.reveal.in { transition-delay: .05s; }
  .home-hero h1.reveal.in { transition-delay: .16s; }
  .home-hero .lead.reveal.in { transition-delay: .30s; }
  .home-hero .hero-actions.reveal.in { transition-delay: .44s; }
  .home-hero .proof-row.reveal.in { transition-delay: .56s; }
  .js .home-hero [aria-label="Luckee workbench preview"].reveal { transform: translateY(26px) scale(.97); }
  .home-hero [aria-label="Luckee workbench preview"].reveal.in { transition-delay: .34s; }

  @keyframes heroPop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
  .home-hero .reveal.in .wb-q-item:nth-child(2) { animation: heroPop .45s var(--ease-out) .85s backwards; }
  .home-hero .reveal.in .wb-q-item:nth-child(3) { animation: heroPop .45s var(--ease-out) .98s backwards; }
  .home-hero .reveal.in .wb-q-item:nth-child(4) { animation: heroPop .45s var(--ease-out) 1.11s backwards; }
  .home-hero .reveal.in .monitor-float { animation: heroPop .5s var(--ease-out) 1.30s backwards; }
  .home-hero .reveal.in .slack-float { animation: heroPop .55s var(--ease-out) 1.50s backwards; }

  /* ---- Decision card cascade: the agent finishes the brief as you arrive ---- */
  @keyframes rowIn { from { opacity: 0; transform: translateY(8px); } }
  #workbench .reveal.in .decision-card .wb-action { animation: rowIn .5s var(--ease-out) .25s backwards; }
  #workbench .reveal.in .decision-card .wb-row:nth-child(1) { animation: rowIn .45s var(--ease-out) .45s backwards; }
  #workbench .reveal.in .decision-card .wb-row:nth-child(2) { animation: rowIn .45s var(--ease-out) .57s backwards; }
  #workbench .reveal.in .decision-card .wb-row:nth-child(3) { animation: rowIn .45s var(--ease-out) .69s backwards; }
  #workbench .reveal.in .decision-card .wb-row:nth-child(4) { animation: rowIn .45s var(--ease-out) .81s backwards; }
  #workbench .reveal.in .decision-card .wb-cta { animation: rowIn .45s var(--ease-out) .95s backwards; }

  /* ---- Living atmosphere: aurora drift on the dark-band glow pools ---- */
  @keyframes aurora { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-2.5%,1.5%,0) scale(1.06); } }
  .home-hero::before, .band-dark::before { animation: aurora 18s ease-in-out infinite alternate; will-change: transform; }

  /* ---- Growth loop: progress trace sweeps along the rail ---- */
  .loop-strip::after {
    content: ""; position: absolute; top: 27px; left: 7%; right: 7%; height: 2px; z-index: 0;
    border-radius: 2px; background: linear-gradient(90deg, var(--forest-400), var(--forest-600));
    transform-origin: left center; transform: scaleX(var(--loop-p, 0));
    transition: transform .9s var(--ease-out);
  }

  /* ---- Evidence scanline: the report reads as freshly generated ---- */
  .evidence-frame { position: relative; }
  @keyframes scanline { from { transform: translateY(-46px); } to { transform: translateY(300px); } }
  .evidence-drawer.open .evidence-frame::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46px; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(232,201,106,.18), transparent);
    animation: scanline .9s var(--ease-out) .15s both;
  }

  /* ---- Approve ripple: success tint cascades down the brief ---- */
  @keyframes okTint { 30% { background: var(--success-bg); } }
  .is-approved-flow .wb-rows .wb-row:nth-child(1) { animation: okTint .7s var(--ease-out) .05s backwards; }
  .is-approved-flow .wb-rows .wb-row:nth-child(2) { animation: okTint .7s var(--ease-out) .17s backwards; }
  .is-approved-flow .wb-rows .wb-row:nth-child(3) { animation: okTint .7s var(--ease-out) .29s backwards; }
  .is-approved-flow .wb-rows .wb-row:nth-child(4) { animation: okTint .7s var(--ease-out) .41s backwards; }
  @keyframes monitorFlash {
    0% { box-shadow: var(--sh-lg); border-color: var(--hair-dark); }
    35% { box-shadow: 0 0 0 5px rgba(232,201,106,.22), var(--sh-lg); border-color: var(--gold-light); }
    100% { box-shadow: var(--sh-lg); border-color: var(--hair-dark); }
  }
  .monitor-float.flash { animation: monitorFlash 1s var(--ease-out); }

  /* ---- Vision horizon parallax (transform set from JS) ---- */
  .vision-horizon { will-change: transform; transform: scale(1.12); }
}

@media (max-width: 980px) { .loop-strip::after { display: none; } }

/* ---- Gold light-sweep on primary CTAs + approve (hover devices) ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home-hero .hero-actions a, .cta .btn, .wb-approve { position: relative; overflow: hidden; }
  .home-hero .hero-actions a::after, .cta .btn::after, .wb-approve::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(110deg, transparent 32%, rgba(232,201,106,.32) 50%, transparent 68%);
    transform: translateX(-130%); transition: none;
  }
  .home-hero .hero-actions a:hover::after, .cta .btn:hover::after, .wb-approve:hover::after {
    transform: translateX(130%); transition: transform .65s var(--ease-out);
  }

  /* ---- Pointer-tracked gold spotlight inside card fields ---- */
  .grid-3 > *, .kernel-cell { position: relative; }
  .grid-3 > *::after, .kernel-cell::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .35s var(--ease-out);
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(201,168,76,.13), transparent 70%);
  }
  .grid-3 > *:hover::after, .kernel-cell:hover::after { opacity: 1; }

  /* ---- Hero workbench 3D tilt with parallax floats ---- */
  .wb-visual { perspective: 1100px; }
  .wb-frame {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .25s var(--ease-out); will-change: transform;
  }
  .slack-float { transform: translate3d(calc(var(--nx, 0) * -10px), calc(var(--ny, 0) * -8px), 0); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
  .monitor-float { transform: translate3d(calc(var(--nx, 0) * 7px), calc(var(--ny, 0) * 6px), 0); transition: transform .3s var(--ease-out); }
}

/* ---- Approve state in the decision-card header chip ---- */
.pill-live.is-monitoring { color: var(--gold-light); background: rgba(201,168,76,.16); }
.pill-live.is-monitoring::before { background: var(--gold-light); }

/* ---- Active loop step text emphasis ---- */
.loop-step.active > p { color: var(--neutral-700); }

/* ============================================================
   v4 — visual-first pass (per Ethan: less text, more visuals)
   ============================================================ */

/* ---- Workbench: real-report collage replaces the feature list ---- */
.wb-shots { position: relative; aspect-ratio: 5 / 4; margin: 6px 0 18px; }
.wb-shot {
  position: absolute; margin: 0; overflow: hidden; border-radius: 14px;
  background: var(--card); border: 1px solid var(--hair);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), z-index 0s;
}
.wb-shot figcaption {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px;
  border-bottom: 1px solid var(--hair); background: var(--oat-200);
  font: 500 .64rem var(--mono); color: var(--muted); white-space: nowrap;
}
.wb-shot figcaption i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--success-600); flex-shrink: 0;
}
.wb-shot img { width: 100%; height: calc(100% - 30px); object-fit: cover; object-position: left top; display: block; }
.wb-shot-front {
  left: 0; top: 0; width: 76%; height: 82%; z-index: 2;
  box-shadow: 0 2px 6px rgba(28,43,29,.08), 0 30px 60px -24px rgba(28,43,29,.45);
}
.wb-shot-back {
  right: 0; bottom: 0; width: 62%; height: 64%; z-index: 1;
  transform: rotate(2.2deg);
  box-shadow: 0 1px 3px rgba(28,43,29,.06), 0 18px 44px -20px rgba(28,43,29,.35);
}
.wb-shot-front:hover { transform: translateY(-4px); z-index: 3; box-shadow: 0 4px 8px rgba(28,43,29,.08), 0 40px 80px -28px rgba(28,43,29,.5); }
.wb-shot-back:hover { transform: rotate(0deg) translateY(-4px); z-index: 3; }

/* the two report frames slide in when the section reveals */
@media (prefers-reduced-motion: no-preference) {
  @keyframes shotIn { from { opacity: 0; transform: translateY(18px) rotate(0deg); } }
  #workbench .reveal.in .wb-shot-front { animation: shotIn .6s var(--ease-out) .15s backwards; }
  #workbench .reveal.in .wb-shot-back { animation: shotIn .6s var(--ease-out) .32s backwards; }
}

/* six features as compact pills */
.wb-points { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.wb-points li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--hair);
  font: 600 .78rem var(--sans); color: var(--neutral-700); box-shadow: var(--sh-sm);
}
.wb-points li::before { content: "✓"; font-size: .7rem; font-weight: 700; color: var(--forest-600); }

/* ---- Differentiators: viz becomes the protagonist ---- */
section[data-screen-label="Growth Operator differentiators"] .grid-3 .viz { min-height: 64px; transform: scale(1.18); transform-origin: left center; margin-bottom: 2px; }

/* ---- Copilot: bigger product shot ---- */
.copilot-strip { grid-template-columns: auto 1fr 380px; }
.copilot-shot img { height: 205px; }

@media (max-width: 980px) {
  .wb-shots { aspect-ratio: auto; height: auto; position: static; }
  .wb-shot { position: static; width: 100% !important; height: auto !important; transform: none !important; }
  .wb-shot img { height: auto; max-height: 260px; }
  .wb-shot + .wb-shot { margin-top: 10px; }
  .copilot-strip { grid-template-columns: 1fr; }
}

/* ---- Bento layout for the nine differentiators ---- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.b-span3 { grid-column: span 3; } .b-span4 { grid-column: span 4; } .b-span5 { grid-column: span 5; }
.bento-cell {
  position: relative; display: flex; flex-direction: column; gap: 9px; padding: 24px;
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .32s var(--ease-out);
}
.bento-cell:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); border-color: rgba(62,91,63,.22); }
.bento-cell h3 { font-size: 1.15rem; margin: 0; }
.bento-cell p { font: 500 .84rem var(--sans); color: var(--muted); line-height: 1.5; margin: 0; }
.bento-cell .viz { min-height: 44px; }

/* featured cells: real screenshot leads, text below */
.bento-feature { padding: 0; overflow: hidden; }
.bento-feature figure { margin: 0; position: relative; border-bottom: 1px solid var(--hair); }
.bento-feature figure img { width: 100%; height: 172px; object-fit: cover; object-position: left top; display: block; }
.bento-feature figcaption {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.92); border: 1px solid var(--hair);
  font: 500 .62rem var(--mono); color: var(--neutral-700); backdrop-filter: blur(3px);
}
.bento-feature figcaption i { width: 6px; height: 6px; border-radius: 50%; background: var(--success-600); }
.bento-feature .bc-text { padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 6px; }

/* real-data chip — replaces skeleton-bar glyphs */
.viz-datachip {
  font: 600 .68rem var(--mono); color: var(--forest-700);
  background: var(--forest-050); border: 1px solid var(--forest-100);
  border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}

/* spotlight + stagger for bento cells */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bento-cell::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .35s var(--ease-out);
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(201,168,76,.13), transparent 70%);
  }
  .bento-cell:hover::after { opacity: 1; }
}

@media (max-width: 980px) {
  .b-span3, .b-span4, .b-span5 { grid-column: span 6; }
  .bento-feature figure img { height: 150px; }
}
@media (max-width: 760px) {
  .b-span3, .b-span4, .b-span5 { grid-column: span 12; }
}

/* bento balance: center content in compact cells so row-stretch whitespace distributes */
.bento-cell:not(.bento-feature) { justify-content: center; }

/* ============================================================
   v6 — conceptual visuals (express the idea, not pictures of text)
   ============================================================ */

/* ---- Night ops: agents work around the clock ---- */
.night-ops {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  background: linear-gradient(160deg, var(--forest-850), var(--forest-900) 70%);
  border: 1px solid var(--hair-dark); box-shadow: var(--sh-float);
  color: var(--forest-300); padding: 20px 22px 18px; margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.night-ops::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 85% 0%, rgba(201,168,76,.10), transparent 60%);
}
.night-ops header { display: flex; align-items: baseline; gap: 12px; }
.no-clock { font: 600 1.5rem var(--mono); color: var(--oat-100); letter-spacing: .02em; }
.no-label { font: 500 .72rem var(--sans); color: var(--forest-300); }
.no-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 .62rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--forest-300); }
.no-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--success-600); animation: pulseDot 1.2s infinite var(--ease); }
.no-rows { display: flex; flex-direction: column; gap: 9px; }
.no-row {
  display: grid; grid-template-columns: 118px 1fr; gap: 3px 14px; align-items: center;
  background: rgba(217,232,218,.05); border: 1px solid var(--hair-dark);
  border-radius: 12px; padding: 9px 13px;
}
.no-row b { font: 600 .72rem var(--mono); color: var(--oat-100); grid-row: span 2; }
.no-task { font: 500 .68rem var(--sans); color: var(--forest-300); }
.no-line { display: block; height: 4px; border-radius: 99px; background: rgba(217,232,218,.10); overflow: hidden; }
.no-line em { display: block; height: 100%; width: 40%; border-radius: 99px; background: linear-gradient(90deg, var(--forest-500), var(--forest-300)); }
.no-flow { display: flex; justify-content: center; gap: 26px; height: 18px; }
.no-flow i { width: 2px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--gold-light)); opacity: .55; }
.night-ops footer {
  display: flex; align-items: center; gap: 13px;
  background: rgba(201,168,76,.10); border: 1px solid rgba(232,201,106,.30);
  border-radius: 13px; padding: 12px 15px;
}
.no-doc { font-size: 1.05rem; color: var(--gold-light); }
.night-ops footer b { display: block; font: 600 .8rem var(--sans); color: var(--oat-100); }
.night-ops footer span:last-of-type { font: 500 .66rem var(--sans); color: var(--forest-300); }
.no-arrow { margin-left: auto; font: 400 1.2rem var(--serif); color: var(--gold-light); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes noScan { 0% { transform: translateX(-110%); } 60%, 100% { transform: translateX(280%); } }
  .no-line em { animation: noScan 2.8s var(--ease) infinite; }
  .no-row:nth-child(2) .no-line em { animation-delay: .5s; }
  .no-row:nth-child(3) .no-line em { animation-delay: 1s; }
  .no-row:nth-child(4) .no-line em { animation-delay: 1.5s; }
  @keyframes noDrip { 0% { transform: translateY(-100%); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(100%); opacity: 0; } }
  .no-flow i { animation: noDrip 1.8s linear infinite; }
  .no-flow i:nth-child(2) { animation-delay: .6s; }
  .no-flow i:nth-child(3) { animation-delay: 1.2s; }
}

/* ---- Vignette base (bento feature figures) ---- */
.vig {
  margin: 0; height: 186px; display: grid; place-items: center; position: relative;
  background: linear-gradient(165deg, var(--forest-050), var(--card) 75%);
  border-bottom: 1px solid var(--hair); overflow: hidden;
}

/* goal -> action -> outcome path */
.vig-path svg { width: 86%; height: auto; overflow: visible; }
.vp-rail { stroke: var(--forest-100); stroke-width: 2; }
.vp-draw { stroke: var(--forest-600); stroke-width: 2.5; stroke-linecap: round; }
.vp-node { fill: var(--card); stroke: var(--forest-600); stroke-width: 2.5; }
.vp-end { fill: var(--gold-light); stroke: var(--gold); }
.vp-t { font: 600 11px var(--mono); fill: var(--muted); letter-spacing: .04em; }
@media (prefers-reduced-motion: no-preference) {
  .vp-draw { stroke-dasharray: 420; stroke-dashoffset: 420; }
  .reveal-stagger.in .vp-draw { animation: vpDraw 1.4s var(--ease-out) .4s forwards; }
  @keyframes vpDraw { to { stroke-dashoffset: 0; } }
  .vp-node { opacity: 0; }
  .reveal-stagger.in .vp-node { animation: vpPop .4s var(--ease-out) forwards; }
  .reveal-stagger.in .vp-node.vp-mid { animation-delay: .9s; }
  .reveal-stagger.in .vp-node.vp-end { animation-delay: 1.6s; }
  @keyframes vpPop { from { opacity: 0; transform: scale(.4); transform-origin: center; transform-box: fill-box; } to { opacity: 1; transform: scale(1); transform-origin: center; transform-box: fill-box; } }
}

/* signals orbit a profit core */
.vig-orbit { isolation: isolate; }
.vo-core {
  position: absolute; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--forest-600); color: var(--oat-100); box-shadow: var(--sh-brand); z-index: 2;
}
.vo-core b { font: 400 .82rem var(--serif); letter-spacing: .02em; }
.vo-ring { position: absolute; width: 142px; height: 142px; border-radius: 50%; border: 1.5px dashed var(--forest-300); opacity: .65; }
.vo-sats { position: absolute; width: 142px; height: 142px; }
.vo-sats span {
  position: absolute; left: 50%; top: 50%;
  transform: rotate(var(--a)) translateX(71px) rotate(calc(-1 * var(--a)));
  translate: -50% -50%;
  font: 600 .64rem var(--mono); color: var(--forest-700);
  background: var(--card); border: 1px solid var(--forest-100); border-radius: 999px; padding: 4px 10px;
  box-shadow: var(--sh-sm); white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes voSpin { to { rotate: 360deg; } }
  @keyframes voCounter { to { rotate: -360deg; } }
  .vo-sats { animation: voSpin 26s linear infinite; }
  .vo-sats span { animation: voCounter 26s linear infinite; }
  @keyframes voBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
  .vo-core { animation: voBreath 4s var(--ease) infinite; }
}

/* ---- CTA horizon bookend ---- */
.cta.band-dark { position: relative; padding: 160px 0; }
.cta-horizon {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%;
  pointer-events: none; display: block;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 52%); mask-image: linear-gradient(180deg, transparent, #000 52%);
}
.cta.band-dark .wrap { position: relative; z-index: 1; }

/* ---- contrast card: loop-closing ring ---- */
.ring-draw { width: 46px; height: 46px; }
.rd-c { stroke: rgba(232,201,106,.85); stroke-width: 2.5; stroke-linecap: round; }
.rd-tick { stroke: var(--gold-light); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .rd-c { stroke-dasharray: 126; stroke-dashoffset: 126; }
  .rd-tick { stroke-dasharray: 30; stroke-dashoffset: 30; }
  .reveal-stagger.in .rd-c { animation: vpDraw 1s var(--ease-out) .3s forwards; }
  .reveal-stagger.in .rd-tick { animation: vpDraw .5s var(--ease-out) 1.2s forwards; }
}

/* ---- loop rail: continuous energy flow ---- */
@media (prefers-reduced-motion: no-preference) {
  .loop-strip::before {
    background: repeating-linear-gradient(90deg, var(--forest-100) 0 14px, rgba(156,191,157,.25) 14px 22px);
    background-size: 44px 100%; animation: railFlow 1.6s linear infinite; opacity: .8;
  }
  @keyframes railFlow { to { background-position: 44px 0; } }
}

@media (max-width: 980px) {
  .night-ops { padding: 16px; }
  .no-row { grid-template-columns: 96px 1fr; }
  .vig { height: 158px; }
}

/* ============================================================
   v7 — human-review fixes (de-template + idea/vision visuals)
   ============================================================ */

/* ---- Operation Assistant: plain-language Q -> one clean answer ---- */
.copilot-strip { grid-template-columns: auto 1fr 340px; }
.copilot-convo { display: flex; flex-direction: column; gap: 10px; }
.cc-ask {
  align-self: flex-end; max-width: 82%; background: var(--forest-600); color: var(--oat-100);
  border-radius: 16px 16px 4px 16px; padding: 11px 15px; font: 500 .92rem var(--sans);
  line-height: 1.4; box-shadow: var(--sh-brand);
}
.cc-answer { background: var(--card); border: 1px solid var(--hair); border-radius: 16px 16px 16px 4px; padding: 15px 17px; box-shadow: var(--sh-card); }
.cc-by { display: inline-flex; align-items: center; gap: 6px; font: 700 .6rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--forest-600); margin-bottom: 8px; }
.cc-by i { width: 7px; height: 7px; border-radius: 50%; background: var(--success-600); }
.cc-answer p { font: 500 1.04rem var(--sans); color: var(--neutral-900); line-height: 1.5; margin: 0 0 12px; }
.cc-answer p strong { color: var(--forest-700); font-weight: 700; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cc-chips span { font: 600 .72rem var(--mono); color: var(--forest-700); background: var(--forest-050); border: 1px solid var(--forest-100); border-radius: 999px; padding: 5px 11px; }
.cc-act { font: 500 .78rem var(--sans); color: var(--muted); padding-top: 11px; border-top: 1px solid var(--hair); }
@media (prefers-reduced-motion: no-preference) {
  .copilot-strip.reveal.in .cc-ask { animation: rowIn .5s var(--ease-out) .15s backwards; }
  .copilot-strip.reveal.in .cc-answer { animation: rowIn .55s var(--ease-out) .45s backwards; }
}

/* ---- Operator Kernel: hub-and-spoke (one core, capabilities orbiting) ---- */
/* kernel CSS rebuilt below */

/* ---- G. hero subline contrast lift ---- */
.home-hero .lead .lead-soft { color: var(--forest-100); }

/* ---- H. lift two weak bento cells to vignette quality ---- */
.bento-cell .viz-radar { width: 58px; height: 58px; }
.bento-cell .viz-radar b:nth-child(1) { top: 15px; right: 16px; }
.bento-cell .viz-radar b:nth-child(2) { bottom: 12px; left: 18px; }
.viz-ledger { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.viz-ledger i { display: block; height: 7px; border-radius: 99px; background: var(--forest-300); position: relative; }
.viz-ledger i:nth-child(1) { width: 30px; opacity: .4; }
.viz-ledger i:nth-child(2) { width: 44px; opacity: .65; }
.viz-ledger i:nth-child(3) { width: 58px; opacity: .9; }
.viz-ledger i:nth-child(3)::after { content: "+"; position: absolute; right: -16px; top: -5px; font: 700 .9rem var(--sans); color: var(--success-600); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes ledgerGrow { from { width: 14px; opacity: .3; } }
  .bento-cell:hover .viz-ledger i { animation: ledgerGrow .5s var(--ease-out) backwards; }
  .bento-cell:hover .viz-ledger i:nth-child(2) { animation-delay: .08s; }
  .bento-cell:hover .viz-ledger i:nth-child(3) { animation-delay: .16s; }
}

/* ---- C. mobile hero gutter / no clipping (grid item min-width:0 fix) ---- */
@media (max-width: 760px) {
  .home-hero-grid > div { min-width: 0; }
  .home-hero .eyebrow { display: flex; flex-wrap: wrap; row-gap: 4px; }
  .home-hero h1, .home-hero .lead { max-width: 100%; overflow-wrap: break-word; }
}

/* ---- D. vision horizon: grade into the brand palette (owned, not stock) ---- */
.vision-horizon { filter: saturate(.82) brightness(.97) hue-rotate(-6deg) contrast(1.03); }
.vision-band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 440px; z-index: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(62,91,63,.22), transparent 55%), linear-gradient(180deg, transparent 40%, rgba(22,36,29,.18));
  mix-blend-mode: multiply;
}
.vision-band > .wrap { position: relative; z-index: 1; }

/* ============================================================
   v8 — interaction polish
   ============================================================ */
/* (v8 night-ops loop + slack replaced by v9 below) */

/* ============================================================
   v9 — interaction polish (magnetic, night-finish, kernel life, mobile loop)
   ============================================================ */

/* ---- Magnetic spring buttons ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .magnetic { transition: transform .3s var(--ease-out); }
  .magnetic:not(:active) { transform: translate(var(--mx, 0), var(--my, 0)) !important; }
  .magnetic:active { transform: translate(var(--mx, 0), var(--my, 0)) scale(.96) !important; transition: transform .09s var(--ease); }
}

/* ---- Slack float: clear of the Approve / See-evidence buttons ---- */
.home-hero .slack-float { left: -22px; bottom: -46px; max-width: 224px; }
@media (max-width: 980px) { .home-hero .slack-float { left: 6px; bottom: -34px; max-width: 240px; } }

/* ---- Night-ops: bars finish the night (default = done, reduced-motion safe) ---- */
.night-ops .no-line em { width: 100%; opacity: 1; }
.night-ops .no-row:nth-child(4) .no-line em { width: 64%; }
@media (prefers-reduced-motion: no-preference) {
  .night-ops .no-line em { width: 10%; opacity: .5; animation: none; }
  .night-ops .no-row:nth-child(4) .no-line em { width: 10%; }
  @keyframes noFill { to { width: 100%; opacity: 1; } }
  @keyframes noFillP { to { width: 64%; opacity: 1; } }
  .night-ops.is-working .no-row:nth-child(1) .no-line em { animation: noFill 1.5s var(--ease-out) .3s forwards; }
  .night-ops.is-working .no-row:nth-child(2) .no-line em { animation: noFill 1.5s var(--ease-out) 1.1s forwards; }
  .night-ops.is-working .no-row:nth-child(3) .no-line em { animation: noFill 1.5s var(--ease-out) 1.9s forwards; }
  .night-ops.is-working .no-row:nth-child(4) .no-line em { animation: noFillP 1.5s var(--ease-out) 2.7s forwards; }
  @keyframes briefPulse { 40% { box-shadow: 0 0 0 5px rgba(232,201,106,.26); } }
  .night-ops.briefs-ready footer { animation: briefPulse 1.1s var(--ease-out); }
}

/* ---- Operator Kernel: rings drift, nodes respond to hover ---- */
@media (prefers-reduced-motion: no-preference) {

/* ---- Mobile growth loop: vertical spine keeps the cycle legible ---- */
@media (max-width: 980px) {
  .loop-strip { grid-template-columns: 1fr; gap: 0; position: relative; }
  .loop-strip::before { display: block; content: ""; left: 27px; right: auto; top: 28px; bottom: 40px; width: 2px; height: auto; background: linear-gradient(180deg, var(--forest-100), var(--forest-300) 50%, var(--forest-100)); opacity: .9; }
  .loop-strip::after { display: block; content: ""; left: 27px; right: auto; top: 28px; width: 2px; height: calc(100% - 68px); transform-origin: top center; transform: scaleY(var(--loop-p, 0)); background: linear-gradient(180deg, var(--forest-500), var(--forest-700)); transition: transform .9s var(--ease-out); }
  .loop-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; row-gap: 4px; padding-bottom: 26px; align-items: start; }
  .loop-step > span { grid-row: 1 / span 3; margin-bottom: 0; }
  .loop-step > b { grid-column: 2; align-self: center; margin-top: 4px; }
  .loop-step .viz, .loop-step > p { grid-column: 2; }
}

/* ---- Growth loop: the return arc that closes the cycle (desktop) ---- */
.loop-return { display: none; position: relative; height: 54px; margin-top: 14px; }
@media (min-width: 981px) { .loop-return { display: block; } }
.loop-return svg { width: 92%; height: 100%; margin: 0 auto; display: block; overflow: visible; }
.loop-return .lr-path { stroke: var(--forest-300); stroke-width: 1.8; stroke-dasharray: 4 7; stroke-linecap: round; opacity: .7; }
.loop-return .lr-tip { position: absolute; left: 4%; top: 8px; width: 0; height: 0; border: 5px solid transparent; border-right-color: var(--forest-400); border-bottom: 0; transform: rotate(-28deg); }
.loop-return .lr-label { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); font: 600 .64rem var(--mono); letter-spacing: .04em; color: var(--forest-400); background: var(--oat-100); padding: 0 12px; }
@media (prefers-reduced-motion: no-preference) {
  .lr-path { stroke-dashoffset: 0; animation: lrFlow 1.4s linear infinite; }
  @keyframes lrFlow { to { stroke-dashoffset: -22; } }
}

/* ============================================================
   Operator Kernel — system core (v11): atmosphere + energy connections
   + rotating scanner + elevated glass node-chips
   ============================================================ */
.kernel-orbit { position: relative; height: 452px; max-width: 660px; margin: 24px auto 0; }
.ko-web { position: absolute; left: 50%; top: 50%; width: 452px; height: 452px; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.ko-halo { transform-box: fill-box; transform-origin: center; }
.ko-guide { fill: none; stroke: rgba(217,232,218,.065); stroke-width: 1; }
.ko-orbit { fill: none; stroke: rgba(232,201,106,.17); stroke-width: 1; }
.ko-scan { fill: none; stroke: rgba(232,201,106,.7); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 70 922; filter: drop-shadow(0 0 5px rgba(232,201,106,.6)); transform-box: fill-box; transform-origin: center; }
.ko-conn { stroke: rgba(217,232,218,.10); stroke-width: 1; }
.ko-pulse { stroke: var(--gold-light); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 10 148; filter: drop-shadow(0 0 4px rgba(232,201,106,.85)); }

.ko-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: 174px; height: 174px; border-radius: 50%; display: grid; place-items: center; gap: 8px; text-align: center; border: 1.5px solid transparent;
  background: radial-gradient(circle at 50% 34%, #2c4530, #16241d 74%);
  box-shadow: 0 0 84px -6px rgba(201,168,76,.5), inset 0 2px 20px rgba(232,201,106,.12), inset 0 -12px 32px rgba(0,0,0,.5), 0 30px 64px -22px rgba(0,0,0,.78); }
.ko-core::before { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; padding: 1.5px; background: linear-gradient(150deg, rgba(232,201,106,.85), rgba(232,201,106,.12) 52%, rgba(232,201,106,.55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.ko-core-ring { position: absolute; width: 174px; height: 174px; border-radius: 50%; border: 1px solid rgba(232,201,106,.4); pointer-events: none; }
.ko-core em { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--gold-light); }
.ko-core em::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px solid rgba(232,201,106,.5); }
.ko-core em::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-light); transform: translate(-50%,-50%); box-shadow: 0 0 8px rgba(232,201,106,.9); }
.ko-core b { position: relative; z-index: 1; font: 400 1.14rem var(--serif); color: var(--oat-100); line-height: 1.08; letter-spacing: .01em; }

.ko-nodes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; }
.ko-nodes li { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-158px) rotate(calc(-1 * var(--a))); display: flex; flex-direction: column; align-items: center; gap: 10px; width: 122px; }
.ko-nodes li i { position: relative; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; border: 1px solid transparent;
  background: linear-gradient(155deg, rgba(232,201,106,.14), rgba(217,232,218,.04) 62%), rgba(22,36,29,.66);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), background .28s; }
.ko-nodes li i::before { content: ""; position: absolute; inset: 0; border-radius: 15px; padding: 1px; background: linear-gradient(155deg, rgba(232,201,106,.62), rgba(232,201,106,.1) 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.ko-nodes li i svg { width: 23px; height: 23px; fill: none; stroke: var(--gold-light); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ko-nodes li span { font: 600 .8rem var(--sans); color: var(--oat-100); text-align: center; line-height: 1.25; }
.ko-nodes li:hover i { transform: translateY(-4px) scale(1.05); box-shadow: 0 18px 34px -10px rgba(201,168,76,.6), inset 0 1px 0 rgba(255,255,255,.09); background: linear-gradient(155deg, rgba(232,201,106,.28), rgba(217,232,218,.06) 62%), rgba(22,36,29,.66); }

@media (prefers-reduced-motion: no-preference) {
  .ko-core em { animation: koSpin 9s linear infinite; }
  @keyframes koSpin { to { transform: rotate(360deg); } }
  .ko-scan { animation: koScan 9s linear infinite; }
  @keyframes koScan { to { transform: rotate(360deg); } }
  .ko-halo { animation: koBreathe 5s ease-in-out infinite; }
  @keyframes koBreathe { 0%,100% { opacity: .82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
  .ko-core-ring { animation: koRingPulse 3.6s ease-out infinite; }
  @keyframes koRingPulse { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(1.34); opacity: 0; } }
  .ko-pulse { animation: koFlow 2.6s linear infinite; }
  @keyframes koFlow { from { stroke-dashoffset: 158; } to { stroke-dashoffset: 0; } }
  @keyframes koPop { from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-124px) rotate(calc(-1 * var(--a))); } }
  .kernel-orbit.reveal.in .ko-nodes li { animation: koPop .6s var(--ease-out) backwards; }
  .kernel-orbit.reveal.in .ko-nodes li:nth-child(1) { animation-delay: .15s; }
  .kernel-orbit.reveal.in .ko-nodes li:nth-child(2) { animation-delay: .24s; }
  .kernel-orbit.reveal.in .ko-nodes li:nth-child(3) { animation-delay: .33s; }
  .kernel-orbit.reveal.in .ko-nodes li:nth-child(4) { animation-delay: .42s; }
  .kernel-orbit.reveal.in .ko-nodes li:nth-child(5) { animation-delay: .51s; }
  .kernel-orbit.reveal.in .ko-nodes li:nth-child(6) { animation-delay: .60s; }
  .kernel-orbit.reveal.in .ko-nodes li:nth-child(7) { animation-delay: .69s; }
}
@media (prefers-reduced-motion: reduce) { .ko-pulse { opacity: .45; stroke-dasharray: 4 9; } }
@media (max-width: 760px) {
  .kernel-orbit { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; max-width: 470px; }
  .ko-web { display: none; }
  .ko-core { position: static; transform: none; grid-column: 1 / -1; width: auto; height: auto; min-height: 0; border-radius: var(--r-card); flex-direction: row; justify-content: center; gap: 14px; padding: 22px; display: flex; align-items: center; }
  .ko-core-ring { display: none; }
  .ko-core b { font-size: 1.24rem; }
  .ko-nodes { position: static; display: contents; }
  .ko-nodes li { position: static; transform: none !important; width: auto; flex-direction: row; gap: 12px; justify-content: flex-start; align-items: center; background: rgba(217,232,218,.05); border: 1px solid var(--hair-dark); border-radius: 14px; padding: 14px; }
  .ko-nodes li i { width: 44px; height: 44px; }
  .ko-nodes li span { text-align: left; }
}

/* ============================================================
   Operation Assistant — two-pane console (v10): identity rail +
   live chat surface. Replaces the left/right split with empty middle.
   ============================================================ */
.copilot-card {
  display: grid; grid-template-columns: minmax(258px, 336px) 1fr;
  background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r-card); box-shadow: var(--sh-card); overflow: hidden;
}
.cpc-id {
  padding: 32px 30px; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; border-right: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(237,244,237,.6), transparent 58%);
}
.cpc-avatar {
  position: relative; width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; font: 400 1.55rem var(--serif); color: var(--oat-100);
  background: linear-gradient(150deg, var(--forest-600), var(--forest-800));
  box-shadow: var(--sh-brand); margin-bottom: 18px;
}
.cpc-avatar i {
  position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--success-600); border: 2.5px solid var(--card);
}
.cpc-badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: var(--r-pill);
  font: 600 .72rem var(--sans); letter-spacing: .04em; background: var(--forest-050);
  color: var(--forest-700); border: 1px solid var(--forest-100); margin-bottom: 13px;
}
.cpc-id h3 { margin: 0 0 9px; font-size: 1.22rem; line-height: 1.18; }
.cpc-id p { color: var(--muted); font-size: .9rem; line-height: 1.62; margin: 0 0 17px; }
.cpc-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.cpc-tags span {
  font: 600 .67rem var(--mono); color: var(--forest-700); background: var(--card);
  border: 1px solid var(--forest-100); border-radius: 999px; padding: 4px 10px;
}
.cpc-chat {
  position: relative; padding: 26px 26px; display: flex; flex-direction: column; gap: 14px;
  justify-content: center;
  background: radial-gradient(130% 90% at 100% 0%, rgba(62,91,63,.055), transparent 56%), var(--oat-100);
}
.cpc-chat .copilot-convo { gap: 10px; }
.cpc-input {
  display: flex; align-items: center; gap: 10px; margin-top: 4px;
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-pill);
  padding: 8px 8px 8px 16px; box-shadow: var(--sh-sm);
}
.cpc-input span { flex: 1; font: 500 .84rem var(--sans); color: #A8A8A1; }
.cpc-input b {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  color: var(--oat-100); background: var(--forest-600); font-size: .95rem; font-weight: 400;
}
.cc-act { display: flex; align-items: center; gap: 8px; }
.cc-act-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(201,168,76,.18); }
@media (prefers-reduced-motion: no-preference) {
  .cpc-input b { transition: transform .25s var(--ease-out); }
  .copilot-card:hover .cpc-input b { transform: translateY(-2px); }
}
@media (max-width: 760px) {
  .copilot-card { grid-template-columns: 1fr; }
  .cpc-id { border-right: none; border-bottom: 1px solid var(--hair); padding: 26px 22px; }
  .cpc-chat { padding: 22px; }
}