/* Beefcake marketing + auth site — shared base.
   Visual spec lives inline on each page (faithful to the design handoff);
   this file carries the reset, global type/selection, keyframes, the
   responsive breakpoints, and the :hover/:focus states (which were JS in
   the prototype). Accent green #8BC63F on the marketing/auth pages; the
   Plans page uses the brighter in-app green #63E23C via its own <style>. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  background: #0B0D10;
  color: #F4F6F7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: #8BC63F; color: #0B0D10; }
a { color: inherit; text-decoration: none; }
input, textarea, select, button { font-family: inherit; }
i[data-lucide] { display: block; }

@keyframes bc-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@keyframes bc-rise { from { height: 18%; } }
@keyframes bc-spin { to { transform: rotate(360deg); } }
@keyframes bc-toast-in { from { opacity: 0; transform: translate(-50%,14px); } to { opacity: 1; transform: translate(-50%,0); } }
@keyframes bc-modal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- Interactive states (were inline JS style-hover/style-focus) ---- */
.nav-link:hover { color: #F4F6F7; }
.foot-link:hover { color: #B6BCC4; }
.btn-cta:hover { background: #7CB836; }
.btn-store:hover { background: #EDEFF1; }
.ghost-btn:hover { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.04); }
.link-green:hover { color: #A9D96A; }
.eye-btn:hover { color: #C3C8CF; }
.field:focus { border-color: #8BC63F; box-shadow: 0 0 0 3px rgba(139,198,63,.18); }

/* Plans page (brighter app green) */
.icon-hover:hover { opacity: .7; }
.green-hover:hover { background: #54CE30; }
.yellow-hover:hover { background: #E5C82F; }
.neutral-hover:hover { background: #2F333A; }
.danger-hover:hover { background: rgba(255,107,107,.1); }
.ghosttext-hover:hover { color: #C3C8CF; }

/* ---- Responsive (marketing) ---- */
@media (max-width: 900px) {
  .bc-hero { grid-template-columns: 1fr !important; text-align: center; }
  .bc-hero-copy { align-items: center !important; margin: 0 auto; }
  .bc-phonewrap { margin: 0 auto; }
  .bc-nav-links { display: none !important; }
  .bc-who { grid-template-columns: 1fr !important; }
  .bc-contact { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .bc-features { grid-template-columns: 1fr !important; }
  .bc-features .bc-span2 { grid-column: auto !important; }
  .bc-testi { grid-template-columns: 1fr !important; }
  .bc-h1 { font-size: 48px !important; }
}
/* ---- Responsive (auth) ---- */
@media (max-width: 880px) {
  .bc-auth-brand { display: none !important; }
  .bc-auth { grid-template-columns: 1fr !important; }
}