/* The phone comes forward while the character remains in the room. */
#mk-auth-view { display: contents; }
.marketing-character.marketing-auth .mk-hero-character {
  --scene-width: clamp(896px, calc((100svh - 90px) * 1.333333), 960px);
  --hero-phone-left: 57.5%;
  --hero-phone-top: 6.111111%;
  --hero-phone-width: 31.25%;
  --hero-phone-height: 87.5%;
  display: flex;
  min-height: max(660px, 100svh, calc(var(--scene-width) * .75 + 80px));
  padding: 80px 0 0;
  overflow: clip;
}
.marketing-auth .mk-character-stage {
  position: relative;
  left: auto;
  top: auto;
  margin-left: 0;
}
.marketing-character .mk-butthead-grip > g { transform-box: view-box; transform-origin: 0 0; transform: translate(0, 0) scale(1); }
.marketing-auth .mk-butthead-grip > g { transform: translate(-360px, -342.5px) scale(1.5); }
.marketing-character .mh-auth-reach { display: inline; opacity: 0; visibility: hidden; }
.marketing-auth .mh-auth-reach { opacity: 1; visibility: visible; }
.marketing-auth .mh-reach { opacity: 0; visibility: hidden; }
.marketing-auth .mk-hero-character::before { filter: brightness(.9); }
.marketing-auth .mk-room-background { filter: brightness(.86) saturate(.92); }
.marketing-character .mk-held-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 43%, #edfff34d 49%, #ffffff14 52%, transparent 58%) 150% 0 / 250% 100% no-repeat;
  box-shadow: inset 1px 0 0 #ecffe388, inset -1px 0 0 #d0ebbf38;
  opacity: 0;
  pointer-events: none;
}
.marketing-character.mk-auth-travel .mk-held-device {
  transition: left 1400ms cubic-bezier(.42,0,.18,1), top 1400ms cubic-bezier(.42,0,.18,1), width 1400ms cubic-bezier(.42,0,.18,1), height 1400ms cubic-bezier(.42,0,.18,1);
}
.marketing-character.mk-auth-travel .mk-butthead-grip > g { transition: transform 1400ms cubic-bezier(.42,0,.18,1); }
.marketing-character.mk-auth-travel .mk-character-stage { transition: width 1400ms cubic-bezier(.42,0,.18,1), margin-left 1400ms cubic-bezier(.42,0,.18,1); }
.marketing-character.mk-auth-travel .mk-hero-character { transition: min-height 1400ms cubic-bezier(.42,0,.18,1), padding-top 1400ms cubic-bezier(.42,0,.18,1); }
.marketing-character.mk-auth-travel .mk-hero-character::before,
.marketing-character.mk-auth-travel .mk-room-background { transition: filter 1400ms cubic-bezier(.42,0,.18,1); }
.marketing-character.mk-auth-travel :is(.mh-reach, .mh-auth-reach) { transition: opacity 450ms ease, visibility 450ms; }
.marketing-character.mk-auth-travel .mk-held-frame::after { animation: mk-auth-phone-glint 1400ms cubic-bezier(.42,0,.18,1) both; }
@keyframes mk-auth-phone-glint {
  0% { opacity: 0; background-position: 150% 0; }
  24% { opacity: .75; }
  70% { opacity: .65; }
  100% { opacity: 0; background-position: -150% 0; }
}
.marketing-auth .mk-hero-left { top: 18%; opacity: .4; }
.marketing-auth .mk-held-clock { top: 8%; font-size: 28px; letter-spacing: -.04em; }
.marketing-auth .mk-held-wallpaper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #06110a6b 8%, #06110ad1 16%, #06110adb 100%);
}
.marketing-auth #mk-auth-view {
  /* Shared app paragraphs use --mute, originally intended for a light card. */
  --mute: #d2dfcc;
  --color-muted-on-light: #d2dfcc;
  --color-muted-on-dark: #d2dfcc;
  position: absolute;
  display: block;
  inset: 16% 6.5% 6.5%;
  z-index: 7;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #a3bfa477 transparent;
  color: #f2f7ef;
  font: 400 16px/1.45 "IBM Plex Sans", "Segoe UI", sans-serif;
  overflow-wrap: anywhere;
  padding: 2px;
}
.marketing-auth #mk-auth-view .gate-panel,
.marketing-auth #mk-auth-view .card {
  position: relative;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
}
.marketing-auth #mk-auth-view .card::before { display: none; }
.marketing-auth #mk-auth-view :is(p, .muted, .tiny) { color: var(--mute); }
.marketing-auth #mk-auth-view h1 {
  margin: 0 0 18px;
  color: #fff;
  font-family: "Syne", sans-serif;
  font-size: clamp(29px, 10cqw, 38px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.055em;
  text-transform: none;
}
.marketing-auth #mk-auth-view h1:focus { outline: none; }
.marketing-auth #mk-auth-view .gate-mark { width: 50px; height: 50px; margin-bottom: 20px; font-size: 19px; }
.marketing-auth #mk-auth-view .gate-actions { margin-top: 24px; gap: 12px; }
.marketing-auth #mk-auth-view .stack { margin-top: 20px; gap: 12px; }
.marketing-auth #mk-auth-view label { display: grid; gap: 7px; font-size: 13px; color: #d3dfce; }
.marketing-auth #mk-auth-view input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  min-height: 48px;
  border: 1px solid #d7e9ce4a;
  border-radius: 13px;
  color: #fff;
  background: #0c1c11c9;
  font: 400 16px/1.3 "IBM Plex Sans", "Segoe UI", sans-serif;
}
.marketing-auth #mk-auth-view input::placeholder { color: #b2c3ab; opacity: .85; }
.marketing-auth #mk-auth-view .btn,
.marketing-auth #mk-auth-view button {
  min-height: 48px;
  width: 100%;
  padding: 11px 12px;
  font: 700 16px/1.25 "IBM Plex Sans", "Segoe UI", sans-serif;
  letter-spacing: -.02em;
  text-transform: none;
  background: #ffffff20;
  color: #fff;
}
.marketing-auth #mk-auth-view .primary { background: var(--acid, #00d632); color: #111; }
.marketing-auth #mk-auth-view :is(a, button, input):focus-visible { outline: 3px solid #d8ffd0; outline-offset: 3px; }
.marketing-auth #mk-auth-view button:disabled { opacity: .55; cursor: progress; }
.marketing-auth #mk-auth-view .crumb { margin: 0 0 22px; color: #c5d3bf; font-size: 12px; }
.marketing-auth #mk-auth-view .crumb a { color: #edf7e8; }
.marketing-auth #mk-auth-view .err { background: #522b22ed; color: #ffe4d8; }
.marketing-auth #mk-auth-view .ok { background: #183e24ed; color: #d3ffd9; }
.marketing-auth #mk-auth-view .note { background: #112218e6; color: #e1ecda; }
.marketing-auth #mk-auth-view :is(.err, .ok, .note) { margin: 14px 0; padding: 11px; border-radius: 12px; font-size: 13px; }
.marketing-auth #mk-auth-view [data-auth-request-error] a { color: inherit; }
.marketing-auth #mk-auth-view .cf-turnstile-wrap { overflow: visible; min-height: 140px; align-items: center; }
.marketing-auth #mk-auth-view [data-auth-turnstile] { min-height: 140px; }
.marketing-auth #mk-auth-view .actions { margin-top: 26px; }
@media(max-width: 720px) {
  .marketing-character.marketing-auth .mk-hero-character { --scene-width: clamp(896px, calc((100vw - 28px) * 3.2), 960px); }
  .marketing-auth .mk-character-stage { margin-left: calc(var(--scene-width) * -.4625); }
  .marketing-auth .mk-hero-left { top: 110px; opacity: .18; }
  .marketing-auth .mk-room-tv { transform: none; }
}
@media(prefers-reduced-motion: reduce) {
  .marketing-auth #mk-auth-view * { scroll-behavior: auto; }
  .marketing-character.mk-auth-travel :is(.mk-held-device, .mk-character-stage, .mk-butthead-grip > g, .mk-hero-character, .mk-room-background, .mh-reach, .mh-auth-reach),
  .marketing-character.mk-auth-travel .mk-hero-character::before { transition: none; }
  .marketing-character.mk-auth-travel .mk-held-frame::after { animation: none; }
}
.marketing-character.is-paused.mk-auth-travel :is(.mk-held-device, .mk-character-stage, .mk-butthead-grip > g, .mk-hero-character, .mk-room-background, .mh-reach, .mh-auth-reach),
.marketing-character.is-paused.mk-auth-travel .mk-hero-character::before { transition: none; }
.marketing-character.is-paused.mk-auth-travel .mk-held-frame::after { animation: none; }

/* Checkboxes must never inherit full-width text-field sizing (notably WebKit). */
.marketing-auth #mk-auth-view input:is([type="checkbox"],[type="radio"]) {
  width:20px; height:20px; min-width:20px; min-height:20px; max-width:20px;
  flex:0 0 20px; padding:0; margin:0; accent-color:#4cc765;
}
.marketing-auth #mk-auth-view .cf-turnstile-wrap {
  display:flex; justify-content:center; align-items:center; max-width:100%;
}
.marketing-auth #mk-auth-view [data-auth-turnstile] { max-width:100%; }