/* Duolingo English Test materials pages.
 *
 * The one stylesheet every page under tests/det/ loads. It is written by hand,
 * not generated: scripts/det_common.py and scripts/det_render.py emit the class
 * names used here. It follows the IELTS sheet (assets/ielts/ielts.css), with
 * which the section shares its design system: the header, sidebar, author box,
 * floating button and footer are the same; the hero and the content blocks
 * take the DET design's own sizes. No utility framework, no runtime: the pages
 * render the same with JavaScript off.
 *
 * Breakpoints follow the design: the header collapses into a menu below
 * 1060px, and the sidebar gives way to a row of section chips below 760px.
 */

@font-face {
  font-family: 'ProductSans';
  src: url('../fonts/Product Sans Regular.woff2') format('woff2'),
    url('../fonts/Product Sans Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ProductSans';
  src: url('../fonts/Product Sans Bold.woff2') format('woff2'),
    url('../fonts/Product Sans Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --dt-ink: #1d1d3a;
  --dt-title: #111;
  --dt-prose: #4b4d55;
  --dt-soft: #3f4250;
  --dt-muted: #6e7071;
  --dt-brand: #5e61f6;
  --dt-brand-deep: #634bf6;
  --dt-teal: #0f6f7c;
  --dt-grad: linear-gradient(90deg, #634bf6, #4baef6);
  --dt-surface: #f8f9fb;
  --dt-tint: #f1f5ff;
  --dt-chip: #f2f4f7;
  --dt-chip-hover: #e9ecf3;
  --dt-chip-on: #e4f6f8;
  --dt-line: #e6e9f2;
  --dt-line-card: #d8e2ec;
  --dt-line-soft: #eceef3;
  --dt-rule: #eef0f5;
  --dt-gutter: clamp(16px, 3vw, 32px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.dt {
  margin: 0;
  background: #fff;
  color: var(--dt-ink);
  font-family: 'ProductSans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* The material is ours; copying it wholesale is discouraged. */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.dt input,
.dt select,
.dt textarea {
  -webkit-user-select: text;
  user-select: text;
}

.dt img {
  max-width: 100%;
}

:where(.dt) a {
  color: var(--dt-brand);
  text-decoration: none;
}

/* :where keeps these at element weight, so widgets injected by shared scripts
   (the app banner) keep their own link colours. */
:where(.dt) a:hover {
  color: var(--dt-brand-deep);
  text-decoration: underline;
}

.dt button,
.dt select,
.dt input {
  font-family: inherit;
}

.dt button:focus-visible,
.dt a:focus-visible,
.dt summary:focus-visible,
.dt select:focus-visible,
.dt input:focus-visible {
  outline: 2px solid var(--dt-brand);
  outline-offset: 2px;
}

/* index.js swaps the Log In link for the avatar of a signed-in visitor. */
.dt .hidden {
  display: none !important;
}

.dt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   header
   -------------------------------------------------------------------------- */

.dt-hdr {
  position: relative;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--dt-rule);
}

.dt-hdr__bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px var(--dt-gutter);
}

.dt-logo {
  display: block;
  flex: none;
}

.dt-logo img {
  display: block;
  height: 40px;
  width: auto;
}

/* The test chooser: the same pill as the language switch, with the green dot
   of the active test. The page script sends a change to that test's pages. */
.dt-test {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--dt-chip);
  border-radius: 999px;
  font-size: 14px;
  color: var(--dt-ink);
  white-space: nowrap;
  cursor: pointer;
}

.dt-test:hover {
  background: var(--dt-chip-hover);
}

.dt-test select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--dt-ink);
  padding: 0 22px 0 0;
  cursor: pointer;
}

.dt-test .dt-caret {
  flex: none;
  margin-left: -22px;
  pointer-events: none;
}

.dt-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #3cbf3c;
}

.dt-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--dt-chip);
  border-radius: 999px;
  font-size: 14px;
  color: var(--dt-ink);
  cursor: pointer;
}

.dt-lang:hover {
  background: var(--dt-chip-hover);
}

.dt-lang svg {
  flex: none;
}

.dt-lang select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--dt-ink);
  padding: 0 22px 0 2px;
  cursor: pointer;
  outline-offset: 4px;
}

.dt-lang .dt-caret {
  margin-left: -22px;
  pointer-events: none;
}

.dt-tabs {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 1.6vw, 22px);
  font-size: 16px;
  font-weight: 700;
}

.dt .dt-tab {
  color: var(--dt-muted);
  padding: 6px 10px;
  border-radius: 8px;
}

.dt .dt-tab:hover {
  color: var(--dt-title);
  text-decoration: none;
}

.dt .dt-tab.is-active {
  color: var(--dt-title);
  background: var(--dt-chip-on);
}

.dt .dt-login {
  flex: none;
  background: var(--dt-grad);
  color: #fff;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 12px;
  white-space: nowrap;
}

.dt .dt-login:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.05);
}

.dt-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: #60a5fa;
  object-fit: cover;
}

/* The menu is a <details>, so it opens without JavaScript. Its button sits in
   the header bar; the panel drops below the bar and pushes the page down. */
.dt-mnav {
  display: none;
}

.dt-burger {
  position: absolute;
  top: 18px;
  right: var(--dt-gutter);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--dt-chip);
  color: var(--dt-ink);
  cursor: pointer;
  list-style: none;
}

.dt-burger::-webkit-details-marker {
  display: none;
}

.dt-burger::marker {
  content: '';
}

.dt-burger .dt-i-close,
.dt-mnav[open] .dt-burger .dt-i-open {
  display: none;
}

.dt-mnav[open] .dt-burger .dt-i-close {
  display: block;
}

.dt-mnav__panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 20px;
  border-top: 1px solid var(--dt-rule);
  font-size: 17px;
}

.dt .dt-mnav__link {
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--dt-ink);
}

.dt .dt-mnav__link.is-active {
  background: var(--dt-tint);
  color: var(--dt-brand);
  font-weight: 700;
}

.dt-mnav__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
}

.dt .dt-mnav__chip {
  background: var(--dt-chip);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--dt-ink);
}

.dt .dt-mnav__chip.is-active {
  background: var(--dt-chip-on);
}

.dt-mnav__lang {
  padding: 4px 0 8px;
}

.dt-mnav__lang .dt-lang {
  padding: 10px 16px;
}

.dt .dt-mnav__login {
  display: block;
  text-align: center;
  padding: 14px;
}

@media (max-width: 1059.98px) {
  .dt-hdr__full {
    display: none !important;
  }

  /* The design keeps the 44px menu button in the bar, so the bar keeps its
     height when the button is taken out of the flow. */
  .dt-hdr__bar {
    min-height: 80px;
    padding-right: calc(var(--dt-gutter) + 60px);
  }

  .dt-test {
    padding: 6px 12px;
    font-size: 13px;
  }

  .dt-test select {
    font-size: 13px;
  }

  .dt-mnav {
    display: block;
  }
}

@media (max-width: 759.98px) {
  .dt-logo img {
    height: 32px;
  }
}

/* --------------------------------------------------------------------------
   page frame: sidebar + main column
   -------------------------------------------------------------------------- */

.dt-wrap {
  /* content-box, as in the design: 1280px of content inside the gutters */
  box-sizing: content-box;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px var(--dt-gutter) 96px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  min-width: 0;
}

/* A sticky column taller than the window pins its top and puts everything
   below the fold out of reach: the course card could not be scrolled to and
   the lower menu entries looked frozen. Capping it to the viewport lets it
   scroll on its own when it does not fit, and changes nothing when it does,
   so the fully-open sidebar the design asks for is kept. */
.dt-side {
  flex: none;
  width: 230px;
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.dt-side__nav {
  background: var(--dt-surface);
  border-radius: 20px;
  padding: 20px 16px;
  font-size: 16px;
}

.dt-side__list,
.dt-side__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dt-side__list {
  gap: 4px;
}

.dt .dt-side__link {
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--dt-ink);
}

.dt .dt-side__link:hover {
  background: #fff;
  text-decoration: none;
}

.dt .dt-side__link.is-active {
  background: #fff;
  font-weight: 700;
  color: var(--dt-brand);
  box-shadow: 0 1px 4px rgba(29, 29, 58, 0.06);
}

.dt-side__sub {
  gap: 2px;
  padding: 2px 0 6px 14px;
  margin: 0 0 0 14px;
  border-left: 2px solid #e3e7f3;
}

.dt .dt-side__sub a {
  display: block;
  padding: 7px 12px;
  font-size: 14.5px;
  color: var(--dt-prose);
}

.dt .dt-side__sub a:hover,
.dt .dt-side__sub a.light-blue {
  color: var(--dt-brand);
  text-decoration: none;
}

.dt-premium {
  border-radius: 20px;
  background: linear-gradient(135deg, #f3eeff, #eaf3ff);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dt-premium__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  color: var(--dt-brand-deep);
}

.dt-premium__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--dt-soft);
}

.dt-premium__text b {
  color: var(--dt-ink);
}

.dt .dt-btn {
  display: block;
  background: var(--dt-grad);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 11px;
  border-radius: 10px;
  text-align: center;
}

.dt .dt-btn:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.05);
}

.dt-main {
  flex: 1 1 300px;
  min-width: 0;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  overflow-wrap: break-word;
}

/* Phone-only pieces: the section chips and the in-column premium card. */
.dt-chips,
.dt-premium--inline {
  display: none;
}

@media (max-width: 759.98px) {
  .dt-wrap {
    display: block;
    box-sizing: border-box;
    padding: 16px 16px 96px;
  }

  .dt-side {
    display: none;
  }

  .dt-main {
    gap: 40px;
  }

  .dt-premium--inline {
    display: flex;
    padding: 18px 20px;
  }

  .dt-chips {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0 -16px -16px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--dt-rule);
  }

  .dt-chips::-webkit-scrollbar {
    display: none;
  }

  .dt .dt-chips a {
    flex: none;
    background: var(--dt-chip);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dt-ink);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   hero
   -------------------------------------------------------------------------- */

.dt-hero {
  border-radius: 24px;
  background: linear-gradient(110deg, #e9f9fb 0%, #f1f5ff 60%, #f4f0ff 100%);
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dt-eyebrow {
  margin: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--dt-teal);
}

.dt-h1 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.4px;
  font-weight: 700;
  color: var(--dt-title);
  text-wrap: balance;
}

.dt-lead {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--dt-soft);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   sections and text blocks
   -------------------------------------------------------------------------- */

.dt-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.dt-sec {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-margin-top: 72px;
  min-width: 0;
}

.dt-h2 {
  margin: 0;
  font-size: clamp(21px, 1.8vw, 24px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--dt-title);
}

.dt-p,
.dt-tx {
  margin: 0;
  line-height: 1.65;
  color: var(--dt-prose);
}

.dt-p {
  margin-bottom: 16px;
}

/* the paragraph that opens a samples page or section */
.dt-p--lead {
  margin-bottom: 24px;
}

.dt-p--tight {
  margin-bottom: 12px;
}

.dt .dt-link {
  color: #5a68f5;
  text-decoration: underline;
}

/* bold text is ink wherever it sits: prose, lists, tables, cards, tasks */
.dt-main strong,
.dt-main b {
  color: var(--dt-ink);
}

.dt-ok {
  color: #16a34a;
  font-weight: 700;
}

.dt-bad {
  color: #dc2626;
  font-weight: 700;
}

.dt-brand {
  color: var(--dt-brand);
}

.dt-note,
.dt-warn {
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 24px;
}

.dt-note {
  background: var(--dt-tint);
}

.dt-list {
  margin: 0 0 24px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dt-prose);
}

.dt-list--tight {
  margin-bottom: 16px;
}

ul.dt-list {
  list-style: disc;
}

ol.dt-list {
  list-style: decimal;
}

/* tables: bordered and rounded; a wide one scrolls inside its frame */
.dt-table {
  overflow-x: auto;
  margin-bottom: 24px;
}

.dt-table__frame {
  border: 1px solid var(--dt-line);
  border-radius: 20px;
  overflow-x: auto;
}

.dt-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.dt-table th {
  text-align: left;
  padding: 13px 16px;
  background: #f6f8fd;
  font-weight: 700;
  color: var(--dt-ink);
  vertical-align: bottom;
}

.dt-table td {
  padding: 13px 16px;
  border-top: 1px solid var(--dt-line-soft);
  color: var(--dt-soft);
  vertical-align: top;
}

/* worked example */
.dt-example {
  border-radius: 20px;
  background: #f8f8f8;
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.dt-example__title {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--dt-brand);
}

/* link cards, FAQ cards */
.dt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.dt-faq {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.dt-card {
  border-radius: 20px;
  border: 1px solid var(--dt-line-card);
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dt .dt-card__link {
  color: var(--dt-teal);
  font-weight: 700;
  text-decoration: underline;
}

.dt-card__title {
  margin: 0;
  font-size: 18.5px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--dt-teal);
}

.dt-card__text {
  margin: 8px 0 0;
  line-height: 1.65;
  color: var(--dt-prose);
}

.dt-faq__q {
  margin: 0 0 8px;
  font-size: 16.5px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--dt-title);
}

/* fact strip */
.dt-stats {
  border-radius: 22px;
  background: var(--dt-tint);
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 6px;
}

.dt-stat {
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dt-stat__label {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--dt-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dt-stat__value {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dt-title);
}

/* --------------------------------------------------------------------------
   sample tasks
   -------------------------------------------------------------------------- */

.dt-task {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: #f8f8f8;
  border-radius: 20px;
  margin-bottom: 24px;
  min-width: 0;
}

.dt-task__title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dt-brand);
}

.dt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.dt-tag {
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--dt-line-card);
  padding: 4px 12px;
  font-size: 12px;
  color: var(--dt-muted);
}

.dt-instr {
  margin: 0 0 16px;
  font-weight: 700;
  line-height: 1.6;
}

.dt-audio {
  display: block;
  width: 100%;
  max-width: 560px;
}

.dt .dt-photo {
  display: block;
  width: 100%;
  max-width: 420px;
  max-height: 300px;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(29, 29, 58, 0.08);
}

/* Read and Select word tiles */
.dt-words {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.dt-word {
  border-radius: 20px;
  border: 1px solid var(--dt-line-card);
  background: #fff;
  padding: 12px 16px;
  text-align: center;
  font-weight: 700;
}

/* multiple-choice options: real radio buttons, so they work without JS */
.dt-opts {
  /* content-box, as in the design: 640px of options beside the rule */
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 640px;
  padding-left: 20px;
  border-left: 2px solid var(--dt-brand);
  margin-bottom: 8px;
}

.dt-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.4;
  color: var(--dt-soft);
}

.dt-opt:hover {
  background: var(--dt-tint);
}

.dt-opt input {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  accent-color: var(--dt-brand);
}

.dt-opt__text {
  font-size: 16px;
  line-height: 130%;
  color: var(--dt-prose);
  text-align: left;
}

/* a printed question inside an Interactive Speaking card */
.dt-qcard {
  border-radius: 20px;
  border: 1px solid var(--dt-line-card);
  background: #fff;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* answer keys, transcripts and model answers: <details>, open without JS */
.dt-reveal {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dt-reveal details {
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--dt-line);
}

.dt-reveal summary {
  cursor: pointer;
  padding: 13px 18px;
  font-weight: 700;
  font-size: 15px;
  color: var(--dt-brand);
}

.dt-reveal__body {
  padding: 2px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--dt-soft);
}

.dt-box {
  border-radius: 20px;
  border: 1px solid var(--dt-line-card);
  background: #f8fafc;
  padding: 16px;
  font-size: 14.5px;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dt-box--white {
  background: #fff;
}

/* lines inside answer boxes and task cards */
.dt-box__label {
  margin: 0 0 8px;
  font-weight: 700;
  line-height: 1.6;
}

.dt-line {
  margin: 0 0 4px;
  line-height: 1.6;
}

.dt-line--wide {
  margin: 0 0 8px;
  line-height: 1.6;
}

.dt-pl {
  margin: 0;
  line-height: 1.65;
}

.dt-pl--mb {
  margin-bottom: 12px;
}

.dt-ok-line {
  margin: 0;
  color: #16a34a;
  font-weight: 700;
  line-height: 1.65;
}

.dt-muted {
  margin: 0;
  color: var(--dt-muted);
  line-height: 1.65;
}

.dt-muted--mt {
  margin-top: 12px;
}

/* author */
.dt-author {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 22px;
  background: var(--dt-surface);
  padding: 20px 22px;
}

.dt-author__photo {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06), 0 0 0 2px #fff;
}

.dt-author__photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle, #000 62%, rgba(0, 0, 0, 0.72) 78%, transparent 100%);
  mask-image: radial-gradient(circle, #000 62%, rgba(0, 0, 0, 0.72) 78%, transparent 100%);
}

.dt-author__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dt-author__name {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 700;
  color: #1f2937;
}

.dt-author__bio {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #4b5563;
}

/* floating mock-test button. mobile-app-banner.js moves anything whose class
   ends in -cta-sticky to the left while its desktop card is showing. */
.det-cta-sticky {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
}

.dt .det-cta-sticky a {
  display: block;
  background: var(--dt-grad);
  color: #fff;
  font-size: 16px;
  padding: 12px 22px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(99, 75, 246, 0.3);
}

.dt .det-cta-sticky a:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.05);
}

/* On a phone the app banner takes the bottom of the screen; the button
   comes back once it is dismissed. */
body.has-app-banner .det-cta-sticky {
  display: none;
}

/* --------------------------------------------------------------------------
   footer: a static copy of the main site's footer
   -------------------------------------------------------------------------- */

.ts-footer {
  background: #fafafa;
  padding: 56px 0 36px;
  color: #12284a;
  border-top: 1px solid rgba(18, 40, 74, 0.08);
}

.ts-footer__container {
  max-width: 1470px;
  padding: 0 15px;
  margin: 0 auto;
}

.ts-footer__top {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.ts-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.ts-footer__logo {
  display: block;
  width: 140px;
  height: 90px;
  object-fit: contain;
}

.ts-footer__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  font-size: 16px;
  line-height: 1.3;
}

.dt .ts-footer__lang {
  color: #183b63;
  font-weight: 700;
}

.dt .ts-footer__lang:hover {
  color: #183b63;
  text-decoration: underline;
}

.dt .ts-footer__lang.is-active:hover {
  text-decoration: none;
}

.ts-footer__desc {
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(18, 40, 74, 0.78);
}

.ts-footer__desc p {
  margin: 0;
}

.ts-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.dt .ts-footer__legal a,
.dt .ts-footer__mail {
  color: #183b63;
  font-size: 16px;
  line-height: 1.4;
}

.dt .ts-footer__legal a:hover,
.dt .ts-footer__mail:hover {
  color: #183b63;
  text-decoration: underline;
}

.ts-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.ts-footer__social a {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.ts-footer__social a:hover {
  opacity: 0.72;
}

.ts-footer__social img {
  display: block;
  width: 24px;
  height: 24px;
}

.ts-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.ts-footer__badges a {
  display: inline-flex;
  align-items: center;
}

.ts-footer__badges img {
  display: block;
  height: 48px;
  width: auto;
}

.ts-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.ts-footer__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.ts-footer__title {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  color: #12284a;
}

.ts-footer__links {
  display: grid;
  gap: 14px;
}

.dt .ts-footer__links a {
  color: #183b63;
  font-size: 18px;
  line-height: 1.35;
}

.dt .ts-footer__links a:hover {
  color: #183b63;
  text-decoration: underline;
}

.ts-footer__bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(18, 40, 74, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(18, 40, 74, 0.62);
  font-size: 14px;
  line-height: 1.5;
}

.ts-footer__bottom p {
  margin: 0;
}

@media (max-width: 1100px) {
  .ts-footer__top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ts-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
}

@media (max-width: 700px) {
  .ts-footer {
    padding: 40px 0 28px;
  }

  .ts-footer__brand {
    gap: 16px;
  }

  .ts-footer__legal {
    gap: 8px 16px;
  }

  .ts-footer__title {
    font-size: 22px;
  }

  .dt .ts-footer__links a {
    font-size: 16px;
  }

  .ts-footer__bottom {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .ts-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }

  .ts-footer__badges {
    gap: 10px;
  }

  .ts-footer__badges img {
    width: auto;
    max-width: 146px;
    height: auto;
  }
}

/* Hover in the sidebar highlights the entry, it does not underline it: the
   generic a:hover underline reads as a change of state rather than a pointer,
   and on the pages whose menu comes from the design import it was the only
   rule that matched. */
.dt .dt-side a:hover,
.dt .dt-side .aside__list a:hover {
  text-decoration: none;
  color: var(--dt-brand);
}

/* Limited-time offer countdown in the premium card, as on TOEIC. */
.dt-count {
  display: flex;
  gap: 6px;
}

.dt-count__cell {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.dt-count__cell b {
  font-size: 18px;
  color: var(--dt-title);
  font-variant-numeric: tabular-nums;
}

.dt-count__cell small {
  font-size: 11px;
  color: var(--dt-muted);
}