/* ============================================================
   MAN-IT · Welcome screen v4 — particles slowly form the logo,
   then sweep into the PIN dialer; dial pad LEFT + visual RIGHT
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #2e2440;
  --ink-2: #5a4a6e;
  --mut: #8b7aa0;
  --mut-2: #b3a5c4;
  --g1: #4f46e5;
  --g2: #14b8a6;
  --grad: linear-gradient(135deg, #4f46e5 0%, #4f7cff 60%, #14b8a6 100%);
  --grad-2: linear-gradient(135deg, #4338ca 0%, #4f6ef7 52%, #0f9f95 100%);
  --line: rgba(90,60,110,.12);
  --line-2: rgba(90,60,110,.2);
  --wl-bg: radial-gradient(1100px 780px at 88% -14%, rgba(196,181,253,.55), transparent 60%),
           radial-gradient(950px 720px at -12% 18%, rgba(255,214,180,.55), transparent 55%),
           radial-gradient(900px 720px at 55% 114%, rgba(255,205,224,.5), transparent 55%),
           radial-gradient(800px 600px at 30% 40%, rgba(224,216,255,.6), transparent 55%),
           linear-gradient(160deg, #fdfaff 0%, #f6efff 45%, #ffeef5 100%);
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 14px;
  background: linear-gradient(135deg, #f7f9ff 0%, #edf1ff 52%, #ecfbf8 100%);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(79,70,229,.2); }

/* ---------- aurora blobs ---------- */
.wl-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.b1 { width: 560px; height: 560px; left: -170px; top: -190px; background: radial-gradient(circle at 40% 40%, #ffd9b8, transparent 62%); opacity: .8; animation: drift1 26s ease-in-out infinite alternate; }
.b2 { width: 520px; height: 520px; right: -150px; top: 10%; background: radial-gradient(circle at 60% 40%, #ffd7e0, transparent 62%); opacity: .75; animation: drift2 32s ease-in-out infinite alternate; }
.b3 { width: 520px; height: 520px; left: 26%; bottom: -240px; background: radial-gradient(circle at 50% 50%, #ffe9c9, transparent 62%); opacity: .7; animation: drift3 38s ease-in-out infinite alternate; }
.b4 { width: 380px; height: 380px; left: 55%; top: -140px; background: radial-gradient(circle at 50% 50%, #e6dcfb, transparent 60%); opacity: .65; animation: drift1 44s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(70px,50px) scale(1.12); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1.05); } to { transform: translate(-60px,40px) scale(.95); } }
@keyframes drift3 { from { transform: translate(0,0) scale(.95); } to { transform: translate(50px,-60px) scale(1.1); } }

/* ============================================================
   INTRO — particles appear → slowly drift into the MAN-IT logo
   → row blink → some fade → sweep into the PIN dialer
   ============================================================ */
.intro {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: transparent;   /* body aurora shows through; the dial pad
                                reveals beneath the overlay during the sweep */
  transition: opacity .65s ease, visibility 0s linear .7s;
}
.intro.done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-skip {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  color: var(--mut); letter-spacing: .4px; padding: 8px 14px; border-radius: 999px;
  transition: all .2s ease;
}
.intro-skip:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.intro.done .intro-skip { display: none; }

/* logo stage: bulbs on a transparent canvas — NO tile background */
.logo-stage {
  position: relative; width: 200px; height: 200px;
  transition: transform 1s cubic-bezier(.2,.8,.3,1), opacity .5s ease, filter .5s ease;
}
.logo-anim { width: 100%; height: 100%; display: block; overflow: visible; }
.logo-anim .dot { opacity: 0; transform-box: fill-box; transform-origin: center; }

/* scattered particles (created by JS) — glowing circles, transparent bg */
.bulb-field { position: absolute; inset: 0; pointer-events: none; }
.bulb {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #f1f5ff, #4f7cff 42%, #4f46e5 78%, #14b8a6);
  box-shadow: 0 0 14px rgba(238,157,247,.9), 0 0 36px rgba(124,140,248,.55);
  opacity: 0;
  will-change: transform, opacity, filter;
}
.bulb.off { animation: bulbOff .55s ease forwards; }
@keyframes bulbOff {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  40% { opacity: .7; filter: brightness(2.2); }
  100% { opacity: 0; transform: scale(.15); filter: brightness(.4); }
}
.bulb.twinkle { animation: twinkle .8s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* phase classes on .intro */
.intro.phase-blink .logo-stage { animation: logoBreath 1s ease-in-out infinite; }
@keyframes logoBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
/* sweep phase: the empty logo stage melts away while the particles stream out */
.intro.sweep .logo-stage { opacity: 0; transform: scale(.72) translateY(14px); filter: blur(6px); }
.intro.sweep .intro-skip { opacity: 0; pointer-events: none; transition: opacity .3s ease; }

/* guarantee visibility if animations are unavailable */
.logo-anim.lit .dot { opacity: 1 !important; }

/* ============================================================
   MAIN LAYOUT — dial pad LEFT, floating visual RIGHT
   ============================================================ */
.wl-wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(420px, 1fr) 1.15fr;
  gap: 40px; align-items: center;
  min-height: 100vh; max-width: 1240px; margin: 0 auto;
  padding: 36px 56px;
  opacity: 0;
}
.wl-wrap.show { opacity: 1; transition: opacity .6s ease .1s; }

/* ---------- left column: glassmorphism dial pad (NO card background/border) ---------- */
.wl-left { display: flex; flex-direction: column; align-items: center; }
.login-glass {
  width: 100%; max-width: 372px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  /* no background, no border — pure glass over the aurora */
  background: transparent; border: none; box-shadow: none;
  opacity: 0; transform: translateY(26px) scale(.96);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1);
}
.login-glass.show { opacity: 1; transform: none; }
.login-glass.shake { animation: shake .45s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-9px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(4px); }
}
.lc-brand { display: flex; align-items: center; gap: 14px; }
.wl-mark {
  width: 52px; height: 52px; flex-shrink: 0;
  filter: drop-shadow(0 10px 20px rgba(167,139,250,.4));
  animation: markFloat 4.5s ease-in-out infinite alternate;
}
@keyframes markFloat { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-7px) rotate(2deg); } }
.lc-title { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -.8px; color: var(--ink); }
.lc-sub { font-size: 12.5px; color: var(--mut); margin: 4px 0 18px; font-weight: 500; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; width: 100%; }
.field label { font-size: 11px; font-weight: 800; color: var(--ink-2); letter-spacing: .6px; text-transform: uppercase; text-align: left; }
.in-wrap { position: relative; }
.in-wrap .in-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--mut-2); pointer-events: none; }
.in-wrap input {
  width: 100%; padding: 13px 15px 13px 42px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.85);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 14px 34px -18px rgba(150,90,110,.3), 0 1px 0 rgba(255,255,255,.8) inset;
  font-family: var(--font-body); font-size: 14px; color: var(--ink);
  outline: none; transition: all .18s ease;
}
.in-wrap input::placeholder { color: var(--mut-2); }
.in-wrap input:focus { border-color: rgba(167,139,250,.6); box-shadow: 0 0 0 4px rgba(167,139,250,.16), 0 14px 34px -18px rgba(150,90,110,.3); background: rgba(255,255,255,.75); }

/* independent circular PIN dots */
.pin-dots { display: flex; gap: 22px; justify-content: center; padding: 4px 0 2px; }
.pin-dot {
  position: relative;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(139,122,160,.55);
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s ease, transform .2s ease;
}
.pin-dot::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: transparent; transition: all .2s ease; transform: scale(.4);
}
.pin-dot.filled { border-color: rgba(238,157,247,.9); transform: translateY(-2px); }
.pin-dot.filled::after { background: var(--grad); box-shadow: 0 0 12px rgba(79,70,229,.55); transform: scale(1); }
.pin-dot.pulse { animation: pinPulse .55s cubic-bezier(.2,.8,.3,1); }
@keyframes pinPulse {
  0% { transform: scale(.55); border-color: rgba(238,157,247,.9); }
  55% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* circular glassmorphism dial pad */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 14px; width: 100%; }
.kp-btn {
  height: 62px; aspect-ratio: 1; justify-self: center; width: 62px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.42);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 16px 34px -16px rgba(150,90,110,.35), 0 1px 0 rgba(255,255,255,.95) inset;
  color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 20px;
  cursor: pointer; transition: all .16s ease; user-select: none;
  display: flex; align-items: center; justify-content: center;
}
.kp-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(238,157,247,.2));
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -14px rgba(167,139,250,.55);
}
.kp-btn:active { transform: scale(.9); }
.kp-btn.kp-del svg { width: 22px; height: 22px; color: var(--mut); }
.kp-btn.kp-blank { background: transparent; border-color: transparent; box-shadow: none; cursor: default; pointer-events: none; }
/* keypad buttons pop in one-by-one after intro */
.login-glass.show .kp-btn { animation: kpPop .5s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(.12s + var(--i, 0) * .045s); }
@keyframes kpPop {
  0% { opacity: 0; transform: translateY(14px) scale(.6); }
  60% { opacity: 1; transform: translateY(-3px) scale(1.06); }
  100% { opacity: 1; transform: none; }
}
/* dialer buttons flash when a logo particle lands on them */
.kp-btn.spark { animation: kpSpark .5s ease; }
@keyframes kpSpark {
  0% { box-shadow: 0 0 0 0 rgba(238,157,247,.6); }
  55% { box-shadow: 0 0 28px 12px rgba(238,157,247,.32); }
  100% { box-shadow: 0 16px 34px -16px rgba(150,90,110,.35); }
}

.lc-err { min-height: 16px; font-size: 12.5px; font-weight: 600; color: #e05252; margin: 2px 0 8px; text-align: center; }
.spin-sm { width: 17px; height: 17px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.btn-go {
  width: 100%; height: 48px; border: none; border-radius: 18px; cursor: pointer;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 700; color: #fff;
  background: var(--grad-2);
  box-shadow: 0 16px 38px -12px rgba(139,92,246,.65);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .22s ease; position: relative; overflow: hidden;
}
.btn-go svg { width: 17px; height: 17px; }
.btn-go:hover { transform: translateY(-2px); box-shadow: 0 20px 48px -12px rgba(139,92,246,.8); }
.btn-go:active { transform: translateY(0) scale(.98); }
.btn-go:disabled { opacity: .65; cursor: default; transform: none; }
.lc-hint { margin-top: 10px; font-size: 11.5px; color: var(--mut-2); text-align: center; line-height: 1.5; }

.continue-row { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cr-txt { font-size: 12px; color: var(--mut); font-weight: 600; }
.btn-cont {
  padding: 8px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all .18s ease; font-family: var(--font-body);
}
.btn-cont b { color: #f08a5d; }
.btn-cont:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(150,90,110,.3); }

/* ---------- right column: product visual ---------- */
.wl-right {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
  --px: 0px; --py: 0px;
  opacity: 0;
}
.wl-wrap.show .wl-right { animation: heroIn .9s cubic-bezier(.2,.8,.3,1) .35s forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* The stage is exactly the size of the illustration, so the floating devices
   keep their position relative to it at every viewport width instead of
   drifting over the picture or off the column. */
.hero-stage { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
.hero-img {
  width: 100%; height: auto; display: block;
  animation: floaty 6.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 34px 44px rgba(44, 66, 120, .19));
}
@keyframes floaty { from { transform: translateY(0) rotate(-.4deg); } to { transform: translateY(-14px) rotate(.5deg); } }



/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .wl-wrap { grid-template-columns: 1fr; }
  .wl-right { margin-top: 6px; }
  .hero-stage { max-width: 340px; }
}
@media (max-width: 560px) {
  .hero-stage { max-width: 250px; }
}
/* reduced-motion: keep layout, calm the decorative floats — intro still plays (shortened) */
@media (prefers-reduced-motion: reduce) {
  .blob, .hero-img { animation: none !important; }
}
/* ============================================================
   MAN-IT refresh — quiet operations console / v5
   ============================================================ */
/* The refresh intentionally sits after the original base rules so the
   page remains backwards-compatible with packaged builds. */
:root {
  --ink: #172033;
  --ink-2: #536078;
  --mut: #738099;
  --mut-2: #9aa7bc;
  --g1: #4f46e5;
  --g2: #14b8a6;
  --grad: linear-gradient(135deg, #4f46e5 0%, #4f7cff 52%, #18b9a4 100%);
  --grad-2: linear-gradient(135deg, #4338ca 0%, #4f6ef7 58%, #0f9f95 100%);
  --line: rgba(91, 105, 133, .16);
  --line-2: rgba(91, 105, 133, .26);
  --wl-bg: radial-gradient(900px 640px at 96% -10%, rgba(129, 140, 248, .23), transparent 62%),
           radial-gradient(900px 720px at -18% 5%, rgba(45, 212, 191, .16), transparent 58%),
           radial-gradient(780px 560px at 68% 116%, rgba(251, 191, 36, .11), transparent 60%),
           linear-gradient(135deg, #f8fafc 0%, #eef2ff 53%, #effcf9 100%);
}
body { font-size: 14px; color: var(--ink); }
.wl-bg { display: none; }
.wl-bg::after { display: none; }
.blob { filter: blur(110px); }
.b1 { background: radial-gradient(circle at 40% 40%, #99f6e4, transparent 64%); opacity: .7; }
.b2 { background: radial-gradient(circle at 60% 40%, #c7d2fe, transparent 64%); opacity: .72; }
.b3 { background: radial-gradient(circle at 50% 50%, #fde68a, transparent 64%); opacity: .4; }
.b4 { background: radial-gradient(circle at 50% 50%, #bfdbfe, transparent 62%); opacity: .55; }

.intro { background: transparent; color: var(--ink); }
.intro::before, .intro-grid { display: none; }
.intro-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.intro .bulb-field { position: fixed; inset: 0; }
.logo-stage { width: 176px; height: 176px; margin: 0; transform: translate3d(0, 0, 0) scale(1); transition: transform .9s cubic-bezier(.22, .9, .28, 1), opacity .38s ease, filter .38s ease; }
.logo-anim .dot { filter: drop-shadow(0 0 5px rgba(79, 124, 255, .55)); }
.intro.sweep .logo-stage { opacity: .96; transform: translate3d(var(--dial-x, 0px), var(--dial-y, 0px), 0) scale(.38); filter: drop-shadow(0 0 18px rgba(79, 124, 255, .32)); }
.intro.handoff .logo-stage { opacity: 0; transform: translate3d(var(--dial-x, 0px), var(--dial-y, 0px), 0) scale(.16); filter: blur(5px); }
.intro-skip { z-index: 3; bottom: 26px; color: #7c8aa1; background: rgba(255,255,255,.56); border: 1px solid rgba(148,163,184,.24); box-shadow: 0 10px 24px -16px rgba(30,41,59,.35); }
.intro-skip span { margin-left: 5px; color: #4f46e5; font-size: 13px; }
.intro-skip:hover { color: #172033; background: rgba(255,255,255,.86); }
.bulb { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: radial-gradient(circle at 35% 32%, #ffffff, #4f7cff 42%, #4f46e5 78%, #14b8a6); box-shadow: 0 0 12px rgba(79, 124, 255, .64), 0 0 28px rgba(20, 184, 166, .25); }

.wl-wrap { max-width: 1200px; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding: clamp(24px, 4vh, 52px) clamp(20px, 4vw, 56px); align-items: center; }
.wl-left { align-items: center; justify-content: center; }
.login-glass { max-width: 380px; padding: 28px 8px 24px; align-items: stretch; text-align: left; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.lc-brand { gap: 14px; }
.wl-mark { width: 46px; height: 46px; filter: drop-shadow(0 10px 20px rgba(79, 70, 229, .28)); }
.lc-eyebrow { margin-bottom: 3px; color: #5d6c86; font-size: 9px; font-weight: 800; letter-spacing: 1.7px; }
.lc-title { font-size: 28px; letter-spacing: -.9px; color: #172033; }
.lc-sub { color: #6d7a91; margin: 6px 0 26px; font-size: 12px; }
.field { gap: 7px; margin-bottom: 18px; }
.field label { color: #56647c; font-size: 10px; letter-spacing: 1px; }
.in-wrap input { height: 48px; padding: 13px 15px 13px 42px; border-radius: 0; border: 0; background: transparent; box-shadow: none; }
.in-wrap input:focus { border: 0; box-shadow: 0 2px 0 rgba(79, 70, 229, .58); background: transparent; }
.in-wrap .in-ic { color: #8391a9; }
.pin-dots { justify-content: flex-start; gap: 10px; padding: 3px 0 4px; }
.pin-dot { width: 43px; height: 10px; border-radius: 7px; border: 1px solid rgba(143, 157, 181, .4); background: rgba(226, 232, 240, .65); backdrop-filter: none; }
.pin-dot::after { inset: 1px; border-radius: 5px; background: transparent; }
.pin-dot.filled { border-color: rgba(79, 70, 229, .45); transform: none; }
.pin-dot.filled::after { background: var(--grad); box-shadow: 0 0 10px rgba(79, 70, 229, .35); }
.keypad { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px auto 14px; max-width: 240px; }
.kp-btn { width: 100%; height: 42px; aspect-ratio: auto; border-radius: 12px; border: 0; background: transparent; box-shadow: none; color: #25324a; font-size: 16px; }
.kp-btn:hover { background: rgba(79, 124, 255, .08); border: 0; transform: translateY(-2px); box-shadow: none; }
.kp-btn.kp-del { background: transparent; }
.kp-btn.kp-del svg { width: 18px; height: 18px; color: #718096; }
.kp-btn.kp-blank { visibility: hidden; }
.kp-btn.spark { animation: kpSparkRefresh .5s ease; }
@keyframes kpSparkRefresh {
  0% { box-shadow: 0 0 0 0 rgba(20, 184, 166, .14); }
  55% { box-shadow: 0 0 22px 8px rgba(20, 184, 166, .28); }
  100% { box-shadow: none; }
}
.lc-err { text-align: left; color: #d04459; margin: 0 0 8px; }
.btn-go { height: 50px; border-radius: 14px; background: var(--grad-2); box-shadow: 0 15px 28px -14px rgba(67, 56, 202, .75); }
.btn-go:hover { box-shadow: 0 20px 38px -13px rgba(67, 56, 202, .8); }
.lc-hint { text-align: left; margin-top: 14px; color: #8996aa; }
.continue-row { justify-content: space-between; }
.cr-txt { color: #718096; }
.btn-cont { border-color: rgba(148, 163, 184, .28); background: rgba(255,255,255,.7); color: #30405a; }
.btn-cont b { color: #4f46e5; }

.wl-right { min-height: 0; }
.hero-stage { max-width: 520px; }
.hero-img { filter: drop-shadow(0 34px 44px rgba(44, 66, 120, .19)); }

@media (max-width: 1080px) {
  .wl-wrap { grid-template-columns: 1fr; gap: 26px; padding: 34px 24px 40px; }
  .wl-left { align-items: center; justify-content: center; }
  .login-glass { width: min(100%, 420px); }
  /* stacked: the illustration would only push the form below the fold */
  .wl-right { display: none; }
}
@media (max-width: 560px) {
  .wl-wrap { padding: 26px 16px 30px; }
  .login-glass { width: 100%; padding: 22px 4px 18px; border-radius: 0; }
  .lc-title { font-size: 24px; }
  .pin-dots { gap: 7px; }
  .pin-dot { flex: 1; }
  .keypad { max-width: 224px; gap: 7px; }
  .kp-btn { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro .logo-stage, .login-glass.show .kp-btn { transition: none !important; animation: none !important; }
}

/* ---------- interactive states ----------
   every control answers the pointer and the keyboard the same way */
.in-wrap input:hover { box-shadow: 0 1px 0 rgba(79, 124, 255, .3); }
/* text inputs are always :focus-visible while focused, so an outline there would
   draw a permanent box around the email field — the focus underline is its cue */
.kp-btn:focus-visible,
.btn-go:focus-visible,
.btn-cont:focus-visible,
.intro-skip:focus-visible {
  outline: 2px solid rgba(79, 70, 229, .55);
  outline-offset: 3px;
}
.intro-skip:focus-visible { border-radius: 999px; }
.btn-cont:hover { background: rgba(255, 255, 255, .92); box-shadow: 0 10px 22px -12px rgba(44, 66, 120, .35); }
.btn-go:disabled:hover { box-shadow: 0 15px 28px -14px rgba(67, 56, 202, .75); }