/* GoBringo visual refresh: refined blue/ink palette + responsive layouts */
:root{--navy:#142b49;--navy2:#1d4e78;--blue:#1769aa;--blue2:#14558a;--ink:#172b42;--muted:#5b6f86;--paper:#f7f8f6;--line:#dfe7f0;--white:#fff;--yellow:#d9e9ff;--shadow:0 18px 48px rgba(20,43,73,.10);--radius:18px}
html{width:100%;overflow-x:hidden;scroll-padding-top:90px}
body{background:#f6f8fc!important;color:#172b42!important;overflow-x:hidden;line-height:1.6!important}
button,input,select,textarea{max-width:100%;min-width:0}
img,video,iframe,canvas,svg{max-width:100%}
.wrap{width:100%;max-width:1220px!important}
a{transition:color .18s ease,background .18s ease,border-color .18s ease}
/* Header */
.site-header{height:auto!important;min-height:72px;background:rgba(20,43,73,.97)!important;border-bottom:1px solid rgba(255,255,255,.1)!important}
.site-header .wrap{padding:12px 24px!important}
.site-header .head{transform:none!important;display:flex;flex-wrap:wrap;gap:10px 22px;min-height:58px;align-items:center}
.site-header .logo{font-size:24px!important;letter-spacing:-.5px!important;gap:9px}
.site-header .logo-mark{background:linear-gradient(135deg,#3989e8,#1769aa)!important;box-shadow:0 6px 16px rgba(23,105,170,.25)!important;border-radius:11px}
.site-header .nav{display:flex!important;flex:1;min-width:0;gap:clamp(8px,1.5vw,22px)!important;align-items:center;justify-content:center}
.site-header .nav a{padding:10px 0!important;font-size:13px!important;color:#dce8f7!important;white-space:nowrap}
.site-header .nav a:hover,.site-header .nav a.active{color:#fff!important}
.site-header .nav a.active:after{background:#70b5ff!important;bottom:1px!important}
.site-header .actions{display:flex;gap:8px;flex-shrink:0}
.site-header .btn{padding:10px 15px!important;border-radius:10px!important;font-size:13px!important}
.site-header .yellow,.btn.primary,.hero-card .main,.main{background:#1769aa!important;color:#fff!important}
.site-header .yellow:hover,.btn.primary:hover,.hero-card .main:hover,.main:hover{background:#14558a!important}
.site-header .outline{background:transparent!important;border:1px solid #8da5c2!important;color:#fff!important}
/* Home hero */
.hero.hero-pro{padding:0!important;margin:0!important;min-height:650px;background:#102a43!important;border-radius:0!important;box-shadow:none!important}
.hero-pro .hero-media{background-position:center right!important;filter:saturate(.78)}
.hero-pro .hero-overlay{background:linear-gradient(90deg,rgba(13,36,67,.97) 0%,rgba(13,36,67,.86) 37%,rgba(13,36,67,.50) 70%,rgba(13,36,67,.24) 100%)!important}
.hero-pro .hero-content{max-width:1220px!important;padding:76px 24px 58px!important;grid-template-columns:minmax(0,1fr) minmax(0,540px)!important;gap:clamp(24px,4vw,58px)!important}
.hero-copy .eyebrow{color:#a9d1ff!important}
.hero-copy h1{color:#fff!important;font-size:clamp(46px,5.5vw,76px)!important;letter-spacing:-3px!important}
.hero-copy h1 span{color:#8bc4ff!important}
.hero-copy p{color:#e0e9f7!important;font-size:clamp(16px,1.5vw,18px)!important}
.hero-actions .primary{background:#1769aa!important;color:#fff!important;box-shadow:0 10px 25px rgba(23,105,170,.24)!important}
.hero-actions .primary:hover{background:#14558a!important}
.hero-actions .ghost-light{border-color:rgba(255,255,255,.45)!important;background:rgba(255,255,255,.07)!important}
.hero-card{border:1px solid #e1eaf5!important;border-radius:22px!important;padding:clamp(18px,2vw,26px)!important;box-shadow:0 24px 70px rgba(0,0,0,.26)!important}
.hero-card h3{font-size:clamp(21px,2vw,25px)!important;color:#172b42!important}
.hero-card .card-kicker{color:#1769aa!important}
.hero-card .mini-pill{background:#e7f1ff!important;color:#17508b!important}
.hero-card .field input,.hero-card .field select,.hero-card .field textarea{background:#fbfdff!important;border-color:#d4e0ee!important;border-radius:10px!important;min-height:43px}
.hero-card .field input:focus,.hero-card .field select:focus{outline:3px solid rgba(23,105,170,.14)!important;border-color:#5c9de8!important}
.hero-card .service-list label{background:#f5f8fc!important;border-color:#dbe5f2!important;color:#243c5a!important}
.hero-card .service-list label:has(input:checked){background:#e5f0ff!important;border-color:#8ab9f4!important}
.hero-card .calc-result{background:#16365b!important}
.top-trust{background:#fff!important;border-color:#e3eaf4!important}
.top-trust .wrap{padding:10px 24px!important;color:#536b87!important;gap:clamp(12px,3vw,34px)!important}
.top-trust span:before{color:#267bd2!important}
/* Common cards, sections, fields */
section{scroll-margin-top:85px}
.cream,.dash{background:#f1f5fb!important}
.card,.boxcard,.trust,.review,.stat,.panel,.box{border-color:#e0e8f2!important;box-shadow:0 8px 26px rgba(20,43,73,.055)!important}
.box{border-left-color:#1769aa!important;background:#edf4ff!important}
.role.customer{background:#e6f0ff!important;color:#183b60!important}
.role.carrier,.business{background:linear-gradient(135deg,#142b49,#1d4e78)!important;color:#fff!important}
.business .lead{color:#dce9f8!important}
.btn.yellow,.badge{background:#d9e9ff!important;color:#174678!important}
.tabs .active{background:#1769aa!important;color:#fff!important}
input,select,textarea{border-color:#d4e0dc!important;color:#172b42!important;background:#fff!important}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(23,105,170,.14)!important;border-color:#5c9de8!important}
.paymentbox{background:#f1f7ff!important;border-color:#d5e4f6!important}
.fee-note{background:#f1f7ff!important}
.calc-result{background:#16365b!important}
footer{background:#142b49!important}
/* Tablets */
@media(max-width:1050px){
 .site-header .head{gap:8px 16px}
 .site-header .nav{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:2px 0 5px}
 .site-header .nav a{padding:8px 0!important}
 .hero.hero-pro{min-height:0!important}
 .hero-pro .hero-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;padding:54px 24px 44px!important;gap:24px!important}
 .hero-copy h1{font-size:clamp(42px,5.5vw,62px)!important}
 .hero-card .service-list{grid-template-columns:1fr 1fr!important}
 .trust-grid,.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .dashgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Phones */
@media(max-width:680px){
 .wrap{padding-left:16px!important;padding-right:16px!important}
 .site-header .wrap{padding:10px 16px!important}
 .site-header .head{gap:6px 10px;transform:none!important}
 .site-header .logo{font-size:21px!important}
 .site-header .logo-mark{width:31px;height:31px;font-size:19px}
 .site-header .actions{margin-left:auto;gap:6px}
 .site-header .btn{font-size:12px!important;padding:9px 10px!important}
 .site-header .nav{gap:18px!important;justify-content:flex-start!important;margin:0!important;padding:4px 0 7px!important}
 .site-header .nav a{font-size:12px!important;flex:0 0 auto}
 .top-trust .wrap{justify-content:flex-start!important;gap:7px 14px!important;font-size:11px!important;padding-top:9px!important;padding-bottom:9px!important}
 .hero-pro .hero-content{display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:42px 16px 26px!important;gap:26px!important}
 .hero-pro .hero-copy{max-width:none!important}
 .hero-copy .eyebrow{font-size:10px!important;letter-spacing:.12em!important}
 .hero-copy h1{font-size:clamp(40px,11vw,54px)!important;line-height:1!important;letter-spacing:-2px!important;margin-bottom:15px!important}
 .hero-copy p{font-size:16px!important;line-height:1.55!important;margin:0}
 .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin-top:20px!important}
 .hero-actions .btn{width:100%;text-align:center;padding:13px 15px!important}
 .hero-pro .hero-overlay{background:linear-gradient(180deg,rgba(13,36,67,.96) 0%,rgba(13,36,67,.86) 43%,rgba(13,36,67,.66) 100%)!important}
 .hero-pro .hero-media{background-position:62% center!important;opacity:.58}
 .hero-card{width:100%;padding:17px!important;border-radius:17px!important}
 .card-top{gap:8px!important;flex-wrap:wrap}
 .card-top h3{font-size:22px!important}
 .hero-card .calc-grid,.calc-grid,.grid,.doc-grid,.time-row{grid-template-columns:minmax(0,1fr)!important}
 .hero-card .calc-grid .full,.calc-grid .full,.wide{grid-column:auto!important}
 .hero-card .service-list,.service-list{grid-template-columns:minmax(0,1fr)!important}
 .hero-card .field label{font-size:11px!important}
 .hero-card .field input,.hero-card .field select{min-height:46px!important;font-size:16px!important}
 .date-parts{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .calc-actions{align-items:stretch!important;flex-direction:column!important}
 .calc-actions .main{width:100%!important;min-height:46px}
 .calc-status{margin-left:0!important}
 section{padding:48px 0!important}
 h2{font-size:clamp(29px,8vw,40px)!important;letter-spacing:-1px!important}
 .lead{font-size:16px!important}
 .steps,.roles,.reviews,.trust-grid,.feature-grid,.dashgrid{grid-template-columns:minmax(0,1fr)!important}
 .role{padding:25px!important;min-height:0!important}
 .business{padding:24px!important;border-radius:20px!important}
 .section-title{align-items:flex-start!important}
 .dash{padding:25px 0!important}
 .dashhead{align-items:flex-start!important;flex-direction:column!important}
 .panel,.stat,.boxcard{padding:17px!important}
 .row{align-items:flex-start!important;flex-wrap:wrap!important}
 .row .grow{min-width:100%}
 .modal{padding:10px!important;align-items:flex-end!important}
 .modalbox{border-radius:20px 20px 12px 12px!important;padding:24px 17px 18px!important;max-height:92dvh!important;width:100%!important}
 .form .field input,.form .field select,.form .field textarea{font-size:16px!important;min-height:44px}
 .login{margin:24px auto!important}
 .login .card{padding:20px!important}
 .legal-page{padding:28px 0!important}
 .legal-page .boxcard{padding:18px!important}
 .paymentline{align-items:flex-start}
 .paymentline span:last-child{text-align:right;overflow-wrap:anywhere}
 .route-map{height:220px!important}
 footer{padding:30px 0!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Contrast repair: all standalone copy on light section backgrounds */
.cream .section-title p,
.cream .section-title .lead,
.cream > .wrap > p,
.cream .lead,
.cream p,
.cream .mini,
.cream .trust .mini,
section:not(.hero):not(.business):not(.hero-pro) .section-title p,
section:not(.hero):not(.business):not(.hero-pro) .section-title .lead,
section:not(.hero):not(.business):not(.hero-pro) > .wrap > p,
.section-title .lead,
.section-title p { color:#24383c!important; opacity:1!important; }
/* Keep copy on dark hero and dark business panels light for contrast */
.hero-copy p,.hero-copy .lead,.business .lead { color:#e0e9f7!important; }


/* GoBringo final color audit — one consistent blue palette, readable text on every surface. */
:root{
  --navy:#142b49!important;--navy2:#1d4e78!important;--blue:#1769aa!important;--blue2:#4d9be8!important;
  --ink:#172b42!important;--muted:#536b87!important;--line:#dfe7f0!important;--bg:#f6f8fc!important;
  --paper:#ffffff!important;--yellow:#d9e9ff!important;--green:#1769aa!important;
}
html,body{color:#172b42!important;background:#f6f8fc!important}
/* Text on light backgrounds */
.wrap,main,article,.legal-content,.card,.box,.boxcard,.panel,.stat,.trust,.review,.paymentbox,.fee-note,
.faq-section,.faq-side-note,.top-trust,.cream,.dash{color:#172b42!important}
.card p,.box p,.boxcard p,.panel p,.stat p,.trust p,.review p,.cream p,.dash p,
.section-title p,.section-title .lead,.legal-content p,.legal-content li,.legal-meta,
.faq-lead,.faq-answer p,.faq-side-note span,.mini,.note,.meta,.muted{color:#465d77!important;opacity:1!important}
.card h1,.card h2,.card h3,.box h1,.box h2,.box h3,.boxcard h1,.boxcard h2,.boxcard h3,
.panel h1,.panel h2,.panel h3,.stat h1,.stat h2,.stat h3,.faq-section h2,.faq-side-note b,
.faq-section .faq summary,.legal-content h1,.legal-content h2,.legal-content h3{color:#172b42!important}
/* Dark blue surfaces always use light copy; keep embedded white form cards readable. */
.top,.site-header,.hero,.hero.hero-pro,.business,.role.carrier,.calc-result,footer,.foot-dark,
.faq-contact-card,.admin-top{color:#ffffff!important}
.top h1,.top h2,.top h3,.site-header h1,.site-header h2,.site-header h3,
.hero h1,.hero h2,.hero h3,.hero p,.hero .lead,.hero .eyebrow,
.hero-pro h1,.hero-pro h2,.hero-pro h3,.hero-pro p,.hero-pro .lead,.hero-pro .eyebrow,
.business h1,.business h2,.business h3,.business p,.business .lead,
.role.carrier h1,.role.carrier h2,.role.carrier h3,.role.carrier p,
.calc-result,.calc-result p,.calc-result span,.calc-result strong,
footer p,footer a,.foot-dark p,.foot-dark a,
.faq-contact-card h1,.faq-contact-card h2,.faq-contact-card h3,.faq-contact-card p,
.faq-contact-card .faq-card-label,.faq-contact-card .faq-card-foot{color:#ffffff!important}
.hero .hero-card,.hero-card,.hero-card h1,.hero-card h2,.hero-card h3,.hero-card p,.hero-card label,
.hero-card .mini,.hero-card .field label,.hero-card .service-label{color:#172b42!important}
.hero-card .card-kicker,.hero-card .mini-pill{color:#17508b!important}
.hero-card .service-list label{color:#243c5a!important}
.faq-contact-card{background:linear-gradient(145deg,#142b49,#1d4e78)!important}
.faq-contact-card .faq-card-label,.faq-contact-card .faq-card-foot{color:#dce8f7!important}
.faq-contact-card .faq-contact-orb{background:#d9e9ff!important;color:#174678!important}
.faq-contact-card .faq-contact-link{background:#d9e9ff!important;color:#174678!important}
.faq-contact-card .faq-contact-link *{color:#174678!important}
.faq-section .faq-toggle:before,.faq-section .faq-toggle:after{background:#1769aa!important}
.faq-section .faq[open] .faq-toggle{background:#1769aa!important}
.faq-section .faq[open] .faq-toggle:before,.faq-section .faq[open] .faq-toggle:after{background:#ffffff!important}
.faq-kicker,.faq-title-dot{color:#1769aa!important}
.faq-kicker-dot{background:#70b5ff!important;box-shadow:0 0 0 5px #e7f1ff!important}
/* All primary actions use blue; remove legacy yellow/green accents. */
.btn.yellow,.yellow,.badge,.faq-help-icon,.faq-num,.faq-toggle,.faq-check,.tabs .active,
button.main,.main,.hero-card .main,.btn.primary{background:#1769aa!important;color:#ffffff!important}
.btn.yellow:hover,.yellow:hover,.button:hover,.main:hover,.btn.primary:hover{background:#14558a!important;color:#ffffff!important}
.faq-num,.faq-help-icon{background:#e7f1ff!important;color:#1769aa!important}
.faq-check{background:rgba(217,233,255,.22)!important;color:#d9e9ff!important}
.outline{color:#172b42!important}
.site-header .outline,.hero .outline,.hero-pro .outline{color:#ffffff!important}
input,select,textarea{color:#172b42!important;background:#ffffff!important}
input::placeholder,textarea::placeholder{color:#647891!important;opacity:1!important}
/* Status colors are the only intentional semantic exception; keep them legible. */
.ok{color:#1769aa!important}
/* Mobile/tablet safety against overflow and low-contrast inherited text. */
@media(max-width:680px){.faq-contact-card h3{color:#ffffff!important}.faq-answer{padding:0 16px 18px!important}}

/* Final small contrast corrections */
.faq-section .faq-card-foot{color:#dce8f7!important}
.faq-section .faq-num{color:#1769aa!important}
.hero-actions .ghost-light{color:#ffffff!important}
.paymentbox{border-color:#d5e4f6!important}
.ok{background:#e7f1ff!important;color:#1769aa!important}


/* Premium, store-inspired app badges — visual only until official listings exist */
.app-downloads{margin-top:24px;padding-top:19px;border-top:1px solid rgba(255,255,255,.2)}
.role.customer .app-downloads{border-top-color:rgba(20,43,73,.16)}
.app-download-title{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:850;letter-spacing:.01em;margin-bottom:13px}
.app-download-symbol{display:inline-grid;place-items:center;width:29px;height:29px;border-radius:9px;background:rgba(255,255,255,.13);font-size:18px;line-height:1}
.role.customer .app-download-symbol{background:#e4effc;color:#15538a}
.app-badges{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.app-badge{box-sizing:border-box;display:flex;align-items:center;gap:10px;width:calc(50% - 5px);min-width:142px;min-height:54px;padding:8px 11px;border:1px solid rgba(255,255,255,.26);border-radius:10px;background:#08090b;color:#fff;text-align:left;box-shadow:0 3px 10px rgba(0,0,0,.12);transition:transform .18s ease,box-shadow .18s ease}
.role.customer .app-badge{border-color:#08090b;background:#08090b;color:#fff}
.app-badge svg{display:block;width:27px;height:27px;flex:0 0 27px;fill:currentColor}
.app-badge span{display:flex;min-width:0;flex-direction:column;line-height:1.12;white-space:nowrap}
.app-badge small{font-size:9px;font-weight:500;letter-spacing:.015em;opacity:.92;margin:0 0 3px}
.app-badge b{font-size:15px;font-weight:650;letter-spacing:-.025em}
.app-badge.store-google b{font-size:14px}
.app-coming{display:flex;align-items:center;gap:7px;font-size:11px!important;font-weight:750;letter-spacing:.015em;opacity:.83;margin:11px 0 0!important}
.coming-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:#8db8ff;box-shadow:0 0 0 3px rgba(141,184,255,.13)}
.role.customer .coming-dot{background:#2563a6;box-shadow:0 0 0 3px rgba(37,99,166,.12)}
@media(hover:hover){.app-badge:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(0,0,0,.18)}}
@media(max-width:720px){.app-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.app-badge{width:100%;min-width:0;gap:7px;padding:9px 8px;min-height:52px}.app-badge svg{width:23px;height:23px;flex-basis:23px}.app-badge b{font-size:12px}.app-badge.store-google b{font-size:11px}.app-badge small{font-size:8px}.role{padding:25px!important}}
@media(max-width:370px){.app-badges{grid-template-columns:1fr}.app-badge{max-width:220px}}

/* v14: officiële store-badge look (zwart, dunne rand, Apple/Google merk) */
.app-badges .app-badge{display:block;width:calc(50% - 5px);min-width:128px;max-width:176px;min-height:0;padding:0;border:0;background:none!important;box-shadow:none;border-radius:8px;aspect-ratio:135/40;filter:drop-shadow(0 3px 8px rgba(0,0,0,.16));transition:transform .18s ease,filter .18s ease}
.app-badges .app-badge svg{display:block;width:100%;height:100%;flex:none}
@media(hover:hover){.app-badges .app-badge:hover{transform:translateY(-2px);filter:drop-shadow(0 8px 14px rgba(0,0,0,.22))}}
@media(max-width:720px){.app-badges{display:flex;flex-wrap:wrap;gap:8px}.app-badges .app-badge{width:calc(50% - 4px);min-width:0;max-width:none;padding:0}}
@media(max-width:370px){.app-badges .app-badge{width:100%;max-width:200px}}