:root {
  --body-color: #f7f0df;
  --background-image-url: url('/prep-smarter/assets/header-bg.svg') no-repeat bottom center;
  --main-color: #082f56;
  --main-color-blur: #8fd0e880;
  --hero-text-color: #fff;
  --info-icon: none;
  --info-border: 1px solid rgb(50 43 35 / 10%);
  --default-text-color: #24364A;
  --bg-saving-section: #082f56;
  --footer-bg: #082f56;
  --related-section-bg: #082f56;

  /* full button styles */
  --button-border: 1px solid #082f56;
  --button-background: rgb(188 109 19 / 20%);
  --sticky-bg: #082f56;
}

.sticky-bg {
  background: var(--sticky-bg);
  border: 1px solid #f2f2f2;
  box-shadow: 0 4px 30px 0 rgb(0 0 0 / 10%);
}

.sticky-bg.top {
  width: 100%;
  max-width: none;
  border-radius: 0;
  inset: 0 0 auto;
  border: none;
}

.sticky.top .sticky-content {
  max-width: 1245px;
  width: calc(100% - 20px);
  margin: 0 auto;
}

.offer-card {
  box-shadow: 10px 10px 0 0 #e5e0d9;
}

.container-bg {
  background: var(--background-image-url);
  background-size: cover;
  height: 600px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.image-full img,
.hero-img img {
  box-shadow: 10px 10px 0 0 #e5e0d9;
}

@media (width <= 1024px) {
  #sticky .sticky-content {
    background-size: cover;
    padding: 10px;
    border: none;
    background-image: var(--sticky-bg);
  }

  #sticky.top {
    height: 55px;
  }

  #sticky.top .sticky-logo {
    display: block;
    min-width: 15%;
    max-width: 35%;
  }

  #sticky.top .sticky-content {
    background: none;
    border-radius: 0;
    padding: 0 10px;
    gap: 2%;
  }

  #sticky.top .offer-section {
    width: auto;
    flex: 0 0 auto;
  }

  #sticky.top .offer-section .cta {
    padding: 0 10px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 21px;
    height: 25px;
  }
}

header .logo img,footer .logo-section img{width:180px;max-height:45px;height:auto}
.sticky .sticky-logo{width:150px;max-width:30%;height:auto;object-fit:contain}
a.nav-item{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #082f56;outline-offset:4px}
.image-full img,.hero-img img{height:auto}
.content-section.title-element h6{line-height:1.5}
@media(max-width:480px){.sticky .sticky-logo{width:105px}.sticky .offer-section{min-width:0}.sticky .offer-text{font-size:12px}}
#sticky{width:calc(100% - 32px);max-width:360px;height:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:0;right:0;padding:0;border:0;border-radius:14px;background:#082f56;box-shadow:0 6px 24px rgb(23 45 70 / 24%);z-index:1000}
#sticky .sticky-content{display:block;width:100%;max-width:none;padding:0;margin:0;border:0;border-radius:inherit;background:transparent;background-image:none;box-shadow:none}
#sticky .sticky-logo,#sticky .offer-text{display:none}
#sticky .offer-section{display:block;width:100%;min-width:0;padding:0;margin:0;flex:none}
#sticky .offer-section .cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;height:auto;box-sizing:border-box;margin:0;padding:16px 24px;border:0;border-radius:14px;background:#082f56;color:#fff;font-family:Inter,sans-serif;font-size:17px;font-weight:700;line-height:24px;text-decoration:none;box-shadow:none;transition:background-color 150ms ease}
#sticky .offer-section .cta:hover{background:#234362}
#sticky .offer-section .cta:focus-visible{outline:2px solid #fff;outline-offset:-6px}
@media(prefers-reduced-motion:reduce){#sticky,#sticky .offer-section .cta{transition:none}}

:root{--body-color:#f7f0df;--default-text-color:#102f4a;--main-color:#082f56;--main-color-blur:#8fd0e880;--bg-saving-section:#082f56;--footer-bg:#082f56;--related-section-bg:#082f56;--button-border:1px solid #082f56;--button-background:#f36e4b}
#app .header-wrapper header{width:100%;max-width:none;height:70px;padding-inline:max(20px,calc((100% - 940px)/2));background:#fffaf0;border-top:5px solid #f36e4b;border-bottom:3px solid #8fd0e8;box-sizing:border-box}
#app header .logo{margin:0;justify-content:flex-start}
#app header .logo img{display:block;width:260px;height:65px;max-height:none;object-fit:contain}
.header-advertorial{display:none}
#app .container-bg{top:70px;background-color:#082f56;background-image:none;height:490px;border-radius:0 0 48% 6% / 0 0 8% 2%}
#app .hero .subhead{color:#082f56;background:#8fd0e8;display:inline-block;padding:6px 12px;border-radius:4px;font-weight:800}
#app .content-section h2,#app .content-section h3{color:#082f56}
#app .image-full img,#app .hero-img img{box-shadow:8px 8px 0 #8fd0e8}
#app footer .logo-section{max-width:280px}
#app footer .logo-section img{width:280px;height:auto;max-height:none}
#sticky,#sticky .offer-section .cta{background:#082f56}
#sticky .offer-section .cta:hover{background:#164b76}
@media(max-width:600px){#app .header-wrapper header{height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px}#app header .logo{min-width:0;flex:1}#app header .logo img{width:min(190px,100%);height:52px}.header-advertorial{display:block;flex:0 0 auto;color:#082f56;font-family:Inter,sans-serif;font-size:12px;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.08em}.hero .subhead{display:none!important}#app .container-bg{top:60px;height:auto}#app footer .logo-section img{width:240px}}

/* Anchor the blue backdrop to the actual hero height at every screen size. */
#app .header-wrapper{position:relative;isolation:isolate;display:flow-root;overflow:hidden}
#app .header-wrapper .container-bg{bottom:4px;height:auto}
#app .header-wrapper .hero-img{margin-bottom:12px}
#app .header-wrapper + .content-section{margin-top:8px}
#app .header-wrapper + .content-section > p:first-child{margin-top:0}
@media(max-width:600px){#app .header-wrapper .container-bg{border-radius:0 0 20px 20px}}