/* QTES additions on top of base.css. Values follow the base scale (rem, card radius 11px, card shadow). */

/* Mono numbers keep the mono font's own spacing */
.page-template-template-how-to-writer-top .how-to-article-number { letter-spacing: 0; }

/* FAQ: the row opens on hover like the How To rows, and shows text instead of a picture */
.page-template-template-how-to-writer-top .how-to-article-banner-link .qtes-answer {
  color: rgb(34, 34, 34);
  display: grid;
  font-size: var(--how-to-body-text);
  gap: 0.6em;
  line-height: 1.6;
  max-width: 41rem;
  padding: 0.3rem 1rem 1.6rem 3.3rem;
}
.page-template-template-how-to-writer-top .how-to-article-banner-link .qtes-answer p { font-size: inherit; line-height: inherit; margin: 0; }
@media (max-width: 767px) {
  .page-template-template-how-to-writer-top .how-to-article-banner-link .qtes-answer { padding: 0 1rem 1rem; }
}

/* Screenshots inside the macOS frame get the same corners as the videos there */
@media (min-width: 512px) { .teasers .desktop img { border-radius: 13px; } }

/* Login: text and password fields look like the newsletter email field */
.newsletter__set input[type="text"], .newsletter__set input[type="password"] {
  background: transparent;
  border-radius: 100px;
  flex: 1 1 0%;
  font-size: max(16px, 1em);
  margin-right: 0.45em;
  min-width: 3em;
  padding: 0 0 0 var(--input-padding);
}
.newsletter__set input[type="text"]:focus, .newsletter__set input[type="password"]:focus { outline: none; }
.newsletter__set.qtes-login__user input { min-height: 2.95em; }

/* Subscribe: our own icons in the slots of the platform icons */
.page-template-template-account-checkout-paywall .paywall__ace .paywall__feature-label--notes::before { background-image: url("/img/icons/notes.svg"); height: 0.9rem; width: 0.9rem; }
.page-template-template-account-checkout-paywall .paywall__ace .paywall__feature-label--rules::before { background-image: url("/img/icons/rules.svg"); height: 0.9rem; width: 0.9rem; }
.page-template-template-account-checkout-paywall .paywall__ace .paywall__feature-label--letter::before { background-image: url("/img/icons/letter.svg"); height: 0.9rem; width: 0.9rem; }

/* FAQ article: our <video> sits where ia.net has the YouTube iframe, same box */
.video video { border: none; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; background: #000; object-fit: cover; }

/* FAQ: "Get in Contact" is longer than ia.net's "Start Course"; the button grows to fit its text */
.page-template-template-how-to-writer-top .blurb a.action { box-sizing: content-box; min-width: max-content; width: fit-content; }