html { scroll-behavior: smooth; }
/* Offset anchor scroll so the sticky 72px nav doesn't cover section headings */
section[id], [id="top"] { scroll-margin-top: 88px; }
body {
  background:#FAFAF7;
  color:#0F1115;
  font-family:'Inter',system-ui,sans-serif;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
}
.font-display { font-family:'Fraunces',serif; letter-spacing:-0.02em; font-weight:400; }
.eyebrow {
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#5A6168;
}
.link-green {
  color:#1E7A4D;
  text-decoration:underline;
  text-decoration-color:#1E7A4D;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.link-green:hover { color:#155E3A; }
.btn-green {
  background:#1E7A4D;
  color:#FAFAF7;
  border-radius:8px;
  padding:12px 20px;
  font-weight:500;
  transition:background-color 160ms ease, transform 160ms ease;
  display:inline-block;
  text-align:center;
}
.btn-green:hover { background:#155E3A; }
.btn-green:active { transform:translateY(1px); }
.btn-ghost {
  color:#0F1115;
  border-radius:8px;
  padding:10px 14px;
  font-weight:500;
  transition:background-color 160ms ease;
}
.btn-ghost:hover { background:#EFEDE5; }
.pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}
.pill-green { background:rgba(30,122,77,0.10); color:#1E7A4D; }
.pill-slate { background:rgba(90,97,104,0.10); color:#5A6168; }
.card {
  background:#FFFFFF;
  border:1px solid #E5E3DC;
  border-radius:12px;
  transition:transform 220ms ease, border-color 220ms ease;
}
.card.lift:hover { transform:translateY(-4px); border-color:#c9c5b9; }
.nav-link { color:#0F1115; font-weight:500; font-size:14px; }
.nav-link:hover { color:#1E7A4D; }
.input {
  background:#FFFFFF;
  border:1px solid #E5E3DC;
  border-radius:8px;
  padding:12px 14px;
  width:100%;
  font-size:15px;
  color:#0F1115;
  transition:border-color 160ms ease, box-shadow 160ms ease;
}
.input:focus { outline:none; border-color:#1E7A4D; box-shadow:0 0 0 3px rgba(30,122,77,0.15); }
.progress-track { height:4px; background:#EFEDE5; border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; background:#1E7A4D; border-radius:999px; }
#site-nav { transition:background-color 200ms ease, border-color 200ms ease; }
#site-nav.is-solid { background-color:#FAFAF7; border-bottom:1px solid #E5E3DC; }
.dropdown-panel {
  opacity:0;
  pointer-events:none;
  transform:translateY(-4px);
  transition:opacity 140ms ease, transform 140ms ease;
}
.has-open .dropdown-panel { opacity:1; pointer-events:auto; transform:translateY(0); }
.phone-screen-bg { background:linear-gradient(180deg,#FFFFFF 0%,#FAFAF7 100%); }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline:2px solid #1E7A4D;
  outline-offset:2px;
}
h1,h2,h3 { color:#0F1115; }
h1 { line-height:1.05; }
h2 { line-height:1.15; }
h3 { line-height:1.25; }
.stat-label {
  font-weight:600;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#5A6168;
}
.stat-value {
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-weight:500;
  font-size:15px;
  color:#0F1115;
}
.hero-num {
  font-family:'Fraunces',serif;
  font-weight:400;
  letter-spacing:-0.02em;
  color:#0F1115;
}
.row-hover:hover { background:#F5F3EC; }
.divider { border-top:1px solid #E5E3DC; }

/* Disabled / "coming soon" links */
.is-disabled {
  color:#B5B3AA !important;
  pointer-events:none;
  cursor:not-allowed;
  text-decoration:none;
}
.is-disabled svg { opacity:0.55; }

/* Skip-to-content link — visually hidden until focused */
.skip-link {
  position:absolute;
  top:-40px;
  left:8px;
  z-index:100;
  background:#1E7A4D;
  color:#FAFAF7;
  padding:8px 14px;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:top 160ms ease;
}
.skip-link:focus { top:8px; outline:2px solid #FAFAF7; outline-offset:2px; }

/* Google Play app badge */
.app-badge {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#0F1115;
  color:#FAFAF7;
  border-radius:10px;
  padding:8px 14px;
  font-family:'Inter',sans-serif;
  line-height:1.1;
  transition:background-color 160ms ease;
}
.app-badge:hover { background:#1E7A4D; color:#FAFAF7; }
.app-badge .badge-icon { width:22px; height:22px; flex-shrink:0; }
.app-badge .badge-text { display:flex; flex-direction:column; align-items:flex-start; }
.app-badge .badge-text .small { font-size:10px; opacity:0.7; letter-spacing:0.03em; }
.app-badge .badge-text .big { font-size:14px; font-weight:500; }

/* Hero app link */
.app-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#1E7A4D;
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.app-link:hover { color:#155E3A; }

/* Login modal */
.login-modal { display: none; }
.login-modal:not(.hidden) { display: flex; }
.login-card { animation: loginIn 180ms ease-out; box-shadow: 0 30px 80px -20px rgba(15,17,21,0.30); }
@keyframes loginIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.oauth-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  background:#FFFFFF;
  border:1px solid #E5E3DC;
  border-radius:8px;
  padding:11px 14px;
  font-size:14px;
  font-weight:500;
  color:#0F1115;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.oauth-btn:hover { border-color:#0F1115; background:#FAFAF7; }
.bg-line { background:#E5E3DC; }
.form-msg.is-error { color:#A0341D; }
.form-msg.is-ok    { color:#1E7A4D; }

/* How it works — thin connecting line between steps on desktop */
@media (min-width: 768px) {
  .how-steps > li + li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -2.5rem;
    width: 2rem;
    height: 1px;
    background: #E5E3DC;
  }
  @media (min-width: 1024px) {
    .how-steps > li + li::before {
      left: -3.75rem;
      width: 3rem;
    }
  }
}