/* Standalone widget layer. Fonts and palette belong to the main landing sheet. */
:where(.amodal, .aladdin-captcha, .install-modal, .phone-mask, .cookie-consent) {
  box-sizing: border-box;
  color: var(--text-primary, #edf1f5);
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  color-scheme: dark;
}

:where(.amodal, .aladdin-captcha, .install-modal, .phone-mask, .cookie-consent) *,
:where(.amodal, .aladdin-captcha, .install-modal, .phone-mask, .cookie-consent) *::before,
:where(.amodal, .aladdin-captcha, .install-modal, .phone-mask, .cookie-consent) *::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

:where(.amodal, .aladdin-captcha, .install-modal, .phone-mask, .cookie-consent) :is(h2, p) {
  margin: 0;
}

:where(.amodal, .aladdin-captcha, .install-modal, .phone-mask, .cookie-consent) button {
  margin: 0;
  font: inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
}

:where(.amodal, .aladdin-captcha, .install-modal, .phone-mask, .cookie-consent) :is(button, a, input):focus-visible {
  outline: 2px solid var(--accent-bright, #b1d8ff);
  outline-offset: 3px;
}

:where(.amodal, .aladdin-captcha, .install-modal, .phone-mask, .cookie-consent) button:disabled {
  cursor: not-allowed;
}

:is(.amodal, .aladdin-captcha, .install-modal, .phone-mask, .cookie-consent)[hidden],
:is(.amodal, .aladdin-captcha, .install-modal, .phone-mask, .cookie-consent) [hidden] {
  display: none !important;
}

html.aladdin-captcha-open,
body.install-modal-open {
  overflow: hidden;
}

/* Access scrolls at the overlay, leaving the form and phone menu unclipped. */
.amodal,
.install-modal,
.aladdin-captcha {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  padding-block: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  isolation: isolate;
  background: rgba(0, 0, 0, .76);
}

.amodal {
  z-index: 10000;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.amodal.amodal--open {
  display: flex;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.amodal-backdrop,
.install-modal__backdrop,
.aladdin-captcha__backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
}

.amodal-box,
.install-modal__card,
.aladdin-captcha__panel {
  position: relative;
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  margin: auto;
  border: 1px solid var(--border, #363d44);
  border-radius: 8px;
  background: var(--surface, #1b1f23);
  box-shadow: 0 24px 72px rgba(0, 0, 0, .4);
  overflow-wrap: anywhere;
}

.amodal-box {
  max-width: 480px;
  overflow: visible;
}

.amodal-close,
.install-modal__close-btn,
.aladdin-captcha__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border, #363d44);
  border-radius: 6px;
  background: var(--surface-raised, #23282d);
  color: var(--text-primary, #edf1f5);
  font-size: 24px;
  line-height: 1;
}

.amodal-close:hover,
.install-modal__close-btn:hover,
.aladdin-captcha__close:hover {
  border-color: var(--accent, #96c8fa);
  color: var(--accent-bright, #b1d8ff);
}

.amodal-scan,
.amodal-glow,
.aladdin-captcha__scan {
  display: none;
}

.amodal-hdr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 64px;
  padding: 16px 64px 16px 24px;
  border-bottom: 1px solid var(--border, #363d44);
}

.amodal-dots,
.aladdin-captcha__topline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.amodal-dot,
.aladdin-captcha__topline > span {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted, #919eaa);
}

.amodal-dot--g,
.aladdin-captcha__topline > span:last-of-type {
  background: var(--success, #80d6b2);
}

.amodal-hdr-title,
.amodal-hdr-badge,
.amodal-hex,
.amodal-enc-badge,
.amodal-subtitle,
.amodal-label {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  line-height: 1.6;
}

.amodal-hdr-title,
.amodal-hex,
.amodal-enc-badge {
  color: var(--text-muted, #919eaa);
}

.amodal-hdr-badge {
  color: var(--success, #80d6b2);
}

.amodal-hex {
  display: none;
  padding: 12px 24px 0;
  max-height: 44px;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.amodal-enc-row {
  padding: 12px 24px 0;
}

.amodal-enc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.amodal-enc-badge svg,
.amodal-input-ico,
.amodal-submit svg {
  flex-shrink: 0;
}

.amodal-body {
  padding: 24px;
}

.amodal-subtitle {
  margin-bottom: 8px;
  color: var(--accent, #96c8fa);
}

.amodal .amodal-title {
  margin-bottom: 24px;
  color: var(--text-primary, #edf1f5);
  font-size: 28px;
  font-weight: 650;
  line-height: 1.2;
}

.amodal-form {
  display: grid;
  gap: 18px;
}

.amodal-field {
  min-width: 0;
}

.amodal-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-secondary, #b1bbc5);
  font-size: 11px;
}

.amodal-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 50px;
  padding: 6px 12px;
  border: 1px solid var(--border, #363d44);
  border-radius: 6px;
  background: var(--bg, #111315);
}

.amodal-input-wrap:focus-within {
  border-color: var(--accent, #96c8fa);
  box-shadow: 0 0 0 2px rgba(150, 200, 250, .18);
}

.amodal-input-ico {
  color: var(--text-muted, #919eaa);
}

.amodal-input {
  flex: 1 1 0%;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 4px 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--text-primary, #edf1f5);
  font: 400 16px/1.5 var(--sans, 'Inter', sans-serif);
  caret-color: var(--accent, #96c8fa);
}

.amodal-input::placeholder {
  color: var(--text-muted, #919eaa);
  opacity: 1;
}

.amodal-input:focus-visible {
  outline: none;
}

.amodal-field.field-error .amodal-input-wrap,
.amodal-input-wrap:has([aria-invalid="true"]) {
  border-color: var(--danger, #f3939d);
}

.amodal-field.field-error .amodal-label {
  color: var(--danger, #f3939d);
}

.amodal-submit,
.aladdin-captcha__confirm,
.install-modal__android-btn,
.cookie-consent__btn--accept {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--accent, #96c8fa);
  color: #111315;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.amodal-submit {
  width: 100%;
}

.amodal-submit:hover:not(:disabled),
.aladdin-captcha__confirm:hover:not(:disabled),
.install-modal__android-btn:hover:not(:disabled),
.cookie-consent__btn--accept:hover:not(:disabled) {
  background: var(--accent-bright, #b1d8ff);
}

.amodal-submit:disabled,
.aladdin-captcha__confirm:disabled,
.install-modal__android-btn:disabled {
  border-color: var(--border, #363d44);
  background: var(--surface-raised, #23282d);
  color: var(--text-secondary, #b1bbc5);
  opacity: 1;
}

.amodal-legal {
  color: var(--text-secondary, #b1bbc5);
  font-size: 12px;
  line-height: 1.65;
}

.amodal-legal a,
.cookie-consent__body a {
  color: var(--accent-bright, #b1d8ff);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.amodal-error,
.aladdin-captcha__error {
  padding: 12px;
  border: 1px solid var(--danger, #f3939d);
  border-radius: 6px;
  color: var(--danger, #f3939d);
  background: var(--bg, #111315);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.amodal-success {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 24px 0;
  text-align: center;
}

.amodal-success-ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--success, #80d6b2);
  border-radius: 50%;
  color: var(--success, #80d6b2);
}

.amodal-success-title {
  font-size: 22px;
  font-weight: 650;
}

.amodal-success-text {
  color: var(--text-secondary, #b1bbc5);
}

/* Anchor the menu to its field without changing form or modal dimensions. */
.phone-mask {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  flex: 1 1 0%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.phone-mask--open {
  z-index: 30;
}

.phone-mask > input {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 4px 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--text-primary, #edf1f5);
  font: 400 16px/1.5 var(--sans, 'Inter', sans-serif);
}

.phone-mask > input::placeholder {
  color: var(--text-muted, #919eaa);
  opacity: 1;
}

.phone-mask__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid var(--border, #363d44);
  border-radius: 4px;
  background: var(--surface-raised, #23282d);
  color: var(--text-primary, #edf1f5);
}

.phone-mask__trigger::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.phone-mask--open .phone-mask__trigger,
.phone-mask__trigger:hover {
  border-color: var(--accent, #96c8fa);
}

.phone-mask--open .phone-mask__trigger::after {
  transform: translateY(2px) rotate(225deg);
}

.phone-mask__flag {
  font-size: 17px;
  line-height: 1;
}

.phone-mask__dial {
  color: var(--text-secondary, #b1bbc5);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.phone-mask__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 240px;
  max-height: min(240px, 35dvh);
  padding: 6px;
  border: 1px solid var(--border, #363d44);
  border-radius: 6px;
  background: var(--surface-raised, #23282d);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted, #919eaa) transparent;
}

.phone-mask--open .phone-mask__menu:not([hidden]) {
  display: block;
}

.phone-mask__option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary, #edf1f5);
  text-align: left;
}

.phone-mask__option:hover,
.phone-mask__option:focus-visible {
  background: var(--bg, #111315);
}

.phone-mask__country {
  min-width: 0;
  overflow-wrap: anywhere;
}

.phone-mask--error .phone-mask__trigger,
.phone-mask input[aria-invalid="true"] {
  border-color: var(--danger, #f3939d);
}

:is(.hpf-field, .hpf-input-row, .amodal-field, .amodal-input-wrap):has(.phone-mask--open) {
  position: relative;
  z-index: 30;
  overflow: visible;
}

.hero-mobile-form > .phone-mask {
  min-height: 50px;
  padding: 6px 10px;
  border: 1px solid var(--border, #363d44);
  border-radius: 6px;
  background: var(--bg, #111315);
}

.hero-mobile-form > .phone-mask:focus-within {
  border-color: var(--accent, #96c8fa);
}

.hero-mobile-form > .phone-mask--error {
  border-color: var(--danger, #f3939d);
}

/* Captcha is appended to body and must cover an already-open access modal. */
.aladdin-captcha:not([hidden]) {
  z-index: 10200;
  display: flex;
}

.aladdin-captcha__panel {
  max-width: 560px;
  padding: 28px;
}

.aladdin-captcha__panel:focus {
  outline: 2px solid var(--accent, #96c8fa);
  outline-offset: 3px;
}

.aladdin-captcha__topline {
  min-height: 28px;
  margin-bottom: 24px;
  padding-right: 44px;
  color: var(--text-muted, #919eaa);
  font: 400 10px/1.5 var(--mono, 'JetBrains Mono', monospace);
}

.aladdin-captcha__topline strong {
  margin-left: 6px;
  font-weight: 500;
}

.aladdin-captcha__kicker {
  margin-bottom: 8px;
  color: var(--accent, #96c8fa);
  font: 500 11px/1.5 var(--mono, 'JetBrains Mono', monospace);
}

.aladdin-captcha .aladdin-captcha__title {
  margin-bottom: 12px;
  font-size: 26px;
  font-weight: 650;
  line-height: 1.25;
}

.aladdin-captcha__text {
  color: var(--text-secondary, #b1bbc5);
}

.aladdin-captcha__target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  margin: 24px 0 16px;
  padding: 12px 0;
  border-block: 1px solid var(--border, #363d44);
  color: var(--accent-bright, #b1d8ff);
  font-weight: 600;
}

.aladdin-captcha__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.aladdin-captcha__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 130px;
  padding: 14px;
  border: 1px solid var(--border, #363d44);
  border-radius: 6px;
  background: var(--bg, #111315);
  color: var(--text-secondary, #b1bbc5);
  text-align: left;
}

.aladdin-captcha__tile strong {
  color: var(--text-primary, #edf1f5);
  font-size: 20px;
}

.aladdin-captcha__tile-code,
.aladdin-captcha__tile em {
  font: 400 11px/1.5 var(--mono, 'JetBrains Mono', monospace);
}

.aladdin-captcha__tile em {
  margin-top: auto;
  color: var(--success, #80d6b2);
}

.aladdin-captcha__tile:hover,
.aladdin-captcha__tile--selected {
  border-color: var(--accent, #96c8fa);
  background: var(--surface-raised, #23282d);
}

.aladdin-captcha__tile--selected {
  box-shadow: inset 0 0 0 1px var(--accent, #96c8fa);
}

.aladdin-captcha__error {
  margin-top: 16px;
}

.aladdin-captcha__actions,
.install-modal__actions,
.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aladdin-captcha__actions {
  justify-content: flex-end;
  margin-top: 24px;
}

.aladdin-captcha__ghost,
.install-modal__dismiss-btn,
.cookie-consent__btn--reject {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border, #363d44);
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary, #edf1f5);
  text-align: center;
}

.aladdin-captcha__ghost:hover,
.install-modal__dismiss-btn:hover,
.cookie-consent__btn--reject:hover {
  border-color: var(--accent, #96c8fa);
  background: var(--surface-raised, #23282d);
}

.aladdin-captcha--loading .aladdin-captcha__grid,
.aladdin-captcha--verifying .aladdin-captcha__grid {
  opacity: .6;
  pointer-events: none;
}

.aladdin-captcha--loading .aladdin-captcha__target::after,
.aladdin-captcha--verifying .aladdin-captcha__target::after {
  content: '';
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border, #363d44);
  border-top-color: var(--accent, #96c8fa);
  border-radius: 50%;
  animation: landing-widget-spin 800ms linear infinite;
}

@keyframes landing-widget-spin {
  to { transform: rotate(360deg); }
}

.install-modal {
  z-index: 10100;
}

.install-modal.install-modal--open:not([aria-hidden="true"]) {
  display: flex;
}

.install-modal__card {
  max-width: 800px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  scrollbar-gutter: stable;
}

.install-modal--locking .install-modal__card {
  overflow: clip;
}

.install-modal__header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 64px 24px 28px;
  border-bottom: 1px solid var(--border, #363d44);
}

.install-modal__header-copy {
  flex: 1;
  min-width: 0;
}

.install-modal__eyebrow,
.install-guide__badge {
  margin-bottom: 10px;
  color: var(--accent, #96c8fa);
  font: 500 11px/1.5 var(--mono, 'JetBrains Mono', monospace);
}

.install-modal__title {
  margin-bottom: 12px;
  color: var(--text-primary, #edf1f5);
  font-size: 26px;
  font-weight: 650;
  line-height: 1.25;
}

.install-modal__subtitle {
  color: var(--text-secondary, #b1bbc5);
  font-size: 14px;
  line-height: 1.6;
}

.install-modal__header-phone {
  position: relative;
  flex: 0 0 80px;
  width: 80px;
  height: 140px;
  overflow: hidden;
  border: 1px solid var(--border, #363d44);
  border-radius: 8px;
  background: var(--bg, #111315);
  pointer-events: none;
}

.install-modal__phone-site-frame,
.install-guide__site-frame {
  position: absolute;
  top: 0;
  left: 50%;
  width: 390px;
  max-width: none;
  height: 844px;
  border: 0;
  background: var(--bg, #111315);
  pointer-events: none;
  transform: translateX(-50%) scale(.2);
  transform-origin: top center;
}

.install-modal__phone-top,
.install-modal__phone-homebar {
  position: absolute;
  left: 25%;
  right: 25%;
  height: 3px;
  border-radius: 3px;
  background: var(--text-muted, #919eaa);
}

.install-modal__phone-top { top: 5px; }
.install-modal__phone-homebar { bottom: 5px; }
.install-modal__phone-glass { display: none; }

.install-modal__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 20px 28px 0;
  padding: 4px;
  border: 1px solid var(--border, #363d44);
  border-radius: 6px;
  background: var(--bg, #111315);
}

.install-modal__tab {
  min-width: 0;
  min-height: 44px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary, #b1bbc5);
  line-height: 1.4;
}

.install-modal__tab.is-active,
.install-modal__tab[aria-selected="true"] {
  border-color: var(--border, #363d44);
  background: var(--surface-raised, #23282d);
  color: var(--accent-bright, #b1d8ff);
}

.install-modal__content { padding: 24px 28px 28px; }
.install-modal__panel { display: none; min-width: 0; }
.install-modal__panel.is-active:not([hidden]) { display: block; }

.install-modal__steps {
  display: grid;
  align-content: start;
  gap: 20px;
  min-width: 0;
}

.install-modal__step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.install-modal__step-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border, #363d44);
  border-radius: 50%;
  color: var(--accent-bright, #b1d8ff);
  font: 500 12px/1 var(--mono, 'JetBrains Mono', monospace);
}

.install-modal__step-text {
  padding-top: 2px;
  color: var(--text-secondary, #b1bbc5);
  line-height: 1.65;
}

.install-modal__step-text b { color: var(--text-primary, #edf1f5); }
.install-modal__actions { margin-top: 24px; }
.install-modal__actions > button { flex: 1 1 180px; }
.install-modal__panel > .install-modal__dismiss-btn { width: 100%; margin-top: 24px; }

.install-modal__fallback {
  margin-top: 16px;
  padding: 12px 0 0;
  border-top: 1px solid var(--border, #363d44);
  color: var(--text-secondary, #b1bbc5);
  font-size: 13px;
}

/* Static browser illustrations keep every instruction readable without timing. */
.install-guide {
  display: grid;
  grid-template-columns: minmax(0, 264px) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}

.install-guide__video { min-width: 0; }
.install-guide__badge { font-size: 10px; }

.install-guide__phone {
  position: relative;
  width: 100%;
  max-width: 264px;
  margin-inline: auto;
  padding: 8px;
  border: 1px solid var(--border, #363d44);
  border-radius: 8px;
  background: var(--bg, #111315);
}

.install-guide__device-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 26px;
  color: var(--text-muted, #919eaa);
  font: 400 10px/1.4 var(--mono, 'JetBrains Mono', monospace);
}

.install-guide__device-bar strong { font-weight: 500; }

.install-guide__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 460px;
  padding: 80px 8px 12px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface, #1b1f23);
  isolation: isolate;
}

.install-guide__site-frame { z-index: -2; transform: translateX(-50%) scale(.62); }
.install-guide__preview-glass { position: absolute; inset: 72px 0 0; z-index: -1; background: var(--surface, #1b1f23); }

.install-guide__ios-toolbar,
.install-guide__chrome-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 6px;
  border: 1px solid var(--border, #363d44);
  border-radius: 4px;
  background: var(--bg, #111315);
  color: var(--text-secondary, #b1bbc5);
  font-size: 10px;
}

.install-guide__toolbar-btn { display: flex; flex: 0 0 16px; }
.install-guide__toolbar-btn svg { width: 16px; height: 16px; }
.install-guide__address-pill { display: flex; flex: 1; align-items: center; gap: 5px; min-width: 0; }
.install-guide__address-pill strong { flex: 1; font-size: 10px; font-weight: 500; }
.install-guide__reload-icon { font-size: 16px; }
.install-guide__chrome-toolbar > span { flex: 1; }

.install-guide__share-target,
.install-guide__chrome-menu-target {
  display: flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--accent, #96c8fa);
  border-radius: 4px;
  background: var(--surface-raised, #23282d);
  color: var(--accent-bright, #b1d8ff);
}

.install-guide__share-target > span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.install-guide__pin { align-self: flex-start; width: 22px; height: 22px; border-radius: 50%; background: var(--accent, #96c8fa); color: #111315; font-size: 11px; line-height: 22px; text-align: center; }
.install-guide__callout { color: var(--accent-bright, #b1d8ff); font-size: 11px; line-height: 1.5; }

.install-guide__safari-menu,
.install-guide__share-sheet,
.install-guide__android-prompt {
  padding: 8px;
  border: 1px solid var(--border, #363d44);
  border-radius: 6px;
  background: var(--bg, #111315);
  color: var(--text-secondary, #b1bbc5);
  font-size: 10px;
  line-height: 1.5;
}

.install-guide__safari-menu-row,
.install-guide__sheet-action {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border, #363d44);
}

.install-guide__safari-menu-row:last-child,
.install-guide__sheet-action:last-child { border-bottom: 0; }
.install-guide__menu-icon,
.install-guide__action-icon { flex: 0 0 14px; text-align: center; color: var(--text-primary, #edf1f5); }
.install-guide__safari-menu-row > span:nth-child(2),
.install-guide__sheet-action > span:nth-child(2) { flex: 1; min-width: 0; }

.install-guide__safari-menu-row b,
.install-guide__sheet-action b,
.install-guide__android-prompt button b {
  display: grid;
  flex: 0 0 18px;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent, #96c8fa);
  color: #111315;
  font-size: 10px;
}

.install-guide__safari-menu-row--share,
.install-guide__sheet-action--home { color: var(--accent-bright, #b1d8ff); }
.install-guide__sheet-head { display: flex; align-items: center; gap: 6px; }
.install-guide__sheet-app-icon { display: grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; border-radius: 4px; background: var(--surface-raised, #23282d); color: var(--text-primary, #edf1f5); }
.install-guide__sheet-site { flex: 1; min-width: 0; }
.install-guide__sheet-site strong { display: block; font-size: 10px; font-weight: 500; overflow-wrap: anywhere; }
.install-guide__sheet-site > span { display: block; color: var(--text-muted, #919eaa); }
.install-guide__sheet-close { font-size: 18px; }
.install-guide__sheet-options { padding-block: 6px; color: var(--accent, #96c8fa); }
.install-guide__sheet-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border, #363d44); }
.install-guide__sheet-apps > span { min-width: 0; font-size: 9px; text-align: center; overflow-wrap: anywhere; }
.install-guide__sheet-apps i { display: block; width: 20px; height: 20px; margin: 0 auto 4px; border: 1px solid var(--border, #363d44); border-radius: 4px; background: var(--surface-raised, #23282d); }
.install-guide__android-prompt { margin-top: 24px; }
.install-guide__android-prompt > strong { display: block; margin: 8px 0 12px; font-size: 18px; color: var(--text-primary, #edf1f5); }
.install-guide__android-prompt button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 8px; border: 1px solid var(--accent, #96c8fa); border-radius: 4px; background: var(--surface-raised, #23282d); color: var(--accent-bright, #b1d8ff); }
.install-guide__finger,
.install-guide__tap { display: none; }

.cookie-consent {
  position: fixed;
  inset: auto 20px max(20px, env(safe-area-inset-bottom)) auto;
  z-index: 9000;
  display: grid;
  gap: 18px;
  width: min(480px, calc(100% - 40px));
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  padding: 24px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border, #363d44);
  border-radius: 8px;
  background: var(--surface, #1b1f23);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
  overflow-wrap: anywhere;
}

.cookie-consent__title { margin-bottom: 8px; color: var(--text-primary, #edf1f5); font-size: 16px; font-weight: 650; }
.cookie-consent__body { color: var(--text-secondary, #b1bbc5); font-size: 13px; line-height: 1.65; }
.cookie-consent__actions > button { flex: 1 1 150px; min-height: 44px; }

/* These classes are added by the existing install-preview URL bootstrap. */
html.install-preview-root,
html.install-preview-root body {
  width: 390px !important;
  min-width: 390px !important;
  height: 844px !important;
  min-height: 844px !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: var(--bg, #111315);
  letter-spacing: 0;
}

html.install-preview-root :is(.skip-link, #mobile-menu, .sticky-cta, .social-proof-toast, .amodal, .aladdin-captcha, .install-modal, .cookie-consent, .ticker-wrap, .hero-news-system, .hero-motion-toggle, #canvas-container),
html.install-preview-root main > section:not(#hero),
html.install-preview-root footer {
  display: none !important;
}

html.install-preview-root #header { position: relative !important; inset: auto !important; height: auto !important; min-height: 56px; }
html.install-preview-root .header-inner { min-height: 56px; height: auto !important; }
html.install-preview-root :is(.nav-desktop, .header-cta > .btn, .hamburger) { display: none !important; }
html.install-preview-root :is(.container, #hero > .container) { width: 100% !important; max-width: 390px !important; margin: 0 !important; padding-inline: 20px !important; }
html.install-preview-root #hero { min-height: 0 !important; padding: 24px 0 !important; }
html.install-preview-root #hero > .container { display: block !important; }
html.install-preview-root .hero-grid { display: block !important; padding: 0 !important; }
html.install-preview-root #hero-content { min-height: 0 !important; width: 100% !important; padding: 0 !important; }
html.install-preview-root .hero-title { margin: 12px 0 16px !important; font-size: 30px !important; line-height: 1.2 !important; letter-spacing: 0 !important; }
html.install-preview-root .hero-desc { font-size: 13px !important; line-height: 1.6 !important; }
html.install-preview-root .hero-actions { display: flex !important; flex-wrap: wrap; gap: 8px; margin-block: 16px; }
html.install-preview-root .hero-actions .btn { min-height: 40px; font-size: 12px !important; }
html.install-preview-root .hero-video-bg { display: none !important; }
html.install-preview-root #hero-panel { display: none !important; }
html.install-preview-root #mobile-lead-form:not([hidden]) { display: grid !important; gap: 10px; margin-top: 20px; }
html.install-preview-root :is(.reveal, [data-enter]) { opacity: 1 !important; transform: none !important; }

html.install-phone-preview-root *,
html.install-phone-preview-root *::before,
html.install-phone-preview-root *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
  letter-spacing: 0 !important;
}

@media (max-width: 768px) {
  .install-guide { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .install-guide__video { width: min(264px, 100%); margin-inline: auto; }
  .install-modal__header-phone { display: none; }
}

@media (max-width: 480px) {
  .amodal,
  .install-modal,
  .aladdin-captcha {
    padding: 12px;
    padding-block: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom));
  }

  .amodal-body,
  .aladdin-captcha__panel { padding: 20px 16px; }
  .amodal-hdr { padding-left: 16px; }
  .amodal-hex,
  .amodal-enc-row { padding-inline: 16px; }
  .amodal .amodal-title,
  .aladdin-captcha .aladdin-captcha__title,
  .install-modal__title { font-size: 24px; }
  .aladdin-captcha__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .aladdin-captcha__tile { padding: 12px; }
  .aladdin-captcha__actions > button { flex: 1 1 110px; }
  .install-modal__card { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .install-modal__header { padding: 20px 60px 20px 16px; }
  .install-modal__tabs { margin: 16px 16px 0; }
  .install-modal__tab { padding: 8px 4px; font-size: 12px; }
  .install-modal__content { padding: 20px 16px; }
  .cookie-consent { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100% - 24px); padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.amodal, .aladdin-captcha, .install-modal, .phone-mask, .cookie-consent),
  :is(.amodal, .aladdin-captcha, .install-modal, .phone-mask, .cookie-consent) *,
  :is(.amodal, .aladdin-captcha, .install-modal, .phone-mask, .cookie-consent) *::before,
  :is(.amodal, .aladdin-captcha, .install-modal, .phone-mask, .cookie-consent) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .aladdin-captcha__tile--selected,
  .install-modal__tab.is-active { outline: 2px solid Highlight; outline-offset: -3px; }
}

@media print {
  .amodal,
  .aladdin-captcha,
  .install-modal,
  .cookie-consent { display: none !important; }
}