/* Battery Plus landing page: tokens and base styles */
@font-face{font-family:"Barlow";src:url(../fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-cond-800i.woff2) format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-cond-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --navy:#283888;       /* logo blue */
  --navy-deep:#18215a;  /* hero and dark bands */
  --navy-ink:#111843;
  --red:#d03830;        /* logo red, 4.6:1 with white */
  --red-deep:#b52c25;   /* hover */
  --red-light:#ff8a80;  /* labels on navy */
  --ink:#151a33;
  --body:#3a3f55;
  --muted:#5c6178;
  --line:#dde0ea;
  --cream:#f3f4f8;
  --white:#fff;
  --gold:#f5b301;
  --font-head:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --font-body:"Barlow",Arial,sans-serif;
  --radius:6px;
  --shadow:0 10px 30px rgba(17,24,67,.14);
}

[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;color:var(--body);background:var(--white)}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{cursor:pointer;font:inherit}

h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.05;margin:0 0 .6em}
h1,h2{font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.005em}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.85rem,3.4vw,2.7rem)}
h3{font-size:1.4rem;font-weight:700;text-transform:uppercase;letter-spacing:.01em}
p{margin:0 0 1em;max-width:640px}
.label{font-family:var(--font-body);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 .7rem}

.container{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.container--narrow{width:min(820px,100% - 2.5rem);margin-inline:auto}
.section{padding:4.25rem 0}
.section--cream{background:var(--cream)}
.section--navy{background:var(--navy-deep);color:rgba(255,255,255,.9)}
.section--navy h2,.section--navy h3{color:var(--white)}
.section--navy .label{color:var(--red-light)}
.section__head{text-align:center;margin:0 auto 2.25rem;max-width:760px}
.section__head p,.section__head h2{max-width:none;margin-inline:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-body);font-weight:700;font-size:1.02rem;padding:.95rem 1.6rem;border-radius:var(--radius);border:2px solid transparent;text-decoration:none;line-height:1.2;transition:background .2s,transform .2s,box-shadow .2s;white-space:nowrap}
.btn--red{background:var(--red);color:var(--white)}
.btn--red:hover{background:var(--red-deep);transform:translateY(-1px)}
.btn--white{background:var(--white);color:var(--navy)}
.btn--white:hover{background:#eef0f8}
.btn--dark{background:var(--navy-ink);color:var(--white)}
.btn--outline{background:transparent;color:#fff;border-color:#fff}
.btn--outline:hover{background:rgba(255,255,255,.1)}
.btn svg{width:18px;height:18px;flex:none}

.fade-up{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:none}

@media (max-width:900px){.section{padding:3.5rem 0}}
@media (max-width:600px){
  .section{padding:2.75rem 0}
  .section__head{margin-bottom:1.5rem}
  h2{font-size:1.75rem}
  body{font-size:1rem}
}