/* ==========================================================================
   Product page design layer
   Shared by the four product pages: the full-height hero with the homepage
   skyline and an animated product demo, the three value cards, the "How it
   works" loop, and the component vocabulary the demos are built from.
   Demo state is driven by assets/js/product-demo.js:
     - [data-scene].is-current / [data-when].is-current  what the current
       scene shows (both take a space-separated list of scene names)
     - [data-nav].is-active          sidebar item for the current scene
     - [data-on].is-on               steps the timeline has reached
     - [data-cursor].is-pressed      the element the fake cursor just clicked
   Page-specific demo components live in assets/css/demos/<page>.css.
   The mock window scales with the panel (container query units), so the
   composition stays identical at every size.
   ========================================================================== */

@property --td-score {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

/* ------------------------------------------------------------- layout ---- */

/* Beats the product pages' shared section padding. The hero is a screen tall
   plus --td-overhang, so the demo panel runs just past the fold as a cue to
   keep scrolling. */
body[data-page] section.demo-hero {
  --td-overhang: clamp(2rem, 5vh, 3.6rem);
  display: grid;
  min-height: calc(100svh - 4.4rem + var(--td-overhang));
  padding: clamp(3.2rem, 10vh, 6rem) 0 clamp(1.2rem, 3vh, 2rem);
  position: relative;
  /* Like the homepage hero: keeps the wide, low skyline inside the section. */
  overflow: clip;
}

.demo-hero__shell {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 3.5vh, 2.2rem);
}

.demo-hero__intro {
  position: relative;
}

/* The homepage skyline at the homepage's exact spot on the page. The homepage
   hero is a full 100svh below the header, so the skyline's bottom edge sits one
   header height below the fold; this hero ends --td-overhang below the fold. */
.hero__skyline.demo-hero__skyline {
  bottom: calc(var(--td-overhang) - 4.4rem - 1px);
}

.demo-hero__heading,
.demo-hero__stage {
  position: relative;
  z-index: 1;
}

.demo-hero__stage {
  flex: 1 1 0;
  min-height: 20rem;
  container-type: size;
}

/* The demo is the last beat of the intro sequence, rising in from below. */
html.js [data-hero-sequence] .demo-hero__stage[data-hero-actions] {
  transform: translateY(1.6rem);
  transition:
    opacity 700ms var(--ease-out-quart),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.js [data-hero-sequence].is-actions-visible .demo-hero__stage[data-hero-actions] {
  transform: none;
}

.showcase-panel.hero-demo {
  width: min(100cqw, 100cqh * 3 / 4);
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  container-type: inline-size;
}

/* -------------------------------------------------------------- window ---- */

.mock-window.td-window {
  top: 5%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 92%;
  /* Phones: as large as the fullest scene allows (the quiz and the handoff
     fill ~97% of the tall panel at this size). */
  --td-font-scale: 2.9;
  font-size: calc(var(--td-font-scale) * 1cqw);
}

.td-app {
  position: relative;
  display: grid;
  flex: 1;
  min-height: 0;
}

.td-nav {
  display: none;
}

.td-scenes {
  position: relative;
  min-height: 0;
}

.td-scene {
  position: absolute;
  inset: 0;
  padding: 1.4em 1.6em;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.8em);
  transition:
    opacity 480ms var(--ease-out-quart),
    transform 480ms var(--ease-out-quart),
    visibility 0s linear 480ms;
}

.td-scene.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 120ms, 120ms, 0s;
}

.td-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 1.1em;
}

.td-title {
  margin: 0;
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-size: 1.6em;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.td-sub {
  max-width: none;
  margin: 0.25em 0 0;
  color: var(--color-ink-500);
  font-size: 0.9em;
}

.td-window .qa-block h4 {
  margin-bottom: 0.5em;
}

/* --------------------------------------------------------------- icons ---- */

.td-icon {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
}

.td-icon::before {
  content: "";
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.td-icon--home {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.td-icon--practice {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='3' y='14' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='14' width='4' height='6' rx='1.5'/%3E%3C/svg%3E");
}

.td-icon--progress {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 20v-6M12 20V8M19 20V4'/%3E%3C/svg%3E");
}

.td-icon--calls {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}

.td-icon--quiz {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- scene: plan ---- */

.td-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7em;
  margin-bottom: 1.2em;
}

.td-stats .qa-stat__value {
  font-size: 1.45em;
}

/* Two values stacked in one cell; the second fades in when its step is on. */
.td-swap {
  display: inline-grid;
}

.td-swap > * {
  grid-area: 1 / 1;
  transition:
    opacity 400ms var(--ease-out-quart),
    transform 400ms var(--ease-out-quart);
}

.td-swap__to {
  opacity: 0;
  transform: translateY(0.4em);
}

.td-swap__to.is-on {
  opacity: 1;
  transform: none;
}

.td-swap:has(.td-swap__to.is-on) .td-swap__from {
  opacity: 0;
  transform: translateY(-0.4em);
}

.td-plan-grid {
  display: grid;
  gap: 1.2em;
}

.td-lessons,
.td-skills,
.td-checks,
.td-options {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.td-lesson {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8em;
  padding: 0.65em 0;
  border-bottom: 1px solid oklch(94% 0.006 262);
}

.td-lesson__icon {
  width: 2.2em;
  height: 2.2em;
  border-radius: 0.6em;
  background: color-mix(in oklch, var(--color-accent-600) 12%, white);
  color: var(--color-accent-700);
}

.td-lesson__text b {
  display: block;
  color: var(--color-ink-950);
  font-weight: 600;
}

.td-lesson__text small {
  display: block;
  overflow: hidden;
  color: var(--color-ink-500);
  font-size: 0.85em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-lesson.is-complete .td-lesson__icon {
  background: color-mix(in oklch, var(--color-success) 14%, white);
  color: var(--color-success);
}

.td-lesson__state {
  display: inline-grid;
}

.td-lesson__state > * {
  grid-area: 1 / 1;
  justify-self: end;
  transition:
    opacity 360ms var(--ease-out-quart),
    transform 200ms var(--ease-out-quart);
}

.td-done {
  color: var(--color-success);
  font-size: 0.88em;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
}

.td-done.is-on,
.td-lesson.is-complete .td-done {
  opacity: 1;
}

.td-lesson__state:has(.td-done.is-on) .mock-window__pill {
  opacity: 0;
}

.td-skills li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3em 0.6em;
  padding: 0.4em 0;
  color: var(--color-ink-700);
  font-size: 0.92em;
}

.td-skills b {
  color: var(--color-ink-950);
  font-weight: 700;
}

.td-skills i {
  position: relative;
  grid-column: 1 / -1;
  height: 0.4em;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: oklch(94% 0.008 262);
}

.td-skills i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: color-mix(in oklch, var(--color-accent-600) 55%, white);
  transition: width 1.2s var(--ease-out-quart) 200ms;
}

.td-skills__focus b {
  color: var(--color-accent-700);
}

.td-skills__focus i::after {
  background: var(--color-accent-600);
}

.td-skills i.td-grow.is-on::after {
  width: var(--w-to);
}

/* ---------------------------------------------------------- scene: call ---- */

.td-call-grid {
  display: grid;
  gap: 1.2em;
}

.td-transcript {
  display: grid;
  align-content: start;
  gap: 0.6em;
}

/* Shared "appears when its step is reached" motion. */
.td-bubble,
.td-tip,
.td-quote,
.td-prompt,
.td-options,
.td-explain {
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 420ms var(--ease-out-quart),
    transform 420ms var(--ease-out-quart);
}

.td-bubble.is-on,
.td-tip.is-on,
.td-quote.is-on,
.td-prompt.is-on,
.td-options.is-on,
.td-explain.is-on {
  opacity: 1;
  transform: none;
}

.td-bubble {
  justify-self: start;
  max-width: 86%;
  padding: 0.65em 0.9em;
  border-radius: 0.9em 0.9em 0.9em 0.25em;
  background: oklch(96% 0.008 262);
  color: var(--color-ink-900);
  font-size: 0.95em;
}

.td-bubble--agent {
  justify-self: end;
  border-radius: 0.9em 0.9em 0.25em 0.9em;
  background: color-mix(in oklch, var(--color-accent-600) 13%, white);
}

.td-bubble__who {
  display: block;
  margin-bottom: 0.15em;
  color: var(--color-ink-500);
  font-size: 0.8em;
  font-weight: 600;
}

.td-tip {
  justify-self: stretch;
  padding: 0.6em 0.85em;
  border: 1px solid color-mix(in oklch, var(--color-success) 30%, white);
  border-radius: 0.7em;
  background: color-mix(in oklch, var(--color-success) 9%, white);
  color: var(--color-ink-900);
  font-size: 0.9em;
}

.td-tip b {
  color: var(--color-success);
}

.td-call-side {
  display: none;
  align-content: start;
  gap: 1em;
}

.td-wave {
  display: flex;
  align-items: center;
  gap: 0.22em;
  height: 4.2em;
  padding: 0.6em 0.8em;
  border-radius: 0.7em;
  background: oklch(97.5% 0.004 262);
}

.td-wave i {
  flex: 1;
  height: 18%;
  border-radius: 0.2em;
  background: color-mix(in oklch, var(--color-accent-600) 45%, white);
  transition: height 300ms var(--ease-out-quart);
}

.td-wave.is-on i {
  animation: td-wave 1.1s var(--ease-in-out) infinite alternate;
}

.td-wave i:nth-child(3n) { animation-delay: -0.35s; }
.td-wave i:nth-child(3n + 1) { animation-delay: -0.7s; }
.td-wave i:nth-child(4n) { animation-duration: 0.8s; }
.td-wave i:nth-child(5n) { animation-duration: 1.4s; }

@keyframes td-wave {
  from { height: 16%; }
  to { height: 92%; }
}

.td-checks li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.42em 0;
  border-bottom: 1px solid oklch(94% 0.006 262);
  color: var(--color-ink-500);
  font-size: 0.92em;
  transition: color 300ms var(--ease-out-quart);
}

.td-check {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  border: 1.5px solid oklch(88% 0.01 262);
  border-radius: 50%;
  color: white;
  font-size: 0.85em;
  font-weight: 700;
  transition:
    background 300ms var(--ease-out-quart),
    border-color 300ms var(--ease-out-quart),
    transform 300ms var(--ease-out-quart);
}

.td-check::after {
  content: "\2713";
  opacity: 0;
}

.td-checks li.is-on {
  color: var(--color-ink-900);
}

.td-checks li.is-on .td-check {
  border-color: var(--color-success);
  background: var(--color-success);
  transform: scale(1.08);
}

.td-checks li.is-on .td-check::after {
  opacity: 1;
}

.td-end {
  justify-self: start;
}

/* ------------------------------------------------------- scene: results ---- */

.td-results-grid {
  display: grid;
  gap: 0.8em;
  margin-bottom: 1.2em;
}

.td-score {
  display: flex;
  align-items: center;
  gap: 1em;
}

.td-dial {
  --td-score: 64;
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 4.4em;
  height: 4.4em;
  border-radius: 50%;
  background: conic-gradient(var(--color-accent-600) calc(var(--td-score) * 1%), oklch(92% 0.01 262) 0);
  transition: --td-score 1.6s var(--ease-out-quart);
}

.td-dial.is-on {
  --td-score: 88;
}

.td-dial::before {
  content: "";
  position: absolute;
  inset: 0.45em;
  border-radius: 50%;
  background: white;
}

.td-dial b {
  position: relative;
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-size: 1.35em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  counter-reset: td-score var(--td-score);
}

.td-dial b::after {
  content: counter(td-score);
}

.td-gradeup {
  align-content: center;
}

.td-gradeup__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8em;
  margin: 0.35em 0;
}

.td-grade {
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: oklch(95% 0.006 262);
  color: var(--color-ink-700);
  font-family: var(--font-display);
  font-size: 1.1em;
  font-weight: 700;
}

.td-grade--up {
  background: color-mix(in oklch, var(--color-success) 16%, white);
  color: var(--color-success);
  opacity: 0.25;
  transform: scale(0.85);
  transition:
    opacity 400ms var(--ease-out-quart) 1s,
    transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 1s;
}

.td-grade--up.is-on {
  opacity: 1;
  transform: none;
}

.td-gradeup__track {
  height: 0.4em;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: oklch(93% 0.008 262);
}

.td-gradeup__track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent-600), var(--color-success));
  transition: width 1.1s var(--ease-out-quart);
}

.td-gradeup__track i.is-on {
  width: 100%;
}

/* ---------------------------------------------------------- scene: quiz ---- */

.td-progress {
  width: 8em;
  height: 0.45em;
  margin-top: 0.6em;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: oklch(93% 0.008 262);
}

.td-progress i {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent-600);
}

.td-quote {
  margin: 0 0 0.9em;
  padding: 0.9em 1.1em;
  border-radius: 0.7em;
  background: oklch(97.5% 0.004 262);
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-size: 1.12em;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.td-prompt {
  max-width: none;
  margin: 0 0 0.6em;
  color: var(--color-ink-900);
  font-weight: 600;
}

.td-options {
  gap: 0.5em;
}

.td-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75em;
  padding: 0.6em 0.8em;
  border: 1px solid oklch(91% 0.01 262);
  border-radius: 0.7em;
  background: white;
  color: var(--color-ink-900);
  font-size: 0.95em;
  transition:
    border-color 300ms var(--ease-out-quart),
    background 300ms var(--ease-out-quart),
    opacity 300ms var(--ease-out-quart),
    transform 160ms var(--ease-out-quart);
}

.td-option__key {
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: oklch(95% 0.006 262);
  color: var(--color-ink-700);
  font-weight: 700;
  transition: background 300ms var(--ease-out-quart), color 300ms var(--ease-out-quart);
}

/* Once answered, the right option turns green and the others fade. */
.td-option--right.is-on {
  border-color: var(--color-success);
  background: color-mix(in oklch, var(--color-success) 8%, white);
}

.td-option--right.is-on .td-option__key {
  background: var(--color-success);
  color: white;
}

.td-options:has(.td-option--right.is-on) .td-option:not(.td-option--right) {
  opacity: 0.45;
}

.td-explain {
  margin-top: 0.9em;
}

/* -------------------------------------------------------------- cursor ---- */

.td-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 1.7em;
  height: 1.7em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5v17.2l4.6-4.3 2.9 6.6 3-1.3-2.9-6.5H18z' fill='%23141821' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
  filter: drop-shadow(0 0.2em 0.35em oklch(20% 0.02 262 / 0.3));
  pointer-events: none;
  transform: translate(var(--x, 70%), var(--y, 60%));
  transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1);
}

.td-cursor::after {
  content: "";
  position: absolute;
  top: -0.6em;
  left: -0.6em;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: color-mix(in oklch, var(--color-accent-600) 45%, transparent);
  opacity: 0;
  transform: scale(0.3);
}

.td-cursor.is-clicking::after {
  animation: td-click 520ms var(--ease-out-quart);
}

@keyframes td-click {
  0% { opacity: 1; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.8); }
}

.td-window [data-cursor] {
  transition: transform 160ms var(--ease-out-quart), box-shadow 160ms var(--ease-out-quart);
}

.td-window [data-cursor].is-pressed {
  transform: scale(0.95);
  box-shadow: 0 0 0 0.25em color-mix(in oklch, var(--color-accent-600) 18%, transparent);
}

/* ---------------------------------------------------------------- dock ---- */

.showcase-panel__dock.td-dock {
  justify-content: center;
  width: auto;
  max-width: 94%;
}

.td-sound {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.td-sound[aria-pressed="true"]::before {
  width: 0.6em;
  height: 0.76em;
  border: 0;
  border-inline: 0.2em solid var(--color-ink-950);
}

.td-chapters {
  display: inline-flex;
  gap: 0.15em;
  padding: 0.3em;
  border-radius: var(--radius-pill);
  background: white;
  box-shadow:
    0 10px 26px oklch(30% 0.03 262 / 0.16),
    0 0 0 1px oklch(90% 0.01 262);
}

.td-chapters button {
  position: relative;
  padding: 0.5em 0.95em;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-500);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 240ms var(--ease-out-quart), color 240ms var(--ease-out-quart);
}

.td-chapters button:hover {
  color: var(--color-ink-950);
}

.td-chapters button[aria-current="true"] {
  background: var(--color-ink-950);
  color: white;
}

/* Thin progress line under the active chapter. */
.td-chapters button[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0.9em 0.28em;
  height: 1px;
  background: color-mix(in oklch, white 70%, transparent);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* ------------------------------------------------------ meet sam ---- */

/* The homepage "busywork" cards, restyled for this page: a full screen on
   desktop, videos floating on a soft shadow instead of the lavender cards,
   and more room between the lines of text. */
body[data-page] section.demo-values {
  display: grid;
  align-items: center;
  padding: clamp(4rem, 10vh, 7rem) 0;
}

.demo-values .showcase-shell {
  gap: clamp(2.4rem, 6vh, 4rem);
}

.demo-values .showcase-heading {
  gap: 1.1rem;
}

.demo-values .showcase-lead {
  max-width: 36rem;
  line-height: 1.55;
}

/* On wide screens the lead's last clause gets its own line. */
@media (min-width: 48rem) {
  .showcase-lead__line {
    display: block;
  }
}

.demo-values .automation-grid {
  gap: 2.4rem;
}

.demo-values .automation-card {
  gap: 1.4rem;
}

.demo-values .automation-card__panel {
  padding: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
}

.demo-values .automation-card__screen {
  border-radius: 1.2rem;
  box-shadow:
    0 1.2rem 2.8rem oklch(30% 0.03 262 / 0.1),
    0 0.2rem 0.6rem oklch(30% 0.03 262 / 0.06),
    0 0 0 1px oklch(90% 0.012 262 / 0.8);
}

.demo-values .automation-card__copy {
  line-height: 1.6;
}

@media (min-width: 64rem) {
  body[data-page] section.demo-values {
    min-height: calc(100svh - 4.4rem - 1px);
  }

  .demo-values .automation-grid {
    gap: 2rem;
  }
}

/* Paused by a click on a "How it works" panel (set by product-demo.js), so
   visitors can stop and read a scene. */
[data-product-demo].is-paused,
[data-product-demo].is-paused * {
  animation-play-state: paused !important;
}

/* Set for a single frame by product-demo.js when a flag switches off, so the
   element snaps back to its start state instead of animating in reverse. */
.is-resetting,
.is-resetting *,
.is-resetting::before,
.is-resetting::after,
.is-resetting *::before,
.is-resetting *::after {
  transition: none !important;
}

/* ------------------------------------------------------ how it works ---- */

/* Two columns: the four steps on the left double as chapter buttons for the
   animated loop on the right (timeline "loop" in training-demo.js). */
body[data-page] section.demo-loop {
  padding: clamp(3.2rem, 8vw, 6rem) 0;
}

.demo-loop__shell {
  display: grid;
  gap: clamp(2rem, 5vw, 3.6rem);
  align-items: center;
}

.demo-loop__copy {
  display: grid;
  gap: 1rem;
  align-content: start;
}

/* Body text matches the "Meet Sam" section above. */
.demo-loop__copy > p {
  max-width: 32rem;
  font-size: var(--text-lg);
  line-height: 1.55;
}

.loop-steps {
  display: grid;
  gap: 0.3rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.loop-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  width: 100%;
  padding: 0.85rem 1rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 280ms var(--ease-out-quart),
    border-color 280ms var(--ease-out-quart),
    box-shadow 280ms var(--ease-out-quart);
}

.loop-step:hover {
  background: color-mix(in oklch, var(--color-surface-000) 70%, var(--color-accent-050));
}

.loop-step__index {
  padding-top: 0.3rem;
  color: var(--color-ink-500);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color 280ms var(--ease-out-quart);
}

.loop-step__text {
  display: grid;
  gap: 0.2rem;
}

.loop-step__text b {
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: var(--tracking-mid);
}

.loop-step__text span {
  color: var(--color-ink-500);
  font-size: var(--text-lg);
  line-height: 1.55;
  transition: color 280ms var(--ease-out-quart);
}

.loop-step[aria-current="true"] {
  border-color: var(--color-line);
  background: var(--color-surface-000);
  box-shadow: var(--shadow-soft);
}

.loop-step[aria-current="true"] .loop-step__index {
  color: var(--color-accent-700);
}

.loop-step[aria-current="true"] .loop-step__text span {
  color: var(--color-ink-700);
}

/* Phones and tablets: "How it works" opens the section like the other
   section heroes, centred and at their title size. */
@media (max-width: 63.99rem) {
  #how-it-works .demo-loop__copy > .product-stage__title {
    font-size: clamp(2.08rem, 1.52rem + 2.9vw, 3.4rem);
    line-height: 0.98;
    text-align: center;
  }

  #how-it-works .demo-loop__copy > p {
    margin: 0 auto 0.8rem;
    text-align: center;
  }
}

/* Phones and tablets: the list is stacked above the panel, so it shows only
   the current step; the steps share one grid cell (the tallest sets the
   height, so nothing below jumps) and cross-fade as the demo moves on. */
@media (max-width: 63.99rem) {
  /* pan-y: vertical drags scroll the page; sideways ones are swipes
     (product-demo.js). */
  html.js .loop-steps {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }

  html.js .loop-steps > li {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateX(2.5rem);
    transition:
      opacity 360ms var(--ease-out-quart),
      transform 360ms var(--ease-out-quart),
      visibility 0s 360ms;
  }

  /* Must stay above the current-step rule, which overrides it. */
  html.js .loop-steps > li.is-before {
    transform: translateX(-2.5rem);
  }

  html.js .loop-steps > li:has(> [aria-current="true"]),
  html.js .loop-steps:not(:has([aria-current="true"])) > li:first-child {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 120ms, 120ms, 0s;
  }

  /* Just after a swipe: the hidden cards wait fully off to each side, so the
     thrown one keeps travelling out and the next slides in from the edge
     with no pause (main clips the overflow). */
  html.js .loop-steps.is-swiping > li {
    transform: translateX(115%);
  }

  html.js .loop-steps.is-swiping > li.is-before {
    transform: translateX(-115%);
  }

  html.js .loop-steps.is-swiping > li:has(> [aria-current="true"]) {
    transform: none;
    transition-delay: 0s;
  }

  /* While a finger drags the card it tracks exactly, with no easing. */
  html.js .loop-steps.is-dragging > li {
    transition: none;
  }

  /* Every card is as tall as the tallest, so the box never resizes. */
  html.js .loop-steps > li > .loop-step {
    height: 100%;
    align-items: start;
  }
}

/* The step dots under the demo panel (built by product-demo.js). */
.loop-pager {
  display: flex;
  justify-content: center;
  gap: 0.15rem;
  margin-top: -1.1rem;
}

.loop-pager button {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.loop-pager button::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-200);
  transition:
    width 400ms var(--ease-out-quart),
    background 400ms var(--ease-out-quart);
}

.loop-pager button.is-done::before {
  background: color-mix(in oklch, var(--color-accent-600) 35%, white);
}

.loop-pager button.is-current::before {
  width: 1.4rem;
  background: var(--color-accent-600);
}

.loop-pager button:focus-visible {
  outline: 2px solid var(--color-accent-600);
  outline-offset: -2px;
  border-radius: var(--radius-pill);
}

@media (min-width: 64rem) {
  .loop-pager {
    display: none;
  }
}

/* How far the animation is through the active step. */
.loop-step::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 0;
  left: 1rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-600);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
}

.loop-step[aria-current="true"]::after {
  opacity: 1;
  transform: scaleX(var(--p, 0));
}

/* Pause mark: two small bars in the active step's top-right corner, shown
   while the loop is paused by a click on the panel. */
.loop-step::before {
  content: "";
  position: absolute;
  top: 0.95rem;
  right: 1rem;
  width: 0.55rem;
  height: 0.7rem;
  border-inline: 0.18rem solid var(--color-accent-700);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 200ms var(--ease-out-quart),
    transform 200ms var(--ease-out-quart);
}

.is-paused .loop-step[aria-current="true"]::before {
  opacity: 1;
  transform: none;
}

.showcase-panel.is-pausable {
  cursor: pointer;
}

.showcase-panel.is-pausable:focus-visible {
  outline: 2px solid var(--color-accent-600);
  outline-offset: 4px;
}

/* -------------------------------------------------------- loop panel ---- */

.showcase-panel.loop-panel {
  width: 100%;
  aspect-ratio: 4 / 5;
  container-type: inline-size;
}

.mock-window.td-window.loop-window {
  top: 7%;
  width: 90%;
  --td-font-scale: 3.25;
}

.loop-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 1.1em 1.4em 0;
}

.loop-body .td-scenes {
  flex: 1;
}

.loop-window .td-scene {
  padding: 0 0 1.2em;
}

/* Shared "appears when its step is reached" motion for the loop. */
.loop-line,
.loop-habit,
.loop-lesson__parts li,
.loop-lesson__foot,
.loop-result {
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 420ms var(--ease-out-quart),
    transform 420ms var(--ease-out-quart);
}

.loop-line.is-on,
.loop-habit.is-on,
.loop-lesson__parts li.is-on,
.loop-lesson__foot.is-on,
.loop-result.is-on {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------ listen + diagnose ---- */

.loop-call {
  padding: 1em 1.1em;
  border: 1px solid oklch(92% 0.008 262);
  border-radius: 0.9em;
  background: oklch(98.8% 0.003 262);
}

.loop-call__head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 0.9em;
}

.loop-avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(78% 0.08 60), oklch(58% 0.1 30));
  color: white;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.loop-avatar--sm {
  width: 2.2em;
  height: 2.2em;
  background: color-mix(in oklch, var(--color-accent-600) 16%, white);
  color: var(--color-accent-700);
  font-size: 0.72em;
}

.loop-call__who b {
  display: block;
  color: var(--color-ink-950);
  font-weight: 600;
}

.loop-call__who small {
  display: block;
  color: var(--color-ink-500);
  font-size: 0.85em;
}

.loop-wave {
  position: relative;
  height: 3.6em;
}

.loop-wave__base,
.loop-wave__played {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 0.18em;
}

.loop-wave i {
  flex: 1;
  height: var(--h);
  border-radius: 0.2em;
  background: oklch(90% 0.02 262);
}

.loop-wave__played i {
  background: var(--color-accent-600);
}

.loop-wave__played {
  clip-path: inset(0 100% 0 0);
}

/* Playhead that sweeps the call while Sam listens. */
.loop-wave::after {
  content: "";
  position: absolute;
  top: -0.3em;
  bottom: -0.3em;
  left: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--color-ink-950);
  opacity: 0;
}

[data-scene="listen"] .loop-review .loop-wave__played {
  animation: loop-play 6.2s linear forwards;
}

[data-scene="listen"] .loop-review .loop-wave::after {
  animation: loop-head 6.2s linear forwards;
}

@keyframes loop-play {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes loop-head {
  0% { left: 0; opacity: 1; }
  96% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

[data-scene="diagnose"] .loop-review .loop-wave__played {
  clip-path: none;
}

/* Text that belongs to one step of the shared review layer: stacked in the
   same spot and cross-faded as the step changes. */
.loop-swap {
  display: grid;
}

.loop-swap > [data-when] {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 420ms var(--ease-out-quart),
    visibility 0s linear 420ms;
}

.loop-swap > [data-when].is-current {
  opacity: 1;
  visibility: visible;
  transition-delay: 160ms, 0s;
}

.loop-lines {
  display: grid;
  gap: 0.45em;
  min-height: 4.8em;
  margin-top: 0.9em;
}

.loop-line {
  /* Speaker in its own column so wrapped text stays aligned. */
  display: grid;
  grid-template-columns: 5.4em minmax(0, 1fr);
  max-width: none;
  margin: 0;
  color: var(--color-ink-700);
  font-size: 0.92em;
  line-height: 1.45;
}

.loop-line b {
  color: var(--color-ink-950);
  font-weight: 600;
}

.loop-queue {
  margin-top: 1em;
}

.loop-queue h4 {
  justify-content: space-between;
}

.loop-queue ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loop-queue li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7em;
  padding: 0.45em 0;
  border-bottom: 1px solid oklch(94% 0.006 262);
  color: var(--color-ink-700);
  font-size: 0.92em;
}

.loop-queue .td-swap > * {
  justify-self: end;
}

.loop-queue .td-swap__from {
  color: var(--color-ink-500);
  font-size: 0.9em;
}

.loop-done {
  color: var(--color-success);
  font-size: 0.9em;
  font-weight: 600;
  white-space: nowrap;
}

/* Three labels side by side collide, so the middle one sits on a second row
   with a longer tick. */
.loop-flags {
  position: relative;
  height: 4.2em;
  margin-top: 0.5em;
}

.loop-flag:nth-child(2) {
  top: 2.3em;
}

.loop-flag:nth-child(2)::before {
  height: 7.6em;
}

.loop-flag {
  position: absolute;
  top: 0;
  left: var(--x);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25em 0.6em;
  border-radius: 0.45em;
  background: oklch(95% 0.05 75);
  color: oklch(48% 0.13 60);
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 0.4em);
  transition:
    opacity 380ms var(--ease-out-quart),
    transform 380ms var(--ease-out-quart);
}

.loop-flag time {
  font-weight: 500;
  opacity: 0.75;
}

/* A tick that rises from the label up through the waveform. */
.loop-flag::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1.5px;
  height: 5.3em;
  background: oklch(74% 0.15 62);
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
  transition: transform 420ms var(--ease-out-quart) 80ms;
}

.loop-flag.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.loop-flag.is-on::before {
  transform: translateX(-50%) scaleY(1);
}

.loop-habit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8em;
  margin-top: 1.1em;
  padding: 0.9em 1em;
  border: 1px solid oklch(90% 0.06 75);
  border-radius: 0.9em;
  background: oklch(97.5% 0.025 80);
}

.loop-habit__icon {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: oklch(74% 0.15 62);
  color: white;
  font-weight: 800;
}

.loop-habit__text b {
  display: block;
  color: var(--color-ink-950);
  font-weight: 600;
}

.loop-habit__text small {
  display: block;
  color: var(--color-ink-700);
  font-size: 0.85em;
}

.loop-habit__pill {
  padding: 0.3em 0.7em;
  border: 1px solid oklch(88% 0.06 75);
  border-radius: 0.5em;
  background: white;
  color: oklch(48% 0.13 60);
  font-size: 0.85em;
  font-weight: 700;
  white-space: nowrap;
}

/* ------------------------------------------------------------- build ---- */

.loop-lesson {
  padding: 1.1em 1.2em;
  border: 1px solid oklch(92% 0.008 262);
  border-radius: 0.9em;
  background: white;
  box-shadow: 0 0.6em 1.6em oklch(30% 0.03 262 / 0.06);
}

.loop-lesson__head {
  display: grid;
  gap: 0.2em;
  margin-bottom: 0.9em;
}

.loop-lesson__head b {
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-size: 1.35em;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.loop-lesson__bar {
  height: 0.35em;
  margin-top: 0.6em;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: oklch(93% 0.008 262);
}

.loop-lesson__bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent-600), color-mix(in oklch, var(--color-accent-600) 55%, white));
  transition: width 3.2s var(--ease-out-quart);
}

.loop-lesson__bar i.is-on {
  width: 100%;
}

.loop-lesson__parts {
  display: grid;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loop-lesson__parts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8em;
  padding: 0.65em 0.75em;
  border: 1px solid oklch(93% 0.006 262);
  border-radius: 0.7em;
  background: oklch(98.8% 0.003 262);
}

.loop-lesson__parts .td-icon {
  width: 2.2em;
  height: 2.2em;
  border-radius: 0.6em;
  background: color-mix(in oklch, var(--color-accent-600) 12%, white);
  color: var(--color-accent-700);
}

.loop-lesson__parts b {
  display: block;
  color: var(--color-ink-950);
  font-weight: 600;
}

.loop-lesson__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4em 1em;
  margin-top: 0.9em;
}

.loop-ready {
  color: var(--color-success);
  font-weight: 700;
}

/* ------------------------------------------------------------- coach ---- */

.loop-coach {
  gap: 0.6em;
}

.td-bubble.loop-bubble--sam {
  background: oklch(95.5% 0.025 285);
}

.loop-result {
  display: grid;
  gap: 0.25em;
  margin-top: 1.1em;
}

.loop-result__note {
  color: var(--color-success);
  font-size: 0.9em;
  font-weight: 600;
}

/* Phones: the timestamps drop so the flag labels fit. */
@media (max-width: 47.99rem) {
  .loop-flag time {
    display: none;
  }
}

/* How it works: the panel stays a readable size until there is room for two
   columns. */
@media (min-width: 48rem) {
  .showcase-panel.loop-panel {
    max-width: 40rem;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
  }

  .mock-window.td-window.loop-window {
    --td-font-scale: 2.75;
  }
}

@media (min-width: 64rem) {
  .demo-loop__shell {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .showcase-panel.loop-panel {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loop-step,
  .loop-line,
  .loop-habit,
  .loop-lesson__parts li,
  .loop-lesson__foot,
  .loop-result,
  .loop-flag,
  .loop-flag::before,
  .loop-lesson__bar i {
    transition: none;
  }

  [data-scene] .loop-wave__played {
    animation: none !important;
    clip-path: none;
  }

  .loop-wave::after {
    display: none;
  }
}

/* --------------------------------------------------------- breakpoints ---- */

@media (min-width: 48rem) {
  .showcase-panel.hero-demo {
    width: min(100cqw, 100cqh * 895 / 540);
    aspect-ratio: 895 / 540;
  }

  .mock-window.td-window {
    top: 7%;
    --td-font-scale: 1.3;
  }

  .td-app {
    grid-template-columns: 11em minmax(0, 1fr);
  }

  .td-nav {
    display: grid;
    align-content: start;
    gap: 0.25em;
    padding: 1.2em 0.8em;
    border-right: 1px solid oklch(93% 0.006 262);
    background: oklch(98.5% 0.003 262);
  }

  .td-nav__item {
    display: flex;
    align-items: center;
    gap: 0.65em;
    padding: 0.55em 0.75em;
    border-radius: 0.55em;
    color: var(--color-ink-500);
    font-weight: 500;
    transition: background 300ms var(--ease-out-quart), color 300ms var(--ease-out-quart);
  }

  .td-nav__item.is-active {
    background: white;
    color: var(--color-ink-950);
    box-shadow: 0 1px 2px oklch(30% 0.02 262 / 0.12), 0 0 0 1px oklch(93% 0.006 262);
  }

  .td-scene {
    padding: 1.6em 2.2em;
  }

  .td-plan-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 1.6em;
  }

  .td-call-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 1.6em;
  }

  .td-call-side {
    display: grid;
  }

  .td-results-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  }
}

/* Phones: keep each scene to what fits in a tall, narrow panel. */
@media (max-width: 47.99rem) {
  .td-plan-grid > .qa-block:nth-child(2),
  .td-scene[data-scene="results"] .td-plan-grid > .qa-block--coaching p,
  .td-stats .qa-stat:nth-child(3) {
    display: none;
  }

  .td-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .td-chapters button {
    padding: 0.5em 0.7em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-scene,
  .td-swap > *,
  .td-bubble,
  .td-tip,
  .td-quote,
  .td-prompt,
  .td-options,
  .td-explain,
  .td-cursor,
  .td-dial,
  .td-grade--up,
  .td-gradeup__track i,
  .td-skills i::after {
    transition: none;
  }

  .td-wave.is-on i {
    animation: none;
  }

  .td-wave i {
    height: 50%;
  }

  .td-cursor {
    display: none;
  }
}

/* ------------------------------------------------ compatible with ---- */

/* Shared by the loops that show which phone systems Accutrac works with.
   Answers "will this work with my phone system?": two rows of logos
   drift past in opposite directions, then "and many more", centred in the window.
   Each row holds its logos twice so the -50% scroll loops seamlessly. */
.td-scene.td-compat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8em;
  text-align: center;
}

.td-compat .td-title {
  margin: 0 0 0.4em;
}

.td-marquee {
  flex: none;
  overflow: hidden;
  padding-block: 0.3em 0.9em;
  mask-image: linear-gradient(90deg, transparent, black 16%, black 84%, transparent);
}

.td-providers {
  display: flex;
  gap: 0.7em;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: td-marquee 22s linear infinite;
}

.td-marquee--reverse .td-providers {
  animation-direction: reverse;
}

/* The gap is added back so the duplicated half lines up exactly. */
@keyframes td-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 0.35em));
  }
}

.td-providers li {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  width: 11em;
  height: 5em;
  border: 1px solid oklch(92% 0.008 262);
  border-radius: 0.9em;
  background: white;
  box-shadow: 0 0.5em 1.4em oklch(30% 0.03 262 / 0.05);
  color: var(--color-ink-950);
  font-size: 0.95em;
  font-weight: 600;
  white-space: nowrap;
}

.td-providers img {
  display: block;
  width: auto;
  max-width: 8em;
  height: 1.9em;
}

.td-providers img.td-providers__aws {
  height: 2.2em;
}

.td-providers img.td-providers__five9 {
  height: 2.4em;
}

/* Kept prominent so a provider that isn't pictured still reads as covered. */
.td-compat__more {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.45em;
  max-width: none;
  margin: 0.3em 0 0;
  padding: 0.55em 1.2em;
  border: 1px solid color-mix(in oklch, var(--color-accent-600) 30%, white);
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-accent-600) 8%, white);
  color: var(--color-accent-700);
  font-family: var(--font-display);
  font-size: 1.15em;
  font-weight: 600;
}

.td-compat__more b {
  font-size: 1.2em;
  line-height: 1;
}

.td-marquee,
.td-compat__more {
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 480ms var(--ease-out-quart),
    transform 480ms var(--ease-out-quart);
}

.td-marquee.is-on,
.td-compat__more.is-on {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .td-marquee,
  .td-compat__more {
    transition: none;
  }

  /* Without motion the logos sit still, four to a row. */
  .td-providers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: auto;
    animation: none;
  }

  .td-providers li {
    width: auto;
    height: 4em;
    padding-inline: 0.4em;
    font-size: 0.8em;
    white-space: normal;
  }

  .td-providers img {
    max-width: 85%;
    height: 1.6em;
  }

  .td-marquee {
    mask-image: none;
  }

  .td-marquee__dup {
    display: none !important;
  }
}