/* MiniTui's colors, from Theme.Dark */
:root {
  --mt-accent: #5FA8FF;
  --mt-ink: #10131A;
}
[data-bs-theme="light"] { --bs-link-color: #0B5CAD; --bs-link-color-rgb: 11, 92, 173; }
[data-bs-theme="dark"] { --bs-body-bg: #12151C; --bs-link-color: #5FA8FF; --bs-link-color-rgb: 95, 168, 255; }

.btn-primary { --bs-btn-bg: #0B5CAD; --bs-btn-border-color: #0B5CAD; --bs-btn-hover-bg: #094c8f; --bs-btn-hover-border-color: #094c8f; }
[data-bs-theme="dark"] .btn-primary { --bs-btn-bg: #5FA8FF; --bs-btn-border-color: #5FA8FF; --bs-btn-color: #10131A;
  --bs-btn-hover-bg: #8cc0ff; --bs-btn-hover-border-color: #8cc0ff; --bs-btn-hover-color: #10131A; }

/* The landing page */
.mt-hero { text-align: center; padding: 4rem 1rem 3rem; max-width: 52rem; margin: 0 auto; }
.mt-hero h1 { font-size: clamp(2.5rem, 7vw, 4rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.mt-tagline { font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 600; margin-bottom: 1rem; }
.mt-lede { font-size: 1.05rem; color: var(--bs-secondary-color); margin-bottom: 1.75rem; }
.mt-install code { display: inline-block; font-size: 1rem; padding: 0.6rem 1.1rem; border-radius: 0.5rem;
  background: var(--mt-ink); color: #D4D7DD; border: 1px solid #353B46; }
.mt-install code::before { content: "$ "; color: var(--mt-accent); }
.mt-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; }

.mt-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
  max-width: 72rem; margin: 1rem auto 3rem; padding: 0 1rem; }
.mt-feature { border: 1px solid var(--bs-border-color); border-radius: 0.75rem; padding: 1.25rem 1.4rem; }
.mt-feature h3 { font-size: 1.15rem; font-weight: 700; margin-top: 0; }
.mt-feature p { color: var(--bs-secondary-color); margin-bottom: 0.75rem; }

.mt-sample { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem; align-items: center;
  max-width: 72rem; margin: 0 auto 4rem; padding: 0 1rem; }
.mt-sample h2 { font-weight: 700; }
.mt-sample-code pre { margin: 0; font-size: 0.8rem; border-radius: 0.75rem; }
@media (max-width: 992px) { .mt-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .mt-features { grid-template-columns: minmax(0, 1fr); } .mt-sample { grid-template-columns: minmax(0, 1fr); } .mt-hero { padding-top: 2.5rem; } }

/* Room between the logo and the name */
.navbar-brand img { margin-right: 0.5rem; }

/* The tour and the screenshots (1.x spec §21.3, §21.4) */
.mt-tour { max-width: 60rem; margin: 0 auto 3rem; padding: 0 1rem; }
.mt-tour .ap-wrapper { border-radius: 0.75rem; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.mt-caption { text-align: center; color: var(--bs-secondary-color); font-size: 0.9rem; margin-top: 0.75rem; }
.mt-feature img { display: block; width: 100%; height: auto; margin: -0.25rem 0 1rem; border-radius: 0.5rem; }
.mt-test { margin: -0.25rem 0 1rem; padding: 0.75rem; border-radius: 0.5rem; font-size: 0.7rem; background: #1C1F26;
  color: #D4D7DD; aspect-ratio: 868 / 562; display: flex; align-items: center; overflow: hidden; }
.mt-test code { color: inherit; white-space: pre; }
.mt-counter { display: block; max-width: 22rem; width: 100%; height: auto; margin: 1rem 0; }