/* Suprihub brand - light theme (Canvas Paper) with navy anchors.
   Loaded after each page's inline <style>. Source: skills/suprihub-brand/SKILL.md (light theme).
   Paper #F5F1E8 · Surface #FDFBF6 · Surface 2 #EFE9D9 · Border #E1D9C4
   Text #13233B · Headings Hub Navy #0B2545 · Muted #5B6474 · Accent text dark ember #A15C07
   Buttons stay Route Gold #FFB238 with navy text. */

:root{
  --green:#A15C07;
  --green-l:#8A4E05;
  --green-glow:rgba(255,178,56,.28);
  --cyan:#A15C07;
  --yellow:#A15C07;
  --muted:#5B6474;
  --text-secondary:#13233B;
  --border:#E1D9C4;
}

/* Navy anchors: nav, mobile menu, Services dropdown, driver/business cards, final CTA, footer.
   They re-declare the dark-theme tokens so everything inside keeps its original navy styling. */
nav,.mob-nav,footer,.fcta,.dc,.dropdown,.navy{
  --green:#FFB238;
  --green-l:#FFC766;
  --cyan:#D98E1D;
  --yellow:#FFD08A;
  --muted:#A9B8CD;
  --text-secondary:#C3CEDD;
  --border:rgba(255,255,255,.1);
  color:#F5F1E8;
}

html,body{background:#F5F1E8}
body{color:#13233B}
h1,h2,h3,h4{color:#0B2545}
nav h1,nav h2,nav h3,nav h4,.mob-nav h1,.mob-nav h2,.mob-nav h3,.mob-nav h4,
footer h1,footer h2,footer h3,footer h4,.fcta h1,.fcta h2,.fcta h3,.fcta h4,.dc h1,.dc h2,.dc h3,.dc h4,.navy h1,.navy h2,.navy h3,.navy h4{color:#F5F1E8}
.green{color:#A15C07}
:is(nav,footer,.fcta,.mob-nav,.dc,.navy) .green{color:#FFB238}
.grad{background:linear-gradient(135deg,#0B2545 20%,#A15C07 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:is(footer,.fcta,.dc,.navy) .grad{background:linear-gradient(135deg,#fff 20%,#FFB238 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:where(a:not([class])){color:#A15C07}
:is(nav,footer,.fcta,.mob-nav,.dc,.navy) :where(a:not([class])){color:#FFC766}

/* ── NAV: solid navy on every page, hero starts right below ── */
nav,nav.up{background:#0B2545;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid #12325A;box-shadow:0 2px 14px rgba(7,26,48,.18)}
nav .logo,nav .logo b{color:#F5F1E8}
nav .nl>li>a{color:rgba(255,255,255,.82)}
nav .nl>li>a:hover{color:#fff}
.mob-nav{background:#0B2545}
.mob-nav a,.mob-svc-row span{color:rgba(255,255,255,.82)}
.mob-nav a.btn-g,.mob-nav .btn-g{color:#0B2545}
.mob-contact{background:rgba(255,255,255,.05)}
.mob-contact-phone{color:#FFB238}
.hbg span{background:#fff}
.dropdown{background:#0B2545;border-color:rgba(255,255,255,.14)}
.dropdown::after{border-bottom-color:#0B2545}
.dropdown a{color:rgba(255,255,255,.82)}
.drop-icon{background:rgba(255,178,56,.12);border-color:rgba(255,178,56,.25)}

/* ── Light surfaces ── */
.hero,.vid-sec,.dark,.sec,.blog-hero,.blog-body{background:#F5F1E8;color:#13233B}
.mid,.stats,.stats-strip,.stack-strip{background:#EFE9D9;border-color:#E1D9C4}
.lite{background:#FDFBF6;color:#13233B}
.lite .sh{color:#0B2545}
.lite .ss{color:#5B6474}
.hero-bg,.blog-hero-bg{background:
  radial-gradient(ellipse 70% 60% at 12% 45%,rgba(255,178,56,.16) 0%,transparent 62%),
  radial-gradient(ellipse 55% 60% at 90% 15%,rgba(11,37,69,.07) 0%,transparent 65%)}
.hero-grid,.blog-hero-grid{background-image:linear-gradient(rgba(11,37,69,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,37,69,.045) 1px,transparent 1px)}
.orb1{background:radial-gradient(circle,rgba(255,178,56,.16) 0%,transparent 70%)}
.orb2{background:radial-gradient(circle,rgba(11,37,69,.08) 0%,transparent 70%)}
.hero-tag,.hero-brand-name{color:#0B2545}
.hero-sub,.hero-brand-tag,.ss,.cd,.sl,.tr,.pl li,.hs p,.fa,.pl-desc,.portal-lbl{color:#5B6474}
.stag,.badge,.ct,.dc-lbl,.faq-ct,.sn,.hn,.cdl-b{color:#A15C07}
.badge{background:rgba(161,92,7,.08);border-color:rgba(161,92,7,.28)}
.badge::before,.ct::before,.faq-ct::before{background:#A15C07}
.crl{color:#A15C07}
.sn{color:#A15C07}

/* ── Cards on paper ── */
.pc,.cc,.tc,.fc,.price-card,.plan-mini,.tool-c,.team-c,.ind-c,.pain-c,.gcard,.form-box,.article-card,.article-full,
.sidebar-widget,.cf-box,.case-big,.quote-block,.key-box,.req-item,.lead-wrap,.hiw-tabs,.compare-wrap,.cat-pill,.fee-pill,.price-hint,.warn-box,.alert-strip{
  background:#FDFBF6;border:1px solid #E1D9C4;color:#13233B}
.fc:hover{box-shadow:0 18px 44px rgba(11,37,69,.10)}
.fc p,.fc li{color:#5B6474}
.fc h3,.cc h3,.pc h3,.hs h4,.tn,.pl-name,.ac-title,.af-title,.sw-title{color:#0B2545}
.tq,.cr p,.af-body,.af-excerpt,.ac-excerpt{color:#13233B}
.cr{background:rgba(161,92,7,.07);border-color:rgba(161,92,7,.22)}
.crl{color:#A15C07}
.fic,.pi,.drv .pi{background:rgba(255,178,56,.2)}
.biz .pi{background:rgba(59,130,246,.12)}
.ts{color:#A15C07}
.pl li::before{background:rgba(239,68,68,.12);color:#C0392B}
.hn{background:rgba(255,178,56,.22);border-color:rgba(161,92,7,.4)}
.hs:not(:last-child)::after{background:linear-gradient(90deg,#A15C07,transparent)}
.hiw-tab{color:#5B6474}
.hiw-tab.act{background:#FFB238;color:#0B2545}
.fi{border-bottom-color:#E1D9C4}
.fq{color:#0B2545}
.fq:hover{color:#A15C07}
.fa-ico{background:#EFE9D9;color:#0B2545}
.fi.open .fa-ico{background:rgba(255,178,56,.3);color:#0B2545}
.cdl-b{background:rgba(161,92,7,.1)}
.biz-b{background:rgba(59,130,246,.12);color:#1D4ED8}
.pc.biz::before,.pc.drv::before{opacity:1}

/* app + portal links on paper */
.app-sec{background:#EFE9D9;border-color:#E1D9C4}
.ab,.app-btn{background:#0B2545;border:1px solid #0B2545;color:#fff}
.ab:hover,.app-btn:hover{background:#12325A;border-color:#12325A}
.ab-sub,.app-btn-sub{color:rgba(255,255,255,.72)}
.pl-lnk{background:#FDFBF6;border:1px solid #E1D9C4;color:#0B2545}
.pl-lnk:hover{background:#fff;border-color:#A15C07}
.pl-name{color:#0B2545}

/* ── Buttons ── */
.btn-g,.cta-green,.plan-cta.cta-green,.submit-btn,.cf-submit,.tool-btn-green{background:#FFB238;color:#0B2545}
.btn-g:hover{background:#FFC766;color:#0B2545}
.btn-o,.cta-outline,.tool-btn-out{background:transparent;color:#0B2545;border:1px solid rgba(11,37,69,.45)}
.btn-o:hover{background:rgba(11,37,69,.06);border-color:#0B2545}
:is(nav,.fcta,.mob-nav,footer,.dc,.navy) .btn-o{color:#fff;border-color:rgba(255,255,255,.35)}
:is(nav,.fcta,.mob-nav,footer,.dc,.navy) .btn-o:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
.mob-btns .btn-o{background-color:rgba(255,255,255,.06)}

/* ── Navy anchors ── */
.dc-drv{background:#0B2545;border-color:#12325A}
.dc-biz{background:#12325A;border-color:#1E4575}
.dc-h{color:#F5F1E8}
.dc-p,.dc-meta{color:#A9B8CD}
.fcta{background:linear-gradient(135deg,#0E2B4E,#0B2545);color:#F5F1E8}
.fcta p{color:#C3CEDD}
footer{background:#071A30;border-top:1px solid #12325A}
.foot-copy,.foot-b,.foot-b a{color:rgba(255,255,255,.7)}

/* ── Forms ── */
input,select,textarea,.cf-input,.lead-field input,.lead-field select{background:#fff;border:1px solid #E1D9C4;color:#13233B}
input::placeholder,textarea::placeholder{color:#8A93A3}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(255,178,56,.7);border-color:#A15C07}
label,.cf-label{color:#0B2545}
.form-note,.cf-note,.lead-note,.plan-hint,.price-note{color:#5B6474}

/* ── Tables ── */
table,.compare-table,.comp-table{color:#13233B}
th{background:#EFE9D9;color:#0B2545;border-color:#E1D9C4}
td{border-color:#E1D9C4}

/* ── Legal / registration pages (no nav) ── */
body>.container{color:#13233B}
.doc-title,.back{color:#0B2545}
.back:hover{color:#A15C07}
hr{border-color:#E1D9C4}

/* ── Contrast fixes: accents that sit on navy keep gold; dark-theme inline colours darkened for paper ── */
:is(nav,footer,.fcta,.mob-nav,.dc,.navy) :is(.stag,.badge,.ct,.dc-lbl,.crl,.sn,.faq-ct){color:#FFB238}
.dc-lbl{color:#FFB238}
[style*="#7DB6FB"]{color:#1D4ED8!important}
[style*="#FB8F8F"],[style*="#FCA5A5"]{color:#B42318!important}
.orb2{background:radial-gradient(circle,rgba(255,178,56,.10) 0%,transparent 70%)}

/* ── Footer social icons: official brand glyphs on brand-colour tiles ── */
.sb{gap:8px}
.sb .si{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;flex:none}
.sb .si svg{width:14px;height:14px;fill:#fff;display:block}
.sb-facebook .si{background:#0866FF}
.sb-youtube .si{background:#FF0000}
.sb-linkedin .si{background:#0A66C2}
.sb-x .si{background:#000000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.sb-pinterest .si{background:#E60023}
.sb-quora .si{background:#B92B27}
.sb:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateY(-1px)}

/* ── Remaining dark-theme leftovers (colour/background only; no markup or script changes) ── */
.case-form-sec,.form-sec,.blog-hero,.success-view,.error-banner{background:#F5F1E8}
.success-view,.error-banner{background:#FDFBF6;border-color:#E1D9C4}
.cf-box{box-shadow:0 18px 50px rgba(11,37,69,.12);border-color:#E1D9C4}
.trust-item,.stack-i span,.ind-c p,.price-list li,.feat-list li,.key-box li,.warn-box p,.success-msg p,.sw-links li a,.af-body p,.af-body li{color:#13233B}
.trust-item{color:#5B6474}
.pain-c h3,.plan-mini h3,.case-big h3,.ind-c h3,.tool-c h3,.price-hint h3,.req-item h4,.gcard h4,.team-name,.plan-name,
.compare-table td:first-child,.comp-table td:first-child,.af-body h2,.af-body h3,.af-body strong,.af-cta strong,.sw-cta h3,
.val h3,.tq-c h3,.mv-q,.ab-tagline,.ab-strong,.ab-mini b,.std,.plan-price,.plan-price .amt,.ac-title,.af-title,.sw-title{color:#0B2545}
.plan-price .amt{color:#0B2545}
.compare-table th,.comp-table th,th{background:#EFE9D9;color:#0B2545;border-bottom:1px solid #E1D9C4}
.compare-table tr:hover td,.comp-table tr:hover td{background:rgba(255,178,56,.12)}
.ac-meta,.af-meta,.ab-mini,.mv,.val p,.tq-c p,.callout{color:#5B6474}
.toggle{background:#EFE9D9;border-color:#E1D9C4}
.tgl-btn{color:#5B6474}
.tgl-btn.act,.tgl-btn.active{background:#FFB238;color:#0B2545}
.alert-strip{background:#FFB238;border-color:#E1A52E}
.alert-strip,.alert-strip *{color:#0B2545}
.alert-strip a{background:#0B2545;color:#FFB238}
.af-cta,.sw-cta{background:#0B2545;border-color:#12325A;color:#F5F1E8}
.af-cta *,.sw-cta *{color:#F5F1E8}
.af-cta .btn-g,.sw-cta .btn-g{color:#0B2545}
.cancel-btn,.nav-back{color:#0B2545}
.cancel-btn{border-color:rgba(11,37,69,.35)}
.cancel-btn:hover{background:rgba(11,37,69,.06)}
.nav-back{color:rgba(255,255,255,.85)}
select option{background:#fff;color:#13233B}
h2,h3{color:#0B2545}
strong{color:inherit}
.container>h1,.container>h2,.container>h3{color:#0B2545}

/* ── Pass 3: contrast audit fixes (colour only) ── */
a{color:#A15C07}
.updated,.jump{color:#5B6474}
body>.container p,body>.container li,body>.container td,body>.container dd{color:#13233B}
body>.container strong{color:#0B2545}
body>.container h1,body>.container h2,body>.container h3{color:#0B2545}
td,.comp-table td,.compare-table td{color:#13233B;border-bottom-color:#E1D9C4}
td.lose{color:#B42318}
.af-body,.af-faq,.blog-main{color:#13233B}
.af-body h4,.af-faq h3,.af-faq h4{color:#0B2545}
.warn-box h4{color:#B42318}
.lead-field label{color:#0B2545}

/* gold stays gold when used as a background (the --green token is ember on paper) */
.pop-badge,.cf-submit,.submit-btn,.cta-green,.tool-btn-green,.tgl-btn.act,.mob-btns .btn-g{background:#FFB238;color:#0B2545}
.cf-submit:hover,.submit-btn:hover,.cta-green:hover,.tool-btn-green:hover{background:#FFC766;color:#0B2545}

/* About page: dark cards become paper cards; mission/vision stays a navy anchor */
.ab-mini,.val,.std,.tq-c{background:#FDFBF6;border:1px solid #E1D9C4;color:#13233B}
.ab-mini{border-left:3px solid #A15C07}
.std{border-top:3px solid #A15C07}
.ab-mini b,.ab-tagline,.val h3,.tq-c h3{color:#0B2545}
.ab-strong{color:#0B2545!important}
.ab-sub{color:#5B6474}
.ab-contact{color:#5B6474!important}
.val-n,.std-n{color:#A15C07}
.mv{--green:#FFB238;--muted:#A9B8CD;--border:rgba(255,255,255,.1);background:#0B2545;border-color:#12325A;color:#F5F1E8}

/* tinted tags/avatars: darker text for the light surface */
.cv-yellow{color:#8A4E05;background:rgba(245,158,11,.14)}
.cv-red{color:#B42318;background:rgba(239,68,68,.1)}
.warn{color:#A15C07}
.av-biz{color:#1D4ED8}
.tbg.cdl-b,.vtag{color:#8A4E05}

/* ── Pass 4 ── */
.mv .mv-q{color:#F5F1E8}
.val-rule{color:#8A4E05}
.ab-faq .fa a,.ab-contact a{color:#A15C07}
.ab .ab-sub{color:rgba(255,255,255,.78)}
.ab-sub{color:#5B6474}
.ab .ab-sub{color:rgba(255,255,255,.78)}
.af-body .af-cta :is(strong,p,span,h3,h4),.sw-cta :is(h3,h4,p,strong,span){color:#F5F1E8}
.af-body .af-cta .btn-g,.sw-cta .btn-g{color:#0B2545}
.sw-cta p{color:#C3CEDD}
td.lose{color:#B42318}

/* ── Pass 5: inline colours chosen for the dark theme ── */
[style*="#C3CEDD"],[style*="#93A4BD"]{color:#5B6474!important}
:is(footer,.fcta,nav,.dc,.navy,.af-cta,.sw-cta,.mv,.mob-nav) [style*="#C3CEDD"],:is(footer,.fcta,nav,.dc,.navy,.af-cta,.sw-cta,.mv,.mob-nav) [style*="#93A4BD"]{color:#C3CEDD!important}
.price-hint [style*="color:#fff"]{color:#0B2545!important}
.price-hint [style*="rgba(255,255,255,.65)"]{color:#5B6474!important}
.comp-table td.lose,.comp-table .lose{color:#B42318}

/* ── Pass 6: nav fits at every width (same rules on every page) ── */
@media(max-width:1700px){
  .nav-contact a[href*="calendly"]{display:none}
  .nav-contact{gap:10px;padding:0 12px}
  .nl{gap:14px}
  .nav-i{gap:18px}
  .nc{gap:8px}
  nav .btn{padding:10px 16px}
}
@media(max-width:1500px){
  .nav-contact{display:none}
  .nav-i{justify-content:flex-start}
  .nc{margin-left:auto}
}
@media(max-width:1100px){
  .nl,.nc,.nav-contact{display:none}
  .hbg{display:flex}
  .mob-btns .btn{justify-content:center;text-align:center}
}

/* ── Pass 6: component fixes ── */
.pain-c .pi{background:none}
.lead-field input,.lead-field textarea,.lead-field select{background:#fff;border:1px solid #E1D9C4;color:#13233B}
.lead-field input::placeholder,.lead-field textarea::placeholder{color:#8A93A3}

/* Hamburger: position untouched; open-state X uses Route Gold (brand) instead of red */
.hbg.open span{background:#FFB238}

/* plain (unstyled) links inside navy areas are pale gold; zero-extra-specificity so nav/footer link styles still win */
:where(nav,footer,.fcta,.mob-nav,.dc,.navy,.af-cta,.sw-cta,.mv) a:where(:not([class])){color:#FFC766}

/* legal pages: dark callout box becomes a light Surface 2 panel */
.callout{background:#EFE9D9;border:1px solid #E1D9C4}
.callout,.callout p{color:#13233B}

/* contrast polish (audit 2026-10-03) */
:is(.sec.mid,.sec.app-sec) :is(.stag,.fa a){color:#8A4E05!important}
.tq-n{background:#FFB238!important;color:#0B2545!important}
.cross{color:#B4412B!important}
.team-av.av-blue{color:#1D4ED8!important}
/* social icons in the legal pages' mini footer */
a.sb-legal{color:#C3CEDD!important}
a.sb-legal:hover{color:#fff!important;background:#12325A!important}

/* Official App Store / Google Play badges (Apple + Google artwork, hosted in /images/badges) */
.store-badges{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
.store-badges.center{justify-content:center}
.store-badges.left{justify-content:flex-start}
.store-badges a,.store-badges .soon{display:inline-block;line-height:0;transition:transform .2s}
.store-badges a:hover{transform:translateY(-2px)}
.store-badges img.as{height:40px;width:auto}
.store-badges img.gp{height:58px;width:auto;margin:-9px -8px}   /* Google's badge has built-in padding */
.store-badges .soon{opacity:.45;filter:grayscale(1);cursor:default}
.store-note{margin-top:6px;font-size:.76rem;color:#5B6474}
.store-note.on-dark{color:#C3CEDD}
.store-label{margin-top:22px;font-weight:700;font-size:.9rem;color:#fff;text-align:center}
.store-groups{display:flex;gap:28px;justify-content:center;flex-wrap:wrap}