/* Product-led landing visuals. Keep these overrides separate from the vendor theme. */
:root {
  --default-font: "Inter", system-ui, sans-serif;
  --heading-font: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}
/* Bootstrap's blue defaults must not leak into the green product presentation. */
.btn-primary, .main .bg-primary { background-color: #087c60 !important; border-color: #087c60 !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus-visible { background-color: #05624b !important; border-color: #05624b !important; }
.btn-outline-primary { color: #087c60 !important; border-color: #087c60 !important; }
.btn-outline-primary:hover { background-color: #087c60 !important; color: #fff !important; }
.bg-primary-subtle { background-color: #e6f5ee !important; }
.main .bg-primary-subtle.text-primary, .feature-icon.text-primary { color: #087c60 !important; }
.landing-hero { background: linear-gradient(135deg, #fff 30%, #edf7f2); padding: clamp(32px, 5vw, 76px) 0 !important; }
.landing-hero .hero-title { font-size: clamp(2.15rem, 3.5vw, 3.55rem); line-height: 1.15; letter-spacing: -.045em; }
.landing-hero .hero-subtitle { font-size: 1.08rem; line-height: 1.75; }
.landing-hero .text-primary { color: #087c60 !important; }
.landing-hero .btn { font-size: 1rem; }
.product-visual { margin: 0; overflow: hidden; border: 1px solid #dce9e2; border-radius: 24px; background: #f4f7f2; box-shadow: 0 18px 48px #183d2910; }
.product-visual img { width: 100%; height: auto; display: block; }
.product-visual figcaption { padding: 14px 20px; background: #fff; color: #52645c; font-size: .8rem; text-align: center; border-top: 1px solid #e6eee8; }
.hero-product-visual { box-shadow: 0 24px 60px #183d2918; }
.app-preview-pair { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 32px); padding: 28px 16px 8px; perspective: 1400px; }
.app-preview-phone { flex: 0 1 220px; min-width: 0; margin: 0; transform: rotate(-4deg) rotateY(8deg); }
.app-preview-phone + .app-preview-phone { transform: translateY(18px) rotate(4deg) rotateY(-8deg); }
.app-preview-phone img { display: block; width: 100%; height: auto; border: 6px solid #17231e; border-radius: 26px; box-shadow: 0 16px 32px #17231e24; background: #fff; }
.app-preview-phone figcaption { margin-top: 14px; text-align: center; color: #52645c; font-size: .8rem; }
/* No fixed-width device canvases: small screens keep the same composition without horizontal overflow. */
@media (max-width: 991.98px) {
  .landing-hero-copy { text-align: center; }
  .landing-hero-copy > .d-flex { justify-content: center; }
  .landing-hero .hero-subtitle { max-width: 600px; margin-inline: auto; }
  .hero-product-visual { max-width: 760px; margin-inline: auto; }
}
@media (max-width: 575.98px) {
  .landing-hero .hero-badge { font-size: .73rem; }
  .landing-hero .btn { padding: 12px 18px !important; font-size: .9rem; }
  .product-visual { border-radius: 18px; }
  .product-visual figcaption { padding: 12px; font-size: .75rem; }
  .app-preview-pair { padding: 18px 12px 28px; }
  .app-preview-phone img { border-width: 4px; border-radius: 20px; }
  .header .sitename-nav { font-size: 17px !important; }
  .header .brand-logo { width: 34px; height: 34px; }
}