/* bo_F_navy: professional navy / royal / white theme from Bot Insurance Agent logo */
:root{
  --navy:#0B1E3F;
  --navy-deep:#061428;
  --royal:#1565C0;
  --royal-bright:#1068F0;
  --sky:#E8F4FC;
  --sky-mid:#98D8F8;
  --panel:#FFFFFF;
  --muted:#5A6B82;
  --line:#D5E3F2;
  --ink:#0B1E3F;
}

:root,html,body{color-scheme:only light!important;forced-color-adjust:none}

html{width:100%;min-height:100%;margin:0;background:var(--sky);overflow-x:hidden;scrollbar-color:var(--royal) var(--sky)}
body{
  width:100%;min-height:100vh;margin:0;overflow-x:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%, var(--sky) 42%, #D6EBFA 100%)!important;
  color:var(--ink)!important;
}

::-webkit-scrollbar{width:12px;background:var(--sky)}
::-webkit-scrollbar-track{background:var(--sky)}
::-webkit-scrollbar-thumb{background:var(--royal);border:3px solid var(--sky);border-radius:8px}

h1,h2,h3{font-family:Arial,Helvetica,sans-serif;font-weight:800;color:var(--navy)!important}
h1 em,.eyebrow,.brand b,.card span,summary:after{color:var(--royal)!important}
.lead{color:var(--muted)!important}
.err{color:#C62828}

.gold,.fab{
  background:var(--royal)!important;
  color:#fff!important;
  border-color:var(--royal)!important;
  background-image:none!important;
  filter:none;opacity:1;
}
.gold:hover,.fab:hover{filter:brightness(1.06)}
.callband .gold{background:var(--navy)!important;color:#fff!important}

.ghost{border-color:var(--line)!important;color:var(--navy)!important;background:#fff!important}
.ghost:hover,input:focus{border-color:var(--royal)!important}

.chip{border-color:var(--line)!important;background:#fff!important;color:var(--navy)!important}
.chip[aria-pressed=true]{
  border-color:var(--royal)!important;
  background:rgba(21,101,192,.10)!important;
  color:var(--royal)!important;
}

.panel,.card{border-color:var(--line)!important;background:var(--panel)!important;box-shadow:0 10px 40px rgba(11,30,63,.08)!important}
.panel{background:#fff!important}

.brand img{object-fit:cover;border-radius:50%}
.nav{padding-top:18px}

.badge{
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  background:#fff;border-radius:24px;padding:28px 22px;
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(11,30,63,.10);
}
.badge img.full{width:100%;max-width:320px;height:auto}
.badge img.icon{width:72px;height:auto;display:none}
.bv{
  display:inline-block;font:800 13px Arial,sans-serif;letter-spacing:.22em;
  color:#fff;background:#0B1E3F;border:2px solid #0B1E3F;
  border-radius:40px;padding:8px 18px 8px 20px;
}

.mascot{position:relative;isolation:isolate;width:240px;max-width:100%;flex:none}
.mascot:before{
  content:"";position:absolute;inset:8% -8%;
  background:radial-gradient(ellipse,rgba(16,104,240,.18),transparent 70%);
  z-index:-1;
}
.mascot img{
  display:block;width:100%;height:auto;
  border-radius:18px;
}

.hero{background:transparent}
.how,.faq{
  background:#fff;border-radius:20px;padding:30px!important;
  border:1px solid var(--line);
  box-shadow:0 10px 40px rgba(11,30,63,.06);
}
.callband{
  background:var(--navy)!important;border:none!important;
  box-shadow:0 16px 40px rgba(11,30,63,.18);
}
.callband h2,.callband p{color:#fff!important}
.callband p{opacity:.9}

footer{
  background:var(--navy);color:#C9D7EA!important;
  border-radius:16px 16px 0 0;padding:20px 24px 90px!important;
}
footer a{color:var(--sky-mid)!important}

.card span{font-family:Arial,sans-serif;font-weight:900}
details{border-bottom:1px solid var(--line)}
summary{color:var(--navy)!important}
details p{color:var(--muted)!important}

input{
  background:#F7FBFF!important;color:var(--navy)!important;
  border:1px solid var(--line)!important;
}
.q{color:var(--navy)!important}
.q small,.note,.steps{color:var(--muted)!important}
.done h3{color:var(--navy)!important}
.done p{color:var(--muted)!important}

.badge img.icon{animation:none}

@media(max-width:860px){
  .badge{order:-1;padding:20px 18px}
  .badge img.full{max-width:240px}
  .mascot{width:200px}
  .how,.faq{margin-left:12px;margin-right:12px;padding:20px 16px!important}
}


/* F2: single complete logo in card, even padding, no clipped edges */
.badge{
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
  background:#fff;border-radius:24px;padding:28px 28px 24px;
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(11,30,63,.10);
  overflow:visible;
}
.badge img.full{
  display:block;width:100%;max-width:340px;height:auto;
  object-fit:contain;object-position:center;
  border-radius:0;margin:0;
}
.badge img.icon{display:none}
.mascot{display:none}

/* Header brand icon: keep full circular avatar visible */
.brand img{
  width:40px;height:40px;object-fit:contain;object-position:center;
  border-radius:50%;flex:none;background:#fff;overflow:visible;
}
.nf img{object-fit:contain;border-radius:16px;background:#fff}

/* Mobile FAB: hide until scrolled past hero so it does not cover Call CTA */
.fab{display:none}
@media(max-width:860px){
  .badge{order:-1;padding:22px 20px 18px}
  .badge img.full{max-width:280px}
  .fab{
    display:none;
    position:fixed;right:16px;bottom:16px;z-index:9;
    background:var(--royal)!important;color:#fff!important;
    font-weight:800;text-decoration:none;padding:14px 20px;border-radius:30px;
  }
  .fab.show{display:inline-flex;align-items:center}
}


/* F5: BOT VERIFIED Option B white <-> bright blue hard blink + glow */
.bv,
.badge .bv{
  position:relative;
  z-index:1;
  color:#1068F0;
  background:#FFFFFF;
  border:2px solid #1068F0;
  background-image:none;
  will-change:background-color, color, box-shadow, border-color;
  animation:bv-flash 1s steps(1, end) infinite;
  transform:none;
}
@keyframes bv-flash{
  0%, 49.999%{
    color:#FFFFFF;
    background-color:#1068F0;
    border:2px solid #FFFFFF;
    box-shadow:
      0 0 0 3px #1068F0,
      0 0 0 8px rgba(16,104,240,.65),
      0 0 28px 4px rgba(16,104,240,.95);
  }
  50%, 100%{
    color:#1068F0;
    background-color:#FFFFFF;
    border:2px solid #1068F0;
    box-shadow:
      0 0 0 3px rgba(16,104,240,.35),
      0 0 0 8px rgba(16,104,240,.20),
      0 0 22px 2px rgba(16,104,240,.55);
  }
}
@media (prefers-reduced-motion: reduce){
  .bv,
  .badge .bv{
    animation:none!important;
    color:#FFFFFF;
    background-color:#1068F0;
    border:2px solid #1068F0;
    box-shadow:0 0 0 3px rgba(16,104,240,.40);
  }
}


/* Call Now desktop number popup removed (request-a-call panel styles live in app.js) */


/* F4: Bot Scan widget in the hero */
.hero{
  grid-template-columns:1.1fr .9fr;
  grid-template-areas:
    "text badge"
    "scan badge";
  column-gap:40px;
  row-gap:18px;
  align-items:center;
}
.hero-text{grid-area:text}
.badge{grid-area:badge}
.botscan{
  grid-area:scan;
  align-self:start;
  display:flex;
  align-items:center;
  gap:14px;
  max-width:380px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px 16px 12px 12px;
  box-shadow:0 10px 40px rgba(11,30,63,.08);
}
.botscan-bot{
  position:relative;
  width:84px;height:84px;
  flex:none;
  display:flex;align-items:center;justify-content:center;
}
.botscan-radar,
.botscan-radar:before,
.botscan-radar:after{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
}
.botscan-radar:before,
.botscan-radar:after{
  content:"";
  border:2px solid rgba(16,104,240,.5);
  animation:botscan-ping 2.6s ease-out infinite;
}
.botscan-radar:after{animation-delay:1.3s}
@keyframes botscan-ping{
  0%{transform:scale(.72);opacity:.7}
  100%{transform:scale(1.28);opacity:0}
}
.botscan-frame{
  position:relative;
  z-index:1;
  width:68px;height:68px;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  border:2px solid #1068F0;
  box-shadow:0 0 0 3px rgba(16,104,240,.16);
}
.botscan-frame img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.botscan-beam{
  position:absolute;left:0;right:0;
  height:30px;margin-top:-14px;
  background:linear-gradient(180deg,transparent,rgba(16,104,240,.42),transparent);
  animation:botscan-sweep 2.4s ease-in-out infinite;
  pointer-events:none;z-index:2;
}
.botscan-line{
  position:absolute;left:-4px;right:-4px;
  height:4px;margin-top:-2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,#1068F0,#fff,#1068F0,transparent);
  box-shadow:0 0 12px 3px rgba(16,104,240,.95),0 0 2px 1px #fff;
  animation:botscan-sweep 2.4s ease-in-out infinite;
  pointer-events:none;z-index:3;
}
@keyframes botscan-sweep{
  0%{top:-8px;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{top:72px;opacity:0}
}
.botscan-copy{min-width:0;flex:1}
.botscan-label{
  display:inline-block;
  font:800 12px Arial,sans-serif;
  letter-spacing:.22em;
  color:#1068F0;
  background:#E8F4FC;
  border:1px solid #1068F0;
  border-radius:40px;
  padding:5px 12px 5px 14px;
  margin-bottom:6px;
}
.botscan-status{
  position:relative;
  margin:0;
  height:1.45em;
  overflow:hidden;
  font:600 14px/1.45 Arial,sans-serif;
  color:var(--muted);
}
.botscan-status span{
  position:absolute;
  left:0;right:0;top:0;
  opacity:0;
  animation:botscan-swap 6s ease-in-out infinite;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.botscan-status span:nth-child(2){animation-delay:3s}
@keyframes botscan-swap{
  0%,8%{opacity:0}
  16%,42%{opacity:1}
  50%,100%{opacity:0}
}
@media(max-width:860px){
  .hero{
    grid-template-columns:1fr;
    grid-template-areas:
      "badge"
      "scan"
      "text";
    column-gap:0;
    row-gap:16px;
  }
  .badge{order:0}
  .botscan{
    max-width:100%;
    width:100%;
    margin:0 auto;
    justify-content:flex-start;
    text-align:left;
  }
}
@media (prefers-reduced-motion: reduce){
  .botscan-radar:before,
  .botscan-radar:after,
  .botscan-beam,
  .botscan-line,
  .botscan-status span{animation:none!important}
  .botscan-beam,
  .botscan-line{display:none}
  .botscan-status span{opacity:0}
  .botscan-status span:first-child{opacity:1}
  .botscan-status span:nth-child(2){display:none}
}