/* Story artwork and mascot layer — loaded after the foundational layout styles. */
.brand-owl {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(5, 8, 40, .22));
}

html, body {
  overflow-x: hidden;
}

.language-picker {
  display: inline-flex;
  align-items: center;
}

.language-picker select {
  appearance: none;
  min-width: 100px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  padding: 8px 28px 8px 13px;
  color: #fff;
  background: rgba(255, 255, 255, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' d='m1 1 4.5 4L10 1'/%3E%3C/svg%3E") right 11px center / 10px no-repeat;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.language-picker select option {
  color: #142047;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer-brand .brand-owl {
  width: 34px;
  height: 34px;
}

.hero-owl {
  position: absolute;
  z-index: 2;
  width: 410px;
  /* The HTML includes intrinsic image dimensions for layout stability. Reset
     the rendered height here so the responsive CSS width preserves the
     mascot's aspect ratio instead of retaining its 1254px source height. */
  height: auto;
  right: -58px;
  bottom: -58px;
  filter: drop-shadow(0 24px 24px rgba(4, 7, 44, .3));
  animation: owl-float 6s ease-in-out infinite;
}

.phone {
  z-index: 4;
}

.landscape img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 60% center;
}

.story-card img {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 19, 57, .04) 23%, rgba(14, 19, 54, .82) 100%);
}

.story-card > :not(img) {
  position: relative;
  z-index: 2;
}

.back-card {
  background: #24296e;
}

.front-card {
  background: #57467d;
}

.feature-visual {
  position: relative;
  padding: 0;
  border: 10px solid #d9def5;
  background: #d9def5;
}

.feature-cover {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 57% center;
  border-radius: 206px 206px 18px 18px;
}

.feature-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(17, 24, 71, .65), transparent 55%);
  pointer-events: none;
}

.feature-overlay {
  position: absolute;
  z-index: 1;
  bottom: 31px;
  left: 31px;
  color: #fff;
}

.feature-overlay span,
.feature-overlay b {
  display: block;
}

.feature-overlay span {
  margin-bottom: 6px;
  font-size: 9px;
  letter-spacing: 1.4px;
  font-weight: 800;
  color: #ffe39d;
}

.feature-overlay b {
  font-family: Georgia, serif;
  font-size: 23px;
  font-weight: 400;
}

.download-art {
  background: #222a69;
}

.download-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .33;
}

.download-art::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, #242a6c 0%, rgba(35, 36, 104, .25) 100%), linear-gradient(0deg, rgba(10, 20, 74, .38), transparent 62%);
}

.download-owl {
  position: absolute;
  z-index: 2;
  width: 306px;
  right: 34px;
  bottom: -29px;
  filter: drop-shadow(0 20px 22px rgba(3, 8, 41, .42));
}

.download-art .d-star {
  z-index: 3;
}

@keyframes owl-float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-11px) rotate(1deg); }
}

@media (max-width: 800px) {
  .brand-owl { width: 36px; height: 36px; }
  .hero-owl { width: 370px; right: -10px; bottom: -76px; }
  .feature-cover { border-radius: 173px 173px 18px 18px; }
  .download-owl { width: 260px; right: calc(50% - 130px); bottom: -35px; }
  .language-picker { margin: 6px 8px; }
  .language-picker select { width: 100%; }
}

html[dir="rtl"] .hero-copy,
html[dir="rtl"] .how-copy,
html[dir="rtl"] .feature-copy {
  text-align: right;
}

html[dir="rtl"] .hero-actions,
html[dir="rtl"] .availability {
  justify-content: flex-start;
}

html[dir="rtl"] .steps li,
html[dir="rtl"] .feature-copy li {
  flex-direction: row-reverse;
}

html[dir="rtl"] .story-card {
  text-align: right;
}

html[dir="rtl"] .story-card > span {
  right: 30px;
  left: auto;
}

html[dir="rtl"] .feature-overlay {
  right: 31px;
  left: auto;
  text-align: right;
}

html[dir="rtl"] .language-picker select {
  padding: 8px 13px 8px 28px;
  background-position: left 11px center;
}