.platform-page,
.platform-page * {
  box-sizing: border-box;
}

.platform-page {
  --platform-nav-height: max(3.33333333rem, 60px);
  --platform-purple: #7a62f0;
  --platform-purple-dark: #493b90;
  --platform-purple-light: #9581f3;
  --platform-text: #181818;
  --platform-text-secondary: #666;
  --platform-text-tertiary: #999;
  width: 100%;
  margin-top: calc(-1 * var(--platform-nav-height));
  overflow: hidden;
  color: var(--platform-text);
  background: #fff;
  font-family: "Segoe UI", Arial, sans-serif;
}

.platform-page h1,
.platform-page h2,
.platform-page h3,
.platform-page h4,
.platform-page p,
.platform-page ol {
  margin: 0;
}

.platform-page a:not(.fm-tag) {
  color: inherit;
  text-decoration: none;
}

.platform-page img,
.platform-page svg {
  display: block;
  max-width: 100%;
}

.platform-section {
  width: 100%;
}

.platform-section__header {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.platform-section__header h2 {
  width: 100%;
  font-size: 38px;
  font-weight: 700;
  line-height: 50px;
}

.platform-section__header p {
  width: 100%;
  color: var(--platform-text-secondary);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}

.platform-hero {
  position: relative;
  width: 100%;
  min-height: 586px;
  overflow: hidden;
  background: linear-gradient(0deg, #fff 0%, #e3e8ef 100%);
}

.platform-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 742px) minmax(0, 698px);
  width: min(100%, 1440px);
  min-height: 586px;
  margin: 0 auto;
  padding-top: 130px;
}

.platform-hero__copy {
  align-self: center;
  width: 100%;
  padding: 20px 0 120px;
}

.platform-hero__copy h1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 25px;
  font-size: 38px;
  font-weight: 700;
  line-height: 50px;
}

.platform-hero__copy h1 span {
  color: var(--platform-purple);
}

.platform-hero__copy p {
  width: 100%;
  max-width: 700px;
  min-height: 110px;
  color: var(--platform-text-tertiary);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}

.platform-hero__visual {
  align-self: end;
  width: 698px;
  height: 456px;
}

.platform-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.platform-store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform 180ms ease, opacity 180ms ease;
}

.platform-store-badge:hover {
  opacity: .88;
  transform: translateY(-2px);
}

.platform-store-badge img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

.platform-hero__actions {
  position: absolute;
  bottom: 60px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.platform-hero__badge {
  height: 60px;
}

.platform-secondary-store {
  display: inline-flex;
  width: max-content;
  min-width: 330px;
  max-width: 100%;
  min-height: 31px;
  align-items: center;
  gap: 10px;
  padding: 0 25px;
  border: 1px solid #a22bf6;
  border-radius: 10px;
  color: var(--platform-text);
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  white-space: nowrap;
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.platform-secondary-store:hover {
  border-color: var(--platform-purple);
  color: var(--platform-text);
  transform: translateY(-1px);
}

.platform-secondary-store__brand {
  width: 60px;
  height: 29px;
  flex: 0 0 60px;
  object-fit: contain;
}

.platform-secondary-store__arrow {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
}

.platform-page--android-tv .platform-hero__visual img,
.platform-page--apple-tv .platform-hero__visual img,
.platform-page--android-tv .platform-scene__visual img,
.platform-page--apple-tv .platform-scene__visual img {
  object-fit: contain;
}

.platform-page--android-tv .platform-scene__visual,
.platform-page--apple-tv .platform-scene__visual {
  background: linear-gradient(180deg, #f7f6ff 0%, #fff 127.28%);
}

.platform-metrics {
  display: grid;
  grid-template-columns: repeat(4, 240px);
  justify-content: center;
  align-items: center;
  column-gap: 50px;
  width: 100%;
  height: 201px;
  padding: 50px 0;
  background: #fff;
}

.platform-metric {
  position: relative;
  display: flex;
  height: 101px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.platform-metric:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -25px;
  width: 1px;
  height: 80px;
  background: #e6e6e6;
  transform: translateY(-50%);
}

.platform-metric strong {
  color: var(--platform-purple);
  font-size: 50px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.platform-metric strong i {
  font-style: normal;
  font-weight: 400;
}

.platform-metric > span {
  width: 240px;
  color: var(--platform-text-tertiary);
  font-size: 18px;
  line-height: 24px;
}

.platform-metric--device img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.platform-metric--device > span {
  font-size: 16px;
}

.platform-tutorial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 84px 40px 36px;
}

.platform-tutorial > .platform-section__header {
  margin-bottom: 44px;
}

.platform-tutorial__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 1300px;
  padding: 30px 0;
}

.platform-tutorial__visual {
  width: 720px;
  height: 500px;
  flex: 0 0 720px;
  overflow: hidden;
  border-radius: 20px;
}

.platform-tutorial__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.platform-steps {
  display: flex;
  width: 500px;
  flex: 0 0 500px;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.platform-steps > li {
  width: 100%;
}

.platform-step {
  appearance: none;
  display: flex;
  width: 100%;
  min-height: 150px;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 30px;
  border: 1px solid transparent;
  border-radius: 20px;
  color: var(--platform-text-tertiary);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.platform-step:hover:not(.is-active) {
  color: #777;
  background: #fbfaff;
}

.platform-step:focus-visible {
  outline: 2px solid #a22bf6;
  outline-offset: 2px;
}

.platform-step.is-active {
  color: var(--platform-purple-light);
  border-color: #a22bf6;
  background: #f8f7fe;
}

.platform-step__number {
  min-width: 42px;
  color: #ccc;
  font-family: "Arial Black", "Segoe UI", sans-serif;
  font-size: 70px;
  font-weight: 900;
  line-height: 1;
}

.platform-step.is-active .platform-step__number {
  color: var(--platform-purple);
}

.platform-step__copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}

.platform-step__copy strong {
  color: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}

.platform-step.is-active .platform-step__copy strong {
  color: var(--platform-purple-dark);
}

.platform-step__copy > span {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.platform-outline-button {
  display: inline-flex;
  width: max-content;
  min-width: 169px;
  max-width: 100%;
  box-sizing: border-box;
  height: 52px;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 12px 36px;
  border: 1px solid #a22bf6;
  border-radius: 50px;
  color: var(--platform-purple);
  background: transparent;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  white-space: nowrap;
  transition: background-color 180ms ease;
}

.platform-page a.platform-outline-button {
  color: var(--platform-purple);
}

.platform-outline-button:hover {
  color: var(--platform-purple);
  background: #edebfc;
}

.platform-outline-button span {
  font: inherit;
}

.platform-outline-button:focus-visible {
  outline: 2px solid #a22bf6;
  outline-offset: 2px;
}

.platform-why {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 84px;
  padding: 40px;
}

.platform-why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: min(100%, 1200px);
}

.platform-why-card {
  display: flex;
  min-height: 228px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  background: linear-gradient(180deg, #f7f6ff 0%, #fff 127.28%);
}

.platform-why-card__icon {
  display: flex;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  background: #edebfc;
  flex: 0 0 60px;
}

.platform-why-card__icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.platform-why-card h3 {
  width: 100%;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.platform-why-card p {
  width: 100%;
  color: var(--platform-text-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.platform-store-badge--section {
  height: 60px;
}

.platform-capabilities {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 84px;
  padding: 84px 40px;
}

.platform-capabilities > .platform-section__header {
  max-width: 1344px;
}

.platform-scenes {
  display: flex;
  width: min(100%, 1200px);
  flex-direction: column;
  gap: 72px;
}

.platform-scene {
  display: flex;
  width: 100%;
  min-height: 400px;
  align-items: center;
  gap: 100px;
  border-radius: 20px;
}

.platform-scene--reverse {
  flex-direction: row-reverse;
}

.platform-scene__visual {
  position: relative;
  width: 600px;
  height: 400px;
  flex: 0 0 600px;
  overflow: hidden;
  border-radius: 20px;
  background: #f7f7f7;
}

.platform-scene__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.platform-scene__visual .platform-scene__layer {
  position: absolute;
  inset: 0;
}

.platform-scene__visual .platform-scene__layer--base {
  z-index: 0;
}

.platform-scene__visual .platform-scene__layer--foreground {
  z-index: 1;
}

.platform-scene__copy {
  display: flex;
  flex: 1 1 500px;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.platform-scene__copy h3 {
  width: 100%;
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

.platform-scene__copy p {
  width: 100%;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.platform-page--android-tv .platform-scene__copy > p,
.platform-page--apple-tv .platform-scene__copy > p {
  white-space: pre-line;
}

.platform-scene__points {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.platform-scene__points li {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.platform-scene__point-icon {
  display: flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
}

.platform-scene__point-icon img {
  width: 24px;
  height: 24px;
}

.platform-scene__hint {
  width: 100%;
  color: var(--platform-text-tertiary);
  font-size: 18px;
  line-height: 24px;
}

.platform-tags {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.platform-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 84px;
  padding: 40px;
}

.platform-page--ios .platform-more {
  min-height: 884px;
}

.platform-page--android .platform-more {
  min-height: 998px;
}

.platform-page--windows .platform-more {
  min-height: 790px;
}

.platform-page--mac .platform-more {
  min-height: 732px;
}

.platform-page--android .platform-branding,
.platform-page--windows .platform-branding {
  min-height: 475px;
}

.platform-more > .platform-section__header {
  max-width: 1320px;
}

.platform-more > .platform-section__header h2 {
  font-size: 28px;
  line-height: 38px;
}

.platform-more > .platform-section__header p {
  font-size: 20px;
  line-height: 32px;
}

.platform-more > .platform-section__header a {
  display: block;
  color: var(--platform-purple-light);
  text-decoration: underline;
  text-underline-position: from-font;
}

.platform-more__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  width: min(100%, 1200px);
}

.platform-more-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 20px;
}

.platform-more-card h3 {
  width: 100%;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.platform-more-card h4 {
  width: 100%;
  padding-top: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.platform-more-card.platform-more-card--shared {
  min-height: 0;
  grid-column: 1 / -1;
}

.platform-tags--advanced {
  flex-direction: row;
  align-items: flex-start;
}

.platform-use-cases {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 84px;
  padding: 80px 40px;
}

.platform-use-cases > .platform-section__header h2 span {
  color: var(--platform-purple);
}

.platform-use-cases__grid {
  display: grid;
  width: min(100%, 1320px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.platform-use-case {
  display: flex;
  min-width: 0;
  height: 506px;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: #f8f7fe;
}

/* Localized descriptions may occupy one extra line. Grow the full card row
   instead of clipping text inside the English-only fixed height. */
html[lang]:not([lang="en-US"]):not([lang="en"]) .platform-use-cases__grid {
  align-items: stretch;
}

html[lang]:not([lang="en-US"]):not([lang="en"]) .platform-use-case {
  height: auto;
  min-height: 506px;
}

html[lang]:not([lang="en-US"]):not([lang="en"]) .platform-use-case__copy {
  height: auto;
  min-height: 150px;
  flex-basis: auto;
}

@media screen and (min-width: 1200px) {
  html[lang]:not([lang="en-US"]):not([lang="en"]) .platform-why-card {
    height: auto;
    min-height: 264px;
  }

  html[lang]:not([lang="en-US"]):not([lang="en"]) .platform-use-case__visual {
    height: 356px;
    flex: 0 0 356px;
  }
}

.platform-use-case__visual {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.platform-use-case__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.platform-use-case__copy {
  display: flex;
  height: 150px;
  flex: 0 0 150px;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
}

.platform-use-case__copy h3,
.platform-use-case__copy p {
  width: 100%;
  font-size: 18px;
  line-height: 24px;
}

.platform-use-case__copy h3 {
  font-weight: 600;
}

.platform-use-case__copy p {
  font-weight: 400;
}

.platform-branding {
  display: flex;
  width: 100%;
  min-height: 502px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 96px 20px;
}

.platform-branding__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}

.platform-branding__title img {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.platform-branding__title strong {
  font-size: 38px;
  font-weight: 700;
  line-height: 50px;
  white-space: nowrap;
}

.platform-branding > p {
  color: var(--platform-text-secondary);
  font-size: 26px;
  font-weight: 400;
  line-height: 38px;
  text-align: center;
}

.platform-branding__badge {
  height: 60px;
  margin-top: 28px;
}

@media screen and (max-width: 1499px) {
  .platform-hero__inner {
    width: calc(100% - 80px);
    grid-template-columns: minmax(0, 1fr) minmax(450px, 48.5%);
  }

  .platform-hero__visual {
    width: 100%;
  }

  .platform-metrics {
    grid-template-columns: repeat(4, minmax(180px, 240px));
    column-gap: 20px;
  }

  .platform-metric:not(:last-child)::after {
    right: -10px;
  }
}

@media screen and (min-width: 1200px) {
  .platform-metric {
    display: grid;
    grid-template-rows: 50px 48px;
    align-content: center;
    justify-items: center;
  }

  .platform-metric strong,
  .platform-metric--device img {
    align-self: center;
  }

  html[dir="rtl"] .platform-hero__actions {
    right: 0;
    left: auto;
    align-items: flex-end;
  }

  .platform-tutorial__content {
    padding-block: 26px;
  }

  .platform-why-card {
    height: 228px;
    min-height: 228px;
  }

  .platform-page--android .platform-branding,
  .platform-page--windows .platform-branding {
    padding-block: 94.5px;
  }
}

@media screen and (min-width: 901px) and (max-width: 1199px) {
  .platform-hero {
    min-height: 474px;
  }

  .platform-hero__inner {
    grid-template-columns: minmax(0, 1fr) 450px;
    width: 100%;
    min-height: 474px;
    padding: 120px 40px 60px;
  }

  .platform-hero__copy {
    padding: 0 20px 36px 0;
  }

  .platform-hero__copy h1 {
    font-size: 32px;
    line-height: 42px;
  }

  .platform-hero__copy p {
    min-height: 110px;
    font-size: 20px;
    line-height: 32px;
  }

  .platform-hero__visual {
    width: 450px;
    height: 294px;
  }

  .platform-hero__actions {
    bottom: 60px;
    left: 40px;
  }

  html[dir="rtl"] .platform-hero__actions {
    right: 40px;
    left: auto;
    align-items: flex-end;
  }

  .platform-hero__badge {
    height: 40px;
  }

  .platform-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: 208px;
    padding: 50px 40px;
  }

  .platform-metric > span {
    width: 100%;
  }

  .platform-tutorial {
    padding: 84px 80px 36px;
  }

  .platform-tutorial > .platform-section__header {
    margin-bottom: 0;
  }

  .platform-tutorial__visual {
    width: 456px;
    height: 317px;
    flex-basis: 456px;
  }

  .platform-tutorial__content {
    min-height: 502px;
  }

  .platform-steps {
    width: 420px;
    flex-basis: 420px;
  }

  .platform-step {
    min-height: 0;
  }

  .platform-step__copy > span {
    font-size: 16px;
    line-height: 22px;
  }

  .platform-outline-button {
    width: max-content;
    min-width: 160px;
    height: 48px;
    font-size: 18px;
    line-height: 26px;
  }

  .platform-store-badge--section {
    height: 40px;
  }

  .platform-why,
  .platform-more {
    padding: 40px 80px;
  }

  .platform-why > .platform-section__header h2 {
    font-size: 32px;
    line-height: 42px;
  }

  .platform-why__grid,
  .platform-why-card {
    min-height: 276px;
  }

  .platform-capabilities {
    min-height: 1428px;
    padding: 84px 80px;
  }

  .platform-scenes {
    width: 820px;
  }

  .platform-scene {
    min-height: 267px;
    gap: 40px;
  }

  .platform-scene__visual {
    width: 400px;
    height: 267px;
    flex-basis: 400px;
  }

  .platform-scene__copy {
    flex-basis: 380px;
  }

  .platform-scene__copy p,
  .platform-scene__hint,
  .platform-scene__points li {
    font-size: 16px;
    line-height: 22px;
  }

  .platform-page--ios .platform-more {
    min-height: 972px;
  }

  .platform-branding {
    min-height: 450px;
  }

  .platform-branding__title {
    gap: 20px;
  }

  .platform-branding__title img {
    width: 70px;
    height: 70px;
  }

  .platform-branding__title strong {
    font-size: 32px;
    line-height: 42px;
  }

  .platform-branding > p {
    font-size: 28px;
  }

  .platform-branding__badge {
    height: 40px;
    margin-top: 60px;
  }
}

@media screen and (max-width: 900px) {
  .platform-section__header h2 {
    font-size: 32px;
    line-height: 42px;
  }

  .platform-section__header p {
    font-size: 20px;
    line-height: 28px;
  }

  .platform-hero {
    min-height: 0;
  }

  .platform-hero__inner {
    display: flex;
    width: 100%;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 120px 40px 60px;
  }

  .platform-hero__copy {
    order: 1;
    padding: 0;
    text-align: center;
  }

  .platform-hero__copy h1 {
    margin-bottom: 25px;
    font-size: 32px;
    line-height: 42px;
  }

  .platform-hero__copy p {
    min-height: 0;
    max-width: none;
    font-size: 20px;
    line-height: 28px;
  }

  .platform-hero__visual {
    order: 2;
    width: 450px;
    height: 294px;
    align-self: auto;
  }

  .platform-hero__actions {
    position: static;
    order: 3;
    width: 100%;
    align-items: center;
    justify-content: center;
  }

  .platform-hero__badge {
    height: 40px;
  }

  .platform-secondary-store {
    width: max-content;
    min-width: 0;
    max-width: 100%;
    min-height: 26px;
    gap: 8px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
  }

  .platform-secondary-store__brand {
    width: 50px;
    height: 24px;
    flex-basis: 50px;
  }

  .platform-secondary-store__arrow {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .platform-metrics {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 145px);
    gap: 0;
    height: auto;
    padding: 20px 40px;
  }

  .platform-metric {
    height: 125px;
  }

  .platform-metric:nth-child(2)::after {
    display: none;
  }

  .platform-metric:not(:last-child)::after {
    right: 0;
  }

  .platform-metric strong {
    font-size: 40px;
  }

  .platform-metric > span {
    width: 100%;
    font-size: 16px;
    line-height: 22px;
  }

  .platform-tutorial {
    gap: 40px;
    padding: 60px 20px 20px;
  }

  .platform-tutorial > .platform-section__header {
    margin-bottom: 0;
  }

  .platform-tutorial__content {
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
  }

  .platform-tutorial__visual {
    width: min(630px, 100%);
    height: auto;
    aspect-ratio: 720 / 500;
    flex-basis: auto;
  }

  .platform-steps {
    width: min(630px, 100%);
    flex-basis: auto;
  }

  .platform-step {
    min-height: 0;
  }

  .platform-outline-button {
    width: max-content;
    min-width: 150px;
    height: 46px;
    font-size: 16px;
    line-height: 22px;
  }

  .platform-why {
    gap: 40px;
    padding: 40px;
  }

  .platform-why__grid,
  .platform-more__grid {
    grid-template-columns: 1fr;
  }

  .platform-why-card {
    min-height: 0;
  }

  .platform-why-card__icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .platform-why-card__icon img {
    width: 30px;
    height: 30px;
  }

  .platform-why-card p {
    font-size: 14px;
    line-height: 20px;
  }

  .platform-store-badge--section {
    height: 40px;
  }

  .platform-capabilities {
    gap: 40px;
    padding: 60px 20px;
  }

  .platform-scenes {
    width: min(670px, 100%);
    gap: 40px;
  }

  .platform-scene,
  .platform-scene--reverse {
    min-height: 0;
    flex-direction: column;
    gap: 40px;
  }

  .platform-scene__visual {
    width: min(600px, 100%);
    height: auto;
    aspect-ratio: 3 / 2;
    flex-basis: auto;
  }

  .platform-scene__copy {
    width: 100%;
    flex-basis: auto;
    gap: 16px;
  }

  .platform-scene__copy h3 {
    margin-bottom: 8px;
    font-size: 28px;
    line-height: 38px;
  }

  .platform-scene__copy p,
  .platform-scene__hint,
  .platform-scene__points li {
    font-size: 16px;
    line-height: 20px;
  }

  .platform-more {
    gap: 40px;
    padding: 40px;
  }

  .platform-more-card {
    min-height: 0;
  }

  .platform-branding {
    min-height: 0;
    gap: 14px;
    padding: 40px 20px;
  }

  .platform-page--android .platform-branding,
  .platform-page--windows .platform-branding,
  .platform-page--mac .platform-branding {
    min-height: 0;
  }

  .platform-branding__title {
    gap: 20px;
  }

  .platform-branding__title img {
    width: 70px;
    height: 70px;
  }

  .platform-branding__title strong {
    font-size: 32px;
    line-height: 42px;
  }

  .platform-branding > p {
    font-size: 24px;
    line-height: 32px;
  }

  .platform-branding__badge {
    height: 40px;
    margin-top: 16px;
  }
}

@media screen and (min-width: 481px) and (max-width: 900px) {
  .platform-hero__visual {
    position: relative;
    max-width: 100%;
    height: auto;
    aspect-ratio: 450 / 294;
  }

  .platform-hero__visual img {
    position: absolute;
    inset: 0;
  }

  .platform-tutorial {
    min-height: 1216px;
  }

  .platform-why {
    min-height: 812px;
  }

  .platform-scenes {
    gap: 40px;
  }

  .platform-scene,
  .platform-scene--reverse {
    gap: 36px;
  }

  .platform-more,
  .platform-page--ios .platform-more,
  .platform-page--android .platform-more,
  .platform-page--windows .platform-more,
  .platform-page--mac .platform-more {
    min-height: 1054px;
  }
}

@media screen and (max-width: 480px) {
  .platform-hero {
    min-height: 569px;
  }

  .platform-section__header h2 {
    font-size: 28px;
    line-height: 38px;
  }

  .platform-section__header p {
    font-size: 14px;
    line-height: 20px;
  }

  .platform-hero__inner {
    gap: 20px;
    padding: 80px 15px 40px;
  }

  .platform-hero__copy h1 {
    display: block;
    margin-bottom: 25px;
    font-size: 28px;
    line-height: 38px;
  }

  .platform-hero__copy h1 span::before {
    content: " ";
  }

  .platform-hero__copy p {
    font-size: 14px;
    line-height: 20px;
  }

  .platform-hero__visual {
    order: 3;
    width: min(330px, 100%);
    height: 216px;
    aspect-ratio: 330 / 216;
  }

  .platform-hero__actions {
    order: 2;
    flex-wrap: wrap;
    gap: 10px;
  }

  .platform-hero__badge {
    height: 40px;
  }

  .platform-secondary-store {
    min-height: 26px;
    white-space: normal;
    text-align: center;
  }

  .platform-metrics {
    grid-template-rows: repeat(2, 98px);
    height: 196px;
    width: 100%;
    padding: 0;
  }

  .platform-metric {
    height: 90px;
    gap: 10px;
  }

  .platform-metric:not(:last-child)::after {
    height: 50px;
  }

  .platform-metric strong {
    font-size: 24px;
  }

  .platform-metric > span {
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
  }

  .platform-metric--device img {
    width: 30px;
    height: 30px;
  }

  .platform-tutorial {
    min-height: 1062px;
    padding: 60px 20px 20px;
  }

  .platform-tutorial__visual {
    width: 320px;
    height: 222px;
  }

  .platform-steps {
    width: 320px;
  }

  .platform-step {
    min-height: 0;
    gap: 20px;
    padding: 20px 30px;
  }

  .platform-step__number {
    min-width: 30px;
    font-size: 50px;
  }

  .platform-step__copy strong {
    font-size: 18px;
    line-height: 24px;
  }

  .platform-step__copy > span {
    font-size: 14px;
    line-height: 20px;
  }

  .platform-why {
    min-height: 922px;
    padding: 40px 20px;
  }

  .platform-why-card h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .platform-why-card__icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .platform-why-card__icon img {
    width: 30px;
    height: 30px;
  }

  .platform-store-badge--section {
    height: 40px;
  }

  .platform-why > .platform-store-badge--section {
    height: 40px;
  }

  .platform-capabilities {
    padding: 40px 20px;
  }

  .platform-scenes {
    width: 320px;
  }

  .platform-scene:nth-child(1) {
    min-height: 0;
  }

  .platform-scene:nth-child(2) {
    min-height: 0;
  }

  .platform-scene:nth-child(3) {
    min-height: 0;
  }

  .platform-scene:nth-child(1) .platform-scene__copy {
    min-height: 0;
  }

  .platform-scene:nth-child(2) .platform-scene__copy {
    min-height: 0;
  }

  .platform-scene:nth-child(3) .platform-scene__copy {
    min-height: 0;
  }

  .platform-scene,
  .platform-scene--reverse {
    gap: 20px;
  }

  .platform-scene__visual {
    width: 320px;
    height: 214px;
  }

  .platform-scene__copy {
    gap: 14px;
  }

  .platform-scene__copy h3 {
    margin-bottom: 4px;
    font-size: 20px;
    line-height: 28px;
  }

  .platform-scene__copy p,
  .platform-scene__hint,
  .platform-scene__points li {
    font-size: 14px;
    line-height: 20px;
  }

  .platform-scene__points {
    gap: 14px;
  }

  .platform-scene__points li {
    gap: 10px;
  }

  .platform-scene__point-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .platform-scene__point-icon img {
    width: 20px;
    height: 20px;
  }

  .platform-more {
    padding: 40px 20px;
  }

  /* 这里原先给四个产品页统一压了 min-height:1522px（取自某一页的设计帧高）。
     iOS/Android 内容本就高于该值不受影响，但 mac(1110px)、windows(1170px) 撑不满，
     多出的 400px 左右空白全落在列表与 FAQ 之间。移动端改为由内容撑开——与同断点
     里 .platform-more-card、.platform-branding 已有的 min-height:0 处理保持一致
     （min-height:0 同时用于覆盖非媒体查询里按页面写死的 732/790/884/998px）。 */
  .platform-page--ios .platform-more,
  .platform-page--android .platform-more,
  .platform-page--windows .platform-more,
  .platform-page--mac .platform-more {
    min-height: 0;
  }

  .platform-more > .platform-section__header h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .platform-more > .platform-section__header p {
    font-size: 14px;
    line-height: 20px;
  }

  .platform-more-card h3 {
    font-size: 24px;
    line-height: 32px;
  }

  .platform-tags--advanced {
    flex-direction: column;
  }

  .platform-branding {
    min-height: 0;
    gap: 10px;
    padding: 24px 20px;
  }

  .platform-page--android .platform-branding,
  .platform-page--windows .platform-branding,
  .platform-page--mac .platform-branding,
  .platform-page--android-tv .platform-branding,
  .platform-page--apple-tv .platform-branding {
    min-height: 0;
  }

  .platform-branding__title {
    gap: 10px;
  }

  .platform-branding__title img {
    width: 40px;
    height: 40px;
  }

  .platform-branding__title strong {
    font-size: 20px;
    line-height: 28px;
  }

  .platform-branding > p {
    font-size: 14px;
    line-height: 20px;
  }

  .platform-branding__badge {
    height: 40px;
    margin-top: 10px;
  }
}

@media screen and (max-width: 1199px) {
  .platform-use-cases {
    gap: 56px;
    padding: 64px 40px;
  }

  .platform-use-cases__grid {
    gap: 20px;
  }

  .platform-use-case {
    height: 430px;
  }

  .platform-use-case__copy {
    height: 160px;
    flex-basis: 160px;
    padding: 20px;
  }
}

@media screen and (max-width: 900px) {
  .platform-use-cases {
    padding: 56px 40px;
  }

  .platform-use-cases__grid {
    grid-template-columns: 1fr;
    width: min(100%, 540px);
  }

  .platform-use-case {
    height: auto;
  }

  .platform-use-case__visual {
    aspect-ratio: 400 / 356;
    flex: none;
  }

  .platform-use-case__copy {
    height: auto;
    min-height: 130px;
    flex-basis: auto;
  }
}

@media screen and (max-width: 480px) {
  .platform-use-cases {
    gap: 36px;
    padding: 48px 20px;
  }

  .platform-use-case {
    border-radius: 16px;
  }

  .platform-use-case__copy {
    min-height: 124px;
    padding: 18px;
  }

  .platform-use-case__copy h3,
  .platform-use-case__copy p {
    font-size: 16px;
    line-height: 22px;
  }
}

/* Android TV / Apple TV lower-page sections from the product designs. */
.platform-brand-support {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 84px;
  padding: 80px 40px 30px;
}

.platform-brand-support__card {
  display: flex;
  width: min(100%, 1200px);
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px 50px;
  border: 1px solid transparent;
  border-radius: 50px;
  background: linear-gradient(270deg, #f7f6ff 0%, #fff 100%) padding-box,
    linear-gradient(135deg, #01e3fb 0%, #f05cff 100%) border-box;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}

.platform-brand-support__header {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.platform-brand-support__header h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
}

.platform-brand-support__header p {
  max-width: 900px;
  color: #84828e;
  font-size: 24px;
  line-height: 32px;
}

.platform-brand-support__logos {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 260px));
  justify-content: center;
  gap: 40px;
}

.platform-brand-logo {
  position: relative;
  display: block;
  width: 260px;
  height: 78px;
  overflow: hidden;
}

.platform-brand-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.platform-brand-logo--google-tv img {
  object-fit: contain;
}

.platform-brand-logo--tcl img {
  top: -94.37%;
  left: -11.67%;
  width: 123.33%;
  height: 288.73%;
  object-fit: fill;
}

.platform-download-cta {
  display: inline-flex;
  width: 260px;
  height: 60px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 50px;
  color: #fff;
  background: linear-gradient(90deg, #79a9f0 0%, #a22bf6 100%);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  text-decoration: none;
  transition: filter 180ms ease, transform 180ms ease;
}

.platform-page a.platform-download-cta {
  color: #fff;
}

.platform-download-cta:hover,
.platform-download-cta:focus-visible {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.platform-download-cta:focus-visible {
  outline: 2px solid #493b90;
  outline-offset: 3px;
}

.platform-download-cta img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.platform-section-download {
  display: flex;
  justify-content: center;
}

.platform-specialities {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 84px;
  padding: 84px 40px 36px;
}

.platform-specialities__grid {
  display: grid;
  width: min(100%, 1320px);
  grid-template-columns: repeat(3, minmax(0, 400px));
  justify-content: center;
  gap: 20px;
}

.platform-specialities__grid--apple-tv {
  grid-template-columns: repeat(2, minmax(0, 400px));
}

.platform-speciality-card {
  display: flex;
  min-width: 0;
  height: 320px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 34px 50px;
  border-radius: 20px;
}

.platform-speciality-card--solid {
  background: #f8f7fe;
}

.platform-speciality-card--outline {
  border: 1px dashed #9581f3;
  background: #fff;
}

.platform-speciality-icon {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
}

.platform-icon-layer {
  position: absolute;
  max-width: none;
}

.platform-icon-layer--full {
  inset: 0;
  width: 100%;
  height: 100%;
}

.platform-icon-layer--vertical-small { inset: 51.98% 36.54% 15.23% 12.89%; width: 50.57%; height: 32.79%; }
.platform-icon-layer--vertical-tall { inset: 18.33% 14.47% 3.92% 40%; width: 45.53%; height: 77.75%; }
.platform-icon-layer--vertical-arrow { inset: 22.08% 46.25% 48.2% 18.75%; width: 35%; height: 29.72%; transform: scaleX(-1); }
.platform-icon-layer--flip-right { inset: 18.33% 12.5% 19.17% 66.5%; width: 21%; height: 62.5%; }
.platform-icon-layer--flip-left { inset: 18.33% 61.5% 19.17% 17.5%; width: 21%; height: 62.5%; }
.platform-icon-layer--flip-center { inset: 12.08% 45% 12.92% 50%; width: 5%; height: 75%; }
.platform-icon-layer--slideshow-base { inset: 15.53% 13.33% 15.63% 13.14%; width: 73.53%; height: 68.84%; }
.platform-icon-layer--slideshow-accent { inset: 39.58% 5% 2.92% 55%; width: 40%; height: 57.5%; }
.platform-icon-layer--sharing-accent { inset: 14.17% 9.17% 8.33% 8.33%; width: 82.5%; height: 77.5%; }
.platform-icon-layer--compression { inset: 14.58% 8.75% 9.17% 7.5%; width: 83.75%; height: 76.25%; }
.platform-icon-layer--storage-tv { inset: 14.58% 5.3% 17.85% 11.25%; width: 83.45%; height: 67.57%; }
.platform-icon-layer--storage-left { inset: 53.33% 45% 15.42% 5%; width: 50%; height: 31.25%; }
.platform-icon-layer--storage-center { inset: 25.83% 35% 49.17% 40%; width: 25%; height: 25%; }

.platform-speciality-card__copy {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
}

.platform-speciality-card__copy h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.platform-speciality-card__copy p {
  color: var(--platform-text-secondary);
  font-size: 18px;
  line-height: 24px;
}

.platform-system-support {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 84px;
  padding: 84px 40px;
}

.platform-system-support > h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
  text-align: center;
}

.platform-system-support__grid {
  display: grid;
  width: min(100%, 1320px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 30px;
}

.platform-system-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  border: 1px dashed #9581f3;
  border-radius: 20px;
}

.platform-system-card > h3 {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.platform-system-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.platform-system-icon > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.platform-system-icon--new > img:last-child {
  position: absolute;
  inset: 12.5% 12.5% 54.17% 54.17%;
  width: 33.33%;
  height: 33.33%;
}

.platform-system-card__group,
.platform-system-card__update {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
}

.platform-system-card__group {
  gap: 20px;
}

.platform-system-card h4 {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.platform-system-card__group p,
.platform-system-card__update ul {
  margin: 0;
  padding-left: 20px;
  color: var(--platform-text-secondary);
  font-size: 18px;
  font-weight: 300;
  line-height: 24px;
}

.platform-system-card__update ul {
  list-style: none;
}

.platform-system-card__update li::before {
  content: "- ";
}

.platform-branding__download {
  margin-top: 28px;
}

@media screen and (max-width: 1199px) {
  .platform-brand-support,
  .platform-specialities,
  .platform-system-support {
    gap: 56px;
    padding-inline: 40px;
  }

  .platform-brand-support__card {
    padding: 36px 40px;
  }

  .platform-brand-support__logos {
    grid-template-columns: repeat(3, minmax(0, 220px));
    gap: 24px;
  }

  .platform-brand-logo {
    width: 220px;
    height: 66px;
  }

  .platform-specialities__grid,
  .platform-specialities__grid--apple-tv {
    grid-template-columns: repeat(2, minmax(0, 400px));
  }

  .platform-speciality-card {
    height: 300px;
    padding: 32px 36px;
  }
}

@media screen and (max-width: 900px) {
  .platform-brand-support {
    padding-block: 56px 30px;
  }

  .platform-brand-support__card {
    gap: 32px;
    padding: 32px;
    border-radius: 32px;
  }

  .platform-brand-support__header h2,
  .platform-system-support > h2 {
    font-size: 26px;
    line-height: 36px;
  }

  .platform-brand-support__header p {
    font-size: 18px;
    line-height: 26px;
  }

  .platform-brand-support__logos {
    grid-template-columns: repeat(2, minmax(0, 220px));
  }

  .platform-specialities {
    padding-block: 64px 32px;
  }

  .platform-specialities__grid,
  .platform-specialities__grid--apple-tv {
    width: min(100%, 540px);
    grid-template-columns: 1fr;
  }

  .platform-speciality-card {
    height: auto;
    min-height: 250px;
  }

  .platform-speciality-icon {
    width: 70px;
    height: 70px;
    flex-basis: 70px;
  }

  .platform-system-support {
    padding-block: 56px;
  }

  .platform-system-support__grid {
    width: min(100%, 600px);
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .platform-download-cta--large {
    width: 260px;
    height: 60px;
    padding: 16px 32px;
  }

  .platform-branding__download {
    margin-top: 16px;
  }
}

@media screen and (max-width: 480px) {
  .platform-brand-support,
  .platform-specialities,
  .platform-system-support {
    gap: 36px;
    padding-inline: 20px;
  }

  .platform-brand-support {
    padding-block: 48px 24px;
  }

  .platform-brand-support__card {
    gap: 24px;
    padding: 28px 20px;
    border-radius: 24px;
  }

  .platform-brand-support__header h2,
  .platform-system-support > h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .platform-brand-support__header p {
    font-size: 16px;
    line-height: 22px;
  }

  .platform-brand-support__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .platform-brand-logo {
    width: 100%;
    height: 52px;
  }

  .platform-download-cta,
  .platform-download-cta--large {
    width: 220px;
    height: 52px;
    padding: 12px 24px;
    font-size: 18px;
    line-height: 24px;
  }

  .platform-specialities {
    padding-block: 48px 28px;
  }

  .platform-speciality-card {
    min-height: 220px;
    padding: 28px 24px;
    border-radius: 16px;
  }

  .platform-speciality-icon {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }

  .platform-speciality-card__copy h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .platform-speciality-card__copy p,
  .platform-system-card h4,
  .platform-system-card__group p,
  .platform-system-card__update ul {
    font-size: 16px;
    line-height: 22px;
  }

  .platform-system-support {
    padding-block: 48px;
  }

  .platform-system-card {
    padding: 18px;
    border-radius: 16px;
  }

  .platform-branding__download {
    margin-top: 10px;
  }
}

.platform-page > .faq-container {
  width: 100%;
  padding: 84px 0;
  background: #fff;
}

.platform-page > .faq-container > .container {
  width: min(1200px, calc(100% - 80px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.platform-page .faq-title {
  margin: 0 0 84px;
  color: var(--platform-text);
  font-size: 38px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
}

.platform-page .faq-item {
  margin: 0 0 20px;
  padding: 0;
}

.platform-page .faq-item:last-child {
  margin-bottom: 0;
}

.platform-page .faq-question {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 40px;
  border-radius: 24px;
  background: #fbfafe;
  cursor: pointer;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
}

.platform-page .faq-question:focus-visible {
  outline: 2px solid var(--platform-purple);
  outline-offset: 3px;
}

.platform-page .faq-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  transition: transform 0.3s ease;
}

.platform-page .faq-answer {
  height: 0;
  padding: 0 40px;
  overflow: hidden;
  border-radius: 24px;
  opacity: 0;
  color: var(--platform-text);
  background: #fbfafe;
  font-size: 18px;
  line-height: 24px;
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 0.3s ease, transform 0.3s ease, padding 0.3s ease;
}

.platform-page .faq-item.active .faq-question {
  font-weight: 700;
}

.platform-page .faq-item.active .faq-answer {
  height: auto;
  margin-top: 20px;
  padding: 20px 40px;
  opacity: 1;
  transform: scaleY(1);
}

.platform-page .faq-item.active .faq-icon {
  transform: rotate(180deg);
}

@media screen and (max-width: 1199px) {
  .platform-page > .faq-container > .container {
    width: min(864px, calc(100% - 160px));
  }

  .platform-page .faq-title {
    margin-bottom: 60px;
    font-size: 34px;
    line-height: 48px;
  }
}

@media screen and (max-width: 768px) {
  .platform-page > .faq-container {
    padding: 60px 0;
  }

  .platform-page > .faq-container > .container {
    width: calc(100% - 80px);
  }

  .platform-page .faq-title {
    margin-bottom: 40px;
    font-size: 28px;
    line-height: 38px;
  }

  .platform-page .faq-question {
    min-height: 60px;
    padding: 20px;
    border-radius: 20px;
    font-size: 16px;
    line-height: 22px;
  }

  .platform-page .faq-icon {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
  }

  .platform-page .faq-answer {
    padding-right: 20px;
    padding-left: 20px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 20px;
  }

  .platform-page .faq-item.active .faq-answer {
    margin-top: 12px;
    padding: 20px;
  }
}

@media screen and (max-width: 480px) {
  .platform-page > .faq-container > .container {
    width: calc(100% - 40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-page *,
  .platform-page *::before,
  .platform-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}