/* FieldKit navy + gold palette (preview, 2026-10-04).
   Loaded last on every page, after site.css and any page <style>, so it only changes color.
   Remove this one file (and its <link>) to go back to the blue palette. No layout or copy changes. */
:root {
  --pal-navy: #0e1a2b;      /* main dark: header, hero, dark panels */
  --pal-navy-2: #17263b;    /* raised navy surface */
  --pal-navy-line: #2b3b53; /* hairlines on navy */
  --pal-gold: #ebbd68;      /* accent: buttons, highlights, rules, labels on navy */
  --pal-gold-2: #f3cd85;    /* gold hover */
  --pal-bronze: #8a6416;    /* gold-family text on light surfaces (AA) */
  --pal-bronze-2: #6e5112;
  --pal-gold-tint: #fbf3e1; /* pale gold fill on light surfaces */
  --pal-gold-line: #e9cf96;
  --pal-on-navy: #f7f9fc;
  --pal-on-navy-2: #c9d3e0;
  --pal-link: #1b64cc;      /* blue kept only for plain text links */
  --pal-link-2: #134b9c;

  /* legacy accent variables used by site.css and page styles */
  --green: var(--pal-bronze);
  --green-2: var(--pal-bronze-2);
  --green-tint: var(--pal-gold);
  --green-text: var(--pal-on-navy-2);
  --mint: var(--pal-gold);
  --sand: #ffffff;
  --muted: #5d6a7b;         /* was #6b7889 (4.26:1 on #f7f9fc); now 5.22:1, passes AA */
}

/* plain text links: the one place blue stays */
a { color: var(--pal-link); } a:hover { color: var(--pal-link-2); }

/* eyebrow labels: gold pill */
.eyebrow { background: var(--pal-gold-tint); border-color: var(--pal-gold-line); color: #7a5a14; }

/* buttons: gold with navy text */
.btn-primary, .nav-links a.btn-primary { background: var(--pal-gold); color: var(--pal-navy); }
.btn-primary:hover, .nav-links a.btn-primary:hover { background: var(--pal-gold-2); color: var(--pal-navy); }
.btn-ghost { color: var(--pal-navy); } .btn-ghost:hover { color: var(--pal-bronze); }
.cta .btn-light, .signup .btn, .newsletter-card .btn-light { background: var(--pal-gold); color: var(--pal-navy); }
.cta .btn-light:hover, .signup .btn:hover, .newsletter-card .btn-light:hover { background: var(--pal-gold-2); color: var(--pal-navy); }

/* header: navy */
.nav { background: var(--pal-navy); border-bottom-color: var(--pal-navy-line); }
.nav.open { background: var(--pal-navy); }
.nav .brand, .nav .brand .wordmark { color: var(--pal-on-navy); }
.nav .brand .wordmark b, .nav .brand em { color: var(--pal-gold); }
.nav .brand .tagline { color: var(--pal-gold); }
.brand .tagline::before, .brand .tagline::after { background: var(--pal-gold); }
.nav-links a, .nav-dd-toggle { color: var(--pal-on-navy-2); }
.nav-links a:hover, .nav-dd-toggle:hover, .nav-dd:focus-within .nav-dd-toggle { color: var(--pal-gold); }
.nav-toggle svg { stroke: var(--pal-on-navy); }
.nav-dd-menu { background: var(--pal-navy); border-color: var(--pal-navy-line); }
.nav-dd-menu a:hover { background: rgba(235, 189, 104, .12); }
@media (max-width: 900px) {
  .nav-links { background: var(--pal-navy); border-bottom-color: var(--pal-navy-line); }
}
.nav a:focus-visible, .nav button:focus-visible { outline: 2px solid var(--pal-gold); outline-offset: 3px; }

/* footer brand on light background */
footer .brand .wordmark b, footer .brand em { color: var(--pal-bronze); }
footer .brand .tagline { color: var(--pal-bronze); }
footer nav a:hover { color: var(--pal-bronze); }

/* homepage hero: full-width navy band (border-image paints outside the box without changing layout) */
main > .hero { border-image: linear-gradient(var(--pal-navy) 0 0) fill 0 / / 0 100vw; color: var(--pal-on-navy); }
main > .hero h1 { color: var(--pal-on-navy); }
main > .hero h1 em { color: var(--pal-gold); }
main > .hero .sub { color: var(--pal-on-navy-2); }
main > .hero .author-note__label, main > .hero .author-note__detail { color: #bdc9d9; }
main > .hero .author-note__name, main > .hero .author-note a { color: var(--pal-on-navy); }
main > .hero .author-note a:hover { color: var(--pal-gold); }
main > .hero .author-note img { border-color: var(--pal-navy-line); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 20px rgba(0, 0, 0, .22); }
main > .hero .btn-ghost { color: var(--pal-on-navy); } main > .hero .btn-ghost:hover { color: var(--pal-gold); }
main > .hero .hero-for { color: var(--pal-on-navy); border-left-color: var(--pal-gold); }
main > .hero .hero-alt { color: var(--pal-on-navy-2); }
main > .hero .hero-alt a { color: var(--pal-on-navy); text-decoration-color: var(--pal-gold); }
main > .hero .hero-alt a:hover { color: var(--pal-gold); }
main > .hero a:focus-visible { outline-color: var(--pal-gold); }
.review-card { color: var(--ink); border-color: var(--pal-gold-line); }
.review-card .eyebrow { background: var(--pal-gold-tint); }
.review-card .step, .review-card .step:last-of-type { border-color: #e6dcc6; }
.step .n { color: var(--pal-bronze); }

/* rules, bullets, numbers */
.card .ends li::before, .price-card .ends li::before { background: var(--pal-gold); }
.card svg[stroke="#1b64cc"], .checks svg[stroke="#1b64cc"], svg[stroke="#1b64cc"] { stroke: var(--pal-bronze); }
.not-block, .not-sure, .price-card.after, .guide, .callout, .shop-talk, .quoteband { border-color: var(--pal-gold-line); }
.pull { border-left-color: var(--pal-gold); }
.faq summary:hover { color: var(--pal-bronze); }

/* "How I work" panel: navy with gold numbers and rules */
.how { background: var(--pal-navy); }
.how .eyebrow { color: var(--pal-gold); background: rgba(235, 189, 104, .08); border-color: rgba(235, 189, 104, .35); }
.phase { border-top-color: rgba(235, 189, 104, .45); }
.phase .n { color: var(--pal-gold); }
.phase p { color: var(--pal-on-navy-2); }

/* demo tabs */
.tab[aria-selected="true"] { background: var(--pal-gold); border-color: var(--pal-gold); color: var(--pal-navy); }
.tab:hover { border-color: var(--pal-gold); }

/* dark panels */
.cta .eyebrow { color: var(--pal-gold) !important; border-color: rgba(235, 189, 104, .4) !important; }
.newsletter-card { background: var(--pal-navy-2); }
.newsletter-card::before { border-color: rgba(235, 189, 104, .2); box-shadow: 0 0 0 44px rgba(235, 189, 104, .04), 0 0 0 88px rgba(235, 189, 104, .025); }
.newsletter-kicker .eyebrow { color: var(--pal-gold); background: rgba(255, 255, 255, .04); border-color: rgba(235, 189, 104, .35); }
.newsletter-pulse { background: var(--pal-gold); box-shadow: 0 0 0 5px rgba(235, 189, 104, .14); }
.newsletter-topics span { color: var(--pal-on-navy-2); border-color: var(--pal-navy-line); }
.newsletter-archive:hover { color: var(--pal-gold); }
.nl-inline input:focus { border-color: var(--pal-bronze); box-shadow: 0 0 0 3px rgba(235, 189, 104, .35); }
.signup input:focus { border-color: var(--pal-gold); }
.shop-talk .signup input[type=email]:focus { border-color: var(--pal-bronze); }

/* field notes */
.fn-tag { color: var(--pal-bronze); }
.fn-new { background: var(--pal-gold-tint); color: var(--pal-bronze-2); }
.fn-read, .fn-latest .fn-all, .linkedin-post-link { color: var(--pal-navy); text-decoration: underline; text-decoration-color: var(--pal-gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fn-latest .fn-all:hover, .linkedin-post-link:hover { color: var(--pal-bronze); }
.note-row h2 a:hover { color: var(--pal-bronze); }

/* LinkedIn band */
.linkedin-section { background: #ffffff; border-color: var(--line); }
.linkedin-section::before { color: rgba(235, 189, 104, .12); }
.linkedin-follow { background: var(--pal-navy); color: var(--pal-on-navy); }
.linkedin-follow:hover { background: var(--pal-navy-2); color: var(--pal-gold); }
.linkedin-post::after { background: var(--pal-navy); color: var(--pal-gold); }
.linkedin-post-tags span { color: #4a4030; background: var(--pal-gold-tint); }
.linkedin-controls button:hover:not(:disabled) { background: var(--pal-navy); color: var(--pal-gold); }

/* chat widget */
.chat-fab { background: var(--pal-gold); color: var(--pal-navy); }
.chat-fab:hover { background: var(--pal-gold-2); }
.chat-head { background: var(--pal-navy); color: var(--pal-on-navy); }
.chat-head span { color: var(--pal-gold); }
.chat-log .msg.user { background: var(--pal-navy); color: var(--pal-on-navy); }
.chat-form input:focus { outline-color: var(--pal-bronze); border-color: var(--pal-bronze); }
.chat-send { background: var(--pal-gold); color: var(--pal-navy); }
.chat-send:hover { background: var(--pal-gold-2); }