/* ────────────────────────────────────────────
   APP PAGES — Instrument Dark Design Override
   Applies to: airspace.html · checkride-ready.html
   Loaded after style.css — overrides template
   Per-page accent set via --page-accent in theme CSS
──────────────────────────────────────────── */

/* ── Keyframes ─── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Base ─── */

body {
  background-color: #07101C;
  color: #E8EFF7;
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', sans-serif;
  color: #E8EFF7;
}

a {
  color: #E8EFF7;
}

a:hover, a:focus {
  color: var(--page-accent);
}

/* ── Header ─── */

#mu-header {
  background-image: url("assets/images/header-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  display: block;
}

.mu-header-overlay {
  background: linear-gradient(
    170deg,
    rgba(7, 16, 28, 0.97) 0%,
    rgba(9, 20, 38, 0.95) 55%,
    rgba(7, 14, 24, 0.98) 100%
  ) !important;
  background-color: transparent !important;
  opacity: 1;
  padding: 40px 0 80px;
  display: block;
  position: relative;
}

/* Precision grid texture */
.mu-header-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* Atmospheric radial glow */
.mu-header-overlay::after {
  content: '';
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse,
    rgba(56, 189, 248, 0.10) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Logo ─── */

.mu-logo-area {
  display: flex !important;
  align-items: center;
  float: none;
  width: 100%;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  animation: fadeSlideUp 0.6s ease both;
}

.mu-logo {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #E8EFF7 !important;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mu-logo img {
  width: 54px !important;
  height: 54px !important;
}

/* ── Menu button ─── */

.mu-menu-btn {
  background: transparent !important;
  border: 1px solid rgba(56, 189, 248, 0.30) !important;
  color: rgba(232, 239, 247, 0.75) !important;
  font-size: 17px;
  padding: 7px 14px;
  border-radius: 6px;
  top: 40px;
  right: 15%;
  transition: all 0.2s ease;
}

.mu-menu-btn:hover,
.mu-menu-btn:focus {
  border-color: rgba(56, 189, 248, 0.65) !important;
  color: #E8EFF7 !important;
}

/* ── Header featured area ─── */

.mu-header-featured-area {
  padding: 44px 0 60px;
  display: block;
  float: left;
  width: 100%;
  position: relative;
  z-index: 1;
}

.mu-header-featured-img {
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  width: 38%;
  float: left;
  animation: fadeSlideUp 0.8s 0.1s ease both;
}

.mu-header-featured-img img {
  max-height: 420px !important;
  width: auto;
  border-radius: 22px;
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.65),
    0 8px 20px rgba(0, 0, 0, 0.40);
}

.mu-header-featured-content {
  width: 60%;
  float: right;
  margin-top: 140px;
  text-align: left;
  padding-left: 52px;
  animation: fadeSlideUp 0.7s 0.18s ease both;
}

.mu-header-featured-content h1 {
  font-family: 'Syne', sans-serif;
  font-size: 50px;
  font-weight: 800;
  color: #E8EFF7;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
  font-weight: 300; /* override base style.css h1 weight */
}

/* reset style.css font-weight: 300 on h1 */
.mu-header-featured-content h1 {
  font-weight: 800 !important;
}

.mu-header-featured-content h1 span {
  color: var(--page-accent);
  font-weight: 800;
}

.mu-header-featured-content h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: rgba(232, 239, 247, 0.60);
  line-height: 1.65;
  margin-bottom: 10px;
}

.mu-header-featured-content p {
  color: rgba(232, 239, 247, 0.60);
  font-size: 16px;
  line-height: 1.72;
}

/* Download area in header */
.mu-app-download-area {
  display: flex !important;
  float: none;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
  width: auto;
  animation: fadeSlideUp 0.7s 0.30s ease both;
}

.mu-app-download-area h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: rgba(232, 239, 247, 0.45);
  text-transform: uppercase;
  margin-bottom: 14px;
  width: 100%;
}

/* ── CTA Buttons ─── */

.mu-apple-btn,
.mu-google-btn,
.mu-windows-btn {
  background-color: var(--page-accent) !important;
  border: 1.5px solid var(--page-accent) !important;
  border-radius: 8px !important;
  color: #050D08 !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 11px 22px;
  text-transform: uppercase;
  transition: all 0.25s ease !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mu-apple-btn:hover,
.mu-google-btn:hover,
.mu-windows-btn:hover,
.mu-apple-btn:focus,
.mu-google-btn:focus,
.mu-windows-btn:focus {
  background-color: transparent !important;
  color: var(--page-accent) !important;
  box-shadow: 0 0 22px var(--page-accent-glow);
}

.mu-apple-btn i,
.mu-google-btn i,
.mu-windows-btn i {
  font-size: 18px;
  line-height: 1;
  float: none;
  margin-right: 0;
}

.mu-apple-btn span,
.mu-google-btn span,
.mu-windows-btn span {
  float: none;
  line-height: 1;
}

/* Checkride dual-button styles */
.mu-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background-color: var(--page-accent);
  border: 1.5px solid var(--page-accent);
  border-radius: 8px;
  color: #080600;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 11px 22px;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

.mu-btn:hover,
.mu-btn:focus {
  background-color: transparent;
  color: var(--page-accent);
  box-shadow: 0 0 22px var(--page-accent-glow);
}

.mu-btn-secondary {
  background-color: transparent !important;
  border-color: rgba(232, 239, 247, 0.18) !important;
  color: rgba(232, 239, 247, 0.70) !important;
}

.mu-btn-secondary:hover,
.mu-btn-secondary:focus {
  background-color: rgba(232, 239, 247, 0.06) !important;
  color: #E8EFF7 !important;
  border-color: rgba(232, 239, 247, 0.30) !important;
  box-shadow: none !important;
}

/* Notify button (checkride download) */
.mu-notify-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background-color: var(--page-accent) !important;
  border: 1.5px solid var(--page-accent) !important;
  border-radius: 8px !important;
  color: #080600 !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 14px 32px !important;
  text-transform: uppercase;
  transition: all 0.25s ease !important;
}

.mu-notify-btn:hover,
.mu-notify-btn:focus {
  background-color: transparent !important;
  color: var(--page-accent) !important;
  box-shadow: 0 0 26px var(--page-accent-glow);
}

.mu-notify-btn i {
  font-size: 20px;
  float: none;
  line-height: 1;
  margin-right: 0;
}

.mu-notify-btn span {
  float: none;
  line-height: 1;
}

/* Coming soon badge */
.mu-coming-soon-badge {
  background-color: var(--page-accent-bg);
  border: 1px solid var(--page-accent-border);
  border-radius: 5px;
  color: var(--page-accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 4px 12px;
  text-transform: uppercase;
}

/* ── Fullscreen menu ─── */

.mu-menu-full-overlay {
  background: rgba(7, 16, 28, 0.97) !important;
}

.mu-menu ul li {
  list-style: none;
}

.mu-menu ul li a {
  font-family: 'Syne', sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  color: rgba(232, 239, 247, 0.65) !important;
  letter-spacing: -0.015em;
  transition: color 0.2s ease;
}

.mu-menu ul li a:hover,
.mu-menu ul li a:focus {
  color: var(--page-accent) !important;
}

/* ── Sections ─── */

#mu-feature,
#mu-contact {
  background-color: #07101C;
}

#mu-problem,
#mu-solution,
#mu-trust {
  background-color: #07101C;
}

#mu-apps-screenshot,
#mu-faq {
  background-color: #0C1828;
}

/* ── Title areas ─── */

.mu-title-area {
  padding: 0 80px;
}

.mu-title {
  font-family: 'Syne', sans-serif !important;
  font-size: 34px;
  font-weight: 700;
  color: #E8EFF7 !important;
  letter-spacing: -0.02em;
  text-transform: none !important;
  margin-bottom: 16px;
}

.mu-title-dot {
  background-color: var(--page-accent) !important;
  margin-bottom: 22px;
}

.mu-title-dot::before,
.mu-title-dot::after {
  background-color: var(--page-accent) !important;
  opacity: 0.35;
}

.mu-title-area p {
  color: rgba(232, 239, 247, 0.58);
  font-size: 16px;
  line-height: 1.76;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.mu-heading-title {
  font-family: 'Syne', sans-serif;
  color: #E8EFF7 !important;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* ── Feature section ─── */

.mu-feature-area {
  padding: 90px 0;
}

.mu-feature-content {
  background-color: transparent !important;
  margin-top: 44px;
}

.mu-profile-img {
  border-radius: 18px !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.60),
    0 6px 16px rgba(0, 0, 0, 0.38) !important;
}

.mu-feature-btn {
  background-color: var(--page-accent-bg) !important;
  color: var(--page-accent) !important;
  border: 1px solid var(--page-accent-border) !important;
  border-radius: 8px;
  width: 42px;
  height: 42px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

.mu-feature-content-right .media {
  border-bottom: 1px solid rgba(56, 189, 248, 0.08) !important;
  margin-bottom: 22px;
  padding-bottom: 22px;
  transition: border-color 0.25s ease;
}

.mu-feature-content-right .media:hover {
  border-bottom-color: var(--page-accent-border) !important;
}

.mu-feature-content-right .media-heading {
  font-family: 'Syne', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #E8EFF7;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.mu-feature-content-right .media:hover .media-heading {
  color: var(--page-accent) !important;
}

.mu-feature-content-right .media p {
  color: rgba(232, 239, 247, 0.56);
  font-size: 14.5px;
  line-height: 1.72;
}

/* ── Screenshots ─── */

.mu-apps-screenshot-area {
  padding: 90px 0;
}

.mu-single-screeshot img {
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.mu-apps-screenshot-slider .slick-next,
.mu-apps-screenshot-slider .slick-prev {
  background: rgba(14, 28, 48, 0.8) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.20) !important;
  border-radius: 6px;
}

.mu-apps-screenshot-slider .slick-next::before,
.mu-apps-screenshot-slider .slick-prev::before {
  color: var(--page-accent) !important;
  opacity: 1;
}

/* ── Download CTA ─── */

#mu-download::before {
  background: rgba(7, 16, 28, 0.97) !important;
  opacity: 1 !important;
}

.mu-download-area {
  padding: 120px 0;
  position: relative;
  z-index: 1;
}

.mu-download-area .mu-title {
  font-size: 44px !important;
  color: #E8EFF7 !important;
}

.mu-download-area p {
  color: rgba(232, 239, 247, 0.60) !important;
}

.mu-download-content {
  margin-top: 44px;
  position: relative;
  z-index: 1;
}

/* ── FAQ ─── */

.mu-faq-area {
  padding: 90px 0;
}

.mu-faq-content {
  padding: 0 80px;
  margin-top: 40px;
}

.mu-faq-content .panel-default {
  background-color: #0F1F30 !important;
  border: 1px solid rgba(56, 189, 248, 0.09) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  overflow: hidden;
  margin-bottom: 8px;
}

.mu-faq-content .panel-default > .panel-heading {
  background-color: #0F1F30 !important;
  border-color: rgba(56, 189, 248, 0.09) !important;
  padding: 0;
}

.mu-faq-content .panel-title a {
  color: rgba(232, 239, 247, 0.78) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 16px 18px;
  transition: color 0.2s ease;
}

.mu-faq-content .panel-title a:hover,
.mu-faq-content .panel-title a:focus,
.mu-faq-content .panel-title a[aria-expanded="true"] {
  color: var(--page-accent) !important;
}

.mu-faq-content .panel-title a > span {
  color: var(--page-accent) !important;
}

.mu-faq-content .panel-default > .panel-heading + .panel-collapse > .panel-body {
  background-color: #0F1F30 !important;
  color: rgba(232, 239, 247, 0.58);
  border-top: 1px solid rgba(56, 189, 248, 0.09) !important;
  font-size: 14.5px;
  line-height: 1.76;
  padding: 14px 18px 20px;
}

/* ── Contact ─── */

.mu-contact-area {
  padding: 90px 0;
}

.mu-contact-content {
  padding: 0 !important;
  margin-top: 44px;
}

.mu-contact-left p {
  color: rgba(232, 239, 247, 0.58);
  line-height: 1.76;
}

.mu-contact-right-single .mu-icon {
  background-color: var(--page-accent-bg) !important;
  border: 1px solid var(--page-accent-border) !important;
  color: var(--page-accent) !important;
}

.mu-contact-right-single p {
  color: rgba(232, 239, 247, 0.58);
}

.mu-contact-right-single p strong {
  color: #E8EFF7;
  font-weight: 600;
}

.mu-social-media a {
  border: 1px solid rgba(232, 239, 247, 0.14) !important;
  color: rgba(232, 239, 247, 0.45) !important;
  background: transparent !important;
  transition: all 0.2s ease;
}

.mu-social-media a:hover,
.mu-social-media a:focus {
  border-color: var(--page-accent) !important;
  color: var(--page-accent) !important;
}

/* ── Footer ─── */

#mu-footer {
  background-color: #07101C !important;
  border-top: 1px solid rgba(56, 189, 248, 0.08);
}

.mu-copy-right {
  color: rgba(232, 239, 247, 0.30);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.mu-copy-right a {
  color: rgba(232, 239, 247, 0.40) !important;
  font-weight: 400;
  transition: color 0.2s ease;
}

.mu-copy-right a:hover,
.mu-copy-right a:focus {
  color: var(--page-accent) !important;
}

/* ── Conversion sections ─── */

/* Problem list — arrow-prefixed items */
.mu-problem-list {
  list-style: none;
  padding: 0;
  margin: 28px auto 0;
  display: inline-flex;
  flex-direction: column;
  gap: 13px;
  text-align: left;
}

.mu-problem-list li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--page-accent);
  padding-left: 22px;
  position: relative;
  list-style: none;
  letter-spacing: 0.04em;
}

.mu-problem-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--page-accent);
  opacity: 0.65;
}

/* Comparison positioning line */
.mu-comparison-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-style: italic;
  color: rgba(232, 239, 247, 0.42);
  margin-top: 20px;
  letter-spacing: 0.01em;
}

/* Outcomes list — "After using this app you'll be able to" */
.mu-outcomes-list {
  list-style: none;
  padding: 0;
  margin: 32px auto 0;
  display: inline-flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.mu-outcomes-list li {
  font-size: 16px;
  font-weight: 400;
  color: rgba(232, 239, 247, 0.70);
  padding-left: 26px;
  position: relative;
  list-style: none;
  line-height: 1.55;
}

.mu-outcomes-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--page-accent);
  opacity: 0.65;
}

/* Screenshot captions */
.mu-screenshot-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: rgba(232, 239, 247, 0.38);
  text-align: center;
  margin-top: 14px;
  text-transform: uppercase;
}

/* Micro-proof strip */
.mu-micro-proof {
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.mu-micro-proof-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--page-accent);
  opacity: 0.72;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mu-micro-proof-item i {
  font-size: 12px;
  opacity: 0.9;
}

/* Extra new section backgrounds */
#mu-differentiator,
#mu-outcomes {
  background-color: #0C1828;
  display: block;
  float: left;
  width: 100%;
}

#mu-differentiator .mu-feature-area,
#mu-outcomes .mu-feature-area {
  padding: 90px 0;
}

/* ── Who This Is For (checkride-ready.html) ─── */

#mu-who-for {
  background-color: #0C1828;
  display: block;
  float: left;
  width: 100%;
}

.mu-who-list {
  list-style: none;
  padding: 0;
  margin: 28px auto 0;
  display: inline-flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.mu-who-list li {
  font-size: 16px;
  font-weight: 400;
  color: rgba(232, 239, 247, 0.72);
  padding-left: 26px;
  position: relative;
  list-style: none;
  line-height: 1.55;
}

.mu-who-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--page-accent);
  font-size: 13px;
  top: 2px;
}

/* ── No Fluff section (checkride-ready.html) ─── */

#mu-no-fluff {
  background-color: #07101C;
  display: block;
  float: left;
  width: 100%;
}

.mu-no-fluff-items {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.mu-no-fluff-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 239, 247, 0.55);
  background-color: rgba(232, 239, 247, 0.05);
  border: 1px solid rgba(232, 239, 247, 0.10);
  border-radius: 6px;
  padding: 8px 18px;
}

/* ── Cross-sell section (airspace.html) ─── */

#mu-crosssell {
  background-color: #0C1828;
  display: block;
  float: left;
  width: 100%;
}

.mu-crosssell-card {
  background-color: #0F1F30;
  border: 1px solid var(--page-accent-border);
  border-radius: 14px;
  padding: 44px 40px;
  margin-top: 44px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.mu-crosssell-card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #E8EFF7;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}

.mu-crosssell-card p {
  color: rgba(232, 239, 247, 0.58);
  font-size: 15px;
  line-height: 1.72;
  margin-bottom: 28px;
}

.mu-crosssell-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background-color: #F59E0B;
  border: 1.5px solid #F59E0B;
  border-radius: 8px;
  color: #080600 !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 12px 28px;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

.mu-crosssell-btn:hover,
.mu-crosssell-btn:focus {
  background-color: transparent !important;
  color: #F59E0B !important;
  border-color: #F59E0B !important;
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.20);
}

/* ── Responsive ─── */

@media (max-width: 1199px) {
  .mu-header-featured-content {
    margin-top: 100px;
    padding-left: 36px;
  }
}

@media (max-width: 991px) {
  .mu-menu-btn {
    right: 5%;
  }

  .mu-header-featured-content {
    margin-top: 24px;
    padding-left: 20px;
  }

  .mu-header-featured-content h1 {
    font-size: 36px !important;
  }

  .mu-title-area {
    padding: 0 30px;
  }

  .mu-faq-content {
    padding: 0;
  }
}

@media (max-width: 767px) {
  .mu-header-featured-content h1 {
    font-size: 30px !important;
  }

  .mu-app-download-area {
    flex-direction: column;
    align-items: flex-start;
  }

  .mu-title {
    font-size: 26px;
  }
}

@media (max-width: 640px) {
  .mu-header-featured-img,
  .mu-header-featured-content {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    margin-top: 20px !important;
    text-align: center;
  }

  .mu-app-download-area {
    justify-content: center;
  }

  .mu-title-area {
    padding: 0;
  }

  .mu-faq-content {
    padding: 0;
  }
}