/* First guest screen: real MetaKM captures, official MK, existing account flow. */
#feature-introduction {
  background: #f8f9fa;
  color: #171c21;
  font-family: 'Manrope', sans-serif;
  color-scheme: light;
}
#feature-introduction .feature-introduction-content {
  position: relative;
  width: min(100%, 480px);
  min-height: 100%;
  min-height: 100svh;
  gap: 0;
  padding: 0 0 max(22px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.intro-scene { position: relative; flex-shrink: 0; height: clamp(300px, 47svh, 430px); overflow: hidden; }
.intro-scene::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 35%, #f8f9fa55 56%, #f8f9fa 88%);
}
.intro-mosaic {
  position: absolute; width: 560px; left: 50%; top: -96px;
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px;
  transform: translateX(-50%) rotate(-10deg); transform-origin: center;
}
.intro-mosaic-column { display: grid; gap: 12px; align-content: start; }
.intro-mosaic-left { padding-top: 124px; }
.intro-mosaic-right { padding-top: 62px; }
.intro-screen-tile {
  height: 272px; overflow: hidden; border: 5px solid #fff;
  border-radius: 23px; background: #edf1f5;
  box-shadow: 0 5px 18px #19232e12;
}
.intro-screen-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro-tile-dashboard { height: 366px; }
.intro-tile-dashboard img { object-position: center 27%; }
.intro-tile-copilot img { object-position: center 64%; }
.intro-tile-risk img { object-position: center 72%; }
.intro-brand-emblem {
  position: absolute; z-index: 1; left: 50%; bottom: 12px;
  width: 106px; height: 106px; transform: translateX(-50%) rotate(-4deg);
  border-radius: 25px; background: #101214;
  box-shadow: 0 18px 28px -14px #10121466, 0 2px 5px #10121418;
}
.intro-brand-emblem img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.intro-message { padding: 24px 24px 22px; text-align: center; }
.intro-brand-name { margin: 0 0 12px; color: #717a83; font-size: 11px; font-weight: 800; letter-spacing: .22em; }
.intro-brand-name span { color: #e56600; }
#feature-introduction h1 { margin: 0; color: #777f87; font-size: clamp(27px, 7.2vw, 33px); font-weight: 700; line-height: 1.25; letter-spacing: -.045em; }
#feature-introduction h1 strong { color: #171c21; font-weight: 800; }
.intro-description { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: #68727c; }
.intro-actions { margin-top: auto; padding: 12px 28px 0; text-align: center; }
#feature-introduction #intro-register {
  display: flex; justify-content: center; align-items: center; gap: 14px;
  width: 100%; min-height: 58px; border: 0; border-radius: 30px !important;
  background: #171c21 !important; color: #fff !important; box-shadow: none !important;
  font-family: inherit; font-size: 16px; font-weight: 750;
}
#feature-introduction #intro-register:active { background: #303840; transform: scale(.99); }
#feature-introduction #intro-register span { font-size: 22px; font-weight: 500; }
.intro-trial-note { margin: 10px 0 5px; font-size: 11px; color: #69727b; }
#feature-introduction #intro-login {
  min-height: 48px; width: 100%; margin: 0; padding: 10px; border: 0;
  background: transparent; color: #252b31; font-family: inherit;
  font-size: 14px; font-weight: 650; text-decoration: none;
}
#feature-introduction button:focus-visible { outline: 3px solid #e56600; outline-offset: 4px; }
@media (max-height: 700px) {
  .intro-scene { height: 290px; }
  .intro-brand-emblem { width: 90px; height: 90px; border-radius: 22px; }
  .intro-message { padding-top: 18px; padding-bottom: 12px; }
  #feature-introduction h1 { font-size: 27px; }
  .intro-description { margin-top: 10px; }
}