/* Native mobile freeflow scene: product UI and device silhouettes are CSS-only. */
.mobile-native-scene {
  --mns-progress: var(--scene-progress, 1);
  --mns-inverse: var(--scene-inverse, 0);
  position: relative;
  min-width: 0;
  min-height: clamp(35rem, 62vw, 51rem);
  margin: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  isolation: isolate;
}

.mns-stage {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.mns-device-orbit {
  position: absolute;
  transform-style: preserve-3d;
}

.mns-device-orbit--ipad {
  --mns-ipad-entry-x: -3.25rem;
  top: 10%;
  left: 1.5%;
  z-index: 1;
  width: min(80%, 53rem);
  aspect-ratio: 249.7 / 177.5;
  transform: perspective(90rem)
    translate3d(
      calc(var(--mns-inverse) * var(--mns-ipad-entry-x)),
      calc(var(--mns-inverse) * 2.25rem),
      calc(var(--mns-inverse) * -3rem)
    )
    rotateX(calc(var(--mns-inverse) * 2.2deg))
    rotateY(calc(var(--mns-inverse) * 4.5deg))
    rotateZ(calc(-1.4deg + (var(--mns-inverse) * -0.8deg)))
    scale(calc(0.95 + (var(--mns-progress) * 0.05)));
  transform-origin: 58% 72%;
}

.mns-device-orbit--iphone {
  right: 0.5%;
  bottom: 5.5%;
  z-index: 4;
  width: clamp(11.5rem, 25%, 16rem);
  aspect-ratio: 76.7 / 159.9;
  transform: perspective(80rem)
    translate3d(
      calc(var(--mns-inverse) * 2.75rem),
      calc(var(--mns-inverse) * 4rem),
      calc(var(--mns-inverse) * 2rem)
    )
    rotateX(calc(var(--mns-inverse) * -2.6deg))
    rotateY(calc(var(--mns-inverse) * -7deg))
    rotateZ(calc(2.1deg + (var(--mns-inverse) * 1deg)))
    scale(calc(0.92 + (var(--mns-progress) * 0.08)));
  transform-origin: 50% 88%;
}

.has-showcase-motion .mobile-native-scene .mns-device-orbit,
.has-showcase-motion .mobile-native-scene .mns-product-halo,
.has-showcase-motion .mobile-native-scene .mns-contact-shadow,
.has-showcase-motion .mobile-native-scene .mns-caption__device,
.has-showcase-motion .mobile-native-scene .mns-caption__proof {
  will-change: transform, opacity;
}

@media (min-width: 48.0625rem) and (min-height: 42rem) and (prefers-reduced-motion: no-preference) {
  .has-showcase-motion .showcase-panel[data-motion-mode="ios-ipados"] .mobile-native-scene {
    opacity: 1;
    transform: none;
  }
}

.mns-product-halo,
.mns-contact-shadow {
  position: absolute;
  pointer-events: none;
}

.mns-product-halo {
  z-index: -2;
  opacity: calc(0.34 + (var(--mns-progress) * 0.46));
  filter: blur(clamp(1.8rem, 4vw, 4.5rem));
  transform: scale(calc(0.82 + (var(--mns-progress) * 0.18)));
}

.mns-product-halo--transit {
  inset: 7% 5% 3%;
  border-radius: 44%;
  background:
    radial-gradient(circle at 22% 70%, rgb(45 212 191 / 58%), transparent 42%),
    radial-gradient(circle at 72% 28%, rgb(168 85 247 / 44%), transparent 48%),
    radial-gradient(circle at 88% 76%, rgb(236 72 153 / 24%), transparent 35%);
}

.mns-product-halo--companion {
  inset: 4% -32% 3%;
  border-radius: 44%;
  background:
    radial-gradient(circle at 42% 34%, rgb(45 212 191 / 62%), transparent 46%),
    radial-gradient(circle at 70% 70%, rgb(168 85 247 / 46%), transparent 52%);
}

.mns-contact-shadow {
  z-index: -1;
  height: 8%;
  border-radius: 50%;
  background: var(--levitation-contact);
  opacity: calc(0.32 + (var(--mns-progress) * 0.34));
  filter: blur(clamp(0.7rem, 1.5vw, 1.4rem));
  transform: translate3d(0, calc(var(--mns-inverse) * 1.5rem), 0)
    scaleX(calc(0.76 + (var(--mns-progress) * 0.24)));
}

.mns-contact-shadow--ipad {
  right: 7%;
  bottom: -8%;
  left: 7%;
}

.mns-contact-shadow--iphone {
  right: -12%;
  bottom: -4%;
  left: -12%;
  height: 4.5%;
}

.mns-device {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #777772 0%, #303136 17%, #121319 66%, #5c5b5e 100%);
  box-shadow:
    0 0.2rem 0.45rem rgb(28 21 39 / 15%),
    0 0.9rem 1.7rem rgb(28 21 39 / 20%),
    0 2.2rem 4.4rem var(--levitation-shadow),
    inset 0 0 0 1px var(--levitation-edge),
    inset 0 0 0 2px rgb(0 0 0 / 30%);
}

.mns-device::after {
  position: absolute;
  z-index: 8;
  inset: 0;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.mns-device--ipad {
  aspect-ratio: 249.7 / 177.5;
  border-radius: 2.55% / 3.58%;
}

.mns-device--iphone {
  aspect-ratio: 76.7 / 159.9;
  border-radius: 12.8% / 6.15%;
}

.mns-screen {
  position: absolute;
  overflow: hidden;
  background: #f4f3f7;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 46%);
  container-type: inline-size;
}

.mns-screen--ipad {
  inset: 4.7% 3.25%;
  aspect-ratio: 2420 / 1668;
  border-radius: 1.55% / 2.25%;
}

.mns-screen--iphone {
  inset: 1% 2.8%;
  aspect-ratio: 430 / 932;
  border-radius: 10.6% / 5%;
}

.mns-ipad-camera {
  position: absolute;
  z-index: 9;
  top: 1.9%;
  left: 50%;
  width: 0.48%;
  min-width: 2px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #55688a, #08090c 48%, #020204 72%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 9%);
  transform: translateX(-50%);
}

.mns-iphone-button {
  position: absolute;
  z-index: -1;
  width: 1.1%;
  border-radius: 0.12rem 0 0 0.12rem;
  background: linear-gradient(90deg, #17181d, #69696b);
  box-shadow: inset 0 1px rgb(255 255 255 / 18%);
}

.mns-iphone-button--action {
  top: 15.1%;
  left: -0.75%;
  height: 3.7%;
}

.mns-iphone-button--volume-up {
  top: 22.2%;
  left: -0.75%;
  height: 6.3%;
}

.mns-iphone-button--volume-down {
  top: 30.5%;
  left: -0.75%;
  height: 6.3%;
}

.mns-iphone-button--power {
  top: 25.2%;
  right: -0.75%;
  height: 10.2%;
  border-radius: 0 0.12rem 0.12rem 0;
  background: linear-gradient(90deg, #69696b, #17181d);
}

.mns-dynamic-island {
  position: absolute;
  z-index: 20;
  top: 1.25%;
  left: 50%;
  width: 29.1%;
  height: 3.95%;
  border-radius: 999px;
  background: #050507;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 4%);
  transform: translateX(-50%);
}

.mns-os-status {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.mns-os-status--iphone {
  height: 5.6%;
  padding: 0 7.5%;
  font-size: 3.25cqw;
}

.mns-os-status--ipad {
  height: 5.9%;
  padding: 0 2.2%;
  font-size: 1.35cqw;
}

.mns-os-indicators {
  display: flex;
  align-items: end;
  gap: 0.38em;
}

.mns-os-indicators i {
  display: block;
  width: 0.9em;
  height: 0.55em;
  border: 0.12em solid currentColor;
  border-radius: 0.18em;
}

.mns-os-indicators i:first-child {
  width: 0.85em;
  height: 0.72em;
  border: 0;
  background: linear-gradient(to right, currentColor 20%, transparent 20% 30%, currentColor 30% 52%, transparent 52% 62%, currentColor 62% 84%, transparent 84%);
}

.mns-os-indicators i:nth-child(2) {
  border-width: 0 0.12em 0.12em 0;
  border-radius: 0 0 100% 0;
  transform: rotate(45deg) translateY(-0.12em);
}

.mns-os-indicators i:last-child {
  position: relative;
  width: 1.25em;
}

.mns-os-indicators i:last-child::after {
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 12%;
  width: 64%;
  border-radius: 0.08em;
  background: currentColor;
  content: "";
}

/* Swiftli Smart Companion · native Today screen */
.mns-companion-app {
  --mns-app-canvas: #f2f2f7;
  --mns-app-surface: #fff;
  --mns-app-primary: #111216;
  --mns-app-secondary: #686970;
  --mns-app-line: rgb(17 18 22 / 8%);
  display: grid;
  grid-template-rows: 5.6% 7% minmax(0, 1fr) 8.4%;
  width: 100%;
  height: 100%;
  background: var(--mns-app-canvas);
  color: var(--mns-app-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 3.55cqw;
  line-height: 1.25;
}

.mns-companion-navbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 0 4.35% 2.2%;
}

.mns-companion-navbar > strong {
  font-size: 1.55em;
  letter-spacing: -0.04em;
}

.mns-profile-glyph {
  position: relative;
  display: grid;
  width: 2.55em;
  aspect-ratio: 1;
  border-radius: 50%;
  place-items: center;
  background: linear-gradient(135deg, #0a786e, #2ed4bf 50%, #a854f7);
}

.mns-profile-glyph i,
.mns-profile-glyph i::after {
  display: block;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.mns-profile-glyph i {
  width: 0.56em;
  height: 0.56em;
  transform: translateY(-0.25em);
}

.mns-profile-glyph i::after {
  width: 1.15em;
  height: 0.58em;
  transform: translate(-0.3em, 0.63em);
}

.mns-companion-scroll {
  min-height: 0;
  overflow: hidden;
  padding: 2.4% 4.35% 5%;
}

.mns-companion-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7em;
  margin-bottom: 1em;
}

.mns-companion-greeting > div {
  display: grid;
  gap: 0.14em;
}

.mns-companion-greeting strong {
  font-size: 1.24em;
  letter-spacing: -0.035em;
}

.mns-companion-greeting small {
  color: var(--mns-app-secondary);
  font-size: 0.72em;
}

.mns-companion-greeting > span {
  display: flex;
  align-items: center;
  padding: 0.42em 0.65em;
  border-radius: 0.72em;
  background: rgb(10 120 110 / 12%);
  color: #0a786e;
  gap: 0.35em;
  font-size: 0.58em;
  font-weight: 650;
}

.mns-companion-greeting > span i {
  width: 0.5em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
}

.mns-shift-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.15em;
  padding: 1.2em;
  border-radius: 1.45em;
  background: linear-gradient(135deg, #0a786e 0%, #2ed4bf 48%, #a854f7 100%);
  box-shadow: 0 0.8em 1.8em rgb(10 120 110 / 23%);
  color: #fff;
}

.mns-shift-card__orb {
  position: absolute;
  top: -3.4em;
  right: -2.4em;
  width: 8.5em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(255 255 255 / 9%);
}

.mns-shift-card header,
.mns-shift-card__meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
}

.mns-shift-card header strong {
  font-size: 0.72em;
}

.mns-shift-card header small {
  padding: 0.4em 0.7em;
  border-radius: 0.72em;
  background: rgb(255 255 255 / 16%);
  font-size: 0.54em;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.mns-shift-card__time {
  position: relative;
  margin-top: 0.58em;
  font-size: 2.05em;
  font-weight: 730;
  letter-spacing: -0.065em;
  line-height: 1;
}

.mns-shift-card p {
  position: relative;
  margin: 0.45em 0 0;
  font-size: 0.84em;
  font-weight: 650;
}

.mns-shift-card__role {
  position: relative;
  display: block;
  margin-top: 0.25em;
  opacity: 0.84;
  font-size: 0.62em;
}

.mns-shift-card__meta {
  margin-top: 0.9em;
  font-size: 0.58em;
  font-weight: 620;
}

.mns-shift-card__action {
  position: relative;
  display: block;
  margin-top: 0.8em;
  padding: 0.72em 0.8em;
  border-radius: 0.72em;
  background: #fff;
  color: #0a786e;
  font-size: 0.7em;
  font-weight: 720;
  text-align: center;
}

.mns-quick-actions > header {
  margin-bottom: 0.55em;
  font-size: 0.86em;
}

.mns-quick-actions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58em;
}

.mns-quick-actions__grid > span {
  display: grid;
  min-width: 0;
  min-height: 5.55em;
  padding: 0.75em;
  border-radius: 1em;
  background: var(--mns-app-surface);
  box-shadow: 0 0.35em 0.9em rgb(17 18 22 / 6%);
}

.mns-quick-actions__grid strong {
  align-self: end;
  margin-top: 0.45em;
  font-size: 0.69em;
}

.mns-quick-actions__grid small {
  overflow: hidden;
  color: var(--mns-app-secondary);
  font-size: 0.5em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mns-action-icon {
  position: relative;
  display: block;
  width: 1.9em;
  aspect-ratio: 1;
  border-radius: 0.62em;
  background: rgb(10 120 110 / 13%);
  color: #0a786e;
}

.mns-action-icon::before,
.mns-action-icon::after {
  position: absolute;
  content: "";
}

.mns-action-icon--calendar::before {
  inset: 25% 22% 20%;
  border: 0.12em solid currentColor;
  border-radius: 0.15em;
}

.mns-action-icon--calendar::after {
  top: 37%;
  right: 22%;
  left: 22%;
  border-top: 0.12em solid currentColor;
}

.mns-action-icon--holiday {
  background: rgb(255 149 0 / 13%);
  color: #d66f00;
}

.mns-action-icon--holiday::before {
  top: 21%;
  left: 49%;
  width: 0.12em;
  height: 57%;
  background: currentColor;
  transform: rotate(14deg);
}

.mns-action-icon--holiday::after {
  top: 20%;
  left: 27%;
  width: 48%;
  height: 32%;
  border-top: 0.15em solid currentColor;
  border-radius: 50%;
}

.mns-action-icon--document {
  background: rgb(168 84 247 / 13%);
  color: #8c3cd7;
}

.mns-action-icon--document::before {
  inset: 20% 27%;
  border: 0.12em solid currentColor;
  border-radius: 0.12em;
}

.mns-action-icon--document::after {
  top: 43%;
  right: 36%;
  left: 36%;
  border-top: 0.12em solid currentColor;
  box-shadow: 0 0.34em currentColor;
}

.mns-action-icon--inbox::before {
  inset: 28% 19% 24%;
  border: 0.12em solid currentColor;
  border-radius: 0.12em 0.12em 0.3em 0.3em;
}

.mns-action-icon--inbox::after {
  top: 49%;
  right: 20%;
  left: 20%;
  border-top: 0.12em solid currentColor;
}

.mns-companion-update {
  display: flex;
  align-items: center;
  margin-top: 0.7em;
  padding: 0.7em;
  border-radius: 0.9em;
  background: var(--mns-app-surface);
  gap: 0.6em;
}

.mns-companion-update > span {
  display: grid;
  width: 2em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(46 212 191 / 13%);
  color: #0a786e;
  place-items: center;
}

.mns-companion-update div {
  display: grid;
}

.mns-companion-update strong {
  font-size: 0.62em;
}

.mns-companion-update small {
  color: var(--mns-app-secondary);
  font-size: 0.49em;
}

.mns-companion-tabs,
.mns-boev-tabs {
  display: grid;
  align-items: center;
  background: color-mix(in srgb, var(--mns-app-surface, #fff) 88%, transparent);
  box-shadow: 0 -1px var(--mns-app-line, rgb(17 18 22 / 8%));
  backdrop-filter: blur(1.2em) saturate(1.25);
}

.mns-companion-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0.55em 0.2em 0.28em;
}

.mns-companion-tabs > span,
.mns-boev-tabs > span {
  display: grid;
  justify-items: center;
  color: var(--mns-app-secondary, #6d6d72);
  font-size: 0.48em;
  font-weight: 560;
  gap: 0.22em;
}

.mns-companion-tabs > .is-current,
.mns-boev-tabs > .is-current {
  color: #0a786e;
}

.mns-tab-symbol {
  position: relative;
  display: block;
  width: 1.55em;
  height: 1.35em;
  color: currentColor;
}

.mns-tab-symbol::before,
.mns-tab-symbol::after {
  position: absolute;
  content: "";
}

.mns-tab-symbol--today::before {
  inset: 20%;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 -0.52em 0 -0.22em currentColor, 0 0.52em 0 -0.22em currentColor, -0.52em 0 0 -0.22em currentColor, 0.52em 0 0 -0.22em currentColor;
}

.mns-tab-symbol--calendar::before,
.mns-tab-symbol--stack::before {
  inset: 10% 8%;
  border: 0.14em solid currentColor;
  border-radius: 0.18em;
}

.mns-tab-symbol--calendar::after {
  top: 38%;
  right: 8%;
  left: 8%;
  border-top: 0.14em solid currentColor;
}

.mns-tab-symbol--clock::before {
  inset: 6% 12%;
  border: 0.14em solid currentColor;
  border-radius: 50%;
}

.mns-tab-symbol--clock::after {
  top: 25%;
  left: 49%;
  width: 30%;
  height: 28%;
  border-bottom: 0.13em solid currentColor;
  border-left: 0.13em solid currentColor;
}

.mns-tab-symbol--tray::before {
  inset: 18% 5% 12%;
  border: 0.14em solid currentColor;
  border-radius: 0.15em 0.15em 0.38em 0.38em;
}

.mns-tab-symbol--tray::after {
  top: 56%;
  right: 6%;
  left: 6%;
  border-top: 0.14em solid currentColor;
}

.mns-tab-symbol--more::before {
  top: 46%;
  left: 44%;
  width: 0.28em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  box-shadow: -0.48em 0 currentColor, 0.48em 0 currentColor;
}

/* Beste ÖV · native Stats screen */
.mns-boev-app {
  --mns-app-canvas: #f2f2f7;
  --mns-app-surface: #fff;
  --mns-app-primary: #111216;
  --mns-app-secondary: #686970;
  --mns-app-line: rgb(17 18 22 / 8%);
  display: grid;
  grid-template-rows: 5.9% 8% minmax(0, 1fr) 10.2%;
  width: 100%;
  height: 100%;
  background: var(--mns-app-canvas);
  color: var(--mns-app-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 1.35cqw;
  line-height: 1.28;
}

.mns-boev-navbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 0 2.1% 1.05%;
}

.mns-boev-navbar > strong {
  font-size: 1.75em;
  letter-spacing: -0.045em;
}

.mns-boev-navbar__mark {
  display: flex;
  align-items: center;
  gap: 0.28em;
}

.mns-boev-navbar__mark i {
  width: 0.28em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mns-app-secondary);
}

.mns-boev-scroll {
  min-height: 0;
  overflow: hidden;
  padding: 1.2% 2.1% 3%;
}

.mns-boev-hero,
.mns-boev-ranking,
.mns-boev-weather {
  border-radius: 1.45em;
}

.mns-boev-hero {
  padding: 1.35em;
  background: linear-gradient(180deg, #0a0a0a, #1c1f3a);
  box-shadow: inset 0 0 0 1px rgb(45 212 191 / 20%);
  color: #f8f8fa;
}

.mns-boev-hero__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mns-boev-brand {
  position: relative;
  display: block;
  width: 2.35em;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.62em;
  background: linear-gradient(135deg, #2dd4bf, #a855f7 55%, #ec4899);
}

.mns-boev-brand i {
  position: absolute;
  top: 42%;
  left: 22%;
  width: 49%;
  height: 28%;
  border-top: 0.18em solid #fff;
  border-radius: 58% 54% 0 0;
  transform: rotate(-17deg);
}

.mns-boev-brand i::after {
  position: absolute;
  top: -0.34em;
  right: -0.15em;
  width: 0.55em;
  height: 0.55em;
  border-top: 0.18em solid #fff;
  border-right: 0.18em solid #fff;
  content: "";
  transform: rotate(34deg);
}

.mns-boev-live {
  padding: 0.36em 0.66em;
  border-radius: 999px;
  background: rgb(45 212 191 / 14%);
  color: #2dd4bf;
  font-size: 0.64em;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.mns-boev-hero h4 {
  margin: 0.48em 0 0.22em;
  background: linear-gradient(90deg, #2dd4bf, #a855f7, #ec4899);
  background-clip: text;
  color: transparent;
  font-size: 2.05em;
  font-weight: 820;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.mns-boev-hero p {
  max-width: 54em;
  margin: 0;
  color: rgb(248 248 250 / 65%);
  font-size: 0.78em;
}

.mns-boev-ranking {
  display: flex;
  align-items: center;
  margin-top: 0.75em;
  padding: 0.95em;
  background: var(--mns-app-surface);
  box-shadow: 0 0.3em 0.85em rgb(17 18 22 / 6%);
  gap: 0.9em;
}

.mns-boev-ranking__icon {
  display: grid;
  width: 2.8em;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 50%;
  place-items: center;
  font-size: 1.15em;
}

.mns-boev-ranking__icon--teal {
  background: rgb(45 212 191 / 14%);
  color: #0a9286;
}

.mns-boev-ranking__icon--orange {
  background: rgb(255 159 67 / 14%);
  color: #d66f00;
}

.mns-boev-ranking > div {
  display: grid;
  gap: 0.08em;
}

.mns-boev-ranking small {
  color: #0a9286;
  font-size: 0.57em;
  font-weight: 780;
  letter-spacing: 0.08em;
}

.mns-boev-ranking:nth-of-type(3) small {
  color: #d66f00;
}

.mns-boev-ranking strong {
  font-size: 1.05em;
  letter-spacing: -0.025em;
}

.mns-boev-ranking p {
  margin: 0;
  color: var(--mns-app-secondary);
  font-size: 0.72em;
}

.mns-boev-weather {
  margin-top: 0.75em;
  padding: 0.95em;
  background: var(--mns-app-surface);
  box-shadow: 0 0.3em 0.85em rgb(17 18 22 / 6%);
}

.mns-boev-weather header {
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.mns-boev-weather header > div {
  display: grid;
  gap: 0.1em;
}

.mns-boev-weather header strong {
  font-size: 0.95em;
}

.mns-boev-weather header small {
  color: var(--mns-app-secondary);
  font-size: 0.62em;
}

.mns-boev-weather header > span {
  color: #0a9286;
  font-size: 0.68em;
  font-weight: 760;
}

.mns-boev-chart {
  display: grid;
  margin-top: 0.7em;
  gap: 0.38em;
}

.mns-boev-chart > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5em;
  align-items: center;
  gap: 0.55em;
}

.mns-boev-chart i {
  display: block;
  width: calc(var(--bar) * 100%);
  height: 0.52em;
  border-radius: 999px;
  background: linear-gradient(90deg, #2dd4bf, #a855f7, #ec4899);
}

.mns-boev-chart > span:nth-child(1) i {
  --bar: 0.92;
}

.mns-boev-chart > span:nth-child(2) i {
  --bar: 0.82;
}

.mns-boev-chart > span:nth-child(3) i {
  --bar: 0.7;
}

.mns-boev-chart > span:nth-child(4) i {
  --bar: 0.61;
}

.mns-boev-chart > span:nth-child(5) i {
  --bar: 0.48;
}

.mns-boev-chart b {
  color: var(--mns-app-secondary);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.55em;
  font-weight: 650;
}

.mns-boev-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0.65em 12% 0.4em;
}

.mns-boev-tabs > span {
  font-size: 0.58em;
}

.mns-tab-symbol--stack::before {
  box-shadow: 0.22em 0.22em 0 -0.08em var(--mns-app-surface), 0.22em 0.22em 0 0 currentColor;
}

.mns-tab-symbol--search::before {
  top: 4%;
  left: 5%;
  width: 62%;
  aspect-ratio: 1;
  border: 0.14em solid currentColor;
  border-radius: 50%;
}

.mns-tab-symbol--search::after {
  right: 7%;
  bottom: 5%;
  width: 42%;
  border-top: 0.14em solid currentColor;
  transform: rotate(45deg);
  transform-origin: right;
}

.mns-tab-symbol--chart::before {
  right: 8%;
  bottom: 8%;
  left: 8%;
  height: 78%;
  background: linear-gradient(to right, currentColor 0 18%, transparent 18% 34%, currentColor 34% 55%, transparent 55% 71%, currentColor 71% 100%);
  clip-path: polygon(0 68%, 18% 68%, 18% 100%, 0 100%, 34% 38%, 55% 38%, 55% 100%, 34% 100%, 71% 0, 100% 0, 100% 100%, 71% 100%);
}

.mns-tab-symbol--profile::before {
  top: 3%;
  left: 34%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
}

.mns-tab-symbol--profile::after {
  right: 12%;
  bottom: 3%;
  left: 12%;
  height: 48%;
  border-radius: 50% 50% 22% 22%;
  background: currentColor;
}

/* Free-standing information typography */
.mns-caption {
  font-family: var(--font-sans);
}

.mns-caption__device,
.mns-caption__proof {
  position: absolute;
  z-index: 7;
  display: grid;
  margin: 0;
  line-height: 1.08;
  pointer-events: none;
}

.mns-caption__device b {
  font-size: clamp(0.92rem, 1.35vw, 1.25rem);
  font-stretch: 88%;
  font-variation-settings: "wdth" 88, "wght" 650;
  letter-spacing: -0.025em;
}

.mns-caption__device small,
.mns-caption__proof {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: clamp(0.52rem, 0.7vw, 0.66rem);
  font-weight: 560;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

.mns-caption__device--ipad {
  top: 1%;
  left: 5%;
  opacity: calc(0.52 + (var(--mns-progress) * 0.48));
  transform: translate3d(calc(var(--mns-inverse) * -2rem), 0, 0);
}

.mns-caption__device--iphone {
  top: 1%;
  right: 0;
  text-align: right;
  opacity: calc(0.48 + (var(--mns-progress) * 0.52));
  transform: translate3d(calc(var(--mns-inverse) * 2rem), calc(var(--mns-inverse) * 1rem), 0);
}

.mns-caption__proof {
  top: 18%;
  left: clamp(-1.25rem, -1.5vw, -0.35rem);
  max-width: 25rem;
  opacity: calc(0.42 + (var(--mns-progress) * 0.42));
  rotate: 180deg;
  transform: translate3d(0, calc(var(--mns-inverse) * 1.5rem), 0);
  writing-mode: vertical-rl;
}

/* Website theme drives both apps through their supported light/dark modes. */
:root[data-theme="dark"] .mns-companion-app,
:root[data-theme="dark"] .mns-boev-app {
  --mns-app-canvas: #000;
  --mns-app-surface: #1c1c1e;
  --mns-app-primary: #f5f3f7;
  --mns-app-secondary: #a7a4ac;
  --mns-app-line: rgb(245 243 247 / 10%);
}

:root[data-theme="dark"] .mns-companion-greeting > span,
:root[data-theme="dark"] .mns-companion-update > span {
  color: #5eead4;
}

:root[data-theme="dark"] .mns-boev-ranking__icon--teal,
:root[data-theme="dark"] .mns-boev-ranking small,
:root[data-theme="dark"] .mns-boev-weather header > span {
  color: #2dd4bf;
}

:root[data-theme="dark"] .mns-boev-ranking__icon--orange,
:root[data-theme="dark"] .mns-boev-ranking:nth-of-type(3) small {
  color: #ff9f43;
}

:root[data-theme="dark"] .mns-device {
  background: linear-gradient(145deg, #747477 0%, #292a2f 16%, #08090d 68%, #46464a 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mns-companion-app,
  :root:not([data-theme="light"]) .mns-boev-app {
    --mns-app-canvas: #000;
    --mns-app-surface: #1c1c1e;
    --mns-app-primary: #f5f3f7;
    --mns-app-secondary: #a7a4ac;
    --mns-app-line: rgb(245 243 247 / 10%);
  }

  :root:not([data-theme="light"]) .mns-companion-greeting > span,
  :root:not([data-theme="light"]) .mns-companion-update > span,
  :root:not([data-theme="light"]) .mns-boev-ranking__icon--teal,
  :root:not([data-theme="light"]) .mns-boev-ranking small,
  :root:not([data-theme="light"]) .mns-boev-weather header > span {
    color: #5eead4;
  }

  :root:not([data-theme="light"]) .mns-boev-ranking__icon--orange,
  :root:not([data-theme="light"]) .mns-boev-ranking:nth-of-type(3) small {
    color: #ff9f43;
  }
}

@media (max-width: 64rem) {
  .mobile-native-scene {
    min-height: clamp(34rem, 72vw, 43rem);
  }

  .mns-device-orbit--ipad {
    top: 12%;
    width: 83%;
  }

  .mns-device-orbit--iphone {
    right: 0;
    bottom: 8%;
    width: clamp(10.5rem, 27%, 13.5rem);
  }

  .mns-caption__proof {
    max-width: 19rem;
  }
}

@media (min-width: 48.0625rem) and (max-width: 64rem) {
  .mns-device-orbit--ipad {
    --mns-ipad-entry-x: -1rem;
  }
}

@media (max-width: 48rem) {
  .mobile-native-scene {
    min-height: clamp(31rem, 112vw, 39rem);
  }

  .mns-device-orbit--ipad {
    top: 13%;
    left: 0;
    width: 94%;
  }

  .mns-device-orbit--iphone {
    right: 1%;
    bottom: 9%;
    width: clamp(9.2rem, 35%, 12rem);
  }

  .mns-caption__device--ipad {
    top: 1.5%;
    left: 0;
  }

  .mns-caption__device--iphone {
    top: 1.5%;
    right: 0;
  }

  .mns-caption__proof {
    top: auto;
    bottom: 1%;
    left: 0;
    max-width: 15rem;
    font-size: 0.48rem;
    rotate: 0deg;
    writing-mode: horizontal-tb;
  }
}

@media (max-width: 34rem) {
  .mns-device-orbit--ipad {
    top: 14%;
    width: 100%;
  }

  .mns-device-orbit--iphone {
    right: 0;
    bottom: 10%;
    width: clamp(9.2rem, 40%, 12rem);
  }

  .mns-caption__proof {
    display: none;
  }

  .mns-caption__device b {
    font-size: 0.78rem;
  }

  .mns-caption__device small {
    font-size: 0.46rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-native-scene,
  .mobile-native-scene *,
  .mobile-native-scene *::before,
  .mobile-native-scene *::after {
    animation: none !important;
    transition: none !important;
  }

  .mobile-native-scene .mns-device-orbit--ipad {
    transform: rotateZ(-1.4deg) !important;
  }

  .mobile-native-scene .mns-device-orbit--iphone {
    transform: rotateZ(2.1deg) !important;
  }

  .mobile-native-scene .mns-product-halo,
  .mobile-native-scene .mns-contact-shadow,
  .mobile-native-scene .mns-caption__device,
  .mobile-native-scene .mns-caption__proof {
    opacity: 0.76 !important;
    transform: none !important;
  }
}