/* Public website only. Desktop app (html.local-app) has its own dark workbench in app-desktop.css. */

html:not(.local-app) {
  color-scheme: dark;
}

html:not(.local-app) body {
  background: #08111c;
  color: #e8eef7;
}

html:not(.local-app) h1,
html:not(.local-app) h2 {
  color: #fff;
}

html:not(.local-app) h3 {
  color: #f4f8ff;
}

html:not(.local-app) a:not(.btn):not(.brand-mark) {
  color: #7eb6ff;
}

html:not(.local-app) a:not(.btn):not(.brand-mark):hover {
  color: #c5ddff;
}

/* ── Header ── */
html:not(.local-app) .site-header {
  padding: 0.65rem var(--section-x);
  background: rgba(8, 17, 28, 0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html:not(.local-app) .header-shell {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  max-width: var(--shell-max);
}

html:not(.local-app) .header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 48px;
}

html:not(.local-app) .brand,
html:not(.local-app) .header-nav .nav-repair-link {
  color: #fff;
}

html:not(.local-app) .brand em {
  color: #8ea6c4;
}

html:not(.local-app) .header-nav {
  flex: 1;
  justify-content: center;
  flex-wrap: nowrap;
  margin-left: 0;
  gap: 0.15rem;
}

html:not(.local-app) .header-nav a {
  color: #9db0c8;
  padding: 0.4rem 0.75rem;
  font-size: 0.88rem;
}

html:not(.local-app) .header-nav a:hover,
html:not(.local-app) .header-nav a.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

html:not(.local-app) .header-nav a.web-only {
  display: inline-block !important;
}

html:not(.local-app) .header-actions {
  gap: 0;
}

html:not(.local-app) .header-actions .btn-nav,
html:not(.local-app) .header-actions .btn {
  min-height: 40px;
  height: 40px;
  padding: 0 1.15rem;
  font-size: 0.84rem;
}

html:not(.local-app) .btn-icon {
  display: none;
}

html:not(.local-app) .btn-premium {
  padding-right: 1.25rem !important;
  gap: 0.35rem;
}

html:not(.local-app) .hero-cta,
html:not(.local-app) .why-cta.web-only {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

html:not(.local-app) .hero-cta .btn,
html:not(.local-app) .why-cta .btn {
  min-height: 48px;
  height: 48px;
  padding: 0 1.35rem;
  font-size: 0.95rem;
  box-sizing: border-box;
}

html:not(.local-app) .footer-links a.web-only,
html:not(.local-app) .footer-links a.local-only {
  display: inline !important;
}

html:not(.local-app) .header-license {
  display: none !important;
}

html:not(.local-app) .site-preview-banner {
  background: #12233a;
  border-bottom: 1px solid rgba(92, 176, 233, 0.25);
  color: #c5d4e8;
}

html:not(.local-app) .site-preview-banner a {
  color: #7eb6ff;
}

html:not(.site-preview) .site-preview-only {
  display: none !important;
}

/* ── Section shells: kill light page backgrounds ── */
html:not(.local-app) .hero-band,
html:not(.local-app) .scenarios-section,
html:not(.local-app) .audience-section,
html:not(.local-app) .issue-strip,
html:not(.local-app) .compare-section,
html:not(.local-app) .why-section,
html:not(.local-app) .download-section,
html:not(.local-app) .guide-section,
html:not(.local-app) .repair-section,
html:not(.local-app) .pricing-section,
html:not(.local-app) .jake-band,
html:not(.local-app) .legal-band,
html:not(.local-app) .faq-band {
  background: transparent;
  border: none;
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
  padding-left: var(--section-x);
  padding-right: var(--section-x);
}

html:not(.local-app) .hero-band {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
  background:
    radial-gradient(900px 420px at 80% -10%, rgba(61, 114, 252, 0.22), transparent 55%),
    radial-gradient(700px 360px at 0% 80%, rgba(92, 176, 233, 0.1), transparent 50%),
    #08111c;
}

html:not(.local-app) .issue-strip {
  color: #e8eef7;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}

html:not(.local-app) .why-section {
  background: transparent;
}

html:not(.local-app) .hero-band .text-accent {
  color: #7eb6ff;
}

html:not(.local-app) .hero-sub,
html:not(.local-app) .scenarios-lead,
html:not(.local-app) .audience-lead,
html:not(.local-app) .download-lead,
html:not(.local-app) .guide-lead,
html:not(.local-app) .pricing-lead,
html:not(.local-app) .repair-gate-lead,
html:not(.local-app) .compare-lead,
html:not(.local-app) .issue-lead,
html:not(.local-app) .faq-lead {
  color: #9db0c8;
}

html:not(.local-app) .kicker-pill,
html:not(.local-app) .section-kicker,
html:not(.local-app) .hero-kicker,
html:not(.local-app) .issue-kicker,
html:not(.local-app) .legal-kicker {
  background: rgba(61, 114, 252, 0.12) !important;
  border-color: rgba(126, 182, 255, 0.2) !important;
  color: #9ec4ff !important;
}

html:not(.local-app) .kicker-dot {
  background: #7eb6ff;
}

/* ── Buttons ── */
html:not(.local-app) .btn-secondary,
html:not(.local-app) .hero-band .btn-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e8eef7;
  box-shadow: none;
}

html:not(.local-app) .btn-secondary:hover:not(:disabled),
html:not(.local-app) .hero-band .btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(126, 182, 255, 0.45);
}

html:not(.local-app) .btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: #e8eef7;
}

html:not(.local-app) .btn-outline:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(126, 182, 255, 0.45);
  color: #fff;
}

html:not(.local-app) .why-cta.web-only {
  display: flex !important;
}

html:not(.local-app) .platform-chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #9db0c8;
  box-shadow: none;
}

html:not(.local-app) .platform-chip.active {
  background: rgba(61, 114, 252, 0.16);
  border-color: rgba(126, 182, 255, 0.3);
  color: #cfe0ff;
}

html:not(.local-app) .platform-chip.highlight {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.28);
  color: #6ee7b7;
}

html:not(.local-app) .hero-note {
  color: #7a8ea8;
}

html:not(.local-app) .hero-visual-bg {
  opacity: 0.55;
}

html:not(.local-app) .float-card {
  background: rgba(16, 28, 46, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}

html:not(.local-app) .float-card strong,
html:not(.local-app) .mock-player,
html:not(.local-app) .chrome-title {
  color: #e8eef7;
}

html:not(.local-app) .float-file span {
  color: #9db0c8;
}

html:not(.local-app) .float-tag.neutral {
  background: rgba(61, 114, 252, 0.2);
  color: #cfe0ff;
}

/* ── Cards ── */
html:not(.local-app) .scenario-tile,
html:not(.local-app) .audience-card,
html:not(.local-app) .aeo-block article,
html:not(.local-app) .why-card,
html:not(.local-app) .issue-grid article,
html:not(.local-app) .feature-tile,
html:not(.local-app) .download-card,
html:not(.local-app) .after-app,
html:not(.local-app) .guide-card,
html:not(.local-app) .steps-card,
html:not(.local-app) .price-card,
html:not(.local-app) .compare-card {
  background: #101c2e;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: none;
  color: #e8eef7;
}

html:not(.local-app) .vlc-window {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

html:not(.local-app) .scenario-tile.hot,
html:not(.local-app) .price-card.featured {
  background: linear-gradient(180deg, rgba(61, 114, 252, 0.16) 0%, #101c2e 70%);
  border-color: rgba(126, 182, 255, 0.28);
}

html:not(.local-app) .scenario-tile.limited {
  border-color: rgba(251, 191, 36, 0.28);
}

html:not(.local-app) .scenario-limit-badge {
  color: #fde68a;
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.35);
}

html:not(.local-app) .scenario-tile:hover,
html:not(.local-app) .why-card:hover,
html:not(.local-app) .price-card:hover,
html:not(.local-app) .feature-tile:hover {
  transform: none;
  border-color: rgba(126, 182, 255, 0.28);
  box-shadow: none;
}

html:not(.local-app) .scenarios-grid,
html:not(.local-app) .audience-grid,
html:not(.local-app) .why-grid,
html:not(.local-app) .issue-grid {
  gap: 1.15rem;
}

html:not(.local-app) .scenario-tile h3,
html:not(.local-app) .audience-card h3,
html:not(.local-app) .aeo-block h2,
html:not(.local-app) .aeo-block h3,
html:not(.local-app) .why-card h3,
html:not(.local-app) .feature-tile h3,
html:not(.local-app) .guide-card h3,
html:not(.local-app) .steps-card h3,
html:not(.local-app) .price-card h3,
html:not(.local-app) .download-card h3,
html:not(.local-app) .after-app h3,
html:not(.local-app) .issue-grid strong {
  color: #fff;
}

html:not(.local-app) .scenario-tile p,
html:not(.local-app) .audience-card p,
html:not(.local-app) .aeo-block p,
html:not(.local-app) .why-card p,
html:not(.local-app) .feature-tile p,
html:not(.local-app) .issue-grid p,
html:not(.local-app) .guide-card p:not(.guide-note),
html:not(.local-app) .guide-card li,
html:not(.local-app) .price-desc,
html:not(.local-app) .download-card p,
html:not(.local-app) .download-list,
html:not(.local-app) .after-app-steps span,
html:not(.local-app) .guide-steps span,
html:not(.local-app) .download-note,
html:not(.local-app) .compare-foot,
html:not(.local-app) .guide-label,
html:not(.local-app) .guide-facts {
  color: #9db0c8;
}

html:not(.local-app) .compare-foot strong {
  color: #fff;
}

html:not(.local-app) .why-icon,
html:not(.local-app) .scenario-icon-wrap,
html:not(.local-app) .tile-icon-mark {
  background: rgba(61, 114, 252, 0.16);
  color: #9ec4ff;
}

html:not(.local-app) .feature-tile code,
html:not(.local-app) .scenario-tile code {
  background: rgba(61, 114, 252, 0.16);
  color: #cfe0ff;
}

html:not(.local-app) .compare-section {
  padding-top: 2rem;
}

html:not(.local-app) .feature-grid {
  gap: 1rem;
}

/* Issue block: no wrapping white card */
html:not(.local-app) .issue-inner {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

html:not(.local-app) .issue-strip h2 {
  color: #fff;
  max-width: 34rem;
  margin-bottom: 0.5rem;
}

html:not(.local-app) .issue-lead {
  max-width: 36rem;
  margin: 0 0 1.5rem;
  font-size: 1.02rem;
  line-height: 1.55;
}

/* Repair gate: one dark panel, not a white sheet */
html:not(.local-app) .repair-gate {
  background: #101c2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: #e8eef7;
}

html:not(.local-app) .repair-gate-inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 860px;
}

html:not(.local-app) .repair-gate h2 {
  color: #fff;
}

html:not(.local-app) .repair-gate-step {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

html:not(.local-app) .repair-gate-step strong {
  color: #fff;
}

html:not(.local-app) .repair-gate-step p {
  color: #9db0c8;
}

/* Yellow disclaimers — keep them yellow, dark text on amber */
html:not(.local-app) .download-smartscreen,
html:not(.local-app) .repair-gate-note {
  background: #f5c518;
  border: 1px solid #d4a017;
  color: #1a1400;
}

html:not(.local-app) p.guide-note,
html:not(.local-app) .guide-card p.guide-note {
  background: #ffe566;
  border: 1px solid #e0b000;
  color: #000 !important;
  overflow: visible;
  height: auto;
  display: block;
  line-height: 1.55;
  font-size: 0.88rem;
}

html:not(.local-app) p.guide-note strong,
html:not(.local-app) .guide-card p.guide-note strong {
  color: #000 !important;
  background: transparent;
}
html:not(.local-app) .repair-gate-note,
html:not(.local-app) .repair-gate-note a,
html:not(.local-app) .repair-gate-note strong {
  color: #1a1400;
}

html:not(.local-app) .repair-gate-note a {
  font-weight: 700;
  text-decoration: underline;
}

html:not(.local-app) .download-smartscreen {
  text-align: left;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1.15rem;
  border-radius: 12px;
}

html:not(.local-app) .download-smartscreen summary {
  color: #1a1400;
  font-weight: 700;
  cursor: pointer;
}

html:not(.local-app) .download-smartscreen code,
html:not(.local-app) .repair-gate-note code {
  background: rgba(0, 0, 0, 0.12);
  color: #1a1400;
}

html:not(.local-app) .guide-steps li,
html:not(.local-app) .after-app-steps li {
  border-color: rgba(255, 255, 255, 0.07);
}

html:not(.local-app) .guide-steps strong,
html:not(.local-app) .after-app-steps strong {
  color: #fff;
}

html:not(.local-app) .price-amt {
  color: #7eb6ff;
}

html:not(.local-app) .web-key-hint {
  max-width: 40rem;
  margin: 1.5rem auto 0;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #c5d4e8;
  font-size: 0.92rem;
  line-height: 1.55;
  text-align: left;
}

html:not(.local-app) .web-key-hint strong:first-child {
  display: block;
  color: #fff;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

html:not(.local-app) .legal-band p,
html:not(.local-app) .legal-band li,
html:not(.local-app) .legal-page p,
html:not(.local-app) .legal-page li,
html:not(.local-app) .legal-updated {
  color: #9db0c8;
}

html:not(.local-app) .legal-page {
  background: transparent;
  border: none;
  box-shadow: none;
}

html:not(.local-app) .legal-band h3,
html:not(.local-app) .legal-page h1,
html:not(.local-app) .legal-page h2 {
  color: #fff;
}

html:not(.local-app) .legal-back a {
  color: #7eb6ff;
}

/* Public FAQ */
html:not(.local-app) .faq-band .faq-inner {
  max-width: 760px;
  margin: 0 auto;
}

html:not(.local-app) .faq-item {
  padding: 0.15rem 1.15rem;
  margin: 0 0 0.65rem;
  border-radius: 12px;
  background: #101c2e;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

html:not(.local-app) .faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 0.95rem 0;
  color: #fff;
  font-weight: 600;
  font-size: 0.98rem;
}

html:not(.local-app) .faq-item summary::-webkit-details-marker {
  display: none;
}

html:not(.local-app) .faq-item p {
  margin: 0 0 1rem;
  color: #9db0c8;
  font-size: 0.92rem;
  line-height: 1.55;
}

html:not(.local-app) .site-footer,
html:not(.local-app) footer {
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: #061018;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #9db0c8;
}

html:not(.local-app) .footer-inner {
  max-width: var(--shell-max);
  margin: 0 auto;
}

html:not(.local-app) .footer-top {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

html:not(.local-app) .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
}

html:not(.local-app) .footer-brand p,
html:not(.local-app) .footer-copy {
  color: #8ea6c4;
}

html:not(.local-app) .footer-links a,
html:not(.local-app) .site-footer a,
html:not(.local-app) footer a {
  color: #9db0c8;
}

html:not(.local-app) .footer-links a:hover,
html:not(.local-app) .site-footer a:hover,
html:not(.local-app) footer a:hover {
  color: #fff;
}

html:not(.local-app) .mobile-cta-bar {
  background: rgba(8, 17, 28, 0.94);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

html:not(.local-app) .modal-card {
  background: #101c2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e8eef7;
}

html:not(.local-app) .modal-card h3 {
  color: #fff;
}

html:not(.local-app) .modal-card p {
  color: #9db0c8;
}

html:not(.local-app) code {
  background: rgba(255, 255, 255, 0.06);
  color: #cfe0ff;
}

html:not(.local-app) .jake-card {
  background: #101c2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

html:not(.local-app) .jake-wa-badge {
  border-color: #101c2e;
}

html:not(.local-app) .jake-name {
  color: #fff;
}

html:not(.local-app) .jake-meta {
  color: #25d366;
}

html:not(.local-app) .jake-story-title {
  color: #fff;
}

html:not(.local-app) .jake-blurb,
html:not(.local-app) .jake-offer {
  color: #9db0c8;
}

html:not(.local-app) .jake-offer a {
  color: #7eb6ff;
}

html:not(.local-app) .btn-whatsapp {
  background: #25d366;
  color: #fff;
  min-height: 44px;
  height: 44px;
  padding: 0 1.15rem;
}

html:not(.local-app) .btn-whatsapp:hover:not(:disabled) {
  background: #1ebe57;
  color: #fff;
  border-color: transparent;
}

html:not(.local-app) .jake-float-pop {
  background: #101c2e;
  color: #e8eef7;
}

html:not(.local-app) .jake-float-name {
  color: #fff;
}

/* Thank-you / refund pages (no local-app class) */
html:not(.local-app) .success-page h1 {
  color: #fff;
}

html:not(.local-app) .success-lead,
html:not(.local-app) .loading,
html:not(.local-app) .lost {
  color: #9db0c8;
}