/* Optional marketing skin using the office's light palette (ui/tokens.js).
   Keep the content, interactions and real app screenshots intact. */
@import url('marketing-theme.css');
.btn { transition: background-color .18s ease, color .18s ease; }
.btn-primary, .btn-dark, .nav-cta, .nav.is-glass .nav-cta {
  background: var(--accent);
  color: var(--primary);
  box-shadow: none;
}
.btn-primary:hover, .btn-dark:hover {
  background: #80E142;
  transform: none;
  box-shadow: none;
}
.btn-soft { background: var(--chip); border-color: transparent; box-shadow: none; }
.btn-soft:hover { background: #E3E6E0; border-color: transparent; transform: none; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 4px;
}
/* Keep the original capsule's scroll, fade, hover and menu motion.
   Only its ink changes, because this preview has a white hero. */
.nav-capsule, .nav.is-glass .nav-capsule { color: var(--primary); }
.nav-plate { background-color: #FFFFFF; }
.nav.is-glass .nav-capsule { color: var(--primary); }
.nav-cta:hover { background: #80E142; }
.hero-shell { padding: 0; background: var(--bg); }
.hero {
  color: var(--ink);
  border-radius: 0;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--line);
}
.hero-bg { background: var(--bg); }
.hero-grid, .hero > .blob { display: none; }
.hero-copy h2 { color: var(--primary); }
.hero-copy h2 .hl { background: none; color: var(--primary); }
.hero-copy p { color: var(--muted); }
.hero .eyebrow.on-dark {
  background: var(--primary-soft);
  color: var(--primary);
  border: 0;
}
.hero .trust-item { color: var(--muted); }
.hero .trust-item svg { stroke: var(--primary); }
.hero-benefits { gap: 8px; }
.hero-benefits .b {
  background: var(--chip); color: var(--ink); border: 0;
  gap: 7px; padding: 10px 14px; line-height: 1.35;
}
.hero-benefits .b .ic { background: transparent; width: 16px; height: 16px; border-radius: 0; }
.hero-benefits .b .ic svg { stroke: var(--primary); }
.hero-caption { color: var(--primary); }
.hero-caption .hl { color: var(--primary); }
.hero .store, .hero .store.apple { border: 0; background: var(--accent); box-shadow: none; border-radius: 999px; }
.hero .store:hover { transform: none; background: #80E142; box-shadow: none; }
.hero .store svg, .hero .store.apple svg { fill: var(--primary); }
.hero .store .st b, .hero .store.apple .st b { color: var(--primary); }
.hero .gallery-card { background: var(--chip); box-shadow: var(--shadow); }
.why { background: var(--chip); }
.why-panel { border: 0; box-shadow: none; }
.why-panel .scene { background: #F7F9F5; }
.why-panel .txt { background: var(--card); }
.why-hub .tile { border: 0; box-shadow: none; }
.spot.light { background: var(--bg); }
.spot.dark { background: var(--d-bg); }
.spot.dark .spot-bg, .spot .glow-ring { display: none; }
.spot.dark .eyebrow.on-dark { background: var(--accent); color: var(--primary); border: 0; }
#books .eyebrow.on-dark {
  background: rgba(255,255,255,.08);
  color: #D3E2C9;
  border: 1px solid rgba(255,255,255,.14);
}
.spot.dark .btn-text { color: var(--accent); text-decoration-color: var(--accent); }
.spot.dark .flow .f .n, .spot.light .flow .f .n {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--primary);
  border: 0; box-shadow: none; font-size: 14px;
  font-weight: 700; line-height: 1;
}
.pricing { background: var(--chip); }
.plan-tier, .plan-tier.premium { border: 1px solid var(--line); box-shadow: none; }
.plan-tier.featured { background: var(--card); border: 2px solid var(--primary); box-shadow: none; }
.plan-tier .ribbon, .plan-tier.premium .ribbon { background: var(--accent); color: var(--primary); }
.bill-toggle { background: #E3E6E0; border: 0; }
.bill-toggle button.on { background: var(--accent); color: var(--primary); }
/* FAQ: the same quiet surfaces and green controls, including expanded answers. */
#faq { background: var(--bg); }
#faq .section-head h2 { color: var(--primary); }
.faq { border-color: var(--line); }
.faq > button { color: var(--primary); padding-block: 24px; }
.faq > button .chev { background: var(--chip); }
.faq.open > button .chev { background: var(--accent); }
.faq.open > button .chev svg { stroke: var(--primary); }
.faq-step, .faq-tier, .faq-panel, .faq-panel.dark {
  background: var(--chip); border: 0; border-radius: 16px;
  color: var(--ink); box-shadow: none;
}
.faq-step .n { background: var(--accent); color: var(--primary); border-radius: 50%; }
.faq-panel-title, .faq-panel.dark .faq-panel-title { color: var(--primary); }
.faq-check { color: var(--muted); }
.faq-check svg { stroke: var(--primary); }
.faq-demo { background: var(--card); border: 0; border-radius: 12px; }
.faq-chip { background: var(--primary-soft); color: var(--primary); border: 0; }
.faq-badge { background: var(--primary-soft); color: var(--primary); }
.faq-tier.highlight { background: var(--primary-soft); }
.faq-stores .store, .faq-stores .store.apple {
  background: var(--accent); border: 0; border-radius: 999px;
  box-shadow: none; transition: background-color .18s ease;
}
.faq-stores .store:hover, .faq-stores .store.apple:hover {
  background: #80E142; transform: none; box-shadow: none;
}
.faq-stores .store svg, .faq-stores .store.apple svg { fill: var(--primary); }
.faq-stores .store .st b, .faq-stores .store.apple .st b { color: var(--primary); }
.faq button.faq-link {
  width: auto; justify-content: flex-start; gap: 6px;
  padding: 0; color: var(--primary); font-size: 14.5px;
}
.about { border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .hero-benefits { gap: 8px; }
  .hero { padding-bottom: 40px; }
}