/* Light surfaces, graphite typography and the original Moises turquoise. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #f4f7f8;
  --text: #17282e;
  --muted: #596970;
  --cyan: #00c9d7;
  --accent: #007c87;
  --line: #dce4e7;
}

::selection { background: #b8f0f1; color: #102c32; }
.header {
  background: #ffffff;
  border-bottom-color: var(--line);
  backdrop-filter: none;
}
.brand img, .footer-brand img { filter: brightness(0); }
.button-primary { color: #073137; }
.button-primary:hover { background: #41d8e1; }
.button-white { background: #19343c; color: #ffffff; }
.button-white:hover { background: #2b4f59; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline-color: var(--accent);
}

.hero-frame {
  background: #18262b;
  border-color: #dfe8e9;
  color: #ffffff;
}
.hero-shade {
  background: linear-gradient(90deg,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.48) 49%,
    rgba(0,0,0,.12) 100%);
}
.hero-copy p { color: #e2e8e9; }
.feature-copy {
  background: var(--panel);
  border-color: var(--line);
}
.feature-media { background: #e8eff1; border-color: var(--line); }
.dot:before { background: #89999f; }
.dot.active:before { background: var(--accent); }
.device-frame { border: 1px solid #d7e3e6; }

.mixer-section:before {
  content: none;
}
.mixer {
  background: #ffffff;
  border-color: #cfdfe2;
  box-shadow: none;
}
.wave-row { background: #ffffff; border-color: var(--line); }
.play-button { background: #19343c; color: #ffffff; }
.play-button:hover { background: var(--accent); }
.audio-time, .track-name { color: #586c74; }
.track { background: #f2f6f7; border-color: #e3ebed; }
.track-actions button { background: #dbe5e8; color: #334e59; }
.track-actions button:hover { background: #c6dade; }
.track-actions button[aria-pressed=true] { background: var(--accent); color: #ffffff; }
.instrument { color: #375763; }
.track input {
  background: linear-gradient(to right, var(--accent) var(--volume), #bbcdd2 var(--volume));
}
.track input::-webkit-slider-thumb {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: none;
}
.track input::-moz-range-thumb {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: none;
}
.audience-count {
  background: none;
  color: #24545e;
}

.quote-slides { border-color: #dae3e6; background: #18262b; color: #ffffff; }
.quote-shade {
  background: linear-gradient(90deg, #000e, #0009 38%, transparent 72%);
}
.quote-role { color: #dee4e5; }
.quote-carousel .dot:before { background: #ffffff80; }
.quote-carousel .dot.active:before { background: #ffffff; }
.carousel-arrows button {
  color: #213f49;
  background: #ffffff;
  border-color: #d6e2e5;
  box-shadow: none;
  backdrop-filter: none;
}
.carousel-arrows button:hover { background: #dff3f3; }
.award-copy { background: #173439; color: #ffffff; border: 1px solid #dce9ea; }
.award-background { opacity: 1; }
.award-badge { filter: none; opacity: 1; }
.award-photo { border: 1px solid #dce4e7; }

.socials a { color: #62737b; }
.socials a:hover { color: var(--accent); }
.creator-card { background: #18262b; border-color: #dce5e8; color: #ffffff; }
.creator-card:after {
  inset: 40% 0 0;
  background: linear-gradient(0deg, #000e 0%, #0009 30%, transparent 82%);
}
.watch {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #1b333c;
}
.creator-card:hover .watch { background: #ffffff; }
.creator-caption > span { color: #dee4e5; }

.faq-item { border-bottom-color: var(--line); }
.faq-question { color: var(--text); }
.faq-question:hover { color: var(--accent); }
.faq-plus:before, .faq-plus:after { background: #344f59; }
.faq-answer a { color: #006f7b; }
.footer { background: var(--panel); border-top-color: var(--line); }
.footer-brand > p, .footer h2 { color: var(--text); }
.footer-brand > span, .footer li, .locale { color: #596c75; }
.footer li a:hover { color: #006f7b; }
.footer-bottom { border-top-color: #dce5e8; }
.footer-bottom p { color: #61737b; }

.video-dialog { background: #ffffff; color: var(--text); border-color: #d5e0e4; }
.video-dialog::backdrop { background: #102a3699; }
.dialog-top p { color: var(--text); }
.dialog-close { background: #edf2f4; color: #254551; }
.dialog-close:hover { background: #dce8ec; }
.video-fallback a { color: #006f7b; }

@media (min-width: 768px) and (max-width: 1100px) {
  .hero-shade {
    background: linear-gradient(90deg, #000c 0%, #0009 65%, #0005 100%);
  }
}

@media (max-width: 767px) {
  .hero-shade {
    background: linear-gradient(0deg,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.72) 45%,
      rgba(0,0,0,.12) 100%);
  }
  .quote-shade {
    background: linear-gradient(0deg, #000f, #0009 55%, #0001);
  }
}