/* HB Battle Stability + Human Marketing Layer v1
   Loaded last so the visual system has one predictable finishing layer. */
html, body { max-width:100%; overflow-x:hidden; }
img, video, canvas, svg { max-width:100%; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }

:root {
  --hb-brand: #13a96b;
  --hb-brand-strong: #0b8f59;
  --hb-brand-soft: rgba(19,169,107,.12);
  --hb-gold: #d6a63d;
  --hb-ink: #14221b;
  --hb-muted: #64746c;
  --hb-surface: #ffffff;
  --hb-border: rgba(20,34,27,.10);
}
[data-theme="dark"] {
  --hb-brand: #e7b75c;
  --hb-brand-strong: #c98a2e;
  --hb-brand-soft: rgba(231,183,92,.13);
}
[data-theme="green"] {
  --hb-brand: #22e67a;
  --hb-brand-strong: #16bd60;
  --hb-brand-soft: rgba(34,230,122,.14);
}

/* Public/marketing pages: readable, editorial rather than template-like. */
.site-header, .marketing-home .hero, .marketing-home .content {
  isolation:isolate;
}
.marketing-home .content p,
.marketing-home .content li,
.marketing-home .note,
.marketing-home .faq-item p {
  line-height:1.75;
}
.marketing-home .hero h1,
.marketing-home .hero h2,
.marketing-home .content h2,
.marketing-home .content h3 {
  text-wrap:balance;
}
.marketing-home a:focus-visible,
.marketing-home button:focus-visible,
body:focus-visible {
  outline:3px solid var(--hb-brand);
  outline-offset:3px;
}

/* Consistent card language across public pages. */
.marketing-home .step,
.marketing-home .note,
.marketing-home .faq-item,
.marketing-home .guide-list a {
  border-radius:18px;
  box-shadow:0 8px 28px rgba(10,30,20,.06);
}

/* App: stable touch targets and safe-area spacing. */
@media (max-width: 700px) {
  button, .btn, .nav-item, .nav-fab, .header-action, .header-back {
    min-height:42px;
  }
  .bottom-nav {
    padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .auth-content {
    padding-left:max(18px, env(safe-area-inset-left, 0px)) !important;
    padding-right:max(18px, env(safe-area-inset-right, 0px)) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}
/* V30 editorial article layer */
.article-meta-line{margin-top:12px;opacity:.78;font-size:13px;line-height:1.6}
.article-detail{max-width:820px;margin-inline:auto}
.article-summary{margin:0 0 24px;padding:16px 18px;border-left:3px solid var(--accent,#f5a400);background:rgba(255,255,255,.035);border-radius:10px;font-size:17px;line-height:1.7}
.article-author-box,.article-sources{margin-top:28px;padding:18px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.025);line-height:1.7}
.article-author-box p,.article-sources p{margin:.4rem 0 0}
.art-author{margin-top:5px;font-size:12px;opacity:.68}
@media(max-width:640px){.article-detail{padding-inline:16px}.article-summary{font-size:15px}.article-meta-line{font-size:12px}}
/* V31 editorial polish */
.article-detail-cover{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:18px;margin:0 0 22px;box-shadow:var(--shadow,0 12px 40px rgba(0,0,0,.12));}
.article-detail h2{margin-top:30px;line-height:1.25;}
.article-detail h3{margin-top:24px;line-height:1.3;}
.article-detail p,.article-detail li{line-height:1.82;}
.article-detail blockquote{margin:24px 0;padding:16px 20px;border-left:4px solid var(--red,#ef4444);background:var(--off-white,#f7f7f7);border-radius:0 12px 12px 0;}
.article-author-box,.article-sources{margin-top:28px;padding:18px;border:1px solid var(--border,#ddd);border-radius:16px;background:var(--surface,#fff);}
@media(max-width:640px){.article-detail-cover{max-height:320px;border-radius:14px}.article-detail{padding-left:16px;padding-right:16px}.article-detail p,.article-detail li{font-size:15px;line-height:1.75}}