/* ─────────────────────────────────────────────────────────────────────────
   Shared marketing chrome (2026-07-11): ONE header + footer used on every public
   page (landing, pricing, compare, and extending to auth/legal), so a visitor
   always sees the same navigation and footer and stays oriented (K + partner
   feedback). Plain CSS keyed on tokens.css variables (loaded everywhere) so it
   works on both the bespoke landing and the Tailwind money pages. Raw hex here is
   the dark-footer palette (grandfathered in ds-audit R7).
   ───────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Newsreader';
  src: url('/static/fonts/Newsreader-latin-wght.woff2') format('woff2');
  font-weight: 200 700; font-style: normal; font-display: swap;
}

.sc-hdr { position: sticky; top: 0; z-index: 50; background: rgba(250,249,247,.82);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s; }
.sc-hdr.sc-scrolled { border-bottom-color: var(--border, #EDE7E0); }
.sc-nav { max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 64px;
  display: flex; align-items: center; justify-content: space-between; }
.sc-brand { font-family: 'Newsreader', Georgia, serif; font-size: 22px; font-weight: 600;
  letter-spacing: -.02em; color: var(--cf-text, #1F1F1F); line-height: 1; text-decoration: none; }
.sc-brand b { font-weight: 600; color: var(--cf-accent, #8D4F3D); }
.sc-links { display: flex; align-items: center; gap: 30px; }
.sc-links a { font-size: 14.5px; font-weight: 500; color: var(--cf-text-secondary, #57534E); text-decoration: none; }
.sc-links a:hover { color: var(--cf-text, #1F1F1F); }
.sc-cta { display: flex; align-items: center; gap: 12px; }
.sc-signin { font-size: 14.5px; font-weight: 600; color: var(--cf-text-secondary, #57534E); padding: 9px 14px;
  border: 1px solid var(--cf-border, #E0D8CF); border-radius: 10px; text-decoration: none; }
.sc-signin:hover { border-color: var(--cf-accent, #8D4F3D); color: var(--cf-accent, #8D4F3D); }
.sc-btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px;
  border-radius: 11px; padding: 12px 20px; background: var(--cf-accent, #8D4F3D); color: #fff;
  border: 1px solid transparent; text-decoration: none; white-space: nowrap; transition: background .15s; }
.sc-btn:hover { background: var(--cf-accent-hover, #7A4131); }
.sc-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--cf-border, #E0D8CF); border-radius: 10px;
  color: var(--cf-text, #1F1F1F); cursor: pointer; }
.sc-mobile { display: none; }
.sc-mobile .sc-nav { height: auto; flex-direction: column; align-items: stretch; padding-top: 8px; padding-bottom: 16px; }
.sc-mobile a { display: block; padding: 13px 2px; font-size: 15.5px; font-weight: 500;
  color: var(--cf-text-secondary, #57534E); border-bottom: 1px solid var(--border, #EDE7E0); text-decoration: none; }
.sc-mobile a.sc-mob-cta { color: var(--cf-accent, #8D4F3D); font-weight: 600; border-bottom: none; }
@media (max-width: 820px) {
  .sc-links, .sc-signin { display: none; }
  .sc-toggle { display: flex; }
  .sc-mobile.sc-open { display: block; border-top: 1px solid var(--border, #EDE7E0); background: rgba(250,249,247,.98); }
}

.sc-footer { background: #241F1C; color: #C9BEB3; padding: 56px 0 40px; }
.sc-foot-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.sc-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 32px; }
@media (max-width: 820px) { .sc-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .sc-foot-grid { grid-template-columns: 1fr; gap: 26px; } }
.sc-foot-brand { font-family: 'Newsreader', Georgia, serif; font-size: 22px; color: #fff; font-weight: 600; }
.sc-foot-brand b { color: #C88F7C; }
.sc-foot-tag { font-size: 13.5px; margin-top: 10px; line-height: 1.6; max-width: 34ch; }
.sc-foot-h { color: #fff; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.sc-foot-links a { display: block; font-size: 13.5px; margin-bottom: 9px; color: #C9BEB3; text-decoration: none; }
.sc-foot-links a:hover { color: #fff; }
.sc-foot-sub .sc-row { display: flex; }
.sc-foot-sub input[type="email"] { width: 100%; background: #3F3833; border: 1px solid #554C46;
  border-radius: 8px 0 0 8px; padding: 9px 12px; font-size: 13px; color: #fff; }
.sc-foot-sub input[type="email"]::placeholder { color: #9A8F84; }
.sc-foot-sub button { background: #fff; color: #1F1F1F; border: none; padding: 0 18px; font-size: 13px;
  font-weight: 600; border-radius: 0 8px 8px 0; cursor: pointer; }
.sc-foot-consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
  font-size: 11.5px; line-height: 1.5; color: #9A8F84; }
.sc-foot-consent input[type="checkbox"] { flex: none; width: 15px; height: 15px; margin: 2px 0 0;
  accent-color: var(--cf-accent, #8D4F3D); }
.sc-foot-legal { max-width: 1120px; margin: 40px auto 0; padding: 22px 24px 0;
  border-top: 1px solid #3F3833; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
  font-size: 12px; color: #9A8F84; }
.sc-hdr :focus-visible, .sc-footer :focus-visible { outline: 2px solid var(--cf-accent, #8D4F3D); outline-offset: 2px; }