/* Sales page upgrade — simple, glowing, animated. Dark mode (particle field) only. */

/* less clutter: no rotating tip, no scrolling ticker */
html.kx-dark .page-amazon .kx-tipday,
html.kx-dark .page-amazon .kx-momentum { display: none !important; }

/* header: greeting + LIVE on one clean line */
html.kx-dark .page-amazon .page-header { margin-bottom: 18px; }
html.kx-dark .page-amazon #kx-title { font-size: clamp(26px, 7vw, 40px); letter-spacing: -.02em; margin-bottom: 6px; color: #fff; text-shadow: 0 0 22px rgba(127,243,221,.35); }
html.kx-dark .page-amazon .page-subtitle { display: flex; align-items: center; gap: 8px; color: #9fb8b2; font-size: 14px; }
html.kx-dark .page-amazon .page-title::after { display: none !important; }

/* ===== hero: marching dotted outline + breathing glow ===== */
html.kx-dark .page-amazon .kx-hero { position: relative; overflow: visible; }
html.kx-dark .page-amazon .kx-hero::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1.6px;
  background: conic-gradient(from var(--upA, 0deg), transparent 0 70%, #7ff3dd 80%, #a78bfa 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: upOrbit 6s linear infinite; filter: drop-shadow(0 0 6px #7ff3dd);
}
@property --upA { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes upOrbit { to { --upA: 360deg; } }

/* stat tiles: each glows in turn, number pulses softly */
html.kx-dark .page-amazon .kx-hero .kx-stats > div { position: relative; transition: transform .25s cubic-bezier(.2,1.4,.3,1), box-shadow .25s, border-color .25s;
  animation: upTile 6s ease-in-out infinite; animation-delay: calc(var(--t, 0) * 1.5s); }
html.kx-dark .page-amazon .kx-hero .kx-stats > div:nth-child(1) { --t: 0 }
html.kx-dark .page-amazon .kx-hero .kx-stats > div:nth-child(2) { --t: 1 }
html.kx-dark .page-amazon .kx-hero .kx-stats > div:nth-child(3) { --t: 2 }
html.kx-dark .page-amazon .kx-hero .kx-stats > div:nth-child(4) { --t: 3 }
@keyframes upTile { 0%, 20%, 100% { border-color: rgba(127,243,221,.35); box-shadow: none; } 10% { border-color: rgba(127,243,221,.95); box-shadow: 0 0 22px rgba(127,243,221,.35), inset 0 0 16px rgba(127,243,221,.12); } }
html.kx-dark .page-amazon .kx-hero .kx-stats > div:hover { transform: translateY(-3px) scale(1.02); }
html.kx-dark .page-amazon .kx-hero .stat-value { color: #fff !important; text-shadow: 0 0 18px rgba(127,243,221,.45); }
html.kx-dark .page-amazon .kx-hero .kx-stats > div:nth-child(2) .stat-value { color: #7ff3dd !important; }
html.kx-dark .page-amazon .kx-delta { font-size: 12.5px !important; margin-top: 4px; }

/* streak: flame flickers */
html.kx-dark .page-amazon .kx-flame { display: inline-block; animation: upFlame 1.1s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes upFlame { 0% { transform: scale(1) rotate(-4deg); filter: drop-shadow(0 0 4px #ff9500); } 100% { transform: scale(1.18) rotate(5deg); filter: drop-shadow(0 0 10px #ffcf4a); } }
html.kx-dark .page-amazon .kx-streak { border: 1.6px dotted rgba(255,183,77,.7) !important; background: rgba(255,149,0,.08) !important; box-shadow: 0 0 18px rgba(255,149,0,.18); }

/* ===== "Do this today": pulsing call to action ===== */
html.kx-dark .page-amazon .kx-todo { position: relative; overflow: hidden; }
html.kx-dark .page-amazon .kx-todo::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,210,87,.16), transparent); transform: skewX(-18deg); animation: upSweep 4.5s ease-in-out infinite; }
@keyframes upSweep { 0%, 55% { left: -40%; } 100% { left: 130%; } }
html.kx-dark .page-amazon .kx-todo .kx-todo-k { color: #ffd257 !important; }
html.kx-dark .page-amazon .kx-todo-i { display: inline-block; animation: upWiggle 2.4s ease-in-out infinite; }
@keyframes upWiggle { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(12deg); } 94% { transform: rotate(-6deg); } }

/* ===== hub: 2-column glowing tiles ===== */
html.kx-dark .page-amazon .kx-hub-head { padding: 8px 2px 4px; }
html.kx-dark .page-amazon .kx-hub-head > span { color: #7ff3dd; letter-spacing: .2em; }
html.kx-dark .page-amazon .kx-hub-head h2 { margin: 4px 0 10px; font-size: 22px; }
html.kx-dark .page-amazon .kx-hub-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
@media (min-width: 900px) { html.kx-dark .page-amazon .kx-hub-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
html.kx-dark .page-amazon .kx-hub-tile { grid-template-columns: 1fr !important; justify-items: start; gap: 10px !important; min-height: 118px !important; padding: 14px !important; position: relative;
  animation: upTileIn .7s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--n) * 70ms); }
html.kx-dark .page-amazon .kx-hub-tile > i { position: absolute; top: 12px; right: 12px; opacity: .55; transition: transform .25s, opacity .25s; }
html.kx-dark .page-amazon .kx-hub-tile:hover > i { transform: translateX(3px); opacity: 1; }
html.kx-dark .page-amazon .kx-hub-tile b { font-size: 15px; line-height: 1.2; }
html.kx-dark .page-amazon .kx-hub-tile small { color: #8fa6a0; }
html.kx-dark .page-amazon .kx-hub-ic { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: none !important;
  border: 1.6px dotted rgba(127,243,221,.6); box-shadow: 0 0 14px rgba(127,243,221,.2); animation: upFloat 3.6s ease-in-out infinite; animation-delay: calc(var(--n) * -.45s); }
@keyframes upFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes upTileIn { from { opacity: 0; transform: translateY(18px) scale(.94); filter: blur(4px) brightness(1.8); } to { opacity: 1; transform: none; filter: none; } }
html.kx-dark .page-amazon .kx-hub-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(120px 80px at var(--mx, 50%) var(--my, 50%), rgba(127,243,221,.18), transparent 70%); }
html.kx-dark .page-amazon .kx-hub-tile:hover .kx-hub-glow { opacity: 1; }
html.kx-dark .page-amazon .kx-hub-tile:active { transform: scale(.96) !important; }

/* ===== cards build in from the centre as you scroll ===== */
html.kx-dark .page-amazon .kx-reveal { opacity: 0; transform: translateY(22px); clip-path: inset(48% 0 48% 0 round 18px); filter: brightness(1.8);
  transition: opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1), clip-path .7s cubic-bezier(.22,1,.36,1), filter .9s ease !important; }
html.kx-dark .page-amazon .kx-reveal.in { opacity: 1; transform: none; clip-path: inset(-40px -40px -40px -40px); filter: none; }

/* hub page opening: content rises in */
html.kx-dark .kx-hubpage-body > * { animation: upTileIn .6s cubic-bezier(.22,1,.36,1) both; }
html.kx-dark .kx-hubpage-body > *:nth-child(2) { animation-delay: .08s }
html.kx-dark .kx-hubpage-body > *:nth-child(3) { animation-delay: .16s }
html.kx-dark .kx-hubpage-body > *:nth-child(4) { animation-delay: .24s }

/* desktop: centred, roomier */
@media (min-width: 900px) { html.kx-dark .page-amazon .page-inner { max-width: 1100px; margin: 0 auto; } }

@media (prefers-reduced-motion: reduce) {
  html.kx-dark .page-amazon *, html.kx-dark .page-amazon *::before, html.kx-dark .page-amazon *::after { animation: none !important; }
  html.kx-dark .page-amazon .kx-reveal { opacity: 1; transform: none; clip-path: none; filter: none; }
}
.kx-title-in { animation: upTitle .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes upTitle { from { opacity: 0; transform: translateY(12px); letter-spacing: .08em; } to { opacity: 1; transform: none; } }