/* =====================================================================
   Texas Biz Funding — site chrome skin (header / footer / buttons / type tokens)
   Matches the 2026-09 homepage design. Every class is namespaced "tbf-" so it can
   be dropped into existing interior pages (style.css + v2-skin.css) without
   touching their content. Nothing here targets bare elements or generic classes.

   Include in <head> (after the page's existing stylesheets):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=Inter:wght@500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/css/tbf-skin.css?v=1">
   Then replace the old .v2-bar + header.v2-hdr with chrome/header.html
   and footer.v2-foot with chrome/footer.html.
   ===================================================================== */

:root{
  /* color tokens (sampled from the design PNG) */
  --tbf-blue:#0e72f7;          /* primary blue: icons, links */
  --tbf-blue-hi:#067ff9;       /* button gradient top */
  --tbf-blue-mid:#006ff3;      /* button gradient middle */
  --tbf-blue-lo:#0561e3;       /* button gradient bottom */
  --tbf-blue-head:#0470f8;     /* blue headline accent ("BUILT DIFFERENT.", "Texas Business.") */
  --tbf-kicker:#0b6ff4;        /* letter-spaced kicker labels */
  --tbf-ink:#031126;           /* hero headline black-navy */
  --tbf-navy:#05142f;          /* section headings */
  --tbf-navy-2:#09174f;        /* card titles */
  --tbf-body:#1b2749;          /* lead copy */
  --tbf-text:#384465;          /* body copy */
  --tbf-muted:#5a6788;         /* small print */
  --tbf-nav:#243960;           /* nav links */
  --tbf-band:#012f61;          /* stats band navy */
  --tbf-panel:#f1f8fd;         /* light blue panels */
  --tbf-paper:#fefefe;         /* page background */
  --tbf-line:#e1e9f3;          /* hairlines */
  --tbf-card-line:#e9edf3;     /* card borders */
  /* type tokens */
  --tbf-font:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --tbf-font-label:'Inter','Inter Tight',system-ui,sans-serif;
  --tbf-font-quote:'Newsreader','Times New Roman',Georgia,serif;
  --tbf-radius:4px;
  --tbf-wrap:1180px;
}

/* ---------------- layout helper ---------------- */
.tbf-wrap{width:100%;max-width:var(--tbf-wrap);margin:0 auto;padding:0 20px;box-sizing:border-box}
@media (min-width:960px){.tbf-wrap{padding:0 40px}}

/* ---------------- buttons ---------------- */
.tbf-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 24px;border-radius:var(--tbf-radius);font-family:var(--tbf-font);font-size:15px;line-height:1;letter-spacing:-.2px;white-space:nowrap;text-decoration:none!important;box-sizing:border-box;cursor:pointer;transition:filter .15s,transform .15s,background-color .15s}
.tbf-btn svg{width:15px;height:15px;flex:none}
.tbf-btn--primary{background:linear-gradient(180deg,var(--tbf-blue-hi) 0%,var(--tbf-blue-mid) 50%,var(--tbf-blue-lo) 100%);color:#fff!important;font-weight:500;border:0;box-shadow:0 2px 6px rgba(4,90,220,.18)}
.tbf-btn--primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.tbf-btn--outline{background:rgba(255,255,255,.72);color:#192756!important;font-weight:400;border:1.5px solid #2b8cf7}
.tbf-btn--outline:hover{background:#fff}
.tbf-btn--outline-light{background:rgba(4,12,30,.18);color:#fff!important;font-weight:400;border:1.5px solid rgba(255,255,255,.95)}
.tbf-btn--outline-light:hover{background:rgba(4,12,30,.34)}
.tbf-btn--block{display:flex;width:100%}
@media (max-width:959.98px){.tbf-btn{min-height:50px;font-size:16px}}

/* ---------------- header ---------------- */
.tbf-hdr{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,#eef5fc 0%,#f8fbfe 100%);border-bottom:1px solid var(--tbf-line);font-family:var(--tbf-font)}
.tbf-hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.tbf-hdr__logo{display:flex;align-items:center;flex:none;line-height:0}
.tbf-hdr__logo img{width:190px;height:auto;display:block;margin-left:-6px}
.tbf-nav{display:none}
.tbf-hdr__cta{min-height:40px;padding:0 16px;font-size:14px;gap:8px}
.tbf-hdr__cta svg{width:13px;height:13px}
.tbf-burger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;border:0;background:none;color:var(--tbf-navy);cursor:pointer;flex:none}
.tbf-burger svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.tbf-hdr__right{display:flex;align-items:center;gap:6px}
.tbf-menu{display:none;border-top:1px solid var(--tbf-line);background:#fff;padding:4px 20px 18px}
.tbf-menu.is-open{display:block}
.tbf-menu a:not(.tbf-btn){display:block;padding:14px 2px;border-bottom:1px solid var(--tbf-line);color:var(--tbf-navy);font-weight:600;font-size:15px;text-decoration:none}
.tbf-menu .tbf-btn{margin-top:14px}
@media (min-width:960px){
  .tbf-hdr__in{height:84px}
  .tbf-hdr__logo img{width:266px;margin-left:-8px}
  .tbf-burger,.tbf-menu,.tbf-menu.is-open{display:none}
  .tbf-nav{display:flex;align-items:center;gap:23px;margin-left:auto;margin-right:26px}
  .tbf-nav a{display:inline-flex;align-items:center;gap:4px;color:var(--tbf-nav);font-size:13.5px;letter-spacing:-.3px;text-decoration:none;white-space:nowrap}
  .tbf-nav a:hover{color:var(--tbf-blue)}
  .tbf-nav svg{width:8px;height:8px;margin-top:1px}
  .tbf-nav .tbf-nav__login{margin-left:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;color:#1c2d55}
  .tbf-hdr__cta{min-height:40px;padding:0 22px;font-size:14.8px;gap:12px}
  .tbf-hdr__cta svg{width:15px;height:15px}
}
@media (min-width:1280px){.tbf-nav{gap:30px}.tbf-nav a{font-size:14px}}

/* ---------------- footer ---------------- */
.tbf-foot{background:#f3f7fc;border-top:1px solid var(--tbf-line);color:var(--tbf-text);font-family:var(--tbf-font);font-size:13px;line-height:1.5}
.tbf-foot__in{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;padding-top:30px;padding-bottom:20px}
.tbf-foot__logo{grid-column:1/-1;line-height:0}
.tbf-foot__logo img{width:190px;height:auto;display:block}
.tbf-foot h4{margin:0 0 8px;font-family:var(--tbf-font-label);font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--tbf-kicker)}
.tbf-foot nav a{display:block;padding:9px 0;font-size:14px;color:#283761;text-decoration:none}
.tbf-foot nav a:hover{color:var(--tbf-kicker);text-decoration:underline;text-underline-offset:3px}
.tbf-foot__legal{grid-column:1/-1;border-top:1px solid var(--tbf-line);padding-top:14px;font-size:12px;color:var(--tbf-muted)}
@media (min-width:960px){
  .tbf-foot__in{grid-template-columns:1.1fr 1fr 1fr 1fr;gap:28px;padding-top:34px;padding-bottom:22px}
  .tbf-foot__logo{grid-column:auto}
  .tbf-foot__logo img{width:200px}
  .tbf-foot nav a{padding:3px 0;font-size:13px}
}

/* ---------------- defensive font lock ----------------
   Interior style.css sets serif families on h1–h4 and some links with higher specificity.
   Lock the chrome's own typography so it renders identically on every page. */
.tbf-hdr,.tbf-hdr a,.tbf-hdr button,.tbf-menu a,.tbf-btn,.tbf-foot,.tbf-foot a,.tbf-foot div{font-family:var(--tbf-font)!important}
.tbf-foot h4{font-family:var(--tbf-font-label)!important;font-size:10.5px!important;font-weight:700!important;letter-spacing:2px!important;line-height:1.4!important;text-transform:uppercase!important;color:var(--tbf-kicker)!important;margin:0 0 8px!important}

/* ---------------- typography tokens (opt-in) ----------------
   Utility classes for new markup, plus an opt-in scope: add class="tbf-type" to a
   content wrapper (or <body>) to restyle its headings in the design's type system. */
.tbf-kicker{display:block;font-family:var(--tbf-font-label);font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--tbf-kicker)}
.tbf-h1{font-family:var(--tbf-font);font-weight:900;font-size:clamp(40px,6vw,62px);line-height:.88;letter-spacing:-1.2px;color:var(--tbf-ink);text-transform:uppercase}
.tbf-h2{font-family:var(--tbf-font);font-weight:800;font-size:clamp(32px,4.2vw,42px);line-height:1;letter-spacing:-1.2px;color:var(--tbf-navy)}
.tbf-accent{color:var(--tbf-blue-head);font-style:normal}
.tbf-lead{font-family:var(--tbf-font);font-size:18px;line-height:1.45;color:var(--tbf-body)}
.tbf-quote{font-family:var(--tbf-font-quote);font-size:23px;line-height:1.3;color:#161e3d}
.tbf-type h1,.tbf-type h2,.tbf-type h3{font-family:var(--tbf-font);color:var(--tbf-navy);letter-spacing:-.02em}
.tbf-type h1{font-weight:900}
.tbf-type h2{font-weight:800}
.tbf-type h3{font-weight:700}
.tbf-type p,.tbf-type li{font-family:var(--tbf-font)}
.tbf-type a:not([class]){color:var(--tbf-blue)}

/* ===== TBF content theme (interior pages) ===== */
:root{--gold:#0e72f7;--gold-dk:#0561e3;--maroon:#05142f;--wine:#031126;--ink:#031126;--v2body:#384465;--v2line:#e1e9f3;--v2cream:#f1f8fd;
--ocean:#05142f;--ocean-dark:#031126;--ocean-light:#0b3a7a;--sun:#0e72f7;--sun-light:#5aa2ff;--sun-dark:#0561e3;--cream:#f1f8fd;--cream-dark:#e6f0fb;--charcoal:#031126;--black:#031126;--border:#e1e9f3}
html body h1,html body h2,html body h3,html body .section-title,html body .page-hero h1,html body .apply-hero h1{font-family:var(--tbf-font)!important;letter-spacing:-.02em}
html body .v2-btn,html body a.v2-btn,html body .btn-primary,html body .btn-gold,html body .btn-sun,html body .city-cta-btn,html body .sticky-mobile-cta a{background:#0e72f7!important;color:#fff!important;border-color:#0e72f7!important}
html body .btn-primary:hover,html body .btn-gold:hover,html body .btn-sun:hover,html body .city-cta-btn:hover{background:#0561e3!important;color:#fff!important}
html body .city-eyebrow,html body .section-eyebrow{color:#0b6ff4!important}
html body .breadcrumb a{color:#0e72f7!important}

/* ===== TBF content theme pass 2 (hard-coded maroon/gold overrides) ===== */
html:root{--primary-blue:#0e72f7;--primary-blue-active:#0561e3;--primary-blue-hover:#0561e3;--dark-blue:#05142f}
html body .page-hero,html body .cta-banner{background:#05142f!important}
html body .page-hero::before{background:linear-gradient(135deg,rgba(3,17,38,.93) 0%,rgba(5,20,47,.86) 45%,rgba(4,97,227,.72) 100%)!important}
html body .cta-banner .cta-overlay{background:linear-gradient(135deg,rgba(3,17,38,.92) 0%,rgba(1,47,97,.86) 55%,rgba(14,114,247,.78) 100%)!important}
html body .cta-banner h2 .accent,html body .page-hero .accent,html body .accent{color:#5aa2ff!important}
html body section[style*="background:#f7f8fa"] h2{font-family:var(--tbf-font)!important;color:#05142f!important}
html body .apply-hero{background:linear-gradient(135deg,#05142f 0%,#012f61 55%,#0561e3 100%)!important}
html body .apply-hero-content h1 span,html body .apply-hero h1 .accent,html body .apply-hero h1 em,html body .apply-hero h1 strong{color:#5aa2ff!important}
html body .apply-hero .trust-item{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.22)!important;color:#fff!important}
html body .apply-hero .trust-item svg{stroke:#8fc0ff!important;color:#8fc0ff!important}
html body .form-section h2{font-family:var(--tbf-font)!important;color:#05142f!important}
html body .btn-submit,html body button[type="submit"],html body .application-form-single button[type="submit"],html body .btn-cta-gold{background:#0e72f7!important;color:#fff!important;border-color:#0e72f7!important}
html body .btn-submit:hover,html body button[type="submit"]:hover,html body .btn-cta-gold:hover{background:#0561e3!important;color:#fff!important}

/* ===== TBF eyebrow pill fix ===== */
html body .city-eyebrow{background:rgba(14,114,247,.18)!important;color:#fff!important;border:1px solid rgba(143,192,255,.45)!important}
html body .section-eyebrow{color:#0b6ff4!important}