/* site-chrome.css — shared marketing header + footer for all PUBLIC pages
   (landing, how-it-works, blog, article, legal). Self-contained namespace (.sc-*)
   with its own palette vars so it renders identically regardless of the page's
   own stylesheet. The app (logged-in) uses its own sidebar nav, not this. */
.sc-header, .sc-footer {
  --sc-ink: #16161c; --sc-ink2: #3a3a44; --sc-muted: #82828c;
  --sc-bg: #ffffff; --sc-hair: #ececec; --sc-accent: #3da63d; --sc-accent-deep: #2e8b2e;
  --sc-disp: "Space Grotesk", system-ui, sans-serif; --sc-sans: "IBM Plex Sans", system-ui, sans-serif;
}

/* ---------- header ---------- */
.sc-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,253,246,.88); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid var(--sc-hair); font-family: var(--sc-sans);
}
.sc-header-in {
  max-width: 1140px; margin: 0 auto; padding: 0 32px; height: 66px;
  display: flex; align-items: center; gap: 24px;
}
.sc-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sc-brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--sc-accent); color: #fff; display: grid; place-items: center; }
.sc-brand-name { font-family: var(--sc-disp); font-weight: 700; font-size: 20px; color: var(--sc-ink); letter-spacing: -.02em; }
.sc-brand-name span { color: var(--sc-accent); }
.sc-nav { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
.sc-nav a {
  text-decoration: none; color: var(--sc-ink2); font-weight: 500; font-size: 15px;
  padding: 8px 13px; border-radius: 8px; white-space: nowrap; transition: background .14s, color .14s;
}
.sc-nav a:hover { background: #f3f4f3; color: var(--sc-ink); }
.sc-nav a.current { color: var(--sc-accent-deep); }
.sc-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sc-signin { text-decoration: none; color: var(--sc-ink2); font-weight: 600; font-size: 15px; padding: 8px 13px; border-radius: 8px; }
.sc-signin:hover { background: #f3f4f3; color: var(--sc-ink); }
.sc-cta {
  text-decoration: none; background: var(--sc-accent); color: #fff; font-weight: 600; font-size: 15px;
  padding: 9px 18px; border-radius: 9px; white-space: nowrap;
}
.sc-cta:hover { background: var(--sc-accent-deep); }
.sc-menu-btn { display: none; margin-left: auto; background: none; border: 0; color: var(--sc-ink); cursor: pointer; padding: 8px; }

@media (max-width: 780px) {
  .sc-nav { display: none; }
  .sc-actions .sc-signin { display: none; }
  .sc-header-in { gap: 12px; padding: 0 18px; }
}

/* ---------- footer ---------- */
.sc-footer { background: #16161c; color: #d0d0cb; font-family: var(--sc-sans); margin-top: 64px; }
.sc-footer-in {
  max-width: 1140px; margin: 0 auto; padding: 52px 32px 30px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 32px;
}
.sc-foot-brand .sc-brand-name { color: #fff; }
.sc-foot-brand .sc-brand-mark { background: #3da63d; }
.sc-foot-tag { font-size: 14px; line-height: 1.6; color: #8f8f8b; margin: 14px 0 0; max-width: 30ch; }
.sc-foot-col h4 { font-family: var(--sc-disp); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #fff; margin: 2px 0 14px; }
.sc-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sc-foot-col a { color: #d0d0cb; text-decoration: none; font-size: 14.5px; }
.sc-foot-col a:hover { color: #fff; }
.sc-foot-col a.current { color: #fff; font-weight: 600; }
.sc-footer-bottom { border-top: 1px solid #2c2c33; }
.sc-footer-bottom-in {
  max-width: 1140px; margin: 0 auto; padding: 18px 32px 28px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline;
}
.sc-copyright { font-size: 13px; color: #8f8f8b; }
.sc-disclaimer { font-size: 12.5px; color: #7c7a70; line-height: 1.55; max-width: 70ch; }

@media (max-width: 780px) {
  .sc-footer-in { grid-template-columns: 1fr 1fr; gap: 28px; padding: 40px 20px 24px; }
  .sc-footer-bottom-in { padding: 16px 20px 24px; }
}