/* Typography, page layout, and Figma component styles. */
@font-face {
  font-family: Vazirmatn;
  src: url("assets/vazirmatn-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Vazirmatn;
  src: url("assets/vazirmatn-500.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Vazirmatn;
  src: url("assets/vazirmatn-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Vazirmatn;
  src: url("assets/vazirmatn-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Vazirmatn;
  src: url("assets/vazirmatn-800.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: Vazirmatn;
  src: url("assets/vazirmatn-900.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: Comme;
  src: url("assets/comme.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Material Icons Round";
  src: url("assets/material-icons-round.otf") format("opentype");
  font-display: block;
}
@font-face {
  font-family: "Material Symbols Rounded";
  src: url("assets/material-symbols-recenter.ttf") format("truetype");
  font-display: block;
}

* {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #f5f0e6;
  color: #1f2430;
  font-family: Vazirmatn, sans-serif;
}
p,
h1,
h2,
h3 {
  margin: 0;
}
button,
a {
  font: inherit;
  color: inherit;
  text-decoration: none;
}
button {
  padding: 0;
  background: transparent;
  cursor: pointer;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #d9a23a;
  outline-offset: 5px;
}
img {
  display: block;
  vertical-align: middle;
}
main {
  direction: ltr;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}
section {
  scroll-margin-top: 16px;
}
.mobile-layout {
  display: none;
}
.skip-link {
  position: fixed;
  top: -60px;
  right: 16px;
  background: white;
  color: #1c3c8c;
  padding: 12px;
  z-index: 10;
}
.skip-link:focus {
  top: 16px;
}
dialog {
  direction: rtl;
  max-width: 440px;
  width: calc(100% - 32px);
  padding: 28px;
  border-radius: 24px;
  background: #f5f0e6;
  box-shadow: 0 16px 64px #0a194640;
}
dialog::backdrop {
  background: #0a194680;
  backdrop-filter: blur(4px);
}
dialog h2 {
  font-size: 22px;
  margin-bottom: 12px;
}
dialog p {
  line-height: 1.8;
}
dialog button {
  margin-top: 20px;
  background: #1c3c8c;
  color: white;
  border-radius: 999px;
  padding: 10px 28px;
}
/* Hero / desktop and shared primitives */
.hero-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-panel-desktop {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  align-content: stretch;
  display: flex;
  flex-direction: column;
  --gradient-from: #0a1946;
  align-items: center;
  overflow: clip;
  position: relative;
  border-radius: 40px;
  flex-shrink: 0;
  --gradient-to: #1e4199;
  --gradient-position: 50%;
  --gradient-via: #122d74;
  width: 100%;
}
.hero-header-desktop {
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: clip;
  padding-left: 40px;
  padding-right: 48px;
  padding-top: 24px;
  padding-bottom: 24px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.button-white {
  background-color: white;
  align-content: stretch;
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding-left: 28px;
  padding-right: 28px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
  width: 160px;
}
.button-label-primary {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 24px;
  position: relative;
  flex-shrink: 0;
  color: #1c3c8c;
  font-size: 16px;
  white-space: nowrap;
}
.hero-navigation {
  word-break: break-word;
  align-content: stretch;
  cursor: pointer;
  display: flex;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  gap: 40px;
  align-items: center;
  line-height: 0;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
.text-link {
  display: block;
  position: relative;
  flex-shrink: 0;
}
.text-link-label {
  line-height: 20px;
}
.hero-brand-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 900;
  line-height: 28px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}
.hero-copy-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  overflow: clip;
  padding-bottom: 56px;
  padding-top: 48px;
  position: relative;
  flex-shrink: 0;
  width: 860px;
}
.hero-title-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 800;
  line-height: 80px;
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 56px;
  text-align: center;
  width: min-content;
}
.hero-description-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 32px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 18px;
  text-align: center;
  width: 720px;
}
.hero-actions-desktop {
  align-content: stretch;
  display: flex;
  gap: 16px;
  align-items: center;
  overflow: clip;
  padding-top: 8px;
  position: relative;
  flex-shrink: 0;
}
.button-glass {
  background-color: rgba(255, 255, 255, 0.16);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.4);
  border-style: solid;
  align-content: stretch;
  cursor: pointer;
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding-left: 28px;
  padding-right: 28px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
  width: 160px;
}
.button-label-white {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 24px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 16px;
  white-space: nowrap;
}
.hero-stage-desktop {
  height: 420px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.hero-glow {
  position: absolute;
  left: 376px;
  width: 640px;
  height: 640px;
  top: -80px;
}
.hero-glow-inset {
  position: absolute;
  inset: -21.88%;
}
.image-fill {
  display: block;
  max-width: none;
  width: 100%;
  height: 100%;
}
.hero-word-chip {
  position: absolute;
  backdrop-filter: blur(12px);
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.18);
  border-style: solid;
  align-content: stretch;
  display: flex;
  --gradient-from: rgba(41, 57, 95, 0.74);
  align-items: center;
  left: 96px;
  overflow: clip;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 20px;
  box-shadow: 0px 12px 32px 0px rgba(4, 12, 31, 0.18);
  --gradient-to: rgba(23, 35, 68, 0.74);
  top: 40px;
  --gradient-position: 55%;
  --gradient-via: rgba(31, 45, 82, 0.72);
}
.hero-word-chip-copy {
  word-break: break-word;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}
.hero-word-chip-meaning {
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: #f8faff;
  font-size: 14px;
}
.hero-word-chip-word {
  font-family: Comme, sans-serif;
  font-weight: 500;
  line-height: 16px;
  position: relative;
  flex-shrink: 0;
  color: #d1d7e5;
  font-size: 12px;
}
.hero-audio-chip {
  position: absolute;
  background-color: white;
  align-content: stretch;
  display: flex;
  gap: 10px;
  align-items: center;
  left: 70px;
  overflow: clip;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 20px;
  box-shadow: -3px 6px 28px 0px rgba(0, 0, 0, 0.08);
  top: 250px;
}
.audio-waveform {
  align-content: stretch;
  display: flex;
  gap: 3px;
  align-items: center;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
}
.waveform-bar-10px {
  background-color: #1c3c8c;
  height: 10px;
  position: relative;
  border-radius: 2px;
  flex-shrink: 0;
  width: 3px;
}
.waveform-bar-18px {
  background-color: #1c3c8c;
  height: 18px;
  position: relative;
  border-radius: 2px;
  flex-shrink: 0;
  width: 3px;
}
.waveform-bar-26px {
  background-color: #1c3c8c;
  height: 26px;
  position: relative;
  border-radius: 2px;
  flex-shrink: 0;
  width: 3px;
}
.waveform-bar-14px {
  background-color: #1c3c8c;
  height: 14px;
  position: relative;
  border-radius: 2px;
  flex-shrink: 0;
  width: 3px;
}
.waveform-bar-22px {
  background-color: #1c3c8c;
  height: 22px;
  position: relative;
  border-radius: 2px;
  flex-shrink: 0;
  width: 3px;
}
.waveform-bar-30px {
  background-color: #1c3c8c;
  height: 30px;
  position: relative;
  border-radius: 2px;
  flex-shrink: 0;
  width: 3px;
}
.waveform-bar-16px {
  background-color: #1c3c8c;
  height: 16px;
  position: relative;
  border-radius: 2px;
  flex-shrink: 0;
  width: 3px;
}
.waveform-bar-24px {
  background-color: #1c3c8c;
  height: 24px;
  position: relative;
  border-radius: 2px;
  flex-shrink: 0;
  width: 3px;
}
.waveform-bar-12px {
  background-color: #1c3c8c;
  height: 12px;
  position: relative;
  border-radius: 2px;
  flex-shrink: 0;
  width: 3px;
}
.waveform-bar-20px {
  background-color: #1c3c8c;
  height: 20px;
  position: relative;
  border-radius: 2px;
  flex-shrink: 0;
  width: 3px;
}
.hero-chip-label {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 14px;
  white-space: nowrap;
}
.audio-play-badge {
  background-color: #1c3c8c;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  padding: 6px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
}
.icon-play-frame {
  align-content: stretch;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.icon-play-glyph {
  word-break: break-word;
  font-family: Material Icons Round;
  line-height: 24px;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 24px;
  color: #1c3c8c;
  white-space: nowrap;
}
.hero-leitner-chip {
  position: absolute;
  background-color: white;
  align-content: stretch;
  display: flex;
  gap: 10px;
  align-items: center;
  left: 1090px;
  overflow: clip;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 20px;
  box-shadow: -3px 6px 28px 0px rgba(0, 0, 0, 0.08);
  top: 30px;
}
.success-check-badge {
  background-color: #286441;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  padding: 4px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
}
.icon-frame {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.image-fill-absolute {
  position: absolute;
  display: block;
  inset: 0;
  max-width: none;
  width: 100%;
  height: 100%;
}
.hero-language-chip {
  position: absolute;
  background-color: white;
  align-content: stretch;
  display: flex;
  align-items: center;
  left: 1120px;
  overflow: clip;
  padding: 4px;
  border-radius: 999px;
  box-shadow: -3px 6px 28px 0px rgba(0, 0, 0, 0.08);
  top: 250px;
}
.language-option-active {
  background-color: #1c3c8c;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
}
.english-label-white {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 600;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 14px;
  white-space: nowrap;
}
.language-option {
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
}
.hero-headphones-position-desktop {
  position: absolute;
  display: flex;
  inset: -13.49% 61.93% 88.81% 30.17%;
  align-items: center;
  justify-content: center;
  container-type: size;
}
.sticker-tilt-left {
  rotate: -10deg;
  flex: none;
  height: hypot(13.9578cqw, 83.9166cqh);
  width: hypot(86.0422cqw, -16.0834cqh);
}
.sticker-frame {
  position: relative;
  width: 100%;
  height: 100%;
}
.artwork-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.headphones-artwork {
  position: absolute;
  height: 97.28%;
  left: 1.5%;
  max-width: none;
  top: 1.63%;
  width: 98%;
}
.hero-greeting-position-desktop {
  position: absolute;
  display: flex;
  inset: -7.14% 28.8% 84.81% 63.84%;
  align-items: center;
  justify-content: center;
  container-type: size;
}
.sticker-tilt-right {
  flex: none;
  height: hypot(-11.1052cqw, 86.3477cqh);
  rotate: 8deg;
  width: hypot(88.8948cqw, 13.6523cqh);
}
.greeting-artwork {
  position: absolute;
  height: 98.12%;
  left: 0.56%;
  max-width: none;
  top: 0.63%;
  width: 99.44%;
}
.hero-leitner-sticker {
  position: absolute;
  left: 1240px;
  width: 120px;
  height: 120px;
  top: 110px;
}
.image-cover-absolute {
  position: absolute;
  inset: 0;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.hero-paper-plane {
  position: absolute;
  inset: 35.71% 90.66% 50.45% 2.87%;
}
.paper-plane-artwork {
  position: absolute;
  height: 95.16%;
  left: 0;
  max-width: none;
  top: 2.42%;
  width: 99.48%;
}
.hero-reader-position-desktop {
  position: absolute;
  display: flex;
  height: 698.718px;
  align-items: center;
  justify-content: center;
  left: 211.62px;
  top: 35.64px;
  width: 436.766px;
}
.phone-tilt-left {
  flex: none;
  rotate: -8.1deg;
}
.hero-reader-phone-desktop {
  height: 656.258px;
  position: relative;
  width: 347.747px;
}
.hero-recall-position-desktop {
  position: absolute;
  display: flex;
  height: 699.371px;
  align-items: center;
  justify-content: center;
  left: 735px;
  top: 39px;
  width: 440.671px;
}
.phone-tilt-right {
  flex: none;
  rotate: 8.56deg;
}
.hero-recall-phone-desktop {
  height: 655px;
  position: relative;
  width: 347px;
}
.hero-home-phone-desktop {
  --offset-x: -50%;
  position: absolute;
  height: 736px;
  left: 50%;
  top: -34px;
  width: 390px;
  translate: -50% 0;
}
/* Hero / mobile */
.hero-mobile {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 8px;
  padding-left: 8px;
  padding-right: 8px;
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-panel-mobile {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  align-content: stretch;
  display: flex;
  flex-direction: column;
  --gradient-from: #0a1946;
  align-items: center;
  overflow: clip;
  position: relative;
  border-radius: 28px;
  flex-shrink: 0;
  --gradient-to: #1e4199;
  --gradient-position: 50%;
  --gradient-via: #122d74;
  width: 100%;
}
.hero-header-mobile {
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: clip;
  padding-left: 12px;
  padding-right: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.hero-start-button-mobile {
  background-color: white;
  align-content: stretch;
  display: flex;
  height: 40.04px;
  align-items: center;
  justify-content: center;
  padding-left: 21.56px;
  padding-right: 21.56px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
  width: 123.2px;
}
.hero-start-label-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 18.48px;
  position: relative;
  flex-shrink: 0;
  color: #1c3c8c;
  font-size: 12.32px;
  white-space: nowrap;
}
.hero-brand-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 900;
  line-height: 28px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 20px;
  text-align: right;
  white-space: nowrap;
}
.hero-copy-mobile {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  overflow: clip;
  padding-bottom: 32px;
  padding-top: 24px;
  position: relative;
  flex-shrink: 0;
  width: 304px;
}
.hero-title-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 800;
  line-height: 36px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 28px;
  text-align: center;
  width: 100%;
}
.hero-description-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 24px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 16px;
  text-align: center;
  width: 100%;
}
.hero-actions-mobile {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  overflow: clip;
  padding-top: 8px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.button-white-full {
  background-color: white;
  align-content: stretch;
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding-left: 28px;
  padding-right: 28px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
  width: 100%;
}
.button-glass-full {
  background-color: rgba(255, 255, 255, 0.16);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.4);
  border-style: solid;
  align-content: stretch;
  cursor: pointer;
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding-left: 28px;
  padding-right: 28px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
  width: 100%;
}
.hero-stage-mobile {
  height: 300px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.hero-reader-position-mobile {
  position: absolute;
  display: flex;
  height: 455.499px;
  align-items: center;
  justify-content: center;
  left: -64px;
  top: 29.96px;
  width: 284.73px;
}
.hero-reader-phone-mobile {
  height: 427.819px;
  position: relative;
  width: 226.698px;
}
.hero-recall-position-mobile {
  --offset-x: -50%;
  --offset-y: -50%;
  position: absolute;
  display: flex;
  height: 455.401px;
  align-items: center;
  justify-content: center;
  left: calc(50% + 102.52px);
  top: calc(50% + 108.66px);
  width: 286.993px;
  translate: -50% -50%;
}
.hero-recall-phone-mobile {
  height: 426.501px;
  position: relative;
  width: 226px;
}
.hero-home-phone-mobile {
  --offset-x: -50%;
  position: absolute;
  height: 484px;
  left: 50%;
  top: -3.04px;
  width: 256px;
  translate: -50% 0;
}
.hero-greeting-position-mobile {
  position: absolute;
  display: flex;
  inset: -6.67% 11.2% 87.64% 70.66%;
  align-items: center;
  justify-content: center;
  container-type: size;
}
.hero-headphones-position-mobile {
  position: absolute;
  display: flex;
  inset: -11.47% 67.25% 89.88% 12.79%;
  align-items: center;
  justify-content: center;
  container-type: size;
}
/* Books / desktop */
.books-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  padding-bottom: 48px;
  padding-top: 96px;
  position: relative;
  width: 100%;
  height: 100%;
}
.section-heading-desktop {
  word-break: break-word;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  text-align: center;
  width: 800px;
}
.section-title-desktop {
  font-family: Vazirmatn, sans-serif;
  font-weight: 700;
  line-height: 0;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 36px;
  width: 100%;
}
.section-title-text-desktop {
  line-height: 52px;
}
.section-title-accent-desktop {
  line-height: 52px;
  color: #1c3c8c;
}
.section-description-desktop {
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 32px;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 18px;
  width: 100%;
}
.books-shelves-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.books-shelf-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.books-publisher-row-desktop {
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-left: 120px;
  padding-right: 120px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.books-publisher-badge-desktop {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.6);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
  position: relative;
  border-radius: 999px;
  box-shadow: 0px 8px 24px 0px rgba(4, 12, 31, 0.08);
  flex-shrink: 0;
}
.books-publisher-label-desktop {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 600;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: #1c3c8c;
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}
.books-shelf-stage-desktop {
  height: 372px;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 1440px;
}
.books-shelf-top-desktop {
  position: absolute;
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #e8e0d1;
  height: 32px;
  left: 0;
  --gradient-to: white;
  top: 266px;
  width: 1440px;
}
.books-shelf-edge-desktop {
  position: absolute;
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #e3d9c7;
  height: 14px;
  left: 0;
  box-shadow: 0px 10px 24px 0px rgba(10, 18, 41, 0.1);
  --gradient-to: #cfc2ab;
  top: 298px;
  width: 1440px;
}
.books-oxford-strip-desktop {
  position: absolute;
  align-content: stretch;
  display: flex;
  gap: 96px;
  align-items: flex-start;
  overflow: clip;
  top: 0;
  left: 0;
}
.books-series-headway-desktop {
  height: 372px;
  position: relative;
  flex-shrink: 0;
  width: 512px;
}
.books-book-headway-advanced-desktop {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 261px;
  left: 320px;
  top: 15px;
  width: 192px;
}
.book-spine-desktop {
  position: absolute;
  height: 261px;
  left: 0;
  top: 0;
  width: 8px;
}
.book-pages-desktop {
  position: absolute;
  height: 6px;
  left: 0;
  top: 0;
  width: 192px;
}
.book-cover-desktop {
  position: absolute;
  height: 255px;
  left: 8px;
  overflow: clip;
  border-radius: 1px;
  top: 6px;
  width: 184px;
}
.book-cover-artwork-desktop {
  position: absolute;
  height: 255px;
  left: 0;
  top: 0;
  width: 184px;
}
.book-cover-headway-advanced {
  position: absolute;
  height: 100%;
  left: -5.02%;
  max-width: none;
  top: 0;
  width: 110.04%;
}
.book-cover-shading-desktop {
  position: absolute;
  height: 255px;
  left: 0;
  top: 0;
  width: 14px;
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(255, 255, 255, 0.24) 35%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0) 100%
  );
}
.books-book-headway-upper-intermediate-desktop {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 261px;
  left: 0;
  top: 20px;
  width: 192px;
}
.book-cover-headway-upper-intermediate {
  position: absolute;
  height: 100%;
  left: -4.96%;
  max-width: none;
  top: 0;
  width: 109.91%;
}
.books-book-headway-intermediate-desktop {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 261px;
  left: 256px;
  top: 20px;
  width: 192px;
}
.book-cover-headway-intermediate {
  position: absolute;
  height: 100%;
  left: -4.82%;
  max-width: none;
  top: 0;
  width: 109.65%;
}
.books-book-headway-pre-intermediate-desktop {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 261px;
  left: 64px;
  top: 25px;
  width: 192px;
}
.books-book-headway-elementary-desktop {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 261px;
  left: 192px;
  top: 25px;
  width: 192px;
}
.book-cover-headway-elementary {
  position: absolute;
  height: 100%;
  left: -4.46%;
  max-width: none;
  top: 0;
  width: 108.93%;
}
.books-book-headway-beginner-desktop {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 261px;
  left: 128px;
  top: 30px;
  width: 192px;
}
.book-cover-headway-beginner {
  position: absolute;
  height: 100%;
  left: -4.93%;
  max-width: none;
  top: 0;
  width: 109.85%;
}
.book-series-tag-wide {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.75);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  left: 217px;
  overflow: clip;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 999px;
  box-shadow: 0px 8px 24px 0px rgba(4, 12, 31, 0.08);
  top: 328px;
}
.book-series-label {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 500;
  line-height: 16px;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}
.book-cover-american-english-file {
  position: absolute;
  height: 100%;
  left: -5.95%;
  max-width: none;
  top: 0;
  width: 109.91%;
}
.book-cover-american-english-file-beginner {
  position: absolute;
  height: 100%;
  left: -5.98%;
  max-width: none;
  top: 0;
  width: 109.97%;
}
.book-series-tag-american-english-file {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.75);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  left: 181px;
  overflow: clip;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 999px;
  box-shadow: 0px 8px 24px 0px rgba(4, 12, 31, 0.08);
  top: 328px;
}
.books-series-oxford-word-skills-desktop {
  height: 372px;
  position: relative;
  flex-shrink: 0;
  width: 320px;
}
.books-book-oxford-word-skills-advanced-desktop {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 261px;
  left: 0;
  top: 25px;
  width: 192px;
}
.book-cover-word-skills-advanced {
  position: absolute;
  height: 104.05%;
  left: 0;
  max-width: none;
  top: -2.02%;
  width: 100%;
}
.books-book-oxford-word-skills-intermediate-desktop {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 261px;
  left: 128px;
  top: 25px;
  width: 192px;
}
.book-cover-word-skills-intermediate {
  position: absolute;
  height: 100.18%;
  left: 0;
  max-width: none;
  top: -0.09%;
  width: 100%;
}
.books-book-oxford-word-skills-basic-desktop {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 261px;
  left: 64px;
  top: 30px;
  width: 192px;
}
.book-cover-word-skills-basic {
  position: absolute;
  height: 100.66%;
  left: 0;
  max-width: none;
  top: -0.33%;
  width: 100%;
}
.book-series-tag-word-skills {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.75);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  left: 93px;
  overflow: clip;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 999px;
  box-shadow: 0px 8px 24px 0px rgba(4, 12, 31, 0.08);
  top: 328px;
}
.books-cambridge-strip-desktop {
  position: absolute;
  align-content: stretch;
  display: flex;
  gap: 96px;
  align-items: flex-start;
  overflow: clip;
  top: 0;
  left: -1664px;
}
.books-series-interchange-desktop {
  height: 372px;
  position: relative;
  flex-shrink: 0;
  width: 384px;
}
.books-book-interchange-3-desktop {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 261px;
  left: 192px;
  top: 20px;
  width: 192px;
}
.book-cover-interchange {
  position: absolute;
  height: 100%;
  left: -4.16%;
  max-width: none;
  top: 0;
  width: 108.32%;
}
.book-cover-interchange-intro {
  position: absolute;
  height: 100%;
  left: -4.56%;
  max-width: none;
  top: 0;
  width: 109.12%;
}
.book-series-tag-interchange {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.75);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  left: 144px;
  overflow: clip;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 999px;
  box-shadow: 0px 8px 24px 0px rgba(4, 12, 31, 0.08);
  top: 328px;
}
.books-series-grammar-in-use-american-desktop {
  height: 372px;
  position: relative;
  flex-shrink: 0;
  width: 256px;
}
.book-cover-basic-grammar {
  position: absolute;
  height: 100%;
  left: -2.04%;
  max-width: none;
  top: 0;
  width: 104.07%;
}
.books-book-basic-grammar-in-use-desktop {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 261px;
  left: 0;
  top: 30px;
  width: 192px;
}
.book-cover-grammar-american {
  position: absolute;
  height: 100%;
  left: -1.24%;
  max-width: none;
  top: 0;
  width: 102.48%;
}
.book-series-tag-grammar-american {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.75);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  left: 37px;
  overflow: clip;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 999px;
  box-shadow: 0px 8px 24px 0px rgba(4, 12, 31, 0.08);
  top: 328px;
}
.book-cover-vocabulary {
  position: absolute;
  height: 100%;
  left: -1.51%;
  max-width: none;
  top: 0;
  width: 103.01%;
}
.book-spine-thumbnail {
  position: absolute;
  height: 101.99%;
  left: -6.92%;
  max-width: none;
  top: -0.66%;
  width: 112.02%;
}
.book-series-tag-grammar {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.75);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  left: 101px;
  overflow: clip;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 999px;
  box-shadow: 0px 8px 24px 0px rgba(4, 12, 31, 0.08);
  top: 328px;
}
.book-series-tag-vocabulary {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.75);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  left: 73px;
  overflow: clip;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 999px;
  box-shadow: 0px 8px 24px 0px rgba(4, 12, 31, 0.08);
  top: 328px;
}
/* Books / mobile */
.books-mobile {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 48px;
  padding-bottom: 24px;
  width: 100%;
}
.books-heading-inset-mobile {
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
}
.section-heading-mobile {
  word-break: break-word;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}
.section-title-mobile {
  font-family: Vazirmatn, sans-serif;
  font-weight: 700;
  line-height: 0;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 22px;
  width: 100%;
}
.section-title-text-mobile {
  line-height: 30px;
}
.section-title-accent-mobile {
  line-height: 30px;
  color: #1c3c8c;
}
.body-text-mobile {
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 24px;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 16px;
  width: 100%;
}
.books-shelves-mobile {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.books-shelf-mobile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.books-publisher-row-mobile {
  display: flex;
  justify-content: flex-end;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
}
.books-publisher-badge-mobile {
  background-color: rgba(255, 255, 255, 0.6);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  border-radius: 999px;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 20px;
  font-size: 14px;
  color: #1c3c8c;
  font-weight: 600;
}
.books-shelf-stage-mobile {
  position: relative;
  height: 262px;
  width: 100%;
}
.books-shelf-top-mobile {
  position: absolute;
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #e8e0d1;
  height: 25px;
  left: 0;
  --gradient-to: white;
  top: 180px;
  width: 360px;
}
.books-shelf-edge-mobile {
  position: absolute;
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #e3d9c7;
  height: 10px;
  left: 0;
  box-shadow: 0px 6px 16px 0px rgba(10, 18, 41, 0.1);
  --gradient-to: #cfc2ab;
  top: 205px;
  width: 360px;
}
.books-strip-mobile {
  position: absolute;
  align-content: stretch;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  left: 0;
  overflow: clip;
  top: 0;
}
.books-series-headway-mobile {
  height: 262px;
  position: relative;
  flex-shrink: 0;
  width: 229px;
}
.books-book-headway-beginner-mobile {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 176px;
  left: 100px;
  top: 21px;
  width: 129px;
}
.book-spine-mobile {
  position: absolute;
  height: 176px;
  left: 0;
  top: 0;
  width: 5px;
}
.book-pages-mobile {
  position: absolute;
  height: 4px;
  left: 0;
  top: 0;
  width: 129px;
}
.book-cover-mobile {
  position: absolute;
  height: 172px;
  left: 5px;
  overflow: clip;
  border-radius: 1px;
  top: 4px;
  width: 124px;
}
.book-cover-artwork-mobile {
  position: absolute;
  height: 172px;
  left: 0;
  top: 0;
  width: 124px;
}
.book-cover-shading-mobile {
  position: absolute;
  height: 172px;
  left: 0;
  top: 0;
  width: 10px;
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(255, 255, 255, 0.24) 35%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0) 100%
  );
}
.books-spine-headway-elementary-mobile {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 176px;
  left: 80px;
  top: 21px;
  width: 25px;
}
.book-spine-top-mobile {
  position: absolute;
  height: 4px;
  left: 0;
  top: 0;
  width: 25px;
}
.book-spine-face-headway-elementary {
  position: absolute;
  background-color: #c0302e;
  height: 172px;
  left: 5px;
  overflow: clip;
  top: 4px;
  width: 20px;
}
.book-spine-shading-mobile {
  position: absolute;
  height: 172px;
  left: 0;
  top: 0;
  width: 20px;
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(255, 255, 255, 0.2) 30%,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.18) 100%
  );
}
.book-spine-title-position-mobile {
  position: absolute;
  display: flex;
  height: 160px;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 6px;
  width: 20px;
}
.book-spine-title-rotation-mobile {
  flex: none;
  rotate: 90deg;
}
.book-spine-title-frame-mobile {
  align-content: stretch;
  display: flex;
  height: 20px;
  align-items: center;
  justify-content: center;
  overflow: clip;
  position: relative;
  width: 160px;
}
.book-spine-title-mobile {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 500;
  line-height: 16px;
  position: relative;
  flex-shrink: 0;
  font-size: 11px;
  color: white;
  white-space: nowrap;
}
.book-spine-cover-mobile {
  position: absolute;
  height: 172px;
  left: 5px;
  overflow: clip;
  top: 4px;
  width: 0.01px;
}
.book-spine-cover-shading-mobile {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  width: 10px;
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(255, 255, 255, 0.24) 35%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0) 100%
  );
}
.books-spine-headway-pre-intermediate-mobile {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 176px;
  left: 60px;
  top: 21px;
  width: 25px;
}
.book-spine-face-headway-pre-intermediate {
  position: absolute;
  background-color: #e8740c;
  height: 172px;
  left: 5px;
  overflow: clip;
  top: 4px;
  width: 20px;
}
.books-spine-headway-intermediate-mobile {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 176px;
  left: 40px;
  top: 21px;
  width: 25px;
}
.book-spine-face-headway-intermediate {
  position: absolute;
  background-color: #1068b0;
  height: 172px;
  left: 5px;
  overflow: clip;
  top: 4px;
  width: 20px;
}
.books-spine-headway-upper-intermediate-mobile {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 176px;
  left: 20px;
  top: 21px;
  width: 25px;
}
.book-spine-face-headway-upper-intermediate {
  position: absolute;
  background-color: #7a1f78;
  height: 172px;
  left: 5px;
  overflow: clip;
  top: 4px;
  width: 20px;
}
.books-spine-headway-advanced-mobile {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 176px;
  left: 0;
  top: 21px;
  width: 25px;
}
.book-spine-face-headway-advanced {
  position: absolute;
  background-color: #0b6e70;
  height: 172px;
  left: 5px;
  overflow: clip;
  top: 4px;
  width: 20px;
}
.book-series-tag-headway-mobile {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.75);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  left: 76px;
  overflow: clip;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 999px;
  box-shadow: 0px 8px 24px 0px rgba(4, 12, 31, 0.08);
  top: 226px;
}
.book-spine-face-american-english-file-elementary {
  position: absolute;
  background-color: #be0c25;
  height: 172px;
  left: 5px;
  overflow: clip;
  top: 4px;
  width: 20px;
}
.book-spine-face-american-english-file-pre-intermediate {
  position: absolute;
  background-color: #137cbd;
  height: 172px;
  left: 5px;
  overflow: clip;
  top: 4px;
  width: 20px;
}
.book-spine-face-american-english-file-intermediate {
  position: absolute;
  background-color: #339930;
  height: 172px;
  left: 5px;
  overflow: clip;
  top: 4px;
  width: 20px;
}
.book-spine-face-american-english-file-upper-intermediate {
  position: absolute;
  background-color: #de6817;
  height: 172px;
  left: 5px;
  overflow: clip;
  top: 4px;
  width: 20px;
}
.book-spine-face-american-english-file-advanced {
  position: absolute;
  background-color: #128795;
  height: 172px;
  left: 5px;
  overflow: clip;
  top: 4px;
  width: 20px;
}
.book-series-tag-american-english-file-mobile {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.75);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  left: 39px;
  overflow: clip;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 999px;
  box-shadow: 0px 8px 24px 0px rgba(4, 12, 31, 0.08);
  top: 226px;
}
.books-series-oxford-word-skills-mobile {
  height: 262px;
  position: relative;
  flex-shrink: 0;
  width: 169px;
}
.books-book-oxford-word-skills-basic-mobile {
  position: absolute;
  filter: drop-shadow(-2px 4px calc(20px / 2) rgba(0, 0, 0, 0.07));
  height: 176px;
  left: 40px;
  top: 21px;
  width: 129px;
}
.book-spine-face-word-skills-intermediate {
  position: absolute;
  background-color: #dd6e19;
  height: 172px;
  left: 5px;
  overflow: clip;
  top: 4px;
  width: 20px;
}
.book-spine-face-word-skills-advanced {
  position: absolute;
  background-color: #e13a27;
  height: 172px;
  left: 5px;
  overflow: clip;
  top: 4px;
  width: 20px;
}
.book-series-tag-word-skills-mobile {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.75);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  left: 18px;
  overflow: clip;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 999px;
  box-shadow: 0px 8px 24px 0px rgba(4, 12, 31, 0.08);
  top: 226px;
}
/* Continuous shelves: clipping prevents horizontal dragging while allowing page swipes. */
.books-shelf-stage-desktop,
.books-shelf-stage-mobile {
  --shelf-scale: 1;
  width: 100%;
  overflow: clip;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.books-shelf-stage-mobile {
  height: calc(262px * var(--shelf-scale));
}
.books-shelf-content {
  --shelf-unit: 1;
  position: relative;
  width: 100%;
  height: 100%;
  zoom: calc(var(--shelf-scale) * var(--shelf-unit));
}
.books-shelf-stage-mobile .books-shelf-content-cambridge {
  --shelf-unit: 0.671875;
}
.books-shelf-content-cambridge [data-name="Shelf / Top"] {
  top: calc(180px / var(--shelf-unit));
  height: calc(25px / var(--shelf-unit));
}
.books-shelf-content-cambridge [data-name="Shelf / Edge"] {
  top: calc(205px / var(--shelf-unit));
  height: calc(10px / var(--shelf-unit));
}
.books-shelf-content-cambridge [data-name="Series tag"] {
  top: calc(226px / var(--shelf-unit));
  left: 50%;
  translate: -50% 0;
  padding: calc(4px / var(--shelf-unit)) calc(12px / var(--shelf-unit));
}
.books-shelf-content-cambridge .book-series-label {
  font-size: calc(12px / var(--shelf-unit));
  line-height: calc(16px / var(--shelf-unit));
}
.books-shelf-content [data-name="Shelf / Top"],
.books-shelf-content [data-name="Shelf / Edge"] {
  width: 100%;
}
#books [data-name="Strip"] {
  --shelf-gap: 96px;
  left: 0;
  width: max-content;
  gap: var(--shelf-gap);
  overflow: visible;
  direction: ltr;
  pointer-events: none;
}
#books .books-strip-mobile {
  --shelf-gap: 40px;
}
#books [data-name="Strip"][data-loop-ready] {
  gap: 0;
}
.books-loop-cycle {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: var(--shelf-gap);
  padding-right: var(--shelf-gap);
}
.books-shelf-content img {
  -webkit-user-drag: none;
}
/* Features / desktop */
.features-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  padding-bottom: 96px;
  padding-top: 64px;
  padding-left: 120px;
  padding-right: 120px;
  position: relative;
  width: 100%;
  height: 100%;
}
.features-grid-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.features-row-desktop {
  align-content: stretch;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.feature-word-meaning-desktop {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #fbf5e6;
  height: 560px;
  overflow: clip;
  position: relative;
  border-radius: 32px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #f1dda8;
  width: 488px;
}
.feature-word-orb-top-desktop {
  position: absolute;
  left: 172px;
  width: 180px;
  height: 180px;
  top: 396px;
}
.feature-orb-inset {
  position: absolute;
  inset: -30.83%;
}
.feature-word-copy-desktop {
  word-break: break-word;
  position: absolute;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  left: 36px;
  overflow: clip;
  text-align: right;
  top: 40px;
  width: 416px;
}
.feature-word-title-desktop {
  font-family: Vazirmatn, sans-serif;
  font-weight: 700;
  line-height: 52px;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 36px;
  width: 100%;
}
.feature-word-orb-bottom-desktop {
  position: absolute;
  left: 102px;
  width: 311.4px;
  height: 311.4px;
  top: 240px;
}
.feature-word-tooltip-position-desktop {
  position: absolute;
  inset: -11.18% -38.95%;
}
.features-word-tooltip-desktop {
  position: absolute;
  backdrop-filter: blur(14px);
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.18);
  border-style: solid;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  --gradient-from: rgba(41, 57, 95, 0.74);
  gap: 16px;
  align-items: flex-end;
  left: 56px;
  overflow: clip;
  padding: 16px;
  border-radius: 20px;
  box-shadow: 0px 12px 32px 0px rgba(4, 12, 31, 0.18);
  --gradient-to: rgba(23, 35, 68, 0.74);
  top: 326px;
  --gradient-position: 55%;
  --gradient-via: rgba(31, 45, 82, 0.72);
  width: 376px;
}
.features-meaning-desktop {
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.feature-info-icon {
  word-break: break-word;
  font-family: Material Icons Round;
  line-height: 24px;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 24px;
  color: #b1c6f3;
  white-space: nowrap;
}
.feature-word-meaning-label {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 24px;
  position: relative;
  flex-shrink: 0;
  color: #f8faff;
  font-size: 16px;
  text-align: right;
  white-space: nowrap;
}
.features-actions-desktop {
  align-content: stretch;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.feature-action-primary {
  background-color: #286441;
  align-content: stretch;
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 1px;
  overflow: clip;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  border-radius: 999px;
}
.material-icon {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
.feature-action-secondary {
  background-color: #d9a23a;
  align-content: stretch;
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 1px;
  overflow: clip;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  border-radius: 999px;
}
.feature-word-pointer-position {
  position: absolute;
  display: flex;
  height: 12px;
  align-items: center;
  justify-content: center;
  left: 232px;
  top: 435px;
  width: 24px;
}
.feature-word-pointer-rotation {
  flex: none;
  rotate: 180deg;
}
.features-pointer-desktop {
  height: 12px;
  position: relative;
  width: 24px;
}
.feature-pointer-shape {
  position: absolute;
  bottom: 25%;
  left: 6.7%;
  right: 6.7%;
  top: 0;
}
.features-sentence-desktop {
  position: absolute;
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.55);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  gap: 6px;
  align-items: center;
  left: 143px;
  overflow: clip;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-radius: 16px;
  box-shadow: 0px 8px 24px 0px rgba(31, 36, 48, 0.08);
  top: 468px;
}
.feature-description-desktop {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 600;
  line-height: 24px;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 16px;
  white-space: nowrap;
}
.feature-highlighted-word {
  background-color: #e6b6c5;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  padding-left: 4px;
  padding-right: 4px;
  position: relative;
  border-radius: 4px;
  flex-shrink: 0;
}
.feature-reader-desktop {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #eef2fc;
  height: 560px;
  overflow: clip;
  position: relative;
  border-radius: 32px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #d2ddf6;
  width: 692px;
}
.feature-reader-orb-top-desktop {
  position: absolute;
  left: 10px;
  width: 360px;
  height: 360px;
  top: 150px;
}
.rotation-frame {
  position: absolute;
  inset: -11.11% -38.89%;
}
.feature-reader-orb-bottom-desktop {
  position: absolute;
  left: 418px;
  width: 324px;
  height: 324px;
  top: 294px;
}
.feature-reader-copy-desktop {
  position: absolute;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  left: 336px;
  top: 40px;
  width: 320px;
}
.feature-reader-title-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 700;
  line-height: 52px;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 36px;
  text-align: right;
  width: 100%;
}
.feature-reader-description-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 32px;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 18px;
  text-align: right;
  width: 100%;
}
.features-tags-desktop {
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.features-tags-frame-desktop {
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
  position: relative;
  border-radius: 999px;
  box-shadow: 0px 8px 24px 0px rgba(31, 36, 48, 0.08);
  flex-shrink: 0;
}
.features-tags-label-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 500;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: #1c3c8c;
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}
.feature-book-sticker-position {
  position: absolute;
  display: flex;
  inset: 68.45% 5.41% 8.58% 75.14%;
  align-items: center;
  justify-content: center;
  container-type: size;
}
.feature-book-sticker-rotation {
  rotate: -8deg;
  flex: none;
  height: hypot(11.6945cqw, 87.0212cqh);
  width: hypot(88.3055cqw, -12.9788cqh);
}
.features-sticker-book-artwork-desktop {
  position: absolute;
  height: 97.96%;
  left: 0;
  max-width: none;
  top: 1.02%;
  width: 100%;
}
.feature-reader-phone-position-desktop {
  position: absolute;
  display: flex;
  height: 739.38px;
  align-items: center;
  justify-content: center;
  left: -84.67px;
  top: 129.33px;
  width: 457.653px;
}
.feature-reader-phone-rotation-desktop {
  flex: none;
  rotate: 7.55deg;
}
.features-follow-transcript-portrait-2-desktop {
  height: 696.899px;
  position: relative;
  width: 369.282px;
}
.feature-bilingual-desktop {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #e4f4e9;
  height: 460px;
  overflow: clip;
  position: relative;
  border-radius: 32px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #bfe3cb;
  width: 387px;
}
.feature-bilingual-copy-desktop {
  word-break: break-word;
  position: absolute;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  left: 36px;
  overflow: clip;
  text-align: right;
  top: 36px;
  width: 315px;
}
.feature-bilingual-title-desktop {
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 36px;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 24px;
  width: 100%;
}
.features-tile-bilingual-interface-orb-desktop {
  position: absolute;
  left: 76px;
  width: 234px;
  height: 234px;
  top: 243px;
}
.feature-language-switch-position-desktop {
  position: absolute;
  inset: -38.89% -11.11%;
}
.features-language-switch-desktop {
  position: absolute;
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  left: 107px;
  overflow: clip;
  padding: 4px;
  border-radius: 999px;
  box-shadow: 0px 8px 24px 0px rgba(31, 36, 48, 0.08);
  top: 236px;
}
.feature-language-option-active {
  background-color: #1c3c8c;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
}
.feature-language-option-active-label {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 600;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
.feature-language-option {
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
}
.feature-language-option-label {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
.feature-persian-meaning-position-desktop {
  position: absolute;
  display: flex;
  height: 85.605px;
  align-items: center;
  justify-content: center;
  left: 38px;
  top: 284.3px;
  width: 303.252px;
}
.feature-persian-meaning-rotation {
  rotate: -3deg;
  flex: none;
}
.features-meaning-persian-desktop {
  word-break: break-word;
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.6);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  overflow: clip;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
  position: relative;
  border-radius: 18px;
  box-shadow: 0px 8px 24px 0px rgba(31, 36, 48, 0.08);
  text-align: right;
  width: 300px;
}
.feature-meaning-language-label {
  font-family: Vazirmatn, sans-serif;
  font-weight: 500;
  line-height: 16px;
  position: relative;
  flex-shrink: 0;
  color: #1c3c8c;
  font-size: 12px;
  width: 100%;
}
.feature-persian-meaning-text {
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 14px;
  width: 100%;
}
.feature-english-meaning-position-desktop {
  position: absolute;
  display: flex;
  height: 108.41px;
  align-items: center;
  justify-content: center;
  left: 46.58px;
  top: 352px;
  width: 303.237px;
}
.feature-english-meaning-rotation {
  flex: none;
  rotate: 2deg;
}
.features-meaning-english-desktop {
  word-break: break-word;
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.6);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  overflow: clip;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
  position: relative;
  border-radius: 18px;
  box-shadow: 0px 8px 24px 0px rgba(31, 36, 48, 0.08);
  width: 300px;
}
.feature-english-meaning-language-label {
  font-family: Comme, sans-serif;
  font-weight: 500;
  line-height: 16px;
  position: relative;
  flex-shrink: 0;
  color: #1c3c8c;
  font-size: 12px;
  width: 100%;
}
.feature-english-meaning-text {
  font-family: Comme, sans-serif;
  font-weight: 600;
  line-height: 24px;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 16px;
  width: 100%;
}
.feature-leitner-desktop {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #fbeff2;
  height: 460px;
  overflow: clip;
  position: relative;
  border-radius: 32px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #f1d3dc;
  width: 386px;
}
.feature-leitner-copy-desktop {
  word-break: break-word;
  position: absolute;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  left: 36px;
  overflow: clip;
  text-align: right;
  top: 36px;
  width: 314px;
}
.features-tile-leitner-orb-desktop {
  position: absolute;
  left: 90px;
  width: 243px;
  height: 243px;
  top: 116px;
}
.feature-leitner-rear-card-position-desktop {
  position: absolute;
  display: flex;
  height: 203.474px;
  align-items: center;
  justify-content: center;
  left: 67.23px;
  top: 210.26px;
  width: 251.533px;
}
.features-tile-leitner-rotation-desktop {
  flex: none;
  rotate: 6deg;
}
.features-card-behind-desktop {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.4);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  height: 180px;
  position: relative;
  border-radius: 24px;
  box-shadow: 0px 8px 24px 0px rgba(31, 36, 48, 0.08);
  width: 234px;
}
.feature-leitner-middle-card-position-desktop {
  position: absolute;
  display: flex;
  height: 197.838px;
  align-items: center;
  justify-content: center;
  left: 56.04px;
  top: 227.08px;
  width: 273.918px;
}
.feature-leitner-middle-card-rotation {
  rotate: -4deg;
  flex: none;
}
.feature-leitner-middle-card-desktop {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.6);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  height: 180px;
  position: relative;
  border-radius: 24px;
  box-shadow: 0px 8px 24px 0px rgba(31, 36, 48, 0.08);
  width: 262px;
}
.features-flashcard-desktop {
  position: absolute;
  background-color: white;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  left: 48px;
  overflow: clip;
  padding-bottom: 18px;
  padding-top: 22px;
  padding-left: 18px;
  padding-right: 18px;
  border-radius: 24px;
  box-shadow: -2px 4px 20px 0px rgba(0, 0, 0, 0.07);
  top: 264px;
  width: 290px;
}
.features-flashcard-title-desktop {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 700;
  line-height: 32px;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 24px;
  text-align: center;
  white-space: nowrap;
}
.feature-flashcard-transcription {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 500;
  line-height: 16px;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}
.feature-flashcard-prompt {
  height: 8px;
  position: relative;
  flex-shrink: 0;
  width: 10px;
}
.feature-flashcard-answer-correct {
  background-color: #286441;
  align-content: stretch;
  display: flex;
  flex: 1 0 0;
  align-items: flex-start;
  justify-content: center;
  min-width: 1px;
  overflow: clip;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  border-radius: 999px;
}
.feature-flashcard-answer-incorrect {
  background-color: #ba1a1a;
  align-content: stretch;
  display: flex;
  flex: 1 0 0;
  align-items: flex-start;
  justify-content: center;
  min-width: 1px;
  overflow: clip;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  border-radius: 999px;
}
.feature-audio-desktop {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #e6f2f8;
  height: 460px;
  overflow: clip;
  position: relative;
  border-radius: 32px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #bfddeb;
  width: 387px;
}
.features-tile-audio-orb-desktop {
  position: absolute;
  left: 60px;
  width: 279px;
  height: 279px;
  top: 164px;
}
.features-reader-audio-player-desktop {
  --offset-x: -50%;
  position: absolute;
  backdrop-filter: blur(14px);
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.18);
  border-style: solid;
  bottom: 31.73px;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  --gradient-from: rgba(41, 57, 95, 0.74);
  gap: 4px;
  align-items: flex-start;
  left: calc(50% + 0.5px);
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 28px;
  box-shadow: 0px 12px 32px 0px rgba(4, 12, 31, 0.18);
  --gradient-to: rgba(23, 35, 68, 0.74);
  --gradient-position: 55%;
  --gradient-via: rgba(31, 45, 82, 0.72);
  width: 328px;
  translate: -50% 0;
}
.features-player-header-desktop {
  align-content: stretch;
  display: flex;
  gap: 12px;
  height: 32px;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.features-transcript-32-px-layout-desktop {
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.feature-audio-control-position {
  --offset-x: -50%;
  --offset-y: -50%;
  position: absolute;
  align-content: stretch;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  width: 48px;
  height: 48px;
  top: 50%;
  translate: -50% -50%;
}
.feature-audio-control-frame {
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.features-audio-control-glyph-desktop {
  font-family: Material Icons Round;
  font-size: 24px;
  line-height: 24px;
  color: #f8faff;
}
.feature-audio-header-title-frame {
  word-break: break-word;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  font-family: Vazirmatn, sans-serif;
  font-weight: 500;
  height: 24px;
  justify-content: center;
  line-height: 0;
  min-width: 1px;
  position: relative;
  color: #f8faff;
  font-size: 12px;
  text-align: right;
}
.feature-audio-header-title {
  line-height: 16px;
}
.features-transcript-manual-scroll-container-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  height: 140px;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.features-transcript-synced-lines-desktop {
  background-color: rgba(255, 255, 255, 0.05);
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 140px;
  align-items: flex-start;
  overflow-x: clip;
  overflow-y: auto;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  position: relative;
  border-radius: 16px;
  flex-shrink: 0;
  width: 100%;
}
.feature-transcript-previous-line {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 500;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: #d1d7e5;
  font-size: 14px;
  width: 280px;
}
.features-line-2-0-42-current-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding-top: 4px;
  padding-bottom: 4px;
  position: relative;
  border-radius: 12px;
  flex-shrink: 0;
  width: 280px;
}
.feature-transcript-current-line-text {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 500;
  line-height: 20px;
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  color: #f8faff;
  font-size: 14px;
  width: min-content;
}
.features-current-line-playback-underline-desktop {
  position: absolute;
  height: 2px;
  left: 80px;
  overflow: clip;
  top: 25px;
  width: 121px;
}
.features-reading-head-desktop {
  position: absolute;
  background-color: #f8faff;
  height: 2px;
  left: 0;
  mask-mode: alpha;
  mask-composite: intersect;
  mask-clip: no-clip;
  mask-repeat: no-repeat;
  mask-size: 121px 2px;
  border-radius: 1px;
  top: 0;
  width: 121px;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEyMSIgaGVpZ2h0PSIyIiB2aWV3Qm94PSIwIDAgMTIxIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IGlkPSJSZWFkaW5nIGhlYWQgLyBGYWRlIG1hc2siIHdpZHRoPSIxMjEiIGhlaWdodD0iMiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzBfMzc5KSIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzBfMzc5IiB4MT0iMCIgeTE9IjEiIHgyPSIxMjEiIHkyPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAiLz4KPHN0b3Agb2Zmc2V0PSIwLjUiIHN0b3AtY29sb3I9IndoaXRlIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=");
}
.feature-transcript-next-line {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 500;
  line-height: 20px;
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  color: #d1d7e5;
  font-size: 14px;
  width: min-content;
}
.features-scrollbar-track-desktop {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.12);
  height: 120px;
  left: 297px;
  opacity: 0.14;
  border-radius: 1.5px;
  top: 10px;
  width: 3px;
}
.features-scrollbar-thumb-desktop {
  position: absolute;
  background-color: rgba(199, 204, 214, 0.65);
  height: 79px;
  left: 297px;
  opacity: 0.55;
  border-radius: 1.5px;
  top: 10px;
  width: 3px;
}
.features-playback-controls-desktop {
  align-content: stretch;
  display: flex;
  gap: 16px;
  height: 32px;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.feature-audio-speed-control {
  --offset-x: -50%;
  --offset-y: -50%;
  position: absolute;
  align-content: stretch;
  cursor: pointer;
  display: flex;
  gap: 0px;
  align-items: center;
  justify-content: center;
  left: 50%;
  padding: 0px;
  width: 48px;
  height: 48px;
  top: 50%;
  translate: -50% -50%;
}
.features-surface-32-px-desktop {
  background-color: rgba(168, 186, 226, 0.22);
  align-content: stretch;
  display: flex;
  gap: 12px;
  height: 32px;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  overflow: clip;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 0px;
  padding-bottom: 0px;
  position: relative;
  border-radius: 12px;
  flex-shrink: 0;
}
.feature-audio-speed-label-frame {
  word-break: break-word;
  display: flex;
  flex-direction: column;
  font-family: Comme, sans-serif;
  font-weight: 500;
  justify-content: center;
  line-height: 0;
  position: relative;
  flex-shrink: 0;
  color: #f8faff;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}
.features-transport-controls-desktop {
  align-content: stretch;
  display: flex;
  flex: 1 0 0;
  gap: 16px;
  height: 32px;
  align-items: center;
  justify-content: center;
  min-width: 1px;
  position: relative;
}
.feature-audio-sync-control-position {
  --offset-x: -50%;
  --offset-y: -50%;
  position: absolute;
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  width: 48px;
  height: 48px;
  top: 50%;
  translate: -50% -50%;
}
.feature-audio-sync-control-frame {
  background-color: rgba(168, 186, 226, 0.22);
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.features-sync-transcript-32-px-layout-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.features-sync-to-playing-line-desktop {
  position: absolute;
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -8px;
  width: 48px;
  height: 48px;
  top: -8px;
}
.features-audio-recenter-glyph-desktop {
  font-family: Material Symbols Rounded;
  font-size: 24px;
  line-height: 24px;
  color: #f8faff;
}
.features-timeline-desktop {
  align-content: stretch;
  display: flex;
  gap: 4px;
  height: 16px;
  align-items: center;
  padding-left: 4px;
  padding-right: 4px;
  position: relative;
  flex-shrink: 0;
  width: 304px;
}
.feature-audio-time-label {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 500;
  line-height: 16px;
  position: relative;
  flex-shrink: 0;
  color: #d1d7e5;
  font-size: 11px;
  white-space: nowrap;
}
.features-audio-timeline-desktop {
  flex: 1 0 0;
  height: 4px;
  min-width: 1px;
  overflow: clip;
  position: relative;
  border-radius: 999px;
}
.feature-audio-track {
  position: absolute;
  background-color: white;
  inset: 0;
  pointer-events: none;
  border-radius: 999px;
}
.features-progress-rtl-desktop {
  --offset-y: -50%;
  position: absolute;
  background-color: #e3b456;
  height: 4px;
  left: 0;
  border-radius: 999px;
  top: 50%;
  width: 92.52px;
  translate: 0 -50%;
}
.feature-audio-track-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0px 1px 2px 0px rgba(31, 36, 48, 0.07);
}
.feature-headphones-position-desktop {
  position: absolute;
  display: flex;
  inset: 80.87% 4.35% -1.1% 70.27%;
  align-items: center;
  justify-content: center;
  container-type: size;
}
.feature-headphones-rotation {
  flex: none;
  height: hypot(-16.3566cqw, 81.2321cqh);
  rotate: 12deg;
  width: hypot(83.6434cqw, 18.7679cqh);
}
.features-tile-achievements-desktop {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #fbf5e6;
  height: 400px;
  overflow: clip;
  position: relative;
  border-radius: 32px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #f1dda8;
  width: 285px;
}
.features-tile-achievements-orb-desktop {
  position: absolute;
  left: 17px;
  width: 252px;
  height: 252px;
  top: 17px;
}
.feature-trophy-position-desktop {
  --offset-x: -50%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: calc(50% + 0.5px);
  width: 226.404px;
  height: 226.404px;
  top: 29.8px;
  translate: -50% 0;
}
.feature-trophy-rotation {
  rotate: -6deg;
  flex: none;
}
.features-sticker-trophy-desktop {
  position: relative;
  width: 206px;
  height: 206px;
}
.features-sticker-trophy-artwork-desktop {
  position: absolute;
  inset: 0;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.feature-achievements-copy-desktop {
  word-break: break-word;
  position: absolute;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  left: 32px;
  overflow: clip;
  text-align: right;
  top: 276px;
  width: 221px;
}
.feature-placement-desktop {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #e6f2f8;
  height: 400px;
  overflow: clip;
  position: relative;
  border-radius: 32px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #bfddeb;
  width: 285px;
}
.features-tile-placement-orb-desktop {
  position: absolute;
  left: 17px;
  width: 252px;
  height: 252px;
  top: -6px;
}
.feature-levels-position-desktop {
  --offset-x: -50%;
  position: absolute;
  display: flex;
  height: 142.477px;
  align-items: center;
  justify-content: center;
  left: calc(50% + 0.5px);
  top: 48.76px;
  width: 220.412px;
  translate: -50% 0;
}
.feature-level-rotation {
  flex: none;
  rotate: 4deg;
}
.features-levels-desktop {
  height: 128px;
  overflow: clip;
  position: relative;
  width: 212px;
}
.features-level-icon-b2-desktop {
  position: absolute;
  left: 0;
  overflow: clip;
  width: 80px;
  height: 80px;
  top: 20px;
}
.features-level-icon-b2-artwork-desktop {
  position: absolute;
  height: 203.37%;
  left: -303.37%;
  max-width: none;
  top: -51.69%;
  width: 610.11%;
}
.features-level-icon-a2-desktop {
  position: absolute;
  left: 132px;
  overflow: clip;
  width: 80px;
  height: 80px;
  top: 20px;
}
.features-level-icon-a2-artwork-desktop {
  position: absolute;
  height: 203.37%;
  left: -109.83%;
  max-width: none;
  top: -51.69%;
  width: 610.11%;
}
.features-level-icon-b1-desktop {
  --offset-x: -50%;
  position: absolute;
  left: 50%;
  overflow: clip;
  width: 128px;
  height: 128px;
  top: 0;
  translate: -50% 0;
}
.features-level-icon-b1-artwork-desktop {
  position: absolute;
  height: 203.37%;
  left: -207.3%;
  max-width: none;
  top: -51.69%;
  width: 610.11%;
}
.feature-placement-copy-desktop {
  word-break: break-word;
  position: absolute;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  left: 32px;
  overflow: clip;
  text-align: right;
  top: 252px;
  width: 221px;
}
.feature-practices-desktop {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #eef2fc;
  height: 400px;
  overflow: clip;
  position: relative;
  border-radius: 32px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #d2ddf6;
  width: 590px;
}
.feature-practices-copy-desktop {
  position: absolute;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  left: 284px;
  overflow: clip;
  top: 36px;
  width: 270px;
}
.features-coming-soon-desktop {
  background-color: #e6be6a;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
}
.features-coming-soon-label-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 500;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: #3a2a06;
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}
.feature-practices-title-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 700;
  line-height: 52px;
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 36px;
  text-align: right;
  width: min-content;
}
.feature-practices-description-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 24px;
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 16px;
  text-align: right;
  width: min-content;
}
.features-tile-coming-soon-practices-orb-desktop {
  position: absolute;
  left: 32px;
  width: 270px;
  height: 270px;
  top: 70px;
}
.feature-practices-preview-position-desktop {
  position: absolute;
  display: flex;
  height: 257.594px;
  align-items: center;
  justify-content: center;
  left: 36px;
  top: 62.82px;
  width: 248.316px;
}
.features-practice-preview-desktop {
  backdrop-filter: blur(14px);
  background-color: rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  overflow: clip;
  padding: 20px;
  position: relative;
  border-radius: 24px;
  box-shadow: 0px 8px 24px 0px rgba(31, 36, 48, 0.08);
  width: 232px;
}
.features-practice-preview-label-desktop {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 500;
  line-height: 16px;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 12px;
  width: 100%;
}
.feature-practice-preview-prompt {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 600;
  line-height: 24px;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 16px;
  width: 100%;
}
.features-practice-preview-frame-desktop {
  background-color: #286441;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  border-radius: 14px;
  flex-shrink: 0;
  width: 100%;
}
.feature-practice-choice {
  background-color: rgba(255, 255, 255, 0.7);
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  border-radius: 14px;
  flex-shrink: 0;
  width: 100%;
}
.feature-practice-choice-label {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 600;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 14px;
  white-space: nowrap;
}
/* Features / mobile */
.features-mobile {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 48px;
  padding-bottom: 48px;
  position: relative;
  width: 100%;
  height: 100%;
}
.features-heading-mobile {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: clip;
  padding-bottom: 16px;
  position: relative;
  flex-shrink: 0;
  width: 328px;
}
.features-title-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 700;
  line-height: 0;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 22px;
  text-align: center;
  width: 100%;
}
.feature-reader-mobile {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #eef2fc;
  height: 440px;
  overflow: clip;
  position: relative;
  border-radius: 28px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #d2ddf6;
  width: 328px;
}
.features-tile-reader-orb-mobile {
  position: absolute;
  left: 86px;
  width: 288px;
  height: 288px;
  top: 156px;
}
.feature-copy-mobile {
  word-break: break-word;
  position: absolute;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  left: 24px;
  overflow: clip;
  text-align: right;
  top: 28px;
  width: 280px;
}
.feature-title-mobile {
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 28px;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 20px;
  width: 100%;
}
.feature-reader-description-mobile {
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 0;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 16px;
  width: 100%;
}
.feature-reader-description-line {
  line-height: 24px;
}
.feature-reader-description-bold {
  font-family: "Vazirmatn:Regular";
  line-height: 24px;
  font-style: normal;
}
.features-tile-reader-position-mobile {
  position: absolute;
  display: flex;
  height: 555.179px;
  align-items: center;
  justify-content: center;
  left: -20.8px;
  top: 133.29px;
  width: 330.51px;
}
.features-tile-reader-rotation-mobile {
  flex: none;
  rotate: 5.46deg;
}
.features-follow-transcript-portrait-2-mobile {
  height: 530.824px;
  position: relative;
  width: 281.28px;
}
.feature-word-meaning-mobile {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #fbf5e6;
  height: 400px;
  overflow: clip;
  position: relative;
  border-radius: 28px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #f1dda8;
  width: 328px;
}
.features-tile-word-meaning-orb-mobile {
  position: absolute;
  left: 81px;
  width: 180px;
  height: 180px;
  top: 248px;
}
.feature-word-orb-bottom-mobile {
  position: absolute;
  left: 43px;
  width: 252px;
  height: 252px;
  top: 125px;
}
.feature-word-tooltip-position-mobile {
  position: absolute;
  display: flex;
  height: 9.6px;
  align-items: center;
  justify-content: center;
  left: 134.8px;
  top: 299px;
  width: 19.2px;
}
.features-pointer-mobile {
  height: 9.6px;
  position: relative;
  width: 19.2px;
}
.features-word-tooltip-mobile {
  position: absolute;
  backdrop-filter: blur(14px);
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.18);
  border-style: solid;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  --gradient-from: rgba(41, 57, 95, 0.74);
  gap: 16px;
  align-items: flex-end;
  left: 16px;
  overflow: clip;
  padding: 16px;
  border-radius: 20px;
  box-shadow: 0px 12px 32px 0px rgba(4, 12, 31, 0.18);
  --gradient-to: rgba(23, 35, 68, 0.74);
  top: 190px;
  --gradient-position: 55%;
  --gradient-via: rgba(31, 45, 82, 0.72);
  width: 296px;
}
.features-sentence-mobile {
  position: absolute;
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.55);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  gap: 6px;
  align-items: center;
  left: 51px;
  overflow: clip;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-radius: 16px;
  box-shadow: 0px 8px 24px 0px rgba(31, 36, 48, 0.08);
  top: 319.6px;
}
.feature-audio-mobile {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #e6f2f8;
  height: 400px;
  overflow: clip;
  position: relative;
  border-radius: 28px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #bfddeb;
  width: 328px;
}
.features-tile-audio-orb-mobile {
  position: absolute;
  left: 30px;
  width: 279px;
  height: 279px;
  top: 105px;
}
.features-reader-audio-player-mobile {
  --offset-x: -50%;
  position: absolute;
  backdrop-filter: blur(14px);
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.18);
  border-style: solid;
  bottom: 31.65px;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  --gradient-from: rgba(41, 57, 95, 0.74);
  gap: 4px;
  align-items: flex-start;
  left: 50%;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 28px;
  box-shadow: 0px 12px 32px 0px rgba(4, 12, 31, 0.18);
  --gradient-to: rgba(23, 35, 68, 0.74);
  --gradient-position: 55%;
  --gradient-via: rgba(31, 45, 82, 0.72);
  width: 296px;
  translate: -50% 0;
}
.features-timeline-mobile {
  align-content: stretch;
  display: flex;
  gap: 4px;
  height: 16px;
  align-items: center;
  padding-left: 4px;
  padding-right: 4px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.features-tile-audio-position-mobile {
  position: absolute;
  display: flex;
  inset: 79.5% -0.05% -2.76% 70.1%;
  align-items: center;
  justify-content: center;
  container-type: size;
}
.feature-leitner-mobile {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #fbeff2;
  height: 400px;
  overflow: clip;
  position: relative;
  border-radius: 28px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #f1d3dc;
  width: 328px;
}
.features-tile-leitner-orb-mobile {
  position: absolute;
  left: 61px;
  width: 243px;
  height: 243px;
  top: 66px;
}
.features-tile-leitner-position-mobile {
  position: absolute;
  display: flex;
  height: 203.474px;
  align-items: center;
  justify-content: center;
  left: 38.23px;
  top: 160.26px;
  width: 251.533px;
}
.feature-leitner-middle-card-position-mobile {
  position: absolute;
  display: flex;
  height: 197.838px;
  align-items: center;
  justify-content: center;
  left: 27.04px;
  top: 177.08px;
  width: 273.918px;
}
.features-flashcard-mobile {
  position: absolute;
  background-color: white;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  left: 19px;
  overflow: clip;
  padding-bottom: 18px;
  padding-top: 22px;
  padding-left: 18px;
  padding-right: 18px;
  border-radius: 24px;
  box-shadow: -2px 4px 20px 0px rgba(0, 0, 0, 0.07);
  top: 214px;
  width: 290px;
}
.feature-bilingual-mobile {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #e4f4e9;
  height: 420px;
  overflow: clip;
  position: relative;
  border-radius: 28px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #bfe3cb;
  width: 328px;
}
.features-tile-bilingual-interface-orb-mobile {
  position: absolute;
  left: 46px;
  width: 234px;
  height: 234px;
  top: 223px;
}
.features-language-switch-mobile {
  position: absolute;
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  left: 77px;
  overflow: clip;
  padding: 4px;
  border-radius: 999px;
  box-shadow: 0px 8px 24px 0px rgba(31, 36, 48, 0.08);
  top: 216px;
}
.features-tile-bilingual-interface-position-mobile {
  position: absolute;
  display: flex;
  height: 85.605px;
  align-items: center;
  justify-content: center;
  left: 8px;
  top: 264.3px;
  width: 303.252px;
}
.feature-english-meaning-position-mobile {
  position: absolute;
  display: flex;
  height: 108.41px;
  align-items: center;
  justify-content: center;
  left: 16.58px;
  top: 332px;
  width: 303.237px;
}
.feature-practices-mobile {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #eef2fc;
  height: 520px;
  overflow: clip;
  position: relative;
  border-radius: 28px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #d2ddf6;
  width: 328px;
}
.features-tile-coming-soon-practices-position-mobile {
  position: absolute;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  left: 24px;
  overflow: clip;
  top: 28px;
  width: 280px;
}
.features-coming-soon-mobile {
  background-color: #e6be6a;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
}
.feature-practices-title-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 28px;
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 20px;
  text-align: right;
  width: min-content;
}
.features-tile-coming-soon-practices-orb-mobile {
  position: absolute;
  left: 56px;
  width: 270px;
  height: 270px;
  top: 241px;
}
.feature-practices-preview-position-mobile {
  position: absolute;
  display: flex;
  height: 257.594px;
  align-items: center;
  justify-content: center;
  left: 60px;
  top: 233.82px;
  width: 248.316px;
}
.features-row-mobile {
  align-content: stretch;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.feature-achievements-mobile {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #fbf5e6;
  height: 272px;
  overflow: clip;
  position: relative;
  border-radius: 28px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #f1dda8;
  width: 156px;
}
.features-tile-achievements-orb-mobile {
  position: absolute;
  left: -12px;
  width: 180px;
  height: 180px;
  top: -16px;
}
.features-tile-achievements-position-mobile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 23.05px;
  width: 109.905px;
  height: 109.905px;
  top: 19.05px;
}
.features-sticker-trophy-mobile {
  position: relative;
  width: 100px;
  height: 100px;
}
.feature-small-copy-mobile {
  word-break: break-word;
  position: absolute;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  left: 16px;
  overflow: clip;
  text-align: right;
  top: 140px;
  width: 124px;
}
.feature-small-description-mobile {
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 28px;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 20px;
  width: 100%;
}
.feature-placement-mobile {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  --gradient-from: #e6f2f8;
  height: 272px;
  overflow: clip;
  position: relative;
  border-radius: 28px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #bfddeb;
  width: 156px;
}
.features-tile-placement-orb-mobile {
  position: absolute;
  left: -12px;
  width: 180px;
  height: 180px;
  top: -22px;
}
.features-tile-placement-position-mobile {
  position: absolute;
  display: flex;
  height: 72.8px;
  align-items: center;
  justify-content: center;
  left: 14.9px;
  top: 31.84px;
  width: 125.722px;
}
.features-levels-mobile {
  height: 64.48px;
  overflow: clip;
  position: relative;
  width: 121.52px;
}
.features-level-icon-b2-mobile {
  position: absolute;
  left: 0;
  overflow: clip;
  width: 39.68px;
  height: 39.68px;
  top: 12.4px;
}
.features-level-icon-a2-mobile {
  position: absolute;
  left: 81.84px;
  overflow: clip;
  width: 39.68px;
  height: 39.68px;
  top: 12.4px;
}
.features-level-icon-b1-mobile {
  position: absolute;
  left: 28.52px;
  overflow: clip;
  width: 64.48px;
  height: 64.48px;
  top: 0;
}
/* Subscription / desktop */
.subscription-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 96px;
  padding-left: 120px;
  padding-right: 120px;
  position: relative;
  width: 100%;
  height: 100%;
}
.subscription-panel-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  overflow: clip;
  padding-left: 64px;
  padding-right: 72px;
  padding-top: 64px;
  padding-bottom: 64px;
  position: relative;
  border-radius: 40px;
  flex-shrink: 0;
  width: 100%;
  background-image: linear-gradient(
    136.43535770969783deg,
    rgb(10, 23, 65) 7.1429%,
    rgb(29, 62, 147) 78.571%
  );
}
.subscription-panel-orb-desktop {
  position: absolute;
  left: 586px;
  width: 504px;
  height: 504px;
  top: 411px;
}
.subscription-orb-inset-desktop {
  position: absolute;
  inset: -29.37% -1.59%;
}
.subscription-intro-desktop {
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.subscription-artwork-desktop {
  height: 400px;
  position: relative;
  flex-shrink: 0;
  width: 420px;
}
.subscription-glow-desktop {
  position: absolute;
  left: 40px;
  width: 340px;
  height: 340px;
  top: 30px;
}
.subscription-glow-inset-desktop {
  position: absolute;
  inset: -26.47%;
}
.subscription-sticker-gem-desktop {
  --offset-x: -50%;
  position: absolute;
  aspect-ratio: 391/391;
  bottom: 12.5%;
  left: 50%;
  top: 12.5%;
  translate: -50% 0;
}
.subscription-copy-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-end;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 580px;
}
.subscription-brand-pro-desktop {
  background-color: #0b1c4a;
  align-content: stretch;
  display: flex;
  gap: 5.6px;
  align-items: center;
  justify-content: center;
  padding: 5.6px;
  position: relative;
  border-radius: 11.2px;
  flex-shrink: 0;
}
.subscription-pro-desktop {
  background-color: #e6be6a;
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5.6px;
  padding-right: 5.6px;
  position: relative;
  border-radius: 5.6px;
  flex-shrink: 0;
}
.subscription-pro-label-desktop {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 600;
  line-height: 28px;
  position: relative;
  flex-shrink: 0;
  color: #3a2a06;
  font-size: 19.6px;
  text-align: center;
  white-space: nowrap;
}
.subscription-brand-pro-label-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 28px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 19.6px;
  text-align: center;
  white-space: nowrap;
}
.subscription-title-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 700;
  line-height: 52px;
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 36px;
  text-align: right;
  width: min-content;
}
.subscription-description-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 32px;
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 18px;
  text-align: right;
  width: min-content;
}
.subscription-benefits {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.subscription-benefit {
  align-content: stretch;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.subscription-benefit-label {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 500;
  line-height: 24px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 16px;
  text-align: right;
  white-space: nowrap;
}
.subscription-benefit-icon-badge {
  background-color: #e6be6a;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  padding: 3px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
}
.subscription-benefit-icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.subscription-plans-desktop {
  align-content: stretch;
  cursor: pointer;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.subscription-plan-desktop {
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.1);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.18);
  border-style: solid;
  align-content: stretch;
  filter: drop-shadow(0px 12px 16px rgba(0, 0, 0, 0.18));
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 20px;
  height: 280px;
  align-items: flex-end;
  min-width: 1px;
  padding: 28px;
  position: relative;
  border-radius: 28px;
}
.subscription-plan-heading {
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.subscription-plan-title-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 36px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 24px;
  text-align: left;
  white-space: nowrap;
}
.subscription-price-row {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  flex-shrink: 0;
}
.subscription-amount-row {
  word-break: break-word;
  align-content: stretch;
  display: flex;
  gap: 8px;
  align-items: baseline;
  position: relative;
  flex-shrink: 0;
  color: white;
  text-align: left;
  white-space: nowrap;
}
.subscription-currency-desktop {
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 24px;
  position: relative;
  flex-shrink: 0;
  font-size: 16px;
}
.subscription-price-desktop {
  font-family: Vazirmatn, sans-serif;
  font-weight: 700;
  line-height: 52px;
  position: relative;
  flex-shrink: 0;
  font-size: 36px;
}
.subscription-plan-spacer {
  flex: 1 0 0;
  min-height: 1px;
  position: relative;
  width: 100%;
}
.button-glass-full-subscription {
  background-color: rgba(255, 255, 255, 0.16);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.4);
  border-style: solid;
  align-content: stretch;
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding-left: 28px;
  padding-right: 28px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
  width: 100%;
}
.subscription-plan-featured-desktop {
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.16);
  border-width: 2px;
  border-color: #ebc77a;
  border-style: solid;
  align-content: stretch;
  filter: drop-shadow(0px 12px 16px rgba(0, 0, 0, 0.18));
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 20px;
  height: 280px;
  align-items: flex-end;
  min-width: 1px;
  padding: 28px;
  position: relative;
  border-radius: 28px;
}
.subscription-featured-price-group {
  word-break: break-word;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  flex-shrink: 0;
  text-align: left;
  white-space: nowrap;
}
.subscription-featured-amount-row {
  align-content: stretch;
  display: flex;
  gap: 8px;
  align-items: baseline;
  position: relative;
  flex-shrink: 0;
  color: white;
}
.subscription-original-price {
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  text-decoration-thickness: from-font;
  text-decoration-style: solid;
  font-family: "Vazirmatn:Regular";
  line-height: 20px;
  text-decoration-line: line-through;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 14px;
  color: white;
}
.subscription-discount-desktop {
  position: absolute;
  background-color: #e6be6a;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  left: 26px;
  overflow: clip;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 999px;
  top: -16px;
}
.subscription-discount-label-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 500;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: #0b1c4a;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
}
/* Subscription / mobile */
.subscription-mobile {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 48px;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  width: 100%;
  height: 100%;
}
.subscription-panel-mobile {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
  overflow: clip;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 32px;
  padding-bottom: 32px;
  position: relative;
  border-radius: 28px;
  flex-shrink: 0;
  width: 100%;
  background-image: linear-gradient(
    102.19579034871988deg,
    rgb(10, 23, 65) 7.1429%,
    rgb(29, 62, 147) 78.571%
  );
}
.subscription-panel-orb-mobile {
  position: absolute;
  left: 2px;
  width: 324px;
  height: 324px;
  top: 524px;
}
.subscription-orb-inset-mobile {
  position: absolute;
  inset: -34.54%;
}
.subscription-artwork-mobile {
  height: 160px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.subscription-glow-mobile {
  position: absolute;
  left: 64px;
  width: 153px;
  height: 153px;
  top: 3.5px;
}
.subscription-sticker-gem-mobile {
  --offset-x: -50%;
  position: absolute;
  aspect-ratio: 391/391;
  bottom: 7.81%;
  left: calc(50% + 0.5px);
  top: 7.81%;
  translate: -50% 0;
}
.subscription-brand-pro-mobile {
  background-color: #0b1c4a;
  align-content: stretch;
  display: flex;
  gap: 4.6px;
  align-items: center;
  justify-content: center;
  padding: 4.6px;
  position: relative;
  border-radius: 9.2px;
  flex-shrink: 0;
}
.subscription-pro-mobile {
  background-color: #e6be6a;
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4.6px;
  padding-right: 4.6px;
  position: relative;
  border-radius: 4.6px;
  flex-shrink: 0;
}
.subscription-pro-label-mobile {
  word-break: break-word;
  font-family: Comme, sans-serif;
  font-weight: 600;
  line-height: 23px;
  position: relative;
  flex-shrink: 0;
  color: #3a2a06;
  font-size: 16.1px;
  text-align: center;
  white-space: nowrap;
}
.subscription-brand-pro-label-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 23px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 16.1px;
  text-align: center;
  white-space: nowrap;
}
.subscription-title-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 700;
  line-height: 30px;
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 22px;
  text-align: right;
  width: min-content;
}
.subscription-description-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 24px;
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 16px;
  text-align: right;
  width: min-content;
}
.subscription-plans-mobile {
  align-content: stretch;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 0px;
  padding-top: 12px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.subscription-plan-featured-mobile {
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.16);
  border-width: 2px;
  border-color: #ebc77a;
  border-style: solid;
  align-content: stretch;
  filter: drop-shadow(0px 12px 16px rgba(0, 0, 0, 0.18));
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  padding: 20px;
  position: relative;
  border-radius: 20px;
  flex-shrink: 0;
  width: 100%;
}
.subscription-plan-title-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 24px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 16px;
  text-align: left;
  white-space: nowrap;
}
.subscription-amount-mobile {
  align-content: stretch;
  display: flex;
  gap: 6px;
  align-items: baseline;
  position: relative;
  flex-shrink: 0;
  color: white;
}
.subscription-currency-mobile {
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  font-size: 14px;
}
.subscription-price-mobile {
  font-family: Vazirmatn, sans-serif;
  font-weight: 700;
  line-height: 32px;
  position: relative;
  flex-shrink: 0;
  font-size: 24px;
}
.subscription-discount-mobile {
  position: absolute;
  background-color: #e6be6a;
  align-content: stretch;
  display: flex;
  align-items: flex-start;
  left: 18px;
  overflow: clip;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 999px;
  top: -14px;
}
.subscription-discount-label-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 500;
  line-height: 16px;
  position: relative;
  flex-shrink: 0;
  color: #0b1c4a;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}
.subscription-plan-mobile {
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.1);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.18);
  border-style: solid;
  align-content: stretch;
  filter: drop-shadow(0px 12px 16px rgba(0, 0, 0, 0.18));
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  padding: 20px;
  position: relative;
  border-radius: 20px;
  flex-shrink: 0;
  width: 100%;
}
.subscription-amount-row-mobile {
  word-break: break-word;
  align-content: stretch;
  display: flex;
  gap: 6px;
  align-items: baseline;
  position: relative;
  flex-shrink: 0;
  color: white;
  text-align: left;
  white-space: nowrap;
}
/* FAQ / desktop */
.faq-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  padding-bottom: 96px;
  padding-top: 32px;
  padding-left: 120px;
  padding-right: 120px;
  position: relative;
  width: 100%;
  height: 100%;
}
.faq-heading-desktop {
  align-content: stretch;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
}
.faq-artwork-position-desktop {
  display: flex;
  height: 141.201px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 145.651px;
}
.faq-artwork-desktop {
  height: 128px;
  position: relative;
  width: 133px;
}
.faq-title-desktop {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 700;
  line-height: 0;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 36px;
  text-align: center;
  white-space: nowrap;
}
.faq-questions-desktop {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  align-content: stretch;
  display: flex;
  --gradient-from: #eef2fc;
  gap: 20px;
  align-items: flex-start;
  overflow: clip;
  padding: 40px;
  position: relative;
  border-radius: 40px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #d2ddf6;
  width: 100%;
}
.faq-questions-orb-desktop {
  position: absolute;
  left: 830px;
  width: 420px;
  height: 420px;
  top: 260px;
}
.faq-orb-top-desktop {
  position: absolute;
  left: -30px;
  width: 420px;
  height: 420px;
  top: -100px;
}
.faq-column-desktop {
  word-break: break-word;
  align-content: stretch;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  min-width: 1px;
  overflow: clip;
  position: relative;
  text-align: right;
}
.faq-question-tall-desktop {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 168px;
  align-items: flex-end;
  overflow: clip;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 28px;
  padding-bottom: 28px;
  position: relative;
  border-radius: 24px;
  box-shadow: 0px 8px 24px 0px rgba(4, 12, 31, 0.06);
  flex-shrink: 0;
  width: 100%;
}
.faq-question-desktop {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 144px;
  align-items: flex-end;
  overflow: clip;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 28px;
  padding-bottom: 28px;
  position: relative;
  border-radius: 24px;
  box-shadow: 0px 8px 24px 0px rgba(4, 12, 31, 0.06);
  flex-shrink: 0;
  width: 100%;
}
/* FAQ / mobile */
.faq-mobile {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  padding-bottom: 48px;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  width: 100%;
  height: 100%;
}
.faq-heading-mobile {
  align-content: stretch;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  overflow: clip;
  padding-bottom: 12px;
  position: relative;
  flex-shrink: 0;
}
.faq-artwork-position-mobile {
  display: flex;
  height: 88.238px;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: 90.908px;
}
.faq-artwork-mobile {
  height: 80px;
  position: relative;
  width: 83px;
}
.faq-title-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 700;
  line-height: 0;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 22px;
  text-align: center;
  white-space: nowrap;
}
.faq-questions-mobile {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-via, var(--gradient-to)) var(--gradient-position, 50%),
    var(--gradient-to)
  );
  align-content: stretch;
  display: flex;
  flex-direction: column;
  --gradient-from: #eef2fc;
  gap: 12px;
  align-items: flex-start;
  overflow: clip;
  padding: 16px;
  position: relative;
  border-radius: 28px;
  box-shadow: -2px 2px 12px 0px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  --gradient-to: #d2ddf6;
  width: 100%;
}
.faq-questions-orb-mobile {
  position: absolute;
  left: 116px;
  width: 288px;
  height: 288px;
  top: 696px;
}
.faq-orb-top-mobile {
  position: absolute;
  left: -74px;
  width: 288px;
  height: 288px;
  top: -54px;
}
.faq-question-mobile {
  word-break: break-word;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.75);
  border-style: solid;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  overflow: clip;
  padding: 20px;
  position: relative;
  border-radius: 20px;
  box-shadow: 0px 8px 24px 0px rgba(4, 12, 31, 0.06);
  flex-shrink: 0;
  text-align: right;
  width: 100%;
}
.faq-question-title-mobile {
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  line-height: 24px;
  position: relative;
  flex-shrink: 0;
  color: #1f2430;
  font-size: 16px;
  width: 100%;
}
.faq-question-answer-mobile {
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 14px;
  width: 100%;
}
/* Download / desktop */
.download-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 64px;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  width: 100%;
  height: 100%;
}
.download-panel-desktop {
  align-content: stretch;
  display: flex;
  gap: 64px;
  align-items: center;
  justify-content: center;
  overflow: clip;
  padding-left: 96px;
  padding-right: 96px;
  padding-top: 72px;
  padding-bottom: 72px;
  position: relative;
  border-radius: 40px;
  flex-shrink: 0;
  width: 100%;
  background-image: linear-gradient(
    157.89644072163165deg,
    rgb(10, 25, 70) 7.1429%,
    rgb(18, 45, 116) 46.429%,
    rgb(30, 65, 153) 78.571%
  );
}
.download-phones-desktop {
  position: relative;
  flex-shrink: 0;
  width: 280px;
  height: 280px;
}
.download-glow-desktop {
  position: absolute;
  left: -20px;
  width: 320px;
  height: 320px;
  top: 10px;
}
.download-glow-inset-desktop {
  position: absolute;
  inset: -28.13%;
}
.download-dictionary-phone-position-desktop {
  position: absolute;
  display: flex;
  height: 473.161px;
  align-items: center;
  justify-content: center;
  left: -83px;
  top: 11px;
  width: 308.502px;
}
.download-phone-tilt-left {
  flex: none;
  rotate: -10.58deg;
}
.download-dictionary-portrait-1-desktop {
  height: 438px;
  position: relative;
  width: 232px;
}
.download-reader-phone-position-desktop {
  --offset-x: -50%;
  --offset-y: -50%;
  position: absolute;
  display: flex;
  height: 456.662px;
  align-items: center;
  justify-content: center;
  left: calc(50% + 86.14px);
  top: calc(50% + 49.33px);
  width: 260.285px;
  translate: -50% -50%;
}
.download-phone-tilt-right {
  flex: none;
  rotate: 3.29deg;
}
.download-full-book-portrait-1-desktop {
  height: 443.906px;
  position: relative;
  width: 235.223px;
}
.download-copy-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 800px;
}
.download-options-desktop {
  align-content: stretch;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  overflow: clip;
  padding-top: 8px;
  position: relative;
  flex-shrink: 0;
}
.download-platform-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
}
.download-platform-label {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 500;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}
.download-button-desktop {
  background-color: white;
  align-content: stretch;
  display: flex;
  height: 56px;
  align-items: center;
  justify-content: center;
  overflow: clip;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
  width: 184px;
}
.download-web-badge {
  height: 40px;
  position: relative;
  flex-shrink: 0;
  width: 128.571px;
}
.download-stores-desktop {
  align-content: stretch;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
}
.download-myket-badge {
  height: 40px;
  position: relative;
  flex-shrink: 0;
  overflow: clip;
  width: 135px;
}
.store-badge-clip-group {
  position: absolute;
  display: contents;
  inset: 0;
}
.store-badge-vector-group {
  position: absolute;
  display: contents;
  inset: 1.11% 0.33%;
}
.myket-badge-background {
  position: absolute;
  inset: 1.11% 0.33%;
  mask-mode: alpha;
  mask-composite: intersect;
  mask-clip: no-clip;
  mask-repeat: no-repeat;
  mask-position: -0.445px -0.444px;
  mask-size: 135px 40px;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEzNSIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDEzNSA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNsaXAwXzE2MF84Nzg4MyI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik0xMzUgMEgwVjQwSDEzNVYwWiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8L3N2Zz4K");
}
.myket-badge-icon {
  position: absolute;
  inset: 16.69% 73.6% 16.69% 6.67%;
  mask-mode: alpha;
  mask-composite: intersect;
  mask-clip: no-clip;
  mask-repeat: no-repeat;
  mask-position: -9px -6.678px;
  mask-size: 135px 40px;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEzNSIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDEzNSA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNsaXAwXzE2MF84Nzg4MyI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik0xMzUgMEgwVjQwSDEzNVYwWiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8L3N2Zz4K");
}
.myket-badge-caption {
  position: absolute;
  inset: 20.46% 6.93% 61.03% 58.48%;
  mask-mode: alpha;
  mask-composite: intersect;
  mask-clip: no-clip;
  mask-repeat: no-repeat;
  mask-position: -78.941px -8.185px;
  mask-size: 135px 40px;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEzNSIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDEzNSA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNsaXAwXzE2MF84Nzg4MyI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik0xMzUgMEgwVjQwSDEzNVYwWiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8L3N2Zz4K");
}
.myket-badge-wordmark {
  position: absolute;
  inset: 52.97% 6.98% 17.94% 39.9%;
  mask-mode: alpha;
  mask-composite: intersect;
  mask-clip: no-clip;
  mask-repeat: no-repeat;
  mask-position: -53.863px -21.186px;
  mask-size: 135px 40px;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEzNSIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDEzNSA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNsaXAwXzE2MF84Nzg4MyI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik0xMzUgMEgwVjQwSDEzNVYwWiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8L3N2Zz4K");
}
.download-bazaar-badge {
  height: 40px;
  position: relative;
  flex-shrink: 0;
  overflow: clip;
  width: 136.364px;
}
.bazaar-badge-background {
  position: absolute;
  inset: 1.14% 0.33%;
}
.bazaar-badge-icon {
  position: absolute;
  inset: 17.5% 72.59% 17.5% 8.15%;
}
.bazaar-badge-caption {
  position: absolute;
  inset: 17.5% 8.15% 65% 71.85%;
}
.bazaar-badge-wordmark-position {
  position: absolute;
  inset: 37.5% 7.41% 15% 57.04%;
}
.bazaar-badge-wordmark-mask {
  position: absolute;
  display: contents;
  inset: 37.5% 7.41% 15% 57.04%;
}
.bazaar-badge-wordmark {
  position: absolute;
  inset: 37.5% 7.41% 15% 57.04%;
  mask-mode: alpha;
  mask-composite: intersect;
  mask-clip: no-clip;
  mask-repeat: no-repeat;
  mask-size: 48.485px 19px;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjQ4LjQ4NDgiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCA0OC40ODQ4IDE5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KPGcgaWQ9Ikdyb3VwIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTQ4LjQ4NDggMEgwVjE5SDQ4LjQ4NDhWMFoiIGZpbGw9InVybCgjcGF0dGVybjBfMF83MSkiLz4KPC9nPgo8ZGVmcz4KPHBhdHRlcm4gaWQ9InBhdHRlcm4wXzBfNzEiIHBhdHRlcm5Db250ZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIj4KPHVzZSB4bGluazpocmVmPSIjaW1hZ2UwXzBfNzEiIHRyYW5zZm9ybT0ic2NhbGUoMC4wMDc4MTI1IDAuMDE5NjA3OCkiLz4KPC9wYXR0ZXJuPgo8aW1hZ2UgaWQ9ImltYWdlMF8wXzcxIiBkYXRhLW5hbWU9ImltYWdlMS5wbmciIHdpZHRoPSIxMjgiIGhlaWdodD0iNTEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBSUFBQUFBekNBWUFBQUJmWUFBUUFBQUFBWE5TUjBJQXJzNGM2UUFBQUVSbFdFbG1UVTBBS2dBQUFBZ0FBWWRwQUFRQUFBQUJBQUFBR2dBQUFBQUFBNkFCQUFNQUFBQUJBQUVBQUtBQ0FBUUFBQUFCQUFBQWdLQURBQVFBQUFBQkFBQUFNd0FBQUFBZjZYYXpBQUFLMUVsRVFWUjRBZTJjRFpCVlpSbUFkekZTQVUwUkZiUmtFWXlTeEZSc3dqUXdNMURUZERLclVUUDdZWExLeERGcnlFb2RNMnFtYVpMR2NYUWNOQndIZzRsMnhDS29TU0NCaEloVXNqSlVYRVdVUDhYZkVHSjdudldlTzJmUGZ1ZnVQZmVldlh0Wjdqdno3SGZPKy8yZTczMi8zOTNaNXZiMjlxYUc3TDA5MEcvdi9mVEdsOXNERFFmWXkvM2dIZFYrZi9PTXpkVVdVVS81QjlPWU0rRnpNQXIyZyszd0U1Z0xlY3QwQ3J3RXRNT3I4SFg0QTVRdDdkODh0T3kwb1lSVk8wQ28wRDFJTjRDMmZnSStEeWZDZ2FBVEpQdGxKcnFENFE3SVM3NU1RVmZDd0VLQlF3bnZnVEd3dGFEcjhXQnZYQUkwc0NOdEpheURYOEZGNElnL0RKTEdSOVUwQ0s3eUlVZTVocklpNDBmRldyOHpRczBrOUxFMXE3eUdGV25BTDhKWHdaRjJDT3dEV2NUbElFK3hUVWxwUmpFZWJrbEc5TlI3WDNlQVkrazQxOWtQd1JDbzVudi9UdjVhU0RWdHpOeSttbGFXdVhXVlozQTl2eFZHZzJ0M05iS1p6RS9DNWRVVUVzaTdPNkNydWFxdk9ZREdkaU4xQ2xSaWVHL0Z0c0ZyOEF6TWh6blFCbm5MLy9JdXNKTHkrcElEZUI1eVk5ZVNzU05lSi8zTHNBRm1ReXVzaDU2V1hUMWRRVG5sOXlVSHVJOFBiaW5ubzBtekhUVDZjcmdkbGtHdERWSVhkL0I5eFFFOFBvMkZVdUpGeTB1d0VHNkROZENic3JNM0s0L3E3aXNPY0JJZjlLN29veExoSnQ1WGc3ZDVTNkV1Umw2OXRDT3ZpeURQMWcrQXUyVXZWKzZGQTBEeDRtVWVSSEUrZXc3UFU0NmlzUDRwQlY2UC9teFlBdlZpZkp0YTZ5WEhPcnRJSGpPQXUrMkhRU05FY2pRUEhzVzgxSEJqTmhJaThmbDRjTXAyQTVhSGxDcm5CaXBZQ3cvbFVWR09aWGpTNkhYSll3YTRrYStJRzkrUGFnWU52UmhhSUNrdEtLNU9LcXQ0L3pkNVhlTkRjamhLZC9aZS85YVQxTVVlSUE4SDhNd2RFcWRrUi9vK2dVanIvV2hBWDZuS05YNUxpY3d1T1QrQ1cwSG5yQWQ1cVI0YWtZY0RlRk9XSm0ra1JhRGZVQ0l1YTlSdU1ud0dTdjBXN1VEaUx3ZjNLbW43QmFKcUpqdHFWbE9KaXZKd0FPL2FQVk1ueFJINWFkaVdqQ2pvZmhyUVY2TnlGcGhTS0R1dG5QMkpPQk9Xd0lDMFJEWFNweTFaTmFyKzdXcnljSUNsRkhVemVOenlldk10MkFoZmc5L0R0ZkFpdU9hNTgvWDUyL0FQeUZzOFlialdoNXd1cXN2Ui8yRllBV2xIeHlodHBhSEx6S25nckRRaXBaQlhVdlExVmFlZUF2aExIemRQMTRHZGREZC9lZkpnaVpZNW1tZUNIYXVoN2R4b2w2disxMkNjSFdPY04zRTlKZDRJV3Y0c0dKSlNpZTBZQzZ2Z0kxQnFHU002ayt4TGFrOGM3NGVCNExJMEY2NkF1UHczL3RKYnowRUh3UGhIMENDUGIwY1dHbllCdW5OeGdpVWxHdXFvKzExS3ZBYnhCcTVXc29DS0pzTjhHRmFpMG1PSTB3a2NyYytWU0pjbDZnWVNud0RSNXRjTjZNWHdSM0FnUk9LTW1hdGdvM2RTNEZrd0VmYURmOEp2c051emhFRkpXd0ljUFpIeHpYZ0FYT0xESGlTcmFhdXp6dFBkdEhrNDhjdGhWRGZweW8zV0FKSHhvenoyM3craWwwS1k2eVlRNDE5R3VWNjJ6WWFwNEJKOEM2d21yaFdDZTU0dURrQkM3OVdQZzZUc1NpcHEvRzRuWnBVMk1qZ2FINE5TN1g4UDhVdkJHYUZhMlpsU2dQM3FxSXdrbDJVSGUvVURqZjRMZURmc0gxVlFDQThsUEErV2s4NFpvcE4wY1FCaUx3VXp4YVdkbDRmamlobytuMHBkVG1GUEZHZ2h6Q0l1UCtOZ0diaEJUUk9YaXNWUXJSTThtbEtCeG8vUE1tL3ludVlzS1VVRTFmZWhQUjlLRFJEM1BHTkFKK2trSVFlNGdCUm1pSXVYRnIzaEFIcXpINmhuRHdXTmN5ZGtGUTEvQnJpSEtlVUVSeEMvR0tweGd2dkpIekxzSVBSK1J5UWVuVVBMUUhJRVIrbEQ0YlVvejRiNHpCSktwODc5M3ZuTUFtN3VpeEp5Z0U0SkNpbnR0Q2VLdVdyMzhBMnFjdXFNeTRqNFM0Wm5qNmpud05wdThrUk9jR3czNmRLaTNVK0VidmswUU54UXprejJhMUlHSnhVcDc1NWl2Z01EVStKRGF2dlNQaTFLeUFIMDFKQWtaNFZRbWp4MXRzM0c5azhVYXZ2SzdhUkUxbzZST1FubEM4bUl4THRPOENDY25OQ1g4K3JhSHBvQlhFYTlzWXpFR1dCWDlCSUxrdzRmaXlvKzZraXQ0QWtqS1RyV1U3QXhHVkY0ZHo5UWxKQURoQXl0bDQwdjVxck53NVZVRStvTWpmK0ZLcHF3aGJ6ZE9ZREZXL2NDbU9wTEJuRzNIZXJYTjlCdmpaVmpHMElPNFBkTmlLVUxQYzVCZVZRZzRrVjBGM0hzRzBrNEJ0b0NhVHBkZm9VYXFxY214UTNHSGF3ZldhYWJaQmxaM2k4bThmZEJUMCtLVStrMG1KaU1LT1Bkajc4UlFwMFh5dTRJK3lHNGJKd0ZvY0dCdWlqdXNtZEJ5SEc5K05sVVRQbjJRK2d5NkNDaWZnbnZUYVQxVlh2TmdOTWhlZFQwSHVZOGpMK0lzSW5RWldnNjdQWTlKcmF4S0habVVrTFRsMmxHdytNNHdUV0VyVlFROGw3VFZTcU9uSFBodXpBQ2RMbzBzWVBuZ2FOWko3Rmpub0tvZysxRWRaR1l4bHRCeXpRTWZiY2RGYy9EYTRmbzlJNG1SNTJkYWgzUGd4dEZ5MnNEOVM0YmpsNDNxMG5qb0dyUzJPdDhpSW5UZFVpR28vd3pPRXY0TGJaM0sxaStUaGthR051eHlVcmk0cktHRjJjZWw4MUlPamx4cUNQOEdNL0ZTVEdqSTJjV2JNTVJOaE11ZzBmQUQzUE44U01qZU93aU5zUU85YU04ZG4wQVRvVDN3Y0VGOWlVc1I2TDBVZG9qbzRjS1FtYzlqYXBqZFJvaHNiSnN1OWczSjhYMDVkYjdML0lrWjljVjZFNklsUlYvdEMwU2lRNVdTb1pnazVra21Jb2p2RkpJK0RIQ0FZbE1ib2FMRW5LQXVjUnFtTkJvTUtQSEZEOWFQZ2lLUnRmVEhFV1MvRkJVSFRwSGh0akpOaXl0RHFKcUtqcnpPSmhmQ0R1TmtoeGE4akpsdUtRbFpUYUtTNkhVYkpmTWsvWnVHWmZCWkJ6QjVjQys5VVNYN09QWDBSVWw1QUEvSi9ZSzZNN2ppb1h3NEpRVW1wYmlhZXIxV2VlOUM5eEFUUVJudGVNZ05JMmpya2hXa2N2Um5oVHIwbGg1T0lCbGEyeG5Wa21UdjhRamt0N2g1dUUxRWx3TmVtMDlpRFBMYzVEM25zTnYyd0ZMWVpvdmlIV05oei9CbTVDSFBFa2hGNllVNUV4cDNkR1VuWklzTi9WV1Nyb3BYbG9YQnpBU0o1aERjRDI0SCtoTmNYVGNCa2ZEbzJDSDVTVmJLT2gybUF6eGNwMFJKc0gzd0ZtaFV0bEp4c2RCaHlwbFlKZUJ1K0JWeUNLdTVaYjdWcG1aVFA4QXR1MjBFUTA2Z0FXU2NBYkJwMEFQM2dHMUZEM1ZLZk4wK0JiWW1hZEJLMmk0U3NReVhPdlh3ejNnUnU0cWlCdWYxdzVSOXpOd0wzUW5iSUJPYXlmdmFSTE5XRGVUNEhpd3p1NWtLZ21td0ROUVRqMmJTT2MzRElQZlFuZk9vL0VkUU5iUlNacTcreTloYkNoMGtpK0J5OEpoTUFUeUZyM1lKVWVQWGdSMnZvNFhrdUVvdndJNmhDY0JaNGYrWUVkYmhvWldYTXA4MTJIY2dUOENkc0pHeUNydUJ5YkNKMkVjdUdaYnI1dFpaeWx4dG53TTVzRmlxR1RKNmtlK0NmQlpHQXVEWUNSWXYrMXVnNFZ3Tnp3UER0UW1iSFFoajlOaGNBR0NEckVORGlielRDRnRsNEhjclFOMEZGUDRRVVZ1REszTWptZ0JPOEtOcEEwMDFCQjJpaCtpYUZoUEJYcWdsZHNnMzlVN1V1eTB2OEVDV0FubGpCYVNOU1RxQVIwZ0V1d3ptbWRueldQQVB0WWhGNUpHSndoS0pnY0lsVUNsZXQwdzhCU2dRM2k4MHdrVVI3UUcxL2dhT3hvcDBTaEYxWkJxZWlEdUFKV1U0Nml0VmpTcU5HUVA3SUU4SEdBUC9PeXFtK3dTTjZwUXlqcENaN200R0dmZi9nZGMvdXBXb3JXNmJodFlodzJiUkp2V3c0b0NUeE9lQWNySjRPYlZ5NWJsNEs3ZURWM2RTbU1HeUdZYWQrVDN3aUd4Yk82QlpzTTVjRDhNaFVnOHBYaVBvVlA4TlZMV1U5aVlBYkpaNHpxU3g0MGY1WFlydmdqaXhvL2lkSUtib3BkNkN4c09rTTBpM2tHa3lVRnBFZWdQTHhIWHExRU5COGpXL1U3ajdZRXM2dHdNcG0zNDFnYnkxSVdxNFFEWnpQQmprbThJWkZFM0FaNE54UG43aEdrQmZWMm9HZzZRelF4ZVpwMEczbHB1TExDS1VPTjdOWHNLUEZSNGZvRndEWHdjUWs2RHV2ZWw2cHZBM3YrRVJndXE2WUgvQTAvek1SZGlQYzhPQUFBQUFFbEZUa1N1UW1DQyIvPgo8L2RlZnM+Cjwvc3ZnPgo=");
}
.download-apk-badge {
  height: 40px;
  position: relative;
  flex-shrink: 0;
  width: 135px;
}
/* Download / mobile */
.download-mobile {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 32px;
  padding-left: 8px;
  padding-right: 8px;
  position: relative;
  width: 100%;
  height: 100%;
}
.download-panel-mobile {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  overflow: clip;
  padding-top: 32px;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  border-radius: 28px;
  flex-shrink: 0;
  width: 100%;
  background-image: linear-gradient(
    108.43494924980882deg,
    rgb(10, 25, 70) 7.1429%,
    rgb(18, 45, 116) 46.429%,
    rgb(30, 65, 153) 78.571%
  );
}
.download-title-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 700;
  line-height: 30px;
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 22px;
  text-align: center;
  width: min-content;
}
.download-description-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 24px;
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  color: white;
  font-size: 16px;
  text-align: center;
  width: min-content;
}
.download-options-mobile {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  overflow: clip;
  padding-top: 8px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.download-platform-mobile {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.download-button-mobile {
  background-color: white;
  align-content: stretch;
  display: flex;
  height: 56px;
  align-items: center;
  justify-content: center;
  overflow: clip;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
  position: relative;
  border-radius: 999px;
  flex-shrink: 0;
  width: 100%;
}
.download-phones-mobile {
  height: 230px;
  position: relative;
  flex-shrink: 0;
  width: 296px;
}
.download-glow-mobile {
  position: absolute;
  left: -1px;
  width: 240px;
  height: 240px;
  top: 10px;
}
.download-glow-inset-mobile {
  position: absolute;
  inset: -37.5%;
}
.download-reader-phone-position-mobile {
  --offset-x: -50%;
  --offset-y: -50%;
  position: absolute;
  display: flex;
  height: 291.513px;
  align-items: center;
  justify-content: center;
  left: calc(50% + 55.08px);
  top: calc(50% + 48.52px);
  width: 166.155px;
  translate: -50% -50%;
}
.download-full-book-portrait-1-mobile {
  height: 283.371px;
  position: relative;
  width: 150.156px;
}
.download-dictionary-phone-position-mobile {
  position: absolute;
  display: flex;
  height: 334.928px;
  align-items: center;
  justify-content: center;
  left: -15px;
  top: -3.79px;
  width: 218.431px;
}
.download-dictionary-portrait-1-mobile {
  height: 310.028px;
  position: relative;
  width: 164.282px;
}
/* Footer / desktop */
.footer-desktop {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 48px;
  padding-left: 120px;
  padding-right: 120px;
  position: relative;
  width: 100%;
  height: 100%;
}
.footer-row-desktop {
  border-color: #d3cdc1;
  border-style: solid;
  border-top-width: 1px;
  align-content: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: clip;
  padding-top: 32px;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.footer-trust-badge {
  position: relative;
  flex-shrink: 0;
  width: 156px;
  height: 156px;
}
.footer-links-desktop {
  word-break: break-word;
  align-content: stretch;
  cursor: pointer;
  display: flex;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  gap: 32px;
  align-items: flex-start;
  line-height: 0;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}
.footer-brand-desktop {
  word-break: break-word;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
}
.footer-brand-copy {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  position: relative;
  flex-shrink: 0;
}
.footer-brand-title-desktop {
  font-family: Vazirmatn, sans-serif;
  font-weight: 900;
  line-height: 28px;
  position: relative;
  flex-shrink: 0;
  color: #1c3c8c;
  font-size: 20px;
}
.footer-tagline-desktop {
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 14px;
}
.footer-copyright-desktop {
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 16px;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 12px;
}
/* Footer / mobile */
.footer-mobile {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding-bottom: 40px;
  padding-top: 8px;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  width: 100%;
  height: 100%;
}
.footer-brand-title-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 900;
  line-height: 28px;
  position: relative;
  flex-shrink: 0;
  color: #1c3c8c;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}
.footer-tagline-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 20px;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
.footer-links-mobile {
  word-break: break-word;
  align-content: stretch;
  cursor: pointer;
  display: flex;
  font-family: Vazirmatn, sans-serif;
  font-weight: 600;
  gap: 20px;
  align-items: flex-start;
  line-height: 0;
  overflow: clip;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}
.footer-copyright-mobile {
  word-break: break-word;
  font-family: Vazirmatn, sans-serif;
  font-weight: 400;
  line-height: 16px;
  position: relative;
  flex-shrink: 0;
  color: #605e63;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}