/* X — Tablet branding (icon from /shared/brand/mini-logo.png) */

:root {
  --x-brand-accent: #e11d48;
  --x-brand-accent-soft: rgba(225, 29, 72, 0.2);
  --x-brand-icon-sm: 32px;
  --x-brand-icon-md: 52px;
  --x-brand-icon-lg: 72px;
}

.x-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.x-brand__icon {
  display: block;
  width: var(--x-brand-icon-size, var(--x-brand-icon-md));
  height: var(--x-brand-icon-size, var(--x-brand-icon-md));
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 24px var(--x-brand-accent-soft));
}

.x-brand__icon-wrap {
  display: grid;
  place-items: center;
  width: var(--x-brand-icon-size, var(--x-brand-icon-md));
  height: var(--x-brand-icon-size, var(--x-brand-icon-md));
  border-radius: calc(var(--x-brand-icon-size, var(--x-brand-icon-md)) * 0.28);
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.22);
  box-shadow: 0 12px 32px rgba(225, 29, 72, 0.18);
}

.x-brand__icon-wrap .x-brand__icon {
  width: calc(var(--x-brand-icon-size, var(--x-brand-icon-md)) * 0.62);
  height: calc(var(--x-brand-icon-size, var(--x-brand-icon-md)) * 0.62);
  filter: none;
}

.x-brand__name {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}

.x-brand__name--sm {
  font-size: 1rem;
}

.x-brand__name--md {
  font-size: 1.35rem;
}

.x-brand__name--lg {
  font-size: clamp(2rem, 5vw, 2.75rem);
}

.x-brand__kicker {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--x-brand-accent);
}

.ruby-mark,
.hub-mark,
.login-mark {
  display: none;
}

body.x-tablet .lock-note__icon {
  background: #e11d48;
}

body.x-tablet .lock-note--banking .lock-note__icon {
  background: #be123c;
}

body.x-tablet .lock-note--ads .lock-note__icon {
  background: #f97316;
}