/* =========================================================================
   OrderCore — "Commerce Engine" visual system (engine.css)
   Direction A: PRECISION COMMERCE ENGINE — dark, premium, technical.
   AI-native commerce infrastructure identity. Layered on top of system.css
   tokens where useful, but defines its own dark palette + the engine visual.
   Verifiable with CSS 3D + SVG + Canvas (no hard WebGL dependency).
   ========================================================================= */

:root {
  /* ---- Dark premium palette (AI-native commerce infrastructure) --------- */
  --e-void: #08080b;          /* deepest background */
  --e-bg: #0b0b10;            /* page background */
  --e-bg-2: #101018;          /* raised panel */
  --e-surface: #14141d;       /* card surface */
  --e-surface-2: #1a1a26;
  --e-line: rgba(255,255,255,.08);
  --e-line-2: rgba(255,255,255,.14);
  --e-ink: #f5f5f7;           /* primary text */
  --e-ink-2: #b3b3c0;         /* secondary */
  --e-ink-3: #7a7a8c;         /* muted */

  /* Duotone system that maps to the product story:
     orange = the moving request / energy / CTA
     mint   = verified / retry-safe / success
     violet = agent/protocol intelligence
     red    = controlled conflict (409) */
  --e-energy: #ff6a2b;        /* request / primary CTA (OrderCore signature) */
  --e-energy-2: #ff9152;
  --e-verified: #2de2c6;      /* retry-safe / settled / verified (settlement teal) */
  --e-agent: #8b7cff;         /* agent / protocol — used sparingly, glow only */
  --e-conflict: #ff5470;      /* 409 conflict */
  --e-energy-glow: rgba(255,106,43,.5);
  --e-verified-glow: rgba(45,226,198,.5);

  /* Type */
  --e-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --e-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --e-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --e-t-hero: clamp(2.7rem, 5.6vw, 5rem);
  --e-t-h2: clamp(1.7rem, 3.2vw, 2.6rem);
  --e-t-lead: clamp(1.05rem, 1.35vw, 1.3rem);

  /* Motion tokens */
  --e-ease-out: cubic-bezier(.16, 1, .3, 1);       /* expo-out */
  --e-ease-inout: cubic-bezier(.65, 0, .35, 1);
  --e-dur-1: .18s; --e-dur-2: .34s; --e-dur-3: .6s;

  --e-maxw: 1200px;
  --e-gutter: clamp(18px, 4vw, 44px);
}

/* =========================================================================
   Dark-theme token remap: reuse ALL of system.css's oc- components but recolor
   them for the AI-native dark identity by overriding the design tokens. This
   keeps the entire conversion funnel markup intact while transforming the look.
   ========================================================================= */
body.e-dark {
  --oc-paper: var(--e-bg);
  --oc-paper-2: var(--e-bg-2);
  --oc-card: var(--e-surface);
  --oc-ink: var(--e-ink);
  --oc-ink-2: var(--e-ink-2);
  --oc-ink-3: var(--e-ink-3);
  --oc-line: var(--e-line);
  --oc-line-2: var(--e-line-2);
  --oc-accent: var(--e-energy);
  --oc-accent-ink: #12100c;   /* dark ink on the energy gradient: 6.65-8.53:1 (AA/AAA). White was 2.23-2.86:1. */
  --oc-signal: var(--e-verified);
  --oc-blue: #86a8ff;
  --oc-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.5);
  --oc-shadow-brut: 0 10px 30px rgba(0,0,0,.5);              /* no light offset on dark */
  --oc-shadow-brut-accent: 0 12px 34px rgba(255,106,43,.28);
  background: var(--e-bg);
  color: var(--e-ink);
}
/* Component nudges so the light-first oc- system reads correctly in the dark. */
body.e-dark .oc-nav { background: color-mix(in srgb, var(--e-bg) 82%, transparent); border-bottom-color: var(--e-line); }
body.e-dark .oc-card--brut { border-color: var(--e-line-2); }
body.e-dark .oc-btn--primary { background: linear-gradient(180deg, var(--e-energy-2), var(--e-energy)); border-color: transparent; box-shadow: 0 6px 22px rgba(255,106,43,.3), inset 0 1px 0 rgba(255,255,255,.25); }
body.e-dark .oc-btn--primary:hover { box-shadow: 0 12px 34px rgba(255,106,43,.42); transform: translateY(-2px); }
body.e-dark .oc-btn--signal { background: var(--e-verified); color: #04120e; border-color: transparent; box-shadow: 0 6px 22px var(--e-verified-glow); }
body.e-dark .oc-btn--ghost { color: var(--e-ink); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); }
body.e-dark .oc-btn--ghost:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.09); }
body.e-dark .oc-brand__mark { background: var(--e-energy); color: #fff; box-shadow: 0 0 16px var(--e-energy-glow); }
body.e-dark .oc-brand { color: var(--e-ink); }
body.e-dark .oc-pill { background: rgba(255,255,255,.03); border-color: var(--e-line-2); color: var(--e-ink-2); }
body.e-dark .oc-pill--accent { border-color: var(--e-verified); color: var(--e-verified); }
body.e-dark .oc-footer { background: var(--e-void); }
body.e-dark .oc-section--tint { background: var(--e-bg-2); border-color: var(--e-line); }
body.e-dark .oc-strip { background: var(--e-void); color: var(--e-verified); border-bottom: 1px solid var(--e-line); }
body.e-dark code:not(.oc-code pre code) { background: rgba(255,255,255,.05); border-color: var(--e-line-2); color: var(--e-ink); }
/* Hover depth — cards feel alive (transform/border only; reduced-motion safe) */
body.e-dark .oc-card { transition: transform var(--e-dur-2) var(--e-ease-out), border-color var(--e-dur-2) var(--e-ease-out), box-shadow var(--e-dur-3) var(--e-ease-out); }
body.e-dark .oc-trypath:hover, body.e-dark #trust .oc-card:hover { transform: translateY(-3px); border-color: var(--e-line-2); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
body.e-dark .oc-price:hover { transform: translateY(-3px); }
body.e-dark a:not(.oc-btn):not(.e-btn):not(.oc-brand):hover { color: var(--e-verified); }
@media (prefers-reduced-motion: reduce) { body.e-dark .oc-card, body.e-dark .oc-price { transition: none; transform: none !important; } }

/* ── Marketing dark bridge ───────────────────────────────────────────────────
   marketing.css ships a separate LIGHT editorial theme via
   `body.marketing-page:not(.review-page)` (cream --mk-bg). Under the unified dark
   flagship system those pages (bootstrap, acp) must read dark. This selector adds
   one extra class (.e-dark) → higher specificity than the light block, so it wins
   regardless of stylesheet order. It restores marketing's own proven dark palette
   (marketing.css :root) and aligns the accent to the flagship energy orange. */
body.e-dark.marketing-page:not(.review-page) {
  --mk-bg: #0b0b10;
  --mk-bg-soft: #0e1116;
  --mk-panel: #12161d;
  --mk-panel-raised: #171c24;
  --mk-line: #2a313d;
  --mk-line-strong: #465064;
  --mk-text: #f4f5f2;
  --mk-muted: #aab2c0;
  --mk-dim: #7f8999;
  --mk-accent: #ff6a2b;
  --mk-accent-hover: #ff9347;
  --mk-signal: #d7ff64;
  --mk-cyan: #70e1f5;
  color: var(--mk-text);
  background:
    radial-gradient(circle at 18% -10%, rgba(255, 106, 43, 0.15), transparent 30rem),
    radial-gradient(circle at 90% 15%, rgba(112, 225, 245, 0.07), transparent 28rem),
    var(--mk-bg);
  font-family: "Bricolage Grotesque", "IBM Plex Sans", sans-serif;
}
/* the light block hides the ::before texture; restore nothing (dark bg needs none) */

/* The marketing "editorial" hero (acp) hardcodes near-black (#171916) text +
   dark text-stroke/shadow tuned for the LIGHT theme. Higher specificity than the
   light block so these read on dark. Decorative lime shapes stay (lime-on-dark is
   fine); only the light-only ink is remapped. */
body.e-dark.marketing-page:not(.review-page) .mk-hero h1 { color: var(--mk-text); }
body.e-dark.marketing-page:not(.review-page) .mk-hero h1 em {
  color: var(--mk-accent);
  -webkit-text-stroke: 0;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
}
body.e-dark.marketing-page:not(.review-page) .mk-lede { color: var(--mk-muted); }
body.e-dark.marketing-page:not(.review-page) .mk-assurance { color: var(--mk-muted); }
body.e-dark.marketing-page:not(.review-page) .mk-assurance li::before { border-color: var(--mk-line-strong); color: #06210b; }
body.e-dark.marketing-page:not(.review-page) .mk-kicker { color: var(--mk-muted); }
body.e-dark.marketing-page:not(.review-page) .mk-kicker::before { border-color: var(--mk-line-strong); }
body.e-dark.marketing-page:not(.review-page) .mk-hero::after { border-color: rgba(255, 255, 255, 0.16); color: rgba(0, 0, 0, 0.12); }
body.e-dark.marketing-page:not(.review-page) .window-bar { color: #f3efe4; }
/* acp has its OWN hero (.acp-hero, not .mk-hero) with hardcoded light-theme ink
   and a big lime ::before square that overpowers the (now dark-invisible) headline. */
body.e-dark.acp-page .acp-hero h1 { color: var(--mk-text); }
body.e-dark.acp-page .acp-hero h1 em { color: #fffdf6; -webkit-text-stroke: 0; text-shadow: 4px 4px 0 rgba(45, 226, 198, 0.6); }
body.e-dark.acp-page .acp-hero::before { opacity: 0.4; border-color: rgba(255, 255, 255, 0.14); }

/* ---- Base ---------------------------------------------------------------- */
.e-root {
  background: var(--e-bg);
  color: var(--e-ink);
  font-family: var(--e-font-body);
  -webkit-font-smoothing: antialiased;
  /* subtle engineered grid + radial glow behind the engine */
  background-image:
    radial-gradient(120% 80% at 78% 18%, rgba(139,124,255,.10), transparent 60%),
    radial-gradient(90% 70% at 82% 30%, rgba(255,106,43,.10), transparent 55%),
    linear-gradient(var(--e-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--e-line) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  background-position: 0 0, 0 0, -1px -1px, -1px -1px;
}
.e-shell { width: 100%; max-width: var(--e-maxw); margin-inline: auto; padding-inline: var(--e-gutter); }

/* ---- Hero layout --------------------------------------------------------- */
.e-hero { position: relative; min-height: 92vh; display: grid; align-items: center; padding-block: clamp(90px, 12vh, 150px) clamp(40px,7vh,90px); overflow: hidden; }
.e-hero__grid { display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr); gap: clamp(24px,4vw,56px); align-items: center; }
.e-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--e-font-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--e-ink-2); border: 1px solid var(--e-line-2); border-radius: 999px; padding: 7px 14px; background: rgba(255,255,255,.02); }
.e-eyebrow .d { width: 7px; height: 7px; border-radius: 50%; background: var(--e-verified); box-shadow: 0 0 10px var(--e-verified-glow); }
.e-hero h1 { font-family: var(--e-font-display); font-weight: 700; font-size: var(--e-t-hero); line-height: 1.02; letter-spacing: -.028em; margin: .5em 0 .32em; }
.e-hero h1 .grad { background: linear-gradient(100deg, var(--e-energy) 0%, var(--e-energy-2) 45%, var(--e-verified) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.e-lead { font-size: var(--e-t-lead); line-height: 1.55; color: var(--e-ink-2); max-width: 46ch; }
.e-lead strong { color: var(--e-ink); font-weight: 650; }
.e-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.e-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.e-chip { font-family: var(--e-font-mono); font-size: .74rem; letter-spacing: .04em; color: var(--e-ink-2); border: 1px solid var(--e-line-2); border-radius: 8px; padding: 6px 11px; background: rgba(255,255,255,.015); transition: color var(--e-dur-1) var(--e-ease-out), border-color var(--e-dur-1) var(--e-ease-out), transform var(--e-dur-1) var(--e-ease-out); }
.e-chip:hover { color: var(--e-ink); border-color: var(--e-line-2); transform: translateY(-1px); }
.e-chip--on { color: var(--e-void); background: var(--e-verified); border-color: var(--e-verified); box-shadow: 0 0 16px var(--e-verified-glow); }

/* ---- Buttons ------------------------------------------------------------- */
.e-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 13px 24px; border-radius: 12px; font-weight: 650; font-size: 1rem; line-height: 1; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: transform var(--e-dur-1) var(--e-ease-out), box-shadow var(--e-dur-2) var(--e-ease-out), background var(--e-dur-2); white-space: nowrap; }
.e-btn:hover { text-decoration: none; }
.e-btn--primary { color: var(--oc-accent-ink, #12100c); background: linear-gradient(180deg, var(--e-energy-2), var(--e-energy)); box-shadow: 0 6px 22px rgba(255,106,43,.32), inset 0 1px 0 rgba(255,255,255,.25); }
.e-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(255,106,43,.42), inset 0 1px 0 rgba(255,255,255,.3); }
.e-btn--ghost { color: var(--e-ink); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.e-btn--ghost:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.1); transform: translateY(-2px); }

/* =========================================================================
   THE COMMERCE ENGINE — layered exploded axonometric machine
   ========================================================================= */
.engine-stage { position: relative; perspective: 1400px; perspective-origin: 50% 42%; min-height: 520px; display: grid; place-items: center; }
.engine { position: relative; width: min(460px, 82vw); aspect-ratio: 1/1; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(var(--spin, -22deg)); will-change: transform; }

/* Each layer is a disc floating at a Z height; scroll separates them further */
.e-layer { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--z) * 1px * var(--explode, 1))); transition: transform var(--e-dur-3) var(--e-ease-out); }
.e-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.e-layer .disc { transition: opacity var(--e-dur-2); }

/* Layer label tab that faces the camera (counter-rotated) */
.e-label { position: absolute; left: 100%; top: 50%; transform-origin: left center; transform: translateY(-50%) rotateZ(calc(var(--spin, -22deg) * -1)) rotateX(-58deg) translateX(12px); white-space: nowrap; font-family: var(--e-font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--e-ink-2); display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity var(--e-dur-3) var(--e-ease-out); pointer-events: none; }
.e-label .tick { width: 22px; height: 1px; background: var(--e-line-2); }
.e-label b { color: var(--e-ink); font-weight: 600; }
.engine.is-exploded .e-label { opacity: 1; }

/* Core glow */
.e-core-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--e-energy-glow), transparent 62%); filter: blur(14px); transform: translateZ(0); opacity: .9; }

/* Vertical axis + traveling packet (canvas overlay lives in .engine-fx) */
.engine-fx { position: absolute; inset: 0; pointer-events: none; }
.engine-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Floating status readout near the engine */
.e-readout { position: absolute; z-index: 5; font-family: var(--e-font-mono); font-size: .72rem; background: rgba(14,14,22,.9); border: 1px solid var(--e-line-2); border-radius: 10px; padding: 9px 12px; backdrop-filter: blur(8px); color: var(--e-ink-2); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.e-readout b { color: var(--e-ink); font-weight: 600; }
.e-readout .ok { color: var(--e-verified); }
.e-readout--tl { top: 6%; left: -2%; }
.e-readout--br { bottom: 8%; right: -2%; }

/* ---- Hero entrance (pure CSS, above-the-fold — never JS-gated) ---------- */
.hero-in { animation: heroIn .7s var(--e-ease-out) both; }
.hi1 { animation-delay: .05s; } .hi2 { animation-delay: .12s; } .hi3 { animation-delay: .19s; } .hi4 { animation-delay: .26s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-in { animation: none; } }

/* ---- Nav collapses to the mobile menu earlier (tablet fits) ------------- */
@media (max-width: 900px) {
  .oc-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid var(--e-line-2); border-radius: 8px; background: rgba(255,255,255,.05); color: var(--e-ink); cursor: pointer; }
  .oc-nav__links { position: fixed; inset: var(--oc-nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--e-bg-2); border-bottom: 1px solid var(--e-line); padding: 12px var(--e-gutter) 24px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
  .oc-nav__links a { padding: 14px 4px; border-bottom: 1px solid var(--e-line); }
  .oc-nav[data-open="true"] .oc-nav__links { transform: none; opacity: 1; pointer-events: auto; }
  .oc-nav__links .oc-btn { margin-top: 12px; }
}

/* ---- Reveal motion (below-the-fold only) ------------------------------- */
.e-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--e-ease-out), transform .7s var(--e-ease-out); }
.e-reveal.in { opacity: 1; transform: none; }
.e-reveal.d1 { transition-delay: .06s; } .e-reveal.d2 { transition-delay: .12s; } .e-reveal.d3 { transition-delay: .18s; } .e-reveal.d4 { transition-delay: .24s; }

@media (max-width: 900px) {
  .e-hero { min-height: auto; padding-block: clamp(48px,10vh,80px) clamp(32px,6vh,56px); }
  .e-hero__grid { grid-template-columns: 1fr; gap: 20px; }
  .e-hero h1 { font-size: clamp(2.3rem, 9vw, 3.2rem); }
  .engine-stage { min-height: 340px; order: 1; margin-top: 8px; }   /* engine below copy on mobile */
  .commerce-engine { width: min(420px, 96%); }
  .e-readout { font-size: .66rem; }
  .e-readout--tl { top: 0; left: 0; } .e-readout--br { bottom: 0; right: 0; }
  .e-cta-row .e-btn { flex: 1 1 auto; }
}
@media (max-width: 620px) {
  /* Small screens: show the machine, drop the side labels (they don't fit);
     keep the readouts + the packet story. Intentional, not hidden. */
  .commerce-engine { width: min(340px, 92%); }
  .commerce-engine .eng-label { display: none; }
  .engine-stage { min-height: 300px; }
}

/* Protocol switcher — one core, every standard */
.e-protocols { max-width: 760px; margin-inline: auto; }
.e-proto-tabs { position: relative; display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--e-line-2); border-radius: 999px; background: rgba(255,255,255,.02); margin-bottom: 18px; }
.e-proto-tab { position: relative; z-index: 1; appearance: none; background: transparent; border: 0; cursor: pointer; font-family: var(--e-font-mono); font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--e-ink-3); padding: 9px 18px; border-radius: 999px; transition: color var(--e-dur-2) var(--e-ease-out); }
.e-proto-tab:hover { color: var(--e-ink-2); }
.e-proto-tab.is-on { color: var(--e-void); }
.e-proto-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 60px; border-radius: 999px; background: var(--e-verified); box-shadow: 0 0 16px var(--e-verified-glow); transition: transform var(--e-dur-3) var(--e-ease-out), width var(--e-dur-3) var(--e-ease-out); }
.e-proto-panel pre { min-height: 176px; }
.e-proto-panel code { transition: opacity var(--e-dur-2) var(--e-ease-out); display: block; }
.e-proto-panel.is-swapping code { opacity: 0; }
@media (max-width: 560px) { .e-proto-tabs { display: flex; width: 100%; } .e-proto-tab { flex: 1; padding: 9px 6px; } }

/* =========================================================================
   Commerce Engine — SVG geometry styling + choreography
   ========================================================================= */
.commerce-engine { width: min(560px, 92%); height: auto; overflow: visible; display: block; margin-inline: auto; filter: drop-shadow(0 40px 80px rgba(0,0,0,.55)); }
.eng-shadow { fill: #000; opacity: .28; filter: url(#glowSoft); }
.eng-plate { stroke: rgba(255,255,255,.17); stroke-width: 1.1; }
.eng-ring { fill: none; stroke: rgba(255,255,255,.075); stroke-width: 1; }
.eng-ticks line.min { stroke: rgba(255,255,255,.12); stroke-width: 1; }
.eng-ticks line.maj { stroke: rgba(255,255,255,.30); stroke-width: 1.3; }
.eng-rim { fill: none; stroke: rgba(255,255,255,.34); stroke-width: 1.2; }
.eng-spindle { stroke: url(#gSpindle); stroke-width: 2; opacity: .5; }
.eng-hub { fill: url(#gCore); filter: url(#glowE); }
.eng-dedupe { fill: none; stroke: var(--e-verified); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: .9; }

/* Layer separation on scroll (exploded axonometric). --explode set by JS 0→1. */
.eng-layer { transform-box: view-box; transform-origin: center; transform: translateY(calc((var(--i) - 3) * var(--explode, 0) * 15px)); transition: transform .8s var(--e-ease-inout); }

/* Labels: hidden until revealed/exploded */
.eng-label { opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--e-ease-out), transform .5s var(--e-ease-out); transition-delay: calc(var(--i) * 50ms); }
.eng-name { fill: var(--e-ink); font-family: var(--e-font-mono); font-size: 13px; font-weight: 600; }
.eng-sub { fill: var(--e-ink-3); font-family: var(--e-font-mono); font-size: 10.5px; }
.eng-lead { stroke: var(--e-line-2); stroke-width: 1; }
.eng-node { fill: var(--e-verified); }
.commerce-engine.is-open .eng-label { opacity: 1; transform: none; }

/* Traveling packet + retry (moved by JS via --pk / --rk 0..1 along spindle) */
.eng-packet, .eng-retry { transform-box: view-box; }
.pk-dot { fill: var(--e-energy); }
.pk-glow { fill: var(--e-energy); opacity: .5; filter: url(#glowE); }
.rk-dot { fill: var(--e-energy-2); opacity: .85; }
.eng-packet.is-verified .pk-dot { fill: var(--e-verified); }
.eng-packet.is-verified .pk-glow { fill: var(--e-verified); }

/* Packet flow — the request travels the spindle; a retry merges at idempotency.
   TOP=96, core(checkout i=5)=426 → Δ330, result(i=6)=492 → Δ396, idem(i=4)=360 → Δ264 */
@media (prefers-reduced-motion: no-preference) {
  .commerce-engine.is-open .eng-packet { animation: pkFlow 4.8s var(--e-ease-inout) infinite; }
  .commerce-engine.is-open .eng-retry { animation: rkFlow 4.8s var(--e-ease-inout) infinite; }
}
@keyframes pkFlow {
  0%,4% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translateY(330px); opacity: 1; }        /* arrives at checkout core */
  58% { transform: translateY(330px); }
  74% { transform: translateY(396px); opacity: 1; }        /* exits as verified result */
  80%,100% { transform: translateY(396px); opacity: 0; }
}
@keyframes rkFlow {
  0%,18% { transform: translateY(0); opacity: 0; }
  22% { opacity: .9; }
  44% { transform: translateY(264px); opacity: .9; }       /* reaches idempotency layer */
  52% { transform: translateY(264px); opacity: 0; }        /* de-duplicated — merged away */
  100% { transform: translateY(264px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .e-layer { transition: none; }
  .e-reveal { opacity: 1; transform: none; transition: none; }
  .eng-layer, .eng-label { transition: none; }
  .commerce-engine .eng-label { opacity: 1; transform: none; }
  .eng-packet, .eng-retry { display: none; }
}