/* APK Ocean Blue dark palette: ui/theme/NerdyThemeTokens.kt, oceanBlueDark().
   Marketing pages only. Account, customizer and admin themes are unchanged. */
body.public-page {
  --page: #274963;
  --navy: #1e3a52;
  --navy-2: #25465f;
  --surface: #2c506a;
  --surface-elevated: #25465f;
  --surface-overlay: #183247;
  --ink: #f5f9fc;
  --muted: #d4e0ea;
  --line: #5b7c96;
  --blue: #66baff;
  --blue-dark: #a6d8ff;
  --focus: #3ea1ff;
  --text-strong: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line);
  --shadow: 0 16px 40px rgb(24 50 71 / 18%);
  background: linear-gradient(160deg, #2e536e, var(--page) 40%, #1e3a52);
  color: var(--ink);
}

.public-page .site-header {
  background: rgb(30 58 82 / 97%);
  border-bottom-color: rgb(91 124 150 / 65%);
}

/* Expanded APK DrawerLogo: white mark, stacked ExtraBold wordmark, 8dp gap.
   Text is scaled for the website header; the icon paths are unchanged. */
.public-page :is(.brand, .footer-brand) { gap: 8px; flex-shrink: 0; }
.public-page :is(.brand, .footer-brand) img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.public-page .drawer-wordmark {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
  font-family: Roboto, "Arial", sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}
.public-page .drawer-wordmark > span:first-child { color: #f5f9fc; font-size: 18px; }
.public-page .drawer-wordmark > span:last-child { color: #1677e8; font-size: 16.5px; }

.public-page .hero {
  min-height: 540px;
  background: #183247;
}

.public-page .hero::after {
  /* Quiet space for copy; let the Home artwork show through on the right. */
  background:
    linear-gradient(0deg, #183247 0%, transparent 28%),
    linear-gradient(90deg, #183247 6%, rgb(24 50 71 / 98%) 32%, rgb(24 50 71 / 88%) 49%, rgb(24 50 71 / 42%) 70%, rgb(24 50 71 / 16%) 100%);
  pointer-events: none;
}

.public-page .hero-content { padding-block: 64px; }
.public-page .hero h1 { line-height: 1.08; letter-spacing: -.035em; }
.public-page .hero-lead { max-width: 650px; margin-top: 24px; font-size: 1.125rem; line-height: 1.7; color: var(--muted); }
.public-page .hero-actions { flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.public-page .hero-plan { flex-wrap: wrap; gap: 6px 16px; margin-top: 22px; color: var(--muted); }
.public-page .hero-plan span { max-width: 550px; line-height: 1.6; }
.public-page .eyebrow { color: var(--blue-dark); font-size: .875rem; letter-spacing: .045em; }

.public-page .button {
  min-height: 48px;
  border-radius: 12px;
  background: var(--blue);
  border-color: var(--blue);
  color: var(--surface-overlay);
  box-shadow: 0 6px 18px rgb(24 50 71 / 14%);
}
.public-page .button:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--surface-overlay); }
.public-page .button--secondary { background: var(--surface-elevated); border-color: var(--line); color: var(--ink); box-shadow: none; }
.public-page .button--secondary:hover { background: var(--surface-overlay); border-color: var(--blue); color: var(--ink); }
.public-page :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.public-page :is(.access-section, .comparison-section, .reviews-section, .experience-section, .pricing-section) {
  background: var(--surface-elevated);
  border-block: 1px solid rgb(91 124 150 / 35%);
}
.public-page :is(.trust-band div, .experience-gallery figure, .install-compatibility) {
  background: var(--surface);
  color: var(--muted);
}
.public-page :is(.access-card, .feature-grid > article, .price-card, .testimonial-card, .install-guide, .comparison-details, .platform-card, .pricing-includes, .member-referral) {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.public-page :is(.access-card--trial, .price-card.featured, .price-card.lifetime) {
  background: var(--surface-elevated);
  border-color: var(--blue);
}
.public-page :is(.access-card__label, .access-card .text-link, .plan-label, .feature-icon--blue) { color: var(--blue-dark); }
.public-page :is(.access-card p, .price-card p, .pricing-copy > p, .access-intro > p:last-child, .testimonial-card p) { color: var(--muted); }
.public-page .pricing-includes li { background: var(--surface-elevated); border-radius: 12px; }
.public-page .pricing-includes li small { color: var(--muted); font-size: .875rem; line-height: 1.5; }
.public-page :is(.experience-gallery figure, .experience-controls button) { border-color: var(--line); }
.public-page .experience-controls button { background: var(--surface); border-radius: 12px; }
.public-page .experience-controls button:hover { background: var(--surface-overlay); border-color: var(--blue); }
.public-page .experience-gallery { scrollbar-color: var(--line) var(--surface-overlay); }
.public-page .section-heading > p:last-child { line-height: 1.7; }
.public-page .site-footer { background: var(--surface-overlay); color: var(--muted); border-color: var(--line); }

@media (max-width: 640px) {
  .public-page .hero { min-height: auto; }
  .public-page .hero-backdrop { background-position: 68% center; }
  .public-page .hero::after {
    background: linear-gradient(180deg, rgb(24 50 71 / 90%), rgb(24 50 71 / 96%) 65%, #183247);
  }
  .public-page .hero-content { padding-block: 44px; }
  .public-page .hero h1 { font-size: clamp(2.25rem, 9vw, 3.5rem); }
  .public-page .hero-lead { margin-top: 18px; font-size: 1rem; line-height: 1.65; }
  .public-page .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .public-page .hero-actions .button { justify-content: center; padding-inline: 16px; white-space: normal; text-align: center; }
  .public-page .hero-plan { display: grid; font-size: .875rem; }
  .public-page .section { padding-block: 56px; }
  .public-page .experience-heading-row { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .public-page *, .public-page *::before, .public-page *::after {
    scroll-behavior: auto;
    transition: none;
    animation: none;
  }
}