/* ============================================================================
   Keystead Vault — shared site chrome + brand system. Link this ONE file on
   every public page so brand tokens, fonts, header, footer, and buttons are
   identical everywhere and a rebrand is EDIT-ONCE. A new page just links it.

   Header:  <header class="k-header"><div class="k-bar">
              <a class="k-brand" href="/"><img src="/assets/keystead-mark.png" alt=""> Keystead <span class="g">Vault</span></a>
              <nav class="k-nav"> …links… <a class="k-cta">CTA</a> </nav>
            </div></header>
   Footer:  <footer class="k-footer">
              <div class="k-fbrand">Keystead <span class="g">Vault</span></div>
              <div>Everything to run it today. Everything to hand it off someday.</div>
              <div>A product of ScorpEase LLC.</div>
              <div class="k-flinks"> …links… </div>
            </footer>
   Buttons: <a class="k-btn primary|ghost|gold">…</a>
   ============================================================================ */
/* Self-hosted from /vendor/fonts (latin variable WOFF2) — no Google Fonts CDN, so no viewer IP
   leaves for Google. Matches the app + the self-hosted supabase.js trust boundary. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/vendor/fonts/inter-v2.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/vendor/fonts/inter-ext-v2.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url('/vendor/fonts/inter-italic-v2.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;src:url('/vendor/fonts/source-serif-4-v2.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;src:url('/vendor/fonts/source-serif-4-ext-v2.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* ---- Brand palette (the ONE place to change a colour) ---- */
  --navy:#1c3d5a; --navy-2:#274d6e; --navy-deep:#12293f;
  --steel:#b23a2e; --steel-soft:#f7e8e5;
  --gold:#c6a24c; --gold-deep:#a9862f;
  /* Second blue resolved: a lighter, calmer tint of navy's own hue (was #3f7ca6, a competing
     mid-cyan). Now clearly subordinate to --navy — same family, ranked by lightness — and a
     touch darker than before so "later"/informational text clears contrast. */
  --accent-cool:#4f6d86; --accent-cool-soft:#eef1f4; --accent:#4f6d86;
  --ink:#221f1e; --muted:#6d6663; --line:#e8e1dc; --bg:#f8f5f1; --surface:#ffffff;
  --ok:#237a4d; --warn:#9c5e18; --danger:#a8322a; --danger-soft:#f6e6e3;
  /* ---- Type ---- (aliases so pages using either name inherit) */
  --font-head:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --head:var(--font-head); --sans:var(--font-sans);
}

/* Visible keyboard focus across all marketing/legal pages (WCAG 2.4.7). */
:focus-visible{outline:2px solid var(--accent-cool,#3f7ca6);outline-offset:2px;border-radius:4px}

/* ================= HEADER ================= */
.k-header{position:sticky;top:0;z-index:50;padding:14px 22px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 85%, transparent);backdrop-filter:saturate(1.1) blur(8px);
  -webkit-backdrop-filter:saturate(1.1) blur(8px)}
.k-bar{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px}
/* inline-block (not flex) so "Keystead Vault" flows as normal inline text — collapses to exactly one
   space between the words. The icon is spaced with a margin instead of flex gap (flex made the word
   and the gold "Vault" separate items, so the gap landed between them and read as a double space). */
.k-brand{display:inline-block;text-decoration:none;line-height:1;
  font-family:var(--font-head);font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--navy);white-space:nowrap}
.k-brand img{width:28px;height:28px;border-radius:6px;object-fit:contain;display:inline-block;vertical-align:middle;margin-right:7px}
.k-brand .g{color:var(--gold);font-weight:500}
.k-nav{display:flex;flex:1;min-width:0;align-items:center;justify-content:flex-end;gap:20px;flex-wrap:wrap}
.k-nav a,.k-nav button{font-family:var(--font-sans);font-size:14px;font-weight:600;line-height:1;
  color:var(--muted);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.k-nav a:hover,.k-nav button:hover{color:var(--navy)}
.k-nav .k-cta{background:var(--navy);color:#fff;padding:9px 15px;border-radius:9px}
.k-nav .k-cta:hover{background:var(--navy-2);color:#fff}
.k-nav .k-cta.ghost{background:var(--surface);color:var(--navy);border:1px solid var(--line)}
.k-nav .k-cta.ghost:hover{background:var(--surface);border-color:var(--navy);color:var(--navy)}

/* ================= FOOTER ================= */
.k-footer{max-width:1080px;margin:36px auto 0;padding:40px 22px 56px;text-align:center;
  font-family:var(--font-sans);color:var(--muted);font-size:13px;line-height:1.6;border-top:1px solid var(--line)}
.k-footer .k-fbrand{font-family:var(--font-head);color:var(--navy);font-size:16px;margin-bottom:6px}
.k-footer .k-fbrand .g{color:var(--gold-deep)}
.k-footer .k-flinks{margin-top:10px;font-size:12.5px}
.k-footer .k-flinks a{color:var(--muted);text-decoration:none}
.k-footer .k-flinks a:hover{color:var(--navy)}

/* ================= BUTTONS ================= (prefixed so they never collide with the app's own .btn) */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);
  font-weight:600;font-size:15px;line-height:1;padding:13px 22px;border-radius:11px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .15s,box-shadow .15s,transform .15s,border-color .15s,filter .15s}
.k-btn.primary{background:var(--navy);color:#fff}
.k-btn.primary:hover{background:var(--navy-2)}
.k-btn.ghost{background:var(--surface);color:var(--navy);border-color:var(--navy)}
.k-btn.ghost:hover{background:color-mix(in srgb, var(--navy) 5%, var(--surface))}
.k-btn.gold{background:var(--gold);color:#20140a}
.k-btn.gold:hover{filter:brightness(1.06)}

@media(max-width:520px){ .k-bar{gap:10px} .k-nav{gap:14px} }